/* IPTVizion homepage (2026-10 redesign). Served only on the homepage via templates/iptvizion/vz/head.tpl */
html{ -webkit-text-size-adjust:100% }
:root{ padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px) }
body{ margin:0 }
[hidden]{ display:none !important }

/* Concept: a streaming service's own front door. Full-bleed night photography, the real Vizion Player
   app in real device frames, and brand red used only where something is live or clickable. */
:root{
  color-scheme: dark;
  --bg:#050507;
  --bg-2:#0b0b0f;
  --card:#111116;
  --card-2:#18181f;
  --glass:rgba(20,20,26,.62);
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.15);
  --fg:#ffffff;
  --fg-2:rgba(255,255,255,.78);
  --mute:rgba(255,255,255,.6);
  --mute-2:rgba(255,255,255,.4);
  --red:#e5141e;
  --red-hi:#ff3340;
  --red-deep:#5c0509;
  --gold:#f3b845;
  --green:#3fdc98;
  --on-red:#ffffff;

  --f-display:'Archivo','Helvetica Neue',Arial,sans-serif;
  --f-body:'Figtree',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;

  --t-xs:.75rem; --t-sm:.875rem; --t-md:1rem; --t-lg:1.18rem;
  --t-h2:clamp(2.1rem,4.4vw,4rem);
  --t-hero:clamp(2.55rem,8.4vw,7.6rem);
  --r-sm:10px; --r:16px; --r-lg:24px; --r-xl:32px;
  --wrap:1320px;
  --head:72px;
  --ease:cubic-bezier(.2,.8,.2,1);
}
@media (min-width:1700px){ :root{ --wrap:1560px } }

html{ font-size:clamp(15px,.4vw + 10.6px,22px); scroll-behavior:smooth; scroll-padding-top:calc(var(--head) + 16px) }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation:none!important;transition:none!important} }
body{ background:var(--bg); color:var(--fg); font-family:var(--f-body); font-size:1rem; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden }
*,*::before,*::after{ box-sizing:border-box }
h1,h2,h3,h4,p,ul,ol,figure{ margin:0 }
ul,ol{ padding:0; list-style:none }
a{ color:inherit; text-decoration:none }
img{ display:block; max-width:100%; height:auto }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer }
input{ font:inherit; color:inherit }
:focus-visible{ outline:2px solid var(--red-hi); outline-offset:3px; border-radius:8px }
::selection{ background:var(--red); color:var(--on-red) }
svg.i{ width:1.1em; height:1.1em; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }

.wrap{ max-width:var(--wrap); margin-inline:auto; padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:max(16px,env(safe-area-inset-right,0px)) }
@media (min-width:700px){ .wrap{ padding-left:max(32px,env(safe-area-inset-left,0px)); padding-right:max(32px,env(safe-area-inset-right,0px)) } }

.display{ font-family:var(--f-display); font-weight:800; font-stretch:112%; letter-spacing:-.025em; line-height:.95; text-wrap:balance }
.h2{ font-family:var(--f-display); font-weight:800; font-stretch:110%; font-size:var(--t-h2); letter-spacing:-.025em; line-height:1; text-wrap:balance }
.kicker{ display:inline-flex; align-items:center; gap:.6em; font-size:var(--t-xs); font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--mute) }
.kicker.red{ color:var(--red-hi) }
.lede{ color:var(--fg-2); font-size:var(--t-lg); line-height:1.55; max-width:36em; text-wrap:pretty }
.sec{ position:relative; padding-block:clamp(72px,10vw,140px) }
.head{ display:grid; gap:16px; margin-bottom:clamp(32px,4vw,56px) }
.head.row{ grid-template-columns:1fr; align-items:end }
@media (min-width:1000px){ .head.row{ grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:56px } }
.live-dot{ width:.55em; height:.55em; border-radius:50%; background:var(--red-hi); flex:none; animation:pulse 1.8s infinite }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(255,51,64,.6)} 70%{box-shadow:0 0 0 .7em rgba(255,51,64,0)} 100%{box-shadow:0 0 0 0 rgba(255,51,64,0)} }

/* buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.55em; min-height:50px; padding:.8em 1.45em; border-radius:999px; font-weight:700; font-size:var(--t-md); border:1px solid var(--line-2); background:rgba(255,255,255,.08); color:var(--fg); white-space:nowrap; transition:transform .25s var(--ease), background .25s, border-color .25s, box-shadow .25s; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px) }
.btn:hover{ transform:translateY(-2px); background:rgba(255,255,255,.14) }
.btn-red{ background:var(--red); border-color:var(--red); color:var(--on-red); box-shadow:0 14px 40px -12px rgba(229,20,30,.75) }
.btn-red:hover{ background:var(--red-hi); border-color:var(--red-hi) }
.btn-white{ background:var(--fg); border-color:var(--fg); color:#0a0a0c }
.btn-white:hover{ background:#e9e9ee }
.btn-sm{ min-height:40px; padding:.45em 1.05em; font-size:var(--t-sm) }
.btn-block{ width:100% }

/* ================= header ================= */
.top{ position:fixed; left:0; right:0; top:0; z-index:60; padding-top:env(safe-area-inset-top,0px); transition:background .35s, border-color .35s, backdrop-filter .35s; border-bottom:1px solid transparent; background:linear-gradient(180deg,rgba(5,5,7,.75),rgba(5,5,7,0)) }
.top.solid{ background:rgba(8,8,11,.82); backdrop-filter:saturate(1.5) blur(18px); -webkit-backdrop-filter:saturate(1.5) blur(18px); border-color:var(--line) }
.top-in{ display:flex; align-items:center; gap:24px; height:var(--head) }
.brand{ display:flex; align-items:center; gap:.7em; font-family:var(--f-display); font-weight:800; font-stretch:115%; font-size:1.3rem; letter-spacing:-.01em }
.brand img{ width:40px; height:40px; border-radius:11px }
.brand small{ display:block; font-family:var(--f-body); font-weight:600; font-stretch:100%; font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); margin-top:2px }
.nav{ display:none; gap:2px }
.nav a{ padding:.5em .9em; border-radius:999px; font-weight:600; font-size:var(--t-sm); color:var(--fg-2); transition:background .2s, color .2s }
.nav a:hover,.nav a[aria-current]{ color:var(--fg); background:rgba(255,255,255,.1) }
.top-act{ margin-left:auto; display:flex; align-items:center; gap:10px }
.top-act .ghost{ display:none; font-weight:600; font-size:var(--t-sm); color:var(--fg-2); padding:.5em .7em }
.top-act .ghost:hover{ color:var(--fg) }
.menu-btn{ width:46px; height:46px; border-radius:14px; border:1px solid var(--line-2); display:grid; place-items:center; font-size:1.25rem; background:rgba(255,255,255,.06) }
@media (min-width:1100px){ .nav{ display:flex } .menu-btn{ display:none } .top-act .ghost{ display:inline-flex } }
@media (max-width:440px){ .top-act .btn-red{ display:none } .brand small{ display:none } }

