@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&display=swap");

:root { color-scheme: light; --ink:#0e1116; --blue:#1a3a5c; --muted:#4a5260; --line:#e5e7eb; --light:#f7f9fc; font-family:"Geist",system-ui,-apple-system,sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:#fff; color:var(--ink); line-height:1.6; }
a { color:inherit; }
img { max-width:100%; display:block; }
h1,h2,h3,p { margin:0; }
h1,h2,h3 { line-height:1.12; letter-spacing:-.03em; }
h1 { font-size:clamp(2.45rem,5vw,4.2rem); }
h2 { font-size:clamp(1.8rem,3.3vw,2.7rem); }
h3 { font-size:1.18rem; }
p { color:var(--muted); }
.wrap { width:min(100% - 48px,1200px); margin-inline:auto; }
.site-header { border-bottom:1px solid var(--line); background:#fff; }
.site-header .wrap { display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:84px; }
.brand img { width:158px; height:auto; }
.site-nav { display:flex; align-items:center; gap:28px; }
.site-nav a { font-size:14px; font-weight:600; text-decoration:none; }
.site-nav a:hover,.site-footer a:hover { text-decoration:underline; text-underline-offset:4px; }
.nav-trial,.button { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:12px 22px; border:1px solid var(--blue); border-radius:7px; background:var(--blue); color:#fff; font-size:14px; font-weight:600; text-align:center; text-decoration:none; transition:background 160ms ease,transform 160ms ease; }
.nav-trial:hover,.button:hover { background:#0f2b47; transform:translateY(-1px); }
.button--light { border-color:#cfd7e2; background:#fff; color:var(--ink); }
.button--light:hover { background:var(--light); }
a:focus-visible { outline:3px solid #2563eb; outline-offset:4px; }
.eyebrow { color:var(--blue); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.breadcrumbs { padding:22px 0 0; color:#596274; font-size:12px; }
.breadcrumbs a { color:var(--blue); }
.hero { padding:58px 0 76px; }
.hero-grid { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:clamp(36px,6vw,90px); }
.hero h1 { max-width:630px; margin:18px 0 24px; }
.hero .intro { max-width:590px; font-size:clamp(1.04rem,1.7vw,1.17rem); }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
.hero-caption { margin-top:14px; font-size:12px; }
.product-shot { overflow:hidden; border:1px solid #dce3ed; border-radius:16px; background:#fff; box-shadow:0 24px 56px -28px rgb(14 17 22 / 26%); }
.product-shot img { width:100%; }
.product-shot figcaption { padding:12px 18px; border-top:1px solid var(--line); color:#596274; font-size:12px; }
.section { padding:clamp(68px,8vw,100px) 0; }
.section--light { background:var(--light); border-block:1px solid var(--line); }
.section-heading { max-width:730px; }
.section-heading h2 { margin:14px 0 16px; }
.section-heading p { font-size:1.04rem; }
.step-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-top:34px; }
.step { min-height:230px; padding:24px; border:1px solid #dce3ed; border-radius:12px; background:#fff; }
.step-number { color:var(--blue); font-size:12px; font-weight:700; letter-spacing:.12em; }
.step h3 { margin:22px 0 10px; }
.step p { font-size:14px; }
.two-column { display:grid; grid-template-columns:1fr 1fr; gap:clamp(38px,7vw,100px); }
.two-column h2 { margin:14px 0 18px; }
.two-column p + p { margin-top:18px; }
.topic-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.topic-tags span { padding:5px 11px; border:1px solid #dce3ed; border-radius:999px; background:var(--light); color:var(--blue); font-size:12px; font-weight:600; }
.feature-list { display:grid; gap:15px; margin:0; padding:0; list-style:none; }
.feature-list li { padding:18px 20px; border:1px solid var(--line); border-radius:10px; background:#fff; }
.feature-list strong { display:block; margin-bottom:4px; font-size:15px; }
.feature-list span { display:block; color:var(--muted); font-size:14px; }
.faq { display:grid; grid-template-columns:1fr 1.4fr; gap:70px; }
.faq h2 { margin-top:14px; }
.faq-list article { padding:20px 0; border-top:1px solid var(--line); }
.faq-list article:last-child { border-bottom:1px solid var(--line); }
.faq-list h3 { margin-bottom:8px; font-size:16px; }
.faq-list p { font-size:14px; }
.cta { padding:70px 0; background:#132943; color:#fff; }
.cta .wrap { display:flex; align-items:center; justify-content:space-between; gap:40px; }
.cta .eyebrow,.cta h2,.cta p { color:#fff; }
.cta h2 { max-width:680px; margin:12px 0; }
.cta p { max-width:690px; opacity:.86; }
.cta .button { flex:0 0 auto; border-color:#fff; background:#fff; color:#132943; }
.cta .button:hover { background:#eaf1fa; }
.related { padding:44px 0; border-bottom:1px solid var(--line); }
.related .wrap { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.related a { color:var(--blue); font-weight:700; }
.site-footer { padding:42px 0; }
.site-footer .wrap { display:flex; align-items:center; justify-content:space-between; gap:25px; }
.site-footer p,.site-footer a { color:var(--muted); font-size:13px; }
.site-footer nav { display:flex; flex-wrap:wrap; gap:20px; }

@media (max-width:980px) {
  .site-nav { gap:14px; }
  .site-nav a { font-size:12px; }
  .hero-grid { gap:28px; }
  .step-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:720px) {
  .wrap { width:min(100% - 36px,1200px); }
  .site-header .wrap { min-height:74px; flex-wrap:wrap; padding:14px 0; }
  .brand img { width:138px; }
  .site-nav { justify-content:space-between; width:100%; flex-wrap:wrap; gap:12px 18px; }
  .nav-trial { padding:8px 12px; min-height:40px; }
  .hero { padding:45px 0 66px; }
  .hero-grid,.two-column,.faq { grid-template-columns:1fr; }
  .product-shot { margin:0; }
  .step-grid { grid-template-columns:1fr; }
  .step { min-height:0; }
  .cta .wrap,.related .wrap,.site-footer .wrap { align-items:flex-start; flex-direction:column; }
}