/* Plus Jakarta Sans, self-hosted variable font: the same file Google
   was already serving, covering weights 400-800 in one request.
   latin + latin-ext only, which is all this site renders. */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 800;font-display:swap;src:url(../assets/fonts/pjs-var-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 800;font-display:swap;src:url(../assets/fonts/pjs-var-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* =========================================================
   FelixIPTV — original design system
   ========================================================= */

:root{
  /* ---- surfaces: each step is a measured jump, not a guess ----
     bg 1.00 : alt 1.17 : card 1.34 : raised 1.62 (ratios vs --bg) */
  --bg:#090A08;              /* foundation */
  --bg-alt:#1B1D1A;          /* alternating sections */
  --surface:#252924;         /* cards — a distinct plane */
  --surface-2:#323630;       /* hover / raised */
  --panel:var(--surface);
  --panel-2:var(--surface-2);

  /* ---- borders: on near-black the border carries the separation,
     so it is a real hairline rather than a hint ---- */
  --line:#3C423A;            /* structural dividers */
  --line-2:#5F685C;          /* card outlines — 2.55:1 on a card */
  --line-3:#79836F;          /* emphasis / hover */
  --line-str:var(--line-2);
  --line-accent:rgba(163,230,53,.45);

  /* ---- text ---- */
  --text:#FFFFFF;            /* primary — headings and key labels */
  --text-2:#C7CEC3;          /* body / secondary */
  --text-3:#9BA396;          /* meta / tertiary */
  --muted:var(--text-2);
  --dim:var(--text-3);

  /* ---- accent ---- */
  --lime:#A3E635;
  --lime-hover:#B6EE55;
  --lime-soft:#C8DFA4;
  --lime-tint:rgba(163,230,53,.13);
  --lime-deep:#1F2D12;
  --on-lime:#0A1004;
  --lime-lt:var(--lime-hover);
  --lime-pale:var(--lime-soft);
  --grad:linear-gradient(100deg,#B6EE55 0%,#A3E635 100%);

  --wa:#25D366;
  --wa-deep:#1DA851;

  --r-sm:10px; --r:16px; --r-lg:22px; --r-xl:28px;
  --pad:clamp(1.25rem,4vw,2rem);
  --gap:clamp(1rem,2vw,1.5rem);
  --sec-y:clamp(4.5rem,9vw,8rem);
  --max:1180px;

  --ease:cubic-bezier(.2,.7,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;color:var(--text);font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:clamp(.975rem,.93rem + .2vw,1.0625rem);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3{margin:0;line-height:1.15;letter-spacing:-.025em;font-weight:800;}
p{margin:0}
svg{display:block}

:focus-visible{border-radius:4px;}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--lime);color:var(--on-lime);padding:.7rem 1.1rem;border-radius:0 0 var(--r-sm) 0;font-weight:700;
}
.skip-link:focus{left:0}

.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.wrap-narrow{max-width:820px}

/* ---------- section shells ---------- */
.section{padding-block:var(--sec-y);position:relative}

.sec-head{max-width:660px;margin-bottom:clamp(2.5rem,5vw,3.75rem)}
.sec-head h2{font-size:clamp(1.75rem,1.2rem + 2.3vw,2.85rem);margin-bottom:.85rem}
.sec-sub{color:var(--muted);font-size:1.02em}

.eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:.775rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:#b8e558;background:rgba(163,230,53,.1);
  border:1px solid rgba(163,230,53,.22);
  padding:.4rem .85rem;border-radius:100px;margin-bottom:1.15rem;
}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 8px var(--lime);flex:none}

.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- buttons ---------- */
.btn{
  --btn-bg:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font:inherit;font-weight:700;letter-spacing:-.01em;
  padding:.72rem 1.35rem;border-radius:100px;border:1px solid transparent;
  cursor:pointer;text-align:center;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),background-color .18s var(--ease),border-color .18s var(--ease);
}
.btn-lg{padding:.92rem 1.75rem;font-size:1.02em}
.btn-block{width:100%}

.btn-primary{background:var(--grad);color:var(--on-lime);box-shadow:0 6px 20px -6px rgba(163,230,53,.42)}
.btn-primary:hover{filter:brightness(1.06);transform:translateY(-2px);box-shadow:0 12px 30px -8px rgba(163,230,53,.55)}

.btn-ghost{background:var(--panel);color:var(--text);border-color:var(--line-str)}
.btn-ghost:hover{background:var(--panel-2);border-color:rgba(163,230,53,.45);transform:translateY(-2px)}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  border-bottom:1px solid transparent;
  transition:background-color .25s var(--ease),border-color .25s var(--ease),backdrop-filter .25s var(--ease);
}
.site-header.stuck{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:76px}

.brand{display:inline-flex;align-items:center;font-weight:800;font-size:1.2rem;letter-spacing:-.03em;}

.nav{display:flex;align-items:center;gap:.35rem}
.nav>a{padding:.5rem .8rem;border-radius:100px;font-weight:600;font-size:.95rem;transition:color .18s var(--ease),background-color .18s var(--ease);}

.nav-cta{margin-left:.6rem;color:var(--on-lime)!important}
.nav-cta:hover{color:var(--on-lime)!important;filter:brightness(1.06)}

