/* ==========================================================================
   prelogin — design system
   --------------------------------------------------------------------------
   Reference: Notion. Warm paper canvas, white card surfaces, hairline
   borders, one chromatic commitment (#0075de), accent hues reserved for
   panel backgrounds and pills. Flat fills only — no gradients, no shadows on
   content surfaces. Text hierarchy is built from alpha on a single black
   rather than from a ladder of greys.

   Deliberate departures from the reference, for this product:
     - No illustrated character marks / squiggles / emoji. Playful decoration
       reads as unserious on a product that holds banking credentials.
     - A monospace is kept, but ONLY for code, terminal output and literal
       spec values. It is not used for eyebrows or labels — that is the single
       loudest "generated design" tell.
     - The serif is used sparingly (pull-quotes and section intros), as an
       accent rather than a parallel hierarchy.
   ========================================================================== */

/* ==========================================================================
   Tokens
   ========================================================================== */
:root{
  /* --- Reference palette (literal) --- */
  --color-notion-blue:#0075de;
  --color-paper-warmth:#f6f5f4;
  --color-pure-white:#ffffff;
  --color-ink-black:#000000;
  --color-charcoal:#111111;
  --color-stone:#757575;
  --color-graphite:#615d59;
  --color-slate:#696969;
  --color-sky-tint:#e6f3fe;
  --color-marigold:#ffb110;
  --color-coral:#f64932;
  --color-saffron:#e89d01;
  --color-vermillion:#e32d14;
  --color-mocha:#b18164;
  --color-signal-blue:#097fe8;
  --color-sky-wash:#62aef0;
  --color-midnight-ink:#02093a;
  --color-peach:#f6d5b8;

  /* --- Semantic aliases --- */
  --paper:var(--color-paper-warmth);   /* page canvas — the signature warmth */
  --surface:var(--color-pure-white);   /* cards sit ON the canvas */
  --ink:var(--color-ink-black);
  --ink-2:var(--color-graphite);       /* body text, warm cast */
  --ink-3:var(--color-slate);          /* secondary / muted */
  --ink-60:rgba(0,0,0,.6);
  --ink-54:rgba(0,0,0,.54);            /* muted nav link */
  --ink-40:rgba(0,0,0,.4);
  --ink-20:rgba(0,0,0,.2);

  --line:rgba(0,0,0,.08);              /* the hairline — borders, never shadows */
  --line-strong:rgba(0,0,0,.16);

  --accent:var(--color-notion-blue);   /* the ONE filled chromatic action */
  --accent-deep:#0064be;
  --accent-wash:var(--color-sky-tint);

  /* Dark island — used sparingly, never as a full dark theme */
  --dk-bg:var(--color-midnight-ink);
  --dk-bg-2:#070e4a;
  --dk-text:#ffffff;
  --dk-text-2:rgba(255,255,255,.72);
  --dk-text-3:rgba(255,255,255,.5);
  --dk-line:rgba(255,255,255,.16);
  --dk-accent:var(--color-sky-wash);

  --ok:#0f7a52;
  --bad:var(--color-vermillion);

  /* --- Type --- */
  --font-sans:'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  /* Display face, for large headings only.
     Archivo Black (Omnibus-Type, 2016) is a single-weight display cut: the
     Google Fonts CSS declares exactly one @font-face, at weight 400 — the
     blackness is drawn into the outline, not added by a weight axis. Two
     consequences that are easy to get wrong:
       1. Any font-weight above 400 triggers SYNTHETIC bold — the browser
          smears a face that is already black. Display headings are pinned to
          400 below and must stay there.
       2. It is a DISPLAY cut, not a text face. Below ~24px its counters fill
          in, so card titles, FAQ summaries and pricing tier names stay on
          Inter 600. Only headings set at 24px+ opt in.
     Fallback is Arial Black (present on macOS and Windows) rather than
     system-ui: a system UI face is not black, so a failed load would silently
     drop every headline to regular weight. */
  --font-display:'Archivo Black','Arial Black','Helvetica Neue',Helvetica,Arial,sans-serif;
  --font-serif:'Source Serif 4', "Lyon Text", Georgia, ui-serif, serif;
  --font-mono:'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;

  /* Scale. Display sizes carry aggressive negative tracking so headlines
     read confident and compact rather than airy. Body stays at normal. */
  --t-display:clamp(2.5rem, 1.15rem + 4.4vw, 4.5rem);   /* 72 */
  --t-h2:clamp(1.85rem, 1.3rem + 1.9vw, 3rem);          /* 48 */
  --t-h3:1.375rem;                                       /* 22 */
  --t-subhead:1.25rem;                                   /* 20 */
  --t-lead:clamp(1.05rem, 1rem + .35vw, 1.25rem);        /* 20 */
  --t-body:1rem;                                         /* 16 */
  --t-sm:.875rem;                                        /* 14 */
  --t-xs:.75rem;                                         /* 12 */

  --tr-display:-.028em;   /* -2.016px @ 72 */
  --tr-h3:-.011em;        /* -0.242px @ 22 */

  /* --- Space (4px base) --- */
  --s1:.5rem;   /* 8  */
  --s2:1rem;    /* 16 */
  --s3:1.5rem;  /* 24 */
  --s4:2rem;    /* 32 */
  --s5:3rem;    /* 48 */
  --s6:4rem;    /* 64 */
  --s7:5rem;    /* 80 — section gap */
  --s8:6rem;    /* 96 */

  /* --- Shape --- */
  --r-sm:4px;
  --r-btn:8px;
  --r-card:12px;
  --r-pill:9999px;

  /* --- Elevation (nav and product mockups only, never content) --- */
  --shadow-nav:0 .7px 1.462px rgba(0,0,0,.015), 0 3px 9px rgba(0,0,0,.03);
  --shadow-mock:0 4px 12px rgba(0,0,0,.1);

  --measure:64ch;
  --wrap:1440px;
  --ease:cubic-bezier(.2,.7,.3,1);
}

