/* =============================================================================
   ODUEX — /teardown/ page layout.
   Arrangement only. The diagnostic itself is styled by feature-teardown.css and
   every component, token and type style comes from core.css. Nothing here
   restyles a component, redeclares a token or invents a value.
   ============================================================================= */

/* ── 1. Hero → diagnostic. The page is one continuous thing, not a hero band
   followed by a widget band, so the two are pulled together: the hero gives up
   its bottom air and the teardown section starts flush against it. Without
   this, --section-lg and --section-md stack into roughly 380px of nothing
   between the offer and the first question. ── */
.page-teardown .td-hero .eyebrow{
  margin-bottom: var(--space-6);
}
.page-teardown .td-hero .lede{
  margin-top: var(--space-6);
}
.page-teardown .td-hero .td-hero-note{
  margin-top: var(--space-6);
}
.page-teardown .td-hero{
  padding-bottom: var(--section-sm);
}
.page-teardown .teardown{
  padding-top: 0;
}

/* The H1 steps down below 375px, because a masked line that wraps reveals as
   one block. --fs-hero bottoms out at its 2.90rem floor while the column keeps
   shrinking, so at a 320 viewport the longest line measures 293 against a 280
   column and wraps. --fs-5xl only reaches 44.8px there and still overruns by
   three. --fs-4xl brings it to 222/280. Same step, same reason, as the
   homepage hero. */
@media (max-width: 374px){
  .page-teardown .td-hero h1{ font-size: var(--fs-4xl); }
}

/* ── 2. What comes back — the closing note and its CTA sit clear of the card
   row. Rhythm inside the block is the .stack helper's, not a rule here. ── */
.page-teardown .td-after-close{
  margin-top: var(--space-12);
}