/* ==========================================================================
   y2-home.css — homepage sections
   Redesign Phase 4: §1 hero, §2 trust bar, §3 why families choose Y2.
   Requires y2-tokens.css and y2-components.css.
   --------------------------------------------------------------------------
   Same specificity contract as the rest of the system: every selector carries
   a .y2- class, so this file cannot reach markup that has not opted in.
   ========================================================================== */

/* --------------------------------------------------------------------------
   §1 HERO

   Built to take a photograph but shipping without one. The repo has no clean
   classroom photo — the only one is baked into a promo poster that also
   carries promotional overlays, which G2 rules out. Rather than reach for stock
   imagery of unrelated students, which the plan forbids, the hero ships on the
   ink field it already used.

   The <picture> and the overlay are wired up regardless, so dropping a real
   photograph in later is an asset change, not a rebuild. The overlay sits at
   62% — above the 55% floor the plan sets — measured so that white text stays
   over 4.5:1 against a mid-tone photograph rather than only against the ink.
   -------------------------------------------------------------------------- */
/* Carries .y2-on-ink in the markup. That class is what tells the component
   layer this is a dark surface: without it the secondary button renders ink
   text on an ink field at 1.00:1 — invisible — and the focus ring goes dark
   too. Marking the surface is the system's own mechanism; do not restyle the
   buttons here instead. */
.y2-hero {
  position: relative;
  isolation: isolate;
  background: var(--y2-ink);
  overflow: hidden;
}

.y2-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.y2-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Two layers: a flat scrim guaranteeing the contrast floor, plus a horizontal
   gradient weighting the text column so the right side can stay lighter. */
.y2-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(20, 38, 76, .92) 0%, rgba(20, 38, 76, .74) 55%, rgba(20, 38, 76, .62) 100%);
}

/* The dot field the deployed hero already used. Decorative only. */
.y2-hero__dots {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgba(255, 255, 255, .07) 1.5px, transparent 1.5px);
  background-size: 44px 44px;
  pointer-events: none;
}

.y2-hero__wrap {
  position: relative;
  max-width: var(--y2-maxw);
  margin-inline: auto;
  padding: var(--y2-s-8) var(--y2-s-2);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--y2-s-4);
  align-items: start;
}

.y2-hero__eyebrow {
  display: block;
  margin: 0 0 var(--y2-s-2);
  font-family: var(--y2-body);
  font-size: var(--y2-t-eyebrow);
  font-weight: 700;
  letter-spacing: var(--y2-track-eyebrow);
  text-transform: uppercase;
  color: var(--y2-pencil);
}

.y2-hero__title {
  font-family: var(--y2-display);
  font-optical-sizing: auto;
  font-size: var(--y2-t-hero);
  font-weight: 650;
  line-height: var(--y2-lh-tight);
  letter-spacing: -0.02em;
  color: var(--y2-white);
  margin: 0 0 var(--y2-s-3);
  text-wrap: balance;
  max-width: 18ch;
}

.y2-hero__sub {
  font-family: var(--y2-body);
  font-size: 1.125rem;
  line-height: var(--y2-lh-body);
  color: rgba(255, 255, 255, .86);
  margin: 0 0 var(--y2-s-4);
  max-width: 52ch;
}

.y2-hero__actions { display: flex; flex-wrap: wrap; gap: var(--y2-s-2); }

/* Guarantee badge — pencil surface carrying ink text, 8.39:1. Never the
   reverse; pencil text on a light field measures 1.77:1. */
.y2-hero__badge {
  margin-top: var(--y2-s-4);
  padding: var(--y2-s-2) var(--y2-s-3);
  background: var(--y2-pencil);
  color: var(--y2-ink);
  border-radius: var(--y2-radius);
  max-width: 46ch;
}
.y2-hero__badge b {
  display: block;
  font-family: var(--y2-display);
  font-optical-sizing: auto;
  font-size: 1.25rem;
  font-weight: 650;
}
.y2-hero__badge span {
  display: block;
  font-family: var(--y2-body);
  font-size: var(--y2-t-small);
  line-height: 1.5;
  margin-top: 2px;
}

