@font-face{font-family:Manrope;src:url(assets/Manrope.ttf) format("truetype");font-weight:200 800;font-display:swap}
:root{--canvas:#F5F3ED;--ink:#15201B;--muted:#5B655D;--signal:#D5F500;--coral:#FF765E;--lilac:#A99BFF;
  --pad:clamp(16px,3vw,40px)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--ink);font:400 17px/1.45 Manrope,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,p{margin:0}
button,input{font:inherit;color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

#hero{position:relative;height:100vh;height:100svh;min-height:600px;overflow:hidden;background:var(--canvas);isolation:isolate}
#stage{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
#wordmark{position:absolute;left:50%;top:22px;width:clamp(150px,15vw,216px);transform:translateX(-50%);opacity:0;pointer-events:none}
.no-js #wordmark{opacity:1}
.no-js #stage{display:none}

#sides{position:absolute;inset:0;z-index:1;pointer-events:none}
.side{position:absolute;left:0;top:0;font-weight:500;font-size:18px;line-height:1;white-space:nowrap;opacity:0;will-change:transform,opacity}

#ui{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:calc(clamp(64px,11vh,108px) + env(safe-area-inset-top)) var(--pad) clamp(40px,9vh,96px);pointer-events:none}
#ui>*{pointer-events:auto}
#trail{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;min-height:38px;margin-bottom:clamp(10px,2vh,20px)}
#trail:empty{visibility:hidden}
#ui.talk{justify-content:flex-start;padding-top:calc(clamp(72px,20vh,200px) + env(safe-area-inset-top))}
.nb{white-space:nowrap}
.pill{display:inline-flex;align-items:center;height:38px;padding:0 16px;border-radius:999px;background:var(--signal);border:1.5px solid var(--ink);font-weight:500;font-size:15px;letter-spacing:-.01em;white-space:nowrap;max-width:min(88vw,340px);overflow:hidden;text-overflow:ellipsis}

.lead{font-weight:500;font-size:clamp(17px,min(1.7vw,2.9vh),24px);line-height:1.3;letter-spacing:-.025em;margin-bottom:clamp(6px,1.4vh,14px);min-height:1.3em;color:var(--ink)}
#ui:not(.talk) .lead:empty{display:none}
#ui.talk .lead:empty{visibility:hidden}
.q{font-weight:600;font-size:clamp(36px,min(5.9vw,9.6vh),104px);line-height:1.03;letter-spacing:-.052em;max-width:13.5em;text-wrap:balance;outline:0;position:relative}
.q--mid{font-size:clamp(32px,min(4.5vw,7.6vh),68px);max-width:15.5em;line-height:1.06}
.q--big{font-size:clamp(30px,min(3.7vw,6.2vh),68px);max-width:16em;line-height:1.08;letter-spacing:-.045em}
.q--form{font-size:clamp(30px,min(3.7vw,6.2vh),68px);max-width:16em;line-height:1.08;letter-spacing:-.045em}
.q--sorry{font-size:clamp(30px,min(3.7vw,6.2vh),68px);max-width:15em;line-height:1.08;letter-spacing:-.045em}
.ghost{color:transparent}
.caret{position:absolute;left:0;top:0;width:.07em;height:.82em;background:var(--ink);margin:.12em 0 0 .035em;border-radius:1px}
.wd{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.wd>span{display:inline-block;will-change:transform}

#controls{margin-top:clamp(16px,3.4vh,34px);width:100%;display:flex;flex-direction:column;align-items:center;gap:12px;min-height:44px}
#controls:empty{visibility:hidden}
.chips{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;max-width:760px}
.chip{appearance:none;font-weight:500;font-size:clamp(15px,1.2vw,17px);letter-spacing:-.012em;line-height:1;min-height:46px;padding:0 clamp(14px,1.5vw,22px);background:var(--canvas);border:1.5px solid rgba(21,32,27,.26);border-radius:999px;cursor:pointer;white-space:nowrap;transition:background-color .16s,border-color .16s,box-shadow .16s;touch-action:manipulation}
.chip:hover{background:#fff;border-color:var(--ink)}
.chip[aria-pressed=true],.chip.on{background:var(--signal);border-color:var(--ink)}
:focus-visible{outline:2.5px solid var(--ink);outline-offset:3px}
#q:focus,#q:focus-visible{outline:none}
.btns{display:flex;flex-wrap:wrap;gap:10px 14px;justify-content:center;align-items:center}
.cta{appearance:none;font-weight:600;font-size:clamp(16px,1.3vw,18px);letter-spacing:-.015em;line-height:1;min-height:52px;padding:0 28px;border-radius:16px;border:1.5px solid var(--ink);background:var(--signal);color:var(--ink);cursor:pointer;transition:background-color .16s,color .16s;touch-action:manipulation}
.cta:hover{background:#c6e400}
.cta--ink{background:var(--ink);color:var(--signal)}
.cta--ink:hover{background:#000}
.later{appearance:none;background:transparent;border:1.5px solid var(--ink);color:var(--ink);font-weight:600;font-size:clamp(16px,1.3vw,18px);letter-spacing:-.015em;line-height:1;min-height:52px;padding:0 24px;border-radius:16px;cursor:pointer;transition:background-color .16s;touch-action:manipulation}
.later:hover{background:rgba(21,32,27,.1)}
.field{display:flex;gap:9px;width:min(100%,460px);justify-content:center}
.field input{flex:1 1 auto;min-width:0;height:52px;padding:0 18px;border-radius:16px;border:1.5px solid var(--ink);background:var(--canvas);font-weight:500;font-size:17px;letter-spacing:-.01em}
.field input::placeholder{color:var(--muted);opacity:1}
.field input[aria-invalid=true]{border-width:2.5px}
.notice{font-size:14px;font-weight:500;line-height:1.4}
.notice a{color:inherit;text-underline-offset:2px}
.signform,.codeform{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%}
.invite{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%}
.codeform--inline{gap:12px}
.err{max-width:31em}
.err[hidden]{display:none}
.cta[disabled],.later[disabled]{cursor:progress;opacity:.72}
.field input[inputmode=numeric]{letter-spacing:.18em;font-variant-numeric:tabular-nums}
.field input[inputmode=numeric]::placeholder{letter-spacing:-.01em}
.body{font-weight:500;font-size:clamp(17px,min(1.45vw,2.5vh),22px);line-height:1.45;letter-spacing:-.012em;max-width:31em;margin-top:clamp(0px,.4vh,6px)}

#status{position:absolute;left:0;right:0;bottom:clamp(40px,11vh,104px);z-index:2;text-align:center;font-weight:500;font-size:clamp(16px,1.5vw,20px);letter-spacing:-.02em;opacity:0;padding:0 var(--pad)}


@media (max-width:719px){
  .side{font-size:15px}
  .q{font-size:clamp(38px,11.4vw,52px)}
  .q--mid{font-size:clamp(32px,9.2vw,44px)}
  #ui.talk{padding-top:calc(clamp(64px,12.5vh,110px) + env(safe-area-inset-top))}
  #ui.talk .lead{min-height:2.6em}
  .chips{gap:8px}
  .chip{min-height:44px}
  .field{flex-wrap:wrap}
  .field .cta{flex:1 1 100%}
  #trail{min-height:34px}
  .pill{height:34px;font-size:14px;padding:0 13px}
}
@media (max-height:720px) and (max-width:719px){
  .q{font-size:32px}
  .chip{min-height:40px;font-size:14px}
}
@media (max-width:719px){
  .q--big,.q--form,.q--sorry{font-size:clamp(26px,7.7vw,34px)}
  .later,.cta{min-height:50px}
}
@media (max-width:719px) and (max-height:720px){
  .q--big,.q--form,.q--sorry{font-size:26px}
}

/* ---------- header on scroll ---------- */
#top{position:fixed;left:0;right:0;top:0;z-index:20;background:var(--signal);display:flex;justify-content:space-between;align-items:center;padding:calc(12px + env(safe-area-inset-top)) var(--pad) 12px;pointer-events:none;visibility:hidden;transform:translateY(-110%);transition:transform .28s cubic-bezier(.2,.7,.2,1),visibility 0s .28s,background-color .22s}
#top.on{visibility:visible;transform:none;transition:transform .28s cubic-bezier(.2,.7,.2,1),visibility 0s,background-color .22s}
#top.oncanvas{background:var(--canvas)}
#b2 .cta,#b3 .cta{scroll-margin:96px 0}
#top>*{pointer-events:auto}
#topmark{display:block;width:48px;height:48px;border-radius:14px;background:var(--ink)}
#topmark svg{display:block;width:100%;height:100%}
#top .cta{min-height:48px;padding:0 22px;border-radius:14px;font-size:16px}
.no-js #top,.no-js [data-signup]{display:none}

/* ---------- block 2: the lime carries on ---------- */
#b2{position:relative;overflow:hidden;background:var(--signal);min-height:max(100vh,640px);min-height:max(100svh,640px);padding:clamp(92px,14vh,140px) var(--pad) 140px;display:flex;flex-direction:column;scroll-margin-top:0}
.b2copy{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start}
#b2 h2{font-weight:600;font-size:clamp(46px,min(7.2vw,12.8vh),136px);line-height:1.02;letter-spacing:-.052em}
#b2 .ln{display:block;overflow:hidden;padding-bottom:.13em;margin-bottom:-.13em}
#b2 .ln>span{display:block}
.b2p{text-wrap:pretty;font-weight:500;font-size:clamp(18px,min(1.5vw,2.5vh),24px);line-height:1.4;letter-spacing:-.018em;max-width:21em;margin-top:clamp(18px,3vh,32px)}
.b2cta{margin-top:clamp(20px,3.2vh,34px)}
#rider{position:absolute;z-index:1;right:0;bottom:0;height:auto;width:min(56vw,calc(86vh*.978));max-width:none;display:block;will-change:transform}
#swell{position:absolute;z-index:3;left:0;bottom:-200px;width:100%;height:320px;overflow:hidden;will-change:transform;pointer-events:none}
#swell svg{display:block;width:200%;height:100%;animation:drift 46s linear infinite}
@keyframes drift{to{transform:translate3d(-50%,0,0)}}
.fx #b2 .ln>span{transform:translateY(106%);transition:transform .95s cubic-bezier(.16,.84,.24,1)}
.fx #b2 .ln:nth-child(2)>span{transition-delay:.07s}
.fx #b2 .ln:nth-child(3)>span{transition-delay:.14s}
.fx .b2p,.fx .b2cta{opacity:0;transform:translateY(14px);transition:opacity .6s .28s,transform .8s .28s cubic-bezier(.16,.84,.24,1),background-color .16s,color .16s}
.fx #b2.in .ln>span{transform:none}
.fx #b2.in .b2p,.fx #b2.in .b2cta{opacity:1;transform:none}

/* ---------- block 3: from noise to your wave ---------- */
#b3{position:relative;overflow:hidden;background:var(--canvas);padding:clamp(28px,5vh,64px) 0 clamp(64px,11vh,128px)}
#b3 h2,.b3p,.b3cta{margin-left:var(--pad);margin-right:var(--pad)}
#b3 h2{font-weight:600;font-size:clamp(46px,min(7.7vw,14vh),148px);line-height:1.03;letter-spacing:-.052em}
.noise{display:inline-block;white-space:nowrap}
.noise i{display:inline-block;font-style:normal}
.b3p{text-wrap:pretty;font-weight:500;font-size:clamp(19px,min(1.7vw,2.9vh),28px);line-height:1.35;letter-spacing:-.02em;margin-top:clamp(12px,2vh,22px)}
.flowwrap{position:relative;max-width:1920px;margin:clamp(14px,3vh,36px) auto clamp(20px,3.6vh,44px)}
.flow{display:block;width:100%;height:auto;overflow:visible}
.flow text{font:600 46px Manrope,system-ui,sans-serif;letter-spacing:-.04em;fill:var(--ink)}
.flow--m text{font-size:21px;letter-spacing:-.035em}
.flow--m{display:none}
/* Keeps the words on the page margin at every width: the drawing scales, the margin does not. */
.flow--d{margin-left:calc(var(--pad) - min(2.7778vw,53.33px))}
.flow .il,.flow .br{fill:var(--ink)}
.flow .br{transform-box:fill-box;transform-origin:center}
@media (min-width:1921px){#b3 h2,.b3p{margin-left:calc((100vw - 1920px)/2 + 40px)}}
/* The flow reads source, ill, wave, action: the button starts under the first bar of the wave, on the line of Books. */
@media (min-width:1100px){
  #b3 .b3cta{position:absolute;margin:0;left:calc(60.14% + var(--pad) - min(2.7778vw,53.33px));top:90.6%;transform:translateY(-50%)}
}

@media (min-width:720px) and (max-aspect-ratio:1/1){
  #b2 h2{font-size:clamp(46px,11vw,136px)}
  .b2p{font-size:clamp(20px,2.8vw,28px)}
  #rider{width:62vw}
}
@media (max-width:719px){
  #top .cta{min-height:44px;padding:0 18px;border-radius:13px}
  #topmark{width:44px;height:44px;border-radius:13px}
  #b2{padding:84px var(--pad) 0;min-height:max(100vh,700px);min-height:max(100svh,700px)}
  #b2 h2{font-size:clamp(46px,14.2vw,68px)}
  .b2p{font-size:18px;max-width:none;margin-top:16px}
  .b2cta{margin-top:18px}
  #rider{position:relative;right:auto;bottom:auto;width:88vw;margin:auto calc(-1*var(--pad)) 0 auto;align-self:flex-end;flex:none}
  #swell{height:200px;bottom:-124px}
  #swell svg{width:400%;animation-duration:60s}
  #b3{padding:20px 0 60px}
  #b3 h2{font-size:clamp(46px,14vw,68px)}
  .noise{display:inline-block}
  .b3p{font-size:19px;margin-top:12px}
  .flow--d{display:none}
  .flow--m{display:block}
  .flow--d{margin-left:0}
  .flowwrap{margin:26px var(--pad) 0}
  #b3 .b3cta{margin:30px 0 0}
}
@media (prefers-reduced-motion:reduce){
  #top,#top.on{transition:none}
  #swell svg{animation:none}
  #top{transition:none}
  #rider,#swell{will-change:auto}
}
.rm #swell svg{animation:none}
.rm #top,.rm #top.on{transition:none}
.paused #swell svg{animation-play-state:paused}

/* ---------- block 4: memory ---------- */
/* Lilac rises out of the Canvas of block 3 at the top, the photo stands on the bottom edge and the
   Canvas swell covers the cut of the shoulders, as with the rider in block 2. */
#b4{position:relative;overflow:hidden;background:var(--lilac);min-height:max(100vh,680px);min-height:max(100svh,680px);
  padding:clamp(120px,19vh,190px) var(--pad) 150px;display:flex;align-items:center;scroll-margin-top:0}
#b4 .tide{position:absolute;z-index:3;left:0;top:-1px;width:100%;height:clamp(52px,9vh,96px);overflow:hidden;pointer-events:none}
#b4 .tide svg{display:block;width:200%;height:100%;animation:drift 52s linear infinite reverse}
/* The coat leaves the frame on its left side only, so that side sits on the left edge of the screen. */
#listener{position:absolute;z-index:1;left:-1px;bottom:-6px;height:auto;width:min(50vw,calc(88vh*.894),1000px);max-width:none;display:block;will-change:transform}
.b4copy{position:relative;z-index:2;margin-left:max(54vw,calc(min(50vw,88vh*.894) + 2vw));max-width:780px;display:flex;flex-direction:column;align-items:flex-start}
#b4 h2{font-weight:600;font-size:clamp(46px,min(5.5vw,10.6vh),112px);line-height:1.02;letter-spacing:-.052em}
#b4 .ln{display:block;overflow:hidden;padding-bottom:.13em;margin-bottom:-.13em}
#b4 .ln>span{display:block}
.b4p{text-wrap:pretty;font-weight:500;font-size:clamp(18px,min(1.45vw,2.5vh),23px);line-height:1.4;letter-spacing:-.018em;max-width:22em;margin-top:clamp(18px,3vh,30px)}
/* The heard line: an answer pill from the hero, struck through. The finished state is struck and in place. */
.heard{margin-top:clamp(22px,3.4vh,34px);height:40px;position:relative;z-index:0}
.hp{display:inline-flex;align-items:center;height:40px;padding:0 17px;border-radius:999px;background:var(--canvas);border:1.5px solid var(--ink);
  font-weight:500;font-size:16px;letter-spacing:-.012em;white-space:nowrap;transform-origin:30% 50%;will-change:transform,opacity}
.hpt{position:relative;color:rgba(21,32,27,.55)}
.hpt::after{content:"";position:absolute;left:-3px;right:-3px;top:54%;height:2px;margin-top:-1px;background:var(--ink);border-radius:2px;transform-origin:0 50%}
.b4cta{margin-top:clamp(18px,3vh,30px);position:relative;z-index:1}
#swell4{position:absolute;z-index:3;left:0;bottom:-200px;width:100%;height:320px;overflow:hidden;pointer-events:none}
#swell4 svg{display:block;width:200%;height:100%;animation:drift 46s linear infinite}

.fx #b4 .ln>span{transform:translateY(106%);transition:transform .95s cubic-bezier(.16,.84,.24,1)}
.fx #b4 .ln:nth-child(2)>span{transition-delay:.07s}
.fx #b4 .ln:nth-child(3)>span{transition-delay:.14s}
.fx .b4p,.fx .heard,.fx .b4cta{opacity:0;transform:translateY(14px);transition:opacity .6s .28s,transform .8s .28s cubic-bezier(.16,.84,.24,1),background-color .16s,color .16s}
.fx .heard{transition-delay:.4s}
.fx #b4.in .ln>span{transform:none}
.fx #b4.in .b4p,.fx #b4.in .heard,.fx #b4.in .b4cta{opacity:1;transform:none}
/* The mini cycle, 6.4 s, only while the block is on screen: the pill arrives, a line strikes it out,
   it drops behind the button and sinks under the swell, then the slot stays empty for a beat. */
.fx #b4.in .hp{animation:heard 6.4s .9s infinite both paused}
.fx #b4.in .hpt::after{animation:strike 6.4s .9s infinite both paused}
.fx #b4.in.live .hp,.fx #b4.in.live .hpt::after{animation-play-state:running}
@keyframes heard{
  0%{opacity:0;transform:translateY(-12px);animation-timing-function:cubic-bezier(.2,.7,.2,1)}
  9%{opacity:1;transform:none}
  44%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.3,0,.6,1)}
  49%{opacity:1;transform:translateY(-5px) rotate(-2.5deg);animation-timing-function:cubic-bezier(.55,0,.95,.5)}
  70%{opacity:1;transform:translateY(var(--fall,520px)) rotate(13deg)}
  70.1%,100%{opacity:0;transform:translateY(var(--fall,520px)) rotate(13deg)}
}
@keyframes strike{
  0%,17%{transform:scaleX(0);animation-timing-function:cubic-bezier(.6,0,.3,1)}
  29%,100%{transform:scaleX(1)}
}
.paused4 #b4 .tide svg,.paused4 #swell4 svg{animation-play-state:paused}

@media (max-width:719px){
  #b4{flex-direction:column;align-items:stretch;min-height:0;padding:clamp(76px,13vh,104px) var(--pad) 0}
  #b4 .tide{height:48px}
  #b4 .tide svg{width:400%;animation-duration:64s}
  .b4copy{margin-left:0}
  #b4 h2{font-size:clamp(40px,12.2vw,68px)}
  .b4p{font-size:18px;margin-top:16px}
  .heard{margin-top:20px;height:38px}
  .hp{height:38px;font-size:15px;padding:0 15px}
  .b4cta{margin-top:18px}
  #listener{order:2;position:relative;left:auto;bottom:auto;align-self:flex-start;width:min(84vw,460px);margin:34px 0 -6px calc(-1*var(--pad) - 1px)}
  #swell4{height:200px;bottom:-130px}
  #swell4 svg{width:400%;animation-duration:60s}
}
/* Upright tablets stack like phones: text first, the listener standing on the swell below it. */
@media (min-width:720px) and (max-aspect-ratio:1/1){
  #b4{flex-direction:column;align-items:stretch;min-height:0;padding:clamp(110px,13vh,150px) var(--pad) 0}
  .b4copy{margin-left:0;max-width:none;z-index:0}
  #b4 h2{font-size:clamp(46px,9.4vw,112px)}
  .b4p{font-size:clamp(20px,2.8vw,28px)}
  #listener{order:2;position:relative;left:auto;bottom:auto;z-index:1;align-self:flex-start;width:min(66vw,620px);margin:48px 0 -6px calc(-1*var(--pad) - 1px)}
}
@media (prefers-reduced-motion:reduce){
  #b4 .tide svg,#swell4 svg{animation:none}
  #listener{will-change:auto}
}
.rm #b4 .tide svg,.rm #swell4 svg{animation:none}
#top.onlilac{background:var(--lilac)}
@media (max-width:719px){
  /* The pill drops behind the listener on phones, where she stands under the text. */
  .b4copy{z-index:0}
  #listener{z-index:1}
}

/* ---------- block 5: scenarios ---------- */
/* Canvas again under the swell of block 4. Four equal tiles, each its own colour, stand in a slow wave.
   Every frame has its backdrop brought to the tile colour (make-scenes.py), so the photo has no top or
   side edge of its own: the person stands on the bottom of the tile. Each tile has one small loop, and
   all four loops end in the same bars: four ways in, one podcast. */
#b5{position:relative;background:var(--canvas);padding:clamp(36px,6vh,80px) var(--pad) clamp(80px,13vh,150px)}
.b5in{max-width:1840px;margin:0 auto}
.b5head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
#b5 h2{font-weight:600;font-size:clamp(46px,min(6.6vw,12.4vh),128px);line-height:1.02;letter-spacing:-.052em;max-width:12em}
#b5 .ln{display:block;overflow:hidden;padding-bottom:.13em;margin-bottom:-.13em}
#b5 .ln>span{display:block}
.b5pause{appearance:none;flex:none;display:inline-flex;align-items:center;gap:10px;height:42px;padding:0 17px 0 15px;margin-bottom:.4em;border-radius:999px;background:transparent;border:1.5px solid rgba(21,32,27,.28);color:var(--ink);font-weight:500;font-size:15px;letter-spacing:-.012em;cursor:pointer;transition:border-color .16s,background-color .16s;touch-action:manipulation}
.b5pause:hover{border-color:var(--ink);background:rgba(21,32,27,.05)}
.pz{position:relative;width:10px;height:12px}
.pz::before,.pz::after{content:"";position:absolute;top:0;width:3px;height:12px;border-radius:1px;background:currentColor}
.pz::before{left:0}.pz::after{right:0}
.b5pause[aria-pressed=true] .pz::before{left:1px;width:0;height:0;border-radius:0;background:none;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent currentColor}
.b5pause[aria-pressed=true] .pz::after{display:none}
.rm .b5pause,.no-js .b5pause{display:none}

.scenes{--gap:clamp(10px,1vw,16px);list-style:none;margin:clamp(30px,5.5vh,60px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);align-items:stretch;padding-bottom:clamp(36px,4.6vw,72px)}
.sc{--tp:clamp(20px,1.75vw,28px);position:relative;overflow:hidden;display:flex;flex-direction:column;border-radius:clamp(22px,2vw,30px);padding:calc(var(--tp) + 2px) var(--tp) 0;translate:0 var(--dy,0px)}
.sc:nth-child(2){--dy:clamp(24px,3.4vw,52px)}
.sc:nth-child(3){--dy:clamp(36px,4.6vw,72px)}
.sc:nth-child(4){--dy:clamp(12px,1.6vw,24px)}
.sc--news,.sc--docs{background:var(--ink);color:var(--canvas)}
.sc--work{background:var(--coral)}
.sc--books{background:var(--signal)}
.sc h3{margin:0;font-weight:600;font-size:clamp(23px,min(2.05vw,3.7vh),33px);line-height:1.06;letter-spacing:-.042em;text-wrap:balance;max-width:11em}
.sc p{margin:12px 0 22px;font-weight:500;font-size:clamp(15px,1.12vw,17px);line-height:1.4;letter-spacing:-.012em;text-wrap:pretty;max-width:22em}
.sc--news p,.sc--docs p{color:rgba(245,243,237,.78)}
.loop{position:relative;flex:none;height:88px;margin-top:auto}
.scp{display:block;flex:none;width:calc(100% + 2*var(--tp));max-width:none;height:auto;margin:4px calc(-1*var(--tp)) 0}

/* The bars every loop ends in: the ill of the wordmark, small. */
.zb{display:inline-flex;align-items:center;gap:2.5px;height:16px;margin-right:9px}
.zb i{display:block;width:3px;border-radius:2px;background:currentColor}
.zb i:nth-child(1){height:6px}.zb i:nth-child(2){height:12px}.zb i:nth-child(3){height:16px}.zb i:nth-child(4){height:10px}.zb i:nth-child(5){height:5px}
.ep{position:absolute;left:0;top:0;display:inline-flex;align-items:center;height:34px;padding:0 15px 0 12px;border-radius:999px;font-weight:600;font-size:14px;letter-spacing:-.01em;white-space:nowrap;transform-origin:0 50%}
.sc--news .ep{background:var(--signal);color:var(--ink)}
.sc--work .ep{background:var(--ink);color:var(--canvas)}
.sc--work .ep .zb{color:var(--signal)}

/* 1. News: the stack of headlines gets shorter, line by line, until one episode is left. */
.hl{position:absolute;left:0;right:0;top:calc(var(--i)*21px);height:19px;padding-left:15px;font-weight:500;font-size:13.5px;line-height:19px;letter-spacing:-.005em;color:rgba(245,243,237,.82);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0}
.hl::before{content:"";position:absolute;left:0;top:9px;width:8px;height:1.5px;background:var(--signal)}
/* 2. Work: a week of meetings closes up into one episode. */
.cal{container-type:inline-size}
.dy{position:absolute;top:0;left:calc(var(--c)*20%);font-weight:600;font-size:11.5px;line-height:14px;letter-spacing:.01em;opacity:0}
.mt{position:absolute;top:calc(20px + var(--y));left:calc(var(--c)*20%);width:calc(20% - 6px);height:var(--h);border-radius:4px;background:var(--ink);opacity:0}
.cal .ep{left:50%;top:27px;transform:translateX(-50%);transform-origin:50% 50%}
/* 3. Books: pages turn on the beat of the bars. */
.bk{display:flex;align-items:center;gap:22px}
.book{position:relative;flex:none;width:84px;height:56px;perspective:260px}
.pg,.leaf{position:absolute;top:0;width:50%;height:100%;background:var(--canvas) repeating-linear-gradient(to bottom,transparent 0 9px,rgba(21,32,27,.32) 9px 10.5px) no-repeat;background-size:62% 70%;background-position:50% 60%;border:2px solid var(--ink)}
.pg--l{left:0;border-radius:6px 1px 1px 6px}
.pg--r,.leaf{left:50%;margin-left:-2px;width:calc(50% + 2px);border-radius:1px 6px 6px 1px}
.leaf{transform-origin:0 50%;backface-visibility:visible}
.beat{display:flex;align-items:center;gap:5px;height:56px}
.beat i{display:block;width:5px;height:48px;border-radius:3px;background:var(--ink);transform:scaleY(var(--s))}
.beat i:nth-child(1){--s:.3}.beat i:nth-child(2){--s:.55}.beat i:nth-child(3){--s:.85}.beat i:nth-child(4){--s:1}.beat i:nth-child(5){--s:.7}.beat i:nth-child(6){--s:.45}.beat i:nth-child(7){--s:.25}
/* 4. Documents: files drop into the wave and are gone. */
.fi{position:absolute;top:0;left:var(--x);width:30px;height:38px;padding:0 0 4px 5px;display:flex;align-items:flex-end;background:var(--canvas);color:var(--ink);font-weight:700;font-size:9.5px;letter-spacing:.02em;clip-path:polygon(0 0,68% 0,100% 24%,100% 100%,0 100%);border-radius:3px}
.wv{position:absolute;left:0;right:0;bottom:4px;height:30px;display:flex;align-items:center;justify-content:space-between}
.wv i{display:block;width:4px;height:var(--h,10px);border-radius:2px;background:var(--signal)}
.wv i:nth-child(6n+1){--h:8px}.wv i:nth-child(6n+2){--h:16px}.wv i:nth-child(6n+3){--h:24px}.wv i:nth-child(6n+4){--h:18px}.wv i:nth-child(6n+5){--h:10px}.wv i:nth-child(6n){--h:6px}

/* Motion. Without JavaScript or with reduced motion the loops stand in their finished state above:
   one episode, an open book by its bars, the wave under the files. */
.fx #b5 .ln>span{transform:translateY(106%);transition:transform .95s cubic-bezier(.16,.84,.24,1)}
.fx #b5 .ln:nth-child(2)>span{transition-delay:.07s}
.fx #b5 .b5pause{opacity:0;transition:opacity .6s .3s,border-color .16s,background-color .16s}
.fx #b5 .sc{opacity:0;transform:translateY(56px);transition:opacity .7s,transform 1.1s cubic-bezier(.16,.84,.24,1)}
.fx #b5 .sc:nth-child(2){transition-delay:.08s}.fx #b5 .sc:nth-child(3){transition-delay:.16s}.fx #b5 .sc:nth-child(4){transition-delay:.24s}
.fx #b5 .b5cta{opacity:0;transform:translateY(14px);transition:opacity .6s .3s,transform .8s .3s cubic-bezier(.16,.84,.24,1),background-color .16s,color .16s}
.fx #b5.in .ln>span,.fx #b5.in .sc,.fx #b5.in .b5cta{transform:none;opacity:1}
.fx #b5.in .b5pause{opacity:1}
.fx #b5.in .b5cta{opacity:1}

.fx #b5 .hl,.fx #b5 .ep,.fx #b5 .dy,.fx #b5 .mt,.fx #b5 .leaf,.fx #b5 .beat i,.fx #b5 .fi,.fx #b5 .wv i{animation-duration:7.2s;animation-iteration-count:infinite;animation-fill-mode:both;animation-play-state:paused}
.fx #b5 .sc.live .loop *{animation-play-state:running}
.fx.b5stop #b5 .sc.live .loop *{animation-play-state:paused}
.fx #b5 .hl:nth-child(1){animation-name:hl0}.fx #b5 .hl:nth-child(2){animation-name:hl1}.fx #b5 .hl:nth-child(3){animation-name:hl2}.fx #b5 .hl:nth-child(4){animation-name:hl3}
.fx #b5 .nw .ep{animation-name:epn}
@keyframes hl0{0%{opacity:0;transform:translateY(6px)}5%,54%{opacity:1;transform:none}60%,100%{opacity:0;transform:translateY(-3px)}}
@keyframes hl1{0%,1.5%{opacity:0;transform:translateY(6px)}6.5%,46%{opacity:1;transform:none}52%,100%{opacity:0;transform:translateY(-21px) scaleY(.6)}}
@keyframes hl2{0%,3%{opacity:0;transform:translateY(6px)}8%,38%{opacity:1;transform:none}44%,100%{opacity:0;transform:translateY(-21px) scaleY(.6)}}
@keyframes hl3{0%,4.5%{opacity:0;transform:translateY(6px)}9.5%,30%{opacity:1;transform:none}36%,100%{opacity:0;transform:translateY(-21px) scaleY(.6)}}
@keyframes epn{0%,57%{opacity:0;transform:scaleX(.35)}64%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}

.fx #b5 .cal *{animation-duration:8s}
.fx #b5 .dy{animation-name:dy}
.fx #b5 .mt{animation-name:mt;animation-delay:calc(var(--k)*.06s)}
.fx #b5 .cal .ep{animation-name:epw}
@keyframes dy{0%{opacity:0}5%,44%{opacity:.62}54%,100%{opacity:0}}
@keyframes mt{0%{opacity:0;transform:scaleY(.2)}6%,36%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.6,0,.3,1)}
  56%{opacity:1;transform:translate(calc((2 - var(--c))*20cqw - 2px),calc(39px - var(--y) - var(--h)/2)) scale(.42,.3)}
  60%,100%{opacity:0;transform:translate(calc((2 - var(--c))*20cqw - 2px),calc(39px - var(--y) - var(--h)/2)) scale(.42,.3)}}
@keyframes epw{0%,55%{opacity:0;transform:translateX(-50%) scaleX(.3)}63%,90%{opacity:1;transform:translateX(-50%)}96%,100%{opacity:0;transform:translateX(-50%)}}

.fx #b5 .bk *{animation-duration:1.6s;animation-timing-function:cubic-bezier(.55,0,.35,1)}
.fx #b5 .leaf{animation-name:leaf}
.fx #b5 .beat i{animation-name:beat;animation-delay:calc(var(--k)*.045s);animation-timing-function:ease-out}
@keyframes leaf{0%,22%{transform:rotateY(0)}72%,100%{transform:rotateY(-180deg)}}
@keyframes beat{0%,66%{transform:scaleY(var(--s))}76%{transform:scaleY(calc(var(--s)*.55 + .45))}100%{transform:scaleY(var(--s))}}

.fx #b5 .fl *{animation-duration:6.6s}
.fx #b5 .fi{animation-name:fall;animation-delay:calc(var(--k)*1.3s)}
.fx #b5 .wv i{animation-name:wv}
.fx #b5 .wv i:nth-child(odd){animation-delay:.05s}
@keyframes fall{0%{opacity:0;transform:translateY(-6px)}6%,20%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.5,0,.9,.5)}
  34%{opacity:1;transform:translateY(36px) rotate(7deg)}40%,100%{opacity:0;transform:translateY(48px) rotate(10deg) scale(.3)}}
