/* MagenticMarket — SHARED SIGNAL.
 *
 * Editorial modernism with soft systems-diagram cues. Four principles, and every
 * rule below should be traceable to one of them:
 *
 *   meaning before machinery      the page opens on the human question
 *   pluralism without performance calm language and open space, never colour-coded politics
 *   inspectability as beauty      labels and visible relationships ARE the ornament
 *   human agency stays visible    the assistant proposes; the person decides
 *
 * The palette is a WARM MINERAL GROUND with three signals on it: deep ink for
 * human-authored clarity, Signal Cobalt for machine assistance, muted apricot for
 * questions and uncertainty. Deliberately NOT: purple AI gradients, red/blue
 * political shorthand, or a black-box dark hero.
 */

/* ---------- fonts: self-hosted, see app/assets/fonts/README.md ---------- */
@font-face{
  font-family:"DM Serif Display";font-style:normal;font-weight:400;font-display:swap;
  src:url("/assets/dm-serif-display-latin-3f6a6125.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"DM Serif Display";font-style:normal;font-weight:400;font-display:swap;
  src:url("/assets/dm-serif-display-latin-ext-5e515044.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* Variable: one file, 300-700. Declaring the range stops the browser faking a bold. */
@font-face{
  font-family:"Space Grotesk";font-style:normal;font-weight:300 700;font-display:swap;
  src:url("/assets/space-grotesk-latin-dfda626c.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Space Grotesk";font-style:normal;font-weight:300 700;font-display:swap;
  src:url("/assets/space-grotesk-latin-ext-f523b595.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  /* the shared ground */
  --canvas:#f3efe8; --surface:#fbfaf7; --surface-2:#ede7dc; --rule:#ded7c9;
  /* human: deep ink */
  --ink:#1b1a16; --ink-soft:#57534a;
  /* assistant: Signal Cobalt */
  --cobalt:#3157d5; --cobalt-deep:#2440a6; --cobalt-ink:#182c6e;
  /* uncertainty: muted apricot. --apricot-ink is the only one safe for small text. */
  --apricot:#c0762f; --apricot-ink:#8a5218;
  --moss:#4f7247;

  --radius:14px; --maxw:1140px; --measure:720px;
  --shadow:0 1px 2px rgba(40,32,20,.05),0 10px 30px rgba(40,32,20,.06);
  --shadow-lift:0 2px 6px rgba(40,32,20,.07),0 18px 44px rgba(40,32,20,.10);
  --font:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  --font-display:"DM Serif Display",Iowan Old Style,Palatino,"Palatino Linotype",Georgia,serif;

  /* Compatibility aliases. Screens built against the old indigo/cyan system keep
     working; they inherit Shared Signal instead of a second palette. */
  --brand:var(--cobalt); --brand-deep:var(--cobalt-deep); --brand-ink:var(--cobalt-ink);
  --accent:var(--cobalt); --create:var(--moss);
  --bg:var(--canvas); --muted:var(--ink-soft); --border:var(--rule);
}
/* Dark stays WARM. A cold black hero is the data-centre aesthetic this design refuses. */
@media (prefers-color-scheme:dark){:root{
  --canvas:#15140f; --surface:#1e1c16; --surface-2:#2a2720; --rule:#332f26;
  --ink:#f0ebe0; --ink-soft:#a8a093;
  --cobalt:#8aa6f7; --cobalt-deep:#b3c4fb; --cobalt-ink:#c9d5fc;
  --apricot:#e3a468; --apricot-ink:#edbe8e; --moss:#8cb07e;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 10px 30px rgba(0,0,0,.4);
  --shadow-lift:0 2px 6px rgba(0,0,0,.55),0 18px 44px rgba(0,0,0,.45);
}}
:root[data-theme=dark]{
  --canvas:#15140f; --surface:#1e1c16; --surface-2:#2a2720; --rule:#332f26;
  --ink:#f0ebe0; --ink-soft:#a8a093;
  --cobalt:#8aa6f7; --cobalt-deep:#b3c4fb; --cobalt-ink:#c9d5fc;
  --apricot:#e3a468; --apricot-ink:#edbe8e; --moss:#8cb07e;
}
:root[data-theme=light]{
  --canvas:#f3efe8; --surface:#fbfaf7; --surface-2:#ede7dc; --rule:#ded7c9;
  --ink:#1b1a16; --ink-soft:#57534a;
  --cobalt:#3157d5; --cobalt-deep:#2440a6; --cobalt-ink:#182c6e;
  --apricot:#c0762f; --apricot-ink:#8a5218; --moss:#4f7247;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font);background:var(--canvas);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;font-synthesis-weight:none}
a{color:var(--cobalt);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px;border-radius:4px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* SIGNAL ANNOTATION — the uppercase micro-label. Used everywhere a thing needs
   naming without a heading's weight. This is the "inspectability as beauty" tool. */
.sig{display:inline-block;font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.sig.assistant{color:var(--cobalt)}
.sig.question{color:var(--apricot-ink)}

/* ---------- top bar ---------- */
.topbar{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--canvas) 90%,transparent);backdrop-filter:saturate(1.3) blur(8px);border-bottom:1px solid var(--rule)}
.topbar .row{display:flex;align-items:center;justify-content:space-between;gap:20px;height:68px}
.brand{display:flex;align-items:center;gap:11px;font-weight:600;font-size:1.02rem;color:var(--ink);letter-spacing:-.01em}
.brand:hover{text-decoration:none}
/* The mark: two offset brackets meeting around a shared square. Two participants,
   one semantic space. It has to read at favicon size, so it is drawn, not gradiented. */
.brand .mark{width:28px;height:28px;flex:none;display:block}
.sitenav{display:flex;align-items:center;gap:22px}
.sitenav a{color:var(--ink-soft);font-size:.92rem;font-weight:500}
.sitenav a:hover{color:var(--ink);text-decoration:none}
.header-right{display:flex;align-items:center;gap:18px}
@media(max-width:900px){.sitenav{display:none}}

/* ---------- badges + identity ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:999px;border:1px solid transparent}
.badge.human{background:var(--surface-2);color:var(--ink);border-color:var(--rule)}
.badge.assistant,.badge.bot{background:color-mix(in srgb,var(--cobalt) 12%,transparent);color:var(--cobalt-ink);border-color:color-mix(in srgb,var(--cobalt) 30%,transparent)}
.who{display:flex;align-items:center;gap:12px}
.who .handle{font-weight:600}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:inherit;font-weight:600;font-size:.95rem;padding:12px 20px;border-radius:10px;border:1px solid transparent;cursor:pointer;transition:background .18s,border-color .18s,color .18s}
.btn.primary{background:var(--cobalt);color:#fff}
.btn.primary:hover{background:var(--cobalt-deep);text-decoration:none}
:root[data-theme=dark] .btn.primary,:root:not([data-theme=light]) .btn.primary{color:#12142a}
@media (prefers-color-scheme:light){:root:not([data-theme=dark]) .btn.primary{color:#fff}}
.btn.ghost{background:transparent;border-color:var(--rule);color:var(--ink)}
.btn.ghost:hover{border-color:var(--ink);text-decoration:none}
.btn.small{padding:7px 14px;font-size:.85rem}
.btn.block{width:100%;justify-content:center}

/* ================= LANDING ================= */

/* 1. HERO — asymmetric editorial. Statement left, shared-meaning diagram right.
      Never a centred stack: the centred hero is the generic-AI-landing-page shape. */
.hero{padding:84px 0 64px}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:64px;align-items:center}
@media(max-width:940px){.hero{padding:56px 0 44px}.hero .wrap{grid-template-columns:1fr;gap:44px}}
.hero-eyebrow{display:block;margin-bottom:22px;font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
/* Capped at 3.4rem, not 4rem: at 4rem the wordmark forces its own line and the
   headline rags to five, orphaning "assistants". Balance cannot rescue a measure
   that is simply too narrow for the type size. */
.hero h1{font-family:var(--font-display);font-weight:400;font-size:clamp(2.35rem,4.3vw,3.4rem);line-height:1.1;letter-spacing:-.015em;margin:0 0 .5em;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--cobalt)}
.hero .lede{font-size:clamp(1.02rem,1.5vw,1.16rem);color:var(--ink-soft);max-width:34em;margin:0 0 30px;text-wrap:pretty}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.trust-line{margin:22px 0 0;font-size:.84rem;color:var(--ink-soft);letter-spacing:.01em}

/* MEANING RAIL — a sentence moving through three states. The thin vertical line
   and its dots are the whole diagram; there is no illustration to mis-read. */
.meaning-figure{margin:0;padding:30px 30px 26px;background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);box-shadow:var(--shadow)}
.meaning-cap{margin:0 0 22px;font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.meaning-rail{list-style:none;margin:0;padding:0;position:relative}
.meaning-rail::before{content:"";position:absolute;left:7px;top:10px;bottom:10px;width:1px;background:var(--rule)}
.mr-step{position:relative;padding:0 0 26px 34px}
.mr-step:last-child{padding-bottom:0}
.mr-step::before{content:"";position:absolute;left:0;top:6px;width:15px;height:15px;border-radius:50%;background:var(--surface);border:1.5px solid var(--rule);transition:border-color .2s,background .2s}
.mr-step[data-side=human]::before{border-color:var(--ink)}
.mr-step[data-side=assistant]::before{border-color:var(--cobalt)}
.mr-step[data-side=shared]::before{border-color:var(--apricot)}
.mr-label{display:block;font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:5px}
.mr-step[data-side=assistant] .mr-label{color:var(--cobalt)}
.mr-step[data-side=shared] .mr-label{color:var(--apricot-ink)}
.mr-text{margin:0;font-family:var(--font-display);font-size:1.16rem;line-height:1.35;color:var(--ink)}
/* Highlighting a path is the interaction: it reveals interpretation, not magic. */
.mr-step.is-lit::before{background:color-mix(in srgb,var(--cobalt) 18%,var(--surface))}
.mr-step.is-lit .mr-text{color:var(--ink)}
.meaning-rail.is-dimmed .mr-step:not(.is-lit){opacity:.4}
.mr-step{transition:opacity .2s}

/* 2. BRIDGE — the section that says you need not agree about AI. Full-bleed band
      in the mineral tone so it reads as common ground, not another card grid. */
.band{background:var(--surface-2);border-block:1px solid var(--rule);padding:72px 0}
.band-head{max-width:var(--measure);margin:0 0 40px}
.band-head h2{font-family:var(--font-display);font-weight:400;font-size:clamp(1.7rem,3.2vw,2.5rem);line-height:1.16;letter-spacing:-.01em;margin:.2em 0 .5em;text-wrap:balance}
.band-head p{margin:0;color:var(--ink-soft);font-size:1.02rem;text-wrap:pretty}
.bridge{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:980px){.bridge{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.bridge{grid-template-columns:1fr}}
.bridge-card{background:var(--surface);border:1px solid var(--rule);border-radius:12px;padding:22px}
.bridge-card h3{margin:0 0 8px;font-size:.97rem;font-weight:600;letter-spacing:-.005em}
.bridge-card p{margin:0;color:var(--ink-soft);font-size:.91rem}

/* 3. THREE STEPS */
.section{padding:76px 0}
.section-head{max-width:var(--measure);margin:0 0 44px}
.section-head h2{font-family:var(--font-display);font-weight:400;font-size:clamp(1.7rem,3.2vw,2.5rem);line-height:1.16;letter-spacing:-.01em;margin:.2em 0 .5em;text-wrap:balance}
.section-head p{margin:0;color:var(--ink-soft);font-size:1.02rem;text-wrap:pretty}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
@media(max-width:880px){.steps{grid-template-columns:1fr;gap:26px}}
.step{border-top:2px solid var(--ink);padding-top:18px}
.step:nth-child(2){border-top-color:var(--cobalt)}
.step:nth-child(3){border-top-color:var(--apricot)}
.step .n{display:block;font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:10px}
.step h3{font-family:var(--font-display);font-weight:400;font-size:1.35rem;line-height:1.25;margin:0 0 .4em}
.step p{margin:0;color:var(--ink-soft);font-size:.96rem}

/* 4. TRUTH PROMPT CARD — tactile, slightly offset. The CTA's first real act. */
.prompt-band{padding:76px 0}
.prompt-card{max-width:760px;margin:0 auto;background:var(--surface);border:1px solid var(--rule);border-radius:18px;box-shadow:var(--shadow-lift);padding:38px 38px 32px;position:relative}
.prompt-card::after{content:"";position:absolute;inset:12px -10px -10px 12px;border:1px solid var(--rule);border-radius:18px;z-index:-1}
@media(max-width:620px){.prompt-card{padding:26px 22px 24px}.prompt-card::after{display:none}}
.prompt-card h2{font-family:var(--font-display);font-weight:400;font-size:clamp(1.5rem,3vw,2.05rem);line-height:1.2;margin:.2em 0 .3em}
.prompt-card .ask{margin:0 0 22px;color:var(--ink-soft)}
.prompt-field{display:flex;gap:10px;flex-wrap:wrap}
.prompt-field input[type=text]{flex:1 1 320px;min-width:0;padding:14px 16px;font:inherit;font-size:1rem;color:var(--ink);background:var(--canvas);border:1px solid var(--rule);border-radius:11px}
.prompt-field input[type=text]:focus{outline:2px solid var(--cobalt);outline-offset:1px;border-color:var(--cobalt)}
.prompt-note{margin:14px 0 0;font-size:.86rem;color:var(--ink-soft)}
.starters{display:flex;flex-wrap:wrap;gap:9px;margin:26px 0 0}
.starter{font:inherit;font-size:.87rem;color:var(--ink);background:var(--surface-2);border:1px solid var(--rule);border-radius:999px;padding:8px 15px;cursor:pointer;transition:border-color .18s,background .18s}
.starter:hover{border-color:var(--cobalt);background:color-mix(in srgb,var(--cobalt) 7%,var(--surface-2))}
.starter[aria-pressed=true]{border-color:var(--cobalt);background:color-mix(in srgb,var(--cobalt) 13%,transparent);color:var(--cobalt-ink)}
/* THE COGNITION MODAL. Shows the row's real state -- working, answered, or
   refused -- and never a simulated result. A refusal is styled as an ANSWER of a
   kind (apricot, the uncertainty signal) rather than as an error, because "this
   deployment has no cognition seam" is a true thing to have been told. */
.cq-modal{border:none;border-radius:var(--radius);padding:0;max-width:min(620px,94vw);background:transparent;box-shadow:var(--shadow-lift)}
.cq-modal::backdrop{background:color-mix(in srgb,var(--ink) 45%,transparent);backdrop-filter:blur(2px)}
.cq-modal-card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);padding:26px 26px 20px;margin:0}
.cq-question{font-family:var(--font-display);font-size:1.2rem;line-height:1.35;margin:.3em 0 1.1em;color:var(--ink)}
.cq-body{min-height:76px}
.cq-body p{margin:.4em 0 0}
.cq-working{color:var(--ink-soft);font-size:.95rem}
.cq-answer{color:var(--ink);white-space:pre-wrap}
.cq-refusal{color:var(--ink);font-weight:500}
.cq-because{color:var(--ink-soft);font-size:.9rem;border-left:2px solid var(--apricot);padding-left:12px;margin-top:10px !important}
.cq-actions{display:flex;justify-content:flex-end;margin-top:20px;padding-top:14px;border-top:1px solid var(--rule)}

/* 5. VALUE CARDS (the product promise, kept — moved below the shared-meaning hero) */
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:880px){.values{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow)}
.card .ic{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--surface-2);color:var(--ink);margin-bottom:16px}
.card .ic svg{width:21px;height:21px}
.card h3{margin:.1em 0 .45em;font-size:1.08rem;font-weight:600;letter-spacing:-.005em}
.card p{margin:0;color:var(--ink-soft);font-size:.95rem}

/* 6. PROOF POINTS — evidence rail. Narrow, tabular, deliberately unglamorous. */
.proof{border-top:1px solid var(--rule)}
.proof dl{display:grid;grid-template-columns:minmax(180px,1fr) minmax(0,2fr);gap:0;margin:0}
@media(max-width:700px){.proof dl{grid-template-columns:1fr}}
.proof dt{padding:16px 20px 16px 0;border-bottom:1px solid var(--rule);font-weight:600;font-size:.94rem}
.proof dd{padding:16px 0;border-bottom:1px solid var(--rule);margin:0;color:var(--ink-soft);font-size:.94rem}
@media(max-width:700px){.proof dt{padding-bottom:4px;border-bottom:none}.proof dd{padding-top:0}}

/* 7. IDENTITY — Human / Assistant, in context rather than as a top-line taxonomy */
.accounts{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:880px){.accounts{grid-template-columns:1fr}}
.acct{border:1px solid var(--rule);border-radius:var(--radius);padding:26px;background:var(--surface)}
.acct h3{display:flex;align-items:center;gap:10px;margin:0 0 8px;font-size:1.08rem;font-weight:600}
.acct ul{margin:14px 0 20px;padding-left:18px;color:var(--ink-soft)}
.acct ul li{margin:5px 0;font-size:.94rem}

/* 8. FINAL CTA */
.final{padding:84px 0 96px;border-top:1px solid var(--rule)}
.final-inner{max-width:var(--measure)}
.final h2{font-family:var(--font-display);font-weight:400;font-size:clamp(1.9rem,3.6vw,2.7rem);line-height:1.14;letter-spacing:-.01em;margin:0 0 .45em;text-wrap:balance}
.final p{margin:0 0 28px;color:var(--ink-soft);font-size:1.04rem;text-wrap:pretty}

/* ---------- auth pages ---------- */
.authwrap{max-width:440px;margin:64px auto;padding:0 24px}
.authcard{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);padding:32px;box-shadow:var(--shadow)}
.authcard h1{font-family:var(--font-display);font-weight:400;font-size:1.7rem;margin:0 0 6px}
.authcard .sub{color:var(--ink-soft);margin:0 0 24px;font-size:.95rem}
.field{margin-bottom:15px}
.field label{display:block;font-size:.8rem;font-weight:600;margin-bottom:6px;color:var(--ink)}
.field input{width:100%;padding:12px 14px;border:1px solid var(--rule);border-radius:10px;background:var(--canvas);color:var(--ink);font:inherit;font-size:.98rem}
.field input:focus{outline:2px solid var(--cobalt);outline-offset:1px;border-color:var(--cobalt)}
.divider{display:flex;align-items:center;gap:12px;color:var(--ink-soft);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;margin:22px 0}
.divider::before,.divider::after{content:"";height:1px;flex:1;background:var(--rule)}
.oauth-row{display:flex;flex-direction:column;gap:10px}
.muted{color:var(--ink-soft)}
.small{font-size:.86rem}
.center{text-align:center}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- flash ---------- */
.flash{max-width:var(--maxw);margin:16px auto 0;padding:0 24px}
.flash .msg{padding:12px 16px;border-radius:10px;font-size:.92rem;border:1px solid var(--rule)}
.flash .notice{background:color-mix(in srgb,var(--cobalt) 9%,transparent);border-color:color-mix(in srgb,var(--cobalt) 28%,transparent)}
.flash .alert{background:color-mix(in srgb,var(--apricot) 14%,transparent);border-color:color-mix(in srgb,var(--apricot) 40%,transparent)}

footer.site{border-top:1px solid var(--rule);padding:30px 0;color:var(--ink-soft);font-size:.86rem}

/* ---------- legal / reading pages ---------- */
.legal-wrap{max-width:var(--measure);margin:48px auto}
.legal h1{font-family:var(--font-display);font-weight:400;font-size:2.2rem;letter-spacing:-.01em;margin:.2em 0 .1em}
.legal h2{font-size:1.2rem;font-weight:600;margin:1.8em 0 .5em}
.legal h3{font-size:1.02rem;font-weight:600;margin:1.3em 0 .4em}
.legal p,.legal li{color:var(--ink-soft)}
.legal p{margin:.75em 0}
.legal ul,.legal ol{padding-left:22px}
.legal table{width:100%;border-collapse:collapse;margin:1em 0;font-size:.9rem;display:block;overflow-x:auto}
.legal th,.legal td{border:1px solid var(--rule);padding:9px 11px;text-align:left;vertical-align:top}
.legal th{background:var(--surface-2)}
.legal hr{border:none;border-top:1px solid var(--rule);margin:1.7em 0}

/* ---------- journey status bar (now inside the identity section) ---------- */
.statusbar{border:1px solid var(--rule);border-radius:var(--radius);background:var(--surface);overflow:hidden;margin-top:22px}
.statusbar .row{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.statusstep{display:flex;flex-direction:column;gap:3px;padding:14px 18px;border-left:1px solid var(--rule);opacity:.45;text-decoration:none;color:var(--ink)}
.statusstep:first-child{border-left:none}
.statusstep.ready{opacity:1}
a.statusstep:hover{background:var(--surface-2);text-decoration:none;opacity:.75}
a.statusstep.ready:hover{opacity:1}
.statusstep .lbl{display:flex;align-items:center;gap:9px;font-weight:600;font-size:.9rem}
.statusstep .lbl .n{width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:600;background:var(--surface-2);color:var(--ink-soft)}
.statusstep.ready .lbl .n{background:var(--cobalt);color:var(--surface)}
.statusstep .note{font-size:.78rem;color:var(--ink-soft)}
@media(max-width:560px){.statusbar .row{grid-template-columns:1fr}.statusstep{border-left:none;border-top:1px solid var(--rule)}.statusstep:first-child{border-top:none}}

/* ---------- mode links (Human / Assistant / Create) ---------- */
.idchip{display:flex;align-items:stretch;border:1px solid var(--rule);border-radius:999px;overflow:hidden;background:var(--surface)}
.idchip a,.idchip span{display:flex;align-items:center;gap:7px;padding:8px 15px;color:var(--ink);font-size:.86rem;font-weight:600}
.idchip a:hover{text-decoration:none;background:var(--surface-2)}
.idchip a+a,.idchip span+span,.idchip a+span,.idchip span+a{border-left:1px solid var(--rule)}
.idchip svg{width:18px;height:18px}
.idchip .human svg{color:var(--ink)}
.idchip .assistant svg,.idchip .bot svg{color:var(--cobalt)}
.idchip .create svg{color:var(--moss)}
.idchip .dim{opacity:.4}
.idchip .dim:hover{opacity:.65}

/* ---------- brand lockup + creation page ---------- */
.brand-lockup{display:flex;align-items:center;gap:14px;padding:28px 0;justify-content:center}
.bl-mm{width:44px;height:44px;border-radius:11px}
.bl-plus{color:var(--ink-soft);font-size:1.4rem;font-weight:300}
.bl-mode{width:44px;height:44px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--rule);background:var(--surface)}
.bl-mode svg{width:26px;height:26px}
.bl-human svg{color:var(--ink)}
.bl-assistant svg,.bl-bot svg{color:var(--cobalt)}
.bl-create svg{color:var(--moss)}
.bl-label{font-weight:600;font-size:1.05rem}
.creation-blank{min-height:56vh;display:flex;align-items:center;justify-content:center;text-align:center}
.creation-center{display:flex;flex-direction:column;align-items:center;gap:18px}
.create-big{width:96px;height:96px;border-radius:24px;display:inline-flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--moss) 14%,transparent);color:var(--moss)}
.create-big svg{width:52px;height:52px}
.creation-center h1{font-family:var(--font-display);font-weight:400;font-size:2.3rem;margin:0}

