/* toast.day homepage, the wall-first story: loads last, so it settles the shared look across sections */

/* the hero: a light, barely blurred shade behind the words, so the films read as texture and the words come first */
.home .s-top .w-type::before{background:radial-gradient(closest-side,rgba(10,8,8,.62),rgba(10,8,8,.4) 55%,rgba(10,8,8,0));-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);-webkit-mask-image:radial-gradient(closest-side,#000 55%,transparent);mask-image:radial-gradient(closest-side,#000 55%,transparent)}

/* one style for every section title: the same serif, size and centering. The big moments (the hero, Monica's words,
   the ending) keep their own larger sizes */
.home .s-how>h2,.home .s-chat .g-h,.home .s-gift .f-h,.home .s-faq h2,.home .hero>.mn>.gq{font-family:var(--fd);font-weight:400;font-size:clamp(36px,4.3vw,60px);line-height:1.04;letter-spacing:-.04em;text-align:center;text-wrap:balance;max-width:none}
.home .s-gift .f-top{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
.home .s-gift .f-sub{max-width:34em}
.home .s-faq h2{text-align:center}
@media (max-width:879px){
  .home .s-how>h2,.home .s-chat .g-h,.home .s-gift .f-h,.home .s-faq h2,.home .hero>.mn>.gq{font-size:34px;text-align:center}
}

/* Rosie's toasts play as a plain 16:9 video, no phone around them */
.home .hero .ph{width:min(760px,100%);height:auto;aspect-ratio:16/9;padding:0;border-radius:14px;background:#000;box-shadow:0 30px 70px -30px rgba(0,0,0,.85)}
.home .hero .scr{width:100%;height:100%;border-radius:14px}
.home .hero .tv{width:100%;height:100%;transform:none;display:block}
.home .hero .tv-isl,.home .hero .tv-sb,.home .hero .tv-top,.home .hero .tv-home,.home .hero .tv-glow{display:none}
.home .hero .tv-player{position:absolute;inset:0;left:0;top:0;translate:none;margin:0;width:100%;height:100%;border-radius:0;box-shadow:none}
.home .hero .tv-info{left:4%!important;top:6%!important}
@media (min-width:880px){.home .hero .ph{width:min(760px,56vw)}}

/* phones: nothing readable too faint */
@media (max-width:879px){
  .home .s-how .how-fol.focusing .step:not(.on) .body{opacity:.5}
  .home .s-faq .q-grid p{color:rgba(0,0,0,.7)}
  .home .s-quote .by{color:rgba(255,255,255,.72)}
}

/* full-screen sections center their content; keep the reaction at its full width inside that */
.home .s-gift .f-wrap,.home .s-quote .qz,.home .s-chat .g-wrap{width:100%}

/* the AI disclosure reads on the dark film and on the paper the room fades to */
.home .s-gift .f-note{color:#8f857c}

/* the QR card: a little smaller */
.qr{width:124px;padding:8px 8px 10px;border-radius:20px}
.qr-code{padding:10px;border-radius:12px}
.qr-t{font-size:16px;margin-top:10px}
.qr-s{font-size:11px}

/* shorter laptop screens: the group chat phone and the reaction film shrink to fit the screen */
@media (min-width:861px) and (max-height:860px){.home .s-chat .g-ph{zoom:.86}}
@media (min-width:861px) and (max-height:760px){.home .s-chat .g-ph{zoom:.76}}
@media (min-width:880px){.home .s-gift .f-wrap{max-width:min(1080px,calc((100vh - 230px) * 1.7778));max-width:min(1080px,calc((100svh - 230px) * 1.7778))}}

/* You direct. We do the grunt work.: each scene sits right on its step (no gap), and the steps not playing stay readable */
.home .s-how .how-desk .sc{align-items:flex-end}
.home .s-how .how-desk .col:not(.on) .sc,.home .s-how .how-desk .col:not(.on) h3,.home .s-how .how-desk .col:not(.on) p{opacity:.5}
.home .s-how .how-desk .col:not(.on):hover .sc,.home .s-how .how-desk .col:not(.on):hover h3,.home .s-how .how-desk .col:not(.on):hover p{opacity:.75}
@media (max-width:860px){
  .home .s-how .how-fol .sc-faces .grid{grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:auto;justify-content:stretch;column-gap:6px}
  .home .s-how .how-fol .sc-faces .face{width:100%;height:auto;aspect-ratio:1}
}

/* phones: the reaction sits in the middle of its screen, and her face is a little smaller */
@media (max-width:900px){.home .s-gift{justify-content:center}.home .s-gift .f-wrap{margin:auto 0}}

/* ---- polish pass (design review, 2026-10-22) ---- */
/* hand-set breaks: a phrase that must stay whole, a line of its own */
.nw{white-space:nowrap}
.blk{display:block}
.home .s-faq .q-grid h3{text-wrap:balance}
/* the hero: what Toast is reads first among the small words, the occasions a step quieter and apart */
.home .s-top .w-type .w-sub .l:first-child{font-size:clamp(18px,1.5vw,23px);line-height:1.35}
.home .s-top .w-type .w-sub .l + .l{margin-top:14px;font-size:15px;color:rgba(255,255,255,.72)}
@media (min-width:880px){.home .s-top .w-type .w-sub{max-width:34em;margin-left:auto;margin-right:auto}}
/* the logo gets a little dark behind it on phones, so it isn't read as one more caption */
@media (max-width:879px){
  .home .s-top .w-vp::after{content:"";position:absolute;left:0;right:0;top:0;height:140px;z-index:5;pointer-events:none;background:linear-gradient(#000,rgba(0,0,0,.55) 60px,rgba(0,0,0,0))}
}
/* phones: each section is as tall as what's in it, with one even gap between them (a full screen each left up to a
   screen of black around the shorter ones); computers keep a screen per moment */
@media (max-width:879px){
  .home .s-quote,.home .hero,.home .s-gift,.home .s-pause,.home .s-faq,.home .s-how,.home .s-chat{min-height:0;justify-content:flex-start;padding-top:72px;padding-bottom:72px}
  .home .s-quote,.home .s-pause{padding-left:24px;padding-right:24px}
}
/* the note's signature: a clear step below the words, and dark enough to read */
.home .s-pause .pz p.sig{margin-top:48px;color:rgba(0,0,0,.64)}
@media (min-width:880px){.home .s-pause .pz p.sig{margin-top:64px}}
/* step titles: Satoshi Medium, as all text */
.home .s-how h3{font-weight:500;font-size:19px}
/* the floating QR label is small text, so Satoshi, on one line */
.qr-t{font-family:var(--ft);font-size:15px;letter-spacing:0;white-space:nowrap}
/* ...so the card is wide enough to hold it */
.qr{width:170px}
/* the note's signature: Jenny's face beside her name, so "who's Jenny" answers itself */
.home .s-pause .pz p.sig{display:flex;align-items:center;gap:12px}
.home .s-pause .pz .sig-av{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none}
/* a way in right after the note, on phones (on a computer the QR card is already beside it) */
.home .s-pause .pz-cta{margin-top:40px}
@media (min-width:880px){.home .s-pause .pz-cta{display:none}}
.home .s-pause .pz-cta .pill{font-family:var(--ft);letter-spacing:0}