/* Shared visual shell. System fonts only; all motion belongs to the hero flow. */
:root,:root[data-theme="dark"],:root:not([data-theme="light"]){color-scheme:light;--bg:#fafaf9;--paper:#fff;--ink:#171c23;--muted:#535d69;--line:#d9dfe3;--pulse:#2454bd;--pulse-soft:#edf2fc;--warn:#a33b20;--code:#151b25;--code-ink:#e2e8f0;--ok:#146746;--bad:#aa3023;font-synthesis:none}
*{box-sizing:border-box;scrollbar-width:thin;scrollbar-color:#798596 #edf0f3}
::selection{background:#c9d9ff;color:#142d65}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:#edf0f3}::-webkit-scrollbar-thumb{background:#798596;border:2px solid #edf0f3;border-radius:6px}
body{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:16px;line-height:1.65;letter-spacing:-.012em;caret-color:var(--pulse);font-variant-numeric:tabular-nums}
a{color:var(--pulse);text-underline-offset:3px}a:hover{text-decoration:underline}
:focus-visible{outline:3px solid #2454bd!important;outline-offset:4px!important}
button,input,select,textarea{font:inherit;caret-color:var(--pulse);max-width:100%}button{cursor:pointer}
input,select,textarea{background:var(--paper);color:var(--ink);border:1px solid #798596;border-radius:6px;padding:10px}
button:disabled{cursor:wait}
.skip{position:absolute;left:-9999px;z-index:10}.skip:focus{left:16px;top:8px;padding:8px 16px;background:var(--paper);color:var(--ink)}
.wrap{max-width:1200px;padding:0 32px;margin:auto}
body:not(.home)>main,body:not(.home)>nav,body:not(.home)>footer{max-width:1000px;padding-left:32px;padding-right:32px}
body:not(.home)>main{padding-top:36px}
nav{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;min-height:84px;padding-top:16px;padding-bottom:16px;border-bottom:1px solid var(--line)}
nav b{font-size:21px;letter-spacing:-1px;color:var(--ink)}nav b span{color:var(--pulse)}
nav a{color:var(--muted);text-decoration:none;margin:0;padding:8px 0;font-size:14px;font-weight:550}
nav>div{display:flex;flex-wrap:wrap;align-items:center;gap:24px}.shared-links{margin-left:auto}
h1{font-size:clamp(34px,4.5vw,56px);line-height:1.08;letter-spacing:-.055em;font-weight:650}
h2{font-size:clamp(27px,3vw,36px);line-height:1.2;letter-spacing:-.04em;font-weight:630}h3{letter-spacing:-.025em}
p,li,dd{overflow-wrap:anywhere}.lede,.sub{color:var(--muted)}
pre,code{font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;letter-spacing:0;font-variant-numeric:tabular-nums}
pre{background:var(--code);color:var(--code-ink);border:1px solid #303b4a;border-radius:7px;padding:20px;font-size:12px;line-height:1.65;max-width:100%;overflow:auto;tab-size:2}
main,main>*,.hero>*,.step,.context>*,.trust>*{min-width:0}main{overflow-wrap:anywhere}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:18px;background:#2454bd;color:#fff!important;border:1px solid #2454bd;border-radius:6px;padding:11px 18px;font:600 14px/1.5 system-ui;text-decoration:none!important;box-shadow:0 1px 2px #142d651a}
.btn:hover{background:#1d449d}.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.notice{border-radius:5px;background:var(--pulse-soft)}
section{padding:64px 0;border-top:1px solid var(--line)}section h2{margin:0 0 18px}.sub{max-width:54em;margin:0 0 28px}
.hero{display:grid;grid-template-columns: .94fr 1.06fr;gap:44px;align-items:center;padding:64px 0 38px}
.hero h1{font-size:clamp(34px,3.45vw,49px);margin:0 0 22px;letter-spacing:-.05em}
.hero .lede{font-size:17px;line-height:1.65;margin-bottom:22px}
.hero-price{font-size:15px;line-height:1.7;margin:0 0 24px}.hero-price strong{font-weight:650}.actions{display:flex;align-items:center;flex-wrap:wrap;gap:24px}.secondary{color:var(--ink);font-size:14px;font-weight:600}
.constraint{font-size:12px;line-height:1.7;color:var(--muted);max-width:38em;margin:20px 0 0}
.code-window{background:var(--code);border:1px solid #364152;border-radius:9px;overflow:hidden;box-shadow:0 10px 32px #17253d12;color:var(--code-ink)}
.code-title{display:flex;justify-content:space-between;gap:12px;padding:10px 18px;border-bottom:1px solid #364152;background:#1c2430;font:11px/1.5 ui-monospace,monospace;color:#c3cede}.code-title a{color:#b6ccff}
.code-window pre{border:0;border-radius:0;margin:0;padding:16px 18px;font-size:11px;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere}
.code-note{font-size:11px;line-height:1.6;color:#b6c3d4;padding:0 18px;margin:0 0 14px}.code-note a{color:#b6ccff}
.code-result{border-top:1px solid #364152;background:#19212c}.code-result pre{color:#b9decf;padding-top:10px;padding-bottom:12px}
.flow{margin:0 0 28px;padding:12px 12px 16px;border:1px solid var(--line);border-radius:8px;background:var(--paper)}.flow svg{width:100%;display:block;height:auto;overflow:visible}.flow-lines{stroke:#7c8a9b;stroke-width:1.5;fill:none}.flow-nodes{fill:#fff;stroke:#a8b3c2;stroke-width:1.5}.flow-labels{fill:var(--ink);font:600 16px system-ui;text-anchor:middle}.flow-caption{fill:var(--muted);font:13px ui-monospace,monospace;text-anchor:middle}.flow figcaption{text-align:center;color:var(--muted);font-size:12px}.packet{fill:#2454bd;opacity:0}.packet-initial{animation:packet-load 2.4s ease-in-out .3s both}.flow:hover .packet-hover,.flow:focus-visible .packet-hover{animation:packet-load 2.4s ease-in-out both}
@keyframes packet-load{0%{transform:translateX(154px);opacity:0}8%{opacity:1}92%{opacity:1}100%{transform:translateX(846px);opacity:0}}

.steps{display:block;list-style:none;margin:32px 0 0;padding:0;counter-reset:steps}.step{display:grid;grid-template-columns:32px 1fr 1.2fr;column-gap:24px;border:0;border-top:1px solid var(--line);border-radius:0;padding:26px 0;background:none;counter-increment:steps}.step::before{content:"0" counter(steps);grid-column:1;grid-row:1/3;color:var(--pulse);font:13px/1.6 ui-monospace,monospace;padding-top:3px}.step h3{grid-column:2;margin:0 0 8px;font-size:19px}.step h3::before{content:none}.step p{grid-column:2;margin:0;color:var(--muted);font-size:14px}.step pre{grid-column:3;grid-row:1/3;margin:0}
.context,.trust{display:grid;grid-template-columns:1fr 1.2fr;gap:64px}.context p:first-child{margin-top:0}.trust dl{margin:0}.trust dl>div{padding:18px 0;border-bottom:1px solid var(--line)}.trust dl>div:first-child{padding-top:0}.trust dt{font-size:15px;font-weight:650}.trust dd{margin:5px 0 0;color:var(--muted);font-size:14px}
table{min-width:0;width:100%;font-size:14px;font-variant-numeric:tabular-nums}th,td{padding:16px 12px;border-bottom:1px solid var(--line);text-align:left}th{color:var(--muted)}thead th{background:#f0f2f5;font-size:12px}tbody th{font-weight:650;color:var(--ink)}caption{text-align:left;color:var(--muted);font-size:13px;padding:0 0 16px}.pricing-table{border:1px solid var(--line);border-radius:7px;padding:20px;background:var(--paper)}.pricing-table td:nth-child(2){font-weight:650}
.scroll{max-width:100%;overflow:auto}.faq dt{margin-top:24px;font-weight:650}.faq dd{margin:6px 0 0;color:var(--muted);font-size:15px}
#start{max-width:760px;background:var(--paper);padding:28px;border:1px solid var(--line);border-radius:8px}#start input{border:1px solid #798596;border-radius:5px;margin:6px 10px 16px 0}#start label{font-size:14px;font-weight:600}#start p{font-size:13px}#keys{display:none;margin-top:18px}#check-h{margin-top:56px}#check{max-width:760px}#check input,#check select,#check textarea{border-color:#798596;border-radius:5px}#check label{font-size:14px}#check .btn{justify-self:start}
footer{font-size:12px;line-height:2.2;color:var(--muted);padding-top:32px;padding-bottom:36px;border-top:1px solid var(--line)}footer a{color:var(--muted)}
@media(max-width:900px){.hero{grid-template-columns:1fr;gap:28px;padding-top:40px}.hero-copy{max-width:700px}.hero h1{font-size:clamp(34px,5.8vw,49px)}.hero .lede{max-width:42em}.code-window{max-width:100%}.context,.trust{gap:32px}.step{grid-template-columns:26px 1fr 1fr;gap:12px}.shared-links{margin-left:0}}
@media(max-width:620px){.wrap{padding:0 20px}body:not(.home)>main,body:not(.home)>nav,body:not(.home)>footer{padding-left:20px;padding-right:20px}nav{gap:4px;align-items:flex-start}nav>div{gap:8px 16px}nav a.opt{display:inline-block}nav>div a{font-size:12px}nav b{font-size:20px}.home nav>div{width:100%}.hero{padding-top:32px}.hero h1{font-size:34px}.desktop-break{display:none}.hero .lede{font-size:16px}.hero-price{font-size:14px}.actions{gap:18px}.flow{padding:6px 0 12px}.flow svg{min-height:105px}.flow-labels{font-size:20px}.flow-caption{font-size:17px}.flow figcaption{font-size:11px;padding:0 12px}.context,.trust{grid-template-columns:1fr;gap:12px}section{padding:40px 0}.step{grid-template-columns:24px 1fr;padding:22px 0}.step pre{grid-column:2;grid-row:auto;margin-top:12px}.step::before{grid-row:1/4}.step p{font-size:14px}.pricing-table{padding:12px 8px}th,td{padding:12px 5px;font-size:12px}.pricing-table th:first-child{width:23%}#start{padding:20px}#start input{width:100%;margin-right:0}pre{padding:14px;font-size:11px}.ghost{margin-left:0}h1{overflow-wrap:anywhere}footer{font-size:11px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.packet-initial{transform:translateX(545px);opacity:1}.packet-hover{opacity:0}}
/* Homepage base elements also use this sheet without per-page duplication. */
.home{margin:0;background:var(--bg);color:var(--ink)}.home main{margin:0;padding:0}.home h1{font-weight:650}.home h2{font-weight:630}.home table{border-collapse:collapse}.home #check{display:grid;gap:12px}.home #check input,.home #check select,.home #check textarea{font:inherit;padding:10px;background:var(--paper);color:var(--ink);border:1px solid #798596}.home #keys{display:none}.home button.ghost{border:0;background:none;color:var(--ink);font:inherit;cursor:pointer;padding:10px 0}.home .ghost{color:var(--ink)}.comparison{margin-top:28px;font-size:14px}.comparison summary{cursor:pointer;color:var(--pulse);padding:12px 0}.comparison .scroll{margin-bottom:16px}
