/*
 * ONSET HOME
 * Hero, waitlist, contained plane composition, feature rail, and the Experience section.
 * Shared shell and all design tokens live in base.css for direct page-two reuse.
 */

.first-viewport {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/*
 * The 900px+ hero is one centered, capped pair. The art cell clips its own paint,
 * so the plane and trail can never enter the copy/form column at any width.
 */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 590px) minmax(0, 630px);
  column-gap: clamp(40px, 4vw, 60px);
  align-items: center;
  width: min(100%, 1280px);
  min-width: 0;
  margin-inline: auto;
  flex: 0 0 auto;
  padding: clamp(72px, 10svh, 106px) 0 clamp(44px, 6svh, 70px);
}

.hero-copy {
  position: relative;
  z-index: 2;
  min-width: 0;
  container-type: inline-size;
}

.eyebrow {
  margin: 0 0 clamp(18px, 1.35vw, 22px);
  color: var(--ink-muted);
  font-size: clamp(11px, 0.73vw, 13px);
  font-weight: 700;
  letter-spacing: 0.225em;
  line-height: 1;
}

.hero h1 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  /* Fallback first; cqi then keeps the long first line inside the copy cell at 900–1200px. */
  font-size: clamp(36px, 4.25vw, 82px);
  font-size: clamp(36px, 9.7cqi, 82px);
  font-weight: 400;
  font-optical-sizing: auto;
  letter-spacing: -0.035em;
  line-height: 1.13;
}

.headline-line {
  display: block;
  white-space: nowrap;
}

.hero-description {
  max-width: 100%;
  margin: clamp(20px, 1.65vw, 26px) 0 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(15px, 4.05cqi, 21px);
  font-weight: 400;
  font-optical-sizing: auto;
  letter-spacing: -0.012em;
  line-height: 1.3;
  white-space: normal;
  text-wrap: balance;
}

.signup {
  width: min(100%, 590px);
  margin-top: clamp(31px, 2.5vw, 40px);
}

.signup-slot {
  position: relative;
  height: clamp(62px, 4.1vw, 70px);
}

.waitlist-form,
.confirmation {
  position: absolute;
  inset: 0;
}

.waitlist-form {
  display: flex;
  align-items: center;
  padding: clamp(7px, 0.5vw, 9px);
  border: var(--border-hairline) solid var(--ink-rule-strong);
  border-radius: var(--radius-control);
  background: var(--surface);
  box-shadow: var(--shadow-control);
  transition: border-color 220ms ease, box-shadow 220ms ease, opacity 220ms ease,
    transform 320ms cubic-bezier(0.22, 0.72, 0.28, 1), filter 220ms ease;
}

.waitlist-form:focus-within {
  border-color: var(--ink-focus);
  box-shadow: var(--shadow-focus), var(--shadow-control);
}

.waitlist-form input {
  min-width: 0;
  height: 100%;
  flex: 1;
  padding-inline: clamp(18px, 1.5vw, 30px);
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
  font-size: clamp(12px, 0.78vw, 15px);
}

.waitlist-form input::placeholder {
  color: var(--ink-muted);
  opacity: 1;
}

.waitlist-form button {
  position: relative;
  width: clamp(148px, 10.5vw, 184px);
  height: 100%;
  flex: 0 0 auto;
  border: var(--border-hairline) solid var(--button-border);
  border-radius: calc(var(--radius-control) - 2px);
  color: var(--button-text);
  background: linear-gradient(145deg, var(--button-light) 0%, var(--button) 58%, var(--button-deep) 100%);
  box-shadow: var(--shadow-button);
  font-size: clamp(12px, 0.78vw, 15px);
  font-weight: 500;
  cursor: pointer;
  overflow: hidden;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.waitlist-button-label,
.waitlist-button-loader {
  transition: opacity 180ms ease, transform 220ms cubic-bezier(0.22, 0.72, 0.28, 1);
}

.waitlist-button-label {
  display: block;
}

.waitlist-button-loader {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  opacity: 0;
  transform: translateY(7px);
}

.waitlist-button-loader i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  animation: waitlist-loading 760ms ease-in-out infinite alternate;
}

.waitlist-button-loader i:nth-child(2) { animation-delay: 120ms; }
.waitlist-button-loader i:nth-child(3) { animation-delay: 240ms; }

.waitlist-form button.is-sending .waitlist-button-label {
  opacity: 0;
  transform: translateY(-7px);
}

.waitlist-form button.is-sending .waitlist-button-loader {
  opacity: 1;
  transform: translateY(0);
}

.waitlist-form button:hover {
  transform: translateY(-1px);
  background: linear-gradient(145deg, var(--button) 0%, var(--button-hover) 100%);
  box-shadow: var(--shadow-button-hover);
}

.waitlist-form button:active {
  transform: translateY(1px) scale(0.98);
  background: var(--button-hover);
  box-shadow: var(--shadow-button);
}

.confirmation {
  /* THE RECEIPT: on success the form pill becomes this card, in the form's own dress —
     hairline, paper, the same shadow — so the moment reads as a transformation, not a swap. */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(12px, 0.9vw, 15px);
  margin: 0;
  padding: clamp(16px, 1.2vw, 20px) clamp(18px, 1.4vw, 24px);
  border: var(--border-hairline) solid var(--ink-rule-strong);
  border-radius: var(--radius-control);
  background: var(--surface);
  box-shadow: var(--shadow-control);
  opacity: 0;
  /* Sits invisibly over the form until success; must never intercept its clicks. */
  pointer-events: none;
  color: var(--ink);
  text-align: left;
  transform: translateY(4px) scale(0.995);
  transition: opacity 180ms ease 40ms, transform 300ms cubic-bezier(0.16, 1, 0.3, 1) 40ms;
}

.confirmation-head {
  display: flex;
  align-items: center;
  gap: clamp(10px, 0.8vw, 13px);
}

.confirmation-rule {
  height: 1px;
  background: var(--ink-rule-strong);
  opacity: 0.55;
  transform: scaleX(0);
  transform-origin: left center;
}

.confirmation-mark {
  width: clamp(24px, 1.8vw, 29px);
  height: clamp(24px, 1.8vw, 29px);
  flex: 0 0 auto;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.65;
  opacity: 0;
  transform: scale(0.88);
}

.confirmation-mark path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.confirmation-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
  opacity: 0;
  transform: translateY(3px);
}

.confirmation-copy strong {
  font-family: var(--font-display);
  font-size: clamp(17px, 1.05vw, 20px);
  font-weight: 500;
  letter-spacing: -0.018em;
  line-height: 1;
}

.confirmation-copy span {
  color: var(--ink-muted);
  font-size: clamp(10px, 0.72vw, 13px);
  line-height: 1.25;
}

.confirmation:focus {
  outline: none;
}

.waitlist-form button:disabled {
  cursor: default;
  transform: none;
}

.signup-error {
  margin: clamp(10px, 0.8vw, 13px) 0 0;
  color: var(--ink);
  font-size: clamp(11px, 0.75vw, 13px);
  font-weight: 550;
  line-height: 1.3;
}

.signup.is-invalid .waitlist-form {
  border-color: var(--ink-focus);
  box-shadow: var(--shadow-focus), var(--shadow-control);
  animation: waitlist-nudge 360ms cubic-bezier(0.22, 0.72, 0.28, 1);
}

.signup.is-complete .waitlist-form {
  opacity: 0;
  pointer-events: none;
  filter: none;
  transform: scale(0.99);
}

