/* Components — one block per component. Mobile-first; loads after base.css.
   Breakpoint overrides live in responsive.css, not here. */

/* ---------- Layout helpers ---------- */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
}

.section {
  padding-block: var(--section-pad-y-mobile);
  padding-inline: var(--section-pad-x-mobile);
  border-bottom: 1px solid var(--color-border-default);
}

/* Invisible backward-compat anchor target only — see CLAUDE.md §Landing IA
   for why #never lives here instead of on its own section. */
.anchor-offset {
  display: block;
  height: 0;
}

.section--alt   { background: var(--color-surface-alt); }
.section--raised{ background: var(--color-surface-raised); }
.section--plain { background: var(--color-surface-page); }

.section__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.section__title {
  font-size: var(--font-size-section-sm);
  line-height: var(--line-height-section);
}

.section__lead {
  max-width: var(--measure-body);
  font-size: var(--font-size-body);
  line-height: 1.9;
  color: var(--color-text-secondary);
}

.section__note {
  font-size: var(--font-size-caption);
  color: var(--color-text-tertiary);
}

.section__lead--wide {
  max-width: 60ch;
}

.scroll-hint {
  margin-top: var(--space-2);
  font-size: var(--font-size-caption);
  color: var(--color-text-tertiary);
}

/* ---------- Buttons / CTAs ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 15px 26px;
  border-radius: var(--radius-control);
  font-size: var(--font-size-body-lg-md);
  font-weight: var(--font-weight-medium);
  text-align: center;
  transition: background-color var(--duration-fast) var(--easing-standard),
              border-color var(--duration-fast) var(--easing-standard),
              opacity var(--duration-fast) var(--easing-standard);
}

.btn--primary {
  background: var(--color-action-primary);
  color: var(--color-action-primary-fg);
  border: 1.5px solid transparent;
}
.btn--primary:hover { background: var(--color-action-primary-hover); color: var(--color-action-primary-fg); }
.btn--primary:active { background: var(--color-action-primary-active); }
.btn--primary[aria-disabled="true"] {
  background: var(--color-action-disabled-bg);
  color: var(--color-action-disabled-fg);
  cursor: not-allowed;
}
.btn--primary[aria-busy="true"] { background: var(--color-action-primary); opacity: .85; cursor: wait; }

.btn--secondary {
  background: transparent;
  color: var(--color-action-secondary-fg);
  border: var(--border-width-control) solid var(--color-action-secondary-border);
}
.btn--secondary:hover { background: var(--color-action-secondary-hover-bg); color: var(--color-action-primary-hover); }

.btn--on-inverse.btn--primary {
  background: var(--color-action-on-inverse-bg);
  color: var(--color-action-on-inverse-fg);
}
.btn--on-inverse.btn--primary:hover { background: var(--color-action-on-inverse-bg); opacity: .9; }

.btn--link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-block: 12px;
  border: 0;
  border-radius: 0;
  border-bottom: 1.5px solid var(--color-action-primary);
  color: var(--color-action-primary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
}
.btn--link:hover { color: var(--color-action-primary-hover); border-color: var(--color-action-primary-hover); }

.btn-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: stretch;
}

.btn__spinner {
  display: none;
  width: 15px;
  height: 15px;
  flex: none;
}
.form[aria-busy="true"] .btn__spinner {
  display: inline-block;
  animation: btn-spin 0.9s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .form[aria-busy="true"] .btn__spinner { animation: none; }
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* ---------- Site header ---------- */
/* Outer element is full-bleed (background/border span the viewport, same as a
   .section--alt band) AND carries the horizontal gutter — exactly like
   .section does for every section below it. .site-header__inner only adds
   .container's max-width/centering plus the flex row and vertical padding.
   The gutter must live out here, not on .site-header__inner alongside
   .container: padding-inline on the *same* box that's already centered at
   max-width would add on top of the centering margin instead of canceling
   into it past 1440px, throwing content out of alignment with every section
   below (which gets its gutter from the outer, wider, un-centered .section). */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky-header);
  background: var(--color-surface-page);
  border-bottom: 1px solid var(--color-border-default);
  padding-inline: var(--space-4);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-3);
}

.site-header__logo a,
.nav-sheet__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.site-header__logo img {
  height: 34px;
  width: auto;
}

