/* ============================================================
   API & Integrations — page-specific decoration.

   The developer-leaning variant of the house style: same near-black
   surfaces, but BLUE leads (the interactive/dev colour) with cyan as
   the technical accent, and code blocks in a monospace stack. Green
   marks the no-code door and confirmations; yellow tints JSON numbers.

   Keyframes are global, so everything here is `api`-prefixed.

   THE KEY-REQUEST FORM IS REAL — it posts to /process_contact just
   like Contact, so its field names (type/name/email/message +
   recaptcha_response) must not change. The inputs are restated on
   every state because the theme styles bare inputs at 0,1,1.

   NOTE on <p>/<a>/<input>/<button>: the theme styles bare elements at
   specificity 0,1,1, which beats any single class here (0,1,0).
   Anything landing on one is scoped under `.xs-page`.
   ============================================================ */

@keyframes apiGlow{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:.85;transform:scale(1.06)}}
@keyframes apiFlowX{0%{transform:translateX(-120%)}100%{transform:translateX(340%)}}
@keyframes apiBlink{0%,100%{opacity:1}50%{opacity:.3}}

/* ---------- hero ---------- */
.api-hero{position:relative;min-height:82vh;display:flex;align-items:center;overflow:hidden;color:#fff;
	background:radial-gradient(circle at 74% 32%,#0d1a33,#04070f 60%)}
.api-hero__fade{position:absolute;inset:0 0 auto 0;height:300px;pointer-events:none;
	background:linear-gradient(180deg,var(--ink-900) 0,var(--ink-900) 130px,transparent 100%)}
.api-hero__glow{position:absolute;bottom:-160px;right:-120px;width:560px;height:560px;border-radius:50%;
	background:radial-gradient(circle,rgba(33,153,232,.24),transparent 62%);filter:blur(30px);
	animation:apiGlow 8s ease-in-out infinite;pointer-events:none}
.api-hero__inner{position:relative;width:100%;padding-top:calc(130px + clamp(1rem,3vw,2.5rem))}

/* ---------- the code card (hero + dev card + Claude flow reuse the shell) ---------- */
.api-code{background:#0b1120;border:1px solid rgba(255,255,255,.14);border-radius:16px;overflow:hidden;
	box-shadow:0 30px 70px rgba(0,0,0,.6);font-family:ui-monospace,Menlo,Consolas,monospace}
.api-code__bar{display:flex;align-items:center;gap:.5rem;padding:11px 14px;background:#111a2e;
	border-bottom:1px solid rgba(255,255,255,.06)}
.api-code__dot{width:11px;height:11px;border-radius:50%}
.api-code__dot--r{background:#ff5f57}.api-code__dot--y{background:#febc2e}.api-code__dot--g{background:#28c840}
.api-code__path{margin-left:.6rem;font-size:.7rem;color:rgba(255,255,255,.5)}
.api-code__body{padding:16px;font-size:.76rem;line-height:1.7;color:rgba(255,255,255,.85)}
.api-code__body .ln{white-space:pre}
.api-json-key{color:var(--cyan)}
.api-json-str{color:var(--success)}
.api-json-num{color:var(--gold-300)}
.api-json-punc{color:rgba(255,255,255,.4)}
.api-caret{display:inline-block;width:8px;height:14px;background:var(--cyan);margin-left:2px;
	vertical-align:middle;animation:apiBlink 1.1s steps(1) infinite}
/* the use-case chips under the hero card */
.api-chips{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}
.api-chip{font-size:.68rem;font-family:ui-monospace,monospace;border-radius:6px;padding:.3rem .6rem}
.api-chip--cyan{color:var(--cyan);background:rgba(0,212,255,.1);border:1px solid rgba(0,212,255,.3)}
.api-chip--green{color:var(--success);background:rgba(58,219,118,.1);border:1px solid rgba(58,219,118,.3)}
.api-chip--gold{color:var(--gold-300);background:rgba(255,214,107,.1);border:1px solid rgba(255,214,107,.3)}

/* ---------- framing band (two doors, small) ---------- */
.api-doors{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;max-width:760px;margin:0 auto}
.api-door{flex:1 1 300px;background:#0b1120;border-radius:14px;padding:20px;text-align:left}
.api-door--green{border:1px solid rgba(58,219,118,.3)}
.api-door--blue{border:1px solid rgba(33,153,232,.35)}
.api-door__head{display:flex;align-items:center;gap:.6rem}
.api-door__head i{font-size:1.1rem}
.api-door--green .api-door__head i{color:var(--success)}
.api-door--blue .api-door__head i{color:var(--blue-500)}
.api-door__name{font-family:var(--font-display);color:#fff;font-size:1.1rem}
.xs-page .api-door__body{font-size:.95rem;line-height:1.5;color:rgba(255,255,255,.7);margin:.6rem 0 0}

/* ---------- the shared-spine diagram ---------- */
.api-spine{display:flex;flex-wrap:wrap;align-items:stretch;justify-content:center;gap:0}
.api-spine__col{flex:1 1 260px;min-width:240px;display:flex;flex-direction:column;gap:8px;justify-content:center}
.api-spine__k{font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.45);
	text-align:center;margin-bottom:.3rem}
.api-node{background:#0b1120;border:1px solid rgba(255,255,255,.1);border-radius:9px;padding:11px 13px;
	display:flex;align-items:center;gap:.6rem;font-size:.85rem;color:#fff}
.api-node i{font-size:.8rem;flex:none}
.api-node--in i{color:var(--blue-500)}
.api-node--out{border-color:rgba(0,212,255,.25)}
.api-node--out i{color:var(--cyan)}
/* the central REST node + its flowing connectors */
.api-spine__core{flex:0 1 220px;min-width:200px;display:flex;flex-direction:column;align-items:center;
	justify-content:center;padding:1.4rem 0}
.api-flow{position:relative;width:100%;height:3px;overflow:hidden;border-radius:2px;background:rgba(255,255,255,.08)}
.api-flow--top{margin-bottom:1rem}
.api-flow--bottom{margin-top:1rem}
.api-flow__seg{position:absolute;top:0;width:30%;height:100%;animation:apiFlowX 2.2s linear infinite}
.api-flow--top .api-flow__seg{background:linear-gradient(90deg,transparent,var(--blue-500))}
.api-flow--bottom .api-flow__seg{background:linear-gradient(90deg,transparent,var(--cyan));animation-delay:.6s}
.api-restnode{width:132px;height:132px;border-radius:26px;background:linear-gradient(160deg,#0a2233,#0b1120);
	border:1px solid rgba(0,212,255,.5);display:flex;flex-direction:column;align-items:center;
	justify-content:center;box-shadow:0 24px 60px rgba(0,212,255,.2)}
.api-restnode i{color:var(--cyan);font-size:2rem}
.api-restnode__t{font-family:var(--font-display);color:#fff;font-size:.95rem;margin-top:.5rem}
.api-restnode__s{font-size:.6rem;color:rgba(255,255,255,.5)}
.xs-page .api-spine__cap{max-width:820px;margin:1.8rem auto 0;text-align:center;
	color:rgba(255,255,255,.55);font-size:.95rem}
.xs-page .api-spine__cap a{color:var(--blue-500);text-decoration:none}
.xs-page .api-spine__cap a:hover{text-decoration:underline}

/* ---------- what people built ---------- */
.api-marquee{background:#0b1120;border:1px solid rgba(0,212,255,.4);border-radius:18px;overflow:hidden;
	box-shadow:0 30px 70px rgba(0,0,0,.6)}
.api-marquee__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.6rem;
	padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.08)}
.api-marquee__k{display:inline-flex;align-items:center;gap:.5rem;font-size:.64rem;font-weight:700;
	letter-spacing:.1em;text-transform:uppercase;color:var(--cyan);margin-bottom:.3rem}
.api-marquee__title{font-family:var(--font-display);font-weight:400;font-size:clamp(1.3rem,3vw,1.9rem);
	margin:0;color:#fff}
.xs-page .api-marquee__by{font-size:.9rem;color:rgba(255,255,255,.65);margin:.2rem 0 0}
.api-src{font-size:.66rem;font-weight:700;font-family:ui-monospace,monospace;color:var(--success);
	background:rgba(58,219,118,.1);border:1px solid rgba(58,219,118,.3);border-radius:6px;
	padding:.35rem .7rem;white-space:nowrap;flex:none}
.api-marquee__shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:0}
.api-marquee__shots figure{margin:0}
.api-marquee__shots figure:first-child{border-right:1px solid rgba(255,255,255,.06)}
.api-marquee__shots img{width:100%;height:auto;display:block}
.api-marquee__chips{padding:14px 20px;display:flex;flex-wrap:wrap;gap:8px;border-top:1px solid rgba(255,255,255,.06)}
.api-tag{font-size:.72rem;color:rgba(255,255,255,.7);background:#0f1830;border:1px solid rgba(255,255,255,.1);
	border-radius:999px;padding:.35rem .75rem}

/* 3-up build cards */
.api-build{background:#0b1120;border:1px solid rgba(255,255,255,.12);border-radius:14px;overflow:hidden}
.api-build__shot{aspect-ratio:16/10;overflow:hidden;background:#0a0f1c;border-bottom:1px solid rgba(255,255,255,.06)}
.api-build__shot img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.api-build__shot img.is-center{object-position:center}
.api-build__body{padding:16px}
.api-build__name{font-family:var(--font-display);color:#fff;font-size:1.1rem}
.xs-page .api-build__desc{font-size:.9rem;line-height:1.5;color:rgba(255,255,255,.7);margin:.5rem 0 0}
.xs-page .api-disclaimer{max-width:820px;margin:1.6rem auto 0;text-align:center;
	color:rgba(255,255,255,.45);font-size:.82rem}

/* ---------- two ways (big doors) ---------- */
.api-way{border-radius:16px;padding:26px}
.api-way--green{background:linear-gradient(160deg,#0c2417,#0b1120);border:1px solid rgba(58,219,118,.4)}
.api-way--blue{background:linear-gradient(160deg,#0a2233,#0b1120);border:1px solid rgba(33,153,232,.45)}
.api-way__k{display:inline-flex;align-items:center;gap:.5rem;font-size:.64rem;font-weight:700;
	letter-spacing:.08em;text-transform:uppercase;margin-bottom:.8rem}
.api-way--green .api-way__k{color:var(--success)}
.api-way--blue .api-way__k{color:var(--blue-500)}
.xs-page .api-way__title{font-family:var(--font-display);font-weight:400;font-size:1.5rem;margin:0;color:#fff}
.xs-page .api-way__body{font-size:1.02rem;line-height:1.6;color:rgba(255,255,255,.78);margin:.9rem 0 0}
.xs-page .api-way__link,
.xs-page .api-way__link:link,
.xs-page .api-way__link:visited{display:inline-flex;align-items:center;gap:.5rem;font-size:.92rem;
	text-decoration:none;margin-top:1rem}
.xs-page .api-way--green .api-way__link{color:var(--success)}
.xs-page .api-way--blue .api-way__link{color:var(--blue-500)}
.xs-page .api-way__link:hover{text-decoration:underline}

/* ---------- Claude flow (no developer) ---------- */
.api-flowcard{background:#0b1120;border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:20px;
	box-shadow:0 30px 70px rgba(0,0,0,.6)}
.api-flowrow{display:flex;align-items:center;gap:.6rem;background:#0f1830;border:1px solid rgba(255,255,255,.1);
	border-radius:10px;padding:12px 14px}
.api-flowrow__badge{width:22px;height:22px;flex:none;border-radius:6px;background:var(--cyan);color:#04070f;
	display:flex;align-items:center;justify-content:center;font-size:.62rem;font-family:var(--font-display)}
.xs-page .api-flowrow span{font-size:.86rem;color:rgba(255,255,255,.8)}
.api-flowarrow{text-align:center;color:var(--cyan);font-size:1.2rem;padding:.5rem 0}
.api-flowcode{background:#0a0f1c;border:1px solid rgba(0,212,255,.25);border-radius:10px;padding:12px 14px;
	font-family:ui-monospace,monospace;font-size:.72rem;color:rgba(255,255,255,.8);word-break:break-all}
.api-flowcode .verb{color:var(--success)}
.api-flowdone{display:flex;align-items:center;gap:.6rem;background:rgba(58,219,118,.08);
	border:1px solid rgba(58,219,118,.3);border-radius:10px;padding:12px 14px}
.api-flowdone i{color:var(--success);flex:none}
.xs-page .api-flowdone span{font-size:.86rem;color:#fff}
.xs-page .api-inline-link,
.xs-page .api-inline-link:link,
.xs-page .api-inline-link:visited{display:inline-flex;align-items:center;gap:.5rem;color:var(--cyan);
	font-size:.95rem;text-decoration:none}
.xs-page .api-inline-link:hover{text-decoration:underline}

/* ---------- dev card + key form ---------- */
.api-dev{background:#0b1120;border:1px solid rgba(255,255,255,.14);border-radius:16px;overflow:hidden;
	box-shadow:0 30px 70px rgba(0,0,0,.6);display:flex;flex-direction:column}
.api-dev__bar{padding:14px 16px;background:#111a2e;display:flex;align-items:center;gap:.5rem;
	font-family:ui-monospace,monospace;font-size:.74rem;color:rgba(255,255,255,.6)}
.api-dev__bar i{color:var(--blue-500)}
.api-dev__body{padding:16px;flex:1}
.api-dev__k{font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:.5rem}
.api-dev__req{background:#0a0f1c;border:1px solid rgba(255,255,255,.08);border-radius:9px;padding:12px 14px;
	font-family:ui-monospace,monospace;font-size:.74rem;color:rgba(255,255,255,.85);line-height:1.7}
.api-dev__req .verb{color:var(--success)}
.api-dev__req .lbl{color:rgba(255,255,255,.4)}
.api-dev__req .val{color:var(--cyan)}
.api-dev__where{display:flex;flex-direction:column;gap:7px}
.api-dev__where div{display:flex;align-items:center;gap:.6rem;font-size:.85rem;color:rgba(255,255,255,.78)}
.api-dev__where i{color:var(--blue-500);font-size:.8rem;flex:none}
.api-dev__foot{padding:0 16px 16px}
.xs-page .api-dev__cta{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%}

/* key-request form */
.api-keyform{background:linear-gradient(160deg,#0a2233,#0b1120);border:1px solid rgba(0,212,255,.4);
	border-radius:16px;padding:22px;box-shadow:0 30px 70px rgba(0,0,0,.6)}
.xs-page .api-keyform__title{font-family:var(--font-display);font-weight:400;font-size:1.4rem;margin:0;color:#fff}
.xs-page .api-keyform__sub{font-size:.95rem;line-height:1.5;color:rgba(255,255,255,.7);margin:.5rem 0 1.2rem}
.api-field{margin-bottom:12px}
.api-field__label{display:block;font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;
	color:rgba(255,255,255,.55);margin-bottom:.4rem}
.xs-page .api-input{width:100%;display:block;background:#0a0f1c;color:#fff;
	border:1px solid rgba(255,255,255,.14);border-radius:9px;padding:.7rem .9rem;
	font-family:var(--font-body);font-size:.92rem;line-height:1.4;box-shadow:none;margin:0;height:auto;
	transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
.xs-page .api-input::placeholder{color:rgba(255,255,255,.34);text-transform:none;letter-spacing:normal}
.xs-page .api-input::-webkit-input-placeholder{color:rgba(255,255,255,.34);text-transform:none}
.xs-page .api-input:hover{background:#0a0f1c;border-color:rgba(255,255,255,.24)}
.xs-page .api-input:focus{background:#0a0f1c;border-color:var(--cyan);outline:none;
	box-shadow:0 0 0 3px rgba(0,212,255,.2)}
.xs-page .api-submit{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;margin-top:.3rem}
.api-keyform__note{font-size:.72rem;color:rgba(255,255,255,.4);text-align:center;margin-top:.7rem}
/* honeypot */
.api-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* validation error from the controller */
.api-error{background:rgba(255,107,107,.1);border:1px solid rgba(255,107,107,.42);border-radius:10px;
	padding:.8rem 1rem;margin-bottom:1rem;font-size:.9rem;line-height:1.5;color:#fff}
.api-error i{color:var(--coral);margin-right:.4rem}
/* success panel */
.api-sent{background:rgba(58,219,118,.1);border:1px solid rgba(58,219,118,.4);border-radius:12px;
	padding:22px;text-align:center}
.api-sent__ring{font-size:2rem;color:var(--success)}
.api-sent__t{font-family:var(--font-display);color:#fff;font-size:1.2rem;margin-top:.5rem}
.xs-page .api-sent__b{font-size:.92rem;color:rgba(255,255,255,.7);margin:.4rem 0 0}

/* ---------- close ---------- */
.api-close{position:relative;overflow:hidden;text-align:center;
	background:linear-gradient(150deg,var(--navy-900),#0d1a33)}
.api-close__glow{position:absolute;top:-120px;left:50%;transform:translateX(-50%);width:640px;height:420px;
	background:radial-gradient(circle,rgba(33,153,232,.32),transparent 65%);filter:blur(26px);pointer-events:none}
.api-close__links{margin-top:1.8rem;display:flex;flex-wrap:wrap;justify-content:center;gap:1.2rem;font-size:.9rem}
.xs-page .api-close__links a,
.xs-page .api-close__links a:link,
.xs-page .api-close__links a:visited{color:rgba(255,255,255,.6);text-decoration:none}
.xs-page .api-close__links a:hover{color:#fff}

@media (prefers-reduced-motion:reduce){
	.api-hero__glow,.api-flow__seg,.api-caret{animation:none}
}