/* allezclub.com — site styles (T-047). Colours, radii, spacing and fonts are the app's design tokens, generated into
   tokens.css from brand/tokens.json by web/build.mjs. No inline styles anywhere (CSP style-src 'self'). */

@font-face { font-family: "Archivo"; src: url("/assets/fonts/Archivo-ExtraBold.woff2") format("woff2"), url("/assets/fonts/Archivo-ExtraBold.ttf") format("truetype"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("/assets/fonts/Archivo-BlackItalic.woff2") format("woff2"), url("/assets/fonts/Archivo-BlackItalic.ttf") format("truetype"); font-weight: 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/assets/fonts/Figtree-Regular.woff2") format("woff2"), url("/assets/fonts/Figtree-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/assets/fonts/Figtree-SemiBold.woff2") format("woff2"), url("/assets/fonts/Figtree-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/assets/fonts/Figtree-Bold.woff2") format("woff2"), url("/assets/fonts/Figtree-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/assets/fonts/BarlowCondensed-Bold.woff2") format("woff2"), url("/assets/fonts/BarlowCondensed-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
  /* Site-only accents (contrast audit, 2026-10-25). The plum band is dark in BOTH schemes, but the `blush` token flips
     to a dark rose in dark mode (#4A2233 on plum = 1.2:1). Text on plum therefore uses the light blush value always. */
  --on-plum-accent: #FFD6DC;                 /* 10.9:1 on plum #3B1A3F, 10.6:1 on dark plum #3A1E3E */
  --blush-ring: var(--blush);                /* decorative ring around the face circle */
  --rose-ink-on-light: #A3304F;              /* dot on the white photo plate (plate is white in both schemes) */
  --header-h: 72px;
  --gutter: 20px;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
}
@media (min-width: 720px) { :root { --gutter: 32px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--header-h); } /* nav links land the section flush under the sticky header */
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
h1, h2, h3, p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }

.container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); }
/* Notches, rounded corners and foldable hinges: keep content inside the safe area, never wider than the gutter. */
@supports (padding: env(safe-area-inset-left)) {
  .container, .legal { padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); }
  .site-header .header-inner { padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); }
  .site-footer { padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--canvas); padding: 10px 16px; border-radius: var(--radius-sm); text-decoration: none; font-weight: 600; }
.skip-link:focus { top: 12px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 24px; border: 0; border-radius: var(--radius-md);
  font-family: var(--font-body); font-size: 16px; font-weight: 700; line-height: 1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform 90ms ease-out, box-shadow 200ms ease-out, filter 200ms ease-out;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--ember); color: var(--on-ember); box-shadow: 0 6px 18px color-mix(in srgb, var(--ember) 35%, transparent); }
/* Hover effects only where a real hover exists: on touch screens iOS and Android keep :hover stuck after a tap (T-050). */
@media (hover: hover) and (pointer: fine) { .btn-primary:hover { filter: brightness(1.04); box-shadow: 0 10px 26px color-mix(in srgb, var(--ember) 45%, transparent); } }
.btn-sm { min-height: 44px; padding: 0 18px; font-size: 15px; }
.btn[disabled] { opacity: 0.6; cursor: progress; }
.link-button { appearance: none; background: none; border: 0; padding: 0; color: var(--ember-ink); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50; height: var(--header-h);
  background: transparent; border-bottom: 1px solid transparent;
  transition: background 200ms ease-out, border-color 200ms ease-out;
}
.site-header.is-scrolled, .page-doc .site-header {
  background: color-mix(in srgb, var(--canvas) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom-color: var(--line);
}
.header-inner { height: 100%; display: flex; align-items: center; gap: 24px; }
.brand { display: inline-flex; flex-shrink: 0; border-radius: 8px; }
.brand img { width: 137px; height: auto; }
/* Owner ask (2026-10-25): bigger wordmark. +15% from 420 px up (iPhone Plus / Pro Max, foldables, iPads) and +30% on
   desktop, where the header has room for it next to the four nav links. The ≤340 px rule further down still wins there. */
@media (min-width: 420px) { .brand img { width: 158px; } }
@media (min-width: 960px) { .brand img { width: 178px; } }
.header-nav { display: none; margin-left: auto; gap: 4px; }
.header-nav a { padding: 10px 14px; border-radius: var(--radius-pill); text-decoration: none; font-size: 15px; font-weight: 600; color: var(--ink-muted); transition: color 200ms, background 200ms; }
@media (hover: hover) and (pointer: fine) { .header-nav a:hover { color: var(--ink); background: var(--surface-sunken); } }
.header-inner .btn { margin-left: auto; }
@media (min-width: 960px) {
  .header-nav { display: flex; }
  .header-inner .btn { margin-left: 8px; }
}
/* Mobile menu (T-057, D-149): below 960 px (and on spanned dual screens, where the inline nav is hidden) a Menu button
   opens the same nav as a panel under the header. site.js un-hides the button, so without JS the footer links remain. */
.menu-btn { display: none; flex-shrink: 0; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.menu-icon, .menu-icon::before, .menu-icon::after { display: block; position: relative; width: 18px; height: 2px; border-radius: 1px; background: currentColor; transition: transform 200ms var(--ease-out), background 200ms; }
.menu-icon::before, .menu-icon::after { content: ""; position: absolute; left: 0; }
.menu-icon::before { top: -6px; }
.menu-icon::after { top: 6px; }
.menu-btn[aria-expanded="true"] .menu-icon { background: transparent; }
.menu-btn[aria-expanded="true"] .menu-icon::before { top: 0; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-icon::after { top: 0; transform: rotate(-45deg); }
.nav-waitlist { display: none; }
.site-header.is-menu-open { background: var(--canvas); border-bottom-color: var(--line); }
.header-nav.is-open { display: flex; flex-direction: column; position: absolute; top: var(--header-h); left: 0; right: 0; margin: 0; gap: 0; padding: 8px max(var(--gutter), env(safe-area-inset-left)) 16px; background: var(--canvas); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-sheet); max-height: calc(100svh - var(--header-h)); overflow: auto; }
.header-nav.is-open a { display: flex; align-items: center; min-height: 48px; padding: 0 12px; border-radius: var(--radius-md); font-size: 17px; color: var(--ink); }
.header-nav.is-open .nav-waitlist { color: var(--ember-ink); }
@media (max-width: 959px) {
  .js .menu-btn:not([hidden]) { display: inline-flex; }
  .header-inner { gap: 10px; }
}
@media (max-width: 379px) { .header-cta .cta-the { display: none; } .header-inner .btn-sm { padding: 0 12px; } }
@media (max-width: 300px) { .js .header-cta { display: none; } .js .menu-btn:not([hidden]) { margin-left: auto; } }

/* ---------- Type ---------- */
.display {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(46px, 6.6vw, 92px); line-height: 0.97; letter-spacing: -0.035em;
}
.display em { font-style: italic; font-weight: 900; color: var(--ember-ink); letter-spacing: -0.03em; }
.h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 4.4vw, 58px); line-height: 1.03; letter-spacing: -0.028em; text-wrap: balance; }
.eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ember-ink); margin-bottom: 14px; }
.body-lg { font-size: 19px; line-height: 1.55; color: var(--ink-muted); text-wrap: pretty; }

/* ---------- Hero ---------- */
.hero { position: relative; padding: 32px 0 72px; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: -20% -10% auto auto; width: 70vw; height: 70vw; max-width: 900px; max-height: 900px;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--blush) 70%, transparent), transparent);
  pointer-events: none; z-index: 0;
}
.hero-grid { position: relative; z-index: 1; display: grid; gap: 48px; align-items: center; }
.hero-copy > * { animation: rise 400ms var(--ease-out) both; }
.hero-copy > :nth-child(2) { animation-delay: 60ms; }
.hero-copy > :nth-child(3) { animation-delay: 120ms; }
.hero-copy > :nth-child(4) { animation-delay: 180ms; }
.hero-copy > :nth-child(5) { animation-delay: 240ms; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.pill {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 24px;
  padding: 8px 14px 8px 12px; border-radius: var(--radius-pill);
  background: var(--surface); border: 1px solid var(--line);
  font-size: 14px; font-weight: 600; color: var(--ink);
}
.pill-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--ember); }
.pill-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--ember); opacity: 0; animation: ping 2.4s ease-out infinite; }
@keyframes ping { 0% { transform: scale(0.6); opacity: 0.8; } 70%, 100% { transform: scale(1.6); opacity: 0; } }

