/* ============================================================
   AFTER SONGS
   Palette: bone #F7F3EC · ink #2B2724 · amber #B8863B
            warm-gray #6E6960 · amber-as-text #8A6224
   Fonts:   Newsreader (display) · Inter (body)
   ============================================================ */

:root{
  --bone:#F7F3EC;
  --ink:#2B2724;
  --amber:#B8863B;
  --warm-gray:#6E6960;
  --amber-text:#8A6224;

  --display:"Newsreader",Georgia,"Times New Roman",serif;
  --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  --nav-h:76px;
  --mini-h:50px;
  --bar-h:calc(var(--nav-h) + var(--mini-h));

  --wrap:min(1080px, 100% - 2.5rem);
  --pad-y:clamp(4.5rem, 11vh, 9rem);
  --r:14px;
}

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

html{
  /* NEVER overflow-x:hidden — it silently kills position:sticky. */
  overflow-x:clip;
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  overflow-x:clip;
  margin:0;
  background:var(--ink);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.7;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}
@media (min-width:900px){ body{font-size:18px} }

img,video{max-width:100%;display:block}
a{color:inherit}
.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}
.is-missing{visibility:hidden}

/* ============================================================
   THE FILM — one <video>, fixed, z-index 0, behind the page
   ============================================================ */
