/* Saber Scale landing page
   Brand tokens: brand/tokens.json · Build spec: ../copy.pdf */

:root {
  --ink: #121110;
  --bone: #f3eee6;
  --amber: #c98a2e;
  --stone: #6b655c;
  --raised: #ffffff;
  --raised-dark: #1f1e1b;
  --bone-70: rgba(243, 238, 230, 0.7);
  --bone-80: rgba(243, 238, 230, 0.82);
  --line: rgba(18, 17, 16, 0.14);
  --line-stone: rgba(107, 101, 92, 0.28);
  --line-dark: rgba(243, 238, 230, 0.14);

  --font-display: "SS Serif", Georgia, Gelasio, serif;
  --font-body: "SS Serif", Georgia, Gelasio, serif;
  --font-ui: Lato, "Helvetica Neue", Arial, sans-serif; /* labels, buttons, chips only */

  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 40px;
  --s5: 64px;

  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 14px;

  --wrap: 1160px;
  --measure: 600px;
  --nav-h: 56px;
}

@media (min-width: 768px) {
  :root {
    /* tablet and desktop: holds the descriptor logo at its 480px brand minimum */
    --nav-h: 76px;
  }
}

/* Display font: Georgia where installed (Mac, iOS, Windows). Gelasio, its metric-compatible
   open-source twin, downloads only where Georgia is missing (most Android phones). */
@font-face {
  font-family: "SS Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Georgia"), url(https://fonts.gstatic.com/s/gelasio/v14/cIfiMaFfvUQxTTqS3iKJkLGbI41wQL8Ilxcr8zHs9RbblYs.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;
}

@font-face {
  font-family: "SS Serif";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local("Georgia Bold"), local("Georgia-Bold"), url(https://fonts.gstatic.com/s/gelasio/v14/cIfiMaFfvUQxTTqS3iKJkLGbI41wQL_vkBcr8zHs9RbblYs.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;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  interpolate-size: allow-keywords;
}

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

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 27px;
  letter-spacing: -0.005em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

[hidden] {
  display: none !important;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.025em;
  margin: 0;
}

p,
ul,
ol,
figure,
blockquote {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
}

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

.on-ink :focus-visible {
  outline-color: var(--amber);
}

.skip-link {
  position: absolute;
  left: var(--s2);
  top: -100px;
  z-index: 100;
  padding: var(--s1) var(--s2);
  background: var(--amber);
  color: var(--ink);
  border-radius: var(--r-md);
  font-weight: 700;
}

.skip-link:focus {
  top: var(--s1);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Layout ---------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--s2);
}

@media (min-width: 768px) {
  .wrap {
    padding: 0 var(--s4);
  }
}

.section {
  padding: 48px 0;
}

@media (min-width: 1024px) {
  .section {
    padding: 72px 0;
  }
}

.on-ink {
  background: var(--ink);
  color: var(--bone);
}

.measure {
  max-width: var(--measure);
}

/* ---------- Type ---------- */

.label {
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone);
}

.on-ink .label {
  color: var(--amber);
}

.h2 {
  font-size: 30px;
  line-height: 1.12;
  font-weight: 700; /* bold section headlines mark each new section */
  letter-spacing: -0.02em;
}

@media (min-width: 768px) {
  .h2 {
    font-size: 42px;
    line-height: 1.1;
  }
}

.h3 {
  font-size: 22px;
  line-height: 1.15;
}

.lead {
  font-size: 19px;
  line-height: 29px;
}

.muted {
  color: var(--stone);
}

.fine {
  font-size: 13px;
  line-height: 20px;
  color: var(--stone);
}

.section-head {
  max-width: 720px;
  margin-bottom: 32px;
}

.section-head .label {
  margin-bottom: var(--s2);
}

.section-head .h2 + p {
  margin-top: var(--s2);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s1);
  min-height: 52px;
  padding: 14px var(--s3);
  background: var(--amber);
  color: var(--ink);
  border: 0;
  border-radius: var(--r-md);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 18px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.btn:hover {
  background: #d69a40;
}

.arrow {
  display: inline-block;
  transition: transform 0.15s ease;
}

.btn:hover .arrow,
.nav-cta:hover .arrow {
  transform: translateX(3px);
}

.btn-ink {
  background: var(--ink);
  color: var(--bone);
}

.btn-ink:hover {
  background: #2a2825;
}

.cta {
  margin-top: var(--s4);
}

.cta .btn {
  width: 100%;
}

.cta-note {
  margin-top: 10px;
  font-size: 14px;
  line-height: 20px;
  color: var(--stone);
}

.on-ink .cta-note {
  color: var(--bone-70);
}

@media (min-width: 640px) {
  .cta .btn {
    width: auto;
  }
}

/* ---------- Nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--nav-h);
  background: var(--ink);
}

.nav .wrap {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
}

.nav-logo {
  display: block;
  flex: none;
}

/* Phones: one-line logo, no descriptor (brand minimum 200px wide) */
.nav-logo img {
  width: 200px;
  height: 26px;
}

/* 768px and up: one-line logo with descriptor (brand minimum 480px wide) */
@media (min-width: 768px) {
  .nav-logo img {
    width: 480px;
    height: 60px;
  }

  .nav-cta {
    font-size: 12px;
  }
}

.nav-cta {
  font-family: var(--font-ui);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  color: var(--amber);
  font-size: 13px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

/* ---------- Hero ---------- */

.hero {
  padding: var(--s4) 0 var(--s5);
}

.hero .label {
  margin-bottom: var(--s2);
  max-width: 34ch;
}

.hero h1 {
  font-size: 38px;
  line-height: 1.06;
  letter-spacing: -0.03em;
  max-width: 13ch;
}

.hero-sub {
  margin-top: var(--s2);
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  max-width: 34ch;
}

.hero-para {
  margin-top: 12px;
  color: var(--bone-80);
  max-width: 56ch;
}

.hero .cta {
  margin-top: var(--s3);
}

@media (min-width: 768px) {
  .hero {
    padding: var(--s5) 0;
  }

  .hero h1 {
    font-size: 56px;
  }

  .hero-sub {
    font-size: 22px;
    line-height: 32px;
  }

  .hero-para {
    font-size: 18px;
    line-height: 28px;
  }
}

@media (min-width: 1024px) {
  .hero {
    padding: 56px 0 48px;
  }

  .hero h1 {
    font-size: 68px;
  }
}

/* Proof strip: three small dark tiles, no rules. Phones: one row of three. 480px and up: tiles size to their content. */

.strip {
  margin-top: var(--s3);
}

.strip-a {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.strip-a li {
  padding: 10px 10px 12px;
  background: var(--raised-dark);
  border-radius: var(--r-md);
}

.strip-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--bone);
  white-space: nowrap;
}

.strip-num .to {
  color: var(--amber);
  padding: 0 1px;
}

.strip-lbl {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 16px;
  color: var(--bone-80);
}

.strip-source {
  margin-top: 10px;
  font-size: 12px;
  line-height: 18px;
  color: var(--bone-70);
}

.strip-link {
  color: var(--bone);
  white-space: nowrap;
}

@media (min-width: 480px) {
  .strip-a {
    grid-template-columns: repeat(3, auto);
    justify-content: start;
    gap: 12px;
  }

  .strip-a li {
    padding: 12px 18px 14px;
  }

  .strip-num {
    font-size: 22px;
  }

  .strip-lbl {
    margin-top: 2px;
    font-size: 13px;
    line-height: 18px;
  }

  .strip-source {
    margin-top: 12px;
  }
}

/* ---------- Quiz: Is this for you ----------
   "You are here" on a metro line (picked Oct 15): thick Ink route, ring stations, a station-sign tag.
   Picking a stage fills its station Amber, marks its headline in Ink, and fades the other two. */

/* Phones: the line runs down the left and each stage owns a station on it */
.stages {
  position: relative;
  display: grid;
  gap: var(--s4);
  padding-left: 40px;
}

.stage {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
}

/* line segment down to the next station */
.stage::before {
  content: "";
  position: absolute;
  left: -32px;
  top: 11px;
  width: 6px;
  height: calc(100% + var(--s4));
  background: var(--ink);
}

