/* Dialed · Bluebird.
   The base-area morning board read like a snow forecast. One superfamily (Barlow, three widths), one color field
   (the alpine-blue band), black slide-in numerals on hairline rules, OPEN and GONE tabs that carry
   the word, an amber clock, and a board that casts the page's only shadow. Dark is the same board
   under the floodlight at 5 a.m. (First Chair): navy ground, lit white tiles, ice figures.
   Every color is a token. Components read the ground tokens; `.tile` remaps them for a lit tile. */

/* ---------------------------------------------------------------- 1. Tokens */
/* metric-matched local fallbacks: the page lays out on these until the Barlow cuts arrive, at the same widths and line boxes,
   so the board's figures and headings do not reflow on swap (ratios measured against the local faces on macOS) */
@font-face { font-family: "Barlow Fallback"; src: local("Arial"), local("ArialMT"); size-adjust: 90%; ascent-override: 100%; descent-override: 20%; line-gap-override: 0%; }
@font-face { font-family: "Barlow Semi Condensed Fallback"; src: local("Arial Narrow"), local("ArialNarrow"); size-adjust: 100%; ascent-override: 100%; descent-override: 20%; line-gap-override: 0%; }
@font-face { font-family: "Barlow Condensed Fallback"; src: local("Arial Narrow"), local("ArialNarrow"); size-adjust: 90%; ascent-override: 100%; descent-override: 20%; line-gap-override: 0%; }

:root {
  color-scheme: light;

  /* ground */
  --bg: #F7F9FB;
  --bg-2: #EAF0F6;
  --fg: #0B1620;
  --fg-2: #2E3F4D;
  --fg-3: #55687A;
  --rule: #D5DEE6;
  --line: #7A8C9A;
  --figure: #0B1620;
  --link: #1858B8;
  --focus: #1858B8;
  --sel: #DCE9F8;
  --on-sel: #0B1620;

  /* panel: the default container on product pages */
  --panel: #FFFFFF;
  --panel-rule: #D5DEE6;

  /* the board and its band */
  --board: #FFFFFF;
  --board-rule: #D5DEE6;
  --band: #1858B8;
  --on-band: #FFFFFF;
  --on-band-2: #CFE0F7;
  --shadow-board: 0 24px 48px -28px rgba(11, 22, 32, .42);
  --row-gap: 0px;
  --row-rule: var(--rule);
  --row-pad: 0px;

  /* lit tile: white laminate with ink, in both themes */
  --tile: #FFFFFF;
  --tile-2: #EAF0F6;
  --tile-fg: #0B1620;
  --tile-fg-2: #2E3F4D;
  --tile-fg-3: #55687A;
  --tile-rule: #D5DEE6;
  --tile-line: #7A8C9A;
  --tile-link: #1858B8;
  --tile-focus: #1858B8;
  --tile-primary: #1858B8;
  --tile-primary-hover: #0F3D86;
  --tile-on-primary: #FFFFFF;
  --tile-green: #137A38;
  --tile-on-green: #FFFFFF;
  --tile-red: #C9203A;
  --tile-on-red: #FFFFFF;
  --tile-g-blue: #1858B8;

  /* semantic */
  --blue: #1858B8;
  --blue-deep: #0F3D86;
  --on-blue: #FFFFFF;
  /* the wordmark's lift tab: a blue tab with laminate letters on the ground; .band remaps it to a laminate tab with blue letters */
  --wm-tab: var(--blue);
  --wm-word: var(--on-blue);
  --primary: #1858B8;
  --primary-hover: #0F3D86;
  --on-primary: #FFFFFF;
  --tint: #DCE9F8;
  --on-tint: #0F3D86;
  --tint-fg: #2E3F4D;
  --green: #137A38;
  --on-green: #FFFFFF;
  --red: #C9203A;
  --on-red: #FFFFFF;
  --amber: #F2B134;
  --on-amber: #0B1620;
  --g-green: #137A38;
  --g-blue: #1858B8;
  --g-black: #0B1620;

  /* type */
  /* type (2 Nov 2026): the Barlow superfamily; its three static widths replace Archivo's width axis.
     --font carries the wordmark, headings and reading; --font-semi the tracked labels and buttons; --font-narrow the figures,
     the clock and the category names (true tabular numerals in every cut). */
  --font: "Barlow", "Barlow Fallback", "Helvetica Neue", Arial, sans-serif;
  --font-semi: "Barlow Semi Condensed", "Barlow Semi Condensed Fallback", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-narrow: "Barlow Condensed", "Barlow Condensed Fallback", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --t-2: .75rem;
  --t-1: .875rem;
  --t0: 1rem;
  --t1: 1.2rem;
  --t2: 1.44rem;
  --t3: 1.728rem;
  --t4: 2.074rem;
  --t5: 2.488rem;
  --t6: 2.986rem;
  --t7: 3.583rem;

  /* space and layout */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 96px;
  --wrap: 1280px;
  --gutter: 32px;
  --radius: 2px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-1: 140ms;   /* immediate feedback: press, focus, hover */
  --dur-2: 240ms;   /* routine state change: chips, tabs, sheet */
  --dur-3: 400ms;   /* layout, overlay, view change */
  --dur-4: 650ms;   /* the one authored entrance: the board at the sweep */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0A1A2F;
    --bg-2: #11263F;
    --fg: #F3F6F9;
    --fg-2: #BFE6FF;
    --fg-3: #9DB3C8;
    --rule: #223A57;
    --line: #5A7A99;
    --figure: #7FD1FF;
    --link: #7FD1FF;
    --focus: #FFB020;
    --sel: #7FD1FF;
    --on-sel: #0B1620;
    --panel: #11263F;
    --panel-rule: #223A57;
    --board: var(--bg);          /* occludes the ground map like the light laminate; the tiles stay lit */
    --board-rule: transparent;
    --band: #0F2440;
    --on-band: #F3F6F9;
    --on-band-2: #9DB3C8;
    --shadow-board: none;
    --row-gap: 6px;
    --row-rule: transparent;
    --row-pad: 14px;
    --tile: #F3F6F9;
    --tile-2: #E4EBF2;
    --tile-fg-3: #4E6072;
    --tile-rule: #CBD6E0;
    --tile-primary: #0B1620;
    --tile-primary-hover: #2E3F4D;
    --tile-on-primary: #F3F6F9;
    --primary: #7FD1FF;
    --primary-hover: #BFE6FF;
    --on-primary: #0B1620;
    --tint: #10294A;
    --on-tint: #7FD1FF;
    --tint-fg: #BFE6FF;
    --green: #35C46A;
    --on-green: #06240F;
    --red: #FF5A5F;
    --on-red: #2B0507;
    --amber: #FFB020;
    --on-amber: #0B1620;
    --g-green: #35C46A;
    --g-blue: #5AA9FF;
    --g-black: #F3F6F9;
    --wm-tab: var(--tile);
    --wm-word: var(--bg);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0A1A2F;
  --bg-2: #11263F;
  --fg: #F3F6F9;
  --fg-2: #BFE6FF;
  --fg-3: #9DB3C8;
  --rule: #223A57;
  --line: #5A7A99;
  --figure: #7FD1FF;
  --link: #7FD1FF;
  --focus: #FFB020;
  --sel: #7FD1FF;
  --on-sel: #0B1620;
  --panel: #11263F;
  --panel-rule: #223A57;
  --board: var(--bg);
  --board-rule: transparent;
  --band: #0F2440;
  --on-band: #F3F6F9;
  --on-band-2: #9DB3C8;
  --shadow-board: none;
  --row-gap: 6px;
  --row-rule: transparent;
  --row-pad: 14px;
  --tile: #F3F6F9;
  --tile-2: #E4EBF2;
  --tile-fg-3: #4E6072;
  --tile-rule: #CBD6E0;
  --tile-primary: #0B1620;
  --tile-primary-hover: #2E3F4D;
  --tile-on-primary: #F3F6F9;
  --primary: #7FD1FF;
  --primary-hover: #BFE6FF;
  --on-primary: #0B1620;
  --tint: #10294A;
  --on-tint: #7FD1FF;
  --tint-fg: #BFE6FF;
  --green: #35C46A;
  --on-green: #06240F;
  --red: #FF5A5F;
  --on-red: #2B0507;
  --amber: #FFB020;
  --on-amber: #0B1620;
  --g-green: #35C46A;
  --g-blue: #5AA9FF;
  --g-black: #F3F6F9;
  --wm-tab: var(--tile);
  --wm-word: var(--bg);
}

