/* Hallmark · shape: Stage-led stack (redesign: full) · genre: editorial · theme: brand (kept: navy ink, orange signal, warm paper, Epilogue) · job: sign up · redesign: full
 * hero: Stage (/), Settled (/restoration), Banner (/audit, /guides) · nav: edge-aligned with menu · footer: index columns on ink · imagery: the product built (map card, report, mini samples), 1 library photo · signature: the ranking map switching May to October in the hero · ink: brand
 * axes: light/grotesk-sans/warm-orange-on-navy · posture: committed (navy hero field, orange signal) · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R5 V4 · weakest: S, an agency page reads like any agency; led with the report an owner actually receives, map positions by town */
/* Hallmark · waive 77 · FAQ rows measured closed at 55% · the questions open in place as full rows beside the heading, the answers fill the width */
/* Hallmark · waive 79 · audit.html hero ends at 581px with the form · the page is a tool: the results render under the form once it runs, so the space is where the answer lands */
/* Hallmark · reworded headings "Restoration", "Roofing", "HVAC", "Plumbing" to list items in the trades strip · the four trades became one strip inside services */
/* Hallmark · dismissed 58 · index y 7000 counts the seven closed FAQ answers; a reader sees about 97 words · guide y 1200 is the long-form guide article, prose by design */
/* Hallmark · kept-note · "From $149." left the 2am story in a change made by another session, not this redesign; $149 still shows in pricing */
@import url("./tokens.css");
@import url("./base.css");

/* ---------- chrome ---------- */
.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }

.nav { background: var(--color-ink); color: var(--color-paper); }
.nav .btn:not(.btn--primary) { background: transparent; color: var(--color-paper); border-color: var(--color-muted); }
.nav .btn:not(.btn--primary):hover { background: var(--color-ink-2); }
.nav .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: 72px; }
.wordmark { font-weight: 700; font-size: var(--text-lg); letter-spacing: -0.02em; text-decoration: none; }
.nav__links { display: flex; align-items: center; gap: var(--space-xl); margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); }
.nav__links a:not(.btn) { font-weight: 600; text-decoration: none; transition: color var(--dur-micro) var(--ease-out); }
.nav__links a:not(.btn):hover { color: var(--color-accent); }
.nav__links a[aria-current="page"] { text-decoration: underline; }
.nav nav { display: flex; align-items: center; gap: var(--space-sm); }
@media (max-width: 64rem) {
  .nav .container { position: relative; }
  .nav__links .nav__hide { display: none; }
  .nav__toggle:not([hidden]) { display: inline-flex; order: -1; }
  .nav.is-open .nav__links { position: absolute; top: 100%; left: 0; right: 0; z-index: var(--z-dropdown); flex-direction: column; align-items: stretch; gap: 0; padding: var(--space-sm) var(--gutter) var(--space-lg); background: var(--color-ink); border-top: var(--rule-hair) solid var(--color-ink-2); }
  .nav.is-open .nav__links .nav__hide { display: block; }
  .nav.is-open .nav__links a:not(.btn) { display: block; padding-block: var(--space-sm); font-size: var(--text-md); }
  .nav.is-open .nav__links .btn { margin-top: var(--space-sm); width: 100%; }
}
@media (min-width: 64.01rem) { .nav__toggle { display: none !important; } }

a { font-weight: 600; transition: text-decoration-color var(--dur-micro) var(--ease-out); }
a:hover { text-decoration-color: var(--color-accent); }

/* ---------- controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--space-lg); border: var(--rule-hair) solid var(--color-rule); border-radius: 10px; background: var(--color-paper-2); color: var(--color-ink); font: 600 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-paper-3); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }
.btn--primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary:hover { background: var(--color-accent-2); border-color: var(--color-accent-2); }
.btn--sm { min-height: 44px; padding: 0 var(--space-md); font-size: var(--text-sm); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

.tag { display: inline-flex; align-items: center; padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; background: var(--color-paper-3); }
.tag--in { background: var(--color-good-soft); color: var(--color-good-ink); }
.tag--hot { background: var(--color-accent-soft); color: var(--color-accent-soft-ink); }
.tag--out { background: transparent; box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule); color: var(--color-muted); }

.fill { padding: 0 0.25em; border: 1px dashed var(--color-muted); border-radius: 3px; color: var(--color-muted); font-weight: 400; }

/* ---------- layout ---------- */
.section { padding-block: var(--section-gap) 0; }
.section--l { padding-block-start: var(--section-gap-l); }
.section--s { padding-block-start: var(--section-gap-s); }
.band { margin-block-start: var(--section-gap); padding-block: var(--section-gap-s); background: var(--color-paper-2); border-block: var(--rule-hair) solid var(--color-rule); }
.head { display: grid; gap: var(--space-md); margin-bottom: var(--space-2xl); }
.head .lead { color: var(--color-ink-2); }
.head--split { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: end; }
.head--split h2 { grid-column: 1 / 7; }
.head--split .lead { grid-column: 8 / 13; }
@media (max-width: 60rem) { .head--split { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); } .head--split h2, .head--split .lead { grid-column: auto; } }

