/* ===========================================================================
   RECLAIMING THE KINGDOM OF YOU · Meir Ezra live in Toronto, November 2026
   tor.css v4, 27 Sep 2026 late (round 4, ONE idea: "a day in his room", see
   toronto-seminar/CONCEPT-R4.md): the white kept as PAPER laid over a living
   world (the dusk city, the room), the pinned day in the room, the window in
   "is this you", the floating ticket bar. v3 (round 3): the hero rebuilt to
   five things, the guarantee set in type, the timeline, the motion tools.
   Nothing here comes from the Money Manual's mm.css.

   THE SKIN: Toronto in November, bright.
     paper   snow-white page base, the page reads light-first
     navy    a deep night navy (never black) for the dark bands
     red     maple red, THE action colour: every button, the ticker, the
             guarantee band
     amber   maple gold for labels, the price, the seal
     ice     lake / ice blue for the one bright band (what you walk out with)
   TYPE (round 3, Zman: "we always stay with these boring static fonts"):
     Fraunces (display: a soft old-style serif with optical sizes and a real
     italic, set with SOFT 30) over Bricolage Grotesque (body, optical sizes
     too). Picked by a rendered tasting of eight pairs on the real words
     (shots-r3/font-tasting.png); Frank Ruhl Libre was the runner-up.
   RHYTHM (round 5 order, his, 28 Sep): hero (light, the whole photo behind) · the
     days (paper-2, the timeline) · the room (navy) · who (paper, the sheet over the
     room) · their words (ice) · is this you (paper-2) · walk out with (paper, navy
     cards) · guarantee (red) · your seat (paper-2) · honest answers (paper) · close
     (navy).
   =========================================================================== */

:root{
  --paper:#FBFAF7; --paper-2:#F3F1EB; --snow:#FFFFFF;
  --navy:#0F1B33; --navy-2:#162543; --navy-3:#1E3159;
  --text:#131C2E; --text-2:rgba(19,28,46,.74); --text-3:rgba(19,28,46,.56);
  --on-navy:#F7F5F0; --on-navy-2:rgba(247,245,240,.76); --on-navy-3:rgba(247,245,240,.54);
  --red:#C8102E; --red-deep:#A30C25; --red-soft:rgba(200,16,46,.10);
  --amber:#F0A202; --amber-deep:#A8680A; --amber-soft:#FFE7B3;
  --ice:#DCEFF8; --ice-2:#EDF6FB; --lake:#1F6FB2; --lake-deep:#0E4C7E;
  --line:rgba(19,28,46,.12); --line-navy:rgba(247,245,240,.16);
  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --body:'Bricolage Grotesque',system-ui,-apple-system,'Segoe UI',sans-serif;
  --maxw:1340px; --gutter:clamp(20px,4vw,56px); --bar:0px;
  --secpad:clamp(64px,8vw,120px);
  --r-card:18px; --r-btn:10px; --r-sheet:clamp(22px,2.6vw,40px);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--text);font-family:var(--body);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow-x:clip;font-variation-settings:"SOFT" 30;font-optical-sizing:auto}
