:root { color-scheme: light; --ink:#16243b; --muted:#62728b; --blue:#2b69e6; --line:#e1e8f3; }
* { box-sizing: border-box; }
body { margin:0; color:var(--ink); background:radial-gradient(circle at 84% 14%,#e8f3ff 0,transparent 31%),linear-gradient(180deg,#f7fbff 0%,#f3f7fd 100%); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
.page { max-width:1100px; padding:0 32px; margin:auto; }
.topbar { height:92px; display:flex; justify-content:space-between; align-items:center; }
.brand { display:flex; align-items:center; gap:12px; font-size:13px; color:var(--ink); text-decoration:none; letter-spacing:1.9px; font-weight:800; }
.brand b { color:var(--blue); }
.brand-icon { display:grid; place-items:center; width:35px; height:35px; font-size:20px; color:white; border-radius:11px; background:linear-gradient(140deg,#57a0ff,#1a55cb); box-shadow:0 6px 18px #2b69e64a; }
.environment { font-size:12px; font-weight:650; color:#55718c; border:1px solid #d6e5f4; padding:9px 14px; border-radius:100px; background:#ffffffba; }
.dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:#45bc9f; margin-right:8px; }
main { padding-top:55px; }
.eyebrow,.section-kicker { color:var(--blue); font-size:11px; font-weight:800; letter-spacing:2px; }
.eyebrow span { color:#a8b5c7; padding:0 8px; }
h1 { margin:18px 0 16px; font-size:clamp(39px,5.3vw,60px); line-height:1.16; letter-spacing:-2.6px; font-weight:730; }
h1 span { color:var(--blue); }
.lead { max-width:645px; font-size:17px; line-height:1.7; color:var(--muted); margin-bottom:39px; }
.workspace { border:1px solid var(--line); background:#fff; border-radius:19px; box-shadow:0 21px 80px #24456e12; padding:30px 34px 34px; }
.workspace-heading { display:flex; justify-content:space-between; gap:12px; align-items:center; }
h2 { font-size:23px; margin:9px 0 10px; letter-spacing:-.5px; }
.pill { padding:8px 12px; border-radius:8px; font-size:11px; color:#b66b18; background:#fff7e9; border:1px solid #ffead0; font-weight:700; }
.connection { margin:22px 0 15px; padding:13px 16px; border-radius:10px; font-size:13px; font-weight:650; color:#255386; background:#f0f6ff; border:1px solid #dae9fc; }
.workspace p { color:var(--muted); font-size:14px; line-height:1.75; }
.primary,.secondary,.text-button { font:inherit; display:inline-flex; align-items:center; justify-content:center; gap:17px; font-size:13px; font-weight:700; padding:13px 20px; border-radius:9px; text-decoration:none; cursor:pointer; }
.primary { background:var(--blue); color:white; border:1px solid var(--blue); box-shadow:0 5px 16px #2161d325; margin-top:9px; }
.secondary { background:#f6f9ff; color:#305daf; border:1px solid #d9e5f7; }
.text-button { background:white; color:#4f6481; border:1px solid #e3eaf3; }
.action-row { display:flex; flex-wrap:wrap; gap:9px; margin:18px 0; }
.note { font-size:12px; font-weight:600; color:#566e8e; }
.divider { height:1px; background:var(--line); margin:31px 0 27px; }
h3 { font-size:15px; letter-spacing:-.2px; margin:0 0 23px; }
.timeline { display:grid; grid-template-columns:1fr 1fr; gap:23px 28px; }
.timeline-item { display:flex; gap:12px; align-items:flex-start; }
.num { width:29px; height:29px; display:grid; flex:none; place-items:center; border-radius:9px; font-size:11px; font-weight:800; color:#3572d0; background:#edf4ff; }
.timeline-item strong { font-size:13px; }
.timeline-item p { margin:5px 0; font-size:12px; }
.timeline-item.muted { opacity:.67; }
.trust-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:17px; margin-top:18px; }
.trust-grid article { padding:20px 22px; border:1px solid #e0e9f4; background:#ffffffc4; border-radius:12px; }
.mini-icon { font-size:21px; color:var(--blue); }
.trust-grid h4 { margin:11px 0 5px; font-size:13px; }
.trust-grid p { font-size:12px; color:var(--muted); line-height:1.7; margin:0; }
footer { display:flex; justify-content:space-between; gap:15px; padding:37px 0 34px; font-size:11px; color:#94a3b8; }
@media (max-width:680px) { .page { padding:0 18px; } .topbar { height:74px; } main { padding-top:39px; } h1 { letter-spacing:-1.3px; } .workspace { padding:22px; } .workspace-heading { flex-wrap:wrap; } .timeline,.trust-grid { grid-template-columns:1fr; } .environment { display:none; } }