.hero-lede { margin-top: 24px; max-width: 33em; font-size: 19px; line-height: 1.55; color: var(--ink-muted); text-wrap: pretty; }

/* Waitlist form */
.waitlist { margin-top: 32px; max-width: 620px; scroll-margin-top: calc(var(--header-h) + 40px); }
.waitlist-row {
  display: grid; gap: 8px; padding: 8px;
  background: var(--surface); border-radius: 22px; box-shadow: var(--shadow-card);
}
.field input, .field select {
  width: 100%; height: 52px; padding: 0 16px; border: 1.5px solid transparent; border-radius: 14px;
  background: var(--surface-sunken); color: var(--ink); font-size: 16px; outline: none;
  transition: border-color 200ms, background 200ms;
}
.field input::placeholder { color: var(--ink-muted); opacity: 1; }
.field select { appearance: none; padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236B5560' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; }
.field select:invalid { color: var(--ink-muted); }
.field input:focus-visible, .field select:focus-visible { border-color: var(--focus); background-color: var(--surface); }
.field.is-invalid input, .field.is-invalid select { border-color: var(--danger); }
/* The row follows the form's own width, not the viewport: in the two-column hero (1024 px desktops, phones and
   foldables held sideways) the form is only 380-520 px wide, and one row squeezed the email field to 34-104 px (T-050).
   Narrow: stacked. Medium: email on its own line, city + button below. Wide (560 px and up): one row. */
.waitlist { container-type: inline-size; }
@container (min-width: 420px) { .waitlist-row { grid-template-columns: 1fr auto; } .field-email { grid-column: 1 / -1; } }
@container (min-width: 560px) { .waitlist-row { grid-template-columns: 1fr 168px auto; } .field-email { grid-column: auto; } }
.waitlist-perk { margin-top: 16px; font-size: 14.5px; line-height: 1.45; color: var(--ink); } /* T-051: waitlist gift, terms at /terms#waitlist-gift */
.waitlist-perk a { color: var(--ember-ink); text-underline-offset: 2px; white-space: nowrap; }
.consent { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; font-size: 14px; line-height: 1.45; color: var(--ink-muted); cursor: pointer; }
.consent input { flex-shrink: 0; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--ember-deep); cursor: pointer; }
.consent a { color: var(--ember-ink); text-underline-offset: 2px; }
.consent.is-invalid span { color: var(--danger); }
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-status { min-height: 0; margin-top: 12px; font-size: 15px; font-weight: 600; }
.form-status:empty { margin: 0; }
.form-status.is-error { color: var(--danger); }
.waitlist.is-done .waitlist-row, .waitlist.is-done .consent, .waitlist.is-done .waitlist-perk { display: none; }
.waitlist.is-done .form-status {
  display: flex; gap: 12px; align-items: flex-start; margin: 0; padding: 16px 18px;
  border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-card);
  color: var(--ink); font-weight: 400; font-size: 15px;
}
/* Celebration, not verification: blush + rose-ink (D-015 / DESIGN_SYSTEM "blush is the women-first accent").
   The mint `verified` token means an ID check, so it stays on the Verified badge only. */
.waitlist.is-done .form-status::before {
  content: "✓"; flex-shrink: 0; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--blush); color: var(--rose-ink); font-weight: 700; font-size: 14px; line-height: 1;
}
.status-body { display: block; min-width: 0; }
.status-body strong { display: block; font-size: 16px; font-weight: 700; margin-bottom: 1px; }
.status-body > span { display: block; color: var(--ink-muted); overflow-wrap: anywhere; }
.form-status.is-error .status-body > span { color: inherit; }

/* Four short points, one line from 1200 px up (they wrap on tablets and phones, where one line would be unreadable). */
.hero-points { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 28px; list-style: none; }
.hero-points li { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; color: var(--ink-muted); white-space: nowrap; }
@media (min-width: 1200px) { .hero-points { flex-wrap: nowrap; gap: 10px 16px; } }
.tick { position: relative; flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--ember-soft); }
.tick::after { content: ""; position: absolute; left: 6px; top: 3.5px; width: 4px; height: 8px; border: solid var(--ember-ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* Photo mosaic */
.hero-visual { position: relative; }
.mosaic {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; height: 520px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 88%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 88%, transparent);
}
.mosaic-col { overflow: hidden; container-type: inline-size; }
/* Narrow tiles (1024-1150 px viewports, where the copy column is wide) can't hold "Sport · Level" on one line, so
   the tile shows the sport only, the same rule the ≤ 340 px screens use. */
@container (max-width: 149px) { .photo-card .chip-plate span { display: none; } }
.mosaic-col:nth-child(2) { margin-top: -60px; }
.mosaic-track { animation: drift 48s linear infinite; will-change: transform; }
.mosaic-col:nth-child(2) .mosaic-track { animation-duration: 56s; animation-direction: reverse; }
.mosaic-col:nth-child(3) .mosaic-track { animation-duration: 52s; }
@media (hover: hover) and (pointer: fine) { .mosaic:hover .mosaic-track { animation-play-state: paused; } } /* a tap on a phone would freeze it */
@keyframes drift { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.photo-card { position: relative; margin-bottom: 14px; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 5; background: var(--surface-sunken); }
.photo-card img { width: 100%; height: 100%; object-fit: cover; }
.chip-plate {
  display: inline-flex; align-items: baseline; padding: 6px 11px; border-radius: var(--radius-pill);
  background: var(--photo-plate); color: var(--on-plate); font-size: 13px; font-weight: 700; line-height: 1.2; white-space: nowrap;
}
/* "Sport · Level", the same separator the rest of the site uses, so the two words never read as one. */
.chip-plate span { color: var(--on-plate-muted); font-weight: 600; }
.chip-plate span::before { content: "·"; margin: 0 7px 0 6px; font-weight: 700; color: var(--on-plate-muted); }
.photo-card .chip-plate { position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
@media (min-width: 960px) {
  .hero { padding: 40px 0 96px; }
  .hero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 56px; min-height: min(calc(100svh - var(--header-h) - 40px), 820px); }
  .mosaic { height: min(calc(100svh - var(--header-h) - 40px), 760px); gap: 16px; }
  .photo-card { margin-bottom: 16px; }
  /* Fluid so the longest pair ("Trail running · Regular") fits every hero tile from 1024 px up without clipping. */
  .photo-card .chip-plate { font-size: clamp(11px, 0.9vw, 12px); left: 10px; bottom: 10px; max-width: calc(100% - 20px); }
}
/* Measured fit (T-050): at 150-168 px tiles (540 px windows, Fold cover screens, iPad mini and phones held sideways) and at
   169 px (1366-2560 px desktops) "Sport · Level" ran 2-20 px past the tile and lost its end to an ellipsis. Tighten the
   chip just enough; the words and the middot stay. */
@container (min-width: 150px) and (max-width: 168.4px) { .mosaic .photo-card .chip-plate { font-size: 11px; padding-left: 8px; padding-right: 8px; } .mosaic .photo-card .chip-plate span::before { margin: 0 5px 0 4px; } }
@container (min-width: 168.5px) { .mosaic .photo-card .chip-plate { padding-left: 10px; padding-right: 10px; } .mosaic .photo-card .chip-plate span::before { margin: 0 6px 0 5px; } }

/* ---------- Sections ---------- */
.section { padding: 88px 0; }
@media (min-width: 960px) { .section { padding: 128px 0; } }
.section-head { max-width: 720px; margin-bottom: 48px; }
.section-head .body-lg { margin-top: 18px; }
.split { display: grid; gap: 48px; align-items: center; }
@media (min-width: 960px) { .split { grid-template-columns: 1fr 1fr; gap: 80px; } }
.split-copy .body-lg { margin-top: 20px; }

/* Why */
.why { background: var(--surface); }
.split-media { position: relative; border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 4 / 5; max-height: 680px; }
.split-media img { width: 100%; height: 100%; object-fit: cover; }
.media-tag {
  position: absolute; left: 20px; bottom: 20px; padding: 10px 16px; border-radius: var(--radius-pill);
  background: rgba(20, 12, 21, 0.7); color: var(--on-photo); font-weight: 600; font-size: 15px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); /* 0.7 scrim: ≥ 4.6:1 even over a white photo */
}
/* The section's main message: pulled out of the paragraph, set in the display face with the hero's ember italic. */
.why-punch {
  margin-top: 28px; padding-left: 18px; border-left: 4px solid var(--ember);
  font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 2.7vw, 38px); line-height: 1.08;
  letter-spacing: -0.025em; color: var(--ink); text-wrap: balance;
}
.why-punch em { font-style: italic; font-weight: 900; color: var(--ember-ink); letter-spacing: -0.02em; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 36px; }
.stat { padding: 22px 22px 20px; border-radius: var(--radius-md); background: var(--ember-soft); }
.stat-num { font-family: var(--font-numeric); font-weight: 700; font-size: clamp(52px, 6vw, 72px); line-height: 0.9; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.stat-label { margin-top: 10px; font-size: 15px; line-height: 1.4; color: var(--ink); text-wrap: pretty; }
.source { margin-top: 14px; font-size: 13px; color: var(--ink-muted); }

/* How (plum) */
.how { background: var(--plum); color: var(--on-plum); }
.how .eyebrow { color: var(--on-plum-accent); }
.how .body-lg { color: color-mix(in srgb, var(--on-plum) 82%, transparent); }
.steps { display: grid; gap: 20px; list-style: none; }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.step {
  display: flex; flex-direction: column; border-radius: var(--radius-lg); overflow: hidden;
  background: color-mix(in srgb, var(--on-plum) 7%, transparent); border: 1px solid color-mix(in srgb, var(--on-plum) 12%, transparent);
}
.step-media { aspect-ratio: 4 / 3; overflow: hidden; }
.step-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .step:hover .step-media img { transform: scale(1.04); } }
.step-body { padding: 26px 26px 30px; }
.step-num { font-family: var(--font-numeric); font-weight: 700; font-size: 20px; color: var(--on-plum-accent); letter-spacing: 0.04em; }
.step h3 { margin-top: 6px; font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: 1.1; letter-spacing: -0.015em; }
.step p:last-child { margin-top: 10px; font-size: 16px; line-height: 1.55; color: color-mix(in srgb, var(--on-plum) 84%, transparent); }
.step strong { color: var(--on-plum); }

