/* Sold Squares site styles, on the Sold Squares design system (the claude.ai design-system
   artifact "Sold Squares", tokens.json v1): chalk and asphalt grounds, safety orange as a fill
   with asphalt text (never white), chalk-line blue only for weather and the focus ring, square
   corners, Barlow for reading and Barlow Condensed (uppercase) for display. The variable names
   below are the site's older ones, pointed at the system's tokens:
   ground = surface, panel = surface-raised, panel-2 = surface-sunken, ink-2 = ink-muted,
   rule = line, chalk = brand, chalk-text = brand-ink. Fonts are self-hosted (SIL OFL). */

@font-face { font-family: "Barlow Condensed"; src: url("../fonts/BarlowCondensed-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/BarlowCondensed-ExtraBold.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/Barlow-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/Barlow-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/Barlow-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/Barlow-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/Barlow-ExtraBold.woff2") format("woff2"); font-weight: 800; font-display: swap; }

:root {
  --ground: #f3f0e9;
  --panel: #fbfaf6;
  --panel-2: #e9e5db;
  --ink: #1b1c1e;
  --ink-2: #5a5853;
  --rule: #d9d4c9;
  --line-strong: #86827a;
  --brand: #e25a22;
  --brand-hover: #ec7340;
  --brand-ink: #a8441e;
  --brand-soft: #fbe7da;
  --on-brand: #1b1c1e;
  --storm: #2f5fb3;
  --storm-soft: #e3ebf8;
  --chalk: var(--brand);
  --chalk-text: var(--brand-ink);
  --good: #276b43;
  --bad: #b3261e;
  --shadow: 0 1px 2px #1b1c1e14, 0 4px 12px #1b1c1e0f;
  --focus-ring: 0 0 0 2px var(--ground), 0 0 0 4px var(--storm);
  /* Fixed asphalt-band accents, for panels that stay dark in both themes (the result card). */
  --asphalt-brand: #e8622c;
  --asphalt-brand-hover: #f08550;
  --asphalt-brand-ink: #f07a45;

  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body: Barlow, system-ui, sans-serif;
  --mono: Barlow, system-ui, sans-serif; /* the system has no mono; labels are tracked Barlow */

  --gutter: max(24px, env(safe-area-inset-left), env(safe-area-inset-right));
  --wrap: 1200px;
  --radius: 4px;
  --radius-sm: 2px;
  color-scheme: light;
}

/* Asphalt: the dark theme, and the dark bands (hero, footer, result cards) in either theme. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #1b1c1e; --panel: #26272a; --panel-2: #131415; --ink: #f3f0e9; --ink-2: #a3a6ac;
    --rule: #3a3b3f; --line-strong: #7a7c82; --brand: #e8622c; --brand-hover: #f08550; --brand-ink: #f07a45;
    --brand-soft: #3a2318; --storm: #7fa8ee; --storm-soft: #1a2740; --good: #6cc08e; --bad: #f2827a;
    --shadow: 0 1px 3px #000000b3;
    color-scheme: dark;
  }
}
:root[data-theme="dark"], .band-dark {
  --ground: #1b1c1e; --panel: #26272a; --panel-2: #131415; --ink: #f3f0e9; --ink-2: #a3a6ac;
  --rule: #3a3b3f; --line-strong: #7a7c82; --brand: #e8622c; --brand-hover: #f08550; --brand-ink: #f07a45;
  --brand-soft: #3a2318; --storm: #7fa8ee; --storm-soft: #1a2740; --good: #6cc08e; --bad: #f2827a;
  --shadow: 0 1px 3px #000000b3;
}
:root[data-theme="dark"] { color-scheme: dark; }
.band-dark { background: var(--ground); color: var(--ink); }

/* Logo files: show the lockup that matches the ground. Never retype the wordmark. */
.logo { display: block; height: 32px; width: auto; }
.logo--on-dark { display: none; }
.band-dark .logo--on-light, :root[data-theme="dark"] .logo--on-light { display: none; }
.band-dark .logo--on-dark, :root[data-theme="dark"] .logo--on-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo--on-light { display: none; }
  :root:not([data-theme="light"]) .logo--on-dark { display: block; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--body);
  overflow-x: hidden;
}
img, svg { max-width: 100%; height: auto; }
a { color: var(--brand-ink); font-weight: 600; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--brand-ink); text-decoration-thickness: 2px; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
p { margin: 0 0 1em; }
ul, ol { padding-left: 1.2em; }
li { margin-bottom: .35em; }
strong { font-weight: 700; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5rem 0; }

