/* ==========================================================================
   pagina white, design tokens
   Everline, light-first. White + evergreen ink + lime + charcoal.

   Layer 1  primitives   --p-*        raw values, never used in components
   Layer 2  semantic     --ink ...    the SAME names as the original page so
                                      the component CSS ports 1:1. The names
                                      keep their ROLE, the values invert:
                                      --ink   = page background (was near-black, now paper)
                                      --paper = primary text     (was cream, now ink)
                                      --carbon = card surface    (was dark card, now white)
   Layer 3  component    --code-*, --row-*, --table-head, --contrast-* etc.

   Current palette: analysis/dodo-palette-update.md. Original audits remain archived.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ------------------------------------------------------------------
     LAYER 1  PRIMITIVES
     ------------------------------------------------------------------ */

  /* Neutral surfaces, cool white rather than warm paper. */
  --p-paper-0:   #FFFFFF;
  --p-paper-50:  #FBFBFB;
  --p-paper-100: #FFFFFF;
  --p-paper-200: #F7F9F7;
  --p-paper-300: #E7E7E7;
  --p-paper-400: #BBC4BD;

  /* Evergreen text, sampled from the reference's #00160D primary ink. */
  --p-ink-950: #00160D;
  --p-ink-900: #193027;
  --p-ink-800: #46544C;
  --p-ink-700: #536058;
  --p-ink-600: #626B65;
  --p-ink-500: #7B857D;

  /* Neutral charcoal for contrast sections and code. */
  --p-midnight-950: #0D0D0D;
  --p-midnight-900: #131513;
  --p-midnight-850: #181B18;
  --p-midnight-800: #1C201D;
  --p-midnight-750: #202521;
  --p-midnight-700: #252B26;
  --p-midnight-650: #2B322C;
  --p-cream-100: #F8FAF7;
  --p-cream-300: #C4CEC3;
  --p-cream-500: #A6B1A4;
  --p-cream-600: #9BA797;

  /* Lime fills and a darker companion for text on white. */
  --p-lime-900: #23450D;
  --p-lime-800: #365D14;
  --p-lime-500: #B7EC18;
  --p-lime-400: #C6FE1E;
  --p-lime-300: #DAFF79;
  --p-lime-100: #EAF8CD;
  --p-lime-50:  #F1F8E6;
  --p-mint-50: #E9F7EE;
  --p-lavender-50: #F0EDF9;

  /* Status and syntax remain distinguishable from decorative lime. */
  --p-green-600: #20824C;
  --p-green-400: #6DDD9B;
  --p-mint-200: #AFE5BE;
  --p-rose-200: #EDBAD8;
  --p-brick-600: #BE352B;
  --p-brick-300: #FDA49B;

  /* LAYER 2 — SEMANTIC TOKENS */
  --ink:      var(--p-paper-100);
  --ink-2:    var(--p-paper-200);
  --carbon:   var(--p-paper-0);
  --carbon-2: var(--p-paper-50);
  --paper:    var(--p-ink-950);
  --paper-2:  var(--p-ink-900);
  --bone:     var(--p-ink-800);
  --mute-2:   var(--p-ink-700);
  --mute:     var(--p-ink-600);

  /* Text/link accent must stay dark enough on light surfaces. */
  --signal:        var(--p-lime-800);
  --signal-warm:   var(--p-lime-900);
  --signal-tint:   var(--p-lime-50);
  --signal-tint-2: var(--p-lime-100);
  /* Bright lime is reserved for fills, with evergreen labels. */
  --action-bg:       var(--p-lime-400);
  --action-bg-hover: var(--p-lime-500);
  --action-text:     var(--p-ink-950);

  --alert:        var(--p-green-600);
  --alert-bright: var(--p-green-400);
  --alert-glow:   rgba(32, 130, 76, 0.22);
  --alert-pulse:  rgba(32, 130, 76, 0.50);
  --alert-pulse-bright: rgba(109, 221, 155, 0.55);
  --danger: var(--p-brick-600);
  --danger-contrast: var(--p-brick-300);
  --line:        var(--p-paper-300);
  --line-soft:   rgba(0, 22, 13, 0.06);
  --line-strong: var(--p-paper-400);
  --line-input:  var(--p-ink-500);

  /* LAYER 3 — COMPONENT / CONTEXT TOKENS */
  --contrast-bg:          var(--p-midnight-950);
  --contrast-surface:     var(--p-midnight-800);
  --contrast-surface-2:   var(--p-midnight-700);
  --contrast-text:        var(--p-cream-100);
  --contrast-text-2:      var(--p-cream-300);
  --contrast-mute:        var(--p-cream-500);
  --contrast-line:        rgba(255, 255, 255, 0.10);
  --contrast-line-strong: rgba(255, 255, 255, 0.40);
  --contrast-signal:      var(--p-lime-400);
  --contrast-signal-2:    var(--p-lime-300);

  --featured-bg:         var(--action-bg);
  --featured-bg-hover:   var(--action-bg-hover);
  --featured-text:       var(--p-ink-950);
  --featured-text-2:     var(--p-lime-900);
  --featured-line:       rgba(0, 22, 13, 0.40);
  --featured-action-bg:  var(--p-ink-950);
  --featured-action-hover: var(--p-ink-900);
  --featured-action-text: var(--p-lime-400);

  --code-bg:   var(--p-midnight-950);
  --code-bar:  var(--p-midnight-850);
  --code-text: var(--p-cream-100);
  --code-com:  var(--p-cream-600);
  --code-cmd:  var(--p-lime-300);
  --code-str:  var(--p-mint-200);
  --code-key:  var(--p-rose-200);
  --code-line: rgba(255, 255, 255, 0.08);
  --table-head: var(--p-midnight-900);
  --row-alt:    var(--p-midnight-750);
  --row-hover:  var(--p-midnight-650);
  --row-line:   rgba(255, 255, 255, 0.08);

  --hl:          rgba(198, 254, 30, 0.42);
  --hl-contrast: rgba(198, 254, 30, 0.25);
  --glow-1:    rgba(205, 193, 239, 0.28);
  --glow-2:    rgba(193, 236, 210, 0.32);
  --glow-card: rgba(198, 254, 30, 0.055);
  --glow-cta:  rgba(198, 254, 30, 0.15);
  --scanline:  rgba(0, 22, 13, 0.022);
  --nav-bg:    rgba(255, 255, 255, 0.90);
  --backdrop:  rgba(0, 22, 13, 0.40);

  --selection-bg:   var(--action-bg);
  --selection-text: var(--action-text);
  --focus-ring:          0 0 0 2px var(--ink), 0 0 0 4px var(--signal);
  --focus-ring-contrast: 0 0 0 2px var(--contrast-bg), 0 0 0 4px var(--contrast-signal);
  --focus-ring-featured: 0 0 0 2px var(--featured-bg), 0 0 0 4px var(--featured-text);

  /* ------------------------------------------------------------------
     TYPOGRAPHY
     ------------------------------------------------------------------ */
  --font-display: "Newsreader", "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
  --font-body:    "Schibsted Grotesk", "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "DM Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;

  /* Optical sizes for Newsreader (axis range 6..72) */
  --opsz-hero:    "opsz" 72;
  --opsz-title:   "opsz" 60;
  --opsz-heading: "opsz" 36;
  --opsz-text:    "opsz" 18;

  /* ------------------------------------------------------------------
     LAYOUT
     ------------------------------------------------------------------ */
  --maxw:   1280px;
  --pad-x:  clamp(20px, 5vw, 64px);
  --radius:     4px;
  --radius-md:  8px;
  --radius-lg:  14px;
  --radius-xl:  24px;
  --radius-pill: 999px;

  /* ------------------------------------------------------------------
     MOTION
     ------------------------------------------------------------------ */
  --ease-out:    cubic-bezier(.22, .61, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 700ms;

  /* ------------------------------------------------------------------
     SHADOWS  (ambient, diffused, tinted to evergreen ink)
     ------------------------------------------------------------------ */
  --shadow-xs: 0 1px 2px rgba(0, 22, 13, 0.05);
  --shadow-sm: 0 1px 2px rgba(0, 22, 13, 0.04),
               0 4px 12px rgba(0, 22, 13, 0.05);
  --shadow-md: 0 2px 4px rgba(0, 22, 13, 0.04),
               0 12px 32px -8px rgba(0, 22, 13, 0.10);
  --shadow-lg: 0 4px 8px rgba(0, 22, 13, 0.04),
               0 32px 64px -24px rgba(0, 22, 13, 0.18);
  --shadow-inset:    inset 0 1px 0 rgba(255, 255, 255, 0.70);
  --shadow-contrast: 0 24px 48px -16px rgba(13, 13, 13, 0.45);
  --shadow-signal:   0 8px 24px -8px rgba(115, 149, 23, 0.25);
}

/* ==========================================================================
   BRIDGE: names used by analysis/structure-motion.md (§0.2 / §0.3) mapped
   onto the palette above. The original's light "islands" (channels, pricing,
   CTA card) are now the midnight contrast sections, so the "paper-*" island
   tokens resolve to --contrast-* values. Values live above; never edit here.
   ========================================================================== */
