:root { color-scheme: light; --ink:#13213a; --muted:#435d7d; --line:#13213a20; --blue:#3077bd; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:radial-gradient(ellipse at 20% 25%,#d5eafe 0,transparent 65%),linear-gradient(135deg,#b9dbfc,#92c1f2); font-family:Inter,"Helvetica Neue",sans-serif; min-height:100vh; }
button,input { font:inherit; } button,a { -webkit-tap-highlight-color:transparent; touch-action:manipulation; } button { cursor:pointer; } a { color:inherit; } :focus-visible { outline:3px solid var(--blue); outline-offset:4px; } [hidden] { display:none!important; }
header { display:flex; align-items:center; gap:20px; padding:30px clamp(20px,5vw,78px); } .brand { display:flex; align-items:center; gap:8px; font-size:26px; font-weight:800; letter-spacing:-1px; text-decoration:none; } .brand svg { width:22px; height:22px; } .demo-badge { margin-left:auto; font-size:11px; font-weight:600; border:1px solid #13213a25; padding:8px 12px; border-radius:99px; } .exit { font-size:12px; text-decoration:none; }
main { width:min(1020px,calc(100% - 48px)); margin:50px auto; display:grid; grid-template-columns: .9fr 1.2fr; gap:80px; align-items:start; } aside { padding-top:28px; } .eyebrow { font-size:10px; font-weight:700; letter-spacing:.16em; margin:0 0 20px; } h1 { font-family:Archivo,Inter,sans-serif; font-size:clamp(38px,4vw,58px); letter-spacing:-.045em; line-height:1.08; margin:0; } .intro { font-size:15px; line-height:1.7; max-width:310px; color:var(--muted); margin:22px 0 32px; }
.steps { list-style:none; padding:0; margin:0; } .steps li { display:flex; align-items:center; gap:16px; color:var(--muted); font-size:13px; padding:13px 0; } .steps li span { display:grid; place-items:center; width:29px; height:29px; border:1px solid #13213a30; border-radius:50%; font-size:10px; } .steps li[aria-current] { color:var(--ink); font-weight:700; } .steps li[aria-current] span { background:var(--ink); color:white; border-color:var(--ink); } .steps li.done span { background:#ffffff60; border-color:transparent; } .sample-note { max-width:290px; color:var(--muted); font-size:11px; line-height:1.7; margin-top:32px; }
.demo-panel { background:#f5faffd9; border:1px solid #ffffffb0; border-radius:26px; padding:32px; box-shadow:0 25px 65px -40px #294c7c80; min-width:0; } .step-label { font-size:10px; font-weight:700; letter-spacing:.1em; color:var(--muted); margin:0 0 12px; } h2 { font-size:28px; line-height:1.2; letter-spacing:-.04em; margin:0 0 12px; } .description { color:var(--muted); font-size:13px; line-height:1.65; margin:0 0 24px; } .events { display:grid; gap:10px; margin:22px 0; } .event { position:relative; display:flex; gap:14px; width:100%; align-items:center; text-align:left; border:1px solid var(--line); background:#ffffff60; border-radius:14px; padding:18px 15px; color:var(--ink); } .event[aria-pressed=true] { border-color:#4b84bd; background:#e1effe; box-shadow:0 0 0 1px #4b84bd; } .event time { font-size:16px; font-weight:700; width:49px; flex:none; } .event small { display:block; color:var(--muted); font-size:10px; font-weight:400; margin-top:5px; line-height:1.5; } .event strong { display:block; font-size:13px; } .choice { margin-left:auto; border:1px solid #13213a45; border-radius:50%; width:19px; height:19px; flex:none; } .event[aria-pressed=true] .choice { border:5px solid var(--blue); }
.primary,.secondary { width:100%; min-height:48px; border-radius:99px; padding:12px 18px; font-size:13px; font-weight:600; display:flex; align-items:center; justify-content:center; gap:12px; text-decoration:none; } .primary { background:var(--ink); color:white; border:1px solid var(--ink); } .primary:hover { background:#2a3d5c; } .secondary { background:transparent; color:var(--ink); border:1px solid #13213a40; margin-top:10px; } .secondary:hover { background:#d8e9fa; } .text-button { background:none; border:0; padding:12px 0; color:var(--muted); font-size:12px; } .back { margin-top:8px; } .tiny { color:var(--muted); font-size:10px; text-align:center; line-height:1.6; margin:12px 0 0; }
fieldset { border:0; padding:0; margin:0 0 22px; } legend,.range-label { font-size:12px; font-weight:600; margin-bottom:10px; display:flex; justify-content:space-between; width:100%; } .modes { display:flex; gap:8px; } .mode { flex:1; border:1px solid var(--line); border-radius:10px; background:white; color:var(--ink); padding:12px 5px; font-size:12px; } .mode[aria-pressed=true] { background:var(--ink); color:white; } input[type=range] { accent-color:var(--blue); width:100%; margin:0 0 20px; } .timeline { border-top:1px solid var(--line); margin:8px 0 24px; } .timeline>div { display:flex; justify-content:space-between; gap:10px; padding:12px 0; border-bottom:1px solid var(--line); font-size:12px; } .timeline strong { font-weight:700; } .timeline small { display:block; color:var(--muted); font-size:10px; margin-top:4px; }
.phone { background:var(--ink); color:#f4f8ff; border-radius:22px; padding:30px 23px; text-align:center; margin:20px 0; } .phone-time { font-size:11px; letter-spacing:.08em; color:#b1c9e5; margin-bottom:24px; } .call-icon { display:grid; place-items:center; width:60px; height:60px; border-radius:50%; margin:0 auto 14px; background:#91c5fa25; } .call-icon svg { width:28px; height:28px; } .phone h3 { font-size:24px; letter-spacing:-.03em; margin:0; } .phone p { font-size:12px; line-height:1.7; color:#c8dbf0; margin:10px 0 0; } .phone blockquote { font-size:14px; line-height:1.8; margin:20px 0 0; text-align:left; } .phone .primary { margin-top:24px; background:#a6d3ff; color:var(--ink); border:0; } .status { display:flex; align-items:center; gap:8px; font-size:11px; line-height:1.6; color:#245c47; background:#e0eee7; padding:12px 14px; border-radius:10px; margin:16px 0; } .status::before { content:""; width:6px; height:6px; border-radius:50%; background:#348665; flex:none; }
.departure { padding:23px; border-radius:18px; background:#dceeff; margin:20px 0; } .departure small { display:block; font-size:10px; color:var(--muted); letter-spacing:.06em; } .departure strong { display:block; font-size:42px; letter-spacing:-.055em; margin:7px 0; } .departure p { font-size:12px; color:var(--muted); margin:0; line-height:1.7; } .traffic { font-size:12px; line-height:1.7; padding:12px 0; margin:0; color:var(--muted); } .success-mark { width:50px; height:50px; display:grid; place-items:center; background:#d5e9dd; color:#245c47; font-size:25px; border-radius:50%; margin-bottom:20px; } footer { display:flex; justify-content:space-between; align-items:center; padding:0 clamp(24px,5vw,78px) 24px; font-size:11px; color:var(--muted); } .no-script { text-align:center; padding:20px; }
@media(max-width:760px) { header { padding:22px 20px; gap:12px; } .demo-badge { font-size:9px; padding:7px 9px; } .exit { display:none; } main { grid-template-columns:1fr; gap:24px; margin:15px auto 32px; width:min(520px,calc(100% - 32px)); } aside { padding:0 6px; } h1 { font-size:35px; } h1 br { display:none; } .eyebrow { margin-bottom:12px; font-size:9px; } .intro { margin:12px 0; max-width:none; font-size:13px; } .steps { display:flex; gap:6px; justify-content:space-between; margin-top:20px; } .steps li { flex-direction:column; gap:8px; padding:0; font-size:10px; } .sample-note { display:none; } .demo-panel { padding:25px 22px; border-radius:22px; } h2 { font-size:25px; } }