/* ============================================================================
   TREATMENT HUB
   Bespoke styling for the acoustic-treatment.html parent hub.
   7 self-contained chapters + shell mechanics (sticky rail, reader-state
   chips, copy-link buttons). Sets the visual vocabulary for the 4 child
   hubs (panels, foam, bass traps, diffusers) via shared tool-colour
   accent tokens.
   ============================================================================
   1. TOKENS — tool colour accents, shell variables
   2. READER-STATE CHIPS (hero)
   3. STICKY CHAPTER RAIL / TOP BAR / FAB
   4. CHAPTER HEADING + COPY-LINK BUTTON
   5. CH 1 — DIAGNOSE (scorecard)
   6. CH 2 — THE FOUR TOOLS (elevated)
   Remaining chapters (3–7) live in the second half of this file.
   ============================================================================ */


/* ═══════════════════════════════════════════════════════════════════════════
   1. TOKENS
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Tool colour accents — distinctive jewel tones that harmonise with the
     site's cyan/mint/ink foundation. Each tool gets a hue so "that's panels"
     vs "that's foam" reads at a glance. Three of four are cool-toned
     (teal → blue → violet) — panels is the workhorse teal, foam the
     accessible blue, diffusers the refined violet — and a single warm
     terracotta gives bass traps the physical weight of low-end. */
  --tool-panels-accent:    #0E7490;   /* teal-700 — workhorse, same family as site cyan */
  --tool-panels-soft:      rgba(14, 116, 144, 0.06);
  --tool-panels-edge:      rgba(14, 116, 144, 0.22);

  --tool-foam-accent:      #1D4ED8;   /* blue-700 — vivid, reads "practical / accessible" */
  --tool-foam-soft:        rgba(29, 78, 216, 0.06);
  --tool-foam-edge:        rgba(29, 78, 216, 0.22);

  --tool-traps-accent:     #9A3412;   /* orange-800 — warm terracotta, the "heavy" tone */
  --tool-traps-soft:       rgba(154, 52, 18, 0.06);
  --tool-traps-edge:       rgba(154, 52, 18, 0.22);

  --tool-diffusers-accent: #6D28D9;   /* violet-700 — refined, the finishing touch */
  --tool-diffusers-soft:   rgba(109, 40, 217, 0.06);
  --tool-diffusers-edge:   rgba(109, 40, 217, 0.22);

  /* Shell dimensions */
  --treatment-rail-width:  220px;
  --treatment-rail-gap:    var(--space-8);

  /* Surface aliases used by this hub. Mapped to design-system tokens so
     if the palette shifts, these follow automatically. */
  --color-surface-muted:   var(--color-bg);
}


/* ═══════════════════════════════════════════════════════════════════════════
   2. READER-STATE CHIPS (hero)
   Four chips in the hero let the reader declare what they're treating.
   Selection persists in localStorage and re-weights affiliate picks and
   placement advice throughout the hub. No selection = neutral "generic"
   variant shown everywhere.
   ═══════════════════════════════════════════════════════════════════════════ */

.reader-chips {
  margin-top: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.reader-chips__prompt {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.reader-chips__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.reader-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: border-color 180ms ease, color 180ms ease, background 180ms ease, transform 180ms ease;
}

.reader-chip::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  background: transparent;
  transition: background 180ms ease, box-shadow 180ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .reader-chip:hover {
    border-color: rgba(255, 255, 255, 0.4);
    color: rgba(255, 255, 255, 0.95);
    transform: translateY(-1px);
  }
}

.reader-chip[aria-pressed="true"] {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.45);
  color: rgba(255, 255, 255, 1);
}

.reader-chip[aria-pressed="true"]::before {
  background: currentColor;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15);
}

.reader-chip__clear {
  align-self: flex-start;
  padding: var(--space-1) var(--space-3);
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.4);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 180ms ease;
}

.reader-chip__clear:hover {
  color: rgba(255, 255, 255, 0.8);
}

.reader-chip__clear[hidden] {
  display: none;
}

/* ── State directive ─────────────────────────────────────────────────────
   The payoff for picking a chip: a concrete "For your studio, start
   with bass traps" line with a direct link to the right starter article.
   Hidden until a state is active so the hero stays clean by default. */
.reader-chips__directive {
  margin-top: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-left: 2px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 0 8px 8px 0;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
  display: block;
}

/* Hide the whole block when no state is active. The inner .for-reader-state
   spans hide themselves too, but collapsing the wrapper prevents the
   decorative border-left and padding from showing empty. */
body:not([data-reader-state]) .reader-chips__directive {
  display: none;
}

.reader-chips__directive strong {
  color: rgba(255, 255, 255, 1);
  font-weight: var(--fw-semibold);
}

.reader-chips__directive-label {
  display: inline-block;
  margin-right: 2px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.reader-chips__directive-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: var(--space-2);
  color: var(--color-accent);
  text-decoration: none;
  font-weight: var(--fw-semibold);
  border-bottom: 1px solid transparent;
  transition: border-color 180ms ease;
}

.reader-chips__directive-link:hover {
  border-bottom-color: var(--color-accent);
}

/* Body attribute [data-reader-state="..."] drives per-chapter variants.
   Default styling (no attribute) shows all variants neutrally. */


/* ═══════════════════════════════════════════════════════════════════════════
   3. STICKY CHAPTER RAIL / TOP BAR / FAB
   Desktop ≥1100px: narrow vertical rail sticky on the left
   Tablet 700–1099px: horizontal bar at the top of each chapter
   Mobile <700px: floating FAB that opens a sheet
   ═══════════════════════════════════════════════════════════════════════════ */

.treatment-shell-wrap {
  padding-block: var(--space-10);
}

.treatment-shell {
  position: relative;
}