@keyframes wv{0%,33%,44%,53%,64%,73%,84%,100%{transform:none}37%,57%,77%{transform:scaleY(1.7)}}

/* Desktop below 1100 px and upright tablets: two by two. Phones: one under another, no wave. */
@media (max-width:1099px){
  .scenes{grid-template-columns:repeat(2,minmax(0,1fr));padding-bottom:44px}
  .sc:nth-child(2),.sc:nth-child(4){--dy:44px}
  .sc:nth-child(3){--dy:0px}
  .b5foot{margin-top:24px}
}
@media (max-width:719px){
  #b5{padding:24px var(--pad) 72px}
  .b5head{flex-direction:column;align-items:flex-start;gap:18px}
  #b5 h2{font-size:clamp(40px,12.2vw,68px)}
  .b5pause{margin:0}
  .scenes{grid-template-columns:minmax(0,1fr);gap:12px;margin-top:28px;padding-bottom:0}
  .sc{--tp:22px}
  .sc,.sc:nth-child(n){--dy:0px}
  .sc h3{font-size:clamp(26px,7.6vw,32px)}
  .sc p{font-size:16px}
  .scp{margin-top:8px}
  .b5foot{margin-top:28px}
}
.b5foot{display:flex;justify-content:center;margin-top:clamp(40px,7vh,96px)}
.b5cta{scroll-margin:96px 0}
@media (prefers-reduced-motion:reduce){#b5 .loop *{animation:none!important}}
.rm #b5 .loop *{animation:none!important}

/* ---------- block 6: voices and languages ---------- */
/* Coral rises out of the Canvas of block 5 as block 4 rose in Lilac. The portrait's backdrop is brought to
   Coral (make-voices.py), so the photo has no top or side edge of its own: on a computer its left side sits
   on the left edge of the screen, and the rows where the shirt reaches the free right side stay under the
   Canvas swell. That swell is lower and flatter than the one of block 4 (18 to 46 px above the bottom), so
   the shoulders stand above it and not only the head. Each voice keeps its own rhythm of bars; the two-host row runs as one conversation. */
#b6{position:relative;overflow:hidden;background:var(--coral);min-height:max(100vh,760px);min-height:max(100svh,760px);
  padding:clamp(120px,18vh,180px) var(--pad) 150px;display:flex;align-items:center}
