/* ===== 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") — */
.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;
}


/* ===== 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-6.html) ===== */
#hero .hero6, #hero.hero6 {
    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 .h6-grid, #hero.h6-grid { margin-top:auto; }
#hero .hero6.is-fitted, #hero.hero6.is-fitted { justify-content:flex-start; padding-top:clamp(76px,10vh,120px); }
#hero .h6-grid, #hero.h6-grid { position:relative; z-index:1; }
#hero .h6-copy, #hero.h6-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; } }
@media (min-width:768px) and (max-width:1199px){
#hero .h6-grid.g-cols > .h6-copy, #hero.h6-grid.g-cols > .h6-copy { grid-column:span 9; }
#hero .rb-label, #hero.rb-label { display:none; }
}
@media (max-width:767px){
#hero .hero6, #hero.hero6 { justify-content:flex-start; padding-top:clamp(86px,16vh,130px); }
#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; }
}

/* ===== portfolio (portfolio/portfolio-1.html) ===== */
#portfolio .pf-sec, #portfolio.pf-sec {
    position:relative;
    padding:var(--pad-section) 0;
    overflow:hidden;
  }
#portfolio .pf-head, #portfolio.pf-head { position:relative; z-index:1; margin-bottom:clamp(48px,7vw,90px); }
#portfolio .pf-eyebrow, #portfolio.pf-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;
  }
#portfolio .pf-title, #portfolio.pf-title {
    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;
  }
#portfolio .pf-rows, #portfolio.pf-rows { position:relative; z-index:1; display:flex; flex-direction:column; gap:clamp(56px,8vw,110px); }
#portfolio .pf-row, #portfolio.pf-row {
    display:grid; grid-template-columns:repeat(12, minmax(0, 1fr));
    column-gap:clamp(28px,5vw,72px); row-gap:var(--space-6); align-items:center;
    text-decoration:none; color:inherit;
  }
#portfolio .pf-row:nth-child(even) .pf-media-col, #portfolio.pf-row:nth-child(even) .pf-media-col { order:2; }
#portfolio .pf-row:nth-child(even) .pf-body, #portfolio.pf-row:nth-child(even) .pf-body { order:1; }
#portfolio .pf-media, #portfolio.pf-media {
    position:relative; aspect-ratio:16/9; width:100%;
    border:1px solid color-mix(in srgb,var(--blue) 26%, var(--line)); border-radius:var(--radius-lg);
    background:
      linear-gradient(160deg, color-mix(in srgb,var(--blue) 8%, var(--surface)) 0%, var(--surface) 80%);
    display:flex; align-items:center; justify-content:center;
    overflow:hidden; transition:border-color .25s, transform .25s;
  }
#portfolio.mode-light .pf-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));
  }
#portfolio .pf-media:not(:has(img[src])):not(:has(video)):not(:has(svg))::before, #portfolio.pf-media:not(:has(img[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%);
  }
#portfolio .pf-media:not(:has(img[src])):not(:has(video)):not(:has(svg))::after, #portfolio.pf-media:not(:has(img[src])):not(:has(video)):not(:has(svg))::after {
    content:"[ ▣ visual · 16:9 ]";
    position:relative; z-index:1;
    font-family:var(--font-mono); font-weight:500; font-size:var(--t-label);
    letter-spacing:.12em; text-transform:uppercase; color:var(--blue-text); white-space:nowrap;
    padding:8px 14px; 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);
  }
#portfolio .pf-media-col, #portfolio.pf-media-col { display:flex; flex-direction:column; gap:var(--space-3); }
#portfolio .pf-label, #portfolio.pf-label {
    display:inline-block; align-self:flex-start;
    font-family:var(--font-mono); font-weight:500; font-size:var(--t-label);
    letter-spacing:.12em; color:var(--blue);
    padding:8px 14px; border:1px solid color-mix(in srgb,var(--blue) 35%,transparent);
    border-radius:var(--radius); background:color-mix(in srgb,var(--ink-950) 35%,transparent);
  }
