:root{
  --ink:#14161a; --muted:#5c6470; --rule:#e4e7ec;
  --accent:#b4441c; --accent-bg:#fdf6f3; --bg:#fff; --panel:#fafbfc;
  --max:1080px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--max); margin:0 auto; padding:0 24px}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{letter-spacing:-.02em; line-height:1.2; margin:0}

/* header */
header{border-bottom:1px solid var(--rule); background:#fff}
.bar{display:flex; align-items:center; justify-content:space-between; height:68px; gap:24px}
.brand{display:flex; align-items:center; gap:11px; color:var(--ink); font-weight:650; letter-spacing:-.01em; font-size:16.5px}
.brand:hover{text-decoration:none}
.brand img{display:block; width:28px; height:28px}
nav{display:flex; gap:26px; font-size:14.5px}
nav a{color:var(--muted)}
nav a:hover{color:var(--ink); text-decoration:none}

/* hero */
.hero{padding:88px 0 72px; border-bottom:1px solid var(--rule)}
.eyebrow{
  display:inline-block; font-size:12px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--accent); background:var(--accent-bg);
  padding:5px 11px; border-radius:100px; margin-bottom:22px;
}
.hero h1{font-size:clamp(30px,4.6vw,46px); max-width:19ch}
.hero p{font-size:19px; color:var(--muted); max-width:60ch; margin:22px 0 0}
.cta{display:flex; gap:12px; margin-top:34px; flex-wrap:wrap}
.btn{display:inline-block; padding:11px 20px; border-radius:7px; font-size:15px; font-weight:550; border:1px solid transparent}
.btn-primary{background:var(--ink); color:#fff}
.btn-primary:hover{background:#000; text-decoration:none}
.btn-ghost{border-color:var(--rule); color:var(--ink)}
.btn-ghost:hover{border-color:var(--muted); text-decoration:none}

/* sections */
section{padding:72px 0; border-bottom:1px solid var(--rule)}
.lede{max-width:62ch; margin-bottom:44px}
.lede h2{font-size:27px}
.lede p{color:var(--muted); margin:14px 0 0}

.grid{display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.card{border:1px solid var(--rule); border-radius:11px; padding:26px; background:var(--panel)}
.card h3{font-size:17px; margin-bottom:10px}
.card p{color:var(--muted); font-size:15px; margin:0}
.card .meta{display:block; margin-top:16px; font-size:12.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--accent)}

.steps{counter-reset:s; display:grid; gap:26px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.step{counter-increment:s; padding-top:14px; border-top:2px solid var(--ink)}
.step::before{content:counter(s,decimal-leading-zero); display:block; font-size:12.5px; font-weight:700; color:var(--accent); letter-spacing:.06em; margin-bottom:8px}
.step h3{font-size:16px; margin-bottom:8px}
.step p{color:var(--muted); font-size:14.5px; margin:0}

.note{background:var(--panel); border:1px solid var(--rule); border-radius:11px; padding:30px}
.note h2{font-size:22px; margin-bottom:12px}
.note p{color:var(--muted); margin:0 0 12px}
.note p:last-child{margin-bottom:0}

/* prose pages (contact, privacy, terms, 404) */
.prose{padding:64px 0; max-width:74ch}
.prose h1{font-size:clamp(27px,3.6vw,36px); margin-bottom:10px}
.prose .updated{color:var(--muted); font-size:14px; margin:0 0 36px}
.prose h2{font-size:19px; margin:38px 0 12px}
.prose h3{font-size:16px; margin:26px 0 8px}
.prose p,.prose li{color:#2c3138}
.prose p{margin:0 0 15px}
.prose ul{margin:0 0 15px; padding-left:22px}
.prose li{margin-bottom:7px}
.prose dl{margin:0 0 18px}
.prose dt{font-weight:600; margin-top:16px}
.prose dd{margin:4px 0 0; color:var(--muted)}
.prose .callout{background:var(--accent-bg); border-left:3px solid var(--accent); padding:16px 20px; border-radius:0 7px 7px 0; margin:0 0 22px}
.prose .callout p{margin:0}
.prose table{border-collapse:collapse; width:100%; margin:0 0 20px; font-size:15px}
.prose th,.prose td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--rule); vertical-align:top}
.prose th{font-weight:600; background:var(--panel)}

/* footer */
footer{padding:44px 0; font-size:14px; color:var(--muted)}
.frow{display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap}
.frow nav{gap:20px; font-size:14px}
.frow strong{color:var(--ink)}
.legal{margin-top:26px; padding-top:22px; border-top:1px solid var(--rule); font-size:13px; line-height:1.6}

@media(max-width:620px){
  .bar{height:auto; padding:16px 0; flex-direction:column; align-items:flex-start}
  .hero{padding:56px 0 48px}
  section{padding:52px 0}
  .prose{padding:44px 0}
}