/* =====================================================================
   CFR CONDITION / TECHNIQUE PAGES — shared page-type stylesheet
   ---------------------------------------------------------------------
   Loads AFTER cfr2.css + chrome.css. These pages ride the cfr2 "Warm
   Authority" system: violet hero band (lavender eyebrow, white serif H1),
   AQUA answer-first panel (the FAD treatment — never mint/green-on-dark),
   light body bands (cream base alternating with white .section-cream),
   coral action lane, aqua closing band.
   Band law: violet is reserved for the hero; the closing band is aqua;
   never two violet bands adjacent (js/reveal.js also enforces at runtime).
   ===================================================================== */

/* ---------- HERO (violet authority band) ---------- */
.cond-hero{padding:56px 0 70px}
.cond-crumb{font-size:.84rem;font-weight:600;letter-spacing:.05em;color:rgba(255,255,255,.55);margin-bottom:26px}
.cond-crumb a{color:rgba(255,255,255,.66);transition:color .15s ease}
.cond-crumb a:hover{color:#fff}
.cond-crumb span{color:rgba(255,255,255,.35);margin:0 9px}
.cond-crumb b{color:rgba(255,255,255,.85);font-weight:600}
.cond-hero h1{max-width:26ch}
.hero-context{margin:24px auto 0;max-width:62ch;color:rgba(255,255,255,.85);font-size:1.12rem;line-height:1.6}
.hero-band .hero-cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:32px}

/* ---------- ANSWER-FIRST PANEL (the aqua treatment) ---------- */
.answer-first{margin:30px auto 0;max-width:780px;text-align:left;border-radius:var(--radius);padding:26px 30px;
  background:#DFF2EA;border:1.5px solid rgba(143,211,193,.7);border-left:4px solid #5FB49E;
  box-shadow:0 14px 34px rgba(29,18,64,.35)}
.answer-first .answer-label{display:block;font-weight:800;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:#2E5C4E;margin-bottom:12px}
.answer-first p{margin:0;color:#17262F;font-size:1.12rem;line-height:1.65}
.answer-first p strong{color:#17262F;font-weight:800}
.answer-first p .accent,.answer-first p em{color:#0F3E30;font-weight:800;font-style:normal}

/* ---------- SECTION HEADS ---------- */
.sect-sub{color:var(--muted);font-size:1.35rem;line-height:1.55;max-width:64ch;margin:16px 0 0}
.sect-sub.center{margin-left:auto;margin-right:auto;text-align:center}
.eyebrow.text-center{text-align:center}

/* ---------- MECHANISM SPLIT (prose + white aside card) ---------- */
.mech-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,5vw,68px);align-items:center;margin-top:38px}
.prose .mech-lead,.prose .lead-quote{font-size:1.62rem;line-height:1.5;color:var(--ink);font-weight:500}
.mech-aside{background:var(--surface);border:2px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:34px 32px}
.mech-aside h3{margin-bottom:22px}
.mech-steps{list-style:none;margin:0;padding:0;counter-reset:step;display:grid;gap:20px}
.mech-steps li{position:relative;padding-left:56px;color:var(--muted);font-size:1.12rem;line-height:1.55;counter-increment:step}
.mech-steps li::before{content:counter(step);position:absolute;left:0;top:2px;width:38px;height:38px;border-radius:50%;
  background:rgba(206,58,30,.1);color:var(--action);font-family:var(--font-d);font-weight:600;font-size:1.12rem;
  display:inline-flex;align-items:center;justify-content:center}
.mech-steps strong{color:var(--ink);display:block;margin-bottom:2px}

/* ---------- CARD GRIDS (white cards on the light bands) ---------- */
.card-grid{display:grid;gap:24px;margin-top:36px}
.card-grid.cols-2{grid-template-columns:repeat(2,1fr)}
.card-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.card-grid.cols-4{grid-template-columns:repeat(4,1fr)}
.card-grid + .card-grid{margin-top:24px}
.mech-grid .card-grid{margin-top:0;align-content:start}
.pop-card{background:var(--surface);border:2px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:30px 28px}
.pop-card h3{margin-bottom:10px}
.pop-card p{color:var(--muted);font-size:1.15rem;line-height:1.6}
.pop-num{display:block;font-family:var(--font-d);font-weight:600;font-size:1.7rem;color:var(--action);line-height:1;margin-bottom:12px}
.pop-step,.pop-day{display:inline-block;font-weight:800;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--action);margin-bottom:10px}

/* ---------- FAQ (white cards, coral spine, document-scale questions) ---------- */
.faq-list{max-width:900px;margin:38px auto 0;display:grid;gap:18px}
.faq-item{background:var(--surface);border:2px solid var(--line);border-left:4px solid var(--action);border-radius:var(--radius);
  box-shadow:var(--shadow-card);padding:28px 32px;text-align:left}
.faq-item h3{font-size:clamp(1.5rem,2.2vw,1.9rem);margin-bottom:10px}
.faq-item p{color:var(--muted);font-size:1.15rem;line-height:1.65}

/* ---------- RELATED CONDITION CARDS (the hub card-link idiom) ---------- */
.grid.cond-related{margin-top:38px}
.grid .card.card-link{display:flex;flex-direction:column}
.card.card-link p{flex:1}
.card .more{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:.92rem;color:var(--action)}

/* ---------- CHIPS (hub treatment) ---------- */
.chip-cloud{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:880px;margin:30px auto 0}
.chip{background:var(--surface);border:2px solid var(--line);color:var(--muted);border-radius:999px;
  padding:11px 22px;font-weight:600;font-size:.96rem;letter-spacing:.01em}

/* ---------- DISCLAIMER (hub treatment) ---------- */
.med-disclaimer{max-width:820px;margin:40px auto 0;padding-top:22px;border-top:2px solid var(--line);
  font-size:.98rem;line-height:1.6;color:var(--muted);text-align:center}
.med-disclaimer strong{color:var(--ink)}
.med-disclaimer p{margin:0;font-size:inherit;color:inherit}

/* ---------- FINAL CTA actions ---------- */
.final-cta-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* ---------- RESPONSIVE ---------- */
@media(max-width:980px){
  .mech-grid{grid-template-columns:1fr;gap:38px}
  .card-grid.cols-3,.card-grid.cols-4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:680px){
  .card-grid.cols-2,.card-grid.cols-3,.card-grid.cols-4{grid-template-columns:1fr}
  .answer-first{padding:22px 22px}
  .faq-item{padding:24px 22px}
  .cond-hero{padding:44px 0 56px}
}