#portfolio.mode-light .pf-label { background:color-mix(in srgb,var(--surface-2) 60%,transparent); }
#portfolio .pf-row:hover .pf-media, #portfolio.pf-row:hover .pf-media { border-color:color-mix(in srgb,var(--blue) 50%,transparent); }
#portfolio .pf-body, #portfolio.pf-body { display:flex; flex-direction:column; }
#portfolio .pf-meta, #portfolio.pf-meta {
    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);
  }
#portfolio .pf-name, #portfolio.pf-name {
    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-4);
  }
#portfolio .pf-outcome, #portfolio.pf-outcome {
    font-size:var(--t-body-lg); line-height:var(--leading-body); color:var(--muted);
    max-width:46ch; margin:0 0 var(--space-6);
  }
#portfolio .pf-metric, #portfolio.pf-metric {
    font-family:var(--font-display); font-weight:var(--w-black);
    font-size:clamp(2.5rem,5.5vw,4rem); line-height:.95;
    letter-spacing:var(--tracking-display); color:var(--blue);
    margin:0;
  }
#portfolio.mode-light .pf-metric { color:var(--blue); }
#portfolio .pf-metric-l, #portfolio.pf-metric-l {
    font-family:var(--font-mono); font-weight:500; font-size:var(--t-caption);
    letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
    margin:var(--space-3) 0 0;
  }
@media (max-width:1199px){
#portfolio .pf-row, #portfolio.pf-row { column-gap:clamp(24px,4vw,48px); }
}
@media (max-width:767px){
#portfolio .pf-row > [class*="col-"], #portfolio.pf-row > [class*="col-"] { grid-column:1 / -1; }
#portfolio .pf-row, #portfolio.pf-row { row-gap:var(--space-6); }
#portfolio .pf-row:nth-child(even) .pf-media-col, #portfolio.pf-row:nth-child(even) .pf-media-col { order:0; }
#portfolio .pf-row:nth-child(even) .pf-body, #portfolio.pf-row:nth-child(even) .pf-body { order:0; }
#portfolio .pf-outcome, #portfolio.pf-outcome { font-size:var(--t-body); }
}
#portfolio .pf-media > img, #portfolio.pf-media > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* ===== gen-seam-2 (seam/peek-seam-109.html) ===== */
#gen-seam-2 .sm-slice, #gen-seam-2.sm-slice { position:relative; padding: clamp(40px,6vh,72px) var(--pad-inline); }
#gen-seam-2 .lab, #gen-seam-2.lab { font-family:var(--font-mono); font-size:var(--t-label); letter-spacing:.04em; color:var(--muted); }
#gen-seam-2 .nbr-above, #gen-seam-2.nbr-above { background:var(--seam-above); color:var(--seam-above-fg); }
#gen-seam-2 .nbr-below, #gen-seam-2.nbr-below { background:var(--seam-below); color:var(--seam-below-fg); }
#gen-seam-2 .ce, #gen-seam-2.ce { text-align:center; max-width:760px; margin:0 auto; }
#gen-seam-2 .ce .eyebrow, #gen-seam-2.ce .eyebrow { font-family:var(--font-mono); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; opacity:.75; margin:0 0 14px; }
#gen-seam-2 .ce :is(h2:not(.as-h1),h1.as-h2), #gen-seam-2.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; }
#gen-seam-2 .ce :is(h2:not(.as-h1),h1.as-h2) .lite, #gen-seam-2.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; }
#gen-seam-2 .ce .sub, #gen-seam-2.ce .sub { margin:0 auto 26px; font-size:1.02rem; opacity:.88; max-width:52ch; }
#gen-seam-2 .ce .cta, #gen-seam-2.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){
#gen-seam-2 .seam--band, #gen-seam-2.seam--band { padding: clamp(52px,9vw,110px) var(--pad-inline); }
}
@media (max-width:767px){
#gen-seam-2 .ce .cta, #gen-seam-2.ce .cta { width:100%; }
}