/* Lenis (vendor/lenis.min.js) wants these; lenis.css inlined */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-smooth iframe{pointer-events:none}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
button{font:inherit;color:inherit}
b,strong{font-weight:700}
::selection{background:var(--amber-soft);color:var(--navy)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.wrap.narrow{max-width:min(var(--maxw),900px)}
.section{padding:var(--secpad) 0;position:relative}
.sz-small{--secpad:clamp(40px,5vw,72px)}
.sz-large{--secpad:clamp(88px,11vw,160px)}

/* the bands */
.band-paper{background:var(--paper-2)}
.band-ice{background:var(--paper-2)}
.band-accent{background:var(--red);color:#fff}
.roomfilm,.close,.foot{background:var(--navy);color:var(--on-navy)}
.proof{background:var(--ice)}

/* ---------- type ---------- */
.eyebrow,.mono-tag,.hero-kick{font:700 12px/1.3 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--amber-deep)}
.roomfilm .mono-tag,.close .eyebrow{color:var(--amber)}
.proof .eyebrow{color:var(--lake-deep)}
.band-ice .eyebrow{color:var(--amber-deep)}
.band-accent .mono-tag{color:rgba(255,255,255,.88)}
h2.big,.statement{font-family:var(--display);font-weight:600;font-size:clamp(38px,5.2vw,68px);line-height:.98;letter-spacing:-.022em;
  color:var(--navy);margin-top:14px;max-width:18ch;font-optical-sizing:auto}
.roomfilm .statement,.close h2{color:var(--on-navy)}
.lede{margin-top:18px;font-size:clamp(17px,1.55vw,20px);line-height:1.55;color:var(--text-2);max-width:56ch}
.roomfilm .lede{color:var(--on-navy-2)}

/* ---------- buttons: maple red is the one action colour ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;font-family:var(--body);font-weight:700;font-size:16px;
  line-height:1;letter-spacing:-.005em;padding:17px 26px;border-radius:var(--r-btn);border:0;cursor:pointer;white-space:nowrap;
  transition:transform .18s ease,background .18s ease,box-shadow .18s ease}
.btn-red{background:var(--red);color:#fff;box-shadow:0 12px 26px -14px rgba(200,16,46,.7)}
.btn-red:hover{background:var(--red-deep);transform:translateY(-1px);box-shadow:0 16px 30px -14px rgba(200,16,46,.8)}
.btn-red:active{transform:translateY(0)}
.btn-dark{background:var(--navy);color:#fff;box-shadow:0 12px 26px -14px rgba(15,27,51,.7)}
.btn-dark:hover{background:var(--navy-3);transform:translateY(-1px)}
.btn-lg{padding:20px 32px;font-size:17px}
.btn-sm{padding:12px 18px;font-size:14px;border-radius:8px}
.btn.wide{width:100%}
.btn em{font-style:normal;font-weight:600;opacity:.85;padding-left:12px;border-left:1px solid rgba(255,255,255,.35)}
.btn:focus-visible{outline:3px solid var(--amber);outline-offset:2px}

/* ---------- ticker + nav ---------- */
.ticker{background:var(--red);color:#fff;font:600 12.5px/1.3 var(--body);letter-spacing:.02em}
.ticker-in{max-width:var(--maxw);margin:0 auto;padding:10px var(--gutter);display:flex;align-items:center;justify-content:center;gap:10px;overflow:hidden}
.dot{width:7px;height:7px;border-radius:50%;background:#fff;flex:0 0 7px;animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.78)}}
@media (max-width:640px){
  .ticker-in{justify-content:flex-start}
  .ticker-in span:last-child{white-space:nowrap;animation:tick 22s linear infinite}
  @keyframes tick{from{transform:translateX(100vw)}to{transform:translateX(-100%)}}
}

.nav{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:28px;padding:14px var(--gutter);
  background:rgba(251,250,247,0);transition:background .25s ease,box-shadow .25s ease}
.nav.stuck{background:rgba(251,250,247,.94);box-shadow:0 1px 0 var(--line)}
.nav-brand img{height:34px;width:auto}
.nav-links{display:flex;gap:26px;margin-left:auto;font-weight:600;font-size:14px;color:var(--text-2)}
.nav-links a:hover{color:var(--red)}
.nav>.btn{margin-left:auto}
.nav-links+.btn{margin-left:0}
.nav-prog{position:absolute;left:0;bottom:-1px;height:2px;width:var(--prog,0%);background:var(--amber);opacity:0;transition:opacity .3s ease}
.nav.stuck .nav-prog{opacity:1}
@media (max-width:900px){.nav-links{display:none}.nav-brand img{height:28px}}

/* ---------- HERO, round 4 (27 Sep late): the whole photo in the back (his call, round 3b), but now a PICTURE, not fog.
   Round 3b framed almost only sky and graded it high-key, so it read as an empty void. Round 4: the dusk's own colour
   (compose_hero_r4.py), the lit city along the lower edge, the tower rising out of the paper beside Meir's head. Paper
   sits only under the words (.hero-scrim, eased so the tower emerges from it), no haze over Meir, and the days band rises
   over the city as a paper sheet (.sheet-top), which also hides the cut-out's flat bottom. Layers still drift (--sy/--my). ---------- */
.hero{position:relative;overflow:hidden;background:var(--paper);isolation:isolate;display:flex;align-items:center;
  min-height:min(780px,calc(100svh - 102px));padding:clamp(28px,4vh,48px) 0 calc(clamp(56px,7vh,88px) + var(--r-sheet))}
.hero-media{position:absolute;inset:0;z-index:0;overflow:hidden;--sy:0px;--my:0px;background:#C9D2DD}
/* the tower stands at 50.3% of the photo; the photo is 110px wider than the hero and pulled left, so the tower lands at
   (centre - ~50px) at every desktop width: between the words' end and Meir's head */
.hero-sky{position:absolute;left:-108px;top:-8%;width:calc(100% + 110px);max-width:none;height:116%;object-fit:cover;object-position:50% 34%;z-index:0;translate:0 var(--sy)}
.hero-shade{display:none}
/* Meir is placed in the CONTENT box (like the words and the card), so he stays between them at every width */
.hero-stage{position:absolute;top:0;bottom:0;left:0;right:0;max-width:var(--maxw);margin:0 auto;z-index:2}
.hero-meir{position:absolute;left:58.2%;bottom:-4%;height:106%;width:auto;max-width:none;z-index:2;transform:translateX(-40.6%);translate:0 var(--my);
  filter:drop-shadow(0 30px 40px rgba(15,27,51,.28));
  /* the portrait was shot with his right shoulder out of frame, so the cut-out ends in a straight edge: let it fall away */
  -webkit-mask-image:linear-gradient(90deg,#000 74%,rgba(0,0,0,.6) 88%,rgba(0,0,0,0) 99%);mask-image:linear-gradient(90deg,#000 74%,rgba(0,0,0,.6) 88%,rgba(0,0,0,0) 99%)}
.hero-snow{position:absolute;top:0;bottom:0;left:44%;right:0;z-index:3;pointer-events:none}
.hero-snow canvas{display:block;width:100%!important;height:100%!important}
/* round 4b (his note on the pane): the photo is the full background, no paper wash over it. Only a slight frosted patch
   sits behind the words: .hero-soft is a pre-blurred copy of the same photo, laid exactly over it (same box, same drift),
   masked to an oval around the words, with a thin paper tint so the navy type reads. */
.hero-soft{z-index:1;-webkit-mask-image:radial-gradient(38% 50% at 26% 46%,#000 0%,#000 46%,rgba(0,0,0,.55) 70%,rgba(0,0,0,0) 100%);
  mask-image:radial-gradient(38% 50% at 26% 46%,#000 0%,#000 46%,rgba(0,0,0,.55) 70%,rgba(0,0,0,0) 100%)}
.hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(34% 46% at 25% 45%,rgba(251,250,247,.62) 0%,rgba(251,250,247,.5) 50%,rgba(251,250,247,0) 100%)}

.hero-body{position:relative;z-index:5;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);
  display:grid;grid-template-columns:minmax(0,1fr) clamp(340px,27vw,400px);grid-template-areas:"copy card" "dates card";
  grid-template-rows:auto 1fr;column-gap:clamp(32px,5vw,96px);align-items:start;align-self:stretch;padding-top:clamp(8px,3vh,32px)}
.hero-copy{grid-area:copy;align-self:start}
.hero-dates{grid-area:dates;align-self:start;margin:clamp(18px,2.6vh,28px) 0 0;font:600 15.5px/1.5 var(--body);color:var(--text-2)}
.hero-dates-venue{display:block;margin-top:3px;font-weight:500;color:var(--text-3)}
.hero-card{grid-area:card;align-self:end;margin-bottom:-22px}
.hero-card .ticket{box-shadow:0 44px 90px -40px rgba(15,27,51,.75),0 0 0 1px rgba(255,255,255,.06)}

.hero-kick{margin:0}
.hero-title{font-family:var(--display);font-weight:600;font-size:clamp(44px,4.9vw,70px);line-height:.96;letter-spacing:-.025em;
  color:var(--navy);margin:14px 0 0}
.hero-title span{display:block}
.hero-tag{margin:16px 0 0;font-family:var(--display);font-style:italic;font-weight:500;font-size:clamp(19px,1.6vw,24px);line-height:1.3;color:var(--text-2);max-width:30ch}
.hero-sub{margin:16px 0 0;font-size:clamp(16px,1.25vw,18px);line-height:1.55;color:var(--text-2);max-width:44ch}

.hero-card .ticket{padding:clamp(22px,2vw,28px)}
.hero-card .ticket li{font-size:13.5px;margin-top:7px}
.hero-card .ticket ul{margin-top:14px;padding-bottom:14px}
.hero-card .ticket .btn{margin-top:16px}

/* ---------- PAPER SHEETS (round 4): wherever the paper meets the world (the city, the room), the paper has an edge and
   casts a shadow, so the white reads as a page laid over something alive, never as a void beside it ---------- */
.sheet-top{position:relative;z-index:3;margin-top:calc(-1 * var(--r-sheet));border-radius:var(--r-sheet) var(--r-sheet) 0 0;
  box-shadow:0 -26px 50px -30px rgba(15,27,51,.42),0 -1px 0 rgba(255,255,255,.7)}
.sheet-bottom{position:relative;z-index:3;margin-bottom:calc(-1 * var(--r-sheet));border-radius:0 0 var(--r-sheet) var(--r-sheet);
  box-shadow:0 30px 56px -30px rgba(15,27,51,.5)}
.sheet-top.sheet-bottom{border-radius:var(--r-sheet)}
.sheet-top.sheet-bottom{box-shadow:0 -26px 50px -30px rgba(15,27,51,.42),0 30px 56px -30px rgba(15,27,51,.5)}
.under-top{padding-top:calc(var(--secpad) + var(--r-sheet))}
.under-bottom{padding-bottom:calc(var(--secpad) + var(--r-sheet))}

/* short laptops: the whole card stays inside the first screen */
@media (min-width:1000px) and (max-height:820px){
  .hero{padding:20px 0 calc(48px + var(--r-sheet))}
  .hero-card{margin-bottom:-28px}
  .hero-card .ticket{padding:20px 22px}
  .hero-card .t-name{font-size:22px;margin-top:0}
  .hero-card .t-price{margin-top:6px}
  .hero-card .t-price span{font-size:44px}
  .hero-card .ticket ul{margin-top:12px;padding-bottom:12px}
  .hero-card .ticket li{font-size:13px;margin-top:5px;line-height:1.4}
  .hero-card .ticket .btn{margin-top:12px;padding:15px 22px}
  .hero-card .t-next{margin-top:9px}
  .hero-title{font-size:clamp(42px,4.4vw,60px)}
  .hero-sub{font-size:16px}
}

/* under 1000px: the picture as a strip at the top (his face), the words start under his chin, then the card, then the dates */
@media (max-width:999px){
  .hero{display:block;min-height:0;padding:0 0 calc(40px + var(--r-sheet))}
  .hero-media{height:clamp(300px,42vw,460px);inset:auto 0 auto 0;top:0}
  .hero-media::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
    background:linear-gradient(180deg,rgba(251,250,247,0) 38%,rgba(251,250,247,.74) 62%,rgba(251,250,247,.94) 80%,var(--paper) 100%)}
  .hero-scrim,.hero-soft{display:none}
  .hero-sky{left:0;width:100%;top:0;height:175%;object-position:70% 0%}
  .hero-card{align-self:auto;margin-bottom:0}
  .hero-meir{left:60%;height:100%;bottom:-3%}
  .hero-snow{left:0}
  .hero-body{display:flex;flex-direction:column;padding-top:clamp(190px,30vw,340px)}
  .hero-copy{order:0;max-width:56ch}
  .hero-card{order:1;margin-top:22px;width:100%;max-width:520px}
  .hero-card .ticket{padding:20px 20px 18px}
  .hero-dates{order:2;margin:18px 0 0}
}
@media (max-width:640px){
  /* the face strip at the top, the kicker right under his chin, the card's button inside the first screen */
  .hero-media{height:270px}
  .hero-body{padding-top:150px}
  .hero-title{font-size:clamp(36px,10vw,44px);margin-top:12px}
  .hero-tag{margin-top:10px;font-size:18px}
  .hero-sub{font-size:15px;line-height:1.5;margin-top:10px}
  .hero-card{margin-top:16px}
  .hero-card .ticket{padding:18px 18px 16px}
  .hero-card .t-tag{display:none}
  .hero-card .t-name{font-size:21px;margin-top:0}
  .hero-card .t-price{margin-top:6px}
  .hero-card .t-price span{font-size:40px}
  .hero-card .ticket ul{margin-top:10px;padding-bottom:12px}
  .hero-card .ticket li{font-size:12.5px;line-height:1.38}
  .hero-card .ticket li+li{margin-top:4px}
  .hero-card .ticket .btn{margin-top:12px}
  .hero-dates{font-size:14px;margin-top:14px}
}
@media (max-width:400px){.hero-media{height:250px}.hero-body{padding-top:132px}.hero-title{font-size:35px}}

/* ---------- the sections slide in and out (his ask, 27 Sep night): tor.js scrubs each section's direct children up
   into place as the section arrives and lifts them away as it leaves; the band colour itself never moves ---------- */
.section>*,.close>*{translate:0 var(--out,0px)}

/* ---------- THE TICKET (rendered by tor.js into every [data-tickets]) ---------- */
.ticket{position:relative;background:var(--navy);color:var(--on-navy);border-radius:var(--r-card);padding:clamp(24px,2.4vw,34px);
  box-shadow:0 34px 70px -34px rgba(15,27,51,.55),inset 0 0 0 1px rgba(255,255,255,.05);overflow:hidden}
.ticket::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,var(--red) 0%,var(--amber) 100%)}
.ticket header{display:block}
.t-tag{display:flex}
.t-loc{display:inline-flex;align-items:center;gap:6px;font:700 11px/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--amber)}
.t-loc svg{width:12px;height:12px;fill:var(--amber)}
.t-name{font-family:var(--display);font-weight:600;font-size:clamp(22px,1.7vw,27px);line-height:1.1;letter-spacing:-.01em;margin-top:12px;color:var(--on-navy)}
.t-price{margin-top:10px;display:flex;align-items:baseline;gap:8px}
.t-price span{font-family:var(--display);font-weight:700;font-size:clamp(46px,3.6vw,58px);line-height:1;letter-spacing:-.03em;color:var(--amber)}
.t-price small{font:700 12px/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--on-navy-2)}
.t-blurb{margin-top:14px;font-size:15px;line-height:1.5;color:var(--on-navy-2)}
.ticket ul{margin-top:16px;padding-bottom:16px;border-bottom:1px dashed rgba(247,245,240,.24)}
.ticket li{position:relative;padding-left:26px;font-size:14.5px;line-height:1.45;color:var(--on-navy-2)}
.ticket li+li{margin-top:8px}
.ticket li b{color:var(--on-navy);font-weight:600}
.ticket li::before{content:"";position:absolute;left:3px;top:.5em;width:9px;height:5px;border-left:2px solid var(--amber);border-bottom:2px solid var(--amber);transform:rotate(-45deg)}
.ticket .btn{margin-top:18px}
.t-next{margin-top:12px;text-align:center;font-size:12.5px;line-height:1.5;color:var(--on-navy-3)}

/* ---------- THE DAYS: one five-node timeline on paper-2, drawn by GSAP DrawSVG when it scrolls in ---------- */
.days{padding-top:clamp(56px,7vw,96px)}
.lede-2{margin-top:10px}
.tl{position:relative;margin-top:clamp(40px,5vw,72px)}
.tl-rail{position:absolute;display:block;overflow:visible;pointer-events:none}
.tl-rail-h{left:9px;top:9px;width:calc(80% + 16px);height:2px}
.tl-rail-v{display:none}
.tl-line{stroke:var(--amber);stroke-width:2;stroke-linecap:round;fill:none}
/* round 6: the light along the line (the one idea, NOTES.md "Round 6"). Everything below is at its FINISHED state by
   default, so no JS and reduced motion show the timeline complete and still; tor.js sets the start state and plays it.
   Strokes only, never a filter on a wrapper. No vector-effect on anything that draws (the dash would stop short). */
.tl-track{stroke:rgba(19,28,46,.13);stroke-width:2;fill:none}
.tl-glow{stroke:var(--amber);stroke-width:9;stroke-linecap:round;fill:none;opacity:.13}
/* the sheen is a soft warm bloom that swells the line as it passes (a pale streak read as a GAP in the line on paper) */
.tl-sheen{stroke:#FFB31F;stroke-width:10;stroke-linecap:round;fill:none;opacity:0}
.tl-ring{position:absolute;left:-9px;top:-9px;width:36px;height:36px;overflow:visible;pointer-events:none;transform:rotate(-90deg)}
.tl-ring circle{fill:none;stroke:var(--amber);stroke-width:1.5;opacity:.55}
.tl-day.is-book .tl-ring circle{stroke:var(--lake);opacity:.5}
.tl-ripple{position:absolute;left:-9px;top:-9px;width:36px;height:36px;border-radius:50%;border:1.5px solid var(--amber);opacity:0;pointer-events:none}
.tl-day.is-book .tl-ripple{border-color:var(--lake)}
.tl-head{position:absolute;left:0;top:0;z-index:2;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#FFF8E6;opacity:0;pointer-events:none;
  box-shadow:0 0 0 2px rgba(240,162,2,.6),0 0 12px 3px rgba(240,162,2,.5),0 0 30px 9px rgba(240,162,2,.2)}
.tl-head.is-cool{box-shadow:0 0 0 2px rgba(31,111,178,.55),0 0 12px 3px rgba(31,111,178,.4),0 0 30px 9px rgba(31,111,178,.16)}
/* the comet tail: it grows while the light travels and folds away while it rests on a day (--tail, 0 to 1) */
.tl-head::before{content:"";position:absolute;right:50%;top:50%;width:calc(var(--tail,0) * 76px);height:2px;margin-top:-1px;border-radius:2px;
  background:linear-gradient(90deg,rgba(240,162,2,0),rgba(255,226,160,.95))}
.tl.is-vertical .tl-head::before{right:auto;top:auto;left:50%;bottom:50%;width:2px;height:calc(var(--tail,0) * 56px);margin:0 0 0 -1px;
  background:linear-gradient(180deg,rgba(240,162,2,0),rgba(255,226,160,.95))}
.tl-days{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:20px}
.tl-day{position:relative;padding-top:38px;min-width:0}
.tl-node{position:absolute;left:0;top:0;width:18px;height:18px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 5px rgba(240,162,2,.18)}
.tl-day.is-book .tl-node{width:14px;height:14px;left:2px;top:2px;background:var(--paper-2);border:2px solid var(--lake);box-shadow:none}
.tl-when span{display:block;font:700 11px/1.3 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--amber-deep)}
.tl-day.is-book .tl-when span{color:var(--lake-deep)}
.tl-when b{display:block;margin-top:7px;font-family:var(--display);font-weight:600;font-size:clamp(22px,2vw,30px);line-height:1.05;letter-spacing:-.015em;color:var(--navy)}
.tl-day.is-book .tl-when b{font-size:clamp(19px,1.6vw,24px);font-weight:500;color:var(--text-2)}
.tl-what{margin-top:10px;font-size:14.5px;line-height:1.5;color:var(--text-2);max-width:26ch}
.tl-what b{color:var(--navy);font-weight:600}
.tl-day.is-book .tl-what{color:var(--text-3)}
.tl-day.is-book .tl-what b{color:var(--text-2)}
.days-facts{margin-top:clamp(44px,5.5vw,72px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.days-facts li{border-top:1px solid var(--line);padding-top:16px;min-width:0}
.days-facts b{display:block;font:700 11px/1.3 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--amber-deep);margin-bottom:8px}
.days-facts span{font-size:14.5px;line-height:1.6;color:var(--text-2)}
.days-facts a{color:var(--navy);border-bottom:1px solid rgba(200,16,46,.5);font-weight:600}
/* round 6: the airport to the hotel. It grows out of "Getting there": the words on the left, the two airports and the one
   button on the right. The airports are real radio buttons (arrow keys move between them), every target 44 px or more. */
.fly{margin-top:clamp(40px,5vw,64px);padding:clamp(24px,2.8vw,40px);border-radius:var(--r-card);background:var(--paper);
  border:1px solid var(--line);box-shadow:0 30px 60px -44px rgba(15,27,51,.35);
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:22px clamp(28px,4.5vw,72px);align-items:center}
.fly-copy h3{margin-top:10px;font-family:var(--display);font-weight:600;font-size:clamp(24px,2.3vw,32px);line-height:1.08;letter-spacing:-.015em;color:var(--navy)}
.fly-copy p:last-child{margin-top:12px;font-size:15.5px;line-height:1.55;color:var(--text-2);max-width:44ch}
.fly-pick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.fly-pick[hidden]{display:none}
.fly-opt{position:relative;display:flex;align-items:center;gap:13px;min-height:68px;padding:12px 16px;border-radius:12px;cursor:pointer;
  background:var(--paper-2);border:1.5px solid var(--line);transition:border-color .2s ease,background-color .2s ease,box-shadow .2s ease}
.fly-opt:hover{border-color:rgba(15,27,51,.35)}
.fly-opt input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.fly-dot{position:relative;flex:0 0 auto;width:20px;height:20px;border-radius:50%;border:2px solid rgba(15,27,51,.35);transition:border-color .2s ease}
.fly-dot::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--navy);transform:scale(0);transition:transform .2s ease}
.fly-opt span{min-width:0}
.fly-opt b{display:block;font-weight:700;font-size:15.5px;line-height:1.25;color:var(--navy)}
.fly-opt small{display:block;margin-top:3px;font-size:13.5px;line-height:1.35;color:var(--text-3)}
.fly-opt:has(input:checked){background:var(--snow);border-color:var(--navy);box-shadow:0 14px 28px -20px rgba(15,27,51,.55)}
.fly-opt:has(input:checked) .fly-dot{border-color:var(--navy)}
.fly-opt:has(input:checked) .fly-dot::after{transform:scale(1)}
.fly-opt:has(input:focus-visible){outline:3px solid var(--amber);outline-offset:2px}
/* navy, not red: red stays the one buying colour on this page (Take your seat) */
.fly-go{margin-top:16px;width:100%}
.fly-go svg{flex:0 0 auto}
.fly-offer{margin-top:12px;font-size:14.5px;line-height:1.5;color:var(--text-2)}
.fly-offer a{color:var(--navy);font-weight:600;border-bottom:1px solid rgba(200,16,46,.5)}
@media (max-width:900px){.fly{grid-template-columns:1fr}}
@media (max-width:520px){.fly-pick{grid-template-columns:1fr}}
@media (max-width:860px){
  /* the timeline stands up: the rail runs down the left, the days stack */
  .tl-days{display:block}
  .tl-day{padding:0 0 0 36px}
  .tl-day+.tl-day{margin-top:26px}
  .tl-node{top:5px}
  .tl-day.is-book .tl-node{top:7px}
  .tl-ring,.tl-ripple{top:-4px}
  .tl-rail-h{display:none}
  .tl-rail-v{display:block;left:8px;top:14px;width:2px;height:var(--tlv,calc(100% - 40px))}
  .tl-what{max-width:52ch}
}
@media (max-width:760px){.days-facts{grid-template-columns:1fr;gap:14px}}

/* ---------- THEIR WORDS: proof on navy ---------- */
/* round 5: Zman's pane showed this rail EMPTY except its bottom strip (the names), the gap ending exactly one 256 px raster
   tile below the rail's top: the compositor never painted the drifting track's first tile row. The edge fade was a CSS
   mask, which makes the whole animated track render through an extra offscreen surface; it is now two plain gradient
   covers in the band's own colour (same look), and both drifting tracks pause while off screen (tor.js, .is-off). */
.vid-rail{position:relative;margin-top:clamp(32px,4vw,52px);overflow:hidden}
.vid-rail::before,.vid-rail::after{content:"";position:absolute;top:0;bottom:0;width:6%;z-index:2;pointer-events:none}
.vid-rail::before{left:0;background:linear-gradient(90deg,var(--ice),rgba(220,239,248,0))}
.vid-rail::after{right:0;background:linear-gradient(270deg,var(--ice),rgba(220,239,248,0))}
.vid-track{display:flex;width:max-content;animation:drift 90s linear infinite}
.vid-track:hover,.vid-track.is-holding,.vid-track.is-off{animation-play-state:paused}
/* round 6 (Zman on his phone, 28 Sep: the stories "should auto scroll and also be scrollable on mobile"): on touch screens
   the rail is a real horizontal scroller a finger can swipe; tor.js drifts it by scrolling (not the CSS animation), and
   the first card lines up with the words above. The edge fades would scroll away with the content, so they go here. */
.vid-rail.is-swipe{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.vid-rail.is-swipe::-webkit-scrollbar{display:none}
.vid-rail.is-swipe::before,.vid-rail.is-swipe::after{display:none}
.vid-rail.is-swipe .vid-track{animation:none;padding-left:var(--gutter)}
@keyframes drift{to{transform:translateX(-50%)}}
.vid{width:clamp(260px,26vw,360px);margin-right:18px;flex:0 0 auto}
.vid-thumb{position:relative;display:block;width:100%;aspect-ratio:16/9;border:0;padding:0;border-radius:12px;overflow:hidden;background:var(--navy-2);cursor:pointer;
  box-shadow:0 22px 40px -24px rgba(14,76,126,.55)}
.vid-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.vid-thumb:hover img{transform:scale(1.04)}
.play{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:var(--red);box-shadow:0 10px 24px -8px rgba(0,0,0,.6)}
.play::after{content:"";position:absolute;left:21px;top:17px;border-left:16px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent}
.vid iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:12px;display:block}
.vid-quote{margin-top:12px;font-size:15px;line-height:1.45;color:var(--navy)}
.vid-by{margin-top:6px;font:700 11px/1.3 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--red)}
.wins{margin-top:clamp(56px,7vw,92px)}
.wins-head h3{font-family:var(--display);font-weight:600;font-size:clamp(26px,2.8vw,38px);line-height:1.05;letter-spacing:-.015em;color:var(--navy)}
.wins-head p{margin-top:10px;font-size:15.5px;color:var(--text-2);max-width:56ch}
/* round 5 (Zman, 28 Sep: "so big, make it a bit smaller"): four across on a laptop (was three), ~40% less height; the
   figure order in words.html is set so the four columns end level. Three across only on narrow laptops. */
