/* Fast Player — homepage (cinematic). Builds on site.css. */

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.hero { position: relative; overflow: hidden; padding: clamp(40px, 7vw, 90px) 0 clamp(70px, 10vw, 120px); isolation: isolate; }
.hero-grid { display: grid; grid-template-columns: 1.02fr 1fr; align-items: center; gap: clamp(32px, 5vw, 64px); }
.hero-copy { display: grid; gap: 26px; justify-items: start; position: relative; z-index: 2; }
.hero-copy .lead { max-width: 520px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--faint); font-size: 14px; }
.hero-meta span { display: inline-flex; align-items: center; gap: 7px; }
.hero-meta svg { width: 15px; height: 15px; color: var(--accent); }

/* Poster wall — tiles generated by the page script; colour-only art, no real posters. */
.poster-wall { position: absolute; inset: -20% -10% -10% -10%; z-index: -2; overflow: hidden; perspective: 1400px; }
.poster-wall-inner {
    position: absolute; inset: 0; display: grid; grid-template-columns: repeat(9, 1fr); gap: 16px;
    transform: rotateX(28deg) rotateZ(-12deg) scale(1.3); transform-origin: 50% 30%;
    animation: wall-drift 70s linear infinite;
    filter: brightness(.42) saturate(.85);
}
.poster {
    aspect-ratio: 2 / 3; border-radius: 14px; position: relative; overflow: hidden;
    box-shadow: 0 20px 40px -18px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.06);
}
.poster::after {
    content: ""; position: absolute; inset: auto 12% 10% 12%; height: 6px; border-radius: 3px; background: rgba(255,255,255,.55);
    box-shadow: 0 -12px 0 -1px rgba(255,255,255,.28);
}
.hero::before { /* vignette over the wall */
    content: ""; position: absolute; inset: 0; z-index: -1;
    background:
        radial-gradient(120% 80% at 75% 30%, rgba(7,8,10,.35) 0%, rgba(7,8,10,.82) 55%, var(--bg) 85%),
        linear-gradient(180deg, rgba(7,8,10,.55) 0%, rgba(7,8,10,.2) 30%, var(--bg) 100%);
}
.hero::after { /* green glow behind the devices */
    content: ""; position: absolute; width: 640px; height: 640px; right: -120px; top: 6%; z-index: -1; border-radius: 50%;
    background: radial-gradient(circle, rgba(54,226,126,.16), transparent 62%); filter: blur(10px);
}
@keyframes wall-drift { from { transform: rotateX(28deg) rotateZ(-12deg) scale(1.3) translateY(0); } to { transform: rotateX(28deg) rotateZ(-12deg) scale(1.3) translateY(-33.333%); } }

.hero-kicker { margin: 0; font-size: clamp(15px, 1.35vw, 18px); font-weight: 650; letter-spacing: .01em; color: var(--muted); }
.hero-copy p.display { margin: 0; }

/* ── Hero image (rendered from server/design/hero-devices.html; transparent WebP) ─ */
.hero-shot { position: relative; z-index: 1; justify-self: end; width: 118%; max-width: 780px; margin: -30px -40px -40px 0; }
.hero-shot img { display: block; width: 100%; height: auto; filter: drop-shadow(0 30px 60px rgba(0,0,0,.45)); }
.duo-shot { display: block; width: 100%; height: auto; filter: drop-shadow(0 30px 60px rgba(0,0,0,.45)); }
@media (max-width: 1020px) { .hero-shot { justify-self: center; width: 100%; max-width: 600px; margin: 0 auto; } }

