/* ============================================================
   PREVOW — homepage
   Composition and motion technique after matelibre.com;
   every value from the Prevow kit (docs/design-kit-web.md).

   What was taken from the reference: the shape of the page and
   HOW it moves — stacked short display lines at ~1.0 leading,
   line-mask reveals, the clip-path button wipe, hero parallax,
   staggered entrances.
   What was NOT taken: its palette, its typeface, its 30/70px
   radii. Those are ours — ink/teal/blush/cloud, Plus Jakarta
   Sans, 20/100/12. Motion timing is the kit's (§5), not theirs.
   ============================================================ */

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font);
  font-weight:var(--w-body);
  font-size:var(--t-body);
  line-height:var(--lh-body);
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3,h4,p,figure,blockquote{ margin:0; }
ol,ul{ margin:0; padding:0; list-style:none; }
button{ font:inherit; }

.wrap{ width:100%; max-width:var(--page); margin-inline:auto; padding-inline:var(--gutter); }
.wrap--wide{ max-width:var(--page-wide); }
.wrap--narrow{ max-width:var(--page-narrow); }
.wrap--tight{ max-width:var(--page-tight); }

/* ---- browser surfaces ----------------------------------------
   The parts nobody draws still carry the design. Left at defaults these
   ship someone else's blue. */
::selection{ background:var(--teal); color:var(--on-teal); }
/* transparent track — see the note in route.css; a cloud track draws a pale
   line down the edge of the ink footer */
html{ scrollbar-color:var(--chevron) transparent; }
:root{ accent-color:var(--ink); caret-color:var(--ink); }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

.skip-link{
  position:absolute; left:var(--s-2); top:-999px; z-index:300;
  background:var(--ink); color:var(--white); padding:14px 20px; border-radius:var(--r-pill);
  font-weight:var(--w-bold); font-size:var(--t-row); text-decoration:none;
}
.skip-link:focus{ top:var(--s-2); }

:where(a,button,input,summary,[tabindex]):focus-visible{
  outline:3px solid var(--ink); outline-offset:3px; border-radius:var(--r-chip);
}
.on-photo :focus-visible{ outline-color:var(--white); }

/* ============================================================
   TYPE
   Display sizes come only from the tokens (kit §3). Leading is
   tightened to ~1.0 because these headings are authored as
   SHORT STACKED LINES, not wrapping paragraphs — at 1.15 a
   stack of four lines drifts apart and loses the block.
   ============================================================ */
.display{
  font-family:var(--font-display);
  font-variation-settings:var(--fv-display);
  font-weight:var(--w-editorial);
  letter-spacing:var(--tr-display);
  line-height:var(--lh-editorial);
  font-size:var(--t-display);
  /* Lines are authored, but an authored line that is too long for a phone
     still wraps — and it wraps badly, dropping a single word onto its own
     line. Balancing applies inside each authored line only, so the chosen
     break points survive and only the overflow is evened out. */
  text-wrap:balance;
}
.display--hero{ font-size:var(--t-hero); }
.display--title{ font-size:var(--t-title); }

/* ---- staggered indent ------------------------------------------
   The reference's signature composition: "the benefits of" at x=180,
   "yerba maté?" at x=410. The second line is pushed right by about a
   third of its own width, so the block reads as PLACED rather than
   wrapped. Indents are per-line and authored, never automatic.

   Expressed in `ch` of the display font so the offset tracks the type
   size through the clamp instead of drifting at one end. */
/* The step is deliberately small — 1.1ch, not the reference's ~3ch. Mate Libre
   indents two lines across a full-width frame with nothing behind them. Here
   the type sits on a photograph with the couple right of centre, and a step
   that large walks the last line into their faces. The stagger has to read as
   a lean, not a stride. */
.ind-1{ padding-left:1.1ch; }
.ind-2{ padding-left:2.2ch; }
.ind-3{ padding-left:3.3ch; }

/* the recessive half of a two-part statement. Same size, same weight —
   value alone separates setup from payoff, as the reference does. */
.quiet{ color:var(--chevron); }

/* On the photograph the recessive half cannot be set by alpha alone at any
   value the eye would call "recessive". Derived the same way tokens.css
   derives --photo-scrim, against the same worst-case pixel:

     veil rgba(11,31,58,.62) over the blown highlight (255,254,254)
       -> composited ground ≈ rgb(104,116,133)
     white at .50 over that   -> rgb(179,186,194)  = 2.42:1   FAIL (needs 3)
     white at .72 over that   -> rgb(213,217,221)  = 3.34:1   passes

   .5 was the value that looked right and failed the maths — exactly the trap
   the veil comment in tokens.css was written to stop. At .72 the two halves
   still read as setup and payoff, because at 88px a 28% value step is a large
   perceptual difference; the recession was never doing the work alone anyway,
   the indent and the line break carry it too. */
.on-photo .quiet{ color:rgba(255,255,255,.72); }

/* ---- metadata line ---------------------------------------------
   Replaces the eyebrow. The craft floor bans a decorative kicker above a
   heading outright, and it was on seven sections here. What survives is
   the case where the label carries information the heading does not —
   a count, a state, a position in a sequence — set as functional
   metadata in the SANS, so it reads as apparatus rather than as a
   miniature heading competing with the real one. */
.meta{
  font-family:var(--font);
  font-size:var(--t-label); font-weight:var(--w-bold);
  letter-spacing:var(--tr-label); text-transform:uppercase;
  color:var(--muted);
  display:flex; align-items:center; gap:var(--s-2);
  margin:0 0 var(--s-4);
}
.meta::after{ content:""; flex:1; height:var(--seam); background:var(--seam-ink); }
.meta--onink{ color:rgba(255,255,255,.75); }
.meta--onink::after{ background:rgba(255,255,255,.28); }
/* no trailing rule when the label sits under something it belongs to */
.meta--bare::after{ display:none; }

.lede{ color:var(--muted); font-size:var(--t-body); max-width:44ch; margin-top:var(--s-3); }

/* two-tone heading — the reference's "the benefits of yerba maté?" */
.duo b{ color:var(--ink); font-weight:inherit; }
.duo i{ color:var(--chevron); font-weight:inherit; font-style:normal; }

/* ============================================================
   THE SEAM — the page's structural motif
   Prevow's product is a structure: apart, then together, then one
   line kept. The seam is that structure made visible — a hairline
   division that appears wherever a division carries meaning, and
   closes where the product says the two sides come together.
   ============================================================ */
.seam{ position:relative; }
.seam__rule{
  position:absolute; top:0; bottom:0; left:50%; width:var(--seam);
  background:var(--seam-ink); transform-origin:top center;
  pointer-events:none;
}
.js .seam__rule{ transform:scaleY(0); transition:transform var(--dur-reveal) var(--ease-seam); }
.js .seam.is-in .seam__rule{ transform:scaleY(1); }

/* the seam standing alone between sections, in place of dead padding */
.seam-break{ display:flex; justify-content:center; padding-block:var(--sec-tight); }
.seam-break i{ display:block; width:var(--seam); height:clamp(56px,9vw,112px); background:var(--seam-ink); transform-origin:top center; }
.js .seam-break i{ transform:scaleY(0); transition:transform var(--dur-reveal) var(--ease-seam); }
.js .seam-break.is-in i{ transform:scaleY(1); }