.wins-grid{margin-top:clamp(22px,2.6vw,32px);columns:4;column-gap:20px}
.wins-grid figure{break-inside:avoid;margin:0 0 20px}
.wins-grid img{width:100%;height:auto;border-radius:12px;border:1px solid rgba(14,76,126,.12);box-shadow:0 22px 40px -24px rgba(14,76,126,.5)}
@media (max-width:1179px){.wins-grid{columns:3}}
@media (max-width:980px){.wins-grid{columns:2}}
@media (max-width:560px){.wins-grid{columns:1}}
.inline-cta{margin-top:clamp(40px,5vw,60px);display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px}
.inline-cta p{font-size:14.5px;line-height:1.5;color:var(--text-2);max-width:44ch}
.proof .inline-cta p{color:var(--text-2)}
@media (max-width:560px){.inline-cta .btn{width:100%}}

/* ---------- IS THIS YOU: the store copy, word for word. Round 6 (Zman, 28 Sep): the window at the right is gone, so the
   words stand alone, centred, at every width (the phone cut he already liked, now everywhere). ---------- */
.you-grid{display:block;text-align:center}
.you-words{min-width:0;max-width:880px;margin-inline:auto}
.you-lines{margin-top:18px}
.you-lines li{font-family:var(--display);font-weight:600;font-size:clamp(28px,3.6vw,52px);line-height:1.04;letter-spacing:-.02em;color:var(--navy);text-wrap:balance;max-width:22ch;margin-inline:auto}
.you-lines li+li{margin-top:14px}
.you-lines li:nth-child(2){color:var(--text-3)}
.you-lines li:nth-child(3){color:var(--lake-deep)}
.pull{margin:clamp(30px,4vw,48px) auto 0;font-family:var(--display);font-style:italic;font-weight:500;font-size:clamp(26px,3.4vw,46px);line-height:1.1;color:var(--red);max-width:20ch}
.you-copy{margin:clamp(24px,3vw,36px) auto 0;max-width:48ch}
.you-copy p{font-size:clamp(16.5px,1.4vw,19px);line-height:1.6;color:var(--text-2)}
.you-copy p+p{margin-top:14px}
.you-copy b{display:block;margin-top:6px;font-family:var(--display);font-weight:700;font-size:clamp(40px,5vw,64px);line-height:1;letter-spacing:-.02em;color:var(--navy)}

