/* ═══════════════════════════════════════════════════════════
   Vākio - Product Page Styles
   Requires: design-system.css, components.css
   ═══════════════════════════════════════════════════════════ */

/* ── VAKIO HERO ───────────────────────────────────────────── */
.vk-hero{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;
  align-items:center;padding-top:calc(var(--nav-h) + var(--abar-h));
  position:relative;overflow:hidden;gap:var(--sp-8)}
.vk-hero::before{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 55% 70% at 85% 45%,rgba(0,180,162,.05),transparent);
  pointer-events:none}

.vk-hero-left{padding:var(--sp-16) 0 var(--sp-16) var(--sp-10);position:relative;z-index:2}
.vk-hero-right{display:flex;align-items:center;justify-content:center;
  padding:var(--sp-16) var(--sp-10) var(--sp-16) 0;position:relative;z-index:2}

.vk-wordmark{font-family:var(--font-vakio);font-size:clamp(2.5rem,4vw,3.5rem);font-weight:700;
  color:var(--text-1);line-height:1;margin:0 0 .2rem 0;letter-spacing:-.01em}
.vk-hindi{font-family:var(--font-hindi);font-size:var(--text-sm);font-weight:500;
  color:var(--vk2);letter-spacing:.04em;margin-bottom:.6rem}
.vk-tagline{font-size:var(--text-lead);color:var(--text-2);line-height:1.7;
  max-width:480px;margin-bottom:var(--sp-8)}

/* Compliance diagram hero visual */
.vk-hero-vis{width:340px;display:flex;flex-direction:column;gap:.5rem;flex-shrink:0}
.vk-vis-label{font-size:var(--text-xs);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--vk);margin-bottom:.25rem}
.vk-vis-row{display:flex;align-items:center;gap:.5rem}
.vk-vis-doc{flex:1;background:var(--bg-c);border:1px solid var(--vk-b);border-radius:var(--radius-md);
  padding:.5rem .75rem;font-size:var(--text-xs);color:var(--text-2);display:flex;align-items:center;gap:.4rem}
.vk-vis-doc-icon{font-size:1rem;flex-shrink:0}
.vk-vis-arrow{width:20px;flex-shrink:0;text-align:center;color:var(--vk);font-size:.8rem}
.vk-vis-engine{background:linear-gradient(135deg,var(--vk),var(--vk2));border-radius:var(--radius-lg);
  padding:.65rem var(--sp-4);text-align:center;box-shadow:0 0 28px var(--vk-g);
  animation:engine-pulse 3s ease-in-out infinite;font-size:1.4rem}
@keyframes engine-pulse{0%,100%{box-shadow:0 0 28px var(--vk-g)}50%{box-shadow:0 0 48px rgba(0,180,162,.45)}}
.vk-vis-outputs{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;flex:1}
.vk-vis-out{background:var(--bg-c);border-radius:var(--radius-md);padding:.45rem .6rem;
  font-size:.68rem;font-weight:600;display:flex;align-items:center;gap:.3rem}
.vk-vis-out.vid{border:1px solid rgba(0,180,162,.2);color:var(--vk-l)}
.vk-vis-out.quiz{border:1px solid rgba(196,154,60,.2);color:var(--vk2)}
.vk-vis-out.path{border:1px solid rgba(232,117,106,.15);color:var(--rn-l)}
.vk-vis-out.audit{border:1px solid rgba(201,168,76,.2);color:var(--gold-l)}

/* ── VAKIO TAB CONTENT SECTIONS ───────────────────────────── */
.vk-section{padding:var(--sp-10) 0}

/* Sector grid */
.sector-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4);margin-bottom:2.75rem}
.sector-card{background:var(--bg-c);border:1px solid var(--b1);border-radius:var(--radius-lg);
  padding:1.6rem 1.4rem;display:flex;align-items:flex-start;gap:var(--sp-4);
  transition:transform var(--ease-base),border-color var(--ease-base),box-shadow var(--ease-base)}
.sector-card:hover{transform:translateY(-3px);border-color:var(--vk-b);box-shadow:var(--shadow-vk)}
.sector-icon{font-size:2.2rem;flex-shrink:0;margin-top:.05rem}
.sector-name{font-size:var(--text-base);font-weight:600;color:var(--text-1);margin-bottom:.35rem}
.sector-acts{font-size:var(--text-sm);color:var(--vk-l);line-height:1.55}

/* Act badges */
.acts-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2.75rem}
.act-badge{display:flex;align-items:center;gap:.38rem;background:var(--bg-c);
  border:1px solid var(--vk-b);border-radius:var(--radius-md);
  padding:.42rem .85rem;font-size:.75rem;font-weight:600;color:var(--vk-l);
  transition:all var(--ease-base)}
.act-badge:hover{background:var(--vk-d);box-shadow:0 4px 14px var(--vk-g)}
.act-dot{width:6px;height:6px;background:var(--vk);border-radius:50%;flex-shrink:0}

/* Pipeline */
.pipeline{background:var(--bg-c);border:1px solid var(--b1);border-radius:var(--radius-xl);
  padding:var(--sp-8);margin-bottom:2.75rem;position:relative;overflow:hidden}
.pipeline::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--vk),var(--vk2))}
.pipe-label{font-size:var(--text-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--vk);margin-bottom:1.75rem}
.pipe-flow{display:grid;grid-template-columns:1fr 56px 1fr 56px 1fr;align-items:center}
.pipe-step{text-align:center;padding:var(--sp-4) .5rem}
.pipe-icon{width:72px;height:72px;border-radius:50%;margin:0 auto .85rem;
  display:flex;align-items:center;justify-content:center;font-size:1.8rem;
  transition:transform var(--ease-base)}
