/* ─────────────────────────────────────────────────────────────
   For the Players — card-led layout
   Warm off-white ground, white cards on generous radii, one coral
   accent for action, soft tints to carry the pull-quote callouts.
   ───────────────────────────────────────────────────────────── */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/fonts/PlusJakartaSans-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --navy: #10202f;
  --ink: #10202f;
  --ink-soft: #55677a;
  --ink-faint: #5f6d7d;

  --cream: #f6f3ef;
  --cream-deep: #ede8e2;
  --white: #ffffff;

  --coral: #ff4f40;
  --coral-dark: #e63a2c;
  /* --coral-dark only clears AA on button-sized text. Small coral text on a
     light tint uses this darker shade instead. */
  --coral-ink: #b32619;
  --coral-soft: #ffe6e3;

  --mint: #d3efe1;
  --butter: #ffeec4;
  --sky: #d8e9fb;
  --lilac: #e5e0f8;

  --line: #e4ddd5;
  --line-strong: #d4cbc1;

  --display: "Plus Jakarta Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --r-xl: 32px;
  --r-lg: 24px;
  --r-md: 16px;
  --r-sm: 10px;
  --pill: 999px;

  --shadow: 0 1px 2px rgba(16, 32, 47, 0.04), 0 8px 24px rgba(16, 32, 47, 0.06);
  --shadow-lift: 0 2px 6px rgba(16, 32, 47, 0.06), 0 18px 40px rgba(16, 32, 47, 0.1);

  --shell: 1120px;
  --gutter: clamp(18px, 4vw, 40px);
  --spring: cubic-bezier(0.22, 1, 0.36, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 104px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--cream);
  font-family: var(--body);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  color: var(--white);
  background: var(--coral);
}

a {
  color: inherit;
}

button,
input,
textarea {
  font: inherit;
  color: inherit;
}

button,
a,
label {
  -webkit-tap-highlight-color: transparent;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

p {
  margin: 0;
}

ol,
ul {
  margin: 0;
  padding: 0;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: 3px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  margin: -1px;
  padding: 0;
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 14px;
  left: 14px;
  padding: 13px 20px;
  color: var(--white);
  background: var(--navy);
  border-radius: var(--pill);
  font-family: var(--display);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-220%);
  transition: transform 200ms var(--spring);
}

.skip-link:focus {
  transform: translateY(0);
}

/* ── Shared pieces ───────────────────────────────────────────── */

.pill {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 18px;
  padding: 8px 15px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--pill);
  font-family: var(--display);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.pill-coral {
  color: var(--coral-ink);
  background: var(--coral-soft);
  border-color: transparent;
}

.pill-mint {
  background: var(--mint);
  border-color: transparent;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 28px;
  border: 0;
  border-radius: var(--pill);
  font-family: var(--display);
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background 180ms var(--spring), transform 180ms var(--spring), box-shadow 180ms var(--spring);
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-primary {
  color: var(--white);
  background: var(--coral);
  box-shadow: 0 6px 18px rgba(255, 79, 64, 0.28);
}

.btn-primary:hover {
  background: var(--coral-dark);
  box-shadow: 0 10px 26px rgba(255, 79, 64, 0.34);
}

.btn-quiet {
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
}

.btn-quiet:hover {
  background: var(--cream-deep);
}

.btn-dark {
  color: var(--white);
  background: var(--navy);
}

.btn-light {
  color: var(--navy);
  background: var(--white);
}

.card {
  padding: clamp(24px, 3vw, 40px);
  background: var(--white);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}

.wordmark-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 9px;
  flex: none;
  background: var(--coral);
  border-radius: 50%;
}

/* ── Header ──────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  z-index: 40;
  top: 0;
  padding: 12px var(--gutter);
  background: rgba(246, 243, 239, 0.86);
  backdrop-filter: saturate(160%) blur(12px);
}

.header-bar {
  display: flex;
  max-width: var(--shell);
  height: 62px;
  margin: 0 auto;
  padding: 0 10px 0 20px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: var(--white);
  border-radius: var(--pill);
  box-shadow: var(--shadow);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  font-family: var(--display);
  font-size: 16.5px;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-decoration: none;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.2vw, 30px);
}

.site-nav a {
  padding: 9px 4px;
  color: var(--ink-soft);
  font-family: var(--display);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: color 160ms var(--spring);
}

.site-nav a:hover {
  color: var(--ink);
}

.header-sign {
  display: inline-flex;
  align-items: center;
  flex: none;
  padding: 12px 22px;
  color: var(--white);
  background: var(--coral);
  border-radius: var(--pill);
  font-family: var(--display);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background 160ms var(--spring);
}

.header-sign:hover {
  background: var(--coral-dark);
}

/* ── Hero ────────────────────────────────────────────────────── */