.stage:last-child::before {
  display: none;
}

.stage-stop {
  position: absolute;
  z-index: 1;
  left: -42px;
  top: -2px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bone);
  border: 5px solid var(--ink);
  transition: background-color 0.2s ease;
}

.stage:hover .stage-stop {
  background: #e2dbd0;
}

.stage[aria-pressed="true"] .stage-stop {
  background: var(--amber);
}

/* the other two stages fade back once one is picked */
/* fade only the words, never the station or the line, so the line never shows through a ring */
.stage .label,
.stage-title,
.stage-body {
  transition: opacity 0.25s ease;
}

.stages[data-picked] .stage:not([aria-pressed="true"]) :is(.label, .stage-title, .stage-body) {
  opacity: 0.35;
}

.stages[data-picked] .stage:not([aria-pressed="true"]):hover :is(.label, .stage-title, .stage-body) {
  opacity: 0.7;
}

/* "You are here" station sign: top right of the stage on phones */
.stage-pin {
  position: absolute;
  top: -2px;
  right: 0;
  display: grid;
  justify-items: center;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.3, 0.7, 0.2, 1);
  pointer-events: none;
}

.stage-pin b {
  padding: 6px 10px;
  background: var(--ink);
  color: var(--bone);
  border-left: 4px solid var(--amber);
  border-radius: 2px;
  font-family: var(--font-ui);
  font-size: 11px;
  line-height: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.stage-pin svg {
  display: none;
}

.stage[aria-pressed="true"] .stage-pin {
  opacity: 1;
  transform: none;
}

.stage .label {
  display: block;
  margin-bottom: var(--s1);
  padding-right: 136px;
}

.stage-title {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

/* picked headline: marked in Ink, line by line, like a highlighter */
.stage[aria-pressed="true"] .stage-title {
  display: inline;
  padding: 2px 8px;
  background: var(--ink);
  color: var(--bone);
  line-height: 1.55;
  border-radius: 3px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.stage[aria-pressed="true"] .stage-body {
  margin-top: 12px;
}

.stage-body {
  display: block;
  font-size: 16px;
  line-height: 26px;
  color: #3a3631;
}

/* Desktop: one horizontal line across the top; the sign stands on a post above the picked station */
@media (min-width: 900px) {
  .stages {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s4);
    padding: 104px 0 0;
  }

  .stages::before {
    content: "";
    position: absolute;
    top: 78px;
    left: calc((100% - 2 * var(--s4)) / 6);
    right: calc((100% - 2 * var(--s4)) / 6);
    height: 6px;
    background: var(--ink);
  }

  .stage::before {
    display: none;
  }

  .stage-stop {
    left: 50%;
    top: -36px;
    margin-left: -13px;
  }

  .stage-pin {
    top: auto;
    right: auto;
    left: 50%;
    bottom: calc(100% + 36px);
    margin-left: -70px;
    width: 140px;
  }

  .stage-pin::after {
    content: "";
    width: 2px;
    height: 16px;
    background: var(--ink);
  }

  .stage .label {
    padding-right: 0;
    text-align: center;
  }

  .stage-title {
    text-align: center;
  }
}

.quiz-line {
  display: grid;
  margin-top: var(--s4);
}

.quiz-line p {
  grid-area: 1 / 1;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
  visibility: hidden;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.quiz-line p.is-on {
  visibility: visible;
  opacity: 1;
  transform: none;
}

.quiz .cta {
  margin-top: var(--s3);
}

@media (min-width: 768px) {
  .quiz-line p {
    font-size: 26px;
  }
}

/* ---------- Proof ---------- */

/* Stats: rising Ink columns on Amber bases (picked Oct 15) */
.stats {
  display: grid;
  gap: 12px;
  margin-bottom: var(--s5);
}

.stats li {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s3);
  padding: 22px 22px 20px;
  background: var(--ink);
  color: var(--bone);
  border-radius: 3px 3px 0 0;
  border-bottom: 4px solid var(--amber);
}

/* phones: bars that get longer */
.stats li:nth-child(1) {
  width: 84%;
}

.stats li:nth-child(2) {
  width: 92%;
}

.stats .label {
  color: var(--amber);
}

.stat-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 48px;
  letter-spacing: -0.04em;
  line-height: 1;
}

.stat-text {
  display: block;
  margin-top: 10px;
  color: var(--bone-80);
  font-size: 15px;
  line-height: 22px;
}

/* desktop: columns that step up in height */
@media (min-width: 768px) {
  .stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: end;
  }

  .stats li:nth-child(1),
  .stats li:nth-child(2) {
    width: auto;
  }

  .stats li:nth-child(1) {
    min-height: 220px;
  }

  .stats li:nth-child(2) {
    min-height: 260px;
  }

  .stats li:nth-child(3) {
    min-height: 300px;
  }

  .stat-num {
    font-size: 56px;
  }
}

/* columns rise in, one after another, when the section scrolls into view */
@media (prefers-reduced-motion: no-preference) {
  .js-motion .stats li {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.3, 0.7, 0.2, 1);
  }

  .js-motion .stats li:nth-child(2) {
    transition-delay: 0.12s;
  }

  .js-motion .stats li:nth-child(3) {
    transition-delay: 0.24s;
  }

  .js-motion .stats.is-in li {
    opacity: 1;
    transform: none;
  }
}

.proof-block + .proof-block {
  margin-top: var(--s5);
}

.proof-text {
  max-width: 640px;
  margin-bottom: var(--s3);
}

.proof-text .h3 {
  margin-bottom: 12px;
}

.mini-stats {
  margin-top: 12px;
}

.proof-imgs {
  display: grid;
  gap: var(--s2);
  align-items: start;
}

@media (min-width: 900px) {
  .proof-imgs.two {
    grid-template-columns: 1fr 1fr;
    gap: var(--s3);
  }
}

.zoom {
  display: block;
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bone);
  cursor: zoom-in;
}

.zoom img {
  width: 100%;
}

.zoom-hint {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--bone);
  border-radius: var(--r-sm);
  opacity: 0.85;
}

.zoom-hint svg {
  width: 14px;
  height: 14px;
}

.founder-note {
  margin-top: var(--s5);
  padding: var(--s4) var(--s3);
  background: var(--ink);
  color: var(--bone);
  border-radius: var(--r-lg);
}

.founder-note blockquote p {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.3;
  max-width: 34em;
}

.note-by {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s3);
}

.avatar {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  object-fit: cover;
  background: var(--raised-dark);
  border: 1px solid rgba(201, 138, 46, 0.55);
  color: var(--bone-70);
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.04em;
}

@media (min-width: 768px) {
  .founder-note {
    padding: var(--s5);
  }

  .founder-note blockquote p {
    font-size: 24px;
  }
}

.proof .fine {
  margin-top: var(--s3);
  max-width: var(--measure);
}

/* Image dialog */

.img-dialog {
  width: min(1120px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 0;
  border-radius: var(--r-lg);
  background: var(--bone);
  overflow: auto;
}

.img-dialog::backdrop {
  background: rgba(18, 17, 16, 0.85);
}

.img-dialog img {
  width: 100%;
}

.img-dialog-close {
  position: sticky;
  top: 0;
  display: flex;
  justify-content: flex-end;
  padding: var(--s1);
}

.img-dialog-close button {
  font-family: var(--font-ui);
  min-height: 44px;
  padding: 0 var(--s2);
  background: var(--ink);
  color: var(--bone);
  border: 0;
  border-radius: var(--r-md);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}

/* ---------- How it works: steps ---------- */

.steps {
  display: grid;
  gap: var(--s4);
  counter-reset: step;
}

.step {
  position: relative;
  display: grid;
  grid-template-columns: 48px 1fr;
  column-gap: var(--s2);
  align-items: start;
}

.step-dot {
  position: relative;
  z-index: 1;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--amber);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 20px;
  line-height: 1;
}

/* Connector from this step to the next. Mobile: down the left. */
.step-seg {
  position: absolute;
  left: 23.5px;
  top: 48px;
  width: 1px;
  height: calc(100% - 48px + var(--s4));
  background: var(--ink);
  overflow: hidden;
}