.pipe-step:hover .pipe-icon{transform:scale(1.08)}
.pipe-step:nth-child(1) .pipe-icon{background:rgba(0,180,162,.08);border:1px solid var(--vk-b)}
.pipe-step:nth-child(3) .pipe-icon{background:rgba(196,154,60,.08);border:1px solid rgba(196,154,60,.25)}
.pipe-step:nth-child(5) .pipe-icon{background:rgba(0,180,162,.08);border:1px solid var(--vk-b)}
.pipe-title{font-size:var(--text-base);font-weight:600;color:var(--text-1);margin-bottom:.35rem}
.pipe-sub{font-size:var(--text-sm);color:var(--text-2);line-height:1.55}
.pipe-arrow{display:flex;align-items:center;justify-content:center;padding-bottom:1.5rem}
.pipe-arrow svg{width:40px;height:16px;overflow:visible}
.pipe-tags{display:flex;flex-wrap:wrap;gap:.35rem;justify-content:center;margin-top:.5rem}
.pipe-tag{font-size:var(--text-xs);padding:.15rem .5rem;border-radius:var(--radius-pill);
  background:var(--vk-d);color:var(--vk-l);border:1px solid var(--vk-b)}

/* KAEP vault (IP abstraction) */
.kaep-wrap{background:var(--bg-c);border:1px solid var(--vk-b);border-radius:var(--radius-xl);
  padding:var(--sp-8);position:relative;overflow:hidden}
.kaep-wrap::before{content:'';position:absolute;top:0;right:0;width:45%;height:100%;
  background:radial-gradient(ellipse at top right,var(--vk-d),transparent 70%);pointer-events:none}
.kaep-label{font-size:var(--text-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--vk);margin-bottom:.3rem;position:relative}

.vault-hdr{display:flex;justify-content:space-between;align-items:center;
  margin-bottom:var(--sp-6);flex-wrap:wrap;gap:var(--sp-4)}
.vault-n{font-family:var(--font-display);font-size:5rem;font-weight:700;
  color:var(--vk);line-height:1;text-shadow:0 0 40px rgba(0,180,162,.3)}
.vault-nl{font-size:var(--text-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--vk-l);line-height:1.45;margin-left:.35rem}
.vault-nl em{font-style:normal;font-size:.6rem;font-weight:400;letter-spacing:.02em;
  text-transform:none;color:var(--text-3);display:block;margin-top:.2rem}
.vault-seal{display:flex;align-items:center;gap:.65rem;background:rgba(0,180,162,.06);
  border:1px solid var(--vk-b);border-radius:var(--radius-lg);padding:.7rem 1.1rem}
.vault-seal-icon{font-size:1.3rem;flex-shrink:0}
.vault-seal-t{font-size:var(--text-sm);font-weight:700;color:var(--vk-l);letter-spacing:.04em;line-height:1.55}

.kaep-diagram{display:grid;grid-template-columns:1fr 60px 1fr;gap:var(--sp-4);align-items:start}
.kaep-inputs{display:flex;flex-direction:column;gap:.35rem;position:relative}
.ki{display:flex;align-items:center;gap:.55rem;background:rgba(0,180,162,.06);
  border:1px solid rgba(0,180,162,.12);border-radius:var(--radius-md);
  padding:.45rem .75rem;transition:background var(--ease-base),border-color var(--ease-base)}
.ki:hover{background:rgba(0,180,162,.12);border-color:rgba(0,180,162,.25)}
.ki-n{width:18px;height:18px;background:var(--vk-d);border-radius:50%;display:flex;
  align-items:center;justify-content:center;font-size:.6rem;font-weight:700;
  color:var(--vk);flex-shrink:0;border:1px solid var(--vk-b)}
.ki-t{font-size:var(--text-base);color:var(--text-2)}
.ki-t strong{color:var(--text-1);font-weight:600}

.ki.vis{border-color:var(--vk-b);background:rgba(0,180,162,.1)}
.ki.dim{opacity:.5}
.ki.half{opacity:.28;filter:blur(1.5px);user-select:none;pointer-events:none}
.ki.blr{opacity:.14;filter:blur(4px);user-select:none;pointer-events:none}

.vault-sealed{position:relative;overflow:hidden;border-radius:var(--radius-md)}
.vault-overlay{position:absolute;inset:0;
  background:linear-gradient(to bottom,transparent 0%,var(--bg-c) 52%);
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:1.25rem;pointer-events:none}
.vault-lock{display:flex;align-items:center;gap:.65rem;background:var(--bg-c);
  border:1px solid var(--vk-b);border-radius:var(--radius-lg);padding:.7rem 1.25rem;
  box-shadow:0 4px 18px rgba(0,180,162,.14);pointer-events:all}
.vault-lock-count{font-family:var(--font-display);font-size:1.05rem;font-weight:600;color:var(--vk);line-height:1}
.vault-lock-sub{font-size:.64rem;color:var(--text-3);margin-top:.15rem}

.kaep-engine-col{display:flex;flex-direction:column;align-items:center;gap:.4rem}
.kaep-engine{width:56px;height:56px;border-radius:50%;
  background:linear-gradient(135deg,var(--vk),var(--vk2));
  display:flex;align-items:center;justify-content:center;font-size:1.4rem;
  box-shadow:0 0 28px var(--vk-g);animation:engine-pulse 3s ease-in-out infinite}
