/* Halva System, SaaS YouTube Format Library
   Design tokens, type scale and components mirror halvasystem.com */

@font-face{font-family:"Open Sauce One";font-weight:400;font-display:swap;src:local("Open Sauce One"),url("fonts/open-sauce-one-400.woff2") format("woff2"),url("https://halvasystem.com/fonts/open-sauce-one-400.woff2") format("woff2")}
@font-face{font-family:"Open Sauce One";font-weight:500;font-display:swap;src:local("Open Sauce One Medium"),url("fonts/open-sauce-one-500.woff2") format("woff2"),url("https://halvasystem.com/fonts/open-sauce-one-500.woff2") format("woff2")}
@font-face{font-family:"Open Sauce One";font-weight:600;font-display:swap;src:local("Open Sauce One SemiBold"),url("fonts/open-sauce-one-600.woff2") format("woff2"),url("https://halvasystem.com/fonts/open-sauce-one-600.woff2") format("woff2")}
@font-face{font-family:"Open Sauce One";font-weight:700;font-display:swap;src:local("Open Sauce One Bold"),url("fonts/open-sauce-one-700.woff2") format("woff2"),url("https://halvasystem.com/fonts/open-sauce-one-700.woff2") format("woff2")}
@font-face{font-family:"Open Sauce Two";font-weight:400;font-display:swap;src:local("Open Sauce Two"),url("fonts/open-sauce-two-400.woff2") format("woff2"),url("https://halvasystem.com/fonts/open-sauce-two-400.woff2") format("woff2")}
@font-face{font-family:"Open Sauce Two";font-weight:500;font-display:swap;src:local("Open Sauce Two Medium"),url("fonts/open-sauce-two-500.woff2") format("woff2"),url("https://halvasystem.com/fonts/open-sauce-two-500.woff2") format("woff2")}
@font-face{font-family:"Open Sauce Two";font-weight:600;font-display:swap;src:local("Open Sauce Two SemiBold"),url("fonts/open-sauce-two-600.woff2") format("woff2"),url("https://halvasystem.com/fonts/open-sauce-two-600.woff2") format("woff2")}
@font-face{font-family:"Open Sauce Two";font-weight:700;font-display:swap;src:local("Open Sauce Two Bold"),url("fonts/open-sauce-two-700.woff2") format("woff2"),url("https://halvasystem.com/fonts/open-sauce-two-700.woff2") format("woff2")}

:root{
  --bg:#f0ede4; --bg-soft:#f6f4ee; --surface:#fff;
  --ink:#0b0b0c; --ink-2:#171717; --muted:#6f6d68; --muted-2:#8d8a84;
  --line:#0b0b0c14; --line-2:#0b0b0c26;
  --red:#ff0501; --red-deep:#d62126; --red-tint:#ff05010f; --red-tint-2:#ff050122;
  --dark:#0c0c0d; --dark-2:#151516; --card-dark:#161617; --chip-dark:#222223; --dark-line:#ffffff14; --dark-muted:#a3a09a;
  --star:#ff9326; --green:#2fbf71;
  --font-display:"Open Sauce One","Plus Jakarta Sans","Helvetica Neue",Arial,sans-serif;
  --font-ui:"Open Sauce Two","Plus Jakarta Sans","Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --container:1140px; --gutter:24px; --radius:24px;
  --ease:cubic-bezier(.22,1,.36,1);
  --shadow-sm:0 1px 2px #0000000a,0 4px 14px #0000000a;
  --shadow-md:0 2px 4px #00000008,0 18px 40px -12px #0000001f;
  --nav-h:72px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%}
html{overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-display);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit}
button,input,select{font:inherit;color:inherit}
h1,h2,h3,h4,p{margin:0}
.wrap{width:100%;max-width:calc(var(--container) + var(--gutter)*2);margin:0 auto;padding-inline:var(--gutter)}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:10px 16px;border-radius:999px;z-index:200;font-weight:600;text-decoration:none}
.skip:focus{left:12px}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* ---------- shared bits ---------- */
.h1{font-weight:700;font-size:clamp(40px,7.4vw,74px);line-height:1.02;letter-spacing:-.055em;text-wrap:balance}
.h2{font-weight:700;font-size:clamp(32px,5vw,56px);line-height:1.05;letter-spacing:-.045em;text-wrap:balance}
.red{color:var(--red)}
.lede{font:500 clamp(16px,1.9vw,19px)/1.55 var(--font-ui);color:var(--muted);text-wrap:pretty}
.sec{padding-block:clamp(56px,9vw,104px)}
.sec-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;margin-bottom:clamp(32px,5vw,52px)}
.sec-head .lede{max-width:56ch}
.mono{font-family:var(--mono)}
.slot{font-family:var(--mono);background:var(--red-tint-2);color:var(--red-deep);border-radius:5px;padding:0 4px;white-space:normal}