#b6 .tide{position:absolute;z-index:3;left:0;top:-1px;width:100%;height:clamp(52px,9vh,96px);overflow:hidden;pointer-events:none}
#b6 .tide svg{display:block;width:200%;height:100%;animation:drift 58s linear infinite reverse}
/* The frame shows the rows down to 1565 of the source (1664 wide). The shirt meets the right side from row 1531,
   so at most 34 rows (20 px at the widest frame, 960 px) touch the edge, and the swell never drops below 18 px. */
#b6 .vp{position:absolute;z-index:1;left:-1px;bottom:-6px;width:min(48vw,calc(86vh*1.063),960px);aspect-ratio:1664/1565;overflow:hidden}
#voicer{display:block;width:100%;height:auto;max-width:none;will-change:transform}
.b6copy{position:relative;z-index:2;margin-left:max(53vw,calc(min(48vw,86vh*1.063,960px) + 3vw));max-width:700px;display:flex;flex-direction:column;align-items:flex-start}
#b6 h2{font-weight:600;font-size:clamp(46px,min(5.5vw,10.6vh),112px);line-height:1.02;letter-spacing:-.052em}
#b6 .ln{display:block;overflow:hidden;padding-bottom:.13em;margin-bottom:-.13em}
#b6 .ln>span{display:block}
.b6p{text-wrap:pretty;font-weight:500;font-size:clamp(18px,min(1.45vw,2.5vh),23px);line-height:1.4;letter-spacing:-.018em;max-width:21em;margin-top:clamp(16px,2.6vh,26px)}
.b6n{margin-top:clamp(20px,3.2vh,32px);font-weight:600;font-size:clamp(18px,min(1.5vw,2.6vh),24px);line-height:1;letter-spacing:-.03em;white-space:nowrap}
.b6n b{font-weight:600;font-size:2em;letter-spacing:-.055em;vertical-align:-.06em}
/* Three strips in Ink: voice one speaks in Signal, voice two in Canvas, and the two-host row passes the
   turn between the two colours. No sample, no play button: the bars are the only sound here. */