/* The content column holds all 7 chapters. Generous vertical breathing room
   between chapters gives each one its own "landing" feel when read end-to-end
   and when deep-linked via the rail.

   min-width: 0 is CRITICAL: grid items default to min-width: auto, which
   makes a `1fr` column expand to accommodate its content's intrinsic minimum
   width (e.g. an SVG with a large viewBox, a code block with no breaks).
   Without this, the content column overflows the shell on narrow desktops
   and everything inside it clips on the right. */
.treatment-content {
  display: grid;
  gap: var(--space-16);
  min-width: 0;
}

@media (min-width: 1100px) {
  .treatment-content {
    gap: var(--space-20);
  }
}

/* Each chapter header */
.chapter__header {
  margin-bottom: var(--space-6);
}

.chapter-rail {
  /* Mobile-first: hidden by default, shown at specific breakpoints */
  display: none;
}

/* The FAB trigger and Close button are mobile-only.
   Hide them at the root so they never leak into tablet/desktop,
   then re-enable only inside the mobile breakpoint below. */
.chapter-rail__fab,
.chapter-rail__close {
  display: none;
}

.chapter-rail__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.chapter-rail__link {
  text-decoration: none;
}

.chapter-rail__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding-left: var(--space-4);
  margin-bottom: var(--space-4);
}

.chapter-rail__header .chapter-rail__title {
  padding: 0;
  margin: 0;
}

.chapter-rail__progress {
  color: var(--color-ink-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.chapter-rail__progress [data-progress-current] {
  color: var(--color-accent);
  font-weight: var(--fw-bold);
}

.chapter-rail__progress-sep {
  color: var(--color-ink-subtle);
  opacity: 0.5;
  padding-inline: 2px;
}

.chapter-rail__item[data-visited="true"] .chapter-rail__num {
  color: var(--color-accent);
  opacity: 0.9;
}

.chapter-rail__item[data-visited="true"] .chapter-rail__num::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--color-accent);
  vertical-align: middle;
}

.chapter-rail__item[data-visited="true"] .chapter-rail__label {
  color: var(--color-ink-subtle);
}

/* ── Desktop vertical rail ────────────────────────────────────────────── */
@media (min-width: 1100px) {
  .treatment-shell {
    display: grid;
    /* minmax(0, 1fr) is CRITICAL — a bare `1fr` is shorthand for
       `minmax(auto, 1fr)`, where `auto` expands to the item's min-content.
       Inside the content column we have container-query wrappers
       (.craft-vignettes, .software-forks, .gear-preview__rows, etc.) which
       expose their children's min-content contributions back up through
       the grid sizing algorithm, forcing the column wider than the viewport.
       Explicitly setting the minimum to 0 makes the column respect its
       `1fr` allocation regardless of descendant intrinsic widths. */
    grid-template-columns: var(--treatment-rail-width) minmax(0, 1fr);
    gap: var(--treatment-rail-gap);
    align-items: start;
  }

  .chapter-rail {
    display: block;
    position: sticky;
    top: calc(var(--site-header-h, 0px) + var(--space-4));
    padding-block: var(--space-4);
    border-left: 1px solid var(--color-border);
  }

  .chapter-rail__title {
    padding-left: var(--space-4);
    margin-bottom: var(--space-4);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-ink-muted);
  }

  .chapter-rail__list {
    display: flex;
    flex-direction: column;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .chapter-rail__item {
    position: relative;
  }

  .chapter-rail__link {
    display: flex;
    gap: var(--space-3);
    align-items: baseline;
    padding: var(--space-2) var(--space-4);
    margin-left: -1px;
    border-left: 2px solid transparent;
    color: var(--color-ink-muted);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    text-decoration: none;
    transition: border-color 180ms ease, color 180ms ease, background 180ms ease;
  }

  .chapter-rail__num {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--color-ink-muted);
    opacity: 0.6;
  }

  .chapter-rail__link:hover {
    color: var(--color-ink);
    background: var(--color-surface-muted);
  }

  .chapter-rail__link[aria-current="true"] {
    border-left-color: var(--color-accent);
    color: var(--color-ink);
    font-weight: var(--fw-semibold);
  }

  .chapter-rail__link[aria-current="true"] .chapter-rail__num {
    color: var(--color-accent);
    opacity: 1;
  }
}

/* ── Below desktop: horizontal sticky top bar ─────────────────────────────
   At every viewport narrower than the desktop sidebar tier, the section
   nav becomes a single sticky horizontal top bar that sits under the site
   header. This replaces both the old tablet top-bar tier and the
   mobile-only floating FAB pattern, so readers always have an explicit
   top-of-page section nav instead of a hidden bottom-right button. */