.step-seg-fill {
  position: absolute;
  inset: 0;
  background: var(--amber);
  --seg-from: scaleY(0);
  transform-origin: top;
}

.step:last-child .step-seg {
  display: none;
}

.step-body .label {
  display: block;
  margin-bottom: 6px;
}

.step-title {
  display: block;
  font-weight: 700;
  font-size: 18px;
  line-height: 26px;
  margin-bottom: 4px;
}

.step-last .step-body {
  padding: var(--s3);
  margin-top: -4px;
  background: var(--ink);
  color: var(--bone);
  border-radius: var(--r-lg);
}

.step-last .step-body .label {
  color: var(--amber);
}

@media (min-width: 900px) {
  .steps {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s3);
  }

  .step {
    grid-template-columns: 1fr;
    row-gap: var(--s3);
  }

  .step-seg {
    left: 48px;
    top: 23.5px;
    width: calc(100% + var(--s3) - 48px);
    height: 1px;
  }

  .step-seg-fill {
    --seg-from: scaleX(0);
    transform-origin: left;
  }

  .step-last .step-body {
    margin-top: calc(-1 * var(--s3) - 48px);
    padding-top: calc(var(--s3) + 48px + var(--s3));
  }

  .step-last .step-dot {
    margin-left: var(--s3);
    margin-top: var(--s3);
    border: 1px solid var(--line-dark);
  }
}

@keyframes seg-fill {
  from {
    transform: var(--seg-from);
  }

  to {
    transform: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .step-seg-fill {
      animation: seg-fill linear both;
      animation-timeline: view();
      animation-range: entry 40% cover 55%;
    }
  }

  /* Fallback when view() timelines are not supported (class set by script.js) */
  .no-vt .step-seg-fill {
    transform: var(--seg-from);
    transition: transform 0.5s ease;
  }

  .no-vt .steps.is-in .step-seg-fill {
    transform: none;
  }

  .no-vt .steps.is-in .step:nth-child(2) .step-seg-fill {
    transition-delay: 0.4s;
  }

  .no-vt .steps.is-in .step:nth-child(3) .step-seg-fill {
    transition-delay: 0.8s;
  }
}

/* ---------- Bonus stack ---------- */

.bonus-grid {
  display: grid;
  gap: var(--s4);
}

@media (min-width: 960px) {
  .bonus-grid {
    grid-template-columns: 5fr 7fr;
    gap: var(--s5);
    align-items: start;
  }
}

.bonus-head .h2 {
  margin-bottom: var(--s2);
}

.bonus-head p {
  color: var(--bone-80);
}

.bonus-total {
  margin-top: var(--s4);
  padding-top: var(--s3);
}

.bonus-total-value {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.15;
}

#bonus-total {
  display: inline-block;
  text-align: left;
  font-variant-numeric: tabular-nums;
}

.bonus-free {
  margin-top: 6px;
  color: var(--amber);
  font-weight: 700;
  font-size: 18px;
  line-height: 26px;
}

.spots {
  margin-top: var(--s2);
  color: var(--bone-80);
}

.bonus-list li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  padding: var(--s3) 0;
}

.bonus-list li:last-child {
}

.bonus-list svg {
  width: 20px;
  height: 20px;
  margin-top: 3px;
  color: var(--amber);
}

.bonus-list strong {
  color: var(--bone);
}

.bonus-list p {
  color: var(--bone-80);
}

.worth {
  font-family: var(--font-ui);
  display: block;
  margin-top: 4px;
  color: var(--amber);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
}

@media (prefers-reduced-motion: no-preference) {
  .js-motion .bonus-list li {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    transition-delay: calc(var(--i) * 80ms);
  }

  .js-motion .bonus-list.is-in li {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Your part: tabs ---------- */

.tabs {
  display: flex;
  gap: var(--s1);
  overflow-x: auto;
  margin: 0 calc(-1 * var(--s2)) var(--s3);
  padding: 2px var(--s2) 6px;
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar {
  display: none;
}

@media (min-width: 768px) {
  .tabs {
    flex-wrap: wrap;
    overflow: visible;
    margin: 0 0 var(--s3);
    padding: 0;
  }
}

.tab {
  font-family: var(--font-ui);
  flex: none;
  min-height: 44px;
  padding: 0 var(--s2);
  background: transparent;
  border: 1px solid rgba(18, 17, 16, 0.3);
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.tab:hover {
  border-color: var(--ink);
}

.tab[aria-selected="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bone);
}

.panels {
  display: grid;
}

.panel {
  grid-area: 1 / 1;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease;
  display: grid;
  gap: var(--s3);
  padding: var(--s3);
  background: var(--raised);
  border-radius: var(--r-lg);
}

.panel.is-active {
  visibility: visible;
  opacity: 1;
}

@media (min-width: 900px) {
  .panel {
    grid-template-columns: 7fr 5fr;
    gap: var(--s4);
    padding: var(--s4);
    align-items: center;
  }
}

.ticks li {
  position: relative;
  padding: 6px 0 6px 28px;
}

.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15px;
  width: 8px;
  height: 8px;
  background: var(--ink);
}

.pay-when {
  padding-left: var(--s2);
  border-left: 2px solid var(--ink);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.2;
}

/* ---------- Comparison ---------- */

.compare-chips {
  display: flex;
  gap: var(--s1);
  overflow-x: auto;
  margin: 0 calc(-1 * var(--s2)) var(--s2);
  padding: 2px var(--s2) 6px;
  scrollbar-width: none;
}

@media (min-width: 900px) {
  .compare-chips {
    display: none;
  }
}

.compare {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  text-align: left;
}

.compare th,
.compare td {
  vertical-align: top;
  padding: var(--s2);
  font-size: 15px;
  line-height: 22px;
  font-weight: 400;
}

.compare thead th {
  font-weight: 700;
  font-size: 15px;
  vertical-align: bottom;
}

.compare tbody th {
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone);
}

.compare tbody td,
.compare tbody th {
}

.compare .ss {
  background: var(--ink);
  color: var(--bone);
  font-weight: 700;
}

.compare thead .ss {
  font-family: var(--font-ui);
  color: var(--amber);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding-top: var(--s3);
}

/* Saber Scale column header: the logo, never type.
   Phones: horizontal logo (stacked name) at its 160px minimum. Desktop: one-line logo at its 200px minimum. */
.ss-logo {
  display: block;
  width: 160px;
  height: 58px;
}

@media (min-width: 900px) {
  .ss-logo {
    width: 200px;
    height: 26px;
  }
}

.compare tbody tr:last-child .ss {
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  padding-bottom: var(--s3);
}


@media (min-width: 900px) {
  .compare thead th:not(.ss) {
    color: var(--stone);
    padding-bottom: var(--s2);
  }

  .compare tbody th {
    width: 16%;
  }

  .compare .ss {
    width: 24%;
  }
}

.compare-close {
  margin-top: var(--s4);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
}

.compare-section .cta {
  margin-top: var(--s3);
}

.compare-section .fine {
  margin-top: var(--s3);
}

/* ---------- Who you'll work with ---------- */

.who {
  display: grid;
  gap: var(--s4);
}

@media (min-width: 960px) {
  .who {
    grid-template-columns: 5fr 6fr;
    gap: var(--s5);
    align-items: start;
  }
}

.who-photo {
  aspect-ratio: 4 / 5;
  max-width: 400px;
  margin-top: var(--s4);
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--raised);
}

.who-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.who-intro {
  margin-top: var(--s3);
}

.who-about .h3 {
  margin-bottom: 12px;
}

.creds {
  margin-top: var(--s3);
}

.creds li {
  position: relative;
  padding: 12px 0 12px 24px;
}

.creds li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22px;
  width: 8px;
  height: 8px;
  background: var(--ink);
}

.who-close {
  margin-top: var(--s3);
  font-weight: 700;
}

.sign {
  margin-top: var(--s3);
}

.signature {
  width: 180px;
  height: 59px;
  color: var(--ink);
}

@media (min-width: 768px) {
  .signature {
    width: 240px;
    height: 79px;
  }
}

