/* Research-led paid signup page, 2026-07-29. The page keeps one action while
   the shared dialog handles the platform choice. */
.signup-page {
  --signup-ink: #0b2119;
  --signup-ink-soft: #14362a;
  --signup-paper: #f5f0e6;
  --signup-paper-deep: #e9e2d4;
  --signup-cream: #fffaf0;
  --signup-green: #4be895;
  /* Green text on this page has two surfaces. The bright --signup-green is
     the hero's own ink on #0b2119. Everywhere else the green labels sit on
     paper or cream, where #159960 read 3.2:1 to 3.5:1 and failed AA for the
     small bold sizes they use. #087344 is the light-surface green the rest
     of the site already uses (account.css, reddit.css, narrator-previews.css)
     and reads 5.2:1 on paper and 5.7:1 on cream. */
  --signup-green-deep: #087344;
  --signup-line: rgba(14, 39, 29, 0.16);
  background: var(--signup-paper);
}

.signup-page .course-main {
  background:
    radial-gradient(circle at 8% 38%, rgba(75, 232, 149, 0.09), transparent 19%),
    linear-gradient(180deg, var(--signup-paper), #f9f5ec 62%, var(--signup-paper));
}

.signup-page .site-header,
.signup-page .site-header.is-scrolled {
  color: #fffaf0;
  background: rgba(11, 33, 25, 0.94);
  border-bottom-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
}

.signup-page .site-header.is-scrolled {
  box-shadow: 0 18px 44px rgba(2, 13, 9, 0.28);
}

.signup-page .site-header .brand {
  color: #fffaf0;
}

.signup-page .site-header .brand img {
  box-shadow:
    0 12px 28px rgba(75, 232, 149, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.signup-page .signup-header-cta {
  min-height: 44px;
  padding: 0 18px;
  color: #092118;
  background: var(--signup-green);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 13px;
  box-shadow: 0 12px 28px rgba(3, 16, 11, 0.24);
  font-size: 0.9rem;
  font-weight: 800;
  transition:
    transform 160ms var(--ease-out-strong),
    box-shadow 180ms ease,
    background-color 180ms ease,
    color 180ms ease;
}

.signup-page .signup-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fffaf0;
  background: var(--signup-ink);
}

.signup-page .signup-hero::before,
.signup-page .signup-hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.signup-page .signup-hero::before {
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 74% 28%, rgba(75, 232, 149, 0.19), transparent 28%),
    radial-gradient(circle at 7% 12%, rgba(75, 232, 149, 0.1), transparent 25%),
    linear-gradient(113deg, rgba(255, 255, 255, 0.038) 1px, transparent 1px);
  background-size: auto, auto, 72px 72px;
}

.signup-page .signup-hero::after {
  right: -16%;
  bottom: -54%;
  z-index: -1;
  width: min(920px, 76vw);
  aspect-ratio: 1;
  border: 1px solid rgba(75, 232, 149, 0.12);
  border-radius: 50%;
  box-shadow:
    0 0 0 80px rgba(75, 232, 149, 0.025),
    0 0 0 160px rgba(75, 232, 149, 0.018);
}

.signup-page .signup-hero-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(390px, 0.92fr);
  gap: clamp(52px, 7vw, 108px);
  align-items: center;
  min-height: calc(100svh - var(--header-offset, var(--header-height)));
  padding-top: clamp(54px, 6vw, 86px);
  padding-bottom: clamp(62px, 7vw, 96px);
}

.signup-page .signup-hero-copy {
  position: relative;
  z-index: 2;
  max-width: 720px;
}

.signup-page .signup-kicker,
.signup-page .signup-section-kicker {
  color: var(--signup-green-deep);
  font-size: 0.73rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  line-height: 1.45;
  text-transform: uppercase;
}

.signup-page .signup-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  color: var(--signup-green);
}

.signup-page .signup-kicker-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--signup-green);
  box-shadow: 0 0 0 7px rgba(75, 232, 149, 0.1);
}

