/* BestPath Component Library · Direction A (Quiet Editorial) */
:root {
  --bp-paper: #ffffff;
  --bp-surface: #f9f9f1;
  --bp-surface-2: #d6d6d6;
  --bp-surface-blue: #e9f5fc;
  --bp-ink: #1a1a1a;
  --bp-ink-2: #30362f;
  --bp-ink-muted: #666d67;
  --bp-ink-subtle: #6b706b;
  --bp-rule: rgba(26, 26, 26, 0.16);
  --bp-rule-soft: rgba(26, 26, 26, 0.08);
  --bp-accent: #087bbd;
  --bp-accent-dark: #075f91;
  --bp-accent-ink: #ffffff;
  --bp-accent-soft: #92cdf2;
  --bp-highlight: #ff9900;
  --bp-highlight-text: #c46f00;
  --bp-highlight-ink: #1a1a1a;
  --bp-highlight-soft: #ffd699;
  --bp-success: #6cae32;
  --bp-warning: #ffd54d;
  --bp-danger: #bf1a2f;
  --bp-info: #48acea;
  --bp-tint-done: #cbf6da;
  --bp-tint-info: #dde6f0;
  --bp-tint-access: #e3f2fa;
  --bp-display-family: "Lora", Georgia, serif;
  --bp-display-weight: 500;
  --bp-serif-family: "Newsreader", Georgia, serif;
  --bp-body-family: "Inter", system-ui, sans-serif;
  --bp-mono-family: "JetBrains Mono", ui-monospace, monospace;
  --bp-r-sm: 4px;
  --bp-r-md: 8px;
  --bp-r-lg: 14px;
  --bp-r-pill: 999px;
  --bp-s-1: 4px;
  --bp-s-2: 8px;
  --bp-s-3: 12px;
  --bp-s-4: 16px;
  --bp-s-5: 24px;
  --bp-s-6: 32px;
  --bp-s-7: 48px;
  --bp-s-8: 64px;
  --bp-easing: cubic-bezier(0.2, 0.6, 0.2, 1);
  --bp-dur-fast: 120ms;
  --bp-dur-med: 200ms;
  --site-max: 1180px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  margin: 0;
}

body {
  min-width: 320px;
  background: var(--bp-paper);
  color: var(--bp-ink);
  font-family: var(--bp-body-family);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body,
button,
input {
  font-family: var(--bp-body-family);
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

h1,
h2,
h3,
p,
dl,
dd {
  margin: 0;
}

h1,
h2,
h3 {
  color: var(--bp-ink);
  font-family: var(--bp-display-family);
  font-weight: var(--bp-display-weight);
}

h1 {
  font-size: 72px;
  line-height: 74px;
  letter-spacing: -1.8px;
}

h2 {
  font-size: 48px;
  line-height: 52px;
  letter-spacing: -0.7px;
}

h3 {
  font-size: 28px;
  line-height: 32px;
  letter-spacing: -0.2px;
}

[id] {
  scroll-margin-top: 96px;
}

.container {
  width: min(var(--site-max), calc(100% - 48px));
  margin-inline: auto;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: fixed;
  top: var(--bp-s-2);
  left: var(--bp-s-2);
  z-index: 100;
  padding: 10px 14px;
  border-radius: var(--bp-r-md);
  background: var(--bp-ink);
  color: var(--bp-paper);
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--bp-dur-fast) var(--bp-easing);
}

.skip-link:focus {
  transform: translateY(0);
}

/* Canonical component-library primitives */
.bp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bp-s-2);
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: var(--bp-r-md);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--bp-dur-fast) var(--bp-easing), color var(--bp-dur-fast) var(--bp-easing), border-color var(--bp-dur-fast) var(--bp-easing), filter var(--bp-dur-fast) var(--bp-easing);
}

.bp-btn--primary {
  border-color: var(--bp-accent);
  background: var(--bp-accent);
  color: var(--bp-accent-ink);
}