.kaep-arr{width:1px;height:28px;background:var(--vk-b);position:relative}
.kaep-arr::after{content:'▼';position:absolute;bottom:-10px;left:50%;
  transform:translateX(-50%);font-size:.5rem;color:var(--vk)}

.kaep-outputs{display:flex;flex-direction:column;gap:.5rem}
.ko{display:flex;align-items:center;gap:.55rem;border-radius:var(--radius-md);
  padding:.7rem .85rem;border:1px solid}
.ko.vid{background:rgba(0,180,162,.08);border-color:rgba(0,180,162,.2)}
.ko.quiz{background:rgba(196,154,60,.08);border-color:rgba(196,154,60,.2)}
.ko.path{background:rgba(232,117,106,.06);border-color:rgba(232,117,106,.15)}
.ko.audit{background:rgba(201,168,76,.08);border-color:rgba(201,168,76,.2)}
.ko-icon{font-size:1.1rem;flex-shrink:0}
.ko-t{font-size:var(--text-base);font-weight:600;color:var(--text-1)}
.ko-sub{font-size:var(--text-sm);color:var(--text-2);line-height:1.6;display:block}

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media(max-width:900px){
  .vk-hero{grid-template-columns:1fr}
  .vk-hero-right{display:none}
  .vk-hero-left{padding:var(--sp-16) var(--sp-10)}
  .sector-grid{grid-template-columns:repeat(2,1fr)}
  .pipe-flow{grid-template-columns:1fr;gap:1.25rem}
  .pipe-arrow{transform:rotate(90deg);min-height:48px}
  .kaep-diagram{grid-template-columns:1fr;gap:1.5rem}
  .kaep-engine-col{flex-direction:row;justify-content:center}
  .kaep-arr{width:28px;height:1px}
  .kaep-arr::after{content:'▶';bottom:auto;top:50%;left:auto;right:-10px;transform:translateY(-50%)}
}
@media(max-width:600px){
  .vk-hero-left{padding:var(--sp-12) var(--sp-6)}
  .sector-grid{grid-template-columns:1fr}
  .vault-n{font-size:3.5rem}
  .vault-hdr{flex-direction:column;gap:.75rem}
}

/* ── Priority 4: font-size floors ──────────────────────────── */
@media(max-width:480px){
  .pipe-sub{font-size:.8125rem}
  .vault-seal-t{font-size:.8125rem}
}

/* === Migrated from inline <style> block === */

/* ── VAKIO PAGE-SPECIFIC ──────────────────────────────────── */
.vk-tab-bar{position:sticky;top:calc(var(--nav-h) + var(--abar-h));z-index:900;
  background:var(--bg-glass);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--b1)}
[data-theme="light"] .vk-tab-bar{background:var(--bg-glass)}
.vk-tab-list{max-width:var(--max-w);margin:0 auto;padding:0 var(--sp-10);
  display:flex;overflow-x:auto;scrollbar-width:none}
.vk-tab-list::-webkit-scrollbar{display:none}
.vk-panel{padding:5rem 0}
.vk-panel-inner{max-width:var(--max-w);margin:0 auto;padding:0 var(--sp-10)}

.sec-label{font-size:var(--text-xs);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--vk);margin-bottom:.65rem}
.sec-title{font-family:var(--font-display);font-size:clamp(1.6rem,2.6vw,2.2rem);
  font-weight:600;color:var(--text-1);letter-spacing:-.015em;line-height:1.2;margin-bottom:1rem}
.sec-sub{font-size:var(--text-md);color:var(--text-2);line-height:1.75;
  max-width:680px;margin-bottom:2.75rem}

/* Compliance pills */
.vk-pills{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:var(--sp-6)}
.vk-pill{font-size:var(--text-xs);font-weight:700;padding:.2rem .7rem;
  border-radius:var(--radius-pill);background:var(--vk-d);color:var(--vk-l);
  border:1px solid var(--vk-b);letter-spacing:.04em}

/* Moat cards */
.vk-moat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5);margin-top:var(--sp-10)}
.vk-moat{background:var(--bg-c);border:1px solid var(--b1);border-radius:var(--radius-xl);
  padding:1.75rem;position:relative;overflow:hidden;
  transition:border-color var(--ease-base),box-shadow var(--ease-base)}
.vk-moat::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--vk),transparent);opacity:0;transition:opacity var(--ease-base)}
.vk-moat:hover{border-color:var(--vk-b);box-shadow:var(--shadow-vk)}
.vk-moat:hover::before{opacity:1}
.vk-moat-num{font-family:var(--font-display);font-size:3.2rem;font-weight:700;
  color:var(--vk-d);line-height:.9;position:absolute;top:.85rem;right:1rem;
  -webkit-text-stroke:1px var(--vk-b);pointer-events:none;z-index:0}
.vk-moat-title{font-family:var(--font-display);font-size:var(--text-lg);font-weight:600;
  color:var(--vk-l);margin-bottom:.4rem;padding-right:3.25rem;position:relative;z-index:1}
.vk-moat-desc{font-size:var(--text-base);color:var(--text-2);line-height:1.65;position:relative;z-index:1}

/* Pipeline section */
.pipe-intro{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-12);
  align-items:start;margin-bottom:3.5rem}
.pipe-claim{font-family:var(--font-display);font-size:clamp(1.4rem,2.5vw,2rem);
  font-weight:600;color:var(--text-1);line-height:1.3;margin-bottom:1rem}
