/* ==========================================================================
   Dairy Connect — GROW by Dairy Connect (/grow/).
   Ported 3 Sep 2026 from the GROW build (commit 1fcaef2) onto the hardened
   design system. Pairs with tokens.css + chrome.css + pages.css.
   Audit corrections applied here, not in the markup:
     - one card treatment (--pad-card, --border-card, --radius-lg) for scenario,
       leader and availability cards; 3px top rule for steps; hairline for lists
     - all supporting copy = --type-small (15px/400); labels = --type-eyebrow (12px)
     - every prose measure capped in ch, not px
     - grid gaps from the 16/24/32/48 scale
     - a restrained mobile sticky CTA (StickyContextCTA), shown only mid-page
   ========================================================================== */

/* section rhythm ----------------------------------------------------------- */
.band__head--wide h2{max-width:840px}

/* prose blocks ------------------------------------------------------------- */
.grow-prose{max-width:var(--measure)}
.grow-prose p{font-size:var(--text-prose);font-weight:300;line-height:1.7;color:var(--text-body);margin:0 0 18px;max-width:var(--measure)}
.grow-prose p:last-child{margin-bottom:0}
.grow-prose strong{font-weight:700;color:var(--ink)}
.grow-prose em{font-style:italic}
.band--ink .grow-prose p{color:color-mix(in oklab,var(--paper) 86%,transparent)}
.band--ink .grow-prose strong{color:var(--paper)}
.grow-prose__pull{font-size:var(--text-read);font-weight:700;line-height:1.45;color:var(--ink);border-left:3px solid var(--orange-500);padding-left:20px;margin:26px 0 0}
.grow-prose__h3{font-size:var(--text-read);font-weight:800;margin:0 0 12px;color:var(--ink)}
.phero__note{font:var(--type-small);color:color-mix(in oklab,var(--paper) 74%,transparent);margin:22px 0 0}
.phero .phero__sub + .phero__sub{margin-top:-10px}

/* notes under grids -------------------------------------------------------- */
.proof-note{font:var(--type-small);color:color-mix(in oklab,var(--paper) 72%,transparent);max-width:var(--measure);margin:var(--space-8) 0 0}
.proof-note strong{font-weight:700;color:color-mix(in oklab,var(--paper) 90%,transparent)}
.proof-note--paper{color:var(--text-muted)}
/* On the ink ground the default link colour is 3.12:1 on the background and 1.06:1 against
   the surrounding text, so it fails both contrast and "not by colour alone". */
.proof-note a{color:var(--orange-300);text-decoration:underline;text-underline-offset:2px}
.proof-note a:hover{color:var(--orange-200)}
.proof-note--paper a{color:var(--text-link)}
.proof-note--paper a:hover{color:var(--text-link-hover)}

/* seven disciplines -------------------------------------------------------- */
.disc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-8) var(--space-12)}
.disc h3{font-size:var(--text-md);font-weight:800;line-height:1.3;margin:0 0 8px;color:var(--ink)}
.disc h3::before{content:"";display:block;width:30px;height:3px;border-radius:2px;background:var(--orange-500);margin-bottom:14px}
.disc p{font:var(--type-small);color:var(--text-muted);margin:0;max-width:var(--measure)}

/* the eight questions: a diagnostic instrument, not eight cards ------------- */
.qlist{list-style:none;counter-reset:q;display:grid;grid-template-columns:1fr 1fr;gap:0 var(--space-12);margin:0;padding:0}
.qitem{counter-increment:q;position:relative;padding:var(--space-5) 0 var(--space-5) 46px;border-top:1px solid var(--border-default)}
.qitem::before{content:counter(q,decimal-leading-zero);position:absolute;left:0;top:22px;font-family:var(--font-brand);font-weight:800;font-size:var(--text-sm);letter-spacing:0.02em;color:var(--orange-600);font-variant-numeric:tabular-nums}
.qitem h3{font-size:var(--text-md);font-weight:800;line-height:1.3;margin:0 0 6px;color:var(--ink)}
.qitem p{font:var(--type-small);color:var(--text-muted);margin:0;max-width:var(--measure)}
.qlist__outcome{margin-top:var(--space-10)}

/* sub-head inside the workshop band ------------------------------------------ */
.band__subhead{max-width:var(--measure);margin:var(--space-12) 0 var(--space-6);padding-top:var(--space-6);border-top:2px solid var(--orange-500)}
.band__subhead h3{font-family:var(--font-display);font-size:var(--text-xl);font-weight:900;letter-spacing:-0.01em;line-height:1.15;color:var(--ink);margin:0 0 10px}
.band__subhead p{font-size:var(--text-prose);font-weight:300;line-height:1.6;color:var(--text-muted);margin:0}

/* illustrative scenarios: one card treatment, fixed 3-up (5 cards land 3 + 2) -- */
.scenario-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-grid)}
.scenario{display:flex;flex-direction:column;background:var(--surface-card);border:1px solid var(--border-card);border-radius:var(--radius-lg);padding:var(--pad-card)}
.scenario__who{font:var(--type-eyebrow);text-transform:uppercase;letter-spacing:0.12em;color:var(--orange-600);margin:0 0 12px}
.scenario h3{font-size:var(--text-read);font-weight:800;line-height:1.3;margin:0 0 12px;color:var(--ink);text-wrap:balance}
.scenario__body{font:var(--type-small);color:var(--text-muted);margin:0 0 var(--space-5);max-width:var(--measure)}
.scenario__tags{list-style:none;display:flex;flex-wrap:wrap;gap:var(--gap-inline);margin:auto 0 0;padding:0}
.scenario__tags li{font:var(--fw-bold) var(--text-xs)/1.2 var(--font-brand);color:var(--text-muted);border:1px solid var(--border-default);border-radius:var(--radius-pill);padding:6px 10px}
.scenario__note{font:var(--type-meta);color:var(--text-muted);margin:var(--space-4) 0 0}