/* Approach */
.principles { display: grid; gap: 20px; margin-top: 36px; list-style: none; }
.principles li { display: flex; gap: 16px; align-items: flex-start; }
.principle-icon { flex-shrink: 0; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--ember-soft); }
.principle-icon svg { width: 22px; height: 22px; fill: none; stroke: var(--ember-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.principles strong { display: block; font-size: 17px; }
.principles p { margin-top: 2px; font-size: 15px; color: var(--ink-muted); }

.badge-verified { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--verified); }
.badge-verified::before { content: "✓"; }
.chip { padding: 6px 11px; border-radius: var(--radius-pill); background: var(--surface-sunken); font-size: 12.5px; font-weight: 600; color: var(--ink); }
.chip-on { background: var(--ember-soft); }

/* Circle reveal (D-069 on the web): one athlete card. Before you connect, the photo is clipped to a small circle
   around her face; once connected the circle opens from the face and the full photo fills the card. Everything inside
   the card is sized in container units (cqw), so the card scales like an illustration from 248 px to 380 px wide and
   the face always lands inside the circle. Like the app, the circle shows only the face itself (eyes, nose, mouth, a
   little hair); cheeks, ears and everything else stay outside. Face centre in reveal-*.webp: 47.5% across, 46% down. */
.rv { display: flex; flex-direction: column; align-items: center; gap: 18px; width: 100%; }
.rv-stage { width: min(380px, 100%); padding: 10px 6px; }
.rv-card {
  --fx: 47.5cqw; --fy: 57.5cqw;         /* face centre in the photo (card is 4:5, so 46% of 125cqw) */
  --face-shift: 2.6cqw;                 /* nudge the face right inside the circle (about 10 px on a 380 px card) */
  --cx: 17cqw; --cy: 25cqw; --cr: 11cqw; /* the face circle on the closed card */
  --dur: 1100ms; --ease: cubic-bezier(0.65, 0, 0.25, 1);
  position: relative; container-type: inline-size; width: 100%; aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-card); border: 1px solid var(--line);
  transform: rotate(-2deg);
}
.rv-photo {
  position: absolute; inset: 0; z-index: 1;
  clip-path: circle(var(--cr) at var(--cx) var(--cy));
  transition: clip-path var(--dur) var(--ease);
}
.rv-photo img {
  width: 100%; height: 100%; object-fit: cover; transform-origin: 47.5% 46%;
  /* scale 1.45: eyebrows to chin (about 15cqw of the photo) fill the 22cqw circle */
  transform: translate(calc(var(--cx) - var(--fx) + var(--face-shift)), calc(var(--cy) - var(--fy))) scale(1.45);
  transition: transform var(--dur) var(--ease);
}
.rv-ring {
  position: absolute; z-index: 2; left: calc(var(--cx) - var(--cr)); top: calc(var(--cy) - var(--cr));
  width: calc(var(--cr) * 2); height: calc(var(--cr) * 2); border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 1cqw var(--surface), 0 0 0 2cqw var(--blush-ring);
  transition: opacity 260ms ease-out, transform 260ms ease-out;
}
.rv-front { position: absolute; inset: 0; z-index: 3; padding: 6cqw; transition: opacity 280ms ease-out 620ms, transform 280ms ease-out 620ms; }
.rv-label { height: 4cqw; margin-bottom: 4cqw; font-size: 3.1cqw; line-height: 4cqw; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.rv-head { display: flex; align-items: center; gap: 4cqw; }
.rv-face-slot { flex-shrink: 0; width: 22cqw; height: 22cqw; }
.rv-name { font-family: var(--font-display); font-weight: 800; font-size: 6.6cqw; line-height: 1.1; letter-spacing: -0.01em; }
.rv-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0 2cqw; margin-top: 1cqw; font-size: 3.5cqw; font-weight: 500; color: var(--ink-muted); }
.rv-meta .badge-verified { font-size: 3cqw; }
.rv-chips { display: flex; flex-wrap: wrap; gap: 1.6cqw; margin-top: 5cqw; }
.rv-chips .chip { padding: 1.6cqw 3cqw; font-size: 3.4cqw; }
.rv-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; margin-top: 4cqw; }
.rv-stats > div { padding: 2.6cqw 3cqw; border-radius: 4cqw; background: var(--surface-sunken); }
.rv-stat { font-family: var(--font-numeric); font-weight: 700; font-size: 7cqw; line-height: 1; }
.rv-unit { margin-top: 0.8cqw; font-size: 3.2cqw; color: var(--ink-muted); }
.rv-prompt { margin-top: 4cqw; padding-top: 4cqw; border-top: 1px solid var(--line); font-size: 4.2cqw; line-height: 1.4; }
.rv-prompt span { display: block; margin-bottom: 1cqw; font-size: 3cqw; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.rv-actions { position: absolute; left: 6cqw; right: 6cqw; bottom: 6cqw; display: grid; grid-template-columns: 1fr 1.6fr; gap: 2.4cqw; }
.rv-actions span { display: grid; place-items: center; height: 11cqw; border-radius: var(--radius-pill); font-size: 3.8cqw; font-weight: 700; }
.rv-pass { border: 1.5px solid var(--line); color: var(--ink); }
.rv-go { background: var(--ember); color: var(--on-ember); }
.rv-back { position: absolute; inset: 0; z-index: 3; color: var(--on-photo); opacity: 0; transition: opacity 260ms ease-out; pointer-events: none; }
.rv-back::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(20, 12, 21, 0.45), transparent 22%, transparent 52%, rgba(20, 12, 21, 0.8)); }
.rv-bars { position: absolute; left: 4cqw; right: 4cqw; top: 3.4cqw; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4cqw; }
.rv-bars span { height: 0.9cqw; border-radius: 1cqw; background: rgba(255, 255, 255, 0.45); }
.rv-bars span:first-child { background: #fff; }
.rv-connected {
  position: absolute; left: 4cqw; top: 7.6cqw; display: inline-flex; align-items: center; gap: 1.8cqw;
  padding: 1.6cqw 3cqw; border-radius: var(--radius-pill); background: var(--photo-plate); color: var(--on-plate);
  font-size: 3.3cqw; font-weight: 700;
}
.rv-connected::before { content: ""; width: 2cqw; height: 2cqw; border-radius: 50%; background: var(--rose-ink-on-light); }
.rv-back-info { position: absolute; left: 6cqw; right: 6cqw; bottom: 6cqw; }
.rv-back-info .rv-name { font-size: 8cqw; }
.rv-back-chips { margin-top: 2.4cqw; }
.rv-back-chips .chip-plate { font-size: 3.6cqw; padding: 1.6cqw 3cqw; }

/* Open = connected. On close the order reverses: back fades first, photo closes, then the front returns. */
.rv-card.is-open .rv-photo { clip-path: circle(95cqw at var(--fx) var(--fy)); }
.rv-card.is-open .rv-photo img { transform: none; }
.rv-card.is-open .rv-ring { opacity: 0; transform: scale(1.4); }
.rv-card.is-open .rv-front { opacity: 0; transform: translateY(3cqw); transition-delay: 0ms; }
.rv-card.is-open .rv-back { opacity: 1; transition-delay: 700ms; }
.rv-card:not(.is-open) .rv-ring { transition-delay: 900ms; }

.rv-caption { min-height: 24px; text-align: center; }
.rv-step { display: grid; font-size: 15px; font-weight: 600; color: var(--ink-muted); }
.rv-step > span { grid-area: 1 / 1; transition: opacity 300ms ease-out; }
.rv-step-after { opacity: 0; color: var(--rose-ink); }
.rv.is-open .rv-step-before { opacity: 0; }
.rv.is-open .rv-step-after { opacity: 1; }
.rv-toggle {
  min-height: 44px; padding: 0 18px; border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 600; cursor: pointer;
}
@media (hover: hover) and (pointer: fine) { .rv-toggle:hover { background: var(--surface-sunken); } }
.rv-toggle { display: none; }
.js .rv-toggle { display: inline-flex; align-items: center; }

/* Cities: one gentle, endless film-strip. The track holds the cities twice; the animation shifts it by exactly one
   set (each card carries its own right margin, so -50% lands seamlessly on the duplicate). Hover and keyboard focus pause it;
   with reduced motion there is no animation and the strip becomes a normal sideways scroller. */
.cities { background: var(--surface); overflow: hidden; }
.city-marquee {
  position: relative; margin: 0 calc(-1 * var(--gutter)); padding: 10px 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.city-grid { display: flex; width: max-content; list-style: none; animation: city-drift 74s linear infinite; will-change: transform; }
@keyframes city-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.city-marquee:focus-within .city-grid, .city-marquee[data-paused="true"] .city-grid { animation-play-state: paused; }
@media (hover: hover) and (pointer: fine) { .city-marquee:hover .city-grid { animation-play-state: paused; } }
.city {
  position: relative; flex: 0 0 clamp(148px, 15vw, 210px); margin-right: 16px;
  aspect-ratio: 3 / 4; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-sunken);
}
.city img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .city:not(.city-soon):hover img { transform: scale(1.05); } }
/* Scrim sized for the worst case (snow, white sky): text stays ≥ 4.5:1 even if the photo behind it were pure white. */
.city::after { content: ""; position: absolute; inset: 30% 0 0; background: linear-gradient(to bottom, transparent, rgba(20, 12, 21, 0.62) 55%, rgba(20, 12, 21, 0.85)); }
.city-soon img { filter: grayscale(1) brightness(0.85) contrast(0.9); }
.city-soon::after { inset: 0; background: linear-gradient(to bottom, rgba(20, 12, 21, 0.25), rgba(20, 12, 21, 0.7)); }
/* Cities waiting for their photo: a plum tile with a warm glow, so the strip never shows an empty box. */
.city-text { background: var(--plum); }
.city-text::before {
  content: ""; position: absolute; inset: -20% -40% auto auto; width: 70%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--ember) 42%, transparent), transparent);
}
.city-text::after { inset: 0; background: linear-gradient(to bottom, transparent 45%, rgba(20, 12, 21, 0.55)); }
.city-info { position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 1; color: var(--on-photo); }
.city-info h3 { margin-top: 10px; font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: 1.05; letter-spacing: -0.015em; }
.city-info p { margin-top: 2px; font-size: 14px; color: rgba(255, 255, 255, 0.88); }
.city-tag { display: inline-block; padding: 5px 10px; border-radius: var(--radius-pill); background: var(--photo-plate); color: var(--on-plate); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.city-tag-soon { background: rgba(20, 12, 21, 0.6); color: var(--on-photo); border: 1px solid rgba(255, 255, 255, 0.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@media (prefers-reduced-motion: reduce) {
  .city-grid { animation: none; }
  .city-marquee { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .city-marquee::-webkit-scrollbar { display: none; }
  .city { scroll-snap-align: start; }
  .city[aria-hidden="true"] { display: none; } /* the second set only exists to make the loop seamless (T-050) */
}

/* CTA band */
.cta { padding-top: 0; }
.cities + .cta { padding-top: 88px; background: linear-gradient(to bottom, var(--surface) 50%, var(--canvas) 50%); }
@media (min-width: 960px) { .cities + .cta { padding-top: 0; background: var(--surface); } .cta { padding-bottom: 128px; } }
.cta-band { position: relative; display: flex; align-items: center; min-height: 460px; border-radius: var(--radius-xl); overflow: hidden; background: var(--plum); }
.cta-band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Progressive frost over the photo. Four stacked glass layers, each a little blurrier and each ending a little earlier,
   so the blur builds up gently toward the left edge and thins out smoothly to nothing before the faces in the photo
   (desktop: gone by 44 % of the band; phones: gone by 70 % of the height, measured from the bottom). A separate, eased
   dark tint (no blur) carries the legibility under the copy and fades on the same curve. The copy column is kept narrow
   on wide screens so every line ends inside the frost. Without backdrop-filter: the tint alone, slightly stronger. */
.cta-band { align-items: flex-end; }
.cta-glass { position: absolute; inset: 0; pointer-events: none; }
.cta-glass i { position: absolute; inset: 0; }
.cta-glass i:nth-child(1) { -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  -webkit-mask-image: linear-gradient(to top, #000 60%, transparent 80%); mask-image: linear-gradient(to top, #000 60%, transparent 80%); }
.cta-glass i:nth-child(2) { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  -webkit-mask-image: linear-gradient(to top, #000 50%, transparent 74%); mask-image: linear-gradient(to top, #000 50%, transparent 74%); }
.cta-glass i:nth-child(3) { -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  -webkit-mask-image: linear-gradient(to top, #000 38%, transparent 66%); mask-image: linear-gradient(to top, #000 38%, transparent 66%); }
.cta-glass i:nth-child(4) { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  -webkit-mask-image: linear-gradient(to top, #000 24%, transparent 56%); mask-image: linear-gradient(to top, #000 24%, transparent 56%); }
.cta-band::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(20, 12, 21, 0.66) 0%, rgba(20, 12, 21, 0.64) 40%, rgba(20, 12, 21, 0.55) 56%,
    rgba(20, 12, 21, 0.38) 64%, rgba(20, 12, 21, 0.2) 71%, rgba(20, 12, 21, 0.07) 77%, rgba(20, 12, 21, 0) 82%);
}
@media (min-width: 720px) {
  .cta-band { align-items: center; }
  .cta-glass i:nth-child(1) { -webkit-mask-image: linear-gradient(90deg, #000 30%, transparent 50%); mask-image: linear-gradient(90deg, #000 30%, transparent 50%); }
  .cta-glass i:nth-child(2) { -webkit-mask-image: linear-gradient(90deg, #000 22%, transparent 44%); mask-image: linear-gradient(90deg, #000 22%, transparent 44%); }
  .cta-glass i:nth-child(3) { -webkit-mask-image: linear-gradient(90deg, #000 12%, transparent 38%); mask-image: linear-gradient(90deg, #000 12%, transparent 38%); }
  .cta-glass i:nth-child(4) { -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 30%); mask-image: linear-gradient(90deg, #000 0%, transparent 30%); }
  .cta-band::after {
    background: linear-gradient(90deg, rgba(20, 12, 21, 0.66) 0%, rgba(20, 12, 21, 0.65) 24%, rgba(20, 12, 21, 0.62) 31%,
      rgba(20, 12, 21, 0.55) 36%, rgba(20, 12, 21, 0.43) 40%, rgba(20, 12, 21, 0.28) 44%, rgba(20, 12, 21, 0.14) 47.5%,
      rgba(20, 12, 21, 0.05) 50%, rgba(20, 12, 21, 0) 52%);
  }
}
@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
  .cta-glass { display: none; }
}
.cta-copy { position: relative; z-index: 2; max-width: 560px; padding: 48px 28px; color: var(--on-photo); }
.cta-copy .h2 { color: var(--on-photo); }
.cta-copy p { margin: 14px 0 28px; font-size: 19px; color: rgba(255, 255, 255, 0.9); text-wrap: pretty; }
@media (min-width: 720px) { .cta-copy { padding: 72px 56px; max-width: 520px; } .cta-copy p { max-width: 21em; } } /* every line ends inside the frost */
@media (min-width: 720px) and (max-width: 1199px) { .cta-copy p { max-width: 16em; } } /* narrower band: keep lines in the frost */
/* Tablets in portrait (720-959 px, e.g. iPad mini / Air / Pro 11): the band is only 680-900 px wide, so 16em still ran past the
   frost (paragraph 2.5-3.6:1, measured T-050). Same rule as D-080: keep every line inside the frost. */
@media (min-width: 720px) and (max-width: 959px) { .cta-copy { padding-left: 40px; padding-right: 40px; } .cta-copy p { max-width: 13em; font-size: 17px; } }
/* Phones (up to 719 px): the photo sits on top, unfrosted, so both faces are clear, and the copy sits on plum below it.
   Copy over the photo could never clear both faces on a portrait band (owner, T-050; D-080 desktop and tablet unchanged). */
@media (max-width: 719px) {
  .cta-band { flex-direction: column; align-items: stretch; min-height: 0; }
  .cta-band > img { position: static; aspect-ratio: 4 / 3; height: auto; object-position: 62% 50%; }
  .cta-glass, .cta-band::after { display: none; }
}

/* "Not a dating app" band. A calm checklist: each row and its tick arrive in sequence when the band scrolls into
   view, then "Dates" is struck through and dimmed. On a mouse the rows lean very slightly toward the pointer and the
   "Dates" row slides away from it, as if the page refuses it (site.js, hover + fine pointer only). */
.not-dating { padding: 0 0 72px; }
.nd-card {
  display: grid; gap: 28px; padding: 28px 24px; border-radius: var(--radius-xl);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-card);
}
.nd-copy .h2 { font-size: clamp(30px, 3.6vw, 48px); }
.nd-copy .body-lg { margin-top: 16px; max-width: 34em; }
.nd-list { display: grid; list-style: none; }
.nd-row {
  --nd-x: 0px; --nd-y: 0px;
  display: flex; align-items: center; gap: 14px; padding: 15px 2px;
  border-top: 1px solid var(--line); font-size: 16.5px; font-weight: 600; line-height: 1.3; color: var(--ink);
  transform: translate(var(--nd-x), var(--nd-y));
  transition: transform 260ms var(--ease-out), opacity 260ms ease-out, color 400ms ease-out;
}
.nd-row:first-child { border-top: 0; }
.nd-tick { flex-shrink: 0; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ember-soft); transition: background 400ms ease-out; }
.nd-tick svg { width: 15px; height: 15px; fill: none; stroke: var(--ember-ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.nd-tick svg path { stroke-dasharray: 26; stroke-dashoffset: 0; }
/* The crossed-out row: dashed ring, muted text, red strike drawn left to right. */
.nd-no { color: var(--ink-muted); font-weight: 500; }
.nd-tick-no { background: none; border: 1.5px dashed var(--control-off); }
.nd-tick-no svg { stroke: var(--danger); width: 13px; height: 13px; stroke-width: 2.2; }
.nd-text { position: relative; }
.nd-no .nd-text::after {
  content: ""; position: absolute; left: -3px; right: calc(100% + 3px); top: 52%; height: 2px; border-radius: 2px;
  background: var(--danger); opacity: 0.85; transition: right 460ms var(--ease-out);
}
/* Entrance: stagger the rows, then draw each tick, then strike "Dates" last. */
.js .nd-card { --i: 0; }
.js .nd-card:not(.is-in) .nd-row { opacity: 0; }
.js .nd-card .nd-row { transition-delay: calc(var(--i) * 90ms); }
.js .nd-card .nd-tick svg path { opacity: 0; }
.js .nd-card.is-in .nd-row { opacity: 1; }
.js .nd-card.is-in .nd-tick svg path { opacity: 1; animation: nd-draw 380ms var(--ease-out) calc(var(--i) * 90ms + 140ms) both; }
@keyframes nd-draw { from { stroke-dashoffset: 26; } to { stroke-dashoffset: 0; } }
.js .nd-card.is-in .nd-no .nd-text::after { right: -3px; transition-delay: 640ms; }
.js .nd-card:not(.is-in) .nd-no .nd-text::after { right: calc(100% + 3px); }
.nd-row:nth-child(1) { --i: 0; }
.nd-row:nth-child(2) { --i: 1; }
.nd-row:nth-child(3) { --i: 2; }
.nd-row:nth-child(4) { --i: 3; }
.nd-row:nth-child(5) { --i: 4; }
@media (min-width: 960px) {
  .not-dating { padding-bottom: 96px; }
  .nd-card { grid-template-columns: 1.1fr 1fr; gap: 56px; padding: 48px 52px; align-items: center; }
  .nd-row { padding: 17px 2px; font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .nd-card .nd-tick svg path { opacity: 1; stroke-dashoffset: 0; animation: none !important; }
  .js .nd-card:not(.is-in) .nd-row { opacity: 1; }
  .nd-no .nd-text::after, .js .nd-card:not(.is-in) .nd-no .nd-text::after { right: -3px; }
}

/* ---------- Footer ---------- */
.site-footer { padding: 64px 0 40px; border-top: 1px solid var(--line); background: var(--canvas); }
.footer-top { display: grid; gap: 40px; }
@media (min-width: 860px) { .footer-top { grid-template-columns: 1fr 2fr; } }
.footer-brand img { width: 137px; }
@media (min-width: 960px) { .footer-brand img { width: 178px; } } /* matches the header wordmark (T-050) */
.footer-brand p { margin-top: 16px; font-size: 15px; color: var(--ink-muted); }
.footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 32px; }
/* Four columns since the Plans column (T-057): where four don't fit in one row, a 2 x 2 grid instead of 3 + 1 (T-059). */
@media (min-width: 480px) and (max-width: 1239px) { .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.footer-cols h2 { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 14px; }
.footer-cols ul { list-style: none; display: grid; gap: 0; }
.footer-cols a, .footer-cols .link-button { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; text-decoration: none; color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .footer-cols a:hover, .footer-cols .link-button:hover { color: var(--ember-ink); } }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-muted); }

/* ---------- Legal and help pages ---------- */
.page-doc main { padding: 48px 0 96px; }
.legal { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 var(--gutter); counter-reset: sec; }
.legal-head { max-width: 760px; margin-bottom: 40px; }
.legal-head h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(40px, 5.4vw, 64px); line-height: 1; letter-spacing: -0.03em; text-wrap: balance; }
.legal-meta { margin-top: 14px; font-size: 14px; color: var(--ink-muted); }
.legal .lede { margin-top: 18px; font-size: 19px; line-height: 1.55; color: var(--ink-muted); }
.toc { margin-bottom: 32px; padding: 20px 22px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--line); }
.toc ol { list-style: none; counter-reset: toc; display: grid; gap: 2px; }
.toc li { counter-increment: toc; }
.legal .toc a { display: flex; gap: 10px; padding: 6px 0; font-size: 15px; text-decoration: none; color: var(--ink-muted); }
.legal .toc a::before { content: counter(toc); min-width: 1.4em; font-family: var(--font-numeric); font-weight: 700; color: var(--ember-ink); }
@media (pointer: coarse) { .legal .toc a { padding: 10px 0; } } /* 44 px rows for fingers (T-050) */
@media (hover: hover) and (pointer: fine) { .legal .toc a:hover { color: var(--ink); } }
@media (min-width: 1024px) {
  .legal:has(.toc) { display: grid; grid-template-columns: 250px minmax(0, 1fr); column-gap: 72px; }
  .legal:has(.toc) .legal-head { grid-column: 1 / -1; }
  .legal:has(.toc) .toc { grid-column: 1; grid-row: 2 / span 40; align-self: start; position: sticky; top: calc(var(--header-h) + 24px); max-height: calc(100vh - var(--header-h) - 48px); overflow: auto; background: none; border: 0; padding: 0; }
  .legal:has(.toc) > section { grid-column: 2; }
}
.legal > section { max-width: 720px; }
.legal h2 { margin: 48px 0 14px; font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: 1.15; letter-spacing: -0.015em; scroll-margin-top: calc(var(--header-h) + 24px); text-wrap: balance; }
.legal > section:first-of-type h2 { margin-top: 0; }
.legal:has(.toc) > section > h2::before { counter-increment: sec; content: counter(sec) ". "; color: var(--ember-ink); }
.legal h3 { scroll-margin-top: calc(var(--header-h) + 24px); margin: 28px 0 8px; font-size: 19px; font-weight: 700; line-height: 1.3; text-wrap: balance; }
.legal p, .legal li { font-size: 17px; line-height: 1.65; }
.legal p + p, .legal p + ul, .legal p + ol, .legal ul + p, .legal ol + p, .legal .table-wrap + p, .legal p + .table-wrap { margin-top: 14px; }
.legal ul, .legal ol { padding-left: 1.3em; }
.legal li + li { margin-top: 6px; }
.legal li::marker { color: var(--ember-ink); }
.legal a { color: var(--ember-ink); text-underline-offset: 3px; }
.legal strong { font-weight: 700; }
.legal aside.summary { margin: 0 0 18px; padding: 14px 18px; border-radius: var(--radius-md); background: var(--ember-soft); font-size: 16px; }
.legal aside.summary p { font-size: 16px; }
.legal aside.summary::before { content: "In short"; display: block; margin-bottom: 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ember-ink); }
.table-wrap { margin: 16px 0; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table-wrap th { padding: 12px 14px; text-align: left; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; background: var(--surface-sunken); vertical-align: bottom; }
.table-wrap td { padding: 12px 14px; border-top: 1px solid var(--line); vertical-align: top; line-height: 1.5; font-size: 15px; }
details.faq { border-bottom: 1px solid var(--line); }
details.faq summary { position: relative; display: flex; align-items: center; min-height: 56px; padding: 14px 40px 14px 0; font-size: 18px; font-weight: 600; cursor: pointer; list-style: none; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 10px; height: 10px; border: solid var(--ink-muted); border-width: 0 2px 2px 0; transform: translateY(-70%) rotate(45deg); transition: transform 200ms var(--ease-out); }
details.faq[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
details.faq > :not(summary) { padding-bottom: 18px; color: var(--ink-muted); }
.contact-card { margin: 8px 0 24px; padding: 28px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); }
.contact-card a[href^="mailto"] { font-family: var(--font-display); font-weight: 800; font-size: clamp(22px, 3vw, 30px); letter-spacing: -0.01em; color: var(--ink); text-decoration-color: var(--ember); text-decoration-thickness: 3px; text-underline-offset: 6px; overflow-wrap: anywhere; }

/* Waitlist confirm / unsubscribe + 404 */
.status-page { min-height: calc(100svh - var(--header-h) - 300px); display: grid; place-items: center; padding: 24px var(--gutter); text-align: center; }
.status-card { max-width: 520px; padding: 48px 32px; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-card); }
.status-card h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(32px, 4vw, 44px); line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; }
.status-card p { margin-top: 14px; font-size: 17px; color: var(--ink-muted); }
.status-card .btn { margin-top: 28px; }

/* ---------- Quiet button (the second action next to an ember one) ---------- */
.btn-quiet { background: var(--surface-sunken); color: var(--ink); box-shadow: inset 0 0 0 1px var(--control-off); }
@media (hover: hover) and (pointer: fine) { .btn-quiet:hover { background: var(--surface); } }

/* ---------- /join/<code> (T-057) ---------- */
.join-page { display: grid; justify-items: center; padding: 8px var(--gutter) 24px; }
.join-card { width: 100%; max-width: 560px; padding: 40px 32px; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-card); }
.join-card h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 4vw, 40px); line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; }
.join-card h2 { margin: 36px 0 10px; font-family: var(--font-display); font-weight: 800; font-size: 21px; line-height: 1.2; letter-spacing: -0.01em; }
.join-card p, .join-card li { font-size: 17px; line-height: 1.6; }
.join-card p + p, .join-card ul + p { margin-top: 12px; }
.join-card a:not(.btn):not(.store-badge) { color: var(--ember-ink); text-underline-offset: 3px; }
.join-lede { margin-top: 14px; color: var(--ink-muted); }
.join-code { margin-top: 24px; padding: 18px 20px; border-radius: var(--radius-md); background: var(--surface-sunken); text-align: center; }
.join-card .join-code-label { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.join-card .join-code-value { margin-top: 4px; font-family: var(--font-numeric); font-weight: 700; font-size: clamp(28px, 10vw, 48px); line-height: 1.1; letter-spacing: 0.06em; white-space: nowrap; } /* 28 px floor: the grouped code fits the card at 280 px (T-059) */
.join-code .btn { margin-top: 12px; }
.join-card .join-copied { min-height: 1.5em; margin-top: 6px; font-size: 15px; color: var(--ink-muted); }
.join-copied:empty { min-height: 0; margin: 0; }
.join-bad { margin-top: 20px; padding: 14px 16px; border-radius: var(--radius-md); background: var(--ember-soft); }
.join-actions { margin-top: 20px; }
.join-open { width: 100%; }
.join-card .join-noapp { margin-top: 12px; padding: 12px 14px; border-radius: var(--radius-md); background: var(--ember-soft); font-size: 15px; }
.join-card .join-note { margin-top: 12px; font-size: 15px; color: var(--ink-muted); }
.join-steps { padding-left: 1.3em; }
.join-steps li + li { margin-top: 6px; }
.join-steps li::marker { color: var(--ember-ink); font-weight: 700; }
.store-badges { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; padding: 0; }
.store-badge { display: inline-flex; flex-direction: column; justify-content: center; min-width: 150px; min-height: 52px; padding: 6px 16px; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface-sunken); color: var(--ink); text-decoration: none; line-height: 1.2; }
.store-name { font-weight: 700; font-size: 16px; }
.store-state { font-size: 13px; color: var(--ink-muted); }
.store-badge.is-live { background: var(--ink); color: var(--canvas); border-color: var(--ink); }
.store-badge.is-live .store-state { color: inherit; }

/* ---------- Plan pages: /plans/*, /verified (T-057) ---------- */
.plan-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: -16px 0 28px; }
.plan-tabs a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--surface); font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none; }
.plan-tabs a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--canvas); }
@media (hover: hover) and (pointer: fine) { .plan-tabs a:not([aria-current]):hover { background: var(--surface-sunken); } }
.legal .draft-note { max-width: 720px; margin: 0 0 32px; padding: 12px 16px; border-radius: var(--radius-md); border: 2px dashed var(--warning); font-size: 15px; }
.price-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 4px 0 16px; }
.price-card { padding: 18px 20px; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface); }
.price-card.is-best { box-shadow: inset 0 0 0 2px var(--ember-ink); border-color: transparent; }
.price-card.is-plum { background: var(--plum); color: var(--on-plum); border-color: var(--plum); }
.legal .price-name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; }
.price-badge { padding: 2px 10px; border-radius: var(--radius-pill); background: var(--ember); color: var(--on-ember); font-size: 13px; font-weight: 700; }
.legal .price-amount { margin-top: 6px; font-family: var(--font-numeric); font-weight: 700; font-size: 40px; line-height: 1.1; }
.price-amount span { font-family: var(--font-body); font-size: 16px; font-weight: 400; }
/* Comparison table, built from src/data/plans.json by web/build.mjs. */
.legal > section.compare { max-width: none; }
.compare-wrap { margin-top: 8px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.compare-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.compare-table th, .compare-table td { padding: 12px 14px; text-align: left; vertical-align: top; font-size: 15px; line-height: 1.45; border-top: 1px solid var(--line); overflow-wrap: break-word; }
.compare-table thead th { position: sticky; top: var(--header-h); z-index: 2; border-top: 0; border-bottom: 1px solid var(--line); background: var(--surface-sunken); font-weight: 700; vertical-align: bottom; }
.compare-table thead th:first-child { width: 34%; border-top-left-radius: var(--radius-md); }
.compare-table thead th:last-child { border-top-right-radius: var(--radius-md); }
.compare-table thead a { color: var(--ink); text-underline-offset: 3px; }
.compare-table tbody:first-of-type tr:first-child > * { border-top: 0; }
.compare-table tbody th { font-weight: 600; }
.compare-table tbody th a { color: var(--ember-ink); text-underline-offset: 3px; }
.compare-table tr.group th { padding-top: 18px; background: var(--canvas); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ember-ink); }
.compare-table .price-row td { font-weight: 700; }
.compare-table .line { display: block; }
.compare-table .per { white-space: nowrap; }
.compare-table .price-row .line + .line { margin-top: 6px; } /* "C$9.99 / month" breaks before the slash, never after it (T-059) */
.compare[data-current="premium"] .c-premium, .compare[data-current="plus"] .c-plus, .compare[data-current="community"] .c-community { background: var(--ember-soft); }
.yes, .no { display: inline-block; position: relative; width: 20px; height: 20px; vertical-align: -4px; }
.yes::before { content: ""; position: absolute; left: 6px; top: 1px; width: 7px; height: 13px; border: solid var(--verified); border-width: 0 3px 3px 0; transform: rotate(45deg); }
.no::before { content: ""; position: absolute; left: 4px; top: 9px; width: 12px; height: 2px; border-radius: 1px; background: var(--ink-muted); }
.compare-notes { margin-top: 14px; padding-left: 1.3em; color: var(--ink-muted); }
.legal .compare-notes li, .pricing .compare-notes li { font-size: 15px; }
.pricing .compare-notes { max-width: 760px; }
.plan-tabs.pricing-links { margin: 28px 0 0; }
.legal .compare-notes a, .pricing .compare-notes a { color: var(--ember-ink); }
/* Phones: the feature name gets its own line, the four plan values sit in one row of four below it, and the plan names
   stay pinned under the site header while the table scrolls by. No sideways scroll, half the height of a 2 x 2 grid. */
