/* ============================================================================
   Klixsor — Direction A production skin   (klixsor-a.prod.css  v=a1.0)

   ADDITIVE theme layer for the live production pages. It is loaded AFTER the
   page's own stylesheet(s) and never removes or renames anything: it only
   re-colours / re-typesets / re-spaces the components that already exist on
   klixsor.com, plus the small set of A "chrome" helpers used by the shared
   header/footer.

   Scope: every candidate page sets  <html class="kx-a">  and gets the existing
   `dark` class by default, so all overrides below are keyed on
   `html.kx-a.dark`. Turning the live light/dark switch off returns the page to
   the original production theme — the toggle keeps working.

   Nothing here changes markup, ids, anchors, forms, auth or endpoints.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. tokens */
html.kx-a{
  --bg:#070b12; --surface:#0d1420; --surface-2:#111a28; --surface-3:#16202f; --surface-4:#1b2536;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.14); --line-3:rgba(255,255,255,.22);
  --ink:#eef3fa; --ink-2:#c3cddc; --muted:#8896ad; --muted-2:#8391a8;
  --gold:#f5c451; --gold-deep:#c99a2e; --gold-ink:#1a1405;
  --blue:#4a9eff; --green:#4ade80; --red:#ff6b6b; --amber:#ffb454;
  --r:14px; --r-sm:9px; --r-lg:20px;
  --max:1180px;
  --font-d:"Space Grotesk",system-ui,sans-serif;
  --font-b:"IBM Plex Sans",system-ui,-apple-system,"Inter",sans-serif;
  --font-m:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* cloud.* pages read their colours from local :root variables — retarget them */
  --bg-deep:#070b12; --bg-card:#0d1420; --bg-card-hover:#111a28; --bg-inner:#0a0e16;
  --accent:#f5c451; --accent-light:#ffd98a; --accent-dark:#c99a2e;
  --text-primary:#eef3fa; --text-secondary:#c3cddc; --text-muted:#8896ad;
  --border:rgba(255,255,255,.09); --border-light:rgba(255,255,255,.14);
  --green:#4ade80; --red:#ff6b6b;
}

/* ------------------------------------------------------------------ 2. base */
html.kx-a{background:#070b12}
html.kx-a.dark body{
  background:var(--bg); color:var(--ink); font-family:var(--font-b);
  background-image:
    radial-gradient(900px 520px at 80% -10%, rgba(245,196,81,.10), transparent 60%),
    radial-gradient(760px 460px at 6% 2%,  rgba(74,158,255,.08), transparent 62%);
  background-attachment:fixed; background-repeat:no-repeat;
}
html.kx-a.dark ::selection{background:rgba(245,196,81,.28);color:var(--ink)}
html.kx-a.dark :focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
html.kx-a.dark h1,html.kx-a.dark h2,html.kx-a.dark h3,html.kx-a.dark h4,
html.kx-a.dark .section-title,html.kx-a.dark .legal-hero h1,html.kx-a.dark .legal-content h2{
  font-family:var(--font-d); letter-spacing:-.02em;
}
html.kx-a.dark code,html.kx-a.dark pre,html.kx-a.dark kbd,html.kx-a.dark samp{
  font-family:var(--font-m);
}
html.kx-a.dark a{color:inherit}

/* ------------------------------------------------------------- 3. nav chrome */
html.kx-a.dark .nav{
  background:rgba(7,11,18,.80); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line); box-shadow:none;
}
html.kx-a.dark .nav.scrolled{box-shadow:0 1px 20px rgba(0,0,0,.5)}
html.kx-a.dark .nav-inner{height:66px}
html.kx-a.dark .logo-icon{
  background:linear-gradient(135deg,var(--gold),var(--gold-deep));
  color:var(--gold-ink); border-radius:10px; font-family:var(--font-d);
  box-shadow:0 6px 18px -10px rgba(245,196,81,.8);
}
html.kx-a.dark .logo-text{color:var(--ink);font-family:var(--font-d);letter-spacing:.06em}
html.kx-a.dark .logo span:not(.logo-icon){color:var(--muted-2)}
html.kx-a.dark .nav-links a{color:var(--ink-2)}
html.kx-a.dark .nav-links a:hover{color:var(--gold)}
html.kx-a.dark .nav-links a.active{color:var(--gold)}
html.kx-a.dark .nav-links a::after{background:var(--gold)}
html.kx-a.dark .cloud-nav-link{color:var(--muted-2) !important}
html.kx-a.dark .cloud-nav-link:hover{color:var(--gold) !important}
html.kx-a.dark .dark-toggle{border-color:var(--line-2);color:var(--ink-2);border-radius:10px}
html.kx-a.dark .dark-toggle:hover{border-color:var(--gold);color:var(--gold);background:rgba(245,196,81,.06)}
html.kx-a.dark .mobile-menu-btn{border:1px solid var(--line-2);border-radius:10px;color:var(--ink-2)}
html.kx-a.dark .mobile-menu-btn span{background:var(--ink-2)}
html.kx-a.dark .nav-links{background:transparent;border-bottom:none;box-shadow:none}
html.kx-a.dark .nav-links.open{
  background:rgba(9,14,22,.985); border-bottom:1px solid var(--line);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.9);
}
/* Pages whose own stylesheet never hid the link row on small screens (terms,
   cloud-terms, legal pages) get a wrapping header instead of a sideways
   scroll. Navs that ship a hamburger keep their own mobile behaviour. */
@media (max-width:768px){
  html.kx-a.dark .nav-inner:not(:has(.mobile-menu-btn)){flex-wrap:wrap;height:auto;min-height:60px;
    padding:12px 18px;gap:8px 14px;align-items:center}
  html.kx-a.dark .nav-inner:not(:has(.mobile-menu-btn)) .nav-links{flex-wrap:wrap;gap:6px 14px;
    font-size:.82rem;row-gap:6px}
  html.kx-a.dark .nav-inner:not(:has(.mobile-menu-btn)) .nav-links a{font-size:.82rem}
}