.signup-page .signup-hero h1 {
  max-width: 11ch;
  color: #fffaf0;
  font-size: clamp(3.8rem, 6.2vw, 6.4rem);
  letter-spacing: -0.035em;
  line-height: 0.91;
}

.signup-page .signup-hero h1 > span {
  display: block;
}

.signup-page .signup-accent {
  color: var(--signup-green);
}

.signup-page .signup-hero-text {
  max-width: 53ch;
  margin-top: 28px;
  color: rgba(255, 250, 240, 0.78);
  font-size: clamp(1.02rem, 1.35vw, 1.17rem);
  line-height: 1.68;
}

.signup-page .signup-hero-action {
  margin-top: 30px;
}

.signup-page .signup-primary-cta {
  min-height: 62px;
  gap: 18px;
  padding: 0 24px 0 26px;
  color: #071d14;
  background: var(--signup-green);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow:
    0 20px 42px rgba(2, 15, 10, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  font-size: 1rem;
  font-weight: 800;
  transition:
    transform 160ms var(--ease-out-strong),
    box-shadow 180ms ease,
    background-color 180ms ease,
    color 180ms ease;
}

.signup-page .signup-cta-arrow {
  display: inline-grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  background: rgba(7, 29, 20, 0.1);
  transition: transform 180ms var(--ease-out-strong);
}

.signup-page .signup-header-cta:active,
.signup-page .signup-primary-cta:active {
  transform: scale(0.97);
}

/* The official badge under the platform picker, so an iPhone reader has a
   one-tap route without opening the chooser. It reuses the shared course badge
   sizing and only needs the gap. */
/* Both store badges share one row, sized by height so Apple's and Google's
   artwork stand at the same height whatever their widths. */
.signup-page .signup-store-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}

.signup-page .signup-store-badges .signup-store-badge-link {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  zoom: 1;
}

.signup-page .signup-store-badges img {
  width: auto;
  height: 52px;
}

.signup-page .signup-access-note {
  max-width: 50ch;
  margin-top: 15px;
  color: rgba(255, 250, 240, 0.58);
  font-size: 0.79rem;
  font-weight: 650;
  line-height: 1.6;
}

/* The Android request in the note opens the Android access form directly, so
   an Android reader has a one-tap route too. It reads as a link in the
   sentence. */
.signup-page .signup-note-action {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.signup-page .signup-product-stage {
  position: relative;
  min-height: 650px;
  animation: signup-stage-arrive 760ms 200ms var(--ease-out-strong) both;
}

.signup-page .signup-product-stage::before {
  content: "";
  position: absolute;
  inset: 12% 2% 7%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(75, 232, 149, 0.2), transparent 66%);
  filter: blur(16px);
}

.signup-page .signup-phone-frame {
  position: absolute;
  top: 50%;
  right: clamp(8px, 4vw, 54px);
  z-index: 1;
  width: min(340px, 78%);
  height: 600px;
  margin: 0;
  overflow: hidden;
  border: 9px solid rgba(255, 255, 255, 0.91);
  border-radius: 48px;
  background: #f8f3e9;
  box-shadow:
    0 42px 100px rgba(1, 12, 8, 0.58),
    0 0 0 1px rgba(255, 255, 255, 0.15),
    0 0 70px rgba(75, 232, 149, 0.13);
  transform: translateY(-50%) rotate(1.2deg);
}

.signup-page .signup-phone-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.signup-page .signup-stage-card {
  position: absolute;
  z-index: 2;
  display: grid;
  gap: 6px;
  padding: 18px 20px;
  border-radius: 18px;
  box-shadow: 0 24px 56px rgba(1, 12, 8, 0.34);
  backdrop-filter: blur(14px);
}

.signup-page .signup-stage-card span {
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}

.signup-page .signup-stage-card strong {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.22rem;
  line-height: 1.16;
}

