/* Colour: "노랑 × 마젠타 포인트" (claude.ai/artifact/NvnGTNX76EKQT7fnJANi3Z, page "point") — navy ground,
   white type, yellow for action and proof (buttons, progress, success, the proof numbers), magenta only
   for the point to fix (weakest, the pre-aim zone). Text on a yellow or magenta field is navy: white on
   them fails contrast (1.69 and 2.89), and magenta on yellow is 1.71, so the two never touch as text.
   Shape and type stay from the Awwwards reference system (Inter Tight 600 against 300, radii, spacing). */
/* Inter Tight (SIL OFL 1.1, fonts/OFL.txt), served from this site — fetching it from Google would
   hand every visitor's IP address to Google (LG München I, 3 O 17493/20). Latin subsets only. */
/* latin-ext */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/inter-tight-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/inter-tight-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #0a1020;
  --surface: #131b30;
  --line: #1f2942;
  --line-2: #2e3a5a;
  --ink: #f4f6fa;           /* 17.52 on --bg */
  --ink-2: #8e99ad;         /* 6.60 on --bg, 5.96 on --surface */
  --yellow: #ffb000;        /* 10.35 on --bg; navy on it 10.35 */
  --yellow-hover: #ffc233;
  --point: #f05aa6;         /* 6.06 on --bg; navy on it 6.06 */
  --font-sans: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --radius-2: 2px;
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-14: 14px;
  --duration-300: 0.3s;
  --duration-400: 0.4s;
  --duration-600: 0.6s;

  /* the film's windows read these */
  --film-ink: var(--ink);
  --film-dim: var(--ink-2);
  --film-bg: var(--bg);
  --accent: var(--yellow);
  --good: var(--yellow);
  --warn: var(--point);
  --danger: #ff3b4a;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

#film {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  background: var(--film-bg);
}

.hit-flash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse at center, rgba(255, 59, 74, 0) 35%, rgba(255, 59, 74, 0.55) 100%);
}

.vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.45) 100%);
}

/* ── buttons: yellow with navy text (10.35:1) ─────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  height: 42px;
  padding: 0 20px;
  border-radius: var(--radius-8);
  background: var(--yellow);
  color: var(--bg);
  font: 600 14px/1 var(--font-sans);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--duration-300) ease, color var(--duration-300) ease;
}
.btn:hover { background: var(--yellow-hover); }

/* ── header: clear over the film, a navy bar once the page reaches it ───── */
.top {
  position: fixed;
  top: 0; left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  padding: 16px clamp(16px, 4vw, 60px);
  z-index: 8;
  border-bottom: 1px solid transparent;
  transition: background var(--duration-400) ease, border-color var(--duration-400) ease, padding var(--duration-400) ease;
}
.top.is-solid {
  background: rgba(10, 16, 32, 0.94);
  backdrop-filter: blur(8px);
  border-bottom-color: var(--line);
  padding-top: 8px;
  padding-bottom: 8px;
}
.nav { display: flex; gap: 30px; margin-left: auto; }
.nav a {
  color: var(--ink);
  text-decoration: none;
  font: 400 14px/2 var(--font-sans);
  transition: color var(--duration-300) ease;
}
.top.is-solid .nav a { color: var(--ink-2); }
.nav a:hover, .top.is-solid .nav a:hover { color: var(--ink); }
@media (max-width: 700px) { .nav { display: none; } }
.wordmark {
  color: var(--ink);
  text-decoration: none;
  font: 600 22px/1.27 var(--font-sans);
  letter-spacing: -0.02em;
}
.wordmark .dot { color: var(--yellow); }

/* ── the film: caption, loader, replay ─────────────────────────────────── */
.caption {
  position: fixed;
  left: clamp(16px, 6vw, 96px);
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  text-align: left;
  pointer-events: none;
  z-index: 4;
  color: var(--film-ink);
}
.scrim {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 3;
  background: linear-gradient(90deg, rgba(8, 9, 11, 0.72) 0%, rgba(8, 9, 11, 0.35) 38%, rgba(8, 9, 11, 0) 62%);
}
@media (max-aspect-ratio: 1/1) {
  .caption { top: auto; bottom: 14vh; transform: none; text-align: center; left: 16px; }
  .scrim { background: linear-gradient(0deg, rgba(8, 9, 11, 0.75) 0%, rgba(8, 9, 11, 0) 50%); }
}
/* the system's contrast: a heavy line over a light one */
.line {
  margin: 0;
  line-height: 1;
  letter-spacing: -0.03em;
  opacity: 0;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
}
.line-1 { font-size: clamp(44px, 9vw, 128px); font-weight: 600; }
.line-2 { font-size: clamp(26px, 4.6vw, 70px); font-weight: 300; margin-top: 8px; }