@media (max-width: 640px) {
  .compare-wrap { margin-left: calc(-1 * var(--gutter) + 8px); margin-right: calc(-1 * var(--gutter) + 8px); }
  .compare-table, .compare-table thead, .compare-table tbody, .compare-table tr, .compare-table th, .compare-table td { display: block; }
  .compare-table thead { position: sticky; top: var(--header-h); z-index: 2; }
  .compare-table thead th { position: static; }
  .compare-table thead tr, .compare-table tbody tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .compare-table thead th:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); padding: 0; }
  .compare-table thead th:nth-child(2) { border-top-left-radius: var(--radius-md); }
  .compare-table th, .compare-table td { padding: 8px 6px; font-size: 13.5px; line-height: 1.35; text-align: center; }
  .compare-table thead th { font-size: 13px; padding: 10px 2px; }
  .compare-table tbody tr > th { grid-column: 1 / -1; padding: 12px 10px 2px; text-align: left; font-size: 15px; }
  .compare-table tbody td { border-top: 0; padding-bottom: 12px; }
  .compare-table tr.group th { padding: 16px 10px 8px; border-top: 1px solid var(--line); }
  .compare-table .price-row td { font-size: 13.5px; padding-left: 4px; padding-right: 4px; }
  .compare-table .price-row .line + .line { margin-top: 6px; }
  .compare-table .price-row .amt { white-space: nowrap; }
  .compare-table .price-row .per { display: block; font-size: 12px; font-weight: 600; color: var(--ink-muted); }
  .join-card { padding: 28px 20px; }
  .plan-tabs { margin-top: -20px; }
  .plan-tabs a { padding: 0 14px; font-size: 14px; }
}