.signup.is-complete .signup-slot {
  height: auto;
}

.signup.is-complete .waitlist-form {
  position: absolute;
  inset: 0 0 auto;
}

.signup.is-complete .confirmation {
  position: relative;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.signup.is-complete .confirmation-rule {
  /* The rule draws left-to-right after the words land, leading the eye to the ask. */
  transition: transform 340ms cubic-bezier(0.22, 0.72, 0.28, 1) 300ms;
  transform: scaleX(1);
}

.signup.is-complete .confirmation-mark {
  animation: waitlist-mark-in 280ms cubic-bezier(0.16, 1, 0.3, 1) 55ms both;
}

.signup.is-complete .confirmation-mark path {
  animation: waitlist-check-draw 240ms ease-out 70ms both;
}

.signup.is-complete .confirmation-copy {
  animation: waitlist-copy 260ms cubic-bezier(0.16, 1, 0.3, 1) 80ms both;
}

/* THE INVITE MOMENT: appears only after a real signup — the reader who just chose Onset is
   the one person primed to hand it on. It takes the privacy line's seat (that line's job is
   done the moment the email is in). The phone gets the native share sheet; desktop copies. */
.invite {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin: 0;
}

.invite-lead {
  color: var(--ink-muted);
  font-size: clamp(11px, 0.75vw, 13px);
  line-height: 1.3;
}

.invite-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border: var(--border-hairline) solid var(--ink-rule-strong);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: clamp(11px, 0.75vw, 13px);
  font-weight: 550;
  cursor: pointer;
  transition: border-color 180ms ease, transform 180ms ease;
}

.invite-button:hover,
.invite-button.is-copied {
  border-color: var(--ink-focus);
}

.invite-button:active {
  transform: translateY(1px);
}

.invite-button svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.signup.is-complete .privacy-line {
  display: none;
}

.signup.is-complete .invite {
  /* Lands last: confirmation first, the rule, then the ask. */
  animation: waitlist-copy 300ms cubic-bezier(0.16, 1, 0.3, 1) 420ms both;
}

/* THE SEND-OFF: signing up launches the plane — a small bank upward, then it settles back
   into its drift. The frame carries the swoop so the float underneath never stutters. */
.plane-stage.is-sent .plane-frame {
  animation: plane-launch 1600ms cubic-bezier(0.3, 0.7, 0.2, 1) 80ms both;
}

@keyframes plane-launch {
  0%, 100% { transform: translate(-50%, -50%) rotate(0deg); }
  34% { transform: translate(-46.2%, -55.5%) rotate(-4.6deg); }
  66% { transform: translate(-48.8%, -51.4%) rotate(-1.4deg); }
}

@media (prefers-reduced-motion: reduce) {
  .plane-stage.is-sent .plane-frame {
    animation: none;
  }

  .signup.is-complete .confirmation-rule {
    transition: none;
    transform: scaleX(1);
  }

  .signup.is-complete .invite {
    animation: none;
  }
}

.privacy-line {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: clamp(14px, 1vw, 16px) 0 0;
  color: var(--ink-muted);
  font-size: clamp(10px, 0.7vw, 12px);
  line-height: 1;
}

.privacy-line svg {
  width: clamp(14px, 0.9vw, 18px);
  height: clamp(11px, 0.72vw, 14px);
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.15;
}

.plane-stage {
  position: relative;
  z-index: 1;
  min-width: 0;
  /* Keeps the first screen compact while the frame scales with its own column. */
  min-height: clamp(330px, 26vw, 470px);
  width: 100%;
  align-self: center;
  /* THE WHOLE PLANE: guard the copy-side edge, but never crop the drawing itself. */
  overflow: visible;
  clip-path: inset(-24% -24% -24% 0);
  pointer-events: none;
  isolation: isolate;
}

.plane-frame {
  position: absolute;
  top: 50%;
  left: 50%;
  /* The source PNG is a transparent square; 122% gives its drawn plane a full-column scale. */
  width: min(122%, 780px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}

.plane-entry {
  position: relative;
  width: 100%;
  height: 100%;
  opacity: 0;
  animation: plane-arrive 1050ms 360ms cubic-bezier(0.22, 0.78, 0.24, 1) forwards;
}

.plane-art {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: plane-float 7s 1.45s ease-in-out infinite;
  will-change: transform;
}

.plane-shadow {
  /* Coordinates are calibrated to the landing point inside plane-alpha.png. */
  position: absolute;
  z-index: 0;
  top: 71%;
  left: 49%;
  width: 31%;
  height: 4%;
  border-radius: 50%;
  opacity: 0.15;
  background: var(--plane-shadow-color);
  filter: blur(clamp(15px, 1.2vw, 26px));
  transform: rotate(-5deg) scaleY(0.7);
  transform-origin: center;
  animation: shadow-breathe 7s 1.45s ease-in-out infinite;
  will-change: transform, opacity;
}

.reveal {
  opacity: 0;
  animation: reveal-up 700ms cubic-bezier(0.22, 0.72, 0.28, 1) forwards;
}

.reveal-one { animation-delay: 60ms; }

.reveal-two { animation-delay: 145ms; }

.reveal-three { animation-delay: 240ms; }

.reveal-four { animation-delay: 330ms; }

.reveal-five { animation-delay: 430ms; }

.reveal-six { animation-delay: 540ms; }

.scroll-cue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  flex: 0 0 auto;
  gap: clamp(6px, 0.5vw, 9px);
  margin: 0;
  padding: 3px 0 4px;
  color: var(--ink-muted);
  font-size: clamp(9px, 0.64vw, 11px);
  font-weight: 500;
  letter-spacing: 0.025em;
  line-height: 1;
  text-decoration: none;
  transition: color 180ms ease;
}

.scroll-cue:hover,
.scroll-cue:focus-visible {
  color: var(--ink);
}

.scroll-cue:focus-visible {
  border-radius: 2px;
  outline: var(--border-hairline) solid var(--ink-focus);
  outline-offset: 3px;
}

.scroll-cue-arrow {
  display: block;
  width: clamp(9px, 0.65vw, 11px);
  height: 13px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.15;
  animation: scroll-cue-nudge 2.8s ease-in-out infinite;
}

/*
 * RECENT STORIES — the live rail. Headlines from the newsstand drift under the hero like a
 * wire ticker: the label keeps the shell's margin while the rail runs edge to edge, fading
 * out under paper at both ends. Server code joins the items in; no rows → section hidden.
 */