.site-header__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---------- Brand lockup (icon + wordmark) — shared by header + footer ---------- */
.brand-title,
.brand-tagline {
  display: block;
  white-space: nowrap;
}
.brand-title {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
}
.brand-title__name { color: var(--color-action-primary); }
.brand-title__ai { color: var(--color-status-waiting-text); margin-left: .2em; }
.brand-tagline {
  margin-top: 2px;
  font-size: var(--font-size-code-tag);
  letter-spacing: var(--letter-spacing-code-tag);
  color: var(--color-text-tertiary);
}

.site-header__nav {
  display: none;
}

.nav-trigger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 48px;
  height: 48px;
  align-items: center;
}
.nav-trigger__bar {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--color-text-primary);
  transition: transform var(--duration-fast) var(--easing-standard),
              opacity var(--duration-fast) var(--easing-standard),
              background-color var(--duration-fast) var(--easing-standard);
}
.nav-trigger:hover .nav-trigger__bar { background: var(--color-action-primary); }
.nav-trigger[aria-expanded="true"] .nav-trigger__bar:first-child {
  transform: translateY(3.25px) rotate(45deg);
}
.nav-trigger[aria-expanded="true"] .nav-trigger__bar:last-child {
  transform: translateY(-3.25px) rotate(-45deg);
}

/* ---------- Mobile nav sheet ---------- */
.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-mobile-nav-backdrop);
  background: rgba(35, 41, 43, .35);
}

.nav-sheet {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-mobile-nav-sheet);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-overlay);
  transform: translateY(-100%);
  transition: transform var(--duration-base) var(--easing-standard);
  max-height: 100vh;
  overflow-y: auto;
}
.nav-sheet[data-open="true"] {
  transform: translateY(0);
}

.nav-sheet__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-default);
}
.nav-sheet__header img {
  height: 28px;
  width: auto;
}

.nav-sheet__close {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-sheet__list {
  display: flex;
  flex-direction: column;
}

.nav-sheet__link {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding-inline: var(--space-4);
  color: var(--color-text-primary);
  font-size: var(--font-size-body);
  border-bottom: 1px solid var(--color-border-subtle);
}
.nav-sheet__link:hover { background: var(--color-surface-alt); }

.nav-sheet__cta {
  margin: var(--space-4);
  width: calc(100% - var(--space-4) * 2);
  min-height: 48px;
}

/* ---------- Hero ---------- */
.hero {
  border-bottom: 1px solid var(--color-border-default);
  background: var(--color-surface-page);
}
.hero__inner {
  display: flex;
  flex-direction: column;
  max-width: var(--container-max);
  margin-inline: auto;
}
.hero__copy {
  padding: 40px var(--space-4);
  display: flex;
  flex-direction: column;
}
.hero__eyebrow {
  font-size: var(--font-size-label);
  color: var(--color-action-primary);
  font-weight: var(--font-weight-medium);
}
.hero__title {
  margin-top: var(--space-4);
  font-size: var(--font-size-display-sm);
  line-height: var(--line-height-display-sm);
}
.hero__lead {
  margin-top: var(--space-5);
  max-width: var(--measure-lead);
  font-size: var(--font-size-body);
  line-height: 1.85;
  color: var(--color-text-secondary);
}
.hero__trust {
  margin-top: var(--space-4);
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: var(--measure-lead);
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}
.hero__trust svg { flex: none; color: var(--color-action-primary); }
.hero__ctas {
  margin-top: var(--space-6);
}
.hero__proof-points {
  margin-top: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.hero__proof-points li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-size-body-sm);
  color: var(--color-text-secondary);
}
.hero__proof-points svg { flex: none; color: var(--color-action-primary); }
.hero__media {
  background: var(--color-surface-alt);
  border-top: 1px solid var(--color-border-default);
  display: flex;
  flex-direction: column;
}
.media-well {
  min-height: 220px;
  background: var(--color-surface-media);
  display: flex;
  align-items: flex-end;
  padding: var(--space-4);
  position: relative;
  overflow: hidden;
}
.media-well__note {
  font-size: var(--font-size-caption);
  line-height: 1.7;
  color: #5A615E;
}
/* Once real photography lands, swap the placeholder <figcaption> for an <img>
   here — it's absolutely positioned to cover the well regardless of the
   well's own height (which varies per breakpoint), rather than sizing to the
   image's own aspect ratio. */
