/* playwithyour.com: a step-by-step reveal flow, with the eyes always in view. */

/* ---------- Fonts ----------
   Self-hosted from /fonts (SIL Open Font License, see fonts/OFL-*.txt). The fallback faces
   are system fonts resized to match each web font's width and vertical metrics, so the
   swap when the real font arrives barely moves anything. */
@font-face {
  font-family: 'Darumadrop One';
  src: url('fonts/darumadrop-one-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  src: url('fonts/nunito-latin-variable.woff2') format('woff2');
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Darumadrop Fallback Rounded';
  src: local('Arial Rounded MT Bold'), local('ArialRoundedMTBold');
  size-adjust: 90.55%;
  ascent-override: 128.11%;
  descent-override: 31.81%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Darumadrop Fallback';
  src: local('Arial'), local('ArialMT'), local('Helvetica');
  size-adjust: 98.29%;
  ascent-override: 118.02%;
  descent-override: 29.30%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Nunito Fallback';
  src: local('Arial'), local('ArialMT'), local('Helvetica');
  font-weight: 400;
  size-adjust: 101.85%;
  ascent-override: 99.26%;
  descent-override: 34.66%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Nunito Fallback';
  src: local('Arial'), local('ArialMT'), local('Helvetica');
  font-weight: 600;
  size-adjust: 103.75%;
  ascent-override: 97.45%;
  descent-override: 34.02%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Nunito Fallback';
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Bold');
  font-weight: 700 800;
  size-adjust: 100.25%;
  ascent-override: 100.85%;
  descent-override: 35.21%;
  line-gap-override: 0%;
}


:root {
  --display: 'Darumadrop One', 'Darumadrop Fallback Rounded', 'Darumadrop Fallback', sans-serif;
  --body: 'Nunito', 'Nunito Fallback', system-ui, sans-serif;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --bg: #F4F2EC;
  --ink: #1B1B1B;
  --sub: #5E5A52;
  --card: #FFFFFF;
  --eye: #FFFFFF;
  /* The orange used for "So are we." (and nothing else). */
  --accent-orange: #E8590C;
  /* The eyes keep the size they had beside the old headline. */
  --eyes-width: calc(1.21 * clamp(52px, 7.08vw, 110px));
  /* The flow is anchored from the top at this offset; the eyes stay pinned there. */
  --flow-top: clamp(88px, 12svh, 132px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 600;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

/* A scrollbar appearing mid-flow never shifts the layout sideways. */
html { scrollbar-gutter: stable; }

[hidden] { display: none !important; }

a { color: inherit; text-underline-offset: 3px; }
a:hover { opacity: 0.7; }

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 4px;
}

/* The hidden native switch used for iPhone haptics: out of sight, layout and reach. */
.haptic-switch {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  clip-path: inset(50%);
}

.honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Page structure ---------- */

.page {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

.brand {
  position: absolute;
  z-index: 2;
  left: max(24px, env(safe-area-inset-left, 0px));
  top: calc(20px + env(safe-area-inset-top, 0px));
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
@media (min-width: 900px) {
  .brand { left: 56px; top: calc(44px + env(safe-area-inset-top, 0px)); }
}

.main {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* iPhone safe areas: nothing under the status bar or beside a notch. */
  padding: calc(var(--flow-top) + env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-right, 0px)) 24px max(24px, env(safe-area-inset-left, 0px));
  text-align: center;
}

.footer {
  position: relative;
  z-index: 1;
  padding: 24px 24px 28px;
  text-align: center;
  font-size: 15px;
  color: var(--sub);
}

/* Studio credit and company details: a slim strip at the very bottom of the page. */
.strip {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  padding: 10px 24px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(94, 90, 82, 0.2);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--sub);
  transition: color 700ms ease, border-color 700ms ease;
}
.strip p { margin: 0; }
.strip .u { white-space: nowrap; }

/* Desktop: one row, credit left, company details right. The details wrap at most
   once, after "company no. 10881316 ·". */
@media (min-width: 1024px) {
  .strip {
    padding-left: 56px;
    padding-right: 56px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 32px;
  }
  .strip-credit { flex-shrink: 0; }
  .strip-legal { text-align: right; }
  .strip .grp { white-space: nowrap; }
}

/* Tablet: two short centred rows. */
@media (max-width: 1023px) {
  .strip { text-align: center; }
  .strip-credit { margin-bottom: 2px; }
  .strip .grp-office { white-space: nowrap; }
}

/* Phone: credit, then company name and number, then registered office. */
@media (max-width: 639px) {
  .strip { font-size: 11px; padding-top: 6px; }
  .strip .grp { display: block; }
  .strip .grp-office { white-space: normal; }
  .strip .sep-office { display: none; }
  .strip-credit a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin: -10px 0;
  }
}


/* ---------- Eyes ----------
   The main pair sits at the top of the flow and is never covered, faded, shrunk or
   replaced. It no longer follows the page down (it used to cover text on phones):
   instead extra pairs spawn in clear space further down (see .eye-layer), so a pair is
   always in view. */

.eyes-wrap {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  padding: 8px 14px;
}

/* Spawned and burst pairs live in this one overlay: absolutely positioned over the
   page's content (top 0, left 0, full width, the content's height), clipped to it, never
   blocking taps, and moved only with transform. It can never add height or width. */
.eye-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
}
.eye-pair {
  position: absolute;
  width: var(--eyes-width);
  pointer-events: none;
  opacity: 0;
  transform: var(--move, translate(0, 0)) scale(0.6);
  transition: opacity 280ms ease, transform 420ms var(--ease-out);
}
.eye-pair.is-in { opacity: 1; transform: var(--move, translate(0, 0)) scale(1); }
.eye-pair.is-out { opacity: 0; transition: opacity 300ms ease; }
.eye-pair .eyes { width: 100%; height: auto; }
.eye-pair.is-blinking .eyes { animation: blink 260ms ease; }
@keyframes blink {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.1); }
}
.eye-pair .eyes { transform-origin: 50% 50%; }
.eyes {
  display: block;
  width: var(--eyes-width);
  height: calc(var(--eyes-width) * 76 / 150);
  overflow: visible;
}
.eye-white {
  fill: var(--eye);
  stroke: var(--ink);
  stroke-width: 5;
}
.pupil {
  fill: var(--ink);
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 300ms var(--ease-out);
}
@media (max-width: 899px) {
  :root { --eyes-width: 78px; }
  .eye-white { stroke-width: 6; }
}

