/* Parallax landing — one stylesheet, no build step.
   Shared by admin.html: keep .btn, .btn.ghost, .msg, .panel, .row, .hidden, .wrap, header.top,
   footer, input, label and the --bg --fg --muted --line --card --radius --danger variables. */
:root {
  --bg:#000;--fg:#fff;--muted:#a1a1a1;--faint:#7a7a7a;
  --line:rgba(255,255,255,.1);--line-2: rgba(255,255,255,.18);--line-3: rgba(255,255,255,.32);
  --card:#0a0a0a;--card-2: #111;
  --accent:#ff453a;--danger:#ff6b63;
  /* 8px grid */
  --s1: 8px;--s2: 16px;--s3: 24px;--s4: 32px;--s5: 48px;--s6: 64px;--s7: 96px;--s8: 128px;
  --radius:14px;--r-sm:8px;--r-lg:20px;--r-xl:28px;
  --max:1200px;--gutter:16px;
  --section:var(--s7);
  --fs-display:clamp(48px, 7.2vw, 100px);--fs-h2: clamp(34px, 5vw, 64px);--fs-h3: 20px;--fs-cap:13px;
  --font:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono:ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .4 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme:dark;
}
@media (min-width:720px) { :root { --gutter:32px;} }
@media (min-width:960px) { :root { --section:var(--s8);} }

