@import url('/styles/fonts.d8383edf08.css');

/* ============================================================
   ADHDNotes site — design tokens and base system
   Art direction: "The Plain File". The page is a Markdown
   document; the heading marker in the left gutter is the spine.
   Governing rule from the application: color communicates a
   role, never decoration.
   ============================================================ */

:root{
  /* Violet — primary action, selection, Markdown syntax */
  --violet:#6C4CF0;
  --violet-hover:#5939D8;
  --violet-soft:#EFECFF;
  /* Violet legible on navy grounds (see report: #6C4CF0 is 3.59:1 on --navy) */
  --violet-on-navy:#B9A6FF;

  /* Cyan — discovery, focus, retrieval */
  --cyan:#12BFEF;
  --cyan-soft:#E5F9FF;

  /* Amber — scarce spark, brand mark */
  --amber:#FFD84D;

  /* Navy — product bands and footer */
  --navy:#080D24;
  --navy-raised:#0D1433;
  --navy-soft:#18203F;
  --navy-muted:#A7B0D0;
  --navy-ink:#E7EAF6;

  /* Ink — text ramp on paper grounds */
  --ink:#111936;
  --ink-2:#4C5573;
  --ink-3:#5F6A8D;

  /* Paper — page grounds */
  --paper:#FFFFFF;
  --paper-sub:#F6F8FD;
  --bg:#E9EDF7;

  /* Hairlines */
  --rule:rgba(32,43,85,.10);
  --rule-strong:rgba(32,43,85,.18);

  /* Status */
  --success:#22B979;
  --danger:#E94C67;
  --warning:#8F6200;

  /* Annotation grammar — fixed by the product, must match exactly.
     Only the Settled pair is used as a literal token: the hero's static
     end-state highlight always reads Settled. The other four highlight
     colours are never hardcoded here — every other surface (the grammar
     section's swatches, example mark, and table) sources its colour from
     the --tone custom property the renderer emits per src/data/grammar.mjs,
     so there is exactly one place those four values can drift from. */
  --hl-settled:#22B979;
  --hl-settled-wash:rgba(34,185,121,.24);

  /* Aha moment callout — lifted from the app's own live-Markdown palette
     (src/components/editor/liveMarkdown.ts). Shared by every surface that
     renders a callout, so the literals live here and nowhere else. */
  --aha-ground:#FFF9E8;
  --aha-ground-2:#FFFDF7;
  --aha-edge:#F1E1B2;
  --aha-rule:#D98900;
  --aha-label:#8A5B00;
  --aha-ink:#3B2F10;

  /* Other callout accents — lifted from the same source as --aha-*
     (src/components/editor/markdown-preview.css's --callout-accent /
     border-left per data-token). Only the six tokens that colour ends
     lend a NEW value get one here: Note reuses --violet, Remember and
     Warning reuse --aha-label/--aha-rule, Important reuses
     --violet-hover, and Preparing for reuses --amber — the app assigns
     those tokens the exact same hex already, so no new token is needed. */
  --callout-ref:#64748B;
  --callout-def:#1D4ED8;
  --callout-example:#4B5163;
  --callout-tip:#158A5C;
  --callout-question:#0E7A8F;
  --callout-exam:#BE123C;

  /* ── Callout grammar: structural forms ───────────────────────────
     Twelve callout types, each carrying its own structural cue rather
     than one card tinted twelve ways — see the .gcallout--* block in
     this stylesheet. Values follow the application's design source
     (DESIGN/ADHD Notes Design.dc.html, lines 1073-1190). Accents
     already declared above (--violet, --violet-hover, --amber,
     --aha-*, --callout-*) are reused, never redeclared, so a colour
     the app owns still has exactly one home here.

     Three values are deliberately DARKER than the design source so
     every label-on-ground pairing clears WCAG AA at 4.5:1 for normal
     text; each is flagged where it is declared. */

  /* Shared body ink on the two neutral grounds */
  --co-ink:#1D2647;

  /* Note - violet rail on the page's own sub-paper */
  --co-note-ground:#F6F8FD;

  /* Aha moment - warm gradient card with an inset accent bar */
  --co-aha-glow:rgba(251,191,36,.16);

  /* Remember - sticky paper, folded corner, off-axis shadow */
  --co-remember-ground:#FFF3C4;
  --co-remember-fold:#E9D590;
  --co-remember-ink:#3F2D02;
  --co-remember-shadow:rgba(120,90,0,.18);

  /* Come back to - dashed card stamped with how long it has been open.
     Chip ink is the label's #475569, not the design's #64748B, which is
     only 4.20:1 on the chip ground. */
  --co-ref-ground:#FAFBFC;
  --co-ref-dash:#B8BFD0;
  --co-ref-label:#475569;
  --co-ref-chip-ground:#EEF1F5;
  --co-ref-ink:#33405A;

  /* Definition - term ruled off from meaning */
  --co-def-ground:#F4F8FF;
  --co-def-edge:#CFE0FB;
  --co-def-term:#14224A;
  --co-def-underline:#93B8F5;
  --co-def-ink:#2B3A5C;

  /* Example - monospace body behind a lettered chip */
  --co-example-edge:rgba(32,43,85,.12);
  --co-example-chip:#111936;

  /* Tip - green rail. The rail keeps the app's #158A5C
     (--callout-tip); the LABEL is darkened, because #158A5C is
     4.13:1 on this ground. */
  --co-tip-ground:#F2FBF7;
  --co-tip-label:#0F7A50;
  --co-tip-ink:#153F31;

  /* Important - the heaviest rail on the page */
  --co-important-edge:#DDD6FF;
  --co-important-ink:#241D5C;

  /* Open question - ringed card with a filled query disc. The design's
     disc is #0E8FA8, which carries white at only 3.81:1; darkened to
     the label's own #0E7A8F (5.00:1 with white). */
  --co-question-edge:#8FDCEB;
  --co-question-disc:#0E7A8F;
  --co-question-ink:#0B4351;

  /* Testable - torn perforated edge and the exam it belongs to */
  --co-exam-ground:#FFF1F4;
  --co-exam-edge:#F9C3D0;
  --co-exam-perf:#E11D48;
  --co-exam-ink:#4D1024;

  /* Warning - amber rail on a scorched ground */
  --co-warning-ground:#FFF6F0;
  --co-warning-label:#A33A08;
  --co-warning-ink:#4A1E05;

  /* Preparing for - runway card: day counter, event, seeded tasks */
  --co-prep-chip-ground:#FFF6DE;
  --co-prep-rail:#EDE7FF;

  /* Highlight tints - the marker-pen sweep. A highlighter lays ink over
     the lower half of a line, not behind the whole box, so a rendered
     mark is `linear-gradient(180deg,transparent 52%,TINT 52%)` in these
     softer tints. The five identity colours in src/data/grammar.mjs stay
     exact on the swatches and in the legend table; these are the pen. */
  --hl-tint-yellow:#FFE680;
  --hl-tint-orange:#FFD0A8;
  --hl-tint-pink:#FFC6E0;
  --hl-tint-green:#B8F0C8;
  --hl-tint-blue:#BFE0FF;
  --hl-sweep:52%;

  /* Cyan retrieval ring — the pulse a mark gets as it is catalogued. */
  --cyan-ring:rgba(18,191,239,.5);

  /* Type */
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --display:'Anton',var(--sans);

  /* Space, radii, elevation */
  --measure:58ch;
  --shell:1180px;
  --gutter:88px;
  --pad:32px;
  --section:96px;
  --r-btn:10px;
  --r-card:13px;
  --r-surface:16px;
  --shadow-card:0 14px 34px rgba(32,43,85,.14);
  --shadow-hero:0 22px 60px rgba(32,43,85,.13);
  --shadow-navy:0 40px 90px rgba(0,0,0,.5);
  --ease:cubic-bezier(.22,.61,.36,1);
  --t-fast:150ms;
  --t-slow:240ms;
}

/* ── reset ─────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:'cv05' 1,'ss03' 1;
  text-rendering:optimizeLegibility;
}
img,svg,video{max-width:100%}
img{height:auto}
[id]{scroll-margin-top:88px}

/* ── headings and prose ────────────────────────────────────── */
h1,h2,h3,h4{font-family:var(--sans);font-weight:600;color:var(--ink);margin:0 0 .5em;text-wrap:balance}
h1{font-size:clamp(2.4rem,5.2vw,3.95rem);line-height:1.03;letter-spacing:-.035em;max-width:17ch}
h2{font-size:clamp(1.75rem,3.4vw,2.5rem);line-height:1.1;letter-spacing:-.03em}
h3{font-size:1.15rem;line-height:1.35;letter-spacing:-.02em}
h4{font-size:1.0625rem;line-height:1.4;letter-spacing:-.012em}
p,ul,ol,dl,table,figure,pre{margin:0 0 1.15rem}
p:last-child,ul:last-child,ol:last-child{margin-bottom:0}
ul,ol{padding-left:1.25rem}
li{margin:0 0 .4rem}
strong{font-weight:600}
small,.small{font-size:.925rem;line-height:1.55}
hr{border:0;border-top:1px solid var(--rule);margin:2.5rem 0}
::selection{background:var(--violet-soft);color:var(--ink)}

/* Quiet reading surface — the app's own measure rule. */
.prose{max-width:var(--measure)}
.prose h2,.prose h3{margin-top:2rem}
.prose h2:first-child,.prose h3:first-child{margin-top:0}