.signup-page .signup-stage-goal {
  top: 300px;
  left: 0;
  width: min(270px, 58%);
  color: var(--signup-ink);
  background: rgba(255, 250, 240, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.72);
  transform: rotate(-2.2deg);
}

.signup-page .signup-stage-goal span {
  color: var(--signup-green-deep);
}

.signup-page .signup-stage-path {
  right: -10px;
  bottom: 20px;
  width: 164px;
  aspect-ratio: 1;
  place-content: center;
  justify-items: center;
  gap: 9px;
  padding: 22px;
  color: #fffaf0;
  text-align: center;
  background: rgba(15, 53, 40, 0.93);
  border: 1px solid rgba(75, 232, 149, 0.32);
  border-radius: 50%;
  transform: rotate(4deg);
}

.signup-page .signup-stage-path::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(75, 232, 149, 0.2);
  border-radius: inherit;
  pointer-events: none;
}

.signup-page .signup-stage-path strong {
  color: var(--signup-green);
  font-size: 1.55rem;
}

.signup-page .signup-proof-strip {
  color: var(--signup-ink);
  background: var(--signup-green);
  border-bottom: 1px solid rgba(10, 35, 25, 0.12);
}

.signup-page .signup-proof-strip ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 auto;
  padding-top: 28px;
  padding-bottom: 28px;
  list-style: none;
}

.signup-page .signup-proof-strip li {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 0 clamp(18px, 2.4vw, 36px);
  border-left: 1px solid rgba(8, 39, 26, 0.18);
}

.signup-page .signup-proof-strip li:first-child {
  padding-left: 0;
  border-left: 0;
}

.signup-page .signup-proof-strip li:last-child {
  padding-right: 0;
}

.signup-page .signup-proof-strip strong {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.16rem;
  line-height: 1.2;
}

.signup-page .signup-proof-strip span {
  color: rgba(8, 34, 24, 0.72);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.45;
}

.signup-page .signup-section {
  padding: clamp(84px, 9vw, 132px) 0;
}

.signup-page .signup-section .section-shell {
  width: min(1120px, calc(100vw - 40px));
}

.signup-page .signup-section-heading {
  display: grid;
  max-width: 700px;
  gap: 20px;
  margin-bottom: clamp(48px, 6vw, 78px);
}

.signup-page .signup-section-heading h2,
.signup-page .signup-final h2 {
  max-width: 12ch;
  color: var(--signup-ink);
  font-size: clamp(3rem, 5.6vw, 5.4rem);
  letter-spacing: -0.035em;
  line-height: 0.94;
}

.signup-page .signup-section-heading > p:last-child {
  max-width: 56ch;
  color: #536057;
  font-size: 1rem;
  line-height: 1.68;
}

.signup-page .signup-path-section {
  background:
    radial-gradient(circle at 88% 24%, rgba(75, 232, 149, 0.12), transparent 22%),
    var(--signup-paper);
}

.signup-page .signup-path-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.93fr) minmax(360px, 0.77fr);
  gap: clamp(54px, 9vw, 126px);
  align-items: start;
}

.signup-page .signup-path-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.signup-page .signup-path-list li {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 24px;
  padding: 28px 0 30px;
  border-top: 1px solid var(--signup-line);
}

.signup-page .signup-path-list li:last-child {
  border-bottom: 1px solid var(--signup-line);
}

.signup-page .signup-path-index {
  padding-top: 2px;
  color: var(--signup-green-deep);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.signup-page .signup-path-list h3 {
  max-width: 24ch;
  color: var(--signup-ink);
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(1.35rem, 2.1vw, 1.85rem);
  line-height: 1.12;
}

.signup-page .signup-path-list p {
  max-width: 43ch;
  margin-top: 10px;
  color: #58645c;
  font-size: 0.93rem;
  line-height: 1.65;
}

.signup-page .signup-path-visual {
  position: sticky;
  top: calc(var(--header-offset, var(--header-height)) + 28px);
  display: grid;
  justify-items: center;
  gap: 24px;
  margin: 0;
  padding: clamp(30px, 4.4vw, 52px);
  overflow: hidden;
  color: #fffaf0;
  background:
    radial-gradient(circle at 72% 14%, rgba(75, 232, 149, 0.28), transparent 28%),
    linear-gradient(150deg, var(--signup-ink-soft), var(--signup-ink));
  border: 1px solid rgba(13, 45, 32, 0.16);
  border-radius: 38px;
  box-shadow: 0 34px 80px rgba(16, 35, 26, 0.18);
}

.signup-page .signup-path-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}

