/* Wattaroo clay card system (Dan, 2026-10-31): every card group on the site takes the exact look of the
   "NYC context" evidence cards in clay.css and launch.css, and the second card of a group takes the yellow
   "1.5M more households" feature surface. Loaded after clay.css and clay-refinements.css, so it wins.
   Values are copied from .evidence-card and .evidence-card:nth-child(2); change them there and here together. */
:root{--clay-feature:linear-gradient(145deg,#FFF3BF 0%,#FFE88A 100%);--clay-card-shadow:0 14px 34px rgba(103,61,7,.16),0 3px 8px rgba(103,61,7,.08),inset 2px 2px 6px var(--clay-light),inset -3px -3px 8px var(--clay-shade)}

/* Reusable names for new pages. */
.clay-card,
.outcome-grid article,.pathway-grid article,.benefit-grid article,.knowledge-grid p,.truth-card>div,.question-list li{
  display:flex;flex-direction:column;padding:28px;border:1px solid var(--clay-line)!important;border-radius:var(--radius);
  background:var(--clay-feature)!important;box-shadow:var(--clay-card-shadow)!important}
.evidence-card,.evidence-action{background:var(--clay-feature)!important}
.clay-card.feature,
.outcome-grid article:nth-child(2),.pathway-grid article:nth-child(2),.benefit-grid article:nth-child(2),.knowledge-grid p:nth-child(2),.truth-card>div:nth-child(2),.question-list li:nth-child(2){
  background:var(--clay-feature)!important}
.clay-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:38px}
.clay-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.clay-grid,.clay-grid.three{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.clay-grid,.clay-grid.three{grid-template-columns:minmax(0,1fr)}.clay-card,.outcome-grid article,.pathway-grid article,.benefit-grid article,.knowledge-grid p,.truth-card>div,.question-list li{padding:23px}}

/* Type, as in the NYC cards: big stat, uppercase tracked heading, muted 14px body, source pinned to the bottom. */
.clay-stat,.truth-card strong{font-size:56px;line-height:1;font-weight:850;letter-spacing:-3px;margin:0}
.clay-card h3,.outcome-grid h3,.pathway-grid h3,.benefit-grid h3{font-size:16px;text-transform:uppercase;letter-spacing:.8px}
.clay-card>p:not(.clay-stat):not(.clay-kicker),.outcome-grid article>p,.benefit-grid article>p,.truth-card p,.pathway-grid p:last-child{color:var(--muted);font-size:14px;margin:0 0 11px}
.clay-kicker{margin:0;color:#785200;font-size:10px;font-weight:850;letter-spacing:1.1px;line-height:1.4;text-transform:uppercase}
.clay-card .source,.clay-card>a:last-child{margin-top:auto}
@media(max-width:640px){.clay-stat,.truth-card strong{font-size:49px}}

/* The strip of joined cells becomes separate cards, like the NYC row. */
.truth-card{gap:16px!important;overflow:visible!important;border:0!important;background:transparent!important}
.truth-card strong{font-size:40px;letter-spacing:-2px}
.knowledge-grid p{border-left:1px solid var(--clay-line)!important;color:var(--muted)}

/* Every content band gets the NYC section's soft two-glow surface. */
.band,.section{background:radial-gradient(120% 90% at 10% 6%,rgba(255,255,255,.55),transparent 52%),radial-gradient(130% 100% at 92% 96%,rgba(103,61,7,.06),transparent 55%),#fff8e7}
.wrap.section{background:none}
/* Chips and status pills keep their own width inside the column cards; headings keep the NYC spacing. */
.clay-card>.status,.clay-card>span,.outcome-grid article>span,.outcome-grid article>.status,.pathway-grid article>.status,.benefit-grid article>span{align-self:flex-start}
.clay-card h3,.outcome-grid h3,.pathway-grid h3,.benefit-grid h3{margin:12px 0 8px!important}
.truth-card strong{font-size:34px;letter-spacing:-1.5px;white-space:nowrap}

/* Dan, 2026-10-31: no boxes inside cards. The number stands alone in the stat style; labels and outcomes are plain text. */
.outcome-meta{margin-top:auto!important;padding:8px 0 0!important;border:0!important;background:none!important;box-shadow:none!important;color:#5b4a2e;font-size:12px;font-weight:750}
.clay-card .clay-stat+h3,.outcome-grid .clay-stat+h3,.benefit-grid .clay-stat+h3{margin-top:12px!important}
.outcome-grid .clay-stat,.benefit-grid .clay-stat{font-size:48px}
.clay-stat{color:var(--ink)!important}

/* The "Which sounds like you?" cards are links: no underline on the card text, underline the heading on hover. Focus uses the global a:focus-visible ring. */
a.clay-card{text-decoration:none}
a.clay-card:hover h3{text-decoration:underline;text-underline-offset:4px}
/* Program directory (programs.html, 2026-10-31). */
.state-index{display:flex;flex-wrap:wrap;gap:8px 14px;margin:22px 0;font-size:14px}.state-index a{min-height:44px;display:inline-flex;align-items:center;color:var(--ink)}
.clay-card h4{font-size:17px;line-height:1.3;margin:8px 0 4px}.clay-card .how{margin:6px 0 10px;padding-left:18px;font-size:14px;line-height:1.5}.clay-card .how a{color:var(--ink)}
.band h3{font-size:16px;text-transform:uppercase;letter-spacing:.8px;margin:34px 0 0}.band h2 .count{color:var(--muted);font-weight:600}
/* Long emails and links in program cards wrap instead of widening the page (2026-10-31). */
.clay-card .how,.clay-card .source{overflow-wrap:anywhere}