/* Breezewold: airy sky blue, fresh sage, chalk white, dew-drop teal (brand guide stub, 23 Oct 2026).
   Calm and bright. WCAG AA: the light sky and sage tints are for backgrounds and decoration only; text and
   buttons use --green-ink, --link and --slate. Fonts self-hosted (Outfit display, Inter text). */
@font-face { font-family: "Outfit"; src: url("/assets/fonts/outfit-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
:root {
  --mist: #f3f7f8; --paper: #ffffff; --line: #d8e3e7; --line-2: #c0d0d6; --slate: #1f4250; --slate-2: #375a69; --ink: #1d323b; --muted: #4f6670;
  --green: #7fa58c; --green-ink: #2f6650; --stripe: #9fd3ea; --stripe-soft: #e3f2f8; --brown: #1d7a80; --brown-soft: #e1f3f3;
  --link: #1d6584; --burn: #35a7b5; --burn-soft: #e3f3f6;
  --good: #e2f1e8; --good-line: #2f6650; --maybe: #fbf1dc; --maybe-line: #85560a; --poor: #f6e6e1; --poor-line: #a1442f;
  --r-sm: 8px; --r: 12px; --r-lg: 18px; --gap: 1rem; --wrap: 72rem;
  --shadow: 0 1px 2px rgba(31,66,80,.06), 0 8px 24px -12px rgba(31,66,80,.18);
  --shadow-up: 0 2px 4px rgba(31,66,80,.06), 0 18px 36px -16px rgba(31,66,80,.28);
  --ease: cubic-bezier(.2,.7,.2,1);
  --font: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --font-head: "Outfit", "Inter", "Segoe UI", system-ui, sans-serif;
  --mow: radial-gradient(120% 90% at 100% 0%, rgba(159,211,234,.22), rgba(159,211,234,0) 60%), radial-gradient(90% 80% at 0% 100%, rgba(127,165,140,.12), rgba(127,165,140,0) 60%);
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cpath d='M0 6c10-6 20-6 30 0s20 6 30 0 20-6 30 0 20 6 30 0' fill='none' stroke='%2335a7b5' stroke-width='2.4'/%3E%3C/svg%3E");
}
* { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.text-large { font-size: 125%; }
body { margin: 0; background: var(--mist); color: var(--ink); font-family: var(--font); line-height: 1.62; font-feature-settings: "cv11", "ss01"; overflow-x: clip; }
img, svg { max-width: 100%; }
a { color: var(--link); text-underline-offset: 0.2em; text-decoration-thickness: 1px; transition: color .18s var(--ease); }
a:hover { color: var(--slate); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--stripe); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3, h4 { color: var(--slate); line-height: 1.15; font-family: var(--font-head); font-weight: 650; text-wrap: balance; }
h1 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3rem); margin: 0.5rem 0 0.5rem; letter-spacing: -0.025em; }
h2 { font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.75rem); margin: 2.4rem 0 0.7rem; letter-spacing: -0.015em; }
h3 { font-size: 1.2rem; margin: 1.5rem 0 0.4rem; }
h4 { font-size: 1.02rem; margin: 1.3rem 0 0.35rem; font-weight: 600; }
p, li { text-wrap: pretty; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
.small { font-size: 0.9rem; color: var(--muted); }
.lede { font-size: 1.15rem; max-width: 40rem; color: var(--slate-2); }
.eyebrow { margin: 2.6rem 0 0; font-family: var(--font-head); font-weight: 600; font-size: 0.95rem; color: var(--green-ink); display: flex; align-items: center; gap: .6rem; }
.eyebrow::before { content: ""; width: 1.6rem; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--burn), var(--stripe)); }
.eyebrow + h2 { margin-top: 0.2rem; }
.skip { position: absolute; left: -999px; top: 0; background: var(--slate); color: #fff; padding: 0.5rem 1rem; z-index: 30; }
.skip:focus { left: 1rem; }
.full-bleed, .hero, .page-head { margin-inline: calc(50% - 50vw); padding-inline: max(16px, calc(50vw - var(--wrap) / 2 + 16px)); }

/* Header: the light, tracked wordmark (logo concept v1) */
.site-header { background: var(--paper); border-bottom: 1px solid var(--line); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 0.7rem; padding-bottom: 0.7rem; }
.logo { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: var(--slate); }
.logo svg { width: 46px; height: 46px; flex: none; transition: transform .4s var(--ease); }
.logo:hover svg { transform: rotate(-8deg); }
.logo__text { display: flex; flex-direction: column; line-height: 1.05; }
.logo__name { font-family: var(--font-head); font-weight: 300; font-size: 1.55rem; letter-spacing: 0.2em; text-transform: uppercase; }
.logo__tag { font-size: 0.74rem; color: var(--green-ink); letter-spacing: 0.08em; margin-top: 0.2rem; font-weight: 500; }
.text-size { font: inherit; font-size: 0.85rem; font-weight: 500; background: transparent; border: 1.5px solid var(--line-2); color: var(--slate); border-radius: var(--r-sm); padding: 0.35rem 0.8rem; cursor: pointer; white-space: nowrap; transition: border-color .18s, background .18s; }
.text-size:hover { border-color: var(--slate); }
.text-size[aria-pressed="true"] { background: var(--slate); color: #fff; border-color: var(--slate); }
.site-nav { background: var(--slate); }
.site-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0 1.6rem; margin: 0; padding: 0; }
.site-nav a { color: #e6f1f5; text-decoration: none; font-weight: 500; font-size: 0.93rem; display: inline-block; padding: 0.7rem 0 0.6rem; border-bottom: 3px solid transparent; transition: color .18s, border-color .18s; }
.site-nav a:hover { color: #fff; border-bottom-color: rgba(53,167,181,.5); }
.site-nav a[aria-current="page"] { color: #fff; border-bottom-color: var(--stripe); }

main { padding-bottom: 3.5rem; }
.page-head { background: var(--mow), var(--paper); border-bottom: 1px solid var(--line); padding-top: 0.4rem; padding-bottom: 1.4rem; margin-bottom: 1.2rem; }
.page-head h1 { max-width: 24ch; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.3rem; padding: 0; margin: 0.9rem 0 0; font-size: 0.86rem; color: var(--muted); }
.crumbs a { color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: 0.3rem; color: var(--line-2); }
.byline { margin: 0; color: var(--muted); font-size: 0.9rem; }
.badge { display: inline-flex; align-items: center; gap: .35rem; margin: 0.7rem 0 0; padding: 0.2rem 0.6rem; border-radius: var(--r-sm); font-size: 0.82rem; font-weight: 600; }
.badge--checked { background: var(--good); color: var(--green-ink); }
.badge--pending { background: var(--maybe); color: var(--maybe-line); }
.unverified { color: var(--maybe-line); font-weight: 600; }
.spec-notice { font-size: 0.92rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 0.55rem 0.9rem; max-width: 48rem; }
.stub-banner, .editor-note { background: var(--burn-soft); border-left: 4px solid var(--link); padding: 0.5rem 0.8rem; font-size: 0.92rem; color: var(--slate); }
span.editor-note { display: inline; padding: 0.1rem 0.4rem; }
.prose { max-width: 42rem; }
.prose li { margin: 0.3rem 0; }
.prose ol li::marker { font-family: var(--font-head); font-weight: 600; color: var(--green-ink); }
.prose strong { color: var(--slate); font-weight: 600; }

/* Notices */
.ad-banner { background: var(--brown-soft); border-radius: var(--r); padding: 0.6rem 0.9rem; font-size: 0.9rem; }
.ad-banner strong, .ad-label { background: var(--slate); color: #fff; border-radius: 4px; padding: 0 0.35rem; font-size: 0.74rem; font-weight: 700; margin-right: 0.3rem; letter-spacing: .02em; }
.callout { border-radius: var(--r); padding: 0.75rem 1rem 0.75rem 3.1rem; margin: 1rem 0; background: var(--paper); border: 1px solid var(--line); max-width: 48rem; position: relative; font-size: 0.96rem; }
.callout::before { content: ""; position: absolute; left: 1rem; top: 0.95rem; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--line-2); }
.callout p { margin: 0; }
.callout__link { margin-top: 0.35rem !important; font-size: 0.88rem; font-weight: 600; }
.callout--health { background: var(--brown-soft); border-color: #bfe2e3; }
.callout--wildlife::before { background: var(--brown) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22c0-6 4-11 10-11 5 0 9 3 10 7l3 1-3 3H8'/%3E%3Cpath d='M10 13l-2-3M14 11l-1-4M18 11l1-4M22 13l2-3'/%3E%3C/svg%3E") center / 72% no-repeat; }
.callout--co, .callout--gas { background: var(--poor); border-color: #ecd0c7; }
.callout--blades::before, .callout--electrical::before { background: var(--poor-line); }
.callout--none { color: var(--muted); font-size: 0.9rem; padding-left: 1rem; border-left: 4px solid var(--line-2); }
.callout--none::before { content: none; }
.source-line { font-size: 0.86rem; color: var(--muted); margin: 0.9rem 0; }
.email-capture { border-radius: var(--r-lg); padding: 1rem 1.2rem; margin: 2rem 0; max-width: 48rem; background: var(--mow), var(--slate); color: #e6f1f5; position: relative; overflow: hidden; }
.email-capture::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: var(--wave) repeat-x bottom / 120px 12px; opacity: .7; }
.email-capture__title { margin-top: 0.1rem; font-size: 1.1rem; color: #fff; }
.email-capture p { margin-bottom: 0.4rem; }

/* Hero: full-width band, soft sky wash, window art */
.hero { display: grid; gap: clamp(1.2rem, 4vw, 3.5rem); align-items: center; padding-top: clamp(1.4rem, 3vw, 2.8rem); padding-bottom: clamp(1.6rem, 3vw, 3rem); background: var(--mow), var(--paper); border-bottom: 1px solid var(--line); position: relative; }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 12px; background: var(--wave) repeat-x center / 120px 12px; pointer-events: none; }
.hero__text h1 { max-width: 15ch; font-size: clamp(2.3rem, 1.4rem + 3.6vw, 3.9rem); line-height: 1.02; letter-spacing: -0.035em; font-weight: 600; margin-top: 0.3rem; }
.hero__kicker { margin: 0; font-family: var(--font-head); font-weight: 500; font-size: 0.95rem; color: var(--green-ink); letter-spacing: 0.04em; display: flex; align-items: center; gap: .6rem; }
.hero__kicker::before { content: ""; width: 2.2rem; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--burn), var(--stripe)); }
.hero .lede { margin: 1rem 0 1.4rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0 0 1.2rem; }
.hero__promise { display: flex; gap: 0.55rem; align-items: flex-start; font-weight: 500; color: var(--slate-2); max-width: 38rem; font-size: 0.93rem; margin: 0; }
.hero__promise svg { width: 22px; height: 22px; flex: none; color: var(--green-ink); }
@media (min-width: 56rem) { .hero { grid-template-columns: 1.15fr 1fr; } }
.plan { position: relative; margin: 0; max-width: 32rem; justify-self: end; width: 100%; }
.plan__svg { display: block; width: 100%; border-radius: var(--r-lg); box-shadow: var(--shadow-up); }
.plan__card { position: absolute; left: -1.2rem; bottom: -1.2rem; display: grid; grid-template-columns: auto auto; gap: .1rem .9rem; background: var(--slate); color: #fff; border-radius: var(--r); padding: .7rem 1rem; font-size: .88rem; box-shadow: var(--shadow-up); font-variant-numeric: tabular-nums; }
.plan__card-k { color: #b6d3dd; font-size: .78rem; align-self: center; }
@media (max-width: 55.99rem) { .plan { justify-self: center; max-width: 30rem; } .plan__card { left: .6rem; } }
@media (max-width: 40rem) { .plan { display: none; } .hero__text h1 { font-size: 2.3rem; } }
.pledge { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; align-items: start; background: var(--brown-soft); border-radius: var(--r-lg); padding: 0.4rem 1.4rem 1rem; margin-top: 2.6rem; }
.pledge > svg { width: 52px; height: 52px; margin-top: 2.6rem; color: var(--brown); }
.pledge .eyebrow { color: var(--brown); }
.pledge .eyebrow::before { background: var(--brown); }

/* Cards: icon tile, title, text, arrow pinned to the bottom */
.cards { list-style: none; display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); padding: 0; margin: 1rem 0; }
.card__link { display: grid; grid-template-rows: auto auto 1fr auto; gap: 0.4rem; height: 100%; padding: 1.1rem 1.2rem 1rem; background: var(--paper); border-radius: var(--r); text-decoration: none; color: var(--ink); box-shadow: var(--shadow); transition: transform .22s var(--ease), box-shadow .22s var(--ease); position: relative; overflow: hidden; }
.card__link::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--burn), var(--stripe)); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.card__link::after { content: "→"; font-family: var(--font-head); color: var(--green-ink); font-weight: 600; transition: transform .22s var(--ease); }
.card__link:hover { transform: translateY(-3px); box-shadow: var(--shadow-up); color: var(--ink); }
.card__link:hover::before { transform: scaleX(1); }
.card__link:hover::after { transform: translateX(4px); }
.card__link:active { transform: translateY(-1px); }
.card__icon { display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: var(--r-sm); background: var(--stripe-soft); }
.card__icon svg { width: 24px; height: 24px; color: var(--green-ink); }
.card__name { font-weight: 600; color: var(--slate); font-family: var(--font-head); font-size: 1.1rem; line-height: 1.25; }
.card__text { font-size: 0.92rem; color: var(--muted); }
.btn { display: inline-flex; align-items: center; gap: .4rem; font: inherit; font-weight: 600; background: var(--green-ink); color: #fff; border: 2px solid var(--green-ink); border-radius: var(--r-sm); padding: 0.55rem 1.15rem; text-decoration: none; cursor: pointer; transition: background .18s, border-color .18s, transform .12s var(--ease), box-shadow .18s; box-shadow: 0 2px 0 rgba(20,60,45,.35); }
.btn:hover { background: var(--slate); border-color: var(--slate); color: #fff; }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn--ghost { background: transparent; color: var(--green-ink); box-shadow: none; }
.btn--ghost:hover { background: var(--stripe-soft); color: var(--green-ink); border-color: var(--green-ink); }
.link-btn { font: inherit; font-size: 0.92rem; background: none; border: 0; padding: 0; color: var(--link); text-decoration: underline; cursor: pointer; }
.tool-card { background: var(--stripe-soft); border-radius: var(--r); padding: 0.4rem 1.1rem 0.9rem; margin: 1.4rem 0; max-width: 44rem; }
.host-link { font-weight: 600; }
.shop-row { display: inline-flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0.3rem 0; }
.shop-link { font-size: 0.9rem; }

/* Tools */
.tool { background: var(--paper); border-radius: var(--r-lg); padding: 0.4rem clamp(1rem, 3vw, 1.8rem) 1.2rem; margin: 1.6rem 0 2rem; box-shadow: var(--shadow-up); border-top: 5px solid transparent; border-image: linear-gradient(90deg, var(--burn), var(--stripe)) 5 0 0 0; scroll-margin-top: 1rem; }
.tool__title { margin-top: 1rem; font-size: clamp(1.45rem, 1.2rem + 1vw, 1.9rem); }
.tool__static h3 { margin-top: 0.6rem; }
.step { display: flex; align-items: center; gap: .6rem; font-size: 1.1rem; margin: 1.6rem 0 0.8rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.step:first-child { border-top: 0; padding-top: 0; margin-top: 0.6rem; }
.step__n { display: inline-grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--slate); color: #fff; font-size: .9rem; font-weight: 600; flex: none; }
.results .step__n { background: var(--green-ink); }
.zone { border: 1px solid var(--line); border-radius: var(--r); padding: 0.4rem 1rem 0.6rem; margin: 0 0 1rem; background: #fbfdfd; }
.zone > legend { font-weight: 600; color: var(--slate); padding: 0 0.4rem; font-family: var(--font-head); font-size: 1.05rem; }
.deduct { background: var(--mist); border-radius: var(--r-sm); padding: 0.3rem 0.8rem 0.6rem; margin: 0.6rem 0; border-left: 3px solid var(--brown); }
.deduct__label { font-weight: 600; margin: 0.3rem 0; }
.field-row { display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); margin-bottom: 0.4rem; }
.field { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.6rem; }
.field label { font-weight: 600; font-size: 0.93rem; color: var(--slate); }
.field__unit { font-weight: 400; color: var(--muted); }
.field input, .field textarea, .field select { font: inherit; font-variant-numeric: tabular-nums; padding: 0.55rem 0.75rem; border: 1.5px solid var(--line-2); border-radius: var(--r-sm); background: #fff; color: var(--ink); width: 100%; transition: border-color .18s, box-shadow .18s; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #8fa6ae; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--green-ink); box-shadow: 0 0 0 3px rgba(53,167,181,.35); }
.field--error input { border-color: var(--poor-line); }
.field__hint { font-size: 0.84rem; color: var(--muted); margin: 0; }
.field__error { color: #8f3524; font-weight: 600; font-size: 0.88rem; margin: 0; }
/* Choices as chips (logo brief UI direction: toggle chips). The radio stays real and focusable. */
.choice { border: 0; padding: 0; margin: 0 0 1.1rem; min-width: 0; }
.choice legend { font-weight: 600; color: var(--slate); padding: 0; margin-bottom: 0.45rem; font-size: 0.97rem; }
.choice__opts { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.choice .tick { position: relative; display: inline-flex; align-items: baseline; gap: .3rem; padding: 0.45rem 0.85rem; border: 1.5px solid var(--line-2); border-radius: var(--r-sm); background: #fff; cursor: pointer; font-size: 0.93rem; transition: background .16s, border-color .16s, color .16s, transform .12s var(--ease); }
.choice .tick:hover { border-color: var(--slate-2); }
.choice .tick:active { transform: scale(.98); }
.choice .tick input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.choice .tick:has(input:checked) { background: var(--slate); border-color: var(--slate); color: #fff; }
.choice .tick:has(input:checked) .tick__hint { color: #cfe0e6; }
.choice .tick:has(input:focus-visible) { outline: 3px solid var(--stripe); outline-offset: 2px; }
.tick { display: flex; gap: 0.5rem; align-items: flex-start; padding: 0.2rem 0; cursor: pointer; }
.tick input { width: 1.15rem; height: 1.15rem; margin-top: 0.2rem; accent-color: var(--green-ink); flex: none; }
.tick__hint { color: var(--muted); font-size: 0.85rem; }
.results { margin-top: 0.6rem; padding-top: 0.2rem; animation: rise .35s var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.result-tiles { display: flex; flex-wrap: wrap; gap: var(--gap); margin: 0.8rem 0; }
.tile { background: var(--mist); border-radius: var(--r); padding: 0.7rem 1.1rem; min-width: 11rem; }
.tile--main { background: var(--mow), var(--slate); color: #fff; background-image: radial-gradient(120% 100% at 100% 0%, rgba(159,211,234,.13), transparent 65%); }
.tile__label { margin: 0; font-size: 0.85rem; font-weight: 500; opacity: .9; }
.tile__value { margin: 0; font-size: 2.2rem; font-weight: 600; font-family: var(--font-head); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1.15; }
.tile__sub { margin: 0; font-size: 0.9rem; opacity: .85; }
.zone-list { padding-left: 1.1rem; font-variant-numeric: tabular-nums; }
.verdict { background: var(--mist); border-radius: var(--r); padding: 0.7rem 1rem; font-weight: 500; border-left: 4px solid var(--slate-2); }
.verdict--ok { background: var(--good); border-left-color: var(--good-line); }
.verdict--no { background: var(--poor); border-left-color: var(--poor-line); }
.tech-list { list-style: none; padding: 0; margin: 0.6rem 0; display: grid; gap: 0.55rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.tech { border-radius: var(--r); padding: 0.6rem 1rem 0.7rem; background: var(--paper); border: 1px solid var(--line); box-shadow: inset 4px 0 0 var(--line-2); }
.tech--good { box-shadow: inset 4px 0 0 var(--good-line); }
.tech--possible { box-shadow: inset 4px 0 0 #c8901f; }
.tech--poor { box-shadow: inset 4px 0 0 var(--poor-line); background: #fbfbfa; color: var(--muted); }
.tech__head { margin: 0.1rem 0 0.2rem; display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.tech__head strong { font-family: var(--font-head); font-weight: 600; color: var(--slate); }
.tech__icon { display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: var(--r-sm); background: var(--stripe-soft); color: var(--green-ink); }
.tech__icon svg { width: 20px; height: 20px; }
.tech--poor .tech__icon { background: var(--mist); color: var(--muted); }
.tech__why { margin: 0.2rem 0 0.4rem; padding-left: 1.1rem; font-size: 0.92rem; }
.tech__more summary { cursor: pointer; font-weight: 600; color: var(--link); font-size: 0.92rem; }
.pill { display: inline-block; font-size: 0.74rem; font-weight: 600; border-radius: 4px; padding: 0.1rem 0.45rem; background: var(--mist); color: var(--slate); }
.pill--good { background: var(--good); color: var(--green-ink); }
.pill--possible { background: var(--maybe); color: var(--maybe-line); }
.pill--poor { background: var(--poor); color: #8f3524; }
.models { list-style: none; padding: 0; display: grid; gap: 0.6rem; }
.model { border: 1px solid var(--line); border-radius: var(--r); padding: 0.5rem 1rem; background: var(--paper); }
.model p { margin: 0.2rem 0; }
.model__note { color: var(--maybe-line); }
.empty { background: var(--mow), var(--mist); border: 1px dashed var(--line-2); border-radius: var(--r); padding: 0.75rem 1rem; color: var(--slate-2); }
.fit-card { border: 1.5px solid var(--slate); border-radius: var(--r); padding: 0.4rem 1.2rem 0.9rem; margin: 1.6rem 0; background: #fff; position: relative; }
.fit-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; border-radius: var(--r) var(--r) 0 0; background: linear-gradient(90deg, var(--burn), var(--stripe)); }
.fit-card__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.6rem; }
.fit-card__rows { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.6rem 1.5rem; margin: 0.4rem 0; }
.fit-card__rows dt { font-size: 0.8rem; color: var(--muted); }
.fit-card__rows dd { margin: 0; font-weight: 600; color: var(--slate); font-variant-numeric: tabular-nums; }
.fit-card__note { font-size: 0.86rem; color: var(--muted); }
.example { background: var(--mist); border-radius: var(--r); padding: 0.2rem 1.1rem 0.7rem; border-left: 4px solid var(--stripe); }
.sources { border-top: 1px solid var(--line); margin-top: 2.4rem; }
.sources h2 { font-size: 1.1rem; }
.sources ul { font-size: 0.9rem; padding-left: 1.1rem; }
.prose table { border-collapse: collapse; width: 100%; margin: 0.8rem 0; font-size: 0.93rem; background: var(--paper); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); }
.prose th, .prose td { text-align: left; border-bottom: 1px solid var(--line); padding: 0.5rem 0.7rem; vertical-align: top; }
.prose thead th { background: var(--slate); color: #fff; font-weight: 600; font-family: var(--font-head); }
.prose tbody th, .prose td:first-child { font-weight: 500; color: var(--slate); }
.prose tbody tr:nth-child(even) { background: #f7fafb; }
.tracker-status { background: var(--paper); border-radius: var(--r-lg); padding: 0.2rem 1.3rem 0.7rem; box-shadow: var(--shadow); }
.tech-counts { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; padding-left: 1.1rem; }
.section { margin-top: 1rem; }

/* Hub intro */
.hub-intro { display: grid; grid-template-columns: minmax(0, 1fr) 6.5rem; align-items: start; gap: clamp(1rem, 4vw, 3rem); margin: .5rem 0 1.5rem; }
.hub-intro__copy { max-width: 44rem; }
.hub-intro__copy > :first-child { margin-top: 0; }
.hub-art { margin: 0; background: var(--mow), var(--slate); background-image: radial-gradient(120% 100% at 100% 0%, rgba(159,211,234,.16), transparent 65%); border-radius: var(--r-lg); padding: 1.1rem; color: var(--stripe); }
.hub-art svg { display: block; width: 100%; height: auto; }
@media (max-width: 40rem) { .hub-intro { grid-template-columns: 1fr; } .hub-art { display: none; } }

/* Footer: the burn runs along the top */
.site-footer { background: var(--slate); color: #dfe6dd; padding: 2rem 0 2.2rem; position: relative; }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: -6px; height: 12px; background: var(--wave) repeat-x center / 120px 12px; }
.site-footer a { color: #fff; text-decoration-color: rgba(255,255,255,.4); }
.site-footer .small { color: #c3ccc5; }
.site-footer__brand { display: flex; align-items: center; gap: .7rem; margin: 0 0 .6rem; }
.site-footer__brand svg { width: 38px; height: 38px; }
.site-footer__brand .logo__name { font-size: 1.25rem; color: #fff; }
.site-footer__promise { max-width: 46rem; color: #dfe6dd; }
.site-footer__links { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem 1.3rem; padding: 0; font-size: 0.92rem; }
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; background: var(--paper); border-top: 3px solid var(--green); box-shadow: 0 -8px 24px rgba(31,66,80,.12); z-index: 20; }
.cookie-banner[hidden] { display: none; }
.cookie-banner__inner { padding-top: 0.6rem; padding-bottom: 0.8rem; }
.cookie-banner__title { margin: 0.2rem 0; font-size: 1.1rem; }
.cookie-banner__actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.cookie-choice { font: inherit; font-weight: 600; border: 2px solid var(--slate); background: var(--slate); color: #fff; border-radius: var(--r-sm); padding: 0.4rem 1rem; cursor: pointer; }

@media (max-width: 40rem) {
  .logo__name { font-size: 1.25rem; letter-spacing: 0.16em; }
  .logo svg { width: 40px; height: 40px; }
  .logo__tag { font-size: 0.68rem; letter-spacing: 0.03em; white-space: nowrap; }
  /* One scrollable row instead of three wrapped rows (TODO: mobile nav) */
  .site-nav ul { gap: 0 1.1rem; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .site-nav li { flex: 0 0 auto; }
  .site-nav a { padding: 0.55rem 0 0.45rem; }
  .hero { padding-top: 1rem; }
}

/* Print: the Lawn fit card button prints just the card. */
@page { size: A4; margin: 14mm; }
@media print {
  html { font-size: 11pt; }
  body { background: #fff; color: #000; }
  .site-header, .site-nav, .site-footer, .cookie-banner, .no-print, .skip, .crumbs, .email-capture, .ad-banner, .shop-row, .text-size, .stub-banner, .plan { display: none !important; }
  a { color: #000; text-decoration: none; }
  .hero, .page-head { background: none; margin: 0; padding: 0; }
  .tool, .fit-card { box-shadow: none; border-color: #000; break-inside: avoid; }
  .callout, .tile, .tech { background: #fff !important; color: #000 !important; border: 1px solid #000; box-shadow: none; }
  body.printing-card * { visibility: hidden; }
  body.printing-card .fit-card, body.printing-card .fit-card * { visibility: visible; }
  body.printing-card .fit-card { position: absolute; left: 0; top: 0; width: 100%; margin: 0; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }

/* Contact form */
.contact-form { max-width: 36rem; }
.contact-form textarea { min-height: 10rem; resize: vertical; }
.contact-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-msg { border-radius: var(--r-sm); padding: .6rem .9rem; margin: 1rem 0; font-weight: 500; }
.form-msg--error { background: var(--poor); color: #8f3524; }
.form-msg--ok { background: var(--good); color: var(--green-ink); }
.contact-email { font-size: 1.05rem; }
.check-row { display: flex; gap: .5rem; align-items: flex-start; margin: 1rem 0; }
.check-row input { margin-top: .35rem; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }