/*
  Strict visual layout authority.
  Loaded after the legacy art layer; owns viewport fit, scale, alignment, and polish.
*/

:root {
  --layout-header: 108px;
  --layout-max: 1520px;
  --layout-gutter: clamp(72px, 4.8vw, 112px);
  --layout-panel: rgba(240, 233, 215, 0.94);
  --depth-hard: 4px 5px 0 rgba(36, 40, 41, 0.95);
  --depth-soft: 0 24px 52px rgba(36, 40, 41, 0.18);
}

html {
  scroll-behavior: auto !important;
  scroll-padding-top: var(--layout-header);
  scroll-snap-type: none !important;
  /* Safety net: a stray sub-pixel overflow during an active resize can never
     produce a horizontal scrollbar. `clip` (unlike `hidden`) does not create a
     scroll container, so fixed/sticky descendants keep working. */
  overflow-x: clip;
}

.three-page-site {
  background: var(--canvas);
  overflow-x: clip;
}

.three-page-site *,
.three-page-site *::before,
.three-page-site *::after {
  letter-spacing: 0 !important;
}

.three-page-site .noise,
.three-page-site .chapter-label,
.three-page-site .chapter-next,
.three-page-site .trust-ribbon,
.three-page-site .float-note,
.three-page-site .scribble,
.three-page-site .microcopy {
  display: none !important;
}

.three-page-site .site-header {
  position: fixed !important;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--layout-header) !important;
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 var(--layout-gutter) !important;
  border-bottom: 1px solid rgba(36, 40, 41, 0.16);
  background: rgba(240, 233, 215, 0.96);
  backdrop-filter: blur(16px);
}

.three-page-site main {
  padding-top: var(--layout-header);
}

.three-page-site .wordmark,
.three-page-site .footer-wordmark {
  justify-self: start;
  color: #050606;
  font-family: var(--sans);
  font-size: 49px !important;
  font-weight: 950;
  line-height: 0.86;
}

.three-page-site .wordmark span,
.three-page-site .footer-wordmark span {
  color: #050606;
}

.three-page-site .site-header .wordmark span {
  color: var(--red);
}

.three-page-site .chapter-nav {
  justify-self: center;
  display: flex !important;
  gap: 52px !important;
  margin: 0 !important;
  color: var(--ink);
  font-family: var(--sans);
  text-transform: none !important;
}

.three-page-site .chapter-nav a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 18px !important;
  font-weight: 800;
  line-height: 1;
}

.three-page-site .chapter-nav span {
  color: var(--red);
  font-size: 18px !important;
  font-weight: 900;
  line-height: 1;
}

.three-page-site .mini-cta {
  justify-self: end;
  min-width: 278px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 0 26px !important;
  border: 2px solid var(--ink);
  border-radius: 25px;
  background: rgba(240, 233, 215, 0.74);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 15px !important;
  font-weight: 900;
  text-transform: uppercase;
}

.three-page-site .live-dot {
  width: 8px;
  height: 8px;
  flex-basis: 8px;
  background: var(--red);
  box-shadow: 0 0 0 8px rgba(254, 95, 85, 0.15);
}

.three-page-site .page-chapter {
  width: 100% !important;
  max-width: none !important;
  min-height: calc(100svh - var(--layout-header)) !important;
  height: auto !important;
  margin: 0 !important;
  scroll-margin-top: var(--layout-header);
  scroll-snap-align: none !important;
}

.three-page-site .hero,
.three-page-site .compact-how,
.three-page-site .launch-page {
  max-width: none !important;
  margin: 0 !important;
  padding-inline: var(--layout-gutter) !important;
}

.three-page-site .hero > *,
.three-page-site .compact-how > *,
.three-page-site .launch-page > * {
  min-width: 0;
}

.three-page-site .hero {
  position: relative;
  min-height: calc(100svh - var(--layout-header)) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 720px) minmax(500px, 620px) !important;
  gap: clamp(56px, 5vw, 96px) !important;
  align-items: center;
  justify-content: center;
  overflow: hidden !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  background:
    radial-gradient(circle at 80% 50%, rgba(254, 95, 85, 0.16), transparent 31%),
    linear-gradient(90deg, rgba(240, 233, 215, 0.98), rgba(243, 212, 198, 0.82)),
    var(--canvas);
}

.three-page-site .hero::after {
  display: none !important;
}

.three-page-site .hero-copy {
  justify-self: start;
  width: min(100%, 720px) !important;
  max-width: 720px !important;
  margin-left: clamp(28px, 3vw, 72px);
}

.three-page-site .hero-stage {
  justify-self: end;
  width: min(100%, 620px) !important;
  /* Track the phone's real box (2.1744 aspect) but never exceed the viewport.
     On short/landscape screens the stage shrinks with the viewport instead of
     staying tall and clipping the phone inside overflow:hidden. */
  height: min(
    calc(100svh - var(--layout-header) - 24px),
    calc(clamp(300px, 19vw, 392px) * 2.1744 + 24px)
  ) !important;
  min-height: 0 !important;
  max-height: none !important;
  position: relative;
  margin-right: 0;
}

.three-page-site .eyebrow,
.three-page-site .kicker,
.three-page-site .kicker-light {
  display: block;
  margin: 0 0 32px !important;
  color: var(--blue) !important;
  font-family: var(--sans);
  font-size: 23px !important;
  font-weight: 850;
  line-height: 1;
  text-transform: none;
}

.three-page-site .hero .eyebrow {
  margin-bottom: 24px !important;
}

.three-page-site .slide-title,
.three-page-site .hero h1,
.three-page-site .compact-heading h2,
.three-page-site .launch-copy h2 {
  margin: 0 !important;
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(76px, 5.8vw, 108px) !important;
  font-weight: 950 !important;
  line-height: 0.94 !important;
}

.three-page-site .slide-title em,
.three-page-site .slide-subtitle em {
  color: var(--red);
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
}

.three-page-site .hero .slide-title {
  max-width: 710px;
}

.three-page-site .hero-lede,
.three-page-site .launch-copy > p {
  max-width: 620px !important;
  margin: 30px 0 0 !important;
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(21px, 1.35vw, 26px) !important;
  font-weight: 500;
  line-height: 1.34;
}