.read-progress {
  position: fixed;
  z-index: 50;
  top: 0;
  left: 0;
  width: 0;
  height: 4px;
  background: var(--coral);
  border-radius: 0 var(--pill) var(--pill) 0;
}

.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(56px, 9vw, 116px) 0 clamp(34px, 4.5vw, 52px);
  text-align: center;
}

/* Soft colour wash behind the headline — gives the top of the page
   some depth without competing with the type. */
.hero-blob {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.55;
  pointer-events: none;
}

.hero-blob-a {
  top: -140px;
  left: -80px;
  width: 460px;
  height: 460px;
  background: var(--mint);
}

.hero-blob-b {
  top: -60px;
  right: -110px;
  width: 420px;
  height: 420px;
  background: var(--coral-soft);
}

.hero > .shell {
  position: relative;
  z-index: 1;
}

.hero .pill {
  margin-inline: auto;
}

/* Leading is set by descender clearance, not taste: at this cap height the
   "p" and "y" of "play" hang 0.22em below the baseline, so anything under
   ~0.98 puts their tails into the cap line of "off the ice." below. 1.04
   leaves ~0.075em of air — still far tighter than default display leading.
   The bottom margin is trimmed to absorb the extra half-leading. */
.display-line {
  max-width: 13em;
  margin: 0 auto 10px;
  font-family: var(--display);
  font-size: clamp(46px, 8.6vw, 118px);
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: 1.04;
}

/* No overflow clip here: the tight 0.92 line-height makes the line box
   shorter than the font's descent, so hiding overflow cut the tail off the
   "y" in "play". The word wrappers exist only to pair with the aria-label,
   not to mask a per-word reveal — the hero animates as one block. */
.display-line span {
  display: inline-block;
  vertical-align: bottom;
}

.display-line i {
  display: inline-block;
  font-style: normal;
}

/* "ice." carries the accent in colour rather than a filled box — a
   rectangle behind display type never sits right against the
   letterforms at this size. */
.word-accent {
  color: var(--coral);
}

.hero h1 {
  max-width: 17em;
  margin: 0 auto;
  font-size: clamp(20px, 2.1vw, 27px);
  font-weight: 700;
  color: var(--ink-soft);
  letter-spacing: -0.025em;
  line-height: 1.28;
}

.standfirst {
  max-width: 34em;
  margin: 22px auto 0;
  color: var(--ink-soft);
  font-size: clamp(16px, 1.25vw, 18.5px);
  line-height: 1.6;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}

.stat-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  max-width: 660px;
  margin: clamp(38px, 5vw, 56px) auto 0;
  text-align: left;
}

.stat-card {
  padding: 26px 28px;
  background: var(--white);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}

.stat-card-tint {
  background: var(--mint);
  box-shadow: none;
}

