/* ===== tokens.css (inlined) ===== */
/* ============================================================
   Inventive — Design Tokens (canonical)
   Single source of truth for color + type. Every slice imports this.
   Hand-authored LP pages should inline these custom props.
   ============================================================ */

:root {
  /* ---- INK : the near-black navy that replaces pure #000 ----
     Aesthetic direction: "black" = dark dark navy, NOT #000.
     Derived from inventive bracket navy (#1e2d3d) pushed darker for the
     page-black end. High contrast so accent color POPs. */
  --ink-950: #0a121b;  /* page black (deepest) */
  --ink-900: #0e1822;  /* primary dark surface */
  --ink-800: #14222f;  /* raised dark surface */
  --ink-700: #1e2d3d;  /* inventive bracket navy / borders on dark */
  --ink-600: #2b3e51;
  --ink-500: #3d5266;  /* muted text on dark */
  --ink-400: #5c748a;  /* placeholder / muted on dark */

  /* ---- NEUTRALS (8-shade, from brand kit) ---- */
  --white:            #ffffff;
  --neutral-lightest: #f2f2f2;
  --neutral-lighter:  #d8d8d8;
  --neutral-light:    #b2b2b2;
  --neutral:          #7f7f7f;
  --neutral-dark:     #4c4c4c;
  --neutral-darker:   #383737;
  --black:            #000000; /* avoid as bg — prefer --ink-950 */

  /* ---- BLUE : primary brand ----
     Rebuilt 2026-07-09 to sit closer to the logo-square blue and be accessible
     for text. Light/light-mid track the bold logo cyan (#41c9ff at --blue-light);
     main steps deeper to #1ca2e0 so it clears AA on dark (6.5:1) and steps to
     --blue-dark (#086fc1, 5.2:1) for text on white. Dark end unchanged. */
  --blue-lightest: #e1f4ff;
  --blue-lighter:  #7ad9ff;
  --blue-light:    #41c9ff;  /* logo-square cyan */
  --blue:          #1ca2e0;  /* main · new core */
  --blue-dark:     #086fc1;
  --blue-darker:   #074c86;
  --blue-darkest:  #062e53;

  /* ---- GREEN : primary CTA / action ---- */
  --green-lightest: #e7faef;
  --green-lighter:  #cff5e0;
  --green-light:    #59dc93;
  --green:          #13ce66;  /* main — primary action */
  --green-dark:     #0fa451;
  --green-darker:   #075228;
  --green-darkest:  #053d1e;

  /* ---- ORANGE ---- */
  --orange-lightest: #fef3e5;
  --orange-lighter:  #fee7cc;
  --orange-light:    #fead4c;
  --orange:          #fe8a00;
  --orange-dark:     #cb6e00;
  --orange-darker:   #653700;
  --orange-darkest:  #4c2900;

  /* ---- RED ---- */
  --red-lightest: #fee6e5;
  --red-lighter:  #fecdcc;
  --red-light:    #fe504c;
  --red:          #fe0500;
  --red-dark:     #cb0400;
  --red-darker:   #9b0300;
  --red-darkest:  #4c0100;

  /* ---- YELLOW ---- */
  --yellow-lightest: #fff9e9;
  --yellow-lighter:  #fff4d4;
  --yellow-light:    #ffd86b;
  --yellow:          #ffc82c;
  --yellow-dark:     #cca023;
  --yellow-darker:   #665011;
  --yellow-darkest:  #4c3c0d;

  /* ---- ELECTRIC accents ----
     Primary brand mains (above) = tier 1. ELECTRIC = a neon/LED-bright version of
     each accent, full 7-shade ramp. Use on near-black (Ink) surfaces; pair with a
     --glow-* bloom shadow for the "Glowing" treatment. Sparing — these shout. */
  --blue-electric-lightest: #e2f4ff; --blue-electric-lighter: #c0e8ff; --blue-electric-light: #7dcfff;
  --blue-electric: #0993ff; --blue-electric-dark: #0876cc; --blue-electric-darker: #075488; --blue-electric-darkest: #06375b;
  --green-electric-lightest: #dbffeb; --green-electric-lighter: #b3ffd4; --green-electric-light: #61ffa7;
  --green-electric: #00ff71; --green-electric-dark: #02d060; --green-electric-darker: #048444; --green-electric-darkest: #065433;
  --orange-electric-lightest: #ffefdb; --orange-electric-lighter: #ffdcb3; --orange-electric-light: #ffb761;
  --orange-electric: #ff8b00; --orange-electric-dark: #ce7305; --orange-electric-darker: #7f4c0e; --orange-electric-darkest: #4d3413;
  --yellow-electric-lightest: #fff6de; --yellow-electric-lighter: #ffedb9; --yellow-electric-light: #ffd96d;
  --yellow-electric: #ffc214; --yellow-electric-dark: #ce9f15; --yellow-electric-darker: #7f6618; --yellow-electric-darkest: #4d4319;
  --red-electric-lightest: #ffdcdb; --red-electric-lighter: #ffb4b3; --red-electric-light: #ff6461;
  --red-electric: #ff0500; --red-electric-dark: #ce0805; --red-electric-darker: #7f0c0e; --red-electric-darkest: #4d0e13;

  /* --blue-azure : the deeper/saturated brand blue (#0993FF). Lives down here by the
     electric bits now — same value as --blue-electric/--glow-blue. Used by the
     seam-paint splash + electric/glow blue contexts. Kept so we don't lose it. */
  --blue-azure: #0993ff;

  /* ---- ELECTRIC main, wide-gamut (P3) ----
     sRGB hex is maxed out — these escape it. --{c}-electric-vivid defaults to the
     sRGB electric, then @supports overrides with color(display-p3 ...) on capable
     screens. Green/blue/cyan gain most; red/orange/yellow lean on glow+gradient.
     Use --{c}-electric-vivid for the FILL of electric/glowing tiles. */
  --blue-electric-vivid:   var(--blue-electric);
  --green-electric-vivid:  var(--green-electric);
  --orange-electric-vivid: var(--orange-electric);
  --yellow-electric-vivid: var(--yellow-electric);
  --red-electric-vivid:    var(--red-electric);

  /* glow color = the electric main, used for box-shadow bloom */
  --glow-blue:   #0993ff;  /* azure candidate — electric/glow blue */
  --glow-green:  #00ff71;
  --glow-orange: #ff8b00;
  --glow-yellow: #ffc214;
  --glow-red:    #ff0500;

  /* reusable bloom: layered shadow for a "lit LED tile" look.
     Use: box-shadow: var(--led-bloom, 0 0 0); with --led-color set per element. */

  /* ---- GLASS / GAUSSIAN-BLUR (frosted backdrop behind tiles, nav, headers) ----
     Seen across the award sites (Vucko/Superhuman/Cosmos): a blurred translucent
     panel that lets the background bleed through softly. Apply .glass utility, or:
       backdrop-filter: var(--glass-blur); background: var(--glass-fill-dark|light);
     Pair with a hairline border for the edge-light. */
  --glass-blur:        blur(16px) saturate(1.4);
  --glass-blur-strong: blur(28px) saturate(1.5);
  --glass-fill-dark:   color-mix(in srgb, var(--ink-900) 55%, transparent);
  --glass-fill-light:  color-mix(in srgb, #ffffff 55%, transparent);
  --glass-border-dark: color-mix(in srgb, #ffffff 12%, transparent);
  --glass-border-light:color-mix(in srgb, var(--ink-900) 10%, transparent);

  /* ---- BUTTON shape (from profitfinder/studentsignal — 12px, the tasteful middle) ---- */
  --btn-radius: 12px;
  --btn-pad-y: 0.6rem;
  --btn-pad-x: 1.5rem;
  --btn-border: 1px;

  /* ---- TYPE FAMILIES ---- */
  --font-display: 'Montserrat', system-ui, sans-serif;       /* big all-caps headers */
  --font-body:    'Montserrat', system-ui, sans-serif;       /* body + UI */
  --font-script:  'Kalam', cursive;                          /* quote/testimonial body — DEFAULT handwritten hand (Kalam = most legible); builder VARIES it per quote at compose (.hand-*, lib/hands.mjs). Fraunces retired from the quote default. */
  --quote-style:  normal;                                    /* quote slant — normal (handwriting reads wrong faux-italicized); .hand-* keep this normal, a serif hand could set italic locally */
  /* LOCKED DECISION — emphasis font is 'DM Serif Display' (italic + faux-bold
     stroke). Chosen deliberately in the emph font bake-off (slices/_emph-font-tester.html,
     winner = dms-fb) over 13 alternatives. It is explicitly NOT 'Fraunces' — Fraunces
     is the AI-default editorial serif and we rejected it for emphasis.
     Fraunces is now FULLY RETIRED: quotes/testimonials use the handwritten HAND
     system instead (--font-script defaults to Kalam; the builder rotates .hand-*
     per quote/card at compose — see lib/hands.mjs + .hand-* classes below). Do not
     point .emph OR --font-script at Fraunces. Guarded by test/check-decisions.mjs. */
  --font-emph:    'DM Serif Display', Georgia, serif;        /* emphasis line (.emph) — italic + faux-bold stroke */
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace; /* labels / eyebrows / code-y accents */
  /* emoji: prefer Apple's glossy set where present (Mac/iOS), graceful fallback
     to Segoe (Win) / Noto (Android/Linux). Apply alongside the text font so only
     the emoji glyphs pick it up. */
  --font-emoji:   'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;

  /* ---- TYPE SCALE (fluid, mobile-first; clamp like LP templates) ---- */
  --t-display:  clamp(3.25rem, 11vw, 9rem);    /* hero ALL-CAPS — big-block, award-site scale (vucko 8rem, neon 10rem+, cosmos 100px) */
  --t-h1:       clamp(2.25rem, 5.5vw, 4rem);
  --t-h2:       clamp(1.75rem, 4vw, 2.75rem);
  --t-h3:       clamp(1.35rem, 2.6vw, 1.85rem);
  --t-body-lg:  clamp(1.05rem, 1.4vw, 1.25rem);
  --t-body:     1rem;       /* 16px base */
  --t-body-sm:  0.9rem;     /* 14.4px secondary */
  --t-label:    0.78rem;    /* mono label / eyebrow */
  --t-caption:  0.7rem;     /* the tiny section-number eyebrow ("01 — COLOR") */
  --t-micro:    0.62rem;    /* smallest — meta, hex, fine print */
  --t-quote:    clamp(1.5rem, 3.5vw, 2.5rem);

  /* ---- WEIGHTS ---- */
  --w-regular: 400;
  --w-medium:  500;
  --w-semibold:600;
  --w-bold:    700;
  --w-black:   900;  /* big display caps */

  /* ---- RHYTHM ---- */
  --tracking-display: -0.02em;  /* BIG display caps: tightened but not colliding (vucko's lighter end) */
  --tracking-caps:    -0.01em;  /* section/h2 caps: very slight tighten */
  --tracking-label:   0.14em;   /* small eyebrow labels: spread wide (positive) */
  --leading-tight: 0.95;     /* big display — tight stacked-block effect */
  --leading-snug:  1.18;
  --leading-body:  1.6;

  --radius: 10px;
  --radius-lg: 18px;

  /* ---- SPACING SCALE (whitespace system) ----
     Base unit = 4px. Use these for padding, gaps, margins — consistent rhythm.
     Naming: t-shirt sizes. Section padding uses the larger end. */
  --space-0:  0;
  --space-1:  4px;    /* hairline gaps, icon padding */
  --space-2:  8px;    /* tight inner padding */
  --space-3:  12px;   /* default gap between small items */
  --space-4:  16px;   /* base padding unit, paragraph gap */
  --space-5:  24px;   /* card padding, comfortable gap */
  --space-6:  32px;   /* group separation */
  --space-7:  48px;   /* sub-section spacing */
  --space-8:  64px;   /* section padding (mobile) */
  --space-9:  96px;   /* section padding (desktop) */
  --space-10: 128px;  /* hero / major section breathing room */

  /* component-level spacing aliases */
  --pad-card:    var(--space-5);              /* 24px inside cards */
  --pad-section: clamp(56px, 9vw, 140px);     /* vertical section rhythm, fluid */
  --pad-inline:  clamp(20px, 5vw, 80px);      /* horizontal edge padding (NOT a column gutter) */
  --gap-grid:    var(--space-5);              /* grid/flex gap default */
  --gap-stack:   var(--space-4);              /* vertical stack gap */
  --maxw-prose:  68ch;                        /* readable text column (text blocks only) */

  /* ---- LAYOUT RULE: FULL-BLEED + 12-COLUMN, all viewports ----
     Pages fill the window edge-to-edge at every breakpoint. The full-bleed law
     is UNCHANGED — no narrow centered band with big empty gutters. It is now
     expressed through a 14-TRACK grid (see 12-COLUMN GRID block below): two
     outer "breathing" tracks (the open margin, = --g-edge) + 12 content columns.
     Backgrounds and edge media span bleed→bleed (true edge-to-edge); content
     aligns to the inner 12 so every slice shares ONE column model instead of a
     bespoke fr-ratio each. --pad-inline is kept as the edge padding alias
     (= --g-edge). Long-form prose still constrains to --maxw-prose. */
  --bp-tablet:  768px;   /* mobile → tablet (1-up → 2-up) */
  --bp-desktop: 1200px;  /* tablet → full desktop (2-up → full 12-col) */
}

/* ============================================================
   12-COLUMN GRID (2026-07-04) — ONE column model for the whole slice library.
   Replaces per-slice bespoke grids (repeat(2/3/5/6,1fr), 1.1fr/.9fr ratios,
   13 different min-width breakpoints). Every text slice lays content on these
   12 columns; only pure shape/mask seams (no content) opt out.

   MENTAL MODEL — a 14-track full-bleed grid:
     [ edge ] [ 1 2 3 4 5 6 7 8 9 10 11 12 ] [ edge ]
       ^open      ^12 content columns          ^open
   The two edge tracks are the breathing margin. Backgrounds/edge media span the
   whole thing (bleed→bleed); content sits in the 12.

   TWO ways to use it:
   1. .g-cols  — THE common case (~95%). A plain 12-col grid, capped + centered,
      edge padding = the breathing tracks. Put content children on it and give
      each a .col-N span (col-6 + col-6 = halves, col-4 ×3 = thirds, etc).
      Auto-flow works, so .col-N is all most slices need.
   2. .g-grid  — only when a CHILD must touch the viewport edge (a full-bleed
      image beside gridded text). 14 named tracks; children default to the
      content region, add .g-bleed to span the full viewport.

   Breakpoints are FIXED at --bp-tablet / --bp-desktop. Do not invent new ones.
   ============================================================ */
:root {
  --g-cols:   12;
  --g-gutter: clamp(16px, 2.2vw, 32px);   /* space between content columns */
  --g-edge:   var(--pad-inline);          /* outer breathing tracks = old --pad-inline (clamp 20→80px) */
  --g-maxw:   1400px;                      /* content-region soft cap; edge tracks absorb surplus on wide screens */
}

/* THE COMMON CASE — 12-col content grid, capped + centered. */
.g-cols {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--g-gutter);
  row-gap: var(--gap-grid);
  width: 100%;
  max-width: calc(var(--g-maxw) + 2 * var(--g-edge)); /* content ≈ --g-maxw; edge padding sits outside it */
  margin-inline: auto;
  padding-inline: var(--g-edge);
}

/* FULL-BLEED 14-track grid — for slices with an edge-touching child. */
.g-grid {
  display: grid;
  column-gap: var(--g-gutter);
  grid-template-columns:
    [bleed-start] minmax(var(--g-edge), 1fr)
    [content-start] repeat(12, minmax(0, calc((var(--g-maxw) - 11 * var(--g-gutter)) / 12))) [content-end]
    minmax(var(--g-edge), 1fr) [bleed-end];
}
.g-grid > *        { grid-column: content-start / content-end; } /* default: full content width */
.g-grid > .g-bleed { grid-column: bleed-start / bleed-end; }     /* opt-in: full viewport edge-to-edge */

/* SPAN utilities — work in .g-cols and in any nested repeat(12,1fr) grid. */
.col-1{grid-column:span 1}   .col-2{grid-column:span 2}   .col-3{grid-column:span 3}
.col-4{grid-column:span 4}   .col-5{grid-column:span 5}   .col-6{grid-column:span 6}
.col-7{grid-column:span 7}   .col-8{grid-column:span 8}   .col-9{grid-column:span 9}
.col-10{grid-column:span 10} .col-11{grid-column:span 11} .col-12{grid-column:span 12}
/* explicit start line (1..13) when auto-flow isn't enough (e.g. offset a column) */
.start-1{grid-column-start:1}  .start-2{grid-column-start:2}  .start-3{grid-column-start:3}
.start-4{grid-column-start:4}  .start-5{grid-column-start:5}  .start-6{grid-column-start:6}
.start-7{grid-column-start:7}  .start-8{grid-column-start:8}  .start-9{grid-column-start:9}
.start-10{grid-column-start:10} .start-11{grid-column-start:11} .start-12{grid-column-start:12} .start-13{grid-column-start:13}

/* RESPONSIVE — one shared cascade for every slice. Tablet: spans collapse to
   halves; mobile: everything stacks to full content width. Slices needing a
   different tablet split override .col-N inside their own @media (min-width:768px). */
@media (max-width: 1199px) {
  .g-cols > [class*="col-"] { grid-column: span 6; }   /* 12→2-up by default on tablet */
}
@media (max-width: 767px) {
  .g-cols > [class*="col-"] { grid-column: 1 / -1; }   /* stack on mobile */
}

/* Wide-gamut electric fills — only on P3-capable screens. Pushes saturation past
   the sRGB ceiling so "electric" actually reads electric. sRGB fallback above. */
@supports (color: color(display-p3 1 1 1)) {
  :root {
    --blue-electric-vivid:   color(display-p3 0.04 0.58 1.00);  /* azure candidate — deeper electric blue */
    --green-electric-vivid:  color(display-p3 0.10 1.00 0.45);  /* lit LED green — biggest jump */
    --orange-electric-vivid: color(display-p3 1.00 0.52 0.00);  /* hot neon orange */
    --yellow-electric-vivid: color(display-p3 1.00 0.82 0.00);  /* acid yellow */
    --red-electric-vivid:    color(display-p3 1.00 0.10 0.10);  /* vivid red */
  }
}

/* ============================================================
   MODE TOKENS — surfaces/lines/muted per mode.
   Mode is a BUILD-TIME choice, not a runtime user toggle: the page
   composer puts `.mode-dark` or `.mode-light` on a section wrapper and
   the slice renders statically in that mode. `[data-theme=...]` on <html>
   is the equivalent for a slice's standalone preview file / the catalog
   iframe — both selectors set the same tokens so a slice works either way.
   ============================================================ */
[data-theme="dark"], .mode-dark {
  --surface: var(--ink-900); --surface-2: var(--ink-800);
  --line: var(--ink-700); --muted: var(--ink-400);
  --logo-text: #f9fafc; --logo-bracket: var(--blue);
  --page-bg: var(--ink-950); --page-fg: var(--neutral-lightest);
  /* semantic text accents — see SMALL-BLUE + LINK rules below.
     --blue-text: small/micro blue accents (steps to blue-dark on white).
     --link / --link-hover: TRUE clickable inline links — ORANGE, so they read as
     links and don't collide with blue affordances or the green action CTA. */
  --blue-text: var(--blue);
  --eyebrow: var(--blue-text);   /* canonical eyebrow color (the "// label" first line) = core blue, mode-aware via --blue-text. Every slice eyebrow should use color:var(--eyebrow). */
  --link: var(--orange); --link-hover: var(--orange-light);
  /* GLOW colors — bright electric, reads as emission on near-black */
  --glow-cta:    var(--glow-green);
  --glow-brand:  var(--glow-blue);
  --glow-spice:  var(--glow-orange);
  /* status dot (● live/active) — electric + soft bloom on dark */
  --status-dot:  var(--green-electric);
  --status-glow: 0 0 10px var(--glow-green);
}
[data-theme="light"], .mode-light {
  --surface: var(--neutral-lightest); --surface-2: #eef1f6;   /* elevated/card surface: faint cool tint so cards read on white (was #fff = white-on-white) */
  --line: var(--neutral-lighter); --muted: var(--neutral-dark);
  --logo-text: var(--ink-900); --logo-bracket: var(--blue-darker);
  --page-bg: var(--white); --page-fg: var(--ink-900);
  /* on white: small blue steps to blue-dark (contrast); links = orange-dark (core
     orange washes out on white at text size — orange-dark pops + stays legible). */
  --blue-text: var(--blue-dark);
  --eyebrow: var(--blue-text);   /* eyebrow on white steps to blue-dark for contrast (via --blue-text) */
  --link: var(--orange-dark); --link-hover: var(--orange);
  /* GLOW colors — a DARKER shade of the same hue so the colored light is
     visible radiating on white. NOT a drop-shadow: glow is 0-offset, all
     directions. Starting at -dark; tune by eye. */
  --glow-cta:    var(--green-dark);
  --glow-brand:  var(--blue-dark);
  --glow-spice:  var(--orange-dark);
  /* status dot — base green on white (electric/green washes out); no glow */
  --status-dot:  var(--green);
  --status-glow: none;
}
/* a section wrapper that owns its mode paints its own bg/fg */
.mode-dark, .mode-light { background: var(--page-bg); color: var(--page-fg); }

/* …EXCEPT a slice that paints its OWN full-bleed background layer (the footer-reveal's
   position:fixed curtain, any future full-bleed hero/curtain). The section's opaque
   --page-bg would sit ON TOP of that fixed layer and occlude it — this is the recurring
   "footer reveal shows a solid ink block instead of the reveal" bug. Such sections are
   tagged .owns-bg by compose.mjs (see the ownsBg branch there); keep bg transparent so
   the slice's own layer shows through. Text color still inherits from the polarity class. */
.mode-dark.owns-bg, .mode-light.owns-bg { background: transparent; }

/* ============================================================
   SURFACE MODES (2026-07-01) — more section backgrounds BETWEEN full-ink and
   full-white, so pages aren't only dark #0a121b ↔ white #ffffff. A surface class
   layers ON TOP of a polarity class (.mode-dark / .mode-light): the polarity drives
   ALL text/button/icon/glow/emph styling (UNCHANGED — every existing .mode-* and
   [data-theme] rule still applies); the surface class only swaps --page-bg (+ --surface/--line/
   `--muted`). The composer emits both, e.g. class="mode-dark surf-ink-800".
   USE THESE AS BACKGROUNDS / majority color spaces for big elements & sections.

   Named modes (composer `mode:` value → wrapper classes) — the CONFIGURABLE
   backgrounds, all available to any slice:
     dark          → mode-dark                      (page #0a121b · deepest ink)      [base]
     darkest-blue  → mode-dark  surf-darkest-blue    (page #062e53 · deep brand navy)  [NEW]
     ink-800       → mode-dark  surf-ink-800         (page #14222f · raised navy)
     ink-600       → mode-dark  surf-ink-600         (page #2b3e51 · slate navy)
     light         → mode-light                      (page #ffffff · brightest)        [base]
   Loud brand colors (red/orange/green/yellow/blue) are NOT surfaces — they're CTA
   band colors baked into curated CTA slices only (see CTA_COLORS in layout-rules).
   Use the raw tokens (--red/--orange/--green/--yellow/--blue) with BLACK/ink text.
   (ink-400 + blue-lighter retired 2026-07-09 — washed mids that read flat.)
   Text/line/muted step up or down the ramp so contrast stays legible.
   ============================================================ */
/* DARK-polarity surfaces (light text) — deep brand navy → raised ink → slate */
.mode-dark.surf-darkest-blue { --page-bg: var(--blue-darkest);  --surface: var(--blue-darker);   --surface-2: var(--blue-dark); --line: var(--blue-dark); --muted: var(--neutral-light); }  /* bright blue surface → ink-400 muted washes out; lighten it like surf-ink-600 (user fb) */
.mode-dark.surf-ink-800      { --page-bg: var(--ink-800);       --surface: var(--ink-700);       --surface-2: var(--ink-600); --line: var(--ink-600); }
.mode-dark.surf-ink-600      { --page-bg: var(--ink-600);       --surface: var(--ink-500);       --surface-2: var(--ink-500); --line: var(--ink-500); --muted: var(--neutral-light); }

/* ============================================================
   PEEK SEAM — the transition at a slice's BOTTOM edge (we build top→bottom:
   header → slices → footer, so the seam lives at the bottom). A seam makes the
   next slice "crest" so there's no false bottom + slices read as one designed
   surface (the slice bridge).

   KEY: the area BELOW the seam line is painted --seam-below, a BUILD-TIME color
   the composer sets to match the NEXT slice's mode (ink or white) so it flows in.
   Default = transparent (seam shows the slice's own bg). The composer sets:
     <slice ... style="--seam-below: var(--ink-950)">   (next slice is dark)
     <slice ... style="--seam-below: var(--white)">     (next slice is light)

   Put a `.seam` element as the LAST child of a slice section. Shape variants:
   .seam--crest (rounded panel lip), .seam--diagonal (angled cut), .seam--step.
   Not every slice suits every seam — compose by feel.
   ============================================================ */
.seam { --seam-h: clamp(48px, 8vh, 110px);
        /* extended contract (peek-seam library, 2026-06-30): --seam-above = the CURRENT
           slice's surface (needed by torn deckle / dissolve / bracket that reference both
           neighbors); --seam-band = a STATEMENT seam's own fixed band color (independent of
           both neighbors); --seam-fg = band text; --play = running|paused for animated seams
           (composer/scroll-spy sets paused under reduced-motion).
           --seam-above/--seam-below are INHERITED from the .seam-wrap (composed) or <body>
           (standalone) neighbor pickers (.sa-*/.sb-*) — do NOT reset them here or the band
           overlay crests (.seam__above/.seam__below) paint transparent and read as FLAT. */
        --seam-band: var(--ink-950); --seam-fg: var(--neutral-lightest); --play: running;
        /* OPAQUE BASE = the ABOVE-neighbor color. A shaped seam's .seam__below is clipped, so
           the un-clipped area would be TRANSPARENT — and a fixed footer-reveal behind the page
           (z-index:-1) then shows THROUGH that hole (the INVENTIVE wordmark bleeding through a
           seam). Painting the base = above color closes the hole and is the correct transition
           (above color on top, below-color crest at the bottom). Bands override with their own
           --seam-band color. */
        background: var(--seam-above);
        position: relative; height: var(--seam-h); margin-top: calc(var(--space-7) * -1 + var(--space-7)); }
.seam__below { position:absolute; left:0; right:0; bottom:-1px; top:0; background: var(--seam-below); }
/* No horizontal scrollbar: seam masks/marquees can render a hair past the viewport; clip it
   at the page level so nothing "extends beyond the page" (user 2026-07). clip (not hidden) so
   it doesn't create a scroll container that breaks sticky/position:fixed reveals. */
html, body { overflow-x: clip; max-width: 100%; }
.seam, .seam__below, .seam__above { max-width: 100%; }
/* CONTAIN slice glows/textures inside their own slice — a hardcoded ambient/corner glow must
   NOT bleed past the slice edge into a neighbor (that's the "glow leaking out of the slice"
   ghost edge, esp. next to a peek-seam). Content slices clip; SEAMS are exempt (their crests
   overhang 1px on purpose) and #footer/#nav are exempt (reveal + sticky need to escape). */
