/* ══════════════════════════════════════════════════════════════════════════
   Vilkax launch pages (landing + pricing): suite grid, how-it-works steps,
   platform list, business teaser, plan matrix, theme toggle, and the LIGHT
   theme overrides for the immersive (nexus.css) chrome.
   Colours come from vilkax-tokens.css only: no raw hex here.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Theme toggle ─────────────────────────────────────────────────────── */
.lx-theme{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:none;
  border:1px solid var(--vx-line-2);background:var(--vx-surface-1);color:var(--vx-text-muted);transition:.2s var(--vx-ease)}
.lx-theme:hover{color:var(--vx-text);border-color:var(--hero-ln)}
.lx-theme .icon{width:18px;height:18px}
.lx-theme .i-sun{display:none}
[data-theme="light"] .lx-theme .i-sun{display:block}
[data-theme="light"] .lx-theme .i-moon{display:none}

/* Visible keyboard focus everywhere on these pages (WCAG 2.4.7 / 2.4.11). */
.lx-scope a:focus-visible,.lx-scope button:focus-visible,.lx-scope input:focus-visible,.lx-scope summary:focus-visible,
.lx-theme:focus-visible{outline:2px solid var(--hero-br);outline-offset:3px;border-radius:10px}

/* ── Suite grid ───────────────────────────────────────────────────────── */
.lx-head{text-align:center;max-width:62ch;margin:0 auto}
.lx-suite{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:40px;max-width:1140px;margin-left:auto;margin-right:auto}
.lx-card{position:relative;padding:22px 20px 20px;border-radius:18px;border:1px solid var(--vx-line);
  background:linear-gradient(165deg,color-mix(in srgb,var(--vx-surface-2) 70%,transparent),color-mix(in srgb,var(--vx-surface-1) 40%,transparent));
  transition:transform .3s var(--vx-ease),border-color .3s var(--vx-ease)}
.lx-card:hover{transform:translateY(-4px);border-color:var(--hero-ln)}
.lx-card .ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--hero-sf);border:1px solid var(--hero-ln);color:var(--hero-br)}
.lx-card .ic .icon{width:20px;height:20px}
.lx-card h3{font-family:var(--vx-f-disp);font-weight:600;font-size:17px;letter-spacing:-.01em;margin-top:14px;color:var(--vx-text)}
.lx-card p{font-size:14px;line-height:1.6;color:var(--vx-text-muted);margin-top:6px}
.lx-tier{position:absolute;top:18px;right:18px;font-family:var(--vx-f-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 9px;border-radius:999px;border:1px solid var(--vx-line-2);color:var(--vx-text-muted)}
.lx-tier.free{color:var(--vx-mint-br);border-color:var(--vx-mint-ln);background:var(--vx-mint-sf)}
.lx-foot{margin:22px auto 0;text-align:center;font-size:13px;color:var(--vx-text-muted);max-width:70ch}
.lx-foot a{color:var(--hero-br);text-decoration:underline;text-underline-offset:3px}

/* ── How it works ─────────────────────────────────────────────────────── */
.lx-steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:34px auto 30px;max-width:1080px;counter-reset:lx}
.lx-steps li{counter-increment:lx;padding:22px 20px;border-radius:18px;border:1px solid var(--vx-line);background:color-mix(in srgb,var(--vx-surface-1) 55%,transparent)}
.lx-steps li::before{content:"0" counter(lx);font-family:var(--vx-f-mono);font-size:12px;letter-spacing:.1em;color:var(--hero-br)}
.lx-steps b{display:block;font-family:var(--vx-f-disp);font-weight:600;font-size:16.5px;margin-top:8px;color:var(--vx-text)}
.lx-steps span{display:block;font-size:14px;line-height:1.6;color:var(--vx-text-muted);margin-top:6px}

/* ── Platforms ────────────────────────────────────────────────────────── */
.lx-plat{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:22px}
.lx-plat a{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;border:1px solid var(--vx-line);
  background:color-mix(in srgb,var(--vx-surface-1) 55%,transparent);color:var(--vx-text);transition:.2s var(--vx-ease);min-height:48px}
.lx-plat a:hover{border-color:var(--hero-ln)}
.lx-plat .icon{width:18px;height:18px;color:var(--hero-br);flex:none}
.lx-plat .nm{font-size:14px;font-weight:500}
.lx-plat .st{margin-left:auto;font-family:var(--vx-f-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--vx-text-muted)}
.lx-plat .st.live{color:var(--vx-mint-br)}