/* buttons: dark pill with red icon disc, same as the site's .btn-pill */
.btn{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 22px 0 6px;border-radius:999px;border:0;cursor:pointer;background:var(--ink);color:#fff;font:700 12px/1 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;white-space:nowrap;box-shadow:0 14px 28px -12px #00000073,inset 0 1px 0 #ffffff1f;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:0 18px 32px -12px #00000088,inset 0 1px 0 #ffffff1f}
.btn .ic{width:34px;height:34px;border-radius:50%;background:var(--red);display:grid;place-items:center;flex:none}
.btn .ic svg{width:15px;height:15px}
.btn.sm{height:40px;padding-right:18px}
.btn.sm .ic{width:30px;height:30px}
.btn.white{background:#fff;color:var(--ink);padding:0 24px;box-shadow:var(--shadow-sm)}
.btn.white:hover{box-shadow:var(--shadow-md)}
.btn.red-btn{background:var(--red);padding:0 26px;box-shadow:none}
.btn.block{width:100%;justify-content:center}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2);padding:0 20px}
.btn.ghost:hover{box-shadow:inset 0 0 0 1px var(--ink)}

/* ---------- format cards ---------- */
.fgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.fcard{position:relative;text-align:left;display:flex;flex-direction:column;gap:12px;background:#fff;border:1px solid transparent;border-radius:var(--radius);padding:22px;cursor:pointer;box-shadow:var(--shadow-sm);transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .2s}
.fcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.fcard[aria-pressed="true"]{border-color:var(--red);box-shadow:0 0 0 3px var(--red-tint-2),var(--shadow-md)}
.fcard .top{display:flex;justify-content:space-between;align-items:center}
.fcard .idx{font:600 12px/1 var(--mono);color:var(--muted-2);letter-spacing:.06em}
.fcard .eff{font:600 10.5px/1 var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--bg-soft);border-radius:999px;padding:5px 9px}
.fcard h3{font-weight:700;font-size:22px;letter-spacing:-.035em;line-height:1.15}
.fcard p{font:400 14px/1.45 var(--font-ui);color:var(--muted)}
.fcard .skel{font:500 12px/1.55 var(--mono);background:var(--bg-soft);border-radius:12px;padding:10px 12px;color:var(--ink)}
.fcard .foot{margin-top:auto;display:flex;justify-content:space-between;gap:8px;font:600 12px/1 var(--font-ui);color:var(--muted);padding-top:4px}
.fcard .foot b{color:var(--red);font-weight:700}