.pipe-quote{font-family:var(--font-display);font-style:italic;font-size:var(--text-md);
  color:var(--vk-l);border-left:2px solid var(--vk-b);padding-left:1.2rem;
  line-height:1.6;margin:0}

/* KAEP intro */
.kaep-intro{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--sp-8);
  align-items:center;margin-bottom:3rem}
.kaep-text{}

/* Request Access */
.vk-cta-wrap{min-height:480px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;
  background:linear-gradient(135deg,var(--bg),var(--vk-gl),rgba(196,154,60,.03),var(--bg));
  border-radius:var(--radius-2xl);border:1px solid var(--vk-b);
  padding:4rem 2rem;position:relative;overflow:hidden}
.vk-cta-wrap::before{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 70% 70% at 50% 50%,var(--vk-gl),transparent);
  pointer-events:none}
.vk-cta-headline{font-family:var(--font-display);font-size:clamp(2rem,4vw,3.4rem);
  font-weight:600;color:var(--text-1);line-height:1.15;margin-bottom:1rem;position:relative}
.vk-cta-sub{font-size:var(--text-base);color:var(--text-2);margin-bottom:.75rem;
  max-width:520px;position:relative;line-height:1.7}
.vk-cta-sectors{font-size:var(--text-sm);color:var(--vk-l);margin-bottom:2rem;
  position:relative;font-weight:600}
.vk-cta-btns{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;position:relative}
.vk-cta-fine{font-size:var(--text-xs);color:var(--text-3);margin-top:1.25rem;
  letter-spacing:.04em;position:relative}

/* Competitor stripe */
.competitor-note{background:var(--bg-c);border:1px solid var(--b0);
  border-radius:var(--radius-lg);padding:1.5rem 1.75rem;margin-top:3rem;
  display:flex;align-items:flex-start;gap:1rem}
.competitor-note-icon{font-size:1.4rem;flex-shrink:0;margin-top:.1rem}
.competitor-note-text{font-size:var(--text-base);color:var(--text-2);line-height:1.65}
.competitor-note-text strong{color:var(--text-1)}

@media(max-width:1100px){
  .vk-moat-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .vk-moat-grid{grid-template-columns:1fr}
  .pipe-intro{grid-template-columns:1fr}
  .kaep-intro{grid-template-columns:1fr}
}
@media(max-width:768px){
  .vk-tab-list{padding:0 var(--sp-6)}
  .vk-panel-inner{padding:0 var(--sp-6)}
  .vk-panel{padding:3rem 0}
  .ko-grid{grid-template-columns:repeat(2,1fr) !important}
}
@media(max-width:480px){
  .vk-tab-list{padding:0 var(--sp-5)}
  .vk-panel-inner{padding:0 var(--sp-5)}
  .ko-grid{grid-template-columns:1fr !important}
}

/* ── Module Coverage by Wave ──────────────────────────────── */
.vk-wave-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-4)}
.vk-wave-card--roadmap{background:linear-gradient(135deg,var(--bg-c),var(--vk-gl));
  border-style:dashed;border-color:var(--vk-b)}
.vk-wave-card--roadmap .vk-wave-n{color:var(--text-2)}
.vk-wave-card--roadmap .vk-mod-list li{color:var(--text-2);font-weight:400}
.vk-wave-card--roadmap .vk-mod-list li::before{content:'+';opacity:.7}
.vk-wave-card{background:var(--bg-c);border:1px solid var(--b1);border-radius:var(--radius-lg);
  padding:1.4rem 1.25rem;transition:border-color var(--ease-base),box-shadow var(--ease-base)}
.vk-wave-card:hover{border-color:var(--vk-b);box-shadow:var(--shadow-vk)}
.vk-wave-hdr{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;
  margin-bottom:.85rem;padding-bottom:.75rem;border-bottom:1px solid var(--b0)}
.vk-wave-n{font-family:var(--font-display);font-size:1.05rem;font-weight:600;color:var(--vk-l)}
.vk-wave-t{font-size:var(--text-sm);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-2)}
.vk-mod-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.4rem}
.vk-mod-list li{font-size:var(--text-base);color:var(--text-1);font-weight:500;display:flex;gap:.5rem;align-items:baseline}
.vk-mod-list li::before{content:'›';color:var(--vk);flex-shrink:0;font-weight:700}
@media(max-width:900px){.vk-wave-grid{grid-template-columns:1fr}}

/* ── DPDP clocks strip ────────────────────────────────────── */
.vk-clocks{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--sp-3);margin-top:var(--sp-4)}
.vk-clock{background:var(--bg-c);border:1px solid var(--vk-b);border-radius:var(--radius-md);
  padding:.9rem .75rem;text-align:center;transition:border-color var(--ease-base)}