.media-well img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* ---------- Hero product mockup (built from markup, not a screenshot) ---------- */
.hero__mock {
  padding: var(--space-5) var(--space-4);
  background: var(--color-surface-raised);
}
.hero__mock-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: var(--radius-control);
  background: var(--color-surface-warning-soft);
  border: 1px solid var(--color-border-warning);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-medium);
  color: var(--color-status-waiting-text);
}
.hero__mock-head {
  margin-top: var(--space-3);
  font-size: var(--font-size-caption);
  color: var(--color-text-secondary);
}
.hero__mock-rows {
  margin-top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.hero__mock-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-surface-page);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-surface);
}
.hero__mock-source {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-medium);
  color: var(--color-action-primary);
}
.hero__mock-text {
  font-size: var(--font-size-body-sm);
  color: var(--color-text-primary);
}
.hero__mock-outcome {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.hero__mock-arrow { flex: none; color: var(--color-text-secondary); }
.hero__mock-foot {
  margin-top: var(--space-4);
  font-size: var(--font-size-caption);
  line-height: 1.7;
  color: var(--color-text-secondary);
}

/* ---------- Scenario block ---------- */
.scenario-list {
  margin-top: var(--space-8);
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--space-2);
}
.scenario-card {
  flex: none;
  width: 250px;
  scroll-snap-align: start;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-surface);
  overflow: hidden;
}
.scenario-card__media {
  height: 168px;
}
.scenario-card__body {
  padding: var(--space-6);
}
.scenario-card__label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--font-size-label);
  color: var(--color-text-warning);
  font-weight: var(--font-weight-medium);
}
.scenario-card__title {
  margin-top: var(--space-3);
  font-size: var(--font-size-card-title-sm);
  font-weight: var(--font-weight-bold);
  line-height: 1.5;
}
.scenario-card__text {
  margin-top: var(--space-3);
  font-size: var(--font-size-body-sm);
  line-height: 1.8;
  color: var(--color-text-secondary);
}
.scenario-card__tags {
  margin-top: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.scenario-card__tags li {
  padding: 4px 10px;
  border-radius: var(--radius-control);
  background: var(--color-surface-alt);
  font-size: var(--font-size-caption);
  color: var(--color-text-secondary);
}

.scene__statement {
  margin-top: var(--space-6);
  font-size: var(--font-size-list-title);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

/* ---------- Transformation strip (before -> after, static) ---------- */
.transform {
  margin-top: var(--space-8);
}
.transform__title {
  font-size: var(--font-size-body-lg-md);
  font-weight: var(--font-weight-bold);
}
.transform-strip {
  margin-top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.transform-strip__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-surface);
  font-size: var(--font-size-body-sm);
}
.transform-strip__before { flex: 1; color: var(--color-text-tertiary); }
.transform-strip__arrow { flex: none; color: var(--color-action-primary); }
.transform-strip__after { flex: 1; color: var(--color-text-primary); font-weight: var(--font-weight-medium); }

/* ---------- Hub / channel diagram ---------- */
.hub {
  margin-top: var(--space-8);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-surface);
  overflow: hidden;
}
.hub__layer-label {
  padding: var(--space-4) var(--space-6);
  background: var(--color-surface-sunken);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-warning);
  border-bottom: 1px solid var(--color-border-default);
}
.hub__entries {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  background: var(--color-surface-raised);
  padding: var(--space-4);
}
.hub__entry {
  flex: none;
  width: 172px;
  scroll-snap-align: start;
  background: var(--color-surface-alt);
  border-radius: var(--radius-surface);
  padding: var(--space-4);
}
.hub__entry-icon { color: var(--color-action-primary); }
.hub__entry-name {
  margin-top: var(--space-2);
  font-size: 14.5px;
  font-weight: var(--font-weight-bold);
}
.hub__entry-name-sub {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: var(--font-weight-regular);
  color: var(--color-text-tertiary);
}
.hub__entry-desc {
  margin-top: var(--space-1);
  font-size: 12px;
  line-height: 1.7;
  color: var(--color-text-secondary);
}
.hub__arrow-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface-alt);
  border-block: 1px solid var(--color-border-default);
  color: var(--color-action-primary);
}
.hub__arrow-strip span {
  font-size: var(--font-size-body-sm);
  color: var(--color-text-primary);
}
/* ---------- Hub 2-col split: entries+badge (left) / 5 core values (right) ----------
   Mobile-first stacked; becomes a real 2-column row at desktop (see
   responsive.css) to match _reference/visual/landing-reference-v2.png's
   left-diagram / right-values layout. */
