/* 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}

/* =========================================================
   ManisIPTV — original design system
   ========================================================= */

:root{
  /* ---- ManisIPTV surfaces: ink navy, four measured steps ----
     Each step is a fixed lightness jump so a card always reads as
     a plane above the section it sits in, at any viewport. */
  --bg:var(--blue-950);              /* foundation */
  --bg-alt:var(--blue-900);          /* alternating sections */
  --surface:var(--blue-900);         /* cards — a distinct plane */
  --surface-2:var(--blue-850);       /* hover / raised */
  --panel:var(--surface);
  --panel-2:var(--surface-2);

  /* ---- borders: on ink the border carries the separation,
     so it is a real hairline rather than a hint ---- */
  --line:var(--blue-100);            /* structural dividers */
  --line-2:var(--blue-200);          /* card outlines */
  --line-3:var(--blue-300);          /* emphasis / hover */
  --line-str:var(--line-2);
  --line-accent:rgba(84,187,254,.45);

  /* ---- text ---- */
  --text:#FFFFFF;            /* headings and key labels */
  --text-2:var(--ink-700);          /* body — 8.4:1 on white */
  --text-3:var(--ink-500);          /* meta — 5.7:1 on white */
  --muted:var(--text-2);
  --dim:var(--text-3);

  /* ---- accent: amber gold. Warm, so WhatsApp green never competes
     with it — the paid action and the chat action stay distinguishable
     at a glance, which the whole pricing block depends on. ---- */
  --accent:var(--accent);          /* 9.3:1 on --bg */
  --accent-hover:var(--blue-400);
  --accent-soft:var(--blue-050);
  --accent-tint:rgba(84,187,254,.13);
  --accent-deep:var(--blue-800);
  --on-accent:#ffffff;       /* 9.1:1 on --accent */
  --accent-glow:rgba(84,187,254,.34);
  --grad:linear-gradient(100deg,var(--blue-400) 0%,var(--accent) 100%);

  /* legacy aliases — the component layer below still names them */
  --lime:var(--accent);
  --lime-hover:var(--accent-hover);
  --lime-soft:var(--accent-soft);
  --lime-tint:var(--accent-tint);
  --lime-deep:var(--accent-deep);
  --on-lime:var(--on-accent);
  --lime-lt:var(--accent-hover);
  --lime-pale:var(--accent-soft);

  --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:var(--accent);background:var(--accent-faint);
  border:1px solid var(--accent-edge);
  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(84,187,254,.30)}
.btn-primary:hover{filter:brightness(1.06);transform:translateY(-2px);box-shadow:0 12px 30px -8px rgba(84,187,254,.55)}

.btn-ghost{background:var(--panel);color:var(--text);border-color:var(--line-str)}
.btn-ghost:hover{background:var(--panel-2);border-color:var(--accent-edge-2);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:var(--header-h)}

.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:var(--accent);--flame-deep:var(--accent-deep);--ember:var(--blue-400);--flame-grad:linear-gradient(103deg,var(--blue-400) 0%,var(--accent-hover) 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:var(--blue-200);background:var(--accent-faint);border-color:var(--accent-edge)}
.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-ghost{border-color:var(--accent-edge)}
.hero .btn-ghost:hover{border-color:var(--accent-edge-2);background:var(--accent-faint)}
.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:var(--accent-faint);border:1px solid var(--accent-edge);}
.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}

/* ---------- 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(84,187,254,.24),rgba(84,187,254,.12));
  border:1px solid var(--accent-edge);
}
.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;}

/* ---------- 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:var(--accent-edge-2)}
.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:var(--accent);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* ---------- 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:var(--accent);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 var(--accent-edge);border-radius:clamp(var(--r-lg),4vw,34px);padding:clamp(2.75rem,6vw,4.5rem) var(--pad);background:linear-gradient(160deg,rgba(84,187,254,.19),rgba(84,187,254,.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:var(--header-h) 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 - var(--header-h));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(10,12,17,.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}
}

/* ---------- 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:var(--accent);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:var(--accent)}
.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:calc(var(--header-h) + 16px)}

/* 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,.10);}

/* 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:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose-block a:hover{color:var(--blue-200)}
.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%,var(--blue-900),var(--blue-950));
  border:1px solid var(--accent-edge-2);
}

/* 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:var(--accent);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:var(--accent-edge-2);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 var(--accent-edge);border-radius:var(--r-xl);
  padding:clamp(1.75rem,4vw,2.5rem);
  background:linear-gradient(160deg,rgba(84,187,254,.17),rgba(84,187,254,.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:var(--accent);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}
  .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%}
  .hero-glow{height:600px;background:
    radial-gradient(54% 38% at 30% 24%,rgba(84,187,254,.20),transparent 72%)}
}@media (prefers-reduced-motion:reduce){
  .hero .btn-flame:hover{transform:none}
}

/* 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);}

/* ===============================================================
   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);}

/* ---- 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);}

/* ---- 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);}

/* ---- 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(84,187,254,.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:var(--wa-tint);
  border:1px solid var(--wa-edge);
  transition:background-color .18s var(--ease),border-color .18s var(--ease);
}
.wa-nav:hover{background:var(--wa-tint);border-color:var(--wa-edge);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:var(--wa-edge)}
.btn-wa:hover{background:var(--wa-tint);border-color:var(--wa-edge);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,.85),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)}@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(10,12,17,.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);}

/* ambient light stays minimal */
.hero-glow{background:radial-gradient(40% 44% at 68% 34%,rgba(84,187,254,.06),transparent 72%);}
.cta-glow{background:radial-gradient(50% 100% at 50% 100%,rgba(84,187,254,.10),transparent 72%);}
.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;}

/* 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}

/* ---------- 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:680px){
  .sec-head-center h2 br{display:none}
}

/* 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}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .dgrid{grid-template-columns:repeat(3,1fr)}
}@media (max-width:520px){
  .sec-head-center h2 br{display:none}
}

/* ---------- 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}

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

/* ---------- 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:calc(var(--header-h) + 16px)}

/* ===============================================================
   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
   (var(--blue-950),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:transparent}

/* --- 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;
}

/* --- 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}
}

/* ===============================================================
   WHY MANISIPTV — 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:var(--accent-edge-2);background:var(--accent-faint)}
.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(84,187,254,.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 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,var(--blue-900) 0%,var(--blue-950) 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(84,187,254,.6),transparent);
  transition:opacity .24s var(--ease);opacity:.85;
}
.wf-card:hover{
  transform:translateY(-4px);border-color:var(--accent-edge-2);
  box-shadow:0 20px 44px -30px rgba(0,0,0,.85),0 0 26px -14px rgba(84,187,254,.30);
}
.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%,var(--blue-900),var(--blue-950));
  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(84,187,254,.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(84,187,254,.55))}
.wf-meter em{
  width:7px;height:7px;border-radius:50%;flex:none;background:var(--lime);
  box-shadow:0 0 10px 2px rgba(84,187,254,.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-sub{max-width:60ch}
}@media (max-width:640px){
  .wf-intro h2 br{display:none}
  .wf-top{margin-bottom:2.2rem}
  .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 (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 (var(--blue-950),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}
.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(84,187,254,.10),transparent 72%);
}

/* --- 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}

/* --- 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-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-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 (var(--blue-950),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:transparent;
}
.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(84,187,254,.09),transparent 72%);
}

/* --- responsive --- */
@media (max-width:900px){
  .shx-tags{margin-top:2.1rem}
}

/* ===============================================================
   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 (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:transparent;
}
.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(84,187,254,.09),transparent 72%);
}

/* --- 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(84,187,254,.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-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}
}

/* ===============================================================
   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:var(--accent-faint);
  border:1px solid var(--accent-edge-2);
}
.eyebrow .dot,.hero .eyebrow .dot{background:var(--lime)}

/* 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(84,187,254,.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:var(--accent-faint);border:1px solid var(--accent-edge-2);
  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(84,187,254,.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:var(--accent-edge-2);
  box-shadow:0 0 0 1px rgba(84,187,254,.30),0 0 34px -16px rgba(84,187,254,.55);
}@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);
}


/* ================================================================
   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;
}

/* ================================================================
   ManisIPTV — conversion layer
   Everything below is new to the redesign: the brand lockup, the
   hero price teaser, the rebuilt pricing block, the honest-claims
   panel and the mobile action bar. It sits last so it wins over the
   earlier component rules without any of them needing to be edited.
   ================================================================ */

/* ---------- brand lockup ----------
   The mark is inline SVG and the name is real text, so it renders in
   the page font, stays crisp at any density, recolours with the theme
   and costs no extra request. ---------- */
.brand{gap:.6rem;align-items:center}

/* ---------- hero price teaser ----------
   The old hero sent people to WhatsApp before they had seen a price.
   The primary action is now the plans, and this line carries the number
   so the offer is legible without scrolling. ---------- */
.hero-price{
  display:flex;flex-wrap:wrap;align-items:center;gap:.45rem .7rem;
  margin-top:1.15rem;color:var(--text-2);font-size:.94rem;font-weight:600;
}
.hero-price b{color:var(--text);font-weight:800}
.hero-price a{color:var(--accent);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.hero-price a:hover{color:var(--accent-hover)}
.hp-sep{width:4px;height:4px;border-radius:50%;background:var(--line-3);flex:none}

/* ---------- a solid secondary button ----------
   Ghost buttons read as text on a dark ground. Three of the four plan
   cards need a button that is unmistakably a button but still yields to
   the featured plan, so they get a filled neutral rather than an outline. */
.btn-solid{background:var(--surface-2);color:var(--text);border:1px solid var(--line-3);font-weight:700}
.btn-solid:hover{background:var(--blue-050);border-color:var(--accent);color:var(--text);transform:translateY(-2px)}

/* ================================================================
   PRICING
   ================================================================ */
.pr-sec{overflow:hidden}
.pr-amb{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58% 42% at 50% 0%,rgba(84,187,254,.09),transparent 72%);
}
.pr-sec .wrap{position:relative}
.sec-head-center{margin-inline:auto;text-align:center;max-width:720px}
.sec-head-center .eyebrow{margin-inline:auto}

/* what every plan includes — stated once, above the grid, so the four
   cards can be about price alone instead of repeating five identical
   bullet lists */
.pr-incl{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.55rem;
  max-width:960px;margin:0 auto .6rem;
}

.pr-grid .plan{padding-top:clamp(1.7rem,2.8vw,2.1rem)}
.pr-grid .plan-note{flex:1;margin-bottom:1.4rem}
.plan-rate{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
  margin-top:.6rem;color:var(--accent);font-weight:800;
  font-size:.94rem;letter-spacing:-.01em;
}
.plan-save{
  font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent);background:var(--accent-tint);
  border:1px solid var(--accent-edge-2);border-radius:100px;padding:.22rem .55rem;
}
.plan-alt{
  display:block;text-align:center;margin-top:.85rem;
  font-size:.82rem;font-weight:600;color:var(--text-3);
  text-decoration:underline;text-underline-offset:3px;
}
.plan-alt:hover{color:var(--accent)}
.plan-featured{background:linear-gradient(180deg,rgba(84,187,254,.07),transparent 55%),var(--surface)}

.pr-basis{
  margin:1.6rem auto 0;max-width:72ch;text-align:center;
  color:var(--text-3);font-size:.82rem;
}

/* the two questions that stop an order — whether it can be tried first,
   and what happens with a second television — answered beside the prices */
.pr-foot{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);
  margin-top:clamp(2.2rem,4vw,3rem);
}
.pr-foot-card{
  display:flex;flex-direction:column;align-items:flex-start;gap:.7rem;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:clamp(1.4rem,2.4vw,1.85rem);
}
.pr-foot-card h3{font-size:1.1rem}
.pr-foot-card p{flex:1;color:var(--text-2);font-size:.92rem}
.pr-foot-card .btn{margin-top:.3rem}
.pr-sec .price-foot{margin-inline:auto;text-align:center;max-width:66ch}@media (max-width:900px){
  .pr-foot{grid-template-columns:1fr}
}@media (max-width:620px){
  .pr-foot-card .btn{width:100%;justify-content:center}
}

/* ================================================================
   THE CLAIMS WE DO NOT MAKE
   The site's editorial position, given a place on the home page
   instead of living only on /about.html.
   ================================================================ */
