/*
  Bragzo landing hero. Reference stylesheet.
  Ported 1:1 from the design canvas (design/Main.dc.html). Values are final unless HANDOFF.md says otherwise.
  The room is a "stage" locked to the photo's 2752x1536 aspect; everything placed on the photo
  (TV screen, VCR clocks, glow) is positioned in % of the stage so it tracks the image at any viewport.
*/
:root{
  /* Linen Stone palette (21st.dev @serafimcloud) */
  --linen:#F4EFE4; --linen-2:#E9E4D8; --stone:#CFC8B8; --stone-2:#A89F8F;
  --charcoal:#2E2E2E; --ink:#1E1E1E; --coral:#F26A4B; --night:#050403;
  /* iMessage (iOS light) */
  --bubble-in:#E9E9EB; --bubble-out:#0B84FE;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--night)}
a{color:#F4EFE4}a:hover{color:#FFFFFF}

/* ---------- frame ---------- */
.root{position:relative;width:100%;height:100vh;height:100dvh;min-height:520px;overflow:hidden;background:#050403;color:#F4EFE4;font-family:Geograph,"Figtree","Century Gothic",Futura,"Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased}
.l-morning{--refl:.42;--glow:.16;--beam:.5;--motes:.75}
.l-afternoon{--refl:.55;--glow:.12;--beam:.7;--motes:1}
.l-golden{--refl:.5;--glow:.24;--beam:.85;--motes:.9}
.l-night{--refl:.07;--glow:.85;--beam:0;--motes:0}

/* ---------- the room ---------- */
.scene{position:absolute;inset:0;overflow:hidden;z-index:0;animation:scenein 2.4s ease-out both}
.stage{position:absolute;left:50%;top:50%;width:max(100vw,179.17vh);height:max(100vh,55.81vw);transform:translate(-50%,-50%)}
.room{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none}
.beam{position:absolute;inset:0;pointer-events:none;background:linear-gradient(118deg,rgba(255,214,150,0) 6%,rgba(255,214,150,.13) 20%,rgba(255,214,150,0) 36%,rgba(255,214,150,.07) 48%,rgba(255,214,150,0) 62%);opacity:var(--beam);will-change:opacity;animation:breathe 12s ease-in-out infinite}
.motes{position:absolute;left:6%;top:3%;width:56%;height:82%;pointer-events:none;opacity:var(--motes)}
.mote{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(255,240,210,.95) 0,rgba(255,240,210,.5) 45%,rgba(255,240,210,0) 72%);will-change:transform,opacity;animation:drift 14s ease-in-out infinite}
.tvglow{position:absolute;left:27%;top:4%;width:64%;height:104%;pointer-events:none;background:radial-gradient(closest-side,var(--gc,#bcd0ff) 0%,rgba(0,0,0,0) 100%);opacity:calc(var(--glow) * .6);will-change:opacity;animation:glowflick 2.8s steps(9) infinite}

/* VCR clocks: real local time */
.vcr{position:absolute;background:#060908;border-radius:10%/26%;display:flex;align-items:center;justify-content:center;gap:5%;container-type:size;box-shadow:inset 0 0 2px rgba(0,0,0,.9)}
.vcr1{left:63.64%;top:20.47%;width:4.2%;height:2.58%}
.vcr2{left:61.05%;top:75.82%;width:4.25%;height:2.64%}
.dgts{display:flex;align-items:center;gap:4cqh;height:100%}
.dg{position:relative;height:56cqh;aspect-ratio:.54;transform:skewX(-7deg)}
.sg{position:absolute;display:block;background:#4dff74;opacity:.07;border-radius:1px}
.sg.on{opacity:1;box-shadow:0 0 3cqh rgba(77,255,116,.85)}
.sg.a{left:15%;right:15%;top:0;height:11%}
.sg.g{left:15%;right:15%;top:44.5%;height:11%}
.sg.d{left:15%;right:15%;bottom:0;height:11%}
.sg.f{left:0;top:7%;width:17%;height:40%}
.sg.b{right:0;top:7%;width:17%;height:40%}
.sg.e{left:0;bottom:7%;width:17%;height:40%}
.sg.c{right:0;bottom:7%;width:17%;height:40%}
.colon{display:flex;flex-direction:column;gap:13cqh;animation:blink 2s steps(1) infinite}
.colon i{display:block;width:6cqh;height:6cqh;background:#4dff74;box-shadow:0 0 3cqh #4dff74}
.ampm{font:800 20cqh/1 Figtree,sans-serif;color:#4dff74;align-self:flex-end;margin-bottom:24cqh;text-shadow:0 0 3cqh rgba(77,255,116,.8)}

/* the CRT */
.screen{position:absolute;left:48.84%;top:31.71%;width:19.26%;height:28.32%;border-radius:7%/9%;overflow:hidden;background:#090b0a;container-type:size}
.power{position:absolute;inset:0;transform-origin:50% 50%;animation:poweron 1.4s cubic-bezier(.2,.75,.2,1) .7s both}
.tube{position:absolute;inset:0;transform-origin:50% 50%;filter:saturate(1.08) contrast(1.05)}
.tube.flick{animation:roll .5s cubic-bezier(.2,.8,.3,1) both}
.ch{position:absolute;left:-4%;top:-4%;width:108%;height:108%;object-fit:cover;opacity:0;display:block}
.ch.on{opacity:1;animation:kb 10s ease-out both}
.bug{position:absolute;left:6%;bottom:8%;display:flex;font:800 5.2cqh/1 Figtree,sans-serif;letter-spacing:.05em;text-transform:uppercase;box-shadow:0 .6cqh 1.6cqh rgba(0,0,0,.45)}
.bug span{padding:1.6cqh 2.2cqw;background:rgba(6,8,14,.82);color:#fff;white-space:nowrap}
.bug .lg{background:#1d3bbd}
.bug .sc{background:#f4f1e8;color:#0c0c0c}
.bug span:empty{display:none}
.osd{position:absolute;right:7%;top:6%;font-family:VT323,ui-monospace,monospace;font-size:12cqh;line-height:1;color:#62ff7f;text-shadow:0 0 1.4cqh rgba(98,255,127,.85),0 0 .3cqh rgba(98,255,127,1);letter-spacing:.04em}
.static{position:absolute;inset:0;background-color:#777;background-image:url(../assets/static-noise.webp);background-size:46cqw auto;filter:contrast(1.7) brightness(1.15);animation:snow .14s steps(3) infinite}
.scan{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(to bottom,rgba(0,0,0,.34) 0,rgba(0,0,0,.34) 1px,rgba(0,0,0,0) 1px,rgba(0,0,0,0) 3px)}
.scan::after{content:"";position:absolute;left:0;right:0;top:-20%;height:20%;background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,.07),rgba(255,255,255,0));animation:rollbar 6.5s linear infinite}
.refl{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:var(--refl);pointer-events:none}
.glass{position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 7cqh 2.5cqh rgba(0,0,0,.78),inset 0 0 1.4cqh rgba(0,0,0,.9);background:radial-gradient(120% 90% at 28% 16%,rgba(255,255,255,.11),rgba(255,255,255,0) 46%)}
.tvhit{position:absolute;left:48.84%;top:31.71%;width:19.26%;height:28.32%;border-radius:7%/9%;border:0;padding:0;margin:0;background:transparent;cursor:pointer;z-index:2}
.tvhit:focus-visible{outline:3px solid var(--linen);outline-offset:6px}

/* grade, vignette, grain */
.grade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to bottom,rgba(5,4,3,.55) 0%,rgba(5,4,3,0) 15%),linear-gradient(to top,rgba(5,4,3,.94) 0%,rgba(5,4,3,.62) 22%,rgba(5,4,3,0) 50%),radial-gradient(70% 70% at 0% 100%,rgba(5,4,3,.6),rgba(5,4,3,0) 62%),radial-gradient(140% 120% at 55% 45%,rgba(0,0,0,0) 52%,rgba(0,0,0,.6) 100%)}
.grain{position:absolute;inset:-12%;z-index:2;pointer-events:none;background-image:url(../assets/grain.webp);background-size:220px auto;opacity:.22;will-change:transform;animation:grain .6s steps(4) infinite}

/* ---------- UI layer ---------- */
.ui{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;pointer-events:none}
.bar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 clamp(16px,4.4vw,72px);background:#050403;pointer-events:auto}
.bar.top{height:clamp(56px,8vh,76px);background:transparent;text-shadow:0 1px 12px rgba(0,0,0,.55)}
.bar.bottom{height:clamp(40px,5.6vh,52px);font-size:12px;color:rgba(207,200,184,.85);background:#1E1E1E}
.logo{display:flex;align-items:center;gap:10px;font-weight:900;font-size:22px;letter-spacing:-.045em;color:#F4EFE4;text-decoration:none}
.logo b{display:block;width:9px;height:9px;border-radius:50%;background:var(--coral);box-shadow:0 0 10px rgba(242,106,75,.55);margin-top:7px}
.live{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,239,228,.8)}
.live i{display:block;width:8px;height:8px;border-radius:50%;background:#F26A4B;box-shadow:0 0 10px #F26A4B;animation:pulse 1.6s ease-in-out infinite}
.fine{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px}
.fine a{color:rgba(207,200,184,.85);text-decoration:none}
.fine a:hover{color:#F4EFE4}
.hint{display:flex;align-items:center;gap:8px}
.main{position:relative;flex:1 1 auto;min-height:0}
.tvspace{display:none}

.copy{position:absolute;left:clamp(20px,4.4vw,72px);bottom:clamp(22px,4.6vh,54px);max-width:min(660px,54vw);pointer-events:auto}
.h1{margin:0;font-weight:800;font-size:clamp(54px,6.9vw,124px);line-height:.9;letter-spacing:-.05em;text-wrap:balance;text-shadow:0 2px 30px rgba(0,0,0,.35);animation:rise 1s cubic-bezier(.2,.8,.2,1) 1s both}
.h1 em{font-style:normal;color:var(--coral)}
.sub{margin:clamp(14px,2vh,22px) 0 0;max-width:30ch;font-size:clamp(16px,1.35vw,20px);line-height:1.38;font-weight:500;color:rgba(244,239,228,.9);text-wrap:pretty;animation:rise 1s cubic-bezier(.2,.8,.2,1) 1.2s both}
.ctarow{display:flex;align-items:center;flex-wrap:wrap;gap:18px 22px;margin-top:clamp(20px,3vh,32px);animation:rise 1s cubic-bezier(.2,.8,.2,1) 1.4s both}
.cta img{width:42px;height:42px;display:block}
.qrwrap{display:flex;align-items:center;gap:14px}
.qr{position:relative;width:74px;height:74px;border-radius:14px;background:#F4EFE4;box-shadow:0 0 0 1px #D2CBBB;flex:none;display:flex;align-items:center;justify-content:center;color:#151515;font-size:10px;font-weight:800;letter-spacing:.08em}
.qr i{position:absolute;width:17px;height:17px;border:4px solid #151515;border-radius:4px;box-sizing:border-box}
.qr i:nth-child(1){left:8px;top:8px}.qr i:nth-child(2){right:8px;top:8px}.qr i:nth-child(3){left:8px;bottom:8px}
.num{display:flex;flex-direction:column;gap:4px}
.num small{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(244,239,228,.66)}
.num span{font-size:18px;font-weight:700;letter-spacing:-.01em}
.note{margin:14px 0 0;font-size:13px;font-weight:500;color:rgba(244,239,228,.7);animation:rise 1s cubic-bezier(.2,.8,.2,1) 1.6s both}

/* CTA: liquid glass pill. Edge light from layered inset highlights, the room behind refracted through an SVG displacement filter (Chromium); other browsers get a frosted blur. */
.cta{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:12px;height:62px;padding:0 28px 0 10px;border-radius:999px;background:rgba(244,239,228,.05);color:var(--linen);font-weight:800;font-size:19px;letter-spacing:-.01em;text-decoration:none;text-shadow:0 1px 8px rgba(0,0,0,.35);transition:transform .3s ease}
.cta:hover{color:#FFFFFF;transform:scale(1.05)}
.cta .lg-edge{position:absolute;inset:0;z-index:0;border-radius:999px;pointer-events:none;transition:box-shadow .3s ease;
  box-shadow:0 0 8px rgba(0,0,0,.03),0 2px 6px rgba(0,0,0,.08),inset 3px 3px .5px -3.5px rgba(255,255,255,.09),inset -3px -3px .5px -3.5px rgba(255,255,255,.85),inset 1px 1px 1px -.5px rgba(255,255,255,.6),inset -1px -1px 1px -.5px rgba(255,255,255,.6),inset 0 0 6px 6px rgba(255,255,255,.12),inset 0 0 2px 2px rgba(255,255,255,.06),0 0 12px rgba(0,0,0,.15)}
.cta:hover .lg-edge{box-shadow:0 0 10px rgba(0,0,0,.05),0 4px 10px rgba(0,0,0,.12),inset 3px 3px .5px -3.5px rgba(255,255,255,.12),inset -3px -3px .5px -3.5px rgba(255,255,255,.95),inset 1px 1px 1px -.5px rgba(255,255,255,.7),inset -1px -1px 1px -.5px rgba(255,255,255,.7),inset 0 0 8px 6px rgba(255,255,255,.16),inset 0 0 2px 2px rgba(255,255,255,.08),0 0 16px rgba(0,0,0,.18)}
.cta .lg-bd{position:absolute;inset:0;z-index:-1;border-radius:999px;overflow:hidden;pointer-events:none;-webkit-backdrop-filter:blur(10px) saturate(1.5);backdrop-filter:blur(10px) saturate(1.5)}
@supports (backdrop-filter:url(#container-glass)){ .cta .lg-bd{backdrop-filter:url(#container-glass) saturate(1.4)} }
.cta img,.cta span{position:relative;z-index:1}
.lg-defs{position:absolute;width:0;height:0;overflow:hidden}
.cta:focus-visible{outline:2px solid #F4EFE4;outline-offset:4px}

/* ---------- iMessage thread ---------- */
.thread{position:absolute;right:clamp(20px,4vw,64px);top:5%;bottom:20%;width:clamp(272px,24vw,360px);display:flex;flex-direction:column;justify-content:flex-end;gap:0;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",system-ui,sans-serif;pointer-events:none;transition:opacity .38s ease,transform .38s ease;animation:fadein 1s ease 2.2s backwards}
.thread.leaving{opacity:0;transform:translateY(-10px)}
.thead{display:flex;flex-direction:column;align-items:center;gap:3px;margin-bottom:10px;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.75)}
.thead .av{width:38px;height:38px;border-radius:50%;background:var(--charcoal);display:flex;align-items:center;justify-content:center;font:900 18px/1 Figtree,sans-serif;color:var(--linen);letter-spacing:-.04em;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 0 1px rgba(244,239,228,.18),0 4px 14px rgba(0,0,0,.35)}
.thead .nm{font-size:12px;font-weight:600}
.thead .ts{font-size:11px;font-weight:500;color:rgba(255,255,255,.82)}
.stack{display:flex;flex-direction:column;will-change:transform;backface-visibility:hidden}
.row{display:flex;flex-direction:column;padding-top:2px}
.row.first{padding-top:9px}
.row.in{align-items:flex-start}
.row.out{align-items:flex-end}
.msg{position:relative;max-width:84%;padding:8px 13px 9px;border-radius:19px;font-size:16px;line-height:1.3;letter-spacing:-.012em;box-shadow:0 8px 18px rgba(0,0,0,.24);will-change:transform}
.msg.in{background:var(--bubble-in);color:#0b0b0c;transform-origin:0 100%}
.msg.out{background:var(--bubble-out);color:#fff;transform-origin:100% 100%}
.row.morph .msg{animation:morphin .42s cubic-bezier(.2,1.12,.35,1) both}
.row.grow.out .msg{animation:sent .32s ease-out both}
.row.typingrow .msg{animation:typein .34s cubic-bezier(.2,1.3,.4,1) both}
.msg .tl{display:none;position:absolute;bottom:0;width:20px;height:20px}
.msg.tail .tl{display:block}
.msg.in .tl{left:-6px;fill:var(--bubble-in)}
.msg.out .tl{right:-6px;fill:var(--bubble-out);transform:scaleX(-1)}
.msg .txt{position:relative;display:block}
.from{position:relative;display:block;font-size:12px;font-weight:600;color:#66666c;margin-bottom:1px}
.typing{display:flex;align-items:center;padding:15px 15px}
.typing .dots{display:flex;gap:5px}
.typing .dots i{display:block;width:8px;height:8px;border-radius:50%;background:#8e8e93;animation:dot 1.3s ease-in-out infinite}
.typing .dots i:nth-child(2){animation-delay:.2s}
.typing .dots i:nth-child(3){animation-delay:.4s}
.typing .b1,.typing .b2{position:absolute;display:block;border-radius:50%;background:var(--bubble-in)}
.typing .b1{width:11px;height:11px;left:-2px;bottom:-2px}
.typing .b2{width:5px;height:5px;left:-8px;bottom:-8px}
.rc{padding:3px 4px 0 0;font-size:11px;font-weight:500;color:rgba(255,255,255,.85);text-shadow:0 1px 8px rgba(0,0,0,.8);animation:fadein .35s ease both}

/* ---------- motion ---------- */
@keyframes scenein{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes breathe{0%,100%{opacity:var(--beam)}50%{opacity:calc(var(--beam) * .4)}}
@keyframes drift{0%{transform:translate(0,0);opacity:0}18%{opacity:.95}50%{transform:translate(22px,-30px)}82%{opacity:.6}100%{transform:translate(-10px,-64px);opacity:0}}
@keyframes glowflick{0%{opacity:calc(var(--glow) * .6)}20%{opacity:calc(var(--glow) * .54)}35%{opacity:calc(var(--glow) * .6)}55%{opacity:calc(var(--glow) * .49)}70%{opacity:calc(var(--glow) * .58)}100%{opacity:calc(var(--glow) * .6)}}
@keyframes poweron{0%{opacity:0;transform:scale(.02,.004);}12%{opacity:1;transform:scale(.6,.006);}38%{transform:scale(1,.006);}70%{transform:scale(1,1);}100%{opacity:1;transform:scale(1,1);}}
@keyframes roll{0%{transform:translateY(-9%) skewX(2deg);}45%{transform:translateY(2%);}100%{transform:none;}}
@keyframes kb{from{transform:scale(1) translate(0,0)}to{transform:scale(1.075) translate(-1.6%,-1.1%)}}
@keyframes snow{0%{transform:translate(0,0)}33%{transform:translate(-5%,3%)}66%{transform:translate(3%,-5%)}100%{transform:translate(-5%,5%)}}
@keyframes rollbar{from{transform:translateY(0)}to{transform:translateY(620%)}}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-1%,3%)}100%{transform:translate(3%,-1%)}}
@keyframes blink{0%{opacity:1}50%{opacity:.15}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes morphin{from{transform:scale(.86,.8);opacity:.75}to{transform:none;opacity:1}}
@keyframes sent{from{opacity:.55}to{opacity:1}}
@keyframes typein{from{transform:scale(.35);opacity:0}to{transform:none;opacity:1}}
@keyframes dot{0%,60%,100%{transform:scale(.82);opacity:.38}30%{transform:scale(1);opacity:1}}

/* ---------- phone / portrait ---------- */
@media (max-aspect-ratio: 4/5){
  .stage{width:182.75vh;height:102vh;left:50%;top:calc(76px - 32.34vh);transform:translateX(-58.47%)}
  .grade{background:linear-gradient(to bottom,rgba(5,4,3,.6) 0%,rgba(5,4,3,0) 12%,rgba(5,4,3,0) 36%,rgba(5,4,3,.55) 50%,rgba(5,4,3,.92) 64%,#050403 76%)}
  .bar.top{height:52px;padding:0 18px}
  .logo{font-size:20px}
  .live{font-size:10.5px;letter-spacing:.12em}
  .main{display:flex;flex-direction:column}
  .tvspace{display:block;flex:none;height:calc(38px + 28.9vh)}
  .thread{position:relative;right:auto;top:auto;bottom:auto;width:auto;flex:1 1 0;min-height:0;overflow:hidden;padding:0 18px 4px;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 34px);mask-image:linear-gradient(to bottom,transparent 0,#000 34px)}
  .thead{display:none}
  .msg{font-size:15px;padding:7px 12px 8px;max-width:86%}
  .typing{padding:15px}
  .copy{position:relative;left:auto;bottom:auto;max-width:none;flex:none;padding:10px 18px 16px}
  .h1{font-size:clamp(40px,12.4vw,58px)}
  .sub{font-size:15.5px;margin-top:10px;max-width:34ch}
  .ctarow{margin-top:18px}
  .cta{width:100%;justify-content:center;height:58px;font-size:18px;box-sizing:border-box}
  .cta img{width:38px;height:38px}
  .qrwrap{display:none}
  .note{text-align:center;margin-top:10px;font-size:12px}
  .bar.bottom{height:auto;padding:9px 18px 12px;font-size:10.5px;flex-direction:column;align-items:flex-start;gap:4px}
  .fine{gap:4px 12px}
  .hint{display:none}
}
@media (prefers-reduced-motion: reduce){
  .scene,.h1,.sub,.ctarow,.note,.thread,.power,.tube.flick,.ch.on,.row,.row .msg,.mote,.beam,.tvglow,.grain,.scan::after,.static,.typing .dots i,.live i,.colon{animation:none}
  .rc{animation:none}
  .cta,.cta .lg-edge{transition:none}
  .thread.leaving{transform:none}
}

/* Production accessibility and resilient viewport layout. */
@font-face{font-family:Figtree;src:url('/assets/fonts/figtree-latin-wght-normal.woff2') format('woff2');font-style:normal;font-weight:300 900;font-display:swap}
@font-face{font-family:VT323;src:url('/assets/fonts/vt323-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;left:16px;top:12px;transform:translateY(-150%);z-index:20;padding:12px 16px;background:var(--linen);color:var(--ink);border-radius:10px;font-family:Figtree,sans-serif}
.skip-link:focus{transform:none}
:focus-visible{outline:3px solid var(--linen);outline-offset:4px}
.demo-controls{display:flex;align-items:center;gap:18px}
.motion-toggle{font:600 12px Figtree,sans-serif;color:var(--linen);background:rgba(5,4,3,.4);border:1px solid rgba(244,239,228,.35);border-radius:30px;min-width:58px;min-height:44px;cursor:pointer}
.paused *,.paused *::before,.paused *::after{animation-play-state:paused!important}
.paused .scene,.paused .power,.paused .h1,.paused .sub,.paused .ctarow,.paused .note,.paused .thread,.paused .row .msg{animation:none!important;opacity:1}
.static{inset:-8%}
.qr{width:88px;height:88px;background:#fff;border-radius:8px;overflow:hidden}
.qr img{display:block;width:100%;height:100%}
.copy-number{padding:6px 0;min-height:44px;background:none;border:0;border-bottom:1px dashed rgba(244,239,228,.4);color:var(--linen);font:700 17px Figtree,sans-serif;cursor:pointer}
.num small,.note{color:#e9e4d8}
.action-status:not(.sr-only){font-size:13px;line-height:1.4;max-width:32ch;color:var(--linen)}
.fine a{padding:8px 0;text-decoration:underline;text-underline-offset:3px}
.msg.out{background:#0875e1}
.msg.out .tl{fill:#0875e1}
.bar.top{padding-top:env(safe-area-inset-top)}
.bar.bottom{padding-bottom:env(safe-area-inset-bottom)}
@media (min-aspect-ratio: 4/5) and (max-width:1050px){.copy{max-width:49vw}.h1{font-size:clamp(48px,7vw,76px)}.thread{width:29vw;right:24px;bottom:28%}.ctarow{gap:12px}.qrwrap .num{display:none}.hint{display:none}.sub{font-size:16px}}
@media (max-aspect-ratio:4/5){
 .root{min-height:640px}
 .stage{width:182.75dvh;height:102dvh;top:calc(76px - 32.34dvh)}
 .tvspace{height:calc(38px + 28.9dvh)}
 .bar.top{height:calc(52px + env(safe-area-inset-top));padding-left:18px;padding-right:18px}
 .demo-controls{gap:8px}.motion-toggle{min-width:48px;font-size:11px}.live{font-size:9px;gap:6px;letter-spacing:.07em}
 .bar.bottom{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
 .fine a{padding:4px 0}
 .copy{padding-bottom:12px}.ctarow{margin-top:14px}.note{font-size:12px}
}
@media (max-aspect-ratio:4/5) and (max-height:720px){
 .h1{font-size:40px}.sub{font-size:14px}.ctarow{margin-top:12px}.cta{height:52px}.note{margin-top:8px}
 .tvspace{height:calc(25px + 25vh)}
 .stage{height:90vh;width:161.253vh;top:calc(66px - 28.54vh)}
 .thread{min-height:92px}.fine{font-size:10px}.bar.bottom{padding-top:5px}
}
@media (max-height:540px) and (min-aspect-ratio:4/5){.root{min-height:540px}.h1{font-size:48px}.thread{bottom:15%;top:12%;width:28vw}.msg{font-size:13px}.copy{bottom:20px}.sub{font-size:15px}.ctarow{margin-top:12px}.qrwrap{display:none}.bar.bottom{font-size:11px}}
@media (prefers-reduced-motion:reduce){.thread{transition:none}.cta:hover{transform:none}.static{display:none}}
@media (max-aspect-ratio:4/5){.h1 em{display:block}}