:root {
  /* motion aliases */
  --ease:        ease;
  --dur-press:   120ms;
  --dur-hover:   200ms;
  --dur-ui:      250ms;
  --dur-drawer:  350ms;
  --dur-reveal:  700ms;
  --dur-rise:    900ms;

  /* chrome heights & stacking */
  --status-h:   32px;
  --nav-h:      83px;
  --z-nav:      50;
  --z-status:   60;
  --z-backdrop: 65;
  --z-drawer:   70;
  --z-skip:     100;

  /* island / context aliases */
  --paper-card:  var(--contrast-surface);
  --paper-head:  var(--table-head);
  --paper-zebra: var(--row-alt);
  --paper-hover: var(--row-hover);
  --ink-text-2:  var(--contrast-text-2);
  --ink-text-3:  var(--contrast-mute);
  --backdrop-bg: var(--backdrop);
  --kicker-bg:   var(--carbon-2);

  /* accent alphas */
  --signal-a05: var(--glow-card);
  --signal-a10: var(--glow-1);
  --signal-a35: var(--hl);
  --signal-a40: var(--glow-cta);
  --signal-a55: var(--hl-contrast);
  --alert-a08:  var(--glow-2);
  --alert-a00:  rgba(32, 130, 76, 0);
  --alert-bright-a00: rgba(109, 221, 155, 0);
}
/* ==========================================================================
   base.css — reset, utilities and every component shared by more than one
   partial (spec: structure-motion.md §B, §C.10, §C.21, §C.24, §D.2, §D.4,
   §D.11, §E.4, §F.2). Values come only from tokens.css; no colour literals.

   CONTEXT HOOK (read this before styling anything inside a dark box)
   ------------------------------------------------------------------
   The page is light-first. Six "midnight" contexts (.channels, .pricing,
   .cta-card, .mobile-menu, .code-card, .status-bar) and two "featured"
   ultramarine contexts (.ch-card-feat, .pt-featured) recolour the shared
   components through inherited custom properties named --ctx-*. The shared
   components below read them with a paper fallback:

     --ctx-signal-bg / -fg / -bg-hover / -fg-hover / -shadow-hover  (.btn-signal)
     --ctx-line-border / -fg / -border-hover / -bg-hover / -fg-hover (.btn-line)
     --ctx-ghost-fg / -fg-hover                                      (.btn-ghost)
     --ctx-ring                                                      (:focus-visible)
     --ctx-dot / -dot-pulse / -dot-pulse-end / -dot-glow              (.dot.live)
     --ctx-tag / -title / -accent / -hl / -sub                        (.section-head family)

   Section files must NOT redefine .btn-*, .dot.live, .section-tag,
   .section-title, .section-title em, .hl or .section-sub for these contexts:
   the two selector lists in the CONTEXTS block already do it. A one-off
   surface (e.g. .ch-card-cta) can opt in by setting the --ctx-* it needs.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
  font-optical-sizing: auto;
  font-feature-settings: "kern", "liga", "calt";
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

[hidden] { display: none !important; }

/* Selection (C.21): lime and evergreen, inverted on featured lime surfaces */
::selection {
  background: var(--selection-bg);
  color: var(--selection-text);
}
.channels ::selection,
.pricing ::selection,
.cta-card ::selection,
.mobile-menu ::selection,
.code-card ::selection,
.status-bar ::selection {
  background: var(--contrast-signal);
  color: var(--contrast-bg);
}
.ch-card-feat ::selection,
.pt-featured ::selection {
  background: var(--featured-text);
  color: var(--featured-bg);
}

/* --------------------------------------------------------------------------
   2. Utilities (B.9)
   -------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 0;
  left: var(--pad-x);
  z-index: var(--z-skip);
  padding: 10px 14px;
  background: var(--contrast-bg);
  color: var(--contrast-signal);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  transform: translateY(-120%);
}
.skip-link:focus-visible {
  position: fixed;
  transform: none;
  outline: 2px solid transparent;
  box-shadow: var(--focus-ring-contrast);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

/* Anchors clear the sticky status-bar + nav (S8) */
section[id],
[id] {
  scroll-margin-top: calc(var(--status-h) + var(--nav-h) + 16px);
}

/* --------------------------------------------------------------------------
   3. Buttons (B.1, D.2) — colours flow through --btn-* locals
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: transparent;
  --btn-fg: currentColor;
  --btn-border: transparent;
  --btn-bg-hover: var(--btn-bg);
  --btn-fg-hover: var(--btn-fg);
  --btn-border-hover: var(--btn-border);
  --btn-shadow-hover: none;

  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  border-radius: var(--radius-pill);
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--btn-fg);
  cursor: pointer;
  white-space: nowrap;
  transition:
    transform var(--dur-hover) var(--ease),
    background-color var(--dur-hover) var(--ease),
    border-color var(--dur-hover) var(--ease),
    color var(--dur-hover) var(--ease),
    box-shadow var(--dur-hover) var(--ease);
}
.btn-lg    { padding: 14px 22px; font-size: 15px; }
.btn-block { width: 100%; justify-content: center; }

.btn-signal {
  --btn-bg:           var(--ctx-signal-bg, var(--action-bg));
  --btn-fg:           var(--ctx-signal-fg, var(--action-text));
  --btn-border:       var(--btn-bg);
  --btn-bg-hover:     var(--ctx-signal-bg-hover, var(--action-bg-hover));
  --btn-fg-hover:     var(--ctx-signal-fg-hover, var(--btn-fg));
  --btn-border-hover: var(--btn-bg-hover);
  --btn-shadow-hover: var(--ctx-signal-shadow-hover, var(--shadow-signal));
}
.btn-line {
  --btn-bg:           transparent;
  --btn-fg:           var(--ctx-line-fg, var(--paper));
  --btn-border:       var(--ctx-line-border, var(--line-input));
  --btn-bg-hover:     var(--ctx-line-bg-hover, transparent);
  --btn-fg-hover:     var(--ctx-line-fg-hover, var(--btn-fg));
  --btn-border-hover: var(--ctx-line-border-hover, var(--paper));
}
.btn-ghost {
  --btn-bg:       transparent;
  --btn-fg:       var(--ctx-ghost-fg, var(--paper));
  --btn-fg-hover: var(--ctx-ghost-fg-hover, var(--signal-warm));
}

/* Colour hovers are not gated (1:1 with the original) */
.btn:hover {
  background: var(--btn-bg-hover);
  color: var(--btn-fg-hover);
  border-color: var(--btn-border-hover);
}
.btn span[aria-hidden] {
  display: inline-block;
  transition: transform var(--dur-ui) var(--ease);
}

/* Anything that moves waits for a real pointer */
@media (hover: hover) and (pointer: fine) {
  .btn-signal:hover {
    transform: translateY(-1px);
    box-shadow: var(--btn-shadow-hover);
  }
  .btn:hover span[aria-hidden] { transform: translate(2px, -2px); }
}

/* D.2 — press state. Must stay after every :hover transform above. */
.btn:active {
  transform: scale(.98);
  transition-duration: var(--dur-press);
}

/* --------------------------------------------------------------------------
   4. Kicker + live dot (B.2, B.3)
   -------------------------------------------------------------------------- */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--kicker-bg);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mute-2);
}

.dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mute);
  flex-shrink: 0;
}
.dot.live {
  --dot-pulse:     var(--ctx-dot-pulse, var(--alert-pulse));
  --dot-pulse-end: var(--ctx-dot-pulse-end, var(--alert-a00));
  --dot-glow:      var(--ctx-dot-glow, var(--alert-glow));
  background: var(--ctx-dot, var(--alert));
  box-shadow: 0 0 0 0 var(--dot-glow);
  animation: pulse 1.6s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 var(--dot-pulse); }
  70%  { box-shadow: 0 0 0 10px var(--dot-pulse-end); }
  100% { box-shadow: 0 0 0 0 var(--dot-pulse-end); }
}

/* --------------------------------------------------------------------------
   5. Section heads (B.4, palette §3.4)
   -------------------------------------------------------------------------- */
.section-head {
  max-width: var(--maxw);
  margin: 0 auto 56px;
  padding-inline: var(--pad-x);
  text-align: center;
}
.section-head-left {
  text-align: left;
  padding-inline: 0;
}
.section-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ctx-tag, var(--signal));
  margin-bottom: 18px;
}
.section-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(36px, 5.6vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  font-variation-settings: var(--opsz-title);
  color: var(--ctx-title, currentColor);
  margin-bottom: 18px;
  text-wrap: balance;
}
.section-title em {
  font-style: italic;
  font-weight: 300;
  color: var(--ctx-accent, var(--signal));
}
.hl {
  background: linear-gradient(transparent 60%, var(--ctx-hl, var(--hl)) 60%);
}
.section-sub {
  max-width: 64ch;
  margin: 0 auto;
  color: var(--ctx-sub, var(--bone));
  font-size: 17px;
}
.section-head-left .section-sub { margin: 0; }

@media (max-width: 600px) {
  .section-head { margin-bottom: 36px; }
}

/* --------------------------------------------------------------------------
   6. Brand (A.2, S5) — used in the nav and the footer
   -------------------------------------------------------------------------- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.brand-svg,
.brand-logo {
  width: auto;
  flex-shrink: 0;
}
.brand-svg { height: 28px; color: currentColor; }
.brand-logo {
  display: block;
  height: 30px;
  object-fit: contain;
}
.brand-word {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: lowercase;
  font-variation-settings: var(--opsz-heading);
}

/* --------------------------------------------------------------------------
   7. Motion primitives (C.10, D.4, C.5)
   .pre-reveal is only ever added by 00-core.js to elements below the first
   viewport; the transition lives on the .revealed pair so it outranks the
   element's own hover transition (base.css is concatenated first).
   -------------------------------------------------------------------------- */
