@font-face{font-family:Inter;src:url(InterStatic-400.ttf);font-weight:400}
@font-face{font-family:Inter;src:url(InterStatic-600.ttf);font-weight:600}
@font-face{font-family:Inter;src:url(InterStatic-700.ttf);font-weight:700}
@font-face{font-family:Inter;src:url(InterStatic-800.ttf);font-weight:800}
:root{--navy:#0B2A3C;--navy2:#0B3A4F;--coral:#F2574F;--coral-ink:#A8322C;--ink:#0B2A3C;--muted:#4E6575;--line:#DCE3E9;--bg:#FFFFFF;--warm:#FBF7F3;--blush:#FDEFEC;--mint:#E5F4EC;--green:#1F7A50;--green2:#2E9E6B;--amber:#8A5A12;--amber-bg:#FFF1D6;--slate:#43586A;--slate-bg:#E9EEF2;--cyan:#1D6F91;--cyan-bg:#E6F3F9;--lav:#F1EEFA;--mono:"DejaVu Sans Mono",ui-monospace,Menlo,Consolas,monospace}
*{box-sizing:border-box}html,body{margin:0}
body{font-family:Inter,system-ui,sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;font-size:17px;line-height:1.55}
a{color:inherit;text-decoration:none}
.wrap{width:1240px;margin:0 auto}
.review{background:#2B2F36;color:#F3F4F6;font:600 13px/1 Inter;padding:9px 0;text-align:center;letter-spacing:.02em}
.review b{color:#FFD7D3}.review .sw{margin-left:14px;display:inline-flex;gap:6px}.review .sw a{padding:3px 9px;border:1px solid #6B7280;border-radius:99px;font-weight:600}.review .sw a.on{background:#F3F4F6;color:#2B2F36}
/* nav */
.nav{border-bottom:1px solid var(--line);background:#fff;position:relative;z-index:5}
.nav .wrap{display:flex;align-items:center;height:76px;gap:28px}
.nav .logo img{height:30px;display:block}
.nav ul{display:flex;gap:26px;list-style:none;margin:0 0 0 18px;padding:0;font-weight:600;font-size:15px;color:#2A4252}
.nav ul li.on{color:var(--navy);box-shadow:inset 0 -3px 0 var(--coral);padding-bottom:4px}
.nav .sp{flex:1}
.btn{display:inline-flex;align-items:center;gap:10px;font:700 15px/1 Inter;padding:15px 22px;border-radius:12px;border:1.5px solid var(--navy);white-space:nowrap;cursor:pointer}
.btn.pri{background:var(--navy);color:#fff;box-shadow:inset 0 -4px 0 var(--coral)}
.btn.sec{background:#fff;color:var(--navy)}
.btn.sm{padding:11px 16px;font-size:14px;border-radius:10px}
.btn.lg{padding:18px 26px;font-size:16px}
/* chips */
.chip{display:inline-flex;align-items:center;gap:6px;font:700 12px/1 Inter;letter-spacing:.04em;text-transform:uppercase;padding:6px 10px;border-radius:99px;white-space:nowrap}
.chip.ea{background:var(--cyan-bg);color:var(--cyan)}
.chip.soon{background:var(--lav);color:#4B3D8F}
.chip.plan{background:var(--slate-bg);color:var(--slate)}
.chip.ill{background:#fff;color:var(--muted);border:1px dashed #8DA0AE}
.chip.proto{background:var(--blush);color:var(--coral-ink)}
.chip.arch{background:#EEF3E6;color:#3F5A1E}
.eyebrow{font:700 13px/1 Inter;letter-spacing:.12em;text-transform:uppercase;color:var(--coral-ink)}
h1,h2,h3{margin:0;letter-spacing:-.02em;color:var(--navy)}
h1{font-size:54px;line-height:1.06;font-weight:800}
h2{font-size:40px;line-height:1.12;font-weight:800}
h3{font-size:21px;line-height:1.3;font-weight:700}
p{margin:0}.lead{font-size:20px;color:#2F4757;line-height:1.55}
.muted{color:var(--muted)}
section{padding:96px 0}
section.warm{background:var(--warm)}
section.tint{background:linear-gradient(180deg,#F4F8FB,#fff)}
.sh{display:flex;flex-direction:column;gap:14px;max-width:780px;margin-bottom:44px}
.grid{display:grid;gap:22px}.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px}
.card h3{margin:10px 0 8px}.card p{color:#3A5262;font-size:16px}
.card .top{display:flex;justify-content:space-between;align-items:center}
.ico{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:var(--blush)}
.ico svg{width:24px;height:24px;stroke:var(--navy);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ico.m{background:var(--mint)}.ico.c{background:var(--cyan-bg)}.ico.l{background:var(--lav)}.ico.a{background:var(--amber-bg)}
/* outcomes */
.oc{white-space:nowrap;display:inline-flex;align-items:center;gap:7px;font:700 14px/1 Inter;padding:8px 12px;border-radius:99px}
.oc.clr{background:var(--mint);color:var(--green)}.oc.esc{background:var(--amber-bg);color:var(--amber)}.oc.den{background:var(--slate-bg);color:var(--slate)}
.oc i{font-style:normal;font-weight:800}
/* browser frame */
.frame{border-radius:16px;border:1px solid #CBD6DE;background:#fff;box-shadow:0 18px 50px -24px rgba(11,42,60,.28);overflow:hidden}
.frame .bar{height:34px;background:#F2F5F8;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:7px;padding:0 14px}
.frame .bar i{width:10px;height:10px;border-radius:50%;background:#C9D3DB}
.frame .bar span{margin-left:12px;font:600 12px Inter;color:var(--muted)}
.frame img{display:block;width:100%}
.cap{font-size:13px;color:var(--muted);margin-top:10px;display:flex;gap:8px;align-items:center}
/* code */
.code{background:#F6F8FA;border:1px solid var(--line);border-radius:12px;font:13.5px/1.7 var(--mono);color:#1E3442;padding:14px 16px;white-space:pre;overflow:hidden}
.code .k{color:#8B2F8A;font-weight:700}.code .s{color:#0F6B4A}.code .a{color:#A8322C}.code .c{color:#6B8292}
/* footer */
footer{background:var(--navy);color:#D7E2EA;padding:64px 0 40px;font-size:15px}
footer .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
footer h4{color:#fff;margin:0 0 14px;font-size:14px;letter-spacing:.08em;text-transform:uppercase}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
footer .legal{grid-column:1/-1;border-top:1px solid #23495E;padding-top:22px;margin-top:10px;font-size:13px;color:#A9BCC9;display:flex;justify-content:space-between;gap:30px}
footer .flogo{background:#fff;border-radius:12px;padding:12px 16px;display:inline-block}
footer .flogo img{height:26px;display:block}
/* forms */
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.field label{font:700 14px Inter;color:var(--navy)}
.field label em{font-style:normal;font-weight:600;color:var(--muted)}
.field label .req{color:var(--coral-ink)}
.input{height:50px;border:1.5px solid #7A909F;border-radius:10px;padding:0 14px;font:400 16px Inter;color:var(--ink);display:flex;align-items:center;background:#fff;justify-content:space-between}
.input.ph{color:#6B8292}.input.err{border-color:#A8322C;box-shadow:0 0 0 3px #FDE6E4}
.input.area{height:110px;align-items:flex-start;padding-top:13px}
.hint{font-size:13px;color:var(--muted)}.errt{font-size:13px;color:#A8322C;font-weight:600}
.check{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:#2F4757;margin:6px 0 18px}
.check .box{flex:none;width:22px;height:22px;border:2px solid #6B8292;border-radius:5px;background:#fff;margin-top:1px}
.pills{display:flex;flex-wrap:wrap;gap:8px}.pill{border:1.5px solid #9DB0BD;border-radius:99px;padding:8px 14px;font:600 14px Inter;color:#2A4252;background:#fff}
.pill.on{border-color:var(--navy);background:var(--navy);color:#fff}
.formcard{background:#fff;border:1px solid var(--line);border-radius:20px;padding:34px;box-shadow:0 18px 50px -30px rgba(11,42,60,.35)}
.note{font-size:13px;color:var(--muted);line-height:1.5}
/* misc */
.ctaband{background:linear-gradient(120deg,#FDEFEC 0%,#FBF7F3 45%,#E6F3F9 100%);border-radius:28px;padding:56px 60px;display:flex;align-items:center;gap:40px}
.ctaband h2{font-size:36px}
.steps{counter-reset:s;display:grid;gap:18px}
.step{display:flex;gap:18px;align-items:flex-start}
.step .n{flex:none;width:40px;height:40px;border-radius:50%;background:var(--navy);color:#fff;font:800 16px/40px Inter;text-align:center;box-shadow:inset 0 -3px 0 var(--coral)}
.step h3{font-size:18px;margin-bottom:4px}.step p{font-size:15.5px;color:#3A5262}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:14px}
.tick{color:var(--green);font-weight:800}
ul.clean{list-style:none;padding:0;margin:0;display:grid;gap:10px}
ul.clean li{display:flex;gap:10px;font-size:16px;color:#2F4757}
ul.clean li:before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--coral);margin-top:9px}
/* hero */
.hero{padding:64px 0 40px;background:radial-gradient(900px 420px at 88% 0%,#FDEFEC 0%,rgba(253,239,236,0) 70%),radial-gradient(700px 380px at 0% 100%,#E6F3F9 0%,rgba(230,243,249,0) 70%),#fff}
.hero .htop{display:grid;grid-template-columns:1fr 330px;gap:40px;align-items:center}
.hero h1 .hl{color:var(--navy2);background:linear-gradient(transparent 68%,#FBD3CF 68%,#FBD3CF 92%,transparent 92%)}
.hero .lead{margin-top:22px;max-width:760px}
.hero .ctas{display:flex;gap:14px;margin-top:30px;align-items:center}
.hero .ctas .small{font-size:14px;color:var(--muted);margin-left:8px}
.hero .meta{display:flex;gap:10px;margin-bottom:22px;align-items:center}
.hero .side{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:0 18px 50px -30px rgba(11,42,60,.35)}
.hero .side h4{margin:0 0 12px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.hero .side .row{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid #EEF2F5;font-size:15px}
.hero .side .row:first-of-type{border-top:0}
#flow{margin-top:44px;background:#fff;border:1px solid #CFDAE2;border-radius:24px;padding:20px 22px 24px;box-shadow:0 30px 70px -40px rgba(11,42,60,.4)}
.flowbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.fl-l,.fl-r{display:flex;align-items:center;gap:14px}
.tabs{display:flex;gap:6px;background:#F2F5F8;border-radius:12px;padding:4px}
.tabs button{border:0;background:transparent;font:600 14px Inter;color:#3A5262;padding:9px 14px;border-radius:9px;cursor:pointer}
.tabs button[aria-selected=true]{background:#fff;color:var(--navy);box-shadow:0 1px 3px rgba(11,42,60,.18)}
.pause{border:1.5px solid var(--navy);background:#fff;color:var(--navy);font:700 14px Inter;padding:10px 16px;border-radius:10px;min-width:118px;cursor:pointer}
.rmnote{font-size:13px;color:var(--muted)}
.stage{display:grid;grid-template-columns:220px 28px minmax(0,1fr) 28px 200px 28px 250px;align-items:stretch}
.col{border:1.5px solid #DCE3E9;border-radius:16px;padding:14px;background:#FAFBFC;opacity:.55;transition:opacity .4s,border-color .4s,background .4s,box-shadow .4s}
.col.on{opacity:1;background:#fff}
.col.now{border-color:var(--navy2);box-shadow:0 0 0 4px #E3ECF2}
.c2.now{border-color:var(--coral);box-shadow:0 0 0 4px #FDE3E0}
.lbl{font:700 12px/1 Inter;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;display:flex;gap:8px;align-items:center}
.lbl b{width:20px;height:20px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-size:11px;letter-spacing:0}
.c2 .lbl{color:var(--coral-ink)}.c2 .lbl b{background:var(--coral);color:#071C28}
.arw{position:relative}.arw:before{content:"";position:absolute;left:4px;right:4px;top:50%;border-top:2px dashed #B9C7D1}
.arw:after{content:"";position:absolute;right:2px;top:calc(50% - 5px);border:5px solid transparent;border-left:7px solid #B9C7D1}
.arw.on:before{border-top:2px solid var(--navy2)}.arw.on:after{border-left-color:var(--navy2)}
.arw .dot{position:absolute;top:calc(50% - 5px);left:2px;width:10px;height:10px;border-radius:50%;background:var(--coral);opacity:0;transition:left .7s ease,opacity .2s}
.arw.on .dot{left:calc(100% - 14px);opacity:1}
.who{display:flex;gap:10px;align-items:center}.av{width:40px;height:40px;border-radius:12px;background:var(--cyan-bg);color:var(--cyan);font:800 15px/40px Inter;text-align:center}
.nm{font-weight:700;font-size:15px}.sub{font-size:12.5px;color:var(--muted)}
.org{font-size:12px;color:var(--muted);margin:10px 0 10px;padding:5px 8px;background:#F2F5F8;border-radius:7px;display:inline-block}
.tcall{font:12px/1.65 var(--mono);background:#F6F8FA;border:1px solid var(--line);border-radius:10px;padding:10px;word-break:break-all}
.tcall .rh{font:700 11px Inter;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.tcall .kk{color:#8B2F8A}.tcall .vv{color:#0F6B4A}
.rt{display:flex;gap:10px;align-items:baseline}.rid{font:700 13px var(--mono);background:var(--navy);color:#fff;padding:4px 8px;border-radius:6px}.rn{font-weight:700;font-size:16px}
.pk{font-size:12.5px;color:var(--muted);margin:6px 0 10px;display:flex;align-items:center;gap:6px}
.b2 .code{font-size:11.6px;line-height:1.75;padding:10px 0}
.b2 .ln{padding:0 12px;border-left:3px solid transparent;transition:background .3s}
.b2 .ln.hit{background:#FFF3EC;border-left-color:var(--coral)}
.chk{margin-top:10px;display:grid;gap:6px}
.ck{display:flex;align-items:center;gap:9px;font-size:13.5px;padding:7px 10px;border-radius:9px;background:#F6F8FA}
.ck .m{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:12px;background:#DCE3E9;color:#4E6575;flex:none}
.ck.y{background:#EEF8F2}.ck.y .m{background:var(--green2);color:#fff}
.ck.n{background:#F1F3F5}.ck.n .m{background:#43586A;color:#fff}
.ck .r{margin-left:auto;font:600 12px var(--mono);color:var(--muted)}
.ck.w{color:#7A909F}
.ft{font-size:11.5px;color:var(--muted);margin-top:10px}
.b3{display:flex;flex-direction:column;align-items:center;text-align:center}
.b3 .node{width:190px;margin:2px 0 8px}
.oc.big{font-size:20px;padding:12px 18px}
.why{font-size:13.5px;color:#2F4757;margin-top:12px;line-height:1.45}
.wait{display:flex;flex-direction:column;align-items:center;gap:6px;padding:60px 0;color:#7A909F;font-size:13px;text-align:center}
.wait span{display:inline-block;width:8px;height:8px;border-radius:50%;background:#C9D3DB;margin:0 3px}
.wait p{margin-top:8px}
.log{display:grid;gap:7px}
.lr{font:11.5px/1.5 var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:7px 9px;border-radius:9px;background:#F6F8FA;color:#4E6575}
.lr.old span{color:#7A909F}
.lr.new{background:#fff;border:1.5px solid var(--navy2);color:var(--ink);animation:slidein .5s ease}
.kv2{display:grid;grid-template-columns:62px minmax(0,1fr);gap:3px 6px;font:12px/1.5 Inter}.kv2 span{color:var(--muted)}.kv2 b{font-weight:700}.kv2 .mono{font:600 11.5px var(--mono)}
.d-clr{color:var(--green)}.d-esc{color:var(--amber)}.d-den{color:var(--slate)}
@keyframes slidein{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}
.flownote{display:flex;gap:22px;margin-top:14px;font-size:13px;color:var(--muted)}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}
.kv2 b{overflow:hidden;text-overflow:ellipsis}.col{min-width:0}
.b3 .node{width:170px}
.wrap>*,.grid>*{min-width:0}.card .top{gap:10px}
.tabs button{white-space:nowrap}

/* v2 additions */
.dsub{font-size:14px;color:var(--muted);margin-top:14px}.dsub b{color:var(--navy)}
.tcard{padding:22px}.tcard .photo{aspect-ratio:4/3;border:2px dashed #9AAAB6;border-radius:14px;background:#F6F8FA;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;margin-bottom:18px}
.tcard .photo svg{width:56px;height:56px;stroke:#8DA0AE;fill:none;stroke-width:1.4}
.tcard .photo span{font:700 13px Inter;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tcard h3{margin:0}.tcard .ttl{color:var(--muted);font-size:15px;margin-top:2px}
.tcard .bio{margin-top:12px;font-size:15.5px}.tcard .bio.ph,.tbd{color:#6B8292;font-style:italic}
.tbd{background:var(--slate-bg);padding:1px 6px;border-radius:6px;font-style:normal;font-weight:600}
/* copy v3 */
.hero h1 .l2{display:block;font-size:60%;font-weight:500;color:var(--coral);margin-top:12px;letter-spacing:-.01em;background:none}
.hero .nodehero{display:flex;flex-direction:column;align-items:center;gap:14px}
.hero .nodehero img{width:250px}
.hero .nodehero .ocs{display:flex;gap:8px}
.ask{text-align:center;max-width:760px;margin:0 auto}
.ask .row{display:flex;gap:12px;justify-content:center;margin-top:28px}
.ask .input{width:340px;text-align:left}
.tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.tags span{background:#fff;border:1px solid var(--line);border-radius:99px;padding:9px 16px;font-weight:600;color:var(--navy);font-size:15px}