/* Enrolment panel. Carried over from the deployed hero rather than dropped:
   it holds the dates, locations and guarantee terms a family checks before
   calling, and Phase 4 has nothing to replace it with. */
.y2-hero__panel {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--y2-radius-lg);
  padding: var(--y2-s-3);
}
.y2-hero__panel h2 {
  font-family: var(--y2-display);
  font-optical-sizing: auto;
  font-size: 1.25rem;
  font-weight: 650;
  color: var(--y2-pencil);
  margin: 0 0 var(--y2-s-2);
}
.y2-hero__dl { margin: 0; }
.y2-hero__dl dt {
  font-family: var(--y2-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
  margin-top: var(--y2-s-2);
}
.y2-hero__dl dt:first-child { margin-top: 0; }
.y2-hero__dl dd {
  font-family: var(--y2-body);
  font-size: var(--y2-t-body);
  font-weight: 600;
  color: var(--y2-white);
  margin: 2px 0 0;
  padding-bottom: var(--y2-s-2);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.y2-hero__dl dd:last-of-type { border-bottom: 0; padding-bottom: 0; }

@media (min-width: 900px) {
  .y2-hero__wrap { grid-template-columns: 1.4fr 1fr; gap: var(--y2-s-6); align-items: center; }
  .y2-hero__title { max-width: 16ch; }
}

/* --------------------------------------------------------------------------
   §2 TRUST BAR

   Five slots in the plan. Three ship, because only three have a figure behind
   them: the guarantee, years operating, and students served. The Google
   rating and the 1500+ count have no source anywhere on the site, so the
   markup for them sits commented out in index.html with a NEEDS VERIFIED DATA
   marker rather than being filled with a plausible-looking number (G4).

   The grid is written to read as deliberate at three items, not as a five-item
   bar with holes in it.
   -------------------------------------------------------------------------- */
.y2-trust {
  background: var(--y2-white);
  border-bottom: 1px solid var(--y2-line);
}
.y2-trust__wrap {
  max-width: var(--y2-maxw);
  margin-inline: auto;
  padding: var(--y2-s-4) var(--y2-s-2);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--y2-s-3) var(--y2-s-2);
}
.y2-trust__item { text-align: center; }
.y2-trust__figure {
  display: block;
  font-family: var(--y2-display);
  font-optical-sizing: auto;
  font-size: clamp(1.75rem, 2.5vw + 1rem, 2.5rem);
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--y2-ink);
}
.y2-trust__label {
  display: block;
  margin-top: var(--y2-s-1);
  font-family: var(--y2-body);
  font-size: var(--y2-t-small);
  line-height: 1.4;
  color: var(--y2-ink-60);
}

/* auto-fit rather than a fixed column count: the bar currently holds four
   items and will hold five once the 1500+ figure arrives. A hard-coded three
   left an orphan on the second row every time the count changed. */
@media (min-width: 768px) {
  .y2-trust__wrap { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--y2-s-4); }
}

/* --------------------------------------------------------------------------
   §3 WHY FAMILIES CHOOSE Y2
   -------------------------------------------------------------------------- */
.y2-why { background: var(--y2-paper); }
.y2-why__wrap {
  max-width: var(--y2-maxw);
  margin-inline: auto;
  padding: var(--y2-section-y) var(--y2-s-2);
}
.y2-why__head { max-width: var(--y2-maxw-prose); margin-bottom: var(--y2-s-6); }

.y2-why__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--y2-s-2);
}
@media (min-width: 768px)  { .y2-why__grid { grid-template-columns: repeat(2, 1fr); gap: var(--y2-s-3); } }
@media (min-width: 1100px) { .y2-why__grid { grid-template-columns: repeat(3, 1fr); } }

.y2-why__card {
  background: var(--y2-white);
  border: 1px solid var(--y2-line);
  border-radius: var(--y2-radius);
  padding: var(--y2-s-3);
}
.y2-why__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--y2-radius-sm);
  background: var(--y2-paper);
  font-size: 1.25rem;
  line-height: 1;
  margin-bottom: var(--y2-s-2);
}
.y2-why__card h3 {
  font-family: var(--y2-display);
  font-optical-sizing: auto;
  font-size: var(--y2-t-h3);
  font-weight: 600;
  line-height: var(--y2-lh-head);
  color: var(--y2-ink);
  margin: 0 0 var(--y2-s-1);
}
.y2-why__card p {
  font-family: var(--y2-body);
  font-size: var(--y2-t-body);
  line-height: var(--y2-lh-body);
  color: var(--y2-ink-60);
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .y2-hero, .y2-why__card { transition: none; }
}