.signup-page .signup-path-device {
  position: relative;
  width: min(286px, 82%);
  height: 486px;
  overflow: hidden;
  border: 7px solid rgba(255, 255, 255, 0.9);
  border-radius: 38px;
  background: #f7f2e8;
  box-shadow: 0 30px 64px rgba(2, 13, 9, 0.44);
}

.signup-page .signup-path-device img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.signup-page .signup-path-visual figcaption {
  position: relative;
  z-index: 1;
  display: grid;
  width: 100%;
  gap: 7px;
}

.signup-page .signup-path-visual figcaption span,
.signup-page .signup-product-shot figcaption > span {
  color: var(--signup-green);
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}

.signup-page .signup-path-visual figcaption strong {
  max-width: 20ch;
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.55rem;
  line-height: 1.16;
}

.signup-page .signup-daily-section {
  background: #fffaf0;
  border-top: 1px solid rgba(14, 39, 29, 0.08);
}

.signup-page .signup-section-heading-wide {
  max-width: 820px;
}

.signup-page .signup-section-heading-wide h2 {
  max-width: 13ch;
}

.signup-page .signup-product-grid {
  display: grid;
  grid-template-columns: 1.16fr 0.92fr 0.92fr;
  gap: clamp(18px, 2.6vw, 34px);
  align-items: start;
}

.signup-page .signup-product-shot {
  display: grid;
  gap: 22px;
  margin: 0;
}

.signup-page .signup-product-shot:nth-child(2) {
  margin-top: 72px;
}

.signup-page .signup-product-shot:nth-child(3) {
  margin-top: 28px;
}

.signup-page .signup-product-image {
  height: 500px;
  overflow: hidden;
  border: 1px solid rgba(14, 39, 29, 0.13);
  border-radius: 30px;
  background: #f3eee4;
  box-shadow: 0 28px 64px rgba(17, 37, 27, 0.13);
}

.signup-page .signup-product-shot-featured .signup-product-image {
  height: 600px;
  /* The exact page cream of the Today capture, so the gap left by `contain`
     below is the same colour as the screenshot's own margins. */
  background: #f4efe6;
}

.signup-page .signup-product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* The Today shot is already framed on the course card, so it is shown whole
   instead of being cut to fill. Filling the panel would crop it sideways at
   every width below 429px of panel, which is every phone. The panel background
   is the same cream as the screenshot's own page, so the few pixels above and
   below it do not read as a letterbox. */
.signup-page .signup-product-shot-featured .signup-product-image img {
  object-fit: contain;
}

.signup-page .signup-product-shot figcaption {
  display: grid;
  gap: 8px;
  padding-right: 10px;
}

.signup-page .signup-product-shot figcaption > span {
  color: var(--signup-green-deep);
}

.signup-page .signup-product-shot figcaption strong {
  color: var(--signup-ink);
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  line-height: 1.12;
}

.signup-page .signup-product-shot figcaption p {
  color: #5b675f;
  font-size: 0.88rem;
  line-height: 1.58;
}

.signup-page .signup-product-note {
  max-width: 64ch;
  margin-top: 38px;
  padding-top: 18px;
  color: #69746d;
  border-top: 1px solid var(--signup-line);
  font-size: 0.74rem;
  font-weight: 650;
  line-height: 1.6;
}