.sign .label {
  display: block;
  margin-top: var(--s1);
  color: var(--ink);
}

/* ---------- FAQ ---------- */

.faq-layout {
  display: grid;
  gap: var(--s4);
}

@media (min-width: 960px) {
  .faq-layout {
    grid-template-columns: 4fr 7fr;
    gap: var(--s5);
  }
}

.faq {
}

.faq details {
}

.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s2);
  min-height: 44px;
  padding: 20px 0;
  font-weight: 700;
  font-size: 18px;
  line-height: 26px;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq-icon {
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 6px;
}

.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  left: 0;
  top: 6.25px;
  width: 14px;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.2s ease;
}

.faq-icon::after {
  transform: rotate(90deg);
}

.faq details[open] .faq-icon::after {
  transform: rotate(0deg);
}

.faq details::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size 0.25s ease, content-visibility 0.25s allow-discrete;
}

.faq details[open]::details-content {
  block-size: auto;
}

.faq details p {
  padding: 0 var(--s4) var(--s3) 0;
  max-width: 65ch;
}

.faq-close {
  margin-top: var(--s5);
  text-align: center;
}

.faq-close .cta {
  margin-top: var(--s2);
}

/* ---------- Final CTA ---------- */

.final {
  text-align: center;
}

.final .wrap {
  max-width: 820px;
}

.final-icon {
  width: 44px;
  height: 48px;
  margin: 0 auto var(--s3);
}

.final h2 {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.06;
}

.final-recap {
  margin: var(--s3) auto 0;
  max-width: 56ch;
}

.final-why {
  margin: var(--s2) auto 0;
  max-width: 56ch;
  font-size: 15px;
  line-height: 24px;
  color: var(--bone-80);
}

.final .spots {
  margin-top: var(--s1);
  font-size: 15px;
}

@media (min-width: 768px) {
  .final h2 {
    font-size: 52px;
    line-height: 1.02;
  }

  .final-recap {
    font-size: 18px;
    line-height: 28px;
  }
}

/* ---------- Footer ---------- */

.footer {
  background: var(--ink);
  color: var(--bone-70);
  padding: var(--s5) 0 var(--s4);
  font-size: 14px;
  line-height: 22px;
}

.footer-logo {
  width: 200px;
  height: auto;
}

.footer-tag {
  margin-top: var(--s2);
  color: var(--bone);
}

.footer a {
  color: var(--bone);
}

.footer-contact {
  margin-top: 4px;
}

.footer-legal {
  margin-top: var(--s4);
  padding-top: var(--s3);
  max-width: 640px;
  font-size: 13px;
  line-height: 20px;
}

.footer-legal p + p {
  margin-top: var(--s1);
}

/* ---------- Simple pages (booked, bonus, privacy) ---------- */

.simple-nav .wrap {
  justify-content: flex-start;
}

.simple {
  padding: var(--s5) 0;
}

@media (min-width: 768px) {
  .simple {
    padding: calc(var(--s5) + var(--s4)) 0;
  }
}

.simple .col {
  max-width: 640px;
}

.simple h1 {
  font-size: 36px;
  line-height: 1.04;
  margin-bottom: var(--s3);
}

@media (min-width: 768px) {
  .simple h1 {
    font-size: 50px;
    line-height: 1.02;
  }
}

.simple p + p {
  margin-top: var(--s2);
}

.next-steps {
  margin-top: var(--s4);
  counter-reset: n;
}

.next-steps li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: var(--s2);
  padding: var(--s3) 0;
}

.next-steps .step-dot {
  width: 40px;
  height: 40px;
  font-size: 18px;
}

.deck {
  margin-top: var(--s4);
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ink);
}

.deck iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.reschedule {
  margin-top: var(--s4);
  color: var(--stone);
}

.simple .btn {
  margin-top: var(--s4);
}

.bonus-sign {
  margin-top: var(--s4);
}

.bonus-sign .label {
  color: var(--ink);
}

.placeholder-box {
  margin-top: var(--s3);
  padding: var(--s3);
  border: 1px dashed var(--ink);
  border-radius: var(--r-lg);
  background: var(--raised);
}

#who-title {
  margin-top: var(--s2);
}


/* Desktop hero: headline left, pitch and button right, proof strip full width below */
@media (min-width: 1024px) {
  /* the hero fills the first screen: headline at the top, proof strip at the bottom, fold right after it */
  .hero {
    display: flex;
    min-height: min(calc(100vh - var(--nav-h)), 860px);
  }

  .hero > .wrap {
    display: flex;
    flex-direction: column;
  }

  .hero .strip {
    margin-top: auto;
    padding-top: var(--s4);
  }

  .hero-grid {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: var(--s5);
    align-items: start;
  }

  .hero-side .hero-sub {
    margin-top: 0;
  }
}

/* ---------- Privacy policy ---------- */

.policy-date {
  margin-top: calc(-1 * var(--s2));
  color: var(--stone);
  font-size: 14px;
}

.policy-summary {
  margin-top: var(--s4);
  padding: var(--s3);
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.policy-summary .label {
  margin-bottom: var(--s1);
}

.policy h2:not(.label) {
  margin-top: var(--s5);
  padding-top: var(--s3);
  font-size: 26px;
  line-height: 1.2;
}

.policy h2 + p,
.policy p + p,
.policy p + ul,
.policy ul + p {
  margin-top: 12px;
}

.policy h2 + p {
  margin-top: var(--s2);
}

/* ---------- Mobile hero: more air, clearer hierarchy ---------- */
@media (max-width: 767px) {
  .hero {
    padding: 28px 0 48px;
  }

  /* label spans the full width: 2 lines instead of 3 */
  .hero .label {
    max-width: none;
    margin-bottom: 16px;
    line-height: 18px;
  }

  .hero h1 {
    font-size: 40px;
    line-height: 1.08;
  }

  /* subheadline as a calm intro line, not a second bold headline */
  .hero-sub {
    margin-top: 20px;
    padding-top: 20px;
    font-size: 20px;
    line-height: 30px;
    font-weight: 400;
  }

  .hero-para {
    margin-top: 12px;
    font-size: 16px;
    line-height: 26px;
    color: var(--bone-70);
  }

  .hero .cta {
    margin-top: 28px;
  }

  .hero .strip {
    margin-top: 28px;
  }

}

/* ---------- Oct 15 round 3: no divider lines ---------- */

/* Proof sub-headings in the highlighter style, alternating:
   Amber: Ink text on an Amber stroke across the lower part of the letters (Ink stays readable on Bone above it).
   Ink: Bone text on a full-height Ink stroke (Bone text needs the whole letter covered).
   Both share uneven marker ends so they read as one style. */
.proof-text .proof-pill {
  display: inline;
  padding: 1px 9px 3px;
  background: var(--ink);
  color: var(--bone);
  border-radius: 3px 12px 4px 14px / 14px 4px 12px 3px;
  font-size: 19px;
  line-height: 1.75;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.proof-text .proof-pill-gold {
  padding: 0 7px 1px;
  background: linear-gradient(transparent 34%, var(--amber) 34%);
  color: var(--ink);
}

.proof-text .proof-pill + p {
  margin-top: 14px;
}

@media (min-width: 768px) {
  .proof-text .proof-pill {
    font-size: 21px;
  }
}

/* Under-stats: a small italic line in the body serif, numbers kept upright */
.mini-stats {
  margin-top: 10px;
  font-style: italic;
  font-size: 15px;
  line-height: 22px;
  color: var(--stone);
  letter-spacing: 0;
}

/* FAQ: back to the original design (Oct 16): rows on the ivory page, split by hairlines */
.faq {
  border-top: 1px solid var(--line-stone);
}

.faq details {
  border-bottom: 1px solid var(--line-stone);
}

/* Comparison: soft shading on alternate rows instead of rules */
.compare tbody tr:nth-child(odd) > :not(.ss) {
  background: rgba(18, 17, 16, 0.04);
}


/* Bonus list, credentials, footer, booked steps and policy: spacing does the separating */
.bonus-list li {
  padding: 14px 0;
}

.creds {
  margin-top: var(--s2);
}

.creds li {
  padding: 8px 0 8px 24px;
}

.creds li::before {
  top: 18px;
}

.footer-legal {
  margin-top: var(--s3);
  padding-top: 0;
}

.next-steps li {
  padding: 14px 0;
}

.policy h2:not(.label) {
  padding-top: 0;
  margin-top: var(--s4);
}

/* Same background back to back: the padding no longer stacks into a double gap */
.section:not(.on-ink) + .section:not(.on-ink),
.section.on-ink + .section.on-ink {
  padding-top: var(--s2);
}

@media (min-width: 1024px) {
  .section:not(.on-ink) + .section:not(.on-ink),
  .section.on-ink + .section.on-ink {
    padding-top: var(--s3);
  }
}

/* ---------- Comparison on phones: swipe cards (picked Oct 15) ----------
   The same table, laid out as one card per row that swipes sideways.
   Each card: the row label, the picked option's answer, then Saber Scale's answer on Ink under the logo. */
@media (max-width: 899px) {
  .compare,
  .compare tbody {
    display: block;
  }

  /* header stays readable for screen readers, hidden visually (each card carries the logo) */
  .compare thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .compare tbody {
    display: flex;
    gap: 12px;
    margin: 0 calc(-1 * var(--s2));
    padding: 4px var(--s2) 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--s2);
    scrollbar-width: none;
  }

  .compare tbody::-webkit-scrollbar {
    display: none;
  }

  .compare tr {
    flex: 0 0 86%;
    scroll-snap-align: center;
    display: flex;
    flex-direction: column;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--raised);
  }

  .compare tbody th {
    display: block;
    width: auto;
    padding: 16px 18px 0;
    background: none !important;
  }

  .compare tbody td {
    display: block;
    flex: 1;
    padding: 8px 18px 18px;
    background: none !important;
    font-size: 16px;
    line-height: 24px;
    color: #5b554d;
  }

  .compare tbody td.ss {
    flex: 0 0 auto;
    width: auto;
    padding: 16px 18px 18px;
    background: var(--ink) !important;
    color: var(--bone);
    border-radius: 0;
    font-size: 17px;
    line-height: 25px;
  }

  .compare tbody td.ss::before {
    content: "";
    display: block;
    width: 200px;
    height: 26px;
    margin-bottom: 10px;
    background: url("brand/logos/saber-scale-logo-oneline-amber-bone.svg") left center / contain no-repeat;
  }

  .compare[data-show="diy"] .c-agency,
  .compare[data-show="diy"] .c-ppl,
  .compare[data-show="agency"] .c-diy,
  .compare[data-show="agency"] .c-ppl,
  .compare[data-show="ppl"] .c-diy,
  .compare[data-show="ppl"] .c-agency {
    display: none;
  }

  .compare-dots {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: 14px;
  }

  .compare-dots i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(18, 17, 16, 0.2);
    transition: transform 0.2s ease, background-color 0.2s ease;
  }

  .compare-dots i.on {
    background: var(--ink);
    transform: scale(1.3);
  }
}

