/*
    marketing.css — MeraOpsWeb (Zone A, public marketing). Single-page landing for MeraLens.

    The design system here is the v15 launch brand (docs/prototypes/meraops-launch-v15.html),
    lifted verbatim so the live site matches the approved prototype exactly — Iris-indigo accent,
    the radial glows, the per-card accent system (--c), the rack/cost visuals and the currency
    dropdowns. Loaded by _MarketingLayout alongside Geist (Google Fonts) + Tabler icons (jsDelivr).

    CSP note: the production Content-Security-Policy is script-src 'self' (NO inline scripts), so all
    behaviour lives in marketing.js. style-src allows 'unsafe-inline', so the element-level style=""
    attributes the prototype uses are fine and are kept as-authored.

    Layout:
      1. v15 design system (verbatim from the prototype <style> block)
      2. MeraOpsWeb additions — waitlist plumbing (toast, Turnstile slot, honeypot) and the
         secondary pages (Privacy prose, Error, page headers) styled on the same tokens.
*/

/* ───────────────────────────────────────────────────────────────────────────
   1. v15 design systems — verbatim from docs/prototypes/meraops-launch-v15.html
   ─────────────────────────────────────────────────────────────────────────── */
:root{
  --bg:#0A0B0F; --s1:#111319; --s2:#171A22; --s3:#1E222C;
  --b:rgba(255,255,255,.08); --b2:rgba(255,255,255,.14);
  --t1:#F4F6FB; --t2:#AEB6C6; --t3:#828B9C; --t4:#5B6373;
  --acc:#6366F1; --accl:#A5B4FC; --accdim:rgba(99,102,241,.14); --accring:rgba(99,102,241,.34);
  --grad:linear-gradient(120deg,#A5B4FC,#6366F1 60%,#8B5CF6);
  --blue:#38BDF8; --indigo:#818CF8; --violet:#A78BFA; --purple:#C084FC; --sky:#22D3EE; --green:#34D399; --amber:#FBBF24; --red:#F87171;
  --glow:rgba(99,102,241,.18);
  --shadow:0 26px 64px -28px rgba(0,0,0,.72);
  --shadow-sm:0 14px 36px -16px rgba(0,0,0,.6);
  --sheen:rgba(255,255,255,.06);
  --max:1120px;
  --nav-h:60px;            /* sticky-nav height; the hero zone subtracts it to fill exactly one screen */
}
[data-theme="light"]{
  --bg:#F5F6FB; --s1:#FFFFFF; --s2:#F1F3F9; --s3:#E5E8F1;
  --b:rgba(15,23,42,.10); --b2:rgba(15,23,42,.16);
  --t1:#0E1525; --t2:#475067; --t3:#6B7488; --t4:#9AA2B4;
  --acc:#4F46E5; --accl:#4F46E5; --accdim:rgba(79,70,229,.09); --accring:rgba(79,70,229,.26);
  --grad:linear-gradient(120deg,#6366F1,#4F46E5 60%,#7C3AED);
  --glow:rgba(99,102,241,.14);
  --shadow:0 22px 54px -26px rgba(40,44,90,.32);
  --shadow-sm:0 14px 32px -16px rgba(40,44,90,.22);
  --sheen:rgba(255,255,255,.9);
}
*{box-sizing:border-box}
/* Gentle scroll-snap — the page scrolls normally but settles ("breaks") at each section's
   start when you pause; proximity (not mandatory) so fast scroll / tall sections never trap.
   scroll-padding-top offsets the sticky nav so a snapped section top sits just below it. */
html{scroll-behavior:smooth;scroll-snap-type:y proximity;scroll-padding-top:var(--nav-h)}
@media(prefers-reduced-motion:reduce){html{scroll-snap-type:none}}
body{margin:0;background:var(--bg);color:var(--t1);font-family:'Geist',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased;transition:background .3s,color .3s}
h1,h2,h3{margin:0;letter-spacing:-.035em;line-height:1.06;text-wrap:balance}
p{margin:0}
a{color:inherit;text-decoration:none}
.sec{max-width:var(--max);margin:0 auto;padding:clamp(3.5rem,7vw,6.5rem) clamp(1.25rem,4vw,3rem);scroll-snap-align:start;scroll-margin-top:var(--nav-h)}
.tag{display:inline-block;font-size:12.5px;font-weight:500;color:var(--accl);background:var(--accdim);border:1px solid var(--accring);border-radius:7px;padding:6px 13px;letter-spacing:.01em;margin-bottom:1.25rem}
.h{font-size:clamp(1.9rem,4.4vw,3rem);font-weight:700;color:var(--t1)}
.h .g{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{font-size:1.02rem;color:var(--t2);line-height:1.65;max-width:540px;margin:1rem 0 0}
.center{text-align:center}
.center .sub{margin-left:auto;margin-right:auto}
.btn{display:inline-flex;align-items:center;gap:7px;height:42px;padding:0 18px;border-radius:10px;font-size:14px;font-weight:500;border:1px solid var(--b2);color:var(--t1);background:var(--s2);cursor:pointer;transition:.18s}
.btn:hover{border-color:var(--accring);transform:translateY(-1px);box-shadow:0 10px 26px -12px var(--accring)}
.btn-p{background:var(--acc);border-color:transparent;color:#fff;box-shadow:0 10px 28px -8px var(--accring)}
.btn-p:hover{box-shadow:0 16px 36px -8px var(--accring)}
.btn-sm{height:36px;padding:0 15px;font-size:13px}
.inp{height:44px;padding:0 14px;border-radius:10px;border:1px solid var(--b2);background:var(--s1);color:var(--t1);font-size:14px}
.inp::placeholder{color:var(--t4)}
.note{font-size:12px;color:var(--t4);margin-top:.6rem}
.eyebrow{font-family:'Geist Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.08em;color:var(--t3);text-transform:uppercase}

/* nav */
.nav{position:sticky;top:0;z-index:50;display:flex;justify-content:center;padding:0 clamp(1.25rem,4vw,3rem);background:color-mix(in srgb,var(--bg) 82%,transparent);border-bottom:1px solid var(--b);backdrop-filter:blur(18px) saturate(180%);transition:padding-top .38s cubic-bezier(.4,0,.2,1),background .38s,border-color .38s}
.nav-in{width:100%;max-width:var(--max);height:58px;display:flex;align-items:center;justify-content:space-between;padding:0;border:1px solid transparent;border-radius:16px;background:transparent;box-shadow:0 0 0 0 transparent;transition:padding .38s cubic-bezier(.4,0,.2,1),background .38s,border-color .38s,box-shadow .38s}
.nav.scrolled{padding-top:clamp(.55rem,1.4vw,.9rem);background:transparent;border-bottom-color:transparent;backdrop-filter:none}
.nav.scrolled .nav-in{padding:0 .6rem 0 1rem;border-color:var(--b2);background:color-mix(in srgb,var(--s1) 82%,transparent);backdrop-filter:blur(18px) saturate(180%);box-shadow:inset 0 1px 0 var(--sheen),var(--shadow-sm)}
.logo{display:flex;align-items:center;gap:9px;font-weight:600;font-size:14.5px}
.logo-m{width:26px;height:26px;border-radius:7px;background:var(--grad);display:grid;place-items:center}
.logo-m svg{width:14px;height:14px}
.logo-chip{font-size:11.5px;color:var(--t3);border:1px solid var(--b);border-radius:5px;padding:2px 7px;background:var(--s1)}
.nlinks{display:flex;gap:.3rem;align-items:center}
.nlinks a{position:relative;font-size:13.5px;color:var(--t2);padding:.45rem .55rem;transition:color .2s}
.nlinks a::after{content:'';position:absolute;left:.55rem;right:.55rem;bottom:.18rem;height:1.5px;border-radius:2px;background:var(--grad);transform:scaleX(0);transform-origin:center;transition:transform .25s}
.nlinks a:hover{color:var(--t1)}.nlinks a:hover::after{transform:scaleX(1)}
.nact{display:flex;gap:.5rem;align-items:center}
.ico-btn{width:34px;height:34px;border-radius:9px;border:1px solid var(--b);background:transparent;color:var(--t3);cursor:pointer;display:grid;place-items:center;transition:.18s}
.ico-btn:hover{color:var(--t1);border-color:var(--b2);background:var(--s2)}

.badge{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--t2);border:1px solid var(--b2);background:var(--s1);border-radius:100px;padding:5px 13px 5px 9px;margin-bottom:1.5rem}
.badge .dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px color-mix(in srgb,var(--green) 22%,transparent)}
.sig{display:inline-block;margin-top:1.4rem;font-size:12.5px;font-family:'Geist Mono',ui-monospace,monospace;color:var(--t3);letter-spacing:.02em}
.heroform{display:flex;gap:8px;margin-top:1.5rem;max-width:420px;flex-wrap:wrap}
.heroform .inp{flex:1;min-width:200px}

/* rich card system — per-card accent via --c */
.grid{display:grid;gap:14px}
.g3{grid-template-columns:repeat(3,1fr)}
.card{--c:var(--acc);border:1px solid var(--b);background:var(--s1);border-radius:16px;padding:1.6rem;transition:transform .22s,border-color .22s,box-shadow .22s}
.card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--c) 55%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 32%,transparent),0 24px 56px -20px color-mix(in srgb,var(--c) 55%,transparent)}
.card-ico{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-size:19px;margin-bottom:1rem;color:var(--c);background:color-mix(in srgb,var(--c) 13%,transparent);border:1px solid color-mix(in srgb,var(--c) 30%,transparent);transition:box-shadow .22s}
.card:hover .card-ico{box-shadow:0 0 22px -3px color-mix(in srgb,var(--c) 60%,transparent)}
.card h3{font-size:1.02rem;font-weight:600;margin-bottom:.45rem}
.card p{font-size:13.5px;color:var(--t2);line-height:1.62}

