/* /for-academies -- the proposal page for coach training programs.

   Loaded AFTER /styles.css and /coaches-in-training/coaches-in-training.css,
   on <body class="tn ac">. The coaches-in-training sheet supplies the colour
   tokens (.tn), the nav, buttons, hero, product mockup, FAQ, footer and sticky
   CTA; this file draws only the sections the academies page has on its own:
   the hero stage, offer line and badges, the outcome cards, the scenario tabs
   and their proofs, the dark faculty section and its boundary banner, the
   pilot timeline and form. A change to the shared sheet shows on both pages.

   Surfaces alternate down the page: hero white, outcomes slate band,
   scenarios white, faculty dark (slate-900), pilot violet tint, FAQ white,
   footer slate-50.

   Same contrast target as the shared sheet (WCAG AAA: body text >= 7:1,
   large text >= 4.5:1), and text only in measured colours. Colours new to
   this file are measured beside their rule; the dark ones against slate-900
   (#0f172a) and against the faculty card (slate-800 at 70% on slate-900,
   #1a2436).

   ASCII only: this file is served without a charset, so marks are SVG data
   URIs or inline SVG in the markup, never CSS escapes. */

/* Anchors clear the sticky nav (about 62px tall). */
.ac #outcomes, .ac #scenarios, .ac #faculty, .ac #faq, .ac #pilot, .ac .ac-case { scroll-margin-top: 84px; }

.ac .tn-h1 { font-size: 34px; }
@media (min-width: 768px) { .ac .tn-h1 { font-size: 46px; line-height: 1.06; } }
@media (min-width: 1200px) { .ac .tn-h1 { font-size: 50px; } }

/* -- 1. Hero: offer line, badges and the mockup's stage -------------------- */

/* The pilot's terms on one line beside the CTA: ink, bold, 15px. */
.ac-offer-line { margin: 16px 0 0; font-size: 15px; font-weight: 650; line-height: 1.45; color: var(--ink); }
.ac-offer-line span { color: var(--muted); margin: 0 4px; }

/* Phones: a tight two-column list (no pill), so the mockup starts sooner.
   From 640px: pills in a wrapping row. slate-700 on white is 10.35:1. */
.ac-badges {
  list-style: none; margin: 18px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px;
}
.ac-badges li {
  display: flex; align-items: flex-start; gap: 7px; min-width: 0;
  font-size: 12.5px; font-weight: 550; line-height: 1.35; color: var(--slate-700);
}
.ac-badge-ic { display: inline-flex; flex: 0 0 15px; margin-top: 1px; color: var(--teal-800); }
.ac-badge-ic svg { width: 15px; height: 15px; }
@media (min-width: 640px) {
  .ac-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
  .ac-badges li {
    align-items: center; gap: 8px; padding: 8px 13px; border-radius: 999px; background: #fff;
    border: 1px solid var(--slate-200); box-shadow: var(--shadow-xs); font-size: 13.5px;
  }
  .ac-badge-ic { margin-top: 0; flex-basis: 16px; }
  .ac-badge-ic svg { width: 16px; height: 16px; }
}

/* The stage gives the floating card a ground: indigo-50 into slate-50 into
   purple-50. It replaces the shared mockup's ambient glow, which would spill
   past the stage's edge. */
.ac-stage {
  position: relative; width: 100%; max-width: 600px; margin: 0 auto; box-sizing: border-box;
  padding: 20px; border-radius: 24px; border: 1px solid rgba(226, 232, 240, 0.8); box-shadow: var(--shadow-xs);
  background: linear-gradient(135deg, rgba(238, 242, 255, 0.9) 0%, var(--slate-50) 52%, rgba(250, 245, 255, 0.7) 100%);
}
@media (min-width: 640px) { .ac-stage { padding: 28px; } }
.ac-stage .tn-mock-wrap::before { display: none; }
.ac-stage .tn-mock { box-shadow: var(--shadow-md); }
.ac-stage .tn-mock-cap { margin-top: 16px; }

/* The two parts of the example, labelled so the promise reads off them. */
.ac-mock-k { margin: 0 0 -4px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.ac-hours { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.ac-hours .ac-mock-k { margin: 0; }
.ac-hours-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ac-hours-n { margin: 0; font-size: 14px; color: var(--text); font-variant-numeric: tabular-nums; }
.ac-hours-n strong { font-size: 20px; font-weight: 700; color: var(--ink); margin-right: 2px; }

/* -- 2. Outcomes -------------------------------------------------------------
   slate-50/90 band between hairlines (--muted 8.15:1, text higher); three
   cards, a heading and one sentence each. */

.ac-out-sec { background: rgba(248, 250, 252, 0.9); border-top: 1px solid rgba(226, 232, 240, 0.7); border-bottom: 1px solid rgba(226, 232, 240, 0.7); }
.ac-out-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 860px) { .ac-out-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } }
.ac-out {
  display: flex; flex-direction: column; gap: 10px; min-width: 0;
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  padding: 24px 24px 26px; box-shadow: var(--shadow-xs);
}
.ac-out .tn-ico { margin-bottom: 4px; }
.ac-out h3 { margin: 0; font-size: 18.5px; line-height: 1.3; font-weight: 700; color: var(--ink); }
.ac-out p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--text); }

