/* ==========================================================================
   GEBI — Programs page
   Loaded after css/styles.css (shared palette, header, sections, chips, contact,
   footer). Page-specific styling only: the trail hero, the playable hub loom and
   the three program sections, each with one small thing to try.

   The program accents are sampled from the site artwork (the valley panorama),
   so Vector / BASE / SHIELD move as a green / blue / sky-blue set:
     Vector  hill green  (#517864)
     BASE    ridge blue  (#6090b0)
     SHIELD  sky blue    (#80a8c0, dark ink on it)
   ========================================================================== */

.pg-page{
  --p-vector:#517864;
  --p-vector-deep:#3f604f;
  --p-base:#6090b0;
  --p-base-deep:#4a7a9a;
  --p-shield:#80a8c0;
  --p-shield-ink:#223549;
  --p-sage:#a4b085;
  --p-paper:rgba(255,255,255,.62);
  --p-tile-off:#d9dfdc;
}

/* the landing page redraws the poster's sun inside the fixed bar; this page has
   no such artwork, so the disc is switched off (as on the team and tools pages) */
.pg-page .site-header::before{display:none}

/* the fixed bar is ≈69px (56px mark + padding + hairline); the hero starts below it */
.pg-page main{padding-top:4.35rem}
@media (max-width:880px){.pg-page main{padding-top:3.35rem}}

/* ---------- hero: the trail ---------- */
/* The campus panorama (assets/programs-campus.webp) is the hero's backdrop, full-bleed.
   Two cream scrims ride on top of it: a left-to-right one that keeps the copy on
   readable ground, and a bottom one that hands the section over to the cream wave
   strip below. The cream is #f4f1ea, written out because the scrims are alpha. */
.pg-hero{
  position:relative;display:grid;align-content:center;
  min-height:clamp(27rem,44vw,38rem);
  padding:clamp(2rem,4vw,3.25rem) var(--pad) clamp(2.5rem,5vw,4rem);
  background-color:var(--cream);
  background-image:
    linear-gradient(180deg,rgba(244,241,234,0) 0%,rgba(244,241,234,0) 84%,rgba(244,241,234,.55) 94%,var(--cream) 100%),
    radial-gradient(ellipse 50% 100% at 16% 50%,rgba(244,241,234,.94) 0%,rgba(244,241,234,.82) 36%,rgba(244,241,234,.38) 64%,rgba(244,241,234,.08) 86%,rgba(244,241,234,0) 100%),
    linear-gradient(rgba(244,241,234,.06),rgba(244,241,234,.06)),
    url(../assets/programs-campus.webp);
  background-position:center bottom,center,center,center 52%;
  background-size:cover,cover,cover,cover;
  background-repeat:no-repeat;
}
.pg-hero-inner{
  display:grid;grid-template-columns:minmax(0,1fr);
  align-items:center;
  /* width:100% keeps the track full-bleed: the auto margins alone would let the
     grid item shrink to the copy's max-content width */
  width:100%;max-width:var(--max-w);margin:0 auto;
}
.pg-eyebrow{
  margin:0 0 .8rem;font-size:.76rem;font-weight:700;letter-spacing:.17em;
  text-transform:uppercase;color:var(--ink-soft);
}
.pg-h1{
  font-size:clamp(2.6rem,5.4vw,4.4rem);line-height:1.03;letter-spacing:-.028em;
  color:var(--ink);margin:0 0 1.35rem;
}
.pg-lede{
  font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.6;
  color:var(--ink-copy);max-width:31rem;margin:0;
}
.pg-hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.85rem 1.5rem;margin:1.9rem 0 0}
/* "Talk to us" is the quieter of the hero's pair, so it wears the same colours as the
   landing hero's second entry point ("Get Involved", .hero-btn--line in styles.css):
   the pale band fill on the navy label, no ring - the fill alone carries the button. */