.hub-split {
  display: flex;
  flex-direction: column;
}
.hub-split__diagram {
  display: flex;
  flex-direction: column;
}
.hub__badge {
  margin: var(--space-4);
  padding: var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--color-surface-inverse);
  border-radius: var(--radius-surface);
}
.hub__badge img { flex: none; height: 26px; width: auto; }
.hub__badge-title {
  font-size: var(--font-size-body-lg-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-on-inverse);
}
.hub__badge-sub {
  margin-top: 2px;
  font-size: var(--font-size-caption);
  color: var(--color-text-on-inverse-muted);
}
.hub__badge-value {
  margin-top: 4px;
  font-size: var(--font-size-caption);
  color: var(--color-text-on-inverse-muted);
}
.hub__values {
  padding: var(--space-6) var(--space-4);
  background: var(--color-surface-raised);
  display: flex;
  flex-direction: column;
}
.hub__value {
  display: flex;
  gap: var(--space-3);
  padding-block: var(--space-4);
  border-top: 1px solid var(--color-border-default);
}
.hub__value:first-child { border-top: 0; padding-top: 0; }
.hub__value-icon { flex: none; margin-top: 1px; color: var(--color-action-primary); }
.hub__value-title {
  font-size: 15.5px;
  font-weight: var(--font-weight-bold);
}
.hub__value-desc {
  margin-top: 4px;
  font-size: var(--font-size-caption);
  line-height: 1.7;
  color: var(--color-text-secondary);
}

/* ---------- Boundary note (short one-line reminder; reused by #hub and #how) ---------- */
.boundary-note {
  margin-top: var(--space-6);
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  font-size: var(--font-size-caption);
  line-height: 1.75;
  color: var(--color-text-secondary);
}
.boundary-note svg { flex: none; margin-top: 2px; color: var(--color-text-tertiary); }

/* ---------- Real product interface gallery (§live-demo) ---------- */
.gallery {
  margin-top: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.gallery-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-surface);
  overflow: hidden;
  transition: border-color var(--duration-fast) var(--easing-standard),
              background-color var(--duration-fast) var(--easing-standard);
}
.gallery-card:hover,
.gallery-card:focus-visible {
  border-color: var(--color-action-primary);
  background: var(--color-surface-alt);
}
.gallery-card:hover .gallery-card__title,
.gallery-card:focus-visible .gallery-card__title {
  text-decoration: underline;
}
.gallery-card__media {
  background: var(--color-surface-media);
  aspect-ratio: 1440 / 900;
  overflow: hidden;
}
.gallery-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
/* The 3 standard cards share one aspect-ratio (1228/580) so their media
   boxes render the same height at equal card width — each card's own image
   is displayed/cropped to that shared ratio (object-fit: cover above),
   landing at a clean content boundary for all three (line-demo: end of the
   2nd question-group heading, before its buttons; case-inbox: all 4 case
   rows; admissions: funnel + header + 1 full row). The <img> width/height
   attributes stay each file's true dimensions, so intrinsic aspect-ratio
   and CLS protection are unaffected — only the display box's crop matches
   across all three now. */
.gallery-card__media--linedemo,
.gallery-card__media--caseinbox,
.gallery-card__media--admissions { aspect-ratio: 1228 / 580; }
.gallery-card__media--featured { aspect-ratio: 1440 / 420; }
.gallery-card__body {
  padding: var(--space-4);
}
.gallery-card__title {
  font-size: 16.5px;
  font-weight: var(--font-weight-bold);
}
.gallery-card__desc {
  margin-top: 6px;
  font-size: var(--font-size-body-sm);
  line-height: 1.75;
  color: var(--color-text-secondary);
}
.gallery-card__cta {
  margin-top: var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-medium);
  color: var(--color-action-primary);
}
.gallery__close {
  margin-top: var(--space-6);
}
.gallery__close-cta {
  margin-top: var(--space-4);
}
.external-link-icon {
  flex: none;
}