/* ---------- Scroll reveal (only when JS runs) ---------- */
.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .steps .reveal:nth-child(2), .js .city-grid .reveal:nth-child(2) { transition-delay: 60ms; }
.js .steps .reveal:nth-child(3), .js .city-grid .reveal:nth-child(3) { transition-delay: 120ms; }
.js .city-grid .reveal:nth-child(4) { transition-delay: 180ms; }
.js .city-grid .reveal:nth-child(5) { transition-delay: 240ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; }
  .mosaic-track { animation: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}


/* ---------- Small phones, foldable cover screens and short landscape (iPhone SE → Galaxy Fold 280 px) ----------
   Tested widths: 280, 320, 360, 390, 430, 768, 834, 1024, 1280, 1440, plus a 884×430 foldable in landscape.
   The rule that matters: nothing may scroll sideways at any width (checked with document.scrollWidth). */
@media (max-width: 480px) {
  :root { --gutter: 16px; --header-h: 64px; }
  .display { font-size: clamp(32px, 9vw, 46px); }
  .h2 { font-size: clamp(26px, 7.4vw, 34px); }
  .hero { padding: 20px 0 48px; }
  .hero-lede { margin-top: 18px; font-size: 17px; }
  .body-lg { font-size: 17px; }
  .pill { font-size: 13px; padding: 7px 12px 7px 10px; margin-bottom: 18px; }
  .waitlist { margin-top: 24px; }
  .waitlist-row { border-radius: 18px; }
  .consent { font-size: 13px; gap: 10px; }
  .hero-points { gap: 8px 16px; margin-top: 22px; }
  .hero-points li { font-size: 14px; }
  .section { padding: 60px 0; }
  .section-head { margin-bottom: 32px; }
  .mosaic { grid-template-columns: repeat(2, 1fr); height: 420px; gap: 10px; }
  .mosaic-col:nth-child(3) { display: none; }
  .photo-card { margin-bottom: 10px; border-radius: var(--radius-md); }
  .photo-card .chip-plate { font-size: 11px; padding: 4px 8px; left: 8px; bottom: 8px; }
  .split { gap: 32px; }
  .split-media { aspect-ratio: 3 / 4; }
  .why-punch { margin-top: 22px; padding-left: 14px; font-size: clamp(24px, 7vw, 28px); }
  .stats { gap: 8px; margin-top: 26px; }
  .stat { padding: 16px 16px 14px; }
  .stat-num { font-size: clamp(40px, 13vw, 56px); }
  .stat-label { font-size: 13px; }
  .step-body { padding: 20px 20px 24px; }
  .step h3 { font-size: 22px; }
  .principle-icon { width: 40px; height: 40px; }
  .cta-band { min-height: 380px; }
  .cta-copy { padding: 32px 22px; }
  .cta-copy p { font-size: 17px; margin: 12px 0 22px; }
  .legal-head h1 { font-size: clamp(30px, 8.6vw, 40px); }
  .legal .lede { font-size: 17px; }
  .legal p, .legal li { font-size: 16px; }
  .legal h2 { font-size: 22px; margin-top: 36px; }
  .table-wrap table, .table-wrap th, .table-wrap td { font-size: 14px; }
  details.faq summary { font-size: 16px; }
  .contact-card { padding: 20px; }
  .status-card { padding: 32px 22px; }
  /* City cards are only 148-190 px wide here, so the "LAUNCHING FIRST" / "SOON" pill dominated the photo (owner, T-050):
     11 px -> 8 px with tighter padding and tracking: 131 px -> 93 px wide, 89 % -> 63 % of the 148 px card, i.e. 29 % smaller. */
  .city-tag { font-size: 8px; padding: 4px 8px; letter-spacing: 0.05em; }
  .city-info h3 { margin-top: 8px; }
  .footer-bottom { flex-direction: column; gap: 4px; }
  .header-inner { gap: 12px; }
  .header-inner .btn { padding: 0 14px; font-size: 14px; }
}
@media (max-width: 340px) {
  .hero-points { flex-direction: column; }
  /* Cover screens: a two-line chip would cover the photo, so keep the sport only. */
  .photo-card .chip-plate span { display: none; }
  .display { font-size: clamp(28px, 9.6vw, 32px); }
  .h2 { font-size: 25px; }
  .brand img { width: 98px; }
  .header-inner .btn { padding: 0 10px; font-size: 13px; }
  .field input, .field select { padding: 0 12px; } /* stays 16px: iOS Safari zooms the page into any field under 16px (T-050) */
  .stat-num { font-size: 40px; }
}
/* Foldable inner screens held in landscape, and short browser windows: keep the hero from swallowing the fold. */
@media (max-height: 560px) and (orientation: landscape) {
  .hero { padding: 16px 0 40px; }
  .hero-grid { min-height: 0; }
  .mosaic { height: 300px; }
  .section { padding: 56px 0; }
}
/* Unfolded foldable held landscape (~884×430): wide enough for two columns even though it is short, so the form stays
   above the fold. Below this width the single column wins (a 430 px-wide folding phone needs the stacked layout). */
