/* Caelion. Cool paper, navy ink, one blue for action, cyan only where the mark uses it.
   The product itself appears as a dark object (the console) on the light page, so the two
   supplied lockups each have a job: light in the chrome, dark inside the object and the footer.
   Contrast for every text role was verified with the rolodex contrast tool; see design.md. */

@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url('/fonts/manrope-var-latin.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/ibm-plex-mono-400-latin.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/ibm-plex-mono-500-latin.woff2') format('woff2')}

:root{
  --paper:#f6f8fc;--surface:#eef2f9;--hairline:#d9e0ec;--hairline-strong:#c3cddd;
  --ink:#0f1b3d;--muted:#44506b;--faint:#5a6985;
  /* Brand blue is 4.37:1 on paper: large text, fills and decoration only. Deep carries small text and links. */
  --blue:#2f6fe4;--blue-deep:#1d4fc0;--blue-rgb:47,111,228;
  --cyan:#1ebbe5;
  /* The console object. */
  --con:#0b1430;--con-surface:#111d40;--con-line:#22305c;--con-text:#e8edf8;--con-dim:#a7b3cc;--con-cyan:#3ed0f0;--con-blue:#6a9dff;
  --display:'Manrope','Segoe UI',system-ui,sans-serif;--body:'Manrope','Segoe UI',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --s4:4px;--s8:8px;--s12:12px;--s16:16px;--s24:24px;--s32:32px;--s48:48px;--s64:64px;--s96:96px;--s128:128px;
  --radius:6px;--radius-lg:14px;
  --wrap:1180px;
  /* Elevation. A soft, cool, navy-tinted shadow set so surfaces read as lifted paper rather than
     boxed outlines. Layered (a tight contact shadow plus a wide ambient one) for a premium feel. */
  --shadow-sm:0 1px 2px rgba(15,27,61,.04),0 3px 10px -4px rgba(15,27,61,.08);
  --shadow-md:0 2px 4px rgba(15,27,61,.04),0 14px 34px -14px rgba(15,27,61,.14);
  --shadow-lg:0 4px 8px rgba(15,27,61,.05),0 30px 60px -22px rgba(15,27,61,.22);
  --ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:88px;color-scheme:light}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
/* Grid and flex children default to min-width:auto, which lets a <pre> with a long line push the
   whole column past the viewport. Every layout child here is allowed to shrink. */
.hero-grid>*,.split>*,.flow__step,.console-page>*,.band-inner>*,.access-grid>*,.connector-col,.statement-grid>*{min-width:0}
pre{max-width:100%}
a{color:var(--blue-deep)}
/* Interactive controls: remove the 300ms double-tap delay and set the tap flash intentionally
   to the brand ink instead of the browser's default black. */