.wf-honest{
  margin-top:clamp(2.2rem,4vw,3rem);
  background:linear-gradient(180deg,var(--surface),var(--bg-alt));
  border:1px solid var(--line-2);border-radius:var(--r-xl);
  padding:clamp(1.5rem,3.2vw,2.4rem);
}
.wf-honest-head{display:flex;gap:1rem;align-items:flex-start}
.wf-honest-ico{
  flex:none;width:44px;height:44px;border-radius:13px;display:grid;place-items:center;
  background:var(--accent-tint);border:1px solid var(--accent-edge);
}
.wf-honest-ico svg{
  width:22px;height:22px;fill:none;stroke:var(--accent);
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
.wf-honest-head h3{font-size:clamp(1.15rem,1rem + .6vw,1.45rem);margin-bottom:.5rem}
.wf-honest-head p{color:var(--text-2);font-size:.95rem;max-width:72ch}
.wf-honest-list{
  display:grid;grid-template-columns:repeat(2,1fr);gap:.65rem 1.6rem;
  margin:1.5rem 0 1.3rem;
}
.wf-honest-list li{position:relative;padding-left:1.6rem;color:var(--text-2);font-size:.91rem}
.wf-honest-list li::before{
  content:"";position:absolute;left:.15rem;top:.62em;width:12px;height:2px;
  background:var(--accent);border-radius:2px;
}
.wf-honest-foot{
  color:var(--text-3);font-size:.89rem;
  padding-top:1.1rem;border-top:1px solid var(--line);
}
.wf-honest-foot a{color:var(--accent);font-weight:700;text-decoration:underline;text-underline-offset:3px}@media (max-width:720px){
  .wf-honest-list{grid-template-columns:1fr}
  .wf-honest-ico{width:38px;height:38px;border-radius:11px}
  .wf-honest-ico svg{width:19px;height:19px}
}

/* ================================================================
   MOBILE ACTION BAR
   Below 900px the two actions that matter stay on screen at all
   times, so pricing is never more than one tap away no matter how
   far down a guide the reader has gone. It replaces the floating
   WhatsApp button at these widths rather than stacking with it.
   ================================================================ */
.mbar{display:none}@media (max-width:900px){
  .mbar{
    display:grid;grid-template-columns:1fr 1fr;gap:.55rem;
    position:fixed;left:0;right:0;bottom:0;z-index:90;
    padding:.55rem .7rem;padding-bottom:calc(.55rem + env(safe-area-inset-bottom,0px));
    background:rgba(10,12,17,.93);border-top:1px solid var(--line);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  }
  .mbar-btn{
    display:flex;align-items:center;justify-content:center;gap:.55rem;
    min-height:52px;padding:.5rem .7rem;border-radius:14px;
    border:1px solid transparent;font-weight:800;line-height:1.15;
  }
  .mbar-plans{background:var(--accent);color:var(--on-accent)}
  .mbar-wa{background:var(--surface-2);color:var(--text);border-color:var(--line-3)}
  .mbar-ico{display:inline-flex;flex:none}
  .mbar-ico svg{width:20px;height:20px}
  .mbar-plans .mbar-ico svg{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .mbar-wa .mbar-ico svg{fill:var(--wa);stroke:none}
  .mbar-txt{display:flex;flex-direction:column;min-width:0}
  .mbar-txt b{font-size:.9rem;white-space:nowrap}
  .mbar-txt i{font-style:normal;font-weight:600;font-size:.71rem;opacity:.82;white-space:nowrap}
  .wa-fab{display:none}
  body{padding-bottom:78px}
}@media (max-width:345px){
  .mbar-txt i{display:none}
  .mbar-btn{gap:.4rem;padding-inline:.45rem}
  .mbar-txt b{font-size:.84rem}
}

/* ================================================================
   BLOG PRESENTATION
   Structure, links and schema are untouched; this is presentation
   only — a clearer card and a stronger read affordance.
   ================================================================ */
.related-card{transition:transform .22s var(--ease),border-color .22s var(--ease),background .22s var(--ease)}
.related-card .rc-title{display:block;font-size:1.02rem;line-height:1.3;margin-bottom:.4rem}
.related-card .rc-desc{display:block;line-height:1.55}
.related-card::after{
  content:"Read the guide";
  display:block;margin-top:.85rem;
  font-size:.78rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--accent);opacity:.75;transition:opacity .22s var(--ease);
  text-decoration:none;
}
.related-card:hover::after{opacity:1}@media (prefers-reduced-motion:reduce){
  .related-card,.plan,.btn-solid{transition:none}
  .btn-solid:hover,.plan:hover{transform:none}
}

/* hero: keep the two actions on one row in the copy column, and keep the
   price teaser on a single line beneath them */
.hero .hero-cta{margin-top:1.95rem}
.hero .hero-cta .btn{flex:1 1 auto;justify-content:center;white-space:nowrap}
.hero-price{font-size:.895rem;margin-top:1.05rem;flex-wrap:nowrap}
.hero-trust .ht-txt b{font-size:.885rem}@media (max-width:900px){
  .hero .hero-cta .btn{flex:1 1 100%}
  .hero-price{flex-wrap:wrap}
}

/* pricing: the rate line reserves two rows on every card so the note,
   the button and the order link stay on a shared baseline whether or
   not that plan carries a savings badge */
.plan-rate{display:block;min-height:3.15em;line-height:1.35;margin-top:.55rem}
.plan-save{display:inline-block;margin-top:.35rem;vertical-align:middle}

/* ================================================================
   TOUCH TARGETS
   Everything a thumb has to hit gets real vertical room at phone
   widths. Breadcrumbs, the price teaser link and the order links
   were all around 22px tall.
   ================================================================ */
@media (max-width:900px){
  .crumbs{gap:.4rem .5rem}
  .crumbs a{display:inline-block;padding-block:.5rem}
  .hero-price a{display:inline-block;padding-block:.45rem}
  .plan-alt{padding-block:.55rem;margin-top:.45rem}
  .ord-change{display:inline-block;padding-block:.5rem}
  .dvx-index b a,.pix-index b a{display:inline-block;padding-block:.3rem}

  /* The artwork hotspots scale with their figure and are only a few
     pixels across on a phone, which makes them impossible to hit on
     purpose and easy to hit by accident. Each figure already has a
     text index beneath it carrying exactly the same links, so the
     overlays stand down at these widths. */
  .dvx-hot,.pix-hot,.hix-hot{display:none}
}

/* mobile refinements found in the render review */
@media (max-width:900px){
  /* the teaser wraps here, which stranded a separator at the end of the
     first line — the wrap itself is the separator */
  .hero-price .hp-sep:last-of-type{display:none}
  /* cards are stacked at this width, so the rate line no longer needs to
     reserve a second row for a badge that is not there */
  .plan-rate{min-height:0}
}

/* ================================================================
   MOBILE MENU + BURGER
   The panel was translucent enough for the hero headline to read
   through the menu items, and the burger's close state relied on a
   fixed 5px nudge that did not match the real gap between its bars,
   so the X came out as a chevron. Both are pinned down here.
   ================================================================ */
@media (max-width:900px){
  .nav{
    background:var(--bg);
    box-shadow:0 24px 48px -24px rgba(0,0,0,.85);
    /* stop short of the action bar rather than padding past it — an
       empty padded strip would swallow the tap that should close the
       menu, so the panel is capped and scrolls instead */
    max-height:calc(100dvh - var(--header-h) - 78px);
  }
}
.burger{position:relative}
.burger span{
  position:absolute;left:50%;top:50%;
  width:18px;height:2px;margin:0;
  transform:translate(-50%,calc(-50% - 6px));
}
.burger span:nth-child(2){transform:translate(-50%,-50%)}
.burger span:nth-child(3){transform:translate(-50%,calc(-50% + 6px))}
.burger[aria-expanded="true"] span:nth-child(1){transform:translate(-50%,-50%) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translate(-50%,-50%) rotate(-45deg)}

/* ================================================================
   BLOG INDEX CARDS
   All 61 entries share one cover image, so a full-bleed 3:2 hero on
   every card read as a duplicated photo rather than a design. As a
   small square thumbnail it becomes a repeating motif instead, the
   list gets denser, and 61 large decodes drop to 61 tiny ones.
   Guide-page related grids have no image and are untouched.
   ================================================================ */
.related-card:has(.rc-img){
  display:grid;
  grid-template-columns:88px minmax(0,1fr);
  grid-template-areas:"img title" "img desc" "img more";
  align-content:start;align-items:start;
  gap:.1rem 1.05rem;
}
.related-card:has(.rc-img) .rc-img{
  grid-area:img;align-self:start;
  width:88px;height:88px;margin:0;
  aspect-ratio:1;object-fit:cover;
  border-radius:12px;border:1px solid var(--line-2);
}
.related-card:has(.rc-img) .rc-title{grid-area:title;margin-bottom:.3rem}
.related-card:has(.rc-img) .rc-desc{grid-area:desc}
.related-card:has(.rc-img)::after{grid-area:more;margin-top:.6rem}@media (max-width:420px){
  .related-card:has(.rc-img){grid-template-columns:64px minmax(0,1fr);gap:.1rem .85rem}
  .related-card:has(.rc-img) .rc-img{width:64px;height:64px;border-radius:10px}
}

/* ================================================================================
   DESIGN SYSTEM — normalisation layer
   ================================================================================
   The stylesheet above grew in layers, and an audit of it found the marks of
   that: 186 selectors declared more than once, 106 with properties fought over
   by a later rule, 35 border-radius values, 69 font sizes, 25 transitions across
   five different durations. On screen that showed up as five near-identical
   "small text" sizes, four "meta" sizes, three section-heading sizes, five card
   radii, and a hover that behaved differently on every component.

   This layer does not restyle the site. It puts the existing components onto one
   scale — type, space, radius, motion, elevation — and onto one container grid,
   so the whole site reads as one piece of design work. It sits last so it settles
   those questions without any earlier rule needing to be unpicked.
   ================================================================================ */

:root{
  /* ---- type scale: a fourth apart at the top, tightening through the body
     sizes where the eye needs finer steps. Every size below replaces a cluster
     of near-identical values that were within a pixel of each other. ---- */
  --fs-2xs:.75rem;        /* 12px — eyebrows, badges, uppercase labels        */
  --fs-xs:.8125rem;       /* 13px — captions, notes, breadcrumbs, bylines     */
  --fs-sm:.9375rem;       /* 15px — card copy, lists, footer, secondary body  */
  --fs-base:1.0625rem;    /* 17px — body                                      */
  --fs-lg:1.1875rem;      /* 19px — ledes, section subtitles, h3              */
  --fs-h3:1.1875rem;
  --fs-h2-prose:clamp(1.4rem,1.15rem + 1.1vw,1.8rem);
  --fs-h2:clamp(1.7rem,1.25rem + 2vw,2.55rem);
  --fs-h1:clamp(1.95rem,1.35rem + 2.6vw,3.05rem);
  --fs-display:clamp(2.2rem,1.2rem + 4.2vw,4.2rem);

  /* ---- line heights, paired to role rather than to size ---- */
  --lh-tight:1.12;        /* display and headings                             */
  --lh-snug:1.35;         /* short card headings, buttons                     */
  --lh-body:1.65;         /* interface copy                                   */
  --lh-prose:1.75;        /* long-form reading                                */

  /* ---- reading measure ---- */
  --measure:68ch;

  /* ---- space scale, 4px based ---- */
  --sp-1:.25rem; --sp-2:.5rem;  --sp-3:.75rem; --sp-4:1rem;
  --sp-5:1.5rem; --sp-6:2rem;   --sp-7:3rem;   --sp-8:4rem;

  /* ---- radii: two, by role. Primary surfaces are the things a decision is
     made on — a plan, a panel. Secondary surfaces are everything else. ---- */
  --r-xs:10px;
  --r:16px;               /* secondary surfaces */
  --r-lg:20px;            /* primary surfaces   */
  --r-xl:24px;            /* full-bleed panels  */
  --r-sm:12px;
  --r-pill:999px;

  /* ---- motion: two durations and one curve, everywhere ---- */
  --dur-1:140ms;
  --dur-2:220ms;
  --ease:cubic-bezier(.2,.7,.3,1);
  --lift-card:-3px;
  --lift-btn:-1px;

  /* ---- elevation ---- */
  --sh-1:0 1px 2px rgba(0,0,0,.28);
  --sh-2:0 14px 30px -18px rgba(0,0,0,.8),0 2px 6px rgba(0,0,0,.3);
  --sh-accent:0 8px 22px -10px rgba(84,187,254,.45);

  /* ---- content columns, all sharing the site's left edge ---- */
  --col-doc:54rem;        /* guides, blog, order  */
  --col-narrow:48rem;     /* legal, FAQ           */
}

/* ================================================================================
   1. ONE GRID
   The header and footer sat on a 1180px measure while document pages sat on a
   centred 880px one and the legal pages on a centred 820px one, so on 76 of the
   81 pages the logo started roughly 150px to the left of the first word of the
   page. Content columns now begin on the same line as the masthead and keep a
   comfortable reading width.
   ================================================================================ */
.wrap-doc,
.wrap-narrow{
  max-width:var(--max);
  display:grid;
  justify-content:start;
}
.wrap-doc{grid-template-columns:minmax(0,var(--col-doc))}
.wrap-narrow{grid-template-columns:minmax(0,var(--col-narrow))}@media (max-width:1180px){
  .wrap-doc,.wrap-narrow{grid-template-columns:minmax(0,1fr)}
}

/* ================================================================================
   2. TYPOGRAPHY
   ================================================================================ */
body{font-size:var(--fs-base);line-height:var(--lh-body)}

h1,h2,h3,h4{line-height:var(--lh-tight);letter-spacing:-.025em;text-wrap:balance}

.hero-copy h1{font-size:var(--fs-display);letter-spacing:-.038em;line-height:1.04}
.doc-head h1,.legal-head h1{font-size:var(--fs-h1);letter-spacing:-.032em}
.sec-head h2,.cta-panel h2,.final-cta h2{font-size:var(--fs-h2);letter-spacing:-.03em}
.prose-block h2,.legal-body h2{font-size:var(--fs-h2-prose);letter-spacing:-.025em}
.prose-block h3,.legal-body h3,.fcard-body h3,.wf-card h3,.pr-foot-card h3,
.wf-honest-head h3,.step h3{font-size:var(--fs-h3);line-height:var(--lh-snug);letter-spacing:-.018em}

/* ledes and section subtitles share one size */
.lede,.sec-sub,.pix-lede,.wf-sub{font-size:var(--fs-lg);line-height:1.55}

/* the small sizes: five values within a pixel of each other, now one */
.tick li,.flist li,.rc-desc,.footer-col a,.price-foot,.pr-incl li,.hero-price,
.pr-foot-card p,.wf-card p,.fcard-body p,.sec-foot,.hix-foot,.faq-a,
.dvx-index span,.pix-index span,.hix-steps span,.ord-steps span,
.footer-brand p,.doc-cta-panel p{font-size:var(--fs-sm)}

/* the meta sizes: four values, now one */
.crumbs,.byline,.plan-note,.plan-alt,.pr-basis,.pr-incl-note,.footer-bottom,
.ht-txt span,.table-wrap caption,.hint,.ui-label{font-size:var(--fs-xs)}

/* uppercase labels carry tracking; without it small caps read as noise */
.eyebrow,.footer-col h2,.plan-flag,.plan-save,.related-card::after{
  font-size:var(--fs-2xs);letter-spacing:.11em;text-transform:uppercase;
}
.footer-col h2{font-weight:600;color:var(--text-3)}

/* ================================================================================
   3. PROSE
   Long-form pages carry most of the site's words and had the least design
   attention: the measure ran to 78 characters and the leading was set for
   interface copy rather than reading.
   ================================================================================ */
.prose-block p,.prose-block li,.legal-body p,.legal-body li{
  max-width:var(--measure);
  line-height:var(--lh-prose);
}
.prose-block p{margin-bottom:var(--sp-4)}
.prose-block h2,.legal-body h2{margin-bottom:var(--sp-3)}
.prose-block h3,.legal-body h3{margin:var(--sp-6) 0 var(--sp-2)}
.prose-block h3:first-child{margin-top:0}

/* a hairline where a real section starts, so a long guide can be scanned */
.prose > .prose-block + .prose-block,
.legal-body > section + section{
  border-top:1px solid var(--line);
  padding-top:clamp(1.75rem,3.5vw,2.5rem);
}

.doc-head{padding-bottom:clamp(1.75rem,3.5vw,2.4rem)}
.doc-head .lede{max-width:var(--measure)}

/* ================================================================================
   4. SURFACES
   Cards were carrying five different radii and three different resting
   treatments. Two radii now, by role, and one resting recipe.
   ================================================================================ */
.plan,.cta-panel,.wf-honest,.pr-foot-card,.doc-cta-panel,.fcard{
  border-radius:var(--r-lg);
}
.related-card,.faq-item,.table-wrap,.player,.float-card,.wf-card,
.pr-incl li,.ord-steps li{
  border-radius:var(--r);
}
.hero .stage,.dvx-shot,.pix-shot,.shx-shot,.hix-shot{border-radius:var(--r-xl)}

.plan,.related-card,.faq-item,.wf-card,.pr-foot-card,.fcard,.doc-cta-panel{
  box-shadow:var(--sh-1);
}

/* ================================================================================
   5. MOTION
   One curve, two durations, one lift per role. Interactive surfaces previously
   used 25 different transition declarations, so no two hovers felt alike.
   ================================================================================ */
.btn,.plan,.related-card,.fcard,.wf-card,.pr-foot-card,.player,.nav>a,
.footer-col a,.mbar-btn,.plan-alt,.fbtn,.wa-fab,.faq-item summary,.dvx-index b a,.pix-index b a{
  transition:
    transform var(--dur-2) var(--ease),
    background-color var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease),
    color var(--dur-1) var(--ease);
}