/* ============================================================
   THE KEPT LINE — the page's punctuation
   Every chapter of the product ends in one line the couple agree
   to keep. Used here as the rhythm between sections: a single
   sentence, alone, at display size, under a hairline. It is the
   quiet beat after a visually loud one.
   ============================================================ */
.kept{ padding-block:var(--sec) var(--sec-loose); }
.kept__rule{ height:var(--seam); background:var(--seam-ink); transform-origin:left center; }
.js .kept__rule{ transform:scaleX(0); transition:transform var(--dur-reveal) var(--ease-seam); }
.js .kept.is-in .kept__rule{ transform:scaleX(1); }
.kept p{
  font-family:var(--font-display); font-variation-settings:var(--fv-display);
  font-weight:var(--w-editorial); font-size:var(--t-display);
  line-height:var(--lh-editorial); letter-spacing:var(--tr-display);
  margin-top:var(--s-5); max-width:20ch;
}
.kept__tag{
  font-family:var(--font); font-size:var(--t-label); font-weight:var(--w-bold);
  letter-spacing:var(--tr-label); text-transform:uppercase; color:var(--muted);
  margin-top:var(--s-5); display:block;
}

/* ---- split-text line mask -------------------------------------
   The reference's signature entrance: each line is its own
   overflow-hidden block and the inner span rises into it.
   Lines are authored by hand, so the break points are chosen
   rather than left to the browser. */
/* The mask box has to be TALLER than the line it hides, or it crops the
   glyphs it is supposed to reveal. Fraunces at 0.95-1.04 leading puts
   ascenders and the odd descender outside the line box, and overflow:hidden
   duly cut the tops off "The subjects" and the tails off anything with a
   descender. Padding opens the box; the matching negative margin means the
   layout does not move, so the mask is bigger without the type shifting. */
.split .ln{ display:block; overflow:hidden; padding-block:.18em; margin-block:-.18em; }
.split .ln > span{ display:block; }
/* The mask only engages when scripting is on. Authored the other way
   round, a page whose script never runs holds every headline
   permanently offscreen — the entrance must never be able to
   swallow the content. */
.js .split .ln > span{ transform:translateY(108%); transition:transform var(--dur-reveal) var(--ease); }
.js .split.is-in .ln > span{ transform:translateY(0); }
/* Wider stagger than the 70ms it had. At 70ms across four lines the block
   arrives as one object and the stagger is not perceived at all — it reads as
   a single fade, which is the thing the brief calls generic. At 120ms the
   lines are legibly sequential: the sentence assembles rather than appears. */
.js .split .ln:nth-child(2) > span{ transition-delay:120ms; }
.js .split .ln:nth-child(3) > span{ transition-delay:240ms; }
.js .split .ln:nth-child(4) > span{ transition-delay:360ms; }
.js .split .ln:nth-child(5) > span{ transition-delay:480ms; }

/* ============================================================
   BUTTONS — clip-path wipe on entrance, fill sweep on hover
   ============================================================ */
/* The hover fill is a palette colour, never a hand-mixed darker ink.
   A one-off hex like #12305A passes the eye and fails the kit — it is
   exactly the button-hover bug the palette allowlist exists to catch.
   Teal is the live state, and a control under the cursor is live; the
   label flips to ink because white on teal is 1.66 and fails. */
.btn{
  --bg:var(--ink); --fg:var(--white); --sweep:var(--teal); --fg-hover:var(--ink);
  position:relative; isolation:isolate;
  display:inline-flex; align-items:center; gap:10px;
  min-height:56px; padding:0 30px;
  background:var(--bg); color:var(--fg);
  border:0; border-radius:var(--r-pill);
  font-size:var(--t-row); font-weight:var(--w-bold);
  letter-spacing:var(--tr-row); line-height:1; text-decoration:none;
  cursor:pointer; overflow:hidden;
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--sweep); border-radius:var(--r-pill);
  transform:scaleX(0); transform-origin:left center;
  transition:transform var(--dur-base) var(--ease);
}
.btn:hover::before{ transform:scaleX(1); }
.btn:hover{ color:var(--fg-hover); }
.btn .ph{ font-size:1.05em; transition:transform var(--dur-quick) var(--ease); }
.btn:hover .ph{ transform:translateX(4px); }
.btn:active{ transform:translateY(1px); }

/* over the photo veil an ink button is a button-shaped hole (kit §6a) */
.btn--onink{ --bg:var(--white); --fg:var(--ink); --sweep:var(--cloud); --fg-hover:var(--ink); }
/* a real border, not an inset shadow — rule 3 forbids shadows, and an
   inset ring is a shadow however it is being used */
.btn--onphoto{ --bg:transparent; --fg:var(--white); --sweep:var(--white); --fg-hover:var(--ink); border:1.5px solid var(--white); }

/* ---- quiet secondary action ------------------------------------
   Was a second pill sitting beside the primary at equal visual weight.
   Two pills side by side is the generic-hero tell, and it also breaks
   Prevow's own brand rule §8 — "no second primary action competes with
   Download". A rule that grows from the left on hover keeps the link
   discoverable without letting it compete. */
.quietlink{
  position:relative; text-decoration:none;
  font-size:var(--t-row); font-weight:var(--w-bold); letter-spacing:var(--tr-row);
  color:var(--ink); padding-block:10px;
}
.quietlink::after{
  content:""; position:absolute; left:0; right:100%; bottom:4px; height:1.5px;
  background:currentColor; transition:right var(--dur-base) var(--ease);
}
.quietlink:hover::after{ right:0; }
.quietlink--onphoto{ color:var(--white); }

/* entrance wipe — the reference's -animate-mask */
.js .btn-mask{ clip-path:inset(0 100% 0 0 round var(--r-pill)); transition:clip-path var(--dur-slow) var(--ease); }
.js .is-in .btn-mask,.js .btn-mask.is-in{ clip-path:inset(0 0 0 0 round var(--r-pill)); }

/* circular control */
.round{
  width:56px; height:56px; flex:0 0 auto;
  display:inline-grid; place-items:center;
  background:var(--white); color:var(--ink);
  border:1.5px solid var(--line); border-radius:var(--r-pill);
  cursor:pointer;
  transition:background var(--dur-quick) var(--ease),color var(--dur-quick) var(--ease),border-color var(--dur-quick) var(--ease);
}
.round:hover:not(:disabled){ background:var(--ink); color:var(--white); border-color:var(--ink); }
.round:disabled{ opacity:.3; cursor:default; }
.round .ph{ font-size:19px; }
.round--onphoto{ background:transparent; color:var(--white); border-color:rgba(255,255,255,.5); }
.round--onphoto:hover:not(:disabled){ background:var(--white); color:var(--ink); border-color:var(--white); }

/* Underlined with text-decoration, not a background gradient standing in
   for a rule: rule 3 forbids gradients, and a two-stop gradient is still
   a gradient. The offset keeps the line clear of the descenders, and the
   block padding brings it to a 44px target without moving the rule. */
.textlink{
  display:inline-flex; align-items:center; gap:9px;
  font-weight:var(--w-bold); font-size:var(--t-row); color:var(--ink);
  padding-block:9px;
  text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:5px;
}
.textlink .ph{ transition:transform var(--dur-quick) var(--ease); }
.textlink:hover .ph{ transform:translateX(5px); }

/* Navigation now lives in css/nav.css and is shared by every route.
   The .site-nav / .drawer implementation that used to sit here scrolled
   away with the hero, which is the behaviour this pass removed. */