.three-page-site .hero-actions {
  display: flex !important;
  align-items: center;
  gap: 42px !important;
  margin-top: 44px !important;
}

.three-page-site .safety-promise {
  max-width: 620px;
  margin: 22px 0 0 !important;
  color: rgba(57, 62, 65, 0.78);
  font-size: 18px !important;
  font-weight: 820;
  line-height: 1.36 !important;
}

.three-page-site .audience-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 680px;
  margin-top: 20px;
}

.three-page-site .audience-proof span {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  border: 1.5px solid rgba(36, 40, 41, 0.28);
  border-radius: 999px;
  background: rgba(240, 233, 215, 0.52);
  color: var(--ink);
  font-size: 15px;
  font-weight: 850;
  line-height: 1;
}

.three-page-site .button,
.three-page-site .button-dark,
.three-page-site .waitlist-form button {
  min-width: min(360px, 100%);
  min-height: 76px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
  padding: 0 36px !important;
  border: 2px solid rgba(36, 40, 41, 0.18);
  border-radius: 20px !important;
  background: var(--red) !important;
  color: var(--ink) !important;
  box-shadow: var(--depth-hard) !important;
  font-family: var(--sans);
  font-size: 22px !important;
  font-weight: 950 !important;
  line-height: 1;
}

.three-page-site .button span,
.three-page-site .waitlist-form button span {
  margin-left: auto;
  font-size: 26px;
  line-height: 1;
}

.three-page-site .text-link {
  color: var(--ink);
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 6px;
  font-size: 22px;
  font-weight: 950;
  line-height: 1;
}

.three-page-site .text-link span {
  font-size: 26px;
  line-height: 1;
}

.three-page-site .hero-stage .phone {
  top: 51%;
  left: 52%;
  width: clamp(450px, 26vw, 520px) !important;
  transform: translate(-50%, -50%) rotate(5deg) !important;
  border-width: 3px;
  box-shadow: 34px 42px 78px rgba(36, 40, 41, 0.26), 9px 10px 0 rgba(36, 40, 41, 0.88);
}

.three-page-site .real-phone {
  position: absolute;
  z-index: 2;
  width: clamp(300px, 19vw, 392px);
  filter: drop-shadow(26px 34px 48px rgba(36, 40, 41, 0.24));
}

.three-page-site .real-phone img,
.three-page-site .app-phone-visual img {
  width: 100%;
  height: auto;
}

.three-page-site .real-phone img {
  /* Same iPhone 16 Pro corner geometry as the how-it-works phones. */
  clip-path: inset(0 round 15.4% / 7.1%);
}

.three-page-site .real-phone-hero {
  top: 51%;
  left: 50%;
  /* Cap the phone by available height (divisor > aspect leaves a hair of
     margin) so on short viewports it scales down to fit rather than being
     sliced top and bottom. Wins over the base .real-phone width on desktop;
     the <=1100px media query re-overrides it for the single-column layout. */
  width: min(
    clamp(300px, 19vw, 392px),
    calc((100svh - var(--layout-header) - 24px) / 2.22)
  );
  transform: translate(-50%, -50%) rotate(5deg);
}

.three-page-site .hero-floating-note {
  position: absolute;
  z-index: 3;
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  padding: 0 20px;
  border: 2px solid var(--ink);
  border-radius: 18px;
  background: rgba(240, 233, 215, 0.9);
  box-shadow: var(--depth-hard);
  color: var(--ink);
  font-size: 18px;
  font-weight: 950;
  line-height: 1;
  /* Stay one line even when anchored near a narrow, phone-width stage, where
     shrink-to-fit would otherwise wrap the label. */
  white-space: nowrap;
}

/* Notes overlap the phone slightly: the horizontal offset is measured from the
   phone's own responsive half-width (clamp(150px, 9.5vw, 196px), half of the
   real-phone-hero width) minus 40px, so each label's inner edge tucks ~40px
   onto the phone and the rest hangs off into the negative space. Because the
   labels sit partly on the phone they never need room fully beside it, so this
   one placement holds at every desktop width. The bottom label is lifted above
   the "Niki" name in the phone art. */
.three-page-site .hero-floating-note-top {
  top: 25%;
  left: calc(50% + clamp(150px, 9.5vw, 196px) - 40px);
  right: auto;
  bottom: auto;
  transform: rotate(2deg);
}

.three-page-site .hero-floating-note-bottom {
  bottom: 40%;
  right: calc(50% + clamp(150px, 9.5vw, 196px) - 40px);
  left: auto;
  top: auto;
  transform: rotate(-2deg);
}

.three-page-site .phone-screen {
  background: #1f282b;
}

.three-page-site .app-wordmark {
  color: #f4eddd;
  font-family: var(--sans);
  font-size: 28px;
  font-weight: 950;
}

.three-page-site .freshness {
  color: var(--ink);
  background: var(--blue);
  font-size: 12px;
  font-weight: 900;
  text-transform: none;
}

.three-page-site .active-card {
  background: #2f373a;
}

.three-page-site .active-card-copy {
  color: var(--canvas);
}

.three-page-site .active-card-copy strong {
  font-size: 27px;
  line-height: 1;
}

.three-page-site .active-card-copy > div span {
  color: rgba(240, 233, 215, 0.72);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 850;
  text-transform: none;
}

.three-page-site .active-card-copy p {
  color: var(--canvas);
  font-size: 20px;
}

.three-page-site .active-card-copy button {
  color: var(--ink);
  background: var(--red);
  font-size: 22px;
  font-weight: 950;
}

.three-page-site .compact-how {
  min-height: calc(100svh - var(--layout-header)) !important;
  display: grid !important;
  grid-template-rows: auto auto;
  /* The chapter is at least a viewport tall, so on roomy screens there is
     slack left over. Centring splits it between the two edges instead of
     dumping it all under the last card, where it read as a hole between the
     steps and the statement band that follows. */
  align-content: center;
  justify-items: center;
  row-gap: 32px !important;
  overflow: hidden !important;
  padding-top: 34px !important;
  padding-bottom: 36px !important;
  background:
    radial-gradient(circle at 32% 28%, rgba(129, 164, 205, 0.08), transparent 32%),
    #1d2324 !important;
}

.three-page-site .compact-heading,
.three-page-site .compact-steps,
.three-page-site .chapter-footer {
  width: min(100%, var(--layout-max)) !important;
  margin-inline: auto !important;
}

.three-page-site .compact-heading {
  display: block !important;
}

.three-page-site .compact-heading .kicker {
  margin-bottom: 24px !important;
  font-size: 20px !important;
}

.three-page-site .compact-heading .slide-title {
  color: var(--canvas) !important;
  font-size: clamp(64px, 4.35vw, 84px) !important;
  line-height: 0.95 !important;
}

.three-page-site .compact-heading .slide-subtitle {
  max-width: none !important;
  margin: 16px 0 0 !important;
  color: rgba(240, 233, 215, 0.72);
  font-size: clamp(27px, 1.6vw, 32px) !important;
  font-weight: 950;
  line-height: 1.04 !important;
}

.three-page-site .compact-heading .slide-subtitle em {
  color: var(--red);
}

.three-page-site .compact-manifesto {
  align-self: end !important;
  opacity: 1 !important;
}

.three-page-site .compact-manifesto p {
  margin: 0 !important;
  padding: 11px 0 !important;
  border-bottom: 1px solid rgba(240, 233, 215, 0.14);
  color: rgba(240, 233, 215, 0.48);
  font-size: clamp(19px, 1.2vw, 24px) !important;
  font-weight: 950;
  line-height: 1.1;
}

.three-page-site .compact-manifesto span {
  color: rgba(240, 233, 215, 0.52);
}

.three-page-site .compact-steps {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 22px !important;
}

.three-page-site .compact-step {
  display: grid !important;
  /* Flexible visual column so the phone centers in its half instead of
     hugging the left edge when the tile is wide. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) !important;
  gap: 26px !important;
  height: clamp(430px, 46svh, 485px) !important;
  min-height: 0 !important;
  padding: 26px 30px !important;
  border: 1px solid rgba(240, 233, 215, 0.06);
  border-radius: 26px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.035), transparent 42%),
    #353c3e !important;
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.28), 4px 5px 0 rgba(0, 0, 0, 0.18) !important;
}

.three-page-site .compact-step-visual {
  width: 100%;
  height: min(100%, 380px) !important;
  min-height: 0 !important;
  align-self: center;
}

.three-page-site .app-phone-visual {
  display: grid;
  place-items: center;
  overflow: visible !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

.three-page-site .app-phone-visual img {
  width: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  /* iPhone 16 Pro display-corner radius (62pt of 402pt width). The two-axis
     percentage resolves to an equal, circular radius that scales with the image. */
  clip-path: inset(0 round 15.4% / 7.1%);
  filter: drop-shadow(10px 14px 18px rgba(0, 0, 0, 0.26));
}

.three-page-site .compact-step-copy {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 0;
  padding: 0 0 10px !important;
}

.three-page-site .compact-step-copy b {
  margin-bottom: auto !important;
  color: var(--blue) !important;
  font-size: 18px !important;
  font-weight: 950 !important;
  line-height: 1;
}

.three-page-site .compact-step-copy h3 {
  margin: 0 0 18px !important;
  color: var(--canvas);
  font-size: clamp(25px, 1.45vw, 30px) !important;
  font-weight: 950;
  line-height: 0.97 !important;
}

.three-page-site .compact-step-copy p {
  max-width: 240px;
  margin: 0 !important;
  color: rgba(240, 233, 215, 0.66);
  font-size: clamp(15px, 0.95vw, 18px) !important;
  font-weight: 750;
  line-height: 1.28 !important;
}

.three-page-site .trust-strip {
  width: min(100%, var(--layout-max)) !important;
  display: flex;
  justify-content: center;
  gap: 14px;
  margin: -6px auto 0 !important;
}

.three-page-site .trust-strip span {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 18px;
  border: 1px solid rgba(240, 233, 215, 0.18);
  border-radius: 999px;
  background: rgba(240, 233, 215, 0.08);
  color: rgba(240, 233, 215, 0.78);
  font-size: 15px;
  font-weight: 850;
}

.three-page-site .trust-strip .trust-icon {
  flex: none;
  width: 18px;
  height: 18px;
  color: rgba(240, 233, 215, 0.6);
}

.three-page-site .dual-snap img:first-child {
  width: 78%;
  left: 4%;
  top: 8%;
}

.three-page-site .dual-snap img:nth-child(2) {
  width: 84%;
  left: 20%;
  top: 22%;
}

.three-page-site .dual-snap span {
  left: 22px;
  right: 22px;
  bottom: 18px;
  width: auto;
  text-align: center;
  font-size: 12px;
}

.three-page-site .true-self {
  padding: 28px !important;
}

.three-page-site .true-self strong {
  font-size: clamp(31px, 2vw, 40px) !important;
  line-height: 1.02 !important;
}

.three-page-site .true-self button {
  right: 28px;
  bottom: 28px;
}

.three-page-site .route-snap .venue {
  width: 152px;
}

.three-page-site .launch-page {
  min-height: calc(100svh - var(--layout-header)) !important;
  display: grid !important;
  /* Both tracks must be able to shrink, otherwise 430+620+gap+gutters demands
     ~1300px and overflows (then clips under overflow:hidden) on any width
     between the desktop and the 1100px single-column breakpoint. */
  grid-template-columns: minmax(0, 620px) minmax(0, 740px) !important;
  gap: clamp(52px, 4.4vw, 88px) !important;
  align-items: center;
  justify-content: center;
  overflow: hidden !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  background:
    radial-gradient(circle at 82% 48%, rgba(254, 95, 85, 0.14), transparent 32%),
    linear-gradient(90deg, rgba(240, 233, 215, 0.98), rgba(243, 212, 198, 0.84)),
    var(--canvas);
  overflow-anchor: none;
}