/* showcase (two-col) */
.show{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,3.5rem);align-items:center}
.panel{position:relative;border:1px solid var(--b);background:var(--s1);border-radius:20px;padding:clamp(1.1rem,2.5vw,1.6rem);box-shadow:var(--shadow);transition:border-color .25s ease,box-shadow .25s ease}
.panel:hover{border-color:var(--accring);box-shadow:var(--shadow),0 0 0 1px var(--accring),0 0 46px -8px var(--glow)}
.panel::before{content:'';position:absolute;inset:0;border-radius:20px;background:radial-gradient(420px 220px at 80% 0%,var(--glow),transparent 70%);pointer-events:none}

/* rack canvas */
.rack-top{display:flex;justify-content:space-between;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:.9rem}
.rack-crumb{white-space:nowrap}
.rack-crumb{font-family:'Geist Mono',ui-monospace,monospace;font-size:11px;color:var(--t3)}
.rack-crumb b{color:var(--accl)}
.flowpanel{max-width:var(--max);margin:2.5rem auto 0}
.pill-static{font-size:12px;color:var(--t2);border:1px solid var(--b2);border-radius:8px;padding:5px 11px;background:var(--s2)}

/* principles */
.princ{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:2.5rem;text-align:left}
.princ .p{--c:var(--acc);border:1px solid var(--b);background:var(--s1);border-radius:16px;padding:1.5rem;transition:transform .2s,box-shadow .2s,border-color .2s}
.princ .p:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--c) 45%,transparent);box-shadow:0 18px 44px -20px color-mix(in srgb,var(--c) 50%,transparent)}
.princ .pi{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-size:17px;margin-bottom:.9rem;color:var(--c);background:color-mix(in srgb,var(--c) 13%,transparent);border:1px solid color-mix(in srgb,var(--c) 30%,transparent)}
.princ .p h3{font-size:.96rem;font-weight:600;margin-bottom:.4rem}.princ .p p{font-size:13px;color:var(--t2);line-height:1.6}

