/* Home page only: the two audience entries, the materials teaser, the steps summary, the quote call to action.
   Everything reuses the tag, plate, and panel language from styles.css. */

/* ---------- audience entries: one row per audience, a large tag beside its description, samples, and links ---------- */
.paths{margin-top:2.25rem;border-top:1px solid var(--line)}
.path{display:grid;grid-template-columns:minmax(0,19rem) minmax(0,1fr);gap:1.5rem clamp(1.5rem,4vw,3.5rem);align-items:start;
  padding-block:clamp(1.5rem,3.5vw,2.25rem);border-bottom:1px solid var(--line)}
.path-tag{margin:0;width:100%;min-height:5.5em;font-size:clamp(1.5rem,2.4vw,1.75rem);font-weight:700;line-height:1.05;padding:.8em 1.2em}
.path-tag small{display:block;margin-top:.55em;font-size:.5em;line-height:1.25}
.path-tag .hole{width:.36em;height:.36em}
.path p{color:var(--ink)}
.samples{display:flex;flex-wrap:wrap;gap:.7rem .9rem;margin:0 0 1.25rem}
.samples .tag{font-size:.82rem}
.go-row{display:flex;flex-wrap:wrap;gap:.4rem 1.75rem;margin:0}
.go{font:600 1.08rem var(--display);letter-spacing:.03em;text-decoration:underline;text-decoration-color:var(--orange);
  text-decoration-thickness:3px;text-underline-offset:.3em}
.go:hover{text-decoration-color:var(--ink)}
@media (max-width:820px){
  .path{grid-template-columns:1fr}
  .path-tag{width:min(100%,20rem);min-height:0}
}

/* ---------- materials teaser: the laser's rating plate beside the short lists ---------- */
.capacity{padding-top:clamp(.5rem,2vw,1.5rem)}
.capacity-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,17rem);gap:2rem clamp(1.5rem,5vw,4.5rem);align-items:center}
.spec{width:100%;font-size:clamp(2.4rem,5vw,3.4rem);font-weight:700;line-height:1;padding:.7em 1em}
.spec small{display:block;margin-top:.5em;font-size:.34em;line-height:1.2}
.spec small + small{margin-top:.25em}
.spec .hole{width:.2em;height:.2em}
.capacity .lede{text-wrap:pretty}
.matlist{margin:1.5rem 0 1.25rem}
.matlist dt{font:600 1.05rem var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.matlist dd{margin:.15rem 0 1rem;max-width:62ch}
@media (max-width:760px){
  .capacity-grid{grid-template-columns:1fr}
  .spec{width:min(100%,17rem);justify-self:start}
}

/* ---------- steps summary ---------- */
.band .go-row{margin-top:2rem}

/* ---------- quote call to action: a panel plate, like the hero and the page headers ---------- */
.closing-plate{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.5rem clamp(1.5rem,4vw,3rem);align-items:center}
.closing-plate h2{margin:0 0 .6rem}
.closing-plate .fine{color:#16181A;margin:.9rem 0 0}
@media (prefers-color-scheme:dark){.closing-plate .fine{color:#EDEFEE}}
@media (max-width:760px){.closing-plate{grid-template-columns:1fr}}