.pg-hero-actions .btn-ghost{background:var(--band);color:var(--navy);box-shadow:none}
.pg-hero-actions .btn-ghost:hover{filter:none;background:#c9dfec}
.pg-ghost{
  display:inline-block;border:1px solid var(--line);border-radius:999px;
  padding:.68rem 1.4rem;font-weight:600;text-decoration:none;color:var(--ink);
  transition:border-color .2s,background-color .2s,transform .2s;
}
.pg-ghost:hover{border-color:var(--navy);background:rgba(255,255,255,.55);transform:translateY(-2px)}
.pg-ghost--sm{padding:.5rem 1rem;font-size:.93rem;font-weight:500}

/* ---------- the trail scene's own styles, kept so it can be dropped back in
   unchanged (no artwork on this page, so nothing renders) ---------- */
.pg-scene{
  display:block;width:100%;height:auto;
  filter:drop-shadow(0 22px 44px rgba(30,60,80,.16));
  overflow:visible;
}
.pg-stop{cursor:pointer;text-decoration:none;opacity:0;animation:pg-pop .55s cubic-bezier(.2,.7,.3,1) forwards}
.pg-stop--vector{animation-delay:.25s}
.pg-stop--base{animation-delay:.6s}
.pg-stop--shield{animation-delay:.95s}
@keyframes pg-pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.pg-stop .pg-badge{transition:transform .22s ease;transform-box:fill-box;transform-origin:center}
.pg-stop:hover .pg-badge,.pg-stop:focus-visible .pg-badge{transform:scale(1.1)}
.pg-stop .pg-chip rect{transition:fill .2s ease}
.pg-stop:hover .pg-chip rect,.pg-stop:focus-visible .pg-chip rect{fill:#fff}
.pg-stop text{font:600 19px var(--body);fill:var(--ink);letter-spacing:-.01em}
.pg-stop:focus-visible{outline:none}
.pg-stop:focus-visible .pg-badge{stroke:var(--ink);stroke-width:5}
/* the stitched centre line drifts very slowly down the trail */
.pg-trail-stitch{animation:pg-stitch 26s linear infinite}
@keyframes pg-stitch{from{stroke-dashoffset:0}to{stroke-dashoffset:-300}}

/* ---------- BASE: the forested valley backdrop ----------
   Same recipe as the hero: assets/base-tundra.webp full-bleed, a cream veil over
   the whole frame (the illustration is dark), a radial scrim under the copy
   column, and cream at the very top and bottom so the wave strips either side
   still join up.
   v66: the bottom edge of this box falls on a fractional device pixel, and Chrome paints the
   artwork layer of the row that straddles it without the cream veil above it - so the last row
   sampled the illustration's dark green and showed as a 1px horizontal line against the SHIELD
   band (1000-1150px, 1600-1920px, and again on phones). Shortening the veil did not clear it:
   the veil is simply not painted in that row. ::after below caps the row with solid cream. */
#base{
  background-color:var(--cream);
  background-image:
    linear-gradient(180deg,var(--cream) 0%,rgba(244,241,234,0) 13%,rgba(244,241,234,0) 82%,rgba(244,241,234,.7) 92%,var(--cream) 100%),
    radial-gradient(ellipse 44% 94% at 17% 46%,rgba(244,241,234,.95) 0%,rgba(244,241,234,.85) 34%,rgba(244,241,234,.38) 64%,rgba(244,241,234,.06) 88%,rgba(244,241,234,0) 100%),
    linear-gradient(rgba(244,241,234,.54),rgba(244,241,234,.54)),
    url(../assets/base-tundra.webp);
  background-position:center,center,center,center 44%;
  background-size:cover,cover,cover,cover;
  background-repeat:no-repeat;
}
/* the cream cap for that stray bottom row (see above). It is positioned, so it paints over the
   wave strip that follows, and the strip is solid cream for its first couple of px anyway. */
#base::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--cream);pointer-events:none;
}
/* the card sits over the illustration, so it gets a touch more body than usual */
#base .card{background:rgba(255,255,255,.8)}

/* ---------- shared section bits ---------- */
.pg-cols-intro{align-items:end;margin-bottom:clamp(1.5rem,3vw,2.25rem)}
.pg-cols-intro h2{margin:0}
.pg-readout{margin:1.1rem 0 0;font-weight:500;color:var(--ink-copy);min-height:3.4em;max-width:64ch}
.pg-readout--sm{font-size:.97rem;min-height:3em}