.pre-reveal {
  opacity: 0;
  transform: translateY(20px);
}
.pre-reveal.revealed {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
}

@keyframes rise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   8. Focus (D.11) — double ring from tokens, context-aware via --ctx-ring.
   The transparent outline keeps a ring in forced-colors mode.
   Section-specific tweaks (.nav-links a::after, .code-tab, .faq summary)
   belong to their section files.
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: var(--ctx-ring, var(--focus-ring));
  border-radius: var(--radius);
}
:focus:not(:focus-visible) { outline: none; }

.btn:focus-visible,
.pt-cta:focus-visible,
.nav-toggle:focus-visible,
.kicker:focus-visible {
  border-radius: var(--radius-pill);
}
.btn:focus-visible { box-shadow: var(--ctx-ring, var(--focus-ring)); }

/* skip-link target: programmatic focus, no ring around the whole page */
main:focus-visible {
  outline: none;
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   9. CONTEXTS — the only place the midnight / featured recolouring lives
   -------------------------------------------------------------------------- */
.channels,
.pricing,
.cta-card,
.mobile-menu,
.code-card,
.status-bar {
  --ctx-signal-bg:           var(--contrast-signal);
  --ctx-signal-fg:           var(--contrast-bg);
  --ctx-signal-bg-hover:     var(--contrast-signal-2);
  --ctx-signal-fg-hover:     var(--contrast-bg);
  --ctx-signal-shadow-hover: none;

  --ctx-line-border:         var(--contrast-line-strong);
  --ctx-line-fg:             var(--contrast-text);
  --ctx-line-border-hover:   var(--contrast-text);
  --ctx-line-bg-hover:       var(--contrast-text);
  --ctx-line-fg-hover:       var(--contrast-bg);

  --ctx-ghost-fg:            var(--contrast-text);
  --ctx-ghost-fg-hover:      var(--contrast-signal);

  --ctx-ring:                var(--focus-ring-contrast);

  --ctx-dot:                 var(--alert-bright);
  --ctx-dot-pulse:           var(--alert-pulse-bright);
  --ctx-dot-pulse-end:       var(--alert-bright-a00);
  --ctx-dot-glow:            var(--alert-pulse-bright);

  --ctx-tag:                 var(--contrast-signal);
  --ctx-title:               var(--contrast-text);
  --ctx-accent:              var(--contrast-signal);
  --ctx-hl:                  var(--hl-contrast);
  --ctx-sub:                 var(--contrast-text-2);
}

.ch-card-feat,
.pt-featured {
  --ctx-signal-bg:           var(--featured-action-bg);
  --ctx-signal-fg:           var(--featured-action-text);
  --ctx-signal-bg-hover:     var(--featured-action-hover);
  --ctx-signal-fg-hover:     var(--featured-action-text);
  --ctx-signal-shadow-hover: none;

  --ctx-line-border:         var(--featured-line);
  --ctx-line-fg:             var(--featured-text);
  --ctx-line-border-hover:   var(--featured-text);
  --ctx-line-bg-hover:       transparent;
  --ctx-line-fg-hover:       var(--featured-text);

  --ctx-ghost-fg:            var(--featured-text);
  --ctx-ghost-fg-hover:      var(--featured-text-2);

  --ctx-ring:                var(--focus-ring-featured);

  --ctx-dot:                 var(--alert);
  --ctx-dot-pulse:           var(--alert-pulse);
  --ctx-dot-pulse-end:       var(--alert-a00);
  --ctx-dot-glow:            var(--alert-pulse);
}

/* --------------------------------------------------------------------------
   10. User preferences (E.4). base.css is concatenated before the section
   files, so these declarations carry !important to win over equal-
   specificity section rules; a user preference must always win.
   -------------------------------------------------------------------------- */
@media (prefers-contrast: more) {
  .ch-card,
  .step,
  .case,
  .price-table-card,
  .kicker { border-color: currentColor !important; }
  .btn-line { --btn-border: currentColor; }
}

@media (prefers-reduced-transparency: reduce) {
  .nav,
  .nav.is-scrolled {
    background: var(--ink) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .mobile-menu-backdrop {
    background: var(--ink) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* --------------------------------------------------------------------------
   11. Reduced motion (C.24) — LAST. Softer, not zero: displacement, loops
   and overshoot go; opacity and colour fades stay.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }

  .ticker,
  .map .routes path,
  .hub-ring,
  .ln-d.is-tick { animation: none !important; }

  .dot.live {
    animation: none !important;
    box-shadow: 0 0 0 3px var(--dot-glow) !important;
  }

  .hero-headline .line,
  .hero-sub,
  .hero-actions,
  .hero-live,
  .hero-meta {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .hero-noise {
    transform: none !important;
    transition: none !important;
  }

  .pre-reveal,
  .pre-reveal.revealed {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .btn:hover,
  .btn:active,
  .btn:hover span[aria-hidden],
  .pt-cta:hover,
  .pt-cta:active,
  .pt-cta:hover span[aria-hidden],
  .nav-toggle:active,
  .ch-card:hover,
  .ch-card-cta:hover { transform: none !important; }

  .mobile-menu {
    transform: none !important;
    opacity: 0 !important;
    transition: opacity var(--dur-hover) var(--ease), visibility 0s linear var(--dur-hover) !important;
  }
  .mobile-menu.open {
    opacity: 1 !important;
    transition: opacity var(--dur-hover) var(--ease), visibility 0s !important;
  }

  .faq-body,
  .code-tab-ind,
  .nav,
  .faq summary::after { transition: none !important; }

  .step::after,
  .case::after { display: none !important; }
}
/* Shell — continuation of the established editorial / ultramarine system. */
.status-bar{position:sticky;top:0;z-index:var(--z-status);height:var(--status-h);display:flex;align-items:center;background:var(--contrast-bg);color:var(--contrast-text-2);border-bottom:1px solid var(--contrast-line);overflow:hidden}
.ticker-wrap{overflow:hidden;flex:1;mask-image:linear-gradient(90deg,transparent,currentColor 5%,currentColor 95%,transparent)}
.ticker{display:flex;width:max-content;animation:tick 60s linear infinite;font:10px var(--font-mono);letter-spacing:.08em;white-space:nowrap}
.ticker-group{display:flex;gap:56px;padding-inline:28px;flex-shrink:0}
.ticker-group>span{display:inline-flex;align-items:center;gap:8px}
@keyframes tick{to{transform:translateX(-50%)}}
.ticker-pause{flex-shrink:0;min-width:38px;min-height:32px;font-size:12px;color:var(--contrast-signal);border-left:1px solid var(--contrast-line)}
.motion-paused .ticker,.motion-paused .dot.live,.motion-paused .map .routes path,.motion-paused .hub-ring{animation-play-state:paused!important}
.nav{position:sticky;top:var(--status-h);z-index:var(--z-nav);display:flex;align-items:center;gap:32px;min-height:var(--nav-h);padding:18px var(--pad-x);background:var(--ink);border-bottom:1px solid var(--line);transition:background-color var(--dur-ui),box-shadow var(--dur-ui)}
.nav.is-scrolled{background:var(--nav-bg);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:var(--shadow-xs)}
.nav-links{display:flex;gap:28px;margin-left:24px}
.nav-links a{position:relative;padding:6px 0;color:var(--mute-2);font-size:13px;transition:color var(--dur-hover)}
.nav-links a::after{content:"";position:absolute;bottom:0;left:0;right:0;height:1px;background:var(--signal);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-ui) var(--ease-out)}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--signal)}
.nav-links a:hover::after,.nav-links a:focus-visible::after,.nav-links a[aria-current]::after{transform:scaleX(1)}
.nav-cta{display:flex;align-items:center;gap:10px;margin-left:auto}
.nav-toggle{display:none;width:44px;height:44px;border:1px solid var(--line-input);border-radius:50%;align-items:center;justify-content:center;flex-direction:column;gap:4px}
.nav-toggle span{display:block;width:16px;height:1.5px;background:var(--paper);transition:transform var(--dur-ui),opacity var(--dur-hover)}
.nav-toggle[aria-expanded=true] span:first-child{transform:translateY(5.5px) rotate(45deg)}
.nav-toggle[aria-expanded=true] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded=true] span:last-child{transform:translateY(-5.5px) rotate(-45deg)}
.mobile-menu{position:fixed;inset:0 0 0 auto;width:min(360px,88vw);z-index:var(--z-drawer);padding:96px 28px 32px;display:flex;flex-direction:column;gap:4px;background:var(--contrast-bg);color:var(--contrast-text);border-left:1px solid var(--contrast-line);overflow-y:auto;transform:translateX(100%);visibility:hidden;transition:transform var(--dur-drawer) var(--ease-out),visibility 0s var(--dur-drawer)}
.mobile-menu.open{transform:none;visibility:visible;transition:transform var(--dur-drawer) var(--ease-out),visibility 0s}
.mobile-menu>a{display:block;padding:14px 4px;border-bottom:1px solid var(--contrast-line);font:24px var(--font-display)}
.mobile-menu>a.btn{margin-top:24px;padding:15px;font:14px var(--font-body);text-align:center;border:0}
.menu-close{position:absolute;right:22px;top:28px;width:44px;height:44px;border:1px solid var(--contrast-line-strong);border-radius:50%;font-size:25px}
.mobile-menu-backdrop{position:fixed;inset:0;z-index:var(--z-backdrop);background:var(--backdrop);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity var(--dur-ui)}
.mobile-menu-backdrop.open{opacity:1;pointer-events:auto}
body.menu-open,body.dialog-open{overflow:hidden}
.hero{position:relative;isolation:isolate;overflow:hidden;padding:80px var(--pad-x) 120px}
.nav-sentinel{position:absolute;top:0;left:0;width:1px;height:1px}
.hero-grid{max-width:var(--maxw);margin:0 auto;display:grid;gap:42px}
.hero-headline{font-family:var(--font-display);font-size:clamp(48px,9.4vw,152px);font-weight:400;line-height:.96;letter-spacing:-.045em;font-variation-settings:var(--opsz-hero);max-width:16ch}
.hero-headline .line{display:block;animation:rise var(--dur-rise) var(--ease-out) both}
.hero-headline .line:nth-child(1){animation-delay:50ms}
.hero-headline .line:nth-child(2){animation-delay:140ms}
.hero-headline .line:nth-child(3){animation-delay:230ms}
.hero-headline em{color:var(--signal);font-weight:300}
.hero-sub{max-width:57ch;font-size:clamp(16px,1.3vw,19px);color:var(--bone);line-height:1.65}
.hero-sub b{font-weight:600;color:var(--paper)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.hero-meta,.hero-sub,.hero-actions,.hero-live{animation:rise 700ms var(--ease-out) both}
.hero-sub{animation-delay:340ms}.hero-actions{animation-delay:420ms}.hero-live{animation-delay:500ms}
.hero-live{display:grid;grid-template-columns:1.4fr 1fr;gap:18px;max-width:720px;margin-top:20px}
.live-card{position:relative;min-width:0;padding:18px 20px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--carbon);overflow:hidden;box-shadow:var(--shadow-xs)}
.live-card::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,var(--glow-card),transparent 55%);pointer-events:none}
.live-label{font:10px var(--font-mono);letter-spacing:.13em;color:var(--mute-2);margin-bottom:10px}
.live-number{font:500 clamp(28px,4vw,42px) var(--font-mono);letter-spacing:-.025em;font-variant-numeric:tabular-nums;white-space:nowrap}
.live-number .num-val{display:inline-block;min-width:10ch}
.live-number-sm{font:500 clamp(24px,3vw,34px) var(--font-mono);color:var(--signal);font-variant-numeric:tabular-nums}
.live-number-sm .unit{font-size:.6em;color:var(--mute-2);margin-left:4px}
.live-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px;font:9px/1.6 var(--font-mono);letter-spacing:.035em;color:var(--mute-2)}
.live-meta>span:first-child{display:flex;align-items:center;gap:8px}
.live-spark{height:36px;margin-top:8px;color:var(--signal)}.live-spark svg{width:100%;height:100%}
.ln-d{display:inline-block}.ln-d.is-tick{animation:digit-tick 240ms var(--ease-out)}
@keyframes digit-tick{from{opacity:.3;transform:translateY(4px)}to{opacity:1;transform:none}}
.hero-noise{position:absolute;inset:-8px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 80% 60% at 90% 10%,var(--glow-1),transparent 65%),radial-gradient(ellipse 60% 80% at 0% 100%,var(--glow-2),transparent 60%),linear-gradient(var(--ink),var(--ink-2))}
.hero-noise::after{content:"";position:absolute;inset:0;opacity:.48;background:repeating-linear-gradient(0deg,var(--scanline) 0 1px,transparent 1px 3px);mix-blend-mode:multiply}
.trust{padding:32px var(--pad-x);background:var(--ink-2);border-block:1px solid var(--line)}
.trust-label{margin-bottom:20px;text-align:center;color:var(--mute);font:10px/1.6 var(--font-mono);letter-spacing:.14em}
.trust-row{max-width:var(--maxw);margin:auto;list-style:none;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:24px 38px}
.trust-mark{color:var(--mute-2);font-size:12px;font-weight:600;letter-spacing:.12em;transition:color var(--dur-hover)}
.trust-mark.serif{font:500 18px var(--font-display);letter-spacing:0}.trust-mark.mono{font:500 12px var(--font-mono);letter-spacing:0}
.trust-mark:hover{color:var(--signal)}
.numbers{padding:96px var(--pad-x);background:var(--ink)}
.numbers-grid{max-width:var(--maxw);margin:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:var(--carbon)}
.num-card{position:relative;padding:36px 28px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:14px;min-width:0}.num-card:last-child{border-right:0}
.num-tag{position:absolute;top:14px;right:16px;color:var(--mute);font:10px var(--font-mono)}
.num-big{font:400 clamp(48px,5.3vw,78px)/1 var(--font-display);letter-spacing:-.045em;white-space:nowrap;font-variant-numeric:tabular-nums}
.num-big .unit{color:var(--signal);font-weight:300}.num-big .num-val{display:inline-block}
.num-card p{font-size:14px;line-height:1.6;color:var(--bone)}
.num-card code{font:12px var(--font-mono);padding:1px 6px;background:var(--ink);border:1px solid var(--line);border-radius:3px}
.hero-caption{font:10px/1.6 var(--font-mono);color:var(--mute);letter-spacing:.025em}
.nav-cta>.nav-login{padding-inline:6px;min-width:44px;justify-content:center}
.hero .hero-caption{margin-top:-26px}
@media(hover:hover) and (pointer:fine){.ticker-wrap:hover .ticker{animation-play-state:paused}.hero-noise{transition:transform 400ms var(--ease-out);will-change:transform}}
@media(max-width:1100px){.nav{gap:20px}.nav-links{gap:20px;margin-left:0}.nav-links a{font-size:12px}}
@media(max-width:980px){.numbers-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.num-card:nth-child(2){border-right:0}.num-card:nth-child(-n+2){border-bottom:1px solid var(--line)}}
@media(max-width:880px){.nav-links,.nav-cta-desktop{display:none}.nav-toggle{display:flex}}
@media(max-width:720px){.hero-live{grid-template-columns:1fr;max-width:460px}.hero-headline{font-size:clamp(48px,12vw,84px)}}
@media(max-width:600px){.hero{padding:56px var(--pad-x) 80px}.hero-grid{gap:32px}.hero-live{margin-top:12px}.hero .kicker{font-size:9px;letter-spacing:.045em;padding:8px 10px}.numbers{padding:72px var(--pad-x)}.numbers-grid{grid-template-columns:1fr}.num-card{border-right:0;border-bottom:1px solid var(--line)}.num-card:last-child{border-bottom:0}.num-big{font-size:72px}.trust-row{gap:24px 28px}.hero .hero-caption{margin-top:-18px}}
@media(max-width:480px){:root{--nav-h:75px}.nav{gap:12px;padding:14px 16px}.brand{gap:7px}.brand-word{font-size:21px}.brand-svg{height:24px}.nav-cta{gap:8px}.nav-cta>.btn{padding:10px 13px;font-size:12px}.hero-headline{font-size:clamp(46px,12vw,64px)}.hero-actions{gap:10px}.hero-actions .btn{font-size:13px;padding:13px 17px}.live-number{font-size:30px}}
/* ==========================================================================
   02-product.css — channels · flow · code-section · cases
   Owns only the selectors listed in structure-motion.md §F.2 for 02.
   Colours are tokens only (tokens.css). Shared pieces (.btn*, .dot,
   .section-*, .hl, .pre-reveal, focus rings, the .channels .section-*
   contrast overrides, keyframes) live in base.css.
   ========================================================================== */