.sheet{ position:fixed; inset:0; z-index:90; background:rgba(0,0,0,.55); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px) }
.sheet-panel{ position:absolute; top:0; right:0; bottom:0; width:min(440px,100%); background:var(--bg-2); border-left:1px solid var(--line); display:flex; flex-direction:column; gap:22px; overflow-y:auto; padding:calc(env(safe-area-inset-top,0px) + 14px) max(20px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 24px) 20px }
.sheet-top{ display:flex; justify-content:space-between; align-items:center }
.sheet nav{ display:grid }
.sheet nav a{ display:flex; justify-content:space-between; align-items:center; padding:16px 4px; border-bottom:1px solid var(--line); font-family:var(--f-display); font-weight:800; font-stretch:110%; font-size:1.6rem; letter-spacing:-.02em }
.sheet .minor{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
.sheet .minor a{ padding:13px 14px; border:1px solid var(--line); border-radius:14px; color:var(--fg-2); font-weight:600; font-size:var(--t-sm) }

/* phone tab bar */
.tabbar{ position:fixed; left:0; right:0; bottom:0; z-index:60; display:grid; grid-template-columns:repeat(5,1fr); background:rgba(10,10,13,.9); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-top:1px solid var(--line-2); padding:6px max(8px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px)) }
.tabbar a{ display:grid; justify-items:center; gap:2px; padding:6px 0; font-size:.68rem; font-weight:600; color:var(--mute) }
.tabbar svg{ width:22px; height:22px }
.tabbar a.on{ color:var(--fg) }
.tabbar a.on svg{ color:var(--red-hi) }
@media (min-width:700px){ .tabbar{ display:none } }
@media (max-width:699px){ body{ padding-bottom:72px } }

/* ================= hero ================= */
.hero{ position:relative; isolation:isolate; overflow:hidden; padding-top:calc(var(--head) + env(safe-area-inset-top,0px)) }
.hero-bg{ position:absolute; inset:0; z-index:-2 }
.hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:50% 65%; transform:scale(1.04); animation:drift 22s var(--ease) infinite alternate }
@keyframes drift{ to{ transform:scale(1.12) translate3d(-1.5%,1%,0) } }
.hero::before{ content:""; position:absolute; inset:0; z-index:-1; background:
  linear-gradient(90deg, rgba(5,5,7,.94) 0%, rgba(5,5,7,.8) 40%, rgba(5,5,7,.3) 75%, rgba(5,5,7,.4) 100%),
  linear-gradient(0deg, var(--bg) 0%, rgba(5,5,7,.0) 42%),
  linear-gradient(180deg, rgba(5,5,7,.55) 0%, rgba(5,5,7,0) 30%) }