@media (max-width: 1099px) {
  .chapter-rail {
    display: block;
    position: sticky;
    top: var(--site-header-h, 0px);
    z-index: var(--z-sticky);
    -webkit-mask-image: none;
    mask-image: none;
    margin-bottom: var(--space-5);
    padding: var(--space-2) var(--space-4);
    background: color-mix(in srgb, var(--color-bg) 82%, transparent);
    backdrop-filter: saturate(150%) blur(14px);
    -webkit-backdrop-filter: saturate(150%) blur(14px);
    border-bottom: 1px solid var(--color-line);
    box-shadow: 0 1px 3px rgba(17, 24, 39, 0.05);
  }

  .chapter-rail__header,
  .chapter-rail__title {
    display: none;
  }

  .chapter-rail__list {
    display: flex;
    list-style: none;
    padding: 0 var(--space-4);
    padding-bottom: var(--space-1);
    margin: 0;
    gap: var(--space-2);
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--color-accent) 24%, transparent) transparent;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--space-4);
    -webkit-overflow-scrolling: touch;
  }

  .chapter-rail__list::-webkit-scrollbar {
    display: block;
    height: 3px;
  }

  .chapter-rail__list::-webkit-scrollbar-track {
    background: transparent;
  }

  .chapter-rail__list::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--color-accent) 24%, transparent);
    border-radius: 4px;
  }

  .chapter-rail__item {
    scroll-snap-align: start;
    flex-shrink: 0;
  }

  .chapter-rail__link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--color-ink-muted);
    font-size: 12px;
    font-weight: var(--fw-medium);
    letter-spacing: 0.01em;
    text-decoration: none;
    transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
  }

  .chapter-rail__num {
    font-family: var(--font-mono);
    opacity: 0.6;
  }

  .chapter-rail__link[aria-current="true"] {
    border-color: var(--color-accent);
    background: var(--color-accent);
    color: var(--color-surface);
    font-weight: var(--fw-bold);
  }

  .chapter-rail__link[aria-current="true"] .chapter-rail__num {
    opacity: 1;
  }

  .chapter-rail__link:hover {
    border-color: color-mix(in srgb, var(--color-accent) 16%, transparent);
    background: color-mix(in srgb, var(--color-accent) 8%, transparent);
    color: var(--color-ink);
  }

  .chapter-rail__item[data-visited="true"] .chapter-rail__num::before {
    width: 5px;
    height: 5px;
    margin-right: 4px;
  }

  .chapter-rail__item[data-visited="true"] .chapter-rail__link {
    background: color-mix(in srgb, var(--color-accent) 6%, transparent);
  }

  .chapter-rail__item[data-visited="true"] .chapter-rail__link:not([aria-current="true"]) {
    color: var(--color-ink);
  }
}

/* The mobile FAB pattern was intentionally retired in favour of the
   sticky horizontal top bar above. The FAB and Close buttons remain
   suppressed by the root rule near the top of this section, and the
   shared scroll-spy still highlights the active link inside the top
   bar at every viewport. */


/* ═══════════════════════════════════════════════════════════════════════════
   4. CHAPTER HEADING + COPY-LINK BUTTON
   Every chapter H2 gets a small clipboard icon that copies a deep-link
   to the chapter. Sharing "the cost atlas section" becomes one click,
   not a URL edit.
   ═══════════════════════════════════════════════════════════════════════════ */

.chapter-heading {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
  /* Reset the h2 default margin — the surrounding .chapter__header owns spacing */
  margin: 0;
}

.chapter-heading__num {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  flex-shrink: 0;
}

/* The main title text — explicitly sized so it doesn't drift with h2 defaults
   and stays consistent with the design system's heading scale. */
.chapter-heading__text {
  font-family: var(--font-sans);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--color-ink);
}

@media (min-width: 900px) {
  .chapter-heading__text {
    font-size: var(--fs-3xl);
  }
}

.chapter-heading__copy-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border: 0;
  background: transparent;
  color: var(--color-ink-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  transition: opacity 180ms ease, color 180ms ease;
}

.chapter-heading:hover .chapter-heading__copy-link,
.chapter-heading__copy-link:focus-visible {
  opacity: 1;
}

.chapter-heading__copy-link:hover {
  color: var(--color-accent);
}

.chapter-heading__copy-link-icon {
  width: 14px;
  height: 14px;
}

.chapter-heading__copy-link[data-copied="true"] {
  opacity: 1;
  color: var(--color-accent);
}

.chapter-heading__copy-link[data-copied="true"]::after {
  content: "copied";
  margin-left: var(--space-1);
}

/* On touch devices, show the button always (no hover) */
@media (hover: none) {
  .chapter-heading__copy-link {
    opacity: 0.6;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   5. CH 1 — DIAGNOSE (scorecard)
   "Does your room actually need treatment?" — a 5-question yes/no
   scorecard. Using pure CSS (:has + counter) to live-update the score
   without JS. Each "yes" increments the visible score and colours a
   progress pip.
   ═══════════════════════════════════════════════════════════════════════════ */

.diagnose {
  display: grid;
  gap: var(--space-6);
}

.diagnose__lede {
  max-width: 72ch;
  color: var(--color-ink-muted);
}

.diagnose-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  padding: var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: var(--color-surface);
}

@media (min-width: 900px) {
  .diagnose-card {
    grid-template-columns: 1.6fr 1fr;
    gap: var(--space-10);
  }
}

.diagnose-card__questions {
  display: grid;
  gap: var(--space-4);
  counter-reset: diagnose-q;
}

.diagnose-q {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface-muted);
  transition: border-color 180ms ease, background 180ms ease;
  counter-increment: diagnose-q;
}

.diagnose-q::before {
  content: counter(diagnose-q, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-ink-muted);
}

.diagnose-q__text {
  font-size: var(--fs-base);
  line-height: 1.45;
  color: var(--color-ink);
}

.diagnose-q__text em {
  font-style: italic;
  color: var(--color-accent);
}

.diagnose-q__toggle {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border-radius: 999px;
  background: var(--color-border);
}

.diagnose-q__toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.diagnose-q__toggle label {
  padding: var(--space-2) var(--space-3);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
}

.diagnose-q__toggle input[value="yes"]:checked ~ label[for$="-yes"],
.diagnose-q__toggle label[data-answer="yes"]:has(~ input[value="yes"]:checked) {
  background: var(--color-accent);
  color: var(--color-surface);
}

/* Alternative pattern used in the HTML — explicit state on label for JS-free toggle */
.diagnose-q[data-answer="yes"] {
  border-color: var(--tool-traps-edge);
  background: var(--tool-traps-soft);
}

.diagnose-q[data-answer="yes"] .diagnose-q__toggle-yes {
  background: var(--tool-traps-accent);
  color: var(--color-surface);
}

.diagnose-q[data-answer="no"] .diagnose-q__toggle-no {
  background: var(--color-ink);
  color: var(--color-surface);
}

