/* ==========================================================================
   MemoryRaven — site stylesheet
   --------------------------------------------------------------------------
   One file, no build step, no imports. Sections:

     1.  Reset and base
     2.  Design tokens (brand + semantic + theming)
     3.  Typography
     4.  Layout primitives
     5.  Buttons and controls
     6.  Site header
     7.  Hero
     8.  Sections, steps, cards, spec strip
     9.  Architecture diagram
     10. Code blocks
     11. Callouts and tables
     12. Footer
     13. Login page
     14. Toast
     15. Responsive
     16. Reduced motion and print

   Components only ever reference the *semantic* tokens in section 2b. The
   brand ramp in 2a is the palette; the themes remap the semantic layer. That
   is the whole theming story — nothing else needs touching to reskin.
   ========================================================================== */


/* ==========================================================================
   1. Reset and base
   ========================================================================== */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 88px;   /* sticky header height, for #anchor jumps */
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 1.0625rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

[hidden] { display: none !important; }

img,
svg { display: block; max-width: 100%; }

h1, h2, h3, h4 { margin: 0; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; }
p, ul, ol      { margin: 0; }

a {
    color: var(--accent-text);
    text-decoration-color: color-mix(in srgb, var(--accent-text) 40%, transparent);
    text-underline-offset: 0.18em;
}
a:hover { text-decoration-color: currentColor; }

