/* ------------------------------
   LANGUAGE SWITCHER
------------------------------ */
.language-switcher {
  position: relative;
  display: inline-block;
}

.language-switcher.loading {
  opacity: 0.7;
  pointer-events: none;
}

.language-switcher.loading .loading-text {
  display: block !important;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--surface);
  color: var(--text);
  padding: 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  text-align: center;
  z-index: 10;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.language-switcher select {
  min-width: 120px;
}

.language-switcher select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Header responsive fixes */

.nav-right .btn {
  white-space: nowrap;
  min-width: auto;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
}

/* Language and theme selectors */
#languageSwitch, #themeSwitch {
  font-family: inherit;
  font-size: 0.875rem;
  min-width: 100px;
}

/* Mobile responsive header */
@media (max-width: 1200px) {
  .nav-right {
    gap: 0.45rem;
  }
  
  .nav-right .btn {
    padding: 0.375rem 0.75rem;
    font-size: 0.8rem;
  }
  
  #languageSwitch, #themeSwitch {
    min-width: 80px;
    font-size: 0.8rem;
  }
}

@media (max-width: 1000px) {
  .nav-right {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  
  .nav-links {
    order: 1;
    width: 100%;
    margin-bottom: 0.5rem;
  }
  
  .nav-right .btn {
    margin: 0.125rem;
  }
}

/* Mobile language switcher */
@media (max-width: 820px) {
  .language-switcher {
    width: 100%;
  }
  
  .language-switcher select {
    width: 100%;
  }
}

/* ------------------------------
   THEME (CSS variables)
------------------------------ */
/* Dark theme (default when no class): warm charcoal + gold brand to match the logo */
:root, .theme-dark {
  --bg:#12100d; --bg-elev:#181512; --surface:#1d1915; --text:#ece7df; --muted:#a39a8d;
  --card:#211c17; --border:#332d25;
  --brand:#c9a227; --brand-600:#b58900; --brand-700:#8b6c00;
  --brand-25a:rgba(201,162,39,0.25); --ring:rgba(201,162,39,0.35);
  --brand-bg:rgba(201,162,39,0.07);
  --story-accent:#e5b84c;
}

/* Light theme */
.theme-light {
  --bg: #FAFAFA; /* Soft beige background */
  --bg-elev: #f5f5dc;
  --surface: #FAFAFA;
  --text: #586e75;
  --muted: #93a1a1;
  --card: #ffffff;
  --border: #d3c4a1;
  --brand: #b58900; /* Harmonized brand color */
  --brand-600: #a57c00;
  --brand-700: #8b6c00;
  --brand-25a: rgba(181,137,0,0.25);
  --ring: rgba(181,137,0,0.35);
  --brand-bg: rgba(181,137,0,0.07);
  --story-accent: #c89524;
  --button-bg: #f5f5f5; /* Button background */
  --button-border: #d3c4a1; /* Button border */
  --button-text: #333333; /* Button text */
  --header-bg: #ffffff; /* White header */
  --header-text: #333333;
}

/* ------------------------------
   BASE + LAYOUT
------------------------------ */
*{ box-sizing:border-box; }
html,body{ height:100%; }
/* Fixed nav is ~64px; offset in-page anchor jumps so section headings aren't
   cut off underneath it. scroll-behavior gives a gentle glide. */
html{ scroll-padding-top:84px; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji";
  background: radial-gradient(1200px 800px at 75% -200px, var(--brand-bg), rgba(0,0,0,0)), var(--bg);
  color:var(--text);
  line-height:1.55;
  padding-top:64px;
}
a{ color:var(--brand); text-decoration:none; }
a:hover{ text-decoration:underline; }
.container{ width:min(1200px,92vw); margin-inline:auto; }
.section{ padding:5rem 0; }
.section-compact{ padding:3.5rem 0; }
.muted{ color:var(--muted); }

/* ------------------------------
   SHARED UTILITIES
------------------------------ */
.btn, select.btn, .input, .textarea, details{
  background:linear-gradient(180deg, var(--surface), var(--card));
  border:1px solid var(--border);
  border-radius:4px;
}
.btn:hover, .card:hover, .input:hover, .textarea:hover, details:hover, details[open]{
  transform:translateY(-2px);
  /* Exact match: frontend .ui-btn:hover / VaultItemDeck shadow-amber-300 */
  box-shadow:
    0 0 0 1px rgba(252, 211, 77, 0.5),
    0 2px 4px rgba(252, 211, 77, 0.4),
    0 4px 8px rgba(252, 211, 77, 0.3),
    0 8px 16px rgba(252, 211, 77, 0.2);
  border-color:var(--brand);
}

/* Keep expanded cards highlighted */
.card[data-expand] .btn[data-toggle].expanded {
  background: var(--brand);
  color: #0b0c0f;
}

/* Keep expanded cards in highlighted state */
.card[data-expand].expanded {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px var(--brand-25a);
  border-color: var(--brand-600);
}
.input:focus, .textarea:focus, select.btn:focus, summary:focus-visible{
  outline:none; box-shadow:0 0 0 3px var(--ring); border-color:var(--brand-600);
}
.card, .hero-cards{
  background:linear-gradient(180deg, var(--surface), var(--card));
  border-radius:16px;
}

/* ------------------------------
   NAVBAR
------------------------------ */
.nav{
  position:fixed; inset:0 auto auto 0; right:0; z-index:50;
  backdrop-filter:saturate(120%) blur(8px);
  background:linear-gradient(to bottom, rgba(11,12,15,0.85), rgba(11,12,15,0.35));
  border-bottom:1px solid var(--border);
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.9rem 0; }
.brand{ display:flex; align-items:center; gap:.75rem; font-weight:700; letter-spacing:.2px; }
.brand span{ font-size:clamp(1rem,1.2vw,1.1rem); line-height:1; }

/* The shield opens the logo modal, the wordmark goes home: two separate
   NATIVE controls. Previously both lived in one <a>, with the shield an
   <img role="button" tabindex="0"> nested inside the link - invalid (a link
   must not contain another interactive control) and reliant on a hand-written
   Enter/Space handler. A real <button> gets keyboard activation from the
   browser. .brand keeps the flex layout, so nothing moves. */
.brand-logo-button {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  line-height: 0;
  cursor: pointer;
}

.brand-home {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.brand-logo-button:focus-visible,
.brand-home:focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 4px;
  border-radius: 6px;
}
.ui-logo{ height:2.75rem; width:auto; display:block; cursor:pointer; }
.ui-logo-shield{ height:3.15rem; width:auto; display:block; cursor:pointer; }

/* Logo modal - copied from app primitives.css (.ui-logo-modal-*), mapped to landing vars. */
.ui-logo-modal-overlay{
  position:fixed; inset:0; background-color:rgba(0,0,0,0.5);
  display:flex; align-items:center; justify-content:center; z-index:9999;
}
.ui-logo-modal-overlay[hidden]{ display:none; }
.ui-logo-modal-content{ display:flex; align-items:center; justify-content:center; padding:2rem; }
.ui-logo-panel{
  position:relative; padding:1.25rem 1.4rem; border-radius:20px; border:1px solid var(--border);
  background: radial-gradient(120% 140% at 10% 0%, rgba(255,255,255,0.06), rgba(0,0,0,0)),
    linear-gradient(180deg, var(--surface), var(--card));
  box-shadow:0 0 0 1px rgba(255,255,255,0.02) inset; transition:transform .2s, box-shadow .25s;
}
.ui-logo-panel::after{
  content:""; position:absolute; inset:0; border-radius:20px; pointer-events:none;
  background:linear-gradient(35deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.10) 22%, rgba(0,0,0,0) 48%, rgba(0,0,0,0) 72%);
  mix-blend-mode:screen;
}
.ui-logo-panel img{ display:block; max-width:min(440px,80vw); height:auto; width:auto; border-radius:12px; }
.ui-logo-panel:hover{
  transform:translateY(-2px);
  box-shadow:0 20px 44px var(--brand-25a), 0 0 16px var(--brand-bg), 0 0 0 1px rgba(255,255,255,0.02) inset;
}
.nav-right{ 
  display:flex; 
  align-items:center; 
  gap:.45rem; 
  flex-wrap: wrap;
  justify-content: flex-end;
}