/* ---------- Process steps (§06 三步驟) ---------- */
.steps {
  margin-top: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.step {
  border-top: 2px solid var(--color-action-primary);
  padding-top: var(--space-5);
}
.step__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.step__ordinal {
  font-family: var(--font-mono-label);
  font-weight: 600;
  font-size: var(--font-size-number-lg);
  color: var(--color-text-number-lg);
  line-height: 1;
}
.step__icon { color: var(--color-action-primary); }
.step__title {
  margin-top: var(--space-4);
  font-size: var(--font-size-subsection);
}
.step__body {
  margin-top: var(--space-3);
  font-size: var(--font-size-body);
  line-height: 1.9;
  color: var(--color-text-secondary);
}
.step__example {
  margin-top: var(--space-4);
  padding-inline-start: 14px;
  border-inline-start: 2px solid var(--color-border-default);
  font-size: var(--font-size-body-sm);
  line-height: 1.8;
  color: var(--color-text-tertiary);
}
.step__connector {
  display: none;
}

/* ---------- Guardrails (§how, 3 short boundary statements) ---------- */
.guardrail-grid {
  margin-top: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.guardrail {
  padding: var(--space-5);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-surface);
}
.guardrail__head {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-action-primary);
}
.guardrail__head span {
  font-size: var(--font-size-body-lg-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}
.guardrail__body {
  margin-top: var(--space-2);
  font-size: var(--font-size-body-sm);
  line-height: 1.8;
  color: var(--color-text-secondary);
}

/* ---------- Admissions funnel ---------- */
.funnel {
  margin-top: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
/* Full-width numbered card row with flow arrows between cards from desktop
   up (see responsive.css) — same grid-with-arrow-columns technique .steps
   already uses for the 3-step "AI 怎麼工作" flow, reused here for 4 steps
   rather than invented fresh. .funnel__connector stays hidden below desktop,
   same as .step__connector — a 2×2 (tablet) or single-column (mobile) card
   wrap doesn't have a single flow direction to point an arrow along.
   Each .funnel__item is its own card (raised surface, border, radius) with
   the numbered marker stacked above its content, not beside it, so there's
   no grid-on-the-<li> marker+text gotcha to worry about here (see CLAUDE.md's
   CSS-grid note — no live component demonstrates that pattern as of the
   Round 5 CRO pass; re-read the rule itself, not a class name, before
   reintroducing a side-by-side marker layout anywhere). */
.funnel__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.funnel__item {
  display: flex;
  flex-direction: column;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-surface);
  padding: var(--space-5);
}
.funnel__connector {
  display: none;
}
.funnel__marker {
  flex: none;
}
.funnel__marker span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-action-primary);
  color: var(--color-action-primary-fg);
  font-family: var(--font-mono-label);
  font-weight: 600;
  font-size: 12px;
}
.funnel__item-content {
  margin-top: var(--space-3);
}
.funnel__item-title {
  font-size: var(--font-size-body-lg-md);
  font-weight: var(--font-weight-bold);
}
.funnel__item-body {
  margin-top: 6px;
  font-size: var(--font-size-body-sm);
  line-height: 1.8;
  color: var(--color-text-secondary);
}

/* Image + handoff table pairing below the step row */
.funnel__detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.funnel__media {
  flex: none;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 0;
}

.outcome-list {
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-surface);
  overflow: hidden;
}
.outcome-list__head {
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface-sunken);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-warning);
  border-bottom: 1px solid var(--color-border-default);
}
.outcome-list__row {
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface-raised);
  border-bottom: 1px solid var(--color-border-subtle);
}
.outcome-list__row:last-child { border-bottom: 0; }
.outcome-list__title {
  font-size: 14.5px;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}
.outcome-list__desc {
  margin-top: 4px;
  font-size: var(--font-size-body-sm);
  color: var(--color-text-secondary);
}
.admissions__close {
  margin-top: var(--space-8);
}

.statement-band {
  margin-top: var(--space-6);
  padding: var(--space-6);
  background: var(--color-surface-inverse);
  border-radius: var(--radius-surface);
}
.statement-band__title {
  font-size: var(--font-size-list-title);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-on-inverse);
  line-height: 1.7;
}

