.landing{--bg:var(--color-background);--bg-2:var(--color-muted);--bg-card:var(--color-card);--ink:var(--color-foreground);--ink-2:var(--color-foreground-secondary);--ink-3:var(--color-muted-foreground);--ink-4:var(--color-foreground-faint);--rule:var(--color-border);--rule-2:var(--color-border-strong);--accent:var(--color-primary);--accent-2:var(--color-primary-hover);--accent-tint:var(--color-primary-subtle);--ok:var(--color-success);--warn:var(--color-warning);--info:var(--color-info);--pad-x:clamp(20px, 5vw, 88px);--gap:clamp(48px, 7vw, 112px);--maxw:1280px;--serif:var(--font-plus-jakarta), ui-sans-serif, system-ui, sans-serif;--mono:var(--font-jetbrains), ui-monospace, "SF Mono", Menlo, monospace;font-family:var(--serif);background:var(--bg);color:var(--ink);font-feature-settings:"ss01", "ss02";-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;min-height:100vh}.landing *{box-sizing:border-box}@layer components{.landing a{color:inherit;text-decoration:none}}.landing button{font:inherit;cursor:pointer}.landing .wrap{max-width:var(--maxw);padding-inline:var(--pad-x);margin:0 auto}.landing .section{padding-block:clamp(24px,3.5vw,48px)}.landing .hero{padding-block:clamp(20px,2vw,32px) clamp(16px,2vw,28px)}.landing .hero h1{font-family:var(--serif);letter-spacing:-.025em;text-wrap:balance;color:var(--ink);margin:10px 0 12px;font-size:clamp(32px,3.6vw,44px);font-weight:600;line-height:1.06}.landing .hero h1 em{color:var(--accent);font-style:normal;font-weight:600}.landing .hero-sub{color:var(--ink-2);max-width:54ch;margin:0 0 18px;font-size:clamp(15px,1.1vw,18px);line-height:1.45}.landing .flow-code{background:var(--color-surface-subtle);border:1px solid var(--rule);font-family:var(--mono);white-space:pre;color:var(--ink-2);letter-spacing:0;-webkit-font-smoothing:antialiased;border-radius:10px;margin:0;padding:14px 16px 14px 18px;font-size:12.5px;line-height:1.7;position:relative;overflow-x:auto;box-shadow:inset 0 1px #00000005}@media (max-width:480px){.landing .flow-code{white-space:pre-wrap;overflow-wrap:anywhere}}.landing .flow-code:after{content:"JSX";background:var(--bg-2);border:1px solid var(--rule);color:var(--ink-4);letter-spacing:.1em;pointer-events:none;border-radius:4px;padding:2px 6px;font-size:9.5px;font-weight:600;line-height:1;position:absolute;top:8px;right:10px}.landing .t-p{color:var(--ink-4)}.landing .t-t{color:var(--accent);font-weight:600}.landing .t-a{color:var(--ink);font-weight:500}.landing .t-s{color:var(--color-syntax-string)}.landing .t-e{color:var(--info);font-style:italic}.landing section h2{font-family:var(--serif);letter-spacing:-.025em;text-wrap:balance;color:var(--ink);margin:0;font-size:clamp(28px,3.6vw,44px);font-weight:600;line-height:1.08}.landing section h2 em{color:var(--accent);font-style:normal;font-weight:600}.landing .lede{color:var(--ink-3);max-width:60ch;margin:0;font-size:15px;line-height:1.55}.landing .cta{text-align:center;padding-block:clamp(56px,8vw,96px);position:relative}.landing .cta h2{font-family:var(--serif);letter-spacing:-.025em;text-wrap:balance;color:var(--ink);margin:12px 0 16px;font-size:clamp(32px,4.5vw,56px);font-weight:600;line-height:1.05}.landing .cta h2 em{color:var(--accent);font-style:normal;font-weight:600}.landing .cta .lede{color:var(--ink-3);max-width:56ch;margin:0 auto 24px;font-size:15px;line-height:1.55}.landing .cta-row{flex-wrap:wrap;justify-content:center;gap:8px;display:inline-flex}.landing .flow-rail{position:relative}@media (min-width:768px){.landing .flow-line{background:linear-gradient(90deg, var(--accent-tint), var(--accent), var(--accent-tint));border-radius:999px;height:2px;position:absolute;top:32px;left:16%;right:16%;overflow:hidden}.landing .flow-line:after{content:"";background:var(--accent);width:8px;height:8px;box-shadow:0 0 0 3px var(--accent-tint);border-radius:999px;animation:3s linear infinite flow-travel;position:absolute;top:-3px;left:0}}@keyframes flow-travel{0%{opacity:0;left:0}12%{opacity:1}88%{opacity:1}to{opacity:0;left:100%}}@media (prefers-reduced-motion:reduce){.landing .flow-line:after{display:none}}.landing>section[id],.landing>div[id]{scroll-margin-top:84px}
