/* ==========================================================================
   AGENT ][ design system - AGENT Memory
   Green registry palette (round 6, 2026-07-20) with the round-7 Django
   offsets (owner-approved djangoproject.com values, 2026-07-20, applied
   judiciously - refinement, not restyle). Light mode: near-white
   green-tinged page #F1FFF7 with sections alternating into the TD
   pale-green tint #E9F6E5, the featured pricing tier on the pale panel
   tint #C9F0DD and the CTA band on the deep anchor green #0C4B33
   (Django's anchor surface). Link hovers: #0C4B33 in light mode,
   #25C488 in dark mode. Dark mode is the CRT: green-black screen,
   TD greens carry the brand. Terminal windows are real screens: fixed
   dark in BOTH modes, so ANSI colour reads the same everywhere. Sans UI
   (group standard) containing mono terminals.

   THE MARK (round 7, definitive): every mark asset is the owner's
   reference tile grid in ONE solid deep forest green #215732, fixed by
   the orchestrator on 2026-07-20 and locked - the CSS never recolours,
   filters or plates it. The one-token-with-mark rule is dead: the
   cursor keeps its own AA-compliant token (--cursor) and UI accents
   keep their palette (--bright #54B948 remains the TD accent for the
   cursor on dark screens and dark-mode headings). No gradients, no
   neon (#33FF66 survives only as --term-green ANSI output inside the
   fixed-dark screens, never on the mark or cursor).

   DE-PLATED MARK (round 6): the mark is NEVER encapsulated in a dark
   chip, tile, card or rounded container - nav, footer, hero, favicons,
   social, og. The tiles sit directly on whatever surface is behind them.
   In light mode that means #54B948 tiles on the light page surface
   (2.50:1 on white) - the owner's explicit choice for the brand mark: it
   is decorative imagery inside an aria-labelled link, not text, so the
   text floors do not apply and no plate is re-added. Icons render on
   transparent ground; the og/social card ground is the dark-theme page
   colour as a full-bleed surface, not a plate around the mark.

   The h1 blinking cursor sits chipless on the page bg, so light mode
   tunes it within the #54B948 family to --cursor #3F8C34 (same hue,
   darker: 4.19:1 on white, 3.75:1 on the tint; decoration floor 3:1).
   In dark mode --cursor IS --bright (#54B948, 7.99:1). The console idle
   cursor and input caret stay --bright because they only ever render on
   the fixed-dark screen (7.99:1). --link (BNP #007265 light / #54B948
   dark) carries text links, CTAs and mono accents.

   Registry fidelity (owner-quoted registry entries, python3 WCAG-computed):
   - TD Bank Group: #54B948 primary; ramp #FFFFFF #D6D6D6 #ADADAD #858585
     #5C5C5C #333333; support #FFFFFF #E9F6E5 (the light surfaces).
   - BNP Paribas: #00965E primary; support #007265 #00BC8C; ramp #FFFFFF
     #CCCCCC #999999 #666666 #333333 #000000.
   - Pops: SK Hynix #EA002C #F47725 #0E306D; Microsoft #00A4EF #FFB900;
     Walmart #0053E2 #78B9E7 #FFC220.
   Derivations (stated per the reset spec): light heading #215732 is the
   logo-reference deep forest; dark bg #050A06 / surface #0A140C derive
   from the BNP #000000..#007265 family (design-skill retro-terminal CRT
   values); term ink #B9CDBF / dim #8FA396 are the BNP ramp #CCCCCC and
   #999999 green-tinted for the screen; pop red on screens is SK Hynix
   #EA002C lightened to #FF5A6E for AA (6.59:1); light-mode red pop is
   #EA002C deepened to #C70025 for AA on the light surfaces; light-mode
   amber status is Microsoft #FFB900 deepened to ochre #7D5B13.
   Heading scale = the group scale (captns/radhr): h1 clamp(2.4rem,
   5.4vw, 4rem) ls -.025em, h2 clamp(1.8rem, 3.4vw, 2.6rem), h3 1.22rem,
   700 / -.02em / 1.12; mono eyebrow .72rem ls .16em with the 22x2 bar.
   Terminal output is single-spaced console text: line-height 1.5 exact
   (design-skill retro-terminal spacing), no per-line margins, no blank
   rows between consecutive lines.

   Contrast (python3, WCAG 2026-07-20 round 7): LIGHT on #F1FFF7 /
   #E9F6E5: ink #333333 12.27/11.30, dim #5C5C5C 6.49/5.98, heading
   #215732 8.24/7.59, link #007265 5.67/5.22, hover #0C4B33 9.85/9.07,
   ochre #7D5B13 6.04/5.56, red #C70025 5.90/5.43, blue #0053E2
   6.11/5.63, navy #0E306D 12.26/11.30, line #858585 3.58/3.30 (decor),
   cursor #3F8C34 4.07/3.75 (decor). Featured tier on #C9F0DD: ink
   10.22, dim 5.41, heading 6.87, link 4.73, hover #0C4B33 8.21 (card
   border is --link, so no #858585 hairline sits on this tint). Anchor
   band #0C4B33 (light): head/btn #F1FFF7 9.85, sub #C9F0DD 8.21,
   prompt prefix #93D7B7 6.11, hairline #44B78B 4.05 (decor), focus
   #FFC220 6.28, btn-primary ink #0C4B33 on #F1FFF7 9.85. DARK hover
   #25C488: 8.86 on #050A06, 8.34 on #0A140C. Buttons and skip link:
   white on #007265 5.84.
   DARK on #050A06 / #0A140C: ink #CCCCCC 12.42/11.69, dim #999999
   7.00/6.59, heading/link/bright #54B948 7.99/7.52, mint #00BC8C
   8.14/7.67, focus #FFB900 11.58/10.90, red #FF5A6E 6.59/6.21, blue
   #78B9E7 9.40/8.85, line #666666 3.47/3.27 (decor); btn ink and
   selection ink #050A06 on #54B948 7.99. TERM screen on #050A06 / bar
   #0A140C: ink 11.92/11.22, dim 7.46/7.02, green #33FF66 14.86/13.98,
   td/brand #54B948 7.99/7.52, mint 8.14/7.67, amber 11.58/10.90, blue
   9.40/8.85, red 6.59/6.21, orange 7.14/6.72, yellow 12.34/11.62.
   CURSOR on the page bg: light #3F8C34 4.19/3.75 (decor >= 3), dark
   #54B948 on #050A06 7.99; console cursor and caret #54B948 on the
   fixed-dark screen 7.99. All informational text >= 4.5:1, all
   decorative colour >= 3:1, both modes (--term-line #24402E is panel
   chrome only: the screen boundary is carried by the ~19:1 surface
   difference against the light page, per the approved terminal
   treatment). The [x] markers reinforce meaning beside text, so they use
   the AA red pops: #C70025 5.43 on the tint / 6.08 on white, #FF5A6E
   6.59 on #050A06.
   ========================================================================== */