.stories {
  /* THE INK BAND: the live rail runs on dark paper — the same sketch with the lights out.
     The whole section escapes the shell to both edges; the label re-insets to the shell's
     own left margin so it still lines up with the hero copy above it. */
  --band-ink: #efeae1;
  --band-ink-muted: rgba(239, 234, 225, 0.52);
  --band-rule: rgba(245, 241, 235, 0.15);
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: clamp(34px, 4.8svh, 50px) 0 clamp(38px, 4.8svh, 56px);
  background: linear-gradient(180deg, #37342f 0%, #2f2c28 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.18);
}

.stories-label {
  margin: 0 0 clamp(20px, 2.6svh, 30px);
  padding-inline: max(var(--container-gutter), calc((100vw - var(--container-max)) / 2));
  color: var(--band-ink-muted);
  font-weight: 700;
}

.stories-rail {
  width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  /* Headlines surface from under the paper at one edge and slide back under it at the other. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 clamp(28px, 7vw, 130px), #000 calc(100% - clamp(90px, 24vw, 460px)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 clamp(28px, 7vw, 130px), #000 calc(100% - clamp(90px, 24vw, 460px)), transparent 100%);
}

.stories-rail::-webkit-scrollbar {
  display: none;
}

/* Scripted only when the drift is actually running; a static rail stays hand-scrollable. */
.stories-rail.is-marquee {
  overflow: hidden;
  overflow: clip;
}

.stories-track {
  display: flex;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
}

.stories-track.is-flowing {
  animation: stories-drift var(--stories-duration, 80s) linear infinite;
  will-change: transform;
}

/* Reading beats motion: the drift holds still under a pointer or a keyboard focus. */
.stories-rail:hover .stories-track.is-flowing,
.stories-rail:focus-within .stories-track.is-flowing {
  animation-play-state: paused;
}

.stories-item {
  flex: 0 0 auto;
  width: clamp(250px, 17.5vw, 320px);
  padding-inline: clamp(24px, 2.1vw, 40px);
  border-left: var(--border-hairline) solid var(--band-rule);
}

.stories-link {
  display: block;
  color: var(--band-ink);
  font-family: var(--font-display);
  font-size: clamp(19px, 1.35vw, 25px);
  font-weight: 400;
  font-optical-sizing: auto;
  letter-spacing: -0.02em;
  line-height: 1.3;
  text-decoration: none;
  transition: opacity 220ms ease;
}

.stories-link:hover,
.stories-link:focus-visible {
  opacity: 0.58;
}

.stories-link:focus-visible {
  outline: none;
  text-decoration: underline;
  text-decoration-thickness: var(--border-hairline);
  text-underline-offset: 4px;
}

@keyframes stories-drift {
  from { transform: translateX(0); }
  to { transform: translateX(calc(var(--stories-loop, 50%) * -1)); }
}

/*
 * PAGE TWO — WHY ONSET
 * Three quiet UI vignettes make the case before the signal-to-story pipeline begins.
 */
/*
 * ONE SECTION RHYTHM: every scrolling section breathes by the same token, so the gaps
 * between them read identically at every width. (The experience section is exempt — it is
 * viewport-locked and centers its own content.)
 */
:root {
  --section-space: clamp(72px, 7vw, 118px);
}

.why-onset {
  padding: var(--section-space) 0;
}

.why-onset-header {
  width: min(100%, 780px);
  margin-inline: auto;
  text-align: center;
}

.why-onset-header .eyebrow {
  margin-bottom: clamp(20px, 1.7vw, 28px);
}

.why-onset-header h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(42px, 5.1vw, 72px);
  font-weight: 400;
  font-optical-sizing: auto;
  letter-spacing: -0.035em;
  line-height: 1.03;
}

.why-onset-header h2 span {
  display: block;
  white-space: nowrap;
}

.why-onset-grid {
  --why-tile-width: clamp(230px, 25vw, 360px);
  display: grid;
  grid-template-columns: repeat(3, var(--why-tile-width));
  justify-content: center;
  gap: clamp(24px, 3vw, 44px);
  width: min(100%, 1240px);
  margin: clamp(52px, 5vw, 76px) auto 0;
}

.why-onset-item {
  min-width: 0;
}

.why-onset-tile {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.06;
  overflow: hidden;
  border: var(--border-hairline) solid var(--ink-rule);
  border-radius: var(--radius-card);
  background: var(--paper) url("/v2/tile-backdrop.png") center / cover no-repeat;
  box-shadow: var(--shadow-card);
  container-type: inline-size;
  isolation: isolate;
  pointer-events: none;
}

/* THE TILE HOVERS: each tile acts out its own caption. Hovering anywhere on the item
   (tile or words) lifts the card; the scene inside answers. Pointer devices only, and
   reduced motion keeps everything still. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .why-onset-tile,
  .why-product-shot,
  .why-platform-icon,
  .why-platform-count {
    transition: transform 420ms cubic-bezier(0.22, 0.72, 0.28, 1),
      box-shadow 420ms cubic-bezier(0.22, 0.72, 0.28, 1),
      border-color 420ms ease;
  }

  .why-onset-item:hover .why-onset-tile {
    border-color: var(--ink-rule-strong);
    box-shadow: 0 26px 38px rgba(75, 65, 48, 0.1), 0 3px 5px rgba(75, 65, 48, 0.06),
      inset 0 1px 0 rgba(255, 255, 255, 0.42);
    transform: translateY(-5px);
  }

  /* "Breaks everywhere": the four platforms scatter outward, badges first to the party. */
  .why-onset-item:hover .why-platform-icon {
    transition-timing-function: cubic-bezier(0.34, 1.45, 0.64, 1);
  }

  .why-onset-item:hover .why-platform-icon--x {
    transform: translate(-7%, -7%) rotate(-4deg);
  }

  .why-onset-item:hover .why-platform-icon--tiktok {
    transform: translate(7%, -6%) rotate(3.5deg);
    transition-delay: 40ms;
  }

  .why-onset-item:hover .why-platform-icon--instagram {
    transform: translate(-6%, 7%) rotate(3deg);
    transition-delay: 70ms;
  }

  .why-onset-item:hover .why-platform-icon--youtube {
    transform: translate(7%, 7%) rotate(-3.5deg);
    transition-delay: 100ms;
  }

  .why-onset-item:hover .why-platform-count {
    transform: scale(1.18);
    transition-delay: 140ms;
  }

  /* "Finds what matters": the phone rises to meet the reader. */
  .why-onset-item:hover .why-product-shot {
    transform: translateY(-1.6%) scale(1.02);
    transition-timing-function: cubic-bezier(0.34, 1.3, 0.64, 1);
  }
}

.why-onset-item h3 {
  margin: clamp(20px, 1.8vw, 27px) 0 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(23px, 1.7vw, 29px);
  font-weight: 500;
  font-optical-sizing: auto;
  letter-spacing: -0.022em;
  line-height: 1.08;
}

.why-onset-item > p {
  max-width: 34ch;
  margin: clamp(10px, 0.9vw, 14px) 0 0;
  color: var(--ink-muted);
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.5;
}

.js .why-onset-header[data-scroll-reveal],
.js .why-onset-grid[data-scroll-reveal] .why-onset-item {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 520ms cubic-bezier(0.22, 0.72, 0.28, 1), transform 520ms cubic-bezier(0.22, 0.72, 0.28, 1);
}

.js .why-onset-header[data-scroll-reveal].is-visible,
.js .why-onset-grid[data-scroll-reveal].is-visible .why-onset-item {
  opacity: 1;
  transform: translateY(0);
}

.js .why-onset-grid[data-scroll-reveal] .why-onset-item:nth-child(2) {
  transition-delay: 280ms;
}

.js .why-onset-grid[data-scroll-reveal] .why-onset-item:nth-child(3) {
  transition-delay: 440ms;
}

.js .why-onset-grid[data-scroll-reveal] .why-onset-item:first-child {
  transition-delay: 120ms;
}

.why-feed-card {
  border: var(--border-hairline) solid var(--ink-rule-strong);
  background: var(--paper-light);
  box-shadow: var(--shadow-pill);
}

.why-platform-grid {
  position: absolute;
  inset: 20% 28%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: center;
  gap: clamp(18px, 6cqi, 24px);
}