/* -- 3. Scenario tabs ------------------------------------------------------
   With JS off the strip is hidden and every panel shows (the script adds the
   tabpanel roles and `hidden`). A panel is display:grid, so `hidden` needs its
   own rule or the browser's would lose. Labels never wrap: below 640px the
   strip is three stacked rows, from 640px one row of three. */

.ac-sc-sec { background: #fff; }
html:not(.js) .ac-tabs { display: none; }
.ac-tabs {
  display: grid; grid-template-columns: 1fr; gap: 6px;
  max-width: 720px; margin: 0 auto 26px; padding: 6px;
  background: var(--slate-100); border: 1px solid var(--slate-200); border-radius: 18px;
}
@media (min-width: 640px) { .ac-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ac-tab {
  display: flex; align-items: center; justify-content: flex-start; gap: 10px; min-width: 0; min-height: 46px;
  padding: 10px 14px; border: 0; border-radius: 13px; background: transparent; cursor: pointer;
  font-family: inherit; font-size: 15px; font-weight: 650; line-height: 1.2; color: var(--muted); /* 7.75:1 on slate-100 */
  text-align: left; transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
@media (min-width: 640px) { .ac-tab { justify-content: center; text-align: center; } }
.ac-tab-l { white-space: nowrap; }
.ac-tab:hover { color: var(--ink); }
.ac-tab[aria-selected="true"] { background: #fff; color: var(--brand-ink); box-shadow: var(--shadow-sm); }
.ac-tab:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.ac-tab-n {
  display: grid; place-items: center; flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; border: 1px solid var(--slate-200); font-size: 12.5px; font-weight: 700; color: var(--slate-700);
}
.ac-tab[aria-selected="true"] .ac-tab-n { background: var(--brand); border-color: var(--brand); color: #fff; } /* 7.33:1 */

/* One panel: the context, the example, the outcome. Stacked in that order on
   phones; from 900px the example takes the right column across both rows. */
.ac-cases { display: flex; flex-direction: column; gap: 24px; }
.ac-case {
  display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; min-width: 0;
  grid-template-areas: "copy" "proof" "impact";
  background: #fff; border: 1px solid var(--line); border-radius: 24px;
  padding: clamp(20px, 3vw, 34px); box-shadow: var(--shadow-sm);
}
@media (min-width: 900px) {
  .ac-case {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-rows: auto 1fr; gap: 20px 32px;
    grid-template-areas: "copy proof" "impact proof";
  }
}
.ac-case[hidden] { display: none; }
.ac-case:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.ac-case-copy { grid-area: copy; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ac-case-title { margin: 0; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.18; letter-spacing: -0.02em; font-weight: 700; color: var(--ink); text-wrap: balance; }
.ac-case-ctx { margin: 0; font-size: 16.5px; line-height: 1.55; color: var(--muted); }
.ac-p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text); }

/* The example: a dark, read-only panel in a monospace face. On slate-900:
   slate-100 16.3:1, slate-200 14.5:1, slate-300 12.0:1, indigo-300 8.96:1,
   emerald-300 11.7:1; amber-300 on its tint 9.85:1, emerald-300 on its tint
   9.44:1. */
.ac-proof {
  grid-area: proof; min-width: 0; margin: 0; padding: 16px 18px 18px; border-radius: 14px;
  background: #0f172a; color: #e2e8f0; box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.16), var(--shadow-md);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.55;
}
.ac-proof p { margin: 0; }
.ac-proof-bar {
  display: flex; justify-content: space-between; gap: 10px; padding-bottom: 9px; margin-bottom: 10px !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.22); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: #cbd5e1;
}
.ac-proof-line { color: #f1f5f9; }
.ac-proof-t { color: #a5b4fc; }
.ac-proof-pill {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 10px !important; padding: 5px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; line-height: 1.3;
}
.ac-proof-pill svg { width: 13px; height: 13px; flex: 0 0 13px; }
.ac-proof-amber { background: rgba(245, 158, 11, 0.14); color: #fcd34d; border: 1px solid rgba(245, 158, 11, 0.38); }
.ac-proof-green { background: rgba(16, 185, 129, 0.14); color: #6ee7b7; border: 1px solid rgba(16, 185, 129, 0.38); }
.ac-proof-next { margin-top: 10px !important; color: #e2e8f0; }
.ac-proof-next span { color: #6ee7b7; font-weight: 700; }
.ac-proof-sum { color: #f1f5f9; font-weight: 600; }
/* Scenario 2: one line of a transcript, three stops. */
.ac-pipe { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.ac-pipe li { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.ac-pipe li + li { padding-top: 9px; border-top: 1px dashed rgba(148, 163, 184, 0.24); }
.ac-pipe-k { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #a5b4fc; }
.ac-pipe-v { color: #f1f5f9; min-width: 0; overflow-wrap: anywhere; }
.ac-pipe-s { display: block; margin-top: 2px; font-size: 11.5px; color: #cbd5e1; }
/* Scenario 3: the hours overview, one bar per requirement. */
.ac-meter { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.ac-meter li { display: grid; grid-template-columns: 58px minmax(0, 1fr) 76px; gap: 10px; align-items: center; color: #cbd5e1; font-size: 11.5px; }
.ac-meter li > span:last-child { text-align: right; color: #f1f5f9; font-variant-numeric: tabular-nums; }
.ac-meter-bar { display: block; height: 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.ac-meter-bar span { display: block; height: 100%; width: calc(var(--p) * 1%); border-radius: inherit; background: #34d399; }
.ac-meter-warn span { background: #fbbf24; }

/* The outcome, on emerald-50: emerald-800 heading 7.29:1, body text
   10.6:1, brand-ink links 8.73:1. */
.ac-impact { grid-area: impact; padding: 16px 20px 18px; border-radius: 16px; background: var(--emerald-50); border: 1px solid #d1fae5; }
.ac-impact-h { margin: 0 0 5px; font-size: 16.5px; font-weight: 700; color: var(--emerald-800); }
.ac .ac-impact a { color: var(--brand-ink); font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }

/* -- 4. Faculty: dark, three groups, then the boundary -----------------------
   slate-900 surface. White headings 17.9:1 (15.6:1 on a card); slate-300
   copy 12.0:1 on the surface, 10.5:1 on a card, 11.2:1 on the boundary
   banner; indigo-300 eyebrow 8.96:1; slate-200 chips 10.6:1; amber-300
   11.5:1 on the banner. */

.ac-fac-sec { background: #0f172a; color: #cbd5e1; padding: clamp(72px, 8vw, 100px) 0; }
.ac .ac-eyebrow-dark { color: #a5b4fc; }
.ac .ac-h2-dark { color: #fff; }
.ac-bento { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 900px) { .ac-bento { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.ac-bc {
  display: flex; flex-direction: column; gap: 10px; min-width: 0;
  background: rgba(30, 41, 59, 0.7); border: 1px solid rgba(51, 65, 85, 0.8); border-radius: 16px; padding: 24px;
}
.ac-bc h3 { margin: 0; font-size: 19px; line-height: 1.3; font-weight: 700; color: #fff; text-wrap: balance; hyphens: manual; }
.ac-bc p { margin: 0; font-size: 15px; line-height: 1.6; color: #cbd5e1; }
.ac-bc p.ac-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 8px; }
.ac-chips span {
  padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); border: 1px solid #475569;
  font-size: 12.5px; font-weight: 650; line-height: 1.3; color: #e2e8f0;
}
/* The product boundary: dashed amber, so it reads as a stated limit, not a
   seventh feature. */
.ac-roadmap {
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 20px;
  padding: 18px 24px; border-radius: 14px; background: rgba(30, 41, 59, 0.4); border: 1.5px dashed rgba(245, 158, 11, 0.45);
}
@media (min-width: 640px) { .ac-roadmap { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; } }
.ac-roadmap-copy { min-width: 0; }
.ac-roadmap-k { margin: 0 0 4px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #fcd34d; }
.ac-roadmap-h { margin: 0 0 4px; font-size: 18px; line-height: 1.3; font-weight: 700; color: #fff; }
.ac-roadmap-t { margin: 0; font-size: 15px; line-height: 1.55; color: #cbd5e1; max-width: 70ch; }
.ac a.ac-roadmap-cta {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 999px;
  background: #fff; color: var(--brand-ink); font-size: 15px; font-weight: 650; white-space: nowrap; /* 9.19:1 */
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.ac a.ac-roadmap-cta:hover { background: var(--brand-tint); color: var(--brand-ink); transform: translateY(-1px); }
.ac a.ac-roadmap-cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; border-radius: 999px; }
.ac .ac-disclaimer-dark { color: #cbd5e1; }

/* -- 5. Cohort pilot ----------------------------------------------------------
   Violet tint (violet-50 at 70% on white): --muted 7.96:1, brand-ink
   8.62:1, --text 10.4:1. */

.ac-pilot { background: linear-gradient(180deg, rgba(245, 243, 255, 0.7) 0%, rgba(248, 250, 252, 0.9) 100%); }
.ac-pilot-grid { display: grid; grid-template-columns: 1fr; gap: clamp(32px, 5vw, 56px); align-items: start; }
@media (min-width: 960px) { .ac-pilot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); align-items: center; } }
.ac-pilot-copy { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* Three steps on a rail: numbered dots joined by a line. */
.ac-timeline { list-style: none; margin: 14px 0 0; padding: 0; counter-reset: ac-step; }
.ac-timeline li { position: relative; padding: 0 0 22px 46px; counter-increment: ac-step; }
.ac-timeline li:last-child { padding-bottom: 0; }
.ac-timeline li::before {
  content: counter(ac-step); position: absolute; left: 0; top: 0;
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--brand); color: #fff; font-size: 14px; font-weight: 700; /* 7.33:1 */
  box-shadow: 0 0 0 5px rgba(91, 43, 224, 0.12);
}
.ac-timeline li:not(:last-child)::after {
  content: ""; position: absolute; left: 14px; top: 36px; bottom: 4px; width: 2px; border-radius: 2px; background: #c7d2fe;
}
.ac-tl-when { margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand-ink); }
.ac-tl-h { margin: 2px 0 2px; font-size: 17px; font-weight: 700; color: var(--ink); }
.ac-tl-t { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--text); }

.ac-form-card {
  min-width: 0; background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--indigo-600); border-radius: 24px;
  padding: clamp(22px, 3vw, 32px); box-shadow: var(--shadow-lg);
}
.ac-form-h { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.ac-form-sub { margin: 6px 0 0; font-size: 15px; line-height: 1.5; color: var(--muted); }
.ac-form { display: flex; flex-direction: column; gap: 16px; margin-top: 20px; }
.ac-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ac-field-row { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 480px) { .ac-field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ac-field label { font-size: 14px; font-weight: 650; color: var(--ink); }
/* 16px text so iOS does not zoom on focus. Field border slate-500, 4.76:1
   against white (a control's edge needs 3:1). */
.ac-field input,
.ac-field select {
  width: 100%; box-sizing: border-box; min-height: 48px; margin: 0;
  padding: 11px 14px; border: 1px solid #64748b; border-radius: 12px; background: #fff;
  font-family: inherit; font-size: 16px; line-height: 1.4; color: var(--ink);
}
.ac-field select {
  appearance: none; -webkit-appearance: none; padding-right: 40px;
  background: #fff no-repeat right 14px center / 16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%234f4a5e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7.5 10 12.5 15 7.5'/%3E%3C/svg%3E");
}
.ac-field input:focus-visible,
.ac-field select:focus-visible { outline: 3px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }

.ac .ac-submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  margin-top: 4px; padding: 15px 24px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--brand); color: #fff; /* 7.33:1 */
  font-family: inherit; font-size: 16.5px; font-weight: 650; line-height: 1.2;
  box-shadow: 0 10px 24px rgba(91, 43, 224, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: background-color 0.15s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.ac .ac-submit:hover {
  background: var(--brand-ink); transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(91, 43, 224, 0.38), 0 0 0 6px rgba(91, 43, 224, 0.12);
}
.ac .ac-submit:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.ac-form-note { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.ac-form-done { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px 16px; border-radius: 14px; background: var(--ok-tint); }
.ac-form-done[hidden] { display: none; }
.ac-form-status { margin: 0; font-size: 14.5px; line-height: 1.5; font-weight: 600; color: var(--ok-ink); } /* 8.48:1 */
.ac .ac-copy {
  padding: 9px 16px; border-radius: 999px; border: 1.5px solid rgba(7, 80, 43, 0.35); background: #fff; cursor: pointer;
  font-family: inherit; font-size: 14.5px; font-weight: 650; color: var(--ok-ink);
}
.ac .ac-copy:hover { border-color: var(--ok-ink); }
.ac .ac-copy:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

/* -- 6. FAQ ------------------------------------------------------------------ */

.ac #faq { background: #fff; }

/* -- Phones: the sticky CTA ---------------------------------------------------
   The full label, "Request a cohort pilot", on one line; the copy beside it
   gives way first. The footer keeps room under its last line, since the bar
   shows again below the pilot. */
.ac .tn-sticky a.tn-btn { flex: 0 0 auto; max-width: none; white-space: nowrap; padding: 13px 16px; font-size: 15px; }
@media (max-width: 359px) { .ac .tn-sticky-s { display: none; } }
@media (max-width: 767px) {
  .ac .tn-footer { padding-bottom: calc(108px + env(safe-area-inset-bottom)); }
}

/* -- Motion preferences --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .ac-tab, .ac .ac-submit, .ac a.ac-roadmap-cta { transition: none; }
  .ac .ac-submit:hover, .ac a.ac-roadmap-cta:hover { transform: none; }
}