/* =============================================================
   XTREMEHD — design system (dusk)
   Deep plum, the pink-violet-blue brand gradient on what you can click, light cards where contrast sells.
   ============================================================= */

/* ---- Brand tokens: change these for the next site ------------ */
:root{
  --bg:#151120;           /* page: deep plum charcoal */
  --bg-2:#1a1527;         /* bands */
  --surface:#201a2f;      /* cards */
  --surface-2:#29223d;    /* raised */
  --text:#efeaf6;
  --text-2:#bdb3cc;
  --text-3:#948aa8;
  --line:#2e2742;
  --line-2:#433960;

  --orange:#9b7cf6;       /* the brand violet (token name kept for the shared rules) */
  --orange-2:#b394ff;     /* hover */
  --orange-ink:#14101f;   /* dark text on the gradient and on light surfaces */
  --orange-soft:rgba(155,124,246,.16);
  --pink:#ee8cf1;
  --blue:#6da8fb;
  --grad:linear-gradient(135deg,#ee8cf1 0%,#9b7cf6 50%,#6da8fb 100%);
  --yellow:#ffc94d;       /* stars */
  --yellow-soft:rgba(255,201,77,.16);
  --cream:#f7f4fb;
  --paper:#f7f4fb;        /* the light plan cards */
  --paper-ink:#1a1527;
  --paper-2:#6b6480;
  --paper-line:#e2dcee;
  --wa:#25D366;
  --wa-2:#1EBE5A;
  --glow:none;

  --display:'Schibsted Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --body:'Schibsted Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;

  --r-lg:22px;--r:16px;--r-sm:12px;--pill:999px;
  --maxw:1180px;
  --gutter:clamp(18px,4vw,36px);
  --sy:clamp(48px,6.5vw,84px);
  --ease:cubic-bezier(.2,.7,.2,1);
  --cut:clamp(28px,6vw,86px);   /* the diagonal */

  --pat-dots:none;
  --pat-plus:none;
  --pat-grid:none;
}

/* ---- Base (landing templates only) ----------------------------- */
body.xtremehd-landing{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
.xtremehd-landing *,.xtremehd-landing *::before,.xtremehd-landing *::after{box-sizing:border-box}
.xtremehd-landing img,.xtremehd-landing svg{max-width:100%;display:block}
.xtremehd-landing a{color:var(--orange);text-decoration:none}
.xtremehd-landing a:hover{text-decoration:underline;text-underline-offset:3px}
.xtremehd-landing h1,.xtremehd-landing h2,.xtremehd-landing h3,.xtremehd-landing h4{font-family:var(--display);font-weight:700;line-height:1.08;margin:0 0 .45em;letter-spacing:-.015em;color:var(--text)}
.xtremehd-landing h1{font-size:clamp(2.5rem,5.4vw,4.2rem);font-weight:800}
.xtremehd-landing h2{font-size:clamp(1.85rem,3.5vw,2.7rem)}
.xtremehd-landing h3{font-size:1.28rem}
.xtremehd-landing h4{font-size:1rem;font-family:var(--body);font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:var(--text-3)}
.xtremehd-landing p{margin:0 0 1em}
.xtremehd-landing ul{margin:0;padding:0;list-style:none}
.xtremehd-landing strong{font-weight:800}
.soft{color:var(--orange)}
.hl{color:var(--orange-ink);background:var(--orange);padding:0 .18em;border-radius:.22em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.ul{text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:.12em;text-underline-offset:.12em}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.section{padding:var(--sy) 0}
.section.tight{padding:calc(var(--sy) * .5) 0}
.band{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band-deep{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band-grid{background:var(--bg) var(--pat-grid);background-size:40px 40px}
.kicker{display:inline-flex;align-items:center;gap:8px;color:var(--orange);font-weight:800;text-transform:uppercase;letter-spacing:.1em;font-size:.76rem;margin-bottom:12px}
.kicker::before{content:"";width:22px;height:3px;border-radius:3px;background:var(--orange)}
.lead{font-size:1.15rem;color:var(--text-2);max-width:62ch}
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto}
.center .kicker{justify-content:center}
.sec-head{max-width:760px;margin:0 auto 36px}
.fine{font-size:.9rem;color:var(--text-3)}
.tc{text-align:center}

/* ---- Buttons: always loud -------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 26px;border-radius:var(--pill);font-family:var(--body);font-weight:800;font-size:1rem;line-height:1;border:2px solid transparent;cursor:pointer;text-decoration:none!important;transition:background .18s var(--ease),border-color .18s var(--ease),transform .12s var(--ease),color .18s}
.btn svg{width:18px;height:18px;flex:none;transition:transform .18s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn:active{transform:translateY(1px)}
.xtremehd-landing .btn-primary,.btn-primary{background:var(--orange);color:var(--orange-ink)}
.xtremehd-landing .btn-primary:hover,.btn-primary:hover{background:var(--orange-2);color:var(--orange-ink)}
.xtremehd-landing .btn-ghost,.btn-ghost{background:transparent;color:var(--text);border-color:var(--line-2)}
.xtremehd-landing .btn-ghost:hover,.btn-ghost:hover{border-color:var(--text);color:var(--text)}
.xtremehd-landing .btn-ink,.btn-ink{background:var(--cream);color:var(--orange-ink)}
.xtremehd-landing .btn-ink:hover,.btn-ink:hover{background:#fff;color:var(--orange-ink)}
.xtremehd-landing .btn-wa,.btn-wa{background:var(--orange-ink);color:var(--orange);border-color:var(--orange)}
.xtremehd-landing .btn-wa:hover,.btn-wa:hover{background:var(--orange);color:var(--orange-ink);border-color:var(--orange)}
.btn-lg{padding:18px 32px;font-size:1.08rem}
.btn.full{width:100%}
.checks + .btn,.chips + .btn,p + .btn,ol + .btn,ul + .btn,.btn-row{margin-top:16px}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
p > .btn{margin-top:12px}
.callout .btn{margin-top:14px}

/* ---- Header ----------------------------------------------------- */
.site-top{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--line)}
.site-top .wrap{display:flex;align-items:center;justify-content:space-between;height:76px;gap:20px}
.logo{display:flex;align-items:center;text-decoration:none!important}
.logo img{height:34px;width:auto}
.nav{display:flex;gap:28px;align-items:center}
.nav > a{color:var(--text);font-weight:700;text-decoration:none!important}
.nav > a:hover{color:var(--orange)}
.nav .btn{padding:12px 20px;font-size:.95rem;color:var(--orange-ink)}
.nav-toggle{display:none;background:none;border:0;padding:8px;cursor:pointer;color:var(--text)}
.nav-toggle span{display:block;width:24px;height:3px;border-radius:3px;background:currentColor;margin:5px 0}
@media (max-width:860px){
  .logo img{height:28px}
  .nav{display:none;position:absolute;left:0;right:0;top:76px;background:var(--bg);flex-direction:column;align-items:stretch;padding:12px var(--gutter) 22px;border-bottom:1px solid var(--line);gap:4px}
  .nav.open{display:flex}
  .nav > a{padding:12px 4px;border-bottom:1px solid var(--line)}
  .nav .btn{margin-top:12px}
  .nav-toggle{display:block}
}

/* ---- Hero ------------------------------------------------------- */
.hero{padding:clamp(36px,6vw,80px) 0 clamp(32px,5vw,64px);position:relative;overflow:clip;background:var(--bg) var(--pat-grid);background-size:40px 40px}
.hero .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:center}
.hero h1 .soft{font-style:normal;font-weight:700}
.hero .lead{font-size:1.2rem}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0 18px}
.hero-proof{display:flex;flex-wrap:wrap;gap:8px 20px;color:var(--text-2);font-weight:700;font-size:.95rem}
.hero-proof li{display:flex;align-items:center;gap:8px}
.hero-proof svg{width:18px;height:18px;color:var(--orange)}
@media (max-width:860px){.hero .wrap{grid-template-columns:1fr}}

/* full-bleed hero background (hero-bg.jpg) */
.hero.has-bg{min-height:min(88vh,820px);display:flex;align-items:center}
.hero.has-bg .wrap{grid-template-columns:1.05fr .95fr;width:100%}
@media (max-width:860px){.hero.has-bg .wrap{grid-template-columns:1fr}}
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:88% 50%;opacity:.55}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--bg) 0%,rgba(9,19,30,.82) 38%,rgba(9,19,30,.25) 70%,rgba(9,19,30,.15) 100%),linear-gradient(180deg,rgba(9,19,30,.35) 0%,transparent 30%,transparent 70%,var(--bg) 100%)}
@media (max-width:860px){.hero-bg img{object-position:75% 50%;opacity:.4}.hero-bg::after{background:linear-gradient(180deg,rgba(9,19,30,.6),rgba(9,19,30,.85) 70%,var(--bg))}}

/* big hero placeholder: swap for a real image later */
.hero-media{position:relative;aspect-ratio:4/3;border-radius:var(--r-lg);background:var(--surface) var(--pat-grid);background-size:40px 40px;border:1.5px solid var(--line-2);overflow:hidden;display:grid;place-items:center}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(155,124,246,.18),transparent 55%)}
.hero-media .ph{position:relative;z-index:1;text-align:center;color:var(--text-3);font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:.8rem;display:grid;gap:12px;justify-items:center}
.hero-media .ph svg{width:56px;height:56px;color:var(--orange)}
.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-media .tag{position:absolute;left:18px;top:18px;z-index:2;background:var(--orange);color:var(--orange-ink);font-weight:800;font-size:.78rem;letter-spacing:.06em;padding:7px 12px;border-radius:var(--pill)}