.plan:hover,.related-card:hover,.fcard:hover,.wf-card:hover,.pr-foot-card:hover{
  transform:translateY(var(--lift-card));
  box-shadow:var(--sh-2);
}
.btn:hover,.wa-fab:hover{transform:translateY(var(--lift-btn))}
.btn-primary:hover{box-shadow:var(--sh-accent)}
.btn:active,.plan:active{transform:translateY(0)}

/* one focus ring for the whole site */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
::selection{background:var(--accent-edge);color:#fff}@media (prefers-reduced-motion:reduce){
  .btn,.plan,.related-card,.fcard,.wf-card,.pr-foot-card,.player,.nav>a,
  .footer-col a,.mbar-btn,.plan-alt,.fbtn,.wa-fab,.faq-item summary{transition:none}
  .plan:hover,.related-card:hover,.fcard:hover,.wf-card:hover,
  .pr-foot-card:hover,.btn:hover,.wa-fab:hover{transform:none}
}

/* ================================================================================
   6. LINKS
   164 inline links were white with an amber underline; three were not. The
   odd ones out are brought into line.
   ================================================================================ */
.hero-price a,.wf-honest-foot a,.pr-basis a{
  color:var(--text);
  text-decoration:underline;
  text-decoration-color:rgba(84,187,254,.55);
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  font-weight:600;
}
.hero-price a:hover,.wf-honest-foot a:hover,.pr-basis a:hover{
  color:var(--accent);text-decoration-color:var(--accent);
}

/* ================================================================================
   7. RHYTHM
   Section heads and the space beneath them were set per-section. One value.
   ================================================================================ */
.sec-head{margin-bottom:clamp(2.25rem,4.5vw,3.25rem)}
.sec-head h2{margin-bottom:var(--sp-3)}
.sec-head .eyebrow{margin-bottom:var(--sp-4)}
.sec-sub{max-width:60ch}
.sec-head-center .sec-sub{margin-inline:auto}

/* Legal pages are a flat run of h2/p/ul with no section wrappers, so the
   rule that separates prose sections has to hang off the heading itself. */
.legal-body h2:not(:first-child){
  margin-top:clamp(2rem,4vw,2.9rem);
  padding-top:clamp(1.75rem,3.5vw,2.5rem);
  border-top:1px solid var(--line);
}

/* ================================================================================
   8. COMPONENT CORRECTIONS FOUND IN THE RENDER PASS
   ================================================================================ */

/* Hero trust row: three equal columns of ~140px, so both lines of each item
   have to sit on the smaller step or the label wraps onto a third line. */
.ht-txt b{font-size:var(--fs-xs);line-height:1.3}
.ht-txt span{line-height:1.3}
.hero-trust{gap:1rem .75rem}

/* The closing block of every guide and article carries the page's only offer,
   but it was marked up as an ordinary prose section and so looked like one.
   Giving it a surface is the difference between a paragraph and an invitation. */
.prose-block:has(.doc-cta){
  background:linear-gradient(180deg,var(--surface),var(--bg-alt));
  border:1px solid var(--line-2);
  border-radius:var(--r-lg);
  padding:clamp(1.5rem,3vw,2.25rem);
  box-shadow:var(--sh-1);
}
.prose > .prose-block:has(.doc-cta){border-top:0}
.prose-block:has(.doc-cta) h2{margin-bottom:var(--sp-3)}
.prose-block:has(.doc-cta) > p{max-width:62ch}
.prose-block:has(.doc-cta) .tick{margin:var(--sp-4) 0 0}
.prose-block:has(.doc-cta) .tick li{font-size:var(--fs-sm)}

/* ---- the last stragglers the render pass turned up -----------------------
   Each of these was within a pixel or two of a step already on the scale, so
   they read as sloppiness rather than as a decision. (The .dvx-sr / .pix-sr /
   .shx-sr / .hix-sr headings are screen-reader only and are left alone.) */
.wf-honest-foot,.ord-picked{font-size:var(--fs-xs)}
.plan-rate,.wf-honest-head p{font-size:var(--fs-sm)}
.cta-panel p,.hero-copy .lede{font-size:var(--fs-lg)}
.pix-head h2,.wf-intro h2{font-size:var(--fs-h2);letter-spacing:-.03em;line-height:var(--lh-tight)}
.doc-cta-panel h2{font-size:var(--fs-h2-prose)}

/* The plan name is the card's label, not its headline — the price is the
   headline. Setting it as a tracked label lets the number carry the card. */
.plan-name{
  font-size:var(--fs-2xs);
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--text-3);
  margin-bottom:var(--sp-2);
}

/* ================================================================================
   9. THE FOUR ARTWORK SECTIONS, REBUILT
   Devices, what-is-inside, how-it-works and players were each carried by a large
   raster poster. Those posters still showed the old brand name in the old lime
   palette and baked their headings and card copy into pixels. The copy underneath
   them was already real HTML, so these rules promote it to being the design.
   ================================================================================ */

/* ---- shared card recipe for the three grids ---- */
.dvx-card,.pix-index li,.hix-steps li{
  position:relative;
  display:flex;flex-direction:column;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:clamp(1.1rem,2vw,1.4rem);
  box-shadow:var(--sh-1);
  transition:transform var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),
             background-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease);
}
.dvx-card:hover,.pix-index li:hover,.hix-steps li:hover{
  transform:translateY(var(--lift-card));
  border-color:var(--line-3);
  background:var(--surface-2);
  box-shadow:var(--sh-2);
}
.dvx-card b,.pix-index b,.hix-steps b{
  display:block;color:var(--text);font-size:1rem;font-weight:700;
  letter-spacing:-.015em;line-height:1.3;margin-bottom:.35rem;
}
.dvx-card > span,.pix-index span,.hix-steps li > span{
  color:var(--text-2);font-size:var(--fs-sm);line-height:1.5;
}
.dvx-card b a,.pix-index b a{color:var(--text);text-decoration:none}
.dvx-card b a:hover,.pix-index b a:hover{color:var(--accent)}
.dvx-card > span a{
  color:var(--text);text-decoration:underline;
  text-decoration-color:rgba(84,187,254,.55);text-underline-offset:3px;
}
.dvx-card > span a:hover{color:var(--accent);text-decoration-color:var(--accent)}

/* ---- devices ---- */
.dvx-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.dvx-ico{
  display:grid;place-items:center;width:40px;height:40px;flex:none;
  margin-bottom:.9rem;border-radius:11px;
  background:var(--accent-tint);border:1px solid var(--accent-edge);
}
.dvx-ico svg{
  width:20px;height:20px;fill:none;stroke:var(--accent);
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}

/* ---- players ---- */
.pix-index{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin-top:0}
.pix-index li::before{display:none}
.pix-index b{padding-right:1.6rem}
.pix-index li::after{
  content:"";position:absolute;top:calc(clamp(1.1rem,2vw,1.4rem) + .25em);
  right:clamp(1.1rem,2vw,1.4rem);width:8px;height:8px;
  border-top:2px solid var(--accent);border-right:2px solid var(--accent);
  transform:rotate(45deg);opacity:.65;
  transition:transform var(--dur-2) var(--ease),opacity var(--dur-2) var(--ease);
}
.pix-index li:hover::after{opacity:1;transform:rotate(45deg) translate(2px,-2px)}

/* ---- how it works: four steps on a rail ---- */
.hix-steps{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);
  counter-reset:none;margin:0;
}
.hix-steps li{padding-top:clamp(1.4rem,2.4vw,1.75rem)}
.hix-steps li::before,.hix-steps li::marker{content:none}
.hix-num{
  display:inline-grid;place-items:center;width:38px;height:38px;margin-bottom:.85rem;
  border-radius:50%;background:var(--accent);color:var(--on-accent);
  font-size:.82rem;font-weight:800;letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
}
.hix-steps li:not(:first-child)::after{
  content:"";position:absolute;left:calc(-1 * var(--gap) - 1px);top:calc(clamp(1.4rem,2.4vw,1.75rem) + 19px);
  width:var(--gap);height:1px;background:linear-gradient(90deg,transparent,var(--line-3));
}
.hix-foot{margin-top:clamp(1.6rem,3vw,2.2rem);color:var(--text-2);max-width:70ch}
.hix-cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.3rem}