/* ⚠️ DARKENS ON HOVER, AND IT CANNOT BRIGHTEN. This was `filter: brightness(1.1)`,
   which took white 14-16px bold text on the accent from 4.59:1 to 3.90:1 — under
   the 4.5:1 AA needs for text this size, on every primary button on the site.

   🚩 There is no smaller version of this fix. AA against white needs a background
   luminance <= 0.1833 and `--bp-accent` is already at 0.1789, so the largest
   `brightness()` multiplier that still passes is 1.01 — no hover state at all.
   The accent sits at the edge of AA at rest, so any hover has to go darker.

   📌 Same value as `.bp-btn--primary:hover` in app/assets/stylesheets/components.css,
   which already did this correctly — two copies of one class, kept in step, rather
   than a third blue. 5.67:1. */
.bp-btn--primary:hover {
  background: color-mix(in srgb, var(--bp-accent) 85%, var(--bp-ink));
  border-color: color-mix(in srgb, var(--bp-accent) 85%, var(--bp-ink));
}

.bp-btn--secondary {
  border-color: var(--bp-rule);
  background: var(--bp-paper);
  color: var(--bp-ink);
}

.bp-btn--secondary:hover {
  border-color: var(--bp-ink-muted);
  background: var(--bp-surface);
}

.bp-btn--lg {
  padding: 14px 24px;
  font-size: 14px;
}

.bp-btn:focus-visible,
.bp-input:focus,
a:focus-visible,
.nav-toggle:focus-visible {
  outline: none;
  border-color: var(--bp-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bp-accent) 25%, transparent);
}

.bp-card {
  padding: var(--bp-s-5);
  border: 1px solid var(--bp-rule);
  border-radius: 11px;
  background: var(--bp-paper);
}

.bp-card--soft {
  border-color: var(--bp-rule);
  background: var(--bp-surface);
}

.bp-field {
  display: grid;
  gap: 6px;
  margin-bottom: 18px;
}

.bp-field label {
  color: var(--bp-ink);
  font-size: 13px;
  font-weight: 600;
}

.bp-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--bp-rule);
  border-radius: var(--bp-r-md);
  background: var(--bp-paper);
  color: var(--bp-ink);
  font: inherit;
  transition: border-color var(--bp-dur-fast), box-shadow var(--bp-dur-fast);
}

.bp-input::placeholder {
  color: var(--bp-ink-subtle);
}

.bp-alert {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: min(420px, 100%);
  min-height: 120px;
  padding: 18px;
  border: 0;
  border-left: 4px solid var(--bp-accent);
  border-radius: var(--bp-r-md);
  background: var(--bp-tint-access);
  color: var(--bp-ink);
}

.bp-alert > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bp-alert__title {
  color: var(--bp-ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
}

.bp-alert__body {
  color: var(--bp-ink-2);
  font-size: 13px;
  line-height: 20px;
}

.bp-alert--success {
  border-left-color: #1989ce;
}

.bp-alert--info {
  border-left-color: var(--bp-info);
}

.bp-alert--warning {
  border-left-color: var(--bp-warning);
}

/* Phosphor storytelling icons */
.story-icon,
.action-icon {
  --ph-icon: none;
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  color: var(--bp-accent-dark);
}

.story-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--bp-tint-access);
}

