/* ============================================================================
   CVN BLOCKS — shared kit stylesheet
   • TOKEN LAYER  (flipped by the Light/Dark toggle; production blocks inline it)
   • BLOCK BASE   (.b-*  utilities every block leans on)
   • SHOWCASE CHROME (spec sheet, category headers, CSS-only variant tabs)
   Palette matches CVN's live site: periwinkle primary · amber CTA · green ok,
   near-black navy in dark, white in light. Fonts Space Grotesk/Manrope/JetBrains.
   ========================================================================== */

/* ---------- TOKENS : light ------------------------------------------------- */
:root{
--bg:#ffffff;--sfc:#f4f6fb;--sfc2:#eceff7;--fg:#12141c;--fg2:#39404e;--mut:#5b6473;
--ln:#e5e8f1;--ln2:#d8dceb;--cd:#ffffff;--cd2:#f4f6fb;
--br:#4b57cf;--br-d:#3a45ad;--eye:#4b57cf;--onbr:#ffffff;--brsoft:#eef0fc;--brline:#dadff9;
--cta:#f2a02a;--cta-d:#e08e15;--cta-ink:#3a2600;
--ok:#1f9d57;--ok-soft:#e7f6ee;--ok-line:#c6ebd5;
--ph1:#eceff7;--ph2:#e3e7f2;--phc:#98a0b4;
--glow:radial-gradient(60% 75% at 80% 8%,rgba(75,87,207,.13),transparent 60%);
--stars:none;
--sh:0 1px 2px rgba(18,20,28,.05);--sh-md:0 20px 46px -28px rgba(30,36,90,.4);--sh-lg:0 32px 66px -30px rgba(30,36,90,.5);--ring:rgba(75,87,207,.18);
}
/* ---------- TOKENS : dark (== live site) ----------------------------------- */
:root[data-libmode="dark"]{
--bg:#0a0f1c;--sfc:#0d1426;--sfc2:#111a30;--fg:#eef1f8;--fg2:#c4ccdb;--mut:rgba(238,241,248,.6);
--ln:rgba(255,255,255,.09);--ln2:rgba(255,255,255,.15);--cd:#121a2e;--cd2:#0d1426;
--br:#8b9cf5;--br-d:#a6b3f8;--eye:#8b9cf5;--onbr:#0a0f1c;--brsoft:rgba(139,156,245,.14);--brline:rgba(139,156,245,.34);
--cta:#f2a733;--cta-d:#f6b752;--cta-ink:#241500;
--ok:#3ec776;--ok-soft:rgba(62,199,118,.14);--ok-line:rgba(62,199,118,.3);
--ph1:#111a2e;--ph2:#16223a;--phc:#69748c;
--glow:radial-gradient(60% 75% at 80% 8%,rgba(139,156,245,.18),transparent 60%);
--stars:radial-gradient(1px 1px at 20% 30%,rgba(255,255,255,.5),transparent),radial-gradient(1px 1px at 70% 60%,rgba(255,255,255,.4),transparent),radial-gradient(1px 1px at 40% 80%,rgba(255,255,255,.35),transparent),radial-gradient(1px 1px at 88% 22%,rgba(255,255,255,.4),transparent),radial-gradient(1px 1px at 55% 15%,rgba(255,255,255,.3),transparent);
--sh:0 1px 2px rgba(0,0,0,.4);--sh-md:0 24px 50px -28px rgba(0,0,0,.65);--sh-lg:0 34px 72px -30px rgba(0,0,0,.75);--ring:rgba(139,156,245,.3);
}

