/* =========================================================================
   Tivo8k — main.css
   Layout language modelled on iptvv.ca: alternating light / dark bands,
   blue accent, heavy condensed display face, centred section headers with a
   letterspaced blue eyebrow above each H2.
   One stylesheet, no framework, no external requests.
   ========================================================================= */

@font-face{font-family:SairaC;src:url(../fonts/saira-700.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Barlow;src:url(../fonts/barlow-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Barlow;src:url(../fonts/barlow-600.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}

:root{
  --blue:#3B7BF0;
  --blue-hi:#5590FF;
  --blue-dk:#2A63CC;

  --dark:#1A1A1A;
  --dark-2:#242424;
  --dark-3:#2E2E2E;
  --dark-line:#333;

  --light:#F7F8FA;
  --light-2:#EEF3FD;
  --white:#FFF;

  --ink:#15181C;
  --ink-2:#5A626C;
  --ink-3:#8B939D;

  --w-ink:#FFF;
  --w-ink-2:#B4BAC2;
  --w-ink-3:#868E97;

  --green:#3FBF6A;
  --red:#E5544B;

  --f-d:SairaC,'Arial Narrow',system-ui,sans-serif;
  --f-b:Barlow,system-ui,-apple-system,'Segoe UI',sans-serif;

  --wrap:1240px;
  --r:8px;
  --s1:8px;--s2:16px;--s3:24px;--s4:40px;--s5:64px;--s6:92px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--f-b);font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:3px}

h1,h2,h3{font-family:var(--f-d);font-weight:700;line-height:1.06;letter-spacing:-.01em;margin:0;text-wrap:balance}
h1{font-size:clamp(2.1rem,4.6vw,3.4rem)}
h2{font-size:clamp(1.75rem,3.4vw,2.6rem)}
h3{font-size:1.18rem}
h4{font-family:var(--f-b);font-weight:600;font-size:.78rem;letter-spacing:.11em;text-transform:uppercase;margin:0 0 var(--s2)}
p{margin:0 0 var(--s2)}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:22px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;background:var(--blue);color:#fff;padding:10px 16px;z-index:300;font-weight:600}
.skip:focus{left:8px;top:8px}

/* ---------- section header pattern -------------------------------------- */
.eyebrow{display:flex;align-items:center;justify-content:center;gap:8px;font-size:.76rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--blue);margin:0 0 var(--s2)}
.eyebrow::before{content:"";width:14px;height:14px;background:var(--blue);-webkit-mask:radial-gradient(circle at 50% 50%,#000 42%,transparent 44%);mask:radial-gradient(circle at 50% 50%,#000 42%,transparent 44%)}
.sec-head{text-align:center;max-width:820px;margin:0 auto var(--s4)}
.sec-head p{color:var(--ink-2);margin:var(--s2) 0 0}
.dark .sec-head p{color:var(--w-ink-2)}

/* ---------- bands ------------------------------------------------------- */
.band{padding:var(--s6) 0}
.band-light{background:var(--light)}
.band-white{background:var(--white)}
.dark{background:var(--dark);color:var(--w-ink)}
.dark h2,.dark h3{color:var(--w-ink)}

/* ---------- buttons ----------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--f-b);font-weight:600;font-size:.9rem;letter-spacing:.03em;text-transform:uppercase;padding:14px 26px;border-radius:6px;border:1px solid transparent;cursor:pointer;transition:background .15s,border-color .15s,color .15s;text-decoration:none;white-space:nowrap}
.btn:hover{text-decoration:none}
.btn-blue{background:var(--blue);color:#fff}
.btn-blue:hover{background:var(--blue-dk)}
.btn-outline{background:transparent;color:var(--blue);border-color:var(--blue)}
.btn-outline:hover{background:var(--blue);color:#fff}
.dark .btn-outline{color:#fff;border-color:var(--blue)}
.btn-white{background:#fff;color:var(--ink)}
.btn-lg{padding:16px 34px;font-size:.95rem}
.btn-full{width:100%}

/* ---------- announcement + header --------------------------------------- */
.topbar{background:#111;color:#fff;font-size:.82rem}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);height:44px}
.topbar strong{font-weight:600}
.topbar-r{color:#D9DEE5;white-space:nowrap}

.site-head{position:sticky;top:0;z-index:120;background:#FAF9FC;border-bottom:1px solid #E8E9EE}
.head-in{display:flex;align-items:center;gap:var(--s4);height:74px}
.brand{display:flex;align-items:center;gap:9px;color:var(--ink);text-decoration:none}
.brand:hover{text-decoration:none}
.brand-mark{display:block;flex:none;border-radius:9px}
.brand-txt{display:flex;flex-direction:column;line-height:1}
.brand-name{font-family:var(--f-d);font-size:1.3rem;letter-spacing:-.01em}
.brand-sub{font-size:.6rem;letter-spacing:.28em;color:var(--ink-3);margin-top:3px}
.nav-list{display:flex;gap:var(--s3);list-style:none;margin:0;padding:0}
.nav-list a{color:var(--ink);font-size:.94rem;font-weight:500;text-decoration:none}
.nav-list a:hover,.nav-list a[aria-current]{color:var(--blue);text-decoration:none}
.head-cta{margin-left:auto;padding:11px 22px;font-size:.83rem}
.burger{display:none;background:none;border:0;padding:8px;cursor:pointer;flex-direction:column;gap:5px;margin-left:auto}
.burger span{display:block;width:23px;height:2px;background:var(--ink);border-radius:2px}
.mnav{border-top:1px solid #E8E9EE;background:#fff}
.mnav ul{list-style:none;margin:0;padding:var(--s2) 22px}
.mnav a{display:block;padding:12px 0;color:var(--ink);font-weight:500;border-bottom:1px solid #EEE}

/* ---------- trust strip ------------------------------------------------- */
.trust{background:var(--light-2);border-bottom:1px solid #E1E8F6}
.trust .wrap{display:flex;align-items:center;justify-content:center;gap:12px;padding-block:14px;font-weight:600;font-size:.92rem}
.trust-badges{display:flex;gap:6px}
.trust-chip{background:#fff;border:1px solid #DDE4F2;border-radius:4px;padding:3px 9px;font-size:.72rem;font-weight:600;color:var(--ink-2)}

/* ---------- hero -------------------------------------------------------- */
.hero{background:linear-gradient(180deg,var(--light-2),var(--light));padding:var(--s6) 0}
.hero-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:var(--s5);align-items:center}
.hero-art{position:relative;aspect-ratio:1;max-width:470px;margin-inline:auto;width:100%}
.hero-art .quad{position:absolute;inset:0;border-radius:50%;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:4px}
.hero-art .quad img{width:100%;height:100%;object-fit:cover}
.hero-badge{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:47%;aspect-ratio:1;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-content:center;text-align:center;box-shadow:0 0 0 6px rgba(59,123,240,.25)}
.hero-badge::after{content:"";position:absolute;inset:9px;border:2px dashed rgba(255,255,255,.6);border-radius:50%}
.hero-badge b{display:block;font-family:var(--f-d);font-size:clamp(1.7rem,4vw,2.6rem);line-height:1}
.hero-badge span{display:block;font-size:.74rem;font-weight:600;margin-top:4px}
.hero h1{margin-bottom:var(--s3)}
.hero-lead{font-size:1.06rem;color:var(--ink-2);max-width:56ch}
.ticks{list-style:none;margin:var(--s3) 0;padding:0}
.ticks li{position:relative;padding-left:28px;font-weight:600;margin-bottom:9px}
.ticks li::before{content:"";position:absolute;left:2px;top:8px;width:12px;height:7px;border-left:2.5px solid var(--blue);border-bottom:2.5px solid var(--blue);transform:rotate(-45deg)}
.hero-cta{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s3)}

/* ---------- stats ------------------------------------------------------- */
.stats{background:var(--light);padding-bottom:var(--s6)}
.stats-in{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3)}
.stat{display:flex;align-items:center;gap:14px;background:#fff;border-radius:var(--r);padding:22px 24px;box-shadow:0 2px 10px rgba(20,30,60,.05)}
.stat svg{flex:none;color:var(--blue)}
.stat-n{display:block;font-family:var(--f-d);font-size:1.6rem;line-height:1.1}
.stat-l{display:block;font-size:.86rem;color:var(--ink-3)}

/* ---------- pricing ----------------------------------------------------- */
.tabs{display:flex;background:var(--dark);border-radius:6px;padding:5px;max-width:640px;margin:0 auto var(--s4);gap:4px}
.tabs button{flex:1;background:none;border:0;color:#C9CDD4;font-family:var(--f-b);font-weight:600;font-size:.87rem;padding:11px 8px;border-radius:4px;cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--blue);color:#fff}
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3)}
.plan{background:var(--dark);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;color:var(--w-ink)}
.plan-top{padding:24px 24px 0}
.plan-srv{color:var(--blue);font-size:.8rem;font-weight:600;margin:0 0 6px}
.plan h3{font-size:1.35rem;margin:0 0 var(--s3)}
.plan-ribbon{background:var(--blue);border-radius:0 999px 999px 0;padding:16px 30px 16px 24px;margin-right:22%;display:flex;align-items:baseline;gap:6px}
.plan-amt{font-family:var(--f-d);font-size:2.3rem;line-height:1;color:#fff}
.plan-cur{font-size:.8rem;font-weight:600;color:#E4EDFF}
.plan-list{list-style:none;margin:var(--s3) 0;padding:0 24px;flex:1}
.plan-list li{position:relative;padding-left:26px;font-size:.9rem;color:#D7DBE1;margin-bottom:11px}
.plan-list li::before{content:"";position:absolute;left:0;top:3px;width:14px;height:14px;border:1.5px solid #6A727C;border-radius:3px}
.plan-list li::after{content:"";position:absolute;left:4px;top:7px;width:7px;height:4px;border-left:1.5px solid #fff;border-bottom:1.5px solid #fff;transform:rotate(-45deg)}
.plan-foot{padding:0 24px 24px}
.plan-save{color:var(--green);font-size:.82rem;font-weight:600;margin:0 24px var(--s2)}
.plan-best{outline:2px solid var(--blue);outline-offset:-2px}
.plans-fine{text-align:center;color:var(--ink-3);font-size:.87rem;margin-top:var(--s3)}

/* ---------- device tiles ------------------------------------------------ */
.devices{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.devices li{background:var(--dark-2);border:1px solid var(--dark-line);border-radius:var(--r);padding:18px 10px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.devices img{height:34px;width:auto;object-fit:contain;filter:brightness(0) invert(1);opacity:.92}
.devices span{font-size:.75rem;color:var(--blue)}

/* ---------- steps ------------------------------------------------------- */
.steps{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);text-align:center}
.steps li{counter-increment:s}
.steps li::before{content:counter(s);display:grid;place-content:center;width:44px;height:44px;margin:0 auto var(--s2);border:2px solid var(--blue);border-radius:50%;color:var(--blue);font-family:var(--f-d);font-size:1.15rem}
.steps h3{margin-bottom:10px}
.steps p{color:var(--ink-2);font-size:.93rem;margin:0}
.dark .steps p{color:var(--w-ink-2)}

/* ---------- comparison -------------------------------------------------- */
.cmp3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.cmp3 article{background:var(--dark-2);border:1px solid var(--dark-line);border-radius:var(--r);padding:24px}
.cmp3 .mid{border-color:var(--blue);background:#16223A}
.cmp3 h3{font-size:1.05rem;margin-bottom:var(--s2);display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.pill{background:rgba(229,84,75,.16);color:#FF8A80;font-size:.62rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:99px}
.cmp3 ul{list-style:none;margin:0;padding:0}
.cmp3 li{position:relative;padding-left:26px;font-size:.9rem;color:var(--w-ink-2);margin-bottom:11px}
.cmp3 li::before{content:"";position:absolute;left:0;top:5px;width:15px;height:15px;border-radius:50%;border:1.5px solid var(--red)}
.cmp3 .mid li::before{border-color:var(--green)}

/* ---------- table (real <table> for snippets) --------------------------- */
.table-wrap{overflow-x:auto;border:1px solid var(--dark-line);border-radius:var(--r);background:var(--dark-2)}
.cmp{border-collapse:collapse;width:100%;min-width:640px;font-size:.9rem}
.cmp th,.cmp td{padding:13px 18px;text-align:left;border-bottom:1px solid var(--dark-line)}
.cmp thead th{background:var(--dark-3);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--w-ink-3);font-weight:600}
.cmp thead th:nth-child(2){color:var(--blue)}
.cmp tbody th{font-weight:500;color:var(--w-ink-2)}
.cmp td{color:var(--w-ink-2)}
.cmp td.y{color:var(--green);font-weight:600}
.cmp td.n{color:var(--w-ink-3)}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}

/* ---------- generic card grids ------------------------------------------ */
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.g2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3)}
.card{background:var(--dark-2);border:1px solid var(--dark-line);border-radius:var(--r);padding:26px}
.card h3{margin-bottom:10px}
.card p{color:var(--w-ink-2);font-size:.93rem;margin:0}
.band-light .card,.band-white .card{background:#fff;border-color:#E6E9EF;box-shadow:0 2px 10px rgba(20,30,60,.04)}
.band-light .card p,.band-white .card p{color:var(--ink-2)}
.card-ico{display:grid;place-content:center;width:42px;height:42px;border-radius:50%;border:2px solid var(--blue);color:var(--blue);font-family:var(--f-d);margin-bottom:var(--s2)}

/* feature cards with imagery */
.feat{background:var(--dark-2);border:1px solid var(--dark-line);border-radius:var(--r);overflow:hidden}
.feat img{width:100%;height:170px;object-fit:cover}
.feat div{padding:20px}
.feat h3{font-size:1rem;margin-bottom:8px}
.feat p{color:var(--w-ink-2);font-size:.88rem;margin:0}

/* ---------- FAQ (2 columns) --------------------------------------------- */
.faq{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s3)}
.faq-i{border-bottom:1px solid var(--dark-line)}
.faq-i summary{list-style:none;cursor:pointer;padding:16px 40px 16px 0;position:relative}
.faq-i summary::-webkit-details-marker{display:none}
.faq-i summary h3{display:inline;font-family:var(--f-b);font-weight:600;font-size:.95rem;color:var(--w-ink)}
.faq-i summary::after{content:"";position:absolute;right:8px;top:22px;width:8px;height:8px;border-right:2px solid var(--w-ink-3);border-bottom:2px solid var(--w-ink-3);transform:rotate(45deg);transition:transform .2s}
.faq-i[open] summary::after{transform:rotate(-135deg)}
.faq-i[open] summary h3{color:var(--blue)}
.faq-i p{margin:0;padding:0 40px 18px 0;color:var(--w-ink-2);font-size:.9rem}

/* ---------- sports split ------------------------------------------------ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);align-items:center}
.split h2 em{color:var(--blue);font-style:normal}
.mini{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:var(--s3) 0}
.mini div{background:#fff;border:1px solid #E6E9EF;border-radius:var(--r);padding:16px;text-align:center}
.mini b{display:block;font-family:var(--f-d);font-size:1.15rem}
.mini span{font-size:.78rem;color:var(--ink-3)}
.pricebox{background:#fff;border:1px solid #E6E9EF;border-radius:var(--r);padding:22px}
.pricebox b{font-family:var(--f-d);font-size:2rem;color:var(--blue)}
.collage{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.collage img{border-radius:var(--r);width:100%;height:190px;object-fit:cover}

/* ---------- coverage ---------------------------------------------------- */
.coverage{background:var(--dark-2);border:1px solid var(--dark-line);border-radius:var(--r);padding:30px;text-align:center}
.coverage p{color:var(--w-ink-2);margin:0 auto;max-width:78ch}
.coverage strong{color:var(--w-ink)}

/* ---------- testimonials ------------------------------------------------ */
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.rev{background:#fff;border:1px solid #E6E9EF;border-radius:var(--r);padding:24px}
.rev-top{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.rev-av{width:40px;height:40px;border-radius:50%;background:var(--light-2);display:grid;place-content:center;font-family:var(--f-d);color:var(--blue)}
.rev-n{font-weight:600;font-size:.93rem}
.rev-m{font-size:.76rem;color:var(--ink-3)}
.stars{color:#F5A623;font-size:.85rem;letter-spacing:2px}
.rev p{color:var(--ink-2);font-size:.92rem;margin:0}
.verified{display:inline-flex;align-items:center;gap:5px;font-size:.7rem;font-weight:600;color:var(--green);margin-top:12px}

/* ---------- CTA band ---------------------------------------------------- */
.cta{background:var(--light-2);text-align:center;padding:var(--s6) 0}
.cta p{color:var(--ink-2);max-width:60ch;margin:0 auto var(--s4)}
.cta .hero-cta{justify-content:center}

/* ---------- blog cards -------------------------------------------------- */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.post{background:#fff;border:1px solid #E6E9EF;border-radius:var(--r);padding:24px}
.post h3{font-size:1.02rem;margin-bottom:10px}
.post h3 a{color:var(--ink)}
.post p{color:var(--ink-2);font-size:.9rem}
.post-meta{color:var(--ink-3);font-size:.78rem}

/* ---------- prose ------------------------------------------------------- */
.prose{max-width:74ch}
.prose h1{margin-bottom:var(--s3)}
.prose h2{margin:var(--s5) 0 var(--s2)}
.prose h3{margin:var(--s4) 0 var(--s1)}
.prose p,.prose li{color:var(--ink-2)}
.prose ul,.prose ol{padding-left:22px;margin-bottom:var(--s2)}
.crumbs{font-size:.82rem;color:var(--ink-3);margin-bottom:var(--s2)}
.byline{color:var(--ink-3);font-size:.85rem;margin-bottom:var(--s4)}

/* ---------- footer ------------------------------------------------------ */
.site-foot{background:var(--dark);color:var(--w-ink-2);padding-top:var(--s5)}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--s4);padding-bottom:var(--s4)}
.site-foot .brand{color:#fff}
.site-foot .brand-sub{color:var(--w-ink-3)}
.foot-blurb{color:var(--w-ink-3);font-size:.9rem;margin:var(--s2) 0;max-width:38ch}
.site-foot h4{color:#fff}
.foot-col ul,.foot-contact{list-style:none;margin:0;padding:0}
.foot-col li,.foot-contact li{margin-bottom:9px}
.foot-col a,.foot-contact a{color:var(--w-ink-2);font-size:.9rem}
.foot-col a:hover{color:#fff}
.foot-base{border-top:1px solid var(--dark-line);padding-block:var(--s3);display:flex;justify-content:space-between;gap:var(--s3);flex-wrap:wrap}
.foot-base p{margin:0;color:var(--w-ink-3);font-size:.82rem}
.foot-note{max-width:62ch}

.wa-float{position:fixed;right:18px;bottom:18px;z-index:110;display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:#25D366;color:#fff;box-shadow:0 6px 22px rgba(0,0,0,.35)}
.wa-float:hover{text-decoration:none;background:#1FBE5A}

/* ---------- responsive -------------------------------------------------- */
@media (max-width:1080px){
  .plans{grid-template-columns:repeat(2,1fr)}
  .devices{grid-template-columns:repeat(4,1fr)}
  .stats-in{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .nav-list,.head-cta{display:none}
  .burger{display:flex}
  .hero-grid,.split{grid-template-columns:1fr;gap:var(--s4)}
  .g3,.cmp3,.steps,.revs,.posts,.faq{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .band{padding:var(--s5) 0}
  .topbar .wrap{font-size:.74rem}
  .topbar-r{display:none}
}
@media (max-width:600px){
  .plans,.g2,.mini,.collage{grid-template-columns:1fr}
  .devices{grid-template-columns:repeat(3,1fr)}
  .stats-in{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .btn{width:100%}
  .hero-cta{flex-direction:column}
}

/* ---------- Phase 2 additions ------------------------------------------- */
.faq-jump{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.faq-jump a{background:#fff;border:1px solid #DDE4F2;border-radius:99px;padding:8px 16px;font-size:.86rem;font-weight:600;color:var(--ink);text-decoration:none}
.faq-jump a:hover{border-color:var(--blue);color:var(--blue);text-decoration:none}
.faq-jump span{color:var(--ink-3);font-weight:400}

/* FAQ on a light band */
.band-white .faq-i,.band-light .faq-i{border-bottom-color:#E6E9EF}
.band-white .faq-i summary h3,.band-light .faq-i summary h3{color:var(--ink)}
.band-white .faq-i summary::after,.band-light .faq-i summary::after{border-color:var(--ink-3)}
.band-white .faq-i p,.band-light .faq-i p{color:var(--ink-2)}
.band-white .faq-i[open] summary h3,.band-light .faq-i[open] summary h3{color:var(--blue)}

/* tables on a light band */
.band-white .table-wrap,.band-light .table-wrap,.prose .table-wrap{background:#fff;border-color:#E6E9EF}
.cmp-light thead th{background:var(--light-2);color:var(--ink-3)}
.cmp-light th,.cmp-light td{border-bottom-color:#EDF0F5}
.cmp-light tbody th{color:var(--ink)}
.cmp-light td{color:var(--ink-2)}
.cmp-light td.y{color:#1B8B4D}
.cmp-light td.n{color:var(--ink-3)}

/* pricing page: plan name is an H2 there, must not inherit H2 sizing */
.plan-h{font-size:1.35rem;margin:0 0 var(--s3)}

/* setup hub */
.setup-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.setup-card{background:#fff;border:1px solid #E6E9EF;border-radius:var(--r);padding:24px;display:flex;flex-direction:column}
.dark .setup-card{background:var(--dark-2);border-color:var(--dark-line)}
.setup-card h3{margin-bottom:8px}
.setup-card p{color:var(--ink-2);font-size:.92rem;flex:1}
.dark .setup-card p{color:var(--w-ink-2)}
.setup-vol{font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);margin:0 0 8px}
.setup-steps{counter-reset:st;list-style:none;margin:0;padding:0}
.setup-steps li{counter-increment:st;position:relative;padding-left:44px;margin-bottom:var(--s3)}
.setup-steps li::before{content:counter(st);position:absolute;left:0;top:0;width:30px;height:30px;display:grid;place-content:center;border-radius:50%;background:var(--blue);color:#fff;font-family:var(--f-d);font-size:.9rem}
.setup-steps h3{font-size:1.02rem;margin-bottom:5px}
.setup-steps p{margin:0;color:var(--ink-2);font-size:.93rem}
.dark .setup-steps p{color:var(--w-ink-2)}

@media (max-width:900px){.setup-grid{grid-template-columns:1fr}}

/* ---------- forms ------------------------------------------------------- */
.cform{display:flex;flex-direction:column}
.cform p{margin:0 0 var(--s2)}
.cform label{display:block;font-weight:600;font-size:.88rem;margin-bottom:6px}
.cform label span{color:var(--blue)}
.cform input,.cform select,.cform textarea{width:100%;padding:12px 14px;border:1px solid #D8DEE8;border-radius:6px;background:#fff;color:var(--ink);font-family:var(--f-b);font-size:.95rem}
.cform input:focus,.cform select:focus,.cform textarea:focus{border-color:var(--blue);outline:2px solid rgba(59,123,240,.2);outline-offset:0}
.cform textarea{resize:vertical;min-height:130px}
.cform button{align-self:flex-start;margin-top:var(--s1)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s3)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-fine{color:var(--ink-3);font-size:.84rem}
.form-note{padding:14px 18px;border-radius:6px;font-size:.92rem;margin-bottom:var(--s3)}
.form-ok{background:#E4F5EA;border:1px solid #A8DCBB;color:#146135}
.form-bad{background:#FDECEA;border:1px solid #F3B7B1;color:#9C2B22}
@media (max-width:600px){.frow{grid-template-columns:1fr}.cform button{width:100%}}

/* ---------- connection tabs note ---------------------------------------- */
.tabs button{transition:background .12s,color .12s}
.tabs button:hover{color:#fff}
.tabs-note{text-align:center;color:var(--ink-3);font-size:.86rem;max-width:60ch;margin:-24px auto var(--s4)}
.dark .tabs-note{color:var(--w-ink-3)}
.plan-save{min-height:1.3em}

/* ---------- blog ------------------------------------------------------- */
.post-single .wrap{max-width:840px}
.post-head{margin-bottom:var(--s4)}
.post-head h1{margin-bottom:var(--s2)}
.post-hero{margin:0 0 var(--s4)}
.post-hero img{width:100%;height:auto;border-radius:var(--r)}
.post-body{max-width:none}
.post-body .lede{font-size:1.12rem;color:var(--ink);border-left:3px solid var(--blue);padding-left:20px;margin-bottom:var(--s4)}
.post-body h2{font-size:clamp(1.5rem,2.8vw,2rem);margin:var(--s5) 0 var(--s2)}
.post-body h3{margin:var(--s4) 0 var(--s1)}
.post-body figure{margin:var(--s3) 0}
.post-body table{font-size:.9rem}
.post-body ol,.post-body ul{padding-left:24px}
.post-body li{margin-bottom:9px}
.post{overflow:hidden;padding:0;display:flex;flex-direction:column}
.post-thumb{display:block}
.post-thumb img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.post-in{padding:22px}
.post-in h3{margin-bottom:9px}
.post-in p{margin-bottom:10px}

/* ---------- blog index -------------------------------------------------- */
.sec-head-left{text-align:left;max-width:none;margin-bottom:var(--s3);display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap}
.sec-head-left .eyebrow{justify-content:flex-start;margin:0}
.sec-head-left h2{font-size:clamp(1.4rem,2.4vw,1.85rem)}

.blog-top .sec-head{margin-bottom:var(--s4)}
.blog-stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#E1E8F6;border:1px solid #E1E8F6;border-radius:var(--r);overflow:hidden}
.blog-stats li{background:#fff;padding:20px 22px;text-align:center}
.blog-stats b{display:block;font-family:var(--f-d);font-size:1.5rem;color:var(--blue);line-height:1.1}
.blog-stats span{display:block;font-size:.8rem;color:var(--ink-3);margin-top:4px}

/* featured post */
.feat-post{display:grid;grid-template-columns:1.15fr 1fr;gap:0;background:#fff;border:1px solid #E6E9EF;border-radius:var(--r);overflow:hidden;box-shadow:0 2px 14px rgba(20,30,60,.05)}
.feat-post__img{display:block}
.feat-post__img img{width:100%;height:100%;min-height:300px;object-fit:cover;display:block}
.feat-post__body{padding:36px;display:flex;flex-direction:column;justify-content:center}
.feat-post__body h3{font-size:clamp(1.35rem,2.4vw,1.9rem);line-height:1.12;margin:10px 0 14px}
.feat-post__body h3 a{color:var(--ink)}
.feat-post__body h3 a:hover{color:var(--blue);text-decoration:none}
.feat-post__ex{color:var(--ink-2);margin-bottom:var(--s3)}
.feat-post .post-meta{margin:0;color:var(--ink-3);font-size:.82rem}

/* topic cards */
.topic-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.topic{position:relative;display:block;background:var(--dark-2);border:1px solid var(--dark-line);border-radius:var(--r);padding:26px 26px 46px;text-decoration:none;transition:border-color .15s,transform .15s}
.topic:hover{border-color:var(--blue);transform:translateY(-2px);text-decoration:none}
.topic h3{color:var(--w-ink);margin-bottom:9px}
.topic p{color:var(--w-ink-2);font-size:.91rem;margin:0}
.topic-go{position:absolute;left:26px;bottom:22px;color:var(--blue);font-size:1.1rem}

/* editorial note */
.ednote{display:grid;grid-template-columns:1fr 1.4fr;gap:var(--s5);align-items:start;border-top:2px solid var(--ink);padding-top:var(--s4)}
.ednote .eyebrow{justify-content:flex-start}
.ednote h2{font-size:clamp(1.4rem,2.6vw,2rem)}
.ednote p{color:var(--ink-2)}
.ednote p:last-child{margin-bottom:0}

/* pagination */
.navigation.pagination{margin-top:var(--s4)}
.navigation.pagination .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.nav-links{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.nav-links .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 14px;border:1px solid #DDE4F2;border-radius:6px;background:#fff;color:var(--ink);font-weight:600;font-size:.9rem;text-decoration:none}
.nav-links .page-numbers:hover{border-color:var(--blue);color:var(--blue);text-decoration:none}
.nav-links .page-numbers.current{background:var(--blue);border-color:var(--blue);color:#fff}

@media (max-width:960px){
  .blog-stats{grid-template-columns:repeat(2,1fr)}
  .topic-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  .feat-post{grid-template-columns:1fr}
  .feat-post__img img{min-height:0;aspect-ratio:16/9}
  .feat-post__body{padding:26px}
  .ednote{grid-template-columns:1fr;gap:var(--s3)}
}
@media (max-width:600px){
  .blog-stats{grid-template-columns:1fr}
  .topic-grid{grid-template-columns:1fr}
}


/* ---------- Phase 5: design polish ------------------------------------- */

/* Card grids fill the row whatever the count — a 2-of-3 grid left a hole. */
.posts{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.posts:has(> :last-child:nth-child(2)){grid-template-columns:repeat(2,minmax(0,1fr));max-width:820px}
.posts:has(> :last-child:nth-child(1)){grid-template-columns:minmax(0,560px)}

/* Headlines break at sensible points instead of orphaning a word. */
.post-in h3,.feat-post__body h3,.topic h3,.card h3,.feat h3{text-wrap:balance}

/* Hero quad: tighter seams now the four images are purpose-shot squares. */
.hero-art .quad{gap:3px;background:var(--light-2)}
.hero-art::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:1px solid rgba(59,123,240,.22);pointer-events:none}
.hero-badge{box-shadow:0 0 0 8px rgba(238,243,253,.92),0 14px 34px rgba(20,40,90,.28)}

/* Topic cards: arrow sits with the text rather than floating in the corner. */
.topic{padding:26px}
.topic-go{position:static;display:inline-block;margin-top:14px}

/* Section rhythm — the light bands were reading as empty. */
.band-light .sec-head,.band-white .sec-head{margin-bottom:var(--s4)}
.blog-top{padding-bottom:var(--s5)}

/* Footer mark alignment now it is an SVG. */
.site-foot .brand{align-items:center}