/* ---- responsive ---- */
@media (max-width:1080px){
  .dvx-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pix-index{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hix-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hix-steps li:not(:first-child)::after{display:none}
  .shx-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
}@media (max-width:760px){
  .dvx-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}@media (max-width:520px){
  .dvx-grid,.pix-index,.hix-steps{grid-template-columns:minmax(0,1fr)}
  .hix-cta .btn{width:100%;justify-content:center}
}@media (prefers-reduced-motion:reduce){
  .dvx-card,.pix-index li,.hix-steps li,.shx-card,.shx-card img{transition:none}
  .dvx-card:hover,.pix-index li:hover,.hix-steps li:hover,.shx-card:hover{transform:none}
}

/* The player and device titles carried an arrow glyph from the old list layout.
   Now that each item is a card with its own chevron, that was two affordances
   pointing at the same link. */
.pix-index b a::after,.dvx-index b a::after,.dvx-card b a::after{content:none}
.pix-index li{border-top:0;padding-top:clamp(1.1rem,2vw,1.4rem);gap:0}

/* the section head and closing note are centred, so the buttons are too */
.hix-cta{justify-content:center}
.hix-foot{margin-inline:auto;text-align:center}

/* the hard break in the devices heading is a desktop composition; on a phone
   it produces a ragged three-line break, so the balancer takes over */
@media (max-width:620px){ .dev-sec .sec-head h2 br{display:none} }

/* .hix-num is a direct span child of the step, so the step's body-copy colour
   was beating it and the numerals sat at 1.26:1 on the amber disc. */
.hix-steps li .hix-num{color:var(--on-accent)}

/* ================================================================================
   10. TWO REMAINING ALIGNMENT ITEMS
   ================================================================================ */

/* The FAQ column is deliberately narrow for reading, which on a wide screen
   left half the row empty. The heading moves alongside and stays with the
   reader as they work down the questions. */
@media (min-width:1000px){
  #faq .wrap-narrow{
    grid-template-columns:minmax(0,21rem) minmax(0,40rem);
    gap:clamp(2rem,4vw,4rem);
    align-items:start;
  }
  #faq .sec-head{position:sticky;top:calc(var(--header-h) + 1.5rem);margin-bottom:0}
  #faq .sec-sub{max-width:none}
}

/* The footer rule spanned the container's padding, so it overhung the columns
   above it by 32px on each side. */
.footer-bottom{border-top:0;position:relative}
.footer-bottom::before{
  content:"";position:absolute;top:0;left:var(--pad);right:var(--pad);
  height:1px;background:var(--line);
}

/* ================================================================================
   11. COLOUR SYSTEM
   ================================================================================
   A census of everything the site paints across fourteen pages found the accent
   appearing at eleven border alphas and six background alphas, five different
   page grounds where the rhythm only needs two, and two colours from the previous
   palette still alive inside rgba(). Those are settled above. What follows sets
   the rules the palette runs on.

   The palette is three neutrals deep, one accent, and one platform colour:

     ground      the page, and one step up from it for emphasis
     surface     cards and panels, and one step up from that for hover
     line        three weights of hairline
     accent      amber — actions, state, and the one thing to notice
     WhatsApp    green — the chat channel, never anything else

   The accent earns its meaning by being spent only where something can be done
   or something has changed. Where it was decorating a repeated icon it steps
   back to the neutral scale and keeps only the glyph.
   ================================================================================ */

:root{
  /* accent tints, four steps — replacing eleven ad-hoc alphas */
  --accent-faint:rgba(84,187,254,.10);   /* ambient marks, decoration        */
  --accent-tint:rgba(84,187,254,.14);    /* filled chips and badges          */
  --accent-edge:rgba(84,187,254,.24);    /* quiet outline                    */
  --accent-edge-2:rgba(84,187,254,.40);  /* outline that has to be seen      */
  --line-accent:var(--accent-edge-2);

  /* the platform colour gets the same treatment, two steps */
  --wa-tint:rgba(37,211,102,.10);
  --wa-edge:rgba(37,211,102,.32);
}

/* ---- 11.1 two grounds, and a hairline only where the ground changes -------
   The four sections that used to sit on near-black are back on the page
   ground, so the run from hero to footer is one continuous surface with two
   deliberate lifts: the pricing block and the FAQ. ------------------------ */
.section-alt{
  background:var(--bg-alt);
  border-block:1px solid var(--line);
}
.dev-sec,.pix-sec,.shx-sec,.hix-sec,.wf-sec,.feat{border-block:0}
.site-footer{background:var(--bg-alt);border-top:1px solid var(--line)}

/* ---- 11.2 surfaces -------------------------------------------------------
   Cards sat on the second line weight, which outlined every box on the page
   at the same strength as a focused control. At rest they take the quiet
   hairline and let the shadow do the separating; the stronger weight is kept
   for hover, so the border now means "you are on this". ------------------- */
.plan,.related-card,.faq-item,.fcard,.wf-card,.pr-foot-card,.player,
.table-wrap,.doc-cta-panel,.dvx-card,.pix-index li,.hix-steps li,
.shx-card,.pr-incl li,.ord-steps li{
  border-color:var(--line);
}
.plan:hover,.related-card:hover,.faq-item:hover,.fcard:hover,.wf-card:hover,
.pr-foot-card:hover,.player:hover,.dvx-card:hover,.pix-index li:hover,
.hix-steps li:hover,.shx-card:hover{
  border-color:var(--line-3);
}
.faq-item[open]{background:var(--surface-2);border-color:var(--line-3)}
.plan-featured{border-color:var(--accent-edge-2)}
.plan-featured:hover{border-color:var(--accent)}

/* ---- 11.3 icon chips -----------------------------------------------------
   Eight device chips, three feature chips, four trust chips and the tick and
   check marks were all amber fill on an amber outline, which put the accent
   on roughly thirty repeated ornaments per page and left it saying nothing in
   particular. The chip becomes neutral; the glyph inside stays amber, so the
   brand colour is still present at a size that reads as a mark rather than a
   field. ------------------------------------------------------------------ */
.ico,.ht-ico,.dvx-ico,.wf-ico,.wf-honest-ico{
  background:var(--surface-2);
  border:1px solid var(--line);
}
.ico svg,.ht-ico svg,.dvx-ico svg,.wf-ico svg,.wf-honest-ico svg{stroke:var(--accent)}
.wf-ico .wf-wa{fill:var(--wa);stroke:none}

/* the functional marks keep their tint: a tick is state, not ornament */
.fchk{background:var(--accent-tint);border:1px solid var(--accent-edge)}

/* ---- 11.4 the accent, spent on purpose ----------------------------------- */
.eyebrow{
  color:var(--accent);
  background:var(--accent-faint);
  border:1px solid var(--accent-edge);
}
.plan-save{background:var(--accent-tint);border:1px solid var(--accent-edge)}
.plan-flag{background:var(--accent);color:var(--on-accent)}
.hix-steps li .hix-num{background:var(--accent);color:var(--on-accent)}

/* ---- 11.5 the platform colour, two steps only ---------------------------- */
.wa-nav{background:var(--wa-tint);border:1px solid var(--wa-edge)}
.btn-wa{border-color:var(--wa-edge)}
.btn-wa:hover{background:var(--wa-tint);border-color:var(--wa)}

/* ---- 11.6 type colour: three roles, no fourth ---------------------------- */
.prose-block code,.legal-body code{
  background:var(--surface-2);
  border:1px solid var(--line);
  color:var(--accent-soft);
}

/* ---- 11.7 elevation in one hue ------------------------------------------
   Shadows carried a white inner highlight in one place and pure black in
   another. All elevation is now the same neutral, so a lifted card on the
   page ground and a lifted card on the alt ground read as the same material. */
.wa-fab{box-shadow:0 10px 26px -12px rgba(0,0,0,.85)}
.cta-panel{box-shadow:var(--sh-1)}

/* ================================================================================
   12. WHITE AND SKY BLUE
   ================================================================================
   The site is rebuilt on a light ground. Everything above already reads its
   colour from tokens, so the palette is restated once here and the components
   follow; what remains are the places that assumed a dark page and the handful
   of surfaces that should stay dark on purpose.

   Two blues, not many. Sky (var(--blue-400)) is the brand light — washes, tints, glows,
   the lighter half of the mark. Azure (var(--accent)) is the working blue — buttons,
   links, icons, anything that has to hold white text or sit on white and still
   pass contrast. Sky cannot do that job: white on var(--blue-400) is 2:1. Using the
   lighter tone for atmosphere and the deeper one for action is what keeps the
   identity sky blue and the interface readable at the same time.

   The product mock-ups keep their dark screens. A television is dark, and an
   app screenshot on a white card is how software is shown; inverting them would
   have made the one honest picture of the product look like a diagram.
   ================================================================================ */

:root{
  /* ---- surfaces: white page, white cards, a blue-tinted band for emphasis -- */
  --bg:#ffffff;
  --bg-alt:var(--blue-050);
  --surface:#ffffff;
  --surface-2:var(--blue-025);
  --panel:var(--surface);
  --panel-2:var(--surface-2);

  /* ---- lines: blue-tinted, never neutral grey ---- */
  --line:var(--blue-100);
  --line-2:var(--blue-200);
  --line-3:var(--blue-300);
  --line-str:var(--line-2);

  /* ---- text: blue-black rather than black, so it belongs to the palette ---- */
  --text:var(--ink-900);      /* 16.4:1 on white */
  --text-2:var(--ink-700);    /*  7.6:1 on white */
  --text-3:var(--ink-500);    /*  5.0:1 on white */
  --muted:var(--text-2);
  --dim:var(--text-3);

  /* ---- the two blues ---- */
  --sky:var(--blue-400);
  --accent:var(--accent);         /* 4.9:1 on white, 4.9:1 white-on-it */
  --accent-hover:var(--accent-hover);   /* 6.6:1 */
  --accent-soft:var(--blue-050);
  --accent-deep:var(--accent-deep);
  --on-accent:#ffffff;
  --accent-faint:rgba(84,187,254,.10);
  --accent-tint:rgba(84,187,254,.17);
  --accent-edge:rgba(0,112,181,.22);
  --accent-edge-2:rgba(0,112,181,.42);
  --line-accent:var(--accent-edge-2);
  --accent-glow:rgba(84,187,254,.40);
  --grad:linear-gradient(135deg,var(--blue-400) 0%,var(--accent) 100%);

  /* legacy names the component layer still calls */
  --lime:var(--accent); --lime-hover:var(--accent-hover);
  --lime-soft:var(--accent-soft); --lime-tint:var(--accent-tint);
  --lime-deep:var(--accent-deep); --on-lime:var(--on-accent);
  --lime-lt:var(--accent-hover); --lime-pale:var(--accent-soft);

  /* ---- the chat channel is no longer green ----
     A saturated WhatsApp green next to sky blue is the one combination this
     palette cannot absorb. The glyph is what people recognise, not the hue, so
     the buttons join the palette and keep the mark. */
  --wa:var(--accent);
  --wa-deep:var(--accent-hover);
  --wa-tint:var(--accent-faint);
  --wa-edge:var(--accent-edge);

  /* ---- elevation: blue-black, never neutral black on white ---- */
  --sh-1:0 1px 2px rgba(2,27,43,.06),0 1px 3px rgba(2,27,43,.04);
  --sh-2:0 18px 34px -18px rgba(2,27,43,.26),0 3px 10px rgba(2,27,43,.06);
  --sh-accent:0 10px 24px -10px rgba(0,112,181,.42);
}

/* ================================================================================
   12.1 THE DARK ISLANDS
   Custom properties inherit, so restating the ramp on the four mock-up roots
   turns every component inside them back to dark without touching a single
   component rule.
   ================================================================================ */
.hero-visual,.fv,.wf-set,.shx-live{
  --bg:var(--blue-950);
  --bg-alt:var(--blue-900);
  --surface:var(--blue-900);
  --surface-2:var(--blue-850);
  --panel:var(--surface);
  --panel-2:var(--surface-2);
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.15);
  --line-3:rgba(255,255,255,.24);
  --text:#ffffff;
  --text-2:var(--ink-200);
  --text-3:var(--ink-300);
  --muted:var(--text-2);
  --dim:var(--text-3);
  --sh-1:0 1px 2px rgba(0,0,0,.4);
}

/* ================================================================================
   12.2 CHROME THAT ASSUMED A DARK PAGE
   ================================================================================ */
.site-header{
  background:rgba(255,255,255,.82);
  border-bottom:1px solid transparent;
}
.site-header.stuck{
  background:rgba(255,255,255,.92);
  border-bottom-color:var(--line);
  box-shadow:0 1px 3px rgba(2,27,43,.05);
}
.mbar{background:rgba(255,255,255,.94);border-top:1px solid var(--line)}

.nav>a{color:var(--text-2)}
.nav>a:hover,.nav>a[aria-current]{color:var(--accent);background:var(--accent-faint)}