.diagnose-q__toggle-yes,
.diagnose-q__toggle-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--color-ink-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
}

.diagnose-q__toggle-wrap {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border-radius: 999px;
  background: var(--color-border);
}

/* ── Scorecard readout ────────────────────────────────────────────────── */
.diagnose-score {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-ink);
  color: var(--color-surface);
  position: sticky;
  top: var(--space-6);
  align-self: start;
}

.diagnose-score__label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.diagnose-score__value {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  color: var(--color-surface);
}

.diagnose-score__count {
  font-size: 4rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.diagnose-score__of {
  font-size: var(--fs-lg);
  color: rgba(255, 255, 255, 0.5);
}

.diagnose-score__pips {
  display: flex;
  gap: var(--space-2);
  margin-block: var(--space-2);
}

.diagnose-score__pip {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: transparent;
  transition: background 180ms ease, border-color 180ms ease;
}

.diagnose-score__pip--filled {
  background: var(--tool-traps-accent);
  border-color: var(--tool-traps-accent);
}

.diagnose-score__verdict {
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
}

.diagnose-score__verdict strong {
  color: var(--tool-traps-accent);
  font-weight: var(--fw-semibold);
}

.diagnose-score__verdict-variant {
  display: none;
}

.diagnose-score[data-score="0"] .diagnose-score__verdict-variant[data-range="0"],
.diagnose-score[data-score="1"] .diagnose-score__verdict-variant[data-range="0-2"],
.diagnose-score[data-score="2"] .diagnose-score__verdict-variant[data-range="0-2"],
.diagnose-score[data-score="3"] .diagnose-score__verdict-variant[data-range="3-4"],
.diagnose-score[data-score="4"] .diagnose-score__verdict-variant[data-range="3-4"],
.diagnose-score[data-score="5"] .diagnose-score__verdict-variant[data-range="5"] {
  display: block;
}

.diagnose-score__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  margin-top: var(--space-3);
  border: 0;
  border-radius: 8px;
  background: var(--tool-traps-accent);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  transition: transform 180ms ease;
}

@media (hover: hover) {
  .diagnose-score__cta:hover {
    transform: translateY(-1px);
  }
}

.diagnose__commercial {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5);
  border-left: 3px solid var(--color-accent);
  background: var(--color-surface-muted);
}

.diagnose__commercial-label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

.diagnose__commercial-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-4);
  align-items: center;
  padding-block: var(--space-2);
  border-bottom: 1px dashed var(--color-border);
}

.diagnose__commercial-row:last-child {
  border-bottom: 0;
}

.diagnose__commercial-link {
  color: var(--color-ink);
  font-weight: var(--fw-medium);
  text-decoration: none;
}

.diagnose__commercial-link:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

.diagnose__commercial-kind {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--color-ink-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}


/* ═══════════════════════════════════════════════════════════════════════════
   6. CH 2 — THE FOUR TOOLS (elevated)
   Four tool cards, each with:
     - Custom SVG motif in the tool's signature colour
     - Frequency-range strip showing what the tool actually covers
     - Colour accent (panels:blue, foam:teal, traps:amber, diffusers:violet)
     - Child-hub link + flagship affiliate link
   The colour accents are reused on the corresponding child hubs for
   cross-page family continuity.
   ═══════════════════════════════════════════════════════════════════════════ */

.tools-spread {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 700px) {
  .tools-spread {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }
}

/* Each tool card holds ~7 distinct content blocks (header, tagline, body,
   frequency strip, 2 meta sections, CTAs). Going 4-across at any viewport
   collapses each into an unreadable column, so we cap at 2 columns and
   let each card breathe at ~500-600px wide on desktop. */

.tool-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: var(--color-surface);
  overflow: hidden;
  position: relative;
  transition: border-color 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}

.tool-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--tool-accent, var(--color-accent));
  opacity: 0.9;
}

.tool-card--panels    { --tool-accent: var(--tool-panels-accent);    --tool-soft: var(--tool-panels-soft);    --tool-edge: var(--tool-panels-edge); }
.tool-card--foam      { --tool-accent: var(--tool-foam-accent);      --tool-soft: var(--tool-foam-soft);      --tool-edge: var(--tool-foam-edge); }
.tool-card--traps     { --tool-accent: var(--tool-traps-accent);     --tool-soft: var(--tool-traps-soft);     --tool-edge: var(--tool-traps-edge); }
.tool-card--diffusers { --tool-accent: var(--tool-diffusers-accent); --tool-soft: var(--tool-diffusers-soft); --tool-edge: var(--tool-diffusers-edge); }

/* Reader-state priority: when a state is active, the tool that matters most
   for that use-case floats to first position, grows a deeper shadow, and
   picks up a "Start here" badge. Other tools slide behind it. This is the
   single most visible payoff of the hero chip selection. */
.tool-card[data-priority-for] {
  transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

[data-reader-state="studio"]    .tool-card[data-priority-for~="studio"],
[data-reader-state="theatre"]   .tool-card[data-priority-for~="theatre"],
[data-reader-state="office"]    .tool-card[data-priority-for~="office"],
[data-reader-state="rehearsal"] .tool-card[data-priority-for~="rehearsal"] {
  order: -1;
  border-color: var(--tool-accent);
  box-shadow: 0 14px 36px -10px color-mix(in srgb, var(--tool-accent) 40%, transparent);
}

[data-reader-state="studio"]    .tool-card[data-priority-for~="studio"]::after,
[data-reader-state="theatre"]   .tool-card[data-priority-for~="theatre"]::after,
[data-reader-state="office"]    .tool-card[data-priority-for~="office"]::after,
[data-reader-state="rehearsal"] .tool-card[data-priority-for~="rehearsal"]::after {
  /* Sits inside the card (between the 4px top stripe and the header)
     because the card uses overflow:hidden to clip the stripe against
     the rounded corners. */
  content: "Start here";
  position: absolute;
  top: 14px;
  right: var(--space-5);
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--tool-accent);
  color: var(--color-surface);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  z-index: 2;
}