/* comparison */
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:2.5rem;text-align:left}
.cmprow{border:1px solid var(--b);background:var(--s1);border-radius:18px;padding:1.6rem;transition:transform .22s,box-shadow .22s,border-color .22s}
.cmprow:hover{transform:translateY(-3px);border-color:var(--accring);box-shadow:0 0 0 1px var(--accring),0 24px 54px -22px var(--glow)}
.cmptop{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1.1rem}
.cmptag{font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:7px;white-space:nowrap}
.cmptag.on{color:var(--green);background:color-mix(in srgb,var(--green) 14%,transparent)}
.cmptag.cl{color:var(--blue);background:color-mix(in srgb,var(--blue) 14%,transparent)}
.cmpname{font-size:14.5px;font-weight:600}.cmpmeta{font-size:12px;color:var(--t3);margin-top:2px}
.bar{margin-top:.9rem}.bar .lbl{display:flex;justify-content:space-between;font-size:12.5px;color:var(--t2);margin-bottom:5px}
.bar .lbl b{color:var(--t1);font-family:'Geist Mono',ui-monospace,monospace;font-weight:500}
.track{height:9px;border-radius:6px;background:var(--s3);overflow:hidden}.fill{height:100%;border-radius:6px}
.fill.good{background:linear-gradient(90deg,#34D399,#10B981)}.fill.bad{background:linear-gradient(90deg,#F87171,#EF4444)}
.verdict{margin-top:1rem;font-size:12.5px;color:var(--t2);border-top:1px solid var(--b);padding-top:.9rem}.verdict b{color:var(--t1)}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;border:1px solid var(--b);border-radius:16px;background:var(--b);overflow:hidden;margin-top:2.5rem;text-align:left}
.step{background:var(--s1);padding:1.7rem 1.5rem;transition:background .2s,box-shadow .2s}
.step:hover{background:var(--s2);box-shadow:inset 0 0 0 1px var(--accring)}
.step .si{transition:box-shadow .2s,border-color .2s}
.step:hover .si{border-color:var(--acc);box-shadow:0 0 22px -4px var(--glow)}
.step .n{font-family:'Geist Mono',ui-monospace,monospace;font-size:11px;color:var(--t4);letter-spacing:.06em}
.step .si{width:34px;height:34px;border-radius:9px;background:var(--accdim);color:var(--accl);border:1px solid var(--accring);display:grid;place-items:center;font-size:17px;margin:1rem 0 .9rem}
.step h3{font-size:.98rem;font-weight:600;margin-bottom:.4rem}.step p{font-size:13px;color:var(--t2);line-height:1.58}

/* pricing */
.trial{display:grid;grid-template-columns:1fr auto;gap:1.5rem;align-items:center;border:1px solid var(--accring);background:var(--accdim);border-radius:16px;padding:1.5rem 1.7rem;margin-top:2.5rem;text-align:left}
.trial h3{font-size:1.1rem;font-weight:600;margin-bottom:.3rem}.trial p{font-size:13px;color:var(--t2);max-width:760px}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:1rem;text-align:left}
.tier{--c:var(--acc);display:flex;flex-direction:column;border:1px solid var(--b2);background:var(--s1);border-radius:16px;padding:1.7rem;transition:transform .22s,box-shadow .22s,border-color .22s}
.tier:hover{transform:translateY(-4px)}
.tier.t-basic{--c:var(--blue);border-color:color-mix(in srgb,var(--blue) 35%,transparent);box-shadow:0 18px 44px -22px color-mix(in srgb,var(--blue) 50%,transparent)}
.tier.t-basic:hover{box-shadow:0 0 0 1px color-mix(in srgb,var(--blue) 40%,transparent),0 26px 58px -20px color-mix(in srgb,var(--blue) 62%,transparent)}
.tier.t-team{--c:var(--green);border-color:color-mix(in srgb,var(--green) 50%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--green) 30%,transparent),0 22px 56px -20px color-mix(in srgb,var(--green) 55%,transparent)}
.tier.t-team:hover{box-shadow:0 0 0 1px color-mix(in srgb,var(--green) 60%,transparent),0 30px 70px -18px color-mix(in srgb,var(--green) 68%,transparent)}
.tier.t-ent{--c:var(--violet);border-color:color-mix(in srgb,var(--violet) 35%,transparent);box-shadow:0 18px 44px -22px color-mix(in srgb,var(--violet) 50%,transparent)}
.tier.t-ent:hover{box-shadow:0 0 0 1px color-mix(in srgb,var(--violet) 40%,transparent),0 26px 58px -20px color-mix(in srgb,var(--violet) 62%,transparent)}
.tier .tname{font-size:1.1rem;font-weight:600;margin-bottom:.35rem}
.tier .tbadge{align-self:flex-start;font-size:11px;color:var(--c);background:color-mix(in srgb,var(--c) 13%,transparent);border:1px solid color-mix(in srgb,var(--c) 30%,transparent);border-radius:5px;padding:3px 9px;margin-bottom:.8rem}
.tier .tdesc{font-size:13px;color:var(--t2);line-height:1.55;margin-bottom:1.2rem}
.tier ul{list-style:none;padding:0;margin:0 0 1.4rem;display:flex;flex-direction:column;gap:.6rem}
.tier li{font-size:13px;color:var(--t2);display:flex;gap:8px;align-items:flex-start}
.tier li i{color:var(--c);font-size:15px;margin-top:1px}
.tier .btn{margin-top:auto;justify-content:center;width:100%}

/* cta */
.cta{max-width:var(--max);margin:0 auto;border:1px solid var(--b2);border-radius:20px;background:var(--s1);padding:clamp(2.25rem,5vw,3.5rem);display:grid;grid-template-columns:1fr auto;gap:3rem;align-items:center;position:relative;overflow:hidden;box-shadow:var(--shadow)}
.cta::before{content:'';position:absolute;top:0;left:18%;right:18%;height:1px;background:linear-gradient(90deg,transparent,var(--accring),transparent)}
.cta h2{font-size:clamp(1.6rem,3.4vw,2.4rem);font-weight:700}
.ctaform{display:flex;flex-direction:column;gap:8px;min-width:300px}
footer{border-top:1px solid var(--b);margin-top:1rem}
.foot{max-width:var(--max);margin:0 auto;padding:1.6rem clamp(1.25rem,4vw,3rem);display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--t3);flex-wrap:wrap;gap:1rem}
.foot a{color:var(--t3);margin-left:1.1rem}.foot a:hover{color:var(--t1)}