.stat-figure strong {
  font-family: var(--display);
  font-size: clamp(30px, 3.4vw, 42px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}

.stat-card-tint .stat-figure strong {
  font-size: clamp(18px, 1.7vw, 22px);
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.stat-label {
  margin-top: 8px;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 500;
}

.stat-link {
  display: inline-block;
  margin-top: 10px;
  color: var(--coral-ink);
  font-family: var(--display);
  font-size: 13.5px;
  font-weight: 700;
  text-underline-offset: 3px;
}

/* ── Sign ────────────────────────────────────────────────────── */

.sign-section {
  padding: clamp(24px, 3vw, 40px) 0;
}

.card-sign {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(26px, 3.4vw, 46px);
  border-radius: var(--r-xl);
}

.sign-head h2 {
  font-size: clamp(24px, 2.6vw, 34px);
}

.sign-head > p {
  margin-top: 12px;
  color: var(--ink-soft);
  font-size: 15.5px;
  line-height: 1.55;
}

.card-sign form {
  margin-top: 26px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

.rating-fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.rating-fieldset legend {
  padding: 0;
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.35;
}

.rating-fieldset legend span {
  display: block;
  margin-top: 5px;
  color: var(--coral-ink);
  font-size: 12.5px;
  font-weight: 700;
}

.rating-options {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 16px;
}

.rating-options label {
  position: relative;
  display: flex;
  min-height: 92px;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 14px 8px 12px;
  text-align: center;
  background: var(--cream);
  border: 2px solid transparent;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background 160ms var(--spring), border-color 160ms var(--spring), transform 160ms var(--spring);
}

.rating-options label:hover {
  background: var(--cream-deep);
  transform: translateY(-2px);
}

.rating-options input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.rating-number {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}

.rating-word {
  color: var(--ink-soft);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.25;
}

.rating-options label:has(input:checked) {
  color: var(--white);
  background: var(--coral);
  border-color: var(--coral);
}

.rating-options label:has(input:checked) .rating-word {
  color: rgba(255, 255, 255, 0.86);
}

.rating-key {
  display: none;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  color: var(--ink-faint);
  font-size: 11.5px;
  line-height: 1.3;
}

.comment-field {
  margin-top: 24px;
}

.field-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.field-label-row label {
  font-family: var(--display);
  font-size: 14.5px;
  font-weight: 700;
}

.field-label-row label span {
  color: var(--ink-faint);
  font-weight: 500;
}

.character-count {
  color: var(--ink-faint);
  font-size: 12.5px;
}

.comment-field textarea {
  width: 100%;
  padding: 15px 16px;
  color: var(--ink);
  background: var(--cream);
  border: 2px solid transparent;
  border-radius: var(--r-md);
  font-family: var(--body);
  font-size: 15.5px;
  line-height: 1.55;
  resize: vertical;
  transition: border-color 160ms var(--spring), background 160ms var(--spring);
}

.comment-field textarea:focus {
  background: var(--white);
  border-color: var(--coral);
  outline: none;
}

.comment-rules {
  margin-top: 16px;
  padding: 16px 18px;
  background: var(--cream);
  border-radius: var(--r-md);
}

.rules-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 11px;
  padding: 0;
  text-align: left;
  background: none;
  border: 0;
  font-family: var(--display);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}

.rules-mark {
  display: inline-flex;
  width: 21px;
  height: 21px;
  flex: none;
  align-items: center;
  justify-content: center;
  color: var(--white);
  background: var(--coral);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 800;
}

.comment-rules ul {
  margin: 12px 0 0;
  padding-left: 18px;
}

.comment-rules li {
  margin-bottom: 5px;
  color: var(--ink-soft);
  font-size: 13.5px;
  line-height: 1.5;
}

.comment-rules > div > p {
  margin-top: 10px;
  color: var(--ink-faint);
  font-size: 12.5px;
  font-style: italic;
}

.agreement {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin-top: 20px;
  font-size: 14.5px;
  line-height: 1.5;
  cursor: pointer;
}

.agreement input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.agreement .checkbox {
  position: relative;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  background: var(--cream);
  border: 2px solid var(--line-strong);
  border-radius: 8px;
  transition: background 160ms var(--spring), border-color 160ms var(--spring);
}

.agreement .checkbox::after {
  position: absolute;
  top: 3px;
  left: 7px;
  width: 6px;
  height: 12px;
  content: "";
  border: solid var(--white);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 180ms var(--spring);
}

.agreement input:checked + .checkbox {
  background: var(--coral);
  border-color: var(--coral);
}

.agreement input:checked + .checkbox::after {
  transform: rotate(45deg) scale(1);
}

.agreement input:focus-visible + .checkbox {
  outline: 3px solid var(--coral);
  outline-offset: 3px;
}

.form-message {
  margin-top: 18px;
  padding: 14px 16px;
  color: var(--coral-ink);
  background: var(--coral-soft);
  border-radius: var(--r-md);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.45;
}

.submit-button {
  width: 100%;
  margin-top: 24px;
  padding: 18px 24px;
  font-size: 16px;
}

.submit-button:disabled {
  color: var(--ink-faint);
  background: var(--cream-deep);
  box-shadow: none;
  cursor: progress;
  transform: none;
}

.form-footnote {
  margin-top: 14px;
  color: var(--ink-faint);
  font-size: 12.5px;
  line-height: 1.55;
  text-align: center;
}

/* The success panel is the whole card once the form and its heading go, so it
   carries its own vertical rhythm rather than inheriting the form's. */
.success-panel {
  padding: 14px 0 6px;
  text-align: center;
}

.success-panel:focus {
  outline: none;
}

.success-panel .pill {
  margin-inline: auto;
}

.success-panel h2 {
  font-size: clamp(23px, 2.4vw, 32px);
}

.success-panel > p[data-success-copy] {
  max-width: 32em;
  margin: 14px auto 0;
  color: var(--ink-soft);
  font-size: 15.5px;
  line-height: 1.55;
}

.share-status {
  margin-top: 10px;
  color: var(--ink-faint);
  font-size: 12.5px;
}

/* ── Contents ────────────────────────────────────────────────── */

.contents-section {
  padding: clamp(24px, 3vw, 40px) 0;
}

.card-contents {
  max-width: 900px;
  margin: 0 auto;
}

.card-contents h2 {
  font-size: clamp(19px, 1.9vw, 24px);
}

.card-contents ol {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 20px;
  margin-top: 18px;
  list-style: none;
}

.card-contents a {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  padding: 11px 12px;
  border-radius: var(--r-sm);
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
  transition: background 160ms var(--spring);
}

.card-contents a span {
  color: var(--coral-ink);
  font-family: var(--display);
  font-weight: 700;
}

.card-contents a:hover {
  background: var(--cream);
}

/* ── The letter ──────────────────────────────────────────────── */

.letter-section-wrap,
.request-section {
  padding: clamp(20px, 3vw, 36px) 0;
}

.letter-panel {
  max-width: 720px;
  margin: 0 auto;
}

.letter-panel p {
  font-size: clamp(16.5px, 1.2vw, 18px);
  line-height: 1.72;
}

.letter-panel > p + p,
.letter-section p + p {
  margin-top: 20px;
}

.salutation {
  font-family: var(--display);
  font-weight: 700;
}

.opening {
  margin-top: 20px;
  font-size: clamp(19px, 1.6vw, 23px) !important;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.5 !important;
}

.letter-section {
  margin-top: clamp(40px, 5vw, 60px);
  scroll-margin-top: 110px;
}

.section-heading {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.section-heading span {
  display: inline-flex;
  width: 40px;
  height: 40px;
  flex: none;
  align-items: center;
  justify-content: center;
  color: var(--coral-ink);
  background: var(--coral-soft);
  border-radius: 50%;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 800;
}

.section-heading h2 {
  font-size: clamp(23px, 2.4vw, 33px);
  letter-spacing: -0.04em;
  line-height: 1.1;
}

.emphasis-line {
  margin-top: 20px;
  padding: 18px 22px;
  background: var(--coral-soft);
  border-radius: var(--r-md);
  font-family: var(--display);
  font-weight: 700;
}

/* Highlighter on the sharpest line in each section. The band is a
   background-size sweep so it can animate in as the line is read. */
.letter-panel mark {
  padding: 0.1em 0.12em;
  color: inherit;
  background: linear-gradient(var(--butter), var(--butter)) 0 88% / 0% 62% no-repeat;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  font-weight: 500;
}

html.reveal-enabled .letter-panel mark {
  transition: background-size 720ms var(--spring) 160ms;
}

html.reveal-enabled .letter-panel p.is-visible mark,
html:not(.reveal-enabled) .letter-panel mark {
  background-size: 100% 62%;
}

/* ── Callout cards ───────────────────────────────────────────── */

.callout {
  position: relative;
  max-width: 720px;
  margin: clamp(34px, 4.5vw, 52px) auto;
  padding: clamp(28px, 3.4vw, 44px) clamp(26px, 3vw, 44px) clamp(28px, 3.4vw, 40px);
  border-radius: var(--r-xl);
  overflow: hidden;
}

.callout-mark {
  position: absolute;
  top: -14px;
  right: 18px;
  font-family: var(--display);
  font-size: 150px;
  font-weight: 800;
  line-height: 1;
  opacity: 0.16;
  pointer-events: none;
  user-select: none;
}

.callout blockquote {
  position: relative;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(21px, 2.3vw, 31px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.24;
}

.callout-mint { background: var(--mint); }
.callout-butter { background: var(--butter); }
.callout-sky { background: var(--sky); }
.callout-lilac { background: var(--lilac); }

/* ── Full-bleed statement ────────────────────────────────────── */

.mega-quote {
  position: relative;
  margin: clamp(48px, 7vw, 96px) calc(50% - 50vw);
  width: 100vw;
  padding: clamp(56px, 9vw, 120px) 0;
  color: var(--white);
  background: var(--coral);
  overflow: hidden;
  text-align: center;
}

.mega-mark {
  position: absolute;
  top: -0.16em;
  left: 50%;
  font-family: var(--display);
  font-size: clamp(260px, 34vw, 460px);
  font-weight: 800;
  line-height: 1;
  opacity: 0.14;
  transform: translateX(-50%);
  pointer-events: none;
  user-select: none;
}

.mega-quote blockquote {
  position: relative;
  max-width: 15em;
  margin: 0 auto;
  font-family: var(--display);
  font-size: clamp(38px, 6.6vw, 86px);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
}

.mega-quote > .shell > p {
  position: relative;
  margin-top: 26px;
  color: #ffffff;
  font-size: clamp(19px, 1.4vw, 21px);
  font-weight: 700;
}

/* ── Colour bands ────────────────────────────────────────────── */

.band-navy {
  color: var(--white);
  background: var(--navy);
}

.band-navy h2 {
  color: var(--white);
}

.band-navy .asks-head > p {
  color: rgba(255, 255, 255, 0.74);
}

.band-navy h2 em {
  color: var(--coral);
  font-style: normal;
}

.pill-onnavy {
  color: var(--white);
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.22);
}

/* ── The ten asks ────────────────────────────────────────────── */

.asks-section {
  padding: clamp(56px, 8vw, 112px) 0;
  scroll-margin-top: 104px;
}

.asks-head {
  max-width: 760px;
  margin-bottom: clamp(30px, 3.4vw, 48px);
}

.asks-head h2 {
  font-size: clamp(34px, 4.6vw, 64px);
  letter-spacing: -0.045em;
  line-height: 1;
}

.asks-head > p {
  margin-top: 14px;
  color: var(--ink-soft);
  font-size: clamp(15.5px, 1.2vw, 18px);
  line-height: 1.6;
}

.ask-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  list-style: none;
}

/* Ten cards leave a single orphan on the final row of a three-column grid.
   The closing ask spans the full width so that row reads as deliberate. */
.ask-card-wide {
  grid-column: 1 / -1;
}

/* Colour is reset explicitly: these cards sit inside .band-navy, which
   sets white text that would otherwise make the card titles invisible. */
.ask-card {
  padding: 26px 24px 28px;
  color: var(--ink);
  background: var(--white);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  transition: transform 220ms var(--spring), box-shadow 220ms var(--spring);
}

.ask-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}

.ask-card > span {
  display: inline-flex;
  width: 34px;
  height: 34px;
  margin-bottom: 14px;
  align-items: center;
  justify-content: center;
  color: var(--coral-ink);
  background: var(--coral-soft);
  border-radius: 50%;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 800;
}

.ask-card strong {
  display: block;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.25;
}

.ask-card p {
  margin-top: 8px;
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 1.55;
}

.signoff {
  margin-top: clamp(38px, 5vw, 56px);
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.signoff p {
  font-family: var(--display);
  font-size: 17px !important;
  font-weight: 700;
  line-height: 1.5 !important;
}

.signoff p:last-child {
  margin-top: 10px;
  color: var(--ink-soft);
  font-weight: 500;
}

/* ── Community feedback ──────────────────────────────────────── */

.feedback-section {
  padding: clamp(44px, 6vw, 84px) 0 clamp(50px, 7vw, 96px);
  scroll-margin-top: 104px;
}

.feedback-header {
  max-width: 640px;
}

.feedback-header h2 {
  font-size: clamp(28px, 3.4vw, 46px);
}

.feedback-header > p {
  margin-top: 14px;
  color: var(--ink-soft);
  font-size: clamp(15.5px, 1.2vw, 18px);
  line-height: 1.6;
}

.card-privacy {
  margin-top: 26px;
  padding: 20px 24px;
  background: var(--sky);
  border-radius: var(--r-lg);
  box-shadow: none;
}

.card-privacy p {
  font-size: 14.5px;
  line-height: 1.55;
}

.feedback-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 16px;
  margin-top: 16px;
  align-items: start;
}

.rating-summary h3,
.moderated-feedback h3 {
  font-size: 18px;
}

.average-rating {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 16px;
}

.average-rating strong {
  font-family: var(--display);
  font-size: clamp(42px, 4.6vw, 58px);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 0.9;
}

.average-rating span {
  color: var(--ink-faint);
  font-family: var(--display);
  font-size: 18px;
  font-weight: 700;
}

.average-rating.is-withheld strong {
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: -0.03em;
}

.average-rating.is-withheld span {
  display: none;
}

.rating-state {
  margin-top: 12px;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
}

.rating-note {
  margin-top: 6px;
  color: var(--ink-soft);
  font-size: 13.5px;
  line-height: 1.5;
}

.rating-breakdown {
  margin-top: 24px;
  list-style: none;
}

.rating-breakdown li {
  margin-bottom: 14px;
}

.rating-breakdown li > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
  font-weight: 500;
}