*, *::before, *::after { box-sizing:border-box;}
html { -webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px;}
html, body { margin:0;background:var(--bg);color:var(--fg);}
body { font:16px/1.6 var(--font);font-feature-settings:"cv11", "ss03";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;}
img, svg, video { display:block;max-width:100%;}
a { color:inherit;text-underline-offset:3px;}
h1, h2, h3 { margin:0;font-weight:600;letter-spacing:-.025em;line-height:1.1;text-wrap:balance;}
p { margin:0;text-wrap:pretty;}
::selection { background:#fff;color:#000;}
:focus-visible { outline:2px solid var(--fg);outline-offset:3px;border-radius:6px;}
.wrap { max-width:var(--max);margin:0 auto;padding:0 var(--gutter);}
.hidden { display:none !important;}
.sr-only { position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.skip { position:absolute;left:12px;top:-60px;z-index:50;background:#fff;color:#000;padding:10px 16px;border-radius:10px;text-decoration:none;font-weight:600;}
.skip:focus { top:12px;}

/* Header: bordered by default (account and admin pages); .float starts clear and gains the border on scroll */
header.top { position:sticky;top:0;z-index:20;background:rgba(0,0,0,.7);-webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px);border-bottom:1px solid var(--line);transition:background .3s, border-color .3s;}
header.top.float:not(.scrolled) { background:transparent;border-bottom-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;}
header.top .wrap { display:flex;align-items:center;justify-content:space-between;gap:var(--s2);height:64px;}
.logo { display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:17px;letter-spacing:-.02em;text-decoration:none;min-height:44px;}
.logo svg { width:24px;height:24px;}
header.top nav { display:flex;align-items:center;gap:2px;}
header.top nav a { position:relative;display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:var(--muted);font-size:14px;padding:0 12px;border-radius:10px;transition:color .2s;}
header.top nav a:hover, header.top nav a[aria-current] { color:var(--fg);}
header.top nav a[aria-current]:not(.pill)::after { content:"";position:absolute;left:50%;bottom:6px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--fg);}
header.top nav a.pill { color:var(--fg);min-height:36px;border:1px solid var(--line-2);border-radius:999px;padding:0 16px;margin-left:var(--s1);transition:background .2s, border-color .2s;}
header.top nav a.pill:hover, header.top nav a.pill[aria-current] { background:rgba(255,255,255,.08);border-color:var(--line-3);}
@media (max-width:899px) { header.top nav a.hide-sm { display:none;} }
@media (max-width:380px) { header.top nav a.hide-xs { display:none;} }
@media (max-width:719px) { header.top nav a.pill { min-height:44px;} }

/* Buttons */
.btn { display:inline-flex;align-items:center;justify-content:center;gap:var(--s1);min-height:46px;border:1px solid var(--fg);background:var(--fg);color:#000;padding:0 22px;border-radius:999px;text-decoration:none;font:600 15px/1 var(--font);letter-spacing:-.01em;cursor:pointer;transition:background .2s, border-color .2s, box-shadow .3s, transform .2s var(--ease);white-space:nowrap;}
.btn:hover { background:#e8e8e8;border-color:#e8e8e8;box-shadow:0 0 0 4px rgba(255,255,255,.1);}
.btn:active { transform:scale(.98);}
.btn.ghost { background:rgba(255,255,255,.02);color:var(--fg);border-color:var(--line-2);}
.btn.ghost:hover { background:rgba(255,255,255,.08);border-color:var(--line-3);box-shadow:none;}
.btn.lg { min-height:52px;padding:0 28px;font-size:16px;}
.btn.block { width:100%;}
.btn:disabled { opacity:.5;cursor:default;}
.btn svg { width:16px;height:16px;}

/* Type */
.eyebrow { display:inline-flex;align-items:center;gap:var(--s1);font-size:var(--fs-cap);font-weight:500;color:var(--muted);}
.kicker { display:flex;align-items:center;gap:10px;font:500 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--faint);margin-bottom:var(--s3);}
.kicker::before { content:"";width:16px;height:1px;background:var(--line-3);}
.head.center .kicker { justify-content:center;}
h2 { font-size:var(--fs-h2);letter-spacing:-.045em;line-height:1.02;max-width:14ch;}
.head.center h2 { margin:0 auto;max-width:18ch;}
h3 { font-size:var(--fs-h3);letter-spacing:-.02em;line-height:1.25;}
.lead { color:var(--muted);font-size:clamp(17px, 1.6vw, 19px);line-height:1.55;max-width:600px;margin-top:var(--s3);}
.lead b, .lead strong { color:var(--fg);font-weight:500;}
section { padding:var(--section) 0;}
.head { margin-bottom:var(--s5);}
@media (min-width:960px) { .head { margin-bottom:var(--s6);} }
.head.center { text-align:center;}
.head.center .lead { margin-left:auto;margin-right:auto;}
.tag { display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;border:1px solid var(--line-2);border-radius:999px;padding:4px 11px;color:var(--muted);}
.taglist { display:flex;gap:6px;flex-wrap:wrap;margin-top:12px;}

/* Hero */
.hero { position:relative;padding:var(--s5) 0;margin-top:-64px;padding-top:calc(64px + 40px);text-align:center;isolation:isolate;overflow:hidden;}
.hero::before { content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(55% 38% at 50% 0%, rgba(255,255,255,.11), transparent 70%), radial-gradient(40% 30% at 50% 72%, rgba(255,255,255,.07), transparent 70%);}
.hero::after { content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:var(--grain), linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:160px 160px, 64px 64px, 64px 64px;opacity:.35;
  -webkit-mask-image:radial-gradient(70% 45% at 50% 0%, #000, transparent 80%);mask-image:radial-gradient(70% 45% at 50% 0%, #000, transparent 80%);}
@media (min-width:960px) { .hero { padding-top:calc(64px + 96px);padding-bottom:var(--s6);} }
.hero .eyebrow { border:1px solid var(--line-2);border-radius:999px;padding:6px 14px 6px 10px;background:rgba(255,255,255,.04);margin-bottom:var(--s4);max-width:100%;}
.hero .eyebrow i { flex:none;width:6px;height:6px;border-radius:50%;background:var(--fg);box-shadow:0 0 0 3px rgba(255,255,255,.16);}
.hero h1 { font-size:var(--fs-display);letter-spacing:-.055em;line-height:.96;font-weight:600;margin:0 auto;}
.hero h1 .dim { display:block;background:linear-gradient(180deg, #d4d4d4 10%, #6f6f6f 110%);-webkit-background-clip:text;background-clip:text;color:transparent;}
.hero .lead { margin:var(--s3) auto 0;max-width:600px;text-wrap:balance;}
@media (min-width:960px) { .hero .lead { margin-top:var(--s4);} }
.actions { display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:40px;}
.fine { list-style:none;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:4px 0;margin:var(--s3) 0 0;font-size:var(--fs-cap);color:var(--faint);}
.fine li { white-space:nowrap;}
.fine li + li::before { content:"";display:inline-block;width:3px;height:3px;border-radius:50%;background:var(--faint);margin:0 12px;vertical-align:middle;}
@media (max-width:479px) { .hero .actions .btn { flex:1 1 100%;} }

/* Player illustration (replaced by media/hero.mp4 when present) */
.stage { --tilt:9deg;margin:var(--s6) auto 0;max-width:1080px;position:relative;perspective:2200px;}
@media (min-width:960px) { .stage { --tilt:16deg;margin-top:80px;} }
.stage::before { content:"";position:absolute;inset:-10% -6% 0;z-index:-1;pointer-events:none;
  background:radial-gradient(50% 45% at 50% 40%, rgba(255,255,255,.16), transparent 70%);filter:blur(20px);}
.bezel { position:relative;padding:6px;border-radius:calc(clamp(12px, 2vw, 20px) + 6px);background:linear-gradient(180deg, #202020, #0b0b0b 40%);
  box-shadow:0 0 0 1px rgba(255,255,255,.12), inset 0 1px 0 rgba(255,255,255,.18), 0 60px 120px -40px #000, 0 30px 80px -20px rgba(255,255,255,.08);
  transform-origin:50% 0;transform:rotateX(calc(var(--t, 0) * var(--tilt))) scale(calc(1 - var(--t, 0) * .05));will-change:transform;}
@media (min-width:960px) { .bezel { padding:10px;border-radius:30px;} }
.shot { position:relative;aspect-ratio:16/9;border-radius:clamp(10px, 2vw, 20px);overflow:hidden;background:#050505;container-type:inline-size;box-shadow:0 0 0 1px rgba(255,255,255,.08);}
.shot video.media { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s;}
.shot.has-video video.media { opacity:1;}
.shot.has-video .art { visibility:hidden;}
.stage .note { margin-top:var(--s3);font-size:12px;color:var(--faint);text-align:center;}
.stage:has(.has-video) .note { display:none;}
.art { position:absolute;inset:0;text-align:left;}
.art .scene { position:absolute;inset:0;width:100%;height:100%;}
.art::before { content:"";position:absolute;inset:0;z-index:1;background:var(--grain);background-size:120px;opacity:.1;mix-blend-mode:overlay;pointer-events:none;}
.art::after { content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,.7), transparent 30%, transparent 58%, rgba(0,0,0,.85)), radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(0,0,0,.5));}
.ui { position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:space-between;padding:3.4cqw 3.8cqw;color:#fff;}
.ui svg { width:100%;height:100%;}
.ui-top { display:flex;align-items:flex-start;justify-content:space-between;gap:2cqw;}
.ui-btn { flex:none;width:max(26px, 4cqw);height:max(26px, 4cqw);border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);}
.ui-btn svg { width:46%;height:46%;}
.ui-title { flex:1;text-align:center;line-height:1.3;min-width:0;}
.ui-title b { display:block;font-size:max(11px, 1.6cqw);font-weight:600;letter-spacing:-.01em;}
.ui-title small { display:block;font-size:max(9px, 1.15cqw);color:rgba(255,255,255,.62);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ui-r { display:flex;gap:1.1cqw;}
.live { display:inline-flex;align-items:center;gap:max(4px, .6cqw);font:600 max(8px, .95cqw)/1 var(--font);letter-spacing:.14em;text-transform:uppercase;margin-bottom:.7cqw;padding:max(3px, .45cqw) max(6px, .9cqw);border-radius:999px;background:rgba(255,255,255,.1);}
.live::before { content:"";width:max(5px, .65cqw);height:max(5px, .65cqw);border-radius:50%;background:var(--accent);box-shadow:0 0 0 .35cqw rgba(255,69,58,.25);animation:pulse 2s ease-in-out infinite;}
.ui-gest { position:absolute;left:3.8cqw;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:1cqw;padding:1.2cqw .8cqw;border-radius:999px;background:rgba(0,0,0,.35);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);}
.ui-gest svg { width:max(12px, 1.8cqw);height:max(12px, 1.8cqw);}
.ui-gest span { position:relative;width:max(4px, .55cqw);height:13cqw;border-radius:9px;background:rgba(255,255,255,.22);overflow:hidden;}
.ui-gest i { position:absolute;inset:35% 0 0;background:#fff;border-radius:inherit;}
.ui-mid { display:flex;align-items:center;justify-content:center;gap:9cqw;}
.ui-mid .skip10 { width:max(22px, 4.2cqw);height:max(22px, 4.2cqw);opacity:.92;}
.ui-mid .pp { width:max(40px, 8cqw);height:max(40px, 8cqw);border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 0 0 1px rgba(255,255,255,.14) inset, 0 10px 30px rgba(0,0,0,.4);}
.ui-mid .pp svg { width:34%;height:34%;}
.prog { position:relative;height:max(3px, .34cqw);border-radius:9px;background:rgba(255,255,255,.22);}
.prog::before { content:"";position:absolute;inset:0 8% 0 0;background:rgba(255,255,255,.2);border-radius:inherit;}
.prog i { position:absolute;inset:0 auto 0 0;width:62%;border-radius:inherit;background:#fff;animation:prog 16s linear infinite;}
.prog i::after { content:"";position:absolute;right:calc(max(9px, 1.25cqw) / -2);top:50%;width:max(9px, 1.25cqw);height:max(9px, 1.25cqw);border-radius:50%;background:#fff;transform:translateY(-50%);box-shadow:0 0 0 .5cqw rgba(255,255,255,.18);}
.prog b { position:absolute;right:0;bottom:calc(100% + 1.2cqw);font:600 max(8px, .95cqw)/1 var(--font);letter-spacing:.08em;text-transform:uppercase;padding:.5cqw .9cqw;border-radius:999px;border:1px solid rgba(255,255,255,.35);color:rgba(255,255,255,.85);}
.times { display:flex;align-items:center;justify-content:space-between;gap:1cqw;margin-top:1.6cqw;font:500 max(9px, 1.15cqw)/1 var(--font);font-variant-numeric:tabular-nums;color:rgba(255,255,255,.72);}
.chips { display:flex;gap:.8cqw;}
.chips span { border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.04);border-radius:999px;padding:.5cqw 1.1cqw;color:#fff;}
@container (max-width:520px) { .chips span:nth-child(n+3) { display:none;} .prog b { display:none;} }

/* Platforms strip */
.platforms { padding:var(--s5) 0 0;}
.platforms p { text-align:center;font-size:var(--fs-cap);color:var(--faint);margin-bottom:var(--s3);}
.platforms ul { list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:12px 28px;}
.platforms li { display:inline-flex;align-items:center;gap:9px;color:var(--muted);font-size:15px;font-weight:500;letter-spacing:-.01em;}
.platforms li svg { width:20px;height:20px;color:var(--fg);opacity:.85;}
@media (max-width:479px) { .platforms ul { gap:12px 20px;} .platforms li { font-size:14px;gap:7px;} .platforms li svg { width:18px;height:18px;} }
@media (min-width:960px) { .platforms ul { gap:16px 48px;} .platforms li { font-size:16px;} }

/* Cards */
.tile { position:relative;overflow:hidden;background:linear-gradient(180deg, #0f0f0f, #070707);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s3);display:flex;flex-direction:column;gap:var(--s1);transition:border-color .3s, transform .4s var(--ease), box-shadow .4s;}
.tile::before { content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);opacity:.6;}
.tile:hover { border-color:var(--line-2);box-shadow:0 24px 60px -30px rgba(0,0,0,.9);}
.tile p { color:var(--muted);font-size:15px;line-height:1.55;}
.tile .viz { margin-top:auto;padding-top:var(--s3);}
.ico { width:40px;height:40px;border-radius:12px;border:1px solid var(--line-2);display:grid;place-items:center;margin-bottom:var(--s2);background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.01));}
.ico svg { width:18px;height:18px;}
@media (min-width:1040px) { .tile { padding:var(--s4);} .tile.big h3 { font-size:24px;} }

/* Bento */
.bento { display:grid;gap:12px;grid-template-columns:1fr;}
@media (min-width:720px) { .bento { grid-template-columns:repeat(2, 1fr);} .bento .w2, .bento .big, .bento .w4 { grid-column:span 2;} }
@media (min-width:1040px) { .bento { grid-template-columns:repeat(4, 1fr);gap:var(--s2);} .bento .big { grid-row:span 2;} .bento .w4 { grid-column:span 4;} }

/* Guide visual */
.epg { border:1px solid var(--line);border-radius:12px;overflow:hidden;font-size:12px;position:relative;background:#050505;}
.epg .row-h, .epg .ch { display:grid;grid-template-columns:72px 1fr;}
.epg .ch.xl { display:none;}
.tile.big .viz { flex:1;display:flex;flex-direction:column;}
.tile.big .epg { flex:1;display:flex;flex-direction:column;}
.tile.big .epg .ch { flex:1;}
@media (min-width:1040px) { .epg .ch.xl { display:grid;} .big .epg .pr span { padding:12px 10px;} }
.epg .row-h { color:var(--faint);font:500 11px/1 var(--mono);border-bottom:1px solid var(--line);}
.epg .row-h div { display:flex;}
.epg .row-h span { flex:1;padding:10px 8px;}
.epg .ch { border-bottom:1px solid var(--line);}
.epg .ch:last-of-type { border-bottom:0;}
.epg .ch > b { font-weight:500;color:var(--muted);padding:13px 8px 13px 10px;align-self:center;border-right:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.epg .pr { display:flex;gap:3px;padding:4px;}
.epg .pr span { background:#141414;border-radius:6px;padding:9px 10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
.epg .pr span.on { background:#242424;color:#fff;}
.epg .pr span.sel { background:#fff;color:#000;font-weight:500;}
.epg .now { position:absolute;top:0;bottom:0;left:calc(72px + (100% - 72px) * .46);width:1px;background:var(--accent);}
.epg .now::before { content:"";position:absolute;top:6px;left:-3px;width:7px;height:7px;border-radius:50%;background:var(--accent);}

/* Catalog visual */
.posters { display:grid;grid-template-columns:repeat(5, 1fr);gap:var(--s1);}
.posters span { aspect-ratio:2/3;border-radius:var(--r-sm);border:1px solid var(--line);position:relative;overflow:hidden;background:linear-gradient(160deg, #2a2a2a, #0c0c0c);}
.posters span:nth-child(2) { background:linear-gradient(200deg, #3a3a3a, #111);}
.posters span:nth-child(3) { background:linear-gradient(140deg, #1f1f1f, #050505 70%);}
.posters span:nth-child(4) { background:linear-gradient(180deg, #444, #141414);}
.posters span:nth-child(5) { background:linear-gradient(120deg, #181818, #2f2f2f);}
.posters span i { position:absolute;left:6px;right:6px;bottom:6px;height:3px;border-radius:3px;background:rgba(255,255,255,.25);}
.posters span i::before { content:"";position:absolute;inset:0 auto 0 0;width:var(--p, 60%);background:#fff;border-radius:inherit;}
.nextep { margin-top:12px;display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:13px;background:#050505;}
.nextep small { color:var(--faint);display:block;font-size:11px;}
.mini-pp { width:28px;height:28px;flex:none;border-radius:50%;background:#fff;display:grid;place-items:center;color:#000;}
.mini-pp svg { width:12px;height:12px;}

/* Small visuals */
.speed { display:flex;align-items:center;gap:var(--s2);}
.speed b { font-size:56px;font-weight:600;letter-spacing:-.05em;line-height:1;}
.speed span { color:var(--muted);font-size:13px;line-height:1.4;}
.sources { list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s1);}
.sources li { font:500 13px/1 var(--mono);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:10px 12px;background:#050505;transition:border-color .2s, color .2s;}
.tile code, details code { font:.92em/1.3 var(--mono);background:rgba(255,255,255,.06);border-radius:5px;padding:1px 5px;}
.sources li:hover { border-color:var(--line-3);}
@media (min-width:1040px) { .tile.w4 { flex-direction:row;align-items:center;justify-content:space-between;gap:var(--s5);} .tile.w4 .viz { margin:0;padding:0;max-width:560px;justify-content:flex-end;} .tile.w4 > div:first-child { max-width:420px;} }
.pin { display:flex;gap:10px;}
.pin span { width:12px;height:12px;border-radius:50%;border:1.5px solid var(--line-2);}
.pin span.f { background:#fff;border-color:#fff;}
.mini-list { list-style:none;margin:0;padding:0;font-size:13px;}
.mini-list li { display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid var(--line);color:var(--muted);}
.mini-list li b { font:500 12px/1.6 var(--mono);color:var(--fg);}
.sleep { display:flex;align-items:baseline;justify-content:space-between;border-top:1px solid var(--line);padding-top:10px;font-size:13px;color:var(--muted);}
.sleep b { font:500 22px/1 var(--mono);color:var(--fg);letter-spacing:-.02em;}
.file-chip { display:inline-flex;align-items:center;gap:var(--s1);border:1px solid var(--line-2);border-radius:10px;padding:8px 12px;font:500 12px/1 var(--mono);background:#050505;max-width:100%;}
.file-chip svg { width:16px;height:16px;flex:none;}
.file-chip span { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* Made for TV */
.tv-grid { display:grid;gap:12px;}
@media (min-width:720px) { .tv-grid { grid-template-columns:1fr 1fr;} .tv-link { grid-column:span 2;} }
@media (min-width:1040px) { .tv-grid { grid-template-columns:2fr 1fr;grid-template-rows:auto auto;gap:var(--s2);} .tv-link { grid-column:1;grid-row:span 2;} }
.tv-link { gap:var(--s3);}
@media (min-width:1040px) { .tv-link .tvframe { flex:1;display:flex;} .tv-link .tvscreen { flex:1;aspect-ratio:auto;} }
.tvframe { border-radius:14px;padding:6px;background:#151515;box-shadow:0 0 0 1px var(--line-2), 0 30px 60px -30px #000;container-type:inline-size;}
.tvscreen { aspect-ratio:16/9;border-radius:9px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:4cqw;background:radial-gradient(70% 70% at 50% 30%, #1d1d1d, #050505);}
.tvlogo { width:max(20px, 4.2cqw);height:max(20px, 4.2cqw);margin-bottom:2.4cqw;}
.tv-h { font-size:max(15px, 3.6cqw);font-weight:600;letter-spacing:-.03em;}
.tv-p { font-size:max(11px, 1.9cqw);color:var(--muted);margin-top:1cqw;max-width:46ch;}
.tv-p b { color:var(--fg);font-weight:500;}
.code { display:flex;gap:1.4cqw;margin-top:3.4cqw;}
.code span { width:max(28px, 7.4cqw);aspect-ratio:4/5;display:grid;place-items:center;border:1px solid var(--line-3);border-radius:max(6px, 1.2cqw);font:600 max(16px, 3.8cqw)/1 var(--mono);background:rgba(255,255,255,.04);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);}
.tv-wait { display:inline-flex;align-items:center;gap:1cqw;margin-top:3cqw;font-size:max(10px, 1.6cqw);color:var(--faint);}
.tv-wait i { width:max(5px, .9cqw);height:max(5px, .9cqw);border-radius:50%;background:var(--fg);animation:pulse 1.6s ease-in-out infinite;}
.tv-copy p { margin-top:var(--s1);max-width:520px;}
.more { display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:var(--s1);font-size:15px;font-weight:500;text-decoration:none;}
.more svg { width:16px;height:16px;transition:transform .25s var(--ease);}
.more:hover svg { transform:translateX(3px);}
.code.sm { gap:6px;margin:0;}
.code.sm span { flex:1;width:auto;max-width:44px;border-radius:var(--r-sm);font-size:18px;border-color:var(--line-2);}
.dpad { position:relative;width:132px;height:132px;margin:0 auto;border-radius:50%;background:linear-gradient(180deg, #1a1a1a, #0b0b0b);box-shadow:0 0 0 1px var(--line-2), inset 0 1px 0 rgba(255,255,255,.08);}
.dpad span { position:absolute;width:0;height:0;border:6px solid transparent;}
.dpad .u { top:14px;left:50%;margin-left:-6px;border-bottom-color:var(--muted);}
.dpad .d { bottom:14px;left:50%;margin-left:-6px;border-top-color:var(--muted);}
.dpad .l { left:14px;top:50%;margin-top:-6px;border-right-color:var(--muted);}
.dpad .r { right:14px;top:50%;margin-top:-6px;border-left-color:#fff;}
.dpad b { position:absolute;inset:38px;border-radius:50%;display:grid;place-items:center;font:600 13px/1 var(--font);background:#222;box-shadow:0 0 0 1px var(--line-2), 0 0 0 6px rgba(255,255,255,.04);}
.mv { display:grid;grid-template-columns:1fr 1fr;gap:6px;}
.mv span { position:relative;aspect-ratio:16/9;border-radius:6px;background:linear-gradient(160deg, #1f1f1f, #0d0d0d);}
.mv span.on { box-shadow:0 0 0 2px #fff;background:linear-gradient(160deg, #3a3a3a, #161616);}
.mv em { position:absolute;left:6px;bottom:6px;font:600 10px/1 var(--font);font-style:normal;background:#fff;color:#000;border-radius:999px;padding:3px 7px;}

/* Showcase */
.devices { display:grid;gap:40px 28px;grid-template-columns:1fr;align-items:end;}
@media (min-width:760px) { .devices { grid-template-columns:1.1fr 2fr;grid-template-areas:"phone laptop" "tv tv";} .device.phone { grid-area:phone;} .device.laptop { grid-area:laptop;} .device.tv { grid-area:tv;} }
@media (min-width:760px) { .devices:has(.device.laptop.hidden) { grid-template-columns:1fr 1.25fr;grid-template-areas:"phone tv";align-items:center;} .devices:has(.device.laptop.hidden) .device.tv { max-width:none;} }
.device { margin:0;}
.device .screen { position:relative;overflow:hidden;background:#050505;box-shadow:0 0 0 1px var(--line-2), 0 30px 80px -30px rgba(0,0,0,.9);}
.device video { width:100%;height:100%;object-fit:cover;}
.device figcaption { margin-top:var(--s2);color:var(--muted);font-size:15px;}
.device figcaption b { display:block;color:var(--fg);font-weight:600;margin-bottom:2px;}
.device.phone .screen { aspect-ratio:19.5/9;border-radius:30px;border:7px solid #161616;}
.device.laptop .screen { aspect-ratio:16/10;border-radius:14px 14px 0 0;border:9px solid #161616;border-bottom-width:12px;}
.device.laptop .base { height:10px;margin:0 -6%;border-radius:0 0 14px 14px;background:linear-gradient(#2a2a2a, #121212);}
.device.tv { max-width:860px;margin:0 auto;width:100%;}
.device.tv .screen { aspect-ratio:16/9;border-radius:10px;border:6px solid #111;}
.device.tv .stand { width:22%;height:8px;margin:0 auto;border-radius:0 0 6px 6px;background:#161616;}

/* Steps */
.steps { list-style:none;margin:0;padding:0;display:grid;gap:12px;}
@media (min-width:900px) { .steps { grid-template-columns:repeat(3, 1fr);gap:var(--s2);} }
.steps li { border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s4) var(--s3);background:var(--card);display:flex;flex-direction:column;gap:10px;}
.steps .n { font:500 12px/1 var(--mono);color:var(--faint);letter-spacing:.1em;margin-bottom:var(--s1);}
.steps p { color:var(--muted);font-size:15px;}
.steps .viz { margin-top:auto;padding-top:var(--s3);}
.field-viz { display:flex;align-items:center;gap:var(--s1);border:1px solid var(--line-2);border-radius:10px;padding:6px 6px 6px 12px;font:500 12px/1 var(--mono);color:var(--muted);background:#050505;white-space:nowrap;overflow:hidden;}
.field-viz span { flex:1;overflow:hidden;text-overflow:ellipsis;}
.field-viz b { background:#fff;color:#000;border-radius:6px;padding:8px 10px;font:600 12px/1 var(--font);}
.devices-viz { display:flex;gap:12px;color:var(--muted);}
.devices-viz svg { width:28px;height:28px;}

/* Privacy */
.privacy { border-top:1px solid var(--line);background:radial-gradient(60% 40% at 50% 0%, rgba(255,255,255,.05), transparent 70%);}
.priv-grid { list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--line);}
.priv-grid li { padding:var(--s4) 0;border-bottom:1px solid var(--line);}
.priv-grid p { color:var(--muted);font-size:15px;margin-top:var(--s1);max-width:34ch;}
@media (min-width:720px) { .priv-grid { grid-template-columns:1fr 1fr;} .priv-grid li { padding:var(--s4) var(--s4) var(--s4) 0;} .priv-grid li:nth-child(2n) { padding-left:var(--s4);border-left:1px solid var(--line);} }
@media (min-width:1040px) { .priv-grid { grid-template-columns:repeat(4, 1fr);} .priv-grid li, .priv-grid li:nth-child(2n) { padding:var(--s4) var(--s3);border-left:1px solid var(--line);} .priv-grid li:first-child { border-left:0;padding-left:0;} }
@media (max-width:719px) { .priv-grid li { display:grid;grid-template-columns:40px 1fr;column-gap:var(--s2);padding:var(--s3) 0;} .priv-grid .ico { grid-row:span 2;margin:0;} .priv-grid p { margin-top:4px;} }
.priv-note { margin-top:var(--s3);font-size:14px;color:var(--faint);}
.priv-note a { color:var(--muted);white-space:nowrap;}
.priv-note a:hover { color:var(--fg);}

/* No content included */
.nocontent { padding-top:0;}
.nc { border:1px solid var(--line);border-radius:var(--r-xl);padding:var(--s5) var(--s3);background:linear-gradient(180deg, #0c0c0c, #050505);display:grid;gap:var(--s5);}
@media (min-width:960px) { .nc { grid-template-columns:5fr 7fr;gap:var(--s6);padding:var(--s6);} }
.nc h2 { font-size:clamp(30px, 3.6vw, 44px);}
.nc-cols { display:grid;gap:var(--s4);}
@media (min-width:720px) { .nc-cols { grid-template-columns:1fr 1fr;} }
.nc-cols h3 { font-size:15px;font-weight:500;color:var(--muted);letter-spacing:0;padding-bottom:12px;border-bottom:1px solid var(--line);}
.nc-cols ul { list-style:none;margin:0;padding:0;}
.nc-cols li { display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:1.5;}
.nc-cols li svg { width:18px;height:18px;flex:none;margin-top:2px;}
.nc-cols .no li { color:var(--muted);}
.nc-cols .no svg { color:var(--faint);}

/* Plans */
.plans { display:grid;gap:var(--s2);max-width:880px;margin:0 auto;}
@media (min-width:760px) { .plans { grid-template-columns:1fr 1fr;} }
.plan { position:relative;border:1px solid var(--line);border-radius:24px;padding:var(--s4);background:var(--card);display:flex;flex-direction:column;transition:border-color .3s;}
.plan:hover { border-color:var(--line-2);}
.plan.featured { border-color:rgba(255,255,255,.45);background:radial-gradient(120% 70% at 50% 0%, rgba(255,255,255,.1), transparent 60%), #0a0a0a;box-shadow:0 40px 100px -50px rgba(255,255,255,.25);}
@media (max-width:759px) { .plan.featured { order:-1;} }
.plan .name { min-height:24px;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:15px;font-weight:500;letter-spacing:0;color:var(--muted);}
.plan .badge { line-height:16px;font-size:12px;font-weight:600;color:#000;background:#fff;border-radius:999px;padding:4px 10px;}
.price { margin:var(--s2) 0 6px;font-size:52px;font-weight:600;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums;}
.price small { font-size:16px;color:var(--muted);font-weight:500;letter-spacing:0;}
.plan .sub { color:var(--faint);font-size:14px;min-height:1.6em;}
.plan ul { list-style:none;margin:var(--s3) 0 var(--s4);padding:var(--s3) 0 0;border-top:1px solid var(--line);display:grid;gap:12px;font-size:15px;}
.plan li { display:flex;gap:10px;align-items:flex-start;}
.plan li svg { width:18px;height:18px;flex:none;margin-top:3px;}
.plan .btn { margin-top:auto;}
.plans-note { text-align:center;color:var(--faint);font-size:14px;margin:var(--s4) auto 0;max-width:560px;}

/* Downloads */
.dl { display:grid;gap:12px;}
@media (min-width:760px) { .dl { grid-template-columns:repeat(3, 1fr);gap:var(--s2);} }
.dl > div { border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s3);background:var(--card);display:flex;flex-direction:column;gap:6px;transition:border-color .3s;}
.dl > div:hover { border-color:var(--line-2);}
.dl svg.big { width:28px;height:28px;margin-bottom:var(--s2);}
.dl h3 { font-size:18px;}
.dl p { color:var(--muted);font-size:14px;margin-bottom:var(--s3);}
.dl a.btn { margin-top:auto;align-self:flex-start;}

/* FAQ */
.faq { display:grid;gap:var(--s5);}
@media (min-width:960px) { .faq { grid-template-columns:5fr 7fr;gap:80px;} }
.faq .lead a { color:var(--fg);}
details { border-bottom:1px solid var(--line);}
details:first-of-type { border-top:1px solid var(--line);}
summary { list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font-weight:500;font-size:17px;letter-spacing:-.01em;transition:color .2s;}
summary:hover { color:#d9d9d9;}
summary::-webkit-details-marker { display:none;}
summary::after { content:"";flex:none;width:12px;height:12px;background:linear-gradient(currentColor, currentColor) center/100% 1.5px no-repeat, linear-gradient(currentColor, currentColor) center/1.5px 100% no-repeat;transition:transform .3s var(--ease);color:var(--muted);}
details[open] summary::after { transform:rotate(45deg);}
details p { color:var(--muted);padding:0 32px 24px 0;margin-top:-6px;}

/* Final CTA */
.final { text-align:center;border:1px solid var(--line);border-radius:var(--r-xl);padding:72px 20px;position:relative;overflow:hidden;isolation:isolate;margin-bottom:var(--s7);
  background:radial-gradient(70% 90% at 50% 100%, rgba(255,255,255,.13), transparent 70%), #050505;}
.final::after { content:"";position:absolute;inset:0;z-index:-1;background:var(--grain);background-size:160px;opacity:.05;}
@media (min-width:960px) { .final { padding:128px 40px;} }
.final h2 { font-size:clamp(36px, 6vw, 72px);margin:0 auto;max-width:none;}
.final .lead { margin:var(--s3) auto 0;}

/* Footer (admin.html uses the simple variant: footer > .wrap > span + span) */
footer { border-top:1px solid var(--line);padding:var(--s4) 0 44px;color:var(--faint);font-size:14px;}
footer .wrap { display:flex;gap:14px 24px;flex-wrap:wrap;justify-content:space-between;align-items:center;}
footer a { color:var(--muted);text-decoration:none;transition:color .2s;}
footer a:hover { color:var(--fg);}
footer .made { display:inline-flex;align-items:center;gap:6px;}
footer .made svg { width:14px;height:14px;}
footer.site { padding:var(--s6) 0 var(--s4);}
footer.site .wrap { display:block;}
footer.site .cols { display:grid;gap:var(--s4) var(--s3);grid-template-columns:1fr 1fr;}
@media (min-width:900px) { footer.site .cols { grid-template-columns:2.2fr 1fr 1fr 1fr 1fr;} }
footer.site .brand { grid-column:1 / -1;}
@media (min-width:900px) { footer.site .brand { grid-column:auto;} }
footer.site .brand p { margin-top:var(--s2);max-width:320px;line-height:1.55;}
footer.site .brand .made { margin-top:var(--s2);color:var(--muted);}
footer.site h2 { margin:0 0 var(--s1);font-size:13px;font-weight:500;letter-spacing:0;color:var(--fg);max-width:none;}
footer.site ul { list-style:none;margin:0;padding:0;}
footer.site li a { display:inline-flex;align-items:center;gap:var(--s1);min-height:44px;}
@media (min-width:900px) { footer.site li a { min-height:34px;} }
footer.site .mail svg { width:16px;height:16px;}
footer.site .base { display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;border-top:1px solid var(--line);margin-top:var(--s5);padding-top:var(--s3);font-size:13px;}
footer.mini { font-size:13px;}
footer.mini .links { display:flex;flex-wrap:wrap;gap:0 20px;}
footer.mini .links a { display:inline-flex;align-items:center;min-height:44px;}

/* App pages: account, TV, thanks */
body.app { min-height:100vh;min-height:100svh;display:flex;flex-direction:column;}
body.app main { flex:1;width:100%;display:flex;align-items:center;justify-content:center;position:relative;isolation:isolate;padding-top:var(--s5);padding-bottom:var(--s6);}
body.app main::before { content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(50% 45% at 50% 30%, rgba(255,255,255,.09), transparent 70%);}
body.app main::after { content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.4;
  background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);background-size:64px 64px;
  -webkit-mask-image:radial-gradient(45% 40% at 50% 35%, #000, transparent 80%);mask-image:radial-gradient(45% 40% at 50% 35%, #000, transparent 80%);}
.panel { width:100%;max-width:440px;margin:64px auto;}
body.app .panel { margin:0 auto;background:linear-gradient(180deg, rgba(20,20,20,.9), rgba(8,8,8,.92));border:1px solid var(--line-2);border-radius:24px;padding:var(--s4) 22px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 40px 100px -40px #000;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);}
@media (min-width:480px) { body.app .panel { padding:40px;} }
.panel h1 { font-size:30px;letter-spacing:-.035em;margin:0 0 var(--s1);}
.panel .lead { font-size:15px;margin:0;}
.panel .mark { width:48px;height:48px;border-radius:14px;border:1px solid var(--line-2);display:grid;place-items:center;margin-bottom:var(--s3);background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.01));}
.panel .mark svg { width:22px;height:22px;}
.panel .brandmark { display:block;width:40px;height:40px;margin-bottom:var(--s3);}
.panel .brandmark svg { width:100%;height:100%;}
#buy .btn { gap:.3em;}
.panel.center { text-align:center;}
.panel.center .mark { margin-left:auto;margin-right:auto;}
.panel form { margin-top:var(--s3);}
label { display:block;font-size:13px;font-weight:500;color:var(--muted);margin:var(--s2) 0 var(--s1);}
input { width:100%;min-height:48px;padding:12px 14px;border-radius:12px;border:1px solid var(--line-2);background:#050505;color:var(--fg);font:16px/1.3 var(--font);transition:border-color .2s, box-shadow .2s;}
input::placeholder { color:var(--faint);}
input:hover { border-color:var(--line-3);}
input:focus { outline:none;border-color:var(--fg);box-shadow:0 0 0 4px rgba(255,255,255,.12);}
.row { display:flex;gap:10px;flex-wrap:wrap;margin-top:20px;}
.row.split > .btn { flex:1 1 140px;}
.link-muted { display:inline-flex;align-items:center;min-height:44px;color:var(--muted);font-size:14px;}
.link-muted:hover { color:var(--fg);}
.msg { margin-top:var(--s2);color:var(--muted);min-height:1.4em;font-size:14px;}
.msg:empty { margin-top:0;min-height:0;}
.msg.error { color:var(--danger);}
.msg a { color:var(--fg);}
.status-list { margin:var(--s3) 0 0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:rgba(0,0,0,.3);}
.status { display:flex;justify-content:space-between;gap:var(--s2);padding:14px var(--s2);font-size:15px;}
.status + .status { border-top:1px solid var(--line);}
.status span:first-child { color:var(--muted);}
.status span:last-child { font-weight:500;text-align:right;}
.divider { height:1px;background:var(--line);margin:var(--s3) 0 6px;}
.below { margin-top:var(--s3);text-align:center;font-size:14px;color:var(--faint);}
.below a { color:var(--muted);}
.code-input { font:600 28px/1 var(--mono) !important;letter-spacing:.35em;text-transform:uppercase;text-align:center;padding-left:calc(14px + .35em) !important;min-height:68px !important;border-radius:14px !important;background:rgba(255,255,255,.03) !important;}
.next-steps { list-style:none;margin:var(--s4) 0 0;padding:var(--s3) 0 0;border-top:1px solid var(--line);display:grid;gap:12px;text-align:left;font-size:14px;color:var(--muted);}
.next-steps li { display:flex;gap:12px;align-items:baseline;}
.next-steps b { font:500 12px/1 var(--mono);color:var(--faint);}

/* Legal */
.legal { max-width:720px;margin:0 auto;padding-top:var(--s6);padding-bottom:var(--s7);}
@media (min-width:960px) { .legal { padding-top:var(--s7);} }
.legal > h1 { font-size:clamp(36px, 6vw, 56px);letter-spacing:-.045em;}
.legal .toc { display:flex;flex-wrap:wrap;gap:var(--s1);margin:var(--s4) 0 var(--s1);padding-bottom:var(--s4);border-bottom:1px solid var(--line);}
.legal .toc a { text-decoration:none;min-height:36px;padding:0 14px;font-size:13px;transition:border-color .2s, color .2s;}
@media (max-width:719px) { .legal .toc a { min-height:44px;} }
.legal .toc a:hover { color:var(--fg);border-color:var(--line-3);}
.legal h2 { font-size:24px;letter-spacing:-.025em;margin:var(--s6) 0 var(--s2);max-width:none;}
.legal p, .legal li { color:var(--muted);}
.legal p + p { margin-top:14px;}
.legal strong { color:var(--fg);font-weight:500;}
.legal ul { padding-left:20px;display:grid;gap:10px;}
.legal .callout { border:1px solid var(--line);border-radius:14px;padding:var(--s2) 18px;margin-top:var(--s5);font-size:13px;color:var(--faint);}

/* Motion */
@keyframes pulse { 50% { opacity:.35;} }
@keyframes prog { from { width:58%;} to { width:66%;} }
@keyframes drift { to { transform:translateX(var(--d, -16px));} }
@keyframes rise { from { opacity:0;transform:translateY(16px);} to { opacity:1;transform:none;} }
@media (prefers-reduced-motion:no-preference) {
  .hero .eyebrow, .hero h1, .hero .lead, .hero .actions, .hero .fine, .stage { animation:rise .9s var(--ease) both;}
  .hero h1 { animation-delay:.06s;} .hero .lead { animation-delay:.14s;} .hero .actions { animation-delay:.22s;} .hero .fine { animation-delay:.28s;}
  .stage { animation-duration:1.2s;animation-delay:.34s;}
  .bezel { transition:transform .15s linear;}
  body.app .panel { animation:rise .7s var(--ease) both;}
  .scene .l1 { animation:drift 18s ease-in-out infinite alternate;}
  .scene .l2 { animation:drift 18s ease-in-out infinite alternate;--d:-40px;}
  .scene .l3 { animation:drift 18s ease-in-out infinite alternate;--d:-80px;}
  .js .reveal { opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease), transform .8s var(--ease), border-color .3s, box-shadow .4s;}
  .js .reveal.in { opacity:1;transform:none;}
  .bento .reveal:nth-child(2n), .steps .reveal:nth-child(2), .priv-grid .reveal:nth-child(2), .dl .reveal:nth-child(2), .plans .reveal:nth-child(2), .tv-grid .reveal:nth-child(2) { transition-delay:.08s;}
  .bento .reveal:nth-child(3n), .steps .reveal:nth-child(3), .priv-grid .reveal:nth-child(3), .dl .reveal:nth-child(3), .tv-grid .reveal:nth-child(3) { transition-delay:.16s;}
  .priv-grid .reveal:nth-child(4) { transition-delay:.24s;}
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto;}
  *, *::before, *::after { animation:none !important;transition:none !important;}
}

/* Help center (ayuda.html), built on .legal */
.help .help-search { position:relative;margin-top:var(--s4);}
.help .help-search svg { position:absolute;left:16px;top:50%;width:20px;height:20px;margin-top:-10px;color:var(--faint);pointer-events:none;}
.help .help-search input { padding-left:46px;min-height:52px;border-radius:999px;}
.help .toc { margin-top:var(--s2);}
.help-status { font-size:13px;color:var(--faint);min-height:1.2em;margin:var(--s1) 0 0;}
.help-empty { margin-top:var(--s3);}
.help-empty a, .help-body a { color:var(--fg);}
.help-group { padding:0;}
.help details, .help-group { scroll-margin-top:80px;}
.help-group[hidden], .help details[hidden] { display:none;}
.legal.help h2 { margin:var(--s5) 0 var(--s2);}
.help-note { font-size:14px;margin-bottom:var(--s2);}
.help summary:focus-visible { outline:2px solid var(--fg);outline-offset:4px;border-radius:4px;}
.help-body { color:var(--muted);padding:0 8px 24px 0;margin-top:-6px;}
.help-body p { padding:0;margin:0;}
.help-body > * + * { margin-top:12px;}
.legal .help-body ol, .legal .help-body ul { padding-left:22px;gap:8px;margin-bottom:0;}
.help-body code { font:13px/1.4 var(--mono);color:var(--fg);background:rgba(255,255,255,.06);border-radius:6px;padding:1px 6px;overflow-wrap:anywhere;}

/* Invites: banner on the home page, note, panel and redeem box in the account */
.invite-banner { position:fixed;z-index:30;left:var(--gutter);right:var(--gutter);bottom:var(--s2);max-width:560px;margin:0 auto;display:flex;align-items:center;gap:12px;padding:10px 10px 10px 16px;border:1px solid var(--line-2);border-radius:20px;background:rgba(12,12,12,.92);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 20px 60px rgba(0,0,0,.6);font-size:14px;}
.invite-banner[hidden] { display:none;}
.invite-banner .ic { flex:none;width:20px;height:20px;color:var(--muted);}
.invite-banner p { flex:1;margin:0;color:var(--muted);line-height:1.4;}
.invite-banner b { color:var(--fg);font-weight:500;}
.invite-banner .btn { min-height:40px;padding:0 16px;font-size:14px;}
.invite-x { flex:none;display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:none;color:var(--muted);cursor:pointer;}
.invite-x:hover { color:var(--fg);background:rgba(255,255,255,.08);}
.invite-x svg { width:16px;height:16px;}
@media (max-width:479px) { .invite-banner { flex-wrap:wrap;} .invite-banner p { flex-basis:calc(100% - 92px);} .invite-banner .btn { flex:1 1 100%;order:3;} }
.invite-note { margin:var(--s2) 0 0;padding:12px 14px;border:1px solid var(--line-2);border-radius:12px;font-size:14px;color:var(--muted);}
.invite-note b { color:var(--fg);font:500 13px var(--mono);letter-spacing:.06em;}
.invite-box { padding:0;margin-top:var(--s3);}
.invite-box h2 { font-size:17px;letter-spacing:-.01em;max-width:none;margin:0;}
.invite-box p { margin:6px 0 0;font-size:14px;color:var(--muted);}
.invite-code { display:flex;justify-content:space-between;align-items:center;gap:var(--s2);margin:var(--s2) 0 var(--s1);padding:12px 14px;border:1px dashed var(--line-3);border-radius:12px;font-size:13px;color:var(--muted);}
.invite-code b { font:600 20px/1 var(--mono);letter-spacing:.14em;color:var(--fg);}
#inviteLink { font-size:13px;color:var(--muted);min-height:44px;}
details.redeem { margin-top:var(--s2);border-top:1px solid var(--line);border-bottom:0;}
details.redeem summary { padding:14px 0;font-size:15px;color:var(--muted);}
.redeem-form { display:flex;gap:var(--s1);padding-bottom:var(--s2);}
.redeem-form input { flex:1;min-width:0;text-transform:uppercase;font-family:var(--mono);letter-spacing:.08em;}
.redeem-form input::placeholder { text-transform:none;font-family:var(--font);letter-spacing:0;}

/* Dot-matrix display face (Doto, OFL) for the wordmark and big headlines */
:root { --dot:"Doto", var(--mono); }
.logo { font-family:var(--dot);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:19px; }
.hero h1, section h2, .tour-hero h1, .cta-end h2 { font-family:var(--dot);font-weight:700;letter-spacing:-.01em;line-height:1.02; }
.hero h1 { letter-spacing:-.02em; }

/* Octava Custom UI Components */
.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: rgba(255,255,255,0.03);
  font: 500 12px var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s3);
}
.badge-pill .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s5);
  align-items: center;
  padding: var(--s6) 0 var(--s7);
}
@media (min-width: 900px) {
  .hero-grid {
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--s7);
    padding: var(--s7) 0 var(--s8);
  }
}

.phone-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
}
.phone-frame {
  position: relative;
  width: 310px;
  height: 630px;
  background: #000;
  border: 9px solid #1c1c1f;
  border-radius: 46px;
  box-shadow: 0 30px 80px -10px rgba(0,0,0,0.9), 0 0 0 1px rgba(255,255,255,0.12);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.phone-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 16px;
  background: #050507;
  position: relative;
}
.di-island {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 140px;
  height: 30px;
  background: #000;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  z-index: 20;
  border: 1px solid rgba(255,255,255,0.08);
}
.di-island .wave {
  width: 14px;
  height: 10px;
  display: flex;
  align-items: flex-end;
  gap: 2px;
}
.di-island .wave span {
  width: 2px;
  background: var(--accent);
  border-radius: 1px;
  animation: waveBar 1.2s ease-in-out infinite alternate;
}
.di-island .wave span:nth-child(2) { animation-delay: 0.2s; height: 100%; }
.di-island .wave span:nth-child(3) { animation-delay: 0.4s; height: 60%; }
@keyframes waveBar {
  0% { height: 20%; }
  100% { height: 100%; }
}
.di-island .di-time {
  font: 600 11px var(--mono);
  color: var(--accent);
}

.mock-cover {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 16px;
  background: linear-gradient(135deg, #18181c 0%, #0c0c0e 100%);
  border: 1px solid var(--line);
  margin-top: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.mock-cover svg {
  width: 64px;
  height: 64px;
  color: var(--muted);
  opacity: 0.5;
}
.mock-info {
  margin-top: 16px;
}
.mock-info h3 {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
}
.mock-info p {
  font-size: 13px;
  color: var(--muted);
  margin-top: 2px;
}
.mock-bar {
  margin-top: 14px;
  width: 100%;
  height: 4px;
  background: #222;
  border-radius: 2px;
  position: relative;
}
.mock-bar-fill {
  width: 58%;
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
}
.mock-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  padding: 0 8px;
}
.mock-controls svg {
  width: 20px;
  height: 20px;
  color: var(--fg);
  cursor: pointer;
}
.mock-controls .play-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  color: #000;
  display: grid;
  place-items: center;
}
.mock-controls .play-btn svg {
  color: #000;
  width: 20px;
  height: 20px;
}

/* EQ visualizer */
.eq-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  height: 140px;
  padding: 20px 10px;
  background: #09090c;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  margin: var(--s3) 0;
}
.eq-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  height: 100%;
}
.eq-track {
  width: 4px;
  flex: 1;
  background: #1a1a1f;
  border-radius: 2px;
  position: relative;
  display: flex;
  align-items: flex-end;
}
.eq-level {
  width: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: height 0.3s ease;
}
.eq-hz {
  font: 500 10px var(--mono);
  color: var(--faint);
}

/* Feature grid */
.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s3);
  margin-top: var(--s4);
}
.card-feature {
  padding: var(--s3);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.2s, transform 0.2s;
}
.card-feature:hover {
  border-color: var(--line-2);
  transform: translateY(-2px);
}
.card-feature .icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  display: grid;
  place-items: center;
  margin-bottom: var(--s2);
  color: var(--accent);
}
.card-feature h3 {
  font-size: 18px;
  margin-bottom: 8px;
}
.card-feature p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
}

/* Pricing & Coffee Cards */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--s3);
  margin-top: var(--s4);
}
.price-card {
  padding: var(--s4);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  position: relative;
}
.price-card.featured {
  border-color: rgba(255, 69, 58, 0.4);
  background: linear-gradient(180deg, rgba(255,69,58,0.06) 0%, var(--card) 40%);
}
.price-card .badge {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,69,58,0.15);
  color: var(--accent);
  font: 600 11px var(--mono);
  letter-spacing: 0.04em;
}
.price-amount {
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: var(--s2) 0 var(--s1);
  color: #fff;
}
.price-amount span {
  font-size: 15px;
  font-weight: 400;
  color: var(--muted);
}
.price-features {
  list-style: none;
  padding: 0;
  margin: var(--s3) 0 var(--s4);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.price-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--muted);
}
.price-features li svg {
  width: 16px;
  height: 16px;
  color: var(--accent);
  flex-shrink: 0;
}

/* Suite banner */
.suite-banner {
  padding: var(--s3) var(--s4);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.02);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  margin-top: var(--s6);
  flex-wrap: wrap;
}
.suite-banner-text h4 {
  font-size: 15px;
  margin: 0;
  color: #fff;
}
.suite-banner-text p {
  font-size: 13px;
  color: var(--muted);
  margin-top: 2px;
}