@media (min-width: 900px) {
  .compare-dots {
    display: none;
  }
}

/* ---------- Tabs and chips: Georgia text with an Amber highlighter on the picked one ---------- */
.tabs,
.compare-chips {
  gap: 20px;
}

.tab {
  position: relative;
  isolation: isolate;
  flex: none;
  min-height: 44px;
  padding: 0 2px;
  background: none;
  border: 0;
  border-radius: 0;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--stone);
  cursor: pointer;
  transition: color 0.2s ease;
}

.tab::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -4px;
  right: -4px;
  bottom: 11px;
  height: 10px;
  background: var(--amber);
  border-radius: 2px 6px 3px 7px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.tab:hover {
  color: var(--ink);
  background: none;
}

.tab[aria-selected="true"],
.tab[aria-pressed="true"] {
  background: none;
  color: var(--ink);
}

.tab[aria-selected="true"]::after,
.tab[aria-pressed="true"]::after {
  transform: scaleX(1);
}

/* ---------- Proof screenshots: highlighter labels laid over the baked-in pills ----------
   Each .ov covers an old pill (matched to the image background) and carries the new label.
   Sizes use container units, so they scale exactly with the image. */
.zoom,
.zoom-big {
  position: relative;
  container-type: inline-size;
}

.ov {
  position: absolute;
  left: var(--l);
  top: var(--t);
  width: var(--w);
  height: var(--h);
  display: flex;
  align-items: center;
  background: #f3efe6;
  pointer-events: none;
}

.ov-mark {
  display: inline-block;
  padding: 0.3em 0.6em 0.34em;
  background: var(--ink);
  color: var(--bone);
  border-radius: 0.2em 0.7em 0.25em 0.8em / 0.8em 0.25em 0.7em 0.2em;
  font-family: var(--font-display);
  font-size: 1.65cqw;
  line-height: 1;
  white-space: nowrap;
}

.ov-gold .ov-mark {
  padding: 0.24em 0.5em 0.3em;
  background: linear-gradient(transparent 32%, var(--amber) 32%);
  color: var(--ink);
}

/* ---------- Eyebrow labels: Option 9 highlighter (picked Oct 15) ----------
   Georgia sentence case on a soft Amber stroke across the lower part of the words.
   The stroke sits on .hl inside each .label, so it follows every line of a wrapped label.
   The "You are here" station sign is separate and unchanged. */
.label {
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}

.on-ink .label,
.stats .label,
.step-last .step-body .label {
  color: var(--bone);
}

.label .hl {
  padding: 0 5px 1px;
  border-radius: 2px;
  background: linear-gradient(transparent 38%, rgba(201, 138, 46, 0.5) 38%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.on-ink .label .hl,
.stats .label .hl,
.step-last .step-body .label .hl {
  background: linear-gradient(transparent 38%, rgba(201, 138, 46, 0.42) 38%);
}

.hero .label {
  font-size: 16px;
}

/* ---------- Hero proof: ticker line (Option B, picked Oct 15) ----------
   Phones: three short lines, each led by an Amber diamond. 480px and up: one line, diamonds between. */
.strip-a {
  display: grid;
  grid-template-columns: none;
  gap: 8px;
}

.strip-a li,
.strip-a li:first-child {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 0;
  background: none;
  border-radius: 0;
}

.strip-a li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  background: var(--amber);
  transform: rotate(45deg) translateY(-2px);
}

.strip-a li > span {
  display: inline;
}

.strip-num {
  display: inline;
  font-size: 18px;
}

.strip-lbl {
  display: inline;
  margin: 0;
  font-size: 14px;
  line-height: 20px;
}

@media (min-width: 480px) {
  .strip-a {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
  }

  .strip-a li:first-child::before {
    display: none;
  }

  .strip-a li,
  .strip-a li:first-child {
    padding: 0;
  }

  .strip-num {
    font-size: 22px;
  }

  .strip-lbl {
    font-size: 15px;
    max-width: none;
  }
}

/* ---------- Oct 16 ---------- */

/* Proof section: Amber highlights cover the whole line of text, with Bone text, matching the Ink ones */
.proof-text .proof-pill-gold {
  padding: 1px 9px 3px;
  background: var(--amber);
  color: var(--bone);
}

.ov-gold .ov-mark {
  padding: 0.3em 0.6em 0.34em;
  background: var(--amber);
  color: var(--bone);
}

/* Proof fine print now sits between the screenshots and the founder note */
.proof .proof-fine {
  margin-top: var(--s4);
}

.proof-fine + .founder-note {
  margin-top: var(--s4);
}

/* Stat column labels: accent bar (caps, short Amber bar underneath) */
.stats .label {
  display: inline-block;
  padding-bottom: 7px;
  background: linear-gradient(var(--amber), var(--amber)) left bottom / 24px 3px no-repeat;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bone);
}

/* Founder note attribution: sans caps */
.note-by .label {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amber);
}

/* Step time chips: arrow kicker (caps with a small arrow after) */
.step-body .label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}

.step-body .label::after {
  content: "\2192";
  font-size: 15px;
  letter-spacing: 0;
}

.step-last .step-body .label {
  color: var(--bone);
}