/* ---- fonts (vendored, OFL) ---------------------------------------------- */
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/ibm-plex-mono-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ---- tokens -------------------------------------------------------------- */
:root {
  /* the classic six-band rainbow, recovered from the original mark treatment;
     decorative only (the ascii-logo band fill), same in both modes */
  --stripe: linear-gradient(180deg, #61BB46 0 16.66%, #FDB827 16.66% 33.33%, #F5821F 33.33% 50%, #E03A3E 50% 66.66%, #963D97 66.66% 83.33%, #009DDC 83.33% 100%);
  --bg: #F1FFF7;            /* near-white green-tinged page (Django offset,
                               round 7: fresher than stark white) */
  --bg-2: #FFFFFF;          /* panels and cards: crisp white on the tinted
                               page */
  --tint: #E9F6E5;          /* TD pale-green tint: alternating sections */
  --tint-2: #C9F0DD;        /* Django pale panel tint: the featured tier */
  --sect: #E9F6E5;          /* alternating section band (dark mode keeps
                               the flat CRT page: --sect = --bg) */
  --hov: #E9F6E5;           /* menu hover surface */
  --ink: #333333;           /* TD/BNP ramp */
  --ink-dim: #5C5C5C;       /* TD ramp */
  --head: #215732;          /* deep forest headings (logo family) */
  --link: #007265;          /* BNP support: links, CTAs, mono accents */
  --link-hov: #0C4B33;      /* Django anchor green: light-mode link hover */
  --bright: #54B948;        /* TD primary: the UI accent green (cursor on
                               dark screens, dark-mode headings). The mark
                               itself is the locked forest #215732 SVGs and
                               is never recoloured by CSS */
  --cursor: #3F8C34;        /* light-mode h1 cursor: the A-FINAL-sanctioned
                               family tune (same hue as #54B948, darker)
                               because the cursor sits chipless on the
                               page: 4.19:1 on white, 3.75:1 on the tint,
                               decoration floor 3:1. Dark mode sets
                               --cursor back to --bright */
  --accent: #7D5B13;        /* Microsoft #FFB900 deepened for AA on the
                               light surfaces */
  --line: #858585;          /* TD ramp hairlines */
  --btn-ink: #FFFFFF;
  --glow: transparent;      /* phosphor glow is a dark-mode thing */
  --scanlines: none;
  --sel-bg: #007265;
  --sel-ink: #FFFFFF;
  --focus: #0053E2;         /* Walmart blue */
  --pop-red: #C70025;       /* SK Hynix #EA002C AA-tuned for cream */
  --pop-blue: #0053E2;      /* Walmart */
  --pop-navy: #0E306D;      /* SK Hynix */
  --pop-amber: #7D5B13;     /* ochre on cream */
  --disp-sun: none;
  --disp-moon: inline-block;
  /* CTA band: Django deep-green anchor surface in light mode */
  --band-bg: #0C4B33;
  --band-head: #F1FFF7;
  --band-sub: #C9F0DD;
  --band-pfx: #93D7B7;
  --band-btn: #F1FFF7;
  --band-btn-ink: #0C4B33;
  --band-line: #44B78B;
  --band-focus: #FFC220;
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --wrap: 1120px;
  --radius: 14px;
  /* group spacing scale (captns/radhr): one gutter, one card-grid gap,
     one head-to-content flow value */
  --gutter: 24px;
  --gap: 1rem;
  --flow: 30px;
  /* terminal screens: fixed dark in both modes */
  --term-bg: #050A06;
  --term-bar: #0A140C;
  --term-line: #24402E;
  --term-ink: #B9CDBF;
  --term-dim: #8FA396;
  --term-green: #33FF66;
  --term-td: #54B948;
  --term-mint: #00BC8C;
  --term-amber: #FFB900;    /* Microsoft */
  --term-blue: #78B9E7;     /* Walmart */
  --term-red: #FF5A6E;      /* SK Hynix #EA002C lightened for AA on screen */
  --term-orange: #F47725;   /* SK Hynix */
  --term-yellow: #FFC220;   /* Walmart */
}
:root[data-theme="dark"] {
  --bg: #050A06;            /* green-black CRT (BNP #000000..#007265 family) */
  --bg-2: #0A140C;
  --tint: #0A140C;
  --tint-2: #0A140C;
  --sect: var(--bg);        /* dark mode keeps the flat CRT page: no bands */
  --hov: #050A06;
  --ink: #CCCCCC;           /* BNP ramp */
  --ink-dim: #999999;       /* BNP ramp */
  --head: #54B948;          /* TD green headings */
  --link: #54B948;
  --link-hov: #25C488;      /* Django bright green: dark-mode link hover */
  --bright: #54B948;
  --cursor: var(--bright);  /* cursor and mark share the one token: 7.99:1 */
  --accent: #00BC8C;        /* BNP mint */
  --line: #666666;          /* BNP ramp */
  --btn-ink: #050A06;
  --glow: rgba(84, 185, 72, 0.35);
  --scanlines: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.05) 0 1px, transparent 1px 3px);
  --sel-bg: #54B948;
  --sel-ink: #050A06;
  --focus: #FFB900;         /* Microsoft amber */
  --pop-red: #FF5A6E;
  --pop-blue: #78B9E7;
  --pop-navy: #78B9E7;
  --pop-amber: #FFB900;
  /* CTA band keeps the CRT look in dark mode */
  --band-bg: #0A140C;
  --band-head: #54B948;
  --band-sub: #999999;
  --band-pfx: #54B948;
  --band-btn: #54B948;
  --band-btn-ink: #050A06;
  --band-line: #666666;
  --band-focus: #FFB900;
  --disp-sun: inline-block;
  --disp-moon: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #050A06;
    --bg-2: #0A140C;
    --tint: #0A140C;
    --tint-2: #0A140C;
    --sect: var(--bg);
    --hov: #050A06;
    --ink: #CCCCCC;
    --ink-dim: #999999;
    --head: #54B948;
    --link: #54B948;
    --link-hov: #25C488;
    --bright: #54B948;
    --cursor: var(--bright);
    --accent: #00BC8C;
    --line: #666666;
    --btn-ink: #050A06;
    --glow: rgba(84, 185, 72, 0.35);
    --scanlines: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.05) 0 1px, transparent 1px 3px);
    --sel-bg: #54B948;
    --sel-ink: #050A06;
    --focus: #FFB900;
    --pop-red: #FF5A6E;
    --pop-blue: #78B9E7;
    --pop-navy: #78B9E7;
    --pop-amber: #FFB900;
    --band-bg: #0A140C;
    --band-head: #54B948;
    --band-sub: #999999;
    --band-pfx: #54B948;
    --band-btn: #54B948;
    --band-btn-ink: #050A06;
    --band-line: #666666;
    --band-focus: #FFB900;
    --disp-sun: inline-block;
    --disp-moon: none;
  }
}