@media(max-width:880px){.show{grid-template-columns:1fr}.g3,.princ,.cmp,.steps,.tiers{grid-template-columns:1fr 1fr}.trial,.cta{grid-template-columns:1fr;gap:1.5rem}}
@media(max-width:560px){.g3,.princ,.cmp,.steps,.tiers{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}

.nav-in{position:relative}
.nav-burger{display:none}
@media(max-width:820px){
.nav-burger{display:grid}
.nlinks{display:none;position:absolute;top:calc(100% + 12px);left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;padding:8px;border:1px solid var(--b2);border-radius:14px;background:color-mix(in srgb,var(--s1) 97%,transparent);backdrop-filter:blur(18px) saturate(180%);box-shadow:var(--shadow);z-index:60}
.nav.open .nlinks{display:flex}
.nlinks a{padding:.7rem .8rem;font-size:15px;border-radius:9px;color:var(--t1)}
.nlinks a::after{display:none}
.nlinks a:hover,.nlinks a:active{background:var(--s2)}
}
@media(max-width:560px){
.ctaform{min-width:0;width:100%}
.heroform{max-width:none}
.svg-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.svg-scroll svg{min-width:560px}
.sec{padding-left:1.1rem;padding-right:1.1rem}
.cta,.trial{padding:1.5rem}
}

.ccy{position:relative;display:inline-block}
.ccy-btn{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--t2);border:1px solid var(--b2);border-radius:8px;padding:5px 10px;background:var(--s2);cursor:pointer;font-family:inherit}
.ccy-btn:hover{border-color:var(--accring);color:var(--t1)}
.ccy-chev{opacity:.6}
.ccy-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:118px;list-style:none;margin:0;padding:6px;border:1px solid var(--b2);border-radius:10px;background:color-mix(in srgb,var(--s1) 97%,transparent);backdrop-filter:blur(16px);box-shadow:var(--shadow);display:none;z-index:45}
.ccy.open .ccy-menu{display:block}
.ccy-menu li{font-size:13px;color:var(--t2);padding:7px 9px;border-radius:7px;cursor:pointer;font-family:'Geist Mono',ui-monospace,monospace}
.ccy-menu li:hover{background:var(--s2);color:var(--t1)}
.ccy-menu li.sel{color:var(--accl)}

/* ───────────────────────────────────────────────────────────────────────────
   2. MeraOpsWeb additions — same tokens as above, not in the static prototype
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Waitlist plumbing ─────────────────────────────────────────────────────── */

/* Honeypot — a hidden field real users never see; a filled value flags a bot (server-side).
   Off-screen rather than display:none so headless bots that skip hidden fields still fill it. */
.mk-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}

/* Turnstile challenge slot — empty + hidden until marketing.js renders the widget on submit.
   A little breathing room so the challenge, when shown, doesn't crowd the submit button. */
.mk-turnstile{margin:.2rem 0}
.mk-turnstile:not([hidden]){margin:.6rem 0}

/* Confirmation toast — shown after a successful waitlist sign-up. Glass panel in the brand
   chrome; slides up + fades in when marketing.js adds .on, auto-dismissing after a few seconds. */
.mk-toast{
  position:fixed;left:50%;bottom:24px;z-index:80;
  display:flex;align-items:center;gap:9px;
  padding:12px 18px;border-radius:12px;
  font-size:13.5px;font-weight:500;color:var(--t1);
  border:1px solid var(--accring);background:color-mix(in srgb,var(--s1) 96%,transparent);
  backdrop-filter:blur(16px) saturate(180%);box-shadow:var(--shadow);
  transform:translate(-50%,16px);opacity:0;pointer-events:none;
  transition:opacity .3s ease,transform .3s ease;
}
.mk-toast.on{opacity:1;transform:translate(-50%,0)}
.mk-toast-icon{
  display:grid;place-items:center;width:20px;height:20px;border-radius:50%;
  font-size:12px;color:#fff;background:var(--acc);
}
@media (prefers-reduced-motion:reduce){.mk-toast{transition:opacity .3s ease}}

/* ── Secondary pages (Privacy / Error / Waitlist-confirm) ──────────────────────
   These aren't in the v15 landing prototype; they reuse its tokens + .sec/.tag/.h/.sub
   so the whole site reads as one brand. */

/* Long-form legal prose (Privacy). */
.mk-prose{max-width:760px;margin:0 auto;padding:0 clamp(1.25rem,4vw,3rem) clamp(3rem,6vw,5rem);text-align:left}
.mk-prose h2{font-size:1.15rem;font-weight:600;color:var(--t1);margin:2rem 0 .6rem}
.mk-prose p{font-size:14.5px;color:var(--t2);line-height:1.7;margin:.6rem 0}
.mk-prose ul{margin:.6rem 0;padding-left:1.2rem}
.mk-prose li{font-size:14.5px;color:var(--t2);line-height:1.7;margin:.3rem 0}
.mk-prose a{color:var(--accl);text-decoration:underline;text-underline-offset:2px}
.mk-prose a:hover{color:var(--t1)}
.mk-prose strong{color:var(--t1);font-weight:600}
.mk-updated{font-size:12.5px;color:var(--t4);border:1px solid var(--b);background:var(--s1);border-radius:10px;padding:.7rem .9rem;margin-bottom:1.5rem}

/* Error / status page — the big gradient status glyph + action buttons. */
.mk-errcode{display:block;font-family:'Geist Mono',ui-monospace,monospace;font-weight:700;line-height:1;font-size:clamp(3.2rem,11vw,6rem);letter-spacing:-.04em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:.4rem}
.mk-erractions{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;margin-top:1.6rem}

/* ============================================================================
   AZURE-STYLE LANDING STRUCTURE — ported from docs/prototypes/meraops-landing-azure-v20.html.
   New layout/components on the brand atoms above: .zsec sections, .zhero hero, .trustbar,
   .bento features, .faq accordion, .caro guided walkthrough, scroll-spy nav, reveal-on-scroll,
   transitions + a large-screen scale-up + mobile pass. Some rules intentionally restyle shared
   atoms (.h, .card). A few stacked prototype version-overrides remain here; a de-dupe pass is
   the final cleanup chunk of this port.
   ============================================================================ */
/* ===================== AZURE-STYLE LANDING STRUCTURE ======================
   On-brand components layered on top of marketing.css. Reuses brand tokens, glass panels,
   glows, .money/.ccy, count-up + reveal. Index.cshtml is restructured to use these over the following chunks. */
/* main nav doubles as the scroll-spy index (single bar) */
.nlinks a.active{color:var(--t1)}
.nlinks a.active::after{transform:scaleX(1)}