.step-last .step-body .label::after {
  color: var(--amber);
}

/* these three keep their own style, without the highlighter stroke */
.stats .label .hl,
.note-by .label .hl,
.step-body .label .hl,
.step-last .step-body .label .hl {
  padding: 0;
  background: none;
}

/* Bonus: the line under the Founding 5 offer */
.bonus-after {
  margin-top: 4px;
  color: var(--bone-80);
  font-size: 16px;
  line-height: 24px;
}

/* Phones: the line under every full-width button is centred under it */
@media (max-width: 639px) {
  .cta-note {
    text-align: center;
  }
}

/* Bonus "(worth $X)" values: Georgia italic in Amber, set like a price in a fine menu */
.worth {
  margin-top: 6px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: 0.01em;
  color: var(--amber);
}

/* "Who you'll work with" eyebrow: italic note (Oct 16) */
.who-label {
  font-style: italic;
  font-size: 16px;
  line-height: 24px;
  color: #4a453f;
}

.who-label::before {
  content: "\21B3";
  margin-right: 8px;
  font-style: normal;
  color: var(--ink);
}

.who-label .hl {
  padding: 0;
  background: none;
}

/* Founder intro as a quote: big Amber quote mark, headshot and name below */
.who-quote {
  position: relative;
  margin: var(--s3) 0 0;
  padding-top: 44px;
}

.who-quote::before {
  content: "\201C";
  position: absolute;
  top: -18px;
  left: -4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 104px;
  line-height: 1;
  color: var(--amber);
}

.who-quote p {
  font-size: 20px;
  line-height: 1.5;
  font-style: italic;
}

.who-by {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}

.who-by img {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(201, 138, 46, 0.55);
}

.who-by b {
  display: block;
  font-size: 16px;
  line-height: 20px;
}

.who-by span span {
  display: block;
  font-size: 14px;
  line-height: 20px;
  color: var(--stone);
}

/* Founder sign-off as a quote: big Amber closing mark, mirrors the opening one in the left column */
.who-close {
  margin: var(--s4) 0 0;
  font-weight: 400;
}

.who-close p {
  font-size: 22px;
  line-height: 1.45;
  font-style: italic;
}

.who-close::after {
  content: "\201D";
  display: block;
  height: 40px;
  margin-top: 2px;
  text-align: right;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 104px;
  line-height: 1;
  color: var(--amber);
}

.who-close + .sign {
  margin-top: var(--s2);
}

/* Industry tabs: one larger row that scrolls sideways at every width, with a fade and arrow while more sit off to the right */
.tabs-wrap {
  position: relative;
  margin-bottom: var(--s3);
}

.tabs-wrap .tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  margin-bottom: 0;
  scroll-behavior: smooth;
}

.tabs-wrap::before,
.tabs-wrap::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  width: 72px;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.tabs-wrap::before {
  left: calc(-1 * var(--s2));
  background: linear-gradient(to left, rgba(243, 238, 230, 0), var(--bone) 75%);
}

.tabs-wrap::after {
  right: calc(-1 * var(--s2));
  background: linear-gradient(to right, rgba(243, 238, 230, 0), var(--bone) 60%);
}

.tabs-wrap[data-at-start]::before,
.tabs-wrap[data-at-end]::after {
  opacity: 0;
}

.tabs-next {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 0;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-top: -20px;
  padding: 0 0 2px;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-ui);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.tabs-next:hover {
  background: #2a2825;
}

.tabs-wrap[data-at-end] .tabs-next {
  opacity: 0;
  pointer-events: none;
}

.tabs-wrap .tab {
  font-size: 18px;
}

@media (min-width: 768px) {
  .tabs-wrap .tabs {
    gap: 28px;
    margin: 0;
    padding: 2px 4px 6px;
  }

  .tabs-wrap::before {
    left: 0;
  }

  .tabs-wrap::after {
    right: 0;
    width: 120px;
  }

  .tabs-wrap .tab {
    min-height: 52px;
    font-size: 21px;
  }

  .tabs-wrap .tab::after {
    bottom: 13px;
    height: 11px;
  }

  .tabs-next {
    width: 40px;
    height: 40px;
    margin-top: -23px;
  }
}

/* Founder note in the proof section: editorial pull-out on Bone (Ink rule on top, opening line large, no headshot) */
.founder-note {
  max-width: 820px;
  padding: 24px 0 0;
  background: none;
  color: var(--ink);
  border-top: 2px solid var(--ink);
  border-radius: 0;
}

.founder-note blockquote p.note-lead {
  max-width: none;
  font-size: 26px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.note-lead::before,
.note-rest::after {
  content: "\201C";
  color: var(--amber);
  font-weight: 700;
}

.note-rest::after {
  content: "\201D";
}

.founder-note blockquote p.note-rest {
  max-width: none;
  margin-top: 14px;
  font-size: 18px;
  line-height: 1.6;
  font-weight: 400;
  color: #3a3631;
}

.founder-note .note-by {
  display: block;
  margin-top: 20px;
}

.note-by b {
  display: block;
  font-size: 16px;
  line-height: 22px;
}

.note-by b::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 2px;
  margin: 0 10px 5px 0;
  background: var(--ink);
  vertical-align: middle;
}

.note-by b + span {
  display: block;
  padding-left: 34px;
  font-size: 14px;
  line-height: 20px;
  color: var(--stone);
}

@media (min-width: 768px) {
  .founder-note {
    padding: 28px 0 0;
  }

  .founder-note blockquote p.note-lead {
    font-size: 32px;
  }

  .founder-note blockquote p.note-rest {
    margin-top: 16px;
    font-size: 20px;
  }
}

/* Industry tabs: the picked one is circled in pen (a loose hand-drawn Ink loop) instead of highlighted */
.tabs-wrap .tabs {
  padding-top: 8px;
  padding-bottom: 10px;
}

.tabs-wrap .tab {
  padding: 0 10px;
}

.tabs-wrap .tab::after {
  top: 2px;
  bottom: 2px;
  left: -4px;
  right: -4px;
  height: auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M18 14 C 60 2, 150 0, 186 16 C 204 26, 194 50, 150 56 C 100 62, 30 58, 10 44 C -4 32, 12 14, 52 8' fill='none' stroke='%23121110' stroke-width='2.2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  border-radius: 0;
  opacity: 0;
  transform: scale(0.9);
  transform-origin: center;
  transition: opacity 0.2s ease, transform 0.25s ease;
}

.tabs-wrap .tab[aria-selected="true"]::after {
  opacity: 1;
  transform: scale(1);
}

@media (min-width: 768px) {
  .tabs-wrap .tab::after {
    top: 0;
    bottom: 0;
    left: -10px;
    right: -10px;
  }
}

@media (min-width: 768px) {
  /* room for the loop around the first tab */
  .tabs-wrap .tabs {
    padding-left: 10px;
  }
}

/* Comparison chips (phones): the picked one is an Ink pill with Bone text */
.compare-chips {
  gap: 6px;
}

.compare-chips .tab {
  padding: 0 16px;
  border-radius: 999px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.compare-chips .tab::after {
  display: none;
}

.compare-chips .tab[aria-pressed="true"] {
  background: var(--ink);
  color: var(--bone);
}

.compare-chips .tab:hover:not([aria-pressed="true"]) {
  background: rgba(18, 17, 16, 0.06);
}

/* Bonus total: the $4,000 is the big Amber number, the label sits small above it */
.bonus-total-value .bt-label {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 13px;
  line-height: 18px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-70);
}

#bonus-total {
  font-weight: 700;
  font-size: 60px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--amber);
}

.bonus-free {
  margin-top: 14px;
}

.bonus-after {
  margin-top: 6px;
  font-size: 14px;
  line-height: 20px;
  color: var(--bone-70);
}

@media (min-width: 768px) {
  #bonus-total {
    font-size: 84px;
  }
}

/* Your part card: numbered terms (big Georgia numerals, thin rules, the payment line under a heavier Ink rule), almost square corners */
.panel {
  padding: 28px 24px;
  border-radius: 2px;
  align-content: start;
}

.panel .ticks {
  counter-reset: term;
}