/* Context remaps. Put `.tile` on anything that must read as a lit laminate tile in both themes. */
.tile {
  --bg: var(--tile);
  --bg-2: var(--tile-2);
  --fg: var(--tile-fg);
  --fg-2: var(--tile-fg-2);
  --fg-3: var(--tile-fg-3);
  --rule: var(--tile-rule);
  --line: var(--tile-line);
  --figure: var(--tile-fg);
  --link: var(--tile-link);
  --focus: var(--tile-focus);
  --primary: var(--tile-primary);
  --primary-hover: var(--tile-primary-hover);
  --on-primary: var(--tile-on-primary);
  --green: var(--tile-green);
  --on-green: var(--tile-on-green);
  --red: var(--tile-red);
  --on-red: var(--tile-on-red);
  --g-green: var(--tile-green);
  --g-blue: var(--tile-g-blue);
  --g-black: var(--tile-fg);
  --panel: var(--tile);
  --panel-rule: var(--tile-rule);
  background: var(--bg);
  color: var(--fg);
}
.band {
  --fg: var(--on-band);
  --fg-2: var(--on-band-2);
  --fg-3: var(--on-band-2);
  --link: var(--on-band);
  --focus: var(--amber);
  --wm-tab: var(--on-band);
  --wm-word: var(--band);
  --rule: color-mix(in srgb, var(--on-band) 28%, transparent);
  background: var(--band);
  color: var(--fg);
}

/* ---------------------------------------------------------------- 2. Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--line) transparent; }
body { font-family: var(--font);
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--fg);
  font: 400 1rem/1.5 var(--font);

  -webkit-font-smoothing: antialiased;
  accent-color: var(--primary);
  caret-color: var(--primary);
}
::selection { background: var(--sel); color: var(--on-sel); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: .16em; transition: color var(--dur-1) ease-out, text-decoration-color var(--dur-1) ease-out; }
@media (hover: hover) and (pointer: fine) { a:hover { text-decoration-thickness: 2px; } }
img, svg { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
hr { border: 0; border-top: 1px solid var(--rule); margin: var(--s6) 0; }
ul, ol { margin: 0; padding-left: 1.2em; }
li + li { margin-top: var(--s1); }
dl, figure { margin: 0; }
s { text-decoration-thickness: 1px; }

h1, h2, h3, h4 { margin: 0; font-weight: 800; letter-spacing: -.02em; line-height: 1.08; text-wrap: balance; color: var(--fg); }
h1 { font-size: var(--t5); }
h2 { font-size: var(--t4); letter-spacing: -.018em; }
h3 { font-size: var(--t2); font-weight: 700; letter-spacing: -.01em; line-height: 1.15; }
h4 { font-size: var(--t1); font-weight: 700; letter-spacing: 0; line-height: 1.25; }
p { margin: 0; }
p + p { margin-top: var(--s4); }
small, .small { font-size: var(--t-1); }
.lede { font-size: var(--t1); line-height: 1.45; color: var(--fg-2); max-width: 60ch; }
.note { font-size: var(--t-1); color: var(--fg-3); }
.prose { max-width: 68ch; }
.prose h2 { margin: var(--s7) 0 var(--s4); }
.prose h3 { margin: var(--s6) 0 var(--s3); }
.prose p + p, .prose ul, .prose ol, .prose .table, .prose .callout { margin-top: var(--s4); }
.prose li + li { margin-top: var(--s2); }

/* labels and figures: the board's two voices */
.lbl { font-size: var(--t-2); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); font-family: var(--font-semi); font-stretch: 100%; line-height: 1.2; }
.lbl .glyph { font-size: .9em; margin-right: 5px; vertical-align: -.08em; }
.fig { font-weight: 800; font-family: var(--font-narrow); font-stretch: 100%; font-variant-numeric: tabular-nums lining-nums; letter-spacing: 0; line-height: 1; color: var(--figure); }
.fig .vw { display: block; overflow: hidden; }
.fig .v { display: inline-block; transition: transform .55s var(--ease-out), opacity .4s ease-out; transition-delay: calc(var(--i, 0) * 45ms); }
.fig .v.in { transform: translateY(.6em); opacity: 0; }
.fig .lbl { display: block; margin-top: 5px; }
.wm { font-weight: 900; font-family: var(--font); font-stretch: 100%; text-transform: uppercase; letter-spacing: .08em; line-height: 1; color: var(--fg); text-decoration: none; display: inline-block; }
.wm:hover { color: var(--fg); }
/* The lift tab: the wordmark is the board's status tab carrying the name (brand/logo/). One geometry, two drawings: a tab 1.26em tall with the notch
   .34em deep (0.27 of the height, the .tab's 7px on 26px) and the caps centred at .28em from either edge, the ink .38em past the notch tip and .452em from the right.
   .wm-svg is the inline SVG with the outlined word that E.mark builds (nav, footer); .wm-tab is the same tab drawn in CSS around live text (the band's h1, the OG card). */
.wm-svg { display: block; height: 1.26em; width: auto; overflow: visible; }
.wm-svg path { fill: var(--wm-tab); }
.wm-svg .wm-word, .wm-svg .wm-word path { fill: var(--wm-word); }
.wm-tab { display: inline-block; padding: .08em .372em .18em .681em; line-height: 1; background: var(--wm-tab); color: var(--wm-word); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, .34em 50%); }
.wm-link { display: inline-block; color: inherit; text-decoration: none; }
.bh { font-size: var(--t-1); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); line-height: 1.3; margin: 0 0 var(--s3); }
.bh span { font-weight: 600; }
.bh a { color: var(--link); }

/* ---------------------------------------------------------------- 3. Layout primitives */
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.sec { padding: var(--s8) 0 var(--s5); }
.sec + .sec { padding-top: var(--s7); }
.sec-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s3) var(--s6); margin-bottom: var(--s5); }
.sec-h p { color: var(--fg-2); max-width: 60ch; flex: 1 1 28rem; }
.sec-h .act { font-weight: 600; white-space: nowrap; }
.page-head { padding: var(--s7) 0 var(--s5); display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s4) var(--s6); }
.page-head .lede { margin-top: var(--s3); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s5); }
.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-12 { grid-column: span 12; }
.stack > * + * { margin-top: var(--s4); }
.stack-lg > * + * { margin-top: var(--s6); }
.mt-3 { margin-top: var(--s3); } .mt-4 { margin-top: var(--s4); } .mt-5 { margin-top: var(--s5); }
.rowbtns { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); padding: var(--s3) 0 var(--s4); border-bottom: 1px solid var(--rule); margin-bottom: var(--s4); }
.panel { background: var(--panel); border: 1px solid var(--panel-rule); border-radius: var(--radius); padding: var(--s5); min-width: 0; }
.panel-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s2) var(--s4); margin-bottom: var(--s4); }
.panel-h h3 { font-size: var(--t1); }
.panel-h .k { font-size: var(--t-1); color: var(--fg-3); }
.tint { background: var(--tint); color: var(--tint-fg); --figure: var(--on-tint); --fg-3: var(--tint-fg); }
.skip { position: absolute; left: var(--gutter); top: -100px; z-index: 100; background: var(--fg); color: var(--bg); padding: 10px 14px; font-weight: 700; text-decoration: none; }
.skip:focus { top: var(--s2); }

/* ---------------------------------------------------------------- 4. Nav */
.nav { position: relative; z-index: 20; background: var(--bg); border-bottom: 1px solid var(--rule); }
.nav-in { display: flex; align-items: center; gap: var(--s5); min-height: 60px; }
.wm-nav { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 0; }
.wm-nav .wm-svg { height: 28px; }
.nav-toggle { display: none; }
.nav-panel { display: flex; align-items: center; flex: 1 1 auto; gap: var(--s5); min-width: 0; }
.nav-panel ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--s1); }
.nav-panel li + li { margin: 0; }
.nav-panel li:first-child a { padding-left: 0; }
.nav-panel ul a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--fg-2); text-decoration: none; font-weight: 600; font-size: .9375rem; box-shadow: inset 0 -2px 0 transparent; transition: color var(--dur-1) ease-out, box-shadow var(--dur-1) ease-out; }
@media (hover: hover) and (pointer: fine) { .nav-panel ul a:hover { color: var(--fg); box-shadow: inset 0 -2px 0 var(--line); } }
.nav-panel ul a[aria-current="page"] { color: var(--fg); box-shadow: inset 0 -2px 0 var(--primary); }
.nav-acts { margin-left: auto; display: flex; align-items: center; gap: var(--s3); }
.status { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px; font-size: var(--t-1); font-weight: 600; color: var(--fg-2); text-decoration: none; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .status:hover { color: var(--fg); } }
[data-page="home"] .wm-nav { display: none; }
[data-page="home"] .nav .wrap { max-width: none; }

/* ---------------------------------------------------------------- 5. Footer */
.foot { margin-top: var(--s9); border-top: 1px solid var(--rule); padding: var(--s7) 0 var(--s8); color: var(--fg-2); font-size: var(--t-1); }
.foot-in { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--s7); }
.wm-foot { font-size: 1.75rem; }
.foot-disc { margin-top: var(--s4); max-width: 62ch; }
.foot-proto { margin-top: var(--s3); max-width: 62ch; color: var(--fg-3); }
.foot-nav ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s5); }
.foot-nav li + li { margin: 0; }
.foot-nav a { display: inline-flex; align-items: center; min-height: 36px; padding: 2px 0; color: var(--fg); text-decoration: none; font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .foot-nav a:hover { text-decoration: underline; } }

