/* Clocked landing page. Built from docs/design/landing/Landing.dc.html and
   FormStates.dc.html; brand rules in docs/design/brand/README.md. Dark page only. */

/* Mont Heavy, Fontfabric's free demo (licence: fonts/mont-eula.pdf). Converted
   to WOFF2 as is, not subset: the licence forbids modifying the font. One weight,
   for headlines only. The demo draws # % / > ^ _ | ~ and accented letters as
   placeholders, so unicode-range keeps Mont to the characters it really draws;
   the rest (like the "%" in "70%") come from the fallback below. */
@font-face {
  font-family: 'Mont';
  src: url('/fonts/mont-heavy.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-0022, U+0024, U+0026-002E, U+0030-003D, U+003F-005D, U+0060-007B, U+007D, U+00A0, U+00A9, U+00B7, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026;
}
/* Arial Bold sized to Mont's widths, so headlines don't reflow when Mont arrives */
@font-face {
  font-family: 'Mont fallback';
  src: local('Arial Bold'), local('Arial-BoldMT');
  font-weight: 800;
  size-adjust: 107.5%;
  ascent-override: 67.4%;
  descent-override: 16.3%;
}

:root {
  /* Brand and interface */
  --charcoal: #14181C;      /* surfaceBase */
  --off-white: #F2F4F6;     /* textPrimary */
  --grey: #8A97A3;          /* secondary text */
  --grey-light: #C9D0D6;    /* body text on cards */
  --surface-1: #1B2026;
  --surface-2: #242A31;
  --border: #6B7782;
  --accent-fill: #5058ED;
  --purple: #6D74F0;
  --accent-text: #B3B9FB;
  /* Pillar colours, for the taste teaser only (brand README, "Pillar colours").
     The teaser uses the deep shades, always with off-white text (4.7 to 5.0:1). */
  --story-bright: #F2A0D8;       --story-deep: #B8327F;
  --exploration-bright: #2FC3B0; --exploration-deep: #13786D;
  --cozy-bright: #A8D86E;        --cozy-deep: #4A7517;
  --strategy-bright: #4E9BF0;    --strategy-deep: #1F6AC9;
  --competitive-bright: #FF6F61; --competitive-deep: #C8382B;
  --action-bright: #FFA24C;      --action-deep: #A65408;

  /* Phone frames; cover art colours live on the .cover-* classes (placeholders, not brand colours) */
  --art-frame: #0B0D10;
  --art-frame-edge: #2B323A;
  /* The app's gold for Clocked counts and stars (Colors.swift, clocked and rating) */
  --gold: #F5B942;

  --band-placeholder: #5B6570;
  --band-rule: rgba(242, 244, 246, 0.35);

  /* Headlines in Mont; everything else, like the app, in the system font */
  --font-head: 'Mont', 'Mont fallback', -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;

  --pad-x: clamp(16px, 5vw, 64px);
  /* Vertical rhythm, about 30% tighter than the design (Kameron, October 2026) */
  --pad-y: clamp(40px, 5.6vw, 80px);
  --gap-split: clamp(28px, 4.2vw, 56px);

  color-scheme: dark;
}

body {
  margin: 0;
  background: var(--charcoal);
  color: var(--off-white);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

a { color: var(--accent-text); }
a:hover { color: var(--off-white); }
a:focus-visible, button:focus-visible, input:focus-visible, .sent:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
}
.band a:focus-visible, .band button:focus-visible, .band input:focus-visible, .band .sent:focus-visible,
.on-purple a:focus-visible, .on-purple button:focus-visible, .on-purple input:focus-visible, .on-purple .sent:focus-visible {
  outline-color: var(--off-white);
}
main:focus { outline: none; }
/* A safety net: no decoration can ever cause sideways scrolling */
main { overflow-x: clip; }
input::placeholder { color: var(--grey); opacity: 1; }
.band input::placeholder, .on-purple input::placeholder { color: var(--band-placeholder); }
[hidden] { display: none !important; }

.skip {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 10;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 22px;
  background: var(--charcoal);
  color: var(--off-white);
  font-weight: 600;
}
.skip:focus { top: 16px; }

/* Brand purple surfaces (the hero with the header, and the diary section), as on
   the app's onboarding welcome: off-white text (4.81:1). Grey and #B3B9FB fail on
   purple, so notes, captions and links go off-white. Full width without extra
   markup: a spread box-shadow paints the sides, clip-path keeps it from scrolling. */
.on-purple { --surface: var(--accent-fill); background: var(--accent-fill); color: var(--off-white); }
.bleed { box-shadow: 0 0 0 100vmax var(--surface); clip-path: inset(-1px -100vmax); } /* 1px overlap: no seam between neighbours */
.on-purple .caption, .on-purple .field-note { color: var(--off-white); }
.on-purple .header-cta { color: var(--off-white); text-decoration: underline; text-underline-offset: 3px; }
.on-purple .pause { border-color: var(--off-white); }
.on-purple .pause:hover { background: rgba(20, 24, 28, 0.18); }
/* The hero's second line: #6D74F0 would vanish on purple; charcoal is 3.36:1, fine at 40 px and up */
.on-purple .h1-accent { color: var(--charcoal); }
/* No divider line where a section meets a purple one */
.on-purple + .section, .section.on-purple { border-top: none; }

/* Header */
.site-header {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px var(--pad-x);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.logo-link { display: flex; align-items: center; min-height: 44px; color: var(--off-white); }
.lockup { display: block; fill: currentColor; color: var(--off-white); }
.header-cta {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}

/* Type */
.h1 {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.04;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.h1-accent { color: var(--purple); }
.h2 {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(32px, 4.2vw, 52px);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.005em;
}
.body-lg { margin: 0; font-size: 19px; }
.caption { font-size: 13px; color: var(--grey); }

/* Sections */
.hero {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(24px, 4.2vw, 64px) var(--pad-x) var(--pad-y);
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-split);
  align-items: center;
}
.hero-copy { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.hero-lede { margin: 0; max-width: 34em; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.45; }

.section {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--pad-y) var(--pad-x);
  border-top: 1px solid var(--surface-2);
}
.stack-40 { display: flex; flex-direction: column; gap: 28px; }
.stack-32 { display: flex; flex-direction: column; gap: 24px; }
.intro { display: flex; flex-direction: column; gap: 16px; max-width: 40em; }
.split { display: flex; flex-wrap: wrap; gap: var(--gap-split); align-items: center; }
.split-reverse { flex-wrap: wrap-reverse; }
.split-copy { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 16px; max-width: 34em; }

/* Cards */
.cards { margin: 0; padding: 0; list-style: none; display: grid; gap: 16px; }
.cards-status { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.card { padding: 24px; border-radius: 20px; background: var(--surface-1); display: flex; flex-direction: column; gap: 8px; }
.card-clocked { background: var(--surface-2); box-shadow: inset 0 0 0 2px var(--purple); }
.card-title { font-size: 20px; font-weight: 700; }
.card-text { color: var(--grey-light); }
/* A status's icon, in a tinted circle like the app's Log sheet rows. Drawn here, not SF Symbols
   (Apple's licence keeps those to its platforms). Each has its own shape, so colour never tells them apart. */
.card-icon {
  width: 44px; height: 44px; border-radius: 50%; margin-bottom: 4px;
  display: grid; place-items: center;
  background: rgba(109, 116, 240, 0.18); color: var(--accent-text);
}
.card-icon svg { fill: currentColor; } /* the logo mark has no colour of its own */

/* What to expect: a plain list, two columns from tablet width; the icon sits beside its title */
.expect-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 28px 56px; max-width: 1040px; }
@media (min-width: 760px) { .expect-list { grid-template-columns: 1fr 1fr; } }
.expect-item { display: grid; grid-template-columns: 32px minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 4px 16px; align-items: start; }
.expect-icon { grid-row: span 2; width: 32px; height: 32px; display: grid; place-items: center; color: var(--accent-text); }
.expect-icon svg { fill: currentColor; }
.expect-title { font-size: 19px; font-weight: 700; line-height: 1.35; }
.expect-text { color: var(--grey-light); }
/* "No" signs (No ads, No points or streaks): a ring, real letters at 13 px (the page's minimum),
   and a slash corner to corner that breaks around them (outlined in the page colour) */
.expect-no { position: relative; border-radius: 50%; box-shadow: inset 0 0 0 2.5px currentColor; font-size: 13px; font-weight: 800; letter-spacing: 0.02em; line-height: 1; }
.expect-no::after { content: ''; position: absolute; left: 50%; top: 3px; bottom: 3px; width: 2.5px; margin-left: -1.25px; border-radius: 2px; background: currentColor; transform: rotate(-45deg); }
.expect-no > span { position: relative; z-index: 1; -webkit-text-stroke: 4px var(--charcoal); paint-order: stroke fill; }

/* The rating stars, as in the app (StarRating.swift): gold when filled, grey at 75% when empty,
   in half steps. Full stars without JavaScript or with reduced motion; main.js fills them once on view. */
.stars { display: flex; gap: 10px; }
.stars .defs { position: absolute; }
.star { width: 40px; height: 40px; overflow: visible; }
.star use { stroke-width: 1.6; stroke-linejoin: round; }
.star-empty { fill: none; stroke: var(--grey); stroke-opacity: 0.75; }
.star-fill, .star-half { fill: var(--gold); stroke: var(--gold); }
.star-half, .star.is-full .star-half { display: none; }
.star.is-half .star-half { display: inline; }
.stars.is-rating .star:not(.is-full) .star-fill { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .star { transition: transform 0.18s ease-out; }
  .star.is-pop { transform: scale(1.18); }
}
.callout {
  display: grid; grid-template-columns: auto 1fr; gap: 12px 20px; align-items: start;
  padding: 24px 28px;
  border-radius: 20px;
  background: var(--surface-1);
}
.callout-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.callout-title { margin: 0; font-size: 20px; font-weight: 700; }
.callout-text { margin: 0; color: var(--grey-light); }
.swipe-list { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; color: var(--grey-light); }
.swipe-list li { display: flex; align-items: center; gap: 10px; }
.swipe-list b { color: var(--off-white); font-weight: 700; }
.swipe-arrow { flex-shrink: 0; color: var(--accent-text); }
@media (max-width: 480px) { .callout { grid-template-columns: 1fr; padding: 22px; } }

/* Phone frames (static pictures; their text is hidden from assistive tech) */
.device { flex: 1 1 300px; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.device-foot { display: flex; align-items: center; gap: 12px; }
/* A line-drawn controller, a background element for the diary heading. Its d-pad is the Clocked
   mark. Drawn with no overlapping lines and no tangents: every part keeps 14 or more units clear.
   Decorative and hidden from assistive tech. It never sits behind the paragraph or the phone: even
   faint lines behind body text would take it under 4.5:1 on this purple. */
.diary-head { position: relative; }
.diary-head .h2 { position: relative; z-index: 1; }
.controller {
  /* Narrow screens: in the flow, above the heading */
  display: block; width: clamp(200px, 60vw, 280px); height: auto;
  margin: 0 0 14px -6px; transform: rotate(-6deg); transform-origin: left center;
  fill: none; stroke: var(--off-white); stroke-opacity: 0.3; stroke-width: 7;
  stroke-linecap: round; stroke-linejoin: round;
  pointer-events: none;
}
.controller-mark { stroke: none; fill: var(--off-white); fill-opacity: 0.5; }
@media (min-width: 900px) {
  /* Wide screens: large and faint in the open space above the heading, clear of its letters (no
     tangents with the text), anchored to it so it stays put as the layout reflows. */
  .controller {
    position: absolute; z-index: 0; margin: 0;
    width: clamp(330px, 32vw, 470px); left: 28%; bottom: calc(100% + 16px);
    transform: rotate(-8deg); transform-origin: center;
    stroke-opacity: 0.18;
  }
  .controller-mark { fill-opacity: 0.3; }
}
.phone {
  width: 300px;
  max-width: 100%;
  height: 620px;
  box-sizing: border-box;
  padding: 10px;
  border-radius: 50px;
  background: var(--art-frame);
  border: 1px solid var(--art-frame-edge);
}
.screen {
  height: 100%;
  box-sizing: border-box;
  border-radius: 40px;
  background: var(--charcoal);
  padding: 12px 14px 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.screen-quicklog { gap: 12px; position: relative; }
/* The launch screen: the app's cold-launch reveal, then it fades into the deck (main.js) */
.ph-launch { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; background: var(--charcoal); border-radius: 40px; }
.ph-launch .rv { width: 66%; height: auto; }
.screen-profile { gap: 6px; } /* 6, not 14: room for the tab bar */
.screen-following { gap: 10px; }
/* The app's tab bar (ClockedTabBar.swift) at about 0.7 scale: four tabs and the raised + in
   brand purple; the current tab in off-white, the rest grey. Icons only: at this size the app's
   labels would be 9 px, under the page's 13 px minimum. Icons drawn here, not SF Symbols. */
.ph-tabbar {
  flex-shrink: 0; margin: auto -14px -16px; padding: 6px 6px 14px;
  display: flex; align-items: center;
  background: var(--charcoal); border-top: 1px solid rgba(138, 151, 163, 0.25);
  position: relative;
}
.tb-item { flex: 1; display: flex; justify-content: center; color: var(--grey); }
.tb-item svg { width: 20px; height: 20px; }
.tb-item.is-on { color: var(--off-white); }
.tb-log { flex: 1; display: flex; justify-content: center; }
.tb-log svg { width: 36px; height: 36px; padding: 9px; box-sizing: border-box; border-radius: 50%; background: var(--purple); color: var(--charcoal); }

/* Status bar, as on the app's screenshots */
.ph-status { position: relative; z-index: 3; display: flex; justify-content: space-between; align-items: center; height: 26px; padding: 0 10px 0 14px; font-size: 13px; font-weight: 600; }
.ph-island { position: absolute; left: 50%; top: 1px; width: 84px; height: 24px; margin-left: -42px; border-radius: 12px; background: #000; }
.ph-status-icons { display: flex; gap: 5px; align-items: center; }
.ph-status-icons svg { display: block; fill: currentColor; }

/* Placeholder cover art: made-up colours and shapes, never real covers */
.cover-a { --c1: #3A3F7A; --c2: #1E2150; --c3: #7B7FD6; }
.cover-b { --c1: #2F5D63; --c2: #173338; --c3: #6FB3A8; }
.cover-c { --c1: #6B3F5E; --c2: #2E1A2A; --c3: #D98BB8; }
.cover-d { --c1: #6A4A2A; --c2: #2E1F12; --c3: #E0A35C; }
.cover-e { --c1: #3E4B6E; --c2: #1A2236; --c3: #9DB2E8; }
.cover-a, .cover-b, .cover-c, .cover-d, .cover-e { background: linear-gradient(165deg, var(--c1), var(--c2)); position: relative; overflow: hidden; }
.art-sun { position: absolute; width: 62%; aspect-ratio: 1; border-radius: 50%; background: var(--c3); opacity: 0.55; top: 14%; right: -14%; }
.art-band { position: absolute; left: -10%; right: -10%; height: 22%; bottom: 30%; background: var(--c2); opacity: 0.85; transform: rotate(-8deg); }
.art-band-2 { bottom: 12%; height: 14%; opacity: 0.5; transform: rotate(5deg); }

/* Quick log: the app's deck screen */
.ql-top { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px 0; color: var(--off-white); }
.ql-top svg { display: block; }
.ql-count { font-size: 14px; font-weight: 600; color: var(--grey); }
.ql-undo { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--grey); }
.ql-card { flex-grow: 1; position: relative; border-radius: 22px; overflow: hidden; background: var(--surface-2); }
.ql-cover { position: absolute; inset: 0; }
.ql-info {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 56px 14px 14px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  background: linear-gradient(to bottom, rgba(11, 13, 16, 0), rgba(11, 13, 16, 0.86) 45%);
}
.ql-name { font-size: 22px; font-weight: 800; line-height: 1.15; }
.ql-sub { font-size: 13px; color: var(--grey-light); }
.ql-clock { margin-top: 10px; display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 16px; background: var(--accent-fill); font-size: 13px; font-weight: 700; }
.ql-clock svg { display: block; fill: var(--off-white); }
.ql-actions { display: flex; gap: 6px; }
.ql-btn {
  flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 5px;
  height: 40px; padding: 0 6px; border-radius: 12px;
  background: var(--surface-2); font-size: 13px; font-weight: 700; white-space: nowrap;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.ql-btn svg { display: block; flex-shrink: 0; }
.ql-btn-played { background: var(--accent-fill); }
.ql-btn.is-active { transform: scale(0.94); filter: brightness(1.35); }

/* Profile and diary */
.pf-head { display: flex; gap: 12px; align-items: center; padding: 6px 4px 0; }
.pf-avatar { width: 48px; height: 48px; flex-shrink: 0; border-radius: 24px; background: var(--surface-2); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 600; color: var(--grey); }
.pf-names { display: flex; flex-direction: column; }
.pf-name { font-size: 19px; font-weight: 700; }
.pf-handle { font-size: 13px; color: var(--grey); }
.pf-follow { display: flex; gap: 14px; padding: 0 4px; font-size: 13px; color: var(--grey); }
.pf-follow b { color: var(--off-white); }
.pf-block { display: flex; flex-direction: column; gap: 8px; }
.pf-heading { font-size: 17px; font-weight: 700; padding: 0 4px; }
.pf-covers { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.cover-mini { display: block; aspect-ratio: 3 / 4; border-radius: 6px; }

/* Rows, as in the app's diary and Following lists */
.ph-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 14px; background: var(--surface-1); font-size: 13px; }
.ph-row-top { align-items: flex-start; }
.ph-row-top .ph-chev { align-self: center; }
.ph-thumb { width: 34px; flex-shrink: 0; border-radius: 5px; }
.ph-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.3; }
.ph-text b { font-weight: 700; }
.ph-strong { font-weight: 700; }
.ph-meta { font-size: 13px; color: var(--grey); }
.screen-profile .ph-meta { white-space: nowrap; }
.ph-stars { color: var(--gold); letter-spacing: 0.02em; }
.ph-quote { font-size: 13px; color: var(--grey-light); }
.ph-accent { color: var(--accent-text); }
.ph-when { font-size: 13px; color: var(--grey); white-space: nowrap; }
.ph-chev { display: block; flex-shrink: 0; color: var(--grey); }
.ph-section { font-size: 13px; font-weight: 600; color: var(--grey); padding: 2px 4px 0; }
.fl-top { display: flex; justify-content: space-between; align-items: center; padding: 6px 4px 0; }
.fl-top svg { display: block; }
.fl-title { font-size: 24px; font-weight: 800; }

.pause {
  height: 44px;
  padding: 0 16px;
  border: 1.5px solid var(--border);
  border-radius: 22px;
  background: transparent;
  color: var(--off-white);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  white-space: nowrap;
}
.pause svg { display: block; }

/* Interaction states: small and quick */
a, .header-cta { transition: color 0.15s ease; }
.field-button, .pause, .taste-control { transition: filter 0.15s ease, transform 0.15s ease, background-color 0.15s ease; }
.field-button:hover { filter: brightness(1.12); }
.band .field-button:hover, .on-purple .field-button:hover { filter: none; background: #232a31; }
.pause:hover { background: var(--surface-2); }
.taste-control:hover { background: rgba(127, 127, 127, 0.14); }
@media (prefers-reduced-motion: no-preference) {
  .field-button:active, .pause:active, .taste-control:active { transform: scale(0.98); }
}


/* Taste teaser: Story & RPG's bright shade, charcoal text, dial and mark */
.section-taste {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(16px, 2.8vw, 32px) var(--pad-x) var(--pad-y);
}
.taste {
  background: var(--story-deep);
  color: var(--off-white);
  /* main.js fades the colours itself (through OKLCH) while the dial cycles */
  border-radius: 32px;
  padding: clamp(28px, 5vw, 64px);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  position: relative;
}
.taste-copy { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.taste-kicker { font-size: clamp(18px, 1.7vw, 23px); font-weight: 800; letter-spacing: 0.01em; }
/* "Coming soon" reads as a roadmap tag, not a subheading: a pill. On the taste card a dark tint (it
   raises the off-white text to 7.2:1 or more on every deep shade); on charcoal the accent tint, as
   the icon circles (#B3B9FB on it, 7.65:1). */
.taste-kicker {
  align-self: flex-start; display: inline-flex; align-items: center;
  padding: 7px 16px; border-radius: 999px;
  font-size: clamp(16px, 1.3vw, 18px); font-weight: 700; letter-spacing: 0.01em; line-height: 1.2;
  background: rgba(20, 24, 28, 0.3);
}
.kicker-on-dark { background: rgba(109, 116, 240, 0.18); color: var(--accent-text); }
.h2-taste { font-size: clamp(36px, 5vw, 64px); line-height: 1.02; letter-spacing: -0.01em; }
.taste-text { max-width: 26em; }
.taste-mark { display: block; margin-top: 12px; fill: currentColor; }
.taste-figure {
  flex: 1 1 340px;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  container-type: inline-size;
}
.dial { display: block; width: 100%; max-width: 520px; height: auto; overflow: visible; fill: currentColor; }
.dial-ring { fill: none; stroke: currentColor; stroke-opacity: 0.25; stroke-width: 2; }
.dial-shape { fill: currentColor; fill-opacity: 0.12; stroke: currentColor; stroke-width: 4; stroke-linejoin: round; }
.dial-label { font-family: var(--font-body); font-size: 19px; }
.dial-label-strong { font-weight: 700; }
/* The dial scales with its box (viewBox 640 wide), so its labels grow in SVG
   units as it shrinks: about 16 px on screen at full size, never under 13 px.
   The bottom label moves down as it grows, to clear the dial's bottom point. */
@container (max-width: 519px) { .dial-label { font-size: 23px; } .dial-label-bottom { transform: translateY(6px); } }
@container (max-width: 420px) { .dial-label { font-size: 27px; } .dial-label-bottom { transform: translateY(11px); } }
@container (max-width: 350px) { .dial-label { font-size: 31px; } .dial-label-bottom { transform: translateY(15px); } }
@container (max-width: 290px) { .dial-label { font-size: 35px; } .dial-label-bottom { transform: translateY(19px); } }
@container (max-width: 252px) { .dial-label { font-size: 38px; } .dial-label-bottom { transform: translateY(22px); } }
.taste-caption { font-size: 15px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
/* The sample title is the line people should read: headline face, sized to the dial */
.taste-title {
  font-family: var(--font-head);
  font-size: clamp(24px, 9.5cqi, 40px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0;
  white-space: nowrap;
}
.taste-ast { font-size: 0.6em; vertical-align: 0.6em; margin-left: 0.05em; }
.taste-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.taste-control {
  height: 44px;
  padding: 0 16px;
  border: 1.5px solid currentColor;
  border-radius: 22px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  white-space: nowrap;
}
.taste-control svg { display: block; }
/* Pause and play icons: after the button rules so they win at equal specificity */
button .icon-play, button.is-paused .icon-pause { display: none; }
button.is-paused .icon-play { display: block; }
/* On the pillar colours the ring follows the text colour, which passes on every one */
.taste .taste-control:focus-visible { outline-color: currentColor; }
.taste-note { margin: 0; flex: 1 1 100%; font-size: 13px; }

/* The lockup reveal on its own, between What to expect and Want in early?: the
   lockup is as tall as a section heading's line, with that much space and a few
   pixels more above and below. */
.lockup-break {
  --lockup-h: calc(clamp(32px, 4.2vw, 52px) * 1.08);
  max-width: 1200px;
  margin: 0 auto;
  padding: calc(var(--lockup-h) + 4px) var(--pad-x);
  display: flex;
  justify-content: center;
  color: var(--off-white);
}
.lockup-break .rv { display: block; height: var(--lockup-h); width: auto; }
.section.before-break { padding-bottom: 0; }
.rv { fill: currentColor; overflow: visible; }

/* Taste match: two players' shapes on one dial (Section 18), on charcoal */
.match-figure { flex: 1 1 300px; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; container-type: inline-size; }
.match-you { fill: var(--off-white); fill-opacity: 0.12; stroke: var(--off-white); stroke-width: 4; stroke-linejoin: round; }
.match-them { fill: var(--accent-text); fill-opacity: 0.1; stroke: var(--accent-text); stroke-width: 3.5; stroke-dasharray: 12 9; stroke-linejoin: round; }
.match-caption { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.match-legend { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--grey-light); }
.match-key { display: inline-block; width: 22px; height: 0; border-top: 3px solid var(--off-white); }
.match-key-them { border-top: 3px dashed var(--accent-text); margin-left: 10px; }
.match-headline { font-family: var(--font-head); font-size: clamp(22px, 6.5cqi, 32px); font-weight: 800; line-height: 1.15; letter-spacing: 0; text-wrap: balance; }
.match-overlap { font-size: 17px; color: var(--grey-light); }
.match-overlap [data-match-pct] { font-family: var(--font-head); font-weight: 800; color: var(--off-white); font-variant-numeric: tabular-nums; }
/* The demo Mont has no real %, so the sign is the fallback's, scaled so its top meets Mont's digits */
.match-pct-sign { font-family: var(--font-head); font-weight: 800; color: var(--off-white); font-size: 0.87em; }
.match-note { margin: 0; font-size: 13px; color: var(--grey); }

/* Purple band */
.section-band {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--pad-x) var(--pad-y);
}
.band {
  background: var(--accent-fill);
  color: var(--off-white);
  border-radius: 32px;
  padding: clamp(28px, 5vw, 64px);
  display: flex;
  flex-wrap: wrap;
  gap: 28px 64px;
  align-items: flex-end;
}
.band-copy { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.band-foot { margin: 0; flex: 1 1 100%; padding-top: 20px; border-top: 1px solid var(--band-rule); font-size: 16px; }
.band-foot a { color: var(--off-white); font-weight: 600; }
/* Inline link: padding grows the tap area to 44 px, the negative margin keeps the line where it was */
.band-foot a { display: inline-block; padding: 13px 0; margin: -13px 0; }

/* Email link (both copies). The sign-up forms wait for an email service and a privacy
   policy; until then a "Get updates" button opens the visitor's email app. */
.cta { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.cta-button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 30px; border-radius: 26px;
  background: var(--accent-fill); color: var(--off-white);
  font-size: 17px; font-weight: 600; text-decoration: none;
  transition: filter 0.15s ease, transform 0.15s ease, background-color 0.15s ease;
}
.cta-button:hover { color: var(--off-white); filter: brightness(1.12); }
.band .cta-button, .on-purple .cta-button { background: var(--charcoal); }
.band .cta-button:hover, .on-purple .cta-button:hover { filter: none; background: #232a31; }
@media (prefers-reduced-motion: no-preference) { .cta-button:active { transform: scale(0.98); } }
.field-note a { color: inherit; font-weight: 600; display: inline-block; padding: 13px 0; margin: -13px 0; } /* 44 px tap area, line unmoved */

/* Email form (both copies; not on the page while the forms wait) */
.signup { display: flex; flex-direction: column; max-width: 520px; }
.signup-band { flex: 1 1 400px; min-width: 0; max-width: none; }
.signup-form { display: flex; flex-direction: column; gap: 10px; }
.field-label { font-size: 15px; font-weight: 600; }
.field-row { display: flex; flex-wrap: wrap; gap: 10px; }
.field-input {
  flex: 1 1 240px;
  min-width: 0;
  height: 52px;
  box-sizing: border-box;
  padding: 0 18px;
  border: 1.5px solid var(--border);
  border-radius: 26px;
  background: var(--surface-1);
  color: var(--off-white);
  font: inherit;
  font-size: 17px;
}
.field-button {
  flex: 1 0 auto;
  height: 52px;
  padding: 0 26px;
  border: none;
  border-radius: 26px;
  background: var(--accent-fill);
  color: var(--off-white);
  font: inherit;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
}
.field-note { margin: 0; font-size: 15px; color: var(--grey); }
/* Errors: words, an icon and a heavier border, never colour alone */
.field-input[aria-invalid="true"] { border: 2.5px solid var(--off-white); }
.field-error { margin: 0; display: flex; gap: 8px; align-items: flex-start; font-size: 15px; font-weight: 600; }
.field-error svg { flex-shrink: 0; margin-top: 2px; }
/* The error sits between the field and the button when they stack (FormStates),
   and on its own line under them when they share one. */
.signup-form { container-type: inline-size; }
.field-row .field-error { flex: 1 1 100%; }
@container (min-width: 410px) { .field-row .field-error { order: 3; } }

.band .field-input, .on-purple .field-input { border-color: var(--charcoal); background: var(--off-white); color: var(--charcoal); }
.band .field-input[aria-invalid="true"], .on-purple .field-input[aria-invalid="true"] { border: 2.5px solid var(--charcoal); }
.band .field-button, .on-purple .field-button { background: var(--charcoal); }
.band .field-note, .on-purple .field-note { color: var(--off-white); }

.sent { padding: 24px; border-radius: 20px; background: var(--surface-1); display: flex; flex-direction: column; gap: 8px; }
.sent-title { font-size: 20px; font-weight: 700; }
.sent-text { color: var(--grey-light); }

/* Footer */
.site-footer {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px var(--pad-x) 36px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--surface-2);
  font-size: 15px;
  color: var(--grey);
}
.footer-nav { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.footer-nav a { display: flex; align-items: center; min-height: 44px; }

/* Short pages (404.html) */
.stub { display: flex; flex-direction: column; gap: 16px; min-height: 50vh; }
.stub .lede { margin: 0; font-size: 19px; }
/* Not found (404.html): Firebase Hosting serves it for any address that doesn't exist */
.notfound { padding-top: clamp(32px, 6vw, 72px); border-top: none; }
.notfound-mark { display: block; width: 72px; height: 72px; fill: var(--off-white); }

/* Privacy policy (privacy.html): a readable column of long-form text */
.legal { max-width: 760px; padding-top: clamp(24px, 4vw, 48px); border-top: none; color: var(--grey-light); }
.legal-head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 32px; color: var(--off-white); }
.legal-head .caption { margin: 0; font-size: 15px; }
.legal h2 {
  margin: 48px 0 12px;
  font-family: var(--font-head);
  font-size: clamp(22px, 2.4vw, 26px);
  line-height: 1.2;
  font-weight: 800;
  color: var(--off-white);
  scroll-margin-top: 16px;
}
.legal h3 { margin: 28px 0 8px; font-size: 18px; line-height: 1.3; font-weight: 700; color: var(--off-white); }
.legal p { margin: 0 0 14px; }
.legal ul, .legal ol { margin: 0 0 14px; padding-left: 1.25em; }
.legal li { margin-bottom: 8px; }
.legal li::marker { color: var(--grey); }
.legal strong { color: var(--off-white); font-weight: 600; }
.legal address { font-style: normal; }
.legal a { overflow-wrap: anywhere; }
.legal-summary, .legal-toc { margin-top: 24px; padding: 24px; border-radius: 20px; background: var(--surface-1); }
.legal-summary h2, .legal-toc h2 { margin-top: 0; }
.legal-summary ul, .legal-toc ol { margin-bottom: 0; }
.legal-toc li { margin-bottom: 4px; }
.legal-toc a { display: inline-block; padding: 6px 0; }
.legal-table-wrap { margin: 0 0 16px; border: 1px solid var(--surface-2); border-radius: 16px; overflow: hidden; }
.legal-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.4; }
.legal-table th, .legal-table td { padding: 12px 14px; text-align: left; vertical-align: top; border-top: 1px solid var(--surface-2); }
.legal-table thead th { border-top: none; background: var(--surface-1); color: var(--off-white); font-weight: 600; }
.legal-table tbody th { color: var(--off-white); font-weight: 600; width: 32%; }
.legal-table td:last-child { width: 22%; color: var(--off-white); font-weight: 600; }
.legal-note { display: block; font-weight: 400; color: var(--grey); }
/* Phones: each row becomes a small card, so nothing scrolls sideways */
@media (max-width: 600px) {
  .legal-summary, .legal-toc { padding: 20px; }
  .legal-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .legal-table, .legal-table tbody, .legal-table tr, .legal-table th, .legal-table td { display: block; width: auto !important; }
  .legal-table tr { padding: 12px 14px; border-top: 1px solid var(--surface-2); }
  .legal-table tbody tr:first-child { border-top: none; }
  .legal-table th, .legal-table td { padding: 0; border-top: none; }
  .legal-table td { margin-top: 4px; }
}