/* ---- base ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
/* CRT scanline texture: static, <=5% opacity, dark mode only */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: var(--scanlines);
  z-index: 9999;
}
::selection { background: var(--sel-bg); color: var(--sel-ink); }

/* group heading scale (captns/radhr): sans, 700, tight, margin 0 -
   spacing comes from explicit margins on context classes, never from
   default heading margins */
h1, h2, h3, h4 {
  font-family: var(--font-ui);
  color: var(--head);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin: 0;
}
h1 { font-size: clamp(2.4rem, 5.4vw, 4rem); letter-spacing: -0.025em; }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
h3 { font-size: 1.22rem; }
h4 { font-size: 1.05rem; }
p { margin: 0 0 1rem; max-width: 72ch; }
a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--link-hov); }
ul, ol { margin: 0 0 1rem; padding-left: 1.4rem; }
li { margin-bottom: 0.35rem; }
img { max-width: 100%; height: auto; }
hr, .divider { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
strong, b { font-weight: 600; }
small { font-size: 0.85rem; }
code, kbd, pre { font-family: var(--font-mono); }
pre { margin: 0 0 1rem; }

:focus-visible {
  outline: 2px dashed var(--focus);
  outline-offset: 3px;
}
[id] { scroll-margin-top: 5.5rem; }

/* ---- layout ---------------------------------------------------------------- */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-narrow { max-width: 48rem; margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: clamp(48px, 7vw, 84px) 0; }
/* light mode alternates sections into the TD pale-green tint; dark mode
   keeps the flat CRT page (--sect = --bg there) */
main > section:nth-of-type(even):not(.cta-band) { background: var(--sect); }
/* the group system has no tight variant: alias to the one section rhythm
   until the markup pass retires the class */
.section-tight { padding: clamp(48px, 7vw, 84px) 0; }
.center { text-align: center; }
.center p { margin-left: auto; margin-right: auto; }

.grid-2, .grid-3 { display: grid; gap: var(--gap); grid-template-columns: 1fr; }
@media (min-width: 720px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}
.grid-2 > *, .grid-3 > *, .panel-grid > *, .steps > *, .tiers > *, .footer-grid > * { min-width: 0; }

.visually-hidden, .sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--link);
  color: var(--btn-ink);
  padding: 0.6rem 1rem;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

.table-wrap { overflow-x: auto; margin-bottom: 1rem; }
table { border-collapse: collapse; width: 100%; }
th, td { border: 1px solid var(--line); padding: 0.6rem 0.75rem; text-align: left; vertical-align: top; }
th { color: var(--head); font-weight: 600; }

/* ---- prompt openers, eyebrows, section heads -------------------------------- */
.prompt {
  font-family: var(--font-mono);
  color: var(--ink-dim);
  font-size: 0.82rem;
  margin: 0 0 1rem;
  letter-spacing: 0.02em;
  width: -moz-fit-content;
  width: fit-content;
}
.prompt::before { content: "$ " / ""; color: var(--link); font-weight: 600; }
.center .prompt, .cta-band .prompt { margin-left: auto; margin-right: auto; }
/* type-in reveal: text is always in the DOM; JS adds .anim to <html> when
   motion is allowed and .typed on first scroll into view. Clip-only, zero
   layout shift. The reveal cursor exists ONLY during the animation, then
   fades: no parked blinking cursors (cursor restraint rule). */
.prompt::after {
  content: "";
  display: inline-block;
  width: 0.6em;
  height: 1.05em;
  margin-left: 0.15em;
  background: transparent;
  vertical-align: text-bottom;
}
:root.anim .prompt:not(.typed) { visibility: hidden; }
:root.anim .prompt.typed { animation: prompt-type 420ms steps(24, end) both; }
:root.anim .prompt.typed::after { animation: prompt-cursor 900ms steps(2, start) forwards; }
@keyframes prompt-type {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}
@keyframes prompt-cursor {
  0% { background: currentColor; }
  99% { background: currentColor; }
  100% { background: transparent; }
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  color: var(--link);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0;
}
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--link); }
/* group section head: 62ch measure, title 12px off the eyebrow, copy 14px
   off the title (the reference .head mechanism) */
.section-head { max-width: 62ch; margin-bottom: var(--flow); }
.section-title { margin: 12px 0 0; }
.section-sub { color: var(--ink-dim); font-size: 1.05rem; max-width: 62ch; margin: 14px 0 0; }
.lead { font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: var(--ink-dim); max-width: 42ch; }

/* thinking tick target: JS pins the width in ch so the line never reflows */
.think { display: inline-block; text-align: left; }

/* blinking block cursor: AT MOST ONE per page (the page-hero one). While
   the interactive terminal input is focused, its native caret takes over
   and the page cursor pauses. */
.cursor {
  display: inline-block;
  width: 0.55em;
  height: 1em;
  margin-left: 0.12em;
  background: var(--cursor);
  vertical-align: baseline;
  transform: translateY(0.12em);
  animation: blink 1s steps(2, start) infinite;
}
body.term-live .cursor { animation: none; opacity: 0.35; }
@keyframes blink { to { visibility: hidden; } }
/* static block glyph for decorative terminal panels: never blinks */
.cursor-s {
  display: inline-block;
  width: 0.55em;
  height: 1em;
  margin-left: 0.12em;
  background: currentColor;
  opacity: 0.5;
  vertical-align: text-bottom;
}

/* ---- status, badges, pills ---------------------------------------------------- */
.status { font-family: var(--font-mono); font-weight: 600; white-space: nowrap; }
.status-ok { color: var(--link); }
.status-warn { color: var(--accent); }
.status-dim { color: var(--ink-dim); font-weight: 400; }

.badge {
  display: inline-block;
  font-family: var(--font-mono);
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: var(--accent);
  padding: 0.15rem 0.7rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pills { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin: 0 0 1rem; list-style: none; }
.pills li { margin: 0; }
.pill {
  display: inline-block;
  font-family: var(--font-mono);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-dim);
  padding: 0.2rem 0.7rem;
  font-size: 0.78rem;
  white-space: nowrap;
}