/* the cream wave strips that carry one tinted section into the next */
.pg-band-wave{display:block;width:100%;height:clamp(26px,3.4vw,54px);color:var(--cream);background:var(--band)}
.pg-band-wave.bottom{transform:scaleY(-1)}
.pg-tinted{background:var(--band);padding-top:clamp(2.25rem,5vw,3.5rem);padding-bottom:clamp(2.5rem,5.5vw,4rem)}
/* ...and the foot of the page needs no override: the FAQ is page-cream and the
   contact panel's own wave already defaults to cream, so the two share one edge. */

/* tiles: one square, one motif, used by the steps, the reframe rows and SHIELD */
.pg-tile{
  flex:none;display:grid;place-items:center;width:44px;height:44px;padding:7px;
  border:0;border-radius:5px;background:var(--tc);color:#fff;
}
.pg-tile svg{width:100%;height:100%;display:block}

/* ---------- loom ---------- */
.pg-loom-card{border-radius:30px}
.pg-stagebar{display:flex;flex-wrap:wrap;gap:.55rem .6rem;align-items:center;margin-bottom:1.15rem}
.pg-stage{
  display:flex;align-items:center;gap:.55rem;border:1px solid var(--line);
  border-radius:999px;padding:.3rem 1.05rem .3rem .3rem;background:rgba(255,255,255,.45);
  font-weight:600;transition:box-shadow .2s,border-color .2s,background-color .2s;
}
.pg-stage:hover{background:#fff}
.pg-stage .pg-d{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--c)}
.pg-stage .pg-d svg{width:20px;height:20px}
.pg-stage[aria-pressed="true"]{border-color:var(--c);box-shadow:0 0 0 2px var(--c);background:#fff}
.pg-stage--vector{--c:var(--p-vector)}
.pg-stage--base{--c:var(--p-base)}
.pg-stage--shield{--c:var(--p-shield)}
.pg-stage--shield .pg-d{color:var(--p-shield-ink)}

.pg-loom-wrap{position:relative}
.pg-loom{display:grid;gap:4px;grid-template-columns:repeat(12,1fr)}
.pg-cell{
  aspect-ratio:1;border:0;border-radius:5px;padding:16%;
  background:var(--tc,var(--p-tile-off));
  transition:background-color .3s,border-radius .3s,transform .2s;
}
.pg-cell svg{width:100%;height:100%;display:block}
.pg-cell.empty:hover{background:var(--pale);transform:scale(.96)}
.pg-cell:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.pg-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.pg-lines .fade{animation:pg-fade .5s both}
@keyframes pg-fade{from{opacity:0}to{opacity:1}}

/* ---------- program headers ---------- */
.pg-head{display:flex;align-items:center;gap:1.05rem;margin-bottom:1rem}
.pg-dot{flex:none;display:grid;place-items:center;width:62px;height:62px;border-radius:50%;color:#fff;background:var(--c)}
.pg-dot svg{width:30px;height:30px}
.pg-dot--vector{--c:var(--p-vector)}
.pg-dot--base{--c:var(--p-base)}
.pg-dot--shield{--c:var(--p-shield);color:var(--p-shield-ink)}
.pg-head .pg-eyebrow{margin:0 0 .15rem}
.pg-head h2{font-size:clamp(2rem,3.6vw,2.9rem);line-height:1}
.pg-expand{color:var(--ink-soft);font-size:.95rem;font-weight:500;line-height:1.45;margin:.9rem 0 1.1rem;max-width:34ch}
.pg-cta{
  display:inline-block;margin-top:.6rem;font-weight:600;color:var(--navy);
  text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:2px;
}
.pg-cta:hover{color:var(--ink)}
.pg-cta span{display:inline-block;transition:transform .2s}
.pg-cta:hover span{transform:translateX(3px)}

/* ---------- how Vector and BASE are laid out ----------
   Both programs are drawn as one column, after the reference the pilot section
   was redrawn from: the mark and the program name, a bold one-line promise, a
   short paragraph, three attribute pills, then the interactive part of the
   section as a wide panel under its own small label, and the CTA last — under
   the panel, reading left with the copy. */
.pg-statement{
  margin:clamp(1.1rem,2.4vw,1.6rem) 0 .6rem;max-width:36ch;
  font-size:clamp(1.45rem,2.6vw,2rem);font-weight:700;
  line-height:1.2;letter-spacing:-.015em;color:var(--ink);
}
.pg-body{margin:0;max-width:64ch;font-size:1.06rem;line-height:1.65;color:var(--ink-copy)}

/* the three attributes, in place of the old fact tables */
.pg-pills{--pill-ink:var(--p-vector-deep);display:flex;flex-wrap:wrap;gap:.6rem .7rem;list-style:none;margin:1.4rem 0 0;padding:0}
.pg-pills li{
  display:inline-flex;align-items:center;gap:.55rem;padding:.5rem 1.05rem;
  border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.72);
  font-size:.97rem;font-weight:600;color:var(--ink);
}
.pg-pills svg{flex:none;width:1.2rem;height:1.2rem;color:var(--pill-ink)}

/* the block label ("How it works", "A chapter's year"), rule running right */
.pg-label{
  display:flex;align-items:center;gap:1rem;
  margin:clamp(1.9rem,4vw,2.8rem) 0 clamp(.9rem,1.8vw,1.2rem);
  font-size:.78rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:var(--ink-soft);
}
.pg-label::after{content:"";flex:1;height:1px;background:var(--line)}

/* Vector's four steps: 01 Session, 02 Projects, 03 Micro-grants, 04 Chapters */
.pg-steps{
  list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1.1rem,2.4vw,2.2rem);
}
.pg-step{
  position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:.4rem .8rem;align-items:start;
  padding:1.05rem clamp(.95rem,1.6vw,1.2rem);
  border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.78);
}
.pg-step__n{
  display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;
  background:rgba(90,134,166,.18);color:#3b6789;
  font-size:.86rem;font-weight:700;letter-spacing:.02em;
}
.pg-step b{display:block;font-size:1.06rem;line-height:1.35}
.pg-step p{margin:.1rem 0 0;font-size:.97rem;line-height:1.5;color:var(--ink-copy)}
/* the arrow fills the grid gap exactly, so it lands centred between two cards */
.pg-step::after{
  content:"\2192";position:absolute;left:100%;top:50%;transform:translateY(-50%);
  width:clamp(1.1rem,2.4vw,2.2rem);display:grid;place-items:center;
  color:var(--slate);font-size:1.15rem;line-height:1;
}
.pg-step:last-child::after{display:none}

