/* ==========================================================================
   Experian business case microsite — KNŌ Events
   Every value below comes from the approved design. Layout is fluid: there
   are no fixed widths and no breakpoint-specific layouts except where the
   prototype could not physically fit on a phone (the platform tab strip and
   the two-up contact grid), which are noted inline.
   ========================================================================== */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #fff;
  color: var(--kno-ink-700);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--kno-blue);
  text-decoration: none;
}

a:hover {
  color: var(--kno-blue-700);
  text-decoration: underline;
  text-underline-offset: 2px;
}

img { max-width: 100%; }

:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Skip link — keyboard users land here first. */
.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 20px;
  border-radius: var(--radius-pill);
  background: var(--kno-blue);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  transition: top var(--duration-fast) var(--ease-standard);
}

.skip-link:focus {
  top: 12px;
  color: #fff;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--kno-ink-100);
}

.site-header__inner {
  width: 100%;
  padding: 14px var(--gutter-page) 14px 16px;
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: space-between;
}

.site-header__brand {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.logo {
  height: 28px;
  width: auto;
  display: block;
}

.brand-divider {
  display: inline-block;
  width: 1px;
  height: 22px;
  background: var(--kno-ink-200);
  flex: none;
}

.partner-logo {
  display: block;
  width: 128px;
  height: 50px;
  flex: none;
  object-fit: contain;
  object-position: left center;
}

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

.site-nav__link {
  font-size: 14px;
  font-weight: 600;
  color: var(--kno-ink-700);
  text-decoration: none;
}

.site-nav__link:hover {
  color: var(--kno-blue);
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   Buttons — pills, always
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  font-weight: 700;
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}

.btn:active { transform: scale(var(--press-scale)); }

.btn--cta {
  height: 38px;
  padding: 0 20px;
  background-color: var(--kno-coral);
  color: #fff;
  font-size: 14px;
}

.btn--cta:hover {
  background: var(--kno-blue-700);
  color: #fff;
  text-decoration: none;
}

.btn--secondary {
  height: 50px;
  padding: 0 28px;
  background: #fff;
  border: 1px solid var(--kno-ink-200);
  color: var(--kno-blue);
  font-size: 16px;
}

.btn--secondary:hover {
  background: var(--kno-blue-050);
  color: var(--kno-blue);
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   Section rail — fixed vertical section nav
   -------------------------------------------------------------------------- */
.rail {
  display: flex;
  position: fixed;
  left: 24px;
  top: 92px;
  z-index: 40;
  flex-direction: column;
  gap: 2px;
  padding: 10px;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--kno-ink-100);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-rail);
}

.rail__link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 14px;
  border-radius: var(--radius-pill);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--kno-ink-500);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}

.rail__link:hover {
  background: var(--kno-blue-050);
  color: var(--kno-navy);
  text-decoration: none;
}

/* Bullets are hollow rings, never solid dots. */
.rail__ring {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: var(--radius-circle);
  border: 2px solid currentColor;
}

/* --------------------------------------------------------------------------
   Section scaffolding
   -------------------------------------------------------------------------- */
.section { scroll-margin-top: 104px; }

.section--padded {
  padding: clamp(28px, 3vw, 44px) var(--gutter-page) clamp(72px, 8vw, 120px);
}

.section--white { background: #fff; }

.section--sunken { background-color: var(--kno-blue-050); }

.container {
  max-width: var(--max-width-content);
  margin: 0 auto;
}

/* The only uppercase in the system. */
.eyebrow {
  font-size: 11px;
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--kno-coral);
  margin-bottom: 16px;
}

.section__head { margin-bottom: clamp(40px, 5vw, 60px); }

.section__head--narrow { max-width: 760px; }

.section__head--wide { max-width: 860px; }

.section__head--tight { margin-bottom: clamp(28px, 3vw, 40px); }

.section__head--pricing { margin-bottom: clamp(40px, 5vw, 56px); }

.section__title {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-display);
  line-height: 1.06;
  color: var(--kno-blue);
  font-size: clamp(14px, 2.9vw, 46px);
  text-wrap: balance;
}

.section__title:last-child { margin-bottom: 0; }

.section__title--flat { line-height: 1.08; }

/* Sized to hold one line at every width the clamp produces. */
.platform__title {
  line-height: 1.08;
  white-space: nowrap;
  margin-bottom: 0;
}

.pricing__lead {
  font-size: 16px;
  line-height: 1.65;
}