/* ---------- BLOCK BASE ----------------------------------------------------- */
.blk{color:var(--fg);font-family:'Manrope',system-ui,sans-serif;padding:80px 0;position:relative;-webkit-font-smoothing:antialiased;transition:background .25s ease,color .25s ease}
.blk.pad-lg{padding:104px 0}.blk.pad-sm{padding:56px 0}.blk.pad-xs{padding:0}
.blk *{box-sizing:border-box}
.blk a{text-decoration:none}
.b-wrap{max-width:1100px;margin:0 auto;padding:0 24px;position:relative;z-index:1}
.b-wrap--wide{max-width:1200px}
.b-glow{position:absolute;inset:0;background:var(--glow);pointer-events:none;z-index:0}
.b-stars{position:absolute;inset:0;background:var(--stars);background-size:cover;pointer-events:none;z-index:0;opacity:.9}
.b-eye{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--eye);margin:0;display:flex;align-items:center;gap:10px}
.b-eye::before{content:"";width:24px;height:2px;background:var(--eye);flex:none;border-radius:2px}
.b-eye.c{justify-content:center}.b-eye.c::after{content:"";width:24px;height:2px;background:var(--eye);flex:none;border-radius:2px}
.b-h1{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:600;font-size:clamp(34px,5vw,56px);letter-spacing:-.025em;line-height:1.04;margin:16px 0 0;color:var(--fg);text-wrap:balance}
.b-h2{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:600;font-size:clamp(27px,3.4vw,38px);letter-spacing:-.02em;line-height:1.1;margin:14px 0 0;color:var(--fg);text-wrap:pretty}
.b-h3{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:600;font-size:19px;letter-spacing:-.01em;margin:0;color:var(--fg)}
.b-grad{background:linear-gradient(100deg,var(--br),color-mix(in srgb,var(--br) 55%,#b9c6ff));-webkit-background-clip:text;background-clip:text;color:transparent}
.b-lead{font-size:clamp(16px,1.4vw,18px);line-height:1.62;color:var(--mut);margin:14px 0 0;max-width:56ch;text-wrap:pretty}
.b-row{display:flex;flex-wrap:wrap;gap:12px}
.b-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:'Manrope',sans-serif;font-weight:700;font-size:15px;padding:13px 24px;border-radius:999px;cursor:pointer;border:1.5px solid transparent;transition:.18s ease;white-space:nowrap;line-height:1}
.b-btn svg{width:17px;height:17px}
.b-btn--solid{background:var(--br);color:var(--onbr)}.b-btn--solid:hover{background:var(--br-d);transform:translateY(-2px)}
.b-btn--cta{background:var(--cta);color:var(--cta-ink);box-shadow:0 14px 34px -14px color-mix(in srgb,var(--cta) 70%,transparent)}.b-btn--cta:hover{background:var(--cta-d);transform:translateY(-2px)}
.b-btn--ghost{background:transparent;color:var(--fg);border-color:var(--ln2)}.b-btn--ghost:hover{border-color:var(--br);color:var(--eye)}
.blk a.b-btn--solid{color:var(--onbr)}.blk a.b-btn--solid:hover{color:#fff}.blk a.b-btn--cta{color:var(--cta-ink)}.blk a.b-btn--ghost{color:var(--fg)}.blk a.b-btn--ghost:hover{color:var(--eye)}
.b-card{background:var(--cd);border:1px solid var(--ln);border-radius:16px;box-shadow:var(--sh)}
.b-card--soft{background:var(--sfc);border:1px solid var(--ln)}
.b-ic{width:46px;height:46px;border-radius:12px;background:var(--brsoft);border:1px solid var(--brline);display:grid;place-items:center;color:var(--eye);flex:none}
.b-ic svg{width:23px;height:23px}
.b-ph{background:repeating-linear-gradient(135deg,var(--ph1),var(--ph1) 12px,var(--ph2) 12px,var(--ph2) 24px);display:grid;place-items:center;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em;color:var(--phc);text-align:center;padding:10px}
/* Blank state: an intentionally empty media slot — no stripes, no label, transparent. */
.b-ph.is-blank,.b-media.is-blank{background:none!important;border:0!important;box-shadow:none!important;color:transparent!important;padding:0}
.b-chip{display:inline-flex;align-items:center;gap:6px;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;background:var(--brsoft);color:var(--eye);border:1px solid var(--brline);padding:5px 10px;border-radius:999px;white-space:nowrap}
.b-pill{display:inline-flex;align-items:center;gap:7px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;background:var(--sfc);color:var(--fg2);border:1px solid var(--ln);padding:6px 12px;border-radius:999px}
.b-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--ok)}
.b-ck{flex:none;color:var(--ok)}
.b-check{width:22px;height:22px;border-radius:50%;background:var(--ok-soft);border:1px solid var(--ok-line);display:grid;place-items:center;flex:none;color:var(--ok)}
.b-check svg{width:13px;height:13px}
.b-in{width:100%;font-family:'Manrope',sans-serif;font-size:15px;color:var(--fg);background:var(--cd);border:1.5px solid var(--ln);border-radius:12px;padding:13px 15px;transition:.15s}
.b-in::placeholder{color:var(--phc)}
.b-in:focus{outline:none;border-color:var(--br);box-shadow:0 0 0 3px var(--ring)}
.b-lbl{display:block;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--mut);margin:0 0 7px}
.b-2{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.b-2.a1{grid-template-columns:1.06fr .94fr}
.b-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.b-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.b-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.b-media{border-radius:20px;overflow:hidden;aspect-ratio:4/3}
.b-trust{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:24px}
.b-trust span{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--fg2)}
@media(max-width:860px){.b-2,.b-2.a1{grid-template-columns:1fr;gap:30px}.b-3{grid-template-columns:1fr}.b-4{grid-template-columns:repeat(2,1fr)}.b-flip-m>.b-media{order:-1}}
@media(max-width:600px){.b-4{grid-template-columns:1fr}}
@media(max-width:600px){.blk{padding:52px 0}.blk.pad-lg{padding:64px 0}.blk.pad-sm{padding:40px 0}.b-wrap{padding:0 18px}}