@media (min-width: 800px) and (max-height: 560px) and (orientation: landscape) {
  .hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 32px; align-items: center; }
  /* Phones held sideways (iPhone 812-932 x 375-430) hit this rule too: a width-based 56-62 px headline filled the whole
     screen and the narrow mosaic tiles clipped their chips (T-050). Size the headline to the height, show two columns. */
  .display { font-size: clamp(32px, 9vh, 46px); }
  .pill { margin-bottom: 14px; }
  .mosaic { grid-template-columns: repeat(2, 1fr); }
  .mosaic-col:nth-child(3) { display: none; }
  .hero-lede { font-size: 16px; margin-top: 14px; }
  .waitlist { margin-top: 18px; }
  .hero-points { display: none; }
  .mosaic { height: 280px; }
}
/* Wide + short (unfolded foldable, tablet landscape): two columns still fit, just shallower. */
@media (min-width: 960px) and (max-height: 700px) {
  .hero-grid { min-height: 0; }
  .mosaic { height: min(62vh, 520px); }
}

/* ---------- Dual-screen devices spanned across the hinge (Surface Duo: 2 x 540 px + 34 px hinge) ----------
   Two-column blocks put their gap exactly on the hinge, single text columns keep to the left screen, the header drops
   its anchor links (one sat on the hinge) and the third "How it works" card wraps to a second row, so no text, form or
   card is cut by the hinge (T-050). Assumes two equal screens, which is what every spanning device ships with. */