/* ==========================================================================
   Base
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink-2);
  font-family:var(--font-sans);
  font-size:var(--t-body);
  line-height:1.5;
  font-feature-settings:"lnum" 1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Base headings are Inter 600 — NOT the display face. h3/h4 live at 14–18px
   (card titles, pricing tiers, FAQ summaries), where Archivo Black's counters
   close up and it reads as a blob. Big headings opt in by selector below. */
h1,h2,h3,h4{
  color:var(--ink); margin:0;
  font-family:var(--font-sans);
  font-weight:600;
}
p{ margin:0; }
a{ color:inherit; }

/* Inline code. The one place a monospace is warranted: these are literal
   identifiers (HttpOnly, localStorage) whose exact spelling is the point.
   Sized down because Plex Mono reads larger than Inter at the same px value. */
code{
  font-family:var(--font-mono); font-size:.875em;
  background:var(--accent-wash); color:var(--ink);
  padding:.1em .34em; border-radius:var(--r-sm);
  white-space:nowrap;
}
.section--dark code{
  background:rgba(98,174,240,.18); color:#fff;
}

/* Headings: tight tracking, dark ink */
.hero h1,.subhead h1,.cta-band h2,.prose h2,.section__head h2,.pagecta h2{
  letter-spacing:var(--tr-display);
  line-height:1.1;
}

/* The display face, opted into by SELECTOR — never by a class a page author
   has to remember to type. Every heading listed here is 24px or larger at the
   bottom of its clamp:
     hero h1 40–72 · subhead h1 34–54 · section/cta h2 30–48 · prose h2 24–32
   `.pagecta h2` is deliberately left on Inter: it sits beside a button and
   drops to 22px on mobile, where a black cut crowds the CTA.
   Weight is pinned to 400 — Archivo Black has no other weight, and asking for
   one buys you synthetic bold smeared over an already-black outline.
   Leading opens from 1.1 to 1.14 because a heavy cut needs more air than a
   600-weight text face once the headline wraps (these all wrap: 20–26ch). */
.hero h1,.subhead h1,.cta-band h2,.prose h2,.section__head h2{
  font-family:var(--font-display);
  font-weight:400;
  line-height:1.14;
}

.wrap{ width:min(var(--wrap), calc(100% - 3rem)); margin-inline:auto; }

/* Small uppercase label. Inter, not a monospace — tracked, not shouted. */
.eyebrow{
  font-family:var(--font-sans);
  font-size:var(--t-xs);
  font-weight:500;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--ink-40);
}
.section--dark .eyebrow{ color:var(--dk-text-3); }

.lede{ font-size:var(--t-lead); color:var(--ink-2); max-width:var(--measure); line-height:1.5; }
.section--dark .lede{ color:var(--dk-text-2); }

/* The signature device: wrap a single word in the headline */
.pill{
  display:inline-block;
  background:var(--color-peach);
  color:var(--ink);
  border-radius:var(--r-pill);
  padding:.06em .5em .12em;
  font-style:normal;
}
.pill--marigold{ background:var(--color-marigold); }
.pill--sky{ background:var(--color-sky-wash); color:var(--ink); }
.pill--coral{ background:var(--color-coral); color:#fff; }

/* Skip link */
.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ink); color:var(--paper); padding:var(--s1) var(--s3);
  font-family:var(--font-sans); text-decoration:none; border-radius:var(--r-sm);
}
.skip:focus{ left:var(--s2); top:var(--s2); }

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:var(--r-sm);
}
.section--dark :focus-visible{ outline-color:var(--dk-accent); }

/* ==========================================================================
   Nav
   ========================================================================== */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(246,245,244,.85);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.nav.scrolled{ border-bottom-color:var(--line); box-shadow:var(--shadow-nav); }
.nav__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s4); padding-block:14px;
}
.brand{
  display:flex; align-items:center; gap:.5rem;
  font-size:1.0625rem; font-weight:600; letter-spacing:-.011em;
  color:var(--ink); text-decoration:none;
}
.brand__mark{
  width:1.35rem; height:1.35rem; flex:none;
  display:block;
}
.brand__mark::after{ display:none; }
.nav__links{
  display:flex; align-items:center; gap:4px;
  list-style:none; margin:0; padding:0;
}
.nav__links a{
  font-size:var(--t-sm); font-weight:500; text-decoration:none;
  color:var(--ink-54); padding:8px 12px; border-radius:var(--r-btn);
  transition:color .2s var(--ease), background .2s var(--ease);
}
.nav__links a:hover{ color:var(--ink); background:rgba(0,0,0,.04); }
.nav__links a[aria-current="page"]{ color:var(--ink); }
@media (max-width:900px){ .nav__links{ display:none; } }