.vk-clock-v{font-family:var(--font-display);font-size:1.4rem;font-weight:700;color:var(--vk-l);line-height:1.1}
.vk-clock-l{font-size:var(--text-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-3);margin-top:.45rem;line-height:1.4}
@media(max-width:900px){.vk-clocks{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.vk-clocks{grid-template-columns:1fr}}

/* ── Responsive helpers for newly-added inline grids ─────── */
@media(max-width:768px){
  .vk-cwe-q{grid-template-columns:1fr !important}
  .vk-cwe-templates{grid-template-columns:repeat(2,1fr) !important}
  .vk-dpdp-hdr,.vk-dpdp-cell{padding:.5rem .65rem !important}
  .vk-dpdp-mid,.vk-dpdp-hdr-mid{padding:.4rem .35rem !important}
  .vk-dpdp-mid{font-size:.6rem !important;letter-spacing:.02em !important}
}
@media(max-width:480px){
  .vk-cwe-templates{grid-template-columns:1fr !important}
}

/* ── CWE four-template strip ──────────────────────────────── */
.vk-cwe-templates{display:grid;grid-template-columns:repeat(4,1fr);
  gap:var(--sp-3);margin-top:1.25rem}
.vk-cwe-tmpl{background:var(--bg);border:1px solid var(--vk-b);
  border-radius:var(--radius-md);padding:.9rem 1rem;display:flex;flex-direction:column;gap:.4rem}
.vk-cwe-tmpl-h{font-size:var(--text-sm);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--vk-l);line-height:1.3}
.vk-cwe-tmpl-eg{font-size:var(--text-sm);color:var(--text-2);line-height:1.55}

/* ── KAEP output audience chip ────────────────────────────── */
.ko-aud{display:inline-block;font-size:var(--text-xs);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-3);background:var(--bg);
  border:1px solid var(--b1);border-radius:var(--radius-pill);
  padding:.18rem .55rem;margin-top:.55rem;line-height:1.4}

/* ── DPDP bilateral attribute grid ──────────────────────── */
.vk-dpdp-grid{display:grid;grid-template-columns:1fr auto 1fr;
  border:1px solid var(--vk-b);border-radius:var(--radius-lg);overflow:hidden;
  background:var(--bg);margin-top:1.25rem}
.vk-dpdp-hdr{padding:.75rem 1.1rem;background:var(--vk-d)}
.vk-dpdp-hdr-mid{display:flex;align-items:center;justify-content:center;
  background:var(--bg-c);border-left:1px solid var(--vk-b);border-right:1px solid var(--vk-b);
  padding:.65rem .65rem;font-size:1.25rem}
.vk-dpdp-h{font-family:var(--font-display);font-size:var(--text-sm);font-weight:600;
  color:var(--vk-l);line-height:1.3}
.vk-dpdp-sub{font-size:var(--text-xs);color:var(--text-3);margin-top:.2rem;
  font-weight:600;letter-spacing:.03em}
.vk-dpdp-cell{padding:.6rem 1.1rem;border-top:1px solid var(--b1);
  display:flex;align-items:center;gap:.5rem;
  font-size:var(--text-xs);color:var(--text-1);line-height:1.45}
.vk-dpdp-cell::before{content:'';width:5px;height:5px;border-radius:50%;
  background:var(--vk);flex-shrink:0}
.vk-dpdp-mid{display:flex;align-items:center;justify-content:center;text-align:center;
  border-top:1px solid var(--b1);border-left:1px solid var(--vk-b);border-right:1px solid var(--vk-b);
  padding:.5rem .6rem;font-size:var(--text-xs);font-weight:700;color:var(--vk);
  letter-spacing:.04em;text-transform:uppercase;line-height:1.3}
.vk-dpdp-seal{grid-column:1/-1;border-top:1px solid var(--vk-b);padding:.6rem 1rem;
  text-align:center;font-size:var(--text-xs);font-weight:700;color:var(--vk-l);
  background:linear-gradient(135deg,var(--vk-d),transparent,var(--vk-d));letter-spacing:.03em}

/* ── Reusable inline-block component classes ──────────────── */
.vk-mid-claim{font-family:var(--font-display);font-size:clamp(1.15rem,2vw,1.5rem);
  font-weight:600;color:var(--text-1);line-height:1.3;margin-bottom:.65rem}
.vk-mid-body{font-size:var(--text-base);color:var(--text-2);line-height:1.7;margin-bottom:1.25rem}
.vk-mini-title{font-family:var(--font-display);font-size:var(--text-base);font-weight:600;
  color:var(--vk-l);margin-bottom:.3rem}
.vk-mini-desc{font-size:var(--text-sm);color:var(--text-2);line-height:1.55;margin:0}
.vk-q-card-p{font-size:var(--text-base);color:var(--text-1);line-height:1.55;margin:0;font-weight:500}

/* ── Sector "why" line (under Acts list) ──────────────────── */
.sector-why{
  margin-top:.7rem;padding-top:.7rem;
  border-top:1px dashed var(--b0);
  font-size:var(--text-base);color:var(--text-2);line-height:1.6;
  font-style:italic;letter-spacing:.005em;
}

/* ── Category Architecture (Vākio in the Compliance Stack) ──────────────
   2x2 positioning map with a central Vākio chip at the intersection.
   Light hairline crosshairs make it read as a quadrant, not four cards. */