.three-page-site .launch-copy {
  justify-self: start;
  width: min(100%, 690px) !important;
  max-width: 640px !important;
  margin-left: -6px;
}

.three-page-site .launch-copy .kicker {
  margin-bottom: 24px !important;
  font-size: 20px !important;
}

.three-page-site .launch-copy .slide-title {
  font-size: clamp(72px, 4.9vw, 96px) !important;
}

.three-page-site .launch-copy .slide-subtitle {
  max-width: 720px !important;
  margin: 24px 0 0 !important;
  color: var(--ink);
  font-size: clamp(40px, 2.65vw, 52px) !important;
  font-weight: 950;
  line-height: 1.04 !important;
}

.three-page-site .launch-copy > p,
.three-page-site .community-intro > p {
  max-width: 560px !important;
  margin-top: 30px !important;
}

.three-page-site .community-race {
  display: none;
}

.three-page-site .launch-page.community-picked .community-intro {
  display: none;
}

.three-page-site .launch-page.community-picked .community-race {
  display: block;
}

.three-page-site .community-race h2 {
  max-width: 620px;
  margin: 0 !important;
  color: var(--ink);
  font-size: clamp(58px, 4vw, 82px) !important;
  font-weight: 950;
  line-height: 0.98 !important;
}

.three-page-site .community-race h2 span {
  color: var(--red);
}

.three-page-site .community-race > p {
  max-width: 540px;
  margin: 22px 0 0 !important;
  color: rgba(57, 62, 65, 0.78);
  font-size: 22px !important;
  font-weight: 820;
  line-height: 1.28 !important;
}

.three-page-site .districts {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 36px !important;
}

.three-page-site .districts button {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 52px;
  padding: 0 20px !important;
  border: 1.8px solid var(--ink);
  border-radius: 100px;
  box-shadow: 4px 5px 0 rgba(36, 40, 41, 0.9);
  background: rgba(240, 233, 215, 0.48);
  color: var(--ink);
  cursor: pointer;
  font-size: 16px !important;
  font-weight: 650;
  text-transform: none;
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.three-page-site .districts button:hover,
.three-page-site .districts button:focus-visible {
  background: rgba(254, 95, 85, 0.2);
  transform: translateY(-2px);
}

.three-page-site .districts button.is-selected {
  background: var(--red);
  box-shadow: 2px 3px 0 rgba(36, 40, 41, 0.92);
  transform: translateY(2px);
}

.three-page-site .districts button.is-selected::before {
  background: var(--ink);
  box-shadow: 0 0 0 7px rgba(57, 62, 65, 0.14);
}

.three-page-site .districts button::before {
  content: "";
  width: 8px;
  min-width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 7px rgba(254, 95, 85, 0.14);
}

.three-page-site .race-chart {
  display: grid;
  gap: 12px;
  max-width: 650px;
  margin-top: 34px;
}

.three-page-site .race-row {
  display: grid;
  grid-template-columns: 142px minmax(0, 1fr) 54px;
  align-items: center;
  gap: 14px;
  min-height: 46px;
  padding: 0 14px;
  border: 1.6px solid rgba(57, 62, 65, 0.2);
  border-radius: 16px;
  background: rgba(240, 233, 215, 0.48);
  color: var(--ink);
}

.three-page-site .race-row span,
.three-page-site .race-row b {
  font-size: 15px;
  font-weight: 950;
  line-height: 1;
}

.three-page-site .race-row i {
  position: relative;
  height: 14px;
  overflow: hidden;
  border: 1px solid rgba(57, 62, 65, 0.26);
  border-radius: 999px;
  background: rgba(57, 62, 65, 0.1);
}

.three-page-site .race-row i::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--share) * 1%);
  border-radius: inherit;
  background: var(--blue);
}

.three-page-site .race-row.is-selected {
  border-color: var(--ink);
  background: rgba(254, 95, 85, 0.15);
  box-shadow: 4px 5px 0 rgba(36, 40, 41, 0.9);
}

.three-page-site .race-row.is-selected i::before {
  background: var(--red);
}

.three-page-site .race-row-new {
  display: none;
}

.three-page-site .race-row-new.is-selected {
  display: grid;
}

.three-page-site .launch-panel {
  justify-self: end;
  width: min(100%, 800px) !important;
  max-width: 800px !important;
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: 28px;
  background: #202829;
  box-shadow: none;
}

.three-page-site .unlock {
  border: 0;
  border-radius: 0;
}

.three-page-site .compact-unlock {
  min-height: 300px !important;
  padding: 34px 36px !important;
  background: #202829 !important;
}

.three-page-site .unlock-top {
  color: var(--canvas);
  font-size: 15px;
  font-weight: 950;
}

.three-page-site .compact-unlock .counter {
  margin-top: 34px;
  color: var(--blue);
  font-size: clamp(94px, 5.9vw, 128px) !important;
  font-weight: 950;
  line-height: 0.76;
}

.three-page-site .compact-unlock .counter small {
  display: block;
  margin-top: 20px;
  color: var(--canvas);
  font-size: 21px;
  font-weight: 950;
}

.three-page-site .progress {
  height: 12px;
  margin-top: 30px;
  border: 1px solid rgba(240, 233, 215, 0.42);
}

.three-page-site .launch-form {
  padding: 30px 36px 30px !important;
  border: 0;
  border-radius: 0;
  background: rgba(240, 233, 215, 0.86);
}

.three-page-site .launch-form .kicker {
  margin-bottom: 20px !important;
  font-size: 17px !important;
}

.three-page-site .launch-form h3 {
  margin: 0 0 22px !important;
  color: var(--ink);
  font-size: clamp(38px, 2.6vw, 50px) !important;
  font-weight: 950;
  line-height: 1 !important;
}

.three-page-site .launch-form h3 em {
  color: var(--red);
  font-style: normal;
}

.three-page-site .launch-form-copy {
  max-width: 650px;
  margin: -6px 0 22px !important;
  color: rgba(57, 62, 65, 0.76);
  font-size: 18px !important;
  font-weight: 720;
  line-height: 1.35 !important;
}