a,button,.button,.text-link,.nav-toggle,summary,label,input,textarea{touch-action:manipulation;-webkit-tap-highlight-color:rgba(15,27,61,.12)}
h1,h2,h3{font-family:var(--display);margin:0;line-height:1.08;letter-spacing:-.02em;text-wrap:balance;font-weight:800}
h1{font-size:clamp(2.4rem,5.4vw,4.4rem)}
h2{font-size:clamp(1.8rem,3.4vw,2.7rem)}
h3{font-size:1.25rem;line-height:1.25}
h1 em,h2 em{font-style:normal;background:linear-gradient(90deg,var(--cyan),var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent}
p{margin:0}
p+p{margin-top:var(--s16)}
.lead{font-size:1.15rem;line-height:1.6;color:var(--muted);max-width:56ch;text-wrap:pretty}
.eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--blue-deep);margin:0 0 var(--s16);font-weight:500}
.container{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--s24)}
.section{padding-block:var(--s64)}
.section-alt{background:var(--surface);border-block:1px solid var(--hairline);padding-block:var(--s64)}
@media (min-width:900px){.section,.section-alt{padding-block:var(--s96)}}
.section-intro{max-width:64ch;margin-bottom:var(--s48)}
.section-intro h2+p{margin-top:var(--s16)}
.section-more{margin-top:var(--s32)}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--blue-deep);outline-offset:3px;border-radius:2px}
::selection{background:var(--blue-deep);color:#fff}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* Controls */
.button{display:inline-flex;align-items:center;gap:var(--s8);min-height:48px;padding:12px 22px;border-radius:var(--radius);background:linear-gradient(180deg,var(--blue-deep),#173d92);color:#fff;text-decoration:none;font-weight:600;border:1px solid #173d92;box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 6px 16px -10px rgba(var(--blue-rgb),.55);transition:transform .18s var(--ease),box-shadow .18s var(--ease),filter .18s var(--ease);font-family:var(--body);font-size:1rem;cursor:pointer}
.button:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.16) inset,0 12px 28px -12px rgba(var(--blue-rgb),.65)}
.button:active{transform:translateY(0);filter:brightness(.98)}
.button.secondary{background:#fff;color:var(--ink);border-color:var(--hairline-strong);box-shadow:var(--shadow-sm)}
.button.secondary:hover{filter:none;border-color:var(--blue-deep);color:var(--blue-deep);box-shadow:var(--shadow-md)}
.text-link{display:inline-flex;align-items:center;gap:var(--s8);color:var(--blue-deep);font-weight:600;text-decoration:none;min-height:44px;border-bottom:1px solid transparent;transition:border-bottom-color .15s}
.text-link:hover{border-bottom-color:var(--blue-deep)}
/* The trailing arrow nudges right on hover/focus. Transform only, so no layout reflow; the global
   reduced-motion rule disables the transition for anyone who asked for less movement. */
.button span[aria-hidden],.text-link span[aria-hidden]{transition:transform .15s}
.button:hover span[aria-hidden],.text-link:hover span[aria-hidden],.button:focus-visible span[aria-hidden],.text-link:focus-visible span[aria-hidden]{transform:translateX(3px)}
.skip{position:absolute;top:-100px;left:16px;z-index:30;padding:12px 20px;background:var(--ink);color:var(--paper);border-radius:var(--radius)}
.skip:focus{top:12px}

/* Header */
.site-header{position:sticky;top:0;z-index:20;background:rgba(246,248,252,.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--hairline)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s24);min-height:72px}
.brand img{height:36px;width:auto}
nav[aria-label="Primary"]{display:flex;align-items:center;gap:var(--s24)}
nav[aria-label="Primary"] a:not(.button){color:var(--muted);text-decoration:none;font-weight:600;font-size:.95rem;padding:10px 0;border-bottom:2px solid transparent}
nav[aria-label="Primary"] a:not(.button):hover{color:var(--ink)}
nav[aria-label="Primary"] a[aria-current="page"]:not(.button){color:var(--ink);border-bottom-color:var(--blue)}
.cta-nav{min-height:42px;padding:8px 16px;font-size:.95rem}
.nav-toggle{display:none;align-items:center;gap:var(--s8);min-height:44px;padding:8px 12px;background:transparent;border:1px solid var(--hairline-strong);border-radius:var(--radius);color:var(--ink);font:inherit;font-weight:600;cursor:pointer}
.nav-toggle__bars{width:18px;height:2px;background:currentColor;box-shadow:0 -6px 0 currentColor,0 6px 0 currentColor;display:inline-block}
@media (max-width:899px){
  .nav-toggle{display:inline-flex}
  nav[aria-label="Primary"]{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;background:var(--paper);border-bottom:1px solid var(--hairline);padding:var(--s8) var(--s24) var(--s24);box-shadow:0 24px 40px -24px rgba(15,27,61,.35)}
  .site-header[data-open] nav[aria-label="Primary"]{display:flex}
  nav[aria-label="Primary"] a:not(.button){padding:14px 0;border-bottom:1px solid var(--hairline);font-size:1.05rem}
  nav[aria-label="Primary"] a[aria-current="page"]:not(.button){border-bottom-color:var(--hairline);color:var(--blue-deep)}
  .cta-nav{margin-top:var(--s16);justify-content:center}
}

/* Hero */
.hero{position:relative;overflow:hidden;padding-block:var(--s64) var(--s48);border-bottom:1px solid var(--hairline)}
@media (min-width:900px){.hero{padding-block:var(--s96) var(--s64)}}
/* No decorative background in the hero. A ray-fan version of the mark was tried here and, once
   it obeyed the rule that it may not sit behind text, only a sliver was ever visible at common
   laptop widths; the independent visual review read it as an artefact. The console object is
   the hero's visual, and the mark's gradient survives in the h1 emphasis and the flow rules. */
.hero-object{position:relative}
/* A soft brand-gradient aura behind the console object. It sits behind the object, never behind
   text, so it keeps the design's rule while giving the focal point depth and glow. */
.hero-object::before{content:"";position:absolute;inset:-10% -8% -12% -8%;z-index:-1;background:radial-gradient(58% 58% at 72% 38%,rgba(47,111,228,.18),rgba(30,187,229,.09) 46%,transparent 72%);filter:blur(6px);pointer-events:none}
.hero-grid{position:relative;z-index:1;display:grid;gap:var(--s48);align-items:center}
@media (min-width:1000px){.hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:var(--s64)}}
.hero-copy .lead{margin-top:var(--s24)}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--s16) var(--s24);align-items:center;margin-top:var(--s32)}
.hero-note{margin-top:var(--s24);font-family:var(--mono);font-size:.78rem;color:var(--faint)}