@media (horizontal-viewport-segments: 2) {
  :root { --hinge: calc(env(viewport-segment-left 1 0, 574px) - env(viewport-segment-right 0 0, 540px)); --half: calc((100% - var(--hinge)) / 2 - var(--gutter)); }
  .hero-grid, .split, .steps, .footer-top, .nd-card, .legal:has(.toc) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: calc(var(--hinge) + 2 * var(--gutter)); }
  .section-head, .legal-head, .legal > section, .status-card, .join-card, .draft-note { max-width: var(--half); }
  .legal > section.compare { max-width: var(--half); }
  .join-page { justify-items: start; }
  .legal:has(.toc) > section { max-width: none; }
  .status-page { place-items: center start; }
  .header-nav:not(.is-open) { display: none; }
  .header-inner .btn { margin-left: auto; }
  .js .menu-btn:not([hidden]) { display: inline-flex; }
}

/* ---------- Cookie consent (CookieConsent v3) themed with our tokens ---------- */
html #cc-main {
  --cc-font-family: var(--font-body);
  --cc-modal-border-radius: var(--radius-lg);
  --cc-btn-border-radius: 14px;
  --cc-bg: var(--surface);
  --cc-primary-color: var(--ink);
  --cc-secondary-color: var(--ink-muted);
  --cc-btn-primary-bg: var(--ember);
  --cc-btn-primary-color: var(--on-ember);
  --cc-btn-primary-border-color: var(--ember);
  --cc-btn-primary-hover-bg: var(--ember);
  --cc-btn-primary-hover-color: var(--on-ember);
  --cc-btn-primary-hover-border-color: var(--ember);
  --cc-btn-secondary-bg: var(--surface-sunken);
  --cc-btn-secondary-color: var(--ink);
  --cc-btn-secondary-border-color: var(--surface-sunken);
  --cc-btn-secondary-hover-bg: var(--line);
  --cc-btn-secondary-hover-color: var(--ink);
  --cc-btn-secondary-hover-border-color: var(--line);
  --cc-separator-border-color: var(--line);
  --cc-toggle-on-bg: var(--ember-deep);
  --cc-toggle-off-bg: var(--control-off);
  --cc-toggle-on-knob-bg: #fff;
  --cc-toggle-off-knob-bg: #fff;
  --cc-toggle-enabled-icon-color: var(--ember-deep);
  --cc-toggle-disabled-icon-color: var(--control-off);
  --cc-toggle-readonly-bg: var(--line);
  --cc-toggle-readonly-knob-bg: var(--surface);
  --cc-toggle-readonly-knob-icon-color: var(--ink-muted);
  --cc-section-category-border: var(--line);
  --cc-cookie-category-block-bg: var(--surface-sunken);
  --cc-cookie-category-block-border: var(--surface-sunken);
  --cc-cookie-category-block-hover-bg: var(--line);
  --cc-cookie-category-block-hover-border: var(--line);
  --cc-cookie-category-expanded-block-bg: var(--surface-sunken);
  --cc-cookie-category-expanded-block-hover-bg: var(--line);
  --cc-overlay-bg: var(--backdrop);
  --cc-footer-bg: var(--surface-sunken);
  --cc-footer-color: var(--ink-muted);
  --cc-footer-border-color: var(--line);
  --cc-link-color: var(--ember-ink);
}
html #cc-main .cm, html #cc-main .pm { box-shadow: var(--shadow-card); }
html #cc-main .cm__title, html #cc-main .pm__title { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.01em; }
html #cc-main .cm__btn, html #cc-main .pm__btn { font-weight: 700; min-height: 44px; }

/* ---------- Footer social links (T-061): icons from src/data/social-icons.json, URLs from site.config.json ---------- */
.footer-social { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; list-style: none; padding: 0; }
.footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-pill); border: 1px solid var(--line); color: var(--ink); transition: color 150ms var(--ease-out), border-color 150ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .footer-social a:hover { color: var(--ember-ink); border-color: var(--ember-ink); } }
.footer-social a:focus-visible { outline: 2px solid var(--ember-ink); outline-offset: 2px; }

/* ---------- Home FAQ (T-061): same details.faq rows as /support; the FAQPage schema is built from them ---------- */
.faq-home .faq-list { max-width: 820px; border-top: 1px solid var(--line); }
.faq-home .faq-more { max-width: 820px; margin-top: 24px; color: var(--ink-muted); }