/* advice, then access ------------------------------------------------------ */
.network{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-8);margin-top:8px}
.network__item h3{font-size:var(--text-read);font-weight:800;line-height:1.25;margin:0 0 10px;color:var(--paper)}
.network__item p{font:var(--type-small);color:color-mix(in oklab,var(--paper) 82%,transparent);margin:0;max-width:var(--measure)}
.network__item::before{content:"";display:block;width:34px;height:3px;border-radius:2px;background:var(--orange-500);margin-bottom:18px}

/* five steps --------------------------------------------------------------- */
.process{list-style:none;counter-reset:pstep;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--space-6)}
.pstep{counter-increment:pstep;padding-top:18px;border-top:3px solid var(--orange-500)}
.pstep h3{font-size:var(--text-prose);font-weight:800;line-height:1.3;margin:0 0 8px;color:var(--ink)}
.pstep h3::before{content:counter(pstep) ". ";color:var(--orange-600);font-variant-numeric:tabular-nums}
.pstep p{font:var(--type-small);color:var(--text-muted);margin:0}
.process__flow{font:var(--type-eyebrow);text-transform:uppercase;letter-spacing:0.12em;color:var(--text-muted);margin:var(--space-8) 0 0}
.process__flow span{color:var(--orange-600)}

/* leadership cards (same card treatment as scenarios) ----------------------- */
.lead-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--gap-grid)}
.lead-card{background:var(--surface-card);border:1px solid var(--border-card);border-radius:var(--radius-lg);padding:var(--pad-card)}
.lead-card h3{font-size:var(--text-read);font-weight:800;line-height:1.25;margin:0 0 4px;color:var(--ink)}
.lead-card__domain{font:var(--type-small);font-weight:700;color:var(--orange-600);margin:0 0 12px}
.lead-card p:last-child{font:var(--type-small);color:var(--text-muted);margin:0}

/* track record: captioned figure + prose ------------------------------------- */
.split{display:grid;grid-template-columns:minmax(0,600px) minmax(0,1fr);gap:var(--space-12);align-items:start}
.grow-figure{margin:0}
.grow-img{display:block;width:100%;height:auto;border-radius:var(--radius-lg);object-fit:cover;aspect-ratio:16/9}
.grow-figure figcaption{font:var(--type-small);color:var(--text-muted);margin-top:14px;max-width:var(--measure)}

/* boundaries: published rules ---------------------------------------------- */
.rules{list-style:none;margin:0;padding:0;display:grid;gap:0;max-width:900px}
.rule{border-top:1px solid var(--border-default);padding:var(--space-6) 0}
.rule:last-child{border-bottom:1px solid var(--border-default)}
.rule__no{font:var(--type-eyebrow);text-transform:uppercase;letter-spacing:0.14em;color:var(--orange-600);margin:0 0 8px}
.rule h3{font-family:var(--font-display);font-size:var(--text-xl);font-weight:700;letter-spacing:-0.01em;line-height:1.2;margin:0 0 12px;color:var(--ink)}
.rule p{font-size:var(--text-base);font-weight:300;line-height:1.65;color:var(--text-body);margin:0 0 14px;max-width:var(--measure)}
.rule p:last-child{margin-bottom:0}

/* availability ------------------------------------------------------------- */
.availability{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-12);align-items:start}
.availability__flag{border:1px solid var(--border-card);border-radius:var(--radius-lg);padding:var(--pad-card);background:var(--surface-card)}
.availability__flag h3{font-size:var(--text-md);font-weight:800;margin:0 0 10px;color:var(--ink)}
.availability__flag p{font:var(--type-small);color:var(--text-muted);margin:0;max-width:var(--measure)}

/* close: what happens next ------------------------------------------------- */
.next-steps{list-style:none;counter-reset:ns;margin:0 0 var(--space-8);padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--space-6);text-align:left}
.next-steps li{counter-increment:ns;padding-top:16px;border-top:2px solid color-mix(in oklab,var(--orange-500) 70%,transparent);font:var(--type-small);color:color-mix(in oklab,var(--paper) 82%,transparent)}
.next-steps li::before{content:counter(ns);display:block;font:var(--type-eyebrow);letter-spacing:0.06em;color:var(--orange-300);margin-bottom:8px;font-variant-numeric:tabular-nums}
.next-steps strong{display:block;font-weight:800;color:var(--paper);margin-bottom:4px}
.page-cta__note{font:var(--type-small);color:color-mix(in oklab,var(--paper) 66%,transparent);margin:var(--space-6) auto 0;max-width:var(--measure)}

/* responsive --------------------------------------------------------------- */
@media (max-width:1199px){
  .split,.availability{grid-template-columns:1fr;gap:var(--space-8)}
}
@media (max-width:1080px) and (min-width:900px){ .scenario-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:899px){
  .qlist{grid-template-columns:1fr;gap:0}
  .scenario-grid,.network,.availability{grid-template-columns:1fr}
  .network{gap:var(--space-6)}
  .next-steps{grid-template-columns:1fr;gap:var(--space-4)}
  .grow-prose__pull{font-size:var(--text-prose)}
  .rule h3{font-size:var(--text-lg)}
  .band__subhead h3{font-size:var(--text-lg)}
}