/* The console object */
.console{margin:0;background:var(--con);color:var(--con-text);border-radius:var(--radius-lg);border:1px solid var(--con-line);box-shadow:0 2px 6px rgba(11,20,48,.28),0 44px 90px -38px rgba(11,20,48,.55),0 0 0 1px rgba(255,255,255,.05) inset,0 1px 0 rgba(255,255,255,.07) inset;overflow:hidden;font-size:.86rem}
.console__bar{display:flex;align-items:center;gap:var(--s12);padding:11px 18px;border-bottom:1px solid var(--con-line);background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,0));font-family:var(--mono);font-size:.72rem;color:var(--con-dim)}
.console__ws{color:var(--con-text)}
.console__mode{margin-left:auto;color:var(--con-cyan)}
.live{width:8px;height:8px;border-radius:50%;background:var(--con-cyan);box-shadow:0 0 0 3px rgba(62,208,240,.18);display:inline-block;flex:none;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px rgba(62,208,240,.18)}50%{box-shadow:0 0 0 6px rgba(62,208,240,.06)}}
.console__log{list-style:none;margin:0;padding:var(--s8) 0}
/* Each event gets real breathing room, a colored accent bar, a soft kind-tinted wash from the
   accent edge, and a filled pill badge, so catalyst / foundry / reaction / answer read as
   distinct at a glance instead of a single dense column of text. */