/* ============================================================
   HERO — carousel of full-bleed photographs, type on the veil
   ============================================================ */
/* EDGE TO EDGE, AT EVERY WIDTH.

   This was a held photograph: a 10px inset on three sides and a 20px
   corner, so the page showed as a thin frame around the picture. The
   phone dropped it first — at that size the inset is not a gesture, it is
   a white margin around the only image on the screen — and the same is
   true of a desktop window. An edge announces that the photograph is an
   element on a page; without one the picture IS the page until you
   scroll, which is what the first screen is for.

   100svh, not 100vh: on a phone the dynamic toolbars make vh taller than
   the visible viewport, which would push the bottom of the frame under
   the browser chrome. */
.hero{ padding:0; }
.hero__frame{
  position:relative; border-radius:0; overflow:hidden;
  min-height:640px; height:100svh;
}
/* ---- the hero media stack ----
   A still that always renders, and a motion layer that only ever exists on a
   wide screen with motion allowed. The still is not a fallback bolted on
   afterwards: it is the base layer, and the video is painted over it. That
   ordering is why a phone, a reduced-motion visitor and a failed video all
   get a composed hero rather than a hole. */
.hero__media{ position:absolute; inset:0; }

/* ---- the three slides ----
   Cross-dissolve, not a slide transition: nothing travels sideways, so the
   composition the headline is sitting on never moves out from under it. The
   outgoing frame is still there underneath during the dissolve, which is why
   there is no flash of veil between photographs.

   The dissolve is --dur-reveal (1.1s) rather than --dur-cinematic (0.76s).
   At three-quarters of a second the change is a cut you notice; at 1.1s
   against a 5.5s hold it reads as the picture breathing. */
.hero__slide{
  position:absolute; inset:0;
  opacity:0; z-index:0; transition:opacity var(--dur-reveal) var(--ease);
}
/* The outgoing photograph is held FULLY OPAQUE underneath while the incoming
   one fades in on top of it. A symmetric cross-fade — both at 50% halfway
   through — shows the veil through two half-transparent images at once, and
   the mid-point reads as a brightness bump with the two scenes ghosting
   through each other. Dissolving over an opaque ground removes both. */
.hero__slide[data-prev]{ opacity:1; z-index:1; transition:none; }
.hero__slide[data-active]{ opacity:1; z-index:2; }

/* A slow crop drift over the life of each slide. The scale sits on the SLIDE,
   never on .hero__still — the parallax writes transform on the still every
   frame and would overwrite it. Two transforms, two elements, no conflict. */
.js .hero__slide[data-active]{ animation:heroDrift 13s linear both; }
@keyframes heroDrift{ from{ transform:scale(1); } to{ transform:scale(1.05); } }

.hero__still,
.hero__video{
  position:absolute; inset:0;
  width:100%; height:112%;   /* oversized so the parallax never exposes an edge */
  object-fit:cover;
  /* The frame is narrower than the photograph, so `cover` crops the SIDES.
     Biasing left keeps the window-and-wall band the headline sits on; at 62%
     the crop ate that band and "The marriage" ran into the seated figure.
     38% holds the empty left third and still keeps the doorway and both mugs
     inside the frame. This is the crop doing art direction — `cover` on its
     own would have centred it and lost the composition. */
  object-position:38% 50%;
  will-change:transform;
}
.hero__video{ opacity:0; transition:opacity var(--dur-cinematic) var(--ease); }
/* only revealed once the file is actually playing, so there is no flash of a
   black video element while it buffers */
.hero__video[data-playing]{ opacity:1; }
@media (max-width:900px){
  /* Horizontal only, and deliberately so. A 390x830 hero frame is TALLER
     than the 9:16 source, so `cover` crops the sides and the vertical
     position has almost no effect — tuning Y here does nothing, which is
     worth stating so the next person does not try it. The vertical
     composition is therefore decided in the photograph itself, not in CSS:
     that is why a dedicated portrait frame was generated rather than the
     desktop one being squeezed. Centre holds both figures and the doorway. */
  .hero__still{ object-position:50% 50%; }

  /* Each slide has its own centre of gravity. A 4:3 photograph in a
     390x812 frame keeps about a third of its width, and centring all three
     cut the second figure out of "apart", where the two stand at roughly
     45% and 72% of the frame. These three numbers were read off the actual
     crops, not guessed: at 57% her face is already clipped, at 75% the teal
     staircase she is standing against is gone. */
  .hero__slide:nth-of-type(1) .hero__still{ object-position:65% 50%; }
  .hero__slide:nth-of-type(2) .hero__still{ object-position:45% 50%; }
  .hero__slide:nth-of-type(3) .hero__still{ object-position:42% 50%; }
  .hero__video{ display:none; }
}
.hero__veil{ position:absolute; inset:0; background:var(--photo-scrim); }

/* ---- advance the photographs by hand ----
   A glyph and nothing else. The round buttons elsewhere on the site carry a
   fill because they sit on white, where a bare mark would read as a stray
   character; this one sits on the scrim over a photograph, which already
   supplies the contrast a background would have provided. Adding a disc here
   puts a second object on the picture and the picture is the composition.

   The paint is 34px and the target is 56px. A control this size has to be
   comfortably hittable without the glyph growing to match, so the box is
   invisible and only the caret is drawn — the same trick the dot strip used
   before it was removed, and the reason the button is `display:grid` with the
   icon centred rather than sized by the icon.

   Vertically centred against the frame rather than the copy: the headline sits
   high-left and the lede low-left, and the empty middle of the right-hand side
   is the one part of every hero photograph that carries no type. */
.hero__next{
  position:absolute; z-index:4;
  top:50%; right:clamp(var(--s-2), 2vw, var(--s-5));
  transform:translateY(-50%);
  width:56px; height:56px;
  display:grid; place-items:center;
  padding:0; border:0; background:none;
  color:var(--white); cursor:pointer;
}
.hero__next i{
  font-size:34px; line-height:1;
  transition:transform var(--dur-quick) var(--ease), opacity var(--dur-quick) var(--ease);
  opacity:.86;
}
.hero__next:hover i{ transform:translateX(4px); opacity:1; }
.hero__next:active i{ transform:translateX(2px); }
.hero__next:focus-visible{ outline:2px solid var(--white); outline-offset:2px; }
/* One photograph is not a carousel. JS hides it in that case. */
.hero__next[hidden]{ display:none; }
@media (prefers-reduced-motion:reduce){
  .hero__next i{ transition:none; }
  .hero__next:hover i,
  .hero__next:active i{ transform:none; }
}

/* The hero is a two-part composition, not a stack. The headline sits high and
   left, indented down its four lines; the apparatus — lede, action, slideshow
   controls — sits low and RIGHT, against the seam. The empty diagonal between
   them is where the photograph shows through, and it is the whole composition:
   the picture is not a backdrop behind a centred block, it is the third
   element. */
.hero__inner{
  position:absolute; inset:0; z-index:3;
  display:flex; flex-direction:column;
  padding-top:clamp(var(--nav-h),17vh,200px);
  padding-bottom:clamp(var(--s-5),5vw,var(--s-8));
}
.hero__bar{ flex:1; display:flex; flex-direction:column; justify-content:space-between; gap:var(--s-6); }
.hero__copy{ min-width:0; will-change:transform,opacity; }
/* Held to the quiet left zone of the photograph. The couple occupy the right
   two-thirds of every one of the three hero frames; type crossing into them
   is the difference between a composition and an overlay. */
