/* ==========================================================================
   Perk landing page
   Reference build is the 390px phone layout; everything else adapts up.
   No motion in this stage - it is layered on later.
   ========================================================================== */

/* --------------------------------- Fonts -------------------------------- */
/* Self-hosted, latin subset only. font-display: swap so headline text paints
   in a fallback rather than leaving a hole while the retro face loads. */

@font-face {
  font-family: 'Titan One';
  src: url('/fonts/titan-one-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Nunito Sans';
  src: url('/fonts/nunito-sans-latin.woff2') format('woff2');
  font-weight: 200 1000;
  font-stretch: 100%;
  font-style: normal;
  font-display: swap;
}

/* Cut down to just the letters in the signature: 3.8KB instead of 29.5KB.
   If the signature ever changes from 'Will', this file needs regenerating -
   any other character will fall back to the headline face. */
@font-face {
  font-family: 'Permanent Marker';
  src: url('/fonts/permanent-marker-will.woff2') format('woff2');
  unicode-range: U+57, U+69, U+6C;
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* -------------------------------- Tokens -------------------------------- */

:root {
  /* Palette */
  --cream:        #F1E5CE;
  --paper:        #FBF4E7;
  --advisory:     #F7F0DE;
  --plinth:       #ECDCB8;
  --plinth-edge:  #E0CDA3;
  --hairline:     #EADCC2;
  --card-border:  #E7D6B8;
  --ink:          #2B2016;
  --bean:         #6B4E37;
  --caramel:      #8A6A4C;
  --tan:          #C9A981;
  /* The two quieter tans, used by the wide-screen beat list and the dots.
     BUILD-SPEC §1: inactive beat rows, and inactive beat numbers / dots. */
  --tan-text:     #B39A75;
  --tan-rule:     #D2BF98;
  --terracotta:   #B0553F;
  --on-terracotta:#FBF4E7;

  --display: 'Titan One', Georgia, serif;
  --text:    'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --marker:  'Permanent Marker', 'Titan One', cursive;

  /* Layout */
  --gutter: 16px;
  --content: 1000px;

  /* Type. The design's sizes multiplied by --type-scale, so the whole ladder
     can be nudged from one number without losing the proportions between
     sizes. 1 = exactly the sizes in the design spec. */
  --type-scale: 1.15;

  --fs-wordmark: calc(22px   * var(--type-scale));
  --fs-h1:       calc(27px   * var(--type-scale));
  --fs-h2:       calc(22px   * var(--type-scale));
  --fs-breath:   calc(20px   * var(--type-scale));
  --fs-faq-q:    calc(17px   * var(--type-scale));
  --fs-btn:      calc(16px   * var(--type-scale));
  --fs-lead:     calc(13.5px * var(--type-scale));
  --fs-body:     calc(13.5px * var(--type-scale));
  --fs-beat:     calc(15px   * var(--type-scale));
  --fs-founder:  calc(14px   * var(--type-scale));
  --fs-kicker:   calc(10px   * var(--type-scale));
  --ls-kicker:   0.11em;
  --fs-caption:  calc(11px   * var(--type-scale));
  --fs-badge:    calc(11px   * var(--type-scale));
  --fs-step-num: calc(13px   * var(--type-scale));

  /* Phone shells */
  /* The screenshots grow to the design size but never wider than the room
     left beside Perk, so nothing is squeezed off a narrow phone. */
  --phone-hero:    min(200px, calc(100vw - 190px));
  --phone-beat:    min(275px, calc(100vw - 115px));
  --phone-honesty: min(245px, calc(100vw - 136px));
  --perk-hero:      128px;
  --perk-small:      46px;
  --perk-beat:       65px;
}

/* Each pose sits in its box differently, so sizes are set as the width of the
   drawn figure and the box is worked back from it. Measured off the artwork. */
.mascot { --ink-frac: 0.736; }
.mascot--wide { --ink-frac: 0.846; }
.mascot--grin { --ink-frac: 0.723; }

@media (min-width: 834px) {
  :root {
    --gutter: 44px;
    --type-scale: 1.12;

    --fs-wordmark: calc(23px * var(--type-scale));
    --fs-h1:       calc(40px * var(--type-scale));
    --fs-h2:       calc(30px * var(--type-scale));
    --fs-breath:   calc(24px * var(--type-scale));
    --fs-faq-q:    calc(18px * var(--type-scale));
    --fs-btn:      calc(18px * var(--type-scale));
    --fs-lead:     calc(15px * var(--type-scale));
    --fs-body:     calc(14px * var(--type-scale));
    --fs-beat:     calc(17px * var(--type-scale));
    --fs-founder:  calc(15px * var(--type-scale));
    --fs-kicker:   calc(11px * var(--type-scale));
    --ls-kicker:   0.14em;
    --fs-caption:  calc(11.5px * var(--type-scale));
    --fs-badge:    calc(11.5px * var(--type-scale));

    --phone-hero:    240px;
    --phone-beat:    300px;
    --phone-honesty: 285px;
    --perk-hero:      157px;
    --perk-small:      58px;
    --perk-beat:       74px;
  }
}

@media (min-width: 1280px) {
  :root {
    --gutter: 100px;
    --type-scale: 1.08;

    --fs-wordmark: calc(24px * var(--type-scale));
    /* The headline is pinned to the design's 46px: above that it stops setting
       on one line at 1440, which the comp is explicit about. */
    --fs-h1:       46px;
    --fs-h2:       calc(34px * var(--type-scale));
    --fs-breath:   calc(26px * var(--type-scale));
    --fs-faq-q:    calc(19px * var(--type-scale));
    --fs-btn:      calc(19px * var(--type-scale));
    --fs-lead:     calc(16px * var(--type-scale));
    --fs-body:     calc(15px * var(--type-scale));
    --fs-beat:     calc(19px * var(--type-scale));
    --fs-caption:  calc(12.5px * var(--type-scale));

    --phone-hero:    250px;
    --phone-beat:    330px;
    --phone-honesty: 325px;
    --perk-hero:      170px;
    --perk-small:      62px;
    --perk-beat:       80px;
  }
}

/* -------------------------------- Reset --------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--cream);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--text);
  font-size: var(--fs-body);
  line-height: 1.6;
  overflow-x: hidden;
}

h1, h2, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img { max-width: 100%; }

.wrap {
  width: 100%;
  max-width: calc(var(--content) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ------------------------- Shared type + controls ------------------------ */

.wordmark {
  font-family: var(--display);
  font-size: var(--fs-wordmark);
  line-height: 1.1;
  font-weight: 400;
}

.h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 1.12;
  text-wrap: balance;
}

.breath {
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--fs-breath);
  line-height: 1.32;
  text-wrap: balance;
}

