/*
Theme Name: IPTVFiesta
Theme URI: https://iptvfiesta.vip
Author: IPTVFiesta
Description: IPTVFiesta — English-first IPTV landing theme. Brand palette: violet #511BC9, magenta #EF1893, green #41E296. Built i18n-ready for later es/pt locales.
Version: 1.0.0
Text Domain: iptvfiesta
*/

/* ============================================================
   1. TOKENS
   ============================================================ */
:root{
  --violet:#511BC9;
  --violet-dark:#3F14A0;
  --violet-light:#6B3AE0;
  --magenta:#EF1893;
  --magenta-dark:#D9238B;
  --green:#41E296;
  --green-dark:#25C57A;
  --blue:#00BBFF;
  --orange:#FF9D5A;

  --ink:#130621;
  --ink-soft:#37363E;
  --muted:#6B6878;
  --line:#E5E7EB;

  --bg:#FFFFFF;
  --bg-tint:#F9F6FF;
  --bg-dark:#000000;

  --radius-sm:8px;
  --radius:14px;
  --radius-lg:22px;
  --radius-pill:999px;

  --shadow-sm:0 1px 2px rgba(19,6,33,.06),0 1px 3px rgba(19,6,33,.05);
  --shadow:0 4px 16px rgba(19,6,33,.08);
  --shadow-lg:0 18px 48px rgba(19,6,33,.14);

  --wrap:1180px;
  --gap:24px;

  --font:"Figtree","Poppins",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* ---- Type scale ----
     Display sizes are fluid; body sizes are fixed. Six body steps only —
     anything finer than 1px apart is invisible and just causes drift. */
  --fs-display:clamp(30px,5vw,50px);   /* h1                        */
  --fs-title:clamp(26px,3.6vw,40px);   /* full-width section titles */
  --fs-heading:clamp(23px,3vw,34px);   /* in-column headings        */
  --fs-subhead:20px;                   /* panel + card headings     */
  --fs-lead:17px;                      /* lead paragraphs           */
  --fs-base:16px;
  --fs-ui:15px;                        /* nav, buttons, pills       */
  --fs-sm:14px;
  --fs-xs:13px;                        /* meta, hints, captions     */
  --fs-2xs:12px;                       /* micro labels only         */

  --lh-tight:1.12;
  --lh-heading:1.25;
  --lh-body:1.6;
  --lh-relaxed:1.7;

  --measure:52ch;                      /* ~66 characters per line   */
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font);
  font-size:var(--fs-base);
  line-height:var(--lh-body);
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{margin:0;line-height:var(--lh-heading);font-weight:800;letter-spacing:normal}
/* Negative tracking helps at display sizes and hurts below ~20px, so it is
   applied per-role rather than to every heading. */
h1,.section-title,.h-heading,.sports-copy h2,.countries-copy h2,.pricing-copy h2,.final-cta-card h2{letter-spacing:-.02em}
p{margin:0}
input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--violet);outline-offset:2px;border-radius:4px}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:12px;top:12px;z-index:200;background:#fff;padding:10px 16px;border-radius:var(--radius-sm);box-shadow:var(--shadow)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 20px}
.text-center{text-align:center}

/* ============================================================
   3. BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 30px;border-radius:var(--radius-pill);
  font-weight:700;font-size:var(--fs-base);line-height:1;
  transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease;
  text-align:center;white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--violet{background:var(--violet);color:#fff;box-shadow:0 6px 18px rgba(81,27,201,.28)}
.btn--violet:hover{background:var(--violet-dark);box-shadow:0 10px 26px rgba(81,27,201,.36)}
.btn--green{background:var(--green);color:#06301D;box-shadow:0 6px 18px rgba(65,226,150,.34)}
.btn--green:hover{background:var(--green-dark);color:#032317}
.btn--white{background:#fff;color:var(--violet);box-shadow:var(--shadow)}
.btn--white:hover{background:#F4F0FF}
.btn--outline{border:2px solid currentColor;padding:13px 28px}
.btn--lg{padding:18px 40px;font-size:var(--fs-lead)}
.btn--block{display:flex;width:100%}

/* ============================================================
   4. HEADER
   ============================================================ */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex;align-items:center;gap:18px;height:70px}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:20px;letter-spacing:-.03em;flex-shrink:0}
.brand img,.brand svg{height:30px;width:auto}
.brand .brand-fiesta{color:var(--magenta)}
.brand .brand-iptv{color:var(--violet)}

.main-nav{margin-left:auto;display:flex;align-items:center;gap:30px}
/* :not(.btn) — otherwise this (class+element) outranks .btn--violet's plain
   class selector and the mobile-drawer CTA renders with dark nav-link text
   instead of white. */
.main-nav a:not(.btn){font-size:var(--fs-ui);font-weight:600;color:var(--ink-soft);transition:color .15s}
.main-nav a:not(.btn):hover,.main-nav a:not(.btn)[aria-current="page"]{color:var(--violet)}
/* The nav carries its own CTA for the mobile drawer; on desktop .header-cta serves that role. */
.main-nav .btn{display:none}
.header-cta{flex-shrink:0}
.header-cta .btn{padding:12px 24px;font-size:var(--fs-ui)}