/* Console link: same origin as the API (nginx proxies /app.html) */
.nav__console{
  font-size:var(--t-sm); font-weight:500; text-decoration:none;
  color:var(--ink-54); padding:8px 12px; border-radius:var(--r-btn);
  white-space:nowrap;
  transition:color .2s var(--ease), background .2s var(--ease);
}
.nav__console:hover{ color:var(--ink); background:rgba(0,0,0,.04); }
@media (max-width:560px){ .nav__console{ display:none; } }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  font-family:var(--font-sans); font-size:var(--t-sm); font-weight:500;
  padding:8px 16px; border-radius:var(--r-btn); text-decoration:none;
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:background .2s var(--ease), color .2s var(--ease),
             border-color .2s var(--ease);
}
.btn--primary{ background:var(--accent); color:#fff; }
.btn--primary:hover{ background:var(--accent-deep); }
/* Secondary action: tinted, not outlined */
.btn--ghost{ background:var(--accent-wash); color:var(--accent); }
.btn--ghost:hover{ background:#d6e9fb; }
/* Tertiary: no fill, no border */
.btn--text{ background:transparent; color:var(--ink); padding:8px 12px; }
.btn--text:hover{ background:rgba(0,0,0,.04); }

.section--dark .btn--primary{ background:#fff; color:var(--dk-bg); }
.section--dark .btn--primary:hover{ background:rgba(255,255,255,.88); }
.section--dark .btn--ghost{ background:rgba(255,255,255,.12); color:#fff; }
.section--dark .btn--ghost:hover{ background:rgba(255,255,255,.2); }
.section--dark .btn--text{ color:#fff; }
.section--dark .btn--text:hover{ background:rgba(255,255,255,.12); }
.btn__arrow{ font-size:1em; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{ padding-block:var(--s7) var(--s6); }
.hero__grid{
  display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:var(--s6); align-items:end;
}
@media (max-width:940px){
  .hero{ padding-block:var(--s6) var(--s5); }
  .hero__grid{ grid-template-columns:1fr; gap:var(--s4); align-items:start; }
}
.hero h1{ font-size:var(--t-display); margin-top:var(--s3); max-width:20ch; }
.hero__lede{ margin-top:var(--s3); }
.hero__cta{ display:flex; flex-wrap:wrap; gap:var(--s1); margin-top:var(--s4); }

.hero__proof{
  margin-top:var(--s5); padding-top:var(--s3);
  border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:var(--s1) var(--s4);
  list-style:none; padding-left:0;
}
.hero__proof li{
  font-size:var(--t-sm); color:var(--ink-3);
  display:flex; align-items:center; gap:.5rem;
}
.hero__proof li::before{
  content:""; width:6px; height:6px; border-radius:2px;
  background:var(--color-marigold); flex:none;
}

/* Hero aside: the session record, as a white card on the canvas */
.seal{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  padding:var(--s3);
}
.seal__title{
  font-size:var(--t-xs); font-weight:500;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-40);
  margin-bottom:var(--s2);
}
.seal dl{ margin:0; }
.seal__row{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:var(--s2); padding-block:.7rem;
  border-top:1px solid var(--line);
}
.seal__row:first-of-type{ border-top:0; }
.seal dt{ font-size:var(--t-sm); color:var(--ink-3); }
.seal dd{
  margin:0; font-family:var(--font-mono); font-size:var(--t-sm);
  font-weight:500; color:var(--ink); text-align:right;
}
.seal dd.is-ok{ color:var(--ok); }

/* ==========================================================================
   Run rail (hero visual)
   ========================================================================== */
.rail{ margin-top:var(--s6); padding-top:var(--s5); }
.rail__stages{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:var(--s3); margin:0; padding:0; list-style:none;
}
@media (max-width:800px){ .rail__stages{ grid-template-columns:1fr; } }
.stage{ padding-top:var(--s2); border-top:2px solid var(--ink); }
@media (max-width:800px){ .stage{ padding-top:var(--s2); } }
.stage__num{
  width:1.75rem; height:1.75rem; border-radius:var(--r-sm);
  background:var(--ink); color:#fff;
  display:grid; place-items:center;
  font-size:var(--t-xs); font-weight:600;
  margin-bottom:var(--s2);
}
.stage h3{ font-size:var(--t-h3); letter-spacing:var(--tr-h3); margin-bottom:.35rem; }
.stage p{ font-size:var(--t-sm); color:var(--ink-3); max-width:34ch; }

/* Terminal — the one place a monospace and a dark surface are correct */
.term{
  margin-top:var(--s4);
  background:var(--dk-bg); color:var(--dk-text);
  border-radius:var(--r-card); overflow:hidden;
}
.term__bar{
  display:flex; align-items:center; gap:.5rem;
  padding:.65rem 1rem; background:rgba(255,255,255,.06);
}
.term__dot{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.22); }
.term__name{
  font-family:var(--font-mono); font-size:var(--t-xs);
  color:var(--dk-text-3); margin-left:.4rem;
}
.term__copy{
  margin-left:auto; background:none; border:1px solid var(--dk-line);
  color:var(--dk-text-2); font-family:var(--font-mono); font-size:var(--t-xs);
  padding:3px 9px; border-radius:var(--r-sm); cursor:pointer;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.term__copy:hover{ color:#fff; border-color:rgba(255,255,255,.4); }
.term pre{
  margin:0; padding:var(--s3);
  overflow-x:auto; font-family:var(--font-mono);
  font-size:.8125rem; line-height:1.7; color:var(--dk-text-2);
}
.term .c-cmd{ color:#fff; }
.term .c-flag{ color:var(--dk-accent); }
.term .c-com{ color:var(--dk-text-3); }

/* ==========================================================================
   Sections
   ========================================================================== */
.section{ padding-block:var(--s7); }
.section--tight{ padding-block:var(--s5); }
/* White surface section — reads as a card the width of the page */
.section--paper2{ background:var(--surface); border-block:1px solid var(--line); }
/* Dark island. Used sparingly, never as a full theme.
   `.section--dark` is the ONLY hook for dark styling — every override below is
   scoped to it. It has to be: the class tells you the background is midnight,
   so anything that sets its own colour (ledes, eyebrows, checklist rows,
   callouts, buttons) needs an explicit dark value or it paints graphite on
   midnight at ~2:1 contrast. Do not add a second opt-in class for this; an
   opt-in is a thing you forget on the eleventh page. */
.section--dark{ background:var(--dk-bg); color:var(--dk-text); }
.section--dark h2,.section--dark h3,.section--dark h4{ color:var(--dk-text); }

/* Wider than --measure: a section head opens a full-bleed band, so capping it
   at the 64ch reading measure left it as a narrow ribbon down the left edge. */
.section__head{ max-width:76ch; margin-bottom:var(--s5); }
.section__head h2{ font-size:var(--t-h2); margin-top:var(--s2); max-width:26ch; }
.section__num{
  font-size:var(--t-xs); font-weight:500;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-40);
  display:block; margin-bottom:var(--s2);
}
.section--dark .section__num{ color:var(--dk-text-3); }

/* Three columns */
.cols{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:var(--s3); margin:0; padding:0; list-style:none;
}
@media (max-width:860px){ .cols{ grid-template-columns:1fr; } }
.col{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-card); padding:var(--s3);
}
.section--dark .col{ background:rgba(255,255,255,.06); border-color:var(--dk-line); }
.col h3{ font-size:1.0625rem; margin-bottom:var(--s1); letter-spacing:var(--tr-h3); }
.col p{ font-size:var(--t-sm); color:var(--ink-3); }
.section--dark .col p{ color:var(--dk-text-2); }

/* Pull-quote — one of the few places the serif earns its place */
.pullquote{
  margin-top:var(--s6); padding-top:var(--s4);
  border-top:1px solid var(--line);
  font-family:var(--font-serif); font-size:clamp(1.3rem, 1.1rem + 1vw, 1.9rem);
  line-height:1.35; font-weight:400;
  max-width:46ch; color:var(--ink);
}
.pullquote b{ font-weight:600; color:var(--ink); }
.section--dark .pullquote{ color:#fff; border-top-color:var(--dk-line); }

/* Feature list with rules */
.features{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:0 var(--s6); margin:0; padding:0; list-style:none;
}
@media (max-width:860px){ .features{ grid-template-columns:1fr; } }
.feature{
  display:grid; grid-template-columns:2.5rem 1fr; gap:var(--s2);
  padding-block:var(--s3);
  border-top:1px solid var(--line);
}
.section--dark .feature{ border-top-color:var(--dk-line); }
.feature__k{
  font-family:var(--font-mono); font-size:var(--t-xs);
  color:var(--ink-40); padding-top:.25rem;
}
.section--dark .feature__k{ color:var(--dk-text-3); }
.feature h3{ font-size:1.0625rem; margin-bottom:.3rem; letter-spacing:var(--tr-h3); }
.feature p{ font-size:var(--t-sm); color:var(--ink-3); margin:0; }
.section--dark .feature p{ color:var(--dk-text-2); }

/* Use-case cards */
.cases{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:var(--s2); margin:0; padding:0; list-style:none;
}
.case{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  padding:var(--s3);
  transition:border-color .2s var(--ease), transform .2s var(--ease);
}
.case:hover{ border-color:var(--line-strong); transform:translateY(-2px); }
.case h3{
  font-size:var(--t-sm); font-weight:600;
  margin-bottom:.3rem; letter-spacing:0; color:var(--ink);
}
.case p{ font-size:var(--t-xs); color:var(--ink-3); line-height:1.5; }

/* Pricing */
.prices{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:var(--s2); margin:0; padding:0; list-style:none; align-items:start;
}
@media (max-width:900px){ .prices{ grid-template-columns:1fr; } }
.price{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  padding:var(--s3);
  display:flex; flex-direction:column; gap:var(--s3);
}
/* The featured tier is the one place a filled panel is earned */
.price--featured{ background:var(--color-midnight-ink); color:#fff; border-color:var(--color-midnight-ink); }
.price--featured h3,.price--featured .price__amt,.price--featured .price__tier{ color:#fff; }
.price--featured li{ color:var(--dk-text-2); }
.price__tier{
  font-size:var(--t-xs); font-weight:500;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-40);
}
.price--featured .price__tier{ color:var(--dk-accent); }
.price h3{ font-size:1.0625rem; letter-spacing:var(--tr-h3); }
.price__amt{
  font-size:2.5rem; font-weight:600; line-height:1;
  letter-spacing:-.03em; color:var(--ink);
}
.price__amt span{
  font-size:var(--t-sm); font-weight:400; color:var(--ink-3); letter-spacing:0;
}
.price ul{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.price li{ font-size:var(--t-sm); color:var(--ink-2); display:flex; gap:.55rem; }
.price li::before{
  content:""; width:6px; height:6px; flex:none; margin-top:.5rem;
  background:var(--accent); border-radius:50%;
}
.price--featured li::before{ background:var(--dk-accent); }
.price .btn{ margin-top:auto; width:100%; }

/* FAQ */
.faq{ max-width:74ch; }
.faq details{
  border-top:1px solid var(--line);
  padding-block:var(--s3);
}
.faq details:last-of-type{ border-bottom:1px solid var(--line); }
.faq summary{
  cursor:pointer; list-style:none; display:flex; justify-content:space-between;
  align-items:flex-start; gap:var(--s3);
  font-size:1.0625rem; font-weight:600; color:var(--ink);
  line-height:1.4; letter-spacing:var(--tr-h3);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; font-size:1.25rem; line-height:1; flex:none; color:var(--ink-40);
  transition:transform .2s var(--ease);
}
.faq details[open] summary::after{ content:"\2212"; }
.faq p{ margin-top:var(--s2); font-size:var(--t-sm); color:var(--ink-3); max-width:62ch; }

/* CTA band */
.cta-band{ text-align:center; }
.cta-band h2{ font-size:var(--t-h2); margin-block:var(--s2) var(--s3); }
.cta-band .lede{ margin-inline:auto; text-align:center; }
.cta-band__btns{ display:flex; gap:var(--s1); justify-content:center; flex-wrap:wrap; margin-top:var(--s4); }

/* Footer — the dark island at the bottom */
.footer{ background:var(--dk-bg); color:var(--dk-text-2); padding-block:var(--s6) var(--s4); }
.footer__grid{
  display:grid; grid-template-columns:minmax(0,1.4fr) repeat(3, minmax(0,1fr));
  gap:var(--s4);
}
@media (max-width:820px){ .footer__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer__grid{ grid-template-columns:1fr; } }
.footer h4{
  font-size:var(--t-xs); font-weight:500;
  letter-spacing:.09em; text-transform:uppercase;
  color:var(--dk-text-3); margin:0 0 var(--s2);
}
.footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.footer a{ font-size:var(--t-sm); text-decoration:none; color:var(--dk-text-2); }
.footer a:hover{ color:#fff; }
.footer__brand{ color:#fff; }
.footer__note{ font-size:var(--t-sm); color:var(--dk-text-3); max-width:34ch; margin-top:var(--s2); }
.footer__base{
  margin-top:var(--s5); padding-top:var(--s3);
  border-top:1px solid var(--dk-line);
  display:flex; justify-content:space-between; gap:var(--s3); flex-wrap:wrap;
  font-size:var(--t-xs); color:var(--dk-text-3);
}

/* Reveal on scroll */
.reveal{ opacity:0; transform:translateY(10px); transition:opacity .5s var(--ease), transform .5s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ==========================================================================
   Sub-page anatomy
   --------------------------------------------------------------------------
   The homepage is a specimen sheet; sub-pages are documents. They share the
   tokens but need a reading-width column, a breadcrumb, and a shallower hero.
   ========================================================================== */

/* Breadcrumb */
.crumb{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem;
  font-size:var(--t-xs); font-weight:500;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-40); margin:0 0 var(--s3); padding:0; list-style:none;
}
.crumb li{ display:flex; align-items:center; gap:.5rem; }
.crumb li + li::before{ content:"/"; color:var(--ink-20); }
.crumb a{ text-decoration:none; color:var(--ink-40); }
.crumb a:hover{ color:var(--ink); }
.crumb [aria-current]{ color:var(--ink-2); }

/* Sub-page hero */
.subhead{ padding-block:var(--s6) var(--s5); }
.subhead h1{
  font-size:clamp(2.1rem, 1.4rem + 2.6vw, 3.4rem);
  margin-block:var(--s2) var(--s3); max-width:26ch; font-weight:400;
}
.subhead__meta{
  display:flex; flex-wrap:wrap; gap:var(--s1) var(--s4);
  margin-top:var(--s4); padding-top:var(--s3);
  border-top:1px solid var(--line);
  font-size:var(--t-xs); font-weight:500;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-40);
}
.subhead__meta b{ color:var(--ink); font-weight:600; }

/* Long-form reading column */
.prose{ max-width:var(--measure); }
.prose > * + *{ margin-top:var(--s3); }
.prose h2{
  font-size:clamp(1.5rem, 1.25rem + 1.1vw, 2rem);
  margin-top:var(--s6); font-weight:400;
}
.prose h3{ font-size:1.125rem; margin-top:var(--s5); letter-spacing:var(--tr-h3); }
.prose p{ color:var(--ink-2); }
.prose strong{ color:var(--ink); font-weight:600; }
.prose ul,.prose ol{ margin:0; padding-left:1.15rem; color:var(--ink-2); }
.prose li + li{ margin-top:.55rem; }
.prose li::marker{ color:var(--ink-40); }
.prose a{ color:var(--accent); text-decoration-thickness:1px; text-underline-offset:2px; }

/* Numbered process */
/* Numbered steps. Same treatment as .checklist, for the same reason: these sit
   in full-bleed bands and a single 64ch column left the rules stopping halfway
   across a 1392px section. Two columns also keeps the copy at a good measure —
   ~63 characters per line once the numeral column and gap come off — where
   stretching one column across the band would have pushed it past 110.
   The 01..05 numerals carry the sequence, so a row-major reading order does
   not lose the process. */
.steps{
  margin:0; padding:0; list-style:none; counter-reset:step;
  display:grid; grid-template-columns:1fr;
  column-gap:var(--s6);
  border-bottom:1px solid var(--line);
}
@media (min-width:760px){
  .steps{ grid-template-columns:1fr 1fr; }
}
.step{
  display:grid; grid-template-columns:3.5rem 1fr; gap:var(--s2);
  padding-block:var(--s3); border-top:1px solid var(--line);
}
@media (max-width:600px){ .step{ grid-template-columns:2.5rem 1fr; } }
.step::before{
  counter-increment:step; content:counter(step,decimal-leading-zero);
  font-family:var(--font-mono); font-size:var(--t-sm);
  color:var(--ink-40); padding-top:.15rem;
}
.step h3{ font-size:1.0625rem; margin-bottom:.4rem; letter-spacing:var(--tr-h3); }
.step p{ font-size:var(--t-sm); color:var(--ink-3); margin:0; }
.step p + p{ margin-top:var(--s1); }
/* Dark band: the heading is covered by the generic `.section--dark h3` rule,
   but the rule, the numeral and the body copy all set their own colour. */
.section--dark .steps{ border-bottom-color:var(--dk-line); }
.section--dark .step{ border-top-color:var(--dk-line); }
.section--dark .step::before{ color:var(--dk-text-3); }
.section--dark .step p{ color:var(--dk-text-2); }

/* Checklist.
   These sit in full-bleed bands inside a 1440px wrap. A single 64ch column left
   two-thirds of the band empty and read as a narrow ribbon down the left edge,
   so at desktop widths it is a two-column ledger instead.

   Two fixed columns, not `auto-fit` with a min width: an auto-fit rule fits
   three columns in the 1392px band but only one inside the ~1080px use-case
   body column, so the same component would lay out differently depending on
   which page it happened to sit on.

   The block closes with a border on the container, not on `li:last-child` —
   with an odd number of items the last <li> is not the bottom-right cell, so
   an odd-length list would close its second column one row short. */
.checklist{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr;
  column-gap:var(--s6);
  border-bottom:1px solid var(--line);
}
@media (min-width:760px){
  .checklist{ grid-template-columns:1fr 1fr; }
}
.checklist li{
  /* Flex, not grid: a <li class="checklist"> has THREE children — the
     ::before dot, the <b> verb name, and the trailing text node. With a
     2-column grid, auto-placement rows them across two tracks and the trailing
     text drops into the SECOND row's 1.4rem column, wrapping every word.
     Flex gives us exactly two items: the 6px dot and the whole inline flow. */
  display:flex; align-items:flex-start; gap:var(--s1);
  padding-block:var(--s2); border-top:1px solid var(--line);
  font-size:var(--t-sm); color:var(--ink-2);
}
.checklist li::before{
  content:""; flex-shrink:0;
  width:6px; height:6px; margin-top:.55rem;
  background:var(--accent); border-radius:50%;
}
.section--dark .checklist{ border-bottom-color:var(--dk-line); }
.section--dark .checklist li{ border-top-color:var(--dk-line); color:var(--dk-text-2); }
.section--dark .checklist li::before{ background:var(--dk-accent); }

/* Callout — one per page, for the sentence that must not be missed */
.callout{
  background:var(--surface);
  border:1px solid var(--line);
  border-left:3px solid var(--color-marigold);
  border-radius:var(--r-card);
  padding:var(--s3);
  margin-block:var(--s5);
  font-family:var(--font-serif);
  font-size:clamp(1.15rem, 1.05rem + .6vw, 1.45rem);
  line-height:1.4; font-weight:400; color:var(--ink);
  /* Wider than --measure, narrower than the band: it has to hold its own
     against a two-column checklist above it without becoming a banner. */
  max-width:78ch;
}
.callout b{ font-weight:600; }
.section--dark .callout{
  background:rgba(255,255,255,.06); border-color:var(--dk-line);
  border-left-color:var(--color-marigold); color:#fff;
}

/* Stats — bare numerals on rules, not cards */
.kpis{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr));
  gap:var(--s3); margin:0; padding:0; list-style:none;
}
.kpi{ border-top:2px solid var(--ink); padding-top:var(--s2); }
.section--dark .kpi{ border-top-color:var(--dk-accent); }
.kpi__v{
  font-size:clamp(1.9rem, 1.6rem + 1.2vw, 2.6rem);
  font-weight:600; line-height:1; letter-spacing:-.03em; color:var(--ink); display:block;
}
.section--dark .kpi__v{ color:#fff; }
.kpi__k{
  font-size:var(--t-xs); font-weight:500;
  letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-40); display:block; margin-top:var(--s2);
}
.section--dark .kpi__k{ color:var(--dk-text-3); }

/* Table of contents */
.toc{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-card); padding:var(--s3); margin-bottom:var(--s5);
}
.toc__t{
  font-size:var(--t-xs); font-weight:500;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-40);
  margin:0 0 var(--s2);
}
.toc ol{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.toc a{
  font-size:var(--t-sm); text-decoration:none; color:var(--ink-2);
  display:flex; gap:.7rem; align-items:baseline;
}
.toc a:hover{ color:var(--accent); }
.toc a::before{
  content:counter(toc,decimal-leading-zero);
  counter-increment:toc;
  font-family:var(--font-mono); font-size:var(--t-xs); color:var(--ink-40);
}

/* Comparison table */
.compare{ width:100%; border-collapse:collapse; margin-top:var(--s4); }
.compare caption{
  text-align:left; font-size:var(--t-xs); font-weight:500;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-40);
  padding-bottom:var(--s2);
}
.compare th,.compare td{
  text-align:left; padding:var(--s2) var(--s3) var(--s2) 0;
  border-top:1px solid var(--line); font-size:var(--t-sm); vertical-align:top;
}
.compare thead th{
  font-size:var(--t-xs); font-weight:500;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-40);
  border-top:2px solid var(--ink); border-bottom:0;
}
.compare tbody th{ font-weight:600; color:var(--ink); width:34%; }
.compare td{ color:var(--ink-3); }
.compare td:first-of-type{ color:var(--ink-2); }

/* Our row: the only tinted surface in the table, so the comparison has a
   conclusion rather than four equal options. */
.compare tr.is-us th,
.compare tr.is-us td{ background:var(--accent-wash); border-top-color:rgba(0,0,0,.12); }
.compare tr.is-us th{ color:var(--ink); }
.compare tr.is-us td:first-of-type{ color:var(--ink); }
.compare tr.is-us th::before{
  content:""; display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--accent); margin-right:.5rem; vertical-align:.1em;
}

/* Dark band. Every cell sets its own colour, so all of them need inverting —
   including the top rule, which is pure black in the light theme and simply
   disappears on midnight.
   The "our row" tint is a translucent sky wash rather than --accent-wash: the
   light theme's near-white fill with dark text would read as a lit window in a
   dark room, and the point of the row is emphasis, not illumination. */
.section--dark .compare caption{ color:var(--dk-text-3); }
.section--dark .compare th,
.section--dark .compare td{ border-top-color:var(--dk-line); }
.section--dark .compare thead th{ color:var(--dk-text-3); border-top-color:var(--dk-text); }
.section--dark .compare tbody th{ color:var(--dk-text); }
.section--dark .compare td{ color:var(--dk-text-2); }
.section--dark .compare td:first-of-type{ color:var(--dk-text-2); }
.section--dark .compare tr.is-us th,
.section--dark .compare tr.is-us td{ background:rgba(98,174,240,.16); }
.section--dark .compare tr.is-us th{ color:#fff; }
.section--dark .compare tr.is-us td:first-of-type{ color:#fff; }
.section--dark .compare tr.is-us th::before{ background:var(--dk-accent); }

/* Use-case index — a directory, not a grid of cards */
.uc-index{ margin:0; padding:0; list-style:none; }
.uc-row{
  display:grid; grid-template-columns:3rem minmax(0,1.1fr) minmax(0,1.4fr) auto;
  gap:var(--s3); align-items:baseline;
  padding-block:var(--s3); border-top:1px solid var(--line);
  text-decoration:none; color:inherit;
  transition:padding-left .2s var(--ease);
}
.uc-index li:last-child .uc-row{ border-bottom:1px solid var(--line); }
.uc-row:hover{ padding-left:var(--s1); }
.uc-row__n{ font-family:var(--font-mono); font-size:var(--t-xs); color:var(--ink-40); }
.uc-row__t{ font-size:1.1875rem; font-weight:600; color:var(--ink); letter-spacing:var(--tr-h3); }
.uc-row:hover .uc-row__t{ color:var(--accent); }
.uc-row__d{ font-size:var(--t-sm); color:var(--ink-3); }
.uc-row__a{ font-size:var(--t-sm); color:var(--ink-40); }
.uc-row:hover .uc-row__a{ color:var(--accent); }
@media (max-width:820px){
  .uc-row{ grid-template-columns:2.5rem 1fr; }
  .uc-row__d{ grid-column:2; }
  .uc-row__a{ grid-column:2; }
}

/* Use-case detail: two-column body, spec rail on the right */
.uc-body{
  display:grid; grid-template-columns:minmax(0,1fr) 260px;
  gap:var(--s6); align-items:start;
}
@media (max-width:940px){ .uc-body{ grid-template-columns:1fr; } }
.uc-rail{ position:sticky; top:6rem; }
@media (max-width:940px){ .uc-rail{ position:static; } }
.uc-rail__t{
  font-size:var(--t-xs); font-weight:500;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-40);
  padding-bottom:var(--s2); border-bottom:2px solid var(--ink); margin:0 0 var(--s2);
}
.uc-rail dl{ margin:0; display:grid; gap:var(--s2); }
.uc-rail dt{
  font-size:var(--t-xs); font-weight:500;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-40);
}
.uc-rail dd{ margin:.15rem 0 0; font-size:var(--t-sm); color:var(--ink); }

/* Prev / next between sibling pages */
.nextprev{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--s2);
  margin-top:var(--s6);
}
@media (max-width:700px){ .nextprev{ grid-template-columns:1fr; } }
.nextprev a{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-card); padding:var(--s3);
  text-decoration:none; color:inherit; display:block;
  transition:border-color .2s var(--ease);
}
.nextprev a:hover{ border-color:var(--line-strong); }
.nextprev a:last-child{ text-align:right; }
@media (max-width:700px){ .nextprev a:last-child{ text-align:left; } }
.nextprev__k{
  font-size:var(--t-xs); font-weight:500;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-40);
  display:block; margin-bottom:var(--s2);
}
.nextprev__t{ font-size:1.0625rem; font-weight:600; color:var(--ink); letter-spacing:var(--tr-h3); }
.nextprev a:hover .nextprev__t{ color:var(--accent); }