/* generic labeled section */
.zsec{max-width:var(--max);margin:0 auto;padding:clamp(3.5rem,8vh,6.5rem) clamp(1.25rem,4vw,3rem);scroll-margin-top:calc(var(--nav-h) + 8px)}
.zsec-head{max-width:780px;margin:0 auto;text-align:center}
.eyebrow-lbl{display:inline-block;font:600 12px 'Geist Mono',ui-monospace,monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--accl);margin-bottom:1rem}
.zsec-head .sub{margin:1rem auto 0}
.zsec-body{margin-top:clamp(2.5rem,5vw,4rem)}
.zsec--alt{position:relative}
.zsec--alt::before{content:'';position:absolute;inset:0;background:radial-gradient(900px 460px at 50% 0%,var(--glow),transparent 70%);pointer-events:none;z-index:-1}

/* feature tabs (Azure "Explore products" filter) */
.ftabs{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;margin-bottom:clamp(1.75rem,3vw,2.5rem)}
.ftab{height:38px;padding:0 17px;border-radius:100px;border:1px solid var(--b2);background:var(--s1);color:var(--t2);font-size:13.5px;cursor:pointer;transition:.18s}
.ftab:hover{border-color:var(--accring);color:var(--t1)}
.ftab.active{background:var(--acc);border-color:transparent;color:#fff;box-shadow:0 8px 22px -10px var(--accring)}
.card.is-hidden{display:none}
.fcat{display:inline-block;font:600 11px 'Geist Mono',ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--t3);margin-bottom:.6rem}

/* FAQ accordion */
.faq{max-width:840px;margin:0 auto;text-align:left}
.faq-item{border:1px solid var(--b);border-radius:14px;background:var(--s1);margin-bottom:.8rem;transition:border-color .2s}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:1rem;padding:1.15rem 1.4rem;font-weight:600;font-size:1.02rem;color:var(--t1)}
.faq-item summary

::-webkit-details-marker{display:none}
.faq-n{font:600 13px 'Geist Mono',ui-monospace,monospace;color:var(--accl);flex-shrink:0}
.faq-chev{margin-left:auto;transition:transform .25s;color:var(--t3);flex-shrink:0}
.faq-item[open] .faq-chev{transform:rotate(180deg)}
.faq-item[open]{border-color:var(--accring)}
.faq-a{padding:0 1.4rem 1.3rem 3.3rem;color:var(--t2);font-size:14.5px;line-height:1.72}

/* how-it-works carousel (Azure "Resources" carousel) */
.caro-wrap{position:relative}
.caro{display:flex;gap:1.1rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:.25rem}
.caro::-webkit-scrollbar{display:none}
.caro>.step{scroll-snap-align:start;flex:0 0 clamp(260px,78vw,340px);border:1px solid var(--b);background:var(--s1);border-radius:16px;padding:1.6rem}
.caro .step .n{font:600 13px 'Geist Mono',ui-monospace,monospace;color:var(--t4)}
.caro .step .si{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;font-size:20px;margin:.9rem 0 1rem;color:var(--acc);background:var(--accdim);border:1px solid var(--accring)}
.caro .step h3{font-size:1.05rem;font-weight:600;margin-bottom:.45rem}
.caro .step p{font-size:13.5px;color:var(--t2);line-height:1.62}
.caro-ctrl{display:flex;gap:.5rem;justify-content:center;margin-top:1.6rem}
.caro-btn{width:40px;height:40px;border-radius:10px;border:1px solid var(--b2);background:var(--s1);color:var(--t2);cursor:pointer;display:grid;place-items:center;transition:.18s}
.caro-btn:hover{border-color:var(--accring);color:var(--t1)}

/* hero re-style for this layout */
.zhero{position:relative;overflow:hidden;border-bottom:1px solid var(--b)}
.zhero::before{content:'';position:absolute;inset:0;background:radial-gradient(900px 520px at 22% -10%,var(--glow),transparent 70%);pointer-events:none}
.zhero-in{position:relative;max-width:var(--max);margin:0 auto;padding:clamp(3rem,7vh,5.5rem) clamp(1.25rem,4vw,3rem) clamp(3rem,6vh,5rem);display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:stretch}
@media(min-width:1500px){:root{--max:1320px}}
@media(min-width:2000px){:root{--max:1440px}}
@media(max-width:900px){.zhero-in{grid-template-columns:1fr}}

.g4{grid-template-columns:repeat(4,1fr)}@media(max-width:980px){.g4{grid-template-columns:1fr 1fr}}@media(max-width:560px){.g4{grid-template-columns:1fr}}

/* ===================== v7 ELEGANCE / REFINEMENT LAYER (mock only) ===================== */
::selection{background:color-mix(in srgb,var(--acc) 32%,transparent);color:#fff}
:focus-visible{outline:2px solid var(--accring);outline-offset:3px;border-radius:7px}

/* staggered scroll-reveal (JS tags .rv, adds .in) */
.rv{opacity:0;transform:translateY(22px);transition:opacity .75s cubic-bezier(.22,.7,.2,1),transform .75s cubic-bezier(.22,.7,.2,1);transition-delay:var(--rvd,0ms);will-change:opacity,transform}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* eyebrow gets an accent tick */
.eyebrow-lbl{display:inline-flex;align-items:center;gap:.6rem}
.eyebrow-lbl::before{content:"";width:20px;height:1.5px;background:var(--grad);border-radius:2px}

/* section flow: hairline gradient divider between sections + soft alt tint */
.zsec{position:relative}
.zsec + .zsec::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(84%,var(--max));height:1px;background:linear-gradient(90deg,transparent,var(--b2),transparent)}
.zsec--alt{background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--s1) 55%,transparent) 20%,color-mix(in srgb,var(--s1) 55%,transparent) 80%,transparent)}

/* type polish */
.h{letter-spacing:-.026em;text-wrap:balance}
.zsec-head .sub{text-wrap:pretty}

/* nav + links smoother */
.nlinks a::after{height:2px;transition:transform .28s cubic-bezier(.4,0,.2,1)}
.btn{transition:transform .18s ease,box-shadow .25s ease,border-color .2s ease,background .2s ease}
.btn:active{transform:translateY(0) scale(.985)}

/* primary button sheen on hover */
.btn-p{position:relative;overflow:hidden}
.btn-p::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.18) 50%,transparent 70%);transform:translateX(-130%);transition:transform .65s ease;pointer-events:none}
.btn-p:hover::after{transform:translateX(130%)}

/* cards/panels: unified smoother lift */
.card,.p,.tier,.panel,.caro .step{transition:transform .27s cubic-bezier(.22,.7,.2,1),border-color .27s,box-shadow .27s,background .27s}
.card:hover,.p:hover,.caro .step:hover{transform:translateY(-5px)}