.story-icon::before,
.action-icon::before {
  display: block;
  width: 22px;
  height: 22px;
  background: currentColor;
  content: "";
  -webkit-mask-image: var(--ph-icon);
  mask-image: var(--ph-icon);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.story-icon--section {
  width: 44px;
  height: 44px;
  border-radius: 11px;
}

.story-icon--section::before {
  width: 24px;
  height: 24px;
}

.story-icon--highlight {
  background: var(--bp-highlight-soft);
  color: var(--bp-highlight-text);
}

.story-icon--on-blue {
  background: rgba(255, 255, 255, 0.82);
}

.story-icon--on-dark {
  background: rgba(255, 255, 255, 0.14);
  color: var(--bp-paper);
}

.action-icon {
  width: 18px;
  height: 18px;
  color: currentColor;
}

.action-icon::before {
  width: 18px;
  height: 18px;
}

.story-kicker {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 12px;
}

.story-kicker .eyebrow {
  margin: 0;
}

.ph-arrows-split { --ph-icon: url("icons/phosphor/arrows-split.svg"); }
.ph-brain { --ph-icon: url("icons/phosphor/brain.svg"); }
.ph-briefcase { --ph-icon: url("icons/phosphor/briefcase.svg"); }
.ph-buildings { --ph-icon: url("icons/phosphor/buildings.svg"); }
.ph-calendar-check { --ph-icon: url("icons/phosphor/calendar-check.svg"); }
.ph-chart-bar { --ph-icon: url("icons/phosphor/chart-bar.svg"); }
.ph-chart-line-up { --ph-icon: url("icons/phosphor/chart-line-up.svg"); }
.ph-chat-teardrop-text { --ph-icon: url("icons/phosphor/chat-teardrop-text.svg"); }
.ph-chats { --ph-icon: url("icons/phosphor/chats.svg"); }
.ph-chats-circle { --ph-icon: url("icons/phosphor/chats-circle.svg"); }
.ph-compass { --ph-icon: url("icons/phosphor/compass.svg"); }
.ph-device-mobile { --ph-icon: url("icons/phosphor/device-mobile.svg"); }
.ph-file-text { --ph-icon: url("icons/phosphor/file-text.svg"); }
.ph-graduation-cap { --ph-icon: url("icons/phosphor/graduation-cap.svg"); }
.ph-hand-heart { --ph-icon: url("icons/phosphor/hand-heart.svg"); }
.ph-list { --ph-icon: url("icons/phosphor/list.svg"); }
.ph-magnifying-glass { --ph-icon: url("icons/phosphor/magnifying-glass.svg"); }
.ph-paper-plane-tilt { --ph-icon: url("icons/phosphor/paper-plane-tilt.svg"); }
.ph-path { --ph-icon: url("icons/phosphor/path.svg"); }
.ph-question { --ph-icon: url("icons/phosphor/question.svg"); }
.ph-road-horizon { --ph-icon: url("icons/phosphor/road-horizon.svg"); }
.ph-sparkle { --ph-icon: url("icons/phosphor/sparkle.svg"); }
.ph-steps { --ph-icon: url("icons/phosphor/steps.svg"); }
.ph-student { --ph-icon: url("icons/phosphor/student.svg"); }
.ph-target { --ph-icon: url("icons/phosphor/target.svg"); }
.ph-trend-up { --ph-icon: url("icons/phosphor/trend-up.svg"); }
.ph-user-check { --ph-icon: url("icons/phosphor/user-check.svg"); }
.ph-user-focus { --ph-icon: url("icons/phosphor/user-focus.svg"); }
.ph-user-minus { --ph-icon: url("icons/phosphor/user-minus.svg"); }
.ph-users-three { --ph-icon: url("icons/phosphor/users-three.svg"); }

/* Shared site shell */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid var(--bp-rule-soft);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  width: calc(100% - 56px);
  min-height: 76px;
  margin-inline: auto;
}

.wordmark {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.wordmark__mark {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.wordmark__text {
  width: 112px;
  height: 20px;
  object-fit: contain;
}

.nav-menu {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
}

.nav-links a {
  color: var(--bp-ink-2);
  font-size: 14px;
  line-height: 23px;
  text-decoration: none;
}

.nav-links a:hover {
  color: var(--bp-accent);
}

.header-login {
  min-height: 46px;
  padding-inline: 20px;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}

.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  margin-left: auto;
  padding: 10px;
  border: 1px solid var(--bp-rule);
  border-radius: var(--bp-r-md);
  background: var(--bp-paper);
  cursor: pointer;
}

.nav-toggle .action-icon {
  width: 20px;
  height: 20px;
}

.nav-toggle .action-icon::before {
  width: 20px;
  height: 20px;
}

.site-footer {
  padding: var(--bp-s-6) 0;
  border-top: 1px solid var(--bp-rule);
  background: var(--bp-paper);
}

.footer-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 32px;
  row-gap: 8px;
}