.theme-light .nav {
  background: #f5f5f5 !important; /* White background for light theme */
  color: var(--header-text);
}

/* ------------------------------
   BUTTONS
------------------------------ */
.btn{
  appearance:none; color:var(--text);
  padding:.7rem 1rem; font-weight:normal; letter-spacing:.2px; cursor:pointer;
  transition:transform .15s, box-shadow .2s, border-color .2s;
  box-shadow:0 0 0 0 var(--ring);
}
.btn:active{ transform:translateY(0); }
.btn-primary {
  background: linear-gradient(180deg, var(--brand), var(--brand-600));
  border-color: var(--brand-700);
}
.btn-primary:hover{ box-shadow:0 12px 28px var(--brand-25a), 0 0 0 3px var(--ring); }
.btn-ghost{ background:transparent; }
select.btn option{ background:var(--surface); color:var(--text); }

/* ------------------------------
   CARDS + GRID
------------------------------ */
/* margin-bottom used to sit in a second, separate `.card` rule further up the
   file (Sonar css:S4666, duplicate selector). The two rules set disjoint
   properties and nothing between them targets a plain `.card`, so folding them
   together changes no computed style. */
.card{ border:1px solid var(--border); padding:1.25rem; height:100%; margin-bottom:1.5rem; transition:transform .15s, box-shadow .25s, border-color .2s; }
.grid{ display:grid; gap:1rem; }
.grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:980px){ .grid-3{ grid-template-columns:1fr 1fr; } }
@media (max-width:700px){ .grid-3, .grid-2{ grid-template-columns:1fr; } }