/* feature tabs: snappier + soft filter fade */
.ftab{transition:transform .16s ease,background .2s,border-color .2s,color .2s}
.ftab:active{transform:scale(.95)}
.ftab.active{transform:translateY(-1px)}
.fgrid{transition:opacity .26s ease}
.fgrid.filtering{opacity:.3}

/* FAQ: content slides/fades in on open + hover */
.faq-item:hover{border-color:var(--b2)}
.faq-item summary{transition:color .2s}
.faq-item[open] .faq-a{animation:faqIn .32s cubic-bezier(.22,.7,.2,1)}
@keyframes faqIn{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}

/* carousel: edge fade mask */
.caro-wrap{-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.caro .step:hover{border-color:var(--accring)}

/* hero entrance on load (staggered) */
.zhero .badge,.zhero h1,.zhero .lead,.zhero .heroform,.zhero .note,.zhero .panel{animation:heroIn .85s cubic-bezier(.22,.7,.2,1) both}
.zhero h1{animation-delay:.05s}.zhero .lead{animation-delay:.12s}.zhero .heroform{animation-delay:.18s}.zhero .note{animation-delay:.23s}.zhero .panel{animation-delay:.1s}
@keyframes heroIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.zhero *{animation:none!important}}

/* refined scrollbar */
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-thumb{background:var(--s3);border-radius:8px;border:3px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--b2)}

/* --- v8: restore the literal "black box" aesthetic + soften section seams --- */
.h .box{white-space:nowrap;color:#aab3c4;-webkit-text-fill-color:#aab3c4;background:linear-gradient(180deg,#1b1f28,#0a0c10);border:1px solid rgba(255,255,255,.10);border-radius:14px;padding:.05em .4em;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -14px 26px rgba(0,0,0,.55),0 16px 36px -10px rgba(0,0,0,.5)}
/* hero -> overview: drop the hard edge, add a soft tonal bridge */
.zhero{border-bottom:0}
.zhero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:200px;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--s1) 42%,transparent));pointer-events:none;z-index:0}
/* sections blend with soft ambient glows, not hard hairlines */
.zsec + .zsec::before{display:none}
.zsec--alt{background:radial-gradient(1300px 680px at 50% -4%,color-mix(in srgb,var(--s2) 62%,transparent),transparent 70%)}
.zsec--alt::before{background:radial-gradient(1050px 560px at 50% -8%,var(--glow),transparent 66%)}
/* the overview is the black-box moment: a quiet monospace closer line */
#overview .sig{margin-top:1.6rem;color:var(--t3)}

/* --- v9: seamless FLUSH-DARK transitions (kill the blotchy radials + bridge) --- */
.zhero::after{display:none}
.zsec--alt{background:none}
.zsec--alt::before{display:none}
/* keep gentle separation with breathing room only */
.zsec{padding-top:clamp(4rem,9vh,7rem);padding-bottom:clamp(4rem,9vh,7rem)}

/* --- v10: big, prominent Sankey (full-width proof visual) --- */
#proof{padding:clamp(1.5rem,3vw,2.75rem)}
#proof .svg-scroll{display:flex;justify-content:center}
#proof .svg-scroll>svg{width:100%;max-width:1100px;height:auto}

/* --- v11: FAQ vertical rhythm (even spacing, comfortable rows) --- */
#faq .zsec-body{margin-top:clamp(2.5rem,4.5vw,3.75rem)}
.faq{display:flex;flex-direction:column;gap:.85rem}
.faq-item{margin-bottom:0}
.faq-item summary{padding:1.3rem 1.5rem;line-height:1.35}
.faq-a{padding:0 1.5rem 1.45rem 3.5rem}

/* --- v12: Overview is THE PROBLEM (black-box heading room + monochrome, red-hover cards) --- */
#overview .h{line-height:1.34}
#overview .card{--c:var(--red)}
#overview .card-ico{color:var(--t3);background:color-mix(in srgb,var(--t3) 12%,transparent);border-color:var(--b2)}
#overview .card:hover .card-ico{color:var(--c);background:color-mix(in srgb,var(--c) 13%,transparent);border-color:color-mix(in srgb,var(--c) 30%,transparent);box-shadow:0 0 22px -3px color-mix(in srgb,var(--c) 60%,transparent)}

/* --- v13: tighter section padding (~112px -> ~62px) so seams aren't so airy --- */
.zsec{padding-top:clamp(2.75rem,5vh,4.5rem);padding-bottom:clamp(2.75rem,5vh,4.5rem)}

/* --- v14: feature ticks on the rack text side --- */
.featlist{list-style:none;margin:1.6rem 0 0;display:flex;flex-direction:column;gap:.75rem}
.featlist li{display:flex;align-items:flex-start;gap:.7rem;font-size:14.5px;color:var(--t2);line-height:1.5}
.featlist li i{color:var(--acc);font-size:17px;margin-top:1px;flex-shrink:0}

/* --- v15: guided-walkthrough carousel (one rich step per view) --- */
.caro-wrap{max-width:920px;margin-left:auto;margin-right:auto}
.caro>.step{flex:0 0 100%;max-width:none;padding:clamp(1.85rem,3.5vw,2.85rem)}
.caro .step-top{display:flex;align-items:center;gap:1rem;margin-bottom:1.25rem}
.caro .step-top .n{font:600 15px 'Geist Mono',ui-monospace,monospace;color:var(--accl)}
.caro .step-top .si{margin:0;width:48px;height:48px;font-size:22px}
.caro>.step h3{font-size:clamp(1.3rem,2.5vw,1.75rem);margin-bottom:.6rem}
.caro>.step p{font-size:15px;max-width:600px;line-height:1.65}
.caro>.step .featlist{margin-top:1.2rem}
.caro-foot{display:flex;align-items:center;justify-content:center;gap:1.2rem;margin-top:1.6rem}
.caro-dots{display:flex;gap:.5rem;align-items:center}
.caro-dot{width:8px;height:8px;border-radius:50%;background:var(--s3);border:0;cursor:pointer;padding:0;transition:width .25s,background .25s}
.caro-dot.active{background:var(--grad);width:24px;border-radius:5px}
.caro-count{text-align:center;margin-top:.9rem;font:500 12.5px 'Geist Mono',ui-monospace,monospace;color:var(--t3)}
.caro-count b{color:var(--t1)}