.signup-page .signup-final {
  position: relative;
  overflow: hidden;
  padding: clamp(88px, 10vw, 140px) 0;
  color: #fffaf0;
  background:
    radial-gradient(circle at 13% 28%, rgba(75, 232, 149, 0.16), transparent 25%),
    linear-gradient(145deg, #14382b, var(--signup-ink) 68%);
}

.signup-page .signup-final::after {
  content: "";
  position: absolute;
  right: -8%;
  bottom: -90%;
  width: min(720px, 60vw);
  aspect-ratio: 1;
  border: 1px solid rgba(75, 232, 149, 0.14);
  border-radius: 50%;
  box-shadow:
    0 0 0 72px rgba(75, 232, 149, 0.025),
    0 0 0 144px rgba(75, 232, 149, 0.018);
}

.signup-page .signup-final-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.68fr);
  gap: clamp(48px, 8vw, 116px);
  align-items: end;
}

.signup-page .signup-final h2 {
  margin-top: 18px;
  color: #fffaf0;
}

.signup-page .signup-final .signup-section-kicker {
  color: var(--signup-green);
}

.signup-page .signup-final-action {
  position: relative;
  z-index: 1;
}

.signup-page .signup-final-action > p {
  max-width: 44ch;
  color: rgba(255, 250, 240, 0.75);
  font-size: 1rem;
  line-height: 1.68;
}

.signup-page .signup-final-cta {
  margin-top: 26px;
}

.signup-page .signup-final-notes {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 18px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  color: rgba(255, 250, 240, 0.6);
  font-size: 0.73rem;
  font-weight: 700;
}

.signup-page .signup-final-notes li {
  position: relative;
  padding-left: 16px;
}

.signup-page .signup-final-notes li::before {
  content: "";
  position: absolute;
  top: 0.48em;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--signup-green);
}

.signup-page .is-course-reveal-pending {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 420ms ease,
    transform 500ms var(--ease-out-strong);
}

.signup-page .is-course-reveal-pending.is-course-reveal-visible {
  opacity: 1;
  transform: none;
}

.signup-page .signup-hero-copy > * {
  animation: signup-copy-arrive 620ms var(--ease-out-strong) both;
}

.signup-page .signup-hero-copy > :nth-child(2) {
  animation-delay: 70ms;
}

.signup-page .signup-hero-copy > :nth-child(3) {
  animation-delay: 135ms;
}

.signup-page .signup-hero-copy > :nth-child(4) {
  animation-delay: 200ms;
}