/* ------------------------------
   HERO + MOSAIC
------------------------------ */
.hero{ padding:6.5rem 0 4.5rem; display:grid; grid-template-columns:1.1fr .9fr; gap:2rem; align-items:start; }
@media (max-width:980px){ .hero{ grid-template-columns:1fr; } }
.hero-right{ display:flex; justify-content:center; align-items:flex-start; }

/* Logo panel with soft theme glow (only on hover) */
.logo-panel{
  position:relative; padding:1.25rem 1.4rem; border-radius:20px; border:1px solid var(--border);
  background: radial-gradient(120% 140% at 10% 0%, rgba(255,255,255,0.06), rgba(0,0,0,0)),
              linear-gradient(180deg, var(--surface), var(--card));
  box-shadow: 0 0 0 1px rgba(255,255,255,0.02) inset;
  transition:transform .2s, box-shadow .25s;
}
.logo-panel::after{
  content:""; position:absolute; inset:0; border-radius:20px; pointer-events:none;
  background: linear-gradient(35deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.10) 22%, rgba(0,0,0,0) 48%, rgba(0,0,0,0) 72%);
  mix-blend-mode:screen;
}
.logo-panel img{ display:block; max-width:min(440px,80vw); height:auto; }
.logo-panel:hover{ 
  transform:translateY(-2px); 
  box-shadow:0 20px 44px var(--brand-25a), 0 0 16px var(--ring), 0 0 0 1px rgba(255,255,255,0.02) inset;
}
.logo-panel:hover::after{
  background: linear-gradient(35deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.10) 22%, var(--brand-25a) 48%, rgba(0,0,0,0) 72%);
}

