/* Match the platform's ink/paper surfaces, sky accent and 4px spacing rhythm.
   Source: ui/src/styles/theme/tokens.css and ui/DESIGN.md. */
:root { color-scheme: light; --bg:#fff; --soft:#f8fafc; --canvas:#eef0f3; --ink:#1e293b; --secondary:#475569; --muted:#64748b; --border:#e2e8f0; --strong:#cbd5e1; --sky:#97bdf2; --link:#3b6aa0; --action:#3b6aa0; --action-hover:#335e91; --action-text:#fff; }
:root[data-theme="dark"] { color-scheme:dark; --bg:#0f172a; --soft:#172033; --canvas:#1e293b; --ink:#f1f5f9; --secondary:#cbd5e1; --muted:#94a3b8; --border:#334155; --strong:#64748b; --link:#97bdf2; --action:#97bdf2; --action-hover:#b0cdf5; --action-text:#16233a; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:128px; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; -webkit-font-smoothing:antialiased; }
button,a { -webkit-tap-highlight-color:transparent; }
button { font:inherit; cursor:pointer; }
[hidden] { display:none!important; }
a { color:var(--link); text-decoration-thickness:1px; text-underline-offset:4px; }
a:hover { text-decoration:underline; }
:focus-visible { outline:3px solid var(--link); outline-offset:4px; }
::selection { background:var(--sky); color:#16233a; }
h1,h2,h3,p { margin:0; }
h1,h2,h3 { line-height:1.16; font-weight:600; }
h1 { font-size:clamp(44px,5.8vw,76px); letter-spacing:-.055em; }
h2 { font-size:clamp(30px,3.6vw,44px); letter-spacing:-.04em; }
h3 { font-size:21px; letter-spacing:-.025em; }
p { color:var(--secondary); }
.wrap { width:min(1200px,calc(100% - 80px)); margin-inline:auto; }
.skip { position:fixed; top:12px; left:12px; transform:translateY(-200%); z-index:100; background:var(--bg); padding:12px 20px; }
.skip:focus { transform:none; }
.site-header { position:sticky; top:0; z-index:20; background:var(--bg); border-bottom:1px solid var(--border); }
.header-row { display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:80px; }
.brand { display:inline-flex; align-items:center; gap:12px; color:var(--ink); text-decoration:none; flex-shrink:0; }
.brand span { font-size:22px; font-weight:700; letter-spacing:.14em; }
.brand img { display:block; }
[data-theme="dark"] .brand img { filter:brightness(1.65); }
.desktop-nav,.header-actions { display:flex; align-items:center; gap:24px; }
.desktop-nav a,.mobile-nav a { font-size:14px; color:var(--secondary); text-decoration:none; white-space:nowrap; }
.desktop-nav a:hover,.mobile-nav a:hover { color:var(--link); text-decoration:underline; }
.header-actions { gap:12px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:16px; padding:11px 20px; min-height:44px; border:1px solid transparent; border-radius:6px; font-size:14px; font-weight:600; text-decoration:none; transition:background 120ms,color 120ms,border-color 120ms; }
.button:hover { text-decoration:none; }
.primary { background:var(--action); color:var(--action-text); }
.primary:hover { background:var(--action-hover); }
.secondary { background:var(--bg); color:var(--ink); border-color:var(--strong); }
.secondary:hover { background:var(--canvas); border-color:var(--muted); }
.theme-toggle { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; min-width:44px; padding:8px; border:1px solid transparent; border-radius:6px; color:var(--secondary); background:none; font-size:13px; }
.theme-toggle:hover { background:var(--soft); border-color:var(--border); }
.theme-toggle[aria-pressed="true"] { background:var(--canvas); border-color:var(--strong); }
.theme-toggle svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; }
.mobile-nav { display:none; }
.mobile-nav a { display:inline-flex; align-items:center; min-height:44px; }
.hero { display:grid; grid-template-columns:1.15fr 1fr; align-items:center; gap:80px; padding-block:88px 80px; }
.eyebrow { font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:24px; }
.hero h1 span { color:var(--link); }
.lead { font-size:18px; line-height:1.7; margin-top:24px; max-width:540px; }
.actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-top:32px; }
.fine { font-size:12px; color:var(--muted); margin-top:16px; }
.overview { border:1px solid var(--strong); border-radius:6px; background:var(--bg); }
.sheet-heading { padding:20px 24px; border-bottom:1px solid var(--strong); display:flex; justify-content:space-between; align-items:center; gap:16px; }
.sheet-heading .eyebrow { margin:0; }
.sheet-mark { font-size:10px; letter-spacing:.1em; color:var(--muted); white-space:nowrap; }
.overview-row { display:flex; align-items:flex-start; gap:24px; padding:28px 24px; border-bottom:1px solid var(--border); }
.number { font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; letter-spacing:.06em; }
.overview-row .number { margin-top:5px; color:var(--link); }
.overview h2 { font-size:23px; letter-spacing:-.025em; margin-bottom:8px; }
.overview p { font-size:14px; }
.sheet-footer { padding:16px 24px; display:grid; gap:4px; background:var(--soft); font-size:12px; color:var(--muted); }
.intro-strip { border-block:1px solid var(--border); background:var(--soft); }
.intro-strip .wrap { display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px 24px; padding-block:20px; color:var(--secondary); font-size:12px; }
.section { padding-block:80px; }
.soft { background:var(--soft); border-block:1px solid var(--border); }
.section-heading { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:end; margin-bottom:48px; }
.section-heading .eyebrow { margin-bottom:16px; }
.section-heading>p { max-width:510px; }
.modules { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid var(--strong); }
.module { padding:32px 40px 32px 0; border-bottom:1px solid var(--border); }
.module:nth-child(even) { padding:32px 0 32px 40px; border-left:1px solid var(--border); }
.module h3 { margin-top:16px; margin-bottom:16px; font-size:24px; }
.module-lead { color:var(--ink); font-weight:500; margin-bottom:8px; }
.module-tags { margin-top:24px; font-size:12px; color:var(--muted); }
.connections { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px; }
.connections article { border-top:2px solid var(--strong); padding-top:24px; }
.connections h3 { margin-bottom:16px; }
.connections p { font-size:14px; }
.connector { display:grid; grid-template-columns:1.2fr 1fr; gap:64px; margin-top:40px; padding-top:32px; border-top:1px solid var(--strong); align-items:center; }
.connector .eyebrow { margin-bottom:12px; }
.connector h3 { margin-bottom:12px; }
.connector p { font-size:14px; }
.connector .fine { font-size:12px; }
.steps { list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; padding:0; margin:0; }
.steps li { border-top:1px solid var(--strong); padding-top:24px; }
.steps h3 { margin-block:20px 16px; }
.steps p { font-size:14px; }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; }
.about-grid h2 { margin-bottom:24px; }
.hosting { border-left:1px solid var(--strong); padding-left:40px; }
.hosting h3 { margin-bottom:20px; }
.hosting p { margin-bottom:16px; font-size:14px; }
.hosting a { font-size:14px; }
.faq-section { display:grid; grid-template-columns:1fr 1.6fr; gap:80px; }
.faq-section h2 { margin-bottom:16px; }
.faq-section>div>p:not(.eyebrow) { margin-bottom:24px; }
.faq-list { border-top:1px solid var(--strong); }
details { border-bottom:1px solid var(--border); }
summary { list-style:none; cursor:pointer; padding:20px 32px 20px 0; position:relative; font-size:16px; font-weight:500; }
summary::-webkit-details-marker { display:none; }
summary::after { content:'+'; position:absolute; right:4px; top:18px; color:var(--link); font-size:22px; font-weight:400; }
details[open] summary::after { content:'−'; }
details p { padding:0 32px 24px 0; font-size:14px; }
.closing { border-block:1px solid var(--strong); padding:40px 0; display:flex; align-items:center; justify-content:space-between; gap:32px; }
.closing h2 { font-size:32px; margin-bottom:12px; }
.closing .eyebrow { margin-bottom:16px; }
.closing .actions { flex-shrink:0; margin:0; }
.footer { padding-block:40px; display:flex; justify-content:space-between; align-items:center; gap:24px; }
.footer p { font-size:12px; margin-top:8px; }
.footer nav { display:flex; flex-wrap:wrap; gap:24px; font-size:13px; }
.footer a { color:var(--secondary); }
@media(min-width:1500px) { .hero { padding-block:104px; } }
@media(max-width:1100px) { .wrap { width:calc(100% - 48px); } .desktop-nav { gap:16px; } .theme-toggle span { display:none; } .hero,.section-heading,.about-grid,.faq-section { gap:40px; } .hero h1 { font-size:60px; } .connections { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:850px) { .desktop-nav { display:none; } .mobile-nav { display:flex; gap:28px; padding-block:12px; overflow-x:auto; } .header-row { min-height:68px; } .hero { padding-block:56px; grid-template-columns:1fr; gap:40px; } .hero-copy { max-width:640px; } .hero h1 { font-size:64px; } .overview { max-width:640px; } .overview-row { padding:20px 24px; } .sheet-footer { display:flex; justify-content:space-between; flex-wrap:wrap; } .section-heading { grid-template-columns:1fr; gap:24px; } .section { padding-block:56px; } .steps { gap:24px; } .connector { grid-template-columns:1fr; gap:24px; } .about-grid,.faq-section { grid-template-columns:1fr; gap:32px; } .hosting { border-left:0; padding:24px 0 0; border-top:1px solid var(--strong); } .closing { flex-direction:column; align-items:flex-start; } .footer { flex-wrap:wrap; } }
@media(max-width:540px) { .wrap { width:calc(100% - 32px); } .header-row { gap:12px; } .header-actions { gap:4px; } .brand { gap:8px; } .brand span { font-size:18px; } .brand img { width:28px; height:28px; } .header-signin { padding:10px 12px; gap:6px; font-size:12px; } .mobile-nav { gap:24px; } .hero h1 { font-size:52px; } .lead { font-size:16px; } .hero { padding-block:40px; } .overview-row { gap:16px; } .intro-strip .wrap { display:grid; grid-template-columns:1fr 1fr; gap:12px; font-size:11px; } .modules,.steps { grid-template-columns:1fr; } .module,.module:nth-child(even) { padding:28px 0; border-left:0; } .connections { gap:24px; } .connections article p { font-size:13px; } .connections h3 { font-size:19px; } .section-heading { margin-bottom:32px; } .connector .button { font-size:12px; padding-inline:12px; } .footer nav { gap:20px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none!important; } }