/* ---------------------------------------------------------------- 6. Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border: 1.5px solid var(--primary); border-radius: var(--radius); background: var(--primary); color: var(--on-primary); font-weight: 700; font-size: .9375rem; letter-spacing: .01em; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer; position: relative; transition: background-color var(--dur-1) ease-out, border-color var(--dur-1) ease-out, color var(--dur-1) ease-out, transform var(--dur-1) ease-out; }
@media (hover: hover) and (pointer: fine) { .btn:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--on-primary); } }
.btn:active { transform: translateY(1px); }
.btn.secondary { background: transparent; border-color: var(--fg); color: var(--fg); }
@media (hover: hover) and (pointer: fine) { .btn.secondary:hover { background: var(--fg); border-color: var(--fg); color: var(--bg); } }
.btn.quiet { background: transparent; border-color: transparent; color: var(--link); padding-inline: 12px; }
@media (hover: hover) and (pointer: fine) { .btn.quiet:hover { background: var(--bg-2); border-color: transparent; color: var(--link); } }
.btn.sm { min-height: 40px; padding: 0 14px; font-size: var(--t-1); }
.btn.lg { min-height: 56px; padding: 0 28px; font-size: var(--t1); font-weight: 800; font-family: var(--font-semi); font-stretch: 100%; letter-spacing: .04em; text-transform: uppercase; }
.btn[aria-pressed="true"] { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.btn.is-loading { cursor: progress; color: transparent; }
.btn.is-loading::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 6px; margin: -3px 0 0 -11px; background: radial-gradient(circle at 3px 3px, var(--on-primary) 2.2px, transparent 2.8px) 0 0 / 8px 6px repeat-x; }
.btn.secondary.is-loading::after, .btn.quiet.is-loading::after { background-image: radial-gradient(circle at 3px 3px, var(--fg) 2.2px, transparent 2.8px); }

/* ---------------------------------------------------------------- 7. Forms */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label, legend, .legend { font-weight: 700; font-size: var(--t-1); color: var(--fg); }
.field .hint { font-size: var(--t-1); color: var(--fg-3); }
.field .err { font-size: var(--t-1); font-weight: 600; color: var(--red); }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { padding: 0; margin-bottom: var(--s3); }
.input, .select, .field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea, .toolbar input, .toolbar select { width: 100%; min-height: 44px; padding: 8px 12px; border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--fg); transition: border-color var(--dur-1) ease-out, background-color var(--dur-1) ease-out; }
.toolbar input, .toolbar select { width: auto; }
.select, .field select, .toolbar select { padding-right: 36px; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--fg-2) 50%), linear-gradient(-45deg, transparent 50%, var(--fg-2) 50%); background-position: right 16px center, right 10px center; background-size: 6px 6px; background-repeat: no-repeat; }
@media (hover: hover) and (pointer: fine) { .input:hover, .field input:hover, .field select:hover, .field textarea:hover { border-color: var(--fg-2); } }
.input:focus, .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--primary); }
.field.error input, .field.error select, .field.error textarea, .input[aria-invalid="true"] { border-color: var(--red); }
.input:disabled, .field input:disabled, .field select:disabled { opacity: .5; cursor: not-allowed; background: var(--bg-2); }
::placeholder { color: var(--fg-3); opacity: 1; }
textarea { min-height: 96px; resize: vertical; }
.live { min-height: 1.5em; font-size: var(--t-1); font-weight: 600; color: var(--fg-2); }
.live.ok { color: var(--green); }
.live.err { color: var(--red); }

/* pill checkbox group */
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { position: relative; display: inline-flex; }
.pill input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pill span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: var(--radius); font-size: var(--t-1); font-weight: 600; color: var(--fg-2); transition: background-color var(--dur-1) ease-out, border-color var(--dur-1) ease-out, color var(--dur-1) ease-out; }
@media (hover: hover) and (pointer: fine) { .pill:hover span { border-color: var(--fg); color: var(--fg); } }
.pill input:checked + span { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.pill input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.pill input:disabled + span { opacity: .5; }
.pill input:disabled { cursor: not-allowed; }
.check { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; font-size: var(--t-1); cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 0; }

/* chips and segmented controls */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { min-height: 40px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: var(--radius); background: transparent; color: var(--fg-2); font-weight: 600; font-size: var(--t-1); transition: background-color var(--dur-1) ease-out, border-color var(--dur-1) ease-out, color var(--dur-1) ease-out; }
@media (hover: hover) and (pointer: fine) { .chip:hover { border-color: var(--fg); color: var(--fg); } }
.chip[aria-pressed="true"] { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.seg { display: inline-flex; border: 1.5px solid var(--line); border-radius: var(--radius); }
.seg button { min-height: 40px; padding: 0 14px; border: 0; background: transparent; color: var(--fg-2); font-weight: 600; font-size: var(--t-1); position: relative; transition: background-color var(--dur-1) ease-out, color var(--dur-1) ease-out; }
.seg button + button { border-left: 1.5px solid var(--line); }
@media (hover: hover) and (pointer: fine) { .seg button:hover { color: var(--fg); background: var(--bg-2); } }
.seg button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.seg button:focus-visible { z-index: 1; }
.seg .short { display: none; }

/* ---------------------------------------------------------------- 8. Tabs, callouts, tables, states */
.tab { display: inline-flex; align-items: center; justify-content: center; min-width: 5.5em; padding: 7px 10px 7px 15px; font-size: var(--t-2); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; background: var(--fg); color: var(--bg); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 7px 50%); }
.tab.open { background: var(--green); color: var(--on-green); }
.tab.gone { background: var(--red); color: var(--on-red); }
.tab.watch { background: var(--amber); color: var(--on-amber); }
.tab.wait { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1.5px var(--fg); }
.tab.info { background: var(--tint); color: var(--on-tint); }
.tab.lg { font-size: var(--t-1); padding: 9px 12px 9px 18px; min-width: 7em; }
.callout { background: var(--tint); color: var(--tint-fg); padding: var(--s4) var(--s5); border-radius: var(--radius); --figure: var(--on-tint); --fg-3: var(--tint-fg); }
.callout b, .callout strong, .callout h3, .callout h4 { color: var(--on-tint); }
.callout.warn { background: color-mix(in srgb, var(--amber) 24%, var(--bg)); color: var(--fg); }
.callout.warn b, .callout.warn strong, .callout.warn h3, .callout.warn h4 { color: var(--fg); }
.scroll { overflow-x: auto; padding: 2px; scrollbar-color: var(--line) transparent; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: var(--t-1); min-width: 36rem; }
.table caption { text-align: left; caption-side: top; font-weight: 700; font-size: var(--t0); color: var(--fg); padding: 0 0 var(--s3); }
.table th { text-align: left; font-size: var(--t-2); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); font-weight: 700; padding: 10px 12px 8px; border-bottom: 2px solid var(--fg); vertical-align: bottom; }
.table td { padding: 12px; border-bottom: 1px solid var(--rule); vertical-align: top; color: var(--fg); }
.table td small { display: block; color: var(--fg-3); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table td.num { font-weight: 700; }
.table .best { color: var(--figure); font-weight: 800; }
.table tr.is-gone td { color: var(--fg-3); }
.skel { display: block; background: var(--bg-2); border-radius: var(--radius); color: transparent; min-height: 1em; }
.skel-row { height: 14px; margin: 10px 0; }
.skel.w-40 { width: 40%; } .skel.w-60 { width: 60%; } .skel.w-80 { width: 80%; }
.skel.sq { width: 1.2rem; height: 1.2rem; } .skel.price { width: 4rem; height: 1.6rem; } .skel.tab { width: 5.5rem; height: 1.6rem; } .skel.chart { height: 220px; margin-top: var(--s4); }
.empty { border: 1.5px dashed var(--line); border-radius: var(--radius); padding: var(--s6); }
.empty h3, .empty h2 { font-size: var(--t1); }
.empty p { color: var(--fg-2); margin-top: var(--s2); max-width: 50ch; }
.empty .btn { margin-top: var(--s4); }

/* ---------------------------------------------------------------- 9. Grade glyphs and stars */
.glyph { display: inline-flex; width: 1em; height: 1em; vertical-align: -.12em; flex: none; }
.glyph svg { width: 100%; height: 100%; display: block; }
.glyph-gr { color: var(--g-green); }
.glyph-bl { color: var(--g-blue); }
.glyph-bk, .glyph-dd { color: var(--g-black); }
.glyph-dd { width: 1.65em; }
.glyph-na { color: var(--fg-3); }
.glyph.lg { width: 1.5em; height: 1.5em; }
.glyph.lg.glyph-dd { width: 2.5em; }
.stars { display: inline-flex; gap: 2px; color: var(--figure); }
.stars svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.stars svg.on { fill: currentColor; }

/* ---------------------------------------------------------------- 10. Deal card */
.deals { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s4); }
.deal { display: flex; flex-direction: column; gap: var(--s3); background: var(--panel); border: 1px solid var(--panel-rule); border-radius: var(--radius); padding: var(--s5); min-width: 0; }
.deal-h { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); font-size: var(--t-1); }
.deal-grade { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--fg); }
.deal-store { color: var(--fg-3); text-align: right; }
.deal-name { font-size: var(--t1); font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.deal-name a { color: var(--fg); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .deal-name a:hover { text-decoration: underline; } }
.deal-two { color: var(--fg-2); font-size: var(--t-1); line-height: 1.5; }
.deal-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--rule); padding-top: var(--s3); }
.deal-price .fig { font-size: var(--t4); }
.deal-price s { color: var(--fg-3); }
.deal-price .off { font-weight: 700; color: var(--fg); }
.deal-60 { font-size: var(--t-1); color: var(--fg-3); }
.deal-sizes { font-size: var(--t-1); color: var(--fg-2); }
.deal-sizes .mine { background: var(--tint); color: var(--on-tint); padding: 1px 6px; font-weight: 800; border-radius: var(--radius); }
.deal-sizes .gone-sz { color: var(--fg-3); }
.deal-lock { display: flex; gap: 8px; align-items: flex-start; font-size: var(--t-1); color: var(--fg-2); }
.deal-lock .glyph { margin-top: .2em; }
.deal-f { margin-top: auto; border-top: 1px solid var(--rule); padding-top: var(--s3); font-size: var(--t-1); color: var(--fg-2); display: flex; flex-direction: column; gap: 4px; }
.deal-f b { color: var(--fg); font-weight: 700; }
.deal-f .ship, .deal-f .no { color: var(--fg-3); }
.deal.is-gone .deal-name a { color: var(--fg-2); }
.deal.is-gone .deal-price .fig { color: var(--fg-3); }