.vx{list-style:none;margin:clamp(16px,2.6vh,26px) 0 0;padding:0;display:grid;gap:8px;width:min(100%,600px)}
.vo{display:flex;align-items:center;gap:16px;height:clamp(48px,6.2vh,56px);padding:0 0 0 22px;border-radius:999px;background:var(--ink);color:var(--canvas);overflow:hidden}
.vl{flex:none;width:10.4em;font-weight:500;font-size:15px;letter-spacing:-.012em;white-space:nowrap}
.vb{flex:1 1 auto;min-width:0;height:28px;display:flex;align-items:center;overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,#000 78%,transparent 98%);mask-image:linear-gradient(to right,#000 78%,transparent 98%)}
.vb i{flex:none;display:block;width:4px;height:100%;margin-right:4px;border-radius:2px;transform:scaleY(var(--h))}
.vo--one i{background:var(--signal)}
.vo--two i{background:var(--canvas)}
.vo--both .tk{display:flex;align-items:center;height:100%;flex:none}
.vo--both .s1{background:var(--signal)}
.vo--both .s2{background:var(--canvas)}
.vo--both .gap{background:none}
.b6act{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:clamp(20px,3.2vh,32px)}
.b6cta{scroll-margin:96px 0}
.b6pause{appearance:none;flex:none;display:inline-flex;align-items:center;gap:10px;height:42px;padding:0 17px 0 15px;border-radius:999px;background:transparent;border:1.5px solid rgba(21,32,27,.34);color:var(--ink);font-weight:500;font-size:15px;letter-spacing:-.012em;cursor:pointer;transition:border-color .16s,background-color .16s;touch-action:manipulation}
.b6pause:hover{border-color:var(--ink);background:rgba(21,32,27,.06)}
.b6pause[aria-pressed=true] .pz::before{left:1px;width:0;height:0;border-radius:0;background:none;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent currentColor}
.b6pause[aria-pressed=true] .pz::after{display:none}
.rm .b6pause,.no-js .b6pause{display:none}
#swell6{position:absolute;z-index:3;left:0;bottom:-40px;width:100%;height:120px;overflow:hidden;pointer-events:none}
#swell6 svg{display:block;width:200%;height:100%;animation:drift 50s linear infinite}
#top.oncoral{background:var(--coral)}

/* Arrival, as in block 4, then the rhythms. They run only while the block is on screen, and Pause motion holds them. */
.fx #b6 .ln>span{transform:translateY(106%);transition:transform .95s cubic-bezier(.16,.84,.24,1)}
.fx #b6 .ln:nth-child(2)>span{transition-delay:.07s}
.fx .b6p,.fx .b6n,.fx .b6act{opacity:0;transform:translateY(14px);transition:opacity .6s .28s,transform .8s .28s cubic-bezier(.16,.84,.24,1)}
.fx .b6n{transition-delay:.36s}
.fx .vo{opacity:0;transform:translateX(-18px);transition:opacity .6s,transform .9s cubic-bezier(.16,.84,.24,1)}
.fx .vo:nth-child(1){transition-delay:.42s}.fx .vo:nth-child(2){transition-delay:.5s}.fx .vo:nth-child(3){transition-delay:.58s}
.fx .b6act{transition-delay:.62s}
.fx #b6.in .ln>span,.fx #b6.in .b6p,.fx #b6.in .b6n,.fx #b6.in .vo,.fx #b6.in .b6act{opacity:1;transform:none}
.fx .vo--one i{animation:v1 1.15s ease-in-out infinite both paused;animation-delay:calc(var(--k)*-.083s)}
.fx .vo--two i{animation:v2 2.7s ease-in-out infinite both paused;animation-delay:calc(var(--k)*-.045s)}
.fx .vo--both .tk{animation:turns 34s linear infinite paused}
.fx #b6.live .vb i,.fx #b6.live .tk,.fx #b6.live svg{animation-play-state:running}
.fx.b6stop #b6.live .vb i,.fx.b6stop #b6.live .tk,.fx.b6stop #b6.live svg,.paused6 #b6 svg{animation-play-state:paused}
/* Voice one: quick, even syllables. Voice two: slower phrases with a breath between them. */
@keyframes v1{0%,100%{transform:scaleY(calc(var(--h)*.42))}50%{transform:scaleY(var(--h))}}
@keyframes v2{0%,62%,100%{transform:scaleY(calc(var(--h)*.36))}14%{transform:scaleY(var(--h))}28%{transform:scaleY(calc(var(--h)*.5))}42%{transform:scaleY(calc(var(--h)*.9))}}
@keyframes turns{to{transform:translate3d(-50%,0,0)}}

/* Phones: text and strips first, then the portrait across the whole screen, so both sides of the shirt
   leave over the screen edges and the frame (rows down to 1900) stands on the swell. */
@media (max-width:719px){
  #b6{flex-direction:column;align-items:stretch;min-height:0;padding:clamp(76px,13vh,104px) var(--pad) 0}
  #b6 .tide{height:48px}
  #b6 .tide svg{width:400%;animation-duration:66s}
  .b6copy{margin-left:0;max-width:none}
  #b6 h2{font-size:clamp(40px,12.2vw,68px)}
  .b6p{font-size:18px;margin-top:16px}
  .b6n{margin-top:22px;font-size:18px}
  .vx{width:100%;margin-top:18px}
  .vo{height:50px;padding-left:18px;gap:12px}
  .vl{width:9.6em;font-size:14px}
  .b6act{margin-top:22px}
  #b6 .vp{order:2;position:relative;left:auto;bottom:auto;width:auto;aspect-ratio:1664/1900;margin:calc(26px - 11vw) calc(-1*var(--pad)) -6px}
  #swell6{bottom:-44px}
  #swell6 svg{width:400%;animation-duration:62s}
}
/* Upright tablets stack the same way as phones, with the portrait across the whole width: a narrower frame
   would show its free right side, and the swell would leave only the head above it. */
@media (min-width:720px) and (max-aspect-ratio:1/1){
  #b6{flex-direction:column;align-items:stretch;min-height:0}
  .b6copy{margin-left:0;max-width:none}
  #b6 .vp{order:2;position:relative;left:auto;bottom:auto;width:auto;aspect-ratio:1664/1900;margin:calc(30px - 11vw) calc(-1*var(--pad)) -6px}
}
@media (min-width:720px) and (max-aspect-ratio:1/1){
  #b6{padding:clamp(110px,13vh,150px) var(--pad) 0}
  #b6 h2{font-size:clamp(46px,9.4vw,112px)}
  .b6p{font-size:clamp(20px,2.8vw,28px)}
}
@media (prefers-reduced-motion:reduce){
  #b6 .tide svg,#swell6 svg,#b6 .vb i,#b6 .tk{animation:none!important}
  #voicer{will-change:auto}
}
.rm #b6 .tide svg,.rm #swell6 svg,.rm #b6 .vb i,.rm #b6 .tk{animation:none!important}

/* ---------- block 8: the finale and the footer ----------
   The page ends where it began: the question of the hero on Signal, and the wordmark across the whole width.
   Block 6 hands over through its swell, now Signal, so there is no edge between the two. The letters rise
   out of the bottom of their own box as the page reaches its end (translation only, so no letter changes
   shape); the dot of the i lands last, the question types again, and the i and the two l answer each letter.
   All of it stops by itself: the caret blinks three times (3.2 s) and goes. Without JavaScript or with reduced motion it simply stands. */
#b8{position:relative;margin-top:-1px;background:var(--signal);padding:clamp(48px,9vh,104px) var(--pad) 0;display:flex;flex-direction:column;align-items:center;text-align:center}
.b8in{display:flex;flex-direction:column;align-items:center;width:100%}
.b8q{position:relative;font-weight:600;font-size:clamp(34px,min(4.7vw,8.2vh),86px);line-height:1.04;letter-spacing:-.052em;max-width:16em;text-wrap:balance}
.b8q .ghost{color:transparent}
.b8q .caret{display:none}
.fx .b8q .caret{display:block}
.b8q .caret.blink{animation:b8blink 1.06s steps(1,end) 3 both}
.b8q .caret.gone{opacity:0;transition:opacity .4s}
@keyframes b8blink{50%{opacity:0}}
.b8act{display:flex;flex-wrap:wrap;gap:12px 14px;justify-content:center;margin-top:clamp(20px,3.6vh,36px)}
.b8act .cta,.b8act .later{scroll-margin:96px 0 160px}
.b8start{display:inline-flex;align-items:center;text-decoration:none}
/* The box clips only at its bottom edge, so the letters surface from below and the dot can fall from above. */
.b8wm{width:100%;margin-top:clamp(28px,6vh,72px);clip-path:inset(-80vh -4vw 0 -4vw)}
#wm8{display:block;width:100%;height:auto;overflow:visible}
.fx #wm8 .g{will-change:transform}
/* One thin line under the wordmark, then the footer row: Early access on the left, the three links on the right. */
#foot{position:relative;background:var(--signal);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:0 24px;padding:6px var(--pad) calc(10px + env(safe-area-inset-bottom))}
#foot::before{content:"";position:absolute;left:var(--pad);right:var(--pad);top:0;height:1.5px;background:rgba(21,32,27,.22)}
.ea{font-weight:600;font-size:15px;letter-spacing:-.012em;line-height:44px}
.fl{display:flex;gap:0 22px}
.fl a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);font-weight:500;font-size:15px;letter-spacing:-.012em;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px;text-decoration-color:rgba(21,32,27,.35);transition:text-decoration-color .16s}
.fl a:hover{text-decoration-color:var(--ink)}
#top.onsignal{background:var(--signal)}
#top.on.away{visibility:hidden;transform:translateY(-110%);transition:transform .28s cubic-bezier(.2,.7,.2,1),visibility 0s .28s,background-color .22s}
.rm #top.on.away{transition:none}

/* Arrival of the copy, as in the middle blocks. The letters and the dot are moved by lower.js. */
.fx .b8act{opacity:0;transform:translateY(14px);transition:opacity .6s .12s,transform .8s .12s cubic-bezier(.16,.84,.24,1)}
.fx #b8.in .b8act{opacity:1;transform:none}

@media (max-width:719px){
  #b8{padding-top:clamp(40px,8vh,72px)}
  .b8q{font-size:clamp(32px,9.6vw,52px);max-width:11em}
  .b8act .cta,.b8act .later{min-height:50px}
  .b8wm{margin-top:clamp(28px,5vh,48px)}
  .fl{gap:0 18px}
}
@media (prefers-reduced-motion:reduce){
  .b8q .caret{display:none!important}
  .b8act{transition:none!important}
  #top.on.away{transition:none}
}
.rm .b8q .caret{display:none!important}