@media (hover: hover) and (pointer: fine) {
  .tool-card:hover {
    border-color: var(--tool-edge);
    transform: translateY(-2px);
    box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.08);
  }
}

.tool-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.tool-card__identity {
  display: grid;
  gap: var(--space-1);
}

.tool-card__num {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tool-accent);
  opacity: 0.9;
}

.tool-card__title {
  font-family: var(--font-sans);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  margin: 0;
}

.tool-card__title a {
  color: inherit;
  text-decoration: none;
}

.tool-card__title a:hover {
  color: var(--tool-accent);
}

.tool-card__motif {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  padding: var(--space-2);
  border-radius: 10px;
  background: var(--tool-soft);
  color: var(--tool-accent);
}

.tool-card__motif svg {
  width: 100%;
  height: 100%;
  display: block;
}

.tool-card__tagline {
  font-size: var(--fs-sm);
  font-style: italic;
  color: var(--color-ink-muted);
  margin-bottom: var(--space-4);
}

.tool-card__body {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--color-ink);
  margin-bottom: var(--space-4);
  flex: 1;
}

/* Frequency-range strip — the visual signature that tells you at a glance
   what slice of the spectrum this tool actually handles. Bar positions are
   set via CSS custom properties on .tool-card__freq-fill. */
.tool-card__freq {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  margin-bottom: var(--space-4);
  border-radius: 8px;
  background: var(--color-surface-muted);
}

.tool-card__freq-label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

.tool-card__freq-track {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.06) 0%,
    rgba(0, 0, 0, 0.06) 100%
  );
  overflow: hidden;
}

.tool-card__freq-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--freq-start, 0%);
  right: calc(100% - var(--freq-end, 100%));
  background: var(--tool-accent);
  opacity: 0.8;
  border-radius: 999px;
}

.tool-card__freq-scale {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-ink-muted);
  opacity: 0.7;
}

.tool-card__meta {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  padding: var(--space-4);
  border-left: 2px solid var(--tool-edge);
  background: var(--tool-soft);
  border-radius: 0 6px 6px 0;
}

.tool-card__meta-label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tool-accent);
}

.tool-card__meta-text {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--color-ink);
  margin: 0;
}

.tool-card__meta-row + .tool-card__meta-row {
  padding-top: var(--space-3);
  border-top: 1px dashed var(--tool-edge);
}

.tool-card__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: auto;
}

.tool-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  transition: transform 180ms ease, background 180ms ease, color 180ms ease;
}

.tool-card__cta--primary {
  background: var(--tool-accent);
  color: var(--color-surface);
}

.tool-card__cta--buy {
  border: 1px solid var(--tool-edge);
  background: transparent;
  color: var(--tool-accent);
}

.tool-card__cta--buy::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: currentColor;
}

@media (hover: hover) {
  .tool-card__cta:hover {
    transform: translateY(-1px);
  }

  .tool-card__cta--buy:hover {
    background: var(--tool-soft);
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   7. CH 3 — WHICH TOOL FOR MY ROOM (reader-state aware grid)
   A grid of decision cards. Each card asks a diagnostic question and
   routes to the right child hub. When the reader has picked a state chip
   in the hero (studio/theatre/office/rehearsal), the grid re-orders so
   the most-relevant card for that use-case moves to the front with a
   "recommended" badge.
   ═══════════════════════════════════════════════════════════════════════════ */

.which-tool {
  display: grid;
  gap: var(--space-6);
}

.which-tool__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

@media (min-width: 700px) {
  .which-tool__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1100px) {
  .which-tool__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.decision-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface);
  text-decoration: none;
  color: var(--color-ink);
  position: relative;
  transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}

.decision-card--panels    { --dc-accent: var(--tool-panels-accent);    --dc-soft: var(--tool-panels-soft);    --dc-edge: var(--tool-panels-edge); }
.decision-card--foam      { --dc-accent: var(--tool-foam-accent);      --dc-soft: var(--tool-foam-soft);      --dc-edge: var(--tool-foam-edge); }
.decision-card--traps     { --dc-accent: var(--tool-traps-accent);     --dc-soft: var(--tool-traps-soft);     --dc-edge: var(--tool-traps-edge); }
.decision-card--diffusers { --dc-accent: var(--tool-diffusers-accent); --dc-soft: var(--tool-diffusers-soft); --dc-edge: var(--tool-diffusers-edge); }

@media (hover: hover) and (pointer: fine) {
  .decision-card:hover {
    border-color: var(--dc-edge, var(--color-accent));
    transform: translateY(-2px);
    box-shadow: 0 10px 28px -8px rgba(0, 0, 0, 0.08);
  }
}

.decision-card__quote {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  color: var(--color-ink);
}

.decision-card__quote::before {
  content: "\201C";
  margin-right: 2px;
  color: var(--dc-accent, var(--color-ink-muted));
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  line-height: 0;
  vertical-align: -0.3em;
}

.decision-card__quote::after {
  content: "\201D";
  margin-left: 2px;
  color: var(--dc-accent, var(--color-ink-muted));
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  line-height: 0;
  vertical-align: -0.3em;
}

.decision-card__answer {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--color-border);
  font-size: var(--fs-sm);
  color: var(--color-ink-muted);
  line-height: 1.45;
}

.decision-card__tool-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--dc-soft);
  color: var(--dc-accent);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.decision-card__tool-tag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* Reader-state re-ordering: cards tagged with data-recommended-for="..."
   get a visual lift when the matching state is active. */
.decision-card[data-recommended-for] {
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease, order 0s;
}