:focus-visible {
    outline: 3px solid var(--ring);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

::selection {
    background: color-mix(in srgb, var(--accent) 28%, transparent);
    color: var(--ink);
}

/* Screen-reader-only, but still focusable. */
.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.skip-link {
    position: absolute;
    left: var(--s-4); top: var(--s-2);
    z-index: 100;
    padding: var(--s-2) var(--s-4);
    background: var(--accent);
    color: var(--accent-ink);
    border-radius: var(--r-sm);
    font-weight: 600;
    transform: translateY(-160%);
    transition: transform 0.18s ease;
}
.skip-link:focus { transform: translateY(0); }


/* ==========================================================================
   2. Design tokens
   ========================================================================== */

/* -- 2a. Brand ramp -------------------------------------------------------
   Sampled directly out of Logo.png, so the site and the artwork match
   rather than approximately agree.
     #156272  dominant mark teal
     #094857  mark shadow facets
     #63666B  tagline grey
   ------------------------------------------------------------------------ */
:root {
    --mr-teal-800: #06333F;
    --mr-teal-700: #094857;
    --mr-teal-600: #0F5667;
    --mr-teal-500: #156272;   /* the mark */
    --mr-teal-400: #1B8CA6;
    --mr-teal-300: #3FA8BE;
    --mr-teal-200: #8ACEDC;
    --mr-teal-050: #E6F3F7;

    --mr-navy-900: #071A33;
    --mr-navy-800: #0B2145;
    --mr-navy-700: #102B52;
    --mr-navy-600: #16305A;

    --mr-slate-600: #4A5563;
    --mr-slate-500: #63666B;
    --mr-slate-300: #AEBAC4;
    --mr-slate-100: #DDE5EA;
    --mr-slate-050: #EEF3F6;

    --mr-white: #FFFFFF;

    /* Non-colour scales -------------------------------------------------- */
    --font-sans: "Segoe UI Variable Display", "Segoe UI", ui-sans-serif,
                 system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, "Cascadia Mono", "Cascadia Code", Consolas,
                 "SF Mono", "Liberation Mono", Menlo, monospace;

    --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
    --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
    --s-9: 96px;  --s-10: 128px;

    --r-sm: 6px;  --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px;

    --container: 1120px;
    --container-narrow: 760px;
}

/* -- 2b. Semantic tokens: light (the default) ---------------------------- */
:root {
    --bg:            #F4F7F9;
    --bg-tint:       #EAF1F5;
    --surface:       var(--mr-white);
    --surface-2:     #F8FBFC;
    --surface-sunk:  var(--mr-slate-050);
    --border:        var(--mr-slate-100);
    --border-strong: #C6D3DC;

    --ink:           var(--mr-navy-800);
    --ink-muted:     #56687C;
    --ink-faint:     var(--mr-slate-500);

    --accent:        var(--mr-teal-600);
    --accent-hover:  var(--mr-teal-700);
    --accent-ink:    var(--mr-white);
    --accent-text:   var(--mr-teal-700);
    --accent-soft:   var(--mr-teal-050);

    --ring:          var(--mr-teal-400);
    --code-bg:       var(--mr-navy-900);
    --code-ink:      #D7E4EC;
    --danger:        #B4231F;
    --danger-soft:   #FDECEA;
    --ok:            #10705A;
    --ok-soft:       #E6F5F0;

    --shadow-1: 0 1px 2px rgba(7, 26, 51, 0.06), 0 1px 3px rgba(7, 26, 51, 0.04);
    --shadow-2: 0 4px 12px rgba(7, 26, 51, 0.07), 0 2px 4px rgba(7, 26, 51, 0.04);
    --shadow-3: 0 18px 44px rgba(7, 26, 51, 0.13), 0 4px 12px rgba(7, 26, 51, 0.06);

    /* Login brand panel. A distinct surface rather than the plain page
       background, but it follows the theme: a panel that stayed dark in the
       light theme read as the theme flipping when you navigated to it. */
    --auth-bg: radial-gradient(760px 420px at 12% 6%, rgba(27, 140, 166, 0.20), transparent 60%),
               linear-gradient(155deg, #E9F2F6, #D5E7EF 72%);
    --auth-ink:    var(--mr-navy-800);
    --auth-body:   #3D5468;
    --auth-item:   #2F4A5C;
    --auth-icon:   var(--mr-teal-600);
    --auth-foot:   rgba(11, 33, 69, 0.55);
    --auth-rule:   rgba(21, 98, 114, 0.18);
    --auth-glow:   rgba(21, 98, 114, 0.05);
    --auth-mark-shadow: drop-shadow(0 2px 6px rgba(7, 26, 51, 0.16));

    --header-bg: rgba(244, 247, 249, 0.82);
    --hero-glow: radial-gradient(1100px 420px at 70% -12%,
                                 rgba(27, 140, 166, 0.16), transparent 62%);
    color-scheme: light;
}

/* -- 2c. Dark palette ----------------------------------------------------
   The dark values are declared once, here, under their own `--d-*` names.
   The two blocks after this map them onto the semantic tokens: once for the
   OS preference, once for the explicit toggle. A media query cannot be
   folded into a plain selector, so the *mapping* is unavoidably written
   twice — but the values are not, which is what matters when retheming.

   `light-dark()` would collapse this further; it is deliberately avoided so
   the sheet keeps working on older engines with no silent colour loss.
   ------------------------------------------------------------------------ */
:root {
    --d-bg:            #08131C;
    --d-bg-tint:       #0B1A26;
    --d-surface:       #0F1F2B;
    --d-surface-2:     #132734;
    --d-surface-sunk:  #0B1925;
    --d-border:        #1E3444;
    --d-border-strong: #2C4859;

    --d-ink:           #E6EEF3;
    --d-ink-muted:     #9DB0BE;
    --d-ink-faint:     #7D91A0;

    --d-accent-soft:   rgba(27, 140, 166, 0.14);
    --d-code-bg:       #061019;
    --d-code-ink:      #CFE0EA;
    --d-danger:        #FF9B93;
    --d-danger-soft:   rgba(180, 35, 31, 0.16);
    --d-ok:            #6FD9BC;
    --d-ok-soft:       rgba(16, 112, 90, 0.18);

    --d-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.40);
    --d-shadow-2: 0 4px 14px rgba(0, 0, 0, 0.45);
    --d-shadow-3: 0 20px 48px rgba(0, 0, 0, 0.55);

    --d-auth-bg: radial-gradient(760px 420px at 12% 6%, rgba(27, 140, 166, 0.28), transparent 60%),
                 linear-gradient(155deg, var(--mr-navy-900), var(--mr-teal-800) 72%);
    --d-auth-ink:    var(--mr-white);
    --d-auth-body:   #A9C7D3;
    --d-auth-item:   #C2D9E2;
    --d-auth-icon:   var(--mr-teal-200);
    --d-auth-foot:   rgba(169, 199, 211, 0.75);
    --d-auth-rule:   rgba(138, 206, 220, 0.16);
    --d-auth-glow:   rgba(138, 206, 220, 0.05);
    --d-auth-mark-shadow: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));

    --d-header-bg: rgba(8, 19, 28, 0.82);
    --d-hero-glow: radial-gradient(1100px 420px at 70% -12%,
                                   rgba(27, 140, 166, 0.22), transparent 62%);
}