/* ---------- Human handoff status (§12) ---------- */
.handoff-steps {
  margin-top: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.handoff-steps__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-surface);
  padding: var(--space-4);
}
.handoff-steps__ordinal {
  font-family: var(--font-mono-label);
  font-weight: 600;
  font-size: 11.5px;
  color: var(--color-text-number);
}
.handoff-steps__name {
  font-size: 14.5px;
  font-weight: var(--font-weight-bold);
}
.how__handoff-title {
  margin-top: var(--space-8);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
}

/* ---------- Status chip ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: var(--radius-surface);
  border: 1px solid var(--color-border-default);
  font-size: var(--font-size-body-sm);
}
.chip[data-state="ai"],
.chip[data-state="assigned"],
.chip[data-state="resolved"] {
  background: var(--color-surface-success-soft);
  border-color: var(--color-border-success);
  color: var(--color-text-success);
}
.chip[data-state="waiting"],
.chip[data-state="pending"],
.chip[data-state="stale"] {
  background: var(--color-surface-warning-soft);
  border-color: var(--color-border-warning);
  color: var(--color-status-waiting-text);
}
.chip[data-state="in-progress"],
.chip[data-state="unavailable"] {
  background: var(--color-surface-alt);
  border-color: var(--color-border-default);
  color: var(--color-status-inprogress);
}
.chip[data-state="needs-help"],
.chip[data-state="risk"] {
  background: var(--color-surface-danger-soft);
  border-color: var(--color-border-danger);
  color: var(--color-text-danger);
}

/* ---------- Adoption phases ---------- */
.phase-grid {
  margin-top: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.phase-card {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-surface);
  padding: var(--space-6);
}
.phase-card__tag {
  font-family: var(--font-mono-label);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: var(--letter-spacing-eyebrow);
  color: var(--color-text-number);
}
.phase-card__title {
  margin-top: var(--space-3);
  font-size: 16.5px;
  font-weight: var(--font-weight-bold);
}
.phase-card__body {
  margin-top: var(--space-2);
  font-size: var(--font-size-body-sm);
  line-height: 1.85;
  color: var(--color-text-secondary);
}
.phase-card__list {
  margin-top: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--font-size-body-sm);
  line-height: 1.85;
  color: var(--color-text-secondary);
}
.phase-card__floor {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-default);
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-status-risk);
}
.adopt-close {
  margin-top: var(--space-6);
}
.adopt-close__cta {
  margin-top: var(--space-4);
}

/* ---------- FAQ + Contact form (merged, side-by-side from tablet up) ----------
   Not part of the approved design-reference layout (that had these as two
   separate full-width sections) — merged on request. Width split reasoning:
   the contact form's own .form__grid already goes 2-up at both tablet and
   desktop; squeezed into an even 50/50 split it would only get ~half the
   container width, forcing its two field-columns down to ~170px each at the
   768px end of tablet — too narrow to use comfortably. So: give the form
   column a larger share (1.3fr vs 1fr) AND force .form__grid back to a
   single column at the tablet tier specifically (not desktop, where the
   1.3fr share is wide enough for two field-columns again — see the two
   .faq-contact .form__grid overrides in responsive.css, one per tier). */
.faq-contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}
.faq-contact__faq,
.faq-contact__form {
  flex: 1;
  min-width: 0;
}

/* ---------- FAQ accordion ---------- */
.accordion {
  margin-top: var(--space-8);
}
.accordion__item {
  border-bottom: 1px solid var(--color-border-default);
}
.accordion__item:first-child { border-top: 1px solid var(--color-border-default); }
.accordion__heading { margin: 0; }
.accordion__trigger {
  width: 100%;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-4);
  text-align: start;
  font-size: 16px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}
.accordion__trigger:hover { text-decoration: underline; }
.accordion__chevron {
  flex: none;
  color: var(--color-text-tertiary);
  transition: transform var(--duration-base) var(--easing-standard);
}
.accordion__trigger[aria-expanded="true"] .accordion__chevron {
  transform: rotate(180deg);
}
.accordion__panel {
  padding-bottom: var(--space-5);
  font-size: var(--font-size-body-sm);
  line-height: 1.85;
  color: var(--color-text-secondary);
}
.accordion__panel[hidden] { display: none; }