/* ── Business teaser ──────────────────────────────────────────────────── */
.lx-biz{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:start}
.lx-biz ul{list-style:none;margin-top:20px;display:grid;gap:10px}
.lx-biz li{display:flex;gap:10px;font-size:14.5px;line-height:1.55;color:var(--vx-text-muted)}
.lx-biz li .icon{width:18px;height:18px;flex:none;margin-top:2px;color:var(--vx-mint-br)}
.lx-biz li b{color:var(--vx-text);font-weight:600}
.lx-bizcard{padding:26px 22px;border-radius:20px;border:1px solid var(--vx-line-2);background:color-mix(in srgb,var(--vx-surface-1) 70%,transparent)}
.lx-bizcard h3{font-family:var(--vx-f-disp);font-weight:600;font-size:19px;color:var(--vx-text)}
.lx-bizcard p{font-size:14px;color:var(--vx-text-muted);line-height:1.6;margin-top:6px}
  background:var(--vx-surface-0);color:var(--vx-text);font:inherit;font-size:15px}
.lx-api{margin-top:18px;font-size:13px;color:var(--vx-text-muted)}
.lx-api a{color:var(--hero-br);text-decoration:underline;text-underline-offset:3px}

/* ── Plan comparison matrix (pricing) ─────────────────────────────────── */
.lx-matrix-wrap{max-width:min(1000px,100%);min-width:0;margin:34px auto 0;overflow-x:auto;border-radius:18px;border:1px solid var(--vx-line);
  background:color-mix(in srgb,var(--vx-surface-1) 60%,transparent);-webkit-overflow-scrolling:touch}
.lx-matrix-wrap:focus-visible{outline:2px solid var(--hero-br);outline-offset:3px}
.lx-matrix{width:100%;min-width:560px;border-collapse:collapse;font-size:14px}
.lx-matrix caption{text-align:left;padding:16px 18px 4px;font-size:12.5px;color:var(--vx-text-muted)}
.lx-matrix th,.lx-matrix td{padding:12px 16px;text-align:left;border-top:1px solid var(--vx-line);vertical-align:top;color:var(--vx-text-muted)}
.lx-matrix thead th{border-top:0;font-family:var(--vx-f-disp);font-weight:600;color:var(--vx-text);font-size:15px}
.lx-matrix thead th small{display:block;font-family:var(--vx-f-mono);font-weight:400;font-size:11px;color:var(--vx-text-muted);margin-top:3px}
.lx-matrix tbody th{color:var(--vx-text);font-weight:500}
.lx-matrix .pm-yes{color:var(--vx-mint-br);font-weight:600}
.lx-matrix .pm-no{color:var(--vx-text-dim)}
.lx-matrix thead th:nth-child(3){color:var(--hero-br)}
.lx-note{max-width:1000px;margin:12px auto 0;font-size:12.5px;color:var(--vx-text-muted);text-align:center}

@media (max-width:1080px){.lx-suite{grid-template-columns:repeat(2,1fr)}.lx-biz{grid-template-columns:1fr;gap:26px}}
@media (max-width:640px){
  .lx-suite{grid-template-columns:1fr;gap:10px;margin-top:28px}
  .lx-steps{grid-template-columns:1fr}
  .lx-plat{grid-template-columns:1fr}
  .lx-card{padding:18px 16px}
}

/* ══════════ LIGHT THEME for the immersive chrome ══════════
   nexus.css was drawn dark-first with white-alpha glass. On a light page that
   glass is invisible, so the surfaces are re-based on the light tokens here. */
[data-theme="light"] body{background:var(--vx-bg)}
/* prelaunch.css colours ghost buttons with its dark-only --text (#EEF3FA), which
   is white on the light surface: the homepage secondary CTAs were invisible. */
[data-theme="light"] .btn.ghost{color:var(--vx-text)}
/* prelaunch.css also sets body{color:var(--text)} with that same dark-only white,
   so any copy without its own colour (pricing receipts, "Start free.") was white
   on the light surface. */
[data-theme="light"] body{color:var(--vx-text)}
/* These components keep a dark fill in the light theme (rgba(11,14,22,.8+)),
   but read the light text tokens, so their copy measured 1.4 to 2.5:1. They get
   the dark-theme text ladder back inside the dark surface. */
