:root {
  --ink: #13213d;
  --muted: #596579;
  --paper: #f6f8fc;
  --white: #ffffff;
  --line: #dce2ed;
  --green: #174bdd;
  --lime: #c5f3ff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
.shell { width: min(1120px, calc(100% - 40px)); margin-inline: auto; }
.nav {
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 750; letter-spacing: -.03em; font-size: 20px; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--green); color: var(--lime); font-weight: 850; }
.nav-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 24px; color: var(--muted); font-size: 14px; }
.nav-links a:hover, .footer-links a:hover { color: var(--green); }
.hero { margin-top: 20px; border-radius: 30px; background: var(--green); color: white; padding: 70px 58px; }
.eyebrow { margin: 0 0 16px; color: #657164; font-size: 12px; font-weight: 760; letter-spacing: .11em; text-transform: uppercase; }
.hero .eyebrow { color: var(--lime); }
h1 { margin: 0; max-width: 820px; font-size: clamp(45px, 7vw, 78px); line-height: .98; letter-spacing: -.06em; font-weight: 720; }
.lede { max-width: 680px; margin: 28px 0 0; color: #e0eaff; font-size: clamp(17px, 2vw, 21px); line-height: 1.55; }
.card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; padding-block: 62px; }
.feature-card { min-height: 250px; border: 1px solid var(--line); border-radius: 24px; background: var(--white); padding: 34px; display: flex; flex-direction: column; }
.feature-card h2 { margin: 0; font-size: 30px; letter-spacing: -.04em; }
.feature-card > p:not(.eyebrow) { color: var(--muted); font-size: 15px; line-height: 1.65; }
.text-link { margin-top: auto; font-weight: 700; color: var(--green); }
.legal-wrap { width: min(760px, calc(100% - 40px)); margin: 82px auto 110px; }
.legal-wrap h1 { font-size: clamp(44px, 7vw, 68px); }
.legal-intro { margin: 24px 0 14px; color: var(--muted); font-size: 19px; line-height: 1.65; }
.updated { margin: 0 0 58px; color: #838981; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.legal-section { padding: 35px 0; border-top: 1px solid var(--line); }
.legal-section h2 { margin: 0 0 16px; font-size: 24px; letter-spacing: -.035em; }
.legal-section h3 { margin: 24px 0 8px; font-size: 17px; }
.legal-section p, .legal-section li { color: #4f554e; font-size: 15px; line-height: 1.75; }
.legal-section ul, .legal-section ol { padding-left: 22px; }
.legal-section li + li { margin-top: 8px; }
.legal-section a { color: var(--green); font-weight: 680; text-decoration: underline; text-underline-offset: 3px; }
.callout { margin: 26px 0; border-radius: 18px; background: #e8eadf; padding: 24px 26px; }
.callout p { margin: 0; color: #3b463d; }
.step-list { counter-reset: step; padding: 0 !important; list-style: none; }
.step-list li { position: relative; padding: 4px 0 20px 50px; }
.step-list li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--green); color: var(--lime); font-weight: 800; }
.footer { margin-top: 24px; padding: 44px 0 50px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; color: var(--muted); font-size: 13px; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 20px; }
.footer p { margin: 0; grid-column: 1 / -1; }
@media (max-width: 760px) {
  .shell { width: min(100% - 24px, 1120px); }
  .nav { align-items: flex-start; flex-direction: column; padding-block: 20px; }
  .nav-links { justify-content: flex-start; gap: 16px; }
  .hero { padding: 50px 28px; border-radius: 22px; }
  .card-grid { grid-template-columns: 1fr; padding-block: 42px; }
  .feature-card { min-height: 220px; }
  .legal-wrap { width: calc(100% - 32px); margin-top: 56px; }
  .footer { grid-template-columns: 1fr; }
  .footer-links { justify-content: flex-start; }
  .footer p { grid-column: auto; }
}

.hero-actions { display:flex; align-items:center; gap:24px; flex-wrap:wrap; margin-top:32px; font-size:13px; color:#dce9ff; }
.button { display:inline-flex; gap:32px; align-items:center; padding:16px 22px; background:white; color:var(--green); border-radius:12px; font-weight:750; }
.intro-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; padding:80px 0; }
h2 { font-size:clamp(30px,4vw,44px); letter-spacing:-.045em; line-height:1.1; margin:0; }
.intro-grid p:not(.eyebrow), .benefit-grid p, .privacy-banner p { color:var(--muted); line-height:1.7; }
.section-heading { margin:24px 0 28px; }
.screen-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.screen-grid figure { margin:0; }
.screen-grid img { display:block; width:100%; height:auto; border-radius:20px; border:1px solid var(--line); }
.screen-grid figcaption { font-weight:650; margin:14px 0; }
.benefit-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:36px; padding:65px 0; }
.benefit-grid span { font-size:12px; color:var(--green); font-weight:750; }
.benefit-grid h3 { font-size:23px; letter-spacing:-.035em; margin:15px 0; }
.privacy-banner { padding:36px; border-radius:24px; background:#e9efff; margin-bottom:70px; }
a:focus-visible { outline:3px solid #ff952b; outline-offset:5px; }
@media(max-width:760px) { .intro-grid,.benefit-grid { grid-template-columns:1fr; gap:20px; padding:45px 0; } .screen-grid { grid-template-columns:1fr; max-width:360px; margin:auto; gap:28px; } .privacy-banner { padding:28px; } }