/* ------------------------------------------------------------- 4. buttons */
html.kx-a.dark .btn{border-radius:10px;font-weight:600}
html.kx-a.dark .btn-primary{background:var(--gold);color:var(--gold-ink);border:none;
  box-shadow:0 10px 26px -14px rgba(245,196,81,.85)}
html.kx-a.dark .btn-primary:hover{background:#ffd06a}
html.kx-a.dark .btn-secondary{background:var(--surface-3);color:var(--ink);border:1px solid var(--line-2)}
html.kx-a.dark .btn-secondary:hover{background:var(--surface-4)}
html.kx-a.dark .btn-outline{color:var(--gold);border-color:rgba(245,196,81,.5);background:rgba(245,196,81,.05)}
html.kx-a.dark .btn-outline:hover{background:rgba(245,196,81,.13);border-color:var(--gold)}
html.kx-a.dark .btn-outline-gray{color:var(--ink-2);border-color:var(--line-2)}
html.kx-a.dark .btn-outline-gray:hover{background:var(--surface-3);border-color:var(--line-3);color:var(--ink)}
html.kx-a.dark .btn-white{background:var(--surface-2);color:var(--ink);border:1px solid var(--line-2)}
html.kx-a.dark .btn-blue{border:1px solid rgba(74,158,255,.4);color:var(--blue);background:rgba(74,158,255,.07)}
html.kx-a.dark .btn-gray{background:var(--surface-3);color:var(--ink-2);border:1px solid var(--line-2)}

/* ------------------------------------------------------------ 5. promo bar */
html.kx-a.dark .promo-banner{background:linear-gradient(90deg,rgba(245,196,81,.14),rgba(245,196,81,.05));
  border-bottom:1px solid rgba(245,196,81,.24)}
html.kx-a.dark .promo-text{color:var(--ink-2)}
html.kx-a.dark .promo-text strong{color:var(--gold)}
html.kx-a.dark .promo-pulse{background:var(--gold)}
html.kx-a.dark .promo-cta{color:var(--gold)}
html.kx-a.dark .promo-close{color:var(--muted)}

/* -------------------------------------------------------- 6. landing (index) */
html.kx-a.dark .hero{background:linear-gradient(180deg,#080d16 0%,var(--bg) 100%)}
html.kx-a.dark .hero::before{
  background:
    radial-gradient(ellipse 58% 54% at 26% 16%, rgba(245,196,81,.14), transparent),
    radial-gradient(ellipse 46% 46% at 76% 24%, rgba(74,158,255,.09), transparent);
}
html.kx-a.dark .hero h1{color:var(--ink)}
html.kx-a.dark .hero h1 .accent{
  background:linear-gradient(100deg,var(--gold) 0%,#ffd98a 70%); -webkit-background-clip:text;
  background-clip:text; -webkit-text-fill-color:transparent; color:var(--gold);
}
html.kx-a.dark .hero-sub{color:var(--ink-2)}
html.kx-a.dark .hero-badge{background:rgba(245,196,81,.10);border-color:rgba(245,196,81,.30);color:var(--gold)}
html.kx-a.dark .hero-proof{color:var(--muted)}
html.kx-a.dark .hero-proof strong{color:var(--ink-2)}
html.kx-a.dark .hero-screenshot{border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 34px 80px -34px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.07)}
html.kx-a.dark .process{background:var(--surface)}
html.kx-a.dark .process-step{background:var(--surface-2);border-color:var(--line)}
html.kx-a.dark .process-step:hover{background:rgba(245,196,81,.07);border-color:rgba(245,196,81,.34)}
html.kx-a.dark .process-step h4{color:var(--ink);font-family:var(--font-d)}
html.kx-a.dark .process-step p{color:var(--ink-2)}
html.kx-a.dark .process-num{color:var(--gold)}
html.kx-a.dark .process-arrow{color:var(--line-3)}
html.kx-a.dark .logo-bar{border-bottom-color:var(--line)}
html.kx-a.dark .logo-bar-title{color:var(--muted-2)}
html.kx-a.dark .platform-logo{color:var(--muted)}
html.kx-a.dark .platform-logo:hover{color:var(--gold)}
html.kx-a.dark .section-alt{background:var(--surface)}
html.kx-a.dark .section-tag{color:var(--gold)}
html.kx-a.dark .section-title{color:var(--ink)}
html.kx-a.dark .section-sub,html.kx-a.dark .section-subtitle{color:var(--ink-2)}
html.kx-a.dark .feature-card{background:var(--surface-2);border-color:var(--line)}
html.kx-a.dark .feature-card:hover{border-color:rgba(245,196,81,.38);box-shadow:0 12px 34px -18px rgba(245,196,81,.35)}
html.kx-a.dark .feature-card h3{color:var(--ink)}
html.kx-a.dark .feature-card p{color:var(--ink-2)}
html.kx-a.dark .fi-blue{background:rgba(74,158,255,.14)}
html.kx-a.dark .fi-indigo{background:rgba(129,140,248,.14)}
html.kx-a.dark .fi-green{background:rgba(74,222,128,.14)}
html.kx-a.dark .fi-amber{background:rgba(245,196,81,.16)}
html.kx-a.dark .fi-red{background:rgba(255,107,107,.14)}
html.kx-a.dark .fi-cyan{background:rgba(56,189,248,.14)}
html.kx-a.dark .fi-purple{background:rgba(168,85,247,.14)}
html.kx-a.dark .fi-emerald{background:rgba(74,222,128,.14)}
html.kx-a.dark .fi-rose{background:rgba(244,63,94,.14)}
html.kx-a.dark .showcase-item + .showcase-item{border-top-color:var(--line)}
html.kx-a.dark .showcase-tag.tag-blue{background:rgba(74,158,255,.14);color:var(--blue)}
html.kx-a.dark .showcase-tag.tag-green{background:rgba(74,222,128,.14);color:var(--green)}
html.kx-a.dark .showcase-tag.tag-purple{background:rgba(168,85,247,.14);color:#c084fc}
html.kx-a.dark .showcase-tag.tag-amber{background:rgba(245,196,81,.14);color:var(--gold)}
html.kx-a.dark .showcase-text h3{color:var(--ink)}
html.kx-a.dark .showcase-text p{color:var(--ink-2)}
html.kx-a.dark .showcase-screenshot{border-radius:var(--r);overflow:hidden;
  box-shadow:0 18px 50px -26px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.06)}
html.kx-a.dark .check-list li{color:var(--ink-2)}
html.kx-a.dark .check-list li strong{color:var(--ink)}
html.kx-a.dark .check-list li::before{background:rgba(74,222,128,.14);border-color:rgba(74,222,128,.42)}
html.kx-a.dark .mid-cta{background:linear-gradient(135deg,#1b2536,#0d1420);border:1px solid rgba(245,196,81,.22)}
html.kx-a.dark .mid-cta h3,html.kx-a.dark .mid-cta h2{color:var(--ink)}
html.kx-a.dark .mid-cta p{color:var(--ink-2)}
html.kx-a.dark .persona-card{background:var(--surface-2);border-color:var(--line)}
html.kx-a.dark .persona-card:hover{border-color:rgba(245,196,81,.38);box-shadow:0 12px 30px -18px rgba(245,196,81,.3)}
html.kx-a.dark .persona-card h3{color:var(--ink)}
html.kx-a.dark .persona-card p{color:var(--ink-2)}
html.kx-a.dark .pi-blue{background:rgba(74,158,255,.14)}
html.kx-a.dark .pi-indigo{background:rgba(129,140,248,.14)}
html.kx-a.dark .pi-purple{background:rgba(168,85,247,.14)}
html.kx-a.dark .compare-wrap{background:var(--surface-2);border-color:var(--line);border-radius:var(--r)}
html.kx-a.dark .compare-table thead{background:var(--surface-3)}
html.kx-a.dark .compare-table th{color:var(--ink-2)}
html.kx-a.dark .compare-table td{border-bottom-color:var(--line)}
html.kx-a.dark .compare-table td:first-child,html.kx-a.dark .compare-table th:first-child{color:var(--ink-2)}
html.kx-a.dark .compare-table td.hl{background:rgba(245,196,81,.08);color:var(--gold)}
html.kx-a.dark .compare-table th.hl{background:rgba(245,196,81,.16);color:var(--gold)}
html.kx-a.dark .compare-table .cross{color:var(--muted-2)}
html.kx-a.dark .compare-table tbody tr:hover{background:rgba(255,255,255,.02)}
html.kx-a.dark .pricing{background:var(--surface)}
html.kx-a.dark .toggle-label{color:var(--muted)}
html.kx-a.dark .toggle-label.active{color:var(--ink)}
html.kx-a.dark .save-badge{background:rgba(74,222,128,.14);color:var(--green)}
html.kx-a.dark .toggle-slider{background:var(--surface-4)}
html.kx-a.dark .toggle-switch input:checked + .toggle-slider{background:rgba(245,196,81,.42)}
html.kx-a.dark .price-card{background:var(--surface-2);border-color:var(--line);border-radius:var(--r)}
html.kx-a.dark .price-card:hover{border-color:rgba(245,196,81,.4);box-shadow:0 14px 36px -20px rgba(245,196,81,.35)}
html.kx-a.dark .price-card.popular{border-color:var(--gold);box-shadow:0 18px 46px -24px rgba(245,196,81,.45)}
html.kx-a.dark .popular-badge{background:var(--gold);color:var(--gold-ink)}
html.kx-a.dark .price-header h3{color:var(--ink)}
html.kx-a.dark .price-desc{color:var(--muted)}
html.kx-a.dark .currency,html.kx-a.dark .amount{color:var(--ink);font-family:var(--font-d)}
html.kx-a.dark .period{color:var(--muted)}
html.kx-a.dark .price-billed{color:var(--muted)}
html.kx-a.dark .price-features li.included{color:var(--ink-2)}
html.kx-a.dark .price-features li.included::before{color:var(--green)}
html.kx-a.dark .price-features li.excluded{color:var(--muted-2)}
html.kx-a.dark .price-features li.excluded::before{color:var(--muted-2)}
html.kx-a.dark .pricing-note{color:var(--muted)}
html.kx-a.dark .trial-box{background:rgba(245,196,81,.07);border-color:rgba(245,196,81,.22)}
html.kx-a.dark .trial-content h3{color:var(--ink)}
html.kx-a.dark .trial-content p{color:var(--ink-2)}
html.kx-a.dark .trial-limits{color:var(--gold)}
html.kx-a.dark .trial-form input[type="email"]{background:#0a0e16;border-color:var(--line-2);color:var(--ink);
  border-radius:var(--r-sm)}
html.kx-a.dark .trial-form input[type="email"]:focus{border-color:var(--gold)}
html.kx-a.dark .trial-form input[type="email"]::placeholder{color:var(--muted-2)}
html.kx-a.dark .trial-result.success{background:rgba(74,222,128,.10);border-color:rgba(74,222,128,.3);color:var(--green)}
html.kx-a.dark .trial-result.error{background:rgba(255,107,107,.10);border-color:rgba(255,107,107,.3);color:var(--red)}
html.kx-a.dark .step{background:var(--surface-2);border-color:var(--line)}
html.kx-a.dark .step:hover{border-color:rgba(245,196,81,.4);box-shadow:0 10px 26px -18px rgba(245,196,81,.35)}
html.kx-a.dark .step h3{color:var(--ink)}
html.kx-a.dark .step p{color:var(--ink-2)}
html.kx-a.dark .step-num,html.kx-a.dark .step-badge{background:rgba(245,196,81,.14);color:var(--gold)}
html.kx-a.dark .faq-item{border-bottom-color:var(--line)}
html.kx-a.dark .faq-question{color:var(--ink)}
html.kx-a.dark .faq-question:hover{color:var(--gold)}
html.kx-a.dark .faq-arrow{color:var(--muted)}
html.kx-a.dark .faq-item.open .faq-arrow{color:var(--gold)}
html.kx-a.dark .faq-answer p{color:var(--ink-2)}
html.kx-a.dark .faq-answer a{color:var(--gold)}
html.kx-a.dark .faq-answer code{background:rgba(245,196,81,.12);color:var(--gold);border-radius:5px}
html.kx-a.dark .cta{background:var(--surface)}
html.kx-a.dark .cta h2{color:var(--ink)}
html.kx-a.dark .cta p{color:var(--ink-2)}
html.kx-a.dark .cta-trust{color:var(--muted)}
html.kx-a.dark .payment-modal-overlay{background:rgba(3,6,11,.72);backdrop-filter:blur(4px)}
html.kx-a.dark .payment-modal{background:var(--surface-2);border-color:var(--line-2);border-radius:var(--r-lg);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.95)}
html.kx-a.dark .payment-modal-close{color:var(--muted)}
html.kx-a.dark .payment-modal-close:hover{color:var(--ink)}
html.kx-a.dark .payment-modal-title{color:var(--ink)}
html.kx-a.dark .payment-modal-sub{color:var(--ink-2)}
html.kx-a.dark .payment-modal-sub strong{color:var(--gold)}
html.kx-a.dark .payment-option{background:#0a0e16;border-color:var(--line-2);border-radius:var(--r-sm)}
html.kx-a.dark .payment-option:hover{border-color:var(--gold);background:rgba(245,196,81,.07)}
html.kx-a.dark .payment-option-label{color:var(--ink)}
html.kx-a.dark .payment-option-desc{color:var(--muted)}
html.kx-a.dark .payment-option-arrow{color:var(--gold)}

/* -------------------------------------------------------------- 7. footer */
html.kx-a.dark .footer{background:var(--surface);border-top:1px solid var(--line)}
html.kx-a.dark .footer-brand p{color:var(--muted)}
html.kx-a.dark .footer-col h4{color:var(--muted-2);font-family:var(--font-m);letter-spacing:.14em;text-transform:uppercase;font-size:.68rem}
html.kx-a.dark .footer-col a{color:var(--ink-2)}
html.kx-a.dark .footer-col a:hover{color:var(--gold)}
html.kx-a.dark .footer-bottom{border-top-color:var(--line)}
html.kx-a.dark .footer-bottom p{color:var(--muted-2)}
html.kx-a.dark .footer-links a{color:var(--muted)}
html.kx-a.dark .footer-links a:hover{color:var(--gold)}

/* -------------------------------------------------------------- 8. portal */
html.kx-a.dark .portal-wrap{background:
  radial-gradient(ellipse 80% 60% at 50% 0%, rgba(245,196,81,.10), transparent),
  radial-gradient(ellipse 60% 50% at 80% 20%, rgba(74,158,255,.06), transparent)}
html.kx-a.dark .login-card,html.kx-a.dark .card{background:var(--surface-2);border-color:var(--line);border-radius:var(--r)}
html.kx-a.dark .login-card h1{color:var(--ink)}
html.kx-a.dark .login-card .lead,html.kx-a.dark .lead{color:var(--ink-2)}
html.kx-a.dark .form-group label{color:var(--muted)}
html.kx-a.dark .form-input{background:#0a0e16;border-color:var(--line-2);color:var(--ink);border-radius:var(--r-sm)}
html.kx-a.dark .form-input::placeholder{color:var(--muted-2)}
html.kx-a.dark .form-input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(245,196,81,.12)}
html.kx-a.dark .login-btn{background:var(--gold);color:var(--gold-ink)}
html.kx-a.dark .login-footer{color:var(--muted)}
html.kx-a.dark .login-footer a{color:var(--gold)}
html.kx-a.dark .login-footer a:hover{color:#ffd98a}
html.kx-a.dark .form-error{color:var(--red)}
html.kx-a.dark .form-success{color:var(--green)}
html.kx-a.dark .dash-header h1{color:var(--ink)}
html.kx-a.dark .dash-email{color:var(--ink-2)}
html.kx-a.dark .dash-logout{background:var(--surface-3);border-color:var(--line-2);color:var(--ink-2)}
html.kx-a.dark .dash-logout:hover{background:var(--surface-4);color:var(--ink)}
html.kx-a.dark .license-card{background:var(--surface-2);border-color:var(--line);border-radius:var(--r);box-shadow:none}
html.kx-a.dark .lic-key{color:var(--gold)}
html.kx-a.dark .lic-copy-btn{background:rgba(245,196,81,.13);border-color:rgba(245,196,81,.26);color:var(--gold)}
html.kx-a.dark .lic-copy-btn:hover{background:rgba(245,196,81,.22)}
html.kx-a.dark .badge-plan{background:rgba(245,196,81,.14);color:var(--gold);border-color:rgba(245,196,81,.28)}
html.kx-a.dark .badge-active{background:rgba(74,222,128,.14);color:var(--green);border-color:rgba(74,222,128,.28)}
html.kx-a.dark .badge-cancelled,html.kx-a.dark .badge-expired,html.kx-a.dark .badge-suspended{
  background:rgba(255,107,107,.12);color:var(--red);border-color:rgba(255,107,107,.24)}
html.kx-a.dark .badge-cycle{background:rgba(255,255,255,.05);color:var(--ink-2);border-color:var(--line)}
html.kx-a.dark .lic-detail-label{color:var(--muted)}
html.kx-a.dark .lic-detail-value{color:var(--ink)}
html.kx-a.dark .lic-detail-value.unbound{color:var(--muted-2)}
html.kx-a.dark .lic-action-btn.release{background:rgba(255,180,84,.12);border-color:rgba(255,180,84,.28);color:var(--amber)}
html.kx-a.dark .lic-action-btn.release:hover{background:rgba(255,180,84,.2)}
html.kx-a.dark .lic-action-btn.billing{background:rgba(74,158,255,.12);border-color:rgba(74,158,255,.28);color:var(--blue)}
html.kx-a.dark .lic-action-btn.billing:hover{background:rgba(74,158,255,.2)}
html.kx-a.dark .lic-action-btn.change-plan{background:rgba(139,92,246,.12);border-color:rgba(139,92,246,.28);color:#c4b5fd}
html.kx-a.dark .lic-action-btn.change-plan:hover{background:rgba(139,92,246,.2)}
html.kx-a.dark .plan-overlay,html.kx-a.dark .confirm-overlay{background:rgba(3,6,11,.74);backdrop-filter:blur(4px)}
html.kx-a.dark .plan-dialog,html.kx-a.dark .confirm-dialog{background:var(--surface-2);border-color:var(--line-2);
  border-radius:var(--r-lg);box-shadow:0 40px 90px -40px rgba(0,0,0,.95)}
html.kx-a.dark .plan-dialog h3,html.kx-a.dark .confirm-dialog h3{color:var(--ink)}
html.kx-a.dark .plan-dialog .plan-subtitle{color:var(--ink-2)}
html.kx-a.dark .confirm-dialog p{color:var(--ink-2)}
html.kx-a.dark .plan-option{background:#0a0e16;border-color:var(--line-2)}
html.kx-a.dark .plan-option:hover{border-color:rgba(245,196,81,.4);background:rgba(245,196,81,.07)}
html.kx-a.dark .plan-option.selected{border-color:var(--gold);background:rgba(245,196,81,.09)}
html.kx-a.dark .plan-radio{border-color:var(--line-3)}
html.kx-a.dark .plan-option.selected .plan-radio{border-color:var(--gold)}
html.kx-a.dark .plan-option-name{color:var(--ink)}
html.kx-a.dark .plan-option-desc{color:var(--muted)}
html.kx-a.dark .plan-option-price{color:var(--ink-2)}
html.kx-a.dark .cycle-btn{background:#0a0e16;border-color:var(--line-2);color:var(--ink-2)}
html.kx-a.dark .cycle-btn.active{border-color:var(--gold);color:var(--gold);background:rgba(245,196,81,.08)}
html.kx-a.dark .plan-result-msg.success{background:rgba(74,222,128,.08);border-color:rgba(74,222,128,.2);color:var(--green)}
html.kx-a.dark .plan-result-msg.error{background:rgba(255,107,107,.08);border-color:rgba(255,107,107,.2);color:var(--red)}
html.kx-a.dark .plan-confirm-btn{background:var(--gold);color:var(--gold-ink)}
html.kx-a.dark .plan-confirm-btn:hover{background:#ffd06a}
html.kx-a.dark .confirm-cancel{background:#0a0e16;border-color:var(--line-2);color:var(--ink-2)}
html.kx-a.dark .confirm-proceed{background:rgba(255,180,84,.14);border-color:rgba(255,180,84,.3);color:var(--amber)}
html.kx-a.dark .migration-box{background:rgba(74,222,128,.06);border-color:rgba(74,222,128,.16)}
html.kx-a.dark .migration-box h4{color:var(--green)}
html.kx-a.dark .migration-box p{color:var(--ink-2)}
html.kx-a.dark .migration-cmd{background:#0a0e16;border-color:var(--line);color:var(--ink)}
html.kx-a.dark .empty-state{color:var(--muted)}
html.kx-a.dark .card p{color:var(--ink-2)}
html.kx-a.dark .empty-state h3{color:var(--ink-2)}
html.kx-a.dark .curly{color:var(--gold)}

/* ---------------------------------------------------------------- 9. docs */
html.kx-a.dark .docs-sidebar{background:var(--surface);border-right-color:var(--line);scrollbar-color:var(--surface-4) var(--surface)}
html.kx-a.dark .docs-sidebar::-webkit-scrollbar-track{background:var(--surface)}
html.kx-a.dark .docs-sidebar::-webkit-scrollbar-thumb{background:var(--surface-4)}
html.kx-a.dark .sidebar-header{color:var(--muted-2)}
html.kx-a.dark .sidebar-group-title{color:var(--muted-2)}
html.kx-a.dark .sidebar-link{color:var(--ink-2)}
html.kx-a.dark .sidebar-link:hover{color:var(--ink);background:rgba(255,255,255,.04)}
html.kx-a.dark .sidebar-link.active{color:var(--gold);border-left-color:var(--gold);background:rgba(245,196,81,.07)}
html.kx-a.dark .docs-main{background:transparent}
html.kx-a.dark .docs-menu-toggle{border:1px solid var(--line-2);color:var(--ink-2);background:var(--surface-2);border-radius:10px}
html.kx-a.dark .doc-section h1,html.kx-a.dark .doc-section h2{color:var(--ink)}
html.kx-a.dark .doc-section h3{color:var(--ink-2)}
html.kx-a.dark .doc-lead{color:var(--ink-2)}
html.kx-a.dark .doc-section p{color:var(--ink-2)}
html.kx-a.dark .doc-section ul,html.kx-a.dark .doc-section ol{color:var(--ink-2)}
html.kx-a.dark .doc-section a{color:var(--gold)}
html.kx-a.dark .doc-section a:hover{color:#ffd98a}
html.kx-a.dark .doc-divider{border-top-color:var(--line)}
html.kx-a.dark .code-block{background:#0a0e16;border-color:var(--line);border-radius:var(--r-sm)}
html.kx-a.dark .code-header{background:rgba(255,255,255,.03);border-bottom-color:var(--line)}
html.kx-a.dark .code-header span{color:var(--muted)}
html.kx-a.dark .copy-btn{background:rgba(255,255,255,.06);border-color:var(--line-2);color:var(--ink-2)}
html.kx-a.dark .copy-btn:hover{background:rgba(255,255,255,.1);color:var(--ink)}
html.kx-a.dark .code-block code{color:var(--ink)}
html.kx-a.dark .doc-section code:not(.code-block code){background:rgba(245,196,81,.12);border-color:rgba(245,196,81,.2);color:var(--gold)}
html.kx-a.dark .doc-table{border-color:var(--line)}
html.kx-a.dark .doc-table th{background:rgba(255,255,255,.04);color:var(--ink-2);border-bottom-color:var(--line)}
html.kx-a.dark .doc-table td{color:var(--ink-2);border-bottom-color:rgba(255,255,255,.04)}
html.kx-a.dark .doc-table td strong{color:var(--ink)}
html.kx-a.dark .doc-table td code{background:rgba(245,196,81,.12);border-color:rgba(245,196,81,.2);color:var(--gold)}
html.kx-a.dark .callout-info,html.kx-a.dark .info-box{background:rgba(74,158,255,.08);border-color:rgba(74,158,255,.2);color:var(--ink-2)}
html.kx-a.dark .callout-info strong,html.kx-a.dark .info-box strong{color:var(--blue)}
html.kx-a.dark .callout-warning,html.kx-a.dark .warning-box{background:rgba(255,180,84,.08);border-color:rgba(255,180,84,.2);color:var(--ink-2)}
html.kx-a.dark .callout-warning strong,html.kx-a.dark .warning-box strong{color:var(--amber)}
html.kx-a.dark .tip-box{background:rgba(74,222,128,.07);border-color:rgba(74,222,128,.18);color:var(--ink-2)}
html.kx-a.dark .doc-step{background:var(--surface-2);border-color:var(--line)}
html.kx-a.dark .doc-step-num{background:rgba(245,196,81,.14);color:var(--gold)}
html.kx-a.dark .doc-step-content h3{color:var(--ink)}
html.kx-a.dark .doc-screenshot{border-color:var(--line);box-shadow:0 12px 40px -22px rgba(0,0,0,.85)}
html.kx-a.dark .doc-screenshot-caption{background:rgba(255,255,255,.03);border-top-color:var(--line);color:var(--muted)}
html.kx-a.dark .callout{border-radius:var(--r-sm)}
html.kx-a.dark .troubleshoot-item{border-color:var(--line);background:var(--surface-2)}

/* ----------------------------------------------------------- 10. thank-you */
html.kx-a.dark .thankyou-wrap{background:
  radial-gradient(ellipse 80% 60% at 50% 0%, rgba(245,196,81,.10), transparent),
  radial-gradient(ellipse 60% 50% at 80% 20%, rgba(74,158,255,.06), transparent)}
html.kx-a.dark .thankyou-card h1{color:var(--ink)}
html.kx-a.dark .thankyou-card .lead{color:var(--ink-2)}
html.kx-a.dark .thankyou-card .lead strong{color:var(--gold)}
html.kx-a.dark .check-icon{color:var(--green)}
html.kx-a.dark .setup-step{background:var(--surface-2);border-color:var(--line);border-radius:var(--r)}
html.kx-a.dark .step-info h3{color:var(--ink)}
html.kx-a.dark .step-info p{color:var(--ink-2)}
html.kx-a.dark .step-info code{background:rgba(245,196,81,.12);border-color:rgba(245,196,81,.2);color:var(--gold)}
html.kx-a.dark .install-cmd{background:#0a0e16;border-color:var(--line);border-radius:var(--r-sm)}
html.kx-a.dark .install-cmd-header{background:rgba(255,255,255,.03);border-bottom-color:var(--line)}
html.kx-a.dark .install-cmd-header span{color:var(--muted)}
html.kx-a.dark .copy-btn{background:rgba(255,255,255,.06);border-color:var(--line-2);color:var(--ink-2)}
html.kx-a.dark .copy-btn:hover{background:rgba(255,255,255,.1);color:var(--ink)}
html.kx-a.dark .install-cmd code{color:var(--ink)}
html.kx-a.dark .key-placeholder{color:var(--gold)}
html.kx-a.dark .note-box{background:rgba(255,180,84,.08);border-color:rgba(255,180,84,.2);color:var(--ink-2)}
html.kx-a.dark .note-box strong,html.kx-a.dark .note-box code{color:var(--amber)}
html.kx-a.dark .spec-tag{background:rgba(245,196,81,.14);border-color:rgba(245,196,81,.26);color:var(--gold)}
html.kx-a.dark .specs span{color:var(--ink-2)}
html.kx-a.dark #licenseDetails .setup-step{background:linear-gradient(135deg,rgba(245,196,81,.10),rgba(74,158,255,.10));
  border-color:rgba(245,196,81,.28)}
html.kx-a.dark #licenseDetails span[style*="color:#0f172a"]{color:var(--ink) !important}
html.kx-a.dark #licenseDetails div[style*="background:rgba(255,255,255,0.5)"]{background:rgba(255,255,255,.05) !important}

/* ------------------------------------------- 11. cloud pages (var-driven) */
/* cloud.html / cloud-checkout.html / cloud-thank-you.html already ship a
   dark, gold-accented token set. Retargeting the tokens below moves them onto
   the Direction A palette without touching their markup or their JS. */
html.kx-a.dark .hero-bg{background:
  radial-gradient(ellipse 70% 60% at 50% 0%, rgba(245,196,81,.12), transparent 70%),
  radial-gradient(ellipse 50% 50% at 80% 20%, rgba(74,158,255,.07), transparent 70%)}
html.kx-a.dark .cloud-badge{background:rgba(245,196,81,.10);border-color:rgba(245,196,81,.3);color:var(--gold)}
html.kx-a.dark .feature-card{border-radius:var(--r)}
html.kx-a.dark .feature-num{color:var(--gold)}
html.kx-a.dark .price-card{border-radius:var(--r)}
html.kx-a.dark .price-card.featured{border-color:var(--gold)}
html.kx-a.dark .price-btn,html.kx-a.dark .btn-solid{background:var(--gold);color:var(--gold-ink);border-radius:10px}
html.kx-a.dark .price-btn:hover,html.kx-a.dark .btn-solid:hover{background:#ffd06a}
html.kx-a.dark .btn-hero{background:var(--gold);color:var(--gold-ink);border-radius:10px}
html.kx-a.dark .hero-stat-num{font-family:var(--font-d);color:var(--ink)}
html.kx-a.dark .hero-stat-label{color:var(--ink-2)}
html.kx-a.dark .dashboard-preview,html.kx-a.dark .dashboard-container{border-radius:var(--r-lg);border-color:var(--line)}
html.kx-a.dark .hiw-step-num,html.kx-a.dark .step-num{background:rgba(245,196,81,.14);color:var(--gold)}
html.kx-a.dark .cta-section{background:var(--surface)}
html.kx-a.dark .comp-card,html.kx-a.dark .comparison-grid > *{border-radius:var(--r)}
html.kx-a.dark .plan-free{color:var(--green)}
html.kx-a.dark .plan-price .amount,html.kx-a.dark .plan-price{font-family:var(--font-d)}
/* the cloud pages still carry the previous gold as literal rgba(200,164,110,…) */
html.kx-a.dark .plan,html.kx-a.dark .region{border-radius:var(--r-sm)}
html.kx-a.dark .plan.selected,html.kx-a.dark .region.selected{background:rgba(245,196,81,.07);border-color:var(--gold)}
html.kx-a.dark .btn:hover{box-shadow:0 10px 30px -14px rgba(245,196,81,.55)}
html.kx-a.dark .btn:disabled{opacity:.55}
html.kx-a.dark .cloud-badge{background:rgba(245,196,81,.12);border-color:rgba(245,196,81,.32)}
/* The consent banner is fixed to the bottom edge and its height varies with the
   viewport (97px at 1440, 180px at 320). Reserve at least its height per
   breakpoint so no content is ever trapped underneath it at maximum scroll. */
html.kx-a.dark body:has(#gdprBanner){padding-bottom:108px}
@media (max-width:1024px){html.kx-a.dark body:has(#gdprBanner){padding-bottom:130px}}
@media (max-width:600px){html.kx-a.dark body:has(#gdprBanner){padding-bottom:150px}}
@media (max-width:414px){html.kx-a.dark body:has(#gdprBanner){padding-bottom:172px}}
@media (max-width:360px){html.kx-a.dark body:has(#gdprBanner){padding-bottom:196px}}
/* the promo strip is fixed under the fixed header; at narrow widths it wraps to
   two lines and used to overlap the top of the hero (110px < 64px + wrapped strip) */
@media (max-width:768px){
  html.kx-a.dark body:has(.promo-banner:not(.hidden)) .hero{padding-top:150px}
}
@media (max-width:480px){
  html.kx-a.dark body:has(.promo-banner:not(.hidden)) .hero{padding-top:170px}
}
html.kx-a.dark .region-extra{color:var(--muted)}
html.kx-a.dark .region.selected,html.kx-a.dark .plan.selected{border-color:var(--gold);background:rgba(245,196,81,.08)}
html.kx-a.dark .summary{border-radius:var(--r)}
html.kx-a.dark .summary-row .total,html.kx-a.dark .total .value{color:var(--gold);font-family:var(--font-d)}
html.kx-a.dark .email-input{background:#0a0e16;border-color:var(--line-2);color:var(--ink);border-radius:var(--r-sm)}
html.kx-a.dark .email-input:focus{border-color:var(--gold)}
html.kx-a.dark .page-header h1{color:var(--ink)}
html.kx-a.dark .trust{color:var(--muted)}
html.kx-a.dark .step-active .step-icon{color:var(--gold)}
html.kx-a.dark .step-active .step-text{color:var(--ink)}
html.kx-a.dark .step-pending .step-icon,html.kx-a.dark .step-pending .step-text{color:var(--muted-2)}
html.kx-a.dark .elapsed{color:var(--ink-2)}
html.kx-a.dark .url{color:var(--gold)}

/* -------------------------------------------------------------- 12. terms */
html.kx-a.dark .legal-hero{background:linear-gradient(180deg,#080d16 0%,var(--bg) 100%);text-align:left;padding:64px 24px 26px;max-width:900px;margin:0 auto}
html.kx-a.dark .legal-hero h1{color:var(--ink)}
html.kx-a.dark .legal-hero p{color:var(--ink-2)}
html.kx-a.dark .legal-content{max-width:900px}
html.kx-a.dark .legal-content h2{color:var(--ink);margin-top:38px}
html.kx-a.dark .legal-content h3{color:var(--ink-2)}
html.kx-a.dark .legal-content p{color:var(--ink-2)}
html.kx-a.dark .legal-content ul,html.kx-a.dark .legal-content ol{color:var(--ink-2)}
html.kx-a.dark .legal-content strong{color:var(--ink)}
html.kx-a.dark .legal-content a{color:var(--gold)}
html.kx-a.dark .legal-content table{border-color:var(--line)}
html.kx-a.dark .legal-content th{background:rgba(255,255,255,.04);color:var(--ink-2)}
html.kx-a.dark .legal-content td{color:var(--ink-2);border-color:var(--line)}

/* ------------------------------------------- 12b. shared / injected footer */
html.kx-a.dark .footer{padding:38px 0}
html.kx-a.dark .footer-links{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;justify-content:center}
html.kx-a.dark .footer-copy{color:var(--muted-2);font-size:.78rem;margin-top:14px;text-align:center}
html.kx-a.dark .footer > p{color:var(--muted-2);font-size:.78rem;text-align:center;margin-top:12px}
html.kx-a.dark .footer .container{padding:0 24px;max-width:1180px;margin:0 auto}

/* --------------------------------------------------------- 13. misc / a11y */
/* Some brand marks, badges and the consent banner are styled inline in the
   production markup (inline declarations outrank a plain stylesheet rule), so
   they need pinning. Attribute selectors are used instead of !important on
   whole components so nothing else is affected. */
html.kx-a.dark [style*="color:#6366f1"],html.kx-a.dark [style*="color: #6366f1"]{color:var(--gold) !important}
html.kx-a.dark [style*="color:#818cf8"],html.kx-a.dark [style*="color: #818cf8"]{color:var(--gold) !important}
html.kx-a.dark [style*="color:#a5b4fc"]{color:var(--gold) !important}
html.kx-a.dark [style*="color:#60a5fa"]{color:var(--blue) !important}
html.kx-a.dark [style*="background:#eff6ff"],html.kx-a.dark [style*="background: #eff6ff"]{
  background:rgba(245,196,81,.12) !important; color:var(--gold) !important; border-color:rgba(245,196,81,.28) !important}
html.kx-a.dark [style*="background:linear-gradient(135deg,#3b82f6"],
html.kx-a.dark [style*="background: linear-gradient(135deg, #3b82f6"]{
  background:linear-gradient(135deg,var(--gold),var(--gold-deep)) !important; color:var(--gold-ink) !important}
html.kx-a.dark .plan-option.selected .plan-radio::after{background:var(--gold)}
html.kx-a.dark .plan-radio::after{background:var(--gold)}
/* consent banner (inline-styled on every page) */
html.kx-a.dark #gdprBanner{background:var(--surface-2) !important;border-top:1px solid var(--line) !important;
  color:var(--ink-2) !important;font-family:var(--font-b) !important}
html.kx-a.dark #gdprBanner a{color:var(--gold) !important}
html.kx-a.dark #gdprBanner button{font-family:var(--font-b)}
html.kx-a.dark #gdprBanner button[style*="#6366f1"],html.kx-a.dark #gdprBanner button[style*="#c8a46e"]{
  background:var(--gold) !important;color:var(--gold-ink) !important}
html.kx-a.dark .skip-link{background:var(--gold);color:var(--gold-ink)}
html.kx-a.dark img{border-radius:2px}
html.kx-a.dark .footer .logo-text{color:var(--ink-2)}
html.kx-a.dark .logo span:not(.logo-icon){color:var(--muted-2)}

@media (prefers-reduced-motion:reduce){
  html.kx-a.dark *{transition-duration:.01ms !important;animation-duration:.01ms !important;animation-iteration-count:1 !important}
  html.kx-a.dark{scroll-behavior:auto}
}
@media print{
  html.kx-a.dark body{background:#fff;color:#111}
}

/* ------------------------------------ 14. narrow-viewport containment ---- */
/* The live pages have three pre-existing sideways-scroll bugs at phone width
   (a fixed-width docs column, the thank-you card, and two landing sections).
   These rules only constrain widths that already overflow — no layout that
   fits today is altered. */
html.kx-a.dark .docs-layout{max-width:100%}
html.kx-a.dark .docs-main{min-width:0;max-width:100%}
html.kx-a.dark .doc-steps,html.kx-a.dark .doc-step,html.kx-a.dark .doc-step-content{min-width:0}
html.kx-a.dark .code-block,html.kx-a.dark .code-block pre,html.kx-a.dark .doc-table{max-width:100%}
html.kx-a.dark .code-block pre{overflow-x:auto}
html.kx-a.dark .thankyou-wrap .container{width:100%;max-width:100%}
html.kx-a.dark .thankyou-card{width:100%;max-width:680px}
html.kx-a.dark .thankyou-card,html.kx-a.dark .setup-step,html.kx-a.dark .step-info{min-width:0}
html.kx-a.dark .install-cmd,html.kx-a.dark .install-cmd pre{max-width:100%}
html.kx-a.dark .install-cmd pre{overflow-x:auto}
html.kx-a.dark .thankyou-wrap,html.kx-a.dark .docs-layout,html.kx-a.dark .hero,html.kx-a.dark .hero-inner{overflow-x:clip}
/* the live landing page already relies on body overflow-x:hidden; cloud.html
   does not, and its 2-up feature grid is 5px wider than a 390px viewport.
   `clip` (not `hidden`) keeps the sticky header working. */
html.kx-a.dark body{overflow-x:clip}
html.kx-a.dark{overflow-x:clip}
html.kx-a.dark .logo-bar{overflow:hidden;max-width:100%}
@media (max-width:768px){
  /* `.doc-step` / `.setup-step` keep align-items:flex-start from the desktop
     rule, which makes their (now column-direction) children shrink-to-fit
     instead of filling the row — that is what pushed the code blocks off the
     screen. Stretching them is a pure containment fix. */
  html.kx-a.dark .doc-step,html.kx-a.dark .setup-step{align-items:stretch}
  html.kx-a.dark .doc-step-content,html.kx-a.dark .step-info{width:100%;min-width:0}
  html.kx-a.dark .doc-table{font-size:.78rem}
  html.kx-a.dark .doc-table th,html.kx-a.dark .doc-table td{padding:8px 7px}
  html.kx-a.dark .logo-carousel{max-width:100%;overflow:hidden}
  html.kx-a.dark .showcase-item,html.kx-a.dark .showcase-visual{min-width:0;max-width:100%}
}