/* Page footer CTA */
.pagecta{ background:var(--surface); border-top:1px solid var(--line); }
.pagecta__in{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s4); flex-wrap:wrap; padding-block:var(--s5);
}
.pagecta h2{ font-size:clamp(1.4rem, 1.2rem + 1vw, 1.9rem); max-width:22ch; }
.pagecta p{ font-size:var(--t-sm); color:var(--ink-3); margin-top:var(--s1); max-width:44ch; }

/* Whole-card link on the homepage use-case grid */
.case a{ display:block; text-decoration:none; color:inherit; }
.case:hover a h3{ color:var(--accent); }

/* "See all" affordance under a homepage section */
.more{ margin-top:var(--s4); }
.more a{
  font-size:var(--t-sm); font-weight:500;
  text-decoration:none; color:var(--accent);
  border-radius:var(--r-btn); padding:8px 12px; margin-left:-12px;
  transition:background .2s var(--ease);
}
.more a:hover{ background:var(--accent-wash); }

/* Same affordance on a dark section */
.section--dark .more a{ color:var(--dk-accent); }
.section--dark .more a:hover{ background:rgba(255,255,255,.1); }

/* ==========================================================================
   Icons (inline SVG sprite, referenced via <use href="#i-…">)
   --------------------------------------------------------------------------
   Stroke-only line icons. fill is always none and the stroke is currentColor,
   so an icon takes its container's text colour and is recoloured with a
   modifier class. Sized in em so it scales with the label it sits beside.
   The sprite lives in shell.html and is therefore present on every page.
   ========================================================================== */