.three-page-site .waitlist-form {
  min-height: 84px;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 9px 10px 9px 28px !important;
  border: 3px solid var(--ink);
  border-radius: 34px !important;
  background: rgba(240, 233, 215, 0.68);
}

.three-page-site .waitlist-form input {
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-size: 22px;
  font-weight: 800;
}

.three-page-site .waitlist-form button {
  position: relative;
  left: -2px;
  top: -3px;
  min-width: 184px;
  min-height: 64px;
  border-radius: 23px !important;
  font-size: 23px !important;
}

.three-page-site .waitlist-form button:disabled {
  cursor: wait;
  opacity: 0.72;
  transform: none;
}

.three-page-site :is(a, button, input):focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 4px;
}

.three-page-site .waitlist-form:focus-within {
  border-color: var(--blue);
}

.three-page-site .trap-field {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  clip-path: inset(50%);
}

.three-page-site .form-note {
  margin-top: 16px !important;
  color: rgba(57, 62, 65, 0.66);
  font-size: 15px !important;
  font-weight: 750;
}

.three-page-site .waitlist-consents {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  border: 0;
}

.three-page-site .waitlist-consents label {
  display: grid;
  grid-template-columns: 19px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  color: rgba(57, 62, 65, 0.82);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
}

.three-page-site .waitlist-consents input {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--red);
}

.three-page-site .waitlist-consents a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

@media (min-width: 761px) {
  .three-page-site .launch-panel {
    max-width: 740px !important;
  }

  .three-page-site .compact-unlock {
    min-height: 244px !important;
    padding: 28px 32px !important;
  }

  .three-page-site .compact-unlock .counter {
    margin-top: 24px;
    font-size: clamp(76px, 4.8vw, 104px) !important;
  }

  .three-page-site .compact-unlock .counter small {
    margin-top: 14px;
    font-size: 18px;
  }

  .three-page-site .progress {
    margin-top: 22px;
  }

  .three-page-site .launch-form {
    padding: 22px 32px 24px !important;
  }

  .three-page-site .launch-form .kicker {
    margin-bottom: 14px !important;
    font-size: 15px !important;
  }

  .three-page-site .launch-form h3 {
    margin-bottom: 14px !important;
    font-size: clamp(30px, 2vw, 40px) !important;
  }

  .three-page-site .launch-form-copy {
    max-width: 600px;
    margin: 0 0 16px !important;
    font-size: 15px !important;
    line-height: 1.28 !important;
  }

  .three-page-site .waitlist-form {
    min-height: 68px;
    gap: 10px;
    padding: 7px 8px 7px 22px !important;
    border-width: 2.5px;
    border-radius: 28px !important;
  }

  .three-page-site .waitlist-form input {
    font-size: 20px;
  }

  .three-page-site .waitlist-form button {
    min-width: 160px;
    min-height: 54px;
    border-radius: 20px !important;
    font-size: 20px !important;
  }

  .three-page-site .form-note {
    margin-top: 12px !important;
    font-size: 13px !important;
  }
}

.three-page-site .chapter-footer {
  position: absolute !important;
  left: var(--layout-gutter);
  right: var(--layout-gutter);
  bottom: 28px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 1360px) {
  :root {
    --layout-max: 1320px;
    --layout-gutter: clamp(48px, 4vw, 72px);
  }

  .three-page-site .hero-copy {
    margin-left: 0;
  }

  .three-page-site .hero-stage .phone {
    width: clamp(410px, 28vw, 470px) !important;
  }

  .three-page-site .compact-step {
    padding: 24px !important;
  }

  .three-page-site .launch-panel {
    max-width: 720px !important;
  }

  .three-page-site .compact-unlock {
    min-height: 280px !important;
  }
}