.loader {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  font: 500 11px/1.64 var(--font-sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--film-dim);
  background: var(--film-bg);
  z-index: 10;
  transition: opacity var(--duration-600) ease;
}
.loader.done { opacity: 0; pointer-events: none; }

.hud-foot {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 16px clamp(16px, 4vw, 60px);
  z-index: 5;
}
/* the film's one control: a round play / pause / replay icon with its word. Large whenever the film
   is stopped (the play target should be obvious), compact while it plays so it stays out of the shot */
.replay {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 48px;
  padding: 0 18px 0 6px;
  font: 500 15px/1 var(--font-sans);
  color: var(--ink);
  background: rgba(10, 16, 32, 0.6);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--duration-400) ease, height var(--duration-300) ease, padding var(--duration-300) ease,
    border-color var(--duration-300) ease, background var(--duration-300) ease;
}
.replay.show { opacity: 1; }
.replay.is-big {
  height: 76px;
  gap: 16px;
  padding: 0 28px 0 8px;
  font: 600 20px/1 var(--font-sans);
  background: rgba(10, 16, 32, 0.72);
  border-color: rgba(244, 246, 250, 0.45);
}
.replay:hover { border-color: var(--ink); }
.replay:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }
.ctl-icon {
  flex: none;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ink);
  color: var(--bg);
  transition: width var(--duration-300) ease, height var(--duration-300) ease;
}
.replay.is-big .ctl-icon { width: 60px; height: 60px; }
.ctl-icon svg { display: none; width: 50%; height: 50%; fill: currentColor; }
.ctl-icon .i-replay { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.replay[data-state="play"] .i-play, .replay[data-state="pause"] .i-pause, .replay[data-state="replay"] .i-replay { display: block; }

/* ── overlays for scenes 4–8 ─────────────────────────────────────────── */
.dim, .rewind {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 3;
}
.dim { background: #05070a; }
/* looking through the optic: a soft ring centred on the aim point */
.scope {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 3;
  --sx: 50vw;
  --sy: 50vh;
  background: radial-gradient(circle at var(--sx) var(--sy), transparent 0 30vmin, rgba(255, 176, 0, 0.35) 30.4vmin, rgba(5, 8, 18, 0.55) 31vmin, rgba(5, 8, 18, 0.88) 48vmin);
}
.rewind {
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.07) 0 2px, transparent 2px 6px),
    linear-gradient(90deg, rgba(255, 176, 0, 0.16), rgba(255, 59, 74, 0.16));
  mix-blend-mode: screen;
}
.rewind::after {
  content: '\25C0\25C0';
  position: absolute;
  top: 84px;
  left: clamp(16px, 6vw, 96px);
  font: 600 22px/1 var(--font-sans);
  letter-spacing: -0.1em;
  color: var(--film-ink);
}

/* ── the film's windows: navy glass; yellow = progress and success, magenta = the point ─ */
.hud {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  color: var(--film-ink);
  font-variant-numeric: tabular-nums;
}

/* Tag shapes from the reference system (radius-4 outline, radius-2 solid) */
.tag-ex {
  margin-left: auto;
  font: 500 10px/17px var(--font-sans);
  font-style: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-4);
  padding: 0 4px;
}
.card {
  background: rgba(19, 27, 48, 0.92);
  border: 1px solid var(--line);
  border-radius: var(--radius-14);
  backdrop-filter: blur(6px);
}