/* -- 2d. Dark by system preference, unless light was explicitly chosen --- */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg:            var(--d-bg);
        --bg-tint:       var(--d-bg-tint);
        --surface:       var(--d-surface);
        --surface-2:     var(--d-surface-2);
        --surface-sunk:  var(--d-surface-sunk);
        --border:        var(--d-border);
        --border-strong: var(--d-border-strong);
        --ink:           var(--d-ink);
        --ink-muted:     var(--d-ink-muted);
        --ink-faint:     var(--d-ink-faint);
        --accent:        var(--mr-teal-400);
        --accent-hover:  var(--mr-teal-300);
        --accent-ink:    #04222B;
        --accent-text:   var(--mr-teal-300);
        --accent-soft:   var(--d-accent-soft);
        --ring:          var(--mr-teal-200);
        --code-bg:       var(--d-code-bg);
        --code-ink:      var(--d-code-ink);
        --danger:        var(--d-danger);
        --danger-soft:   var(--d-danger-soft);
        --ok:            var(--d-ok);
        --ok-soft:       var(--d-ok-soft);
        --shadow-1:      var(--d-shadow-1);
        --shadow-2:      var(--d-shadow-2);
        --shadow-3:      var(--d-shadow-3);
        --auth-bg:          var(--d-auth-bg);
        --auth-ink:         var(--d-auth-ink);
        --auth-body:        var(--d-auth-body);
        --auth-item:        var(--d-auth-item);
        --auth-icon:        var(--d-auth-icon);
        --auth-foot:        var(--d-auth-foot);
        --auth-rule:        var(--d-auth-rule);
        --auth-glow:        var(--d-auth-glow);
        --auth-mark-shadow: var(--d-auth-mark-shadow);
        --header-bg:     var(--d-header-bg);
        --hero-glow:     var(--d-hero-glow);
        color-scheme: dark;
    }
}

/* -- 2e. Dark chosen explicitly with the header toggle ------------------- */
:root[data-theme="dark"] {
    --bg:            var(--d-bg);
    --bg-tint:       var(--d-bg-tint);
    --surface:       var(--d-surface);
    --surface-2:     var(--d-surface-2);
    --surface-sunk:  var(--d-surface-sunk);
    --border:        var(--d-border);
    --border-strong: var(--d-border-strong);
    --ink:           var(--d-ink);
    --ink-muted:     var(--d-ink-muted);
    --ink-faint:     var(--d-ink-faint);
    --accent:        var(--mr-teal-400);
    --accent-hover:  var(--mr-teal-300);
    --accent-ink:    #04222B;
    --accent-text:   var(--mr-teal-300);
    --accent-soft:   var(--d-accent-soft);
    --ring:          var(--mr-teal-200);
    --code-bg:       var(--d-code-bg);
    --code-ink:      var(--d-code-ink);
    --danger:        var(--d-danger);
    --danger-soft:   var(--d-danger-soft);
    --ok:            var(--d-ok);
    --ok-soft:       var(--d-ok-soft);
    --shadow-1:      var(--d-shadow-1);
    --shadow-2:      var(--d-shadow-2);
    --shadow-3:      var(--d-shadow-3);
    --auth-bg:          var(--d-auth-bg);
    --auth-ink:         var(--d-auth-ink);
    --auth-body:        var(--d-auth-body);
    --auth-item:        var(--d-auth-item);
    --auth-icon:        var(--d-auth-icon);
    --auth-foot:        var(--d-auth-foot);
    --auth-rule:        var(--d-auth-rule);
    --auth-glow:        var(--d-auth-glow);
    --auth-mark-shadow: var(--d-auth-mark-shadow);
    --header-bg:     var(--d-header-bg);
    --hero-glow:     var(--d-hero-glow);
    color-scheme: dark;
}


/* ==========================================================================
   3. Typography
   ========================================================================== */

.display {
    font-size: clamp(2.4rem, 1.4rem + 3.4vw, 3.75rem);
    letter-spacing: -0.035em;
}
.h2 { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.4rem); }
.h3 { font-size: 1.1875rem; letter-spacing: -0.012em; }

.lede {
    font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
    color: var(--ink-muted);
    line-height: 1.6;
}

.muted { color: var(--ink-muted); }
.small { font-size: 0.875rem; }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: 5px var(--s-3);
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    background: var(--surface);
    color: var(--ink-muted);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    box-shadow: var(--shadow-1);
}
.eyebrow .dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    padding: 0.12em 0.38em;
    border-radius: var(--r-sm);
    background: var(--surface-sunk);
    border: 1px solid var(--border);
    word-break: break-word;
}

.prose p + p,
.prose p + ul,
.prose ul + p { margin-top: var(--s-4); }
.prose ul { padding-left: 1.2em; }
.prose li + li { margin-top: var(--s-2); }


/* ==========================================================================
   4. Layout primitives
   ========================================================================== */

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--s-5);
}
.container.narrow { max-width: var(--container-narrow); }

.section        { padding-block: var(--s-9); }
.section.tight  { padding-block: var(--s-8); }
.section.tinted { background: var(--bg-tint); }
/* A page intro sits directly above its first real section, so it does not
   need the full block of padding underneath. */
.section.intro { padding-block: var(--s-8) var(--s-3); }

