/* Lytemesh enterprise automation site.
   Concept: the lapis square joined by a line (from the logo) is the connector motif: bullets, step markers, pipelines.
   One deliberate look: deep night hero with a live chat scene, paper sections, white data cards. */
:root{
  --night:#070C26; --night-2:#0D1540; --night-3:#16205A;
  --lapis:#2438A0; --lapis-2:#2D45B8; --lapis-bright:#5C77E8; --lapis-soft:#E4E9FA; --lapis-wash:#F0F3FD;
  --gold:#B8892B; --gold-ink:#7A5A16; --gold-bright:#E2BE72;
  --paper:#F4F6FC; --paper-2:#E9EDF8; --white:#FFFFFF;
  --ink:#0B1230; --ink-2:#38426A; --ink-3:#586284;
  --line:#DCE1F0; --line-2:#C7CFE6;
  --good:#12915A;
  --on-dark:#E7EBFA; --on-dark-2:#B7C0E3;
  --font-display:'Young Serif',Georgia,'Times New Roman',serif;
  --font-body:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --r:14px; --r-sm:9px;
  --shadow:0 1px 2px rgba(13,20,64,.06),0 10px 30px rgba(13,20,64,.07);
  --shadow-up:0 2px 4px rgba(13,20,64,.07),0 18px 44px rgba(13,20,64,.14);
  --gut:clamp(16px,4vw,32px);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.62 var(--font-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%}
a{color:var(--lapis);text-underline-offset:3px}
a:hover{color:var(--night-3)}
h1,h2,h3,h4{margin:0;font-weight:400;text-wrap:balance}
h1,h2{font-family:var(--font-display);letter-spacing:-.012em;line-height:1.08}
h1{font-size:clamp(2.35rem,5.4vw,4.3rem)}
h2{font-size:clamp(1.8rem,3.5vw,2.8rem)}
h3{font-family:var(--font-body);font-weight:650;font-size:1.18rem;line-height:1.3}
p{margin:0;text-wrap:pretty}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--gold-bright);outline-offset:3px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--white);color:var(--ink);padding:10px 14px;z-index:99;border-radius:6px}
.skip:focus{left:8px}
.wrap{width:100%;max-width:1264px;margin-inline:auto;padding-inline:var(--gut)}
.muted{color:var(--ink-3)}
.fine{font-size:.9rem;color:var(--ink-3)}