/* ---------- The flow ----------
   Anchored from the top, never re-centred. Every step is in the page from load and
   stacked in the stage's single grid cell, so the stage is already as tall as the
   tallest step. Steps and their parts appear with opacity and a small transform only. */

.flow {
  justify-content: flex-start;
  gap: 0;
}
.stage {
  display: grid;
  width: 100%;
  max-width: 640px;
  margin-top: 36px;
}
.step {
  grid-area: 1 / 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 400ms ease, visibility 0s linear 400ms;
}
.step.is-current {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
.step-question.is-leaving { opacity: 0; }
/* Until the Yes path starts, it takes no space at all, so the first screen (eyes,
   question, buttons, remark, partner link and footer) fits exactly in the viewport. */
.step-reveal:not(.is-inserted), .step-concepts:not(.is-inserted) { display: none; }
.step-reveal.is-leaving { opacity: 0; }

/* Parts of the Yes path are hidden in place, then fade up. */
.reveal {
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out), visibility 0s linear 700ms;
}
.reveal.is-in {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

/* The form and the thank-you share one cell, sized to the form. */
.swap { display: grid; width: 100%; }
.swap-item { grid-area: 1 / 1; }
.signup.is-gone { opacity: 0; visibility: hidden; transition: opacity 300ms ease, visibility 0s linear 300ms; }
/* Once the thank-you has replaced it (the visitor has finished), the form and the
   question step give up their reserved space, so no blank screen is left behind. */
.signup.is-collapsed, .step.is-collapsed { display: none; }

/* "So are we." starts in the centre of the screen and glides to its place (transform
   only, so nothing else moves). */
.so-are-we { will-change: transform; color: var(--accent-orange); }
.so-are-we.is-gliding { transition: transform var(--glide, 600ms) cubic-bezier(.2, .8, .2, 1); }
.thanks {
  align-self: start;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out), visibility 0s linear 700ms;
}
.thanks.is-in { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.flow-title {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.flow-text {
  margin: 0;
  max-width: 34em;
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.5;
  color: var(--ink);
}

/* Yes and No.
   One shared gap (--flow-gap) sits between the question and the button row, and
   between the row and the remark, so the two always match. The row has a fixed height
   that fits the Yes button at its largest (--yes-max), with both buttons centred in it,
   so nothing moves as Yes grows. Yes grows from --scale 1 to the row's limit; each No
   makes No a little smaller, never below a 44px target. */
.step-question {
  --flow-gap: clamp(24px, 3.2vw, 40px);
  --btn-h: 56px;
}
.answers {
  --yes-max: 2.4;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  column-gap: 16px;
  width: 100%;
  height: calc(var(--btn-h) * var(--yes-max) + 16px);
  margin-top: var(--flow-gap);
}
.yes-slot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn.answer {
  --scale: 1;
  height: calc(var(--btn-h) * var(--scale));
  min-width: 44px;
  min-height: 44px;
  padding: 0 calc(32px * var(--scale));
  font-size: calc(18px * var(--scale));
  line-height: 1;
  white-space: nowrap;
  box-shadow: 4px 4px 0 var(--sub);
  transition: height 250ms var(--ease-out), padding 250ms var(--ease-out), font-size 250ms var(--ease-out), transform 150ms ease;
}
.btn.answer-yes { transition: none; }
.btn.answer-no {
  background: var(--card);
  color: var(--ink);
}
/* Trembling as Yes nears full size; --wobble rises from 0 to 1. */
.answer-yes.is-trembling { animation: tremble 110ms linear infinite; }
@keyframes tremble {
  0%   { transform: translate(0, 0) rotate(0); }
  25%  { transform: translate(calc(var(--wobble) * 2.5px), calc(var(--wobble) * -1.5px)) rotate(calc(var(--wobble) * 2.5deg)); }
  50%  { transform: translate(calc(var(--wobble) * -2px), calc(var(--wobble) * 1.5px)) rotate(calc(var(--wobble) * -2deg)); }
  75%  { transform: translate(calc(var(--wobble) * 1.5px), calc(var(--wobble) * 2px)) rotate(calc(var(--wobble) * 1.5deg)); }
  100% { transform: translate(0, 0) rotate(0); }
}
/* The explosion: fragments fly a short way out and fade, then the text takes over. */
.frag {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 2px solid var(--ink);
  border-radius: 3px;
  pointer-events: none;
  animation: frag 750ms cubic-bezier(.15, .7, .3, 1) forwards;
}
@keyframes frag {
  from { transform: translate(-50%, -50%) rotate(0); opacity: 1; }
  to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--rot)); opacity: 0; }
}
.answers { position: relative; }
/* After the explosion: No and the remark fade out with the burst, and the text takes
   over the whole row, centred both ways, in the buttons' type treatment. */
