:root { --ink:#172541; --muted:#586173; --paper:#faf9f5; --lime:#d9f78a; --line:#dddfd9; --stage:#ecefe7; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:24px; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:'Segoe UI',Arial,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; -webkit-tap-highlight-color:transparent; }
a:focus-visible { outline:3px solid #006ded; outline-offset:5px; }
img { display:block; max-width:100%; }
.shell { max-width:1240px; padding:0 60px; margin:auto; }
.skip-link { position:fixed; left:16px; top:-80px; background:var(--ink); color:white; padding:14px; z-index:10; }
.skip-link:focus { top:16px; }
.header { display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:96px; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.brand img { object-fit:contain; width:42px; height:45px; }
.brand strong { display:block; font-size:18px; font-weight:800; letter-spacing:.045em; line-height:1.25; }
.brand small { display:block; font-size:12px; line-height:1.65; color:var(--muted); }
.header-nav { display:flex; align-items:center; gap:34px; font-size:14px; }
.header-app-link { display:inline-flex; align-items:center; gap:20px; min-height:44px; font-weight:650; }
.text-link:hover,.header-app-link:hover { text-decoration:underline; text-underline-offset:5px; }
.hero { display:grid; grid-template-columns:1.15fr 1fr; align-items:center; gap:64px; padding:45px 0 40px; }
.eyebrow { font-size:10px; font-weight:700; letter-spacing:.10em; line-height:1.7; margin:0 0 22px; color:var(--muted); }
h1 { font-size:54px; font-weight:730; line-height:1.08; letter-spacing:-.045em; margin:0 0 24px; }
h1 span { font-weight:400; }
.lead { max-width:460px; font-size:18px; line-height:1.6; margin:0 0 27px; color:var(--muted); }
.button { display:inline-flex; align-items:center; justify-content:space-between; min-height:58px; gap:38px; padding:15px 23px; border:1px solid var(--ink); border-radius:12px; background:var(--lime); color:var(--ink); font-weight:700; font-size:16px; line-height:1.4; transition:background .18s ease,transform .18s ease; }
.button:hover { background:#ccef74; transform:translateY(-2px); }
.button:active { transform:translateY(0); }
.button-arrow { font-size:24px; line-height:1; font-weight:400; }
.action-note { margin:11px 0 0; font-size:12px; color:var(--muted); }
.app-figure { margin:0; min-width:0; }
.app-stage { display:flex; justify-content:center; padding:28px 25px; background:var(--stage); border-radius:24px; }
.phone { width:240px; border:6px solid var(--ink); border-radius:30px; overflow:hidden; background:#f3f5f8; box-shadow:0 15px 28px #17254118; }
.app-screen { width:100%; height:auto; border-radius:23px; }
figcaption { font-size:11px; color:var(--muted); text-align:center; margin-top:12px; line-height:1.5; }
.how { padding:34px 0 35px; border-top:1px solid var(--line); }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; }
h2 { margin:0; font-size:28px; line-height:1.25; letter-spacing:-.025em; font-weight:650; }
.section-heading p { font-size:13px; color:var(--muted); margin:0; }
.steps { list-style:none; margin:30px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); }
.steps li { padding:0 30px; border-left:1px solid var(--line); }
.steps li:first-child { padding-left:0; border:0; }
.steps li:last-child { padding-right:0; }
.step-number { display:block; font-size:13px; font-weight:650; color:var(--muted); margin-bottom:15px; letter-spacing:.02em; }
h3 { font-size:18px; line-height:1.35; font-weight:650; letter-spacing:-.02em; margin:0 0 9px; }
.steps p { max-width:275px; font-size:15px; line-height:1.6; color:var(--muted); margin:0; }
.finish { display:flex; justify-content:space-between; align-items:center; gap:25px; border-radius:18px; background:var(--ink); color:white; padding:25px 30px; margin:0 0 28px; }
.finish h2 { font-size:24px; font-weight:500; }
.finish .button { border-color:var(--lime); font-size:15px; min-height:54px; padding:13px 21px; }
.footer { border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:16px; padding:21px 0 28px; font-size:11px; line-height:1.6; color:var(--muted); }
@media(max-width:1100px) {
 .shell { padding:0 40px; }
 .hero { gap:35px; }
 h1 { font-size:46px; }
 .lead { font-size:17px; }
 .phone { width:225px; }
 .steps li { padding:0 23px; }
 .section-heading p { font-size:12px; }
}
@media(max-width:850px) {
 .shell { padding:0 28px; }
 .header { min-height:88px; }
 .header-nav { gap:20px; }
 .header-nav .text-link { display:none; }
 .hero { gap:26px; padding-top:34px; }
 .eyebrow { font-size:9px; }
 h1 { font-size:38px; }
 .lead { font-size:16px; }
 .phone { width:207px; }
 .app-stage { padding:24px 20px; }
 .button { gap:26px; font-size:15px; padding:15px 20px; }
 .section-heading { align-items:flex-start; flex-direction:column; gap:8px; }
 h2 { font-size:26px; }
 .steps li { padding:0 17px; }
 h3 { font-size:16px; }
 .steps p { font-size:14px; }
 .finish { padding:24px; }
 .finish h2 { font-size:21px; }
 .finish .button { font-size:13px; gap:21px; }
}
@media(max-width:640px) {
 .shell { padding:0 22px; }
 .header { min-height:82px; gap:14px; }
 .brand { gap:9px; }
 .brand img { width:32px; height:36px; }
 .brand strong { font-size:14px; letter-spacing:.025em; }
 .brand small { font-size:10px; }
 .header-app-link { font-size:12px; gap:8px; }
 .hero { grid-template-columns:1fr; gap:28px; padding:32px 0; }
 .eyebrow { font-size:9px; letter-spacing:.065em; margin-bottom:20px; }
 h1 { font-size:clamp(34px,9.7vw,49px); line-height:1.1; margin-bottom:19px; }
 .lead { font-size:16px; line-height:1.6; max-width:440px; margin-bottom:23px; }
 .button { font-size:16px; min-height:57px; width:100%; padding:15px 21px; }
 .action-note { font-size:12px; text-align:center; margin-top:10px; }
 .app-stage { max-width:410px; margin:auto; padding:24px; border-radius:18px; }
 .phone { width:222px; border-width:5px; border-radius:28px; }
 .app-screen { border-radius:23px; }
 figcaption { font-size:11px; margin-top:10px; }
 .how { padding:29px 0 12px; }
 h2 { font-size:25px; }
 .section-heading { gap:9px; }
 .section-heading p { font-size:12px; }
 .steps { display:block; margin-top:23px; }
 .steps li,.steps li:first-child,.steps li:last-child { position:relative; padding:20px 0 21px 39px; border-left:0; border-top:1px solid var(--line); }
 .step-number { position:absolute; top:23px; left:0; font-size:12px; margin:0; }
 h3 { font-size:17px; margin-bottom:7px; }
 .steps p { font-size:14px; max-width:none; }
 .finish { display:block; padding:25px 23px; border-radius:16px; margin:0 0 25px; }
 .finish h2 { font-size:23px; }
 .finish .button { margin-top:20px; font-size:15px; min-height:54px; }
 .footer { padding:18px 0 24px; font-size:10px; }
 .footer>span:first-child { max-width:185px; }
}
@media(max-width:350px) {
 .shell { padding:0 17px; }
 .brand { gap:7px; }
 .brand img { width:28px; }
 .brand strong { font-size:12px; }
 .brand small { font-size:9px; }
 .header-app-link { font-size:11px; gap:6px; }
 h1 { font-size:33px; }
 .eyebrow { font-size:8px; }
 .lead { font-size:15px; }
 .phone { width:205px; }
 .finish { padding:23px 20px; }
 .finish h2 { font-size:21px; }
 .footer { font-size:9px; }
}
@media(prefers-reduced-motion:reduce) {
 html { scroll-behavior:auto; }
 .button { transition:none; }
 .button:hover { transform:none; }
}