.section__lead {
  margin: 0;
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.6;
  color: var(--kno-blue);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   1 · Hero
   -------------------------------------------------------------------------- */
.hero {
  background: #fff;
  border-bottom: 1px solid var(--kno-ink-100);
}

.hero__inner {
  max-width: var(--max-width-content);
  margin: 0 auto;
  padding: clamp(16px, 1.8vw, 24px) var(--gutter-page) clamp(44px, 5vw, 72px);
}

.hero__grid {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
}

.hero__col {
  flex: 1 1 260px;
  min-width: min(100%, 240px);
}

/* Pulls the headline block back out of the page gutter, per the design. */
.hero__pull { margin-left: calc(-1 * min(32px, var(--gutter-page))); }

.hero__spacer {
  max-width: 20ch;
  margin-bottom: 28px;
}

.hero__title {
  margin: 0 0 28px;
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-display);
  line-height: 1.04;
  color: var(--kno-blue);
  font-size: clamp(40px, 6vw, 76px);
  max-width: 17ch;
  text-wrap: balance;
}

.hero__lead {
  margin: 0 0 20px;
  font-size: clamp(17px, 1.5vw, 22px);
  line-height: 1.5;
  color: var(--kno-blue);
  max-width: 58ch;
  text-wrap: pretty;
}

.hero__lead-gap {
  display: block;
  height: 10px;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 36px;
}

.hero__media {
  flex: 0 1 300px;
  max-width: 340px;
  min-width: 180px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 48px 0;
}

.hero__lottie {
  width: 100%;
  aspect-ratio: 304 / 240;
}

/* --------------------------------------------------------------------------
   2 · Discovery cards
   -------------------------------------------------------------------------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(288px, 100%), 1fr));
  gap: 24px;
}

.card {
  background: #fff;
  border: 1px solid var(--kno-ink-100);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}

.card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

/* Decorative brand accent — never a functional icon. */
.brand-tile {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-lg);
  display: block;
  object-fit: cover;
}

.card__title {
  margin: 20px 0 10px;
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: 21px;
  color: var(--kno-blue);
  letter-spacing: var(--tracking-heading);
}

.card__body {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--kno-blue);
}

.card__foot {
  border-top: 1px solid var(--kno-ink-100);
  padding-top: 16px;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  background: var(--kno-blue-050);
  border: 1px solid var(--kno-ink-100);
  font-size: 12px;
  font-weight: 700;
  color: var(--kno-navy);
}

.chip--alert { background: var(--kno-coral-100); }

/* The signature KNŌ data pattern: bar + navy tick at the contracted number. */
.meter__labels {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  color: var(--kno-ink-500);
  margin-bottom: 8px;
}

.meter__value {
  font-variant-numeric: tabular-nums;
  color: var(--kno-navy);
}

.meter {
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--kno-ink-100);
  position: relative;
  overflow: hidden;
}

.meter__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 60%;
  border-radius: var(--radius-pill);
  background: var(--kno-blue);
}

.meter__tick {
  position: absolute;
  top: -3px;
  bottom: -3px;
  left: 88%;
  width: 2px;
  background: var(--kno-navy);
}

.daygrid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}

.daygrid span {
  aspect-ratio: 1;
  border-radius: var(--radius-xs);
  background: var(--kno-ink-100);
}

.daygrid .is-booked {
  background: var(--kno-blue);
  opacity: .9;
}

.daygrid .is-live { background: var(--kno-coral); }

/* --------------------------------------------------------------------------
   3 · Outcomes — a 1px-gap hairline grid; cells share borders
   -------------------------------------------------------------------------- */
.outcomes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 1px;
  background: var(--kno-ink-200);
  border: 1px solid var(--kno-ink-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.outcome {
  background: #fff;
  padding: clamp(26px, 3vw, 34px);
}

.outcome__num {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: 13px;
  color: var(--kno-blue);
  letter-spacing: .1em;
  margin-bottom: 18px;
}

.outcome__title {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: 17px;
  color: var(--kno-blue);
  letter-spacing: var(--tracking-heading);
  white-space: nowrap;
}

.outcome__title--wrap { white-space: normal; }

.outcome__body {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--kno-blue);
}

.outcome--navy {
  grid-column: 1 / -1;
  background: var(--kno-navy);
}

.outcome--navy .outcome__title {
  font-size: 20px;
  color: var(--kno-coral);
  white-space: normal;
}

.outcome--navy .outcome__body { color: var(--kno-white); }

/* --------------------------------------------------------------------------
   4 · The platform — tabbed screenshot carousel
   -------------------------------------------------------------------------- */
.tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  margin-bottom: 24px;
  width: 100%;
}

.tab {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--kno-ink-200);
  background: #fff;
  color: var(--kno-blue);
  font-family: var(--font-body);
  font-size: clamp(11px, 1.05vw, 13px);
  font-weight: 700;
  padding: 9px clamp(4px, .9vw, 14px);
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  border-radius: var(--radius-pill);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}

.tab[aria-selected="true"] {
  background: var(--kno-blue);
  color: #fff;
}

.track-viewport { overflow: hidden; }

.track {
  display: flex;
  align-items: flex-start;
  transition: transform var(--duration-slow) var(--ease-standard);
}