.rating-breakdown li > div > span:first-child b {
  display: inline-flex;
  min-width: 22px;
  margin-right: 7px;
  padding: 2px 5px;
  justify-content: center;
  background: var(--cream);
  border-radius: 6px;
  font-family: var(--display);
  font-size: 11.5px;
  font-weight: 800;
}

.rating-breakdown li > div > span:last-child {
  color: var(--ink-faint);
  font-size: 12.5px;
  white-space: nowrap;
}

.rating-bar {
  display: block;
  height: 8px;
  margin-top: 8px;
  overflow: hidden;
  background: var(--cream-deep);
  border-radius: var(--pill);
}

.rating-bar i {
  display: block;
  width: 0;
  height: 100%;
  background: var(--coral);
  border-radius: var(--pill);
  transition: width 900ms var(--spring);
}

.rating-breakdown li:nth-child(2) .rating-bar i { transition-delay: 90ms; }
.rating-breakdown li:nth-child(3) .rating-bar i { transition-delay: 180ms; }
.rating-breakdown li:nth-child(4) .rating-bar i { transition-delay: 270ms; }
.rating-breakdown li:nth-child(5) .rating-bar i { transition-delay: 360ms; }

.feedback-subheading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 20px;
}

.feedback-subheading p {
  margin-top: 6px;
  color: var(--ink-soft);
  font-size: 13.5px;
}