/* --------------------------------------------------------------------------
   §4 PROGRAMS  (Phase 5)

   Cards reuse .y2-card--program from the component layer; only the section
   wrapper is new. Program cards carry format, duration and who a program
   suits — never cost (G2).
   -------------------------------------------------------------------------- */
.y2-programs { background: var(--y2-white); }
.y2-programs__wrap,
.y2-results__wrap,
.y2-steps__wrap {
  max-width: var(--y2-maxw);
  margin-inline: auto;
  padding: var(--y2-section-y) var(--y2-s-2);
}
.y2-programs__head,
.y2-results__head,
.y2-steps__head { max-width: var(--y2-maxw-prose); margin-bottom: var(--y2-s-6); }

/* --------------------------------------------------------------------------
   §5 RESULTS  (Phase 5)

   The score cards the plan specifies are not here. No 1570/1560/1550/1540
   figures exist anywhere on the site, and G4 forbids inventing them, so the
   grid markup sits commented in index.html behind a NEEDS VERIFIED DATA
   marker. What ships is what is true: the three testimonials the site has
   carried, with the attribution they already had, and a link to the public
   Google reviews.
   -------------------------------------------------------------------------- */
.y2-results { background: var(--y2-paper); }

.y2-quotes {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--y2-s-2);
}
@media (min-width: 768px)  { .y2-quotes { grid-template-columns: repeat(3, 1fr); gap: var(--y2-s-3); } }

.y2-quote {
  display: flex;
  flex-direction: column;
  gap: var(--y2-s-2);
  background: var(--y2-white);
  border: 1px solid var(--y2-line);
  border-radius: var(--y2-radius);
  padding: var(--y2-s-3);
}
.y2-quote blockquote {
  margin: 0;
  font-family: var(--y2-body);
  font-size: var(--y2-t-body);
  line-height: var(--y2-lh-body);
  color: var(--y2-ink);
}
.y2-quote figcaption {
  margin-top: auto;
  font-family: var(--y2-body);
  font-size: var(--y2-t-small);
  font-weight: 600;
  color: var(--y2-ink-60);
}
.y2-quote__mark {
  font-family: var(--y2-display);
  font-size: 2rem;
  line-height: .6;
  color: var(--y2-pencil);
}

/* --------------------------------------------------------------------------
   §6 HOW IT WORKS  (Phase 5)

   Numbered markers are appropriate here: this genuinely is an ordered
   sequence, not a decorative list. Horizontal on desktop with a connecting
   rule behind the markers, vertical on mobile.
   -------------------------------------------------------------------------- */
.y2-steps { background: var(--y2-white); }

.y2-steps__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--y2-s-4);
}
.y2-step { position: relative; padding-left: 3.5rem; }
.y2-step__n {
  position: absolute;
  left: 0;
  top: 0;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--y2-pencil);
  color: var(--y2-ink);
  font-family: var(--y2-display);
  font-optical-sizing: auto;
  font-size: 1.125rem;
  font-weight: 650;
}
.y2-step h3 {
  font-family: var(--y2-display);
  font-optical-sizing: auto;
  font-size: var(--y2-t-h3);
  font-weight: 600;
  color: var(--y2-ink);
  margin: 0 0 var(--y2-s-1);
}
.y2-step p {
  font-family: var(--y2-body);
  font-size: var(--y2-t-body);
  line-height: var(--y2-lh-body);
  color: var(--y2-ink-60);
  margin: 0;
}