section.slice:not([id^="gen-seam"]):not(#footer):not(#nav) { overflow: clip; }

/* ── NEIGHBOR BACKGROUND PICKERS (2026-07-01) — a peek seam bridges TWO slices, so it
   gets TWO independent background toggles instead of one dark/light: `bgAbove` sets the
   slice ABOVE (--seam-above), `bgBelow` sets the slice BELOW (--seam-below). Each offers
   the configurable surfaces (white, ink, darkest-blue, ink-800/600) with a matching
   text color. Applied to a seam slice's <body> (default) and swapped live by the
   catalog knobs. Keys mirror SURFACES.seam in layout-rules.mjs. ── */
.sa-white       { --seam-above: var(--white);         --seam-above-fg: var(--ink-900); }
.sa-ink         { --seam-above: var(--ink-950);        --seam-above-fg: var(--neutral-lightest); }
.sa-darkest-blue{ --seam-above: var(--blue-darkest);   --seam-above-fg: var(--neutral-lightest); }
.sa-ink-800     { --seam-above: var(--ink-800);        --seam-above-fg: var(--neutral-lightest); }
.sa-ink-600     { --seam-above: var(--ink-600);        --seam-above-fg: var(--neutral-lightest); }
.sb-white       { --seam-below: var(--white);         --seam-below-fg: var(--ink-900); }
.sb-ink         { --seam-below: var(--ink-950);        --seam-below-fg: var(--neutral-lightest); }
.sb-darkest-blue{ --seam-below: var(--blue-darkest);   --seam-below-fg: var(--neutral-lightest); }
.sb-ink-800     { --seam-below: var(--ink-800);        --seam-below-fg: var(--neutral-lightest); }
.sb-ink-600     { --seam-below: var(--ink-600);        --seam-below-fg: var(--neutral-lightest); }
@media (prefers-reduced-motion: reduce) { .seam [data-anim], .seam__anim { animation: none !important; } }

/* crest: a rounded-top lip rises from below — the canonical "next slice peeking".
   The lip is painted --seam-below (next slice color) with rounded top corners. */
/* crest: the next-slice color rises as ONE smooth wave that spans edge to edge — the
   50%/px horizontal radius makes each top corner arc a half-width, so they meet at
   center into a single continuous crest touching both side edges. */
.seam--crest .seam__below { top: 34%; border-radius: 50% 50% 0 0 / 46px 46px 0 0; }
/* label sits on the 12-col content rail, not the raw edge pad — same formula the
   capped containers resolve to (rail = max(edge, centered-1400 leftover)). */
.seam--crest .seam__label { position:absolute; left:max(var(--g-edge, var(--pad-inline)), calc((100% - var(--g-maxw, 1400px)) / 2)); bottom:14px; z-index:1;
   font-family:var(--font-mono); font-size:var(--t-label); letter-spacing:.04em; color:var(--muted); }
.seam--crest .seam__label b { font-weight:500; }

/* diagonal: the next-slice color cuts up on an angle (semi-diagonal peek) */
.seam--diagonal .seam__below { clip-path: polygon(0 100%, 100% 35%, 100% 100%); }
.seam--diagonal.seam--flip .seam__below { clip-path: polygon(0 35%, 100% 100%, 0 100%); }

/* step: a flat shelf rises partway (blocky, build-log feel) */
.seam--step .seam__below { top: 50%; }

/* wavy: the next-slice color crests with an undulating top edge — an organic,
   liquid peek (softer cousin of crest). Edge = a repeating sine via SVG mask on
   the painted --seam-below region. --seam-wave tunes amplitude band height. */
.seam--wavy .seam__below {
  top: var(--seam-wave, 38%);
  /* one smooth sine PERIOD over 120u, baseline y20: crest (C…60 20) then trough
     (C…120 20). Both ends sit at y20 with mirrored slopes, so the tile repeats
     seamlessly — no cusps at the joins, no flat gaps. cubic = smooth (not jagged). */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40' preserveAspectRatio='none'%3E%3Cpath d='M0 20 C20 4 40 4 60 20 C80 36 100 36 120 20 V40 H0 Z' fill='%23000'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40' preserveAspectRatio='none'%3E%3Cpath d='M0 20 C20 4 40 4 60 20 C80 36 100 36 120 20 V40 H0 Z' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-size: clamp(200px, 26vw, 340px) 100%; mask-size: clamp(200px, 26vw, 340px) 100%;
  -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
}

/* scroll cue — an orange (spice) down-arrow that bobs; reuse on full-height
   slices. Place inside a slice; killed under reduced-motion. */
.peek-cue { display:flex; flex-direction:column; align-items:center; gap:7px;
   font-family:var(--font-mono); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.peek-cue svg { width:18px; height:26px; color:var(--orange-electric); animation:peekbob 1.8s ease-in-out infinite; }
@keyframes peekbob { 0%,100%{ transform:translateY(0); opacity:.7;} 50%{ transform:translateY(6px); opacity:1;} }
@media (prefers-reduced-motion:reduce){ .peek-cue svg { animation:none; } }

/* ============================================================
   HANDWRITTEN QUOTE HANDS — quote/testimonial slices render their quote in
   var(--font-script). The page BUILDER auto-assigns a "hand" per quote and per
   testimonial card at build time (rotator in lib/hands.mjs) so different quotes
   read like different PEOPLE wrote them. Each class only re-points --font-script
   (+ sets --quote-style:normal so the handwriting isn't faux-italicized). Applied
   to a slice WRAPPER (single quote) or a CARD element (testimonials list). Palette
   = the 7 the user picked. Fonts are loaded site-wide by compose (default fonts URL).
   ============================================================ */
.hand-satisfy    { --font-script:'Satisfy', cursive;             --quote-style:normal; }
.hand-dancing    { --font-script:'Dancing Script', cursive;      --quote-style:normal; }
.hand-gochi      { --font-script:'Gochi Hand', cursive;          --quote-style:normal; }
.hand-architects { --font-script:'Architects Daughter', cursive; --quote-style:normal; }
.hand-shadows    { --font-script:'Shadows Into Light', cursive;  --quote-style:normal; }
.hand-patrick    { --font-script:'Patrick Hand', cursive;        --quote-style:normal; }
.hand-kalam      { --font-script:'Kalam', cursive;               --quote-style:normal; }

/* ============================================================
   EMPHASIS — the brand's signature type tension. A display line is
   Montserrat black ALL-CAPS (the build/engineer voice); the emphasized
   payoff phrase switches to DM Serif Display ITALIC, BLUE, in TITLE CASE
   (the human/editorial voice). Color alone isn't enough — the font swap
   is the point. DM Serif ships a single weight, so we faux-bold it with
   -webkit-text-stroke to hold its own next to Montserrat 900.

   CASING RULE (locked): the emph phrase is ALWAYS Title Case — the first
   letter of every word capitalized. NEVER all-lowercase (looks unbalanced
   dropping out of an ALL-CAPS line) and NEVER all-caps (italic serif dies
   in caps). This is enforced in CSS with `text-transform: capitalize`, so
   you may author the emph text in any case in the markup — it always
   renders Title Case. Proper nouns already capitalized (ProfitFinder.ai)
   are unaffected: `capitalize` only uppercases the first letter of each
   word, it never lowercases the rest.

   Use <span class="emph"> inside a display headline.
   ============================================================ */
.emph {
  font-family: var(--font-emph);       /* DM Serif Display */
  font-style: italic;
  font-weight: 400;                    /* DM Serif is single-weight; stroke does the heft */
  text-transform: capitalize;          /* LOCKED: Title Case — first letter of each word, even inside a caps headline */
  color: var(--blue);
  letter-spacing: -0.005em;
  font-size: 1.04em;                   /* optical match to Montserrat black */
  line-height: 0.95;
  /* faux-bold: stroke in the SAME color thickens the single-weight face.
     paint-order keeps the stroke behind the fill so glyphs stay crisp. */
  -webkit-text-stroke: 1.5px currentColor;
  paint-order: stroke fill;
}

/* EMPH ON COLORED BANDS - bright band bgs (azure/green/orange) swallow the blue
   .emph. Bands tag their root with .band-on-color (or carry .seam--band-orange)
   and emphasis flips to white. Centralized here per the no-slice-emph-override rule. */
.band-on-color .emph,
.seam--band-orange .emph {
  color: rgba(255,255,255,.94);
  -webkit-text-stroke: 0;
}
/* .emph is core --blue on ALL themes, including light (big display blue is fine on
   white). For SMALL + MICRO blue text/accents, core --blue is too low-contrast on
   white — use the semantic token `var(--blue-text)` instead: it is core --blue on
   ink and steps to --blue-dark on white automatically. Slices should reach for
   --blue-text on any small blue label / index / eyebrow / arrow-cue, NOT raw --blue. */

/* ── LINKS — true clickable inline links are ORANGE ──────────────────────────
   Decision: blue is used for affordances/accents (arrow mini-CTAs, metrics) and
   green is the ONE action CTA — so a real inline text link gets its own color,
   ORANGE, to read as "click me" without colliding. `--link` is theme-aware
   (core orange on ink, orange-dark on white). Use the `.link` class (or
   `color:var(--link)`) on genuine inline links; do NOT make `.btn`, card/row
   wrappers, or arrow-cues orange — those stay as they are. */
.link { color: var(--link); text-decoration: underline; text-underline-offset: .16em;
  text-decoration-thickness: 1.5px; text-decoration-color: color-mix(in srgb, var(--link) 45%, transparent);
  transition: color .15s, text-decoration-color .15s; }
.link:hover { color: var(--link-hover); text-decoration-color: currentColor; }
/* helper: small blue accents that should step to blue-dark on white */
.blue-text { color: var(--blue-text); }
/* Non-webkit (older Firefox ignores text-stroke): lean on the heaviest real
   path we have so it never renders thin/unstyled. */
@supports not ((-webkit-text-stroke: 1px black)) {
  .emph { -webkit-text-stroke: 0; font-weight: 700; }
}

/* ============================================================
   BUTTONS — canonical, mode-conditional. Every slice imports this
   and just uses the classes; do NOT re-roll button CSS per slice.

   Treatment rule (the "lights on during daytime" model):
   • DARK  = electric fill + glow (light EMISSION reads on near-black).
   • LIGHT = flat BASE color, NO glow; hover = DARKEN + LIFT (physical
     depth/shadow, since emission/glow is invisible on white).
   Mode is set by `.mode-*` (shipped) or `[data-theme=*]` (preview).
   This pattern applies to all accent surfaces — see design/README.md.
   ============================================================ */
.btn {
  font-family: var(--font-body); font-weight: var(--w-semibold); font-size: .95rem;
  padding: var(--btn-pad-y) var(--btn-pad-x); border-radius: var(--btn-radius);
  border: var(--btn-border) solid transparent; cursor: pointer; text-decoration: none;
  display: inline-block; position: relative;
  transition: box-shadow .2s, transform .15s, border-color .2s, background .2s;
}
/* CONSISTENT HOVER CONTRACT — identical in BOTH modes: glow grows + element
   LIFTS. Fill never changes on hover. The glow is 0-offset (radiates, not a
   drop-shadow); its COLOR per mode comes from --glow-* (electric in dark, a
   darker shade in light). Applies to every .btn variant incl. ghost. */
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* fill is mode-conditional; glow + lift are shared.  --gc = this button's glow color */
.btn-cta   { --gc: var(--glow-cta); }
.btn-blue  { --gc: var(--glow-brand); }
.btn-ghost { --gc: var(--glow-brand); }

/* ---- DARK fills: electric ---- */
.btn-cta {
  color: #00301a;
  background: radial-gradient(125% 130% at 50% 0%,
    color-mix(in oklch, var(--green-electric-vivid), white 26%) 0%,
    var(--green-electric-vivid) 52%,
    color-mix(in oklch, var(--green-electric-vivid), black 22%) 100%);
}
.btn-blue {
  color: var(--ink-950);
  background: radial-gradient(125% 130% at 50% 0%,
    color-mix(in oklch, var(--blue-electric-vivid), white 26%) 0%,
    var(--blue-electric-vivid) 52%,
    color-mix(in oklch, var(--blue-electric-vivid), black 22%) 100%);
}
.btn-ghost {
  color: inherit; border-color: color-mix(in srgb, currentColor 45%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, currentColor 6%, transparent) 0%, transparent 60%);
}
.btn-ghost:hover { border-color: currentColor; background: linear-gradient(180deg, color-mix(in srgb, currentColor 14%, transparent) 0%, color-mix(in srgb, currentColor 4%, transparent) 100%); }

/* ---- GLOW: DARK mode — full electric glow, generous spread ---- */
.btn-cta, .btn-blue { box-shadow: 0 0 11px -2px var(--gc), 0 0 24px -8px var(--gc); }
.btn-cta:hover, .btn-blue:hover { box-shadow: 0 0 18px 0 var(--gc), 0 0 42px -4px var(--gc); }
.btn-ghost { box-shadow: 0 0 0 0 transparent; }
.btn-ghost:hover { box-shadow: 0 0 16px -4px color-mix(in srgb, var(--gc) 60%, transparent); }

/* ---- LIGHT mode — borrow the ghost feel: flat base fill + a lighter-dark
   BORDER, NO resting glow. Hover = slightly darker border + a TIGHT low-spread
   glow (the darker glow color, kept tight so it reads as a thin halo, not a
   muddy smear) + lift. Generous spread is what looked muddy on white. ---- */
[data-theme="light"] .btn-cta,  .mode-light .btn-cta  { background: var(--green);     border-color: var(--green-dark);  box-shadow: none; }
[data-theme="light"] .btn-blue, .mode-light .btn-blue { background: var(--blue-dark); color:#fff; border-color: var(--blue-darker); box-shadow: none; }
[data-theme="light"] .btn-cta:hover,  .mode-light .btn-cta:hover  { border-color: var(--green-darker); box-shadow: 0 0 8px -2px var(--gc); }
[data-theme="light"] .btn-blue:hover, .mode-light .btn-blue:hover { border-color: var(--blue-darkest); box-shadow: 0 0 8px -2px var(--gc); }
[data-theme="light"] .btn-ghost:hover, .mode-light .btn-ghost:hover { box-shadow: 0 0 8px -3px color-mix(in srgb, var(--gc) 55%, transparent); }

/* ════════════════════════════════════════════════════════════════════════════
   TEXTURES — toggleable background overlays for tiles, cards, AND slices.
   Add the class to any positioned element; it paints a subtle pattern in a
   ::before overlay (behind content via z-index, above the element's own bg).
   Everything is CSS-var tunable so one class covers many looks.

   ── .tx-layer convention ──────────────────────────────────────────────────────
   Every slice puts ONE empty <div class="tx-layer"> as the first child of its
   section, BEHIND content. The catalog modal injects .tx-grid/.tx-paper/.tx-braille
   onto THIS layer to preview a texture — so the toggle never fights the slice's own
   glow ::before (which lives on the section). A slice can also ship a texture ON by
   default by adding e.g. class="tx-layer tx-paper" in its own markup.
   ════════════════════════════════════════════════════════════════════════════ */
.tx-layer { position:absolute; inset:0; z-index:0; pointer-events:none; }
/* keep real slice content above the texture layer + the section's own glow wash */
.has-tx-layer { position:relative; }
/* content sits above the texture + glow LAYERS — but DON'T relativize those layers
   themselves (excluding .glow-layer here was the fix: otherwise this rule's higher
   specificity collapsed glow layers to position:relative/0-height → no glow rendered). */
.has-tx-layer > :not(.tx-layer):not(.glow-layer) { position:relative; z-index:1; }

/* ════════════════════════════════════════════════════════════════════════════
   ICON MODES — one icon slot, three consistent looks, toggleable in the catalog.
   Markup: <span class="ic" data-glyph="…"><svg>…</svg></span>  (or just a glyph).
   The slice sets the default mode by adding .ic--box / .ic--raw / .ic--off to the
   GRID (or section); the modal flips this class to preview all three.
     .ic--box  framed tile (brand-tinted box around the glyph/SVG) — the default
     .ic--raw  glyph/SVG only, no box, brand color
     .ic--off  icon hidden entirely (title + desc only)
   ════════════════════════════════════════════════════════════════════════════ */
.ic {
  --ic-size: clamp(44px,5vw,56px);
  flex:0 0 auto; width:var(--ic-size); height:var(--ic-size); border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center;
  font-size:calc(var(--ic-size) * .46); line-height:1; color:var(--blue);
  background:color-mix(in srgb, var(--blue) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--blue) 28%, transparent);
}
.ic svg { width:52%; height:52%; display:block; stroke:currentColor; fill:none; stroke-width:1.6; }
/* light mode: a SUBTLE blue-tint chip with a blue glyph (matches the cards) — not a
   heavy solid blue-dark tile. */
[data-theme="light"] .ic, .mode-light .ic { background:color-mix(in srgb,var(--blue) 12%, #fff); border-color:color-mix(in srgb,var(--blue) 30%, var(--line)); color:var(--blue-dark); }
[data-theme="light"] .ic--raw .ic, .mode-light .ic--raw .ic { color:var(--blue-dark); }  /* raw (no tile): blue glyph, white wouldn't show on a white bg */

/* ── Small eyebrow / label text in LIGHT mode ──
   The tiny mono "// section" eyebrows highlight a word in --blue. At that size on
   white it's too light. Step the highlight to --blue-darker in light mode. Slices
   name their eyebrow class with an `-eyebrow` suffix, so target that generically. */
[data-theme="light"] [class$="-eyebrow"] b, .mode-light [class$="-eyebrow"] b,
[data-theme="light"] [class*="-eyebrow"] b, .mode-light [class*="-eyebrow"] b {
  color: var(--blue-darker);
}
/* RAW — drop the box, keep the glyph/SVG in brand color */
.ic--raw .ic, .ic.ic--raw { background:none; border:none; border-radius:0; width:auto; height:auto; }
.ic--raw .ic svg, .ic.ic--raw svg { width:var(--ic-size); height:var(--ic-size); }
/* OFF — hide the slot, reclaim its space */
.ic--off .ic, .ic.ic--off { display:none; }

/* DESC toggle — slices mark short-description text with .desc. Multi-state knob
   `desc`: on=all · off=none · cards=card descs only · slice=slice-level desc only.
   To support cards/slice, a slice tags scope: .desc-slice (header lede/sub) and
   .desc-card (per-card description), each ALSO carrying .desc. Wrapper (compose) or
   body (catalog) gets the desc--* class — both are ancestors, so it resolves. */
.desc--off   .desc       { display:none; }   /* hide all */
.desc--cards .desc-slice { display:none; }   /* keep card descs, drop slice-level */
.desc--slice .desc-card  { display:none; }   /* keep slice-level, drop card descs */

/* MEDIA toggle — slices with a media slot ([data-media] / .ct-media). media--off
   hides it (text-only layout). Config knob: media (on/off). */
.media--off [data-media], .media--off .ct-media { display:none; }

/* ---- GRID PAPER ----
   Engineering graph-paper grid. The hero example: faint blue lines on ink, with a
   soft radial fade so it doesn't reach the edges. Vars:
     --tx-grid-color  line color        (default: faint brand blue)
     --tx-grid-size   cell size         (default: 28px)
     --tx-grid-weight line thickness    (default: 1px)
     --tx-grid-opacity overlay opacity  (default: .5)
     --tx-grid-fade   mask (set to 'none' for full-bleed edge-to-edge)
*/
.tx-grid { position: relative; }
.tx-grid::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: var(--tx-grid-opacity, .5);
  background:
    linear-gradient(var(--tx-grid-color, color-mix(in srgb, var(--blue) 7%, transparent)) var(--tx-grid-weight, 1px), transparent var(--tx-grid-weight, 1px)) 0 0 / 100% var(--tx-grid-size, 28px),
    linear-gradient(90deg, var(--tx-grid-color, color-mix(in srgb, var(--blue) 7%, transparent)) var(--tx-grid-weight, 1px), transparent var(--tx-grid-weight, 1px)) 0 0 / var(--tx-grid-size, 28px) 100%;
  -webkit-mask-image: var(--tx-grid-fade, radial-gradient(90% 90% at 50% 50%, #000 55%, transparent 100%));
          mask-image: var(--tx-grid-fade, radial-gradient(90% 90% at 50% 50%, #000 55%, transparent 100%));
}
/* keep real content above the texture */
.tx-grid > * { position: relative; z-index: 1; }
/* full-bleed variant (no radial fade) */
.tx-grid--edge { --tx-grid-fade: none; }
/* denser / looser cell presets */
.tx-grid--fine { --tx-grid-size: 18px; }
.tx-grid--wide { --tx-grid-size: 44px; }
/* on WHITE/light slices the blue lines read muddy — use ink lines, lower opacity */
[data-theme="light"] .tx-grid, .mode-light .tx-grid {
  --tx-grid-color: color-mix(in srgb, var(--ink-900) 6%, transparent);
  --tx-grid-opacity: .6;
}

/* ---- TEXTURED PAPER ----
   Subtle paper grain so a flat fill reads as stock, not a screen. Two layered
   radial-dot fields at offset sizes = a soft irregular fiber speckle. Same
   toggle/var contract as .tx-grid. Vars:
     --tx-paper-color  speckle color     (default: faint white fiber on dark)
     --tx-paper-size   grain scale        (default: 3px — keep small)
     --tx-paper-opacity overlay opacity   (default: .5)
     --tx-paper-fade   mask (set 'none' for full-bleed)
*/
.tx-paper { position: relative; }
.tx-paper::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: var(--tx-paper-opacity, .5);
  background:
    radial-gradient(var(--tx-paper-color, color-mix(in srgb, var(--white) 5%, transparent)) var(--tx-paper-dot, .5px), transparent 1.4px) 0 0 / var(--tx-paper-size, 3px) var(--tx-paper-size, 3px),
    radial-gradient(var(--tx-paper-color, color-mix(in srgb, var(--white) 4%, transparent)) var(--tx-paper-dot, .5px), transparent 1.6px) calc(var(--tx-paper-size, 3px) / 2) calc(var(--tx-paper-size, 3px) / 2) / calc(var(--tx-paper-size, 3px) * 1.7) calc(var(--tx-paper-size, 3px) * 1.7);
  -webkit-mask-image: var(--tx-paper-fade, radial-gradient(95% 95% at 50% 50%, #000 60%, transparent 100%));
          mask-image: var(--tx-paper-fade, radial-gradient(95% 95% at 50% 50%, #000 60%, transparent 100%));
}
.tx-paper > * { position: relative; z-index: 1; }
.tx-paper--edge  { --tx-paper-fade: none; }
.tx-paper--coarse { --tx-paper-size: 5px; --tx-paper-opacity: .42; }
/* on white/light the white fiber vanishes — switch to faint ink speckle */
[data-theme="light"] .tx-paper, .mode-light .tx-paper {
  --tx-paper-color: color-mix(in srgb, var(--ink-900) 5%, transparent);
  --tx-paper-opacity: .55;
}

/* ════════════════════════════════════════════════════════════════════════════
   TEXTURE TARGETING — one merged "texture" config knob, never both at once.
   The catalog/build sets ONE class on the section:
     .tx-bg-{grid|paper|braille}    → paints the slice's <div class="tx-layer">
     .tx-cards-{grid|paper|braille} → paints each card in the slice
   This avoids the .tx-grid{position:relative} vs .tx-layer{position:absolute}
   collision (the old bug) by driving the ::before from the SECTION, with the
   layer/card kept correctly positioned. Cards are matched generically by a
   shared marker class .tx-card (slices add it to their card element) OR the
   common [class$="-card"] pattern. */

/* the texture-painting ::before, shared shape per pattern. Applied to whichever
   target the section selects. We re-declare the backgrounds here so a single
   target rule can pick the pattern via a CSS var swap. */
.tx-layer { position:absolute !important; inset:0; z-index:0; pointer-events:none; }  /* never let .tx-* relativize the layer */

/* ── BACKGROUND target: paint the .tx-layer ── */
.tx-bg-grid    > .tx-layer { background:
    linear-gradient(var(--_txc) 1px, transparent 1px) 0 0 / 100% var(--_txs),
    linear-gradient(90deg, var(--_txc) 1px, transparent 1px) 0 0 / var(--_txs) 100%;
    --_txc: color-mix(in srgb, var(--blue) 9%, transparent); --_txs: 28px; opacity:.6; }
.tx-bg-paper   > .tx-layer { background:
    radial-gradient(var(--_txc) .6px, transparent 1.5px) 0 0 / 3px 3px,
    radial-gradient(var(--_txc) .6px, transparent 1.6px) 1.5px 1.5px / 5px 5px;
    --_txc: color-mix(in srgb, var(--white) 6%, transparent); opacity:.6; }
.tx-bg-diagonal > .tx-layer { background:
    repeating-linear-gradient(135deg, var(--_txc) 0 var(--_txs), transparent var(--_txs) calc(var(--_txs) * 2));
    --_txc: color-mix(in srgb, var(--blue) 6%, transparent); --_txs: 30px; opacity:.6; }
/* dots: a soft polka/halftone dot field (imported w/ the 84-seam library — the band-dot
   texture, generalized for any slice). mesh: 3 brand-color radial blooms (aurora/mesh). */
.tx-bg-dots > .tx-layer { background:
    radial-gradient(var(--_txc) 1.4px, transparent 1.8px) 0 0 / var(--_txs) var(--_txs);
    --_txc: color-mix(in srgb, var(--blue) 12%, transparent); --_txs: 22px; opacity:.6; }
.tx-bg-mesh > .tx-layer { opacity:.5; background:
    radial-gradient(40% 60% at 18% 30%, color-mix(in srgb, var(--blue) 40%, transparent), transparent 60%),
    radial-gradient(45% 65% at 82% 25%, color-mix(in srgb, var(--orange) 32%, transparent), transparent 60%),
    radial-gradient(50% 60% at 50% 95%, color-mix(in srgb, var(--green) 34%, transparent), transparent 60%); }
/* stripes: BOLD wide 45° tonal bands (not pinstripes — that's tx-bg-diagonal). Low
   contrast + semi-transparent, so a glow wash reads THROUGH it. The signature dark
   "full-bleed" band background. --_txs = band width. */
.tx-bg-stripes > .tx-layer { background:
    repeating-linear-gradient(45deg, var(--_txc) 0 var(--_txs), transparent var(--_txs) calc(var(--_txs) * 2));
    --_txc: color-mix(in srgb, var(--white) 3%, transparent); --_txs: 22px; opacity:1; }
[data-theme="light"] .tx-bg-grid > .tx-layer,    .mode-light .tx-bg-grid > .tx-layer    { --_txc: color-mix(in srgb, var(--ink-900) 7%, transparent); }
[data-theme="light"] .tx-bg-paper > .tx-layer,   .mode-light .tx-bg-paper > .tx-layer   { --_txc: color-mix(in srgb, var(--ink-900) 6%, transparent); }
[data-theme="light"] .tx-bg-diagonal > .tx-layer,.mode-light .tx-bg-diagonal > .tx-layer{ --_txc: color-mix(in srgb, var(--ink-900) 6%, transparent); }
[data-theme="light"] .tx-bg-dots > .tx-layer,    .mode-light .tx-bg-dots > .tx-layer    { --_txc: color-mix(in srgb, var(--ink-900) 9%, transparent); }
[data-theme="light"] .tx-bg-stripes > .tx-layer, .mode-light .tx-bg-stripes > .tx-layer { --_txc: color-mix(in srgb, var(--ink-900) 5%, transparent); }

/* ── CARDS target: paint each card via its ::before. Cards must be position:relative
   (card slices already are) and carry .tx-card OR end in -card. ── */
.tx-cards-grid    .tx-card, .tx-cards-grid    [class$="-card"],
.tx-cards-paper   .tx-card, .tx-cards-paper   [class$="-card"],
.tx-cards-diagonal .tx-card, .tx-cards-diagonal [class$="-card"] { position:relative; }
.tx-cards-grid    .tx-card::before, .tx-cards-grid    [class$="-card"]::before,
.tx-cards-paper   .tx-card::before, .tx-cards-paper   [class$="-card"]::before,
.tx-cards-diagonal .tx-card::before, .tx-cards-diagonal [class$="-card"]::before {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; border-radius:inherit;
  /* texture is a TOP accent on the card — a SINGLE top-fade mask (no mask-composite,
     which has spotty support) so the grid sits only behind the icon, never behind the
     title/description body text (legibility). */
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 22%, transparent 56%);
          mask-image:linear-gradient(180deg, #000 0%, #000 22%, transparent 56%);
}
.tx-cards-grid .tx-card::before, .tx-cards-grid [class$="-card"]::before { background:
    linear-gradient(var(--_txc) 1px, transparent 1px) 0 0 / 100% 22px,
    linear-gradient(90deg, var(--_txc) 1px, transparent 1px) 0 0 / 22px 100%;
    --_txc: color-mix(in srgb, var(--blue) 10%, transparent); opacity:.7; }
.tx-cards-paper .tx-card::before, .tx-cards-paper [class$="-card"]::before { background:
    radial-gradient(var(--_txc) .6px, transparent 1.5px) 0 0 / 3px 3px,
    radial-gradient(var(--_txc) .6px, transparent 1.6px) 1.5px 1.5px / 5px 5px;
    --_txc: color-mix(in srgb, var(--white) 7%, transparent); opacity:.7; }
.tx-cards-diagonal .tx-card::before, .tx-cards-diagonal [class$="-card"]::before { background:
    repeating-linear-gradient(135deg, var(--_txc) 0 var(--_txs), transparent var(--_txs) calc(var(--_txs) * 2));
    --_txc: color-mix(in srgb, var(--blue) 9%, transparent); --_txs: 18px; opacity:.7; }
/* card content above the card texture */
.tx-cards-grid .tx-card > *, .tx-cards-grid [class$="-card"] > *,
.tx-cards-paper .tx-card > *, .tx-cards-paper [class$="-card"] > *,
.tx-cards-diagonal .tx-card > *, .tx-cards-diagonal [class$="-card"] > * { position:relative; z-index:1; }
[data-theme="light"] .tx-cards-grid [class$="-card"]::before,    .mode-light .tx-cards-grid [class$="-card"]::before    { --_txc: color-mix(in srgb, var(--ink-900) 8%, transparent); }
[data-theme="light"] .tx-cards-paper [class$="-card"]::before,   .mode-light .tx-cards-paper [class$="-card"]::before   { --_txc: color-mix(in srgb, var(--ink-900) 7%, transparent); }

/* ════════════════════════════════════════════════════════════════════════════
   LIGHT-MODE GLOW SUPPRESSION
   The brand colour glow washes (radial-gradient ::before bleeds) look great on
   ink/dark surfaces but make WHITE/light slices read DIRTY. Kill them in light
   mode globally — one place — so every slice's wash turns off on white while the
   dark-mode glow stays. New slices: name the wash layer `.glow-wash` (or one of
   the section selectors below) and it's covered automatically.
   ════════════════════════════════════════════════════════════════════════════ */
[data-theme="light"] .glow-wash,
[data-theme="light"] .glow-wash::before,
[data-theme="light"] .glow-wash::after,
.mode-light .glow-wash,
.mode-light .glow-wash::before,
.mode-light .glow-wash::after,
/* retrofit: the existing section wash layers */
[data-theme="light"] .hero::before,
[data-theme="light"] .cta-band::before,
[data-theme="light"] .bt-break::before,
[data-theme="light"] .br-sec::before,
[data-theme="light"] .pf-sec::before,
[data-theme="light"] .qt-sec::before,
[data-theme="light"] .sv-sec::before,
.mode-light .hero::before,
.mode-light .cta-band::before,
.mode-light .bt-break::before,
.mode-light .br-sec::before,
.mode-light .pf-sec::before,
.mode-light .qt-sec::before,
.mode-light .sv-sec::before {
  background: none !important;
}

/* ── GLOBAL light-mode glow kill ──
   Any section whose class ends in -sec / -band, plus the .glow-on layer, gets its
   ::before wash removed in light mode. This catches NEW slices (e.g. .pr-sec,
   .st-sec, .cn-sec, .en-sec, .tl-sec) without hand-listing each one. */
[data-theme="light"] [class$="-sec"]::before,  .mode-light [class$="-sec"]::before,
[data-theme="light"] [class$="-band"]::before, .mode-light [class$="-band"]::before,
[data-theme="light"] .glow-on::before,          .mode-light .glow-on::before {
  background: none !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   GLOW CONFIG KNOB — positionable brand-glow bloom on a slice section.
   The `glow` config knob sets one class on the section:
     .glow-off            no glow
     .glow-on .glow-{pos} a bloom at one of 9 positions (ul tm ur · ml c mr · ll bm lr)
   Dark mode only (killed in light by the rule above). The bloom is a soft radial
   of --glow-blue. A slice gets this for free — no per-slice CSS needed. */
.glow-on { position:relative; }
.glow-on::after {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  --_gx: 50%; --_gy: 50%;   /* glow center, set per position below */
  /* subtle WASH (not a hard bloom) — washed + soft, like the original ::before glows.
     Color comes from the layer's color class (.glow-blue/-orange/-green → --glow-c). */
  background: radial-gradient(52% 56% at var(--_gx) var(--_gy),
    color-mix(in srgb, var(--glow-c, var(--glow-blue)) 20%, transparent) 0%, transparent 76%);
}
.glow-on > * { position:relative; z-index:1; }
/* 9 positions */
.glow-on.glow-ul::after { --_gx: 8%;  --_gy: 10%; }
.glow-on.glow-tm::after { --_gx: 50%; --_gy: 6%;  }
.glow-on.glow-ur::after { --_gx: 92%; --_gy: 10%; }
.glow-on.glow-ml::after { --_gx: 6%;  --_gy: 50%; }
.glow-on.glow-c::after  { --_gx: 50%; --_gy: 50%; }
.glow-on.glow-mr::after { --_gx: 94%; --_gy: 50%; }
.glow-on.glow-ll::after { --_gx: 8%;  --_gy: 90%; }
.glow-on.glow-bm::after { --_gx: 50%; --_gy: 94%; }
.glow-on.glow-lr::after { --_gx: 92%; --_gy: 90%; }
/* MERGE-EDGE GLOW SUPPRESSION (user rule 2026-07): where a slice's edge meets a MATCHING bg
   (white-next-to-white — a seam's near color equals this slice's bg via matchNeighbors, or a
   same-bg slice), a glow ON that edge ghosts a hard line. compose sets .merge-top / .merge-bot
   from the neighbor colors; here we drop the glow layers sitting on that edge. Upper glows
   (ul/tm/ur) die on merge-top; lower (ll/bm/lr) on merge-bot. Side (ml/mr) + center (c) stay. */
.merge-top .glow-layer.glow-ul, .merge-top .glow-layer.glow-tm, .merge-top .glow-layer.glow-ur { display:none !important; }
.merge-bot .glow-layer.glow-ll, .merge-bot .glow-layer.glow-bm, .merge-bot .glow-layer.glow-lr { display:none !important; }
/* .glow-off is a no-op marker (explicitly no glow) */
.glow-off::after { content:none; }
/* glows now render in LIGHT mode too (using the darker shade per color, set below) —
   no more blanket light-mode kill. */

/* ── GLOW COLORS — exactly three: BLUE · ORANGE · GREEN ──
   A slice places up to 3 bloom layers, one per color, and uses any subset:
     <div class="glow-layer glow-blue  glow-on glow-{pos}"></div>
     <div class="glow-layer glow-orange glow-on glow-{pos}"></div>
     <div class="glow-layer glow-green  glow-on glow-{pos}"></div>
   The color is the class. Each is theme-aware: electric on dark, the matching DARK
   shade on light (so a glow reads on white instead of washing out). One color = one
   toggle (the catalog shows Glow · Blue / Orange / Green). */
.glow-blue   { --glow-c: var(--glow-blue); }
.glow-orange { --glow-c: var(--glow-orange); }
.glow-green  { --glow-c: var(--glow-green); }
[data-theme="light"] .glow-blue,   .mode-light .glow-blue   { --glow-c: var(--blue-dark); }
[data-theme="light"] .glow-orange, .mode-light .glow-orange { --glow-c: var(--orange-dark); }
[data-theme="light"] .glow-green,  .mode-light .glow-green  { --glow-c: var(--green-dark); }
/* on light the wash is even softer so it stays tasteful on white */
[data-theme="light"] .glow-on::after, .mode-light .glow-on::after {
  background: radial-gradient(52% 56% at var(--_gx,50%) var(--_gy,50%),
    color-mix(in srgb, var(--glow-c, var(--blue-dark)) 13%, transparent) 0%, transparent 78%);
}

/* ── MULTI-GLOW LAYER — a full-size bloom layer; color via the color class above. ── */
.glow-layer { position:absolute; inset:0; z-index:0; pointer-events:none; }

/* ============================================================================
   PEEK SEAM LIBRARY (ported from design_handoff_peek_seams, 2026-06-30)
   28 seam transitions. Contract: a `.seam` element is the LAST child of a slice;
   `.seam__below` is painted `--seam-below` (next slice color, composer-set). New
   vars on `.seam`: `--seam-above` (current slice surface), `--seam-band` (statement
   band color), `--seam-fg` (band text), `--play`. Source of truth + exact demo markup:
   slices/seam/_handoff/. Shortcomings + which need slice markup: slices/seam/SHORTCOMINGS.md
   ============================================================================ */
@keyframes seamTicker { from { transform: translateX(0) } to { transform: translateX(-50%) } }
@keyframes seamScan   { 0% { transform: translateY(-120%) } 100% { transform: translateY(240%) } }
@keyframes seamGlow   { 0%,100% { opacity:.6 } 50% { opacity:1 } }
@keyframes seamStripe { from { background-position:0 0 } to { background-position:99px 0 } }
@keyframes seamFloat  { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-5px) } }
@keyframes seamArrow  { 0%,100% { transform: translateY(0); opacity:.6 } 50% { transform: translateY(6px); opacity:1 } }

/* ── SHAPED · pure clip-path on the painted next-slice layer (drop-in, no extra DOM) ── */
.seam--diagonal        .seam__below { clip-path: polygon(0 100%,0 64%,100% 6%,100% 100%); }
.seam--diagonal.seam--flip .seam__below { clip-path: polygon(0 100%,0 6%,100% 64%,100% 100%); }
.seam--diagonal-steep  .seam__below { clip-path: polygon(0 100%,0 14%,100% 78%,100% 100%); }
/* chevron RETIRED (2026-07 — chevron doesn't fit the design). Kept as an alias that
   renders a DIAGONAL so any existing .seam--chevron reference is no longer a point. */
.seam--chevron         .seam__below { clip-path: polygon(0 100%,0 64%,100% 6%,100% 100%); }
.seam--bevel           .seam__below { clip-path: polygon(0 100%,0 52%,13% 30%,87% 30%,100% 52%,100% 100%); }
.seam--torn-fine       .seam__below { clip-path: polygon(0 100%,0 54%,3% 49%,6% 56%,9% 47%,12% 53%,15% 45%,19% 55%,22% 48%,25% 57%,28% 46%,31% 54%,35% 47%,38% 56%,41% 48%,44% 55%,47% 45%,51% 54%,54% 47%,57% 57%,60% 48%,63% 53%,67% 45%,70% 55%,73% 48%,76% 56%,79% 46%,83% 54%,86% 47%,89% 56%,92% 48%,95% 53%,100% 50%,100% 100%); }
/* torn: two-layer rip — a lighter deckle fringe (mix of both neighbors) behind the main tear */
.seam--torn            .seam__below { clip-path: polygon(0 100%,0 60%,4% 52%,8% 64%,13% 46%,17% 57%,22% 40%,27% 54%,33% 43%,38% 62%,43% 49%,49% 66%,54% 47%,60% 60%,65% 42%,71% 58%,76% 45%,82% 63%,87% 48%,92% 61%,96% 44%,100% 56%,100% 100%); }
.seam--torn            .seam__below::before { content:""; position:absolute; inset:0; z-index:-1;
   background: color-mix(in srgb, var(--seam-below) 55%, var(--seam-above));
   clip-path: polygon(0 100%,0 52%,4% 43%,8% 56%,13% 37%,17% 49%,22% 31%,27% 46%,33% 34%,38% 54%,43% 40%,49% 58%,54% 38%,60% 52%,65% 33%,71% 50%,76% 36%,82% 55%,87% 39%,92% 53%,96% 35%,100% 48%,100% 100%); }

/* ── SHAPED · gradient / mask on the painted layer (drop-in) ── */
.seam--dissolve  .seam__below { top:0; background: linear-gradient(180deg, var(--seam-above), var(--seam-below)); clip-path:none; }
.seam--barcode   .seam__below { background: repeating-linear-gradient(90deg, var(--seam-below) 0 5px, transparent 5px 9px, var(--seam-below) 9px 17px, transparent 17px 22px, var(--seam-below) 22px 25px, transparent 25px 33px, var(--seam-below) 33px 41px, transparent 41px 45px);
   -webkit-mask-image: linear-gradient(to top, #000 22%, transparent 96%); mask-image: linear-gradient(to top, #000 22%, transparent 96%); }
.seam--louver    .seam__below { background: repeating-linear-gradient(108deg, var(--seam-below) 0 16px, transparent 16px 30px);
   -webkit-mask-image: linear-gradient(to top, #000 30%, transparent 94%); mask-image: linear-gradient(to top, #000 30%, transparent 94%); }
/* halftone: dot screen growing small→large into the solid edge (constant 15px pitch) */
.seam--halftone  .seam__below { background:
     radial-gradient(circle, var(--seam-below) 0 4.6px, transparent 5.3px) center/15px 13px,
     linear-gradient(var(--seam-below), var(--seam-below)) bottom/100% 20px no-repeat;
   -webkit-mask-image: linear-gradient(to top, #000 40%, transparent 92%); mask-image: linear-gradient(to top, #000 40%, transparent 92%); }
/* glass: frosted ledge of the next slice cresting up (echoes the nav) */
.seam--glass     .seam__below { top:auto; height:64%; background: color-mix(in srgb, var(--seam-below) 78%, transparent);
   -webkit-backdrop-filter: blur(8px) saturate(1.3); backdrop-filter: blur(8px) saturate(1.3);
   border-top:1px solid color-mix(in srgb, #fff 30%, transparent); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }

/* ── SHAPED · animated (gated by --play + the reduced-motion rule above) ── */
/* glowline: electric hairline with bloom — emphasis only, don't stack two */
.seam--glowline  .seam__below { top:auto; height:50%; }
.seam--glowline::after { content:""; position:absolute; left:0; right:0; bottom:50%; height:2px; z-index:1;
   background: var(--orange); box-shadow: 0 0 12px 1px var(--orange), 0 0 28px 4px color-mix(in srgb, var(--orange) 60%, transparent);
   animation: seamGlow 3.2s ease-in-out infinite; animation-play-state: var(--play); }
/* scanline: CRT lines + sweeping bar — for dark→dark joins */
.seam--scanline  .seam__below { background: linear-gradient(var(--seam-above), var(--seam-below)); }
.seam--scanline::before { content:""; position:absolute; inset:0; z-index:1; opacity:.6;
   background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--blue) 22%, transparent) 0 1px, transparent 1px 5px); }
.seam--scanline::after  { content:""; position:absolute; left:0; right:0; top:0; height:14px; z-index:2;
   background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--blue) 40%, transparent), transparent);
   animation: seamScan 3.4s linear infinite; animation-play-state: var(--play); }

/* ── SHAPED · brand bracket corners frame the boundary (CSS-only via pseudo-els) ── */
.seam--bracket   .seam__below { top:auto; height:50%; }
.seam--bracket::before, .seam--bracket::after { content:""; position:absolute; width:26px; height:26px; z-index:1; }
.seam--bracket::before { left:26px;  bottom:calc(50% - 8px); border-top:2px solid var(--blue); border-left:2px solid var(--blue); }
.seam--bracket::after  { right:26px; bottom:6px;             border-bottom:2px solid var(--blue); border-right:2px solid var(--blue); }

/* light-mode: bracket/label accents step to --blue-dark for contrast on white (color-roles) */
[data-theme="light"] .seam--bracket::before, .mode-light .seam--bracket::before,
[data-theme="light"] .seam--bracket::after,  .mode-light .seam--bracket::after { border-color: var(--blue-dark); }

/* ── NEEDS SLICE MARKUP / DATA-SLOTS (scaffold only — see SHORTCOMINGS.md) ──
   These carry child DOM or content the composer must supply; ported next session as
   seam SLICE files with data-slots. Band base for the 8 STATEMENT seams: */
.seam--stmt { position:relative; background: var(--seam-band); color: var(--seam-fg); }
.seam--stripes .seam__band { position:absolute; inset:0; background-size:99px 100%;
   background: repeating-linear-gradient(90deg, var(--blue) 0 26px, var(--ink-900) 26px 30px, var(--green) 30px 56px, var(--ink-900) 56px 60px, var(--orange) 60px 86px, var(--ink-900) 86px 90px);
   animation: seamStripe 3.6s linear infinite; animation-play-state: var(--play); }
.seam--marquee .seam__track, .seam--ticker .seam__track { display:flex; white-space:nowrap; will-change:transform;
   animation: seamTicker var(--seam-speed, 20s) linear infinite; animation-play-state: var(--play); }

/* ============================================================================
   PEEK SEAM LIBRARY — 2026-07-01 import (from the 84-seam "Peek Seam Library").
   Colors are TOKENIZED (no baked hexes) so a seam's background is NOT a strict design
   decision — it stays configurable. Two families:
   (A) SHAPED EDGES — pure clip-path on the painted .seam__below layer, drop-in like the
       originals (no extra DOM).
   (B) COLOR BANDS — a full-width colored "loud break" section (.seam--band) that bites
       BOTH neighbors. The band COLOR is a config knob (`band` in _registry.json →
       .seam--band-*), so any placement can pick white/ink/blue/green/orange/… — exactly
       like our surface-mode toggles. Content-carrying seams (cta, stat, quote, video,
       phone, image, counts, …) REUSE this same band base; only their slotted content is
       a separate slice pass (see SHORTCOMINGS.md). FX bands (conic, aurora, prism, …) add
       a distinct .seam__field. Geometry lifted 1:1 from the source demos.
   ============================================================================ */
@keyframes seamSweep { 0% { transform: translateX(-160%) skewX(-16deg) } 60%,100% { transform: translateX(320%) skewX(-16deg) } }
@keyframes seamSpin  { to { transform: translate(-50%,-50%) rotate(360deg) } }
@keyframes seamZoom  { 0%,100% { transform: scale(1.02) } 50% { transform: scale(1.12) } }
@keyframes seamDrip  { 0%,100% { transform: translateY(0) } 50% { transform: translateY(3px) } }
@keyframes seamPop   { 0%,100% { transform: scale(1); opacity:.9 } 50% { transform: scale(1.05); opacity:1 } }
@keyframes seamBlob  { 0%,100% { border-radius:63% 37% 58% 42% / 57% 64% 36% 43% } 50% { border-radius:41% 59% 46% 54% / 49% 41% 59% 51% } }
@keyframes seamHue   { 0%,100% { filter:hue-rotate(0deg) } 50% { filter:hue-rotate(24deg) } }
@keyframes seamHue2  { 0%,100% { filter:hue-rotate(0deg) } 50% { filter:hue-rotate(60deg) } }
@keyframes seamFloatY{ 0%,100% { transform:translateY(0) } 50% { transform:translateY(-8px) } }
@keyframes seamPan   { from { background-position:0 0 } to { background-position:240px 0 } }
@keyframes seamCount { from { opacity:.4 } to { opacity:1 } }

/* ── (A) XL / bold shaped edges — bolder amplitude than the base set. Drop-in:
   add the class to a `.seam` that has a `.seam__below` child. ── */
.seam--torn-xl    .seam__below { clip-path: polygon(0 100%,100% 100%,100% 60%,94% 34%,88% 56%,80% 38%,72% 60%,64% 42%,56% 58%,48% 38%,40% 60%,32% 40%,24% 58%,16% 40%,8% 56%,0 40%); }
.seam--zigzag-xl  .seam__below { clip-path: polygon(0 100%,100% 100%,100% 80%,87.5% 4%,75% 80%,62.5% 4%,50% 80%,37.5% 4%,25% 80%,12.5% 4%,0 80%); }
.seam--arrow-xl   .seam__below { clip-path: polygon(0 100%,100% 100%,100% 86%,50% 12%,0 86%); }        /* steep centered chevron point */
.seam--wipe       .seam__below { clip-path: polygon(0 100%,100% 100%,100% 88%,0 34%); }                /* hard diagonal wipe */
.seam--wave-stack .seam__below { clip-path: polygon(0 100%,100% 100%,100% 55%,92% 38%,86% 60%,78% 42%,70% 62%,62% 44%,54% 60%,46% 42%,38% 60%,30% 44%,22% 60%,14% 42%,6% 58%,0 44%); }
.seam--cascade    .seam__below { clip-path: polygon(0 100%,100% 100%,100% 70%,88% 70%,88% 50%,66% 50%,66% 30%,40% 30%,40% 52%,18% 52%,18% 72%,0 72%); }  /* stepped cascade */
.seam--straddle   .seam__below { clip-path: polygon(0 100%,100% 100%,100% 30%,62% 30%,62% 62%,38% 62%,38% 30%,0 30%); }                               /* center notch straddle */
.seam--linereveal .seam__below { clip-path: polygon(0 100%,100% 100%,100% 48%,0 52%); }                /* near-flat reveal line */

/* ── (A) quiet dividers for same-tone joins — a thin ruled line, no cresting color.
   Draw the line with pseudo-elements on the current surface. ── */
.seam--ruler .seam__below, .seam--comment .seam__below, .seam--stitch .seam__below { top:auto; height:40%; background:transparent; }
.seam--ruler::before   { content:""; position:absolute; left:0; right:0; bottom:50%; height:1px; z-index:1; background: color-mix(in srgb, var(--muted) 55%, transparent); }
.seam--ruler::after    { content:""; position:absolute; left:0; right:0; bottom:calc(50% - 7px); height:12px; z-index:1; opacity:.7;
   background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--muted) 60%, transparent) 0 1px, transparent 1px 24px); }
.seam--comment::before { content:""; position:absolute; left:0; right:0; bottom:50%; height:1px; z-index:1;
   background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--blue) 55%, transparent) 0 8px, transparent 8px 16px); }
.seam--stitch::before  { content:""; position:absolute; left:24px; right:24px; bottom:calc(50% + 4px); height:2px; z-index:1;
   background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--muted) 62%, transparent) 0 9px, transparent 9px 16px); }
.seam--stitch::after   { content:""; position:absolute; left:24px; right:24px; bottom:calc(50% - 8px); height:2px; z-index:1;
   background: repeating-linear-gradient(90deg, transparent 0 8px, color-mix(in srgb, var(--muted) 62%, transparent) 8px 17px, transparent 17px 16px); }

/* ── (B) COLOR BANDS — full-width loud break. A band is its OWN section (a sibling
   between two slices), so — unlike the thin child-of-slice seams — it does NOT
   negative-margin out; it just pads its content. DOM (authored in a slice):
     <div class="seam seam--band seam--band-blue">
       <div class="seam__field"></div>   ← texture (behind content)
       <div class="seam__above"></div>   ← torn bite into the slice ABOVE (--seam-above)
       <div class="seam__body"> …content… </div>
       <div class="seam__below"></div>   ← torn bite into the slice BELOW (--seam-below)
   The composer sets --seam-above / --seam-below to the two neighbor colors, and the
   `band` config knob picks the color class. ── */
.seam--band { position:relative; overflow:hidden; background:var(--seam-band); color:var(--seam-fg);
   height:auto; margin-top:0; padding: clamp(52px,8vw,116px) var(--pad-inline); }  /* height:auto — a band GROWS with its content (the base .seam pins a thin fixed height) */
.seam--band > .seam__field { position:absolute; inset:0; z-index:0; pointer-events:none; }
.seam--band > .seam__body  { position:relative; z-index:2;
   /* 12-COL ALIGNMENT (2026-07-04): the band pads with --pad-inline (= --g-edge); cap the
      CONTENT to the shared --g-maxw region + center it, so a band seam's headline/CTA lines
      up with the exact left/right edges of every .g-cols slice above/below it (was full-bleed
      to viewport-minus-edge, misaligned with gridded slices). Bg/field/crest stay full-bleed. */
   max-width: var(--g-maxw); margin-inline: auto; }
/* FULL-BLEED OPT-OUT: some band content MUST span edge-to-edge — a scrolling marquee/ticker
   (.mq) reads as a full-width strip, not a centered column. These opt out of the content cap.
   Add `seam__body--bleed` to any other band body that should bleed. */
.seam--band > .seam__body.mq,
.seam--band > .seam__body--bleed { max-width: none;
   /* cancel the band's own --pad-inline padding too, so the strip reaches the true viewport edges */
   margin-inline: calc(-1 * var(--pad-inline)); }
/* top:-1px + 1px extra height so the neighbor-colored crest covers the very top edge —
   otherwise a 1px line of the BAND color shows above the crest (user 2026-07). */
.seam--band > .seam__above { position:absolute; top:-1px; left:0; right:0; bottom:auto; height:29px; z-index:1; background:var(--seam-above);
   clip-path: polygon(0 0,100% 0,100% 55%,95% 38%,90% 60%,84% 42%,78% 62%,72% 45%,66% 60%,60% 40%,54% 58%,48% 42%,42% 60%,36% 44%,30% 60%,24% 42%,18% 58%,12% 44%,6% 60%,0 46%); }
.seam--band > .seam__below { position:absolute; top:auto; bottom:-1px; left:0; right:0; height:29px; z-index:1; background:var(--seam-below);
   clip-path: polygon(0 100%,100% 100%,100% 45%,95% 62%,90% 40%,84% 58%,78% 38%,72% 55%,66% 40%,60% 60%,54% 42%,48% 58%,42% 40%,36% 56%,30% 42%,24% 60%,18% 42%,12% 58%,6% 40%,0 54%); }
/* FLAT band — a bold/bright/textured/image band butts its neighbors with NO crest (the bold
   color IS the statement; the green stats band reads great flat). user rule 2026-07. */
.seam--band.seam--flat > .seam__above, .seam--band.seam--flat > .seam__below { display:none; }

/* — solid + textured brand-color bands (the "background options beyond white/ink") — */
/* INK band — the quiet dark statement: plain ink, no field texture. Pairs with a dark
   panel below via .seam-flat-bot (user 2026-10-03: loud gradient bands read dirty). */
.seam--band-ink      { --seam-band:var(--ink-950); --seam-fg:var(--neutral-lightest); }
/* BOTTOM-FLAT: wrapper utility (manifest `extra`) — keep the top crest, drop the bottom
   one so the band butts the next slice with a straight edge. */
.seam-wrap.seam-flat-bot .seam--band > .seam__below { display:none; }
.seam--band-blue     { --seam-band:var(--blue-electric); --seam-fg:var(--white); }
.seam--band-blue     > .seam__field { opacity:.5; background:linear-gradient(rgba(255,255,255,.16) 1px,transparent 1px) 0 0/100% 26px,linear-gradient(90deg,rgba(255,255,255,.16) 1px,transparent 1px) 0 0/26px 100%; }
.seam--band-green    { --seam-band:var(--green); --seam-fg:var(--green-darkest); }
.seam--band-green    > .seam__field { opacity:.5; background:repeating-linear-gradient(48deg,rgba(0,48,26,.16) 0 14px,transparent 14px 28px); }
.seam--band-green    > .seam__above { clip-path:polygon(0 0,100% 0,100% 30%,50% 78%,0 30%); }
.seam--band-green    > .seam__below { clip-path:polygon(0 100%,100% 100%,100% 70%,50% 22%,0 70%); }
.seam--band-orange   { --seam-band:var(--orange); --seam-fg:var(--orange-darkest); }
.seam--band-orange   > .seam__field { opacity:.55; background:radial-gradient(rgba(76,41,0,.3) 2px,transparent 2.5px) 0 0/22px 22px; }
.seam--band-azure    { --seam-band:var(--blue-dark); --seam-fg:var(--white); }
.seam--band-azure    > .seam__field { opacity:.45; background:linear-gradient(rgba(255,255,255,.14) 1px,transparent 1px) 0 0/100% 26px,linear-gradient(90deg,rgba(255,255,255,.14) 1px,transparent 1px) 0 0/26px 100%; }
.seam--band-red      { --seam-band:var(--red-light); --seam-fg:var(--white); }
.seam--band-red      > .seam__field { background:linear-gradient(120deg,var(--red-light),var(--orange)); }
.seam--band-red      > .seam__above { clip-path:polygon(0 0,100% 0,100% 26%,0 74%); }
.seam--band-red      > .seam__below { clip-path:polygon(0 100%,100% 100%,100% 74%,0 26%); }
.seam--band-neon     { --seam-band:var(--ink-950); --seam-fg:var(--white); }
.seam--band-neon     > .seam__field { opacity:.6; background:linear-gradient(rgba(9,147,255,.14) 1px,transparent 1px) 0 0/100% 28px,linear-gradient(90deg,rgba(9,147,255,.14) 1px,transparent 1px) 0 0/28px 100%; -webkit-mask-image:radial-gradient(90% 90% at 30% 40%,#000 40%,transparent); mask-image:radial-gradient(90% 90% at 30% 40%,#000 40%,transparent); }
.seam--band-neon     > .seam__above { clip-path:polygon(0 0,100% 0,100% 24%,0 74%); }
.seam--band-neon     > .seam__below { clip-path:polygon(0 100%,100% 100%,100% 76%,0 26%); }
.seam--band-caution  { --seam-band:var(--yellow); --seam-fg:var(--yellow-darkest); }
.seam--band-caution  > .seam__field { opacity:.5; background:repeating-linear-gradient(45deg,rgba(76,60,13,.22) 0 12px,transparent 12px 30px); }
.seam--band-caution  > .seam__above { clip-path:polygon(0 0,100% 0,100% 30%,92% 64%,84% 32%,76% 64%,68% 32%,60% 64%,52% 32%,44% 64%,36% 32%,28% 64%,20% 32%,12% 64%,4% 32%,0 48%); }
.seam--band-caution  > .seam__below { clip-path:polygon(0 100%,100% 100%,100% 70%,92% 36%,84% 68%,76% 36%,68% 68%,60% 36%,52% 68%,44% 36%,36% 68%,28% 36%,20% 68%,12% 36%,4% 68%,0 52%); }
.seam--band-gradient { --seam-band:var(--blue-electric); --seam-fg:var(--white); }
.seam--band-gradient > .seam__field { background:linear-gradient(100deg,var(--blue-electric),var(--green)); }
.seam--band-mesh     { --seam-band:var(--ink-950); --seam-fg:var(--white); }
.seam--band-mesh     > .seam__field { background:radial-gradient(40% 60% at 18% 30%,rgba(9,147,255,.65),transparent 60%),radial-gradient(45% 65% at 78% 25%,rgba(254,138,0,.5),transparent 60%),radial-gradient(50% 60% at 50% 90%,rgba(19,206,102,.5),transparent 60%); }
.seam--band-confetti { --seam-band:var(--blue-lightest); --seam-fg:var(--ink-900); }
.seam--band-confetti > .seam__field { opacity:.7; background:radial-gradient(var(--blue-electric) 3px,transparent 3.5px) 0 0/34px 34px,radial-gradient(var(--green) 3px,transparent 3.5px) 17px 17px/34px 34px,radial-gradient(var(--orange) 3px,transparent 3.5px) 0 17px/34px 34px; }

/* — FX bands: their .seam__field IS the identity (animated/gradient). Reuse the band
   base + edges above; motion gated by --play + the reduced-motion rule. — */
.seam--band-conic    { --seam-band:var(--ink-950); --seam-fg:var(--white); }
.seam--band-conic    > .seam__field { background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(9,147,255,.5) 0 8deg,transparent 8deg 24deg,rgba(19,206,102,.45) 24deg 32deg,transparent 32deg 48deg,rgba(254,138,0,.4) 48deg 56deg,transparent 56deg 72deg); left:50%; top:50%; right:auto; bottom:auto; width:900px; height:900px; inset:auto; transform:translate(-50%,-50%); -webkit-mask-image:radial-gradient(closest-side,#000 30%,transparent 72%); mask-image:radial-gradient(closest-side,#000 30%,transparent 72%); animation:seamSpin 26s linear infinite; animation-play-state:var(--play); }
.seam--band-sunburst { --seam-band:var(--orange); --seam-fg:var(--orange-darkest); }
.seam--band-sunburst > .seam__field { background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(255,255,255,.22) 0 6deg,transparent 6deg 18deg); left:50%; top:44%; right:auto; bottom:auto; width:1200px; height:1200px; inset:auto; transform:translate(-50%,-50%); -webkit-mask-image:radial-gradient(closest-side,#000 34%,transparent 70%); mask-image:radial-gradient(closest-side,#000 34%,transparent 70%); animation:seamSpin 40s linear infinite; animation-play-state:var(--play); }
.seam--band-prism    { --seam-band:var(--blue-electric); --seam-fg:var(--white); }
.seam--band-prism    > .seam__field { background:repeating-linear-gradient(66deg,var(--blue-electric) 0 60px,var(--green) 60px 120px,var(--orange) 120px 180px,#7b2ff7 180px 240px); }
.seam--band-prism    > .seam__above,.seam--band-prism > .seam__below { clip-path:none; }
.seam--band-prism    > .seam__above { clip-path:polygon(0 0,100% 0,100% 12%,0 66%); }
.seam--band-prism    > .seam__below { clip-path:polygon(0 100%,100% 100%,100% 88%,0 34%); }
.seam--band-popart   { --seam-band:var(--yellow); --seam-fg:var(--ink-950); }
.seam--band-popart   > .seam__field { opacity:.9; background:radial-gradient(var(--red-light) 34%,transparent 36%) 0 0/40px 40px; }
.seam--band-aurora   { --seam-band:#070d14; --seam-fg:var(--white); }
.seam--band-aurora   > .seam__field { background:radial-gradient(60% 80% at 20% 20%,rgba(9,147,255,.55),transparent 60%),radial-gradient(55% 75% at 80% 30%,rgba(19,206,102,.5),transparent 60%),radial-gradient(70% 90% at 50% 100%,rgba(123,47,247,.45),transparent 60%); }
.seam--band-glitch   { --seam-band:#05090e; --seam-fg:var(--white); }
.seam--band-glitch   > .seam__field { opacity:.5; background:linear-gradient(rgba(9,229,255,.10) 1px,transparent 1px) 0 0/100% 4px; }
.seam--band-blueprint{ --seam-band:#08213f; --seam-fg:var(--white); }
.seam--band-blueprint> .seam__field { opacity:.55; background:linear-gradient(rgba(255,255,255,.18) 1px,transparent 1px) 0 0/100% 26px,linear-gradient(90deg,rgba(255,255,255,.18) 1px,transparent 1px) 0 0/26px 100%; }
.seam--band-spotlight{ --seam-band:var(--ink-950); --seam-fg:var(--white); }
.seam--band-spotlight> .seam__field { background:radial-gradient(closest-side at 50% 40%,rgba(255,255,255,.16),transparent 70%),repeating-conic-gradient(var(--ink-800) 0 25%,var(--ink-900) 0 50%) 0 0/52px 52px; }
.seam--band-terrazzo { --seam-band:var(--blue-lightest); --seam-fg:var(--ink-900); }
.seam--band-terrazzo > .seam__field { opacity:.85; background:radial-gradient(var(--blue-electric) 6%,transparent 7%) 0 0/48px 48px,radial-gradient(var(--green) 6%,transparent 7%) 24px 12px/54px 54px,radial-gradient(var(--orange) 6%,transparent 7%) 12px 30px/60px 60px; }
.seam--band-iris     { --seam-band:var(--blue-electric); --seam-fg:var(--white); }
.seam--band-iris     > .seam__field { background:linear-gradient(120deg,var(--blue-electric) 0%,var(--green) 100%),radial-gradient(60% 120% at 80% 0%,rgba(255,255,255,.35),transparent 60%); }
.seam--band-orb      { --seam-band:var(--ink-950); --seam-fg:var(--white); }
.seam--band-orb      > .seam__field { background:radial-gradient(closest-side,rgba(9,147,255,.6),rgba(19,206,102,.28) 55%,transparent 78%); left:50%; top:50%; right:auto; bottom:auto; width:640px; height:640px; inset:auto; transform:translate(-50%,-50%); }
.seam--band-blob     { --seam-band:var(--blue-electric); --seam-fg:var(--white); }
.seam--band-blob     > .seam__field { background:radial-gradient(120% 120% at 30% 25%,var(--blue-electric),var(--green) 60%,var(--green-dark)); }
.seam--band-ribbon   { --seam-band:var(--blue-electric); --seam-fg:var(--white); }
.seam--band-ribbon   > .seam__field { background:linear-gradient(100deg,var(--blue-electric),var(--green) 52%,var(--orange)); }
.seam--band-neonframe{ --seam-band:var(--ink-950); --seam-fg:var(--white); }
.seam--band-neonframe> .seam__field { background:none; border:2px solid var(--blue-electric); margin:14px; border-radius:12px; box-shadow:0 0 22px 2px color-mix(in srgb,var(--blue-electric) 55%,transparent),inset 0 0 22px 2px color-mix(in srgb,var(--blue-electric) 30%,transparent); }
.seam--band-split    { --seam-band:var(--blue-electric); --seam-fg:var(--white); }
.seam--band-split    > .seam__field { background:linear-gradient(122deg, var(--blue-electric) 49%, var(--green) 49%); }
.seam--band-split    > .seam__field::after { content:""; position:absolute; top:-20%; left:0; width:32%; height:140%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent); animation:seamSweep 4.5s ease-in-out infinite; animation-play-state:var(--play); }
.seam--band-split    > .seam__above { clip-path:polygon(0 0,100% 0,100% 12%,0 66%); }
.seam--band-split    > .seam__below { clip-path:polygon(0 100%,100% 100%,100% 88%,0 34%); }
.seam--band-stripe, .seam--band-stripe-xl   { --seam-band:var(--orange); --seam-fg:var(--ink-950); }
.seam--band-stripe   > .seam__field, .seam--band-stripe-xl > .seam__field { background:repeating-linear-gradient(-3.1deg, color-mix(in srgb,var(--ink-950) 16%,transparent) 0 20px, transparent 20px 46px); animation:seamPan 6s linear infinite; animation-play-state:var(--play); }
.seam--band-stripe   > .seam__above, .seam--band-stripe-xl > .seam__above { clip-path:polygon(0 0,100% 0,100% 12%,0 66%); }
.seam--band-stripe   > .seam__below, .seam--band-stripe-xl > .seam__below { clip-path:polygon(0 100%,100% 100%,100% 88%,0 34%); }
/* blob/orb gain their organic idle motion */
.seam--band-blob     > .seam__field { animation:seamHue 8s ease-in-out infinite; animation-play-state:var(--play); }
.seam--band-orb      > .seam__field { animation:seamFloatY 6s ease-in-out infinite; animation-play-state:var(--play); }

/* ============================================================================
   REDUCED MOTION — kill the imported band animations (belt + braces alongside --play). */
@media (prefers-reduced-motion: reduce) {
  .seam--band-conic > .seam__field, .seam--band-sunburst > .seam__field,
  .seam--band-split > .seam__field::after, .seam--band-stripe > .seam__field,
  .seam--band-blob > .seam__field, .seam--band-orb > .seam__field { animation: none !important; }
}
/* ============================================================================
   GRID OVERLAY (catalog dev-aid) — a live mirror of the REAL 12-COLUMN GRID
   (`.g-cols`): same content region (--g-maxw within --g-edge), same 12 tracks,
   same --g-gutter between them. Toggle it over a slice preview to eyeball whether
   content lands on the grid. `html.show-grid` is set ONLY by the catalog preview's
   "⊞ Grid" button — never shipped. It reads the SAME tokens as .g-cols, so it can
   never drift from the system (bump --g-maxw and this tracks it automatically). */
html.show-grid body::before {
  content:""; position:fixed; top:0; bottom:0; left:50%; transform:translateX(-50%);
  /* identical to .g-cols content region: capped to --g-maxw, else viewport minus edges */
  width: min(var(--g-maxw), 100% - 2 * var(--g-edge));
  z-index: 2147483000; pointer-events:none;
  --_col: calc((100% - 11 * var(--g-gutter)) / 12);   /* one content column, gutters removed */
  /* tinted column bands + transparent gutters; background-size = width + one gutter so exactly
     12 tracks tile across the region (the 12th's trailing gutter falls just past the edge). */
  background-image: repeating-linear-gradient(90deg,
    color-mix(in srgb, var(--orange) 13%, transparent) 0,
    color-mix(in srgb, var(--orange) 13%, transparent) var(--_col),
    transparent var(--_col),
    transparent calc(var(--_col) + var(--g-gutter)));
  background-size: calc(100% + var(--g-gutter)) 100%;
  outline: 1px dashed color-mix(in srgb, var(--orange) 40%, transparent);
}
html.show-grid body::after {
  content:"⊞ 12-COL · --g-maxw (1400px)";
  position:fixed; top:8px; left:50%; transform:translateX(-50%); z-index:2147483001; pointer-events:none;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--orange); background:color-mix(in srgb, var(--ink-950) 78%, transparent); padding:3px 10px; border-radius:6px;
}


/* ===== brand override (tailoraccess-ai-splash) tokens.override.css ===== */
/* ===== tailoraccess-ai-splash brand skin =====
   Appended AFTER the platform tokens but BEFORE the scoped slice CSS at compose
   time (--brand tailoraccess-ai-splash). Brand-wide tweaks live here so every
   page inherits them; page-specific hacks stay in a manifest's pageCss.

   PROVENANCE: §"PRODUCT SKIN" below is SpitSpot's product skin, copied verbatim
   2026-10-03 (companies/spitspot-ai/.../tokens.override.css). We did NOT fork the
   slice library: the shared component-library is a strict SUPERSET of SpitSpot's
   stale slice fork (12 extra slices, incl. every product-*), so a fork only loses
   slices. The skin is the part that makes SpitSpot look like a product site, so
   that is the part we took — INCLUDING its palette (blues + whites), per the
   2026-10-03 ruling. Keep the `ss-*` class names: they are the shared surface
   vocabulary and component-library/slices/content/prose-2.html + the registry
   already reference them.
   ============================================================ */

/* ============================================================
   1. PALETTE — SpitSpot blues + whites, TailorAccess orange on the CTA
   (user ruling 2026-10-03)

   Start from the platform/SpitSpot palette: blue #1ca2e0 accent, white-forward
   surfaces, Montserrat / DM Serif / JetBrains Mono. Two changes:

     platform ACTION ramp (--green-*) -> ORANGE #F7901E   buttons, CTAs only
     platform INK ramp (near-black)   -> NAVY BLUE        no black anywhere
     platform ACCENT (--blue-*)       -> unchanged, SpitSpot blue

   The orange is the penguin's beak and bow tie, so the CTA is the one place the
   brand mark's color shows up. "Green = action only" becomes "orange = action
   only" — same rule, one hue swapped. Anything that is not a button or a CTA
   stays blue.

   COOL AND ICY, NO HEAVY DARK (user 2026-10-03): the register is the penguin's —
   ice, not night. The page is light blue, white and cool grey; a bright CTA band
   is the loud moment. Dark ink panels are OUT as a mid-page surface — the ONE
   sanctioned dark is the footer (dark ink blue). The platform ink ramp is a
   near-black navy (#0a121b) used BOTH as dark surfaces and as text on white, so
   it is rebased here on the blue ramp: the footer reads deep BLUE and body text
   reads navy, never black.
   See WEBSITE-RULES §4.6a — `mode: ink-800` + `ss-panel-glow` mid-page is banned
   on this brand; use a bright band instead.
   ============================================================ */
:root {
  /* ---- INK ramp rebased on the blue ramp. Mostly a TEXT ramp here: the only
         sanctioned dark SURFACE is the footer. ---- */
  --ink-950: #041d33;
  --ink-900: #062e53;   /* footer surface + body text on white (13:1) */
  --ink-800: #0a3d6b;   /* raised dark surface — footer internals only */
  --ink-700: #0d4d87;   /* borders on dark */
  --ink-600: #155f9f;
  --ink-500: #4a7fa8;   /* muted text on dark */
  --ink-400: #7aa3c4;   /* still BANNED as a background (platform rule) */

  /* ---- ICY NEUTRALS: the greys carry a blue cast so "white → grey → light
         blue" reads as one cool family instead of white → warm grey. ---- */
  --neutral-lightest: #f1f5f9;   /* was #f2f2f2 — the quiet band grey */
  --neutral-lighter:  #dbe3ec;   /* hairlines/borders on light */
  --neutral-light:    #a9b8c8;
  --neutral:          #74869a;
  --neutral-dark:     #46586b;   /* muted body text on white */
  --neutral-darker:   #2f3f52;

  /* ---- ACTION ramp (platform --green-*) -> brand orange ---- */
  --green-lightest: #fff2e3;
  --green-lighter:  #ffdcb8;
  --green-light:    #fbab52;
  --green:          #f7901e;   /* brand orange — primary action */
  --green-dark:     #b85c00;   /* 4.9:1 on white — action text/outline buttons */
  --green-darker:   #7a3d00;
  --green-darkest:  #4a2500;

  /* orange ramp re-anchored on the exact brand hex (links already ride orange) */
  --orange:        #f7901e;
  --orange-light:  #fbab52;
  --orange-dark:   #b85c00;

  /* ACTION electric ramp — the skin's light-mode jewel button (§8) builds its
     gradient from --green-electric-dark, so the WHOLE ramp has to move or the
     CTA stays green (caught in the 2026-10-03 smoke compose). */
  --green-electric-lightest: #ffefdb;
  --green-electric-lighter:  #ffdcb3;
  --green-electric-light:    #ffb761;
  --green-electric:          #ff8b00;
  --green-electric-vivid:    #ff8b00;
  --green-electric-dark:     #d97400;
  --green-electric-darker:   #8f4d00;
  --green-electric-darkest:  #573000;

  /* action glow follows the action hue; blue glow stays platform */
  --glow-green:  #ff8b00;
  --glow-orange: #ff8b00;
}

/* Nav brand lockup: the mark SVG is fill="currentColor" inside an <a>, so with no
   color set it inherited the browser's default link blue (caught in the 2026-10-03
   smoke compose). Pin the whole lockup to the nav's logo text color. */
#nav .brand, #nav .brand svg { color: var(--logo-text); }

/* Footer credit link: kill default browser link-blue. */
#footer .foot__made a { color: var(--link); }

/* ============================================================
   PRODUCT SKIN (from SpitSpot, 2026-08-12; adopted here 2026-10-03)
   Direction: tech product marketing site (Linear/Stripe) — light-forward,
   gradient accents, product-scale type. Fonts stay platform (Montserrat /
   DM Serif Display emph / JetBrains Mono); the palette is retargeted in §1
   above, so every `--blue-*` below renders AMBER and every `--green-*` renders
   ORANGE. Read it that way; do not hand-pick hexes down here.

   ORDERING NOTE: this file is inlined AFTER base tokens but BEFORE the
   scoped slice CSS. Token redefinitions (:root) win automatically; element
   overrides are prefixed with `body` to out-rank `#id .class` slice rules.
   ============================================================ */

/* ── 1. Type + rhythm: award-site scale → product scale ────────────── */
:root {
  --t-display:  clamp(2.75rem, 6vw, 4.75rem);   /* was clamp(3.25rem,11vw,9rem) */
  --t-h1:       clamp(2rem, 4vw, 3rem);          /* was 4rem max */
  --t-h2:       clamp(1.6rem, 3vw, 2.25rem);     /* was 2.75rem max */
  --t-h3:       clamp(1.25rem, 2.2vw, 1.6rem);
  --pad-section: clamp(48px, 7vw, 96px);         /* was 140px max */
}

/* Heroes stop owning the whole viewport; the fold shows product next. */
/* (!important: slice CSS is #id-scoped and out-ranks brand selectors) */
body #hero .hero,  body #hero .hero2, body #hero .hero3, body #hero .hero4,
body #hero .hero5, body #hero .hero6, body #hero .hero7 {
  min-height: clamp(520px, 68vh, 760px) !important;
}
/* Compact heroes leave no runway for the absolute scroll cue — it overlapped
   the subhead (user finding, features hero). Product-scale heroes don't need
   a scroll nudge; kill it sitewide. */
body #hero .cue { display: none !important; }

/* product-frame character cutout: nudge further outboard so she doesn't
   cover frame content (user finding — was overlapping the Submit button). */
body .pf1--char-right .pf1-char { right: calc(-1 * clamp(36px, 4vw, 72px)) !important; }
body .pf1--char-left  .pf1-char { left:  calc(-1 * clamp(36px, 4vw, 72px)) !important; }

/* ── 2. Tinted-surface vocabulary (manifest `extra` classes) ───────────
   The anti-long-white-run move without black slabs. Attach on a section:
     ss-tint        blue-lightest → white vertical wash
     ss-tint-green  green-lightest → white wash (use once per page, max)
     ss-mesh        soft two-hue mesh (blue + green blobs, very low chroma)
     ss-panel-glow  pair with mode ink-800: adds blue bloom + depth gradient
   All pair with existing .tx-bg-grid--fine / .tx-paper for texture. */
/* Tints stay WHITE at their top/bottom edges so white-crested seams and
   neighboring white sections merge invisibly (seam sa-/sb- colors derive
   from the section MODE, which stays `light`). */
body .slice.ss-tint {
  background:
    radial-gradient(110% 62% at 50% 46%, var(--blue-lightest, #e1f4ff) 0%, color-mix(in srgb, var(--blue-lightest, #e1f4ff) 55%, #fff) 55%, transparent 82%),
    #ffffff;
}
body .slice.ss-tint-green {
  background:
    radial-gradient(110% 62% at 50% 46%, var(--green-lightest, #e7faef) 0%, color-mix(in srgb, var(--green-lightest, #e7faef) 55%, #fff) 55%, transparent 82%),
    #ffffff;
}
body .slice.ss-mesh {
  background:
    radial-gradient(44% 38% at 18% 30%, color-mix(in srgb, var(--blue-light, #41c9ff) 14%, transparent), transparent 72%),
    radial-gradient(40% 34% at 82% 34%, color-mix(in srgb, var(--green-lighter, #cff5e0) 38%, transparent), transparent 74%),
    radial-gradient(52% 40% at 50% 72%, color-mix(in srgb, var(--blue-lighter, #7ad9ff) 12%, transparent), transparent 76%),
    #ffffff;
}
/* ss-grey — Stripe-style FLAT quiet band: blue-tinted light grey, hard
   clean edges against white neighbors (deliberately NOT white-crested —
   the crisp grey/white line is the look). Alternate with white sections;
   the glow washes above stay available where a softer read is wanted. */
/* one level darker per user 2026-08-15 — 22% mix was invisible next to white */
body .slice.ss-grey { background: color-mix(in srgb, var(--blue-lightest, #e1f4ff) 60%, #f2f5f8); }

body .slice.ss-panel-glow {
  background:
    radial-gradient(58% 60% at 78% 0%,  color-mix(in srgb, var(--blue, #1ca2e0) 26%, transparent), transparent 68%),
    radial-gradient(42% 48% at 8% 100%, color-mix(in srgb, var(--blue-dark, #086fc1) 30%, transparent), transparent 70%),
    radial-gradient(44% 50% at 94% 100%, color-mix(in srgb, var(--green, #13ce66) 18%, transparent), transparent 70%),
    linear-gradient(180deg, var(--ink-800, #14222f), var(--ink-900, #0e1822));
}

/* ── 3. Cards: pale-gradient blobs → crisp product cards ───────────── */
body .mode-light .of-card,
body .mode-light .sv-card,
body .mode-light .cg-card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(10, 18, 27, .05), 0 8px 24px rgba(10, 18, 27, .05);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
body .mode-light .of-card:hover,
body .mode-light .sv-card:hover,
body .mode-light .cg-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--blue) 38%, var(--line));
  box-shadow: 0 2px 4px rgba(10, 18, 27, .06), 0 16px 40px rgba(10, 18, 27, .10);
}

/* ── 3a. (gradient h2/h3 emph REMOVED 2026-08-13 — user ruling: gradient
   heading treatment out; emph is flat blue everywhere like h1, keeps
   h1/h2/h3 consistent. Stat-number gradient §9b intentionally kept.) */

/* ── 3a-1. HEADING CASING RULES (user ruling 2026-08-13) ─────────────
   ONE rule, two contexts:
   • ALL-CAPS lines (h1 + any "yelling" caps heading): emph = Title Case
     (base tokens' capitalize — lowercase drops out of a caps line,
     italic serif dies in caps).
   • Everything else (h2/h3 default): SENTENCE case, emph included —
     font + color are the ONLY difference, never casing.
   Non-emph text: sentence case default; ALL CAPS allowed for yelling;
   Title Case NEVER (that's a content bug — fix the markup).
   Mechanics: base .emph{text-transform:capitalize} stays (covers h1);
   below flips h2/h3 emph to none, then re-asserts capitalize inside the
   caps-heading classes in use. NEW slice with a caps h2/h3? Add its
   heading class to the exception list. */
body :is(h2, h3) .emph { text-transform: none; }
body :is(.as-h1, .cta-head, .pf1-h2, .faq-h2, .ck-h2, .pr-h2, .pr-name) .emph,
body [id*="seam"] .bd :is(h2, h3) .emph,
body .ce :is(h2, h3) .emph,
body .lead-card :is(h2, h3) .emph { text-transform: capitalize; }

/* ── 3a-2. `ss-grid` — fine blueprint grid wash (works on ANY slice,
   no .tx-layer needed; fades out toward the bottom) ─────────────────── */
body .slice.ss-grid::before {
  content: '';
  opacity: var(--ssgrid-a, 1);   /* product-motion.js draws it in on enter/load */
  transform: translateY(var(--ssgrid-y, 0px));
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(color-mix(in srgb, var(--blue, #1ca2e0) 12%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--blue, #1ca2e0) 12%, transparent) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.5) 55%, transparent 90%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.5) 55%, transparent 90%);
}

/* ── 3b. Eyebrows: beacon dot marker + pinned semantic blue ──────────
   RULE: no literal "//" in eyebrow copy — the dot IS the marker.
   Light surfaces = blue-dark (PDF light theme), dark = brand blue. */
.mode-light { --eyebrow: var(--blue-dark, #086fc1); }
.mode-dark  { --eyebrow: var(--blue, #1ca2e0); }
/* !important on content/display: slice-level eyebrows ship their own glyph
   markers (faq-1 sets content:"?") which stacked on top of the beacon —
   user 2026-08-14: ONE marker, the beacon wins (lp-emoji case excepted via 12). */
body [class*="eyebrow"]::before {
  content: '' !important;
  display: inline-block !important;
  width: 8px; height: 8px; border-radius: 50%;
  margin-right: 10px;
  vertical-align: 8%;
  background: var(--green, #13ce66);
  box-shadow: 0 0 8px color-mix(in srgb, var(--green, #13ce66) 65%, transparent);
}

/* ── 4. Icon chips: raw emoji → designed 44px chips ────────────────── */
/* (!important throughout: legacy per-page pageCss from the old rubric sets
   .lp-emoji display/font-size and un-centers the glyph — user finding) */
body .lp-emoji {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  width: 44px; height: 44px; flex: 0 0 44px;
  font-size: 24px !important; line-height: 1 !important;
  vertical-align: middle !important;
  background: var(--blue-lightest, #e1f4ff);
  border: 1px solid color-mix(in srgb, var(--blue) 22%, transparent);
  border-radius: var(--radius);
}
body .slice.mode-dark:not(.owns-bg) .lp-emoji, body .slice.ss-panel-glow .lp-emoji {
  background: color-mix(in srgb, var(--blue) 16%, transparent);
  border-color: color-mix(in srgb, var(--blue) 34%, transparent);
}

/* ── 5. Depth planes (Stripe model, 2026-08-13): TEXT sits flat on the
   wall; MEDIA is raised with ONE shared layered elevation; CHARACTERS are
   either ON the media plane (pf1-char overlapping the frame) or FLAT to
   the wall — no floaty bloom, just a tight contact shadow at the feet. */
:root { --shadow-raised:
  0 1px 2px rgba(10, 18, 27, .08),
  0 8px 20px -6px rgba(10, 18, 27, .12),
  0 32px 64px -24px rgba(8, 44, 80, .35); }
body .mode-light .ct-media {
  border: 1px solid var(--line);
  box-shadow: var(--shadow-raised);
}
/* free-standing cutouts: flat to the wall */
body .h6-char img, body .char-cut img, body .char-cut { filter: none; }
body .mode-light .h6-char::after,
body .mode-light .char-cut:not(img)::after {
  content: ''; position: absolute; left: 50%; bottom: 2px; z-index: -1;
  transform: translateX(-50%);
  width: 56%; height: 12px; border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(10, 18, 27, .30), transparent 72%);
}

/* ── 6. Closing CTA band: stays LIGHT (rule 5: last slice before the
   footer reveal must run out white — the mid-page color band is the pop
   moment instead). Default slice styling on mode-light is kept. ─────── */

/* ── 7. bigtext statement: agency shout → product poster ───────────── */
body .bt-line {
  font-size: calc(clamp(2.5rem, 5.5vw, 4.5rem) * var(--bt-fit, 1)) !important;
  line-height: 1.04 !important;
}
body .bt-break { min-height: 0 !important; padding-block: var(--pad-section) !important; }

/* bigtext content-peek card: reads "broken" as a flat white strip with
   gray grip bars. Give it product-chip styling instead. */
body .bt-peek {
  background: var(--blue-lightest, #e1f4ff) !important;
  border-color: color-mix(in srgb, var(--blue) 26%, var(--line)) !important;
}
body .bt-peek .bt-grip i { background: color-mix(in srgb, var(--blue) 40%, var(--line)) !important; }

/* Dark glow panels: supporting copy was rendering too muted (QA finding
   on features + integrations panels) — lift it to readable white. */
body .slice.mode-dark:not(.owns-bg) .cta-sub,
body .slice.mode-dark:not(.owns-bg) .pf1-sub { color: rgba(255, 255, 255, .84) !important; }

/* ── 9. GRADIENT SPLASH — the Stripe product-highlight move ──────────
   The pf1 product frame's soft blue bloom becomes a SATURATED blue→green
   gradient panel the screenshot floats on. Copy stays outside the splash
   (head above the stage), so no text-contrast risk. Light mode only —
   dark panels keep the emission bloom. */
body .mode-light .pf1-stage::before {
  inset: -9% -5% !important;
  border-radius: calc(var(--radius-lg, 16px) * 1.5) !important;
  background:
    radial-gradient(60% 90% at 82% 0%, rgba(255, 255, 255, .20), transparent 60%),
    linear-gradient(115deg, var(--blue-electric, #0993ff) 0%, var(--blue, #1ca2e0) 52%, var(--green, #13ce66) 100%) !important;
}

/* ── 9a. Gradient hairline frame — product shots get a 1px jewel edge
   instead of gray --line (padding-box/border-box double-gradient trick;
   border-image can't do rounded corners). */
body .mode-light .pf1-frame,
body .mode-light .ct-media {
  border-color: transparent !important;
  background:
    linear-gradient(var(--surface, #fff), var(--surface, #fff)) padding-box,
    linear-gradient(115deg, var(--blue-electric, #0993ff), var(--blue, #1ca2e0) 52%, var(--green, #13ce66)) border-box !important;
  box-shadow: var(--shadow-raised) !important;
}

/* ── 9b. Gradient stat numbers — count-up numerals carry the same
   blue→green fill as the .emph headline gradient (§3a). */
body .slice.mode-light .st-big {
  background-image: linear-gradient(96deg, var(--blue-dark, #086fc1) 0%, var(--blue, #1ca2e0) 55%, var(--green-dark, #0fa451) 115%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent;
}
body .slice.mode-dark .st-big,
body [class*="mode-ink"] .st-big {
  background-image: linear-gradient(96deg, #7dcfff 0%, var(--blue-light, #41c9ff) 55%, #61dfa7 130%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent;
}

/* ── 9c. (halo removed 2026-08-13 — flat-to-wall ruling, see §5) ───── */
body .mode-light .h6-char, body .mode-light .char-cut { position: relative; }

/* ── 8. Buttons: LIGHT-mode jewel ────────────────────────────────────
   Base tokens flatten light CTAs to a matte chip (flat fill, no shadow).
   Keep the dark button's gradient dimensionality but swap EMISSION (glow,
   invisible on white) for PHYSICAL depth: glossy top bevel + offset
   green-tinted ambient shadow. Dark mode untouched — base electric glow.
   (Selectors carry `body` + mode to out-rank base (0,2,0) mode rules.) */
body [data-theme="light"] .btn-cta,
body .mode-light .btn-cta {
  background: radial-gradient(125% 130% at 50% 0%,
    color-mix(in oklch, var(--green-electric-dark), white 20%) 0%,
    var(--green-electric-dark) 52%,
    color-mix(in oklch, var(--green-electric-dark), black 18%) 100%);
  border-color: var(--green-darker);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .4),
    0 1px 2px color-mix(in srgb, var(--green-darkest) 40%, transparent),
    0 8px 20px -8px color-mix(in srgb, var(--green-dark) 55%, transparent);
}
body [data-theme="light"] .btn-cta:hover,
body .mode-light .btn-cta:hover {
  border-color: var(--green-darkest);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .5),
    0 2px 4px color-mix(in srgb, var(--green-darkest) 45%, transparent),
    0 14px 30px -10px color-mix(in srgb, var(--green-dark) 70%, transparent);
}

/* ── 10. Micro-motion support (product-motion.js) ────────────────────
   Magnetic CTAs: JS writes --mbx/--mby; CSS owns the transform so the
   hover lift and the magnet pull compose (.btn's existing transform
   transition smooths both). */
body .btn-cta, body .btn-blue {
  transform: translate(var(--mbx, 0px), var(--mby, 0px));
}
body .btn-cta:hover, body .btn-blue:hover {
  transform: translate(var(--mbx, 0px), calc(var(--mby, 0px) - 2px));
}
body .btn-cta:active, body .btn-blue:active {
  transform: translate(var(--mbx, 0px), var(--mby, 0px));
}
/* nav scroll-progress hairline (element injected by product-motion.js) */
.ss-progress {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--blue-electric, #0993ff), var(--blue, #1ca2e0) 55%, var(--green, #13ce66));
  pointer-events: none; z-index: 5;
}

/* display-emph blue (user 2026-08-13): tuned vivid for BIG text only —
   3.77:1 clears the 3:1 large-text bar while keeping brand pop.
   Small text on white stays --blue-text (#086fc1, 5.18:1). */
:root { --blue-display: #0d8ad0; }

/* ── 11. ss-stage: grounded-character treatment (user 2026-08-13,
   REVISED same day) ── AIRBORNE/JUMPING poses ONLY: the feet-to-shadow
   gap is what sells it (hero-5's celebrating maisy). On flat-footed
   standing cutouts it reads pasted — user rejected, do not apply there.
   Never on torso-up cutouts or scene photos. Add class "ss-stage" to the
   cutout's positioned container (manifest extra / pageCss hook). */
.ss-stage { position: relative; }
.ss-stage > img, .ss-stage .char-cut, .ss-stage img.char-cut {
  filter: drop-shadow(0 18px 30px rgba(4, 10, 17, .32));
}
/* floor line: hairline fading at both ends */
.ss-stage::before {
  content: ""; position: absolute; left: 2%; right: 2%; bottom: 6px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 16%, var(--line) 84%, transparent);
  pointer-events: none;
}
/* contact shadow: soft ellipse under the feet */
.ss-stage::after {
  content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: min(68%, 300px); height: 15px; border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(4, 10, 17, .42), transparent 72%);
  pointer-events: none;
}
/* dark surfaces: shadow reads via lightened floor + deeper ellipse */
.mode-dark .ss-stage::before, .surf-ink-800 .ss-stage::before {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18) 16%, rgba(255,255,255,.18) 84%, transparent);
}

/* ── 12. Eyebrow marker (SUPERSEDED 2026-08-15, bugmap #138/#141/#150) ──
   Old rule let an lp-emoji chip replace the beacon. New ruling: NO emoji in
   eyebrows, ever — the beacon is the only marker. Eyebrow content was swept
   clean of emoji site-wide; if a chip ever sneaks back in, hide the CHIP
   (not the beacon) so the regression is visible in review. */
[class*="eyebrow"] .lp-emoji { display: none !important; }

/* ── 13. Emph optical compensation (user 2026-08-13) ──
   DM Serif italic has a smaller x-height + lighter stroke than the bold
   sans beside it; at equal font-size the "emphasis" reads weaker. Bump
   heading emph so it visually matches its counterpart. */
body h1 .emph, body h2 .emph, body h3 .emph, body .as-h1 .emph, body .as-h2 .emph {
  font-size: 1.1em; line-height: 1; letter-spacing: .005em;
}

/* ── 14. Hero receipts-ribbon typography (user 2026-08-14) ──
   The stat strip read like section headings (clamp up to 2.2rem). It is a
   ticker, not a headline: cap the stat number line at ~1.3rem and let the
   mono caption carry the label. Applies to every hero-6/7 ribbon site-wide. */
#hero .stat .n, .ribbon .stat .n { font-size: clamp(1.05rem, 1.4vw, 1.3rem) !important; font-weight: var(--w-bold); }
.ribbon { gap: clamp(16px, 3vw, 40px); padding-top: 14px; padding-bottom: 18px; }

/* ── 15. Heading-emph blue: ONE rule, site-wide (user 2026-08-15, bugmap
   #137/#144-148) ── The 2026-08-13 display-blue ruling (#0d8ad0, 3.77:1 on
   white for big text) was only pinned on heroes via per-page pageCss; every
   mid-page h2/h3 emph still rendered base --blue (#1ca2e0) — the "out of
   date" color reports. Codified: LIGHT surfaces = --blue-display, DARK
   surfaces keep core --blue (pops on ink). Colored bands keep their white
   emph (re-asserted below so this rule can't steal it). Per-page hero pins
   are now redundant (same value) and can be deleted on touch. */
/* !important: product slices (pf1/pc1/pp1) ship their own emph color pins
   (var(--blue-text)) against the centralized-emph rule — override them too. */
body .mode-light :is(h1, h2, h3, .as-h1, .as-h2) .emph { color: var(--blue-display, #0d8ad0) !important; }
body .mode-light .band-on-color .emph,
body .mode-light [class*="seam--band"] .emph { color: rgba(255,255,255,.94) !important; }

/* ── 16. Product-frame chips: deeper overlap (user 2026-08-15, bugmap #131;
   +20px again per bugmap #151/#152 round 3 — tiles were still "barely dangling") ──
   Chips ride the frame's bottom edge, overlapping the image. Slice CSS bakes an
   id-scoped `#<sect> .pf1-chips{margin-top:calc(-1*var(--space-6))}` that outranks
   a bare class rule, so this must be !important; min-width guard keeps the slice's
   own max-767px mobile reset (margin-top:var(--space-4)) in charge on phones. */
@media (min-width: 768px) {
  .pf1-chips { margin-top: calc(-1 * var(--space-6) - 40px) !important; }
}

/* ── 17. Cardgrid stats: retire the giant blue display number (bugmap #161/#180) ──
   45px Montserrat-900 blue read as a one-off, and word-stats ("Mac+Win",
   "In-ticket") looked absurd at display scale. ONE consistent treatment now:
   compact black ink number/word + the existing mono label, matching the
   chip/stat vocabulary used elsewhere. !important because page CSS and slice
   CSS may scope harder. */
.cg-stat-n {
  font-size: clamp(1.15rem, 1.6vw, 1.45rem) !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
  color: var(--ink-900, #0a121b) !important;
}

/* ============================================================
   BRAND TAIL — rules that must out-rank the product skin above.
   (Everything here is deliberately LAST in the file.)
   ============================================================ */

/* Eyebrow beacon dot: the skin (§3b) paints it with the ACTION token, which on
   this brand is the CTA orange. Eyebrows are accent, not action, so pin the dot
   and its bloom back to blue. Orange stays reserved for things you click. */
body [class*="eyebrow"]::before {
  background: var(--blue) !important;
  box-shadow: 0 0 8px color-mix(in srgb, var(--blue) 65%, transparent) !important;
}

/* CTA ON COLOUR BANDS (user 2026-10-03, "each of these slices is ugly"). Every band
   seam ships a WHITE pill for its action (white-on-colour was the platform's loud
   default). On this brand orange is THE action colour and the band is the one place
   the page actually asks for a click, so the white pill reads as a label, not a
   button. One rule: any action inside a colour band takes the brand button recipe,
   flat orange fill + white label. Inline slice styles (peek-seam-28 bakes
   background:#fff inline) lose to !important here. Eyebrows on bands go full
   white: the platform's .75 opacity vanished on saturated blue. */
body [class*="seam--band"] .cta,
body [class*="seam--band"] a[data-slot="ctaText"],
body .band-on-color a[data-slot="ctaText"],
body .band-on-color a[style*="background:#fff"] {   /* peek-seam-28 et al: classless inline-styled pill */
  background: var(--green) !important;
  color: var(--white) !important;
  border: 1px solid var(--green) !important;
  box-shadow: 0 10px 24px -14px rgba(6, 46, 83, .45) !important;
}
body [class*="seam--band"] .eyebrow,
body [class*="seam--band"] [class*="eyebrow"] { opacity: 1 !important; color: var(--white) !important; }
body [class*="seam--band"] [class*="eyebrow"]::before {
  background: var(--white) !important;
  box-shadow: 0 0 8px rgba(255,255,255,.65) !important;
}

/* FLAT BUTTONS (user 2026-10-03). The skin's §8 "jewel" treatment builds a
   radial gradient from --green-electric-dark plus an inset bevel and a tinted
   drop shadow; on orange that stack reads muddy and far too dark. Kill the 3D
   entirely on this brand — flat fill, hairline edge, no bevel, no bloom, in both
   modes. The hover lift (.btn:hover translateY) stays: it is motion, not depth. */
body .btn-cta,
body [data-theme="light"] .btn-cta,
body .mode-light .btn-cta,
body .mode-dark .btn-cta {
  background: var(--green) !important;
  border-color: var(--green) !important;
  box-shadow: none !important;
}
/* HOVER = TILT + INTERIOR SHEEN, NO EXTERNAL GLOW (user 2026-10-03).
   The outward bloom is gone. Instead the button tilts a couple of degrees toward
   the cursor and a soft highlight tracks the pointer INSIDE the face, so the light
   looks like it is on the button rather than around it. Fill colour does not
   change on hover at all.

   Pointer values come from the platform's `cta-sheen.js` (assets/site-scripts.json),
   which writes CSS VARS ONLY — so the magnetic translate from product-motion.js
   still composes into the same transform below. Without the script (or under
   prefers-reduced-motion) the vars fall back and the button is simply flat. */
body .btn-cta:hover,
body [data-theme="light"] .btn-cta:hover,
body .mode-light .btn-cta:hover,
body .mode-dark .btn-cta:hover {
  background: var(--green) !important;
  border-color: var(--green) !important;
  box-shadow: none !important;
}

/* CTA label is WHITE (user 2026-10-03).
   CONTRAST NOTE: white on the brand orange #F7901E is 2.26:1 — it fails WCAG AA
   for both body (4.5:1) and large (3:1) text. Recorded as an accepted brand
   decision, not an oversight. Two ways to keep white AND pass, if we ever want to:
   deepen the button fill to --green-dark #b85c00 (white = 4.9:1), or set the
   label at >=24px bold and deepen the fill to about #c96300 (3:1).
   Reverting to the navy label (--ink-900 on orange, 6.1:1) also passes. */
body .btn-cta,
body .btn-cta:hover,
body .btn-cta:focus,
body .mode-light .btn-cta,
body .mode-dark .btn-cta { color: #fff !important; }

/* Tilt. Overrides skin §10, which set a translate-only transform on .btn-cta;
   the magnet vars (--mbx/--mby) are kept so both effects compose. */
body .btn-cta,
body .btn-cta:hover,
body .btn-cta:active {
  transform:
    translate(var(--mbx, 0px), var(--mby, 0px))
    perspective(600px)
    rotateX(calc(var(--ptr-dy, 0) * -5deg))
    rotateY(calc(var(--ptr-dx, 0) * 5deg)) !important;
  transform-style: preserve-3d;
  transition: transform .12s ease-out, background-color .15s linear;
}

/* Interior sheen. ::before is inset to the button box, so the highlight is
   clipped to the face by its own geometry — no overflow:hidden needed (the click
   ring on ::after still has to escape). */
body .btn-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(60% 120% at var(--ptr-x, 50%) var(--ptr-y, 50%),
    rgba(255, 255, 255, .55) 0%,
    rgba(255, 255, 255, .18) 38%,
    transparent 70%);
  opacity: var(--ptr-in, 0);
  transition: opacity .18s ease-out;
}
/* The ring below runs on :focus, and the browser's default blue focus outline
   drew a hard rectangle straight through it. Drop the default and give KEYBOARD
   focus a real brand indicator instead (never remove an outline without one). */
body .btn-cta:focus { outline: none; }
body .btn-cta:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

/* FOOTER: no giant wordmark (user 2026-10-03). The shared footer-reveal slice
   leads with the brand name at display scale; this site does not repeat its own
   name down there. The chrome.json `wordmark` value stays set — compose needs it
   to overwrite the slice's hardcoded Inventive mark — it is just not painted.
   Pending the full footer redesign (see WEBSITE-RULES §5). */
#footer .foot__word { display: none !important; }
/* No paint drip on this brand's footer (user 2026-10-04): the shared footer-reveal-1 drip only became visible once deploy started resolving ../_assets/footer/footer-2.svg. */
#footer .paint { display: none !important; }

/* CLICK = A RING THAT GROWS PAST THE BUTTON (user 2026-10-03). CSS-only: the ring
   lives on ::after and its animation is attached by :active, so releasing and
   pressing again re-runs it — no JS, no state to reset. The ring must escape the
   button bounds, so the button cannot clip it. */
body .btn-cta { position: relative; overflow: visible; }
body .btn-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid var(--green);
  opacity: 0;
  pointer-events: none;
}
/* :active fires the ring on mouse-DOWN; :focus keeps it running after the release
   (a press ends :active in ~100ms, which would clip the animation). Deliberately
   :focus, not :focus-visible, so a mouse click counts.
   ponytail: CSS-only, no JS asset to load. Ceiling — Safari does not focus an
   <a class="btn"> on click, so there the ring plays only while the mouse is held.
   If that matters, the fix is a 3-line pointerdown listener in the site script. */
body .btn-cta:active::after,
body .btn-cta:focus::after { animation: ta-ring .5s ease-out; }
@keyframes ta-ring {
  from { opacity: .85; transform: scale(1); }
  to   { opacity: 0;   transform: scale(1.65); }
}
@media (prefers-reduced-motion: reduce) {
  body .btn-cta:active::after { animation: none; }
}

/* ONE CTA DEFINITION (user 2026-10-05). ta-motion.js promotes every primary action
   (band `a.cta`, the inline white pill, contact-1 `.cn-submit`) to `.btn.btn-cta` so the
   recipe above is the only button recipe. contact-1's own `.cn-submit` rule fights on
   metrics at equal specificity, so pin the primary's metrics here; the band rule above
   stays as the no-JS paint. */
body .cn-submit.btn-cta {
  padding: .85em 1.7em !important;          /* = the measured primary: 16px / 13.6px 27.2px */
  font-size: 1rem !important;
  font-weight: 600 !important;
  border: 1px solid var(--green) !important;
  border-radius: var(--btn-radius) !important;
}
body .cn-submit.btn-cta:hover { background: var(--green) !important; }   /* contact-1 lightens on hover; fill never changes here */

/* INK BAND KEEPS THE BLUEPRINT GRID (user 2026-10-05). tokens.css gives the azure/blue
   bands a 26px white grid on .seam__field but ships seam--band-ink flat. The charter seam
   moved azure → ink and lost its lines; same grid, same pitch, on ink. */
body .seam--band-ink > .seam__field {
  opacity: .45;
  background:
    linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px) 0 0 / 100% 26px,
    linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px) 0 0 / 26px 100%;
}

/* SECONDARY BUTTON (user 2026-10-04). The ghost was a transparent hairline pill
   at a smaller size than the orange CTA beside it (40px vs 53px, 15.2 vs 16.8px
   type), so the pair never read as a pair. Secondary = LIGHT BLUE FILL, navy
   label, same radius, and the SAME metrics as the primary so they line up
   shoulder to shoulder. Flat, like everything else on this brand. */
body .btn-ghost, body .btn-blue {
  background: var(--blue-lightest) !important;
  color: var(--ink-900) !important;
  border: 1px solid color-mix(in srgb, var(--blue) 28%, var(--blue-lightest)) !important;
  box-shadow: none !important;
  font-size: 1.05rem !important;            /* = the primary's 16.8px */
  padding: .9em 1.9em !important;           /* = the primary's 15.2px 32px */
  font-weight: 600 !important;
}
body .btn-ghost:hover, body .btn-blue:hover {
  background: color-mix(in srgb, var(--blue) 14%, var(--blue-lightest)) !important;
  border-color: color-mix(in srgb, var(--blue) 45%, var(--blue-lightest)) !important;
  box-shadow: none !important;
}

/* NO FLOATING TABS (user 2026-10-03). hero-7's stat ribbon is built to CREST the
   fold: no bottom edge, rounded top corners, pinned flush to the hero's bottom so
   it reads as a peek into the next section. That only works when the next section
   is the SAME surface. Ours is a tint band, so the white panel hung in space over
   a colour change. Close the panel and sit it inside the hero; the seam slice
   below the hero does the transition work instead. */
/* !important: the brand layer is inlined BEFORE the scoped slice CSS, and the
   slice's own rule is also #hero-scoped, so equal specificity loses on order. */
body #hero .ribbon {
  border-bottom: 1px solid var(--line) !important;
  border-radius: var(--radius-lg) !important;
  margin-bottom: clamp(28px, 5vh, 56px) !important;
}

/* hero-7's ribbon label is hardcoded demo copy ("// the receipts") with no slot,
   so it cannot be filled from a manifest — and the literal "//" breaks the
   eyebrow rule (the beacon dot is the only marker). Hide it; the stats speak for
   themselves. NEEDS-PLATFORM: give .rb-label a data-slot so brands can fill it. */
body #hero .rb-label { display: none !important; }

/* ============================================================
   PAGE RAILS (user 2026-10-03, Stripe reference)
   Two hairlines marking where the content region starts and ends, running
   CONTINUOUSLY down the page and straight through every section boundary. They
   are what make a page of full-bleed bands read as one ruled document instead of
   a stack of unrelated strips.

   Implementation: ONE fixed overlay on <body>, not a per-slice pseudo. A per-slice
   pseudo would need `isolation:isolate` on every .slice to place the line above
   the section's own background, and that would trap the z-index of the things
   that deliberately escape their section (the sticky nav, the footer-reveal
   scroller, peek seams, character cutouts). One fixed layer has none of that risk
   and gives a truly continuous line.

   Position: the content-region edge = max(edge track, half the surplus once the
   page is wider than --g-maxw). So the rails sit exactly where `.g-cols` content
   starts and ends — content lands inside them, and full-bleed media still crosses
   them, which is the Stripe behaviour we want.

   z-index 1: above section backgrounds, below the sticky nav (z-index 50). In-flow
   content paints under it, so a rail may cross a card edge at the container line.
   That is intentional and is what Stripe does.
   ============================================================ */
:root {
  --rail-color: color-mix(in srgb, var(--blue) 16%, transparent);
  /* The rails sit OUTBOARD of the content edge by a gutter, so copy never lands on
     the line (user 2026-10-03). Clamped so they can never cross the viewport edge
     on a narrow window. */
  --rail-gap: clamp(14px, 2vw, 40px);
  --rail-inset: max(12px, calc(max(var(--g-edge), (100vw - var(--g-maxw)) / 2) - var(--rail-gap)));
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(var(--rail-color), var(--rail-color)) no-repeat left var(--rail-inset) top / 1px 100%,
    linear-gradient(var(--rail-color), var(--rail-color)) no-repeat right var(--rail-inset) top / 1px 100%;
}
/* Phones: the rails would sit on top of the edge padding and read as a border. */
@media (max-width: 767px) { body::after { display: none; } }
/* rails.js (platform asset, opt-in via --rail-inset) takes over when it runs: it draws the
   same two lines as document-space segments and CUTS them wherever an image, video, svg or
   canvas crosses the line — rails must never paint over media (user 2026-10-04). The
   body::after above is only the no-JS fallback. */
html.rails-js body::after { display: none; }
.page-rails { position: absolute; top: 0; left: 0; width: 100%; height: 0; z-index: 1; pointer-events: none; }
.page-rails i { position: absolute; width: 1px; background: var(--rail-color); display: block; }

/* The blueprint grid and the rails have to be ONE system, or the two line sets
   land at unrelated positions and read as noise (user 2026-10-03). Re-pitch
   ss-grid so its vertical lines start exactly on the left rail and step by one
   twelfth of the content region: every vertical line is then a real column
   boundary and the outermost ones sit under the rails themselves. */
body .slice.ss-grid::before {
  --ss-cell: calc((100vw - 2 * var(--rail-inset)) / 12);
  background-size: var(--ss-cell) var(--ss-cell) !important;
  /* Start the horizontal lines HALF a cell down. With y=0 the first line sat
     exactly on the section's top edge and read as a hard rule under whatever
     came before it - under a torn seam it looked like a border (user 2026-10-03). */
  background-position: var(--rail-inset) calc(var(--ss-cell) / 2) !important;
  /* And fade the grid IN at the top as well as out at the bottom, so it never
     starts on a hard line against a shaped or coloured edge above it. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, rgba(0,0,0,.5) 55%, transparent 90%) !important;
  mask-image: linear-gradient(180deg, transparent 0%, #000 14%, rgba(0,0,0,.5) 55%, transparent 90%) !important;
}

/* ── timeline-1 fixes (user 2026-10-03) ──
   1. The time chip is a fixed 44px square built for "01"; a timestamp overflows it.
      Make it a pill that grows with its label, same height.
   2. Desktop columns were ragged: a one-line title and a two-line title pushed
      their bodies to different heights. Reserve two lines on every title so the
      descriptions start on one baseline. */
body #the-day .tl-node {
  /* fit-content + justify-self: on desktop the step is a 1fr column, so width:auto
     stretched the chip across the whole column (measured 210px). */
  width: fit-content !important;
  min-width: 44px;
  justify-self: start;
  padding: 0 clamp(10px, 1vw, 14px);
  white-space: nowrap;
}
/* Ragged columns: a one-line title and a three-line title pushed their bodies to
   different baselines. A min-height only works if every title has the same line
   count, so use SUBGRID instead - the track owns three rows (chip / title / body)
   and every step shares them, whatever the wrap. */
@media (min-width: 1200px) {
  body #the-day .tl-track { grid-auto-rows: auto; }
  body #the-day .tl-step {
    grid-row: span 3;
    grid-template-rows: subgrid;
    grid-template-columns: 1fr;
    gap: var(--space-4) 0;
  }
  body #the-day .tl-body {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    gap: var(--space-2) 0;
  }
}

/* ROGUE DARK (user 2026-10-03). The platform paints <body> with the dark page
   background and every light section paints over it. Rebasing the ink ramp made
   that root navy instead of near-black, and it showed through anywhere a section
   did not cover the full width - the scrollbar gutter, sub-pixel gaps at section
   edges - as a floating dark block. This site is light-forward and the footer is
   its only dark surface, so the root itself must be white. */
html, body { background: var(--white) !important; }

/* The hero's stat ribbon is inset by --pad-inline (up to 80px), not by the
   content region, so on a wide screen it ran PAST the rails and they drew
   straight through it. Cap it to the content region so it starts and ends on the
   rails like every other block of content. */
body #hero .ribbon {
  max-width: var(--g-maxw) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Hero form card sat vertically centred against the copy column (hero-7 ships
   `.h7-form { align-self: center }`), so its top edge floated well below the
   headline. Top-align it: the card and the H1 now start on the same line, which
   is also what makes the rails and the blueprint grid read as one system across
   the fold. The eyebrow sits above both, so offset the card by the eyebrow's
   height + its margin so the card top meets the HEADLINE, not the eyebrow. */
@media (min-width: 1200px) {
  body #hero .h7-form {
    align-self: start !important;
    /* pushed down from the headline to leave room for Stitch above the card */
    margin-top: clamp(150px, 15vh, 210px);
  }
}

/* HAIRLINES AT SECTION EDGES (user 2026-10-03). Under the torn colour band, and
   at the next section boundary, a 1px grey line showed. Pixel-read: (192,198,204)
   = white blended with the footer navy. Cause: compose nests every section inside
   the footer-reveal `.scroller`, which is TRANSPARENT over the dark footer, and
   section heights are fractional (text line-heights, vw paddings) - so where two
   sections meet on a sub-pixel boundary the footer bleeds through as a hairline.
   Not Lenis (reproduced with it destroyed), not the rails, not a border.
   Paint the scroller white: the footer only ever shows through the reveal at
   the very bottom, never between sections. */
body .reveal-shell > .scroller { background: var(--white); }

/* Second hairline, same family: the torn band's colour div ends on a fractional
   row, and its white tear polygon is clipped to that same fractional edge by the
   band's own overflow:hidden - so the band colour anti-aliases through as a 22%
   line under the tear. Clipping the band only moved the line. What works: let the
   band overflow (the outer .pair still clips the seam as a whole) and push the
   bottom tear 2px past the band's edge so it paints over that row. The slice
   already does this for the TOP tear (top:-1px); the bottom never got the guard.
   NEEDS-PLATFORM: 32 torn seams share the pattern - fix at the source as
   bottom:-2px + overflow:visible on the band. */
body .seam-wrap .pair > [style*="overflow:hidden"] { overflow: visible !important; }
body .seam-wrap .pair > [style*="overflow:hidden"] > [style*="bottom:0"][style*="var(--bot)"] { bottom: -2px !important; }

/* rescue-1 character cutout: the slice anchors .char-cut to the section's
   BOTTOM edge. On this page the figure is the 'busy Stitch' who is the subject
   of the whole list, not a sign-off, so he sits at the section's vertical
   CENTRE instead (user 2026-10-03). Opt in with `extra: ta-char-mid`. */
@media (min-width: 1150px) {
  body .ta-char-mid .char-cut {
    top: 50% !important;
    bottom: auto !important;
    /* Bigger than the slice default (clamp 280-400px): at that size his props
       were unreadable. This figure IS the section's illustration, not a sign-off. */
    height: clamp(420px, 34vw, 560px) !important;
    /* Outboard nudge via a PERCENTAGE translate, not a negative `right`. The img
       is loading="lazy": a negative right put its zero-width UNLOADED box past
       the viewport edge, so the lazy loader never fired and it never got a
       width (caught 2026-10-04). min-width keeps the empty box inside the
       viewport; translate(5%) is 0 while empty and ~22px once he has width. */
    right: 0 !important;
    min-width: 40px;
    /* No outboard nudge after all: the section clips at its own edge
       (overflow:hidden), so anything past right:0 is simply cut off - the
       laptop he holds lost its lid. Flush to the edge, props intact. */
    transform: translateY(-50%);
  }
  /* And give him COLUMNS, not just a gutter: the slice runs its rows at
     col 2..11 and a 480px figure overlapped the longest title by ~100px at
     1440. With the character present the rows take col 2..8 and he owns the
     rest. Long titles wrap to two lines, which is fine. */
  body .ta-char-mid .rs-inner > * { grid-column: 2 / span 7 !important; }
}

/* ── STITCH ON THE FORM (user 2026-10-03) ──
   Opt in from the manifest with `extra: "... ta-stitch-form"` on a hero with a
   lead card. Three decorative pseudo-elements, all anchored to the TOP EDGE that
   .h7-form and .lead-card share, so every `bottom: 100%` lands on one line.

     .h7-form::before   Stitch, behind the card - the card crops him at the chest
                        and his flippers rest on its top edge. The clean "peeking
                        over" read.
     .lead-card::before speech bubble, level with his head
     .lead-card::after  the bubble's tail

   NOT DONE: an arm draped OVER the card. The render's flippers end at the same
   height as his belly, so faking the overlap with a second cut-out layer put
   belly edges and doubled flipper tips over the form (user: "a mess"). The real
   fix is a purpose-rendered pose with the flippers forward of the body
   (Higgsfield; Gemini refused it across three rolls). Until then, no overlay.
   DESKTOP ONLY - under 1200px the card stacks and there is no room. */
@media (min-width: 1200px) {
  body .ta-stitch-form .h7-form {
    position: relative;
    --stitch-w: clamp(170px, 17vw, 238px);
    --stitch-ar: 666 / 687;              /* the keyed render's own ratio */
    --stitch-drop: 4.08%;                /* the render's own counter line */
    --stitch-x: clamp(10px, 3%, 30px);
    /* Eye height above the card line: eyes at 43.7% of the render, render is
       1.0315x its width, 4.08% below the line -> (1 - .0408 - .437) * 1.0315 */
    --stitch-head-y: calc(var(--stitch-w) * 0.538);
  }
  body .ta-stitch-form .lead-card { position: relative; z-index: 1 !important; }

  body .ta-stitch-form .h7-form::before {
    content: '';
    position: absolute;
    z-index: 0 !important;
    left: var(--stitch-x);
    bottom: 100%;
    transform: translateY(var(--stitch-drop));
    width: var(--stitch-w);
    aspect-ratio: var(--stitch-ar);
    background: url('/api/pages/ta-home/assets/f47m4ri0xv69hhbl745ewgnt') no-repeat center bottom / 100% auto;
    pointer-events: none;
  }

  body .ta-stitch-form .lead-card::before {
    content: 'We would love to hear from you.';
    position: absolute;
    z-index: 3;
    left: calc(var(--stitch-x) + var(--stitch-w) * 0.9);
    bottom: calc(100% + var(--stitch-head-y) - 1.3rem);
    max-width: 15rem;
    padding: .72rem 1rem;
    background: var(--white);
    color: var(--ink-900);
    border: 1px solid var(--neutral-lighter);
    border-radius: 14px;
    box-shadow: 0 10px 28px -14px rgba(6, 46, 83, .28);
    font-family: var(--font-body);
    font-size: var(--t-body-sm);
    line-height: 1.35;
    pointer-events: none;
  }
  body .ta-stitch-form .lead-card::after {
    content: '';
    position: absolute;
    z-index: 4;
    width: 14px;
    height: 14px;
    left: calc(var(--stitch-x) + var(--stitch-w) * 0.9 - 7px);
    bottom: calc(100% + var(--stitch-head-y) - 1.3rem + 0.95rem);
    background: var(--white);
    border-left: 1px solid var(--neutral-lighter);
    border-bottom: 1px solid var(--neutral-lighter);
    transform: rotate(45deg);
    pointer-events: none;
  }
}

/* hero-5 stage caption "// on set" is Inventive studio flavour and a literal "//" (banned
   here, §4.1). Hide brand-wide. */
body .h5-tag { display: none; }

/* ── SECTION RULES (user 2026-10-04, Stripe reference) ──────────────────────
   A 1px hairline where two flat LIGHT slices meet, full-bleed, so the stack
   reads as one ruled document with the rails. Only where the slice allows:
   seams (.seam-wrap, not .slice) and the hero (sits under the nav) are never
   ruled, and the zero-height subscribe-modal host must not rule the close band. */
body .slice.mode-light + .slice.mode-light:not([data-anim="hero"]):not(:has(> .sm-host)) {
  border-top: 1px solid var(--line);
}

/* logos-3 marquee: tiles fade out BEFORE the rails, not across them (user 2026-10-04).
   The slice masks the outer 8% of the track; here tiles are fully gone 40px INSIDE
   the rail and ramp to solid over the next 160px, so nothing crosses the line. !important: slice rule is #id-scoped. */
@media (min-width: 768px) {
  body .lm-rail {
    -webkit-mask-image: linear-gradient(90deg, transparent calc(var(--rail-inset) + 40px), #000 calc(var(--rail-inset) + 200px), #000 calc(100% - var(--rail-inset) - 200px), transparent calc(100% - var(--rail-inset) - 40px)) !important;
            mask-image: linear-gradient(90deg, transparent calc(var(--rail-inset) + 40px), #000 calc(var(--rail-inset) + 200px), #000 calc(100% - var(--rail-inset) - 200px), transparent calc(100% - var(--rail-inset) - 40px)) !important;
  }
}

/* HOME #quote (quote-1): hero-weight pull quote (user 2026-10-04: "bold, make people want
   to read it"). Hand pinned to Kalam 700 (id beats the rotator's .hand-* class), type scaled
   up, column narrowed on desktop so the Stitch cutout never crosses the words, cutout grown
   with its own drop shadow (ss-stage's centred floor shadow does not match a right-side figure).
   `body #quote` prefix: compose scopes slice CSS under #quote, so a bare #quote rule here loses on source order. */
body #quote { --font-script: 'Kalam', cursive; }
@media (min-width: 1150px) { body #quote .qt-sec { min-height: 640px; } } /* desktop only: on mobile the cutout is hidden and the height left a void */
body #quote .qt-quote { font-size: clamp(2.1rem, 4.8vw, 3.9rem); font-weight: 700; line-height: 1.18; letter-spacing: -.015em; max-width: 13.5em; margin: 0 auto; } /* ~two lines at any width; one line ran under the cutout at >1600px */
body #quote .qt-quote .qt-build { color: var(--blue-dark); }
body #quote .qt-mark { font-size: clamp(5rem, 12vw, 9.5rem); font-weight: 700; }
body #quote .char-cut { height: clamp(360px, 32vw, 560px); filter: drop-shadow(0 22px 34px rgba(4, 10, 17, .30)); }
@media (min-width: 1150px) { body #quote .g-cols > .qt-body { grid-column: 2 / span 8; } }

/* HERO H1 WIDTH CAP (2026-10-04). The hero headline sits in a 7-column box and
   its longest single word ("SPREADSHEET", 11 caps) cannot wrap. At the slice's
   full size that word is wider than the column and runs under the lead card.
   It only ever fit before because the fit-to-viewport script was shrinking the
   taller headline; adding the emph line made it shorter and the script stopped.
   Cap the size so an 11-cap Montserrat Black word always fits col-7: at 1440
   that is ~92px, and the column stops growing past the 1400px content cap. */
@media (min-width: 1200px) {
  body #hero h1 { font-size: min(6.4vw, 92px) !important; }
}


/* prose-1 character figure: the platform float is min(34%,420px), which crams a two-
   character scene (Stitch + Andy, #cost) into a box narrower than the lede. Give it
   real room; the prose still wraps beside it. 2026-10-03. */
@media (min-width: 900px) {
  body .pr-inner:has(.pr-fig) .pr-fig { width: min(44%, 580px) !important; }  /* compose id-scopes slice CSS (#cost …), so !important like the rest of the tail */
}

/* EMPH ON COLOUR BANDS (2026-10-04). The skin's §15 rule pins heading emph to
   display-blue, and its own white-on-band exception is scoped to `.mode-light`
   - but torn seams are `.seam-wrap`, not `.mode-light`, so on a blue band the
   emph rendered blue-on-blue and vanished ("Ten Times Your Size"). Key the
   exception on the band's own marker instead, which every colour-band seam
   carries, so this holds for any band colour and any seam. */
body .seam-wrap .band-on-color .emph,
body .seam-wrap [class*="seam--band"] .emph { color: rgba(255, 255, 255, .94) !important; -webkit-text-stroke: 0 !important; }


/* CHARACTER FIGURES ARE FLAT (user 2026-10-03, get-in-touch). prose-1 wraps its
   `img` in a white rounded card with a drop shadow (.pr-fig). Stitch is a cutout
   with alpha; boxing him in a raised card reads as a framed photo. No box, no
   shadow, no background - he stands on the page like he does in the hero. Brand
   layer so every prose-1 placement on this site agrees, not a per-page patch. */
body .pr-fig { background: transparent !important; box-shadow: none !important; border-radius: 0 !important; }

/* prose-1 figure (2026-10-04): the payout image went through three key plates
   (green ate the cash, magenta ate the hoodie, cyan ate the jeans) - a
   two-figure scene with that many hues cannot be keyed. It ships as a FULL
   SCENE instead, so the slice's card frame is right for it; keep the rounded
   corners, soften the slice's heavy shadow to the brand's card lift. */
body .pr-fig { background: var(--white) !important; border: 1px solid var(--line) !important; box-shadow: 0 14px 34px -22px rgba(6,46,83,.35) !important; }


/* ============================================================
   CRITIC PASS 2026-10-04 (home.review.json, BLOCK 6.9): layout + casing fixes that
   belong in the brand skin, not per page. Each line names its finding. */
/* hero-7 @tablet: the lead card occluded the H1 ("SPREADSHE…") — stack it under the copy */
@media (min-width: 768px) and (max-width: 1199px) {
  body #hero .h7-grid.g-cols > .h7-copy, body #hero .h7-grid.g-cols > .h7-form { grid-column: 1 / -1; }
  body #hero .h7-form { margin-top: 28px; max-width: 560px; }
}
/* timeline-2 mobile: time chips clipped off the left viewport edge — shift the rail in */
@media (max-width: 767px) { body #the-day .tl2-rail { margin-left: 28px; } }
/* dead gap hero→the-day and the white run after the scroll rail */
body #the-day .tl2-sec { padding-top: calc(var(--pad-section) * .55); }
body #what-changes .fr { padding-bottom: calc(var(--pad-section) * .5); }
/* prose-stat-1 mobile: five giant stat words rendered BEFORE the heading — prose first */
@media (max-width: 899px) {
  body #buying .pst-rail { display: contents; }                       /* eyebrow stays on top, stats go below the prose */
  body #buying .pst-eyebrow { order: 0; grid-column: 1 / -1; }
  body #buying .pst-main { order: 1; }
  body #buying .pst-stats { order: 2; grid-column: 1 / -1; margin-top: var(--space-7); }
}
/* nav-1 hides the CTA under 768px and leaves the first phone screen with no action (critic
   mobileFold). Keep the pill; the burger still carries the links. */
@media (max-width: 767px) { body #nav .actions .btn-cta { display: inline-flex; font-size: .82rem; padding: .5rem .95rem; } }
/* prose-2 wide figure on mobile: the slice's mobile rule shrinks it to a 62% thumbnail */
@media (max-width: 767px) { body #customer .pe2-fig--wide { width: 100%; max-width: none; margin: var(--space-6) 0 0; } }
/* WEBSITE-RULES §4 heading casing: H1 = CAPS + Title Case emph; EVERY mid-page h2/h3 =
   sentence case with plain-case emph. The shared slices (rescue-1, faq-1, cta-1, band seams,
   prose-1) ship uppercase h2s and the §15 exceptions above re-capitalised their emph. */
body .slice:not(#hero) :is(h2, h3):not(.lead-card h3) { text-transform: none; letter-spacing: -.01em; }
body .seam-wrap :is(h2, h3) { text-transform: none !important; letter-spacing: -.01em !important; } /* band seams set uppercase INLINE */
body .slice:not(#hero) :is(h2, h3) .emph, body .seam-wrap :is(h2, h3) .emph, body .tl2-foot .emph { text-transform: none; }
/* SEAM NEIGHBOUR COLOURS vs SKIN SURFACES (verifier finding 2026-10-04). compose paints a seam's
   --seam-above/--seam-below from the neighbours' MODE only (light = white), so a seam next to an
   `ss-grey` slice rendered white-on-white and vanished. Map the flat grey surface onto the seam
   vars by sibling position. (ss-tint fades to white at its edges, so seams against it are
   meant to read soft; no mapping needed.) */
body .slice.ss-grey + .seam-wrap { --seam-above: color-mix(in srgb, var(--blue-lightest, #e1f4ff) 60%, #f2f5f8); --seam-above-fg: var(--ink-900); }
body .seam-wrap:has(+ .slice.ss-grey) { --seam-below: color-mix(in srgb, var(--blue-lightest, #e1f4ff) 60%, #f2f5f8); --seam-below-fg: var(--ink-900); }
/* #the-day ends under its evening wash (::after below, blue 16% at the bottom edge, scrubbed to 1
   by the time its bottom reaches the fold), so the flat ss-grey mapping above left a paler
   strip + hairline between the section and the seam's jagged edge (user 2026-10-05). The seam
   that follows the-day takes the WASHED colour: ss-grey with the same 16% blue on top. */
body #the-day + .seam-wrap {
  --seam-above: color-mix(in srgb, var(--blue) 16%, color-mix(in srgb, var(--blue-lightest, #e1f4ff) 60%, #f2f5f8));
  --seam-above-fg: var(--ink-900);
}
/* peek-seam-28 (capture-1): the right-hand slot was built for a 4-char stat (flex:0 0 auto); a
   sentence in it ran 1173px wide and clipped mid-word on mobile. */
body #capture-1 div[style*="text-align:right;flex:0 0 auto"] { flex: 1 1 280px; min-width: 0; max-width: min(46ch, 100%); text-align: left; font-size: var(--t-body-lg, 1.15rem); line-height: 1.5;   /* user 2026-10-05: one step up from body */ color: rgba(255,255,255,.92); }
/* cta-1 as the LAST slice before the footer: its corner glow bloomed into the white→ink footer
   cut (critic rule 4.8, pass 3). The last slice before the footer is flat white (rule 4.5). */
body #close .glow-layer { display: none; }

/* ============================================================
   TA MOTION (2026-10-04 design audit). CSS half of assets/ta-motion.js: keyframes,
   CSS-var hooks the script drives, and static fallbacks. Every rule here is a
   no-op without the script (vars default to their resting value) and dies under
   prefers-reduced-motion. Keyed on section ids / brand classes only.
   ============================================================ */

/* 1. Hero arrival. The script stands a real <img class="ta-stitch"> in the same box
   as the decorative ::before (which it then hides via .ta-js) so Stitch can be
   tweened up from behind the card. The bubble pseudos read --ta-bubble. */
@media (min-width: 1200px) {
  body .ta-stitch-form .h7-form.ta-js::before { display: none; }
  body .ta-stitch-form .h7-form > .ta-stitch {
    position: absolute; z-index: 0; left: var(--stitch-x); bottom: 100%;
    width: var(--stitch-w); height: auto; transform: translateY(var(--stitch-drop));
    pointer-events: none; will-change: transform;
  }
}
/* Mobile / tablet: a small Stitch peeks over the card's top-right corner. No bubble
   (no room). Same box model as desktop, just smaller and right-aligned. */
@media (max-width: 1199px) {
  body .ta-stitch-form .h7-form {
    position: relative;
    --stitch-w: clamp(96px, 26vw, 128px);
    --stitch-drop: 5%;
    margin-top: calc(var(--stitch-w) * 0.9);
  }
  body .ta-stitch-form .lead-card { position: relative; z-index: 1; }
  body .ta-stitch-form .h7-form::before,
  body .ta-stitch-form .h7-form > .ta-stitch {
    content: ''; position: absolute; z-index: 0; right: 14px; bottom: 100%;
    width: var(--stitch-w); aspect-ratio: 666 / 687; height: auto;
    transform: translateY(var(--stitch-drop));
    background: url('/api/pages/ta-home/assets/f47m4ri0xv69hhbl745ewgnt') no-repeat center bottom / 100% auto;
    pointer-events: none;
  }
  body .ta-stitch-form .h7-form.ta-js::before { display: none; }
  body .ta-stitch-form .h7-form > .ta-stitch { background: none; }
}
/* idle breathe once he has arrived */
@keyframes ta-breathe { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }
body .ta-stitch-form .ta-stitch.is-in { animation: ta-breathe 4.2s ease-in-out infinite; }
/* speech bubble pop: the script sets --ta-bubble 0 then tweens it to 1 */
body .ta-stitch-form .lead-card::before {
  opacity: var(--ta-bubble, 1);
  transform: scale(var(--ta-bubble, 1));
  transform-origin: 0 100%;
}
body .ta-stitch-form .lead-card::after {
  opacity: var(--ta-bubble, 1);
  transform: rotate(45deg) scale(var(--ta-bubble, 1));
}
/* H1 emph highlighter sweep (pale blue, under the baseline, left→right) */
body .ta-stitch-form h1 .emph {
  background: linear-gradient(var(--blue-lightest), var(--blue-lightest)) no-repeat 0 88% / var(--ta-hl, 0%) .3em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  width: fit-content;   /* the emph is a block in this H1: shrink it so the bar ends with the words */
}
/* SplitText line masks must not clip the serif italic's overhang */
body .ta-stitch-form h1 .ta-line { padding-bottom: .06em; margin-bottom: -.06em; }

/* 2. The day: evening wash the script scrubs in (--ta-day 0→1) + tighter beats on desktop */
body #the-day { position: relative; }
body #the-day::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--blue) 16%, transparent) 100%);
  opacity: var(--ta-day, 0);
}
@media (min-width: 1200px) {
  body #the-day .tl2-step { padding-bottom: clamp(48px, 14vh, 180px); }
}

/* 5. Not your job: the live row's chip fills and its divider draws blue */
body #not-your-job .rs-row { position: relative; }
body #not-your-job .rs-num { transition: background-color .35s, color .35s, box-shadow .35s; border-radius: 10px; padding: 0 .35em; margin-left: -.35em; }
body #not-your-job .rs-row.is-live .rs-num { background: var(--blue); color: #fff; box-shadow: 0 0 0 5px color-mix(in srgb, var(--blue) 18%, transparent); }
body #not-your-job .rs-row::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; z-index: 1;
  background: var(--blue); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .7s cubic-bezier(.2,.7,.2,1);
}
body #not-your-job .rs-row.is-live::after { transform: scaleX(1); }

/* 6. Buying: on desktop (rail is sticky) the live stat is ink, the rest sit back */
@media (min-width: 1200px) {
  body #buying .pst-stat { transition: border-color .35s; }
  body #buying .pst-n { color: var(--neutral); transition: color .35s; }
  body #buying .pst-stat.is-live { border-top-color: var(--blue); }
  body #buying .pst-stat.is-live .pst-n { color: var(--ink-900); }
}

/* 7. Proof: "being built" markers pulse softly (in flight); "working today" stay solid */
@keyframes ta-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
body #proof .br-panel:last-of-type .br-list li::before { animation: ta-pulse 2.2s ease-in-out infinite; }

/* 8. Feature rail: the shot shifts against the tilt (script writes --px/--py) */
body .fr-card .fr-shot {
  transform: translate(calc(var(--px, 0) * -7px), calc(var(--py, 0) * -7px));
  transition: transform .18s ease-out; will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  body .ta-stitch-form .ta-stitch.is-in,
  body #proof .br-panel:last-of-type .br-list li::before { animation: none; }
  body #the-day::after { display: none; }
  body #buying .pst-n { color: inherit; }
}


/* ===== page-level resets (slice theme-contracts dropped; modes are wrapper classes) ===== */
* { box-sizing:border-box; }
html, body { margin:0; }
/* DRAFT only: unfilled required slot — visible red flag, never silently shipped */
.lpw-needs-copy { background:var(--red,#e5484d); color:#fff !important; outline:2px dashed #fff; outline-offset:1px; padding:0 .25em; border-radius:3px; }
.lpw-needs-copy::before { content:"⚠ NEEDS COPY: "; font-family:var(--font-mono,monospace); font-size:.7em; font-weight:700; letter-spacing:.04em; }
body { font-family:var(--font-body); -webkit-font-smoothing:antialiased; background:var(--ink-950); color:var(--neutral-lightest); }
/* each slice wrapper paints its own mode bg/fg (from tokens .mode-*). */
.slice { position:relative; }

/* ===== scoped slice styles ===== */
/* ===== nav (nav/nav-1.html) ===== */
#nav .demo-bg, #nav.demo-bg {
    min-height:1400px;   
    background:
      radial-gradient(60% 80% at 18% 2%, color-mix(in srgb,var(--blue) 36%,transparent), transparent 60%),
      radial-gradient(50% 70% at 92% 6%, color-mix(in srgb,var(--orange) 16%,transparent), transparent 55%);
  }
#nav.mode-light .demo-bg {
    background:
      radial-gradient(60% 80% at 18% 2%, color-mix(in srgb,var(--blue) 36%,transparent), transparent 60%),
      radial-gradient(50% 70% at 92% 6%, color-mix(in srgb,var(--orange-light) 32%,transparent), transparent 55%);
  }
#nav .demo-bg .filler, #nav.demo-bg .filler { padding:120px var(--pad-inline) 0; color:var(--muted); font-family:var(--font-mono); font-size:var(--t-label); letter-spacing:.04em; }
#nav .nav, #nav.nav {
    position:sticky; top:0; z-index:50;
    display:flex; align-items:center; justify-content:space-between; gap:18px;
    padding-block:14px;
    padding-inline:max(var(--g-edge), calc((100% - var(--g-maxw)) / 2));
    border-bottom:1px solid var(--glass-border-dark);
    backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  }
#nav.mode-dark .nav { background:var(--glass-fill-dark);  border-bottom-color:var(--glass-border-dark); }
#nav.mode-light .nav { background:var(--glass-fill-light); border-bottom-color:var(--glass-border-light); }
#nav .brand, #nav.brand { display:inline-flex; align-items:center; text-decoration:none; flex:0 0 auto; }
#nav .inv-logo__text, #nav.inv-logo__text { fill:var(--logo-text); }
#nav .inv-logo__bracket, #nav.inv-logo__bracket { fill:var(--logo-bracket); }
#nav .logo-full, #nav.logo-full { height:39px; width:auto; display:block; transition:max-width .28s ease, opacity .2s ease; max-width:246px; }
#nav .logo-mark, #nav.logo-mark { height:39px; width:auto; display:none; }
#nav .logo-mark .inv-logo__bracket, #nav.logo-mark .inv-logo__bracket { fill:var(--logo-bracket); }
#nav .nav.condensed, #nav.nav.condensed { padding-top:9px; padding-bottom:9px; }
#nav .nav.condensed .logo-full, #nav.nav.condensed .logo-full { max-width:0; opacity:0; overflow:hidden; }
#nav .nav.condensed .logo-mark, #nav.nav.condensed .logo-mark { display:block; }
#nav .nav.condensed:hover, #nav.nav.condensed:hover { padding-top:14px; padding-bottom:14px; }
#nav .nav.condensed:hover .logo-full, #nav.nav.condensed:hover .logo-full { max-width:200px; opacity:1; }
#nav .nav.condensed:hover .logo-mark, #nav.nav.condensed:hover .logo-mark { display:none; }
#nav .nav, #nav.nav { transition:padding .26s ease; }
#nav .links, #nav.links { display:flex; align-items:center; gap:6px; margin:0 auto; }
#nav .links a, #nav.links a {
    font-family:var(--font-mono); font-size:var(--t-label); letter-spacing:.03em;
    color:var(--muted); text-decoration:none; padding:8px 12px; border-radius:8px;
    transition:color .15s, background-color .15s;
  }
#nav .links a:hover, #nav.links a:hover { color:inherit; background:var(--surface); }
#nav .actions, #nav.actions { display:flex; align-items:center; gap:10px; flex:0 0 auto; }
#nav .toggle, #nav.toggle {
    font-family:var(--font-mono); font-size:.72rem; color:var(--muted);
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    padding:8px 11px; cursor:pointer; transition:color .15s, border-color .15s;
  }
#nav .toggle:hover, #nav.toggle:hover { color:inherit; border-color:var(--muted); }
#nav .nav .btn-cta, #nav.nav .btn-cta { font-size:.9rem; padding:.6rem 1.2rem; }
#nav .nav-toggle, #nav.nav-toggle { position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
#nav .burger, #nav.burger { display:none; flex-direction:column; gap:4px; width:42px; height:38px; align-items:center; justify-content:center; background:var(--surface); border:1px solid var(--line); border-radius:10px; cursor:pointer; padding:0; }
#nav .burger span, #nav.burger span { width:18px; height:2px; background:currentColor; transition:transform .2s, opacity .2s; }
#nav .nav-toggle:checked ~ .actions .burger span:nth-child(1), #nav.nav-toggle:checked ~ .actions .burger span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
#nav .nav-toggle:checked ~ .actions .burger span:nth-child(2), #nav.nav-toggle:checked ~ .actions .burger span:nth-child(2) { opacity:0; }
#nav .nav-toggle:checked ~ .actions .burger span:nth-child(3), #nav.nav-toggle:checked ~ .actions .burger span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }
#nav .nav-toggle:focus-visible ~ .actions .burger, #nav.nav-toggle:focus-visible ~ .actions .burger { outline:2px solid var(--blue); outline-offset:2px; }
#nav .menu, #nav.menu { display:none; }
@media (max-width:1199px){
#nav .links, #nav.links { gap:2px; }
#nav .links a, #nav.links a { padding:8px 9px; }
#nav .brand .wm, #nav.brand .wm { font-size:1rem; }
}
@media (max-width:767px){
#nav .nav, #nav.nav { padding-block:12px; }
#nav .links, #nav.links { display:none; }
#nav .actions .toggle, #nav.actions .toggle, #nav .actions .btn-cta, #nav.actions .btn-cta { display:none; }
#nav .burger, #nav.burger { display:flex; }
#nav .menu, #nav.menu {
      display:block; position:absolute; top:100%; left:0; right:0;
      padding:14px var(--pad-inline) 20px;
      border-bottom:1px solid var(--line);
      backdrop-filter:var(--glass-blur-strong); -webkit-backdrop-filter:var(--glass-blur-strong);
      transform:translateY(-8px); opacity:0; pointer-events:none;
      transition:transform .22s, opacity .22s;
    }
#nav.mode-dark .menu { background:color-mix(in srgb, var(--ink-950) 88%, transparent); }
#nav.mode-light .menu { background:color-mix(in srgb, #fff 90%, transparent); }
#nav .nav-toggle:checked ~ .menu, #nav.nav-toggle:checked ~ .menu { transform:translateY(0); opacity:1; pointer-events:auto; }
#nav .menu a, #nav.menu a {
      display:block; font-family:var(--font-mono); font-size:.92rem; letter-spacing:.02em;
      color:inherit; text-decoration:none; padding:13px 4px; border-bottom:1px solid var(--line);
    }
#nav .menu .btn-cta, #nav.menu .btn-cta { display:block; text-align:center; margin-top:16px; padding:.8rem; }
#nav .menu .toggle, #nav.menu .toggle { width:100%; margin-top:10px; text-align:center; }
}
@media (prefers-reduced-motion:reduce){
#nav .menu, #nav.menu, #nav .btn-cta, #nav.btn-cta, #nav .toggle, #nav.toggle, #nav .burger span, #nav.burger span { transition:none; }
}

/* ===== hero (hero/hero-7.html) ===== */
#hero .hero7, #hero.hero7 {
    position:relative; min-height:88vh;
    display:flex; flex-direction:column; justify-content:center;
    padding:clamp(90px,12vh,150px) 0 0;      
    gap:clamp(40px,7vh,80px);                
    overflow:hidden;
  }
#hero .h7-grid, #hero.h7-grid { margin-top:auto; }
#hero .hero7.is-fitted, #hero.hero7.is-fitted { justify-content:flex-start; padding-top:clamp(76px,10vh,120px); }
#hero .h7-grid, #hero.h7-grid { position:relative; z-index:1; }
#hero .h7-copy, #hero.h7-copy { position:relative; }
#hero .eyebrow, #hero.eyebrow {
    font-family:var(--font-mono); font-weight:500; font-size:var(--t-label);
    letter-spacing:.14em; text-transform:uppercase; color:var(--eyebrow);
    margin:0 0 var(--space-5); display:block;
  }
#hero :is(h1:not(.as-h2),h2.as-h1) {
    font-family:var(--font-display); font-weight:var(--w-black);
    font-size:calc(clamp(2.9rem, 8vw, 6.6rem) * var(--hero-fit, 1));
    line-height:var(--leading-tight);
    letter-spacing:var(--tracking-display); text-transform:uppercase;
    margin:0; text-wrap:balance;
  }
#hero :is(h1:not(.as-h2),h2.as-h1) .emph { display:block; margin-top:.05em; }
#hero .subhead, #hero.subhead {
    font-size:var(--t-body-lg); line-height:var(--leading-body); color:var(--muted);
    max-width:58ch; margin:var(--space-6) 0 0;
  }
#hero .ctas, #hero.ctas { display:flex; flex-wrap:wrap; gap:14px; margin-top:var(--space-7); }
#hero .btn, #hero.btn { font-size:1rem; padding:.85rem 1.7rem; }
#hero .ribbon, #hero.ribbon {
    position:relative; z-index:1;
    margin:auto var(--pad-inline) 0;         
    border:1px solid var(--line); border-bottom:none;
    border-radius:var(--radius-lg) var(--radius-lg) 0 0;
    background:var(--surface);
    padding:clamp(18px,2.6vw,30px) clamp(20px,3vw,44px) clamp(24px,3vw,36px);
    display:flex; align-items:center; gap:clamp(20px,4vw,56px);
  }
#hero .rb-label, #hero.rb-label {
    font-family:var(--font-mono); font-size:var(--t-label); letter-spacing:.04em;
    color:var(--eyebrow); white-space:nowrap;
  }
#hero .rb-label b, #hero.rb-label b { color:var(--blue-text); font-weight:500; }
#hero .stats, #hero.stats { display:flex; flex:1; flex-wrap:wrap; justify-content:space-between; gap:18px clamp(18px,3vw,44px); }
#hero .stat, #hero.stat { padding-left:clamp(18px,3vw,44px); border-left:1px solid var(--line); }
#hero .stat:first-child, #hero.stat:first-child { padding-left:0; border-left:none; }
#hero .stat .n, #hero.stat .n { font-family:var(--font-display); font-weight:var(--w-bold); font-size:clamp(1.5rem,3vw,2.2rem); line-height:1; letter-spacing:-.01em; }
#hero .stat .l, #hero.stat .l { font-family:var(--font-mono); font-size:var(--t-caption); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-top:6px; }
#hero .anim, #hero.anim { opacity:0; transform:translateY(14px); animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards; }
#hero .d1, #hero.d1 {animation-delay:.05s}
#hero .d2, #hero.d2 {animation-delay:.14s}
#hero .d3, #hero.d3 {animation-delay:.23s}
#hero .d4, #hero.d4 {animation-delay:.32s}
#hero .d5, #hero.d5 {animation-delay:.42s}
@keyframes rise { to { opacity:1; transform:none; } }
#hero .h7-form, #hero.h7-form { position:relative; align-self:center; }
#hero .lead-card, #hero.lead-card {
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
    padding:clamp(20px,2.4vw,30px); box-shadow:0 24px 60px -30px rgba(0,0,0,.55);
  }
#hero .lead-card h3, #hero.lead-card h3 { font-family:var(--font-display); font-weight:var(--w-black); text-transform:uppercase; letter-spacing:var(--tracking-caps); font-size:var(--t-h4); margin:0 0 6px; }
#hero .lead-card .lc-sub, #hero.lead-card .lc-sub { font-size:var(--t-body-sm); color:var(--muted); margin:0 0 var(--space-5); }
#hero .lead-form .lf-row, #hero.lead-form .lf-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
#hero .lead-form label, #hero.lead-form label { display:block; margin:0 0 12px; }
#hero .lead-form .lf-lab, #hero.lead-form .lf-lab { display:block; font-family:var(--font-mono); font-size:var(--t-micro); letter-spacing:.1em; text-transform:uppercase; color:var(--eyebrow); margin:0 0 6px; }
#hero .lead-form input, #hero.lead-form input, #hero .lead-form select, #hero.lead-form select, #hero .lead-form textarea, #hero.lead-form textarea {
    width:100%; font-family:var(--font-body); font-size:.95rem; color:inherit;
    background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:11px 12px;
  }
#hero.mode-light .lead-form input, #hero.mode-light .lead-form select, #hero.mode-light .lead-form textarea { background:var(--white); }
#hero .lead-form textarea, #hero.lead-form textarea { resize:vertical; min-height:84px; }
#hero .lead-form input:focus, #hero.lead-form input:focus, #hero .lead-form select:focus, #hero.lead-form select:focus { outline:2px solid var(--blue); outline-offset:0; }
#hero .lead-form button, #hero.lead-form button { width:100%; margin-top:4px; border:none; cursor:pointer; }
#hero .lead-form .lf-fine, #hero.lead-form .lf-fine { font-family:var(--font-mono); font-size:var(--t-micro); letter-spacing:.04em; color:var(--muted); margin:10px 0 0; }
#hero .lead-done, #hero.lead-done { display:none; text-align:center; padding:26px 6px; }
#hero .lead-done .ld-big, #hero.lead-done .ld-big { font-family:var(--font-display); font-weight:var(--w-black); text-transform:uppercase; font-size:var(--t-h4); margin:0 0 8px; }
#hero .lead-done p, #hero.lead-done p { color:var(--muted); margin:0; }
#hero .is-done .lead-form, #hero.is-done .lead-form { display:none; }
#hero .is-done .lead-done, #hero.is-done .lead-done { display:block; }
@media (min-width:768px) and (max-width:1199px){
#hero .h7-grid.g-cols > .h7-copy, #hero.h7-grid.g-cols > .h7-copy { grid-column:span 7; }
#hero .h7-grid.g-cols > .h7-form, #hero.h7-grid.g-cols > .h7-form { grid-column:span 5; }
#hero .rb-label, #hero.rb-label { display:none; }
}
@media (max-width:767px){
#hero .hero7, #hero.hero7 { justify-content:flex-start; padding-top:clamp(86px,16vh,130px); }
#hero .h7-form, #hero.h7-form { margin-top:26px; }
#hero .subhead, #hero.subhead { font-size:var(--t-body); }
#hero .ctas, #hero.ctas { flex-direction:column; align-items:stretch; }
#hero .btn, #hero.btn { text-align:center; }
#hero .ribbon, #hero.ribbon { margin:auto 16px 0; padding:18px 18px 22px; }
#hero .rb-label, #hero.rb-label { display:none; }
#hero .stats, #hero.stats { justify-content:flex-start; }
#hero .stat, #hero.stat { flex:0 0 calc(50% - 22px); padding-left:0; border-left:none; }
}
@media (prefers-reduced-motion:reduce){
#hero .anim, #hero.anim { animation:none; opacity:1; transform:none; }
}

/* ===== seam-1 (seam/peek-seam-49.html) ===== */
#seam-1 .pair, #seam-1.pair { width:100%; }
@media (max-width:1024px){
#seam-1 .pair, #seam-1.pair { font-size:.98rem; }
}
@media (max-width:767px){
#seam-1 .pair, #seam-1.pair { font-size:.9rem; }
}

/* ===== the-day (timeline/timeline-2.html) ===== */
#the-day .tl2-sec, #the-day.tl2-sec { position:relative; padding:var(--pad-section) 0; }
#the-day .tl2-inner, #the-day.tl2-inner { position:relative; z-index:1; row-gap:0; align-items:start; }
#the-day .tl2-side, #the-day.tl2-side { grid-column:1 / span 5; }
#the-day .tl2-eyebrow, #the-day.tl2-eyebrow {
    font-family:var(--font-mono); font-weight:500; font-size:var(--t-label);
    letter-spacing:.14em; text-transform:uppercase; color:var(--eyebrow); margin:0 0 var(--space-4);
  }
#the-day .tl2-eyebrow b, #the-day.tl2-eyebrow b { color:var(--blue); font-weight:500; }
#the-day .tl2-h2, #the-day.tl2-h2 {
    font-family:var(--font-display); font-weight:var(--w-black); font-size:var(--t-h2);
    line-height:1.08; letter-spacing:var(--tracking-caps); margin:0; max-width:18ch;
  }
#the-day .tl2-lede, #the-day.tl2-lede { font-size:var(--t-body-lg); line-height:var(--leading-body); color:var(--muted); max-width:42ch; margin:var(--space-5) 0 0; }
#the-day .tl2-art, #the-day.tl2-art { margin:clamp(28px,4vw,48px) 0 0; }
#the-day .tl2-art img, #the-day.tl2-art img { display:block; width:auto; height:clamp(180px,26vw,340px); max-width:100%; }
#the-day .tl2-art video, #the-day.tl2-art video { display:block; width:100%; max-width:560px; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:var(--radius-lg,18px); box-shadow:0 22px 44px -22px rgba(14,24,34,.38), 0 0 0 1px rgba(14,24,34,.07); }
#the-day .tl2-rail, #the-day.tl2-rail { grid-column:7 / span 6; position:relative; padding-left:clamp(28px,3vw,44px); }
#the-day .tl2-foot, #the-day.tl2-foot { grid-column:7 / span 6; margin:clamp(28px,4vw,56px) 0 0; padding-left:clamp(28px,3vw,44px); font-family:var(--font-display); font-weight:800; font-size:var(--t-h3); line-height:1.2; letter-spacing:-.01em; color:var(--page-fg); max-width:28ch; }
#the-day .tl2-foot .emph, #the-day.tl2-foot .emph { font-weight:400; }
#the-day .tl2-rail::before, #the-day.tl2-rail::before, #the-day .tl2-rail::after, #the-day.tl2-rail::after { z-index:0; }
#the-day .tl2-rail::before, #the-day.tl2-rail::before {
    content:""; position:absolute; left:0; top:14px; bottom:14px; width:2px;
    background:color-mix(in srgb, var(--blue) 18%, transparent); border-radius:2px;
  }
#the-day .tl2-rail::after, #the-day.tl2-rail::after {
    content:""; position:absolute; left:0; top:14px; bottom:14px; width:2px; border-radius:2px;
    background:linear-gradient(var(--blue), var(--blue-light));
    transform-origin:top; transform:scaleY(1);
  }
#the-day .tl2-step, #the-day.tl2-step { position:relative; z-index:1; padding:clamp(18px,2.4vw,28px) 0 clamp(64px,22vh,260px); }
#the-day .tl2-step:last-child, #the-day.tl2-step:last-child { padding-bottom:clamp(18px,2.4vw,28px); }
#the-day .tl2-node, #the-day.tl2-node {
    position:absolute; left:calc(-1 * clamp(28px,3vw,44px)); top:clamp(18px,2.4vw,28px);
    transform:translateX(-50%);
    z-index:1;   
    display:inline-flex; align-items:center; justify-content:center;
    min-width:44px; height:44px; padding:0 12px; border-radius:12px; white-space:nowrap;
    font-family:var(--font-mono); font-weight:500; font-size:var(--t-body-sm);
    color:var(--blue-text); background:var(--surface);
    border:1px solid color-mix(in srgb, var(--blue) 40%, var(--line));
    transition:background .3s, color .3s, border-color .3s, box-shadow .3s;
  }
#the-day .tl2-body, #the-day.tl2-body { padding-left:clamp(36px,3.4vw,52px); display:grid; grid-template-columns:1fr; gap:clamp(18px,2.4vw,30px); }
#the-day .tl2-step-art, #the-day.tl2-step-art { margin:0; justify-self:start; width:min(100%, 520px); }
#the-day .tl2-step-art img, #the-day.tl2-step-art img { display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; border-radius:var(--radius-lg); border:1px solid var(--line); box-shadow:0 14px 34px -22px rgba(6,46,83,.35); }
#the-day .tl2-step-title, #the-day.tl2-step-title { font-family:var(--font-display); font-weight:var(--w-bold); font-size:var(--t-h3); letter-spacing:var(--tracking-caps); margin:0 0 var(--space-3); line-height:1.15; }
#the-day .tl2-step-desc, #the-day.tl2-step-desc { font-size:var(--t-body); line-height:var(--leading-body); color:var(--muted); margin:0; max-width:52ch; }
@media (max-width:1199px){
#the-day .tl2-side, #the-day.tl2-side, #the-day .tl2-rail, #the-day.tl2-rail, #the-day .tl2-foot, #the-day.tl2-foot { grid-column:1 / -1; }
#the-day .tl2-foot, #the-day.tl2-foot { padding-left:0; }
#the-day .tl2-rail, #the-day.tl2-rail { margin-top:clamp(36px,6vw,64px); }
#the-day .tl2-art img, #the-day.tl2-art img { height:clamp(160px,24vw,260px); }
}
@media (max-width:767px){
#the-day .tl2-rail, #the-day.tl2-rail { padding-left:22px; }
#the-day .tl2-node, #the-day.tl2-node { position:static; transform:none; margin:0 0 10px 26px; width:fit-content; height:36px; min-width:36px; font-size:var(--t-caption); border-radius:10px; }
#the-day .tl2-body, #the-day.tl2-body { padding-left:26px; }
#the-day .tl2-step, #the-day.tl2-step { padding-bottom:clamp(32px,8vh,64px); }
}
@media (min-width:1200px){
#the-day .tl2-side, #the-day.tl2-side { position:sticky; top:clamp(88px,14vh,140px); }
}
@media (prefers-reduced-motion: no-preference){
@keyframes tl2Rise { from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }
#the-day .tl2-step, #the-day.tl2-step {
      animation: tl2Rise .6s cubic-bezier(.2,.7,.2,1) both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
@keyframes tl2Node {
      0%, 100% { background:var(--surface); color:var(--blue-text); box-shadow:none; }
      35%, 65% { background:var(--blue); color:#fff; border-color:var(--blue); box-shadow:0 0 0 6px color-mix(in srgb, var(--blue) 18%, transparent); }
    }
#the-day .tl2-node, #the-day.tl2-node {
      animation: tl2Node linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
@keyframes tl2Fill { from{ transform:scaleY(0); } to{ transform:scaleY(1); } }
#the-day .tl2-rail::after, #the-day.tl2-rail::after {
      animation: tl2Fill linear both;
      animation-timeline: view();
      animation-range: entry 25% exit 75%;
    }
}

/* ===== capture-1 (seam/peek-seam-28.html) ===== */
#capture-1 .pair, #capture-1.pair { width:100%; }
@media (max-width:1024px){
#capture-1 .pair, #capture-1.pair { font-size:.98rem; }
}
@media (max-width:767px){
#capture-1 .pair, #capture-1.pair { font-size:.9rem; }
}

/* ===== customer (content/prose-2.html) ===== */
#customer .pe2-sec, #customer.pe2-sec { position:relative; padding:var(--pad-section) 0; overflow:hidden; }
#customer .pe2-inner, #customer.pe2-inner { position:relative; z-index:1; }
#customer .pe2-inner > *, #customer.pe2-inner > * { grid-column: 1 / -1; }
@media (min-width:1200px){
#customer .pe2-inner > *, #customer.pe2-inner > * { grid-column: 2 / span 10; }
}
#customer .pe2-card, #customer.pe2-card { position:relative; border-radius:calc(var(--radius) * 1.5); border:none;
    padding:clamp(28px,4.5vw,64px) clamp(24px,4.5vw,72px);
    background:var(--ink-800);
    box-shadow: 0 1px 2px rgba(5,10,16,.35), 0 12px 32px rgba(5,10,16,.35), 0 32px 80px rgba(5,10,16,.30); }
#customer.mode-light .pe2-card, #customer .mode-light .pe2-card, #customer.mode-light .pe2-card { background:var(--white);
    box-shadow: 0 1px 2px rgba(10,18,27,.06), 0 10px 28px rgba(10,18,27,.08), 0 30px 70px rgba(10,18,27,.10); }
#customer .pe2-kicker, #customer.pe2-kicker { position:absolute; top:clamp(20px,3vw,32px); right:clamp(20px,3.4vw,40px);
    font-family:var(--font-mono); font-weight:500; font-size:var(--t-label); letter-spacing:.12em;
    text-transform:uppercase; color:var(--muted); }
#customer .pe2-eyebrow, #customer.pe2-eyebrow { font-family:var(--font-mono); font-weight:500; font-size:var(--t-label);
    letter-spacing:.14em; text-transform:uppercase; color:var(--eyebrow); margin:0 0 var(--space-5); }
#customer .pe2-eyebrow b, #customer.pe2-eyebrow b { color:var(--blue-text); font-weight:500; }
#customer .pe2-h2, #customer.pe2-h2 { font-family:var(--font-display); font-weight:var(--w-black); font-size:var(--t-h2);
    line-height:var(--leading-snug); letter-spacing:var(--tracking-caps); margin:0 0 var(--space-6); text-wrap:balance; }
#customer .pe2-lede, #customer.pe2-lede { font-size:clamp(1.15rem,1.7vw,1.4rem); line-height:var(--leading-snug); margin:0 0 var(--space-6); max-width:72ch; }
#customer .pe2-body, #customer.pe2-body { font-size:var(--t-body-lg); line-height:var(--leading-body); color:var(--neutral-light); }
#customer.mode-light .pe2-body, #customer .mode-light .pe2-body, #customer.mode-light .pe2-body { color:var(--neutral-dark); }
#customer .pe2-body p, #customer.pe2-body p { margin:0 0 var(--space-5); max-width:76ch; }
#customer .pe2-body p:last-child, #customer.pe2-body p:last-child { margin-bottom:0; }
#customer .pe2-body strong, #customer.pe2-body strong { color:inherit; font-weight:var(--w-semibold); }
#customer .pe2-body a, #customer.pe2-body a, #customer a.link { color:var(--link); text-decoration:underline; text-underline-offset:.16em;
    text-decoration-thickness:1.5px; text-decoration-color:color-mix(in srgb, var(--link) 45%, transparent); }
#customer .pe2-body a:hover, #customer.pe2-body a:hover, #customer a.link:hover { color:var(--link-hover); text-decoration-color:currentColor; }
#customer .pe2-body blockquote, #customer.pe2-body blockquote { margin:var(--space-6) 0; padding-left:clamp(18px,2.4vw,26px);
    border-left:3px solid var(--blue-text); font-family:var(--font-emph); font-style:italic;
    font-size:clamp(1.2rem,1.9vw,1.55rem); line-height:var(--leading-snug); color:inherit; max-width:60ch; }
#customer .pe2-fig, #customer.pe2-fig { float:right; width:clamp(150px,26%,240px); margin:0 0 var(--space-5) var(--space-6);
    border-radius:var(--radius-lg); overflow:hidden; background:#fff;
    box-shadow:0 8px 24px rgba(5,10,16,.32); }
#customer .pe2-fig img, #customer.pe2-fig img { display:block; width:100%; height:auto; }
#customer .pe2-fig--wide, #customer.pe2-fig--wide { float:none; width:100%; max-width:none; margin:var(--space-7) 0 0; border-radius:var(--radius-lg); overflow:hidden;
    box-shadow:none; border:1px solid color-mix(in srgb,var(--blue) 28%,var(--line)); order:99; }
#customer .pe2-card:has(.pe2-fig--wide), #customer.pe2-card:has(.pe2-fig--wide) { display:flex; flex-direction:column; }
@media (max-width:767px){
#customer .pe2-fig, #customer.pe2-fig { float:none; width:min(62%,220px); margin:0 auto var(--space-5); }
}
#customer .pe2-foot, #customer.pe2-foot { margin-top:var(--space-6); padding-top:var(--space-5); border-top:1px solid var(--line);
    font-family:var(--font-mono); font-weight:500; font-size:var(--t-label); letter-spacing:.08em;
    text-transform:uppercase; color:var(--muted); display:flex; gap:var(--space-5); flex-wrap:wrap; }
@media (max-width:767px){
#customer .pe2-lede, #customer.pe2-lede { font-size:1.1rem; }
#customer .pe2-body, #customer.pe2-body { font-size:var(--t-body); }
#customer .pe2-kicker, #customer.pe2-kicker { position:static; display:block; margin:0 0 var(--space-4); }
}
@media (prefers-reduced-motion:no-preference){
@keyframes pe2Rise { from{opacity:0; transform:translateY(20px)} to{opacity:1; transform:none} }
#customer .pe2-card, #customer.pe2-card { animation: pe2Rise .6s both; animation-timeline: view(); animation-range: entry 0% cover 24%; }
}
@media (prefers-reduced-motion:reduce){
#customer * { animation:none !important; transition:none !important; }
}

/* ===== seam-3 (seam/peek-seam-30.html) ===== */
#seam-3 .pair, #seam-3.pair { width:100%; }
@media (max-width:1024px){
#seam-3 .pair, #seam-3.pair { font-size:.98rem; }
}
@media (max-width:767px){
#seam-3 .pair, #seam-3.pair { font-size:.9rem; }
}
@media (prefers-reduced-motion: no-preference){
@keyframes seamConfettiPop { from{ opacity:0; } 60%{ opacity:1; } to{ opacity:1; } }
@keyframes seamSrRise      { from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
#seam-3 .confetti-band .chip, #seam-3.confetti-band .chip {
      animation: seamConfettiPop .5s cubic-bezier(.2,.9,.3,1.4) both;
      animation-timeline: view(); animation-range: entry 0% cover 34%;
    }
#seam-3 .confetti-band .chip:nth-of-type(2), #seam-3.confetti-band .chip:nth-of-type(2) { animation-delay:.07s; }
#seam-3 .confetti-band .chip:nth-of-type(3), #seam-3.confetti-band .chip:nth-of-type(3) { animation-delay:.14s; }
#seam-3 .confetti-band .chip:nth-of-type(4), #seam-3.confetti-band .chip:nth-of-type(4) { animation-delay:.21s; }
#seam-3 .confetti-band .chip:nth-of-type(5), #seam-3.confetti-band .chip:nth-of-type(5) { animation-delay:.28s; }
#seam-3 .confetti-band [data-sr], #seam-3.confetti-band [data-sr] { animation: seamSrRise .6s ease-out both .1s; animation-timeline: view(); animation-range: entry 0% cover 34%; }
}

/* ===== what-changes (cards/feature-rail-2.html) ===== */
#what-changes .fr, #what-changes.fr { padding: var(--pad-section) 0; overflow:hidden; }
#what-changes .fr-head, #what-changes.fr-head { align-items:end; margin-bottom: var(--space-7, 40px); }
#what-changes .fr-copy, #what-changes.fr-copy { grid-column: span 8; }
#what-changes .fr-eyebrow, #what-changes.fr-eyebrow { font-family:var(--font-mono); font-size:12px; letter-spacing:.14em;
    text-transform:uppercase; color:var(--eyebrow, var(--blue-text)); margin:0 0 12px; }
#what-changes .fr-h2, #what-changes.fr-h2 { font-size:var(--t-h2); line-height:1.08; margin:0; font-weight:var(--w-black); }
#what-changes .fr-sub, #what-changes.fr-sub { max-width:56ch; margin:14px 0 0; color:var(--muted); line-height:1.6; }
#what-changes .fr-nav, #what-changes.fr-nav { grid-column: span 4; justify-self:end; display:flex; gap:10px; }
#what-changes .fr-arrow, #what-changes.fr-arrow { width:44px; height:44px; border-radius:50%; cursor:pointer;
    border:1px solid color-mix(in srgb, currentColor 35%, transparent);
    background:transparent; color:inherit; font-size:18px; line-height:1;
    display:grid; place-items:center;
    transition: border-color .2s, background .2s, opacity .2s, transform .15s; }
#what-changes .fr-arrow:hover, #what-changes.fr-arrow:hover { border-color:currentColor; transform:translateY(-2px); }
#what-changes .fr-arrow[disabled], #what-changes.fr-arrow[disabled] { opacity:.35; pointer-events:none; }
#what-changes .fr-rail, #what-changes.fr-rail { display:grid; grid-auto-flow:column;
    grid-auto-columns: min(504px, 84vw);   
    gap: clamp(20px, 2.4vw, 36px);
    overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
    padding-inline: max(var(--g-edge), calc((100% - var(--g-maxw)) / 2));
    scroll-padding-inline: max(var(--g-edge), calc((100% - var(--g-maxw)) / 2));
    padding-block: 8px 28px;                 
    scrollbar-width:none; }
#what-changes .fr-rail::-webkit-scrollbar, #what-changes.fr-rail::-webkit-scrollbar { display:none; }
#what-changes .fr-card, #what-changes.fr-card { scroll-snap-align:start; display:flex; flex-direction:column;
    position:relative; overflow:hidden; text-decoration:none; color:inherit;
    background: var(--surface); border-radius: var(--radius-lg, 14px);
    border:1px solid transparent;              
    box-shadow: 0 1px 2px rgba(10,18,27,.08), 0 18px 36px -18px rgba(10,18,27,.22);
    transition: box-shadow .3s, transform .3s cubic-bezier(.33,1,.68,1); }
#what-changes.mode-light .fr-card, #what-changes .mode-light .fr-card, #what-changes.mode-light .fr-card, #what-changes.mode-light .fr-body, #what-changes .mode-light .fr-body, #what-changes.mode-light .fr-body { background: var(--white, #fff); }
#what-changes.mode-dark .fr-card, #what-changes .mode-dark .fr-card, #what-changes.mode-dark .fr-card { border-color: var(--line); }
#what-changes .fr-card:hover, #what-changes.fr-card:hover { transform: translateY(-4px);
    box-shadow: 0 2px 4px rgba(10,18,27,.08), 0 30px 45px -24px rgba(50,50,93,.30); }
#what-changes .fr-stage, #what-changes.fr-stage { position:relative; padding: 26px 26px 0; height: 330px;
    margin: 6px 6px 0; border-radius: calc(var(--radius-lg, 14px) - 5px);
    background: var(--surface-2); overflow:hidden; flex:none; }
#what-changes .fr-glow, #what-changes.fr-glow { position:absolute; inset:0; opacity:0; transition:opacity .45s ease;
    background:
      radial-gradient(95% 85% at 12% 8%,  color-mix(in srgb, var(--blue-light, #41c9ff) 42%, transparent), transparent 72%),
      radial-gradient(85% 80% at 88% 16%, color-mix(in srgb, var(--green-light, #61dfa7) 38%, transparent), transparent 74%),
      radial-gradient(90% 70% at 50% 100%, color-mix(in srgb, var(--blue-electric, #0993ff) 16%, transparent), transparent 70%),
      linear-gradient(150deg, color-mix(in srgb, var(--blue-lightest, #e1f4ff) 80%, #fff), color-mix(in srgb, var(--green-lightest, #e7faef) 80%, #fff)); }
#what-changes .fr-card:hover .fr-glow, #what-changes.fr-card:hover .fr-glow { opacity:1; }
#what-changes .fr-shot, #what-changes.fr-shot { position:relative; z-index:1; display:block; width:100%; height:100%;
    object-fit:cover; object-position:top center;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 0 0 1px rgba(10,18,27,.06), 0 12px 28px -12px rgba(10,18,27,.35);
    background:var(--surface); }
#what-changes .fr-tag, #what-changes.fr-tag { position:absolute; z-index:2; top:14px; left:14px;
    font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
    padding:4px 10px; border-radius:99px; color:var(--white);
    background: color-mix(in srgb, var(--ink-900) 72%, transparent); }
#what-changes .fr-stage--empty, #what-changes.fr-stage--empty { display:grid; place-items:center; padding:24px; }
#what-changes .fr-mark, #what-changes.fr-mark { font-family:var(--font-mono); font-size:clamp(2rem,3vw,2.75rem); opacity:.28; margin:0; }
#what-changes .fr-body, #what-changes.fr-body { position:relative; z-index:2; flex:1; display:flex; flex-direction:column;
    padding: 22px 24px 46px; background: var(--surface);   
    transition: transform .3s cubic-bezier(.33,1,.68,1); }
#what-changes .fr-kicker, #what-changes.fr-kicker { font-family:var(--font-mono); font-size:11px; letter-spacing:.12em;
    text-transform:uppercase; color:var(--eyebrow, var(--blue-text)); margin:0 0 8px; }
#what-changes .fr-title, #what-changes.fr-title { font-size: 1.15rem; line-height:1.25; margin:0; font-weight:var(--w-bold); }
#what-changes .fr-blurb, #what-changes.fr-blurb { margin:10px 0 0; font-size:.92rem; line-height:1.55; color:var(--muted); }
#what-changes .fr-cta, #what-changes.fr-cta { position:absolute; left:24px; right:24px; bottom:16px; opacity:0;
    font-weight:var(--w-semibold); font-size:.9rem; color:var(--link, var(--orange));
    transition: opacity .25s ease .08s, transform .3s cubic-bezier(.33,1,.68,1); transform:translateY(8px); }
@media (hover:hover) {
#what-changes .fr-card:hover .fr-body, #what-changes.fr-card:hover .fr-body { transform: translateY(-26px); }
#what-changes .fr-card:hover .fr-cta, #what-changes.fr-card:hover .fr-cta { opacity:1; transform:translateY(0); }
}
@media (hover:none) {
#what-changes .fr-cta, #what-changes.fr-cta { position:static; opacity:1; transform:none; margin-top:12px; }
}
#what-changes .media--off .fr-stage, #what-changes.media--off .fr-stage { display:none; }
@media (max-width:1199px){
#what-changes .fr-rail, #what-changes.fr-rail { grid-auto-columns: clamp(320px, 46vw, 440px); }
}
@media (max-width:767px){
#what-changes .fr-rail, #what-changes.fr-rail { grid-auto-columns: 82vw; }
#what-changes .fr-nav, #what-changes.fr-nav { display:none; }
#what-changes .fr-copy, #what-changes.fr-copy { grid-column: span 12; }
}
@media (prefers-reduced-motion:reduce){
#what-changes .fr-rail, #what-changes.fr-rail { scroll-behavior:auto; }
#what-changes .fr-card, #what-changes.fr-card, #what-changes .fr-body, #what-changes.fr-body, #what-changes .fr-cta, #what-changes.fr-cta, #what-changes .fr-glow, #what-changes.fr-glow, #what-changes .fr-arrow, #what-changes.fr-arrow { transition:none; }
}

/* ===== seam-2 (seam/peek-seam-58.html) ===== */
#seam-2 .pair, #seam-2.pair { width:100%; }
@media (max-width:1024px){
#seam-2 .pair, #seam-2.pair { font-size:.98rem; }
}
@media (max-width:767px){
#seam-2 .pair, #seam-2.pair { font-size:.9rem; }
}

/* ===== not-your-job (content/rescue-1.html) ===== */
#not-your-job .rs-sec, #not-your-job.rs-sec { position:relative; padding:var(--pad-section) 0; overflow:hidden; }
#not-your-job .rs-inner, #not-your-job.rs-inner { position:relative; z-index:1; }
#not-your-job .rs-inner > *, #not-your-job.rs-inner > * { grid-column: 1 / -1; }
@media (min-width:1200px){
#not-your-job .rs-inner > *, #not-your-job.rs-inner > * { grid-column: 2 / span 10; }
}
#not-your-job .rs-head, #not-your-job.rs-head { margin:0 0 clamp(40px,6vw,72px); }
#not-your-job .rs-eyebrow, #not-your-job.rs-eyebrow { font-family:var(--font-mono); font-weight:500; font-size:var(--t-label); letter-spacing:.14em;
    text-transform:uppercase; color:var(--eyebrow); margin:0 0 var(--space-5); display:inline-flex; align-items:center; gap:8px; }
#not-your-job .rs-h2, #not-your-job.rs-h2 { font-family:var(--font-display); font-weight:var(--w-black); font-size:var(--t-h1);
    line-height:var(--leading-snug); letter-spacing:var(--tracking-caps); text-transform:uppercase; margin:0; text-wrap:balance; }
#not-your-job .rs-list, #not-your-job.rs-list { list-style:none; margin:0; padding:0; }
#not-your-job .rs-row, #not-your-job.rs-row { display:grid; grid-template-columns:auto 1fr; gap:clamp(18px,3vw,40px); align-items:start;
    padding:clamp(20px,3vw,32px) 0; border-top:1px solid var(--line); transition:padding-left .25s ease; }
#not-your-job .rs-row:last-child, #not-your-job.rs-row:last-child { border-bottom:1px solid var(--line); }
#not-your-job .rs-row:hover, #not-your-job.rs-row:hover { padding-left:10px; }
#not-your-job .rs-num, #not-your-job.rs-num { font-family:var(--font-mono); font-weight:500; font-size:clamp(1.1rem,2vw,1.5rem);
    color:var(--blue); letter-spacing:.04em; padding-top:.15em; min-width:2.4ch; }
#not-your-job .rs-title, #not-your-job.rs-title { font-family:var(--font-display); font-weight:var(--w-bold); font-size:var(--t-h3);
    line-height:var(--leading-snug); letter-spacing:var(--tracking-caps); margin:0 0 var(--space-3); }
#not-your-job .rs-desc, #not-your-job.rs-desc { font-size:var(--t-body-lg); line-height:var(--leading-body); color:var(--muted); margin:0; max-width:62ch; }
#not-your-job .rs-foot, #not-your-job.rs-foot { font-family:var(--font-mono); font-size:var(--t-body-sm); letter-spacing:.02em; color:var(--muted);
    margin:clamp(32px,5vw,56px) 0 0; }
#not-your-job .rs-foot .rs-foot-b, #not-your-job.rs-foot .rs-foot-b { color:var(--blue); }
@media (max-width:1024px){
#not-your-job .rs-h2, #not-your-job.rs-h2 { font-size:var(--t-h2); }
}
@media (max-width:767px){
#not-your-job .rs-row, #not-your-job.rs-row { grid-template-columns:1fr; gap:var(--space-2); }
#not-your-job .rs-num, #not-your-job.rs-num { font-size:1rem; }
#not-your-job .rs-desc, #not-your-job.rs-desc { font-size:var(--t-body); }
}
#not-your-job .char-cut, #not-your-job.char-cut { position:absolute; z-index:1; right:clamp(8px,2vw,48px); bottom:0;
    height:clamp(280px,24vw,400px); width:auto; pointer-events:none; display:none; }
@media (min-width:1150px){
#not-your-job .char-cut, #not-your-job.char-cut { display:block; }
}

/* ===== seam-4 (seam/peek-seam-50.html) ===== */
#seam-4 .pair, #seam-4.pair { width:100%; }
@media (max-width:1024px){
#seam-4 .pair, #seam-4.pair { font-size:.98rem; }
}
@media (max-width:767px){
#seam-4 .pair, #seam-4.pair { font-size:.9rem; }
}

/* ===== buying (content/prose-stat-1.html) ===== */
#buying .pst-sec, #buying.pst-sec { position:relative; padding:var(--pad-section) 0; overflow:visible; }
#buying .pst-inner, #buying.pst-inner { position:relative; z-index:1; align-items:start; }
#buying .pst-rail, #buying.pst-rail { grid-column: 1 / -1; }
#buying .pst-main, #buying.pst-main { grid-column: 1 / -1; }
@media (min-width:900px){
#buying .pst-rail, #buying.pst-rail { grid-column: 1 / span 4; position:sticky; top:clamp(72px,10vh,120px); }
#buying .pst-main, #buying.pst-main { grid-column: 6 / span 7; }
}
#buying .pst-eyebrow, #buying.pst-eyebrow { font-family:var(--font-mono); font-weight:500; font-size:var(--t-label);
    letter-spacing:.14em; text-transform:uppercase; color:var(--eyebrow); margin:0 0 var(--space-6); }
#buying .pst-eyebrow b, #buying.pst-eyebrow b { color:var(--blue-text); font-weight:500; }
#buying .pst-stats, #buying.pst-stats { list-style:none; margin:0; padding:0; display:grid; gap:clamp(20px,3vw,32px); }
#buying .pst-stat, #buying.pst-stat { border-top:1px solid var(--line); padding-top:clamp(14px,2vw,20px); }
#buying .pst-n, #buying.pst-n { display:block; font-family:var(--font-display); font-weight:var(--w-black);
    font-size:clamp(2rem,3.6vw,3rem); line-height:1; letter-spacing:var(--tracking-display); color:inherit; }
#buying .pst-n b, #buying.pst-n b { color:var(--blue-text); font-weight:inherit; }
#buying .pst-l, #buying.pst-l { display:block; margin-top:var(--space-3); font-family:var(--font-mono); font-weight:500;
    font-size:var(--t-caption); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); max-width:26ch; }
#buying .pst-h2, #buying.pst-h2 { font-family:var(--font-display); font-weight:var(--w-black); font-size:var(--t-h2);
    line-height:var(--leading-snug); letter-spacing:var(--tracking-caps); margin:0 0 var(--space-6); text-wrap:balance; }
#buying .pst-lede, #buying.pst-lede { font-size:clamp(1.15rem,1.7vw,1.4rem); line-height:var(--leading-snug); margin:0 0 var(--space-6); max-width:70ch; }
#buying .pst-body, #buying.pst-body { font-size:var(--t-body-lg); line-height:var(--leading-body); color:var(--neutral-light); }
#buying.mode-light .pst-body, #buying .mode-light .pst-body, #buying.mode-light .pst-body { color:var(--neutral-dark); }
#buying .pst-body p, #buying.pst-body p { margin:0 0 var(--space-5); max-width:72ch; }
#buying .pst-body p:last-child, #buying.pst-body p:last-child { margin-bottom:0; }
#buying .pst-body strong, #buying.pst-body strong { color:inherit; font-weight:var(--w-semibold); }
#buying .pst-body a, #buying.pst-body a, #buying a.link { color:var(--link); text-decoration:underline; text-underline-offset:.16em;
    text-decoration-thickness:1.5px; text-decoration-color:color-mix(in srgb, var(--link) 45%, transparent); }
#buying .pst-body a:hover, #buying.pst-body a:hover, #buying a.link:hover { color:var(--link-hover); text-decoration-color:currentColor; }
#buying .pst-quote, #buying.pst-quote { margin:var(--space-6) 0; padding-left:clamp(18px,2.4vw,26px); border-left:3px solid var(--blue-text);
    font-family:var(--font-emph); font-style:italic; font-size:clamp(1.2rem,1.9vw,1.55rem);
    line-height:var(--leading-snug); color:inherit; max-width:60ch; }
@media (max-width:899px){
#buying .pst-stats, #buying.pst-stats { grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); margin-bottom:var(--space-7); }
}
@media (max-width:767px){
#buying .pst-lede, #buying.pst-lede { font-size:1.1rem; }
#buying .pst-body, #buying.pst-body { font-size:var(--t-body); }
}
@media (prefers-reduced-motion:no-preference){
@keyframes pstRise { from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none} }
#buying .pst-stat, #buying.pst-stat { animation: pstRise .55s both; animation-timeline: view(); animation-range: entry 0% cover 22%; }
#buying .pst-main, #buying.pst-main { animation: pstRise .6s both; animation-timeline: view(); animation-range: entry 0% cover 20%; }
}
@media (prefers-reduced-motion:reduce){
#buying * { animation:none !important; transition:none !important; }
}

/* ===== buying-cta (seam/peek-seam-109.html) ===== */
#buying-cta .sm-slice, #buying-cta.sm-slice { position:relative; padding: clamp(40px,6vh,72px) var(--pad-inline); }
#buying-cta .lab, #buying-cta.lab { font-family:var(--font-mono); font-size:var(--t-label); letter-spacing:.04em; color:var(--muted); }
#buying-cta .nbr-above, #buying-cta.nbr-above { background:var(--seam-above); color:var(--seam-above-fg); }
#buying-cta .nbr-below, #buying-cta.nbr-below { background:var(--seam-below); color:var(--seam-below-fg); }
#buying-cta .ce, #buying-cta.ce { text-align:center; max-width:760px; margin:0 auto; }
#buying-cta .ce .eyebrow, #buying-cta.ce .eyebrow { font-family:var(--font-mono); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; opacity:.75; margin:0 0 14px; }
#buying-cta .ce :is(h2:not(.as-h1),h1.as-h2), #buying-cta.ce :is(h2:not(.as-h1),h1.as-h2) { font-family:var(--font-display); font-weight:900; text-transform:uppercase; font-size:clamp(2.1rem,5.4vw,3.6rem); line-height:.98; letter-spacing:-.02em; margin:0 0 16px; }
#buying-cta .ce :is(h2:not(.as-h1),h1.as-h2) .lite, #buying-cta.ce :is(h2:not(.as-h1),h1.as-h2) .lite { font-family:'DM Serif Display',serif; font-style:italic; font-weight:400; text-transform:capitalize; opacity:.74; }
#buying-cta .ce .sub, #buying-cta.ce .sub { margin:0 auto 26px; font-size:1.02rem; opacity:.88; max-width:52ch; }
#buying-cta .ce .cta, #buying-cta.ce .cta { display:inline-block; font-weight:700; font-size:1rem; color:var(--seam-band,#0a121b); background:#fff; border-radius:12px; padding:.95rem 2rem; text-decoration:none; }
@media (max-width:1024px){
#buying-cta .seam--band, #buying-cta.seam--band { padding: clamp(52px,9vw,110px) var(--pad-inline); }
}
@media (max-width:767px){
#buying-cta .ce .cta, #buying-cta.ce .cta { width:100%; }
}

/* ===== ai-team (content/prose-1.html) ===== */
#ai-team .pr-sec, #ai-team.pr-sec { position:relative; padding:var(--pad-section) 0; overflow:hidden; }
#ai-team .pr-inner, #ai-team.pr-inner { position:relative; z-index:1; }
#ai-team .pr-inner > *, #ai-team.pr-inner > * { grid-column: 1 / -1; }
@media (min-width:1200px){
#ai-team .pr-inner > *, #ai-team.pr-inner > * { grid-column: 2 / span 10; }
}
#ai-team .pr-fig, #ai-team.pr-fig { margin:0 0 var(--space-5); border-radius:var(--radius-lg); overflow:hidden;
    background:#fff; box-shadow:0 8px 24px rgba(5,10,16,.3); }
#ai-team .pr-fig img, #ai-team.pr-fig img { display:block; width:100%; height:auto; }
@media (min-width:900px){
#ai-team .pr-inner:has(.pr-fig), #ai-team.pr-inner:has(.pr-fig) { display:block; }
#ai-team .pr-inner:has(.pr-fig) .pr-fig, #ai-team.pr-inner:has(.pr-fig) .pr-fig { float:right; width:min(34%,420px); margin:0 0 var(--space-5) var(--space-7); }
#ai-team .pr-inner:has(.pr-fig)::after, #ai-team.pr-inner:has(.pr-fig)::after { content:""; display:block; clear:both; }
#ai-team .pr-inner:has(.pr-fig) .pr-fig--left, #ai-team.pr-inner:has(.pr-fig) .pr-fig--left { float:left; margin:0 var(--space-7) var(--space-5) 0; }
}
#ai-team .pr-eyebrow, #ai-team.pr-eyebrow { font-family:var(--font-mono); font-weight:500; font-size:var(--t-label);
    letter-spacing:.14em; text-transform:uppercase; color:var(--eyebrow); margin:0 0 var(--space-5); }
#ai-team .pr-eyebrow b, #ai-team.pr-eyebrow b { color:var(--blue-text); font-weight:500; }
#ai-team .pr-h2, #ai-team.pr-h2 { font-family:var(--font-display); font-weight:var(--w-black); font-size:var(--t-h2);
    line-height:var(--leading-snug); letter-spacing:var(--tracking-caps); margin:0 0 var(--space-6); text-wrap:balance; }
#ai-team .pr-lede, #ai-team.pr-lede { font-size:clamp(1.2rem,1.8vw,1.5rem); line-height:var(--leading-snug);
    color:inherit; margin:0 0 var(--space-6); max-width:82ch; }
#ai-team .pr-body, #ai-team.pr-body { font-size:var(--t-body-lg); line-height:var(--leading-body); color:var(--neutral-light); }
#ai-team.mode-light .pr-body, #ai-team .mode-light .pr-body, #ai-team.mode-light .pr-body { color:var(--neutral-dark); }
#ai-team .pr-body p, #ai-team.pr-body p { margin:0 0 var(--space-5); max-width:88ch; }
#ai-team .pr-body p:last-child, #ai-team.pr-body p:last-child { margin-bottom:0; }
#ai-team .pr-body strong, #ai-team.pr-body strong { color:inherit; font-weight:var(--w-semibold); }
#ai-team .pr-body a, #ai-team.pr-body a, #ai-team a.link { color:var(--link); text-decoration:underline; text-underline-offset:.16em;
    text-decoration-thickness:1.5px; text-decoration-color:color-mix(in srgb, var(--link) 45%, transparent); }
#ai-team .pr-body a:hover, #ai-team.pr-body a:hover, #ai-team a.link:hover { color:var(--link-hover); text-decoration-color:currentColor; }
#ai-team .pr-body blockquote, #ai-team.pr-body blockquote { margin:var(--space-6) 0; padding-left:clamp(18px,2.4vw,26px);
    border-left:3px solid var(--blue-text); font-family:var(--font-emph); font-style:italic;
    font-size:clamp(1.2rem,1.9vw,1.55rem); line-height:var(--leading-snug); color:inherit; max-width:60ch; }
#ai-team .pr-subhead, #ai-team.pr-subhead { font-family:var(--font-display); font-weight:var(--w-bold); font-size:var(--t-h3);
    line-height:var(--leading-snug); color:inherit; margin:var(--space-7) 0 var(--space-4); }
#ai-team .pr-list, #ai-team.pr-list { list-style:none; margin:var(--space-6) 0; padding:0; display:grid; gap:var(--space-4); }
#ai-team .pr-list li, #ai-team.pr-list li { position:relative; padding-left:30px; font-size:var(--t-body-lg);
    line-height:var(--leading-body); color:var(--neutral-light); max-width:86ch; }
#ai-team.mode-light .pr-list li, #ai-team .mode-light .pr-list li, #ai-team.mode-light .pr-list li { color:var(--neutral-dark); }
#ai-team .pr-list li strong, #ai-team.pr-list li strong { color:inherit; font-weight:var(--w-semibold); }
#ai-team .pr-list li::before, #ai-team.pr-list li::before { content:""; position:absolute; left:2px; top:.62em; width:11px; height:11px;
    border-left:2px solid var(--blue-text); border-bottom:2px solid var(--blue-text); transform:rotate(-45deg); }
#ai-team .pr-list.is-numbered, #ai-team.pr-list.is-numbered { counter-reset:pr-item; }
#ai-team .pr-list.is-numbered li, #ai-team.pr-list.is-numbered li { padding-left:42px; }
#ai-team .pr-list.is-numbered li::before, #ai-team.pr-list.is-numbered li::before { content:counter(pr-item) "."; counter-increment:pr-item;
    border:none; transform:none; width:auto; height:auto; left:0; top:0;
    font-family:var(--font-mono); font-weight:500; color:var(--blue-text); letter-spacing:.02em; }
#ai-team .pr-callout, #ai-team.pr-callout { margin:var(--space-7) 0 0; padding:clamp(18px,2.4vw,24px) clamp(20px,2.6vw,28px);
    border-left:3px solid var(--blue-text); border-radius:0 var(--radius) var(--radius) 0;
    background:color-mix(in srgb, var(--blue) 7%, var(--surface)); }
#ai-team.mode-light .pr-callout, #ai-team .mode-light .pr-callout, #ai-team.mode-light .pr-callout { background:color-mix(in srgb, var(--blue) 9%, var(--surface-2)); }
#ai-team .pr-callout-label, #ai-team.pr-callout-label { display:block; font-family:var(--font-mono); font-weight:500; font-size:var(--t-label);
    letter-spacing:.1em; text-transform:uppercase; color:var(--blue-text); margin:0 0 var(--space-3); }
#ai-team.mode-light .pr-callout-label, #ai-team .mode-light .pr-callout-label, #ai-team.mode-light .pr-callout-label { color:var(--blue-darker); }
#ai-team .pr-callout p, #ai-team.pr-callout p { margin:0; font-size:var(--t-body); line-height:var(--leading-body); color:var(--neutral-lightest); }
#ai-team.mode-light .pr-callout p, #ai-team .mode-light .pr-callout p, #ai-team.mode-light .pr-callout p { color:var(--ink-900); }
@media (max-width:767px){
#ai-team .pr-lede, #ai-team.pr-lede { font-size:1.15rem; }
#ai-team .pr-body, #ai-team.pr-body { font-size:var(--t-body); }
#ai-team .pr-list li, #ai-team.pr-list li { font-size:var(--t-body); }
}
@media (prefers-reduced-motion:no-preference){
@keyframes qaRise { from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none} }
#ai-team .pr-inner, #ai-team.pr-inner { animation: qaRise .6s both; animation-timeline: view(); animation-range: entry 0% cover 26%; }
}
@media (prefers-reduced-motion:reduce){
#ai-team * { animation:none !important; transition:none !important; }
}

/* ===== org-chart (cards/cardgrid-1.html) ===== */
#org-chart .cg-sec, #org-chart.cg-sec { position:relative; padding:var(--pad-section) 0; overflow:hidden; }
#org-chart .cg-inner, #org-chart.cg-inner { position:relative; z-index:1; }
#org-chart .cg-head, #org-chart.cg-head { max-width:64ch; margin:0 0 clamp(40px,6vw,72px); }
#org-chart .cg-eyebrow, #org-chart.cg-eyebrow {
    font-family:var(--font-mono); font-weight:500; font-size:var(--t-label);
    letter-spacing:.14em; text-transform:uppercase; color:var(--eyebrow); margin:0 0 var(--space-5);
  }
#org-chart .cg-eyebrow b, #org-chart.cg-eyebrow b { color:var(--blue); font-weight:500; }
#org-chart .cg-h2, #org-chart.cg-h2 {
    font-family:var(--font-display); font-weight:var(--w-black);
    font-size:var(--t-h2); line-height:var(--leading-snug);
    letter-spacing:var(--tracking-caps); margin:0; text-wrap:balance;
  }
#org-chart .cg-sub, #org-chart.cg-sub { margin:1.1em 0 0; max-width:62ch; font-size:clamp(1rem,1.5vw,1.15rem); line-height:1.6; color:var(--muted); }
#org-chart .cg-grid, #org-chart.cg-grid {  }
#org-chart .cg-card, #org-chart.cg-card {
    position:relative; display:flex; flex-direction:column; text-decoration:none; color:inherit;
    background:linear-gradient(180deg, color-mix(in srgb,var(--blue) 7%, var(--surface)) 0%, var(--surface) 70%);
    border:1px solid color-mix(in srgb,var(--blue) 24%, var(--line));
    border-radius:var(--radius-lg); overflow:hidden;
    transition:border-color .3s ease, background .3s ease, transform .25s ease;
  }