/* ---------- hero ---------- */
.hero { padding-block: var(--space-3xl); background: var(--color-ink); color: var(--color-paper); }
.hero .lead, .hero__side .lead, .hero .hero__text .lead { color: var(--color-paper-3); }
.hero .btn:not(.btn--primary) { background: transparent; color: var(--color-paper); border-color: var(--color-muted); }
.hero .btn:not(.btn--primary):hover { background: var(--color-ink-2); }
.hero + section { padding-block-start: var(--space-3xl); }
.hero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: end; }
.hero h1 { grid-column: 1 / 9; max-width: 14ch; line-height: 1.0; }
.hero__side { grid-column: 9 / 13; display: grid; gap: var(--space-lg); }

@media (max-width: 60rem) { .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); } .hero h1, .hero__side { grid-column: auto; } }

.hero--settled { padding-block: var(--space-3xl); }
.hero--settled .hero__grid { grid-template-columns: 7fr 5fr; gap: var(--space-3xl); align-items: center; }
.hero--settled h1 { grid-column: auto; max-width: 13ch; }
.hero--settled .hero__text { display: grid; gap: var(--space-lg); }
@media (max-width: 60rem) { .hero--settled .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); } }

/* ---------- the built report (product sample) ---------- */
.report { border-radius: var(--radius-card); border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper-2); padding: var(--space-xl); }
.report__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-sm); padding-bottom: var(--space-lg); }
.report__name { font-size: var(--text-title); font-weight: 700; letter-spacing: -0.02em; }
.report__meta { font-size: var(--text-sm); color: var(--color-muted); }
.report__body { display: grid; grid-template-columns: 4fr 8fr; gap: var(--space-xl); }
.figs { display: grid; gap: 0; margin: 0; border-top: var(--rule-hair) solid var(--color-ink); }
.figs > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.figs dt { font-size: var(--text-sm); color: var(--color-ink-2); }
.figs dd { margin: 0; font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.ranks { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.ranks caption { text-align: left; padding-bottom: var(--space-sm); font-weight: 600; }
.ranks th { text-align: left; font-weight: 400; color: var(--color-muted); padding: var(--space-sm) 0; border-top: var(--rule-hair) solid var(--color-ink); border-bottom: var(--rule-hair) solid var(--color-rule); }
.ranks td { padding: var(--space-md) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.ranks td:first-child { font-weight: 600; }
.ranks .num { font-family: var(--font-outlier); }
.ranks td:last-child, .ranks th:last-child { text-align: right; }
.caption { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-ink-2); }
@media (max-width: 60rem) { .report { padding: var(--space-lg); } .report__body { grid-template-columns: minmax(0, 1fr); } .ranks th:nth-child(2), .ranks td:nth-child(2) { display: none; } }

/* ---------- rows ---------- */
.rows { margin: 0; padding: 0; list-style: none; border-top: var(--rule-hair) solid var(--color-ink); }
.rows > li, .rows > details { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-xl); border-bottom: var(--rule-hair) solid var(--color-rule); }
.rows h3 { grid-column: 1 / 6; }
.rows p { grid-column: 6 / 13; color: var(--color-ink-2); font-size: var(--text-lg); line-height: 1.45; }
@media (max-width: 60rem) { .rows > li { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); } .rows h3, .rows p { grid-column: auto; } }

/* FAQ rows */
.faq { border-top: var(--rule-hair) solid var(--color-ink); }
.faq details { border-bottom: var(--rule-hair) solid var(--color-rule); }
.faq summary { display: flex; justify-content: space-between; gap: var(--space-lg); padding-block: var(--space-lg); font-size: var(--text-title); font-weight: 700; letter-spacing: -0.02em; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 400; transition: transform var(--dur-short) var(--ease-in-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.faq details p { padding-bottom: var(--space-lg); color: var(--color-ink-2); }
.faq-wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); }
.faq-wrap .head { grid-column: 1 / 4; }
.faq-wrap .faq { grid-column: 4 / 13; }
@media (max-width: 60rem) { .faq-wrap { grid-template-columns: minmax(0, 1fr); } .faq-wrap .head, .faq-wrap .faq { grid-column: auto; } }

