/* ---------------------------------------------------------------------------
   Secondary text on the public tinted bands: AA contrast.

   axe found color-contrast failures on /, /employer and /civic, all from one
   value. --muted (#69747e, defined in weave.css and alex-kinetic.css) scores
   4.36-4.44 against the audience tints (#f5f4f9, #f4f7fb, #f2f6f7) and 3.97 on
   the band fill #ebe8fa - every one of them just under the 4.5 AA floor for
   text this size. Most instances predate the hybrid landing; two are new
   (.po-deliverables__head).

   #5c666f scores 4.87-5.45 on the same four backgrounds.

   Scoped here ON PURPOSE rather than edited in the token files: those are the
   V6 tokens and this change is explicitly not allowed to replace them. This
   stylesheet is loaded only by the public orientation templates and pricing -
   never from base.html - so the darker value applies to the public surfaces
   that carry the tints and nothing else.
   --------------------------------------------------------------------------- */
:root { --muted: #5c666f; }

/* Public-orientation layer (v6.3 P1.7). Additive to weave.css; loaded only by
   the public orientation routes (suite entry, six audience landings, pricing).
   Implements the v6.3 containment rule: section bands for narrative, rows for
   summaries, disclosures for detail; cards only for bounded choosable objects.
   Uses weave.css tokens throughout; introduces no new palette, type, or motion. */

/* ---- three outcomes: a band, not a card grid -------------------------------- */
.po-outcomes { margin-top: clamp(1.6rem, 4vw, 2.6rem); }
.po-outcomes__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 3vw, 2.2rem); margin-top: .9rem; }
.po-outcome { border-top: 3px solid var(--audience, var(--gold)); padding-top: .8rem; }
.po-outcome h2 { font-size: 1.06rem; margin: 0 0 .35rem; }
.po-outcome p { margin: 0 0 .4rem; font-size: .93rem; line-height: 1.55; color: var(--slate, var(--ink)); }

/* ---- one real product preview: a workspace surface -------------------------- */
.po-preview { margin-top: clamp(1.8rem, 4vw, 2.8rem); padding: clamp(1.1rem, 3vw, 1.8rem);
  border: 1px solid var(--line); border-radius: var(--radius-lg, 14px); background: white; }
.po-preview__head h2 { margin: 0 0 .3rem; font-size: 1.25rem; }
.po-preview__source { margin-top: .8rem; color: var(--muted); }
.po-preview .btn { margin-top: .6rem; }

.po-wages { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .55rem; }
.po-wage { display: grid; grid-template-columns: minmax(180px, 1.4fr) auto auto; gap: .35rem 1rem;
  align-items: baseline; padding: .55rem .2rem; border-bottom: 1px solid var(--line); }
.po-wage:last-child { border-bottom: 0; }
.po-wage__title { font-family: var(--font-display); font-weight: 700; font-size: .92rem; }
.po-wage__range { font-weight: 700; color: var(--alex-purple); white-space: nowrap; }
.po-wage__median { color: var(--muted); white-space: nowrap; }

.po-band__title { display: flex; gap: .8rem; align-items: baseline; flex-wrap: wrap; margin-top: .6rem; }
.po-band__scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin: .8rem 0 0;
  border: 1px solid var(--line); border-radius: var(--radius-sm, 8px); overflow: hidden; }