#org-chart.mode-light .cg-card {
    background:linear-gradient(180deg, color-mix(in srgb,var(--blue) 12%, var(--surface-2)) 0%, var(--surface-2) 75%);
    border-color:color-mix(in srgb,var(--blue) 40%, var(--line));
    box-shadow:0 10px 28px -22px color-mix(in srgb,var(--ink-900) 45%, transparent);
  }
#org-chart .cg-card:hover, #org-chart.cg-card:hover {
    border-color:color-mix(in srgb,var(--blue) 55%,var(--line));
    background:linear-gradient(180deg, color-mix(in srgb,var(--blue) 12%, var(--surface-2)) 0%, var(--surface-2) 70%);
    transform:translateY(-3px);
  }
#org-chart.mode-light .cg-card:hover {
    background:linear-gradient(180deg, color-mix(in srgb,var(--blue) 18%, var(--surface-2)) 0%, var(--surface-2) 78%);
  }
#org-chart .cg-media, #org-chart.cg-media {
    position:relative; aspect-ratio:16/9; width:100%;
    background:linear-gradient(160deg, color-mix(in srgb,var(--blue) 8%, var(--surface)) 0%, var(--surface) 80%);
    border-bottom:1px solid color-mix(in srgb,var(--blue) 26%, var(--line)); overflow:hidden;
  }