.hero-in{ display:grid; gap:26px; padding-block:clamp(40px,7vw,120px) clamp(210px,25vw,400px); max-width:var(--wrap) }
.pill{ display:inline-flex; align-items:center; gap:.6em; width:max-content; max-width:100%; padding:.4em .9em .4em .45em; border-radius:999px; background:rgba(255,255,255,.1); border:1px solid var(--line-2); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); font-size:var(--t-sm); font-weight:600 }
.pill img{ width:26px; height:26px; border-radius:7px }
.pill b{ color:var(--fg) }
.pill span{ color:var(--fg-2) }
.hero h1{ font-size:var(--t-hero); max-width:9.6em }
.hero h1 em{ font-style:normal; display:block; background:linear-gradient(90deg,#ff4a52,#e5141e 60%,#ff7a5a); -webkit-background-clip:text; background-clip:text; color:transparent }
.hero .lede{ font-size:clamp(1.05rem,1vw + .65rem,1.35rem); max-width:31em }
.ctas{ display:flex; gap:12px; flex-wrap:wrap }
.hero-meta{ display:flex; flex-wrap:wrap; gap:8px 22px; color:var(--fg-2); font-size:var(--t-sm); font-weight:600 }
.hero-meta li{ display:flex; align-items:center; gap:.5em }
.hero-meta svg{ color:var(--red-hi) }

/* ================= device frames ================= */
.f-tv{ position:relative; container-type:inline-size }
.f-tv .bez{ border-radius:1.4cqi; padding:.75cqi; background:linear-gradient(160deg,#36363d,#0b0b0e 35%,#1c1c22); box-shadow:0 0 0 1px rgba(255,255,255,.07), 0 50px 120px -30px rgba(0,0,0,.95), 0 0 160px -40px rgba(229,20,30,.5) }
.f-tv .bez img{ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:.75cqi; background:#000 }
.f-tv .stand{ width:26%; height:2.2cqi; margin:0 auto; background:linear-gradient(#24242a,#0b0b0d); clip-path:polygon(16% 0,84% 0,100% 100%,0 100%) }
.f-phone{ container-type:inline-size }
.f-phone .bez{ border-radius:15cqi; padding:3.4cqi; background:linear-gradient(145deg,#4a4a52,#141418 38%,#2c2c33); box-shadow:0 0 0 1px rgba(255,255,255,.1), 0 40px 90px -20px rgba(0,0,0,.95) }
.f-phone .bez img{ width:100%; aspect-ratio:9/20; object-fit:cover; object-position:top; border-radius:12cqi; background:#000 }
.f-tablet{ container-type:inline-size }
.f-tablet .bez{ border-radius:7cqi; padding:3.6cqi; background:linear-gradient(145deg,#45454c,#121216 38%,#2a2a31); box-shadow:0 0 0 1px rgba(255,255,255,.1), 0 40px 90px -20px rgba(0,0,0,.95) }
.f-tablet .bez img{ width:100%; aspect-ratio:4/3; object-fit:cover; object-position:top; border-radius:4cqi; background:#000 }
.f-laptop{ container-type:inline-size }
.f-laptop .bez{ margin:0 7%; border-radius:2.4cqi 2.4cqi 0 0; padding:1.6cqi 1.6cqi 2.4cqi; background:#18181d; box-shadow:0 0 0 1px rgba(255,255,255,.09) }
.f-laptop .bez img{ width:100%; aspect-ratio:16/10; object-fit:cover; object-position:left top; border-radius:.6cqi }
.f-laptop .base{ height:2.6cqi; border-radius:0 0 3cqi 3cqi; background:linear-gradient(#4b4b52,#1a1a1f) }

/* ================= Apple product images (Apple Design Resources, used as supplied) ================= */
.ap{ position:relative; margin:0; filter:drop-shadow(0 40px 50px rgba(0,0,0,.65)) }
.ap .bz{ position:relative; z-index:2; width:100%; height:auto; display:block; pointer-events:none }
.ap .scr{ position:absolute; z-index:1; overflow:hidden; background:#000; object-fit:cover; object-position:top }
.ap.i18 .scr{ left:5.102%; top:2.2%; width:89.796%; height:95.6%; border-radius:12% / 5.6% }
.ap.duo .scr{ left:3.88%; top:5.34%; width:92.24%; height:89.32%; border-radius:3.4% / 4.8% }

/* ================= official store badges ================= */
.badges{ display:flex; flex-wrap:wrap; gap:14px 16px; align-items:flex-start; margin-top:6px }
.badge{ display:grid; gap:6px; justify-items:start }
.badge > a{ display:block; transition:transform .25s var(--ease) }
.badge > a:hover{ transform:translateY(-2px) }
.badge img{ height:52px; width:auto }
.badge small{ font-size:.72rem; color:var(--mute); line-height:1.3 }
.tvb{ display:inline-flex !important; align-items:center; gap:10px; height:52px; padding:0 16px 0 12px; border-radius:9px; background:#000; border:1px solid #a6a6a6; color:#fff; white-space:nowrap }
.tvb span{ display:grid; line-height:1.1; text-align:left }
.tvb span small{ font-size:.62rem; color:#fff; letter-spacing:.02em }
.tvb span b{ font-size:1.02rem; font-weight:600; letter-spacing:-.01em }
.tvb .sam{ width:84px; height:17px; fill:#fff }
.tvb img.lg{ width:30px; height:30px }
.tvb svg.i{ width:24px; height:24px }
@media (max-width:599px){ .badges{ gap:12px 10px } .badge img{ height:44px } .tvb{ height:44px; gap:8px; padding:0 12px 0 10px } .tvb .sam{ width:70px } .tvb img.lg{ width:26px; height:26px } .tvb span b{ font-size:.92rem } }

/* ================= showcase ================= */
.showcase{ position:relative; z-index:2; margin-top:clamp(-230px,-13vw,-110px) }
.rig{ position:relative; padding:0 12% 9% 15%; max-width:1240px; margin-inline:auto }
@media (min-width:1700px){ .rig{ max-width:1360px } }
.rig .duo{ position:absolute; left:0; bottom:0; width:33% }
.rig .i18{ position:absolute; right:0; bottom:-4%; width:15.5% }
@media (max-width:699px){ .rig{ padding:0 16% 14% 0 } .rig .duo{ display:none } .rig .i18{ width:31%; right:0; bottom:0 } }
.rig-cap{ display:flex; justify-content:center; align-items:center; gap:.6em; margin-top:clamp(22px,3vw,40px); color:var(--mute); font-size:var(--t-sm); text-align:center }
.rig-cap img{ width:22px; height:22px; border-radius:6px }

/* ================= what's on bento ================= */
.bento{ display:grid; gap:14px; grid-template-columns:repeat(6,minmax(0,1fr)); grid-auto-rows:clamp(200px,19vw,300px) }
.tile{ position:relative; overflow:hidden; border-radius:var(--r-lg); isolation:isolate; display:flex; align-items:flex-end; min-width:0; box-shadow:0 0 0 1px var(--line) }
.tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform 1.1s var(--ease) }
.tile:hover img{ transform:scale(1.06) }
.tile::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg, rgba(5,5,7,.92) 0%, rgba(5,5,7,.35) 45%, rgba(5,5,7,0) 70%) }
.tile-txt{ padding:clamp(18px,2vw,30px); display:grid; gap:6px; width:100% }
.tile h3{ font-family:var(--f-display); font-weight:800; font-stretch:112%; font-size:clamp(1.5rem,2.3vw,2.4rem); letter-spacing:-.02em; line-height:1 }
.tile p{ color:var(--fg-2); font-size:var(--t-sm); max-width:28em }
.tag{ display:inline-flex; align-items:center; gap:.45em; width:max-content; padding:.3em .7em; border-radius:7px; font-size:.68rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; background:rgba(0,0,0,.45); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:1px solid var(--line-2) }
.tag.live{ background:var(--red); border-color:var(--red) }
.tag.live::before{ content:""; width:.45em; height:.45em; border-radius:50%; background:#fff }
.tag.gold{ background:var(--gold); color:#251800; border-color:var(--gold) }
.tile.big{ grid-column:1/5; grid-row:1/3 }
.tile.big h3{ font-size:clamp(2rem,4vw,4rem) }
.tile.b{ grid-column:5/7; grid-row:1 }
.tile.c{ grid-column:5/7; grid-row:2 }
.tile.d{ grid-column:1/4; grid-row:3 }
.tile.e{ grid-column:4/7; grid-row:3 }
@media (max-width:999px){
  .bento{ grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:clamp(220px,40vw,320px) }
  .tile.big{ grid-column:1/-1; grid-row:auto } .tile.b,.tile.c,.tile.d,.tile.e{ grid-column:auto; grid-row:auto }
}
@media (max-width:599px){
  .bento{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:12px; margin-inline:calc(-1*max(16px,env(safe-area-inset-left,0px))); padding-inline:max(16px,env(safe-area-inset-left,0px)); scrollbar-width:none }
  .bento::-webkit-scrollbar{ display:none }
  .tile,.tile.big{ flex:0 0 78%; aspect-ratio:4/5; scroll-snap-align:center }
}

/* numbers */
.stats{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; margin-top:clamp(40px,5vw,72px) }
@media (min-width:900px){ .stats{ grid-template-columns:repeat(4,minmax(0,1fr)) } }
.stats div{ background:var(--bg-2); padding:clamp(20px,2.6vw,36px); display:grid; gap:4px; min-width:0 }
.stats b{ font-family:var(--f-display); font-weight:800; font-stretch:115%; font-size:clamp(2rem,4.2vw,3.6rem); letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums }
.stats b sup{ color:var(--red-hi); font-size:.5em; vertical-align:.55em; margin-left:.05em }
.stats span{ color:var(--mute); font-size:var(--t-sm) }

/* ================= plans ================= */
.plans-sec{ isolation:isolate; overflow:hidden }
.plans-sec .bgimg{ position:absolute; inset:0 0 auto 0; height:min(900px,100%); z-index:-2 }
.plans-sec .bgimg img{ width:100%; height:100%; object-fit:cover; opacity:.35; filter:saturate(.8) }
.plans-sec::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,var(--bg) 0%,rgba(5,5,7,.55) 25%,rgba(5,5,7,.88) 55%,var(--bg) 85%) }
.term-row{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:32px }
.term{ display:inline-grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:4px; padding:5px; border-radius:999px; background:var(--glass); border:1px solid var(--line-2); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); max-width:100% }
.term button{ padding:.65em 1.2em; border-radius:999px; font-weight:700; font-size:var(--t-sm); color:var(--fg-2); white-space:nowrap; min-height:46px; line-height:1.2 }
.term button[aria-pressed="true"]{ background:var(--fg); color:#0a0a0c }
.term .save{ display:block; font-size:.62rem; font-weight:800; letter-spacing:.08em; color:var(--green) }
.term button[aria-pressed="true"] .save{ color:#0b7a4b }
@media (max-width:540px){ .term{ display:grid; grid-auto-flow:row; grid-template-columns:repeat(2,1fr); border-radius:20px; width:100% } .term button{ border-radius:15px } }
.secure{ display:flex; align-items:center; gap:.5em; color:var(--fg-2); font-size:var(--t-sm); font-weight:600 }
.secure svg{ color:var(--green) }

.plans{ display:grid; gap:16px; grid-template-columns:repeat(4,minmax(0,1fr)); align-items:stretch }
@media (max-width:1199px){ .plans{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:699px){
  .plans{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:12px; margin-inline:calc(-1*max(16px,env(safe-area-inset-left,0px))); padding:16px max(16px,env(safe-area-inset-left,0px)) 6px; scrollbar-width:none }
  .plans::-webkit-scrollbar{ display:none }
  .plan{ flex:0 0 84%; scroll-snap-align:center }
}
.dots{ display:none; justify-content:center; gap:8px; margin-top:16px }
.dots i{ width:8px; height:8px; border-radius:8px; background:var(--line-2); transition:width .3s, background .3s }
.dots i.on{ width:26px; background:var(--red-hi) }
@media (max-width:699px){ .dots{ display:flex } }
.plan{ position:relative; display:flex; flex-direction:column; gap:18px; padding:28px 24px 24px; border-radius:var(--r-lg); background:var(--glass); border:1px solid var(--line-2); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); min-width:0; transition:transform .35s var(--ease), border-color .35s }
.plan:hover{ transform:translateY(-4px) }
.plan.hot{ background:linear-gradient(180deg,rgba(229,20,30,.32),rgba(20,8,10,.75) 42%); border-color:rgba(255,51,64,.7); box-shadow:0 40px 90px -36px rgba(229,20,30,.85) }
.plan.elite{ background:linear-gradient(180deg,rgba(243,184,69,.16),rgba(18,16,12,.7) 42%); border-color:rgba(243,184,69,.5) }
.plan.fight{ background:linear-gradient(180deg,rgba(255,120,80,.14),rgba(18,12,12,.7) 42%) }
.ribbon{ position:absolute; top:-13px; left:24px; padding:.35em .85em; border-radius:999px; font-size:.66rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; background:var(--red); color:var(--on-red) }
.elite .ribbon{ background:var(--gold); color:#251800 }
.fight .ribbon{ background:#ff7a50; color:#2a0b00 }
.plan-kicker{ font-size:var(--t-xs); font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--mute) }
.plan-name{ font-family:var(--f-display); font-weight:900; font-stretch:118%; font-size:2.7rem; letter-spacing:-.03em; line-height:.95 }
.plan-desc{ color:var(--fg-2); font-size:var(--t-sm); min-height:3.2em }
.price{ display:flex; align-items:flex-start; gap:2px; font-variant-numeric:tabular-nums }
.price .cur{ font-family:var(--f-display); font-weight:800; font-size:1.5rem; margin-top:.3em }
.price .amt{ font-family:var(--f-display); font-weight:900; font-stretch:105%; font-size:4.2rem; letter-spacing:-.04em; line-height:.92 }
.price .per{ align-self:flex-end; margin:0 0 .6em .45em; font-size:var(--t-sm); color:var(--mute); font-weight:600 }
.note{ font-size:var(--t-sm); color:var(--mute); min-height:1.6em; margin-top:-10px; font-variant-numeric:tabular-nums }
.note .off{ color:var(--green); font-weight:700 }
.feat{ display:grid; gap:10px; padding-top:18px; border-top:1px solid var(--line-2); font-size:var(--t-sm); color:var(--fg-2) }
.feat li{ display:flex; gap:.65em; align-items:flex-start }
.feat li svg{ margin-top:.22em; color:var(--green) }
.feat li.big{ color:var(--fg); font-weight:700 }
.feat li.big svg{ color:var(--red-hi) }
.elite .feat li.big svg{ color:var(--gold) }
.plan .btn{ margin-top:auto }
.plan .fine{ font-size:var(--t-xs); color:var(--mute-2); text-align:center }
.pay{ display:flex; flex-wrap:wrap; gap:10px 20px; justify-content:center; align-items:center; margin-top:30px; color:var(--mute); font-size:var(--t-sm) }
.chip{ padding:.3em .75em; border:1px solid var(--line-2); border-radius:8px; font-size:.7rem; font-weight:800; letter-spacing:.1em; color:var(--fg) }

.compare{ margin-top:56px; border-radius:var(--r-lg); border:1px solid var(--line); background:var(--bg-2); overflow:hidden }
.compare-top{ display:flex; justify-content:space-between; gap:12px; align-items:center; flex-wrap:wrap; padding:20px 22px; border-bottom:1px solid var(--line) }
.compare-top h3{ font-family:var(--f-display); font-weight:800; font-stretch:110%; font-size:1.5rem; letter-spacing:-.02em }
.compare-top p{ color:var(--mute); font-size:var(--t-sm) }
.scroll-x{ overflow-x:auto }
table{ width:100%; min-width:660px; border-collapse:collapse; font-size:var(--t-sm); font-variant-numeric:tabular-nums }
th,td{ padding:15px 18px; text-align:center; border-bottom:1px solid var(--line); white-space:nowrap }
th:first-child,td:first-child{ text-align:left; position:sticky; left:0; background:var(--bg-2); color:var(--mute); font-weight:600 }
thead th{ font-family:var(--f-display); font-weight:800; font-stretch:112%; font-size:1.15rem; color:var(--fg) }
thead th.hot{ color:var(--red-hi) }
td.hot{ background:rgba(229,20,30,.07) }
tbody tr:last-child td{ border-bottom:0 }
td svg{ color:var(--green); display:block; margin:auto }
.strong{ color:var(--fg); font-weight:700 }

/* ================= vizion player ================= */
.vp{ background:radial-gradient(60% 50% at 50% 0%, rgba(229,20,30,.22), transparent 70%), var(--bg); border-top:1px solid var(--line) }
.vp-brand{ display:flex; align-items:center; gap:16px }
.vp-brand img{ width:76px; height:76px; border-radius:20px; box-shadow:0 22px 60px -14px rgba(229,20,30,.85) }
.vp-brand b{ display:block; font-family:var(--f-display); font-weight:800; font-stretch:115%; font-size:1.7rem; letter-spacing:-.02em; line-height:1 }
.vp-brand span{ color:var(--mute); font-size:var(--t-sm); font-weight:600 }
.stores{ display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr)); margin-top:6px }
.store{ display:flex; align-items:center; gap:12px; padding:12px 16px; border-radius:var(--r); border:1px solid var(--line-2); background:rgba(255,255,255,.04); min-width:0; transition:transform .25s var(--ease), border-color .25s }
a.store:hover{ transform:translateY(-2px); border-color:rgba(255,255,255,.35) }
.store .ic{ width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:rgba(255,255,255,.08); flex:none }
.store .ic svg{ width:20px; height:20px }
.store div{ display:grid; min-width:0 }
.store small{ font-size:var(--t-xs); color:var(--mute); line-height:1.3 }
.store b{ font-size:var(--t-md); line-height:1.25 }
.store.main{ background:var(--fg); border-color:var(--fg); color:#0a0a0c }
.store.main small{ color:#56565e }
.store.main .ic{ background:#0a0a0c; color:#fff }

.app-show{ margin-top:clamp(48px,6vw,88px); display:grid; gap:28px }
.app-tabs{ display:flex; gap:6px; justify-content:center; flex-wrap:wrap }
.app-tabs button{ padding:.6em 1.15em; border-radius:999px; border:1px solid var(--line-2); font-weight:700; font-size:var(--t-sm); color:var(--fg-2); min-height:44px; transition:background .2s,color .2s,border-color .2s }
.app-tabs button[aria-selected="true"]{ background:var(--fg); color:#0a0a0c; border-color:var(--fg) }
@media (max-width:599px){ .app-tabs{ flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; scrollbar-width:none; margin-inline:calc(-1*max(16px,env(safe-area-inset-left,0px))); padding-inline:max(16px,env(safe-area-inset-left,0px)) } .app-tabs::-webkit-scrollbar{display:none} }
.app-stage{ position:relative; padding:0 12% 6% 0; max-width:1180px; margin-inline:auto; width:100% }
.app-stage .i18{ position:absolute; right:0; bottom:-2%; width:18% }
.app-stage .scr,.app-stage .bez img{ transition:opacity .35s ease }
.app-stage .swap{ opacity:0 }
@media (max-width:699px){ .app-stage{ padding:0 18% 14% 0 } .app-stage .i18{ width:32% } }
.app-cap{ text-align:center; display:grid; gap:6px; justify-items:center; min-height:5.5em }
.app-cap h3{ font-family:var(--f-display); font-weight:800; font-stretch:112%; font-size:clamp(1.4rem,2.4vw,2rem); letter-spacing:-.02em }
.app-cap p{ color:var(--fg-2); max-width:40em }

.feats{ display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); margin-top:clamp(48px,6vw,80px) }
.feat-card{ display:grid; grid-template-columns:auto 1fr; gap:16px; padding:22px; border-radius:var(--r-lg); background:var(--bg-2); border:1px solid var(--line); min-width:0 }
.feat-card .ico{ width:46px; height:46px; border-radius:14px; display:grid; place-items:center; background:linear-gradient(140deg,rgba(229,20,30,.35),rgba(229,20,30,.08)); color:#ff8088 }
.feat-card .ico svg{ width:22px; height:22px }
.feat-card h3{ font-weight:700; font-size:1.05rem; margin-bottom:4px; display:flex; gap:.5em; align-items:center; flex-wrap:wrap }
.feat-card p{ color:var(--mute); font-size:var(--t-sm) }
.pro{ font-size:.6rem; font-weight:800; letter-spacing:.12em; color:var(--gold); border:1px solid rgba(243,184,69,.45); border-radius:6px; padding:.15em .5em }
.notice{ display:flex; gap:14px; padding:18px 20px; border-radius:var(--r); background:linear-gradient(90deg,rgba(243,184,69,.12),rgba(243,184,69,.03)); border:1px solid rgba(243,184,69,.3); color:var(--fg-2); font-size:var(--t-sm); margin-top:clamp(28px,3vw,40px) }
.notice svg{ color:var(--gold); width:22px; height:22px; margin-top:1px }
.notice b{ color:var(--fg) }
.notice a{ color:var(--fg); text-decoration:underline; text-underline-offset:3px }

/* ================= devices ================= */
.dev{ display:grid; gap:20px }
@media (min-width:1000px){ .dev{ grid-template-columns:minmax(0,320px) minmax(0,1fr) } }
.dev-list{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; margin-inline:calc(-1*max(16px,env(safe-area-inset-left,0px))); padding-inline:max(16px,env(safe-area-inset-left,0px)); padding-bottom:4px }
.dev-list::-webkit-scrollbar{ display:none }
@media (min-width:700px){ .dev-list{ margin-inline:0; padding-inline:0; flex-wrap:wrap } }
@media (min-width:1000px){ .dev-list{ flex-direction:column; flex-wrap:nowrap; overflow:visible } }
.dev-list button{ display:flex; align-items:center; gap:12px; padding:13px 16px; border-radius:var(--r); border:1px solid var(--line); background:var(--bg-2); font-weight:600; white-space:nowrap; text-align:left; min-height:50px; transition:border-color .2s, background .2s }
.dev-list button svg{ width:20px; height:20px; color:var(--mute) }
.dev-list button small{ margin-left:auto; padding-left:14px; font-size:.66rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--mute-2); display:none }
@media (min-width:1000px){ .dev-list button small{ display:inline } }
.dev-list button[aria-selected="true"]{ border-color:var(--red); background:linear-gradient(90deg,rgba(229,20,30,.22),var(--bg-2)) }
.dev-list button[aria-selected="true"] svg{ color:var(--red-hi) }
.dev-panel{ position:relative; overflow:hidden; border-radius:var(--r-xl); border:1px solid var(--line); background:radial-gradient(70% 90% at 100% 100%, rgba(229,20,30,.2), transparent 70%), var(--bg-2); display:grid; min-width:0 }
@media (min-width:1200px){ .dev-panel{ grid-template-columns:minmax(0,1fr) minmax(0,.95fr) } }
.dev-body{ padding:clamp(24px,3vw,44px); display:grid; gap:22px; align-content:start; min-width:0 }
.dev-body .where{ font-size:var(--t-xs); font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--red-hi) }
.dev-body h3{ font-family:var(--f-display); font-weight:800; font-stretch:112%; font-size:clamp(1.7rem,3vw,2.6rem); letter-spacing:-.025em; line-height:1 }
.steps{ display:grid; gap:16px; counter-reset:s }
.steps li{ position:relative; padding-left:3.2em; min-height:2.4em; counter-increment:s; color:var(--fg-2); padding-top:.3em }
.steps li::before{ content:counter(s); position:absolute; left:0; top:0; width:2.4em; height:2.4em; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.08); border:1px solid var(--line-2); font-weight:800; font-size:var(--t-sm); color:var(--fg) }
.steps b{ color:var(--fg) }
.dev-actions{ display:flex; gap:10px; flex-wrap:wrap }
.dev-art{ display:none; align-items:center; justify-content:center; padding:40px 36px }
@media (min-width:1200px){ .dev-art{ display:flex } }
.dev-art .f-tv,.dev-art .f-laptop{ width:100% }
.dev-art .f-phone{ width:42% }
.dev-art .f-tablet{ width:58% }

/* ================= how it works ================= */
.flow{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); counter-reset:f }
.flow li{ position:relative; padding:28px 24px; border-radius:var(--r-lg); background:var(--bg-2); border:1px solid var(--line); display:grid; gap:10px; align-content:start; counter-increment:f; min-width:0; overflow:hidden }
.flow li::before{ content:counter(f); font-family:var(--f-display); font-weight:900; font-stretch:125%; font-size:4.4rem; line-height:.8; color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.22) }
.flow li:last-child{ border-color:rgba(255,51,64,.55); background:linear-gradient(160deg,rgba(229,20,30,.18),var(--bg-2) 60%) }
.flow li:last-child::before{ -webkit-text-stroke-color:var(--red-hi) }
.flow h3{ font-weight:700; font-size:1.15rem }
.flow p{ color:var(--mute); font-size:var(--t-sm) }
.partner{ display:flex; gap:12px; margin-top:20px; padding:18px 20px; border-radius:var(--r); background:var(--bg-2); border:1px solid var(--line); color:var(--mute); font-size:var(--t-sm) }
.partner svg{ color:var(--green); width:22px; height:22px; margin-top:1px }
.partner b{ color:var(--fg) }

/* ================= resellers ================= */
.resell{ isolation:isolate; overflow:hidden }
.resell .bgimg{ position:absolute; inset:0; z-index:-2 }
.resell .bgimg img{ width:100%; height:100%; object-fit:cover }
.resell::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(110deg, rgba(40,2,5,.96) 0%, rgba(92,5,9,.86) 45%, rgba(5,5,7,.78) 100%) }
.resell-grid{ display:grid; gap:clamp(36px,5vw,72px); align-items:center }
@media (min-width:1050px){ .resell-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) } }
.resell-copy{ display:grid; gap:22px; min-width:0 }
.checks{ display:grid; gap:12px }
.checks li{ display:flex; gap:.7em; color:var(--fg-2) }
.checks svg{ color:var(--gold); margin-top:.25em }
.chips{ display:flex; flex-wrap:wrap; gap:8px }
.chips span{ padding:.5em .95em; border-radius:999px; background:rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.16); font-size:var(--t-sm) }
.chips b{ font-weight:800 }
.builder{ border-radius:var(--r-xl); background:rgba(6,6,8,.7); border:1px solid rgba(255,255,255,.14); padding:clamp(18px,2.4vw,30px); display:grid; gap:22px; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); min-width:0 }
.builder-top{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap }
.builder-top h3{ font-family:var(--f-display); font-weight:800; font-stretch:112%; font-size:1.5rem; letter-spacing:-.02em }
.controls{ display:grid; gap:14px }
@media (min-width:560px){ .controls{ grid-template-columns:minmax(0,1fr) auto; align-items:end } }
.field{ display:grid; gap:6px; min-width:0 }
.field label{ font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--mute) }
.field input{ width:100%; min-height:48px; padding:.6em .95em; border-radius:14px; border:1px solid var(--line-2); background:rgba(255,255,255,.06); font-weight:600 }
.field input:focus{ outline:2px solid var(--red-hi); outline-offset:1px }
.swatches{ display:flex; gap:8px }
.swatches button{ width:40px; height:40px; border-radius:50%; background:var(--c); border:2px solid transparent; box-shadow:inset 0 0 0 2px rgba(0,0,0,.25) }
.swatches button[aria-pressed="true"]{ border-color:#fff }
.rb{ --brand:#e5141e; display:grid; grid-template-columns:minmax(0,3.3fr) minmax(0,1fr); gap:16px; align-items:end }
.rb canvas{ display:block; width:100%; height:100% }
.rbw{ position:relative; container-type:inline-size; aspect-ratio:16/9; border-radius:.75cqi; overflow:hidden; background:#000 }
.rb .ap .scr{ container-type:inline-size }
.rb-ov{ position:absolute; display:flex; align-items:center; z-index:3; pointer-events:none }
.rb-ov.tv{ left:2.95%; top:1.5%; height:4.4cqi; gap:1cqi }
.rb-ov.tv .rb-icon{ width:2.7cqi; height:2.7cqi; font-size:1.5cqi; border-radius:.5cqi }
.rb-ov.tv .rb-name{ color:#fff; font-weight:700; font-size:1.6cqi; font-family:var(--f-body) }
.rb-ov.ph{ left:5.1%; top:7.2%; height:4.4%; gap:2.2cqi }
.rb-ov.ph .rb-icon{ width:8.4cqi; height:8.4cqi; font-size:4.6cqi; border-radius:1.8cqi }
.rb-ov.ph .rb-name{ min-width:21cqi; padding:.35em .9em; border-radius:99px; background:rgba(9,16,34,.96); border:1px solid var(--brand); color:#fff; font-size:4.1cqi; font-weight:700; font-family:var(--f-body) }
.rb-tv,.rb-ph{ min-width:0 }
.rb-tv .s{ font-size:2.4cqi; aspect-ratio:16/9; border-radius:1.6cqi; border:1cqi solid #25252b; background:#0a0a0d; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 30px 60px -20px rgba(0,0,0,.9) }
.rb-ph .s{ font-size:7.2cqi; aspect-ratio:9/19; border-radius:16cqi; border:3.6cqi solid #25252b; background:#0a0a0d; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 30px 60px -20px rgba(0,0,0,.9) }
.rb-bar{ display:flex; align-items:center; gap:.6em; padding:.8em 1.1em }
.rb-icon{ width:2.3em; height:2.3em; border-radius:.6em; background:linear-gradient(140deg,var(--brand),color-mix(in srgb,var(--brand) 40%,#000)); display:grid; place-items:center; font-family:var(--f-display); font-weight:900; color:#fff; flex:none; transition:background .3s }
.rb-name{ font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0 }
.rb-hero{ position:relative; margin:0 1.1em; flex:1; border-radius:.7em; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; padding:1em; gap:.45em; min-height:0 }
.rb-hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0 }
.rb-hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, color-mix(in srgb,var(--brand) 55%,#000) 0%, transparent 75%); z-index:1; transition:background .3s }
.rb-hero > *:not(img){ position:relative; z-index:2 }
.rb-hero b{ font-family:var(--f-display); font-weight:800; font-size:1.25em; line-height:1 }
.rb-btn{ width:max-content; padding:.35em .95em; border-radius:9em; background:var(--brand); color:#fff; font-weight:700; font-size:.8em; transition:background .3s }
.rb-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:.5em; padding:.8em 1.1em 1.1em }
.rb-row span{ aspect-ratio:2/3; border-radius:.45em; background:#1d1d24 center/cover }
.rb-row span:first-child{ outline:.16em solid var(--brand) }
.rb-ph .rb-row{ grid-template-columns:repeat(2,1fr) }
.rb-ph .rb-row span:nth-child(n+3){ display:none }
.builder-foot{ font-size:var(--t-xs); color:var(--mute) }

/* ================= help teaser, faq, final ================= */
.help-band{ display:grid; gap:28px; align-items:center; padding:clamp(26px,4vw,52px); border-radius:var(--r-xl); border:1px solid var(--line); background:radial-gradient(60% 120% at 100% 0%, rgba(229,20,30,.16), transparent 70%), var(--bg-2) }
@media (min-width:1000px){ .help-band{ grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) } }
.search{ display:flex; align-items:center; gap:10px; padding:6px 6px 6px 18px; border-radius:999px; border:1px solid var(--line-2); background:rgba(0,0,0,.4); min-width:0 }
.search svg{ color:var(--mute); width:20px; height:20px }
.search input{ flex:1; min-width:0; border:0; background:transparent; min-height:46px; font-size:var(--t-md) }
.search input:focus{ outline:none }
.search:focus-within{ border-color:var(--red-hi) }
.popular{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px }
.popular a{ padding:.45em .95em; border-radius:999px; border:1px solid var(--line-2); font-size:var(--t-sm); color:var(--fg-2) }
.popular a:hover{ color:var(--fg); border-color:rgba(255,255,255,.35) }

.faq-grid{ display:grid; gap:40px }
@media (min-width:1000px){ .faq-grid{ grid-template-columns:minmax(0,4fr) minmax(0,7fr) } }
.faq{ border-top:1px solid var(--line) }
.faq details{ border-bottom:1px solid var(--line) }
.faq summary{ list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:22px 4px; cursor:pointer; font-weight:700; font-size:var(--t-lg) }
.faq summary::-webkit-details-marker{ display:none }
.faq .pm{ width:36px; height:36px; border-radius:50%; border:1px solid var(--line-2); display:grid; place-items:center; flex:none; transition:transform .3s var(--ease), background .3s, border-color .3s }
.faq details[open] .pm{ transform:rotate(45deg); background:var(--red); border-color:var(--red) }
.faq .ans{ padding:0 4px 24px; color:var(--fg-2); max-width:46em }
.faq .ans a{ color:var(--fg); text-decoration:underline; text-underline-offset:3px }

.final{ position:relative; isolation:isolate; overflow:hidden; text-align:center }
.final .bgimg{ position:absolute; inset:0; z-index:-2 }
.final .bgimg img{ width:100%; height:100%; object-fit:cover }
.final::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,var(--bg) 0%,rgba(5,5,7,.55) 35%,rgba(5,5,7,.7) 70%,var(--bg) 100%) }
.final .wrap{ display:grid; justify-items:center; gap:24px; padding-block:clamp(60px,10vw,140px) }
.final h2{ font-size:clamp(2.6rem,7.6vw,7rem) }
.final h2 em{ font-style:normal; color:var(--red-hi) }

/* footer */
footer{ border-top:1px solid var(--line); background:var(--bg-2) }
.foot{ display:grid; gap:36px; padding-block:56px 32px; grid-template-columns:repeat(2,minmax(0,1fr)) }
@media (min-width:900px){ .foot{ grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr)) } }
.foot-brand{ grid-column:1/-1; display:grid; gap:18px; align-content:start; max-width:30em }
@media (min-width:900px){ .foot-brand{ grid-column:auto } }
.foot-brand p{ color:var(--mute); font-size:var(--t-sm) }
.foot h4{ font-size:var(--t-xs); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--mute-2); margin-bottom:14px }
.foot ul{ display:grid; gap:10px }
.foot ul a{ color:var(--fg-2); font-size:var(--t-sm) }
.foot ul a:hover{ color:var(--fg) }
.socials{ display:flex; gap:8px; flex-wrap:wrap }
.socials a{ width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.06); border:1px solid var(--line-2); display:grid; place-items:center; color:var(--b); transition:transform .25s var(--ease), background .25s }
.socials a:hover{ transform:translateY(-2px); background:rgba(255,255,255,.12) }
.socials svg.si{ width:22px; height:22px; fill:currentColor }
.mini{ display:flex; gap:8px; flex-wrap:wrap }
.mini a{ display:block; transition:transform .25s var(--ease) }
.mini a:hover{ transform:translateY(-2px) }
.legal{ border-top:1px solid var(--line); padding-block:22px; display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between; font-size:var(--t-xs); color:var(--mute-2) }
.legal p{ max-width:62em }

/* ================= help center ================= */
.help-hero{ position:relative; isolation:isolate; overflow:hidden; border-bottom:1px solid var(--line); padding-top:calc(var(--head) + env(safe-area-inset-top,0px)) }
.help-hero .bgimg{ position:absolute; inset:0; z-index:-2 }
.help-hero .bgimg img{ width:100%; height:100%; object-fit:cover; object-position:50% 40% }
.help-hero::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(5,5,7,.95),rgba(5,5,7,.7) 55%,rgba(5,5,7,.45)), linear-gradient(0deg,var(--bg),transparent 50%) }
.help-hero .wrap{ padding-block:clamp(36px,6vw,88px) clamp(28px,4vw,52px); display:grid; gap:20px }
.help-hero h1{ font-size:clamp(2.8rem,7vw,6rem) }
.help-hero .search{ max-width:640px; background:rgba(0,0,0,.55) }
.crumbs{ display:flex; gap:.5em; align-items:center; font-size:var(--t-sm); color:var(--mute); flex-wrap:wrap }
.crumbs a:hover{ color:var(--fg) }
.cats{ display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr)); margin-top:6px }
.cats button{ text-align:left; padding:18px; border-radius:var(--r); border:1px solid var(--line-2); background:var(--glass); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); display:grid; gap:8px; min-width:0; transition:border-color .2s, background .2s }
.cats button:hover{ border-color:rgba(255,255,255,.35) }
.cats button[aria-pressed="true"]{ border-color:var(--red); background:linear-gradient(160deg,rgba(229,20,30,.3),rgba(20,8,10,.7)) }
.cats .ci{ width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:rgba(229,20,30,.18); color:#ff8088 }
.cats .ci svg{ width:20px; height:20px }
.cats b{ font-weight:700; font-size:1.02rem }
.cats small{ color:var(--mute); font-size:var(--t-xs) }
.kb{ display:grid; gap:28px; padding-block:40px 100px }
@media (min-width:1000px){ .kb{ grid-template-columns:minmax(0,360px) minmax(0,1fr); gap:44px } }
@media (min-width:1600px){ .kb{ grid-template-columns:minmax(0,400px) minmax(0,1fr) minmax(0,290px) } }
.kb-list{ display:grid; gap:4px; align-content:start; min-width:0 }
@media (min-width:1000px){ .kb-list{ position:sticky; top:calc(var(--head) + 20px); max-height:calc(100vh - var(--head) - 40px); overflow-y:auto; padding-right:6px } }
.kb-list h3{ font-size:var(--t-xs); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--mute-2); padding:18px 12px 8px }
.kb-list h3:first-child{ padding-top:0 }
.kb-list a{ display:flex; justify-content:space-between; gap:12px; align-items:center; padding:12px 14px; border-radius:12px; color:var(--fg-2); font-weight:600; font-size:var(--t-sm); border:1px solid transparent }
.kb-list a:hover{ background:var(--bg-2); color:var(--fg) }
.kb-list a.on{ background:var(--bg-2); color:var(--fg); border-color:var(--line-2) }
.kb-list a small{ color:var(--mute-2); font-size:.7rem; white-space:nowrap }
.kb-empty{ padding:20px 14px; color:var(--mute); font-size:var(--t-sm) }
.kb-main{ min-width:0 }
.article{ display:grid; gap:22px; max-width:46em }
.article .back{ display:none; width:max-content }
.article h2{ font-family:var(--f-display); font-weight:800; font-stretch:110%; font-size:clamp(2rem,4vw,3.4rem); letter-spacing:-.025em; line-height:1; text-wrap:balance }
.article .meta{ font-size:var(--t-sm); color:var(--mute); display:flex; gap:16px; flex-wrap:wrap }
.prose{ display:grid; gap:16px; color:var(--fg-2); font-size:1.05rem; line-height:1.72 }
.prose h4{ font-weight:800; font-size:1.2rem; color:var(--fg); margin-top:10px }
.prose ol{ display:grid; gap:12px; counter-reset:p }
.prose ol li{ position:relative; padding-left:2.9em; min-height:2.1em; padding-top:.15em; counter-increment:p }
.prose ol li::before{ content:counter(p); position:absolute; left:0; top:0; width:2.1em; height:2.1em; border-radius:50%; background:rgba(229,20,30,.2); display:grid; place-items:center; font-size:.85rem; font-weight:800; color:#ff8088 }
.prose ul{ display:grid; gap:8px }
.prose ul li{ position:relative; padding-left:1.3em }
.prose ul li::before{ content:""; position:absolute; left:0; top:.68em; width:.45em; height:.45em; border-radius:50%; background:var(--red-hi) }
.prose b{ color:var(--fg) }
.prose a{ color:var(--fg); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--red-hi) }
.prose code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.88em; padding:.1em .4em; border-radius:6px; background:var(--card-2); color:var(--fg) }
.tip{ padding:16px 18px; border-radius:var(--r); background:var(--bg-2); border:1px solid rgba(243,184,69,.3); font-size:.98rem; color:var(--fg-2) }
.tip b{ color:var(--gold) }
.helpful{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding-top:18px; border-top:1px solid var(--line); color:var(--mute); font-size:var(--t-sm) }
.kb-side{ display:none; gap:14px; align-content:start }
@media (min-width:1600px){ .kb-side{ display:grid; position:sticky; top:calc(var(--head) + 20px) } }
.kb-card{ display:grid; gap:12px; padding:22px; border-radius:var(--r-lg); border:1px solid var(--line); background:var(--bg-2) }
.kb-card h4{ font-weight:800; font-size:1.15rem }
.kb-card p{ color:var(--mute); font-size:var(--t-sm) }
.kb-card img{ width:52px; height:52px; border-radius:14px }
.kb-over{ display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)) }
.kb-over a{ display:grid; gap:8px; padding:20px; border-radius:var(--r); border:1px solid var(--line); background:var(--bg-2); min-width:0; transition:border-color .2s, transform .25s var(--ease) }
.kb-over a:hover{ border-color:rgba(255,255,255,.3); transform:translateY(-2px) }
.kb-over small{ font-size:.68rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--red-hi) }
.kb-over b{ font-size:1.05rem; line-height:1.35 }
.kb-over span{ color:var(--mute); font-size:var(--t-sm) }
@media (max-width:999px){
  .kb.reading .kb-list{ display:none }
  .kb.reading .article .back{ display:inline-flex }
  .kb:not(.reading) .kb-main{ display:none }
}