.hero__title{ color:var(--white); max-width:11ch; }

/* The apparatus sits low-left, under the headline and inside the same zone,
   separated from it by the full height of the frame. That gap IS the
   composition — the right two-thirds stay photograph. */
.hero__foot{
  align-self:flex-start;
  width:min(100%,40ch);
  will-change:transform,opacity;
  display:flex; flex-direction:column; align-items:flex-start;
}
.hero__lede{ color:var(--white); opacity:.92; max-width:38ch; margin:0; font-size:var(--t-row); line-height:1.65; }
.hero__actions{ display:flex; align-items:center; gap:var(--s-4); margin-top:var(--s-4); flex-wrap:wrap; }

/* The seam, drawn on the photograph. It is placed at the turn of the
   sentence, not at the centre of the frame — 46% is where "is planned."
   ends and "The marriage" begins at the widths this hero is composed for. */

/* ---- the strip's own box ----
   The clip stays now that the two arrows are gone, because it was never only
   about them: the track is 3192px of cards translated sideways, and without a
   box to cut it against that width becomes horizontal overflow on the page.

   `clip` rather than `hidden`: it does not make a scroll container and it
   leaves the vertical axis alone, so focus rings on the cards are not sheared
   off. Both axes are clipped because a rounded corner cannot be produced by
   clipping one, and the corner is what makes the strip read as a window onto a
   longer row rather than a row that has been cut off. */
.rail{ position:relative; overflow:clip; border-radius:var(--r-block); }
@media (max-width:760px){
  /* The strip has no controls at any width now, so with no buttons to line
     the clip up against,
     running off the edge of the screen the way a touch scroller should. The
     clip existed so nothing showed past the controls; there are none. The
     track is its own scroller, so it still clips its own content. */
  .rail{ overflow:visible; border-radius:0; }
}

/* ============================================================
   SECTIONS
   ============================================================ */
.section{ padding-block:var(--sec); }
.section--loose{ padding-block:var(--sec-loose); }
.section--tight{ padding-block:var(--sec-tight); }
.section--cloud{ background:var(--cloud); }
.head--between{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s-4); }
.head__text{ max-width:34ch; }

/* ============================================================
   CHAPTER RAIL
   ============================================================ */