.footer-wordmark {
  align-self: start;
  justify-self: start;
}

/* Scoped: `.section-stack` is a general page utility with a much larger gap,
   and the footer's brand block is two tight lines. Kept in step with the copy
   in app/assets/stylesheets/layout.css. */
.marketing-footer .section-stack,
.site-footer .section-stack {
  grid-row: span 2;
  gap: var(--bp-s-2);
}

/* No `grid-column` here on purpose: there are TWO of these navs now (Explore and
   Support), so auto-placement is what puts them in columns 2 and 3. Pinning them
   to a column stacked both in the same one. Kept in step with the scoped copy in
   app/assets/stylesheets/layout.css, which styles the same partial on the
   signed-out application pages. */
.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
}

.footer-links a {
  font-size: 15px;
  line-height: 26px;
}

/* The legal row sits under the wayfinding one and reads quieter, the way the
   signed-in footer's own legal row does. */
.footer-links--legal a {
  color: var(--bp-ink-muted);
  font-size: 14px;
}

.footer-links a {
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--bp-accent);
}



/* Website typography and layout */
.eyebrow {
  color: var(--bp-ink-muted);
  font-family: var(--bp-mono-family);
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.eyebrow--light {
  color: var(--bp-paper);
}

.lede {
  color: var(--bp-ink-2);
  font-family: var(--bp-serif-family);
  font-size: 22px;
  line-height: 34px;
}

.large-copy {
  color: var(--bp-ink-2);
  font-size: 18px;
  line-height: 28px;
}

.small-copy,
.source-note {
  color: var(--bp-ink-muted);
  font-size: 13px;
  line-height: 20px;
}

.source-note {
  font-size: 12px;
}

.source-note a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.hero {
  padding: 88px 0 96px;
}

.hero--home {
  background-image: linear-gradient(57deg, rgba(8, 123, 189, 0.08) 42.6%, rgba(255, 153, 0, 0.08) 100%);
}

.hero--institutions {
  background-image: linear-gradient(180deg, rgba(255, 153, 0, 0.08) 0%, rgba(8, 123, 189, 0.08) 100%);
}

.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  max-width: 650px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bp-s-3);
}

/* 🚩 WIDE ENOUGH FOR A TWO-LINE HEADLINE, AND THE NUMBER IS MEASURED.
   At 650px the three `--home` headlines ran to 3, 4 and 3 lines at 72px. The
   narrowest width that gets each to two is 959px, 958px and 842px, so 1000px is
   the worst case plus ~4% — enough that a word edit or a font fallback does not
   drop one back to three. Measured in the browser with Lora loaded, not guessed.

   📌 Safe to widen: none of the three EVER reaches one line, at any width up to
   the 1180px container, so nothing collapses to a single line.

   📌 `max-width: none` is load-bearing — `.hero-copy` above caps at 650px, and
   without this the width below would have no effect at all. */
.hero-copy--home {
  width: min(1000px, 100%);
  max-width: none;
}

.hero-lede {
  max-width: 620px;
}

.hero-copy .small-copy {
  max-width: 620px;
}

/* The body copy matches the headline's measure rather than sitting in a narrower
   column inside it. Scoped to `--home`: /contact uses a plain `.hero-copy` whose
   headline is one line at 650px, so it keeps the 620px lede. */
.hero-copy--home .hero-lede,
.hero-copy--home .small-copy {
  max-width: none;
}

/* The hero's two paragraphs swap typefaces: the lede is set in the body sans and
   the paragraph under it in the serif, the reverse of the section defaults.

   📌 Applied to every hero, not only the two that carry both paragraphs. How It
   Works and Contact have a lede and nothing beneath it, so flipping only where
   both appear would leave the lede serif on two pages and sans on the other two
   — siblings disagreeing about the same element. Scoped to `.hero-copy`, so
   `.lede` and `.large-copy` keep the section defaults everywhere below the fold. */