/* ── links ─────────────────────────────────────────────────── */
a{color:var(--violet);text-decoration:none}
a:hover{color:var(--violet-hover);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose a{text-decoration:underline;text-decoration-color:rgba(108,76,240,.35);text-underline-offset:3px}
.prose a:hover{text-decoration-color:currentColor}

/* ── monospace: Markdown syntax, paths, shortcuts, metadata ── */
code,pre,kbd,samp,.mono{font-family:var(--mono);font-variant-ligatures:none}
code{
  font-size:.95em;
  background:var(--paper-sub);
  border:1px solid var(--rule);
  border-radius:5px;
  padding:.08em .38em;
  color:var(--ink);
}
pre{
  font-size:.925rem;
  line-height:1.5;
  background:var(--paper-sub);
  border:1px solid var(--rule);
  border-radius:var(--r-card);
  padding:18px 20px;
  overflow-x:auto;
}
pre code{background:none;border:0;padding:0;font-size:1em}
kbd{
  font-size:.82em;
  font-weight:500;
  background:var(--paper);
  border:1px solid var(--rule-strong);
  border-bottom-width:2px;
  border-radius:6px;
  padding:.12em .45em;
  color:var(--ink-2);
  white-space:nowrap;
}
/* Inline Markdown syntax token — always violet, always mono. */
.syntax{font-family:var(--mono);font-size:.95em;color:var(--violet);white-space:nowrap}
.syntax-quiet{font-family:var(--mono);font-size:.95em;color:var(--ink-3)}
/* Metadata line: file paths, versions, timestamps. */
.meta{font-family:var(--mono);font-size:.8125rem;line-height:1.5;color:var(--ink-3);margin:0}

/* ── accessibility primitives ──────────────────────────────── */
.skip{position:absolute;left:-9999px}
.skip:focus{
  left:8px;top:8px;z-index:100;position:fixed;
  background:var(--violet);color:#fff;
  font-family:var(--sans);font-size:.95rem;font-weight:600;
  padding:10px 16px;border-radius:8px;text-decoration:none;
  box-shadow:0 0 0 2px rgba(17,25,54,.85),0 10px 26px rgba(8,13,36,.32);
}
/* Cyan ring, with an ink halo so the indicator keeps 3:1 internal
   contrast on paper grounds where cyan alone is only 2.16:1 on white.
   The halo needs real specificity: components such as .btn-primary
   carry their own box-shadow, which would beat a :where() rule. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--cyan);
  outline-offset:2px;
  border-radius:3px;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{
  box-shadow:0 0 0 2px rgba(17,25,54,.85);
}
.band-navy a:focus-visible,
.band-navy button:focus-visible,
.band-navy summary:focus-visible,
.band-navy [tabindex]:focus-visible,
.site-footer a:focus-visible{
  box-shadow:0 0 0 2px rgba(8,13,36,.95);
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  html{scroll-behavior:auto}
}

/* ============================================================
   Document spine
   <section class="band">
     <div class="doc">
       <div class="gutter"><span class="mark">##</span></div>
       <div class="col"> ... </div>
     </div>
   </section>
   ============================================================ */
.doc{
  max-width:var(--shell);
  margin:0 auto;
  padding:0 var(--pad);
  display:grid;
  grid-template-columns:var(--gutter) minmax(0,1fr);
}
.gutter{position:relative}
.gutter::after{content:"";position:absolute;top:0;bottom:0;right:23px;width:1px;background:var(--rule)}
.mark{
  position:sticky;
  top:84px;
  display:block;
  font-family:var(--mono);
  font-size:.8125rem;
  font-weight:600;
  line-height:1.5;
  letter-spacing:.02em;
  color:var(--ink-3);
  padding-top:6px;
}
.col{padding-left:40px;min-width:0}

/* ── bands ─────────────────────────────────────────────────── */
.band{padding:var(--section) 0;background:var(--paper)}
.band-alt{background:var(--bg)}
.band-alt .card,.band-alt code,.band-alt pre{background:var(--paper)}
.band-tight{padding:calc(var(--section) / 2) 0}

.band-navy{background:var(--navy);color:var(--navy-ink)}
.band-navy h1,.band-navy h2,.band-navy h3,.band-navy h4{color:#fff}
.band-navy .lede{color:var(--navy-muted)}
.band-navy .eyebrow,.band-navy .meta,.band-navy .mark{color:var(--navy-muted)}
.band-navy .gutter::after{background:var(--navy-soft)}
.band-navy a{color:var(--violet-on-navy)}
.band-navy a:hover{color:#fff}
.band-navy code{background:var(--navy-raised);border-color:var(--navy-soft);color:var(--navy-ink)}
.band-navy .card{background:var(--navy-raised);border-color:var(--navy-soft);color:var(--navy-muted)}
.band-navy .syntax{color:var(--violet-on-navy)}

/* Product screenshots always sit in a navy instrument frame. */
.shot{
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--navy-soft);
  box-shadow:var(--shadow-navy);
}
.shot img{display:block;width:100%;height:auto}
.shot-caption{font-family:var(--mono);font-size:.8125rem;color:var(--ink-3);margin:14px 0 0}
.band-navy .shot-caption{color:var(--navy-muted)}

/* Large paper surface (hero document, feature panels). */
.surface{
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:var(--r-surface);
  box-shadow:var(--shadow-hero);
  overflow:hidden;
}

/* ── text roles ────────────────────────────────────────────── */
.eyebrow{
  font-family:var(--mono);
  font-size:.8125rem;
  font-weight:500;
  letter-spacing:.01em;
  line-height:1.5;
  color:var(--ink-3);
  margin:0 0 1.25rem;
}
.eyebrow b,.eyebrow strong{color:var(--violet);font-weight:500}
.lede{
  font-size:1.22rem;
  line-height:1.62;
  letter-spacing:-.005em;
  color:var(--ink-2);
  max-width:var(--measure);
  margin:0 0 2rem;
}

/* ── buttons ───────────────────────────────────────────────── */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--sans);
  font-size:.97rem;
  font-weight:600;
  line-height:1.2;
  letter-spacing:-.005em;
  padding:13px 22px;
  border:1px solid transparent;
  border-radius:var(--r-btn);
  text-decoration:none;
  cursor:pointer;
  transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),
             color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease);
}
.btn:hover{text-decoration:none}
.btn svg{flex:none}
.btn-primary{background:var(--violet);color:#fff;box-shadow:0 8px 22px rgba(108,76,240,.26)}
.btn-primary:hover{background:var(--violet-hover);color:#fff;transform:translateY(-1px);box-shadow:0 12px 28px rgba(108,76,240,.32)}
.btn-secondary{background:var(--paper);color:var(--ink);border-color:var(--rule-strong)}
.btn-secondary:hover{border-color:var(--violet);color:var(--violet)}
.btn-small{padding:9px 16px;font-size:.9rem}
.band-navy .btn-secondary{background:transparent;color:var(--navy-ink);border-color:var(--navy-soft)}
.band-navy .btn-secondary:hover{border-color:var(--violet-on-navy);color:#fff}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:0 0 1rem}

/* ── cards and grids ───────────────────────────────────────── */
.card{
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:var(--r-card);
  padding:19px 20px;
  transition:border-color var(--t-slow) var(--ease),transform var(--t-slow) var(--ease);
}
.card h3{margin:0 0 .3rem;font-size:1.03rem}
.card p{margin:0;font-size:.94rem;line-height:1.55;color:var(--ink-2)}
.card .syntax{display:block;margin:0 0 .55rem;font-size:.8125rem}
a.card:hover,.card-linked:hover{border-color:var(--violet);transform:translateY(-2px);box-shadow:var(--shadow-card)}
a.card{color:inherit;display:block}
a.card:hover{text-decoration:none}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(238px,1fr))}
.grid-2{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.coming-grid{grid-template-columns:repeat(2,minmax(0,1fr))}

/* The only pill in the system: the status chip. */
.chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-family:var(--mono);
  font-size:.75rem;
  font-weight:500;
  line-height:1;
  letter-spacing:.01em;
  padding:5px 12px;
  border-radius:999px;
  border:1px solid var(--rule-strong);
  background:var(--paper-sub);
  color:var(--ink-2);
  white-space:nowrap;
}
.chip-violet{background:var(--violet-soft);border-color:rgba(108,76,240,.26);color:var(--violet-hover)}
.chip-cyan{background:var(--cyan-soft);border-color:rgba(18,191,239,.32);color:#04617D}
.chip-amber{background:#FFF8E3;border-color:rgba(217,137,0,.3);color:var(--warning)}
.band-navy .chip{background:var(--navy-raised);border-color:var(--navy-soft);color:var(--navy-muted)}

/* ============================================================
   Page chrome
   ============================================================ */
.site-header{
  position:sticky;
  top:0;
  z-index:40;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(160%) blur(12px);
  -webkit-backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--rule);
}
.site-header__inner{
  max-width:var(--shell);
  margin:0 auto;
  padding:12px var(--pad);
  display:flex;
  align-items:center;
  gap:14px;
}
.wordmark{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--display);
  font-weight:400;
  font-size:1.24rem;
  letter-spacing:.005em;
  line-height:1;
  color:var(--ink);
  text-decoration:none;
  text-transform:uppercase;
}
.wordmark:hover{color:var(--ink);text-decoration:none}
.wordmark svg{flex:none;display:block}
.site-nav{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:26px;
  font-size:.94rem;
  font-weight:500;
}
/* min-height meets the WCAG 2.2 AA target-size minimum (24x24 CSS px);
   the links measured 23px tall before this. */
.site-nav a{
  display:inline-flex;align-items:center;min-height:24px;
  color:var(--ink-2);text-decoration:none;
}
.site-nav a:hover{color:var(--violet);text-decoration:none}
.site-header__download{margin-left:4px}

.site-footer{background:var(--navy);color:var(--navy-muted);padding:64px 0 34px;margin-top:0}
.site-footer__inner{
  max-width:var(--shell);
  margin:0 auto;
  padding:0 var(--pad);
  display:grid;
  gap:36px;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
}
.site-footer .wordmark{color:#fff}
.site-footer .wordmark:hover{color:#fff}
.site-footer__tagline{font-size:.94rem;line-height:1.6;color:var(--navy-muted);margin:14px 0 0;max-width:34ch}
.site-footer__heading{
  font-family:var(--mono);
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:#fff;
  margin:0 0 14px;
}
.site-footer__col{display:flex;flex-direction:column;align-items:flex-start}
.site-footer__col a{color:var(--navy-muted);font-size:.94rem;line-height:1.5;padding:5px 0;text-decoration:none}
.site-footer__col a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.site-footer__bottom{
  max-width:var(--shell);
  margin:44px auto 0;
  padding:20px var(--pad) 0;
  border-top:1px solid var(--navy-soft);
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
  align-items:center;
  font-family:var(--mono);
  font-size:.8125rem;
  color:var(--navy-muted);
}

/* Fallback rhythm for page content not yet wrapped in a band —
   keeps bare headings and paragraphs on the shell measure. */
main > :where(h1,h2,h3,p,ul,ol,pre,table,figure,blockquote,.grammar-swatches,.grammar-panels,.grammar-callouts,.table-scroll){
  max-width:calc(var(--shell) - var(--pad) * 2);
  margin-left:auto;
  margin-right:auto;
  padding-left:var(--pad);
  padding-right:var(--pad);
}
main > :where(h1,h2,h3,p,ul,ol):first-child{padding-top:var(--section)}
main > :where(h1,h2,h3,p,ul,ol,pre,table,figure,blockquote,.grammar-swatches,.grammar-panels,.grammar-callouts,.table-scroll):last-child{padding-bottom:var(--section)}

/* ── responsive ────────────────────────────────────────────── */
@media (max-width:960px){
  .site-footer__inner{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  :root{--section:56px;--pad:22px}
  .doc{grid-template-columns:minmax(0,1fr)}
  .gutter{display:none}
  .col{padding-left:0}
  [id]{scroll-margin-top:72px}
}
@media (max-width:640px){
  /* Header folds to two rows rather than dropping links: the nav
     must stay reachable at every width. */
  .site-header__inner{flex-wrap:wrap;gap:10px;padding:10px var(--pad) 0}
  .site-header__download{margin-left:auto}
  .site-nav{
    order:3;
    width:100%;
    margin-left:0;
    gap:20px;
    font-size:.9rem;
    padding:2px 0 10px;
    overflow-x:auto;
    scrollbar-width:none;
  }
  .site-nav::-webkit-scrollbar{display:none}
  .site-nav a{white-space:nowrap}
  .site-footer__inner{grid-template-columns:1fr}
  .btn-row .btn{flex:1 1 220px;justify-content:center}
}


/* ============================================================
   Grammar section — the highlight and callout vocabulary
   Shared by the landing page (#grammar) and the callouts docs
   page. Colours arrive per-instance as an inline custom property,
   style="--tone:#RRGGBB", set by build.mjs from src/data/grammar.mjs
   — this stylesheet never hardcodes a highlight colour.
   ============================================================ */
.grammar-subhead{margin-top:2.4rem}
.grammar-intro{color:var(--ink-2);max-width:var(--measure)}

/* ── highlight swatches: a real role="tablist" ───────────────── */
.grammar-swatches{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:0 0 18px;
}
.grammar-swatch{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:var(--sans);
  font-size:.92rem;
  font-weight:600;
  color:var(--ink-2);
  background:var(--paper);
  border:1px solid var(--rule-strong);
  border-radius:999px;
  padding:8px 16px 8px 12px;
  cursor:pointer;
  transition:border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
}
.grammar-swatch:hover{border-color:var(--tone);color:var(--ink)}
.grammar-swatch[aria-selected="true"]{
  border-color:var(--tone);
  color:var(--ink);
  background:var(--paper-sub);
  background:color-mix(in srgb,var(--tone) 16%,var(--paper));
}
.grammar-swatch__dot{
  width:11px;height:11px;flex:none;
  border-radius:50%;
  background:var(--tone);
  box-shadow:inset 0 0 0 1px rgba(17,25,54,.14);
}

/* ── the live example region ─────────────────────────────────── */
.grammar-panels{margin:0 0 22px}
.grammar-example{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  border:1px solid var(--rule);
  border-radius:var(--r-surface);
  overflow:hidden;
  background:var(--paper);
  box-shadow:var(--shadow-card);
}
.grammar-example[hidden]{display:none}
.grammar-example__src,.grammar-example__out{padding:20px 22px}
.grammar-example__src{border-right:1px solid var(--rule);background:var(--paper-sub)}
.grammar-example__src pre{margin:8px 0 0;background:none;border:0;padding:0;font-size:.88rem;white-space:pre-wrap;overflow-wrap:anywhere}
.grammar-example__src .syntax{color:var(--violet)}
.grammar-example__out .meta{margin:0}
.grammar-example__out p{margin:8px 0 0;font-size:1.02rem;line-height:1.62;color:var(--ink)}
/* Marker-pen sweep, not a full-height wash: ink covers only the lower
   half of the line, the way a highlighter actually lands. --tint is set
   per tone by build.mjs from the --hl-tint-* group in :root. */
.grammar-hl{
  background:linear-gradient(180deg,transparent var(--hl-sweep),var(--tint) var(--hl-sweep));
  color:var(--ink);
  padding:0 2px;
  border-radius:0;
}

.band-alt .grammar-example__src{background:var(--paper)}

/* ── the syntax / meaning / colour table ─────────────────────── */
.table-scroll{overflow-x:auto}
.grammar-table{width:100%;border-collapse:collapse;font-size:.92rem;min-width:420px}
.grammar-table th,.grammar-table td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--rule)}
.grammar-table th{
  font-family:var(--mono);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.grammar-table td.syntax{white-space:nowrap}
.grammar-table__swatch{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.85rem;color:var(--ink-2)}
.grammar-table__dot{width:10px;height:10px;flex:none;border-radius:50%;background:var(--tone);box-shadow:inset 0 0 0 1px rgba(17,25,54,.14)}

/* ── rendered callout switcher ────────────────────────────────────
   Same tablist markup and interaction as the highlight swatches above
   (.grammar-swatches[role="tablist"] — scripts/grammar.js wires up
   every instance of that selector generically, so this second tablist
   needs no JS of its own).

   The twelve panels are NOT one card tinted twelve ways. Per the design
   source (DESIGN/ADHD Notes Design.dc.html, lines 1073–1190): "Hue alone
   cannot carry eleven types. So each gets a structural cue … Colour
   becomes confirmation, not the only signal." Each .gcallout--* rule
   below therefore changes the FORM — rail vs. full card vs. sticky
   paper, radius, border style, decoration — and only then the hue.

   Every colour is a :root token from the "Callout grammar" group; no
   hex literal appears in this block. --tone is set once per type on the
   line below and is shared by the tab button and the rendered panel, so
   the pill and the card always agree. */
.gcallout--note,     .grammar-callout-tab--note     {--tone:var(--violet)}
.gcallout--aha,      .grammar-callout-tab--aha      {--tone:var(--aha-rule)}
.gcallout--remember, .grammar-callout-tab--remember {--tone:var(--aha-label)}
.gcallout--ref,      .grammar-callout-tab--ref      {--tone:var(--co-ref-label)}
.gcallout--def,      .grammar-callout-tab--def      {--tone:var(--callout-def)}
.gcallout--example,  .grammar-callout-tab--example  {--tone:var(--co-example-chip)}
.gcallout--tip,      .grammar-callout-tab--tip      {--tone:var(--co-tip-label)}
.gcallout--important,.grammar-callout-tab--important{--tone:var(--violet-hover)}
.gcallout--question, .grammar-callout-tab--question {--tone:var(--callout-question)}
.gcallout--exam,     .grammar-callout-tab--exam     {--tone:var(--callout-exam)}
.gcallout--warning,  .grammar-callout-tab--warning  {--tone:var(--co-warning-label)}
.gcallout--prep,     .grammar-callout-tab--prep     {--tone:var(--violet)}

.grammar-callout-tabs{margin:0 0 18px}
.grammar-callout-tab__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;height:20px;
  flex:none;
  border-radius:6px;
  background:var(--paper-sub);
  color:var(--tone);
  font-family:var(--mono);
  font-size:.62rem;
  font-weight:700;
  line-height:1;
}
.grammar-callout-tab__icon svg{width:14px;height:14px;display:block}
.grammar-swatch[aria-selected="true"] .grammar-callout-tab__icon{background:var(--paper)}
/* Example and Open question have no Phosphor glyph in the design — they
   are identified by a lettered chip and a query disc respectively, so
   the tab carries the same mark rather than an invented icon. */
.grammar-callout-tab--example .grammar-callout-tab__icon{background:var(--co-example-chip);color:var(--paper)}
.grammar-callout-tab--question .grammar-callout-tab__icon{background:var(--co-question-disc);color:var(--paper);border-radius:50%;font-family:var(--sans);font-size:.78rem}

/* ── the shared skeleton every form starts from ────────────────── */
.grammar-callout-panel[hidden]{display:none}
.gcallout{
  position:relative;
  display:flex;
  gap:13px;
  align-items:flex-start;
  padding:15px 17px;
  background:var(--paper);
}
.gcallout__mark{
  flex:none;
  width:20px;height:20px;
  margin-top:1px;
  display:grid;
  place-items:center;
  color:var(--tone);
}
.gcallout__mark svg{width:19px;height:19px;display:block}
/* Body is a two-column grid so a context chip can sit beside the label
   while the paragraph spans the full measure underneath. The chip is
   authored before the label in source order — check.mjs requires the
   label span and the <p> to be adjacent — and is placed explicitly. */
.grammar-callout-render__body{
  min-width:0;
  flex:1;
  display:grid;
  grid-template-columns:max-content minmax(0,1fr);
  align-items:center;
  column-gap:9px;
  row-gap:5px;
}
.grammar-callout-render__label{
  grid-column:1;grid-row:1;
  font-family:var(--mono);
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.11em;
  text-transform:uppercase;
  line-height:1.5;
  color:var(--tone);
}
.gcallout__meta{grid-column:2;grid-row:1;justify-self:start;min-width:0}
.grammar-callout-render__body > p{
  grid-column:1 / -1;
  margin:0;
  font-size:.98rem;
  line-height:1.62;
  color:var(--co-ink);
}
.gcallout__tail{grid-column:1 / -1;display:flex;flex-direction:column;gap:9px;margin-top:2px}
/* The generic chip: a soft stamp beside the label. */
.gcallout__chip{
  display:inline-block;
  font-family:var(--mono);
  font-size:.66rem;
  font-weight:600;
  line-height:1.5;
  letter-spacing:.01em;
  border-radius:5px;
  padding:2px 7px;
  font-variant-numeric:tabular-nums;
}

/* ── 1. Note — plain rail, the quietest form ───────────────────── */
.gcallout--note{
  background:var(--co-note-ground);
  border-left:3px solid var(--tone);
  border-radius:0 10px 10px 0;
  padding:14px 16px;
}

/* ── 2. Aha moment — gradient card with an INSET accent bar ─────
   The bar is inset top and bottom (design: top:14px;bottom:14px), which
   is what separates it from the plain full-height rails above. */
.gcallout--aha{
  border:1px solid var(--aha-edge);
  border-radius:12px;
  padding:16px 18px;
  background:linear-gradient(120deg,var(--aha-ground),var(--aha-ground-2));
  box-shadow:0 6px 18px var(--co-aha-glow);
}
.gcallout__bar{
  position:absolute;
  left:-1px;top:14px;bottom:14px;
  width:3px;
  border-radius:2px;
  background:var(--aha-rule);
}
.gcallout--aha .grammar-callout-render__label{color:var(--aha-label)}
.gcallout--aha .grammar-callout-render__body > p{color:var(--aha-ink);font-style:italic;font-size:1rem;line-height:1.6}

/* ── 3. Remember — paper with a folded corner ──────────────────
   Square top-left, one soft corner bottom-right, an off-axis drop
   shadow, and a folded triangle sitting over the corner it rounds. */
.gcallout--remember{
  background:var(--co-remember-ground);
  border-radius:3px 3px 12px 3px;
  box-shadow:2px 6px 16px var(--co-remember-shadow);
  padding:16px 18px 18px;
  max-width:640px;
}
.gcallout--remember .grammar-callout-render__body > p{color:var(--co-remember-ink)}
.gcallout__fold{
  position:absolute;
  right:0;bottom:0;
  width:22px;height:22px;
  border-radius:0 0 12px 0;
  background:linear-gradient(135deg,var(--co-remember-fold) 50%,var(--co-remember-ground) 50%);
}

/* ── 4. Come back to — dashed, and stamped with how long it is open ── */
.gcallout--ref{
  background:var(--co-ref-ground);
  border:1px dashed var(--co-ref-dash);
  border-left:3px solid var(--callout-ref);
  border-radius:0 10px 10px 0;
  padding:14px 16px;
}
.gcallout--ref .grammar-callout-render__body > p{color:var(--co-ref-ink)}
.gcallout--ref .gcallout__chip{
  background:var(--co-ref-chip-ground);
  color:var(--co-ref-label);
}

/* ── 5. Definition — term split from meaning ───────────────────
   Label on its own row; underneath, the term (ruled) and the meaning
   share a baseline, so the split is visible before a word is read. */
.gcallout--def{
  background:var(--co-def-ground);
  border:1px solid var(--co-def-edge);
  border-radius:11px;
}
.gcallout--def .grammar-callout-render__body{align-items:baseline;row-gap:8px}
.gcallout--def .grammar-callout-render__label{grid-column:1 / -1;grid-row:1}
.gcallout--def .gcallout__meta{grid-column:1;grid-row:2}
.gcallout--def .grammar-callout-render__body > p{grid-column:2;grid-row:2;color:var(--co-def-ink)}
.gcallout__term{
  display:inline-block;
  font-size:1.05rem;
  font-weight:600;
  line-height:1.4;
  color:var(--co-def-term);
  border-bottom:2px solid var(--co-def-underline);
  padding-bottom:1px;
}

/* ── 6. Example — monospace body behind a lettered chip ────────── */
.gcallout--example{
  background:var(--co-note-ground);
  border:1px solid var(--co-example-edge);
  border-radius:10px;
  padding:14px 16px;
}
.gcallout--example .gcallout__mark{
  width:26px;height:26px;
  border-radius:7px;
  background:var(--co-example-chip);
  color:var(--paper);
  font-family:var(--mono);
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.04em;
}
.gcallout--example .grammar-callout-render__label{color:var(--callout-example)}
.gcallout--example .grammar-callout-render__body > p{
  font-family:var(--mono);
  font-size:.86rem;
  line-height:1.75;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
.gcallout--example .gcallout__chip{background:transparent;color:var(--callout-example);padding:2px 0}

/* ── 7. Tip — green rail ───────────────────────────────────────── */
.gcallout--tip{
  background:var(--co-tip-ground);
  border-left:3px solid var(--callout-tip);
  border-radius:0 10px 10px 0;
  padding:14px 16px;
}
.gcallout--tip .grammar-callout-render__body > p{color:var(--co-tip-ink)}

/* ── 8. Important — the heaviest rail on the page (5px) ────────── */
.gcallout--important{
  background:var(--violet-soft);
  border:1px solid var(--co-important-edge);
  border-left:5px solid var(--tone);
  border-radius:11px;
}
.gcallout--important .grammar-callout-render__body > p{color:var(--co-important-ink);font-weight:500}

/* ── 9. Open question — ringed card, filled query disc ─────────── */
.gcallout--question{
  background:var(--cyan-soft);
  border:1.5px solid var(--co-question-edge);
  border-radius:11px;
  padding:14px 16px;
}
.gcallout--question .gcallout__mark{
  width:26px;height:26px;
  border-radius:50%;
  background:var(--co-question-disc);
  color:var(--paper);
  font-size:.95rem;
  font-weight:700;
  line-height:1;
}
.gcallout--question .grammar-callout-render__body > p{color:var(--co-question-ink)}

/* ── 10. Testable — torn perforated edge + the exam it belongs to ── */
.gcallout--exam{
  background:var(--co-exam-ground);
  border:1px solid var(--co-exam-edge);
  border-radius:11px;
  overflow:hidden;
  padding-left:21px;
}
.gcallout__perf{
  position:absolute;
  left:0;top:0;bottom:0;
  width:4px;
  background:repeating-linear-gradient(180deg,var(--co-exam-perf) 0 7px,var(--co-exam-edge) 7px 14px);
}
.gcallout--exam .grammar-callout-render__body > p{color:var(--co-exam-ink)}
.gcallout--exam .gcallout__chip{
  background:var(--callout-exam);
  color:var(--paper);
  font-family:var(--sans);
  letter-spacing:.02em;
}

/* ── 11. Warning — amber rail on a scorched ground ─────────────── */
.gcallout--warning{
  background:var(--co-warning-ground);
  border-left:3px solid var(--aha-rule);
  border-radius:0 10px 10px 0;
  padding:14px 16px;
}
.gcallout--warning .grammar-callout-render__body > p{color:var(--co-warning-ink)}

/* ── 12. Preparing for — the runway card ───────────────────────
   Absent from the design's rendered set because preparation runways own
   it; built here from its Markdown shape (design source lines 373–378:
   title, `when:` with a day counter, `event:`, then the seeded tasks)
   and from the runway card those lines render into at lines 353–370. */
.gcallout--prep{
  background:var(--co-note-ground);
  border-left:3px solid var(--tone);
  border-radius:0 11px 11px 0;
}
.gcallout--prep .grammar-callout-render__body > p{
  font-size:1.02rem;
  font-weight:600;
  color:var(--ink);
  line-height:1.4;
}
.gcallout--prep .gcallout__chip{
  background:var(--co-prep-chip-ground);
  color:var(--aha-label);
  font-family:var(--sans);
}
.gcallout__when{font-size:.83rem;color:var(--ink-3);font-variant-numeric:tabular-nums}
/* Four segments, one per day of the runway; the days already seeded are
   filled. Decorative — the day counter chip carries the same fact in text. */
.gcallout__runway{display:flex;gap:4px;max-width:220px}
.gcallout__runway i{flex:1;height:5px;border-radius:3px;background:var(--co-prep-rail)}
.gcallout__runway i.on{background:var(--tone)}
.gcallout__tasks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.gcallout__tasks li{
  margin:0;
  position:relative;
  padding-left:26px;
  font-size:.92rem;
  line-height:1.45;
  color:var(--ink-2);
}
.gcallout__tasks li::before{
  content:"";
  position:absolute;
  left:0;top:1px;
  width:17px;height:17px;
  border-radius:50%;
  border:2.5px solid var(--amber);
}
.gcallout__event{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:.78rem;
  color:var(--violet);
}
.gcallout__event svg{width:14px;height:14px;flex:none}

@media (max-width:600px){
  .gcallout--def .grammar-callout-render__body{grid-template-columns:minmax(0,1fr)}
  .gcallout--def .gcallout__meta{grid-column:1;grid-row:2}
  .gcallout--def .grammar-callout-render__body > p{grid-column:1;grid-row:3}
}

/* ── callout card grid ────────────────────────────────────────── */
.grammar-callouts{margin:0 0 1.5rem}
.grammar-callout-card__token{margin:0 0 .55rem;font-size:.8125rem}

/* The twelve-card reference grid, folded away on the landing page.
   Open, it is the tallest thing in the tallest section; the docs carry
   the always-open version. */
.grammar-callout-reference{margin:0 0 1.5rem}
.grammar-callout-reference > summary{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  padding:10px 16px;
  width:fit-content;
  max-width:100%;
  border:1px solid var(--rule-strong);
  border-radius:10px;
  background:var(--paper);
  cursor:pointer;
  font-family:var(--mono);
  font-size:.82rem;
  color:var(--ink-2);
  list-style:none;
  transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
.grammar-callout-reference > summary::-webkit-details-marker{display:none}
.grammar-callout-reference > summary::before{
  content:"";
  flex:none;
  width:8px;
  height:8px;
  border-right:1.6px solid var(--violet);
  border-bottom:1.6px solid var(--violet);
  transform:rotate(-45deg) translate(-1px,-1px);
  transition:transform var(--t-fast) var(--ease);
}
.grammar-callout-reference[open] > summary::before{transform:rotate(45deg) translate(-2px,-2px)}
.grammar-callout-reference > summary:hover{color:var(--violet);border-color:var(--violet)}
.grammar-callout-reference[open] > summary{margin-bottom:20px}
.grammar-callout-reference__more{margin:14px 0 0}
.grammar-callout-reference__more a{color:var(--violet);font-weight:500}

.grammar-footnote{color:var(--ink-3);max-width:var(--measure)}

@media (max-width:640px){
  .grammar-example__src{border-right:0;border-bottom:1px solid var(--rule)}
}

/* ============================================================
   Product bands — Annotations and Library & PDFs
   Both bands reuse .band-navy / .shot from Task 4. This block adds
   the placeholder treatment for a not-yet-captured .shot, and the
   live-HTML chip rows for the Annotations workspace's origin
   filters and grouping modes.
   ============================================================ */

/* A .shot with no capture yet. Deliberately unmistakable: dashed
   border, no drop shadow, explicit "Screenshot pending" label — see
   Task 7 brief. aspect-ratio is set per-instance inline so layout
   does not jump once Task 13 swaps this for a real <img>. */
.shot.shot-pending{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:40px;
  text-align:center;
  background:var(--navy-raised);
  border:1.5px dashed var(--navy-soft);
  box-shadow:none;
}
.shot-pending__icon{color:var(--navy-muted);flex:none}
.shot-pending__label{
  font-family:var(--mono);
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--navy-muted);
  margin:0;
}
.shot-pending__desc{
  font-family:var(--sans);
  font-size:.88rem;
  line-height:1.5;
  color:var(--navy-muted);
  max-width:42ch;
  margin:0;
}

/* Origin filters and grouping modes, reproduced as live HTML beneath
   the Annotations capture — legible and screen-reader-readable at
   any size, independent of the screenshot. */
.annot-controls{margin:20px 0 0;display:flex;flex-direction:column;gap:16px}
.annot-controls__group{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 14px}
.annot-controls__label{
  flex:none;
  font-family:var(--mono);
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--navy-muted);
  margin:0;
  padding-top:6px;
}
.chip-row{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.annot-controls__meta{margin:2px 0 0}

/* ============================================================
   Annotations replay — the self-writing document and the hand-off
   Lives in #annotations. The finished state is written into the page
   as static HTML; scripts/annotations-replay.js only *replays* it.
   With JS off, or under prefers-reduced-motion, the static end state
   is what stands and nothing is lost.
   ============================================================ */

.replay-demo{
  display:grid;
  grid-template-columns:minmax(0,1fr) 316px;
  gap:18px;
  align-items:start;
  margin-top:46px;
}

/* ── the document surface ──────────────────────────────────── */
.replay-doc{
  display:flex;
  flex-direction:column;
  min-width:0;
  overflow:hidden;
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:var(--r-card);
  box-shadow:0 16px 40px rgba(32,43,85,.09);
}
.replay-doc__bar{
  display:flex;
  align-items:center;
  gap:8px;
  padding:11px 16px;
  border-bottom:1px solid var(--rule);
  background:var(--paper-sub);
}
.replay-dot{width:9px;height:9px;border-radius:50%;background:#DCE2EF;flex:none}
.replay-doc__name{font-family:var(--mono);font-size:.78rem;line-height:1.5;color:var(--ink-3);margin:0 0 0 7px}
.replay-doc__bar .chip{margin-left:auto}
.replay-stage{padding:28px 32px 34px;min-height:342px}
.replay-line{margin:0 0 15px;min-height:1.6em}
.replay-line:last-child{margin-bottom:0}

/* Raw Markdown as it is typed: mono body, violet syntax, violet caret. */
.replay-raw{
  font-family:var(--mono);
  font-size:.9rem;
  line-height:1.62;
  color:var(--ink-2);
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
.replay-raw i{font-style:normal;color:var(--violet)}
.replay-caret{
  display:inline-block;
  width:2px;
  height:1.02em;
  margin-left:1px;
  background:var(--violet);
  vertical-align:-.16em;
  animation:replay-blink 1.05s steps(1) infinite;
}
@keyframes replay-blink{50%{opacity:0}}

/* ── resolved Markdown ─────────────────────────────────────── */
.replay-r-h{display:block;font-size:1.5rem;font-weight:600;letter-spacing:-.026em;line-height:1.22;color:var(--ink)}
.replay-r-p{display:block;font-size:1.02rem;line-height:1.62;color:var(--ink)}
.replay-hl{
  background:linear-gradient(180deg,transparent var(--hl-sweep),var(--hl-tint-green) var(--hl-sweep));
  color:var(--ink);
  padding:0 2px;
  border-radius:0;
}
/* The hero renders one live Aha callout, so it must be the same object
   the grammar section renders (.gcallout--aha): gradient ground, a 1px
   warm edge, a soft amber glow, and an accent bar INSET top and bottom
   rather than a full-height left border, plus the filled lightbulb.
   See DESIGN/ADHD Notes Design.dc.html lines 1082-1090. */
.replay-callout{
  position:relative;
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:14px 17px;
  border:1px solid var(--aha-edge);
  border-radius:12px;
  background:linear-gradient(120deg,var(--aha-ground),var(--aha-ground-2));
  box-shadow:0 6px 18px var(--co-aha-glow);
}
.replay-callout__bar{
  position:absolute;
  left:-1px;top:13px;bottom:13px;
  width:3px;
  border-radius:2px;
  background:var(--aha-rule);
}
.replay-callout__icon{
  width:20px;height:20px;flex:none;margin-top:1px;
  color:var(--aha-rule);
  display:grid;place-items:center;
}
.replay-callout__icon svg{width:19px;height:19px;display:block}
.replay-callout__body{min-width:0}
.replay-callout__label{
  display:block;
  font-family:var(--mono);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.07em;
  line-height:1.4;
  color:var(--aha-label);
  margin:0 0 3px;
}
.replay-callout p{margin:0;font-size:.98rem;line-height:1.55;color:var(--aha-ink);font-style:italic}

/* Typeset without a math library: serif italic variables, upright
   operator names, a real rule for the fraction and the radical. */
.replay-eqn{
  display:block;
  text-align:center;
  padding:12px 0 10px;
  font-family:Georgia,'Times New Roman','IBM Plex Serif',serif;
  font-size:clamp(.95rem,2.7vw,1.18rem);
  font-style:italic;
  line-height:1;
  color:var(--ink);
  /* An equation never reflows mid-expression; it scrolls as one object. */
  white-space:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
}
.replay-eqn::-webkit-scrollbar{display:none}
.replay-eqn .fn{font-style:normal;letter-spacing:.005em}
.replay-eqn i{font-style:italic}
.replay-eqn sup{font-size:.6em;vertical-align:.58em;font-style:italic}
.replay-eqn sub{font-size:.62em;vertical-align:-.24em;font-style:italic}
.replay-paren{font-size:1.8em;font-style:normal;vertical-align:-.36em;line-height:0}
.replay-frac{display:inline-block;vertical-align:-.66em;text-align:center;margin:0 .1em}
.replay-frac>span{display:block;padding:0 .34em}
.replay-frac .den{border-top:1px solid currentColor;padding-top:.14em;margin-top:.12em;font-style:normal}
.replay-rad{border-top:1px solid currentColor;padding:0 .12em 0 .02em;margin-left:-.05em}
.replay-task{display:flex;align-items:flex-start;gap:11px;font-size:1.02rem;line-height:1.55;color:var(--ink)}
.replay-task__box{
  width:18px;height:18px;flex:none;margin-top:3px;
  border:1.7px solid var(--violet);
  border-radius:5px;
  background:var(--paper);
}

/* The mark pulses cyan — retrieval — as its copy leaves for the catalog. */
.replay-line .is-lifting{
  box-shadow:0 0 0 3px var(--cyan-ring)!important;
  border-radius:5px;
}

/* ── the Annotations panel ─────────────────────────────────── */
.replay-panel{
  display:flex;
  flex-direction:column;
  min-width:0;
  overflow:hidden;
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:var(--r-card);
  box-shadow:0 16px 40px rgba(32,43,85,.09);
}
.replay-panel__bar{padding:12px 16px;border-bottom:1px solid var(--rule);background:var(--paper-sub)}
.replay-panel__title{font-size:.94rem;font-weight:600;line-height:1.3;color:var(--ink);margin:0}
.replay-panel__sub{font-family:var(--mono);font-size:.72rem;line-height:1.4;color:var(--ink-3);margin:2px 0 0}
.replay-rows{list-style:none;margin:0;padding:12px}
.replay-anno{
  display:flex;
  gap:10px;
  align-items:stretch;
  margin:0 0 8px;
  padding:10px 11px;
  border:1px solid var(--rule);
  border-radius:10px;
  background:var(--paper);
}
.replay-anno:last-child{margin-bottom:0}
.replay-anno__swatch{width:4px;flex:none;border-radius:2px;background:var(--ink-3)}
.replay-anno--settled .replay-anno__swatch{background:var(--hl-settled)}
.replay-anno--aha .replay-anno__swatch{background:var(--aha-rule)}
.replay-anno__body{min-width:0}
.replay-anno__label{
  font-family:var(--mono);
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.045em;
  line-height:1.4;
  color:var(--ink-3);
  margin:0 0 3px;
}
.replay-anno__text{font-size:.88rem;line-height:1.45;color:var(--ink);margin:0}
.replay-anno__origin{font-family:var(--mono);font-size:.68rem;line-height:1.4;color:var(--ink-3);margin:4px 0 0;overflow-wrap:anywhere}
/* The flying copy of a row, in transit from document to catalog. */
.replay-ghost{
  transform-origin:0 0;
  background:var(--paper);
  box-shadow:0 18px 38px rgba(32,43,85,.24);
  border-color:var(--rule-strong);
}

/* ── replay control ────────────────────────────────────────── */
.replay-replay{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin:18px 0 0;
  padding:0 0 2px;
  background:none;
  border:0;
  border-bottom:1px dashed var(--rule-strong);
  font-family:var(--mono);
  font-size:.78rem;
  line-height:1.5;
  color:var(--ink-3);
  cursor:pointer;
  transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
.replay-replay:hover{color:var(--violet);border-bottom-color:var(--violet)}
.replay-replay[hidden]{display:none}

@media (max-width:1040px){
  .replay-demo{grid-template-columns:minmax(0,1fr) 280px}
}
@media (max-width:900px){
  .replay-demo{grid-template-columns:minmax(0,1fr)}
  .replay-stage{min-height:0}
}
@media (max-width:820px){
  .replay-stage{padding:24px 22px 28px}
  .replay-demo{margin-top:34px}
}

/* ============================================================
   Local-first strip (Task 9)
   ============================================================ */
.proof-strip{
  list-style:none;
  margin:0;
  padding:16px 0;
  display:flex;
  flex-wrap:wrap;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  font-family:var(--mono);
  font-size:.92rem;
  color:var(--ink-2);
}
.proof-strip li{margin:0;padding:4px 26px;border-left:1px solid var(--rule)}
.proof-strip li:first-child{border-left:0;padding-left:0}
.proof-strip code{background:none;border:0;padding:0;color:var(--ink-2)}
@media (max-width:640px){
  .proof-strip{flex-direction:column;gap:8px}
  .proof-strip li{border-left:0;padding:2px 0}
}

/* ============================================================
   Forced daily migration (Task 9)
   ============================================================ */
.verdict-callout{
  margin:1.6rem 0 1.8rem;
  padding:22px 24px;
  border:1px solid var(--rule-strong);
  border-left:3px solid var(--danger);
  border-radius:var(--r-card);
  background:var(--paper-sub);
}
.verdict-callout p{margin:0;font-size:1.08rem;line-height:1.62;color:var(--ink)}

/* ============================================================
   The migration modal, drawn rather than screenshotted
   The previous asset was an 800x768 mockup rendered at 878 CSS px —
   a 2.2x upscale on a Retina display, and visibly soft. No
   higher-resolution source exists, so this is built from the same
   tokens the application uses. It stays crisp at any pixel density,
   themes correctly, and carries real text instead of pixels.
   ============================================================ */
.migration-demo{
  margin:1.9rem 0 0;
  padding:34px 20px;
  border-radius:16px;
  border:1px solid var(--rule);
  /* the dimmed workspace the modal is blocking */
  background:
    linear-gradient(180deg,rgba(8,13,36,.055),rgba(8,13,36,.085)),
    var(--paper-sub);
}
.migration-modal{
  max-width:520px;
  margin:0 auto;
  border-radius:14px;
  overflow:hidden;
  background:var(--paper);
  border:1px solid var(--rule-strong);
  box-shadow:0 26px 60px rgba(32,43,85,.24),0 3px 10px rgba(32,43,85,.10);
}
.migration-modal__head{padding:22px 24px 0}
.migration-modal__title{margin:0;font-size:1.1rem;font-weight:700;letter-spacing:-.014em;color:var(--ink)}
.migration-modal__span{
  margin:5px 0 0;font-family:var(--mono);font-size:.78rem;line-height:1.5;color:var(--ink-3);
}
.migration-modal__meta{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  margin:17px 0 7px;padding:0 24px;
  font-family:var(--mono);font-size:.68rem;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);
}
.migration-modal__meta b{color:var(--violet);font-weight:600}
.migration-modal__bar{
  height:3px;margin:0 24px;border-radius:2px;background:var(--violet-soft);overflow:hidden;
}
.migration-modal__bar i{display:block;height:100%;width:16.6%;border-radius:2px;background:var(--violet)}
.migration-modal__task{
  margin:18px 24px 0;padding:14px 16px;
  border-radius:9px;
  background:var(--violet-soft);
  border-left:3px solid var(--violet);
  font-size:.98rem;line-height:1.5;color:var(--ink);
}
.migration-modal__actions{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:16px 0 0;padding:0 24px 20px;
}
.migration-modal__btn{
  display:inline-flex;align-items:center;gap:8px;
  min-height:38px;padding:0 18px;border-radius:9px;
  font-size:.9rem;font-weight:600;line-height:1;
}
.migration-modal__btn--primary{
  background:var(--violet);color:#fff;
  border:1px solid var(--violet);
  box-shadow:0 0 0 3px var(--cyan-ring);
}
.migration-modal__btn--ghost{color:var(--ink-2);border:1px solid transparent}
.migration-modal__btn svg{width:14px;height:14px;flex:none}
.migration-modal__bulk{
  display:flex;align-items:center;justify-content:center;gap:26px;flex-wrap:wrap;
  padding:13px 24px;
  border-top:1px solid var(--rule);
  background:var(--violet-soft);
  font-size:.84rem;font-weight:500;color:var(--violet);
}
.migration-modal__bulk span{display:inline-flex;align-items:center;gap:7px}
.migration-modal__bulk svg{width:14px;height:14px;flex:none}
.migration-modal__bulk .is-muted{color:var(--ink-3)}
@media (max-width:640px){
  .migration-demo{padding:20px 12px}
  .migration-modal__head{padding:18px 17px 0}
  .migration-modal__meta{padding:0 17px}
  .migration-modal__bar{margin:0 17px}
  .migration-modal__task{margin:15px 17px 0}
  .migration-modal__actions{padding:0 17px 17px}
  .migration-modal__bulk{gap:16px}
}

/* ============================================================
   Find My Thought — the retrieval demo (Task 8)
   The full six-result corpus is server-rendered as static HTML;
   scripts/search.js only filters and highlights what is already
   in the DOM. Every fact in this section is readable with
   JavaScript disabled — nothing here is generated client-side.
   ============================================================ */
.search-console{
  margin-top:.4rem;
  border:1px solid var(--rule);
  border-radius:var(--r-surface);
  background:var(--paper);
  box-shadow:var(--shadow-card);
  overflow:hidden;
}
.search-console__bar{
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 20px;
  border-bottom:1px solid var(--rule);
  background:var(--paper-sub);
}
.search-console__bar svg{flex:none;color:var(--ink-3)}
.search-console__input{
  flex:1;
  min-width:0;
  border:0;
  background:none;
  font-family:var(--sans);
  font-size:1.02rem;
  color:var(--ink);
  padding:4px 0;
}
.search-console__input::placeholder{color:var(--ink-3)}
.search-console__input:focus{outline:0}
.search-console__meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:6px 16px;
  padding:12px 20px;
  border-bottom:1px solid var(--rule);
}
.search-console__meta .meta{margin:0}
.search-results{list-style:none;margin:0;padding:10px;display:flex;flex-direction:column;gap:10px}
.search-result{
  padding:16px 18px;
  border:1px solid var(--rule);
  border-radius:var(--r-card);
  background:var(--paper);
}
.search-result[hidden]{display:none}
.search-result__head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px}
.search-result__origin{white-space:nowrap}
.search-result__score{font-family:var(--mono);font-size:.75rem;color:var(--ink-3);white-space:nowrap}
.search-result__title{margin:0 0 3px;font-size:1rem;font-weight:600;color:var(--ink)}
.search-result__source{margin:0 0 8px;font-family:var(--mono);font-size:.78rem;color:var(--ink-3);overflow-wrap:anywhere}
.search-result__passage{margin:0;font-size:.96rem;line-height:1.58;color:var(--ink-2)}
.search-result__passage mark{
  background:color-mix(in srgb,var(--cyan) 30%,var(--paper));
  color:var(--ink);
  padding:.02em .12em;
  border-radius:3px;
}
.search-empty{margin:0;padding:30px 20px;text-align:center;font-size:.96rem;color:var(--ink-3)}
.search-empty[hidden]{display:none}

/* ============================================================
   Capture — the "after the clip" flow (Task 9)
   ============================================================ */
.step-list{list-style:none;margin:1.6rem 0 2rem;padding:0}
.step-list li{
  position:relative;
  padding:14px 0 14px 28px;
  border-top:1px solid var(--rule);
  font-size:1.02rem;
  line-height:1.55;
  color:var(--ink);
}
.step-list li:first-child{border-top:0}
.step-list li::before{
  content:"";
  position:absolute;
  left:0;top:22px;
  width:8px;height:8px;
  border-radius:50%;
  background:var(--cyan);
}

/* ============================================================
   Portable by design — the closer (Task 9)
   ============================================================ */
.closer-line{
  font-size:1.32rem;
  font-weight:600;
  letter-spacing:-.015em;
  color:var(--ink);
  margin:1.8rem 0 0;
}

/* ============================================================
   What's coming (Task 9)
   Deliberately unmistakable as not-yet-available: dashed borders,
   no drop shadow, the same visual language .shot-pending already
   uses for a capability the site cannot show yet.
   ============================================================ */
.coming-quote{
  padding:22px 24px;
  border:1.5px dashed var(--rule-strong);
  border-radius:var(--r-surface);
  background:var(--paper);
  margin:1.6rem 0 1.6rem;
}
.coming-quote__label{
  display:block;
  font-family:var(--mono);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin:0 0 .6rem;
}
.coming-quote p:last-child{margin:0;font-size:1.03rem;line-height:1.6;color:var(--ink-2)}
.coming-card{
  border:1.5px dashed var(--rule-strong);
  background:var(--paper);
  box-shadow:none;
}
.coming-card:hover{transform:none;box-shadow:none;border-color:var(--rule-strong)}

/* ============================================================
   Download (Task 9)
   ============================================================ */
.download-status{
  margin:1.2rem 0 0;
  max-width:var(--measure);
  font-size:.94rem;
  line-height:1.55;
  color:var(--ink-3);
}

/* Paper-ground equivalent of .annot-controls — same layout, ink-3
   label colour instead of navy-muted so it reads on a white or --bg
   ground. Shared by forced migration's per-task/bulk decisions and
   Find My Thought's source/resource filters. */
.chip-groups{margin:1.6rem 0 2rem;display:flex;flex-direction:column;gap:16px}
.chip-group{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 14px}
.chip-group__label{
  flex:none;
  font-family:var(--mono);
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin:0;
  padding-top:6px;
}

/* Accessibility utility: visually hidden but still reachable by
   screen readers — used for the search input's <label>. */
.visually-hidden{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* ============================================================
   Documentation — the reference manual keeps the same document
   spine, but trades landing-page theatre for a dense research desk.
   ============================================================ */
.docs-hero{
  max-width:var(--shell);
  margin:0 auto;
  padding:72px var(--pad) 52px calc(var(--gutter) + var(--pad));
  border-bottom:1px solid var(--rule);
  background:
    linear-gradient(90deg,transparent 0,transparent calc(var(--gutter) - 1px),var(--rule) calc(var(--gutter) - 1px),var(--rule) var(--gutter),transparent var(--gutter));
}
.docs-hero h1{max-width:20ch}
.docs-hero .lede{max-width:60ch;margin-top:1rem}
.breadcrumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 2rem;font-family:var(--mono);font-size:.78rem;color:var(--ink-3)}
.breadcrumb a{color:var(--violet);text-decoration:none}.breadcrumb a:hover{text-decoration:underline}
.docs-layout,.docs-index-layout{
  display:grid;
  grid-template-columns:minmax(190px,230px) minmax(0,1fr) minmax(150px,190px);
  gap:clamp(28px,4vw,64px);
  width:min(100%,var(--shell));
  margin:0 auto;
  padding:56px var(--pad) 104px;
  align-items:start;
}
.docs-index-layout{grid-template-columns:minmax(190px,230px) minmax(0,1fr)}
.docs-nav{position:sticky;top:82px;display:flex;flex-direction:column;padding:4px 0 24px;border-right:1px solid var(--rule)}
.docs-nav__eyebrow,.docs-nav__group{font-family:var(--mono);font-size:.7rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);margin:0 0 8px;padding:0 16px}
.docs-nav__group{margin-top:20px}
.docs-nav a{position:relative;display:grid;grid-template-columns:24px 1fr;gap:8px;align-items:baseline;padding:8px 16px 8px 13px;border-left:3px solid transparent;color:var(--ink-2);font-size:.88rem;line-height:1.35;text-decoration:none}
.docs-nav a span{font-family:var(--mono);font-size:.68rem;color:var(--ink-3)}
.docs-nav a:hover{color:var(--ink);background:var(--paper-sub)}
.docs-nav a[aria-current="page"]{border-left-color:var(--violet);background:var(--violet-soft);color:var(--ink);font-weight:600}
.docs-article{min-width:0;max-width:var(--measure)}
.docs-layout--wide .docs-article{max-width:72ch}
.docs-article>h2{margin:3.5rem 0 1rem;padding-top:.4rem}.docs-article>h2:first-child{margin-top:0}
.docs-article>h3{margin:2rem 0 .7rem}
.docs-article a{color:var(--violet-hover);text-underline-offset:.18em}
.docs-article pre{max-width:100%;overflow:auto;padding:18px 20px;border:1px solid var(--rule);border-radius:var(--r-card);background:var(--paper-sub);font:400 .86rem/1.65 var(--mono);color:var(--ink)}
.docs-article code{overflow-wrap:anywhere}
.docs-article pre code{overflow-wrap:normal}
.docs-article table{display:table;width:100%;border-collapse:collapse;font-size:.92rem}
.docs-article th,.docs-article td{padding:12px 14px;border:1px solid var(--rule);text-align:left;vertical-align:top}
.docs-article th{background:var(--paper-sub);font-weight:600}
.doc-note{margin:1.5rem 0;padding:18px 20px;border-left:3px solid var(--cyan);border-radius:0 var(--r-card) var(--r-card) 0;background:var(--cyan-soft);color:var(--ink);font-size:.96rem}
.docs-toc{position:sticky;top:88px;padding:0 0 0 18px;border-left:1px solid var(--rule)}
.docs-toc>p{font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.docs-toc ol{list-style:none;margin:0;padding:0}.docs-toc li{margin:0}
.docs-toc a{display:block;padding:5px 0;color:var(--ink-3);font-size:.78rem;line-height:1.35;text-decoration:none}
.docs-toc .toc-level-3 a{padding-left:13px}
.docs-toc a:hover,.docs-toc a[aria-current="true"]{color:var(--ink)}
.docs-toc a[aria-current="true"]{font-weight:600}
.docs-index>section{position:relative;margin:0 0 64px;padding-left:56px}.docs-index>section:last-child{margin-bottom:0}
.docs-index__number{position:absolute;left:0;top:.35rem;font:600 .75rem/1 var(--mono);color:var(--violet);margin:0}
.docs-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:20px}
.docs-card{display:block;min-height:190px;padding:22px;border:1px solid var(--rule);border-radius:var(--r-card);background:var(--paper);color:var(--ink);text-decoration:none;box-shadow:0 8px 24px rgba(32,43,85,.07);transition:transform var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.docs-card:hover{transform:translateY(-2px);border-color:rgba(108,76,240,.35);box-shadow:var(--shadow-card)}
.docs-card--featured{grid-column:1/-1;background:linear-gradient(135deg,var(--paper) 45%,var(--violet-soft))}
.docs-card .syntax{display:block;margin-bottom:18px}.docs-card p{color:var(--ink-2);font-size:.94rem}.docs-card__action{display:block;margin-top:18px;font:500 .78rem/1 var(--mono);color:var(--violet-hover)}

@media (max-width:1099px){
  .docs-layout{grid-template-columns:minmax(180px,220px) minmax(0,1fr)}
  .docs-index-layout{grid-template-columns:minmax(180px,220px) minmax(0,1fr)}
  .docs-toc{grid-column:2;position:static;order:3;margin-top:0;padding:20px 0 0;border-left:0;border-top:1px solid var(--rule)}
}
@media (max-width:819px){
  .docs-hero{padding:52px 20px 38px;background:none}
  .docs-layout,.docs-index-layout{grid-template-columns:minmax(0,1fr);padding:28px 20px 72px;gap:34px}
  .docs-nav{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--rule);border-radius:var(--r-card);padding:12px;background:var(--paper-sub)}
  .docs-nav__eyebrow,.docs-nav__group{grid-column:1/-1;padding:8px 10px 2px;margin:0}
  .docs-nav a{padding:8px 10px;border-left:3px solid transparent}
  .docs-toc{grid-column:1}
  .docs-index>section{padding-left:38px}
}
@media (max-width:560px){
  .docs-nav{grid-template-columns:1fr}
  .docs-card-grid{grid-template-columns:1fr}
  .docs-card--featured{grid-column:auto}
  .docs-article table{display:block;overflow-x:auto;white-space:nowrap}
}

/* ============================================================
   2026 release story — a product-led research cockpit
   ============================================================ */
.wordmark__mark{
  width:30px;
  height:30px;
  flex:none;
  display:block;
  border-radius:8px;
}

.hero .lede{margin-bottom:1.6rem}
.hero-cockpit{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:clamp(68px,8vw,116px) 0 clamp(74px,9vw,128px);
  background:
    radial-gradient(circle at 78% 8%,rgba(108,76,240,.29),transparent 34%),
    radial-gradient(circle at 14% 82%,rgba(18,191,239,.13),transparent 28%),
    linear-gradient(145deg,#080D24 0%,#0D1433 54%,#111944 100%);
  color:var(--navy-ink);
}
.hero-cockpit::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  opacity:.26;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(to bottom,black,transparent 88%);
}
.hero-orbit{
  position:absolute;
  z-index:-1;
  border:1px solid rgba(185,166,255,.16);
  border-radius:50%;
  pointer-events:none;
}
.hero-orbit--one{width:560px;height:560px;right:-210px;top:-250px}
.hero-orbit--two{width:420px;height:420px;left:-270px;bottom:-280px;border-color:rgba(18,191,239,.13)}
.hero-shell{
  width:min(calc(100% - 48px),1380px);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(330px,.72fr) minmax(590px,1.28fr);
  align-items:center;
  gap:clamp(36px,5vw,76px);
}
.hero-copy{position:relative;z-index:2}
.hero-cockpit .eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:#D8DFF8;
  margin-bottom:1.45rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.hero-cockpit .eyebrow::before{
  content:"";
  width:28px;
  height:2px;
  border-radius:2px;
  background:var(--cyan);
  box-shadow:18px 0 0 -1px var(--amber);
}
.hero-cockpit h1{
  max-width:11ch;
  color:#fff;
  font-size:clamp(3.25rem,6.6vw,6.7rem);
  line-height:.91;
  letter-spacing:-.058em;
  margin-bottom:1.6rem;
}
.hero-cockpit .lede{
  max-width:53ch;
  color:#C2CAE5;
  font-size:clamp(1.08rem,1.5vw,1.28rem);
  line-height:1.64;
  margin-bottom:1.8rem;
}
.hero-cockpit .btn-primary{box-shadow:0 14px 34px rgba(108,76,240,.38)}
.btn-on-dark{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:#fff}
.btn-on-dark:hover{background:rgba(255,255,255,.11);border-color:rgba(185,166,255,.6);color:#fff}
.hero-promises{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
  margin:22px 0 0;
  padding:0;
  color:#AEB8DA;
  font:500 .79rem/1.5 var(--mono);
}
.hero-promises li{position:relative;margin:0;padding-left:16px}
.hero-promises li::before{content:"";position:absolute;left:0;top:.52em;width:6px;height:6px;border-radius:50%;background:var(--success);box-shadow:0 0 0 4px rgba(34,185,121,.13)}
.hero-product{position:relative;margin:0;min-width:0;transform:perspective(1500px) rotateY(-3deg) rotateX(1deg);transform-origin:center left}
.hero-product__halo{position:absolute;inset:8% 4% -8% 8%;z-index:-1;background:rgba(108,76,240,.38);filter:blur(48px);border-radius:44px}
.hero-product img{display:block;width:100%;height:auto;border:1px solid rgba(255,255,255,.2);border-radius:18px;box-shadow:0 42px 110px rgba(0,0,0,.62),0 0 0 7px rgba(255,255,255,.035)}
.hero-product figcaption{margin:17px 0 0;text-align:right;color:#929DBF;font:400 .75rem/1.5 var(--mono)}

.proof-strip--status{padding:4px 0;border:0;justify-content:space-between;gap:0}
.proof-strip--status li{flex:1 1 220px;padding:16px 22px}
.proof-strip--status strong{display:block;margin-bottom:2px;color:var(--violet);font:600 .7rem/1.4 var(--mono);letter-spacing:.09em;text-transform:uppercase}

.research-loop h2{max-width:19ch}
.loop-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;margin-top:38px}
.loop-card{position:relative;overflow:hidden;min-height:220px;padding:26px;border:1px solid var(--rule);border-radius:20px;background:var(--paper);box-shadow:0 16px 40px rgba(32,43,85,.09)}
.loop-card h3{font-size:1.32rem;margin:.45rem 0 .55rem}
.loop-card p{color:var(--ink-2);font-size:.98rem;line-height:1.58;max-width:42ch}
.loop-card__index{font:600 .72rem/1 var(--mono);letter-spacing:.08em;color:var(--violet)}
.loop-card--wide{grid-column:1/-1;display:grid;grid-template-columns:minmax(250px,.62fr) minmax(0,1.38fr);align-items:center;padding:0;min-height:430px;background:var(--navy);border-color:var(--navy-soft);box-shadow:0 28px 70px rgba(8,13,36,.25)}
.loop-card--wide .loop-card__copy{padding:clamp(28px,4vw,48px)}
.loop-card--wide h3{font-size:clamp(1.65rem,2.8vw,2.35rem);color:#fff}
.loop-card--wide p{color:var(--navy-muted)}
.loop-card--wide .loop-card__index{color:var(--cyan)}
.loop-card--wide img{align-self:stretch;width:100%;height:100%;min-height:430px;object-fit:cover;object-position:left center;border-left:1px solid var(--navy-soft)}
.loop-card--violet{grid-column:span 4;background:linear-gradient(145deg,#F7F5FF,#ECE8FF)}
.loop-card--cyan{grid-column:span 4;background:linear-gradient(145deg,#F1FCFF,#DDF7FF)}
.loop-card--ink{grid-column:span 4;background:var(--navy-raised);border-color:var(--navy-soft)}
.loop-card--ink h3{color:#fff}.loop-card--ink p{color:var(--navy-muted)}.loop-card--ink .loop-card__index{color:var(--amber)}
.meaning-dots{display:flex;gap:8px;margin-top:26px}
.meaning-dots i{width:28px;height:8px;border-radius:8px;background:#FFD84D}.meaning-dots i:nth-child(2){background:#FF9B54}.meaning-dots i:nth-child(3){background:#E75A9A}.meaning-dots i:nth-child(4){background:#22B979}.meaning-dots i:nth-child(5){background:#12BFEF}
.meaning-badge{display:inline-flex;align-items:center;width:max-content;margin-top:18px;padding:5px 10px;border:1px solid rgba(14,122,143,.22);border-radius:999px;background:#fff;color:#07566A;font:600 .72rem/1 var(--mono)}

.areas-section h2{max-width:22ch}
.areas-layout{display:grid;grid-template-columns:minmax(280px,.74fr) minmax(560px,1.26fr);gap:clamp(28px,5vw,64px);align-items:center;margin-top:44px}
.areas-story{display:flex;flex-direction:column}
.areas-point{display:grid;grid-template-columns:38px minmax(0,1fr);gap:14px;padding:22px 0;border-bottom:1px solid var(--rule)}
.areas-point:first-child{padding-top:0}.areas-point:last-child{border-bottom:0}
.areas-point__number{padding-top:4px;color:var(--violet);font:600 .72rem/1 var(--mono);letter-spacing:.08em}
.areas-point h3{margin:0 0 5px;font-size:1.08rem}
.areas-point p{margin:0;color:var(--ink-2);font-size:.94rem;line-height:1.58}
.area-surface-demo{overflow:hidden;border:1px solid var(--navy-soft);border-radius:20px;background:var(--navy);box-shadow:0 28px 72px rgba(8,13,36,.28)}
.area-surface-demo__header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 22px;border-bottom:1px solid var(--navy-soft);background:rgba(255,255,255,.025)}
.area-surface-demo__header>div:first-child{display:flex;flex-direction:column;gap:2px;min-width:0}
.area-surface-demo__label{color:var(--cyan);font:600 .66rem/1.4 var(--mono);letter-spacing:.09em;text-transform:uppercase}
.area-surface-demo__header strong{overflow:hidden;color:#fff;font-size:1rem;text-overflow:ellipsis;white-space:nowrap}
.area-surface-demo__header>div:first-child>span:last-child{color:#8F9ABB;font-size:.75rem}
.area-view-tabs{display:flex;flex:none;gap:2px;padding:3px;border:1px solid rgba(255,255,255,.1);border-radius:9px;background:rgba(255,255,255,.04)}
.area-view-tabs span{padding:6px 9px;border-radius:6px;color:#8F9ABB;font:500 .68rem/1 var(--mono)}
.area-view-tabs .is-active{background:var(--violet);color:#fff;box-shadow:0 6px 14px rgba(108,76,240,.35)}
.area-graph-figure{margin:0;padding:10px 14px 14px}
.area-graph-figure svg{display:block;width:100%;height:auto;overflow:visible}
.area-graph-edges path{fill:none;stroke:#303A67;stroke-width:2}
.area-graph-edges .is-shared{stroke:var(--amber);stroke-width:2.5;stroke-dasharray:6 6}
.area-graph-node circle{stroke-width:2}
.area-graph-node text{fill:#111936;font:700 9px/1 var(--mono);letter-spacing:.04em;text-anchor:middle;pointer-events:none}
.area-graph-node__name{fill:#5F6885!important;font-size:7.5px!important;font-weight:500!important;letter-spacing:0!important}
.area-graph-node--item circle{fill:#F7F8FE;stroke:#AAA1E8}
.area-graph-node--shared circle{fill:#FFF8D9;stroke:var(--amber)}
.area-graph-node--hub circle{fill:var(--violet);stroke:#B6A8FF;filter:drop-shadow(0 10px 16px rgba(108,76,240,.42))}
.area-graph-node--hub text,.area-graph-node--area text{fill:#fff;font-size:8px}
.area-graph-node--area circle{fill:#242E59;stroke:#7986BD}
.area-graph-node__count{fill:#111936!important;font-size:8px!important}
.area-graph-figure figcaption{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 24px;margin-top:-2px;color:#8F9ABB;font:500 .68rem/1.4 var(--mono)}
.area-graph-figure figcaption span{display:inline-flex;align-items:center;gap:7px}
.area-legend-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#F7F8FE;border:1px solid #AAA1E8}
.area-legend-dot--shared{background:#FFF8D9;border-color:var(--amber)}
.areas-closer{margin:40px 0 0;padding:20px 24px;border-left:3px solid var(--violet);border-radius:0 12px 12px 0;background:var(--violet-soft);color:var(--ink);font-weight:500}

.shot-feature{margin-top:34px}
.shot-dialog{max-width:880px;margin-left:auto;margin-right:auto}
.store-links,.release-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:26px 0 30px}
.store-links--three{grid-template-columns:repeat(3,minmax(0,1fr));margin:34px 0 42px}
.store-card{position:relative;display:flex;flex-direction:column;gap:5px;min-height:208px;padding:22px;border:1px solid var(--rule-strong);border-radius:18px;background:var(--paper);color:var(--ink);text-decoration:none;transition:transform var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.store-card:hover{transform:translateY(-2px);border-color:var(--violet);box-shadow:var(--shadow-card);color:var(--ink);text-decoration:none}
.store-card strong{margin-top:auto;font-size:1.24rem}.store-card>span:last-child{font-size:.88rem;color:var(--ink-3)}
.store-card__top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px}
.store-card__top img{display:block;width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 8px 12px rgba(32,43,85,.16))}
.store-card__status{font:600 .68rem/1.4 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:#0F7A50}
.store-card--soon{background:linear-gradient(145deg,#F7F5FF,#ECE8FF);border-style:dashed}
.store-card--soon .store-card__status{color:var(--violet)}
.store-card--soon:hover{transform:none;border-color:var(--rule-strong);box-shadow:none}
.browser-trademarks{margin:-22px 0 40px;color:var(--ink-3)}
.capture-subhead{font-size:clamp(1.65rem,3vw,2.3rem);margin:0 0 1rem}
.day-map-showcase{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,.48fr);align-items:center;gap:clamp(30px,6vw,74px);margin-top:42px;padding:clamp(28px,5vw,58px);overflow:hidden;border:1px solid var(--navy-soft);border-radius:20px;background:var(--navy);box-shadow:0 28px 70px rgba(8,13,36,.23)}
.day-map-showcase__copy .eyebrow{color:var(--cyan)}
.day-map-showcase__copy h3{max-width:18ch;color:#fff;font-size:clamp(1.75rem,3.3vw,2.65rem);line-height:1.08}
.day-map-showcase__copy p:last-child{max-width:47ch;color:var(--navy-muted)}
.day-map-showcase__visual{display:flex;justify-content:center;position:relative}
.day-map-showcase__visual::before{content:"";position:absolute;inset:12% 0 3%;background:rgba(108,76,240,.35);filter:blur(38px);border-radius:40px}
.day-map-showcase__visual img{position:relative;display:block;width:min(100%,295px);height:auto;border:1px solid rgba(255,255,255,.2);border-radius:18px;box-shadow:0 28px 70px rgba(0,0,0,.48)}
.release-card{padding:26px;border:1px solid var(--rule-strong);border-radius:18px;background:var(--paper-sub)}
.release-card__state{font:600 .7rem/1.4 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--violet)}
.release-card h3{font-size:1.45rem;margin:.5rem 0}.release-card p{min-height:4.8em;color:var(--ink-2);font-size:.95rem}.release-card .btn{margin-top:8px}.release-card .btn[aria-disabled="true"]{cursor:default;opacity:.72}

@media (max-width:1100px){
  .hero-shell{grid-template-columns:minmax(0,1fr);width:min(calc(100% - 48px),960px)}
  .hero-copy{max-width:720px}
  .hero-cockpit h1{max-width:12ch}
  .hero-product{transform:none}
  .areas-layout{grid-template-columns:1fr}
  .areas-story{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .areas-point{display:block;padding:18px;border:1px solid var(--rule);border-radius:14px;background:var(--paper)}
  .areas-point:first-child{padding-top:18px}.areas-point:last-child{border-bottom:1px solid var(--rule)}
  .areas-point__number{display:block;margin-bottom:12px}
}
@media (max-width:820px){
  .hero-shell{width:min(calc(100% - 40px),960px)}
  .hero-cockpit h1{font-size:clamp(3.1rem,13vw,5rem)}
  .hero-product img{border-radius:13px}
  .loop-grid{grid-template-columns:1fr}
  .loop-card--wide,.loop-card--violet,.loop-card--cyan,.loop-card--ink{grid-column:1;display:block}
  .loop-card--wide{min-height:0}
  .loop-card--wide img{min-height:280px;border-left:0;border-top:1px solid var(--navy-soft);object-position:center}
  .store-links--three{grid-template-columns:1fr}
  .coming-grid{grid-template-columns:1fr}
  .day-map-showcase{grid-template-columns:1fr}
  .areas-story{grid-template-columns:1fr}
}
@media (max-width:640px){
  .hero-cockpit{padding:52px 0 68px}
  .hero-shell{width:min(calc(100% - 32px),960px)}
  .hero-cockpit h1{font-size:clamp(2.9rem,15vw,4.3rem)}
  .hero-product figcaption{text-align:left}
  /* .proof-strip goes flex-direction:column here, which turns the
     `flex:1 1 220px` basis below into a HEIGHT basis — 220px per item,
     888px of strip on an 844px phone. Reset the basis with the axis. */
  .proof-strip--status li{flex:0 0 auto;padding:13px 0;border-bottom:1px solid var(--rule)}
  .proof-strip--status li:last-child{border-bottom:0}
  .store-links,.release-grid{grid-template-columns:1fr}
  .release-card p{min-height:0}
  .area-surface-demo__header{align-items:flex-start;flex-direction:column}
  .area-view-tabs{align-self:stretch;justify-content:space-between}
  .area-view-tabs span{flex:1;text-align:center}
  .area-graph-figure{margin-left:-18px;margin-right:-18px;padding-left:0;padding-right:0}
  .areas-closer{padding:18px}
}