.icon{
  width:1.25em; height:1.25em; flex:none;
  display:inline-block; vertical-align:-.18em;
  color:var(--ink);
}
.icon--accent{ color:var(--accent); }
.icon--marigold{ color:var(--color-marigold); }
.icon--coral{ color:var(--color-coral); }
.icon--sky{ color:var(--color-sky-wash); }
.section--dark .icon{ color:var(--dk-text); }
.section--dark .icon--accent{ color:var(--dk-accent); }

/* A hairline chip that frames a line icon (used on cards and feature lists) */
.ic-chip{
  width:2.75rem; height:2.75rem; flex:none;
  display:grid; place-items:center;
  border:1px solid var(--line); border-radius:var(--r-btn);
  color:var(--ink);
  font-size:1.6rem;            /* scales the 1.25em icon to ~28px */
  background:var(--surface);
  transition:border-color .2s var(--ease), color .2s var(--ease);
}
.ic-chip--accent{ color:var(--accent); border-color:rgba(0,117,222,.28); }
.ic-chip--marigold{ color:var(--color-marigold); border-color:rgba(255,177,16,.4); }
.ic-chip--coral{ color:var(--color-coral); border-color:rgba(246,73,50,.4); }
.section--dark .ic-chip{ background:rgba(255,255,255,.06); border-color:var(--dk-line); }
.section--dark .ic-chip--accent{ color:var(--dk-accent); }