.btn-solid{background:var(--surface-2);color:var(--text);border-color:var(--line-2)}
.btn-solid:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-deep)}
.btn-ghost{background:var(--surface);color:var(--text);border-color:var(--line-2)}
.btn-ghost:hover{background:var(--surface-2);border-color:var(--accent);color:var(--accent-deep)}
.btn-primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--on-accent)}
.btn-wa{background:var(--surface);color:var(--text);border-color:var(--line-2)}
.btn-wa:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-deep)}
.btn-wa .wa-ico svg{fill:currentColor}

.wa-fab{background:var(--accent);color:#fff}
.wa-fab:hover{background:var(--accent-hover)}
.wa-nav{background:var(--accent-faint);border:1px solid var(--accent-edge);color:var(--accent)}
.wa-nav:hover{background:var(--accent-tint);color:var(--accent-deep)}
.wa-nav svg{fill:currentColor}
.mbar-wa .mbar-ico svg{fill:currentColor}
.mbar-plans{background:var(--accent);color:var(--on-accent)}
.mbar-wa{background:var(--surface);color:var(--text);border-color:var(--line-2)}

::selection{background:var(--accent-tint);color:var(--text)}
.wf-ico .wf-wa{fill:var(--accent);stroke:none}

/* inline code was set in the soft tint, which is a background colour now */
.prose-block code,.legal-body code{
  background:var(--surface-2);border:1px solid var(--line);color:var(--accent-deep);
}

/* the ambient light: on white it is a breath of sky, not a glow */
.hero-glow{background:radial-gradient(46% 46% at 70% 30%,rgba(84,187,254,.16),transparent 70%)}
.feat-glow,.wf-amb,.pix-amb,.shx-amb,.hix-amb,.pr-amb{
  background:radial-gradient(58% 44% at 50% 0%,rgba(84,187,254,.10),transparent 72%);
}

/* the featured plan is washed in sky rather than outlined twice */
.plan-featured{
  background:linear-gradient(180deg,rgba(84,187,254,.10),transparent 58%),var(--surface);
  border-color:var(--accent);
}
.plan-featured:hover{border-color:var(--accent-hover)}

/* ================================================================================
   12.3 CARDS ON WHITE
   A white card on a white page has no edge of its own, so the hairline and the
   shadow do that work together; on hover the edge takes the accent rather than
   another grey, which is the only colour change a pointer ever produces.
   ================================================================================ */
.plan,.related-card,.faq-item,.fcard,.wf-card,.pr-foot-card,.player,
.table-wrap,.doc-cta-panel,.dvx-card,.pix-index li,.hix-steps li,
.pr-incl li,.ord-steps li,.cta-panel,.wf-honest{
  background:var(--surface);
  border-color:var(--line);
  box-shadow:var(--sh-1);
}
.plan:hover,.related-card:hover,.faq-item:hover,.fcard:hover,.wf-card:hover,
.pr-foot-card:hover,.player:hover,.dvx-card:hover,.pix-index li:hover,
.hix-steps li:hover{
  background:var(--surface);
  border-color:var(--accent-edge-2);
  box-shadow:var(--sh-2);
}
.faq-item[open]{background:var(--surface);border-color:var(--accent-edge-2)}
.wf-honest{background:linear-gradient(180deg,var(--bg-alt),var(--surface));border-color:var(--line-2)}
.prose-block:has(.doc-cta){
  background:linear-gradient(180deg,var(--bg-alt),var(--surface));
  border-color:var(--line-2);
}

/* icon chips: a sky wash with an azure glyph reads as brand, not as furniture */
.ico,.ht-ico,.dvx-ico,.wf-ico,.wf-honest-ico{
  background:var(--accent-faint);
  border:1px solid var(--accent-edge);
}
.ico svg,.ht-ico svg,.dvx-ico svg,.wf-ico svg,.wf-honest-ico svg{stroke:var(--accent)}

/* ================================================================================
   12.4 THE SHOWCASE TILES
   The photographs are dark, so their captions keep a scrim and white type.
   ================================================================================ */
.shx-card{background:var(--surface);border-color:var(--line)}

/* ---- 12.5 the hero set, relit ------------------------------------------
   The television keeps its dark screen, but the media unit it stands on was
   a dark slab sampled for a dark page; on white it read as a hole cut in the
   layout. It becomes pale furniture, and the two badges become white chips,
   so the only dark thing in the composition is the screen itself. */
.console{
  background:linear-gradient(180deg,var(--blue-050) 0%,var(--blue-100) 42%,var(--blue-200) 100%);
  border:1px solid var(--line-2);
  box-shadow:0 20px 38px -22px rgba(2,27,43,.32),inset 0 1px 0 rgba(255,255,255,.9);
}

.hero-visual .float-card{
  background:rgba(255,255,255,.94);
  border:1px solid var(--line-2);
  box-shadow:0 14px 30px -16px rgba(2,27,43,.3);
  color:var(--ink-900);
}
.hero-visual .float-card b{color:var(--accent)}
.hero-visual .float-card span{color:var(--ink-500)}

/* ---- 12.6 the two labels that sit on a tint -----------------------------
   The working blue clears 4.5:1 on white, but on its own pale wash it lands
   at 4.2. Both labels take the deep blue instead, which is the same hue two
   steps down and reads as more deliberate anyway. */
.eyebrow{color:var(--accent-deep)}
.eyebrow .dot{background:var(--accent);box-shadow:none}
.plan-save{color:var(--accent-deep)}

/* ---- 12.7 the two blues, each on its own ground -------------------------
   Sky is the light tone and azure the working one, so which of them is
   legible depends on what is behind it. On white, azure. On the dark screens,
   sky — azure on near-black is 3.8:1, sky is 9:1. Stating it on the island
   roots means every mark inside them flips with one line. */
.hero-visual,.fv,.wf-set,.shx-live{
  --accent:var(--blue-400);
  --accent-hover:var(--blue-400);
  --accent-deep:var(--blue-200);
  --on-accent:var(--blue-900);
  --accent-faint:rgba(84,187,254,.14);
  --accent-tint:rgba(84,187,254,.22);
  --accent-edge:rgba(84,187,254,.32);
  --accent-edge-2:rgba(84,187,254,.5);
}

/* The wordmark is set in the gradient, and a gradient that starts in sky is
   unreadable on a white page. It runs between the two darker blues instead. */
.brand-text span{
  background:linear-gradient(135deg,var(--accent) 0%,var(--accent-deep) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* the badges float on a near-white chip over a dark screen, which lands both
   labels a shade under AA on the working blue */
.hero-visual .float-card b{color:var(--accent-deep)}
.hero-visual .float-card span{color:var(--ink-700)}

/* the badges are white chips sitting over the dark screen, so they belong to
   the light palette even though they live inside the island */
.hero-visual .float-card{
  --accent:var(--accent); --accent-deep:var(--accent-deep); --text-2:var(--ink-700); --text-3:var(--ink-500);
}
.hero-visual .float-card b{color:var(--accent-deep)}
.hero-visual .float-card span{color:var(--text-2)}

/* ---- 12.8 the aliases have to be restated on the islands -----------------
   A custom property is substituted on the element that declares it, and the
   resolved value is what inherits. --lime:var(--accent) is declared on :root,
   so it had already resolved to the working blue before it reached the dark
   screens, and the marks inside them kept the light-ground colour. Restating
   the aliases on the island roots is what makes the flip actually reach the
   components that still call them. */
.hero-visual,.fv,.wf-set,.shx-live{
  --lime:var(--accent);
  --lime-hover:var(--accent-hover);
  --lime-soft:var(--accent-deep);
  --lime-tint:var(--accent-tint);
  --lime-deep:rgba(84,187,254,.18);
  --on-lime:var(--on-accent);
  --lime-lt:var(--accent-hover);
  --lime-pale:var(--accent-deep);
  --line-accent:var(--accent-edge-2);
  --line-str:var(--line-2);
  --accent-glow:rgba(84,187,254,.45);
  --grad:linear-gradient(135deg,var(--blue-400) 0%,var(--blue-400) 100%);
}

/* the hero's own local names predate the token system and sit outside the
   islands; the icon stroke was landing on a pale chip in the palest blue */
.hero{--flame:var(--accent);--flame-deep:var(--accent-deep);--ember:var(--accent)}

/* ================================================================================
   13. ONE RAMP
   ================================================================================
   The palette was measured in OKLCH before this was written, and it was not a
   palette: the saturated blues spanned 29 degrees of hue — sky sat at 233° while
   every other blue sat between 250° and 262°, so the brand colour was literally a
   different blue from the rest of the site. The lightness steps were uneven too,
   with a 17-point hole through the middle of the range and four pairs of colours
   sitting within a point of each other while doing unrelated jobs.

   Everything below is generated on a single hue, 240°, at controlled lightness
   steps, with chroma peaking through the middle of the range and easing at both
   ends so the ramp stays believable rather than turning neon. Each step was
   contrast-checked against the grounds it is actually used on before being
   written down. Nothing here is picked by eye.

     blue-000  #ffffff   the page
     blue-025  #f4faff   raised surfaces, hover wash
     blue-050  #ebf7ff   the tinted band
     blue-100  var(--blue-100)   quiet hairline
     blue-200  var(--blue-200)   soft fill, panel edge
     blue-300  var(--blue-300)   control edge
     blue-400  var(--blue-400)   SKY — the brand light
     blue-500  var(--blue-500)   bright accent, marks on dark
     blue-600  var(--accent)   ACCENT — buttons, links       5.3:1 both ways on white
     blue-700  var(--accent-hover)   hover                          7.4:1
     blue-800  var(--accent-deep)   deep — labels that sit on tint 10.4:1
     blue-850  var(--blue-850)   screen raised
     blue-900  var(--blue-900)   screen surface
     blue-950  var(--blue-950)   screen ground

   The ink ramp is the same hue with the chroma pulled right down, so body copy
   reads as ink that belongs to the palette rather than as blue text.

     ink-900   #0e212e   headings   16.5:1
     ink-700   #3e505c   body        8.4:1
     ink-500   #5b6872   meta        5.7:1   (5.3:1 on the band)
     ink-300   #8fa1ae   meta on the dark screens
     ink-200   #b7c7d2   body on the dark screens
   ================================================================================ */

:root{
  --blue-000:#ffffff; --blue-025:#f4faff; --blue-050:#ebf7ff; --blue-100:#def0fd;
  --blue-200:#cae6fa; --blue-300:#a5cfee; --blue-400:#54bbfe; --blue-500:#0096e0;
  --blue-600:#0070b5; --blue-700:#005897; --blue-800:#004272; --blue-850:#003c5f;
  --blue-900:#002c4a; --blue-950:#021b2b;
  --ink-900:#0e212e; --ink-700:#3e505c; --ink-500:#5b6872;
  --ink-300:#8fa1ae; --ink-200:#b7c7d2;

  /* ---- roles ---- */
  --bg:var(--blue-000);
  --bg-alt:var(--blue-050);
  --surface:var(--blue-000);
  --surface-2:var(--blue-025);
  --panel:var(--surface);
  --panel-2:var(--surface-2);

  --line:var(--blue-100);
  --line-2:var(--blue-200);
  --line-3:var(--blue-300);
  --line-str:var(--line-2);

  --text:var(--ink-900);
  --text-2:var(--ink-700);
  --text-3:var(--ink-500);
  --muted:var(--text-2);
  --dim:var(--text-3);

  --sky:var(--blue-400);
  --accent:var(--blue-600);
  --accent-hover:var(--blue-700);
  --accent-deep:var(--blue-800);
  --accent-soft:var(--blue-050);
  --on-accent:#ffffff;

  /* four alpha steps, all struck from the ramp: sky for fills, accent for edges */
  --accent-faint:rgba(84,187,254,.13);
  --accent-tint:rgba(84,187,254,.22);
  --accent-edge:rgba(0,112,181,.20);
  --accent-edge-2:rgba(0,112,181,.40);
  --line-accent:var(--accent-edge-2);
  --accent-glow:rgba(84,187,254,.40);
  --grad:linear-gradient(135deg,var(--blue-400) 0%,var(--blue-600) 100%);

  --wa:var(--accent); --wa-deep:var(--accent-hover);
  --wa-tint:var(--accent-faint); --wa-edge:var(--accent-edge);

  /* shadow is the deepest step of the ramp, so nothing on the page casts grey */
  --sh-1:0 1px 2px rgba(2,27,43,.07),0 1px 3px rgba(2,27,43,.04);
  --sh-2:0 18px 34px -18px rgba(2,27,43,.30),0 3px 10px rgba(2,27,43,.07);
  --sh-accent:0 10px 24px -10px rgba(0,112,181,.42);
}

/* the aliases the older component layers still call, restated so they resolve
   against the ramp rather than against whatever they last held */
:root{
  --lime:var(--accent); --lime-hover:var(--accent-hover);
  --lime-soft:var(--accent-soft); --lime-tint:var(--accent-tint);
  --lime-deep:var(--accent-deep); --on-lime:var(--on-accent);
  --lime-lt:var(--accent-hover); --lime-pale:var(--accent-soft);
}

/* ---- the dark screens, on the same ramp ---------------------------------- */
.hero-visual,.fv,.wf-set,.shx-live{
  --bg:var(--blue-950);
  --bg-alt:var(--blue-900);
  --surface:var(--blue-900);
  --surface-2:var(--blue-850);
  --panel:var(--surface); --panel-2:var(--surface-2);
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.15);
  --line-3:rgba(255,255,255,.24);
  --line-str:var(--line-2);
  --text:#ffffff;
  --text-2:var(--ink-200);
  --text-3:var(--ink-300);
  --muted:var(--text-2); --dim:var(--text-3);

  --accent:var(--blue-400);
  --accent-hover:var(--blue-300);
  --accent-deep:var(--blue-200);
  --accent-soft:var(--blue-200);
  --on-accent:var(--blue-950);
  --accent-faint:rgba(84,187,254,.14);
  --accent-tint:rgba(84,187,254,.22);
  --accent-edge:rgba(84,187,254,.34);
  --accent-edge-2:rgba(84,187,254,.52);
  --line-accent:var(--accent-edge-2);
  --accent-glow:rgba(84,187,254,.45);
  --grad:linear-gradient(135deg,var(--blue-300) 0%,var(--blue-400) 100%);
  --sh-1:0 1px 2px rgba(0,0,0,.4);

  --lime:var(--accent); --lime-hover:var(--accent-hover);
  --lime-soft:var(--accent-deep); --lime-tint:var(--accent-tint);
  --lime-deep:rgba(84,187,254,.18); --on-lime:var(--on-accent);
  --lime-lt:var(--accent-hover); --lime-pale:var(--accent-deep);
}

/* the badges float on white over a dark screen, so they belong to the light end */
.hero-visual .float-card{
  --accent:var(--blue-600); --accent-deep:var(--blue-800);
  --text:var(--ink-900); --text-2:var(--ink-700); --text-3:var(--ink-500);
}

/* ---- the pieces that were still written as literals ---------------------- */
/* background is a shorthand and resets background-clip, which is what
   paints this wordmark; background-image leaves the clip alone */
.brand-text span{
  background-image:linear-gradient(135deg,var(--blue-600) 0%,var(--blue-800) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero{--flame:var(--blue-600);--flame-deep:var(--blue-800);--ember:var(--blue-600)}

.hero-visual .float-card{
  background:rgba(255,255,255,.95);
  border:1px solid var(--blue-200);
  box-shadow:0 14px 30px -16px rgba(2,27,43,.32);
}

.hero-glow{background:radial-gradient(46% 46% at 70% 30%,rgba(84,187,254,.18),transparent 70%)}
.feat-glow,.wf-amb,.pix-amb,.shx-amb,.hix-amb,.pr-amb{
  background:radial-gradient(58% 44% at 50% 0%,rgba(84,187,254,.11),transparent 72%);
}

.site-header{background:rgba(255,255,255,.82)}
.site-header.stuck{background:rgba(255,255,255,.93);box-shadow:0 1px 3px rgba(2,27,43,.06)}
.mbar{background:rgba(255,255,255,.95)}

.plan-featured{
  background:linear-gradient(180deg,rgba(84,187,254,.13),transparent 58%),var(--surface);
}
.wf-honest,.prose-block:has(.doc-cta){
  background:linear-gradient(180deg,var(--blue-050),var(--surface));
  border-color:var(--blue-200);
}

/* the quality tag inside the channel chips sits on the raised screen step,
   where the meta ink lands at 4.35:1 — it takes the step above */
.ui-chips b{color:var(--ink-200)}

/* .nav>a is more specific than .wa-nav, so the chat mark in the bar was
   inheriting body ink instead of the accent it shares with every other
   interactive mark */
.nav>a.wa-nav{color:var(--accent)}
.nav>a.wa-nav:hover{color:var(--accent-deep);background:var(--accent-tint)}

/* ================================================================================
   14. EDGE-LIT
   ================================================================================
   The audit that prompted this: of the ten sections on the home page, five in a
   row were a centred heading over an even grid of identical rounded rectangles —
   three cards, then six, then eight, then four, then four. Every surface carried
   the same radius, the same hairline and the same shadow, so the page had one
   texture from top to bottom and scrolling it told you nothing about where you
   were.

   The direction is the subject's own: a screen is a thing that emits light, so
   every surface on this page behaves as though it sits near one. Light catches
   the top edge of a surface and falls away down it, and the shadow beneath is
   wide and soft rather than tight and dark. That single idea supplies the depth,
   so nothing else has to be decorated.

   On top of it, three surface roles that look physically different, which is what
   actually breaks the sameness:

     lit      the surfaces a decision is made on — plans, feature cards, panels.
              Generous radius, edge-light along the top, light falling down the
              face, a wide shadow. These lift on hover.
     etched   reference material — devices, the plan inclusions. No card at all:
              items sit on the page separated by hairlines, like a spec sheet.
     inset    the product screens. Unchanged; they are the one dark thing.

   And four compositional changes so the rhythm varies down the page: the feature
   grid becomes asymmetric, the category rail runs wider than every other section,
   the device grid loses its boxes, and the four steps become a rail with the
   numbers sitting on the line.
   ================================================================================ */

:root{
  /* the light: a hairline that is brightest across the middle of an edge */
  --edge-light:linear-gradient(90deg,
      transparent 0%,
      var(--blue-200) 18%,
      var(--blue-300) 50%,
      var(--blue-200) 82%,
      transparent 100%);
  /* the fall-off down the face of a lit surface */
  --face-light:linear-gradient(180deg,rgba(84,187,254,.055) 0%,rgba(84,187,254,0) 42%);

  /* depth: a tight contact shadow plus a wide soft one, both struck from the
     bottom of the ramp so nothing casts grey */
  --sh-1:0 1px 2px rgba(2,27,43,.05),0 4px 10px -6px rgba(2,27,43,.10);
  --sh-2:0 2px 4px rgba(2,27,43,.05),0 22px 44px -20px rgba(2,27,43,.26);
  --sh-3:0 3px 6px rgba(2,27,43,.06),0 40px 70px -32px rgba(2,27,43,.34);
  --sh-accent:0 1px 2px rgba(0,66,114,.30),0 14px 28px -12px rgba(0,112,181,.50);
}

/* ---- 14.1 the lit surface ------------------------------------------------ */
.plan,.wf-card,.pr-foot-card,.cta-panel,.doc-cta-panel,.wf-honest,
.faq-item,.related-card,.pix-index li,.prose-block:has(.doc-cta){
  position:relative;
  background-color:var(--surface);
  background-image:var(--edge-light),var(--face-light);
  background-repeat:no-repeat;
  background-size:100% 1px,100% 100%;
  background-position:top center,top center;
  border:1px solid var(--line);
  box-shadow:var(--sh-1);
}
.plan,.cta-panel,.wf-honest,.pr-foot-card,.doc-cta-panel,.prose-block:has(.doc-cta){
  border-radius:22px;
}
.faq-item,.related-card,.pix-index li,.wf-card{border-radius:14px}

.plan:hover,.wf-card:hover,.pr-foot-card:hover,.related-card:hover,.pix-index li:hover{
  border-color:var(--blue-200);
  box-shadow:var(--sh-2);
}
.faq-item[open]{border-color:var(--blue-200);box-shadow:var(--sh-2)}

/* ---- 14.2 the etched surface ---------------------------------------------
   Reference lists stop being cards. They sit on the page inside one hairline
   frame, divided by rules — a spec sheet rather than eight little boxes. */
.dvx-grid{
  gap:0;
  border:1px solid var(--line);
  border-radius:22px;
  overflow:hidden;
  background:var(--surface);
  box-shadow:var(--sh-1);
  background-image:var(--edge-light);
  background-repeat:no-repeat;
  background-size:100% 1px;
  background-position:top center;
}
.dvx-card{
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  padding:clamp(1.25rem,2.2vw,1.6rem);
  border-inline-start:1px solid var(--line);
  border-block-start:1px solid var(--line);
  transition:background-color var(--dur-2) var(--ease);
}
.dvx-card:hover{background:var(--blue-025);transform:none;box-shadow:none}@media (min-width:1081px){
  .dvx-card:nth-child(4n+1){border-inline-start:0}
  .dvx-card:nth-child(-n+4){border-block-start:0}
}@media (min-width:761px) and (max-width:1080px){
  .dvx-card:nth-child(3n+1){border-inline-start:0}
  .dvx-card:nth-child(-n+3){border-block-start:0}
}@media (min-width:521px) and (max-width:760px){
  .dvx-card:nth-child(odd){border-inline-start:0}
  .dvx-card:nth-child(-n+2){border-block-start:0}
}@media (max-width:520px){
  .dvx-card{border-inline-start:0}
  .dvx-card:first-child{border-block-start:0}
}
/* the plan inclusions get the same etched treatment, in a row */
.pr-incl li{
  background:transparent;border:0;box-shadow:none;
  padding:.4rem .95rem;border-inline-start:1px solid var(--blue-200);border-radius:0;
}

/* ---- 14.3 the feature grid, made asymmetric ------------------------------
   Three equal cards say the three things are interchangeable. They are not:
   live television is the reason people buy this. */
@media (min-width:960px){
  .fgrid{grid-template-columns:1.6fr 1fr;align-items:stretch}
  .fgrid > :first-child{grid-row:span 2}
  .fgrid > :first-child .fcard-body{padding:clamp(1.6rem,2.6vw,2.1rem)}
  .fgrid > :first-child h3{font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem)}
}

/* ---- 14.4 the category rail runs wider than the page ---------------------
   One section that ignores the measure everything else keeps. It is the only
   place the eye is asked to look sideways rather than down. */
@media (min-width:1240px){
  .shx-sec .wrap{max-width:1500px}
  .shx-sec .sec-head{max-width:720px;margin-inline:auto}
}

/* ---- 14.5 the four steps become a rail ----------------------------------
   The numbers sit on the line rather than inside four more boxes, so the
   sequence reads as a sequence. */
.hix-steps{position:relative;padding-top:2.6rem}
.hix-steps::before{
  content:"";position:absolute;left:0;right:0;top:calc(2.6rem - 19px);height:2px;
  background:linear-gradient(90deg,var(--blue-200),var(--blue-300),var(--blue-200));
  border-radius:2px;
}
.hix-steps li{
  background:transparent;border:0;box-shadow:none;padding:0;border-radius:0;
  overflow:visible;
}
.hix-steps li:hover{transform:none;box-shadow:none;background:transparent}
.hix-steps li:not(:first-child)::after{display:none}
.hix-num{
  position:absolute;top:-2.6rem;left:0;
  width:38px;height:38px;
  box-shadow:0 0 0 6px var(--bg),0 4px 10px -4px rgba(0,112,181,.5);
}
.hix-steps li{position:relative}@media (max-width:1080px){
  .hix-steps::before{display:none}
  .hix-steps{padding-top:0}
  .hix-num{position:static;box-shadow:0 4px 10px -4px rgba(0,112,181,.5)}
}

/* ---- 14.6 the heading rhythm --------------------------------------------
   Five centred headings in a row is what made the page feel like one long
   list. Alternating them gives the scroll a pulse. */
@media (min-width:900px){
  .dev-sec .sec-head-center,
  .hix-sec .sec-head-center{text-align:left;margin-inline:0;max-width:44ch}
  .dev-sec .sec-head-center .eyebrow,
  .hix-sec .sec-head-center .eyebrow{margin-inline:0}
  .dev-sec .sec-head-center .sec-sub,
  .hix-sec .sec-head-center .sec-sub{margin-inline:0}
}

/* ---- 14.7 buttons -------------------------------------------------------
   The primary action gets the same light as the surfaces: a highlight along
   its top edge, a face that falls away, and a shadow in its own hue. */
.btn{position:relative;isolation:isolate}
.btn-primary{
  background-color:var(--accent);
  background-image:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 55%);
  border:1px solid var(--blue-700);
  box-shadow:var(--sh-accent);
  color:var(--on-accent);
}
.btn-primary:hover{
  background-color:var(--accent-hover);
  border-color:var(--blue-800);
  box-shadow:0 1px 2px rgba(0,66,114,.34),0 18px 34px -12px rgba(0,112,181,.55);
}
.btn-primary:active{box-shadow:0 1px 2px rgba(0,66,114,.4)}

.btn-solid,.btn-ghost,.btn-wa{
  background-color:var(--surface);
  background-image:linear-gradient(180deg,rgba(84,187,254,.07),rgba(84,187,254,0) 60%);
  border:1px solid var(--line-2);
  box-shadow:var(--sh-1);
  color:var(--text);
}
.btn-solid:hover,.btn-ghost:hover,.btn-wa:hover{
  background-color:var(--blue-025);
  border-color:var(--blue-300);
  color:var(--accent-deep);
  box-shadow:var(--sh-2);
}

/* the mobile action bar matches the buttons above it */
.mbar-plans{
  background-color:var(--accent);
  background-image:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 55%);
  box-shadow:var(--sh-accent);
}

/* ---- 14.8 the featured plan is lifted, not just outlined ---------------- */
@media (min-width:1081px){
  .plan-featured{transform:translateY(-14px)}
  .plan-featured:hover{transform:translateY(-18px)}
}
.plan-featured{
  border-color:var(--blue-300);
  box-shadow:var(--sh-3);
  background-image:var(--edge-light),
    linear-gradient(180deg,rgba(84,187,254,.16) 0%,rgba(84,187,254,0) 46%);
}
.plan-featured:hover{border-color:var(--accent);box-shadow:var(--sh-3)}
.plan-flag{box-shadow:0 6px 14px -6px rgba(0,112,181,.6)}

/* ---- 14.9 the eyebrow reads as a marker, not a pill --------------------- */
.eyebrow{
  background:transparent;
  border:0;
  border-inline-start:2px solid var(--blue-400);
  border-radius:0;
  padding:.1rem 0 .1rem .7rem;
  color:var(--accent-deep);
}
.eyebrow .dot{display:none}
.sec-head-center .eyebrow{
  border-inline-start:0;
  border-block-end:2px solid var(--blue-400);
  padding:0 0 .45rem;
}@media (prefers-reduced-motion:reduce){
  .plan-featured,.plan-featured:hover{transform:none}
  .dvx-card{transition:none}
}

/* ---- 14.10 the guide fills the dominant card ----------------------------
   The programme guide is drawn at a fixed width, so widening its card left a
   band of empty screen and stranded the NOW marker mid-panel. Inside the
   dominant card the programme bars become fluid, which is what a real guide
   does when the window gets wider. */
@media (min-width:960px){
  .fgrid > :first-child .epg{padding-right:10px}
  .fgrid > :first-child .epg-row{gap:6px}
  .fgrid > :first-child .epg-b{flex:1 1 0;width:auto;min-width:0}
  .fgrid > :first-child .epg-b.w2{flex-grow:1.75}
  .fgrid > :first-child .epg-top{padding-right:2px}
  .fgrid > :first-child .epg-times{flex:1;justify-content:space-between;gap:0;padding-inline:6% 2%}
  .fgrid > :first-child .epg-now{left:58%}
}

/* the setup section's head is left-aligned now, so its closing note and
   buttons follow it rather than sitting centred under a left-set heading */
@media (min-width:900px){
  .hix-foot{margin-inline:0;text-align:left}
  .hix-cta{justify-content:flex-start}
}

/* ================================================================================
   15. CATEGORY CARDS
   ================================================================================
   Built from the supplied reference. The composition is three stacked plates:
   a photograph, a white panel overlapping its lower edge, and an icon badge
   sitting across the seam between them, with the link arrow in the bottom
   corner. The overlap is what gives the card its depth — there is no border on
   the photograph at all, so the panel appears to sit in front of it.
   ================================================================================ */

.cat-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:clamp(.9rem,1.6vw,1.35rem);
  align-items:stretch;
}
.cat{display:flex}