[data-reader-state="studio"] .decision-card[data-recommended-for~="studio"],
[data-reader-state="theatre"] .decision-card[data-recommended-for~="theatre"],
[data-reader-state="office"] .decision-card[data-recommended-for~="office"],
[data-reader-state="rehearsal"] .decision-card[data-recommended-for~="rehearsal"] {
  /* order: -1 floats recommended cards to the top of the grid so the
     physical reorder matches the "recommended for you" badge. Without
     this the earlier iteration highlighted cards in-place, which made
     the personalisation feel half-wired. */
  order: -1;
  border-color: var(--dc-accent);
  box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--dc-accent) 35%, transparent);
}

[data-reader-state="studio"] .decision-card[data-recommended-for~="studio"]::after,
[data-reader-state="theatre"] .decision-card[data-recommended-for~="theatre"]::after,
[data-reader-state="office"] .decision-card[data-recommended-for~="office"]::after,
[data-reader-state="rehearsal"] .decision-card[data-recommended-for~="rehearsal"]::after {
  content: "Recommended for you";
  position: absolute;
  top: -10px;
  left: var(--space-4);
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--dc-accent);
  color: var(--color-surface);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.which-tool__expand {
  justify-self: start;
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease;
}

.which-tool__expand:hover {
  background: var(--color-surface-muted);
  border-color: var(--color-accent);
}

.decision-card[data-batch="2"],
.decision-card[data-batch="3"] {
  display: none;
}

[data-which-tool-batch="2"] .decision-card[data-batch="2"],
[data-which-tool-batch="3"] .decision-card[data-batch="2"],
[data-which-tool-batch="3"] .decision-card[data-batch="3"] {
  display: flex;
}


/* ═══════════════════════════════════════════════════════════════════════════
   8. CH 4 — WALK THE ROOM (additions)
   Base room-map styles live in room-map.css. These are tinted variants
   that apply the tool-colour accents based on a data-tool attribute on
   each marker, and reader-state filtering so studio users see different
   active markers than theatre users.
   ═══════════════════════════════════════════════════════════════════════════ */

.room-marker[data-tool="panels"]    { --room-marker-accent: var(--tool-panels-accent); }
.room-marker[data-tool="foam"]      { --room-marker-accent: var(--tool-foam-accent); }
.room-marker[data-tool="traps"]     { --room-marker-accent: var(--tool-traps-accent); }
.room-marker[data-tool="diffusers"] { --room-marker-accent: var(--tool-diffusers-accent); }

.room-marker[data-tool] .room-marker__core {
  fill: var(--room-marker-accent, var(--color-accent));
}

.room-marker[data-tool] .room-marker__shape {
  fill: color-mix(in srgb, var(--room-marker-accent) 18%, transparent);
  stroke: var(--room-marker-accent, var(--color-accent));
}

/* Reader-state filtering: fade out markers that don't apply to the current
   use-case so the reader sees a tailored room at a glance. */
[data-reader-state] .room-marker[data-priority-for]:not([data-priority-for~="all"]) {
  opacity: 0.28;
  transition: opacity 240ms ease;
}

[data-reader-state="studio"]   .room-marker[data-priority-for~="studio"],
[data-reader-state="theatre"]  .room-marker[data-priority-for~="theatre"],
[data-reader-state="office"]   .room-marker[data-priority-for~="office"],
[data-reader-state="rehearsal"] .room-marker[data-priority-for~="rehearsal"] {
  opacity: 1;
}

/* Parallel behaviour for the .room-zone cards beneath the SVG so they
   match the marker above them. Non-priority zones dim; priority zones
   get a coloured border + number pill to feel "promoted". */
[data-reader-state] .room-zone[data-priority-for] {
  opacity: 0.4;
  transition: opacity 240ms ease, border-color 240ms ease, transform 240ms ease;
}

[data-reader-state="studio"]   .room-zone[data-priority-for~="studio"],
[data-reader-state="theatre"]  .room-zone[data-priority-for~="theatre"],
[data-reader-state="office"]   .room-zone[data-priority-for~="office"],
[data-reader-state="rehearsal"] .room-zone[data-priority-for~="rehearsal"] {
  opacity: 1;
  border-color: var(--zone-accent, var(--color-accent));
}

/* Matching fade on the room-zone detail cards */
.room-zone[data-tool="panels"]    { --zone-accent: var(--tool-panels-accent); }
.room-zone[data-tool="foam"]      { --zone-accent: var(--tool-foam-accent); }
.room-zone[data-tool="traps"]     { --zone-accent: var(--tool-traps-accent); }
.room-zone[data-tool="diffusers"] { --zone-accent: var(--tool-diffusers-accent); }

.room-zone[data-tool] .room-zone__number {
  color: var(--zone-accent);
}

.room-zone[data-tool] .room-zone__tool strong {
  color: var(--zone-accent);
}

/* Distance-from-wall micro-chip shown under each zone title */
.room-zone__spec {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-1);
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--color-surface-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--color-ink-muted);
}

.room-zone__spec::before {
  content: "\2194";
  font-size: 11px;
  color: var(--zone-accent, var(--color-accent));
}


/* ═══════════════════════════════════════════════════════════════════════════
   9. CH 5 — COST ATLAS
   Per-tool stacked bars showing DIY / Starter / Flagship tiers. Each tier
   is an affiliate entry-point. Bars use the tool's accent colour with
   three intensity levels so the same colour reads as cheap→expensive.
   ═══════════════════════════════════════════════════════════════════════════ */

.cost-atlas {
  display: grid;
  gap: var(--space-6);
}

.cost-atlas__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--color-ink-muted);
}

.cost-atlas__legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.cost-atlas__legend-swatch {
  width: 16px;
  height: 12px;
  border-radius: 3px;
  background: var(--color-ink);
  opacity: var(--swatch-opacity, 1);
}