#org-chart.mode-light .cg-media { background:linear-gradient(160deg, color-mix(in srgb,var(--blue) 12%, var(--surface-2)) 0%, var(--surface-2) 82%); border-color:color-mix(in srgb,var(--blue) 32%, var(--line)); }
#org-chart .cg-media:not(:has(img[src]:not([src=""]))):not(:has(video)):not(:has(svg))::before, #org-chart.cg-media:not(:has(img[src]:not([src=""]))):not(:has(video)):not(:has(svg))::before {
    content:""; position:absolute; inset:0; opacity:.55; pointer-events:none;
    background:repeating-linear-gradient(45deg,
      color-mix(in srgb,var(--blue) 13%,transparent) 0 1px, transparent 1px 12px);
    mask-image:radial-gradient(80% 80% at 50% 50%, #000 35%, transparent 100%);
  }
#org-chart .cg-media:not(:has(img[src]:not([src=""]))):not(:has(video)):not(:has(svg))::after, #org-chart.cg-media:not(:has(img[src]:not([src=""]))):not(:has(video)):not(:has(svg))::after {
    content:"[ ▣ visual · 16:9 ]";
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:1;
    font-family:var(--font-mono); font-weight:500; font-size:var(--t-caption);
    letter-spacing:.12em; text-transform:uppercase; color:var(--blue-text); white-space:nowrap;
    padding:6px 12px; border-radius:var(--radius);
    border:1px solid color-mix(in srgb,var(--blue) 30%, var(--line));
    background:color-mix(in srgb,var(--surface) 82%, transparent);
  }