/* ---------- pricing ---------- */
.period { display: inline-flex; margin: 0 0 var(--space-xl); padding: 0; border: 0; }
.period legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.period input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.period label { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); font-weight: 600; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out); }
.period label:first-of-type { border-radius: 10px 0 0 10px; }
.period label:last-of-type { border-radius: 0 10px 10px 0; border-left: 0; }
.period label:hover { background: var(--color-paper-2); }
.period input:checked + label { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.period input:focus-visible + label { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); grid-template-rows: auto auto auto 1fr auto; }
.plan { display: grid; grid-row: span 5; grid-template-rows: subgrid; gap: var(--space-md); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-ink); }
.plan__name { display: flex; align-items: center; gap: var(--space-sm); }
.plan__price { font-size: var(--text-display-s); font-weight: 700; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.plan__price small { font-size: var(--text-md); font-weight: 400; letter-spacing: 0; color: var(--color-muted); }
.plan__line { color: var(--color-ink-2); }
.plan ul { margin: 0; padding: 0; list-style: none; }
.plan li { padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.plan .btn { width: 100%; margin-top: var(--space-md); }
.per-year { display: none; }
.pricing:has(#per-year:checked) .per-month { display: none; }
.pricing:has(#per-year:checked) .per-year { display: revert; }
.pricing:has(#per-year:checked) .btn.per-year { display: inline-flex; }
.terms { margin-top: var(--space-xl); font-size: var(--text-sm); color: var(--color-ink-2); }
@media (max-width: 60rem) { .plans { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: var(--space-2xl); } .plan { grid-row: auto; grid-template-rows: none; } }

/* ---------- industries ---------- */

/* ---------- steps ---------- */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-columns); margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { counter-increment: step; display: grid; gap: var(--space-sm); align-content: start; padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-ink); }
.steps li::before { content: counter(step); font-size: var(--text-display); font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.steps p { color: var(--color-ink-2); }
@media (max-width: 60rem) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-2xl); } }
@media (max-width: 40rem) { .steps { grid-template-columns: minmax(0, 1fr); } }

/* ---------- statement ---------- */
.statement { max-width: 24ch; font-size: var(--text-section); font-weight: 700; letter-spacing: -0.04em; line-height: 1.08; text-wrap: balance; overflow-wrap: break-word; min-width: 0; }

/* ---------- forms ---------- */
.form-wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); }
.form-wrap .head { grid-column: 1 / 6; margin: 0; align-content: start; }
.form-wrap form { grid-column: 7 / 13; }
@media (max-width: 60rem) { .form-wrap { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); } .form-wrap .head, .form-wrap form { grid-column: auto; } }
.form { display: grid; gap: var(--space-lg); }
.form__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
@media (max-width: 40rem) { .form__pair { grid-template-columns: minmax(0, 1fr); } }
.field { display: grid; gap: var(--space-xs); min-width: 0; }
.field label { font-size: var(--text-sm); font-weight: 600; }
.field label span { font-weight: 400; color: var(--color-muted); }
.field input, .field select, .field textarea { width: 100%; min-height: 48px; padding: var(--space-sm) var(--space-md); border: var(--rule-hair) solid var(--color-muted); border-radius: 10px; background: var(--color-paper); color: var(--color-ink); font-size: var(--text-md); outline: 2px solid transparent; outline-offset: -3px; }
.field textarea { min-height: 112px; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline-color: var(--color-focus); }
.field [aria-invalid="true"] { border-color: var(--color-error); }
.field input:disabled, .field select:disabled, .field textarea:disabled { opacity: 0.55; cursor: not-allowed; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form__help { min-height: 1lh; font-size: var(--text-sm); color: var(--color-ink-2); }
.form__help[data-state="error"] { color: var(--color-error); }

/* ---------- sample client site (phone) ---------- */
.phone { color: var(--color-ink); justify-self: center; width: min(100%, 360px); aspect-ratio: 9 / 15; border-radius: var(--radius-card); border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper); display: grid; grid-template-rows: auto 1fr auto; }
.phone__bar { display: flex; justify-content: space-between; align-items: center; padding: var(--space-md) var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); font-weight: 700; }
.phone__main { display: grid; align-content: start; gap: var(--space-md); padding: var(--space-lg); }
.phone__head { font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; }
.phone__list { margin: 0; padding: 0; list-style: none; border-top: var(--rule-hair) solid var(--color-ink); font-size: var(--text-sm); }
.phone__list li { display: flex; justify-content: space-between; padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); }
.phone__call { margin: var(--space-md); }