.vk-cat{margin-top:3rem;position:relative}
.vk-cat-h{
  font-family:var(--font-display);font-size:1.55rem;font-weight:700;
  color:var(--text-1);margin:0 0 .55rem;letter-spacing:-.01em;
}
.vk-cat-sub{
  font-size:var(--text-base);color:var(--text-2);line-height:1.65;
  max-width:720px;margin:0 0 1.75rem;
}
.vk-cat-map{position:relative}
.vk-cat-grid{
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;
  gap:1px;background:var(--b1);
  border:1px solid var(--b1);border-radius:var(--radius-xl);
  overflow:hidden;position:relative;
}
.vk-cat-q{
  background:var(--bg-c);padding:1.5rem 1.6rem;
  display:flex;flex-direction:column;gap:.7rem;
  min-height:200px;position:relative;
  transition:background var(--ease-base);
}
.vk-cat-q:hover{background:var(--bg-b)}
.vk-cat-q-hdr{
  font-family:var(--font-display);font-size:var(--text-md);font-weight:600;
  color:var(--text-1);letter-spacing:-.005em;
}
.vk-cat-q-body{
  font-size:var(--text-base);color:var(--text-2);line-height:1.65;
  margin:0;
}
.vk-cat-q-tag{
  margin-top:auto;padding-top:.7rem;
  border-top:1px solid var(--b0);
  font-size:var(--text-xs);color:var(--text-1);font-weight:500;line-height:1.55;
}
.vk-cat-q-tag em{
  font-style:normal;font-weight:700;color:var(--vk-l);
  letter-spacing:.005em;
}
/* Padding adjustments so quadrant content does not collide with the centre chip */
.vk-cat-q--tl{padding-right:2.6rem;padding-bottom:2.2rem}
.vk-cat-q--tr{padding-left:2.6rem;padding-bottom:2.2rem}
.vk-cat-q--bl{padding-right:2.6rem;padding-top:2.2rem}
.vk-cat-q--br{padding-left:2.6rem;padding-top:2.2rem}

/* Centre Vākio chip sitting on the intersection */
.vk-cat-centre{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  background:linear-gradient(135deg,var(--vk),var(--vk-d));
  color:#fff;border-radius:var(--radius-lg);
  padding:.85rem 1.25rem;text-align:center;
  box-shadow:var(--shadow-vk),0 0 0 4px var(--bg-b);
  z-index:2;min-width:160px;
  pointer-events:none;
}
.vk-cat-centre-h{
  font-family:var(--font-display);font-size:1.1rem;font-weight:700;
  letter-spacing:-.005em;line-height:1.2;
}
.vk-cat-centre-s{
  font-size:var(--text-xs);font-weight:500;letter-spacing:.02em;
  margin-top:.25rem;opacity:.92;line-height:1.4;
}

/* VK-07: collapse to single column at 900px (matches the 2-col grid breakpoint).
   Vākio chip becomes a top banner. Hairline crosshairs not needed in stacked mode. */
@media(max-width:900px){
  .vk-cat-grid{
    grid-template-columns:1fr;grid-template-rows:auto;
  }
  .vk-cat-q,
  .vk-cat-q--tl,
  .vk-cat-q--tr,
  .vk-cat-q--bl,
  .vk-cat-q--br{
    padding:1.4rem 1.4rem;min-height:0;
  }
  .vk-cat-centre{
    position:static;transform:none;
    display:block;margin:0 0 1rem;
    box-shadow:var(--shadow-vk);
    padding:1rem 1.25rem;
  }
  .vk-cat-map{
    display:flex;flex-direction:column;
  }
  /* Re-order: chip banner first, then the stacked quadrants */
  .vk-cat-centre{order:0}
  .vk-cat-grid{order:1}
}

/* ── VK-09: POSH 4-feature grid (extracted from inline style) ── */
.posh-feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-3)}
@media(max-width:768px){.posh-feature-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.posh-feature-grid{grid-template-columns:1fr}}

/* ── Upcoming / On Roadmap badge ──────────────────────────── */
.upcoming-badge{
  display:inline-flex;align-items:center;gap:.3rem;
  padding:.18rem .65rem;border-radius:var(--radius-pill);
  font-size:.6rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  background:rgba(196,154,60,.12);color:var(--gold);
  border:1px solid rgba(196,154,60,.28);vertical-align:middle;
  line-height:1.4;flex-shrink:0;white-space:nowrap}
[data-theme="light"] .upcoming-badge{
  background:rgba(196,154,60,.10);color:var(--gold-l);border-color:var(--gold-g)}

/* ── X-03: Tab bar safe-area-inset-top for iOS notch ─────── */
.vk-tab-bar{top:calc(var(--nav-h) + var(--abar-h) + env(safe-area-inset-top,0px))}

/* ── C-05: Tab bar scroll affordance — right fade ─────────── */
.vk-tab-bar{overflow:hidden}
.vk-tab-bar::after{
  content:'';position:absolute;right:0;top:0;bottom:0;width:48px;
  background:linear-gradient(to right,transparent,var(--bg));
  pointer-events:none;z-index:1}
[data-theme="light"] .vk-tab-bar::after{background:linear-gradient(to right,transparent,var(--bg))}

/* ── VK-06a: DPDP bilateral grid — collapse auto column above 480px too ── */
@media(max-width:640px){
  .vk-dpdp-grid{grid-template-columns:1fr;grid-template-rows:auto}
  .vk-dpdp-mid{
    grid-column:1;
    display:flex;flex-direction:row;flex-wrap:wrap;
    justify-content:center;gap:var(--sp-2);
    border-left:none;border-right:none;
    border-top:1px solid var(--b0);border-bottom:1px solid var(--b0);
    padding:var(--sp-4) 0;
    font-size:.8125rem !important
  }
}

/* ── VK-06: DPDP bilateral grid at 480px ─────────────────── */
@media(max-width:480px){
  .vk-dpdp-grid{grid-template-columns:1fr;grid-template-rows:auto}
  .vk-dpdp-mid{
    grid-column:1;
    display:flex;flex-direction:row;flex-wrap:wrap;
    justify-content:center;gap:var(--sp-2);
    border-left:none;border-right:none;
    border-top:1px solid var(--b0);border-bottom:1px solid var(--b0);
    padding:var(--sp-4) 0;
    font-size:.8125rem !important
  }
}