.kicker {
  font-family: var(--text);
  font-weight: 900;
  font-size: var(--fs-kicker);
  letter-spacing: var(--ls-kicker);
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--caramel);
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--bean);
  text-wrap: pretty;
}

.body {
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--bean);
  text-wrap: pretty;
}

.caption {
  font-size: var(--fs-caption);
  font-weight: 700;
  line-height: 1.45;
  color: var(--caramel);
  text-wrap: pretty;
}

.mascot {
  display: block;
  height: auto;
  flex: none;
}

a { color: var(--bean); }

.btn {
  display: inline-block;
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--fs-btn);
  line-height: 1.15;
  text-decoration: none;
  color: var(--on-terracotta);
  background: var(--terracotta);
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  box-shadow: 2px 2px 0 var(--ink);
  padding: 14px 26px;
  text-align: center;
}

.btn--wide { width: 100%; }

/* Focus states: a heavy ink ring, legible on cream, paper and terracotta. */
a:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}

.btn:focus-visible { outline-offset: 4px; }

/* ------------------------------ 1 · Hero -------------------------------- */

.hero { padding-top: 22px; }

.hero__top { padding-inline: var(--gutter); }
.hero__top .wordmark { text-align: center; }

.hero__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--fs-h1);
  line-height: 1.12;
  text-align: center;
  text-wrap: balance;
  margin-top: 18px;
}

.hero__lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--bean);
  text-align: center;
  text-wrap: pretty;
  margin-top: 12px;
}

.hero__action {
  margin-top: 22px;
  text-align: center;
}

.hero__action .btn { min-width: 290px; }

.badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  margin: 12px auto 0;
  padding: 7px 14px;
  background: var(--paper);
  border: 1.5px solid var(--card-border);
  border-radius: 10px;
  font-size: var(--fs-badge);
  font-weight: 600;
  line-height: 1.35;
  color: var(--bean);
}

.badge__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--caramel);
  flex: none;
}

.hero__stage {
  position: relative;
  margin-top: 26px;
  padding-bottom: 10px;
}

/* The plinth is full-bleed and crosses the screenshot part-way down.
   Pinned to its containing block rather than sized with 100vw: .hero__stage is
   already the full document width, and 100vw includes the scrollbar, so the
   old version ran 8px wide and sat half a scrollbar off-centre on any platform
   that reserves space for one. Same trap the desktop sequence band avoids. */
.hero__band {
  position: absolute;
  left: 0;
  right: 0;
  top: 146px;
  bottom: 0;
  background: var(--plinth);
  border-top: 1.5px solid var(--plinth-edge);
}

.hero__stage-inner {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 6px;
}

.hero__perk { width: calc(var(--perk-hero) / var(--ink-frac)); }

/* ---------------------------- Phone shells ------------------------------ */