.panel {
  flex: none;
  width: 100%;
  padding: 0 2px;
}

.frame {
  border: 1px solid var(--kno-ink-100);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-frame);
}

.frame__media {
  position: relative;
  width: 100%;
  aspect-ratio: 600 / 301;
  background: var(--kno-ink-050);
}

.frame__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.frame__caption {
  margin: 0;
  padding: 16px 22px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--kno-blue);
  background: var(--kno-blue-050);
  border-top: 1px solid var(--kno-ink-100);
}

/* Empty screenshot slot: same geometry, 1px dashed ink-200, ink-050 fill,
   brand tile + "Screenshot slot" overline. Shown only when the image file
   for a panel is absent; drop the file in and it disappears on its own. */
.slot-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
  background: var(--kno-ink-050);
  border: 1px dashed var(--kno-ink-200);
  border-radius: var(--radius-lg);
}

.slot-empty__eyebrow {
  font-size: 11px;
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--kno-ink-500);
}

.slot-empty__label {
  font-size: 14px;
  font-weight: 700;
  color: var(--kno-navy);
}

/* --------------------------------------------------------------------------
   5 · Pricing
   -------------------------------------------------------------------------- */
.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 24px;
  align-items: start;
}

.plan {
  background: #fff;
  border: 1px solid var(--kno-ink-100);
  border-radius: var(--radius-lg);
  padding: clamp(26px, 3vw, 34px);
  box-shadow: var(--shadow-xs);
}

.plan__label {
  font-size: 11px;
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--kno-blue);
  margin-bottom: 14px;
}

.plan__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 10px;
}

.plan__amount {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: 44px;
  letter-spacing: var(--tracking-display);
  color: var(--kno-blue);
  font-variant-numeric: tabular-nums;
}

.plan__per {
  font-size: 15px;
  font-weight: 700;
  color: var(--kno-blue);
}

.plan__desc {
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--kno-blue);
}

.plan__features {
  border-top: 1px solid var(--kno-ink-100);
  padding-top: 8px;
  margin-bottom: 24px;
}

.feature {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 9px 0;
}

.feature__ring {
  flex: none;
  margin-top: 6px;
  width: 9px;
  height: 9px;
  border-radius: var(--radius-circle);
  border: 2px solid var(--kno-blue);
}

.feature__text {
  font-size: 15px;
  color: var(--kno-blue);
}

.plan__note {
  margin: 0;
  font-size: 13px;
  font-style: italic;
  line-height: 1.5;
  color: var(--kno-blue);
}

/* Enterprise — navy ground, coral 4px rule */
.plan--enterprise {
  position: relative;
  overflow: hidden;
  background-color: var(--kno-navy);
  border: 0;
  box-shadow: none;
}

.plan__rule {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--kno-coral);
}

.plan--enterprise .plan__label,
.plan--enterprise .plan__amount,
.plan--enterprise .plan__per { color: var(--kno-coral); }

.plan__label-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.plan__label-row .plan__label { margin-bottom: 0; }

.plan--enterprise .plan__price { margin-bottom: 6px; }

.plan__base {
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--kno-white);
  margin-bottom: 14px;
}

.plan--enterprise .plan__desc,
.plan--enterprise .feature__text,
.plan--enterprise .plan__note { color: var(--kno-white); }

.plan--enterprise .feature__ring { border-color: var(--kno-coral); }

.plan__block { margin: 0 0 22px; }

.callout {
  margin-bottom: 18px;
  border: 1px solid var(--kno-teal);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  background: rgba(148, 194, 194, .16);
}

.callout__eyebrow {
  font-size: 11px;
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--kno-teal);
  margin-bottom: 6px;
}

.callout__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--kno-white);
  margin-bottom: 6px;
}

.callout__body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--kno-white);
  margin-bottom: 14px;
}

.callout .chip {
  background: rgba(255, 255, 255, .12);
  border: 1px solid var(--kno-teal);
  color: var(--kno-white);
}

.plan__addons {
  border-top: 1px solid rgba(255, 255, 255, .18);
  padding-top: 14px;
  margin-bottom: 24px;
}

.plan__addons-label {
  font-size: 11px;
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(255, 255, 255, .55);
  margin-bottom: 6px;
}

.plan__addons-body {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--kno-white);
}

/* --------------------------------------------------------------------------
   6 · Next steps
   -------------------------------------------------------------------------- */
.next { padding-bottom: clamp(72px, 8vw, 116px); }

.next__head { margin-bottom: clamp(36px, 4vw, 56px); }

.next__title { line-height: 1.05; }

.next__lead {
  margin: 0 0 32px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--kno-blue);
  text-wrap: pretty;
}

/* min() guard keeps the two-up contact grid from overflowing a phone. */
.people {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: 20px;
  max-width: 1060px;
}