/* ---------- Contact form ---------- */
.contact {
  padding-block: 40px;
  background: var(--color-surface-page);
}
.contact__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.contact__title {
  font-size: var(--font-size-section-sm);
}
.form {
  margin-top: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.form__fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.form[aria-busy="true"] .form__fieldset { opacity: .7; }
.form__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
.form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form__field--wide { grid-column: 1 / -1; }
.form__label {
  display: flex;
  gap: 6px;
  align-items: baseline;
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}
.form__required {
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-danger);
}
.form__input,
.form__select,
.form__textarea {
  padding: 13px 14px;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-control);
  font-size: 16px;
  color: var(--color-text-primary);
}
.form__input:hover,
.form__select:hover,
.form__textarea:hover {
  border-color: var(--color-border-ink);
}
.form__input:focus-visible,
.form__select:focus-visible,
.form__textarea:focus-visible {
  border-color: var(--color-action-primary);
  border-width: 1.5px;
}
.form__textarea { resize: vertical; min-height: 96px; }
.form__field[data-invalid="true"] .form__input,
.form__field[data-invalid="true"] .form__select,
.form__field[data-invalid="true"] .form__textarea {
  border-color: var(--color-status-risk);
  border-width: 1.5px;
}
.form__field[data-valid="true"] .form__input,
.form__field[data-valid="true"] .form__select {
  border-color: var(--color-status-resolved);
}
.form__input:disabled,
.form__select:disabled {
  background: #F2EFE9;
  border-color: #E0DBD1;
  color: var(--color-text-disabled);
  cursor: not-allowed;
}
.form__hint {
  font-size: 12px;
  color: var(--color-text-tertiary);
}
.form__error {
  display: none;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--color-text-danger);
}
.form__field[data-invalid="true"] .form__error { display: flex; }
.form__error-icon { flex: none; }

.form__submit-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: stretch;
}
.form__disabled-reason {
  font-size: 12.5px;
  color: var(--color-text-tertiary);
}

.form__status {
  display: flex;
  gap: 10px;
  padding: var(--space-3) 14px;
  border-radius: var(--radius-surface);
  border: 1px solid transparent;
  font-size: 13.5px;
  line-height: 1.7;
}
.form__status[hidden] { display: none; }
.form__status--success {
  background: var(--color-surface-success-soft);
  border-color: var(--color-border-success);
  color: var(--color-text-success);
}
.form__status--error {
  background: var(--color-surface-danger-soft);
  border-color: var(--color-border-danger);
  color: var(--color-text-danger);
}
.form__status-icon { flex: none; }

.form__pii-note {
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--color-text-tertiary);
}
.form__pii-note a {
  text-decoration: underline;
}

/* No-JS: server round trip handles success/error, so hide the JS-only live-status region */
.no-js .form__status { display: none !important; }

/* ---------- Footer ---------- */
/* Same full-bleed-outer / gutter-carrying split as the header — see the note
   above .site-header for why the horizontal padding must live on the outer,
   full-bleed element rather than alongside .container's centering. */
.site-footer {
  background: var(--color-surface-page);
  padding-inline: var(--space-4);
}
.site-footer__inner {
  padding-block: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: flex-start;
}
.site-footer__logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}
.site-footer__logo img { height: 48px; width: auto; }
.site-footer__logo .brand-title,
.site-footer__logo .brand-tagline { text-align: center; }
.site-footer__meta {
  font-size: var(--font-size-label);
  color: var(--color-text-tertiary);
}
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: var(--font-size-label);
}
.site-footer__legal a { color: var(--color-text-tertiary); }
.site-footer__legal a:hover { color: var(--color-action-primary); }

/* ---------- Legal pages (privacy / terms) ---------- */
.legal {
  padding: 48px var(--space-4) 64px;
  max-width: var(--measure-body);
  margin-inline: auto;
}
.legal h1 {
  font-size: var(--font-size-section-sm);
}
.legal__updated {
  margin-top: var(--space-2);
  font-size: var(--font-size-caption);
  color: var(--color-text-tertiary);
}
.legal h2 {
  margin-top: var(--space-8);
  font-size: var(--font-size-card-title-sm);
}
.legal p, .legal li {
  margin-top: var(--space-3);
  font-size: var(--font-size-body);
  line-height: 1.9;
  color: var(--color-text-secondary);
}
.legal ul { list-style: disc; padding-inline-start: 1.4em; }
.legal a { text-decoration: underline; }
.legal__back {
  display: inline-block;
  margin-top: var(--space-8);
}