.film-layer{
  position:fixed;
  inset:0;
  z-index:0;
  background:#15120F;
  overflow:clip;
}
.film,.film-poster,.film-first{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
/* Frame 0 of the film, held over the video until the video has decoded frame 0
   for itself. Same pixels, so nothing visibly changes when it lifts — and no
   other shot can ever appear first. */
.film-first{
  z-index:1;
  opacity:1;
  transition:opacity .5s ease;
}
body.film-ready .film-first{opacity:0}

/* The golden sitting room is ONLY the reduced-motion still. It must never be
   the thing a scrubbing visitor sees first — that shows the end of the arc
   before the beginning. */
.film-poster{z-index:1;display:none}
body.mode-poster .film{display:none}
body.mode-poster .film-first{display:none}
body.mode-poster .film-poster{display:block;opacity:1}

/* Keeps overlay type legible over bright frames without dulling the film.
   Weighted to the top, which is where the overlay lines now sit. */
.film-veil{
  position:absolute;inset:0;
  z-index:2;
  background:
    /* centre scrim — the type now sits here and must hold against a bright,
       busy frame without dulling the shot at the edges */
    radial-gradient(ellipse 78% 52% at 50% 48%,
      rgba(16,13,11,.56) 0%,
      rgba(16,13,11,.40) 42%,
      rgba(16,13,11,.14) 72%,
      rgba(16,13,11,0) 100%),
    linear-gradient(to bottom,
      rgba(21,18,15,.52) 0%,
      rgba(21,18,15,.26) 24%,
      rgba(21,18,15,.10) 50%,
      rgba(21,18,15,.16) 74%,
      rgba(21,18,15,.44) 100%);
  pointer-events:none;
}

/* Page content sits above the film. */
main{position:relative;z-index:1}

/* ============================================================
   NAV + MINI-PLAYER
   ============================================================ */
.topbar{
  position:fixed;
  top:0;left:0;right:0;
  z-index:50;
  background:rgba(247,243,236,.90);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(43,39,36,.10);
}
.nav{
  width:var(--wrap);margin-inline:auto;
  height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.brand-mark{width:36px;height:36px;object-fit:contain}
.brand-word{
  font-family:var(--display);
  font-size:1.34rem;letter-spacing:.20em;font-weight:400;
}
.nav-links{display:flex;align-items:center;gap:1.9rem}
.nav-links a{
  text-decoration:none;font-size:1.02rem;color:var(--warm-gray);
  transition:color .2s;white-space:nowrap;
}
.nav-links a:hover{color:var(--ink)}
.nav-cta{
  background:var(--amber);color:#fff !important;
  padding:.66rem 1.4rem;border-radius:999px;
  font-weight:500;letter-spacing:.01em;font-size:1rem;
}
.nav-cta:hover{background:#a5762f}

.nav-toggle{display:none;background:none;border:0;padding:.5rem;cursor:pointer}
.nav-toggle-bar,.nav-toggle-bar::before,.nav-toggle-bar::after{
  display:block;width:28px;height:2px;background:var(--ink);content:"";
}
.nav-toggle-bar::before{transform:translateY(-8px)}
.nav-toggle-bar::after{transform:translateY(6px)}

.miniplayer{
  width:var(--wrap);margin-inline:auto;
  height:var(--mini-h);
  display:flex;align-items:center;gap:.9rem;
  border-top:1px solid rgba(43,39,36,.08);
}
.mini-play{
  flex:none;width:32px;height:32px;border-radius:50%;
  border:0;background:var(--amber);color:#fff;
  display:grid;place-items:center;cursor:pointer;padding:0;
  transition:background .2s,opacity .2s;
}
.mini-play svg{width:17px;height:17px;fill:currentColor}
.mini-play .icon-pause{display:none}
.miniplayer[data-state="playing"] .mini-play .icon-play{display:none}
.miniplayer[data-state="playing"] .mini-play .icon-pause{display:block}
.miniplayer[data-state="empty"] .mini-play{background:rgba(110,105,96,.35);cursor:not-allowed}
.mini-title{
  font-size:.94rem;color:var(--warm-gray);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52%;
}
.mini-track{flex:1;height:3px;background:rgba(43,39,36,.13);border-radius:3px;overflow:clip}
.mini-fill{height:100%;width:0;background:var(--amber);border-radius:3px}
.mini-next{
  flex:none;width:28px;height:28px;padding:0;
  border:0;background:none;cursor:pointer;
  display:grid;place-items:center;
  color:var(--warm-gray);transition:color .2s;
}
.mini-next svg{width:16px;height:16px;fill:currentColor}
.mini-next:hover{color:var(--ink)}
.mini-next[disabled]{opacity:.3;cursor:not-allowed}

@media (max-width:820px){
  .nav-toggle{display:block}
  .nav-links{
    position:absolute;top:var(--bar-h);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--bone);
    border-bottom:1px solid rgba(43,39,36,.10);
    padding:.5rem 1.25rem 1.4rem;
    display:none;
  }
  .nav-links.is-open{display:flex}
  .nav-links a{padding:.9rem 0;font-size:1.1rem}
  .nav-cta{text-align:center;margin-top:.8rem;padding:.85rem 1.4rem}
  .mini-title{max-width:40%}
}
/* The bar is a fixed chrome cost on a short phone; trim it back a little
   without going anywhere near the old size. */
@media (max-width:560px){
  :root{--nav-h:66px;--mini-h:44px}
  .brand-mark{width:31px;height:31px}
  .brand-word{font-size:1.18rem;letter-spacing:.16em}
}

/* ============================================================
   WINDOW SECTIONS — transparent, the film shows through
   Scroll travel = --h vh (the sticky inner is 100vh on top).
   ============================================================ */
.window{
  position:relative;
  height:calc((var(--h) + 100) * 1vh);
  background:transparent;
}
/* Overlays sit in the MIDDLE of the frame. Every beat occupies the same cell,
   so one replaces the other in exactly the same spot. */
.window-inner{
  position:sticky;
  top:0;
  height:100vh;
  display:grid;
  justify-items:center;
  align-content:center;
  padding:calc(var(--bar-h) + 2rem) 1.5rem 3rem;
  text-align:center;
  pointer-events:none;
}
/* One exception: the SHARE still, where the phone owns the centre. */
.window-inner[data-anchor="top"]{
  align-content:start;
  padding-top:calc(var(--bar-h) + 3.5vh);
}

.overlay-beat{
  grid-area:1/1;
  margin:0;
  opacity:0;                 /* JS drives this from window progress */
}
.overlay-line{
  font-family:var(--display);
  font-weight:300;
  font-size:clamp(1.95rem, 5vw, 4.15rem);
  line-height:1.14;
  color:#F7F3EC;
  letter-spacing:-.015em;
  max-width:min(19ch, 92vw);
  text-wrap:balance;
  /* Strong enough to hold against a bright, busy frame — the cold sitting
     room with its window and mantelpiece is the worst case. */
  text-shadow:
    0 2px 26px rgba(10,8,6,.92),
    0 1px 60px rgba(10,8,6,.75),
    0 1px 4px rgba(10,8,6,.7);
}
.overlay-line.closing{font-style:italic;max-width:min(17ch, 92vw)}

/* The hand-drawn lockup, over the opening farmhouse. */
.overlay-mark img{
  width:auto;
  height:min(42vh, 400px);
  max-width:82vw;
  object-fit:contain;
  filter:drop-shadow(0 2px 40px rgba(10,8,6,.85)) drop-shadow(0 1px 8px rgba(10,8,6,.6));
}

/* No scrub (ambient or poster): windows become ordinary screens and the
   stylesheet keeps control of opacity. */
body.poster-mode .window{height:100vh}
body.poster-mode .overlay-line{opacity:1}
body.poster-mode .window[data-dual] .overlay-line[data-phase="a"]{display:none}

/* ============================================================
   PORTRAIT — the 4:5 master, shown whole, with the type ON it.

   The film here is film-vertical.mp4: 4:5, cut from the originals
   around a per-shot centre (MANIFEST-vertical.md). Against the old
   16:9 band that is 2.2x the picture — 58% of a Pixel's viewport
   instead of 26% — so the dead space the band left is mostly gone
   and the overlay lines move back ON to the film, centred, exactly
   as they sit on desktop.

   object-fit is CONTAIN, not cover. The shots have already been
   cropped to 4:5 around their subjects and have nothing left to
   give: covering a 19.5:9 phone would take another 42% off the
   width, which loses half the farmhouse and clips the closing CTA
   screen to "n you're ready". Measured on the real frames, not
   assumed. What is left above and below is the film's own surround.
   ============================================================ */
@media (orientation:portrait){
  /* The picture's rendered box: 4:5, as large as the viewport allows. */
  :root{
    --frame-w:min(100vw, 80vh);
    --frame-h:min(125vw, 100vh);
  }

  .film,.film-poster,.film-first{
    top:0;bottom:0;
    height:100%;
    object-fit:contain;
  }

  /* The type is over the picture again, so the scrim comes back. */
  .film-veil{display:block}

  /* Centred on the film, like desktop. The [data-anchor="top"] rule
     above still wins for the SHARE still, where the phone owns the
     centre of the frame. */
  /* Symmetric top and bottom on purpose: the film box is centred in the
     viewport, so only equal padding puts the type on the middle of the
     PICTURE. The desktop rule's heavier top padding would sit it ~40px
     low, which reads as a mistake on a frame this size. Still clears the
     nav, because the padding is a full bar-height. */
  .window-inner{
    padding:calc(var(--bar-h) + .5rem) 1.1rem;
    grid-template-rows:none;
    align-content:center;
  }
  /* The SHARE still anchors its line to the top — but the top of the FILM,
     not of the viewport. Anchored to the viewport it lands in the surround
     above the picture, which is the same "floating on the background" fault
     the centred lines had. */
  .window-inner[data-anchor="top"]{
    padding-top:calc((100vh - var(--frame-h)) / 2 + 2.5vh);
  }

  .overlay-line{
    grid-row:auto;grid-column:auto;
    align-self:auto;
    padding-top:0;
    /* colour and text-shadow inherit from the base rule — over film again */
    font-size:clamp(1.75rem, 7vw, 3rem);
    line-height:1.18;
    max-width:min(15ch, calc(var(--frame-w) * .88));
  }
  .overlay-line.closing{max-width:min(14ch, calc(var(--frame-w) * .88))}

  /* The wordmark sits over the opening farmhouse, sized to the frame
     rather than to the viewport — on a tall phone the frame is much
     shorter than the screen, and a vh-based size floated it up into
     the surround instead of landing on the house. */
  .overlay-mark img{
    width:calc(var(--frame-w) * .78);
    height:auto;
    max-width:none;
    max-height:calc(var(--frame-h) * .66);
  }
}

/* ============================================================
   /example — the same component, on its own page
   ============================================================ */
.example-body{background:#F3EAD8;color:var(--ink)}
.ex-bar{
  width:var(--wrap);margin-inline:auto;
  height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.ex-back{font-size:.875rem;color:var(--warm-gray);text-decoration:none}
.ex-back:hover{color:var(--ink)}
.ex-main{
  width:min(760px, 100% - 2.5rem);
  margin-inline:auto;
  padding-block:clamp(2.5rem,7vh,5rem) clamp(4rem,10vh,7rem);
  text-align:center;
}
.ex-h{
  font-family:var(--display);font-weight:400;
  font-size:clamp(2.1rem,6vw,3.4rem);
  line-height:1.12;margin:0 0 1.1rem;letter-spacing:-.015em;
}
.ex-sf{color:var(--warm-gray);max-width:56ch;margin-inline:auto}
.ex-stage{margin:3rem 0 2.5rem}
.ex-stage .mp-phone{width:min(360px, 88vw)}
.ex-note{font-size:.92rem;color:var(--warm-gray);max-width:48ch;margin-inline:auto}

/* Testing readout — only with ?forcescrub=1 / ?forceambient=1 / ?debug=1 */
.film-debug{
  position:fixed;left:.5rem;bottom:.5rem;z-index:90;
  background:rgba(21,18,15,.86);color:#F7F3EC;
  font-family:var(--body);font-size:11px;line-height:1.35;
  padding:.45rem .6rem;border-radius:8px;
  max-width:calc(100vw - 1rem);
  pointer-events:none;
}

/* ============================================================
   PAUSE SECTIONS — opaque, they cover the film entirely
   Temperature arc: cool bone at the top → gold at price & CTA → ink footer
   ============================================================ */
.pause{
  position:relative;
  z-index:2;
  padding-block:var(--pad-y);
  scroll-margin-top:var(--bar-h);
}
.tone-1{background:#F7F3EC}
.tone-2{background:#F6F1E7}
.tone-3{background:#F4EEE0}
.tone-4{background:#F3EAD8}
.tone-5{background:#F0E5CF}
.tone-6{background:#EEDFC2}   /* price — warmest */
.tone-7{background:#EFE2C9}
.tone-8{background:#EBD8B4}   /* CTA — saying yes happens in golden light */
.tone-footer{background:var(--ink);color:#D9D3C9;padding-block:4rem 2.5rem}

.wrap{width:var(--wrap);margin-inline:auto}
.wrap-narrow{width:min(720px,100% - 2.5rem)}

.eyebrow{
  font-size:.71rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--amber-text);margin:0 0 1rem;
}
h2{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.85rem,4.6vw,2.85rem);
  line-height:1.18;letter-spacing:-.015em;
  margin:0 0 1.4rem;text-wrap:balance;
}
h3{
  font-family:var(--display);font-weight:400;
  font-size:1.32rem;line-height:1.3;margin:0 0 .6rem;
}
p{margin:0 0 1.15rem}
.standfirst{font-size:1.1em;color:var(--warm-gray);max-width:56ch}
.note{font-size:.9rem;color:var(--warm-gray);margin-top:1.6rem}
/* ---- What this is — short, and the heading holds one line on desktop ---- */
.h-oneline{text-wrap:balance}
@media (min-width:1000px){
  .h-oneline{white-space:nowrap;font-size:clamp(1.9rem, 3.05vw, 2.35rem)}
}
.what-lead{
  font-family:var(--display);
  font-size:clamp(1.2rem,2.1vw,1.4rem);
  line-height:1.45;color:var(--ink);
  max-width:46ch;margin:0 0 1.4rem;
}
/* The four lines that used to be overlay beats on the dropped cold-kitchen
   window. They are the core of the elevator answer, so they are set as
   statements, not body copy. */
.what-core{
  list-style:none;margin:0 0 1.9rem;padding:0;
  display:grid;gap:.85rem;max-width:44ch;
}
.what-core li{
  position:relative;
  padding-left:1.9rem;
  font-family:var(--display);
  font-size:clamp(1.05rem,1.7vw,1.2rem);
  line-height:1.4;
}
.what-core li::before{
  content:"";position:absolute;left:0;top:.52em;
  width:9px;height:9px;border-radius:50%;
  background:var(--amber);
}
.what-kicker{
  font-size:1.02rem;
  color:var(--warm-gray);
  margin:1.6rem 0 0;
  max-width:44ch;
}
.what-sub{
  font-family:var(--body);
  font-size:1.08rem;
  line-height:1.65;
  color:var(--warm-gray);
  margin:-.2rem 0 1.6rem;
}
#what{padding-block:clamp(3.2rem,7vh,5.5rem)}
.what-col{display:grid;gap:1.05rem;align-content:start;margin-bottom:2rem}
.what-col .what-lead{margin:0}
.what-lead-2{
  font-family:var(--body);
  font-size:1rem;
  line-height:1.7;
  color:var(--warm-gray);
  max-width:44ch;
}
@media (min-width:900px){
  #what .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:1rem 3.6rem;align-items:start}
  #what .eyebrow,#what .h-oneline{grid-column:1/-1}
  #what .what-sub{grid-column:1/-1}
  #what .what-col{grid-column:1;margin-bottom:0}
  .what-lead{margin-bottom:0}
  .what-core{margin-bottom:0}
  #what .what-kicker{
    grid-column:1/-1;
    max-width:none;
    margin-top:1.8rem;
  }
}

/* Four examples, straight after the answer. The doubled class beats the
   auto-fill columns on .tracks, which is declared after this block. */
.more-link{margin:2rem 0 0}
@media (min-width:1000px){
  .tracks.tracks-four{grid-template-columns:repeat(4,1fr)}
}

/* ---- Listen — the library of examples ---- */
.tracks{
  list-style:none;margin:2.6rem 0 0;padding:0;
  display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fill, minmax(290px, 1fr));
}
.track{
  background:rgba(255,255,255,.62);
  border:1px solid rgba(43,39,36,.10);
  border-radius:var(--r);
  padding:1.05rem 1.15rem 1.15rem;
  display:flex;flex-direction:column;gap:.55rem;
  transition:border-color .2s, background .2s;
}
.track.is-current{border-color:rgba(184,134,59,.55);background:rgba(184,134,59,.09)}
.track-top{display:flex;flex-direction:column;align-items:flex-start;gap:.28rem}
.track-style{
  font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  color:var(--warm-gray);
  background:none;padding:0;border-radius:0;
}
.track-who{
  font-family:var(--display);
  font-size:1.02rem;line-height:1.2;
  color:var(--ink);
}
.track-main{display:flex;align-items:center;gap:.8rem}
.track-btn{
  flex:none;width:44px;height:44px;border-radius:50%;
  border:0;background:var(--amber);color:#fff;
  display:grid;place-items:center;cursor:pointer;padding:0;
  transition:background .2s;
}
.track-btn svg{width:17px;height:17px;fill:currentColor;grid-area:1/1}
.track-btn .icon-pause{display:none}
.track[data-state="playing"] .track-btn .icon-play{display:none}
.track[data-state="playing"] .track-btn .icon-pause{display:block}
.track-btn:hover{background:#a5762f}
.track-btn[disabled]{background:rgba(110,105,96,.26);cursor:not-allowed}
.track-title{font-family:var(--display);font-size:1.22rem;line-height:1.24;margin:0}
.track-verse{
  font-family:var(--display);font-style:italic;
  font-size:1.06rem;line-height:1.55;
  color:#4A443E;margin:.15rem 0 0;
}
.track-bar{height:2px;background:rgba(43,39,36,.12);border-radius:2px;overflow:clip}
.track-fill{height:100%;width:0;background:var(--amber);border-radius:2px}
.track-soon{
  font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--warm-gray);
}

/* ---- Steps ---- */
/* ---- How it works — big numbers, short sentences, full section height ---- */
/* Fill the section rather than crowding everything at the top. */
#how .wrap{
  display:flex;flex-direction:column;
  min-height:min(66vh, 620px);
}
/* The approval promise, lifted out of step 2 and set under the h2. Heading
   weight — below h2, comfortably above the step headings (1.5/1.65rem). */
.approve-line{
  font-family:var(--display);font-weight:300;
  font-size:clamp(1.45rem,3vw,2rem);
  line-height:1.25;letter-spacing:-.015em;
  color:var(--ink);max-width:24ch;
  /* #how .steps centres itself with margin-block:auto, which resolves to 0
     once the section is full — so the gap under this line has to be its own
     margin, not the steps' auto. */
  margin:0 0 2.4rem;
}
.steps{list-style:none;margin:3.5rem 0 0;padding:0;display:grid;gap:2.6rem}
#how .steps{margin-block:auto}
/* Narrow: number to the left, spanning heading + copy. */
.steps li{display:grid;grid-template-columns:auto 1fr;column-gap:1.3rem;align-items:start}
.step-n{
  grid-column:1;grid-row:1 / span 2;
  width:64px;height:64px;border-radius:50%;
  border:2px solid var(--amber);color:var(--amber-text);
  display:grid;place-items:center;
  font-family:var(--display);font-size:1.85rem;line-height:1;
}
.steps li h3{grid-column:2;grid-row:1;font-size:1.5rem}
.steps li p{grid-column:2;grid-row:2;color:var(--warm-gray);margin:0;font-size:1.05rem}
@media (min-width:860px){
  /* Wide: three columns, number stacked above its heading. */
  .steps{grid-template-columns:repeat(3,1fr);gap:3rem;margin-top:4.5rem}
  .steps li{grid-template-columns:1fr;align-content:start}
  .step-n{
    grid-row:1;margin-bottom:1.6rem;
    width:84px;height:84px;font-size:2.4rem;
  }
  .steps li h3{grid-column:1;grid-row:2;font-size:1.65rem}
  .steps li p{grid-column:1;grid-row:3;font-size:1.08rem}
}

.fasttrack{
  margin-top:3rem;padding:1.15rem 1.4rem;
  background:rgba(184,134,59,.13);
  border-left:3px solid var(--amber);
  border-radius:0 var(--r) var(--r) 0;
  font-size:1.02rem;
}
.fasttrack strong{font-weight:600}
.fasttrack-lg{
  margin-top:2.4rem;max-width:56ch;
  padding:1.5rem 1.8rem;
  font-family:var(--display);
  font-size:clamp(1.15rem,2.3vw,1.6rem);
  line-height:1.4;
  border-left-width:4px;
}
.fasttrack-lg span{display:inline-block}
@media (min-width:860px){
  .fasttrack{margin-top:4rem;font-size:1.15rem;padding:1.4rem 1.7rem}
}
.privacy{font-size:.9rem;color:var(--warm-gray);margin-top:1.8rem}

/* ---- What you keep — THE OFFER. Full width, real hierarchy. ---- */
.keep-h{font-size:clamp(2.2rem,5.6vw,3.6rem)}
.keep-sf{font-size:1.22em;max-width:34ch}
/* Two heroes carry the section; five lighter cards sit underneath. The old
   version was seven identical tiles in almost exactly the section's own colour,
   so "a private memorial page" read with the same weight as "downloadable". */
.keeps{
  list-style:none;margin:3.2rem 0 0;padding:0;
  display:grid;gap:1.1rem;grid-template-columns:1fr;
}
.keep{
  position:relative;
  background:#FDF8EE;                             /* lighter AND warmer than tone-4 */
  border:1px solid rgba(184,134,59,.24);
  border-radius:var(--r);
  padding:1.5rem 1.5rem 1.6rem;
  box-shadow:
    0 1px 2px rgba(43,39,36,.05),
    0 18px 38px -26px rgba(43,39,36,.55);
}
.keep-n{
  display:block;
  font-family:var(--display);
  font-weight:400;
  line-height:1;
  color:var(--amber);
  letter-spacing:-.02em;
}
.keep h3{
  font-size:clamp(1.3rem,2.4vw,1.7rem);
  line-height:1.22;margin:0 0 .5rem;
}
.keep p{color:var(--warm-gray);margin:0;font-size:1.02rem;line-height:1.6}

/* ---- the two heroes ---- */
.keep-hero{
  background:
    linear-gradient(180deg, #FFFCF5 0%, #FBF3E4 100%);
  border-color:rgba(184,134,59,.34);
  padding:1.9rem 1.7rem 2rem;
  box-shadow:
    0 1px 2px rgba(43,39,36,.06),
    0 34px 60px -34px rgba(43,39,36,.62);
  display:grid;gap:1.5rem;align-items:center;
}
.keep-hero .keep-n{font-size:3.3rem;margin-bottom:.5rem}
.keep-hero h3{font-size:clamp(1.6rem,3.4vw,2.15rem);margin-bottom:.65rem}
.keep-hero p{font-size:1.1rem;max-width:46ch}
.keep-visual{display:grid;justify-items:center;align-items:center}

/* The signature amber play-circle, as a motif rather than a control. */
.keep-play{
  display:grid;place-items:center;
  border-radius:50%;
  background:var(--amber);color:#fff;
  box-shadow:0 14px 30px -14px rgba(184,134,59,.9);
}
.keep-play svg{fill:currentColor}
.keep-play-lg{width:92px;height:92px;grid-area:1/1;transform:translate(-16px,-10px)}
.keep-play-lg svg{width:34px;height:34px}
/* The second, smaller circle behind it — two versions, one song. */
.keep-play-sm{
  width:62px;height:62px;grid-area:1/1;
  transform:translate(38px,26px);
  background:rgba(184,134,59,.26);
  color:var(--amber-text);
  box-shadow:none;
}
.keep-play-sm svg{width:22px;height:22px}

/* The memorial page, mounted small: the real component, not a picture of it.
   The window shows the top of the phone — name, photos, player — and fades
   out at the cut so the crop reads as deliberate. */
.keep-thumb{
  position:relative;
  width:158px;height:212px;
  overflow:hidden;
  flex:none;
}
.keep-thumb .mp-wrap{
  position:absolute;top:0;left:0;
  width:320px;gap:0;
  transform:scale(.494);transform-origin:top left;
}
.keep-thumb .mp-label,.keep-thumb .mp-legend{display:none}
.keep-thumb .mp-phone{box-shadow:0 26px 50px -26px rgba(43,39,36,.7)}
/* Fade the crop out with a mask rather than a gradient in the card's colour:
   the card is itself a gradient, so a solid overlay would only match at one
   height — and the phone's black frame would still end on a hard line. */
.keep-thumb{
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 64%,transparent 98%);
          mask-image:linear-gradient(180deg,#000 0%,#000 64%,transparent 98%);
}

/* ---- the five secondary cards ---- */
.keep-sm{padding:1.3rem 1.35rem 1.45rem}
.keep-sm .keep-n{font-size:2rem;margin-bottom:.45rem;color:rgba(184,134,59,.85)}
.keep-sm h3{font-size:1.16rem;margin-bottom:.4rem}
.keep-sm p{font-size:.95rem;line-height:1.55}

@media (min-width:620px){
  .keep-hero{grid-template-columns:1fr auto;gap:2rem;padding:2.1rem 2.2rem}
}
@media (min-width:760px){
  .keeps{grid-template-columns:repeat(2,1fr);gap:1.2rem}
  .keep-hero{grid-column:1/-1}
}
@media (min-width:1100px){
  .keeps{grid-template-columns:repeat(5,1fr);gap:1.25rem}
  .keep-hero{grid-column:1/-1;padding:2.4rem 2.6rem}
  .keep-hero .keep-n{font-size:4rem}
  .keep-thumb{width:186px;height:246px}
  .keep-thumb .mp-wrap{transform:scale(.581)}
}

/* ---- THE MEMORIAL PAGE — one component, mounted from a <template> ---- */
.wrap-split{display:grid;gap:3rem;align-items:start}
.wrap-split p{color:var(--warm-gray)}
@media (min-width:900px){
  /* The memorial page is a tall component; centre the text beside it rather
     than top-aligning it and leaving a void underneath. */
  .wrap-split{grid-template-columns:1fr .82fr;gap:3.5rem;align-items:center}
}
/* The annotated component needs room for its callouts, so this section runs
   wider than the rest and the phone sits left in its stage. */
@media (min-width:1040px){
  #page .wrap{width:min(1260px, 100% - 2.5rem)}
  #page .wrap-split{grid-template-columns:1.05fr 1fr;gap:2.5rem}
  /* The stage shrink-wraps the phone (the callouts are absolute), so it has to
     be pinned left or the labels run off the end of the column. */
  #page .mp-wrap{justify-items:start}
  .mp-stage.notes-on{justify-items:start}
}

.mp-wrap{display:grid;justify-items:center;gap:.7rem}
.mp-stage{position:relative;display:grid;justify-items:center}

/* Callouts. Positions are measured from the real parts in memorial.js, so
   they stay right if the component's content changes. */
.mp-note{
  position:absolute;
  display:none;
  align-items:center;gap:.5rem;
  transform:translateY(-50%);
  width:210px;
  pointer-events:none;
}
.mp-stage.notes-on .mp-note{display:flex}
.mp-note-line{
  flex:none;width:26px;height:1px;
  background:rgba(184,134,59,.75);
}
.mp-note-line::before{
  content:"";display:block;width:5px;height:5px;border-radius:50%;
  background:var(--amber);margin-top:-2px;
}
.mp-note-text{
  font-size:.78rem;line-height:1.35;color:var(--warm-gray);
}

/* Same labels in flow where there is no room beside the phone. */
.mp-legend{
  list-style:none;margin:1.4rem 0 0;padding:0;
  display:grid;gap:.4rem;max-width:320px;
}
.mp-legend li{
  position:relative;padding-left:1rem;
  font-size:.82rem;color:var(--warm-gray);line-height:1.45;
}
.mp-legend li::before{
  content:"";position:absolute;left:0;top:.58em;
  width:5px;height:5px;border-radius:50%;background:var(--amber);
}
@media (min-width:1040px){ .mp-legend{display:none} }
.mp-label{
  font-size:.63rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--warm-gray);margin:0;
}
.mp-phone{
  width:min(320px,86vw);
  background:#111;
  border-radius:40px;
  padding:10px;
  box-shadow:0 40px 80px -26px rgba(43,39,36,.5);
}
.mp-screen{
  background:var(--bone);
  border-radius:31px;
  padding:1.7rem 1.25rem 1.4rem;
  display:grid;gap:1.25rem;
}
.mp-sec{
  font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--amber-text);margin:0 0 .5rem;
}

/* portrait + name */
.mp-head{text-align:center}
.mp-portrait{
  width:72px;height:72px;margin:0 auto .7rem;
  border-radius:50%;background:rgba(43,39,36,.07);
  display:grid;place-items:center;overflow:clip;
}
.mp-portrait svg{width:46px;height:46px;fill:rgba(43,39,36,.26);margin-top:6px}
.mp-name{font-family:var(--display);font-size:1.2rem;line-height:1.2;margin:0}
.mp-dates{font-size:.74rem;color:var(--warm-gray);margin:.25rem 0 0;letter-spacing:.03em}

/* add photos */
.mp-photos{
  display:flex;gap:.7rem;align-items:center;
  border:1px dashed rgba(184,134,59,.5);border-radius:12px;
  padding:.7rem .8rem;background:rgba(184,134,59,.055);
}
.mp-plus{
  flex:none;width:26px;height:26px;border-radius:50%;
  background:rgba(184,134,59,.16);color:var(--amber-text);
  display:grid;place-items:center;font-size:1rem;line-height:1;
}
.mp-photos-t{font-size:.82rem;font-weight:500;margin:0}
.mp-photos-s{font-size:.72rem;color:var(--warm-gray);margin:.12rem 0 0;line-height:1.45}

/* player */
.mp-player{display:flex;align-items:center;gap:.75rem}
.mp-play{
  flex:none;width:40px;height:40px;border-radius:50%;
  background:var(--amber);color:#fff;display:grid;place-items:center;
}
.mp-play svg{width:15px;height:15px;fill:currentColor}
.mp-player-meta{flex:1;min-width:0}
.mp-track{font-family:var(--display);font-size:.98rem;line-height:1.25;margin:0 0 .45rem}
.mp-bar{height:2px;background:rgba(43,39,36,.15);border-radius:2px;overflow:clip}
.mp-bar-fill{width:34%;height:100%;background:var(--amber)}

/* share only */
.mp-share{text-align:center}
.mp-share-btn{
  display:block;background:var(--amber);color:#fff;
  padding:.6rem 1rem;border-radius:999px;
  font-size:.85rem;font-weight:500;
}
.mp-share-note{font-size:.68rem;color:var(--warm-gray);margin:.5rem 0 0;line-height:1.45}

/* lyrics */
.mp-lyrics{border-top:1px solid rgba(43,39,36,.1);padding-top:1.1rem}
.mp-lyrics p{
  font-family:var(--display);font-size:.87rem;line-height:1.62;
  color:var(--warm-gray);margin:0;
}
.mp-lyrics .mp-sec{font-family:var(--body)}

/* acknowledgements */
.mp-thanks{border-top:1px solid rgba(43,39,36,.1);padding-top:1.1rem}
.mp-thanks p{font-size:.76rem;color:var(--warm-gray);margin:0;line-height:1.5}

/* the album */
.mp-album{border-top:1px solid rgba(43,39,36,.1);padding-top:1.1rem}
.mp-grid{display:grid;grid-template-columns:1fr 1fr;gap:.45rem}
.mp-tile{
  border-radius:10px;padding:.6rem .55rem;
  font-size:.7rem;line-height:1.3;min-height:52px;
  display:flex;align-items:center;gap:.4rem;
  border:1px dashed rgba(43,39,36,.2);
  color:rgba(110,105,96,.85);
  background:rgba(43,39,36,.022);
}
.mp-tile-filled{
  grid-column:1 / -1;
  border:1px solid rgba(184,134,59,.35);border-style:solid;
  background:rgba(184,134,59,.1);
  color:var(--ink);font-weight:500;
}
.mp-tile-play{
  flex:none;width:22px;height:22px;border-radius:50%;
  background:var(--amber);color:#fff;display:grid;place-items:center;
}
.mp-tile-play svg{width:9px;height:9px;fill:currentColor}
.mp-tile-add{color:var(--amber-text);border-color:rgba(184,134,59,.45);justify-content:center}
.mp-album-note{
  font-size:.7rem;color:var(--warm-gray);
  margin:.7rem 0 0;line-height:1.5;
}

/* ---- Price — big, plain, and it fills its section ---- */
.price-wrap{
  min-height:min(74vh, 720px);
  display:flex;flex-direction:column;justify-content:center;
  align-items:flex-start;text-align:left;
}
.price-fig{
  font-family:var(--display);font-weight:300;
  font-size:clamp(6rem, 20vw, 15rem);
  line-height:.86;letter-spacing:-.04em;
  margin:2rem 0 1.8rem;color:var(--ink);
}
.price-lede{
  font-family:var(--display);
  font-size:clamp(1.35rem,3vw,2.1rem);
  line-height:1.35;color:var(--ink);
  max-width:22ch;margin-bottom:2rem;
}
/* The deliverable list. Same component as .what-core — amber dot, display
   face — just wider, because these lines are longer than that section's. */
.price-list{max-width:54ch;margin:.4rem 0 2.6rem}
.price-sub{
  font-size:clamp(1rem,1.9vw,1.15rem);line-height:1.55;
  color:var(--warm-gray);max-width:46ch;margin:0 0 2rem;
}
.price-same{
  font-family:var(--display);
  font-size:clamp(1.15rem,2.2vw,1.45rem);
  line-height:1.35;color:var(--ink);
  max-width:34ch;margin:0 0 2rem;
}
.guarantee{
  font-size:clamp(1rem,1.9vw,1.2rem);line-height:1.6;
  padding:1.4rem 1.6rem;
  background:rgba(184,134,59,.12);border-radius:var(--r);
  margin-bottom:0;max-width:56ch;
}
.guarantee strong{font-weight:600}
.btn{
  display:inline-block;background:var(--amber);color:#fff;
  text-decoration:none;border:0;cursor:pointer;
  padding:.92rem 2rem;border-radius:999px;
  font-family:var(--body);font-size:1rem;font-weight:500;
  transition:background .2s;margin-top:.6rem;
}
.btn:hover{background:#a5762f}
.btn-lg{width:100%;padding:1.05rem 2rem;font-size:1.05rem}
.btn-xl{
  margin-top:2.4rem;
  padding:1.25rem 3rem;
  font-size:clamp(1.05rem,1.9vw,1.25rem);
}
.inline-link{
  color:var(--amber-text);
  font-weight:500;
  text-underline-offset:.22em;
  text-decoration-thickness:1px;
}
.inline-link:hover{color:var(--amber)}

/* ---- FAQ ---- */
.faq{max-width:720px;margin-top:2rem;border-top:1px solid rgba(43,39,36,.13)}
.faq details{border-bottom:1px solid rgba(43,39,36,.13)}
.faq summary{
  cursor:pointer;list-style:none;padding:1.15rem 2rem 1.15rem 0;position:relative;
  font-family:var(--display);font-size:1.12rem;line-height:1.4;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:.4rem;top:1.55rem;
  width:9px;height:9px;border-right:1.5px solid var(--amber);border-bottom:1.5px solid var(--amber);
  transform:rotate(45deg);transition:transform .22s;
}
.faq details[open] summary::after{transform:rotate(-135deg);top:1.75rem}
.faq details p{margin:0 0 1.3rem;color:var(--warm-gray);max-width:62ch}

/* ---- CTA + form ---- */
.cta-h{font-size:clamp(2rem,5.4vw,3.05rem)}
.occasions{color:var(--warm-gray);max-width:52ch;margin-bottom:2.4rem}
.form{display:grid;gap:1.15rem}
/* Honeypot — off-screen rather than display:none, which some bots skip. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.field{display:grid;gap:.4rem;border:0;padding:0;margin:0;min-width:0}
.field label,.field legend{
  font-size:.79rem;font-weight:500;letter-spacing:.03em;color:var(--ink);padding:0;
}
.opt{color:var(--warm-gray);font-weight:400}
.field input,.field textarea{
  font-family:var(--body);font-size:1rem;color:var(--ink);
  background:rgba(255,255,255,.72);
  border:1px solid rgba(43,39,36,.18);
  border-radius:10px;
  padding:.8rem .95rem;
  width:100%;
  transition:border-color .2s,box-shadow .2s;
}
.field textarea{resize:vertical;line-height:1.6}
.field input:focus,.field textarea:focus{
  outline:none;border-color:var(--amber);box-shadow:0 0 0 3px rgba(184,134,59,.16);
}
.field-row{display:grid;gap:1.15rem}
@media (min-width:680px){ .field-row{grid-template-columns:1fr 1fr} }
.checks{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.2rem}
.check{position:relative}
.check input{position:absolute;opacity:0;width:0;height:0}
.check span{
  display:inline-block;cursor:pointer;
  padding:.5rem 1rem;border-radius:999px;
  border:1px solid rgba(43,39,36,.22);
  background:rgba(255,255,255,.5);
  font-size:.87rem;transition:all .18s;
}
.check input:checked + span{background:var(--amber);border-color:var(--amber);color:#fff}
.check input:focus-visible + span{box-shadow:0 0 0 3px rgba(184,134,59,.3)}
.form-foot{font-size:.86rem;color:var(--warm-gray);margin:.2rem 0 0;text-align:center}
.form-status{margin:0;font-size:.92rem;min-height:1.2em}
.form-status.ok{color:var(--amber-text)}
.form-status.err{color:#9c3226}
.reassure{margin-top:2.4rem;padding-top:1.8rem;border-top:1px solid rgba(43,39,36,.14)}
.phone-line,.founder{font-size:.95rem;color:var(--warm-gray);margin:0 0 .5rem}
.phone-line a{color:var(--amber-text)}

/* ---- Footer ---- */
.foot-grid{display:grid;gap:2.2rem}
@media (min-width:760px){ .foot-grid{grid-template-columns:1.5fr 1fr 1fr;gap:3rem} }
.foot-brand{font-family:var(--display);letter-spacing:.2em;font-size:1rem;margin:0 0 .8rem;color:#F7F3EC}
.foot-line{font-size:.9rem;color:#9E978C;margin:0 0 .3rem;max-width:34ch}
.foot-h{font-size:.71rem;letter-spacing:.14em;text-transform:uppercase;color:#8C8478;margin:0 0 .8rem}
.foot-grid a{display:block;font-size:.92rem;color:#D9D3C9;text-decoration:none;padding:.22rem 0}
.foot-grid a:hover{color:var(--amber)}
.foot-legal{
  margin:3rem 0 0;padding-top:1.5rem;
  border-top:1px solid rgba(217,211,201,.14);
  font-size:.8rem;color:#8C8478;
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ============================================================
   THE INTAKE FORM
   Built by intake.js against docs/intake-form-spec.md.
   375px first, without exception — this gets opened from a
   WhatsApp link on a phone, often at night. Palette and type
   are inherited; nothing here introduces a new colour or size.
   ============================================================ */
.intake{margin-top:2.2rem}

/* Return to the same device (§12). Never "resume your application". */
.iresume{
  display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap;
  margin-bottom:1rem;padding-bottom:.9rem;
  border-bottom:1px solid rgba(43,39,36,.12);
}
.iresume-t{margin:0;font-size:.95rem;color:var(--warm-gray)}

/* One question, one screen. */
.iq{
  background:#FDF8EE;
  border:1px solid rgba(184,134,59,.26);
  border-radius:var(--r);
  padding:1.1rem 1.1rem 1.4rem;
  box-shadow:0 1px 2px rgba(43,39,36,.05), 0 20px 44px -30px rgba(43,39,36,.5);
  text-align:left;
}
/* Back and skip sit ABOVE the question. A skip that appears underneath a
   hard question has already been read as an obligation (§2). */
.iq-bar{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;margin-bottom:.9rem;min-height:44px;
}
.iq-back,.iq-skip{
  background:none;border:0;padding:.6rem .2rem;margin:0;
  font-family:var(--body);font-size:.95rem;cursor:pointer;
  min-height:44px;
}
.iq-back{color:var(--warm-gray)}
.iq-skip{
  color:var(--amber-text);text-decoration:underline;
  text-underline-offset:3px;margin-left:auto;
}
.iq-back:hover,.iq-skip:hover{color:var(--ink)}
.iq-back-spacer{display:block}

.iq-stage{
  margin:0 0 .5rem;font-size:.68rem;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--amber-text);
}
.iq-q{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.42rem,5.4vw,1.85rem);
  line-height:1.24;margin:0 0 .55rem;text-wrap:balance;
}
.iq-help{margin:0 0 1.1rem;font-size:.96rem;line-height:1.55;color:var(--warm-gray)}
.iq-note{margin:0 0 1rem;font-size:1rem;line-height:1.6;color:var(--warm-gray)}
.iq-fine{margin:.2rem 0 1rem;font-size:.86rem;line-height:1.5;color:var(--warm-gray)}
.iq-body{display:grid;gap:.85rem}

/* Fields. The placeholder carries an example answer in every one of them —
   a greyed-out "e.g. the kettle's on" teaches more than any instruction. */
.ifield{
  width:100%;font-family:var(--body);font-size:1.05rem;color:var(--ink);
  background:rgba(255,255,255,.85);
  border:1px solid rgba(43,39,36,.20);
  border-radius:12px;padding:.9rem 1rem;min-height:52px;
}
textarea.ifield{line-height:1.55;resize:vertical;min-height:96px}
.ifield::placeholder{color:rgba(110,105,96,.75)}
.ifield:focus{outline:2px solid var(--amber);outline-offset:1px;border-color:transparent}

/* Cards — taps, not typing. */
.icards{display:grid;gap:.6rem}
.icard{
  width:100%;text-align:left;cursor:pointer;
  font-family:var(--body);
  background:rgba(255,255,255,.85);
  border:1px solid rgba(43,39,36,.18);
  border-radius:12px;padding:.95rem 1.05rem;min-height:56px;
  display:grid;gap:.2rem;
  transition:border-color .18s,background .18s;
}
.icard-t{font-size:1.02rem;line-height:1.35;color:var(--ink)}
.icard-s{font-size:.86rem;line-height:1.45;color:var(--warm-gray)}
.icard:hover{border-color:rgba(184,134,59,.55)}
.icard.is-on{border-color:var(--amber);background:rgba(184,134,59,.12)}

.ibtn{
  width:100%;cursor:pointer;font-family:var(--body);font-size:1.02rem;
  background:var(--amber);color:#fff;border:0;border-radius:999px;
  padding:.95rem 1.4rem;min-height:52px;
  transition:background .2s;
}
.ibtn:hover{background:#a5762f}
.ibtn[disabled]{opacity:.55;cursor:not-allowed}
.ibtn-go{font-size:1.06rem;padding:1.05rem 1.4rem}
.ilink{
  background:none;border:0;cursor:pointer;font-family:var(--body);
  font-size:.95rem;color:var(--amber-text);text-decoration:underline;
  text-underline-offset:3px;padding:.7rem .2rem;min-height:44px;
}
.ilink:hover{color:var(--ink)}

/* ---- the tone dial ------------------------------------------------------
   There is no number in this control. The state is the STOP NAME on
   data-stop; the handle's position is keyed off that name here in the
   stylesheet, so nothing numeric is written into the DOM (§0, §13).
   -------------------------------------------------------------------- */
.itone{display:grid;gap:.7rem;padding:.3rem 0 .1rem;touch-action:pan-y}
.itone-ends{
  display:flex;justify-content:space-between;gap:1rem;
  font-size:.8rem;line-height:1.3;color:var(--warm-gray);
}
.itone-rail{
  position:relative;height:44px;margin:0 12px;
  display:flex;align-items:center;cursor:pointer;
}
.itone-rail::before{
  content:"";position:absolute;left:0;right:0;height:4px;border-radius:4px;
  background:rgba(43,39,36,.16);
}
.itone-handle{
  position:absolute;top:50%;width:26px;height:26px;border-radius:50%;
  background:var(--amber);
  box-shadow:0 6px 16px -6px rgba(184,134,59,.95);
  transform:translate(-50%,-50%);
  transition:left .26s cubic-bezier(.4,0,.2,1);
  pointer-events:none;
}
.itone-stop{
  position:absolute;top:0;width:44px;height:44px;
  transform:translateX(-50%);
  background:none;border:0;padding:0;cursor:pointer;
}
.itone-stop::after{
  content:"";position:absolute;left:50%;top:50%;
  width:6px;height:6px;border-radius:50%;
  transform:translate(-50%,-50%);
  background:rgba(43,39,36,.22);
}
.itone[data-stop="solemn"]        .itone-handle{left:0%}
.itone[data-stop="mostly-solemn"] .itone-handle{left:25%}
.itone[data-stop="even"]          .itone-handle{left:50%}
.itone[data-stop="warm"]          .itone-handle{left:75%}
.itone[data-stop="smiling"]       .itone-handle{left:100%}
.itone-stop[data-stop="solemn"]{left:0%}
.itone-stop[data-stop="mostly-solemn"]{left:25%}
.itone-stop[data-stop="even"]{left:50%}
.itone-stop[data-stop="warm"]{left:75%}
.itone-stop[data-stop="smiling"]{left:100%}
.itone-stop:focus-visible{outline:2px solid var(--amber);outline-offset:2px;border-radius:50%}
.itone-word{
  margin:0;text-align:center;font-size:.9rem;color:var(--warm-gray);
}

/* The live preview. Two stacked layers so the line crossfades instead of
   jump-cutting while the handle is dragged. */
.ipreview{
  position:relative;display:grid;
  min-height:6.4em;
  padding:1rem 1.05rem 1.9rem;
  background:rgba(43,39,36,.055);
  border-radius:12px;
}
.ipreview-l{
  grid-area:1/1;margin:0;
  font-family:var(--display);font-size:1.06rem;line-height:1.5;
  color:var(--ink);
  opacity:0;transition:opacity .42s ease;
}
.ipreview-l.is-on{opacity:1}
.ipreview-tag{
  position:absolute;left:1.05rem;bottom:.7rem;
  font-size:.65rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--warm-gray);
}
@media (prefers-reduced-motion:reduce){
  .itone-handle{transition:none}
  .ipreview-l{transition:none}
}

/* Consents (§10) and the rush offer (§11). */
.icheck{
  display:flex;gap:.75rem;align-items:flex-start;
  padding:.75rem 0;min-height:44px;cursor:pointer;
  font-size:.98rem;line-height:1.5;color:var(--ink);
}
.icheck input{
  flex:none;width:22px;height:22px;margin-top:.15rem;accent-color:var(--amber);
}
.irush{
  margin-top:.2rem;padding:.9rem 1rem;
  background:rgba(184,134,59,.14);
  border:1px solid rgba(184,134,59,.4);
  border-radius:12px;
}
.irush-q{margin:0 0 .2rem;font-size:1rem;line-height:1.45;color:var(--ink)}

.iprivacy{
  margin:.4rem 0 0;font-size:.9rem;line-height:1.55;color:var(--warm-gray);
}
.istatus{margin:.2rem 0 0;font-size:.95rem;line-height:1.5;color:var(--warm-gray);min-height:1.2em}
.istatus.err{color:var(--ink)}
.idone{text-align:left}

@media (min-width:620px){
  .iq{padding:1.6rem 1.8rem 1.9rem}
  .icards{grid-template-columns:repeat(2,1fr)}
  .icards[role="radiogroup"] > .icard:only-child{grid-column:1/-1}
  .ibtn{width:auto;justify-self:start;padding-inline:2.2rem}
  .itone-rail{margin:0 14px}
}