@import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800&display=swap');

:root{
  --navy:#0f3b5c; --navy-2:#0b2d47; --sky:#15ace3; --sky-ink:#06222f; --sky-soft:#e3f5fc;
  --bg:#f4f7fa; --card:#ffffff; --ink:#122436; --muted:#55687a; --line:#dde5ec;
  --ok:#1a7f4b; --ok-soft:#e5f5ec; --warn:#a15c00; --warn-soft:#fff3e0; --bad:#b42318; --bad-soft:#fdecea;
  --hd:#f96302; --lowes:#004990;
  --r:14px; --r-lg:20px; --shadow:0 1px 2px rgba(15,59,92,.06),0 6px 20px rgba(15,59,92,.07);
  --display:'Archivo','Helvetica Neue',sans-serif; --body:'Satoshi','Helvetica Neue',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--body);font-size:17px;line-height:1.55;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--navy)}
h1,h2,h3{font-family:var(--display);color:var(--navy);line-height:1.08;letter-spacing:-.015em}
h1{font-size:clamp(2.3rem,7.5vw,4rem);font-weight:800}
h2{font-size:clamp(1.6rem,4.5vw,2.3rem);font-weight:700}
h3{font-size:1.12rem;font-weight:700;letter-spacing:0}
p{max-width:62ch}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.muted{color:var(--muted)}
.small{font-size:.9rem}
.eyebrow{font-size:.8rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--sky-ink);background:var(--sky-soft);display:inline-block;padding:5px 10px;border-radius:999px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 22px;border-radius:12px;border:2px solid transparent;font:700 1rem/1 var(--body);text-decoration:none;cursor:pointer;transition:transform .12s ease,background .15s ease,box-shadow .15s ease;-webkit-tap-highlight-color:transparent}
.btn:active{transform:scale(.98)}
.btn svg{width:22px;height:22px;flex:none}
.btn-primary{background:var(--sky);color:var(--sky-ink);box-shadow:0 4px 14px rgba(21,172,227,.35)}
.btn-primary:hover{background:#0fa0d4}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-2)}
.btn-ghost{background:#fff;color:var(--navy);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--navy)}
.btn-block{width:100%}
.btn[disabled]{opacity:.45;pointer-events:none}
.link-btn{background:none;border:0;color:var(--navy);font:600 .95rem var(--body);text-decoration:underline;cursor:pointer;padding:10px 4px;min-height:44px}

/* header */
.top{position:sticky;top:0;z-index:20;background:rgba(244,247,250,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:68px;gap:12px}
.top img.logo{height:38px;width:auto}
.top nav{display:flex;align-items:center;gap:6px}
.top nav a.navlink{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;font-weight:600;font-size:.95rem;text-decoration:none;color:var(--navy);border-radius:10px}
.top nav a.navlink:hover{background:#e8eef3}
.top .call{min-height:44px;padding:0 14px;font-size:.95rem}
@media (max-width:720px){.top nav .hide-sm{display:none !important}}

/* cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.pad{padding:22px}
@media (min-width:720px){.pad{padding:28px}}

/* sticky mobile bar */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:none;gap:10px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(15,59,92,.08)}
.mbar .btn{flex:1;min-height:50px;padding:0 10px}
@media (max-width:720px){.mbar{display:flex} body.has-mbar{padding-bottom:84px}}

.focus-ring:focus-visible,.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,button:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media (max-width:380px){.top .wrap{padding:0 14px}.top nav a.navlink{padding:0 8px}.top .call{padding:0 12px}}