/* ===== numbers (stats/stats-1.html) ===== */
#numbers .st-sec, #numbers.st-sec { position:relative; padding:var(--pad-section) 0; overflow:hidden; }
#numbers .st-inner, #numbers.st-inner {
    position:relative; z-index:1; align-items:center;
    row-gap:clamp(28px,5vw,64px);
  }
#numbers .st-eyebrow, #numbers.st-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);
  }
#numbers .st-eyebrow b, #numbers.st-eyebrow b { color:var(--blue); font-weight:500; }
#numbers .st-figure, #numbers.st-figure { container-type:inline-size; }
#numbers .st-big, #numbers.st-big {
    font-family:var(--font-display); font-weight:var(--w-black);
    font-size:min(var(--t-display), 13cqw); line-height:.92; letter-spacing:var(--tracking-display);
    color:var(--blue); margin:0; text-wrap:balance; overflow-wrap:break-word;
    text-transform:uppercase; 
  }
#numbers .st-big sup, #numbers.st-big sup { font-size:.4em; vertical-align:super; font-weight:var(--w-bold); }
#numbers .st-cap, #numbers.st-cap { font-family:var(--font-mono); font-size:var(--t-label); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:var(--space-4) 0 0; }
#numbers .st-claim, #numbers.st-claim {
    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-5); text-wrap:balance;
  }
#numbers .st-body, #numbers.st-body { font-size:var(--t-body-lg); line-height:var(--leading-body); color:var(--muted); margin:0; max-width:52ch; }
#numbers .st-src, #numbers.st-src { font-family:var(--font-mono); font-size:var(--t-micro); letter-spacing:.06em; color:var(--muted); margin:var(--space-5) 0 0; opacity:.8; }
#numbers .st-mini, #numbers.st-mini { display:flex; flex-wrap:wrap; gap:clamp(24px,4vw,48px); margin:var(--space-6) 0 0; }
#numbers .st-mini div, #numbers.st-mini div { display:flex; flex-direction:column; gap:4px; }
#numbers .st-mini b, #numbers.st-mini b { font-family:var(--font-display); font-weight:var(--w-black); font-size:var(--t-h2); color:inherit; line-height:1; }
#numbers .st-mini span, #numbers.st-mini span { font-family:var(--font-mono); font-size:var(--t-micro); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
@media (min-width:1200px){
#numbers .st-inner, #numbers.st-inner { column-gap:clamp(48px,6vw,96px); }
}

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

/* ===== grid (cards/cardgrid-1.html) ===== */
#grid .cg-sec, #grid.cg-sec { position:relative; padding:var(--pad-section) 0; overflow:hidden; }
#grid .cg-inner, #grid.cg-inner { position:relative; z-index:1; }
#grid .cg-head, #grid.cg-head { max-width:64ch; margin:0 0 clamp(40px,6vw,72px); }
#grid .cg-eyebrow, #grid.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);
  }
#grid .cg-eyebrow b, #grid.cg-eyebrow b { color:var(--blue); font-weight:500; }
#grid .cg-h2, #grid.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;
  }
#grid .cg-grid, #grid.cg-grid {  }
#grid .cg-card, #grid.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;
  }
#grid.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);
  }
#grid .cg-card:hover, #grid.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);
  }
#grid.mode-light .cg-card:hover {
    background:linear-gradient(180deg, color-mix(in srgb,var(--blue) 18%, var(--surface-2)) 0%, var(--surface-2) 78%);
  }
#grid .cg-media, #grid.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;
  }
#grid.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)); }
#grid .cg-media:not(:has(img[src]:not([src=""]))):not(:has(video)):not(:has(svg))::before, #grid.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%);
  }
#grid .cg-media:not(:has(img[src]:not([src=""]))):not(:has(video)):not(:has(svg))::after, #grid.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);
  }