/* ---------- toolbar ---------- */
.toolbar{position:sticky;top:76px;z-index:30;display:flex;flex-wrap:wrap;gap:10px;align-items:center;background:#ffffffee;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:999px;padding:8px;box-shadow:var(--shadow-md);margin-bottom:22px}
.search{position:relative;flex:1 1 220px;min-width:0}
.search input{width:100%;height:42px;border:0;background:var(--bg-soft);border-radius:999px;padding:0 16px 0 42px;outline:none;font:500 14px var(--font-ui)}
.search input:focus-visible{box-shadow:0 0 0 2px var(--red)}
.search svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--muted-2)}
.sel{height:42px;border:0;background:var(--bg-soft);border-radius:999px;padding:0 34px 0 16px;cursor:pointer;font:500 13.5px var(--font-ui);appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236f6d68' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;max-width:100%}
.count{font:600 12px/1 var(--font-ui);color:var(--muted);padding:0 14px;white-space:nowrap}
.active{display:flex;flex-wrap:wrap;gap:8px;margin:-6px 0 16px}
.tag-x{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;background:#fff;border-radius:999px;padding:7px 12px;font:600 12px/1 var(--font-ui);box-shadow:var(--shadow-sm)}
.tag-x:hover{box-shadow:inset 0 0 0 1px var(--red)}

/* ---------- playbook ---------- */
.play{display:grid;grid-template-columns:1.1fr 1fr;gap:28px;background:#fff;border-radius:var(--radius);padding:clamp(22px,3.5vw,36px);box-shadow:var(--shadow-md);margin-bottom:22px}
.play h3{font-weight:700;font-size:clamp(26px,3.4vw,36px);letter-spacing:-.045em;line-height:1.08;margin:12px 0 10px}
.play p{font:400 15px/1.55 var(--font-ui);color:var(--muted);margin-bottom:12px}
.play .lbl{display:block;font:600 11px/1 var(--font-ui);letter-spacing:.09em;text-transform:uppercase;color:var(--red);margin-bottom:8px}
.play .box{background:var(--bg-soft);border-radius:16px;padding:16px 18px;margin-bottom:14px}
.play .box .big{font:500 15px/1.6 var(--mono)}
.play .box .ex{font:600 16px/1.4 var(--font-display);letter-spacing:-.015em}
.play .meta{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px}
.play .meta span{font:600 12px/1 var(--font-ui);background:var(--bg-soft);border-radius:999px;padding:8px 12px;color:var(--muted)}
.play .meta b{color:var(--ink)}

/* ---------- video cards ---------- */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.card{display:flex;flex-direction:column;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.thumb{position:relative;display:block;width:100%;aspect-ratio:16/9;background:linear-gradient(135deg,#e7e2d6,#d9d3c4);border:0;padding:0;cursor:pointer;overflow:hidden}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.thumb .ph{position:absolute;inset:0;display:none;place-items:center;font:700 30px var(--font-display);color:var(--red);letter-spacing:-.04em}
.thumb.noimg .ph{display:grid}
.badge{position:absolute;left:12px;top:12px;z-index:2;background:var(--red);color:#fff;font:700 14px/1 var(--font-display);letter-spacing:-.02em;border-radius:8px;padding:6px 10px;}
.dur{position:absolute;right:10px;bottom:10px;z-index:2;background:#000000c7;color:#fff;font:600 11.5px/1 var(--font-ui);border-radius:6px;padding:4px 7px}
.cbody{display:flex;flex-direction:column;gap:12px;padding:16px 18px 18px;flex:1;min-width:0}
.tags{display:flex;gap:6px;flex-wrap:wrap}
.tag{font:600 10.5px/1 var(--font-ui);letter-spacing:.07em;text-transform:uppercase;border-radius:999px;padding:6px 10px;background:var(--bg-soft);color:var(--muted)}
.tag.f{background:var(--red-tint-2);color:var(--red-deep)}
.card-title{all:unset;display:block;cursor:pointer;font:700 17px/1.28 var(--font-display);letter-spacing:-.025em;text-wrap:balance}
.card-title:hover{color:var(--red-deep)}
.card-title:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:4px}
.meta{font:500 12.5px/1.4 var(--font-ui);color:var(--muted)}
.meta b{color:var(--ink);font-weight:600}
.proof{display:flex;align-items:center;gap:10px;background:var(--red-tint);border-radius:14px;padding:10px 12px;font:500 12.5px/1.35 var(--font-ui);color:var(--ink)}
.proof .k{font:700 11px/1 var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--red-deep);flex:none}
.tpl{font:500 12px/1.55 var(--mono);background:var(--bg-soft);border-radius:12px;padding:10px 12px}
.tpl small{display:block;font:600 10px/1 var(--font-ui);letter-spacing:.09em;text-transform:uppercase;color:var(--muted-2);margin-bottom:5px}
.cactions{display:flex;gap:8px;margin-top:auto}
.cactions .btn{flex:1;justify-content:center;padding-inline:14px}
.more-wrap{display:flex;justify-content:center;margin-top:28px}
.empty{padding:64px 0;text-align:center;color:var(--muted);font:500 15px var(--font-ui)}

/* ---------- modal ---------- */
.ov{position:fixed;inset:0;background:#0b0b0cb3;backdrop-filter:blur(6px);z-index:150;display:none;align-items:flex-start;justify-content:center;overflow-y:auto;padding:24px 16px}
.ov.open{display:flex}
.modal{position:relative;width:100%;max-width:860px;background:var(--bg);border-radius:28px;overflow:hidden;margin:auto 0;box-shadow:0 30px 80px #0006}
.modal .thumb{aspect-ratio:2.4/1;cursor:default}
.x{position:absolute;right:14px;top:14px;z-index:5;width:38px;height:38px;border-radius:50%;border:0;background:#ffffffee;display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow-sm)}
.mbody{padding:24px clamp(18px,3vw,30px) 28px;display:flex;flex-direction:column;gap:22px}
.mbody h2{font-weight:700;font-size:clamp(22px,3vw,30px);line-height:1.15;letter-spacing:-.04em;text-wrap:balance}
.sec-m h4{font:600 11px/1 var(--font-ui);letter-spacing:.09em;text-transform:uppercase;color:var(--red);margin:0 0 10px}
.make{background:#fff;border-radius:20px;padding:18px;box-shadow:var(--shadow-sm)}
.make .live{font:500 15px/1.65 var(--mono);background:var(--bg-soft);border:1px dashed var(--line-2);border-radius:14px;padding:14px 16px;margin-bottom:14px;overflow-wrap:anywhere}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin-bottom:14px}
.slots label{display:flex;flex-direction:column;gap:6px;font:600 10.5px/1 var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);min-width:0}
.slots input{font:500 14px var(--font-ui);text-transform:none;letter-spacing:0;color:var(--ink);background:var(--bg-soft);border:1px solid transparent;border-radius:12px;padding:11px 13px;outline:none;min-width:0}
.slots input:focus{border-color:var(--red);background:#fff}
.make .row{display:flex;gap:10px;flex-wrap:wrap}
.why{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.why div{background:#fff;border-radius:18px;padding:16px;font:400 14px/1.55 var(--font-ui);color:var(--muted);box-shadow:var(--shadow-sm)}
.why div b{display:block;font:600 11px/1 var(--font-ui);letter-spacing:.09em;text-transform:uppercase;color:var(--ink);margin-bottom:8px}
.quote{border-left:3px solid var(--red);padding:2px 0 2px 14px;font:400 15px/1.55 var(--font-ui);color:var(--muted)}
.mstats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.mstats div{background:#fff;border-radius:18px;padding:14px 16px;box-shadow:var(--shadow-sm)}
.mstats b{display:block;font:700 26px/1 var(--font-display);letter-spacing:-.04em}
.mstats span{font:500 12px/1.3 var(--font-ui);color:var(--muted)}
.mstats .hot b{color:var(--red)}

/* ---------- misc ---------- */
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);background:var(--ink);color:#fff;font:600 13.5px var(--font-ui);padding:12px 20px;border-radius:999px;opacity:0;pointer-events:none;transition:all .25s var(--ease);z-index:300}
.toast.on{opacity:1;transform:translate(-50%,0)}
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
noscript .ns{padding:14px 18px;background:#fff;border-radius:14px;margin:16px auto;max-width:640px;text-align:center;font:500 14px var(--font-ui)}


/* ---------- nav ---------- */
.nav{position:fixed;z-index:100;top:12px;left:50%;transform:translateX(-50%);width:min(var(--container),calc(100% - 24px));display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 8px 8px 20px;background:#ffffffe8;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:999px;box-shadow:var(--shadow-md)}
.nav .logo{display:block;height:28px;width:auto}
.lbl-short{display:none}
.fine{font:500 12px/1.4 var(--font-ui);color:var(--muted-2)}
.fine.err{color:var(--red-deep)}
.hp{position:absolute!important;left:0;clip-path:inset(50%);opacity:0;height:0;width:0;overflow:hidden}
.center{display:flex;justify-content:center}

/* ---------- state switching ---------- */
.unlocked-only,.restoring{display:none}
html.unlocked .locked-only,html.has-token .locked-only{display:none!important}
html.unlocked .unlocked-only{display:block}
html.unlocked #dl-top.unlocked-only{display:inline-flex}
html.has-token:not(.unlocked) .restoring{display:flex}
html.unlocked .restoring{display:none!important}

/* ---------- gate (the wall) ---------- */
.gate{position:relative;padding:calc(var(--nav-h) + 40px) 0 clamp(36px,6vw,64px);isolation:isolate}
.gate-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px;margin-bottom:clamp(32px,5vw,52px)}
.gate-head .h1{max-width:16ch;font-size:clamp(40px,6.6vw,68px)}
.gate-head .lede{max-width:60ch}
.gate-head .lede b{color:var(--ink);font-weight:600}
.gate-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:clamp(28px,5vw,56px);align-items:start;max-width:1120px;margin:0 auto}


.wall{position:relative;background:#fff;border-radius:24px;padding:clamp(22px,3.4vw,32px);box-shadow:var(--shadow-md);border:1px solid var(--line)}
.wall-hd{display:flex;gap:14px;align-items:center;margin-bottom:22px}
.wall-hd h2{font-weight:700;font-size:24px;letter-spacing:-.04em;line-height:1.1}
.wall-hd p{font:400 13.5px/1.4 var(--font-ui);color:var(--muted);margin-top:3px}
.wall form{display:flex;flex-direction:column;gap:14px}
.fld{display:flex;flex-direction:column;gap:6px;min-width:0}
.fld label{font:600 11px/1 var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.fld input{height:50px;border:1px solid var(--line-2);background:var(--bg-soft);border-radius:14px;padding:0 16px;outline:none;font:500 15px var(--font-ui);min-width:0;transition:border-color .2s,background .2s,box-shadow .2s}
.fld input:focus{border-color:var(--red);background:#fff;box-shadow:0 0 0 3px var(--red-tint-2)}
.fld.err input{border-color:var(--red-deep);background:#fff6f5}
.fld .msg{min-height:0;font:500 12px/1.3 var(--font-ui);color:var(--red-deep)}
.wall .btn.block{height:54px;margin-top:4px;font-size:13px}
.wall .btn[disabled]{opacity:.7;cursor:progress;transform:none}
.wall .fine{text-align:center}
.legal-sm{font:400 11px/1.5 var(--font-ui);color:var(--muted-2);text-align:center}

/* ---------- peek (locked teaser) ---------- */
.peek{padding-block:clamp(40px,7vw,80px)}
.pgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.pgrid .card:hover{transform:none;box-shadow:var(--shadow-sm)}
.pgrid .thumb{cursor:default}
.lockcard{display:flex;flex-direction:column;justify-content:center;gap:12px;border-radius:var(--radius);padding:24px;color:#fff;background:var(--dark-2)}
.lockcard b{font:700 40px/1 var(--font-display);letter-spacing:-.05em}
.lockcard p{font:400 14px/1.5 var(--font-ui);color:var(--dark-muted)}
.lockcard a{margin-top:6px;align-self:flex-start}

/* ---------- restoring ---------- */
.restoring{flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:60vh;padding-top:var(--nav-h);color:var(--muted);font:500 14px var(--font-ui)}
.spin{width:30px;height:30px;border-radius:50%;border:3px solid var(--line-2);border-top-color:var(--red);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- welcome (unlocked) ---------- */
.welcome{padding-top:calc(var(--nav-h) + 40px)}
.welcome-in{display:flex;flex-wrap:wrap;gap:24px 40px;align-items:flex-end;justify-content:space-between;background:#fff;border-radius:28px;padding:clamp(22px,4vw,40px);box-shadow:var(--shadow-md);position:relative;overflow:hidden}
.welcome-in>*{position:relative}
.welcome-in .h2{margin:0 0 10px;font-size:clamp(30px,4.4vw,46px)}
.welcome-in .lede{max-width:52ch}
.welcome-act{display:flex;flex-direction:column;align-items:flex-start;gap:10px}

/* ---------- slim CTA ---------- */
.slim-cta{display:flex;flex-wrap:wrap;gap:20px 32px;align-items:center;justify-content:space-between;color:#fff;border-radius:28px;padding:clamp(22px,4vw,36px);background:var(--dark-2)}
.slim-cta h2{font-weight:700;font-size:clamp(22px,3vw,30px);letter-spacing:-.04em;line-height:1.1;margin-bottom:8px}
.slim-cta p{font:500 15px/1.5 var(--font-ui);opacity:.92;max-width:58ch}
.slim-cta .btn.red-btn{background:#fff;color:var(--ink)}
.slim-cta .btn svg{color:var(--red)}

/* ---------- footer ---------- */
.foot{padding:36px 0 40px}
.foot-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding-bottom:20px;border-bottom:1px solid var(--line-2)}
.foot .logo{height:28px;width:auto}
.foot p{font:400 14px/1.5 var(--font-ui);color:var(--muted)}
.foot p a{color:var(--ink);font-weight:600;text-decoration:none}
.foot p a:hover{color:var(--red-deep)}
.legal{padding-top:18px;font:400 12px/1.65 var(--font-ui);color:var(--muted-2);max-width:96ch}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .fgrid,.grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .play{grid-template-columns:1fr}
}
@media (max-width:820px){
  .gate-grid{grid-template-columns:1fr;max-width:560px}
  .gate-l{order:-1}
}
@media (max-width:720px){
  :root{--gutter:16px}
  .why,.mstats{grid-template-columns:1fr}
  .toolbar{border-radius:24px;top:68px}
  .count{width:100%;padding:0 8px 4px}
}
@media (max-width:560px){
  .reel{gap:16px}
  .rtrack{gap:16px}
  .rtitle{font-size:12.5px}
  .rv{display:none}
  .stage{height:340px}
  .stage-stats{bottom:10px;gap:6px}
  .stage-stats span{padding:7px 10px;font-size:11px}
  .fgrid,.grid,.pgrid{grid-template-columns:1fr}
  .btn{font-size:11.5px}
  .nav .btn .lbl-long{display:none}
  .nav .btn .lbl-short{display:inline}
  .gate-head .h1{font-size:40px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}

/* ---------- hero proof: real thumbnails with real multiples ---------- */
.gate-l{display:flex;flex-direction:column;gap:18px}
.stage-wrap{position:relative}
.stage{position:relative;height:clamp(300px,46vw,560px);overflow:hidden;isolation:isolate;-webkit-mask-image:linear-gradient(#0000,#000 16%,#000 84%,#0000),linear-gradient(90deg,#0000,#000 7%,#000 93%,#0000);mask-image:linear-gradient(#0000,#000 16%,#000 84%,#0000),linear-gradient(90deg,#0000,#000 7%,#000 93%,#0000);-webkit-mask-composite:source-in;mask-composite:intersect}
.reel{position:absolute;left:6%;right:6%;top:-10%;bottom:-10%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;transform:rotate(-2deg);transform-origin:center}
.rc{overflow:hidden;min-width:0;padding:2px 2px 0}
.rc1{margin-top:-90px}
.rtrack{display:flex;flex-direction:column;gap:26px;animation:reel-up 100s linear infinite;will-change:transform;backface-visibility:hidden;transform:translate3d(0,0,0)}
.rc1 .rtrack{animation-direction:reverse;animation-duration:116s}
@keyframes reel-up{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,calc(-50% - 13px),0)}}
.rt{display:flex;flex-direction:column;gap:10px}
.rimg{position:relative;display:block;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#e7e2d6;box-shadow:var(--shadow-sm)}
.rimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rimg .badge{left:10px;top:10px;font-size:13px;padding:5px 9px;border-radius:7px}
.rv{position:absolute;right:10px;bottom:10px;background:#000000b8;color:#fff;font:600 11.5px/1 var(--font-ui);border-radius:6px;padding:5px 8px}
.rtitle{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;padding:0 2px;font:600 14px/1.3 var(--font-display);letter-spacing:-.015em;color:var(--ink)}
.stage-stats{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:3;display:flex;gap:8px;white-space:nowrap}
.stage-stats span{background:#fff;color:var(--muted);border-radius:999px;padding:9px 14px;font:500 12.5px/1 var(--font-ui);box-shadow:var(--shadow-md)}
.stage-stats b{color:var(--ink);font-weight:700}
.inside-line{font:400 14.5px/1.55 var(--font-ui);color:var(--muted)}
.fmt-line{margin:28px auto 26px;max-width:70ch;text-align:center;font:400 14.5px/1.6 var(--font-ui);color:var(--muted)}
.fmt-line b{color:var(--ink);font-weight:600}
@media (max-width:820px){.inside-line{display:none}}

/* format filter chips */
.fchips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.fchip{border:0;cursor:pointer;background:#fff;color:var(--ink);border-radius:999px;padding:10px 15px;font:600 13px/1 var(--font-ui);box-shadow:var(--shadow-sm);transition:background .2s,color .2s,transform .2s var(--ease)}
.fchip span{color:var(--muted);font-weight:500;margin-left:4px}
.fchip:hover{transform:translateY(-1px)}
.fchip[aria-pressed="true"]{background:var(--ink);color:#fff}
.fchip[aria-pressed="true"] span{color:#ffffffa6}