/* ------------------------------------------------------------------
   Landing-page styles ONLY. Palette, typography, buttons, eyebrow,
   sections, cards, callouts, header and footer all come from the linked
   brand.css. Everything here is scoped to .cwl (claudework landing) or to
   the page-local hero so it cannot bleed into shared brand components.
   ------------------------------------------------------------------ */
html{ scroll-padding-top:80px; }

/* Hero: reuse the brand .hero (green + flowing-shapes art, white text).
   Eyebrow defaults to --primary, which is too dark on the green hero, so
   lift it to --primary-light for contrast (matches the module's hero). */
/* Hero scrim: guarantee text and control contrast over the brand hero's
   background image, regardless of where its lighter areas crop. */
.hero{ position:relative; }
.hero::before{ content:""; position:absolute; inset:0; z-index:0; background:linear-gradient(180deg, rgba(26,58,46,0.55) 0%, rgba(26,58,46,0.82) 100%); }
.hero > .container{ position:relative; z-index:1; }
.hero .eyebrow{ color:var(--primary-light); }

/* Headline: force white on the dark hero. A global h1 color rule would
   otherwise beat the inherited white and render the lead line dark. */
.hero h1{ margin:0; max-width:22ch; color:var(--bg-white); }
.cwl-h1-lead{ display:block; font-size:var(--text-display); line-height:1.1; }
.cwl-h1-sub{ display:block; font-size:var(--text-xl); font-weight:400; color:var(--primary-light); line-height:1.25; margin-top:var(--space-sm); max-width:26ch; }
@media (max-width:560px){ .cwl-h1-lead{ font-size:var(--text-3xl); } .cwl-h1-sub{ font-size:var(--text-lg); } }
.hero .intro{ color:var(--bg-white); max-width:60ch; }

/* Paragraph + list rhythm: brand.css zeroes block margins, so any bare
   prose block needs its own vertical rhythm. Scope it to the page wrapper. */
.cwl p{ margin-bottom:var(--space-md); }
.cwl p:last-child{ margin-bottom:0; }
.cwl ul{ margin:var(--space-md) 0 var(--space-lg); padding-left:1.25em; }
.cwl li{ margin-bottom:var(--space-xs); }

.cwl-prose{ max-width:var(--reading-max); }
.cwl-prose > * + *{ margin-top:var(--space-lg); }

/* Four equal reasons read best as a balanced 2x2 on wider screens
   (brand's auto-fit grid would leave an orphan in a 3-up row). */
@media (min-width:680px){ .cwl-grid-2{ grid-template-columns:1fr 1fr; } }

/* Numbered reason badge on the "why" cards */
.cwl-card__num{
  display:inline-grid; place-items:center; width:34px; height:34px;
  border-radius:50%; background:var(--tint-green); color:var(--primary-dark);
  font-weight:700; font-size:var(--text-base); flex:none;
}

/* Facilitator callout: a touch more presence than a default callout */
.cwl-facilitator{ background:var(--bg-white); }
.cwl-facilitator h2{ margin-top:0; }
.cwl-facilitator .cwl-facilitator__line{
  font-size:var(--text-lg); color:var(--text-primary); font-weight:700;
}
.cwl-actions{ display:flex; flex-wrap:wrap; gap:var(--space-md); margin-top:var(--space-lg); }