/* Use-case card: icon sits above the title, ink by default, accents on hover */
.case__ic{ margin-bottom:var(--s2); }
.case:hover .case__ic{ color:var(--accent); }

/* Problem-column card icon */
.col__ic{ margin-bottom:var(--s2); }

/* Use-case index row: a small glyph before the title */
.uc-row{ grid-template-columns:3rem 2rem minmax(0,1.1fr) minmax(0,1.4fr) auto; }
.uc-row__ic{ font-size:1.25rem; color:var(--ink-40); align-self:baseline; }
.uc-row:hover .uc-row__ic{ color:var(--accent); }
@media (max-width:820px){
  .uc-row{ grid-template-columns:2.5rem 1.6rem 1fr; }
  .uc-row__ic{ grid-row:1; }
  .uc-row__t{ grid-column:3; }
}

/* Pricing tier glyph */
.price__ic{
  width:2.75rem; height:2.75rem; margin-bottom:var(--s2);
  display:grid; place-items:center; font-size:1.7rem; color:var(--accent);
}
.price--featured .price__ic{ color:var(--dk-accent); }

/* Subhead glyph — a category mark on use-case detail pages */
.subhead__ic{
  display:inline-grid; place-items:center;
  width:2.5rem; height:2.5rem; margin-bottom:var(--s2);
  border:1px solid var(--line); border-radius:var(--r-btn);
  color:var(--accent); font-size:1.5rem;
}