.why-platform-icon {
  position: relative;
  display: grid;
  aspect-ratio: 1;
  place-items: center;
  border: var(--border-hairline) solid var(--ink-rule);
  border-radius: 28%;
  color: var(--ink);
  background: var(--paper-light);
  box-shadow: var(--shadow-card);
}

.why-platform-icon svg {
  display: block;
  width: 43%;
  height: 43%;
  fill: currentColor;
}

.why-platform-icon--x svg { width: 40%; height: 40%; }
.why-platform-icon--tiktok svg { width: 42%; height: 42%; }
.why-platform-icon--youtube svg { width: 48%; height: 48%; }

.why-platform-count {
  position: absolute;
  top: -10%;
  right: -10%;
  display: grid;
  width: clamp(18px, 6cqi, 24px);
  aspect-ratio: 1;
  place-items: center;
  border: var(--border-hairline) solid var(--ink);
  border-radius: 50%;
  color: var(--ink);
  background: var(--paper-light);
  box-shadow: var(--shadow-pill);
  font-size: clamp(5.5px, 1.6cqi, 7px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}

.why-feed-avatar {
  position: absolute;
  display: block;
  border: var(--border-hairline) solid var(--ink-rule-strong);
  border-radius: 50%;
  background: var(--surface);
}

.why-feed-lines {
  overflow: visible;
  fill: none;
  stroke: var(--ink-faint);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.25;
}

.why-feed-lines path {
  vector-effect: non-scaling-stroke;
}

.why-feed-window {
  position: absolute;
  inset: 20% 21%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 18%, black 82%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, black 18%, black 82%, transparent 100%);
}

.why-feed-track {
  animation: why-feed-drift 16s linear infinite;
  will-change: transform;
}

.why-feed-run {
  display: grid;
  gap: clamp(4.5px, 1.9cqi, 8px);
  padding-bottom: clamp(4.5px, 1.9cqi, 8px);
}

.why-feed-card {
  position: relative;
  border-radius: clamp(7px, 2.6cqi, 11px);
  box-shadow: var(--shadow-control);
}

.why-feed-card--text {
  height: clamp(30px, 12cqi, 48px);
}

.why-feed-card--video,
.why-feed-card--photo {
  height: clamp(40px, 16cqi, 60px);
}

.why-feed-card--short {
  width: 87%;
  justify-self: end;
}

.why-feed-avatar {
  top: 15%;
  left: 6%;
  width: clamp(8px, 2.8cqi, 12px);
  aspect-ratio: 1;
}

.why-feed-lines {
  position: absolute;
  top: 18%;
  right: 5%;
  width: 75%;
  height: 64%;
  stroke-width: 1.15;
}

.why-feed-media-block {
  position: absolute;
  inset: 12% 7%;
  display: grid;
  place-items: center;
  border-radius: clamp(5px, 1.8cqi, 8px);
  background: rgba(19, 19, 18, 0.05);
}

.why-feed-glyph {
  display: block;
  width: clamp(20px, 6.4cqi, 24px);
  height: auto;
  overflow: visible;
  fill: none;
  stroke: var(--ink-faint);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.15;
}

.why-feed-glyph > * {
  vector-effect: non-scaling-stroke;
}

.why-feed-glyph-fill {
  fill: var(--ink-faint);
  stroke: none;
}

@keyframes why-feed-drift {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}

.why-product-shot {
  position: absolute;
  top: 1.5cqi;
  left: 9.6cqi;
  display: block;
  width: 80%;
  max-width: none;
  height: auto;
}

@media (max-width: 899px) {
  .why-onset {
    padding: clamp(76px, 10vw, 104px) 0 clamp(76px, 10vw, 98px);
  }

  .why-onset-header h2 {
    font-size: clamp(32px, 6.5vw, 50px);
  }

  .why-onset-grid {
    grid-template-columns: min(100%, 360px);
    row-gap: clamp(48px, 8vw, 66px);
    margin-top: clamp(46px, 7vw, 62px);
  }
}

@media (max-width: 560px) {
  .why-onset {
    padding: clamp(68px, 18vw, 84px) 0 clamp(74px, 19vw, 90px);
  }

  .why-onset-header .eyebrow {
    margin-bottom: 18px;
    font-size: clamp(9px, 2.55vw, 10px);
    letter-spacing: 0.19em;
  }

  .why-onset-header h2 {
    font-size: clamp(26px, 8.15vw, 38px);
    line-height: 1.05;
  }

  .why-onset-grid {
    row-gap: clamp(50px, 14vw, 60px);
    margin-top: 42px;
  }

  /* THE TILE HOVERS: each tile acts out its own caption. Hovering anywhere on the item
   (tile or words) lifts the card; the scene inside answers. Pointer devices only, and
   reduced motion keeps everything still. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .why-onset-tile,
  .why-product-shot,
  .why-platform-icon,
  .why-platform-count {
    transition: transform 420ms cubic-bezier(0.22, 0.72, 0.28, 1),
      box-shadow 420ms cubic-bezier(0.22, 0.72, 0.28, 1),
      border-color 420ms ease;
  }

  .why-onset-item:hover .why-onset-tile {
    border-color: var(--ink-rule-strong);
    box-shadow: 0 26px 38px rgba(75, 65, 48, 0.1), 0 3px 5px rgba(75, 65, 48, 0.06),
      inset 0 1px 0 rgba(255, 255, 255, 0.42);
    transform: translateY(-5px);
  }

  /* "Breaks everywhere": the four platforms scatter outward, badges first to the party. */
  .why-onset-item:hover .why-platform-icon {
    transition-timing-function: cubic-bezier(0.34, 1.45, 0.64, 1);
  }

  .why-onset-item:hover .why-platform-icon--x {
    transform: translate(-7%, -7%) rotate(-4deg);
  }

  .why-onset-item:hover .why-platform-icon--tiktok {
    transform: translate(7%, -6%) rotate(3.5deg);
    transition-delay: 40ms;
  }

  .why-onset-item:hover .why-platform-icon--instagram {
    transform: translate(-6%, 7%) rotate(3deg);
    transition-delay: 70ms;
  }

  .why-onset-item:hover .why-platform-icon--youtube {
    transform: translate(7%, 7%) rotate(-3.5deg);
    transition-delay: 100ms;
  }

  .why-onset-item:hover .why-platform-count {
    transform: scale(1.18);
    transition-delay: 140ms;
  }

  /* "Finds what matters": the phone rises to meet the reader. */
  .why-onset-item:hover .why-product-shot {
    transform: translateY(-1.6%) scale(1.02);
    transition-timing-function: cubic-bezier(0.34, 1.3, 0.64, 1);
  }
}