/* ------------------------------------------------------------------
   CHANNELS — midnight contrast block
   ------------------------------------------------------------------ */
.channels {
  position: relative;
  padding: 120px var(--pad-x);
  background: var(--contrast-bg);
  color: var(--contrast-text);
  /* palette.md §2.7 row 6: the 80px ink→transparent fades are replaced by a hairline */
  border-block: 1px solid var(--contrast-line);
}

.channels-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.ch-card {
  position: relative;
  min-width: 0;
  background: var(--contrast-surface);
  border: 1px solid var(--contrast-line);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition:
    border-color var(--dur-ui) var(--ease),
    background-color var(--dur-ui) var(--ease),
    transform var(--dur-ui) var(--ease-out);
}
.ch-card:hover {
  background: var(--contrast-surface-2);
  border-color: var(--contrast-line-strong);
}
@media (hover: hover) and (pointer: fine) {
  .ch-card:hover { transform: translateY(-4px); }
}

.ch-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.ch-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--contrast-signal);
  color: var(--contrast-bg);
}
.ch-icon svg { width: 18px; height: 18px; }

.ch-card h3 {
  min-width: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  font-variation-settings: var(--opsz-heading);
  color: var(--contrast-text);
}
.ch-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1;
  padding: 4px 8px;
  border-radius: var(--radius-pill);
  background: var(--contrast-signal);
  color: var(--contrast-bg);
}
.ch-card p {
  color: var(--contrast-text-2);
  font-size: 15px;
  line-height: 1.55;
  margin-bottom: 16px;
}
.ch-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--contrast-mute);
}
.ch-list li::before {
  content: "→ ";
  color: var(--contrast-signal);
}

