/* York Radon: shared design system. Mobile-first. System font stack only (no third-party font requests). */
:root {
  --navy: #0d2b3e;
  --ink: #1b2a30;
  --muted: #52646b;
  --teal: #1f7a72;
  --teal-100: #d9efec;
  --teal-700: #145a54;
  --bg-soft: #f4f7f7;
  --line: #dbe3e2;
  --control: #9fb2b0;
  --shadow: 0 2px 10px rgba(13,43,62,.08);
  --radius: 10px;
  --safe: #1e7a3d;
  --safe-bg: #e7f5eb;
  --consider: #a1690a;
  --consider-bg: #fbf0dc;
  --act: #b3261e;
  --act-bg: #fbe7e5;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 1rem/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--ink); background: #fff; }
h1, h2, h3 { font-weight: 800; color: var(--navy); line-height: 1.2; margin: 0 0 .6rem; }
h1 { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem); }
h2 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); margin-top: 2rem; }
h3 { font-size: 1.1rem; }
p { margin: 0 0 1rem; }
a { color: var(--teal-700); }
a:not(.btn) { text-decoration-thickness: 1px; text-underline-offset: 2px; }
.container { max-width: 62rem; margin: 0 auto; padding: 0 1.25rem; }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--navy); color: #fff; padding: .6rem 1rem; z-index: 100; }
.skip-link:focus { left: 1rem; top: 1rem; }
:focus-visible { outline: 3px solid var(--teal-100); outline-offset: 2px; }

