/* ============================================================
   Voxora marketing site - shared base stylesheet
   Owns: design tokens, base elements, buttons, header/nav,
   footer, sections, grids, cards, FAQ, interior-page chrome.
   Page-specific component CSS lives inline on each page.
   House style: UK English, hyphens, sentence-case headings.
   ============================================================ */

:root{
  --vx-navy:#02194d;
  --vx-navy-2:#0a2a6b;
  --vx-accent:#2563eb;
  --vx-accent-hover:#1d4ed8;
  --vx-accent-soft:#eff4ff;
  --vx-ink:#0f172a;
  --vx-muted:#64748b;
  --vx-bg:#ffffff;
  --vx-surface:#f8fafc;
  --vx-line:#e2e8f0;
  --vx-success:#16a34a;
  --vx-radius:12px;
  --vx-radius-sm:8px;
  --vx-shadow-sm:0 1px 2px rgba(2,25,77,.06);
  --vx-shadow-md:0 6px 20px rgba(2,25,77,.08);
  --vx-shadow-lg:0 18px 50px rgba(2,25,77,.14);
  --vx-maxw:1180px;
  --vx-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --vx-ink:#e8eefc;
    --vx-muted:#9fb0cf;
    --vx-bg:#0a1224;
    --vx-surface:#0e1830;
    --vx-line:#1d2b4d;
    --vx-accent-soft:#10213f;
    --vx-shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --vx-shadow-md:0 6px 20px rgba(0,0,0,.45);
    --vx-shadow-lg:0 18px 50px rgba(0,0,0,.55);
  }
}

/* Base */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{
  margin:0;font-family:var(--vx-font);color:var(--vx-ink);background:var(--vx-bg);
  line-height:1.6;font-size:17px;-webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;display:block}
a{color:var(--vx-accent);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.15;letter-spacing:-.01em;margin:0 0 .5em;color:var(--vx-ink)}
h1{font-size:clamp(2rem,5vw,3.4rem);font-weight:800}
h2{font-size:clamp(1.6rem,3.6vw,2.4rem);font-weight:800}
h3{font-size:1.15rem;font-weight:700}
p{margin:0 0 1rem}
:focus-visible{outline:3px solid var(--vx-accent);outline-offset:2px;border-radius:6px}

.vx-skip{position:absolute;left:-9999px;top:0;background:var(--vx-navy);color:#fff;padding:.6rem 1rem;border-radius:0 0 8px 0;z-index:200}
.vx-skip:focus{left:0}

.vx-wrap{max-width:var(--vx-maxw);margin:0 auto;padding:0 24px}
.vx-section{padding:84px 0}
.vx-section--surface{background:var(--vx-surface)}
.vx-section--accent{background:var(--vx-accent-soft)}
.vx-eyebrow{display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--vx-accent);margin-bottom:.9rem}
.vx-lead{font-size:1.15rem;color:var(--vx-muted);max-width:52ch}
.vx-center{text-align:center}
.vx-center .vx-lead{margin-left:auto;margin-right:auto}
.vx-section__head{max-width:60ch;margin:0 auto 44px}
.vx-section__cta{margin-top:40px;text-align:center}

/* Buttons */
.vx-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-weight:700;font-size:1rem;line-height:1;
  padding:.95rem 1.5rem;min-height:48px;border-radius:var(--vx-radius-sm);
  border:1.5px solid transparent;cursor:pointer;text-decoration:none;
  transition:transform .12s ease, background .15s ease, box-shadow .15s ease;
}
.vx-btn:hover{text-decoration:none;transform:translateY(-1px)}
.vx-btn-primary{background:var(--vx-accent);color:#fff;box-shadow:var(--vx-shadow-sm)}
.vx-btn-primary:hover{background:var(--vx-accent-hover);box-shadow:var(--vx-shadow-md)}
.vx-btn-ghost{background:transparent;color:var(--vx-ink);border-color:var(--vx-line)}
.vx-btn-ghost:hover{border-color:var(--vx-accent);color:var(--vx-accent)}
.vx-btn-light{background:#fff;color:var(--vx-navy)}
.vx-btn-light:hover{background:#eef2ff}
.vx-btn-outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.vx-btn-outline-light:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.vx-btn-lg{padding:1.1rem 1.8rem;font-size:1.05rem;min-height:54px}

/* Header / nav */
.vx-header{
  position:sticky;top:0;z-index:100;
  background:color-mix(in srgb, var(--vx-bg) 88%, transparent);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--vx-line);
}
.vx-header__inner{display:flex;align-items:center;gap:1.5rem;height:68px}
.vx-logo{display:inline-flex;align-items:center;gap:.55rem;font-weight:800;font-size:1.25rem;color:var(--vx-ink);letter-spacing:-.02em}
.vx-logo:hover{text-decoration:none}
.vx-logo__img,.vx-logo__img img{display:block;height:30px;width:auto;flex:0 0 auto}
.vx-nav{display:flex;align-items:center;gap:1.6rem;margin-left:auto;align-self:stretch}
.vx-nav a.vx-nav__link{color:var(--vx-ink);font-weight:600;font-size:.97rem;opacity:.85}
.vx-nav a.vx-nav__link:hover{opacity:1;text-decoration:none;color:var(--vx-accent)}
.vx-nav a.vx-nav__link.is-current{opacity:1;color:var(--vx-accent)}
.vx-nav__actions{display:flex;align-items:center;gap:.9rem}
.vx-burger{display:none;margin-left:auto;background:none;border:1.5px solid var(--vx-line);border-radius:8px;width:46px;height:42px;align-items:center;justify-content:center;cursor:pointer;color:var(--vx-ink)}
.vx-burger svg{width:22px;height:22px}
@media (max-width:920px){
  .vx-burger{display:inline-flex}
  .vx-nav{
    position:absolute;left:0;right:0;top:68px;flex-direction:column;align-items:stretch;gap:0;
    background:var(--vx-bg);border-bottom:1px solid var(--vx-line);
    margin-left:0;padding:.5rem 0 1rem;box-shadow:var(--vx-shadow-md);display:none;
  }
  .vx-nav.is-open{display:flex}
  .vx-nav a.vx-nav__link{padding:.9rem 24px;border-top:1px solid var(--vx-line);opacity:1}
  .vx-nav__actions{flex-direction:column;align-items:stretch;padding:.8rem 24px 0;gap:.6rem}
  .vx-nav__actions .vx-btn{width:100%}
}

/* Interior page hero + breadcrumb (multi-page chrome) */
.vx-pagehero{background:linear-gradient(180deg,var(--vx-accent-soft),var(--vx-bg));padding:56px 0 60px;border-bottom:1px solid var(--vx-line)}
.vx-pagehero h1{max-width:28ch;margin-top:.3rem}
.vx-pagehero .vx-lead{margin-top:.4rem}
.vx-pagehero__cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.6rem}
.vx-breadcrumb{display:flex;flex-wrap:wrap;gap:.4rem;font-size:.85rem;color:var(--vx-muted);margin-bottom:1rem}
.vx-breadcrumb a{color:var(--vx-muted);font-weight:600}
.vx-breadcrumb a:hover{color:var(--vx-accent)}
.vx-breadcrumb span[aria-current]{color:var(--vx-ink);font-weight:600}

/* Prose blocks for content-heavy pages: LEFT-aligned, matching the rest of the site (feature pages etc.) */
.vx-prose{max-width:74ch}
.vx-prose h2{margin-top:2em}
.vx-prose h3{margin-top:1.5em}
.vx-prose ul{padding-left:1.2rem;color:var(--vx-muted)}
.vx-prose li{margin-bottom:.5rem}
/* On-this-page jump nav for long guides (reusable) */
.vx-toc{background:var(--vx-surface);border:1px solid var(--vx-line);border-radius:var(--vx-radius-sm);padding:1rem 1.25rem;margin:1.6rem 0}
.vx-toc h2{margin:0 0 .6rem;font-size:1rem}
.vx-toc ul{list-style:none;padding:0;margin:0;columns:2;column-gap:1.6rem}
.vx-toc li{margin:0 0 .45rem;break-inside:avoid;color:var(--vx-ink)}
.vx-toc a{color:var(--vx-accent);font-weight:500;text-decoration:none}
.vx-toc a:hover{text-decoration:underline}
@media(max-width:640px){.vx-toc ul{columns:1}}

/* ---- Industry / landing visuals: hero split, call mock, flow, card icons ---- */
.vx-hero-split{display:grid;grid-template-columns:1.25fr .8fr;gap:48px;align-items:center}
@media(max-width:900px){.vx-hero-split{grid-template-columns:1fr;gap:32px}}
.vx-art{border:1px solid var(--vx-line);border-radius:var(--vx-radius);background:var(--vx-bg);box-shadow:0 26px 60px -30px rgba(2,25,77,.45);overflow:hidden}
.vx-art__bar{display:flex;gap:6px;align-items:center;padding:11px 14px;background:var(--vx-surface);border-bottom:1px solid var(--vx-line)}
.vx-art__dot{width:10px;height:10px;border-radius:50%;background:var(--vx-line)}
.vx-art__body{padding:22px}
.vx-figcap{color:var(--vx-muted);font-size:.85rem;margin:.7rem 0 0;text-align:center}
/* incoming-call device mock (self-contained dark card, theme-safe) */
.vx-call{background:linear-gradient(165deg,var(--vx-navy),var(--vx-navy-2));border-radius:var(--vx-radius);padding:22px 20px;text-align:center;color:#fff}
.vx-call__tag{display:inline-flex;align-items:center;gap:.4rem;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#9fb8ff;margin-bottom:1rem}
.vx-call__tag svg{width:15px;height:15px}
.vx-call__avatar{width:74px;height:74px;border-radius:50%;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;margin:0 auto .85rem;color:#fff}
.vx-call__avatar svg{width:38px;height:38px}
.vx-call__name{font-size:1.15rem;font-weight:700;margin:0}
.vx-call__num{color:#b9c7ee;font-size:.92rem;margin:.15rem 0 0}
.vx-call__ring{display:flex;gap:.45rem;justify-content:center;flex-wrap:wrap;margin:1.1rem 0}
.vx-call__chip{background:rgba(255,255,255,.1);border-radius:999px;padding:.32rem .7rem;font-size:.78rem;color:#e8eefc;display:inline-flex;gap:.35rem;align-items:center}
.vx-call__chip svg{width:14px;height:14px;color:#9fb8ff}
.vx-call__btns{display:flex;gap:1.6rem;justify-content:center;margin-top:.3rem}
.vx-call__btn{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff}
.vx-call__btn svg{width:21px;height:21px}
.vx-call__btn--no{background:#ef4444}.vx-call__btn--no svg{transform:rotate(135deg)}
.vx-call__btn--yes{background:var(--vx-success)}
/* icon bubble for cards */
.vx-ico{width:42px;height:42px;border-radius:10px;background:var(--vx-accent-soft);color:var(--vx-accent);display:inline-flex;align-items:center;justify-content:center;margin-bottom:.9rem}
.vx-ico svg{width:22px;height:22px}
/* call-flow timeline */
.vx-flow{display:grid;margin:1.75rem auto 0;max-width:780px}
.vx-flow__step{display:grid;grid-template-columns:46px 1fr;gap:1.1rem;position:relative;padding-bottom:1.7rem}
.vx-flow__step:not(:last-child)::before{content:"";position:absolute;left:22px;top:50px;bottom:-2px;width:2px;background:var(--vx-line)}
.vx-flow__node{width:46px;height:46px;border-radius:50%;background:var(--vx-accent-soft);color:var(--vx-accent);display:flex;align-items:center;justify-content:center;z-index:1;flex:0 0 auto}
.vx-flow__node svg{width:22px;height:22px}
.vx-flow__c b{display:block;color:var(--vx-ink);margin:.55rem 0 .2rem;font-size:1.05rem}
.vx-flow__c p{margin:0;color:var(--vx-muted)}
/* Industry landing pages (main.vx-ind): consistent CENTRED sections - one-line titles + centred content columns. Scoped, no effect on other pages. */
/* Industry/landing pages: LEFT-aligned content (matches the site); full-width heads so long titles sit on one line */
.vx-ind .vx-section__head{max-width:none}
.vx-ind .vx-prose{max-width:74ch}
.vx-ind .vx-checks{max-width:44rem}
/* Centred article/guide pages (vx-doc): well-structured centred hero + reading column + headings */
.vx-doc .vx-pagehero{text-align:center}
.vx-doc .vx-pagehero h1{margin-inline:auto}
.vx-doc .vx-pagehero .vx-answer{margin:1.1rem auto 0;text-align:center;border-left:0;background:transparent;padding:0;max-width:64ch;font-size:1.18rem;color:var(--vx-muted);line-height:1.6}
.vx-doc .vx-prose{margin-inline:auto}
.vx-doc .vx-prose h2,.vx-doc .vx-prose h3{text-align:center}
.vx-doc .vx-prose>p,.vx-doc .vx-prose>ul,.vx-doc .vx-prose>ol{text-align:left}
.vx-doc .vx-section__head{text-align:center}
/* City/regional hero visual: a local-number card (distinct from the industry call mock) */
.vx-numcard{background:linear-gradient(165deg,var(--vx-navy),var(--vx-navy-2));border-radius:var(--vx-radius);padding:26px 24px;color:#fff;text-align:center}
.vx-numcard__loc{display:inline-flex;align-items:center;gap:.4rem;font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#9fb8ff;margin-bottom:.9rem}
.vx-numcard__loc svg{width:15px;height:15px}
.vx-numcard__num{font-size:1.8rem;font-weight:800;letter-spacing:.04em;margin:.1rem 0}
.vx-numcard__sub{color:#b9c7ee;font-size:.9rem;margin:.2rem 0 1.2rem}
.vx-numcard__rings{display:flex;gap:.55rem;justify-content:center}
.vx-numcard__dev{display:flex;flex-direction:column;align-items:center;gap:.4rem;background:rgba(255,255,255,.08);border-radius:10px;padding:.7rem .5rem;flex:1}
.vx-numcard__dev svg{width:22px;height:22px;color:#cdd9f5}
.vx-numcard__dev span{font-size:.72rem;color:#e8eefc}
.vx-numcard__foot{margin-top:1.15rem;font-size:.8rem;color:#9fb8ff;display:inline-flex;align-items:center;gap:.4rem;justify-content:center}
.vx-numcard__foot svg{width:14px;height:14px;flex:0 0 auto}
@media(max-width:480px){.vx-numcard__num{font-size:1.45rem}}

/* Grids + cards */
.vx-grid{display:grid;gap:24px}
.vx-grid--4{grid-template-columns:repeat(4,1fr)}
.vx-grid--3{grid-template-columns:repeat(3,1fr)}
.vx-grid--2{grid-template-columns:repeat(2,1fr)}
@media (max-width:1000px){.vx-grid--4{grid-template-columns:repeat(2,1fr)}.vx-grid--3{grid-template-columns:1fr}}
@media (max-width:640px){.vx-grid--4,.vx-grid--2{grid-template-columns:1fr}}
.vx-card{background:var(--vx-bg);border:1px solid var(--vx-line);border-radius:var(--vx-radius);padding:28px;box-shadow:var(--vx-shadow-sm)}
.vx-section--surface .vx-card{background:var(--vx-bg)}
.vx-card h3{margin-bottom:.4rem}
.vx-card p{color:var(--vx-muted);margin:0}
.vx-ico{width:46px;height:46px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--vx-accent-soft);color:var(--vx-accent);margin-bottom:16px}
.vx-ico svg{width:24px;height:24px}

.vx-pills{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:28px;justify-content:center}
.vx-pagehero .vx-pills{justify-content:flex-start}
.vx-doc .vx-pagehero .vx-pills{justify-content:center}
.vx-pill{display:inline-flex;align-items:center;gap:.45rem;font-size:.9rem;font-weight:600;background:var(--vx-bg);border:1px solid var(--vx-line);border-radius:999px;padding:.5rem .9rem;color:var(--vx-ink)}
.vx-pill svg{width:15px;height:15px;color:var(--vx-success)}

/* Borderless benefit list with green ticks */
.vx-checks{list-style:none;padding:0;margin:1.3rem 0 0;display:grid;gap:1.15rem}
.vx-checks li{display:flex;gap:.9rem}
.vx-checks > li > svg{width:24px;height:24px;color:var(--vx-success);flex:0 0 auto;margin-top:2px}
.vx-checks b{display:block;color:var(--vx-ink);font-size:1.02rem;margin-bottom:.15rem}
.vx-checks span{color:var(--vx-muted)}

/* Two-column feature row */
.vx-feature{display:grid;grid-template-columns:.95fr 1.05fr;gap:48px;align-items:center}
.vx-feature__art{border:1px solid var(--vx-line);border-radius:var(--vx-radius);background:var(--vx-bg);box-shadow:var(--vx-shadow-lg);overflow:hidden}
.vx-feature__art svg{width:100%;height:auto;display:block}
@media (max-width:920px){.vx-feature{grid-template-columns:1fr;gap:34px}}

/* Navy band + final CTA */
.vx-band{background:var(--vx-navy);color:#fff}
.vx-band h2{color:#fff}
.vx-band p{color:rgba(255,255,255,.82)}
.vx-band .vx-eyebrow{color:#7aa2ff}
.vx-band__inner{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}
.vx-band__cta{display:flex;justify-content:flex-end}
@media (max-width:820px){.vx-band__inner{grid-template-columns:1fr}.vx-band__cta{justify-content:flex-start}}
.vx-final{background:linear-gradient(160deg,var(--vx-navy),var(--vx-navy-2));color:#fff;text-align:center}
.vx-final h2{color:#fff}
.vx-final p{color:rgba(255,255,255,.85);max-width:50ch;margin-left:auto;margin-right:auto}
.vx-final__cta{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap;margin-top:1.4rem}

/* FAQ (pairs with FAQPage JSON-LD) */
.vx-faq{max-width:760px;margin:0 auto;display:grid;gap:14px}
.vx-faq details{border:1px solid var(--vx-line);border-radius:var(--vx-radius);background:var(--vx-bg);box-shadow:var(--vx-shadow-sm);overflow:hidden}
.vx-faq summary{cursor:pointer;list-style:none;padding:18px 22px;font-weight:700;font-size:1.02rem;color:var(--vx-ink);display:flex;align-items:center;justify-content:space-between;gap:1rem}
.vx-faq summary::-webkit-details-marker{display:none}
.vx-faq summary::after{content:"+";font-size:1.5rem;font-weight:700;color:var(--vx-accent);line-height:1;flex:0 0 auto}
.vx-faq details[open] summary::after{content:"\2212"}
.vx-faq__a{padding:0 22px 20px;color:var(--vx-muted)}
.vx-faq__a p{margin:0}

/* Footer */
.vx-footer{background:var(--vx-surface);border-top:1px solid var(--vx-line);padding:60px 0 28px;color:var(--vx-muted);font-size:.92rem}
.vx-footer__cols{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:32px;margin-bottom:40px}
.vx-footer__h{font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--vx-ink);margin:0 0 14px}
.vx-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:.55rem}
.vx-footer a{color:var(--vx-muted)}
.vx-footer a:hover{color:var(--vx-accent)}
.vx-footer__brand p{max-width:34ch}
.vx-footer__bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--vx-line);padding-top:24px}
.vx-footer__social{display:flex;gap:14px}
.vx-footer__social a{display:inline-flex;width:34px;height:34px;border:1px solid var(--vx-line);border-radius:8px;align-items:center;justify-content:center;color:var(--vx-muted)}
.vx-footer__social a:hover{color:var(--vx-accent);border-color:var(--vx-accent)}
.vx-footer__social svg{width:18px;height:18px}
@media (max-width:820px){.vx-footer__cols{grid-template-columns:1fr 1fr}.vx-footer__brand{grid-column:1 / -1}}
@media (max-width:480px){.vx-footer__cols{grid-template-columns:1fr}}

/* Scroll reveal (enabled only via JS + motion-safe) */
body.vx-anim .vx-reveal{opacity:0;transform:translateY(20px);transition:opacity .55s ease,transform .55s ease}
body.vx-anim .vx-reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){body.vx-anim .vx-reveal{opacity:1;transform:none;transition:none}}

/* ============================================================
   Dropdown + mega menu (nav)
   ============================================================ */
.vx-nav__item{position:static;display:flex;align-items:center;align-self:stretch}
.vx-nav__item.vx-has-drop{position:relative}
.vx-nav__trigger{background:none;border:none;cursor:pointer;font-family:inherit;font-size:.97rem;font-weight:600;color:var(--vx-ink);opacity:.85;padding:0;display:inline-flex;align-items:center;gap:.3rem;line-height:1}
.vx-nav__item:hover .vx-nav__trigger,.vx-nav__item:focus-within .vx-nav__trigger,.vx-nav__item.is-open .vx-nav__trigger,.vx-nav__item.is-current .vx-nav__trigger{opacity:1;color:var(--vx-accent)}
.vx-nav__caret{width:13px;height:13px;opacity:.7;transition:transform .15s ease;flex:0 0 auto}
.vx-nav__item:hover .vx-nav__caret,.vx-nav__item.is-open .vx-nav__caret{transform:rotate(180deg)}

.vx-menu{position:absolute;top:calc(100% + 1px);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(6px);transition:opacity .15s ease,transform .15s ease,visibility .15s;background:var(--vx-bg);border:1px solid var(--vx-line);box-shadow:var(--vx-shadow-lg);border-radius:var(--vx-radius);z-index:120}
.vx-menu::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px}
.vx-nav__item:hover>.vx-menu,.vx-nav__item:focus-within>.vx-menu,.vx-nav__item.is-open>.vx-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);padding-top:20px;padding-bottom:20px}

.vx-menu--mega{left:0;right:0;border-top:none;border-radius:0 0 var(--vx-radius) var(--vx-radius)}
.vx-mega__inner{display:grid;grid-template-columns:1.15fr 1fr 1fr 1fr 1fr;gap:28px;max-width:var(--vx-maxw);margin:0 auto;padding:0 24px}
.vx-mega__featured{display:flex;flex-direction:column;gap:14px;padding-right:24px;border-right:1px solid var(--vx-line)}
.vx-mega__featured a{display:block;padding:13px 15px;border-radius:var(--vx-radius-sm);background:var(--vx-surface)}
.vx-mega__featured a:hover{background:var(--vx-accent-soft);text-decoration:none}
.vx-mega__ft-t{display:block;font-weight:700;color:var(--vx-ink);font-size:.95rem}
.vx-mega__ft-d{display:block;color:var(--vx-muted);font-size:.83rem;margin-top:.1rem}
.vx-mega__col h4{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--vx-muted);margin:0 0 12px}
.vx-mega__col ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.vx-mega__col a{color:var(--vx-ink);font-weight:600;font-size:.93rem}
.vx-mega__col a:hover{color:var(--vx-accent);text-decoration:none}

.vx-menu--drop{left:0;min-width:230px;padding:8px}
.vx-menu--drop ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.vx-menu--drop a{display:block;padding:9px 12px;border-radius:var(--vx-radius-sm);color:var(--vx-ink);font-weight:600;font-size:.93rem}
.vx-menu--drop a:hover{background:var(--vx-surface);color:var(--vx-accent);text-decoration:none}

@media (max-width:920px){
  .vx-nav__item{display:block;position:static}
  .vx-nav__trigger{width:100%;justify-content:space-between;padding:.9rem 24px;border-top:1px solid var(--vx-line);opacity:1;font-size:1rem}
  .vx-menu{position:static;opacity:1;visibility:visible;pointer-events:auto;transform:none;display:none;box-shadow:none;border:none;border-radius:0;background:var(--vx-surface);z-index:auto}
  .vx-menu::before{display:none}
  .vx-nav__item.is-open>.vx-menu{display:block;padding:0}
  .vx-mega__inner{display:block;padding:0}
  .vx-mega__featured{flex-direction:column;gap:0;padding:0;border-right:none;border-bottom:1px solid var(--vx-line)}
  .vx-mega__featured a{background:none;padding:.7rem 36px;border-radius:0}
  .vx-mega__featured a:hover{background:var(--vx-bg)}
  .vx-mega__col{padding:.4rem 0}
  .vx-mega__col h4{padding:.4rem 36px 0;margin-bottom:6px}
  .vx-mega__col ul{gap:0}
  .vx-mega__col a,.vx-menu--drop a{display:block;padding:.65rem 36px;border-radius:0}
  .vx-menu--drop{padding:0;min-width:0}
}

/* ===== Learn / long-form guides (answer-first callout + prose tables) ===== */
.vx-answer{font-size:1.12rem;line-height:1.6;color:var(--vx-ink);background:var(--vx-surface);border-left:4px solid var(--vx-accent);padding:1rem 1.15rem;border-radius:var(--vx-radius-sm);margin:.4rem 0 0;max-width:70ch}
.vx-prose table{width:100%;border-collapse:collapse;margin:1.25rem 0;font-size:.95rem}
.vx-prose th,.vx-prose td{border:1px solid var(--vx-line);padding:.55rem .7rem;text-align:left;vertical-align:top}
.vx-prose th{background:var(--vx-surface);font-weight:600;color:var(--vx-ink)}
.vx-prose a{color:var(--vx-accent);font-weight:500}
/* Opt-in scroll wrapper for wide (4+ col) prose tables so they never squish on mobile. */
.vx-tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.25rem 0}
.vx-tscroll table{margin:0;min-width:40rem}

/* ===== Phone-scripts section: copy-paste script blocks ===== */
.vx-prose .vx-script{background:var(--vx-surface);border:1px solid var(--vx-line);border-left:3px solid var(--vx-accent);border-radius:var(--vx-radius-sm);padding:.8rem 1rem;margin:.85rem 0;color:var(--vx-ink)}
.vx-prose .vx-script p{margin:.35rem 0}
