/* The Jepela landing page. Shared parts (top bar, buttons, code, footer) are in styles.css. */
.home{background:#f5f7fb}
.mono{font-family:var(--mono)}
.kicker{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:750;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-ink);margin:0 0 14px}
.kicker::before{content:"";width:22px;height:2px;border-radius:2px;background:currentColor;opacity:.7}
.head{max-width:780px;margin:0 auto 44px;text-align:center}
.head .kicker::after{content:"";width:22px;height:2px;border-radius:2px;background:currentColor;opacity:.7}
.head .sub{font-size:18.5px;color:var(--muted);margin:0 auto;max-width:700px}
.label{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.fine{font-size:13.5px;color:var(--muted)}
.more{display:inline-flex;align-items:center;gap:6px;font-weight:650;font-size:15px}
.more::after{content:"→";transition:transform .15s}
.more:hover{text-decoration:none}.more:hover::after{transform:translateX(3px)}
section.block{padding-top:104px}
.band{padding:104px 0;margin-top:104px;position:relative}
.band.soft{background:linear-gradient(180deg,#eaf0f7,#f3f6fa 60%,#eef3f8)}
.band.dark{background:radial-gradient(900px 500px at 85% 0%,rgba(45,212,191,.13),transparent 60%),radial-gradient(800px 500px at 0% 100%,rgba(56,189,248,.10),transparent 60%),var(--night);color:var(--night-ink);overflow:hidden}
.band.dark .kicker{color:var(--mint)}
.band.dark h2{color:#fff}
.band.dark .head .sub{color:var(--night-muted)}
.band.dark a{color:var(--mint-2)}
.band + section.block{padding-top:104px}

/* grid items may shrink below their content (long code lines scroll inside their block instead of widening the page) */
.inv-shift>*,.inv-now>*,.inv-model>*,.inv-win>*,.inv-stage>*,.inv-kpis>*,.try>*,.try-cols>*,.hero-grid>*,.proof>*,.why-grid>*,.ppanel>*,.tiles>*,.types>*,.lab>*,.lab-cases>*,.tools>*,.cost>*,.showcase>*,.brow>*,.bname>*,.minis>*,.speed-facts>*,.trust>*,.pricing>*,.pcards>*,.calc-out>*,.start>*,.next-links>*{min-width:0}

/* reveal on scroll: only when scripts run, so the page reads without them */
.js .reveal:not(.in) .bar-fill{width:0!important}
.js .reveal:not(.in) .col i{height:0!important}
.js .reveal:not(.in) .g-fg{stroke-dashoffset:157.08px!important}
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}

/* ---------------------------------------------------------------- hero */
.hero{position:relative;overflow:hidden;background:radial-gradient(1100px 620px at 78% 18%,rgba(45,212,191,.17),transparent 60%),radial-gradient(900px 600px at 8% 90%,rgba(56,189,248,.12),transparent 60%),linear-gradient(180deg,#050912,#081226 70%,#0a1428);color:var(--night-ink);padding:92px 0 132px}
.hero-net{position:absolute;inset:0;width:100%;height:100%;opacity:.9}
.hero-glow{position:absolute;inset:auto 0 -1px 0;height:140px;background:linear-gradient(180deg,transparent,rgba(5,9,18,.55));pointer-events:none}
.hero-grid{position:relative;display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:13.5px;font-weight:600;color:#bfe9e2;background:rgba(45,212,191,.09);border:1px solid rgba(45,212,191,.28);border-radius:999px;padding:6px 14px 6px 12px;margin:0 0 26px}
.live-dot{width:8px;height:8px;border-radius:50%;background:#94a3b8;box-shadow:0 0 0 0 rgba(45,212,191,.7)}
.live-dot.on{background:var(--mint);animation:ping 2.2s infinite}
.live-dot.off{background:#fbbf24}
.status-note{font-weight:500;opacity:.85}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(45,212,191,.6)}70%{box-shadow:0 0 0 9px rgba(45,212,191,0)}100%{box-shadow:0 0 0 0 rgba(45,212,191,0)}}
.hero h1{color:#fff;margin-bottom:22px}
.grad{background:linear-gradient(95deg,#5eead4 10%,#38bdf8 55%,#a78bfa 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lead{font-size:clamp(17px,1.6vw,20px);color:#b9c5d6;max-width:580px;margin-bottom:30px}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.hero-points{list-style:none;margin:34px 0 0;padding:0;display:grid;gap:10px;color:#9fb0c6;font-size:15px}
.hero-points li{position:relative;padding-left:27px}
.hero-points li::before{content:"";position:absolute;left:0;top:4px;width:16px;height:16px;border-radius:50%;background:rgba(45,212,191,.16) no-repeat center/10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.5l4.5-5' fill='none' stroke='%235eead4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.hero-points b{color:#e6edf7}

/* the decision card in the hero */
.hero-card{position:relative}
.hero-card::before{content:"";position:absolute;inset:-30px -20px;background:radial-gradient(closest-side,rgba(45,212,191,.22),transparent);filter:blur(10px);z-index:0;opacity:.8;transition:opacity .6s}
.hero-card.mem-on::before{opacity:1}
.dcard{position:relative;z-index:1;background:linear-gradient(180deg,rgba(17,27,46,.92),rgba(10,17,32,.94));border:1px solid rgba(148,163,184,.2);border-radius:20px;box-shadow:0 40px 100px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.05);overflow:hidden;backdrop-filter:blur(8px)}
.dcard-bar{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid rgba(148,163,184,.14);background:rgba(255,255,255,.02)}
.dcard-bar code{color:#cbd5e1;font-size:12.5px;white-space:nowrap}
.lights{display:flex;gap:6px}.lights i{width:10px;height:10px;border-radius:50%;background:#334155}
.lights i:nth-child(1){background:#f87171}.lights i:nth-child(2){background:#fbbf24}.lights i:nth-child(3){background:#34d399}
.pill{margin-left:auto;white-space:nowrap;font:600 12px var(--mono);color:#99f6e4;background:rgba(45,212,191,.1);border:1px solid rgba(45,212,191,.25);padding:3px 9px;border-radius:999px}
.dcard-body{padding:18px 20px 8px}
.kv{display:grid;grid-template-columns:78px 1fr;gap:12px;align-items:baseline;margin:0 0 10px;font-size:14.5px}
.kv .k{font:600 12px var(--mono);letter-spacing:.04em;color:#7d8ca4;text-transform:uppercase}
.kv .v{color:#dbe4f0}
.kv .v.mono{font-size:13.5px;color:#fcd576}
.type-chip{font:600 12px var(--mono);color:#a5b4fc;background:rgba(129,140,248,.12);border:1px solid rgba(129,140,248,.3);border-radius:6px;padding:1px 6px;margin-left:6px;white-space:nowrap}
.memslot{margin:6px 0 14px;min-height:86px;display:flex;flex-direction:column}
.memslot .memline{flex:1}
.memline.off{display:flex;align-items:center}
.memline{position:relative;font-size:13.5px;line-height:1.5;color:#d6fff7;background:linear-gradient(90deg,rgba(45,212,191,.16),rgba(45,212,191,.05));border:1px solid rgba(45,212,191,.35);border-radius:12px;padding:10px 12px 10px 14px;animation:slidein .5s cubic-bezier(.2,.8,.2,1)}
.memline.off{color:#8190a8;background:rgba(148,163,184,.06);border:1px dashed rgba(148,163,184,.3);animation:none}
.memtag{display:block;font:700 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mint);margin-bottom:3px}
@keyframes slidein{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}

/* probability bars, used in the hero, the question types and the memory lab */
.bars{display:grid;gap:9px}
.bar{position:relative}
.bar-top{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;margin-bottom:4px}
.bar-label{color:inherit;font-weight:560;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.try-col .bar-label{white-space:normal}
.bar-label small{font-weight:400;opacity:.7;margin-left:6px}
.bar-val{font:600 13px var(--mono);font-variant-numeric:tabular-nums}
.bar-track{position:relative;height:9px;border-radius:9px;background:rgba(148,163,184,.16);overflow:visible}
.bar-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:9px;background:var(--plain);transition:width .9s cubic-bezier(.2,.8,.2,1),background .5s}
.bar[data-tone="mint"] .bar-fill{background:linear-gradient(90deg,#14b8a6,#2dd4bf)}
.bar[data-tone="amber"] .bar-fill{background:linear-gradient(90deg,#f59e0b,#fbbf24)}
.bar.pick .bar-label{font-weight:750}
.bar.pick[data-tone="mint"] .bar-fill{box-shadow:0 0 16px rgba(45,212,191,.55)}
.bar-ghost{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;background:#e2e8f0;border-radius:2px;opacity:.9;transition:left .9s cubic-bezier(.2,.8,.2,1)}
.bar-ghost[hidden]{display:none}
.bar:not(:first-child) .bar-ghost::after{display:none}
.bar-ghost::after{content:"without";position:absolute;top:-17px;left:50%;transform:translateX(-50%);font:600 12px var(--mono);color:#94a3b8;letter-spacing:.04em;white-space:nowrap}
.bar.gone .bar-label{text-decoration:line-through;opacity:.55}
.dcard .bar{color:#dbe4f0}
.dcard .bar-val{color:#e6edf7}
.dcard .bar-fill{background:#64748b}
.verdict{display:flex;flex-wrap:wrap;align-items:center;align-content:flex-start;gap:6px 10px;min-height:68px;margin:16px 0 10px;padding-top:14px;border-top:1px solid rgba(148,163,184,.14);font-size:14px;color:#9fb0c6}
.verdict b{font:700 14px var(--mono);color:#fff;background:rgba(148,163,184,.14);padding:2px 8px;border-radius:7px}
.mem-on .verdict b{background:rgba(45,212,191,.18);color:#bff8ee}
.verdict em{font-style:normal;color:#fcd576;font-weight:600}
.dcard-foot{display:flex;align-items:center;gap:16px;padding:14px 20px 16px;border-top:1px solid rgba(148,163,184,.14);background:rgba(255,255,255,.02)}
.dcard-foot .src{font-size:12.5px;color:#7d8ca4;line-height:1.4}
.dcard-foot .src a{color:#99f6e4}
.hint{position:relative;z-index:1;text-align:center;color:#8fa0b8;font-size:14px;margin:16px 0 0;transition:opacity .4s}
.hint.gone{opacity:0}

/* the memory switch */
.switch{display:inline-flex;align-items:center;gap:10px;background:none;border:0;color:#e6edf7;font:700 15px var(--font);cursor:pointer;padding:4px 2px;flex:none}
.switch .track{position:relative;width:52px;height:30px;border-radius:30px;background:#334155;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);transition:background .35s}
.switch .knob{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.35);transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.switch[aria-checked="true"] .track{background:linear-gradient(90deg,#14b8a6,#2dd4bf);box-shadow:0 0 22px rgba(45,212,191,.45)}
.switch[aria-checked="true"] .knob{transform:translateX(22px)}
.switch.nudge .track{animation:nudge 1.6s ease-in-out 2}
@keyframes nudge{0%,100%{box-shadow:0 0 0 0 rgba(45,212,191,0)}50%{box-shadow:0 0 0 8px rgba(45,212,191,.25)}}

/* ---------------------------------------------------------------- proof strip */
.proof{position:relative;z-index:3;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:-64px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:22px 22px 20px;box-shadow:0 20px 50px rgba(15,23,42,.1)}
.stat b{display:block;font-size:31px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin-bottom:6px;background:linear-gradient(90deg,#0b1220,#0f766e);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat b small{font-size:18px;font-weight:600}
.stat>span{display:block;color:var(--muted);font-size:13.8px;line-height:1.5}

/* ---------------------------------------------------------------- why */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.feature{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:28px 26px 24px;box-shadow:var(--shadow);transition:transform .25s,box-shadow .25s,border-color .25s}
.feature:hover{transform:translateY(-4px);box-shadow:0 24px 50px rgba(15,23,42,.1);border-color:#c8f2ea}
.feature p{color:#3b4760}
.ficon,.ticon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,#e0e7ff,#eef2ff);color:#4f46e5;margin-bottom:18px}
.ficon svg,.ticon svg,.tico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ficon.mint{background:linear-gradient(135deg,#ccfbf1,#e6fffa);color:var(--teal-ink)}
.ficon.amber{background:linear-gradient(135deg,#fef3c7,#fffbeb);color:var(--amber-ink)}

/* ---------------------------------------------------------------- how: the pipeline */
.pipe{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:0 0 26px}
.pipe-track{position:absolute;left:12.5%;right:12.5%;top:31px;height:3px;background:var(--line-2);border-radius:3px}
.pipe-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:3px;background:linear-gradient(90deg,#94a3b8,#2dd4bf);transition:width .7s cubic-bezier(.2,.8,.2,1)}
.pnode{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;background:none;border:0;cursor:pointer;font:inherit;color:var(--ink);padding:0 6px 10px}
.pnum{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font:800 22px var(--font);color:var(--muted);background:var(--panel);border:2px solid var(--line-2);margin-bottom:12px;transition:all .35s;box-shadow:var(--shadow)}
.pnode b{font-size:17px}
.pnode small{color:var(--muted);font-size:14px}
.pnode:hover .pnum{border-color:var(--teal);color:var(--teal-ink)}
.pnode.done .pnum{border-color:#8fe3d6;color:var(--teal-ink)}
.pnode.on .pnum{background:linear-gradient(135deg,#14b8a6,#2dd4bf);border-color:transparent;color:#fff;box-shadow:0 12px 30px rgba(20,184,166,.4);transform:scale(1.06)}
.pipe.run .pipe-fill{animation:runfill 2.6s cubic-bezier(.45,0,.2,1)}
@keyframes runfill{0%{width:0}80%{width:100%}100%{width:0}}
.pipe.run .pnum{animation:flash .7s ease both}
.pipe.run .pnode:nth-of-type(2) .pnum{animation-delay:.65s}.pipe.run .pnode:nth-of-type(3) .pnum{animation-delay:1.3s}.pipe.run .pnode:nth-of-type(4) .pnum{animation-delay:1.95s}
@keyframes flash{0%,100%{}45%{transform:scale(1.12);border-color:#2dd4bf;color:#0f766e;box-shadow:0 0 0 10px rgba(45,212,191,.18)}}
.ppanels{background:var(--panel);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);padding:30px}
.ppanel{display:grid;grid-template-columns:.9fr 1.1fr;gap:34px;align-items:start}
.ppanel[hidden]{display:none}
.ppanel.show{animation:fadeup .45s ease}
@keyframes fadeup{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ticks{list-style:none;margin:0;padding:0}
.ticks li{position:relative;padding-left:28px;margin:0 0 12px;color:#334059}
.ticks li::before{content:"";position:absolute;left:0;top:5px;width:17px;height:17px;border-radius:50%;background:var(--mint-soft) no-repeat center/10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.5l4.5-5' fill='none' stroke='%230f766e' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.pcode pre.code{max-height:380px;margin:0;white-space:pre-wrap;word-break:break-word}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tile{background:linear-gradient(180deg,#f7fafd,#eff4f9);border:1px solid var(--line);border-radius:16px;padding:18px}
.tile b{display:block;font-size:26px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.tile span{font-size:14px;color:var(--muted)}

/* ---------------------------------------------------------------- types */
.types{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.tcard{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);overflow:hidden}
.tcard header{padding:20px 22px 16px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#fbfcfe,#f5f8fb)}
.tname{display:block;font-size:22px;font-weight:800;letter-spacing:-.02em}
.tcard[data-type="choice"] .tname{color:#4f46e5}.tcard[data-type="score"] .tname{color:#0e7490}.tcard[data-type="noul"] .tname{color:#b45309}
.tdesc{color:var(--muted);font-size:14.5px}
.tbody{flex:1;padding:18px 22px 8px;min-height:360px}
.tbody.swap{animation:fadeup .4s ease}
.tstate{position:relative;font-size:14.5px;color:#26324a;background:#f4f7fb;border-radius:12px;padding:12px 14px 12px 16px;margin:0 0 14px;border-left:3px solid #c7d2fe}
.tcard[data-type="score"] .tstate{border-left-color:#a5f3fc}.tcard[data-type="noul"] .tstate{border-left-color:#fde68a}
.tq{font-weight:700;font-size:15px;margin:0 0 12px;color:var(--ink)}
.tcard .bar-fill{background:#c7d2fe}
.tcard .bar.pick .bar-fill{background:linear-gradient(90deg,#6366f1,#818cf8)}
.tcard .bar-label{color:#26324a}
.tanswer{margin:14px 0 0;font:12.5px/1.5 var(--mono);color:#475569;background:#f8fafc;border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.tanswer b{color:var(--ink)}
.tnav{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-top:1px solid var(--line)}
.tnav button{width:36px;height:36px;border-radius:10px;border:1px solid var(--line-2);background:var(--panel);font-size:20px;line-height:1;cursor:pointer;color:var(--ink);transition:all .15s}
.tnav button:hover{border-color:var(--teal);color:var(--teal-ink);background:#f0fdfa}
.tcount{font-size:13px;color:var(--muted);text-align:center;padding:0 8px}
/* score: columns over the levels, a marker at the score */
.scale-viz{position:relative;padding:30px 0 0}
.cols{display:flex;align-items:flex-end;gap:8px;height:130px;padding:0 2px;border-bottom:2px solid #cbd5e1}
.col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%}
.col i{display:block;width:100%;max-width:44px;height:0;border-radius:8px 8px 3px 3px;background:#a5f3fc;transition:height .9s cubic-bezier(.2,.8,.2,1)}
.col.best i{background:linear-gradient(180deg,#22d3ee,#0891b2)}
.col em{font:600 12px var(--mono);font-style:normal;color:#475569;margin-bottom:4px}
.levels{display:flex;gap:8px;margin-top:6px}
.levels span{flex:1;font:600 12px var(--mono);color:var(--muted);text-align:center}
.level-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:4px}
.level-list li{display:grid;grid-template-columns:22px 1fr auto;gap:8px;font-size:13px;color:#475569;padding:4px 8px;border-radius:8px}
.level-list li i{font:600 12px var(--mono);font-style:normal;color:#94a3b8}
.level-list li b{font:600 12px var(--mono);color:#475569}
.level-list li.best{background:#ecfeff;color:#0e7490}
.level-list li.best b,.level-list li.best i{color:#0e7490}
.marker{position:absolute;top:26px;height:134px;width:2px;margin-left:-1px;background:#0e7490;transition:left .9s cubic-bezier(.2,.8,.2,1)}
.marker::before{content:attr(data-v);position:absolute;top:-24px;left:50%;transform:translateX(-50%);font:700 12px var(--mono);color:#fff;background:#0e7490;padding:2px 6px;border-radius:6px;white-space:nowrap}
/* noul: gauges */
.gauges{display:grid;gap:12px}
.gauges.many{grid-template-columns:1fr 1fr}
.gauge{text-align:center}
.gauge svg{width:100%;max-width:180px;height:auto;display:block;margin:0 auto}
.gauges.many .gauge svg{max-width:130px}
.gauge .g-bg{fill:none;stroke:#eef2f7;stroke-width:12;stroke-linecap:round}
.gauge .g-fg{fill:none;stroke:#f59e0b;stroke-width:12;stroke-linecap:round;transition:stroke-dashoffset 1.1s cubic-bezier(.2,.8,.2,1)}
.gauge .g-fg.low{stroke:#94a3b8}
.gauge text{font:800 20px var(--font);fill:var(--ink);text-anchor:middle}
.gauges.many .gauge text{font-size:22px}
.gauge p{font-size:13px;color:#334155;margin:2px 0 0;line-height:1.35}

/* ---------------------------------------------------------------- try it */
.try{display:grid;grid-template-columns:.92fr 1.08fr;gap:22px;align-items:start}
.try-in{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:24px;box-shadow:var(--shadow)}
.try-in textarea{display:block;width:100%;min-height:112px;resize:vertical;border:1px solid var(--line-2);border-radius:14px;padding:12px 14px;font:inherit;font-size:15.5px;line-height:1.5;color:var(--ink);background:#fbfcfe}
.try-in textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(20,184,166,.16)}
.try-samples{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 18px}
.try-samples button{border:1px solid var(--line-2);background:#fff;border-radius:999px;padding:6px 12px;font:500 13px var(--font);color:#334155;cursor:pointer;transition:all .15s}
.try-samples button:hover{border-color:var(--teal);color:var(--teal-ink);background:#f0fdfa}
.try-go{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.try-status{flex-basis:100%;min-height:3.2em;font-size:14px;color:var(--muted)}
.try-status.err{color:#be123c}
.try-mem{margin:20px 0 12px;background:#effdfa;border:1px solid #99ecdf;border-radius:14px;padding:12px 16px}
.try-mem .label{color:var(--teal-ink)}
.try-mem ol{margin:0;padding-left:20px;color:#134e48;font-size:14px}
.try-mem li{margin:4px 0}
.try-in .fine{margin:0}
.try-out{position:relative;background:linear-gradient(180deg,#0b1428,#0a1120);color:var(--night-ink);border-radius:22px;padding:22px;box-shadow:0 30px 70px rgba(2,6,23,.25)}
.try-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px;transition:opacity .25s}
.try-out.busy .try-cols{opacity:.5}
.try-col{background:rgba(255,255,255,.03);border:1px solid rgba(148,163,184,.16);border-radius:16px;padding:16px}
.try-col.mint{border-color:rgba(45,212,191,.38);background:rgba(45,212,191,.05)}
.try-col h3{font-size:16px;color:#fff;margin:0 0 14px}
.try-col h3 small{font-weight:500;color:#8e9bb3;font-size:12.5px;margin-left:6px}
.tq-block{margin:0 0 16px}
.tq-block:last-child{margin:0}
.tq-block>p{font-size:13px;color:#a8b5c9;margin:0 0 7px}
.try-col .bars{gap:8px}
.try-col .bar{color:#dbe4f0}
.try-col .bar-label{font-weight:500}
.try-col .bar-val{color:#fff}
.try-col .bar-fill{background:#64748b}
.try-col .bar-ghost::after{display:none}
.tq-scale{position:relative;min-height:34px}
.tq-scale .track{position:absolute;left:0;right:0;top:8px;height:8px;border-radius:8px;background:linear-gradient(90deg,#1e293b,#475569 50%,#94a3b8)}
.tq-scale .mark{position:absolute;top:0;left:0;width:4px;height:24px;margin-left:-2px;border-radius:3px;background:#fbbf24;box-shadow:0 0 12px rgba(251,191,36,.6);transition:left .9s cubic-bezier(.2,.8,.2,1)}
.try-col.mint .tq-scale .mark{background:#2dd4bf;box-shadow:0 0 12px rgba(45,212,191,.7)}
.tq-scale .ends{position:absolute;left:0;right:0;top:20px;display:flex;justify-content:space-between;font-size:12px;color:#7d8ca4}
.tq-scale .sv{display:block;padding-top:38px;min-height:76px;font-size:13px;font-weight:600;color:#e6edf7;line-height:1.4}
.try-meta{margin:14px 2px 10px;font-size:13.5px;color:#91a0b8;min-height:5.8em}
.try-meta b{color:#fff}
.try-meta .moved{display:block;margin-top:6px;color:#bff8ee}
.try-raw summary{cursor:pointer;color:#99f6e4;font-size:13.5px;padding:10px 0;margin:-10px 0}
.try-raw pre.code{margin:10px 0 0;max-height:360px;white-space:pre-wrap;word-break:break-word;background:#060c18}

/* ---------------------------------------------------------------- memory lab */
.lab{display:grid;grid-template-columns:300px 1fr;gap:22px;align-items:start}
.lab-cases{display:grid;gap:12px}
.case{display:flex;gap:14px;align-items:center;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px;cursor:pointer;font:inherit;color:var(--ink);transition:all .2s;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.case:hover{border-color:#9ee8dc;transform:translateX(3px)}
.case.on{border-color:var(--teal);box-shadow:0 14px 34px rgba(13,148,136,.16);background:linear-gradient(135deg,#ffffff,#f0fdfa)}
.cemoji{font-size:26px;width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:#f1f5f9;flex:none}
.case.on .cemoji{background:#ccfbf1}
.case b{display:block;font-size:15.5px}
.case small{display:block;color:var(--muted);font-size:13.5px;line-height:1.4}
.lab-stage{background:var(--panel);border:1px solid var(--line);border-radius:24px;box-shadow:0 30px 70px rgba(15,23,42,.1);padding:26px 28px;min-height:520px}
.lab-top{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;margin:0 0 16px}
.subj{font:600 12.5px var(--mono);color:var(--teal-ink);background:var(--mint-soft);border-radius:8px;padding:4px 10px}
.modes{display:inline-flex;background:#eef2f7;border-radius:12px;padding:4px;gap:4px;flex-wrap:wrap}
.modes button{border:0;background:none;font:600 14px var(--font);color:#475569;padding:8px 14px;border-radius:9px;cursor:pointer;transition:all .2s}
.modes button:hover{color:var(--ink)}
.modes button.on{background:var(--panel);color:var(--ink);box-shadow:0 2px 8px rgba(15,23,42,.1)}
.modes button.on[data-mode="on"]{color:var(--teal-ink)}
.modes button.on[data-mode="code"]{color:var(--amber-ink)}
.lab-state{font-size:15px;color:#26324a;background:#f5f8fb;border:1px solid var(--line);border-radius:14px;padding:12px 16px;margin:0 0 12px}
.lab-state code{font-size:13px;color:#0f3f3a;background:none;padding:0}
.lab-q{font-weight:700;margin:0 0 14px}
.lab-notes{display:grid;gap:8px;margin:0 0 18px;min-height:46px}
.lnote{font-size:14px;line-height:1.5;border-radius:12px;padding:10px 14px;animation:slidein .45s cubic-bezier(.2,.8,.2,1)}
.lnote .memtag{color:inherit;opacity:.8}
.lnote.mem{background:#effdfa;border:1px solid #99ecdf;color:#134e48}
.lnote.code{background:#fff8eb;border:1px solid #f8d48f;color:#6b3f06}
.lnote.warn{background:#fff1f2;border:1px solid #fecdd3;color:#881337}
.lnote.none{background:#f8fafc;border:1px dashed #cbd5e1;color:#64748b;animation:none}
.lab .bars{gap:12px}
.lab .bar-label{color:var(--ink)}
.lab .bar-desc{font-size:12.5px;color:var(--muted);margin-top:3px}
.lab .bar-track{height:12px;background:#eef2f7}
.lab .bar-ghost{background:#0b1220}
.lab .bar-ghost::after{color:#475569}
.lab-verdict{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin:20px 0 0;padding:14px 16px;border-radius:14px;background:#f5f8fb;font-size:15px}
.lab-verdict .badge{font:700 12px var(--font);letter-spacing:.04em;text-transform:uppercase;padding:4px 10px;border-radius:999px}
.badge.changed{background:#ccfbf1;color:#0f766e}.badge.same{background:#e2e8f0;color:#334155}.badge.code{background:#fef3c7;color:#92400e}
.lab-verdict code{font-size:13.5px;background:#fff;border:1px solid var(--line);border-radius:7px;padding:1px 7px}
.lab-lesson{margin:14px 0 0;color:#334059;font-size:15.5px}
.lab-src{margin:12px 0 0;font-size:13px;color:var(--muted)}

.lab-static .lab-q{font-weight:600}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.lab-table{font-size:14px;margin:0;min-width:620px}
.lab-table td{color:#334059}
.lab-table td:first-child{font-weight:600;color:var(--ink)}
.noul-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.noul-list li{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:#334155;background:#fff8eb;border-radius:10px;padding:8px 12px}
.noul-list b{font:700 13.5px var(--mono);color:#92400e}

/* ---------------------------------------------------------------- at a glance */
.glance{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin:0;background:var(--panel);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);overflow:hidden}
.glance>div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:14px;padding:18px 22px;border-bottom:1px solid var(--line)}
.glance>div:nth-child(odd){border-right:1px solid var(--line)}
.glance>div:last-child:nth-child(odd){grid-column:1/-1;border-right:0}
.glance dt{font-weight:750;color:var(--teal-ink);font-size:14.5px}
.glance dd{margin:0;color:#334059;font-size:14.5px}
.glance dd code{font-size:13px;background:#eef2f7;padding:1px 5px;border-radius:5px}

/* ---------------------------------------------------------------- memory tools */
.tools{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tool{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:24px;box-shadow:var(--shadow);transition:transform .25s,box-shadow .25s}
.tool:hover{transform:translateY(-3px);box-shadow:0 22px 46px rgba(15,23,42,.09)}
.ticon{width:44px;height:44px;border-radius:13px;background:linear-gradient(135deg,#ccfbf1,#ecfeff);color:var(--teal-ink);margin-bottom:14px}
.ticon svg{width:22px;height:22px}
.tool h3 code{font-size:.85em;background:#eef2f7;padding:1px 6px;border-radius:6px}
.tool p{color:#3b4760;font-size:15px}
.tool .src{font-size:13px;color:var(--muted);margin:10px 0 0}
.meter{display:grid;gap:9px;margin-top:auto;padding:14px;background:#f7f9fc;border:1px solid var(--line);border-radius:14px}
.mrow{display:grid;grid-template-columns:1fr auto;gap:2px 10px;font-size:13px;color:#475569}
.mrow b{font:700 13px var(--mono);color:var(--ink)}
.mtrack{grid-column:1/-1;height:8px;border-radius:8px;background:#e5eaf1;overflow:hidden}
.mtrack i{display:block;height:100%;width:var(--v,0);border-radius:8px;background:#94a3b8;transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.js .reveal:not(.in) .mtrack i{width:0}
.mrow.good .mtrack i{background:linear-gradient(90deg,#14b8a6,#2dd4bf)}
.mrow.bad .mtrack i{background:linear-gradient(90deg,#f43f5e,#fb7185)}
.mrow.bad b{color:#be123c}
.mrow.good b{color:var(--teal-ink)}
.subjects{margin-top:44px;text-align:center}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.chip{background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:9px 16px;font-size:14px;color:#475569;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.chip b{color:var(--ink);margin-right:6px}
.chip i{font-style:normal;color:var(--teal);margin:0 4px}

/* ---------------------------------------------------------------- cost */
.cost{display:grid;grid-template-columns:.95fr 1.05fr;gap:48px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:26px;padding:44px;box-shadow:var(--shadow)}
.cost h2{font-size:clamp(26px,3vw,36px)}
.cost-copy p{color:#3b4760}
.clegend{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13.5px;color:var(--muted);margin:0 0 16px}
.sw{display:inline-block;width:12px;height:12px;border-radius:4px;margin-right:7px;vertical-align:-1px}
.sw.plain{background:#a3aec0}.sw.mint{background:#14b8a6}
.crow{margin:0 0 18px}
.crow>p{margin:0 0 6px;font-weight:650;font-size:14.5px}
.cbar{position:relative;display:flex;align-items:center;height:28px;margin:0 0 6px;border-radius:9px;background:#f1f4f8;overflow:hidden}
.cbar i{position:absolute;left:0;top:0;bottom:0;width:var(--w,0);border-radius:9px;transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
.cbar.mint i,.bb.mint i{transition-delay:.18s}
.js .reveal:not(.in) .cbar i,.js .reveal:not(.in) .bb i{width:0}
.cbar.plain i{background:linear-gradient(90deg,#cbd5e1,#a3aec0)}
.cbar.mint i{background:linear-gradient(90deg,#5eead4,#14b8a6)}
.cbar b{position:relative;margin-left:12px;font:700 13.5px var(--mono);color:var(--ink)}

/* ---------------------------------------------------------------- demos */
.stars{position:absolute;inset:0;background-image:radial-gradient(1px 1px at 20px 30px,rgba(255,255,255,.35),transparent 1.5px),radial-gradient(1px 1px at 140px 80px,rgba(255,255,255,.25),transparent 1.5px),radial-gradient(1.5px 1.5px at 260px 160px,rgba(94,234,212,.35),transparent 2px),radial-gradient(1px 1px at 360px 40px,rgba(255,255,255,.2),transparent 1.5px);background-size:400px 220px;opacity:.6;pointer-events:none}
.band.dark .wrap{position:relative}
.showcase{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.showcard{display:flex;flex-direction:column;background:linear-gradient(180deg,rgba(17,27,46,.9),rgba(10,17,32,.95));border:1px solid rgba(148,163,184,.18);border-radius:24px;overflow:hidden;color:var(--night-ink)!important;transition:transform .3s,border-color .3s,box-shadow .3s}
.showcard:hover{transform:translateY(-5px);border-color:rgba(45,212,191,.5);box-shadow:0 30px 70px rgba(0,0,0,.45),0 0 0 1px rgba(45,212,191,.2);text-decoration:none}
.art{position:relative;height:230px;overflow:hidden}
.showcard .show-copy{padding:22px 24px 26px}
.show-copy h3{font-size:22px;color:#fff}
.show-copy p{color:#a8b5c9;margin:0}
.arcade-art{background:radial-gradient(circle at 50% 55%,rgba(45,212,191,.22),transparent 55%),linear-gradient(180deg,#0b1428,#081020)}
.orbit{position:absolute;left:50%;top:50%;width:0;height:0;animation:spin 40s linear infinite}
.orbit span{position:absolute;left:-26px;top:-26px;width:52px;height:52px;display:grid;place-items:center;font-size:27px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(148,163,184,.22);transform:rotate(calc(var(--i)*51.43deg)) translate(0,-86px) rotate(calc(var(--i)*-51.43deg));backdrop-filter:blur(4px)}
.orbit span{animation:counter 40s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes counter{from{transform:rotate(calc(var(--i)*51.43deg)) translate(0,-86px) rotate(calc(var(--i)*-51.43deg))}to{transform:rotate(calc(var(--i)*51.43deg - 360deg)) translate(0,-86px) rotate(calc(var(--i)*-51.43deg + 360deg))}}
.vs{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:2px;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.vs em{font-style:normal;color:#94a3b8}.vs em.m{color:var(--mint)}
.vs strong{font-size:26px;color:#fff;letter-spacing:0}
.station-art svg{width:100%;height:100%;display:block}
.blink{animation:blink 1.6s ease-in-out infinite}.blink.b2{animation-duration:1.15s;animation-delay:.4s}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}
.board{margin-top:26px;background:rgba(10,17,32,.75);border:1px solid rgba(148,163,184,.18);border-radius:24px;padding:26px 28px}
.board-head{display:flex;flex-wrap:wrap;gap:6px 20px;align-items:baseline;justify-content:space-between;margin-bottom:12px}
.board-head h3{color:#fff;margin:0;font-size:20px}
.board-head p{margin:0;color:#91a0b8;font-size:13.5px}
.key{display:inline-block;width:11px;height:11px;border-radius:3px;margin:0 6px 0 10px;vertical-align:-1px}
.key.plain{background:#64748b;margin-left:0}.key.mint{background:var(--mint)}
.brow{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:20px;align-items:center;padding:14px 10px;border-top:1px solid rgba(148,163,184,.12);color:var(--night-ink)!important;border-radius:12px;transition:background .2s}
.brow:hover{background:rgba(148,163,184,.07);text-decoration:none}
.bname{display:flex;gap:14px;align-items:center;font-weight:700;font-size:15.5px}
.bname>i{font-style:normal;font-size:24px;width:42px;height:42px;display:grid;place-items:center;background:rgba(255,255,255,.05);border-radius:12px;flex:none}
.bname small{display:block;font-weight:400;color:#8e9bb3;font-size:13px;line-height:1.35}
.bbars{display:grid;gap:6px}
.bb{position:relative;display:flex;align-items:center;height:24px;border-radius:7px;background:rgba(148,163,184,.08);overflow:hidden}
.bb i{position:absolute;left:0;top:0;bottom:0;width:var(--w,0);border-radius:7px;transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
.bb.plain i{background:linear-gradient(90deg,#334155,#64748b)}
.bb.mint i{background:linear-gradient(90deg,#0f766e,#2dd4bf);box-shadow:0 0 18px rgba(45,212,191,.35)}
.bb b{position:relative;margin-left:10px;font:600 12.5px var(--mono);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.minis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:22px}
.mini{display:flex;flex-direction:column;gap:6px;background:rgba(17,27,46,.7);border:1px solid rgba(148,163,184,.16);border-radius:18px;padding:18px;color:var(--night-ink)!important;transition:all .25s}
.mini:hover{border-color:rgba(45,212,191,.45);transform:translateY(-3px);text-decoration:none}
.mico{font-size:22px;width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:rgba(255,255,255,.06);margin-bottom:6px}
.mini b{color:#fff}
.mini small{color:#91a0b8;font-size:13.5px;line-height:1.45}
/* a new demo gets the whole row, above the four */
.mini.wide{grid-column:1/-1;flex-direction:row;align-items:center;gap:16px;border-color:rgba(45,212,191,.35);background:linear-gradient(90deg,rgba(13,148,136,.18),rgba(17,27,46,.7) 60%)}
.mini.wide .mico{margin:0;flex:none}
.mini-text{display:flex;flex-direction:column;gap:4px;min-width:0}
.mini .new{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:750;letter-spacing:.05em;text-transform:uppercase;color:#03201c;background:var(--mint);vertical-align:2px}

/* ---------------------------------------------------------------- speed */
.speed{background:var(--panel);border:1px solid var(--line);border-radius:26px;box-shadow:var(--shadow);padding:34px 34px 30px}
.route svg{width:100%;height:auto;display:block;max-height:220px}
.route .route-v{display:none;max-height:none;max-width:340px;margin:0 auto}
.route-v .rnode text,.route-v .rlabel{text-anchor:start}
.route-v .rnode text{font-size:16px}.route-v .rnode text.sub{font-size:14px}.route-v .rlabel{font-size:13px}
.rnode .ring{fill:#f8fafc;stroke:#cbd5e1;stroke-width:2}
.rnode.mid .ring{fill:#0b1220;stroke:#1e293b}
.rnode.eng .ring{fill:#f0fdfa;stroke:#2dd4bf}
.rnode text{font:700 14px var(--font);text-anchor:middle;fill:#1e293b}
.rnode text.sub{font-weight:500;font-size:13px;fill:#64748b}
.rnode .ico{fill:none;stroke:#475569;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rnode .ico circle{fill:#475569;stroke:none}
.rnode.eng .ico{stroke:#0f766e}
.rlabel{font:600 12px var(--mono);fill:#64748b;text-anchor:middle}
.packet{fill:#fbbf24;filter:drop-shadow(0 0 6px rgba(251,191,36,.8))}
.packet.p2{fill:#2dd4bf;filter:drop-shadow(0 0 6px rgba(45,212,191,.8))}
.stack{margin:18px 0 26px}
.stack-bar{display:flex;height:48px;border-radius:14px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(15,23,42,.06)}
.part{display:flex;align-items:center;gap:8px;padding:0 14px;font-size:14px;white-space:nowrap;overflow:hidden;width:var(--w);transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
.js .reveal:not(.in) .part{width:0;padding:0}
.part b{font:800 15px var(--mono)}
.part.eng{background:linear-gradient(90deg,#0d9488,#2dd4bf);color:#fff}
.part.net{background:linear-gradient(90deg,#e2e8f0,#cbd5e1);color:#1e293b}
.stack-total{margin:12px 0 0;color:var(--muted);font-size:14.5px}
.stack-total b{color:var(--ink)}
.speed-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.sfact{background:#f7f9fc;border:1px solid var(--line);border-radius:16px;padding:18px}
.sfact b{display:block;font-size:24px;font-weight:800;letter-spacing:-.02em;margin-bottom:4px}
.sfact span{font-size:14px;color:var(--muted)}

/* ---------------------------------------------------------------- trust */
.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tcol{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:26px;box-shadow:var(--shadow)}
.thead{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.thead h3{margin:0}
.tico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:none}
.tico svg{width:22px;height:22px}
.tico.amber{background:#fef3c7;color:#b45309}.tico.mint{background:#ccfbf1;color:#0f766e}.tico.sky{background:#e0f2fe;color:#0369a1}
.limits,.data{list-style:none;margin:0 0 18px;padding:0;flex:1}
.limits li,.data li{font-size:14.5px;color:#3b4760;padding:11px 0;border-bottom:1px solid #eef2f7}
.limits li:last-child,.data li:last-child{border-bottom:0}
.limits b,.data b{color:var(--ink)}
.limits span{display:block;margin-top:3px;color:var(--teal-ink);font-weight:560}

/* ---------------------------------------------------------------- compare */
.vs-table{background:var(--panel);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);overflow-x:auto}
.vs-table table{margin:0;min-width:640px}
.vs-table th,.vs-table td{padding:15px 20px}
.vs-table td:first-child{font-weight:700;color:var(--ink);white-space:nowrap}
.vs-table td{color:#475569}
.vs-table .us{background:linear-gradient(90deg,rgba(45,212,191,.08),rgba(45,212,191,.03));color:#134e48}
.vs-table th.us{color:var(--teal-ink)}
.vs-table tr:last-child td{border-bottom:0}

/* ---------------------------------------------------------------- pricing */
.pricing{display:grid;grid-template-columns:1.25fr .75fr;gap:22px;align-items:stretch}
.calc{background:linear-gradient(180deg,#0b1428,#0a1120);color:var(--night-ink);border-radius:26px;padding:32px;box-shadow:0 30px 70px rgba(2,6,23,.25);position:relative;overflow:hidden}
.calc::before{content:"";position:absolute;right:-120px;top:-120px;width:320px;height:320px;border-radius:50%;background:radial-gradient(closest-side,rgba(45,212,191,.25),transparent)}
.calc .label{color:#8e9bb3;position:relative}
.calc .fine{color:#7d8ca4;margin:18px 0 0;position:relative}
.calc .fine a{color:var(--mint-2)}
.calc code{color:#bff8ee}
.seg{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 24px}
.seg button{background:rgba(255,255,255,.04);border:1px solid rgba(148,163,184,.22);border-radius:12px;color:#dbe4f0;font:600 14px var(--font);padding:11px 10px;cursor:pointer;text-align:left;transition:all .2s}
.seg button small{display:block;font:500 12px var(--mono);color:#8e9bb3;margin-top:3px}
.seg button:hover{border-color:rgba(45,212,191,.5)}
.seg button.on{background:rgba(45,212,191,.14);border-color:var(--mint);color:#fff;box-shadow:0 0 0 1px rgba(45,212,191,.35)}
.seg button.on small{color:#99f6e4}
.calc label.label{display:block}
.calc output{color:#fff;font:700 15px var(--mono);letter-spacing:0;text-transform:none}
input[type=range]{position:relative;width:100%;-webkit-appearance:none;appearance:none;height:32px;background:none;outline-offset:2px;margin:-4px 0 -8px;touch-action:pan-y;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:8px;background:linear-gradient(90deg,#2dd4bf var(--p,50%),rgba(148,163,184,.25) var(--p,50%))}
input[type=range]::-moz-range-track{height:8px;border-radius:8px;background:linear-gradient(90deg,#2dd4bf var(--p,50%),rgba(148,163,184,.25) var(--p,50%))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;margin-top:-8px;width:24px;height:24px;border-radius:50%;background:#fff;border:4px solid #2dd4bf;box-shadow:0 4px 14px rgba(0,0,0,.4);cursor:grab}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:4px solid #2dd4bf;box-shadow:0 4px 14px rgba(0,0,0,.4);cursor:grab}
.scale{display:flex;justify-content:space-between;font:500 12px var(--mono);color:#6b7a93;margin-bottom:22px}
.calc-out{position:relative;display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:12px}
.calc-out div{background:rgba(255,255,255,.04);border:1px solid rgba(148,163,184,.16);border-radius:16px;padding:16px}
.calc-out b{display:block;font:800 clamp(19px,2vw,26px) var(--font);letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.calc-out div:first-child b{background:linear-gradient(90deg,#5eead4,#38bdf8);-webkit-background-clip:text;background-clip:text;color:transparent}
.calc-out span{font-size:13px;color:#8e9bb3}
.pcards{display:grid;gap:16px}
.pcard{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:22px;box-shadow:var(--shadow)}
.pcard h3{font-size:17px;margin-bottom:6px}
.pcard p{margin:0;font-size:14.5px;color:#3b4760}

/* ---------------------------------------------------------------- get started */
.start{display:grid;grid-template-columns:.8fr 1.2fr;gap:36px;align-items:start}
.steps{list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{position:relative;padding:0 0 26px 60px;counter-increment:s}
.steps li::before{content:counter(s);position:absolute;left:0;top:-2px;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-weight:800;color:#03201c;background:linear-gradient(135deg,#5eead4,#2dd4bf);box-shadow:0 10px 24px rgba(45,212,191,.3)}
.steps li:not(:last-child)::after{content:"";position:absolute;left:19px;top:44px;bottom:6px;width:2px;background:linear-gradient(180deg,rgba(45,212,191,.5),rgba(45,212,191,.05))}
.steps b{display:block;font-size:18px;color:#fff;margin-bottom:4px}
.steps span{color:#a8b5c9;font-size:15px}
.steps code{color:#bff8ee;font-size:13px}
.codebox{background:rgba(10,17,32,.8);border:1px solid rgba(148,163,184,.18);border-radius:20px;padding:14px;box-shadow:0 30px 70px rgba(0,0,0,.35)}
.codebox .tabs{display:flex;gap:6px;margin:0 0 12px}
.codebox .tabs button{background:transparent;border:1px solid transparent;color:#91a0b8;border-radius:10px;padding:7px 14px;font:600 14px var(--font);cursor:pointer}
.codebox .tabs button:hover{color:#fff}
.codebox .tabs button.on{background:rgba(45,212,191,.12);border-color:rgba(45,212,191,.35);color:#fff}
.codebox pre.code{margin:0;max-height:420px;background:#060c18;border-color:#15213a}
.install{margin:12px 2px 2px;font-size:13.5px;color:#91a0b8;overflow-x:auto}
.install code{color:#bff8ee;white-space:nowrap}
.next-links{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:40px}
.next-links a{display:block;background:rgba(17,27,46,.7);border:1px solid rgba(148,163,184,.16);border-radius:16px;padding:18px;color:var(--night-ink)!important;transition:all .2s}
.next-links a:hover{border-color:rgba(45,212,191,.45);transform:translateY(-2px);text-decoration:none}
.next-links b{display:block;color:#fff}
.next-links span{font-size:13.5px;color:#91a0b8}

/* ---------------------------------------------------------------- faq and closing */
.faq{max-width:860px;margin:0 auto;display:grid;gap:12px}
.faq details{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:0 22px;box-shadow:0 1px 2px rgba(15,23,42,.04);transition:border-color .2s,box-shadow .2s}
.faq details[open]{border-color:#9ee8dc;box-shadow:var(--shadow)}
.faq summary{list-style:none;cursor:pointer;padding:18px 34px 18px 0;font-weight:700;font-size:16.5px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:#f1f5f9;color:var(--teal-ink);font-weight:800;transition:transform .25s}
.faq details[open] summary::after{content:"–";background:var(--mint-soft)}
.faq details p{margin:0 0 18px;color:#3b4760}
.faq-more{text-align:center;margin:26px 0 0;color:var(--muted)}
.closing{padding:104px 20px 104px}
.closing-card{position:relative;overflow:hidden;text-align:center;border-radius:30px;padding:64px 28px;background:radial-gradient(600px 300px at 20% 0%,rgba(45,212,191,.35),transparent 60%),radial-gradient(600px 300px at 90% 100%,rgba(56,189,248,.25),transparent 60%),linear-gradient(135deg,#071122,#0b1a33);color:#fff;box-shadow:0 40px 90px rgba(2,6,23,.3)}
.closing-card h2{max-width:780px;margin:0 auto 28px;color:#fff}
.closing-card .cta{justify-content:center}

/* ---------------------------------------------------------------- investors */
.inv-hero{padding-bottom:110px}
.inv-card{position:relative;z-index:1;background:linear-gradient(180deg,rgba(17,27,46,.92),rgba(10,17,32,.95));border:1px solid rgba(45,212,191,.28);border-radius:22px;padding:24px;box-shadow:0 40px 100px rgba(0,0,0,.5)}
.inv-card-title{display:flex;align-items:center;gap:10px;font:700 13px var(--font);letter-spacing:.1em;text-transform:uppercase;color:#99f6e4;margin:0 0 16px}
.inv-kpis{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.inv-kpis>div{background:rgba(255,255,255,.04);border:1px solid rgba(148,163,184,.16);border-radius:14px;padding:14px}
.inv-kpis b{display:block;font:800 clamp(22px,2.4vw,30px) var(--font);letter-spacing:-.02em;color:#fff;margin-bottom:4px}
.inv-kpis span{font-size:13px;color:#9fb0c6;line-height:1.45}
.inv-card-foot{margin:14px 0 0;font-size:12.5px;color:#7d8ca4}
.inv-card-foot a{color:#99f6e4}
.inv-shift{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:stretch}
.inv-col{border-radius:22px;padding:26px;border:1px solid var(--line);background:var(--panel);box-shadow:var(--shadow)}
.inv-col.old{background:#f8fafc}
.inv-col.old h3{color:#475569}
.inv-col.new{border-color:#8fe3d6;background:linear-gradient(135deg,#ffffff,#effdfa)}
.inv-col-kicker{font:700 12px var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.inv-col.new .inv-col-kicker{color:var(--teal-ink)}
.inv-col ul{margin:12px 0 0;padding-left:20px;color:#334059}
.inv-col li{margin:8px 0}
.inv-col.old li{color:#64748b}
.inv-arrow{display:grid;place-items:center;font-size:34px;color:var(--teal)}
.inv-now{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.inv-count{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:var(--shadow)}
.inv-count b{display:block;font:800 clamp(28px,3.2vw,40px) var(--font);letter-spacing:-.03em;background:linear-gradient(90deg,#0b1220,#0f766e);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:6px}
.inv-count span{font-size:14px;color:var(--muted)}
.inv-note{max-width:860px;margin:22px auto 0;text-align:center;color:var(--muted);font-size:15px}
.inv-timeline{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;position:relative}
.inv-timeline::before{content:"";position:absolute;left:4%;right:4%;top:14px;height:2px;background:linear-gradient(90deg,#94a3b8,#2dd4bf)}
.inv-timeline li{position:relative;padding-top:38px}
.inv-timeline li::before{content:"";position:absolute;top:6px;left:0;width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid var(--teal);box-shadow:0 0 0 5px rgba(45,212,191,.15)}
.inv-timeline li:last-child::before{border-style:dashed;border-color:#94a3b8}
.inv-timeline time{display:block;font:700 12.5px var(--mono);color:var(--teal-ink);margin-bottom:4px}
.inv-timeline b{display:block;font-size:15.5px;margin-bottom:4px}
.inv-timeline span{font-size:13.5px;color:var(--muted);line-height:1.45}
.board-foot{margin:14px 10px 0;color:#91a0b8;font-size:13.5px}
.inv-model{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.inv-win{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.inv-win>div{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:24px;box-shadow:var(--shadow)}
.inv-win b{display:block;font-size:18px;margin-bottom:6px}
.inv-win p{margin:0;color:#3b4760}
.inv-stage{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;background:var(--panel);border:1px solid var(--line);border-radius:26px;padding:40px;box-shadow:var(--shadow)}
.inv-stage h2{font-size:clamp(26px,3vw,36px)}
.inv-stage p{color:#3b4760}
.inv-close-sub{max-width:640px;margin:-10px auto 26px;color:#b9c5d6}
.closing-card .kicker{color:var(--mint)}
.closing-card .kicker::after{content:"";width:22px;height:2px;border-radius:2px;background:currentColor;opacity:.7}
@media (max-width:1080px){
  .inv-now{grid-template-columns:repeat(2,minmax(0,1fr))}
  .inv-timeline{grid-template-columns:1fr;gap:18px}
  .inv-timeline::before{left:8px;right:auto;top:6px;bottom:6px;width:2px;height:auto;background:linear-gradient(180deg,#94a3b8,#2dd4bf)}
  .inv-timeline li{padding:0 0 0 34px}
  .inv-timeline li::before{top:2px}
  .inv-model{grid-template-columns:1fr}
}
@media (max-width:860px){
  .inv-shift{grid-template-columns:1fr}
  .inv-arrow{transform:rotate(90deg)}
  .inv-win,.inv-stage{grid-template-columns:1fr}
  .inv-stage{padding:26px}
}
@media (max-width:560px){
  .inv-kpis,.inv-now{grid-template-columns:1fr}
}

/* ---------------------------------------------------------------- smaller screens */
@media (max-width:1080px){
  .hero-grid{grid-template-columns:1fr;gap:44px}
  .hero-card{max-width:620px}
  .proof{grid-template-columns:repeat(2,1fr)}
  .tools{grid-template-columns:repeat(2,1fr)}
  .types{grid-template-columns:1fr 1fr}
  .types .tcard:last-child{grid-column:1/-1}
  .lab{grid-template-columns:1fr}
  .lab-cases{grid-template-columns:repeat(3,1fr)}
  .case{flex-direction:column;align-items:flex-start;gap:10px}
  .case:hover{transform:translateY(-2px)}
  .minis,.next-links{grid-template-columns:1fr 1fr}
  .pricing{grid-template-columns:1fr}
  .try{grid-template-columns:1fr}
  .pcards{grid-template-columns:repeat(3,1fr)}
  .trust{grid-template-columns:1fr 1fr}
  .trust .tcol:last-child{grid-column:1/-1}
}
@media (max-width:860px){
  section.block{padding-top:80px}
  .band{padding:80px 0;margin-top:80px}
  .head{margin-bottom:32px}
  .why-grid,.types,.trust,.showcase,.start,.cost,.speed-facts,.pcards{grid-template-columns:1fr}
  .types .tcard:last-child,.trust .tcol:last-child{grid-column:auto}
  .pipe{grid-template-columns:repeat(4,1fr);gap:6px}
  .pnum{width:48px;height:48px;font-size:18px}
  .pipe-track{top:23px}
  .pnode small{display:none}
  .pnode b{font-size:14px}
  .ppanels{padding:22px}
  .ppanel{grid-template-columns:1fr;gap:20px}
  .cost{padding:28px;gap:28px}
  .lab-cases{grid-template-columns:1fr}
  .case{flex-direction:row;align-items:center}
  .lab-stage{padding:20px;min-height:0}
  .brow{grid-template-columns:1fr;gap:10px}
  .glance{grid-template-columns:minmax(0,1fr)}
  .glance>div:nth-child(odd){border-right:0}
  .glance>div{grid-template-columns:minmax(0,1fr);gap:4px}
  .tbody{min-height:0}
}
/* the six memory tools stay two by two on a tablet held upright */
@media (max-width:700px){
  .tools{grid-template-columns:1fr}
}
@media (max-width:560px){
  .hero{padding:64px 0 110px}
  .proof{grid-template-columns:1fr}
  .kv{grid-template-columns:74px 1fr;gap:8px}
  .memslot{min-height:112px}
  .verdict{min-height:74px}
  .try-meta{min-height:9em}
  .lights{display:none}
  .dcard-body{padding:16px 16px 6px}
  .dcard-foot{flex-direction:column;align-items:flex-start;gap:10px;padding:14px 16px}
  .minis,.next-links{grid-template-columns:1fr}
  .chip{border-radius:14px;text-align:left;width:100%}
  .seg{grid-template-columns:1fr 1fr}
  .calc{padding:22px}
  .calc-out{grid-template-columns:1fr}
  .speed{padding:22px 16px}
  .route .route-h{display:none}
  .route .route-v{display:block}
  .stack-bar{height:58px}
  .part.eng,.part.net{flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;font-size:12.5px;padding:0 12px;line-height:1.2}
  .part b{font-size:14px}
  .cta .btn{flex:1 1 auto}
  .gauges.many{grid-template-columns:1fr 1fr}
  .try-cols{grid-template-columns:1fr}
  .tiles{grid-template-columns:1fr}
  .closing-card{padding:44px 20px}
}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none}
  .orbit,.orbit span,.live-dot,.live-dot.on,.blink{animation:none}
}
/* phones: each row of the comparison is a card, with Jev and Jepela named above their answers */
@media (max-width:640px){
  .vs-table{overflow:visible}
  .vs-table table{min-width:0}
  .vs-table thead{display:none}
  .vs-table table,.vs-table tbody,.vs-table tr,.vs-table td{display:block}
  .vs-table tr{padding:16px 16px 18px;border-bottom:1px solid var(--line)}
  .vs-table tr:last-child{border-bottom:0}
  .vs-table td,.vs-table tr:last-child td{border:0;padding:0 12px}
  .vs-table td:first-child{white-space:normal;padding:0 0 8px;font-size:16px}
  .vs-table td.us{padding:8px 12px 10px;margin-top:8px;border-radius:10px}
  .vs-table td+td::before{display:block;font:700 12px/1.6 var(--font);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
  .vs-table td:nth-child(2)::before{content:"Jev"}
  .vs-table td.us::before{content:"Jepela";color:var(--teal-ink)}
}