/* Featured card: solid ultramarine, the brand's saturated moment */
.ch-card-feat {
  background: var(--featured-bg);
  border-color: var(--featured-bg);
  color: var(--featured-text);
}
.ch-card-feat:hover {
  background: var(--featured-bg-hover);
  border-color: var(--featured-bg-hover);
}
.ch-card-feat h3 { color: var(--featured-text); }
.ch-card-feat p { color: var(--featured-text-2); }
.ch-card-feat .ch-icon { background: var(--featured-action-bg); color: var(--featured-action-text); }
.ch-card-feat .ch-tag { background: var(--featured-action-bg); color: var(--featured-action-text); }
.ch-card-feat .ch-list { color: var(--featured-text-2); }
.ch-card-feat .ch-list li::before { color: var(--featured-text); }

/* Roadmap card: dashed outline, fills on hover */
.ch-card-cta {
  background: transparent;
  border: 1px dashed var(--contrast-line-strong);
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
}
.ch-card-cta:hover {
  background: var(--contrast-surface);
  border-color: var(--contrast-line-strong);
}
.ch-card-cta h3 { color: var(--contrast-text); }
.ch-card-cta p { color: var(--contrast-text-2); margin-bottom: 8px; }
.ch-card-cta .btn { align-self: flex-start; }   /* colours come from base.css (.channels .btn-line) */

@media (max-width: 980px) { .channels-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .channels-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------
   FLOW — three white steps on paper-2, joined by a hairline
   ------------------------------------------------------------------ */
.flow {
  padding: 120px var(--pad-x);
  background: var(--ink-2);
}
.flow-grid {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.flow-grid::before {
  content: "";
  position: absolute;
  top: 50px;
  left: 16%;
  right: 16%;
  height: 1px;
  z-index: 0;
  background: linear-gradient(to right, transparent, var(--line-strong) 20%, var(--line-strong) 80%, transparent);
  transform-origin: left center;
  transition: transform var(--dur-rise) var(--ease-out);
}
.flow-grid.draw-ready::before { transform: scaleX(0); }
.flow-grid.draw-ready.is-drawn::before { transform: scaleX(1); }
.step {
  position: relative;
  min-width: 0;
  z-index: 1;
  isolation: isolate;               /* keeps the ::after glow between bg and text */
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
  background: var(--carbon);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.step-no {
  width: 40px;
  height: 40px;
  margin-bottom: 4px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--carbon);
  border: 1px solid var(--signal);
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--signal);
}
.step h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  font-variation-settings: var(--opsz-heading);
  color: var(--paper);
}
.step p {
  color: var(--bone);
  font-size: 15px;
}
.step-code {
  align-self: flex-start;
  max-width: 100%;
  overflow-wrap: anywhere;
  padding: 8px 12px;
  border-radius: 6px;
  background: var(--signal-tint);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--signal);
}
@media (max-width: 880px) {
  .flow-grid { grid-template-columns: 1fr; }
  .flow-grid::before { display: none; }
}

/* ------------------------------------------------------------------
   CODE SECTION — the section itself is the grid (no inner wrapper)
   ------------------------------------------------------------------ */
.code-section {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 120px var(--pad-x);
  background: var(--ink);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 48px;
  align-items: start;
}
.code-card {
  min-width: 0;
  overflow: hidden;
  background: var(--code-bg);
  color: var(--code-text);
  border: 1px solid var(--contrast-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-contrast);
}
.code-tabs {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 12px;
  background: var(--code-bar);
  border-bottom: 1px solid var(--code-line);
  font-family: var(--font-mono);
  font-size: 12px;
}
.code-tab {
  position: relative;
  z-index: 1;
  min-height: 40px;
  padding: 8px 12px;
  flex-shrink: 0;
  border-radius: 6px;
  background: transparent;
  border: 1px solid transparent;
  font: inherit;
  font-size: 12px;
  color: var(--code-com);
  cursor: pointer;
  transition:
    color var(--dur-fast) var(--ease),
    background-color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    transform var(--dur-press) var(--ease-out);
}
.code-tab:hover { color: var(--code-text); }
.code-tab:focus-visible { outline-offset: -3px; }
.code-tab:active { transform: scale(.97); }
.code-tab.active {
  color: var(--code-cmd);
  background: var(--code-bg);
  border-color: var(--code-line);
}
/* Once JS has measured the indicator, it draws the active background instead (D.6) */
.code-tabs.has-ind .code-tab.active {
  background: transparent;
  border-color: transparent;
}
.code-tab-ind {
  position: absolute;
  top: var(--y, 10px);
  left: 0;
  z-index: 0;
  width: 0;
  height: var(--h, calc(100% - 20px));
  border-radius: 6px;
  background: var(--code-bg);
  border: 1px solid var(--code-line);
  opacity: 0;
  transform: translateX(var(--x, 0px));
  transition: transform var(--dur-ui) var(--ease-out);
}
.code-tabs.has-ind .code-tab-ind { opacity: 1; }
.code-tabs.no-anim .code-tab-ind { transition: none; }
.code-tab-spacer { flex: 1; }
.code-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--contrast-mute);
}
.code-status .dot.live {
  background: var(--alert-bright);
  box-shadow: 0 0 0 0 var(--alert-pulse-bright);
}
.code-body {
  height: 430px;
  max-width: 100%;
  padding: 22px 24px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.65;
  font-variant-numeric: tabular-nums;
  color: var(--code-text);
  white-space: pre;
  overflow: auto;
  scrollbar-color: var(--code-com) var(--code-bg);
  tab-size: 2;
}
.code-body code { font: inherit; }
.code-body[hidden] { display: none; }
.code-body:focus-visible {
  outline: 2px solid var(--contrast-signal);
  outline-offset: -3px;
}
.c-com { color: var(--code-com); }
.c-cmd { color: var(--code-cmd); }
.c-str { color: var(--code-str); }
.c-key { color: var(--code-key); }
.code-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 10px 18px;
  border-top: 1px solid var(--code-line);
  background: var(--code-bar);
}
.code-note {
  color: var(--code-com);
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.5;
}
.code-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  min-width: 102px;
  padding: 7px 10px;
  border: 1px solid var(--contrast-line-strong);
  border-radius: var(--radius);
  color: var(--code-text);
  font-family: var(--font-mono);
  font-size: 11px;
  transition: background-color var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease);
}
.code-copy:hover { background: var(--contrast-surface); }
.code-copy:active { background: var(--contrast-surface-2); }
.code-copy.is-copied { color: var(--code-str); }