.why-onset-item h3 {
    margin-top: 18px;
    font-size: clamp(22px, 6.3vw, 26px);
  }

  .why-onset-item > p {
    margin-top: 9px;
    font-size: clamp(13.5px, 3.8vw, 15px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .why-onset-header[data-scroll-reveal],
  .js .why-onset-grid[data-scroll-reveal] .why-onset-item {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .why-feed-track {
    animation: none;
    transform: none;
  }
}

/*
 * PAGE THREE — HOW ONSET WORKS
 * One measured stage carries the story from signal to alert to the finished article.
 */
.experience {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  align-items: center;
  min-height: 100svh;
  padding: clamp(44px, 5svh, 64px) 0 clamp(22px, 2.8svh, 34px);
}

.experience-pipeline {
  position: relative;
  display: grid;
  grid-template-columns: max-content max-content;
  column-gap: 104px;
  align-items: stretch;
  justify-content: center;
  width: min(100%, 1240px);
  min-width: 0;
  margin-inline: auto;
  isolation: isolate;
}

.experience-left {
  position: relative;
  z-index: 2;
  min-width: 0;
}

.experience-copy .eyebrow {
  margin-bottom: clamp(22px, 1.7vw, 28px);
}

.experience-copy h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(42px, 4.5vw, 68px);
  font-weight: 400;
  font-optical-sizing: auto;
  letter-spacing: -0.035em;
  line-height: 1.04;
}

.experience-copy h2 span {
  display: block;
  white-space: nowrap;
}

.experience-left-flow {
  position: relative;
  width: min(100%, 520px);
  margin-top: clamp(40px, 4.6svh, 58px);
}

.experience-step {
  position: relative;
  z-index: 2;
  margin: 0;
}

.experience-step-label {
  margin: 0 0 clamp(9px, 0.8vw, 12px);
  color: var(--ink-muted);
  font-size: clamp(9.5px, 0.68vw, 12px);
  font-weight: 700;
  letter-spacing: 0.185em;
  line-height: 1.2;
  white-space: nowrap;
}

.experience-art {
  display: block;
  max-width: 100%;
  height: auto;
}

.experience-step-signal {
  width: clamp(360px, 30vw, 430px);
}

.signal-art {
  width: 100%;
}

.experience-step-alert {
  width: clamp(400px, 33vw, 480px);
  margin-top: clamp(58px, 6.5svh, 78px);
}

.notification-card {
  width: 100%;
}

.experience-step-story {
  z-index: 2;
  justify-self: center;
  width: clamp(230px, 19vw, 310px);
  text-align: center;
}

.experience-step-story .experience-step-label {
  text-align: center;
}

.phone-art {
  width: 100%;
}

.experience-connectors {
  position: absolute;
  z-index: 5;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  pointer-events: none;
}

.connector-path {
  stroke: var(--ink-faint);
  stroke-dasharray: 4.5 8;
  stroke-linecap: round;
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
}

.connector-reveal {
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
  stroke-width: 9;
  vector-effect: non-scaling-stroke;
}

.connector-node {
  fill: var(--paper-light);
  stroke: var(--ink-muted);
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
}

.connector-arrow {
  fill: none;
  stroke: var(--ink-muted);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.3;
  vector-effect: non-scaling-stroke;
}

.connector-arrow-signal {
  opacity: 0;
}

.js .experience-animate {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 480ms cubic-bezier(0.22, 0.72, 0.28, 1), transform 480ms cubic-bezier(0.22, 0.72, 0.28, 1);
}

.js .experience-step-label.experience-animate {
  transform: translateY(7px);
}

.js .phone-art.experience-animate {
  transition-duration: 620ms;
}

.js .connector-reveal {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 560ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.js .connector-node,
.js .connector-arrow {
  opacity: 0;
  transition: opacity 240ms ease;
}

.js .experience-pipeline.is-visible .experience-animate {
  opacity: 1;
  transform: translateY(0);
}

.js .experience-pipeline.is-visible .connector-reveal-signal,
.js .experience-pipeline.is-visible .connector-reveal-story {
  stroke-dashoffset: 0;
}

.experience-delay-heading { transition-delay: 0ms; }

.experience-delay-title { transition-delay: 50ms; }

.experience-delay-signal-label { transition-delay: 120ms; }

.experience-delay-signal { transition-delay: 200ms; }

.experience-delay-alert-label { transition-delay: 1140ms; }

.experience-delay-alert { transition-delay: 1220ms; }

.experience-delay-story-label { transition-delay: 1810ms; }

.experience-delay-phone { transition-delay: 1840ms; }

.js .experience-pipeline.is-visible .connector-reveal-signal {
  transition-delay: 560ms;
}

.js .experience-pipeline.is-visible .connector-reveal-story {
  transition-delay: 1260ms;
  transition-duration: 540ms;
}

.js .experience-pipeline.is-visible :is(.connector-node-signal, .connector-node-alert) {
  opacity: 1;
  transition-delay: 1120ms;
}

.js .experience-pipeline.is-visible .connector-arrow-story {
  opacity: 1;
  transition-delay: 1800ms;
}

/*
 * PAGE FOUR — THE INK PASSAGE
 * The live edition is the page's second dark register: two knife-cut edges hold one ink room
 * between the paper experience and the paper closer.
 */
.showcase {
  --showcase-ground: #302d29;
  --showcase-ground-deep: #292724;
  --showcase-panel: #3d3a35;
  --showcase-panel-deep: #383530;
  --showcase-ink: #efeae1;
  --showcase-muted: rgba(239, 234, 225, 0.62);
  --showcase-faint: rgba(239, 234, 225, 0.62);
  --showcase-rule: rgba(245, 241, 235, 0.15);
  --showcase-ember: #e4a08d;
  position: relative;
  z-index: 1;
  width: 100vw;
  margin: 0 0 0 calc(50% - 50vw);
  padding:
    clamp(58px, 7.5svh, 86px)
    max(var(--container-gutter), calc((100vw - 1460px) / 2))
    clamp(64px, 8.5svh, 96px);
  overflow: hidden;
  background: var(--showcase-ground);
  background-color: var(--showcase-ground);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.18);
  isolation: isolate;
}

.showcase .fp-plate {
  --ink: var(--showcase-ink);
  /* The dark plate must re-point the display ink too, or headlines go near-black on charcoal. */
  --ink-strong: var(--showcase-ink);
  --ink-rule: var(--showcase-rule);
  --ink-muted: var(--showcase-muted);
  --live: var(--showcase-ember);
}

.showcase .fp-live-dot {
  animation-name: showcase-fp-live-pulse;
}

@keyframes showcase-fp-live-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(228, 160, 141, 0.28); }
  55% { box-shadow: 0 0 0 5px rgba(228, 160, 141, 0); }
}

.showcase-inner {
  position: relative;
  z-index: 1;
  width: min(100%, 1320px);
  margin-inline: auto;
}

.showcase-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 64px);
  margin-bottom: clamp(28px, 4svh, 44px);
  padding-bottom: clamp(16px, 2svh, 22px);
}

.showcase-heading {
  min-width: 0;
}

.showcase-kicker {
  margin: 0 0 clamp(10px, 1.25svh, 14px);
  color: var(--showcase-faint);
  font-size: clamp(9px, 0.68vw, 11px);
  font-weight: 700;
  letter-spacing: 0.22em;
  line-height: 1;
}

.showcase-title {
  margin: 0;
  color: var(--showcase-ink);
  font-family: var(--font-display);
  font-size: clamp(26px, 2.4vw, 38px);
  font-weight: 400;
  font-optical-sizing: auto;
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-wrap: balance;
}

.showcase-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 32px;
  margin: 0 0 2px;
  color: var(--showcase-ink);
  font-size: clamp(11px, 0.82vw, 14px);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 220ms ease;
}

.showcase-cta span {
  display: inline-block;
  transition: transform 220ms ease;
}

.showcase-cta:hover,
.showcase-cta:focus-visible {
  opacity: 0.68;
}

.showcase-cta:hover span,
.showcase-cta:focus-visible span {
  transform: translateX(3px);
}

.js .showcase-header[data-scroll-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 640ms cubic-bezier(0.22, 0.72, 0.28, 1), transform 640ms cubic-bezier(0.22, 0.72, 0.28, 1);
}