.hero-copy .lede {
  font-family: var(--bp-body-family);
}

.hero-copy .large-copy {
  font-family: var(--bp-serif-family);
}

.section {
  padding: 96px 0;
}

.section--outcomes {
  padding-block: 88px;
}

.section--surface {
  background: var(--bp-surface);
}

.section--blue {
  background: var(--bp-surface-blue);
}

.section--dark {
  background: var(--bp-ink);
  color: var(--bp-paper);
}

.section-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
}

.section-lede--narrow {
  max-width: 780px;
}

#momentum-title {
  max-width: 960px;
}

.section-lede--reach {
  max-width: 825px;
}

.measure-heading {
  max-width: 940px;
}

.card-grid {
  display: grid;
  width: 100%;
}

.card-grid--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.card-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.value-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 212px;
  padding: 30px;
}

.value-card p,
.step-card p,
.stat-card p,
.payoff-card p:not(.eyebrow),
.conversation-card p:not(.eyebrow, .small-copy) {
  color: var(--bp-ink-2);
}

.split-layout,
.conversation-grid {
  display: grid;
  grid-template-columns: 650px 420px;
  gap: 70px;
  align-items: start;
}

.section-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}

.section-copy .lede {
  max-width: 620px;
}

.section-copy .large-copy {
  max-width: 620px;
}

.support-copy,
.visibility-copy {
  max-width: none;
}

.support-copy h2,
.visibility-copy h2 {
  max-width: 650px;
}

.path-visual {
  display: grid;
  min-height: 360px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(7, 95, 145, 0.1);
  border-radius: var(--bp-r-lg);
  background: rgba(255, 255, 255, 0.42);
}

.path-visual__icon {
  display: block;
  width: min(64%, 250px);
  aspect-ratio: 1;
  color: var(--bp-accent-dark);
}

.path-visual__icon::before {
  display: block;
  width: 100%;
  height: 100%;
  background: currentColor;
  content: "";
  opacity: 0.82;
  -webkit-mask-image: var(--ph-icon);
  mask-image: var(--ph-icon);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.ai-section {
  padding: 86px 0 96px;
}

.ai-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.ai-copy > .story-kicker {
  margin-bottom: 24px;
}

.ai-copy h2 {
  max-width: 820px;
  margin-bottom: 16px;
}

.ai-body {
  max-width: 820px;
  color: var(--bp-ink-2);
  font-family: var(--bp-serif-family);
  font-size: 24px;
  line-height: 36px;
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.step-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  min-height: 256px;
}

.access-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.access-content h2 {
  max-width: 850px;
  color: var(--bp-paper);
}

.access-content .lede {
  max-width: 760px;
  color: var(--bp-paper);
}

.access-form {
  width: 100%;
  max-width: 820px;
}

.access-form__row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.access-form .bp-input {
  width: 420px;
  height: 54px;
  padding: 14px 16px;
}

.access-form--hero .bp-input {
  border-color: #1989ce;
}

.access-content .bp-input {
  border-color: transparent;
}

.form-result {
  margin-top: 18px;
}

.form-result--dark {
  max-width: 420px;
}

.form-result .inline-choice {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

/* The roster gate's answer, and the two interest asks a refusal offers.

   `registration_unavailable/_ask` renders on this page as well as on the app's
   refusal page, so the rules it reaches for are ported here from
   app/assets/stylesheets/components.css rather than reinvented — the partial is
   shared precisely so the two surfaces cannot drift, and a second set of rules
   would put the drift back. Change one, change both. */
.t-body-sm {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--bp-ink-2);
}

.bp-alert .mark {
  font-weight: 700;
  line-height: 1.4;
}

.bp-alert--danger {
  border-left-color: var(--bp-danger);
}

.bp-alert--danger .mark {
  color: var(--bp-danger);
}

/* An ask's validation errors are an alert inside the answer's alert. Without
   this it would inherit the outer card's own width and floor and overflow it. */
.bp-alert .bp-alert {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--bp-s-2);
  width: 100%;
  min-height: 0;
  padding: var(--bp-s-3);
}