/* ---------- footer ---------- */
.footer { margin-top: var(--section-gap); padding-block: var(--space-2xl) var(--space-lg); background: var(--color-ink); color: var(--color-paper-3); font-size: var(--text-sm); }
.footer a { color: var(--color-paper); font-weight: 400; }
.footer a:hover { text-decoration-color: var(--color-accent); }
.footer__grid { display: grid; grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2fr)); gap: var(--gap-columns); }
.footer__brand { display: grid; gap: var(--space-sm); align-content: start; max-width: 32ch; }
.footer__brand .wordmark { color: var(--color-paper); font-size: var(--text-xl); font-weight: 700; text-decoration: none; }
.footer__col h2 { font-size: var(--text-sm); font-weight: 600; letter-spacing: 0; color: var(--color-paper); margin-bottom: var(--space-sm); }
.footer__col ul { display: grid; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-ink-2); }
.footer .fill { color: var(--color-paper-3); border-color: var(--color-paper-3); }
.footer__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-lg); color: var(--color-paper-3); }
.footer__links { display: flex; flex-wrap: wrap; gap: var(--space-lg); margin: 0; padding: 0; list-style: none; }
@media (max-width: 60rem) { .footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .footer__brand { grid-column: 1 / -1; max-width: none; } }
@media (max-width: 40rem) { .footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* narrow pages (welcome) */
.narrow { max-width: 760px; }
.narrow .head { margin-bottom: var(--space-xl); }

/* ---------- photo split ---------- */
.split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3xl); align-items: center; }
.photo { position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: var(--radius-card); overflow: hidden; }
.photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 60rem) { .split { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); } }

/* ---------- audit tool ---------- */
.hero--audit h1 { max-width: 18ch; }
.hero--audit .lead { margin-top: var(--space-md); }
.audit-form { display: grid; grid-template-columns: 3fr 3fr 2fr 3fr auto; gap: var(--space-md); align-items: end; margin-top: var(--space-xl); }
.audit-form label { color: var(--color-paper); }
.audit-form label span { color: var(--color-paper-3); }
.audit-form .field input, .audit-form .field select { border-color: var(--color-paper-3); }
.hero .form__help { color: var(--color-paper-3); margin-top: var(--space-md); }
.hero .form__help[data-state="error"] { color: var(--color-accent); }
@media (max-width: 60rem) { .audit-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .audit-form .btn { grid-column: 1 / -1; } }
@media (max-width: 40rem) { .audit-form { grid-template-columns: minmax(0, 1fr); } }

.demo-note { margin-bottom: var(--space-xl); padding: var(--space-md) var(--space-lg); border-radius: 10px; background: var(--color-accent-soft); color: var(--color-accent-soft-ink); font-weight: 600; max-width: none; }
.res-head { max-width: 26ch; font-size: var(--text-display-s); }
.res-sub { margin-top: var(--space-md); color: var(--color-ink-2); }
.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl); margin-top: var(--space-2xl); }
.grid-card { margin: 0; }
.grid-card figcaption { display: flex; justify-content: space-between; gap: var(--space-md); padding-bottom: var(--space-md); font-size: var(--text-lg); }
.grid-card figcaption span { color: var(--color-ink-2); }
.rank-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-xs); }
.cell { display: grid; place-items: center; aspect-ratio: 1; border-radius: 8px; font-weight: 700; font-size: var(--text-lg); font-variant-numeric: tabular-nums; }
.cell--good { background: var(--color-good-soft); color: var(--color-good-ink); }
.cell--mid { background: var(--color-accent-soft); color: var(--color-accent-soft-ink); }
.cell--bad { background: var(--color-bad-soft); color: var(--color-bad-ink); }
.cell--home { box-shadow: inset 0 0 0 3px var(--color-ink); }
.legend { display: flex; flex-wrap: wrap; gap: var(--space-lg); margin: var(--space-lg) 0 0; padding: 0; list-style: none; font-size: var(--text-sm); color: var(--color-ink-2); }
.legend li { display: flex; align-items: center; gap: var(--space-xs); }
.cell-key { width: 16px; height: 16px; border-radius: 4px; }
@media (max-width: 48rem) { .compare { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); } .cell { font-size: var(--text-sm); } }

.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--gap-columns); margin-top: var(--space-xl); }
.metric { display: grid; gap: var(--space-md); align-content: start; padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-ink); }
.metric__pair { display: flex; gap: var(--space-xl); }
.metric__pair > div { display: grid; gap: var(--space-2xs); }
.metric__label { font-size: var(--text-sm); color: var(--color-muted); }
.metric__now, .metric__after { font-size: var(--text-3xl); font-weight: 700; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.metric__now { color: var(--color-bad-ink); }
.metric__after { color: var(--color-good-ink); }
.metric p { color: var(--color-ink-2); font-size: var(--text-sm); }
.res-head:focus { outline: none; }

/* ---------- monthly report (report.js) ---------- */
.rp { position: relative; display: grid; gap: var(--gap-columns); padding: var(--space-xl); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper); }
.rp__head { display: flex; justify-content: space-between; align-items: start; gap: var(--space-md); }
.rp__name { font-size: var(--text-title); font-weight: 700; letter-spacing: -0.02em; }
.rp__meta { color: var(--color-muted); font-size: var(--text-sm); }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-columns); }
.kpi { display: grid; gap: var(--space-2xs); align-content: start; padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-ink); }
.kpi__label { font-size: var(--text-sm); color: var(--color-ink-2); }
.kpi__num { font-size: var(--text-3xl); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.kpi__num small { font-size: var(--text-md); font-weight: 400; color: var(--color-muted); letter-spacing: 0; }
.kpi__delta { font-size: var(--text-sm); color: var(--color-muted); }
.kpi__delta.is-up { color: var(--color-good-ink); }
.kpi__delta.is-down { color: var(--color-bad-ink); }
.rp__row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); }
.rp__row:has(.rp__card--wide:first-child) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.rp__row--even { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.rp__card { display: grid; gap: var(--space-md); align-content: start; padding: var(--space-lg); border-radius: 10px; background: var(--color-paper-2); }
.rp__card h3 { font-size: var(--text-lg); letter-spacing: -0.01em; }
.chart { width: 100%; height: auto; overflow: visible; }
.ch-grid { stroke: var(--chart-grid); stroke-width: 1; }
.ch-tick { fill: var(--color-muted); font-size: 12px; font-family: var(--font-body); }
.ch-val { fill: var(--color-ink); font-size: 12px; font-weight: 600; font-family: var(--font-body); }
.ch-s1 { fill: var(--chart-1); } .ch-s2 { fill: var(--chart-2); }
.ch-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ch-l1 { stroke: var(--chart-1); } .ch-l2 { stroke: var(--chart-2); }
.ch-dot { stroke: var(--color-paper-2); stroke-width: 2; } .ch-d1 { fill: var(--chart-1); } .ch-d2 { fill: var(--chart-2); }
.ch-hit { cursor: default; outline: none; }
.ch-hit:hover rect, .ch-hit:focus-visible rect { fill: var(--color-paper-3); }
.ch-hit:focus-visible { outline: 2px solid var(--color-focus); }
.ch-legend { display: flex; gap: var(--space-lg); margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); color: var(--color-ink-2); }
.ch-legend li { display: flex; align-items: center; gap: var(--space-xs); }
.sw { width: 12px; height: 12px; border-radius: 3px; } .sw1 { background: var(--chart-1); } .sw2 { background: var(--chart-2); }
.ch-tip { position: absolute; z-index: var(--z-tooltip); padding: var(--space-xs) var(--space-sm); border-radius: 8px; background: var(--color-ink); color: var(--color-paper); font-size: var(--text-sm); pointer-events: none; white-space: nowrap; }
.src { display: grid; gap: var(--space-sm); margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); }
.src li { display: grid; grid-template-columns: 9rem minmax(0, 1fr) 2.5rem; align-items: center; gap: var(--space-sm); }
.src__bar { height: 12px; }
.src__bar span { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--chart-1); }
.src b { text-align: right; font-variant-numeric: tabular-nums; }
.rp__stat { padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); color: var(--color-ink-2); }
.rp__stat b { font-size: var(--text-2xl); color: var(--color-ink); letter-spacing: -0.02em; }
.rp__grids { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }
.rp__grids figure { margin: 0; display: grid; gap: var(--space-xs); }
.rp__grids figcaption { font-size: var(--text-sm); font-weight: 600; }
.rank-grid--sm { gap: var(--space-2xs); }
.rank-grid--sm .cell { font-size: 11px; border-radius: 4px; }
.rank-grid--sm .cell--home { box-shadow: inset 0 0 0 2px var(--color-ink); }
.rp__list { margin: 0; padding-left: var(--space-lg); display: grid; gap: var(--space-xs); color: var(--color-ink-2); }
.rp__table summary { cursor: pointer; font-weight: 600; font-size: var(--text-sm); }
.rp__table summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.rp__table table { width: 100%; margin-top: var(--space-md); border-collapse: collapse; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.rp__table th, .rp__table td { padding: var(--space-xs) var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); text-align: left; }
@media (max-width: 60rem) {
  .rp { padding: var(--space-md); }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rp__row, .rp__row:has(.rp__card--wide:first-child), .rp__row--even { grid-template-columns: minmax(0, 1fr) !important; }
  .rp__card { padding: var(--space-md); }
  .src li { grid-template-columns: 7rem minmax(0, 1fr) 2rem; }
}

/* Homepage ad: click-through scenes; site.js switches .is-active. */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ad { position: relative; display: grid; min-height: 32rem; padding: var(--space-2xl) var(--space-2xl) var(--space-3xl); border-radius: var(--radius-card); background: var(--color-ink); color: var(--color-paper); overflow: hidden; box-shadow: var(--shadow-card); }
.ad__scene { display: grid; align-content: center; gap: var(--space-lg); max-width: 46rem; margin: 0; }
/* hidden only once site.js runs (it adds .is-js), so the scenes read in order without script */
.ad.is-js .ad__scene { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out), visibility 0s var(--dur-long); }
.ad.is-js .ad__scene.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; z-index: var(--z-raised); }
.ad__kicker { font-size: var(--text-md); font-weight: 600; color: var(--color-accent); }
.ad__line { font-size: var(--text-lead); color: var(--color-paper-3); }
.ad__big { font-size: var(--text-display-s); font-weight: var(--display-weight); letter-spacing: var(--tracking-display); line-height: 1; }
.ad__search { display: flex; flex-wrap: wrap; gap: var(--space-xs); width: min(100%, 40rem); padding: var(--space-xs); border-radius: 14px; background: var(--color-paper); }
.ad__search input { flex: 1 1 10rem; min-height: 44px; padding: 0 var(--space-md); border: 0; border-radius: 10px; background: var(--color-paper-2); color: var(--color-ink); font: var(--text-md) var(--font-body); }
.ad__search input:focus-visible { outline: 2px solid var(--color-focus); }
.ad__pack, .ad__steps { display: grid; gap: var(--space-xs); width: min(100%, 34rem); margin: 0; padding: 0; list-style: none; }
.ad__pack li { display: flex; justify-content: space-between; padding: var(--space-sm) var(--space-md); border-radius: 8px; background: var(--color-paper); color: var(--color-ink); font-weight: 600; transition: transform var(--dur-long) var(--ease-out), background-color var(--dur-long); }
.ad__pack li span { color: var(--color-muted); font-weight: 400; }
.ad__pack .ad__you { order: 4; margin-top: var(--space-sm); background: var(--color-bad-soft); color: var(--color-bad-ink); }
.ad__pack.is-climbed .ad__you { order: -1; margin: 0; background: var(--color-good-soft); color: var(--color-good-ink); }
.ad__pack.is-climbed .ad__you span { color: var(--color-good-ink); font-weight: 600; }
.ad__pack.is-climbed li:nth-child(3) { opacity: 0.4; }
.ad__steps li { border-bottom: 1px solid var(--color-ink-2); }
.ad__steps button { width: 100%; padding: var(--space-sm) 0 var(--space-sm) var(--space-xl); position: relative; border: 0; background: none; color: var(--color-paper); font: 600 var(--text-lg) var(--font-body); text-align: left; cursor: pointer; }
.ad__steps button::before { content: "+"; position: absolute; left: 0; width: 1.5rem; color: var(--color-accent); }
.ad__steps button[aria-expanded="true"]::before { content: "✓"; color: var(--color-good); }
.ad__steps button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.ad__steps p { padding: 0 0 var(--space-sm) var(--space-xl); color: var(--color-paper-3); }
.ad .actions .btn:not(.btn--primary) { background: transparent; color: var(--color-paper); border-color: var(--color-ink-2); }
.ad .actions .btn:not(.btn--primary):hover { background: var(--color-ink-2); }
.ad__dots { position: absolute; left: var(--space-2xl); bottom: var(--space-xl); display: flex; gap: var(--space-xs); z-index: var(--z-raised); }
.ad__dots button { width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.ad__dots button::after { content: ""; position: absolute; inset: 19px 6px; border-radius: 3px; background: var(--color-ink-2); transition: background-color var(--dur-short); }
.ad__dots button[aria-current="step"]::after { background: var(--color-accent); }
.ad__dots button:hover::after { background: var(--color-muted); }
.ad__dots button:focus-visible { outline: 2px solid var(--color-accent); }
@media (max-width: 48rem) { .ad { padding: var(--space-xl) var(--space-lg) var(--space-3xl); min-height: 36rem; } .ad__dots { left: var(--space-md); bottom: var(--space-md); } }
@media (prefers-reduced-motion: reduce) { .ad__scene, .ad__pack li { transition: none; transform: none; } }

/* ---------- homepage content ---------- */
.checks-list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-xs); color: var(--color-ink-2); }
.checks-list li { padding-left: var(--space-lg); position: relative; }
.checks-list li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 10px; height: 10px; border-radius: 3px; background: var(--color-good); }