.answers.is-exploded .answer-no {
  opacity: 0;
  visibility: hidden;
  transition: opacity 250ms ease, visibility 0s linear 250ms;
}
.step-question.is-exploded .remark { opacity: 0; }
.tension {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin: 0;
  padding: 0 16px;
  font-family: var(--body);
  font-weight: 800;
  font-size: clamp(20px, 2.4vw, 30px);
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
  text-align: center;
  text-wrap: balance;
  opacity: 0;
  pointer-events: none;
}
.tension.is-in { animation: appear 300ms var(--ease-out) both; }

/* The remark's space is reserved from load, so nothing jumps when it appears or wraps. */
.remark {
  min-height: calc(2 * 1.5em);
  max-width: 30em;
  margin: var(--flow-gap) 0 0;
  font-size: 17px;
  line-height: 1.5;
  color: var(--sub);
  transition: opacity 160ms ease;
}
.remark.is-changing { opacity: 0; }

@media (max-width: 639px) {
  .answers { --yes-max: 1.75; }
  /* The longest remark (the template) runs to three lines at phone width. */
  .remark { min-height: calc(3 * 1.5em); font-size: 16px; }
}


/* After Yes: "So are we." word by word, then each part fades in. */
.so-are-we span { display: inline-block; opacity: 0; }
.so-are-we.is-in span { animation: appear 600ms var(--ease-out) both; }
.so-are-we.is-in span:nth-child(2) { animation-delay: 250ms; }
.so-are-we.is-in span:nth-child(3) { animation-delay: 500ms; }
.so-are-we:focus { outline: none; }
@keyframes appear {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
#reveal-paragraph { margin-top: 28px; }
#reveal-paragraph-2 { margin-top: 32px; }

/* "Want to know what the first two are?" in the heading font, smaller, then Show me
   in the same style as Yes. */
.show-me { display: flex; flex-direction: column; align-items: center; margin-top: 40px; --btn-h: 56px; }
.flow-subtitle {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.15;
  color: var(--ink);
}
.show-me .btn.answer { margin-top: 24px; transition: transform 150ms ease; }

/* Screen 3: one centred column (about 32em of 18px text), so the heading, the options,
   the note and the form share the same edges. Rhythm: a medium gap (--gap-m) between
   heading, options, note and form; a small one between the form and the privacy line;
   the largest before the partner link. */
.step-concepts {
  --gap-m: 36px;
  justify-self: center;
  max-width: 576px;
  margin-bottom: 72px;
}
.concepts-heading { align-self: stretch; color: var(--accent-orange); text-align: center; }
.concepts-heading:focus { outline: none; }
.step-concepts .signup { margin: var(--gap-m) 0 0; max-width: none; gap: 0; }
.step-concepts .edition-options { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; align-items: stretch; gap: 20px; }
.concepts-note {
  margin: var(--gap-m) 0 0;
  font-size: 15px;
  line-height: 1.5;
  text-align: center;
  color: var(--ink);
}
.step-concepts .email-step { margin-top: var(--gap-m); }
.step-concepts .consent { margin-top: 10px; }
.step-concepts .field-error { margin-top: 8px; }
/* The partner link fades in last on screen 3 (it moves down when screen 3 arrives). */
.footer.is-waiting a { opacity: 0; visibility: hidden; }
.footer a { transition: opacity 700ms var(--ease-out); }

/* ---------- Form ---------- */

.btn {
  height: 54px;
  padding: 0 30px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--body);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 150ms ease;
}
.btn:active { transform: translate(2px, 2px); }
.btn:disabled { opacity: 0.6; cursor: progress; }