/* ---------- WHAT YOU WALK OUT WITH: the one bright band, ice ---------- */
.chapters{margin-top:clamp(26px,3vw,40px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;counter-reset:ch}
.chapters li{background:var(--navy);color:var(--on-navy);border-radius:16px;padding:24px 24px 26px;min-width:0;box-shadow:0 26px 50px -32px rgba(15,27,51,.55);transition:transform .25s ease,box-shadow .25s ease}
.chapters li:hover{transform:translateY(-3px);box-shadow:0 30px 56px -30px rgba(15,27,51,.7)}
.chapters .num{display:inline-block;font-family:var(--display);font-weight:600;font-size:15px;color:var(--amber);padding-bottom:6px;border-bottom:2px solid var(--red)}
.chapters h3{margin-top:14px;font-family:var(--display);font-weight:600;font-size:clamp(19px,1.55vw,23px);line-height:1.25;letter-spacing:-.008em;color:var(--on-navy)}
@media (max-width:900px){.chapters{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.chapters{grid-template-columns:1fr;gap:12px}.chapters li{padding:20px}}

/* ---------- THE ROOM, round 4: A DAY IN HIS ROOM (the page's one idea). The base below is the phone / reduced-motion
   page: heading, the white phone, the ten hours as a list, the ticket. html.day-live (desktop, motion) turns it into the
   pinned day: the stage sticks, the scroll walks the hours, the room's light crossfades.
   Round 6 (Zman, 28 Sep, on the pane): the hours are the STACKED LIST on desktop too ("this time, this is what happens"),
   the lit row walking down the day with the scroll; the big clock is gone. ---------- */
.day{position:relative}
.day-stage{position:relative}
.day-glow{display:none}
.day-grid{display:grid;grid-template-columns:minmax(0,1fr) clamp(280px,25vw,340px);grid-template-areas:"head phone" "list phone" "cta phone";
  column-gap:clamp(36px,6vw,96px);align-items:center;align-content:center}
.day-head{grid-area:head}
.day-list{grid-area:list;margin-top:clamp(24px,3vw,34px);border-top:1px solid var(--line-navy);max-width:560px}
.day-list li{display:grid;grid-template-columns:5.4em minmax(0,1fr);gap:14px;padding:9px 0;border-bottom:1px solid var(--line-navy);
  font-size:15px;line-height:1.4;color:var(--on-navy-2);transition:color .3s ease}
.day-list b{font-family:var(--display);font-weight:600;color:var(--on-navy);font-variant-numeric:tabular-nums;white-space:nowrap;transition:color .3s ease}
.day-list li.is-now{color:var(--on-navy)}
.day-list li.is-now b{color:var(--amber)}
.day-cta{grid-area:cta;margin-top:clamp(24px,3vw,34px);display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.day-cta .film-cap{margin:0;max-width:34ch}
.phone-stage{grid-area:phone}

@media (min-width:1000px){
  /* the pinned day: nine hours of scroll after the first, the stage stuck under the nav */
  html.day-live .roomfilm.under-top{padding-top:calc(clamp(40px,5vw,72px) + var(--r-sheet))}
  html.day-live .day{height:calc(100vh + 9 * 36vh)}
  html.day-live .day-stage{position:sticky;top:0;height:100vh;display:flex;align-items:center;padding-top:60px;overflow:hidden}
  html.day-live .day-glow{display:block;position:absolute;inset:0;pointer-events:none;
    /* the light pools around the phone and fades out before the stage's own edges (so no line shows as the stage arrives
       or leaves): a radial pool, intersected with a top/bottom fade */
    -webkit-mask-image:radial-gradient(48% 60% at 77% 53%,#000 0%,rgba(0,0,0,.78) 38%,rgba(0,0,0,.3) 66%,rgba(0,0,0,0) 100%),linear-gradient(180deg,transparent 0%,#000 16%,#000 84%,transparent 100%);
    -webkit-mask-composite:source-in;
    mask-image:radial-gradient(48% 60% at 77% 53%,#000 0%,rgba(0,0,0,.78) 38%,rgba(0,0,0,.3) 66%,rgba(0,0,0,0) 100%),linear-gradient(180deg,transparent 0%,#000 16%,#000 84%,transparent 100%);
    mask-composite:intersect}
  html.day-live .day-glow i{position:absolute;inset:-8%;background-size:cover;background-position:center;opacity:0;transition:opacity 1.2s ease}
  html.day-live .day-glow i.is-on{opacity:1}
  html.day-live .day-grid{position:relative;z-index:1;width:100%;
    grid-template-columns:minmax(0,1fr) min(25vw,340px,calc((100vh - 150px) * .4737))}
  html.day-live .day-list{margin-top:clamp(20px,3vh,32px)}
}
@media (min-width:1000px) and (max-height:820px){
  html.day-live .roomfilm .statement{font-size:clamp(38px,4.4vw,58px)}
  html.day-live .roomfilm .lede{font-size:17px;margin-top:12px}
  html.day-live .day-list li{padding:6px 0;font-size:14px;line-height:1.35}
  html.day-live .day-cta{margin-top:22px}
}
.film-cap{margin-top:16px;font-size:13px;line-height:1.5;color:var(--on-navy-3)}
.phone-stage{width:100%;justify-self:end;perspective:1400px}
.phone{position:relative;width:100%;aspect-ratio:9/19;border-radius:44px;transform-style:preserve-3d;background:linear-gradient(160deg,#F7F9FB,#DCE3EA);padding:11px;
  box-shadow:0 50px 90px -40px rgba(0,0,0,.75),inset 0 0 0 1px rgba(255,255,255,.7),inset 0 0 0 3px rgba(15,27,51,.08);justify-self:end}
.phone::before{content:"";position:absolute;left:50%;top:22px;width:86px;height:24px;margin-left:-43px;border-radius:12px;background:var(--navy);z-index:3;opacity:.92}
.phone video{width:100%;height:100%;object-fit:cover;border-radius:34px;background:var(--navy-2)}
.film-hit{position:absolute;inset:11px;border:0;padding:0 0 30px;border-radius:34px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  background:linear-gradient(180deg,rgba(15,27,51,0) 58%,rgba(15,27,51,.72) 100%);color:#fff;transition:opacity .3s ease;z-index:2}
.film-play{position:relative;width:56px;height:56px;border-radius:50%;background:var(--red);box-shadow:0 14px 30px -10px rgba(0,0,0,.7);transition:transform .2s ease}
.film-play::after{content:"";position:absolute;left:22px;top:17px;border-left:17px solid #fff;border-top:11px solid transparent;border-bottom:11px solid transparent}
.film-hit:hover .film-play{transform:scale(1.07)}
.film-hit-cap{margin-top:14px;font:700 12px/1.3 var(--body);letter-spacing:.2em;text-transform:uppercase;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.film-hit-cap em{display:block;margin-top:5px;font:500 11.5px/1.3 var(--body);letter-spacing:.04em;text-transform:none;opacity:.85}
.phone.is-on .film-hit{opacity:0;pointer-events:none}
.film-sound{position:absolute;right:24px;bottom:26px;z-index:4;display:none;align-items:center;gap:6px;border:0;border-radius:999px;padding:9px 13px;
  background:rgba(15,27,51,.78);color:#fff;font:700 12px/1 var(--body);cursor:pointer}
.phone.is-on .film-sound{display:inline-flex}
.film-sound:not(.is-on) .fs-waves{opacity:.35}
.roomfilm-end{margin-top:clamp(56px,7vw,96px);text-align:center}
.roomfilm-end .statement{margin:0 auto}
/* round 6: THE ROOM FILM, one big square under the statement (his words: "a big video square"), Take your seat under it.
   The first frame is a real picture underneath; the silent loop fades in over it once it plays (the frames match, so the
   fade is invisible). The whole frame is one button: the full film opens IN PLACE, the square widening into a 16:9
   screen at almost the same height. */
.reel{position:relative;width:min(680px,100%);margin:clamp(32px,4vw,52px) auto 0;transition:width .7s cubic-bezier(.2,.7,.2,1)}
.reel-frame{position:relative;aspect-ratio:1/1;border-radius:var(--r-card);overflow:hidden;background:var(--navy-2);
  box-shadow:0 50px 90px -40px rgba(0,0,0,.75),0 0 0 1px rgba(247,245,240,.1)}
.reel-still,.reel-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reel-vid{opacity:0;transition:opacity 1.1s ease}
.reel-vid.is-on{opacity:1}
.reel-hit{position:absolute;inset:0;z-index:2;display:grid;grid-template-columns:auto minmax(0,1fr);align-content:end;align-items:center;column-gap:14px;
  padding:0 clamp(20px,2.6vw,30px) clamp(20px,2.6vw,30px);border:0;cursor:pointer;color:#fff;text-align:left;
  background:linear-gradient(180deg,rgba(15,27,51,0) 50%,rgba(15,27,51,.5) 75%,rgba(15,27,51,.86) 100%)}
.reel-play{position:relative;width:56px;height:56px;border-radius:50%;background:var(--red);box-shadow:0 14px 30px -10px rgba(0,0,0,.7);transition:transform .2s ease}
.reel-play::after{content:"";position:absolute;left:22px;top:17px;border-left:17px solid #fff;border-top:11px solid transparent;border-bottom:11px solid transparent}
.reel-hit:hover .reel-play{transform:scale(1.07)}
.reel-hit:focus-visible{outline:3px solid var(--amber);outline-offset:-3px}
.reel-cap{font:700 12.5px/1.3 var(--body);letter-spacing:.2em;text-transform:uppercase;text-shadow:0 2px 12px rgba(0,0,0,.55)}
.reel-cap em{display:block;margin-top:5px;font:500 12.5px/1.3 var(--body);font-style:normal;letter-spacing:.04em;text-transform:none;opacity:.9}
.reel-note{margin-top:14px;font-size:13px;line-height:1.5;color:var(--on-navy-3)}
.reel.is-film{width:100%}
.reel.is-film .reel-frame{aspect-ratio:16/9;background:#000}
.reel-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3}
.roomfilm-cta{margin-top:clamp(24px,3vw,32px);display:flex;flex-direction:column;align-items:center;gap:14px}
.roomfilm-cta p{font-size:14.5px;color:var(--on-navy-2)}
.roomfilm-cta strong{color:var(--on-navy)}
@media (max-width:999px){
  .day-grid{grid-template-columns:1fr;grid-template-areas:"head" "phone" "list" "cta"}
  .phone-stage{width:min(300px,72vw);justify-self:center;margin-top:32px}
  .day-list{max-width:none;margin-top:44px}
}
@media (max-width:560px){.day-cta .btn{width:100%}.day-list li{font-size:14px;grid-template-columns:5.2em minmax(0,1fr);gap:10px}}

/* ---------- WHO IS TEACHING: paper. Round 5: it follows the room now, so it is the sheet laid over the navy (it needs
   its own paper, or the room would show through the sheet's corners) ---------- */
.who{background:var(--paper)}
.who-grid{display:grid;grid-template-columns:clamp(260px,32vw,420px) minmax(0,1fr);column-gap:clamp(32px,5vw,88px);align-items:start}
.who-img{position:sticky;top:96px}
.who-img img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:60% 30%;border-radius:var(--r-card);box-shadow:0 34px 70px -36px rgba(15,27,51,.5)}
.who-copy h2{font-family:var(--display);font-weight:600;font-size:clamp(36px,4.6vw,64px);line-height:.98;letter-spacing:-.022em;color:var(--navy);margin-top:14px}
.prose{margin-top:clamp(18px,2vw,26px)}
.prose p{font-size:clamp(16px,1.3vw,17.5px);line-height:1.65;color:var(--text-2);max-width:62ch}
.prose p+p{margin-top:16px}
.rules{margin-top:clamp(24px,3vw,34px);border-left:3px solid var(--amber);padding-left:20px}
.rules p{font-family:var(--display);font-style:italic;font-weight:500;font-size:clamp(19px,1.7vw,24px);line-height:1.32;color:var(--navy);max-width:34ch}
.rules p+p{margin-top:10px}
.gal-card{margin-top:clamp(28px,3.4vw,40px);display:flex;align-items:center;gap:18px;background:var(--snow);border:1px solid var(--line);border-radius:16px;padding:18px 22px;max-width:560px}
.gal-card img{width:68px;height:68px;border-radius:50%;object-fit:cover;flex:0 0 68px}
.gal-card p{font-size:15px;line-height:1.5;color:var(--text-2)}
.gal-card b{display:block;font:700 11px/1.3 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--red);margin-bottom:5px}
.gal-card strong{color:var(--navy);font-weight:600}
@media (max-width:820px){
  .who-grid{grid-template-columns:1fr;row-gap:28px}
  .who-img{position:static;max-width:420px}
}

/* ---------- TAKE YOUR SEAT: the ticket again, on paper-2 ---------- */
.seats-grid{display:grid;grid-template-columns:minmax(0,1fr) clamp(360px,34vw,470px);column-gap:clamp(32px,6vw,96px);align-items:start}
.seats-g{margin-top:22px;font-size:15.5px;line-height:1.55;color:var(--text-2);max-width:48ch}
.seats-g b{color:var(--navy)}
@media (max-width:900px){
  .seats-grid{grid-template-columns:1fr;row-gap:30px}
  .tickets{max-width:520px}
}

/* ---------- THE GUARANTEE: the band wears the accent (maple red) ---------- */
.guarantee-sec .wrap{text-align:left}
/* THE 110%: one typographic treatment for the whole site. The number enormous in the display face, "money back" as a
   small upright word under an amber hairline. No disc, no ring, no dashed edge, no shadow. --g sets the size. */
.g110{--g:clamp(96px,11vw,168px);display:inline-flex;flex-direction:column;align-items:stretch;line-height:1;color:var(--navy);vertical-align:top}
.g110-n{font-family:var(--display);font-weight:700;font-size:var(--g);line-height:.82;letter-spacing:-.05em;white-space:nowrap}
.g110-n i{font-style:normal;font-size:.46em;vertical-align:.66em;margin-left:.03em;letter-spacing:-.02em}
.g110-t{margin-top:.12em;padding-top:.11em;border-top:1px solid var(--amber);font:700 calc(var(--g) * .105)/1.2 var(--body);letter-spacing:.22em;text-transform:uppercase;opacity:.86}
.band-accent .g110,.roomfilm .g110,.ticket .g110,.close .g110{color:#fff}
.g110-sm{--g:60px}
.g-lock{margin-top:clamp(26px,3.2vw,40px);display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(36px,5vw,80px);align-items:center}
.g-copy h2{font-family:var(--display);font-weight:600;font-size:clamp(30px,4.2vw,56px);line-height:1.02;letter-spacing:-.02em;color:#fff}
.g-lead{margin-top:16px;font-size:clamp(16px,1.35vw,18px);line-height:1.55;font-weight:600;color:rgba(255,255,255,.92);max-width:52ch}
.g-quote{margin-top:22px;border-left:3px solid var(--amber);padding-left:18px;font-size:16px;line-height:1.55;color:rgba(255,255,255,.88);max-width:64ch}
.g-quote cite{display:block;margin-top:10px;font:700 11px/1.3 var(--body);font-style:normal;letter-spacing:.2em;text-transform:uppercase;color:var(--amber)}
.g-points{margin-top:clamp(30px,3.6vw,44px);display:flex;flex-wrap:wrap;gap:12px 32px}
.g-points li{position:relative;padding-left:26px;font-size:15px;font-weight:600;color:#fff}
.g-points li::before{content:"";position:absolute;left:3px;top:.45em;width:9px;height:5px;border-left:2px solid var(--amber);border-bottom:2px solid var(--amber);transform:rotate(-45deg)}
.g-cta{margin-top:clamp(30px,3.6vw,44px);display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.g-cta p{font-size:13.5px;color:rgba(255,255,255,.82)}
.g-cta strong{color:#fff}
@media (max-width:760px){
  .g-lock{grid-template-columns:1fr;row-gap:26px}
  .g110{--g:clamp(84px,22vw,110px)}
}

/* ---------- HONEST ANSWERS: paper ---------- */
.acc{margin-top:clamp(22px,2.8vw,36px);border-bottom:1px solid var(--line)}
.acc details{border-top:1px solid var(--line)}
.acc summary{list-style:none;cursor:pointer;position:relative;padding:20px 44px 20px 0;font-family:var(--display);font-weight:500;font-size:clamp(19px,1.7vw,23px);line-height:1.3;color:var(--navy)}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"";position:absolute;right:4px;top:50%;width:12px;height:12px;margin-top:-6px;
  background:linear-gradient(var(--red),var(--red)) center/12px 2px no-repeat,linear-gradient(var(--red),var(--red)) center/2px 12px no-repeat;transition:transform .25s ease}
.acc details[open] summary::after{transform:rotate(45deg)}
.acc details p{padding:0 0 22px;font-size:16px;line-height:1.65;color:var(--text-2);max-width:64ch}
.acc details a{color:var(--red);border-bottom:1px solid rgba(200,16,46,.35);font-weight:600}

/* ---------- THE CLOSE: navy over the room ---------- */
.close{position:relative;overflow:hidden;padding:clamp(96px,12vw,170px) 0;text-align:center}
.close.under-top{padding-top:calc(clamp(96px,12vw,170px) + var(--r-sheet))}
.faq{background:var(--paper)}
.close-media{position:absolute;inset:0;z-index:0}
.close-media img{width:100%;height:100%;object-fit:cover;filter:saturate(.7)}
.close-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,27,51,.86),rgba(15,27,51,.72) 50%,var(--navy) 100%)}
.close-body{position:relative;z-index:1}
.close h2{font-family:var(--display);font-weight:600;font-size:clamp(36px,5.2vw,72px);line-height:1;letter-spacing:-.024em;color:var(--on-navy);text-wrap:balance;max-width:16ch;margin-inline:auto}
.close-body>p{margin:22px auto 0;font-size:clamp(16.5px,1.4vw,19px);line-height:1.6;color:var(--on-navy-2);max-width:52ch}
.close .btn{margin-top:30px}
.close-note{margin-top:16px;font-size:13.5px;color:var(--on-navy-3)}

/* ---------- FOOTER ---------- */
.foot{border-top:1px solid var(--line-navy);padding:clamp(36px,4vw,56px) 0 calc(clamp(36px,4vw,56px) + var(--bar))}
.foot-in{text-align:center}
.foot-logo{height:44px;width:auto;margin:0 auto 20px;opacity:.92}
.foot p{font-size:14px;line-height:1.6;color:var(--on-navy-2)}
.foot p+p{margin-top:8px}
.foot .fine{font-size:12.5px;color:var(--on-navy-3)}
.foot a{color:var(--on-navy-2);border-bottom:1px solid var(--line-navy)}

/* ---------- STICKY BAR, round 4: a floating ticket on desktop (face · name · facts · the button that opens the details
   step), a full-width bar on phones. No frosted-glass blur behind it (that effect cost frames, see verify.py). ---------- */
.sticky-bar{position:fixed;left:0;right:0;bottom:0;z-index:70;padding:0 16px calc(16px + env(safe-area-inset-bottom));pointer-events:none;
  transform:translateY(130%);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.sticky-bar.show{transform:translateY(0)}
.sticky-in{pointer-events:auto;max-width:880px;margin:0 auto;display:flex;align-items:center;gap:16px;padding:10px 10px 10px 12px;
  background:var(--navy);color:var(--on-navy);border-radius:18px;
  box-shadow:0 26px 60px -24px rgba(15,27,51,.7),0 0 0 1px rgba(255,255,255,.07),inset 0 1px 0 rgba(240,162,2,.35)}
.sticky-face{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:0 0 44px;box-shadow:0 0 0 2px rgba(240,162,2,.55)}
.sticky-info{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 auto}
.sticky-info strong{font-family:var(--display);font-weight:600;font-size:18px;line-height:1.1;color:var(--on-navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sticky-info>span{font-size:13px;color:var(--on-navy-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sticky-info>span b{color:var(--on-navy);font-weight:600}
.sb-sep{font-style:normal}
.sticky-bar .btn{flex:0 0 auto;padding:15px 22px;border-radius:12px}
@media (max-width:640px){
  .sticky-bar{padding:0}
  .sticky-in{max-width:none;border-radius:16px 16px 0 0;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));gap:12px}
  .sticky-face{width:38px;height:38px;flex-basis:38px}
  .sticky-info strong{display:none}
  .sticky-info>span{font-size:12.5px;white-space:normal;line-height:1.35}
  .sticky-info>span b{display:block;font-family:var(--display);font-size:16px;margin-bottom:1px}
  .sb-sep{display:none}
  .sticky-bar .btn{padding:14px 16px;font-size:15px}
  .sticky-bar .btn em{display:none}
}

/* ---------- STEP 1 OF 2: the details popup ---------- */
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:16px}
.modal[hidden]{display:none}
.modal-scrim{position:absolute;inset:0;background:rgba(15,27,51,.66)}
.modal-card{position:relative;width:min(560px,100%);max-height:calc(100svh - 32px);overflow:auto;background:var(--snow);border-radius:20px;
  padding:clamp(24px,3vw,36px);box-shadow:0 50px 100px -40px rgba(0,0,0,.6)}
.modal-x{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--paper);cursor:pointer;display:grid;place-items:center;padding:0}
.modal-x svg{width:16px;height:16px;fill:none;stroke:var(--navy);stroke-width:2;stroke-linecap:round}
.modal-x:hover{background:var(--paper-2)}
.modal-step{font:700 11px/1.3 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--amber-deep)}
.modal-title{margin-top:8px;font-family:var(--display);font-weight:600;font-size:clamp(24px,2.6vw,32px);line-height:1.08;letter-spacing:-.015em;color:var(--navy)}
.modal-sub{margin-top:6px;font-size:15px;line-height:1.5;color:var(--text-2)}
.modal-tier{margin-top:16px;display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--paper-2);border:1px solid var(--line);border-radius:12px;padding:12px 16px}
.mt-label{font-size:14px;font-weight:600;color:var(--navy)}
.mt-price b{font-family:var(--display);font-weight:600;font-size:20px;color:var(--red);white-space:nowrap}
.modal-form{margin-top:18px}
.m-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.m-wide{grid-column:1/-1}
.m-f{display:block;min-width:0}
.m-f>span{display:block;font:700 11.5px/1.3 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.m-f em{font-style:normal;text-transform:none;letter-spacing:0;font-weight:500;color:var(--text-3)}
.m-f input{width:100%;margin-top:6px;padding:13px 14px;border:1px solid rgba(19,28,46,.24);border-radius:10px;background:var(--snow);font:500 16px/1.2 var(--body);color:var(--navy);
  transition:border-color .15s ease,box-shadow .15s ease}
.m-f input:focus{outline:0;border-color:var(--red);box-shadow:0 0 0 3px var(--red-soft)}
.m-f input.is-bad{border-color:var(--red);box-shadow:0 0 0 3px var(--red-soft)}
.m-f input::placeholder{color:rgba(19,28,46,.35)}
.m-err{margin-top:12px;padding:10px 12px;border-radius:8px;background:var(--red-soft);color:var(--red-deep);font-size:14px;font-weight:600;line-height:1.4}
.m-err[hidden]{display:none}
#buySubmit{margin-top:16px}
.m-fine{margin-top:12px;font-size:12.5px;line-height:1.5;color:var(--text-3)}
.m-fine b{color:var(--text-2)}
.m-step2 .modal-title{margin-top:0}
.m-step2 ul{margin-top:16px}
.m-step2 li{position:relative;padding-left:26px;font-size:15px;line-height:1.5;color:var(--text-2)}
.m-step2 li+li{margin-top:8px}
.m-step2 li b{color:var(--navy)}
.m-step2 li::before{content:"";position:absolute;left:3px;top:.5em;width:9px;height:5px;border-left:2px solid var(--red);border-bottom:2px solid var(--red);transform:rotate(-45deg)}
@media (max-width:560px){.m-grid{grid-template-columns:1fr}.modal{padding:10px}.modal-card{border-radius:16px}}

/* ---------- reveals: the initial state only; tor.js (GSAP ScrollTrigger) animates them in and adds .in ---------- */
.reveal{opacity:0;transform:translateY(18px)}
.reveal.in{opacity:1;transform:none}
html.no-motion .reveal{opacity:1;transform:none}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .vid-track,.dot,.ticker-in span:last-child{animation:none}
  .ticker-in span:last-child{white-space:normal}
  .btn,.chapters li,.vid-thumb img{transition:none}
  .nav-prog{transition:none}
}