.cat-link{
  position:relative;
  display:flex;flex-direction:column;
  width:100%;
  color:inherit;text-decoration:none;
  border-radius:18px;
  transition:transform var(--dur-2) var(--ease);
}

/* --- the photograph ---------------------------------------------------- */
.cat-shot{
  display:block;position:relative;z-index:0;
  border-radius:18px;overflow:hidden;
  background:var(--blue-100);
  box-shadow:0 10px 22px -14px rgba(2,27,43,.35);
}
.cat-shot img{
  display:block;width:100%;height:auto;
  aspect-ratio:283/156;object-fit:cover;
  transition:transform var(--dur-2) var(--ease);
}

/* --- the panel that overlaps it ---------------------------------------- */
.cat-body{
  position:relative;z-index:1;
  display:flex;flex-direction:column;flex:1;
  margin:-30px 0 0;
  padding:2.6rem 1.15rem 3.1rem;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--sh-1);
  transition:box-shadow var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease);
}

/* --- the badge across the seam ----------------------------------------- */
.cat-ico{
  position:absolute;top:-31px;left:1.05rem;
  width:62px;height:62px;
  display:grid;place-items:center;
  background:var(--surface);
  border-radius:17px;
  box-shadow:0 8px 18px -8px rgba(2,27,43,.30),0 0 0 1px var(--line);
  transition:transform var(--dur-2) var(--ease);
}
.cat-ico svg{width:27px;height:27px;fill:var(--accent);stroke:none;display:block}