/* account-card icon links */
.acct .human,.acct .assistant,.acct .bot{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--rule);border-radius:10px;padding:10px 17px;font-weight:600;color:var(--ink);text-decoration:none}
.acct .human:hover,.acct .assistant:hover,.acct .bot:hover{border-color:var(--cobalt);text-decoration:none}
.acct .human svg,.acct .assistant svg,.acct .bot svg{width:20px;height:20px}
.acct a.human svg{color:var(--ink)}
.acct a.assistant svg,.acct a.bot svg{color:var(--cobalt)}
.acct a.dim{opacity:.5}

/* ---------- gating ---------- */
.disabled{pointer-events:none;cursor:not-allowed;user-select:none}
.statusstep.disabled{opacity:.45;cursor:not-allowed}
.acct.locked{opacity:.58}
.acct.locked .assistant,.acct.locked .bot{pointer-events:none}

/* ---------- LLM gallery ---------- */
.gallery-wrap{max-width:var(--measure);margin:0 auto;padding:10px 24px 56px}
.llm-gallery{display:flex;flex-direction:column;gap:22px;margin-top:16px}
.llm-section > h3{display:flex;align-items:baseline;gap:8px;margin:0 0 10px;font-size:1.03rem;font-weight:600}
.llm-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:560px){.llm-grid{grid-template-columns:1fr}}
.llm-card{display:flex;flex-direction:column;gap:3px;border:1px solid var(--rule);border-radius:12px;padding:12px 40px 12px 14px;cursor:pointer;position:relative;background:var(--surface)}
.llm-card:hover{border-color:var(--cobalt)}
.llm-card .llm-radio{position:absolute;top:13px;right:13px}
.llm-card:has(.llm-radio:checked){border-color:var(--cobalt);box-shadow:0 0 0 2px color-mix(in srgb,var(--cobalt) 26%,transparent)}
.llm-card .llm-name{font-weight:600}
.llm-card.available{border-color:color-mix(in srgb,var(--moss) 55%,var(--rule))}
.llm-card.available .llm-status{color:var(--moss);font-weight:600}
.llm-card.unavailable{opacity:.5}
.llm-card.unavailable .llm-radio{pointer-events:none}
.llm-card .llm-status{font-size:.74rem}

