/* Price Roll v4 — a team-size pricing calculator as the hero of a page. Drag the slider: the price rolls on odometer
   wheels, the avatars pop, and at each tier the card changes plan, colour and size. Three looks
   (?look=blueprint|clay|synth), each a whole world; inside each look the card takes its tier's colour.

   1 tokens: primitive → tier alias → semantic → component     2 stage, frame, ambient     3 the frame's words
   4 the card and its rows   5 the price (odometer)   6 the team   7 the slider and its bubble   8 the features
   9 the impact   10 footer   11 look A · blueprint   12 look B · clay   13 look C · synth   14 reduced motion

   ---- 1. TOKENS: three layers (plus a component layer) ----------------------------------------------------------
   1a PRIMITIVES (:root). Raw, hand-tuned values with no meaning: one tonal scale 50…950 per hue, three hues per look
        blueprint  --bpc (cyan) --bpm (mint) --bpa (amber) and the paper blues --bp-*, ink --bp-ink*, redline --bp-red
        clay       --clm (mint) --cls (sun) --clb (berry) and the candy avatar colours --candy-*
        synth      --syc (cyan) --syp (pink) --syo (orange), the night --sy-*, the sunset --sun-*
   1b TIER ALIASES ([data-look] .stage[data-tier]). --t-50 … --t-950 point at the tier's scale in this look
        (blueprint: starter cyan · pro mint · team amber; clay: mint · sun · berry; synth: cyan · pink · orange).
        They are registered (@property), so crossing a tier glides every colour that uses them in 0.6 s.
   1c SEMANTIC TOKENS (per look, on .stage, so they resolve against the gliding aliases):
        field    --field-bg --grid-major --grid-minor --glow --on-field --on-field-muted --chip --on-chip --em
        card     --surface --surface-edge --surface-shadow --ink --ink-muted --ink-faint --rule --accent --on-accent
                 --accent-ink --focus
        price    --digit --digit-stroke --digit-glow --well --well-edge --cur-ink --stamp --on-stamp
        slider   --rail --fill --zone-1/2/3 --tick --tick-ink --thumb --thumb-edge --thumb-core --bubble --on-bubble
                 --bubble-edge
        controls --seg --seg-edge --seg-ink --seg-on --on-seg-on --check --on-check --tag-1/2 --on-tag-1/2
        team     --av-1…6 --on-av --more --on-more
        frame    --pill --pill-edge --on-pill --on-pill-muted --pill-icon --on-pill-icon --ring --lockup
        impact   --spark-1…4 --fx-ring
      On <html>: --page (behind the stage; app.js also gives it to <meta name="theme-color">).
   1d COMPONENT TOKENS: each component maps the semantic tokens it uses to its own names (.card { --card-bg … }).
   Component rules (sections 2–10) use only component or semantic tokens. The exceptions are transparency helpers:
   color-mix(… N%, transparent) and the `transparent` keyword. Look sections (11–13) shape parts, still with tokens. */