/* Header */
.site-header { background: var(--navy); color: #fff; }
.site-header__bar { display: flex; align-items: center; gap: 1rem; padding: .9rem 0; flex-wrap: wrap; }
.brand { color: #fff; font-weight: 800; text-decoration: none; font-size: 1.15rem; }
.brand__tag { display: block; font-size: .7rem; font-weight: 500; color: #b9cdd3; }
.site-nav { margin-left: auto; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.site-nav a { color: #dce9ec; text-decoration: none; font-weight: 600; font-size: .92rem; }
.site-nav a:hover, .site-nav a:focus-visible { color: #fff; text-decoration: underline; }
.nav-toggle { display: none; }
@media (max-width: 52rem) {
  /* Progressive enhancement. Default (no JS, or site.js failed to load): the navigation
     stays visible and the Menu button stays hidden, so navigation is never lost and the
     button is never a dead control. Everything collapse-related is scoped to .js, which
     site.js adds only after it has successfully wired the toggle up -- so the class means
     "the enhancement is running", not merely "JavaScript exists". Deliberately not set by
     an inline <head> script: that would assert the enhancement before proving it, and a
     failed site.js would hide the nav behind a button that does nothing. */
  .site-nav { width: 100%; order: 3; }
  .site-nav ul { flex-direction: column; padding: .5rem 0 1rem; }
  .js .nav-toggle { display: inline-flex; background: transparent; border: 2px solid #fff; color: #fff; border-radius: 6px; font: inherit; font-weight: 700; padding: .4rem .8rem; min-height: 44px; cursor: pointer; }
  .js .site-nav { display: none; }
  .js .site-nav.is-open { display: block; }
}

/* Hero / intro */
/* Breadcrumbs sit between the navy header and the navy hero, so the bar is navy too --
   a white strip there would read as a seam between two dark bands. */
.breadcrumb { background: var(--navy); color: #9fc7cb; font-size: .82rem; }
.breadcrumb ol { list-style: none; margin: 0; padding: .55rem 0 0; display: flex; flex-wrap: wrap; gap: .1rem .5rem; }
.breadcrumb li { display: flex; align-items: center; gap: .5rem; }
.breadcrumb li + li::before { content: "/"; color: #5c7f8c; }
.breadcrumb a { color: #cfe4e2; text-decoration: none; border-bottom: 1px solid transparent; }
.breadcrumb a:hover, .breadcrumb a:focus { color: #fff; border-bottom-color: #9fc7cb; }
.breadcrumb [aria-current="page"] { color: #9fc7cb; }

.hero { background: linear-gradient(180deg, var(--navy), #123449); color: #fff; padding: 2.5rem 0 2.25rem; }
.hero h1 { color: #fff; }
.hero p.lead { color: #d7e6e9; font-size: 1.1rem; max-width: 42rem; }
.hero .disclosure { font-size: .85rem; color: #aec3c9; max-width: 42rem; margin-top: 1rem; }

/* Situation router (homepage) */
.situations { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .9rem; margin: 1.5rem 0 2rem; }
.situation-card { display: block; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--teal); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.1rem 1.2rem; text-decoration: none; color: var(--ink); }
.situation-card:hover, .situation-card:focus-visible { border-left-color: var(--teal-700); box-shadow: 0 4px 16px rgba(13,43,62,.13); }
.situation-card__q { font-weight: 800; color: var(--navy); display: block; margin-bottom: .3rem; }
.situation-card__a { color: var(--muted); font-size: .93rem; margin: 0; }

/* Sections */
.section { padding: 2rem 0; }
.section--soft { background: var(--bg-soft); }
.section h2:first-child { margin-top: 0; }

/* Radon level scale (signature visual component).
   Under-2 and 2-4 are equal 2-point ranges, so they get EQUAL width (flex:1 each) -- not
   decorative proportions. The 4+ zone is open-ended, so it is never drawn as a normal
   bounded block: it fades to transparent at its right edge (mask-image) rather than
   implying a false endpoint. See decisions-log.md, "scale visual-integrity fix." */
.radon-scale { margin: 1.5rem 0 2rem; }
.radon-scale__track { display: flex; border-radius: 8px; overflow: visible; height: 3.25rem; font-weight: 700; font-size: .85rem; }
.radon-scale__zone { display: flex; align-items: center; justify-content: center; color: #fff; text-align: center; padding: .25rem; transition: transform .15s ease, box-shadow .15s ease; }
.radon-scale__zone--safe { background: var(--safe); flex: 1; border-radius: 8px 0 0 8px; }
.radon-scale__zone--consider { background: var(--consider); flex: 1; }
.radon-scale__zone--act {
  background: linear-gradient(90deg, var(--act) 0%, var(--act) 78%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, #000 78%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 78%, transparent 100%);
  flex: 1.3; justify-content: flex-start; padding-left: 1rem; position: relative;
}
.radon-scale__zone--act::after { content: "\2192"; margin-left: .4rem; font-weight: 900; }
.radon-scale__zone.is-active { transform: scaleY(1.14); box-shadow: 0 0 0 3px var(--navy); z-index: 2; border-radius: 8px; }
.radon-scale__labels { display: flex; justify-content: space-between; font-size: .8rem; color: var(--muted); margin-top: .5rem; }
.radon-scale--mini { margin: 1rem 0 0; }
.radon-scale--mini .radon-scale__track { height: 1.65rem; font-size: 0; }
.radon-scale--mini .radon-scale__zone--act::after { font-size: .9rem; }

/* Reading interpreter (progressive enhancement) */
.interpreter { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.25rem 1.35rem; margin: 1.5rem 0; }
.interpreter h3 { margin-top: 0; }
.interpreter__control { display: flex; gap: .6rem; flex-wrap: wrap; margin: .6rem 0; }
.interpreter__control input[type="number"] { flex: 1 1 10rem; font: inherit; font-size: 1.1rem; padding: .6rem .8rem; border: 2px solid var(--control); border-radius: 6px; min-height: 46px; }
.interpreter__control input:focus { border-color: var(--teal); outline: 3px solid var(--teal-100); }
.interpreter__result { margin-top: 1rem; padding: .9rem 1rem; border-radius: var(--radius); background: var(--bg-soft); border-left: 4px solid var(--teal-700); }
.interpreter__result p:last-child { margin-bottom: 0; }
.interpreter__result[hidden] { display: none; }

/* Decision flow (compact, replaces prose retest paragraph) */
.decision-flow { display: flex; flex-direction: column; gap: 0; margin: 1.25rem 0; }
.decision-flow__step { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem 1rem; }
.decision-flow__step strong { display: block; color: var(--navy); }
.decision-flow__step span { color: var(--muted); font-size: .92rem; }
.decision-flow__arrow { text-align: center; color: var(--control); font-weight: 900; font-size: 1.1rem; padding: .15rem 0; transform: rotate(90deg); }
/* Row layout only kicks in at a genuine desktop width. At in-between (tablet) widths a
   4-5 step flow stays stacked rather than being crammed into narrow columns -- checked at
   ~360px (mobile), ~768px (tablet) and ~1100px+ (desktop) widths for both the 4-step flow
   on /radon-levels/ and the 5-step flow on /what-is-radon/. */
@media (min-width: 64rem) {
  .decision-flow { flex-direction: row; align-items: stretch; }
  .decision-flow__step { flex: 1; }
  .decision-flow__arrow { display: flex; align-items: center; padding: 0 .5rem; transform: none; }
}

/* Featured router entry (homepage) */
.featured-router { display: flex; flex-direction: column; gap: 1.25rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.5rem; margin-bottom: 1.5rem; }
.featured-router__visual { flex: none; }
@media (min-width: 40rem) {
  .featured-router { flex-direction: row; align-items: center; }
  .featured-router__text { flex: 1.1; }
  .featured-router__visual { flex: 1; }
}

/* Local-evidence component */
.local-evidence { border: 1px solid var(--line); border-left: 4px solid var(--teal); border-radius: var(--radius); padding: 1rem 1.15rem; margin: 1.25rem 0; background: #fff; }
.local-evidence__meta { font-size: .82rem; color: var(--muted); margin-top: .5rem; }

/* Situation-based decision guide (testing guide signature component) */
.situation-guide { list-style: none; margin: 1.25rem 0; padding: 0; display: grid; gap: .7rem; }
.situation-guide li { border: 1px solid var(--line); border-left: 4px solid var(--teal); border-radius: var(--radius); padding: .9rem 1.1rem; background: #fff; }
.situation-guide strong { display: block; color: var(--navy); margin-bottom: .3rem; }
.situation-guide p { margin: 0; font-size: .93rem; color: var(--ink); }

/* Two-column compare (short-term vs long-term) */
.compare { display: grid; grid-template-columns: 1fr; gap: .8rem; margin: 1.25rem 0; }
@media (min-width: 40rem) { .compare { grid-template-columns: 1fr 1fr; } }
.compare__col { border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; background: #fff; }
.compare__col h3 { margin-top: 0; }
.compare__col ul { margin: 0; padding-left: 1.1rem; font-size: .92rem; }
.compare__col li { margin-bottom: .35rem; }

/* Zone key/legend */
.zone-key { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: .5rem; }
.zone-key li { display: flex; gap: .6rem; align-items: flex-start; padding: .7rem .9rem; border-radius: var(--radius); border: 1px solid var(--line); }
.zone-key__swatch { width: 1rem; height: 1rem; border-radius: 3px; flex: none; margin-top: .2rem; }
.zone-key__swatch--safe { background: var(--safe); }
.zone-key__swatch--consider { background: var(--consider); }
.zone-key__swatch--act { background: var(--act); }

/* Cards / callouts */
.callout { background: var(--teal-100); border-left: 4px solid var(--teal-700); border-radius: var(--radius); padding: 1rem 1.15rem; margin: 1.25rem 0; }
.callout p:last-child { margin-bottom: 0; }
.source-note { font-size: .85rem; color: var(--muted); border-top: 1px dashed var(--line); padding-top: .5rem; margin-top: .5rem; }
.disclosure-box { background: var(--bg-soft); border: 1px solid var(--line); border-left: 3px solid var(--teal); border-radius: var(--radius); padding: .9rem 1rem; margin: 1.25rem 0; font-size: .92rem; color: var(--muted); }

/* CTA */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: .65rem 1.3rem; border-radius: 6px; font: inherit; font-weight: 700; text-decoration: none; border: 2px solid transparent; cursor: pointer; }
.btn--primary { background: var(--teal-700); color: #fff; }
.btn--primary:hover, .btn--primary:focus-visible { background: var(--navy); }
.cta-strip { background: var(--navy); color: #fff; border-radius: var(--radius); padding: 1.5rem; margin: 2rem 0; text-align: center; }
.cta-strip h2 { color: #fff; margin-top: 0; }
.cta-strip p { color: #d7e6e9; }

/* ---------- Radon Ready kit CTA (contextual, on the 9 indexable content pages) ----------
   Deliberately NOT .cta-strip. That component routes people between content pages; this one
   offers a download. Keeping them visually distinct means a page carrying both reads as
   "here's the next article" + "here's a resource", not as two stacked adverts.
   Two prominence levels, one component: the default teal band reads as a helpful aside,
   and --strong (navy fill) is used on exactly one page, /high-radon-test-result/, whose
   visitor is the reader the kit was written for. Mobile-first: everything is a normal
   block flow, so the band simply stacks and the button keeps its 46px touch target. */
.kit-cta { background: var(--teal-100); border-top: 4px solid var(--teal); padding: 1.6rem 0; margin: 2.25rem 0; }
.kit-cta__eyebrow { font-size: .74rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--teal-700); margin: 0 0 .45rem; }
.kit-cta h2 { margin: 0 0 .5rem; font-size: clamp(1.15rem, 1.05rem + .5vw, 1.45rem); }
.kit-cta p { margin: 0 0 1.1rem; max-width: 46rem; }
.kit-cta__note { font-size: .82rem; color: var(--muted); margin: .9rem 0 0; }
.kit-cta--strong { background: var(--navy); border-top-color: var(--teal); padding: 2rem 0; }
.kit-cta--strong h2 { color: #fff; }
.kit-cta--strong p { color: #d7e6e9; }
.kit-cta--strong .kit-cta__eyebrow { color: #9fc7cb; }
.kit-cta--strong .kit-cta__note { color: #a9c3c9; }
.kit-cta--strong .btn--primary { background: #fff; color: var(--navy); }
.kit-cta--strong .btn--primary:hover, .kit-cta--strong .btn--primary:focus-visible { background: var(--teal-100); color: var(--navy); }

/* Footer */
/* ---------- Radon Ready landing page (/radon-ready/) ----------
   Reuses the site tokens and component language so the page reads as the
   same brand. Mobile-first; the two landscape kit pages swap to cropped
   details under 768px via <picture> so they stay legible on a phone. */
.rr-eyebrow { font-size: .78rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: #9fc7cb; margin-bottom: .5rem; }
.rr-hero__grid { display: flex; flex-direction: column; gap: 1.75rem; }
.rr-hero__text { flex: 1; }
.rr-hero__art { flex: none; }
.rr-trust { font-size: .9rem; color: #b9cdd3; margin-top: .9rem; max-width: 34rem; }
.rr-hero__caption { font-size: .8rem; color: #9fc7cb; margin-top: .55rem; text-align: center; text-wrap: balance; }
.rr-shot { display: block; width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--line); box-shadow: 0 6px 20px rgba(13,43,62,.18); background: #fff; }
.rr-shot--cover { border-color: #2a4b60; }
.rr-hero__art .rr-shot { max-width: 20rem; margin: 0 auto; }

.rr-intro { color: var(--muted); margin-top: -.25rem; margin-bottom: 1.25rem; }

.rr-benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.rr-benefit { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--teal); border-radius: var(--radius); padding: .9rem 1.05rem; }
.rr-benefit__t { display: block; font-weight: 800; color: var(--navy); margin-bottom: .2rem; }
.rr-benefit__d { display: block; color: var(--muted); font-size: .93rem; }

.rr-previews { display: grid; gap: 1.5rem; }
.rr-preview { margin: 0; }
.rr-preview__cap { font-size: .9rem; color: var(--muted); margin-top: .7rem; line-height: 1.5; }
.rr-preview__cap strong { color: var(--navy); }
/* Opens the full-resolution page render as a plain document. No JS, no modal,
   no third-party viewer -- the browser's own image view, and Back returns. */
.rr-preview__link { display: block; width: fit-content; margin-top: .45rem; font-weight: 700; color: var(--teal-700); text-decoration: underline; }
.rr-preview__link::after { content: " \2197"; text-decoration: none; }

.rr-form-wrap { max-width: 40rem; }
.rr-form { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.35rem 1.4rem 1.2rem; }
.rr-form__set { border: 0; padding: 0; margin: 0; min-width: 0; }
.rr-form__legend { padding: 0; font-weight: 800; color: var(--navy); margin-bottom: .75rem; }
.rr-field { margin-bottom: 1rem; }
.rr-field label { display: block; font-weight: 700; color: var(--navy); margin-bottom: .3rem; font-size: .95rem; }
.rr-field input { width: 100%; min-height: 46px; padding: .55rem .7rem; font: inherit; color: var(--ink); background: #fff; border: 1.5px solid var(--control); border-radius: 6px; }
.rr-field input:focus { outline: 3px solid var(--teal); outline-offset: 1px; border-color: var(--teal-700); }
.rr-form__btn { width: 100%; }
.rr-form__set:disabled .rr-field input { background: var(--bg-soft); color: var(--muted); }
.rr-form__set:disabled .rr-form__btn { background: var(--control); cursor: not-allowed; }
.rr-form__micro { font-size: .85rem; color: var(--muted); margin: .85rem 0 0; }
.rr-staged { border: 1.5px dashed var(--control); background: var(--bg-soft); border-radius: var(--radius); padding: .9rem 1.05rem; margin: 1.1rem 0 0; font-size: .92rem; color: var(--muted); }
.rr-staged strong { color: var(--navy); }
/* Honeypot. Off-screen rather than display:none -- some bots skip hidden inputs, and this
   stays reachable to nothing that matters: it is aria-hidden and removed from tab order. */
.rr-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Contact page: the one published address, given room to be found and copied. */
.contact-email { font-size: 1.25rem; font-weight: 700; margin: .25rem 0 1rem; word-break: break-word; }
.rr-links { margin: .75rem 0 0 1.1rem; }
.rr-links li { margin-bottom: .4rem; }

@media (min-width: 48rem) {
  .rr-benefits { grid-template-columns: 1fr 1fr; }
  .rr-previews { grid-template-columns: 1fr 1fr; gap: 1.75rem; }
  /* Portrait and landscape kit pages sat side by side at wildly different
     heights, leaving dead space under the shorter card. The card becomes the
     white frame, the render is capped and centred inside it, and captions are
     pinned to the bottom so all cards align. Aspect ratio is untouched --
     nothing about the actual PDF render is distorted or cropped. */
  .rr-preview { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem 1rem .95rem; }
  .rr-preview .rr-shot { border: 0; box-shadow: none; border-radius: 3px; width: auto; max-width: 100%; max-height: 24rem; margin: 0 auto; }
  .rr-preview__cap { margin-top: auto; padding-top: .8rem; }
}
@media (min-width: 64rem) {
  .rr-hero__grid { flex-direction: row; align-items: center; gap: 2.5rem; }
  .rr-hero__art { width: 20rem; }
  .rr-hero__art .rr-shot { max-width: none; }
}

.site-footer { background: var(--bg-soft); border-top: 1px solid var(--line); padding: 2rem 0; margin-top: 2rem; }
.site-footer p { font-size: .85rem; color: var(--muted); }
.footer-links { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.footer-links a { font-size: .88rem; }

/* Contrast-safe link on dark backgrounds */
.hero a, .cta-strip a { color: #cfe9ea; }