#org-chart .cg-media__tag, #org-chart.cg-media__tag {
    position:absolute; left:14px; bottom:14px; z-index:1;
    font-family:var(--font-mono); font-weight:500; font-size:var(--t-caption); letter-spacing:.12em;
    
    color:#fff; padding:6px 12px; border-radius:var(--radius);
    border:1px solid color-mix(in srgb,var(--blue) 55%,transparent);
    background:color-mix(in srgb,var(--ink-950) 92%,transparent);
  }
#org-chart .cg-media img, #org-chart.cg-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
#org-chart .cg--no-thumb .cg-media, #org-chart.cg--no-thumb .cg-media { display:none; }
#org-chart .cg-body, #org-chart.cg-body { display:flex; flex-direction:column; flex:1; padding:clamp(22px,2.6vw,30px); }
#org-chart .cg-badge, #org-chart.cg-badge {
    align-self:flex-start;
    font-family:var(--font-mono); font-weight:500; font-size:var(--t-caption);
    letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:0 0 var(--space-4);
  }
#org-chart .cg-title, #org-chart.cg-title {
    font-family:var(--font-display); font-weight:var(--w-bold);
    font-size:var(--t-h3); line-height:var(--leading-snug);
    letter-spacing:var(--tracking-caps); margin:0 0 var(--space-3);
  }