@media (max-width: 980px) {
  .code-section { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------
   CASES — 2×2 white cells, 1px --line gutters drawn by the grid bg
   ------------------------------------------------------------------ */
.cases {
  padding: 120px var(--pad-x);
  background: var(--ink-2);
}
.cases-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.case {
  position: relative;
  min-width: 0;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 40px 36px;
  background: var(--carbon);
  transition: background-color var(--dur-ui) var(--ease);
}
.case:hover { background: var(--carbon-2); }
.case-no {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .15em;
  color: var(--signal);
}
.case-note {
  margin: 12px auto 0;
  color: var(--mute-2);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
}
.case h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  font-variation-settings: var(--opsz-heading);
  color: var(--paper);
}
.case p {
  color: var(--bone);
  font-size: 15.5px;
  max-width: 56ch;
}
.case-stat {
  margin-top: 8px;
  padding-top: 18px;
  border-top: 1px dashed var(--line);
  font-size: 14px;
  color: var(--mute-2);
}
.case-num {
  margin-right: 8px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 28px;
  font-variation-settings: var(--opsz-heading);
  color: var(--signal);
}
@media (max-width: 720px) {
  .cases-grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------
   D.9 — cursor-following glow on .step and .case (fine pointers only)
   --mx / --my are written by 02-product.js (rAF-throttled pointermove)
   ------------------------------------------------------------------ */
@media (hover: hover) and (pointer: fine) {
  .step, .case { --mx: 50%; --my: 50%; }
  .step::after, .case::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;                      /* above the card bg, below the text */
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(260px circle at var(--mx) var(--my), var(--signal-a10), transparent 60%);
    opacity: 0;
    transition: opacity 300ms var(--ease);
  }
  .step:hover::after, .case:hover::after { opacity: 1; }
}

/* ------------------------------------------------------------------
   Preferences
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .ch-card:hover { transform: none; }
  .code-tab-ind { transition: none; }
  .code-tab:active { transform: none; }
  .step::after, .case::after { display: none; }
  .flow-grid.draw-ready::before { transform: none; transition: none; }
}
@media (prefers-contrast: more) {
  .ch-card, .step, .case, .code-card { border-color: currentColor; }
}

/* ------------------------------------------------------------------
   Mobile rhythm (§A.18) — only this partial's sections
   ------------------------------------------------------------------ */
@media (max-width: 600px) {
  .channels, .flow, .code-section, .cases {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .ch-card { padding: 24px; }
  .ch-head { gap: 12px; }
  .case { padding: 32px 26px; }
  .code-section { gap: 12px; }
  .code-tabs { gap: 1px; padding: 8px; }
  .code-tab { padding: 8px 11px; }
  .code-status { font-size: 9px; letter-spacing: .04em; gap: 6px; }
  .code-body { height: 390px; padding: 20px 18px; font-size: 12px; }
}
@media (max-width: 400px) {
  .code-status { display: none; }
  .code-footer { padding-inline: 14px; }
  .code-note { flex: 1 1 100px; }
}
/* Commercial sections. Palette and motion are inherited from tokens.css. */
.coverage,
.pricing,
.compliance,
.faq,
.cta-final { padding: 120px var(--pad-x); }

.coverage > .section-head,
.pricing > .section-head,
.faq > .section-head { padding-inline: 0; }

/* Coverage: route diagram, then three readable regional inventories. */
.coverage { background: var(--ink); }
.coverage-card {
  max-width: var(--maxw);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}
.map-wrap {
  position: relative;
  padding: 24px;
  background: var(--carbon);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  color: var(--paper);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.map-topline,
.map-bottomline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font: 10px/1.4 var(--font-mono);
  letter-spacing: .1em;
  color: var(--mute);
}
.map-topline { padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.map-bottomline { padding-top: 20px; border-top: 1px solid var(--line); }
.map-topline span:last-child { color: var(--signal); }
.map-bottomline span:first-child { display: flex; align-items: center; gap: 8px; }
.map { width: 100%; height: auto; margin-block: 20px; overflow: visible; }
.map .land { fill: currentColor; fill-opacity: .13; stroke: var(--carbon); stroke-width: 1.2; }
.map .routes path {
  stroke: var(--signal);
  stroke-width: 1.1;
  stroke-opacity: .62;
  stroke-dasharray: 4 5;
  animation: route-flow 18s linear infinite;
  animation-play-state: paused;
}
.map .hubs circle { fill: var(--signal); transition: fill var(--dur-hover) var(--ease-out); }
.map .hubs circle:hover { fill: var(--alert); }
.map .hubs text {
  fill: var(--paper);
  font: 500 11px var(--font-mono);
  letter-spacing: .07em;
  paint-order: stroke;
  stroke: var(--carbon);
  stroke-width: 3px;
  stroke-linejoin: round;
}
.map .hubs .hub-ring {
  fill: none;
  stroke: var(--signal);
  stroke-width: 1;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: hub-ping 3s var(--ease-out) infinite;
  animation-delay: calc(var(--i) * 260ms);
  animation-play-state: paused;
}
.coverage.is-inview .hub-ring,
.coverage.is-inview .routes path { animation-play-state: running; }
@keyframes route-flow { to { stroke-dashoffset: -180; } }
@keyframes hub-ping {
  0% { opacity: .6; transform: scale(1); }
  75%, 100% { opacity: 0; transform: scale(3.8); }
}
.coverage-list { display: grid; gap: 24px; }
.cov-col { border-top: 1px solid var(--line); padding-top: 16px; }
.cov-title { color: var(--signal); font: 400 11px var(--font-mono); letter-spacing: .14em; margin-bottom: 12px; }
.cov-col ul { list-style: none; display: grid; gap: 8px; }
.cov-col li { display: flex; justify-content: space-between; gap: 18px; border-bottom: 1px dashed var(--line); padding-bottom: 6px; color: var(--bone); font-size: 14px; }
.cov-col li span:last-child { flex-shrink: 0; font: 11px/1.9 var(--font-mono); letter-spacing: .06em; color: var(--mute-2); }

/* A semantic table on desktop becomes labelled, individual packs on mobile. */
.pricing { background: var(--contrast-bg); color: var(--contrast-text); }
.pricing .section-sub b { color: var(--contrast-text); font-weight: 600; }
.price-table-card { max-width: var(--maxw); margin-inline: auto; background: var(--contrast-surface); border: 1px solid var(--contrast-line); border-radius: var(--radius-lg); overflow: hidden; }
.price-table,
.price-table thead,
.price-table tbody { display: block; width: 100%; border-collapse: collapse; }
.price-table-head,
.pt-row { position: relative; display: grid; grid-template-columns: 32px minmax(185px, 1.5fr) 100px 105px 92px 135px; align-items: center; gap: 16px; padding: 20px 24px; }
.price-table-head { color: var(--contrast-mute); background: var(--table-head); border-bottom: 1px solid var(--row-line); }
.price-table-head th { font: 400 10.5px var(--font-mono); letter-spacing: .12em; text-align: left; text-transform: uppercase; }
.price-table-head .num { text-align: right; }
.pt-row { min-width: 0; border-bottom: 1px solid var(--row-line); transition: background-color var(--dur-hover) var(--ease-out); }
.pt-row:nth-child(even) { background: var(--row-alt); }
.pt-row:last-child { border-bottom: 0; }
.pt-no { color: var(--contrast-mute); font: 11px var(--font-mono); letter-spacing: .12em; }
.pt-name { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.pt-name b { font: 500 24px/1.1 var(--font-display); font-variation-settings: var(--opsz-heading); letter-spacing: -.015em; color: var(--contrast-text); }
.pt-name > span { color: var(--contrast-text-2); font-size: 12px; line-height: 1.45; }
.pt-credits { font: 13px var(--font-mono); }
.pt-cost { color: var(--contrast-mute); font: 12px var(--font-mono); }
.pt-price { font: 500 26px/1 var(--font-display); letter-spacing: -.015em; }
.pt-credits,
.pt-cost,
.pt-price { text-align: right; font-variant-numeric: tabular-nums; }
.pt-action { display: flex; justify-content: flex-end; }
.pt-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--contrast-line-strong);
  border-radius: var(--radius-pill);
  color: var(--contrast-text);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  transition: color var(--dur-hover) var(--ease-out), background-color var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease-out), transform var(--dur-hover) var(--ease-out);
}
.pt-cta span { display: inline-block; transition: transform var(--dur-hover) var(--ease-out); }
.pt-cta:hover { background: var(--contrast-text); color: var(--contrast-bg); border-color: var(--contrast-text); }
.pt-cta-signal { background: var(--contrast-signal); border-color: var(--contrast-signal); color: var(--contrast-bg); }
.pt-cta-signal:hover { background: var(--contrast-signal-2); border-color: var(--contrast-signal-2); }
.pt-featured { padding-top: 42px; padding-bottom: 25px; background: var(--featured-bg) !important; color: var(--featured-text); }
.pt-featured .pt-no,
.pt-featured .pt-name b,
.pt-featured .pt-price,
.pt-featured .pt-credits { color: var(--featured-text); }
.pt-featured .pt-name > span,
.pt-featured .pt-cost { color: var(--featured-text-2); }
.pt-featured .pt-name .pt-flag { position: absolute; top: 13px; left: 24px; display: inline-flex; align-items: center; gap: 8px; color: var(--featured-text); font: 10px var(--font-mono); letter-spacing: .14em; }
.pt-featured .pt-cta-signal { background: var(--featured-action-bg); border-color: var(--featured-action-bg); color: var(--featured-action-text); }
.pt-featured .pt-cta-signal:hover { background: var(--featured-action-hover); border-color: var(--featured-action-hover); color: var(--featured-action-text); }
.pt-enterprise { background: var(--table-head) !important; }
.pt-enterprise .pt-price { font-style: italic; }
.price-notes { max-width: var(--maxw); margin: 32px auto 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.price-notes article { padding: 20px; border: 1px dashed var(--contrast-line-strong); border-radius: var(--radius-lg); }
.pn-tag { display: block; margin-bottom: 9px; color: var(--contrast-signal); font: 10.5px var(--font-mono); letter-spacing: .14em; }
.price-notes p { font-size: 13px; line-height: 1.6; color: var(--contrast-text-2); }
.price-notes b { color: var(--contrast-text); font-weight: 600; }
.price-notes a { color: var(--contrast-signal); text-decoration: underline; text-underline-offset: 3px; }
.commercial-note { margin: 16px auto 0; max-width: var(--maxw); color: var(--mute); font: 10.5px/1.6 var(--font-mono); letter-spacing: .045em; }
.pricing .commercial-note { color: var(--contrast-mute); }

.integrations { padding: 100px var(--pad-x); background: var(--ink-2); }
.integ-inner { max-width: var(--maxw); margin-inline: auto; }
.integ-inner .section-head { margin-bottom: 32px; }
.integ-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; list-style: none; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--line); }
.integ-row li { display: flex; align-items: center; justify-content: center; min-height: 105px; padding: 22px 14px; background: var(--carbon); color: var(--bone); font: italic 25px/1.2 var(--font-display); text-align: center; transition: background-color var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out); }
.integ-row li:nth-child(3n + 2) { font-family: var(--font-body); font-size: 18px; font-style: normal; font-weight: 600; letter-spacing: -.06em; }
.integ-row li:nth-child(4n) { font-family: var(--font-mono); font-size: 16px; font-style: normal; letter-spacing: -.055em; }