.burger{display:none;width:44px;height:44px;border:1px solid var(--line-str);background:var(--panel);border-radius:12px;cursor:pointer;padding:0;place-items:center}
.burger span{display:block;width:18px;height:2px;background:var(--text);border-radius:2px;margin:3px auto;transition:transform .22s var(--ease),opacity .18s var(--ease)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

/* ---------- hero ----------
   The warm red identity is declared on .hero and used only by
   hero-scoped selectors,so the rest of the site keeps brand blue.  */
.hero{--flame:#a3e635;--flame-deep:#4d7c0f;--ember:#bef264;--flame-grad:linear-gradient(103deg,#bef264 0%,#84cc16 100%);position:relative;overflow:hidden;isolation:isolate;}
/* ambient red light,masked out before the blue sections below */
.hero-glow{position:absolute;inset:-22% -14% auto -14%;height:940px;pointer-events:none;z-index:-1;-webkit-mask-image:linear-gradient(#000 58%,transparent 97%);mask-image:linear-gradient(#000 58%,transparent 97%);}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(56% 52% at 46% 34%,#000 0%,transparent 78%);mask-image:radial-gradient(56% 52% at 46% 34%,#000 0%,transparent 78%);}
.hero-inner{
  position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2.5rem,4.5vw,4.5rem);align-items:center;
}

/* ---------- left column ---------- */
.hero .eyebrow{color:#cdeb96;background:rgba(163,230,53,.1);border-color:rgba(163,230,53,.3)}
.hero .eyebrow .dot{background:var(--flame);box-shadow:0 0 9px var(--flame)}
.hero-copy h1{font-size:clamp(2.2rem,1.2rem + 4.2vw,4.35rem);letter-spacing:-.04em;line-height:1.03;margin-bottom:1.25rem;text-wrap:balance;font-weight:800;}
.h1-lead{display:block;}

.hero .lede{color:var(--muted);font-size:clamp(1rem,.95rem + .4vw,1.16rem);max-width:34em}
.hero-cta{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.1rem}
.hero .btn-flame{
  background:var(--flame-grad);color:var(--on-lime);font-weight:800;border-color:transparent;
  box-shadow:0 10px 30px -10px rgba(101,163,13,.85);
}
.hero .btn-flame:hover{filter:brightness(1.08);transform:translateY(-2px);box-shadow:0 16px 38px -12px rgba(101,163,13,.95)}
.hero .btn-ghost{border-color:rgba(163,230,53,.3)}
.hero .btn-ghost:hover{border-color:rgba(163,230,53,.62);background:rgba(163,230,53,.08)}
.btn-ico{display:inline-flex;align-items:center;flex:none;line-height:1}
.btn-ico svg{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* icon trust row */
.hero-trust{flex-wrap:wrap;margin-top:2.2rem;}
.hero-trust li{display:flex;align-items:center;gap:.65rem;}
.ht-ico{display:grid;place-items:center;flex:none;background:rgba(163,230,53,.11);border:1px solid rgba(163,230,53,.26);}
.ht-ico svg{fill:none;stroke:var(--ember);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
.ht-txt{display:flex;flex-direction:column;line-height:1.3}
.ht-txt b{font-weight:700;color:var(--text);}
.ht-txt span{color:var(--dim);font-weight:500;}

/* ---------- television on a console ---------- */
.hero-visual{position:relative}
.stage{position:relative;}
.stage::before{/* light thrown onto the wall behind the set */
  content:"";position:absolute;inset:-6% -12% 12% -12%;z-index:-1;pointer-events:none;filter:blur(8px);}
.tv{
  position:relative;z-index:2;border-radius:12px;padding:9px 9px 11px;
  background:linear-gradient(158deg,#2b2e36 0%,#15171d 36%,#0a0b0f 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.07),inset 0 1px 0 rgba(255,255,255,.13),
             inset 0 -1px 0 rgba(0,0,0,.65),0 30px 60px -26px rgba(0,0,0,.9);
}
.tv-screen{position:relative;border-radius:6px;overflow:hidden;background:linear-gradient(168deg,#0c1017 0%,#06080d 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),inset 0 0 46px rgba(0,0,0,.85);}
.tv-sheen{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(122deg,rgba(255,255,255,.06) 0%,transparent 32%)}
.tv-feet{position:absolute;left:0;right:0;display:flex;justify-content:space-between;}
.tv-feet i{display:block;background:linear-gradient(180deg,#23262e,#101216);border-radius:0 0 4px 4px;transform:perspective(30px) rotateX(-16deg);}
.console{position:absolute;bottom:0;z-index:1;background:linear-gradient(180deg,#20222a 0%,#131519 38%,#0b0c10 100%);box-shadow:0 24px 46px -20px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.07);}
.console::after{/* red spill across the console top */
  content:"";position:absolute;inset:0 0 auto 0;height:42%;border-radius:6px 6px 0 0;}

/* ---------- on-screen interface ---------- */
.ui{position:absolute;inset:0;display:flex;flex-direction:column;gap:.34rem;padding:.55rem .6rem;}
.ui-top{display:flex;align-items:center;gap:.5rem}
.ui-logo{font-size:.66rem;font-weight:800;letter-spacing:-.01em;color:#fff;flex:none}

.ui-pills{display:flex;gap:.22rem;flex:1;min-width:0;overflow:hidden}
.ui-pills span{font-size:.55rem;font-weight:700;padding:.2rem .42rem;border-radius:100px;white-space:nowrap;}

.ui-tools{display:flex;gap:.28rem;flex:none}
.ui-tools i{width:9px;height:9px;border-radius:50%;border:1.4px solid rgba(255,255,255,.3);display:block}
.ui-label{font-size:.52rem;font-weight:700;letter-spacing:.05em;color:#8f9c88;margin:.1rem 0 0}
.ui-rail{display:grid;grid-template-columns:repeat(5,1fr);gap:.32rem;min-height:0;}
.ui-poster{position:relative;display:block;border-radius:5px;overflow:hidden;min-height:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);}
.ui-poster img{width:100%;height:100%;object-fit:cover;display:block}
.ui-poster em{position:absolute;top:.15rem;left:.18rem;font-style:normal;font-size:.42rem;font-weight:800;letter-spacing:.04em;padding:.08rem .22rem;border-radius:3px;}
.ui-chips{display:grid;grid-template-columns:repeat(5,1fr);gap:.28rem;}
.ui-chips span{display:flex;align-items:center;gap:.16rem;font-size:.46rem;font-weight:700;border-radius:4px;padding:.24rem .2rem;justify-content:center;overflow:hidden;white-space:nowrap;}
.ui-chips i{font-style:normal;font-size:.4rem;font-weight:800;padding:.04rem .16rem;border-radius:2px;letter-spacing:.03em;}
.ui-chips b{font-size:.4rem;}

/* floating badges */
.float-card{position:absolute;z-index:4;display:flex;flex-direction:column;gap:.05rem;padding:.7rem .95rem;border-radius:var(--r);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 18px 40px -18px rgba(0,0,0,.9);}
.float-card b{font-size:1.05rem;font-weight:800;line-height:1.1;}
.float-card span{font-size:.7rem;font-weight:600;white-space:nowrap;}

/* ---------- shared components ----------
   .ico and .tick are used by the feature cards,the trust cards,pricing
   and every landing and article page. They were defined inside the old
   bento block; restored verbatim here so removing that block is safe. */
.ico{
  display:grid;place-items:center;width:44px;height:44px;flex:none;
  border-radius:13px;margin-bottom:1rem;
  background:linear-gradient(150deg,rgba(163,230,53,.24),rgba(163,230,53,.12));
  border:1px solid rgba(163,230,53,.3);
}
.ico svg{width:21px;height:21px;fill:none;stroke:#b8e558;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tick{display:flex;flex-direction:column;gap:.5rem;margin-top:1.1rem}
.tick li{position:relative;padding-left:1.55rem;color:var(--muted);font-size:.92rem}
.tick li::before{content:"";position:absolute;left:0;top:.52em;width:14px;height:8px;border-left:2px solid var(--lime);border-bottom:2px solid var(--lime);transform:rotate(-45deg);border-radius:1px;}

/* ---------- players ---------- */
.player-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.player h3{font-size:1.1rem;margin-bottom:.5rem}

/* ---------- showcase ---------- */
.showcase-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--gap)}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);position:relative}
.step h3{font-size:1.1rem;margin-bottom:.45rem}

/* ---------- pricing ---------- */
.price-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);align-items:stretch}
.plan{
  position:relative;display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(1.5rem,2.6vw,1.9rem);
  transition:transform .22s var(--ease),border-color .22s var(--ease)}
.plan:hover{transform:translateY(-4px);border-color:rgba(163,230,53,.35)}
.plan-name{font-size:1.05rem;font-weight:700;margin-bottom:.35rem;}
.plan-price{font-size:clamp(2.3rem,1.9rem + 1.6vw,3rem);font-weight:800;letter-spacing:-.045em;line-height:1;}
.plan-price .cur{font-size:.5em;font-weight:700;vertical-align:.55em;margin-right:.06em;}
.plan-note{color:var(--dim);font-size:.855rem;margin-top:.5rem;font-weight:600;}
.plan .tick{flex:1;margin-top:1.35rem;margin-bottom:1.6rem}
.plan .tick li{font-size:.885rem}

.plan-flag{position:absolute;top:-1px;right:1.35rem;font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:.3rem .7rem;border-radius:0 0 8px 8px;}
.price-foot{margin-top:2rem;color:var(--dim);font-size:.92rem;max-width:60ch}
.price-foot a{color:#b8e558;font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* ---------- trust ---------- */
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.trust-card h3{font-size:1.05rem;margin-bottom:.5rem}

/* ---------- faq ---------- */
.faq-list{display:flex;flex-direction:column;gap:.7rem}
.faq-item{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:border-color .2s var(--ease)}

.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.05rem 1.3rem;cursor:pointer;list-style:none;font-weight:700;font-size:1rem;letter-spacing:-.015em;}
.faq-item summary::-webkit-details-marker{display:none}

.faq-item summary i{
  position:relative;width:16px;height:16px;flex:none;
}
.faq-item summary i::before,.faq-item summary i::after{content:"";position:absolute;border-radius:2px;transition:transform .22s var(--ease),opacity .22s var(--ease);}
.faq-item summary i::before{left:0;top:7px;width:16px;height:2px}
.faq-item summary i::after{left:7px;top:0;width:2px;height:16px}
.faq-item[open] summary i::after{transform:scaleY(0);opacity:0}
.faq-a{padding:0 1.3rem 1.25rem;color:var(--muted);font-size:.95rem;max-width:70ch}
.faq-a a{color:#b8e558;font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ---------- final cta ---------- */
.final-cta{padding-block:var(--sec-y)}
.cta-panel{position:relative;overflow:hidden;text-align:center;border:1px solid rgba(163,230,53,.3);border-radius:clamp(var(--r-lg),4vw,34px);padding:clamp(2.75rem,6vw,4.5rem) var(--pad);background:linear-gradient(160deg,rgba(163,230,53,.19),rgba(163,230,53,.05) 55%,rgba(255,255,255,.03));}
.cta-glow{position:absolute;pointer-events:none;}
.cta-panel h2{position:relative;font-size:clamp(1.75rem,1.2rem + 2.4vw,3rem);margin-bottom:1rem}
.cta-panel p{position:relative;color:var(--muted);max-width:56ch;margin-inline:auto;font-size:1.03em}
.cta-panel .hero-cta{position:relative;justify-content:center}

/* ---------- footer ---------- */
.site-footer{padding-top:clamp(3rem,6vw,4.5rem);}
.footer-top{display:grid;gap:clamp(2rem,4vw,3rem);}
.footer-brand p{color:var(--muted);font-size:.925rem;margin-top:1rem;max-width:38ch}
.footer-brand .brand{margin-bottom:0}
.footer-col h2{font-size:.775rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;margin-bottom:1.1rem;}
.footer-col ul{display:flex;flex-direction:column;gap:.6rem}
.footer-col a{font-size:.93rem;transition:color .18s var(--ease);}

.footer-bottom{display:flex;flex-wrap:wrap;gap:.75rem 2rem;align-items:center;justify-content:space-between;margin-top:clamp(2.5rem,5vw,3.5rem);padding-block:1.5rem;color:var(--dim);font-size:.845rem;}
.footer-disc{max-width:56ch}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:1080px){
  .showcase-grid{grid-template-columns:repeat(3,1fr)}
  .price-grid{grid-template-columns:repeat(2,1fr)}
  .trust-grid{grid-template-columns:repeat(2,1fr)}
  .footer-top{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:span 2}
}

@media (max-width:900px){
  .nav{
    position:fixed;inset:76px 0 auto 0;
    flex-direction:column;align-items:stretch;gap:.25rem;
    background:rgba(6,9,19,.97);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line);
    padding:1rem var(--pad) 1.5rem;
    transform:translateY(-12px);opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;
    max-height:calc(100dvh - 76px);overflow-y:auto;
  }
  .nav.open{transform:none;opacity:1;visibility:visible;pointer-events:auto}
  .nav>a{padding:.85rem .6rem;font-size:1.02rem;border-radius:12px}
  .nav-cta{margin-left:0;margin-top:.75rem;justify-content:center}
  .burger{display:grid}
  .site-header{background:rgba(7,10,7,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
}

@media (max-width:620px){
  .price-grid{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr}
  .footer-brand{grid-column:span 1}

  .footer-bottom{flex-direction:column;align-items:flex-start}
}

@media (max-width:400px){
}

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .btn:hover,.player:hover,.plan:hover,.trust-card:hover,.show-card:hover{transform:none}
  .show-card:hover img{transform:none}

}

/* ---------- legal / document pages ---------- */
.legal{padding-block:clamp(3rem,7vw,5rem) var(--sec-y)}
.legal-head{margin-bottom:2.5rem;padding-bottom:2rem;border-bottom:1px solid var(--line)}
.legal-head h1{font-size:clamp(1.9rem,1.3rem + 2.6vw,3rem);margin-bottom:.85rem}
.legal-head p{color:var(--muted)}
.legal-body h2{font-size:clamp(1.2rem,1.05rem + .7vw,1.5rem);margin:2.5rem 0 .85rem}
.legal-body h2:first-child{margin-top:0}
.legal-body p{color:var(--muted);margin-bottom:1rem;max-width:72ch}
.legal-body ul{display:flex;flex-direction:column;gap:.55rem;margin:0 0 1.25rem;max-width:72ch}
.legal-body li{position:relative;padding-left:1.3rem;color:var(--muted)}
.legal-body li::before{content:"";position:absolute;left:.2rem;top:.72em;width:5px;height:5px;border-radius:50%;}
.legal-body a{color:#b8e558;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.crumbs{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;font-size:.85rem;color:var(--dim);margin-bottom:1.35rem}
.crumbs a{color:#b8e558}
.crumbs span{opacity:.5}

/* =========================================================
   QA pass — fixes verified against rendered screenshots
   ========================================================= */

/* Anchor targets were landing under the sticky header */
section[id],main[id]{scroll-margin-top:92px}

/* Live-TV card art: the rounded "waves" rendered as clipped domes.
   Replaced with an equaliser bar row that reads as a live signal. */

/* Step rail used to run past the final step. Draw it segment by segment
   between consecutive circles instead of across the whole row. */
.steps::before{display:none;}
@media (max-width:900px){}

/* Keep the pricing feature lists on a shared baseline across all four plans */
.plan-note{min-height:2.9em;}

/* The final-CTA glow sat too far below the panel to be visible */
.cta-glow{inset:auto -20% -55% -20%;height:380px;}
.cta-panel{box-shadow:inset 0 1px 0 rgba(255,255,255,.09);}

/* Let the browser even out heading line lengths (progressive enhancement) */
.hero-copy h1,.sec-head h2,.cta-panel h2,.legal-head h1{text-wrap:balance}
.lede,.sec-sub,.cta-panel p{text-wrap:pretty}

/* =========================================================
   Landing / guide pages
   ========================================================= */
.doc{padding-block:clamp(2.5rem,6vw,4rem) var(--sec-y)}
.wrap-doc{max-width:880px}

.doc-head{margin-bottom:clamp(2.5rem,5vw,3.5rem);padding-bottom:clamp(2rem,4vw,2.5rem);border-bottom:1px solid var(--line)}
.doc-head h1{font-size:clamp(1.9rem,1.3rem + 2.7vw,3.1rem);margin-bottom:1.1rem;text-wrap:balance}
.doc-head .lede{max-width:64ch}
.doc-cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}

/* body copy */
.prose{display:flex;flex-direction:column;gap:clamp(2.25rem,4.5vw,3.25rem)}
.prose-block h2{font-size:clamp(1.35rem,1.1rem + 1.1vw,1.85rem);margin-bottom:1rem;text-wrap:balance}
.prose-block h3{font-size:1.1rem;margin:1.75rem 0 .6rem}
.prose-block p{color:var(--muted);margin-bottom:1rem;max-width:68ch}
.prose-block p:last-child{margin-bottom:0}
.prose-block a{color:#b8e558;font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose-block a:hover{color:#d4f08f}
.prose-block strong{color:var(--text);font-weight:700}
.prose-block code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em;border-radius:6px;padding:.12em .4em;}
.prose-block .tick{margin-top:0;margin-bottom:1rem;max-width:68ch}

/* numbered step lists */
.steps-list{counter-reset:st;display:flex;flex-direction:column;gap:.9rem;margin:0 0 1rem;max-width:68ch}
.steps-list li{counter-increment:st;position:relative;padding-left:2.9rem;color:var(--muted)}
.steps-list li::before{
  content:counter(st,decimal-leading-zero);position:absolute;left:0;top:-.1em;
  width:2rem;height:2rem;display:grid;place-items:center;border-radius:50%;
  font-size:.75rem;font-weight:800;color:#fff;
  background:radial-gradient(circle at 30% 25%,#18240f,#080d06);
  border:1px solid rgba(163,230,53,.4);
}

/* comparison tables */
.table-wrap{overflow-x:auto;margin:0 0 1rem;border:1px solid var(--line);border-radius:var(--r);}
.table-wrap table{border-collapse:collapse;width:100%;min-width:520px;font-size:.92rem}
.table-wrap caption{text-align:left;padding:.9rem 1rem .1rem;color:var(--dim);font-size:.85rem;font-weight:600}
.table-wrap th,.table-wrap td{padding:.7rem 1rem;text-align:left;color:var(--muted);}
.table-wrap thead th{font-weight:700;font-size:.83rem;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;}
.table-wrap tbody th{color:var(--text);font-weight:700}
.table-wrap tbody tr:last-child th,.table-wrap tbody tr:last-child td{border-bottom:0}
.table-wrap a{color:#b8e558;font-weight:600;text-decoration:underline;text-underline-offset:2px}

/* related links */
.related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap)}
.related-card{
  display:flex;flex-direction:column;gap:.35rem;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:1.1rem 1.25rem;
  transition:transform .2s var(--ease),border-color .2s var(--ease),background-color .2s var(--ease);
}
.related-card:hover{transform:translateY(-3px);border-color:rgba(163,230,53,.4);background:var(--panel-2)}
.rc-title{font-weight:700;color:var(--text);letter-spacing:-.015em}
.rc-desc{font-size:.88rem;color:var(--muted)}

/* closing CTA */
.doc-cta-panel{
  margin-top:clamp(2.75rem,5vw,4rem);
  border:1px solid rgba(163,230,53,.3);border-radius:var(--r-xl);
  padding:clamp(1.75rem,4vw,2.5rem);
  background:linear-gradient(160deg,rgba(163,230,53,.17),rgba(163,230,53,.05) 60%,rgba(255,255,255,.03));
}
.doc-cta-panel h2{font-size:clamp(1.3rem,1.1rem + .9vw,1.7rem);margin-bottom:.7rem}
.doc-cta-panel p{color:var(--muted);max-width:60ch}
.doc-cta-panel .doc-cta{margin-top:1.35rem}

@media (max-width:620px){
  .related-grid{grid-template-columns:1fr}
  .doc-cta .btn{width:100%}
}

/* Footer gained a fifth column (Devices) — widen the desktop grid to match */
.footer-top{grid-template-columns:1.5fr repeat(4,1fr);}
@media (max-width:1080px){
  .footer-top{grid-template-columns:repeat(3,1fr)}
  .footer-brand{grid-column:span 3}
}
@media (max-width:760px){
  .footer-top{grid-template-columns:repeat(2,1fr)}
  .footer-brand{grid-column:span 2}
}
@media (max-width:480px){
  .footer-top{grid-template-columns:1fr}
  .footer-brand{grid-column:span 1}
}

/* Article byline / editorial metadata */
.byline{margin-top:1.25rem;color:var(--dim);font-size:.875rem;font-weight:600}
.byline a{color:#b8e558;text-decoration:underline;text-underline-offset:3px}
.doc-head .eyebrow{margin-bottom:1rem}

/* Long inline code (example M3U URLs) must wrap rather than push the page wide */
.prose-block code{overflow-wrap:anywhere;word-break:break-word;}

/* Cards inside prose are links,but should not inherit the body-link underline */
.prose-block .related-card,.prose-block .related-card:hover{text-decoration:none}
.prose-block .related-card .rc-title,.prose-block .related-card .rc-desc{text-decoration:none}
.prose-block .related-card .rc-title{color:var(--text)}

/* ---------- hero responsive ---------- */
@media (max-width:1024px){
  .hero-inner{gap:2.25rem}
  .fc-1{left:-2%}
  .fc-2{right:-2%}
  .ht-txt b{font-size:.85rem}
  .ht-txt span{font-size:.74rem}
}
@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr;gap:3rem}
  .hero-visual{max-width:580px;width:100%;margin-inline:auto}
  .hero .lede{max-width:none}
  .stage::before{background:radial-gradient(50% 46% at 50% 46%,rgba(163,230,53,.26),transparent 72%)}
  .hero-glow{height:760px}
}
@media (max-width:620px){
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{width:100%}
  .hero-trust{gap:.9rem 1.2rem}
  .hero-trust li{flex:1 1 100%}
  .float-card{padding:.55rem .75rem}
  .float-card b{font-size:.92rem}
  .float-card span{font-size:.63rem}
  .fc-1{left:0;bottom:14%}
  .fc-2{right:0;top:5%}
  .ui-chips{grid-template-columns:repeat(3,1fr)}
  .ui-chips span:nth-child(n+4){display:none}
  .hero-glow{height:600px;background:
    radial-gradient(54% 38% at 30% 24%,rgba(163,230,53,.20),transparent 72%),
    radial-gradient(50% 34% at 72% 60%,rgba(132,204,22,.20),transparent 74%)}
}
@media (max-width:400px){
  .ui-rail{grid-template-columns:repeat(4,1fr)}
  .ui-rail .ui-poster:nth-child(5){display:none}
  .ui-pills span:nth-child(n+4){display:none}
  .ui-chips{grid-template-columns:repeat(2,1fr)}
  .ui-chips span:nth-child(n+3){display:none}
}
@media (prefers-reduced-motion:reduce){
  .hero .btn-flame:hover{transform:none}
}

/* ---------- hero: composition fixes from render review ---------- */
/* Posters were stretching to fill the screen and pushing the channel row
   out of view. Give them a fixed shape and let the UI sit naturally. */
.ui-rail{flex:0 0 auto;}

.ui{justify-content:flex-start;}

/* Float cards were sitting on top of the interface. Move them onto the
   bezel and the console instead of the screen. */
.fc-1{left:-7%;bottom:1%;}
.fc-2{right:-6%;top:-5%;}

/* A media console rather than a thin bar */
.stage{padding-bottom:12%;}
.console{height:15%;left:-11%;right:-11%;border-radius:7px;}
.console::before{
  content:"";position:absolute;left:8%;right:8%;top:52%;bottom:16%;border-radius:3px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(0,0,0,.25));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.tv-feet{bottom:-11px;padding:0 16%;}
.tv-feet i{width:40px;height:11px;}

/* Three trust items on one row,aligned,instead of wrapping 2 + 1 */
.hero-trust{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem .9rem;}
.hero-trust li{flex:initial;}
.ht-ico{width:30px;height:30px;border-radius:9px;}
.ht-ico svg{width:15px;height:15px;}
.ht-txt b{font-size:.82rem;line-height:1.25;}
.ht-txt span{font-size:.72rem;}
@media (max-width:620px){
  .hero-trust{grid-template-columns:1fr;gap:.85rem}
}

/* Keep the second label attached to its chip row instead of stranding it */

/* Trim dead space under the hero */
.hero{padding-block:clamp(2.75rem,6vw,5rem) clamp(3rem,6vw,5.25rem);}

/* Interface was leaving a dead band between the poster row and the channel
   row. Shorter screen + taller posters so the UI fills its own frame. */
.tv-screen{aspect-ratio:16/9;}
.ui-poster{aspect-ratio:2/3.3;}
.ui-label:nth-of-type(2){margin-top:.05rem;}
.ui-chips{margin-top:auto;}

/* ===============================================================
   COLOUR SYSTEM
   Lime appears in seven places only: primary buttons,the active nav
   item,tick marks,icon glyphs,the focus ring,the eyebrow dot,and
   the featured plan. Everything else is dark surface + white/gray.
   =============================================================== */

/* ---- surfaces & structure ---------------------------------- */

.player,.plan,.related-card,.faq-item,.float-card{
  background:var(--surface);border-color:var(--line);
}
.table-wrap{border-color:var(--line);}

.table-wrap th,.table-wrap td{border-bottom-color:var(--line);}

/* hover is a lift and a lighter surface — not a colour change */

/* ---- typography -------------------------------------------- */
h1,h2,h3{color:var(--text);}
.hero-copy h1{color:var(--text);}
/* the headline is white; lime lives in the button beneath it */
.hero-copy h1 .grad{display:block;background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--text);}
.h1-lead{color:var(--text);}
.lede,.sec-sub,.prose-block p,.faq-a p,.rc-desc,.plan-note,.footer-brand p,.doc-cta-panel p,.cta-panel p{color:var(--text-2)}
.byline,.crumbs,.footer-bottom,.price-foot,.table-wrap caption,.ui-label{color:var(--text-3)}
.tick li,.legal-body p,.legal-body li{color:var(--text-2)}
.prose-block strong,.table-wrap tbody th,.rc-title{color:var(--text)}

/* ---- the eyebrow: gray label,single lime dot --------------- */
.eyebrow,.hero .eyebrow{color:var(--text-3);}
.eyebrow .dot,.hero .eyebrow .dot{background:var(--lime);box-shadow:none;width:5px;height:5px}

/* ---- links: off-white,lime only on hover ------------------- */
.prose-block a,.legal-body a,.faq-a a,.table-wrap a,.price-foot a,.crumbs a,.byline a{color:var(--text);}

/* ---- buttons: the primary action is the loudest thing ------- */
.btn-primary,.hero .btn-flame,.nav-cta{border-color:transparent;box-shadow:none;}

.btn-ghost,.hero .btn-ghost{border-color:var(--line-2);}

/* ---- icons: small lime glyph on a dark tinted chip ---------- */

.ico svg,.ht-ico svg{stroke:var(--lime);fill:none}

/* tick marks stay lime — they are functional,and they are tiny */
.tick li::before,.legal-body li::before{border-color:var(--lime);background:transparent}
.legal-body li::before{background:var(--lime);}

/* ---- decoration loses its colour ---------------------------- */
.tile{border:1px solid var(--line-2)}

/* ---- ambient light: almost none ----------------------------- */

.hero::after{opacity:.5;}

.cta-panel,.doc-cta-panel{
  background:var(--surface);border-color:var(--line-2);box-shadow:none;
}

/* ---- pricing: one featured card,marked by border not fill --- */
.plan-featured{border-color:var(--line-accent);}

.plan-price{color:var(--text);}

.plan-name{color:var(--text-2);}

/* ---- steps -------------------------------------------------- */
.step-num{box-shadow:none;}

/* ---- FAQ ---------------------------------------------------- */

.faq-item summary{color:var(--text);}

/* ---- header & footer ---------------------------------------- */
.site-header.stuck{border-bottom-color:var(--line);}
.site-footer{border-top-color:var(--line);}
.footer-col h2{color:var(--text-3);}
.footer-bottom{border-top-color:var(--line);}

/* ---- focus: lime,because it must be unmistakable ----------- */

/* ---- the TV interface: one lime accent,rest neutral -------- */

.ui-logo b{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--lime);}

.ui-chips span{border-color:var(--line);}
.float-card{border-color:var(--line-2);}
.float-card b{background:none;-webkit-background-clip:border-box;background-clip:border-box;}

.console::after{background:linear-gradient(180deg,rgba(163,230,53,.10),transparent);}

/* ---- brand mark keeps the gradient; it is 36px ------------- */
.brand-text span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}

/* ---- inline code -------------------------------------------- */
.prose-block code{border-color:var(--line);}

/* Links need an affordance at rest. White text with a lime underline gives
   one without putting lime type through every paragraph. */
.prose-block a,.legal-body a,.faq-a a,.table-wrap a,.price-foot a,.crumbs a,.byline a{text-decoration:underline;text-decoration-color:rgba(163,230,53,.55);text-underline-offset:3px;text-decoration-thickness:1px;}
.prose-block a:hover,.legal-body a:hover,.faq-a a:hover,.table-wrap a:hover,.price-foot a:hover,.crumbs a:hover,.byline a:hover{color:var(--lime);text-decoration-color:var(--lime);}
/* the TV's channel row was five lime chips in a cluster — calm it down */

/* ===============================================================
   WhatsApp
   Brand green is reserved for WhatsApp and always travels with the
   mark,so it reads as a channel rather than a second site accent.
   The lime CTA stays the primary action.
   =============================================================== */

/* header: icon only in the bar,labelled inside the mobile menu */
.wa-nav{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.5rem .62rem;border-radius:100px;flex:none;
  color:var(--wa);background:rgba(37,211,102,.09);
  border:1px solid rgba(37,211,102,.28);
  transition:background-color .18s var(--ease),border-color .18s var(--ease);
}
.wa-nav:hover{background:rgba(37,211,102,.17);border-color:rgba(37,211,102,.55);color:var(--wa)}
.wa-nav svg{width:17px;height:17px;fill:currentColor;flex:none}
.wa-nav span{display:none}

/* in-page secondary action: dark button,green mark */
.btn-wa{background:transparent;color:var(--text);border-color:rgba(37,211,102,.34)}
.btn-wa:hover{background:rgba(37,211,102,.10);border-color:rgba(37,211,102,.6);color:var(--text);transform:translateY(-2px)}
.wa-ico{display:inline-flex;align-items:center;color:var(--wa);flex:none}
.wa-ico svg{width:1.15em;height:1.15em;fill:currentColor}
/* on the lime CTA the mark inherits the dark button text for contrast */
.btn-flame .wa-ico,.btn-primary .wa-ico{color:currentColor}

/* floating button */
.wa-fab{
  position:fixed;z-index:95;
  right:clamp(1rem,2.5vw,1.75rem);
  bottom:clamp(1rem,2.5vw,1.75rem);
  width:54px;height:54px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--wa);color:#fff;
  box-shadow:0 12px 30px -10px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.10);
  transition:transform .2s var(--ease),background-color .2s var(--ease);
}
.wa-fab svg{width:28px;height:28px;fill:currentColor}
.wa-fab:hover{background:var(--wa-deep);transform:translateY(-2px)}
.wa-fab:focus-visible{outline:2px solid #fff;outline-offset:3px}
@supports (padding:max(0px)){
  .wa-fab{bottom:max(clamp(1rem,2.5vw,1.75rem),env(safe-area-inset-bottom, 0px))}
}
@media (max-width:900px){
  /* inside the mobile menu the link becomes a normal labelled row */
  .wa-nav{justify-content:flex-start;padding:.85rem .6rem;border-radius:12px;font-weight:600;font-size:1.02rem}
  .wa-nav span{display:inline}
  .wa-nav svg{width:19px;height:19px}
}
@media (max-width:620px){
  .wa-fab{width:50px;height:50px}
  .wa-fab svg{width:26px;height:26px}
}
@media (prefers-reduced-motion:reduce){
  .wa-fab:hover,.btn-wa:hover{transform:none}
}

.sec-foot{margin-top:2rem;color:var(--text-2);font-size:.95rem;max-width:62ch}
.sec-foot a{color:var(--text);text-decoration:underline;text-decoration-color:rgba(37,211,102,.6);text-underline-offset:3px}
.sec-foot a:hover{color:var(--wa);text-decoration-color:var(--wa)}
.price-cta{display:flex;justify-content:center;margin-top:2rem}
@media (max-width:620px){.price-cta .btn{width:100%}}

/* ---------- nav: intermediate widths ----------
   With Pricing added the bar needs 767px. Between the mobile breakpoint
   and ~1120px that no longer fits,so spacing tightens rather than the
   items wrapping or the hamburger appearing on a desktop-sized screen. */
@media (min-width:901px) and (max-width:1120px){
  .nav{gap:.1rem}
  .nav>a{padding:.5rem .55rem;font-size:.9rem}
  .nav-cta{margin-left:.4rem;padding:.62rem 1rem}
  .wa-nav{padding:.48rem .5rem}
  .wa-nav svg{width:16px;height:16px}
}

/* ===============================================================
   CONTRAST PASS
   The previous palette had cards at 1.08:1 against the background —
   effectively invisible. Surfaces now step deliberately and borders
   are real hairlines,so the ladder background -> section -> card ->
   heading -> text -> CTA is legible at a glance.
   =============================================================== */

body{background:var(--bg);}
.section-alt{background:var(--bg-alt);border-block:1px solid var(--line);}

/* cards read as a plane,outlined */
.player,.plan,.related-card,.faq-item,.cta-panel,.doc-cta-panel,.table-wrap,.float-card{
  background:var(--surface);border:1px solid var(--line-2);
}
.plan:hover,.related-card:hover{background:var(--surface-2);border-color:var(--line-3);transform:translateY(-3px);}
.table-wrap thead th{background:var(--surface-2);color:var(--text);}
.table-wrap th,.table-wrap td{border-bottom:1px solid var(--line);}

/* text ladder */
h1,h2,h3,.hero-copy h1,.h1-lead,.hero-copy h1 .grad,.rc-title,.prose-block strong,.table-wrap tbody th,.plan-price,.faq-item summary,.step h3,.ht-txt b{color:var(--text)}
.lede,.sec-sub,.prose-block p,.faq-a p,.rc-desc,.footer-brand p,.doc-cta-panel p,.cta-panel p,.tick li,.legal-body p,.legal-body li,.table-wrap td,.sec-foot{color:var(--text-2)}
.byline,.crumbs,.footer-bottom,.price-foot,.table-wrap caption,.ui-label,.plan-note,.plan-name,.ht-txt span,.footer-col h2,.eyebrow{color:var(--text-3)}

/* eyebrow: outlined chip so it reads as a label,not stray text */
.eyebrow,.hero .eyebrow{background:var(--surface);border:1px solid var(--line-2);}

/* nav */
.nav>a{color:var(--text-2);}
.nav>a:hover{color:var(--text);background:var(--surface-2);}
.nav>a[aria-current="page"]{color:var(--lime);background:var(--lime-tint);}
.site-header.stuck{background:rgba(9,10,8,.9);border-bottom:1px solid var(--line);}

/* buttons must be unmistakable against the card behind them */
.btn-primary,.hero .btn-flame,.nav-cta{background:var(--lime);color:var(--on-lime)!important;border:1px solid var(--lime);}
.btn-primary:hover,.hero .btn-flame:hover,.nav-cta:hover{background:var(--lime-hover);border-color:var(--lime-hover);color:var(--on-lime)!important;transform:translateY(-2px);box-shadow:none;filter:none;}
.btn-ghost,.hero .btn-ghost{background:var(--surface);border:1px solid var(--line-3);color:var(--text);}
.btn-ghost:hover,.hero .btn-ghost:hover{background:var(--surface-2);border-color:var(--text-3);color:var(--text);}

/* links: white text,unmistakable lime rule beneath */
.prose-block a,.legal-body a,.faq-a a,.table-wrap a,.price-foot a,.crumbs a,.byline a,.sec-foot a{
  color:var(--text);text-decoration:underline;
  text-decoration-color:var(--lime);text-decoration-thickness:1.5px;text-underline-offset:3px;
}
.prose-block a:hover,.legal-body a:hover,.faq-a a:hover,.table-wrap a:hover,.price-foot a:hover,.crumbs a:hover,.byline a:hover,.sec-foot a:hover{
  color:var(--lime);text-decoration-color:var(--lime);
}
.footer-col a{color:var(--text-2);}
.footer-col a:hover{color:var(--lime);}

/* icons */
.ico,.ht-ico{background:var(--lime-tint);border:1px solid var(--line-accent);}
.ico svg,.ht-ico svg{stroke:var(--lime)}
.tick li::before{border-color:var(--lime);}
.hero-trust svg{stroke:var(--lime);}

/* pricing */
.plan-featured{background:var(--surface-2);border:1px solid var(--lime);box-shadow:none;}
.plan-featured:hover{border-color:var(--lime-hover);background:var(--surface-2);}
.plan-flag{background:var(--lime);color:var(--on-lime);}
.plan-price .cur{color:var(--text-3);}

/* steps,faq,footer */
.step-num{background:var(--surface-2);border:1px solid var(--line-3);color:var(--text);}
.faq-item[open]{background:var(--surface-2);border-color:var(--line-3);}
.faq-item summary:hover{color:var(--lime);}
.faq-item summary i::before,.faq-item summary i::after{background:var(--lime);}
.site-footer{background:var(--bg-alt);border-top:1px solid var(--line);}
.footer-bottom{border-top:1px solid var(--line);}

/* decoration stays quiet */
.tile{border:1px solid var(--line-2)}

/* ambient light stays minimal */
.hero-glow{background:radial-gradient(40% 44% at 68% 34%,rgba(163,230,53,.06),transparent 72%);}
.stage::before{background:radial-gradient(46% 42% at 50% 48%,rgba(163,230,53,.08),transparent 74%);}
.cta-glow{background:radial-gradient(50% 100% at 50% 100%,rgba(163,230,53,.10),transparent 72%);}

/* TV interface */
.ui-pills span{color:var(--text-3);}
.ui-pills span.on{background:var(--lime);color:var(--on-lime);}
.ui-chips span{background:var(--surface-2);border:1px solid var(--line-2);color:var(--text-2);}
.ui-chips i{background:var(--lime-deep);color:var(--lime);}
.ui-chips b{color:var(--text-3);}
.ui-poster em{background:var(--lime);color:var(--on-lime);}
.float-card{background:rgba(37,41,36,.94);border:1px solid var(--line-3);}
.float-card b{color:var(--lime);}
.float-card span{color:var(--text-3);}
.prose-block code{background:var(--surface-2);border:1px solid var(--line-2);color:var(--lime-soft);}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px;}

/* ---------- brand logo ----------
   Supplied lockup used as-is: transparent PNG-style WebP,aspect 3.000.
   Width is set and height stays auto so it can never be distorted. */
.brand-logo{
  display:block;
  width:152px;
  height:auto;
  max-width:100%;
}
.brand{gap:0;}
@media (max-width:620px){
  .brand-logo{width:132px}
}
@media (max-width:360px){
  .brand-logo{width:118px}
}

/* ===============================================================
   WHAT YOU GET  — built from the supplied design reference
   Scoped to .feat so no other section is affected.
   =============================================================== */
.feat{position:relative;isolation:isolate;overflow:hidden}
.feat-glow{
  position:absolute;inset:0 0 auto 0;height:620px;z-index:-1;pointer-events:none;
  background:
    radial-gradient(30% 40% at 14% 16%,rgba(163,230,53,.10),transparent 70%),
    radial-gradient(34% 44% at 84% 26%,rgba(163,230,53,.07),transparent 72%);
}

/* header */
.sec-head-center{max-width:760px;margin-inline:auto;text-align:center}
.sec-head-center .eyebrow{margin-inline:auto}
.sec-head-center h2{margin-bottom:1rem;letter-spacing:-.035em;line-height:1.08}
.sec-head-center h2 .hl{color:var(--lime)}
.sec-head-center .sec-sub{margin-inline:auto;max-width:46ch}

/* grid */
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);align-items:stretch}

/* card */
.fcard{
  display:flex;flex-direction:column;overflow:hidden;
  background:linear-gradient(180deg,#1D211B 0%,#171A15 100%);
  border:1px solid var(--line-2);border-radius:24px;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 18px 40px -30px rgba(0,0,0,.95);
  transition:transform .24s var(--ease),border-color .24s var(--ease),box-shadow .24s var(--ease);
}
.fcard:hover{
  transform:translateY(-4px);border-color:rgba(163,230,53,.42);
  box-shadow:0 1px 0 rgba(255,255,255,.07) inset,0 24px 46px -30px rgba(0,0,0,1),0 0 26px -12px rgba(163,230,53,.28);
}

/* ---------- visual area ---------- */
.fv{
  position:relative;height:216px;flex:none;overflow:hidden;
  background:radial-gradient(90% 80% at 50% 0%,#22271D 0%,#12150F 70%);
  border-bottom:1px solid var(--line);
  transition:filter .24s var(--ease);
}
.fcard:hover .fv{filter:brightness(1.1)}

/* 1 — programme guide */
.fv-guide{padding:14px 0 0 14px}
.epg{
  position:relative;height:100%;border-radius:10px 0 0 0;overflow:hidden;
  background:linear-gradient(180deg,#0E120C,#0A0C08);
  border:1px solid rgba(255,255,255,.10);border-right:0;border-bottom:0;
  box-shadow:0 -6px 26px -12px rgba(163,230,53,.35);
  padding:9px 0 0 9px;font-size:7.4px;
}
.epg-top{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.epg-name{color:var(--lime);font-weight:800;letter-spacing:.06em;font-size:8.4px}
.epg-times{display:flex;gap:26px;color:var(--text-3);font-weight:600}
.epg-row{display:flex;align-items:center;gap:5px;margin-bottom:3.5px}
.epg-ch{
  display:flex;align-items:center;gap:5px;flex:none;width:74px;
  padding:3.5px 6px;border-radius:4px;color:var(--text-2);font-weight:600;
  background:rgba(255,255,255,.05);
}
.epg-ch i{font-style:normal;color:var(--text-3)}
.epg-row.on .epg-ch{background:var(--lime);color:var(--on-lime)}
.epg-row.on .epg-ch i{color:rgba(10,16,4,.65)}
.epg-b{
  display:flex;align-items:center;padding:3.5px 6px;border-radius:4px;
  background:rgba(255,255,255,.045);color:var(--text-2);
  white-space:nowrap;overflow:hidden;font-weight:500;
}
.epg-b.w1{width:64px}
.epg-b.w2{width:104px}
.epg-b.hot{background:rgba(163,230,53,.24);color:#DCF5A6}
.epg-now{
  position:absolute;top:0;bottom:0;left:56%;width:1.5px;background:var(--lime);
  box-shadow:0 0 10px rgba(163,230,53,.75);
}
.epg-now b{
  position:absolute;top:-2px;left:50%;transform:translateX(-50%);
  background:var(--lime);color:var(--on-lime);font-size:7px;font-weight:800;
  letter-spacing:.06em;padding:1.5px 5px;border-radius:4px;
}

/* 2 — on-demand shelf */
.fv-vod{padding:16px 0 0 16px}
.vod-title{display:block;color:var(--text);font-weight:700;font-size:.86rem;margin-bottom:10px}
.vod-row{display:flex;gap:7px;align-items:flex-end}
.vod-p{display:block;width:56px;flex:none;border-radius:6px;overflow:hidden;
  border:1px solid rgba(255,255,255,.10);box-shadow:0 8px 18px -12px rgba(0,0,0,.9)}
.vod-p img{display:block;width:100%;height:82px;object-fit:cover}
.vod-p.lift img{height:94px}
.vod-p.lift{border-color:rgba(163,230,53,.35)}
.vod-foot{display:flex;justify-content:space-between;margin:14px 16px 6px 0;color:var(--text-3);font-size:.68rem;font-weight:600}
.vod-bar{height:4px;border-radius:3px;background:rgba(255,255,255,.10);margin-right:16px;overflow:hidden}
.vod-bar i{display:block;height:100%;width:54%;border-radius:3px;background:var(--lime)}

/* 3 — devices */
.fv-dev{display:grid;place-items:center}
.fv-dev .dv-tv,.fv-dev .dv-tab,.fv-dev .dv-ph{
  position:absolute;display:grid;place-items:center;border-radius:8px;
  background:linear-gradient(165deg,#20241C,#0E110B);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 14px 30px -18px rgba(0,0,0,.95);
}
.fv-dev .dv-tv{width:132px;height:84px;left:14%;top:26%}
.fv-dev .dv-tv::after{content:"";position:absolute;left:50%;bottom:-10px;width:42px;height:4px;
  border-radius:2px;transform:translateX(-50%);background:rgba(255,255,255,.18)}
.fv-dev .dv-tab{width:74px;height:56px;left:48%;top:48%;border-radius:7px}
.fv-dev .dv-ph{width:32px;height:58px;left:70%;top:46%;border-radius:7px}
.fv-dev .dv-tv i,.fv-dev .dv-tab i,.fv-dev .dv-ph i{display:block;line-height:0}
.fv-dev .dv-tv svg{width:34px;height:34px}
.fv-dev .dv-tab svg{width:22px;height:22px}
.fv-dev .dv-ph svg{width:15px;height:15px}
.fv-dev svg{fill:none;stroke:var(--lime);stroke-width:1.6;stroke-linejoin:round}
.fv-dev svg path{fill:var(--lime);stroke:none}
.fv-dev .dv-arc{
  position:absolute;right:-8%;top:50%;transform:translateY(-50%) rotate(-38deg);
  border:1.5px solid rgba(163,230,53,.30);border-radius:50%;
  border-left-color:transparent;border-bottom-color:transparent;
}
.fv-dev .dv-arc.a1{width:96px;height:96px}
.fv-dev .dv-arc.a2{width:150px;height:150px;border-color:rgba(163,230,53,.20);border-left-color:transparent;border-bottom-color:transparent}
.fv-dev .dv-arc.a3{width:206px;height:206px;border-color:rgba(163,230,53,.10);border-left-color:transparent;border-bottom-color:transparent}

/* ---------- card body ---------- */
.fcard-body{display:flex;flex-direction:column;flex:1;padding:clamp(1.3rem,2.3vw,1.65rem)}
.fcard-body .ico{margin-bottom:1rem}
.fcard-body h3{font-size:clamp(1.1rem,1rem + .35vw,1.28rem);line-height:1.22;margin-bottom:.6rem}
.fcard-body>p{color:var(--text-2);font-size:.925rem;margin-bottom:1.15rem}

.flist{display:flex;flex-direction:column;gap:.62rem;margin-bottom:1.35rem}
.flist li{display:flex;align-items:flex-start;gap:.6rem;color:var(--text-2);font-size:.9rem;line-height:1.4}
.flist a{color:var(--text);text-decoration:underline;text-decoration-color:var(--lime);text-decoration-thickness:1.5px;text-underline-offset:3px}
.flist a:hover{color:var(--lime)}
.fchk{
  position:relative;flex:none;width:19px;height:19px;margin-top:.06rem;border-radius:50%;
  background:rgba(163,230,53,.16);border:1px solid rgba(163,230,53,.45);
}
.fchk::after{
  content:"";position:absolute;left:5.5px;top:5px;width:7px;height:3.5px;
  border-left:1.8px solid var(--lime);border-bottom:1.8px solid var(--lime);
  transform:rotate(-45deg);border-radius:1px;
}

/* card CTA */
.fbtn{
  margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:.78rem 1.05rem;border-radius:11px;
  border:1px solid rgba(163,230,53,.34);background:rgba(163,230,53,.06);
  color:var(--lime);font-weight:700;font-size:.92rem;
  transition:background-color .22s var(--ease),border-color .22s var(--ease),transform .22s var(--ease);
}
.fbtn:hover{background:rgba(163,230,53,.14);border-color:rgba(163,230,53,.6);transform:translateY(-1px)}
.chev{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}

/* ---------- WhatsApp strip ---------- */

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .fv{height:198px}
  .epg{font-size:7px}
  .epg-b.w2{width:88px}
  .dv-tv{width:114px;height:72px}
}
@media (max-width:900px){
  .fgrid{grid-template-columns:repeat(2,1fr)}
  .fgrid .fcard:last-child{grid-column:span 2}
  .fgrid .fcard:last-child .fv{height:186px}
}
@media (max-width:680px){
  .fgrid{grid-template-columns:1fr}
  .fgrid .fcard:last-child{grid-column:span 1}
  .fv,.fgrid .fcard:last-child .fv{height:184px}
  .fcard-body{padding:1.2rem}
  .sec-head-center h2 br{display:none}
}
@media (max-width:400px){
  .fv,.fgrid .fcard:last-child .fv{height:164px}
  .epg{font-size:6.4px}
  .epg-ch{width:64px}
  .epg-b.w1{width:52px}
  .epg-b.w2{width:74px}
  .vod-p{width:46px}
  .vod-p img{height:68px}
  .vod-p.lift img{height:78px}
  .dv-tv{width:98px;height:62px;left:8%}
  .dv-tab{width:62px;height:47px;left:46%}
  .dv-ph{width:27px;height:49px;left:72%}
}
@media (prefers-reduced-motion:reduce){
  .fcard:hover,.fbtn:hover{transform:none}
}

/* ---------- feature visuals: proportion fixes against the reference ---------- */
/* EPG was leaving dead space below the last row */
.epg{padding:10px 0 0 10px}
.epg-row{margin-bottom:5px}
.epg-ch,.epg-b{padding:4.5px 6px}

/* device cluster was undersized and drifting right */
.fv-dev .dv-tv{width:148px;height:94px;left:8%;top:20%}
.fv-dev .dv-tab{width:86px;height:64px;left:44%;top:44%}
.fv-dev .dv-ph{width:34px;height:64px;left:70%;top:41%}
.fv-dev .dv-tv svg{width:38px;height:38px}
.fv-dev .dv-tab svg{width:25px;height:25px}
.fv-dev .dv-ph svg{width:16px;height:16px}
.fv-dev .dv-arc{right:-26%;top:44%}
.fv-dev .dv-arc.a1{width:120px;height:120px}
.fv-dev .dv-arc.a2{width:180px;height:180px}
.fv-dev .dv-arc.a3{width:242px;height:242px}

@media (max-width:1080px){
  .fv-dev .dv-tv{width:130px;height:82px}
  .fv-dev .dv-tab{width:76px;height:57px}
  .fv-dev .dv-ph{width:31px;height:57px}
}
@media (max-width:400px){
  .fv-dev .dv-tv{width:112px;height:71px;left:6%}
  .fv-dev .dv-tab{width:66px;height:50px;left:44%}
  .fv-dev .dv-ph{width:28px;height:51px;left:72%}
  .epg-row{margin-bottom:3.5px}
  .epg-ch,.epg-b{padding:3.5px 5px}
}

/* the continue-watching bar was clipped by 7px in the shorter mobile visual */
@media (max-width:400px){
  .vod-title{margin-bottom:7px}
  .vod-foot{margin-top:9px;margin-bottom:4px}
}

/* ===============================================================
   DEVICES — built from the supplied design reference.
   Illustrations are generic silhouettes: the reference's Samsung,LG,Amazon,Android,Apple and MAG marks are not licensed to this project.
   =============================================================== */
.dev-sec{position:relative;isolation:isolate;overflow:hidden}
.dcard-body h3{font-size:1.02rem;line-height:1.25;margin-bottom:.4rem}
.dcard-body h3 a{color:var(--text);text-decoration:underline;text-decoration-color:var(--lime);text-decoration-thickness:1.5px;text-underline-offset:3px}
.dcard-body h3 a:hover{color:var(--lime)}

/* ---------- illustration stage ---------- */
.dcard-art{
  position:relative;display:block;height:158px;flex:none;overflow:hidden;
  margin-bottom:1.15rem;
}

/* shared device chrome */
.dcard-art .dv-tv{
  background:linear-gradient(162deg,#2B3026 0%,#14170F 62%,#0C0E08 100%);
  border:1px solid rgba(255,255,255,.17);
  box-shadow:0 12px 24px -14px rgba(0,0,0,.95);
}

/* 1 — smart TV */
.art-tv .dv-tv{width:132px;height:80px;left:50%;top:30%;transform:translateX(-50%);border-radius:7px}

/* 2 — streaming stick + remote */
.art-stick .dv-stick{width:92px;height:26px;left:14%;top:44%;border-radius:13px}

/* 3 — android box */
.art-abox .dv-box{width:74px;height:52px;left:16%;top:36%;border-radius:9px}

/* 4 — media cube */
.art-atv .dv-cube{width:62px;height:62px;left:20%;top:34%;border-radius:11px}

/* 5 — phone + tablet with play marks */
.art-ios .dv-phone{width:38px;height:66px;left:20%;top:32%;border-radius:8px;display:grid;place-items:center}

/* 6 — phone + tablet showing app grids */
.art-droid .dv-phone{width:38px;height:70px;left:22%;top:30%;border-radius:8px;
  display:grid;grid-template-columns:repeat(2,1fr);gap:4px;padding:9px 7px;align-content:start}

/* 7 — laptop */
.art-laptop .dv-lap{width:118px;height:74px;left:50%;top:28%;transform:translateX(-50%);border-radius:7px 7px 2px 2px}

/* 8 — set-top box */
.art-mag .dv-mag{width:86px;height:44px;left:14%;top:40%;border-radius:8px}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .dgrid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:860px){
}
@media (max-width:520px){
  .dcard-body h3{font-size:.98rem}
  .sec-head-center h2 br{display:none}
  /* scale the hardware down for the compact row layout */
  .art-tv .dv-tv{width:92px;height:56px}
}
@media (prefers-reduced-motion:reduce){
}

/* ---------- device illustrations: proportion and light refinement ----------
   The pool was reading as a grey-green smudge; it is now tighter,softer
   and sits behind the hardware. Devices scaled up to fill the stage. */
.dcard-art{height:168px}

/* 1 — TV */
.art-tv .dv-tv{width:152px;height:92px;top:26%}

/* 2 — stick + remote */
.art-stick .dv-stick{width:104px;height:30px;left:10%;top:42%;border-radius:15px}

/* remote,shared */
.dcard-art .dv-rem{width:34px;height:88px;right:12%;top:20%}

/* 3 — android box */
.art-abox .dv-box{width:88px;height:60px;left:12%;top:34%}

/* 4 — media cube */
.art-atv .dv-cube{width:74px;height:74px;left:16%;top:30%}

/* 5 — phone + tablet */
.art-ios .dv-phone{width:46px;height:80px;left:15%;top:28%}

/* 6 — android phone + tablet */
.art-droid .dv-phone{width:46px;height:84px;left:16%;top:26%;padding:10px 8px;gap:5px}

/* 7 — laptop */
.art-laptop .dv-lap{width:138px;height:86px;top:24%}

/* 8 — set-top box */
.art-mag .dv-mag{width:100px;height:52px;left:10%;top:38%}

@media (max-width:860px){ }

/* ---------- devices: compact mobile layout ----------
   Must come after the desktop refinement block above: media queries add
   no specificity,so the unmediated rules there would otherwise win. */
@media (max-width:520px){
  .dcard{flex-direction:row;align-items:center;border-radius:16px}
  .dcard-art{width:126px;height:106px;flex:none;margin-bottom:0}
  .dcard-art::before{width:92px;height:70px;filter:blur(13px)}
  .dcard-body{padding:.95rem .95rem .95rem 0}
  .dcard-body h3{font-size:.97rem}
  .dcard-body p{font-size:.82rem}

  .art-tv .dv-tv{width:88px;height:54px;top:24%}
  .art-tv .tile{width:10px;height:10px}
  .art-tv .dv-foot{width:30px;bottom:16%}
  .art-tv .dv-foot::after{top:-9px;height:9px;width:8px}

  .art-stick .dv-stick{width:54px;height:17px;left:6%;top:44%;border-radius:9px}
  .art-stick .dv-stick i{width:8px;height:10px;right:-7px}

  .dcard-art .dv-rem{width:20px;height:52px;right:8%;top:24%;border-radius:6px}
  .dcard-art .dv-rem.slim{width:18px;height:56px}
  .dcard-art .dv-rem.tall{height:58px}
  .dcard-art .dv-rem .pad{width:12px;height:12px;top:6px}
  .dcard-art .dv-rem .ring{width:11px;height:11px;top:6px}
  .dcard-art .dv-rem .key{width:8px;height:2.5px}
  .dcard-art .dv-rem .key:nth-of-type(2){top:25px}
  .dcard-art .dv-rem .key:nth-of-type(3){top:32px}
  .dcard-art .dv-rem .key:nth-of-type(4){top:39px}

  .art-abox .dv-box{width:52px;height:36px;left:6%;top:34%}
  .art-abox .led{width:12px;left:8px;bottom:7px}

  .art-atv .dv-cube{width:44px;height:44px;left:10%;top:30%}
  .art-atv .dv-cube::after{width:14px;height:14px}

  .art-ios .dv-phone{width:26px;height:46px;left:8%;top:26%}
  .art-ios .dv-tab{width:56px;height:42px;right:8%;top:30%}
  .art-ios svg{width:13px;height:13px}
  .art-ios .dv-tab svg{width:17px;height:17px}
  .art-ios .bar{left:8px;right:8px;bottom:6px}

  .art-droid .dv-phone{width:26px;height:48px;left:8%;top:24%;padding:5px 4px;gap:3px}
  .art-droid .dv-tab{width:54px;height:42px;right:8%;top:28%;padding:6px;gap:3px}
  .art-droid i{height:6px}

  .art-laptop .dv-lap{width:80px;height:50px;top:22%}
  .art-laptop .scr{padding:5px 5px 5px 18px;gap:2px}
  .art-laptop .side{width:10px}
  .art-laptop .row{height:4px}
  .art-laptop .dv-base{width:100px;height:4px;bottom:16%}

  .art-mag .dv-mag{width:58px;height:30px;left:6%;top:38%}
  .art-mag .slot{width:17px;left:8px;bottom:7px}
  .art-mag .dv-mag::after{width:4px;height:4px;right:8px;bottom:7px}
}

/* deep links from the players cards land clear of the sticky header */
h2[id]{scroll-margin-top:92px}

/* ===============================================================
   DEVICES — the supplied artwork IS the section,shown whole and
   unmodified: no crop,no overlay,no frame,nothing drawn on it.
   The file already carries its own heading,cards and WhatsApp bar,so no HTML repeats them. Depth comes from an ambient glow behind
   it; the section background matches the image's own edge colour
   (#010103,sampled from the file) so it seats with no seam.
   Transparent hotspots make the regions it depicts actually work,and the hairline index below carries the same words as real text
   for search engines and for phones,where the artwork is too small
   to read.
   =============================================================== */
.dev-sec{background:#010103;border-block:1px solid var(--line)}

.dvx-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* --- the artwork --- */
.dvx-shot{position:relative;margin:0 0 3.4rem;transition:transform .3s var(--ease)}
.dvx-shot::before{
  content:"";position:absolute;inset:-5% -4% -9%;z-index:-1;pointer-events:none;
  background:radial-gradient(52% 54% at 50% 54%,rgba(163,230,53,.20),transparent 72%);
  filter:blur(48px);opacity:.8;transition:opacity .3s var(--ease);
}
.dvx-shot img{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:1536/1024}
.dvx-shot:hover{transform:translateY(-3px)}
.dvx-shot:hover::before{opacity:1}

/* --- transparent click targets over the regions the artwork shows --- */
.dvx-hot{
  position:absolute;display:block;border-radius:14px;
  left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);
  width:calc(var(--w) * 1%);height:calc(var(--h) * 1%);
  background:transparent;
  box-shadow:0 0 0 1px transparent, 0 0 0 0 rgba(163,230,53,0);
  transition:box-shadow .24s var(--ease),background .24s var(--ease);
}
.dvx-hot:hover,.dvx-hot:focus-visible{
  outline:none;background:rgba(163,230,53,.06);
  box-shadow:0 0 0 1px rgba(163,230,53,.5), 0 0 26px -6px rgba(163,230,53,.35);
}

/* --- hairline index: no boxes,no repeated cards --- */
.dvx-index{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1.7rem 2.2rem;list-style:none;margin:0;padding:0;
}
.dvx-index li{display:flex;flex-direction:column;gap:.3rem;padding-top:1rem;border-top:1px solid var(--line)}
.dvx-index b{font-size:1rem;font-weight:700;letter-spacing:-.012em;color:var(--text)}
.dvx-index b a{display:inline-flex;align-items:baseline;gap:.34rem;color:inherit;text-decoration:none;
  transition:color .22s var(--ease)}
.dvx-index b a::after{content:"\2192";font-weight:400;color:var(--lime);opacity:0;transform:translateX(-5px);
  transition:opacity .22s var(--ease),transform .22s var(--ease)}
.dvx-index b a:hover,.dvx-index b a:focus-visible{color:var(--lime)}
.dvx-index b a:hover::after,.dvx-index b a:focus-visible::after{opacity:1;transform:translateX(0)}
.dvx-index span{color:var(--text-3);font-size:.875rem;line-height:1.5}
.dvx-index span a{color:var(--text-2);text-decoration:underline;text-decoration-color:rgba(163,230,53,.45);
  text-underline-offset:3px;transition:color .22s var(--ease),text-decoration-color .22s var(--ease)}
.dvx-index span a:hover{color:var(--lime);text-decoration-color:var(--lime)}

/* --- responsive --- */
@media (max-width:1100px){
  .dvx-index{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem 2rem}
  .dvx-shot{margin-bottom:2.8rem}
}
@media (max-width:640px){
  .dvx-shot{margin-bottom:2.2rem}
  .dvx-shot::before{filter:blur(34px)}
  .dvx-hot{border-radius:8px}
  .dvx-index{gap:1.25rem 1.4rem}
  .dvx-index li{padding-top:.85rem}
  .dvx-index b{font-size:.95rem}
  .dvx-index span{font-size:.845rem}
}
@media (max-width:400px){
  .dvx-index{grid-template-columns:1fr;gap:1rem}
}
@media (prefers-reduced-motion:reduce){
  .dvx-shot:hover{transform:none}
  .dvx-index b a::after{transition:none}
}

/* ===============================================================
   WHY FELIXIPTV — built from the supplied design reference.
   Two-column intro with a lit TV stage on the right,then four
   numbered benefit cards. The stage uses the project's own
   logo.webp; everything else around it is drawn in CSS.
   =============================================================== */
.wf-sec{position:relative;isolation:isolate;overflow:hidden}
.wf-sec .eyebrow{color:var(--lime);border-color:rgba(163,230,53,.42);background:rgba(163,230,53,.07)}
.wf-sec .eyebrow .dot{background:var(--lime)}
.wf-amb{
  position:absolute;inset:0 0 auto 0;height:620px;z-index:-1;pointer-events:none;
  background:radial-gradient(38% 44% at 76% 20%,rgba(163,230,53,.10),transparent 70%);
}

/* ---------- top: intro + stage ---------- */
.wf-top{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:2rem 3.5rem;align-items:center;margin-bottom:3.6rem;
}
.wf-intro h2{
  margin:0 0 1.05rem;letter-spacing:-.035em;line-height:1.06;
  font-size:clamp(1.95rem,4vw,3.15rem);
}
.wf-intro h2 .hl{color:var(--lime)}
.wf-sub{color:var(--text-2);font-size:1.02rem;line-height:1.65;margin:0;max-width:46ch}

/* ---------- the stage ---------- */
.wf-stage{position:relative;aspect-ratio:1/.78;min-height:270px}

.wf-orbit{
  position:absolute;left:50%;top:58%;translate:-50% -50%;
  border:1px solid rgba(163,230,53,.16);border-radius:50%;pointer-events:none;
}
.wf-orbit-a{width:104%;height:52%;rotate:-9deg}
.wf-orbit-b{width:86%;height:38%;rotate:6deg;border-color:rgba(163,230,53,.10)}

.wf-spark{
  position:absolute;width:4px;height:4px;border-radius:50%;
  background:var(--lime);box-shadow:0 0 9px 2px rgba(163,230,53,.6);
}
.wf-s1{left:6%;top:40%}
.wf-s2{right:9%;top:30%;width:3px;height:3px}
.wf-s3{right:3%;top:57%}
.wf-s4{left:13%;top:20%;width:3px;height:3px;opacity:.7}

/* the set */
.wf-set{position:absolute;left:50%;top:4%;translate:-50% 0;width:72%;display:block}
.wf-screen{
  display:grid;place-items:center;
  aspect-ratio:16/10;padding:8% 10%;
  border:1px solid var(--line-2);
  /* elliptical radii read as a gently curved panel */
  border-radius:18px/26px;
  background:
    radial-gradient(120% 90% at 50% 0%,rgba(163,230,53,.10),transparent 62%),
    linear-gradient(168deg,#191D15 0%,#0A0C08 58%);
  box-shadow:
    0 0 0 1px rgba(163,230,53,.10) inset,
    0 1px 0 rgba(255,255,255,.07) inset,
    0 26px 60px -34px rgba(0,0,0,1),
    0 0 60px -18px rgba(163,230,53,.30);
}
.wf-screen img{
  display:block;width:100%;max-width:230px;height:auto;
  filter:drop-shadow(0 0 18px rgba(163,230,53,.42));
}
.wf-neck{
  position:relative;display:block;width:14%;height:8%;margin:0 auto;
  background:linear-gradient(180deg,#2B3323 0%,#141A0E 100%);
  border-inline:1px solid rgba(163,230,53,.22);
}
.wf-neck::after{content:"";position:absolute;left:-115%;right:-115%;bottom:-2px;height:3px;
  border-radius:2px;background:linear-gradient(90deg,transparent,rgba(163,230,53,.55),transparent)}

/* the podium it stands on */
.wf-pod{position:absolute;left:50%;bottom:6%;translate:-50% 0;width:60%;aspect-ratio:3/1}
.wf-pod-ring,.wf-pod-core{position:absolute;inset:0;border-radius:50%}
.wf-pod-ring{
  border:2px solid rgba(163,230,53,.62);
  box-shadow:0 0 40px 8px rgba(163,230,53,.30),0 0 0 1px rgba(163,230,53,.16) inset;
  background:radial-gradient(68% 78% at 50% 40%,rgba(163,230,53,.26),rgba(163,230,53,.06) 62%,transparent 80%);
}
.wf-pod-core{
  inset:18% 14%;border:1px solid rgba(163,230,53,.30);
  background:radial-gradient(70% 80% at 50% 40%,rgba(163,230,53,.13),transparent 76%);
}

/* ---------- the four cards ---------- */
.wf-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);
  list-style:none;margin:0;padding:0;
}
.wf-card{
  position:relative;display:flex;flex-direction:column;
  padding:1.55rem 1.4rem 1.3rem;
  border:1px solid var(--line);border-radius:18px;
  background:linear-gradient(180deg,#15180F 0%,#0C0E09 100%);
  transition:transform .24s var(--ease),border-color .24s var(--ease),box-shadow .24s var(--ease);
}
/* the lit left edge from the reference */
.wf-card::before{
  content:"";position:absolute;left:-1px;top:12%;bottom:12%;width:1px;border-radius:1px;
  background:linear-gradient(180deg,transparent,rgba(163,230,53,.6),transparent);
  transition:opacity .24s var(--ease);opacity:.85;
}
.wf-card:hover{
  transform:translateY(-4px);border-color:rgba(163,230,53,.34);
  box-shadow:0 20px 44px -30px rgba(0,0,0,1),0 0 26px -14px rgba(163,230,53,.32);
}
.wf-card:hover::before{opacity:1}

.wf-ico{
  display:grid;place-items:center;width:60px;height:60px;border-radius:50%;
  border:1px solid var(--line-2);background:radial-gradient(80% 80% at 50% 30%,#1C2118,#0D100A);
  margin-bottom:1.3rem;
}
.wf-ico svg{width:25px;height:25px;fill:none;stroke:var(--lime);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wf-card:nth-child(3) .wf-ico svg{fill:var(--lime);stroke:none}
.wf-ico svg.wf-wa{fill:var(--lime);stroke:none;width:26px;height:26px}

.wf-dash{display:block;width:22px;height:3px;border-radius:2px;background:var(--lime);margin-bottom:.9rem}

.wf-card h3{font-size:1.05rem;line-height:1.32;letter-spacing:-.012em;color:var(--text);margin-bottom:.6rem}
.wf-card p{color:var(--text-2);font-size:.9rem;line-height:1.62;margin:0}
.wf-card a{color:var(--lime);font-weight:600;text-decoration:underline;
  text-decoration-color:rgba(163,230,53,.5);text-underline-offset:3px}
.wf-card a:hover{color:var(--lime-hover);text-decoration-color:var(--lime-hover)}

.wf-meter{display:flex;align-items:center;gap:.8rem;margin-top:auto;padding-top:1.5rem}
.wf-meter b{color:var(--lime);font-size:.92rem;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.wf-meter i{flex:1;height:1px;background:linear-gradient(90deg,var(--line-2),rgba(163,230,53,.55))}
.wf-meter em{
  width:7px;height:7px;border-radius:50%;flex:none;background:var(--lime);
  box-shadow:0 0 10px 2px rgba(163,230,53,.55);
}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .wf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .wf-top{grid-template-columns:1fr;gap:2.4rem;margin-bottom:2.8rem}
  .wf-stage{max-width:430px;margin-inline:auto;width:100%}
  .wf-sub{max-width:60ch}
}
@media (max-width:640px){
  .wf-intro h2 br{display:none}
  .wf-top{margin-bottom:2.2rem}
  .wf-stage{min-height:220px}
  .wf-grid{grid-template-columns:1fr}
  .wf-card{padding:1.3rem 1.2rem 1.1rem;border-radius:16px}
  .wf-ico{width:54px;height:54px;margin-bottom:1.1rem}
  .wf-ico svg{width:23px;height:23px}
  .wf-meter{padding-top:1.25rem}
}
@media (max-width:400px){
  .wf-stage{min-height:190px}
  .wf-screen{border-radius:14px/20px}
}
@media (prefers-reduced-motion:reduce){
  .wf-card:hover{transform:none}
}

/* ===============================================================
   IPTV PLAYERS — the supplied artwork is the section's main visual,shown whole and unmodified: no crop,no stretch,nothing drawn on
   top. The file carries its own panels and player rows,so no HTML
   repeats them; it has no heading or WhatsApp line,so those stay as
   real markup. Section background matches the image's own edge
   colour (#010302,sampled from the file) so it seats with no seam.
   Transparent hotspots make the regions it depicts clickable,and the
   hairline index below carries the same words as real text,which is
   what stays legible on a phone.
   =============================================================== */
.pix-sec{position:relative;isolation:isolate;overflow:hidden;background:#010302;border-block:1px solid var(--line)}
.pix-amb{
  position:absolute;inset:0 0 auto 0;height:520px;z-index:-1;pointer-events:none;
  background:radial-gradient(40% 42% at 28% 2%,rgba(163,230,53,.10),transparent 72%);
}

.pix-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* --- header: headline left,supporting copy right --- */
.pix-head{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:1rem 3.5rem;align-items:end;margin-bottom:2.4rem;
  padding-bottom:1.6rem;border-bottom:1px solid var(--line);
}
.pix-head h2{margin:0;letter-spacing:-.035em;line-height:1.07;font-size:clamp(1.85rem,3.6vw,2.75rem)}
.pix-head h2 .hl{color:var(--lime)}
.pix-lede{color:var(--text-2);font-size:.975rem;line-height:1.65;margin:0;max-width:52ch}

/* --- the artwork --- */
.pix-shot{position:relative;margin:0 0 3.2rem;transition:transform .3s var(--ease)}
.pix-shot::before{
  content:"";position:absolute;inset:-5% -4% -8%;z-index:-1;pointer-events:none;
  background:radial-gradient(52% 56% at 46% 50%,rgba(163,230,53,.19),transparent 72%);
  filter:blur(48px);opacity:.8;transition:opacity .3s var(--ease);
}
.pix-shot img{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:1537/1023}
.pix-shot:hover{transform:translateY(-3px)}
.pix-shot:hover::before{opacity:1}

/* --- transparent click targets over the regions the artwork shows --- */
.pix-hot{
  position:absolute;display:block;border-radius:14px;
  left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);
  width:calc(var(--w) * 1%);height:calc(var(--h) * 1%);
  background:transparent;
  transition:box-shadow .24s var(--ease),background .24s var(--ease);
}
.pix-hot:hover,.pix-hot:focus-visible{
  outline:none;background:rgba(163,230,53,.06);
  box-shadow:0 0 0 1px rgba(163,230,53,.5),0 0 26px -6px rgba(163,230,53,.35);
}

/* --- hairline index: no boxes,no repeated cards --- */
.pix-index{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.7rem 2.2rem;list-style:none;margin:0;padding:0;
}
.pix-index li{display:flex;flex-direction:column;gap:.3rem;padding-top:1rem;border-top:1px solid var(--line)}
.pix-index b{font-size:1rem;font-weight:700;letter-spacing:-.012em;color:var(--text)}
.pix-index b a{display:inline-flex;align-items:baseline;gap:.34rem;color:inherit;text-decoration:none;
  transition:color .22s var(--ease)}
.pix-index b a::after{content:"\2192";font-weight:400;color:var(--lime);opacity:0;transform:translateX(-5px);
  transition:opacity .22s var(--ease),transform .22s var(--ease)}
.pix-index b a:hover,.pix-index b a:focus-visible{color:var(--lime)}
.pix-index b a:hover::after,.pix-index b a:focus-visible::after{opacity:1;transform:translateX(0)}
.pix-index span{color:var(--text-3);font-size:.875rem;line-height:1.5}

.pix-foot{margin-top:2.6rem;max-width:62ch}

/* --- responsive --- */
@media (max-width:1000px){
  .pix-head{grid-template-columns:1fr;gap:.9rem;align-items:start;margin-bottom:2rem}
  .pix-lede{max-width:60ch}
  .pix-index{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pix-shot{margin-bottom:2.6rem}
}
@media (max-width:640px){
  .pix-head{padding-bottom:1.25rem;margin-bottom:1.7rem}
  .pix-shot{margin-bottom:2.1rem}
  .pix-shot::before{filter:blur(34px)}
  .pix-hot{border-radius:8px}
  .pix-index{gap:1.25rem 1.4rem}
  .pix-index li{padding-top:.85rem}
  .pix-index b{font-size:.95rem}
  .pix-index span{font-size:.845rem}
  .pix-foot{margin-top:2rem}
}
@media (max-width:420px){
  .pix-index{grid-template-columns:1fr;gap:1rem}
}
@media (prefers-reduced-motion:reduce){
  .pix-shot:hover{transform:none}
  .pix-index b a::after{transition:none}
}

/* ===============================================================
   THE LIBRARY — the supplied artwork is the section,shown whole
   and unmodified: no crop,no stretch,nothing drawn on top. The
   file already carries its own badge,headline,description and six
   category cards,so no HTML repeats them; the heading is kept for
   document structure but visually hidden. Section background matches
   the image's own edge colour (#000201,sampled from the file) so it
   seats with no seam. The category row below restores the six
   captions as real text,which is what stays legible on a phone.
   =============================================================== */
.shx-sec{
  position:relative;isolation:isolate;overflow:hidden;
  background:#000201;border-block:1px solid var(--line);
}
.shx-amb{
  position:absolute;inset:0 0 auto 0;height:480px;z-index:-1;pointer-events:none;
  background:radial-gradient(38% 44% at 72% 4%,rgba(163,230,53,.09),transparent 72%);
}

.shx-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* --- the artwork --- */
.shx-shot{position:relative;margin:0;transition:transform .3s var(--ease)}
.shx-shot::before{
  content:"";position:absolute;inset:-6% -4% -10%;z-index:-1;pointer-events:none;
  background:radial-gradient(50% 58% at 50% 56%,rgba(163,230,53,.17),transparent 72%);
  filter:blur(46px);opacity:.8;transition:opacity .3s var(--ease);
}
.shx-shot img{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:1785/881}
.shx-shot:hover{transform:translateY(-3px)}
.shx-shot:hover::before{opacity:1}

/* --- the six categories as real text --- */
.shx-tags{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem .7rem;
  list-style:none;margin:2.6rem 0 0;padding:0;
}
.shx-tags li{
  padding:.5rem 1.05rem;border-radius:999px;
  border:1px solid var(--line);background:rgba(163,230,53,.05);
  color:var(--text-2);font-size:.875rem;font-weight:600;letter-spacing:.01em;
}

/* --- responsive --- */
@media (max-width:900px){
  .shx-tags{margin-top:2.1rem}
}
@media (max-width:640px){
  .shx-shot::before{filter:blur(32px)}
  .shx-tags{gap:.5rem;margin-top:1.7rem}
  .shx-tags li{padding:.44rem .85rem;font-size:.82rem}
}
@media (max-width:400px){
  .shx-tags li{padding:.4rem .75rem;font-size:.8rem}
}
@media (prefers-reduced-motion:reduce){
  .shx-shot:hover{transform:none}
}

/* ===============================================================
   GETTING STARTED — the supplied artwork is the section,shown
   whole and unmodified: no crop,no stretch,no recolour,nothing
   drawn on top. The file carries its own badge,headline,description and four step cards,so no HTML repeats them. The h2
   is kept for document structure but visually hidden. Section
   background matches the file's own edge colour (#010101,sampled
   from the file) so it seats with no seam. A hotspot keeps the
   setup-guide link the artwork depicts clickable,and the numbered
   list below carries the four steps as real text,which is what
   stays legible on a phone.
   =============================================================== */
.hix-sec{
  position:relative;isolation:isolate;overflow:hidden;
  background:#010101;border-block:1px solid var(--line);
}
.hix-amb{
  position:absolute;inset:0 0 auto 0;height:520px;z-index:-1;pointer-events:none;
  background:radial-gradient(38% 44% at 74% 6%,rgba(163,230,53,.09),transparent 72%);
}

.hix-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* --- the artwork --- */
.hix-shot{position:relative;margin:0;transition:transform .3s var(--ease)}
.hix-shot::before{
  content:"";position:absolute;inset:-5% -4% -9%;z-index:-1;pointer-events:none;
  background:radial-gradient(50% 56% at 54% 46%,rgba(163,230,53,.17),transparent 72%);
  filter:blur(46px);opacity:.8;transition:opacity .3s var(--ease);
}
.hix-shot img{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:1697/927}
.hix-shot:hover{transform:translateY(-3px)}
.hix-shot:hover::before{opacity:1}

/* keeps the setup-guide link the artwork shows actually clickable */
.hix-hot{
  position:absolute;display:block;border-radius:6px;
  left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);
  width:calc(var(--w) * 1%);height:calc(var(--h) * 1%);
  background:transparent;
  transition:box-shadow .24s var(--ease),background .24s var(--ease);
}
.hix-hot:hover,.hix-hot:focus-visible{
  outline:none;background:rgba(163,230,53,.08);
  box-shadow:0 0 0 1px rgba(163,230,53,.45);
}

/* --- the four steps as real text --- */
.hix-steps{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1.7rem 2.2rem;list-style:none;margin:2.8rem 0 0;padding:0;
  counter-reset:hix;
}
.hix-steps li{
  display:flex;flex-direction:column;gap:.34rem;
  padding-top:1rem;border-top:1px solid var(--line);counter-increment:hix;
}
.hix-steps li::before{
  content:"0" counter(hix);
  color:var(--lime);font-size:.82rem;font-weight:700;letter-spacing:.06em;
  font-variant-numeric:tabular-nums;margin-bottom:.1rem;
}
.hix-steps b{font-size:1rem;font-weight:700;letter-spacing:-.012em;color:var(--text)}
.hix-steps span{color:var(--text-3);font-size:.875rem;line-height:1.5}

.hix-foot{margin:2.4rem auto 0;text-align:center;max-width:64ch;color:var(--text-2);font-size:.95rem;line-height:1.6}
.hix-foot a{color:var(--text);text-decoration:underline;
  text-decoration-color:rgba(163,230,53,.55);text-underline-offset:3px}
.hix-foot a:hover{color:var(--lime);text-decoration-color:var(--lime)}

/* --- responsive --- */
@media (max-width:1000px){
  .hix-steps{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:2.3rem}
}
@media (max-width:640px){
  .hix-shot::before{filter:blur(32px)}
  .hix-hot{border-radius:4px}
  .hix-steps{gap:1.25rem 1.4rem;margin-top:1.9rem}
  .hix-steps li{padding-top:.85rem}
  .hix-steps b{font-size:.95rem}
  .hix-steps span{font-size:.845rem}
  .hix-foot{margin-top:1.9rem;font-size:.9rem}
}
@media (max-width:420px){
  .hix-steps{grid-template-columns:1fr;gap:1rem}
}
@media (prefers-reduced-motion:reduce){
  .hix-shot:hover{transform:none}
}

/* ===============================================================
   DESIGN CONSISTENCY PASS
   Appended so each fix wins the cascade cleanly and the whole pass
   can be lifted out as one block. Every rule below closes a
   measured inconsistency rather than a matter of taste.
   =============================================================== */

/* 1. BUG. A .btn sitting inside prose,legal,FAQ,trust or table
   copy inherited the body-link treatment: ".prose-block a" scores
   0,1,1 and beats ".btn" at 0,1,0,so call-to-action buttons on 17
   pages rendered with underlined labels at weight 600 instead of
   700. Anchor-qualified so it outranks those link rules. */
a.btn,a.btn:hover,a.btn:focus-visible{text-decoration:none}
a.btn{font-weight:700}
.hero .btn-flame{font-weight:800}   /* the hero CTA keeps its heavier weight */

/* 2. Section headings ran at five sizes across one page
   (44 / 45.6 / 48 / 50.4px) with three different letter-spacings
   and three line-heights. One scale for every section heading. */
.sec-head h2,.sec-head-center h2,.pix-head h2,.wf-intro h2,.cta-panel h2{
  font-size:clamp(1.75rem,1.2rem + 2.3vw,2.85rem);
  letter-spacing:-.035em;
  line-height:1.08;
}

/* 3. Eyebrow badges were grey in markup but lime inside the
   supplied artworks,and both appear on the homepage together.
   Lime throughout so the badge reads the same everywhere. */
.eyebrow,.hero .eyebrow{
  color:var(--lime);
  background:rgba(163,230,53,.07);
  border:1px solid rgba(163,230,53,.34);
}
.eyebrow .dot,.hero .eyebrow .dot{background:var(--lime)}

/* 4. Every other button on the site is a pill; this one was 11px. */
.fbtn{border-radius:100px}

/* 5. Panel radii: 34px here against 28px on every comparable panel. */
.cta-panel{border-radius:clamp(var(--r-lg),4vw,28px)}

/* 6. Same role,two scales: the legal pages ran their h1 and h2
   smaller than the guide pages they sit beside. */
.legal-head h1{font-size:clamp(1.9rem,1.3rem + 2.7vw,3.1rem)}
.legal-body h2{font-size:clamp(1.35rem,1.1rem + 1.1vw,1.85rem)}

/* 7. Invisible links. Inline links in .sec-sub and .pix-lede rendered
   in exactly the body colour with no underline,so "Full plan details"
   and "guide to the best IPTV players" read as plain text. Give them
   the same inline-link treatment the prose and legal pages already use. */
.sec-sub a:not(.btn),.pix-lede a:not(.btn){
  color:var(--text);
  text-decoration:underline;
  text-decoration-color:rgba(163,230,53,.55);
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}
.sec-sub a:not(.btn):hover,.pix-lede a:not(.btn):hover{
  color:var(--lime);text-decoration-color:var(--lime);
}

/* 8. The device and player index titles are links whose only affordance
   was an arrow revealed on hover,which never appears on a touch screen.
   Show the arrow at rest and let hover brighten and advance it. */
.dvx-index b a::after,.pix-index b a::after{opacity:.55;transform:none}
.dvx-index b a:hover::after,.dvx-index b a:focus-visible::after,.pix-index b a:hover::after,.pix-index b a:focus-visible::after{
  opacity:1;transform:translateX(3px);
}

/* The supplied devices artwork paints a "Need help? We're on WhatsApp"
   bar across its bottom edge. Show only the part of the file above it,so the bar is outside the visible box. object-fit keeps the aspect
   ratio intact,so nothing is stretched,and the file on disk is not
   modified. The eight device cards end at 89.6% of the image height;
   the cut sits at 90.5%. */
.dvx-shot img{aspect-ratio:1536/927;object-fit:cover;object-position:top center}

/* ===============================================================
   ORDER PAGE — confirms which plan arrived in the URL, then hands
   the customer to WhatsApp. Reuses .plan and .btn so the cards look
   exactly like the ones on the pricing section.
   =============================================================== */
.ord-picked{
  display:flex;align-items:center;gap:.85rem;flex-wrap:wrap;
  margin:0 0 2rem;padding:.95rem 1.15rem;border-radius:14px;
  background:rgba(163,230,53,.07);border:1px solid rgba(163,230,53,.34);
  color:var(--text-2);font-size:.97rem;line-height:1.5;
}
.ord-picked b{color:var(--text);font-weight:700}
.ord-check{
  display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;
  background:var(--lime);
}
.ord-check svg{width:17px;height:17px;fill:none;stroke:var(--on-lime);stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}
.ord-change{margin-left:auto;color:var(--lime);font-weight:600;font-size:.9rem;
  text-decoration:underline;text-decoration-color:rgba(163,230,53,.5);text-underline-offset:3px}
.ord-change:hover{color:var(--lime-hover);text-decoration-color:var(--lime-hover)}

.ord-steps{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem 2rem;
  list-style:none;margin:0 0 2.4rem;padding:0;counter-reset:ord;
}
.ord-steps li{display:flex;flex-direction:column;gap:.3rem;padding-top:.95rem;
  border-top:1px solid var(--line);counter-increment:ord}
.ord-steps li::before{content:"0" counter(ord);color:var(--lime);font-size:.8rem;font-weight:700;
  letter-spacing:.06em;font-variant-numeric:tabular-nums;margin-bottom:.15rem}
.ord-steps b{color:var(--text);font-size:.98rem;font-weight:700;letter-spacing:-.012em}
.ord-steps span{color:var(--text-3);font-size:.875rem;line-height:1.5}

.ord-grid{margin-bottom:2.6rem}
/* the plan that came in on the URL */
.ord-grid .plan.is-picked{
  border-color:rgba(163,230,53,.55);
  box-shadow:0 0 0 1px rgba(163,230,53,.28),0 0 34px -16px rgba(163,230,53,.45);
}

@media (max-width:900px){
  .ord-steps{grid-template-columns:1fr;gap:1.1rem;margin-bottom:2rem}
  .ord-picked{margin-bottom:1.6rem}
  .ord-change{margin-left:0}
}

/* ================================================================
   Artwork hotspot hit areas
   The hotspots over the section artwork are positioned in percentages,
   so they shrink with the image. On a phone several fell to a handful of
   pixels tall and became impossible to tap. This gives each one a
   transparent, centred minimum hit area. Nothing visible moves or
   resizes: the hover highlight still traces the real target, and
   max() leaves any hotspot that is already large enough untouched.
   The stacked player hotspots sit about 1% apart vertically, so only
   the isolated first one may grow on that axis.
   ================================================================ */
.dvx-hot::after,.pix-hot::after,.hix-hot::after{
  content:"";position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:max(100%,44px);height:max(100%,44px);
}
.pix-hot:not(:first-of-type)::after{height:100%}

/* ================================================================
   Artwork text index — desktop only
   Each section artwork is a full mockup carrying its own headings and
   card text. Below 1024px that text renders too small to read, so the
   index underneath is what makes the section legible, linkable and
   crawlable, and it stays exactly as it is. From 1024px up the artwork
   is fully legible and the index repeats it word for word, so it is
   hidden there. Nothing is lost: the hotspots carry the same links,
   the Samsung and LG links remain in the footer on every page, and the
   image alt text names every device, player and step for screen
   readers. Mobile and tablet are untouched.
   ================================================================ */
@media (min-width:1024px){
  .dvx-index,.pix-index,.hix-steps,.hix-foot{display:none}
  /* the figures carried bottom margin purely to separate them from the
     index above; without it that becomes trailing whitespace */
  .dvx-shot,.pix-shot{margin-bottom:0}
}

/* ================================================================
   Blog cover image
   One supplied image used as the cover across the blog. On an article it
   sits between the head and the prose at full content width; on a blog
   index card it is a full-bleed thumbnail across the top. Both keep the
   3:2 source ratio, and both carry width/height so the space is reserved
   before the image arrives and nothing shifts.
   ================================================================ */
.doc-cover{margin:0 0 clamp(2rem,4vw,2.75rem)}
.doc-cover img{
  display:block;width:100%;height:auto;
  border:1px solid var(--line);border-radius:var(--r);
}

/* full-bleed across the top of a card, cancelling the card's own padding */
.rc-img{
  display:block;width:calc(100% + 2.5rem);
  margin:-1.1rem -1.25rem .85rem;
  aspect-ratio:3/2;object-fit:cover;
  border-radius:calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0;
}