.rail__track{
  display:flex; gap:var(--s-2);
  overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-padding-left:var(--gutter);
  padding:2px var(--gutter) var(--s-2);
  margin-inline:calc(-1 * var(--gutter));
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.rail__track::-webkit-scrollbar{ display:none; }

/* ============================================================
   THE CHAPTER RAIL
   The ten conversations are a FIXED SEQUENCE, so they are a row you
   travel along in one direction rather than a grid the eye can skip
   around. That part has not changed.

   THE PIN IS GONE; THE STRIP SCROLLS SIDEWAYS.

   Desktop used to spend vertical scroll travelling laterally: the section
   stood 2892px tall and the track was translated as you scrolled past it.
   That is a strong device and it cost a lot — three screens of page to pass
   ten cards, and no way to move the strip directly once the arrows came off.
   The row is a horizontal scroller at every width now, which is what it
   already was on a phone and what the markup was to begin with.

   Which leaves an affordance question a finger did not have: with no arrows
   and a hidden scrollbar, a mouse has nothing to grab. So the scrollbar is
   shown to a fine pointer — thin, and in --chevron, the colour the kit
   reserves for exactly this. Touch keeps it hidden, because the finger is
   the affordance and a bar under the cards would only be decoration. */
@media (hover:hover) and (pointer:fine){
  .rail__track{
    scrollbar-width:thin; scrollbar-color:var(--chevron) transparent;
    padding-bottom:var(--s-3);
    /* the strip can be taken hold of and pulled — see home.js */
    cursor:grab;
  }
  .rail__track.is-dragging{
    cursor:grabbing;
    /* a pan that selects the captions as it goes reads as a broken drag */
    user-select:none; -webkit-user-select:none;
  }
  .rail__track::-webkit-scrollbar{ display:block; height:8px; }
  .rail__track::-webkit-scrollbar-track{ background:transparent; }
  .rail__track::-webkit-scrollbar-thumb{
    background:var(--chevron); border-radius:var(--r-pill);
  }
}
/* Was ten pastel rounded rectangles. That is the card habit doing the work
   composition should do: identical container, identical radius, identical fill
   rotation, ten times — the single most repetitive block on the page.

   These are PLATES, not cards. No fill, no radius, no border box. Each chapter
   is a column of the same editorial apparatus the rest of the page uses: a
   number set as metadata, the seam, the subject at display size, one line of
   description. The rail still scrolls horizontally, which is the reference's
   device and already keyboard- and touch-accessible here.

   Reading a list of ten as ten separated objects is also just wrong for this
   content — the ten are a SEQUENCE, in a fixed order, and a continuous ruled
   rail says that where ten detached tiles said the opposite. */
/* ONLY THE PICTURE AND THE NAME ARE THE LINK.
   The whole plate used to be one target, which is tidy until the row is
   something you grab and pull: then most of what your hand lands on is a
   link, and a drag that ends a few pixels from where it started opens a
   chapter you were only scrolling past. The drag threshold catches the
   obvious cases, but the honest fix is to stop asking it to — the number,
   the rule, the description and the padding are not links any more, so
   there is somewhere safe to take hold of every card.

   Equal padding both sides. It was 0 on the left, and .ch + .ch then added
   s-4, so the FIRST card's content box was 32px wider than every other —
   which with a fixed aspect-ratio figure made image one visibly taller. */
.ch{
  scroll-snap-align:start; flex:0 0 min(74vw,300px);
  display:flex; flex-direction:column;
  padding:var(--s-3) var(--s-4) var(--s-5) var(--s-4);
  position:relative;
}
.ch__shot{ display:block; }
.ch__go{
  color:inherit; text-decoration:none;
  border-radius:var(--r-chip);
}
.ch__shot:hover ~ .ch__name .ch__go,
.ch__go:hover{
  text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:5px;
}
.ch__go:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
/* the seam between chapters — one continuous rule, broken by the gaps */
/* The rule was a border on a flex item, so it stretched to the tallest
   column and kept going long after the copy stopped — a hairline hanging in
   empty space. It is a pseudo-element now, sized to the content it divides
   rather than to the row. */
/* horizontal padding is set once on .ch and is identical for all of them */
.ch + .ch::before{
  content:""; position:absolute; left:0; top:0;
  width:var(--seam); background:var(--seam-ink);
  height:calc(100% - var(--s-5));
}
.ch{ align-self:start; }
.ch__n{
  font-family:var(--font); font-size:var(--t-label); font-weight:var(--w-bold);
  letter-spacing:var(--tr-label); color:var(--chevron);
}
.ch__rule{ display:block; height:var(--seam); background:var(--seam-ink); margin:var(--s-3) 0 var(--s-4); transform-origin:left center; }
.js .rail.is-in .ch__rule{ animation:ruleIn var(--dur-reveal) var(--ease-seam) both; }
/* the rule draws left-to-right, each one a beat after the last, so the rail
   reads as a sequence being laid down rather than ten things appearing */
.js .rail.is-in .ch:nth-child(1) .ch__rule{ animation-delay:0ms; }
.js .rail.is-in .ch:nth-child(2) .ch__rule{ animation-delay:60ms; }
.js .rail.is-in .ch:nth-child(3) .ch__rule{ animation-delay:120ms; }
.js .rail.is-in .ch:nth-child(4) .ch__rule{ animation-delay:180ms; }
.js .rail.is-in .ch:nth-child(5) .ch__rule{ animation-delay:240ms; }
@keyframes ruleIn{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

/* Deliberately a step BELOW the section headline. At --t-title both landed on
   44px and "Money" read as loud as "The subjects most couples skip." — the
   list was shouting over the sentence that introduces it. */
.ch__name{
  font-family:var(--font-display); font-variation-settings:var(--fv-display);
  font-weight:var(--w-editorial-mid);
  font-size:clamp(1.75rem,1.5rem + 0.9vw,2.375rem);  /* 28 → 38 */
  letter-spacing:var(--tr-display); line-height:1.0;
  transition:color var(--dur-quick) var(--ease);
}
.ch__sub{ color:var(--muted); font-size:var(--t-small); line-height:1.55; margin-top:var(--s-2); max-width:24ch; }
/* teal means NOW — as a mark, not as a filled pill. The chapter that is
   free right now is the only live thing in the list, so it gets the one
   piece of colour and nothing else does. */
.ch__now{
  margin-top:var(--s-3); align-self:flex-start;
  font-family:var(--font); font-size:var(--t-label); font-weight:var(--w-bold);
  letter-spacing:var(--tr-label); text-transform:uppercase; color:var(--on-teal);
  display:inline-flex; align-items:center; gap:8px;
}
.ch__now::before{ content:""; width:7px; height:7px; border-radius:var(--r-pill); background:var(--teal); }

/* ============================================================
   MARQUEE
   ============================================================ */
/* Was Plus Jakarta 800 — after the rest of the page moved to the serif this
   band was the one place the old geometric display voice survived, and it read
   as a strip from a different website spliced into the page.

   The reference alternates its marquee between black and grey. Here the
   alternation carries the product's own structure: the phrases that describe
   being APART are recessive, the ones that describe being TOGETHER are full
   ink. The band says the thing the page says. */
.marquee{ border-block:var(--seam) solid var(--seam-ink); padding-block:var(--s-5); overflow:hidden; }
/* No CSS animation: the band is driven by scroll velocity in home.js.
   The keyframe version could only ever run at one constant speed. Without
   JS the track simply sits still, which is a legible fallback. */
.marquee__track{ display:flex; width:max-content; will-change:transform; }  /* justified: driven every frame while on screen */
.marquee__track span{
  font-family:var(--font-display); font-variation-settings:var(--fv-display);
  font-size:clamp(1.75rem,4.5vw,3rem); font-weight:var(--w-editorial);
  letter-spacing:var(--tr-display);
  line-height:1.15; white-space:nowrap; padding-inline:22px;
}
.marquee__track span:nth-child(odd){ color:var(--chevron); }
.marquee__track span::after{ content:"·"; color:var(--teal); margin-left:44px; }

/* ============================================================
   BENEFITS
   ============================================================ */
/* Was a 2×2 of chip-icon + heading + two-line description — the exact
   repeated grid the brief bans, and four Phosphor icons doing no work: a
   book, a crossed-out eye, a path and a notebook are illustrations of the
   WORDS, not of the ideas, and the words are right there.

   Now a definition list, which is what this content actually is: four terms
   and their definitions. Set as an indented editorial glossary with the term
   hanging in the left column against the seam. No icons, no boxes, and the
   asymmetric two-column measure means it cannot read as a card grid. */
.notes{ margin:var(--s-12) 0 0; max-width:78ch; }
.note{
  display:grid; grid-template-columns:15ch 1fr; gap:var(--s-6);
  padding-block:var(--s-5);
  border-top:var(--seam) solid var(--seam-ink);
}
.note:last-child{ border-bottom:var(--seam) solid var(--seam-ink); }
.note dt{
  font-family:var(--font-display); font-variation-settings:var(--fv-quiet);
  font-weight:var(--w-editorial-mid); font-size:var(--t-section);
  line-height:1.2; letter-spacing:var(--tr-display);
}
.note dd{ margin:0; color:var(--muted); font-size:var(--t-small); line-height:1.7; max-width:52ch; }

/* ============================================================
   STATEMENT — the page's one hard colour change
   Was a --cloud band at the same width and padding as everything
   around it, holding an eyebrow, a heading and a pill. Cloud against
   white is barely a change of surface, so the section registered as
   more of the same.

   Ink, full bleed, at --sec-air. The palette already assigns ink the
   job this sentence is doing — "permanent, private and decisive" —
   so the strongest rhythm break on the page is also the one the
   brand rules were pointing at.
   ============================================================ */
.statement{
  background:var(--ink); color:var(--white);
  padding-block:var(--sec-air);
}
.statement__line{ max-width:22ch; }
.statement .quiet{ color:var(--on-navy); }
.statement__act{ margin-top:var(--s-8); }

/* ============================================================
   HOW — split
   ============================================================ */
.split-layout{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(var(--s-4),5vw,var(--s-12)); align-items:center; }
.split-layout__media{ border-radius:var(--r-block); overflow:hidden; aspect-ratio:5/6; }
/* 110%, so the parallax travel never exposes an edge — same reason the hero
   slides are drawn oversized */
.split-layout__media img{ width:100%; height:110%; object-fit:cover; }
/* ============================================================
   THE JOURNEY — apart, then together, then written down
   Was three ruled rows with a two-stroke gauge beside each, plus a
   photograph parked in a grid cell. The gauge was too small to read
   as anything and the three rows arrived together, so a SEQUENCE was
   presented as a list.

   Now the section is a sticky stage: two pages of writing that start
   apart with only your own side legible, close together when both are
   finished, and resolve into the single line that is kept. The steps
   scroll past it and drive it. Same stroke language as the privacy
   explainer{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(var(--s-6),6vw,var(--s-12));
  align-items:start; margin-top:var(--s-8);
}
/* Paper, not a card. Three changes take it out of UI territory: the radius
   drops to 2px (a cut sheet has a corner, not a rounded one), the boundary
   becomes a hairline on three sides with a heavier foot so the sheet reads
   as resting on something, and the two pages sit at slightly different
   heights. Perfectly aligned twins read as a component; a small offset reads
   as two things put down by hand. */

/* the kept line — hidden until stage 3, then drawn across the full width */
/* centred over where the two pages were, not pinned to their bottom edge —
   at the foot it cut across both borders and read as a progress bar */

/* --- STAGE 0 · on your own -------------------------------------
   Apart, and only your own side is legible. Their page carries the
   SEALED treatment from the privacy explainer — present{ display:flex; flex-direction:column; }
/* The inactive steps recede by COLOUR, never by opacity.
   These were at opacity:.34, which drops --muted body text to about 1.7:1
   against white. A step you have not reached yet is still meant to be read —
   readers look ahead — so fading it below the 4.5:1 floor hides content
   rather than de-emphasising it. Heading colour and the number carry the
   current position instead{ color:var(--muted); transition:color var(--dur-slow) var(--ease); }

/* Ink against muted is a real difference but a quiet one at 18px, and the
   sequence has to be legible at a glance. The active step also gets an accent
   rule in the number gutter — the same device the privacy explainer uses for
   its current mode, so the two interactive sections share one grammar.

   The colour names what the stage beside it is showing: teal while the two
   sides are still sealed from each other, ink once both are open{ position:relative; }

/* ============================================================
   QUOTE
   ============================================================ */
/* THE PAUSE — the testimonial, photo-led.
   This is the beat after the journey resolves, so it is the one place on the
   page that should slow down rather than explain. The photograph moved here
   from the how-it-works grid, where it sat in a cell doing nothing; against
   the quote it does the emotional work the copy cannot.

   Offset, not centred: the picture runs past the text block's top and the
   words hang low beside it, so the pair reads as a spread rather than a
   captioned image. */
.quote{
  display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1fr);
  gap:clamp(var(--s-5),5vw,var(--s-10,var(--s-8)));
  align-items:end;
}
.quote__media{
  border-radius:var(--r-chip); overflow:hidden; aspect-ratio:4/5;
  transform:translateY(calc(-1 * var(--s-6)));
}
.quote__media img{ width:100%; height:112%; object-fit:cover; }
.quote__body{ padding-bottom:var(--s-4); }
.quote blockquote{
  margin:0;
  font-family:var(--font-display); font-variation-settings:var(--fv-display);
  font-size:var(--t-title); font-weight:var(--w-editorial);
  letter-spacing:var(--tr-display); line-height:1.25; max-width:26ch;
}
.quote figcaption{ margin-top:var(--s-5); color:var(--muted); font-size:var(--t-small); }
.quote figcaption b{ color:var(--ink); font-weight:var(--w-bold); }

/* ============================================================
   PRIVACY EXPLAINER
   Was three filled blocks with a depth gauge under them. The gauge
   was legible only if you already knew what it meant, the colour
   bands floated away from the words they belonged to, and the whole
   section carried one idea across a very large empty area.

   The replacement shows the thing itself: THE PARTNER'S VIEW of the
   same page of writing, in each of the three states. The copy's own
   distinction — "not the words, and not that anything was written at
   all" — is exactly the difference between redacted strokes that are
   present and strokes that are absent, so the visual carries the
   argument and the words only name it.

   Colour keeps the kit's assignments: blush for what is shared,
   teal for the live held state{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(var(--s-6),6vw,var(--s-12));
  align-items:start; margin-top:var(--s-8);
}

/* ---- the three modes{ display:flex; flex-direction:column; }
/* the active marker is a filled rule in that mode's own colour{
  content:""; position:absolute; left:0; top:-1px; bottom:-1px; width:3px;
  background:currentColor; transform:scaleY(0); transform-origin:center;
  transition:transform var(--dur-base) var(--ease-seam);
}
[data-mode="share"]::before{  background:var(--blush); }
[data-mode="sealed"]::before{ background:var(--teal); }
[data-mode="private"]::before{ background:var(--chevron); }

/* the page of writing. Strokes, not lorem — they stand for handwriting
   without pretending to be words{
  position:relative; border-radius:2px;
  background:var(--white); border:var(--seam) solid var(--seam-ink);
  border-bottom-width:2px;
  padding:var(--s-5) var(--s-4);
  display:flex; flex-direction:column; gap:var(--s-3);
  min-height:280px;
  transition:background var(--dur-slow) var(--ease);
}
/* faint ruled guides — the empty page{ background:var(--white); } so you can see that SOMETHING is written,
   but they become solid teal blocks: present{ background:var(--teal-pale); }

/* PRIVATE — the strokes are gone entirely. Not blurred, not greyed:
   absent{ background:var(--cloud); }

/* ============================================================
   FAQ
   ============================================================ */
/* Was four white pill-shaped boxes floating inside a cloud band — the
   template FAQ. A question is a line of text, not an object; the rule between
   two questions is all the separation the list needs. */
.faq{ max-width:var(--page-narrow); margin-top:var(--s-8); display:flex; flex-direction:column; }
.faq details{ background:transparent; border:0; border-top:var(--seam) solid var(--seam-ink); }
.faq details:last-of-type{ border-bottom:var(--seam) solid var(--seam-ink); }
.faq summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:var(--s-3);
  padding:var(--s-4) 0;
  font-family:var(--font-display); font-variation-settings:var(--fv-quiet);
  font-size:var(--t-section); font-weight:var(--w-editorial-mid); letter-spacing:var(--tr-display);
  transition:color var(--dur-quick) var(--ease);
}
.faq summary:hover{ color:var(--muted); }
.faq summary::-webkit-details-marker{ display:none; }
/* the disc is gone with the pill — the mark is now just the two strokes,
   and only the vertical one retracts, so open/closed reads as a rule
   rather than as a rotating badge */
