/* toast.day/events: Toast for event hosts.
   One system top to bottom: near-black and paper sheets that slide over each other, a small uppercase label with a dot,
   big Zodiak headings with the key words in volt (dark) or under a volt highlighter (paper), real footage and product
   mockups. Zodiak 400 only and never under 20px; Satoshi 500 text, 700 for labels and buttons. Volt is an accent, never
   a button or a big fill. Type scale: 12 label / 15 small / 17 body / 20 lede / 32 h3 / 76 h2 / 124 display */
@font-face{font-family:"Zodiak";src:url(../fonts/zodiak.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Satoshi";src:url(../fonts/satoshi500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Satoshi";src:url(../fonts/satoshi700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{--ink:#0b0b0a;--ink2:#151513;--paper:#f4f4f1;--paper2:#e4e4dd;--volt:#eeff3a;
  --mute-d:#b5b5ae;--faint-d:#8c8c86;--line-d:#2c2c28;
  --mute-l:#55554e;--faint-l:#6e6e67;--line-l:rgba(11,11,10,.12);
  --out:cubic-bezier(.2,0,0,1);
  --gut:clamp(20px,4vw,48px);
  --serif:"Zodiak",ui-serif,Georgia,serif;--sans:"Satoshi",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;background:var(--ink);color:var(--ink);font-family:var(--sans);font-weight:500;letter-spacing:-.01em;-webkit-font-smoothing:antialiased}
main{overflow-x:clip}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
figure{margin:0}
.wrap{max-width:calc(1240px + 2 * var(--gut));margin:0 auto;padding-left:max(var(--gut),env(safe-area-inset-left,0px));padding-right:max(var(--gut),env(safe-area-inset-right,0px))}
.wide{max-width:calc(1400px + 2 * var(--gut));margin:0 auto;padding-inline:var(--gut)}
h1,h2,h3{margin:0;font-weight:400;text-wrap:balance}
p{margin:0;text-wrap:pretty}
em{font-style:normal}

.dark{background:var(--ink);color:var(--paper)}
.light{background:var(--paper);color:var(--ink)}
section{padding-block:clamp(96px,11vw,160px);position:relative}
/* each section slides over the one before like a stacked sheet; dark on dark just continues */
main section{border-radius:36px 36px 0 0;margin-top:-36px}
.dark + .dark{border-radius:0;margin-top:0}

/* label: dot + small caps */
.kick{display:flex;align-items:center;gap:10px;font-weight:700;font-size:12px;line-height:1;letter-spacing:.16em;text-transform:uppercase}
.kick::before{content:"";width:7px;height:7px;border-radius:50%;flex:none}
.dark .kick{color:var(--mute-d)}.dark .kick::before{background:var(--volt)}
.light .kick{color:var(--mute-l)}.light .kick::before{background:var(--ink)}

h1,h2{font-family:var(--serif);letter-spacing:-.035em}
h1{font-size:clamp(46px,8.6vw,124px);line-height:.98;margin-top:28px;max-width:11.5em}
h2{font-size:clamp(36px,5.3vw,76px);line-height:1.02;margin-top:24px;max-width:16em}
.dark h1 em,.dark h2 em{color:var(--volt)}
.light h2 em{background:linear-gradient(transparent 16%,var(--volt) 16%,var(--volt) 92%,transparent 92%);padding:0 .06em;margin:0 -.06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.lede{font-size:clamp(17px,1.5vw,20px);line-height:1.55}
.dark .lede,.dark .sub{color:var(--mute-d)}
.light .lede{color:var(--mute-l)}
.note{font-size:13px;color:var(--faint-d)}

/* buttons */
.pill{display:inline-flex;align-items:center;justify-content:center;height:54px;padding:0 28px;border-radius:100px;font-size:16px;font-weight:700;letter-spacing:-.005em;white-space:nowrap;transition:transform .15s var(--out),background .15s var(--out),box-shadow .15s var(--out)}
.pill:active{transform:scale(.97)}
.pill:focus-visible,.links a:focus-visible,.nl:focus-visible,.lockup:focus-visible,.foot a:focus-visible,.tile:focus-visible{outline:2px solid var(--volt);outline-offset:3px}
.pill.white{background:#fff;color:#000}.pill.white:hover{background:#e6e6e1}
.pill.ghost{color:var(--paper);box-shadow:inset 0 0 0 1px rgba(244,244,241,.28)}.pill.ghost:hover{box-shadow:inset 0 0 0 1px rgba(244,244,241,.7);background:rgba(244,244,241,.04)}
.pill.sm{height:38px;padding:0 16px;font-size:14px}
.ctas{display:flex;flex-wrap:wrap;gap:12px}

/* floating bar */
.nv{position:fixed;top:12px;left:0;right:0;z-index:50;padding-inline:max(12px,calc(var(--gut) - 12px));pointer-events:none}
.nvin{pointer-events:auto;max-width:calc(1240px + 24px);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;height:58px;padding:0 10px 0 18px;border-radius:100px;
  background:rgba(17,17,15,.72);-webkit-backdrop-filter:saturate(1.4) blur(18px);backdrop-filter:saturate(1.4) blur(18px);box-shadow:inset 0 0 0 1px rgba(244,244,241,.08),0 10px 30px -12px rgba(0,0,0,.5);
  color:var(--paper);transition:background .3s var(--out),box-shadow .3s var(--out)}
.nv.clear .nvin{background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.nv.clear .pill.sm{opacity:0;transform:translateY(-4px);pointer-events:none}
.nv .pill.sm{transition:opacity .3s var(--out),transform .3s var(--out),background .15s var(--out)}
.lockup{display:inline-flex;align-items:center;gap:9px;font-family:var(--serif);font-size:23px;letter-spacing:-.02em;color:var(--paper)}
.lockup svg{height:22px;width:auto}
.nvr{display:flex;align-items:center;gap:22px}
.nl{font-size:15px;color:var(--mute-d);transition:color .15s var(--out)}
.nl:hover{color:var(--paper)}

/* hero */
.hero{position:relative;z-index:0;padding-bottom:clamp(48px,6vw,88px);overflow:hidden}
.top{padding-top:clamp(132px,15vw,188px);padding-bottom:clamp(48px,5.5vw,80px)}
.hrow{display:flex;align-items:flex-end;justify-content:space-between;gap:48px;margin-top:clamp(28px,3.4vw,48px)}
.sub{font-size:clamp(17px,1.5vw,20px);line-height:1.55;max-width:31em}
.hrow .ctas{flex:none}
.hero::before{content:"";position:absolute;left:50%;top:44%;width:min(1400px,120vw);height:70%;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(238,255,58,.07),transparent);pointer-events:none;z-index:-1}
/* opening: label, headline, row and trailer rise in turn. Pure CSS, so it also runs without JS */
.in1,.in2,.in3,.in4{animation:rise 1s var(--out) both}
.in2{animation-delay:.08s}.in3{animation-delay:.2s}.in4{animation-delay:.34s;animation-duration:1.3s}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* a video frame built in HTML: picture, subtitle, mark, progress. Big in the hero, small in the kit */
.vid{position:relative;overflow:hidden;aspect-ratio:16/9;background:#1a1a17;border-radius:16px;isolation:isolate;container-type:inline-size}
.vid img,.vid canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vid img{object-position:42% 40%}
.vid::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.26) 0%,transparent 22%,transparent 55%,rgba(0,0,0,.62) 100%);pointer-events:none;z-index:1}
.vid .cap{position:absolute;left:6%;right:6%;bottom:max(13%,34px);z-index:2;text-align:center;color:#fff;font-weight:500;font-size:clamp(13px,3.1cqi,32px);line-height:1.25;letter-spacing:-.015em;text-shadow:0 1px 14px rgba(0,0,0,.55);text-wrap:balance}
.vid .who{position:absolute;left:0;right:0;bottom:max(6.4%,14px);z-index:2;text-align:center;color:rgba(255,255,255,.78);font-size:clamp(11px,1.4cqi,16px);line-height:1.2;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.vid .who b{color:#fff;font-weight:700;margin-right:.45em}
.vid .mark{position:absolute;top:4%;right:3%;z-index:2;display:inline-flex;align-items:center;gap:.5em;padding:.5em .9em .5em .75em;border-radius:100px;background:rgba(11,11,10,.42);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;font-weight:700;font-size:clamp(10px,1.3cqi,14px);letter-spacing:0}
.vid .mark svg{height:1.15em;width:auto}
.vid .bar{position:absolute;left:3%;right:3%;bottom:3.4%;height:3px;border-radius:3px;background:rgba(255,255,255,.28);z-index:2;overflow:hidden}
.vid .bar i{position:absolute;inset:0;background:var(--volt);transform-origin:left;transform:scaleX(var(--p,.36))}
#reelv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.line .cap,.line .who,.fmt .cap{transition:opacity .25s var(--out),transform .35s var(--out)}
.line.off .cap,.line.off .who,.fmt .cap.off{opacity:0;transform:translateY(5px)}
.line.empty .cap,.line.empty .who,.fmt .cap.empty{opacity:0}

.trailer .vid{border-radius:24px;box-shadow:0 0 0 1px rgba(244,244,241,.08),0 60px 140px -40px rgba(0,0,0,.95)}
.trailer .note{margin-top:18px;padding-inline:4px}

/* her words: a hairline, then the label and her name in the narrow column, the quote in the wide one */
.said{padding-block:clamp(72px,8vw,120px) clamp(120px,12vw,176px)}
.sgrid{display:grid;grid-template-columns:4fr 8fr;column-gap:48px;grid-template-areas:"k q" "b q";align-items:start}
.sgrid::before{content:"";grid-column:1 / -1;grid-row:1;align-self:start;height:1px;background:var(--line-d);margin-top:-40px}
.said .kick{grid-area:k;padding-top:18px}
.said blockquote{grid-area:q;margin:0;font-family:var(--serif);font-size:clamp(32px,4.5vw,64px);line-height:1.08;letter-spacing:-.03em;text-wrap:balance}
.said blockquote em{color:var(--volt)}
.by{grid-area:b;align-self:end;display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding-bottom:10px}
.by p{display:grid;gap:4px;font-size:15px;line-height:1.4;color:var(--mute-d);max-width:16em}
.by b{color:var(--paper);font-weight:700;font-size:18px}
.av{width:88px;height:88px;border-radius:50%;flex:none;object-fit:cover}

/* problem: words left, a camera roll right whose photos fade out as it comes into view (the moments that disappear).
   Stats sit quietly on a hairline, not as slide size figures */
.pgrid{display:grid;grid-template-columns:7fr 5fr;gap:clamp(40px,6vw,96px);align-items:center}
.ptext h2{max-width:11.5em}
.ptext .lede{margin-top:32px;max-width:31em;color:var(--ink)}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:48px;padding-top:28px;border-top:1px solid var(--line-l);max-width:34em}
.fact{font-size:15px;line-height:1.5;color:var(--mute-l)}
.fact b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(44px,4.4vw,60px);line-height:1;letter-spacing:-.04em;color:var(--ink);margin-bottom:12px}
.fact mark{background:linear-gradient(transparent 58%,var(--volt) 58%,var(--volt) 90%,transparent 90%);color:inherit;padding:0 .04em}
.src{font-size:12px;color:var(--faint-l);margin-top:24px}
.phones{position:relative;height:560px;display:flex;justify-content:center;align-items:center}
.ph{position:absolute;width:236px;aspect-ratio:9/19;border-radius:38px;background:#0b0b0a;padding:7px;box-shadow:0 0 0 1px rgba(11,11,10,.12),0 40px 80px -24px rgba(11,11,10,.5);transition:transform .9s var(--out),opacity .9s var(--out),filter .9s var(--out)}
.ph .scr{height:100%;border-radius:31px;overflow:hidden;background:#fff;padding:38px 6px 6px}
.roll{font-weight:700;font-size:16px;letter-spacing:-.01em;color:#0b0b0a;margin:0 6px 10px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.grid img{width:100%;aspect-ratio:1;object-fit:cover;display:block;transition:opacity 1.4s var(--out),filter 1.4s var(--out)}
.ph.m{z-index:2}
.ph.l{transform:translateX(-58%) translateY(26px) rotate(-7deg) scale(.86);opacity:.34;filter:blur(1.5px) grayscale(.8)}
.ph.r{transform:translateX(58%) translateY(40px) rotate(7deg) scale(.86);opacity:.2;filter:blur(2.5px) grayscale(1)}
/* resting state: the roll fades row by row, from the newest photos at the top to the oldest */
.ph.m .grid img:nth-child(n+4){opacity:.82;--i:1}
.ph.m .grid img:nth-child(n+7){opacity:.56;filter:grayscale(.5);--i:2}
.ph.m .grid img:nth-child(n+10){opacity:.32;filter:grayscale(.85);--i:3}
.ph.m .grid img:nth-child(n+13){opacity:.14;filter:grayscale(1);--i:4}
.ph.m .grid img:nth-child(n+16){opacity:.05;filter:grayscale(1);--i:5}
.ph.m .grid img{transition-delay:calc(.4s + var(--i,0) * .22s)}
/* before it scrolls in (JS only): every photo still there, the side phones tucked behind */
.phones.rv:not(.in) .grid img{opacity:1!important;filter:none!important;transition:none}
.phones.rv:not(.in) .ph.l,.phones.rv:not(.in) .ph.r{transform:translateX(0) translateY(20px) scale(.86)}
.phones.rv{opacity:1!important;transform:none!important}

/* how it works: three steps on one rail. The art sits on a shared baseline, so the numbers and titles line up */
.how h2{max-width:15em}
.steps{list-style:none;margin:clamp(56px,7vw,96px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);column-gap:40px}
.steps li{display:flex;flex-direction:column}
.art{height:380px;display:flex;align-items:flex-end;justify-content:center;margin-bottom:40px}
.art img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain;transition:transform .6s var(--out)}
.steps li:hover .art img{transform:translateY(-8px)}
.num{position:relative;display:flex;align-items:center;height:32px;margin-bottom:24px}
.num::before,.num::after{content:"";position:absolute;left:0;top:50%;height:1px;width:calc(100% + 40px)}
.num::before{background:var(--line-d)}
.num::after{background:var(--volt);transform-origin:left;transform:scaleX(1);transition:transform 1s var(--out);transition-delay:calc(var(--d,0ms) + .35s)}
.steps li:last-child .num::before,.steps li:last-child .num::after{width:100%}
.steps li.rv:not(.in) .num::after{transform:scaleX(0)}
.num i{position:relative;z-index:1;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--volt);color:var(--ink);font-style:normal;font-weight:700;font-size:14px;box-shadow:0 0 0 6px var(--ink)}
.steps h3{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.3vw,32px);line-height:1.1;letter-spacing:-.02em}
.steps p{font-size:17px;line-height:1.55;color:var(--mute-d);margin-top:12px;max-width:22em}
.how .note{margin-top:56px}

/* kit: the same clip in each shape, side by side on one baseline, so only the shape changes */
.kit h2{max-width:14em}
.formats{display:grid;grid-template-columns:16fr 8fr 5.0625fr;gap:clamp(16px,2.4vw,32px);align-items:end;margin-top:clamp(56px,7vw,96px)}
.fmt{margin:0;display:grid;gap:16px;min-width:0}
.fmt .vid{border-radius:14px;box-shadow:0 1px 2px rgba(11,11,10,.08),0 30px 70px -28px rgba(11,11,10,.5);transition:transform .6s var(--out)}
.fmt:hover .vid{transform:translateY(-6px)}
.f16{aspect-ratio:16/9}.f45{aspect-ratio:4/5}.f916{aspect-ratio:9/16}
.fmt canvas{opacity:0;transition:opacity .6s var(--out)}
.formats.live canvas{opacity:1}
.fmt .cap{bottom:12%;font-size:clamp(11px,5.4cqi,26px)}
.f16 .cap{font-size:clamp(12px,3.2cqi,26px)}
.fmt figcaption{font-size:15px;line-height:1.4;color:var(--mute-l)}
.fmt figcaption b{color:var(--ink);font-weight:700;margin-right:.3em}
.links{display:flex;flex-wrap:wrap;gap:24px;font-weight:700;font-size:16px;margin-top:32px}
.links a{display:inline-flex;align-items:center;gap:8px;box-shadow:inset 0 -2px 0 var(--volt);padding-bottom:3px}
.links a::after{content:"→";transition:transform .3s var(--out)}
.links a:hover::after{transform:translateX(4px)}

/* event types: a bento of stills. On a computer a tile with a clip plays it while hovered or focused */
.bento{list-style:none;margin:clamp(48px,6vw,80px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:clamp(220px,22vw,300px);gap:16px;
  grid-template-areas:"a a b" "c d b" "e f f"}
.tile{position:relative;overflow:hidden;border-radius:20px;background:#1a1a17;isolation:isolate;outline:none}
.t-a{grid-area:a}.t-b{grid-area:b}.t-c{grid-area:c}.t-d{grid-area:d}.t-e{grid-area:e}.t-f{grid-area:f}
.tile img,.tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--out),opacity .4s var(--out)}
.tile video{opacity:0}
.tile.on video{opacity:1}
.tile:hover img,.tile:hover video,.tile:focus-visible img,.tile:focus-visible video{transform:scale(1.04)}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,10,0) 38%,rgba(11,11,10,.82) 100%);z-index:1;pointer-events:none}
.tl{position:absolute;left:24px;right:24px;bottom:22px;z-index:2;color:#fff}
.tl h3{font-family:var(--serif);font-weight:400;font-size:clamp(22px,2.3vw,32px);line-height:1.06;letter-spacing:-.02em}
.tl p{font-size:15px;line-height:1.4;color:rgba(255,255,255,.76);margin-top:8px;max-width:26em}
.t-a .tl h3,.t-f .tl h3{font-size:clamp(26px,3.2vw,44px)}

/* ending: the photo rises out of the dark, one big line, the ask */
.cta{overflow:hidden;padding-block:clamp(200px,24vw,320px) clamp(96px,10vw,144px);text-align:center}
.cta .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.cta::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,var(--ink) 0%,rgba(11,11,10,.25) 28%,rgba(11,11,10,.5) 52%,rgba(11,11,10,.92) 80%,var(--ink) 100%)}
.cta .wrap{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}
.cta .kick{color:#d8d8d2}
.cta h2{font-size:clamp(48px,9vw,136px);line-height:.96;letter-spacing:-.04em;max-width:9em;margin-top:28px}
.cta .ctas{justify-content:center;margin-top:48px}

.fin{padding-block:40px 48px}
.finin{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-top:32px;border-top:1px solid var(--line-d)}
.foot{display:flex;flex-wrap:wrap;gap:24px;font-size:14px}
.foot a{color:var(--faint-d);transition:color .15s var(--out)}
.foot a:hover{color:var(--paper)}

/* scroll in: only when JS has marked an element below the fold; the resting state is fully visible */
.rv{opacity:0;transform:translateY(24px);transition:opacity .8s var(--out),transform 1s var(--out);transition-delay:var(--d,0ms)}
.rv.in{opacity:1;transform:none}

@media (max-width:1000px){
  .hrow{flex-direction:column;align-items:flex-start;gap:32px}
}
@media (max-width:900px){
  main section{border-radius:24px 24px 0 0;margin-top:-24px}
  .dark + .dark{border-radius:0;margin-top:0}
  .nl{display:none}
  .sgrid{grid-template-columns:1fr;grid-template-areas:"k" "q" "b";row-gap:28px}
  .sgrid::before{display:none}
  .said .kick{padding-top:0}
  .by{flex-direction:row;align-items:center;padding-bottom:0}
  .av{width:60px;height:60px}
  .pgrid{grid-template-columns:1fr}
  .phones{height:470px}
  .ph{width:196px;border-radius:32px}.ph .scr{border-radius:26px}
  .steps{grid-template-columns:1fr;row-gap:72px}
  .art{height:auto;margin-bottom:32px}
  .art img{max-height:360px}
  .num::before,.num::after{width:100%}
  }
@media (max-width:700px){
  .trailer .vid{border-radius:14px}
  .trailer .vid .cap{bottom:40px}
  .trailer .vid .who{bottom:17px}
  .hrow .ctas,.cta .ctas{width:100%}
  .ctas .pill{flex:1 1 100%}
  .formats{grid-template-columns:1fr 1fr;gap:24px 14px}
  .formats .fmt:first-child{grid-column:1 / -1}
  .fmt figcaption{font-size:14px}
  .bento{grid-template-columns:1fr 1fr;grid-auto-rows:190px;gap:10px;grid-template-areas:"a a" "b c" "b d" "e e" "f f"}
  .tile{border-radius:16px}
  .tl{left:14px;right:14px;bottom:14px}
  .tl p{display:none}
  .t-a .tl p,.t-e .tl p,.t-f .tl p{display:block;font-size:14px}
  .finin{flex-direction:column;align-items:flex-start}
}
@media (max-width:420px){
  .nvin{height:52px;padding-left:16px}
  .lockup{font-size:21px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

/* how it works, the main site's interaction: one step in the spotlight at a time (computers move on by themselves,
   hover or click jumps, it waits while the mouse rests on the lit step); phones light the step you've scrolled to.
   The rail fills in volt up to the lit step. Without JS every step shows */
.steps.live li{cursor:pointer}
.steps.live .art,.steps.live h3,.steps.live p{transition:opacity 1.2s var(--out),filter 1.2s var(--out)}
.steps.live li:not(.on) .art,.steps.live li:not(.on) h3,.steps.live li:not(.on) p{opacity:.26;filter:saturate(.3)}
.steps.live li:not(.on):hover .art,.steps.live li:not(.on):hover h3,.steps.live li:not(.on):hover p{opacity:.55;filter:saturate(.7)}
.steps.live li.on .art img{transform:translateY(-8px)}
.steps.live .num i{transition:background .8s,color .8s,box-shadow .8s}
.steps.live li:not(.on):not(.past) .num i{background:var(--ink);color:rgba(244,244,241,.45);box-shadow:0 0 0 6px var(--ink),inset 0 0 0 1px rgba(244,244,241,.25)}
.steps.live li .num::after{transition:transform 1.4s var(--out);transition-delay:0s;transform:scaleX(0)}
.steps.live li.past .num::after{transform:scaleX(1)}
.steps.live li:focus-visible{outline:2px solid var(--volt);outline-offset:8px;border-radius:12px}
/* the format examples: crop every shape around her face */
.fmt .vid img{object-position:51% 40%}

/* Caitlin: one centered moment, her face, her words, her name and Stone & Chalk's mark, set apart from the hero */
.said{background:#161512}
.scenter{display:flex;flex-direction:column;align-items:center;text-align:center;gap:0}
.scenter .av{width:104px;height:104px;box-shadow:0 0 0 4px #161512,0 0 0 5px rgba(238,255,58,.55)}
.scenter blockquote{margin:36px auto 0;max-width:17em;font-family:var(--serif);font-size:clamp(32px,4.6vw,64px);line-height:1.1;letter-spacing:-.03em;text-wrap:balance}
.scenter blockquote em{color:var(--volt)}
.who2{display:grid;gap:4px;margin-top:32px;font-size:15px;color:var(--mute-d)}
.who2 b{color:var(--paper);font-weight:700;font-size:18px}
.org{height:30px;width:auto;margin-top:24px;opacity:.85}
@media (max-width:900px){.scenter .av{width:84px;height:84px}.scenter blockquote{margin-top:28px}}

/* the trailer sits on the same edges as the headline and the button at every scroll position */
.trailer.wide{max-width:calc(1240px + 2 * var(--gut))}
/* at the very top the nav's button is hidden, so the link moves to the right edge instead of leaving a gap */
.nv.clear .pill.sm{display:none}
.nv.clear .nvr{padding-right:8px}

/* what you get: LinkedIn leads at full size, then the trailer in every shape, then the recap page and each guest's own toast */
.kit h2{max-width:13em}
.kli{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(40px,7vw,120px);align-items:center;margin-top:clamp(56px,7vw,96px)}
.kli-t h3,.m2 h3{font-family:var(--serif);font-weight:400;letter-spacing:-.025em;line-height:1.06}
.kli-t h3{font-size:clamp(32px,3.8vw,54px);max-width:11em}
.kli-t h3 em{background:linear-gradient(transparent 14%,var(--volt) 14%,var(--volt) 94%,transparent 94%);padding:0 .06em;margin:0 -.06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.kli-t .lede{margin-top:22px;max-width:25em;color:var(--mute-l)}
/* the LinkedIn post, drawn in HTML so every word is crisp */
.li{margin:0;background:#fff;border-radius:16px;padding:20px 20px 8px;box-shadow:0 1px 2px rgba(11,11,10,.06),0 40px 90px -36px rgba(11,11,10,.45);color:#191919;max-width:620px;width:100%}
.li-h{display:flex;align-items:center;gap:12px}
.li-av{width:48px;height:48px;border-radius:10px;background:#0b0b0a;display:grid;place-items:center;flex:none}
.li-av svg{height:24px;width:auto}
.li-h p{display:grid;gap:1px;flex:1;min-width:0;font-size:15px;line-height:1.2}
.li-h b{font-weight:700}
.li-h small{font-size:12.5px;color:#666}
.li-f{font-weight:700;font-size:14px;color:#0a66c2}
.li-t{font-size:14.5px;line-height:1.45;margin-top:14px}
.li-car{display:grid;grid-template-columns:1fr .62fr;gap:8px;margin-top:14px}
.qc{position:relative;background:#0b0b0a;color:#f4f4f1;border-radius:10px;aspect-ratio:1;padding:clamp(14px,2.2vw,24px);display:flex;flex-direction:column;container-type:inline-size}
.qc-k{display:flex;align-items:center;gap:6px;font-weight:700;font-size:clamp(8px,3cqi,11px);letter-spacing:.14em;text-transform:uppercase;color:rgba(244,244,241,.7)}
.qc-k svg{height:1.2em;width:auto}
.qc-m{font-family:var(--serif);font-size:clamp(28px,13cqi,52px);line-height:.9;color:var(--volt);margin-top:8%}
.qc p{font-family:var(--serif);font-size:clamp(18px,8.4cqi,34px);line-height:1.1;letter-spacing:-.02em;margin-top:2%}
.qc-who{display:flex;align-items:center;gap:8px;margin-top:auto;font-size:clamp(10px,3.6cqi,13px);color:rgba(244,244,241,.65)}
.qc-who img{width:2.4em;height:2.4em;border-radius:50%;object-fit:cover}
.qc-who b{color:#f4f4f1;font-weight:700;margin-right:2px}
.li-ph{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;border-radius:10px}
.li-r{display:flex;justify-content:space-around;padding:12px 0 6px;margin-top:10px;border-top:1px solid #ececec;font-size:13.5px;font-weight:700;color:#666}
/* the trailer in every shape */
.kit .formats{margin-top:clamp(96px,11vw,160px);padding-top:clamp(56px,6vw,88px);border-top:1px solid var(--line-l)}
.fmt figcaption{font-size:17px;color:var(--mute-l)}
.fmt .cap,.f16 .cap{font-size:clamp(11px,1.5vw,20px)}
.f916 .cap{font-size:clamp(10px,1.1vw,15px)}
/* the recap page and each guest's own toast */
.more2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,40px);margin-top:clamp(96px,11vw,160px);padding-top:clamp(56px,6vw,88px);border-top:1px solid var(--line-l)}
.m2{margin:0;display:grid;gap:28px}
.m2a{height:440px;border-radius:20px;background:#e9e8e2;display:flex;align-items:flex-end;justify-content:center;padding-top:40px;overflow:hidden}
.m2 h3{font-size:clamp(26px,2.6vw,36px)}
.m2 figcaption p{font-size:17px;line-height:1.5;color:var(--mute-l);margin-top:10px;max-width:26em}
/* a guest's own toast, a phone drawn in HTML */
.gt-v img{width:100%;height:100%;object-fit:cover}
.gt-v::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,rgba(0,0,0,.65))}
.gt-n b{color:#f4f4f1;font-weight:700}
@media (max-width:900px){
  .kli{grid-template-columns:1fr;gap:36px}
  .kli .li{order:2}
  .more2{grid-template-columns:1fr}
  .m2a{height:380px}
}
/* every caption keeps room for two lines, so the three frames share one bottom edge even when the narrow one wraps */
.fmt figcaption{min-height:2.9em;line-height:1.45}

/* the recap page and the guest's toast: the same phone, same size, same place in each panel, running off the bottom */
.m2a{height:460px;padding-top:44px;align-items:flex-start}
.phn{width:min(300px,78%);height:calc(100% + 40px);background:#0b0b0a;border-radius:44px 44px 0 0;padding:11px 11px 0;box-shadow:0 30px 70px -24px rgba(11,11,10,.45)}
.phs{height:100%;border-radius:34px 34px 0 0;background:linear-gradient(#1d1a17,#121110 40%);padding:30px 18px 0;color:#f4f4f1;overflow:hidden}
.rc-k{display:flex;align-items:center;gap:7px;font-weight:700;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,244,241,.65)}
.rc-k svg{height:13px;width:auto}
.rc-t{font-family:var(--serif);font-size:26px;letter-spacing:-.02em;line-height:1.05;margin-top:10px}
.rc-d{font-size:12px;color:rgba(244,244,241,.55);margin-top:4px}
.rc-v{position:relative;margin-top:14px;aspect-ratio:16/10;border-radius:12px;overflow:hidden}
.rc-v img{width:100%;height:100%;object-fit:cover}
.rc-p{position:absolute;left:50%;top:50%;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;box-shadow:inset 0 0 0 2px #fff;background:rgba(0,0,0,.35)}
.rc-p::after{content:"";position:absolute;left:15px;top:12px;border-left:11px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent}
.rc-l{font-size:12.5px;font-weight:700;margin-top:16px}
.rc-g{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin-top:8px;border-radius:10px;overflow:hidden}
.rc-g img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.gt2{display:flex;flex-direction:column}
.gt2-v{position:relative;margin-top:14px;aspect-ratio:4/5;border-radius:14px;overflow:hidden}
.gt2-v img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.gt2-v::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,rgba(0,0,0,.7))}
.gt2-c{position:absolute;left:12px;right:12px;bottom:14px;z-index:1;text-align:center;font-size:14px;line-height:1.3}
.gt2-n{display:flex;gap:6px;justify-content:center;margin-top:14px;font-size:13px;color:rgba(244,244,241,.6)}
.gt2-n b{color:#f4f4f1;font-weight:700}
.gt2-b{align-self:center;margin-top:12px;height:38px;padding:0 20px;border-radius:100px;background:#fff;color:#0b0b0a;font-weight:700;font-size:13.5px;display:inline-flex;align-items:center}
@media (max-width:900px){.m2a{height:420px;padding-top:36px}}
.gt2-v{aspect-ratio:1}

/* the guest's toast always fits the visible part of the phone: the clip takes whatever room is left,
   so the share button never runs under the panel's edge, whatever the screen width */
.m2a{--ph:460px;--pt:44px;height:var(--ph);padding-top:var(--pt)}
.gt2{height:calc(var(--ph) - var(--pt) - 11px);padding-bottom:22px}
.gt2-v{aspect-ratio:auto;flex:1 1 auto;min-height:0}
@media (max-width:900px){.m2a{--ph:420px;--pt:36px}}

/* the guest's name and line sit inside the clip, so the share button keeps its full size */
.gt2-o{position:absolute;left:12px;right:12px;bottom:14px;z-index:1;display:grid;gap:4px;justify-items:center;text-align:center}
.gt2-o .gt2-c{position:static}
.gt2-o .gt2-n{margin-top:0;font-size:12px;color:rgba(244,244,241,.75)}
.gt2-b{flex:none;align-self:stretch;justify-content:center;height:44px;margin-top:16px;font-size:14px}

/* the hero's first frame sits under the video, so phones that hold back autoplay (Low Power Mode, some browsers) still show a picture */
.trailer .still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#reelv{opacity:0;transition:opacity .4s}
#reelv.on{opacity:1}