/* the analysis window — hung in front of the player (positioned and scaled from the film) */
.analysis {
  position: absolute;
  left: 0; top: 0;
  width: 420px;
  padding: 20px 20px 8px;
  transform-origin: 50% 50%;
  visibility: hidden;
  opacity: 0;
}
.a-head, .q-label { display: flex; gap: 10px; align-items: baseline; font: 600 13px/1 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; }
.a-head { margin-bottom: 8px; }
.a-head b, .q-label b { color: var(--film-ink); font-weight: 600; }
.a-head span, .q-label span { color: var(--film-dim); font-weight: 400; letter-spacing: 0.04em; }
.readout { padding: 10px 0; border-top: 1px solid var(--line); visibility: hidden; opacity: 0; }
.ro-head { display: flex; gap: 8px; align-items: center; font: 500 11px/1.64 var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--film-dim); }
.ro-value { font-size: 28px; font-weight: 600; line-height: 1; letter-spacing: -0.02em; margin-top: 6px; }
.ro-note { font-size: 12px; font-weight: 300; line-height: 1.5; color: var(--film-dim); margin-top: 2px; }

/* the quest window — a presentation panel, not an in-game overlay. It hangs beside the analysis
   window, then docks to the screen for the fight (positioned and scaled from the film) */
.quest {
  position: absolute;
  left: 0; top: 0;
  width: 460px;
  transform-origin: 50% 50%;
  padding: 20px 24px 24px;
  visibility: hidden;
  opacity: 0;
  overflow: hidden;
  --flash: 0;
}
.quest.card { border: 2px solid var(--yellow); }
.q-flash {
  position: absolute;
  inset: 0;
  border: 2px solid var(--good);
  border-radius: var(--radius-14);
  background: radial-gradient(ellipse at 50% 80%, rgba(255, 176, 0, 0.3), rgba(255, 176, 0, 0.08) 70%);
  opacity: var(--flash);
  pointer-events: none;
}
.q-source {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 16px;
  padding: 12px;
  border: 1px solid rgba(240, 90, 166, 0.5);
  border-radius: var(--radius-8);
  background: rgba(240, 90, 166, 0.08);
}
.q-src-icon {
  flex: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid; place-items: center;
  border: 1.5px solid var(--warn);
  color: var(--film-ink);
}
.q-src-text { display: grid; gap: 3px; min-width: 0; }
.q-src-text b { font-size: 15px; font-weight: 600; }
.q-src-text small { font-size: 12px; font-weight: 300; color: var(--film-dim); }
.q-src-tags { margin-left: auto; display: grid; gap: 4px; justify-items: end; }
.q-src-tags .tag-ex { margin-left: 0; }
.q-arrow { display: flex; align-items: center; gap: 10px; margin: 14px 0 6px; font: 500 11px/1.64 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--film-dim); }
.q-arrow span { width: 1px; height: 18px; background: linear-gradient(var(--warn), transparent); margin-left: 19px; }
.q-text { font-size: 22px; line-height: 1.27; font-weight: 300; margin: 0 0 18px; }
.q-text mark { background: rgba(240, 90, 166, 0.2); color: var(--point); padding: 0 4px; border-radius: var(--radius-2); }
.q-text b { font-weight: 600; }
.q-progress { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.q-count { font: 600 70px/0.9 var(--font-sans); letter-spacing: -0.03em; }
.q-count b { display: inline-block; font-weight: 600; transform-origin: 50% 80%; transition: color 0.15s; }
.q-count b.is-lit { color: var(--good); text-shadow: 0 0 24px rgba(255, 176, 0, 0.55); }
.q-count small { font-size: 24px; font-weight: 300; color: var(--film-dim); margin-left: 6px; }
.q-toast { font: 600 13px/1.2 var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--good); opacity: 0; text-align: right; }
.q-bar {
  position: relative;
  height: 14px;
  margin-top: 14px;
  border-radius: var(--radius-2);
  overflow: hidden;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(2% - 1px), rgba(10, 16, 32, 0.9) calc(2% - 1px) 2%),
    var(--line);
}
.q-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--film-ink); }
.q-gain { position: absolute; top: 0; bottom: 0; background: var(--good); box-shadow: 0 0 18px rgba(255, 176, 0, 0.9); opacity: 0; }