@property --t-50  { syntax: '<color>'; inherits: true; initial-value: #EEFCFF; }
@property --t-100 { syntax: '<color>'; inherits: true; initial-value: #D8F7FF; }
@property --t-200 { syntax: '<color>'; inherits: true; initial-value: #A8EEFF; }
@property --t-300 { syntax: '<color>'; inherits: true; initial-value: #6FE2FF; }
@property --t-400 { syntax: '<color>'; inherits: true; initial-value: #3FD3FA; }
@property --t-500 { syntax: '<color>'; inherits: true; initial-value: #18B8E6; }
@property --t-600 { syntax: '<color>'; inherits: true; initial-value: #0E8FBA; }
@property --t-700 { syntax: '<color>'; inherits: true; initial-value: #0A6A8C; }
@property --t-800 { syntax: '<color>'; inherits: true; initial-value: #064A63; }
@property --t-900 { syntax: '<color>'; inherits: true; initial-value: #032C3B; }
@property --t-950 { syntax: '<color>'; inherits: true; initial-value: #021A24; }

/* 1a · primitives */
:root {
  --sans: 'Geist', -apple-system, system-ui, sans-serif; --serif: 'Instrument Serif', Georgia, serif;
  --mono: 'Space Mono', ui-monospace, monospace; --round: 'Fredoka', 'Geist', system-ui, sans-serif; --neon: 'Tilt Neon', 'Geist', system-ui, sans-serif;
  --white: #FFFFFF; --black: #000000;

  /* blueprint: paper blues, line, ink, redline, and three tier hues */
  --bp-950: #031038; --bp-900: #05184A; --bp-850: #07205C; --bp-800: #0A2A70; --bp-750: #0C3382; --bp-700: #0F3C94; --bp-600: #1A52B8;
  --bp-line: #9FCFFF; --bp-ink: #EEF7FF; --bp-ink-2: #B9D5F7; --bp-ink-3: #8FB3E3; --bp-red: #FF9A8F; --bp-violet: #C3B2FF;
  --bpc-50: #EEFCFF; --bpc-100: #D8F7FF; --bpc-200: #A8EEFF; --bpc-300: #6FE2FF; --bpc-400: #3FD3FA; --bpc-500: #18B8E6;
  --bpc-600: #0E8FBA; --bpc-700: #0A6A8C; --bpc-800: #064A63; --bpc-900: #032C3B; --bpc-950: #021A24;
  --bpm-50: #EEFFF5; --bpm-100: #D9FFEB; --bpm-200: #A9FFD0; --bpm-300: #72F7AE; --bpm-400: #3FE88E; --bpm-500: #1FC772;
  --bpm-600: #149A57; --bpm-700: #0E7041; --bpm-800: #094B2C; --bpm-900: #052C1A; --bpm-950: #031A10;
  --bpa-50: #FFF9E8; --bpa-100: #FFF2C9; --bpa-200: #FFE38F; --bpa-300: #FFD15A; --bpa-400: #FFBE2E; --bpa-500: #F2A10F;
  --bpa-600: #C27A06; --bpa-700: #8F5703; --bpa-800: #5E3902; --bpa-900: #352001; --bpa-950: #1E1200;

  /* clay: three saturated candy hues, and the avatars' candy set */
  --clm-50: #ECFFF7; --clm-100: #CFFAE9; --clm-200: #9DF0D3; --clm-300: #5FE0B5; --clm-400: #2CC898; --clm-500: #12A580;
  --clm-600: #0B7D66; --clm-700: #075F4E; --clm-800: #054537; --clm-900: #032B23; --clm-950: #021A15;
  --cls-50: #FFFBEA; --cls-100: #FFF1C2; --cls-200: #FFE08A; --cls-300: #FFCB4D; --cls-400: #FFB224; --cls-500: #F08C0C;
  --cls-600: #B05600; --cls-700: #8A3F00; --cls-800: #622C00; --cls-900: #401C00; --cls-950: #261000;
  --clb-50: #FFF0F7; --clb-100: #FFD9EB; --clb-200: #FFB3D6; --clb-300: #FF85BD; --clb-400: #F95BA3; --clb-500: #E2368A;
  --clb-600: #B81E6C; --clb-700: #8E1453; --clb-800: #650E3B; --clb-900: #420826; --clb-950: #2A0418;
  --candy-orange: #FF9461; --candy-sky: #6CCBFF; --candy-lilac: #BF97FF; --candy-yellow: #FFD84D; --candy-mint: #59E6B2; --candy-pink: #FF7DB8;
  --candy-ink: #1D1033; --tomato: #C4211A;

  /* synth: the night, the sunset, three neon hues */
  --sy-950: #07010F; --sy-900: #0E0322; --sy-850: #150530; --sy-800: #1D0840; --sy-700: #2A0B57; --sy-600: #3C1072;
  --sy-ink: #FFF4FB; --sy-ink-2: #E6D4F7; --sy-ink-3: #BFA6DE;
  --sun-1: #FFE66B; --sun-2: #FFA03C; --sun-3: #FF3D8B; --sun-4: #B81EFF; --neon-yellow: #FFE14D;
  --syc-50: #E9FEFF; --syc-100: #C8FBFC; --syc-200: #8FF4F6; --syc-300: #55EAEE; --syc-400: #2DE2E6; --syc-500: #14BFC4;
  --syc-600: #0C8E93; --syc-700: #086467; --syc-800: #053F42; --syc-900: #032426; --syc-950: #021617;
  --syp-50: #FFEAF5; --syp-100: #FFCCE6; --syp-200: #FF9CCD; --syp-300: #FF66B3; --syp-400: #FF2E97; --syp-500: #E3107C;
  --syp-600: #B00A60; --syp-700: #7D0745; --syp-800: #4E042B; --syp-900: #2C0218; --syp-950: #1A010E;
  --syo-50: #FFF3E5; --syo-100: #FFE0BD; --syo-200: #FFC285; --syo-300: #FFA44D; --syo-400: #FF8A1E; --syo-500: #E86E05;
  --syo-600: #B45303; --syo-700: #7F3A02; --syo-800: #4F2401; --syo-900: #2D1500; --syo-950: #1A0C00;
}
[data-look="blueprint"] { --page: var(--bp-950); }
[data-look="clay"] { --page: var(--clm-800); }
[data-look="synth"] { --page: var(--sy-950); }

/* 1b · tier aliases */
[data-look="blueprint"] :is(.stage[data-tier="starter"], .cb1) { --t-50: var(--bpc-50); --t-100: var(--bpc-100); --t-200: var(--bpc-200); --t-300: var(--bpc-300); --t-400: var(--bpc-400); --t-500: var(--bpc-500); --t-600: var(--bpc-600); --t-700: var(--bpc-700); --t-800: var(--bpc-800); --t-900: var(--bpc-900); --t-950: var(--bpc-950); }
[data-look="blueprint"] :is(.stage[data-tier="pro"], .cb2) { --t-50: var(--bpm-50); --t-100: var(--bpm-100); --t-200: var(--bpm-200); --t-300: var(--bpm-300); --t-400: var(--bpm-400); --t-500: var(--bpm-500); --t-600: var(--bpm-600); --t-700: var(--bpm-700); --t-800: var(--bpm-800); --t-900: var(--bpm-900); --t-950: var(--bpm-950); }
[data-look="blueprint"] :is(.stage[data-tier="team"], .cb3) { --t-50: var(--bpa-50); --t-100: var(--bpa-100); --t-200: var(--bpa-200); --t-300: var(--bpa-300); --t-400: var(--bpa-400); --t-500: var(--bpa-500); --t-600: var(--bpa-600); --t-700: var(--bpa-700); --t-800: var(--bpa-800); --t-900: var(--bpa-900); --t-950: var(--bpa-950); }
[data-look="clay"] :is(.stage[data-tier="starter"], .cb1) { --t-50: var(--clm-50); --t-100: var(--clm-100); --t-200: var(--clm-200); --t-300: var(--clm-300); --t-400: var(--clm-400); --t-500: var(--clm-500); --t-600: var(--clm-600); --t-700: var(--clm-700); --t-800: var(--clm-800); --t-900: var(--clm-900); --t-950: var(--clm-950); }
[data-look="clay"] :is(.stage[data-tier="pro"], .cb2) { --t-50: var(--cls-50); --t-100: var(--cls-100); --t-200: var(--cls-200); --t-300: var(--cls-300); --t-400: var(--cls-400); --t-500: var(--cls-500); --t-600: var(--cls-600); --t-700: var(--cls-700); --t-800: var(--cls-800); --t-900: var(--cls-900); --t-950: var(--cls-950); }
[data-look="clay"] :is(.stage[data-tier="team"], .cb3) { --t-50: var(--clb-50); --t-100: var(--clb-100); --t-200: var(--clb-200); --t-300: var(--clb-300); --t-400: var(--clb-400); --t-500: var(--clb-500); --t-600: var(--clb-600); --t-700: var(--clb-700); --t-800: var(--clb-800); --t-900: var(--clb-900); --t-950: var(--clb-950); }
[data-look="synth"] :is(.stage[data-tier="starter"], .cb1) { --t-50: var(--syc-50); --t-100: var(--syc-100); --t-200: var(--syc-200); --t-300: var(--syc-300); --t-400: var(--syc-400); --t-500: var(--syc-500); --t-600: var(--syc-600); --t-700: var(--syc-700); --t-800: var(--syc-800); --t-900: var(--syc-900); --t-950: var(--syc-950); }
[data-look="synth"] :is(.stage[data-tier="pro"], .cb2) { --t-50: var(--syp-50); --t-100: var(--syp-100); --t-200: var(--syp-200); --t-300: var(--syp-300); --t-400: var(--syp-400); --t-500: var(--syp-500); --t-600: var(--syp-600); --t-700: var(--syp-700); --t-800: var(--syp-800); --t-900: var(--syp-900); --t-950: var(--syp-950); }
[data-look="synth"] :is(.stage[data-tier="team"], .cb3) { --t-50: var(--syo-50); --t-100: var(--syo-100); --t-200: var(--syo-200); --t-300: var(--syo-300); --t-400: var(--syo-400); --t-500: var(--syo-500); --t-600: var(--syo-600); --t-700: var(--syo-700); --t-800: var(--syo-800); --t-900: var(--syo-900); --t-950: var(--syo-950); }
.stage { transition: --t-50 .45s, --t-100 .45s, --t-200 .45s, --t-300 .45s, --t-400 .45s, --t-500 .45s, --t-600 .45s, --t-700 .45s, --t-800 .45s, --t-900 .45s, --t-950 .45s; }

/* 1c · semantic tokens, per look */
/* A · BLUEPRINT: a technical drawing. Paper-blue sheet, a cyan line grid, white-cyan ink, outlined digits, a redline stamp */
[data-look="blueprint"] .stage {
  --field-bg: radial-gradient(120% 72% at 50% 44%, var(--bp-750), var(--bp-850) 58%, var(--bp-950));
  --grid-major: color-mix(in srgb, var(--bp-line) 15%, transparent); --grid-minor: color-mix(in srgb, var(--bp-line) 6%, transparent);
  --glow: color-mix(in oklab, var(--t-400) 26%, transparent);
  --on-field: var(--bp-ink); --on-field-muted: var(--bp-ink-2); --chip: var(--t-300); --on-chip: var(--bp-950);
  --em: linear-gradient(90deg, var(--t-200), var(--t-300) 60%, var(--t-400));
  --ink: var(--bp-ink); --ink-muted: var(--bp-ink-2); --ink-faint: var(--bp-ink-3); --rule: color-mix(in srgb, var(--bp-line) 34%, transparent);
  --accent: var(--t-300); --on-accent: var(--bp-950); --accent-ink: var(--t-200); --focus: var(--white);
  --digit: color-mix(in srgb, var(--t-300) 16%, transparent); --digit-stroke: var(--t-200); --digit-glow: color-mix(in srgb, var(--t-400) 60%, transparent);
  --well: color-mix(in srgb, var(--bp-950) 45%, transparent); --well-edge: color-mix(in srgb, var(--t-300) 50%, transparent); --cur-ink: var(--t-200);
  --stamp: var(--bp-red); --on-stamp: var(--bp-red);
  --rail: var(--bp-line); --fill: var(--t-100); --zone-1: var(--bpc-400); --zone-2: var(--bpm-400); --zone-3: var(--bpa-400);
  --tick: color-mix(in srgb, var(--bp-line) 70%, transparent); --tick-ink: var(--bp-ink);
  --thumb: color-mix(in oklab, var(--t-400) 30%, var(--bp-850)); --thumb-edge: var(--t-200); --thumb-core: var(--t-300);
  --bubble: var(--bp-950); --on-bubble: var(--bp-ink); --bubble-edge: var(--t-300);
  --seg: color-mix(in srgb, var(--bp-950) 55%, transparent); --seg-edge: color-mix(in srgb, var(--bp-line) 60%, transparent); --seg-ink: var(--bp-ink-2);
  --seg-on: var(--t-300); --on-seg-on: var(--bp-950);
  --check: var(--t-300); --on-check: var(--bp-950);
  --tag-1: var(--bpm-300); --on-tag-1: var(--bp-950); --tag-2: var(--bpa-300); --on-tag-2: var(--bp-950);
  --av-1: var(--bpc-300); --av-2: var(--bpa-300); --av-3: var(--bpm-300); --av-4: var(--white); --av-5: var(--bp-red); --av-6: var(--bp-violet);
  --on-av: var(--bp-950); --more: var(--bp-950); --on-more: var(--bp-ink);
  --pill: color-mix(in srgb, var(--bp-950) 72%, transparent); --pill-edge: color-mix(in srgb, var(--bp-line) 42%, transparent);
  --on-pill: var(--bp-ink); --on-pill-muted: var(--bp-ink-2); --pill-icon: var(--t-300); --on-pill-icon: var(--bp-950);
  --ring: var(--bp-line); --lockup: none;
  --spark-1: var(--t-200); --spark-2: var(--white); --spark-3: var(--t-400); --spark-4: var(--bp-red); --fx-ring: var(--t-300);
}
/* the card surface: declared on the stage and on each tier's surface layer (.cb1-3), so every layer resolves it
   against its own tier and a tier change is an opacity cross-fade on the compositor, not a repaint per frame */
[data-look="blueprint"] :is(.stage, .cb) {
  --surface: linear-gradient(180deg, color-mix(in srgb, var(--bp-700) 82%, transparent), color-mix(in srgb, var(--bp-800) 90%, transparent) 70%);
  --surface-edge: var(--t-300); --surface-shadow: 0 30px 60px -28px var(--bp-950);
}
/* B · CLAY: soft 3D clay. The world takes the tier's saturated colour; a puffy pastel card, wells, a squishy ball */
[data-look="clay"] .stage {
  --field-bg: none;
  --field-starter: radial-gradient(389px 353px at 916px 930px, color-mix(in oklab, var(--clm-500) 70%, var(--clm-600)), transparent 72%),
                   linear-gradient(180deg, var(--clm-600) 0, var(--clm-600) 730px, var(--clm-700) 1053px, var(--clm-800) 1268px);
  --field-pro: radial-gradient(389px 353px at 916px 930px, color-mix(in oklab, var(--cls-500) 70%, var(--cls-600)), transparent 72%),
               linear-gradient(180deg, var(--cls-600) 0, var(--cls-600) 730px, var(--cls-700) 1053px, var(--cls-800) 1268px);
  --field-team: radial-gradient(389px 353px at 916px 930px, color-mix(in oklab, var(--clb-500) 70%, var(--clb-600)), transparent 72%),
                linear-gradient(180deg, var(--clb-600) 0, var(--clb-600) 730px, var(--clb-700) 1053px, var(--clb-800) 1268px);
  --grid-major: transparent; --grid-minor: transparent; --glow: color-mix(in oklab, var(--t-300) 40%, transparent);
  --on-field: var(--white); --on-field-muted: var(--t-50); --chip: var(--white); --on-chip: var(--t-800);
  --em: linear-gradient(180deg, var(--t-100), var(--t-200));
  --ink: var(--t-950); --ink-muted: var(--t-800); --ink-faint: var(--t-700); --rule: color-mix(in oklab, var(--t-400) 55%, transparent);
  --accent: var(--t-400); --on-accent: var(--t-950); --accent-ink: var(--t-800); --focus: var(--t-900);
  --digit: var(--white); --digit-stroke: transparent; --digit-glow: var(--t-800);
  --well: linear-gradient(180deg, var(--t-700), var(--t-600) 55%, var(--t-500)); --well-edge: var(--t-800); --cur-ink: var(--t-700);
  --stamp: var(--tomato); --on-stamp: var(--white);
  --rail: color-mix(in oklab, var(--t-700) 62%, var(--t-400)); --fill: linear-gradient(180deg, var(--white), var(--t-100) 55%, var(--t-200)); --zone-1: var(--clm-300); --zone-2: var(--cls-300); --zone-3: var(--clb-300);
  --tick: var(--t-500); --tick-ink: var(--t-800);
  --thumb: radial-gradient(circle at 34% 28%, var(--t-100) 0%, var(--t-400) 26%, var(--t-600) 62%, var(--t-800) 100%);
  --thumb-edge: var(--t-600); --thumb-core: var(--t-500);
  --bubble: var(--t-700); --on-bubble: var(--white); --bubble-edge: var(--t-800);
  --seg: var(--t-100); --seg-edge: var(--t-600); --seg-ink: var(--t-800); --seg-on: var(--t-700); --on-seg-on: var(--white);
  --check: var(--t-600); --on-check: var(--white);
  --tag-1: var(--cls-300); --on-tag-1: var(--cls-950); --tag-2: var(--clb-300); --on-tag-2: var(--clb-950);
  --av-1: var(--candy-orange); --av-2: var(--candy-sky); --av-3: var(--candy-lilac); --av-4: var(--candy-yellow); --av-5: var(--candy-mint); --av-6: var(--candy-pink);
  --on-av: var(--candy-ink); --more: var(--t-700); --on-more: var(--white);
  --pill: var(--white); --pill-edge: var(--white); --on-pill: var(--t-950); --on-pill-muted: var(--t-700);
  --pill-icon: var(--t-600); --on-pill-icon: var(--white); --ring: var(--white); --lockup: none;
  --spark-1: var(--white); --spark-2: var(--t-200); --spark-3: var(--cls-300); --spark-4: var(--clb-300); --fx-ring: var(--white);
}
/* the card surface: declared on the stage and on each tier's surface layer (.cb1-3), so every layer resolves it
   against its own tier and a tier change is an opacity cross-fade on the compositor, not a repaint per frame */
[data-look="clay"] :is(.stage, .cb) {
  /* the clay's soft shading is painted with gradients, not blurred inset shadows: the card re-rasters whenever it
     grows or changes colour, and large blurs made that cost 20+ ms a frame at 1080 x 1920 */
  --surface: radial-gradient(90% 46% at 22% 0%, color-mix(in srgb, var(--white) 60%, transparent), transparent 70%),
             linear-gradient(180deg, transparent calc(100% - 46px), color-mix(in oklab, var(--t-300) 60%, transparent)),
             linear-gradient(90deg, color-mix(in srgb, var(--white) 40%, transparent), transparent 22px),
             linear-gradient(165deg, var(--t-50) 0%, var(--t-100) 42%, var(--t-200) 100%);
  --surface-edge: color-mix(in srgb, var(--white) 70%, transparent);
  --surface-shadow: inset 0 3px 0 color-mix(in srgb, var(--white) 95%, transparent), inset 0 -5px 0 color-mix(in oklab, var(--t-300) 70%, transparent),
                    0 12px 0 -2px color-mix(in oklab, var(--t-400) 70%, var(--t-600)), 0 30px 26px -20px var(--t-950);
}
/* C · SYNTH: a synthwave night. A neon card over a running perspective grid; the thumb is the striped sun */
/* (unregistered, so they swap at once: one re-raster of the floor at the impact instead of 36 during a glide) */
[data-look="synth"] .stage[data-tier="starter"] { --sky-tier: var(--syc-400); --sky-foot: var(--syc-600); }
[data-look="synth"] .stage[data-tier="pro"] { --sky-tier: var(--syp-400); --sky-foot: var(--syp-600); }
[data-look="synth"] .stage[data-tier="team"] { --sky-tier: var(--syo-400); --sky-foot: var(--syo-600); }
[data-look="synth"] .stage {
  --field-bg: linear-gradient(180deg, var(--sy-950), var(--sy-950));
  --grid-major: var(--sky-tier); --grid-minor: transparent; --glow: color-mix(in oklab, var(--t-500) 30%, transparent);
  --on-field: var(--sy-ink); --on-field-muted: var(--sy-ink-2); --chip: var(--t-400); --on-chip: var(--sy-950);
  --em: linear-gradient(180deg, var(--sun-1) 10%, var(--sun-2) 50%, var(--sun-3) 90%);
  --ink: var(--sy-ink); --ink-muted: var(--sy-ink-2); --ink-faint: var(--sy-ink-3); --rule: color-mix(in oklab, var(--t-400) 45%, transparent);
  --accent: var(--t-400); --on-accent: var(--sy-950); --accent-ink: var(--t-200); --focus: var(--neon-yellow);
  --digit: var(--t-50); --digit-stroke: transparent; --digit-glow: var(--t-400);
  --well: transparent; --well-edge: transparent; --cur-ink: var(--t-200);
  --stamp: var(--neon-yellow); --on-stamp: var(--neon-yellow);
  --rail: var(--sy-700); --fill: var(--t-50); --zone-1: var(--syc-600); --zone-2: var(--syp-500); --zone-3: var(--syo-600);
  --tick: color-mix(in oklab, var(--t-300) 70%, transparent); --tick-ink: var(--sy-ink-3);
  --thumb: linear-gradient(180deg, var(--sun-1) 0%, var(--sun-2) 45%, var(--sun-3) 100%); --thumb-edge: var(--sun-1); --thumb-core: var(--sun-3);
  --bubble: var(--sy-950); --on-bubble: var(--t-100); --bubble-edge: var(--t-400);
  --seg: var(--sy-950); --seg-edge: color-mix(in oklab, var(--t-400) 60%, transparent); --seg-ink: var(--sy-ink-2); --seg-on: var(--t-400); --on-seg-on: var(--sy-950);
  --check: var(--t-400); --on-check: var(--sy-950);
  --tag-1: var(--syp-400); --on-tag-1: var(--sy-950); --tag-2: var(--syo-400); --on-tag-2: var(--sy-950);
  --av-1: var(--syc-400); --av-2: var(--syp-400); --av-3: var(--syo-400); --av-4: var(--neon-yellow); --av-5: var(--sy-ink); --av-6: #C69BFF;
  --on-av: var(--sy-950); --more: var(--sy-950); --on-more: var(--t-200);
  --pill: color-mix(in srgb, var(--sy-950) 84%, transparent); --pill-edge: color-mix(in oklab, var(--t-400) 50%, transparent);
  --on-pill: var(--sy-ink); --on-pill-muted: var(--sy-ink-2); --pill-icon: linear-gradient(135deg, var(--sun-1), var(--sun-3)); --on-pill-icon: var(--sy-950);
  --ring: var(--t-300); --lockup: none;
  --spark-1: var(--t-200); --spark-2: var(--sun-1); --spark-3: var(--t-400); --spark-4: var(--sun-3); --fx-ring: var(--t-300);
}
/* the card surface: declared on the stage and on each tier's surface layer (.cb1-3), so every layer resolves it
   against its own tier and a tier change is an opacity cross-fade on the compositor, not a repaint per frame */
[data-look="synth"] :is(.stage, .cb) {
  --surface: linear-gradient(180deg, color-mix(in srgb, var(--sy-850) 90%, transparent), color-mix(in srgb, var(--sy-900) 94%, transparent));
  --surface-edge: var(--t-400);
  --surface-shadow: 0 0 0 1px var(--t-300), 0 0 16px color-mix(in oklab, var(--t-500) 55%, transparent), inset 0 0 0 3px color-mix(in oklab, var(--t-600) 22%, transparent);
}

/* 1d · component tokens: each component names what it uses */
.title    { --title-ink: var(--on-field); --title-muted: var(--on-field-muted); --title-em: var(--em); --title-chip: var(--chip); --title-on-chip: var(--on-chip); }
.card     { --card-edge: var(--surface-edge); --card-ink: var(--ink);
            --card-muted: var(--ink-muted); --card-faint: var(--ink-faint); --card-rule: var(--rule); --card-flash: var(--accent); }
.price    { --price-digit: var(--digit); --price-stroke: var(--digit-stroke); --price-glow: var(--digit-glow); --price-well: var(--well);
            --price-well-edge: var(--well-edge); --price-cur: var(--cur-ink); --price-per: var(--ink-muted); }
.stamp    { --stamp-ink: var(--on-stamp); --stamp-bg: var(--stamp); }
.billing  { --sw-bg: var(--seg); --sw-edge: var(--seg-edge); --sw-ink: var(--seg-ink); --sw-thumb: var(--seg-on); --sw-on: var(--on-seg-on); --sw-focus: var(--focus); }
.slider   { --sl-rail: var(--rail); --sl-fill: var(--fill); --sl-zone-1: var(--zone-1); --sl-zone-2: var(--zone-2); --sl-zone-3: var(--zone-3);
            --sl-tick: var(--tick); --sl-thumb: var(--thumb); --sl-thumb-edge: var(--thumb-edge); --sl-thumb-core: var(--thumb-core); --sl-focus: var(--focus); }
.tick-labels { --tl-ink: var(--tick-ink); }
.bubble   { --bub-bg: var(--bubble); --bub-ink: var(--on-bubble); --bub-edge: var(--bubble-edge); }
.feats    { --ft-ink: var(--ink); --ft-check: var(--check); --ft-on-check: var(--on-check); }
.team     { --tm-ink: var(--on-av); --tm-more: var(--more); --tm-on-more: var(--on-more); }
.tutorial { --pill-bg: var(--pill); --pill-line: var(--pill-edge); --pill-ink: var(--on-pill); --pill-dim: var(--on-pill-muted); --pill-ic: var(--pill-icon); --pill-on-ic: var(--on-pill-icon); }
.credits  { --credit-ink: var(--on-field); --credit-muted: var(--on-field-muted); --credit-ring: var(--ring); }
.fx       { --fx-1: var(--spark-1); --fx-2: var(--spark-2); --fx-3: var(--spark-3); --fx-4: var(--spark-4); --fx-r: var(--fx-ring); }

/* ---- 2. the stage, the frame, ambient ---- */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--sans); background: var(--page);
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; overflow: hidden;
}
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.stage { position: relative; height: 100dvh; display: grid; place-items: center; overflow: hidden; background: var(--field-bg), var(--page); color: var(--on-field); }
.frame { position: relative; width: 432px; height: 768px; flex: none; transform: scale(calc(var(--k, 1) * var(--bump, 1))); }
.amb { position: absolute; inset: 0; pointer-events: none; }
.amb > * { display: none; position: absolute; }

/* ---- 3. the frame's words ---- */
.title { position: absolute; top: 30px; left: 0; right: 0; text-align: center; z-index: 1; color: var(--title-ink); }
.series {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 0 0 -4px; font-size: 11px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--title-muted);
}
.series b { display: inline-grid; place-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11px; letter-spacing: .04em; color: var(--title-on-chip); background: var(--title-chip); }
.title h1 { margin: 0; height: 72px; font-size: 44px; font-weight: 700; line-height: 72px; letter-spacing: -.05em; white-space: nowrap; }
.title h1 em {
  font-family: var(--serif); font-weight: 400; font-style: italic; font-size: 1.14em; line-height: 50px; letter-spacing: -.02em; padding: 0 .1em;
  background: var(--title-em); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hint { margin: -7px 0 0; height: 20px; line-height: 20px; font-size: 14px; font-weight: 500; color: var(--title-muted); }

/* ---- 4. the card: 392 wide, its height springs with the plan (app.js). Rows sit at fixed tops. ---- */
.calc { position: absolute; inset: 0; }
.card { position: absolute; left: 20px; top: 146px; width: 392px; height: 390px; color: var(--card-ink); border-radius: var(--card-r, 28px); font-family: var(--f-ui); }
.card-bg { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
/* one surface per tier, each resolved against its own tier's colours; a tier change cross-fades them */
.cb { position: absolute; inset: 0; border-radius: inherit; background: var(--surface); box-shadow: var(--surface-shadow); border: 1.5px solid var(--surface-edge);
      opacity: 0; visibility: hidden; transition: opacity .45s, visibility 0s .45s; will-change: opacity; }
.stage[data-tier="starter"] .cb1, .stage[data-tier="pro"] .cb2, .stage[data-tier="team"] .cb3 { opacity: 1; visibility: visible; transition: opacity .45s, visibility 0s; }
.card-flash {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; will-change: opacity;
  box-shadow: 0 0 0 2px var(--card-flash), 0 0 34px 4px color-mix(in oklab, var(--card-flash) 70%, transparent), inset 0 0 40px color-mix(in oklab, var(--card-flash) 40%, transparent);
}
.head { position: absolute; left: 18px; right: 18px; top: 13px; height: 40px; display: flex; align-items: center; justify-content: space-between; }
.plan { margin: 0; height: 40px; display: flex; align-items: center; min-width: 0; }
.plan-name { position: relative; display: inline-block; height: 40px; white-space: nowrap; perspective: 260px; font-family: var(--f-plan); font-size: var(--plan-size, 28px); line-height: 40px; font-weight: 700; letter-spacing: var(--plan-track, -.02em); color: var(--card-ink); }
.slot { position: relative; display: inline-block; height: 40px; vertical-align: top; }
.face { position: absolute; left: 0; top: 0; height: 40px; transform-origin: 50% 50% -12px; backface-visibility: hidden; white-space: pre; }
.face.measure { visibility: hidden; }

/* the billing switch: native radios, a sliding thumb (it stretches as it runs) */
.billing { position: relative; display: grid; grid-template-columns: 74px 74px; height: 34px; padding: 2px; border-radius: var(--seg-r, 999px); background: var(--sw-bg); box-shadow: inset 0 0 0 1.2px var(--sw-edge); flex: none; }
.seg-thumb { position: absolute; left: 2px; top: 2px; width: 74px; height: 30px; border-radius: var(--seg-r, 999px); background: var(--sw-thumb); transform-origin: 0 50%; }
.seg { position: relative; display: grid; place-items: center; height: 30px; border-radius: var(--seg-r, 999px); cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--sw-ink); transition: color .2s; }
.seg.is-on { color: var(--sw-on); }
.seg input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.seg:has(input:focus-visible) { outline: 2.5px solid var(--sw-focus); outline-offset: 2px; }
.seg-t { position: relative; pointer-events: none; }
.rule { position: absolute; left: 18px; right: 18px; top: 324px; height: 1px; background: var(--card-rule); }
.meta { position: absolute; left: 18px; right: 18px; top: 148px; height: 18px; margin: 0; font-size: 13px; line-height: 18px; white-space: nowrap; color: var(--card-muted); }
.meta .pp { color: var(--card-ink); font-weight: 700; }
.meta .sep { font-style: normal; margin: 0 7px; }

/* ---- 5. the price: "$", the dollar wheels, the cents (yearly, Starter and Team), "/mo", and the stamp ---- */
.price { position: absolute; left: 18px; right: 18px; top: 60px; height: 84px; display: flex; align-items: flex-start; }
.cur { font-family: var(--f-num); font-size: 30px; line-height: 48px; height: 48px; margin: -2px 4px 0 0; color: var(--price-cur); font-weight: 700; }
.odo { display: flex; flex: none; }
.dollars { --cw: 52px; --dh: 84px; height: 84px; font-family: var(--f-num); font-size: var(--num-size, 76px); font-weight: 700; color: var(--price-digit); }
.ocol { position: relative; height: var(--dh); flex: none; }
.owin { display: block; position: relative; width: calc(var(--cw) - var(--gap, 0px)); height: var(--dh); margin-left: calc(var(--gap, 0px) / 2); overflow: hidden; }
.ostrip { position: absolute; left: 0; top: 0; width: 100%; display: flex; flex-direction: column; }
.ostrip i { display: block; height: var(--dh); line-height: var(--dh); text-align: center; font-style: normal; }
.ostrip.ghost { opacity: 0; }
.ocol.is-moving .ostrip { will-change: transform; }
.ostreak { position: absolute; left: 50%; top: 14%; width: 3px; height: 72%; margin-left: -1.5px; border-radius: 2px; opacity: 0; background: linear-gradient(transparent, currentColor, transparent); pointer-events: none; }
.unit { display: flex; flex-direction: column; justify-content: flex-end; height: 84px; margin-left: 6px; }
.unit.has-cents { justify-content: space-between; }
.cents { display: flex; align-items: flex-start; height: 34px; overflow: hidden; font-family: var(--f-num); font-weight: 700; color: var(--price-digit); }
.cents .dot { display: block; flex: none; height: 34px; overflow: hidden; font-style: normal; font-size: 28px; line-height: 34px; padding: 0 1px; }
.cents-odo { --cw: 19px; --dh: 34px; font-size: 28px; }
.per { font-size: 14px; font-weight: 600; line-height: 18px; margin-bottom: 8px; color: var(--price-per); white-space: nowrap; }
/* the stamp, 88 × 46, inside the price row's right end (its rotated box stays inside the card) */
.stamp { position: absolute; right: 6px; top: 14px; width: 88px; height: 46px; pointer-events: none; display: none; }
.stamp-in {
  display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%;
  border-radius: 6px; color: var(--stamp-ink); box-shadow: inset 0 0 0 2.5px var(--stamp-ink), inset 0 0 0 5px transparent, inset 0 0 0 6.2px var(--stamp-ink);
  text-transform: uppercase; font-family: var(--f-ui);
}
.stamp-in b { display: block; height: 22px; font-size: 15px; line-height: 22px; letter-spacing: .02em; font-weight: 800; }
.stamp-in small { display: block; height: 12px; font-size: 8.5px; line-height: 12px; margin-top: 0; letter-spacing: .06em; font-weight: 700; }

/* ---- 6. the team: avatars on springs, then "+N" ---- */
.team { position: absolute; left: 18px; top: 178px; width: 356px; height: 32px; }
.av, .more { position: absolute; left: 0; top: 2px; height: 28px; display: grid; place-items: center; transform-origin: 50% 60%; }
.av { width: 28px; border-radius: 50%; font-size: 10px; font-weight: 700; letter-spacing: .02em; color: var(--tm-ink); }
.av b, .more b { font-weight: inherit; }
.av1 { --av: var(--av-1); } .av2 { --av: var(--av-2); } .av3 { --av: var(--av-3); } .av4 { --av: var(--av-4); } .av5 { --av: var(--av-5); } .av6 { --av: var(--av-6); }
.av { background: var(--av); }
.more { width: 44px; border-radius: 14px; font-size: 12px; font-weight: 700; color: var(--tm-on-more); background: var(--tm-more); }

/* ---- 7. THE SLIDER (44 tall, 356 wide; the track runs 24 → 332) and its bubble ---- */
.slider { position: absolute; left: 18px; top: 252px; width: 356px; height: 44px; border-radius: 22px; touch-action: none; cursor: grab; outline: none; }
.slider:active { cursor: grabbing; }
.slider:focus-visible:not([data-pointer]) { box-shadow: 0 0 0 2.5px var(--sl-focus); }
.track { position: absolute; left: 16px; right: 16px; top: 0; height: 44px; --bar-t: 16px; --bar-h: 12px; --zone-t: var(--bar-t); --zone-h: var(--bar-h); }
.rail, .fill-clip { position: absolute; left: 8px; right: 8px; top: var(--bar-t); height: var(--bar-h); border-radius: inherit; }
.zones { position: absolute; left: 8px; right: 8px; top: var(--zone-t); height: var(--zone-h); }
.notches { position: absolute; left: 8px; right: 8px; top: 0; bottom: 0; }
.zone { position: absolute; top: 0; bottom: 0; }
.z1 { background: var(--sl-zone-1); } .z2 { background: var(--sl-zone-2); } .z3 { background: var(--sl-zone-3); }
.fill-clip { overflow: hidden; }
.fill { position: absolute; inset: 0; background: var(--sl-fill); will-change: transform; }   /* it only slides */
.notches i { position: absolute; top: calc(var(--bar-t) - 5px); height: calc(var(--bar-h) + 10px); width: 2px; margin-left: -1px; background: var(--sl-tick); }
.notches b { position: absolute; top: calc(var(--bar-t) + var(--bar-h) + 4px); width: 1px; height: 4px; background: var(--sl-tick); display: none; }
.thumb { position: absolute; left: 0; top: 0; width: 44px; height: 44px; pointer-events: none; will-change: transform; }   /* it only slides */
.is-anim { will-change: transform, opacity; }   /* app.js sets it only while a part rotates, scales or fades */
.thumb-body { position: absolute; inset: 0; border-radius: 50%; background: var(--sl-thumb); }
.thumb-body i { position: absolute; display: block; }
.tick-labels { position: absolute; left: 18px; top: 300px; width: 356px; height: 14px; margin: 0; font-size: 10.5px; line-height: 14px; font-weight: 700; color: var(--tl-ink); }
.tick-labels span { position: absolute; top: 0; transform: translateX(-50%); }
.bubble { position: absolute; left: 18px; top: 212px; height: 37px; transform-origin: 50% 100%; }
.bub-body { position: relative; display: flex; align-items: center; height: 30px; padding: 0 13px; border-radius: 15px; white-space: nowrap; background: var(--bub-bg); color: var(--bub-ink); box-shadow: inset 0 0 0 1.2px var(--bub-edge); }
.seats-odo { --cw: 11px; --dh: 20px; height: 20px; font-family: var(--f-num); font-size: 17px; font-weight: 700; }
.bub-unit { display: inline-block; overflow: hidden; margin-left: 6px; font-size: 12px; font-weight: 600; line-height: 30px; }
.talk { display: inline-flex; align-items: center; gap: 4px; height: 30px; overflow: hidden; padding: 0 0 0 0; margin: 0; border: 0; background: none; color: inherit; font: inherit; font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer; width: 0; opacity: 0; }
.talk b { font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.talk svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.talk:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.bub-tail { position: absolute; left: 0; top: 29px; width: 14px; height: 8px; background: var(--bub-edge); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.bub-tail::after { content: ''; position: absolute; left: 1.6px; right: 1.6px; top: 0; height: 6px; background: var(--bub-bg); clip-path: polygon(0 0, 100% 0, 50% 100%); }

/* ---- 8. the features: rows slide in one by one (app.js), each check pops ---- */
.feats { position: absolute; left: 18px; right: 18px; top: 334px; height: 44px; margin: 0; padding: 0; list-style: none; }
.feat { position: absolute; left: 0; right: 0; top: 0; height: 22px; display: flex; align-items: center; gap: 10px; font-size: 13.5px; line-height: 18px; color: var(--ft-ink); white-space: nowrap; }
.check { display: grid; place-items: center; width: 18px; height: 18px; flex: none; border-radius: 50%; background: var(--ft-check); }
.check svg { width: 13px; height: 13px; fill: none; stroke: var(--ft-on-check); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.ft { flex: 1 1 auto; min-width: 0; }
.ftag { flex: none; font-size: 9.5px; line-height: 16px; height: 16px; padding: 0 7px; border-radius: 8px; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; }
.ftag.t1 { background: var(--tag-1); color: var(--on-tag-1); } .ftag.t2 { background: var(--tag-2); color: var(--on-tag-2); }

/* the dimension line (blueprint only) */
.dim { position: absolute; left: 415px; top: 146px; width: 15px; height: 390px; display: none; pointer-events: none; }

/* ---- 9. the impact ---- */
.fx { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.fx-ring { position: absolute; left: -30px; top: -30px; width: 60px; height: 60px; border-radius: 50%; border: 2px solid var(--fx-r); opacity: 0; }
.fx-ring + .fx-ring { border-width: 1.5px; }
.sp { position: absolute; left: -5px; top: -1.5px; width: 10px; height: 3px; border-radius: 2px; opacity: 0; }
.sp1 { background: var(--fx-1); } .sp2 { background: var(--fx-2); } .sp3 { background: var(--fx-3); } .sp4 { background: var(--fx-4); }

/* ---- 10. the frame's footer ---- */
.tutorial {
  position: absolute; left: 50%; bottom: 76px; transform: translateX(-50%); margin: 0; z-index: 4;
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  padding: 10px 18px 10px 11px; border-radius: 999px; font-size: 14px; font-weight: 600;
  color: var(--pill-ink); background: var(--pill-bg); box-shadow: 0 14px 28px -14px var(--black), inset 0 0 0 1px var(--pill-line);
}
.tutorial svg { width: 24px; height: 24px; padding: 5px; border-radius: 50%; fill: var(--pill-on-ic); background: var(--pill-ic); }
.tutorial span { font-weight: 400; color: var(--pill-dim); }
.credits { position: absolute; left: 28px; right: 24px; bottom: 34px; display: flex; align-items: center; justify-content: space-between; z-index: 4; }
.stack { margin: 0; font-size: 10.5px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--credit-muted); }
.stack i { font-style: normal; color: var(--credit-ink); margin: 0 3px; }
.logo { margin: 0; display: flex; align-items: center; gap: 7px; }
.logo .avatar { width: 28px; height: 28px; border-radius: 50%; box-shadow: 0 0 0 1.2px var(--credit-ring); }
.logo .lockup { height: 24px; width: auto; filter: var(--lockup); }
.touch {
  position: fixed; top: 0; left: 0; z-index: 10; width: 44px; height: 44px; margin: -22px 0 0 -22px;
  border-radius: 50%; pointer-events: none; opacity: 0;
  border: 2px solid var(--white); background: color-mix(in srgb, var(--white) 18%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--black) 30%, transparent); transition: opacity .12s;
}
.touch.is-on { opacity: 1; }

/* =================================================================================================================
   11. LOOK A · BLUEPRINT — a technical drawing that measures itself
   ================================================================================================================= */
[data-look="blueprint"] { --f-ui: var(--mono); --f-num: var(--mono); --f-plan: var(--mono); }
[data-look="blueprint"] .stage { --card-r: 4px; --seg-r: 3px; --plan-size: 25px; --plan-track: .02em; }
[data-look="blueprint"] .amb .grid {
  display: block; inset: -480px -624px;
  background:
    linear-gradient(var(--grid-major) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(var(--grid-minor) 1px, transparent 1px) 0 0 / 12px 12px,
    linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px) 0 0 / 12px 12px;
}
[data-look="blueprint"] .amb .glow { display: block; left: -40px; right: -40px; top: 170px; height: 460px; border-radius: 50%; background: radial-gradient(closest-side, var(--glow), transparent); will-change: opacity; }
[data-look="blueprint"] .amb .sweep { display: block; left: 0; right: 0; top: 0; height: 120px; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--bp-line) 4%, transparent) 80%, color-mix(in srgb, var(--bp-line) 7%, transparent) 98.5%, color-mix(in srgb, var(--bp-line) 16%, transparent) 98.5%, color-mix(in srgb, var(--bp-line) 16%, transparent) 99.4%, transparent 99.4%); will-change: transform; }
[data-look="blueprint"] .amb .sheet-note { display: block; top: 10px; font: 700 8.5px/12px var(--mono); letter-spacing: .14em; color: var(--bp-ink-2); }
[data-look="blueprint"] .amb .n1 { left: 14px; } [data-look="blueprint"] .amb .n2 { right: 14px; }
/* crop marks at the card's corners */
[data-look="blueprint"] .card-bg::before, [data-look="blueprint"] .card-bg::after {
  content: ''; position: absolute; inset: 6px; pointer-events: none;
  background:
    linear-gradient(var(--card-edge), var(--card-edge)) 0 0 / 12px 1.5px no-repeat, linear-gradient(var(--card-edge), var(--card-edge)) 0 0 / 1.5px 12px no-repeat,
    linear-gradient(var(--card-edge), var(--card-edge)) 100% 0 / 12px 1.5px no-repeat, linear-gradient(var(--card-edge), var(--card-edge)) 100% 0 / 1.5px 12px no-repeat;
}
[data-look="blueprint"] .card-bg::after { transform: scaleY(-1); }
[data-look="blueprint"] .plan-name { text-transform: uppercase; }
[data-look="blueprint"] .seg { font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; }
/* outlined digits in drawing cells */
[data-look="blueprint"] .dollars { --cw: 52px; --num-size: 74px; --gap: 4px; -webkit-text-stroke: 2px var(--price-stroke); text-shadow: 0 0 14px var(--price-glow); }
[data-look="blueprint"] .owin { box-shadow: inset 0 0 0 1px var(--price-well-edge); background: var(--price-well); }
[data-look="blueprint"] .dollars .owin::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: color-mix(in srgb, var(--bp-line) 22%, transparent); }
[data-look="blueprint"] .cents-odo .owin, [data-look="blueprint"] .seats-odo .owin { box-shadow: none; background: none; }
[data-look="blueprint"] .cents { color: var(--price-stroke); }
[data-look="blueprint"] .cents .dot { font-size: 22px; }
[data-look="blueprint"] .cur { font-size: 28px; margin-top: 0; }
[data-look="blueprint"] .per { font-size: 12.5px; }
[data-look="blueprint"] .meta { font-size: 11.5px; }
[data-look="blueprint"] .feat { font-size: 12px; }
[data-look="blueprint"] .check { border-radius: 2px; background: none; box-shadow: inset 0 0 0 1.5px var(--ft-check); }
[data-look="blueprint"] .check svg { stroke: var(--ft-check); stroke-width: 3; }
[data-look="blueprint"] .ftag { border-radius: 2px; }
[data-look="blueprint"] .stamp-in { border-radius: 2px; font-family: var(--mono); }
[data-look="blueprint"] .stamp-in b { font-size: 14px; }
/* the team as drawing balloons: outlined circles, initials in the line colour */
[data-look="blueprint"] .av { background: var(--bp-850); box-shadow: inset 0 0 0 1.5px var(--av); color: var(--av); font-family: var(--mono); font-size: 10px; }
[data-look="blueprint"] .more { border-radius: 3px; box-shadow: inset 0 0 0 1.2px var(--bp-line); font-family: var(--mono); }
/* the slider is a dimension line: a rail with arrowheads, hatched tier zones, a ruler, a crosshair thumb */
[data-look="blueprint"] .track { --bar-t: 18px; --bar-h: 8px; --zone-t: 17px; --zone-h: 10px; }
[data-look="blueprint"] .zone { top: 0; bottom: 0; background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--z) 50%, transparent) 0 1.5px, transparent 1.5px 5px); box-shadow: inset 0 0 0 1px var(--z); }
[data-look="blueprint"] .z1 { --z: var(--sl-zone-1); } [data-look="blueprint"] .z2 { --z: var(--sl-zone-2); } [data-look="blueprint"] .z3 { --z: var(--sl-zone-3); }
[data-look="blueprint"] .rail { left: 0; right: 0; top: 16px; height: 12px; background: linear-gradient(var(--sl-rail), var(--sl-rail)) 8px 50% / calc(100% - 16px) 2px no-repeat; }
[data-look="blueprint"] .rail::before, [data-look="blueprint"] .rail::after { content: ''; position: absolute; top: 0; width: 9px; height: 12px; background: var(--sl-rail); }
[data-look="blueprint"] .rail::before { left: 0; clip-path: polygon(0 50%, 100% 0, 100% 100%); }
[data-look="blueprint"] .rail::after { right: 0; clip-path: polygon(100% 50%, 0 0, 0 100%); }
[data-look="blueprint"] .fill-clip { top: 19px; height: 6px; }
[data-look="blueprint"] .fill { box-shadow: 0 0 8px var(--sl-fill); }
[data-look="blueprint"] .notches b { display: block; top: 30px; }
[data-look="blueprint"] .notches b.major { height: 7px; }
[data-look="blueprint"] .notches i { top: 9px; height: 26px; width: 1.5px; background: var(--bp-red); }
[data-look="blueprint"] .thumb-body { background: var(--sl-thumb); box-shadow: inset 0 0 0 3px var(--sl-thumb-edge), 0 0 0 4px color-mix(in srgb, var(--sl-thumb-core) 18%, transparent), 0 0 16px color-mix(in srgb, var(--sl-thumb-core) 55%, transparent); }
[data-look="blueprint"] .th-a { left: 50%; top: 5px; bottom: 5px; width: 1.5px; margin-left: -.75px; background: var(--sl-thumb-edge); }
[data-look="blueprint"] .th-b { top: 50%; left: 5px; right: 5px; height: 1.5px; margin-top: -.75px; background: var(--sl-thumb-edge); }
[data-look="blueprint"] .th-c { left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--sl-thumb-core); background: color-mix(in srgb, var(--sl-thumb-core) 25%, transparent); }
[data-look="blueprint"] .bub-body { border-radius: 2px; }
[data-look="blueprint"] .tick-labels { font-family: var(--mono); font-size: 10px; }
[data-look="blueprint"] .rule { background: repeating-linear-gradient(90deg, var(--card-rule) 0 6px, transparent 6px 10px); }
[data-look="blueprint"] .dim { display: block; }
[data-look="blueprint"] .dim-line { position: absolute; left: 3px; top: 0; bottom: 0; width: 9px; background: linear-gradient(90deg, transparent 4px, var(--t-300) 4px, var(--t-300) 5px, transparent 5px); }
[data-look="blueprint"] .dim-line::before, [data-look="blueprint"] .dim-line::after { content: ''; position: absolute; left: 0; width: 9px; height: 8px; background: var(--t-300); }
[data-look="blueprint"] .dim-line::before { top: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
[data-look="blueprint"] .dim-line::after { bottom: 0; clip-path: polygon(50% 100%, 100% 0, 0 0); }
[data-look="blueprint"] .dim-n { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-90deg); padding: 1px 4px; background: var(--bp-850); font: 700 9.5px/12px var(--mono); letter-spacing: .08em; color: var(--t-200); white-space: nowrap; }
[data-look="blueprint"] .fx-ring { border-style: dashed; }
[data-look="blueprint"] .sp { width: 9px; height: 9px; top: -4.5px; left: -4.5px; border-radius: 0; background: none; box-shadow: inset 0 0 0 1.5px var(--c); }
[data-look="blueprint"] .sp1 { --c: var(--fx-1); } [data-look="blueprint"] .sp2 { --c: var(--fx-2); } [data-look="blueprint"] .sp3 { --c: var(--fx-3); } [data-look="blueprint"] .sp4 { --c: var(--fx-4); }
[data-look="blueprint"] .tutorial { border-radius: 4px; }
[data-look="blueprint"] .tutorial svg { border-radius: 2px; }

/* =================================================================================================================
   12. LOOK B · CLAY — soft, puffy, squishy
   ================================================================================================================= */
[data-look="clay"] { --f-ui: var(--round); --f-num: var(--round); --f-plan: var(--round); }
[data-look="clay"] .stage { --card-r: 36px; --plan-size: 30px; --plan-track: -.01em; }
[data-look="clay"] .amb .field { display: block; left: -700px; right: -700px; top: -500px; bottom: -500px; opacity: 0; transition: opacity .5s; will-change: opacity; }
[data-look="clay"] .amb .f1 { background: var(--field-starter); } [data-look="clay"] .amb .f2 { background: var(--field-pro); } [data-look="clay"] .amb .f3 { background: var(--field-team); }
[data-look="clay"] .stage[data-tier="starter"] .f1, [data-look="clay"] .stage[data-tier="pro"] .f2, [data-look="clay"] .stage[data-tier="team"] .f3 { opacity: 1; }
[data-look="clay"] .amb .blob { display: block; left: 0; top: 0; width: 220px; height: 170px; border-radius: 50%; will-change: transform;
  background: radial-gradient(closest-side at 40% 38%, color-mix(in srgb, var(--white) 34%, transparent), color-mix(in srgb, var(--white) 12%, transparent) 55%, transparent); }
[data-look="clay"] .amb .b2 { width: 170px; height: 150px; } [data-look="clay"] .amb .b3 { width: 200px; height: 140px; } [data-look="clay"] .amb .b4 { width: 230px; height: 180px; }
[data-look="clay"] .cb { border: 0; }
[data-look="clay"] .head .plan-name { color: var(--t-900); text-shadow: 0 2px 0 color-mix(in srgb, var(--white) 80%, transparent); }
[data-look="clay"] .billing { box-shadow: inset 0 0 0 1.5px var(--sw-edge), inset 0 4px 6px color-mix(in oklab, var(--t-500) 40%, transparent), inset 0 -2px 2px color-mix(in srgb, var(--white) 70%, transparent); }
[data-look="clay"] .seg-thumb { box-shadow: 0 3px 0 -1px var(--t-900), inset 0 2px 1px color-mix(in srgb, var(--white) 35%, transparent), inset 0 -3px 5px color-mix(in oklab, var(--t-900) 50%, transparent); }
[data-look="clay"] .seg { font-size: 14px; font-weight: 600; }
/* white puffy digits in deep candy wells */
[data-look="clay"] .dollars { --cw: 54px; --gap: 6px; --num-size: 70px; font-weight: 700; text-shadow: 0 3px 0 color-mix(in srgb, var(--black) 34%, transparent), 0 6px 7px color-mix(in srgb, var(--black) 22%, transparent); }   /* tier-free: the rolling strips never re-raster during a colour glide */
[data-look="clay"] .dollars .owin { border-radius: 16px; background: linear-gradient(180deg, color-mix(in srgb, var(--black) 30%, transparent), transparent 16%, transparent 84%, color-mix(in srgb, var(--white) 22%, transparent)), var(--price-well); box-shadow: inset 0 -2px 0 color-mix(in oklab, var(--t-300) 60%, transparent), 0 2px 0 color-mix(in srgb, var(--white) 90%, transparent); }
[data-look="clay"] .dollars .ostrip i { line-height: calc(var(--dh) - 6px); }
[data-look="clay"] .cents { color: var(--t-800); }
[data-look="clay"] .cur { color: var(--price-cur); font-size: 32px; }
[data-look="clay"] .per { font-size: 15px; }
[data-look="clay"] .meta { font-size: 13.5px; }
[data-look="clay"] .meta .pp { font-weight: 600; }
[data-look="clay"] .stamp-in { border-radius: 50%; background: var(--stamp-bg); box-shadow: inset 0 3px 2px color-mix(in srgb, var(--white) 45%, transparent), inset 0 -5px 8px color-mix(in srgb, var(--black) 25%, transparent), 0 5px 10px -4px var(--t-950); }
[data-look="clay"] .stamp-in b { font-size: 15px; font-weight: 700; }
[data-look="clay"] .stamp-in small { font-size: 8px; font-weight: 600; }
/* candy balls */
[data-look="clay"] .av { font-size: 10.5px; background: radial-gradient(circle at 36% 28%, color-mix(in srgb, var(--white) 60%, transparent), transparent 46%), linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--black) 16%, transparent)), var(--av); box-shadow: 0 2px 0 color-mix(in oklab, var(--t-900) 45%, transparent); }
[data-look="clay"] .more { background: linear-gradient(180deg, color-mix(in srgb, var(--white) 22%, transparent), transparent 50%), var(--tm-more); box-shadow: 0 2px 0 color-mix(in oklab, var(--t-900) 45%, transparent); }
/* a well with a puffy fill and a squishy ball */
[data-look="clay"] .track { --bar-t: 13px; --bar-h: 16px; --zone-t: 34px; --zone-h: 4px; }
[data-look="clay"] .rail { border-radius: 8px; background: var(--sl-rail); box-shadow: inset 0 3px 5px color-mix(in oklab, var(--t-950) 55%, transparent), inset 0 -2px 2px color-mix(in srgb, var(--white) 35%, transparent), 0 1.5px 0 color-mix(in srgb, var(--white) 80%, transparent); }
[data-look="clay"] .zone { border-radius: 2px; border: 0 solid transparent; border-width: 0 2px; background-clip: padding-box; }
[data-look="clay"] .fill { border-radius: 8px; box-shadow: inset 0 -3px 4px color-mix(in oklab, var(--t-400) 55%, transparent), 0 0 0 1px color-mix(in oklab, var(--t-600) 30%, transparent); }
[data-look="clay"] .fill-clip { top: 15px; height: 12px; left: 10px; right: 10px; border-radius: 6px; }
[data-look="clay"] .notches i { top: 16px; height: 10px; width: 4px; margin-left: -2px; border-radius: 2px; background: color-mix(in srgb, var(--white) 80%, transparent); }
[data-look="clay"] .thumb-body { box-shadow: 0 9px 14px -4px color-mix(in oklab, var(--t-950) 70%, transparent), inset -5px -7px 10px color-mix(in oklab, var(--t-900) 45%, transparent), inset 3px 4px 6px color-mix(in srgb, var(--white) 35%, transparent); }
[data-look="clay"] .th-a { left: 11px; top: 8px; width: 12px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--white) 90%, transparent); transform: rotate(-24deg); }
[data-look="clay"] .bub-body { border-radius: 15px; box-shadow: inset 0 2px 1px color-mix(in srgb, var(--white) 30%, transparent), inset 0 -3px 4px color-mix(in srgb, var(--black) 20%, transparent), 0 4px 8px -3px var(--t-900); }
[data-look="clay"] .bub-tail { background: var(--bub-bg); }
[data-look="clay"] .tick-labels { font-family: var(--round); font-size: 11.5px; font-weight: 600; top: 302px; }
[data-look="clay"] .rule { height: 3px; border-radius: 2px; background: color-mix(in oklab, var(--t-300) 60%, transparent); box-shadow: 0 1px 0 color-mix(in srgb, var(--white) 70%, transparent); }
[data-look="clay"] .feat { font-size: 14.5px; font-weight: 500; }
[data-look="clay"] .check { box-shadow: inset 0 -2px 3px color-mix(in srgb, var(--black) 25%, transparent), inset 0 2px 2px color-mix(in srgb, var(--white) 35%, transparent); }
[data-look="clay"] .ftag { font-family: var(--round); letter-spacing: .04em; }
[data-look="clay"] .fx-ring { border-width: 6px; border-color: color-mix(in srgb, var(--fx-r) 85%, transparent); }
[data-look="clay"] .sp { width: 11px; height: 11px; top: -5.5px; left: -5.5px; border-radius: 50%; box-shadow: inset 0 -2px 2px color-mix(in srgb, var(--black) 18%, transparent); }
[data-look="clay"] .tutorial { box-shadow: 0 6px 0 -1px color-mix(in oklab, var(--t-300) 80%, var(--white)), 0 16px 26px -12px var(--t-950); font-family: var(--round); font-size: 15px; }