/* ── Devices ──────────────────────────────────────────────────────────────── */
.devices { position: relative; height: clamp(440px, 46vw, 600px); }
.ipad {
    position: absolute; right: 0; top: 4%; width: 92%; aspect-ratio: 4 / 3; border-radius: 30px; padding: 12px;
    background: linear-gradient(145deg, #2a2d31, #121417); box-shadow: var(--shadow), inset 0 0 0 1px rgba(255,255,255,.08);
    transform: perspective(1600px) rotateY(-14deg) rotateX(4deg); transform-origin: 70% 50%;
}
.iphone {
    position: absolute; left: 0; bottom: 0; width: 41%; aspect-ratio: 9 / 19.3; border-radius: 46px; padding: 9px;
    background: linear-gradient(145deg, #34373c, #121417); box-shadow: 0 40px 90px -20px rgba(0,0,0,.85), inset 0 0 0 1px rgba(255,255,255,.1);
    transform: perspective(1600px) rotateY(10deg); transform-origin: 30% 50%; z-index: 2;
}
.screen { position: relative; width: 100%; height: 100%; border-radius: inherit; overflow: hidden; background: #050607; }
.ipad .screen { border-radius: 20px; }
.iphone .screen { border-radius: 38px; }
.island { position: absolute; top: 10px; left: 50%; width: 30%; height: 22px; transform: translateX(-50%); background: #000; border-radius: 20px; z-index: 5; }

/* Mock UI pieces (all fictional) */
.ui { position: absolute; inset: 0; display: flex; flex-direction: column; font-size: 10px; color: #e9ecea; }
.ui-video { position: relative; aspect-ratio: 16 / 9; overflow: hidden; flex: none; }
.ui-video .scene { position: absolute; inset: 0; }
.scene-studio {
    background:
        radial-gradient(60% 70% at 30% 60%, rgba(255,170,90,.55), transparent 60%),
        radial-gradient(50% 60% at 78% 40%, rgba(60,140,255,.55), transparent 60%),
        linear-gradient(160deg, #10203f, #0a0d18 60%, #1b1020);
}
.scene-studio::before { /* desk */
    content: ""; position: absolute; left: 10%; right: 10%; bottom: 0; height: 26%;
    background: linear-gradient(180deg, #1d2a44, #0b111d); border-radius: 50% 50% 0 0 / 30% 30% 0 0;
}
.scene-studio::after { /* lower third */
    content: ""; position: absolute; left: 6%; bottom: 8%; width: 46%; height: 12%; border-radius: 4px;
    background: linear-gradient(90deg, rgba(255,255,255,.92) 0 6%, rgba(220,40,60,.9) 6% 9%, rgba(10,14,24,.85) 9%);
}
.scene-pitch {
    background:
        repeating-linear-gradient(90deg, #1f7a3a 0 8%, #22863f 8% 16%),
        #1f7a3a;
}
.scene-pitch::before { content: ""; position: absolute; inset: 14% 10%; border: 2px solid rgba(255,255,255,.55); border-radius: 4px; }
.scene-pitch::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22%; aspect-ratio: 1; border: 2px solid rgba(255,255,255,.55); border-radius: 50%; transform: translate(-50%,-50%); }
.live-badge { position: absolute; top: 8px; left: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 6px; background: rgba(0,0,0,.55); font-weight: 800; font-size: 8px; letter-spacing: .08em; z-index: 2; }
.live-badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #ff3b45; }
.ui-body { flex: 1; padding: 12px 12px 0; display: flex; flex-direction: column; gap: 9px; overflow: hidden; }
.ui-title { font-size: 15px; font-weight: 800; letter-spacing: -0.02em; }
.ui-sub { color: #9aa19e; font-size: 9.5px; }
.ui-row { display: flex; align-items: center; gap: 9px; padding: 8px; border-radius: 12px; background: rgba(255,255,255,.05); }
.ui-logo { width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center; font-weight: 800; font-size: 9px; color: #fff; }
.ui-row strong { display: block; font-size: 10.5px; }
.ui-row span { display: block; color: #9aa19e; font-size: 8.5px; }
.ui-progress { height: 3px; border-radius: 3px; background: rgba(255,255,255,.12); margin-top: 5px; overflow: hidden; }
.ui-progress i { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.ui-chips { display: flex; gap: 5px; flex-wrap: nowrap; overflow: hidden; }
.ui-chips b { flex: none; padding: 4px 8px; border-radius: 999px; background: rgba(255,255,255,.07); font-weight: 600; font-size: 8.5px; }
.ui-chips b.on { background: #fff; color: #050607; }
.ui-tabbar { margin: auto 10px 10px; height: 34px; border-radius: 999px; background: rgba(255,255,255,.08); display: flex; justify-content: space-around; align-items: center; font-size: 7.5px; color: #9aa19e; flex: none; }
.ui-tabbar span.on { color: #fff; font-weight: 700; }

/* iPad library */
.lib { position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr; padding: 18px; gap: 14px; }
.lib-hero { border-radius: 16px; height: 120px; position: relative; overflow: hidden; background: linear-gradient(120deg, #3a1020, #121a3a 55%, #0b0d12); }
.lib-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 90% at 80% 30%, rgba(255,120,70,.6), transparent 60%); }
.lib-hero .t { position: absolute; left: 16px; bottom: 14px; font-weight: 800; font-size: 17px; letter-spacing: -0.02em; }
.lib-hero .t small { display: block; font-size: 8px; letter-spacing: .14em; color: #c6cbc9; font-weight: 700; margin-bottom: 4px; }
.lib-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; align-content: start; }
.lib-grid .poster { border-radius: 10px; }
.lib-label { font-size: 10px; font-weight: 800; letter-spacing: -0.01em; grid-column: 1 / -1; margin-top: 2px; }

/* ── Feature strip (marquee) ──────────────────────────────────────────────── */
.strip { border-block: 1px solid var(--line); background: rgba(255,255,255,.015); overflow: hidden; }
.strip-track { display: flex; gap: 12px; width: max-content; padding: 18px 0; animation: marquee 40s linear infinite; }
.strip:hover .strip-track { animation-play-state: paused; }
.strip .chip { font-size: 15px; padding: 10px 18px; color: var(--text); background: var(--surface); }
.strip .chip svg { width: 16px; height: 16px; color: var(--accent); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ── Split feature rows ───────────────────────────────────────────────────── */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.split.flip .split-media { order: -1; }
.split-copy { display: grid; gap: 20px; justify-items: start; }
.ticks { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 14px; }
.ticks li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; color: var(--muted); }
.ticks li strong { color: var(--text); display: block; font-weight: 650; }
.ticks svg { width: 22px; height: 22px; color: var(--accent); margin-top: 1px; }
.media-frame {
    position: relative; border-radius: var(--radius-l); border: 1px solid var(--line); overflow: hidden; isolation: isolate;
    background: radial-gradient(90% 90% at 50% 0%, rgba(54,226,126,.10), transparent 60%), var(--bg-raised);
    min-height: 420px; display: grid; place-items: center; padding: 28px;
}

/* Smart Playback: start-time comparison */
.speed { width: 100%; max-width: 460px; display: grid; gap: 22px; }
.speed-big { font-size: clamp(64px, 9vw, 110px); font-weight: 850; letter-spacing: -0.05em; line-height: .9; }
.speed-big small { display: block; font-size: 17px; letter-spacing: 0; color: var(--muted); font-weight: 600; margin-top: 12px; line-height: 1.3; }
.speed-bars { display: grid; gap: 14px; }
.speed-bar { display: grid; gap: 7px; font-size: 14px; color: var(--muted); }
.speed-bar .track { height: 12px; border-radius: 999px; background: rgba(255,255,255,.07); overflow: hidden; }
.speed-bar .fill { height: 100%; border-radius: inherit; background: rgba(255,255,255,.28); width: 0; transition: width 1.4s cubic-bezier(.2,.7,.2,1); }
.speed-bar.us .fill { background: linear-gradient(90deg, var(--accent), #9ff3c4); }
.revealed .speed-bar .fill { width: var(--w); }
.speed-bar .row { display: flex; justify-content: space-between; }
.speed-bar.us .row { color: var(--text); font-weight: 650; }

/* AirPlay: TV + phone */
.tv { position: relative; width: 100%; max-width: 560px; }
.tv-panel { aspect-ratio: 16 / 9; border-radius: 14px; padding: 8px; background: #0b0c0e; box-shadow: var(--shadow), inset 0 0 0 1px rgba(255,255,255,.08); }
.tv-panel .screen { border-radius: 8px; }
.tv-stand { width: 34%; height: 10px; margin: 0 auto; border-radius: 0 0 10px 10px; background: linear-gradient(180deg, #1c1f23, #0d0f11); }
.airplay-wave { position: absolute; left: 50%; top: 50%; width: 70px; height: 70px; transform: translate(-50%,-50%); display: grid; place-items: center; z-index: 3; }
.airplay-wave span { position: absolute; inset: 0; border: 2px solid rgba(255,255,255,.6); border-radius: 50%; animation: ping 2.4s ease-out infinite; }
.airplay-wave span:nth-child(2) { animation-delay: .8s; }
.airplay-wave svg { width: 34px; height: 34px; color: #fff; }
@keyframes ping { from { transform: scale(.6); opacity: .9; } to { transform: scale(2.2); opacity: 0; } }
.mini-phone { position: absolute; right: -4%; bottom: -14%; width: 26%; aspect-ratio: 9 / 19.3; border-radius: 26px; padding: 6px; background: linear-gradient(145deg, #34373c, #121417); box-shadow: 0 30px 60px -20px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.1); }
.mini-phone .screen { border-radius: 21px; display: grid; place-items: center; text-align: center; padding: 10px; background: linear-gradient(180deg, #121417, #070809); }
.mini-phone .screen b { display: block; font-size: 9px; }
.mini-phone .screen i { display: block; width: 26px; height: 26px; margin: 0 auto 6px; border-radius: 50%; background: var(--accent-soft); border: 1px solid rgba(54,226,126,.4); }

/* ── Bento ────────────────────────────────────────────────────────────────── */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.bento .card { grid-column: span 2; min-height: 230px; display: flex; flex-direction: column; }
.bento .card.wide { grid-column: span 3; }
.bento .card.tall { grid-row: span 2; }
.bento .card .viz { margin-top: auto; padding-top: 22px; }
.search-viz { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 16px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid var(--line); color: var(--text); font-size: 15px; }
.search-viz svg { width: 18px; height: 18px; color: var(--muted); }
.search-viz .caret { width: 2px; height: 20px; background: var(--accent); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.cw-viz { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cw-viz .poster { aspect-ratio: 16 / 10; }
.cw-viz .poster::after { inset: auto 0 0 0; height: 4px; border-radius: 0; background: rgba(255,255,255,.18); box-shadow: none; }
.cw-viz .poster i { position: absolute; left: 0; bottom: 0; height: 4px; background: var(--accent); z-index: 2; }
.guide-viz { display: grid; gap: 8px; font-size: 13px; }
.guide-viz .g { display: grid; grid-template-columns: 48px 1fr; gap: 10px; align-items: center; }
.guide-viz .g .slot { padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.guide-viz .g .slot.now { border-color: rgba(54,226,126,.45); background: var(--accent-soft); color: #d6fbe6; }
.guide-viz .g time { color: var(--faint); font-variant-numeric: tabular-nums; font-size: 12px; }
.pip-viz { position: relative; height: 130px; border-radius: 16px; background: linear-gradient(180deg, #14171b, #0b0d10); border: 1px solid var(--line); overflow: hidden; }
.pip-viz::before { content: ""; position: absolute; left: 14px; right: 40%; top: 18px; height: 8px; border-radius: 4px; background: rgba(255,255,255,.12); box-shadow: 0 18px 0 rgba(255,255,255,.08), 0 36px 0 rgba(255,255,255,.08), 0 54px 0 rgba(255,255,255,.06); }
.pip-viz .pip { position: absolute; right: 12px; bottom: 12px; width: 44%; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; box-shadow: 0 16px 30px -10px rgba(0,0,0,.9); }
.mv-viz { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; border-radius: 14px; overflow: hidden; }
.mv-viz div { aspect-ratio: 16 / 9; position: relative; }
.lock-viz { display: flex; gap: 8px; }
.lock-viz span { width: 38px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.06); border: 1px solid var(--line); font-size: 22px; font-weight: 800; }
.lock-viz span.f { border-color: rgba(54,226,126,.45); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── Connect ──────────────────────────────────────────────────────────────── */
.connect-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.connect-grid .card { display: grid; gap: 12px; align-content: start; }
.connect-grid .fields { display: grid; gap: 8px; margin-top: 6px; }
.connect-grid .fields span { display: flex; align-items: center; height: 40px; padding: 0 14px; border-radius: 12px; border: 1px dashed var(--line-strong); color: var(--faint); font-size: 14px; }
.portal-band {
    margin-top: 16px; display: grid; grid-template-columns: 1.3fr auto; gap: 24px; align-items: center;
    padding: clamp(24px, 3vw, 36px); border-radius: var(--radius-l); border: 1px solid rgba(54,226,126,.28);
    background: radial-gradient(120% 140% at 0% 0%, rgba(54,226,126,.16), transparent 55%), var(--bg-raised);
}
.portal-band .actions { display: flex; flex-wrap: wrap; gap: 12px; }
.code { font-family: var(--mono); background: rgba(255,255,255,.07); border: 1px solid var(--line); padding: 2px 8px; border-radius: 8px; font-size: .92em; color: var(--text); }

/* ── Steps ────────────────────────────────────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: step; }
.steps .card { padding-top: 70px; }
.steps .card::before {
    counter-increment: step; content: counter(step); position: absolute; top: 24px; left: clamp(22px, 2.6vw, 32px);
    width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800;
    background: #fff; color: #050607;
}

/* ── Pricing ──────────────────────────────────────────────────────────────── */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
.plan { display: flex; flex-direction: column; gap: 14px; }
.plan .price { font-size: 40px; font-weight: 850; letter-spacing: -0.04em; line-height: 1; }
.plan .price small { font-size: 15px; color: var(--muted); font-weight: 600; letter-spacing: 0; }
.plan ul { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 10px; color: var(--muted); font-size: 15px; }
.plan li { display: flex; gap: 10px; }
.plan li::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 3px; border-radius: 50%; background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2336e27e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 11px no-repeat; }
.plan.featured { border-color: rgba(54,226,126,.45); background: radial-gradient(120% 90% at 50% 0%, rgba(54,226,126,.14), transparent 60%), linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.025)); }
.plan .badge { position: absolute; top: 20px; right: 20px; font-size: 12px; font-weight: 750; padding: 5px 10px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); }
.plan .btn { margin-top: auto; }
.fineprint { text-align: center; color: var(--faint); font-size: 14px; margin: 22px auto 0; max-width: 680px; }

/* ── Trust ────────────────────────────────────────────────────────────────── */
.trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

/* ── Community ────────────────────────────────────────────────────────────── */
.community {
    display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: center; padding: clamp(28px, 4vw, 48px);
    border-radius: var(--radius-l); border: 1px solid var(--line);
    background: radial-gradient(100% 140% at 100% 0%, rgba(88,101,242,.22), transparent 55%), var(--bg-raised);
}
.socials { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.social { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); font-weight: 650; transition: background .15s ease, border-color .15s ease; }
.social:hover { background: var(--surface-strong); border-color: var(--line-strong); }
.social svg { width: 22px; height: 22px; flex: none; }
.social.discord { grid-column: 1 / -1; background: #5865f2; border-color: #5865f2; color: #fff; justify-content: center; padding: 16px; font-size: 17px; }
.social.discord:hover { background: #4752e0; }

/* ── FAQ ──────────────────────────────────────────────────────────────────── */
.faq { max-width: 820px; margin: 0 auto; display: grid; gap: 10px; }
.faq details { border: 1px solid var(--line); border-radius: 18px; background: var(--surface); overflow: hidden; }
.faq summary { list-style: none; cursor: pointer; padding: 20px 22px; font-weight: 650; font-size: 17px; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.07); font-size: 20px; font-weight: 400; transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0; padding: 0 22px 20px; color: var(--muted); }

/* ── Final CTA ────────────────────────────────────────────────────────────── */
.final { text-align: center; position: relative; overflow: hidden; isolation: isolate; }
.final::before { content: ""; position: absolute; left: 50%; top: 50%; width: 900px; height: 500px; transform: translate(-50%, -50%); z-index: -1; background: radial-gradient(closest-side, rgba(54,226,126,.16), transparent); }
.final .hero-cta { justify-content: center; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 1020px) {
    .hero-grid, .split, .community, .portal-band { grid-template-columns: 1fr; }
    .split.flip .split-media { order: 0; }
    /* Tablet/phone: the device scene keeps its desktop geometry and is scaled as a whole. */
    .devices { width: 600px; height: 560px; max-width: none; margin: 0 auto; zoom: 0.9; }
    .bento .card, .bento .card.wide { grid-column: span 3; }
    .connect-grid, .steps, .plans, .trust { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .bento { grid-template-columns: 1fr; }
    .bento .card, .bento .card.wide { grid-column: auto; min-height: 0; }
    .media-frame { min-height: 340px; padding: 20px; }
    .socials { grid-template-columns: 1fr; }
    .hero-cta { width: 100%; }
    .hero-cta .store-badge, .hero-cta .btn { width: 100%; justify-content: center; }
}
@media (max-width: 700px) { .devices { zoom: 0.62; } }
@media (max-width: 400px) { .devices { zoom: 0.55; } }

/* ── App Home replicas in the hero (sized in app points via container units) ─ */
.iphone .screen, .ipad .screen { container-type: inline-size; }
.ph-home { --pt: calc(100cqw / 402); position: absolute; inset: 0; background: #0b0c0e; color: #f2f4f3; font-size: calc(var(--pt) * 15); overflow: hidden; }
.pad-home { --pt: calc(100cqw / 1180); position: absolute; inset: 0; background: radial-gradient(120% 90% at 20% 0%, #1c1f23, #0b0c0e 60%); color: #f2f4f3; overflow: hidden; padding: 0 calc(var(--pt) * 32); }

/* Outline icons as masks (currentColor) */
.ic { display: inline-block; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.ic-refresh { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.3-5.6M20 4v5h-5'/%3E%3C/svg%3E"); }
.ic-heart { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7-4.4-9-8.7C1.6 8 3.6 4.5 7 4.5c2 0 3.3 1.1 5 3 1.7-1.9 3-3 5-3 3.4 0 5.4 3.5 4 6.8C19 15.6 12 20 12 20Z'/%3E%3C/svg%3E"); }
.ic-list { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M9 6h11M9 12h11M9 18h11'/%3E%3Ccircle cx='4.5' cy='6' r='1' fill='black'/%3E%3Ccircle cx='4.5' cy='12' r='1' fill='black'/%3E%3Ccircle cx='4.5' cy='18' r='1' fill='black'/%3E%3C/svg%3E"); }
.ic-search { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E"); }
.ic-gear { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M4.9 19.1 7 17M17 7l2.1-2.1'/%3E%3C/svg%3E"); }
.ic-menu { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E"); }
.ic-bug { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='7' y='7' width='10' height='13' rx='5'/%3E%3Cpath d='M9 7a3 3 0 0 1 6 0M12 10v10M4 12h3M17 12h3M5 18l2-1M19 18l-2-1M5 7l2 1.5M19 7l-2 1.5'/%3E%3C/svg%3E"); }
.ic-bookmark { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18l-6-4-6 4V3Z'/%3E%3C/svg%3E"); }
.ic-info { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6M12 7.5v.5'/%3E%3C/svg%3E"); }
.ic-home { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M4 10.5 12 4l8 6.5V20h-5v-6H9v6H4v-9.5Z'/%3E%3C/svg%3E"); }
.ic-tv { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='7' width='18' height='12' rx='2.5'/%3E%3Cpath d='M9 3l3 3 3-3M9 22h6'/%3E%3C/svg%3E"); }
.ic-film { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 9h18M7 5l-1 4M12 5l-1 4M17 5l-1 4M10 12v5l4-2.5-4-2.5Z'/%3E%3C/svg%3E"); }
.ic-stack { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='9' width='18' height='12' rx='2.5'/%3E%3Cpath d='M6 6h12M8 3h8M10.5 12.5v5l4-2.5-4-2.5Z'/%3E%3C/svg%3E"); }
.ic-clock { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3.5 12a8.5 8.5 0 1 0 2.5-6M3 4v4h4M12 8v4l3 2'/%3E%3C/svg%3E"); }
.ic-split { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='8' height='14' rx='2'/%3E%3Crect x='13' y='5' width='8' height='14' rx='2'/%3E%3C/svg%3E"); }

/* Dummy backdrop / thumbnail art (colour only) */
.art-a { background: radial-gradient(60% 70% at 30% 60%, rgba(255,170,90,.55), transparent 60%), radial-gradient(50% 60% at 78% 40%, rgba(60,140,255,.55), transparent 60%), linear-gradient(160deg, #10203f, #0a0d18 60%, #1b1020); }
.art-b { background: radial-gradient(70% 80% at 72% 30%, rgba(255,130,70,.75), transparent 60%), radial-gradient(60% 60% at 20% 80%, rgba(40,90,170,.55), transparent 65%), linear-gradient(170deg, #2a1220, #0c1020 70%); }
.art-c { background: radial-gradient(70% 70% at 30% 35%, rgba(60,200,170,.6), transparent 60%), radial-gradient(60% 60% at 80% 75%, rgba(120,90,255,.5), transparent 65%), linear-gradient(160deg, #0b2a2a, #0b0f1c 70%); }

/* ── iPhone Home ── */
.ph-backdrop { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--pt) * 470); overflow: hidden; }
.ph-backdrop img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.ph-backdrop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,12,14,.55) 0%, rgba(11,12,14,0) 20%, rgba(11,12,14,.15) 55%, #0b0c0e 100%); }
.ph-status { position: absolute; top: calc(var(--pt) * 18); left: calc(var(--pt) * 46); right: calc(var(--pt) * 34); display: flex; justify-content: space-between; align-items: center; font-weight: 650; font-size: calc(var(--pt) * 17); z-index: 6; }
.ph-sicons { display: flex; gap: calc(var(--pt) * 6); align-items: center; }
.ph-sicons i { width: calc(var(--pt) * 17); height: calc(var(--pt) * 11); border-radius: calc(var(--pt) * 2); background: rgba(255,255,255,.85); }
.ph-sicons i.bat { width: calc(var(--pt) * 26); height: calc(var(--pt) * 12); border-radius: calc(var(--pt) * 4); }
.ph-top { position: absolute; top: calc(var(--pt) * 58); left: calc(var(--pt) * 16); right: calc(var(--pt) * 16); display: flex; justify-content: space-between; align-items: center; z-index: 5; }
.ph-switch { display: inline-flex; align-items: center; gap: calc(var(--pt) * 9); height: calc(var(--pt) * 44); padding: 0 calc(var(--pt) * 16); border-radius: 999px; background: rgba(40,42,46,.62); backdrop-filter: blur(8px); font-weight: 600; font-size: calc(var(--pt) * 17); }
.ph-switch .dot { width: calc(var(--pt) * 8); height: calc(var(--pt) * 8); border-radius: 50%; background: #fff; box-shadow: 0 0 calc(var(--pt) * 6) #fff; }
.ph-switch .chev { width: calc(var(--pt) * 8); height: calc(var(--pt) * 8); border-right: calc(var(--pt) * 2) solid #cfd3d1; border-bottom: calc(var(--pt) * 2) solid #cfd3d1; transform: rotate(45deg) translateY(calc(var(--pt) * -2)); margin-left: calc(var(--pt) * 2); }
.ph-btns { display: flex; gap: calc(var(--pt) * 10); }
.ph-btns .ic { width: calc(var(--pt) * 44); height: calc(var(--pt) * 44); border-radius: 50%; -webkit-mask: none; mask: none; background: rgba(40,42,46,.62); position: relative; }
.ph-btns .ic::after { content: ""; position: absolute; inset: calc(var(--pt) * 12); background: #fff; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.ph-hero { position: absolute; left: calc(var(--pt) * 16); right: calc(var(--pt) * 16); top: calc(var(--pt) * 292); z-index: 4; }
.ph-eyebrow { display: flex; align-items: center; gap: calc(var(--pt) * 8); font-size: calc(var(--pt) * 13); font-weight: 700; letter-spacing: .16em; color: #c9cecb; }
.ph-eyebrow::before { content: ""; width: calc(var(--pt) * 14); height: calc(var(--pt) * 3); border-radius: 2px; background: #fff; }
.ph-title { margin-top: calc(var(--pt) * 10); font-size: calc(var(--pt) * 34); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; }
.ph-meta { margin-top: calc(var(--pt) * 8); font-size: calc(var(--pt) * 14); color: #a6aca9; }
.ph-actions { margin-top: calc(var(--pt) * 16); display: flex; align-items: center; gap: calc(var(--pt) * 10); }
.ph-play { display: inline-flex; align-items: center; gap: calc(var(--pt) * 10); height: calc(var(--pt) * 46); padding: 0 calc(var(--pt) * 24); border-radius: 999px; border: calc(var(--pt) * 1.5) solid rgba(255,255,255,.4); background: rgba(255,255,255,.06); font-weight: 700; font-size: calc(var(--pt) * 18); }
.ph-play .tri { width: 0; height: 0; border-left: calc(var(--pt) * 14) solid #fff; border-top: calc(var(--pt) * 9) solid transparent; border-bottom: calc(var(--pt) * 9) solid transparent; }
.ph-circ { width: calc(var(--pt) * 42); height: calc(var(--pt) * 42); border-radius: 50%; -webkit-mask: none; mask: none; background: rgba(255,255,255,.08); position: relative; }
.ph-circ::after { content: ""; position: absolute; inset: calc(var(--pt) * 11); background: #fff; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.ph-dots { margin-left: auto; display: flex; gap: calc(var(--pt) * 5); }
.ph-dots i { width: calc(var(--pt) * 6); height: calc(var(--pt) * 6); border-radius: 999px; background: rgba(255,255,255,.35); }
.ph-dots i.on { width: calc(var(--pt) * 18); background: #fff; }
.ph-section { position: absolute; left: calc(var(--pt) * 16); right: calc(var(--pt) * 16); top: calc(var(--pt) * 482); display: flex; align-items: center; gap: calc(var(--pt) * 10); font-size: calc(var(--pt) * 22); font-weight: 650; letter-spacing: -0.01em; }
.ph-section::before { content: ""; width: calc(var(--pt) * 4); height: calc(var(--pt) * 22); border-radius: 2px; background: #fff; }
.ph-row { position: absolute; top: calc(var(--pt) * 518); left: calc(var(--pt) * 16); display: flex; gap: calc(var(--pt) * 14); }
.ph-card { width: calc(var(--pt) * 224); flex: none; }
.ph-card b { display: block; margin-top: calc(var(--pt) * 9); font-size: calc(var(--pt) * 17); font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-card small { display: block; font-size: calc(var(--pt) * 14); color: #a6aca9; }
.ph-thumb { position: relative; height: calc(var(--pt) * 126); border-radius: calc(var(--pt) * 16); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.ph-thumb.live { background: linear-gradient(180deg, #3a3d42, #1a1c1f); }
.ph-thumb .ini { position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(var(--pt) * 30); font-weight: 800; }
.ph-thumb .pbtn { position: absolute; right: calc(var(--pt) * 10); bottom: calc(var(--pt) * 10); width: calc(var(--pt) * 34); height: calc(var(--pt) * 34); border-radius: 50%; background: rgba(0,0,0,.45); }
.ph-thumb .pbtn::after { content: ""; position: absolute; left: 40%; top: 30%; border-left: calc(var(--pt) * 11) solid #fff; border-top: calc(var(--pt) * 7) solid transparent; border-bottom: calc(var(--pt) * 7) solid transparent; }
.badge { position: absolute; left: calc(var(--pt) * 10); top: calc(var(--pt) * 10); padding: calc(var(--pt) * 3) calc(var(--pt) * 8); border-radius: calc(var(--pt) * 6); background: #fff; color: #050607; font-weight: 800; font-size: calc(var(--pt) * 11); letter-spacing: .06em; }
.badge.live { background: rgba(120,20,30,.55); color: #fff; border: 1px solid rgba(255,90,100,.5); border-radius: 999px; padding-left: calc(var(--pt) * 18); }
.badge.live::before { content: ""; position: absolute; left: calc(var(--pt) * 7); top: 50%; width: calc(var(--pt) * 6); height: calc(var(--pt) * 6); border-radius: 50%; background: #ff3b45; transform: translateY(-50%); }
.prog { position: absolute; left: 0; bottom: 0; height: calc(var(--pt) * 4); background: #fff; }
.ph-tabbar { position: absolute; left: calc(var(--pt) * 16); right: calc(var(--pt) * 16); bottom: calc(var(--pt) * 22); display: flex; gap: calc(var(--pt) * 12); align-items: center; z-index: 6; }
.ph-tabs { flex: 1; height: calc(var(--pt) * 66); border-radius: 999px; display: flex; align-items: center; justify-content: space-around; padding: 0 calc(var(--pt) * 6);
    background: rgba(40,42,46,.72); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); font-size: calc(var(--pt) * 12); color: #b4b9b7; }
.ph-tabs span { display: grid; justify-items: center; gap: calc(var(--pt) * 3); padding: calc(var(--pt) * 6) calc(var(--pt) * 12); border-radius: 999px; }
.ph-tabs span.on { background: rgba(255,255,255,.1); color: #fff; font-weight: 700; }
.ph-tabs .ic { width: calc(var(--pt) * 24); height: calc(var(--pt) * 24); }
.ph-search { width: calc(var(--pt) * 66); height: calc(var(--pt) * 66); border-radius: 50%; -webkit-mask: none; mask: none; background: rgba(40,42,46,.72); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); position: relative; flex: none; }
.ph-search::after { content: ""; position: absolute; inset: calc(var(--pt) * 20); background: #fff; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }

/* ── iPad Home ── */
.pad-status { display: flex; justify-content: space-between; font-size: calc(var(--pt) * 15); font-weight: 600; padding-top: calc(var(--pt) * 12); color: #e6e9e7; }
.pad-header { display: flex; justify-content: space-between; align-items: center; margin-top: calc(var(--pt) * 26); }
.pad-logo { display: flex; align-items: center; gap: calc(var(--pt) * 12); font-size: calc(var(--pt) * 30); font-weight: 850; letter-spacing: -0.01em; }
.logo-bars { display: grid; gap: calc(var(--pt) * 3); }
.logo-bars b { display: block; height: calc(var(--pt) * 5); width: calc(var(--pt) * 22); border-radius: 3px; background: #c9cdcb; }
.logo-bars b:first-child, .logo-bars b:last-child { width: calc(var(--pt) * 13); background: #6f7472; }
.logo-bars b.g { width: calc(var(--pt) * 34); background: #36e27e; }
.pad-icons { display: flex; gap: calc(var(--pt) * 12); }
.pad-icons .ic { width: calc(var(--pt) * 56); height: calc(var(--pt) * 52); border-radius: calc(var(--pt) * 14); -webkit-mask: none; mask: none; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); position: relative; }
.pad-icons .ic::after { content: ""; position: absolute; inset: calc(var(--pt) * 14) calc(var(--pt) * 16); background: #fff; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.pad-nav { display: flex; justify-content: flex-end; gap: calc(var(--pt) * 12); margin-top: calc(var(--pt) * 40); }
.pad-pill { display: inline-flex; align-items: center; gap: calc(var(--pt) * 10); height: calc(var(--pt) * 54); padding: 0 calc(var(--pt) * 20); border-radius: calc(var(--pt) * 16); background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); font-size: calc(var(--pt) * 19); font-weight: 650; }
.pad-pill .ic { width: calc(var(--pt) * 24); height: calc(var(--pt) * 24); }
.pad-pill em { font-style: normal; font-size: calc(var(--pt) * 13); color: #a6aca9; padding: calc(var(--pt) * 2) calc(var(--pt) * 8); border-radius: 999px; background: rgba(255,255,255,.08); }
.pad-section { margin-top: calc(var(--pt) * 34); font-size: calc(var(--pt) * 26); font-weight: 750; letter-spacing: -0.01em; }
.pad-row { display: flex; gap: calc(var(--pt) * 18); margin-top: calc(var(--pt) * 14); }
.pad-card { width: calc(var(--pt) * 340); flex: none; }
.pad-thumb { position: relative; height: calc(var(--pt) * 190); border-radius: calc(var(--pt) * 14); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.pad-thumb .ini { position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(var(--pt) * 44); font-weight: 850; }
.pad-thumb .badge { font-size: calc(var(--pt) * 13); }
.pad-thumb .prog { height: calc(var(--pt) * 5); }
.pad-card b { display: block; margin-top: calc(var(--pt) * 10); font-size: calc(var(--pt) * 20); font-weight: 650; }
.pad-card small { display: block; font-size: calc(var(--pt) * 16); color: #a6aca9; }
.pad-posters { display: grid; grid-template-columns: repeat(7, 1fr); gap: calc(var(--pt) * 14); margin-top: calc(var(--pt) * 14); }
.pad-posters .poster { border-radius: calc(var(--pt) * 12); }
.pad-id { position: absolute; right: calc(var(--pt) * 32); bottom: calc(var(--pt) * 26); padding: calc(var(--pt) * 10) calc(var(--pt) * 16); border-radius: calc(var(--pt) * 12); background: rgba(20,22,25,.9); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); font-size: calc(var(--pt) * 15); color: #c9cecb; }
.pad-batt::after { content: ""; display: inline-block; width: calc(var(--pt) * 24); height: calc(var(--pt) * 11); margin-left: calc(var(--pt) * 6); border-radius: 3px; background: #fff; vertical-align: middle; }

/* Real-photo pieces */
.poster.has-img::after { display: none; }
.poster.has-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-thumb img, .pad-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ph-thumb::after, .pad-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.25), transparent 35%, transparent 60%, rgba(0,0,0,.45)); }
.ph-thumb > *:not(img), .pad-thumb > *:not(img) { z-index: 2; }
.chan { position: absolute; left: calc(var(--pt) * 10); bottom: calc(var(--pt) * 12); min-width: calc(var(--pt) * 34); height: calc(var(--pt) * 26); padding: 0 calc(var(--pt) * 7); border-radius: calc(var(--pt) * 7);
    display: grid; place-items: center; background: rgba(255,255,255,.92); color: #0b0c0e; font-weight: 850; font-size: calc(var(--pt) * 12); letter-spacing: .02em; }
.pad-thumb .chan { height: calc(var(--pt) * 30); min-width: calc(var(--pt) * 40); font-size: calc(var(--pt) * 14); }
.ph-top10 { top: calc(var(--pt) * 712); }

/* Top 10 row (matches HomeTopTenRow: 132×198 posters, 42pt rank gutter, outlined heavy numerals) */
.t10-row { display: flex; align-items: flex-start; margin-top: calc(var(--pt) * 14); }
.t10 { position: relative; flex: none; padding-left: calc(var(--pt) * 42); margin-right: calc(var(--pt) * 4); }
.pst { position: relative; width: calc(var(--pt) * 132); height: calc(var(--pt) * 198); border-radius: calc(var(--pt) * 18); overflow: hidden;
    box-shadow: 0 calc(var(--pt) * 6) calc(var(--pt) * 14) rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.12); }
.pst img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pst::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.75)); }
.rate { position: absolute; top: calc(var(--pt) * 6); left: calc(var(--pt) * 6); z-index: 2; padding: calc(var(--pt) * 3) calc(var(--pt) * 7); border-radius: calc(var(--pt) * 8);
    background: rgba(0,0,0,.62); font-size: calc(var(--pt) * 11.5); font-weight: 750; color: #ffd257; }
.ptitle { position: absolute; left: calc(var(--pt) * 40); right: calc(var(--pt) * 9); bottom: calc(var(--pt) * 10); z-index: 2; text-align: right; font-weight: 850; letter-spacing: .04em;
    text-transform: uppercase; font-size: calc(var(--pt) * 14); line-height: 1.02; text-shadow: 0 1px 6px rgba(0,0,0,.7); }
.rk { position: absolute; left: calc(var(--pt) * -4); bottom: calc(var(--pt) * -14); z-index: 3; font-family: ui-rounded, "SF Pro Rounded", var(--font);
    font-size: calc(var(--pt) * 118); font-weight: 900; line-height: .8; letter-spacing: calc(var(--pt) * -9); color: #0b0c0e;
    -webkit-text-stroke: calc(var(--pt) * 3) rgba(255,255,255,.85); text-shadow: 2px 2px 6px rgba(0,0,0,.5); }
.ph-t10 { position: absolute; top: calc(var(--pt) * 742); left: calc(var(--pt) * 16); margin-top: 0; }