/* the point to fix: magenta with navy text (6.06:1) */
.tag-weak {
  font: 500 10px/17px var(--font-sans);
  font-style: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--point);
  border-radius: var(--radius-2);
  padding: 0 4px;
}
.ro-head .tag-weak { margin-left: auto; display: none; }
.ro-head .tag-weak + .tag-ex { margin-left: 6px; }
.readout.is-weak { background: rgba(240, 90, 166, 0.12); border-radius: var(--radius-8); padding-left: 10px; padding-right: 10px; }
.readout.is-weak .tag-weak { display: inline-block; }
.readout.is-weak .ro-value { color: var(--point); }

/* the pre-aim zone label and the player's crosshair on it (positioned from the film) */
.zone-label {
  position: absolute;
  transform: translate(-50%, calc(-100% - 6px));
  font: 600 11px/1.3 var(--font-sans);
  letter-spacing: 0.12em;
  color: var(--point);
  background: rgba(10, 16, 32, 0.85);
  border: 1px solid var(--point);
  border-radius: var(--radius-4);
  padding: 5px 8px;
  white-space: nowrap;
  text-align: center;
  visibility: hidden;
}
.zone-label small {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--ink-2);
}
.reticle {
  position: absolute;
  width: 28px; height: 28px;
  transform: translate(-50%, -50%);
  color: #ffffff;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.8));
  visibility: hidden;
}
.reticle circle { fill: currentColor; stroke: none; }
.reticle.is-lit { color: var(--good); }

@media (max-width: 700px) {
  .quest { width: calc(100vw - 24px); padding: 16px; }
  .analysis { width: calc(100vw - 24px); }
  .q-text { font-size: 17px; margin-bottom: 12px; }
  .q-count { font-size: 46px; }
  .q-count small { font-size: 18px; }
}
@media (max-height: 620px) and (min-width: 701px) {
  .quest { padding: 16px 18px; }
  .q-source { margin-top: 10px; padding: 8px; }
  .q-text { font-size: 18px; margin-bottom: 10px; }
  .q-count { font-size: 50px; }
}

.prove {
  position: absolute;
  left: 0; right: 0;
  margin: 0 auto;
  top: 16vh;
  width: min(440px, calc(100% - 32px));
  padding: 20px;
  visibility: hidden;
  opacity: 0;
}
.p-head { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 600; }
.p-sub { font: 300 12px/1.5 var(--font-sans); color: var(--film-dim); margin-top: 4px; }
.p-chart { width: 100%; height: auto; max-height: 30vh; margin-top: 10px; overflow: visible; }
.p-grid { stroke: var(--line); stroke-width: 1; }
.p-line { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.p-dot { fill: var(--accent); opacity: 0; }
.p-delta { display: flex; gap: 12px; align-items: baseline; margin-top: 6px; opacity: 0; }
.p-delta b { font-size: 36px; font-weight: 600; letter-spacing: -0.02em; color: var(--yellow); }
.p-delta span { font-size: 13px; font-weight: 300; color: var(--film-dim); }

.finale {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: min(20px, 3vh);
  text-align: center;
  padding: 64px 16px 24px;
  visibility: hidden;
  opacity: 0;
}
.f-ring { position: relative; width: min(200px, 30vh); height: min(200px, 30vh); display: grid; place-items: center; flex: none; }
.f-circle { position: absolute; inset: 0; width: 100%; height: 100%; }
.f-circle circle { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; }
.f-badge {
  position: absolute; left: 50%; top: 50%;
  width: 44px; height: 44px; margin: -22px 0 0 -22px;
  border-radius: 50%;
  background: var(--bg);
  border: 1.5px solid var(--accent);
  display: grid; place-items: center;
  color: var(--film-ink);
  opacity: 0;
}
.f-word { font-size: min(32px, 4.6vh); font-weight: 600; letter-spacing: -0.03em; opacity: 0; }
.f-head { margin: 0; font-size: clamp(28px, min(6vw, 8vh), 70px); line-height: 1.04; letter-spacing: -0.03em; }
.f-head span { display: block; opacity: 0; font-weight: 300; }
.f-head span:first-child { font-weight: 600; }
.f-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 16px; align-items: center; opacity: 0; font: 400 13px/1 var(--font-sans); color: var(--film-dim); }