#org-chart .cg-blurb, #org-chart.cg-blurb { font-size:var(--t-body); line-height:var(--leading-body); color:var(--muted); margin:0; max-width:42ch; }
#org-chart .cg-stat, #org-chart.cg-stat { margin:auto 0 0; padding-top:var(--space-5); display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 10px; min-width:0; }
#org-chart .cg-stat-n, #org-chart.cg-stat-n {
    font-family:var(--font-display); font-weight:var(--w-black);
    font-size:clamp(1.9rem,3.4vw,2.8rem); line-height:.9;
    letter-spacing:var(--tracking-display); color:var(--blue); 
  }
#org-chart .cg-stat-l, #org-chart.cg-stat-l {
    font-family:var(--font-mono); font-weight:500; font-size:var(--t-caption);
    letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  }
#org-chart .cg-cue, #org-chart.cg-cue {
    margin:auto 0 0; padding-top:var(--space-5);
    font-family:var(--font-mono); font-weight:500; font-size:var(--t-label);
    letter-spacing:.06em; color:var(--link); display:inline-flex; align-items:center; gap:7px; 
    transition:gap .2s ease, color .15s ease;
  }
#org-chart .cg-card:hover .cg-cue, #org-chart.cg-card:hover .cg-cue { gap:13px; color:var(--link-hover); }
@media (min-width:768px){
#org-chart .cg--bento .cg-grid > .cg-card:first-child .cg-title, #org-chart.cg--bento .cg-grid > .cg-card:first-child .cg-title { font-size:var(--t-h2); }
}
@media (max-width:1199px){
#org-chart .cg--bento .cg-grid > .cg-card:first-child, #org-chart.cg--bento .cg-grid > .cg-card:first-child { grid-column:1 / -1; }
}
@media (min-width:1200px){
#org-chart .cg--bento .cg-grid > .cg-card:first-child, #org-chart.cg--bento .cg-grid > .cg-card:first-child { grid-column:span 8; grid-row:span 2; }
#org-chart .cg--bento .cg-grid > .cg-card:first-child .cg-body, #org-chart.cg--bento .cg-grid > .cg-card:first-child .cg-body { justify-content:flex-end; }
}