.sign{ position:relative; flex:0 0 auto; width:22px; height:22px; }
.sign::before,.sign::after{
  content:""; position:absolute; top:50%; left:50%; width:15px; height:var(--seam);
  background:var(--ink); transform:translate(-50%,-50%);
  transition:transform var(--dur-base) var(--ease);
}
.sign::after{ transform:translate(-50%,-50%) rotate(90deg); }
.faq details[open] .sign::after{ transform:translate(-50%,-50%) rotate(0deg); }
.faq__body{ padding:0 0 var(--s-4); color:var(--muted); font-size:var(--t-small); line-height:1.7; max-width:64ch; }

/* ============================================================
   SIGNUP
   ============================================================ */
/* ============================================================
   THE CLOSING
   Was a --cloud rounded block holding a heading, a note and a form:
   the conventional CTA card, dropped at the foot of the page.

   There is no container now. The page simply arrives at its last
   sentence, at --sec-air, and the field is a rule under a line of type
   at reading size — the same hairline the rest of the page is ruled
   with, doing one last job. An ending, not a component.

   Conversion clarity is unchanged and slightly improved: one field,
   one visible label (not a placeholder standing in for one), one
   button carrying a verb.
   ============================================================ */
.closing{ padding-block:var(--sec-air) var(--sec-loose); }
.closing__meta{
  font-family:var(--font); font-size:var(--t-label); font-weight:var(--w-bold);
  letter-spacing:var(--tr-label); text-transform:uppercase; color:var(--muted);
  margin:0 0 var(--s-4);
}
.closing__line{ max-width:18ch; }

/* The email capture is gone. It asked for an address in order to send back
   a link the button can simply be — a step that cost the reader something
   and bought them nothing. Its input, its field, its submit control and the
   mailto handler behind it went with it. */
.closing__get{ margin-top:var(--s-12); }

/* ============================================================
   FOOTER — the reference's oversized lowercase links
   ============================================================ */
.site-footer{ padding-block:var(--sec) var(--s-5); }
.footer__grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:var(--s-6); align-items:start; }
.footer__big{ display:flex; flex-direction:column; gap:2px; }
.footer__big a{
  text-decoration:none;
  font-family:var(--font-display); font-variation-settings:var(--fv-display);
  font-size:clamp(2.25rem,6vw,3.5rem); font-weight:var(--w-editorial);
  letter-spacing:var(--tr-display); line-height:1.12; width:max-content; max-width:100%;
  transition:color var(--dur-quick) var(--ease);
}
/* the hover moves the word, as the reference's oversized footer links do —
   a colour change alone on type this large reads as a dead state */