/* --- v16: bigger, more pronounced hero top + tighter padding --- */
.zhero-in{padding:clamp(1.5rem,3.5vh,3rem) clamp(1.25rem,4vw,3rem)}
.zhero h1{font-size:clamp(2.5rem,4vw,4rem);font-weight:700;line-height:1.04;letter-spacing:-.03em}
.zhero .lead{font-size:clamp(1.08rem,1.4vw,1.32rem);color:var(--t2);max-width:560px;margin:1.45rem 0 0;line-height:1.6}
.zhero .badge{margin-bottom:1.7rem}
.zhero .heroform{margin-top:1.8rem}

/* --- v17a: honest pre-launch trust strip --- */
.trustbar{border-top:1px solid var(--b);border-bottom:1px solid var(--b);background:color-mix(in srgb,var(--s1) 45%,transparent)}
.trustbar-in{max-width:var(--max);margin:0 auto;padding:1rem clamp(1.25rem,4vw,3rem);display:flex;flex-wrap:wrap;gap:.9rem 2rem;justify-content:center;align-items:center}
.tb-item{display:inline-flex;align-items:center;gap:.5rem;font-size:13px;color:var(--t2)}
.tb-item i{color:var(--accl);font-size:16px}

/* --- v17b: Linear-style bento features --- */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;text-align:left}
.bcard{position:relative;display:flex;flex-direction:column;border:1px solid var(--b);background:var(--s1);border-radius:18px;padding:1.7rem;transition:transform .26s cubic-bezier(.22,.7,.2,1),border-color .26s,box-shadow .26s}
.bcard:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--c) 55%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 30%,transparent),0 24px 56px -20px color-mix(in srgb,var(--c) 55%,transparent)}
.bcard .card-ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:20px;margin-bottom:1.1rem;color:var(--c);background:color-mix(in srgb,var(--c) 13%,transparent);border:1px solid color-mix(in srgb,var(--c) 30%,transparent)}
.bcard h3{font-size:1.1rem;font-weight:600;margin-bottom:.5rem}
.bcard p{font-size:13.5px;color:var(--t2);line-height:1.62}
.bcard.b-lg{grid-column:span 2}
.bcard.b-wide{grid-column:span 3}
.bmini{margin-top:auto;padding-top:1.4rem}
.bm-bar{display:flex;height:14px;border-radius:7px;overflow:hidden;gap:2px}
.bm-bar span{display:block}
.bm-tot{margin-top:.65rem;font:500 12px 'Geist Mono',ui-monospace,monospace;color:var(--t3)}
.bm-tot b{color:var(--t1)}

/* --- v18: pronounced, staggered slide-in for the black-box problem cards --- */
#overview .grid .card.rv{transform:translateY(48px) scale(.98)}
#overview .grid .card.rv.in{transform:none}
/* v20: drop carousel edge-fade mask (leftover; blurred single-card edges) */
.caro-wrap{-webkit-mask-image:none;mask-image:none}

/* --- v17c: mobile pass --- */
@media(max-width:900px){.bento{grid-template-columns:repeat(2,1fr)}.bcard.b-lg,.bcard.b-wide{grid-column:span 2}}
@media(max-width:760px){
  .nlinks{display:none}
  .zhero-in{grid-template-columns:1fr;gap:2rem}
  .zhero h1{font-size:clamp(2rem,8.5vw,2.9rem)}
  .show,.cmp,.tiers{grid-template-columns:1fr}
  .grid.g3,.grid.g4,.princ,.steps{grid-template-columns:1fr}
  .trustbar-in{gap:.7rem 1.2rem}.tb-item{font-size:12px}
  .bento{grid-template-columns:1fr}.bcard.b-lg,.bcard.b-wide{grid-column:span 1}
  .caro>.step{padding:1.4rem}
  .zsec{padding-left:1.1rem;padding-right:1.1rem}
}

/* The large rack/flow diagrams reveal with a longer, smoother slide-up (more presence than the
   default card reveal). Pairs with the .rv reveal observer in marketing.js. */
.zsec .flowpanel.rv{transform:translateY(72px) scale(.99);transition-duration:1.2s}
.zsec .flowpanel.rv.in{transform:none}

/* v20 fix: scroll-snap aligns each card's left edge to the scroller's padding-box edge, so a
   snapped card sat flush-left (leading border clipped) and — being narrower than the viewport —
   left a gap on the right where the next card peeked in. scroll-padding-inline insets the snap
   position itself by 1rem (< the 1.1rem gap), giving the card clear left breathing room while
   keeping both neighbours just off-screen. padding-inline keeps the matching visual gutter. */
.caro{padding-inline:1rem;scroll-padding-inline:1rem}

/* v21: elevate the guided-walkthrough cards from flat panels to an editorial, premium treatment —
   left-aligned content, a ghosted step-number watermark, a gradient surface with a top accent
   hairline + soft corner glow, a richer gradient icon tile and circular feature ticks. */