/* =================================================================================================================
   13. LOOK C · SYNTH — neon over a running grid
   ================================================================================================================= */
[data-look="synth"] { --f-ui: var(--sans); --f-num: var(--neon); --f-plan: var(--neon); }
[data-look="synth"] .stage { --card-r: 20px; --seg-r: 10px; --plan-size: 32px; --plan-track: .01em; }
[data-look="synth"] .amb .stars { display: block; inset: 0 0 140px 0; will-change: opacity;
  background:
    radial-gradient(1.4px 1.4px at 38px 92px, var(--sy-ink), transparent), radial-gradient(1.2px 1.2px at 400px 74px, var(--sy-ink), transparent),
    radial-gradient(1.6px 1.6px at 18px 300px, var(--sy-ink), transparent), radial-gradient(1.2px 1.2px at 424px 250px, var(--sy-ink), transparent),
    radial-gradient(1.3px 1.3px at 12px 470px, var(--sy-ink), transparent), radial-gradient(1.5px 1.5px at 420px 420px, var(--sy-ink), transparent),
    radial-gradient(1.2px 1.2px at 410px 140px, var(--sy-ink), transparent), radial-gradient(1.2px 1.2px at 22px 180px, var(--sy-ink), transparent),
    radial-gradient(1.1px 1.1px at 14px 560px, var(--sy-ink), transparent), radial-gradient(1.1px 1.1px at 418px 590px, var(--sy-ink), transparent); }
