/* =========================================================
   iMaxIPTV — Premium theme styles
   Palette: deep navy + electric blue + gold accent
   ========================================================= */

:root{
  --bg:#070b14;
  --bg-2:#0b1120;
  --panel:#0f1626;
  --panel-2:#141d31;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);
  --text:#eaf0fb;
  --muted:#9aa7c2;
  --brand:#2f6bff;
  --brand-2:#4f8bff;
  --brand-ink:#1b3fb0;
  --gold:#ffcf33;
  --gold-2:#ffd94d;
  --good:#37d67a;
  --radius:18px;
  --radius-sm:12px;
  --shadow:0 20px 50px -20px rgba(0,0,0,.7);
  --shadow-blue:0 20px 60px -18px rgba(47,107,255,.55);
  --container:1200px;
  --font:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  --display:"Sora","Inter",system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font);background:var(--bg);color:var(--text);
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--display);line-height:1.12;margin:0 0 .4em;letter-spacing:-.02em}
h2{font-size:clamp(1.8rem,3.4vw,2.7rem)}
h3{font-size:1.25rem}
p{margin:0 0 1rem}
.container{width:min(var(--container),92%);margin-inline:auto}
.grad{background:linear-gradient(100deg,var(--brand-2),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.screen-reader-text{position:absolute;left:-9999px}
.skip-link:focus{position:fixed;left:16px;top:12px;background:#fff;color:#000;padding:8px 14px;border-radius:8px;z-index:999}

/* ---------- Buttons ---------- */
.btn{
  --_bg:var(--brand);--_fg:#fff;
  display:inline-flex;align-items:center;gap:.5rem;justify-content:center;
  padding:.8rem 1.3rem;border-radius:999px;font-weight:600;font-size:.95rem;
  background:var(--_bg);color:var(--_fg);border:1px solid transparent;cursor:pointer;
  transition:transform .18s ease,box-shadow .25s ease,background .2s ease;white-space:nowrap;
}
.btn .ic{flex:none}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:linear-gradient(120deg,var(--brand),var(--brand-2));box-shadow:var(--shadow-blue)}
.btn-primary:hover{box-shadow:0 24px 70px -14px rgba(47,107,255,.7)}
.btn-outline{background:transparent;border-color:var(--line-2);color:var(--text)}
.btn-outline:hover{border-color:var(--brand-2);background:rgba(47,107,255,.1)}
.btn-ghost{background:rgba(255,255,255,.06);border-color:var(--line);color:var(--text);backdrop-filter:blur(8px)}
.btn-ghost:hover{background:rgba(255,255,255,.12)}
.btn-light{background:#fff;color:#0b1120}
.btn-lg{padding:1rem 1.7rem;font-size:1.02rem}
.btn-sm{padding:.55rem .95rem;font-size:.85rem}
.btn-block{width:100%}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:100;transition:background .3s,border-color .3s,backdrop-filter .3s;border-bottom:1px solid transparent}
.site-header.is-stuck{background:rgba(7,11,20,.82);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.header-inner{display:flex;align-items:center;gap:1.5rem;padding:.9rem 0}
.brand{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--display);font-weight:800;font-size:1.15rem}
.brand-mark{display:block;width:38px;height:38px;border-radius:11px;box-shadow:var(--shadow-blue)}
.footer-brand .brand-mark{width:34px;height:34px;border-radius:10px}
.main-navigation{margin-inline:auto}
.main-navigation ul{list-style:none;display:flex;gap:.35rem;margin:0;padding:0}
.main-navigation a{display:inline-block;padding:.55rem .85rem;border-radius:10px;color:var(--muted);font-weight:500;transition:color .2s,background .2s}
.main-navigation a:hover,.main-navigation .current-menu-item>a{color:var(--text);background:rgba(255,255,255,.06)}
.header-cta{display:flex;align-items:center;gap:.6rem}
.nav-toggle{display:none;flex-direction:column;gap:5px;width:44px;height:44px;border:1px solid var(--line);border-radius:12px;background:transparent;cursor:pointer;padding:0 11px}
.nav-toggle span{height:2px;background:var(--text);border-radius:2px;transition:.25s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- Hero ---------- */
.hero{position:relative;padding:clamp(3rem,7vw,6rem) 0 0;overflow:hidden;background:radial-gradient(1200px 600px at 70% -10%,rgba(47,107,255,.18),transparent 60%),var(--bg)}
.hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero-glow{position:absolute;left:-10%;top:20%;width:520px;height:520px;background:radial-gradient(circle,rgba(255,207,51,.14),transparent 65%);filter:blur(20px);z-index:0}
.hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center;padding-bottom:3rem}
.eyebrow{display:inline-flex;align-items:center;gap:.45rem;padding:.4rem .8rem;border:1px solid var(--line-2);border-radius:999px;font-size:.82rem;color:var(--gold-2);background:rgba(255,207,51,.06);margin-bottom:1.1rem}
.hero-title{font-size:clamp(2.3rem,5.2vw,4rem);font-weight:800}
.hero-sub{color:var(--muted);font-size:1.1rem;max-width:34rem;margin-bottom:1.6rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:2rem}
.hero-stats{display:grid;grid-template-columns:repeat(4,auto);gap:1.6rem}
.hero-stats strong{display:block;font-family:var(--display);font-size:1.5rem;color:#fff}
.hero-stats span{font-size:.82rem;color:var(--muted)}

.hero-card{position:relative;perspective:1400px}
.hero-screen{background:linear-gradient(160deg,var(--panel-2),var(--panel));border:1px solid var(--line-2);border-radius:22px;padding:1rem;box-shadow:var(--shadow);transform:rotateY(-12deg) rotateX(6deg);transition:transform .4s;animation:floaty 6s ease-in-out infinite}
.hero-card:hover .hero-screen{transform:rotateY(-6deg) rotateX(3deg)}
.hero-screen-bar{display:flex;gap:.4rem;margin-bottom:.8rem}
.hero-screen-bar span{width:11px;height:11px;border-radius:50%;background:var(--line-2)}
.hero-screen-bar span:first-child{background:#ff5f57}.hero-screen-bar span:nth-child(2){background:var(--gold)}
.hero-grid-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem}
.tile{aspect-ratio:16/11;border-radius:12px;display:grid;place-items:center;color:rgba(255,255,255,.85);background:linear-gradient(135deg,rgba(47,107,255,.35),rgba(255,207,51,.18));border:1px solid var(--line)}
.tile-1,.tile-4,.tile-6{background:linear-gradient(135deg,rgba(255,207,51,.25),rgba(47,107,255,.3))}
.tile-2,.tile-5{background:linear-gradient(135deg,rgba(55,214,122,.22),rgba(47,107,255,.28))}
.hero-live{margin-top:.9rem;display:inline-flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--muted);background:rgba(0,0,0,.35);border:1px solid var(--line);padding:.45rem .8rem;border-radius:999px}
.hero-live .dot{width:8px;height:8px;border-radius:50%;background:#ff3b47;box-shadow:0 0 0 0 rgba(255,59,71,.6);animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,59,71,.6)}70%{box-shadow:0 0 0 10px rgba(255,59,71,0)}100%{box-shadow:0 0 0 0 rgba(255,59,71,0)}}
@keyframes floaty{0%,100%{transform:rotateY(-12deg) rotateX(6deg) translateY(0)}50%{transform:rotateY(-12deg) rotateX(6deg) translateY(-12px)}}

.hero-marquee{position:relative;z-index:2;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:.9rem 0;background:rgba(255,255,255,.02);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex;gap:3rem;width:max-content;animation:scroll 28s linear infinite}
.marquee-track span{color:var(--muted);font-weight:600;font-family:var(--display);opacity:.7;white-space:nowrap}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---------- Sections ---------- */
.section{padding:clamp(3.5rem,7vw,6rem) 0}
.section-alt{background:linear-gradient(180deg,var(--bg),var(--bg-2))}
.section-head{max-width:44rem;margin:0 auto 3rem;text-align:center}
.kicker{display:inline-block;color:var(--brand-2);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:.78rem;margin-bottom:.7rem}
.section-head p{color:var(--muted)}
.section-head a{color:var(--brand-2)}

/* ---------- Cards / grids ---------- */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
.feature-card{background:linear-gradient(180deg,var(--panel),var(--bg-2));border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem;transition:transform .25s,border-color .25s,box-shadow .25s}
.feature-card:hover{transform:translateY(-5px);border-color:var(--line-2);box-shadow:var(--shadow)}
.feature-ic{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;color:var(--brand-2);background:rgba(47,107,255,.12);border:1px solid rgba(47,107,255,.25);margin-bottom:1rem}
.feature-card p{color:var(--muted);margin:0}

/* ---------- Pricing ---------- */
.pricing-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;align-items:stretch}
.price-card{position:relative;display:flex;flex-direction:column;background:linear-gradient(180deg,var(--panel),var(--bg-2));border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem 1.3rem;transition:transform .25s,border-color .25s,box-shadow .25s}
.price-card:hover{transform:translateY(-6px);border-color:var(--line-2)}
.price-card.is-featured{border-color:rgba(47,107,255,.55);background:linear-gradient(180deg,rgba(47,107,255,.14),var(--bg-2));box-shadow:var(--shadow-blue)}
.price-badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:linear-gradient(120deg,var(--gold),var(--gold-2));color:#3a2c00;font-weight:800;font-size:.68rem;letter-spacing:.06em;padding:.3rem .7rem;border-radius:999px;white-space:nowrap}
.price-name{font-size:1.05rem;color:var(--muted);margin-bottom:.6rem}
.price-amount{font-family:var(--display);font-size:2.6rem;font-weight:800;line-height:1}
.price-amount .cur{font-size:1.2rem;vertical-align:super;color:var(--brand-2);margin-right:2px}
.price-per{color:var(--muted);font-size:.85rem;margin-top:.2rem}
.price-save{display:inline-block;margin:.7rem 0;font-size:.78rem;font-weight:700;color:var(--good);background:rgba(55,214,122,.12);border:1px solid rgba(55,214,122,.3);padding:.25rem .6rem;border-radius:999px}
.price-sub{color:var(--muted);font-size:.85rem;min-height:2.4em}
.price-card .btn{margin-top:auto}
.pricing-included{margin-top:2.4rem;text-align:center}
.pricing-included h4{margin-bottom:1rem;color:var(--muted);font-weight:600}
.check-list{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.check-list li{display:flex;align-items:flex-start;gap:.55rem;color:var(--text)}
.check-list .ic{color:var(--good);flex:none;margin-top:2px}
.check-inline{grid-template-columns:repeat(3,minmax(0,1fr));max-width:46rem;margin-inline:auto;text-align:left}

/* ---------- Why grid ---------- */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.why-card{background:var(--bg-2);padding:1.8rem}
.why-ic{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;color:var(--gold-2);background:rgba(255,207,51,.1);border:1px solid rgba(255,207,51,.25);margin-bottom:1rem}
.why-card p{color:var(--muted);margin:0}

/* ---------- Reviews ---------- */
.reviews-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.review-card{background:linear-gradient(180deg,var(--panel),var(--bg-2));border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem}
.stars{display:flex;gap:2px;color:var(--gold);margin-bottom:.8rem}
.stars .ic{fill:var(--gold)}
.review-card p{color:var(--text);font-size:.94rem}
.review-author{display:flex;align-items:center;gap:.7rem;margin-top:1rem}
.avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand-2))}
.review-author strong{display:block;font-size:.9rem}
.review-author em{font-style:normal;color:var(--muted);font-size:.8rem}

/* ---------- FAQ ---------- */
.faq-wrap{max-width:52rem}
.faq-list{display:grid;gap:.7rem}
.faq-item{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel);overflow:hidden}
.faq-q{width:100%;text-align:left;background:none;border:0;color:var(--text);font-family:var(--display);font-weight:600;font-size:1.02rem;padding:1.1rem 1.3rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;cursor:pointer}
.faq-plus{position:relative;width:18px;height:18px;flex:none}
.faq-plus::before,.faq-plus::after{content:"";position:absolute;background:var(--brand-2);border-radius:2px;transition:.25s}
.faq-plus::before{inset:8px 0;height:2px}
.faq-plus::after{inset:0 8px;width:2px}
.faq-q[aria-expanded="true"] .faq-plus::after{transform:rotate(90deg);opacity:0}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-a p{color:var(--muted);padding:0 1.3rem 1.2rem;margin:0}

/* ---------- CTA band ---------- */
.cta-band{padding:clamp(3rem,6vw,5rem) 0;background:linear-gradient(120deg,var(--brand-ink),var(--brand));position:relative;overflow:hidden}
.cta-band::after{content:"";position:absolute;right:-6%;top:-40%;width:420px;height:420px;background:radial-gradient(circle,rgba(255,207,51,.35),transparent 60%)}
.cta-inner{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.cta-band h2{color:#fff}
.cta-band p{color:rgba(255,255,255,.85);margin:0;max-width:34rem}
.cta-actions{display:flex;gap:.8rem;flex-wrap:wrap}

/* ---------- Footer ---------- */
.site-footer{background:var(--bg-2);border-top:1px solid var(--line);margin-top:0}
.footer-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1.4fr;gap:2rem;padding:3.5rem 0 2.5rem}
.footer-tag{color:var(--muted);font-size:.92rem;margin:1rem 0}
.footer-social{display:flex;gap:.6rem}
.footer-social a{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;border:1px solid var(--line);color:var(--muted);transition:.2s}
.footer-social a:hover{color:#fff;border-color:var(--brand-2);background:rgba(47,107,255,.12)}
.footer-col h4{font-size:.95rem;margin-bottom:1rem}
.footer-col ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.footer-col a{color:var(--muted);transition:color .2s}
.footer-col a:hover{color:var(--text)}
.footer-contact li{display:flex;align-items:flex-start;gap:.5rem;color:var(--muted);font-size:.9rem;margin-bottom:.6rem}
.footer-contact .ic{color:var(--brand-2);flex:none;margin-top:3px}
.footer-bottom{border-top:1px solid var(--line)}
.footer-bottom-inner{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.3rem 0;flex-wrap:wrap}
.footer-bottom p{margin:0;color:var(--muted);font-size:.85rem}
.footer-legal{list-style:none;display:flex;gap:1.2rem;margin:0;padding:0}
.footer-legal a{color:var(--muted);font-size:.85rem}
.footer-legal a:hover{color:var(--text)}

/* ---------- Floating WhatsApp ---------- */
.wa-float{position:fixed;right:20px;bottom:20px;z-index:200;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:#25d366;color:#fff;box-shadow:0 12px 30px -8px rgba(37,211,102,.6);animation:floaty 4s ease-in-out infinite}
.wa-float:hover{transform:scale(1.06)}

/* ---------- Reveal animation ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

/* ---------- Page hero (inner pages) ---------- */
.page-hero{position:relative;padding:clamp(3rem,6vw,5rem) 0 2.5rem;text-align:center;background:radial-gradient(900px 400px at 50% -20%,rgba(47,107,255,.18),transparent 60%),var(--bg)}
.page-hero h1{font-size:clamp(2rem,4.4vw,3.1rem)}
.page-hero p{color:var(--muted);max-width:40rem;margin:0 auto}
.breadcrumbs{font-size:.82rem;color:var(--muted);margin-bottom:1rem}
.breadcrumbs a{color:var(--brand-2)}

/* ---------- Prose / blog ---------- */
.prose{max-width:44rem;margin-inline:auto}
.prose h2{margin-top:2rem}
.prose h3{margin-top:1.5rem}
.prose p,.prose li{color:var(--muted)}
.prose a{color:var(--brand-2);text-decoration:underline}
.prose img{max-width:100%;height:auto;border-radius:var(--radius);margin:1.5rem 0}
.prose figure,.post-figure{margin:1.8rem 0}
.prose figure img,.post-figure img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:var(--radius);margin:0}
.prose figcaption,.post-figure figcaption{margin-top:.6rem;font-size:.85rem;line-height:1.5;color:var(--muted);text-align:center}
.article-body>img:first-child,.article-body>.wp-post-image{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;margin:0 0 2rem;border:1px solid var(--line)}
.prose blockquote{border-left:3px solid var(--brand);padding-left:1.2rem;color:var(--text);font-style:italic;margin:1.5rem 0}
.prose ul,.prose ol{padding-left:1.2rem}

.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.post-card{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .25s,border-color .25s}
.post-card:hover{transform:translateY(-5px);border-color:var(--line-2)}
.post-thumb{aspect-ratio:16/9;background:linear-gradient(135deg,rgba(47,107,255,.3),rgba(255,207,51,.2));display:grid;place-items:center;color:rgba(255,255,255,.6)}
.post-thumb img{width:100%;height:100%;object-fit:cover}
.post-body{padding:1.3rem;display:flex;flex-direction:column;flex:1}
.post-meta{font-size:.78rem;color:var(--muted);margin-bottom:.5rem;display:flex;gap:.7rem}
.post-body h3{font-size:1.1rem}
.post-body h3 a:hover{color:var(--brand-2)}
.post-excerpt{color:var(--muted);font-size:.9rem;flex:1}
.read-more{margin-top:.8rem;color:var(--brand-2);font-weight:600;font-size:.88rem;display:inline-flex;align-items:center;gap:.3rem}

/* ---------- Channel list ---------- */
.chan-search{max-width:30rem;margin:0 auto 2.5rem}
.chan-search input{width:100%;padding:.9rem 1.1rem;border-radius:999px;border:1px solid var(--line-2);background:var(--panel);color:var(--text);font-size:1rem}
.chan-search input:focus{outline:none;border-color:var(--brand-2)}
.chan-groups{display:grid;gap:1.3rem}
.chan-group{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);padding:1.4rem 1.5rem}
.chan-group h3{display:flex;align-items:center;gap:.6rem;margin-bottom:1rem}
.chan-group h3 .count{font-size:.75rem;color:var(--muted);font-weight:500;font-family:var(--font)}
.chan-tags{display:flex;flex-wrap:wrap;gap:.5rem}
.chan-tag{font-size:.85rem;color:var(--text);background:rgba(255,255,255,.04);border:1px solid var(--line);padding:.4rem .8rem;border-radius:999px}

/* ---------- Steps (installation) ---------- */
.steps{display:grid;gap:1.2rem;max-width:48rem;margin-inline:auto}
.step{display:grid;grid-template-columns:auto 1fr;gap:1.2rem;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem 1.5rem}
.step-n{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-family:var(--display);font-weight:800;color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand-2))}
.step h3{margin-bottom:.3rem;font-size:1.1rem}
.step p{color:var(--muted);margin:0}
.device-tabs{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-bottom:2rem}
.device-tab{padding:.6rem 1.1rem;border-radius:999px;border:1px solid var(--line-2);background:var(--panel);color:var(--muted);cursor:pointer;font-weight:600;font-size:.9rem;transition:.2s}
.device-tab.active,.device-tab:hover{color:#fff;border-color:var(--brand-2);background:rgba(47,107,255,.14)}
.device-panel{display:none}
.device-panel.active{display:block;animation:fade .3s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1}}