.footer__big a{ display:inline-block; transition:color var(--dur-quick) var(--ease),transform var(--dur-base) var(--ease); }
.footer__big a:hover{ color:var(--muted); transform:translateX(10px); }
/* a styled label, not an <h4>: the last heading before it is an h2, and
   jumping two levels for a column caption breaks the outline */
.footcol__k{ font-size:var(--t-label); font-weight:var(--w-bold); letter-spacing:var(--tr-label); text-transform:uppercase; color:var(--muted); margin-bottom:var(--s-2); }
.footcol{ display:flex; flex-direction:column; gap:12px; }
.footcol a{ text-decoration:none; font-size:var(--t-body); font-weight:var(--w-bold); width:max-content; }
.footcol a:hover{ color:var(--muted); }
.footer__base{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); margin-top:var(--s-8); padding-top:var(--s-4); border-top:1px solid var(--line); }
.footer__base p{ color:var(--muted); font-size:var(--t-meta); }
.footer__base nav{ display:flex; gap:var(--s-3); }
.footer__base a{ color:var(--muted); text-decoration:none; font-size:var(--t-meta); }
.footer__base a:hover{ color:var(--ink); }

/* ============================================================
   AUTHORED ENTRANCES
   The generic .rv system is gone. It applied one gesture — fade plus
   a short rise — to every block on the page regardless of what the
   block was, which is the pattern that reads as generated.

   Two techniques remain, each chosen for what it is describing, and
   neither is available as a general-purpose utility.
   ============================================================ */

/* UNCOVER — a frame lifting off a photograph.
   Used on the testimonial image. The picture does not move or fade; the
   MASK over it retracts, which reads as something being revealed rather
   than something arriving. Clip-path only: no paint, no layout. */
.js .uncover{ clip-path:inset(0 0 100% 0); }
.js .uncover.is-in{
  clip-path:inset(0 0 0 0);
  transition:clip-path var(--dur-reveal) var(--ease);
}

/* DRAWLINE — the rule draws, the words are simply there.
   Used on the glossary rows. Body copy that fades in delays reading for
   no narrative reason, so the text is never animated; only the hairline
   that separates one entry from the next is. Each row is a beat later
   than the one above, so the list assembles downward like ruling a page. */
.js .drawline{ position:relative; }
.js .drawline::after{
  content:""; position:absolute; left:0; right:0; top:-1px; height:var(--seam);
  background:var(--seam-ink); transform:scaleX(0); transform-origin:left center;
  transition:transform var(--dur-cinematic) var(--ease-seam);
}
.js .drawline.is-in::after{ transform:scaleX(1); }
.js .drawline:nth-of-type(2)::after{ transition-delay:90ms; }
.js .drawline:nth-of-type(3)::after{ transition-delay:180ms; }
.js .drawline:nth-of-type(4)::after{ transition-delay:270ms; }
/* the static border is the no-JS fallback; with JS the drawn rule replaces it */
.js .note{ border-top-color:transparent; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1000px){
  .split-layout{ grid-template-columns:1fr; }
  .split-layout__media{ order:-1; aspect-ratio:16/11; }
  .signup{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr 1fr; }
  .footer__big{ grid-column:1 / -1; margin-bottom:var(--s-4); }
}
@media (max-width:880px){
  .nav-links{ display:none; }
  .burger{ display:inline-flex; }
}
@media (max-width:900px){
  /* MOBILE JOURNEY — the stage stays, pinned to the top.
     Collapsing this to a stacked list would throw away the one thing the
     section is for: watching the two pages close. So the visual sticks under
     the header and the three steps scroll beneath it{ grid-template-columns:1fr; gap:var(--s-4); }
  /* ONE PINNED PANEL, NOT A TALL COLUMN.

     Buying dwell with padding was the wrong currency. It bought it in blank
     screens, and a blank screen does not read as pacing — it reads as
     something that failed to load. The scroll distance still has to exist;
     it just must not be visible as emptiness.

     So the journey borrows the mechanic /yours already uses for its three
     privacy states: a tall scroll track with a panel stuck to the top of the
     viewport for the whole of it. The reader always sees a full, composed
     screen — the two pages above, one step below — and scrolling changes what
     is IN it rather than moving past it. Nothing blank goes by, and 03 cannot
     be skipped because it owns a third of the track.

     The panel bottoms out exactly when the track ends{ min-height:280svh; }
  /* Blank at the BOTTOM edge of a screen is what reads as "the page ended"
     or "this failed to load". Blank between two blocks of content reads as
     layout. So nothing is left over here: the two pages stretch to fill the
     panel above the words{ position:static; order:-1; padding-bottom:0; align-self:stretch; min-height:0; }

  /* The three steps occupy the SAME box and cross-fade. Stacked like this
     they have no distinct positions, which is why the driver switches to
     section progress at this width — see home.js.

     align-self is explicit because the base grid sets align-items:start{ position:relative; align-self:end; min-height:10.5rem; }

  /* Without JS nothing sets is-active{ min-height:0; }

  /* the pause: photograph full width, words beneath — still offset, not
     centred, so it keeps the spread feeling rather than becoming a card */
  .quote{ grid-template-columns:1fr; gap:var(--s-4); align-items:start; }
  .quote__media{ transform:none; aspect-ratio:16/11; }
  .quote__body{ padding-bottom:0; padding-left:var(--s-3); }

  /* MOBILE PRIVACY EXPLAINER — reordered, not collapsed.
     Desktop reads list-then-viewer left to right. On a phone the viewer has
     to come FIRST and stay put, because the whole point is watching it change
     as the modes go by;
}

@media (max-width:780px){
  /* MOBILE GLOSSARY — a run-in, not a stack.
     A 15ch hanging column cannot survive a 342px measure, but stacking term
     over definition throws the glossary idea away and leaves an ordinary
     list. So it becomes the other printed form of the same thing: the term
     runs INTO its definition on one line, separated by an em dash, display
     serif against sans. Still a glossary, still ruled, and it reads as set
     rather than as collapsed. */
  .note{ display:block; padding-block:var(--s-4); }
  .note dt{
    display:inline; font-size:var(--t-row);
    /* the baseline of an 17px serif and a 13.5px sans do not agree on their
       own; the shift settles the run-in onto one optical line */
    vertical-align:baseline;
  }
  .note dt::after{
    content:" 4 "; color:var(--chevron);
    font-family:var(--font); font-weight:var(--w-body);
  }
  .note dd{ display:inline; max-width:none; }
  .head--between{ flex-direction:column; align-items:flex-start; gap:var(--s-4); }
  .marquee__track span::after{ margin-left:30px; }
  .hero__frame{ min-height:560px; height:100svh; }
  .hero__lede{ font-size:var(--t-row); }
  .quote blockquote{ font-size:var(--t-card); }
}
@media (max-width:560px){
  /* 44px targets on a phone, where these are touched not clicked.
     Inline links inside a sentence keep their natural size — the
     size rule exempts them, and padding there would break the line. */
  .footer__big a{ padding-block:4px; }
  .footcol a{ padding-block:8px; }
  .footer__base a{ padding-block:12px; }
  .footer__base nav{ gap:var(--s-2); flex-wrap:wrap; }
  /* MOBILE HERO — a different composition, not the desktop stacked.
     Desktop puts type in the left band and leaves the couple in the right
     two-thirds. A phone has no right two-thirds, so the concept is rotated:
     the type sits at the TOP of the frame and the photograph gets the whole
     lower half to itself, uncovered. The apparatus sits under the photograph's
     subject, at the very bottom. Same idea — words and couple occupy separate
     territory, divided — expressed in the axis the device actually has. */
  .hero__title{ max-width:none; }
  .hero__bar{ gap:var(--s-4); }
  .hero__inner{ padding-top:clamp(96px,15vh,132px); padding-bottom:var(--s-4); }
  .hero__foot{ width:100%; }
  /* a full-width pill is the phone-SaaS tell. Left-aligned at its natural
     width keeps the hero composed rather than collapsed.
     Stacked deliberately and tight: side by side the pair is 359px against a
     342px column, so it wrapped into an orphan with a 50px hole above it. */
  .hero__actions{ flex-direction:column; align-items:flex-start; gap:var(--s-2); margin-top:var(--s-3); }
  .hero__actions .btn{ width:auto; }
  .footer__grid{ grid-template-columns:1fr; }
  .footer__base{ flex-direction:column; align-items:flex-start; }
  .ch{ flex-basis:78vw; }
  .faq summary{ padding:18px 20px; font-size:var(--t-row); }
  .faq__body{ padding:0 20px 20px; }
  .signup__form{ padding-left:20px; }
}