.cat-name{
  display:block;
  font-size:1.28rem;font-weight:800;letter-spacing:-.022em;line-height:1.2;
  color:var(--text);
  margin-bottom:.45rem;
}
.cat-desc{
  display:block;flex:1;
  font-size:var(--fs-sm);line-height:1.5;color:var(--text-2);
}

/* --- the arrow ---------------------------------------------------------- */
.cat-go{
  position:absolute;right:1.05rem;bottom:1.05rem;
  width:36px;height:36px;flex:none;
  display:grid;place-items:center;
  border-radius:50%;
  background:var(--blue-100);
  transition:background-color var(--dur-2) var(--ease),transform var(--dur-2) var(--ease);
}
.cat-go svg{
  width:17px;height:17px;fill:none;stroke:var(--accent);
  stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;display:block;
}

/* --- hover: the whole plate lifts as one -------------------------------- */
.cat-link:hover{transform:translateY(-4px)}
.cat-link:hover .cat-body{border-color:var(--blue-200);box-shadow:var(--sh-2)}
.cat-link:hover .cat-shot img{transform:scale(1.045)}
.cat-link:hover .cat-go{background:var(--accent);transform:translateX(2px)}
.cat-link:hover .cat-go svg{stroke:var(--on-accent)}
.cat-link:hover .cat-ico{transform:translateY(-2px)}
.cat-link:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:18px}

/* --- the closing action ------------------------------------------------- */
.cat-cta{display:flex;justify-content:center;margin-top:clamp(2.25rem,4vw,3.25rem)}
.cat-cta .btn-ico svg{
  width:1.1em;height:1.1em;fill:none;stroke:currentColor;
  stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;
}

/* --- responsive ---------------------------------------------------------
   Six across only where a card still holds three lines of description; then
   three, two, and one. The badge and the overlap scale with the card so the
   composition never breaks. ---------------------------------------------- */
@media (max-width:1239px){
  .cat-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2vw,1.5rem)}
}@media (max-width:820px){
  .cat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}@media (max-width:520px){
  .cat-grid{grid-template-columns:minmax(0,1fr);gap:1.1rem}
  .cat-body{padding:2.5rem 1.2rem 1.2rem}
  .cat-desc{padding-right:3rem}
  .cat-go{bottom:1.2rem;right:1.2rem}
}@media (prefers-reduced-motion:reduce){
  .cat-link,.cat-shot img,.cat-go,.cat-ico,.cat-body{transition:none}
  .cat-link:hover{transform:none}
  .cat-link:hover .cat-shot img{transform:none}
  .cat-link:hover .cat-go{transform:none}
  .cat-link:hover .cat-ico{transform:none}
}

/* ---- 15.1 proportions matched to the reference --------------------------
   Cropping the baked-in badge off the supplied photographs left a strip too
   letterboxed to match the reference, where the visible photograph is about
   two thirds as tall as the card is wide. The tile takes a 5:4 box and the
   photograph fills it, which centre-crops the sides rather than squashing it.
   The badge and the overlap are sized from the card so the composition holds
   at every column count. */
.cat-link{--badge:clamp(44px,21%,62px);--overlap:calc(var(--badge) * .5)}
.cat-shot img{aspect-ratio:5/4;object-position:50% 42%}
.cat-body{
  margin-top:calc(var(--overlap) * -1);
  padding-top:calc(var(--overlap) + .95rem);
}
.cat-ico{
  width:var(--badge);height:var(--badge);
  top:calc(var(--overlap) * -1);
  border-radius:calc(var(--badge) * .28);
}
.cat-ico svg{width:44%;height:44%}

/* ================================================================================
   16. THE PRODUCT PHOTOGRAPH IN "WHY MANISIPTV"
   ================================================================================
   The orbit graphic that stood here was abstract; the supplied photograph shows
   the thing itself, which is a better argument in a section about what a
   provider is willing to show you before you pay.

   The picture is placed, never stretched: it keeps its own 805:681 ratio at
   every width and is only ever scaled. Two callouts sit over it in HTML rather
   than in pixels, so their text stays sharp, recolours with the palette, and
   says only what the site can stand behind.
   ================================================================================ */

.wf-shot{
  position:relative;
  margin:0;
  border-radius:22px;
  background:linear-gradient(160deg,var(--blue-050),var(--blue-025));
  box-shadow:var(--sh-2);
  /* the photograph is cropped close on the right, so a hairline all the way
     round would draw attention to the bleed; the light sits on the top edge
     like every other lit surface instead */
  background-image:var(--edge-light),linear-gradient(160deg,var(--blue-050),var(--blue-025));
  background-repeat:no-repeat;
  background-size:100% 1px,100% 100%;
  background-position:top center,top center;
  border:1px solid var(--line);
  overflow:hidden;
  isolation:isolate;
}
.wf-shot img{
  display:block;
  width:100%;height:auto;
  aspect-ratio:805/681;
  object-fit:cover;object-position:50% 50%;
}

/* ---- the two callouts --------------------------------------------------- */
.wf-chip{
  position:absolute;z-index:2;
  display:flex;align-items:center;gap:.6rem;
  padding:.6rem .85rem;
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 10px 24px -12px rgba(2,27,43,.34);
  white-space:nowrap;
}
.wf-chip-a{top:6.5%;left:4%}
.wf-chip-b{bottom:8%;right:4%}

.wf-chip-ico{
  display:grid;place-items:center;flex:none;
  width:34px;height:34px;border-radius:10px;
  background:var(--accent-faint);
}
.wf-chip-ico svg{
  width:18px;height:18px;fill:none;stroke:var(--accent);
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;display:block;
}
.wf-chip-txt{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.wf-chip-txt b{font-size:.86rem;font-weight:800;color:var(--text);letter-spacing:-.01em}
.wf-chip-txt i{font-style:normal;font-size:.74rem;font-weight:600;color:var(--text-2)}

/* ---- responsive ---------------------------------------------------------
   The column becomes full width below 1024, where the picture is large enough
   that the callouts still read. Under 560 they would cover a third of the
   screen each, so they step down; under 420 the picture speaks for itself. */
@media (max-width:1023px){
  .wf-shot{max-width:620px;margin-inline:auto}
}@media (max-width:559px){
  .wf-chip{padding:.5rem .7rem;gap:.5rem;border-radius:12px}
  .wf-chip-ico{width:28px;height:28px;border-radius:8px}
  .wf-chip-ico svg{width:15px;height:15px}
  .wf-chip-txt b{font-size:.78rem}
  .wf-chip-txt i{font-size:.68rem}
  .wf-chip-a{top:4%;left:3%}
  .wf-chip-b{bottom:5%;right:3%}
}@media (max-width:419px){
  .wf-chip{display:none}
}

/* ---- 16.1 the chips float over the frame's edge -------------------------
   Clipping the figure meant the callouts had to sit inside the picture, on
   top of the screen. The photograph is clipped by its own frame instead, and
   the callouts hang over its corners the way the reference has them. The
   overhang is small and only applies where there is margin to spare. */
.wf-shot{
  background:none;border:0;box-shadow:none;overflow:visible;border-radius:0;
  max-width:560px;margin-inline:0 0;margin-left:auto;
}
.wf-frame{
  display:block;position:relative;
  border-radius:22px;overflow:hidden;
  border:1px solid var(--line);
  box-shadow:var(--sh-2);
  background-image:var(--edge-light),linear-gradient(160deg,var(--blue-050),var(--blue-025));
  background-repeat:no-repeat;
  background-size:100% 1px,100% 100%;
  background-position:top center,top center;
}@media (min-width:1024px){
  .wf-chip-a{top:5%;left:-5%}
  .wf-chip-b{bottom:7%;right:-4%}
}@media (max-width:1023px){
  .wf-shot{max-width:620px;margin-inline:auto}
  .wf-chip-a{top:5%;left:2%}
  .wf-chip-b{bottom:7%;right:2%}
}

/* ---- 16.2 the callouts clear what matters in the picture ----------------
   The first chip was sitting over the brand on the television screen and the
   second over the remote. Both straddle an edge of the frame instead, which
   is also closer to how the reference places them. */
@media (min-width:1024px){
  .wf-chip-a{top:-6%;left:-6%}
  .wf-chip-b{bottom:13%;right:-5%}
}@media (max-width:1023px){
  .wf-chip-a{top:-5%;left:1%}
  .wf-chip-b{bottom:12%;right:1%}
}

/* ================================================================================
   17. THE HERO VISUAL
   ================================================================================
   The supplied artwork replaces the CSS television that stood here. It is placed,
   never stretched: it keeps its own 1096:752 ratio at every width and is only
   ever scaled. No frame, no border and no card — the artwork already carries its
   own soft ground and shadow, and putting a box round it would fight that.
   ================================================================================ */
.hero-shot{
  margin:0;
  display:block;
  position:relative;
}
.hero-shot img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1096/752;
  /* the artwork is drawn on a pale ground that meets the page, so it needs no
     rounding of its own; a radius here would cut the floating callouts */
}