#grid .cg-media__tag, #grid.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:var(--blue); padding:6px 12px; border-radius:var(--radius);
    border:1px solid color-mix(in srgb,var(--blue) 35%,transparent);
    background:color-mix(in srgb,var(--ink-950) 35%,transparent);
  }
#grid .cg-media img, #grid.cg-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
#grid .cg--no-thumb .cg-media, #grid.cg--no-thumb .cg-media { display:none; }
#grid .cg-body, #grid.cg-body { display:flex; flex-direction:column; flex:1; padding:clamp(22px,2.6vw,30px); }
#grid .cg-badge, #grid.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);
  }
#grid .cg-title, #grid.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);
  }
#grid .cg-blurb, #grid.cg-blurb { font-size:var(--t-body); line-height:var(--leading-body); color:var(--muted); margin:0; max-width:42ch; }
#grid .cg-stat, #grid.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; }
#grid .cg-stat-n, #grid.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); 
  }
#grid .cg-stat-l, #grid.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);
  }
#grid .cg-cue, #grid.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;
  }
#grid .cg-card:hover .cg-cue, #grid.cg-card:hover .cg-cue { gap:13px; color:var(--link-hover); }
@media (min-width:768px){
#grid .cg--bento .cg-grid > .cg-card:first-child .cg-title, #grid.cg--bento .cg-grid > .cg-card:first-child .cg-title { font-size:var(--t-h2); }
}
@media (max-width:1199px){
#grid .cg--bento .cg-grid > .cg-card:first-child, #grid.cg--bento .cg-grid > .cg-card:first-child { grid-column:1 / -1; }
}
@media (min-width:1200px){
#grid .cg--bento .cg-grid > .cg-card:first-child, #grid.cg--bento .cg-grid > .cg-card:first-child { grid-column:span 8; grid-row:span 2; }
#grid .cg--bento .cg-grid > .cg-card:first-child .cg-body, #grid.cg--bento .cg-grid > .cg-card:first-child .cg-body { justify-content:flex-end; }
}

/* ===== gen-seam-4 (seam/peek-seam-15.html) ===== */
#gen-seam-4 .sm-slice, #gen-seam-4.sm-slice { position:relative; padding: clamp(40px,6vh,72px) var(--pad-inline); }
#gen-seam-4 .lab, #gen-seam-4.lab { font-family:var(--font-mono); font-size:var(--t-label); letter-spacing:.04em; color:var(--muted); }
#gen-seam-4 .nbr-above, #gen-seam-4.nbr-above { background:var(--seam-above); color:var(--seam-above-fg); }
#gen-seam-4 .nbr-below, #gen-seam-4.nbr-below { background:var(--seam-below); color:var(--seam-below-fg); }
#gen-seam-4 .tc, #gen-seam-4.tc { max-width:52rem; margin:0 auto; text-align:center; position:relative; }
#gen-seam-4 .tc::before, #gen-seam-4.tc::before { content:''; position:absolute; inset:-28px -48px; z-index:0; pointer-events:none;
    background:radial-gradient(70% 90% at 50% 50%, var(--white,#fff) 0%, var(--white,#fff) 42%, rgba(255,255,255,0) 78%);
    filter:blur(2px); }
#gen-seam-4 .tc > *, #gen-seam-4.tc > * { position:relative; z-index:1; }
#gen-seam-4 .tc .eyebrow, #gen-seam-4.tc .eyebrow { font-family:var(--font-mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; opacity:.75; margin:0 0 16px; }
#gen-seam-4 .tc .chips, #gen-seam-4.tc .chips { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
#gen-seam-4 .tc .chip, #gen-seam-4.tc .chip { font-family:var(--font-mono); font-size:.82rem; padding:.5rem .9rem; border-radius:999px; border:1px solid color-mix(in srgb, currentColor 26%, transparent); background:color-mix(in srgb, currentColor 8%, var(--seam-band)); }
#gen-seam-4 .swapbtn, #gen-seam-4.swapbtn { position:fixed; top:14px; right:14px; z-index:9; font-family:var(--font-mono); font-size:.72rem; color:var(--muted); background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:8px 12px; cursor:pointer; }
#gen-seam-4 .shapebtn, #gen-seam-4.shapebtn { position:fixed; top:14px; right:190px; z-index:9; font-family:var(--font-mono); font-size:.72rem; color:var(--muted); background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:8px 12px; cursor:pointer; }
#gen-seam-4 .swapbtn:hover, #gen-seam-4.swapbtn:hover, #gen-seam-4 .shapebtn:hover, #gen-seam-4.shapebtn:hover { color:inherit; border-color:var(--muted); }
@media (max-width:1024px){
#gen-seam-4 .seam--band, #gen-seam-4.seam--band { padding: clamp(44px,7vw,90px) var(--pad-inline); }
}
@media (max-width:767px){
#gen-seam-4 .tc .chips, #gen-seam-4.tc .chips { gap:8px; }
#gen-seam-4 .tc .chip, #gen-seam-4.tc .chip { font-size:.76rem; }
}

/* ===== voice (quote/quote-1.html) ===== */
#voice .qt-sec, #voice.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;
  }