.cost-atlas__rows {
  display: grid;
  gap: var(--space-4);
}

.cost-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface);
}

@media (min-width: 900px) {
  .cost-row {
    grid-template-columns: 180px 1fr;
    gap: var(--space-6);
    align-items: center;
  }
}

.cost-row--panels    { --cr-accent: var(--tool-panels-accent);    --cr-soft: var(--tool-panels-soft); }
.cost-row--foam      { --cr-accent: var(--tool-foam-accent);      --cr-soft: var(--tool-foam-soft); }
.cost-row--traps     { --cr-accent: var(--tool-traps-accent);     --cr-soft: var(--tool-traps-soft); }
.cost-row--diffusers { --cr-accent: var(--tool-diffusers-accent); --cr-soft: var(--tool-diffusers-soft); }

.cost-row__label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cost-row__tool {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--cr-accent);
}

.cost-row__sub {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--color-ink-muted);
}

.cost-row__bars {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cost-tier {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: var(--space-3);
  align-items: center;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
}

.cost-tier__name {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

.cost-tier__bar-wrap {
  height: 20px;
  border-radius: 4px;
  background: var(--color-surface-muted);
  overflow: hidden;
  position: relative;
}

.cost-tier__bar {
  height: 100%;
  background: var(--cr-accent);
  opacity: var(--tier-opacity, 0.5);
  border-radius: 4px;
  width: var(--tier-width, 30%);
  transition: opacity 200ms ease, width 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.cost-tier--diy      { --tier-opacity: 0.45; }
.cost-tier--starter  { --tier-opacity: 0.70; }
.cost-tier--flagship { --tier-opacity: 1.00; }

.cost-tier__price {
  font-family: var(--font-mono);
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  white-space: nowrap;
}

.cost-tier__link {
  grid-column: 1 / -1;
  padding: var(--space-2) 0;
  font-size: var(--fs-sm);
  color: var(--color-ink-muted);
  text-decoration: none;
  border-bottom: 1px dashed transparent;
  transition: color 180ms ease, border-color 180ms ease;
}

.cost-tier__link:hover {
  color: var(--cr-accent);
  border-bottom-color: var(--cr-accent);
}

.cost-tier__link-affiliate {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.cost-tier__link-affiliate::after {
  content: "\2197";
  font-size: 11px;
}

.cost-atlas__total {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-ink);
  color: var(--color-surface);
}

.cost-atlas__total-label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.cost-atlas__total-value {
  font-family: var(--font-sans);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--color-surface);
}

.cost-atlas__total-range {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.cost-atlas__total-range span {
  font-variant-numeric: tabular-nums;
}

.cost-atlas__total-meta {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
}


/* ═══════════════════════════════════════════════════════════════════════════
   10. CH 6 — FLAGSHIP PICKS
   "If you buy only one thing from each category, it's these 4."
   Highest-converting chapter. Four product cards with concrete picks,
   price, why/where-it-fails blurbs, and a DIY fork.
   ═══════════════════════════════════════════════════════════════════════════ */

.flagship-picks {
  display: grid;
  gap: var(--space-6);
}

.flagship-picks__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 700px) {
  .flagship-picks__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }
}

/* Match the 2-column max of the tool-cards grid above — flagship picks
   are equally content-dense (category + title + price + 2 reasons + 2 CTAs)
   and deserve the same luxury width. */

.pick-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: var(--color-surface);
  position: relative;
  overflow: hidden;
  transition: border-color 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}

.pick-card--panels    { --pc-accent: var(--tool-panels-accent);    --pc-soft: var(--tool-panels-soft);    --pc-edge: var(--tool-panels-edge); }
.pick-card--foam      { --pc-accent: var(--tool-foam-accent);      --pc-soft: var(--tool-foam-soft);      --pc-edge: var(--tool-foam-edge); }
.pick-card--traps     { --pc-accent: var(--tool-traps-accent);     --pc-soft: var(--tool-traps-soft);     --pc-edge: var(--tool-traps-edge); }
.pick-card--diffusers { --pc-accent: var(--tool-diffusers-accent); --pc-soft: var(--tool-diffusers-soft); --pc-edge: var(--tool-diffusers-edge); }

/* Reader-state priority: when a state is active, the pick that matters
   most for that use-case floats to first position, gets a coloured
   border + accent-shadow, and picks up a "Your first buy" badge. */
[data-reader-state="studio"]    .pick-card[data-priority-for~="studio"],
[data-reader-state="theatre"]   .pick-card[data-priority-for~="theatre"],
[data-reader-state="office"]    .pick-card[data-priority-for~="office"],
[data-reader-state="rehearsal"] .pick-card[data-priority-for~="rehearsal"] {
  order: -1;
  border-color: var(--pc-accent);
  box-shadow: 0 14px 36px -10px color-mix(in srgb, var(--pc-accent) 40%, transparent);
}

[data-reader-state="studio"]    .pick-card[data-priority-for~="studio"]::after,
[data-reader-state="theatre"]   .pick-card[data-priority-for~="theatre"]::after,
[data-reader-state="office"]    .pick-card[data-priority-for~="office"]::after,
[data-reader-state="rehearsal"] .pick-card[data-priority-for~="rehearsal"]::after {
  /* Inside the card (overflow:hidden clips the 3px top stripe), so the
     badge sits just below the stripe at top: 12px. */
  content: "Your first buy";
  position: absolute;
  top: 12px;
  right: var(--space-4);
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--pc-accent);
  color: var(--color-surface);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  z-index: 2;
}

.pick-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--pc-accent);
}

@media (hover: hover) and (pointer: fine) {
  .pick-card:hover {
    border-color: var(--pc-edge);
    transform: translateY(-3px);
    box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.12);
  }
}