/* ===== seam-5 (seam/peek-seam-37.html) ===== */
#seam-5 .pair, #seam-5.pair { width:100%; }
@media (max-width:1024px){
#seam-5 .pair, #seam-5.pair { font-size:.98rem; }
}
@media (max-width:767px){
#seam-5 .pair, #seam-5.pair { font-size:.9rem; }
}

/* ===== proof (brands/brands-1.html) ===== */
#proof .br-sec, #proof.br-sec {
    position:relative;
    padding:var(--pad-section) 0;
    overflow:hidden;
  }
#proof .br-inner, #proof.br-inner { position:relative; z-index:1; row-gap:0; }
#proof .br-inner.g-cols > .col-12, #proof.br-inner.g-cols > .col-12 { grid-column:1 / -1; }
#proof .br-eyebrow, #proof.br-eyebrow {
    font-family:var(--font-mono); font-weight:500; font-size:var(--t-label);
    letter-spacing:.14em; text-transform:uppercase; color:var(--eyebrow);
    margin:0 0 var(--space-8); display:inline-flex; align-items:center; gap:8px;
  }
#proof .br-split, #proof.br-split {
    display:grid; grid-template-columns:1fr 1px 1fr; align-items:stretch;
  }
#proof .br-divide, #proof.br-divide { width:1px; background:var(--line); align-self:stretch; }
#proof .br-panel, #proof.br-panel {
    position:relative;
    display:flex; flex-direction:column; align-items:flex-start;
    padding:clamp(24px,3.5vw,52px) clamp(20px,3vw,56px);
    border:1px solid transparent; border-radius:var(--radius-lg);
    transition:transform .25s cubic-bezier(.2,.7,.2,1), background .25s, border-color .25s, box-shadow .25s, border-radius .2s;
  }
#proof .br-panel:hover, #proof.br-panel:hover {
    transform:translateY(-4px);
    background:color-mix(in srgb, var(--surface) 70%, transparent);
    border-color:color-mix(in srgb, var(--blue) 45%, var(--line));
    border-radius:0 var(--radius-lg) 0 var(--radius-lg);   
    box-shadow:0 18px 50px -28px color-mix(in srgb, var(--blue) 50%, transparent);
  }
#proof .br-panel::before, #proof.br-panel::before, #proof .br-panel::after, #proof.br-panel::after {
    content:""; position:absolute; width:16px; height:16px; opacity:0; transition:opacity .2s; pointer-events:none; z-index:2;
  }
#proof .br-panel::before, #proof.br-panel::before { top:0; left:0;  border-top:2px solid var(--blue); border-left:2px solid var(--blue); }
#proof .br-panel::after, #proof.br-panel::after { bottom:0; right:0; border-bottom:2px solid var(--blue); border-right:2px solid var(--blue); }
#proof .br-panel:hover::before, #proof.br-panel:hover::before, #proof .br-panel:hover::after, #proof.br-panel:hover::after { opacity:1; }
#proof .br-title, #proof.br-title {
    font-family:var(--font-display); font-weight:var(--w-bold);
    font-size:var(--t-h3); line-height:var(--leading-snug);
    letter-spacing:var(--tracking-caps); margin:0; text-wrap:balance;
  }
#proof .br-pitch, #proof.br-pitch {
    font-size:var(--t-body-lg); line-height:var(--leading-body); color:var(--muted);
    margin:var(--space-5) 0 0; max-width:42ch;
  }
#proof .br-list, #proof.br-list { list-style:none; margin:var(--space-6) 0 0; padding:0; width:100%; }
#proof .br-list li, #proof.br-list li {
    font-family:var(--font-mono); font-size:var(--t-body-sm); letter-spacing:.01em;
    color:var(--page-fg, inherit);
    display:flex; align-items:center; gap:12px;
    padding:var(--space-3) 0; border-top:1px solid var(--line);
  }
#proof .br-list li:last-child, #proof.br-list li:last-child { border-bottom:1px solid var(--line); }
#proof .br-list li::before, #proof.br-list li::before {
    content:""; flex:0 0 auto; width:9px; height:9px;
    border-left:2px solid var(--blue); border-bottom:2px solid var(--blue);
  }
#proof .br-act, #proof.br-act { margin-top:var(--space-7); }
#proof .br-act .btn, #proof.br-act .btn { font-size:1rem; padding:.8rem 1.6rem; }
@media (max-width:1199px){
#proof .br-panel, #proof.br-panel { padding:clamp(20px,3vw,40px) clamp(18px,3vw,36px); }
#proof .br-pitch, #proof.br-pitch { font-size:var(--t-body); }
}
@media (max-width:767px){
#proof .br-split, #proof.br-split { grid-template-columns:1fr; }
#proof .br-divide, #proof.br-divide { width:auto; height:1px; align-self:stretch; margin:var(--space-2) 0; }
#proof .br-panel, #proof.br-panel { padding:clamp(22px,6vw,32px) clamp(18px,5vw,26px); }
#proof .br-pitch, #proof.br-pitch { max-width:none; }
#proof .br-act, #proof.br-act { width:100%; }
#proof .br-act .btn, #proof.br-act .btn { display:block; text-align:center; }
#proof .br-eyebrow, #proof.br-eyebrow { margin-bottom:var(--space-6); }
}
@media (prefers-reduced-motion:reduce){
#proof .br-panel, #proof.br-panel { transition:none; }
#proof .br-panel:hover, #proof.br-panel:hover { transform:none; }
}

/* ===== seam-6 (seam/peek-seam-51.html) ===== */
#seam-6 .pair, #seam-6.pair { width:100%; }
@media (max-width:1024px){
#seam-6 .pair, #seam-6.pair { font-size:.98rem; }
}
@media (max-width:767px){
#seam-6 .pair, #seam-6.pair { font-size:.9rem; }
}

/* ===== quote (quote/quote-1.html) ===== */
#quote .qt-sec, #quote.qt-sec {
    position:relative; overflow:hidden;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center;
    min-height:560px;
    padding:clamp(64px,11vh,140px) 0;
  }
#quote .qt-inner, #quote.qt-inner { position:relative; z-index:1; width:100%; }
#quote .g-cols > .qt-body, #quote.g-cols > .qt-body { grid-column:2 / span 10; }
#quote .qt-eyebrow, #quote.qt-eyebrow {
    font-family:var(--font-mono); font-weight:500; font-size:var(--t-label);
    letter-spacing:.14em; text-transform:uppercase; color:var(--eyebrow);
    margin:0 0 var(--space-6);
  }
#quote .qt-mark, #quote.qt-mark {
    font-family:var(--font-script); font-style:var(--quote-style, italic); font-weight:400;
    color:var(--blue); line-height:1;
    font-size:clamp(4.5rem,11vw,8.5rem);
    margin:0 0 -.32em; display:block;
    user-select:none;
  }
#quote.mode-light .qt-mark { color:var(--blue-dark); }
#quote .qt-quote, #quote.qt-quote {
    font-family:var(--font-script); font-style:var(--quote-style, italic); font-weight:400;
    font-size:var(--t-quote);
    line-height:1.28; letter-spacing:-.01em;
    color:var(--page-fg); 
    margin:0; text-wrap:balance;
  }
#quote.mode-dark .qt-quote { color:var(--neutral-lightest); }
#quote.mode-light .qt-quote { color:var(--ink-900); }
#quote .qt-quote .qt-build, #quote.qt-quote .qt-build { font-weight:500; }
#quote .qt-tick, #quote.qt-tick {
    width:34px; height:2px; border-radius:2px; background:var(--blue);
    margin:var(--space-7) auto var(--space-5);
  }
#quote.mode-light .qt-tick { background:var(--blue-dark); }
#quote .qt-attr, #quote.qt-attr {
    font-family:var(--font-mono); font-size:var(--t-body-sm);
    letter-spacing:.02em; color:var(--page-fg); margin:0;
  }