.section-head        { max-width: 62ch; margin-bottom: var(--s-7); }
.section-head .h2    { margin-bottom: var(--s-3); }
.section-head.center { margin-inline: auto; text-align: center; }

.stack-2 > * + * { margin-top: var(--s-2); }
.stack-3 > * + * { margin-top: var(--s-3); }
.stack-4 > * + * { margin-top: var(--s-4); }
.stack-5 > * + * { margin-top: var(--s-5); }
.stack-6 > * + * { margin-top: var(--s-6); }

.divider { height: 1px; background: var(--border); border: 0; margin: 0; }

/* A short, deliberate set of spacing utilities. They exist so page markup
   never needs a style attribute; anything structural gets a real class. */
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }
.mb-3 { margin-bottom: var(--s-3); }
.mb-4 { margin-bottom: var(--s-4); }
.mb-5 { margin-bottom: var(--s-5); }
.break { word-break: break-all; }

/* Subpage title: a step down from the home page display size. */
.display.page-title {
    font-size: clamp(2.1rem, 1.4rem + 2.4vw, 3rem);
    margin-block: var(--s-4);
}


/* ==========================================================================
   5. Buttons and controls
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    padding: 11px var(--s-5);
    border: 1px solid transparent;
    border-radius: var(--r-md);
    font: inherit;
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.16s ease, border-color 0.16s ease,
                transform 0.12s ease, box-shadow 0.16s ease, color 0.16s ease;
}
.btn:active { transform: translateY(1px); }
.btn[disabled],
.btn[aria-disabled="true"] { opacity: 0.6; cursor: not-allowed; transform: none; }

.btn-primary {
    background: var(--accent);
    color: var(--accent-ink);
    box-shadow: var(--shadow-2);
}
.btn-primary:hover { background: var(--accent-hover); }

.btn-secondary {
    background: var(--surface);
    color: var(--ink);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-1);
}
.btn-secondary:hover { border-color: var(--accent); color: var(--accent-text); }

.btn-lg   { padding: 14px var(--s-6); font-size: 1rem; }
.btn-full { width: 100%; }

.btn .spinner {
    width: 15px; height: 15px;
    border: 2px solid color-mix(in srgb, currentColor 30%, transparent);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 0.62s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Icon-only button: the theme toggle and the mobile menu button. */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
    color: var(--ink-muted);
    cursor: pointer;
    transition: color 0.16s ease, border-color 0.16s ease, background-color 0.16s ease;
}
.icon-btn:hover { color: var(--ink); border-color: var(--border-strong); }
.icon-btn svg { width: 18px; height: 18px; }

/* Which glyph the toggle shows follows the same cascade as 2d / 2e, so the
   button is correct on first paint without waiting for JavaScript. */
.icon-sun  { display: none; }
.icon-moon { display: block; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .icon-sun  { display: block; }
    :root:not([data-theme="light"]) .icon-moon { display: none; }
}
:root[data-theme="dark"]  .icon-sun  { display: block; }
:root[data-theme="dark"]  .icon-moon { display: none; }
:root[data-theme="light"] .icon-sun  { display: none; }
:root[data-theme="light"] .icon-moon { display: block; }


/* ==========================================================================
   6. Site header
   ========================================================================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--header-bg);
    backdrop-filter: saturate(150%) blur(12px);
    -webkit-backdrop-filter: saturate(150%) blur(12px);
    border-bottom: 1px solid var(--border);
}

.header-inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--s-5);
    height: 72px;
}

/* -- Brand lockup: cropped raven mark + the wordmark as live text -------- */
.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    text-decoration: none;
    color: var(--ink);
    flex: 0 0 auto;
}
.brand-mark {
    width: auto;
    height: 34px;
    /* The mark's internal circuit lines are cut-outs in the artwork, so they
       take on the page background. A hair of shadow stops it floating. */
    filter: drop-shadow(0 1px 1px rgba(7, 26, 51, 0.10));
}
/* On the dark theme the drop shadow is pointless and the teal reads a shade
   too heavy against a near-black bar, so lift it instead. Same cascade as
   the theme tokens in section 2. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .brand-mark {
        filter: brightness(1.28) saturate(1.05);
    }
}
:root[data-theme="dark"] .brand-mark {
    filter: brightness(1.28) saturate(1.05);
}

.brand-word {
    font-size: 1.28rem;
    letter-spacing: -0.035em;
    line-height: 1;
    white-space: nowrap;
}
.brand-word .wm-light { font-weight: 400; }
.brand-word .wm-bold  { font-weight: 700; }

.header-nav {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    margin-left: auto;
}
.header-nav a {
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r-sm);
    color: var(--ink-muted);
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
}
.header-nav a:hover { color: var(--ink); background: var(--surface-sunk); }
.header-nav a[aria-current="page"] { color: var(--accent-text); font-weight: 600; }

.header-actions {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    flex: 0 0 auto;
}

.menu-btn { display: none; }


/* ==========================================================================
   7. Hero
   ========================================================================== */