.caro>.step{
    position:relative; overflow:hidden; text-align:left;
    border:1px solid var(--b2); border-radius:20px;
    background:
        radial-gradient(120% 90% at 90% -10%, color-mix(in srgb,var(--acc) 12%,transparent), transparent 55%),
        linear-gradient(157deg, color-mix(in srgb,var(--s2) 75%,transparent), var(--s1) 62%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 34px 64px -42px rgba(0,0,0,.65);
}
/* top accent hairline */
.caro>.step::after{
    content:""; position:absolute; top:0; left:0; right:0; height:1px; pointer-events:none;
    background:linear-gradient(90deg, transparent, color-mix(in srgb,var(--acc) 75%,transparent) 28%, color-mix(in srgb,var(--violet) 75%,transparent) 72%, transparent);
}
/* ghosted step number watermark, behind the content */
.caro>.step::before{
    content:attr(data-step); position:absolute; top:-.18em; right:.06em; z-index:0;
    font:800 clamp(8rem,15vw,12.5rem)/1 'Geist',ui-sans-serif,sans-serif; letter-spacing:-.05em;
    color:transparent; -webkit-text-stroke:1.5px color-mix(in srgb,var(--acc) 20%,transparent);
    opacity:.55; pointer-events:none; user-select:none;
}
.caro>.step>*{position:relative; z-index:1}
/* richer icon tile: gradient fill + glow */
.caro .step-top{margin-bottom:1.5rem}
.caro .step-top .n{font:700 14px 'Geist Mono',ui-monospace,monospace; letter-spacing:.12em; color:var(--accl); opacity:.9}
.caro .step-top .si{
    background:linear-gradient(150deg, color-mix(in srgb,var(--acc) 28%,transparent), color-mix(in srgb,var(--violet) 22%,transparent));
    border:1px solid color-mix(in srgb,var(--acc) 48%,transparent); color:#fff;
    box-shadow:0 10px 26px -10px var(--glow), inset 0 1px 0 rgba(255,255,255,.18);
}
.caro>.step h3{letter-spacing:-.015em}
.caro>.step p{color:var(--t2)}
/* circular feature ticks */
.caro>.step .featlist{margin-top:1.4rem; gap:.85rem}
.caro>.step .featlist li{font-size:14px; align-items:center}
.caro>.step .featlist li i{
    width:21px; height:21px; border-radius:50%; margin-top:0; flex-shrink:0;
    display:grid; place-items:center; font-size:12px;
    color:var(--accl); background:color-mix(in srgb,var(--acc) 16%,transparent);
    border:1px solid color-mix(in srgb,var(--acc) 30%,transparent);
}
/* lift + warm the glow on hover */
.caro .step:hover{border-color:color-mix(in srgb,var(--acc) 50%,transparent); box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 40px 70px -42px var(--glow)}

/* v22: remove the primary-button hover sheen sweep (the streak that slid across on hover). */
.btn-p::after{content:none;display:none}

/* v22: 14-day trial — lift from a flat accent slab to an on-brand gradient panel with a glowing
   accent edge, so it reads as the inviting "start here" moment rather than a plain box. */
.trial{
    border:1px solid color-mix(in srgb,var(--acc) 42%,transparent);
    background:
        radial-gradient(130% 150% at 100% 0%, color-mix(in srgb,var(--violet) 18%,transparent), transparent 55%),
        linear-gradient(115deg, color-mix(in srgb,var(--acc) 18%,transparent), color-mix(in srgb,var(--acc) 6%,transparent) 55%, var(--s1));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 26px 60px -32px var(--glow);
    position:relative; overflow:hidden;
}
.trial::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(180deg,var(--acc),var(--violet))}
.trial > div{position:relative}
.trial h3{color:var(--t1)}
.trial:hover{border-color:color-mix(in srgb,var(--acc) 62%,transparent); box-shadow:inset 0 1px 0 rgba(255,255,255,.09), 0 34px 72px -30px var(--glow)}

/* v22: Sankey flair — a light "flow" sweeps along the gradient ribbons (clipped to them) and the
   reconciled total carries a soft pulsing glow. Both are decorative, so they're disabled under
   reduced-motion (the ribbons + total stay fully styled, just still). */
.snk-shine{opacity:0}
.snk-pulse{opacity:.45}
@media (prefers-reduced-motion: no-preference){
    .snk-shine{animation:snkSweep 4.2s cubic-bezier(.4,0,.2,1) infinite 1s}
    @keyframes snkSweep{0%{transform:translateX(-180px);opacity:0}12%{opacity:1}82%{opacity:1}100%{transform:translateX(900px);opacity:0}}
    .snk-pulse{animation:snkPulse 3.4s ease-in-out infinite}
    @keyframes snkPulse{0%,100%{opacity:.3}50%{opacity:.72}}
}
/* v23: tighten the hero's top/bottom padding so the section below peeks above the fold (better
   scroll affordance). Paired with a gentle density trim on the right-column cards in Index.cshtml
   so the whole hero shrinks ~85px rather than just adding inner whitespace. */
.zhero-in{padding-top:clamp(.55rem,1.3vh,1.1rem);padding-bottom:clamp(.85rem,1.6vh,1.4rem)}

/* ── Feature-card elegant flair (bento .bcard) ──────────────────────────────────
   Restrained, on-brand: top accent hairline, gradient icon tile, soft interior
   corner glow on hover. All driven by the per-card --c token + color-mix.        */
.bcard{overflow:hidden}
/* Top accent hairline — faint at rest, full on hover; clipped to the card radius. */
.bcard::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--c) 60%,transparent),transparent);
  opacity:.45;transition:opacity .26s}
.bcard:hover::before{opacity:1}
/* Soft interior corner glow, revealed on hover (stays inside the rounded corners). */
.bcard::after{content:"";position:absolute;top:-35%;right:-15%;width:55%;height:80%;
  background:radial-gradient(circle,color-mix(in srgb,var(--c) 15%,transparent),transparent 70%);
  opacity:0;transition:opacity .3s;pointer-events:none}
.bcard:hover::after{opacity:1}
/* Richer gradient icon tile + glow/lift on hover. */
.bcard .card-ico{background:linear-gradient(150deg,color-mix(in srgb,var(--c) 22%,transparent),color-mix(in srgb,var(--c) 6%,transparent));transition:box-shadow .22s,transform .22s}
.bcard:hover .card-ico{box-shadow:0 0 22px -3px color-mix(in srgb,var(--c) 60%,transparent);transform:translateY(-1px)}

/* ── Estate card: living hierarchy mini-diagram (DC → … → VM) ───────────────────
   A compact stepped tree that shows the model's structure; the VM leaf (where
   cost lands) is highlighted. Echoes the .bmini pattern on the first card.        */
.bm-tree{margin-top:auto;padding-top:1.4rem;display:flex;flex-direction:column;gap:6px}
.bm-node{position:relative;align-self:flex-start;
  font:500 11.5px 'Geist Mono',ui-monospace,monospace;color:var(--t2);
  background:color-mix(in srgb,var(--c) 9%,transparent);
  border:1px solid color-mix(in srgb,var(--c) 22%,transparent);
  border-radius:7px;padding:3px 9px;margin-left:calc(var(--d) * 17px);
  transition:background .26s,border-color .26s}
/* Small left connector tick from each child to its parent's indent. */
.bm-node::before{content:"";position:absolute;left:-10px;top:50%;width:10px;height:1px;
  background:color-mix(in srgb,var(--c) 38%,transparent)}
.bm-node:first-child::before{display:none}
.bm-node.leaf{color:var(--t1);background:color-mix(in srgb,var(--c) 18%,transparent);
  border-color:color-mix(in srgb,var(--c) 48%,transparent)}
.bcard:hover .bm-node{background:color-mix(in srgb,var(--c) 14%,transparent)}