.compliance { background: var(--ink); }
.comp-grid { max-width: var(--maxw); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 60px; align-items: start; }
.comp-block p { max-width: 48ch; margin-top: 20px; color: var(--bone); font-size: 16px; }
.comp-block .commercial-note { font: 10.5px/1.6 var(--font-mono); color: var(--mute); }
.comp-list { list-style: none; border-top: 1px solid var(--line); }
.comp-list li { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.comp-list b { font: 500 24px/1.1 var(--font-display); font-variation-settings: var(--opsz-heading); letter-spacing: -.015em; }
.comp-list span { color: var(--mute-2); font-size: 14px; line-height: 1.5; }

/* Native details remain fully usable if JavaScript is unavailable. */
.faq { background: var(--ink-2); }
.faq-list { max-width: 880px; margin-inline: auto; border-top: 1px solid var(--line-strong); }
.faq details { border-bottom: 1px solid var(--line-strong); padding-block: 22px; }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 44px; list-style: none; color: var(--paper); font: 500 clamp(21px, 2.4vw, 28px)/1.15 var(--font-display); font-variation-settings: var(--opsz-heading); letter-spacing: -.01em; cursor: pointer; transition: color var(--dur-hover) var(--ease-out); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::marker { content: ""; }
.faq summary::after { content: "+"; display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; color: var(--signal); font: 400 26px/1 var(--font-mono); transition: transform var(--dur-ui) var(--ease-out); }
.faq summary:hover { color: var(--signal); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details.is-closing summary::after { transform: rotate(0); }
.faq summary:focus-visible { outline-offset: 6px; }
.faq-body-in { min-height: 0; overflow: hidden; }
.faq p { max-width: 70ch; padding-top: 14px; padding-right: 56px; color: var(--bone); font-size: 15px; line-height: 1.75; }
.faq details[data-animated] .faq-body { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 300ms var(--ease-out), opacity 200ms var(--ease-out); }
.faq details.is-expanded .faq-body { grid-template-rows: 1fr; opacity: 1; }

/* Last dark island: deliberately spare, with a soft periwinkle light. */
.cta-final { background: var(--ink); }
.cta-card { position: relative; max-width: var(--maxw); margin-inline: auto; padding: clamp(40px, 6vw, 80px); overflow: hidden; border-radius: var(--radius-lg); background: var(--contrast-bg); color: var(--contrast-text); box-shadow: var(--shadow-lg); }
.cta-card::before { content: ""; position: absolute; inset: -1px; pointer-events: none; background: radial-gradient(ellipse 70% 70% at 95% 0%, var(--glow-cta), transparent 65%); }
.cta-card > * { position: relative; }
.cta-card .kicker { background: var(--contrast-signal); color: var(--contrast-bg); border-color: var(--contrast-signal); }
.cta-card h2 { margin: 30px 0 36px; font: 400 clamp(64px, 8.7vw, 122px)/.91 var(--font-display); font-variation-settings: var(--opsz-hero); letter-spacing: -.045em; }
.cta-card h2 em { color: var(--contrast-signal); font-weight: 300; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.cta-meta { display: flex; flex-wrap: wrap; gap: 16px 24px; margin-top: 32px; color: var(--contrast-mute); font: 10.5px/1.6 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.cta-meta > span { display: inline-flex; align-items: center; gap: 9px; }

.footer { padding: 64px var(--pad-x) 32px; background: var(--ink); border-top: 1px solid var(--line); }
.footer-top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr); gap: 64px; max-width: var(--maxw); margin-inline: auto; }
.footer-brand .brand { margin-bottom: 20px; }
.footer-brand .brand-svg { height: 32px; }
.footer-brand .brand-logo { height: 34px; }
.footer-brand .brand-word { font-size: 28px; }
.footer-brand p { max-width: 32ch; color: var(--mute-2); font-size: 14px; line-height: 1.7; }
.footer-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.footer-cols h3 { margin-bottom: 14px; color: var(--signal); font: 400 10.5px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.footer-cols ul { list-style: none; }
.footer-cols a { display: inline-block; padding-block: 5px; color: var(--bone); font-size: 13px; line-height: 1.5; transition: color var(--dur-hover) var(--ease-out); }
.footer-cols a:hover { color: var(--signal); text-decoration: underline; text-underline-offset: 4px; }
.footer-bot { max-width: var(--maxw); margin: 48px auto 0; padding-top: 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; color: var(--mute); font: 10px/1.6 var(--font-mono); letter-spacing: .055em; text-transform: uppercase; }
.footer-status { display: inline-flex; align-items: center; gap: 8px; }

@media (hover: hover) and (pointer: fine) {
  .pt-row:hover { background: var(--row-hover); }
  .pt-cta:hover { transform: translateY(-1px); }
  .pt-cta:hover span { transform: translateX(3px); }
  .integ-row li:hover { background: var(--carbon-2); color: var(--signal); }
}
.pt-cta:active { transform: scale(.98); transition-duration: var(--dur-press); }

@media (max-width: 1120px) {
  .coverage-card { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px; }
  .price-table-head,
  .pt-row { grid-template-columns: 25px minmax(160px, 1.4fr) 75px 85px 75px 116px; gap: 12px; padding-inline: 18px; }
  .pt-name b { font-size: 22px; }
  .pt-featured .pt-name .pt-flag { left: 18px; }
  .pt-cta { padding-inline: 12px; }
  .comp-grid { gap: 40px; }
  .comp-list li { grid-template-columns: 126px minmax(0, 1fr); gap: 20px; }
  .integ-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .coverage-card { grid-template-columns: minmax(0, 1fr); }
  .coverage-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .cov-col li { font-size: 12px; gap: 8px; }
  .cov-col li span:last-child { font-size: 9px; }
  .map { max-height: 340px; }
  .price-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-top { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}

@media (max-width: 880px) {
  .comp-grid { grid-template-columns: minmax(0, 1fr); }
  .comp-block { max-width: 680px; }
  .comp-list li { grid-template-columns: 180px minmax(0, 1fr); }
  .price-table-card { overflow: visible; background: transparent; border: 0; border-radius: 0; }
  .price-table thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .price-table tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .pt-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 14px; padding: 24px; background: var(--contrast-surface); border: 1px solid var(--contrast-line); border-radius: var(--radius-lg); align-content: start; }
  .pt-row:last-child { border-bottom: 1px solid var(--contrast-line); }
  .pt-no { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .pt-name { grid-column: 1 / -1; gap: 8px; min-height: 69px; }
  .pt-name b { font-size: 28px; }
  .pt-name > span { font-size: 12px; }
  .pt-credits,
  .pt-cost { text-align: left; }
  .pt-credits::before,
  .pt-cost::before,
  .pt-price::before { content: attr(data-label); display: block; margin-bottom: 7px; color: var(--contrast-mute); font: 10.5px/1.5 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
  .pt-credits { font-size: 16px; }
  .pt-cost { font-size: 14px; }
  .pt-price { text-align: left; font-size: 34px; align-self: end; }
  .pt-action { align-self: end; }
  .pt-cta { min-width: 92px; }
  .pt-featured { padding-top: 47px; border-color: var(--featured-line); }
  .pt-featured .pt-name .pt-flag { left: 24px; top: 18px; }
  .pt-featured .pt-credits::before,
  .pt-featured .pt-cost::before,
  .pt-featured .pt-price::before { color: var(--featured-text-2); }
  .pt-enterprise { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
  .pt-enterprise .pt-name { grid-column: 1 / -1; min-height: auto; }
  .pt-enterprise .pt-price { align-self: start; font-size: 29px; }
  .pt-enterprise .pt-action { grid-column: 1 / -1; justify-content: flex-start; }
}

@media (max-width: 600px) {
  .coverage,
  .pricing,
  .integrations,
  .compliance,
  .faq,
  .cta-final { padding-block: 80px; }
  .coverage-card { gap: 30px; }
  .coverage .section-title br { display: none; }
  .map-wrap { padding: 16px; }
  .map-topline,
  .map-bottomline { font-size: 8px; }
  .map-topline { padding-bottom: 16px; }
  .map-bottomline { padding-top: 16px; }
  .map { margin-block: 26px; }
  .coverage-list { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .cov-col li { font-size: 14px; }
  .cov-col li span:last-child { font-size: 10.5px; }
  .price-table tbody { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .pt-row { gap: 21px 16px; }
  .pt-name { min-height: auto; }
  .pt-name b { font-size: 30px; }
  .pt-name > span { max-width: 33ch; font-size: 13px; }
  .pt-enterprise { grid-column: auto; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pt-enterprise .pt-action { grid-column: auto; justify-content: flex-end; }
  .price-notes { gap: 12px; }
  .price-notes article { padding: 18px 16px; }
  .price-notes p { font-size: 12px; }
  .integ-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .integ-row li { min-height: 86px; font-size: 24px; }
  .comp-grid { gap: 32px; }
  .comp-list li { grid-template-columns: 1fr; gap: 7px; padding-block: 20px; }
  .comp-list b { font-size: 24px; }
  .comp-list span { max-width: 40ch; }
  .faq details { padding-block: 18px; }
  .faq summary { gap: 16px; font-size: 24px; }
  .faq p { padding-right: 16px; font-size: 14px; }
  .cta-card { padding: 32px 24px; }
  .cta-card .kicker { max-width: 100%; font-size: 10.5px; line-height: 1.5; letter-spacing: .055em; padding: 8px 12px; text-align: center; }
  .cta-card h2 { font-size: clamp(48px, 15.3vw, 92px); margin: 30px 0 32px; }
  .cta-actions { flex-direction: column; align-items: stretch; }
  .cta-actions .btn { justify-content: center; }
  .cta-meta { flex-direction: column; gap: 13px; font-size: 10.5px; }
  .footer { padding-top: 48px; }
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 24px; }
  .footer-cols a { padding-block: 7px; font-size: 14px; }
  .footer-bot { margin-top: 32px; font-size: 10.5px; }
}

@media (max-width: 360px) {
  .price-notes { grid-template-columns: minmax(0, 1fr); }
  .pt-row { padding-inline: 18px; }
  .pt-featured .pt-name .pt-flag { left: 18px; }
  .pt-cta { min-width: auto; font-size: 11px; padding-inline: 11px; }
  .cta-card { padding-inline: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .faq details[data-animated] .faq-body { transition: none; }
  .map .hubs .hub-ring { opacity: .25; }
  .pt-cta,
  .pt-cta span { transition: background-color var(--dur-fast), color var(--dur-fast); }
}

/* Public company and support details, scoped to the footer. */
.footer-brand .footer-entity { margin-top: 22px; }
.footer-brand .footer-entity strong { color: var(--paper); font-weight: 600; }
.footer-address { max-width: 38ch; margin-top: 20px; color: var(--mute-2); font: normal 13px/1.7 var(--font-body); }
.footer-address > span { display: block; margin-bottom: 6px; color: var(--paper); font: 400 10.5px/1.6 var(--font-mono); }
.footer-support { display: inline-block; max-width: 100%; min-height: 44px; margin-top: 12px; padding-block: 10px; color: var(--signal); font-size: 13px; overflow-wrap: anywhere; }
.footer-support:hover { text-decoration: underline; text-underline-offset: 4px; }
.site-dialog{position:fixed;inset:0;margin:auto;width:min(600px,calc(100% - 32px));max-height:calc(100dvh - 40px);overflow:auto;padding:44px;border:1px solid var(--line);border-radius:var(--radius-xl);background:var(--ink);color:var(--paper);box-shadow:var(--shadow-lg)}
.site-dialog::backdrop{background:var(--backdrop);backdrop-filter:blur(8px)}
.site-dialog[open]{animation:dialog-enter 220ms var(--ease-out)}
@keyframes dialog-enter{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.dialog-close{position:absolute;right:16px;top:16px;width:36px;height:36px;font-size:26px;line-height:1;border-radius:50%;border:1px solid var(--line-input)}
.dialog-close:hover{background:var(--ink-2)}
.site-dialog h2{font:400 clamp(36px,5vw,50px)/1.05 var(--font-display);letter-spacing:-.03em;margin-bottom:18px}.site-dialog h2 em{font-weight:300;color:var(--signal)}
.site-dialog .section-tag{font-size:10px;margin-right:20px}
.dialog-intro{font-size:14px;line-height:1.65;color:var(--bone);margin-bottom:24px}
.site-dialog form{display:grid;gap:18px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;min-width:0}
.field{display:grid;gap:6px;min-width:0}.field label{font-size:12px;font-weight:600}
.field input,.field select,.field textarea{width:100%;min-width:0;font:14px/1.5 var(--font-body);padding:11px 12px;color:var(--paper);background:var(--carbon);border:1px solid var(--line-input);border-radius:var(--radius-md)}
.field textarea{resize:vertical;min-height:96px;max-height:240px}
.field [aria-invalid=true]{border-color:var(--danger)}
.field-error{font-size:12px;color:var(--danger)}.field-error:empty{display:none}
.check-field{display:flex;align-items:flex-start;gap:10px;font-size:12px;color:var(--bone)}.check-field input{accent-color:var(--signal);width:16px;height:16px;flex-shrink:0;margin-top:2px}
.selected-pack{margin-bottom:20px;padding:12px 16px;border-radius:var(--radius-md);background:var(--signal-tint);color:var(--signal);font:12px/1.6 var(--font-mono)}
.delivery-result{margin-top:24px;padding:20px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--carbon);font:12px/1.8 var(--font-mono);overflow-wrap:anywhere}
.delivery-result strong{display:block;margin-bottom:8px;color:var(--signal)}.delivery-result ol{padding-left:20px}.delivery-result p{color:var(--mute);font-size:11px;margin-top:12px}
.form-status{color:var(--signal);font-size:12px;line-height:1.6}.form-status:empty{display:none}
.info-content{font-size:15px;line-height:1.7;color:var(--bone)}.info-content p+p,.info-content ul{margin-top:14px}.info-content ul{padding-left:20px}.info-content .btn{margin-top:24px}.info-content code{font:12px var(--font-mono);overflow-wrap:anywhere}.info-content a:not(.btn){color:var(--signal);text-decoration:underline;text-underline-offset:3px}
.no-js-notice{padding:24px var(--pad-x);background:var(--signal-tint);color:var(--paper)}
.site-dialog button:disabled{opacity:.65;cursor:wait}
@media(max-width:600px){.site-dialog{padding:38px 24px 28px;border-radius:var(--radius-lg)}.form-grid{grid-template-columns:1fr}.site-dialog h2{font-size:40px}.field input,.field select,.field textarea{font-size:16px}}
@media(prefers-reduced-motion:reduce){.site-dialog[open]{animation:none}}
@media(max-width:600px){.section-head{padding-inline:0}}

/* Email-first account screens, inspired by the Dodo Payments auth layout. */
.auth-dialog{--ctx-ring:var(--focus-ring-contrast);--ctx-signal-bg:var(--contrast-signal);--ctx-signal-fg:var(--contrast-bg);width:100vw;max-width:none;height:100dvh;max-height:100dvh;margin:0;inset:0;padding:clamp(64px,12vh,120px) 24px 48px;border:0;border-radius:0;background:var(--contrast-bg);color:var(--contrast-text);box-shadow:none;overscroll-behavior:contain}
.auth-dialog[open]{animation:auth-enter 180ms var(--ease-out)}
.auth-dialog::backdrop{background:var(--contrast-bg);backdrop-filter:none}
.auth-dialog .dialog-close{position:fixed;top:20px;right:20px;width:40px;height:40px;border-color:var(--contrast-line-strong);color:var(--contrast-text);background:var(--contrast-bg)}
.auth-dialog .dialog-close:hover{background:var(--contrast-surface)}
.auth-content{width:100%;max-width:384px;margin-inline:auto}
.auth-wordmark{display:flex;width:180px;height:60px;align-items:center;justify-content:center;margin:0 auto 28px;padding:8px 12px;border:1px solid var(--contrast-line-strong);border-radius:12px;background:var(--ink)}
.auth-wordmark img{display:block;width:100%;height:auto;object-fit:contain}
.auth-dialog h2{margin:0 0 8px;text-align:center;font:600 23px/1.35 var(--font-body);letter-spacing:-.035em;color:var(--contrast-text)}
.auth-switch{margin:0 0 34px;text-align:center;font-size:13px;line-height:1.6;color:var(--contrast-mute)}
.auth-switch a,.auth-support a{color:var(--contrast-text);font-weight:500}
.auth-switch a:hover,.auth-support a:hover,.auth-policies a:hover{color:var(--contrast-signal);text-decoration:underline;text-underline-offset:3px}
.auth-dialog form{gap:16px}
.auth-dialog .field{gap:8px}
.auth-dialog .field label{font-size:13px;line-height:1.4;font-weight:400;color:var(--contrast-text-2)}
.auth-dialog .field input{min-height:44px;padding:10px 12px;background:var(--contrast-bg);border-color:var(--contrast-line-strong);border-radius:7px;color:var(--contrast-text);font-size:14px}
.auth-dialog .field input::placeholder{color:var(--contrast-mute);opacity:1}
.auth-dialog .field input[readonly]{background:var(--contrast-surface);color:var(--contrast-text-2)}
.auth-dialog .field [aria-invalid=true]{border-color:var(--danger-contrast)}
.auth-dialog .field-error{color:var(--danger-contrast)}
.auth-field-help{font-size:12px;line-height:1.6;color:var(--contrast-mute)}
.auth-dialog .auth-primary{--btn-bg:var(--contrast-text);--btn-fg:var(--contrast-bg);--btn-bg-hover:var(--contrast-signal);--btn-fg-hover:var(--contrast-bg);--btn-border:var(--contrast-text);--btn-border-hover:var(--contrast-signal);justify-content:center;min-height:44px;border-radius:7px;padding:10px 16px;font-size:14px;font-weight:500}
.auth-back{width:fit-content;margin-inline:auto;min-height:36px;color:var(--contrast-text-2);font-size:12px;text-decoration:underline;text-underline-offset:3px}
.auth-back:hover{color:var(--contrast-signal)}
.auth-dialog .form-status{padding:12px 14px;border:1px solid var(--contrast-line-strong);border-radius:7px;background:var(--contrast-surface);color:var(--contrast-text-2);font-size:12px;line-height:1.6}
.auth-policies{margin-top:20px;text-align:center;font-size:12px;line-height:1.6;color:var(--contrast-mute)}
.auth-policies a{color:var(--contrast-text-2);text-decoration:underline;text-underline-offset:3px}
.auth-support{margin-top:32px;text-align:center;color:var(--contrast-mute);font-size:12px;line-height:1.6}
@keyframes auth-enter{from{opacity:0}to{opacity:1}}
@media(max-width:600px){.auth-dialog{padding:70px 24px 32px;border-radius:0}.auth-dialog h2{font-size:22px}.auth-dialog .field input{font-size:16px}.auth-wordmark{margin-bottom:24px}.auth-switch{margin-bottom:28px}}
@media(prefers-reduced-motion:reduce){.auth-dialog[open]{animation:none}}