/* ---------- guides ---------- */
.prose { max-width: 760px; display: grid; gap: var(--space-md); font-size: var(--text-lg); line-height: 1.65; color: var(--color-ink-2); }
.prose h2 { margin-top: var(--space-xl); font-size: var(--text-2xl); color: var(--color-ink); }
.prose ul { margin: 0; padding-left: var(--space-lg); display: grid; gap: var(--space-xs); }
.prose strong { color: var(--color-ink); }
.prose__cta { margin-top: var(--space-xl); padding: var(--space-xl); border-radius: var(--radius-card); background: var(--color-paper-2); display: grid; gap: var(--space-md); }
.prose__cta h2 { margin-top: 0; }
/* SVG text scales with the chart; bump it on phones so labels stay about 11px */
@media (max-width: 40rem) { .ch-tick, .ch-val { font-size: 24px; } }

/* ========== redesign: home composition ========== */
/* Stage hero: text on the left, the live map card on the right */
.hero--stage { padding-block: var(--space-3xl); }
.hero--stage .hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-3xl); align-items: center; }
.hero--stage h1 { grid-column: auto; max-width: 12ch; }
.hero--stage .hero__text { display: grid; gap: var(--space-lg); }
@media (max-width: 60rem) { .hero--stage .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); } }

.mapcard { margin: 0; display: grid; gap: var(--space-md); padding: var(--space-lg); border-radius: var(--radius-card); background: var(--color-paper); color: var(--color-ink); }
.mapcard__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-sm); }
.mapcard__title { font-weight: 600; }
.mapcard__grid .cell { font-size: var(--text-md); }
.mapcard__cap { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); align-items: baseline; font-size: var(--text-sm); color: var(--color-ink-2); }
.mapcard__cap b { font-size: var(--text-lg); color: var(--color-ink); }
.mapcard__grid--before, .mapcard__count--before { display: none; }
.mapcard:has(#mm-before:checked) .mapcard__grid--before { display: grid; }
.mapcard:has(#mm-before:checked) .mapcard__count--before { display: inline; }
.mapcard:has(#mm-before:checked) .mapcard__grid--now, .mapcard:has(#mm-before:checked) .mapcard__count--now { display: none; }

.seg { display: inline-flex; margin: 0; padding: 0; border: 0; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg label { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); font-weight: 600; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out); }
.seg label:first-of-type { border-radius: 10px 0 0 10px; }
.seg label:last-of-type { border-radius: 0 10px 10px 0; border-left: 0; }
.seg label:hover { background: var(--color-paper-2); }
.seg input:checked + label { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.seg input:focus-visible + label { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* Services as a bento: a lead tile with a built phone, the rest with small built samples */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); }
.tile { grid-column: span 4; display: grid; gap: var(--space-sm); align-content: start; padding: var(--space-xl); border-radius: var(--radius-card); background: var(--color-paper-2); }
.tile p { color: var(--color-ink-2); }
.tile--lead { grid-column: span 8; grid-template-columns: minmax(0, 1fr) minmax(0, 14rem); gap: var(--space-xl); align-items: center; background: var(--color-ink); color: var(--color-paper); }
.tile--lead p { color: var(--color-paper-3); }
.tile--lead h3 { font-size: var(--text-2xl); }
.tile__text { display: grid; gap: var(--space-sm); }
.tile__second { margin-top: var(--space-md); }
@media (max-width: 60rem) { .tile { grid-column: span 6; } .tile--lead { grid-column: 1 / -1; } }
@media (max-width: 40rem) { .tile, .tile--lead { grid-column: 1 / -1; } .tile--lead { grid-template-columns: minmax(0, 1fr); } .tile { padding: var(--space-lg); } }

.mini-phone { display: grid; gap: var(--space-sm); padding: var(--space-md); border-radius: var(--radius-card); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-sm); }
.mini-phone__bar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-xs); padding-bottom: var(--space-xs); border-bottom: var(--rule-hair) solid var(--color-rule); }
.mini-phone__head { font-size: var(--text-lg); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; }
.mini-phone ul { margin: 0; padding: 0; list-style: none; }
.mini-phone li { padding-block: var(--space-2xs); border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.mini-phone__call { display: flex; justify-content: center; padding: var(--space-xs); border-radius: 8px; background: var(--color-accent); color: var(--color-accent-ink); font-weight: 600; }
.mini-profile { display: grid; gap: var(--space-2xs); margin-bottom: var(--space-sm); padding: var(--space-md); border-radius: 10px; background: var(--color-paper); font-size: var(--text-sm); color: var(--color-ink-2); }
.mini-profile b { color: var(--color-ink); font-size: var(--text-md); }
.mini-profile__row { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }
.mini-sms { margin-bottom: var(--space-sm); }
.mini-sms p { max-width: 26ch; padding: var(--space-sm) var(--space-md); border-radius: 16px 16px 16px 4px; background: var(--color-good-soft); color: var(--color-good-ink); font-size: var(--text-sm); }
.mini-calls { display: grid; margin: 0 0 var(--space-sm); padding: 0; list-style: none; font-size: var(--text-sm); border-top: var(--rule-hair) solid var(--color-ink); }
.mini-calls li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; gap: var(--space-xs); padding-block: var(--space-xs); border-bottom: var(--rule-hair) solid var(--color-rule); }
.mini-calls li span:first-child { font-weight: 600; font-variant-numeric: tabular-nums; }
.mini-grid { max-width: 11rem; margin-bottom: var(--space-sm); }