[data-look="synth"] .amb .horizon { display: block; left: -40px; right: -40px; top: 600px; height: 76px; border-radius: 50%; will-change: opacity;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--sky-tier) 60%, transparent), color-mix(in oklab, var(--sun-3) 22%, transparent) 55%, transparent); }
[data-look="synth"] .amb .glow { display: block; left: -400px; right: -400px; top: -300px; height: 942px;
  background: linear-gradient(180deg, var(--sy-950) 0%, var(--sy-950) 28%, var(--sy-900) 50%, var(--sy-800) 76%, var(--sy-700) 93%, color-mix(in oklab, var(--sky-foot) 50%, var(--sy-700)) 100%); }
[data-look="synth"] .amb .floor { display: block; left: -160px; right: -160px; top: 642px; height: 200px; overflow: hidden; perspective: 220px; perspective-origin: 50% 0;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.7) 18%, rgba(0,0,0,.28) 32%, transparent 50%); mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.7) 18%, rgba(0,0,0,.28) 32%, transparent 50%); }
[data-look="synth"] .amb .plane { display: block; position: absolute; left: 0; right: 0; top: 0; height: 230px; transform-origin: 50% 0; will-change: transform;
  background:
    linear-gradient(90deg, transparent calc(50% - 1px), color-mix(in oklab, var(--grid-major) 85%, transparent) calc(50% - 1px), color-mix(in oklab, var(--grid-major) 85%, transparent) calc(50% + 1px), transparent calc(50% + 1px)) 0 0 / 40px 100%,
    linear-gradient(180deg, color-mix(in oklab, var(--grid-major) 85%, transparent) 2px, transparent 2px) 0 0 / 100% 32px; }