/* Seal title gets a small lock glyph */
.seal__title{ display:flex; align-items:center; gap:.5rem; }
.seal__title .icon{ color:var(--accent); font-size:1.1rem; }

/* ==========================================================================
   Diagrams (authored inline as SVG, themed with existing tokens)
   --------------------------------------------------------------------------
   Flat, hairline, line-only. No gradients, no shadows, no fills except the
   single accent. Figures explain the mechanism — they are the product's
   selling point, not decoration.
   ========================================================================== */
.diagram{ width:100%; height:auto; display:block; }
.diagram .node{
  fill:var(--surface); stroke:var(--ink); stroke-width:1.5;
}
.diagram .node--soft{ fill:var(--paper); }
.diagram .node--accent{ fill:none; stroke:var(--accent); }
.diagram .ln{ stroke:var(--line-strong); stroke-width:1.5; fill:none; }
.diagram .ln--accent{ stroke:var(--accent); }
.diagram .ln--dash{ stroke-dasharray:5 5; }
.diagram .dot{
  fill:var(--color-marigold); stroke:none;
}
.diagram .dot--accent{ fill:var(--accent); }
.diagram .arrow{ fill:var(--ink); }
.diagram text{ font-family:var(--font-sans); fill:var(--ink-2); }
.diagram .t-ink{ fill:var(--ink); }
.diagram .t-sm{ font-size:11px; }
.diagram .t-13{ font-size:13px; }
.diagram .t-accent{ fill:var(--accent); }
.diagram .t-strong{ font-weight:600; }
.diagram .ok{ fill:var(--ok); }