.phone {
  background: var(--paper);
  border: 2.5px solid var(--ink);
  border-radius: 20px;
  box-shadow: 4px 5px 0 var(--ink);
  padding: 7px;
  flex: none;
}

.phone__screen {
  position: relative;
  border-radius: 13px;
  overflow: hidden;
  background: var(--paper);
}

.phone__screen > img {
  display: block;
  width: 100%;
  height: auto;
}

/* 1.5px inner edge ring, drawn over the image - an inset box-shadow would
   render underneath it. */
.phone__ring {
  position: absolute;
  inset: 0;
  z-index: 3;
  border: 1.5px solid var(--ink);
  border-radius: 13px;
  pointer-events: none;
}

.phone--hero { width: var(--phone-hero); }

.phone--beat { width: var(--phone-beat); }

/* All four sequence screens share one frame, so the taller captures clip at
   the foot rather than the frame changing size between beats. */
.phone--beat .phone__screen { aspect-ratio: 223 / 407; }

.phone--beat .phone__screen > img {
  position: absolute;
  inset: 0 0 auto 0;
}

.phone--honesty {
  width: var(--phone-honesty);
  border-width: 3px;
  border-radius: 22px;
}

/* ---------------------------- 2 · The problem ---------------------------- */

.problem { padding: 50px 0 30px; }

.problem__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.problem__perk { width: calc(var(--perk-small) / var(--ink-frac)); }

@media (min-width: 834px) {
  /* From tablet up the wordmark sits at the top left, as the design has it. */
  .hero__top .wordmark { text-align: left; }

  .hero__stage-inner {
    justify-content: center;
    gap: 30px;
  }

  .problem { padding: 40px 0 36px; }

  .problem__inner {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 22px;
    text-align: left;
  }

  .problem .breath { max-width: 30ch; }
}

/* --------------------------- 3 · The sequence ---------------------------- */

.sequence {
  background: var(--plinth);
  border-top: 1.5px solid var(--plinth-edge);
  border-bottom: 1.5px solid var(--plinth-edge);
  padding: 30px 0 34px;
}

/* The panel heading is a desktop-only device in the design; at phone and
   tablet width the beat copy carries the job on its own. */
.sequence__kicker,
.sequence__title { display: none; }

.beats {
  display: flex;
  flex-direction: column;
  gap: 34px;
}

.beat__copy {
  font-size: var(--fs-beat);
  font-weight: 600;
  line-height: 1.45;
  text-align: center;
  text-wrap: pretty;
  margin-bottom: 16px;
}

.beat__stage {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
}

.beat__perk { width: calc(var(--perk-beat) / var(--ink-frac)); }

/* The closing line "That's the whole loop." was removed on 22 August 2026 at
   Will's instruction - it was restating what the reader had just watched. The
   CTA below now carries the 34px it used to sit on, so the gap under the
   sequence is unchanged. */
.sequence__action {
  margin-top: 34px;
  text-align: center;
}

.sequence__action .btn { min-width: 290px; }

@media (min-width: 1280px) {
  .sequence { padding: 46px 0; }

  .sequence__kicker { display: block; }

  .sequence__title {
    display: block;
    margin-top: 8px;
    margin-bottom: 34px;
    max-width: 18ch;
  }
}

/* ------------------------- 4 · The honesty panel ------------------------- */

.honesty { padding: 30px 0; }

.honesty__card {
  background: var(--advisory);
  border: 1.5px solid var(--card-border);
  border-radius: 20px;
  padding: 20px 16px 22px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "text text"
    "shot perk";
  align-items: end;
  column-gap: 10px;
  row-gap: 18px;
}

.honesty__text { grid-area: text; }
.honesty__text .h2 { margin-top: 8px; }
.honesty__text .body { margin-top: 12px; }

.honesty__perk {
  grid-area: perk;
  width: calc(var(--perk-small) / var(--ink-frac));
  margin-bottom: 24px;
}

.honesty__shot { grid-area: shot; }

@media (min-width: 834px) {
  .honesty { padding: 40px 0; }

  .honesty__card {
    grid-template-areas:
      "shot text"
      "shot perk";
    grid-template-rows: auto 1fr;
    align-items: start;
    column-gap: 28px;
    row-gap: 14px;
    padding: 28px;
  }

  .honesty__perk { margin-bottom: 0; justify-self: start; }
}

@media (min-width: 1280px) {
  .honesty__card { column-gap: 44px; padding: 34px; }
}

/* ------------------------------ 6 · Install ------------------------------ */

.install {
  background: var(--plinth);
  border-top: 1.5px solid var(--plinth-edge);
  padding: 30px 0 34px;
  scroll-margin-top: 16px;
}

.install .h2 { margin-top: 8px; }

.install__lead { margin-top: 12px; }

.install__action {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 22px;
}