.js .showcase-header[data-scroll-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .js .showcase-header[data-scroll-reveal],
  .js .showcase-header[data-scroll-reveal].is-visible {
    opacity: 1;
    transform: none !important;
    transition: none !important;
  }

  .showcase-cta,
  .showcase-cta span {
    transition: none !important;
  }

  .showcase-cta:hover span,
  .showcase-cta:focus-visible span {
    transform: none !important;
  }
}


/*
 * PAGE FIVE — THE CLOSER
 * The source world and the second signup form close the story before the dark footer.
 */
.closer {
  padding: var(--section-space) 0;
}

.closer-inner {
  display: grid;
  /* The globe is a companion to the statement, not a rival: smaller art cell, wide fixed air. */
  grid-template-columns: clamp(300px, 29vw, 450px) clamp(290px, 29vw, 460px);
  align-items: center;
  justify-content: center;
  gap: clamp(96px, 11vw, 210px);
  width: min(100%, 1260px);
  margin-inline: auto;
}

.closer-copy {
  min-width: 0;
  container-type: inline-size;
}

.closer-copy .eyebrow {
  margin-bottom: clamp(20px, 1.7vw, 28px);
}

.closer-copy h2,
.final-cta h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(38px, 4.4vw, 66px);
  font-weight: 400;
  font-optical-sizing: auto;
  letter-spacing: -0.035em;
  line-height: 1.04;
}

.closer-copy h2 {
  font-size: min(clamp(38px, 4.4vw, 66px), 12.8cqi);
}

.closer-copy h2 span {
  display: block;
  white-space: nowrap;
}

.closer-description {
  max-width: 42ch;
  margin: clamp(22px, 1.8vw, 29px) 0 0;
  color: var(--ink-muted);
  font-family: var(--font-display);
  font-size: clamp(16px, 1.25vw, 20px);
  letter-spacing: -0.01em;
  line-height: 1.42;
}

.closer-art {
  min-width: 0;
}

.closer-art img {
  display: block;
  width: 100%;
  height: auto;
}

.final-cta {
  position: relative;
  width: min(100%, 1260px);
  margin-inline: auto;
  /* The last block before the dark footer earns a little extra room beneath it. */
  padding: var(--section-space) 0 calc(var(--section-space) * 1.2);
  isolation: isolate;
}

.final-cta-inner {
  position: relative;
  z-index: 2;
  width: min(100%, 620px);
  margin-inline: auto;
  text-align: center;
}

.final-cta-description {
  margin: clamp(16px, 1.25vw, 20px) 0 0;
  color: var(--ink-muted);
  font-size: clamp(14px, 1vw, 17px);
  line-height: 1.4;
}

.signup.final-signup {
  width: min(100%, 590px);
  margin: clamp(34px, 2.8vw, 44px) auto 0;
  text-align: left;
}

.final-signup .privacy-line {
  justify-content: center;
}

.final-cta-plane {
  position: absolute;
  z-index: 1;
  /*
   * Anchored off the centered form's own left edge (half of its 590px cap plus fixed air),
   * so the plane can never drift into the field as the section narrows. It hides entirely
   * below 1024px, where that margin no longer exists.
   */
  top: 50%;
  right: calc(50% + 295px + clamp(18px, 2vw, 44px));
  bottom: auto;
  left: auto;
  display: block;
  width: clamp(150px, 13vw, 195px);
  height: auto;
  pointer-events: none;
  transform: translateY(-50%);
}

.js .closer-copy[data-scroll-reveal],
.js .final-cta-inner[data-scroll-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 640ms cubic-bezier(0.22, 0.72, 0.28, 1), transform 640ms cubic-bezier(0.22, 0.72, 0.28, 1);
}

/* The plane's transform already carries its centering: its reveal rides on top of it. */
.js .final-cta-plane[data-scroll-reveal] {
  opacity: 0;
  transform: translateY(calc(-50% + 18px));
  transition: opacity 640ms cubic-bezier(0.22, 0.72, 0.28, 1), transform 640ms cubic-bezier(0.22, 0.72, 0.28, 1);
}

.js .closer-art[data-scroll-reveal] {
  opacity: 0;
  transition: opacity 700ms cubic-bezier(0.22, 0.72, 0.28, 1) 140ms;
}

