/* Design tokens (was tokens.css; merged to save a render-blocking request). */
:root{--cream:#FDF6E3;--peri:#CDC1F7;--coral:#F4442E;--ink:#9A2F0A;--font-display:"Surf Slang";--font-script:"Fineday One";--font-body:"Averia Serif Libre";--radius-pill:999px;--radius-card:24px;--radius-photo:8px;--radius-panel:24px;--outline:2px solid var(--coral);--shadow-btn:4px 4px 0 var(--coral);--shadow-btn-primary-links:5px 5px 0 var(--coral);--shadow-card:8px 8px 0 var(--coral);--photo-border:4px;--container:1200px;--gutter:120px;--ease-out:cubic-bezier(.16,1,.3,1);--ease-pin:cubic-bezier(.45,1.45,.8,1);--dur-press:80ms;--dur-hover:120ms}
@media(max-width:899px){:root{--radius-card:22px;--shadow-card:6px 6px 0 var(--coral);--photo-border:2.5px;--gutter:24px}}

@font-face {
  font-family: "Surf Slang";
  src: url(/fonts/SurfSlang.woff2) format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Fineday One";
  src: url(/fonts/Fineday-StyleOne.woff2) format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Averia Serif Libre";
  src: url(/fonts/AveriaSerifLibre-Regular.woff2) format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Averia Serif Libre";
  src: url(/fonts/AveriaSerifLibre-Bold.woff2) format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Averia Serif Libre";
  src: url(/fonts/AveriaSerifLibre-Italic.woff2) format("woff2");
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Averia Serif Libre";
  src: url(/fonts/AveriaSerifLibre-BoldItalic.woff2) format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
* {
  box-sizing: border-box;
}
html {
  background: var(--cream);
  color: var(--ink);
}
body {
  margin: 0;
  font-family: var(--font-body), serif;
  font-size: 20px;
  line-height: 1.65;
}
h1,
h2,
h3,
p,
figure,
blockquote {
  margin: 0;
}
a {
  color: var(--ink);
}
button {
  font: inherit;
}
img {
  display: block;
  max-width: 100%;
  object-fit: cover;
  object-position: center;
}
picture {
  display: block;
  min-width: 0;
}
picture img {
  width: 100%;
  height: 100%;
  border: var(--photo-border) solid var(--peri);
  border-radius: 8px;
}
.peri picture img {
  border-color: var(--cream);
}
.logo {
  object-fit: contain;
}
.peri {
  background: var(--peri);
}
.container {
  width: calc(100% - 48px);
  max-width: 1200px;
  margin-inline: auto;
}
.display {
  font-family: var(--font-display), sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--coral);
  line-height: 0.9;
  font-size: 80px;
}
h2.display {
  font-size: 80px;
}
.nav {
  height: 101px;
  padding: 22px 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav .logo {
  width: 58px;
  height: 57px;
}
.nav nav {
  display: flex;
  gap: 36px;
  align-items: center;
  font-size: 17px;
}
.nav nav > a:not(.button) {
  text-decoration: none;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 16px 30px;
  border: var(--outline);
  border-radius: 999px;
  box-shadow: var(--shadow-btn);
  background: var(--peri);
  color: var(--ink);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
  text-decoration: none;
  transition:
    transform 120ms ease-out,
    box-shadow 120ms ease-out;
}
.button.small {
  font-size: 16px;
  min-height: 47px;
  padding: 12px 22px;
}
.peri .button {
  background: var(--cream);
}
.button:hover {
  transform: translate(-1px, -1px);
  box-shadow: 6px 6px 0 var(--coral);
}
.button:active {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 var(--coral);
}
:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}
.button.disabled {
  background: transparent;
  box-shadow: none;
  border-style: dashed;
  font-style: italic;
  cursor: default;
}
.button.secondary {
  background: transparent;
  box-shadow: none;
}
.skip {
  position: absolute;
  top: 0;
  left: 16px;
  transform: translateY(-150%);
  background: var(--cream);
  z-index: 20;
  padding: 12px;
}
.skip:focus {
  transform: none;
}
.hero {
  overflow: hidden;
  padding-bottom: 64px;
}
.hero-stack {
  max-width: 900px;
  margin: 48px auto;
  padding-top: 28px;
  text-align: center;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 20px;
}
.eyebrow {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2;
}
.hero h1 {
  font-size: 100px;
  line-height: 0.86;
}
.subhead {
  font-size: 24px;
  line-height: 1.5;
}
.hero-button {
  font-size: 21px;
  padding: 22px 44px;
  min-height: 73px;
  margin-top: 10px;
}
.photo-row {
  display: flex;
  gap: 16px;
  width: 1664px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.photo-row picture {
  height: 500px;
  flex-shrink: 0;
}
.photo-row picture:nth-child(1),
.photo-row picture:nth-child(5) {
  width: 220px;
}
.photo-row picture:nth-child(2),
.photo-row picture:nth-child(4) {
  width: 280px;
}
.photo-row picture:nth-child(3) {
  width: 600px;
}
.wave {
  height: 64px;
  overflow: hidden;
  background: var(--peri);
}
.wave svg {
  display: block;
  width: 100%;
  height: 100%;
}
.line {
  position: relative;
}
.line:after {
  content: "";
  position: absolute;
  bottom: 18px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--peri);
}
.peri.line:after {
  background: var(--cream);
}
.mentor {
  padding: 104px 0 140px;
}
.license {
  max-width: 950px;
}
.intro-row {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 96px;
  margin-top: 56px;
}
.intro-row > p {
  font-size: 24px;
  line-height: 1.5;
}
.you-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.you-list li {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 22px 0;
  min-height: 110px;
}
.you-list svg {
  width: 48px;
  height: 48px;
  flex: none;
}
.you-list p {
  font-size: 21px;
  line-height: 1.55;
}
.micro-bold {
  font-size: 24px;
  font-weight: 700;
  font-style: italic;
  line-height: 1.4;
  margin-top: 28px;
}
.problem {
  margin-top: 150px;
}
.problem > h2 {
  font-size: 172px;
  text-align: center;
  line-height: 0.89;
}
.problem > h3 {
  font-size: 44px;
  line-height: 1.25;
  text-align: center;
  max-width: 860px;
  margin: 28px auto;
}
.problem-row {
  max-width: 1128px;
  display: grid;
  grid-template-columns: 600px 440px;
  gap: 88px;
  align-items: center;
  margin: 72px auto 0;
}
.problem-row p + p {
  margin-top: 22px;
}
.arch {
  height: 580px;
}
.arch img {
  border-radius: 50% 50% 8px 8px;
}
.numbers {
  padding: 96px 0 120px;
  text-align: center;
}
.numbers h2 {
  font-size: 520px;
  line-height: 0.81;
}
.stat {
  font-variant-numeric: tabular-nums;
  display: inline-block;
}
.support {
  font-size: 26px;
  line-height: 1.45;
  max-width: 720px;
  margin: 24px auto;
}
.stats {
  display: flex;
  justify-content: space-between;
  max-width: 1060px;
  margin: 72px auto 0;
  text-align: left;
  gap: 20px;
}
.stats > div {
  width: 340px;
  padding: 0 28px 0 36px;
}
.stats .display {
  font-size: 148px;
  line-height: 0.84;
  margin-bottom: 12px;
}
.stats p {
  font-size: 18px;
  line-height: 1.5;
}
.old {
  padding: 112px 0 140px;
  position: relative;
}
.old-row {
  display: grid;
  grid-template-columns: 664px 440px;
  gap: 96px;
  align-items: center;
}
.old h2 {
  font-size: 78px;
  line-height: 0.9;
}
.body {
  margin-top: 36px;
  font-size: 21px;
  line-height: 1.65;
}
.body p + p {
  margin-top: 24px;
}
figure img {
  height: 100%;
}
figure picture {
  height: 550px;
}
figcaption {
  font-size: 12px;
  font-style: italic;
  line-height: 1.4;
  margin-top: 10px;
}
.script {
  font-family: var(--font-script);
  font-size: 64px;
  line-height: 1.25;
  color: var(--coral);
  text-align: center;
  margin-top: 72px;
}
.contrail {
  position: absolute;
  bottom: 4px;
  width: 100%;
  height: 80px;
}
.contrail > svg {
  display: block;
  width: 100%;
  height: 100%;
}
.mobile {
  display: none !important;
}
.flip {
  padding: 104px 0 128px;
}
.flip-grid {
  display: grid;
  grid-template-columns: 500px 604px;
  gap: 40px 96px;
  align-items: start;
}
.flip-photo {
  grid-column: 1;
  grid-row: 1;
}
.flip-photo picture {
  height: 390px;
}
.flip-heading {
  grid-column: 2;
  grid-row: 1 / span 2;
}
.flip h2 {
  font-size: 90px;
  line-height: 0.92;
}
.lede {
  font-size: 26px;
  line-height: 1.5;
  margin-top: 32px;
}
.pull {
  font-size: 40px;
  line-height: 1.25;
  font-weight: 700;
  margin-top: 32px;
}
.proof {
  border-radius: 24px;
  padding: 40px 48px 36px;
  background: var(--peri);
  font-size: 21px;
  line-height: 1.6;
}
.flip .proof {
  grid-column: 1;
  grid-row: 2;
}
.source {
  font-size: 14px;
  font-style: italic;
  line-height: 1.5;
}
.proof .source {
  margin-top: 18px;
  padding-top: 14px;
}
.closing {
  grid-column: 2;
  grid-row: 2;
  font-size: 26px;
  line-height: 1.45;
  font-weight: 700;
  padding-top: 156px;
  pointer-events: none;
}
.new {
  padding: 112px 0 120px;
}
.new h2 {
  text-align: center;
}
.new h2 .display {
  display: block;
  font-size: 128px;
}
.explain {
  display: block;
  font-size: 36px;
  line-height: 1.3;
  max-width: 860px;
  margin: 24px auto 0;
}
.pill {
  width: 1100px;
  max-width: 100%;
  height: 560px;
  margin: 56px auto;
}
.pill img {
  border-radius: 999px;
}
.new-row {
  display: grid;
  grid-template-columns: 680px 448px;
  gap: 72px;
  align-items: center;
}
.from-to {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 26px;
  line-height: 1.4;
}
.from-to li {
  padding: 24px 0;
}
.from-to em {
  font-weight: 700;
  color: var(--coral);
}
.new .proof {
  background: var(--cream);
  padding: 32px 36px;
  font-size: 22px;
  line-height: 1.5;
}
.bold {
  font-weight: 700;
}
.new .source {
  font-size: 15px;
  margin-top: 10px;
  padding-top: 0;
}
.quote {
  padding: 160px 0;
  position: relative;
}
.quote-row {
  display: grid;
  grid-template-columns: 624px 480px;
  gap: 96px;
  align-items: center;
}
blockquote p {
  font-size: 48px;
  line-height: 1.22;
  color: var(--coral);
  font-weight: 700;
}
.quote-mark {
  display: none;
}
.quote figure picture {
  height: 380px;
}
.offers {
  padding: 140px 0 160px;
}
.offers > div > h2 {
  font-size: 104px;
}
.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px;
  margin-top: 64px;
}
.card {
  background: var(--cream);
  border: var(--outline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.card-image {
  height: 240px;
  position: relative;
  border-bottom: 2px solid var(--coral);
}
.card-image picture {
  height: 100%;
}
.card-image img {
  border: 0;
  border-radius: 0;
}
.badge {
  position: absolute;
  top: 18px;
  left: 18px;
  border: var(--outline);
  border-radius: 999px;
  background: var(--cream);
  font-weight: 700;
  font-style: italic;
  font-size: 14px;
  line-height: 1.2;
  padding: 6px 14px;
}
.card-body {
  padding: 28px 26px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
  min-height: 321px;
}
.card h3 {
  font-size: 28px;
  line-height: 1.25;
  color: var(--coral);
}
.card-body p {
  font-size: 19px;
  line-height: 1.55;
}
.card-body .button {
  align-self: start;
  margin-top: auto;
}
.card .button {
  background: var(--peri);
}
.card .disabled {
  background: transparent;
}
.map {
  position: relative;
  width: 100%;
  height: 100%;
}
.map > svg {
  width: 100%;
  height: 100%;
}
.pin {
  position: absolute;
  width: 26px;
  height: 34px;
}
.pin svg {
  width: 100%;
  height: 100%;
}
.newsletter {
  background: var(--cream);
  border: var(--outline);
  box-shadow: var(--shadow-card);
  border-radius: 24px;
  padding: 56px 64px 60px;
  display: grid;
  grid-template-columns: 528px 460px;
  gap: 80px;
  margin-top: 64px;
}
.newsletter .bold {
  font-size: 22px;
  line-height: 1.25;
}
.newsletter h3 {
  font-size: 82px;
  line-height: 0.9;
  margin: 10px 0 24px;
}
.newsletter p:not(.bold):not(.tldr) {
  font-size: 19px;
  line-height: 1.55;
}
.newsletter .button {
  margin-top: 32px;
  padding: 18px 34px;
  font-size: 20px;
  background: var(--peri);
}
.tldr {
  color: var(--coral);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.25;
  margin: 6px 0 14px;
}
.newsletter ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 17px;
  line-height: 1.5;
}
.newsletter li {
  position: relative;
  padding-left: 21px;
  margin-top: 14px;
}
.newsletter li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 7px;
  height: 7px;
  background: var(--coral);
  border-radius: 50%;
}
.faq {
  padding: 150px 0 140px;
}
.faq-row {
  display: grid;
  grid-template-columns: 152px 1fr;
  gap: 96px;
}
.faq h2 {
  font-size: 148px;
  line-height: 0.82;
}
.faq-list {
  border-top: 1.5px solid var(--coral);
}
.faq-item {
  border-bottom: 1.5px solid var(--coral);
  padding: 28px 0;
}
.faq h3 button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  color: var(--coral);
  border: 0;
  background: none;
  width: 100%;
  padding: 0;
  min-height: 40px;
  cursor: pointer;
  text-align: left;
  font-size: 24px;
  line-height: 1.35;
  font-weight: 700;
}
.toggle {
  width: 40px;
  height: 40px;
  flex: none;
  border: 2px solid var(--coral);
  border-radius: 50%;
  position: relative;
}
.toggle:before,
.toggle:after {
  content: "";
  position: absolute;
  left: 11px;
  top: 17px;
  width: 14px;
  height: 3px;
  background: var(--coral);
}
.toggle:after {
  transform: rotate(90deg);
}
[aria-expanded="true"] .toggle {
  background: var(--coral);
}
[aria-expanded="true"] .toggle:before {
  background: var(--cream);
}
[aria-expanded="true"] .toggle:after {
  display: none;
}
.answer {
  margin-top: 14px;
  font-size: 19px;
  line-height: 1.6;
}
.answer.collapsed {
  display: none;
}
.answer[hidden="until-found"] {
  display: block;
  content-visibility: hidden;
}
.final {
  padding: 120px 0;
}
.final-row {
  display: flex;
  align-items: center;
  gap: 80px;
}
.final .logo {
  width: 280px;
  height: 273px;
  flex: none;
}
.final h2 {
  font-size: 88px;
}
.final p:not(.source) {
  font-size: 24px;
  line-height: 1.5;
  margin-top: 28px;
}
.buttons {
  display: flex;
  gap: 20px;
  margin-top: 36px;
}
.buttons .button {
  font-size: 20px;
  padding: 18px 34px;
  min-height: 64px;
}
.final .source {
  font-size: 15px;
  margin-top: 28px;
}
.footer {
  padding: 44px 56px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  line-height: 1.2;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
}
.footer .logo {
  width: 44px;
  height: 43px;
}
.footer nav {
  display: flex;
  gap: 28px;
  font-size: 15px;
}
.footer nav a {
  text-decoration: none;
}
.listen-hero {
  padding-bottom: 130px;
}
.listen-row {
  display: grid;
  grid-template-columns: 584px 520px;
  gap: 96px;
  align-items: center;
  margin-top: 64px;
}
.listen-text {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.listen .eyebrow {
  font-size: 30px;
  line-height: 1.25;
}
.listen h1 {
  font-size: 118px;
  line-height: 0.86;
}
.listen-text > p:not(.eyebrow):not(.source) {
  font-size: 21px;
  line-height: 1.55;
}
.platforms {
  display: grid;
  grid-template-columns: 250px 250px;
  gap: 18px;
  padding-top: 8px;
}
.platforms .button {
  font-size: 20px;
  min-height: 64px;
  padding: 18px 32px;
}
.listen .source {
  font-size: 15px;
  line-height: 1.45;
}
.back {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}
.listen-row > picture {
  height: 620px;
}
.links-column {
  max-width: 480px;
  margin: 0 auto;
  padding: 88px 0 56px;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.links-column > .logo {
  width: 168px;
  height: 165px;
}
.links h1 {
  font-size: 99px;
  line-height: 0.81;
  white-space: nowrap;
  margin-top: 28px;
}
.one-liner {
  font-size: 20px;
  line-height: 1.5;
  font-style: italic;
  margin-top: 14px;
}
.link-buttons {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  margin-top: 36px;
}
.links .button {
  width: 100%;
  min-height: 62px;
  font-size: 18px;
  padding: 18px 32px;
  background: var(--cream);
}
.links .button.primary {
  background: var(--peri);
  box-shadow: var(--shadow-btn-primary-links);
}
.links-column > picture {
  width: 100%;
  height: 280px;
  margin-top: 44px;
}
.links-column > picture img {
  border: 4px solid var(--peri);
  border-radius: 16px;
}
.links-column footer {
  font-size: 14px;
  line-height: 1.5;
  margin-top: 40px;
}
@media (max-width: 1250px) and (min-width: 900px) {
  .container {
    width: calc(100% - 96px);
  }
  .intro-row,
  .old-row,
  .problem-row,
  .new-row,
  .quote-row,
  .listen-row,
  .flip-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 48px;
  }
  .newsletter {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    padding: 48px;
  }
  .display,
  h2.display {
    font-size: clamp(60px, 6vw, 80px);
  }
  .problem > h2 {
    font-size: 12vw;
  }
  .new h2 .display {
    font-size: 9vw;
  }
  .offers > div > h2 {
    font-size: 7vw;
  }
  .listen h1 {
    font-size: 8vw;
  }
  .platforms {
    grid-template-columns: 1fr 1fr;
  }
  .platforms .button {
    padding: 18px;
  }
  .closing {
    padding-top: 220px;
  }
}
@media (max-width: 899px) {
  body {
    font-size: 17px;
  }
  .desktop {
    display: none !important;
  }
  .mobile {
    display: block !important;
  }
  .display,
  h2.display {
    font-size: 52px;
  }
  .container {
    width: calc(100% - 48px);
  }
  .nav {
    height: 83px;
    padding: 18px 48px;
  }
  .nav .logo {
    width: 48px;
    height: 47px;
  }
  .nav nav {
    gap: 0;
  }
  .nav nav > a:not(.button) {
    display: none;
  }
  .button.small {
    font-size: 15px;
    padding: 11px 18px;
    min-height: 44px;
  }
  .hero {
    padding-bottom: 40px;
  }
  .hero-stack {
    width: calc(100% - 48px);
    margin: 32px auto;
    padding-top: 24px;
    gap: 18px;
  }
  .hero .eyebrow {
    font-size: 26px;
    line-height: 1.2;
  }
  .hero h1 {
    font-size: 57px;
    line-height: 0.89;
    max-width: 290px;
  }
  .hero .subhead {
    font-size: 19px;
    line-height: 1.5;
  }
  .hero-button {
    font-size: 18px;
    padding: 22px 44px;
    min-height: 70px;
    margin-top: 10px;
  }
  .photo-row {
    width: 510px;
    gap: 10px;
  }
  .photo-row picture {
    height: 320px;
  }
  .photo-row picture:first-child,
  .photo-row picture:last-child {
    display: none;
  }
  .photo-row picture:nth-child(2),
  .photo-row picture:nth-child(4) {
    width: 120px;
  }
  .photo-row picture:nth-child(3) {
    width: 250px;
  }
  .photo-row img {
    border-radius: 6px;
  }
  .wave {
    height: 40px;
  }
  .wave svg {
    width: 1440px;
    max-width: none;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
  .line:after {
    bottom: 12px;
  }
  .mentor {
    padding: 57px 0 77px;
  }
  .license {
    font-size: 51px !important;
    line-height: 0.91;
  }
  .intro-row {
    display: block;
    margin-top: 36px;
  }
  .intro-row > p {
    font-size: 19px;
    line-height: 1.5;
  }
  .you-list {
    margin-top: 36px;
  }
  .you-list li {
    padding: 22px 0;
    gap: 16px;
    min-height: 0;
  }
  .you-list svg {
    width: 40px;
    height: 40px;
  }
  .you-list p {
    font-size: 18px;
    line-height: 1.55;
  }
  .micro-bold {
    font-size: 19px;
    line-height: 1.4;
    margin-top: 36px;
  }
  .problem {
    margin-top: 72px;
  }
  .problem > h2 {
    font-size: 76px;
    line-height: 0.9;
    max-width: 310px;
    margin: auto;
  }
  .problem > h3 {
    font-size: 26px;
    line-height: 1.25;
    margin: 28px auto;
  }
  .problem-row {
    display: flex;
    flex-direction: column-reverse;
    gap: 32px;
    margin-top: 48px;
  }
  .problem-row p {
    font-size: 17px;
    line-height: 1.65;
  }
  .arch {
    width: 100%;
    height: 430px;
  }
  .numbers {
    padding: 53px 0 66px;
  }
  .numbers h2 {
    font-size: 220px;
    line-height: 0.86;
  }
  .support {
    font-size: 19px;
    line-height: 1.45;
    margin: 14px auto;
  }
  .stats {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 62px auto 0;
    text-align: left;
  }
  .stats > div {
    width: 100%;
    padding: 0 16px 28px 24px;
  }
  .stats > div:last-child {
    padding-bottom: 0;
  }
  .stats .display {
    font-size: 90px;
    line-height: 0.85;
    margin-bottom: 12px;
  }
  .stats p {
    font-size: 17px;
    line-height: 1.5;
  }
  .old {
    padding: 62px 0 77px;
  }
  .old-row {
    display: flex;
    flex-direction: column;
    gap: 29px;
    align-items: stretch;
  }
  .old h2 {
    font-size: 43px;
    line-height: 0.91;
  }
  .body {
    margin-top: 29px;
    font-size: 18px;
    line-height: 1.65;
  }
  .old figure picture {
    height: 380px;
  }
  .old figcaption {
    margin-top: 8px;
  }
  .script {
    font-size: 40px;
    line-height: 1.05;
    margin-top: 29px;
  }
  .contrail {
    height: 70px;
    bottom: 4px;
  }
  .flip {
    padding: 57px 0 70px;
  }
  .flip-grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .flip-photo {
    width: 100%;
  }
  .flip-photo picture {
    height: 270px;
  }
  .flip-heading {
    display: contents;
  }
  .flip h2 {
    font-size: 63px;
    line-height: 0.91;
    margin-top: 12px;
  }
  .lede {
    font-size: 21px;
    line-height: 1.5;
    margin-top: 0;
  }
  .pull {
    font-size: 28px;
    line-height: 1.25;
    margin-top: 0;
  }
  .proof {
    padding: 40px 28px 36px;
    font-size: 18px;
    line-height: 1.6;
  }
  .flip .proof {
    order: 0;
  }
  .closing {
    padding: 0;
    font-size: 21px;
    line-height: 1.45;
  }
  .new {
    padding: 62px 0 66px;
  }
  .new h2 .display {
    font-size: 60px;
    line-height: 0.9;
    max-width: 310px;
    margin: auto;
  }
  .explain {
    font-size: 24px;
    line-height: 1.3;
    margin-top: 18px;
  }
  .pill {
    height: 300px;
    margin: 34px auto;
  }
  .new-row {
    display: flex;
    flex-direction: column;
    gap: 34px;
    align-items: stretch;
  }
  .from-to {
    font-size: 19px;
    line-height: 1.4;
  }
  .new .proof {
    padding: 22px;
    font-size: 19px;
    line-height: 1.5;
  }
  .new .source {
    font-size: 13px;
  }
  .quote {
    padding: 80px 0;
  }
  .quote-row {
    display: block;
  }
  .quote-mark {
    display: block;
    color: var(--coral);
    font-weight: 700;
    font-size: 120px;
    line-height: 0.6;
    margin-bottom: -36px;
  }
  .quote blockquote p {
    font-size: 30px;
    line-height: 1.22;
  }
  .quote figure {
    margin-top: 36px;
  }
  .quote figure picture {
    height: 270px;
  }
  .offers {
    padding: 72px 0 88px;
  }
  .offers > div > h2 {
    font-size: 61px;
    line-height: 0.9;
    max-width: 290px;
  }
  .cards {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-top: 36px;
    padding-right: 8px;
  }
  .card-image {
    height: 214px;
  }
  .card-body {
    padding: 24px 22px 28px;
    min-height: 0;
    gap: 14px;
  }
  .card h3 {
    font-size: 25px;
    line-height: 1.25;
  }
  .card p {
    font-size: 17px;
    line-height: 1.55;
  }
  .card .button {
    margin-top: 8px;
    font-size: 17px;
    min-height: 54px;
    padding: 16px 26px;
  }
  .newsletter {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-top: 36px;
    padding: 32px 24px 36px;
  }
  .newsletter .bold {
    font-size: 18px;
    line-height: 1.25;
  }
  .newsletter h3 {
    font-size: 44px;
    line-height: 0.9;
    margin: 8px 0 18px;
  }
  .newsletter p:not(.bold):not(.tldr) {
    font-size: 17px;
    line-height: 1.55;
  }
  .newsletter .button {
    font-size: 18px;
    padding: 16px 28px;
    margin-top: 26px;
    min-height: 58px;
  }
  .tldr {
    font-size: 19px;
    margin: 0 0 14px;
  }
  .newsletter ul {
    font-size: 15px;
    line-height: 1.5;
  }
  .faq {
    padding: 72px 0 77px;
  }
  .faq-row {
    display: block;
  }
  .faq h2 {
    font-size: 78px;
    line-height: 0.8;
    margin-bottom: 40px;
  }
  .faq-item {
    padding: 24px 0;
  }
  .faq h3 button {
    font-size: 20px;
    line-height: 1.35;
    gap: 18px;
    min-height: 36px;
  }
  .toggle {
    width: 36px;
    height: 36px;
  }
  .toggle:before,
  .toggle:after {
    left: 9px;
    top: 15px;
  }
  .answer {
    font-size: 17px;
    line-height: 1.6;
  }
  .final {
    padding: 48px 0 60px;
  }
  .final-row {
    flex-direction: column;
    gap: 19px;
    align-items: center;
    text-align: center;
  }
  .final .logo {
    width: 180px;
    height: 175px;
  }
  .final h2 {
    font-size: 64px;
    line-height: 0.9;
    max-width: 320px;
    margin: auto;
  }
  .final p:not(.source) {
    font-size: 19px;
    line-height: 1.5;
    margin-top: 19px;
  }
  .buttons {
    flex-direction: column;
    gap: 16px;
    margin-top: 27px;
  }
  .buttons .button {
    font-size: 18px;
    min-height: 58px;
    padding: 16px 28px;
  }
  .final .source {
    font-size: 14px;
    margin-top: 19px;
  }
  .footer {
    padding: 36px 24px 40px;
    flex-direction: column;
    gap: 18px;
  }
  .footer nav {
    gap: 28px;
  }
  .listen .nav {
    width: 100%;
    padding-inline: 48px;
  }
  .listen-hero {
    padding-bottom: 64px;
  }
  .listen-row {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 24px;
    align-items: stretch;
  }
  .listen-text {
    gap: 18px;
  }
  .listen .eyebrow {
    font-size: 22px;
    line-height: 1.25;
  }
  .listen h1 {
    font-size: 57px;
    line-height: 0.9;
    max-width: 310px;
  }
  .listen-text > p:not(.eyebrow):not(.source) {
    font-size: 18px;
    line-height: 1.55;
  }
  .platforms {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 8px;
  }
  .platforms .button {
    font-size: 18px;
    min-height: 62px;
    padding: 18px 32px;
  }
  .listen .source {
    font-size: 15px;
    line-height: 1.45;
  }
  .back {
    font-size: 16px;
    line-height: 1.3;
  }
  .listen-row > picture {
    height: 300px;
  }
  .links-column {
    max-width: none;
    margin: 0 24px;
    padding: 48px 0 32px;
  }
  .links-column > .logo {
    width: 128px;
    height: 125px;
  }
  .links h1 {
    font-size: 59px;
    line-height: 0.8;
    margin-top: 20px;
  }
  .one-liner {
    font-size: 18px;
    margin-top: 10px;
  }
  .link-buttons {
    gap: 14px;
    margin-top: 28px;
  }
  .links-column > picture {
    height: 210px;
    margin-top: 36px;
  }
  .links-column footer {
    margin-top: 32px;
  }
}
/* Final states are the default; JavaScript opts into motion. */
@media (prefers-reduced-motion: no-preference) {
  [data-motion="quote"] blockquote p {
    transition:
      opacity 0.9s 0.2s ease-out,
      transform 0.9s 0.2s ease-out;
  }
  [data-motion="quote"] figure {
    transition: opacity 0.8s 0.45s ease-out;
  }
  .quote-mark {
    transition: opacity 0.6s ease-out;
  }
  .pre[data-motion="quote"] blockquote p {
    opacity: 0;
    transform: translateY(16px);
  }
  .pre[data-motion="quote"] figure,
  .pre .quote-mark {
    opacity: 0;
  }
  [data-motion="pins"] .pin {
    transition:
      transform 0.5s calc(var(--i) * 150ms) cubic-bezier(0.34, 1.56, 0.64, 1),
      opacity 0.2s calc(var(--i) * 150ms);
  }
  .pre[data-motion="pins"] .pin {
    transform: translateY(-28px);
    opacity: 0;
  }
  .contrail circle {
    transition: opacity 0.18s calc(var(--i) * 36ms) cubic-bezier(0, 0, 0.58, 1);
  }
  .contrail.pre circle {
    opacity: 0;
  }
  .plane {
    transition:
      opacity 0.55s 1s ease-out,
      translate 0.55s 1s ease-out;
  }
  .pre .plane {
    opacity: 0;
    translate: -28px 0;
  }
  .stat {
    transition:
      opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
      translate 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .pre .stat {
    opacity: 0;
    translate: 0 16px;
  }
  .pre h2 .stat {
    translate: 0 24px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    transition: none !important;
    animation: none !important;
  }
}
/* Outline dimensions in the dumps mapped to the supplied font's advances. */
@media (min-width: 900px) {
  .hero h1 {
    font-size: clamp(56px, calc(41.14px + 3.81vw), 96px);
    line-height: 0.88;
  }
  .license {
    font-size: 96px !important;
    line-height: 0.90625;
  }
  .problem > h2 {
    font-size: 168px;
    line-height: 0.905;
  }
  .numbers h2 {
    font-size: 420px;
    line-height: 0.91;
  }
  .stats .display {
    font-size: 120px;
    line-height: 0.908;
  }
  .old h2 {
    font-size: 76px;
    line-height: 0.904;
  }
  .flip h2 {
    font-size: 92px;
    line-height: 0.906;
  }
  .new h2 .display {
    font-size: 128px;
    line-height: 0.906;
  }
  .offers > div > h2 {
    font-size: 135px;
    line-height: 0.7;
  }
  .newsletter h3 {
    font-size: 80px;
    line-height: 0.906;
  }
  .faq h2 {
    font-size: 120px;
    line-height: 0.908;
  }
  .final h2 {
    font-size: 84px;
    line-height: 0.905;
  }
  .listen h1 {
    font-size: 112px;
    line-height: 0.905;
    width: calc(100% + 26px);
    max-width: 610px;
    white-space: nowrap;
  }
  .links h1 {
    font-size: 88px;
    line-height: 0.909;
  }
}
@media (max-width: 899px) {
  .hero h1 {
    font-size: 56px;
    line-height: 0.897;
    max-width: 290px;
  }
  .license {
    font-size: 48px !important;
    line-height: 0.903;
  }
  .problem > h2 {
    font-size: 76px;
    line-height: 0.904;
  }
  .numbers h2 {
    font-size: 180px;
    line-height: 0.911;
  }
  .stats .display {
    font-size: 72px;
    line-height: 0.917;
  }
  .old h2 {
    font-size: 40px;
    line-height: 0.933;
  }
  .flip h2 {
    font-size: 64px;
    line-height: 0.902;
  }
  .new h2 .display {
    font-size: 58px;
    line-height: 0.902;
  }
  .offers > div > h2 {
    font-size: 66px;
    line-height: 0.765;
    max-width: 280px;
  }
  .newsletter h3 {
    font-size: 43px;
    line-height: 0.907;
  }
  .faq h2 {
    font-size: 64px;
    line-height: 0.906;
  }
  .final .logo {
    width: 220px;
    height: 214px;
  }
  .final h2 {
    font-size: 50px;
    line-height: 0.905;
  }
  .final .source {
    font-size: 15px;
  }
  .listen h1 {
    font-size: 54px;
    line-height: 0.901;
    max-width: 342px;
  }
  .links h1 {
    font-size: 52px;
    line-height: 0.904;
  }
  .closing {
    font-size: 19px;
  }
}
@media (min-width: 900px) and (max-width: 1250px) {
  .license {
    font-size: 7vw !important;
  }
  .problem > h2 {
    font-size: 12vw;
  }
  .old h2 {
    font-size: 5vw;
  }
  .flip h2 {
    font-size: 6vw;
  }
  .new h2 .display {
    font-size: 9vw;
  }
  .offers > div > h2 {
    font-size: 9vw;
  }
  .newsletter h3 {
    font-size: 5vw;
  }
  .final h2 {
    font-size: 6vw;
  }
  .listen h1 {
    font-size: 8vw;
  }
}
.problem > h3 {
  margin-bottom: 0;
}
.problem-row {
  margin-top: 100px;
}
.support {
  margin-bottom: 0;
}
@media (max-width: 899px) {
  .problem-row {
    margin-top: 76px;
  }
  .stats > div,
  .stats > div:last-child {
    padding: 24px 0;
  }
  .flip-photo picture {
    height: 262px;
  }
  .flip h2 {
    margin-top: 36px;
  }
  .lede {
    font-size: 19px;
  }
  .pull {
    font-size: 26px;
  }
  .explain {
    font-size: 22px;
    max-width: 332px;
  }
  .pill {
    height: 200px;
  }
  .new .proof {
    font-size: 18px;
  }
  .new .source {
    font-size: 15px;
  }
  .quote-mark {
    line-height: 1;
  }
  .quote blockquote p {
    line-height: 1.25;
  }
  .quote figure {
    margin-top: 0;
  }
  figcaption {
    margin-top: 8px;
  }
  .card-body {
    padding: 22px 20px 26px;
    gap: 12px;
  }
  .card h3 {
    font-size: 24px;
  }
  .card .button {
    padding: 14px 26px;
    min-height: 52px;
    margin-top: 16px;
  }
  .tldr {
    font-size: 20px;
  }
  .newsletter ul {
    font-size: 16px;
  }
  .newsletter .button {
    width: 100%;
  }
}
.wave > div {
  height: 100%;
}
.wave .mobile svg {
  width: 100%;
  left: 0;
  transform: none;
}
.not-found .links-column > h1 {
  margin: 0;
}
.not-found h1 .logo {
  width: 168px;
  height: 165px;
}
.not-found .button {
  margin-top: 36px;
}
@media (max-width: 899px) {
  .not-found h1 .logo {
    width: 128px;
    height: 125px;
  }
}

/* ==========================================================================
   Polish pass 2026-10-26: values measured against Figma 55:2 / 55:282.
   ========================================================================== */

/* Type sizes re-measured against the outlined headlines (glyph bounding boxes). */
@media (min-width: 900px) {
  /* 55:15: 750px wide at 1440 (was 768px). */
  .hero h1 {
    font-size: clamp(56px, calc(41.98px + 3.595vw), 93.75px);
    line-height: 0.9;
  }
  /* 62:3 "Start with the podcast.": 917px wide, 95px frame (was 1192px wide). */
  .offers > div > h2 {
    font-size: 104px;
    line-height: 0.913;
  }
  /* 55:102 Fineday line: 993px wide at 1440 (was 1095px), 80px line box. */
  .script {
    font-size: 58px;
    line-height: 1.38;
  }
  /* Nav anchors 55:8-55:10: 17px / 120%. Padding keeps a 44px tap target. */
  .nav nav > a:not(.button) {
    line-height: 1.2;
    padding-block: 12px;
  }
}
@media (min-width: 900px) and (max-width: 1250px) {
  .offers > div > h2 {
    font-size: 7.2vw;
  }
  /* Keep the Fineday line on one line between breakpoints (it orphaned "recruitment."). */
  .script {
    font-size: min(58px, 4.6vw);
  }
}
@media (max-width: 899px) {
  /* 65:9: two lines, 260px wide (was three lines). */
  .offers > div > h2 {
    font-size: 56px;
    line-height: 0.9;
  }
  /* 55:381: two lines, 310px wide (was three lines at 40px). */
  .script {
    font-size: 32px;
    line-height: 1.3;
  }
  /* 55:457 etc: FAQ questions 19px / 135%. */
  .faq h3 button {
    font-size: 19px;
    line-height: 1.35;
  }
  /* 65:18 "Live now." badge 13px. */
  .badge {
    font-size: 13px;
  }
  /* 55:455 etc: FAQ items 28px top and bottom, same as desktop. */
  .faq-item {
    padding: 28px 0;
  }
}
/* 77:39: micro line 15px / 140%. */
.final .source {
  line-height: 1.4;
}

/* FAQ: a collapsed answer kept its 14px top margin, so closed items were
   111px instead of 98px (55:182). */
.answer[hidden],
.answer.collapsed {
  margin-top: 0;
}

/* The closing paragraph could not be selected or have its text copied. */
.closing {
  pointer-events: auto;
}

/* States ------------------------------------------------------------------ */
/* "Coming soon." is aria-disabled: it must not lift or grow a shadow on hover/press. */
.button.disabled:hover,
.button.disabled:active {
  transform: none;
  box-shadow: none;
}
/* Press is quicker than hover (motion plan 16:160: 120ms in, 80ms on press). */
.button:active {
  transition-duration: 80ms;
}
/* Nav and footer text links had no hover state; underline like the other text links. */
.nav nav > a:not(.button):hover,
.footer nav a:hover,
.brand:hover span {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.faq h3 button:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1.5px;
}
/* FAQ toggle: plus turns into minus and the circle fills (motion plan: 160ms). */
.toggle {
  transition: background-color 160ms var(--ease-out);
}
.toggle:before,
.toggle:after {
  transition:
    transform 160ms var(--ease-out),
    background-color 160ms var(--ease-out);
}
[aria-expanded="true"] .toggle:after {
  display: block;
  transform: rotate(0deg);
  background: var(--cream);
}
.answer.opening {
  animation: answer-in 220ms var(--ease-out);
}
@keyframes answer-in {
  from {
    opacity: 0;
  }
}

/* /links and 404 keep their 480px column between 390 and 899px. */
@media (max-width: 899px) {
  .links-column {
    width: calc(100% - 48px);
    max-width: 480px;
    margin-inline: auto;
  }
}

/* Motion, aligned to the Figma keyframes (get_motion_context on 55:2) ------ */
@media (prefers-reduced-motion: no-preference) {
  /* Hero load-in, motion plan 16:160 + keyframes 55:14/55:15/55:18/55:19:
     rise 24px and fade, 0.6s each, 120ms stagger from 150ms, done by 1.11s. */
  .hero-stack > * {
    animation: rise-in 0.6s var(--ease-out) both;
  }
  .hero-stack > :nth-child(1) { animation-delay: 150ms; }
  .hero-stack > :nth-child(2) { animation-delay: 270ms; }
  .hero-stack > :nth-child(3) { animation-delay: 390ms; }
  .hero-stack > :nth-child(4) { animation-delay: 510ms; }
  /* Section headline reveals (16:160): 0.6s, same curve, body 100ms later. */
  [data-motion="head"],
  .follow {
    transition:
      opacity 0.6s var(--ease-out),
      translate 0.6s var(--ease-out);
  }
  .follow {
    transition-delay: 100ms;
  }
  [data-motion="head"].pre,
  .follow.pre {
    opacity: 0;
    translate: 0 24px;
  }
  /* Stats: big 0.7s (55:73), small 0.6s (55:79...), delays set in site.js. */
  .stat {
    transition:
      opacity 0.6s var(--ease-out),
      translate 0.6s var(--ease-out);
  }
  h2 .stat {
    transition-duration: 0.7s;
  }
  /* Quote and photo use the Figma curve (55:142, 61:24), not plain ease-out. */
  [data-motion="quote"] blockquote p {
    transition:
      opacity 0.9s 0.2s var(--ease-out),
      transform 0.9s 0.2s var(--ease-out);
  }
  [data-motion="quote"] figure {
    transition: opacity 0.8s 0.45s var(--ease-out);
  }
  /* Contrail plane 85:135: fades 1.0-1.5s, glides 1.0-1.55s on the Figma curve. */
  .plane {
    transition:
      opacity 0.5s 1s var(--ease-out),
      translate 0.55s 1s var(--ease-out);
  }
  /* Map pins 62:32-62:41: start at 300ms, 150ms stagger, Figma's softer overshoot. */
  [data-motion="pins"] .pin {
    transition:
      transform 0.5s calc(300ms + var(--i) * 150ms) var(--ease-pin),
      opacity 0.2s calc(300ms + var(--i) * 150ms) ease-out;
  }
}
@keyframes rise-in {
  from {
    opacity: 0;
    translate: 0 24px;
  }
}

/* "Back to the homepage" stretched across the whole /listen column (584px hit area and focus ring). */
.back {
  align-self: start;
}

/* Contrast (approved option A, 2026-10-26): coral display text sitting directly on
   periwinkle was 2.20:1. Ink #9A2F0A on periwinkle is 4.51:1. Coral on cream is unchanged;
   cream cards and the Air Mail panel inside periwinkle sections keep their coral. */
.mentor .license,
.mentor .problem > h2,
.old .old-row h2,
.old .script,
.new > .container > h2 .display,
.new .from-to em,
.offers > .container > h2,
.final h2,
.listen-hero h1 {
  color: var(--ink);
}

/* Skip link target: focus lands on <main> (tabindex=-1) so the next Tab starts inside the
   content. No ring on the container itself; it is a programmatic focus target only. */
main[tabindex="-1"]:focus {
  outline: none;
}

/* Touch targets: footer links were 18px tall, the /listen back link 22px. Grow the hit area
   to 44px without moving anything (padding offset by negative margin). */
.footer nav a {
  padding: 13px 7px;
  margin: -13px -7px;
}
.back {
  padding-block: 12px;
  margin-block: -12px;
}
/* FAQ question buttons were 36px tall on one-line questions; footer brand 43px. */
.faq-item h3 button {
  padding-block: 4px;
  margin-block: -4px;
}
.footer .brand {
  padding-block: 1px;
  margin-block: -1px;
}
/* Text-only zoom (200%): a single display word ("Generational") could be wider than the
   column and cause sideways scroll. Break only when a word cannot fit; no change at 100%. */
h1,
h2,
h3,
.display {
  overflow-wrap: break-word;
}

/* Tablet 600–899px: the single-column mobile layout ran 720px+ wide (lines of 100+
   characters, oversized photos). Cap the content column at 600px, centred. Full-bleed
   section backgrounds, waves and the nav/footer are unchanged. */
@media (min-width: 600px) and (max-width: 899px) {
  .container,
  .hero-stack {
    max-width: 600px;
    margin-inline: auto;
  }
}

/* /links intro line is centred in Figma (97:44, 97:16); it now wraps to two lines. */
.one-liner {
  text-align: center;
}

/* 404 with its approved copy, built from the /links page styles (logo, H1, one-liner,
   primary button, text link). The headline is a sentence, so it wraps and centres. */
.not-found .links-column > h1 {
  margin: 28px 0 0;
  white-space: normal;
  text-align: center;
}
.not-found .button {
  margin-top: 0;
}
.not-found .back {
  margin-top: 28px;
  align-self: center;
}
@media (max-width: 899px) {
  .not-found .links-column > h1 {
    margin-top: 20px;
  }
}

/* FAQ heading: "FAQ" set at 120px measures 152.28px, a hair wider than the old fixed 152px
   column, so the heading-wrap rule above broke the Q onto a second line. Keep it on one line
   at every width and let the column size to the word. Same font and size. */
.faq h2 {
  white-space: nowrap;
  overflow-wrap: normal;
}
@media (min-width: 900px) {
  .faq-row {
    grid-template-columns: max-content 1fr;
  }
}

/* 320-368px: "8.5%" at 180px is 320.6px wide, wider than the 272px column at 320, so the page
   scrolled sideways. Scale it to the column only at these narrowest widths (0.561 = 180/320.6);
   it reaches exactly 180px at 369px, so 369px and up are unchanged. */
@media (max-width: 368px) {
  .numbers h2 {
    font-size: min(180px, calc((100vw - 48px) * 0.561));
  }
}
/* Same at 320-344px for "mentorship." (296.5px at 64px): scale to the column (0.2159 = 64/296.5);
   exactly 64px from 345px up. */
@media (max-width: 344px) {
  .flip-heading h2 {
    font-size: min(64px, calc((100vw - 48px) * 0.2159));
  }
}