/* ============================================================
   REDUCED MOTION — everything visible, nothing travels
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  /* the two authored entrances resolve to their finished state */
  .uncover,.uncover.is-in{ clip-path:none; }
  .drawline::after{ transform:scaleX(1); }
  .js .note{ border-top-color:var(--seam-ink); }
  .split .ln > span{ transform:none; }
  .btn-mask{ clip-path:none; }
  .marquee__track{ transform:none !important; }
  /* no dissolve and no drift: the rotation is stopped in js/home.js, so the
     opening photograph simply stands. `animation:none` is explicit because
     the blanket rule above only shortens the drift — it would still land on
     its finished scale(1.05) rather than never running. */
  .hero__slide{ transition:none; }
  .js .hero__slide[data-active]{ animation:none; transform:none; }
}


/* ============================================================
   WHAT YOUR PARTNER SEES — rebuilt on real words
   It was four solid ink bars of different widths standing in for a
   sentence. Abstracted that far it stops reading as writing and starts
   reading as a chart, which is why it looked like it was measuring
   something. Nothing was being measured.

   It shows the actual answer now, and the three states do to it exactly
   what the product does: read it, cover it, or show nothing at all. Same
   idea as the demonstration on /yours{
  font-size:var(--t-meta); color:var(--muted); margin-bottom:var(--s-3);
  transition:opacity var(--dur-base) var(--ease);
}
/* the cover is a solid block{
  content:""; position:absolute; left:-.06em; right:-.06em; top:.16em; bottom:.26em;
  background:var(--on-teal); border-radius:2px;
  transform:scaleX(0); transform-origin:left center;
  transition:transform var(--dur-base) var(--ease-seam);
}

/* SEALED — covered word by word{ transform:scaleX(1); }

/* ---- the ten conversations, with a frame each ----
   The list carried numbers and names only, which is why it read as an
   index rather than as ten distinct things. One object photograph per
   chapter — no couples, no portraits beside names: the frame is what
   the conversation is ABOUT, not a picture of people having it. */
.ch__fig{
  margin:0 0 var(--s-4); overflow:hidden; border-radius:var(--r-block);
  /* 4/3, not 3/4. The chapter photographs are wide frames of two people
     with room between them; a portrait slot cropped to the middle third cut
     one of them out of half the set. The plate follows the picture. */
  aspect-ratio:4/3; background:var(--cloud);
}
.ch__fig img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform var(--dur-cinematic) var(--ease); }
.ch__shot:hover .ch__fig img{ transform:scale(1.03); }
@media (max-width:1000px){ .ch__fig{ aspect-ratio:4/3; margin-bottom:var(--s-3); } }


/* ============================================================
   MOBILE CORRECTIONS
   ============================================================ */
@media (max-width:760px){
  /* 1. THE HERO — nothing to correct here any more. The inset and the
        corner this block used to undo are gone from the base rule, so
        every width gets the edge-to-edge frame the phone got first. */

  /* 2. THE TEN CONVERSATIONS.
        The round prev/next controls are a pointer affordance on a surface
        that is already swipeable, so they were asking a phone to tap what
        it can drag. Gone, and the cards take the room back: bigger frame,
        wider card, less air around the type. */
  /* The card was 315px wide holding a 267px picture — 48px of it was inner
     padding, and another 56px of vertical air sat around a 1px rule. The
     photograph gets that room back. */
  .ch{ flex-basis:min(88vw,340px); padding:14px 14px 26px; }
  .ch__fig{ aspect-ratio:1/1; margin-bottom:var(--s-3); }
  .ch__rule{ margin-block:14px 18px; }
  .ch__name{ font-size:var(--t-title); }
  .ch__sub{ margin-top:6px; }
  .ch__now{ margin-top:var(--s-2); }
  .head--between{ gap:var(--s-3); }
}

.quiet-note{ margin-top:var(--s-4); }

/* Outside the strip, not inside it. This sat within .rail, which is clipped
   and which the full-height controls now span — so the link was both cut off
   and covered. */
.rail__more{ margin-top:var(--s-4); }


/* ============================================================
   THE JOURNEY SHEET
   This was four grey bars labelled YOU and THEM — a picture of writing
   rather than any writing. Prevow's whole material is the sentence a
   person actually types, so the section now shows one: chapter one's
   real question, two real answers, and the line that survives them.

   The withheld panel is the part worth the boldness. It is not a blur
   over lorem: it is the product's own rule, stated{
  margin:0; padding:clamp(var(--s-4),2.4vw,var(--s-6));
  background:var(--white);
  border:var(--seam) solid var(--seam-ink);
  border-radius:var(--r-block);
}
/* the seam between two people{
  content:""; position:absolute; left:0; top:2px; bottom:2px;
  width:var(--seam); background:var(--seam-ink);
}

@media (max-width:900px){
  /* THE SHEET IS BOUND TO ITS ROW, exactly as the diagram it replaced was.

     The pinned panel gives the stage `minmax(0, so the picture squashed into
     whatever the words left and the step underneath was never touched.

     The sheet arrived with an intrinsic height instead and no binding, so
     on a phone it stood 109px taller than its row and printed the kept line
     straight through `03 — of three`. Same rule as before, then: the sheet
     fills its row and no more, its three parts are rows of their own{
    min-height:100%; padding:var(--s-2);
    display:grid; grid-template-rows:auto auto auto;
    align-content:start;
  }
  /* NOT `minmax(0,1fr)` ON THE PAIR, AND NOT A FIXED HEIGHT.

     Binding the sheet to its row with `height:100%` and letting the middle
     row absorb the difference worked at 812 and 844 and nowhere shorter.
     The row is what the viewport leaves — 484 at 844, 452 at 812, 380 at
     740, 307 at 667 — but the sheet's content is a constant 446px, or 469
     at 360 wide where the withheld answer takes a third line. Where the row
     was smaller, `1fr` shrank the TRACK and the text inside it did not
     shrink with it: the two answers ran straight under the rule and printed
     through THE LINE YOU KEEP.

     A row that can be smaller than its own words is the bug. All three rows
     size to content now, so nothing inside the sheet can ever be laid over
     anything else{ margin-bottom:var(--s-2); padding-bottom:12px; }
}