/* Diagram on a dark section: invert the surface and ink */
.section--dark .diagram .node{ fill:rgba(255,255,255,.06); stroke:var(--dk-text); }
.section--dark .diagram .node--soft{ fill:rgba(255,255,255,.03); }
.section--dark .diagram .ln{ stroke:var(--dk-line); }
.section--dark .diagram text{ fill:var(--dk-text-2); }
.section--dark .diagram .t-ink{ fill:#fff; }
.section--dark .diagram .t-accent{ fill:var(--dk-accent); }
.section--dark .diagram .arrow{ fill:var(--dk-text); }

/* A framed figure: white card on the canvas, hairline border, the one place a
   shadow is permitted (a product mockup / schematic), never content text. */
.figure{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  padding:var(--s4);
  box-shadow:var(--shadow-mock);
}
.figure__cap{
  margin-top:var(--s3); padding-top:var(--s2);
  border-top:1px solid var(--line);
  font-size:var(--t-sm); color:var(--ink-3);
}
.figure__cap b{ color:var(--ink); font-weight:600; }

/* Two-up comparison: what we hold vs what we never hold */
.hold{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); }
@media (max-width:720px){ .hold{ grid-template-columns:1fr; } }
.hold__card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-card); padding:var(--s3);
}
.hold__card h3{ font-size:1.0625rem; display:flex; align-items:center; gap:.6rem; margin-bottom:var(--s1); }
.hold__card p{ font-size:var(--t-sm); color:var(--ink-3); }
.hold__card--no{ border-left:3px solid var(--color-coral); }
.hold__card--yes{ border-left:3px solid var(--ok); }