/* hero badges row */
.hero-badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px;animation:rise .7s var(--ease) both}
.hb{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:var(--pill);border:1.5px solid var(--line-2);background:rgba(35,28,23,.7);font-size:.8rem;font-weight:800;color:var(--text-2)}
.hb svg{width:15px;height:15px;color:var(--orange)}
.hb-trial{background:var(--orange);border-color:var(--orange);color:var(--orange-ink)}
.hb-trial i{width:8px;height:8px;border-radius:50%;background:var(--orange-ink);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* stagger reveal on load */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hero .kicker,.hero h1,.hero .lead,.hero-actions,.hero-proof{animation:rise .7s var(--ease) both}
.hero h1{animation-delay:.06s}.hero .lead{animation-delay:.14s}.hero-actions{animation-delay:.22s}.hero-proof{animation-delay:.3s}
.hero-media,.hero .form{animation:rise .9s var(--ease) .15s both}
@media (prefers-reduced-motion:reduce){.xtremehd-landing *{animation:none!important;transition:none!important}}


/* ---- Decoration: one rule. Every tinted band gets the same centred glow at its top edge. ---- */
.section,.hero{position:relative;overflow:hidden}
.section > .wrap,.hero > .wrap{position:relative;z-index:1}
.band::before,.band-deep::before{display:none}
.noglow::before{display:none}


/* ---- Hero stack: wide TV-player home screen mock ---- */
.hero.has-bg .wrap{display:flex;align-items:center;gap:clamp(2rem,4vw,4.5rem);max-width:none;padding-right:0;padding-left:max(var(--gutter),calc((100% - var(--maxw)) / 2 + var(--gutter)))}
.hero.has-bg .wrap > div:first-child{flex:0 1 540px;max-width:540px;min-width:0}
.hero-stack{position:relative;flex:1 1 0;min-width:0;max-width:none;animation:slidein 1s var(--ease) .2s both}
@keyframes slidein{from{opacity:0;transform:translateX(60px)}to{opacity:1;transform:none}}
.hero-stack .player{border-radius:18px 0 0 18px;border-right:0}
.player{aspect-ratio:16/9;border-radius:18px;padding:4.2% 4% 4.5%;display:flex;flex-direction:column;gap:4%;color:var(--text);border:1.5px solid rgba(155,124,246,.3);
  background:radial-gradient(70% 90% at 85% 100%,rgba(155,124,246,.22),transparent 70%),linear-gradient(180deg,rgba(26,20,17,.82) 0%,rgba(18,14,11,.86) 100%)}
.pl-top{display:flex;align-items:center;justify-content:space-between}
.pl-brand{height:clamp(20px,3.6vw,32px);width:auto}
.pl-right{display:flex;align-items:center;gap:10px;font-size:clamp(.6rem,1.1vw,.82rem);font-weight:700;color:var(--text-3)}
.pl-time{color:var(--text);font-weight:800}
.pl-sep{width:1px;height:1em;background:rgba(255,255,255,.2)}
.pl-btn{width:clamp(20px,3.6vw,30px);height:clamp(20px,3.6vw,30px);border-radius:50%;border:1.5px solid rgba(155,124,246,.45);color:var(--orange);display:grid;place-items:center;margin-left:2px}
.pl-btn svg{width:55%;height:55%}
.pl-grid{flex:1;display:grid;grid-template-columns:1fr 1fr 1fr .85fr;gap:3%;min-height:0}
.pl-col{display:grid;grid-template-rows:1fr 1fr;gap:10%;min-height:0}
.pl-tile{position:relative;border-radius:12px;border:1.5px solid rgba(155,124,246,.28);background:rgba(155,124,246,.08);display:flex;flex-direction:column;justify-content:flex-end;padding:7%;min-height:0;overflow:hidden}
.pl-tile b{font-weight:800;font-size:clamp(.72rem,1.5vw,1.05rem);letter-spacing:-.01em}
.pl-tile .pl-ico{position:absolute;left:8%;top:40%;width:clamp(22px,4.6vw,38px);height:clamp(22px,4.6vw,38px);color:var(--text)}
.pl-tile.tall .pl-ico{top:38%}
.pl-tile .pl-ico svg{width:100%;height:100%}
.pl-tile.small{align-items:center;text-align:center;justify-content:center;gap:6%}
.pl-tile.small .pl-ico{position:static;width:clamp(18px,3.4vw,28px);height:clamp(18px,3.4vw,28px)}
.pl-tile.small b{font-size:clamp(.62rem,1.2vw,.88rem)}
.pl-tile.on{background:var(--orange);border-color:var(--orange);color:var(--orange-ink)}.pl-tile.on .pl-ico{color:var(--orange-ink)}
.pl-live{position:absolute;left:8%;top:8%;background:var(--orange-ink);color:var(--orange);font-size:clamp(.5rem,.9vw,.66rem);font-weight:800;letter-spacing:.12em;padding:3px 9px;border-radius:var(--pill)}
@media (max-width:860px){.hero.has-bg .wrap{flex-direction:column;align-items:stretch;padding-right:var(--gutter);padding-left:var(--gutter);gap:28px}.hero.has-bg .wrap > div:first-child{max-width:none;flex:none}.hero-stack{flex:none;margin:0}.hero-stack .player{border-radius:16px;border-right:1.5px solid rgba(155,124,246,.3)}.pl-tile b{font-size:.85rem}.pl-right{font-size:.7rem}.pl-brand{height:16px}}

/* ---- Marquee strip --------------------------------------------- */
.ticker{background:var(--orange);color:var(--orange-ink);overflow:hidden;padding:13px 0;font-weight:800;font-size:.95rem;letter-spacing:.02em}
.ticker-track{display:flex;gap:40px;width:max-content;animation:tick 32s linear infinite}
.ticker span{display:flex;align-items:center;gap:40px;white-space:nowrap}
.ticker i{font-style:normal;opacity:.5}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---- Reveal on scroll ------------------------------------------ */
.rv{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-2{transition-delay:.08s}.rv-3{transition-delay:.16s}.rv-4{transition-delay:.24s}

/* ---- Cards ------------------------------------------------------ */
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:980px){.g3,.g4{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.g2,.g3,.g4{grid-template-columns:1fr}}
.card{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);padding:26px;transition:transform .25s var(--ease),border-color .25s}
.card:hover{transform:translateY(-3px);border-color:var(--orange)}
.card p{color:var(--text-2);margin:0}
.card .ico{width:46px;height:46px;border-radius:13px;background:var(--orange-soft);color:var(--orange);display:grid;place-items:center;margin-bottom:16px}
.card .ico svg{width:24px;height:24px}
.num{width:44px;height:44px;border-radius:50%;background:var(--orange);color:var(--orange-ink);display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:1.2rem;margin-bottom:16px}

/* ---- Pricing ---------------------------------------------------- */
.screen-select{display:inline-flex;background:var(--surface);border:1.5px solid var(--line-2);border-radius:var(--pill);padding:5px;margin:0 auto 30px}
.screen-opt{border:0;background:transparent;padding:11px 22px;border-radius:var(--pill);font-family:var(--body);font-weight:800;font-size:.95rem;color:var(--text-2);cursor:pointer;transition:background .2s,color .2s}
.screen-opt.is-active{background:var(--orange);color:var(--orange-ink)}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
@media (max-width:900px){.tiers{grid-template-columns:1fr;max-width:460px;margin:0 auto}}
.tier{position:relative;background:var(--surface);border:2px solid var(--line);border-radius:var(--r-lg);padding:30px 26px 26px;display:flex;flex-direction:column;transition:transform .25s var(--ease)}
.tier:hover{transform:translateY(-4px)}
.tier.best{border-color:var(--orange);background:var(--surface-2)}
.tier .badge{position:absolute;top:-15px;left:50%;transform:translateX(-50%);background:var(--orange);color:var(--orange-ink);padding:6px 16px;border-radius:var(--pill);font-size:.78rem;font-weight:800;letter-spacing:.06em;white-space:nowrap}
.tier h3{font-size:1.5rem;margin-bottom:6px}
.tier-price{display:flex;align-items:baseline;gap:8px;margin:6px 0 2px;flex-wrap:wrap}
.tier-price .amt{font-family:var(--display);font-weight:800;font-size:2.9rem;letter-spacing:-.03em;line-height:1;color:var(--text)}
.tier-price .per{color:var(--text-3);font-weight:700}
.tier-sub{display:flex;align-items:center;gap:10px;color:var(--text-2);font-weight:700;margin-bottom:20px;flex-wrap:wrap}
.tier-save{background:var(--yellow-soft);color:var(--yellow);padding:3px 10px;border-radius:var(--pill);font-size:.8rem;font-weight:800}
.tier-specs{display:grid;gap:9px;margin-bottom:4px;color:var(--text-2)}
.tier-specs li{display:flex;gap:10px;align-items:flex-start}
.tier-specs li::before{content:"";flex:none;width:20px;height:20px;margin-top:2px;border-radius:50%;background:var(--orange-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.5 3.5 6.5-7.5' fill='none' stroke='%239b7cf6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.tier-guard{margin:12px 0 0!important;display:flex;justify-content:center}
.tier-guard span{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:var(--pill);background:var(--yellow-soft);color:var(--yellow);font-weight:800;font-size:.86rem;letter-spacing:.02em}
.tier-guard span::before{content:"";width:16px;height:16px;border-radius:50%;background:var(--yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 3l5.5 2v5c0 3.6-2.3 6.3-5.5 7.5C6.8 16.3 4.5 13.6 4.5 10V5z' fill='%2314101f'/%3E%3Cpath d='M7.5 10.3l1.8 1.8 3.4-3.6' fill='none' stroke='%23FFC94D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.tier .btn{margin-top:12px}
.tier-secure{display:flex;justify-content:center;align-items:center;gap:7px;margin:auto 0 0!important;padding-top:20px;color:#5fd38a;font-weight:800;font-size:.86rem}
.tier-secure::before{content:"";width:16px;height:16px;border-radius:50%;background:rgba(95,211,138,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.5 3.5 6.5-7.5' fill='none' stroke='%235fd38a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat}
.multi{margin-top:22px;background:var(--surface);border:1.5px dashed var(--line-2);border-radius:var(--r);padding:24px 26px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:26px}
.multi .art{width:150px}
.multi .art svg{width:100%;height:auto}
@media (max-width:760px){.multi{grid-template-columns:1fr}.multi .art{width:120px}}
.multi h3{margin:0 0 4px}.multi p{margin:0;color:var(--text-2)}

/* ---- Chips ------------------------------------------------------ */
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chips span{padding:9px 16px;border-radius:var(--pill);background:var(--surface);border:1.5px solid var(--line-2);font-weight:700;color:var(--text)}
.chips.center{justify-content:center}

/* ---- Two column feature ---------------------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.split .art{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-lg);padding:26px;aspect-ratio:4/3;display:grid;place-items:center}
.split .art svg{width:100%;height:auto}
.checks{display:grid;gap:12px;margin:18px 0 22px}
.checks li{display:flex;gap:12px;align-items:flex-start;font-weight:700}
.checks svg{width:22px;height:22px;flex:none;color:var(--orange);margin-top:2px}

/* ---- Devices ---------------------------------------------------- */
.devices{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:980px){.devices{grid-template-columns:repeat(2,1fr)}}
.xtremehd-landing .device{display:flex;flex-direction:column;gap:4px;background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);padding:20px;color:var(--text);text-decoration:none!important;transition:transform .25s var(--ease),border-color .25s}
.xtremehd-landing .device:hover{transform:translateY(-3px);border-color:var(--orange)}
.device b{font-weight:800}.device span{color:var(--text-3);font-size:.92rem}
.device .go{margin-top:10px;color:var(--orange);font-weight:800;font-size:.9rem;display:flex;align-items:center;gap:6px}
.device .go svg{width:16px;height:16px}

/* ---- Steps ------------------------------------------------------ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:860px){.steps{grid-template-columns:1fr}}
.step{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);padding:26px}
.step p{color:var(--text-2);margin:0}

/* ---- Comparison table ------------------------------------------ */
.compare{width:100%;border-collapse:separate;border-spacing:0;background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);overflow:hidden;font-size:.98rem}
.compare th,.compare td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.compare tr:last-child td{border-bottom:0}
.compare thead th{background:var(--surface-2);font-weight:800;font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3)}
.compare thead th.us{color:var(--orange)}
.compare td.us{font-weight:800;color:var(--text);background:var(--surface-2)}
.compare td{color:var(--text-2)}
.compare td:first-child{font-weight:800;color:var(--text)}
.compare-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width:700px){.compare{min-width:640px}}

/* ---- Reviews ---------------------------------------------------- */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:980px){.reviews{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.reviews{grid-template-columns:1fr}}
.review{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);padding:24px;display:flex;flex-direction:column;gap:12px}
.stars{display:flex;gap:2px;color:var(--yellow)}
.stars svg{width:18px;height:18px}
.review p{margin:0;font-size:1.02rem}
.review footer{color:var(--text-3);font-size:.9rem;font-weight:700;margin-top:auto}

/* ---- FAQ -------------------------------------------------------- */
.faq{max-width:840px;margin:0 auto}
.faq details{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-sm);padding:0 20px;margin-bottom:10px;transition:border-color .2s}
.faq details[open]{border-color:var(--line-2)}
.faq summary{cursor:pointer;font-weight:800;padding:17px 36px 17px 0;list-style:none;position:relative;font-size:1.04rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:0;top:50%;width:26px;height:26px;margin-top:-13px;border-radius:50%;background:var(--orange-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 5v10M5 10h10' stroke='%239b7cf6' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/14px no-repeat;transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--text-2);padding-bottom:17px;margin:0}

/* ---- Prose (long answer) --------------------------------------- */
.prose{max-width:760px;margin:0 auto}
.prose h3{margin-top:1.6em}
.prose p{color:var(--text-2)}

/* ---- CTA band --------------------------------------------------- */
.cta-band{background:var(--orange);color:var(--orange-ink);border-radius:var(--r-lg);padding:clamp(30px,5vw,52px);display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center;position:relative;overflow:hidden}
.cta-band h2{color:var(--orange-ink);margin:0 0 8px}
.cta-band p{color:rgba(23,18,15,.8);margin:0;font-size:1.08rem;font-weight:600}
.cta-band .actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.xtremehd-landing .cta-band .btn-ghost{color:var(--orange-ink);border-color:rgba(23,18,15,.45)}
.xtremehd-landing .cta-band .btn-ghost:hover{border-color:var(--orange-ink);color:var(--orange-ink)}
.xtremehd-landing .cta-band .btn-ink{background:var(--orange-ink);color:var(--cream)}
.xtremehd-landing .cta-band .btn-ink:hover{background:#000;color:#fff}
@media (max-width:860px){.cta-band{grid-template-columns:1fr}.cta-band .actions{justify-content:flex-start}}

/* ---- Footer ----------------------------------------------------- */
.site-foot{background:var(--bg-2);border-top:1px solid var(--line);padding:48px 0 96px;color:var(--text-2);font-size:.95rem}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr}}
.site-foot h4{margin:0 0 12px}
.site-foot ul{display:grid;gap:8px}
.site-foot a{color:var(--text-2)}
.site-foot .logo{margin-bottom:14px}
.site-foot .logo img{height:28px}
.foot-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.foot-btns .btn{padding:11px 18px;font-size:.92rem}
.post-hero{border-radius:var(--r);margin:10px 0 26px}
.card-img{border-radius:12px;margin-bottom:14px;aspect-ratio:16/9;object-fit:cover}
.pager{margin-top:30px;display:flex;justify-content:center;gap:14px}
.pager a,.pager span{padding:10px 16px;border-radius:var(--pill);border:1.5px solid var(--line-2);color:var(--text);font-weight:800}
.landing-content h1{font-size:clamp(2rem,4.4vw,3.2rem);margin-bottom:.6em}
.landing-content img{border-radius:var(--r-sm)}
.landing-content ol{padding-left:24px;margin:0 0 1.2em;display:grid;gap:8px;color:var(--text-2)}
.landing-content blockquote{border-left:4px solid var(--orange);margin:1.4em 0;padding:4px 0 4px 18px;color:var(--text-2)}
.landing-content table{width:100%;border-collapse:collapse;margin:1.2em 0;font-size:.95rem}
.landing-content th,.landing-content td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left}
.landing-content th{color:var(--text-3);font-size:.82rem;text-transform:uppercase;letter-spacing:.06em}
.foot-bottom{margin-top:32px;padding-top:18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--text-3);font-size:.88rem}

/* ---- Floating WhatsApp: round icon only -------------------------- */
.xtremehd-landing .wa-float,.wa-float{position:fixed;right:18px;bottom:18px;z-index:60;width:58px;height:58px;border-radius:50%;background:var(--orange);color:var(--orange-ink);border:2px solid var(--orange-ink);display:grid;place-items:center;text-decoration:none!important;transition:background .2s,transform .15s}
.xtremehd-landing .wa-float:hover,.wa-float:hover{background:var(--orange-2);transform:translateY(-2px)}
.wa-float svg{width:30px;height:30px}
.wa-float span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---- Forms ------------------------------------------------------ */
.form{display:grid;grid-template-columns:1fr 1fr;gap:14px;background:var(--surface);border:1.5px solid var(--line-2);border-radius:var(--r-lg);padding:28px}
@media (max-width:640px){.form{grid-template-columns:1fr}}
.form .full{grid-column:1/-1}
.form label{display:grid;gap:6px;font-weight:800;font-size:.92rem;color:var(--text)}
.form input,.form select,.form textarea{font:inherit;font-weight:600;padding:13px 15px;border:1.5px solid var(--line-2);border-radius:var(--r-sm);background:var(--bg);color:var(--text);width:100%}
.form input::placeholder{color:var(--text-3)}
.form select{color:var(--text)}
.form input:focus,.form select:focus,.form textarea:focus{outline:3px solid var(--orange-soft);border-color:var(--orange)}
.form-status{grid-column:1/-1;margin:0;font-weight:700;color:var(--orange);min-height:1.2em}
.form .fine{font-weight:600}

/* ---- Hand-off page --------------------------------------------- */
.handoff{min-height:70vh;display:grid;place-items:center;text-align:center;padding:60px 0}
.handoff .box{max-width:520px}
.dots::after{content:"";animation:dots 1.5s steps(4) infinite}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}