.feedback-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

.comment-total {
  color: var(--ink-faint);
  font-size: 12.5px;
  font-weight: 500;
}

.comment-total b {
  color: var(--ink);
  font-family: var(--display);
  font-weight: 800;
}

.feedback-refresh {
  padding: 10px 16px;
  background: var(--cream);
  border: 0;
  border-radius: var(--pill);
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 160ms var(--spring);
}

.feedback-refresh:hover:not(:disabled) {
  background: var(--cream-deep);
}

.feedback-refresh:disabled {
  color: var(--ink-faint);
  cursor: progress;
}

.feedback-list {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}

.feedback-list:not(.is-expanded) .feedback-card:nth-child(n + 4) {
  display: none;
}

.feedback-card {
  padding: 20px 22px;
  background: var(--cream);
  border-radius: var(--r-md);
}

.feedback-card-label {
  color: var(--ink-faint);
  font-size: 11.5px;
  font-weight: 600;
}

.feedback-card blockquote {
  margin: 9px 0 0;
  font-size: 15.5px;
  line-height: 1.6;
}

.feedback-card-review {
  margin-top: 12px;
  color: var(--ink-faint);
  font-size: 11.5px;
}

.feedback-more {
  width: 100%;
  margin-top: 14px;
  padding: 14px 18px;
  background: var(--cream);
  border: 0;
  border-radius: var(--pill);
  font-family: var(--display);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 160ms var(--spring);
}