@media (min-width: 900px) {
  .y2-steps__list {
    grid-template-columns: repeat(5, 1fr);
    gap: var(--y2-s-3);
    position: relative;
  }
  /* Connector segments rather than one rule across the whole list. A single
     rule has to guess where the first and last markers sit, and any grid gap
     makes that guess wrong — it overshoots the last step and reads as a
     rendering fault. Each step instead draws its own segment from the edge of
     its marker to the next marker, which stays correct whatever the gap or
     the number of steps. */
  .y2-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: calc(1.25rem - 1px);
    left: 2.5rem;
    right: calc(-1 * var(--y2-s-3));
    height: 2px;
    background: var(--y2-line);
    z-index: 0;
  }
  .y2-step { padding-left: 0; padding-top: 3.5rem; }
  .y2-step__n { left: 0; z-index: 1; }
}

/* Compact list for the 1500+ scorers that are not featured as cards. A card
   each would give eleven large tiles and bury the four recent ones. */
.y2-scorelist { list-style: none; margin: var(--y2-s-4) 0 var(--y2-s-6); padding: 0; display: grid; grid-template-columns: 1fr; gap: 2px; }
@media (min-width: 700px)  { .y2-scorelist { grid-template-columns: repeat(2, 1fr); gap: 2px var(--y2-s-3); } }
@media (min-width: 1100px) { .y2-scorelist { grid-template-columns: repeat(3, 1fr); } }
.y2-scorelist li {
  display: flex;
  align-items: baseline;
  gap: var(--y2-s-2);
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--y2-line);
  font-family: var(--y2-body);
  font-size: var(--y2-t-small);
  color: var(--y2-ink-60);
}
.y2-scorelist b {
  font-family: var(--y2-display);
  font-optical-sizing: auto;
  font-size: 1.25rem;
  font-weight: 650;
  color: var(--y2-ink);
  flex: 0 0 auto;
  min-width: 3.4rem;
}

/* --------------------------------------------------------------------------
   §7 TIMELINE  (Phase 6)

   The calendar carries the argument, so the graphic is a real ordered list
   with a rule running through it rather than an image. That keeps it
   accessible without needing a separate text equivalent — a screen reader
   gets the same four stages, in order, with the same copy.

   The compression at the right-hand end is the point: on desktop the last
   two columns are narrower than the first two, so the run-up looks roomy and
   the finish looks tight.
   -------------------------------------------------------------------------- */
.y2-timeline { background: var(--y2-ink); color: var(--y2-white); --y2-focus: var(--y2-pencil); }
.y2-timeline__wrap { max-width: var(--y2-maxw); margin-inline: auto; padding: var(--y2-section-y) var(--y2-s-2); }
.y2-timeline__head { max-width: var(--y2-maxw-prose); margin-bottom: var(--y2-s-6); }
.y2-timeline__head .y2-eyebrow { color: var(--y2-pencil); }
.y2-timeline__head h2 { font-family: var(--y2-display); font-optical-sizing: auto; font-size: var(--y2-t-h2); font-weight: 650; line-height: var(--y2-lh-head); color: var(--y2-white); margin: 0; }
.y2-timeline__lede { font-family: var(--y2-body); font-size: 1.125rem; line-height: var(--y2-lh-body); color: rgba(255,255,255,.86); margin: var(--y2-s-2) 0 0; }

.y2-timeline__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--y2-s-4); }

.y2-stage { position: relative; padding-left: 2.5rem; }
.y2-stage__dot {
  position: absolute; left: 0; top: 0.15rem;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--y2-pencil);
}
.y2-stage--tight .y2-stage__dot { background: var(--y2-white); }
.y2-stage__when {
  display: block;
  font-family: var(--y2-body); font-size: var(--y2-t-eyebrow); font-weight: 700;
  letter-spacing: var(--y2-track-eyebrow); text-transform: uppercase;
  color: var(--y2-pencil); margin-bottom: 0.35rem;
}
.y2-stage--tight .y2-stage__when { color: var(--y2-white); }
.y2-stage h3 { font-family: var(--y2-display); font-optical-sizing: auto; font-size: var(--y2-t-h3); font-weight: 600; color: var(--y2-white); margin: 0 0 var(--y2-s-1); }
.y2-stage p { font-family: var(--y2-body); font-size: var(--y2-t-body); line-height: var(--y2-lh-body); color: rgba(255,255,255,.82); margin: 0; }

/* Vertical rule on mobile so the sequence still reads as one run. */
.y2-stage:not(:last-child)::after {
  content: ''; position: absolute; left: 6px; top: 1.6rem; bottom: calc(-1 * var(--y2-s-4));
  width: 2px; background: rgba(255,255,255,.22);
}