@keyframes signup-copy-arrive {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes signup-stage-arrive {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes signup-dialog-backdrop-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes signup-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.signup-page .android-waitlist-dialog[open]::backdrop {
  animation: signup-dialog-backdrop-in 180ms var(--ease-out-strong) both;
}

@media (hover: hover) and (pointer: fine) {
  .signup-page .signup-header-cta:hover:not(:active) {
    background: #62efa5;
    box-shadow: 0 15px 34px rgba(3, 16, 11, 0.3);
    transform: translateY(-1px);
  }

  .signup-page .signup-primary-cta:hover:not(:active) {
    background: #62efa5;
    box-shadow:
      0 24px 52px rgba(2, 15, 10, 0.38),
      inset 0 1px 0 rgba(255, 255, 255, 0.42);
    transform: translateY(-2px);
  }

  .signup-page .signup-primary-cta:hover:not(:active) .signup-cta-arrow {
    transform: translateX(3px);
  }
}

@media (hover: none), (pointer: coarse) {
  .signup-page .signup-header-cta:hover:not(:active),
  .signup-page .signup-primary-cta:hover:not(:active) {
    transform: none;
  }
}

@media (max-width: 1080px) {
  .signup-page .signup-hero-shell {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 0.76fr);
    gap: 42px;
  }

  .signup-page .signup-hero h1 {
    font-size: clamp(3.7rem, 7vw, 5.2rem);
  }

  .signup-page .signup-stage-goal {
    left: -18px;
  }

  .signup-page .signup-path-layout {
    gap: 58px;
  }
}

@media (max-width: 820px) {
  .signup-page .signup-hero-shell,
  .signup-page .signup-path-layout,
  .signup-page .signup-final-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .signup-page .signup-hero-shell {
    gap: 30px;
    min-height: auto;
  }

  .signup-page .signup-hero-copy {
    max-width: 660px;
  }

  .signup-page .signup-product-stage {
    width: min(100%, 540px);
    min-height: 560px;
    justify-self: center;
  }

  .signup-page .signup-phone-frame {
    right: 8%;
    width: min(310px, 67%);
    height: 530px;
  }

  .signup-page .signup-stage-goal {
    top: 265px;
    left: 0;
  }

  .signup-page .signup-path-layout {
    width: min(100%, 680px);
  }

  .signup-page .signup-path-visual {
    position: relative;
    top: auto;
    width: min(100%, 480px);
    justify-self: center;
  }

  .signup-page .signup-final-shell {
    align-items: start;
  }

  .signup-page .signup-final-action > p {
    max-width: 54ch;
  }
}

@media (max-width: 720px) {
  .signup-page .course-site-header .site-header-shell {
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
  }

  .signup-page .course-site-header .header-actions {
    width: auto;
    justify-content: flex-end;
  }
}

@media (max-width: 680px) {
  .signup-page .signup-proof-strip ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    padding-top: 0;
    padding-bottom: 0;
  }

  .signup-page .signup-proof-strip li {
    padding: 22px 18px;
  }

  .signup-page .signup-proof-strip li:first-child {
    padding-left: 0;
  }

  .signup-page .signup-proof-strip li:nth-child(2) {
    padding-right: 0;
  }

  .signup-page .signup-proof-strip li:nth-child(3) {
    padding-left: 0;
    border-top: 1px solid rgba(8, 39, 26, 0.18);
    border-left: 0;
  }

  .signup-page .signup-proof-strip li:nth-child(4) {
    padding-right: 0;
    border-top: 1px solid rgba(8, 39, 26, 0.18);
  }

  .signup-page .signup-product-grid {
    display: flex;
    gap: 18px;
    margin-right: -20px;
    margin-left: -20px;
    padding: 4px 20px 22px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .signup-page .signup-product-grid::-webkit-scrollbar {
    display: none;
  }

  .signup-page .signup-product-shot,
  .signup-page .signup-product-shot:nth-child(2),
  .signup-page .signup-product-shot:nth-child(3) {
    width: min(78vw, 310px);
    flex: 0 0 min(78vw, 310px);
    margin-top: 0;
    scroll-snap-align: center;
  }

  .signup-page .signup-product-image,
  .signup-page .signup-product-shot-featured .signup-product-image {
    height: 500px;
  }
}

@media (max-width: 560px) {
  .signup-page .site-header-shell,
  .signup-page .signup-section .section-shell,
  .signup-page .section-shell {
    width: min(100% - 32px, 1120px);
  }

  .signup-page .site-header-shell {
    min-height: 66px;
    padding: 8px 0;
  }

  .signup-page .brand {
    gap: 9px;
    font-size: 1.15rem;
  }

  .signup-page .brand img {
    width: 34px;
    height: 34px;
    border-radius: 11px;
  }

  .signup-page .signup-header-cta {
    min-height: 42px;
    padding: 0 14px;
    font-size: 0.8rem;
  }

  .signup-page .signup-hero-shell {
    width: min(100% - 32px, 1120px);
    padding-top: 38px;
    padding-bottom: 48px;
  }

  .signup-page .signup-kicker {
    margin-bottom: 18px;
    font-size: 0.66rem;
  }

  .signup-page .signup-hero h1 {
    max-width: 10.6ch;
    font-size: clamp(3rem, 13.4vw, 3.45rem);
    line-height: 0.93;
  }

  .signup-page .signup-hero-text {
    margin-top: 22px;
    font-size: 0.98rem;
    line-height: 1.58;
  }

  .signup-page .signup-hero-action {
    margin-top: 24px;
  }

  .signup-page .signup-primary-cta {
    width: 100%;
    min-height: 58px;
    justify-content: space-between;
    padding-right: 16px;
    padding-left: 20px;
  }

  .signup-page .signup-access-note {
    font-size: 0.73rem;
  }

  .signup-page .signup-product-stage {
    min-height: 452px;
    margin-top: 4px;
  }

  .signup-page .signup-phone-frame {
    right: 2px;
    width: 244px;
    height: 432px;
    border-width: 7px;
    border-radius: 38px;
  }

  .signup-page .signup-stage-card {
    gap: 4px;
    padding: 13px 14px;
    border-radius: 14px;
  }

  .signup-page .signup-stage-card span {
    font-size: 0.58rem;
  }

  .signup-page .signup-stage-card strong {
    font-size: 0.98rem;
  }

  .signup-page .signup-stage-goal {
    top: 196px;
    left: 0;
    width: 194px;
  }

  .signup-page .signup-stage-path {
    right: -4px;
    bottom: -4px;
    width: 128px;
    gap: 6px;
    padding: 17px;
    border-radius: 50%;
  }

  .signup-page .signup-stage-path strong {
    font-size: 1.2rem;
  }

  .signup-page .signup-proof-strip strong {
    font-size: 1rem;
  }

  .signup-page .signup-proof-strip span {
    font-size: 0.68rem;
  }

  .signup-page .signup-section {
    padding: 78px 0;
  }

  .signup-page .signup-section-heading {
    gap: 16px;
    margin-bottom: 44px;
  }

  .signup-page .signup-section-heading h2,
  .signup-page .signup-final h2 {
    max-width: 11ch;
    font-size: clamp(2.85rem, 13vw, 3.55rem);
    line-height: 0.96;
  }

  .signup-page .signup-section-heading > p:last-child,
  .signup-page .signup-final-action > p {
    font-size: 0.94rem;
    line-height: 1.62;
  }

  .signup-page .signup-path-list li {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 14px;
    padding: 24px 0 26px;
  }

  .signup-page .signup-path-list h3 {
    font-size: 1.38rem;
  }

  .signup-page .signup-path-visual {
    padding: 28px 24px 30px;
    border-radius: 30px;
  }

  .signup-page .signup-path-device {
    width: 238px;
    height: 412px;
    border-radius: 32px;
  }

  .signup-page .signup-path-visual figcaption strong {
    font-size: 1.35rem;
  }

  .signup-page .signup-product-grid {
    margin-right: -16px;
    margin-left: -16px;
    padding-right: 16px;
    padding-left: 16px;
  }

  .signup-page .signup-product-image,
  .signup-page .signup-product-shot-featured .signup-product-image {
    height: 480px;
  }

  .signup-page .signup-product-note {
    margin-top: 24px;
  }

  .signup-page .signup-final {
    padding: 82px 0 88px;
  }

  .signup-page .signup-final-shell {
    width: min(100% - 32px, 1120px);
    gap: 36px;
  }

  .signup-page .signup-final-notes {
    display: grid;
    gap: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .signup-page .signup-hero-copy > *,
  .signup-page .signup-product-stage {
    animation: signup-fade-in 180ms var(--ease-out-strong) both;
    animation-delay: 0ms;
  }

  .signup-page .is-course-reveal-pending,
  .signup-page .is-course-reveal-pending.is-course-reveal-visible {
    transform: none;
    transition: opacity 180ms ease;
  }

  .signup-page .is-course-reveal-pending {
    opacity: 0;
  }

  .signup-page .is-course-reveal-pending.is-course-reveal-visible {
    opacity: 1;
  }

  .signup-page .signup-header-cta:active,
  .signup-page .signup-primary-cta:active {
    transform: none;
  }

  .signup-page .signup-cta-arrow,
  .signup-page .signup-product-image {
    transition: none;
  }
}