.signup {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  max-width: 520px;
  margin: 32px auto 0;
  text-align: left;
}
.editions {
  margin: 0;
  padding: 0;
  border: 0;
  text-align: center;
}
.editions legend { padding: 0; margin: 0 auto 24px; text-align: center; }
.editions legend:focus { outline: none; }
.edition-options { display: flex; justify-content: center; align-items: flex-start; gap: 16px 28px; }
/* Each option is a large card: outlined like the email field, with the buttons' offset
   shadow. The real checkbox covers the whole card, invisible, so a tap anywhere toggles
   it and keyboards and screen readers still meet a checkbox. Ticked: orange outline,
   shadow, name and a small tick in the corner. */
.edition-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-sizing: border-box;
  padding: 26px 22px 24px;
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: var(--bg);
  box-shadow: 4px 4px 0 var(--sub);
  text-align: center;
  color: var(--ink);
  cursor: pointer;
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
  -webkit-tap-highlight-color: transparent;
}
.edition-card:active { transform: translate(2px, 2px); }
.edition-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.edition-card:has(.edition-input:focus-visible) { outline: 3px solid var(--ink); outline-offset: 4px; }
.edition-name {
  font-family: var(--display);
  font-weight: 400;
  font-size: 56px;
  line-height: 1;
  color: var(--ink);
  transition: color 150ms ease;
}
.edition-desc {
  max-width: 22em;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
}
.edition-tick {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 26px;
  height: 26px;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 150ms ease, transform 150ms ease;
  pointer-events: none;
}
.edition-tick circle { fill: var(--accent-orange); }
.edition-tick path { fill: none; stroke: var(--bg); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.edition-card:has(.edition-input:checked) { border-color: var(--accent-orange); box-shadow: 4px 4px 0 var(--accent-orange); }
.edition-card:has(.edition-input:checked) .edition-name { color: var(--accent-orange); }
.edition-card:has(.edition-input:checked) .edition-tick { opacity: 1; transform: none; }
@media (max-width: 639px) {
  .edition-options, .step-concepts .edition-options { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; gap: 16px; }
  .step-concepts { --gap-m: 28px; margin-bottom: 64px; }
  .edition-name { font-size: 40px; }
  .edition-desc { font-size: 16px; }
}
.email-step { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
.email-row { display: flex; gap: 12px; }
.email-row .input { flex: 1; }
.field-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--sub);
}
.input {
  min-width: 0;
  height: 54px;
  box-sizing: border-box;
  padding: 0 18px;
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: var(--card);
  color: var(--ink);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
}
.input::placeholder { color: var(--sub); opacity: 0.8; }
.input[aria-invalid="true"] { border-style: dashed; }
.btn-submit { box-shadow: 4px 4px 0 var(--sub); flex-shrink: 0; }
.field-error {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
}
.consent {
  margin: 2px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--sub);
}
.tick {
  display: flex;
  gap: 10px;
  align-items: center;
  min-height: 44px;
  font-size: 15px;
  color: var(--sub);
  cursor: pointer;
}
.tick input {
  width: 20px;
  height: 20px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--ink);
}
.thanks { margin-top: 32px; font-weight: 700; }
/* The email error keeps its space, so showing it never moves anything. */
.flow .field-error { visibility: hidden; }
.flow .field-error.is-shown { visibility: visible; }
.thanks:focus, .confirmation:focus { outline: none; }
.confirmation {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
}

