/* mergesafe.ai homepage, ported from the designer's mock. */
@font-face { font-family: "Inter"; font-weight: 100 900; font-style: normal; font-display: swap; src: url("/fonts/Inter-Variable.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/IBMPlexMono-Regular.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/IBMPlexMono-Medium.woff2") format("woff2"); }
:root{--font-sans:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;--font-mono:"IBM Plex Mono",ui-monospace,monospace;--card:#fff;--mist-bg:var(--brand-mist);--line-strong:#d1d5db;color-scheme:light}
:root{--page:#f6f6f7;--surface-sunken:#f3f4f6;--ink-secondary:#374151;--ink-muted:#6b7280;--success-bg:#d1fae5;--success-border:#a7f3d0;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--shadow-card:0 1px 2px rgba(16,24,40,.04);--shadow-float:0 16px 40px rgba(15,26,23,.18);--nav-bg:#0f1a17;--brand:#10b981;--brand-light:#34d399;--brand-strong:#047857;--brand-deep:#052e22;--brand-mist:#ecfdf5;--ink:#111827;--line:#e5e7eb}
*{box-sizing:border-box;margin:0}
body{font-family:var(--font-sans);background:var(--card);color:var(--ink);overflow-x:clip}
a{color:inherit;text-decoration:none}

/* ================= hero ================= */
.hero{position:relative;overflow:hidden;color:var(--brand-mist);padding-bottom:48px;
  background:radial-gradient(80% 70% at 20% 75%,#0a3426 0%,var(--brand-deep) 45%,#020f0a 100%)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;background:linear-gradient(transparent,var(--page));pointer-events:none}
.hero nav{position:relative;z-index:4;max-width:1320px;margin:auto;display:flex;align-items:center;gap:28px;padding:20px 24px;font:500 14px var(--font-sans);color:#a7c9bb}
.hero nav .logo{display:flex;align-items:center;gap:10px;font:700 20px var(--font-sans);letter-spacing:-.02em;color:var(--brand-mist);margin-right:auto}
.hero nav .logo img{height:28px}
.hero nav a:hover{color:#fff}
.hero nav .signin{color:var(--brand-light);font-weight:600}

/* copy on the left, the lit scene on the right, both inside the first screen */
.hero-body{position:relative;max-width:1320px;margin:0 auto;padding:0 24px;min-height:clamp(540px,calc(100svh - 76px),780px);display:flex;align-items:center}
.copy{position:relative;z-index:2;width:min(460px,40%);padding:8px 0 64px}
.eyebrow{font:600 12px var(--font-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--brand-light);margin-bottom:18px}
h1{font:700 clamp(46px,5.6vw,80px)/.96 var(--font-sans);letter-spacing:-.045em;color:#fff}
.value{margin-top:16px;font:700 clamp(22px,2.2vw,30px)/1.15 var(--font-sans);letter-spacing:-.02em;color:var(--brand-light)}
.sub{margin-top:16px;max-width:420px;font:400 16px/1.6 var(--font-sans);color:#a7c9bb}
.cta{display:inline-flex;align-items:center;gap:10px;margin-top:28px;padding:15px 24px;border-radius:8px;background:var(--brand-light);color:var(--brand-deep);font:700 16px var(--font-sans);
  box-shadow:0 10px 40px rgba(52,211,153,.35);transition:background .2s,box-shadow .2s,transform .2s}
.cta:hover{background:#6ee7b7;box-shadow:0 12px 48px rgba(52,211,153,.5);transform:translateY(-1px)}
.cta:focus-visible{outline:2px solid var(--brand-mist);outline-offset:3px}
.cta svg{width:18px;height:18px}
.free{margin-top:10px;font:500 13px var(--font-sans);color:#7fa596}
.proof{margin-top:30px;padding-top:20px;border-top:1px solid #ffffff17}
.price{display:flex;align-items:center;gap:14px}
.tiers{margin-top:10px;font:500 13px/1.4 var(--font-sans);color:#7fa596}
.tiers strong{color:#d1fae5;font-weight:600}
@media (max-width:899px){.price{justify-content:center}}
.proof b{font:700 40px/1 var(--font-sans);letter-spacing:-.03em;color:#fff}
.proof span{font:500 13px/1.4 var(--font-sans);color:#a7c9bb;text-align:left}

/* stage: fixed 880x620 space, scaled into the right side. Its CSS perspective matches the WebGL camera. */
.stage-wrap{position:absolute;z-index:1;left:38%;right:0;top:0;bottom:0;pointer-events:none}
.stage{position:absolute;left:0;top:0;width:880px;height:620px;transform-origin:0 0;perspective:1400px;perspective-origin:440px 310px}
.gl{position:absolute;left:-360px;top:-260px;width:1600px;height:1000px;pointer-events:none}
.lamp-hit{position:absolute;left:40px;top:150px;width:230px;height:400px;cursor:pointer;pointer-events:auto;border-radius:24px}
.lamp-hit:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

@media (max-width:899px){
  .hero-body{display:block;min-height:0}
  .copy{width:auto;max-width:560px;margin:0 auto;text-align:center;padding:12px 0 4px}
  .sub{margin-inline:auto}
  .proof{justify-content:center}
  .stage-wrap{position:relative;left:auto;right:auto;top:auto;bottom:auto;margin:0 -24px}
}

/* ---- diff panel: sits in the dark until the light finds it ---- */
.panel{position:absolute;left:330px;top:50px;width:530px;border-radius:16px;background:#0b1512;border:1px solid #1d2d27;
  box-shadow:0 30px 80px #000a;opacity:.3;filter:saturate(.3) brightness(.65);transition:opacity .9s,filter .9s}
.stage.beam-on .panel{opacity:1;filter:none}
.phead{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid #1d2d27;font:500 13px var(--font-sans);color:#9fb3ab}
.phead b{color:#e6f4ee;font-weight:600}
.status{margin-left:auto;display:flex;align-items:center}
.pill{font:600 11px var(--font-sans);letter-spacing:.06em;color:#6ee7b7;border:1px solid #1f5a45;border-radius:999px;padding:3px 9px;transition:color .5s,border-color .5s}
.file{padding:9px 18px;font:500 12px var(--font-mono);color:#7d928a;background:#0e1b17;border-bottom:1px solid #1d2d27}
.code{padding:8px 0 12px;font:400 13px/1 var(--font-mono)}
.ln{display:flex;align-items:center;height:28px;padding-right:18px;opacity:.2;color:#cfe3da;white-space:pre;
  background:rgba(16,185,129,.06);transition:opacity .45s,background .6s,box-shadow .6s}
.ln.lit{opacity:1}
.ln i{flex:0 0 46px;text-align:right;padding-right:14px;color:#4f6a5f;font-style:normal;font-size:12px}
.ln u{flex:0 0 20px;text-decoration:none;color:#34d399}
.k{color:#c792ea}.s{color:#a5e8c9}.fn{color:#7dd3fc}
.stage.flag .ln.bad{background:rgba(244,63,94,.2);box-shadow:inset 3px 0 #fb7185}
.stage.flag .ln.bad .s{color:#fda4af}
.finding{margin:4px 18px 18px;padding:14px 16px;border-radius:12px;background:#1a0f13;border:1px solid #5a1f2c;display:flex;gap:12px;align-items:flex-start;
  opacity:0;transform:translateY(10px);transition:opacity .7s,transform .7s cubic-bezier(.2,.8,.2,1)}
.stage.flag .finding{opacity:1;transform:none;transition-delay:.35s}
.sev{font:700 11px var(--font-sans);letter-spacing:.06em;color:#fff;background:#e11d48;border-radius:999px;padding:4px 10px;white-space:nowrap}
.finding p{font:400 13px/1.45 var(--font-sans);color:#e7c9cf}
.finding p b{color:#ffe4e8;font-weight:600}
.finding code{font:500 12.5px var(--font-mono);color:#fda4af}
.verdict{display:none;align-items:center;gap:12px}
.stage.flag .pill{display:none}.stage.flag .verdict{display:flex}
.secbadge{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 8px;border-radius:4px;background:rgba(244,63,94,.16);color:#fda4af;font:600 10px var(--font-sans);letter-spacing:.04em}
.secbadge svg{width:12px;height:12px}
.meter{display:inline-flex;flex-direction:column;align-items:flex-end;gap:4px}
.segs{display:flex;gap:3px}
.segs i{width:12px;height:12px;border-radius:2px;background:#22302b}
.segs i:first-child{background:#ef4444;animation:segIn .5s .4s both}
@keyframes segIn{from{background:#22302b}}
.mlabel{font:600 9px var(--font-sans);letter-spacing:.04em;color:#fda4af}
.nomo,.nomo *{transition:none!important}

/* sticky signup: appears once the hero button has scrolled away, hides again at the final CTA */
.sticky{position:fixed;left:0;right:0;top:0;z-index:50;transform:translateY(-100%);transition:transform .3s cubic-bezier(.2,.8,.2,1);
  background:rgba(4,30,22,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid rgba(52,211,153,.16)}
.sticky.show{transform:none}
.sticky .in{max-width:1320px;margin:0 auto;display:flex;align-items:center;gap:24px;padding:10px 24px}
.sticky .logo{display:flex;align-items:center;gap:9px;font:700 18px var(--font-sans);letter-spacing:-.02em;color:var(--brand-mist);margin-right:auto}
.sticky .logo img{height:24px}
.slinks{display:flex;gap:24px;font:500 14px var(--font-sans);color:#a7c9bb}
.slinks a:hover{color:#fff}
.slinks .signin{color:var(--brand-light);font-weight:600}
.sticky .cta{margin:0;padding:9px 16px;font-size:14px;box-shadow:0 6px 24px rgba(52,211,153,.3)}
.sticky .cta svg{width:16px;height:16px}
@media (max-width:640px){
  .sticky{top:auto;bottom:0;transform:translateY(100%);border-bottom:0;border-top:1px solid rgba(52,211,153,.16);padding-bottom:env(safe-area-inset-bottom)}
  .sticky .logo,.slinks{display:none}
  .sticky .in{padding:10px 16px}
  .sticky .cta{flex:1;justify-content:center;padding:13px 16px;font-size:15px}
}
@media (prefers-reduced-motion:reduce){.sticky{transition:none}}

/* ---- integrations hub ---- */
.loop{position:relative;overflow:hidden;padding:104px 24px;color:var(--brand-mist);
  background:radial-gradient(70% 60% at 30% 40%,#0b3a2c 0%,var(--brand-deep) 50%,#020f0a 100%)}
.loop h2{font:700 clamp(30px,3.6vw,44px)/1.08 var(--font-sans);letter-spacing:-.03em;color:#fff;max-width:760px}
.loop .lede{color:#a7c9bb}
.loop-grid{margin-top:40px;display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center}
.loop-svg{width:100%;height:auto;display:block;overflow:visible}
.track{fill:none;stroke:rgba(110,231,183,.22);stroke-width:2;stroke-dasharray:3 6;transition:opacity .4s}
.loop .lit{fill:none;stroke:#6ee7b7;stroke-width:3;stroke-linecap:round;filter:url(#glow);opacity:0;transition:opacity .5s}
.loop .lit.opt{stroke-dasharray:8 7!important;stroke-dashoffset:0!important}
.hoptag{font:600 12px var(--font-sans);fill:#d1fae5;paint-order:stroke;stroke:#03211a;stroke-width:5px;stroke-linejoin:round;opacity:0;transition:opacity .35s}
.hoptag.on{opacity:1}
.packet{fill:#ecfdf5;opacity:0;transition:opacity .2s}
.hubbg{fill:#062a1f;stroke:rgba(52,211,153,.5);stroke-width:1.5}
.ring{fill:none;stroke:#34d399;stroke-width:1.5;opacity:0;transform-origin:450px 280px;animation:ring 3.2s ease-out infinite}
.ring2{animation-delay:1.6s}
@keyframes ring{0%{opacity:.55;transform:scale(1)}100%{opacity:0;transform:scale(1.6)}}
.hubaura{animation:aura 4s ease-in-out infinite}
@keyframes aura{50%{opacity:.6}}
.tilebg{fill:#fff;stroke:rgba(52,211,153,.25);stroke-width:1}
.halo{fill:rgba(52,211,153,.18);opacity:0;transition:opacity .4s}
.node{transition:opacity .4s}
.node.on .halo{opacity:1}
.node.on .tilebg{stroke:#34d399;stroke-width:2}
.node.off{opacity:.28}
.nlabel{font:600 13px var(--font-sans);fill:#a7c9bb;text-anchor:middle}
.node.on .nlabel{fill:#fff}
.track.off{opacity:.15}

.flows{list-style:none;padding:0;display:grid;gap:10px}
.flows li{padding:14px 16px;border-radius:var(--radius-lg);border:1px solid rgba(110,231,183,.14);background:rgba(255,255,255,.02);transition:background .3s,border-color .3s,opacity .3s}
.flows li.on{background:rgba(52,211,153,.08);border-color:rgba(52,211,153,.45);box-shadow:0 0 24px rgba(52,211,153,.08)}
.flows li.off{opacity:.5}
.fhead{display:flex;align-items:center;gap:10px}
.fmarks{display:flex;gap:6px;align-items:center;padding:5px 7px;border-radius:8px;background:var(--card)}
.fmarks svg{display:block;width:18px;height:18px}
.fhead b{font:600 15px var(--font-sans);color:#fff;margin-right:auto}
.core{font:600 10px var(--font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--brand-deep);background:var(--brand-light);border-radius:999px;padding:3px 8px}
.flows p{margin-top:8px;font:400 14px/1.5 var(--font-sans);color:#a7c9bb}
.fmeta{margin-top:10px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.mode{font:500 12px var(--font-sans);color:#7fa596}
.mode code{font:500 11.5px var(--font-mono);color:#d1fae5;background:rgba(255,255,255,.06);border-radius:4px;padding:1px 5px}
.flows em{font:600 11px var(--font-sans);font-style:normal;white-space:nowrap;color:#6ee7b7;border:1px solid rgba(110,231,183,.3);border-radius:999px;padding:3px 9px}
.opt{margin-top:10px;display:flex;align-items:center;gap:10px;font:500 13px/1.4 var(--font-sans);color:#d1fae5;cursor:pointer}
.sw{all:unset;box-sizing:border-box;flex:none;cursor:pointer;width:34px;height:20px;border-radius:999px;background:rgba(255,255,255,.14);position:relative;transition:background .25s}
.sw span{position:absolute;left:3px;top:3px;width:14px;height:14px;border-radius:50%;background:var(--card);transition:transform .25s}
.sw[aria-checked="true"]{background:var(--brand)}
.sw[aria-checked="true"] span{transform:translateX(14px)}
.sw:focus-visible{outline:2px solid var(--brand-light);outline-offset:2px}
@media (max-width:899px){.loop{padding:72px 20px}.loop-grid{grid-template-columns:1fr;gap:24px}}
@media (prefers-reduced-motion:reduce){.ring,.hubaura{animation:none}}

/* ================= rest of page (design-system light surfaces) ================= */
body{background:var(--page)}
.sec{padding:96px 24px}
.page-bg{background:var(--page)} .white-bg{background:var(--card)}
.wrap{max-width:1200px;margin:0 auto}
.wrap.narrow{max-width:820px}
.kicker{font:600 12px var(--font-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--brand-strong);margin-bottom:12px}
.sec h2{font:700 clamp(30px,3.6vw,44px)/1.08 var(--font-sans);letter-spacing:-.03em;color:var(--ink);max-width:760px}
.lede{margin-top:14px;max-width:640px;font:400 18px/1.6 var(--font-sans);color:var(--ink-muted)}
.more{display:inline-block;margin-top:24px;font:600 15px var(--font-sans);color:var(--brand-strong)}
.more:hover{text-decoration:underline}
.sec a:not(.more):not(.cta){color:var(--brand-strong);text-decoration:underline;text-underline-offset:2px}
.tile{display:grid;place-items:center;width:36px;height:36px;border-radius:var(--radius-md);background:var(--success-bg);color:var(--brand-strong);flex:none}
.ic{width:18px;height:18px}
.card{display:flex;flex-direction:column;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-xl);padding:24px;box-shadow:var(--shadow-card)}
.card .tile{margin-bottom:10px}
.card b{font:600 16px/1.35 var(--font-sans);color:var(--ink)}
.card span:last-child{font:400 15px/1.5 var(--font-sans);color:var(--ink-muted)}
.why-grid{margin-top:36px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

.same-why{margin-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.same,.because{border-radius:var(--radius-xl);padding:32px}
.same{background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-card)}
.same h3,.because h3{font:700 24px/1.2 var(--font-sans);letter-spacing:-.02em;color:var(--ink);max-width:460px}
.same ul{list-style:none;padding:0;margin-top:20px;display:grid;gap:14px}
.same li{display:flex;gap:10px}
.same li b{display:block;font:600 15px/1.4 var(--font-sans);color:var(--ink)}
.same li span{font:400 14px/1.5 var(--font-sans);color:var(--ink-muted)}
.btn-outline{display:inline-flex;align-items:center;gap:8px;margin-top:24px;padding:11px 18px;border-radius:var(--radius-md);border:1px solid var(--line-strong,#d1d5db);background:var(--card);color:var(--ink)!important;text-decoration:none!important;font:600 15px var(--font-sans);transition:border-color .2s,background .2s}
.btn-outline:hover{border-color:var(--brand);background:var(--mist-bg)}
.bi{width:16px;height:16px;color:var(--brand-strong)}
.note{margin-top:8px;font:400 13px var(--font-sans);color:var(--ink-muted)}
.because{position:relative;overflow:hidden;color:#a7c9bb;
  background:radial-gradient(90% 80% at 100% 0%,#0b3a2c 0%,var(--brand-deep) 55%,#03170f 100%)}
.because::before{content:"";position:absolute;right:-30%;top:-40%;width:90%;height:120%;pointer-events:none;
  background:conic-gradient(from 200deg at 100% 0%,transparent 0deg,rgba(52,211,153,.14) 18deg,rgba(110,231,183,.2) 24deg,rgba(52,211,153,.14) 30deg,transparent 48deg);filter:blur(6px);
  -webkit-mask-image:radial-gradient(farthest-side at 100% 0%,#000 30%,transparent 100%);mask-image:radial-gradient(farthest-side at 100% 0%,#000 30%,transparent 100%)}
.because h3{color:#fff;position:relative}
.because p{position:relative;margin-top:14px;font:400 16px/1.6 var(--font-sans);max-width:480px}
.kicker.on-dark{color:var(--brand-light);position:relative}
.because-mark{position:absolute;right:28px;bottom:24px;height:40px;opacity:.9;filter:drop-shadow(0 0 18px rgba(52,211,153,.6))}
@media (max-width:899px){.same-why{grid-template-columns:1fr}.same,.because{padding:24px}.because-mark{display:none}}
.trust{margin-top:36px;display:grid;grid-template-columns:340px 1fr;gap:16px;align-items:start}
.trust-side{display:grid;gap:16px}
.tcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-xl);padding:24px;box-shadow:var(--shadow-card)}
.tcard h3{font:700 17px var(--font-sans);color:var(--ink)}
.soc-head{display:flex;align-items:center;gap:14px}
.soc-seal{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--brand-deep);color:var(--brand-light);box-shadow:0 0 0 4px var(--success-bg)}
.soc-seal .ic{width:24px;height:24px}
.soc-head b{display:block;font:700 22px/1.1 var(--font-sans);color:var(--ink)}
.soc-head span{font:500 13px var(--font-sans);color:var(--ink-muted)}
.soc-status{margin-top:16px;display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;background:var(--success-bg);color:var(--brand-strong);font:600 12px var(--font-sans)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--brand)}
.soc p{margin-top:12px;font:400 14px/1.55 var(--font-sans);color:var(--ink-muted)}
.docs{list-style:none;padding:0;margin-top:12px}
.docs a{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line);color:var(--ink)!important;text-decoration:none!important;font:500 14px var(--font-sans)}
.docs li:first-child a{border-top:0}
.docs a:hover span{color:var(--brand-strong)}
.di{width:16px;height:16px;color:var(--ink-muted);flex:none}
.docs em{margin-left:auto;font:600 10px var(--font-sans);font-style:normal;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-muted);background:var(--surface-sunken);border:1px solid var(--line);border-radius:4px;padding:2px 6px;white-space:nowrap}
.tcard .btn-outline{margin-top:14px}
.controls-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.controls-head a{font:600 14px var(--font-sans);color:var(--brand-strong)!important;text-decoration:none!important}
.cgrid{margin-top:20px;display:grid;grid-template-columns:1fr 1fr;gap:24px 32px}
.cgroup h4{font:600 12px var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:10px}
.cgroup ul{list-style:none;padding:0;display:grid;gap:9px}
.cgroup li{display:flex;gap:8px;font:400 14px/1.45 var(--font-sans);color:var(--ink-secondary)}
.subs{margin-top:16px}
.ints-note{margin-top:6px;font:400 14px/1.5 var(--font-sans);color:var(--ink-muted)}
.sublist{list-style:none;padding:0;margin-top:8px;display:grid;grid-template-columns:1fr 1fr;column-gap:40px}
.sublist li{display:flex;align-items:flex-start;gap:14px;padding:14px 0;border-top:1px solid var(--line)}
.sublist li:nth-child(-n+2){border-top:0}
.slogo{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:var(--radius-md);background:var(--card);border:1px solid var(--line)}
.slogo svg{width:22px;height:22px}
.slogo.sentry-bg{background:#362D59;border-color:#362D59}
.slogo.sentry-bg svg{width:20px;height:20px}
.sublist div{flex:1;min-width:0}
.sublist b{font:600 15px var(--font-sans);color:var(--ink)}
.sublist i{font-style:normal;margin:0 6px;color:var(--ink-subtle,#adb5bd)}
.srole{font:400 15px var(--font-sans);color:var(--ink-muted)}
.sublist p{margin-top:3px;font:400 13px/1.45 var(--font-sans);color:var(--ink-muted)}
.sublist em{font:500 13px var(--font-sans);font-style:normal;color:var(--ink-muted);padding-top:1px}
@media (max-width:899px){.trust{grid-template-columns:1fr}.cgrid{grid-template-columns:1fr}.sublist{grid-template-columns:1fr}.sublist li:nth-child(2){border-top:1px solid var(--line)}}
.split{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:start}
.split-head{position:sticky;top:96px}
.sec[id]{scroll-margin-top:56px}
.feats{list-style:none;padding:0;display:grid;gap:0}
.feats li{display:flex;gap:16px;padding:22px 0;border-top:1px solid var(--line)}
.feats li:first-child{border-top:0;padding-top:0}
.feats b{font:600 16px/1.35 var(--font-sans);color:var(--ink)}
.feats p{margin-top:4px;font:400 15px/1.55 var(--font-sans);color:var(--ink-muted)}
.vs{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:36px}
.vs-card{display:flex;flex-direction:column;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-xl);padding:22px;box-shadow:var(--shadow-card);font:400 15px/1.5 var(--font-sans);color:var(--ink-muted)}
.vs-card b{color:var(--ink);font-weight:600}
.vs-ms{border-color:var(--success-border);background:var(--mist-bg)}
.vs-who{font:600 12px var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-secondary)}
.vs-ask{font:500 13px/1.5 var(--font-mono);color:var(--ink-secondary)}
.vs-out{margin-top:auto;font:600 15px var(--font-sans)}
.vs-miss{color:var(--ink-secondary)}.vs-hit{color:var(--brand-strong)}

.tiers-grid{margin-top:40px;display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:16px;align-items:stretch;max-width:1080px}
.tier{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-xl);padding:28px;box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:14px}
.tname{display:flex;align-items:center;gap:8px;font:600 15px var(--font-sans);color:var(--ink-secondary)}
.tprice{display:flex;align-items:baseline;gap:8px}
.tprice b{font:700 48px/1 var(--font-sans);letter-spacing:-.04em;color:var(--ink)}
.tprice span{font:500 14px var(--font-sans);color:var(--ink-muted)}
.tier p{font:400 15px/1.55 var(--font-sans);color:var(--ink-muted)}
.tier-strong{position:relative;overflow:hidden;color:var(--brand-mist);border-color:#1f5a45;
  background:radial-gradient(120% 90% at 80% 0%,#0b3a2c 0%,var(--brand-deep) 55%,#03170f 100%);box-shadow:var(--shadow-float),0 0 0 1px rgba(52,211,153,.25)}
.tier-strong::before{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(closest-side,rgba(52,211,153,.35),transparent);pointer-events:none}
.tier-strong .tname{color:#d1fae5}
.tier-strong .tprice b{color:#fff}
.tier-strong .tprice span,.tier-strong p{color:#a7c9bb}
.tier-strong .cta{margin-top:auto;align-self:flex-start}
.badge-rec{background:var(--brand-light)!important;color:var(--brand-deep)!important}
.badge{font:600 10px var(--font-sans);letter-spacing:.04em;padding:3px 8px;border-radius:999px;background:var(--success-bg);color:var(--brand-strong)}

.sub-h{margin-top:48px;font:700 18px var(--font-sans);color:var(--ink)}
.addons{margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.beyond{margin-top:14px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.addon{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px 22px}
.ahead{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.ahead b{font:600 16px var(--font-sans);color:var(--ink)}
.ahead span{font:600 14px var(--font-sans);color:var(--brand-strong);white-space:nowrap}
.addon p{margin-top:8px;font:400 14px/1.55 var(--font-sans);color:var(--ink-muted)}

.fine{margin-top:40px;display:grid;grid-template-columns:1fr 1fr;gap:22px 40px}
.fine dt{display:flex;gap:8px;align-items:flex-start;font:600 15px/1.4 var(--font-sans);color:var(--ink)}
.ck{width:16px;height:16px;flex:none;margin-top:2px;color:var(--brand)}
.fine dd{margin:4px 0 0 24px;font:400 14px/1.55 var(--font-sans);color:var(--ink-muted)}
.fine code,.ans code{font:500 12.5px var(--font-mono);background:var(--surface-sunken);border:1px solid var(--line);border-radius:4px;padding:1px 5px;color:var(--ink-secondary)}

.seat-band{margin-top:48px;border-radius:var(--radius-xl);padding:32px 36px;display:flex;gap:32px;align-items:center;justify-content:space-between;
  background:radial-gradient(90% 140% at 0% 0%,#0b3a2c,var(--brand-deep) 60%,#03170f);color:var(--brand-mist)}
.seat-band h3{font:700 26px/1.15 var(--font-sans);letter-spacing:-.02em;color:#fff}
.seat-band p{margin-top:8px;max-width:560px;font:400 16px/1.55 var(--font-sans);color:#a7c9bb}
.seat-band p b{color:var(--brand-light)}
.more.on-dark{margin:0;max-width:340px;color:var(--brand-light);font-size:14px;line-height:1.45}

.oss{margin-top:16px;display:flex;gap:28px;align-items:center;background:var(--mist-bg);border:1px solid var(--success-border);border-radius:var(--radius-xl);padding:28px 32px}
.oss-num{display:flex;flex-direction:column;align-items:center;min-width:120px}
.oss-num b{font:700 44px/1 var(--font-sans);letter-spacing:-.04em;color:var(--brand-strong)}
.oss-num span{margin-top:4px;font:600 11px var(--font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--brand-strong)}
.oss h3{font:700 18px var(--font-sans);color:var(--ink)}
.oss p{margin-top:6px;font:400 15px/1.55 var(--font-sans);color:var(--ink-secondary)}

.steps{list-style:none;padding:0;margin-top:40px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:s}
.steps li{position:relative;background:var(--page);border:1px solid var(--line);border-radius:var(--radius-xl);padding:28px}
.num{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--brand-deep);color:var(--brand-light);font:700 14px var(--font-sans);margin-bottom:16px;box-shadow:0 0 0 4px rgba(52,211,153,.18)}
.steps b{font:600 17px var(--font-sans);color:var(--ink)}
.steps p{margin-top:6px;font:400 15px/1.55 var(--font-sans);color:var(--ink-muted)}

.faq{margin-top:28px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-xl);box-shadow:var(--shadow-card)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 24px;font:600 17px var(--font-sans);color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.chev{width:18px;height:18px;color:var(--ink-muted);transition:transform .2s}
.faq[open] .chev{transform:rotate(180deg)}
.ans{padding:0 24px 22px}
.ans p{font:400 15px/1.65 var(--font-sans);color:var(--ink-secondary)}
.ans p+p{margin-top:12px}

.final{position:relative;overflow:hidden;text-align:center;padding:120px 24px;color:var(--brand-mist);
  background:radial-gradient(70% 90% at 50% 0%,#0b3a2c 0%,var(--brand-deep) 50%,#020f0a 100%)}
.final-glow{position:absolute;left:50%;top:-40%;width:900px;height:700px;transform:translateX(-50%);
  background:conic-gradient(from 180deg at 50% 0%,transparent 160deg,rgba(52,211,153,.18) 175deg,rgba(110,231,183,.28) 180deg,rgba(52,211,153,.18) 185deg,transparent 200deg);filter:blur(8px);pointer-events:none}
.final-mark{position:relative;height:56px;margin-bottom:24px;filter:drop-shadow(0 0 24px rgba(52,211,153,.7))}
.final-copy{position:relative}
.final h2{font:700 clamp(32px,4.4vw,56px)/1.05 var(--font-sans);letter-spacing:-.04em;color:#fff}
.final p{margin-top:12px;font:500 18px var(--font-sans);color:#a7c9bb}
.final .cta{margin-top:28px}

footer{background:var(--nav-bg,#0f1a17);color:#7fa596;padding:36px 24px;text-align:center;font:500 13px/1.6 var(--font-sans)}
.flinks{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin-bottom:10px}
.flinks a{color:#a7c9bb}.flinks a:hover{color:#fff}

@media (max-width:899px){
  .sec{padding:72px 20px}
  .why-grid{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr;gap:32px}.split-head{position:static}
  .tiers-grid,.addons,.beyond,.fine,.steps{grid-template-columns:1fr}
  .seat-band,.oss{flex-direction:column;align-items:flex-start}
  .oss-num{align-items:flex-start}
}
@media (max-width:520px){.why-grid,.vs{grid-template-columns:1fr}}
@media (max-width:640px){.hero nav{flex-wrap:wrap;gap:4px 16px}.hero nav .logo{flex-basis:100%;margin-bottom:4px}.hero nav a:not(.logo){display:inline-flex;align-items:center;min-height:32px}}
:root{--ink-muted:#5b6371}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--page:#0e1210;--card:#161c19;--surface-sunken:#242d29;--ink:#eef2f0;--ink-secondary:#c9d3ce;--ink-muted:#9aa7a1;--line:#2e3834;--line-strong:#3a4540;--success-bg:#17302a;--success-border:#1d3b33;--brand-strong:#7fd3b3;--mist-bg:#17302a;color-scheme:dark}}
:root[data-theme="dark"]{--page:#0e1210;--card:#161c19;--surface-sunken:#242d29;--ink:#eef2f0;--ink-secondary:#c9d3ce;--ink-muted:#9aa7a1;--line:#2e3834;--line-strong:#3a4540;--success-bg:#17302a;--success-border:#1d3b33;--brand-strong:#7fd3b3;--mist-bg:#17302a;color-scheme:dark}
.hero nav{padding-right:max(24px,calc(132px - max(0px,(100vw - 1320px) / 2)))}
.theme-pick{position:absolute;top:12px;right:16px;z-index:5;display:inline-flex;border:1px solid #ffffff26;border-radius:999px;padding:2px;gap:2px;background:#0b1512}.theme-pick button{border:0;background:transparent;color:#a7c9bb;cursor:pointer;width:28px;height:24px;border-radius:999px;display:grid;place-items:center}.theme-pick button svg{width:14px;height:14px}.theme-pick button:hover{color:#fff}.theme-pick button[aria-pressed="true"]{background:#1d2d27;color:#fff}@media (max-width:480px){.theme-pick button{width:32px;height:32px}}
.hero .stage-wrap.static{display:flex;align-items:center;justify-content:center}.hero .stage-wrap.static .stage{position:relative;width:auto;height:auto;transform:none}.hero .stage-wrap.static .gl,.hero .stage-wrap.static .lamp-hit{display:none}.hero .stage-wrap.static .panel{position:relative;left:auto;top:auto;width:min(530px,100%);transform:none!important;opacity:1;filter:none}.hero .stage-wrap.static .ln{opacity:1}.hero .stage-wrap.static .finding{opacity:1;transform:none}
/* GitHub's and OpenAI's marks are black or white only (their brand rules); on the
   dark theme's cards they turn white rather than vanish (#3335). */
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .slogo [fill="#000000"],:root:not([data-theme="light"]) .slogo [fill="#181717"],:root:not([data-theme="light"]) .fmarks [fill="#000000"],:root:not([data-theme="light"]) .fmarks [fill="#181717"]{fill:#fff}}
:root[data-theme="dark"] .slogo [fill="#000000"],:root[data-theme="dark"] .slogo [fill="#181717"],:root[data-theme="dark"] .fmarks [fill="#000000"],:root[data-theme="dark"] .fmarks [fill="#181717"]{fill:#fff}
.marks-note{margin-top:12px;font-size:13px}
.hero{padding-bottom:96px}.hero::after{height:240px;background:linear-gradient(transparent,var(--page));background:linear-gradient(to bottom,color-mix(in srgb,var(--page) 0%,transparent) 0%,color-mix(in srgb,var(--page) 4%,transparent) 12%,color-mix(in srgb,var(--page) 14%,transparent) 28%,color-mix(in srgb,var(--page) 33%,transparent) 44%,color-mix(in srgb,var(--page) 58%,transparent) 60%,color-mix(in srgb,var(--page) 80%,transparent) 76%,color-mix(in srgb,var(--page) 94%,transparent) 90%,color-mix(in srgb,var(--page) 100%,transparent) 100%)}
.page-hero{padding-bottom:0}.page-hero::after{height:96px}.page-hero .hero-body{min-height:0;display:block;padding-top:24px}.page-hero .copy{width:auto;max-width:880px;margin:0;text-align:left;padding:8px 0 64px}.page-hero h1{font:700 clamp(32px,4.4vw,52px)/1.08 var(--font-sans);letter-spacing:-.035em;color:#fff}.page-hero .sub{margin-top:16px;max-width:640px}.page-hero+.sec{padding-top:24px}

/* ================= 2026-11 home (#4134), matched to the Figma "/main" frame (#4182) =================
   Sizes, colours and positions are the frame's own at 1440px; the decorative
   pieces are its exported assets (/home-figma/). The lamp hero above
   (.stage-wrap, .lamp-hit, home-hero.js) is kept but no longer on the page. */
@font-face { font-family: "IBM Plex Mono"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/IBMPlexMono-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/IBMPlexMono-Bold.woff2") format("woff2"); }
:root{--fg-light-bg:linear-gradient(137.94deg,#eaf5ec 2.5%,#f5f6f6 66.2%);--fg-how-bg:linear-gradient(30.51deg,#eff4ec 12%,#f6f6f7 102%);--fg-head:#10231c;--fg-card:#fff;--fg-card-ink:#111827;--fg-card-text:#16593c;--fg-card-foot:#087f59;--fg-card-mk:#7ab79d;--fg-card-line:#254a3b;--fg-mono-lede:#576579;--fg-step-text:#607168}

/* Figma sets Inter without optical sizing: the browser would switch large
   text to Inter Display, which is narrower than the frame (and every font
   shorthand resets it, hence !important) */
body.home,body.home *{font-optical-sizing:none!important}

/* The home page keeps the Figma's fixed light/dark rhythm whatever the OS or
   site theme: its light sections stay light (the dark-theme tokens above are
   reset here, on the home page only). */
body.home{color-scheme:light;--page:#f6f6f7;--card:#fff;--surface-sunken:#f3f4f6;--ink:#111827;--ink-secondary:#374151;--ink-muted:#5b6371;--line:#e5e7eb;--line-strong:#d1d5db;--success-bg:#d1fae5;--success-border:#a7f3d0;--brand-strong:#047857;--mist-bg:var(--brand-mist);
  --fg-light-bg:linear-gradient(137.94deg,#eaf5ec 2.5%,#f5f6f6 66.2%);--fg-how-bg:linear-gradient(30.51deg,#eff4ec 12%,#f6f6f7 102%);--fg-head:#10231c;--fg-card:#fff;--fg-card-ink:#111827;--fg-card-text:#16593c;--fg-card-foot:#087f59;--fg-card-mk:#7ab79d;--fg-card-line:#254a3b;--fg-mono-lede:#576579;--fg-step-text:#607168}

/* ---- hero ---- */
.hx{background:linear-gradient(90deg,#030d0a,#0b1512);padding-bottom:0}
.hx::after{display:none}
.hx nav{gap:24px;font:400 13px var(--font-sans);color:#a7c9bb;padding-top:28px;padding-bottom:16px;padding-left:32px}
.hx nav .logo{gap:6px;font:700 20px var(--font-sans);letter-spacing:-.4px;color:#ecfdf5}
.hx nav .logo img{height:24px}
.hx nav .signin{color:#21d1a1;font-weight:400}
.hx-fx .pt{position:absolute;opacity:.15}
.pt1{left:calc(50% - 608px);top:142px}.pt2{left:calc(50% - 428px);top:112px}.pt3{left:calc(50% - 278px);top:172px}.pt4{left:calc(50% + 172px);top:192px}.pt5{left:calc(50% + 372px);top:142px}
.promo{position:relative;z-index:2;width:min(1038px,calc(100% - 32px));height:84px;margin:34px auto 0;left:10px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:10px 20px;border:1px solid #1d2d27;border-radius:12px;background:#0b1512;box-shadow:0 0 16px rgba(52,211,153,.12),0 4px 12px rgba(0,0,0,.25)}
.promo p{font:600 14px/1.2 var(--font-sans);color:#fff}
.promo-k{font:700 13px var(--font-sans);letter-spacing:1.2px;text-transform:uppercase;color:#34d399;margin-right:12px}
.promo .promo-sub{margin-top:12px;font:400 12px/1.2 var(--font-sans);color:#a7c9bb}
.promo-act{display:flex;flex-direction:column;align-items:center;gap:6px;flex:none;padding-top:15px}
.promo-act .cta,.hfinal .cta{margin-top:0;width:260px;height:44px;justify-content:center;gap:8px;padding:0;border-radius:10px;background:linear-gradient(90deg,#10b981,#2dd4bf);color:#052e22;font:700 13px var(--font-mono);box-shadow:0 0 16px rgba(16,185,129,.2),0 10px 40px rgba(52,211,153,.35)}
.promo-act .cta svg,.hfinal .cta svg{width:16px;height:16px}
.pcta .cta{margin-top:0;font:500 14px var(--font-mono);padding:12px 22px}
.promo-act span{font:400 11px/16px var(--font-sans);color:#9cbfad}
.hx-head{position:relative;z-index:2;text-align:center;padding:30px 24px 0;max-width:1040px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:18px}
.hx-head h1{font:700 58px/82px var(--font-sans);letter-spacing:-2.5px;color:#fff}
.hx-tag .br,.hx-tag .tw{color:#34d399;letter-spacing:-2px}
.hx-tag .lead{margin-right:14px}
.hx-sub{max-width:642px;font:400 16px/28px var(--font-sans);color:#a7c9bb}
/* the radar: 1000x608, its centre (500,464) is the frame's (720,864) */
.radial{position:relative;width:1000px;max-width:100%;height:608px;margin:28px auto 0}
.radar-fx{position:absolute;inset:0;pointer-events:none}
.rring{position:absolute;display:block}
.rring-o{left:120px;top:84px;width:760px;height:380px}.rring-m{left:200px;top:164px;width:600px;height:300px}.rring-i{left:280px;top:244px;width:440px;height:220px}
.ripple{position:absolute;left:50%;top:464px;display:block}
.ripple.r1{width:400px;height:400px;margin:-200px 0 0 -200px}.ripple.r2{width:500px;height:500px;margin:-250px 0 0 -250px}.ripple.r3{width:600px;height:600px;margin:-300px 0 0 -300px}
.streak{position:absolute;width:2px;background:linear-gradient(#00ff87,rgba(0,255,135,0))}
.streak.s1{left:460px;top:64px;height:200px;opacity:.2}.streak.s2{left:500px;top:114px;height:150px;opacity:.15}
.sweep{position:absolute;left:120px;top:84px;width:760px;height:760px;transform:rotate(-55deg)}
.sweep img{display:block;width:760px;height:760px}
.rnodes{list-style:none;padding:0;margin:0}
.rn{position:absolute;z-index:1;width:210px;height:116px;text-align:center;display:flex;flex-direction:column;align-items:center}
.rn-1{left:37.92px;top:310.03px}.rn-2{left:177.04px;top:128.72px}.rn-3{left:395px;top:60px}.rn-4{left:612.96px;top:128.72px}.rn-5{left:752.08px;top:310.03px}
.ri{position:relative;display:grid;place-items:center;width:48px;height:48px;border-radius:24px;border:1px solid #3a5145;background:#0d1914}
.ri svg{width:20px;height:20px;fill:none;stroke:#a4b8af;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ri .hl{position:absolute;inset:-1px;display:grid;place-items:center;border-radius:24px;border:1px solid #00ff87;background:#00ff87;filter:drop-shadow(0 0 12px rgba(0,255,135,.4));opacity:0}
.ri .hl svg{stroke:#041f14}
.rn-1 .hl{opacity:1;border-color:#34d399;background:linear-gradient(#34d399,#10b981)}
.rn b{margin-top:10px;font:700 12px/16.8px var(--font-sans);color:#c9d7cf}
.rn>span:last-child{margin-top:5px;font:400 11px/15.4px var(--font-sans);color:#a3b8ab}
/* a node's title turns green, and its description brighter, only while it
   is lit: a coloured copy (data-t, data-d) follows the node's highlight track
   (home-motion.css), so only opacity animates. The copy's alt text is empty
   ("/ ''"), so screen readers read each title and description once; a browser
   without that syntax drops the copy and shows the resting colours. */
.rn b,.rn>span:last-child{position:relative}
.rn b::after,.rn>span:last-child::after{position:absolute;inset:0;opacity:0;pointer-events:none}
.rn b::after{content:attr(data-t) / "";color:#34d399}
.rn>span:last-child::after{content:attr(data-d) / "";color:#ccf0db}
.rn-1 b::after,.rn-1>span:last-child::after{opacity:1}
.rcore{position:absolute;left:0;right:0;top:404px;display:flex;flex-direction:column;align-items:center;gap:10px;isolation:isolate}
.rcore .mark{position:relative;display:grid;place-items:center;width:120px;height:120px;filter:drop-shadow(0 0 16px rgba(0,255,135,.28))}
.rcore .aura{position:absolute;left:-50px;top:-50px;width:220px;height:220px;z-index:-1}
.rcore .m{width:105.4px;height:120px}
.rcore .cap{font:700 10px/14px var(--font-sans);text-transform:uppercase;color:#6dab88}

/* ---- sections ---- */
.hs{padding:104px 24px;position:relative}
.hs .wrap{max-width:1264px}.loop .wrap{max-width:1204px}
.hs.light{background:var(--fg-light-bg);color:var(--ink)}
.hs.dark{background:#0d1117;color:#e6f5ee}
.hs::before,.loop::before{content:"";position:absolute;left:0;right:0;top:0;height:64px;pointer-events:none}
#what::before{background:linear-gradient(#030d0a,rgba(3,13,10,0))}
#review::before{background:linear-gradient(#f5f6f6,rgba(245,246,246,0))}
#how::before{background:linear-gradient(#0d1117,rgba(13,17,23,0))}
.loop::before{background:linear-gradient(#eaf5ec,rgba(234,245,236,0))}
#pricing::before{background:linear-gradient(#0d1117,rgba(13,17,23,0))}
#trust::before{background:linear-gradient(#f6f6f7,rgba(246,246,247,0))}
.hs::after,.loop::after{content:"";position:absolute;left:0;right:0;top:0;height:92px;pointer-events:none;background:radial-gradient(50% 50% at 50% 50%,rgba(15,186,130,.08),rgba(15,186,130,0))}
.hs>*,.loop>*{position:relative}
.hs>.cubes,.final>.cubes,.texture>.tex{position:absolute}
.texture{background-color:#0d1117}
.texture>.tex{position:absolute;inset:0;background:url(/home-figma/section-texture.webp) center/cover;opacity:.2;pointer-events:none}
.hs h2{font:600 56px/1.08 var(--font-sans);letter-spacing:-2.5px;color:var(--fg-head);max-width:none}
.hs.dark h2{color:#f7f9f4}
.hs.dark .lede{font:400 18px/1.6 var(--font-sans);color:#8d9aa5}
.hs .lede code{font:inherit}
.mk{font:600 11.5px var(--font-mono);letter-spacing:.8px;text-transform:uppercase;color:#047857;margin-bottom:20px}
.hs.dark .mk,.loop .mk{color:#c9f8dd}
.mk.dim{color:var(--fg-card-mk);letter-spacing:1.3px;font-size:11px;line-height:16px;margin:0}
.hs.dark .more,.hs.dark .more:hover{color:#fff}
.hs .more{display:block;width:fit-content;max-width:100%;font:600 15px var(--font-sans)}
.hs-top{display:flex;gap:100px;align-items:flex-end;min-height:165px}
.hs-top>div{width:660px;flex:none}
.mono-lede{flex:1;margin:0 0 43px;font:400 18px/27px var(--font-mono);color:var(--fg-mono-lede)}
.duo{margin-top:42px;display:grid;grid-template-columns:1fr 1fr;gap:24px}
.dcard{position:relative;height:336px;background:var(--fg-card);border:1px solid #1f6b4e;border-radius:12px;padding:26px 31px 0}
.dhead{position:relative;height:100px;margin-top:22px}
.dcard h3{padding-top:6px;width:350px;font:600 36px/39px var(--font-sans);letter-spacing:-1.2px;color:var(--fg-card-ink)}
.dcard p{position:absolute;left:31px;right:31px;top:179px;margin:0;font:400 16px/26px var(--font-mono);color:var(--fg-card-text)}
.dfoot{position:absolute;left:31px;right:31px;top:278px;padding-top:14px;border-top:1px solid var(--fg-card-line);font:400 12px/18px var(--font-mono);color:var(--fg-card-foot)}
.dart{position:absolute;display:block}
.dart .ip,.dart .wp{position:absolute;display:block}
.dart .ip img,.dart .wp img{position:absolute;display:block;max-width:none}
.art-find{left:382px;top:-9px;width:174px;height:118px}
.art-wallet{right:0;top:2.8px;width:139.2px;height:94.4px}
.w-back{background:#eff9f3;border:.96px solid #f7fafb;border-radius:8px}
.w-note-box{display:grid!important;place-items:center}
.w-note{position:relative!important;width:34.4px;height:38.4px;transform:rotate(12deg)}
.w-body{background:#fbfcfa;border:.96px solid #10b981;border-radius:8px}
.w-clasp{background:#fff;border:.96px solid #10b981;border-radius:4.8px}

.two{display:grid;grid-template-columns:627px 608px;gap:29px;align-items:center;justify-content:space-between}
#review{padding-top:144px;padding-bottom:104px}
#review .two>div:first-child{display:flex;flex-direction:column;gap:24px}
#review .mk,#trust .mk{margin:0}
#review .lede,#trust .lede{margin:0;max-width:none}
.arrows{list-style:none;padding:0;margin:0;display:grid;gap:18px}
.arrows li{font:400 14px/1.5 var(--font-sans);color:#c9f8dd;padding-left:0}
.arrows li::before{content:"↳ ";position:static;color:inherit}
#review .more{margin:0}
.rsum{background:#161b22;border:1px solid #30363d;border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:23px}
.rbot{display:flex;gap:12px;align-items:center}.rbot img{width:32px}
.rbot b{display:block;font:600 14px var(--font-sans);color:#dce5e8;margin-bottom:4px}.rbot span{font:400 12px var(--font-sans);color:#8d9aa5}
.rtitle{margin:0;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.rtitle h3{font:600 24px var(--font-sans);color:#dce5e8}.rtitle span{font:400 14px var(--font-mono);color:#c9f8dd}
.rtext{margin:0;font:400 14px/1.6 var(--font-sans);color:#8d9aa5}
.rsum .rtext:nth-last-of-type(1){font-size:13px}
.rfind{margin:0;display:flex;gap:16px;padding:16px;border-radius:8px;background:#0d1117}
.sevp{font:400 12px var(--font-mono);color:#f2bb72}
.rfind b{display:block;font:400 14px var(--font-sans);color:#dce5e8}.rfind code{display:block;margin-top:8px;font:400 12px var(--font-mono);color:#8d9aa5}
.rreply{margin:0;padding:16px;border-radius:8px;background:#222a32;font:400 13px/1.6 var(--font-sans);color:#dce5e8}
.rnote{margin:0;font:400 10px var(--font-mono);text-transform:uppercase;color:#8d9aa5}

#how{background:var(--fg-how-bg);padding:88px 24px;min-height:667px;display:flex;flex-direction:column;justify-content:center}
#how>.wrap{width:100%}
#how .mk{margin-bottom:18px}
.steps3{list-style:none;padding:0;margin:46px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
.steps3 li{display:flex;flex-direction:column;gap:18px}
.sn{display:flex;align-items:center;gap:20px;font:400 20px var(--font-mono);color:#087f59}
.sn::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,#10b981,#2dd4bf)}
.steps3 b{display:block;margin:0;font:600 25px var(--font-sans);letter-spacing:-1px;color:var(--fg-head)}
.steps3 p{margin:0;min-height:82px;font:400 16px/1.6 var(--font-sans);color:var(--fg-step-text)}
.steps3 code{font:inherit}
.steps3 em{display:block;margin:0;font:400 11px/1.5 var(--font-mono);font-style:normal;color:#087f59}
#how .more{margin-top:24px}

.loop{padding:104px 24px 120px;background:radial-gradient(70% 60% at 30% 40%,#161b22 0%,#0d1117 50%,#0d1117 100%)}
.loop .mk{margin-bottom:9px}
.loop h2{font:700 44px/47.52px var(--font-sans);letter-spacing:-1.32px;color:#fff;max-width:none}
.loop .lede{margin-top:13px;font:400 18px/28.8px var(--font-sans);color:#a7c9bb}
.loop-grid{grid-template-columns:632px 527px;justify-content:space-between;margin-top:44px}
.tilebg{fill:#0d1914;stroke:rgba(52,211,153,.25);stroke-width:.81}
.node.on .tilebg{stroke:#34d399;stroke-width:1.62}
.nlabel{font:700 10.5px var(--font-sans);fill:#a7c9bb}
.node.on .nlabel{fill:#a7c9bb}
.loop [fill="#181717"],.loop [fill="#000000"]{fill:#fff}
.flows li{position:relative;padding:14px 16px;border-radius:12px;border:1px solid #2a2f36;background:rgba(255,255,255,.02);box-shadow:0 8px 20px rgba(0,0,0,.07)}
.flows li.on{background:#161b22;border-color:rgba(52,211,153,.45);box-shadow:0 8px 20px rgba(0,0,0,.08),0 0 24px rgba(52,211,153,.08)}
.fmarks{height:28px;gap:6px;padding:0 7px;border-radius:8px;background:#222a32}
.core{color:#052e22;background:linear-gradient(90deg,#ecfdf5,#d2febf);letter-spacing:.6px}
.flows p{font:400 14px/21px var(--font-sans);color:#a7c9bb}
.mode{font:500 12px var(--font-sans);color:#7fa596}
.mode code{font:500 11.5px var(--font-mono);color:#d1fae5;background:rgba(255,255,255,.06)}
.flows em{font:600 11px var(--font-sans);color:#6ee7b7;border:1px solid rgba(110,231,183,.3)}

.center{text-align:center}.center h2,.center .lede{margin-left:auto;margin-right:auto;max-width:none}
.center .mk{margin-bottom:10px}
.plans{margin-top:48px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:left;align-items:stretch}
.plan{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:30px;box-shadow:0 8px 20px rgba(0,0,0,.05)}
.plan-strong{background:linear-gradient(90deg,#030d0a,#0b1512);border:6px solid #10b981;color:#e6f5ee;padding:25px;box-shadow:0 8px 20px rgba(0,0,0,.1)}
.ptop{display:flex;justify-content:space-between;align-items:center;min-height:37px}
.hexes{display:flex;gap:4px;align-items:center}.hexes i{width:32px;height:36px;border:0;background:currentColor;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);opacity:.85;position:relative}
.hexes i::after{content:"";position:absolute;inset:1.5px;background:var(--card);clip-path:inherit}
.plan-strong .hexes i::after{background:#050f0c}
.pbadge{font:500 10px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:#0a2e22;background:#d9fbe9;border-radius:4px;padding:4px 8px}
.plan h3{margin-top:23px;font:600 24px var(--font-sans);color:var(--ink)}.plan-strong h3{color:#fff}
.pprice{margin-top:23px;font:600 64px/1.2 var(--font-sans);letter-spacing:-3px;color:var(--ink)}.plan-strong .pprice{color:#ecfdf5}
.punit{margin-top:9px;font:400 11px var(--font-mono);color:var(--ink-muted)}
.plan p{margin-top:23px;font:400 16px/1.6 var(--font-sans);color:var(--ink-muted)}
.plan-strong p,.plan-strong .punit{color:#8d9aa5}
.plan .pnote{margin-top:auto;padding-top:23px;border-top:1px solid var(--line);font-size:14px;color:var(--ink-secondary)}
.plan p+.pnote{margin-top:23px}.plan-strong .pnote{color:#dce5e8;border-color:#354b40}
.pbtn{margin-top:23px;height:46px;display:flex;align-items:center;justify-content:center;gap:8px;text-align:center;padding:0 12px;border:1px solid var(--line-strong);border-radius:8px;font:700 13px var(--font-mono);color:var(--ink);background:var(--card)}
.pbtn:hover{border-color:var(--brand)}
.pbtn svg{flex:none;color:var(--ink-secondary)}.plan-strong .pbtn svg{color:#10b981}
.plan-strong .pbtn{background:#21262d;border-color:#4b5563;color:#fff}
.arith{margin-top:36px;display:flex;justify-content:space-between;align-items:center;gap:24px;text-align:left;padding:26px 28px;border-radius:12px;background:linear-gradient(90deg,#ecfdf5,#d9fbcf)}
/* Fixed light strip in both themes: its text colours are fixed to match (#4138). */
.arith b{font:600 22px var(--font-sans);color:#0b1f17}.arith span{font:500 14px var(--font-sans);color:#047857}
.arith .mk.dim{color:#047857;margin-bottom:6px}
.pcta{margin-top:36px;display:flex;justify-content:center;align-items:center;gap:20px;flex-wrap:wrap}
.pcta>span{font:400 14px var(--font-sans);color:var(--ink-muted)}
.cta.dark-cta{background:#0d1114;color:#fff}.cta.dark-cta:hover{background:#1c2328}
#pricing{background:var(--page)}
#pricing h2{font-weight:600}
#pricing .more{margin:24px auto 0}

#trust{padding:100px 24px;border-bottom:1px solid #30363d}
#trust .two{grid-template-columns:754px 1fr;gap:80px}
#trust .two>div:first-child{display:flex;flex-direction:column;gap:22px}
#trust .more{margin:0}
.tcard{background:#161b22;border:1px solid #30363d;border-radius:16px;padding:28px;display:grid;gap:26px}
.trow{display:flex;gap:20px}.trow svg{width:24px;height:24px;flex:none;margin-top:3px;fill:none;stroke:#34d399;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.trow h3{font:600 23px var(--font-sans);letter-spacing:-.3px;color:#dce5e8}.trow p{margin-top:10px;font:400 16px/1.6 var(--font-sans);color:#8d9aa5}

/* Pricing: what is free (#4177). A dark band in both themes, like the home page's.
   The gradient needs .hs.dark.free-hero: .hs.dark's flat background would win over .free-hero. */
.free-hero{margin:72px -24px;padding:96px 24px;border-top:1px solid #1f262c;border-bottom:1px solid #1f262c}
.hs.dark.free-hero{background:radial-gradient(60% 70% at 50% 0%,#0c3a2a 0%,#0d1114 70%)}
.free-duo{margin-top:48px;display:grid;grid-template-columns:1fr 1fr;gap:24px}
.fcard{display:flex;flex-direction:column;background:#161b20;border:1px solid #1f6b52;border-radius:16px;padding:30px 32px}
.fcard h3{font:700 26px/1.15 var(--font-sans);letter-spacing:-.025em;color:#fff}
.fcard p{margin-top:14px;font:400 15px/1.65 var(--font-sans);color:#9aa7a1}
#pricing .fcard .more{margin:auto 0 0;padding-top:22px;font:500 13px var(--font-mono);color:#6ee7b7}
.free-also{list-style:none;padding:0;margin:28px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:12px 24px}
.free-also li{padding-left:26px;position:relative;font:400 14px/1.6 var(--font-sans);color:#9aa7a1}
.free-also li::before{content:"↳";position:absolute;left:0;color:#6ee7b7}
.free-also b{color:#e6f5ee;font-weight:600}#pricing .free-also a{color:#6ee7b7;text-decoration:underline;text-underline-offset:2px}
@media (max-width:899px){.free-hero{margin:56px -20px;padding:72px 20px}.free-duo,.free-also{grid-template-columns:1fr}.fcard{padding:24px}.fcard h3{font-size:22px}}

.hfinal{height:520px;padding:0;border-top:0;background:#0d1117}
.hfinal .final-glow{position:absolute;left:50%;top:-40%;bottom:5.33%;width:900px;transform:translateX(-50%);opacity:.16;filter:blur(8px);pointer-events:none;
  background:conic-gradient(from 180deg at 50% 0%,rgba(16,185,129,0) 160deg,rgba(16,185,129,.18) 175deg,rgba(16,185,129,.28) 180deg,rgba(16,185,129,.18) 185deg,rgba(16,185,129,0) 200deg)}
.hfinal .final-mark{position:absolute;left:50%;top:120px;height:50.4px;margin:0;transform:translateX(-50%);filter:none}
.hfinal .final-copy{position:absolute;left:0;right:0;top:196px}
.hfinal h2{font:700 56px/58.8px var(--font-sans);letter-spacing:-2.24px;color:#fff}
.hfinal p{margin-top:21px;font:500 16px/24px var(--font-mono);color:#a8b3c2}
.hfinal .cta{margin:24px auto 0}
.hfinal .free{margin-top:22px;font:500 12px/18px var(--font-mono);color:#a8b3c2}

.cubes{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.cube{position:absolute;display:grid;place-items:center}
.cube i{display:block;border-radius:2px}

footer{background:linear-gradient(90deg,#030d0a,#0b1512);padding:36px 24px 30px;font:500 13px/20.8px var(--font-sans);color:#7fa596}

@media (max-width:1300px){
  .hs-top{gap:48px}.hs-top>div{width:auto;flex:1.3}
  .two,#trust .two{grid-template-columns:1fr 1fr;gap:48px}
  .loop-grid{grid-template-columns:1.2fr 1fr}
  .art-find{left:auto;right:0}
}
@media (max-width:1040px){.radial{transform:scale(.9);transform-origin:50% 0;margin-bottom:-60px}}
@media (max-width:899px){
  .promo{flex-direction:column;align-items:flex-start;height:auto;left:0;margin:8px 16px 0;width:auto}.promo-act{align-items:flex-start;padding-top:0}
  .hx-head h1{font-size:clamp(34px,9vw,58px);line-height:1.2;letter-spacing:-1.5px}
  .radial{height:auto;width:auto;padding:24px 16px 0;transform:none;margin:24px 0 0}
  .radar-fx{display:none}
  .rnodes{display:grid;grid-template-columns:1fr 1fr;gap:28px 16px}
  .rn{position:static;width:auto;height:auto}
  .rcore{position:static;margin:40px 0 32px}
  .hs{padding:72px 20px}
  .hs h2{font-size:clamp(34px,8vw,56px);letter-spacing:-1.5px}
  .hs-top,.duo,.two,#trust .two,.steps3,.plans{display:grid;grid-template-columns:1fr}
  .hs-top{gap:0}.hs-top>div{width:auto}.mono-lede{margin:24px 0 0}
  .dcard{height:auto;padding:24px}.dhead{height:auto;display:flex;justify-content:space-between;gap:12px;margin-top:16px}.dcard h3{width:auto;font-size:28px;line-height:1.15}
  .dart{position:relative;left:auto!important;right:auto!important;top:auto!important;flex:none;transform:scale(.7);transform-origin:100% 0}
  .dcard p,.dfoot{position:static;margin-top:20px}
  .loop-grid{grid-template-columns:1fr}
  .arith{flex-direction:column;align-items:flex-start}
  .hfinal{height:auto;padding:72px 20px}.hfinal .final-mark,.hfinal .final-copy{position:relative;top:auto;left:auto;transform:none}.hfinal .final-mark{display:block;margin:0 auto 24px}
  .hfinal h2{font-size:clamp(34px,8vw,56px);line-height:1.1}
}
@media (max-width:520px){.rnodes{grid-template-columns:1fr}.art-find,.art-wallet{display:none}}