#voice .qt-inner, #voice.qt-inner { position:relative; z-index:1; width:100%; }
#voice .g-cols > .qt-body, #voice.g-cols > .qt-body { grid-column:2 / span 10; }
#voice .qt-eyebrow, #voice.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);
  }
#voice .qt-mark, #voice.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;
  }
#voice.mode-light .qt-mark { color:var(--blue-dark); }
#voice .qt-quote, #voice.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;
  }
#voice.mode-dark .qt-quote { color:var(--neutral-lightest); }
#voice.mode-light .qt-quote { color:var(--ink-900); }
#voice .qt-quote .qt-build, #voice.qt-quote .qt-build { font-weight:500; }
#voice .qt-tick, #voice.qt-tick {
    width:34px; height:2px; border-radius:2px; background:var(--blue);
    margin:var(--space-7) auto var(--space-5);
  }
#voice.mode-light .qt-tick { background:var(--blue-dark); }
#voice .qt-attr, #voice.qt-attr {
    font-family:var(--font-mono); font-size:var(--t-body-sm);
    letter-spacing:.02em; color:var(--page-fg); margin:0;
  }
#voice .qt-attr .qt-name, #voice.qt-attr .qt-name { font-weight:500; color:var(--blue); }
#voice.mode-light .qt-attr .qt-name { color:var(--blue-dark); }
#voice .qt-attr .qt-role, #voice.qt-attr .qt-role { color:var(--muted); }
#voice .qt-anim, #voice.qt-anim { opacity:0; transform:translateY(12px); animation:qt-rise .7s cubic-bezier(.2,.7,.2,1) forwards; }
#voice .qt-d1, #voice.qt-d1 {animation-delay:.05s}
#voice .qt-d2, #voice.qt-d2 {animation-delay:.16s}
#voice .qt-d3, #voice.qt-d3 {animation-delay:.30s}
#voice .qt-d4, #voice.qt-d4 {animation-delay:.42s}
@keyframes qt-rise { to { opacity:1; transform:none; } }
@media (max-width:1199px){
#voice .g-cols > .qt-body, #voice.g-cols > .qt-body { grid-column:3 / span 8; }
}
@media (max-width:767px){
#voice .qt-sec, #voice.qt-sec { min-height:520px; padding:clamp(56px,9vh,90px) 0; }
#voice .g-cols > .qt-body, #voice.g-cols > .qt-body { grid-column:1 / -1; }
#voice .qt-mark, #voice.qt-mark { font-size:clamp(3.2rem,18vw,4.5rem); margin-bottom:-.28em; }
#voice .qt-quote, #voice.qt-quote { line-height:1.3; }
#voice .qt-attr, #voice.qt-attr { font-size:var(--t-body-sm); line-height:1.7; }
#voice .qt-attr .qt-role, #voice.qt-attr .qt-role { display:block; }
}
@media (prefers-reduced-motion:reduce){
#voice .qt-anim, #voice.qt-anim { animation:none; opacity:1; transform:none; }
}
#voice .char-cut, #voice.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){
#voice .char-cut, #voice.char-cut { display:block; }
}