.panel .ticks li {
  counter-increment: term;
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: baseline;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  font-size: 18px;
  line-height: 1.5;
}

.panel .ticks li:first-child {
  padding-top: 0;
  border-top: 0;
}

.panel .ticks li::before {
  content: counter(term);
  position: static;
  width: auto;
  height: auto;
  background: none;
  font-size: 30px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.panel .pay-when {
  padding: 18px 0 0;
  border-left: 0;
  border-top: 2px solid var(--ink);
  font-size: 20px;
  line-height: 1.4;
  font-weight: 700;
}

@media (min-width: 900px) {
  .panel {
    gap: 48px;
    padding: 40px;
    align-items: end;
  }

  .panel .pay-when {
    font-size: 24px;
  }
}

/* ---------- Hero, Oct 16: bolder headline, wider gap between subheadline and paragraph, proof in the first screen ---------- */
.hero h1 {
  font-weight: 700;
  letter-spacing: -0.035em;
}

.h1-accent {
  color: var(--amber);
}

.hero-sub {
  font-weight: 700;
  color: var(--bone);
}

.hero-para {
  color: rgba(243, 238, 230, 0.62);
}

@media (max-width: 767px) {
  .hero {
    padding: 20px 0 44px;
  }

  .hero .label {
    margin-bottom: 12px;
  }

  .hero h1 {
    font-size: 44px;
    line-height: 1.02;
  }

  .hero-sub {
    margin-top: 18px;
    padding-top: 0;
    font-size: 22px;
    line-height: 28px;
    font-weight: 700;
  }

  .hero-para {
    margin-top: 10px;
    font-size: 15px;
    line-height: 23px;
  }

  .hero .cta {
    margin-top: 22px;
  }

  .hero .strip {
    margin-top: 24px;
  }
}

/* Desktop and laptops: two columns from 900px, the strip follows the content instead of waiting at the bottom of the screen */
@media (min-width: 900px) {
  .hero {
    display: block;
    min-height: 0;
    padding: 40px 0 48px;
  }

  .hero-grid {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: 56px;
    align-items: center;
  }

  .hero h1 {
    max-width: none;
    font-size: clamp(56px, min(6.2vw, 11vh), 84px);
    line-height: 1;
  }

  .hero-side .hero-sub {
    margin-top: 0;
    font-size: 26px;
    line-height: 34px;
  }

  .hero-para {
    margin-top: 14px;
    font-size: 17px;
    line-height: 27px;
  }

  .hero .strip {
    margin-top: 48px;
    padding-top: 0;
  }
}

/* =====================================================================
   Density pass (Oct 16): same words, more room, two reading layers.
   Big bold titles to skim, smaller grey text for the details, short paragraphs,
   lists as lists, alternating Bone and white sections with section numbers.
   ===================================================================== */
:root {
  --text-2: #4a453f; /* supporting text on Bone and white */
}

/* ---------- Sections: room between them again, Bone and white alternate ---------- */
.section {
  --sec-bg: var(--bone);
  padding: 64px 0;
}

.section-white {
  --sec-bg: var(--raised);
  background: var(--raised);
}

.section:not(.on-ink) + .section:not(.on-ink),
.section.on-ink + .section.on-ink {
  padding-top: 64px;
}

@media (min-width: 1024px) {
  .section,
  .section:not(.on-ink) + .section:not(.on-ink),
  .section.on-ink + .section.on-ink {
    padding-top: 112px;
    padding-bottom: 112px;
  }
}

/* small section number, a sense of progress down the page */
.sec-num {
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.16em;
  color: var(--stone);
}

.on-ink .sec-num {
  color: rgba(243, 238, 230, 0.5);
}

/* ---------- Type: big titles, quieter details ---------- */
.h2 {
  font-size: 32px;
  line-height: 1.1;
}

@media (min-width: 768px) {
  .h2 {
    font-size: 44px;
  }
}

@media (min-width: 1024px) {
  .h2 {
    font-size: 52px;
    line-height: 1.06;
  }
}

.lead {
  font-size: 18px;
  line-height: 28px;
  color: var(--text-2);
}

.on-ink .lead {
  color: var(--bone-70);
}

.section-head .lead + .lead {
  margin-top: 12px;
}

/* simple dash lists, for sentences that list three or more things */
ul.dash {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

ul.dash li {
  position: relative;
  padding-left: 22px;
}

ul.dash li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.8em;
  width: 10px;
  height: 2px;
  background: currentColor;
}

/* Stage cards */
.stage-title {
  font-weight: 700;
  font-size: 22px;
  line-height: 1.25;
}

.stage-body {
  font-size: 15px;
  line-height: 24px;
  color: var(--text-2);
}

.stage-body .sb {
  display: block;
}

.stage-body .sb + .sb {
  margin-top: 10px;
}

/* How it works */
.step-title {
  font-size: 21px;
  line-height: 28px;
  margin-bottom: 6px;
}

.step-body p {
  font-size: 15px;
  line-height: 24px;
  color: var(--text-2);
}

.step-last .step-body p {
  color: var(--bone-70);
}

/* Proof */
.proof-text p:not(.mini-stats) {
  font-size: 16px;
  line-height: 26px;
  color: var(--text-2);
}

.founder-note blockquote p.note-rest + p.note-rest {
  margin-top: 12px;
}

.founder-note .note-rest:not(:last-child)::after {
  content: none;
}

.note-rest strong {
  color: var(--ink);
}

/* About Our Founder */
.who-about .about-first {
  font-size: 20px;
  line-height: 1.4;
  font-weight: 700;
}

.who-about .about-first ~ p:not(.about-first) {
  margin-top: 12px;
  font-size: 16px;
  line-height: 26px;
  color: var(--text-2);
}

.creds li {
  font-size: 15px;
  line-height: 24px;
  color: var(--text-2);
}

/* FAQ */
.faq summary {
  font-size: 19px;
  line-height: 27px;
}

.faq details > p,
.faq-a {
  font-size: 16px;
  line-height: 26px;
  color: var(--text-2);
}

.faq-a {
  padding: 0 var(--s4) var(--s3) 0;
  max-width: 62ch;
}

.faq .faq-a p {
  padding: 0;
}

.faq-a > * + * {
  margin-top: 12px;
}

.faq-a > ul.dash,
.faq-a > .faq-first + ul.dash {
  margin-top: 6px;
}

.faq-a .faq-first {
  font-size: 17px;
  color: var(--ink);
}

.faq-a strong {
  color: var(--ink);
}

@media (min-width: 960px) {
  .faq-head {
    position: sticky;
    top: calc(var(--nav-h) + 32px);
    align-self: start;
  }
}

/* ---------- Bonus list: name and value up front, the details one tap away ---------- */
.bonus-list details summary {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 16px;
  align-items: baseline;
  cursor: pointer;
}

.bonus-list summary::-webkit-details-marker {
  display: none;
}

.bonus-list .b-name {
  font-size: 19px;
  line-height: 1.35;
  color: var(--bone);
}

.bonus-list summary .worth {
  margin-top: 0;
  white-space: nowrap;
}

.bonus-list .b-more {
  grid-column: 1 / -1;
  margin-top: 6px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(243, 238, 230, 0.55);
}

.bonus-list .b-more::before {
  content: "+ ";
}

.bonus-list details[open] .b-more::before {
  content: "\2212  ";
}

.bonus-list summary:hover .b-more {
  color: var(--bone);
}

.bonus-list .b-desc {
  margin-top: 8px;
  font-size: 15px;
  line-height: 24px;
  color: var(--bone-70);
}

.bonus-list .b-desc p {
  color: inherit;
}

.bonus-list .b-desc ul.dash + p {
  margin-top: 6px;
}

.bonus-list li {
  padding: 16px 0;
}

/* ---------- Desktop: heading on the left, content on the right ---------- */
.split-body {
  min-width: 0;
}

.tabs-wrap::before {
  background: linear-gradient(to left, transparent, var(--sec-bg, var(--bone)) 75%);
}

.tabs-wrap::after {
  background: linear-gradient(to right, transparent, var(--sec-bg, var(--bone)) 60%);
}

.section-white .panel {
  background: var(--bone);
}

@media (min-width: 900px) {
  .split {
    display: grid;
    grid-template-columns: 4fr 7fr;
    gap: 64px;
    align-items: start;
  }

  .split > .section-head {
    position: sticky;
    top: calc(var(--nav-h) + 32px);
    margin-bottom: 0;
  }

  /* How it works: the steps run down the right column, like on phones */
  #how .steps {
    grid-template-columns: 1fr;
    gap: var(--s4);
  }

  #how .step {
    grid-template-columns: 48px 1fr;
    row-gap: 0;
    column-gap: var(--s3);
  }

  #how .step-seg {
    left: 23.5px;
    top: 48px;
    width: 1px;
    height: calc(100% - 48px + var(--s4));
  }

  #how .step-seg-fill {
    --seg-from: scaleY(0);
    transform-origin: top;
  }

  #how .step-last .step-body {
    margin-top: -4px;
    padding: var(--s3);
  }

  #how .step-last .step-dot {
    margin: 0;
  }

  /* Your part: the card is one column inside the narrower right side */
  #your-part .panel {
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: start;
  }
}

