/* QuoteForte website — shared by the home page, the Xero guide and
   the privacy page. Same palette and system fonts as the app, so the
   site and the app read as one thing and nothing has to download. */
:root{
  --navy-900:#0B1F3A; --navy-700:#16305A;
  --blue-600:#2F6FED; --blue-050:#EAF0FE;
  --bg:#F5F7FB; --surface:#FFFFFF;
  --border:#D8E0EC; --border-strong:#B9C6DC;
  --text:#101828; --text-muted:#52607A; --success:#16803C;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }
body{
  margin:0; background:var(--surface); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:17px; line-height:1.6; -webkit-text-size-adjust:100%;
}
img{max-width:100%; height:auto; display:block;}
a{color:var(--blue-600);}
:focus-visible{outline:2px solid var(--blue-600); outline-offset:2px;}
.wrap{max-width:1080px; margin:0 auto; padding:0 20px;}
.narrow{max-width:720px;}

/* ---------- Header ---------- */
.site-head{border-bottom:3px solid var(--navy-900); background:var(--surface); position:sticky; top:0; z-index:20;}
.site-head .wrap{display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:10px; padding-bottom:10px;}
.site-head .logo img{height:38px; width:auto;}
.site-nav{display:flex; align-items:center; gap:6px;}
.site-nav a{color:var(--navy-900); text-decoration:none; font-weight:600; font-size:15px; padding:8px 10px; border-radius:8px;}
.site-nav a:hover{background:var(--blue-050);}
.site-nav a.pill{border:1px solid var(--border-strong); border-radius:999px; padding:8px 14px;}
.site-nav .hide-sm{display:none;}
@media (min-width:760px){ .site-nav .hide-sm{display:inline-block;} .site-head .logo img{height:44px;} }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:52px; padding:14px 24px; border-radius:12px;
  font-size:17px; font-weight:700; text-decoration:none; border:0; cursor:pointer;
}
.btn-primary{background:var(--blue-600); color:#fff;}
.btn-primary:hover{background:#245FD6;}
.btn-ghost{background:var(--surface); color:var(--navy-900); border:1px solid var(--border-strong);}
.btn-ghost:hover{background:var(--blue-050);}

/* ---------- Type ---------- */
h1,h2,h3{color:var(--navy-900); line-height:1.15; margin:0;}
h1{font-size:clamp(34px,6.2vw,58px); letter-spacing:-0.02em; text-wrap:balance;}
h2{font-size:clamp(26px,3.6vw,36px); letter-spacing:-0.01em; text-wrap:balance;}
h3{font-size:19px;}
p{margin:0 0 14px;}
.lead{font-size:clamp(18px,2.2vw,21px); color:var(--text-muted);}
.eyebrow{font-size:13px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--blue-600); margin-bottom:10px;}
.small{font-size:14.5px; color:var(--text-muted);}

section{padding:56px 0;}
@media (min-width:760px){ section{padding:80px 0;} }
.band{background:var(--bg); border-top:1px solid var(--border); border-bottom:1px solid var(--border);}

/* ---------- Footer ---------- */
.site-foot{background:var(--navy-900); color:#C9D4E6; padding:36px 0; font-size:15px;}
.site-foot a{color:#fff;}
.site-foot .row{display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between;}
.site-foot nav{display:flex; flex-wrap:wrap; gap:6px 18px;}

/* ---------- Article pages (guide, privacy) ---------- */
.article{padding:40px 0 64px;}
.article h1{font-size:clamp(30px,5vw,42px); margin-bottom:12px;}
.article h2{font-size:24px; margin:36px 0 10px;}
.article h3{margin:22px 0 6px;}
.article li{margin-bottom:8px;}
.article .note{background:var(--blue-050); border-radius:12px; padding:14px 16px; margin:18px 0;}
.article table{border-collapse:collapse; width:100%; font-size:15.5px; margin:10px 0 18px;}
.article th,.article td{text-align:left; padding:9px 10px; border-bottom:1px solid var(--border); vertical-align:top;}
.article th{color:var(--text-muted); font-size:13px; text-transform:uppercase; letter-spacing:0.05em;}
.table-scroll{overflow-x:auto;}
ol.steps{list-style:none; padding:0; margin:18px 0; counter-reset:step;}
ol.steps > li{counter-increment:step; position:relative; padding:0 0 18px 52px; margin:0;}
ol.steps > li::before{
  content:counter(step); position:absolute; left:0; top:0;
  width:36px; height:36px; border-radius:50%;
  background:var(--navy-900); color:#fff; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}