/* the CTA closes each program: under its panel, reading left with the copy */
.pg-cta-row{display:flex;justify-content:flex-start;margin:clamp(1.5rem,3vw,2.1rem) 0 0}

/* the wide panel: the section's intro on the left, what to try on the right */
.pg-panel{
  display:grid;grid-template-columns:minmax(0,19rem) minmax(0,1fr);
  gap:clamp(1.2rem,3vw,2.6rem);align-items:start;
  margin-top:clamp(2rem,4.5vw,3.2rem);background:rgba(255,255,255,.74);
}
.pg-panel .sub{margin-bottom:.9rem}
/* Vector's three reframes sit side by side, but only where there is width for
   them: below 1320px the card is narrow enough that they read better stacked */
.pg-panel .pg-reframe{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem 1.4rem}
/* BASE's panel follows a .pg-label instead, which has already spaced it off */
#base .pg-panel{margin-top:0;background:rgba(255,255,255,.84)}

/* ---------- the watercolour wash in a tinted section's top-right corner ----------
   Vector and SHIELD both sit on the blue band, and both open with the same wash:
   assets/sea-bleed.webp, the artwork the landing page's band is cut from, kept
   out of the corner's way by a radial mask. */
.pg-wash{overflow:hidden}
.pg-wash::before{
  content:"";position:absolute;z-index:0;top:0;right:0;pointer-events:none;
  width:min(62%,48rem);height:clamp(9rem,20vw,15rem);
  background:
    url(../assets/sea-bleed.webp) right top/100% 100% no-repeat,
    radial-gradient(ellipse 92% 100% at 100% 0%,rgba(255,255,255,.92) 0%,rgba(255,255,255,.6) 46%,rgba(255,255,255,0) 82%);
  -webkit-mask-image:radial-gradient(ellipse 104% 108% at 100% 0%,#000 0%,rgba(0,0,0,.9) 34%,rgba(0,0,0,0) 80%);
  mask-image:radial-gradient(ellipse 104% 108% at 100% 0%,#000 0%,rgba(0,0,0,.9) 34%,rgba(0,0,0,0) 80%);
}
.pg-wash .wrap{z-index:1}

@media (max-width:1320px){
  .pg-panel .pg-reframe{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:1080px){
  .pg-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pg-step::after{display:none}
}
@media (max-width:980px){
  .pg-panel{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .pg-wash::before{width:86%;height:7rem}
}
@media (max-width:640px){
  .pg-steps{grid-template-columns:minmax(0,1fr)}
}

.pg-reframe{display:grid;gap:1.1rem}
.pg-rf{display:grid;grid-template-columns:44px 1fr;gap:1rem;align-items:start}
.pg-rf b{display:block;font-size:.95rem;margin-bottom:.1rem}
.pg-val{color:var(--ink-soft);line-height:1.5;margin:0;font-size:.98rem}

/* ---------- BASE: a chapter's year ---------- */
.pg-year{display:grid;grid-template-columns:repeat(12,1fr);gap:4px;margin:.9rem 0 1.1rem}
.pg-mo{display:flex;flex-direction:column;align-items:center;gap:.35rem;font-size:.78rem;color:var(--ink-soft)}
.pg-mo .pg-tile{width:100%;height:auto;aspect-ratio:1;padding:0;transition:opacity .3s,background-color .25s}
.pg-mo .pg-tile svg{width:64%;height:64%}
.pg-mo .pg-tile.off{background:var(--p-tile-off)}
.pg-mo .pg-tile.dim{opacity:.2}
.pg-mo .pg-tile:hover{transform:translateY(-2px)}
@media (max-width:640px){.pg-year{grid-template-columns:repeat(6,1fr);row-gap:.8rem}}

.pg-legend{
  display:flex;flex-wrap:wrap;gap:.45rem 1.1rem;list-style:none;
  padding:0;margin:0 0 1rem;font-size:.9rem;color:var(--ink-soft);
}
.pg-legend i{display:inline-block;width:14px;height:14px;border-radius:4px;margin-right:.45rem;vertical-align:-2px}

/* ---------- SHIELD: after the project ends ---------- */
.pg-seg{
  display:inline-flex;border:1px solid var(--line);border-radius:999px;
  padding:4px;margin-bottom:1.1rem;background:rgba(255,255,255,.5);
}
.pg-seg button{border:0;background:none;border-radius:999px;padding:.5rem 1.2rem;font-weight:600;font-size:.95rem}
.pg-seg button:hover{color:var(--p-shield-ink)}
.pg-seg button[aria-pressed="true"]{background:var(--p-shield);color:var(--p-shield-ink)}
.pg-seg button[aria-pressed="true"]:hover{color:var(--p-shield-ink)}
.pg-pairs{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem 1rem;margin-bottom:.6rem}
.pg-pair{display:flex;align-items:center;justify-content:center}
.pg-pair .pg-tile{
  width:clamp(42px,5vw,58px);height:clamp(42px,5vw,58px);padding:0;
  transition:opacity .45s,transform .45s;transition-delay:calc(var(--i) * 120ms);
}
.pg-pair .pg-tile svg{width:58%;height:58%}
.pg-pair .pg-conn{
  width:clamp(14px,2.4vw,30px);border-top:3px dashed var(--green-deep);
  transition:opacity .35s;transition-delay:calc(var(--i) * 120ms);
}
.pg-pairs.without .early{opacity:.18;transform:scale(.78)}
.pg-pairs.without .pg-conn{opacity:0}
@media (max-width:640px){.pg-pairs{grid-template-columns:repeat(2,1fr)}}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .pg-hero-inner{grid-template-columns:1fr;gap:2rem}
  /* stacked: the copy runs the full width, so the scrim turns vertical and the
     panorama becomes a soft texture rather than a picture with a subject */
  .pg-hero{
    background-image:
      linear-gradient(180deg,rgba(244,241,234,.86) 0%,rgba(244,241,234,.81) 42%,rgba(244,241,234,.64) 76%,var(--cream) 100%),
      url(../assets/programs-campus.webp);
    background-position:center top,center 40%;
    background-size:cover,cover;
  }
  .pg-h1{font-size:clamp(2.3rem,7vw,3.4rem)}
  /* stacked: the copy runs the full width, so the photo scrim turns vertical */
  #base{
    background-image:
      linear-gradient(180deg,var(--cream) 0%,rgba(244,241,234,.86) 12%,rgba(244,241,234,.78) 60%,rgba(244,241,234,.68) 84%,var(--cream) 100%),
      url(../assets/base-tundra.webp);
    background-position:center top,center 40%;
    background-size:cover,cover;
  }
  .pg-lede{max-width:none}
  .pg-scene{max-width:26rem;margin:0 auto}
}
@media (max-width:760px){
  .pg-hero{padding-top:1.5rem}
  .pg-hero-actions{margin-top:1.4rem}
  .pg-loom-card{border-radius:22px}
  .pg-dot{width:54px;height:54px}
  .pg-dot svg{width:26px;height:26px}
  .pg-readout{min-height:0}
  .pg-expand{margin-top:.7rem}
  .pg-stop text{font-size:22px}
}
@media (max-width:560px){
  /* three stages across, then the three play buttons across: no ragged wrapping */
  .pg-stagebar{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem}
  .pg-stage{justify-content:center;padding:.45rem .35rem;font-size:.9rem;gap:.4rem}
  .pg-stage .pg-d{width:26px;height:26px}
  .pg-stage .pg-d svg{width:16px;height:16px}
  .pg-ghost--sm{font-size:.85rem;padding:.5rem .3rem;text-align:center}
}
@media (max-width:520px){
  .pg-loom{gap:3px}
}
@media (max-width:380px){
  /* three pills no longer fit with their icons: keep the words, drop the discs */
  .pg-stage{font-size:.85rem;padding:.5rem .3rem}
  .pg-stage .pg-d{display:none}
}

@media (prefers-reduced-motion:reduce){
  .pg-stop{opacity:1;animation:none}
  .pg-trail-stitch{animation:none}
}

/* ==========================================================================
   v65 — the conversion pass
   The page now opens with an audience split, says under each program what it
   asks and gives, and closes with proof, an FAQ and a band back to the form.
   None of the artwork or the shared chrome changes: every new block borrows the
   page's own tokens (--cream, --band, --line, the white .card wash) and the same
   radii as the cards it sits beside.
   ========================================================================== */

/* ---------- the mark in the bar ----------
   The mark keeps the site-wide size styles.css gives it (56px, 38px on phones) so it
   matches every other page. This page used to shrink it to 38px to squeeze the bar;
   instead <main> below reserves the full bar height, so nothing sits under it. */
.pg-page .bar-start{gap:.6rem}
@media (max-width:880px){
  .pg-page .bar-start{gap:.5rem}
}

/* ---------- a slightly larger reading size ----------
   18px/1.7 rather than the shared 17px/1.65: the page carries much more prose now
   (facts, proof, FAQ) and it all has to stay comfortable at a phone's width. */
.pg-page{font-size:1.125rem;line-height:1.7}

/* ---------- section heading block (audience, proof, FAQ) ---------- */
.pg-sec-head{max-width:46rem}
.pg-sec-head h2{margin:0 0 .7rem}
.pg-sec-head>p:last-child{margin:0;color:var(--ink-copy)}

/* ---------- who is this for? ---------- */
.pg-audience{padding-top:clamp(1.25rem,3vw,2.25rem);padding-bottom:clamp(2rem,4.5vw,3rem)}
.aud-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(.9rem,2vw,1.4rem);margin:clamp(1.5rem,3vw,2.25rem) 0 0;padding:0;list-style:none;
}
.aud-card{
  display:flex;flex-direction:column;
  background:rgba(255,255,255,.62);border:1px solid var(--line);border-radius:26px;
  padding:clamp(1.2rem,2.2vw,1.7rem);
}
.aud-card__kicker{margin:0 0 .5rem;font-size:.78rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-soft)}
.aud-card__hook{margin:0 0 .55rem;font-size:1.2rem;line-height:1.25}
.aud-card__text{margin:0 0 1.25rem;font-size:1rem;line-height:1.6;color:var(--ink-copy)}
.aud-card__btn{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:.5rem}
.aud-card__btn span{transition:transform .2s}
.aud-card__btn:hover span,.aud-card__btn:focus-visible span{transform:translateX(3px)}
@media (max-width:900px){.aud-grid{grid-template-columns:1fr}}