.person {
  background: #fff;
  border: 1px solid var(--kno-ink-100);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 2.6vw, 30px);
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.person__figure {
  display: block;
  position: relative;
  width: 132px;
  height: 132px;
  border-radius: var(--radius-circle);
  overflow: hidden;
  margin-bottom: 18px;
  flex: none;
  background: var(--kno-blue-050);
}

.person__figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Per-portrait crop. Shelby's source is a 16:9 frame, so the design's
   horizontal offset still applies; Anna's supplied file is already square and
   needs no offset. */
.person__figure img[data-monogram="SC"] { object-position: 62% 50%; }
.person__figure img[data-monogram="AG"] { object-position: center; }

/* Monogram stand-in, shown only while a headshot file is missing. */
.person__monogram {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--kno-blue-050);
  color: var(--kno-blue);
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: 40px;
  letter-spacing: var(--tracking-heading);
}

.person__name {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: 24px;
  color: var(--kno-blue);
  letter-spacing: var(--tracking-heading);
}

.person__role {
  font-size: 15px;
  color: var(--kno-blue);
  margin-top: 4px;
  white-space: nowrap;
}

.person__email {
  display: block;
  margin-top: 14px;
  font-size: 15px;
  font-weight: 700;
  color: var(--kno-coral);
  text-decoration: none;
  word-break: break-word;
}

.person__email:hover {
  color: var(--kno-coral);
  text-decoration: underline;
}

.person__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-top: 14px;
  border-radius: var(--radius-circle);
  background: transparent;
  border: 1px solid var(--kno-blue);
  color: var(--kno-blue);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              background var(--duration-fast) var(--ease-standard);
}

.person__social svg { fill: var(--kno-blue); }

.person__social:hover {
  background: var(--kno-blue-050);
  border-color: var(--kno-blue);
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   Motion — one effect only: fade + 14px rise, fired once per element.
   -------------------------------------------------------------------------- */
.is-revealing {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 420ms var(--ease-standard), transform 420ms var(--ease-standard);
}

.is-revealed {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   Phone adaptation
   Eight tab labels cannot share a 390px row, so below 760px the strip scrolls
   horizontally at natural label width instead of crushing the text.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .tabs {
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }

  .tabs::-webkit-scrollbar { display: none; }

  .tab {
    flex: 0 0 auto;
    font-size: 13px;
    padding: 9px 16px;
    scroll-snap-align: start;
  }
}

/* Below 600px the rail is gone, so the header anchors become the only section
   navigation. The full header cannot fit one row at phone width, so the brand
   keeps row one and the links + CTA move to row two. */
@media (max-width: 599px) {
  .site-header__inner {
    flex-wrap: wrap;
    gap: 12px 16px;
    padding-right: 16px;
  }

  .site-header__brand {
    flex: 1 1 auto;
    gap: 12px;
  }

  .partner-logo {
    width: 96px;
    height: 38px;
  }

  .site-nav {
    flex: 1 1 100%;
    gap: 14px;
    align-items: center;
  }

  /* Tightened so the links and the CTA share one row: a full-width CTA would
     push this sticky header past 140px on a phone. */
  .btn--cta {
    margin-left: auto;
    font-size: 13px;
    padding: 0 14px;
  }

  /* The headline's negative pull exists to line up with the rail inset;
     without the rail it would push the text off the left edge. */
  .hero__pull { margin-left: 0; }
}

/* Narrower than an iPhone SE: the CTA takes its own row rather than overflow. */
@media (max-width: 359px) {
  .site-nav { flex-wrap: wrap; }

  .btn--cta {
    flex: 1 1 100%;
    margin-left: 0;
    justify-content: center;
  }
}

/* Pre-hydration defaults, so neither the rail nor the header anchors flash
   in the wrong state before main.js takes over. */
@media (max-width: 599px) {
  .rail { display: none; }
}

@media (min-width: 860px) {
  [data-headernav] { display: none; }
}

/* Section headings stay readable when the rail is gone. */
@media (max-width: 600px) {
  .platform__title { white-space: normal; }
  .outcome__title { white-space: normal; }
  .person__role { white-space: normal; }
}

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

  .track { transition: none; }

  .is-revealing,
  .is-revealed {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .btn:active { transform: none; }
}

/* --------------------------------------------------------------------------
   Print — the business case is often read on paper
   -------------------------------------------------------------------------- */
@media print {
  .site-header,
  .rail,
  .skip-link,
  .tabs { display: none !important; }

  .section--padded { padding: 24px 0; }

  .track {
    display: block;
    transform: none !important;
  }

  .panel {
    width: 100%;
    page-break-inside: avoid;
    margin-bottom: 16px;
  }

  .card,
  .plan,
  .person { page-break-inside: avoid; }

  .plan--enterprise,
  .outcome--navy { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}