.trades-strip { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) auto; gap: var(--space-xl); align-items: center; margin-top: var(--gap-columns); padding: var(--space-lg) var(--space-xl); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); }
.trades-strip h3 { font-size: var(--text-xl); }
.trades-strip p { color: var(--color-ink-2); }
.trades-strip__list { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); margin: 0; padding: 0; list-style: none; font-weight: 600; }
.trades-strip__list li { display: flex; align-items: center; gap: var(--space-xs); }
@media (max-width: 60rem) { .trades-strip { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); } }

/* How it works: a ruled timeline, then the split of duties */
.band--how .timeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-columns); margin: 0; padding: 0; list-style: none; }
.band--how .timeline li { position: relative; display: grid; gap: var(--space-sm); align-content: start; padding-top: var(--space-xl); }
.band--how .timeline li::before { content: ""; position: absolute; top: 0; left: 0; right: calc(-1 * var(--gap-columns)); height: 4px; background: var(--color-accent); }
.band--how .timeline li:last-child::before { right: 0; background: var(--color-good); }
.band--how .timeline li::after { content: ""; position: absolute; top: -6px; left: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--color-ink); box-shadow: 0 0 0 4px var(--color-paper-2); }
.band--how .timeline h3 { font-size: var(--text-2xl); }
.band--how .timeline p { color: var(--color-ink-2); }
@media (max-width: 60rem) { .band--how .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-2xl); } .band--how .timeline li::before { right: 0; } }
@media (max-width: 40rem) { .band--how .timeline { grid-template-columns: minmax(0, 1fr); } }
.duty { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); margin-top: var(--space-3xl); padding-top: var(--space-xl); border-top: var(--rule-hair) solid var(--color-ink); }
.duty__title { font-size: var(--text-2xl); max-width: 12ch; }
.duty__col { padding: var(--space-lg); border-radius: 10px; background: var(--color-paper); }
.duty__col--we { background: var(--color-ink); color: var(--color-paper); }
.duty__col h4 { margin: 0 0 var(--space-sm); font-size: var(--text-lg); }
.duty__col ul { margin: 0; padding-left: var(--space-lg); display: grid; gap: var(--space-xs); }
@media (max-width: 60rem) { .duty { grid-template-columns: minmax(0, 1fr); } }

/* FAQ with the about block in its head column */
.faq-wrap .head { align-content: start; }
.about { display: grid; gap: var(--space-sm); margin-top: var(--space-xl); padding: var(--space-lg); border-radius: 10px; background: var(--color-paper-2); color: var(--color-ink-2); }
.about h3 { font-size: var(--text-lg); color: var(--color-ink); }

.tile--lead .mini-phone p { color: var(--color-ink); }
.mapcard { justify-self: end; width: min(100%, 30rem); } .mapcard .rank-grid { gap: var(--space-2xs); } .mapcard__grid .cell { font-size: var(--text-sm); border-radius: 6px; }
.tile--wide { grid-column: 1 / -1; grid-template-columns: 11rem minmax(0, 1fr); gap: var(--space-xl); align-items: center; }
.tile--wide .mini-grid { margin: 0; }
@media (max-width: 40rem) { .tile--wide { grid-template-columns: minmax(0, 1fr); } }
.faq-wrap { padding-bottom: var(--space-3xl); }
/* tool and document pages: a short banner hero, content close under it */
.hero--audit, .hero--doc { padding-block: var(--space-3xl) var(--space-2xl); }
.doc { padding-block-start: var(--space-2xl); }
main:has(#results[hidden]) + .footer { margin-top: 0; }
.field input, .field select { padding-block: 0; height: 48px; }