/* Display type is signage: Barlow Condensed, uppercase. */
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.75rem, 7vw, 4.5rem); line-height: .9; }
h2 { font-size: clamp(2.1rem, 5vw, 3rem); }
h3 { font-size: 1.6rem; font-weight: 700; line-height: 1.1; letter-spacing: 0.01em; }
h4 { font: 700 1rem/1.3 var(--body); margin: 0 0 .5em; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 8px; z-index: 100; background: var(--panel); padding: 8px 12px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 760px; }
.section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.section + .section { border-top: 1px solid var(--rule); }
.section--panel { background: var(--panel); }
.lede { font-size: clamp(1.1rem, 2vw, 1.3rem); line-height: 1.5; color: var(--ink-2); max-width: 46em; }
.muted { color: var(--ink-2); }
.small { font-size: .9rem; }

/* Mono labels: the measurement-report voice */
/* Eyebrow: the kicker above a display heading (13px, tracked 0.2em). */
.eyebrow {
  font: 700 13px/16px var(--body);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 .9rem;
}
.mono { font-family: var(--mono); }

/* Facet tag: a lettered square, like the facet labels on a roof measurement report */
.facet {
  display: inline-grid; place-items: center;
  width: 2rem; height: 2rem; flex: none;
  border: 2px solid var(--ink); border-radius: var(--radius-sm);
  font: 800 1rem/1 var(--display);
  color: var(--ink);
  background: var(--panel);
}
.facet--sm { width: 1.5rem; height: 1.5rem; font-size: .75rem; border-width: 1.5px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--ground) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.site-header .wrap { position: relative; display: flex; align-items: center; gap: 1.25rem; min-height: 64px; }
.wordmark { display: block; flex: none; text-decoration: none; }
.wordmark .logo { height: 32px; }
.nav { margin-left: auto; display: flex; align-items: center; gap: .25rem; }
.nav > a, .nav-menu-btn {
  color: var(--ink); text-decoration: none; font: 600 .95rem/1.2 var(--body);
  padding: .6rem .75rem; border-radius: var(--radius); background: none; border: 0; cursor: pointer;
}
.nav > a:hover, .nav-menu-btn:hover, .nav-menu-btn[aria-expanded="true"] { background: var(--panel-2); color: var(--ink); }
/* Current page: an underline in the chalk color, not a filled pill (a filled "Search" read as a search tab). */
.nav > a[aria-current="page"], .nav-menu-btn[data-current] { box-shadow: inset 0 -3px 0 var(--chalk); border-radius: 0; }
.nav > a.nav-quiet { font-weight: 600; }
.nav > a.nav-quiet::before { content: ""; display: inline-block; width: 1px; height: 1.1em; background: var(--rule); margin-right: .75rem; vertical-align: -.2em; }
@media (max-width: 960px) { .nav > a.nav-quiet::before { display: none; } }
.nav-menu-btn span { font-size: .7rem; margin-left: .15rem; color: var(--ink-2); }
/* The menu hangs from the header's right edge, so it never runs off a narrow laptop screen. */
.nav-group { position: static; }
/* Two labeled columns, so the menu stays shorter than a laptop screen. If a screen is shorter
   still, the menu scrolls inside itself rather than running off the bottom. */
