/* ============================================================================
   SONNIS · split-stage build on the scrollcraft floor.
   Light world left (uw week nu), navy world right (met SONNIS). The boundary
   between them is driven by sonnis.js through --split (a number, in vw).
   ========================================================================== */

:root {
  /* SONNIS brand tokens, light ground */
  --sc-canvas:      #F8FAFC;
  --sc-surface:     #FFFFFF;
  --sc-ink:         #0B1323;
  --sc-ink-soft:    #46536E;
  --sc-accent:      #067A6E;   /* teal, dark stop for the light ground */
  --sc-accent-ink:  #F8FAFC;

  --sc-font-display: "Satoshi", "Arial Black", system-ui, sans-serif;
  --sc-font-text:    "Inter", system-ui, sans-serif;
  --sc-font-mono:    "Inter", system-ui, sans-serif;

  /* shadows re-tinted and softened for a light canvas */
  --sc-shadow-color: 222 44% 16%;
  --sc-e1: 0 1px 2px hsl(var(--sc-shadow-color) / 0.10),
           0 2px 6px -1px hsl(var(--sc-shadow-color) / 0.08);
  --sc-e2: 0 2px 4px hsl(var(--sc-shadow-color) / 0.08),
           0 8px 18px -4px hsl(var(--sc-shadow-color) / 0.12);
  --sc-e3: 0 4px 8px hsl(var(--sc-shadow-color) / 0.08),
           0 18px 40px -8px hsl(var(--sc-shadow-color) / 0.16);
  --sc-edge: inset 0 1px 0 rgba(255, 255, 255, 0.85);

  /* the moving boundary, in vw. sonnis.js lerps this. */
  --split: 50;

  /* brand constants */
  --teal: #00C2A8;
  --navy: #0B1323;
  --navy-surface: #14203A;
  --gap-line: 4vw; /* clearance either side of the boundary */
}

/* the navy family, applied per subtree. color restated on purpose:
   inherited color resolves upstream, redefining the token alone re-inks
   nothing. */