/* ------------------------------------------------------------ icons and motif */
.g{width:1.5rem;height:1.5rem;flex:none;display:block}
.nb{display:inline-block;width:11px;height:11px;background:var(--lapis);position:relative;flex:none;vertical-align:middle}
.nb::after{content:"";position:absolute;inset:3px;border:1.5px solid var(--gold-bright)}
.nb-sm{width:10px;height:10px}
.ico{display:inline-block;vertical-align:-4px}
.gt{display:grid;place-items:center;width:52px;height:52px;border-radius:12px;background:var(--lapis-soft);color:var(--lapis);transition:background .25s,color .25s,transform .25s}
.gt-sm{width:42px;height:42px;border-radius:10px}
.gt-dark{background:rgba(255,255,255,.08);color:var(--gold-bright);border:1px solid rgba(255,255,255,.12)}
.tag{display:inline-block;font:600 .74rem/1 var(--font-body);padding:5px 9px;border-radius:99px;letter-spacing:.02em;white-space:nowrap}
.tag-live{background:#DDF4E8;color:#0B6B42}
.tag-pilot{background:#FFF0CC;color:#7A5A16}
.tag-early{background:var(--lapis-soft);color:var(--lapis)}
.hero .tag-live{background:rgba(31,200,120,.18);color:#7FE3B4}
.hero .tag-pilot{background:rgba(226,190,114,.2);color:var(--gold-bright)}
.hero .tag-early{background:rgba(92,119,232,.25);color:#C5D0FF}

/* ------------------------------------------------------------ buttons */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:9px;min-height:50px;padding:0 24px;border-radius:var(--r-sm);font:650 1rem/1 var(--font-body);text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s,color .2s,border-color .2s;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--lapis);color:#fff;box-shadow:0 8px 20px rgba(36,56,160,.28)}
.btn-primary:hover{background:var(--lapis-2);color:#fff;box-shadow:0 12px 28px rgba(36,56,160,.36)}
.btn-gold{background:var(--gold-bright);color:var(--night);box-shadow:0 8px 24px rgba(226,190,114,.28)}
.btn-gold:hover{background:#EDCB86;color:var(--night);box-shadow:0 12px 30px rgba(226,190,114,.4)}
.btn-line{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.btn-line:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff}
.btn-ghost{background:var(--white);color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--lapis);color:var(--lapis)}
.btn-sm{min-height:42px;padding:0 18px;font-size:.94rem}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero .btn-row{margin-top:32px}

/* ------------------------------------------------------------ header */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;background:rgba(255,255,255,.9);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:72px}
.brand{display:flex;align-items:center;flex:none}
.brand img{height:46px;width:auto;display:block}
.site-nav{display:flex;align-items:center;gap:6px}
.site-nav>a,.has-menu>a{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;color:var(--ink);text-decoration:none;font-weight:600;font-size:.98rem;border-radius:8px;position:relative}
.site-nav>a:hover,.has-menu>a:hover{background:var(--lapis-wash);color:var(--lapis)}
.site-nav [aria-current="page"]:not(.btn){color:var(--lapis)}
.site-nav [aria-current="page"]:not(.btn)::after{content:"";position:absolute;left:14px;right:14px;bottom:5px;height:2px;background:var(--gold)}
.site-nav>a.btn{margin-left:8px;color:#fff}
.site-nav>a.btn:hover{background:var(--lapis-2);color:#fff}
.site-nav>a.btn::after{display:none}
.has-menu{position:relative}
.has-menu>a::before{content:"";order:2;width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.6}
.menu{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);width:min(760px,92vw);padding:14px;background:var(--white);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-up);grid-template-columns:repeat(2,1fr);gap:4px;margin-top:6px}
.menu::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.has-menu:hover>.menu,.has-menu:focus-within>.menu{display:grid}
.has-menu.shut>.menu{display:none!important}
.menu a{display:flex;gap:12px;align-items:flex-start;padding:10px;border-radius:10px;text-decoration:none;color:var(--ink)}
.menu a:hover{background:var(--lapis-wash)}
.menu a b{display:block;font-weight:650;font-size:.97rem;line-height:1.25}
.menu a small{display:block;color:var(--ink-3);font-size:.84rem;line-height:1.35;margin-top:2px}
.menu .gt{width:38px;height:38px;border-radius:9px}
.menu .gt .g{width:1.2rem;height:1.2rem}
.menu a.menu-all{grid-column:1/-1;justify-content:space-between;align-items:center;margin-top:4px;border-top:1px solid var(--line);border-radius:0 0 10px 10px;padding-top:14px;font-weight:650;color:var(--lapis)}
.nav-toggle{display:none;align-items:center;gap:10px;min-height:44px;padding:0 14px;border:1.5px solid var(--line-2);background:var(--white);border-radius:var(--r-sm);font:650 .95rem var(--font-body);color:var(--ink);cursor:pointer}
.nav-toggle .bars{width:18px;height:12px;border-top:2px solid currentColor;border-bottom:2px solid currentColor;position:relative}
.nav-toggle .bars::after{content:"";position:absolute;left:0;right:0;top:3px;border-top:2px solid currentColor}
@media (max-width:1180px){
  .nav-toggle{display:inline-flex}
  .site-nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:2px;background:var(--white);border-bottom:1px solid var(--line);padding:12px var(--gut) 20px;box-shadow:var(--shadow-up)}
  .site-nav[data-open="true"]{display:flex}
  .site-nav>a,.has-menu>a{min-height:50px;font-size:1.05rem}
  .has-menu>a::before{display:none}
  .menu,.has-menu:hover>.menu,.has-menu:focus-within>.menu{display:none}
  .site-nav .btn{margin:10px 0 0;justify-content:center}
}

/* ------------------------------------------------------------ hero */
.hero{position:relative;background:var(--night);color:#fff;overflow:hidden;isolation:isolate;padding-block:clamp(48px,7vw,96px) clamp(56px,8vw,112px)}
.hero-fx{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero-fx::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(75% 85% at 70% 35%,#000,transparent 80%);mask-image:radial-gradient(75% 85% at 70% 35%,#000,transparent 80%);animation:gridmove 30s linear infinite}
.orb{position:absolute;border-radius:50%;filter:blur(80px)}
.o1{width:560px;height:560px;right:-120px;top:-160px;background:#3248D8;opacity:.5;animation:drift 20s ease-in-out infinite alternate}
.o2{width:400px;height:400px;left:-120px;bottom:-160px;background:var(--gold);opacity:.2;animation:drift 24s ease-in-out infinite alternate-reverse}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-60px,50px,0) scale(1.15)}}
@keyframes gridmove{from{background-position:0 0}to{background-position:56px 56px}}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(28px,5vw,72px);align-items:center}
.hero h1{color:#fff;max-width:17ch}
.hero-sm h1{max-width:22ch}
.hero .lede{margin-top:24px;font-size:clamp(1.08rem,1.5vw,1.25rem);line-height:1.6;color:var(--on-dark-2);max-width:56ch}
.facts{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:36px;color:var(--on-dark);font-weight:550;font-size:.97rem}
.facts li{display:flex;align-items:center;gap:10px}
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:22px;font-size:.95rem;color:var(--on-dark-2)}
.crumb a{color:var(--on-dark);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3)}
.crumb a:hover{color:#fff;border-color:var(--gold-bright)}
.hero-art{position:relative}
.hero-art::before{content:"";position:absolute;inset:6% 4%;border-radius:36px;background:radial-gradient(60% 60% at 50% 40%,rgba(92,119,232,.35),transparent 70%);filter:blur(20px);z-index:-1}
@media (max-width:900px){
  .hero-grid{grid-template-columns:minmax(0,1fr)}
  .hero-art{max-width:420px;width:100%;margin-inline:auto}
}

/* scene (animated chat illustration) */
.scene{width:100%;height:auto;display:block;overflow:visible}
.scene text{font-family:var(--font-body)}
.scene .cap{font-size:10.5px;fill:#6B7597}
.scene .val{font-size:13px;font-weight:700;fill:#0B1230}
.scene .msg{font-size:12.2px}
.scene .msg-u{fill:#0B1230}
.scene .msg-a{fill:#fff}
.scene .who{font-size:12.5px;font-weight:700;fill:#fff}
.scene .st{font-size:10px;fill:#7FE3B4}
.wire{fill:none;stroke:rgba(226,190,114,.7);stroke-width:1.5;stroke-dasharray:4 6;animation:dash 1.4s linear infinite}
@keyframes dash{to{stroke-dashoffset:-20}}
.bub,.crd,.typing{opacity:0}
.b1{animation:b1 16s infinite both}.b2{animation:b2 16s infinite both}.b3{animation:b3 16s infinite both}.b4{animation:b4 16s infinite both}
.c1{animation:c1 16s infinite both}.c2{animation:c2 16s infinite both}.c3{animation:c3 16s infinite both}
.typing{animation:ty 16s infinite both}
.flt{animation:bob 6s ease-in-out infinite}
.crd.c2 .flt{animation-delay:-2s}.crd.c3 .flt{animation-delay:-4s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes b1{0%,3%{opacity:0;transform:translateY(10px)}6%,92%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes b2{0%,14%{opacity:0;transform:translateY(10px)}17%,92%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes b3{0%,27%{opacity:0;transform:translateY(10px)}30%,92%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes b4{0%,41%{opacity:0;transform:translateY(10px)}44%,92%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes c1{0%,46%{opacity:0;transform:translateX(14px)}50%,92%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes c2{0%,54%{opacity:0;transform:translateX(14px)}58%,92%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes c3{0%,62%{opacity:0;transform:translateX(14px)}66%,92%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes ty{0%,32%{opacity:0}34%,40%{opacity:1}42%,100%{opacity:0}}
.td{animation:tdot 1s ease-in-out infinite}.td:nth-child(2){animation-delay:.15s}.td:nth-child(3){animation-delay:.3s}
@keyframes tdot{0%,100%{opacity:.35}50%{opacity:1}}

/* ticker */
.ticker{background:var(--lapis);color:#fff;overflow:hidden;border-block:1px solid rgba(255,255,255,.12)}
.ticker-track{display:flex;width:max-content;animation:tick 42s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker ul{display:flex;align-items:center;flex:none}
.ticker li{display:flex;align-items:center;gap:20px;padding:18px 20px 18px 0;font:650 1rem var(--font-body);letter-spacing:.01em;white-space:nowrap}
.ticker li::after{content:"";width:9px;height:9px;background:var(--gold-bright);transform:rotate(45deg);margin-left:12px}
@keyframes tick{to{transform:translateX(-50%)}}

/* ------------------------------------------------------------ sections */
.sec{padding-block:clamp(60px,8vw,108px)}
.sec-white{background:var(--white)}
.sec-alt{background:var(--paper-2)}
.sec-tight{padding-top:clamp(20px,3vw,36px)}
.sec-head{max-width:760px;margin-bottom:clamp(32px,4.5vw,56px)}
.sec-head p{margin-top:16px;font-size:1.15rem;color:var(--ink-2);max-width:62ch}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head.center p{margin-inline:auto}
.sec-dark .sec-head p,.band-night .sec-head p{color:var(--on-dark-2)}
.sec-dark{background:var(--night);color:#fff}
.sec-dark h2,.band-night h2{color:#fff}
.split{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(28px,5vw,72px);align-items:start}
.split-head{position:sticky;top:104px}
.split-head p{margin-top:16px;color:var(--ink-2);font-size:1.12rem}
@media (max-width:900px){.split{grid-template-columns:minmax(0,1fr)}.split-head{position:static}}

/* gstrip (at a glance) */
.gstrip-wrap{position:relative;z-index:2;margin-top:clamp(-76px,-6vw,-52px)}
.gstrip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--white);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-up);overflow:hidden}
.gstrip>div{padding:22px 24px;border-left:1px solid var(--line)}
.gstrip>div:first-child{border-left:0}
.gstrip dt{font:650 .8rem/1 var(--font-body);color:var(--gold-ink);letter-spacing:.04em;margin-bottom:10px}
.gstrip dd{margin:0;font-weight:560;color:var(--ink);line-height:1.45;font-size:.99rem}
@media (max-width:980px){.gstrip{grid-template-columns:repeat(2,minmax(0,1fr))}.gstrip>div:nth-child(3){border-left:0}.gstrip>div:nth-child(n+3){border-top:1px solid var(--line)}}
@media (max-width:560px){.gstrip{grid-template-columns:minmax(0,1fr)}.gstrip>div{border-left:0;border-top:1px solid var(--line)}.gstrip>div:first-child{border-top:0}}

/* cards and grids */
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1020px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:28px;box-shadow:var(--shadow);transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s,border-color .3s}
.card p{color:var(--ink-2);margin-top:10px;font-size:1rem}
.card h3{margin-top:18px}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-up);border-color:var(--line-2)}
.card:hover .gt{background:var(--lapis);color:#fff;transform:rotate(-4deg) scale(1.05)}
a.card{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);position:relative}
a.card .more{margin-top:auto;padding-top:20px;display:flex;align-items:center;gap:8px;font-weight:650;color:var(--lapis);font-size:.97rem}
a.card .more .g{width:1.1rem;height:1.1rem;transition:transform .25s}
a.card:hover .more .g{transform:translateX(5px)}
a.card .tag{position:absolute;top:22px;right:22px}
.card-hook{font-family:var(--font-display);font-size:1.38rem;line-height:1.2;margin-top:18px;color:var(--ink)}
a.card .card-hook+p{margin-top:8px}
.sol{padding:26px}
.sol .card-hook{margin-top:20px}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.pills li{font-size:.84rem;font-weight:560;padding:5px 11px;border-radius:99px;background:var(--lapis-wash);color:var(--ink-2);border:1px solid var(--line)}
.gfit{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.sub-title{font-family:var(--font-display);font-size:1.5rem;margin:48px 0 20px}
.sub-title:first-child{margin-top:0}

/* connect create convert */
.ccc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;position:relative}
.ccc-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:30px;box-shadow:var(--shadow);position:relative}
.ccc-card h3{font-family:var(--font-display);font-weight:400;font-size:2rem;margin-top:20px}
.ccc-card>p{margin-top:8px;color:var(--ink-2)}
.ccc-card ul{margin-top:20px;display:grid;gap:11px}
.ccc-card li{display:flex;gap:12px;align-items:flex-start;color:var(--ink);font-size:.99rem;line-height:1.45}
.ccc-card li .nb{margin-top:6px}
.ccc-card::after{content:"";position:absolute;top:56px;right:-21px;width:22px;height:2px;background:repeating-linear-gradient(90deg,var(--gold) 0 4px,transparent 4px 8px);z-index:2}
.ccc-card:last-child::after{display:none}
@media (max-width:900px){.ccc{grid-template-columns:minmax(0,1fr)}.ccc-card::after{display:none}}

/* before / after */
.ba{display:grid;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);background:var(--white)}
.ba-row{display:grid;grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr);align-items:stretch;border-top:1px solid var(--line)}
.ba-row:first-child{border-top:0}
.ba-head{background:var(--night);color:#fff;font:650 .95rem var(--font-body)}
.ba-head>div{padding:16px 24px;display:flex;align-items:center;gap:10px}
.ba-head .ba-with{color:var(--gold-bright)}
.ba-no,.ba-yes{padding:20px 24px;display:flex;gap:14px;align-items:flex-start;font-size:1.02rem;line-height:1.45}
.ba-no{background:#F7F8FC;color:var(--ink-3)}
.ba-yes{background:var(--lapis-wash);color:var(--ink);font-weight:560}
.ba-mid{display:grid;place-items:center;color:var(--gold);background:var(--white)}
.ba-mid .g{width:1.2rem;height:1.2rem}
.ba-no .g{color:#9AA3C0;width:1.2rem;height:1.2rem;margin-top:2px}
.ba-yes .g{color:var(--good);width:1.2rem;height:1.2rem;margin-top:2px}
.ba-head>div:nth-child(2){padding:0}
@media (max-width:720px){.ba-row{grid-template-columns:minmax(0,1fr)}.ba-mid{display:none}.ba-head{display:none}.ba-yes{border-top:1px solid var(--line)}}
@media (min-width:721px){.ba-row:not(.ba-head){transition:background .2s}}

/* rail (sequence, numbered) */
.rail{position:relative;counter-reset:s;display:grid;gap:0}
.rail li{position:relative;padding:0 0 30px 64px;counter-increment:s}
.rail li:last-child{padding-bottom:0}
.rail li::before{content:counter(s);position:absolute;left:0;top:0;width:42px;height:42px;display:grid;place-items:center;background:var(--lapis);color:#fff;font:700 1rem var(--font-body);border-radius:10px;box-shadow:0 0 0 5px var(--paper),inset 0 0 0 3px var(--lapis),inset 0 0 0 4.5px rgba(226,190,114,.85)}
.sec-white .rail li::before{box-shadow:0 0 0 5px var(--white),inset 0 0 0 3px var(--lapis),inset 0 0 0 4.5px rgba(226,190,114,.85)}
.rail li::after{content:"";position:absolute;left:20px;top:46px;bottom:4px;width:2px;background:linear-gradient(var(--lapis),var(--lapis)) no-repeat 0 0/100% 0%,var(--line-2);transition:background-size .9s ease}
.rail li:last-child::after{display:none}
.rail h3{font-size:1.14rem;padding-top:8px}
.rail p{color:var(--ink-2);margin-top:6px;max-width:62ch}

/* pipeline (product flow) */
.pipe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;counter-reset:p}
.pipe li{counter-increment:p;position:relative;background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:24px 22px 22px;box-shadow:var(--shadow)}
.pipe li::before{content:counter(p);display:grid;place-items:center;width:34px;height:34px;border-radius:8px;background:var(--lapis);color:#fff;font:700 .92rem var(--font-body);margin-bottom:14px;box-shadow:inset 0 0 0 2.5px var(--lapis),inset 0 0 0 4px rgba(226,190,114,.85)}
.pipe li::after{content:"";position:absolute;top:40px;right:-19px;width:20px;height:2px;background:repeating-linear-gradient(90deg,var(--gold) 0 4px,transparent 4px 8px)}
.pipe li:nth-child(3n)::after,.pipe li:last-child::after{display:none}
.pipe p{margin-top:6px;color:var(--ink-2);font-size:.98rem}
@media (max-width:900px){.pipe{grid-template-columns:repeat(2,minmax(0,1fr))}.pipe li::after{display:none}}
@media (max-width:600px){.pipe{grid-template-columns:minmax(0,1fr)}}

/* flow visual in product hero */
.flowv{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:26px;backdrop-filter:blur(6px)}
.flowv h2{font-family:var(--font-body);font-size:.9rem;font-weight:650;letter-spacing:.05em;color:var(--gold-bright);margin-bottom:18px}
.flowv ol{display:grid;gap:0;counter-reset:f}
.flowv li{position:relative;counter-increment:f;display:flex;align-items:center;gap:14px;padding:12px 0 12px 0;color:#fff;font-weight:600;font-size:1rem;line-height:1.3}
.flowv li::before{content:counter(f);display:grid;place-items:center;width:32px;height:32px;border-radius:8px;border:1.5px solid rgba(255,255,255,.3);color:var(--on-dark);font:700 .88rem var(--font-body);flex:none;animation:lit 9s infinite;animation-delay:calc(var(--i)*1s)}
.flowv li::after{content:"";position:absolute;left:15.5px;top:46px;bottom:-12px;width:2px;background:repeating-linear-gradient(var(--gold-bright) 0 3px,transparent 3px 7px);opacity:.55}
.flowv li:last-child::after{display:none}
@keyframes lit{0%,9%{background:var(--gold-bright);color:var(--night);border-color:var(--gold-bright);transform:scale(1.12)}16%,100%{background:transparent;color:var(--on-dark);border-color:rgba(255,255,255,.3);transform:none}}

/* use cases / does */
.uc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.uc li{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:26px;box-shadow:var(--shadow);transition:transform .3s,box-shadow .3s,border-color .3s}
.uc li:hover{transform:translateY(-5px);box-shadow:var(--shadow-up)}
.uc li:hover .gt{background:var(--lapis);color:#fff;transform:rotate(-4deg) scale(1.05)}
.uc h3{margin-top:18px}
.uc p{color:var(--ink-2);margin-top:8px;font-size:1rem}
.uc4{grid-template-columns:repeat(4,minmax(0,1fr))}
.uc4 li{padding:24px 22px}
@media (max-width:1180px){.uc,.uc4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.uc,.uc4{grid-template-columns:minmax(0,1fr)}}

/* pains */
.pains{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;counter-reset:pn}
.pains>div{counter-increment:pn;border-top:3px solid var(--night);background:var(--white);padding:26px 24px 28px;border-radius:0 0 var(--r) var(--r);box-shadow:var(--shadow)}
.pains h3{margin-bottom:10px}
.pains p{color:var(--ink-2)}
@media (max-width:900px){.pains{grid-template-columns:minmax(0,1fr)}}

/* checks and chips */
.checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 36px}
.checks li{display:flex;gap:12px;align-items:flex-start;line-height:1.5}
.checks li::before{content:"";width:10px;height:10px;margin-top:8px;background:var(--lapis);box-shadow:inset 0 0 0 2px var(--lapis),inset 0 0 0 3.5px var(--gold-bright);flex:none}
@media (max-width:760px){.checks{grid-template-columns:minmax(0,1fr)}}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips li{padding:9px 16px;border-radius:99px;background:var(--white);border:1px solid var(--line-2);font-weight:600;font-size:.96rem;color:var(--ink)}
.extra{background:linear-gradient(135deg,var(--night),var(--night-3));color:#fff;border-radius:20px;padding:clamp(28px,5vw,56px);position:relative;overflow:hidden}
.extra::after{content:"";position:absolute;right:-80px;top:-80px;width:300px;height:300px;border-radius:50%;background:rgba(92,119,232,.35);filter:blur(60px)}
.extra h3{font-family:var(--font-display);font-weight:400;font-size:clamp(1.6rem,3vw,2.2rem);position:relative}
.extra>p{margin-top:12px;color:var(--on-dark-2);max-width:62ch;position:relative}
.extra .checks{margin-top:26px;position:relative}
.extra .checks li{color:var(--on-dark)}
.who{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.who strong{font-weight:650;margin-right:6px}
.who li{padding:8px 15px;border-radius:99px;border:1px solid rgba(255,255,255,.22);color:var(--on-dark);font-weight:560;font-size:.93rem}
.who-light li{border-color:var(--line-2);color:var(--ink);background:var(--white)}

/* ------------------------------------------------------------ data viz */
.dash{background:var(--white);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-up);overflow:hidden}
.dash-bar{display:flex;align-items:center;gap:10px;padding:14px 22px;border-bottom:1px solid var(--line);background:var(--lapis-wash)}
.dash-bar i{width:10px;height:10px;border-radius:50%;background:var(--line-2)}
.dash-bar b{font-weight:650;font-size:.95rem;margin-left:8px}
.dash-bar .samp{margin-left:auto;font:600 .78rem var(--font-body);color:var(--gold-ink);background:#FFF3D6;padding:5px 10px;border-radius:99px}
.dash-body{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1px;background:var(--line)}
.dash-body>*{background:var(--white);padding:24px;min-width:0}
.s4{grid-column:span 4}.s5{grid-column:span 5}.s6{grid-column:span 6}.s7{grid-column:span 7}.s12{grid-column:span 12}
@media (max-width:900px){.s4,.s5,.s6,.s7{grid-column:span 12}}
.vt{font:650 .98rem var(--font-body);color:var(--ink)}
.vs{font-size:.86rem;color:var(--ink-3);margin-top:2px}
.kpi b{display:block;font:650 clamp(2.3rem,4vw,3.2rem)/1.05 var(--font-body);letter-spacing:-.02em;margin-top:12px}
.kpi .spark{display:block;width:100%;height:40px;margin-top:12px}
.spark path{fill:none;stroke:var(--lapis-2);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.kpi .spark{clip-path:inset(-4px 100% -4px -4px)}
.in .kpi .spark,.kpi.in .spark{animation:reveal 1.4s .2s ease forwards}
@keyframes reveal{to{clip-path:inset(-6px -6px -6px -6px)}}
.fun{display:grid;gap:12px;margin-top:20px}
.fun li{display:grid;grid-template-columns:minmax(96px,32%) minmax(0,1fr) auto;gap:14px;align-items:center}
.fun .fl{font-size:.92rem;font-weight:560;line-height:1.25}
.fun .fl small{display:block;color:var(--ink-3);font-weight:400;font-size:.8rem}
.fun .ft{display:block;height:28px;border-radius:4px;background:var(--lapis-wash);overflow:hidden}
.fun .ft i{display:block;height:100%;width:var(--w);background:var(--c);border-radius:0 4px 4px 0;transform:scaleX(0);transform-origin:left}
.in .fun .ft i{animation:grow 1s cubic-bezier(.2,.7,.2,1) calc(var(--i)*110ms + 150ms) forwards}
@keyframes grow{to{transform:scaleX(1)}}
.fun .fv{font-variant-numeric:tabular-nums;font-weight:700;min-width:3ch;text-align:right}
.bars{display:grid;gap:14px;margin-top:20px}
.bars li{display:grid;grid-template-columns:minmax(80px,34%) minmax(0,1fr) auto;gap:12px;align-items:center;font-size:.92rem}
.bars .bt{display:block;height:14px;background:var(--lapis-wash);border-radius:3px;overflow:hidden}
.bars .bt i{display:block;height:100%;width:var(--w);background:var(--lapis-2);border-radius:0 4px 4px 0;transform:scaleX(0);transform-origin:left}
.in .bars .bt i{animation:grow 1s cubic-bezier(.2,.7,.2,1) calc(var(--i)*90ms + 150ms) forwards}
.bars .bv{font-weight:700;font-variant-numeric:tabular-nums}
.line{position:relative;margin-top:18px;height:170px}
.line svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.line .gl{position:absolute;left:0;right:0;height:1px;background:var(--line)}
.line .area{fill:var(--lapis-2);opacity:.1}
.line .ln{fill:none;stroke:var(--lapis-2);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.line svg{clip-path:inset(-6px 100% -6px -6px)}
.in .line svg{animation:reveal 1.6s ease forwards}
.line .dot{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--lapis-2);box-shadow:0 0 0 2px var(--white);transform:translate(-50%,-50%) scale(0);transition:transform .4s 1.4s}
.in .line .dot{transform:translate(-50%,-50%) scale(1)}
.line .endv{position:absolute;transform:translate(-100%,-170%);font:700 .86rem var(--font-body);color:var(--ink);font-variant-numeric:tabular-nums}
.axis{display:flex;justify-content:space-between;font-size:.8rem;color:var(--ink-3);margin-top:8px}
.donut{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-top:18px}
.dn{position:relative;width:150px;height:150px;flex:none}
.dn svg{width:100%;height:100%;transform:rotate(-90deg)}
.dn .c{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.dn .c b{font:700 1.7rem/1.1 var(--font-body)}
.dn .c small{font-size:.76rem;color:var(--ink-3)}
.donut circle{fill:none;stroke-width:6.5}
.donut .seg{stroke-dasharray:0 100;transition:stroke-dasharray 1.1s cubic-bezier(.2,.7,.2,1)}
.in .donut .seg{stroke-dasharray:var(--d) 100}
.legend{display:grid;gap:10px;font-size:.93rem}
.legend li{display:flex;align-items:center;gap:10px}
.legend i{width:12px;height:12px;border-radius:3px;background:var(--c);flex:none}
.legend b{margin-left:auto;padding-left:14px;font-variant-numeric:tabular-nums}
.note{font-size:.84rem;color:var(--ink-3);margin-top:16px}
.decay{background:var(--white);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-up);padding:26px 26px 22px}
.decay .line{height:230px;margin-top:22px}
.decay .area{fill:var(--lapis-2)}
.decay .pt{position:absolute;transform:translate(-50%,-100%);margin-top:-14px;background:var(--night);color:#fff;font:600 .8rem/1.3 var(--font-body);padding:7px 11px;border-radius:8px;white-space:nowrap}
.decay .pt::after{content:"";position:absolute;left:50%;bottom:-5px;width:10px;height:10px;background:var(--night);transform:translateX(-50%) rotate(45deg)}
.decay .pt.gold{background:var(--gold-ink);}
.decay .pt.gold::after{background:var(--gold-ink)}
.decay .dot2{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px var(--white);transform:translate(-50%,-50%)}
.decay .pt.lft{transform:translate(-14px,-100%)}.decay .pt.lft::after{left:20px}
.decay .yl{position:absolute;left:-2px;top:-20px;font-size:.78rem;color:var(--ink-3)}
@media (max-width:560px){.decay .pt{white-space:normal;max-width:130px;text-align:center}}

/* owner alerts visual */
.alerts{margin-top:30px;background:linear-gradient(165deg,var(--night),var(--night-3));border-radius:20px;padding:20px;box-shadow:var(--shadow-up);position:relative;overflow:hidden;max-width:420px}
.alerts::before{content:"";position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;background:rgba(92,119,232,.4);filter:blur(50px)}
.al-top{position:relative;display:flex;justify-content:space-between;align-items:center;color:var(--on-dark-2);font:650 .82rem var(--font-body);letter-spacing:.04em}
.al-top .live{font-style:normal;color:#7FE3B4;display:flex;gap:7px;align-items:center}
.al-top .live::before{content:"";width:8px;height:8px;border-radius:50%;background:#2FD08A;animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(47,208,138,.55)}50%{box-shadow:0 0 0 7px rgba(47,208,138,0)}}
.alerts ul{position:relative}
.alerts li{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.13);border-radius:14px;padding:12px 14px;margin-top:10px;opacity:0;transform:translateX(-22px)}
.alerts.in li{animation:slidein .7s cubic-bezier(.2,.7,.2,1) calc(var(--i)*.4s + .2s) forwards}
@keyframes slidein{to{opacity:1;transform:none}}
.alerts li b{display:block;color:#fff;font-size:.95rem;line-height:1.25;font-weight:650}
.alerts li .v{display:block;color:var(--on-dark-2);font-size:.86rem;margin-top:2px}
.alerts time{margin-left:auto;font-size:.76rem;color:var(--gold-bright);white-space:nowrap}

/* ------------------------------------------------------------ trust band */
.band-night{background:var(--night);color:#fff;position:relative;overflow:hidden;padding-block:clamp(60px,8vw,108px)}
.band-night::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 70% at 90% 0,rgba(92,119,232,.3),transparent 70%),radial-gradient(40% 50% at 0 100%,rgba(184,137,43,.22),transparent 70%)}
.band-night .wrap{position:relative}
.trust{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.trust li{padding:26px;border:1px solid rgba(255,255,255,.14);border-radius:var(--r);background:rgba(255,255,255,.04);transition:background .3s,transform .3s,border-color .3s}
.trust li:hover{background:rgba(255,255,255,.09);transform:translateY(-4px);border-color:rgba(226,190,114,.5)}
.trust h3{margin-top:18px;color:#fff}
.trust p{margin-top:8px;color:var(--on-dark-2);font-size:.98rem}
@media (max-width:1020px){.trust{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.trust{grid-template-columns:minmax(0,1fr)}}

/* steps (horizontal) */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;counter-reset:st;position:relative}
.steps li{counter-increment:st;position:relative;padding-top:64px}
.steps li::before{content:counter(st);position:absolute;left:0;top:0;width:44px;height:44px;display:grid;place-items:center;background:var(--lapis);color:#fff;font:700 1.05rem var(--font-body);border-radius:10px;box-shadow:inset 0 0 0 3px var(--lapis),inset 0 0 0 4.5px rgba(226,190,114,.85)}
.steps li::after{content:"";position:absolute;left:56px;right:8px;top:21px;height:2px;background:repeating-linear-gradient(90deg,var(--gold) 0 5px,transparent 5px 10px)}
.steps li:last-child::after{display:none}
.steps p{color:var(--ink-2);margin-top:8px}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}.steps li:nth-child(2)::after{display:none}}
@media (max-width:560px){.steps{grid-template-columns:minmax(0,1fr)}.steps li::after{display:none}}

/* faq */
.faq{display:grid;gap:12px;max-width:900px}
.faq details{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:0 22px;transition:box-shadow .25s,border-color .25s}
.faq details[open]{box-shadow:var(--shadow);border-color:var(--line-2)}
.faq summary{cursor:pointer;list-style:none;padding:20px 28px 20px 0;font-weight:650;font-size:1.06rem;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:4px;top:50%;width:10px;height:10px;border-right:2px solid var(--lapis);border-bottom:2px solid var(--lapis);transform:translateY(-70%) rotate(45deg);transition:transform .25s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq p{padding:0 0 22px;color:var(--ink-2);max-width:68ch}

/* cta */
.cta{background:var(--night);color:#fff;position:relative;overflow:hidden;isolation:isolate}
.cta::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 90% at 85% 10%,rgba(92,119,232,.4),transparent 65%),radial-gradient(40% 70% at 5% 100%,rgba(184,137,43,.28),transparent 65%)}
.cta-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(28px,5vw,72px);align-items:center;padding-block:clamp(56px,7vw,96px)}
.cta h2{color:#fff;max-width:20ch}
.cta p{margin-top:16px;color:var(--on-dark-2);font-size:1.15rem;max-width:52ch}
.cta-contact{display:grid;gap:0;border:1px solid rgba(255,255,255,.16);border-radius:var(--r);background:rgba(255,255,255,.05);overflow:hidden}
.cta-contact li{padding:18px 22px;border-top:1px solid rgba(255,255,255,.12)}
.cta-contact li:first-child{border-top:0}
.cta-contact span{display:block;font:600 .8rem var(--font-body);letter-spacing:.04em;color:var(--gold-bright);margin-bottom:4px}
.cta-contact a,.cta-contact b{color:#fff;font-weight:650;font-size:1.08rem;text-decoration:none}
.cta-contact a:hover{color:var(--gold-bright)}
@media (max-width:900px){.cta-grid{grid-template-columns:minmax(0,1fr)}}

/* forms */
.form-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,56px);align-items:start}
@media (max-width:900px){.form-grid{grid-template-columns:minmax(0,1fr)}}
.card-form{background:var(--white);border:1px solid var(--line);border-top:4px solid var(--lapis);border-radius:var(--r);padding:clamp(22px,3.5vw,38px);box-shadow:var(--shadow-up)}
.card-form h2,.card-form h3.fh{font-family:var(--font-display);font-weight:400;font-size:1.7rem;line-height:1.15}
.card-form .lead{margin:8px 0 24px;color:var(--ink-3)}
.field{display:grid;gap:7px;margin-bottom:18px}
.field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
@media (max-width:560px){.field-row{grid-template-columns:minmax(0,1fr)}}
.field label{font-weight:650;font-size:.95rem}
.opt{font-weight:400;color:var(--ink-3)}
.field input,.field select,.field textarea{width:100%;min-height:50px;padding:12px 14px;border:1.5px solid var(--line-2);border-radius:var(--r-sm);font:400 1rem var(--font-body);color:var(--ink);background:var(--white);transition:border-color .2s,box-shadow .2s}
.field textarea{min-height:104px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--lapis);box-shadow:0 0 0 4px rgba(36,56,160,.14)}
.form-error{color:#B3261E;font-weight:600;min-height:1.4em;margin:0 0 12px}
.result{margin-top:26px;padding:22px;background:var(--lapis-wash);border:1px solid var(--line-2);border-radius:12px}
.result h3{font-size:1.15rem}
.result textarea{width:100%;min-height:150px;margin:14px 0 0;padding:12px;border:1px solid var(--line-2);border-radius:8px;font:400 .96rem/1.5 var(--font-body);background:var(--white);color:var(--ink)}
.contact-list{display:grid;margin-bottom:34px;border:1px solid var(--line);border-radius:var(--r);background:var(--white);overflow:hidden;box-shadow:var(--shadow)}
.contact-list li{padding:22px 24px;border-top:1px solid var(--line)}
.contact-list li:first-child{border-top:0}
.contact-list span{display:block;font:600 .8rem var(--font-body);letter-spacing:.04em;color:var(--gold-ink);margin-bottom:6px}
.contact-list b{display:block;font-size:1.12rem;font-weight:650}
.contact-list .btn-row{margin-top:14px}

/* footer */
.site-footer{background:var(--night);color:var(--on-dark-2);padding-block:clamp(48px,6vw,80px) 28px;border-top:1px solid rgba(255,255,255,.08)}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1.25fr .9fr 1fr;gap:clamp(24px,3.4vw,48px)}
.foot-grid img{height:50px;width:auto;margin-bottom:18px;background:#fff;border-radius:10px;padding:6px 10px}
.foot-grid h2{font:650 .85rem var(--font-body);letter-spacing:.05em;color:var(--gold-bright);margin-bottom:16px}
.foot-grid ul{display:grid;gap:10px}
.foot-grid a{color:var(--on-dark);text-decoration:none}
.foot-grid a:hover{color:var(--gold-bright);text-decoration:underline}
.foot-grid p{font-size:.97rem}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:44px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);font-size:.9rem}
@media (max-width:1180px){.foot-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.foot-grid{grid-template-columns:minmax(0,1fr)}}

/* partner compare table */
.cmp{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--white);box-shadow:var(--shadow)}
.cmp-row{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1fr);border-top:1px solid var(--line)}
.cmp-row>div{padding:18px 22px}
.cmp-row>div:first-child{font-weight:650}
.cmp-row>div:nth-child(2){color:var(--ink-3);background:#F7F8FC}
.cmp-row>div:nth-child(3){background:var(--lapis-wash);font-weight:560}
.cmp-head{background:var(--night);color:#fff;border-top:0}
.cmp-head>div,.cmp-head>div:nth-child(n){background:transparent;color:#fff;font-weight:650}
.cmp-head>div:nth-child(3){color:var(--gold-bright)}
@media (max-width:720px){.cmp-row{grid-template-columns:minmax(0,1fr)}.cmp-head{display:none}.cmp-row>div:first-child{background:var(--paper-2)}}

/* reveal */
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1;transform:none}
.js .stagger>*{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0)*70ms)}
.js .stagger.in>*{opacity:1;transform:none}
.js .stagger.in>.card:hover,.js .stagger.in>.uc li:hover{transition-delay:0s}
.page[hidden]{display:none!important}


/* ============================================================ V3 motion layer */
/* page fade, scroll progress, hero entrance */
main,.page{animation:pagein .45s ease both}
@keyframes pagein{from{opacity:0}}
.prog{position:absolute;left:0;right:0;bottom:-1px;height:3px;background:linear-gradient(90deg,var(--lapis),var(--lapis-bright) 55%,var(--gold-bright));transform-origin:0 50%;transform:scaleX(var(--p,0));pointer-events:none}
.hero-net{position:absolute;inset:0;width:100%;height:100%;-webkit-mask-image:radial-gradient(95% 105% at 74% 38%,#000 18%,transparent 84%);mask-image:radial-gradient(95% 105% at 74% 38%,#000 18%,transparent 84%)}
.hero h1 .w{display:inline-block;opacity:0;transform:translateY(.55em);filter:blur(8px);animation:wordin .9s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--i)*65ms + 120ms)}
@keyframes wordin{to{opacity:1;transform:none;filter:blur(0)}}
.hero .crumb,.hero .pill-link{animation:fadeup .8s cubic-bezier(.2,.7,.2,1) both}
.hero .lede{animation:fadeup .9s .55s cubic-bezier(.2,.7,.2,1) both}
.hero .btn-row{animation:fadeup .9s .75s cubic-bezier(.2,.7,.2,1) both}
.hero .facts,.hero .who{animation:fadeup .9s .95s cubic-bezier(.2,.7,.2,1) both}
@keyframes fadeup{from{opacity:0;transform:translateY(18px)}}
.hero-art{transform:perspective(1100px) rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg));transition:transform .5s cubic-bezier(.2,.7,.2,1);animation:artin 1.1s .25s cubic-bezier(.2,.7,.2,1) backwards}
@keyframes artin{from{opacity:0;transform:translateY(26px) scale(.95)}}
.pill-link{display:inline-flex;align-items:center;gap:10px;margin-bottom:26px;padding:7px 16px 7px 12px;border-radius:99px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.07);color:var(--on-dark);font:600 .9rem var(--font-body);text-decoration:none;backdrop-filter:blur(6px);transition:background .25s,border-color .25s}
.pill-link:hover{background:rgba(255,255,255,.14);border-color:var(--gold-bright);color:#fff}
.pill-link .pd{width:8px;height:8px;border-radius:50%;background:#2FD08A;animation:pulse 1.8s ease-in-out infinite;flex:none}
.pill-link .g{width:1rem;height:1rem;transition:transform .25s}
.pill-link:hover .g{transform:translateX(4px)}

/* shimmer on the main call to action */
.btn-gold::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.6) 50%,transparent 65%);transform:translateX(-130%);animation:shine 5.5s ease-in-out infinite;pointer-events:none}
@keyframes shine{0%,62%{transform:translateX(-130%)}100%{transform:translateX(130%)}}

/* cursor spotlight on cards */
.card,.uc li,.ccc-card,.trust li,.pains>div{position:relative;isolation:isolate}
.card::before,.uc li::before,.ccc-card::before,.trust li::before,.pains>div::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),var(--spot,rgba(92,119,232,.14)),transparent 65%)}
.card:hover::before,.uc li:hover::before,.ccc-card:hover::before,.trust li:hover::before,.pains>div:hover::before{opacity:1}
.trust li{--spot:rgba(226,190,114,.16)}

/* stats strip */
.stats{background:var(--paper);padding-block:clamp(40px,5.5vw,72px) clamp(8px,2vw,24px)}
.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.stats-grid li{padding:6px 28px 6px 0;margin-left:28px;border-left:1px solid var(--line-2);padding-left:24px}
.stats-grid li:first-child{border-left:0;margin-left:0;padding-left:0}
.stats b{display:block;font:700 clamp(2.7rem,5.2vw,4rem)/1 var(--font-body);letter-spacing:-.035em;color:var(--lapis);font-variant-numeric:tabular-nums}
.stats li span{display:block;font-weight:650;margin-top:12px;font-size:1.04rem}
.stats li small{display:block;color:var(--ink-3);margin-top:4px;font-size:.92rem;line-height:1.45}
@media (max-width:860px){.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:30px}.stats-grid li:nth-child(odd){border-left:0;margin-left:0;padding-left:0}}

/* ------------------------------------------------------------ live flow */
.lf{margin-top:6px}
.lf-box{position:relative;aspect-ratio:1000/520;max-width:1120px;margin-inline:auto}
.lf-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.lf-p{fill:none;stroke:rgba(143,164,255,.3);stroke-width:1.6;transition:stroke .4s,stroke-width .4s}
.lf-p.on{stroke:var(--gold-bright);stroke-width:2.6;filter:drop-shadow(0 0 6px rgba(226,190,114,.75))}
.lf-in,.lf-out{position:absolute;top:0;bottom:0;width:23%}
.lf-in{left:0}.lf-out{right:0}
.lf-node{position:absolute;left:0;right:0;top:calc(var(--y)*1%);transform:translateY(-50%);display:flex;align-items:center;gap:12px;padding:9px 14px 9px 9px;min-height:54px;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);color:#fff;font:600 .93rem/1.25 var(--font-body);backdrop-filter:blur(4px);transition:border-color .3s,background .3s,box-shadow .3s}
.lf-node .gt{width:36px;height:36px;border-radius:9px}
.lf-node .gt .g{width:1.15rem;height:1.15rem}
.lf-node.on{border-color:var(--gold-bright);background:rgba(226,190,114,.14);box-shadow:0 0 0 4px rgba(226,190,114,.12),0 12px 32px rgba(0,0,0,.28)}
.lf-ok{margin-left:auto;flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:rgba(47,208,138,.2);color:#7FE3B4;opacity:.3;transform:scale(.8);transition:opacity .35s,transform .35s}
.lf-ok .g{width:.8rem;height:.8rem;stroke-width:2.6}
.lf-node.on .lf-ok{opacity:1;transform:scale(1)}
.lf-core{position:absolute;left:50%;top:50%;width:22%;aspect-ratio:1;transform:translate(-50%,-50%)}
.core-box{position:relative;z-index:2;width:100%;height:100%;border-radius:26%;background:linear-gradient(155deg,var(--lapis-2),var(--lapis) 55%,#1B2A7D);box-shadow:0 22px 60px rgba(36,56,160,.55);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;text-align:center;padding:12%}
.core-box::before{content:"";position:absolute;inset:6%;border-radius:21%;border:2px solid rgba(226,190,114,.85);pointer-events:none}
.core-box b{font:400 clamp(.82rem,1.6vw,1.28rem)/1.15 var(--font-display);color:#fff}
.core-box>.g{color:var(--gold-bright);width:clamp(1.3rem,2.6vw,2.1rem);height:auto}
.stages{display:grid;grid-template-columns:1fr 1fr;gap:4px 5px;margin-top:2px;width:100%}
.stages li{font:650 clamp(.54rem,.9vw,.72rem)/1 var(--font-body);color:var(--on-dark-2);padding:4px 3px;border-radius:5px;animation:stg 4.8s infinite;animation-delay:calc(var(--i)*1.2s)}
@keyframes stg{0%,22%{background:rgba(226,190,114,.95);color:#070C26}32%,100%{background:rgba(255,255,255,.1);color:var(--on-dark-2)}}
.ring{position:absolute;inset:0;border-radius:26%;border:2px solid rgba(143,164,255,.55);animation:ring 3.6s ease-out infinite}
.ring.r2{animation-delay:1.2s}.ring.r3{animation-delay:2.4s}
@keyframes ring{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.75);opacity:0}}
.lf-core.pulse .core-box{animation:cbeat .8s ease}
@keyframes cbeat{40%{transform:scale(1.06);box-shadow:0 22px 80px rgba(226,190,114,.5)}}
.lf-vl{display:none}
.lf-log{max-width:680px;margin:30px auto 0;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);border-radius:14px;overflow:hidden}
.lf-log-top{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;color:var(--on-dark-2);font:650 .82rem var(--font-body);letter-spacing:.04em;border-bottom:1px solid rgba(255,255,255,.1)}
.lf-log-top .live,.bh-top .live{font-style:normal;color:#7FE3B4;display:flex;gap:7px;align-items:center}
.lf-log-top .live::before,.bh-top .live::before{content:"";width:8px;height:8px;border-radius:50%;background:#2FD08A;animation:pulse 1.8s ease-in-out infinite}
.lf-log ol{padding:6px 0}
.lf-log li{display:flex;gap:16px;padding:9px 18px;color:var(--on-dark);font-size:.94rem;line-height:1.4}
.lf-log time{color:var(--gold-bright);font-variant-numeric:tabular-nums;flex:none;font-size:.86rem;padding-top:1px}
.lf-log li.new{animation:login .55s cubic-bezier(.2,.7,.2,1)}
@keyframes login{from{opacity:0;transform:translateY(-10px);background:rgba(226,190,114,.14)}}
@media (max-width:900px){
  .lf-box{aspect-ratio:auto;display:flex;flex-direction:column;align-items:center}
  .lf-svg{display:none}
  .lf-in,.lf-out{position:static;width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .lf-node{position:static;transform:none;min-height:52px;font-size:.9rem}
  .lf-in .lf-node:last-child:nth-child(odd),.lf-out .lf-node:last-child:nth-child(odd){grid-column:1/-1}
  .lf-core{position:relative;left:auto;top:auto;transform:none;width:min(230px,66%);margin:4px 0}
  .lf-vl{display:block;width:2px;height:46px;background:repeating-linear-gradient(var(--gold-bright) 0 6px,transparent 6px 12px);background-size:2px 24px;animation:vflow 1s linear infinite;opacity:.85}
  .core-box b{font-size:1.15rem}
  .stages li{font-size:.68rem}
}
@keyframes vflow{to{background-position:0 24px}}

/* ------------------------------------------------------------ interactive demo */
.demo{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.6fr);gap:clamp(18px,3vw,44px);align-items:start}
.demo-tabs{display:grid;gap:8px}
.demo-tab{display:flex;gap:14px;align-items:center;text-align:left;width:100%;padding:11px 14px 11px 11px;border-radius:14px;border:1px solid var(--line);background:var(--white);cursor:pointer;font:inherit;color:var(--ink);transition:border-color .25s,box-shadow .25s,background .25s,transform .25s}
.demo-tab:hover{border-color:var(--line-2);transform:translateX(3px)}
.demo-tab .gt{width:40px;height:40px;flex:none}
.demo-tab b{display:block;font-weight:650;font-size:1rem;line-height:1.25}
.demo-tab small{display:block;color:var(--ink-3);font-size:.84rem;margin-top:2px;line-height:1.35}
.demo-tab[aria-selected="true"]{border-color:var(--lapis);background:var(--lapis-wash);box-shadow:0 0 0 3px rgba(36,56,160,.12),var(--shadow);transform:translateX(6px)}
.demo-tab[aria-selected="true"] .gt{background:var(--lapis);color:#fff}
.demo-panel{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(18px,3vw,36px);align-items:stretch}
.demo-panel[hidden]{display:none}
.phone{width:100%;max-width:300px;margin-inline:auto;height:480px;border-radius:36px;background:#101A52;padding:8px;box-shadow:0 30px 70px rgba(13,20,64,.32),inset 0 0 0 2px #4157D0;display:flex;flex-direction:column}
.ph-top{display:flex;gap:11px;align-items:center;background:var(--lapis);color:#fff;padding:14px 16px;border-radius:28px 28px 0 0}
.ph-top b{display:block;font-size:.95rem;line-height:1.2}
.ph-top small{display:flex;align-items:center;gap:6px;color:#7FE3B4;font-size:.76rem;margin-top:2px}
.ph-top small i{width:7px;height:7px;border-radius:50%;background:#2FD08A}
.ph-logo{position:relative;width:30px;height:30px;border-radius:8px;background:var(--gold-bright);flex:none}
.ph-logo::after{content:"";position:absolute;inset:8px;border:2.6px solid var(--lapis);border-radius:3px}
.thread{flex:1;background:#EEF1FC;padding:14px;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;overflow:hidden}
.m{max-width:86%;padding:10px 13px;border-radius:14px;font-size:.92rem;line-height:1.4}
.m.u{align-self:flex-start;background:#fff;border:1px solid #D6DDF3;border-top-left-radius:4px;color:var(--ink)}
.m.a{align-self:flex-end;background:var(--lapis);color:#fff;border-top-right-radius:4px}
.js .demo .m:not(.show){display:none}
.m.show{animation:msgin .42s cubic-bezier(.2,.7,.2,1)}
@keyframes msgin{from{opacity:0;transform:translateY(10px) scale(.97)}}
.tp{align-self:flex-end;display:none;gap:4px;padding:13px 14px;background:var(--lapis);border-radius:14px;border-top-right-radius:4px}
.tp.on{display:flex}
.tp i{width:6px;height:6px;border-radius:50%;background:#fff;animation:tdot 1s ease-in-out infinite}
.tp i:nth-child(2){animation-delay:.15s}.tp i:nth-child(3){animation-delay:.3s}
.ph-in{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff;padding:10px 10px 10px 16px;border-radius:0 0 28px 28px;color:#5B6591;font-size:.86rem}
.ph-in em{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--gold-bright);color:var(--night);flex:none}
.ph-in em .g{width:1rem;height:1rem}
.behind{background:linear-gradient(165deg,var(--night),var(--night-3));color:#fff;border-radius:22px;padding:22px;position:relative;overflow:hidden;min-height:480px;display:flex;flex-direction:column;box-shadow:var(--shadow-up)}
.behind::before{content:"";position:absolute;right:-70px;top:-70px;width:220px;height:220px;border-radius:50%;background:rgba(92,119,232,.4);filter:blur(55px)}
.behind>*{position:relative}
.bh-top{display:flex;justify-content:space-between;align-items:center;color:var(--on-dark-2);font:650 .82rem var(--font-body);letter-spacing:.04em}
.clock{font:700 2.2rem/1 var(--font-body);color:var(--gold-bright);font-variant-numeric:tabular-nums;margin-top:12px}
.events{margin-top:20px;display:grid;gap:10px}
.ev{display:flex;gap:12px;align-items:center;padding:12px 14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:14px;transition:opacity .5s,transform .5s}
.ev b{display:block;color:#fff;font-size:.96rem;line-height:1.25;font-weight:650}
.ev span{display:block;color:var(--on-dark-2);font-size:.88rem;margin-top:2px}
.ev time{margin-left:auto;color:var(--gold-bright);font-size:.82rem;font-variant-numeric:tabular-nums}
.js .demo .ev:not(.show){opacity:0;transform:translateX(-18px)}
.bh-foot{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-top:auto;padding-top:24px}
.fast{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:99px;background:rgba(47,208,138,.16);color:#7FE3B4;font:650 .86rem var(--font-body);transition:opacity .4s}
.fast .g{width:.95rem;height:.95rem;stroke-width:2.4}
.js .demo .fast:not(.show){opacity:0}
.behind .fine{color:var(--on-dark-2);margin-top:12px;font-size:.82rem}
.behind .btn-ghost{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.3)}
.behind .btn-ghost:hover{background:rgba(255,255,255,.18);border-color:#fff;color:#fff}
@media (max-width:1020px){
  .demo{grid-template-columns:minmax(0,1fr)}
  .demo-tabs{display:flex;overflow-x:auto;gap:8px;padding:2px 2px 8px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  .demo-tab{flex:none;width:auto;scroll-snap-align:start}
  .demo-tab small{display:none}
  .demo-tab:hover,.demo-tab[aria-selected="true"]{transform:none}
}
@media (max-width:760px){.demo-panel{grid-template-columns:minmax(0,1fr)}.behind{min-height:0}}

/* ------------------------------------------------------------ before / after slider */
.cmpx{position:relative;height:440px;border-radius:20px;overflow:hidden;border:1px solid var(--line-2);box-shadow:var(--shadow-up);background:var(--white);user-select:none;-webkit-user-select:none;touch-action:pan-y;cursor:ew-resize}
.cx{position:absolute;inset:0;padding:64px clamp(16px,3vw,34px) 20px;display:flex;flex-direction:column}
.cx-before{background:#F6F7FB}
.cx-after{background:linear-gradient(160deg,#EAEFFE,#F7F9FF);clip-path:inset(0 0 0 var(--pos))}
.cx-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px}
.cx-top b{font-weight:650;font-size:1.02rem}
.chip{font:650 .78rem var(--font-body);padding:5px 10px;border-radius:99px}
.chip-bad{background:#FBE3E0;color:#9C2B22}
.chip-good{background:#DDF4E8;color:#0B6B42}
.cx-list li{display:flex;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.cx-list .dot{width:10px;height:10px;border-radius:50%;background:#D0463B;flex:none;box-shadow:0 0 0 4px rgba(208,70,59,.14)}
.cx-list b{display:block;font-size:.95rem;line-height:1.25;font-weight:600;color:var(--ink-2)}
.cx-list span{display:block;font-size:.84rem;color:#9C2B22}
.cx-list time{margin-left:auto;font-size:.82rem;color:var(--ink-3);white-space:nowrap}
.cx-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:8px}
.cx-col h3{display:flex;justify-content:space-between;align-items:center;font:650 .88rem var(--font-body);margin-bottom:8px;color:var(--ink)}
.cx-col h3 em{font-style:normal;background:var(--lapis);color:#fff;border-radius:99px;padding:2px 8px;font-size:.76rem}
.kc{background:#fff;border:1px solid var(--line);border-left:3px solid var(--lapis-2);border-radius:9px;padding:9px 10px;margin-bottom:8px;box-shadow:0 2px 6px rgba(13,20,64,.06)}
.kc b{display:block;font-size:.88rem;line-height:1.2}
.kc span{display:block;font-size:.76rem;color:#0A6B45;margin-top:2px;line-height:1.25;font-weight:600}
.cx-foot{margin-top:auto;font:650 .92rem var(--font-body);display:flex;align-items:center;gap:8px}
.cx-foot.bad{color:#9C2B22}.cx-foot.good{color:#0B6B42;justify-content:flex-end}
.cx-tag{position:absolute;top:16px;z-index:3;font:650 .8rem var(--font-body);padding:7px 12px;border-radius:99px;background:var(--night);color:#fff;pointer-events:none}
.cx-tag.l{left:16px}.cx-tag.r{right:16px;background:var(--gold-bright);color:var(--night)}
.cx-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;background:var(--gold-bright);transform:translateX(-1px);pointer-events:none;z-index:4}
.cx-handle i{position:absolute;top:50%;left:50%;width:46px;height:46px;border-radius:50%;background:var(--night);border:2px solid var(--gold-bright);transform:translate(-50%,-50%);box-shadow:0 8px 24px rgba(0,0,0,.3)}
.cx-handle i::before,.cx-handle i::after{content:"";position:absolute;top:50%;width:8px;height:8px;border-top:2px solid var(--gold-bright);border-left:2px solid var(--gold-bright)}
.cx-handle i::before{left:12px;transform:translateY(-50%) rotate(-45deg)}
.cx-handle i::after{right:12px;transform:translateY(-50%) rotate(135deg)}
.cmpx input{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none;margin:0}
.cmpx:focus-within{outline:3px solid var(--gold-bright);outline-offset:3px}
@media (max-width:620px){.cmpx{height:470px}.cx-tag{font-size:.72rem;padding:6px 10px}.cx-list time{display:none}}

/* ------------------------------------------------------------ estimator */
.roi{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(18px,3vw,36px);align-items:stretch}
.roi-in{padding:clamp(22px,3vw,34px)}
.roi-in h3{font-family:var(--font-display);font-weight:400;font-size:1.5rem;margin:0 0 22px}
.rf{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;margin-bottom:22px;align-items:baseline}
.rf label{font-weight:650;font-size:.97rem;line-height:1.3}
.rf output{font:700 1.2rem var(--font-body);color:var(--lapis);font-variant-numeric:tabular-nums;white-space:nowrap}
.rng{grid-column:1/-1;width:100%;-webkit-appearance:none;appearance:none;height:30px;background:transparent;cursor:pointer;margin:0;--p:50%}
.rng::-webkit-slider-runnable-track{height:6px;border-radius:99px;background:linear-gradient(90deg,var(--lapis) var(--p),var(--lapis-soft) var(--p))}
.rng::-moz-range-track{height:6px;border-radius:99px;background:var(--lapis-soft)}
.rng::-moz-range-progress{height:6px;border-radius:99px;background:var(--lapis)}
.rng::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:#fff;border:3px solid var(--lapis);margin-top:-9px;box-shadow:0 2px 8px rgba(13,20,64,.3);transition:transform .15s}
.rng::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid var(--lapis);box-shadow:0 2px 8px rgba(13,20,64,.3)}
.rng:active::-webkit-slider-thumb{transform:scale(1.15)}
.roi-out{background:linear-gradient(160deg,var(--night),var(--night-3));color:#fff;border-radius:20px;padding:clamp(22px,3vw,34px);position:relative;overflow:hidden;box-shadow:var(--shadow-up);display:flex;flex-direction:column}
.roi-out::before{content:"";position:absolute;right:-80px;top:-80px;width:260px;height:260px;border-radius:50%;background:rgba(92,119,232,.4);filter:blur(60px)}
.roi-out>*{position:relative}
.ro-k{color:var(--on-dark-2);font-weight:600}
.roi-big{font:700 clamp(2.6rem,6vw,4rem)/1.05 var(--font-body);letter-spacing:-.03em;color:var(--gold-bright);font-variant-numeric:tabular-nums;margin-top:8px}
.ro-s{color:var(--on-dark-2);margin-top:6px}
.ro-s span{color:#fff;font-weight:650}
.rbars{display:grid;gap:14px;margin:28px 0 22px}
.rb{display:grid;grid-template-columns:minmax(110px,32%) minmax(0,1fr) auto;gap:12px;align-items:center;font-size:.92rem;color:var(--on-dark)}
.rt{display:block;height:16px;border-radius:4px;background:rgba(255,255,255,.1);overflow:hidden}
.rt i{display:block;height:100%;border-radius:0 4px 4px 0;background:rgba(255,255,255,.45);transition:width .6s cubic-bezier(.2,.7,.2,1)}
.rb:last-child .rt i{background:var(--gold-bright)}
.rb b{font-variant-numeric:tabular-nums;min-width:3ch;text-align:right}
.ro-n{color:var(--on-dark-2);font-size:.96rem;margin-bottom:24px}
.ro-n b{color:#fff}
.roi-out .btn{align-self:flex-start;margin-top:auto}
@media (max-width:900px){.roi{grid-template-columns:minmax(0,1fr)}.rb{grid-template-columns:minmax(0,1fr) auto}.rb .rt{grid-column:1/-1;order:3}}

/* ------------------------------------------------------------ richer charts */
.dash-bar .lv{display:flex;align-items:center;gap:7px;font:650 .78rem var(--font-body);color:#0B6B42;font-style:normal;margin-left:8px}
.dash-bar .lv i{width:8px;height:8px;border-radius:50%;background:#2FD08A;animation:pulse 1.8s ease-in-out infinite}
.dash-bar .lv+.samp{margin-left:auto}
.hm{display:grid;gap:2px;margin-top:18px}
.hm-r{display:grid;grid-template-columns:34px minmax(0,1fr);gap:8px;align-items:center}
.hm-r>span{font-size:.76rem;color:var(--ink-3)}
.hm-c{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:2px}
.hm-c i{display:block;height:24px;border-radius:3px;opacity:0;transform:scale(.55)}
.in .hm-c i{animation:cellin .5s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--c)*55ms)}
@keyframes cellin{to{opacity:1;transform:none}}
.hm i.l0{background:#E4E9FA}.hm i.l1{background:#B9C6F3}.hm i.l2{background:#8499E8}.hm i.l3{background:#4A63D0}.hm i.l4{background:#1B2A7D}
.hm-c i:hover{outline:2px solid var(--gold);outline-offset:1px}
.hm-ax{display:grid;grid-template-columns:34px minmax(0,1fr);gap:8px;margin-top:4px}
.hm-ax>div{display:flex;justify-content:space-between;font-size:.74rem;color:var(--ink-3)}
.hm-leg{display:flex;align-items:center;gap:5px;font-size:.78rem;color:var(--ink-3);margin-top:12px}
.hm-leg i{width:20px;height:10px;border-radius:2px}
.hm-leg i.l0{background:#E4E9FA}.hm-leg i.l1{background:#B9C6F3}.hm-leg i.l2{background:#8499E8}.hm-leg i.l3{background:#4A63D0}.hm-leg i.l4{background:#1B2A7D}
.heat .note b{color:var(--ink)}
.meters ul{display:grid;gap:24px;margin-top:22px}
.mt{display:flex;justify-content:space-between;gap:12px;font-size:.93rem;font-weight:560}
.mt b{font-variant-numeric:tabular-nums}
.mbar{height:10px;border-radius:99px;background:var(--lapis-soft);margin-top:9px;overflow:hidden}
.mbar i{display:block;height:100%;width:var(--w);border-radius:99px;background:linear-gradient(90deg,var(--lapis-2),var(--lapis-bright));transform:scaleX(0);transform-origin:left}
.in .mbar i{animation:grow 1.1s cubic-bezier(.2,.7,.2,1) calc(var(--i)*140ms + 200ms) forwards}
.feed ul{margin-top:14px;display:grid}
.feed li{display:flex;align-items:center;gap:14px;padding:12px 0;border-top:1px solid var(--line)}
.feed li:first-child{border-top:0}
.feed li b{display:block;font-weight:650;font-size:.96rem;line-height:1.3}
.feed .sub{display:block;color:var(--ink-3);font-size:.88rem}
.feed time{margin-left:auto;color:var(--ink-3);font-size:.82rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.feed li.new{animation:feedin .6s cubic-bezier(.2,.7,.2,1)}
@keyframes feedin{from{opacity:0;transform:translateY(-14px);background:var(--lapis-wash)}}
.fun li,.bars li,.meters li{cursor:default}
.tip{position:fixed;left:0;top:0;z-index:999;pointer-events:none;background:var(--night);color:#fff;font:600 .82rem/1.35 var(--font-body);padding:7px 11px;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.28);max-width:240px;opacity:0;transition:opacity .15s}
.tip.on{opacity:1}
.line .xh{position:absolute;top:0;bottom:0;width:1px;background:var(--ink-3);opacity:0;pointer-events:none}
.line .xd{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--lapis-2);box-shadow:0 0 0 2px #fff;transform:translate(-50%,-50%);opacity:0;pointer-events:none}
.line.hov .xh,.line.hov .xd{opacity:1}

/* mini illustrations in Connect, Create, Convert */
.mv{height:72px;margin-top:22px;position:relative;display:flex}
.mv-connect{align-items:center;justify-content:space-between}
.mv-connect i{width:15px;height:15px;border-radius:50%;background:var(--lapis-soft);border:2px solid var(--lapis);z-index:1}
.mv-connect::before{content:"";position:absolute;left:8px;right:8px;top:50%;height:2px;margin-top:-1px;background:repeating-linear-gradient(90deg,var(--gold) 0 4px,transparent 4px 8px)}
.mv-connect b{position:absolute;top:50%;left:0;width:11px;height:11px;margin-top:-5.5px;background:var(--gold-bright);border-radius:50%;box-shadow:0 0 0 5px rgba(226,190,114,.3);animation:travel 2.6s ease-in-out infinite alternate;z-index:2}
@keyframes travel{from{left:0}to{left:calc(100% - 11px)}}
.mv-create{flex-direction:column;justify-content:center;gap:10px}
.mv-create i{height:11px;border-radius:6px;background:linear-gradient(90deg,var(--lapis-soft) 30%,#C9D3F6 50%,var(--lapis-soft) 70%);background-size:220% 100%;animation:shim 2.4s linear infinite}
.mv-create i:nth-child(1){width:92%}.mv-create i:nth-child(2){width:68%;animation-delay:-.7s}.mv-create i:nth-child(3){width:80%;animation-delay:-1.4s}
@keyframes shim{to{background-position:-220% 0}}
.mv-convert{align-items:flex-end;gap:8px}
.mv-convert i{flex:1;max-width:30px;height:var(--h);border-radius:5px 5px 0 0;background:linear-gradient(var(--lapis-bright),var(--lapis-2));transform-origin:bottom;animation:barpulse 2.6s ease-in-out infinite alternate}
.mv-convert i:nth-child(2){animation-delay:-.4s}.mv-convert i:nth-child(3){animation-delay:-.8s}.mv-convert i:nth-child(4){animation-delay:-1.2s}.mv-convert i:nth-child(5){animation-delay:-1.6s}
@keyframes barpulse{from{transform:scaleY(.6)}to{transform:scaleY(1)}}

/* sequence markers light up as they scroll into view */
.rail li::before,.pipe li::before,.steps li::before{transition:filter .6s,transform .6s}
.js .rail li:not(.on)::before,.js .pipe li:not(.on)::before,.js .steps li:not(.on)::before{filter:grayscale(1) opacity(.5)}
.js .rail li.on::before,.js .pipe li.on::before,.js .steps li.on::before{animation:pop .6s cubic-bezier(.2,.7,.2,1)}
@keyframes pop{40%{transform:scale(1.18)}}
.rail li.on::after{background-size:100% 100%}

/* ------------------------------------------------------------ reduced motion */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important}
  .bub,.crd,.alerts li{opacity:1!important;transform:none!important}
  .typing{display:none}
  .js .rv,.js .stagger>*{opacity:1;transform:none}
  .ticker-track{animation:none}
  .fun .ft i,.bars .bt i,.mbar i{transform:scaleX(1)}
  .hm-c i{opacity:1;transform:none}
  .kpi .spark,.line svg{clip-path:none}
  .line .dot{transform:translate(-50%,-50%) scale(1)}
  .donut .seg{stroke-dasharray:var(--d) 100}
  .pk,.ring,.btn-gold::after{display:none}
  .hero-art{transform:none!important}
}

/* floating chat button */
.wa-float{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:70;display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;-webkit-tap-highlight-color:transparent;animation:waIn .6s .9s cubic-bezier(.2,.7,.2,1) backwards}
.wa-ic{position:relative;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(150deg,#2FD27A,#128C4A);box-shadow:0 10px 26px rgba(10,80,45,.38),0 0 0 3px rgba(255,255,255,.9);transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s}
.wa-ic::before{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid #2FD27A;opacity:0;animation:waPulse 2.8s 2.4s ease-out infinite}
.wa-ic svg{width:29px;height:29px}
.wa-lbl{display:none;background:var(--night);color:#fff;font:650 .92rem/1 var(--font-body);padding:12px 16px;border-radius:99px;box-shadow:0 10px 26px rgba(7,12,38,.28);border:1px solid rgba(255,255,255,.22);white-space:nowrap}
.wa-float:hover .wa-ic,.wa-float:focus-visible .wa-ic{transform:scale(1.07);box-shadow:0 14px 32px rgba(10,80,45,.45),0 0 0 3px #fff}
.wa-float:focus-visible{outline:none}
.wa-float:focus-visible .wa-ic{outline:3px solid var(--gold-bright);outline-offset:4px}
@media (min-width:900px){.wa-lbl{display:block}}
@keyframes waIn{from{opacity:0;transform:translateY(16px) scale(.9)}to{opacity:1;transform:none}}
@keyframes waPulse{0%{opacity:.7;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.45)}}
.foot-base{padding-bottom:72px}
@media (prefers-reduced-motion:reduce){.wa-float{animation:none}.wa-ic::before{animation:none;display:none}.wa-ic{transition:none}}

/* ====================================================================== V4: guides, process, security, FAQ, quiz */
/* hero meta line and guide cards */
.gmeta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:24px;font-weight:600;font-size:.95rem;color:var(--on-dark-2)}
.gmeta span+span::before{content:"";display:inline-block;width:6px;height:6px;background:var(--gold-bright);transform:rotate(45deg);margin-right:18px;vertical-align:middle}
.gcard .gtopic{position:absolute;top:22px;right:22px;font:600 .74rem/1 var(--font-body);padding:5px 9px;border-radius:99px;background:var(--lapis-soft);color:var(--lapis)}
.gcard[hidden]{display:none}
.gcard .card-hook{font-size:1.28rem}
.topic-chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}
.tchip{min-height:44px;padding:0 18px;border:1.5px solid var(--line-2);background:var(--white);border-radius:99px;font:600 .95rem var(--font-body);color:var(--ink);cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s}
.tchip:hover{border-color:var(--lapis);color:var(--lapis)}
.tchip.on{background:var(--lapis);border-color:var(--lapis);color:#fff}

/* article layout */
.sec-art{padding-block:clamp(40px,6vw,76px)}
.art-grid{display:grid;grid-template-columns:minmax(190px,250px) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:start}
.toc{position:sticky;top:104px;font-size:.96rem}
.toc-t{font:650 .85rem var(--font-body);letter-spacing:.05em;color:var(--gold-ink);margin-bottom:14px}
.toc ol{display:grid;gap:2px;border-left:2px solid var(--line)}
.toc a{display:block;padding:8px 14px;margin-left:-2px;border-left:2px solid transparent;color:var(--ink-2);text-decoration:none;line-height:1.35;transition:color .2s,border-color .2s,background .2s}
.toc a:hover{color:var(--lapis);background:var(--lapis-wash)}
.toc a.on{color:var(--lapis);border-color:var(--gold);font-weight:650}
.toc-cta{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-weight:650;color:var(--lapis);text-decoration:none}
.toc-cta .g{width:1.1rem;height:1.1rem;transition:transform .25s}
.toc-cta:hover .g{transform:translateX(4px)}
.prose{max-width:760px;min-width:0}
.prose .art-sec{margin-top:clamp(40px,5vw,60px)}
.prose .keybox+.art-sec{margin-top:clamp(36px,4.5vw,52px)}
.prose h2{font-size:clamp(1.55rem,2.6vw,2.05rem);scroll-margin-top:100px}
.prose p{margin-top:16px;font-size:1.08rem;line-height:1.72;color:var(--ink)}
.prose p.callout{margin-top:22px;padding:18px 22px;background:var(--lapis-wash);border:1px solid var(--line-2);border-radius:12px;font-size:1.02rem;color:var(--ink-2)}
.keybox{background:var(--white);border:1px solid var(--line-2);border-radius:var(--r);padding:26px 28px;box-shadow:var(--shadow)}
.keybox h2{font:650 .86rem var(--font-body);letter-spacing:.05em;color:var(--gold-ink);margin-bottom:6px}
.plist{display:grid;gap:0}
.plist li{display:flex;gap:14px;align-items:flex-start;margin-top:13px;line-height:1.55;font-size:1.04rem}
.plist .nb{margin-top:8px}
.prose>.art-sec>.plist{margin-top:18px}
.prose .rail{margin-top:26px}
.kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:22px 0 0}
.kpis>div{padding:16px 18px;background:var(--white);border:1px solid var(--line);border-radius:12px}
.kpis dt{font-weight:650;font-size:1rem}
.kpis dd{margin:4px 0 0;color:var(--ink-2);font-size:.95rem;line-height:1.5}
@media (max-width:900px){.art-grid{grid-template-columns:minmax(0,1fr)}.toc{position:static;border:1px solid var(--line);border-radius:12px;padding:18px;background:var(--white)}.toc ol{border-left:0}.toc a{border-left:0;padding:7px 4px;margin-left:0}.toc a.on{background:none}}
@media (max-width:560px){.kpis{grid-template-columns:minmax(0,1fr)}}

/* article visuals */
.prose figure.vz,.prose .decay.vz{margin:30px 0;padding:24px;background:var(--white);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);min-width:0}
.prose figcaption.vt{font:650 1rem var(--font-body)}
.scorecard ul{display:grid;gap:10px;margin-top:20px}
.scorecard li{position:relative;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 16px;border-radius:10px;background:var(--lapis-wash);overflow:hidden;isolation:isolate}
.scorecard li::before{content:"";position:absolute;inset:0;z-index:-1;width:var(--w,50%);background:linear-gradient(90deg,#C9D4F7,#AFC0F2);transform-origin:0 50%;transform:scaleX(0);transition:transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i)*.12s + .15s)}
.scorecard.in li::before{transform:scaleX(1)}
.scorecard li b{font:700 1.05rem var(--font-body);color:var(--lapis);font-variant-numeric:tabular-nums}
.sc-bands{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.sc-bands span{font-size:.92rem;padding:7px 14px;border-radius:99px;border:1px solid var(--line-2);color:var(--ink-2)}
.sc-bands b{color:var(--ink)}
.sc-bands .b-hot{background:#FFF0CC;border-color:#EBCB83;color:#6A4C10}
.sc-bands .b-warm{background:var(--lapis-soft);border-color:#C9D4F7}
.tbl-wrap{margin-top:18px;overflow-x:auto}
.matrix table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:620px}
.matrix th,.matrix td{padding:12px 10px;border-top:1px solid var(--line);text-align:left;vertical-align:middle}
.matrix thead th{font:650 .82rem var(--font-body);color:var(--ink-3);border-top:0;padding-bottom:8px}
.matrix tbody th{font-weight:650;min-width:170px}
.pips{display:inline-flex;gap:3px}
.pips i{width:11px;height:11px;border-radius:2px;background:var(--line-2)}
.pips i.f{background:var(--lapis-2)}
.pips.risk i.f{background:var(--gold)}
.verdict{display:inline-block;padding:5px 11px;border-radius:99px;font:650 .8rem/1 var(--font-body);white-space:nowrap}
.v0{background:#DDF4E8;color:#0B6B42}.v1{background:#FFF0CC;color:#7A5A16}.v2{background:var(--lapis-soft);color:var(--lapis)}
@media (max-width:700px){
  .matrix .tbl-wrap{overflow:visible}
  .matrix table,.matrix thead,.matrix tbody,.matrix tr,.matrix th,.matrix td{display:block;min-width:0}
  .matrix thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .matrix tr{padding:14px 0;border-top:1px solid var(--line)}
  .matrix th,.matrix td{border:0;padding:4px 0}
  .matrix td{display:flex;justify-content:space-between;align-items:center;gap:12px}
  .matrix td::before{content:attr(data-l);color:var(--ink-3);font-size:.88rem}
}
.rem-list{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:30px}
.rem-list::before{content:"";position:absolute;left:8px;right:8px;top:9px;height:2px;background:var(--line-2)}
.rem-list::after{content:"";position:absolute;left:8px;right:8px;top:9px;height:2px;background:var(--lapis);transform-origin:0 50%;transform:scaleX(0);transition:transform 1.8s cubic-bezier(.4,.1,.2,1) .2s}
.rem.in .rem-list::after{transform:scaleX(1)}
.rem-list li{position:relative;padding-top:34px}
.rem-list .rn{position:absolute;left:0;top:0;width:20px;height:20px;background:var(--white);border:2px solid var(--line-2);transform:rotate(45deg) scale(.82);transition:background .4s,border-color .4s,transform .4s;transition-delay:calc(var(--i)*.45s + .2s);z-index:1}
.rem.in .rem-list .rn{background:var(--lapis);border-color:var(--gold-bright);transform:rotate(45deg) scale(.82)}
.rem-list .rt{display:block;font:650 .8rem var(--font-body);color:var(--gold-ink);margin-bottom:4px}
.rem-list b{display:block;font-size:1.02rem}
.rem-list p{margin-top:6px!important;font-size:.95rem!important;line-height:1.5!important;color:var(--ink-2)!important}
@media (max-width:640px){.rem-list{grid-template-columns:minmax(0,1fr);gap:22px}.rem-list::before,.rem-list::after{left:9px;right:auto;top:8px;bottom:8px;width:2px;height:auto;transform-origin:50% 0}.rem-list::after{transform:scaleY(0)}.rem.in .rem-list::after{transform:scaleY(1)}.rem-list li{padding:0 0 0 38px}.rem-list .rn{top:2px}}
.mlist{display:grid;gap:0;margin-top:22px}
.mlist li{display:grid;grid-template-columns:46px minmax(0,1fr);gap:18px;align-items:start;margin-top:14px;padding:20px 22px;background:var(--white);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);transition:transform .3s,box-shadow .3s}
.mlist li:hover{transform:translateY(-3px);box-shadow:var(--shadow-up)}
.mlist .mn{display:grid;place-items:center;width:46px;height:46px;border-radius:11px;background:var(--lapis);color:#fff;font:700 1.1rem var(--font-body)}
.mlist h3{font-size:1.1rem}
.prose .mlist p{margin-top:4px;font-size:1rem;line-height:1.55;color:var(--ink-2)}
.mlist small{display:block;margin-top:8px;color:var(--ink-3);font-size:.92rem;line-height:1.45}

/* resources glossary */
.gloss{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 22px}
.gloss>div{padding:20px 22px;background:var(--paper);border:1px solid var(--line);border-radius:12px;scroll-margin-top:100px}
.gloss dt{font-weight:650;font-size:1.04rem}
.gloss dd{margin:6px 0 0;color:var(--ink-2);font-size:.99rem;line-height:1.55}
@media (max-width:700px){.gloss{grid-template-columns:minmax(0,1fr)}}

/* how we work: timeline */
.tl{position:relative;display:grid;gap:0}
.tl li{position:relative;display:grid;grid-template-columns:64px minmax(0,1.1fr) minmax(0,.9fr);gap:8px 28px;align-items:start;padding-bottom:36px}
.tl li:last-child{padding-bottom:0}
.tl li::after{content:"";position:absolute;left:21px;top:50px;bottom:4px;width:2px;background:linear-gradient(var(--lapis),var(--lapis)) no-repeat 0 0/100% 0%,var(--line-2);transition:background-size 1s ease .3s}
.tl li.on::after{background-size:100% 100%}
.tl li:last-child::after{display:none}
.tl-n{display:grid;place-items:center;width:44px;height:44px;border-radius:11px;background:var(--lapis);color:#fff;font:700 1.05rem var(--font-body);box-shadow:0 0 0 5px var(--white),0 0 0 6.5px var(--gold-bright)}
.tl li.on .tl-n{animation:pop .6s cubic-bezier(.2,.7,.2,1)}
.tl-main h3{font-family:var(--font-display);font-weight:400;font-size:1.55rem;padding-top:5px}
.tl-main p{margin-top:8px;color:var(--ink-2);max-width:52ch}
.tl-side{display:grid;gap:10px;margin:0}
.tl-side>div{padding:14px 18px;background:var(--paper);border:1px solid var(--line);border-radius:12px}
.tl-side dt{font:650 .8rem var(--font-body);color:var(--gold-ink);letter-spacing:.03em}
.tl-side dd{margin:4px 0 0;font-size:.98rem;line-height:1.5}
@media (max-width:900px){.tl li{grid-template-columns:52px minmax(0,1fr);gap:6px 18px}.tl-side{grid-column:2}.tl li::after{left:21px}}

/* readiness checklist */
.ready{display:grid;grid-template-columns:minmax(150px,200px) minmax(0,1fr);gap:clamp(22px,4vw,48px);align-items:center;background:var(--white);border:1px solid var(--line);border-radius:20px;padding:clamp(22px,4vw,40px);box-shadow:var(--shadow-up)}
.ready-ring{position:relative;width:min(100%,190px);aspect-ratio:1;margin-inline:auto;display:grid;place-items:center;text-align:center}
.ready-ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.ready-ring circle{fill:none;stroke-width:9;stroke-linecap:round}
.rr-bg{stroke:var(--lapis-soft)}
.rr-fg{stroke:var(--lapis-2);stroke-dasharray:var(--p,0) 100;transition:stroke-dasharray .7s cubic-bezier(.3,.1,.2,1),stroke .3s}
.ready.done .rr-fg{stroke:var(--good)}
.rr-n{font:700 3rem/1 var(--font-body);color:var(--ink);font-variant-numeric:tabular-nums}
.ready-ring small{position:absolute;bottom:26%;font-size:.88rem;color:var(--ink-3)}
.ready-body h3{font-family:var(--font-display);font-weight:400;font-size:1.6rem}
.ready-list{display:grid;gap:4px;margin-top:14px}
.ready-list label{display:flex;gap:14px;align-items:center;min-height:46px;padding:6px 10px;margin-inline:-10px;border-radius:10px;cursor:pointer;transition:background .2s}
.ready-list label:hover{background:var(--lapis-wash)}
.ready-list input{position:absolute;opacity:0;width:22px;height:22px;margin:0}
.cb{position:relative;flex:none;width:24px;height:24px;border:2px solid var(--line-2);border-radius:7px;background:var(--white);transition:background .2s,border-color .2s,transform .2s}
.cb::after{content:"";position:absolute;left:7px;top:2.5px;width:6px;height:11px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg) scale(0);transition:transform .2s}
.ready-list input:checked+.cb{background:var(--lapis);border-color:var(--lapis)}
.ready-list input:checked+.cb::after{transform:rotate(45deg) scale(1)}
.ready-list input:focus-visible+.cb{outline:3px solid var(--gold-bright);outline-offset:3px}
.ready-msg{margin-top:14px;color:var(--ink-3);font-size:.97rem;min-height:3em}
@media (max-width:700px){.ready{grid-template-columns:minmax(0,1fr)}.ready-ring{width:150px}}

/* security: approval gate */
.gate-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}
.gate-tab{min-height:46px;padding:0 20px;border-radius:99px;border:1.5px solid rgba(255,255,255,.28);background:transparent;color:#fff;font:650 .97rem var(--font-body);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.gate-tab:hover{border-color:#fff}
.gate-tab[aria-selected="true"]{background:var(--gold-bright);border-color:var(--gold-bright);color:var(--night)}
.gate-stage{padding:clamp(20px,3vw,36px);border:1px solid rgba(255,255,255,.14);border-radius:20px;background:rgba(255,255,255,.05)}
.gate-flow{display:flex;align-items:center}
.gate-node{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:136px;padding:16px 14px;text-align:center;border:1px solid rgba(255,255,255,.16);border-radius:14px;background:rgba(255,255,255,.04);transition:border-color .35s,background .35s,transform .35s;font-size:.95rem}
.gate-node b{font-weight:650;line-height:1.3}
.gate-node.lit,.gate-out.lit{border-color:var(--gold-bright);background:rgba(226,190,114,.14)}
.gate-node.lit{transform:translateY(-3px)}
.gate-line{position:relative;flex:1;min-width:30px;height:2px;background:rgba(255,255,255,.18);overflow:hidden}
.gate-line::after{content:"";position:absolute;inset:0;background:var(--gold-bright);transform:scaleX(0);transform-origin:0 50%;transition:transform .55s ease}
.gate-line.go::after{transform:scaleX(1)}
.gate-outs{display:grid;gap:10px;min-width:230px}
.gate-out{display:flex;align-items:center;gap:12px;padding:10px 14px;border:1px solid rgba(255,255,255,.14);border-radius:12px;opacity:.38;transition:opacity .35s,border-color .35s,background .35s}
.gate-out.lit{opacity:1}
.gate-out b{font-weight:650;font-size:.95rem;line-height:1.3}
.gate-text{margin-top:26px;color:var(--on-dark);font-size:1.08rem;max-width:66ch}
.gate-panel[hidden]{display:none}
@media (max-width:900px){.gate-flow{flex-direction:column;align-items:stretch}.gate-node{flex-direction:row;text-align:left;min-width:0}.gate-line{flex:none;width:2px;height:24px;min-width:0;margin-left:34px}.gate-line::after{transform:scaleY(0);transform-origin:50% 0}.gate-line.go::after{transform:scaleY(1)}.gate-outs{min-width:0}}
.never{display:grid;gap:0}
.never li{display:flex;gap:16px;align-items:center;margin-top:12px;padding:16px 20px;background:var(--paper);border:1px solid var(--line);border-radius:12px;font-weight:560}
.never .g{flex:none;width:1.3rem;height:1.3rem;color:var(--ink-3)}

/* FAQ hub */
.faq-search{position:relative;max-width:580px;margin-top:30px}
.faq-search input{width:100%;min-height:58px;padding:0 18px 0 52px;border-radius:14px;border:1.5px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1);color:#fff;font:500 1.05rem var(--font-body);transition:background .2s,border-color .2s}
.faq-search input::placeholder{color:var(--on-dark-2)}
.faq-search input:focus{outline:none;background:#fff;color:var(--ink);border-color:var(--gold-bright);box-shadow:0 0 0 4px rgba(226,190,114,.3)}
.faq-search input:focus::placeholder{color:var(--ink-3)}
.faq-search .g{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:var(--gold-bright);pointer-events:none;width:1.4rem;height:1.4rem}
.faq-search input:focus~.g{color:var(--lapis)}
.faq-wrap .faq{max-width:none}
.faq-g{margin-top:44px}
.faq-g:first-of-type{margin-top:26px}
.faq-g h2{font-size:clamp(1.4rem,2.4vw,1.8rem);margin-bottom:18px}
.faq-g[hidden],.faq details[hidden],.faq-none[hidden]{display:none}
.faq-count{margin-top:6px;color:var(--ink-3);font-size:.95rem;min-height:1.6em}
.faq mark{background:rgba(226,190,114,.5);color:inherit;border-radius:3px;padding:0 2px}
.faq-none{margin-top:36px;padding:28px;background:var(--white);border:1px dashed var(--line-2);border-radius:var(--r)}
.faq-none p{margin-top:8px;color:var(--ink-2)}

/* quiz */
.quiz{max-width:880px;margin-inline:auto;background:var(--white);border:1px solid var(--line);border-top:4px solid var(--lapis);border-radius:20px;padding:clamp(22px,4vw,44px);box-shadow:var(--shadow-up);position:relative;overflow:hidden}
.quiz-top{display:flex;align-items:center;gap:16px;margin-bottom:26px}
.quiz-bar{flex:1;height:6px;border-radius:99px;background:var(--lapis-soft);overflow:hidden}
.quiz-bar i{display:block;height:100%;width:var(--p,0%);background:linear-gradient(90deg,var(--lapis-bright),var(--lapis));border-radius:99px;transition:width .5s cubic-bezier(.3,.1,.2,1)}
.quiz-step{font-weight:650;font-size:.9rem;color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.quiz-body{min-height:340px}
.qs{animation:qin .45s cubic-bezier(.2,.7,.2,1)}
@keyframes qin{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
.q-t{font-family:var(--font-display);font-size:clamp(1.55rem,3vw,2.15rem);line-height:1.15;outline:none}
.q-h{margin-top:8px;color:var(--ink-3)}
.q-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:26px}
.q-opt{display:flex;align-items:center;gap:14px;min-height:62px;padding:14px 18px;border:1.5px solid var(--line-2);border-radius:12px;background:var(--white);font:600 1.02rem/1.3 var(--font-body);color:var(--ink);text-align:left;cursor:pointer;transition:border-color .2s,background .2s,transform .2s,box-shadow .2s}
.q-opt:hover{border-color:var(--lapis);transform:translateY(-2px);box-shadow:var(--shadow)}
.q-opt .qk{flex:none;width:22px;height:22px;border:2px solid var(--line-2);border-radius:6px;position:relative;transition:background .2s,border-color .2s}
.q-opt .qk::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg) scale(0);transition:transform .2s}
.q-opt[aria-pressed="true"]{border-color:var(--lapis);background:var(--lapis-wash)}
.q-opt[aria-pressed="true"] .qk{background:var(--lapis);border-color:var(--lapis)}
.q-opt[aria-pressed="true"] .qk::after{transform:rotate(45deg) scale(1)}
.q-opt.single .qk{border-radius:50%}
.q-opt.single .qk::after{left:5px;top:5px;width:8px;height:8px;border:0;background:#fff;border-radius:50%;transform:scale(0)}
.q-opt.single[aria-pressed="true"] .qk::after{transform:scale(1)}
.q-opt:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.q-nav{display:flex;justify-content:space-between;gap:12px;margin-top:30px}
.q-nav .btn[disabled]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
@media (max-width:640px){.q-opts{grid-template-columns:minmax(0,1fr)}.quiz-body{min-height:0}}
.qres{display:grid;gap:30px}
.qres-top{display:grid;grid-template-columns:minmax(140px,180px) minmax(0,1fr);gap:clamp(20px,4vw,40px);align-items:center}
.qring{position:relative;width:min(100%,176px);aspect-ratio:1;display:grid;place-items:center;text-align:center;margin-inline:auto}
.qring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.qring circle{fill:none;stroke-width:9;stroke-linecap:round}
.qring .rr-fg{stroke-dasharray:var(--p,0) 100;transition:stroke-dasharray 1.4s cubic-bezier(.3,.1,.2,1) .2s}
.qring b{font:700 1.5rem/1.1 var(--font-body);color:var(--lapis);max-width:7ch}
.qring small{display:block;font-size:.82rem;color:var(--ink-3);margin-top:4px}
.qres-top h2{font-size:clamp(1.6rem,3vw,2.2rem)}
.qres-top p{margin-top:10px;color:var(--ink-2)}
.qrec{display:grid;gap:12px}
.qrec li{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:16px;align-items:center;padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:var(--white);box-shadow:var(--shadow);animation:qin .5s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:calc(var(--i)*.14s + .3s)}
.qrec .rk{display:grid;place-items:center;width:44px;height:44px;border-radius:11px;background:var(--lapis);color:#fff;font:700 1.05rem var(--font-body)}
.qrec h3{font-size:1.08rem}
.qrec p{margin-top:2px;color:var(--ink-2);font-size:.95rem}
.qrec .fit{display:block;margin-top:9px;width:min(240px,100%);height:6px;border-radius:99px;background:var(--lapis-soft);overflow:hidden}
.qrec .fit i{display:block;height:100%;width:var(--w);background:var(--lapis-2);border-radius:99px;transform-origin:0 50%;animation:fitin 1s cubic-bezier(.3,.1,.2,1) backwards;animation-delay:calc(var(--i)*.14s + .6s)}
@keyframes fitin{from{transform:scaleX(0)}}
.qrec .lvl{font:650 .8rem var(--font-body);padding:5px 10px;border-radius:99px;background:var(--lapis-soft);color:var(--lapis);white-space:nowrap}
.qrec li:first-child .lvl{background:#FFF0CC;color:#7A5A16}
.qrec a.more{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-weight:650;font-size:.92rem;text-decoration:none}
.qrec a.more .g{width:1rem;height:1rem}
.qind{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;padding:18px 22px;border-radius:14px;background:var(--lapis-wash);border:1px solid var(--line-2)}
.qind p{color:var(--ink-2)}
@media (max-width:640px){.qres-top{grid-template-columns:minmax(0,1fr)}.qrec li{grid-template-columns:44px minmax(0,1fr)}.qrec .lvl{grid-column:2;justify-self:start}}

/* home: quiz band */
.qband{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(28px,5vw,72px);align-items:center}
.qband h2{color:#fff;max-width:16ch}
.qlede{margin-top:16px;color:var(--on-dark-2);font-size:1.15rem;max-width:50ch}
.qmock{max-width:430px;margin-inline:auto;padding:24px;border-radius:20px;background:#fff;color:var(--ink);box-shadow:0 30px 70px rgba(0,0,0,.4)}
.qm-top{display:flex;align-items:center;gap:12px;font-size:.85rem;font-weight:650;color:var(--ink-3)}
.qm-top i{flex:1;height:6px;border-radius:99px;background:var(--lapis-soft);overflow:hidden}
.qm-top b{display:block;height:100%;width:66%;background:var(--lapis);border-radius:99px}
.qm-q{margin-top:16px;font-family:var(--font-display);font-size:1.35rem;line-height:1.2}
.qmock ul{display:grid;gap:9px;margin-top:16px}
.qmock li{padding:12px 14px;border:1.5px solid var(--line-2);border-radius:10px;font-weight:600;font-size:.95rem;animation:qsel 10s infinite;animation-delay:calc(var(--i)*2.2s)}
@keyframes qsel{0%,2%{border-color:var(--line-2);background:#fff}6%,19%{border-color:var(--lapis);background:var(--lapis-wash)}24%,100%{border-color:var(--line-2);background:#fff}}
.qm-res{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px;padding:12px 14px;border-radius:10px;background:var(--night);color:#fff;animation:qres 10s infinite}
.qm-res span{font-size:.85rem;color:var(--on-dark-2)}
.qm-res b{color:var(--gold-bright)}
@keyframes qres{0%,84%{opacity:.25;transform:translateY(6px)}90%,98%{opacity:1;transform:none}100%{opacity:.25;transform:translateY(6px)}}
@media (max-width:900px){.qband{grid-template-columns:minmax(0,1fr)}}

/* footer additions */
.foot-soc{display:flex;gap:18px;margin-top:14px}
.foot-legal{display:flex;flex-wrap:wrap;gap:6px 22px}
.foot-legal a{color:var(--on-dark);text-decoration:none}
.foot-legal a:hover{color:var(--gold-bright);text-decoration:underline}

/* scroll-in states for the new sequences */
.js .tl li{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.js .tl li.on{opacity:1;transform:none}

/* print */
@media print{
  .site-header,.site-footer,.wa-float,.hero-fx,.cta,.toc,.ticker,.btn-row,.prog{display:none!important}
  body{background:#fff;color:#000}
  .hero{background:#fff!important;color:#000;padding-block:16px}
  .hero h1,.hero .lede,.gmeta{color:#000!important}
  .art-grid{display:block}
  .js .rv,.js .stagger>*{opacity:1!important;transform:none!important}
  a{color:#000}
}

/* reduced motion for V4 */
@media (prefers-reduced-motion:reduce){
  .js .tl li{opacity:1;transform:none}
  .scorecard li::before{transform:scaleX(1)}
  .rem-list::after{transform:scaleX(1)}
  .rem-list .rn{background:var(--lapis);border-color:var(--gold-bright)}
  .rr-fg,.quiz-bar i{transition:none}
  .qs,.qrec li,.qrec .fit i{animation:none}
  .qmock li:first-child{border-color:var(--lapis);background:var(--lapis-wash)}
  .qm-res{opacity:1;transform:none}
  .gate-line::after{transition:none}
}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.qrec .why{color:var(--ink-3);font-size:.9rem}
.ready .rr-fg{opacity:0}.ready.has .rr-fg{opacity:1}

/* V4 touch targets in the footer */
.foot-grid li a,.foot-legal a,.foot-soc a{display:inline-flex;align-items:center;min-height:36px}
@media (pointer:coarse){.foot-grid li a,.foot-legal a,.foot-soc a{min-height:44px}}