.feedback-more:hover {
  background: var(--cream-deep);
}

.feedback-empty {
  margin-top: 20px;
  padding: 30px 24px;
  background: var(--cream);
  border-radius: var(--r-md);
}

.feedback-empty p {
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 1.55;
}

.feedback-empty strong {
  display: block;
  margin-bottom: 4px;
  color: var(--ink);
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
}

.feedback-footer {
  margin-top: 26px;
}

.feedback-footer > p {
  color: var(--ink-faint);
  font-size: 12.5px;
  line-height: 1.6;
}

.card-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 22px;
  padding: 26px 30px;
  background: var(--navy);
  border-radius: var(--r-xl);
  box-shadow: none;
}

.card-cta strong {
  display: block;
  color: var(--white);
  font-family: var(--display);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.card-cta span {
  display: block;
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14.5px;
}

/* ── Footer ──────────────────────────────────────────────────── */

.site-footer {
  padding: clamp(44px, 5vw, 68px) 0 clamp(30px, 4vw, 44px);
  color: rgba(255, 255, 255, 0.74);
  background: var(--navy);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  scroll-margin-top: 104px;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 46px);
}

.site-footer strong {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  color: var(--white);
  font-family: var(--display);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.025em;
}

.site-footer p {
  font-size: 14px;
  line-height: 1.6;
}