/* ---------- Utilities ---------- */
.text-center{text-align:center}
.mt-2{margin-top:2rem}

/* ---------- Responsive ---------- */
@media(max-width:1024px){
  .feature-grid,.why-grid,.reviews-grid,.blog-grid{grid-template-columns:repeat(2,1fr)}
  .pricing-grid{grid-template-columns:repeat(2,1fr)}
  .hero-inner{grid-template-columns:1fr;gap:2rem}
  .hero-card{max-width:440px}
  .footer-top{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  .header-cta{display:none}
  .nav-toggle{display:flex}
  .main-navigation{position:fixed;inset:64px 0 auto;margin:0;background:rgba(7,11,20,.97);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);transform:translateY(-120%);transition:transform .3s;max-height:calc(100vh - 64px);overflow:auto}
  .main-navigation.open{transform:none}
  .main-navigation ul{flex-direction:column;padding:1rem;gap:.2rem}
  .main-navigation a{padding:.9rem 1rem;border-radius:12px}
  .hero-stats{grid-template-columns:repeat(2,1fr);gap:1.1rem}
  .check-inline{grid-template-columns:1fr}
  .cta-inner{flex-direction:column;text-align:center}
}
@media(max-width:560px){
  .feature-grid,.why-grid,.reviews-grid,.blog-grid,.pricing-grid{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr}
  h2{font-size:1.6rem}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
}