.hero {
    position: relative;
    padding-block: var(--s-9) var(--s-8);
    overflow: hidden;
}
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--hero-glow);
    pointer-events: none;
}
.hero > .container { position: relative; }

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: var(--s-8);
    align-items: center;
}

.hero-copy .display { margin-block: var(--s-4) var(--s-5); }
.hero-copy .lede    { max-width: 52ch; }
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
    margin-top: var(--s-6);
}
.hero-actions.center { justify-content: center; }
.hero-note {
    margin-top: var(--s-4);
    color: var(--ink-faint);
    font-size: 0.8125rem;
}

/* -- The MCP exchange mock ---------------------------------------------- */
.mock {
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-3);
    overflow: hidden;
}
.mock-bar {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-3) var(--s-4);
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
}
.mock-dots { display: flex; gap: 6px; }
.mock-dots i {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--border-strong);
}
.mock-title {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--ink-faint);
    margin-left: var(--s-2);
}
.mock-body { padding: var(--s-4) var(--s-5) var(--s-5); }

.mock-call {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--accent-text);
    padding-bottom: var(--s-3);
    margin-bottom: var(--s-4);
    border-bottom: 1px dashed var(--border);
    word-break: break-word;
}
.mock-call .caller { color: var(--ink-faint); }

.mock-events { list-style: none; margin: 0; padding: 0; }
.mock-events li {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: var(--s-3);
    padding: 7px 0;
    font-size: 0.875rem;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.mock-events li:last-child { border-bottom: 0; }
.mock-events time {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--ink-faint);
    padding-top: 2px;
}
.mock-events .app  { font-weight: 600; }
.mock-events .what { color: var(--ink-muted); }

.mock-foot {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin-top: var(--s-4);
    padding-top: var(--s-4);
    border-top: 1px solid var(--border);
}
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: var(--r-pill);
    background: var(--accent-soft);
    color: var(--accent-text);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.chip.neutral {
    background: var(--surface-sunk);
    color: var(--ink-muted);
    border: 1px solid var(--border);
}


/* ==========================================================================
   8. Sections, steps, cards, spec strip
   ========================================================================== */

/* -- Numbered steps ------------------------------------------------------ */
.steps {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: step;
    display: grid;
    gap: var(--s-5);
}
.steps > li {
    counter-increment: step;
    position: relative;
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: var(--s-5);
    align-items: start;
}
.steps > li::before {
    content: counter(step);
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    color: var(--accent-text);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    box-shadow: var(--shadow-1);
    z-index: 1;
}
/* Connector rule running between the numbers. */
.steps > li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 21.5px;
    top: 44px;
    bottom: calc(-1 * var(--s-5));
    width: 1px;
    background: var(--border);
}
.step-body .h3 { margin-bottom: var(--s-2); }
.step-body p   { color: var(--ink-muted); }
.step-tag {
    display: inline-block;
    margin-top: var(--s-3);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--ink-faint);
}

/* -- Card grid ----------------------------------------------------------- */
.grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
    gap: var(--s-5);
}
/* Exactly four cards: an auto-fit grid drops the fourth onto a row of its
   own at container width, which reads as a mistake. Step it explicitly. */
.grid-cards.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) {
    .grid-cards.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
    .grid-cards.four { grid-template-columns: 1fr; }
}

.card {
    padding: var(--s-5);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-1);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.card.interactive:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-2);
    transform: translateY(-2px);
}
.card .h3 { margin-bottom: var(--s-2); }
.card p   { color: var(--ink-muted); font-size: 0.9375rem; }

.card-icon {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    margin-bottom: var(--s-4);
    border-radius: var(--r-md);
    background: var(--accent-soft);
    color: var(--accent-text);
}
.card-icon svg { width: 20px; height: 20px; }

/* -- Highlight panel ----------------------------------------------------- */
.panel {
    padding: var(--s-6);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    background: var(--surface);
    box-shadow: var(--shadow-2);
}
.panel-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--s-7);
    align-items: center;
}

/* Closing call-to-action panel. */
.panel-cta { text-align: center; }
.panel-cta .lede {
    margin: var(--s-3) auto var(--s-6);
    max-width: 46ch;
}

/* The split panel leads with an eyebrow, so its heading needs its own rhythm. */
.panel-split .h2 { margin-block: var(--s-4) var(--s-3); }