.js :is(.closer-copy, .final-cta-inner)[data-scroll-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

.js .final-cta-plane[data-scroll-reveal].is-visible {
  opacity: 1;
  transform: translateY(-50%);
}

.js .closer-art[data-scroll-reveal].is-visible {
  opacity: 1;
}

.js .final-cta-plane[data-scroll-reveal] {
  transition-delay: 120ms;
}

@media (max-width: 799px) {
  .showcase {
    padding-top: clamp(46px, 9svh, 66px);
    padding-right: var(--container-gutter);
    padding-bottom: clamp(52px, 10svh, 72px);
    padding-left: var(--container-gutter);
  }
}

@media (max-width: 640px) {
  .showcase-header {
    align-items: flex-end;
    gap: 18px;
    margin-bottom: 24px;
    padding-bottom: 15px;
  }

  .showcase-kicker {
    margin-bottom: 8px;
    font-size: 8px;
  }

  .showcase-title {
    font-size: clamp(30px, 8.6vw, 38px);
  }

  .showcase-cta {
    font-size: 10px;
  }
}

@media (max-width: 899px) {
  .closer {
    padding: clamp(84px, 11vw, 112px) 0 clamp(78px, 10vw, 104px);
  }

  .closer-inner {
    grid-template-columns: minmax(0, 680px);
    row-gap: clamp(48px, 7vw, 68px);
  }

  .closer-copy {
    width: min(100%, 620px);
    margin-inline: auto;
    text-align: center;
  }

  .closer-copy h2 {
    font-size: clamp(34px, 6.4vw, 52px);
  }

  .closer-description {
    margin-inline: auto;
  }

  .closer-art {
    width: min(100%, 680px);
    margin-inline: auto;
  }

  .final-cta {
    padding-top: clamp(96px, 13vw, 124px);
    padding-bottom: clamp(132px, 17vw, 158px);
  }
}

@media (max-width: 560px) {
  .closer {
    padding: clamp(74px, 19vw, 88px) 0 clamp(36px, 10vw, 46px);
  }

  .closer-copy .eyebrow {
    margin-bottom: 18px;
    font-size: clamp(9px, 2.55vw, 10px);
    letter-spacing: 0.19em;
  }

  .closer-copy h2 {
    font-size: clamp(27px, 8.3vw, 38px);
    line-height: 1.06;
  }

  .closer-description {
    margin-top: 18px;
    font-size: clamp(14px, 4vw, 16px);
  }

  .closer-inner {
    row-gap: 42px;
  }

  .final-cta {
    padding: clamp(34px, 10vw, 46px) 0 clamp(118px, 32vw, 148px);
  }

  .final-cta h2 {
    font-size: clamp(31px, 9vw, 40px);
    line-height: 1.06;
  }

  .final-cta-description {
    margin-top: 13px;
    font-size: 14px;
  }

  .final-cta-plane {
    display: none;
  }
}

/*
 * Below the wide layout there is no side margin to fly in, so the plane drops to the open
 * paper beneath the form — smaller, left, and clear of every interactive element.
 */
@media (max-width: 1023px) {
  .final-cta-plane {
    position: static;
    inset: auto;
    width: clamp(112px, 19vw, 150px);
    margin: 0 auto clamp(26px, 4vw, 38px);
    transform: none;
  }

  .js .final-cta-plane[data-scroll-reveal] {
    transform: translateY(14px);
  }

  .js .final-cta-plane[data-scroll-reveal].is-visible {
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 1023px) {
  .js .final-cta-plane[data-scroll-reveal] {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .closer-copy[data-scroll-reveal],
  .js .closer-art[data-scroll-reveal],
  .js .final-cta-inner[data-scroll-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* The plane keeps its centering transform — only its motion is removed. */
  .js .final-cta-plane[data-scroll-reveal] {
    opacity: 1;
    transform: translateY(-50%);
    transition: none;
  }
}

@media (max-width: 1339px) {
  .experience {
    min-height: 0;
    padding: clamp(84px, 9.5vw, 118px) 0 clamp(30px, 5vw, 48px);
  }

  .experience-pipeline {
    grid-template-columns: minmax(500px, 1fr) minmax(300px, 0.72fr);
    grid-template-rows: auto auto;
    column-gap: clamp(34px, 4.5vw, 58px);
    width: min(100%, 940px);
  }

  .experience-left {
    display: contents;
  }

  .experience-copy {
    grid-row: 1;
    grid-column: 1 / -1;
    justify-self: center;
    width: min(100%, 720px);
    text-align: center;
  }

  .experience-copy h2 {
    font-size: clamp(42px, 6.5vw, 62px);
  }

  .experience-left-flow {
    grid-row: 2;
    grid-column: 1;
    justify-self: center;
    margin-top: clamp(52px, 6vw, 70px);
  }

  .experience-step-story {
    grid-row: 2;
    grid-column: 2;
    margin-top: clamp(52px, 6vw, 70px);
  }

}

@media (max-width: 1023px) {
  .experience-pipeline {
    display: block;
    width: min(100%, 620px);
  }

  .experience-left {
    display: block;
  }

  .experience-copy {
    width: 100%;
    margin-inline: auto;
  }

  .experience-left-flow {
    width: min(100%, 520px);
    margin: clamp(48px, 7vw, 64px) auto 0;
  }

  .experience-step-signal,
  .experience-step-alert {
    margin-inline: auto;
  }

  .experience-step-alert {
    margin-top: clamp(76px, 10vw, 96px);
  }

  .experience-step-label {
    text-align: center;
  }

  .experience-step-story {
    width: min(82vw, 350px);
    margin: clamp(88px, 12vw, 112px) auto 0;
  }

  .connector-node-alert {
    display: none;
  }

  .connector-arrow-signal {
    opacity: 1;
  }

  .js .connector-arrow-signal {
    opacity: 0;
  }

  .js .experience-pipeline.is-visible .connector-arrow-signal {
    opacity: 1;
    transition-delay: 1120ms;
  }
}

/* Desktop sections are a strict one-viewport composition; the mobile story remains scrollable. */
@media (min-width: 1024px) {
  .experience {
    height: 100svh;
    min-height: 100svh;
    /*
     * No extra margin: the preceding section already ends on the shared --section-space, and
     * this composition centers itself inside its own viewport. Doubling them read as a hole.
     */
    padding: clamp(18px, 4svh, 44px) 0 clamp(14px, 2.2svh, 24px);
  }

  .experience-copy .eyebrow {
    margin-bottom: clamp(12px, 2svh, 22px);
  }

  .experience-left-flow {
    margin-top: clamp(16px, 3svh, 40px);
  }

  .experience-step-alert {
    margin-top: clamp(22px, 4svh, 58px);
  }

}

@media (min-width: 1024px) and (max-width: 1339px) {
  .experience-copy h2 {
    font-size: clamp(38px, 6svh, 58px);
  }

  .experience-left-flow,
  .experience-step-story {
    margin-top: clamp(16px, 3svh, 44px);
  }

  .experience-step-signal {
    width: min(clamp(360px, 30vw, 430px), calc(50svh - 55px));
  }

  .experience-step-alert {
    width: min(clamp(400px, 33vw, 480px), calc(56svh - 61.6px));
    margin-inline-start: clamp(20px, 2.2vw, 34px);
  }

  .phone-art {
    width: min(100%, calc(34svh - 36px));
    margin-inline: auto;
  }
}

@media (min-width: 1340px) {
  .experience-copy h2 {
    font-size: clamp(40px, 7.2svh, 64px);
  }

  .experience-left-flow {
    width: max-content;
    max-width: 100%;
  }

  .experience-step-signal,
  .experience-step-alert {
    width: min(clamp(360px, 30vw, 430px), calc(56svh - 61.6px));
  }

  .phone-art {
    width: min(100%, calc(42.3svh - 37px));
    margin-inline: auto;
  }
}

@media (min-width: 900px) {
  .first-viewport {
    min-height: calc(100svh - var(--header-block));
  }

  .hero {
    flex: 1 0 auto;
    align-content: center;
  }
}

@media (min-width: 900px) and (max-height: 789px) {
  .scroll-cue {
    display: none;
  }
}

/* Tall desktop windows let the whole hero grow; the cqi cap still locks both headline lines. */
@media (min-width: 1340px) and (min-height: 1200px) {
  .hero {
    grid-template-columns: minmax(0, 680px) minmax(0, 660px);
    width: min(100%, clamp(1280px, 104.5svh, 1400px));
    padding-top: clamp(102px, 8.5svh, 116px);
    padding-bottom: clamp(62px, 5.2svh, 76px);
  }

  .hero .eyebrow {
    margin-bottom: clamp(22px, 1.9svh, 28px);
    font-size: clamp(13px, 1.05svh, 15px);
  }

  .hero h1 {
    font-size: clamp(56px, 3.85vw, 71px);
    font-size: min(10.2cqi, clamp(58px, 5.6svh, 92px));
  }

  .hero-description {
    margin-top: clamp(24px, 2.1svh, 30px);
    font-size: min(4.25cqi, clamp(21px, 1.82svh, 25px));
  }

  .signup {
    width: min(100%, 650px);
    margin-top: clamp(40px, 3.3svh, 48px);
  }

  .signup-slot {
    height: clamp(70px, 5.8svh, 82px);
  }

  .waitlist-form {
    padding: clamp(9px, 0.75svh, 11px);
  }

  .waitlist-form input {
    padding-inline: clamp(30px, 2.35svh, 34px);
  }

  .waitlist-form input,
  .waitlist-form button {
    font-size: clamp(15px, 1.2svh, 17px);
  }

  .waitlist-form button {
    width: clamp(178px, 14.8svh, 202px);
  }

  .confirmation {
    font-size: clamp(21px, 1.7svh, 24px);
  }

  .privacy-line {
    gap: clamp(9px, 0.8svh, 11px);
    margin-top: clamp(16px, 1.4svh, 20px);
    font-size: clamp(12px, 1.05svh, 14px);
  }

  .privacy-line svg {
    width: clamp(18px, 1.55svh, 21px);
    height: clamp(14px, 1.2svh, 17px);
  }

  .plane-stage {
    min-height: clamp(600px, calc(70svh - 240px), 720px);
  }

  .plane-frame {
    width: min(145%, clamp(820px, 71.5svh, 960px));
  }
}

@keyframes reveal-up {
  from { opacity: 0; transform: translateY(11px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes waitlist-loading {
  from { opacity: 0.35; transform: translateY(2px); }
  to { opacity: 1; transform: translateY(-2px); }
}

@keyframes waitlist-nudge {
  0%, 100% { transform: translateX(0); }
  28% { transform: translateX(-5px); }
  58% { transform: translateX(4px); }
  78% { transform: translateX(-2px); }
}

@keyframes waitlist-mark-in {
  from { opacity: 0; transform: scale(0.88); }
  to { opacity: 1; transform: none; }
}

@keyframes waitlist-check-draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

@keyframes waitlist-copy {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: none; }
}

@keyframes scroll-cue-nudge {
  0%, 100% { transform: translateY(-1px); }
  50% { transform: translateY(2px); }
}

@keyframes plane-arrive {
  from { opacity: 0; transform: translateY(22px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes plane-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-0.18deg); }
  50% { transform: translate3d(0, clamp(-10px, -0.5vw, -6px), 0) rotate(0.32deg); }
}

@keyframes shadow-breathe {
  0%, 100% { opacity: 0.15; transform: rotate(-5deg) scale(1, 0.7); }
  50% { opacity: 0.075; transform: rotate(-5deg) scale(0.84, 0.57); }
}

/* Below 900px, the full art cell stacks after every interactive hero element. */
@media (max-width: 899px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
    padding: clamp(62px, 12vw, 88px) 0 0;
  }

  .hero-copy {
    width: 100%;
    margin-inline: auto;
    text-align: center;
  }

  .hero h1 {
    font-size: clamp(39px, 7.8vw, 58px);
  }

  .hero-description {
    max-width: 620px;
    margin-top: clamp(22px, 3.4vw, 28px);
    margin-inline: auto;
    font-size: clamp(16px, 2.3vw, 19px);
    white-space: normal;
  }

  .signup {
    width: min(84vw, 620px);
    margin-top: clamp(27px, 4vw, 34px);
    margin-inline: auto;
    text-align: left;
  }

  .privacy-line {
    justify-content: center;
  }

  .plane-stage {
    width: 100%;
    min-height: clamp(290px, 57vw, 430px);
    margin-top: clamp(28px, 4.8vw, 40px);
    /* Once the columns stack, there is no copy column for the art to invade. */
    clip-path: none;
  }

  .plane-frame {
    top: 47%;
    width: min(88vw, 680px);
  }

  .stories {
    padding: 28px 0 32px;
  }

  .stories-item {
    width: clamp(220px, 34vw, 280px);
    padding-inline: clamp(20px, 3vw, 30px);
  }

  .stories-link {
    font-size: clamp(17px, 2.35vw, 20px);
  }
}

@media (max-width: 560px) {
  /* Compact-phone geometry is calibrated as one system to the supplied mobile mock. */
  .hero {
    padding-top: clamp(60px, 16vw, 82px);
  }

  .hero .eyebrow {
    display: none;
  }

  .hero h1 {
    /* The low floor preserves the two locked lines without clipping at the 320px shell. */
    font-size: clamp(27px, 8.6vw, 40px);
    line-height: 1.04;
  }

  .hero-description {
    max-width: 300px;
    margin-top: clamp(20px, 5vw, 24px);
    font-size: clamp(15px, 4vw, 16px);
    line-height: 1.28;
  }

  .signup {
    width: min(100%, 350px);
    margin-top: clamp(24px, 6vw, 29px);
  }

  .signup-slot {
    height: clamp(48px, 13vw, 50px);
  }

  .waitlist-form {
    padding: 5px;
    border-radius: var(--radius-control-compact);
  }

  .waitlist-form input {
    padding-inline: clamp(12px, 3.5vw, 16px);
    font-size: 10.5px;
  }

  .waitlist-form button {
    width: clamp(112px, 32vw, 128px);
    border-radius: var(--radius-small);
    font-size: 10px;
  }

  .confirmation {
    gap: 8px;
    padding: 5px 8px;
  }

  .confirmation-mark {
    width: 24px;
    height: 24px;
  }

  .confirmation-copy strong {
    font-size: clamp(16px, 4.6vw, 18px);
  }

  .confirmation-copy span {
    font-size: clamp(9px, 2.55vw, 10.5px);
  }

  .privacy-line {
    gap: 7px;
    margin-top: clamp(13px, 3.6vw, 16px);
    font-size: 8.5px;
  }

  .privacy-line svg {
    width: 12px;
    height: 10px;
  }

  .plane-stage {
    min-height: clamp(245px, 61vw, 315px);
    margin-top: clamp(28px, 7vw, 36px);
  }

  .plane-frame {
    top: 49%;
    width: min(88vw, 460px);
  }

  .stories {
    padding: 24px 0 30px;
  }

  .stories-label {
    margin-bottom: 18px;
    font-size: clamp(9px, 2.55vw, 10px);
    letter-spacing: 0.19em;
  }

  .stories-item {
    width: clamp(180px, 56vw, 230px);
    padding-inline: clamp(18px, 5vw, 24px);
  }

  .stories-link {
    font-size: clamp(15px, 4.2vw, 17px);
    line-height: 1.32;
  }

  .experience {
    padding-top: clamp(62px, 16vw, 82px);
    padding-bottom: 28px;
  }

  .experience-copy .eyebrow {
    margin-bottom: 18px;
    font-size: clamp(9px, 2.55vw, 10px);
    letter-spacing: 0.19em;
  }

  .experience-copy h2 {
    font-size: clamp(27px, 8.5vw, 40px);
    line-height: 1.06;
  }

  .experience-left-flow {
    margin-top: 42px;
  }

  .experience-step-label {
    margin-bottom: 9px;
    font-size: clamp(8.5px, 2.45vw, 10px);
    letter-spacing: 0.16em;
  }

  .experience-step-signal,
  .experience-step-alert {
    width: 100%;
  }

  .experience-step-alert {
    margin-top: 80px;
  }

  .experience-step-story {
    width: min(96%, 330px);
    margin-top: 94px;
  }

}

@media (prefers-reduced-motion: reduce) {
  .waitlist-form,
  .waitlist-form button,
  .waitlist-button-label,
  .waitlist-button-loader,
  .waitlist-button-loader i,
  .confirmation,
  .confirmation-mark,
  .confirmation-mark path,
  .confirmation-copy {
    animation: none !important;
    transition: none !important;
  }

  .signup.is-complete .confirmation-mark,
  .signup.is-complete .confirmation-copy {
    opacity: 1;
    transform: none;
  }

  .signup.is-complete .confirmation-mark path {
    stroke-dashoffset: 0;
  }

  .waitlist-form button:hover,
  .waitlist-form button:active {
    transform: none;
  }

  .scroll-cue-arrow {
    animation: none;
    transform: none;
  }

  /* The rail stands still and scrolls by hand; script.js also skips cloning and the drift. */
  .stories-track.is-flowing {
    animation: none;
  }

  .stories-rail.is-marquee {
    overflow-x: auto;
  }

  .js .experience-animate {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .connector-reveal {
    stroke-dashoffset: 0;
    transition: none;
  }

  .js .connector-node,
  .js .connector-arrow {
    opacity: 1;
    transition: none;
  }

  .js .connector-arrow-signal {
    opacity: 0;
  }

  /* The universal animation kill in base.css strands these at their keyframe start
     (opacity: 0). Reduced motion must still show the page — content first, motion never.
     This override must trail the .reveal/.plane-entry base rules in source order. */
  .reveal,
  .plane-entry {
    opacity: 1 !important;
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 1023px) {
  .js .connector-arrow-signal {
    opacity: 1;
  }
}