/* ===== cta (cta/cta-1.html) ===== */
#cta .cta-band, #cta.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;
  }
#cta .cta-copy, #cta.cta-copy { position:relative; z-index:1; grid-column:3 / span 8; display:flex; flex-direction:column; align-items:center; }
#cta .cta-eyebrow, #cta.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;
  }
#cta .cta-head, #cta.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;
  }
#cta .cta-head .emph, #cta.cta-head .emph { white-space:normal; }
#cta .cta-sub, #cta.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;
  }
#cta .cta-actions, #cta.cta-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:18px; margin-top:var(--space-7); }
#cta .cta-actions .btn-cta, #cta.cta-actions .btn-cta { font-size:1.05rem; padding:.95rem 2rem; }
#cta .cta-link, #cta.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;
  }
#cta .cta-link:hover, #cta.cta-link:hover { color:var(--link-hover); }
#cta .cta-link svg, #cta.cta-link svg { width:15px; height:15px; }
#cta .cta-link:hover, #cta.cta-link:hover { gap:11px; }
#cta .anim, #cta.anim { opacity:0; transform:translateY(14px); animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards; }
#cta .d1, #cta.d1 {animation-delay:.05s}
#cta .d2, #cta.d2 {animation-delay:.14s}
#cta .d3, #cta.d3 {animation-delay:.23s}
#cta .d4, #cta.d4 {animation-delay:.32s}
@keyframes rise { to { opacity:1; transform:none; } }
@media (max-width:1199px){
#cta .cta-inner.g-cols > .cta-copy, #cta.cta-inner.g-cols > .cta-copy { grid-column:2 / span 10; }
#cta .cta-head, #cta.cta-head { font-size:clamp(2.6rem,7vw,4.6rem); }
}
@media (max-width:767px){
#cta .cta-band, #cta.cta-band { padding:clamp(56px,11vh,88px) 0; }
#cta .cta-head, #cta.cta-head { font-size:clamp(2rem,9vw,2.9rem); }
#cta .cta-head .emph, #cta.cta-head .emph { white-space:normal; }
#cta .cta-sub, #cta.cta-sub { font-size:var(--t-body-lg); }
#cta .cta-actions, #cta.cta-actions { flex-direction:column; align-items:stretch; width:100%; max-width:340px; gap:16px; }
#cta .cta-actions .btn-cta, #cta.cta-actions .btn-cta { text-align:center; width:100%; }
#cta .cta-link, #cta.cta-link { justify-content:center; }
}
@media (prefers-reduced-motion:reduce){
#cta .anim, #cta.anim { animation:none; opacity:1; transform:none; }
}
#cta .char-cut, #cta.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){
#cta .char-cut, #cta.char-cut { display:block; }
}

/* ===== 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;
    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:clamp(3rem, 13.2vw, 16rem); 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__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:clamp(2.6rem,17vw,5rem); 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) ===== */
/* nav: sticky over the page, kill the catalog backdrop */
#nav { padding:0; }
#nav .demo-bg { display:none !important; }
#nav .nav { position:sticky; }

/* hero: drop the catalog 'peek' card + scroll cue (stat bar is KEPT). */
#hero .peek { display:none !important; }
#hero .cue { display:none !important; }

/* FOOTER REVEAL composition fix (same as home/how-we-work). */
#footer .above { display:none !important; }
#footer .reveal-shell { z-index:auto !important; }
#footer .foot { z-index:-1 !important; }
#footer .paint::before { background:var(--white); }