.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 70px;
  transform: translateX(-50%);
  font: 500 11px/1 var(--font-sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--film-dim);
  opacity: 0;
  transition: opacity var(--duration-400) ease;
}
.scroll-hint::after {
  content: '';
  display: block;
  width: 1px;
  height: 28px;
  margin: 10px auto 0;
  background: linear-gradient(var(--film-dim), transparent);
  animation: hint 1.6s ease-in-out infinite;
}
@keyframes hint { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .scroll-hint::after { animation: none; } }

@media (max-width: 700px) {
  .prove { top: 12vh; }
  .scroll-hint { bottom: 110px; }   /* clear of the large play control at the bottom right */
}

/* ── the page below the film ───────────────────────────────────────────── */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.hero-space { height: 100vh; position: relative; }
.wrap { max-width: 1120px; margin: 0 auto; }
.wrap-narrow { max-width: 760px; }
.section, .cta-band, .site-foot {
  position: relative;
  z-index: 6;                 /* above the fixed film */
  padding: 96px clamp(16px, 4vw, 60px);
  scroll-margin-top: 56px;
}
.section { background: var(--bg); border-top: 1px solid var(--line); }
.eyebrow { font: 500 14px/2 var(--font-sans); color: var(--ink-2); margin: 0 0 8px; }
.section h2 { font-size: clamp(30px, 4.2vw, 50px); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 50px; max-width: 760px; }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--duration-600) ease, transform var(--duration-600) ease; }
.reveal.is-in { opacity: 1; transform: none; }
.pt { color: var(--point); }

/* how it works — the last step is the proof, so it is the yellow one */
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.step { background: var(--surface); border-radius: var(--radius-14); padding: 30px 25px 36px; }
.step-no {
  display: inline-block;
  font: 500 14px/18px var(--font-sans);
  color: var(--ink-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-4);
  padding: 2px 8px 1px;
}
.step h3 { font-size: 24px; font-weight: 600; line-height: 1.17; margin: 30px 0 8px; letter-spacing: -0.01em; }
.step p { color: var(--ink-2); font-size: 16px; font-weight: 300; line-height: 1.75; margin: 0; }
.step.is-proof { background: var(--yellow); color: var(--bg); }
.step.is-proof .step-no { background: var(--bg); color: var(--yellow); border-color: var(--bg); font-weight: 600; }
.step.is-proof p { color: var(--bg); font-weight: 400; }

/* analyzers — the weakest one is outlined in magenta: the point to fix */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.an-card { background: var(--surface); border-radius: var(--radius-14); padding: 30px 25px 36px; }
.an-card.is-point { box-shadow: inset 0 0 0 1px var(--point); }
.an-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.an-top .tags { display: flex; gap: 4px; }
.an-top .tag-ex { margin-left: 0; }
.an-icon {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--line);
  color: var(--ink);
}
.an-card h3 { font-size: 22px; font-weight: 600; line-height: 1.27; margin: 30px 0 8px; }
.an-card p { color: var(--ink-2); font-size: 16px; font-weight: 300; line-height: 1.75; margin: 0; }