/* ── VK-14: Request Access CTA stack + centre on 360px ────── */
@media(max-width:480px){
  .vk-cta-btns{flex-direction:column;align-items:center}
  .vk-cta-btns .btn{width:100%;max-width:320px}
  .vault-n{font-size:2.8rem}
}

/* ── Priority 4: font-size floors on mobile ──────────────── */
@media(max-width:480px){
  .vk-clock-l{font-size:var(--text-xs)}
  .pipe-sub{font-size:var(--text-sm)}
  .ko-sub{font-size:var(--text-sm)}
  .vault-seal-t{font-size:.8125rem}
}

/* ── Migrated from style="" attributes ──────────────────────── */

/* Hero: tag top margin */
.vk-hero-tag{margin-bottom:1.5rem}

/* Hero: audience label */
.vk-audiences{
  font-size:var(--text-xs);
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--vk-l);
  margin:.75rem 0 1.25rem 0
}

/* Hero: "Built for" dim prefix */
.vk-audiences-prefix{color:var(--text-3);font-weight:600}

/* Hero diagram: directional label */
.vk-vis-dir{text-align:center;color:var(--vk);font-size:.8rem;padding:.25rem 0}

/* Hero diagram: engine label text */
.vk-vis-engine-label{font-size:1rem;font-weight:700;letter-spacing:.04em;
  font-family:var(--font-vakio);color:#fff}

/* Overview: Module coverage - section label top margin */
.sec-label--spaced{margin-top:3rem}

/* Overview: sec-sub with custom bottom margin */
.sec-sub--tight{margin-bottom:1.75rem}

/* Overview: POSH shipped card */
.vk-posh-shipped{
  background:var(--bg-c);border:1px solid var(--vk-b);
  border-radius:var(--radius-xl);padding:1.4rem 1.65rem;
  margin-bottom:1.5rem;display:flex;align-items:center;
  gap:1.25rem;flex-wrap:wrap
}
.vk-posh-shipped-left{display:flex;align-items:center;gap:.65rem;flex-shrink:0}
.vk-posh-shipped-check{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:50%;
  background:var(--vk-d);border:1px solid var(--vk-b);
  font-size:1.1rem;color:var(--vk-l);font-weight:700
}
.vk-posh-shipped-sub{
  font-size:var(--text-xs);font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--vk-l)
}
.vk-posh-shipped-title{
  font-family:var(--font-display);font-size:1.18rem;font-weight:600;
  color:var(--text-1);line-height:1.2
}
.vk-posh-shipped-body{
  flex:1;min-width:0;word-break:break-word;
  font-size:var(--text-base);color:var(--text-2);line-height:1.6;margin:0
}

/* Overview: Wave grid top margin */
.vk-wave-grid--spaced{margin-bottom:2.75rem}

/* Pipeline: pipe-step icon variant (gold) */
.pipe-icon--gold{background:rgba(196,154,60,.08);border:1px solid rgba(196,154,60,.25)}

/* Pipeline: pipe-tag variant (gold) */
.pipe-tag--gold{background:rgba(196,154,60,.08);color:var(--vk2);border-color:rgba(196,154,60,.2)}

/* Pipeline: ko-grid 4-col */
.ko-grid--4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4)}

/* Pipeline/Audit: info card (generic reusable block) */
.vk-info-card{
  background:var(--bg-c);border:1px solid var(--vk-b);
  border-radius:var(--radius-xl);padding:1.75rem 1.85rem;margin-top:2.5rem
}
.vk-info-card--top15{margin-top:1.5rem}

/* Pipeline: sec-label row with upcoming badge */
.sec-label--flex{
  margin-bottom:.4rem;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap
}

/* Pipeline: CWE Q-card grid */
.vk-cwe-q{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3);margin-bottom:1rem}

/* Pipeline: CWE Q-card item */
.vk-cwe-q-item{
  background:var(--bg);border:1px solid var(--vk-b);
  border-radius:var(--radius-md);padding:.95rem 1rem
}

/* Pipeline: CWE Q-card icon */
.vk-cwe-q-icon{font-size:1.1rem;margin-bottom:.4rem}

/* Pipeline: CWE proof line */
.vk-cwe-proof{font-size:var(--text-sm);color:var(--vk-l);font-weight:600;letter-spacing:.02em;margin:0}

/* Pipeline: competitor note top margin variant */
.competitor-note--spaced{margin-top:2.5rem}

/* Audit: ko-grid 3-col */
.ko-grid--3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4);margin-top:2.5rem}

/* Audit: compliance auto-mapper pill container */
.vk-pill-row{display:flex;flex-wrap:wrap;gap:.5rem}

/* Audit: vk-mid-body with tighter bottom margin */
.vk-mid-body--mb115{margin-bottom:1.15rem}

/* Audit: vk-mid-body no margin */
.vk-mid-body--mb0{margin-bottom:0}

/* Audit: DPDP two-layer heading with baseline alignment */
.vk-dpdp-title-row{display:flex;align-items:baseline;gap:.85rem;flex-wrap:wrap;margin-bottom:.45rem}

/* Audit: vk-mid-claim tighter bottom */
.vk-mid-claim--mb85{margin-bottom:.85rem}

/* Audit: POSH feature card */
.posh-feature-card{
  background:var(--bg);border:1px solid var(--vk-b);
  border-radius:var(--radius-md);padding:1rem .9rem
}