/* -- Spec strip ---------------------------------------------------------- */
.specs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
}
.spec {
    padding: var(--s-5);
    background: var(--surface);
    text-align: center;
}
.spec dt {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-faint);
}
.spec dd {
    margin: var(--s-2) 0 0;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--accent-text);
    font-variant-numeric: tabular-nums;
}
.spec dd .unit { font-size: 0.875rem; font-weight: 600; color: var(--ink-muted); }


/* ==========================================================================
   9. Architecture diagram
   ========================================================================== */

.diagram-scroll {
    overflow-x: auto;
    padding-bottom: var(--s-2);
    border-radius: var(--r-lg);
}
.diagram {
    width: 100%;
    min-width: 720px;   /* below this the labels stop being readable */
    height: auto;
}
.diagram .d-zone { fill: var(--surface-2); stroke: var(--border); stroke-width: 1; }
.diagram .d-node { fill: var(--surface); stroke: var(--border-strong); stroke-width: 1; }
.diagram .d-node-accent {
    fill: var(--accent-soft);
    stroke: color-mix(in srgb, var(--accent) 55%, transparent);
    stroke-width: 1;
}
.diagram .d-zone-label {
    fill: var(--ink-faint);
    font: 600 11px var(--font-sans);
    letter-spacing: 0.09em;
}
.diagram .d-label { fill: var(--ink); font: 600 13px var(--font-sans); }
.diagram .d-sub   { fill: var(--ink-muted); font: 400 11.5px var(--font-mono); }
.diagram .d-flow  { stroke: var(--accent); stroke-width: 2; fill: none; }
.diagram .d-flow-head  { fill: var(--accent); }
.diagram .d-flow-label {
    fill: var(--accent-text);
    font: 700 10.5px var(--font-mono);
    letter-spacing: 0.06em;
}


/* ==========================================================================
   10. Code blocks
   ========================================================================== */

.code {
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--code-bg);
}
.code-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4);
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.code-title {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: #8FA6B6;
    letter-spacing: 0.04em;
}
.code-copy {
    padding: 5px var(--s-3);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--r-sm);
    background: transparent;
    color: #B9CCD9;
    font: 600 0.75rem var(--font-sans);
    cursor: pointer;
    transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.code-copy:hover { background: rgba(255, 255, 255, 0.1); color: var(--mr-white); }
.code-copy[data-copied="true"] { color: var(--mr-teal-200); border-color: var(--mr-teal-400); }

.code pre {
    margin: 0;
    padding: var(--s-4);
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    line-height: 1.7;
    color: var(--code-ink);
    tab-size: 2;
}
.code pre code {
    background: none;
    border: 0;
    padding: 0;
    font-size: inherit;
    color: inherit;
    word-break: normal;
}


/* ==========================================================================
   11. Callouts and tables
   ========================================================================== */

.callout {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: var(--s-3);
    padding: var(--s-4) var(--s-5);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--r-md);
    background: var(--surface);
    font-size: 0.9375rem;
    color: var(--ink-muted);
}
.callout svg { width: 20px; height: 20px; color: var(--accent-text); margin-top: 2px; }
.callout strong { color: var(--ink); }
.callout.warn { border-left-color: #C98A16; }
.callout.warn svg { color: #C98A16; }

.table-wrap { overflow-x: auto; border-radius: var(--r-md); }
table.data {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
}
table.data th,
table.data td {
    padding: var(--s-3) var(--s-4);
    text-align: left;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}
table.data th {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ink-faint);
    background: var(--surface-2);
    white-space: nowrap;
}
table.data tr:last-child td { border-bottom: 0; }
table.data td.mono { font-family: var(--font-mono); font-size: 0.8125rem; }


/* ==========================================================================
   12. Footer
   ========================================================================== */

.site-footer {
    border-top: 1px solid var(--border);
    background: var(--bg-tint);
    padding-block: var(--s-8) var(--s-6);
    margin-top: var(--s-9);
}
.footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
    gap: var(--s-7);
}
/* The footer repeats the header lockup at a larger size. The wordmark is
   live text here too — logo-lockup.png bakes in dark navy ink and would
   disappear on the dark theme. */
.footer-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    margin-bottom: var(--s-4);
    text-decoration: none;
    color: var(--ink);
}
.footer-brand .brand-mark { height: 46px; }
.footer-brand .brand-word { font-size: 1.6rem; }
.footer-tagline {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-faint);
}
.footer-col h4 {
    font-size: 0.75rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: var(--s-3);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li + li { margin-top: var(--s-2); }
.footer-col a {
    color: var(--ink-muted);
    font-size: 0.9375rem;
    text-decoration: none;
}
.footer-col a:hover { color: var(--accent-text); text-decoration: underline; }

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
    justify-content: space-between;
    align-items: center;
    margin-top: var(--s-7);
    padding-top: var(--s-5);
    border-top: 1px solid var(--border);
    color: var(--ink-faint);
    font-size: 0.8125rem;
}