/* The dark section paints .bp-input's border out (.access-content .bp-input),
   which is right for the one field sitting on that background and wrong for the
   ask fields, which sit on the answer card's light tint. */
.form-result .bp-alert .bp-input {
  border-color: var(--bp-rule);
}

.registration-asks {
  margin-top: var(--bp-s-5);
  padding-top: var(--bp-s-4);
  border-top: 1px solid var(--bp-rule);
}

.registration-asks__lede {
  margin: 0 0 var(--bp-s-3);
  color: var(--bp-ink-muted);
}

.registration-ask + .registration-ask {
  margin-top: var(--bp-s-3);
}

.registration-ask > summary.registration-ask__toggle {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bp-s-2);
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.registration-ask > summary.registration-ask__toggle::-webkit-details-marker {
  display: none;
}

.registration-ask__chevron {
  font-size: 16px;
  line-height: 1;
  transition: transform var(--bp-dur-fast) var(--bp-easing);
}

.registration-ask[open] > summary .registration-ask__chevron {
  transform: rotate(90deg);
}

.registration-ask__body {
  padding: var(--bp-s-3) 0 0;
}

.registration-ask__lede {
  margin: 0 0 var(--bp-s-3);
  color: var(--bp-ink-muted);
}

.registration-ask__form .bp-field {
  margin-bottom: var(--bp-s-3);
}

/* Institutions page */
.outcomes-copy {
  gap: 20px;
  max-width: 590px;
}

.outcomes-copy .lede {
  max-width: 560px;
}

.stats-grid {
  margin-top: 0;
}

.stat-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  min-height: 174px;
  padding: 29px 30px;
  border-color: var(--bp-rule);
}

.stat-heading {
  display: flex;
  align-items: center;
  gap: 14px;
}

.stat {
  font-family: var(--bp-display-family);
  font-size: 52px;
  font-weight: var(--bp-display-weight);
  line-height: 1;
}

.stat--blue {
  color: var(--bp-accent);
}

.stat--orange {
  color: var(--bp-highlight-text);
}

.source-note--standalone {
  margin-top: 0;
}

.conversation-grid {
  grid-template-columns: 600px 450px;
}

.conversation-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px;
}

.conversation-grid .section-copy .lede {
  max-width: 575px;
}

.conversation-grid .section-copy .large-copy {
  max-width: 560px;
}

.conversation-copy {
  max-width: 760px;
}

.conversation-copy .lede,
.conversation-copy .large-copy {
  max-width: 720px;
}

.message {
  padding: 16px;
  border-radius: var(--bp-r-md);
  font-size: 15px;
  line-height: 24px;
}

.message--student {
  background: var(--bp-surface);
}

.message--bestpath {
  background: var(--bp-accent-dark);
  color: var(--bp-paper) !important;
}

.payoff-grid {
  margin-top: 0;
}

.payoff-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 334px;
  padding: 32px;
  border-color: var(--bp-rule);
}

.payoffs-heading {
  max-width: 760px;
}

.inquiry-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  width: 100%;
  padding: 40px;
  border-radius: var(--bp-r-lg);
  background: var(--bp-ink);
  color: var(--bp-paper);
}

.inquiry-intro {
  max-width: 890px;
  min-height: 202px;
}

.inquiry-intro > .story-icon {
  margin-bottom: 20px;
}

.inquiry-intro h2 {
  color: var(--bp-paper);
}

.inquiry-intro p {
  max-width: 655px;
  margin-top: 16px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 16px;
  line-height: 26px;
}

.inquiry-field {
  width: 360px;
  margin: 0;
}