/* Audit: SCORM / BYOLMS card (uses neutral border) */
.vk-info-card--neutral{border-color:var(--b1)}

/* KAEP Engine: vault header flex row */
.vault-hdr-inner{display:flex;align-items:baseline;gap:.45rem}

/* KAEP Engine: vault seal span fine-print */
.vault-seal-fine{font-weight:400;color:var(--text-3);font-size:var(--text-xs);text-transform:none;letter-spacing:.02em}

/* KAEP Engine: KAEP schema card */
.kaep-schema-card{
  background:var(--bg-c);border:1px solid var(--vk-b);
  border-radius:var(--radius-xl);padding:1.75rem;
  display:flex;flex-direction:column;gap:1rem
}

/* KAEP Engine: KAEP schema bullet row */
.kaep-schema-row{display:flex;flex-direction:column;gap:.45rem}
.kaep-schema-item{display:flex;align-items:center;gap:.65rem;font-size:var(--text-base);color:var(--text-2)}
.kaep-schema-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.kaep-schema-dot--vk{background:var(--vk)}
.kaep-schema-dot--vk2{background:var(--vk2)}
.kaep-schema-dot--rn{background:var(--rn)}
.kaep-schema-item strong{color:var(--text-1)}

/* KAEP Engine: moat note box */
.kaep-moat-note{
  background:var(--vk-d);border:1px solid var(--vk-b);
  border-radius:var(--radius-md);padding:.75rem 1rem;
  font-size:var(--text-sm);color:var(--text-2);margin-top:.25rem;line-height:1.6
}

/* KAEP Engine: KAEP italic claim */
.kaep-italic-claim{
  font-family:var(--font-display);font-style:italic;font-size:var(--text-md);
  color:var(--vk-l);border-left:2px solid var(--vk-b);padding-left:1rem;line-height:1.6
}

/* KAEP Engine: inverted kaep-arr (flipped) */
.kaep-arr--flip{transform:scaleY(-1)}

/* KAEP Engine: ko item with vk border (analytics output) */
.ko--vk-border{background:var(--bg-c);border:1px solid var(--vk-b)}

/* Request Access: tag top margin */
.vk-cta-tag{margin-bottom:1.5rem}

/* Request Access: early access info box */
.vk-early-access-box{
  margin-top:1.4rem;padding:1.1rem 1.25rem;
  background:var(--bg-c);border:1px solid var(--vk-b);
  border-radius:var(--radius-lg);text-align:left;
  max-width:640px;margin-left:auto;margin-right:auto
}
.vk-early-access-label{
  font-size:var(--text-xs);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--vk-l);margin-bottom:.6rem
}
.vk-early-access-body{font-size:var(--text-base);color:var(--text-2);line-height:1.65;margin:0}

/* Modals: contact block */
.modal-contact-block{
  background:var(--bg-s);border:1px solid var(--b0);
  border-radius:10px;padding:1.2rem 1.4rem;margin-bottom:1.4rem
}
.modal-contact-name{color:var(--text-1)}
.modal-contact-email{color:var(--gold)}
.modal-contact-last{margin-bottom:0}
.modal-contact-links{
  display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:center;
  padding-top:1.1rem;border-top:1px solid var(--b0)
}

/* Modals: Vakio access inquiry note */
.modal-vk-inquiry-note{font-size:var(--text-sm);color:var(--text-2);line-height:1.6;margin-bottom:1rem}

/* Modals: privacy fine-print */
.modal-privacy-fine{margin-top:1.5rem;font-size:0.85em;opacity:0.7}

/* Modals: moat-overlay audit section top margin override */
.vk-moat-grid--audit{margin-top:1rem}

/* Pipeline: sec-label with smaller top spacing */
.sec-label--spaced-sm{margin-top:1.5rem;margin-bottom:.25rem}

/* Audit: DPDP clocks sec-label top spacing */
.sec-label--clocks{margin-top:1.25rem;margin-bottom:.25rem}

/* KAEP Engine: sec-title tighter bottom margin */
.sec-title--mb75{margin-bottom:.75rem}

/* KAEP Engine: intro paragraph */
.kaep-intro-body{
  font-size:var(--text-md);color:var(--text-2);
  line-height:1.75;max-width:500px;margin-bottom:1.5rem
}

/* Pipeline/Audit: pipe-intro body paragraph */
.pipe-intro-body{
  font-size:var(--text-md);color:var(--text-2);
  line-height:1.75;margin:0;max-width:480px
}

/* Audit: DPDP accent text (data fiduciary etc.) */
.vk-text-accent{color:var(--vk-l)}

/* Audit: DPDP body paragraph bottom margin */
.vk-dpdp-body{margin-bottom:1rem}

/* Audit: small pill variant */
.vk-pill--sm{font-size:.62rem}

@media(max-width:480px){
  .vk-tagline{font-size:var(--text-md)}
}

/* ── LIGHT THEME OVERRIDES ────────────────────────────────── */
/* Decorative watermark numbers: more opaque so they read on light bg */
[data-theme="light"] .vk-moat-num{
  color:rgba(0,110,100,.30);
  -webkit-text-stroke:1px rgba(0,110,100,.56)
}
/* Card titles: use near-black instead of brand-teal on light bg */
[data-theme="light"] .vk-moat-title{color:var(--text-1)}
/* Italic quote blocks: near-black for readability on light bg */
[data-theme="light"] .pipe-quote{color:var(--text-1)}
[data-theme="light"] .kaep-italic-claim{color:var(--text-2)}