/* ---- Generic landing content (template-landing.php) ------------ */
.landing-content{max-width:800px;margin:0 auto}
.landing-content h2{margin-top:1.6em}
.landing-content p,.landing-content li{color:var(--text-2)}
.landing-content ul{list-style:disc;padding-left:24px;margin:0 0 1.2em;display:grid;gap:8px}
.landing-content li::marker{color:var(--orange)}
.landing-content h3{margin-top:1.3em}
.landing-content .lead{font-size:1.15rem;color:var(--text-2)}
.landing-content .fine{margin-bottom:2em}

/* ---- Blog / default GeneratePress pages: match the brand -------- */
body:not(.xtremehd-landing){font-family:var(--body);background:var(--bg);color:var(--text)}
body:not(.xtremehd-landing) h1,body:not(.xtremehd-landing) h2,body:not(.xtremehd-landing) h3{font-family:var(--display);color:var(--text)}
body:not(.xtremehd-landing) a{color:var(--orange)}
body:not(.xtremehd-landing) .site-header,body:not(.xtremehd-landing) .site-footer,body:not(.xtremehd-landing) .inside-article{background:var(--surface);color:var(--text)}

/* reviews page */
.rv-summary{display:inline-flex;align-items:center;gap:16px;margin:22px auto 0;background:var(--surface);border:1.5px solid var(--line-2);border-radius:var(--r);padding:14px 22px}
.rv-summary .rv-score{font-family:var(--display);font-weight:800;font-size:2.6rem;color:var(--orange);line-height:1}
.rv-summary .stars{display:flex;gap:2px;color:var(--yellow)}
.rv-summary .stars svg{width:20px;height:20px}
.form select{font:inherit;font-weight:600;padding:13px 15px;border:1.5px solid var(--line-2);border-radius:var(--r-sm);background:var(--bg);color:var(--text);width:100%}
/* blog images keep their ratio */
.card-img,.post-hero{width:100%;height:auto}
.xtremehd-landing .landing-content img{height:auto}
.post-hero{aspect-ratio:16/9;object-fit:cover}

/* ---- blog layout with sticky sidebar ---- */
.post-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:40px;align-items:start}
.post-main{min-width:0}
.post-main.landing-content{max-width:none}
.post-aside{position:sticky;top:92px}
.aside-stack{display:grid;gap:14px}
.aside-card{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);padding:20px 22px}
.aside-card h3{font-size:1.1rem;margin-bottom:6px}
.aside-card p{color:var(--text-2);font-size:.95rem;margin:0 0 14px}
.aside-card .btn{width:100%;padding:13px 18px;font-size:.95rem}
.aside-k{display:block;font-size:.74rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--orange);margin-bottom:8px}
.aside-trial{background:var(--orange);border-color:var(--orange);color:var(--orange-ink)}
.aside-trial .aside-k,.aside-trial h3,.aside-trial p{color:var(--orange-ink)}
.aside-trial p{opacity:.85}
.aside-price{display:flex;align-items:baseline;gap:8px;margin-bottom:12px}
.aside-price b{font-family:var(--display);font-size:1.6rem;color:var(--text)}
.aside-price span{color:var(--text-3);font-size:.85rem;font-weight:700}
.aside-list{display:grid;gap:7px;margin:0 0 16px;color:var(--text-2);font-size:.92rem}
.aside-list li{display:flex;gap:9px;align-items:center}
.aside-list li::before{content:"";width:16px;height:16px;border-radius:50%;flex:none;background:var(--orange-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.5 3.5 6.5-7.5' fill='none' stroke='%239b7cf6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat}
.aside-posts{display:grid;gap:10px;font-size:.92rem;font-weight:700}
.aside-posts a{color:var(--text-2)}
.aside-posts a:hover{color:var(--orange)}
.post-end{margin-top:40px;background:var(--surface);border:1.5px solid var(--line-2);border-radius:var(--r);padding:24px 26px}
.post-end h3{margin-bottom:4px}
.post-end p{margin:0 0 6px}
@media (max-width:960px){.post-layout{grid-template-columns:1fr}.post-aside{position:static}.aside-stack{grid-template-columns:1fr 1fr}.aside-card .btn{width:auto}}
@media (max-width:600px){.aside-stack{grid-template-columns:1fr}}
.post-section{overflow:visible}
.post-section > .wrap{z-index:auto}
.aside-card{padding:18px 20px}
.aside-posts{gap:8px;font-size:.9rem}

/* author */
.byline{display:flex;align-items:center;gap:10px;margin:-6px 0 22px;color:var(--text-3);font-weight:700;font-size:.92rem}
.byline img{width:40px;height:40px;border-radius:50%}
.byline a{color:var(--text)}
.author-box{display:grid;grid-template-columns:72px 1fr;gap:18px;align-items:start;background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);padding:22px 24px;margin-top:40px}
.author-box img{width:72px;height:72px;border-radius:50%}
.author-box h3{margin:0 0 6px;font-size:1.15rem}
.author-box h3 a{color:var(--text)}
.author-box h3 small{font-family:var(--body);font-size:.85rem;font-weight:700;color:var(--text-3)}
.author-box p{margin:0;color:var(--text-2);font-size:.95rem}
.author-head{display:flex;align-items:center;gap:22px;margin-bottom:22px}
.author-avatar{width:120px;height:120px;border-radius:50%;flex:none}
.author-head h1{font-size:clamp(2rem,4vw,2.8rem);margin:0}
.author-role{color:var(--text-3);font-weight:700;margin:4px 0 0}
.author-bio p{font-size:1.05rem}
@media (max-width:560px){.author-head{flex-direction:column;align-items:flex-start}.author-box{grid-template-columns:1fr}}