/* Hero cards panel */
.hero-cards{
  margin-top:1rem; position:relative; height:230px; overflow:hidden; border:1px dashed var(--border);
  padding:.6rem;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(180deg, var(--surface), var(--card));
  transition:box-shadow .25s;
}
.hero-cards:hover{
  box-shadow:0 12px 28px var(--brand-25a);
  background: radial-gradient(400px 200px at 80% 0%, var(--brand-25a), rgba(0,0,0,0)),
              linear-gradient(180deg, var(--surface), var(--card));
}

/* Mosaic demo cards */
.mosaic{ position:relative; width:100%; height:130px; margin:10px auto; }
.demo-card{
  position:absolute; width:180px; border-radius:14px; padding:.9rem;

  /* Greyer silver base + theme glow (always on) */
  background: linear-gradient(160deg, #d0d0d0 0%, #a8a8a8 45%, #7f7f7f 100%);
  border: 1px solid rgba(120,120,120,0.9);
  box-shadow:
    0 6px 16px rgba(0,0,0,0.35),
    inset 0 1px 2px rgba(255,255,255,0.4),
    0 0 18px var(--brand-25a),
    0 0 28px var(--brand-25a),
    inset 0 0 12px var(--brand-25a);

  color:#222;
}
.demo-card h3{ color:#1f1f1f; margin-top:.5rem; }
.demo-card p{ color:#2b2b2b; }
.demo-card .muted, .demo-card .tag{ color:#3a3a3a; }

/* Positions */
.demo-card.m1{ left:0; top:12px; transform:rotate(-8deg); z-index:1; }
.demo-card.m2{ left:120px; top:40px; transform:rotate(3deg); z-index:2; }
.demo-card.m3{ left:260px; top:-6px; transform:rotate(11deg); z-index:3; }

/* ------------------------------
   STEPS / PRICING / FAQ / FORMS
------------------------------ */
.step{ display:flex; gap:.9rem; align-items:flex-start; }
.step .n{ width:2rem; height:2rem; border-radius:8px; display:grid; place-items:center; font-weight:700; color:#0b0c0f; background:var(--brand); }
.price{ font-size:2.2rem; font-weight:800; }
.plan li{ display:flex; gap:.5rem; align-items:flex-start; margin:.25rem 0; }
.tick{ margin-top:.22rem; width:1rem; height:1rem; border-radius:3px; background:var(--brand); display:inline-block; }

details{ padding:.8rem 1rem; transition:transform .15s, box-shadow .25s, border-color .2s; }
summary{ cursor:pointer; font-weight:700; }
details + details{ margin-top:.6rem; }

.label{ display:block; font-weight:600; margin-bottom:.35rem; }
.form-grid{ display:grid; gap:.9rem; }
.input,.textarea{ width:100%; font:inherit; color:var(--text); padding:.65rem .85rem; transition:box-shadow .2s, border-color .2s, transform .15s; }
.textarea{ min-height:140px; resize:vertical; }

/* ------------------------------
   FOOTER + HELPERS
------------------------------ */
footer{ border-top:3.5px solid color-mix(in srgb, var(--story-accent, var(--brand)) 55%, var(--border)); padding:2rem 0; color:var(--muted); }
.row{ display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; }
.spacer{ height:1rem; }
.pill{ 
  border:1px solid var(--border); 
  padding:.25rem .6rem; 
  border-radius:4px !important; 
  font-size: 0.875rem;
  transition:transform .15s, box-shadow .2s, border-color .2s;
  text-decoration: none;
  color: var(--text);
  display: inline-block;
}
.pill:hover{ 
  transform: translateY(-1px);
  box-shadow:0 12px 28px var(--brand-25a);
  border-color: var(--brand-600);
}
.bar-tag{
  position:relative; display:inline-block; color:var(--text);
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.06) 15%, rgba(255,255,255,0.06) 85%, rgba(255,255,255,0) 100%);
  border-top: 1px solid rgba(var(--brand), 0.5);
  border-bottom: 1px solid rgba(var(--brand), 0.5);
  padding: 0.2rem 0.6rem;
  margin: 0.2rem;
}
/* The end bars are switched off; the geometry is kept so the decoration can be
   restored by deleting one line. The `display:none` used to live in a NESTED
   `&::before, &::after` block inside .bar-tag, which meant browsers without CSS
   nesting support showed the bars while modern ones hid them. Folding it into
   this rule removes the duplicate selector and makes every browser agree. */
.bar-tag::before,.bar-tag::after{
  content:""; display:none; position:absolute; top:6px; bottom:6px; width:2px;
  background:linear-gradient(180deg, var(--brand), var(--brand-600)); opacity:.6; filter:blur(.2px);
}
.bar-tag::before{ left:6px; } .bar-tag::after{ right:6px; }
.center{ text-align:center; }


/* Mobile header */
.menu-btn {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface), var(--card));
  border-radius: 10px;
  padding: 0.55rem;
  gap: 4px;
  cursor: pointer;
}
.menu-btn span { display:block; width:22px; height:2px; background:var(--text); }
@media (max-width: 820px){
  .nav-right { display:none; }        /* hide desktop actions */
  .menu-btn { display:flex; flex-direction:column; }
}
@media (min-width: 821px) {
  .menu-btn { display: none; } /* hide mobile menu button in wide mode */
}

/* Drawer */
.menu-drawer{
  position: relative;
  border: 1px solid var(--brand);
  border-top: none;
  background: var(--surface);
  padding: 1.25rem;
  margin: 0 8px;
  border-radius: 0 0 16px 16px;
  /* Solid background with brand-colored glow */
  box-shadow: 
    0 8px 24px rgba(0,0,0,0.5),
    0 0 20px var(--brand-25a),
    inset 0 1px 2px rgba(255,255,255,0.05);
}

/* Add subtle gradient overlay */
.menu-drawer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    var(--surface) 0%,
    var(--card) 100%
  );
  border-radius: 0 0 16px 16px;
  z-index: -1;
}
.menu-drawer .pill{ display:inline-block; margin:.25rem .25rem .25rem 0; }
.menu-drawer .row {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.menu-drawer .btn{ width:100%; }

/* Ensure content clears fixed header on small screens too */
@media (max-width: 820px){
  body { padding-top: 64px; }
}

/* Navigation responsive wrapping */
@media (max-width: 1200px) {
  .nav-links {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  
  .nav-right {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}

/* Force navigation to wrap instead of overflow */
@media (max-width: 1400px) {
  .nav-links {
    flex-wrap: wrap;
    max-width: 100%;
  }
  
  .nav-right {
    flex-wrap: wrap;
    max-width: 100%;
  }
}

/* Improve tap targets */
.btn, .pill, select.btn { min-height: 42px; }

.theme-light .btn-primary {
  background: var(--button-bg);
  border: 1px solid var(--button-border);
  color: var(--button-text);
}

/* Nav Login — same amber stack as app .ui-btn:hover */
.btn-nav-login {
  font-weight: 600 !important;
  border-color: var(--brand) !important;
  box-shadow: none;
}
.btn-nav-login:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(252, 211, 77, 0.5),
    0 2px 4px rgba(252, 211, 77, 0.4),
    0 4px 8px rgba(252, 211, 77, 0.3),
    0 8px 16px rgba(252, 211, 77, 0.2);
}
.theme-light .btn-nav-login {
  background: var(--button-bg);
  border-color: var(--button-border) !important;
  color: var(--button-text) !important;
}
.theme-light .btn-nav-login:hover {
  border-color: var(--brand) !important;
}

.btn:focus-visible,
select.btn:focus-visible,
.pill:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 1px rgba(252, 211, 77, 0.5),
    0 2px 4px rgba(252, 211, 77, 0.4),
    0 4px 8px rgba(252, 211, 77, 0.3),
    0 8px 16px rgba(252, 211, 77, 0.2);
}

.btn-ghost:hover,
.btn:hover {
  border-color: var(--brand);
}

.theme-light .demo-card {
  background: #f0f0f0; /* Lighter background for light theme */
}

/* === Inline CSS migration (generated) === */
.kv-a-f5ddf1 {
  border: 1px solid var(--border);
  border-radius: 4px !important;
  color: var(--text);
  display: inline-block;
  font-size: 0.875rem !important;
  padding: 0.25rem 0.6rem;
  text-decoration: none;
}

.kv-div-a6cb65 {
  margin-top: 1rem;
}

.kv-a-e6e3ed {
  border-radius: 4px !important;
  color: var(--text) !important;
  font-size: 0.875rem !important;
  font-weight: normal !important;
  text-align: center !important;
}

.kv-select-0b82da {
  background: var(--surface) !important;
  border-radius: 4px !important;
  color: var(--text) !important;
  font-size: 0.875rem !important;
  font-weight: normal !important;
}

.kv-div-5790ff {
  display: none;
}

.kv-label-8038f9 {
  margin-top: .75rem;
}

.kv-label-fa3dc7 {
  margin-right: 16px;
}

.kv-div-40cb37 {
  justify-content: space-between;
}

.kv-div-5d437d {
  justify-content: center;
  margin-top: 1rem;
}

.kv-div-8038f9 {
  margin-top: .75rem;
}

.kv-div-8545ea {
  margin: 1rem 0;
}

.kv-span-5bfb9e {
  font-size: 1rem;
  font-weight: 600;
}

.kv-div-8038p2 {
  margin-top: 1rem;
}


/* ==================================================
   LANDING COMPONENTS (index.html) - bridges onto KV vars
   ================================================== */
:root{
  --ink:var(--text);
  --brand-strong:var(--brand-700);
  --brand-soft:var(--brand-bg);
  --border-strong:var(--border);
  --radius:12px;
  --shadow:0 1px 2px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.10);
}
.section-head{max-width:640px;margin-bottom:44px}
.eyebrow{color:var(--brand);font-weight:700;text-transform:uppercase;font-size:.78rem;letter-spacing:.12em;margin-bottom:10px}
.kicker{display:inline-block;color:var(--brand);background:var(--brand-soft);border:1px solid var(--border);border-radius:99px;padding:5px 14px;font-size:.8rem;font-weight:700;margin-bottom:20px}
.landing h1{font-size:clamp(2.1rem,4.6vw,3.15rem);line-height:1.12;letter-spacing:-.028em;font-weight:800;margin:0 0 18px}
.landing h1 .u{box-shadow:inset 0 -0.32em 0 var(--brand-soft)}
.landing h2{font-size:clamp(1.55rem,3.2vw,2.15rem);letter-spacing:-.02em;font-weight:800;margin:0 0 12px}
.landing h3{font-size:1.08rem;font-weight:700;margin:0 0 8px}
.landing section{padding:72px 0}
.landing section.alt{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.lede,.sub{color:var(--muted);font-size:1.09rem}
.sub{max-width:520px;margin-bottom:30px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding:40px 0 0}
@media (max-width:880px){ .hero-grid{grid-template-columns:1fr} }
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:22px}
.assurance{color:var(--muted);font-size:.88rem;display:flex;gap:18px;flex-wrap:wrap}
.assurance span::before{content:"- ";color:var(--brand)}
.vault-demo{background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:22px;display:flex;flex-direction:column;gap:12px}
.vault-demo .panel-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:12px;border-bottom:1px solid var(--border)}
.vault-demo .panel-head b{font-size:.95rem}
.vault-demo .panel-head .lock{font-size:.78rem;color:var(--brand);font-weight:700}
.vault-demo .demo-card{position:static;width:auto;transform:none;background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:14px 16px;display:flex;justify-content:space-between;align-items:center;gap:12px;box-shadow:none;color:var(--text)}
.vault-demo .demo-card .t{font-size:.72rem;font-weight:700;color:var(--brand);text-transform:uppercase;letter-spacing:.06em}
.vault-demo .demo-card h4{font-size:.98rem;font-weight:650;margin:2px 0 0}
.vault-demo .demo-card .who{font-size:.8rem;color:var(--muted);text-align:right;line-height:1.4}
.vault-demo .demo-card .who b{color:var(--text);font-weight:600}
.demo-note{font-size:.8rem;color:var(--muted);text-align:center;padding-top:4px}
.landing .glyph{width:40px;height:40px;border-radius:10px;background:var(--brand-soft);color:var(--brand);display:flex;align-items:center;justify-content:center;font-size:1.15rem;margin-bottom:16px;border:1px solid var(--border)}
.landing .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;counter-reset:s}
.landing .steps .step{display:block;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:26px;position:relative}
.landing .steps .step::before{counter-increment:s;content:counter(s,decimal-leading-zero);font-size:.8rem;font-weight:800;color:var(--brand);letter-spacing:.08em;display:block;margin-bottom:12px}
.security-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:820px){ .security-grid{grid-template-columns:1fr} }
.sec-main{grid-column:1 / -1}
.exception{border-left:3px solid var(--brand)}
.exception .tag{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--brand);margin-bottom:10px}
.price-card{display:flex;flex-direction:column;position:relative}
.price-card .tier{font-weight:700}
.price-card .amount{font-size:2.1rem;font-weight:800;letter-spacing:-.02em;margin:8px 0 0}
.price-card .amount small{font-size:.9rem;color:var(--muted);font-weight:500}
.price-card ul{list-style:none;margin:20px 0 26px;padding:0;flex:1}
.price-card li{padding:5px 0;color:var(--muted);font-size:.94rem}
.price-card li::before{content:"·";color:var(--brand);font-weight:800;margin-right:9px;font-size:1.2rem}
.featured{border-color:var(--brand);box-shadow:var(--shadow)}
.featured .flag{position:absolute;top:-11px;left:26px;background:var(--brand);color:#12100d;font-size:.7rem;font-weight:800;letter-spacing:.06em;border-radius:99px;padding:3px 12px}
.price-note{color:var(--muted);font-size:.86rem;margin-top:20px}
.faq{max-width:760px}
.faq details{border:none;border-bottom:1px solid var(--border);border-radius:0;background:none;padding:18px 0}
.faq details:hover,.faq details[open]{transform:none;box-shadow:none;border-color:var(--border)}
.faq summary{cursor:pointer;font-weight:650;font-size:1.01rem;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--brand);font-size:1.3rem;font-weight:400;flex-shrink:0}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--muted);padding-top:10px;font-size:.97rem}
.waitlist-box{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:52px 32px;text-align:center;box-shadow:var(--shadow)}
.waitlist-box .lede{max-width:480px;margin:0 auto}
.waitlist-box form{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.waitlist-box input[type=email]{min-width:280px}
.fine{color:var(--muted);font-size:.83rem;margin-top:14px}

.kv-app-unavailable {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: color-mix(in srgb, #0f172a 48%, transparent);
  backdrop-filter: blur(4px);
}
.kv-app-unavailable[hidden] {
  display: none !important;
}
.kv-app-unavailable-panel {
  width: min(420px, 100%);
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 28px 24px;
  text-align: center;
}
.kv-app-unavailable-panel h2 {
  margin: 0 0 10px;
  font-size: 1.35rem;
}
.kv-app-unavailable-panel p {
  margin: 0 0 22px;
  color: var(--muted);
  line-height: 1.5;
}
.kv-app-unavailable-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: center;
}

/* Product screenshots showcase */
.shots{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
@media (max-width:880px){ .shots{grid-template-columns:1fr} }
.shot{background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.shot img{display:block;width:100%;height:auto}
.shot figcaption{padding:14px 18px;font-size:.9rem;color:var(--muted);border-top:1px solid var(--border)}