/* 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. */

: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);

  /* Swap the headline face here later; no webfonts for now */
  --font-head: -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.02em;
  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.015em;
}
.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)); }
.cards-expect { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.card { padding: 24px; border-radius: 20px; background: var(--surface-1); display: flex; flex-direction: column; gap: 8px; }
.card-expect { gap: 6px; }
.card-clocked { background: var(--surface-2); box-shadow: inset 0 0 0 2px var(--purple); }
.card-title { font-size: 20px; font-weight: 700; }
.card-title-sm { font-size: 19px; }
.card-text { color: var(--grey-light); }
.callout {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: baseline;
  padding: 24px 28px;
  border-radius: 20px;
  background: var(--surface-1);
}
.callout-title { margin: 0; font-size: 20px; font-weight: 700; }
.callout-text { margin: 0; color: var(--grey-light); flex: 1 1 320px; }

/* 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 in the diary section's copy column: beside the phone on wide
   screens, between the copy and the phone on narrow ones. Decorative, hidden from assistive
   tech, in the normal flow so it never overlaps the phone or the text. Drawn with no
   overlapping lines and no tangents: every part keeps 14 or more units clear. */
.controller {
  /* Rotated 8°, the box is about 8% wider than it's laid out, so it's sized to fit the column turned */
  display: block; width: min(calc(92% - 12px), 400px); height: auto;
  margin: 28px 0 8px 12px; transform: rotate(-8deg);
  fill: none; stroke: var(--off-white); stroke-opacity: 0.24; stroke-width: 7;
  stroke-linecap: round; stroke-linejoin: round;
  pointer-events: none;
}
.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: 14px; }
.screen-following { gap: 10px; }

/* 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); }
}

/* Sections fade up once as they enter view. Only when JavaScript runs and
   motion is allowed (main.js adds .motion-ok), so content is never hidden otherwise. */
.motion-ok .reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
.motion-ok .reveal.is-in { opacity: 1; transform: none; }

/* 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; }
.h2-taste { font-size: clamp(36px, 5vw, 64px); line-height: 1.02; letter-spacing: -0.02em; }
.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.015em;
  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.01em; text-wrap: balance; }
.match-overlap { font-size: 17px; color: var(--grey-light); }
.match-overlap [data-match-pct] { font-weight: 800; color: var(--off-white); font-variant-numeric: tabular-nums; }
.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; }

/* Privacy stub */
.stub { display: flex; flex-direction: column; gap: 16px; min-height: 50vh; }
.stub .lede { margin: 0; font-size: 19px; }