.ev{padding:12px 18px;border-left:4px solid transparent}
.ev+.ev{border-top:1px solid var(--con-line)}
.ev{border-left-width:5px}
.ev--catalyst{border-left-color:var(--con-cyan);background:linear-gradient(90deg,rgba(62,208,240,.12),rgba(62,208,240,.02) 55%,transparent 80%)}
.ev--foundry{border-left-color:var(--con-blue);background:linear-gradient(90deg,rgba(106,157,255,.13),rgba(106,157,255,.02) 55%,transparent 80%)}
.ev--reaction{border-left-color:#fff;background:linear-gradient(90deg,rgba(255,255,255,.1),rgba(255,255,255,.02) 55%,transparent 80%)}
.ev--you{border-left-color:var(--con-line);background:var(--con-surface)}
.ev--answer{border-left-color:var(--con-cyan);background:linear-gradient(90deg,rgba(62,208,240,.14),rgba(62,208,240,.03) 55%,transparent 80%)}
.ev__head{display:flex;flex-wrap:wrap;gap:var(--s8) var(--s12);align-items:center;font-family:var(--mono);font-size:.72rem;color:var(--con-dim)}
.ev__kind{display:inline-flex;align-items:center;padding:2px 9px;border-radius:999px;text-transform:uppercase;letter-spacing:.1em;font-size:.62rem;font-weight:600;background:rgba(255,255,255,.14);color:var(--con)}
.ev--catalyst .ev__kind{background:var(--con-cyan);color:#04121c}
.ev--foundry .ev__kind{background:var(--con-blue);color:#0a1330}
.ev--reaction .ev__kind{background:#eef2fb;color:var(--con)}
.ev--answer .ev__kind{background:var(--con-cyan);color:#04121c}
.ev--you .ev__kind{background:rgba(255,255,255,.16);color:var(--con-text)}
.ev__src{color:var(--con-dim)}
.ev__at{margin-left:auto;font-variant-numeric:tabular-nums;letter-spacing:.04em}
.ev__text{margin-top:var(--s8);line-height:1.5;font-size:.9rem;color:var(--con-text)}
.ev__records{list-style:none;margin:var(--s12) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.rec{display:inline-flex;align-items:center;min-height:26px;padding:2px 10px;border-radius:999px;border:1px solid var(--con-line);background:rgba(255,255,255,.03);font-family:var(--mono);font-size:.7rem;color:var(--con-dim)}
.ev__code{margin:var(--s8) 0 0;padding:10px 13px;background:rgba(255,255,255,.03);border:1px solid var(--con-line);border-radius:var(--radius);font-family:var(--mono);font-size:.74rem;line-height:1.55;color:var(--con-dim);overflow-x:auto}
.ev__actions{display:flex;flex-wrap:wrap;gap:var(--s8);margin-top:var(--s12)}
.chip{display:inline-flex;align-items:center;min-height:32px;padding:5px 13px;border-radius:999px;border:1px solid var(--con-line);color:var(--con-text);font-size:.8rem;font-weight:600;transition:background .15s,border-color .15s,color .15s}
.chip--primary{background:var(--con-cyan);border-color:var(--con-cyan);color:var(--con)}
.console__ask{display:flex;align-items:center;gap:var(--s12);padding:12px 18px;border-top:1px solid var(--con-line);background:var(--con-surface);font-family:var(--mono);font-size:.82rem;color:var(--con-text)}
.console__prompt{color:var(--con-cyan)}
.console__cursor{width:8px;height:16px;background:var(--con-cyan);display:inline-block;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
/* Slack and the light-page chips: on the light page the chip stack is shown inside a card. */
.slack .chip{border-color:var(--hairline-strong);color:var(--ink)}
.slack .chip--primary{background:var(--blue-deep);border-color:var(--blue-deep);color:#fff}

/* Statement */
.statement{position:relative;overflow:hidden;padding-block:var(--s64);background:var(--ink);color:var(--paper)}
/* A faint aurora in the upper corner so the navy moment reads as lit, not a flat block. Behind
   the eyebrow/heading only in the sense of the section band; kept low enough not to touch legibility. */
.statement::before{content:"";position:absolute;top:-40%;right:-10%;width:60%;height:160%;background:radial-gradient(50% 50% at 50% 50%,rgba(62,208,240,.14),transparent 70%);pointer-events:none}
.statement>.container{position:relative}
@media (min-width:900px){.statement{padding-block:var(--s96)}}
.statement .eyebrow{color:var(--con-cyan)}
.statement h2{font-size:clamp(2rem,4.6vw,3.6rem);max-width:22ch}
.statement-grid{display:grid;gap:var(--s24);margin-top:var(--s48);max-width:76rem}
@media (min-width:900px){.statement-grid{grid-template-columns:1fr 1fr;gap:var(--s48)}}
.statement-grid p{color:var(--con-dim);font-size:1.08rem;line-height:1.65;margin:0}

/* The three primitives */
.flow{list-style:none;margin:0;padding:0;display:grid;gap:var(--s32);counter-reset:none}
@media (min-width:900px){.flow{grid-template-columns:repeat(3,1fr);gap:var(--s48)}}
.flow__step{position:relative;padding-top:var(--s24);border-top:2px solid var(--hairline-strong)}
.flow__step::before{content:"";position:absolute;top:-2px;left:0;width:56px;height:2px;background:linear-gradient(90deg,var(--cyan),var(--blue))}
.flow__num{font-family:var(--mono);font-size:.74rem;color:var(--faint);letter-spacing:.14em}
.flow__name{margin-top:var(--s8);font-size:1.6rem;line-height:1.15}
.flow__short{margin-top:var(--s4);font-weight:600;color:var(--blue-deep)}
.flow__step p:not(.flow__short){margin-top:var(--s12);color:var(--muted)}
.how-flow .flow{gap:var(--s48)}
/* On /how-it-works/ each step is definition beside YAML. The left column has four items; the
   rows are auto except the last, which absorbs the slack, so the YAML's height never stretches
   gaps between the number, name and short line. */
@media (min-width:900px){.how-flow .flow{grid-template-columns:1fr;max-width:1180px}.how-flow .flow__step{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-rows:auto auto auto 1fr;column-gap:var(--s48);row-gap:0;align-items:start}.how-flow .flow__step>*:not(.yaml){grid-column:1}.how-flow .flow__step .yaml{grid-column:2;grid-row:1/span 4;margin-top:0}}

/* Code. The UA sheet sets code{font-family:monospace}, which beats inheritance from the block,
   so without this every sample would render in Consolas while Plex Mono sat loaded and unused. */
pre code{font:inherit;color:inherit}
.yaml{margin:var(--s24) 0 0;padding:16px 18px;background:#fff;border:1px solid var(--hairline);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);font-family:var(--mono);font-size:.82rem;line-height:1.55;color:var(--ink);overflow-x:auto;tab-size:2}
.yaml--dark{background:var(--con);color:var(--con-text);border-color:var(--con-line);box-shadow:0 2px 6px rgba(11,20,48,.24),0 34px 64px -38px rgba(11,20,48,.55),0 1px 0 rgba(255,255,255,.06) inset}
.split .yaml{margin-top:0}

/* Connectors */
.connector-columns{display:grid;gap:var(--s32)}
@media (min-width:800px){.connector-columns{grid-template-columns:repeat(3,1fr);gap:var(--s48)}}
.connector-col h3,.connector-group h2{display:flex;align-items:center;gap:var(--s12)}
.connector-col ul{list-style:none;margin:var(--s16) 0 0;padding:0;columns:1}
.connector-col li{padding:10px 0;border-top:1px solid var(--hairline);font-weight:600}
.dir{width:14px;height:14px;border-radius:50%;flex:none;display:inline-block;background:linear-gradient(135deg,var(--cyan),var(--blue))}
.dir--out{background:var(--ink)}
.dir--both{background:conic-gradient(var(--cyan) 0 50%,var(--ink) 50% 100%)}
.connectors-full{display:grid;gap:var(--s64)}
.connector-group h2{font-size:1.6rem}
.connector-list{display:grid;gap:var(--s16) var(--s48);margin:var(--s24) 0 0}
@media (min-width:800px){.connector-list{grid-template-columns:1fr 1fr}}
.connector-list>div{padding:14px 0;border-top:1px solid var(--hairline)}
.connector-list dt{font-weight:700}
.connector-list dd{margin:var(--s4) 0 0;color:var(--muted)}

/* Compare */
.table-wrap{overflow-x:auto;border:1px solid var(--hairline);border-radius:var(--radius-lg);background:#fff;box-shadow:var(--shadow-md)}
.compare{width:100%;border-collapse:collapse;min-width:640px}
.compare th,.compare td{text-align:left;vertical-align:top;padding:16px 18px;border-top:1px solid var(--hairline);font-size:.98rem;line-height:1.5}
.compare thead th{border-top:0;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-weight:500;padding-block:12px}
.compare tbody th{font-weight:700;width:20%}
.compare td{color:var(--muted)}
.compare .us{background:var(--surface);color:var(--ink)}
.compare thead .us{color:var(--blue-deep)}
/* Below 640px the table stacks: each row becomes a block with the column names written in from
   data-col, so the Caelion column is read rather than scrolled to. */
@media (max-width:640px){
  .compare{min-width:0}
  .compare thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .compare tbody,.compare tr,.compare th,.compare td{display:block}
  .compare tr{border-top:1px solid var(--hairline);padding:var(--s8) 0}
  .compare tr:first-child{border-top:0}
  .compare tbody th{width:auto;border-top:0;padding:12px 16px 4px;font-size:1.05rem}
  .compare td{border-top:0;padding:8px 16px}
  .compare td::before{content:attr(data-col);display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:4px}
  .compare td.us::before{color:var(--blue-deep)}
  .compare td.us{margin:4px 8px 8px;border-radius:var(--radius);padding:10px 12px}
}

/* Splits and bands */
.split{display:grid;gap:var(--s32);align-items:center}
@media (min-width:900px){.split{grid-template-columns:1fr 1fr;gap:var(--s64)}.split--rev>:first-child{order:2}}
.split .text-link{margin-top:var(--s24)}
.split .lead{margin-top:var(--s16)}
.band{background:var(--ink);color:var(--paper);padding-block:var(--s64)}
.band .eyebrow{color:var(--con-cyan)}
.band .lead{color:var(--con-dim)}
.band-inner{display:grid;gap:var(--s32);align-items:center}
@media (min-width:900px){.band-inner{grid-template-columns:1.2fr .8fr}}
.band-actions{display:flex;flex-wrap:wrap;gap:var(--s16) var(--s24);align-items:center}
@media (min-width:900px){.band-actions{justify-content:flex-end}}
.band .button{background:var(--con-cyan);border-color:var(--con-cyan);color:var(--con)}
.band .button:hover{background:#5fdaf4}
.band .text-link{color:var(--paper)}
.band .text-link:hover{border-bottom-color:var(--paper)}
.band h2{margin-top:0}

/* Page hero */
.page-hero{padding-block:var(--s64) var(--s32);border-bottom:1px solid var(--hairline)}
@media (min-width:900px){.page-hero{padding-block:var(--s96) var(--s48)}}
.page-hero .lead{margin-top:var(--s24)}
.page-hero h1{max-width:18ch}

/* Loop strip */
.loop-strip{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s12) var(--s16);font-family:var(--mono);font-size:.9rem;font-weight:500;padding:var(--s24);background:#fff;border:1px solid var(--hairline);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.loop-strip>span:not(.loop-arrow){padding:6px 12px;border-radius:999px;background:var(--surface);border:1px solid var(--hairline)}
.loop-arrow{color:var(--blue-deep)}
.loop-return{color:var(--cyan)}

/* FAQ and definition lists */
.faq-list,.points,.api-list{margin:0;display:grid;gap:0}
.faq-list>div,.points>div,.api-list>div{padding:var(--s24) 0;border-top:1px solid var(--hairline)}
.faq-list dt,.points dt{font-weight:700;font-size:1.15rem}
.faq-list dd,.points dd,.api-list dd{margin:var(--s8) 0 0;color:var(--muted);max-width:70ch}
.api-list{border-radius:var(--radius-lg);background:#fff;border:1px solid var(--hairline);box-shadow:var(--shadow-md);padding:0 var(--s24)}
.api-list>div:first-child{border-top:0}
.api-list dt code{font-family:var(--mono);font-size:.9rem;color:var(--blue-deep);font-weight:500}
.faq{max-width:none}

/* Console page */
.console-page{display:grid;gap:var(--s48)}
@media (min-width:1000px){.console-page{grid-template-columns:1.1fr .9fr;gap:var(--s64);align-items:start}}
.slack{max-width:640px;margin-top:var(--s8)}
.slack__msg{display:grid;grid-template-columns:40px 1fr;gap:var(--s12);padding:var(--s24);background:#fff;border:1px solid var(--hairline);border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}
.slack__avatar{width:40px;height:40px;border-radius:var(--radius);background:var(--con);color:var(--con-cyan);display:grid;place-items:center;font-weight:800}
.slack__meta{font-size:.9rem;color:var(--muted)}
.slack__meta span{font-family:var(--mono);font-size:.62rem;padding:1px 5px;border:1px solid var(--hairline-strong);border-radius:3px;margin:0 6px;letter-spacing:.06em}
.slack__chips{display:flex;flex-wrap:wrap;gap:var(--s8);margin-top:var(--s12)}

/* Early access */
.access-grid{display:grid;gap:var(--s48)}
@media (min-width:900px){.access-grid{grid-template-columns:1.2fr .8fr;gap:var(--s64);align-items:start}}
.access-form{display:grid;gap:var(--s24);grid-template-columns:1fr 1fr}
.field{display:grid;gap:var(--s8)}
.field--wide{grid-column:1/-1}
.field label{font-weight:600}
.field input,.field textarea{font:inherit;padding:12px 14px;border:1px solid var(--hairline-strong);border-radius:var(--radius);background:#fff;color:var(--ink);min-height:48px;width:100%}
.field textarea{resize:vertical}
.field input:focus,.field textarea:focus{border-color:var(--blue-deep);outline:2px solid var(--blue-deep);outline-offset:0}
.field [aria-invalid="true"]{border-color:#b42318}
.field [aria-invalid="true"]:focus{outline-color:#b42318}
.field-error{margin:0;font-size:.86rem;font-weight:600;color:#b42318}
.access-form .button{grid-column:1/-1;justify-self:start}
.form-assure{grid-column:1/-1;margin:0;display:flex;align-items:center;gap:var(--s8);color:var(--muted);font-weight:600;font-size:.92rem}
.form-assure::before{content:"";width:8px;height:8px;border-radius:50%;flex:none;background:linear-gradient(135deg,var(--cyan),var(--blue))}
.form-note{grid-column:1/-1;color:var(--faint);font-size:.92rem}
@media (max-width:640px){.access-form{grid-template-columns:1fr}}
.access-aside{padding:var(--s32);background:#fff;border:1px solid var(--hairline);border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}
.plain-list{list-style:none;margin:0 0 var(--s32);padding:0}
.plain-list li{padding:10px 0;border-top:1px solid var(--hairline);color:var(--muted)}
.plain-list li:first-child{border-top:0;padding-top:0}
.access-aside .eyebrow+.plain-list li:first-child{padding-top:0}

/* Footer */
footer{background:var(--con);color:var(--con-text);margin-top:0}
.footer-grid{display:grid;gap:var(--s32);padding-block:var(--s64) var(--s32)}
@media (min-width:800px){.footer-grid{grid-template-columns:1.6fr 1fr 1fr;gap:var(--s48)}}
.footer-brand img{height:32px;width:auto}
.footer-brand p{margin-top:var(--s16);color:var(--con-dim);max-width:40ch}
.footer-status{display:flex;align-items:center;gap:var(--s12);font-family:var(--mono);font-size:.8rem}
footer .eyebrow{color:var(--con-cyan)}
footer nav{display:grid;gap:var(--s8);align-content:start}
footer nav a{color:var(--con-dim);text-decoration:none;min-height:28px;display:inline-flex;align-items:center}
footer nav a:hover{color:var(--con-text)}
.legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s16);padding-block:var(--s24);border-top:1px solid var(--con-line);font-family:var(--mono);font-size:.78rem;color:var(--con-dim)}

/* Narrow screens: nothing decorative sits behind text. */
@media (max-width:700px){
  .hero{padding-top:var(--s48)}
  .console__mode{display:none}
  .compare th,.compare td{padding:12px}
  .console{font-size:.88rem}
  .flow__step h3{font-size:1.4rem}
}