.nav-menu {
  display: none; position: absolute; top: calc(100% - 4px); right: var(--gutter); z-index: 60; width: min(720px, calc(100vw - 2 * var(--gutter)));
  max-height: calc(100vh - 88px); overflow-y: auto;
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow); padding: .5rem;
}
.nav-menu.is-open { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 .5rem; }
.nav-menu-col { display: grid; align-content: start; }
.nav-menu-head { margin: 0; padding: .6rem .7rem .3rem; font: 700 12px/16px var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); }
.nav-menu a { display: flex; gap: .75rem; align-items: flex-start; padding: .65rem .7rem; border-radius: var(--radius); color: var(--ink); text-decoration: none; }
.nav-menu a:hover { background: var(--panel-2); }
.nav-menu a[aria-current="page"] { background: var(--panel-2); }
.nav-menu strong { display: block; font-size: .95rem; }
.nav-menu small { display: block; color: var(--ink-2); font-size: .82rem; margin-top: .1rem; }
.nav-menu .facet { margin-top: .1rem; }
.nav .btn { margin-left: .5rem; }
.nav > a.btn { background: var(--brand); color: var(--on-brand); padding: .5rem .9rem; border-radius: var(--radius); box-shadow: none; }
.nav > a.btn:hover { background: var(--brand-hover); color: var(--on-brand); }
.header-phone { margin-left: auto; font: 700 .95rem var(--body); color: var(--ink); text-decoration: none; padding: .5rem .25rem; white-space: nowrap; }
.header-phone + .nav-toggle, .header-phone + .nav-toggle + .nav { margin-left: 1rem; }
.nav-toggle { display: none; }

@media (max-width: 960px) {
  .nav-toggle {
    display: inline-flex; margin-left: auto; align-items: center; gap: .4rem;
    background: none; border: 1px solid var(--rule); color: var(--ink);
    font: 600 .95rem var(--body); padding: .55rem .8rem; border-radius: var(--radius); min-height: 44px;
  }
  .header-phone + .nav-toggle { margin-left: .75rem; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0; max-height: calc(100vh - 64px); overflow-y: auto;
    background: var(--ground); border-bottom: 1px solid var(--rule); padding: .5rem var(--gutter) 1rem;
  }
  .nav.is-open { display: flex; }
  .nav > a { padding: .85rem .5rem; border-bottom: 1px solid var(--rule); border-radius: 0; }
  .nav > a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--chalk); }
  /* On phones the services list is always open under its heading: one tap less, nothing hidden. */
  .nav-menu-btn { pointer-events: none; padding: .9rem .5rem .3rem; font: 700 .75rem/1 var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--chalk-text); text-align: left; box-shadow: none !important; }
  .nav-menu-btn span { display: none; }
  .nav-menu, .nav-menu.is-open { display: grid; grid-template-columns: 1fr; position: static; width: auto; max-height: none; overflow: visible; box-shadow: none; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; background: none; padding: 0 0 .5rem; }
  .nav-menu-head { padding: .6rem .5rem .2rem; }
  .nav .btn { margin: 1rem 0 0; justify-content: center; border-bottom: 0; }
}
@media (max-width: 420px) { .header-phone { font-size: .85rem; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .75rem 1.25rem;
  font: 700 15px/20px var(--body); letter-spacing: .04em; text-transform: uppercase;
  border-radius: var(--radius); border: 2px solid var(--brand);
  background: var(--brand); color: var(--on-brand); text-decoration: none; cursor: pointer;
}
/* Orange lifts brighter on hover, never darker, so the asphalt label keeps its contrast. */
.btn:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: var(--on-brand); text-decoration: none; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.btn--sm { min-height: 44px; padding: .5rem .9rem; font-size: 14px; }
.nav .btn { color: var(--on-brand); }
.nav .btn:hover { background: var(--brand-hover); }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }

/* ---------- Hero ---------- */
.hero { padding: clamp(3rem, 8vw, 6rem) 0; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.hero h1 { margin-bottom: .35em; font-size: clamp(2.75rem, 7vw, 4.5rem); }
.hero .eyebrow { color: var(--brand-ink); }
.hero .lede { margin-bottom: 0; }
.hero-note { margin-top: 1.25rem; font-size: .92rem; color: var(--ink-2); }
@media (max-width: 860px) { .hero .wrap { grid-template-columns: 1fr; } }

.page-hero { padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(1.5rem, 4vw, 2.5rem); }
.page-hero h1 { font-size: clamp(2rem, 5vw, 3.3rem); max-width: 18ch; }
.page-hero .facet { margin-bottom: 1rem; }

/* ---------- Roof plan (the signature) ---------- */
.roofplan { position: relative; margin: 0; }
.roofplan svg { display: block; width: 100%; height: auto; overflow: visible; }
.roofplan .plan-face { fill: var(--panel); stroke: var(--ink); stroke-width: 2; transition: fill .2s; cursor: pointer; }
.roofplan .plan-face:hover, .roofplan .plan-face.is-hot, .roofplan a:focus-visible .plan-face { fill: var(--brand-soft); }
.roofplan a:focus-visible { outline: none; }
.roofplan a:focus-visible .plan-face { stroke: var(--chalk); stroke-width: 4; }
.roofplan .plan-ridge { stroke: var(--chalk); stroke-width: 4; stroke-linecap: round; }
.roofplan .plan-dim { stroke: var(--ink-2); stroke-width: 1; }
.roofplan .plan-chalk { stroke: var(--chalk); stroke-width: 1.5; stroke-dasharray: 6 5; fill: none; }
.roofplan .plan-letter { font: 800 32px var(--display); fill: var(--ink); pointer-events: none; }
.roofplan .plan-label { font: 600 15px var(--body); fill: var(--ink); pointer-events: none; }
.roofplan .plan-small { font: 500 11.5px var(--mono); fill: var(--ink-2); letter-spacing: .06em; pointer-events: none; }
.roofplan .plan-ridge-label { font: 600 12px var(--mono); fill: var(--chalk-text); letter-spacing: .08em; }
.roofplan figcaption { font: 600 .75rem/1.4 var(--body); color: var(--ink-2); letter-spacing: .12em; margin-top: .75rem; text-transform: uppercase; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
@media (prefers-reduced-motion: no-preference) {
  .roofplan .plan-ridge { stroke-dasharray: 520; stroke-dashoffset: 520; animation: ridge 1.1s .3s ease-out forwards; }
  @keyframes ridge { to { stroke-dashoffset: 0; } }
}

/* ---------- Grids and cards ---------- */
.grid { display: grid; gap: 1.25rem; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card {
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 1.4rem 1.4rem 1.2rem; display: flex; flex-direction: column;
}
.card h3 { margin-top: .9rem; }
.card p:last-child { margin-bottom: 0; }
.card .more { margin-top: auto; padding-top: .75rem; font-weight: 700; }
.card--link { text-decoration: none; color: var(--ink); transition: border-color .15s, transform .15s; }
.card--link:hover { border-color: var(--line-strong); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; }
@media (prefers-reduced-motion: no-preference) { .card--link:hover { transform: translateY(-2px); } }
.card--link .more { color: var(--brand-ink); }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: start; }
.split--wide { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); }
@media (max-width: 860px) { .split, .split--wide { grid-template-columns: 1fr; } }

/* Section heading row */
.head { max-width: 760px; margin-bottom: 2.25rem; }
.head p { color: var(--ink-2); font-size: 1.1rem; }

/* Lists with ticks and crosses */
.ticks, .crosses { list-style: none; padding: 0; margin: 0 0 1em; }
.ticks li, .crosses li { position: relative; padding-left: 1.7rem; margin-bottom: .6rem; }
.ticks li::before, .crosses li::before { position: absolute; left: 0; top: .05em; font: 700 1rem var(--body); }
.ticks li::before { content: "\2713"; color: var(--good); }
.crosses li::before { content: "\2715"; color: var(--bad); }

/* Straight-answer box: what's true, said plainly */
.straight {
  border: 2px solid var(--ink); border-radius: var(--radius); background: var(--panel);
  padding: 1.25rem 1.4rem; margin: 1.5rem 0;
}
.straight > .label { font: 700 .75rem/1 var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--chalk-text); display: block; margin-bottom: .6rem; }
.straight p:last-child { margin-bottom: 0; }

/* Sequence: a real order of work (months), so numbers are earned */
.sequence { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; counter-reset: step; }
.sequence > li {
  display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1.25rem;
  padding: 1.25rem 0; border-top: 1px solid var(--rule); margin: 0;
}
.sequence > li:last-child { border-bottom: 1px solid var(--rule); }
.sequence .when { font: 700 .8rem/1.4 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--chalk-text); padding-top: .2rem; }
.sequence h3 { margin: 0 0 .35rem; }
.sequence p { margin: 0; color: var(--ink-2); }
@media (max-width: 560px) { .sequence > li { grid-template-columns: 1fr; gap: .35rem; } }

/* Tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--panel); }
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
th, td { text-align: left; padding: .7rem .9rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font: 700 .75rem/1.3 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); background: var(--panel-2); }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Pricing */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; align-items: stretch; }
@media (max-width: 960px) { .plans { grid-template-columns: 1fr; max-width: 560px; } }
.plan { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.5rem; display: flex; flex-direction: column; }
.plan--pick { border: 2px solid var(--ink); }
.plan .tag { font: 700 .72rem/1 var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--chalk-text); min-height: 1em; }
.plan h3 { margin: .6rem 0 .25rem; font-size: 1.45rem; }
.plan .price { font: 800 2.75rem/1 var(--display); margin: .75rem 0 .2rem; }
.plan .price small { font: 500 .95rem var(--body); color: var(--ink-2); }
.plan .terms { font-size: .9rem; color: var(--ink-2); margin-bottom: 1rem; }
.plan ul { margin-bottom: 1.25rem; }
.plan .btn { margin-top: auto; }

/* FAQ */
.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.1rem 2.5rem 1.1rem 0; position: relative;
  font: 700 1.08rem/1.35 var(--body);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: .25rem; top: .95rem; font: 500 1.4rem/1 var(--body); color: var(--chalk-text); }
.faq details[open] summary::after { content: "\2212"; }
.faq .answer { padding: 0 0 1.2rem; color: var(--ink-2); max-width: 46em; }
.faq .answer p:last-child { margin-bottom: 0; }