@media (min-width: 900px) {
  /* Four columns, the last two narrower — the calendar tightening, made
     visible in the layout rather than described in prose. */
  .y2-timeline__list { grid-template-columns: 1.25fr 1.25fr 1fr 0.8fr; gap: var(--y2-s-3); }
  .y2-stage { padding-left: 0; padding-top: 2.5rem; }
  .y2-stage__dot { top: 0; }
  .y2-stage:not(:last-child)::after {
    left: 1.1rem; right: calc(-1 * var(--y2-s-3)); top: 6px; bottom: auto;
    width: auto; height: 2px;
  }
}

.y2-timeline__close {
  margin-top: var(--y2-s-6);
  padding-top: var(--y2-s-4);
  border-top: 1px solid rgba(255,255,255,.16);
  max-width: var(--y2-maxw-prose);
}
.y2-timeline__close p { font-family: var(--y2-body); font-size: var(--y2-t-body); line-height: var(--y2-lh-body); color: rgba(255,255,255,.86); margin: 0 0 var(--y2-s-3); }

/* §8 Resources */
.y2-resources { background: var(--y2-white); }
.y2-resources__wrap { max-width: var(--y2-maxw); margin-inline: auto; padding: var(--y2-section-y) var(--y2-s-2); }
.y2-resources__head { max-width: var(--y2-maxw-prose); margin-bottom: var(--y2-s-6); }

/* --------------------------------------------------------------------------
   §9 COLLEGE COUNSELING  (Phase 7)

   Visually distinct from the test-prep sections: ink field, inverted type.
   Carries no guarantee, no acceptance implication and no college names or
   marks (G3) — the counseling side of the business must never borrow the
   320+ guarantee's framing.
   -------------------------------------------------------------------------- */
.y2-counsel { background: var(--y2-ink); --y2-focus: var(--y2-pencil); }
.y2-counsel__wrap { max-width: var(--y2-maxw); margin-inline: auto; padding: var(--y2-section-y) var(--y2-s-2); }
.y2-counsel__head { max-width: var(--y2-maxw-prose); margin-bottom: var(--y2-s-6); }
.y2-counsel__head h2 { font-family: var(--y2-display); font-optical-sizing: auto; font-size: var(--y2-t-h2); font-weight: 650; line-height: var(--y2-lh-head); color: var(--y2-white); margin: 0; }
.y2-counsel__head p { font-family: var(--y2-body); font-size: 1.125rem; line-height: var(--y2-lh-body); color: rgba(255,255,255,.86); margin: var(--y2-s-2) 0 0; }

.y2-tiers { display: grid; grid-template-columns: 1fr; gap: var(--y2-s-2); }
@media (min-width: 900px) { .y2-tiers { grid-template-columns: repeat(3, 1fr); gap: var(--y2-s-3); } }

.y2-tier {
  display: flex; flex-direction: column; gap: var(--y2-s-2);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--y2-radius); padding: var(--y2-s-3);
}
.y2-tier__when {
  font-family: var(--y2-body); font-size: var(--y2-t-eyebrow); font-weight: 700;
  letter-spacing: var(--y2-track-eyebrow); text-transform: uppercase; color: var(--y2-pencil);
}
.y2-tier h3 { font-family: var(--y2-display); font-optical-sizing: auto; font-size: var(--y2-t-h3); font-weight: 600; color: var(--y2-white); margin: 0; }
.y2-tier p { font-family: var(--y2-body); font-size: var(--y2-t-body); line-height: var(--y2-lh-body); color: rgba(255,255,255,.82); margin: 0; }
.y2-tier ul { margin: 0; padding-left: 1.1rem; }
.y2-tier li { font-family: var(--y2-body); font-size: var(--y2-t-small); line-height: 1.6; color: rgba(255,255,255,.78); margin-bottom: 0.35rem; }

/* Counselor block. Built as slots so a name, photo and bio drop in without
   touching the layout — the pre-hire state simply omits those elements. */