.pick-card__category {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pc-accent);
  margin-top: var(--space-2);
}

.pick-card__product {
  margin-top: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.pick-card__price {
  margin-top: var(--space-3);
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
}

.pick-card__price-currency {
  font-size: var(--fs-sm);
  color: var(--color-ink-muted);
}

.pick-card__price-value {
  font-size: var(--fs-xl);
}

.pick-card__reasons {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px dashed var(--color-border);
  flex: 1;
}

.pick-card__reason {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2);
  align-items: start;
}

.pick-card__reason-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
}

.pick-card__reason--pro .pick-card__reason-icon {
  color: var(--pc-accent);
}

.pick-card__reason--con .pick-card__reason-icon {
  color: var(--color-ink-muted);
  opacity: 0.6;
}

.pick-card__reason-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pc-accent);
  display: block;
  margin-bottom: 2px;
}

.pick-card__reason--con .pick-card__reason-label {
  color: var(--color-ink-muted);
}

.pick-card__reason-text {
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--color-ink);
}

.pick-card__ctas {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.pick-card__cta--buy {
  padding: var(--space-3) var(--space-4);
  border-radius: 8px;
  background: var(--pc-accent);
  color: var(--color-surface);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  text-align: center;
  text-decoration: none;
  transition: transform 180ms ease;
}

.pick-card__cta--buy:hover {
  transform: translateY(-1px);
}

.pick-card__cta--diy {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-ink-muted);
  text-decoration: none;
  border-bottom: 1px dashed transparent;
  padding-bottom: 2px;
}

.pick-card__cta--diy:hover {
  color: var(--pc-accent);
  border-bottom-color: var(--pc-accent);
}


/* ═══════════════════════════════════════════════════════════════════════════
   11. CH 7 — VERIFY + MYTHS
   Split layout: verification check-list on the left, myth-buster grid
   on the right. Each myth has a red X for the myth and a green tick
   for the correction.
   ═══════════════════════════════════════════════════════════════════════════ */

.verify-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

@media (min-width: 1000px) {
  .verify-split {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10);
  }
}

.verify-list {
  display: grid;
  gap: var(--space-4);
}

.verify-list__title {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  margin: 0;
}

.verify-list__items {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: verify-n;
  display: grid;
  gap: var(--space-3);
}

.verify-item {
  counter-increment: verify-n;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface);
}

.verify-item::before {
  content: counter(verify-n, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-accent);
  align-self: start;
}

.verify-item__body {
  display: grid;
  gap: var(--space-2);
}

.verify-item__title {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  margin: 0;
}

.verify-item__test {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--color-ink-muted);
  margin: 0;
}

.verify-item__pass-criterion {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-1);
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--tool-foam-soft);
  color: var(--tool-foam-accent);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.verify-item__pass-criterion::before {
  content: "\2713";
}

/* ── Myth grid ────────────────────────────────────────────────────────── */
.myth-grid {
  display: grid;
  gap: var(--space-4);
}

.myth-grid__title {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  margin: 0;
}

.myth-cell {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface);
}

.myth-cell__marker {
  display: grid;
  grid-template-rows: auto auto;
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: 6px;
  background: var(--color-surface-muted);
}

.myth-cell__x,
.myth-cell__tick {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: var(--fw-bold);
}

.myth-cell__x {
  background: rgba(239, 68, 68, 0.15);
  color: #EF4444;
}

.myth-cell__x::before { content: "\2715"; }

.myth-cell__tick {
  background: rgba(16, 185, 129, 0.15);
  color: #10B981;
}

.myth-cell__tick::before { content: "\2713"; }

.myth-cell__body {
  display: grid;
  gap: var(--space-3);
}

.myth-cell__myth {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--color-ink-muted);
  text-decoration: line-through;
  text-decoration-color: rgba(239, 68, 68, 0.6);
  text-decoration-thickness: 1.5px;
  margin: 0;
  line-height: 1.35;
}

.myth-cell__reality {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--color-ink);
  margin: 0;
}

.myth-cell__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--color-ink-muted);
}

.myth-cell__link {
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: 1px dashed var(--color-border);
  padding-bottom: 1px;
  transition: color 180ms ease, border-color 180ms ease;
}

.myth-cell__link:hover {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}


/* ═══════════════════════════════════════════════════════════════════════════
   POLISH — shared helpers used across chapters
   ═══════════════════════════════════════════════════════════════════════════ */

.chapter {
  scroll-margin-top: var(--space-20);
}

@media (min-width: 1100px) {
  .chapter {
    scroll-margin-top: var(--space-10);
  }
}

.chapter-commercial-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: 8px;
  background: var(--color-surface-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--color-ink-muted);
}

.chapter-commercial-row__label {
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink);
}

.chapter-commercial-row__link {
  color: var(--color-accent);
  text-decoration: none;
}

.chapter-commercial-row__link:hover {
  text-decoration: underline;
}

/* Prose helpers for chapter lede text */
.chapter-lede {
  max-width: 72ch;
  margin: var(--space-3) 0 0;
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--color-ink-muted);
}

.chapter-lede em {
  font-style: italic;
  color: var(--color-ink);
}

/* Reader-state-aware copy variants — hide by default, reveal when matching */
.for-reader-state {
  display: none;
}

[data-reader-state="studio"]    .for-reader-state[data-state="studio"],
[data-reader-state="theatre"]   .for-reader-state[data-state="theatre"],
[data-reader-state="office"]    .for-reader-state[data-state="office"],
[data-reader-state="rehearsal"] .for-reader-state[data-state="rehearsal"] {
  display: inline;
}

/* Show the "no state selected" copy only when no state is active */
[data-reader-state] .for-reader-state[data-state="none"] {
  display: none;
}

body:not([data-reader-state]) .for-reader-state[data-state="none"] {
  display: inline;
}