/* Questions homeowners ask (real data) */
.asked { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.asked li { margin: 0; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: .55rem 1rem; font-size: .95rem; }
.asked--cloud { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Surfaces (where the homeowner's question gets answered) */
.surfaces { list-style: none; padding: 0; margin: 0; border-top: 2px solid var(--ink); }
.surfaces li { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; gap: .9rem; align-items: center; padding: .85rem 0; border-bottom: 1px solid var(--rule); margin: 0; }
.surfaces .who { font-weight: 700; }
.surfaces .what { font-size: .92rem; color: var(--ink-2); }
.surfaces .where { font: 600 .78rem var(--body); color: var(--ink-2); text-align: right; }

/* CTA band */
/* CTA band: safety orange in either theme; everything on it is asphalt. */
.cta-band { background: var(--brand); color: var(--on-brand); padding: clamp(3rem, 7vw, 4rem) 0; }
.cta-band h2 { color: var(--on-brand); max-width: 20ch; }
.cta-band p { color: var(--on-brand); max-width: 44em; font-weight: 500; }
.cta-band .btn { background: var(--on-brand); border-color: var(--on-brand); color: var(--brand); }
.cta-band .btn:hover { background: var(--on-brand); color: var(--brand); text-decoration: underline; text-underline-offset: 4px; }
.cta-band .btn--ghost { background: transparent; color: var(--on-brand); border-color: var(--on-brand); }
.cta-band .btn--ghost:hover { background: var(--on-brand); color: var(--brand); }
.cta-band .eyebrow { color: var(--on-brand); }
.cta-band a:not(.btn) { color: var(--on-brand); }
.cta-band :focus-visible { box-shadow: 0 0 0 2px var(--brand), 0 0 0 4px var(--on-brand); }

/* ---------- Forms and tools ---------- */
.form { display: grid; gap: 1rem; }
.form .row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.field { display: grid; gap: .35rem; align-content: start; }
/* Side-by-side fields share row lines (label / control / hint) through subgrid, so a label that
   wraps to two lines pushes both inputs down together and the inputs stay on one horizontal plane. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 641px) {
    .form .row { grid-template-rows: auto auto auto; row-gap: .35rem; }
    .form .row > * { grid-row: span 3; display: grid; grid-template-rows: subgrid; gap: .35rem; }
    .form .row > .field > label, .form .row > .field > legend { align-self: end; }
    .form .row > .field > .hint { align-self: start; }
  }
}
@media (max-width: 640px) { .form .row { grid-template-columns: 1fr; } }
.field label, .field legend { font-weight: 700; font-size: .95rem; }
.field .hint { font-size: .85rem; color: var(--ink-2); }
input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], select, textarea {
  width: 100%; min-height: 46px; padding: .6rem .75rem;
  font: 400 1rem/1.4 var(--body); color: var(--ink);
  background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
}
textarea { min-height: 110px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--storm); outline: none; box-shadow: var(--focus-ring); }
input[aria-invalid="true"] { border-color: var(--bad); }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.choices { display: flex; flex-wrap: wrap; gap: .5rem; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.choice span {
  display: inline-flex; align-items: center; min-height: 44px; padding: .5rem .9rem;
  border: 1.5px solid var(--rule); border-radius: var(--radius); background: var(--panel); font-weight: 600; font-size: .95rem;
}
.choice input:checked + span { border-color: var(--ink); background: var(--ink); color: var(--ground); }
.choice input:focus-visible + span { box-shadow: var(--focus-ring); }
.consent { font-size: .85rem; color: var(--ink-2); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { font-weight: 700; }
.form-status[data-state="error"] { color: var(--bad); }
.form-status[data-state="ok"] { color: var(--good); }

.tool { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (max-width: 900px) { .tool { grid-template-columns: 1fr; } }
.tool-inputs { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.4rem; }
.tool-inputs h2 { font-size: 1.3rem; }
.input-group { border-top: 1px solid var(--rule); padding-top: 1.1rem; margin-top: 1.1rem; display: grid; gap: .9rem; }
.input-group > h3 { font: 700 .78rem/1.3 var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--chalk-text); margin: 0; }
.with-unit { position: relative; }
.with-unit input { padding-right: 2.75rem; }
.with-unit .unit { position: absolute; right: .8rem; top: 50%; transform: translateY(-50%); font: 600 .9rem var(--body); color: var(--ink-2); pointer-events: none; }
.with-unit.prefix input { padding-left: 1.8rem; padding-right: .75rem; }
.with-unit.prefix .unit { left: .8rem; right: auto; }
.tool-result { position: sticky; top: 84px; }
.result-card { background: var(--ink); color: var(--ground); border-radius: var(--radius); padding: 1.5rem; }
.result-card .eyebrow { color: var(--asphalt-brand-ink); }
.result-card .eyebrow::before { border-color: var(--asphalt-brand-ink); }
.big-number { font: 800 clamp(2.75rem, 6vw, 4rem)/1 var(--display); margin: .2rem 0 .5rem; overflow-wrap: anywhere; }
.result-card .sub { color: color-mix(in srgb, var(--ground) 78%, var(--ink)); }
.result-rows { display: grid; gap: 0; margin-top: 1.25rem; border-top: 1px solid color-mix(in srgb, var(--ground) 25%, var(--ink)); }
.result-rows div { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid color-mix(in srgb, var(--ground) 25%, var(--ink)); font-size: .95rem; }
.result-rows dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.result-rows dt { color: color-mix(in srgb, var(--ground) 82%, var(--ink)); }
.result-card a { color: var(--asphalt-brand-ink); }
.result-card .btn { background: var(--asphalt-brand); border-color: var(--asphalt-brand); color: var(--on-brand); margin-top: 1.25rem; }
.result-card .btn:hover { background: var(--asphalt-brand-hover); border-color: var(--asphalt-brand-hover); color: var(--on-brand); }
.errors { color: var(--bad); font-weight: 600; }
.result-card .errors { color: var(--asphalt-brand-ink); }
details.math { margin-top: 1rem; font-size: .9rem; }
details.math summary { cursor: pointer; font-weight: 700; }
details.math pre, .code-out {
  font: 400 .85rem/1.5 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere;
  background: var(--panel-2); color: var(--ink); padding: 1rem; border-radius: var(--radius); margin: .5rem 0 0;
  max-height: 420px; overflow: auto;
}
.result-card details.math pre { background: color-mix(in srgb, var(--ground) 12%, var(--ink)); color: var(--ground); }

/* Self-check questions */
.check-list { list-style: none; padding: 0; margin: 0; counter-reset: q; }
.check-list > li { counter-increment: q; padding: 1.1rem 0; border-top: 1px solid var(--rule); margin: 0; }
.check-list > li > p { font-weight: 600; margin-bottom: .6rem; }
.check-list > li > p::before { content: counter(q, decimal-leading-zero) "  "; font: 800 .95rem var(--display); color: var(--chalk-text); }
.fix-list { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .75rem; }
.fix-list li { margin: 0; padding: .9rem 1rem; border-radius: var(--radius); background: color-mix(in srgb, var(--ground) 10%, var(--ink)); }
.fix-list strong { display: block; margin-bottom: .25rem; }
.fix-list .w { font: 700 .7rem/1 var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--asphalt-brand-ink); display: block; margin-bottom: .35rem; }

/* AI check grid */
.check-grid { width: 100%; }
.check-grid td, .check-grid th { padding: .5rem .55rem; }
.check-grid td.c { text-align: center; }
.check-grid input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--brand); }
.prompt-text { display: flex; gap: .5rem; align-items: flex-start; justify-content: space-between; }
.copy-btn { flex: none; font: 700 .75rem var(--body); letter-spacing: .04em; text-transform: uppercase; background: none; border: 1px solid var(--rule); color: var(--ink); border-radius: var(--radius); padding: .35rem .5rem; cursor: pointer; min-height: 32px; }
.copy-btn:hover { border-color: var(--ink); }
.tabs { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1rem; }
.tabs button { font: 600 .9rem var(--body); padding: .55rem .9rem; min-height: 44px; border: 1.5px solid var(--rule); background: var(--panel); color: var(--ink); border-radius: var(--radius); cursor: pointer; }
.tabs button[aria-selected="true"] { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.out-head { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; margin-top: 1rem; }

/* Prose pages */
.prose { max-width: 720px; }
.prose h2 { margin-top: 2.2rem; font-size: clamp(1.4rem, 3vw, 1.9rem); }
.prose h3 { margin-top: 1.6rem; }

/* ---------- Footer ---------- */
.site-footer { padding: 4rem 0 calc(2rem + env(safe-area-inset-bottom)); font-size: .92rem; background: var(--ground); color: var(--ink-2); }
.site-footer .cols { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2rem; }
@media (max-width: 760px) { .site-footer .cols { grid-template-columns: 1fr 1fr; } }
.site-footer h2 { font: 700 13px/16px var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); margin-bottom: .8rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer a { color: var(--ink); text-decoration: none; font-weight: 500; }
.site-footer a:hover { color: var(--brand-ink); }
.site-footer .fine { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.theme-toggle { background: none; border: 1px solid var(--line-strong); color: var(--ink-2); font: 600 .8rem var(--body); padding: .4rem .7rem; border-radius: var(--radius); cursor: pointer; min-height: 36px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  .site-header, .site-footer, .cta-band, .actions { display: none; }
  body { background: #fff; color: #000; }
}

.grid-figure svg { max-width: 420px; display: block; margin: 0 auto; }
/* A row of controls that mixes buttons and a labeled select: everything sits on the same baseline
   and at the same height as an input. */
.control-bar { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; }
.control-bar .btn, .control-bar select { min-height: 46px; }
.control-bar .field { min-width: 9rem; }

/* Roof plan on phones: the SVG scales down, so its text has to start bigger to stay readable. */
@media (max-width: 640px) {
  .roofplan .plan-letter { font-size: 40px; }
  .roofplan .plan-label { font-size: 22px; }
  .roofplan .plan-small { font-size: 15px; }
  .roofplan .plan-ridge-label { font-size: 15px; }
  .roofplan figcaption span:last-child { display: none; }
}
/* Plan schedules: what each month costs, so founding vs standard can't be misread. */
.schedule { margin: .75rem 0 1rem; display: grid; gap: 0; border-top: 1px solid var(--rule); font-size: .92rem; }
.schedule div { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid var(--rule); }
.schedule dt { color: var(--ink-2); }
.schedule dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
.schedule .founding dt, .schedule .founding dd { color: var(--chalk-text); }
.payback { margin: 1rem 0; }
.payback-out { border-color: var(--rule); }
.payback-out div { border-color: var(--rule); }
.payback-out dt { color: var(--ink-2); }
.field-error { color: var(--bad); font-weight: 600; font-size: .85rem; }
.opt { font-weight: 400; color: var(--ink-2); font-size: .85rem; }
.form-status p { margin: .25rem 0 0; font-weight: 600; }
.presets { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.presets .btn[aria-pressed="true"] { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.fix-list .steps { margin: .6rem 0 0; padding-left: 1.2rem; font-size: .9rem; }
.fix-list .steps li { margin-bottom: .35rem; }
.result-card .copy-list { margin-top: 1rem; color: var(--ground); border-color: var(--ground); background: transparent; }
.result-card .copy-list:hover { background: var(--ground); color: var(--ink); }
.warn-list { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .5rem; }
.warn-list:empty { display: none; }
.warn-list li { margin: 0; padding: .7rem .9rem; border: 2px solid var(--bad); border-radius: var(--radius); color: var(--ink); font-size: .92rem; }
.warn-list li::before { content: "Change this: "; font-weight: 700; color: var(--bad); }
/* AI check on phones: each question becomes a card with five labeled toggles, so nothing is off-screen. */
@media (max-width: 640px) {
  .check-wrap { overflow: visible; border: 0; background: none; }
  .check-grid thead { position: absolute; left: -9999px; }
  .check-grid, .check-grid tbody, .check-grid tr { display: block; width: 100%; }
  .check-grid tr { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); margin-bottom: .75rem; padding: .75rem; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .4rem; }
  .check-grid td { display: block; border: 0; padding: 0; }
  .check-grid td:first-child { grid-column: 1 / -1; margin-bottom: .4rem; }
  .check-grid td.c { display: flex; flex-direction: column; align-items: center; gap: .3rem; font: 600 .68rem/1.1 var(--body); color: var(--ink-2); text-align: center; }
  .check-grid td.c::before { content: attr(data-engine); }
  .check-grid input[type="checkbox"] { width: 28px; height: 28px; }
}
.fix-list .more-link { display: inline-block; margin-top: .5rem; color: var(--asphalt-brand-ink); font-weight: 600; }
details.more-q { border: 1px solid var(--rule); border-radius: var(--radius); padding: .25rem 1rem; }
details.more-q > summary { cursor: pointer; font-weight: 700; padding: .75rem 0; }
details.more-q[open] { padding-bottom: 1rem; }
details.more-q[open] > summary { margin-bottom: .5rem; }
details.more-q .row + .row { margin-top: 1rem; }
/* Handover checklist */
.tool--wide { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
@media (max-width: 1000px) { .tool--wide { grid-template-columns: 1fr; } }
.ho-item { display: grid; gap: .5rem; padding: .85rem 0; border-top: 1px solid var(--rule); }
.input-group > h3 + .ho-item { border-top: 0; padding-top: .25rem; }
.ho-name strong { display: block; }
.ho-ctrls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: .5rem; align-items: start; }
@media (max-width: 640px) { .ho-ctrls { grid-template-columns: 1fr; } }
.print-only { display: none; }
@media print {
  .no-print, .page-hero, .cta-band { display: none !important; }
  .print-only { display: block; }
  .handover-print { font: 11pt/1.5 var(--mono); white-space: pre-wrap; margin: 0; padding: 0; background: none; color: #000; }
}
.ho-name .hint { display: block; font-size: .88rem; color: var(--ink-2); margin-top: .15rem; }

/* ---------- Compare table ---------- */
.compare { min-width: 1100px; font-size: .9rem; }
.compare th, .compare td { vertical-align: top; }
.compare tbody th { width: 11rem; font-family: var(--body); font-size: .95rem; font-weight: 700; text-transform: none; letter-spacing: 0; }
.compare tr.us { box-shadow: inset 4px 0 0 var(--chalk); }

/* Product screenshots (_includes/product-shot.html): always labeled as sample data. */
.shot { margin: 1.5rem 0 0; }
.shot img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow); background: var(--panel); }
.shot--phone img { max-width: 320px; margin: 0 auto; }
.shot figcaption { font-size: .875rem; color: var(--ink-2); margin-top: .6rem; }
.shot__label { font: 700 .7rem/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--chalk-text); margin-right: .4rem; }