/* the attribute pills take each program's own accent, so the three stay apart */
#base .pg-pills{--pill-ink:var(--p-base-deep)}
#shield .pg-pills{--pill-ink:var(--slate)}

/* ---------- placeholders: visibly waiting for real content ---------- */
.pg-todo{
  display:inline-block;font-style:normal;font-weight:600;font-size:.9em;
  color:var(--ink-soft);background:rgba(34,53,73,.055);
  border:1px dashed rgba(34,53,73,.34);border-radius:8px;padding:.1em .5em;
}

/* ---------- program CTAs: real buttons now ---------- */
.pg-btn{display:inline-flex;align-items:center;gap:.5rem;margin-top:.35rem}
.pg-btn span{transition:transform .2s}
.pg-btn:hover span,.pg-btn:focus-visible span{transform:translateX(3px)}

/* ---------- proof ---------- */
.pg-proof__label{
  display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;
  margin:clamp(1.6rem,3vw,2.2rem) 0 .8rem;
  font-family:var(--body);font-size:1rem;font-weight:700;letter-spacing:0;
}
.proof-logos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem;margin:0;padding:0;list-style:none}
.proof-logo{
  display:grid;place-items:center;text-align:center;aspect-ratio:16/6;padding:.5rem;
  border:1px dashed rgba(34,53,73,.3);border-radius:16px;background:rgba(255,255,255,.5);
  color:var(--ink-soft);font-size:.82rem;font-weight:600;line-height:1.3;
}
.proof-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem;margin:0;padding:0;list-style:none}
.proof-stat{display:grid;gap:.4rem;background:rgba(255,255,255,.62);border:1px solid var(--line);border-radius:20px;padding:1.05rem 1.15rem}
.proof-stat b{font-size:.9rem;font-weight:600;color:var(--ink-soft)}
.proof-quotes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
.proof-quote{margin:0;background:rgba(255,255,255,.62);border:1px solid var(--line);border-radius:20px;padding:1.15rem 1.25rem}
.proof-quote p{margin:0 0 .7rem;font-size:1rem;line-height:1.6;color:var(--ink-copy)}
.proof-quote footer{font-size:.9rem;color:var(--ink-soft)}
@media (max-width:820px){
  .proof-logos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .proof-stats,.proof-quotes{grid-template-columns:1fr}
}