#quote .qt-attr .qt-name, #quote.qt-attr .qt-name { font-weight:500; color:var(--blue); }
#quote.mode-light .qt-attr .qt-name { color:var(--blue-dark); }
#quote .qt-attr .qt-role, #quote.qt-attr .qt-role { color:var(--muted); }
#quote .qt-anim, #quote.qt-anim { opacity:0; transform:translateY(12px); animation:qt-rise .7s cubic-bezier(.2,.7,.2,1) forwards; }
#quote .qt-d1, #quote.qt-d1 {animation-delay:.05s}
#quote .qt-d2, #quote.qt-d2 {animation-delay:.16s}
#quote .qt-d3, #quote.qt-d3 {animation-delay:.30s}
#quote .qt-d4, #quote.qt-d4 {animation-delay:.42s}
@keyframes qt-rise { to { opacity:1; transform:none; } }
@media (max-width:1199px){
#quote .g-cols > .qt-body, #quote.g-cols > .qt-body { grid-column:3 / span 8; }
}
@media (max-width:767px){
#quote .qt-sec, #quote.qt-sec { min-height:520px; padding:clamp(56px,9vh,90px) 0; }
#quote .g-cols > .qt-body, #quote.g-cols > .qt-body { grid-column:1 / -1; }
#quote .qt-mark, #quote.qt-mark { font-size:clamp(3.2rem,18vw,4.5rem); margin-bottom:-.28em; }
#quote .qt-quote, #quote.qt-quote { line-height:1.3; }
#quote .qt-attr, #quote.qt-attr { font-size:var(--t-body-sm); line-height:1.7; }
#quote .qt-attr .qt-role, #quote.qt-attr .qt-role { display:block; }
}
@media (prefers-reduced-motion:reduce){
#quote .qt-anim, #quote.qt-anim { animation:none; opacity:1; transform:none; }
}
#quote .char-cut, #quote.char-cut { position:absolute; z-index:1; right:clamp(8px,2vw,48px); bottom:0;
    height:clamp(300px,26vw,440px); width:auto; pointer-events:none; display:none; }
@media (min-width:1150px){
#quote .char-cut, #quote.char-cut { display:block; }
}

/* ===== seam-7 (seam/peek-seam-100.html) ===== */
#seam-7 .pair, #seam-7.pair { width:100%; }
@media (max-width:1024px){
#seam-7 .pair, #seam-7.pair { font-size:.98rem; }
}
@media (max-width:767px){
#seam-7 .pair, #seam-7.pair { font-size:.9rem; }
}

/* ===== cost (content/prose-1.html) ===== */
#cost .pr-sec, #cost.pr-sec { position:relative; padding:var(--pad-section) 0; overflow:hidden; }
#cost .pr-inner, #cost.pr-inner { position:relative; z-index:1; }
#cost .pr-inner > *, #cost.pr-inner > * { grid-column: 1 / -1; }
@media (min-width:1200px){
#cost .pr-inner > *, #cost.pr-inner > * { grid-column: 2 / span 10; }
}
#cost .pr-fig, #cost.pr-fig { margin:0 0 var(--space-5); border-radius:var(--radius-lg); overflow:hidden;
    background:#fff; box-shadow:0 8px 24px rgba(5,10,16,.3); }
#cost .pr-fig img, #cost.pr-fig img { display:block; width:100%; height:auto; }
@media (min-width:900px){
#cost .pr-inner:has(.pr-fig), #cost.pr-inner:has(.pr-fig) { display:block; }
#cost .pr-inner:has(.pr-fig) .pr-fig, #cost.pr-inner:has(.pr-fig) .pr-fig { float:right; width:min(34%,420px); margin:0 0 var(--space-5) var(--space-7); }
#cost .pr-inner:has(.pr-fig)::after, #cost.pr-inner:has(.pr-fig)::after { content:""; display:block; clear:both; }
#cost .pr-inner:has(.pr-fig) .pr-fig--left, #cost.pr-inner:has(.pr-fig) .pr-fig--left { float:left; margin:0 var(--space-7) var(--space-5) 0; }
}
#cost .pr-eyebrow, #cost.pr-eyebrow { font-family:var(--font-mono); font-weight:500; font-size:var(--t-label);
    letter-spacing:.14em; text-transform:uppercase; color:var(--eyebrow); margin:0 0 var(--space-5); }
#cost .pr-eyebrow b, #cost.pr-eyebrow b { color:var(--blue-text); font-weight:500; }
#cost .pr-h2, #cost.pr-h2 { font-family:var(--font-display); font-weight:var(--w-black); font-size:var(--t-h2);
    line-height:var(--leading-snug); letter-spacing:var(--tracking-caps); margin:0 0 var(--space-6); text-wrap:balance; }
#cost .pr-lede, #cost.pr-lede { font-size:clamp(1.2rem,1.8vw,1.5rem); line-height:var(--leading-snug);
    color:inherit; margin:0 0 var(--space-6); max-width:82ch; }
#cost .pr-body, #cost.pr-body { font-size:var(--t-body-lg); line-height:var(--leading-body); color:var(--neutral-light); }
#cost.mode-light .pr-body, #cost .mode-light .pr-body, #cost.mode-light .pr-body { color:var(--neutral-dark); }
#cost .pr-body p, #cost.pr-body p { margin:0 0 var(--space-5); max-width:88ch; }
#cost .pr-body p:last-child, #cost.pr-body p:last-child { margin-bottom:0; }
#cost .pr-body strong, #cost.pr-body strong { color:inherit; font-weight:var(--w-semibold); }
#cost .pr-body a, #cost.pr-body a, #cost a.link { color:var(--link); text-decoration:underline; text-underline-offset:.16em;
    text-decoration-thickness:1.5px; text-decoration-color:color-mix(in srgb, var(--link) 45%, transparent); }
#cost .pr-body a:hover, #cost.pr-body a:hover, #cost a.link:hover { color:var(--link-hover); text-decoration-color:currentColor; }
#cost .pr-body blockquote, #cost.pr-body blockquote { margin:var(--space-6) 0; padding-left:clamp(18px,2.4vw,26px);
    border-left:3px solid var(--blue-text); font-family:var(--font-emph); font-style:italic;
    font-size:clamp(1.2rem,1.9vw,1.55rem); line-height:var(--leading-snug); color:inherit; max-width:60ch; }
#cost .pr-subhead, #cost.pr-subhead { font-family:var(--font-display); font-weight:var(--w-bold); font-size:var(--t-h3);
    line-height:var(--leading-snug); color:inherit; margin:var(--space-7) 0 var(--space-4); }
#cost .pr-list, #cost.pr-list { list-style:none; margin:var(--space-6) 0; padding:0; display:grid; gap:var(--space-4); }
#cost .pr-list li, #cost.pr-list li { position:relative; padding-left:30px; font-size:var(--t-body-lg);
    line-height:var(--leading-body); color:var(--neutral-light); max-width:86ch; }
#cost.mode-light .pr-list li, #cost .mode-light .pr-list li, #cost.mode-light .pr-list li { color:var(--neutral-dark); }
#cost .pr-list li strong, #cost.pr-list li strong { color:inherit; font-weight:var(--w-semibold); }
#cost .pr-list li::before, #cost.pr-list li::before { content:""; position:absolute; left:2px; top:.62em; width:11px; height:11px;
    border-left:2px solid var(--blue-text); border-bottom:2px solid var(--blue-text); transform:rotate(-45deg); }
#cost .pr-list.is-numbered, #cost.pr-list.is-numbered { counter-reset:pr-item; }
#cost .pr-list.is-numbered li, #cost.pr-list.is-numbered li { padding-left:42px; }
#cost .pr-list.is-numbered li::before, #cost.pr-list.is-numbered li::before { content:counter(pr-item) "."; counter-increment:pr-item;
    border:none; transform:none; width:auto; height:auto; left:0; top:0;
    font-family:var(--font-mono); font-weight:500; color:var(--blue-text); letter-spacing:.02em; }
#cost .pr-callout, #cost.pr-callout { margin:var(--space-7) 0 0; padding:clamp(18px,2.4vw,24px) clamp(20px,2.6vw,28px);
    border-left:3px solid var(--blue-text); border-radius:0 var(--radius) var(--radius) 0;
    background:color-mix(in srgb, var(--blue) 7%, var(--surface)); }
#cost.mode-light .pr-callout, #cost .mode-light .pr-callout, #cost.mode-light .pr-callout { background:color-mix(in srgb, var(--blue) 9%, var(--surface-2)); }
#cost .pr-callout-label, #cost.pr-callout-label { display:block; font-family:var(--font-mono); font-weight:500; font-size:var(--t-label);
    letter-spacing:.1em; text-transform:uppercase; color:var(--blue-text); margin:0 0 var(--space-3); }
#cost.mode-light .pr-callout-label, #cost .mode-light .pr-callout-label, #cost.mode-light .pr-callout-label { color:var(--blue-darker); }
#cost .pr-callout p, #cost.pr-callout p { margin:0; font-size:var(--t-body); line-height:var(--leading-body); color:var(--neutral-lightest); }
#cost.mode-light .pr-callout p, #cost .mode-light .pr-callout p, #cost.mode-light .pr-callout p { color:var(--ink-900); }
@media (max-width:767px){
#cost .pr-lede, #cost.pr-lede { font-size:1.15rem; }
#cost .pr-body, #cost.pr-body { font-size:var(--t-body); }
#cost .pr-list li, #cost.pr-list li { font-size:var(--t-body); }
}
@media (prefers-reduced-motion:no-preference){
@keyframes qaRise { from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none} }
#cost .pr-inner, #cost.pr-inner { animation: qaRise .6s both; animation-timeline: view(); animation-range: entry 0% cover 26%; }
}
@media (prefers-reduced-motion:reduce){
#cost * { animation:none !important; transition:none !important; }
}

/* ===== charter (seam/peek-seam-111.html) ===== */
#charter .sm-slice, #charter.sm-slice { position:relative; padding: clamp(40px,6vh,72px) var(--pad-inline); }
#charter .lab, #charter.lab { font-family:var(--font-mono); font-size:var(--t-label); letter-spacing:.04em; color:var(--muted); }
#charter .nbr-above, #charter.nbr-above { background:var(--seam-above); color:var(--seam-above-fg); }
#charter .nbr-below, #charter.nbr-below { background:var(--seam-below); color:var(--seam-below-fg); }
#charter .ce, #charter.ce { text-align:center; max-width:1000px; margin:0 auto; }
#charter .ce .eyebrow, #charter.ce .eyebrow { font-family:var(--font-mono); font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; opacity:1; margin:0 0 22px; }
#charter .ce .eyebrow::before, #charter.ce .eyebrow::before { background:currentColor !important; }
#charter .ce :is(h2:not(.as-h1),h1.as-h2), #charter.ce :is(h2:not(.as-h1),h1.as-h2) { font-family:var(--font-display); font-weight:900; text-transform:uppercase; font-size:clamp(2.1rem,5.4vw,3.6rem); line-height:.98; letter-spacing:-.02em; margin:0 auto 22px; max-width:18ch; text-wrap:balance; }
#charter .ce :is(h2:not(.as-h1),h1.as-h2) .lite, #charter.ce :is(h2:not(.as-h1),h1.as-h2) .lite { font-family:'DM Serif Display',serif; font-style:italic; font-weight:400; text-transform:capitalize; opacity:.74; }
#charter .ce .sub, #charter.ce .sub { margin:0 auto 28px; font-size:clamp(1.05rem,1.4vw,1.25rem); line-height:1.45; opacity:.94; max-width:48ch; text-wrap:balance; }
#charter .ce .inc, #charter.ce .inc { list-style:none; margin:0 auto 34px; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:12px; max-width:1000px; }
#charter .ce .inc li, #charter.ce .inc li { font-family:var(--font-body); font-weight:600; font-size:.95rem; line-height:1;
    padding:13px 20px; border-radius:999px; border:1px solid rgba(255,255,255,.85); background:rgba(255,255,255,.18); white-space:nowrap; }
#charter .ce .cta, #charter.ce .cta { display:inline-block; font-weight:700; font-size:1.12rem; color:var(--seam-band,#0a121b); background:#fff; border-radius:14px; padding:1.15rem 2.6rem; text-decoration:none; }
#charter .ce .note, #charter.ce .note { font-family:var(--font-body); font-size:.95rem; opacity:.9; margin:18px 0 0; }
@media (max-width:1024px){
#charter .seam--band, #charter.seam--band { padding: clamp(52px,9vw,110px) var(--pad-inline); }
}
@media (max-width:767px){
#charter .ce .cta, #charter.ce .cta { width:100%; }
#charter .ce .inc li, #charter.ce .inc li { white-space:normal; text-align:center; }
}

/* ===== faq (faq/faq-1.html) ===== */
#faq .faq-sec, #faq.faq-sec { position:relative; padding:var(--pad-section) 0; overflow:hidden; }
#faq .faq-inner, #faq.faq-inner { position:relative; z-index:1; }
#faq .faq-inner > *, #faq.faq-inner > * { grid-column: 1 / -1; }
@media (min-width:1200px){
#faq .faq-inner > *, #faq.faq-inner > * { grid-column: 2 / span 10; }
}
#faq .faq-head, #faq.faq-head { margin:0 0 clamp(36px,5vw,64px); max-width:24ch; }
#faq .faq-eyebrow, #faq.faq-eyebrow { font-family:var(--font-mono); font-weight:500; font-size:var(--t-label);
    letter-spacing:.14em; text-transform:uppercase; color:var(--eyebrow); margin:0 0 var(--space-5);
    display:inline-flex; align-items:center; gap:.55em; }
#faq .faq-eyebrow::before, #faq.faq-eyebrow::before { content:"?"; opacity:.8; color:var(--blue-text); font-weight:700; }
#faq .faq-eyebrow b, #faq.faq-eyebrow b { color:var(--blue-text); font-weight:500; }
#faq .faq-h2, #faq.faq-h2 { font-family:var(--font-display); font-weight:var(--w-black); font-size:var(--t-h1);
    line-height:var(--leading-snug); letter-spacing:var(--tracking-caps); text-transform:uppercase; margin:0; text-wrap:balance; }
#faq .faq-list, #faq.faq-list { list-style:none; margin:0; padding:0; display:grid; gap:clamp(12px,1.5vw,16px); counter-reset:faq; }
#faq .faq-item, #faq.faq-item { position:relative; counter-increment:faq;
    border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface-2);
    overflow:hidden; transition:border-color .3s, box-shadow .3s; }
#faq.mode-light .faq-item, #faq .mode-light .faq-item, #faq.mode-light .faq-item { box-shadow:0 1px 2px color-mix(in srgb, var(--ink-950) 6%, transparent); }
#faq .faq-item[open], #faq.faq-item[open] { border-color:color-mix(in srgb, var(--blue) 40%, var(--line)); }
#faq.mode-dark .faq-item[open], #faq .mode-dark .faq-item[open], #faq.mode-dark .faq-item[open] {
    box-shadow:0 12px 34px -20px color-mix(in srgb, var(--blue) 55%, transparent); }
#faq.mode-light .faq-item[open], #faq .mode-light .faq-item[open], #faq.mode-light .faq-item[open] {
    box-shadow:0 14px 30px -18px color-mix(in srgb, var(--blue-dark) 26%, transparent); }
#faq .faq-q, #faq.faq-q { display:grid; grid-template-columns:auto 1fr auto; gap:clamp(12px,2vw,20px); align-items:center;
    padding:clamp(18px,2.4vw,26px) clamp(20px,2.8vw,34px); cursor:pointer; list-style:none;
    transition:background .25s; }
#faq .faq-q::-webkit-details-marker, #faq.faq-q::-webkit-details-marker { display:none; }
#faq .faq-q:hover, #faq.faq-q:hover { background:color-mix(in srgb, var(--blue) 5%, transparent); }
#faq .faq-num, #faq.faq-num { font-family:var(--font-mono); font-weight:500; font-size:clamp(.85rem,1.4vw,1rem);
    color:var(--blue-text); letter-spacing:.04em; }
#faq .faq-num::before, #faq.faq-num::before { content:counter(faq,decimal-leading-zero); }
#faq .faq-qtext, #faq.faq-qtext { font-family:var(--font-display); font-weight:var(--w-bold); font-size:var(--t-h4);
    line-height:var(--leading-snug); margin:0; text-wrap:balance; }
#faq .faq-mark, #faq.faq-mark { position:relative; width:22px; height:22px; flex:none; }
#faq .faq-mark::before, #faq.faq-mark::before, #faq .faq-mark::after, #faq.faq-mark::after { content:""; position:absolute; left:50%; top:50%;
    background:var(--blue-text); border-radius:2px; transform:translate(-50%,-50%); transition:transform .3s, opacity .3s; }
#faq .faq-mark::before, #faq.faq-mark::before { width:14px; height:2px; }
#faq .faq-mark::after, #faq.faq-mark::after { width:2px; height:14px; }
#faq.mode-light .faq-mark::before, #faq.mode-light .faq-mark::after, #faq .mode-light .faq-mark::before, #faq.mode-light .faq-mark::before, #faq .mode-light .faq-mark::after, #faq.mode-light .faq-mark::after { background:var(--blue-dark); }
#faq .faq-item[open] .faq-mark::after, #faq.faq-item[open] .faq-mark::after { transform:translate(-50%,-50%) scaleY(0); opacity:0; }
#faq .faq-a, #faq.faq-a { padding:0 clamp(20px,2.8vw,34px) clamp(20px,2.6vw,30px);
    padding-left:clamp(44px,5vw,72px); }
#faq .faq-a p, #faq.faq-a p { margin:0 0 var(--space-3); font-size:var(--t-body); line-height:var(--leading-body);
    color:var(--neutral-light); max-width:64ch; }
#faq.mode-light .faq-a p, #faq .mode-light .faq-a p, #faq.mode-light .faq-a p { color:var(--neutral-dark); }
#faq .faq-a p:last-child, #faq.faq-a p:last-child { margin-bottom:0; }
#faq .faq-a a, #faq.faq-a a { color:var(--link); text-decoration:none; border-bottom:1px solid color-mix(in srgb, var(--link) 45%, transparent); }
#faq .faq-a a:hover, #faq.faq-a a:hover { border-bottom-color:var(--link); }
@media (max-width:1024px){
#faq .faq-h2, #faq.faq-h2 { font-size:var(--t-h2); }
}
@media (max-width:767px){
#faq .faq-q, #faq.faq-q { grid-template-columns:auto 1fr auto; gap:var(--space-2); padding:var(--space-4) var(--space-4); }
#faq .faq-num, #faq.faq-num { display:none; }
#faq .faq-a, #faq.faq-a { padding-left:clamp(20px,5vw,28px); }
#faq .faq-item::before, #faq.faq-item::before { display:none; }
}
@media (prefers-reduced-motion:reduce){
#faq * { animation:none !important; transition:none !important; }
}
@media (prefers-reduced-motion: no-preference){
@keyframes faqRise { from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }
#faq .faq-item, #faq.faq-item {
      animation: faqRise .55s cubic-bezier(.2,.7,.2,1) both;
      animation-timeline: view();
      animation-range: entry 2% cover 24%;
    }
}
#faq .faq-char, #faq.faq-char { position:absolute; z-index:2; right:clamp(8px,4vw,80px); top:clamp(16px,3vw,52px);
    height:clamp(240px,20vw,330px); width:auto; pointer-events:none; display:none; }
@media (min-width:1150px){
#faq .faq-char, #faq.faq-char { display:block; }
}

/* ===== close (cta/cta-1.html) ===== */
#close .cta-band, #close.cta-band {
    position:relative;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center;
    padding:clamp(72px,13vh,140px) 0;
    overflow:hidden;
  }
#close .cta-copy, #close.cta-copy { position:relative; z-index:1; grid-column:3 / span 8; display:flex; flex-direction:column; align-items:center; }
#close .cta-eyebrow, #close.cta-eyebrow {
    
    font-family:var(--font-mono); font-weight:500; font-size:var(--t-body);
    letter-spacing:.14em; text-transform:uppercase; color:var(--eyebrow);
    margin:0 0 var(--space-5); display:inline-flex; align-items:center; gap:8px;
  }
#close .cta-head, #close.cta-head {
    font-family:var(--font-display); font-weight:var(--w-black);
    font-size:clamp(2.6rem,7.5vw,5.5rem); line-height:var(--leading-tight);
    letter-spacing:var(--tracking-display); text-transform:uppercase;
    margin:0; text-wrap:balance;
  }
#close .cta-head .emph, #close.cta-head .emph { white-space:normal; }
#close .cta-sub, #close.cta-sub {
    
    font-size:clamp(1.25rem,1.7vw,1.5rem); line-height:var(--leading-body); color:var(--muted);
    max-width:54ch; margin:var(--space-6) 0 0;
  }
#close .cta-actions, #close.cta-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:18px; margin-top:var(--space-7); }
#close .cta-actions .btn-cta, #close.cta-actions .btn-cta { font-size:1.05rem; padding:.95rem 2rem; }
#close .cta-link, #close.cta-link {
    font-family:var(--font-body); font-weight:var(--w-semibold); font-size:.95rem;
    color:var(--link); text-decoration:none; display:inline-flex; align-items:center; gap:7px;
    transition:gap .2s, color .2s;
  }
#close .cta-link:hover, #close.cta-link:hover { color:var(--link-hover); }
#close .cta-link svg, #close.cta-link svg { width:15px; height:15px; }
#close .cta-link:hover, #close.cta-link:hover { gap:11px; }
#close .cta-link.btn, #close.cta-link.btn { color:inherit; gap:7px; }
#close .cta-link.btn:hover, #close.cta-link.btn:hover { gap:7px; color:inherit; }
#close .anim, #close.anim { opacity:0; transform:translateY(14px); animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards; }
#close .d1, #close.d1 {animation-delay:.05s}
#close .d2, #close.d2 {animation-delay:.14s}
#close .d3, #close.d3 {animation-delay:.23s}
#close .d4, #close.d4 {animation-delay:.32s}
@keyframes rise { to { opacity:1; transform:none; } }
@media (max-width:1199px){
#close .cta-inner.g-cols > .cta-copy, #close.cta-inner.g-cols > .cta-copy { grid-column:2 / span 10; }
#close .cta-head, #close.cta-head { font-size:clamp(2.6rem,7vw,4.6rem); }
}
@media (max-width:767px){
#close .cta-band, #close.cta-band { padding:clamp(56px,11vh,88px) 0; }
#close .cta-head, #close.cta-head { font-size:clamp(2rem,9vw,2.9rem); }
#close .cta-head .emph, #close.cta-head .emph { white-space:normal; }
#close .cta-sub, #close.cta-sub { font-size:var(--t-body-lg); }
#close .cta-actions, #close.cta-actions { flex-direction:column; align-items:stretch; width:100%; max-width:340px; gap:16px; }
#close .cta-actions .btn, #close.cta-actions .btn { text-align:center; width:100%; justify-content:center; }
#close .cta-link, #close.cta-link { justify-content:center; }
}
@media (prefers-reduced-motion:reduce){
#close .anim, #close.anim { animation:none; opacity:1; transform:none; }
}
#close .char-cut, #close.char-cut { position:absolute; z-index:1; right:clamp(8px,3vw,72px); bottom:0;
    height:clamp(280px,24vw,400px); width:auto; pointer-events:none; display:none; }
@media (min-width:1150px){
#close .char-cut, #close.char-cut { display:block; }
}

/* ===== subscribe-modal (cta/subscribe-modal-1.html) ===== */
#subscribe-modal .sm-host, #subscribe-modal.sm-host { height:0; overflow:visible; }
#subscribe-modal .sm, #subscribe-modal.sm { border:0; padding:0; background:transparent; max-width:none; max-height:none; color:inherit; }
#subscribe-modal .sm::backdrop, #subscribe-modal.sm::backdrop { background:color-mix(in srgb, var(--ink-950) 62%, transparent); backdrop-filter:blur(4px); }
#subscribe-modal .sm-card, #subscribe-modal.sm-card {
    position:relative; width:min(520px, calc(100vw - 32px)); background:var(--surface); color:inherit;
    border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(28px,4vw,40px);
    box-shadow:0 30px 80px -30px color-mix(in srgb, var(--ink-950) 60%, transparent);
    animation:sm-in .32s cubic-bezier(.2,.7,.2,1);
  }
@keyframes sm-in { from { opacity:0; transform:translateY(14px) scale(.98); } to { opacity:1; transform:none; } }
#subscribe-modal .sm-x, #subscribe-modal.sm-x { position:absolute; top:12px; right:12px; width:36px; height:36px; border:0; border-radius:50%; background:transparent; color:inherit; cursor:pointer; font-size:22px; line-height:1; display:grid; place-items:center; opacity:.6; }
#subscribe-modal .sm-x:hover, #subscribe-modal.sm-x:hover { opacity:1; background:color-mix(in srgb, currentColor 8%, transparent); }
#subscribe-modal .sm-char, #subscribe-modal.sm-char { width:96px; height:96px; object-fit:contain; display:block; margin:0 0 14px; }
#subscribe-modal .sm-eyebrow, #subscribe-modal.sm-eyebrow { font-family:var(--font-mono); font-size:var(--t-micro); letter-spacing:.14em; text-transform:uppercase; color:var(--eyebrow, var(--blue)); margin:0 0 10px; }
#subscribe-modal .sm-head, #subscribe-modal.sm-head { font-family:var(--font-display); font-weight:var(--w-black); text-transform:uppercase; letter-spacing:var(--tracking-caps); font-size:var(--t-h3); line-height:1.1; margin:0 0 10px; }
#subscribe-modal .sm-head .emph, #subscribe-modal.sm-head .emph { font-family:var(--font-emph); font-style:italic; font-weight:400; text-transform:none; letter-spacing:0; }
#subscribe-modal .sm-sub, #subscribe-modal.sm-sub { font-size:var(--t-body-sm); color:var(--muted); margin:0 0 var(--space-5); }
#subscribe-modal .sm-form .sm-lab, #subscribe-modal.sm-form .sm-lab { display:block; font-family:var(--font-mono); font-size:var(--t-micro); letter-spacing:.1em; text-transform:uppercase; color:var(--eyebrow, var(--blue)); margin:0 0 6px; }
#subscribe-modal .sm-form input, #subscribe-modal.sm-form input { width:100%; font-family:var(--font-body); font-size:.95rem; color:inherit; background:var(--white); border:1px solid var(--line); border-radius:10px; padding:11px 12px; }
#subscribe-modal.mode-dark .sm-form input { background:var(--surface-2); }
#subscribe-modal .sm-form input:focus, #subscribe-modal.sm-form input:focus { outline:2px solid var(--blue); outline-offset:0; }
#subscribe-modal .sm-form .btn, #subscribe-modal.sm-form .btn { width:100%; text-align:center; margin-top:12px; }
#subscribe-modal .sm-fine, #subscribe-modal.sm-fine { font-size:var(--t-micro); color:var(--muted); margin:12px 0 0; }
#subscribe-modal .sm-no, #subscribe-modal.sm-no { display:block; margin:14px auto 0; background:none; border:0; color:var(--muted); font:inherit; font-size:var(--t-body-sm); cursor:pointer; text-decoration:underline; text-underline-offset:.16em; }
#subscribe-modal .sm-no:hover, #subscribe-modal.sm-no:hover { color:inherit; }
#subscribe-modal .sm-done, #subscribe-modal.sm-done { display:none; text-align:center; padding:18px 0 6px; }
#subscribe-modal .sm-done .sm-big, #subscribe-modal.sm-done .sm-big { font-family:var(--font-display); font-weight:var(--w-black); text-transform:uppercase; font-size:var(--t-h4); margin:0 0 8px; }
#subscribe-modal .sm-done p, #subscribe-modal.sm-done p { color:var(--muted); margin:0; }
#subscribe-modal .is-done .sm-form, #subscribe-modal.is-done .sm-form, #subscribe-modal .is-done .sm-sub, #subscribe-modal.is-done .sm-sub, #subscribe-modal .is-done .sm-no, #subscribe-modal.is-done .sm-no { display:none; }
#subscribe-modal .is-done .sm-done, #subscribe-modal.is-done .sm-done { display:block; }
@media (prefers-reduced-motion:reduce){
#subscribe-modal .sm-card, #subscribe-modal.sm-card { animation:none; }
}
#subscribe-modal .sm-demo, #subscribe-modal.sm-demo { padding:var(--pad-section) 16px; display:grid; place-items:center; }

/* ===== footer (footer/footer-reveal-1.html) ===== */
#footer .reveal-shell, #footer.reveal-shell { position:relative; }
#footer .scroller, #footer.scroller { position:relative; z-index:1; margin-bottom:100vh; }
#footer .above, #footer.above { --above-bg: var(--white); background:var(--above-bg); color:var(--ink-700);
    min-height:90vh; padding:clamp(60px,10vh,120px) max(var(--g-edge), calc((100% - var(--g-maxw)) / 2)); 
    display:flex; flex-direction:column; justify-content:space-between; gap:18px; }
#footer .above.is-dark, #footer.above.is-dark { --above-bg: var(--ink-900); color:var(--ink-400); }
#footer .above .lab, #footer.above .lab { font-family:var(--font-mono); font-size:var(--t-label); letter-spacing:.04em; color:var(--eyebrow); }
#footer .above .big, #footer.above .big { font-family:var(--font-display); font-weight:var(--w-black); text-transform:uppercase; letter-spacing:-.01em; font-size:clamp(1.6rem,4vw,3rem); line-height:1; margin:0; max-width:20ch; }
#footer .paint, #footer.paint { display:block; line-height:0; background:transparent; margin-top:-1px; }
#footer .paint img, #footer.paint img { display:block; width:100%; height:auto; }
#footer .paint, #footer.paint { position:relative; }
#footer .paint::before, #footer.paint::before { content:""; position:absolute; left:0; right:0; top:-1px; height:40%; background:transparent; z-index:-1; }
#footer .foot, #footer.foot {
    position:fixed; left:0; right:0; bottom:0; z-index:0;
    height:100vh; background:var(--ink-950); color:var(--neutral-lightest);
    display:flex; flex-direction:column; overflow:hidden;
  }
#footer .foot__inner, #footer.foot__inner { position:relative; z-index:1; flex:1; display:flex; flex-direction:column;
    container-type:inline-size;   
    width:100%; max-width:calc(var(--g-maxw) + 2 * var(--g-edge)); margin-inline:auto;
    padding:clamp(20px,4vh,56px) var(--g-edge) 32px; }
#footer .foot__word, #footer.foot__word {
    font-family:var(--font-display); font-weight:var(--w-black); text-transform:uppercase;
    
    font-size:max(3rem, min(clamp(3rem, 13.2vw, 16rem),
             calc(100cqi / (var(--foot-word-chars, 9) * var(--foot-word-ratio, .66)))));
    line-height:.82; letter-spacing:-.03em;
    margin:0; white-space:nowrap; color:#f9fafc;
    background:linear-gradient(180deg, #f9fafc 60%, color-mix(in srgb,var(--blue) 55%, #f9fafc) 100%);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  }
#footer .foot__word .fw-accent, #footer.foot__word .fw-accent { background:none; color:var(--blue); -webkit-text-fill-color:var(--blue);
    font-family:var(--font-emph); font-style:italic; font-weight:400; text-transform:none; letter-spacing:0;
    -webkit-text-stroke:.02em var(--blue); paint-order:stroke fill; }
#footer .foot__tag:not(:has(.emph)), #footer.foot__tag:not(:has(.emph)) { font-family:var(--font-mono); font-weight:500; font-size:clamp(.8rem,1.5vw,1.35rem);
    letter-spacing:.16em; text-transform:uppercase; color:var(--blue); margin-top:18px; }
#footer .foot__tag, #footer.foot__tag { margin:10px 0 auto; font-size:clamp(0.94rem,4.128vw,5rem); line-height:1.2; white-space:nowrap; }
#footer .foot__cols, #footer.foot__cols { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--g-gutter); row-gap:36px; border-top:1px solid color-mix(in srgb,#fff 12%,transparent); padding-top:32px; margin-top:48px; }
#footer .foot__col h4, #footer.foot__col h4 { font-family:var(--font-mono); font-size:var(--t-caption); letter-spacing:.12em; text-transform:uppercase; color:var(--eyebrow); margin:0 0 14px; }
#footer .foot__col a, #footer.foot__col a { display:block; color:#dfe6ee; text-decoration:none; font-size:.95rem; padding:5px 0; transition:color .15s; }
#footer .foot__col a:hover, #footer.foot__col a:hover { color:var(--blue); }
#footer .foot__bottom, #footer.foot__bottom { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; margin-top:40px; padding-top:22px; border-top:1px solid color-mix(in srgb,#fff 10%,transparent); }
#footer .foot__meta, #footer.foot__meta, #footer .foot__made, #footer.foot__made, #footer .foot__legal, #footer.foot__legal { font-family:var(--font-mono); font-size:var(--t-micro); letter-spacing:.06em; color:var(--ink-400); text-transform:uppercase; }
#footer .foot__legal a, #footer.foot__legal a { color:#dfe6ee; text-decoration:none; transition:color .15s; }
#footer .foot__legal a:hover, #footer.foot__legal a:hover { color:var(--blue); }
#footer .foot__made, #footer.foot__made { display:inline-flex; align-items:center; gap:7px; }
#footer .foot__made .heart, #footer.foot__made .heart { color:var(--red); font-family:var(--font-emoji); font-size:1.05em; }
#footer .is-preview .scroller, #footer.is-preview .scroller { margin-bottom:0; }
#footer .is-preview .above, #footer.is-preview .above { min-height:42vh; }
#footer .is-preview .foot, #footer.is-preview .foot { position:relative; height:auto; margin-top:0; }
#footer .foot__col, #footer.foot__col { grid-column:span 3; }
@media (max-width:1199px){
#footer .foot__col, #footer.foot__col { grid-column:span 6; }
}
@media (max-width:767px){
#footer .above, #footer.above { min-height:110vh; }
#footer .foot, #footer.foot { min-height:92vh; margin-top:-92vh; }
#footer .foot__word, #footer.foot__word { font-size:max(2.6rem, min(clamp(2.6rem, 17vw, 5rem),
               calc(100cqi / (var(--foot-word-chars, 9) * var(--foot-word-ratio, .66))))); white-space:normal; }
#footer .foot__tag, #footer.foot__tag { font-size:clamp(0.81rem,5.32vw,1.56rem); }
#footer .foot__col, #footer.foot__col { grid-column:span 12; }
#footer .foot__bottom, #footer.foot__bottom { flex-direction:column; align-items:flex-start; }
}

/* ===== page-level overrides (manifest.pageCss) ===== */