/* ---------------------------------------------------------------- 11. Price history chart */
.hist { position: relative; width: 100%; min-width: 0; }
.hist svg { display: block; width: 100%; height: auto; overflow: visible; }
.hist .ax { font-size: 12px; font-weight: 600; fill: var(--fg-3); font-variant-numeric: tabular-nums; }
.hist .gl { stroke: var(--rule); stroke-width: 1; }
.hist .ln { stroke: var(--figure); stroke-width: 2; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.hist .ar { fill: var(--figure); opacity: .12; }
.hist .pt { fill: var(--figure); stroke: var(--panel); stroke-width: 2; }
.hist .lbl { font-size: 12px; font-weight: 800; fill: var(--fg); letter-spacing: 0; text-transform: none; }
.hist .msrp { stroke: var(--fg-3); stroke-width: 1; stroke-dasharray: 3 3; }
.hist .blur { filter: blur(3px); opacity: .55; }
.hist .gate-line { stroke: var(--fg); stroke-width: 1.5; stroke-dasharray: 2 3; }
.hist-gate { position: absolute; display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; background: var(--fg); color: var(--bg); font-size: var(--t-2); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; border-radius: var(--radius); transform: translate(-50%, -50%); white-space: nowrap; transition: background-color var(--dur-1) ease-out, color var(--dur-1) ease-out; }
@media (hover: hover) and (pointer: fine) { .hist-gate:hover { background: var(--primary); color: var(--on-primary); } }

/* ---------------------------------------------------------------- 12. The board (home) */
.board { margin: var(--s2) var(--gutter) 0; background: var(--board); border: 1px solid var(--board-rule); border-radius: var(--radius); box-shadow: var(--shadow-board); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; min-height: min(calc(100vh - 60px - var(--s2) - var(--s6)), 960px); min-height: min(calc(100svh - 60px - var(--s2) - var(--s6)), 960px); }
.band { display: flex; align-items: center; justify-content: space-between; gap: var(--s6); padding: 18px var(--s6); }
.band .wm { font-size: 2.75rem; }
.band .wm a { color: inherit; text-decoration: none; }
.band .wm a:hover { color: inherit; }
.wm-sub { display: block; font-size: var(--t-2); font-weight: 600; letter-spacing: .18em; font-family: var(--font-semi); font-stretch: 100%; margin-top: 10px; color: var(--on-band-2); }
.clock { display: flex; gap: var(--s6); text-align: right; }
.clock > div { display: flex; flex-direction: column-reverse; }
.clock dd { margin: 0; font-size: var(--t3); font-weight: 800; font-family: var(--font-narrow); font-stretch: 100%; line-height: 1; font-variant-numeric: tabular-nums; text-transform: uppercase; white-space: nowrap; }
.clock dt { font-size: var(--t-2); letter-spacing: .12em; text-transform: uppercase; color: var(--on-band-2); margin-top: 6px; font-weight: 600; white-space: nowrap; }
.clock .sun dd { color: var(--amber); }
.bbody { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.brows { border-right: 1px solid var(--rule); padding: var(--s5) var(--s6) var(--s3); display: grid; grid-template-rows: auto 1fr; min-width: 0; }
.rows { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-rows: 1fr; border-top: 2px solid var(--fg); }
.brow { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, .65fr) minmax(0, .8fr) minmax(0, .75fr) auto; align-items: center; gap: var(--s4); border-top: 1px solid var(--row-rule); padding: 8px var(--row-pad); margin: 0; }
.brow + .brow { margin-top: var(--row-gap); }
.brow:first-child { border-top: 0; }
.brow .figs { display: contents; }
.brow .cat { font-weight: 800; font-size: var(--t3); font-family: var(--font-semi); font-stretch: 100%; text-transform: uppercase; letter-spacing: .01em; line-height: 1; color: var(--fg); min-width: 0; }
.brow .fig { font-size: 2.5rem; }
.brow .tab { justify-self: end; }
.bcol { padding: var(--s5) var(--s6) var(--s3); display: grid; grid-template-rows: auto 1fr auto; gap: var(--s3); min-width: 0; }
.dmds { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--fg); display: grid; grid-auto-rows: 1fr; align-content: start; }
.dmd { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) auto auto; gap: var(--s3); align-items: center; padding: 8px 0; border-bottom: 1px solid var(--rule); margin: 0; }
.dmd .glyph { font-size: 1rem; }
.dmd-n { min-width: 0; }
.dmd-n a { color: var(--fg); text-decoration: none; font-weight: 700; }
@media (hover: hover) and (pointer: fine) { .dmd-n a:hover { text-decoration: underline; } }
.dmd-n small { display: block; color: var(--fg-3); font-size: var(--t-1); margin-top: 2px; overflow-wrap: anywhere; }
.dmd .fig { font-size: var(--t3); }
.dmd .tab { min-width: 6em; }
.dmd.is-gone .fig { color: var(--fg-3); }
.dmd.is-gone .dmd-n a { color: var(--fg-2); }
.totals { background: var(--tint); color: var(--tint-fg); --figure: var(--on-tint); --fg-3: var(--tint-fg); padding: 12px var(--s5) 12px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2) var(--s4); border-radius: var(--radius); }
.totals .fig { font-size: var(--t4); }
.totals .fig .lbl { color: var(--tint-fg); }
.totals p { grid-column: 1 / -1; font-size: var(--t-1); margin: 0; line-height: 1.45; }
.strip { border-top: 2px solid var(--fg); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s2) var(--s5); padding: 12px var(--s6) var(--s2); border-radius: 0 0 var(--radius) var(--radius); }
.strip-h { font-weight: 800; font-size: var(--t2); font-family: var(--font-semi); font-stretch: 100%; text-transform: uppercase; line-height: 1.05; letter-spacing: 0; color: var(--fg); }
.strip-h small { display: block; font-size: var(--t-2); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--fg-3); margin-top: 4px; font-family: var(--font-semi); font-stretch: 100%; }
.strip-tog { display: none; }
.stiles { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; min-width: 0; }
.stile { display: flex; flex-direction: column; justify-content: center; width: 7.5rem; flex: 0 0 auto; border: 2px solid var(--fg); border-radius: var(--radius); background: var(--bg); padding: 8px 12px; transition: border-color var(--dur-1) ease-out; }
@media (hover: hover) and (pointer: fine) { .stile:hover { border-color: var(--fg-2); } }
.stile:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.stile input { border: 0; background: transparent; padding: 0; margin: 0; width: 100%; min-width: 0; min-height: 30px; font-weight: 800; font-size: var(--t3); font-family: var(--font-narrow); font-stretch: 100%; font-variant-numeric: tabular-nums; line-height: 1.1; color: var(--fg); outline: none; }
.stile input::placeholder { color: var(--fg-3); font-weight: 700; }
.stile label { font-size: var(--t-2); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); font-weight: 700; margin-top: 4px; font-family: var(--font-semi); font-stretch: 100%; }
.stile.mail { width: auto; flex: 1 1 15rem; }
.stile.mail input { font-size: var(--t0); font-family: var(--font-semi); font-stretch: 100%; font-weight: 600; min-height: 33px; }
.stile.is-invalid, .stile:has([aria-invalid="true"]) { border-color: var(--red); }
@media (hover: hover) and (pointer: fine) { .stile.is-invalid:hover { border-color: var(--red); } }
.strip-err { flex: 1 1 100%; margin: 0; font-size: var(--t-1); font-weight: 600; color: var(--red); }
.strip-err:empty { display: none; }
.strip .btn { align-self: stretch; }
.strip-note { grid-column: 1 / -1; font-size: var(--t-2); color: var(--fg-3); margin: 0; }
.board-note { font-size: var(--t-2); color: var(--fg-3); margin: var(--s3) var(--gutter) 0; letter-spacing: .02em; }

