/* RoofHub public site.
   Static HTML so it needs no build step and no framework, and so it can move
   to the apex domain later without touching the app's routing.
   System fonts on purpose: the Content-Security-Policy in vercel.json is
   default-src 'self' with font-src 'self' data:, so an external webfont would
   be blocked. It also loads instantly, which matters more here than in the app. */

/* Palette taken from Matt's prototype (roofhub-final-sample) so the public
   site and the intended app UI read as the same product. --navy keeps its
   name rather than being renamed across every file; it is the brand primary. */
:root {
  --navy:    #087F75;
  --ink:     #132F38;
  --ground:  #F3F6F7;
  --surface: #FFFFFF;
  --accent:  #15978B;
  --muted:   #67777E;
  --faint:   #8FA3A9;
  --rule:    #D9E2E5;
  --good:    #17655F;
  --shadow:  0 1px 3px rgba(19,47,56,.06), 0 6px 20px rgba(19,47,56,.06);
  --font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--surface); color: var(--ink);
  font-family: var(--font); font-size: 17px; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
a { color: var(--navy); }

.wrap { max-width: 68rem; margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 46rem; }

header.site {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.94); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}
header.site .bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; height: 68px;
}
.logo {
  font-size: 19px; font-weight: 800; letter-spacing: -.02em;
  color: var(--ink); text-decoration: none; flex-shrink: 0;
}
.logo span { color: var(--navy); }
nav.site { display: flex; align-items: center; gap: 26px; }
nav.site a { font-size: 15px; font-weight: 500; color: var(--muted); text-decoration: none; }
nav.site a:hover, nav.site a[aria-current="page"] { color: var(--navy); }
@media (max-width: 860px) { nav.site { display: none; } }

h1 {
  font-size: clamp(34px, 6vw, 56px); line-height: 1.08; letter-spacing: -.03em;
  font-weight: 800; margin: 0 0 18px; text-wrap: balance;
}
h2 {
  font-size: clamp(25px, 3.4vw, 34px); line-height: 1.2; letter-spacing: -.02em;
  font-weight: 700; margin: 0 0 14px; text-wrap: balance;
}
h3 { font-size: 18px; font-weight: 700; margin: 0 0 6px; letter-spacing: -.01em; }
p { margin: 0 0 16px; }
.lede { font-size: clamp(18px, 2.2vw, 21px); color: var(--muted); line-height: 1.55; }
.eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--navy); margin: 0 0 14px;
}

section { padding: 76px 0; }
section.tint { background: var(--ground); }
section.hero { padding: 88px 0 72px; }
.grid { display: grid; gap: 22px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .g3, .g4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } }

.card {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 16px;
  padding: 24px; box-shadow: var(--shadow);
}
section.tint .card { box-shadow: none; }

.pills { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 28px; padding: 0; list-style: none; }
.pills li {
  display: flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 600; color: var(--ink);
  background: var(--ground); border: 1px solid var(--rule);
  border-radius: 999px; padding: 7px 15px;
}
.pills svg { flex-shrink: 0; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 52px; padding: 0 28px; border-radius: 999px;
  font-size: 16px; font-weight: 700; text-decoration: none;
  border: 1px solid transparent; cursor: pointer; font-family: var(--font);
}
.btn.primary { background: var(--navy); color: #fff; }
.btn.primary:hover { background: #066A62; }
.btn.ghost { background: var(--surface); color: var(--ink); border-color: var(--rule); }
.btn.ghost:hover { border-color: var(--navy); color: var(--navy); }
.btns { display: flex; flex-wrap: wrap; gap: 12px; }

ol.steps { list-style: none; counter-reset: s; padding: 0; margin: 0; display: grid; gap: 18px; }
ol.steps > li { counter-increment: s; position: relative; padding-left: 56px; }
ol.steps > li::before {
  content: counter(s); position: absolute; left: 0; top: -2px;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--navy); color: #fff;
  font-size: 15px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

.note {
  background: var(--ground); border: 1px solid var(--rule);
  border-left: 3px solid var(--navy);
  border-radius: 12px; padding: 18px 20px; font-size: 15.5px; color: var(--muted);
}
.note strong { color: var(--ink); }

.status {
  display: inline-flex; align-items: center; gap: 9px;
  background: #E9F4F2; border: 1px solid #BEDCD7; color: #17655F;
  border-radius: 999px; padding: 7px 16px; font-size: 14px; font-weight: 600;
  margin-bottom: 22px;
}
.status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--navy); flex-shrink: 0; }

dl.faq { margin: 0; display: grid; gap: 20px; }
dl.faq dt { font-weight: 700; margin-bottom: 4px; }
dl.faq dd { margin: 0; color: var(--muted); }

footer.site { background: var(--ink); color: #BFD3D7; padding: 54px 0 34px; font-size: 15px; }
footer.site a { color: #BFD3D7; text-decoration: none; }
footer.site a:hover { color: #fff; }
footer.site .cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; }
@media (max-width: 700px) { footer.site .cols { grid-template-columns: 1fr; } }
footer.site h4 {
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: #7F969C; margin: 0 0 12px; font-weight: 700;
}
footer.site ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
footer.site .fine {
  border-top: 1px solid #23434C; margin-top: 34px; padding-top: 20px;
  font-size: 13.5px; color: #7F969C;
}
.brandline { font-size: 19px; font-weight: 800; color: #fff; margin: 0 0 8px; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}