.y2-counselor {
  margin-top: var(--y2-s-6); padding-top: var(--y2-s-6);
  border-top: 1px solid rgba(255,255,255,.16);
  display: grid; grid-template-columns: 1fr; gap: var(--y2-s-3);
}
@media (min-width: 900px) { .y2-counselor { grid-template-columns: 1fr 1.4fr; gap: var(--y2-s-6); } }
.y2-counselor h3 { font-family: var(--y2-display); font-optical-sizing: auto; font-size: var(--y2-t-h3); font-weight: 600; color: var(--y2-white); margin: 0 0 var(--y2-s-1); }
.y2-counselor__intro { font-family: var(--y2-body); font-size: var(--y2-t-body); line-height: var(--y2-lh-body); color: rgba(255,255,255,.82); margin: 0; }
.y2-creds { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 2px; }
@media (min-width: 640px) { .y2-creds { grid-template-columns: repeat(2, 1fr); gap: 2px var(--y2-s-3); } }
.y2-creds li {
  display: flex; gap: 0.6rem; padding: 0.55rem 0;
  border-bottom: 1px solid rgba(255,255,255,.12);
  font-family: var(--y2-body); font-size: var(--y2-t-small); line-height: 1.5;
  color: rgba(255,255,255,.86);
}
.y2-creds li::before { content: '—'; color: var(--y2-pencil); flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   §10 FAQ · §11 CLOSING  (Phase 7)
   -------------------------------------------------------------------------- */
.y2-faq { background: var(--y2-paper); }
.y2-faq__wrap { max-width: var(--y2-maxw); margin-inline: auto; padding: var(--y2-section-y) var(--y2-s-2); }
.y2-faq__head { max-width: var(--y2-maxw-prose); margin-bottom: var(--y2-s-4); }
/* The nine <details> share a name attribute, which makes the group exclusive
   natively — one panel per interaction, as the plan requires, without any
   JavaScript. Browsers that do not support grouping simply allow more than one
   open, which degrades to a plain accordion rather than to something broken. */
.y2-faq__list { max-width: var(--y2-maxw-prose); }

.y2-close { background: var(--y2-white); border-top: 1px solid var(--y2-line); }
.y2-close__wrap { max-width: var(--y2-maxw-prose); margin-inline: auto; padding: var(--y2-section-y) var(--y2-s-2); text-align: center; }
.y2-close h2 { font-family: var(--y2-display); font-optical-sizing: auto; font-size: var(--y2-t-h2); font-weight: 650; line-height: var(--y2-lh-head); color: var(--y2-ink); margin: 0; }
.y2-close p { font-family: var(--y2-body); font-size: 1.125rem; line-height: var(--y2-lh-body); color: var(--y2-ink-60); margin: var(--y2-s-2) auto var(--y2-s-4); }
.y2-close__actions { display: flex; flex-wrap: wrap; gap: var(--y2-s-2); justify-content: center; }

/* --------------------------------------------------------------------------
   FOOTER  (Phase 8)
   -------------------------------------------------------------------------- */
.y2-footer { background: var(--y2-ink); --y2-focus: var(--y2-pencil); }
.y2-footer__wrap { max-width: var(--y2-maxw); margin-inline: auto; padding: var(--y2-s-8) var(--y2-s-2) var(--y2-s-4); }
.y2-footer__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--y2-s-4) var(--y2-s-3); }
@media (min-width: 700px)  { .y2-footer__cols { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .y2-footer__cols { grid-template-columns: repeat(6, 1fr); gap: var(--y2-s-4); } }
.y2-footer h2 {
  font-family: var(--y2-body); font-size: var(--y2-t-eyebrow); font-weight: 700;
  letter-spacing: var(--y2-track-eyebrow); text-transform: uppercase;
  color: var(--y2-pencil); margin: 0 0 var(--y2-s-2);
}
.y2-footer ul { list-style: none; margin: 0; padding: 0; }
.y2-footer li { margin-bottom: 0.45rem; }
.y2-footer a {
  font-family: var(--y2-body); font-size: var(--y2-t-small); line-height: 1.5;
  color: rgba(255,255,255,.80); text-decoration: none;
}
.y2-footer a:hover { color: var(--y2-pencil); text-decoration: underline; text-underline-offset: .15em; }

/* NAP block. Marked up as a real address so the postal details are one
   element rather than three scattered links. */
.y2-footer__nap { font-style: normal; font-family: var(--y2-body); font-size: var(--y2-t-small); line-height: 1.6; color: rgba(255,255,255,.80); }
.y2-footer__nap b { display: block; color: var(--y2-white); font-weight: 700; margin-bottom: 0.25rem; }

.y2-footer__base {
  margin-top: var(--y2-s-6); padding-top: var(--y2-s-3);
  border-top: 1px solid rgba(255,255,255,.16);
  display: flex; flex-wrap: wrap; gap: var(--y2-s-2) var(--y2-s-3);
  align-items: center; justify-content: space-between;
}
.y2-footer__legal { font-family: var(--y2-body); font-size: var(--y2-t-small); color: rgba(255,255,255,.62); margin: 0; }
.y2-footer__social { display: flex; gap: var(--y2-s-3); }

/* --------------------------------------------------------------------------
   FLOATING ACTIONS  (Phase 8)

   Exactly two, per the plan: call and WhatsApp. Nothing else floats — the
   outgoing back-to-top button has been removed rather than left as a third.

   They sit above a safe-area inset so they clear the iOS home indicator, and
   the closing section gets bottom padding on small screens so the buttons
   never cover its CTAs.
   -------------------------------------------------------------------------- */
/* .y2-fab was defined as position:fixed in the Phase 1 component layer, for
   use as a standalone button. Stacked inside this wrapper that nests fixed
   inside fixed: the children leave the flow, the wrapper collapses to zero
   height, and the gap between them stops meaning anything. It happens to
   render correctly today because the children fall back to their static
   position, but that is luck, not layout. The wrapper owns the positioning;
   the buttons inside it are ordinary flex items. */
.y2-fabs .y2-fab { position: static; }

.y2-fabs {
  position: fixed;
  right: var(--y2-s-2);
  bottom: calc(var(--y2-s-2) + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: flex; flex-direction: column; gap: var(--y2-s-1);
}
@media (min-width: 1024px) { .y2-close__wrap { padding-bottom: var(--y2-section-y); } }
@media (max-width: 1023px) { .y2-close__wrap { padding-bottom: calc(var(--y2-section-y) + 140px); } }

/* --------------------------------------------------------------------------
   FOCUS RING — restated  (Phase 9)

   The Phase 1 component block names .y2-link and .y2-card__link, and the
   custom properties resolve correctly on those elements, but a real keyboard
   walk on production showed them falling back to the browser's own 1.5px
   ring. The author declaration is losing the cascade somewhere against the
   legacy stylesheet, which is still loaded on every page.

   Restated here because y2-home.css is the last stylesheet in the head, so
   this does not depend on winning that race. Found by tabbing the page and
   recording document.activeElement at each step — not by reading the CSS,
   which looked correct throughout.
   -------------------------------------------------------------------------- */
.y2-link:focus-visible,
.y2-card__link:focus-visible,
.y2-nav__brand:focus-visible,
.y2-skip:focus,
.y2-footer a:focus-visible,
.y2-scorelist a:focus-visible {
  /* Literal values, not custom properties. With the shorthand written as
     `var(--y2-focus-width) solid var(--y2-focus)` these elements rendered a
     solid 1.5px ring: the style resolved but the width did not, so the ring
     was half the intended thickness while every .y2-btn on the same page got
     the full 3px. Longhands with literal values remove the substitution from
     the path entirely. */
  outline: 3px solid #14264C;
  outline-width: 3px;
  outline-offset: 2px;
  border-radius: var(--y2-radius-sm);
}

/* Skip link. The page had no way past the nav for a keyboard user, and no
   <main> to skip to. Visually hidden until focused. */
.y2-skip {
  position: absolute;
  left: var(--y2-s-2);
  top: -100%;
  z-index: 80;
  padding: 0.7rem 1.1rem;
  background: var(--y2-pencil);
  color: var(--y2-ink);
  font-family: var(--y2-body);
  font-size: var(--y2-t-small);
  font-weight: 700;
  border-radius: var(--y2-radius-sm);
  text-decoration: none;
}
.y2-skip:focus { top: var(--y2-s-2); }