/* static/css/topps/landing.css — HoopSim.app landing (templates/landing.html), prefix ld-.
   Built 1:1 from the approved mock v4 (canvas boards 138–145): real app screenshots in phones, color bands, motion.
   Builds on static/css/topps.css. */
html.tp,html.tp body{background:var(--tp-grain) var(--tp-paper)}
body.ld-page{margin:0}
@media (min-width:600px){html.tp{background:#141209}body.ld-page .ld{box-shadow:0 0 80px rgba(0,0,0,.5)}}
.ld a{text-decoration:none}
.ld-logo{color:var(--tp-slab-ink)}
.ld-sticky.on{transform:none}
.ld-sticky a small{white-space:nowrap}
/* ── landing (ld-) ─────────────────────────────────────────── */
.ld{width:100%;max-width:440px;margin:0 auto;box-sizing:border-box;position:relative;overflow-x:clip;background:var(--tp-grain) var(--tp-paper);color:var(--tp-ink);font-family:var(--tp-body);
  --tc:#5D3F8E;--tc2:#E8A020;--tc-ink:#fff;--tc2-ink:#1C1A14}
.ld *{box-sizing:border-box}
.ld-top{position:sticky;top:0;z-index:20;height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;background:var(--tp-slab);color:var(--tp-slab-ink);box-shadow:0 2px 0 var(--tp-gold-fill)}
.ld-logo{font:700 19px/1 var(--tp-display);letter-spacing:.02em;text-transform:uppercase}
.ld-logo i{font-style:normal;color:var(--tp-gold-fill)}
.ld-sign{font:700 10px/1 var(--tp-label);letter-spacing:.14em;text-transform:uppercase;color:var(--tp-slab-ink);border:1.5px solid rgba(243,235,214,.35);padding:8px 10px;border-radius:5px}
.ld-pad{padding:0 18px}
.ld-kick{font:600 10px/1.2 var(--tp-label);letter-spacing:.18em;text-transform:uppercase;color:var(--tp-muted)}
.ld-h1{font:700 40px/.95 var(--tp-display);text-transform:uppercase;letter-spacing:-.005em;margin:10px 0 0}
.ld-h1 em{font-style:normal;color:var(--tp-red)}
.ld-h2{font:700 34px/.98 var(--tp-display);text-transform:uppercase;margin:12px 0 0}
.ld-p{font:16px/1.55 var(--tp-body);color:var(--tp-ink-2);margin:12px 0 0}
.ld-type{font:14px/1.5 var(--tp-type);color:var(--tp-ink-2)}
.ld-num{display:inline-flex;align-items:center;gap:8px}
/* the pack */
.ld-pack{position:relative;margin:42px auto 0;width:280px;height:270px}
.ld-wrap{position:absolute;inset:0;border-radius:6px;background:
  repeating-linear-gradient(135deg,rgba(255,255,255,.08) 0 10px,transparent 10px 20px),linear-gradient(160deg,#B3261E,#7E1712);
  box-shadow:0 18px 30px rgba(28,26,20,.35);clip-path:polygon(0 4%,4% 0,8% 4%,12% 0,16% 4%,20% 0,24% 4%,28% 0,32% 4%,36% 0,40% 4%,44% 0,48% 4%,52% 0,56% 4%,60% 0,64% 4%,68% 0,72% 4%,76% 0,80% 4%,84% 0,88% 4%,92% 0,96% 4%,100% 0,100% 100%,0 100%)}
.ld-wrap-lbl{position:absolute;left:0;right:0;bottom:18px;text-align:center;color:#F3EBD6}
.ld-wrap-lbl b{display:block;font:700 30px/1 var(--tp-display);text-transform:uppercase;letter-spacing:.04em}
.ld-wrap-lbl small{font:700 9px/1.4 var(--tp-label);letter-spacing:.2em;text-transform:uppercase;opacity:.85}
.ld-card{position:absolute;left:36px;top:-24px;width:208px;transform:rotate(-4deg);z-index:2}
.ld-card .tp-window{height:104px}
.ld-blank{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:rgba(255,255,255,.9)}
.ld-blank b{font:700 58px/1 var(--tp-display);letter-spacing:.02em}
.ld-blank small{font:600 9px/1 var(--tp-label);letter-spacing:.2em;text-transform:uppercase;opacity:.8}
.ld-card .tp-stamp{position:absolute;right:-12px;top:-14px;width:70px;height:70px}
.ld-card .tp-stamp b{font-size:15px}
/* doors */
.ld-doors{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}
.ld-door{display:flex;flex-direction:column;gap:8px;padding:14px 12px 12px;border-radius:8px;background:var(--tp-card);border:2px solid var(--tp-ink);box-shadow:0 4px 0 var(--tp-ink);text-decoration:none;color:var(--tp-ink)}
.ld-door.gold{background:var(--tp-gold-fill)}
.ld-door b{font:700 21px/1 var(--tp-display);text-transform:uppercase}
.ld-door span{font:12.5px/1.4 var(--tp-body);color:var(--tp-ink-2)}
.ld-door i{font:700 9.5px/1 var(--tp-label);font-style:normal;letter-spacing:.14em;text-transform:uppercase;margin-top:auto}
.ld-fine{margin-top:12px;text-align:center;font:600 9.5px/1.4 var(--tp-label);letter-spacing:.14em;text-transform:uppercase;color:var(--tp-muted)}
/* beats */
.ld-beat{padding:34px 0 36px;border-top:2px dashed var(--tp-rule-2)}
.ld-pen{display:flex;align-items:center;gap:10px;margin:0 18px}
.ld-pen .flag{position:relative;padding:6px 24px 6px 12px;background:var(--tp-card);font:700 13px/1 var(--tp-display);text-transform:uppercase;letter-spacing:.06em;border-left:5px solid var(--tc);box-shadow:0 1px 0 var(--tp-rule-2);clip-path:polygon(0 0,100% 0,calc(100% - 12px) 50%,100% 100%,0 100%)}
.ld-pen .rule{flex:1;height:2px;background:repeating-linear-gradient(90deg,var(--tp-gold) 0 6px,transparent 6px 10px);opacity:.7}
.ld-obj{margin:22px 18px 0}
.ld-cap{margin:12px 18px 0;font:13px/1.45 var(--tp-type);color:var(--tp-muted)}
/* player card for hidden info */
.ld-pc{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ld-pc .tp-card{padding:5px}
.ld-pc .tp-frame{padding:6px}
.ld-pc .tp-window{height:118px;display:flex;align-items:flex-end;justify-content:center}
.ld-sil{width:70px;height:92px;border-radius:40px 40px 0 0;background:rgba(0,0,0,.28);margin-bottom:-2px}
.ld-pc .tp-namebar{margin:6px -6px 0}
.ld-pc .tp-namebar>.n{padding:5px 8px}
.ld-pc .tp-namebar>.n b{font-size:14px}
.ld-pc .tp-namebar>.flag{min-width:36px;font-size:12px}
.ld-grade{position:absolute;right:6px;top:6px;width:42px;height:42px;border-radius:50%;border:2.5px solid var(--tp-ink);display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--tp-gold-fill);transform:rotate(8deg);font:700 18px/1 var(--tp-display);color:var(--tp-ink)}
.ld-grade small{font:700 5.5px/1 var(--tp-label);letter-spacing:.12em}
.ld-grade.q{background:var(--tp-card);color:var(--tp-muted)}
.ld-who{margin-top:6px;text-align:center;font:700 8.5px/1.3 var(--tp-label);letter-spacing:.14em;text-transform:uppercase;color:var(--tp-muted)}
/* DM for rivals */
.ld-dm{border-radius:10px;background:var(--tp-card);box-shadow:var(--tp-lift);overflow:hidden}
.ld-dm-h{display:flex;align-items:center;gap:10px;padding:10px 12px;background:#1D4E89;color:#fff}
.ld-dm-h b{font:700 16px/1 var(--tp-display);text-transform:uppercase}
.ld-dm-h small{display:block;font:600 8px/1.4 var(--tp-label);letter-spacing:.14em;text-transform:uppercase;opacity:.8}
.ld-av{width:32px;height:32px;border-radius:50%;background:#E8A020;border:2px solid #1C1A14;display:flex;align-items:center;justify-content:center;font:700 13px/1 var(--tp-display);color:#1C1A14;flex:none}
.ld-msg{margin:10px 12px;max-width:82%;padding:10px 12px;border-radius:4px 12px 12px 12px;background:var(--tp-back);font:14px/1.45 var(--tp-body)}
.ld-msg.me{margin-left:auto;border-radius:12px 4px 12px 12px;background:#5D3F8E;color:#fff}
.ld-mem{margin:0 12px 12px;padding:8px 10px;border:1.5px dashed var(--tp-rule-2);border-radius:4px;font:12px/1.4 var(--tp-type);color:var(--tp-muted)}
.ld-mem b{color:var(--tp-red)}
/* compounding ledger */
.ld-led .tp-back-cols,.ld-led .ld-r{display:grid;grid-template-columns:1fr 56px 56px 56px 56px;gap:4px}
.ld-led .ld-r{padding:8px 12px;border-top:var(--tp-dot);font:13px/1.2 var(--tp-type);align-items:center}
.ld-led .ld-r span{text-align:right}
.ld-led .tp-back-cols span:not(:first-child){text-align:right}
.ld-over{color:var(--tp-red);font-weight:700}
.ld-arc{display:flex;align-items:flex-end;gap:8px;margin-top:14px}
.ld-mini{flex:1;border-radius:6px;padding:4px;background:linear-gradient(135deg,var(--tc) 0 50%,var(--tc2) 50%);box-shadow:0 3px 8px rgba(28,26,20,.2)}
.ld-mini>div{background:var(--tp-card);border-radius:3px;padding:5px;text-align:center}
.ld-mini .w{height:44px;border:1.5px solid var(--tp-ink);border-radius:2px;background:radial-gradient(120% 90% at 30% 20%,#7A58B0,#5D3F8E 60%);display:flex;align-items:center;justify-content:center;font:700 16px/1 var(--tp-display);color:#fff}
.ld-mini small{display:block;margin-top:4px;font:700 8px/1 var(--tp-label);letter-spacing:.12em;text-transform:uppercase;color:var(--tp-muted)}
/* media */
.ld-clip{position:relative;padding:14px 14px 16px;background:#F7F1E0;box-shadow:var(--tp-lift);transform:rotate(-1.2deg);
  clip-path:polygon(0 2%,3% 0,7% 1.5%,12% 0,18% 2%,25% .5%,33% 2%,41% 0,50% 1.5%,58% 0,66% 2%,74% .5%,82% 2%,90% 0,96% 1.5%,100% 0,100% 98%,95% 100%,88% 98.5%,80% 100%,71% 98%,62% 100%,53% 98.5%,44% 100%,35% 98%,26% 100%,17% 98.5%,8% 100%,0 98%)}
.ld-mast{display:flex;justify-content:space-between;border-bottom:3px double var(--tp-ink);padding-bottom:6px;font:700 9px/1 var(--tp-label);letter-spacing:.16em;text-transform:uppercase}
.ld-head{font:700 28px/1 var(--tp-display);text-transform:uppercase;margin:10px 0 6px}
.ld-by{font:12px/1.3 var(--tp-type);color:var(--tp-muted)}
.ld-body{font:14px/1.5 var(--tp-body);color:var(--tp-ink-2);margin-top:8px}
.ld-quote{margin-top:8px;padding-left:10px;border-left:3px solid var(--tc);font:italic 14px/1.45 var(--tp-body)}
.ld-show{margin-top:16px;display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:8px;background:var(--tp-slab);color:var(--tp-slab-ink)}
.ld-show .air{flex:none;padding:4px 7px;border-radius:3px;background:var(--tp-red);color:#fff;font:700 8.5px/1 var(--tp-label);letter-spacing:.14em}
.ld-show p{margin:0;font:13.5px/1.45 var(--tp-body)}
.ld-show small{display:block;margin-top:6px;font:700 8.5px/1 var(--tp-label);letter-spacing:.14em;text-transform:uppercase;color:var(--tp-gold-fill)}
/* close */
.ld-close{padding:40px 18px 30px;background:var(--tp-slab);color:var(--tp-slab-ink);text-align:center}
.ld-close .ld-h2{color:var(--tp-slab-ink);font-size:40px}
.ld-close .ld-p{color:rgba(243,235,214,.8)}
.ld-close .ld-door{text-align:left}
.ld-foot{padding:18px;text-align:center;font:600 9.5px/1.8 var(--tp-label);letter-spacing:.14em;text-transform:uppercase;color:var(--tp-muted)}
.ld-foot a{color:var(--tp-ink)}

/* v2 additions */
.ld-play{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:62px;margin-top:22px;border-radius:10px;background:var(--tp-gold-fill);
  border:2.5px solid var(--tp-ink);box-shadow:0 5px 0 var(--tp-ink);font:700 26px/1 var(--tp-display);letter-spacing:.04em;text-transform:uppercase;color:var(--tp-ink);text-decoration:none}
.ld-play i{font-style:normal;font-size:24px}
.ld-sub{margin-top:10px;text-align:center;font:600 10px/1.4 var(--tp-label);letter-spacing:.14em;text-transform:uppercase;color:var(--tp-muted)}
.ld-friends{display:flex;align-items:center;gap:10px;margin-top:14px;padding:12px 14px;border:1.5px dashed var(--tp-rule-2);border-radius:8px;color:var(--tp-ink);text-decoration:none}
.ld-friends b{font:700 15px/1.1 var(--tp-display);text-transform:uppercase;display:block}
.ld-friends span{font:12.5px/1.35 var(--tp-body);color:var(--tp-ink-2)}
.ld-friends i{margin-left:auto;font-style:normal;font:700 18px/1 var(--tp-display)}
.ld-topplay{font:700 12px/1 var(--tp-display);letter-spacing:.08em;text-transform:uppercase;background:var(--tp-gold-fill);color:var(--tp-ink);padding:9px 12px;border-radius:5px}
.ld-topr{display:flex;gap:8px;align-items:center}
.ld-sticky{position:fixed;left:0;right:0;bottom:0;z-index:30;max-width:440px;margin:0 auto;padding-bottom:max(14px,env(safe-area-inset-bottom));transform:translateY(110%);transition:transform .25s ease;padding:10px 14px 14px;background:linear-gradient(transparent,var(--tp-paper) 28%)}
.ld-sticky a{display:flex;align-items:center;justify-content:space-between;padding:0 18px;min-height:54px;border-radius:9px;background:var(--tp-slab);color:var(--tp-slab-ink);
  font:700 20px/1 var(--tp-display);letter-spacing:.05em;text-transform:uppercase;text-decoration:none;box-shadow:0 3px 0 var(--tp-gold-fill)}
.ld-sticky small{font:600 9px/1 var(--tp-label);letter-spacing:.14em;color:var(--tp-gold-fill)}
/* play-by-play sheet */
.ld-pbp{margin-top:22px;border-radius:10px;background:var(--tp-back);box-shadow:0 0 0 4px var(--tp-card) inset,var(--tp-lift);overflow:hidden}
.ld-sb{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:10px 14px;background:var(--tp-slab);color:var(--tp-slab-ink)}
.ld-sb .t{display:flex;align-items:center;gap:8px;font:700 22px/1 var(--tp-display)}
.ld-sb .t:last-child{justify-content:flex-end}
.ld-sb .t i{width:10px;height:10px;border-radius:2px;display:inline-block}
.ld-sb .t small{font:600 9px/1 var(--tp-label);letter-spacing:.12em;opacity:.7}
.ld-sb .c{text-align:center;font:700 9px/1.3 var(--tp-label);letter-spacing:.14em;color:var(--tp-gold-fill)}
.ld-pl{display:grid;grid-template-columns:40px 1fr;gap:8px;padding:9px 14px;border-top:var(--tp-dot);font:13px/1.4 var(--tp-type);color:var(--tp-ink)}
.ld-pl:first-of-type{border-top:0}
.ld-pl .tm{color:var(--tp-muted);font-weight:700}
.ld-pl small{display:block;font:11.5px/1.35 var(--tp-type);color:var(--tp-muted)}
.ld-pl .good{color:var(--tp-green);font-weight:700}
.ld-pl .miss{color:var(--tp-red);font-weight:700}
/* court */
.ld-court{position:relative;border-radius:10px;background:var(--tp-card);box-shadow:var(--tp-lift);padding:12px}
.ld-court svg{display:block;width:100%;height:auto}
.ld-why{margin-top:10px;border-top:2px solid var(--tp-ink)}
.ld-why div{display:flex;justify-content:space-between;gap:10px;padding:7px 2px;border-bottom:var(--tp-dot);font:13px/1.3 var(--tp-type)}
.ld-why b{font-weight:700}
.ld-why .up{color:var(--tp-green);font-weight:700}.ld-why .dn{color:var(--tp-red);font-weight:700}
/* clipboard game plan */
.ld-clip2{position:relative;padding:26px 12px 12px;border-radius:10px;background:linear-gradient(160deg,#9A7748,#7E5E34);box-shadow:0 10px 24px rgba(28,26,20,.35)}
.ld-clip2::before{content:"";position:absolute;left:50%;top:-9px;transform:translateX(-50%);width:112px;height:26px;border-radius:6px;background:linear-gradient(#E4E4E4,#8E8E8E);border:1px solid #666}
.ld-sheet{background:#FBF6E6;border-radius:3px;padding:12px}
.ld-sheet-h{display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px solid var(--tp-ink);padding-bottom:6px}
.ld-sheet-h b{font:700 17px/1 var(--tp-display);text-transform:uppercase}
.ld-sheet-h small{font:700 8.5px/1 var(--tp-label);letter-spacing:.14em;text-transform:uppercase;color:var(--tp-muted)}
.ld-set{display:grid;grid-template-columns:118px 1fr auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px dashed rgba(28,26,20,.22);font:13px/1.2 var(--tp-type)}
.ld-bar{height:6px;border-radius:3px;background:rgba(28,26,20,.12);position:relative}
.ld-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:var(--tp-ink)}
.ld-bar b{position:absolute;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--tp-gold-fill);border:2px solid var(--tp-ink)}
.ld-set em{font-style:normal;font-weight:700}
.ld-chips{display:flex;gap:5px;flex-wrap:wrap}
.ld-chip{padding:4px 8px;border:1.5px solid var(--tp-rule-2);border-radius:4px;font:700 10px/1 var(--tp-label);letter-spacing:.08em;text-transform:uppercase;color:var(--tp-muted)}
.ld-chip.on{background:var(--tp-ink);border-color:var(--tp-ink);color:var(--tp-slab-ink)}
.ld-five{display:flex;gap:4px;margin-top:4px}
.ld-five span{flex:1;padding:6px 0;text-align:center;background:var(--tp-back);border:1px solid var(--tp-rule-2);border-radius:3px;font:700 11px/1 var(--tp-display)}
.ld-five span small{display:block;font:600 7.5px/1.3 var(--tp-label);letter-spacing:.1em;color:var(--tp-muted)}
/* scouting report */
.ld-scout{border-radius:10px;background:var(--tp-back);box-shadow:0 0 0 4px var(--tp-card) inset,var(--tp-lift);overflow:hidden}
.ld-scout-h{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;background:var(--tc);color:#fff}
.ld-scout-h b{font:700 17px/1 var(--tp-display);text-transform:uppercase}
.ld-scout-h small{display:block;font:600 8.5px/1.4 var(--tp-label);letter-spacing:.12em;opacity:.85}
.ld-gr{display:grid;grid-template-columns:1fr 1fr;border-bottom:var(--tp-dot)}
.ld-gr>div{padding:12px;text-align:center}
.ld-gr>div+div{border-left:var(--tp-dot)}
.ld-gr .g{font:700 36px/1 var(--tp-display)}
.ld-gr small{display:block;margin-top:4px;font:700 8.5px/1.3 var(--tp-label);letter-spacing:.12em;text-transform:uppercase;color:var(--tp-muted)}
.ld-range{padding:12px}
.ld-range .lbl{display:flex;justify-content:space-between;font:700 8.5px/1 var(--tp-label);letter-spacing:.12em;text-transform:uppercase;color:var(--tp-muted);margin-bottom:6px}
.ld-rt{position:relative;height:18px;border-radius:9px;background:rgba(28,26,20,.08)}
.ld-rt i{position:absolute;top:3px;bottom:3px;border-radius:6px}
.ld-note{padding:10px 12px;border-top:var(--tp-dot);font:13px/1.45 var(--tp-type);color:var(--tp-ink-2)}
/* dev line */
.ld-dev{display:flex;align-items:flex-end;gap:6px;height:88px;margin-top:12px;padding:0 4px;border-bottom:2px solid var(--tp-ink)}
.ld-dev div{flex:1;background:var(--tc);border-radius:3px 3px 0 0;position:relative}
.ld-dev div span{position:absolute;top:-16px;left:0;right:0;text-align:center;font:700 11px/1 var(--tp-display)}
.ld-devx{display:flex;gap:6px;padding:4px 4px 0}
.ld-devx span{flex:1;text-align:center;font:700 8px/1.2 var(--tp-label);letter-spacing:.1em;text-transform:uppercase;color:var(--tp-muted)}

/* v4: phones, bands, louder type, depth */
.ld-h1{font-size:48px;line-height:.92}
.ld-h2{font-size:44px;line-height:.92}
.ld-band{position:relative;padding:40px 0 44px;overflow:hidden}
.ld-band::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 1px 1px,rgba(0,0,0,.14) 1px,transparent 1.3px) 0 0/6px 6px;opacity:.35;pointer-events:none}
.ld-band>*{position:relative}
.ld-band.slab{background:var(--tp-slab);color:var(--tp-slab-ink)}
.ld-band.slab .ld-p,.ld-band.slab .ld-cap{color:rgba(243,235,214,.78)}
.ld-band.slab .ld-h2{color:var(--tp-slab-ink)}
.ld-band.slab .ld-pen .flag,.ld-band.purple .ld-pen .flag,.ld-band.red .ld-pen .flag{background:var(--tp-card);color:var(--tp-ink)}
.ld-band.purple{background:linear-gradient(160deg,#6A4A9E,#4A2F78);color:#fff}
.ld-band.purple .ld-p,.ld-band.purple .ld-cap{color:rgba(255,255,255,.82)}
.ld-band.purple .ld-h2{color:#fff}
.ld-band.gold{background:linear-gradient(160deg,#F0B236,#DE9414);color:var(--tp-ink)}
.ld-band.gold .ld-p{color:var(--tp-ink)}
.ld-band.red{background:linear-gradient(160deg,#C0322A,#8E1C16);color:#fff}
.ld-band.red .ld-p,.ld-band.red .ld-cap{color:rgba(255,255,255,.85)}
.ld-band.red .ld-h2{color:#fff}
.ld-band.cream{background:var(--tp-grain) var(--tp-paper)}
.ld-band .ld-h2 em{font-style:normal;color:var(--tp-gold-fill)}
.ld-band.cream .ld-h2 em,.ld-band.gold .ld-h2 em{color:var(--tp-red)}
.ld-big{font:700 13px/1 var(--tp-label);letter-spacing:.2em;text-transform:uppercase;opacity:.75;margin:0 18px}
/* the phone */
.ld-stage{position:relative;margin:28px auto 0;width:354px;height:520px}
.ld-phone{position:absolute;width:232px;padding:9px;border-radius:40px;background:linear-gradient(145deg,#2A2A2E,#0B0B0D);
  box-shadow:0 0 0 1.5px #3A3A40 inset,0 30px 50px rgba(0,0,0,.45),0 8px 16px rgba(0,0,0,.3)}
.ld-phone::before{content:"";position:absolute;left:50%;top:15px;transform:translateX(-50%);width:74px;height:20px;border-radius:12px;background:#0B0B0D;z-index:3}
.ld-screen{position:relative;border-radius:31px;overflow:hidden;background:#EDE3C8;aspect-ratio:1/2}
.ld-screen img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.ld-screen::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 38%);pointer-events:none}
.ld-phone.r{right:6px;top:0;transform:rotate(5deg)}
.ld-phone.l{left:6px;top:0;transform:rotate(-5deg)}
.ld-over{position:absolute;z-index:4;width:236px;color:var(--tp-ink)}
.ld-over.bl{left:0;bottom:0;transform:rotate(-3deg)}
.ld-over.br{right:0;bottom:0;transform:rotate(3deg)}
.ld-over::before{content:"";position:absolute;z-index:5;left:50%;top:-10px;margin-left:-39px;width:78px;height:22px;background:rgba(243,235,214,.8);box-shadow:0 1px 2px rgba(0,0,0,.2);transform:rotate(-6deg)}
.ld-tape{position:absolute;z-index:5;width:78px;height:22px;background:rgba(243,235,214,.75);box-shadow:0 1px 2px rgba(0,0,0,.2);transform:rotate(-8deg)}
.ld-cap2{margin:14px 18px 0;font:13px/1.45 var(--tp-type);opacity:.8}
/* hero score strip */
.ld-score{display:flex;align-items:baseline;gap:10px;margin-top:6px;font:700 64px/1 var(--tp-display);letter-spacing:-.01em}
.ld-score small{font:700 11px/1.2 var(--tp-label);letter-spacing:.16em;text-transform:uppercase;color:var(--tp-muted)}
.ld-hero-stage{position:relative;height:500px;margin:18px -18px 0}
.ld-hero-stage .ld-phone{right:10px;top:0;transform:rotate(6deg)}
.ld-hero-stage .ld-pbp{position:absolute;left:10px;bottom:0;width:250px;margin:0;transform:rotate(-3deg);z-index:4}
.ld-hero-stage .ld-pl{grid-template-columns:34px 1fr;font-size:12px;padding:7px 10px}
.ld-hero-stage .ld-pl small{font-size:10.5px}
.ld-hero-stage .ld-sb .t{font-size:18px}
.ld-stamp-land{position:absolute;z-index:6;left:118px;top:-6px;transform:rotate(-12deg);background:var(--tp-paper);box-shadow:0 3px 8px rgba(0,0,0,.2)}
.ld-note2{padding:10px 12px;background:#FFF6C8;box-shadow:0 6px 14px rgba(0,0,0,.28);font:13px/1.45 var(--tp-type);color:var(--tp-ink)}
.ld-note2 b{color:var(--tp-red)}

/* ── motion: phones slide + tilt in, taped objects drop a beat later, the W stamp lands, the feed types in ── */
.ld-mo .ld-stage .ld-phone,.ld-mo .ld-hero-stage .ld-phone{opacity:0;transition:opacity .6s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.ld-mo .ld-stage .ld-phone.r,.ld-mo .ld-hero-stage .ld-phone{transform:translate(60px,30px) rotate(14deg)}
.ld-mo .ld-stage .ld-phone.l{transform:translate(-60px,30px) rotate(-14deg)}
.ld-mo .ld-over,.ld-mo .ld-hero-stage .ld-pbp{opacity:0;transition:opacity .5s ease .35s,transform .6s cubic-bezier(.2,.8,.2,1) .35s}
.ld-mo .ld-over.bl,.ld-mo .ld-hero-stage .ld-pbp{transform:translateY(40px) rotate(-8deg)}
.ld-mo .ld-over.br{transform:translateY(40px) rotate(8deg)}
.ld-mo .ld-stamp-land{opacity:0;transform:scale(2.2) rotate(-30deg);transition:opacity .2s ease .9s,transform .35s cubic-bezier(.3,1.6,.5,1) .9s}
.ld-mo .ld-hero-stage .ld-pl{opacity:0;transform:translateX(-8px);transition:opacity .3s ease,transform .3s ease}
.ld-mo .in .ld-phone.r{opacity:1;transform:rotate(5deg)}
.ld-mo .in.ld-hero-stage .ld-phone{opacity:1;transform:rotate(6deg)}
.ld-mo .in .ld-phone.l{opacity:1;transform:rotate(-5deg)}
.ld-mo .in .ld-over.bl,.ld-mo .in.ld-hero-stage .ld-pbp{opacity:1;transform:rotate(-3deg)}
.ld-mo .in .ld-over.br{opacity:1;transform:rotate(3deg)}
.ld-mo .in .ld-stamp-land{opacity:1;transform:rotate(-12deg)}
.ld-mo .in.ld-hero-stage .ld-pl{opacity:1;transform:none}
.ld-mo .in.ld-hero-stage .ld-pl:nth-of-type(2){transition-delay:.9s}
.ld-mo .in.ld-hero-stage .ld-pl:nth-of-type(3){transition-delay:1.5s}
.ld-mo .in.ld-hero-stage .ld-pl:nth-of-type(4){transition-delay:2.1s}
@media (prefers-reduced-motion:reduce){.ld-sticky{transition:none}}

/* ── desktop (canvas 177-178): body.ld-desk is set server-side for non-phone browsers. The same story, laid out wide:
   text left, the phone right; QR tiles hand off to the phone; PLAY NOW opens the hand-off modal (partials/handoff_ui). ── */
.ld-dnav,.ld-qrt,.ld-qrfloat{display:none}
body.ld-desk{background:var(--tp-grain) var(--tp-paper)}
body.ld-desk .ld{max-width:none;box-shadow:none}
body.ld-desk .ld-top{height:64px;padding:0 max(48px,calc((100% - 1280px)/2 + 48px));border-bottom:3px solid var(--tp-gold-fill)}
body.ld-desk .ld-logo{font-size:24px}
body.ld-desk .ld-topr{gap:12px}
body.ld-desk .ld-dnav{display:flex;gap:28px;margin-right:16px}
body.ld-desk .ld-dnav a{font:700 11px/1 var(--tp-label);letter-spacing:.16em;text-transform:uppercase;color:rgba(243,235,214,.75)}
body.ld-desk .ld-dnav a:hover{color:var(--tp-gold-fill)}
body.ld-desk .ld-sign{padding:10px 14px}
body.ld-desk .ld-topplay{padding:11px 18px;border-radius:0;border:2px solid #000;box-shadow:0 3px 0 #000;font-size:13px}
body.ld-desk .ld-hero{display:grid;grid-template-columns:minmax(0,1fr) 470px;column-gap:56px;align-content:start;max-width:1280px;margin:0 auto;padding:56px 96px 40px!important}
body.ld-desk .ld-hero>*{grid-column:1}
body.ld-desk .ld-hero>.ld-hero-stage{grid-column:2;grid-row:1/span 7;height:640px;margin:0}
body.ld-desk .ld-kick{font-size:12px}
body.ld-desk .ld-h1{font-size:86px;line-height:.9}
body.ld-desk .ld-p{font-size:19px;max-width:580px}
body.ld-desk .ld-hero .ld-play{width:auto;justify-self:start;padding:20px 40px;border-radius:0;border-width:3px}
body.ld-desk .ld-hero .ld-sub{text-align:left;font-size:11px}
body.ld-desk .ld-friends{max-width:540px;border-style:solid;background:var(--tp-card)}
body.ld-desk .ld-friends:hover,body.ld-desk .ld-play:hover{transform:translateY(-1px)}
body.ld-desk .ld-hero-stage .ld-phone{width:300px;right:40px;top:30px}
body.ld-desk .ld-hero-stage .ld-pbp{width:300px;left:0;bottom:30px}
body.ld-desk .ld-stamp-land{left:120px;top:14px}
/* the QR tiles: on the hero phone, and following the page once the hero scrolls away */
body.ld-desk .ld-qrt,body.ld-desk .ld-qrfloat{display:flex;gap:12px;align-items:center;padding:12px;background:var(--tp-card);color:var(--tp-ink);border:2px solid var(--tp-ink);box-shadow:0 4px 0 var(--tp-ink);cursor:pointer}
body.ld-desk .ld-qrt{position:absolute;z-index:7;right:-20px;top:70px;width:240px}
body.ld-desk .ld-qrt .q,body.ld-desk .ld-qrfloat .q{width:92px;height:92px;background:#fff;padding:6px;flex:none}
body.ld-desk .ld-qrt svg,body.ld-desk .ld-qrfloat svg{width:100%;height:100%;display:block}
body.ld-desk .ld-qrt b,body.ld-desk .ld-qrfloat b{display:block;font:700 15px/1.1 var(--tp-display);text-transform:uppercase}
body.ld-desk .ld-qrt small,body.ld-desk .ld-qrfloat small{display:block;font:12px/1.35 var(--tp-type);color:var(--tp-muted);margin-top:4px}
body.ld-desk .ld-qrfloat{position:fixed;z-index:40;right:28px;bottom:28px;width:360px;transform:translateY(160%);transition:transform .3s ease}
body.ld-desk .ld-qrfloat.on{transform:none}
body.ld-desk .ld-sticky{display:none}
/* the story: two columns per band */
body.ld-desk .ld-band{display:grid;grid-template-columns:minmax(0,1fr) 470px;column-gap:56px;align-items:start;padding:72px max(96px,calc((100% - 1280px)/2 + 96px))}
body.ld-desk .ld-band>.ld-pen{grid-column:1;margin:0}
body.ld-desk .ld-band>.ld-pad{grid-column:1;padding:0}
body.ld-desk .ld-band>.ld-stage{grid-column:2;grid-row:1/span 4;margin:0 auto}
body.ld-desk .ld-band>.ld-cap2{grid-column:1;margin:18px 0 0;font-size:15px}
body.ld-desk .ld-h2{font-size:62px;line-height:.92}
body.ld-desk .ld-band .ld-p{font-size:18px}
body.ld-desk .ld-close{padding:80px 24px 60px}
body.ld-desk .ld-close>*{max-width:640px;margin-left:auto;margin-right:auto}
body.ld-desk .ld-close .ld-h2{font-size:72px}
body.ld-desk .ld-close .ld-play{display:inline-flex;width:auto;padding:20px 40px;border-radius:0}
body.ld-desk .ld-foot{font-size:11px;padding:28px}
@media (max-width:1100px){body.ld-desk .ld-hero,body.ld-desk .ld-band{padding-left:48px!important;padding-right:48px!important;grid-template-columns:minmax(0,1fr) 400px;column-gap:32px}
  body.ld-desk .ld-h1{font-size:68px}}