/* ---------- /ai decision tree ---------- */
.ai-connect{max-width:900px}
.ai-connect .lede{color:var(--ink-soft);margin:0 0 10px;font-size:1.04rem;text-wrap:pretty}
.ai-signin-links{margin:0 0 22px}
.ai-step{margin:30px 0}
.ai-step h2{font-family:var(--font-display);font-weight:400;font-size:1.45rem;margin:0 0 8px}
.ai-step.is-hidden,[hidden].ai-step{display:none !important}
.decision-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:12px}
@media(max-width:640px){.decision-grid{grid-template-columns:1fr}}
.decision-card{display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:left;padding:20px 18px;border:1px solid var(--rule);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow);cursor:pointer;color:var(--ink);font:inherit}
.decision-card:hover{border-color:var(--cobalt)}
.decision-card.is-selected{border-color:var(--cobalt);box-shadow:0 0 0 2px color-mix(in srgb,var(--cobalt) 26%,transparent)}
.decision-title{font-weight:600;font-size:1.06rem}
.decision-desc{color:var(--ink-soft);font-size:.93rem}
.decision-badge{display:inline-flex;font-size:.66rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;border-radius:999px}
.decision-badge.local{background:color-mix(in srgb,var(--moss) 18%,transparent);color:var(--moss)}
.decision-badge.remote{background:color-mix(in srgb,var(--apricot) 20%,transparent);color:var(--apricot-ink)}
.decision-badge.session{background:color-mix(in srgb,var(--cobalt) 14%,transparent);color:var(--cobalt-ink)}
.decision-badge.vault{background:color-mix(in srgb,var(--apricot) 24%,transparent);color:var(--apricot-ink)}
.trust-table-wrap{overflow-x:auto;margin:14px 0;border:1px solid var(--rule);border-radius:12px;background:var(--surface)}
.trust-table{width:100%;border-collapse:collapse;font-size:.86rem;min-width:640px}
.trust-table th,.trust-table td{border-bottom:1px solid var(--rule);padding:10px 12px;text-align:left;vertical-align:top}
.trust-table thead th{background:var(--surface-2);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;font-weight:600}
.trust-table tbody th{font-weight:600;white-space:nowrap}
.trust-table tr:last-child th,.trust-table tr:last-child td{border-bottom:none}
.neutrality{margin:10px 0 0}
.provider-card{padding:12px 14px;gap:6px}
.provider-card .llm-card-inner{display:flex;flex-direction:column;gap:3px;position:relative;padding-right:28px}
.provider-card .llm-radio{position:absolute;top:0;right:0}
.llm-trust-line{color:var(--ink-soft);margin-top:4px}
.trust-accordion{margin-top:6px;border-top:1px dashed var(--rule);padding-top:6px}
.trust-accordion summary{cursor:pointer;font-size:.82rem;font-weight:600;color:var(--cobalt)}
.trust-accordion p{margin:6px 0 0}
.vault-btn{margin-top:8px;align-self:flex-start}
.connected-list{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.connected-card{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 18px}
.ai-sponsor-fields{margin-top:20px;max-width:480px}
.ai-sponsor-fields.is-hidden,[hidden].ai-sponsor-fields{display:none !important}
.ai-explainer .explainer-block{margin:16px 0;padding:16px 18px;border:1px solid var(--rule);border-radius:12px;background:var(--surface)}
.ai-explainer .explainer-block h3{margin:0 0 8px;font-size:1rem;font-weight:600}
.ai-explainer .explainer-block p{margin:0 0 8px}
.ai-explainer .explainer-block p:last-child{margin-bottom:0}
.ai-modal{border:none;border-radius:var(--radius);padding:0;max-width:min(480px,94vw);box-shadow:var(--shadow-lift);background:transparent}
.ai-modal::backdrop{background:rgba(27,26,22,.5)}
.ai-modal-card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);padding:24px;margin:0}
.ai-modal-card h2{margin:0 0 10px;font-size:1.18rem;font-weight:600}
.ai-modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}
.ai-hero{margin:0 0 18px;padding:20px;border:1px solid var(--rule);border-radius:14px;background:var(--surface)}
.ai-hero-kicker{margin:0 0 6px;font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--cobalt)}
.promise-banner{margin:12px 0 0;padding:12px 15px;border-left:2px solid var(--moss);background:color-mix(in srgb,var(--moss) 10%,transparent);border-radius:0 9px 9px 0;font-size:.92rem}
.local-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:14px 0 18px}
@media(max-width:720px){.local-pillars{grid-template-columns:1fr}}
.pillar-card{padding:15px 17px;border:1px solid var(--rule);border-radius:12px;background:var(--surface);box-shadow:var(--shadow)}
.pillar-card h3{margin:8px 0 6px;font-size:1rem;font-weight:600}
.gallery-subhead{font-size:1.03rem;font-weight:600;margin:18px 0 6px}
.ai-gallery-block.is-hidden,[hidden].ai-gallery-block{display:none !important}
.advanced-panel{margin:12px 0;border:1px solid var(--rule);border-radius:12px;background:var(--surface);padding:0 14px}
.advanced-panel > summary{cursor:pointer;list-style:none;padding:14px 4px;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.advanced-panel > summary::-webkit-details-marker{display:none}
.advanced-title{font-weight:600;font-size:1.03rem}
.advanced-body{padding:0 4px 16px;border-top:1px dashed var(--rule)}
.advanced-body h3{font-size:.94rem;font-weight:600;margin:14px 0 6px}
.advanced-body p{margin:0 0 8px}
.risk-list{margin:6px 0 12px 1.1em;padding:0;color:var(--ink-soft);font-size:.9rem}
.never-banner{margin:16px 0 0;padding:12px 15px;border:1px solid color-mix(in srgb,var(--apricot) 45%,var(--rule));border-radius:10px;background:color-mix(in srgb,var(--apricot) 10%,transparent);font-size:.92rem}
.never-row{background:color-mix(in srgb,var(--apricot) 8%,transparent)}
.chrome-vs-profile{margin:12px 0;padding:12px 15px}
.chrome-vs-profile h4{margin:0 0 6px}
.term-link{appearance:none;border:0;background:none;padding:0;margin:0;font:inherit;color:var(--cobalt);text-decoration:underline;text-decoration-style:dotted;cursor:pointer}
.term-link:hover{color:var(--cobalt-deep)}
.vault-soon{opacity:.95}
.glossary-body p{margin:0 0 8px}

/* Slow, subtle, and only on first encounter. No infinite activity loops. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}