.nav-toggle{display:none;width:44px;height:44px;align-items:center;justify-content:center;border-radius:var(--radius-sm);margin-left:auto}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--ink);position:relative}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:22px;height:2px;background:var(--ink);transition:transform .2s}
.nav-toggle span::before{top:-7px}
.nav-toggle span::after{top:7px}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{transform:translateY(-7px) rotate(-45deg)}

@media(max-width:900px){
  .nav-toggle{display:flex}
  .main-nav{
    position:absolute;top:70px;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:#fff;border-bottom:1px solid var(--line);
    padding:8px 20px 18px;margin-left:0;
    box-shadow:var(--shadow-lg);
    display:none;
  }
  .main-nav.is-open{display:flex}
  .main-nav a{padding:14px 4px;border-bottom:1px solid var(--line);font-size:16px}
  .main-nav .btn{display:flex;margin-top:14px;border-bottom:0}
  .header-cta{display:none}
}

/* ============================================================
   5. SECTION PRIMITIVES
   ============================================================ */
.section{padding:84px 0}
.section--tint{background:var(--bg-tint)}
.section-head{max-width:760px;margin:0 auto 48px;text-align:center}
.section-title{font-size:var(--fs-title);margin-bottom:14px;line-height:var(--lh-heading)}
/* Capped to ~65 characters — at the full 760px this ran to 89, which is past
   the point where the eye reliably finds the next line. */