.inquiry-field label {
  color: var(--bp-paper);
  line-height: 16px;
}

.inquiry-field .bp-input {
  height: 44px;
  min-height: 44px;
  padding: 11px 12px;
  border-color: #d1d6d1;
  font-size: 14px;
  line-height: 20px;
}

.inquiry-panel > .bp-btn {
  min-height: 44px;
}

.inquiry-result {
  max-width: 655px;
  padding: 12px 14px;
  border-left: 4px solid var(--bp-success);
  border-radius: var(--bp-r-md);
  background: var(--bp-paper);
  color: var(--bp-ink-2);
}

/* Additional page compositions use the website's existing cards, forms and tokens. */
/* 🚩 SIZED SO THE LONGEST FIGURE STAYS ON ONE LINE, AND IT WAS OVER AT ALMOST
   EVERY DESKTOP WIDTH, not just wide ones. "30-point gap" is the binding string;
   measured against the widest size it fits on one line at each viewport:

     viewport  card   was      fits up to
     1600      315px  52px     51px   wrapped
     1366      315px  52px     51px   wrapped
     1280      311px  51.2px   51px   wrapped
     1200      292px  48px     50px   ok
     1100      267px  44px     44px   exactly on the edge
     1024      247px  41px     40px   wrapped
      960      226px  38.4px   37px   wrapped

   The cause is that the font tracked the VIEWPORT (`4vw`) while the card tracks
   the CONTAINER, which caps at 1180px — so the two stop scaling together and the
   ratio drifts. `3.6vw` with a 46px ceiling keeps real headroom at every tier
   rather than shaving the 1px that would fix only the width in front of us. */
.stats-grid .stat {
  font-size: clamp(32px, 3.6vw, 46px);
}

.card-grid--three,
.steps-grid--journey {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--bp-s-5);
}

.site-list {
  max-width: 65ch;
  margin: 0;
  padding-left: var(--bp-s-5);
  color: var(--bp-ink-2);
  font-size: 18px;
}

.site-list li + li {
  margin-top: var(--bp-s-4);
}

.inquiry-fields {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--bp-s-5);
}

.inquiry-fields .inquiry-field {
  width: 100%;
}

.inquiry-field--message {
  grid-column: 1 / -1;
}

.inquiry-field textarea.bp-input {
  height: auto;
  min-height: 10rem;
  font-family: var(--bp-body-family);
  resize: vertical;
}

.contact-address {
  margin-top: var(--bp-s-6);
  font-style: normal;
}

.nav-links a[aria-current="page"],
.footer-links a[aria-current="page"] {
  color: var(--bp-accent);
  text-decoration: underline;
  text-underline-offset: var(--bp-s-1);
}

@media (max-width: 1200px) {
  h1 {
    font-size: clamp(56px, 5.8vw, 68px);
    line-height: 1.04;
  }

  /* No `.hero-copy--home` width override at this tier. It used to clamp back to
     650px here, which put the headline at three lines again for every viewport
     under 1200px — the base `min(1000px, 100%)` already narrows with the
     container, and the h1 shrinks to `clamp(56px, 5.8vw, 68px)` just above. */

  .split-layout {
    grid-template-columns: minmax(0, 1.35fr) minmax(340px, 0.9fr);
    gap: 48px;
  }

  .conversation-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(360px, 0.9fr);
    gap: 48px;
  }
}

@media (max-width: 900px) {
  h1 {
    font-size: clamp(48px, 8vw, 62px);
    line-height: 1.04;
  }

  h2 {
    font-size: 42px;
    line-height: 46px;
  }

  .split-layout,
  .conversation-grid {
    grid-template-columns: 1fr;
  }

  .path-visual,
  .conversation-card {
    max-width: 620px;
  }

  .card-grid--four {
    grid-template-columns: 1fr;
  }

  .path-visual {
    min-height: 280px;
  }

  .value-card {
    min-height: 0;
  }

  .card-grid--three,
  .steps-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .step-card,
  .payoff-card {
    min-height: 0;
  }

  .nav-toggle {
    display: grid;
    place-items: center;
  }

  .nav-menu {
    position: absolute;
    top: 76px;
    left: 0;
    display: none;
    width: 100%;
    padding: 18px 24px 24px;
    border-bottom: 1px solid var(--bp-rule);
    background: var(--bp-paper);
  }

  .nav.is-open .nav-menu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .nav-links {
    display: grid;
    gap: 0;
  }

  .nav-links a {
    padding: 12px 0;
    border-bottom: 1px solid var(--bp-rule-soft);
  }
}