[data-theme="light"] .orbit-info,
[data-theme="light"] .demo-card,
[data-theme="light"] .float .win-bar{
  /* Brighter than the dark theme ladder: these fills are translucent, and over
     the light page they settle near #2B2E36, not the dark theme void. */
  --vx-text:#EEF3FA;--vx-text-muted:#C4CCDA;--vx-text-dim:#AEB8CB;--vx-text-faint:#AEB8CB;
  --vx-mint-br:#5BF5DA;--vx-blue-br:#86B4FF;color:var(--vx-text)}
/* The message bubble inside the demo card is a light chip: back to light ink. */
[data-theme="light"] .demo-card .msg-bubble{color:#45536B}
/* The phone screen is light here; its title inherited a white ink. */
[data-theme="light"] .mp .mp-t{color:var(--vx-text)}
[data-theme="light"] .stars,[data-theme="light"] .grain,[data-theme="light"] .cursor-ring,[data-theme="light"] .spotlight{display:none}
[data-theme="light"] .vignette{opacity:0}
[data-theme="light"] .aurora{opacity:calc(.35*var(--amb))}
[data-theme="light"] .topbar.scrolled{background:rgba(243,246,251,.94);box-shadow:0 10px 30px -22px rgba(20,30,60,.35)}
[data-theme="light"] .btn.ghost,
[data-theme="light"] .pillar-card,
[data-theme="light"] .priv,
[data-theme="light"] .pf-cell,
[data-theme="light"] .faq-item,
[data-theme="light"] .duo-card,
[data-theme="light"] .dev-chip,
[data-theme="light"] .tag,
[data-theme="light"] .pr-rc,
[data-theme="light"] .pr-faq details,
[data-theme="light"] .plane,
[data-theme="light"] .stat-tile{background:var(--vx-surface-1);box-shadow:var(--vx-shadow-1)}
[data-theme="light"] .lx-card,[data-theme="light"] .lx-steps li,[data-theme="light"] .lx-plat a,
[data-theme="light"] .lx-bizcard,[data-theme="light"] .lx-matrix-wrap{background:var(--vx-surface-1);box-shadow:var(--vx-shadow-1)}
[data-theme="light"] .tb-nav a:hover,[data-theme="light"] .tb-signin:hover{background:rgba(14,20,34,.05)}
[data-theme="light"] ::-webkit-scrollbar-thumb{background:rgba(14,20,34,.18)}
[data-theme="light"] .aegis-core .em,[data-theme="light"] .orbit-core .em{filter:drop-shadow(0 10px 22px rgba(20,30,60,.25))}
/* Brand accent text on white needs the deeper "ink" to clear 4.5:1. */
[data-theme="light"] body{--hero-br:var(--vx-accent-ink)}
/* The wordmark is a light-on-dark mark ("do not alter colors"), so on a light
   page it sits on its own dark plate rather than being recoloured. */
[data-theme="light"] .vx-stage.bare{background:rgb(10,26,48);border-radius:10px}
/* On phones the topbar has room for sign-in + the primary CTA only; the theme
   toggle moves to the footer there (both buttons share data-vlx-theme-toggle). */
.lx-theme.foot{display:none;margin-top:6px}
@media (max-width:640px){.topbar .lx-theme{display:none}.lx-theme.foot{display:grid}}
/* Dark island for components drawn dark-only (the pricing plan stack). */
[data-theme="light"] .lx-island{background:var(--vx-bg);color:var(--vx-text);border-radius:26px;padding:24px 12px;box-shadow:var(--vx-shadow-2)}
/* Premium VPN add-on card (pricing) */
.lx-addon{max-width:1000px;margin:18px auto 0;padding:20px 22px;border-radius:18px;border:1px solid var(--vx-line-2);background:color-mix(in srgb,var(--vx-surface-1) 60%,transparent)}
.lx-addon-k{font-family:var(--vx-f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--vx-mint-br)}
.lx-addon-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:6px;flex-wrap:wrap}
.lx-addon h3{font-family:var(--vx-f-disp);font-weight:600;font-size:18px;color:var(--vx-text)}
.lx-addon b{font-family:var(--vx-f-disp);font-size:18px;color:var(--vx-text)}
.lx-addon p{font-size:14px;line-height:1.6;color:var(--vx-text-muted);margin-top:6px}
[data-theme="light"] .lx-addon{background:var(--vx-surface-1);box-shadow:var(--vx-shadow-1)}