.section-subtitle{font-size:var(--fs-lead);color:var(--muted);line-height:var(--lh-relaxed);max-width:var(--measure);margin-inline:auto}
.on-dark .section-title,.on-violet .section-title{color:#fff}
.on-dark .section-subtitle{color:rgba(255,255,255,.72)}
.on-violet .section-subtitle{color:rgba(255,255,255,.85)}
.on-violet .eyebrow{color:#fff;background:rgba(255,255,255,.14);display:inline-block;padding:5px 14px;border-radius:var(--radius-pill)}
.on-dark .note,.on-violet .note{color:rgba(255,255,255,.72)}

/* ============================================================
   6. HERO
   ============================================================ */
.hero{position:relative;background:var(--bg-tint);padding:70px 0 0;overflow:hidden}
.hero-head{max-width:720px;margin:0 auto;text-align:center;position:relative;z-index:3}
.hero h1{font-size:var(--fs-display);line-height:var(--lh-tight);margin-bottom:20px}
.hero-sub{font-size:var(--fs-lead);color:var(--muted);line-height:var(--lh-body);max-width:var(--measure);margin:0 auto 30px}

.hero-stage{position:relative;margin-top:56px;padding-bottom:70px}
.hero-tv{position:relative;z-index:3;max-width:560px;margin:0 auto;filter:drop-shadow(0 24px 60px rgba(19,6,33,.28))}
.hero-posters{
  position:absolute;left:0;right:0;bottom:70px;height:190px;z-index:1;
  display:flex;align-items:center;gap:14px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.hero-posters img{height:190px;width:auto;border-radius:10px;flex-shrink:0;object-fit:cover}

.hero-badge{
  position:absolute;z-index:4;
  display:flex;align-items:center;gap:9px;
  background:#fff;border-radius:var(--radius);
  padding:11px 16px;box-shadow:var(--shadow-lg);
  font-weight:700;font-size:14px;line-height:1.15;
  /* JS (initHeroParallax) sets `transform` on mousemove; this is what smooths it. */
  transition:transform .3s cubic-bezier(.16,1,.3,1);
  will-change:transform;
}
.hero-badge-icon{width:22px;height:22px;flex-shrink:0}
.hero-badge-text{display:block;line-height:1.15}
.hero-badge-text strong{display:block;font-weight:800;letter-spacing:-.02em}
/* Without this, <small> falls back to the UA default `font-size:smaller`
   (~83%), shrinking to ~11.7px instead of a deliberate size. */
.hero-badge-text small{font-size:var(--fs-xs)}
.hero-badge--channels{top:-10px;left:7%;--depth:10}
.hero-badge--devices{top:118px;right:4%;--depth:8}

.hero-badge--4k{
  top:-4px;right:10%;
  background:#FFD400;color:#111;
  font-size:20px;font-weight:900;letter-spacing:-.02em;
  padding:10px 16px;border-radius:10px;
  --depth:15;
}
.hero-badge--live{top:100px;left:3%;font-size:15px;letter-spacing:.02em;--depth:12}
.hero-badge--live .dot{width:9px;height:9px;border-radius:50%;background:#FF2D55;box-shadow:0 0 0 4px rgba(255,45,85,.18)}

@media(max-width:820px){
  .hero-badge--channels{left:0;top:-10px;transform:scale(.86);transform-origin:left top}
  .hero-badge--4k{right:0;transform:scale(.86);transform-origin:right top}
  .hero-badge--live{top:auto;bottom:8px;left:0;transform:scale(.82);transform-origin:left bottom}
  .hero-badge--devices{top:auto;bottom:8px;right:0;transform:scale(.82);transform-origin:right bottom}
  .hero-posters{height:130px;bottom:50px}
  .hero-posters img{height:130px}
}

/* Entrance uses the independent `scale`/`translate` properties on badges
   rather than `transform`, so it never fights the JS parallax `transform`
   above — both can animate the element at once without one clobbering the
   other's keyframe. */
@media (prefers-reduced-motion: no-preference){
  .hero-head h1{animation:ifv-rise .7s cubic-bezier(.16,1,.3,1) both}
  .hero-sub{animation:ifv-rise .7s cubic-bezier(.16,1,.3,1) .1s both}
  .hero-head .btn{animation:ifv-rise .7s cubic-bezier(.16,1,.3,1) .2s both}

  .hero-tv{animation:ifv-rise .8s cubic-bezier(.16,1,.3,1) .15s both}
  .hero-posters{animation:ifv-fade 1s ease .35s both}

  .hero-badge{animation:ifv-pop .6s cubic-bezier(.16,1,.3,1) both}
  .hero-badge--channels{animation-delay:.4s}
  .hero-badge--4k{animation-delay:.5s}
  .hero-badge--live{animation-delay:.6s}
  .hero-badge--devices{animation-delay:.7s}
}

@keyframes ifv-rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes ifv-pop{from{opacity:0;scale:.85}to{opacity:1;scale:1}}
@keyframes ifv-fade{from{opacity:0}to{opacity:1}}

/* ============================================================
   7. VIOLET FEATURE BAND
   ============================================================ */
.band-violet{background:var(--violet);color:#fff;padding:70px 0}
.feature-pills{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:960px;margin:0 auto}
.feature-pill{
  display:flex;align-items:center;gap:12px;
  border:1.5px solid rgba(255,255,255,.34);
  border-radius:var(--radius-pill);
  padding:15px 22px;font-size:var(--fs-ui);font-weight:600;
  transition:background-color .15s,border-color .15s;
}
.feature-pill:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.6)}
.feature-pill .tick{
  flex-shrink:0;width:24px;height:24px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.6);
  display:grid;place-items:center;
}
.feature-pill .tick svg{width:12px;height:12px}
@media(max-width:880px){.feature-pills{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.feature-pills{grid-template-columns:1fr}}

/* ============================================================
   8. DARK SPORTS / VOD TABS
   ============================================================ */
.band-dark{
  background:var(--bg-dark);color:#fff;padding:74px 0;position:relative;overflow:hidden;
}
.band-dark::before{
  content:"";position:absolute;inset:0;
  background-image:var(--sports-bg);
  background-size:cover;background-position:center;
  opacity:.28;
}
.band-dark > *{position:relative;z-index:2}
.tabs{display:flex;gap:34px;border-bottom:1px solid rgba(255,255,255,.16);margin-bottom:44px}
.tab{
  padding:0 0 14px;font-size:var(--fs-ui);font-weight:700;color:rgba(255,255,255,.55);
  border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s,border-color .15s;
}
.tab[aria-selected="true"]{color:#fff;border-bottom-color:#fff}
.tab-panel{display:none}
.tab-panel.is-active{display:block}

.sports-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.sports-copy h2{font-size:var(--fs-heading);margin-bottom:18px;max-width:15ch}
.sports-copy p{color:rgba(255,255,255,.75);font-size:var(--fs-base);line-height:var(--lh-body);margin-bottom:28px}
.league-logos{margin-top:30px;max-width:420px}
.league-logos img{width:100%;height:auto}

/* TV plus an overlapping phone, as in the reference layout. */
.sports-media{position:relative;padding-bottom:8%}
.sports-media .media-tv{border-radius:var(--radius);width:100%;box-shadow:0 22px 60px rgba(0,0,0,.5)}
.sports-media .media-phone{
  position:absolute;right:-2%;bottom:0;width:31%;height:auto;
  filter:drop-shadow(0 18px 36px rgba(0,0,0,.55));
}
@media(max-width:600px){
  .sports-media .media-phone{width:26%;right:0}
}
@media(max-width:900px){
  .sports-grid{grid-template-columns:1fr;gap:34px}
  .tabs{gap:22px;overflow-x:auto}
}

/* ============================================================
   9. MAGENTA COUNTRIES BAND
   ============================================================ */
.band-magenta{background:var(--magenta);color:#fff;padding:74px 0;overflow:hidden}
.countries-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
/* Locked to the map artwork's own ratio so the pills' percentage left/top
   below always lands on the matching erased spot in countries-map.webp,
   at any container width. */
.countries-map{position:relative;aspect-ratio:1262/816}
.countries-map > img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.country-pill{
  position:absolute;z-index:2;
  display:flex;align-items:center;gap:10px;
  background:#fff;color:var(--ink);border-radius:var(--radius);
  padding:12px 16px;box-shadow:var(--shadow-lg);
  font-weight:800;font-size:var(--fs-sm);white-space:nowrap;
  box-sizing:border-box;
}
.country-pill img{width:26px;height:19px;object-fit:cover;border-radius:3px;flex-shrink:0}
.countries-copy h2{font-size:var(--fs-heading);margin-bottom:16px}
.countries-copy p{color:rgba(255,255,255,.88);margin-bottom:28px;font-size:var(--fs-base);line-height:var(--lh-body)}
@media(max-width:900px){
  .countries-grid{grid-template-columns:1fr;gap:30px}
  .countries-copy{text-align:center}
  .countries-copy .btn{margin:0 auto}

  /* The absolute-positioned map layout doesn't scale below a certain width —
     percentage positions stay put while the text they need to fit doesn't
     shrink at the same rate, so pills start overlapping. A static grid
     sidesteps that entirely; same markup, just re-laid-out. */
  .countries-map{aspect-ratio:auto;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
  .countries-map > img{display:none}
  .country-pill{position:static;min-width:0;min-height:0;justify-content:center}
}

/* ============================================================
   10. PRICING
   ============================================================ */
.pricing-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.pricing-copy h2{font-size:var(--fs-heading);margin-bottom:16px;max-width:18ch}
.pricing-copy > p{color:var(--muted);margin-bottom:26px}
.benefit-list li{display:flex;align-items:center;gap:12px;padding:9px 0;font-weight:600;font-size:var(--fs-ui);line-height:1.45}
.benefit-list .tick{
  flex-shrink:0;width:22px;height:22px;border-radius:50%;background:var(--green);
  display:grid;place-items:center;
}
.benefit-list .tick svg{width:12px;height:12px}

.plan-stack{display:flex;flex-direction:column;gap:14px}
.plan-card{
  display:block;position:relative;
  border:2px solid var(--line);border-radius:var(--radius);
  padding:18px 20px 18px 52px;background:#fff;cursor:pointer;
  transition:border-color .15s,box-shadow .15s,background-color .15s;
}
.plan-card:hover{border-color:#C9BEEA}
.plan-card input{position:absolute;opacity:0;pointer-events:none}
.plan-card .radio{
  position:absolute;left:20px;top:22px;
  width:20px;height:20px;border-radius:50%;border:2px solid #CFCBDA;
  display:grid;place-items:center;transition:border-color .15s;
}
.plan-card .radio::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--green);transform:scale(0);transition:transform .15s}
.plan-card.is-selected{border-color:var(--green);background:#F3FFF9;box-shadow:0 6px 20px rgba(65,226,150,.16)}
.plan-card.is-selected .radio{border-color:var(--green)}
.plan-card.is-selected .radio::after{transform:scale(1)}

.plan-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.plan-name{font-weight:800;font-size:var(--fs-base)}
.plan-save{font-size:var(--fs-xs);font-weight:700;color:var(--green-dark)}
.plan-price{font-weight:800;font-size:var(--fs-subhead);white-space:nowrap;letter-spacing:-.01em}
.plan-old{display:block;font-size:var(--fs-2xs);color:var(--muted);text-decoration:line-through;font-weight:600;text-align:right}
.plan-note{font-size:var(--fs-xs);color:var(--muted);margin-top:5px;line-height:1.45}
.plan-total{font-size:var(--fs-xs);color:var(--muted);margin-top:3px}
.pricing-actions{margin-top:20px}
.pricing-guarantee{text-align:center;font-size:var(--fs-xs);color:var(--muted);margin-top:12px}
@media(max-width:900px){.pricing-grid{grid-template-columns:1fr;gap:36px}}

/* ============================================================
   11. TESTIMONIALS
   ============================================================ */
.band-violet-alt{background:var(--violet);color:#fff;padding:74px 0 84px;overflow:hidden}
.review-rail{
  display:flex;gap:18px;overflow-x:auto;padding:4px 4px 20px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}
.review-rail::-webkit-scrollbar{height:6px}
.review-rail::-webkit-scrollbar-track{background:rgba(255,255,255,.14);border-radius:99px}
.review-rail::-webkit-scrollbar-thumb{background:rgba(255,255,255,.44);border-radius:99px}
.review-card{
  flex:0 0 268px;scroll-snap-align:start;
  background:#fff;color:var(--ink);border-radius:var(--radius);
  padding:20px;box-shadow:var(--shadow);
}
.review-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.stars{display:flex;gap:2px}
.stars span{width:17px;height:17px;background:#00B67A;display:grid;place-items:center;border-radius:2px}
.stars svg{width:11px;height:11px;fill:#fff}
.review-age{font-size:var(--fs-2xs);color:var(--muted)}
.review-card h3{font-size:var(--fs-base);line-height:1.35;margin-bottom:7px}
.review-card p{font-size:var(--fs-ui);color:var(--ink-soft);line-height:1.55}
.review-author{margin-top:12px;font-size:var(--fs-xs);font-weight:700;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.review-plan{font-size:var(--fs-2xs);font-weight:700;color:var(--violet);background:var(--bg-tint);padding:3px 9px;border-radius:var(--radius-pill);letter-spacing:.01em}
.trust-row{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:26px;font-size:var(--fs-sm);font-weight:600;flex-wrap:wrap}
.trust-row img{height:20px;width:auto}
.trust-row .score{font-weight:800}

/* ============================================================
   12. FAQ
   ============================================================ */
.faq-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:19px 22px;font-size:var(--fs-base);font-weight:700;text-align:left;line-height:1.4;
}
.faq-q .sign{flex-shrink:0;width:22px;height:22px;position:relative}
.faq-q .sign::before,.faq-q .sign::after{
  content:"";position:absolute;background:var(--ink);border-radius:2px;
  top:50%;left:50%;transform:translate(-50%,-50%);transition:transform .2s ease,opacity .2s ease;
}
.faq-q .sign::before{width:14px;height:2px}
.faq-q .sign::after{width:2px;height:14px}
.faq-q[aria-expanded="true"] .sign::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.faq-a{display:none;padding:0 22px 21px;color:var(--muted);font-size:var(--fs-ui);line-height:var(--lh-relaxed);max-width:72ch}
.faq-a.is-open{display:block}
.faq-a p + p{margin-top:12px}

/* ============================================================
   13. FINAL CTA
   ============================================================ */
.final-cta{padding:0 0 84px}
.final-cta-card{
  background:var(--violet);color:#fff;border-radius:var(--radius-lg);
  padding:44px;display:grid;grid-template-columns:.9fr 1.1fr auto;
  gap:34px;align-items:center;overflow:hidden;
}
.final-cta-card h2{font-size:clamp(21px,2.4vw,27px);margin-bottom:10px;line-height:var(--lh-heading)}
.final-cta-card p{color:rgba(255,255,255,.85);font-size:var(--fs-ui);line-height:var(--lh-body)}
.final-cta-media img{border-radius:var(--radius-sm)}
@media(max-width:940px){
  .final-cta-card{grid-template-columns:1fr;text-align:center;padding:34px 24px}
  .final-cta-card .btn{margin:0 auto}
  .final-cta-media{order:-1}
}

/* ============================================================
   14. FOOTER
   ============================================================ */
.site-footer{background:var(--bg-tint);border-top:1px solid var(--line);padding:56px 0 32px}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px}
.footer-brand .brand{margin-bottom:14px;opacity:.85}
.footer-brand p{font-size:var(--fs-sm);color:var(--muted);max-width:34ch;line-height:var(--lh-body)}
.footer-col h4{font-size:var(--fs-sm);font-weight:800;margin-bottom:14px}
.footer-col li{margin-bottom:9px}
.footer-col a{font-size:var(--fs-sm);color:var(--muted);transition:color .15s}
.footer-col a:hover{color:var(--violet)}
.lang-select{
  padding:9px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:#fff;font-size:var(--fs-sm);font-weight:600;cursor:pointer;width:100%;max-width:150px;
}
.footer-bottom{
  margin-top:40px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:var(--fs-xs);color:var(--muted);
}
@media(max-width:880px){.footer-grid{grid-template-columns:1fr 1fr;gap:28px}}
@media(max-width:520px){.footer-grid{grid-template-columns:1fr}}

/* ============================================================
   15. INNER PAGES
   ============================================================ */
.page-hero{background:var(--bg-tint);padding:60px 0 52px;text-align:center;border-bottom:1px solid var(--line)}
.page-hero h1{font-size:clamp(27px,4vw,42px);margin-bottom:14px;line-height:var(--lh-tight);letter-spacing:-.02em}
.page-hero p{color:var(--muted);max-width:var(--measure);margin:0 auto;font-size:var(--fs-lead);line-height:var(--lh-body)}
.page-body{padding:64px 0}
.prose{max-width:68ch;margin:0 auto;font-size:var(--fs-base);line-height:1.75;color:var(--ink-soft)}
.prose h2{font-size:var(--fs-subhead);margin:38px 0 14px;color:var(--ink);line-height:var(--lh-heading)}
.prose h3{font-size:17px;margin:28px 0 10px;color:var(--ink);line-height:var(--lh-heading)}
.prose p{margin-bottom:16px}
.prose ul{margin:0 0 18px;padding-left:0}
.prose ul li{position:relative;padding-left:26px;margin-bottom:9px}
.prose ul li::before{content:"";position:absolute;left:6px;top:11px;width:7px;height:7px;border-radius:50%;background:var(--violet)}
.prose a{color:var(--violet);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.prose strong{color:var(--ink)}

/* Channels page */
.channel-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin:8px 0 44px}
.channel-feature{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px}
.channel-feature-icon{
  width:48px;height:48px;border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;
  background:var(--bg-tint);margin-bottom:18px;
}
.channel-feature-icon svg{width:24px;height:24px}
.channel-feature h3{font-size:var(--fs-subhead);margin-bottom:10px;line-height:var(--lh-heading)}
.channel-feature p{color:var(--muted);line-height:var(--lh-body)}

.channel-contact{background:var(--bg-tint);border-radius:var(--radius-lg);padding:48px 32px;text-align:center;margin-bottom:44px}
.channel-contact h2{font-size:var(--fs-heading);margin-bottom:12px;line-height:var(--lh-heading)}
.channel-contact p{color:var(--muted);max-width:52ch;margin:0 auto 28px;line-height:var(--lh-body)}
.channel-contact-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn--telegram{background:#229ED9;color:#fff;box-shadow:0 6px 18px rgba(34,158,217,.3)}
.btn--telegram:hover{background:#1b87ba}
.btn--whatsapp{background:#25D366;color:#06301D;box-shadow:0 6px 18px rgba(37,211,102,.32)}
.btn--whatsapp:hover{background:#20bd5a}
.btn svg{width:20px;height:20px;flex-shrink:0}

/* Login / account page */
.account-card{
  max-width:460px;margin:0 auto;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:34px;box-shadow:var(--shadow);
}
.account-card h2{font-size:var(--fs-subhead);margin-bottom:8px;line-height:var(--lh-heading)}
.account-card > p{color:var(--muted);font-size:var(--fs-ui);line-height:var(--lh-body);margin-bottom:24px}
.field{margin-bottom:16px}
.field label{display:block;font-size:var(--fs-sm);font-weight:700;margin-bottom:7px}
.field input,.field select,.field textarea{
  width:100%;padding:13px 15px;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:#fff;font-size:var(--fs-ui);
}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--violet);box-shadow:0 0 0 3px rgba(81,27,201,.12)}
.field-hint{font-size:var(--fs-xs);color:var(--muted);margin-top:6px}
.notice{padding:15px 18px;border-radius:var(--radius);font-size:var(--fs-ui);margin-bottom:22px;line-height:var(--lh-body)}
.notice--info{background:#F0EBFF;color:#3A1B85;border:1px solid #D8CCFA}
.notice--ok{background:#E9FCF3;color:#0B5D3B;border:1px solid #BFF0D9}
.notice--warn{background:#FFF6E8;color:#7A4A05;border:1px solid #FBE2BC}

/* Steps */
.step-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:960px;margin:0 auto}
.step-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.step-num{
  width:36px;height:36px;border-radius:50%;background:var(--violet);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:15px;margin-bottom:15px;
}
.step-card h3{font-size:var(--fs-lead);margin-bottom:9px;line-height:var(--lh-heading)}
.step-card p{font-size:var(--fs-sm);color:var(--muted);line-height:var(--lh-body)}
@media(max-width:820px){.step-grid{grid-template-columns:1fr}}

/* Trial page */
.trial-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
@media(max-width:900px){.trial-grid{grid-template-columns:1fr;gap:32px}}

/* Checkout */
.checkout-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:44px;align-items:start}
.checkout-summary{
  background:var(--bg-tint);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:26px;position:sticky;top:90px;
}
.summary-row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;font-size:var(--fs-ui)}
/* An explicit display beats the [hidden] attribute, so restore it. */
.summary-row[hidden]{display:none}
.summary-row.total{border-top:1px solid var(--line);margin-top:8px;padding-top:16px;font-weight:800;font-size:var(--fs-subhead)}
.summary-row .text-right{text-align:right;max-width:60%}
.co-submit{margin-top:18px}
.co-benefits{margin-top:18px}

/* Numbered step headers */
.co-step{margin-bottom:46px}
.co-step-head{
  display:flex;align-items:center;gap:14px;
  font-size:var(--fs-heading);line-height:var(--lh-heading);
  letter-spacing:-.02em;margin-bottom:26px;
}
.co-step-num{
  flex-shrink:0;width:38px;height:38px;border-radius:50%;
  background:var(--magenta);color:#fff;
  display:grid;place-items:center;
  font-size:var(--fs-lead);font-weight:800;letter-spacing:normal;
}

/* Plan cards */
.co-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.co-plan{
  position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;
  background:#fff;border:2px solid var(--line);border-radius:var(--radius-lg);
  padding:34px 20px 26px;cursor:pointer;
  transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease;
}
.co-plan:hover{border-color:#C9BEEA;transform:translateY(-2px)}
.co-plan:focus-within{outline:3px solid var(--violet);outline-offset:3px}
.co-plan.is-selected{border-color:var(--green);box-shadow:0 10px 30px rgba(65,226,150,.22)}

.co-plan-badge{
  position:absolute;top:0;right:18px;transform:translateY(-50%);
  background:#fff;color:var(--ink);
  border-radius:var(--radius-pill);padding:7px 18px;
  font-size:var(--fs-sm);font-weight:800;white-space:nowrap;
  box-shadow:var(--shadow);
}
/* The chosen plan promotes its badge to the centre, in brand green. */
.co-plan.is-selected .co-plan-badge{
  left:50%;right:auto;transform:translate(-50%,-50%);
  background:var(--green);color:#06301D;box-shadow:0 6px 16px rgba(65,226,150,.4);
}

.co-plan-name{font-size:var(--fs-subhead);font-weight:800;letter-spacing:-.02em;margin-bottom:14px}
.co-plan-price{
  font-size:clamp(30px,3.4vw,40px);font-weight:900;letter-spacing:-.03em;
  line-height:1.05;display:block;
}
.co-plan-per{font-size:.5em;font-weight:800;letter-spacing:-.02em}
.co-plan-compare{
  display:block;min-height:22px;margin-top:8px;
  font-size:var(--fs-sm);color:var(--muted);
}
.co-plan-guarantee{
  margin-top:auto;padding-top:20px;
  font-size:var(--fs-xs);color:var(--muted);line-height:1.45;
}

@media(max-width:1080px){
  .co-plans{grid-template-columns:1fr;gap:26px}
  .co-plan{padding:30px 20px 24px}
  .co-plan-badge{right:18px}
  .co-plan.is-selected .co-plan-badge{left:auto;right:18px;transform:translateY(-50%)}
}

/* Add-on rows */
.co-addons{display:flex;flex-direction:column;gap:16px}
.co-addon{
  display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:20px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 24px;transition:border-color .15s ease;
}
.co-addon.is-active{border-color:var(--violet)}
.co-addon-icon{flex-shrink:0;display:grid;place-items:center;width:40px;height:40px}
.co-addon-icon svg{width:40px;height:40px}
.co-addon-body{display:flex;flex-direction:column;gap:5px;min-width:0}
.co-addon-name{font-size:var(--fs-subhead);font-weight:800;letter-spacing:-.02em;line-height:1.3}
.co-addon-desc{font-size:var(--fs-ui);color:var(--muted);line-height:1.5}
.co-addon-price{font-size:var(--fs-lead);font-weight:800;white-space:nowrap}

/* Quantity stepper */
.co-qty{
  display:inline-flex;align-items:center;
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;
}
.co-qty-btn{
  width:44px;height:46px;font-size:20px;font-weight:700;color:var(--ink-soft);
  transition:background-color .15s;
}
.co-qty-btn:hover{background:var(--bg-tint);color:var(--violet)}
.co-qty-btn:disabled{opacity:.35;cursor:not-allowed}
.co-qty-input{
  width:46px;height:46px;border:0;text-align:center;
  font-size:var(--fs-base);font-weight:800;background:transparent;
  -moz-appearance:textfield;appearance:textfield;
}
.co-qty-input::-webkit-outer-spin-button,.co-qty-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* Add toggle */
.co-toggle{
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;white-space:nowrap;
  /* Padding brings the hit area to the 44px touch minimum without
     changing how the control looks. */
  min-height:44px;padding:0 6px;
}
.co-toggle-dot{
  width:26px;height:26px;border-radius:50%;border:2px solid #CFCBDA;
  display:grid;place-items:center;transition:border-color .15s,background-color .15s;
}
.co-toggle-dot::after{
  content:"";width:11px;height:11px;border-radius:50%;background:#fff;
  transform:scale(0);transition:transform .15s;
}
.co-toggle input:checked + .co-toggle-dot{border-color:var(--green);background:var(--green)}
.co-toggle input:checked + .co-toggle-dot::after{transform:scale(1)}
.co-toggle input:focus-visible + .co-toggle-dot{outline:3px solid var(--violet);outline-offset:2px}
.co-toggle-label{font-size:var(--fs-ui);font-weight:700}

/* Details grid */
.co-fields{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.co-fields .field--full{grid-column:1 / -1}

@media(max-width:900px){
  .checkout-grid{grid-template-columns:1fr}
  .checkout-summary{position:static}
  .co-fields{grid-template-columns:1fr}
}
@media(max-width:620px){
  .co-addon{grid-template-columns:auto 1fr;gap:14px 16px}
  .co-addon-price{grid-column:1 / -1;text-align:left}
  .co-addon-control{grid-column:1 / -1}
  .co-step-head{font-size:var(--fs-subhead);gap:11px}
  .co-step-num{width:32px;height:32px;font-size:var(--fs-ui)}
}

/* 404 */
.err-wrap{text-align:center;padding:100px 0}
.err-code{font-size:clamp(70px,14vw,140px);font-weight:900;color:var(--violet);line-height:1;letter-spacing:-.05em}
.link-pills{display:flex;gap:9px;flex-wrap:wrap}
.link-pill{
  display:flex;align-items:center;
  padding:9px 16px;border-radius:var(--radius-pill);
  border:1px solid var(--line);background:#fff;
  font-size:var(--fs-sm);font-weight:600;transition:border-color .15s;
}
.link-pill:hover{border-color:var(--violet)}

/* ============================================================
   16. UTILITIES & MOTION
   ============================================================ */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease}
.reveal.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}
@media print{
  .site-header,.site-footer,.btn,.hero-posters{display:none!important}
}

/* ============================================================
   17. TYPE ROLES
   ------------------------------------------------------------
   Replaces the inline font-size overrides that had the same
   semantic level (h2) rendering at 18/20/23/24px across pages.
   ============================================================ */
.h-heading{font-size:var(--fs-heading);line-height:var(--lh-heading);margin-bottom:18px}
.h-subhead{font-size:var(--fs-subhead);line-height:var(--lh-heading);margin-bottom:16px}
.h-panel{font-size:var(--fs-lead);line-height:var(--lh-heading);margin-bottom:16px}

.text-lead{font-size:var(--fs-lead);line-height:var(--lh-body)}
.text-sm{font-size:var(--fs-sm)}
.text-xs{font-size:var(--fs-xs)}
.text-muted{color:var(--muted)}
.note{font-size:var(--fs-xs);color:var(--muted);line-height:var(--lh-body)}
.eyebrow{font-size:var(--fs-xs);font-weight:700;color:var(--violet);margin-bottom:8px}

/* Stop long single-word strings (URLs, channel names) blowing out a column. */
.prose,.faq-a,.review-card p{overflow-wrap:break-word}

/* ============================================================
   COUNTRY PAGES (inc/pseo.php)
   ============================================================
   The network grid can run to 250+ entries on the larger countries, so it is
   a multi-column list rather than cards: cards at that volume become a wall of
   boxes, and the names are the content. */

.country-hero .country-flag{width:64px;height:46px;object-fit:cover;border-radius:6px;box-shadow:var(--shadow-sm);margin:0 auto 18px;display:block}

.country-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:24px}
.country-stat{display:inline-flex;align-items:baseline;gap:7px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-pill);padding:9px 18px;font-size:var(--fs-sm);color:var(--muted)}
.country-stat strong{font-size:var(--fs-lead);font-weight:800;color:var(--violet);line-height:1}

.country-intro{margin-bottom:52px}
.country-intro h2{margin-top:32px}

.country-networks{margin-bottom:52px}
.country-networks h2{font-size:var(--fs-heading);line-height:var(--lh-heading);margin-bottom:10px;text-align:center}
.country-networks-note{font-size:var(--fs-sm);color:var(--muted);line-height:var(--lh-body);max-width:68ch;margin:0 auto 26px;text-align:center}

.network-grid{list-style:none;margin:0;padding:22px;columns:4;column-gap:26px;background:var(--bg-tint);border:1px solid var(--line);border-radius:var(--radius)}
.network-grid li{break-inside:avoid;font-size:var(--fs-sm);color:var(--ink-soft);padding:5px 0 5px 17px;position:relative;overflow-wrap:break-word}
.network-grid li::before{content:"";position:absolute;left:2px;top:12px;width:5px;height:5px;border-radius:50%;background:var(--violet);opacity:.55}

.country-cta{background:var(--violet);color:#fff;border-radius:var(--radius-lg);padding:44px 32px;text-align:center;margin-bottom:52px}
.country-cta h2{font-size:var(--fs-heading);line-height:var(--lh-heading);margin-bottom:12px;color:#fff}
.country-cta p{max-width:60ch;margin:0 auto 26px;color:rgba(255,255,255,.86);line-height:var(--lh-body)}
.country-cta-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.country-cta .btn--violet{background:#fff;color:var(--violet);box-shadow:var(--shadow)}
.country-cta .btn--violet:hover{background:#F4F0FF}

.country-related h2{font-size:var(--fs-subhead);line-height:var(--lh-heading);margin-bottom:18px;text-align:center}
.country-related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
/* Two-row grid rather than a single flex row. Laid out inline, a long name
   ("United Kingdom", "Netherlands") wrapped at some widths and not others, so
   card heights came out ragged (54 / 66 / 85px) down the grid. Stacking the
   count under the name makes every card the same two-line shape at every
   width. minmax(0,1fr) lets the name column shrink instead of overflowing. */
.country-card{display:grid;grid-template-columns:34px minmax(0,1fr);grid-template-areas:"flag name" "flag count";align-items:center;column-gap:12px;row-gap:3px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;text-decoration:none;transition:border-color .18s,box-shadow .18s,transform .18s}
.country-card:hover{border-color:var(--violet);box-shadow:var(--shadow);transform:translateY(-2px)}
.country-card img{grid-area:flag;width:34px;height:24px;object-fit:cover;border-radius:4px}
.country-card-name{grid-area:name;font-size:var(--fs-sm);font-weight:700;color:var(--ink);line-height:1.3;overflow-wrap:break-word}
.country-card-count{grid-area:count;font-size:var(--fs-xs);color:var(--muted);line-height:1.3}

/* The hub lists 20 cards and auto-fit tiles them evenly, but the related block
   at the foot of a country page has exactly 6 — which auto-fit lays out as 5 + a
   lone orphan at desktop. Fixed tracks keep 6 even at every breakpoint: 3x2,
   then 2x3, then 1x6. Scoped so the 20-card hub grid keeps auto-fit. */
.country-related .country-related-grid{grid-template-columns:repeat(3,1fr)}
@media(max-width:820px){.country-related .country-related-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.country-related .country-related-grid{grid-template-columns:1fr}}

.country-hub-link{text-align:center;margin-top:24px}
.country-hub-link a{color:var(--violet);font-weight:600;text-decoration:underline;text-underline-offset:2px;font-size:var(--fs-sm)}

@media(max-width:1000px){.network-grid{columns:3}}
@media(max-width:760px){.network-grid{columns:2;padding:18px}.country-cta{padding:34px 22px}}
@media(max-width:420px){.network-grid{columns:1}.country-stat{font-size:var(--fs-xs);padding:8px 14px}}

/* ---- Country index on the channels hub ---- */
/* 44px top and bottom to match .channel-features' rhythm on that page — and the
   bottom margin is load-bearing: .channel-contact is a tinted rounded panel, so
   without it the card grid butts straight into its edge. */
.country-index{margin:44px 0}
.country-index h2{font-size:var(--fs-heading);line-height:var(--lh-heading);margin-bottom:10px;text-align:center}
.country-index-note{font-size:var(--fs-sm);color:var(--muted);max-width:64ch;margin:0 auto 26px;text-align:center;line-height:var(--lh-body)}