/* ---- connector logo strip ------------------------------------------------------
   Vendored simple-icons marks with official brand colours, contrast-checked
   per mode against the chip (--bg-2): glyphs fall back to ink where the
   brand colour is below 3:1. On white: Xero 2.38 and HubSpot 2.57 fail
   (ink fallback), others 3.30-14.00 pass. On dark #0A140C: Slack 1.34
   fails (ink fallback); WordPress 3.65, Stripe 4.00, Gmail 4.79, Google
   5.27, n8n 5.14, Zapier 5.70, Xero 7.89, HubSpot 7.31 pass. */
.logo-strip {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  padding: 0;
  margin: 0 0 0.75rem;
  list-style: none;
}
.logo-strip li { margin: 0; }
.logo-chip {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-2);
  padding: 0.7rem 0.85rem;
}
.logo-glyph { width: 22px; height: 22px; flex-shrink: 0; fill: currentColor; color: var(--ink); }
.logo-name { font-family: var(--font-mono); font-size: 0.82rem; color: var(--ink); }
.logo-tm { font-size: 0.78rem; color: var(--ink-dim); max-width: 72ch; }
.logo-stripe { color: #635BFF; }
.logo-gmail { color: #EA4335; }
.logo-google { color: #4285F4; }
.logo-slack { color: #4A154B; }
.logo-wordpress { color: #21759B; }
.logo-n8n { color: #EA4B71; }
.logo-zapier { color: #FF4F00; }
:root[data-theme="dark"] .logo-xero { color: #13B5EA; }
:root[data-theme="dark"] .logo-hubspot { color: #FF7A59; }
:root[data-theme="dark"] .logo-slack { color: var(--ink); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-xero { color: #13B5EA; }
  :root:not([data-theme="light"]) .logo-hubspot { color: #FF7A59; }
  :root:not([data-theme="light"]) .logo-slack { color: var(--ink); }
}

/* ---- buttons ---------------------------------------------------------------------
   Plain mono labels (round 7: the [ ] wrapping is gone site-wide - it read
   as confusing beside the ][ of AGENT ][). Trailing arrows stay. The CLI
   identity lives in the mono type and borders. */
.btn {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--link);
  background: transparent;
  border: 1px solid var(--link);
  border-radius: 9px;
  padding: 0.7rem 1.1rem;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover {
  color: var(--btn-ink);
  background: var(--link);
  box-shadow: 0 0 12px var(--glow);
}
.btn-primary { color: var(--btn-ink); background: var(--link); }
.btn-primary:hover { color: var(--link); background: transparent; }
.btn-sm { font-size: 0.78rem; padding: 0.45rem 0.75rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin: 28px 0 0; }

.link-arrow { font-weight: 600; }
.link-arrow::after { content: "\00A0\2192" / ""; }

/* ---- nav -------------------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.nav-in {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 3.6rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
/* brand: the FULL AGENT ][ tile wordmark - the exact hero-mark construction
   scaled down, aspect preserved (width stays auto; never letterboxed or
   stretched). NO ][-icon-plus-text combination: the ][ glyph alone lives in
   favicons and social icons only. The tiles are the one brand green
   (--bright #54B948, both modes) and sit DIRECTLY on the page surface: no
   chip, plate or backing in either mode (de-plated per round 6; the mark
   is decorative imagery inside an aria-labelled link, not text). */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  text-decoration: none;
  color: var(--head);
  white-space: nowrap;
}
.brand:hover, .brand:focus-visible { color: var(--link); }
.brand .brand-mark {
  display: block;
  height: 36px;
  width: auto;
  flex-shrink: 0;
}
.brand .brand-text {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}
.footer-brand .brand .brand-text { font-size: 1.15rem; }

.nav-menu { display: contents; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  list-style: none;
  margin: 0 0 0 auto;
  padding: 0;
}
.nav-links li { margin: 0; }
.nav-links a {
  text-decoration: none;
  color: var(--ink);
  font-size: 0.92rem;
}
.nav-links a:hover { color: var(--link); text-decoration: underline; }
.nav-links a[aria-current="page"] { color: var(--link); font-weight: 600; }

.nav-drop { position: relative; }
.nav-drop > summary {
  cursor: pointer;
  list-style: none;
  color: var(--ink);
  font-size: 0.92rem;
  white-space: nowrap;
}
.nav-drop > summary::-webkit-details-marker { display: none; }
.nav-drop > summary::after { content: " \25BE" / ""; color: var(--ink-dim); }
.nav-drop > summary:hover { color: var(--link); text-decoration: underline; }
.nav-drop-menu {
  position: absolute;
  top: calc(100% + 0.75rem);
  left: 50%;
  transform: translateX(-50%);
  min-width: 15rem;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.5rem 0;
  margin: 0;
  list-style: none;
  z-index: 120;
}
.nav-drop-menu li { margin: 0; }
.nav-drop-menu a {
  display: block;
  padding: 0.5rem 1rem;
  white-space: nowrap;
}
.nav-drop-menu a:hover { background: var(--hov); }

.nav-cta { white-space: nowrap; }
/* nav CTA is a .btn inside .nav-links; the link hover rule was winning
   and painting green text on a green fill. */
.nav-links a.btn:hover,
.nav-links a.btn:focus-visible {
  color: #fff;
  text-decoration: none;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--ink);
  cursor: pointer;
}
.theme-toggle:hover { color: var(--link); border-color: var(--link); }
.ico-sun { display: var(--disp-sun); }
.ico-moon { display: var(--disp-moon); }

.nav-toggle {
  display: none;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--link);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.45rem 0.7rem;
  cursor: pointer;
}

@media (max-width: 859px) {
  .nav-toggle { display: inline-block; }
  .theme-toggle { margin-left: auto; }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    padding: 0.5rem var(--gutter) 1rem; /* match the .wrap gutter */
  }
  .nav.open .nav-links { display: flex; }
  .nav-links a, .nav-drop > summary { display: block; padding: 0.6rem 0; }
  .nav-drop-menu {
    position: static;
    transform: none;
    min-width: 0;
    border: 0;
    border-left: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    padding: 0 0 0 1rem;
  }
  .nav-cta { margin: 0.75rem 0 0.25rem; text-align: center; }
}

/* ---- hero ------------------------------------------------------------------------- */
.hero { padding: clamp(48px, 8vw, 92px) 0 clamp(40px, 6vw, 72px); }
.hero-grid { display: grid; gap: clamp(28px, 5vw, 60px); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 960px) { .hero-grid { grid-template-columns: 1.05fr 0.95fr; } }
.hero h1 { margin: 18px 0 0; }

/* the AGENT ][ ascii logo - the recovered original: block letterforms with
   the six-band rainbow clipped through them ("the lines through it").
   Solid green fallback where background-clip:text is unsupported.
   Sits under the eyebrow, above the h1. */
.ascii-logo {
  font-family: var(--font-mono);
  font-size: clamp(0.5rem, 1.55vw, 0.82rem);
  line-height: 1.2;
  margin: 16px 0 0; /* spacing around the locked asset: 16px off the
                       eyebrow; the h1's 18px top margin carries below */
  display: inline-block;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none; /* hide the horizontal scrollbar thumb */
  color: var(--bright);
  text-shadow: none;
}
.ascii-logo::-webkit-scrollbar { display: none; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .ascii-logo {
    background-image: var(--stripe);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
.hero .sub { margin: 20px 0 0; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 28px; }
.hero-note { margin-top: 1.25rem; font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-dim); }
.hero-note b { color: var(--link); }

/* the hero visual: the de-plated mark sits DIRECTLY on the page surface
   (no dark screen chip behind it), with the live console beneath */
.hero-vis { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
.hero-mark { display: block; width: 100%; max-width: 28rem; height: auto; margin: 0 auto; }
.hero-vis .console { margin: 0; }

/* subpage hero: same vertical rhythm as the home hero - top and bottom
   padding so CTAs / leads are not flush against the next section edge.
   Typography is deliberately smaller than the home h1: subpages carry
   longer titles without the ascii logo, so the billboard scale reads
   oversized. */
.page-hero { padding: clamp(48px, 8vw, 92px) 0 clamp(40px, 6vw, 72px); }
.page-hero h1, .error-hero h1 {
  margin: 18px 0 0;
  font-size: clamp(1.75rem, 3.2vw, 2.35rem);
  letter-spacing: -0.02em;
}
.page-hero h1 .cursor, .error-hero h1 .cursor {
  width: 0.48em;
  height: 0.88em;
  transform: translateY(0.06em);
}
.page-hero h1 { max-width: 24ch; }
.page-hero .lead, .error-hero .lead { margin-top: 20px; }
.page-hero .btn-row { margin-top: 28px; }

/* ---- interactive terminal (agent2 console) ----------------------------------------
   Progressive enhancement: real input, no global key capture, output panel
   aria-live=polite. The output (echoed help + help listing) is static
   HTML so no-JS visitors still see it; only the input line and hint are
   revealed by JS. The primary console BOOTS like a machine: boot lines
   exist in the HTML but are display:none until JS replays them, so the
   settled/static/no-JS/reduced-motion state is always echoed help + help
   output + idle prompt, with zero layout shift (the panel height is
   bounded and scrolls internally). */
.console { margin: 1.5rem 0 0; }
.console .term-body { max-height: 16rem; overflow-y: auto; }
/* the hero console screen is a FIXED-height screen: revealed lines
   (display:none until .on during the boot) never change the panel's
   outer height, so the boot causes zero layout shift while the screen
   fills like a real console. Sized to fit BIOS + ASCII mark + help
   listing with no vertical scroll once the boot settles. */
.console-hero .term-body { height: 36.5rem; max-height: 36.5rem; overflow-y: auto; }
@media (max-width: 640px) {
  /* long BIOS lines wrap on narrow screens; give a little more room */
  .console-hero .term-body { height: 40.5rem; max-height: 40.5rem; }
}
.console-out .c-boot { display: none; font-size: 0.78rem; }
.console-out .c-blank { min-height: 1.17rem; } /* two line-breaks after status */
/* status tokens never break mid-bracket when a BIOS line wraps */
.term-body .t-ok, .term-body .t-warn, .term-body .t-err { white-space: nowrap; }
.console.is-booting .console-out .c-boot,
.console.played .console-out .c-boot { display: block; }
.console.is-booting .console-out .c-seq { display: none; }
.console.is-booting .console-out .c-seq.on { display: block; }
/* the boot's "help" is TYPED character by character by JS (round 7):
   no clip animation needed - the echo line reveals with an empty command
   span and JS fills it. Static, no-JS and reduced-motion states carry
   the full "agent2:~$ help" text in the HTML. */
/* the BIOS splash wordmark: an aria-hidden ASCII rendering of the
   AGENT ][ tile grid, terminal-native (the locked SVG marks are not
   involved). white-space: pre so it never wraps; term-body scrolls. */
.console-out .c-mark {
  white-space: pre;
  font-size: clamp(0.5rem, 1.9vw, 0.72rem);
  line-height: 1.25;
  color: var(--term-td);
}
.term-bar .boot-skip {
  display: none;
  margin-left: auto;
  background: transparent;
  border: 0;
  color: var(--term-dim);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}
.console.is-booting .boot-skip { display: inline-block; }
/* idle prompt cursor: THE one blinking cursor on the home page. It lives
   on the fixed-dark screen so it uses the brand token (7.99:1). Hidden
   while the input is focused (native caret takes over) or holds text. */
.console-line .cursor { background: var(--bright); flex-shrink: 0; margin-left: 0; }
.console-line.live .cursor, .console-line.has-text .cursor { visibility: hidden; }
.console-line {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1rem;
  border-top: 1px solid var(--term-line);
}
.console-ps {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--term-green);
  font-weight: 600;
  white-space: nowrap;
}
.console-ps .ps-path { color: var(--term-blue); font-weight: 400; }
.console-input {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 0.85rem; /* same face size as .console-ps (agent2:~$) */
  font-weight: 400;   /* not bold - prompt stays 600 */
  color: var(--term-dim); /* grey, not the green prompt */
  background: transparent;
  border: 0;
  padding: 0.1rem 0;
  caret-color: var(--bright);
}
.console-input:focus { outline: none; }
.console-line:focus-within { background: var(--term-bar); }
.console-hint {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-dim);
  margin: 0.5rem 0 0;
}
.console-out { display: block; }
.console-out:empty { display: none; }
.console-out .term-line a { color: var(--term-blue); }
.console-out .term-line a:hover { color: var(--term-mint); }

/* ---- panels ------------------------------------------------------------------------ */
.panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-2);
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
}
.panel-grid { display: grid; gap: var(--gap); grid-template-columns: 1fr; margin-bottom: 1rem; }
@media (min-width: 640px) { .panel-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .panel-grid { grid-template-columns: repeat(3, 1fr); } }
/* a terminal living as a grid column (the memory section's 3rd column):
   flush bottom, stretched to match its sibling panels */
.panel-grid > .term { margin-bottom: 0; }
.panel-title { font-size: 1.22rem; margin-bottom: 0.6rem; } /* card-title
   scale regardless of h2/h3 semantics (group card scale) */
.panel-title::before { content: "> " / ""; font-family: var(--font-mono); color: var(--link); }
.panel-tag {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  margin-bottom: 0.75rem;
}
.panel-body { color: var(--ink); font-size: 0.95rem; margin: 0 0 1rem; }
.panel-body:last-child { margin-bottom: 0; }
.panel-link { margin-top: auto; font-size: 0.9rem; }
.panel-cta { margin-top: auto; align-self: flex-start; }

/* bare column headings inside content grids (headings are margin 0
   globally, so the context carries the rhythm) */
.grid-2 > div > h3, .grid-3 > div > h3 { margin: 1.4rem 0 0.5rem; }
.grid-2 > div > h3:first-child, .grid-3 > div > h3:first-child { margin-top: 0; }

/* ---- lists -------------------------------------------------------------------------- */
.list-plus, .list-x, .checklist { list-style: none; padding: 0; margin: 0 0 1rem; }
/* 2.4rem gap between marker and text (round 6): same rhythm on every
   bracket list, but only [x] is red - [+] and checks stay green */
.list-plus li, .list-x li, .checklist li { padding-left: 2.4rem; position: relative; margin-bottom: 0.5rem; }
.list-plus li::before, .checklist li::before {
  content: "[+]";
  font-family: var(--font-mono);
  position: absolute;
  left: 0;
  color: var(--link);
  font-weight: 600;
}
.list-x li::before {
  content: "[x]";
  font-family: var(--font-mono);
  position: absolute;
  left: 0;
  color: var(--pop-red);
  font-weight: 600;
}

/* ls-style directory listing */
.file-list { list-style: none; padding: 0; margin: 0 0 1rem; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.file-list li { margin: 0; }
.file-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.15rem 1.25rem;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}
.file-list li:last-child .file-item { border-bottom: 0; }
.file-name { font-family: var(--font-mono); font-weight: 600; color: var(--link); white-space: nowrap; }
.file-desc { color: var(--ink-dim); font-size: 0.9rem; }
@media (min-width: 720px) {
  .file-item { grid-template-columns: 16.5rem 1fr; align-items: baseline; column-gap: 2.25rem; }
  .file-desc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ---- steps --------------------------------------------------------------------------- */
.steps { list-style: none; counter-reset: step; padding: 0; margin: 0 0 1rem; display: grid; gap: var(--gap); grid-template-columns: 1fr; }
@media (min-width: 720px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); padding: 1.25rem; margin: 0; }
.step-num {
  display: inline-block;
  font-family: var(--font-mono);
  color: var(--link);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  margin-bottom: 0.6rem;
}
.step-title { font-size: 1.22rem; margin-bottom: 0.5rem; }
.step-body { font-size: 0.95rem; color: var(--ink-dim); margin: 0; }

/* ---- pricing tiers --------------------------------------------------------------------- */
.tiers { display: grid; gap: var(--gap); grid-template-columns: 1fr; margin-bottom: 1rem; }
@media (min-width: 900px) { .tiers { grid-template-columns: repeat(3, 1fr); } }
.tier {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-2);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  position: relative;
}
.tier-featured { border-color: var(--link); background: var(--tint-2); }
.tier-badge {
  position: absolute;
  top: -0.8rem;
  right: 1rem;
  font-family: var(--font-mono);
  background: var(--bg);
  border: 1px solid var(--link);
  border-radius: 999px;
  color: var(--link);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.15rem 0.6rem;
}
.tier-name { font-size: 1.15rem; margin-bottom: 0.35rem; } /* group tier
   scale regardless of h2/h3 semantics */
.tier-price {
  font-family: var(--font-mono);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--head);
  line-height: 1.2;
}
.tier-per { font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-dim); font-weight: 400; }
.tier-desc { color: var(--ink-dim); font-size: 0.9rem; margin: 0.5rem 0 1rem; }
.tier-list { list-style: none; padding: 0; margin: 0 0 1.5rem; font-size: 0.92rem; }
.tier-list li { padding-left: 1.4rem; position: relative; margin-bottom: 0.45rem; }
.tier-list li::before { content: "+"; font-family: var(--font-mono); position: absolute; left: 0; color: var(--link); font-weight: 600; }
.tier-cta { margin-top: auto; align-self: stretch; text-align: center; }
.tier-note { font-size: 0.82rem; color: var(--ink-dim); margin-top: 0.75rem; }
.fineprint { font-size: 0.85rem; color: var(--ink-dim); max-width: 72ch; }

/* ---- terminal windows (fixed dark screens, both modes) --------------------------------- */
.term {
  border: 1px solid var(--term-line);
  border-radius: var(--radius);
  background: var(--term-bg);
  margin-bottom: 1rem;
  overflow: hidden;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.term:hover { transform: translateY(-2px); border-color: var(--term-td); }
.term-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--term-bar);
  border-bottom: 1px solid var(--term-line);
  padding: 0.5rem 0.9rem;
}
.term-dots { color: var(--term-dim); font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.2em; }
.term-title { color: var(--term-dim); font-family: var(--font-mono); font-size: 0.75rem; }
.term-body {
  font-family: var(--font-mono);
  color: var(--term-ink);
  padding: 1rem;
  font-size: 0.85rem;
  line-height: 1.5; /* single-spaced console output (round 6): the only
                       vertical rhythm is the line-height itself */
  overflow-x: auto;
  margin: 0;
}
.term-line { display: block; white-space: pre-wrap; }
/* ANSI classes: colour via tokens only, statuses keep bracket text */
.t-cmd { color: var(--term-green); font-weight: 600; }
.t-out { color: var(--term-ink); }
.t-dim { color: var(--term-dim); }
.t-ok { color: var(--term-green); font-weight: 600; }
.t-warn { color: var(--term-amber); font-weight: 600; }
.t-err { color: var(--term-red); font-weight: 600; }
.t-path { color: var(--term-blue); }
.t-val { color: var(--term-mint); }
.t-td { color: var(--term-td); }

/* decorative ANSI art bands (aria-hidden, pre, overflow-safe). Always sit
   on the dark screen chip so every pop stays >= 3:1 in both modes. */
.ansi-box { overflow-x: auto; }
.ansi-band { padding: 0.9rem 1.1rem; margin: 0 0 1.5rem; }
.ansi-band:hover { transform: none; }
.ansi-art {
  font-family: var(--font-mono);
  font-size: clamp(0.55rem, 1.6vw, 0.8rem);
  line-height: 1.25;
  margin: 0;
  white-space: pre;
  text-align: center;
}
.a-g1 { color: var(--term-green); }
.a-g2 { color: var(--term-td); }
.a-g3 { color: var(--term-mint); }
.a-bl { color: var(--term-blue); }
.a-am { color: var(--term-amber); }
.a-or { color: var(--term-orange); }
.a-rd { color: var(--term-red); }
.a-ye { color: var(--term-yellow); }
.a-dm { color: var(--term-dim); }

/* ---- .memflow: horizontal AGENT ][ delivery loop (L1-L5) --------------------
   GLOBAL COMPONENT (round 10, 2026-07-20): horizontal one-flow diagram.
   L1 and L5 are bookends; L2-L4 sit inside a branded AGENT ][ core band.
   Animated under-rail compounds L5 back into L2. Fully namespaced via --mf-*.
   Stacks on narrow viewports. Motion respects prefers-reduced-motion. */
.memflow {
  --mf-surface: var(--bg-2);
  --mf-line: var(--line);
  --mf-ink: var(--ink);
  --mf-dim: var(--ink-dim);
  --mf-accent: var(--link);
  --mf-tag-ink: #FFFFFF;
  --mf-core: var(--tint, #E9F6E5);
  margin: var(--flow) auto 0;
  max-width: none;
}
.memflow-rail {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
  align-items: stretch;
}
.memflow-stage {
  list-style: none;
  background: var(--mf-surface);
  border: 1px solid var(--mf-line);
  border-radius: 12px;
  padding: 0.9rem 1rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}
.memflow-tag {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--mf-tag-ink);
  background: var(--mf-acc, var(--mf-accent));
  border-radius: 999px;
  padding: 0.18rem 0.55rem;
}
.memflow-name {
  font-size: 0.98rem;
  margin: 0;
  color: var(--mf-ink);
  letter-spacing: -0.01em;
}
.memflow-desc {
  margin: 0;
  font-size: 0.84rem;
  color: var(--mf-dim);
  max-width: none;
  line-height: 1.45;
}
.memflow-chips {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  max-width: none;
}
.memflow-chips li {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.03em;
  color: var(--mf-ink);
  border: 1px solid var(--mf-line);
  border-left: 2px solid var(--mf-acc, var(--mf-accent));
  background: var(--bg);
  border-radius: 4px;
  padding: 0.18rem 0.4rem;
}
.memflow-join {
  list-style: none;
  display: none; /* shown from md up as horizontal arrows */
  align-items: center;
  justify-content: center;
  color: var(--mf-accent);
  font-size: 1.25rem;
  line-height: 1;
  padding: 0;
}
.memflow-core {
  list-style: none;
  background: var(--mf-core);
  border: 1px solid var(--link);
  border-radius: 16px;
  padding: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}
.memflow-core-brand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 0.9rem;
}
.memflow-mark {
  display: block;
  height: 22px;
  width: auto;
  /* mark sits de-plated on the tint surface - never recolour */
}
.memflow-core-kicker {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--link);
}
.memflow-core-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.65rem;
}
.memflow-core .memflow-stage {
  background: var(--mf-surface);
}
/* animated return rail: L5 compounds back into L2 (your data) */
.memflow-return {
  position: relative;
  margin: 0.35rem 0 0;
  min-height: 2.6rem;
  padding-top: 0.15rem;
}
.memflow-return-rail {
  position: absolute;
  left: 18%;
  right: 4%;
  top: 0.15rem;
  height: 1.35rem;
  border: 1px dashed var(--mf-line);
  border-top: none;
  border-radius: 0 0 14px 14px;
  pointer-events: none;
}
:root.anim .memflow-return-rail::after {
  content: "";
  position: absolute;
  top: calc(100% - 2px);
  width: 0.55rem;
  height: 0.55rem;
  margin-top: -0.28rem;
  border-radius: 50%;
  background: var(--mf-accent);
  box-shadow: 0 0 0 3px rgba(0, 114, 101, 0.25);
  animation: mf-rail-h 2.8s ease-in-out infinite;
}
@keyframes mf-rail-h {
  0% { left: 96%; opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { left: 0%; opacity: 0; }
}
.memflow-return-label {
  position: relative;
  z-index: 1;
  margin: 1.35rem 0 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mf-dim);
  background: var(--bg);
  width: max-content;
  max-width: calc(100% - 2rem);
  margin-left: auto;
  margin-right: auto;
  padding: 0 0.55rem;
}
.memflow-return-icon {
  color: var(--mf-accent);
  margin-right: 0.3rem;
}
.memflow-skills {
  margin: 0.85rem 0 0;
  font-size: 0.88rem;
  color: var(--mf-dim);
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.35rem 0.85rem;
  max-width: none;
}
.memflow-skills a { color: var(--mf-accent); }
.memflow-skills-own {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--link);
}
.memflow-own {
  max-width: none;
  margin: 2rem 0 2.25rem;
  padding: 1.15rem 1.35rem;
  border: 1px solid var(--link);
  border-radius: 12px;
  background: var(--tint, #E9F6E5);
}
.memflow-own-kicker {
  margin: 0 0 0.25rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--link);
}
.memflow-own-body {
  margin: 0;
  font-size: 1.02rem;
  color: var(--head);
  max-width: none;
}
#suite .grid-2 {
  gap: 1.5rem;
  column-gap: 3rem;
}
#suite .fineprint {
  margin-top: 2rem;
}
.mf-1 { --mf-acc: var(--pop-blue, #0053E2); }
.mf-2 { --mf-acc: var(--bright); --mf-tag-ink: #050A06; } /* bright green needs dark ink */
.mf-3 { --mf-acc: var(--link); }
.mf-4 { --mf-acc: var(--pop-amber, #7D5B13); }
.mf-5 { --mf-acc: var(--pop-red, #C70025); }
/* dark mode: --link becomes TD bright, so L3 tags need dark ink too */
[data-theme="dark"] .mf-3 { --mf-tag-ink: #050A06; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mf-3 { --mf-tag-ink: #050A06; }
}

:root.anim .memflow-stage,
:root.anim .memflow-core {
  animation: mf-rise 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
:root.anim .mf-1 { animation-delay: 40ms; }
:root.anim .memflow-core { animation-delay: 120ms; }
:root.anim .mf-5 { animation-delay: 280ms; }
:root.anim .memflow-own {
  animation: mf-rise 600ms cubic-bezier(0.22, 1, 0.36, 1) 360ms both;
}
@keyframes mf-rise {
  from { opacity: 0; transform: translateY(0.45rem); }
  to { opacity: 1; transform: translateY(0); }
}

/* horizontal one-flow from tablet up */
@media (min-width: 900px) {
  .memflow-rail {
    grid-template-columns: minmax(9.5rem, 1fr) auto minmax(0, 2.6fr) auto minmax(9.5rem, 1fr);
    gap: 0.55rem;
    align-items: stretch;
  }
  .memflow-join { display: flex; }
  .memflow-core-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
  }
  .memflow-stage { height: 100%; }
  .memflow-return-rail {
    left: 20%;
    right: 3%;
  }
}

@media (max-width: 899px) {
  .memflow-return-rail {
    left: 8%;
    right: 8%;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root.anim .memflow-stage,
  :root.anim .memflow-core,
  :root.anim .memflow-own { animation: none; }
  :root.anim .memflow-return-rail::after { animation: none; display: none; }
}

/* dark mode: core band uses surface tint already swapped via --tint */
[data-theme="dark"] .memflow-core,
[data-theme="dark"] .memflow-own {
  background: var(--bg-2);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .memflow-core,
  :root:not([data-theme="light"]) .memflow-own {
    background: var(--bg-2);
  }
}

/* ---- quotes ------------------------------------------------------------------------------ */
.quote {
  border-left: 3px solid var(--link);
  margin: 0 0 1rem;
  padding: 0.5rem 0 0.5rem 1.25rem;
  font-size: 1.05rem;
  max-width: 60ch;
}
.quote-src { display: block; color: var(--ink-dim); font-size: 0.85rem; margin-top: 0.5rem; }

/* ---- FAQ ---------------------------------------------------------------------------------- */
.faq { margin-bottom: 1rem; }
.faq-item { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); margin-bottom: 0.75rem; }
.faq-item > summary {
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  color: var(--head);
  padding: 0.9rem 1.1rem;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::before { content: "[+] " / ""; font-family: var(--font-mono); color: var(--link); }
.faq-item[open] > summary::before { content: "[-] " / ""; }
.faq-body { padding: 0 1.1rem 1rem; }
.faq-body p:last-child { margin-bottom: 0; }

/* ---- forms ---------------------------------------------------------------------------------- */
#form .grid-2 {
  gap: 1.5rem;
  column-gap: clamp(2.5rem, 5vw, 4rem);
}
.form { max-width: 40rem; }
.field { margin-bottom: 1.1rem; }
.field label {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--head);
  margin-bottom: 0.35rem;
}
.field input[type="text"],
.field input[type="email"],
.field select,
.field textarea {
  width: 100%;
  font-family: var(--font-ui);
  font-size: 1rem;
  color: var(--ink);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.65rem 0.75rem;
}
.field textarea { min-height: 9rem; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 2px dashed var(--focus);
  outline-offset: 2px;
  border-color: var(--link);
}
.field ::placeholder { color: var(--ink-dim); opacity: 1; }
.field-row { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .field-row { grid-template-columns: repeat(2, 1fr); } }
.form-check { display: flex; align-items: flex-start; gap: 0.6rem; margin-bottom: 1.1rem; }
.form-check input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.2rem;
  accent-color: var(--link);
  flex-shrink: 0;
}
.form-check label { font-size: 0.9rem; }
.form-note { font-size: 0.85rem; color: var(--ink-dim); margin-bottom: 1.25rem; }
.form-actions { margin-top: 1.5rem; }

/* ---- prose (group long-form scale, per uplinkd.com .prose) ------------------------------------ */
.prose h2 { margin: 2.2rem 0 0.6rem; font-size: 1.45rem; }
.prose h3 { margin: 1.6rem 0 0.4rem; font-size: 1.12rem; }
.prose ul { list-style: none; padding-left: 1.4rem; }
.prose ul li { position: relative; }
.prose ul li::before { content: "*"; font-family: var(--font-mono); position: absolute; left: -1.4rem; color: var(--link); }

/* ---- notices, CTA band ------------------------------------------------------------------------- */
.notice {
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--bg-2);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  font-size: 0.92rem;
}
/* round 7: the CTA band is the Django-style anchor surface (#0C4B33) in
   light mode; dark mode keeps the CRT band. All pairs AA-computed (see
   header block). */
.cta-band {
  border-top: 1px solid var(--band-line);
  border-bottom: 1px solid var(--band-line);
  background: var(--band-bg);
  padding: clamp(48px, 7vw, 84px) 0; /* the one section rhythm */
  text-align: center;
}
/* last block in main: keep section padding; drop the footer gap only */
main:has(> .cta-band:last-child) + .footer { margin-top: 0; }
.cta-band .btn-row { justify-content: center; }
.cta-band p { margin-left: auto; margin-right: auto; }
.cta-band h2 { color: var(--band-head); }
.cta-band .section-sub { color: var(--band-sub); }
.cta-band .prompt { color: var(--band-sub); }
.cta-band .prompt::before { color: var(--band-pfx); }
.cta-band .btn { color: var(--band-btn); border-color: var(--band-btn); }
.cta-band .btn:hover { color: var(--band-btn-ink); background: var(--band-btn); }
.cta-band .btn-primary { color: var(--band-btn-ink); background: var(--band-btn); }
.cta-band .btn-primary:hover { color: var(--band-btn); background: transparent; }
.cta-band :focus-visible { outline-color: var(--band-focus); }

/* ---- footer ------------------------------------------------------------------------------------- */
.footer { padding: 0 0 2rem; margin-top: 4rem; border-top: 1px solid var(--line); }
.footer-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; margin: 3rem 0 2rem; }
@media (min-width: 720px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.footer-tag { color: var(--ink-dim); font-size: 0.9rem; margin-top: 0.75rem; }
.footer-col-title {
  font-family: var(--font-mono);
  color: var(--link);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 0.75rem;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 0.45rem; }
.footer-col a { text-decoration: none; font-size: 0.92rem; color: var(--ink); }
.footer-col a:hover { color: var(--link); text-decoration: underline; }
.footer-line {
  border-top: 1px solid var(--line);
  padding-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  justify-content: space-between;
  color: var(--ink-dim);
  font-size: 0.85rem;
}
.footer-legal { color: var(--ink-dim); font-size: 0.85rem; }

/* ---- 404 ----------------------------------------------------------------------------------------- */
.error-hero { padding: clamp(48px, 8vw, 92px) 0 clamp(40px, 6vw, 72px); }
.error-code {
  font-family: var(--font-mono);
  font-size: clamp(3rem, 12vw, 5.5rem);
  font-weight: 600;
  color: var(--head);
  line-height: 1;
  margin-bottom: 1rem;
}

/* ---- reduced motion -------------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .cursor { animation: none; }
  :root.anim .prompt:not(.typed) { visibility: visible; }
  :root.anim .prompt.typed { animation: none; }
  :root.anim .prompt.typed::after { animation: none; background: transparent; }
  .term { transition: none; }
  .term:hover { transform: none; }
  html { scroll-behavior: auto; }
}