/* the hero grid gave the copy and the visual equal columns, which left the
   artwork smaller than it is drawn and the copy with room it does not use */
@media (min-width:900px){
  .hero-inner{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);align-items:center}
  .hero-shot{margin-right:calc(var(--pad) * -1)}
}@media (max-width:899px){
  .hero-visual{max-width:640px;width:100%;margin-inline:auto}
}

/* ---- 17.1 the artwork's own ground, carried into the page ---------------
   The supplied image is drawn on a pale blue ground (its edges sample between
   #eef6ff and #f9fafe), so on a white hero it read as a pasted rectangle. A
   soft wash of that same colour sits behind it and fades out, which lets the
   artwork's ground meet the page instead of ending at a line. Nothing is done
   to the image itself. */
.hero-shot::before{
  content:"";
  position:absolute;
  inset:-14% -11% -16% -9%;
  z-index:-1;
  pointer-events:none;
  border-radius:50%;
  background:radial-gradient(58% 58% at 50% 48%,
    #eff7fe 0%,
    rgba(239,247,254,.82) 42%,
    rgba(239,247,254,.35) 68%,
    rgba(239,247,254,0) 84%);
}@media (min-width:900px){
  .hero-inner{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}
}

/* 1.2fr squeezed the copy column until the two hero buttons stacked; 1.12
   keeps them on one row. The wash reaches further so the artwork's ground
   fades out well before the page white rather than at the image edge. */
@media (min-width:900px){
  .hero-inner{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr)}
}
.hero-shot::before{inset:-20% -17% -22% -15%}

/* ---- 17.2 the horizontal edges melt into the wash -----------------------
   The artwork's ground shades from #f5f8fe at the top to #daeefe at the
   bottom right, so a single flat wash could not match it everywhere and the
   top and bottom edges still read as lines. Those two edges carry nothing but
   empty ground and the table surface, so they fade; the left and right are
   left alone because the callouts and the plant sit against them. */
.hero-shot img{
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 5%,#000 95%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 5%,#000 95%,transparent 100%);
}

/* ================================================================================
   18. THE PRICING CARDS
   ================================================================================
   Four across on a desktop, two on a tablet, one on a phone. Each card is a
   price block, a hairline, a ticked feature list and a rounded button, in that
   order, with the list taking the slack so the four buttons sit on one line
   whatever the copy does.

   The ticks are the accent, not red: red against sky blue is the one clash this
   palette cannot absorb, and a tick that matches the buy button reads as "this
   is included in what you are buying". The one crossed-off line is the
   multi-device limit — the only thing a plan genuinely does not include.
   ================================================================================ */

.pr-grid{align-items:stretch}

.plan{
  display:flex;flex-direction:column;
  padding:clamp(1.5rem,2.4vw,1.9rem) clamp(1.25rem,2vw,1.6rem) clamp(1.4rem,2.2vw,1.75rem);
  overflow:hidden;
}

/* ---- the price block ---------------------------------------------------- */
.plan-head{display:flex;flex-direction:column}
.plan-name{
  font-size:var(--fs-2xs);letter-spacing:.12em;text-transform:uppercase;
  font-weight:700;color:var(--text-3);margin-bottom:.5rem;
}
.plan-price{
  font-size:clamp(2.5rem,1.9rem + 1.9vw,3.35rem);
  font-weight:800;letter-spacing:-.05em;line-height:.95;color:var(--text);
  font-variant-numeric:tabular-nums;
}
.plan-price .cur{
  font-size:.42em;font-weight:700;vertical-align:.62em;margin-right:.08em;color:var(--text-3);
}
.plan-rate{
  display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;
  min-height:0;margin-top:.6rem;
  font-size:var(--fs-sm);font-weight:700;color:var(--accent);
}
.plan-save{
  font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent-deep);background:var(--accent-tint);
  border:1px solid var(--accent-edge);border-radius:999px;padding:.2rem .5rem;
  margin-top:0;
}
.plan-note{
  margin-top:.55rem;font-size:var(--fs-xs);color:var(--text-3);
  min-height:2.8em;flex:none;
}

/* ---- the feature list, with a hairline either side ---------------------- */
.plan-feats{
  display:flex;flex-direction:column;gap:.6rem;
  flex:1;
  margin:clamp(1.05rem,1.8vw,1.3rem) 0;
  padding:clamp(1.05rem,1.8vw,1.3rem) 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  list-style:none;
}
.plan-feats li{
  display:flex;align-items:flex-start;gap:.6rem;
  font-size:var(--fs-sm);line-height:1.4;color:var(--text-2);
  min-width:0;
}
.plan-feats li > span:last-child{min-width:0;overflow-wrap:anywhere}
.pf-mark{
  display:grid;place-items:center;flex:none;
  width:20px;height:20px;margin-top:.05em;border-radius:50%;
}
.pf-mark svg{
  width:12px;height:12px;fill:none;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;display:block;
}
.plan-feats .is-in .pf-mark{background:var(--accent-tint)}
.plan-feats .is-in .pf-mark svg{stroke:var(--accent)}
.plan-feats .is-out{color:var(--text-3)}
.plan-feats .is-out .pf-mark{background:var(--blue-100)}
.plan-feats .is-out .pf-mark svg{stroke:var(--ink-500);stroke-width:2.3}

/* ---- the action --------------------------------------------------------- */
.plan-foot{display:flex;flex-direction:column;gap:.55rem}
.plan-foot .btn{border-radius:999px;padding-block:.85rem;font-weight:800}
.plan-alt{
  display:block;text-align:center;
  font-size:var(--fs-xs);font-weight:600;color:var(--text-3);
  text-decoration:underline;text-underline-offset:3px;margin-top:0;
}
.plan-alt:hover{color:var(--accent)}

/* ---- the featured plan --------------------------------------------------
   It already sits proud of the row and carries the accent border; the list
   inside it takes the accent hairlines too so the whole card reads as one
   object rather than a white card with a coloured edge. */
.plan-featured .plan-feats{border-color:var(--accent-edge)}
.plan-featured .plan-name{color:var(--accent-deep)}
.plan-flag{
  top:0;right:clamp(1.25rem,2vw,1.6rem);
  border-radius:0 0 10px 10px;padding:.32rem .75rem;
}

/* ---- responsive ---------------------------------------------------------
   Four across only while a card can hold the price and a full-width button
   without the list wrapping oddly; then two, then one. The lifted featured
   card levels off as soon as the row breaks, or it would float mid-column. */
@media (max-width:1080px){
  .price-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .plan-featured,.plan-featured:hover{transform:none}
}@media (max-width:620px){
  .price-grid{grid-template-columns:minmax(0,1fr)}
  .plan-note{min-height:0}
  .plan-price{font-size:2.6rem}
}@media (prefers-reduced-motion:reduce){
  .plan,.plan:hover{transition:none}
}

/* ---- 18.1 one baseline for the four heads ------------------------------
   The savings badge sits beside the monthly rate on a wide card and wraps
   below it on a narrow one, and the first plan has no badge at all, so the
   four feature lists started at four different heights. The rate row reserves
   both lines on every card, which puts the hairlines — and therefore the
   lists and the buttons — on one line across the row. */
.plan-rate{min-height:3.3em;align-content:flex-start}@media (max-width:620px){
  .plan-rate{min-height:0}
}

/* ================================================================================
   19. THE BRAND LOGO
   ================================================================================
   The supplied file is square (1254x1254) with a transparent background, and the
   artwork inside it — the set and the wordmark stacked — occupies 1046x807 of
   that, so roughly a fifth of the box is empty above and below. The whole file is
   displayed, unaltered and undistorted; the box is simply sized so the artwork
   itself reads at the right size against the navigation, and the transparent
   margins fall outside the bar where nothing is drawn.
   ================================================================================ */
.brand{gap:0}
.brand-logo{
  display:block;
  width:auto;
  height:86px;          /* artwork inside stands 55px tall */
  max-width:100%;
  object-fit:contain;   /* belt and braces: never distorts, whatever the box */
  margin-block:-8px;    /* the transparent margin, not the artwork */
}
.footer-brand .brand-logo{height:96px;margin-block:-10px;margin-inline-start:-6px}@media (max-width:900px){
  .brand-logo{height:76px;margin-block:-6px}
}@media (max-width:420px){
  .brand-logo{height:64px;margin-block:-5px}
}

/* ---- 19.1 the bar is sized to the logo, not the other way round ---------
   The supplied mark stacks the set above the wordmark, so at a 76px bar the
   wordmark came out under ten pixels and could not be read. The bar takes the
   height the artwork needs; every rule that depended on 76px now reads the
   token, so the mobile panel, the sticky FAQ heading and the anchor offsets
   all follow it. */
:root{--header-h:100px}@media (max-width:900px){ :root{--header-h:84px} }@media (max-width:420px){ :root{--header-h:72px} }

.brand-logo{height:118px;margin-block:-14px}@media (max-width:900px){ .brand-logo{height:100px;margin-block:-12px} }@media (max-width:420px){ .brand-logo{height:86px;margin-block:-10px} }
.footer-brand .brand-logo{height:124px;margin-block:-16px;margin-inline-start:-8px}


/* ================================================================================
   20. THE ARTICLE RAIL
   ================================================================================
   Article pages align their reading column with the masthead, which is
   deliberate — but on a wide screen that left a third of the viewport empty on
   the right. The rail fills that space with something useful rather than
   changing the alignment: a contents list for a long guide, and, where the
   article already links somewhere the related grid does not cover, a short
   pointer to it.

   The numbers fit inside the existing measure: 54rem of text + a 3rem gutter +
   15rem of rail is 1152px, against a 1180px wrap. Nothing is squeezed and the
   text column keeps its width exactly.

   Below 1220px the rail is display:none and the grid returns to one column, so
   tablet and phone layouts are untouched. The markup is built by script and the
   list is plain anchors, so keyboard and screen-reader behaviour is the browser
   default. Nothing here changes the article body.
   ================================================================================ */

.doc-rail{display:none}

@media (min-width:1220px){
  .doc .wrap-doc{
    grid-template-columns:minmax(0,var(--col-doc)) 15rem;
    column-gap:clamp(2rem,3vw,3rem);
  }
  .doc .wrap-doc > :not(.doc-rail){grid-column:1}

  .doc-rail{
    display:block;
    grid-column:2;
    grid-row:1 / -1;
    align-self:start;
    position:sticky;
    top:calc(var(--header-h) + 1.25rem);
    max-height:calc(100dvh - var(--header-h) - 2.5rem);
    overflow-y:auto;
    overscroll-behavior:contain;
    padding-block:.25rem;
    /* the cover image is the first thing worth reading beside, so the rail
       starts level with the top of the article rather than the breadcrumb */
    margin-top:clamp(4rem,9vw,7rem);
  }
}

.rail-title{
  font-size:var(--fs-2xs);
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--text-3);
  margin-bottom:.7rem;
}

.rail-list{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
.rail-list li{margin:0}
.rail-list a{
  display:block;
  padding:.42rem 0 .42rem .85rem;
  margin-left:-1px;
  border-left:2px solid transparent;
  font-size:var(--fs-xs);
  line-height:1.4;
  color:var(--text-3);
  text-decoration:none;
  transition:color .15s ease,border-color .15s ease;
}
.rail-list a:hover{color:var(--accent);border-left-color:var(--accent-edge)}
.rail-list a[aria-current="true"]{
  color:var(--accent-deep);
  font-weight:600;
  border-left-color:var(--accent);
}

.rail-more{margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid var(--line)}
.rail-more a{
  display:block;
  font-size:var(--fs-xs);
  line-height:1.45;
  color:var(--text-2);
  text-decoration:none;
  padding-block:.32rem;
}
.rail-more a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

@media (prefers-reduced-motion:reduce){
  .rail-list a{transition:none}
}

/* The three hero trust labels are short enough to sit on one line, but the
   grid gives each an equal third of the hero column, which forced "Setup help
   included" and "Support over WhatsApp" to break mid-phrase. Below 600px the
   grid is already a single column, so this is safe at every width — checked
   from 320px to 1440px with no overflow and no clipping. */
.hero-trust .ht-txt b{white-space:nowrap}