@media (max-width: 639px) {
  :root { --flow-top: 64px; }
  .stage { margin-top: 28px; }
  .email-row { flex-direction: column; }
  .btn-submit { box-shadow: none; }
  .footer { text-align: left; padding: 32px 24px 24px; font-size: 14px; }
}

/* Short phones (around 667px tall, like an iPhone SE): tighter spacing and slightly
   smaller footer text, so the whole first screen still fits without scrolling. */
@media (max-width: 767px) and (max-height: 700px) {
  :root { --flow-top: 48px; }
  .stage { margin-top: 16px; }
  .step-question { --flow-gap: 18px; }
  .footer { padding: 14px 24px 12px; font-size: 13px; }
  .strip { font-size: 10.5px; padding-top: 4px; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0s !important;
  }
  .btn:active { transform: none; }
}

/* ---------- Secondary pages (partner, privacy) ---------- */

.subpage .main::before { display: none; }
.subpage .main {
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  max-width: 600px;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 120px 24px 48px;
  gap: 20px;
  text-align: left;
}
.subpage .brand a { text-decoration: none; }
.subpage-title {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(44px, 9vw, 72px);
  line-height: 1;
}
.subpage-intro {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  color: var(--sub);
}
.partner-form { gap: 10px; max-width: none; margin: 12px 0 0; }
.partner-form .field-label { margin-top: 8px; }
.partner-form .input { flex: none; width: 100%; }
.textarea {
  height: auto;
  min-height: 120px;
  padding: 14px 18px;
  line-height: 1.5;
  resize: vertical;
}
.options {
  margin: 8px 0 0;
  padding: 0;
  border: 0;
}
.options legend {
  padding: 0;
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--sub);
}
.options .tick { color: var(--ink); font-size: 16px; }
.partner-form .btn { align-self: flex-start; margin-top: 12px; box-shadow: 4px 4px 0 var(--sub); }
.subpage .footer { text-align: left; max-width: 600px; margin: 0 auto; width: 100%; box-sizing: border-box; }