/* =========================================================
   Pricing cards v2 — features inside the card
   ========================================================= */
.price-top{text-align:center}
.price-stream{margin:1rem 0 1.1rem}
.price-stream span{display:block;font-size:.72rem;font-weight:700;color:var(--text);letter-spacing:.01em;margin-bottom:.45rem}
.price-stream i{display:block;height:5px;border-radius:99px;background:rgba(255,255,255,.1);position:relative;overflow:hidden}
.price-stream i::after{content:"";position:absolute;inset:0 12% 0 0;border-radius:99px;background:linear-gradient(90deg,var(--brand),var(--brand-2))}
.price-feats{list-style:none;margin:0 0 1.3rem;padding:0;display:grid;gap:.75rem;text-align:left}
.price-feats li{display:flex;align-items:flex-start;gap:.6rem}
.pf-ic{flex:none;display:grid;place-items:center;width:19px;height:19px;border-radius:50%;background:var(--brand);color:#fff;margin-top:2px}
.pf-ic .ic{stroke-width:3}
.pf-txt{display:block;line-height:1.35}
.pf-txt strong{display:block;font-size:.84rem;color:var(--text);font-weight:700}
.pf-txt em{font-style:normal;font-size:.78rem;color:var(--muted)}
.price-wa{display:flex;align-items:center;justify-content:center;gap:.4rem;margin-top:.7rem;font-size:.78rem;color:var(--muted);transition:color .2s}
.price-wa:hover{color:#25d366}

/* =========================================================
   Testimonials — real inbox screenshots
   ========================================================= */
.mail-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;align-items:start}
.mail-card{background:#fff;border:1px solid #e3e6ea;border-radius:10px;padding:1rem 1.05rem;box-shadow:0 10px 30px -14px rgba(0,0,0,.55);font-family:Arial,Helvetica,sans-serif}
.mail-head{display:flex;align-items:flex-start;gap:.6rem;margin-bottom:.65rem}
.mail-av{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:#fff;font:700 14px Arial,sans-serif;background:#7a8794}
.mail-av-n1{background:#5b6b7c}.mail-av-n2{background:#c0674a}.mail-av-n3{background:#4a6b52}.mail-av-n4{background:#8a6a4a}
.mail-who{flex:1;min-width:0;line-height:1.3}
.mail-name{font-weight:700;font-size:.8rem;color:#202124;margin-right:.4rem}
.mail-time{font-size:.72rem;color:#5f6368}
.mail-to{display:flex;align-items:center;gap:2px;font-size:.72rem;color:#5f6368}
.mail-acts{display:flex;gap:.55rem;color:#5f6368;flex:none;padding-top:2px}
.mail-body{margin:0;font-size:.8rem;line-height:1.55;color:#202124}
.mail-note{text-align:center;margin-top:1.6rem;color:var(--muted);font-size:.88rem;display:flex;align-items:center;justify-content:center;gap:.4rem}
.mail-note .ic{color:var(--gold);fill:var(--gold)}
.mail-note strong{color:var(--text)}
@media(max-width:1024px){.mail-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.mail-grid{grid-template-columns:1fr}}

/* =========================================================
   Checkout
   ========================================================= */
.co-wrap{display:grid;grid-template-columns:1fr 360px;gap:2rem;align-items:start}
.co-step{background:linear-gradient(180deg,var(--panel),var(--bg-2));border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem;margin-bottom:1.2rem}
.co-step-head{display:flex;align-items:center;gap:.8rem;margin-bottom:1.2rem}
.co-step-head h2{font-size:1.15rem;margin:0}
.co-n{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:.9rem;color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand-2))}
.co-hint{color:var(--muted);font-size:.9rem;margin-bottom:1rem}

/* plan picker */
.co-plans{display:grid;grid-template-columns:repeat(5,1fr);gap:.6rem}
.co-plan{position:relative;cursor:pointer}
.co-plan input{position:absolute;opacity:0;pointer-events:none}
.co-plan-in{display:block;text-align:center;padding:1rem .5rem .8rem;border:1.5px solid var(--line-2);border-radius:var(--radius-sm);background:rgba(255,255,255,.02);transition:.2s}
.co-plan:hover .co-plan-in{border-color:var(--brand-2)}
.co-plan input:checked+.co-plan-in{border-color:var(--brand);background:rgba(47,107,255,.16);box-shadow:0 0 0 3px rgba(47,107,255,.16)}
.co-plan-badge{position:absolute;top:-8px;left:50%;transform:translateX(-50%);font-style:normal;font-size:.58rem;font-weight:800;letter-spacing:.05em;padding:.2rem .45rem;border-radius:999px;background:linear-gradient(120deg,var(--gold),var(--gold-2));color:#3a2c00;white-space:nowrap;z-index:2}
.co-plan-name{display:block;font-size:.78rem;color:var(--muted);margin-bottom:.25rem}
.co-plan-price{display:block;font-family:var(--display);font-size:1.35rem;font-weight:800;color:var(--text)}
.co-plan-save{display:block;font-size:.66rem;color:var(--good);margin-top:.2rem}

/* fields */
.co-fields{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.co-field{display:flex;flex-direction:column;gap:.4rem}
.co-field-full{grid-column:1/-1}
.co-field>span{font-size:.85rem;font-weight:600;color:var(--text)}
.co-field>span i{color:#ff6b6b;font-style:normal}
.co-field input,.co-field select,.co-field textarea{
  width:100%;padding:.8rem .95rem;border-radius:var(--radius-sm);
  border:1.5px solid var(--line-2);background:var(--bg);color:var(--text);
  font-family:var(--font);font-size:.95rem;transition:border-color .2s,box-shadow .2s;
}
.co-field textarea{resize:vertical}
.co-field input:focus,.co-field select:focus,.co-field textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(47,107,255,.18)}
.co-field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.co-err{display:none;font-size:.76rem;color:#ff8080}
.co-field.has-err input,.co-field.has-err select{border-color:#ff6b6b}
.co-field.has-err .co-err,.co-err.show{display:block}
.co-check{grid-column:1/-1;display:flex;align-items:flex-start;gap:.6rem;font-size:.86rem;color:var(--muted);cursor:pointer}
.co-check input{width:18px;height:18px;flex:none;margin-top:2px;accent-color:var(--brand);cursor:pointer}
.co-check a{color:var(--brand-2);text-decoration:underline}
.co-err-terms{grid-column:1/-1;margin-top:-.5rem}

.co-submit{margin-top:.2rem}
.co-secure{display:flex;align-items:center;justify-content:center;gap:.4rem;margin:.9rem 0 0;font-size:.78rem;color:var(--muted)}

/* summary */
.co-side{position:sticky;top:90px;display:grid;gap:1rem}
.co-card{background:linear-gradient(180deg,rgba(47,107,255,.12),var(--bg-2));border:1px solid rgba(47,107,255,.32);border-radius:var(--radius);padding:1.5rem}
.co-card h3{font-size:1.05rem;margin-bottom:1.1rem}
.co-row{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.55rem 0;font-size:.9rem;color:var(--muted);border-bottom:1px solid var(--line)}
.co-row strong{color:var(--text);font-weight:600;text-align:right}
.co-row-total{border-bottom:0;padding-top:.9rem;font-size:1rem}
.co-row-total strong{font-family:var(--display);font-size:1.8rem;font-weight:800;color:var(--brand-2)}
.co-inc{list-style:none;margin:1rem 0;padding:1rem 0 0;border-top:1px solid var(--line);display:grid;gap:.5rem}
.co-inc li{display:flex;align-items:flex-start;gap:.5rem;font-size:.82rem;color:var(--muted)}
.co-inc .ic{color:var(--good);flex:none;margin-top:3px}
.co-trust{display:grid;gap:.5rem;padding-top:1rem;border-top:1px solid var(--line)}
.co-trust span{display:flex;align-items:center;gap:.5rem;font-size:.8rem;color:var(--muted)}
.co-trust .ic{color:var(--gold-2);flex:none}
.co-help{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem;text-align:center}
.co-help p{font-size:.88rem;color:var(--muted);margin-bottom:.7rem}

@media(max-width:1024px){
  .co-wrap{grid-template-columns:1fr}
  .co-side{position:static}
  .co-plans{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:600px){
  .co-fields{grid-template-columns:1fr}
  .co-plans{grid-template-columns:repeat(2,1fr)}
}

/* =========================================================
   Hero screen v2 — real streaming UI with photos
   ========================================================= */
.hero-screen-bar{align-items:center}
.hero-screen-bar i{margin-left:auto;font-style:normal;font-size:.68rem;color:var(--muted);letter-spacing:.04em}

.hero-feature{position:relative;aspect-ratio:16/8.2;border-radius:14px;overflow:hidden;background-size:cover;background-position:center;border:1px solid var(--line-2);margin-bottom:.9rem}
.hero-feature::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,11,20,.15) 30%,rgba(7,11,20,.92))}
.hero-feature .hero-live{position:absolute;top:.6rem;left:.6rem;z-index:2;margin:0;font-size:.66rem;font-weight:800;letter-spacing:.08em;color:#fff;background:#e8121d;border:0;padding:.25rem .55rem}
.hero-feature-meta{position:absolute;left:.85rem;right:.85rem;bottom:.7rem;z-index:2}
.hero-feature-meta strong{display:block;font-family:var(--display);font-size:.92rem;color:#fff;line-height:1.2}
.hero-feature-meta em{font-style:normal;font-size:.7rem;color:rgba(255,255,255,.72)}
.hero-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;color:#fff;background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.5);backdrop-filter:blur(6px)}

.hero-rowlabel{font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem}
.hero-grid-tiles{grid-template-columns:repeat(4,1fr)}
.tile{position:relative;aspect-ratio:16/11;border-radius:10px;overflow:hidden;background-size:cover;background-position:center;border:1px solid var(--line);display:block}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(7,11,20,.88))}
.tile-label{position:absolute;left:.4rem;right:.3rem;bottom:.32rem;z-index:2;font-size:.6rem;font-weight:700;color:#fff;line-height:1.1;text-shadow:0 1px 3px rgba(0,0,0,.7)}

/* =========================================================
   Animated delivery-van CTA
   Register the props, or they are strings and cannot tween.
   ========================================================= */
@property --vx      { syntax:'<number>'; inherits:true; initial-value:-190 }
@property --shutter { syntax:'<number>'; inherits:true; initial-value:1 }
@property --px      { syntax:'<number>'; inherits:true; initial-value:0 }
@property --py      { syntax:'<number>'; inherits:true; initial-value:0 }

.btn-van{position:relative;overflow:hidden;isolation:isolate;--vx:-190;--shutter:1;--px:0;--py:0}
.van-label{position:relative;z-index:3;display:inline-flex;align-items:center;gap:.5rem;transition:opacity .16s ease,transform .16s ease}
.btn-van.is-playing .van-label{opacity:0;transform:translateY(-6px)}

.van-stage{position:absolute;inset:0;z-index:2;opacity:0;pointer-events:none;background:linear-gradient(180deg,#161b26,#0d1119);transition:opacity .18s ease}
.btn-van.is-playing .van-stage{opacity:1}
.van-scene{width:100%;height:100%;display:block}

/* street */
.road_edge{stroke:rgba(255,255,255,.22);stroke-width:1}
.road_ticks line{stroke:rgba(255,255,255,.16);stroke-width:2.4;stroke-linecap:round}
.depot line{stroke:rgba(255,255,255,.2);stroke-width:2.4;stroke-linecap:round}

/* van paint */
.shell{fill:#fdfdfb}
.glass{fill:#2a3244}
.stripe{fill:#ffb020}
.lamp{fill:#ffe08a}
.bay_word{fill:#7c8598;font:700 6.5px "Inter",Arial,sans-serif;letter-spacing:.06em}
.door_lip{fill:#8f97a5}
.parcel rect{fill:#d8a15c}
.parcel line{stroke:#9c6f34;stroke-width:1.1}
.dust line{stroke:rgba(255,255,255,.28);stroke-width:2;stroke-linecap:round;opacity:0}
.wheel circle{fill:#12161f;stroke:#e9edf5;stroke-width:2.4}
.wheel path{stroke:#e9edf5;stroke-width:1.2;stroke-linecap:round}

/* the van rides on --vx */
.van{transform:translate(calc(var(--vx) * 1px),0)}

/* wheels are not animated on a loop — they roll off the same number.
   7.639 = 360 / (2 x pi x r), r = 7.5 */
.wheel{transform:translate(calc(var(--vx) * 1px),0) rotate(calc(var(--vx) * 7.639deg));transform-origin:calc(var(--cx) * 1px) calc(var(--cy) * 1px);transform-box:view-box}
.van--wheels{transform:none}

/* shutter rolls from the top */
.shutter{transform:scaleY(var(--shutter));transform-origin:108px 18.5px;transform-box:view-box}

/* parcel hops */
.parcel{transform:translate(calc(var(--px) * 1px),calc(var(--py) * 1px))}
/* cut off by what the shutter covers, not switched off */
.btn-van.is-aboard .parcel{clip-path:inset(max(0px,calc((var(--shutter) * 21 - 3) * 1px)) 0 0 0)}
.btn-van.is-loaded .parcel{opacity:0}
.btn-van.is-driving .dust line{opacity:1;transition:opacity .2s ease}

/* keep the block button tall enough for the scene to read */
.btn-van.btn-block{min-height:52px}
.btn-van.is-playing{pointer-events:none}

@media(prefers-reduced-motion:reduce){
  .van-stage{display:none}
  .btn-van.is-playing .van-label{opacity:1;transform:none}
}

/* free-trial card */
.btn-trial{background:#25d366;color:#fff;box-shadow:0 14px 34px -14px rgba(37,211,102,.7)}
.btn-trial:hover{background:#1fbe5b}

/* =========================================================
   Free-trial banner (checkout only)
   ========================================================= */
.trial-banner{
  display:flex;align-items:center;gap:1.2rem;margin-top:1.1rem;padding:1rem 1.2rem;
  border:1px solid var(--line-2);border-radius:var(--radius-sm);
  background:rgba(255,255,255,.03);
}
.trial-copy{flex:1;min-width:0;line-height:1.45}
.trial-copy strong{display:block;font-family:var(--display);font-size:.98rem;color:var(--text);margin-bottom:.15rem}
.trial-copy span{font-size:.85rem;color:var(--muted)}
.trial-cta{flex:none;display:flex;align-items:center;gap:1rem}
.trial-price{font-family:var(--display);font-size:1.5rem;font-weight:800;color:var(--text);line-height:1;white-space:nowrap}
.trial-price em{font-style:normal;font-size:.72rem;font-weight:600;color:var(--muted);display:block;margin-top:.2rem}
.btn-trial{background:#25d366;color:#04240f;font-weight:700}
.btn-trial:hover{background:#2ee673}

@media(max-width:820px){
  .trial-banner{flex-wrap:wrap;gap:.9rem}
  .trial-cta{width:100%;justify-content:space-between}
}
/* honeypot — off-screen, never shown to people */
.co-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;pointer-events:none}

/* =========================================================
   Thank You / order confirmation
   ========================================================= */
.page-thanks .section{padding-top:clamp(2.5rem,5vw,4rem)}
.ty-head{text-align:center;max-width:46rem;margin:0 auto clamp(2rem,4vw,3rem)}
.ty-head h1{font-size:clamp(2rem,4.4vw,3rem);margin-bottom:.6rem}
.ty-tick{
  display:grid;place-items:center;width:74px;height:74px;margin:0 auto 1.2rem;border-radius:50%;
  color:#fff;background:linear-gradient(135deg,var(--good),#1f8f4e);
  box-shadow:0 0 0 10px rgba(55,214,122,.12),0 18px 45px -14px rgba(55,214,122,.6);
  animation:ty-pop .5s cubic-bezier(.2,1.4,.4,1) both;
}
@keyframes ty-pop{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
@media(prefers-reduced-motion:reduce){.ty-tick{animation:none}}
.ty-ref{color:var(--muted)}
.ty-ref strong{color:var(--text);font-family:var(--display);letter-spacing:.04em}

.ty-wrap{display:grid;grid-template-columns:1fr 360px;gap:2rem;align-items:start}
.ty-main{display:grid;gap:1.2rem}
.ty-panel{background:linear-gradient(180deg,var(--panel),var(--bg-2));border:1px solid var(--line);border-radius:var(--radius);padding:1.7rem}
.ty-panel h2{font-size:1.15rem;margin-bottom:1.3rem}

.ty-steps{list-style:none;margin:0;padding:0;display:grid;gap:1.5rem;position:relative}
.ty-steps li{display:grid;grid-template-columns:38px 1fr;gap:1rem;position:relative}
.ty-steps li:not(:last-child)::before{
  content:"";position:absolute;left:18px;top:40px;bottom:-1.5rem;width:2px;
  background:linear-gradient(180deg,var(--line-2),transparent);
}
.ty-dot{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--panel-2);border:1px solid var(--line-2);color:var(--muted);position:relative;z-index:1;
}
.ty-steps li.is-now .ty-dot{background:linear-gradient(135deg,var(--brand),var(--brand-2));border-color:transparent;color:#fff;box-shadow:0 0 0 5px rgba(47,107,255,.16)}
.ty-steps strong{display:block;font-family:var(--display);font-size:1rem;margin-bottom:.25rem}
.ty-steps p{color:var(--muted);font-size:.9rem;margin:0}
.ty-steps p strong{display:inline;font-family:var(--font);color:var(--text)}
.ty-steps .btn{margin-top:.9rem}
.btn-wa{background:linear-gradient(120deg,#1f8f4e,#25d366);color:#fff;box-shadow:0 18px 45px -16px rgba(37,211,102,.7)}
.btn-wa:hover{box-shadow:0 22px 60px -14px rgba(37,211,102,.85)}

.ty-help p{color:var(--muted);font-size:.92rem}
.ty-links{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}
.ty-links .btn{font-size:.86rem;padding:.65rem 1.1rem}

.ty-side{position:sticky;top:90px;display:grid;gap:1rem}
.ty-phone{display:flex;align-items:center;justify-content:center;gap:.4rem;margin:.8rem 0 0;font-size:.82rem;color:var(--muted)}

@media(max-width:1024px){
  .ty-wrap{grid-template-columns:1fr}
  .ty-side{position:static}
}
@media(max-width:600px){
  .ty-panel{padding:1.3rem}
  .ty-links .btn{flex:1 1 100%}
}

/* =========================================================
   Long-form article layout — sticky side TOC, rich tables
   ========================================================= */
.read-progress{position:fixed;inset:0 0 auto 0;height:3px;background:transparent;z-index:60;pointer-events:none}
.read-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--brand),var(--gold));box-shadow:0 0 18px rgba(47,107,255,.7);transition:width .1s linear}

.article-layout{
  width:min(var(--container),92%);margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,1fr) 300px;
  gap:clamp(2rem,4vw,3.5rem);align-items:start;
}
.article-main{min-width:0}
.article-main.prose{max-width:46rem}

/* ---- side rail ---- */
.article-rail{position:sticky;top:90px;display:grid;gap:1rem}
.toc{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.2rem}
.toc>summary{
  font-family:var(--display);font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:.5rem;
}
.toc>summary::-webkit-details-marker{display:none}
.toc>summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--brand-2);border-bottom:2px solid var(--brand-2);transform:rotate(45deg);transition:transform .2s}
.toc[open]>summary::after{transform:rotate(-135deg)}
.toc-list{list-style:none;margin:.9rem 0 0;padding:0;max-height:60vh;overflow:auto;display:grid;gap:.15rem}
.toc-list li{margin:0}
.toc-list a{
  display:block;padding:.42rem .6rem .42rem .8rem;border-left:2px solid var(--line);
  font-size:.86rem;line-height:1.35;color:var(--muted);border-radius:0 8px 8px 0;transition:.18s;
}
.toc-list a:hover{color:var(--text);background:rgba(47,107,255,.08);border-left-color:var(--brand-2)}
.toc-list a.is-active{color:var(--text);font-weight:600;background:rgba(47,107,255,.12);border-left-color:var(--gold)}

.rail-card{background:linear-gradient(160deg,var(--panel-2),var(--panel));border:1px solid var(--line-2);border-radius:var(--radius);padding:1.3rem}
.rail-card h4{font-family:var(--display);font-size:1.05rem;margin:0 0 .35rem}
.rail-card p{font-size:.86rem;color:var(--muted);margin:0 0 .9rem}
.rail-price{font-family:var(--display);font-size:1.9rem;font-weight:700;color:var(--gold);line-height:1;margin-bottom:.15rem}
.rail-price small{font-size:.7rem;font-weight:500;color:var(--muted);letter-spacing:.04em}
.rail-card .btn{width:100%}
.rail-links{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.45rem;border-top:1px solid var(--line);padding-top:.9rem}
.rail-links a{font-size:.85rem;color:var(--muted);display:flex;gap:.45rem;align-items:center}
.rail-links a::before{content:"→";color:var(--brand-2)}
.rail-links a:hover{color:var(--text)}

/* ---- body typography ---- */
.article-body p,.article-body li{color:#c3cfe5;font-size:1.03rem;line-height:1.75}
.article-body strong{color:var(--text);font-weight:650}
.article-body h2{scroll-margin-top:100px;margin-top:2.8rem;padding-top:1.6rem;border-top:1px solid var(--line);font-size:clamp(1.5rem,2.6vw,2rem)}
.article-body h2:first-of-type{border-top:0;padding-top:0}
.article-body h3{scroll-margin-top:100px;margin-top:2rem;font-size:1.16rem;color:var(--text);display:flex;gap:.55rem;align-items:baseline}
.article-body h3::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--brand);box-shadow:0 0 10px var(--brand)}
.article-body code{background:rgba(47,107,255,.12);border:1px solid var(--line);border-radius:6px;padding:.12em .4em;font-size:.88em;color:var(--gold-2)}
.article-body a{color:var(--brand-2);text-decoration:none;border-bottom:1px solid rgba(79,139,255,.45);transition:.18s}
.article-body a:hover{color:var(--gold-2);border-bottom-color:var(--gold)}

/* lead / short answer */
.article-body>p:first-of-type{
  position:relative;background:linear-gradient(120deg,rgba(47,107,255,.1),rgba(255,207,51,.05));
  border:1px solid var(--line-2);border-left:3px solid var(--gold);border-radius:var(--radius-sm);
  padding:1.15rem 1.25rem;font-size:1.09rem;color:var(--text);
}
.article-body>p:first-of-type strong{color:var(--gold-2)}

/* lists */
.article-body ul,.article-body ol{padding-left:0;list-style:none;display:grid;gap:.6rem;margin:0 0 1.2rem}
.article-body ul>li{position:relative;padding-left:1.6rem}
.article-body ul>li::before{content:"";position:absolute;left:.35rem;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--brand-2)}
.article-body ol{counter-reset:step}
.article-body ol>li{position:relative;padding-left:2.4rem;counter-increment:step;min-height:1.7rem}
.article-body ol>li::before{
  content:counter(step);position:absolute;left:0;top:.05em;width:1.65rem;height:1.65rem;border-radius:50%;
  display:grid;place-items:center;font-family:var(--display);font-size:.8rem;font-weight:700;color:#fff;
  background:linear-gradient(140deg,var(--brand),var(--brand-ink));box-shadow:0 6px 16px -6px rgba(47,107,255,.9);
}

/* ---- tables ---- */
.table-wrap{
  margin:1.6rem 0;border:1px solid var(--line-2);border-radius:var(--radius);
  background:var(--panel);overflow-x:auto;box-shadow:var(--shadow);
  -webkit-overflow-scrolling:touch;
}
.table-wrap table{width:100%;min-width:560px;border-collapse:collapse;font-size:.93rem}
.table-wrap thead th{
  background:linear-gradient(180deg,rgba(47,107,255,.22),rgba(47,107,255,.08));
  font-family:var(--display);font-size:.76rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text);text-align:left;padding:.85rem 1rem;white-space:nowrap;
  border-bottom:1px solid var(--line-2);
}
.table-wrap tbody td{padding:.8rem 1rem;color:#c3cfe5;border-bottom:1px solid var(--line);vertical-align:top}
.table-wrap tbody tr:nth-child(odd){background:rgba(255,255,255,.018)}
.table-wrap tbody tr:hover{background:rgba(47,107,255,.07)}
.table-wrap tbody tr:last-child td{border-bottom:0}
.table-wrap tbody td:first-child{color:var(--text);font-weight:600}
.table-wrap tbody td strong{color:var(--gold-2)}
.table-scroll-hint{display:none;font-size:.78rem;color:var(--muted);margin:-1.1rem 0 1.4rem;padding-left:.2rem}

/* ---- FAQ cards ---- */
.faq-item{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:1.05rem 1.2rem;margin-bottom:.7rem;transition:border-color .2s,transform .2s;
}
.faq-item:hover{border-color:var(--line-2);transform:translateY(-2px)}
.faq-item h3{margin:0 0 .45rem;font-size:1.02rem}
.faq-item p{margin:0;font-size:.96rem}

@media (max-width:1080px){
  .article-layout{grid-template-columns:1fr}
  .article-rail{position:static;order:-1}
  .article-main.prose{max-width:none}
  .toc-list{max-height:none}
  .rail-card{display:none}
}
@media (max-width:640px){
  .article-body p,.article-body li{font-size:1rem}
  .table-scroll-hint{display:block}
}