/* the proof beside the promises */
.proof-row { margin-top: 50px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.proof { background: var(--surface); border-radius: var(--radius-14); padding: 30px; }
.proof-head { display: flex; align-items: center; gap: 10px; }
.proof-head b { font-size: 18px; font-weight: 600; }
.proof-head .tag-ex { margin-left: 0; }
.proof-sub { margin: 4px 0 0; font-size: 12px; font-weight: 300; color: var(--ink-2); }
.proof-chart { display: block; width: 100%; height: 200px; margin-top: 16px; }
.pc-grid { stroke: var(--line); stroke-width: 1; fill: none; }
.pc-line { stroke: var(--yellow); stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.pc-dot { fill: var(--yellow); }
.proof-delta { display: flex; align-items: baseline; gap: 12px; margin-top: 8px; }
.proof-delta b { font-size: 36px; font-weight: 600; color: var(--yellow); }
.proof-delta span { font-size: 13px; font-weight: 300; color: var(--ink-2); }
.trust { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; align-content: start; }
.trust li { display: grid; gap: 4px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.trust b { font-size: 18px; font-weight: 600; line-height: 1.4; }
.trust span { color: var(--ink-2); font-size: 16px; font-weight: 300; line-height: 1.75; }

/* faq */
.section details { border-bottom: 1px solid var(--line); padding: 20px 0; }
.section details:first-of-type { border-top: 1px solid var(--line); }
.section summary { cursor: pointer; font-size: 20px; font-weight: 400; line-height: 1.4; }
.section summary::marker { color: var(--ink-2); }
.section details p { color: var(--ink-2); font-size: 16px; font-weight: 300; line-height: 1.75; margin: 10px 0 0; }
.section details a, .legal-page a { color: var(--ink); text-underline-offset: 3px; }

/* closing call to action — a yellow field, navy type, a navy button */
.cta-band { background: var(--yellow); color: var(--bg); text-align: center; padding-top: 100px; padding-bottom: 100px; }
.cta-line { font-size: clamp(30px, 4.2vw, 50px); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 30px; }
.cta-line span { font-weight: 300; }
.cta-band .btn { background: var(--bg); color: var(--ink); }
.cta-band .btn:hover { background: var(--surface); }
/* the two big calls to action (the film's finale and the closing band): twice the standard button */
.btn-lg { height: 84px; padding: 0 40px; font-size: 28px; border-radius: var(--radius-14); }
.cta-note { margin: 16px 0 0; font-size: 14px; font-weight: 400; color: var(--bg); }

/* footer */
.site-foot { background: var(--surface); color: var(--ink); padding-top: 80px; padding-bottom: 50px; }
.foot-cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 30px; }
.foot-brand .origin { color: var(--ink-2); font-size: 16px; font-weight: 300; line-height: 1.75; max-width: 320px; margin: 16px 0 0; }
.foot-col { display: grid; align-content: start; gap: 8px; }
.foot-col h3 { font: 500 14px/2 var(--font-sans); color: var(--ink-2); margin: 0 0 4px; }
.foot-col a { color: var(--ink); text-decoration: none; font: 400 14px/2 var(--font-sans); transition: color var(--duration-300) ease; }
.foot-col a:hover, .foot-col a[aria-current] { color: var(--yellow); }
.legal { font-size: 13px; font-weight: 300; line-height: 1.75; color: var(--ink-2); margin: 50px 0 0; padding-top: 30px; border-top: 1px solid var(--line); max-width: none; }
.copy { font: 400 13px/2 var(--font-sans); color: var(--ink-2); margin-top: 8px; }

@media (max-width: 900px) {
  .steps, .cards { grid-template-columns: repeat(2, 1fr); }
  .proof-row { grid-template-columns: 1fr; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .section { padding-top: 80px; padding-bottom: 80px; }
  .steps, .cards { grid-template-columns: 1fr; }
}

/* legal pages */
.legal-page { padding: 120px clamp(16px, 4vw, 60px) 96px; position: relative; z-index: 6; background: var(--bg); }
.legal-page .wrap { max-width: 760px; }
.legal-page h1 { font-size: clamp(32px, 4.2vw, 50px); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 8px; }
.legal-page .updated { font: 400 14px/2 var(--font-sans); color: var(--ink-2); margin: 0 0 8px; }
/* not in effect yet: the point colour, navy text */
.legal-page .draft { display: inline-block; font: 500 14px/18px var(--font-sans); color: var(--bg); background: var(--point); border-radius: var(--radius-2); padding: 0 4px; margin: 0 0 36px; }
.legal-page h2 { font-size: 24px; font-weight: 600; line-height: 1.17; letter-spacing: -0.01em; margin: 50px 0 14px; }
.legal-page p, .legal-page li { color: var(--ink); font-size: 16px; font-weight: 300; line-height: 1.75; }
.legal-page b { font-weight: 600; }
.legal-page ul { padding-left: 20px; }
.legal-page table { width: 100%; border-collapse: collapse; margin: 16px 0; background: var(--surface); border-radius: var(--radius-14); overflow: hidden; }
.legal-page th, .legal-page td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 14px; font-weight: 300; line-height: 1.6; color: var(--ink); }
.legal-page tr:last-child td { border-bottom: 0; }
.legal-page th { font: 500 14px/1.4 var(--font-sans); color: var(--ink-2); }

@media (max-height: 620px) {
  .prove { top: 72px; padding: 14px 16px; }
}