.footer-share {
  margin-top: clamp(30px, 4vw, 44px);
}

/* ── Share toast ─────────────────────────────────────────────── */

.share-toast {
  position: fixed;
  z-index: 60;
  bottom: 26px;
  left: 50%;
  padding: 14px 24px;
  color: var(--white);
  background: var(--navy);
  border-radius: var(--pill);
  font-family: var(--display);
  font-size: 14px;
  font-weight: 600;
  opacity: 0;
  transform: translate(-50%, 16px);
  pointer-events: none;
  transition: opacity 220ms var(--spring), transform 220ms var(--spring);
}

.share-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ── Motion ──────────────────────────────────────────────────── */

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(26px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

html.reveal-enabled .hero > .shell > * {
  animation: rise-in 780ms var(--spring) both;
}

html.reveal-enabled .hero .display-line { animation-delay: 70ms; }
html.reveal-enabled .hero h1 { animation-delay: 150ms; }
html.reveal-enabled .hero .standfirst { animation-delay: 230ms; }
html.reveal-enabled .hero-actions { animation-delay: 310ms; }
html.reveal-enabled .stat-cards { animation-delay: 390ms; }

html.reveal-enabled .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 640ms ease, transform 760ms var(--spring);
  transition-delay: var(--reveal-delay, 0ms);
}

html.reveal-enabled .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Callout cards arrive with a little more travel and a slight scale,
   so they read as objects rather than paragraphs. */
html.reveal-enabled .callout.reveal {
  transform: translateY(34px) scale(0.97);
  transition: opacity 640ms ease, transform 820ms var(--spring);
}

html.reveal-enabled .callout.reveal.is-visible {
  transform: translateY(0) scale(1);
}

html.reveal-enabled .ask-card.reveal {
  transform: translateY(28px) scale(0.98);
}

html.reveal-enabled .ask-card.reveal.is-visible {
  transform: translateY(0) scale(1);
}

html.reveal-enabled .rating-summary.reveal:not(.is-visible) .rating-bar i {
  width: 0 !important;
}

html.reveal-enabled .moderated-feedback.is-visible .feedback-card {
  animation: rise-in 600ms var(--spring) both;
  animation-delay: var(--card-delay, 0ms);
}

/* ── Responsive ──────────────────────────────────────────────── */

@media (max-width: 940px) {
  .site-nav {
    display: none;
  }

  .ask-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .feedback-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 680px) {
  html {
    scroll-padding-top: 92px;
  }

  .header-bar {
    height: 56px;
    padding-left: 16px;
  }

  .stat-cards,
  .card-contents ol,
  .ask-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-actions .btn {
    width: 100%;
  }

  .rating-options {
    gap: 6px;
  }

  .rating-options label {
    min-height: 62px;
    justify-content: center;
    padding: 12px 4px;
  }

  .rating-word {
    display: none;
  }

  .rating-key {
    display: flex;
  }

  .callout-mark {
    font-size: 108px;
  }

  .card-cta {
    flex-direction: column;
    align-items: flex-start;
  }

  .card-cta .btn {
    width: 100%;
  }

  .feedback-subheading {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}