/* ---- v2: white text on every blue surface ---- */
.xtremehd-landing .btn-primary,.btn-primary,.xtremehd-landing .btn-primary:hover,.btn-primary:hover{color:#fff}
.ticker{color:#fff}
.screen-opt.is-active{color:#fff}
.tier .badge{color:#fff}
.hl{color:#fff}
.pl-tile.on,.pl-tile.on .pl-ico{color:#fff}
.pl-live{background:#fff;color:var(--orange-ink)}
.cta-band,.cta-band h2{color:#fff}
.cta-band p{color:rgba(255,255,255,.88)}
.xtremehd-landing .cta-band .btn-ghost{color:#fff;border-color:rgba(255,255,255,.6)}
.xtremehd-landing .cta-band .btn-ghost:hover{border-color:#fff;color:#fff}
.xtremehd-landing .cta-band .btn-ink{background:var(--orange-ink);color:#fff}
.screen-select{flex-wrap:wrap;justify-content:center}

/* ---- (older layer, recoloured) ---- */
.logo img{height:30px}
@media (max-width:860px){.logo img{height:26px}}
.site-foot .logo img{height:28px}
.site-top{background:rgba(21,17,32,.92);}
.xtremehd-landing .btn-primary,.btn-primary{background:linear-gradient(135deg,#9b7cf6 0%,#b394ff 100%);box-shadow:var(--glow)}
.xtremehd-landing .btn-primary:hover,.btn-primary:hover{background:linear-gradient(135deg,#b394ff 0%,#c9b8ff 100%);box-shadow:none;transform:translateY(-1px)}
.xtremehd-landing .btn-ghost,.btn-ghost{border-color:rgba(155,124,246,.45)}
.xtremehd-landing .btn-ghost:hover,.btn-ghost:hover{border-color:var(--orange-2);color:#fff;background:rgba(155,124,246,.12)}
.xtremehd-landing .btn-wa,.btn-wa{background:rgba(155,124,246,.12);color:#fff;border-color:rgba(155,124,246,.5)}
.xtremehd-landing .btn-wa:hover,.btn-wa:hover{background:var(--orange);color:#fff;border-color:var(--orange)}
.hero{background:var(--bg);background-image:radial-gradient(60% 60% at 85% 10%,rgba(155,124,246,.28) 0%,transparent 60%),radial-gradient(45% 45% at 10% 95%,rgba(41,34,61,.35) 0%,transparent 60%),var(--pat-dots);background-size:auto,auto,26px 26px}
.hero.has-bg{background:var(--bg);background-image:radial-gradient(60% 60% at 85% 10%,rgba(155,124,246,.28) 0%,transparent 60%),radial-gradient(45% 45% at 10% 95%,rgba(41,34,61,.35) 0%,transparent 60%),var(--pat-dots);background-size:auto,auto,26px 26px;min-height:auto}
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero-bg i{position:absolute;border-radius:50%;opacity:.55}
.hero-bg i:nth-child(1){width:520px;height:520px;right:-120px;top:-160px;background:#9b7cf6}
.hero-bg i:nth-child(2){width:420px;height:420px;left:-160px;bottom:-200px;background:#29223d}
.hero-bg::after{content:none}
.hero .wrap{position:relative;z-index:1}
.hero-visual{position:relative;display:flex;justify-content:center;perspective:1200px}
.hero-visual img{width:100%;max-width:600px;height:auto;border-radius:var(--r);border:1px solid rgba(155,124,246,.35);box-shadow:none;transform:rotateY(-7deg) rotateX(3deg);transition:transform .6s var(--ease)}
.hero-visual:hover img{transform:rotateY(0) rotateX(0)}
@media (max-width:860px){.hero-visual img{transform:none;max-width:520px}}
.hero-badges .hb{border-color:rgba(155,124,246,.4);color:var(--text-2)}
.hero-badges .hb-trial{background:rgba(155,124,246,.14);color:#c9b8ff;border-color:rgba(155,124,246,.5)}
.hero h1 .soft{background:linear-gradient(90deg,#c9b8ff,#6da8fb);-webkit-background-clip:text;background-clip:text;color:transparent}
.soft{color:#c9b8ff}
.kicker{color:#c9b8ff}
.kicker::before{background:#c9b8ff}
.ticker{background:linear-gradient(90deg,#9b7cf6,#ee8cf1 60%,#6da8fb);color:#fff}
.band,.band-deep{background:var(--bg-2)}
.card,.tier,.step,.review,.device,.callout,.form,.faq details,.aside-card,.author-box,.compare-wrap{background:linear-gradient(145deg,rgba(41,34,61,.6) 0%,rgba(26,21,39,.85) 100%);border-color:rgba(155,124,246,.18)}
.card:hover,.device:hover{border-color:rgba(155,124,246,.45);box-shadow:var(--glow)}
.card .ico{background:rgba(155,124,246,.16);color:#c9b8ff}
.tier.best{border-color:rgba(155,124,246,.6);box-shadow:var(--glow)}
.tier .badge{background:linear-gradient(135deg,#9b7cf6,#ee8cf1)}
.screen-opt.is-active{background:linear-gradient(135deg,#9b7cf6,#ee8cf1);box-shadow:var(--glow)}
.step .num{background:linear-gradient(135deg,#9b7cf6,#ee8cf1);color:#fff}
.cta-band{background:linear-gradient(135deg,#9b7cf6 0%,#ee8cf1 55%,#6da8fb 100%);box-shadow:var(--glow)}
.xtremehd-landing .cta-band .btn-ink{background:#151120;color:#fff}
.xtremehd-landing .cta-band .btn-ink:hover{background:#201a2f;color:#fff}
.hl{background:linear-gradient(135deg,#9b7cf6,#ee8cf1);color:#fff}
.chips span,.chips a span{border-color:rgba(155,124,246,.3)}
.compare th.us,.compare td.us{background:rgba(155,124,246,.12)}
.wa-float{box-shadow:0 10px 30px rgba(0,0,0,.4),0 0 24px rgba(37,211,102,.25)}
.site-foot{background:rgba(21,17,32,.6);border-top:1px solid rgba(155,124,246,.15)}
.xtremehd-landing h1,.xtremehd-landing h2{letter-spacing:-.02em}

/* ---- art panels: a touch of glow behind the inline SVGs ---- */
.split .art svg{filter:none)}

/* ---- v3: clean hero (no dot pattern, no fades), transparent header on the home page ---- */
.hero,.hero.has-bg,.hero.has-globe{background:var(--bg);background-image:none}
.hero.has-globe .hero-bg{display:none}
.globe-bg{top:50%;right:-10%;width:min(70vw,1100px);transform:translateY(-44%)}
@media (max-width:1100px){.globe-bg{width:min(76vw,820px);right:-22%}}
.home .site-top{position:fixed;top:0;left:0;right:0;background:transparent;border-bottom:1px solid transparent;transition:background .3s ease,border-color .3s ease}
.home .site-top.scrolled{background:rgba(21,17,32,.92);border-bottom-color:var(--line);}
.home .hero.has-globe{padding-top:calc(76px + clamp(36px,6vw,80px))}
@media (max-width:860px){.home .site-top{background:rgba(21,17,32,.92)}}

/* ---- (older layer) ---- */
.xtremehd-landing h1{letter-spacing:-.02em}
.hero-stars{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-stars svg{width:100%;height:100%;display:block}
.hero-stars .tw{animation:twinkle 3.2s ease-in-out infinite alternate}
.hero-stars .tw2{animation-duration:4.6s;animation-delay:-1.7s}
.hero-stars .tw3{animation-duration:5.4s;animation-delay:-3.1s}
@keyframes twinkle{from{opacity:.25}to{opacity:1}}
@media (max-width:860px){.globe-bg{top:46%;bottom:auto;right:-78vw;width:160vw;transform:translateY(-50%);opacity:.9}}
/* v4 tune: give the player more of the hero width; mobile globe arcs in from the right edge */
.hero.has-globe .wrap{gap:clamp(1.5rem,3vw,3rem);padding-right:max(var(--gutter),calc((100% - var(--maxw)) / 2))}
.hero.has-globe .wrap > div:first-child{flex:0 1 500px;max-width:500px}
.hero-player{max-width:720px}
@media (max-width:860px){.globe-bg{right:-72vw;opacity:1}}
/* ---- v5: hero = the app home screen (parts/hero-stack.php), Pilot/wildbreed style, bleeding off the right edge ---- */
.hero.has-globe .wrap{padding-right:0;gap:clamp(2rem,4vw,4.5rem)}
.hero.has-globe .wrap > div:first-child{flex:0 1 540px;max-width:540px}
.hero-stack{z-index:1}
.player{background:radial-gradient(70% 90% at 85% 100%,rgba(155,124,246,.26),transparent 70%),linear-gradient(180deg,rgba(32,26,47,.9) 0%,rgba(21,17,32,.94) 100%);border-color:rgba(155,124,246,.4);box-shadow:none}
.pl-tile{background:rgba(155,124,246,.1);border-color:rgba(155,124,246,.3)}
.pl-tile.on{background:var(--orange);border-color:var(--orange);color:#fff}
.pl-tile.on .pl-ico{color:#fff}
.pl-live{background:#fff;color:#14101f}
.pl-btn{border-color:rgba(155,124,246,.5);color:#c9b8ff}
.pl-date{color:var(--text-3)}
@media (max-width:860px){.hero.has-globe .wrap{padding-right:var(--gutter)}.hero-stack .player{border-radius:16px;border-right:1px solid rgba(155,124,246,.4)}}
.pl-live{white-space:nowrap;letter-spacing:.1em}
@media (max-width:860px){.pl-live{font-size:.55rem;padding:3px 8px;letter-spacing:.08em}}

/* =============================================================
   XTREMEHD layer: dusk palette, the brand gradient, the diagonal
   ============================================================= */

/* ---- base ---- */
body.xtremehd-landing{background:var(--bg);color:var(--text);font-size:17px}
.xtremehd-landing h1,.xtremehd-landing h2,.xtremehd-landing h3,.xtremehd-landing h4,body:not(.xtremehd-landing) h1,body:not(.xtremehd-landing) h2,body:not(.xtremehd-landing) h3{font-family:var(--display);color:var(--text);letter-spacing:-.025em}
.xtremehd-landing h1{font-weight:800;letter-spacing:-.035em;line-height:1.02}
.xtremehd-landing h2{font-weight:800;letter-spacing:-.03em}
.xtremehd-landing h3{font-weight:700;letter-spacing:-.02em}
body h2.h3{font-size:1.28rem;font-weight:700;letter-spacing:-.02em;max-width:none;margin:0 0 .45em}
.xtremehd-landing a{color:var(--orange-2)}
.kicker,.kicker::before{color:var(--pink);background:none}
.kicker::before{background:var(--grad)}
.soft,.hero h1 .soft{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:inherit}
.hl{background:var(--grad);color:var(--orange-ink)}
.ul{text-decoration-color:var(--pink)}
.lead{color:var(--text-2)}
.fine{color:var(--text-3)}
.band,.band-deep{background:var(--bg-2);border-color:var(--line)}
.section,.hero{overflow:visible}
.card,.step,.review,.device,.callout,.form,.faq details,.aside-card,.author-box,.compare-wrap,.post-end,.multi,.rv-summary,.compare{background:var(--surface);border-color:var(--line);box-shadow:none}
.card:hover,.device:hover{border-color:rgba(155,124,246,.55);box-shadow:none}
.card .ico{background:var(--orange-soft);color:var(--orange-2)}
.num,.step .num{background:var(--grad);color:var(--orange-ink)}
.checks svg,.hero-proof svg{color:var(--pink)}
.chips span,.chips a span{background:var(--surface);border-color:var(--line-2);color:var(--text)}
.compare thead th{background:var(--surface-2);color:var(--text-3)}
.compare thead th.us{color:var(--pink)}
.compare td.us,.compare th.us{background:rgba(155,124,246,.1)}
.stars,.rv-summary .stars{color:var(--yellow)}
.faq summary::after{background:var(--orange-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 5v10M5 10h10' stroke='%23c9b8ff' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/14px no-repeat}
.prose p,.landing-content p,.landing-content li{color:var(--text-2)}
.landing-content li::marker{color:var(--pink)}

/* ---- buttons: the gradient with dark text; everything else quiet ---- */
.xtremehd-landing .btn-primary,.btn-primary,.xtremehd-landing .btn-primary:hover,.btn-primary:hover{background:var(--grad);color:var(--orange-ink);border-color:transparent;box-shadow:none}
.xtremehd-landing .btn-primary:hover,.btn-primary:hover{filter:brightness(1.07);transform:translateY(-1px)}
.xtremehd-landing .btn-ghost,.btn-ghost{background:transparent;color:var(--text);border-color:var(--line-2)}
.xtremehd-landing .btn-ghost:hover,.btn-ghost:hover{border-color:var(--orange-2);color:#fff;background:var(--orange-soft)}
.xtremehd-landing .btn-ink,.btn-ink{background:var(--cream);color:var(--orange-ink)}
.xtremehd-landing .btn-ink:hover,.btn-ink:hover{background:#fff;color:var(--orange-ink)}
.xtremehd-landing .btn-wa,.btn-wa{background:transparent;color:var(--text);border-color:rgba(155,124,246,.5)}
.xtremehd-landing .btn-wa:hover,.btn-wa:hover{background:var(--orange-soft);color:#fff;border-color:var(--orange-2)}
.screen-select{background:var(--surface);border-color:var(--line-2)}
.screen-opt{color:var(--text-2)}
.screen-opt:hover{color:var(--text)}
.screen-opt.is-active{background:var(--grad)!important;color:var(--orange-ink)!important;box-shadow:none}

/* ---- header: sticky everywhere, see-through on the home page until it scrolls ---- */
.site-top,.home .site-top{position:sticky;top:0;background:rgba(21,17,32,.96);border-bottom:1px solid var(--line)}
.home .site-top{background:transparent;border-bottom-color:transparent;transition:background .3s ease,border-color .3s ease}
.home .site-top.scrolled{background:rgba(21,17,32,.96);border-bottom-color:var(--line)}
.home .hero.has-bg{padding-top:clamp(28px,5vw,64px)}
.logo img{height:32px}
@media (max-width:860px){.logo img{height:27px}.nav{background:var(--bg)}}
.nav > a{color:var(--text-2);font-weight:600}
.nav > a:hover{color:var(--text)}
.nav .btn{color:var(--orange-ink)}

/* ---- hero with the diagonal cut ---- */
.hero.xh{position:relative;z-index:2;isolation:isolate;background:#171222;background-image:radial-gradient(60% 70% at 88% 8%,rgba(238,140,241,.22) 0%,transparent 60%),radial-gradient(50% 60% at 6% 100%,rgba(109,168,251,.18) 0%,transparent 60%);clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),0 100%);padding-bottom:calc(clamp(32px,5vw,64px) + var(--cut))}
.xh-mark{position:absolute;z-index:0;pointer-events:none;right:-8%;top:-14%;width:min(58vw,760px);aspect-ratio:1;background:url('../img/mark-x.svg?v=2') center/contain no-repeat;opacity:.06}
.hero.xh .wrap{position:relative;z-index:1}
.hero.xh h1{max-width:12ch}
.hero.xh .lead{max-width:54ch}
.hero-proof{color:var(--text-2)}
@media (max-width:860px){.hero.xh h1{max-width:none}.xh-mark{width:90vw;right:-30%;top:auto;bottom:-10%;opacity:.05}}

/* the app home screen in the hero, recoloured */
.player{border:1px solid rgba(155,124,246,.35);background:linear-gradient(180deg,rgba(32,26,47,.92) 0%,rgba(21,17,32,.96) 100%);box-shadow:0 30px 70px rgba(0,0,0,.45)}
.pl-tile{background:rgba(155,124,246,.08);border-color:rgba(155,124,246,.25)}
.pl-tile.on{background:var(--grad);border-color:transparent;color:var(--orange-ink)}
.pl-tile.on .pl-ico{color:var(--orange-ink)}
.pl-live{background:#fff;color:#14101f}
.pl-btn{border-color:rgba(155,124,246,.45);color:var(--orange-2)}
.pl-time{color:var(--text)}

/* ---- poster ribbon under the hero, on the same tilt ---- */
.ribbon{position:relative;z-index:1;margin-top:calc(-1 * var(--cut) - 2px);padding:calc(var(--cut) + 18px) 0 26px;overflow:hidden;background:var(--bg)}
.ribbon-track{display:flex;width:max-content;transform:rotate(-2.6deg) translateX(-2%);transform-origin:center;animation:tick 70s linear infinite;padding:14px 0;background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ribbon-track span{display:flex;gap:14px;padding:0 7px}
.ribbon-track img{width:clamp(88px,10vw,140px);height:auto;border-radius:10px;border:1px solid var(--line-2);flex:none;opacity:.92}
@media (max-width:860px){.ribbon{padding-top:calc(var(--cut) + 10px)}.ribbon-track{animation-duration:45s}}
@media (prefers-reduced-motion:reduce){.ribbon-track{animation:none}}

/* ---- welcome back box ---- */
.renew{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,56px);align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(24px,4vw,44px)}
.renew-copy h2{margin-bottom:.5em}
.renew-copy p{color:var(--text-2)}
.renew-form{background:var(--bg);border-color:var(--line-2)}
@media (max-width:900px){.renew{grid-template-columns:1fr}}

/* ---- plans: light cards, four across ---- */
.tiers.tiers-4{grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:1040px){.tiers.tiers-4{grid-template-columns:1fr 1fr;max-width:none}}
@media (max-width:620px){.tiers.tiers-4{grid-template-columns:1fr;max-width:460px;margin:0 auto}}
.tier{background:var(--paper);color:var(--paper-ink);border:1px solid var(--paper-line);border-radius:var(--r-lg);padding:30px 22px 22px;box-shadow:none}
.tier:hover{transform:translateY(-3px)}
.tier.best{border:2px solid transparent;background:linear-gradient(var(--paper),var(--paper)) padding-box,var(--grad) border-box;box-shadow:none}
.tier .badge{background:var(--grad);color:var(--orange-ink);top:-14px}
.tier:not(.best) .badge{visibility:hidden}
.tier h3,.tier-price .amt{color:var(--paper-ink)}
.tier-price .amt{font-size:2.5rem}
.tier-price .was{color:var(--paper-2);font-weight:600;font-size:1.15rem;margin-right:6px;text-decoration-thickness:2px}
.tier-price .per,.tier-sub{color:var(--paper-2)}
.tier-save{background:rgba(238,140,241,.18);color:#8a1f8e}
.tier-specs{color:#3e3852}
.tier-specs li::before{background:rgba(155,124,246,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.5 3.5 6.5-7.5' fill='none' stroke='%236b3fe6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.tier-secure{color:#15803d}
.tier-secure::before{background:rgba(21,128,61,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.5 3.5 6.5-7.5' fill='none' stroke='%2315803d' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat}
.tier-guard span{background:rgba(255,201,77,.22);color:#7a5200}
.tier-guard span::before{background:#e0a800 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 3l5.5 2v5c0 3.6-2.3 6.3-5.5 7.5C6.8 16.3 4.5 13.6 4.5 10V5z' fill='%231a1527'/%3E%3Cpath d='M7.5 10.3l1.8 1.8 3.4-3.6' fill='none' stroke='%23ffc94d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.xtremehd-landing .tier .btn-ink,.tier .btn-ink{background:var(--paper-ink);color:#fff}
.xtremehd-landing .tier .btn-ink:hover,.tier .btn-ink:hover{background:#000;color:#fff}
.tier .btn-primary{color:var(--orange-ink)}
.tier .btn{padding:14px 18px;font-size:.95rem}

/* ---- what's on: tilted poster mosaic ---- */
.mosaic{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;transform:rotate(-4deg);padding:12px}
.mosaic img{width:100%;height:auto;border-radius:12px;border:1px solid var(--line-2);box-shadow:0 20px 40px rgba(0,0,0,.35)}
.mosaic img:nth-child(2),.mosaic img:nth-child(5){transform:translateY(-14px)}
.mosaic img:nth-child(3),.mosaic img:nth-child(6){transform:translateY(10px)}
@media (max-width:860px){.mosaic{max-width:420px;margin:0 auto}}

/* ---- final band with the diagonal ---- */
.cta-band{background:var(--grad);color:var(--orange-ink);box-shadow:none;border-radius:0;clip-path:polygon(0 0,100% 10%,100% 100%,0 90%);padding:clamp(48px,7vw,80px) clamp(26px,5vw,64px)}
.cta-band,.cta-band h2{color:var(--orange-ink)}
.cta-band p{color:rgba(20,16,31,.78)}
.xtremehd-landing .cta-band .btn-ink{background:var(--orange-ink);color:#fff}
.xtremehd-landing .cta-band .btn-ink:hover{background:#000;color:#fff}
.xtremehd-landing .cta-band .btn-ghost{color:var(--orange-ink);border-color:rgba(20,16,31,.45);background:transparent}
.xtremehd-landing .cta-band .btn-ghost:hover{border-color:var(--orange-ink);background:rgba(255,255,255,.25);color:var(--orange-ink)}
#join{padding-top:0}
@media (max-width:860px){.cta-band{clip-path:polygon(0 0,100% 4%,100% 100%,0 96%)}}

/* ---- offer bar ---- */
.offer-bar{background:var(--grad);color:var(--orange-ink);font-weight:600;font-size:.92rem}
.offer-bar .wrap{display:flex;align-items:center;gap:14px;min-height:44px;padding-top:7px;padding-bottom:7px;flex-wrap:wrap}
.ob-tag{font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:4px 9px;border-radius:var(--pill);background:rgba(20,16,31,.9);color:#fff}
.ob-code{display:inline-block;padding:2px 10px;border:2px dashed rgba(20,16,31,.6);border-radius:8px;font-weight:800;letter-spacing:.08em;cursor:pointer;margin:0 2px}
.ob-until{opacity:.8}
.ob-cta{margin-left:auto;display:inline-flex;align-items:center;gap:6px;color:var(--orange-ink);font-weight:800;text-decoration:underline;text-underline-offset:3px}
.ob-cta svg{width:16px;height:16px}
.ob-close{background:none;border:0;font-size:1.5rem;line-height:1;color:var(--orange-ink);cursor:pointer;padding:0 2px}
@media (max-width:640px){.ob-cta{margin-left:0}}

/* ---- sticky bottom bar on phones ---- */
.sticky-bar{display:none}
@media (max-width:760px){
  .sticky-bar{position:fixed;left:0;right:0;bottom:0;z-index:55;display:flex;gap:10px;padding:10px var(--gutter);background:rgba(21,17,32,.97);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .3s var(--ease)}
  .sticky-bar.on{transform:none}
  .sticky-bar .btn{flex:1;padding:13px 14px;font-size:.95rem}
  .sticky-bar.on ~ .wa-float{display:none}
}

/* ---- slide-in panel ---- */
.slidein{position:fixed;right:18px;bottom:90px;z-index:58;width:min(330px,calc(100vw - 36px));background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);padding:20px 20px 18px;transform:translateX(130%);transition:transform .45s var(--ease);box-shadow:0 24px 60px rgba(0,0,0,.45)}
.slidein.on{transform:none}
.si-close{position:absolute;right:10px;top:8px;background:none;border:0;color:var(--text-3);font-size:1.4rem;line-height:1;cursor:pointer}
.si-k{display:block;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--pink);margin-bottom:6px}
.si-title{display:block;font-family:var(--display);font-weight:800;font-size:1.15rem;letter-spacing:-.02em;margin-bottom:6px}
.slidein p{color:var(--text-2);font-size:.95rem;margin:0 0 14px}
.si-code{display:inline-block;padding:1px 8px;border:2px dashed var(--line-2);border-radius:6px;cursor:pointer;color:var(--text)}
.slidein .btn{width:100%;padding:13px 16px;font-size:.95rem}
@media (max-width:760px){.slidein{right:12px;left:12px;width:auto;bottom:84px}}

/* ---- floating WhatsApp ---- */
.xtremehd-landing .wa-float,.wa-float{background:var(--wa);color:#fff;border:0;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.xtremehd-landing .wa-float:hover,.wa-float:hover{background:var(--wa-2)}

/* ---- footer ---- */
.site-foot{background:var(--bg-2);border-top:1px solid var(--line);color:var(--text-2)}
.site-foot .foot-h{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.16em;color:var(--text-3);margin:0 0 12px;line-height:1.1}
.site-foot a{color:var(--text-2)}
.site-foot a:hover{color:var(--text)}
.foot-bottom{color:var(--text-3)}

/* ---- forms ---- */
.form{background:var(--surface);border-color:var(--line)}
.form input,.form select,.form textarea{background:var(--bg);border-color:var(--line-2);color:var(--text)}
.form input:focus,.form select:focus,.form textarea:focus{outline:3px solid var(--orange-soft);border-color:var(--orange)}
.form-status{color:var(--pink)}

/* ---- blog sidebar ---- */
.aside-trial{background:var(--surface);border-color:var(--line-2);color:var(--text)}
.aside-trial .aside-k{color:var(--pink)}
.aside-trial h3,.aside-trial h2{color:var(--text)}
.aside-trial p{color:var(--text-2);opacity:1}
.aside-k{color:var(--pink)}
.aside-list li::before{background:var(--orange-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.5 3.5 6.5-7.5' fill='none' stroke='%23c9b8ff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat}
.rv-summary .rv-score{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* v2: the diagonal needs a lighter band beneath it; posters sit right under the cut */
.hero.xh{background:#19132a;background-image:radial-gradient(60% 70% at 88% 8%,rgba(238,140,241,.22) 0%,transparent 60%),radial-gradient(50% 60% at 6% 100%,rgba(109,168,251,.16) 0%,transparent 60%)}
.ribbon{background:linear-gradient(180deg,#2a2240 0%,#1a1527 70%);padding:calc(var(--cut) * .55) 0 22px}
.ribbon-track{background:transparent;border:0;padding:6px 0}
.ribbon-track img{opacity:1;box-shadow:0 14px 30px rgba(0,0,0,.35)}
.xh-mark{opacity:.07;right:-4%;top:-6%;width:min(44vw,600px)}
@media (max-width:860px){.ribbon{padding-top:calc(var(--cut) * .4)}.xh-mark{width:70vw;right:-20%;top:auto;bottom:0}}
/* v2b: band copy darker for contrast */
.cta-band p{color:rgba(20,16,31,.9)}
/* hidden form rows stay hidden */
.form label[hidden],.form [hidden]{display:none!important}

/* ===== v3 (his feedback): no tilt, no crop, no white plan cards, clean gradient buttons ===== */

/* gradient fills: paint under the border too, so no pale seams at the edges */
.xtremehd-landing .btn-primary,.btn-primary,.screen-opt.is-active,.tier .badge,.hl,.num,.step .num,.pl-tile.on,.offer-bar,.cta-band{background-origin:border-box}
.xtremehd-landing .btn-primary,.btn-primary,.nav .btn{border-color:transparent}

/* poster ribbon: straight, full posters, soft fade at the sides */
.ribbon{margin-top:calc(-1 * var(--cut) - 2px);padding:calc(var(--cut) + 22px) 0 34px;overflow:hidden;background:linear-gradient(180deg,#241c36 0%,#1a1527 100%)}
.ribbon-track{transform:none;padding:0;background:transparent;border:0}
.ribbon-track span{gap:16px;padding:0 8px}
.ribbon-track img{width:clamp(110px,11vw,156px);aspect-ratio:2/3;height:auto;object-fit:cover;border-radius:12px;border:1px solid var(--line-2);box-shadow:0 12px 26px rgba(0,0,0,.35);opacity:1}
.ribbon{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%)}
@media (max-width:860px){.ribbon{padding:calc(var(--cut) + 14px) 0 26px}.ribbon-track span{gap:12px;padding:0 6px}}

/* what's on mosaic: straight */
.mosaic{transform:none}

/* plans: dark cards like the rest of the site; the 12-month card keeps the gradient border */
.tier{background:var(--surface);color:var(--text);border:1px solid var(--line)}
.tier.best{border:2px solid transparent;background:linear-gradient(var(--surface-2),var(--surface-2)) padding-box,var(--grad) border-box}
.tier h3,.tier-price .amt{color:var(--text)}
.tier-price .was{color:var(--text-3)}
.tier-price .per,.tier-sub{color:var(--text-2)}
.tier-save{background:rgba(238,140,241,.16);color:#f5b8f7}
.tier-specs{color:var(--text-2)}
.tier-specs li::before{background:var(--orange-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.5 3.5 6.5-7.5' fill='none' stroke='%23c9b8ff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.tier-secure{color:#5fd38a}
.tier-secure::before{background:rgba(95,211,138,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.5 3.5 6.5-7.5' fill='none' stroke='%235fd38a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat}
.tier-guard span{background:rgba(255,201,77,.12);color:#ffd77a}
.tier-guard span::before{background:#ffc94d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 3l5.5 2v5c0 3.6-2.3 6.3-5.5 7.5C6.8 16.3 4.5 13.6 4.5 10V5z' fill='%231a1527'/%3E%3Cpath d='M7.5 10.3l1.8 1.8 3.4-3.6' fill='none' stroke='%23ffc94d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.xtremehd-landing .tier .btn-ink,.tier .btn-ink{background:transparent;color:var(--text);border:1px solid var(--line-2)}
.xtremehd-landing .tier .btn-ink:hover,.tier .btn-ink:hover{background:var(--orange-soft);border-color:var(--orange-2);color:#fff}

/* final band: a plain rounded rectangle */
.cta-band{clip-path:none!important;border-radius:var(--r-lg);padding:clamp(30px,5vw,52px)}
#join{padding-top:calc(var(--sy) * .5)}

/* ===== v4: night sky + aurora. Cool night base instead of plum, sky blue as the second accent, aurora in three places only ===== */
:root{
  --bg:#090a14; --bg-2:#0d0f1d; --surface:#131628; --surface-2:#191d33;
  --text:#eef0fa; --text-2:#b5bbd4; --text-3:#878da9;
  --line:#22263c; --line-2:#323854;
  --sky:#8ebcff; --sky-soft:rgba(109,168,251,.15);
}
body.xtremehd-landing,body:not(.xtremehd-landing){background:var(--bg)}

/* hero: no diagonal; the aurora behind it, a dark wash on the left keeps the copy crisp; the X stays */
.hero.xh{clip-path:none!important;padding-bottom:clamp(40px,6vw,80px);background:#090a14}
.hero.xh::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,rgba(9,10,20,.78) 0%,rgba(9,10,20,.45) 38%,rgba(9,10,20,0) 62%),linear-gradient(180deg,rgba(9,10,20,0) 70%,var(--bg) 100%)}
.xh-mark{z-index:0;opacity:.09}
.hero.xh .wrap{z-index:1}
.player{background:linear-gradient(180deg,rgba(19,22,40,.9) 0%,rgba(9,10,20,.94) 100%);border-color:rgba(155,124,246,.3)}
.pl-tile{background:rgba(255,255,255,.04);border-color:rgba(155,124,246,.22)}

/* poster row: sits straight under the hero */
.ribbon{margin-top:0;padding:30px 0 34px;background:var(--bg)}
@media (max-width:860px){.ribbon{padding:22px 0 26px}}

/* header */
.home .site-top{background:transparent}
.site-top,.home .site-top.scrolled{background:rgba(9,10,20,.94);border-bottom-color:var(--line)}
.home .site-top{border-bottom-color:transparent}
@media (max-width:860px){.home .site-top{background:rgba(9,10,20,.94)}}

/* sky blue (the logo gradient's blue end) for the "you get this" signals: kickers, checks, savings, secure */
.kicker{color:var(--sky)}
.kicker::before{background:var(--sky)}
.checks svg,.hero-proof svg{color:var(--sky)}
.card .ico{background:var(--sky-soft);color:var(--sky)}
.tier-specs li::before{background:var(--sky-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.5 3.5 6.5-7.5' fill='none' stroke='%238ebcff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.tier-save{background:var(--sky-soft);color:var(--sky)}
.aside-k,.si-k,.ob-tag{color:var(--sky)}
.ob-tag{color:#fff}
.landing-content li::marker{color:var(--sky)}

/* plans: the second aurora behind the cards; cards a touch see-through so it shows */
#plans{background:var(--bg)}
#plans .sec-head .lead{color:var(--text-2)}
.tier{background:rgba(19,22,40,.88)}
.tier.best{background:linear-gradient(rgba(25,29,51,.95),rgba(25,29,51,.95)) padding-box,var(--grad) border-box}

/* cards and bands on the new night palette */
.card,.step,.review,.device,.callout,.form,.faq details,.aside-card,.author-box,.compare-wrap,.post-end,.multi,.rv-summary,.compare,.renew,.slidein{background:var(--surface);border-color:var(--line)}
.renew-form,.form input,.form select,.form textarea{background:var(--bg)}
.band,.band-deep{background:var(--bg-2);border-color:var(--line)}
.compare thead th{background:var(--surface-2)}
.compare td.us,.compare th.us{background:rgba(109,168,251,.07)}
.compare thead th.us{color:var(--sky)}
.chips span,.chips a span{background:var(--surface);border-color:var(--line-2)}
.site-foot{background:var(--bg-2)}
.sticky-bar{background:rgba(9,10,20,.97)}

/* final band: the third aurora, white copy */
.cta-band{background:#090a14;color:#fff;border:1px solid var(--line-2)}
.cta-band h2{color:#fff}
.cta-band p{color:var(--text-2)}
.xtremehd-landing .cta-band .btn-ink{background:var(--grad);color:var(--orange-ink);border-color:transparent;background-origin:border-box}
.xtremehd-landing .cta-band .btn-ink:hover{background:var(--grad);filter:brightness(1.07);color:var(--orange-ink)}
.xtremehd-landing .cta-band .btn-ghost{color:#fff;border-color:rgba(255,255,255,.4);background:rgba(9,10,20,.35)}
.xtremehd-landing .cta-band .btn-ghost:hover{border-color:#fff;background:rgba(9,10,20,.55);color:#fff}
/* v4b: let the aurora show: lower curtain, lighter wash, the app screen lets the light through */
.hero.xh{background-position:62% 78%}
.hero.xh::before{background:linear-gradient(90deg,rgba(9,10,20,.62) 0%,rgba(9,10,20,.3) 34%,rgba(9,10,20,0) 52%),linear-gradient(180deg,rgba(9,10,20,0) 78%,var(--bg) 100%)}
.player{background:linear-gradient(180deg,rgba(19,22,40,.62) 0%,rgba(9,10,20,.7) 100%)}
.pl-tile{background:rgba(9,10,20,.35)}
/* v4c: hero aurora composed for the right half */
.hero.xh{background-position:70% 55%}
.hero.xh::before{background:linear-gradient(90deg,rgba(9,10,20,.5) 0%,rgba(9,10,20,.15) 36%,rgba(9,10,20,0) 50%),linear-gradient(180deg,rgba(9,10,20,0) 80%,var(--bg) 100%)}
@media (max-width:860px){.hero.xh{background-position:78% 100%;background-size:auto 70%}.hero.xh::before{background:linear-gradient(180deg,rgba(9,10,20,.55) 0%,rgba(9,10,20,.2) 45%,rgba(9,10,20,0) 70%,var(--bg) 100%)}}
.cta-band{background:linear-gradient(90deg,rgba(9,10,20,.82) 0%,rgba(9,10,20,.55) 42%,rgba(9,10,20,.1) 72%),#090a14}
@media (max-width:860px){.cta-band{background:linear-gradient(180deg,rgba(9,10,20,.85) 0%,rgba(9,10,20,.55) 60%,rgba(9,10,20,.2) 100%),#090a14}}

/* ===== v5: aurora removed (his call). Plain night everywhere; the X watermark stays ===== */
.hero.xh{background:var(--bg)!important;background-image:none!important}
.hero.xh::before{content:none}
.xh-mark{opacity:.09}
.player{background:linear-gradient(180deg,var(--surface-2) 0%,var(--surface) 100%);border-color:rgba(155,124,246,.3)}
.pl-tile{background:rgba(255,255,255,.03)}
#plans{background:var(--bg)!important;background-image:none!important}
.tier{background:var(--surface)}
.tier.best{background:linear-gradient(var(--surface-2),var(--surface-2)) padding-box,var(--grad) border-box}
.cta-band,.cta-band[class]{background:var(--grad)!important;background-origin:border-box!important;color:var(--orange-ink);border:0}
.cta-band h2{color:var(--orange-ink)}
.cta-band p{color:rgba(20,16,31,.9)}
.xtremehd-landing .cta-band .btn-ink{background:var(--orange-ink);color:#fff;border-color:transparent;filter:none}
.xtremehd-landing .cta-band .btn-ink:hover{background:#000;color:#fff;filter:none}
.xtremehd-landing .cta-band .btn-ghost{color:var(--orange-ink);border-color:rgba(20,16,31,.45);background:transparent}
.xtremehd-landing .cta-band .btn-ghost:hover{border-color:var(--orange-ink);background:rgba(255,255,255,.25);color:var(--orange-ink)}

/* ===== v6: photo hero with a vignette (his image). Copy on the dark left, the faces on the right ===== */
.hero.xh-photo-hero{position:relative;isolation:isolate;overflow:hidden;min-height:min(88vh,760px);display:flex;align-items:center;padding-top:clamp(40px,6vw,80px);padding-bottom:clamp(48px,7vw,96px);background:var(--bg)}
.home .hero.xh-photo-hero{margin-top:-76px;padding-top:calc(76px + clamp(40px,6vw,80px))}
.xh-photo{position:absolute;inset:0;z-index:0;margin:0}
.xh-photo img{width:100%;height:100%;object-fit:cover;object-position:72% 30%;display:block}
.hero.xh-photo-hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:
  radial-gradient(115% 100% at 68% 42%,rgba(9,10,20,0) 38%,rgba(9,10,20,.5) 72%,rgba(9,10,20,.9) 100%),
  linear-gradient(90deg,rgba(9,10,20,.94) 0%,rgba(9,10,20,.78) 28%,rgba(9,10,20,.25) 50%,rgba(9,10,20,0) 64%),
  linear-gradient(180deg,rgba(9,10,20,.6) 0%,rgba(9,10,20,0) 22%,rgba(9,10,20,0) 72%,var(--bg) 100%)}
.hero.xh-photo-hero .wrap{position:relative;z-index:2}
.hero.xh-photo-hero h1{max-width:13ch}
.hero.xh-photo-hero .lead{color:#c9cee3}
.xh-photo-hero .xh-mark{display:none}
@media (max-width:860px){
  .home .hero.xh-photo-hero{margin-top:0}
  .hero.xh-photo-hero{min-height:0;display:block;padding-top:calc(56.25vw + 8px);padding-bottom:40px}
  .xh-photo{inset:0 0 auto 0;height:calc(56.25vw + 40px)}
  .xh-photo img{object-position:60% 30%}
  .hero.xh-photo-hero::after{background:linear-gradient(180deg,rgba(9,10,20,.15) 0%,rgba(9,10,20,0) 18%,rgba(9,10,20,.35) calc(56.25vw - 40px),var(--bg) calc(56.25vw + 40px)),radial-gradient(120% 60% at 60% 18%,rgba(9,10,20,0) 50%,rgba(9,10,20,.55) 100%)}
}
/* v6b: keep the copy clear of the faces */
@media (min-width:861px){
  .xh-photo{left:12%}
  .xh-photo img{object-position:62% 30%}
  .hero.xh-photo-hero h1{font-size:clamp(2.4rem,4.2vw,3.6rem);max-width:12ch}
  .hero.xh-photo-hero .wrap > div:first-child{flex:0 1 500px;max-width:500px}
}
@media (min-width:861px){.xh-photo{left:9%}.xh-photo img{object-position:66% 30%}}
/* v6c: phone photo taller, faces bigger, copy starts under them */
@media (max-width:860px){
  .hero.xh-photo-hero{padding-top:calc(78vw + 6px)}
  .xh-photo{height:calc(82vw + 40px)}
  .xh-photo img{object-position:64% 22%}
  .hero.xh-photo-hero::after{background:linear-gradient(180deg,rgba(9,10,20,.2) 0%,rgba(9,10,20,0) 16%,rgba(9,10,20,0) calc(56vw),rgba(9,10,20,.6) calc(72vw),var(--bg) calc(82vw + 30px)),radial-gradient(130% 70% at 62% 22%,rgba(9,10,20,0) 52%,rgba(9,10,20,.55) 100%)}
}
@media (max-width:860px){.home .hero.xh-photo-hero{margin-top:0;padding-top:calc(78vw + 6px)}}
@media (max-width:860px){.xh-photo img{object-position:76% 22%}}

/* ===== v7: sharper photo (never stretched by the browser) + the player back in the hero, below the faces ===== */
@media (min-width:861px){
  .xh-photo{left:auto;right:0;width:min(91%,1600px);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%);mask-image:linear-gradient(90deg,transparent 0,#000 16%)}
  .xh-photo img{object-position:70% 30%}
  .hero.xh-photo-hero{overflow:visible;z-index:2;min-height:min(92vh,800px);align-items:flex-start;padding-top:calc(76px + clamp(56px,8vh,96px));padding-bottom:0}
  .home .hero.xh-photo-hero{padding-top:calc(76px + clamp(56px,8vh,96px))}
  .xh-photo{overflow:hidden}
  .hero.xh-photo-hero .wrap{align-items:flex-start}
  .hero.xh-photo-hero .hero-stack{flex:0 1 560px;max-width:560px;margin-left:auto;align-self:flex-end;margin-bottom:-64px}
  .hero.xh-photo-hero .player{background:linear-gradient(180deg,rgba(25,29,51,.96) 0%,rgba(13,15,29,.98) 100%);box-shadow:0 30px 60px rgba(0,0,0,.55)}
  .hero.xh-photo-hero + .ribbon{padding-top:96px}
}
@media (max-width:860px){
  .hero.xh-photo-hero .hero-stack{margin-top:30px}
}
/* v7b: let a bigger source photo use more width on wide screens (still never stretched past its own size) */
@media (min-width:861px){.xh-photo{width:min(91%,1672px)}} /* hero-photo-cap */

/* ===== v8: player back in its original spot and size (right half, vertically centred, bleeding off the right edge), on top of the photo, see-through ===== */
@media (min-width:861px){
  .hero.xh-photo-hero{align-items:center;overflow:hidden;padding-bottom:clamp(48px,7vw,96px)}
  .hero.xh-photo-hero .wrap{align-items:center}
  .hero.xh-photo-hero .wrap > div:first-child{flex:0 1 540px;max-width:540px}
  .hero.xh-photo-hero h1{font-size:clamp(2.5rem,5.4vw,4.2rem);max-width:12ch}
  .hero.xh-photo-hero .hero-stack{flex:1 1 0;max-width:none;margin:0;align-self:center}
  .hero.xh-photo-hero + .ribbon{padding-top:30px}
}
.hero.xh-photo-hero .player{background:rgba(13,15,29,.5);border-color:rgba(255,255,255,.16);box-shadow:0 30px 60px rgba(0,0,0,.45)}
.hero.xh-photo-hero .pl-tile{background:rgba(9,10,20,.35);border-color:rgba(255,255,255,.14)}
.hero.xh-photo-hero .pl-tile.on{background:var(--grad);background-origin:border-box;border-color:transparent}

/* ===== v9: no green on the site except the "Secure card payment" line on the plan cards (and WhatsApp's own float button). Anything filled with the gradient now carries white text, on a deeper cut of the same pink, violet and blue so the white stays readable. Hero photo gets a mild blur. ===== */
:root{--grad-deep:linear-gradient(135deg,#c94fcf 0%,#7c55ee 52%,#3f7be8 100%)}
.xtremehd-landing .btn-primary,.btn-primary,.xtremehd-landing .btn-primary:hover,.btn-primary:hover,.nav .btn-primary,.tier .btn-primary{background:var(--grad-deep);background-origin:border-box;color:#fff;border-color:transparent}
.nav .btn,.nav .btn:hover{color:#fff}
.screen-opt.is-active{background:var(--grad-deep)!important;background-origin:border-box!important;color:#fff!important}
.pl-tile.on,.hero.xh-photo-hero .pl-tile.on{background:var(--grad-deep);background-origin:border-box;border-color:transparent;color:#fff}
.pl-tile.on .pl-ico{color:#fff}
.tier .badge,.num,.step .num,.hl{background:var(--grad-deep);background-origin:border-box;color:#fff}
.xh-photo{overflow:hidden}
.xh-photo img{filter:blur(2px);transform:scale(1.03)}
@media (max-width:860px){.xh-photo img{filter:blur(1.2px)}} /* the phone crop shows faces bigger, so a lighter blur reads the same */

/* ===== v10: "Ready when you are" band in white text, on the deeper gradient so the white reads ===== */
.cta-band,.cta-band[class]{background:var(--grad-deep)!important;background-origin:border-box!important;color:#fff}
.cta-band h2,.cta-band p{color:#fff}
.xtremehd-landing .cta-band .btn-ghost{color:#fff;border-color:rgba(255,255,255,.7);background:transparent}
.xtremehd-landing .cta-band .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.14);color:#fff}

/* ===== v11: the poster ribbon moves again (a flat, slow, seamless loop; no tilt, no hover pause); four plan columns keep their width with four screen options ===== */
.ribbon-track{animation:tick 90s linear infinite}
@media (max-width:860px){.ribbon-track{animation-duration:55s}}
.screen-select{flex-wrap:wrap;justify-content:center}
@media (max-width:560px){.screen-select{display:grid;grid-template-columns:1fr 1fr;width:100%;max-width:360px;border-radius:14px}.screen-opt{width:100%;border-radius:10px;padding:.65rem .5rem}}

/* ===== v12: the X in the background. A big flat X watermark in some bands, and hairline lattices at the X's own angle in others, so the dark sections stop being one flat colour. No blur, no glow: flat shapes and 1px lines only. ===== */
.section{position:relative;overflow:hidden}
.section > .wrap{position:relative;z-index:1}
.xd::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-repeat:no-repeat}
/* big X watermark */
.xd-mark::after{background-image:url('../img/mark-x.svg?v=2');background-size:auto 150%;background-position:right -14vw top -22%;opacity:.045}
.xd-mark-l::after{background-position:left -16vw bottom -30%;background-size:auto 160%;opacity:.04}
.xd-mark-c::after{background-position:center 55%;background-size:auto 180%;opacity:.03}
/* lattice: thin lines at the X's angle, both ways, fading in from the top and out at the bottom */
.xd-lattice::after{background-image:repeating-linear-gradient(62deg,transparent 0 150px,rgba(255,255,255,.055) 150px 151px),repeating-linear-gradient(-62deg,transparent 0 150px,rgba(255,255,255,.055) 150px 151px);-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%)}
/* stripes: one direction only, wider apart */
.xd-stripes::after{background-image:repeating-linear-gradient(-62deg,transparent 0 220px,rgba(255,255,255,.05) 220px 221px);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%,#000 100%);mask-image:linear-gradient(90deg,transparent 0,#000 30%,#000 100%)}
/* one giant X drawn with two hairlines across the whole section */
.xd-cross::after{background-image:linear-gradient(62deg,transparent calc(50% - .5px),rgba(255,255,255,.09) calc(50% - .5px),rgba(255,255,255,.09) calc(50% + .5px),transparent calc(50% + .5px)),linear-gradient(-62deg,transparent calc(50% - .5px),rgba(255,255,255,.09) calc(50% - .5px),rgba(255,255,255,.09) calc(50% + .5px),transparent calc(50% + .5px))}
/* footer: the X sits low on the right */
.site-foot{position:relative;overflow:hidden}
.site-foot > .wrap{position:relative;z-index:1}
.site-foot::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:url('../img/mark-x.svg?v=2') no-repeat right -10vw bottom -40% / auto 170%;opacity:.04}
@media (max-width:860px){
  .xd-mark::after,.xd-mark-l::after,.xd-mark-c::after{background-size:auto 110%;background-position:right -30vw center}
  .xd-lattice::after{background-image:repeating-linear-gradient(62deg,transparent 0 110px,rgba(255,255,255,.055) 110px 111px),repeating-linear-gradient(-62deg,transparent 0 110px,rgba(255,255,255,.055) 110px 111px)}
}
/* v12b: stronger. The X watermarks take the brand gradient (the X is a mask over the gradient), the lines get a little brighter. */
.xd-mark::after,.xd-mark-l::after,.xd-mark-c::after{background-image:var(--grad);background-size:100% 100%;background-position:0 0;-webkit-mask-image:url('../img/mark-x.svg?v=2');mask-image:url('../img/mark-x.svg?v=2');-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.xd-mark::after{-webkit-mask-size:auto 150%;mask-size:auto 150%;-webkit-mask-position:right -14vw top -22%;mask-position:right -14vw top -22%;opacity:.13}
.xd-mark-l::after{-webkit-mask-size:auto 160%;mask-size:auto 160%;-webkit-mask-position:left -16vw bottom -30%;mask-position:left -16vw bottom -30%;opacity:.11}
.xd-mark-c::after{-webkit-mask-size:auto 180%;mask-size:auto 180%;-webkit-mask-position:center 55%;mask-position:center 55%;opacity:.08}
.site-foot::after{background:var(--grad);-webkit-mask:url('../img/mark-x.svg?v=2') no-repeat right -10vw bottom -40% / auto 170%;mask:url('../img/mark-x.svg?v=2') no-repeat right -10vw bottom -40% / auto 170%;opacity:.11}
.xd-lattice::after{background-image:repeating-linear-gradient(62deg,transparent 0 150px,rgba(255,255,255,.085) 150px 151px),repeating-linear-gradient(-62deg,transparent 0 150px,rgba(255,255,255,.085) 150px 151px)}
.xd-stripes::after{background-image:repeating-linear-gradient(-62deg,transparent 0 220px,rgba(255,255,255,.08) 220px 221px)}
.xd-cross::after{background-image:linear-gradient(62deg,transparent calc(50% - .5px),rgba(255,255,255,.14) calc(50% - .5px),rgba(255,255,255,.14) calc(50% + .5px),transparent calc(50% + .5px)),linear-gradient(-62deg,transparent calc(50% - .5px),rgba(255,255,255,.14) calc(50% - .5px),rgba(255,255,255,.14) calc(50% + .5px),transparent calc(50% + .5px))}
@media (max-width:860px){
  .xd-mark::after,.xd-mark-l::after,.xd-mark-c::after{-webkit-mask-size:auto 110%;mask-size:auto 110%;-webkit-mask-position:right -30vw center;mask-position:right -30vw center}
}

/* v12c: only the X stays; the lattice, stripes and cross lines are gone */
.xd-lattice::after,.xd-stripes::after,.xd-cross::after{content:none}

/* ===== v13: the X family. Every decoration is the vector X (or a mirrored or rotated copy) cut out of the brand gradient. Full-height Xs run from the top edge of their section to the bottom edge. ===== */
.xd::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:var(--grad);background-size:100% 100%}
/* one X, exactly the section height, off the right edge */
.xd-full::after{-webkit-mask-image:url('../img/mark-x.svg?v=2');-webkit-mask-size:auto 100%;-webkit-mask-position:right -6vw top;-webkit-mask-repeat:no-repeat;mask-image:url('../img/mark-x.svg?v=2');mask-size:auto 100%;mask-position:right -6vw top;mask-repeat:no-repeat;opacity:0.13}
/* its mirror, off the left edge */
.xd-full-l::after{-webkit-mask-image:url('../img/mark-x-m.svg');-webkit-mask-size:auto 100%;-webkit-mask-position:left -6vw top;-webkit-mask-repeat:no-repeat;mask-image:url('../img/mark-x-m.svg');mask-size:auto 100%;mask-position:left -6vw top;mask-repeat:no-repeat;opacity:0.12}
/* two Xs facing each other, full height, framing the text */
.xd-frame::after{-webkit-mask-image:url('../img/mark-x-m.svg'),url('../img/mark-x.svg?v=2');-webkit-mask-size:auto 100%,auto 100%;-webkit-mask-position:left -22vw top,right -22vw top;-webkit-mask-repeat:no-repeat;mask-image:url('../img/mark-x-m.svg'),url('../img/mark-x.svg?v=2');mask-size:auto 100%,auto 100%;mask-position:left -22vw top,right -22vw top;mask-repeat:no-repeat;opacity:0.09}
/* three Xs on their side, lined up along the bottom edge */
.xd-row::after{-webkit-mask-image:url('../img/mark-x-90.svg'),url('../img/mark-x-90.svg'),url('../img/mark-x-90.svg');-webkit-mask-size:auto 58%,auto 58%,auto 58%;-webkit-mask-position:8% bottom,50% bottom,92% bottom;-webkit-mask-repeat:no-repeat;mask-image:url('../img/mark-x-90.svg'),url('../img/mark-x-90.svg'),url('../img/mark-x-90.svg');mask-size:auto 58%,auto 58%,auto 58%;mask-position:8% bottom,50% bottom,92% bottom;mask-repeat:no-repeat;opacity:0.08}
/* four Xs stepping down from top left to bottom right */
.xd-steps::after{-webkit-mask-image:url('../img/mark-x.svg?v=2'),url('../img/mark-x.svg?v=2'),url('../img/mark-x.svg?v=2'),url('../img/mark-x.svg?v=2');-webkit-mask-size:auto 34%,auto 34%,auto 34%,auto 34%;-webkit-mask-position:2% 0%,30% 33%,60% 66%,92% 100%;-webkit-mask-repeat:no-repeat;mask-image:url('../img/mark-x.svg?v=2'),url('../img/mark-x.svg?v=2'),url('../img/mark-x.svg?v=2'),url('../img/mark-x.svg?v=2');mask-size:auto 34%,auto 34%,auto 34%,auto 34%;mask-position:2% 0%,30% 33%,60% 66%,92% 100%;mask-repeat:no-repeat;opacity:0.08}
/* a tilted X behind an upright one in the bottom right corner */
.xd-pair::after{-webkit-mask-image:url('../img/mark-x-45.svg'),url('../img/mark-x.svg?v=2');-webkit-mask-size:auto 95%,auto 62%;-webkit-mask-position:right -10vw bottom -20%,right 4vw bottom;-webkit-mask-repeat:no-repeat;mask-image:url('../img/mark-x-45.svg'),url('../img/mark-x.svg?v=2');mask-size:auto 95%,auto 62%;mask-position:right -10vw bottom -20%,right 4vw bottom;mask-repeat:no-repeat;opacity:0.08}
/* a small tilted X in the top right, like a stamp */
.xd-stamp::after{-webkit-mask-image:url('../img/mark-x-135.svg');-webkit-mask-size:auto 70%;-webkit-mask-position:right 2vw top -10%;-webkit-mask-repeat:no-repeat;mask-image:url('../img/mark-x-135.svg');mask-size:auto 70%;mask-position:right 2vw top -10%;mask-repeat:no-repeat;opacity:0.1}
/* one huge mirrored X centred behind the whole section */
.xd-center::after{-webkit-mask-image:url('../img/mark-x-m.svg');-webkit-mask-size:auto 100%;-webkit-mask-position:center top;-webkit-mask-repeat:no-repeat;mask-image:url('../img/mark-x-m.svg');mask-size:auto 100%;mask-position:center top;mask-repeat:no-repeat;opacity:0.06}
/* a quiet tile of small Xs */
.xd-tile::after{-webkit-mask-image:url('../img/mark-x.svg?v=2');-webkit-mask-size:120px auto;-webkit-mask-position:0 0;-webkit-mask-repeat:repeat;mask-image:url('../img/mark-x.svg?v=2');mask-size:120px auto;mask-position:0 0;mask-repeat:repeat;opacity:0.045}
.site-foot::after{background:var(--grad);-webkit-mask:url('../img/mark-x.svg?v=2') no-repeat right -6vw top / auto 100%;mask:url('../img/mark-x.svg?v=2') no-repeat right -6vw top / auto 100%;opacity:.1}
@media (max-width:860px){
  .xd-full::after,.xd-full-l::after,.xd-center::after{-webkit-mask-image:url('../img/mark-x.svg?v=2');-webkit-mask-size:auto 70%;-webkit-mask-position:right -40vw bottom;-webkit-mask-repeat:no-repeat;mask-image:url('../img/mark-x.svg?v=2');mask-size:auto 70%;mask-position:right -40vw bottom;mask-repeat:no-repeat;opacity:0.1}
  .xd-full-l::after{-webkit-mask-image:url('../img/mark-x-m.svg');-webkit-mask-size:auto 70%;-webkit-mask-position:left -40vw bottom;-webkit-mask-repeat:no-repeat;mask-image:url('../img/mark-x-m.svg');mask-size:auto 70%;mask-position:left -40vw bottom;mask-repeat:no-repeat;opacity:0.1}
  .xd-frame::after{-webkit-mask-image:url('../img/mark-x-m.svg'),url('../img/mark-x.svg?v=2');-webkit-mask-size:auto 60%,auto 60%;-webkit-mask-position:left -45vw top,right -45vw bottom;-webkit-mask-repeat:no-repeat;mask-image:url('../img/mark-x-m.svg'),url('../img/mark-x.svg?v=2');mask-size:auto 60%,auto 60%;mask-position:left -45vw top,right -45vw bottom;mask-repeat:no-repeat;opacity:0.08}
  .xd-row::after{-webkit-mask-image:url('../img/mark-x-90.svg'),url('../img/mark-x-90.svg'),url('../img/mark-x-90.svg');-webkit-mask-size:auto 40%,auto 40%,auto 40%;-webkit-mask-position:8% bottom,50% bottom,92% bottom;-webkit-mask-repeat:no-repeat;mask-image:url('../img/mark-x-90.svg'),url('../img/mark-x-90.svg'),url('../img/mark-x-90.svg');mask-size:auto 40%,auto 40%,auto 40%;mask-position:8% bottom,50% bottom,92% bottom;mask-repeat:no-repeat;opacity:0.08}
  .xd-steps::after{-webkit-mask-image:url('../img/mark-x.svg?v=2'),url('../img/mark-x.svg?v=2'),url('../img/mark-x.svg?v=2'),url('../img/mark-x.svg?v=2');-webkit-mask-size:auto 24%,auto 24%,auto 24%,auto 24%;-webkit-mask-position:2% 0%,30% 33%,60% 66%,92% 100%;-webkit-mask-repeat:no-repeat;mask-image:url('../img/mark-x.svg?v=2'),url('../img/mark-x.svg?v=2'),url('../img/mark-x.svg?v=2'),url('../img/mark-x.svg?v=2');mask-size:auto 24%,auto 24%,auto 24%,auto 24%;mask-position:2% 0%,30% 33%,60% 66%,92% 100%;mask-repeat:no-repeat;opacity:0.08}
  .xd-pair::after{-webkit-mask-image:url('../img/mark-x-45.svg'),url('../img/mark-x.svg?v=2');-webkit-mask-size:auto 70%,auto 45%;-webkit-mask-position:right -20vw bottom -10%,right 2vw bottom;-webkit-mask-repeat:no-repeat;mask-image:url('../img/mark-x-45.svg'),url('../img/mark-x.svg?v=2');mask-size:auto 70%,auto 45%;mask-position:right -20vw bottom -10%,right 2vw bottom;mask-repeat:no-repeat;opacity:0.08}
  .xd-tile::after{-webkit-mask-image:url('../img/mark-x.svg?v=2');-webkit-mask-size:80px auto;-webkit-mask-position:0 0;-webkit-mask-repeat:repeat;mask-image:url('../img/mark-x.svg?v=2');mask-size:80px auto;mask-position:0 0;mask-repeat:repeat;opacity:0.045}
}

/* ===== v14: one rule for the X. One per section, upright or mirrored only, always the full height of the section, top edge to bottom edge, never small, never tilted, never in groups. Sides alternate down the page. ===== */
.xd-full::after{opacity:.12}
.xd-full-l::after{opacity:.12}
.xd-stamp::after,.xd-row::after,.xd-tile::after,.xd-pair::after,.xd-steps::after,.xd-center::after,.xd-frame::after{content:none}
@media (max-width:860px){
  .xd-full::after{-webkit-mask-image:url('../img/mark-x.svg?v=2');mask-image:url('../img/mark-x.svg?v=2');-webkit-mask-size:auto 100%;mask-size:auto 100%;-webkit-mask-position:right -45vw top;mask-position:right -45vw top;opacity:.1}
  .xd-full-l::after{-webkit-mask-image:url('../img/mark-x-m.svg');mask-image:url('../img/mark-x-m.svg');-webkit-mask-size:auto 100%;mask-size:auto 100%;-webkit-mask-position:left -45vw top;mask-position:left -45vw top;opacity:.1}
}

/* v14b: the chain. From "Everything in XtremeHD" down to the footer every section carries one full-height X, sides alternating, so one X ends exactly where the next begins and there is no plain stretch in between. The footer takes the left side to close the chain. */
.site-foot::after{-webkit-mask:url('../img/mark-x-m.svg') no-repeat left -6vw top / auto 100%;mask:url('../img/mark-x-m.svg') no-repeat left -6vw top / auto 100%}
@media (max-width:860px){.site-foot::after{-webkit-mask-position:left -45vw top;mask-position:left -45vw top}}

/* v14c: one section with an X, one without, down the page; the footer goes back to the right */
.site-foot::after{-webkit-mask:url('../img/mark-x.svg?v=2') no-repeat right -6vw top / auto 100%;mask:url('../img/mark-x.svg?v=2') no-repeat right -6vw top / auto 100%}
@media (max-width:860px){.site-foot::after{-webkit-mask-position:right -45vw top;mask-position:right -45vw top}}

/* ===== v15: checkout attribution, offer bonus, streamer logos ===== */
.tier-bonus{margin:-6px 0 14px!important;display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:var(--pill);background:var(--grad);background-origin:border-box;color:#fff;font-weight:800;font-size:.76rem;letter-spacing:.02em;align-self:flex-start}
.thanks-count{margin-top:16px;color:var(--text-2)}
.thanks-count b{color:var(--text)}
.thanks-count a{font-weight:700}
.woocommerce-remove-coupon{display:none!important}
.streamers{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px 26px;margin:20px 0 26px;padding:16px 10px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.streamers i{font-style:normal;color:var(--text-3);font-size:.74rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.streamers img{height:30px;width:auto;opacity:.85}
@media (max-width:640px){.streamers{gap:12px 18px}.streamers img{height:24px}}
.renew-form select,.renew-form input{min-width:0}
.section[id],.renew[id]{scroll-margin-top:92px}
.has-offer .section[id],.has-offer .renew[id]{scroll-margin-top:136px}
/* ===== v16: streamer logos as a marquee ===== */
.streamers{display:block;overflow:hidden;padding:18px 0;margin:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.streamers-track{display:flex;width:max-content;animation:xh-slide 38s linear infinite;will-change:transform}
.streamers-track span{display:flex;align-items:center;gap:56px;padding-right:56px;white-space:nowrap}
.streamers-track i{font-style:normal;color:var(--text-3);font-size:.74rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.streamers-track img{height:34px;width:auto;opacity:.85}
@media (max-width:640px){.streamers-track span{gap:36px;padding-right:36px}.streamers-track img{height:26px}}
@keyframes xh-slide{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.streamers-track{animation:none}}

/* ===== v17: the app section, the gallery strip and the zoomable lightbox ===== */
.app-get{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;margin:22px 0 30px}
.app-code{display:inline-flex;align-items:center;gap:10px;padding:7px 7px 7px 16px;border-radius:var(--pill);background:var(--surface);border:1px solid var(--line-2);font-weight:700;color:var(--text-2);font-size:.95rem}
.app-code b{color:var(--text);font-family:ui-monospace,Menlo,Consolas,monospace;font-size:1.05rem;letter-spacing:.06em}
.app-code button{border:0;background:var(--grad);background-origin:border-box;color:#fff;font:inherit;font-weight:800;padding:8px 14px;border-radius:var(--pill);cursor:pointer}
.app-code button.done{background:var(--text);color:var(--bg)}
.app-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0 0 28px}
.app-fact{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.app-fact b{display:block;font-family:var(--display);font-size:1.05rem;margin-bottom:4px}
.app-fact span{color:var(--text-2);font-size:.92rem}
@media (max-width:900px){.app-facts{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.app-facts{grid-template-columns:1fr}}
.appgal{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 6px 18px;margin:0 -6px;cursor:grab;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent;-webkit-overflow-scrolling:touch}
.appgal.dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}
.appgal figure{flex:0 0 min(78vw,640px);scroll-snap-align:start;margin:0;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden;transition:border-color .2s}
.appgal figure:hover{border-color:var(--pink)}
.appgal img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;cursor:zoom-in;-webkit-user-drag:none;user-select:none}
.appgal figcaption{padding:12px 16px;font-size:.92rem;color:var(--text-2);font-weight:600;display:flex;justify-content:space-between;align-items:center;gap:12px}
.appgal figcaption i{font-style:normal;color:var(--text-3);font-weight:800;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.appgal-nav{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:4px}
.appgal-nav button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);background:var(--surface);color:var(--text);cursor:pointer;display:grid;place-items:center;font-size:1.25rem;line-height:1;transition:border-color .2s}
.appgal-nav button:hover{border-color:var(--pink)}
.appgal-nav span{color:var(--text-3);font-size:.85rem;font-weight:600;margin:0 8px}
.lb{position:fixed;inset:0;z-index:120;background:rgba(9,10,20,.96);display:none;align-items:center;justify-content:center;flex-direction:column;touch-action:none}
.lb.on{display:flex}
.lb-stage{position:relative;width:min(96vw,1500px);height:min(78vh,860px);overflow:hidden;display:grid;place-items:center;cursor:zoom-in}
.lb-stage.zoomed{cursor:grab}
.lb-stage.panning{cursor:grabbing}
.lb-stage img{max-width:100%;max-height:100%;transform-origin:center center;will-change:transform;user-select:none;-webkit-user-drag:none;border-radius:8px}
.lb-cap{color:var(--text-2);font-weight:600;margin-top:12px;font-size:.95rem;text-align:center;padding:0 16px}
.lb-cap small{display:block;color:var(--text-3);font-weight:600;margin-top:4px}
.lb-close,.lb-prev,.lb-next,.lb-zoom{position:absolute;z-index:2;width:46px;height:46px;border-radius:50%;border:1px solid var(--line-2);background:rgba(20,16,31,.9);color:#fff;cursor:pointer;display:grid;place-items:center;font-size:1.3rem;line-height:1}
.lb-close{top:16px;right:16px}
.lb-prev{left:12px;top:50%;transform:translateY(-50%)}
.lb-next{right:12px;top:50%;transform:translateY(-50%)}
.lb-zoom{top:16px;right:72px;width:auto;padding:0 16px;border-radius:var(--pill);font-size:.8rem;font-weight:800;letter-spacing:.04em}
body.lb-open{overflow:hidden}
@media (max-width:640px){.lb-stage{height:60vh}.lb-prev,.lb-next{width:40px;height:40px}.lb-zoom{right:66px}}

/* ===== v18: the 12-month card sits on the brand gradient, everything inside it white ===== */
.tier.best{background:linear-gradient(135deg,#d26fd6 0%,#8366ec 52%,#4f8def 100%);background-origin:border-box;border:2px solid transparent;color:#fff;box-shadow:0 24px 60px -24px rgba(155,124,246,.7)}
.tier.best h3,.tier.best .tier-price .amt,.tier.best .tier-price .per,.tier.best .tier-sub,.tier.best .tier-specs li,.tier.best .tier-secure{color:#fff}
.tier.best .tier-price .per,.tier.best .tier-sub{opacity:.92}
.tier.best .badge{background:#fff;color:#14101f;box-shadow:0 6px 18px -8px rgba(0,0,0,.5)}
.tier.best .tier-save{background:rgba(255,255,255,.22);color:#fff}
.tier.best .tier-bonus{background:#fff;color:#14101f}
.tier.best .tier-specs li::before{background:rgba(255,255,255,.22) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.5 3.5 6.5-7.5' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat}
.tier.best .tier-secure::before{background:rgba(255,255,255,.22) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.5 3.5 6.5-7.5' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat}
.tier.best .tier-guard span{background:rgba(255,255,255,.16);color:#fff}
.tier.best .tier-guard span::before{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 3l5.5 2v5c0 3.6-2.3 6.3-5.5 7.5C6.8 16.3 4.5 13.6 4.5 10V5z' fill='%236f55e0'/%3E%3C/svg%3E") center/11px no-repeat}
.xtremehd-landing .tier.best .btn,.tier.best .btn{background:#fff;background-image:none;color:#14101f;border-color:#fff}
.xtremehd-landing .tier.best .btn:hover,.tier.best .btn:hover{background:#f1ecfa;color:#14101f}
.tier.best .btn svg{color:#14101f}

/* ===== v19: white Claim button on the offer bar, the XtremeHD column on the gradient, the second film ribbon ===== */
.ob-cta,.ob-cta svg{color:#fff}
.compare td.us,.compare th.us,.compare thead th.us{background:linear-gradient(90deg,#d26fd6 0%,#8366ec 55%,#4f8def 100%);color:#fff;font-weight:800}
.compare thead th.us{color:#fff}
.compare tr:last-child td.us{border-bottom-right-radius:0}
.ribbon-films{margin:0;padding:8px 0 0;background:transparent}
.ribbon-films .ribbon-track{animation:tick 110s linear infinite reverse}
#films .sec-head{margin-bottom:10px}
.xtremehd-landing .ob-cta,.xtremehd-landing .ob-cta:hover,.ob-cta,.ob-cta:hover{color:#fff}
.xtremehd-landing .ob-cta svg{color:#fff}

/* ===== v20: the reactivate picker (screens, plan cards with prices, total) ===== */
.rn-group{display:grid;gap:8px}
.rn-label{font-weight:700;font-size:.88rem;color:var(--text)}
.rn-screens{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.rn-opt,.rn-plan{position:relative;cursor:pointer;margin:0}
.rn-opt input,.rn-plan input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.rn-opt span{display:block;text-align:center;padding:10px 6px;border:1.5px solid var(--line-2);border-radius:var(--r-sm);font-weight:700;font-size:.9rem;color:var(--text-2);background:var(--bg);transition:border-color .15s,background .15s,color .15s}
.rn-opt input:checked+span{border-color:transparent;background:linear-gradient(135deg,#d26fd6,#8366ec 52%,#4f8def);background-origin:border-box;color:#fff}
.rn-opt input:focus-visible+span,.rn-plan input:focus-visible+.rn-card{outline:2px solid var(--pink);outline-offset:2px}
.rn-plans{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.rn-card{display:grid;gap:2px;padding:12px 14px;border:1.5px solid var(--line-2);border-radius:var(--r);background:var(--bg);transition:border-color .15s,background .15s}
.rn-card b{font-family:var(--display);font-size:1rem;color:var(--text)}
.rn-card em{font-style:normal;font-family:var(--display);font-weight:800;font-size:1.4rem;letter-spacing:-.02em;line-height:1.1;color:var(--text)}
.rn-card small{color:var(--text-3);font-weight:600;font-size:.78rem}
.rn-card i{font-style:normal;justify-self:start;margin-top:4px;padding:2px 8px;border-radius:var(--pill);background:rgba(255,255,255,.16);color:#fff;font-size:.72rem;font-weight:800}
.rn-plan input:not(:checked)+.rn-card i{background:rgba(155,124,246,.18);color:var(--text)}
.rn-plan:hover .rn-card{border-color:var(--pink)}
.rn-plan input:checked+.rn-card{border-color:transparent;background:linear-gradient(135deg,#d26fd6,#8366ec 52%,#4f8def);background-origin:border-box}
.rn-plan input:checked+.rn-card b,.rn-plan input:checked+.rn-card em,.rn-plan input:checked+.rn-card small{color:#fff}
.rn-total{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:2px 0 0!important;color:var(--text-2);font-weight:600}
.rn-total b{font-family:var(--display);font-size:1.6rem;color:var(--text);letter-spacing:-.02em}
@media (max-width:520px){.rn-screens{grid-template-columns:repeat(2,1fr)}}

/* ===== v21: gradient card icons, the reactivate copy at the top with a features box, the WhatsApp button in the form ===== */
.card .ico{background:linear-gradient(135deg,#d26fd6,#8366ec 52%,#4f8def);background-origin:border-box;color:#fff;border:0;box-shadow:0 10px 24px -12px rgba(131,102,236,.7)}
.renew{align-items:start}
.renew-feats{margin-top:22px;background:var(--bg);border:1px solid var(--line-2);border-radius:var(--r);padding:18px 20px}
.renew-feats .rn-label{display:block;margin-bottom:12px}
.renew-feats ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:9px 14px;color:var(--text-2);font-size:.92rem;font-weight:600}
.renew-feats li{display:flex;gap:9px;align-items:flex-start}
.renew-feats li::before{content:"";flex:none;width:18px;height:18px;margin-top:1px;border-radius:50%;background:linear-gradient(135deg,#d26fd6,#8366ec 52%,#4f8def) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.5 3.5 6.5-7.5' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat}
@media (max-width:560px){.renew-feats ul{grid-template-columns:1fr}}
.rn-help{display:grid;gap:10px;margin-top:4px}
.rn-help p{margin:0}
.rn-help .btn{justify-self:start}
/* v24: the XtremeHD column reads as one gradient block, no row dividers inside it */
.compare th.us,.compare td.us,.compare thead th.us,.compare tr:last-child td.us{border-top:0!important;border-bottom:0!important;box-shadow:none}
/* v25: the plan-features box in the reactivate section, vertical with gradient ticks */
.renew-feats ul{grid-template-columns:1fr;gap:10px}
.renew-feats li::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.5 3.5 6.5-7.5' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat,linear-gradient(135deg,#d26fd6,#8366ec 52%,#4f8def)}
/* v26: no blue accents. Kickers, ticks, tags and markers on the brand pink and violet */
:root{--sky:#ee8cf1;--sky-soft:rgba(238,140,241,.14)}
.kicker{color:var(--pink)}
.kicker::before{background:var(--grad);background-origin:border-box}
.checks svg,.hero-proof svg{color:var(--pink)}
.tier-specs li::before{background:rgba(238,140,241,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.5 3.5 6.5-7.5' fill='none' stroke='%23ee8cf1' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.tier-save{background:rgba(238,140,241,.14);color:#f5b8f7}
.aside-k,.si-k{color:var(--pink)}
.landing-content li::marker{color:var(--pink)}

/* ===== v29: the domain notice at the very top ===== */
.site-notice{background:var(--bg-2);border-bottom:1px solid var(--line);color:var(--text-2);font-weight:600;font-size:.84rem}
.site-notice .wrap{display:flex;align-items:center;justify-content:center;gap:9px;min-height:36px;padding-top:7px;padding-bottom:7px;text-align:center}
.site-notice svg{width:16px;height:16px;flex:none;color:var(--pink)}
.site-notice b,.site-notice strong{color:var(--text);font-weight:800}
@media (max-width:640px){.site-notice{font-size:.78rem}.site-notice .wrap{gap:7px}}
/* v30: the notice in red so it is seen */
.site-notice{background:#b3121f;border-bottom:1px solid #d8293a;color:#fff;font-weight:600}
.site-notice svg{color:#fff}
.site-notice b,.site-notice strong{color:#fff;font-weight:800;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
/* ===== v33: phone hero = the copy on the photo, like desktop. The photo covers the top of the hero and fades into the page; the faces stay clear, the headline sits over the lower part of the picture. ===== */
@media (max-width:860px){
  .hero.xh-photo-hero,.home .hero.xh-photo-hero{display:block;min-height:0;padding-top:calc(60px + 74vw);padding-bottom:36px}
  .xh-photo{inset:0 0 auto 0;left:0;right:0;width:100%;height:calc(150vw + 60px)}
  .xh-photo img{object-position:66% 20%;filter:blur(1px)}
  .hero.xh-photo-hero::after{background:linear-gradient(180deg,rgba(9,10,20,.35) 0%,rgba(9,10,20,.05) 60px,rgba(9,10,20,.05) 46vw,rgba(9,10,20,.55) 72vw,rgba(9,10,20,.84) 100vw,rgba(9,10,20,.95) 128vw,var(--bg) calc(150vw + 40px))}
  .hero.xh-photo-hero .hero-stack{margin-top:24px}
}
/* ===== v34: phone hero = copy first, straight under the nav, with the photo behind it (darkened) and fading into the page. No image band on its own. ===== */
@media (max-width:860px){
  .hero.xh-photo-hero,.home .hero.xh-photo-hero{display:block;min-height:0;padding-top:34px;padding-bottom:36px}
  .xh-photo{inset:0 0 auto 0;left:0;right:0;width:100%;height:calc(128vw + 40px)}
  .xh-photo img{object-position:68% 24%;filter:blur(1.5px)}
  .hero.xh-photo-hero::after{background:linear-gradient(180deg,rgba(9,10,20,.58) 0%,rgba(9,10,20,.52) 34vw,rgba(9,10,20,.74) 74vw,rgba(9,10,20,.93) 104vw,var(--bg) calc(128vw + 20px))}
  .hero.xh-photo-hero h1,.hero.xh-photo-hero .kicker{text-shadow:0 2px 18px rgba(9,10,20,.55)}
}
/* v34b: the three-line headline breaks where the sentences end, at every width */
.hero.xh-photo-hero h1,.hero.xh-photo-hero h1[class]{max-width:none}
@media (min-width:861px){.hero.xh-photo-hero h1{max-width:none}}
@media (max-width:860px){.hero.xh-photo-hero::after{background:linear-gradient(180deg,rgba(9,10,20,.5) 0%,rgba(9,10,20,.48) 34vw,rgba(9,10,20,.74) 74vw,rgba(9,10,20,.93) 104vw,var(--bg) calc(128vw + 20px))}}