/* ==========================================================================
   13. Login page
   ========================================================================== */

/* The auth shell already fills the viewport, so the footer does not need
   the usual generous gap above it. */
body.page-auth .site-footer { margin-top: 0; }

.auth-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: calc(100vh - 72px);
}

/* -- Brand side ---------------------------------------------------------- */
.auth-brand {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--s-6);
    padding: var(--s-9) var(--s-8);
    background: var(--auth-bg);
    color: var(--auth-body);
    overflow: hidden;
}
.auth-brand::after {
    /* Faint concentric rule, echoing the circuit motif in the artwork. */
    content: "";
    position: absolute;
    right: -80px; bottom: -80px;
    width: 320px; height: 320px;
    border-radius: 50%;
    border: 1px solid var(--auth-rule);
    box-shadow: 0 0 0 40px var(--auth-glow);
    pointer-events: none;
}
.auth-brand > * { position: relative; z-index: 1; }
.auth-brand-lockup {
    display: flex;
    align-items: center;
    gap: var(--s-4);
}
.auth-brand-lockup .brand-mark {
    height: 72px;
    filter: var(--auth-mark-shadow);
}
.auth-brand-lockup .brand-word {
    font-size: 1.9rem;
    letter-spacing: -0.035em;
    line-height: 1;
    color: var(--auth-ink);
}
.auth-brand-lockup .wm-light { font-weight: 400; }
.auth-brand-lockup .wm-bold  { font-weight: 700; }
.auth-brand h2 {
    font-size: 1.75rem;
    letter-spacing: -0.03em;
    color: var(--auth-ink);
    max-width: 18ch;
}
.auth-brand p { color: var(--auth-body); max-width: 40ch; }
.auth-points { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.auth-points li {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: var(--s-3);
    font-size: 0.9375rem;
    color: var(--auth-item);
}
.auth-points svg { width: 20px; height: 20px; color: var(--auth-icon); margin-top: 1px; }
.auth-brand-foot {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--auth-foot);
}

/* -- Form side ----------------------------------------------------------- */
.auth-main {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--s-8) var(--s-5);
}
.auth-card { width: 100%; max-width: 420px; }

.demo-banner {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    margin-bottom: var(--s-5);
    border: 1px dashed var(--border-strong);
    border-radius: var(--r-md);
    background: var(--surface-sunk);
    color: var(--ink-muted);
    font-size: 0.8125rem;
    line-height: 1.5;
}
.demo-banner svg { width: 18px; height: 18px; color: var(--ink-faint); margin-top: 2px; }
.demo-banner strong { color: var(--ink); }

/* -- Tabs ---------------------------------------------------------------- */
.tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-1);
    padding: var(--s-1);
    margin-bottom: var(--s-6);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface-sunk);
}
.tab {
    padding: var(--s-2) var(--s-3);
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--ink-muted);
    font: 600 0.9375rem var(--font-sans);
    cursor: pointer;
    transition: background-color 0.16s ease, color 0.16s ease;
}
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] {
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow-1);
}

.auth-card h1    { font-size: 1.5rem; margin-bottom: var(--s-2); }
.auth-card .lede { font-size: 0.9375rem; margin-bottom: var(--s-6); }

/* -- Fields -------------------------------------------------------------- */
.field { margin-bottom: var(--s-4); }
.field label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ink);
}
.field input {
    width: 100%;
    padding: 11px var(--s-4);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 0.9375rem;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.field input::placeholder { color: var(--ink-faint); }
.field input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.field input[aria-invalid="true"] { border-color: var(--danger); }
.field input[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 22%, transparent);
}
.field .hint  { margin-top: 5px; font-size: 0.75rem; color: var(--ink-faint); }
.field .error {
    display: none;
    margin-top: 5px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--danger);
}
.field.has-error .error { display: block; }

.field-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    margin-bottom: var(--s-5);
    font-size: 0.875rem;
}
.checkline { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--ink-muted); }
.checkline input { accent-color: var(--accent); width: 16px; height: 16px; }

.form-error {
    display: none;
    padding: var(--s-3) var(--s-4);
    margin-bottom: var(--s-4);
    border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent);
    border-radius: var(--r-md);
    background: var(--danger-soft);
    color: var(--danger);
    font-size: 0.875rem;
}
.form-error[data-shown="true"] { display: block; }

.linklike {
    padding: 0;
    border: 0;
    background: none;
    color: var(--accent-text);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 0.18em;
}
.linklike:hover { color: var(--accent); }