.install__perk { width: calc(var(--perk-beat) / var(--ink-frac)); }

.install__bridge { margin-top: 14px; }

.steps {
  margin-top: 18px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 18px;
  box-shadow: 4px 5px 0 var(--ink);
  padding: 4px 16px;
}

.step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 0;
}

.step + .step { border-top: 1.5px solid var(--hairline); }

.step__num {
  flex: none;
  width: 26px;
  height: 26px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: var(--fs-step-num);
  font-weight: 900;
  line-height: 1;
  color: var(--ink);
}

.step__body { min-width: 0; }
.step__body .body { color: var(--ink); }
.step__body strong { font-weight: 800; }

.step__toolbar {
  display: block;
  width: 100%;
  max-width: 322px;
  height: auto;
  margin-top: 12px;
}

.step__toolbar + .caption { margin-top: 10px; }

.sheet-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--advisory);
  border: 1.5px solid var(--card-border);
  border-radius: 12px;
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
}

.sheet-row__plus {
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  color: var(--ink);
}

@media (min-width: 834px) {
  .install { padding: 40px 0 46px; }

  .install__action { gap: 10px; }
  .install__action .btn--wide { width: auto; min-width: 290px; }

  .steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 22px;
    padding: 18px 22px;
  }

  .step { padding: 0; align-items: flex-start; }

  .step + .step {
    border-top: 0;
    border-left: 1.5px solid var(--hairline);
    padding-left: 22px;
  }
}

@media (min-width: 1280px) {
  .steps { padding: 26px 34px; gap: 0 34px; }
}

/* -------------------------------- 7 · FAQ -------------------------------- */

.faq { padding: 30px 0 26px; }

.faq__grid {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "head perk"
    "card card";
  align-items: end;
  column-gap: 16px;
  row-gap: 16px;
}

.faq__head { grid-area: head; }
.faq__head .h2 { margin-top: 6px; }

.faq__perk {
  grid-area: perk;
  width: calc(var(--perk-small) / var(--ink-frac));
}

.faq__card { grid-area: card; }

.faq__card {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 18px;
  box-shadow: 3px 4px 0 var(--ink);
  padding: 0 16px;
}

.qa + .qa { border-top: 1.5px solid var(--hairline); }

.qa__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 0;
  cursor: pointer;
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--fs-faq-q);
  line-height: 1.15;
  color: var(--ink);
  list-style: none;
}

/* Hide the native disclosure triangle; the chevron replaces it. */
.qa__q::-webkit-details-marker { display: none; }
.qa__q::marker { content: ''; }

.qa__chev {
  flex: none;
  width: 11px;
  height: 11px;
  margin-top: 4px;
  border-right: 2px solid var(--bean);
  border-bottom: 2px solid var(--bean);
  transform: rotate(45deg);
  transform-origin: 60% 60%;
}

.qa[open] .qa__chev { transform: rotate(-135deg); }

.qa__a { padding-bottom: 14px; }

@media (min-width: 834px) {
  .faq { padding: 40px 0 36px; }
  .faq__card { padding: 0 22px; }
  .qa__q { padding: 16px 0; }
  .qa__a { padding-bottom: 18px; }
}

@media (min-width: 1280px) {
  .faq__card { padding: 0 34px; }
}

/* --------------------------- 8 · Founder note ---------------------------- */

.founder { padding: 26px 0 30px; }

.founder__rule {
  display: block;
  width: 26px;
  height: 3px;
  background: var(--ink);
  margin-bottom: 10px;
}

.founder__note .body { margin-top: 14px; }
.founder__note .body:first-child { margin-top: 12px; }

.founder .body {
  font-size: var(--fs-founder);
  line-height: 1.7;
  color: var(--ink);
}