/* ---------------------------------------------------------------- 13. Home sections below the board */
.works { border-top: 2px solid var(--fg); }
.works > div { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2fr); gap: var(--s4); padding: var(--s4) 0; border-bottom: 1px solid var(--rule); }
.works dt { font-weight: 800; font-family: var(--font-semi); font-stretch: 100%; text-transform: uppercase; font-size: var(--t2); line-height: 1.05; color: var(--fg); }
.works dd { margin: 0; color: var(--fg-2); }
.log { list-style: none; margin: 0; padding: 0; background: var(--panel); border: 1px solid var(--panel-rule); border-radius: var(--radius); }
.log li { display: grid; grid-template-columns: 4.25rem minmax(0, 1fr); gap: var(--s3); padding: 10px var(--s4); border-bottom: 1px solid var(--rule); font-size: var(--t-1); margin: 0; color: var(--fg-2); align-items: baseline; }
.log li:last-child { border-bottom: 0; }
.log time { font-weight: 800; font-family: var(--font-narrow); font-stretch: 100%; font-variant-numeric: tabular-nums; font-size: var(--t0); color: var(--figure); }
.log .glyph { margin-right: 6px; }
.log b { color: var(--fg); }
.log-h { font-size: var(--t-1); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); font-weight: 700; margin-bottom: var(--s3); }
.demo { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--s5); align-items: start; }
.demo-name { font-size: var(--t3); letter-spacing: -.015em; }
.demo-name a { color: var(--fg); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .demo-name a:hover { text-decoration: underline; } }
.demo-grade { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: var(--s3); font-weight: 700; }
.demo-grade .why { font-weight: 500; color: var(--fg-3); }
.demo-two { margin-top: var(--s3); color: var(--fg-2); max-width: 60ch; }
.demo .hist { margin-top: var(--s5); }
.demo-note { margin-top: var(--s3); font-size: var(--t-1); color: var(--fg-3); }
.score { display: flex; align-items: baseline; gap: var(--s3); margin-bottom: var(--s3); }
.score .fig { font-size: var(--t5); }
.score span { color: var(--fg-3); font-size: var(--t-1); }
.pc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.pc h4 { font-size: var(--t-1); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); margin-bottom: var(--s2); }
.pc ul { padding-left: 1.1em; font-size: var(--t-1); color: var(--fg-2); }
.fit { margin-top: var(--s3); font-size: var(--t-1); color: var(--fg-2); }
.fit b { color: var(--fg); }
.src { margin-top: var(--s3); font-size: var(--t-2); color: var(--fg-3); line-height: 1.5; }
.locker { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s6); align-items: start; }
.locker .copy p { color: var(--fg-2); }
.locker .copy ul { margin-top: var(--s4); color: var(--fg-2); }
.lk-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--fg); }
.lk-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--rule); margin: 0; align-items: center; }
.lk-list a { color: var(--fg); font-weight: 700; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .lk-list a:hover { text-decoration: underline; } }
.lk-list small { display: block; color: var(--fg-3); }
.cal { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; }
.cal-m { background: var(--panel); border: 1px solid var(--panel-rule); border-radius: var(--radius); padding: var(--s3); display: flex; flex-direction: column; gap: 8px; min-height: 9rem; min-width: 0; }
.cal-m .m { font-weight: 800; font-family: var(--font-semi); font-stretch: 100%; text-transform: uppercase; font-size: var(--t1); line-height: 1; color: var(--fg); }
.cal-m .m small { display: block; font-size: var(--t-2); font-weight: 600; letter-spacing: .08em; color: var(--fg-3); margin-top: 4px; font-family: var(--font-semi); font-stretch: 100%; }
.cal-m .tab { align-self: flex-start; }
.cal-m p { font-size: var(--t-2); line-height: 1.4; color: var(--fg-2); margin: 0; }
.cal-m.now { border: 2px solid var(--fg); padding: calc(var(--s3) - 1px); }
.grades { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--fg); }
.grades li { display: grid; grid-template-columns: 3rem minmax(0, 13rem) minmax(0, 1fr); gap: var(--s4); padding: var(--s4) 0; border-bottom: 1px solid var(--rule); align-items: baseline; margin: 0; }
.grades .glyph { font-size: 1.25rem; align-self: center; }
.grades h3 { font-size: var(--t1); }
.grades p { color: var(--fg-2); }
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6); }
.plan { border-top: 2px solid var(--fg); padding-top: var(--s4); display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.plan h3 { font-size: var(--t1); }
.plan .fig { font-size: var(--t6); }
.plan .fig small { font-size: var(--t-1); font-weight: 600; font-family: var(--font-semi); font-stretch: 100%; color: var(--fg-3); margin-left: 8px; letter-spacing: 0; }
.plan ul { list-style: none; margin: 0; padding: 0; }
.plan li { padding: 8px 0; border-bottom: 1px solid var(--rule); font-size: var(--t-1); color: var(--fg-2); margin: 0; }
.plan li.off { color: var(--fg-3); }
.plan .btn { align-self: flex-start; margin-top: var(--s3); }
.plan .fine { font-size: var(--t-2); color: var(--fg-3); }

/* ---------------------------------------------------------------- 14. Breakpoints */
@media (max-width: 1100px) {
  .brow .fig { font-size: 2.125rem; }
  .brow .cat { font-size: var(--t2); }
  .band .wm { font-size: 2.25rem; }
  .clock { gap: var(--s5); }
  .clock dd { font-size: var(--t2); }
  .cal { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  :root { --gutter: 20px; }
  .nav-in { gap: var(--s3); }
  .nav-toggle { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; min-width: 44px; min-height: 44px; padding: 0 12px; border: 1.5px solid var(--line); border-radius: var(--radius); background: transparent; color: var(--fg); font-weight: 600; font-size: var(--t-1); transition: background-color var(--dur-1) ease-out, color var(--dur-1) ease-out; }
  .nav-toggle[aria-expanded="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
  [data-page="home"] .nav-toggle { margin-left: 0; }
  .nav-panel { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--bg); border-bottom: 1px solid var(--rule); padding: var(--s3) var(--gutter) var(--s5); flex-direction: column; align-items: stretch; gap: var(--s3); }
  .nav-toggle[aria-expanded="true"] + .nav-panel { display: flex; }
  .nav-panel ul { flex-direction: column; gap: 0; }
  .nav-panel ul a { min-height: 48px; padding: 0; width: 100%; border-bottom: 1px solid var(--rule); box-shadow: none; }
  .nav-panel li:first-child a { padding-left: 0; }
  .nav-panel ul a:hover, .nav-panel ul a[aria-current="page"] { box-shadow: none; }
  .nav-panel ul a[aria-current="page"] { font-weight: 800; }
  .nav-acts { margin: var(--s2) 0 0; justify-content: space-between; }
  .foot-in { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
  .grid { gap: var(--s4); }
  .col-3, .col-4 { grid-column: span 6; }
  .col-5, .col-6, .col-7, .col-8, .col-9 { grid-column: span 12; }
  .board { min-height: 0; }
  .bbody { grid-template-columns: minmax(0, 1fr); }
  .brows { border-right: 0; border-bottom: 1px solid var(--rule); padding: var(--s5) var(--s5) var(--s5); }
  .bcol { padding: var(--s5) var(--s5) var(--s5); }
  .band { padding: var(--s5) var(--s5); }
  .strip { padding: var(--s4) var(--s5); grid-template-columns: 1fr; }
  .strip .btn { justify-self: stretch; }
  .demo, .locker, .plans { grid-template-columns: minmax(0, 1fr); }
  .plans { gap: var(--s5); }
  .works > div { grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
  .sec { padding: var(--s7) 0 var(--s4); }
  .sec + .sec { padding-top: var(--s6); }
  .foot { margin-top: var(--s8); }
}
@media (max-width: 560px) {
  :root { --gutter: 16px; }
  h1 { font-size: var(--t4); }
  h2 { font-size: var(--t3); }
  .col-3, .col-4 { grid-column: span 12; }
  .seg .long { display: none; }
  .seg .short { display: inline; }
  .board { margin: 0; border-left: 0; border-right: 0; border-radius: 0; }
  .band { flex-direction: column; align-items: stretch; gap: var(--s4); padding: var(--s4) var(--gutter) var(--s4); }
  .band .wm { font-size: 2.25rem; }
  .clock { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3) var(--s4); text-align: left; }
  .clock dd, .clock dt { white-space: normal; }
  .clock dd { font-size: var(--t2); }
  .brows, .bcol { padding: var(--s4) var(--gutter); }
  .brow { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "cat tab" "figs figs"; gap: var(--s2) var(--s3); padding-block: var(--s3); }
  .brow .cat { grid-area: cat; font-size: var(--t2); }
  .brow .tab { grid-area: tab; }
  .brow .figs { grid-area: figs; display: flex; gap: var(--s5); }
  .brow .fig { font-size: var(--t4); }
  .dmd { grid-template-columns: 1.4rem minmax(0, 1fr) auto; grid-template-areas: "g n p" "g n t"; row-gap: 4px; }
  .dmd .glyph { grid-area: g; }
  .dmd-n { grid-area: n; }
  .dmd .fig { grid-area: p; justify-self: end; font-size: var(--t2); }
  .dmd .tab { grid-area: t; justify-self: end; min-width: 0; }
  .totals { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--s4); }
  .totals .fig { font-size: var(--t3); }
  /* the docked sheet: one row (heading, Get dialed) until a tap, the toggle, keyboard focus or Get dialed opens the tiles */
  .strip { position: sticky; bottom: 0; z-index: 5; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "h b"; align-items: center; gap: var(--s2) var(--s3); padding: 7px var(--gutter); }
  .strip-h { grid-area: h; font-size: var(--t0); }
  .strip-h small, .strip-t { display: none; }
  .strip-tog { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; text-transform: inherit; letter-spacing: inherit; line-height: inherit; }
  .strip-tog svg { width: 14px; height: 14px; flex: none; transition: transform var(--dur-2) var(--ease-out); }
  .strip-tog[aria-expanded="true"] svg { transform: rotate(180deg); }
  .strip-note { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
  .strip .btn.lg { grid-area: b; justify-self: end; min-height: 50px; padding: 0 18px; font-size: var(--t-1); }
  .stiles { grid-area: t; display: none; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .strip.is-open .stiles { display: grid; }
  .strip.is-open { grid-template-areas: "h b" "t t"; padding-bottom: var(--s3); }
  .stile { width: auto; min-width: 0; padding: 6px 8px; }
  .stile input { font-size: var(--t2); min-height: 26px; }
  .stile.mail { grid-column: 1 / -1; }
  .stile label { letter-spacing: .08em; white-space: nowrap; }
  .stile label .ext { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
  .strip-err { grid-column: 1 / -1; }
  .board-note { margin: var(--s3) var(--gutter) 0; }
  .cal { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cal-m { min-height: 0; }
  .grades li { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .grades p { grid-column: 2; }
  .log li { grid-template-columns: 3.5rem minmax(0, 1fr); }
  .pc { grid-template-columns: minmax(0, 1fr); }
  .deal { padding: var(--s4); }
  .deals { grid-template-columns: minmax(0, 1fr); }
  .table { min-width: 30rem; }
}
@media (pointer: coarse) {
  .chip, .seg button, .pill span, .btn.sm, .status, .foot-nav a { min-height: 44px; }
  .nav-panel ul a { min-height: 48px; }
  .hist-gate { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .fig .v { transition: none; }
  .fig .v.in { transform: none; opacity: 1; }
  .btn:active { transform: none; }
}

/* ===== system additions promoted from page builds (1 Nov 2026) ===== */
[hidden] { display: none !important; }
.panel-h h2 { font-size: var(--t1); font-weight: 700; letter-spacing: -.01em; line-height: 1.15; }
.live:empty { min-height: 0; }
.table caption > span { display: block; max-width: calc(100vw - 2 * var(--gutter) - 4px); }
.seg button { min-height: 44px; min-width: 44px; padding: 10px 14px; }
.pill span { padding: 9px 14px; }
.pill input:disabled + span { opacity: 1; border-style: dashed; color: var(--fg-3); }
.pill input:checked:disabled + span { border-style: solid; }
.field select, .select { background-color: var(--bg); }
.hist .lbl, .cv-lbl, .cv-now-lbl { paint-order: stroke; stroke: var(--panel, var(--bg)); stroke-width: 4px; stroke-linejoin: round; }

/* ===== deal card: finish fixes from the deals build (1 Nov 2026) ===== */
.deal-h { min-height: calc(var(--t-2) + 14px); }     /* the tab's height, so the header row is one height with or without a GONE tab */
.deal-f { margin-top: 0; }
.deal-sizes, .deal-lock { margin-top: auto; }        /* the stock line, the lock line and the landed foot sit together at the card bottom; any slack opens above them */
.deal-sizes + .deal-lock { margin-top: 0; }
.deal.is-gone .deal-f b { color: var(--fg-2); }      /* the record's figure, muted like the rest of a gone card */

/* ===== motion (2 Nov 2026): the board updates at the sweep =====
   Tokens: --dur-1 feedback, --dur-2 state, --dur-3 layout and overlay, --dur-4 the one entrance; --ease-out, --ease-in-out.
   Budget: transform, opacity, clip-path, stroke-dashoffset and colour only. Content is visible at rest without JavaScript:
   the state classes below (is-stamp, is-draw, is-land, is-in, is-filled) are added by a controller after the content is in
   place, never before. The reduced-motion path for every rule here is at the end of the block. */

/* feedback: every control acknowledges a press (--dur-1) */
.btn { transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out); }
.btn:active:not(:disabled):not([aria-disabled="true"]) { transform: scale(.98); }
.chip, .seg button, .pill span, .nav-toggle { transition-duration: var(--dur-1); transition-timing-function: var(--ease-out); }
.chip:active:not([aria-pressed="true"]), .seg button:active:not([aria-pressed="true"]) { background: var(--bg-2); }
.stile { transition: border-color var(--dur-1) var(--ease-out); }
.input, .select, .field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea, .toolbar input, .toolbar select { transition-duration: var(--dur-1); }
.tab { transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
@keyframes m-fade { from { opacity: 0; } }
/* a status line or an error line fades in as it is written (opacity only, so it stays under reduced motion) */
.live.ok, .live.err, .strip-err:not(:empty), .field.error .err { animation: m-fade var(--dur-1) ease-out both; }

/* state: a tab stamps in with its word already there (--dur-2); set --d for its place in a sequence */
@keyframes m-stamp { from { transform: scale(1.06); opacity: .6; } }
.tab.is-stamp { animation: m-stamp var(--dur-2) var(--ease-out) both; animation-delay: var(--d, 0ms); }
/* the figure slide-in: an explicit --d (delay) wins over the indexed 45 ms stagger */
.fig .v { transition-delay: var(--d, calc(var(--i, 0) * 45ms)); }

/* the grade glyphs: one 1.5 px stroke at every size, a filled state, and a drawn entrance (a wipe along the stroke's own box) */
.glyph svg { stroke-width: 1.5; overflow: visible; }
.glyph svg > *, .stars svg path { vector-effect: non-scaling-stroke; }
.glyph.outline svg > * { fill-opacity: 0; transition: fill-opacity var(--dur-2) var(--ease-out); }
.glyph.outline.is-filled svg > *, [aria-pressed="true"] > .glyph.outline svg > * { fill-opacity: 1; }
@keyframes m-wipe { from { clip-path: inset(-2px 100% -2px -2px); } to { clip-path: inset(-2px); } }
.glyph.is-draw { animation: m-wipe var(--dur-2) var(--ease-out) both; animation-delay: var(--d, 0ms); }

/* the empty state's drawn mark from the glyph set, above its heading and the next action */
.empty .empty-mark { display: flex; font-size: var(--t4); color: var(--fg-3); margin-bottom: var(--s3); }
@keyframes m-ring { from { stroke-dashoffset: 12; } }
.empty:not([hidden]) .empty-mark { animation: m-fade var(--dur-2) ease-out both; }
.empty:not([hidden]) .empty-mark svg > * { animation: m-ring var(--dur-3) var(--ease-out) both; }

/* the band's one quiet mark: a thin ridge line in the band's tint along its bottom edge */
.band { position: relative; }
.band-ridge { position: absolute; left: 0; right: 0; bottom: 0; width: auto; height: 12px; display: block; color: var(--on-band-2); opacity: .55; pointer-events: none; }

/* the price history: a tint fill under the line, the x axis with its sweep ticks, a labelled tracked-low rule;
   the line draws in (--dur-3), the fill fades under it, the rule and the last point land after it, the gate slides in with the line */
.hist .ar { fill: var(--on-tint); opacity: .14; }
.hist .axl, .hist .tk { stroke: var(--line); stroke-width: 1; fill: none; }
.hist .low { stroke: var(--fg-2); stroke-width: 1; stroke-dasharray: 6 4; }
.hist .low-lbl { font-size: 12px; font-weight: 700; fill: var(--fg-2); paint-order: stroke; stroke: var(--panel, var(--bg)); stroke-width: 4px; stroke-linejoin: round; }
@keyframes m-dash { from { stroke-dashoffset: var(--len); } to { stroke-dashoffset: 0; } }
.hist .ln.is-draw { stroke-dasharray: var(--len); animation: m-dash var(--dur-3) var(--ease-out) both; }
.hist .ar.is-draw { animation: m-fade var(--dur-3) var(--ease-out) both; }
@keyframes m-land { from { opacity: 0; transform: scale(.8); } }
.hist .pt.is-land { transform-box: fill-box; transform-origin: center; animation: m-land var(--dur-2) var(--ease-out) both; animation-delay: var(--dur-3); }
.hist .lbl.is-land, .hist .low.is-land, .hist .low-lbl.is-land { animation: m-fade var(--dur-2) ease-out both; animation-delay: var(--dur-3); }
@keyframes m-gate { from { opacity: 0; translate: -8px 0; } }
.hist-gate.is-in { animation: m-gate var(--dur-3) var(--ease-out) both; }

/* a panel that opens under its bar: in from the bar's edge (--dur-2), out faster */
@media (max-width: 820px) {
  .nav-panel { opacity: 0; transform: translateY(-6px); transition-property: opacity, transform, display; transition-duration: 160ms; transition-timing-function: ease-out; transition-behavior: allow-discrete; }   /* 160 ms: the thesis's exit, faster than the entrance */
  .nav-toggle[aria-expanded="true"] + .nav-panel { opacity: 1; transform: none; transition-duration: var(--dur-2); transition-timing-function: var(--ease-out); }
  @starting-style { .nav-toggle[aria-expanded="true"] + .nav-panel { opacity: 0; transform: translateY(-6px); } }
}
/* the docked sizes sheet opens with grid-template-rows 0fr to 1fr, never height; closed, it is also hidden from focus */
@media (max-width: 560px) {
  .strip { grid-template-areas: "h b" "t t"; row-gap: 0; }
  .strip.is-open { padding-bottom: 7px; }
  .strip-sheet { grid-area: t; display: grid; grid-template-rows: 1fr; overflow: hidden; transition: grid-template-rows var(--dur-2) var(--ease-out), visibility 0s; }
  /* without script the sheet stays open (the form is content); site.js adds has-js, and only then does the closed state exist */
  .strip.has-js:not(.is-open) .strip-sheet { grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 160ms var(--ease-out), visibility 0s linear 160ms; }   /* 160 ms: the exit, faster than the --dur-2 entrance, as the nav panel */
  .strip-sheet > .stiles { display: grid; grid-area: 1 / 1; min-height: 0; padding: 0; }
  /* the sheet's breathing room is two zero-cost grid items (with the gap), so the closed track is exactly 0; padding would survive min-height: 0 */
  .strip-sheet > .stiles::before, .strip-sheet > .stiles::after { content: ""; grid-column: 1 / -1; height: 2px; }
  .strip-sheet > .stiles::after { height: 0; }
  .strip.is-open .strip-sheet { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows var(--dur-2) var(--ease-out), visibility 0s; }
}
@media (min-width: 561px) {
  .strip-sheet { display: contents; }
}

/* reduced motion for everything above: the state change stays (colour, opacity, the final position); the travel goes */
@media (prefers-reduced-motion: reduce) {
  .btn:active:not(:disabled):not([aria-disabled="true"]) { transform: none; }
  .tab.is-stamp, .glyph.is-draw, .empty:not([hidden]) .empty-mark svg > *, .hist .ln.is-draw, .hist .ar.is-draw, .hist .is-land, .hist-gate.is-in, .nav-toggle[aria-expanded="true"] + .nav-panel { animation: none; }
  .hist .ln.is-draw { stroke-dasharray: none; }
  .nav-panel { transition: none; transform: none; }
  .strip-sheet { transition: none; }
  .glyph.outline svg > * { transition: none; }
}

/* ===== the ground (2 Nov 2026): an original line-art ski-area map behind the page, a few percent of the ink, tinted by the theme.
   The SVG is drawn in currentColor strokes and used as a mask over the ink colour, so light and dark each get their own tint;
   the laminate board, panels and tiles sit on top of it untouched. ===== */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-color: var(--fg);
  -webkit-mask: url(art/ground-map.svg) no-repeat center -24px / max(1440px, 100vw) auto; mask: url(art/ground-map.svg) no-repeat center -24px / max(1440px, 100vw) auto;
  opacity: .065; }
/* pages without the board: the map rises from the bottom of the viewport and fades out before the heading and lede zone,
   so it is the ground the panels sit on, never a watermark under prose; phones see the whole sheet, not a slice of its summit */
body:not([data-page="home"])::before {
  -webkit-mask-image: url(art/ground-map.svg), linear-gradient(to bottom, transparent 0, transparent 30vh, rgb(0 0 0) 58vh);
  mask-image: url(art/ground-map.svg), linear-gradient(to bottom, transparent 0, transparent 30vh, rgb(0 0 0) 58vh);
  -webkit-mask-position: center bottom, 0 0; mask-position: center bottom, 0 0;
  -webkit-mask-size: max(1440px, 100vw) auto, 100% 100%; mask-size: max(1440px, 100vw) auto, 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-composite: source-in; mask-composite: intersect; }
@media (max-width: 560px) {
  body::before { -webkit-mask-size: 100vw auto; mask-size: 100vw auto; -webkit-mask-position: center bottom; mask-position: center bottom; }
  body:not([data-page="home"])::before { -webkit-mask-size: 100vw auto, 100% 100%; mask-size: 100vw auto, 100% 100%; } }
@media (prefers-reduced-transparency: reduce) { body::before { display: none; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body::before { opacity: .09; } }
:root[data-theme="dark"] body::before { opacity: .09; }
@media print { body::before { display: none; } }

/* ===== finish (2 Nov 2026): the surfaces the design did not draw, and the press every control answers =====
   The hover rules above are gated behind (hover: hover) and (pointer: fine), so a tap never leaves a chip or a secondary button
   stuck in its hover fill. In their place every pressable element has a pressed state (controls scale .98 over --dur-1, text links
   give to 72% opacity, the read pages' own pattern), so the OS tap highlight can go. Reduced motion keeps the opacity and drops
   the scale, at the end of the block. Durations and curves are the tokens; nothing here adds one. */
body { -moz-osx-font-smoothing: grayscale; }
.tile { accent-color: var(--primary); caret-color: var(--primary); }   /* resolved on the tile: blue in light, ink on a lit tile in dark */
a, button, input, select, textarea, label, summary, [tabindex], .strip { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
p, li, dd, .lede, .note { text-wrap: pretty; }
.deal-price, .deal-f b, .vt-was { font-variant-numeric: tabular-nums lining-nums; }   /* a price line compared across cards lines up */
.scroll { overscroll-behavior-x: contain; }   /* a sideways table never hands its overscroll to the page's back swipe */
/* pressed states */
a { transition: color var(--dur-1) ease-out, text-decoration-color var(--dur-1) ease-out, opacity var(--dur-1) ease-out; }
a:active:not(.btn):not(.hist-gate):not(.filt-setsizes):not(.skip) { opacity: .72; }
.nav-panel ul a { transition: color var(--dur-1) ease-out, box-shadow var(--dur-1) ease-out, opacity var(--dur-1) ease-out; }
.chip, .pill span, .seg button { transition-property: background-color, border-color, color, transform; }
.nav-toggle { transition-property: background-color, border-color, color, transform; }
.strip-tog { transition: transform var(--dur-1) var(--ease-out); }
.chip:active, .seg button:active:not([aria-pressed="true"]), .pill:active span, .nav-toggle:active, .strip-tog:active { transform: scale(.98); }
.hist-gate { transition: background-color var(--dur-1) ease-out, color var(--dur-1) ease-out, scale var(--dur-1) var(--ease-out); }
.hist-gate:active { scale: .98; }   /* the individual property composes with the inline translate the chart sets on it */
/* rows arrive as a list (the stores table, the gear index, a product's store table, a Locker row): from a hair below to rest over
   --dur-2, a 30 ms sibling stagger capped at the eighth, set by E.arrive; a table row moves through its cells. At rest, and
   without script, a row is simply there. */
.arrive:not(tr), tr.arrive > * { transition: opacity var(--dur-2) ease-out, transform var(--dur-2) var(--ease-out); transition-delay: calc(var(--i, 0) * 30ms); }
.is-arrive:not(tr), tr.is-arrive > * { opacity: 0; transform: translateY(4px); transition: none; }
/* keyboard: Escape closes the nav at once (engine.js sets data-instant for the flush the panel closes in) */
.nav-toggle[data-instant] + .nav-panel { transition-duration: 0s; }
/* the .55 s figure slide is the home board's entrance; elsewhere a figure answering a press (a count, a lane price) is a state change */
body:not([data-page="home"]) .fig .v { transition-duration: var(--dur-2); }
@media (prefers-reduced-motion: reduce) {
  .chip:active, .seg button:active:not([aria-pressed="true"]), .pill:active span, .nav-toggle:active, .strip-tog:active { transform: none; }
  .hist-gate:active { scale: none; }
  .arrive:not(tr), tr.arrive > *, .is-arrive:not(tr), tr.is-arrive > * { transition: none; opacity: 1; transform: none; }
}

/* ===== facets (2 Nov 2026): the controls the deals board and the gear index share =====
   A chip carries the count it would leave (tabular, in the caption colour; muted and dashed when it would leave nothing), a grade
   chip carries the drawn glyph beside its word, the band segment carries the same count, an applied filter is a token in the
   pressed-chip fill with a drawn close mark, and a card's grade word, store and brand are links to the filtered board. */
.chip { display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
.chip .glyph { font-size: .95em; margin-right: 1px; }
.chip[aria-pressed="true"] .glyph { color: inherit; }   /* on the ink fill the glyph takes the chip's text colour; the word carries the grade */
.chip-n { font-variant-numeric: tabular-nums lining-nums; font-weight: 600; color: var(--fg-3); }
.chip[aria-pressed="true"] .chip-n, .seg button[aria-pressed="true"] .chip-n { color: inherit; opacity: .72; }
.chip.is-none:not([aria-pressed="true"]) { color: var(--fg-3); border-style: dashed; }
.seg button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
.seg button.is-none:not([aria-pressed="true"]) { color: var(--fg-3); }
.tokens { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.token { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 10px 0 14px; border: 1.5px solid var(--fg); border-radius: var(--radius); background: var(--fg); color: var(--bg); font-weight: 600; font-size: var(--t-1); white-space: nowrap; transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out); }
.token .x { width: 12px; height: 12px; flex: none; }
@media (hover: hover) and (pointer: fine) { .token:hover { background: var(--fg-2); border-color: var(--fg-2); } }
.token:active { transform: scale(.98); }
a.deal-grade, a.deal-store, .deal-brand { text-decoration: none; }
a.deal-grade { color: var(--fg); }
a.deal-store { color: var(--fg-3); }
.deal-brand { color: inherit; }
@media (hover: hover) and (pointer: fine) {
  a.deal-grade:hover, a.deal-store:hover, .deal-brand:hover { text-decoration: underline; }
  a.deal-store:hover { color: var(--fg-2); }
}
/* the home board's paths to the filtered board: a category row's name and the black-diamond heading */
.brow .cat a { color: inherit; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .brow .cat a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; } }
.bh .bh-link { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--line); text-underline-offset: .24em; }
@media (hover: hover) and (pointer: fine) { .bh .bh-link:hover { color: var(--fg); text-decoration-color: currentColor; } }
/* a board caption's sub (the count, the link to the full board): "· <link>" moves as one unit when the caption wraps;
   on a phone the sub takes its own line, and the separator, which the line break now does the work of, is dropped */
.bh .bh-sub-nw { white-space: nowrap; }
@media (max-width: 560px) { .bh .bh-sub { display: block; white-space: normal; margin-top: 2px; } .bh .bh-sep { display: none; } }
@media (pointer: coarse) { .token { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .token:active { transform: none; } }

/* the lockup's focus ring hugs the tab, not the 44 px link box around it (the target stays 44 px) */
.wm-nav:focus-visible, .wm-link:focus-visible { outline: none; }
.wm-nav:focus-visible .wm-svg, .wm-link:focus-visible .wm-tab { outline: 2px solid var(--focus); outline-offset: 3px; }

/* ===== sign-up (3 Nov 2026): the step chrome, the provider buttons, and the board strip's way into them =====
   join.html asks one question to a screen. The chrome is the board's own grammar and nothing new: a 2 px ink rule opens
   each question the way it opens a board column, and the progress indicator is that rule run out over a hairline to the
   step you are on, with a tick and a tracked caption under each step. The provider buttons are the secondary button
   carrying a monochrome drawn mark in currentColor, so neither theme has to invert a second colour field. Without script
   every step is visible and the progress chrome is simply not rendered (there are no steps, only six sections). */

/* the question */
.jn-step { border: 0; border-top: 2px solid var(--fg); margin: 0; padding: var(--s4) 0 0; min-width: 0; }
.jn-step + .jn-step { margin-top: var(--s7); }
.jn-step[hidden] + .jn-step { margin-top: 0; }   /* in the wizard the one visible step always follows hidden ones; only the no-script stack needs the rhythm */
.jn-step > legend { float: left; width: 100%; margin: 0 0 var(--s3); padding: 0; }
.jn-step > legend + * { clear: both; }
.jn-step > legend h2:focus-visible { outline-offset: 6px; }
.jn-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s6); }
.jn-acts .btn.quiet { margin-left: var(--s5); }   /* Skip sits clear of Continue, not flung to the far edge of the column */

/* the progress indicator: the heavy rule run out to the step you are on, a tick and a caption under each one */
.jn-prog { margin: 0 0 var(--s6); }
.jn-ticks { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border-top: 1px solid var(--rule); }
.jn-ticks::before { content: ""; position: absolute; left: 0; top: -1px; width: 100%; height: 2px; background: var(--fg); transform: scaleX(var(--p, 0)); transform-origin: left center; transition: transform var(--dur-2) var(--ease-out); }
.jn-ticks li { margin: 0; padding: 0; min-width: 0; }
.jn-tick { display: block; width: 1.5px; height: 9px; background: var(--rule); transition: background-color var(--dur-2) var(--ease-out); }
.jn-tl { display: block; margin-top: 6px; font-family: var(--font-semi); font-stretch: 100%; font-size: var(--t-2); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; line-height: 1.2; color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color var(--dur-2) var(--ease-out); }
.jn-ticks li[data-s="done"] .jn-tick, .jn-ticks li[data-s="now"] .jn-tick { background: var(--fg); }
.jn-ticks li[data-s="now"] .jn-tick { width: 2px; height: 13px; }
.jn-ticks li[data-s="done"] .jn-tl { color: var(--fg-2); }
.jn-ticks li[data-s="now"] .jn-tl { color: var(--fg); font-weight: 800; }
/* what is still to come is unmarked run, not a labelled list: no tick and no caption until the step is reached. The rule
   itself says how far along the run you are, and the page never states how many steps there are. The cells keep their
   boxes, so a tick never shifts sideways as the rule advances. */
.jn-ticks li[data-s="next"] .jn-tick, .jn-ticks li[data-s="next"] .jn-tl { visibility: hidden; }

/* the provider buttons: the secondary button, the mark drawn as a path in currentColor, the word beside it */
.btn.prov { gap: 10px; padding: 0 18px; }
.btn.prov .prov-m { display: block; flex: none; }

/* the home board's strip: the four size tiles became one link into the wizard, beside the email tile it keeps */
.strip-sizes { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 0 14px; flex: 1 1 14rem; max-width: 22rem; border: 1.5px solid var(--line); border-radius: var(--radius); background: transparent; color: var(--fg); font-weight: 700; font-size: var(--t-1); text-decoration: none; white-space: nowrap; transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out); }
.strip-sizes svg { width: 14px; height: 14px; flex: none; }
.strip-sizes .strip-vals { font-family: var(--font-narrow); font-stretch: 100%; font-weight: 800; font-size: var(--t1); line-height: 1; font-variant-numeric: tabular-nums lining-nums; }
.strip-sizes small { font-size: var(--t-2); font-weight: 600; color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.strip .stile.mail { max-width: 30rem; }   /* with the four size tiles gone the address must not stretch the whole strip */
@media (hover: hover) and (pointer: fine) { .strip-sizes:hover { background: var(--fg); border-color: var(--fg); color: var(--bg); } .strip-sizes:hover small { color: inherit; opacity: .78; } }
.strip-sizes:active { transform: scale(.98); }
.strip-sizes:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (max-width: 560px) { .strip-sizes { grid-column: 1 / -1; } }

@media (prefers-reduced-motion: reduce) {
  .jn-ticks::before, .jn-tick, .jn-tl { transition: none; }
  .strip-sizes:active { transform: none; }
}

/* ===== the hero parks (3 Nov 2026): the home board moves with the scroll =====
   The board is the one thing on the site that answers the scroll. Over the first screen of scrolling it travels 40 px up,
   a little faster than the page, so the page slides out from under a board that is holding its place rather than one pasted
   to the top. Transform only, and the whole travel is spent before the board has left the first viewport.
   Where the browser can drive it itself it does, on its own timeline with no listener and no main-thread work
   (animation-timeline: scroll()); site.js carries a single requestAnimationFrame-throttled scroll listener for where that
   is missing, writes nothing but a transform, measures no layout in the handler, and stops while the board is off screen.
   The travel is upward, so the board never covers the notes under it, and the nav paints above the board anyway (z-index 20
   on an opaque ground), so nothing can ride over it. The ground map is fixed on body::before with nothing transformed
   between it and the viewport, so it does not move or tear.
   Below 560px there is no parallax: the board's strip docks to the bottom of the viewport there and a transform on the
   board would carry the dock with it, and the phone board already fills the screen. Reduced motion: the board does not move. */
@media (min-width: 561px) and (prefers-reduced-motion: no-preference) {
  @keyframes board-park { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -40px, 0); } }
  @supports (animation-timeline: scroll()) {
    [data-page="home"] .board {
      animation-name: board-park; animation-duration: 1s; animation-timing-function: linear; animation-fill-mode: both;
      animation-timeline: scroll(root block); animation-range: 0px 100vh;
    }
  }
  /* the fallback's compositor hint, set by site.js only while the board is on screen and dropped when it leaves */
  [data-page="home"] .board.is-parking { will-change: transform; }
}