.auth-alt {
    margin-top: var(--s-5);
    text-align: center;
    font-size: 0.875rem;
    color: var(--ink-muted);
}

/* -- Success panel ------------------------------------------------------- */
.auth-success { text-align: center; }
.success-badge {
    display: grid;
    place-items: center;
    width: 60px; height: 60px;
    margin: 0 auto var(--s-5);
    border-radius: 50%;
    background: var(--ok-soft);
    color: var(--ok);
}
.success-badge svg { width: 30px; height: 30px; }
.auth-success h1 { font-size: 1.4rem; margin-bottom: var(--s-3); }
/* auth-demo.js moves focus here so the state change is announced. The user
   did not navigate here by keyboard, so a focus ring would just look like a
   stray box around the heading. */
.auth-success h1:focus,
.auth-success h1:focus-visible { outline: none; }
.auth-success .who {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    color: var(--accent-text);
    word-break: break-all;
}
.auth-success .lede { margin-bottom: var(--s-6); }

.next-steps {
    text-align: left;
    margin-top: var(--s-6);
    padding: var(--s-4) var(--s-5);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface-2);
    font-size: 0.875rem;
    color: var(--ink-muted);
}
.next-steps h2 {
    font-size: 0.75rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: var(--s-3);
}
.next-steps ol { margin: 0; padding-left: 1.2em; }
.next-steps li + li { margin-top: var(--s-2); }


/* ==========================================================================
   14. Toast
   ========================================================================== */

.toast-region {
    position: fixed;
    left: 50%;
    bottom: var(--s-6);
    transform: translateX(-50%);
    z-index: 200;
    display: grid;
    gap: var(--s-2);
    width: min(440px, calc(100vw - 2 * var(--s-5)));
    pointer-events: none;
}
.toast {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow-3);
    font-size: 0.875rem;
    pointer-events: auto;
    animation: toast-in 0.22s ease;
}
.toast svg { width: 18px; height: 18px; color: var(--accent-text); margin-top: 1px; }
.toast[data-leaving="true"] { animation: toast-out 0.18s ease forwards; }

@keyframes toast-in  { from { opacity: 0; transform: translateY(10px); } }
@keyframes toast-out { to   { opacity: 0; transform: translateY(8px);  } }


/* ==========================================================================
   15. Responsive
   ========================================================================== */

@media (max-width: 1000px) {
    .hero-grid   { grid-template-columns: 1fr; gap: var(--s-7); }
    .panel-split { grid-template-columns: 1fr; gap: var(--s-6); }
    .auth-shell  { grid-template-columns: 1fr; min-height: 0; }
    .auth-brand  { padding: var(--s-7) var(--s-6); }
    .auth-brand-lockup .brand-mark { height: 56px; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* Below 860px the links collapse into a drawer under the header bar. */
@media (max-width: 860px) {
    .menu-btn { display: inline-flex; }

    .header-nav {
        position: absolute;
        top: 72px;
        left: 0; right: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: var(--s-3);
        background: var(--surface);
        border-bottom: 1px solid var(--border);
        box-shadow: var(--shadow-2);
    }
    .header-nav[data-open="true"] { display: flex; }
    .header-nav a { padding: var(--s-3) var(--s-4); font-size: 1rem; }

    .header-actions { margin-left: auto; }
    /* The install CTA moves from the bar into the drawer. */
    .header-actions .btn-primary { display: none; }
    .header-nav .btn-primary { display: inline-flex; margin-top: var(--s-2); }
}

@media (min-width: 861px) {
    .header-nav .btn-primary { display: none; }
}

@media (max-width: 620px) {
    :root { --s-9: 64px; --s-8: 48px; }

    .container  { padding-inline: var(--s-4); }
    .brand-word { font-size: 1.1rem; }
    .brand-mark { height: 30px; }
    .hero-actions .btn { width: 100%; }
    .steps > li { grid-template-columns: 36px 1fr; gap: var(--s-4); }
    .steps > li::before { width: 36px; height: 36px; font-size: 0.9rem; }
    .steps > li:not(:last-child)::after { left: 17.5px; top: 36px; }
    .footer-grid { grid-template-columns: 1fr; gap: var(--s-6); }
    .panel      { padding: var(--s-5); }
    .auth-brand { padding: var(--s-6) var(--s-5); }
    .mock-events li { grid-template-columns: 46px 1fr; gap: var(--s-2); }
}


/* ==========================================================================
   16. Reduced motion and print
   ========================================================================== */

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

@media print {
    .site-header, .site-footer, .toast-region, .code-copy { display: none; }
    body { background: #fff; color: #000; }
    .card, .panel, .code { break-inside: avoid; }
}