[data-look="synth"] .amb .floor { transform-style: flat; }
[data-look="synth"] .amb .plane { rotate: x 62deg; }
[data-look="synth"] .cb { border: 0; }
[data-look="synth"] .plan-name { color: var(--t-50); text-shadow: 0 0 4px var(--t-300), 0 0 14px var(--t-500); font-weight: 400; }
[data-look="synth"] .seg { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
[data-look="synth"] .seg-thumb { box-shadow: 0 0 12px color-mix(in oklab, var(--t-400) 80%, transparent); }
/* neon-tube digits; the window fades top and bottom so rolling digits glow in and out */
[data-look="synth"] .price::before { content: ''; position: absolute; left: -10px; top: -4px; width: 250px; height: 88px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in oklab, var(--t-500) 34%, transparent), transparent); pointer-events: none; }
[data-look="synth"] .dollars { --cw: 48px; --num-size: 82px; font-weight: 400; text-shadow: 0 0 3px var(--t-200), 0 0 9px var(--price-glow); }
[data-look="synth"] .owin { -webkit-mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent); }
[data-look="synth"] .cents { color: var(--t-50); text-shadow: 0 0 3px var(--t-200), 0 0 8px var(--t-400); font-weight: 400; }
[data-look="synth"] .cents .dot { font-size: 26px; }
[data-look="synth"] .cur { font-weight: 400; font-size: 34px; text-shadow: 0 0 8px var(--t-400); }
[data-look="synth"] .stamp-in { border-radius: 8px; box-shadow: inset 0 0 0 2px var(--stamp-ink), 0 0 10px color-mix(in srgb, var(--stamp-ink) 60%, transparent), inset 0 0 10px color-mix(in srgb, var(--stamp-ink) 40%, transparent); text-shadow: 0 0 6px color-mix(in srgb, var(--stamp-ink) 80%, transparent); font-family: var(--neon); }
[data-look="synth"] .stamp-in b { font-weight: 400; font-size: 17px; }
[data-look="synth"] .stamp-in small { font-family: var(--sans); }
[data-look="synth"] .av { background: var(--sy-950); color: var(--av); box-shadow: inset 0 0 0 1.6px var(--av), 0 0 8px color-mix(in srgb, var(--av) 60%, transparent); text-shadow: 0 0 5px var(--av); }
[data-look="synth"] .more { box-shadow: inset 0 0 0 1.4px var(--t-300), 0 0 8px color-mix(in oklab, var(--t-400) 50%, transparent); }
/* a neon tube in three tier colours; the lit core runs to the thumb; the thumb is the striped sun */
[data-look="synth"] .track { --bar-t: 18px; --bar-h: 8px; }
[data-look="synth"] .zones { border-radius: 4px; overflow: hidden; }
[data-look="synth"] .zone { opacity: 1; }
[data-look="synth"] .rail { display: none; }
[data-look="synth"] .fill-clip { border-radius: 4px; }
[data-look="synth"] .fill { background: var(--sl-fill); }
[data-look="synth"] .notches i { top: 12px; height: 20px; width: 2px; background: var(--sy-ink); box-shadow: 0 0 6px var(--sy-ink); }
[data-look="synth"] .thumb-body { box-shadow: 0 0 10px color-mix(in srgb, var(--sun-2) 60%, transparent), 0 0 22px color-mix(in srgb, var(--sun-3) 32%, transparent);
  -webkit-mask-image: linear-gradient(180deg, #000 0 52%, transparent 52% 58%, #000 58% 68%, transparent 68% 73%, #000 73% 82%, transparent 82% 86%, #000 86%);
          mask-image: linear-gradient(180deg, #000 0 52%, transparent 52% 58%, #000 58% 68%, transparent 68% 73%, #000 73% 82%, transparent 82% 86%, #000 86%); }
[data-look="synth"] .thumb::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--sun-2) 28%, transparent), transparent); }
[data-look="synth"] .bub-body { border-radius: 8px; box-shadow: inset 0 0 0 1.4px var(--bub-edge), 0 0 10px color-mix(in oklab, var(--t-400) 45%, transparent); }
[data-look="synth"] .seats-odo { font-weight: 400; font-size: 19px; color: var(--t-50); }
[data-look="synth"] .tick-labels { letter-spacing: .06em; }
[data-look="synth"] .rule { background: linear-gradient(90deg, transparent, var(--card-rule) 15%, var(--card-rule) 85%, transparent); }
[data-look="synth"] .check { background: none; box-shadow: inset 0 0 0 1.6px var(--ft-check), 0 0 7px color-mix(in oklab, var(--t-400) 60%, transparent); }
[data-look="synth"] .check svg { stroke: var(--ft-check); }
[data-look="synth"] .sp { height: 2.5px; width: 14px; left: -7px; box-shadow: 0 0 6px currentColor; }
[data-look="synth"] .sp1 { color: var(--fx-1); } [data-look="synth"] .sp2 { color: var(--fx-2); } [data-look="synth"] .sp3 { color: var(--fx-3); } [data-look="synth"] .sp4 { color: var(--fx-4); }
[data-look="synth"] .fx-ring { box-shadow: 0 0 10px var(--fx-r), inset 0 0 10px var(--fx-r); }

/* ---- 14. reduced motion: no glide, no ambient (app.js also critically damps every spring) ---- */
@media (prefers-reduced-motion: reduce) {
  .stage, .cb, [data-look] .amb .field, .stage[data-tier] .cb { transition: none; }
  .seg { transition: none; }
  .touch { transition: none; }
  .fx { display: none; }
}