.founder__sign {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.signature {
  font-family: var(--marker);
  font-size: 22px;
  line-height: 1.1;
  color: var(--ink);
  margin-top: 26px;
}

.founder__where {
  font-size: var(--fs-caption);
  font-weight: 700;
  line-height: 1.35;
  color: var(--caramel);
  margin-top: 4px;
}

.founder__photo {
  flex: none;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 2.5px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  object-fit: cover;
}

@media (min-width: 834px) {
  .founder { padding: 36px 0 40px; }
  .founder__photo { width: 66px; height: 66px; }
}

/* ------------------------------- 9 · Footer ------------------------------ */

.footer {
  padding: 22px 0 30px;
  border-top: 1.5px solid var(--card-border);
}

.footer__wordmark { margin-bottom: 10px; }

.footer .body + .body { margin-top: 10px; }

.footer a { color: var(--bean); }

/* ------------------- Vertical rhythm at the wider widths ------------------ */
/* The design opens the hero out as the page gets wider; the phone spacing is
   too tight to simply scale up. Measured off the 834 and 1440 comps. */

@media (min-width: 834px) {
  .hero { padding-top: 24px; }
  .hero__title  { margin-top: 25px; }
  .hero__lead   { margin-top: 20px; }
  .hero__action { margin-top: 24px; }
  .badge        { margin-top: 12px; }
  .hero__stage  { margin-top: 43px; }
}

@media (min-width: 1280px) {
  .hero { padding-top: 28px; }
  .hero__title  { margin-top: 30px; }
  .hero__lead   { margin-top: 21px; }
  .hero__action { margin-top: 31px; }
  .badge        { margin-top: 16px; }
  .hero__stage  { margin-top: 42px; }

  .problem  { padding: 46px 0 40px; }
  .sequence { padding: 46px 0; }
  .honesty  { padding: 46px 0; }
  .install  { padding: 46px 0 50px; }
  .faq      { padding: 46px 0 40px; }
  .founder  { padding: 40px 0 46px; }
  .footer   { padding: 30px 0 40px; }
}

@media (min-width: 1280px) {
  .hero__band { top: 95px; }
}

@media (min-width: 834px) and (max-width: 1279.98px) {
  .hero__band { top: 89px; }
}

/* At the widest width the FAQ card keeps a readable measure and Perk stands
   out to the right of it, as the 1440 comp has it. */
@media (min-width: 1280px) {
  .faq__grid {
    grid-template-columns: 721px 1fr;
    grid-template-areas:
      "head ."
      "card perk";
    align-items: start;
  }

  /* Perk is noticeably larger here - the right column is his alone. */
  .faq__perk {
    justify-self: end;
    align-self: start;
    width: calc(128px / var(--ink-frac));
    margin-top: -34px;
  }

  /* The founder note keeps its own measure rather than running the full column. */
  .founder__note,
  .founder__sign { max-width: 628px; }
}

/* Below 360px the hero group would be wider than the content box, so the
   screenshot and Perk both come down a size. Nothing else changes. */
@media (max-width: 359.98px) {
  :root {
    --perk-hero:      96px;
    --perk-small:     40px;
    --perk-beat:      52px;
  }
}

/* =========================== Install variants ============================ */
/* Exactly one variant is shown. With no script, or a device we cannot place,
   the desktop one shows - it has no button and cannot mislead anyone. */

.iv { display: none; }

:root:not([data-install]) .iv--d,
[data-install="d"] .iv--d,
[data-install="a"] .iv--a,
[data-install="b"] .iv--b,
[data-install="c"] .iv--c { display: block; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

button.btn {
  font: inherit;
  font-family: var(--display);
  font-size: var(--fs-btn);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

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

.copy-status {
  margin-top: 10px;
  min-height: 1.4em;
  font-size: var(--fs-caption);
  font-weight: 700;
  line-height: 1.4;
  color: var(--caramel);
}

/* ---------- B · the detour card. Warm, not alarming: no red, no icon. ------ */

.caution {
  margin-top: 18px;
  background: #F3E6C7;
  border: 2px solid var(--ink);
  border-radius: 18px;
  box-shadow: 4px 5px 0 var(--ink);
  padding: 18px 16px 20px;
}

.kicker--caution { color: #A9722F; }

.caution__title { margin: 6px 0 12px; }

/* Variant A's warning strip. Same treatment as B's card - it is the same kind
   of message, a redirection rather than a failure - but with no title of its
   own, because it is one instruction rather than a detour to explain. It keeps
   the ink border and hard shadow: this is the line that stops someone losing
   their first brews, and it has to interrupt a reader on their way to the
   button below it. */
.caution--strip { padding: 14px 16px 16px; }

.caution--strip .body { margin-top: 6px; }

/* ---------- The address, shown on B (copyable) and D (just readable) ------- */

.addr {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 16px;
  padding: 13px 14px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 12px;
  text-align: left;
  color: var(--ink);
}

.addr__text {
  font-family: var(--text);
  font-size: var(--fs-body);
  font-weight: 800;
  line-height: 1.2;
}

.addr__icon { flex: none; margin-left: auto; }

.addr--copy {
  cursor: pointer;
  font: inherit;
  -webkit-appearance: none;
  appearance: none;
}

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

.addr__rule {
  width: 1.5px;
  align-self: stretch;
  background: var(--card-border);
  flex: none;
}

.addr__hint {
  font-size: var(--fs-caption);
  font-weight: 700;
  line-height: 1.3;
  color: var(--caramel);
}

/* ---------- C · Android ---------- */

.android {
  margin-top: 18px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 18px;
  box-shadow: 4px 5px 0 var(--ink);
  padding: 18px 16px 20px;
}

.android .install__action { margin-top: 0; }

.android__note {
  margin-top: 14px;
  text-align: center;
  color: var(--bean);
}

.android__kicker {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1.5px solid var(--hairline);
}

.steps--quiet {
  margin-top: 10px;
  background: none;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}

.steps--quiet .step { padding: 7px 0; }
.steps--quiet .step + .step { border-top: 0; }
.steps--quiet .step__num {
  width: 24px; height: 24px;
  border-color: var(--tan);
  color: var(--caramel);
}
.steps--quiet .step__body .body { color: var(--bean); }

/* ---------- D · Desktop, and the fallback ---------- */

.desk {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 18px;
  box-shadow: 4px 5px 0 var(--ink);
  padding: 20px 16px;
}

.desk__text { min-width: 0; flex: 1 1 auto; }
.desk .h2 { margin-top: 6px; }
.desk__body { margin-top: 12px; max-width: 62ch; }
.desk__perk { width: calc(var(--perk-beat) / var(--ink-frac)); flex: none; }

.desk .addr { width: fit-content; max-width: 100%; }

@media (min-width: 834px) {
  .caution, .android { padding: 22px; }
  .desk { padding: 28px; gap: 28px; }
  .android .install__action .btn--wide { width: auto; min-width: 290px; }

  .steps--quiet {
    display: block;
    padding: 0;
  }
  .steps--quiet .step { padding: 7px 0; border-left: 0; padding-left: 0; }
  .steps--quiet .step + .step { border-left: 0; padding-left: 0; }
}

@media (min-width: 1280px) {
  .caution, .android { padding: 34px; }
  .desk { padding: 34px; gap: 40px; }
}

/* The Android card is narrower than the panel, so Perk comes down a size here.
   At the larger type size the button label needs two lines on a phone narrower
   than about 410px; it keeps its normal padding rather than being squeezed. */
.android .install__perk { width: calc(var(--perk-small) / var(--ink-frac)); }

/* ================================= MOTION ================================ */
/* All of it drawn. The stacked sequence is the default; the pinned one only
   appears when motion is allowed. */

.pinned { display: none; }

[data-motion="on"] .beats  { display: none; }
[data-motion="on"] .pinned { display: block; }

/* .pinned lives outside .wrap so it can widen at 1280 without a 100vw
   break-out. Below 1280 these three lines reproduce .wrap exactly, so the
   phone and tablet layouts sit where they always did. */
.pinned {
  width: 100%;
  max-width: calc(var(--content) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------------------------- The pinned stage --------------------------- */

.pinned__stage {
  height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 0 20px;
}

/* Everything inside the pinned viewport. On a phone this is the single centred
   column the design signed off, and the numbers below were measured before and
   after this wrapper was introduced to prove it did not move. From 834 up it
   becomes the two-column arrangement. */
.pinned__inner {
  width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

/* The beat list is a wide-screen device only. */
.pinned__side { display: none; }
.pinned__kicker,
.pinned__title { display: none; }

/* Room underneath for the pen stroke, which sits outside the text box. */
.pinned__copy {
  position: relative;
  width: 100%;
  display: grid;
  margin-bottom: 14px;
}

/* The four lines sit on top of one another so the frame below never moves.
   The one being read is fully opaque the moment its screen arrives.
   The other three are transparent rather than hidden: a screen reader still
   reaches all four, so the words are genuinely identical in both versions. */
.pinned__copy .beat__copy {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  transition: opacity 140ms linear;
}

.pinned__copy .beat__copy.is-active { opacity: 1; }

/* ------------------------- The wide-screen beat list --------------------- */
/* Four rows, all four readable at any scroll position. Only the active row is
   in ink and only the active row carries the terracotta rule - measured off
   page-desktop-1440.png, where the inactive rows have no rule at all.
   Colours are the BUILD-SPEC §1 tokens, confirmed by sampling the export:
   active ink #2B2016, inactive copy #B39A75, inactive number #D2BF98. */

.pinned__list {
  display: flex;
  flex-direction: column;
  --pin-indent: 16px;   /* rule gutter before the number */
  --pin-num: 29px;      /* number column */
}

.pin-beat {
  position: relative;
  display: grid;
  grid-template-columns: var(--pin-indent) var(--pin-num) 1fr;
  align-items: baseline;
  padding: 7px 0;
}

/* The rule spans the row it belongs to, so a two-line beat gets a taller mark
   than a one-line beat. Terracotta is allowed here: BUILD-SPEC §1 names the
   active beat rule as the one exception to "install action only". */
.pin-beat__rule {
  grid-column: 1;
  align-self: stretch;
  justify-self: start;
  width: 3px;
  margin: 3px 0;
  border-radius: 2px;
  background: transparent;
  transition: background-color 160ms linear;
}

.pin-beat.is-active .pin-beat__rule { background: var(--terracotta); }

.pin-beat__num {
  grid-column: 2;
  font-weight: 900;
  font-size: var(--fs-step-num);
  font-variant-numeric: tabular-nums;
  color: var(--tan-rule);
  transition: color 160ms linear;
}

.pin-beat.is-active .pin-beat__num { color: var(--ink); }

.pin-beat__copy {
  grid-column: 3;
  font-size: var(--fs-beat);
  font-weight: 600;
  line-height: 1.45;
  color: var(--tan-text);
  text-wrap: pretty;
  transition: color 160ms linear;
}

.pin-beat.is-active .pin-beat__copy { color: var(--ink); }

.dots {
  display: flex;
  gap: 7px;
  justify-content: center;
  flex: none;
}

.dot {
  width: 18px;
  height: 3px;
  border-radius: 2px;
  background: var(--tan-rule, #D2BF98);
  transition: background-color 140ms linear, width 140ms linear;
}

.dot.is-active { background: var(--ink); width: 22px; }

.pinned__figure {
  flex: 0 1 auto;
  min-height: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
}

.pinned__perk {
  position: relative;
  flex: none;
  width: calc(var(--perk-beat) / 0.846);
  aspect-ratio: 260 / 260;
  align-self: flex-end;
  margin-bottom: 4px;
}

.pinned__perk .mascot {
  position: absolute;
  inset: auto 0 0 0;
  width: 100%;
  opacity: 0;
  transition: opacity 140ms linear;
}

.pinned__perk .mascot.is-active { opacity: 1; }

.steam {
  position: absolute;
  left: -6%;
  bottom: 62%;
  width: 34%;
  height: auto;
  overflow: visible;
}

.steam__w { opacity: 0; }

/* The pinned phone is sized from the height available, so a whole beat -
   its line, the dots and the screen - always fits one screenful. */
/* Sized from the height available, so a whole beat - its line, the dots and
   the screen - always fits one screenful, on a short phone as well as a tall
   one. The 160px covers the copy, the dots and the padding around them. */
.phone--pinned {
  width: fit-content;
  height: min(calc(100svh - 160px), calc(var(--phone-beat) * 1.825 + 19px));
}

.phone--pinned .phone__screen {
  height: 100%;
  aspect-ratio: 223 / 407;
}

.strip {
  height: 400%;
  display: flex;
  flex-direction: column;
  transition: transform 360ms cubic-bezier(.2, .9, .3, 1);
  will-change: auto;
}

.strip__cell {
  height: 25%;
  overflow: hidden;
  position: relative;
}

.strip__cell img {
  display: block;
  width: 100%;
  height: auto;
}

/* ------------------- The pinned sequence at wider widths ------------------ */
/* Two layouts, both measured off the handoff exports rather than guessed.
   The pinning itself is untouched: the same element is pinned for the same
   scroll distance at every width, and the reduced-motion path still replaces
   the whole thing with the stacked list.

   These rules sit after every other .pinned rule on purpose. The last CSS
   problem on this build was a shorthand later in the file quietly resetting an
   earlier longhand, so anything that has to win is written last. */

@media (min-width: 834px) {
  /* All four beats are readable now, so the cross-fading single line and the
     four dots have nothing left to do. */
  .pinned__copy,
  .dots { display: none; }

  .pinned__inner {
    flex-direction: row;
    align-items: center;
    gap: 34px;
  }

  .pinned__side {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
  }

  .pinned__figure { flex: 0 0 auto; }
}

/* Tablet: the section is cream and the sequence sits in an inset tan panel,
   phone on the left, beats on the right. Measured on page-tablet-834.png -
   the page background reads #F1E5CE at the page edge and the panel reads
   #ECDCB8 from gutter to gutter. */
@media (min-width: 834px) and (max-width: 1279.98px) {
  .sequence {
    background: none;
    border-top: 0;
    border-bottom: 0;
  }

  .pinned__inner {
    background: var(--plinth);
    border: 1.5px solid var(--plinth-edge);
    border-radius: 20px;
    padding: 28px;
    gap: 26px;
  }

  /* Phone left, beats right - the reverse of the desktop arrangement. */
  .pinned__figure {
    order: -1;
    flex: 1 1 auto;
    justify-content: center;
  }

  /* The phone comes down from its full-height size here. At the shared height
     it takes 319px of a 690px panel and squeezes every beat to three lines;
     the export gives the phone roughly 250 and the beats roughly 290, and this
     lands on the same split. Height still drives width through the screen's
     aspect ratio, so this is set as a height.

     Measured at 834, the narrowest width this layout runs at: beat 1 needs a
     250px column to set in two lines, because "twenty seconds" carries the ink
     and cannot be broken. At 242px it took three. This leaves the column at
     266px, so a small type or font change cannot quietly tip it back. */
  .phone--pinned {
    height: min(calc(100svh - 190px), calc(var(--phone-beat) * 1.47 + 19px));
  }
}

/* Desktop: full-bleed tan band, the four beats as a numbered list down the
   left with the heading above them, phone on the right. */
@media (min-width: 1280px) {
  /* Outside the pinned block the heading belongs to the stacked version, which
     is what a reader with reduced motion gets. When the pinned version is
     running it carries its own, so only one is ever in the document. */
  [data-motion="on"] .sequence__kicker,
  [data-motion="on"] .sequence__title { display: none; }

  /* The band's contents use the full gutter-to-gutter measure rather than the
     page's 1000px column - measured on page-desktop-1440.png, where the beat
     rule sits on the 100px gutter and the phone ends at 1340. Every other
     panel keeps the 1000px column; this one is the exception, which is what
     "full-bleed tan band" means here. The band colour itself already comes
     from .sequence, so only the contents widen. */
  .pinned { max-width: none; }

  .pinned__kicker,
  .pinned__title { display: block; }

  .pinned__title {
    margin-top: 8px;
    margin-bottom: 34px;
    max-width: 18ch;
  }

  .pinned__inner { gap: 50px; }

  .pinned__list {
    --pin-indent: 18px;
    --pin-num: 31px;
  }

  .pin-beat { padding: 9px 0; }
}

/* ---------------------------------- Ink ---------------------------------- */
/* Marks up words that are already on the page. It never draws the words. */

.ink {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

.ink__t { position: relative; }

/* Size and position are set by script at true pixel scale - never stretched,
   so the stroke keeps one weight the whole way along. */
.ink__s {
  position: absolute;
  top: 88%;
  overflow: visible;
  pointer-events: none;
}

.ink__s path,
.toolbar__ink path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.toolbar { position: relative; display: block; width: 100%; max-width: 322px; }

.toolbar__ink {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.toolbar__ink path { stroke: var(--terracotta); stroke-width: 2.6; }

/* --------------------------- The hero settle ----------------------------- */
/* Starts visible and settles. Nothing here begins at zero opacity: an element
   at nought is treated as unpainted and drags the page's measured speed out. */

[data-motion="on"] .hero__title,
[data-motion="on"] .phone--hero {
  animation-fill-mode: both;
}

@keyframes settle-up   { from { transform: translateY(10px); } to { transform: none; } }
@keyframes settle-shot { from { transform: translateY(14px); } to { transform: none; } }

[data-motion="on"] .hero__title {
  animation: settle-up 420ms cubic-bezier(.2, .9, .3, 1);
}

[data-motion="on"] .phone--hero {
  animation: settle-shot 480ms cubic-bezier(.2, .9, .3, 1);
}

/* ------------------------------- FAQ chevron ----------------------------- */

[data-motion="on"] .qa__chev { transition: transform 180ms ease; }

/* ------------------------------ Reduced motion --------------------------- */
/* Belt and braces: the head script already withholds data-motion, but if the
   setting is turned on after load, everything stops here too. */

@media (prefers-reduced-motion: reduce) {
  .beats  { display: flex !important; }
  .pinned { display: none !important; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  /* Ink is present, simply already in place rather than drawing itself. */
  .ink__s path,
  .toolbar__ink path { stroke-dashoffset: 0 !important; }
}

/* ============================ The privacy page =========================== */
/* Same voice as the page it hangs off: quiet, no cards, no mascot, nothing
   competing with the words. */

.doc { padding: 8px 0 40px; }

.doc__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--fs-h1);
  line-height: 1.12;
  text-wrap: balance;
}

.doc__lead {
  margin-top: 14px;
  max-width: 60ch;
}

.doc__section {
  margin-top: 30px;
  max-width: 60ch;
}

.doc__h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--fs-breath);
  line-height: 1.2;
}

.doc__section .body { margin-top: 10px; }

/* The one list on the page. The global reset strips list markers, so they are
   put back here only - quiet dots in caramel, hanging outside the measure so
   the text edge stays straight. */
.doc__list {
  margin-top: 10px;
  padding-left: 18px;
  list-style: disc;
}

.doc__list li { margin-top: 8px; }
.doc__list li::marker { color: var(--caramel); }

.doc__back,
.doc__updated {
  margin-top: 36px;
  padding-top: 22px;
  border-top: 1.5px solid var(--card-border);
}

.plain-link { color: inherit; text-decoration: none; }
.plain-link:hover { text-decoration: underline; }

@media (min-width: 834px) {
  .doc { padding: 14px 0 50px; }
  .doc__section { margin-top: 36px; }
}

.doc-head {
  padding: 22px 0 6px;
}

.doc-head .wordmark { text-align: left; }

@media (min-width: 834px) {
  .doc-head { padding: 24px 0 8px; }
}

@media (min-width: 1280px) {
  .doc-head { padding: 28px 0 10px; }
}


}