/* ============================================================================
   SHOWCASE CHROME — theme-independent frame (stays light so variants read).
   ========================================================================== */
*{box-sizing:border-box}
.cvnkit-demo{margin:0;background:#e9edef;color:#12141c;font-family:'Manrope',system-ui,sans-serif}
.kit-body a{color:#4b57cf}
.topbar{position:sticky;top:0;z-index:100;background:rgba(10,15,28,.92);backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid rgba(255,255,255,.1)}
.topbar__in{max-width:1240px;margin:0 auto;padding:11px 20px;display:flex;align-items:center;gap:16px}
.topbar__mark{display:flex;align-items:center;gap:9px;flex:none;text-decoration:none}
.topbar__logo{width:30px;height:30px;border-radius:8px;background:linear-gradient(145deg,#8b9cf5,#4b57cf);display:grid;place-items:center;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:13px;color:#0a0f1c;letter-spacing:-.03em}
.topbar__mark b{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:14.5px;color:#fff;letter-spacing:-.01em}
.topbar__mark span{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.12em;color:rgba(255,255,255,.45);text-transform:uppercase}
.topnav{display:flex;gap:2px;overflow-x:auto;flex:1;scrollbar-width:none}.topnav::-webkit-scrollbar{display:none}
.topnav a{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.03em;text-decoration:none;color:rgba(255,255,255,.6);padding:6px 10px;border-radius:7px;white-space:nowrap;transition:.15s}
.topnav a:hover{background:rgba(255,255,255,.08);color:#fff}
.topnav a.on{background:rgba(139,156,245,.2);color:#fff}
.toggle{flex:none;display:flex;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:3px}
.toggle button{display:flex;align-items:center;gap:6px;font-family:'Manrope',sans-serif;font-weight:600;font-size:12.5px;color:rgba(255,255,255,.6);background:transparent;border:0;border-radius:7px;padding:6px 12px;cursor:pointer;transition:.15s}
.toggle button[aria-pressed="true"]{background:#fff;color:#12141c}
.toggle svg{width:14px;height:14px}
.cvnkit-demo .wrap{max-width:1240px;margin:0 auto;padding:30px 20px 100px}
.mast{background:#0a0f1c;color:#fff;border-radius:22px;padding:38px 40px 34px;margin-bottom:16px;position:relative;overflow:hidden}
.mast::after{content:"";position:absolute;inset:0;background:radial-gradient(90% 120% at 100% 0,rgba(139,156,245,.4),transparent 55%),radial-gradient(60% 90% at 0 100%,rgba(242,167,51,.14),transparent 60%);pointer-events:none}
.mast>*{position:relative;z-index:1}
.mast__kicker{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:#8b9cf5;margin:0}
.mast h1{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:600;font-size:clamp(26px,4vw,40px);letter-spacing:-.02em;margin:12px 0 10px;line-height:1.05}
.mast p{color:rgba(255,255,255,.74);font-size:15px;line-height:1.6;max-width:72ch;margin:0}
.mast p b{color:#fff}
.cat{scroll-margin-top:64px;margin:38px 0 16px;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.cat__n{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;color:#0a0f1c;background:#8b9cf5;border-radius:7px;padding:5px 9px}
.cat h2{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:24px;letter-spacing:-.01em;margin:0;color:#12141c}
.cat p{font-size:13.5px;color:#5b6473;margin:0}
.cat__count{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:11px;color:#89909e}

/* ---------- type spec unit + CSS-only variant tabs ------------------------- */
.type{scroll-margin-top:64px;background:#fff;border:1px solid #dcdfeb;border-radius:20px;overflow:hidden;margin-bottom:24px;box-shadow:0 1px 2px rgba(18,20,28,.04),0 16px 44px -26px rgba(30,36,90,.28)}
.vtab-in{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.type__bar{display:flex;align-items:center;gap:13px;padding:14px 20px;border-bottom:1px solid #eef0f6;flex-wrap:wrap}
.type__num{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:12px;color:#fff;background:#4b57cf;border-radius:7px;padding:5px 8px}
.type__id{min-width:0}
.type__name{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:600;font-size:16.5px;letter-spacing:-.01em;margin:0;line-height:1.2}
.type__purpose{color:#5b6473;font-size:12.5px;margin:2px 0 0}
.vtabs{margin-left:auto;display:flex;gap:5px;flex-wrap:wrap}
.vtab{font-family:'Manrope',sans-serif;font-weight:600;font-size:12.5px;color:#5b6473;background:#f4f6fb;border:1px solid #e5e8f1;border-radius:8px;padding:6px 12px;cursor:pointer;transition:.14s;user-select:none}
.vtab:hover{border-color:#c3c9de;color:#12141c}
.type__stage{overflow:hidden}
.type__stage>.variant{display:none}
/* generic mapping: Nth radio checked -> Nth variant shown + Nth pill active */
.vtab-in:nth-of-type(1):checked~.type__stage>.variant:nth-of-type(1),
.vtab-in:nth-of-type(2):checked~.type__stage>.variant:nth-of-type(2),
.vtab-in:nth-of-type(3):checked~.type__stage>.variant:nth-of-type(3),
.vtab-in:nth-of-type(4):checked~.type__stage>.variant:nth-of-type(4),
.vtab-in:nth-of-type(5):checked~.type__stage>.variant:nth-of-type(5),
.vtab-in:nth-of-type(6):checked~.type__stage>.variant:nth-of-type(6){display:block}
.vtab-in:nth-of-type(1):checked~.type__bar .vtabs .vtab:nth-of-type(1),
.vtab-in:nth-of-type(2):checked~.type__bar .vtabs .vtab:nth-of-type(2),
.vtab-in:nth-of-type(3):checked~.type__bar .vtabs .vtab:nth-of-type(3),
.vtab-in:nth-of-type(4):checked~.type__bar .vtabs .vtab:nth-of-type(4),
.vtab-in:nth-of-type(5):checked~.type__bar .vtabs .vtab:nth-of-type(5),
.vtab-in:nth-of-type(6):checked~.type__bar .vtabs .vtab:nth-of-type(6){background:#4b57cf;border-color:#4b57cf;color:#fff}

.type__notes{display:grid;grid-template-columns:1.5fr 1fr;border-top:1px solid #eef0f6;background:#f8f9fd}
.note{padding:15px 20px}.note+.note{border-left:1px solid #eef0f6}
.note h5{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#4b57cf;margin:0 0 8px}
.note ul{margin:0;padding-left:16px}.note li{font-size:12.5px;line-height:1.5;color:#39404e;margin-bottom:4px}
.note li b{color:#12141c}
.note p{font-size:12.5px;line-height:1.55;color:#39404e;margin:0}
.note code{font-family:'JetBrains Mono',monospace;font-size:11px;background:#eceff7;padding:1px 5px;border-radius:4px;color:#3a45ad}

/* ---------- hub cards ------------------------------------------------------ */
.hubgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.hubcard{display:block;background:#fff;border:1px solid #dcdfeb;border-radius:18px;overflow:hidden;text-decoration:none;color:inherit;box-shadow:0 1px 2px rgba(18,20,28,.04);transition:.2s}
.hubcard:hover{transform:translateY(-3px);box-shadow:0 22px 48px -26px rgba(30,36,90,.4);border-color:#b9c0da}
.hubcard__prev{height:118px;background:#0a0f1c;border-bottom:1px solid #eef0f6;padding:16px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.hubcard__prev::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 90% at 80% 10%,rgba(139,156,245,.35),transparent 60%)}
.hubcard__body{padding:15px 17px}
.hubcard__body h3{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:16px;letter-spacing:-.01em;margin:0 0 3px;display:flex;align-items:center;gap:8px}
.hubcard__body p{font-size:12.5px;line-height:1.5;color:#5b6473;margin:0 0 10px}
.hubcard__meta{display:flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:10.5px;color:#89909e}
.hubcard__meta .tag{background:#eef0fc;color:#4b57cf;padding:3px 7px;border-radius:6px;letter-spacing:.04em}
.hubcard__meta .tag.soon{background:#f0f1f5;color:#89909e}
.mini{display:flex;gap:5px;width:100%;position:relative;z-index:1}
.mini i{display:block;border-radius:4px;background:rgba(255,255,255,.16)}
.mini i.a{background:#8b9cf5}.mini i.o{background:#f2a733}

@media(max-width:900px){.hubgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){.type__notes{grid-template-columns:1fr}.note+.note{border-left:0;border-top:1px solid #eef0f6}.mast{padding:30px 22px}}
@media(max-width:640px){.hubgrid{grid-template-columns:1fr}.vtabs{width:100%;margin-left:0}}