/* ---------- FAQ (native details/summary: works with no JS) ---------- */
.pg-faq{margin:clamp(1.3rem,2.6vw,1.9rem) 0 0;max-width:54rem}
.pg-faq details{background:rgba(255,255,255,.58);border:1px solid var(--line);border-radius:16px;margin-bottom:.55rem;overflow:hidden}
.pg-faq details[open]{background:rgba(255,255,255,.8)}
.pg-faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.9rem clamp(1rem,2vw,1.2rem);font-weight:600;cursor:pointer;
  list-style:none;border-radius:16px;transition:background-color .2s;
}
.pg-faq summary::-webkit-details-marker{display:none}
.pg-faq summary:hover{background:rgba(34,53,73,.05)}
.pg-faq summary::after{
  content:"";flex:none;width:.55rem;height:.55rem;margin-right:.2rem;
  border-right:2px solid var(--ink-soft);border-bottom:2px solid var(--ink-soft);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s;
}
.pg-faq details[open] summary::after{transform:rotate(225deg) translate(-2px,-2px)}
.pg-faq__a{padding:0 clamp(1rem,2vw,1.2rem) 1rem}
.pg-faq__a p{margin:0;font-size:1rem;line-height:1.6;color:var(--ink-copy)}

/* ---------- hover + focus on everything this pass adds ----------
   .btn and .btn-ghost already lift on hover; these keep the focus ring legible on
   the navy pill, and on the navy panel the ring stays white. */
.pg-page .btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.pg-page .contact .btn:focus-visible{outline-color:var(--ink)}
.pg-page .pg-faq summary:focus-visible{outline-offset:2px}