.po-band__cell { padding: .55rem .5rem; text-align: center; border-left: 1px solid var(--line); }
.po-band__cell:first-child { border-left: 0; }
.po-band__cell dt { font-family: var(--font-display); font-size: .66rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.po-band__cell dd { margin: .15rem 0 0; font-weight: 700; font-size: .95rem; }
.po-band__cell--mid { background: var(--brand-soft, #ebe8fa); }
.po-band__cell--mid dd { color: var(--alex-purple); }
.po-band > .fine { margin-top: .7rem; }

.po-evrows { list-style: none; margin: .9rem 0 0; padding: 0; }
.po-evrow { display: grid; grid-template-columns: minmax(200px, 1.5fr) auto; gap: .2rem 1rem;
  padding: .6rem .2rem; border-bottom: 1px solid var(--line); align-items: baseline; }
.po-evrow:last-child { border-bottom: 0; }
.po-evrow__label { font-family: var(--font-display); font-weight: 700; font-size: .92rem; }
.po-evrow__range { font-weight: 700; color: var(--alex-purple); white-space: nowrap; }
.po-evrow__src { grid-column: 1 / -1; color: var(--muted); }

/* ---- compact plan / next-action summary: rows ------------------------------- */
.po-plans { margin-top: clamp(1.8rem, 4vw, 2.8rem); }
.po-plans h2 { font-size: 1.25rem; }
.po-plan-rows { list-style: none; margin: .8rem 0 0; padding: 0; border: 1px solid var(--line);
  border-radius: var(--radius-lg, 14px); background: white; overflow: hidden; }
.po-plan-row { display: grid; grid-template-columns: minmax(120px, .9fr) auto minmax(200px, 1.6fr) auto;
  gap: .4rem 1.1rem; align-items: center; padding: .8rem 1rem; border-top: 1px solid var(--line); }
.po-plan-row:first-child { border-top: 0; }
.po-plan-row__name { font-family: var(--font-display); font-weight: 800; font-size: .95rem; }
.po-plan-row__price { font-weight: 700; color: var(--alex-purple); white-space: nowrap; }
.po-plan-row .btn { justify-self: end; }

/* ---- status vocabulary ------------------------------------------------------ */
.po-status { display: inline-block; margin-left: .45rem; padding: .12rem .5rem;
  border-radius: var(--radius-pill, 999px); font-family: var(--font-display); font-size: .6rem;
  font-weight: 800; letter-spacing: .07em; text-transform: uppercase; vertical-align: middle;
  border: 1px solid var(--line-strong); color: var(--muted); background: white; }
.po-status--live { color: #2e6b1f; border-color: rgba(130, 195, 65, .7); background: rgba(130, 195, 65, .12); }
.po-status--preview { color: var(--gold-ink); border-color: rgba(249, 194, 10, .7); background: var(--gold-soft); }
.po-status--commissioned { color: var(--alex-purple); border-color: rgba(65, 52, 148, .4); background: var(--brand-soft, #ebe8fa); }
.po-status--planned, .po-status--unavailable { color: var(--muted); }

/* ---- mission line + studio line: single-sentence bands ---------------------- */
.po-mission, .po-studio { margin-top: clamp(1.6rem, 4vw, 2.4rem); padding: .95rem 1.2rem;
  border-left: 4px solid var(--alex-purple); border-radius: var(--radius-sm, 8px);
  background: var(--brand-soft, #ebe8fa); font-size: .93rem; }
.po-mission p, .po-studio p { margin: 0; line-height: 1.6; }

/* ---- supporting photography (generated, disclosed) -------------------------- */
.po-figure { margin: clamp(1.6rem, 4vw, 2.4rem) 0 0; }
.po-figure img { width: 100%; height: auto; max-width: 100%; display: block;
  border-radius: var(--radius-lg, 14px); }
.po-figure figcaption { margin-top: .4rem; color: var(--muted); }

/* ---- schools: connected pipeline + implementation timeline ------------------ */
.po-pipeline { list-style: none; margin: 1rem 0 0; padding: 0; counter-reset: po-step; }
.po-pipeline li { position: relative; padding: .8rem 0 .8rem 2.6rem; border-left: 2px solid var(--line-strong); margin-left: .9rem; }
.po-pipeline li::before { counter-increment: po-step; content: counter(po-step);
  position: absolute; left: -0.95rem; top: .9rem; width: 1.8rem; height: 1.8rem;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background: var(--alex-purple); color: white; font-family: var(--font-display);
  font-weight: 800; font-size: .8rem; }
.po-pipeline li:last-child { border-left-color: transparent; }
.po-pipeline h3 { margin: 0 0 .25rem; font-size: 1rem; }
.po-pipeline p { margin: 0 0 .25rem; font-size: .92rem; line-height: 1.55; }

.po-timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1rem; }
.po-timeline .po-tstep { border-top: 3px solid var(--audience, var(--gold)); padding-top: .7rem; }
.po-timeline .po-tstep b { font-family: var(--font-display); }
.po-timeline .po-tstep .data-type { display: block; margin: .2rem 0; font-weight: 800; color: var(--alex-purple); }

/* ---- civic decision groups: rows under three decisions ---------------------- */
.po-decisions { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 3vw, 2rem); margin-top: 1rem; }
.po-decision { border-top: 3px solid var(--audience, var(--gold)); padding-top: .8rem; }
.po-decision h3 { margin: 0 0 .4rem; font-size: 1.02rem; }
.po-decision ul { list-style: none; margin: 0; padding: 0; }
.po-decision li { padding: .4rem 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.po-decision li:last-child { border-bottom: 0; }
.po-decision li b { font-family: var(--font-display); font-size: .92rem; }
.po-decision li span { display: block; color: var(--muted); font-size: .84rem; }

/* ---- ONE compact footer ----------------------------------------------------- */
.site-footer--compact { padding-block: clamp(1.6rem, 4vw, 2.4rem); }
.site-footer--compact .footer-compact-top { display: flex; gap: 1.4rem; align-items: center;
  justify-content: space-between; flex-wrap: wrap; }
.site-footer--compact .footer-links { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; }
.site-footer--compact .footer-copy { margin-top: 1rem; max-width: 78ch; }
.site-footer--compact .footer-bottom { margin-top: 1rem; }

/* ---- pricing decision flow -------------------------------------------------- */
.pf-step { margin-top: clamp(1.6rem, 4vw, 2.4rem); }
.pf-step > .kicker { margin-bottom: .4rem; }
.pf-choices { display: flex; flex-wrap: wrap; gap: .55rem; }
.pf-choice { min-height: 44px; padding: .55rem 1rem; border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill, 999px); background: white; color: var(--ink);
  font-family: var(--font-display); font-size: .86rem; font-weight: 700; cursor: pointer; }
.pf-choice[aria-pressed="true"] { background: var(--alex-purple); border-color: transparent; color: white; }
.pf-choice:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

.pf-family { margin-top: 1.2rem; }
.pf-family[hidden] { display: none; }

/* Right inset keeps the floating Ask Alex launcher from covering the last
   action in the sticky bar. */
.pf-sticky { position: sticky; bottom: 0; z-index: 30; margin-top: clamp(1.6rem, 4vw, 2.2rem);
  margin-right: clamp(0px, 8vw, 88px);
  display: flex; gap: .9rem 1.2rem; align-items: center; justify-content: space-between; flex-wrap: wrap;
  padding: .75rem 1.1rem; border: 1px solid var(--line-strong); border-radius: var(--radius-lg, 14px);
  background: white; box-shadow: 0 -6px 24px rgba(32, 32, 52, .08); }
.pf-sticky__summary { font-family: var(--font-display); font-size: .9rem; font-weight: 700; }
.pf-sticky__summary .fine { display: block; font-weight: 500; }
.pf-sticky__actions { display: flex; gap: .6rem; flex-wrap: wrap; }

.pf-disclosure { margin-top: 1.1rem; border: 1px solid var(--line); border-radius: var(--radius-lg, 14px); background: white; }
.pf-disclosure > summary { padding: .85rem 1.1rem; cursor: pointer; font-family: var(--font-display);
  font-weight: 700; font-size: .95rem; list-style-position: inside; }
.pf-disclosure > summary:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.pf-disclosure[open] > summary { border-bottom: 1px solid var(--line); }
.pf-disclosure__body { padding: 1rem 1.1rem; }
.pf-disclosure__body .pr-scroll { overflow-x: auto; }

/* ---- responsive ------------------------------------------------------------- */
@media (max-width: 860px) {
  .po-outcomes__grid, .po-timeline, .po-decisions { grid-template-columns: 1fr; }
  .po-band__scale { grid-template-columns: repeat(5, minmax(96px, 1fr)); overflow-x: auto; }
  .po-plan-row { grid-template-columns: auto auto; }
  .po-plan-row__blurb { grid-column: 1 / -1; }
  .po-plan-row .btn { justify-self: start; grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .po-wage { grid-template-columns: 1fr; gap: .1rem; }
  .po-evrow { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   P2-01 — meaningful mobile crop for the assigned audience heroes.

   MEASURED BEFORE BUILDING (2026-08-24): every audience page already carries
   its own assigned hero from the kit, 1:1, so the "uses its assigned SVG once"
   clause was satisfied. What did NOT exist was any art direction: the hero art
   was `object-fit: contain` at every width, so on a phone a wide composition
   scaled down inside a near-square frame and letterboxed. The drawing was
   present and illegible, which is the worst of both.

   `cover` crops instead of shrinking, so the artwork keeps its working size and
   the frame shows the part that carries the meaning. Each hero declares its own
   focal point, because these compositions are not centre-weighted: the ladder
   climbs to the upper right, the atlas reads from the left.

   Deliberately scoped to this app's sheet rather than alex-kinetic.css. That
   file is part of the locked V6 kinetic package, atlas already carries a
   diverged copy of it, and a crop preference is an app-level art decision
   rather than a change to the shared motion system.
   --------------------------------------------------------------------------- */
@media (max-width: 640px) {
  /* HYBRID LANDING, 2026-08-31: contain at a BOUNDED HEIGHT, replacing the
     earlier cover-crop.

     The crop existed because the mobile frame went square, and `contain` inside
     a square frame letterboxed a wide composition. The approved direction fixes
     the cause instead of compensating for it: the art gets an explicit 3:2-ish
     box of 220-260px, so it no longer needs cropping to look deliberate, and
     the page reaches the first real deliverable sooner. The audit measured hero
     art starting at 833-959px on a 390px screen and the first useful heading as
     late as 2,175px on Civic; a bounded hero is most of that budget.

     object-position is kept so the focal points below still place the image
     inside its box. They no longer crop anything - with `contain` nothing is
     cut - but they remain the app's art direction for where a wide composition
     sits, and test_hero_crop.py still guards them against naming ids that no
     template renders. */
  .alex-hero__art img {
    object-fit: contain;
    object-position: var(--hero-focal, 50% 45%);
    height: clamp(220px, 62vw, 260px);
  }

  /* No negative inset: the art is contained now, so pulling it outward would
     only push it under the frame edge. */
  .alex-hero__art { inset: 0; }

  /* The frame goes square on mobile (alex-kinetic.css), so at 390px it stood
     350px tall around a 242px image: 108px of empty box between the promise and
     the first deliverable. Size the frame to the art instead.

     Everything below is the same budget argument. The audit's threshold is that
     the first deliverable heading begins by 1050px, and on a 390px screen the
     header already spends 165px before the hero starts, so the hero's own
     spacing is where the remaining budget has to come from. These are all
     spacing reductions - nothing is removed from the hero anatomy. */
  .alex-hero__stage,
  .alex-hero__frame { height: clamp(220px, 62vw, 260px); min-height: 0; }

  .alex-hero { padding-bottom: 20px; }
  .alex-hero__inner { gap: 18px; }
  .alex-hero__eyebrow { margin-bottom: 8px; }
  .alex-hero__lead { margin-top: 12px; }
  .alex-hero__actions { margin-top: 18px; }
  .alex-hero__trust { margin-top: 16px; padding-top: 10px; }

  /* The audit measured a three-line 56.55px H1 owning the whole first viewport.
     Capped so the promise still leads without displacing the deliverables. */
  .alex-hero__title { font-size: clamp(2.35rem, 11vw, 3.15rem); }
}

/* Focal points, per assigned hero. Set on the section so the value cascades to
   the art regardless of how the macro nests its markup.

   The ids are taken from the templates, not guessed: the first pass wrote
   #worker-hero, which exists nowhere, and a selector that matches nothing fails
   silently and looks like a working stylesheet. test_hero_crop.py now fails if
   a focal rule names an id no template renders, or if a hero has no focal
   point at all. */
#workforce-hero { --hero-focal: 62% 38%; }  /* skill ladder climbs upper-right  */
#business-hero  { --hero-focal: 55% 45%; }  /* talent supply, centre-weighted   */
#civic-hero     { --hero-focal: 38% 46%; }  /* evidence atlas reads from left   */
#schools-hero   { --hero-focal: 50% 40%; }  /* district pipeline runs across    */
#nonprofit-hero { --hero-focal: 58% 42%; }  /* proof builder stacks to right    */
#students-hero  { --hero-focal: 55% 40%; }  /* course-to-career runs upward     */
#family-hero    { --hero-focal: 50% 44%; }  /* care path, centre-weighted       */


/* ---------------------------------------------------------------------------
   Deliverables grid (hybrid landing, 2026-08-31).

   Merged from the package's hybrid-landing.css reference. Its colours are
   replaced with V6 tokens: the package shipped literal hex values, and a second
   palette living beside the token system is how a competing theme starts.

   Cards ARE the right container here, against the card-reduction rule's usual
   direction, because a deliverable is exactly what that rule permits: a bounded
   object a person can compare and choose between. The rule bans cards for
   narrative and for tool surfaces, which is why the hero lost its floating copy
   cards in the same change.
   --------------------------------------------------------------------------- */
.po-deliverables { padding-block: clamp(2rem, 5vw, 4.5rem); }
.po-deliverables__head { max-width: 720px; margin-bottom: 1.25rem; }
.po-deliverables__head h2 { margin: 0 0 .4rem; }
.po-deliverables__head p { margin: 0; color: var(--muted); }

.po-deliverables__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.85rem, 2vw, 1.25rem);
}

.po-deliverable {
  display: flex;
  flex-direction: column;
  min-width: 0;                     /* 1fr's implicit min-content would inflate */
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  overflow: hidden;
}

.po-deliverable__preview {
  width: 100%;
  aspect-ratio: 8 / 5;
  object-fit: contain;              /* representative preview: never crop it */
  background: var(--brand-soft);
}

.po-deliverable__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: .55rem;
  padding: 1rem;
}
.po-deliverable__body h3,
.po-deliverable__body p { margin: 0; }
.po-deliverable__body h3 { font-family: var(--font-display), sans-serif; font-size: 1.02rem; }
.po-deliverable__body p { font-size: .92rem; line-height: 1.5; color: var(--muted); }
.po-deliverable__access,
.po-deliverable__source { font-size: .82rem; }

/* Fulfilment reads before the action, and carries its meaning in TEXT - status
   is never colour-only. */
.po-deliverable__status {
  align-self: flex-start;
  border-radius: var(--radius-pill);
  padding: .35rem .65rem;
  background: var(--brand-soft);
  color: var(--alex-purple);
  font-family: var(--font-display), sans-serif;
  font-weight: 700;
  font-size: .75rem;
  line-height: 1;
}

.po-deliverable__action {
  display: inline-flex;
  align-items: center;
  min-height: 44px;                 /* touch target floor */
  margin-top: auto;                 /* actions align across uneven cards */
  font-weight: 700;
}
.po-deliverable__action:focus-visible {
  outline: 3px solid var(--alex-purple);
  outline-offset: 2px;
}

.po-deliverables__all { margin-top: 1.1rem; }

@media (max-width: 1099px) {
  .po-deliverables__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 699px) {
  .po-deliverables__grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .po-deliverable { transition: none !important; }
}