@media (max-width: 640px) {
  .container {
    width: min(var(--site-max), calc(100% - 28px));
  }

  .header-inner {
    width: calc(100% - 28px);
  }

  .wordmark__text {
    width: 100px;
    height: auto;
  }

  h1 {
    font-size: 44px;
    line-height: 47px;
    letter-spacing: -1px;
  }

  h2 {
    font-size: 36px;
    line-height: 40px;
    letter-spacing: -0.5px;
  }

  h3 {
    font-size: 25px;
    line-height: 29px;
  }

  .lede {
    font-size: 20px;
    line-height: 31px;
  }

  .hero {
    padding: 62px 0 68px;
  }

  .section {
    padding: 68px 0;
  }

  .ai-section {
    padding: 68px 0;
  }

  .section--outcomes {
    padding-block: 68px;
  }

  .split-layout,
  .conversation-grid {
    gap: 36px;
  }

  .section-stack {
    gap: 24px;
  }

  .card-grid--two,
  .card-grid--three,
  .steps-grid {
    grid-template-columns: 1fr;
  }

  .bp-card,
  .value-card,
  .path-visual,
  .stat-card,
  .conversation-card,
  .payoff-card {
    padding: 24px;
  }

  .path-visual {
    min-height: 220px;
    padding: 0;
  }

  .path-visual__icon {
    width: 160px;
  }

  .access-form__row {
    flex-direction: column;
  }

  .access-form .bp-input,
  .access-form .bp-btn,
  .inquiry-field {
    width: 100%;
  }

  .form-result .inline-choice {
    flex-direction: column;
  }

  .form-result .inline-choice .bp-btn {
    width: 100%;
  }

  .inquiry-panel {
    gap: 24px;
    padding: 28px 22px;
  }

  .inquiry-intro {
    min-height: 0;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ============================================================
   LANDING FLASHES

   Carried out of public/landing.css when the static site became the
   signed-out landing page. Devise redirects to "/" on sign-out, so
   "Signed out successfully" is rendered here by main/_landing_flashes —
   this is live behavior, not decoration, and deleting the old
   stylesheet without these rules would leave it unstyled.

   Shaped after .bp-alert above (left rule, mark, body) so the two read
   as the same component. It stays a plain implementation with no
   dismiss control: the app's flash Stimulus controller does not run on
   this page, and a dismiss control that does nothing is worse than none.
============================================================ */
.landing-flashes {
  padding-top: var(--bp-s-4);
}

.landing-flash {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: var(--bp-s-2);
  align-items: start;
  max-width: 640px;
  margin: 0 auto var(--bp-s-2);
  padding: var(--bp-s-3) var(--bp-s-4);
  border: 1px solid var(--bp-rule-soft);
  border-left-width: 4px;
  border-radius: var(--bp-r-md);
  background: var(--bp-paper);
  color: var(--bp-ink-2);
  font-family: var(--bp-body-family);
  font-size: 15px;
  line-height: 1.5;
}

.landing-flash .landing-flash-mark {
  font-weight: 700;
  line-height: 1.5;
}

.landing-flash-success {
  border-left-color: #1989ce;
}

.landing-flash-success .landing-flash-mark {
  color: var(--bp-accent-dark);
}

.landing-flash-danger {
  border-left-color: var(--bp-danger);
}

.landing-flash-danger .landing-flash-mark {
  color: var(--bp-danger);
}