@media (max-width: 1100px) {
  :root {
    --layout-header: 92px;
    --layout-gutter: clamp(28px, 5vw, 52px);
  }

  .three-page-site .desktop-nav {
    display: none !important;
  }

  .three-page-site .site-header {
    grid-template-columns: auto 1fr;
  }

  .three-page-site .mini-cta {
    min-width: 232px;
    height: 58px;
    font-size: 13px !important;
  }

  .three-page-site .hero,
  .three-page-site .launch-page {
    grid-template-columns: 1fr !important;
    gap: 44px !important;
    align-content: start;
    padding-top: 56px !important;
    padding-bottom: 76px !important;
  }

  .three-page-site .hero-copy,
  .three-page-site .hero-stage,
  .three-page-site .launch-copy,
  .three-page-site .launch-panel {
    justify-self: center;
    width: min(100%, 720px) !important;
    margin-left: 0;
    margin-right: 0;
  }

  .three-page-site .hero-stage {
    /* Match the phone's box (width + 2.17 height) so the floating notes anchor
       to the phone edges instead of drifting into the empty column margins. */
    width: min(352px, 66vw) !important;
    height: calc(min(352px, 66vw) * 2.2 + 24px) !important;
    min-height: 0;
  }

  .three-page-site .hero-stage .phone {
    width: min(430px, 72vw) !important;
  }

  .three-page-site .real-phone {
    width: min(352px, 66vw);
  }

  .three-page-site .hero-floating-note-top {
    top: 4%;
    left: 78%;
    right: auto;
  }

  .three-page-site .hero-floating-note-bottom {
    right: 76%;
    left: auto;
    bottom: 34%;
  }

  .three-page-site .compact-how {
    overflow: visible !important;
    padding-top: 52px !important;
    padding-bottom: 72px !important;
  }

  .three-page-site .compact-heading,
  .three-page-site .compact-steps {
    grid-template-columns: 1fr !important;
  }

  .three-page-site .trust-strip {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .three-page-site .compact-step {
    min-height: 390px !important;
    height: auto !important;
  }

  .three-page-site .launch-page {
    overflow: visible !important;
  }
}

@media (max-width: 760px) {
  :root {
    --layout-header: 86px;
    --layout-gutter: 20px;
  }

  .three-page-site .site-header {
    padding-inline: 20px !important;
  }

  .three-page-site .wordmark {
    font-size: 38px !important;
  }

  .three-page-site .mini-cta {
    min-width: 172px;
    height: 54px;
    gap: 12px;
    padding: 0 18px !important;
    border-radius: 20px;
    font-size: 12px !important;
  }

  .three-page-site .cta-label-wide {
    display: none;
  }

  .three-page-site .cta-label-mobile {
    display: inline;
  }

  .three-page-site .eyebrow,
  .three-page-site .kicker,
  .three-page-site .kicker-light {
    margin-bottom: 18px !important;
    font-size: 16px !important;
  }

  .three-page-site .slide-title,
  .three-page-site .hero h1,
  .three-page-site .compact-heading .slide-title,
  .three-page-site .launch-copy .slide-title {
    font-size: clamp(48px, 12.5vw, 60px) !important;
    line-height: 0.98 !important;
  }

  .three-page-site .hero .slide-title {
    max-width: 340px;
  }

  .three-page-site .hero,
  .three-page-site .launch-page {
    padding-top: 38px !important;
    padding-bottom: 60px !important;
    gap: 40px !important;
  }

  .three-page-site .hero-lede,
  .three-page-site .launch-copy > p,
  .three-page-site .community-intro > p {
    margin-top: 20px !important;
    font-size: 18px !important;
    line-height: 1.34;
  }

  .three-page-site .hero-actions {
    display: grid !important;
    gap: 26px !important;
    margin-top: 28px !important;
  }

  .three-page-site .safety-promise {
    margin-top: 18px !important;
    font-size: 16px !important;
  }

  .three-page-site .audience-proof {
    gap: 10px;
    margin-top: 18px;
  }

  .three-page-site .audience-proof span {
    min-height: 38px;
    padding-inline: 13px;
    font-size: 13px;
  }

  .three-page-site .button,
  .three-page-site .button-dark {
    width: 100%;
    min-width: 0;
    min-height: 64px;
    justify-content: space-between;
    padding-inline: 28px !important;
    font-size: 20px !important;
  }

  .three-page-site .text-link {
    width: max-content;
    font-size: 20px;
    font-weight: 950;
  }

  .three-page-site .hero-stage {
    width: min(240px, 66vw) !important;
    height: calc(min(240px, 66vw) * 2.2 + 20px) !important;
    min-height: 0;
    overflow: visible;
  }

  .three-page-site .hero-stage .phone {
    top: 49%;
    left: 50%;
    width: min(330px, 86vw) !important;
  }

  .three-page-site .real-phone {
    width: min(240px, 66vw);
  }

  .three-page-site .real-phone-hero {
    top: 49%;
    left: 50%;
  }

  .three-page-site .hero-actions {
    justify-items: stretch !important;
    gap: 18px !important;
  }

  .three-page-site .hero-actions .button {
    min-width: 0 !important;
    width: 100%;
    gap: 18px;
    padding: 0 24px !important;
    font-size: 19px !important;
    white-space: nowrap;
  }

  .three-page-site .hero-actions .text-link {
    justify-self: center;
  }

  .three-page-site .hero-floating-note {
    min-height: 42px;
    padding: 0 13px;
    border-width: 1.5px;
    border-radius: 14px;
    font-size: 13px;
  }

  .three-page-site .hero-floating-note-top {
    top: 3%;
    left: 50%;
    right: auto;
  }

  .three-page-site .hero-floating-note-bottom {
    right: 48%;
    left: auto;
    bottom: 34%;
  }

  .three-page-site .compact-how {
    padding-top: 42px !important;
    /* Tighter now that the pager dots are gone, so the statement band that
       follows sits close to the last card instead of after a gap. */
    padding-bottom: 40px !important;
  }

  .three-page-site .compact-heading {
    gap: 32px !important;
  }

  .three-page-site .compact-heading .slide-subtitle {
    font-size: clamp(29px, 8vw, 38px) !important;
  }

  .three-page-site .compact-manifesto p {
    padding: 13px 0 !important;
    font-size: 20px !important;
  }

  .three-page-site .compact-steps {
    gap: 22px !important;
  }

  .three-page-site .trust-strip {
    display: none;
  }

  .three-page-site .compact-step {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    min-height: 0 !important;
    padding: 26px !important;
  }

  .three-page-site .compact-step-visual {
    height: 300px !important;
  }

  .three-page-site .compact-step-copy {
    min-height: 170px;
  }

  .three-page-site .launch-copy .slide-subtitle {
    margin-top: 22px !important;
    font-size: clamp(38px, 10.3vw, 52px) !important;
  }

  .three-page-site .districts {
    gap: 12px;
    margin-top: 34px !important;
  }

  .three-page-site .districts button {
    min-height: 45px;
    padding: 0 15px !important;
    font-size: 13px !important;
  }

  .three-page-site .community-race h2 {
    font-size: clamp(42px, 11vw, 54px) !important;
  }

  .three-page-site .community-race > p {
    margin-top: 18px !important;
    font-size: 17px !important;
  }

  .three-page-site .race-chart {
    gap: 10px;
    margin-top: 24px;
  }

  .three-page-site .race-row {
    grid-template-columns: 105px minmax(0, 1fr) 42px;
    gap: 10px;
    min-height: 42px;
    padding-inline: 11px;
    border-radius: 14px;
  }

  .three-page-site .race-row span,
  .three-page-site .race-row b {
    font-size: 12px;
  }

  .three-page-site .race-row i {
    height: 12px;
  }

  .three-page-site .compact-unlock {
    min-height: 250px !important;
    padding: 28px 24px !important;
  }

  .three-page-site .compact-unlock .counter {
    margin-top: 38px;
    font-size: clamp(78px, 22vw, 104px) !important;
  }

  .three-page-site .compact-unlock .counter small {
    margin-top: 18px;
    font-size: 18px;
  }

  .three-page-site .launch-form {
    padding: 30px 24px 26px !important;
  }

  .three-page-site .launch-form h3 {
    font-size: clamp(34px, 9vw, 48px) !important;
  }

  .three-page-site .launch-form-copy {
    font-size: 16px !important;
  }

  .three-page-site .waitlist-form {
    min-height: 74px;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 18px !important;
    border-width: 2px;
    border-radius: 24px !important;
  }

  .three-page-site .waitlist-form input {
    min-height: 42px;
    font-size: 20px;
  }

  .three-page-site .waitlist-form button {
    width: 100%;
    min-width: 0;
    min-height: 62px;
    justify-content: space-between;
    font-size: 21px !important;
  }

  .three-page-site .waitlist-consents {
    gap: 11px;
    margin-top: 16px;
  }

  .three-page-site .waitlist-consents label {
    font-size: 13px;
  }
}

@media (max-width: 420px) {
  .three-page-site .mini-cta {
    min-width: clamp(166px, 50vw, 196px);
    padding-inline: 14px !important;
  }

  .three-page-site .wordmark {
    font-size: 35px !important;
  }
}

.three-page-site .cta-label-mobile {
  display: none;
}

@media (max-width: 760px) {
  .three-page-site .cta-label-mobile {
    display: inline;
  }
}

@media (hover: hover) and (pointer: fine) {
  .three-page-site .compact-step {
    transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .three-page-site .compact-step:hover {
    transform: translateY(-5px);
    box-shadow: 0 22px 38px rgba(0, 0, 0, 0.32), 4px 5px 0 rgba(0, 0, 0, 0.18) !important;
  }

  .three-page-site .compact-step img {
    transition: transform 400ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 400ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .three-page-site .compact-step:hover img {
    transform: translateY(-4px) scale(1.015);
    filter: drop-shadow(14px 18px 22px rgba(0, 0, 0, 0.32));
  }
}

.three-page-site .real-phone-hero {
  animation: phoneFloat 5.5s cubic-bezier(0.42, 0, 0.58, 1) 1s infinite;
}

.three-page-site .progress span {
  position: relative;
  overflow: hidden;
}

.three-page-site main::after {
  content: none !important;
  display: none !important;
}

.three-page-site .progress span::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -36%;
  width: 22%;
  background: rgba(255, 255, 255, 0.32);
  transform: skewX(-18deg);
  animation: progressGlint 4.8s ease-in-out 1.8s infinite;
}

@keyframes phoneFloat {
  0%, 100% { transform: translate(-50%, -50%) rotate(5deg); }
  50% { transform: translate(-50%, calc(-50% - 10px)) rotate(4deg); }
}

@keyframes progressGlint {
  0%, 58% { transform: translateX(0) skewX(-18deg); opacity: 0; }
  64% { opacity: 1; }
  82%, 100% { transform: translateX(700%) skewX(-18deg); opacity: 0; }
}

@media (max-height: 820px) and (min-width: 761px) {
  :root {
    --layout-header: 96px;
  }

  .three-page-site .hero-stage {
    /* No floor on short viewports — the base rule already caps the stage to the
       available height so it can't grow taller than the screen and clip. */
    min-height: 0 !important;
  }

  .three-page-site .hero-stage .phone {
    width: clamp(395px, 24vw, 455px) !important;
  }

  .three-page-site .real-phone-hero {
    /* Size the hero phone from available height (divisor > 2.1744 aspect leaves
       a hair of margin) so it fits the stage fully instead of being cropped
       top and bottom on short/landscape screens. */
    width: min(
      clamp(240px, 17vw, 342px),
      calc((100svh - var(--layout-header) - 20px) / 2.22)
    ) !important;
  }

  .three-page-site .compact-how {
    padding-top: 28px !important;
    row-gap: 26px !important;
  }

  .three-page-site .trust-strip {
    display: none;
  }

  .three-page-site .compact-step {
    height: 425px !important;
  }

  .three-page-site .compact-unlock {
    min-height: 270px !important;
  }

  .three-page-site .launch-form h3 {
    font-size: clamp(36px, 2.35vw, 46px) !important;
  }
}

.three-page-site .hero-floating-note-top {
  animation: heroNoteInRight 0.72s cubic-bezier(0.2, 0.9, 0.24, 1.22) 0.62s both;
}

.three-page-site .hero-floating-note-bottom {
  animation: heroNoteInLeft 0.72s cubic-bezier(0.2, 0.9, 0.24, 1.22) 0.78s both;
}

@keyframes heroNoteInRight {
  0% {
    opacity: 0;
    transform: translateX(72px) rotate(2deg) scale(0.96);
  }
  72% {
    opacity: 1;
    transform: translateX(-10px) rotate(2deg) scale(1.03);
  }
  100% {
    opacity: 1;
    transform: translateX(0) rotate(2deg) scale(1);
  }
}

@keyframes heroNoteInLeft {
  0% {
    opacity: 0;
    transform: translateX(-72px) rotate(-2deg) scale(0.96);
  }
  72% {
    opacity: 1;
    transform: translateX(10px) rotate(-2deg) scale(1.03);
  }
  100% {
    opacity: 1;
    transform: translateX(0) rotate(-2deg) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .three-page-site .hero-floating-note-top,
  .three-page-site .hero-floating-note-bottom,
  .three-page-site .real-phone-hero,
  .three-page-site .progress span::after {
    animation: none;
  }
}

.site-footer {
  display: block !important;
  padding: clamp(46px, 6vw, 92px) var(--layout-gutter) 24px;
  background: #161b1c;
  color: var(--canvas);
}

.site-footer-inner,
.site-footer-meta {
  width: min(100%, var(--layout-max));
  margin-inline: auto;
}

.site-footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(420px, 0.75fr);
  gap: clamp(46px, 7vw, 144px);
}

.footer-wordmark {
  color: var(--canvas) !important;
  font-size: clamp(48px, 4vw, 64px) !important;
}

.footer-wordmark span {
  color: var(--red) !important;
}

.footer-intro p {
  margin: 28px 0 22px;
  color: rgba(240, 233, 215, 0.72);
  font-size: clamp(22px, 1.7vw, 30px);
  font-weight: 850;
  line-height: 1.06;
}

.footer-email {
  color: var(--blue);
  font-size: 17px;
  font-weight: 850;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
  padding-top: 8px;
}

.footer-links div {
  display: grid;
  align-content: start;
  gap: 13px;
}

.footer-links span {
  margin-bottom: 6px;
  color: var(--blue);
  font-size: 14px;
  font-weight: 900;
}

.footer-links a {
  width: fit-content;
  color: rgba(240, 233, 215, 0.82);
  font-size: 16px;
  font-weight: 760;
  transition: color 180ms ease, transform 180ms ease;
}

.footer-links a:hover {
  color: var(--red);
  transform: translateX(3px);
}

.site-footer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: clamp(44px, 7vw, 92px);
  padding-top: 18px;
  border-top: 1px solid rgba(240, 233, 215, 0.18);
  color: rgba(240, 233, 215, 0.56);
  font-size: 13px;
  font-weight: 700;
}

.site-footer-meta a {
  margin-left: auto;
  color: rgba(240, 233, 215, 0.78);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 760px) {
  .site-footer {
    padding: 48px 20px 22px;
  }

  .site-footer-inner {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .footer-links {
    gap: 22px;
  }

  .footer-links a {
    font-size: 15px;
  }

  .site-footer-meta {
    display: grid;
    gap: 9px;
    margin-top: 42px;
  }

  .site-footer-meta a {
    margin-left: 0;
  }
}

.legal-site {
  min-height: 100vh;
  background: var(--canvas);
  color: var(--ink);
}

.legal-header {
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 var(--layout-gutter);
  border-bottom: 1px solid rgba(36, 40, 41, 0.16);
}

.legal-header .wordmark {
  color: var(--ink);
  font-family: var(--sans);
  font-size: 45px;
  font-weight: 950;
  letter-spacing: -0.08em;
}

.legal-header .wordmark span {
  color: var(--red);
}

.legal-header > a:last-child {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  min-height: 48px;
  padding: 0 20px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 900;
}

.legal-main {
  width: min(100%, 1120px);
  margin: 0 auto;
  padding: clamp(54px, 9vw, 128px) var(--layout-gutter) clamp(72px, 10vw, 148px);
}

.legal-hero {
  max-width: 860px;
}

.legal-hero > p:first-child {
  margin: 0 0 22px;
  color: var(--blue);
  font-size: 16px;
  font-weight: 900;
}

.legal-hero h1 {
  margin: 0;
  font-size: clamp(64px, 8vw, 124px);
  font-weight: 950;
  line-height: 0.86;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.legal-hero h1 em {
  color: var(--red);
  font-style: normal;
}

.legal-lede {
  max-width: 650px;
  margin: 36px 0 0;
  font-size: clamp(19px, 2vw, 25px);
  font-weight: 650;
  line-height: 1.42;
}

.legal-notice {
  max-width: 760px;
  margin: 56px 0 64px;
  padding: 18px 20px;
  border: 1.5px solid var(--ink);
  border-radius: 14px;
  background: rgba(129, 164, 205, 0.14);
  font-size: 16px;
  font-weight: 650;
  line-height: 1.4;
}

.legal-copy {
  max-width: 780px;
}

.legal-copy section {
  padding: 38px 0;
  border-top: 1px solid rgba(36, 40, 41, 0.22);
}

.legal-copy h2 {
  margin: 0 0 18px;
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 950;
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.legal-copy p,
.legal-copy li,
.legal-copy dd {
  max-width: 72ch;
  margin: 0;
  font-size: 17px;
  font-weight: 520;
  line-height: 1.55;
}

.legal-copy p + p,
.legal-copy p + ul,
.legal-copy p + dl,
.legal-copy dl + p {
  margin-top: 16px;
}

.legal-copy ul {
  display: grid;
  gap: 12px;
  margin: 0;
  padding-left: 22px;
}

.legal-copy li::marker {
  color: var(--red);
}

.legal-copy dl {
  display: grid;
  gap: 10px;
  margin: 0;
}

.legal-copy dt {
  margin-top: 10px;
  color: var(--ink);
  font-size: 17px;
  font-weight: 900;
}

.legal-copy a {
  color: var(--ink);
  font-weight: 850;
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.legal-footer {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 36px;
  padding: 38px var(--layout-gutter);
  background: #161b1c;
}

.legal-footer > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px 24px;
}

.legal-footer > div a {
  color: rgba(240, 233, 215, 0.76);
  font-size: 14px;
  font-weight: 760;
}

@media (max-width: 760px) {
  .legal-header {
    min-height: 82px;
    padding-inline: 20px;
  }

  .legal-header .wordmark {
    font-size: 36px;
  }

  .legal-header > a:last-child {
    min-height: 42px;
    padding-inline: 15px;
    font-size: 12px;
  }

  .legal-main {
    padding: 54px 20px 72px;
  }

  .legal-hero h1 {
    font-size: clamp(54px, 17vw, 72px);
  }

  .legal-notice {
    margin: 42px 0 48px;
    padding: 16px;
    font-size: 14px;
  }

  .legal-copy section {
    padding: 30px 0;
  }

  .legal-copy p,
  .legal-copy li,
  .legal-copy dd,
  .legal-copy dt {
    font-size: 16px;
  }

  .legal-footer {
    display: grid;
    align-items: start;
    padding: 36px 20px;
  }

  .legal-footer > div {
    justify-content: flex-start;
  }
}

/* Mobile how-it-works tiles: screenshot on top, copy below, sized in normal
   flow. The legacy layer's percentage height chains cannot resolve inside
   these tiles on small screens (indefinite parents), so images silently
   escaped their boxes; explicit image widths sidestep the whole problem. */
@media (max-width: 760px) {
  .three-page-site .compact-step {
    display: flex !important;
    flex-direction: column !important;
    align-items: center;
    gap: 22px !important;
    height: auto !important;
    min-height: calc(min(250px, 68vw) * 2.18 + 210px) !important;
    max-height: none !important;
  }

  .three-page-site .compact-step-visual {
    width: 100%;
    display: grid;
    place-items: center;
    flex: none !important;
    height: calc(min(250px, 68vw) * 2.18) !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  .three-page-site .app-phone-visual img {
    width: min(250px, 68vw);
    max-width: none;
    height: auto;
    max-height: none;
  }

  .three-page-site .compact-step-copy {
    width: 100%;
    flex: none !important;
    min-height: 0 !important;
  }
}