.who-about .h3 {
  margin-bottom: 14px;
  font-size: 26px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.who-about .about-first {
  font-size: 19px;
}

/* lists inside a bonus item are plain dash lists, not bonus rows */
.bonus-list ul.dash li {
  display: block;
  padding: 0 0 0 22px;
  opacity: 1;
  transform: none;
}

/* Mobile hero: no eyebrow, bigger headline, more room before the subheadline */
@media (max-width: 767px) {
  .hero .label {
    display: none;
  }

  .hero {
    padding-top: 16px;
  }

  .hero h1 {
    font-size: 50px;
    line-height: 1;
  }

  .hero-sub {
    margin-top: 28px;
  }
}

/* FAQ cost: the Founding 5 line leads the answer */
.faq-a .faq-free {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
}

/* bonus bullets read as short descriptive lines */
.bonus-list .b-desc ul.dash {
  gap: 6px;
}

.bonus-list .b-desc p + ul.dash {
  margin-top: 8px;
}

/* Journey kickers (Oct 16): Georgia small caps above each section headline, in place of the section numbers */
.kicker {
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 20px;
  letter-spacing: 0.14em;
  font-variant: small-caps;
  text-transform: lowercase;
  color: #4a453f;
}

.on-ink .kicker {
  color: rgba(243, 238, 230, 0.7);
}

/* ---------- Hero, Oct 20: one calm first screen ----------
   The hero fills the screen under the nav, so the next section only shows after a scroll.
   Phones: more air between headline, pitch and button; the proof strip sits just below the fold.
   Desktop: headline and pitch centred in the screen, proof strip anchored to the bottom. */
.hero {
  display: flex;
  flex-direction: column;
  min-height: calc(100svh - var(--nav-h));
}

.hero > .wrap {
  display: flex;
  flex: 1;
  flex-direction: column;
  width: 100%;
}

.hero .strip {
  margin-top: auto;
}

@media (max-width: 767px) {
  .hero {
    padding: 36px 0 40px;
  }

  .hero h1 {
    font-size: 50px;
    line-height: 1.03;
  }

  .hero-sub {
    margin-top: 36px;
    font-size: 22px;
    line-height: 30px;
  }

  .hero-para {
    margin-top: 14px;
    font-size: 16px;
    line-height: 26px;
  }

  .hero .cta {
    margin-top: 40px;
  }

  .hero .cta-note {
    margin-top: 14px;
  }

  .hero .strip {
    padding-top: 72px;
  }

  .hero .strip-a {
    gap: 12px;
  }
}

@media (min-width: 900px) {
  .hero {
    padding: 32px 0 40px;
  }

  .hero-grid {
    flex: 1;
    align-items: center;
    gap: 56px;
  }

  .hero h1 {
    font-size: clamp(52px, min(6.2vw, 12vh), 80px);
    line-height: 0.98;
  }

  .hero .label {
    margin-bottom: 20px;
  }

  .hero-side .hero-sub {
    font-size: clamp(24px, 2vw, 30px);
    line-height: 1.3;
  }

  .hero-para {
    margin-top: 18px;
    font-size: 18px;
    line-height: 29px;
  }

  .hero .cta {
    margin-top: 32px;
  }

  .hero .strip {
    margin-top: auto;
    padding-top: 40px;
  }
}

/* Short laptop windows: tighter hero so the whole first screen still fits */
@media (min-width: 900px) and (max-height: 720px) {
  .hero {
    padding: 20px 0 24px;
  }

  .hero .label {
    margin-bottom: 12px;
  }

  .hero-side .hero-sub {
    font-size: 22px;
    line-height: 29px;
  }

  .hero-para {
    margin-top: 10px;
    font-size: 16px;
    line-height: 25px;
  }

  .hero .cta {
    margin-top: 20px;
  }

  .hero .strip {
    padding-top: 24px;
  }
}

/* Hero (Oct 21, option B): three ticked benefits and the risk-free line above the button */
.hero-ticks {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.hero-ticks li {
  display: flex;
  gap: 14px;
  align-items: baseline;
  font-size: 17px;
  line-height: 1.35;
  color: var(--bone);
}

.hero-ticks li::before {
  content: "";
  flex: none;
  width: 14px;
  height: 8px;
  border-left: 2.5px solid var(--amber);
  border-bottom: 2.5px solid var(--amber);
  transform: translateY(-4px) rotate(-45deg);
}

.hero-risk {
  margin-top: 20px;
  font-size: 17px;
  line-height: 1.45;
}

.hero-risk b {
  color: var(--amber);
  font-weight: 700;
}

@media (min-width: 900px) {
  .hero-ticks li {
    font-size: 19px;
  }

  .hero-risk {
    font-size: 18px;
  }
}

@media (min-width: 900px) and (max-height: 720px) {
  .hero-ticks {
    margin-top: 12px;
    gap: 6px;
  }

  .hero-ticks li {
    font-size: 17px;
  }

  .hero-risk {
    margin-top: 12px;
    font-size: 16px;
  }
}

/* Short phone screens (small iPhones, Safari with toolbars, Instagram's browser): keep the button in the first screen */
@media (max-width: 767px) and (max-height: 760px) {
  .hero {
    padding-top: 22px;
  }

  .hero h1 {
    font-size: 44px;
  }

  .hero-sub {
    margin-top: 22px;
    font-size: 20px;
    line-height: 27px;
  }

  .hero-ticks {
    margin-top: 14px;
    gap: 8px;
  }

  .hero-ticks li {
    font-size: 16px;
  }

  .hero-risk {
    margin-top: 14px;
    font-size: 16px;
  }

  .hero .cta {
    margin-top: 22px;
  }
}

/* ---------- Light hero (Oct 21): Bone background like the quiz, Ink text; the nav stays Ink ----------
   Brand Amber is too light for text on Bone (2.5:1), so text accents use a deeper Amber:
   #9a6418 for the big headline words, ticks and stat arrows (4.3:1), #8c5a12 for small text (5.1:1).
   The button keeps the brand Amber fill with Ink text. */
.hero-light {
  background: var(--bone);
  color: var(--ink);
}

.hero-light h1,
.hero-light .hero-sub,
.hero-light .hero-ticks li,
.hero-light .label,
.hero-light .strip-num,
.hero-light .strip-link {
  color: var(--ink);
}

.hero-light .h1-accent,
.hero-light .strip-num .to {
  color: #9a6418;
}

.hero-light .hero-ticks li::before {
  border-color: #9a6418;
}

.hero-light .hero-risk b {
  color: #8c5a12;
}

.hero-light .cta-note,
.hero-light .strip-source {
  color: var(--stone);
}

.hero-light .strip-lbl {
  color: #4a453f;
}

.hero-light .strip-a li::before {
  background: #9a6418;
}

/* Section colours flipped (Oct 21): Bone and white alternate all the way down after the light hero.
   Things that match their section background follow it. */
.stage-stop {
  background: var(--sec-bg, var(--bone));
}

@media (max-width: 899px) {
  .section-white .compare tr {
    background: var(--bone);
  }
}