.side-dark {
  --sc-canvas:     #0B1323;
  --sc-surface:    #14203A;
  --sc-ink:        #F8FAFC;
  --sc-ink-soft:   #9DAAC6;
  --sc-accent:     #00C2A8;
  --sc-accent-ink: #04241D;
  --sc-hairline:   color-mix(in oklab, #F8FAFC 16%, transparent);
  --sc-hairline-strong: color-mix(in oklab, #F8FAFC 28%, transparent);
  --sc-edge: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: var(--sc-ink);
}

html { scrollbar-color: color-mix(in oklab, #0B1323 30%, transparent) transparent; }
body { overflow-x: clip; }
.sc-grain { opacity: 0.028; }

/* ------------------------------------------------------------ chrome ----- */
.skip {
  position: fixed; top: -100px; left: 1rem; z-index: 120;
  background: var(--navy); color: #F8FAFC;
  padding: 0.6rem 1rem; border-radius: var(--sc-r-sm);
  transition: top 160ms var(--sc-ease-out);
}
.skip:focus-visible { top: 1rem; }

[data-sc-progress] { display: none; } /* the divider fill is the progress */

.grounds { position: fixed; inset: 0; z-index: 0; overflow: clip; }
.grounds__light { position: absolute; inset: 0; background: #F8FAFC; }
.grounds__dark {
  position: absolute; inset: 0; width: 100vw; background: var(--navy);
  transform: translateX(calc(var(--split) * 1vw));
  will-change: transform;
}

.divider {
  position: fixed; inset-block: 0; left: 0; width: 0; z-index: 40;
  transform: translateX(calc(var(--split) * 1vw));
  will-change: transform;
}
.divider__line {
  position: absolute; inset-block: 0; left: -1px; width: 2px;
  background: color-mix(in oklab, #0B1323 22%, transparent);
}
.divider__fill {
  position: absolute; inset: 0; display: block;
  background: var(--teal);
  transform-origin: 0 0; transform: scaleY(0);
  will-change: transform;
}
.divider__mark {
  position: absolute; top: clamp(0.9rem, 2.4vh, 1.6rem); left: 0;
  translate: -50% 0;
  width: 56px; height: 56px; border-radius: 50%;
  background: #FFFFFF; color: var(--navy);
  box-shadow: var(--sc-e2), var(--sc-edge);
  display: grid; place-items: center;
}
.divider__label {
  position: absolute; top: clamp(5.4rem, 12vh, 7.5rem);
  writing-mode: vertical-rl;
  font: 600 0.66rem/1 var(--sc-font-text);
  letter-spacing: 0.22em; text-transform: uppercase;
  white-space: nowrap;
}
.divider__label--now    { right: 0.9rem; color: #5B6885; }
.divider__label--sonnis { left: 0.9rem;  color: #7FE7D6; }
/* the labels step aside while the chips cross the line */
.divider__label { transition: opacity 320ms var(--sc-ease-out); }
.divider--quiet .divider__label { opacity: 0; }

/* ------------------------------------------------------- shared pieces --- */
.wordmark {
  font-family: var(--sc-font-display);
  font-weight: 900; font-size: 1.16rem;
  letter-spacing: 0.16em; color: var(--navy);
}
.wordmark--light { color: #F8FAFC; }
.tagline {
  display: block; margin-top: 0.3rem;
  font: 600 0.6rem/1.3 var(--sc-font-text);
  letter-spacing: 0.2em; text-transform: uppercase; color: #5B6885;
}
.tagline i, .foot__tag i { font-style: normal; color: var(--teal); }

.side-label {
  font: 600 0.7rem/1.3 var(--sc-font-text);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--sc-ink-soft); margin: 0;
}
.side-label--teal { color: #55DCC5; }

.act { position: relative; z-index: 1; }
.stage { position: sticky; top: 0; height: 100svh; overflow: clip; }

/* Every act paints its own two grounds (not fixed, so the contrast pass
   measures against them). The boundary reads the same --split as the fixed
   layers, so the line is continuous across act edges. */
.ground-panel { position: absolute; inset: 0; z-index: 0; overflow: clip; background: #F8FAFC; }
.ground-panel::after {
  content: ""; position: absolute; inset-block: 0; left: 0; width: 100vw;
  background: var(--navy);
  transform: translateX(calc(var(--split) * 1vw));
  will-change: transform;
}
/* :not(.stage): a bare `position: relative` here would silently override the
   stage's `position: sticky` and unpin every act (the verify.md trap). */
.act > :not(.ground-panel):not(.stage) { position: relative; z-index: 1; }
.act > .stage { z-index: 1; }

/* split helpers: each act declares the boundary it is composed against */
.split-50 { --zone: 50; }
.split-58 { --zone: 58; }
.split-46 { --zone: 46; }
.split-8  { --zone: 8;  }

/* ================================================================ ACT 1 -- */
.hero {
  display: grid;
  grid-template-columns: calc(var(--zone) * 1vw) 1fr;
  align-items: center;
}
.hero__brand {
  position: absolute; top: clamp(1.1rem, 2.8vh, 1.9rem); left: var(--sc-gutter);
  z-index: 5;
}
.hero__side { padding-block: clamp(4rem, 12vh, 7rem); }
.hero__side--now    { padding-inline: var(--sc-gutter) var(--gap-line); }
.hero__side--sonnis { padding-inline: var(--gap-line) var(--sc-gutter); }
.hero__copy { max-width: 34rem; }
.hero__side--sonnis .hero__copy { margin-left: auto; margin-right: clamp(0rem, 4vw, 5rem); }
.hero h1, .hero .hero__promise { margin: 0; }
.hero .hero__promise strong { color: var(--teal); }
.hero__sub {
  margin: 1.4rem 0 0; max-width: 42ch;
  font-size: var(--sc-t-base); line-height: 1.6; color: var(--sc-ink-soft);
  text-wrap: pretty;
}

/* ================================================================ ACT 2 -- */
.act--week { padding-block: clamp(3rem, 7vh, 5.5rem) clamp(2rem, 5vh, 3.5rem); }
.week {
  display: grid;
  grid-template-columns: calc(var(--zone) * 1vw) 1fr;
  align-items: start;
}
.week__side--now    { padding-inline: var(--sc-gutter) var(--gap-line); }
.week__side--sonnis { padding-inline: var(--gap-line) var(--sc-gutter); }
.week__intro {
  margin: 0; max-width: 44ch;
  font-size: var(--sc-t-lg); line-height: 1.5; letter-spacing: -0.01em;
  color: var(--sc-ink-soft); text-wrap: pretty;
}
.week__waiting {
  margin: 0; font: 700 var(--sc-t-xl)/1.15 var(--sc-font-display);
  letter-spacing: -0.02em; max-width: 18ch; text-wrap: balance;
}
.docks__note { margin: 1.4rem 0 0; color: var(--sc-ink-soft); font-size: 0.95rem; line-height: 1.55; max-width: 34ch; text-wrap: pretty; }

/* ================================================================ ACT 3 -- */
.handover { z-index: 2; }
/* The authored silence at the end of the week: one question straddling the
   line, composed against the SAFE zones (left text ends before 46vw, right
   text starts after 62vw) so both halves sit on their own ground at every
   boundary position. */
.question {
  /* 54 / 8 / rest: the 8vw gap sits symmetrically around the wide stop
     (58vw), so both halves keep the same distance to the line */
  display: grid; grid-template-columns: 54vw 8vw 1fr;
  align-items: center;
  min-height: 84svh;
  margin-top: clamp(2.5rem, 7vh, 5rem);
}
.question__l { margin: 0; padding-inline: var(--sc-gutter) 0; text-align: right; max-width: none; }
.question__l, .question__r {
  font-size: clamp(2.2rem, 1.35rem + 2.6vw, 3.9rem);
  line-height: 1.04; letter-spacing: -0.025em;
}
.question__r { margin: 0; padding-inline: 0 var(--sc-gutter); max-width: none; }
.question__r span { display: block; max-width: 14ch; }

/* the two stacks carry their own titles for the whole scene */
.stack-label {
  position: absolute; z-index: 2; top: 9.2%; margin: 0;
  font: 600 0.72rem/1 var(--sc-font-text);
  letter-spacing: 0.2em; text-transform: uppercase;
}
.stack-label--now { left: 4.5vw; color: #46536E; }
.stack-label--sonnis { left: 62.5vw; color: #55DCC5; }

.chips { position: absolute; inset: 0; z-index: 2; }
.land {
  position: absolute; left: 0; top: calc(15% + var(--i) * 11.4%);
  width: min(27vw, 24rem); min-height: 9vh;
  border: 1px dashed color-mix(in oklab, #F8FAFC 24%, transparent);
  border-radius: var(--sc-r-md);
}
.chip {
  position: absolute; left: 0; top: calc(15% + var(--i) * 11.4%);
  width: min(27vw, 24rem); min-height: 9vh;
  will-change: transform;
}
.chip__front, .chip__back {
  position: absolute; inset: 0;
  border-radius: var(--sc-r-md);
  padding: 0.85rem 1.05rem;
  display: grid; align-content: center; gap: 0.2rem;
}
.chip__front {
  background: #FFFFFF;
  border: 1px solid color-mix(in oklab, #0B1323 12%, transparent);
  box-shadow: var(--sc-e1), var(--sc-edge);
}
.chip__front strong { font: 700 0.94rem/1.25 var(--sc-font-display); color: var(--navy); letter-spacing: -0.01em; }
.chip__front span { font-size: 0.8rem; color: #46536E; }
.chip__back {
  background: var(--navy-surface);
  border: 1px solid color-mix(in oklab, #F8FAFC 16%, transparent);
  box-shadow: 0 2px 4px rgba(2, 6, 16, 0.35), 0 10px 24px -6px rgba(2, 6, 16, 0.5),
              inset 0 1px 0 rgba(255, 255, 255, 0.07);
  opacity: 0;
}
.chip__back strong { font: 600 0.88rem/1.4 var(--sc-font-text); color: #F8FAFC; letter-spacing: 0; }
.chip__back::before {
  content: ""; position: absolute; top: 0.95rem; left: -3px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--teal);
}

.remains {
  position: absolute; z-index: 3;
  left: var(--sc-gutter); top: 38%;
  max-width: 24vw;
}
.remains__line { margin: 0.7rem 0 0; }

.handover__rule {
  position: absolute; z-index: 3;
  left: calc(63vw); bottom: 5.5%;
  margin: 0; max-width: 30vw;
  color: #9DAAC6; font-size: 0.9rem; line-height: 1.55; text-wrap: pretty;
}

/* ================================================================ ACT 4 -- */
.act--method { padding-block: var(--sc-section); }
.method__head, .method__notes, .step {
  display: grid;
  grid-template-columns: calc(var(--zone) * 1vw) 1fr;
  align-items: start;
}
.method__headL { padding-inline: var(--sc-gutter) var(--gap-line); }
.method__headR { padding-inline: var(--gap-line) var(--sc-gutter); align-self: center; }
.method__decide { margin: 0; max-width: 14ch; }
.method__decide::after { content: ""; display: block; width: 3.2rem; height: 4px; margin-top: 1.1rem; background: var(--teal); border-radius: 2px; }

.steps { list-style: none; margin: clamp(3rem, 7vh, 5rem) 0 0; padding: 0; }
.step { border-top: 1px solid transparent; }
.step__what {
  padding: clamp(1.6rem, 3.5vh, 2.4rem) var(--gap-line) clamp(1.6rem, 3.5vh, 2.4rem) var(--sc-gutter);
  border-top: 1px solid color-mix(in oklab, #0B1323 12%, transparent);
}
.step__no {
  font: 600 0.7rem/1 var(--sc-font-text); letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--sc-accent);
}
.step__what h3 { margin: 0.55rem 0 0.45rem; font: 700 var(--sc-t-xl)/1.1 var(--sc-font-display); letter-spacing: -0.02em; }
.step__what p { margin: 0; color: var(--sc-ink-soft); max-width: 46ch; text-wrap: pretty; }
.step__get {
  align-self: stretch;
  padding: clamp(1.6rem, 3.5vh, 2.4rem) var(--sc-gutter) clamp(1.6rem, 3.5vh, 2.4rem) var(--gap-line);
  border-top: 1px solid color-mix(in oklab, #F8FAFC 14%, transparent);
  display: grid; align-content: center; gap: 0.5rem;
}
.step__get p:last-child { margin: 0; font-size: 1.02rem; line-height: 1.55; max-width: 40ch; text-wrap: pretty; }

.method__notes { margin-top: clamp(4rem, 9vh, 6.5rem); }
.rules { padding-inline: var(--sc-gutter) var(--gap-line); }
.rules__title { max-width: 16ch; }
.rules__list { list-style: none; margin: 2.4rem 0 0; padding: 0; max-width: 38rem; }
.rules__list li {
  padding-block: 1rem;
  border-top: 1px solid color-mix(in oklab, #0B1323 12%, transparent);
  color: var(--sc-ink-soft); line-height: 1.55; text-wrap: pretty;
}
.rules__list strong { color: var(--sc-ink); font-weight: 600; }
.rules__note {
  margin: 2.2rem 0 0; max-width: 42ch;
  padding: 1.2rem 1.4rem; border-radius: var(--sc-r-md);
  background: #FFFFFF; box-shadow: var(--sc-e1), var(--sc-edge);
  border: 1px solid color-mix(in oklab, #0B1323 10%, transparent);
  color: var(--sc-ink); line-height: 1.55; text-wrap: pretty;
}

.packs__title { max-width: 18ch; }
.packs__ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.packs__ladder li {
  padding: 0.95rem 1.2rem; border-radius: var(--sc-r-md);
  background: color-mix(in oklab, #F8FAFC 5%, transparent);
  border: 1px solid color-mix(in oklab, #F8FAFC 14%, transparent);
  display: grid; gap: 0.15rem;
}
.packs__ladder li:nth-child(2) { margin-left: clamp(0.8rem, 2vw, 1.8rem); }
.packs__ladder li:nth-child(3) { margin-left: clamp(1.6rem, 4vw, 3.6rem); }
.packs__ladder strong { font: 700 0.95rem/1.3 var(--sc-font-display); color: #7FE7D6; letter-spacing: 0.02em; }
.packs__ladder span { color: var(--sc-ink-soft); font-size: 0.88rem; line-height: 1.5; }
.packs__note { margin: 1.5rem 0 0; color: var(--sc-ink-soft); font-size: 0.92rem; max-width: 46ch; text-wrap: pretty; }

/* ================================================================ ACT 4b - */
.payoff { padding-inline: var(--gap-line) var(--sc-gutter); align-self: center; }
.payoff__title { max-width: 15ch; }
.payoff__text { margin: 0; color: var(--sc-ink-soft); max-width: 44ch; line-height: 1.6; text-wrap: pretty; }

/* ================================================================ ACT 5 --
   The module theater: index left, one module's story at a time right. */
.modules { display: grid; grid-template-columns: calc(var(--zone) * 1vw) 1fr; align-items: center; }
.modules__index { padding-inline: var(--sc-gutter) var(--gap-line); }
.modules__title { max-width: 14ch; }
.modules__intro { margin: 1.2rem 0 0; color: var(--sc-ink-soft); max-width: 38ch; font-size: 0.95rem; line-height: 1.55; text-wrap: pretty; }
.mod-idx { list-style: none; margin: 2.2rem 0 0; padding: 0; display: grid; gap: 0.15rem; }
.mod-idx button {
  display: flex; align-items: center; gap: 0.85rem;
  border: 0; background: none; padding: 0.42rem 0; cursor: pointer;
  font: 700 1.02rem/1.2 var(--sc-font-display); letter-spacing: -0.01em;
  color: #97A1B5; text-align: left;
  transition: color 200ms var(--sc-ease-out), transform 200ms var(--sc-ease-out);
}
.mod-idx button::before {
  content: ""; width: 0.9rem; height: 2px; border-radius: 1px;
  background: color-mix(in oklab, #0B1323 22%, transparent); flex: none;
  transition: width 240ms var(--sc-ease-out), background 240ms var(--sc-ease-out);
}
.mod-idx button:hover { color: var(--sc-ink); }
.mod-idx button.is-active { color: var(--sc-ink); transform: translateX(4px); }
.mod-idx button.is-active::before { width: 2rem; background: var(--teal); }

.modules__detail { position: relative; align-self: stretch; }
.mod {
  position: absolute; top: 50%; translate: 0 -50%;
  inset-inline: var(--gap-line) var(--sc-gutter);
  max-width: 34rem; opacity: 0; visibility: hidden;
  will-change: opacity, transform;
}
.mod__name { margin: 0; font: 700 var(--sc-t-2xl)/1.05 var(--sc-font-display); letter-spacing: -0.02em; }
.mod__name::after { content: ""; display: block; width: 2.6rem; height: 3px; margin-top: 1rem; background: var(--teal); border-radius: 2px; }
.mod__lead { margin: 1.4rem 0 0; color: #AFBBD3; font-size: 1.05rem; line-height: 1.65; max-width: 46ch; text-wrap: pretty; }
.mod__points { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.mod__points li {
  position: relative; padding-left: 1.35rem;
  color: var(--sc-ink); font-size: 0.98rem; line-height: 1.5;
}
.mod__points li::before {
  content: ""; position: absolute; left: 0; top: 0.52em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--teal);
}

/* ================================================================ ACT 6 -- */
.act--trade { padding-block: var(--sc-section); }
.trade { display: grid; grid-template-columns: calc(var(--zone) * 1vw) 1fr; align-items: center; }
.trade__keep { padding-inline: var(--sc-gutter) var(--gap-line); }
.trade__keep h2 { max-width: 15ch; }
.trade__text { margin: 0; color: var(--sc-ink-soft); max-width: 42ch; line-height: 1.6; text-wrap: pretty; }
.trade__packs { padding-inline: var(--gap-line) var(--sc-gutter); }
.trade__packs .packs__ladder { margin-top: 1.8rem; max-width: 38rem; }
.trade__packs .packs__note { margin-top: 1.5rem; color: var(--sc-ink-soft); font-size: 0.92rem; max-width: 46ch; text-wrap: pretty; }

/* ================================================================ ACT 7 -- */
.close { display: grid; align-content: center; }
.close__inner {
  margin-left: calc(var(--sc-gutter) + 12vw);
  max-width: 46rem;
  padding-right: var(--sc-gutter);
}
.close h2 .eq { font-style: normal; color: var(--teal); }
.close__sub { margin: 1.5rem 0 0; max-width: 52ch; color: var(--sc-ink-soft); font-size: var(--sc-t-lg); line-height: 1.5; text-wrap: pretty; }
.close__steps {
  list-style: none; counter-reset: cstep;
  margin: 2.4rem 0 0; padding: 0;
  display: grid; gap: 0.55rem; max-width: 46rem;
}
.close__steps li {
  counter-increment: cstep;
  position: relative; padding-left: 2.7rem;
  color: var(--sc-ink-soft); line-height: 1.5; font-size: 0.98rem;
}
.close__steps li::before {
  content: counter(cstep);
  position: absolute; left: 0; top: 0.1em;
  font: 700 0.85rem/1.6rem var(--sc-font-display);
  width: 1.6rem; height: 1.6rem; text-align: center;
  border-radius: 50%; background: color-mix(in oklab, var(--teal) 20%, transparent);
  color: #7FE7D6;
}
.close__steps strong { color: var(--sc-ink); font-weight: 600; }
.close__cta { margin-top: 2.6rem; }

.cta {
  display: inline-block; border: 0; cursor: pointer;
  font: 700 1.02rem/1 var(--sc-font-display); letter-spacing: 0.01em;
  color: #04241D; background: var(--teal);
  padding: 1.05rem 1.9rem; border-radius: var(--sc-r-pill);
  box-shadow: 0 2px 4px rgba(2, 6, 16, 0.3), 0 10px 26px -8px rgba(0, 194, 168, 0.55);
  transition: transform 140ms var(--sc-ease-out), background 140ms var(--sc-ease-out);
}
.cta:hover { background: #1BD8BE; }
.cta:active { transform: translateY(1px) scale(0.985); }

.lead { margin-top: 2.4rem; max-width: 40rem; }
.lead__intro { margin: 0 0 1.2rem; color: var(--sc-ink-soft); }
.lead__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem 1rem; }
.lead label { display: grid; gap: 0.35rem; font-size: 0.86rem; font-weight: 600; color: var(--sc-ink-soft); }
.lead label em { font-style: normal; font-weight: 400; }
.lead input {
  border: 1px solid color-mix(in oklab, #F8FAFC 20%, transparent);
  background: #101A30; border-radius: var(--sc-r-sm);
  padding: 0.7rem 0.85rem; color: #F8FAFC;
  transition: border-color 140ms var(--sc-ease-out);
}
.lead input:hover { border-color: color-mix(in oklab, #F8FAFC 32%, transparent); }
.lead__website { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lead > .cta { margin-top: 1.3rem; }
.lead__status { margin: 0.9rem 0 0; min-height: 1.4em; color: #7FE7D6; font-weight: 600; }
.lead__status.is-error { color: #FFB4A8; }
.lead__privacy { margin: 1rem 0 0; font-size: 0.8rem; color: var(--sc-ink-soft); max-width: 52ch; }

.foot {
  position: absolute; inset-inline: 0; bottom: 0;
  padding-left: 12vw;
  border-top: 1px solid color-mix(in oklab, #F8FAFC 12%, transparent);
}
.foot__in {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.2rem var(--sc-gutter) 1.4rem calc(var(--sc-gutter) - 1vw);
}
.foot__brand { display: flex; align-items: center; gap: 0.7rem; }
.foot__tag { margin: 0; font: 600 0.62rem/1 var(--sc-font-text); letter-spacing: 0.2em; text-transform: uppercase; color: #6C7A9C; }

/* ------------------------------------------------------------- mobile ----
   The split survives on a phone: narrower columns, one type scale down, and
   Dutch hyphenation so long words never run invisibly into the other ground. */
@media (max-width: 860px) {
  :root { --gap-line: 5vw; }

  /* the wide stop is 52 on phones (sonnis.js mirrors this): the column then
     clears the boundary through its whole travel, including the 50->52 glide */
  .split-58 { --zone: 52; }

  .divider__mark { width: 36px; height: 36px; top: max(0.7rem, env(safe-area-inset-top)); }
  .divider__mark svg { width: 23px; height: 23px; }
  .divider__label { top: calc(4.6rem + env(safe-area-inset-top, 0px)); font-size: 0.58rem; letter-spacing: 0.14em; }
  .divider__label--now { right: 0.55rem; }
  .divider__label--sonnis { left: 0.55rem; }

  /* long Dutch words wrap with a hyphen instead of overflowing the column */
  .hero__copy, .week__side, .question__l, .question__r,
  .step__what, .step__get, .rules, .platform, .close__inner,
  .chip__front, .chip__back, .remains, .method__headL, .method__headR {
    overflow-wrap: break-word; hyphens: auto;
  }
  .side-label { font-size: 0.58rem; letter-spacing: 0.13em; hyphens: none; }

  .hero__brand { left: 1rem; top: max(1.1rem, env(safe-area-inset-top)); }
  .hero__brand .tagline { display: none; }
  .wordmark { font-size: 0.95rem; }
  .hero { align-items: center; }
  .hero__side { padding-block: 6.5rem 2rem; align-self: center; }
  .hero__side--now { padding-inline: 1rem 3.5vw; }
  .hero__side--sonnis { padding-inline: 3.5vw 1rem; }
  .hero h1 { font-size: clamp(1.24rem, 4.6vw, 1.7rem); line-height: 1.14; }
  .hero .hero__promise { font-size: clamp(1.3rem, 5vw, 1.8rem); line-height: 1.14; }
  .hero__sub { font-size: 0.84rem; line-height: 1.5; margin-top: 0.8rem; }

  /* the display scale floors at 2.1rem, which is wider than these columns */
  .week h2.sc-display--md { font-size: 1.3rem; letter-spacing: -0.015em; }
  .rules__title.sc-display--md, .platform__title.sc-display--md { font-size: 1.25rem; letter-spacing: -0.015em; }

  .week__side--now { padding-inline: 1rem 3.5vw; }
  .week__side--sonnis { padding-inline: 3.5vw 1rem; }
  .week__intro { font-size: 0.9rem; }
  .week__waiting { font-size: 1.1rem; }
  .docks__note { font-size: 0.8rem; }

  .question { grid-template-columns: 46vw 12vw 1fr; }
  .question__l { font-size: clamp(1.2rem, 4.8vw, 1.7rem); }
  .question__r { font-size: clamp(1.2rem, 4.8vw, 1.7rem); }
  .stack-label { top: 5.8%; font-size: 0.56rem; letter-spacing: 0.14em; }
  .stack-label--now { left: 2.5vw; }
  .stack-label--sonnis { left: 54vw; }
  .chip { width: 39vw; top: calc(9% + var(--i) * 13.2%); min-height: 11vh; }
  .land { width: 39vw; top: calc(9% + var(--i) * 13.2%); min-height: 11vh; }
  .chip__front, .chip__back { padding: 0.6rem 0.7rem; border-radius: var(--sc-r-sm); }
  .chip__front strong { font-size: 0.78rem; line-height: 1.25; }
  .chip__front span { font-size: 0.7rem; }
  .chip__back strong { font-size: 0.74rem; line-height: 1.35; }
  .remains { max-width: 36vw; top: 9%; left: 1rem; }
  .remains__line { font-size: 1.1rem; }
  /* stays right of the boundary at its widest position (58vw) */
  .handover__rule { left: auto; right: 1rem; bottom: 2.5%; max-width: 34vw; font-size: 0.74rem; line-height: 1.45; }

  .method__headL { padding-inline: 1rem 3.5vw; }
  .method__headR { padding-inline: 3.5vw 1rem; }
  .method__decide { font-size: 1.25rem; }
  .method__decide::after { width: 2.4rem; height: 3px; margin-top: 0.8rem; }
  .step__what { padding-inline: 1rem 3.5vw; }
  .step__no { font-size: 0.6rem; letter-spacing: 0.14em; }
  .step__what h3 { font-size: 1.1rem; }
  .step__what p { font-size: 0.8rem; }
  .step__get { padding-inline: 3.5vw 1rem; gap: 0.35rem; }
  .step__get p:last-child { font-size: 0.8rem; }
  .rules { padding-inline: 1rem 3.5vw; }
  .rules__list { margin-top: 1.6rem; }
  .rules__list li { font-size: 0.8rem; padding-block: 0.8rem; }
  .rules__note { font-size: 0.8rem; padding: 0.9rem 1rem; }
  .payoff { padding-inline: 3.5vw 1rem; }
  .payoff__title.sc-display--md { font-size: 1.25rem; letter-spacing: -0.015em; }
  .payoff__text { font-size: 0.8rem; }
  .modules__index { padding-inline: 1rem 3.5vw; }
  .modules__title.sc-display--md { font-size: 1.25rem; letter-spacing: -0.015em; }
  .modules__intro { font-size: 0.76rem; margin-top: 0.8rem; }
  .mod-idx { margin-top: 1.3rem; gap: 0.05rem; }
  .mod-idx button { font-size: 0.8rem; gap: 0.5rem; padding: 0.3rem 0; }
  .mod-idx button::before { width: 0.55rem; }
  .mod-idx button.is-active::before { width: 1.1rem; }
  .mod { inset-inline: 3.5vw 1rem; }
  .mod__name { font-size: 1.2rem; }
  .mod__name::after { width: 1.8rem; margin-top: 0.6rem; }
  .mod__lead { font-size: 0.8rem; margin-top: 0.9rem; }
  .mod__points { margin-top: 1rem; gap: 0.45rem; }
  .mod__points li { font-size: 0.76rem; padding-left: 1.05rem; }
  .mod__points li::before { width: 5px; height: 5px; }
  .trade__keep { padding-inline: 1rem 3.5vw; }
  .trade__keep h2.sc-display--md { font-size: 1.25rem; letter-spacing: -0.015em; }
  .trade__text { font-size: 0.8rem; }
  .trade__packs { padding-inline: 3.5vw 1rem; }
  .packs__title.sc-display--md { font-size: 1.15rem; letter-spacing: -0.015em; }
  .packs__ladder li { padding: 0.8rem 0.9rem; }
  .packs__ladder li:nth-child(2) { margin-left: 0.7rem; }
  .packs__ladder li:nth-child(3) { margin-left: 1.4rem; }
  .packs__ladder span { font-size: 0.78rem; }
  .packs__note { font-size: 0.78rem; }

  .close__inner { margin-left: calc(8vw + 1.2rem); padding-right: 1rem; }
  .close h2 { font-size: clamp(1.7rem, 7.4vw, 2.4rem); }
  .close__sub { font-size: 0.95rem; }
  .close__steps li { font-size: 0.84rem; }
  .lead__grid { grid-template-columns: 1fr; }
  /* 16px stops iOS Safari from zooming the page on focus; 44px is the
     comfortable minimum touch target */
  .lead input { font-size: 16px; padding: 0.75rem 0.85rem; min-height: 44px; }
  .hero__side--sonnis .hero__copy { margin-right: 0; }
  .foot { padding-left: calc(8vw + 0.6rem); }
  .foot__in { flex-wrap: wrap; gap: 0.5rem 1rem; padding: 0.9rem 1rem 1rem 0.6rem; }
}

/* landscape phones: same width class, a fraction of the height. Tighten the
   pinned stages so nothing stacks into its neighbour. */
@media (max-width: 940px) and (max-height: 520px) {
  .hero__side { padding-block: 4.2rem 1.2rem; }
  .hero h1, .hero .hero__promise { font-size: 1.15rem; }
  .hero__sub { font-size: 0.74rem; margin-top: 0.5rem; }
  .chip, .land { top: calc(6% + var(--i) * 15.2%); min-height: 13vh; width: 38vw; }
  .chip__front, .chip__back { padding: 0.4rem 0.55rem; }
  .chip__front strong { font-size: 0.68rem; line-height: 1.2; }
  .chip__front span { display: none; }
  .chip__back strong { font-size: 0.64rem; line-height: 1.3; }
  .question__l, .question__r { font-size: 1rem; }
  .remains { top: auto; bottom: 8%; }
  .remains__line { font-size: 0.95rem; }
  .handover__rule { display: none; }
  .divider__label { display: none; }
  .close__steps { margin-top: 1.2rem; gap: 0.3rem; }
  .close__cta { margin-top: 1.2rem; }
  .close h2 { font-size: 1.5rem; }
  .close__sub { margin-top: 0.8rem; font-size: 0.85rem; }
  .foot__in { padding-block: 0.5rem 0.6rem; }
}

/* ----------------------------------------------------- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .grounds__dark, .divider, .divider__fill, .chip { will-change: auto; }
  /* sonnis.js snaps the boundary and parks every chip in its docked state;
     the question and closing cues still fade via the engine. */
}