/* === 01-tokens.css === */
/* =============================================================
   INFINITYRX — INTERACTIVE PRESENTATION
   Brand colors from the official brand book.
   ============================================================= */
:root {
  --ifx-violet:       #0D0936;
  --ifx-violet-deep:  #08062A;
  --ifx-navy:         #19286B;
  --ifx-blue:         #324AB2;
  --ifx-lavender:     #EDF0FF;
  --ifx-lavender-2:   #F7F9FF;
  --ifx-magenta:      #FF77FF;
  --ifx-magenta-soft: #C774FF;
  --ifx-magenta-deep: #A2269E;
  --ifx-ink:          #0D0936;
  --ifx-ink-soft:     #3A4266;
  --ifx-ink-faint:    #6B7FD1;
  --line-dark:  rgba(255, 119, 255, 0.14);
  --line-light: rgba(25, 40, 107, 0.12);

  --ff-display: "Lato", -apple-system, BlinkMacSystemFont, sans-serif;
  --ff-body:    "Lato", -apple-system, BlinkMacSystemFont, sans-serif;
  --ff-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --nav-h: 72px;
  --footer-h: 44px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: var(--ff-body);
  font-weight: 400;
  color: #fff;
  background: var(--ifx-violet);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
  font-feature-settings: "ss01", "ss02";
}

/* === 02-deck.css === */
/* =============================================================
   DECK SHELL — scroll-snap container
   ============================================================= */
.deck {
  /* `100dvh` (dynamic viewport) on browsers that support it makes the deck
     resize as iOS Safari's URL bar shows/hides — without it, content gets
     cut off behind the URL bar. Falls back to 100vh for older browsers. */
  height: 100vh;
  height: 100dvh;
  width: 100vw;
  width: 100dvw;
  /* `overflow-y: auto` (not hidden) is required so programmatic
     scrollIntoView works in Safari — Safari's `overflow: hidden` disables
     ALL scrolling, even programmatic. Wheel-driven page navigation is
     instead blocked by `overscroll-behavior-y: contain` on each .page below,
     which stops the wheel/touch scroll chain from reaching this container. */
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.deck::-webkit-scrollbar { display: none; }

.page {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  height: 100vh;
  height: 100dvh;
  width: 100vw;
  width: 100dvw;
  /* Stop the wheel/touch scroll chain at the page boundary so reaching the
     top or bottom of an overflowing page doesn't bleed into the deck (which
     would jump to the next page). Page nav is exclusive to: arrow keys,
     topnav buttons, and the touch-swipe handler in 07-navigation.js. */
  overscroll-behavior-y: contain;
  position: relative;
  /* Inner scroll when content can't fit the viewport (narrow / short browsers).
     Once the user scrolls past the bottom of a page, the deck snaps to the next. */
  overflow-y: auto;
  overflow-x: hidden;
  padding: calc(var(--nav-h) + 24px) 64px calc(var(--footer-h) + 16px);
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
}
.page::-webkit-scrollbar { width: 4px; }
.page::-webkit-scrollbar-track { background: transparent; }
.page::-webkit-scrollbar-thumb { background: rgba(255, 119, 255, 0.18); border-radius: 999px; }
.page.is-light { color: var(--ifx-ink); background: var(--ifx-lavender-2); }
.page.is-dark  { color: #fff; }

@media (max-width: 900px) {
  .page { padding: calc(var(--nav-h) + 16px) 24px calc(var(--footer-h) + 24px); }
}

/* Snap-scroll between pages is preserved at every viewport. When a page's
   content is taller than the viewport (narrow or short browser windows), the
   page itself scrolls internally; reaching the bottom snaps to the next page. */

/* === 03-topnav.css === */
/* =============================================================
   TOP NAV
   ============================================================= */
.topnav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 100;
  /* Match the cover gradient family with high opacity so the topnav looks the
     same on every page, dark or light. Backdrop blur smooths edges. */
  background: linear-gradient(180deg, rgba(11, 8, 48, 0.95) 0%, rgba(13, 9, 54, 0.92) 100%);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(255, 119, 255, 0.10);
  color: #fff;
}
@media (max-width: 900px) {
  .topnav { padding: 0 20px; }
}

.brand {
  display: flex; align-items: center; gap: 12px;
  color: inherit;
  text-decoration: none;
}
.brand-mark {
  width: 64px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.brand-mark img,
.brand-mark svg {
  width: 64px;
  height: auto;
  display: block;
}

/* Cover hero logo */
.cover-logo {
  display: block;
  margin-bottom: 6px;
}
.cover-logo img,
.cover-logo svg {
  /* 15% smaller than the previous clamp(120, 13vw, 200). */
  width: clamp(102px, 11vw, 170px);
  height: auto;
  display: block;
}
@media (max-width: 720px) {
  .cover-logo img,
  .cover-logo svg { width: 94px; }
}

/* Core mark on page 3 — wave only */
.core-mark-svg {
  width: 110px;
  height: 38px;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.core-mark-svg svg {
  width: 110px;
  height: auto;
  display: block;
}
.brand-name {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 19px;
  letter-spacing: -0.02em;
  line-height: 1;
  display: flex; flex-direction: column; gap: 3px;
}
.brand-name strong { font-weight: 600; }
.brand-name small {
  font-family: var(--ff-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.55;
}

/* Progress pills */
.progress {
  display: flex;
  gap: 4px;
  padding: 5px;
  border-radius: 999px;
  border: 1px solid var(--line-dark);
  background: rgba(255,255,255,0.04);
  transition: border-color 0.5s var(--ease), background 0.5s var(--ease);
}
.on-light .progress {
  border-color: var(--line-light);
  background: rgba(255,255,255,0.5);
}
.progress button {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 16px;
  border: none;
  background: transparent;
  color: inherit;
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  border-radius: 999px;
  cursor: pointer;
  opacity: 0.5;
  transition: all 0.3s var(--ease);
}
.progress button .dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
}
.progress button:hover { opacity: 0.85; }
.progress button.active {
  opacity: 1;
  background: var(--ifx-magenta);
  color: var(--ifx-violet);
  font-weight: 600;
}
.on-light .progress button.active {
  background: var(--ifx-navy);
  color: var(--ifx-lavender);
}
.progress button.active .dot { opacity: 1; }

@media (max-width: 720px) {
  .progress button { padding: 0 8px; font-size: 9px; letter-spacing: 0.15em; }
  .progress button span:not(.dot) { display: none; }
  .progress button { width: 28px; padding: 0; justify-content: center; }
}

.topnav-counter {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  opacity: 0.5;
}
@media (max-width: 720px) { .topnav-counter { display: none; } }
/* Invisible spacer so the progress pill stays centered now that the counter
   block has been removed. Mirrors the brand-mark width. */
.topnav-spacer {
  width: 64px;
  flex-shrink: 0;
}

/* === 04-shared.css === */
/* =============================================================
   SHARED — eyebrows, section headers
   ============================================================= */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ifx-magenta);
}
.eyebrow::before {
  content: "";
  width: 28px; height: 1px;
  background: currentColor;
  display: inline-block;
}
.is-light .eyebrow { color: var(--ifx-navy); }

/* =============================================================
   DECK FOOTER — fixed dark bar at the bottom of every page
   Matches the topnav so the deck has a consistent dark frame
   above and below regardless of page background.
   ============================================================= */
.deck-footer {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 100;
  height: var(--footer-h, 44px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 40px;
  background: linear-gradient(180deg, rgba(13, 9, 54, 0.94) 0%, rgba(11, 8, 48, 0.97) 100%);
  border-top: 1px solid rgba(255, 119, 255, 0.10);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  font-family: var(--ff-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1;
}
.deck-footer span { display: inline-flex; align-items: center; }
@media (max-width: 720px) { .deck-footer { font-size: 8.5px; padding: 0 20px; } }

/* =============================================================
   ANIMATED WAVES BACKGROUND
   Container that hosts the simplex-noise SVG line field. Sits
   behind the content of a section via z-index. Tuning notes for
   colour/density/amplitude live in 09-waves-bg.js.
   ============================================================= */
.waves-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
.waves-bg svg { display: block; }

/* =============================================================
   PREFERS-REDUCED-MOTION
   Zero out animations and transitions for users who request it.
   The waves component also self-detects and skips its rAF loop.
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* === 05-page-cover.css === */
/* =============================================================
   PAGE 1 — COVER
   ============================================================= */
#page-1 {
  background:
    radial-gradient(1100px 600px at 82% 28%, rgba(255,119,255,0.16), transparent 55%),
    radial-gradient(900px 700px at 18% 78%, rgba(50,74,178,0.36), transparent 60%),
    linear-gradient(180deg, #0D0936 0%, #100A3F 60%, #0B0830 100%);
  justify-content: space-between;
  padding-top: calc(var(--nav-h) + 18px);
  /* Awards strip must sit flush against the top of the fixed deck-footer
     so the wave field doesn't peek through between them. */
  padding-bottom: var(--footer-h);
}

/* Ambient backdrop */
.cover-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.cover-field svg {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(1.4);
  opacity: 0.15;
  mix-blend-mode: screen;
}
.cover-field .wave {
  animation: wavebreathe 8s ease-in-out infinite;
  transform-origin: center;
}
@keyframes wavebreathe {
  0%, 100% { opacity: 0.15; transform: translate(-50%,-50%) scale(1.4); }
  50%      { opacity: 0.22; transform: translate(-50%,-50%) scale(1.5); }
}

.cover-main {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  /* Centers the logo + title + subtitle block within the area above the
     awards ribbon. The padding-top biases the centerline so the headline
     lands closer to the visual middle of the full viewport (offsetting the
     space taken by the awards strip at the bottom). */
  justify-content: center;
  padding-top: clamp(40px, 9vh, 120px);
  max-width: 1460px;
  width: 100%;
  margin: 0 auto;
}

.cover-label {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ifx-magenta);
  margin-bottom: 40px;
  animation: rise 1.2s var(--ease) 0.2s backwards;
}
.cover-label::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ifx-magenta);
  box-shadow: 0 0 16px var(--ifx-magenta);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: 0.4; transform: scale(0.75); }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cover-logo-row {
  display: flex;
  align-items: center;
  gap: 28px;
  /* Slightly more breathing room between the logo and the headline. */
  margin-bottom: 36px;
  animation: rise 1.3s var(--ease) 0.45s backwards;
}

.cover-title {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(52px, 8.5vw, 124px);
  letter-spacing: -0.04em;
  line-height: 1.0;
  max-width: 14ch;
  /* Slightly more breathing room between the headline and the subtitle. */
  margin-bottom: 40px;
  animation: rise 1.4s var(--ease) 0.65s backwards;
}
.cover-title em {
  font-style: italic;
  font-weight: 700;
  background: linear-gradient(100deg,
    var(--ifx-magenta) 0%,
    #FFD8FF 30%,
    #FFFFFF 50%,
    #FFD8FF 70%,
    var(--ifx-magenta) 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 5s linear infinite;
  filter: drop-shadow(0 4px 32px rgba(255, 119, 255, 0.55))
          drop-shadow(0 2px 6px rgba(255, 119, 255, 0.30));
}
@keyframes shimmer {
  to { background-position: -220% 0; }
}

.cover-subtitle {
  font-family: var(--ff-body);
  font-size: 18px;
  font-weight: 300;
  letter-spacing: 0.01em;
  color: rgba(255,255,255,0.72);
  max-width: 54ch;
  animation: rise 1.4s var(--ease) 0.85s backwards;
}

/* Awards ribbon — marquee */
.awards-ribbon {
  position: relative;
  z-index: 3;
  padding: 28px 0 22px;
  background: #fff;
  border-top: 1px solid rgba(25, 40, 107, 0.08);
  border-bottom: 1px solid rgba(25, 40, 107, 0.08);
  margin: 0 -64px;
  animation: rise 1.5s var(--ease) 1.05s backwards;
}
@media (max-width: 900px) { .awards-ribbon { margin: 0 -24px; } }

.awards-label {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--ff-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ifx-navy);
  opacity: 1;
  margin: 0 64px 14px;
}
@media (max-width: 900px) { .awards-label { margin: 0 24px 18px; } }
.awards-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line-dark), transparent);
}

.awards-track-mask {
  position: relative;
  overflow: hidden;
}
.awards-track-mask::before,
.awards-track-mask::after {
  content: "";
  position: absolute; top: 0; bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.awards-track-mask::before {
  left: 0; background: linear-gradient(90deg, #fff, transparent);
}
.awards-track-mask::after {
  right: 0; background: linear-gradient(-90deg, #fff, transparent);
}
.awards-track {
  display: flex;
  gap: 48px;
  align-items: flex-start;
  padding: 4px 0;
  width: max-content;
  animation: awardsScroll 50s linear infinite;
}
.awards-track:hover { animation-play-state: paused; }
@keyframes awardsScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (max-width: 900px) {
  .awards-track { animation-duration: 35s; gap: 32px; }
}

.award {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 170px;
  flex-shrink: 0;
  text-align: center;
}
.award-badge {
  width: 110px;
  height: 110px;
  display: grid;
  place-items: center;
  position: relative;
  flex-shrink: 0;
}
.award-badge img {
  width: 110px;
  height: 110px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 3px 14px rgba(25, 40, 107, 0.14));
  transition: transform 0.4s var(--ease), filter 0.4s var(--ease);
}
.award:hover .award-badge img {
  transform: scale(1.06);
  filter: drop-shadow(0 5px 20px rgba(25, 40, 107, 0.22));
}
.award-meta {
  font-family: var(--ff-body);
  line-height: 1.35;
  width: 100%;
}
.award-meta strong {
  display: block;
  color: var(--ifx-ink);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-family: var(--ff-mono);
  margin-bottom: 4px;
  white-space: nowrap;
}
.award-meta span {
  display: block;
  color: var(--ifx-ink-soft);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.02em;
  font-family: var(--ff-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Stevie Bronze SVG stand-in */
.bronze-badge {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  background: radial-gradient(circle at center, #1a1a1a 60%, #000 100%);
  border-radius: 50%;
  filter: drop-shadow(0 4px 24px rgba(205, 127, 50, 0.25));
}

.cover-footer {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.38);
  padding-top: 28px;
  margin-top: 8px;
}
@media (max-width: 720px) { .cover-footer { font-size: 9px; } }

/* === 06-page-proof.css === */
/* =============================================================
   PAGE 2 — PROOF (light)
   ============================================================= */
#page-2 {
  background: var(--ifx-lavender-2);
  color: var(--ifx-ink);
}
.proof-header {
  /* Header sizing/spacing is unified across About Us, Infrastructure, and
     Impact (see .platform-header / .pains-header — all share the same
     eyebrow→title→subtitle scale and gaps). */
  margin: 0 auto 14px;
  max-width: 1500px;
  width: 100%;
}
.proof-title {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 44px);
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--ifx-navy);
  margin: 0;
  white-space: nowrap;
}
@media (max-width: 1200px) {
  .proof-title { white-space: normal; }
}
.proof-title em {
  font-style: italic;
  color: var(--ifx-magenta-deep);
}
.proof-header .eyebrow { color: var(--ifx-navy); margin-bottom: 14px; }

.proof-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  /* Single row that fills the grid's full height. Without this the row
     auto-sizes to content and the right column (5 cert cards at min-height)
     collapses smaller than the left column at narrow heights. */
  grid-template-rows: 1fr;
  gap: 32px;
  align-items: stretch;
  width: 100%;
  /* Fills the height owned by .proof-section--top — the parent decides the
     section's flex share, so the grid just stretches into it. */
  flex: 1;
  min-height: 0;
  /* Reserve room for the absolutely-positioned trust-title above the right
     column. */
  margin-top: 26px;
}

/* Visual break between "Built for scale" and "Who we are". Generous margins
   give each section room to breathe. */
.proof-divider {
  max-width: 1500px;
  width: 100%;
  margin: 28px auto 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}
.proof-divider::before,
.proof-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(25, 40, 107, 0.22), transparent);
}
.proof-divider-mark {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ifx-magenta);
  box-shadow: 0 0 0 4px rgba(255, 119, 255, 0.18), 0 0 16px rgba(255, 119, 255, 0.45);
  flex-shrink: 0;
}

/* LEFT COLUMN — PBA hero on top, 4 compact stat tiles below. padding-top
   matches the trust-title height in the right column so both columns share
   the same content baseline. Inside, hero (flex 4) + supporting (flex 1) =
   each supporting tile renders at the same height as a single trust card. */
.proof-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-self: stretch;
  min-height: 0;
}

/* HERO STAT — flex:4 share so it dominates the left column 4:1 over the
   supporting-stats row. justify-content: space-between pushes the eyebrow
   to the top and the caption to the bottom — the number sits in the
   middle with breathing room on either side. */
.hero-stat {
  position: relative;
  padding: 16px 30px 16px;
  border-radius: 8px;
  background:
    radial-gradient(900px 500px at 85% 15%, rgba(255, 119, 255, 0.22), transparent 60%),
    radial-gradient(700px 500px at 10% 90%, rgba(50, 74, 178, 0.5), transparent 60%),
    linear-gradient(155deg, var(--ifx-violet-deep) 0%, var(--ifx-violet) 50%, #0B0830 100%);
  overflow: hidden;
  box-shadow: 0 14px 44px rgba(13, 9, 54, 0.22);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 4px;
  flex: 4 1 0;
  min-height: 110px;
}
.hero-stat-label {
  position: relative;
  font-family: var(--ff-mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ifx-magenta);
  z-index: 1;
}
.hero-stat-number {
  position: relative;
  font-family: var(--ff-display);
  font-weight: 900;
  /* Single smooth clamp across every viewport — no media-query jumps. */
  font-size: clamp(28px, 5.8vw, 112px);
  letter-spacing: -0.045em;
  line-height: 0.95;
  /* Reversed gradient: $1.59 starts in deep magenta and fades right into
     white. Same drop-shadow halo for physical presence. */
  background: linear-gradient(135deg,
    var(--ifx-magenta-deep) 0%,
    var(--ifx-magenta) 20%,
    #C964D6  45%,
    #FFE6FF  75%,
    #FFFFFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 28px rgba(255, 119, 255, 0.45))
          drop-shadow(0 2px 4px rgba(13, 9, 54, 0.30));
  display: block;
  z-index: 1;
  white-space: nowrap;
  text-align: left;
  margin: 0;
}
.hero-stat-caption {
  position: relative;
  font-family: var(--ff-body);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(11px, 1.0vw, 15px);
  color: rgba(255,255,255,0.85);
  letter-spacing: -0.005em;
  line-height: 1.4;
  z-index: 1;
  text-align: left;
  max-width: 60ch;
}
.hero-stat::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--ifx-magenta), #E6A8FF, var(--ifx-blue));
}
.hero-stat::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: 18px 18px;
  opacity: 0.4;
  pointer-events: none;
  mix-blend-mode: overlay;
}

/* SUPPORTING STATS — 4-across row that flexes to 1/5 of the left column,
   making each tile match the height of a single trust-card on the right. */
.supporting-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  flex: 1 1 0;
  min-height: 0;
}
@media (max-width: 720px) {
  .supporting-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.sstat {
  position: relative;
  padding: 10px 12px 8px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid rgba(25, 40, 107, 0.08);
  overflow: hidden;
  transition: all 0.35s var(--ease);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  /* Hard floor so num + (potentially 2-line) label always have vertical room. */
  min-height: 64px;
  /* Container queries so .num and .lbl scale with TILE width, not viewport.
     Keeps the number on one line and the label fully visible at every width. */
  container-type: inline-size;
}
.sstat::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--ifx-navy), var(--ifx-magenta));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}
.sstat:hover {
  transform: translateY(-3px);
  border-color: rgba(162, 38, 158, 0.25);
  box-shadow: 0 8px 24px rgba(13, 9, 54, 0.06);
}
.sstat:hover::before { transform: scaleX(1); }
.sstat .num {
  font-family: var(--ff-display);
  font-weight: 900;
  /* vw fallback for browsers without container-query support. */
  font-size: clamp(12px, 1.9vw, 32px);
  /* Container-query driven: 16% of tile width keeps the number filling the
     tile from any viewport. Caps at 32px on wide tiles, floors at 11px. */
  font-size: clamp(11px, 16cqi, 32px);
  letter-spacing: -0.03em;
  line-height: 1;
  background: linear-gradient(140deg, var(--ifx-navy) 0%, var(--ifx-magenta-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
}
.sstat .lbl {
  font-family: var(--ff-mono);
  /* vw fallback. */
  font-size: clamp(7.5px, 0.85vw, 12px);
  /* Container-query driven so the label always fits its tile. */
  font-size: clamp(8px, 6.2cqi, 12px);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ifx-ink-soft);
  margin-top: 6px;
  line-height: 1.25;
  /* Allow wrapping rather than clipping with ellipsis — the tile grows to
     fit a 2-line label so the wording is never cut off. */
  white-space: normal;
  overflow-wrap: break-word;
}

/* SECTION WRAPPERS — explicit owners for the two halves of the page so they
   each manage their own space and never bleed onto each other. */
.proof-section {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1500px;
  margin-inline: auto;
  min-height: 0;
}
.proof-section--top {
  /* basis:auto + grow:2 + shrink:0:
       basis:auto starts at content size (sections never collapse smaller),
       grow:2 grabs 2/3 of any extra page height,
       shrink:0 prevents bottom-pillar clipping when content is tight. */
  flex: 2 0 auto;
  min-height: 0;
}
.proof-section--bottom {
  flex: 1 0 auto;
  min-height: 0;
  margin-top: 0;
}
.who-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-height: 0;
}
.who-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Grid: left 2x2 + right feature. Both columns stretch. Grid itself flexes
   to fill the available height in the proof-section--bottom container so the section
   uses every pixel below the divider on tall monitors. */
.who-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 14px;
  align-items: stretch;
  min-height: 0;
  flex: 1;
}
.who-grid-left {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* `minmax(min-content, 1fr)` rows so:
       - each row is at least as tall as its tallest tile's content (no clipping)
       - rows split the available height equally above that floor (so all 4
         pillars render at the same height — Best-in-class = Pharma-exclusive,
         and the column total matches the HCP-owned feature card on the right) */
  grid-template-rows: minmax(min-content, 1fr) minmax(min-content, 1fr);
  gap: 12px;
}
.who-grid-right {
  display: flex;
  align-items: stretch;
}
@media (max-width: 900px) {
  .who-grid { grid-template-columns: 1fr; }
  .who-grid-left { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
}
@media (max-width: 600px) {
  .who-grid-left { grid-template-columns: 1fr; }
}

/* Standard pillar tile — taller for breathing room, near-black body copy.
   overflow:hidden so long body copy can't escape the tile and overlap into
   the divider/ops-strip area below at narrow widths. */
.who-pillar {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 19px 20px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(25, 40, 107, 0.1);
  border-radius: 8px;
  transition: all 0.3s var(--ease);
  overflow: hidden;
  min-height: 0;
}
.who-pillar:hover {
  border-color: rgba(162, 38, 158, 0.3);
  background: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(13, 9, 54, 0.06);
}
.who-pillar-mark {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ifx-navy), var(--ifx-blue));
  color: #fff;
  flex-shrink: 0;
  margin-top: 2px;
}
.who-pillar-mark svg {
  width: 18px; height: 18px;
}
.who-pillar-body {
  flex: 1;
  min-width: 0;
}
.who-pillar-body strong {
  display: block;
  font-family: var(--ff-body);
  font-weight: 700;
  /* Wider clamp range so the heading visibly scales with the window. */
  font-size: clamp(11px, 1.3vw, 19px);
  color: var(--ifx-ink);
  /* All-caps treatment for the pillar headings. */
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.25;
  margin-bottom: 5px;
}
.who-pillar-body span {
  display: block;
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: clamp(9.5px, 1.05vw, 15px);
  color: var(--ifx-ink);
  line-height: 1.4;
}

/* Feature tile (HCP-owned headline + Founded 2021) — spans both rows of the
   left 2×2 grid and stretches to its full height. */
.who-pillar-feature {
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  padding: 22px 22px;
  width: 100%;
  flex: 1;
  background:
    radial-gradient(600px 400px at 80% 20%, rgba(255, 119, 255, 0.18), transparent 60%),
    linear-gradient(155deg, var(--ifx-violet-deep) 0%, var(--ifx-violet) 60%, #0B0830 100%);
  border-color: rgba(255, 119, 255, 0.2);
  position: relative;
  overflow: hidden;
}
.who-pillar-feature-headline {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(22px, 2.2vw, 32px);
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: #fff;
  margin: 0;
  position: relative;
  z-index: 1;
}
.who-pillar-feature-headline em {
  font-style: italic;
  font-weight: 700;
  color: var(--ifx-magenta);
}
.who-pillar-feature-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  position: relative;
  z-index: 1;
}
.who-pillar-feature::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--ifx-magenta), #E6A8FF, var(--ifx-blue));
}
.who-pillar-feature .who-pillar-mark {
  width: 48px; height: 48px;
  background: linear-gradient(135deg, var(--ifx-magenta), var(--ifx-magenta-deep));
  margin-top: 0;
}
.who-pillar-feature .who-pillar-mark svg {
  width: 22px; height: 22px;
}
.who-pillar-feature .who-pillar-body strong {
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: 24px;
  color: #fff;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
  line-height: 1.1;
}
.who-pillar-feature .who-pillar-body span {
  color: rgba(255, 255, 255, 0.85);
  font-size: 15px;
  line-height: 1.4;
}
.who-pillar-feature:hover {
  transform: translateY(-2px);
  background:
    radial-gradient(600px 400px at 80% 20%, rgba(255, 119, 255, 0.28), transparent 60%),
    linear-gradient(155deg, var(--ifx-violet-deep) 0%, var(--ifx-violet) 60%, #0B0830 100%);
  border-color: rgba(255, 119, 255, 0.4);
  box-shadow: 0 10px 30px rgba(13, 9, 54, 0.2);
}

/* RIGHT COLUMN — Trust stack stretches to fill the grid row. The 5 cards
   distribute evenly so the bottom of U.S. Patent always aligns with the
   bottom of the Uptime tile (left column's last supporting stat). */
.trust {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-self: stretch;
  min-height: 0;
  position: relative;
}
/* Pulled out of the column flex flow so the 5 cert cards distribute over the
   full column height — keeps the trust column's card stack the same overall
   height as the hero + supporting-stats stack on the left. */
.trust-title {
  position: absolute;
  top: -24px;
  left: 0;
  right: 0;
  font-family: var(--ff-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ifx-navy);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.trust-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(25,40,107,0.18), transparent);
}
.trust-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  background: #fff;
  border: 1px solid rgba(25, 40, 107, 0.1);
  border-radius: 8px;
  transition: all 0.3s var(--ease);
  animation: trustRise 0.6s var(--ease) both;
  flex: 1 1 0;
  /* Floor so cert-mark + body never get visually crushed at narrower widths
     (e.g. 1440×900 where the column would otherwise collapse to 42px each). */
  min-height: 60px;
}
.trust-card:hover {
  border-color: var(--ifx-magenta-deep);
  transform: translateX(3px);
  box-shadow: 0 4px 14px rgba(162, 38, 158, 0.08);
}
@keyframes trustRise {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
.trust-card .cert-mark {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ifx-navy), var(--ifx-blue));
  color: #fff;
  flex-shrink: 0;
}
.trust-card .cert-mark svg {
  width: 16px; height: 16px;
}
.trust-card .cert-body {
  flex: 1;
  min-width: 0;
}
.trust-card .cert-body strong {
  display: block;
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: 17px;
  color: var(--ifx-ink);
  letter-spacing: -0.01em;
}
.trust-card .cert-body span {
  display: block;
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ifx-ink);
  font-weight: 500;
  margin-top: 4px;
}

/* Narrow width: tighter 2-col; hero compresses but no collapse until very narrow. */
@media (max-width: 1280px) {
  .proof-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 22px; }
  .supporting-stats { gap: 10px; }
  .sstat { padding: 10px 12px 8px; }
  /* hero/sstat fonts unified in base rule */
  .trust-card { padding: 11px 14px; gap: 11px; }
  .trust-card .cert-mark { width: 32px; height: 32px; }
  .trust-card .cert-body strong { font-size: 13.5px; }
  .trust-card .cert-body span { font-size: 10px; letter-spacing: 0.08em; color: var(--ifx-ink); }
  .who-pillar-feature-headline { font-size: clamp(18px, 1.7vw, 24px); }
  /* who-pillar-body fonts unified in base rule */
}
@media (max-width: 1100px) {
  .proof-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; }
  .hero-stat { padding: 14px 20px; }
  .trust-card .cert-body strong { font-size: 12px; }
  .trust-card .cert-body span { font-size: 9px; }
}

/* =============================================================
   NATURAL-FLOW MODE — same strategy as the Impact page.

   Trigger when EITHER the width is narrow (< 1180 px) OR the height
   is short (< 820 px). At those sizes we stop trying to cram a fixed
   2-column grid into a fixed area; instead everything stacks vertically
   at full size and the page itself scrolls (.page is overflow-y: auto).

   This is the "wax in place and let you scroll" behaviour: content
   stays legible at its natural size, nothing overlaps, and the user
   can scroll within the page to see what doesn't fit on screen.
   ============================================================= */
@media (max-width: 1180px), (max-height: 820px) {
  /* Sections give up their flex shares so they don't fight for height. */
  #page-2 { justify-content: flex-start; }
  .proof-section--top,
  .proof-section--bottom { flex: none; }

  /* Two-column grid (hero/sstats vs trust) collapses to single column. */
  .proof-grid {
    grid-template-columns: 1fr;
    gap: 18px;
    flex: none;
    align-items: stretch;
  }
  .proof-left { flex: none; padding-top: 0; gap: 12px; }

  /* Hero + supporting stats + trust now sit at their natural heights. */
  .hero-stat {
    flex: none;
    min-height: auto;
    padding: 22px 26px;
    gap: 10px;
  }
  .supporting-stats { flex: none; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sstat { min-height: 64px; padding: 12px 14px 10px; }

  .trust { flex: none; gap: 8px; }
  .trust-card { flex: none; min-height: 44px; padding: 10px 14px; }

  /* Bottom half: who-grid stacks too — feature card moves below the 2x2. */
  .who-section { flex: none; gap: 12px; }
  .who-grid {
    grid-template-columns: 1fr;
    flex: none;
    gap: 12px;
  }
  .who-grid-left {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 12px;
  }
  .who-pillar { min-height: auto; }
  .who-pillar-feature { min-height: 140px; }
}

/* On very narrow viewports (phones, narrow split panes) collapse the
   supporting-stats and the 2x2 who-grid to single columns. */
@media (max-width: 720px) {
  .supporting-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .who-grid-left { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .supporting-stats { grid-template-columns: 1fr; }
}

/* === 07-page-platform.css === */
/* =============================================================
   PAGE 3 — PLATFORM (light)
   ============================================================= */
#page-3 {
  background:
    radial-gradient(1200px 700px at 18% 82%, rgba(50, 74, 178, 0.10), transparent 55%),
    radial-gradient(900px 600px at 85% 20%, rgba(255, 119, 255, 0.06), transparent 60%),
    var(--ifx-lavender-2);
  color: var(--ifx-ink);
  /* Reserve room for the fixed footer so the flywheel doesn't bleed under it. */
  padding-bottom: calc(var(--footer-h) + 12px);
  /* The flywheel is a static visual — no inner scroll. Locking vertical
     overflow stops iOS Safari's rubber-band bounce so the page feels the
     same as the others (only swipe / arrow / topnav navigates). */
  overflow-y: hidden;
  overscroll-behavior: none;
}
.platform-header {
  /* Unified eyebrow→title→subtitle scale + spacing — matches About Us
     (.proof-header) and Impact (.pains-header) so all three pages share
     the same header location and type rhythm. */
  margin: 0 auto 14px;
  max-width: 1500px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
}
.platform-title {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 44px);
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin: 0;
  color: var(--ifx-navy);
  white-space: nowrap;
}
.platform-title em {
  font-style: italic;
  color: var(--ifx-magenta-deep);
}
.platform-subtitle {
  color: var(--ifx-ink-soft);
  font-size: clamp(14px, 1.05vw, 17px);
  margin: 14px 0 0;
  white-space: nowrap;
}
.platform-header .eyebrow {
  color: var(--ifx-navy);
  margin-bottom: 14px;
}
@media (max-width: 1200px) {
  .platform-title, .platform-subtitle { white-space: normal; }
}

/* === 08-flywheel.css === */
/* =============================================================
   FLYWHEEL — 5 circular segments + central hub (light theme)
   ============================================================= */
.flywheel-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 0;
  padding: 4px 0 12px;
  width: 100%;
}
.flywheel {
  position: relative;
  height: 100%;
  aspect-ratio: 1 / 1;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
  /* The drawer content scales with the wheel size via container queries
     (cqi units inside the drawer-card and hub). */
  container-type: size;
  container-name: wheel;
}
.flywheel-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.flywheel-segment {
  cursor: pointer;
  transition: filter 0.4s var(--ease), transform 0.4s var(--ease);
  transform-origin: center;
  transform-box: fill-box;
}
.flywheel-segment .seg-fill {
  fill: rgba(13, 9, 54, 0.92);
  stroke: rgba(255, 119, 255, 0.22);
  stroke-width: 1.2;
  transition: fill 0.4s var(--ease), stroke 0.4s var(--ease), filter 0.4s var(--ease);
}
.flywheel-segment:hover .seg-fill {
  fill: var(--ifx-violet-deep);
  stroke: var(--ifx-magenta);
}
.flywheel-segment:hover {
  filter: drop-shadow(0 0 28px rgba(255, 119, 255, 0.45));
}
/* Font-size is set as a UNITLESS SVG attribute in JS (user units), so the
   text scales with the wheel size. CSS here only handles family/weight/fill. */
.flywheel-segment .seg-label,
.flywheel-segment .seg-label-2 {
  font-family: var(--ff-display);
  font-weight: 700;
  fill: #fff;
  letter-spacing: -0.005em;
  pointer-events: none;
}
/* Central hub */
.flywheel-hub {
  position: absolute;
  width: 36%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, rgba(255, 119, 255, 0.18), transparent 65%),
    radial-gradient(circle at 30% 30%, rgba(50, 74, 178, 0.5), transparent 60%),
    linear-gradient(155deg, var(--ifx-violet-deep) 0%, var(--ifx-violet) 50%, #0B0830 100%);
  border: 1.5px solid rgba(255, 119, 255, 0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  pointer-events: none;
  z-index: 2;
  box-shadow: 0 0 60px rgba(255, 119, 255, 0.18), inset 0 0 30px rgba(0,0,0,0.3);
}
.flywheel-hub::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent, rgba(255,119,255,0.4), transparent 30%);
  animation: hubSpin 8s linear infinite;
  z-index: -1;
  opacity: 0.5;
}
@keyframes hubSpin {
  to { transform: rotate(360deg); }
}
.flywheel-hub-logo {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.flywheel-hub-logo img,
.flywheel-hub-logo svg {
  width: 100%;
  height: auto;
  display: block;
  color: #fff;
}
.flywheel-hub-cap {
  font-family: var(--ff-mono);
  /* vw fallback for browsers without container query support, then cqi for
     newer browsers (scales with the wheel size, not the viewport). */
  font-size: clamp(7px, 0.9vw, 14px);
  font-size: clamp(7px, 1.8cqi, 14px);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ifx-magenta);
  white-space: nowrap;
  text-align: center;
  line-height: 1.25;
}

/* Circular drawer (inside the flywheel ring) */
.flywheel-drawer {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
.flywheel-drawer.is-open {
  display: flex;
  animation: drawerFadeIn 0.3s var(--ease);
}

.flywheel.drawer-open .flywheel-segment { opacity: 0.18; pointer-events: none; }
.flywheel.drawer-open .flywheel-hub      { opacity: 0; transition: opacity 0.3s; }
.flywheel-segment { transition: opacity 0.3s var(--ease), filter 0.4s var(--ease), transform 0.4s var(--ease); }
@keyframes drawerFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.flywheel-drawer-card {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 25%, rgba(50,74,178,0.45), transparent 60%),
    linear-gradient(155deg, var(--ifx-violet-deep) 0%, #0B0830 100%);
  border: 2px solid rgba(255, 119, 255, 0.5);
  box-shadow: 0 20px 80px rgba(0,0,0,0.6), 0 0 60px rgba(255,119,255,0.3);
  animation: drawerScaleIn 0.45s var(--ease);
  overflow: hidden;
}
@keyframes drawerScaleIn {
  from { transform: scale(0.4); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.flywheel-drawer-inner {
  position: absolute;
  /* Inscribed square (side = diameter / sqrt(2) ≈ 70.7%). Anything narrower
     would have the square's corners overflow the circle and clip content. */
  inset: 14.5%;
  display: flex;
  flex-direction: column;
  /* The drawer content (title, tagline, tiles) all share this width and centering
     so the heading aligns with the start of each tile. */
  --drawer-content-width: 92%;
}
.flywheel-drawer-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.flywheel-drawer-content::-webkit-scrollbar {
  width: 4px;
}
.flywheel-drawer-content::-webkit-scrollbar-track {
  background: transparent;
}
.flywheel-drawer-content::-webkit-scrollbar-thumb {
  background: rgba(255,119,255,0.3);
  border-radius: 999px;
}
.flywheel-drawer-title {
  font-family: var(--ff-display);
  font-weight: 700;
  /* vw fallback first, cqi (scales with wheel) for newer browsers. */
  font-size: clamp(13px, 1.5vw, 28px);
  font-size: clamp(13px, 3cqi, 28px);
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: #fff;
  margin: 0 auto 6px;
  text-align: left;
  width: var(--drawer-content-width);
}
.flywheel-drawer-tagline {
  font-family: var(--ff-body);
  font-style: italic;
  font-size: clamp(13px, 1.5vw, 22px);
  font-size: clamp(13px, 3cqi, 22px);
  color: rgba(255,255,255,0.82);
  line-height: 1.4;
  margin: 0 auto 14px;
  text-align: left;
  width: var(--drawer-content-width);
}
.flywheel-drawer-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 92%;
}
.flywheel-drawer-list li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--ff-body);
  font-size: clamp(13px, 1.15vw, 16px);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.92);
  padding: 5px 0;
  text-align: left;
}
.flywheel-drawer-list li::before {
  content: "•";
  color: var(--ifx-magenta);
  flex-shrink: 0;
  font-weight: 700;
  font-size: 1.4em;
  line-height: 0.8;
}
/* Flip-card grid (used by pillars that still render the capability list) */
.flywheel-drawer-flips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(110px, 11vw, 150px), 1fr));
  gap: 8px;
  margin: 8px auto 0;
  width: 100%;
}

/* Category tile column — single-column stack inside the circle drawer.
   Tiles are intentionally narrower than the inscribed square so they sit more
   toward the center of the circle, with text still left-aligned.
   IMPORTANT: do NOT use `flex: 1` here — that would force the column to fill
   all available height inside the drawer, pushing the heading to the very top.
   Sizing to content lets the parent `justify-content: center` keep the whole
   heading + tiles block visually centered in the circle. */
.flywheel-drawer-cats {
  display: flex;
  flex-direction: column;
  gap: clamp(5px, 0.7vw, 10px);
  width: var(--drawer-content-width);
  margin: 0 auto;
  flex: 0 1 auto;
  max-height: 100%;
  min-height: 0;
  overflow-y: auto;
}
.flywheel-drawer-cats::-webkit-scrollbar { width: 4px; }
.flywheel-drawer-cats::-webkit-scrollbar-track { background: transparent; }
.flywheel-drawer-cats::-webkit-scrollbar-thumb { background: rgba(255,119,255,0.30); border-radius: 999px; }
.cat-tile {
  position: relative;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 119, 255, 0.22);
  padding: clamp(7px, 0.8vw, 14px) clamp(12px, 1.2vw, 24px);
  padding: clamp(7px, 1.6cqi, 14px) clamp(12px, 2.4cqi, 24px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
  overflow: hidden;
  flex-shrink: 0;
}
.cat-tile::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--ifx-magenta), transparent);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.cat-tile:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 119, 255, 0.55);
  transform: translateY(-2px);
}
.cat-tile:hover::before { opacity: 1; }
.cat-tile .cat-name {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(11px, 1.3vw, 19px);
  font-size: clamp(11px, 2.6cqi, 19px);
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: #fff;
  padding-right: 36px;  /* leave room for the arrow chip */
}
.cat-tile .cat-tag {
  font-family: var(--ff-body);
  font-style: italic;
  font-size: clamp(9px, 0.9vw, 13.5px);
  font-size: clamp(9px, 1.8cqi, 13.5px);
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.72);
  padding-right: 36px;
}
.cat-tile .cat-arrow {
  position: absolute;
  top: 50%;
  right: clamp(12px, 1.2vw, 18px);
  transform: translateY(-50%);
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(255, 119, 255, 0.18);
  display: grid;
  place-items: center;
  color: var(--ifx-magenta);
  font-size: 14px;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.cat-tile:hover .cat-arrow {
  background: var(--ifx-magenta);
  color: #fff;
  transform: translateY(-50%) translateX(2px);
}

/* Secondary detail overlay — light theme card */
.cat-detail {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1100;
  background: rgba(8, 5, 32, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 4vh 4vw;
}
.cat-detail.is-open {
  display: flex;
  animation: drawerFadeIn 0.3s var(--ease);
}
.cat-detail-card {
  position: relative;
  width: min(1080px, 94vw);
  max-height: 88vh;
  border-radius: 22px;
  background:
    radial-gradient(900px 500px at 80% 0%, rgba(255, 119, 255, 0.07), transparent 60%),
    radial-gradient(700px 500px at 10% 100%, rgba(50, 74, 178, 0.05), transparent 60%),
    linear-gradient(160deg, #FFFFFF 0%, var(--ifx-lavender-2) 100%);
  border: 1px solid rgba(25, 40, 107, 0.10);
  box-shadow: 0 24px 90px rgba(13, 9, 54, 0.18), 0 0 60px rgba(255, 119, 255, 0.06);
  animation: drawerScaleIn 0.4s var(--ease);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.cat-detail-inner {
  padding: 36px 44px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.cat-detail-eyebrow {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ifx-navy);
  margin-bottom: 8px;
}
.cat-detail-title {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(28px, 3vw, 46px);
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--ifx-ink);
  margin: 0 0 8px;
}
.cat-detail-tagline {
  font-family: var(--ff-body);
  font-style: italic;
  font-size: clamp(14px, 1.2vw, 18px);
  color: var(--ifx-magenta-deep);
  line-height: 1.4;
  margin: 0 0 20px;
}
.cat-detail-summary {
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.55;
  color: var(--ifx-ink-soft);
  max-width: 70ch;
  margin: 0 0 28px;
}
.cat-detail-summary strong { color: var(--ifx-ink); font-weight: 600; }
.cat-detail-summary em { color: var(--ifx-magenta-deep); font-style: italic; }
.cat-detail-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}
.cat-stat {
  position: relative;
  padding: 22px 24px 20px;
  background: #fff;
  border: 1px solid rgba(25, 40, 107, 0.08);
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(13, 9, 54, 0.04);
}
.cat-stat::before {
  content: "";
  position: absolute;
  left: 0; top: 22px; bottom: 20px;
  width: 3px;
  background: var(--ifx-magenta);
  border-radius: 0 2px 2px 0;
}
.cat-stat .n {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(28px, 3vw, 44px);
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--ifx-navy);
}
.cat-stat .n .sup {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ifx-magenta);
  margin-left: 8px;
  vertical-align: 0.45em;
}
.cat-stat .t {
  font-size: 13px;
  line-height: 1.4;
  color: var(--ifx-ink-soft);
  margin-top: 8px;
}
.cat-detail-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(25, 40, 107, 0.18);
  background: #fff;
  color: var(--ifx-ink);
  font-size: 20px;
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 5;
  transition: all 0.3s var(--ease);
  line-height: 1;
  padding: 0;
  box-shadow: 0 4px 12px rgba(13, 9, 54, 0.10);
}
.cat-detail-close:hover {
  background: var(--ifx-magenta);
  color: #fff;
  border-color: var(--ifx-magenta);
  transform: rotate(90deg);
}
.cat-detail-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ifx-ink-soft);
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(25, 40, 107, 0.14);
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  margin-bottom: 18px;
  transition: all 0.3s var(--ease);
}
.cat-detail-back:hover {
  border-color: var(--ifx-magenta);
  color: var(--ifx-magenta-deep);
  background: #fff;
}

/* Leak vs Protected path workflow on light card (mirrors exec slide 7) */
.cat-flow {
  margin-top: 28px;
  padding: 22px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(25, 40, 107, 0.08);
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(13, 9, 54, 0.04);
}
.cat-flow-row {
  display: grid;
  grid-template-columns: 168px 1fr;
  gap: 18px;
  align-items: stretch;
}
.cat-flow-side {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 6px 0;
}
.cat-flow-side .eyebrow-mini {
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.cat-flow-side .h {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.cat-flow-side .s {
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--ifx-ink-soft);
  margin-top: 4px;
}
.cat-flow-row.leak    .eyebrow-mini { color: #B83838; }
.cat-flow-row.leak    .h            { color: #8B2A2A; }
.cat-flow-row.defense .eyebrow-mini { color: var(--ifx-magenta-deep); }
.cat-flow-row.defense .h            { color: var(--ifx-magenta-deep); }

.cat-flow-nodes {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 6px;
  align-items: stretch;
}
.cat-flow-node {
  position: relative;
  padding: 12px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cat-flow-row.leak .cat-flow-node {
  background: #FFF1F1;
  border: 1px solid rgba(214, 69, 69, 0.30);
  color: #8B2A2A;
}
.cat-flow-row.leak .cat-flow-node:first-child {
  background: #F5EFFE;
  border-color: rgba(162, 38, 158, 0.22);
  color: var(--ifx-magenta-deep);
}
.cat-flow-row.leak .cat-flow-node:last-child {
  background: #FFE3E3;
  border-color: rgba(214, 69, 69, 0.55);
  color: #8B2A2A;
  font-weight: 600;
}
.cat-flow-row.defense .cat-flow-node {
  background: #fff;
  border: 1px solid rgba(255, 119, 255, 0.32);
  color: var(--ifx-magenta-deep);
}
.cat-flow-row.defense .cat-flow-node:first-child {
  background: #F5EFFE;
  border-color: rgba(162, 38, 158, 0.22);
  color: var(--ifx-magenta-deep);
}
.cat-flow-row.defense .cat-flow-node.hero {
  background: linear-gradient(135deg, var(--ifx-magenta) 0%, var(--ifx-magenta-deep) 100%);
  border: 2px solid var(--ifx-magenta);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 6px 20px rgba(162, 38, 158, 0.28);
}
.cat-flow-row.defense .cat-flow-node:last-child {
  background: rgba(255, 119, 255, 0.10);
  border-color: rgba(255, 119, 255, 0.55);
  color: var(--ifx-magenta-deep);
  font-weight: 600;
}
/* Arrow between nodes */
.cat-flow-node + .cat-flow-node::before {
  content: "→";
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  font-weight: 300;
  width: 14px;
  text-align: center;
  pointer-events: none;
}
.cat-flow-row.leak    .cat-flow-node + .cat-flow-node::before { color: rgba(214, 69, 69, 0.7); }
.cat-flow-row.defense .cat-flow-node + .cat-flow-node::before { color: var(--ifx-magenta); }

.cat-flow-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 14px 0;
}
.cat-flow-divider .line {
  flex: 1;
  height: 1px;
  background: rgba(25, 40, 107, 0.12);
}
.cat-flow-divider .lbl {
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ifx-magenta-deep);
}

@media (max-width: 760px) {
  .cat-flow-row { grid-template-columns: 1fr; gap: 10px; }
  .cat-flow-nodes { grid-auto-flow: row; grid-auto-rows: 1fr; }
  .cat-flow-node + .cat-flow-node::before { content: "↓"; left: 50%; top: -10px; transform: translateX(-50%); }
}

/* ============================================================
   LEDGER VIZ — Under-Reimbursement (Per-claim economics)
   ============================================================ */
.cat-ledger {
  margin-top: 28px;
  padding: 24px 26px 22px;
  background: #fff;
  border: 1px solid rgba(25, 40, 107, 0.08);
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(13, 9, 54, 0.05);
}
.cat-ledger-title {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ifx-navy);
  margin-bottom: 16px;
}
.cat-ledger-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.cat-ledger-col {
  position: relative;
  padding: 18px 20px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
}
.cat-ledger-col.them { background: #FFF5F5; border: 1px solid rgba(214, 69, 69, 0.30); }
.cat-ledger-col.us   { background: linear-gradient(170deg, #fff 0%, #FAF3FF 100%); border: 1px solid rgba(255, 119, 255, 0.45); box-shadow: 0 6px 20px rgba(162, 38, 158, 0.08); }
.cat-ledger-head {
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.cat-ledger-col.them .cat-ledger-head { color: #B83838; }
.cat-ledger-col.us   .cat-ledger-head { color: var(--ifx-magenta-deep); }
.cat-ledger-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13.5px;
  color: var(--ifx-ink);
  padding: 6px 0;
  border-bottom: 1px dashed rgba(25, 40, 107, 0.08);
}
.cat-ledger-row .v { font-family: var(--ff-display); font-size: 15px; color: var(--ifx-navy); font-weight: 700; }
.cat-ledger-row.adj { color: var(--ifx-magenta-deep); }
.cat-ledger-row.adj .v { color: var(--ifx-magenta); }
.cat-ledger-sum {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 2px solid rgba(25, 40, 107, 0.12);
  font-weight: 700;
  font-size: 14px;
  color: var(--ifx-ink);
}
.cat-ledger-sum .v {
  font-family: var(--ff-display);
  font-size: 26px;
  letter-spacing: -0.02em;
  line-height: 1;
}
.cat-ledger-sum.neg .v { color: #B83838; }
.cat-ledger-sum.pos .v { color: var(--ifx-magenta); }
.cat-ledger-outcome {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.35;
  font-weight: 500;
}
.cat-ledger-col.them .cat-ledger-outcome { background: rgba(214, 69, 69, 0.10); color: #8B2A2A; }
.cat-ledger-col.us   .cat-ledger-outcome { background: rgba(255, 119, 255, 0.10); color: var(--ifx-magenta-deep); }
.cat-ledger-note {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(25, 40, 107, 0.08);
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ifx-ink-soft);
  text-align: center;
}
.cat-ledger-note strong { color: var(--ifx-magenta-deep); font-weight: 700; }

.cat-mech {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.cat-mech-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid rgba(25, 40, 107, 0.08);
  border-radius: 10px;
}
.cat-mech-ico {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ifx-navy), var(--ifx-blue));
  color: #fff;
  flex-shrink: 0;
}
.cat-mech-ico svg { width: 14px; height: 14px; }
.cat-mech-row strong { display: block; color: var(--ifx-navy); font-size: 13px; font-weight: 700; margin-bottom: 2px; }
.cat-mech-row span   { display: block; color: var(--ifx-ink-soft); font-size: 11.5px; line-height: 1.35; }

/* ============================================================
   CLOSED-LOOP VIZ — GTN Leakage (Reveal · Recoup · Reinforce)
   ============================================================ */
.cat-loop {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.cat-loop-step {
  position: relative;
  padding: 22px 22px 22px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(25, 40, 107, 0.08);
  box-shadow: 0 6px 18px rgba(13, 9, 54, 0.04);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cat-loop-step::before {
  content: "";
  position: absolute;
  top: 0; left: 22px; right: 22px; height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--ifx-magenta);
}
.cat-loop-step.s1::before { background: #FF77FF; }
.cat-loop-step.s2::before { background: #C864E6; }
.cat-loop-step.s3::before { background: #6B7FD1; }
.cat-loop-top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cat-loop-badge {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #fff;
}
.cat-loop-step.s1 .cat-loop-badge { background: #FF77FF; }
.cat-loop-step.s2 .cat-loop-badge { background: #C864E6; }
.cat-loop-step.s3 .cat-loop-badge { background: #6B7FD1; }
.cat-loop-eyebrow {
  font-family: var(--ff-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ifx-ink-soft);
}
.cat-loop-name {
  font-family: var(--ff-display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--ifx-ink);
}
.cat-loop-desc {
  font-size: 13px;
  line-height: 1.45;
  color: var(--ifx-ink-soft);
  flex: 1;
}
.cat-loop-mech {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px dashed rgba(25, 40, 107, 0.10);
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--ifx-ink);
}
.cat-loop-mech .k {
  display: block;
  font-family: var(--ff-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ifx-magenta-deep);
  margin-bottom: 2px;
}

/* ============================================================
   PARALLEL-LANES VIZ — Benefit Reassignment
   ============================================================ */
.cat-lanes {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cat-lane {
  display: grid;
  grid-template-columns: 150px 1fr 150px;
  gap: 14px;
  align-items: stretch;
}
.cat-lane-side, .cat-lane-out {
  padding: 12px 14px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.cat-lane-side .l-num, .cat-lane-out .lbl {
  font-family: var(--ff-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.cat-lane-side .l-name {
  font-family: var(--ff-display);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.cat-lane-out .val {
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--ifx-ink);
  font-weight: 600;
}
.cat-lane-nodes {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid rgba(25, 40, 107, 0.08);
  border-radius: 10px;
  overflow-x: auto;
}
.cat-lane-nd {
  padding: 9px 12px;
  background: #fff;
  border: 1px solid rgba(25, 40, 107, 0.12);
  border-radius: 7px;
  font-size: 12px;
  color: var(--ifx-navy);
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
  flex: 0 1 auto;
}
.cat-lane-nd.hl {
  background: var(--ifx-navy);
  border-color: var(--ifx-navy);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(13, 9, 54, 0.18);
}
.cat-lane-nd.mag {
  background: rgba(255, 119, 255, 0.10);
  border-color: rgba(255, 119, 255, 0.45);
  color: var(--ifx-magenta-deep);
  font-weight: 600;
}
.cat-lane-arr {
  font-size: 13px;
  color: rgba(25, 40, 107, 0.4);
  flex-shrink: 0;
}
.cat-lane-arr.loop { color: var(--ifx-magenta); font-weight: 700; }

.cat-lane.tone-patient .cat-lane-side { background: rgba(116, 168, 255, 0.12); color: var(--ifx-navy); border-left: 3px solid #74A8FF; }
.cat-lane.tone-patient .cat-lane-side .l-num { color: #4A7BCC; }
.cat-lane.tone-ifx     .cat-lane-side { background: var(--ifx-navy); color: #fff; }
.cat-lane.tone-ifx     .cat-lane-side .l-num { color: var(--ifx-magenta); }
.cat-lane.tone-risk    .cat-lane-side { background: rgba(255, 119, 255, 0.10); color: var(--ifx-navy); border-left: 3px solid var(--ifx-magenta); }
.cat-lane.tone-risk    .cat-lane-side .l-num { color: var(--ifx-magenta-deep); }
.cat-lane.tone-pharm   .cat-lane-side { background: rgba(109, 78, 224, 0.10); color: var(--ifx-navy); border-left: 3px solid #6D4EE0; }
.cat-lane.tone-pharm   .cat-lane-side .l-num { color: #6D4EE0; }

.cat-lane-out {
  background: rgba(255, 119, 255, 0.06);
  border: 1px solid rgba(255, 119, 255, 0.25);
}
.cat-lane-out .lbl { color: var(--ifx-magenta-deep); }

.cat-lanes-finale {
  margin-top: 10px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: center;
  padding: 18px 24px;
  background: linear-gradient(90deg, rgba(255,119,255,0.10) 0%, rgba(109,78,224,0.06) 100%);
  border: 1px solid rgba(255, 119, 255, 0.30);
  border-radius: 14px;
}
.cat-lanes-finale .big {
  font-family: var(--ff-display);
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  color: var(--ifx-magenta);
  letter-spacing: -0.03em;
}
.cat-lanes-finale .lbl {
  display: block;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ifx-navy);
  font-weight: 700;
  margin-bottom: 4px;
}
.cat-lanes-finale .note {
  font-size: 13px;
  line-height: 1.4;
  color: var(--ifx-ink-soft);
}

@media (max-width: 900px) {
  .cat-loop { grid-template-columns: 1fr; }
  .cat-lane { grid-template-columns: 1fr; }
  .cat-ledger-split { grid-template-columns: 1fr; }
}

/* Status pill (e.g. "In development · Q3 2026") shown next to the detail title */
.cat-detail-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  margin-left: 12px;
  vertical-align: 6px;
}
.cat-detail-status.live {
  background: rgba(76, 217, 155, 0.18);
  color: #1F8B5C;
  border: 1px solid rgba(76, 217, 155, 0.45);
}
.cat-detail-status.dev {
  background: rgba(255, 119, 255, 0.14);
  color: var(--ifx-magenta-deep);
  border: 1px solid rgba(255, 119, 255, 0.45);
}

/* ============================================================
   PIPELINE VIZ — OCR + Document Intelligence (3-step input → AI → output)
   ============================================================ */
.cat-pipeline {
  margin-top: 28px;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 14px;
  align-items: stretch;
}
.cat-pipeline-arr {
  display: grid;
  place-items: center;
  font-size: 24px;
  color: var(--ifx-magenta);
  font-weight: 300;
  align-self: center;
}
.cat-pipeline-step {
  position: relative;
  padding: 22px 22px 20px;
  background: #fff;
  border: 1px solid rgba(25, 40, 107, 0.10);
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(13, 9, 54, 0.04);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cat-pipeline-step::before {
  content: "";
  position: absolute;
  top: 0; left: 22px; right: 22px; height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--ifx-blue);
}
.cat-pipeline-step.middle::before { background: var(--ifx-magenta); }
.cat-pipeline-step.ok::before { background: linear-gradient(90deg, var(--ifx-magenta), var(--ifx-violet)); }
.cat-pipeline-step .lbl {
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ifx-navy);
}
.cat-pipeline-step .v {
  font-size: 14px;
  line-height: 1.4;
  color: var(--ifx-ink);
  font-weight: 500;
}
.cat-pipeline-step.ok .v { color: var(--ifx-magenta-deep); font-weight: 600; }
.cat-pipeline-step .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cat-pipeline-step .tags span {
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255, 119, 255, 0.12);
  color: var(--ifx-magenta-deep);
  border: 1px solid rgba(255, 119, 255, 0.4);
}

/* ============================================================
   NLQ VIZ — AI Query Engine (SQL → natural language)
   ============================================================ */
.cat-nlq {
  margin-top: 28px;
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 14px;
  justify-items: center;
}
.cat-nlq-code {
  width: 100%;
  max-width: 720px;
  background: var(--ifx-violet-deep);
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--ff-mono);
  font-size: 13px;
  line-height: 1.55;
  padding: 22px 26px;
  border-radius: 12px;
  white-space: pre-wrap;
  border: 1px solid rgba(255, 119, 255, 0.18);
  box-shadow: 0 8px 24px rgba(13, 9, 54, 0.18);
}
.cat-nlq-code .kw { color: var(--ifx-magenta); font-weight: 600; }
.cat-nlq-arr {
  font-size: 28px;
  color: var(--ifx-magenta);
  line-height: 1;
}
.cat-nlq-search {
  width: 100%;
  max-width: 720px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  background: #fff;
  border: 2px solid var(--ifx-magenta);
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(162, 38, 158, 0.18);
  font-size: 16px;
  color: var(--ifx-ink);
}
.cat-nlq-search .icon {
  color: var(--ifx-magenta);
  font-size: 22px;
  flex-shrink: 0;
}

/* ============================================================
   CALLSPIPE VIZ — AI Call Analysis (3-panel pipeline)
   ============================================================ */
.cat-callspipe {
  margin-top: 28px;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 12px;
  align-items: stretch;
}
.cat-callspipe-arr {
  display: grid;
  place-items: center;
  font-size: 24px;
  color: var(--ifx-magenta);
  font-weight: 300;
}
.cat-callspipe-panel {
  padding: 22px 22px;
  background: #fff;
  border: 1px solid rgba(25, 40, 107, 0.10);
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(13, 9, 54, 0.04);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cat-callspipe-panel .lbl {
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ifx-navy);
}
.cat-callspipe-panel.quote .v {
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--ifx-ink-soft);
}
.cat-callspipe-panel.tags-panel .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cat-callspipe-panel.tags-panel .tags span {
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255, 119, 255, 0.12);
  color: var(--ifx-magenta-deep);
  border: 1px solid rgba(255, 119, 255, 0.4);
}
.cat-callspipe-panel.bars-panel .bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 80px;
  padding: 4px 0;
}
.cat-callspipe-panel.bars-panel .bars div {
  flex: 1;
  background: linear-gradient(180deg, var(--ifx-magenta) 0%, var(--ifx-violet) 100%);
  border-radius: 3px 3px 0 0;
  min-height: 4px;
}

/* ============================================================
   SIMCURVES VIZ — AI Benefit Simulation (volatile vs predictable)
   ============================================================ */
.cat-simcurves {
  margin-top: 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.cat-simcurve {
  position: relative;
  background: #fff;
  border: 1px solid rgba(25, 40, 107, 0.10);
  border-radius: 14px;
  padding: 20px 22px 18px;
  box-shadow: 0 6px 18px rgba(13, 9, 54, 0.04);
}
.cat-simcurve.volatile { border-color: rgba(214, 69, 69, 0.30); background: #FFF7F7; }
.cat-simcurve.ok       { border-color: rgba(255, 119, 255, 0.45); }
.cat-simcurve .lbl {
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.cat-simcurve.volatile .lbl { color: #B83838; }
.cat-simcurve.ok       .lbl { color: var(--ifx-magenta-deep); }
.cat-simcurve svg {
  width: 100%;
  height: 80px;
  display: block;
}

@media (max-width: 760px) {
  .cat-pipeline,
  .cat-callspipe { grid-template-columns: 1fr; }
  .cat-pipeline-arr,
  .cat-callspipe-arr { transform: rotate(90deg); }
  .cat-simcurves { grid-template-columns: 1fr; }
}

/* ============================================================
   CALLOUT VIZ — ICP (big stat + quote + patent badge)
   ============================================================ */
.cat-callout {
  margin-top: 28px;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 2fr;
  gap: 22px;
  align-items: stretch;
}
.cat-callout-big {
  background: linear-gradient(155deg, var(--ifx-violet-deep) 0%, #0B0830 100%);
  border-radius: 14px;
  padding: 28px 26px;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.cat-callout-big::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--ifx-magenta), #E6A8FF, var(--ifx-blue));
}
.cat-callout-big .num {
  font-family: var(--ff-display);
  font-size: clamp(48px, 5vw, 72px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  background: linear-gradient(140deg, #fff 0%, #FFD8FF 60%, var(--ifx-magenta) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cat-callout-big .tag {
  margin-top: 8px;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ifx-magenta);
  font-weight: 700;
}
.cat-callout-big .patent {
  margin-top: 18px;
  align-self: flex-start;
  font-family: var(--ff-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  background: rgba(255, 119, 255, 0.18);
  border: 1px solid rgba(255, 119, 255, 0.35);
  padding: 5px 10px;
  border-radius: 999px;
}
.cat-callout-quote {
  background: #fff;
  border: 1px solid rgba(25, 40, 107, 0.10);
  border-left: 3px solid var(--ifx-magenta);
  border-radius: 0 12px 12px 0;
  padding: 20px 24px;
  font-style: italic;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ifx-ink);
  display: flex;
  align-items: center;
}
.cat-callout-quote strong { color: var(--ifx-navy); font-style: normal; font-weight: 700; }

/* ============================================================
   TWO-RULES VIZ — Benefit Design (Simple/Advanced 2-col)
   ============================================================ */
.cat-tworules {
  margin-top: 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.cat-tworules-col {
  background: #fff;
  border: 1px solid rgba(25, 40, 107, 0.10);
  border-radius: 14px;
  padding: 26px 26px 22px;
  position: relative;
  box-shadow: 0 6px 18px rgba(13, 9, 54, 0.04);
}
.cat-tworules-col.adv {
  background: linear-gradient(155deg, var(--ifx-navy), var(--ifx-blue));
  color: #fff;
  border: none;
}
.cat-tworules-col h3 {
  margin: 0 0 16px;
  font-family: var(--ff-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ifx-navy);
}
.cat-tworules-col.adv h3 { color: #fff; }
.cat-tworules-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cat-tworules-col li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ifx-ink);
}
.cat-tworules-col.adv li { color: rgba(255,255,255,0.88); }
.cat-tworules-col li::before {
  content: "+";
  color: var(--ifx-magenta);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.1;
  flex-shrink: 0;
}
.cat-tworules-tagline {
  margin-top: 16px;
  text-align: center;
  font-style: italic;
  font-size: 14px;
  color: var(--ifx-navy);
  background: rgba(255, 119, 255, 0.06);
  border: 1px solid rgba(255, 119, 255, 0.22);
  border-radius: 12px;
  padding: 14px 20px;
  grid-column: 1 / -1;
}

/* ============================================================
   PROGRAMS VIZ — Program Types (3-col)
   ============================================================ */
.cat-programs {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.cat-programs-col {
  background: #fff;
  border: 1px solid rgba(25, 40, 107, 0.10);
  border-radius: 14px;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 6px 18px rgba(13, 9, 54, 0.04);
  position: relative;
}
.cat-programs-col.alt {
  background: linear-gradient(155deg, var(--ifx-navy), var(--ifx-violet));
  color: #fff;
  border: none;
}
.cat-programs-col .num {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ifx-magenta);
}
.cat-programs-col h3 {
  margin: 0;
  font-family: var(--ff-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ifx-navy);
}
.cat-programs-col.alt h3 { color: #fff; }
.cat-programs-col ul {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cat-programs-col li {
  font-size: 13px;
  line-height: 1.4;
  color: var(--ifx-ink-soft);
  padding-left: 14px;
  position: relative;
}
.cat-programs-col.alt li { color: rgba(255,255,255,0.85); }
.cat-programs-col li::before {
  content: "•";
  color: var(--ifx-magenta);
  position: absolute;
  left: 0;
  font-weight: 700;
}

/* ============================================================
   UNIFIER VIZ — Dual-Benefit (inputs → core → output)
   ============================================================ */
.cat-unifier {
  margin-top: 28px;
  background: #fff;
  border: 1px solid rgba(25, 40, 107, 0.10);
  border-radius: 14px;
  padding: 28px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  box-shadow: 0 6px 18px rgba(13, 9, 54, 0.04);
}
.cat-unifier-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  width: 100%;
  max-width: 560px;
}
.cat-unifier-input {
  text-align: center;
  padding: 16px 18px;
  background: #F5EFFE;
  border: 1px solid rgba(162, 38, 158, 0.22);
  border-radius: 12px;
}
.cat-unifier-input .lbl {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ifx-magenta-deep);
  margin-bottom: 6px;
}
.cat-unifier-input .val {
  font-family: var(--ff-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--ifx-navy);
}
.cat-unifier-arrow {
  font-size: 24px;
  color: var(--ifx-magenta);
  line-height: 1;
}
.cat-unifier-core {
  text-align: center;
  padding: 22px 28px;
  background: linear-gradient(135deg, var(--ifx-navy), var(--ifx-violet));
  color: #fff;
  border-radius: 12px;
  min-width: 280px;
  border: 2px solid var(--ifx-magenta);
  box-shadow: 0 8px 24px rgba(162, 38, 158, 0.22);
}
.cat-unifier-core .t {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ifx-magenta);
}
.cat-unifier-core .v {
  font-family: var(--ff-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-top: 4px;
}
.cat-unifier-output {
  text-align: center;
  padding: 16px 22px;
  background: rgba(255, 119, 255, 0.10);
  border: 1px solid rgba(255, 119, 255, 0.45);
  border-radius: 12px;
  width: 100%;
  max-width: 560px;
}
.cat-unifier-output .lbl {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ifx-magenta-deep);
  margin-bottom: 4px;
}
.cat-unifier-output .val {
  font-family: var(--ff-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--ifx-navy);
}

/* ============================================================
   BAR-COMPARE VIZ — Rapid Launch (industry vs InfinityRx bars)
   ============================================================ */
.cat-barcompare {
  margin-top: 28px;
  background: #fff;
  border: 1px solid rgba(25, 40, 107, 0.10);
  border-radius: 14px;
  padding: 26px 28px 22px;
  box-shadow: 0 6px 18px rgba(13, 9, 54, 0.04);
}
.cat-barcompare-title {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ifx-navy);
  margin-bottom: 18px;
}
.cat-barcompare-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 18px;
  align-items: center;
  padding: 8px 0;
}
.cat-barcompare-row .lbl {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ifx-ink-soft);
}
.cat-barcompare-bar {
  position: relative;
  height: 36px;
  background: rgba(25, 40, 107, 0.06);
  border-radius: 6px;
  overflow: hidden;
}
.cat-barcompare-bar .fill {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  display: flex;
  align-items: center;
  padding: 0 14px;
  font-family: var(--ff-display);
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  border-radius: 6px;
}
.cat-barcompare-row.slow .fill {
  background: linear-gradient(90deg, #B83838 0%, #D64545 100%);
}
.cat-barcompare-row.slow .lbl { color: #B83838; }
.cat-barcompare-row.fast .fill {
  background: linear-gradient(90deg, var(--ifx-magenta) 0%, var(--ifx-magenta-deep) 100%);
  box-shadow: 0 0 18px rgba(255, 119, 255, 0.35);
}
.cat-barcompare-row.fast .lbl { color: var(--ifx-magenta-deep); }
.cat-barcompare-axis {
  margin-top: 16px;
  margin-left: 178px;
  display: flex;
  justify-content: space-between;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ifx-ink-soft);
}

/* ============================================================
   JOURNEY VIZ — 8-Stage Adherence Journey
   ============================================================ */
.cat-journey {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.cat-journey-stage {
  position: relative;
  background: #fff;
  border: 1px solid rgba(25, 40, 107, 0.10);
  border-radius: 14px;
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 4px 12px rgba(13, 9, 54, 0.04);
}
.cat-journey-stage::before {
  content: "";
  position: absolute;
  top: 0; left: 18px; right: 18px; height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--ifx-magenta);
}
.cat-journey-num {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ifx-magenta), var(--ifx-violet));
  color: #fff;
  font-family: var(--ff-display);
  font-size: 14px;
  font-weight: 700;
  display: grid;
  place-items: center;
}
.cat-journey-stage h4 {
  margin: 0;
  font-family: var(--ff-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--ifx-navy);
  line-height: 1.2;
}
.cat-journey-msg {
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--ifx-ink-soft);
  font-style: italic;
  background: #F8F6FE;
  border-radius: 6px;
  padding: 8px 10px;
}
@media (max-width: 1100px) { .cat-journey { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .cat-journey { grid-template-columns: 1fr; } }

/* ============================================================
   CHANNEL-GRID VIZ — Multi-Channel Enrollment
   ============================================================ */
.cat-channelgrid {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
.cat-channeltile {
  background: #fff;
  border: 1px solid rgba(25, 40, 107, 0.10);
  border-radius: 14px;
  padding: 18px 14px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 12px rgba(13, 9, 54, 0.04);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}
.cat-channeltile:hover {
  transform: translateY(-3px);
  border-color: var(--ifx-magenta);
}
.cat-channeltile .icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ifx-navy), var(--ifx-blue));
  color: #fff;
  display: grid;
  place-items: center;
}
.cat-channeltile .icon svg { width: 22px; height: 22px; }
.cat-channeltile .name {
  font-family: var(--ff-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--ifx-navy);
}
@media (max-width: 900px) { .cat-channelgrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .cat-channelgrid { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   SUPPORT-GRID VIZ — Member Services & Brand Support (2-col list)
   ============================================================ */
.cat-supportgrid {
  margin-top: 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.cat-supportgrid-col {
  background: #fff;
  border: 1px solid rgba(25, 40, 107, 0.10);
  border-radius: 14px;
  padding: 24px 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 6px 18px rgba(13, 9, 54, 0.04);
  position: relative;
}
.cat-supportgrid-col::before {
  content: "";
  position: absolute;
  top: 0; left: 24px; right: 24px; height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--ifx-magenta);
}
.cat-supportgrid-col h3 {
  margin: 0;
  font-family: var(--ff-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--ifx-navy);
}
.cat-supportgrid-col ul {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cat-supportgrid-col li {
  position: relative;
  padding-left: 22px;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--ifx-ink);
}
.cat-supportgrid-col li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--ifx-magenta);
  font-weight: 700;
}

/* ============================================================
   DASHBOARD VIZ — Real-Time Dashboards (mock Power BI surface)
   ============================================================ */
.cat-dashboard {
  margin-top: 28px;
  background: linear-gradient(155deg, var(--ifx-violet-deep), #0B0830);
  border: 1px solid rgba(255, 119, 255, 0.30);
  border-radius: 16px;
  padding: 22px 22px 18px;
  box-shadow: 0 12px 36px rgba(13, 9, 54, 0.18);
  color: #fff;
}
.cat-dash-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.cat-dash-tab {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.7);
}
.cat-dash-tab.active {
  background: var(--ifx-magenta);
  color: #fff;
  font-weight: 700;
}
.cat-dash-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
.cat-dash-kpi {
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 119, 255, 0.18);
  border-radius: 10px;
}
.cat-dash-kpi .k {
  font-family: var(--ff-mono);
  font-size: 9.5px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 6px;
}
.cat-dash-kpi .v {
  font-family: var(--ff-display);
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
}
.cat-dash-chart {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 120px;
  padding: 10px 4px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  border: 1px solid rgba(255, 119, 255, 0.12);
}
.cat-dash-chart div {
  flex: 1;
  background: linear-gradient(180deg, var(--ifx-magenta) 0%, var(--ifx-violet) 100%);
  border-radius: 4px 4px 0 0;
  min-height: 4px;
}
.cat-dash-filters {
  margin-top: 14px;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.cat-dash-filters strong {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 700;
}
@media (max-width: 760px) { .cat-dash-kpis { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   REPORTSTACK VIZ — GTN Attribution & Leakage (vertical stack)
   ============================================================ */
.cat-reportstack {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cat-reportstack-row {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 16px;
  align-items: center;
  padding: 16px 20px;
  background: #fff;
  border: 1px solid rgba(25, 40, 107, 0.10);
  border-radius: 12px;
  border-left: 3px solid var(--ifx-magenta);
  box-shadow: 0 4px 12px rgba(13, 9, 54, 0.04);
  transition: transform 0.3s var(--ease);
}
.cat-reportstack-row:hover { transform: translateX(4px); }
.cat-reportstack-row .name {
  font-family: var(--ff-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--ifx-navy);
  letter-spacing: -0.01em;
}
.cat-reportstack-row .desc {
  font-size: 13px;
  line-height: 1.4;
  color: var(--ifx-ink-soft);
}
@media (max-width: 760px) {
  .cat-reportstack-row { grid-template-columns: 1fr; gap: 6px; }
}

/* ============================================================
   COMPLIANCE VIZ — Regulatory Export Ready (3-col blocks)
   ============================================================ */
.cat-compliance {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.cat-compliance-col {
  background: #fff;
  border: 1px solid rgba(25, 40, 107, 0.10);
  border-radius: 14px;
  padding: 22px 22px 20px;
  position: relative;
  box-shadow: 0 6px 18px rgba(13, 9, 54, 0.04);
}
.cat-compliance-col::before {
  content: "";
  position: absolute;
  top: 0; left: 22px; right: 22px; height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--ifx-magenta);
}
.cat-compliance-col h3 {
  margin: 0 0 14px;
  font-family: var(--ff-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--ifx-navy);
}
.cat-compliance-col ul {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cat-compliance-col li {
  position: relative;
  padding-left: 18px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ifx-ink);
}
.cat-compliance-col li::before {
  content: "▸";
  position: absolute;
  left: 0;
  color: var(--ifx-magenta);
  font-weight: 700;
}

/* ============================================================
   SCREENING VIZ — Eligibility & Government Screening (3-col)
   ============================================================ */
.cat-screening {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.cat-screening-col {
  background: #fff;
  border: 1px solid rgba(25, 40, 107, 0.10);
  border-radius: 14px;
  padding: 22px 22px 20px;
  position: relative;
  box-shadow: 0 6px 18px rgba(13, 9, 54, 0.04);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cat-screening-col::before {
  content: "";
  position: absolute;
  top: 0; left: 22px; right: 22px; height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--ifx-magenta);
}
.cat-screening-icon {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ifx-navy), var(--ifx-blue));
  color: #fff;
}
.cat-screening-icon svg { width: 18px; height: 18px; }
.cat-screening-col h3 {
  margin: 0;
  font-family: var(--ff-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--ifx-navy);
  letter-spacing: -0.015em;
}
.cat-screening-col ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.cat-screening-col li {
  position: relative;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ifx-ink);
}
.cat-screening-col li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--ifx-magenta);
  font-weight: 700;
}

/* ============================================================
   NETWORKS VIZ — Pharmacy Networks (3-tier card stack)
   ============================================================ */
.cat-networks {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.cat-network-tier {
  background: #fff;
  border: 1px solid rgba(25, 40, 107, 0.10);
  border-radius: 14px;
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 6px 18px rgba(13, 9, 54, 0.04);
  position: relative;
}
.cat-network-tier.highlight {
  background: linear-gradient(155deg, var(--ifx-navy), var(--ifx-violet));
  color: #fff;
  border: none;
  box-shadow: 0 12px 32px rgba(13, 9, 54, 0.18);
}
.cat-network-tier .tier {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ifx-magenta-deep);
}
.cat-network-tier.highlight .tier { color: var(--ifx-magenta); }
.cat-network-tier .name {
  font-family: var(--ff-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--ifx-navy);
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.cat-network-tier.highlight .name { color: #fff; }
.cat-network-tier .desc {
  font-size: 13px;
  line-height: 1.45;
  color: var(--ifx-ink-soft);
}
.cat-network-tier.highlight .desc { color: rgba(255,255,255,0.85); }

/* ============================================================
   REDUNDANCY VIZ — dual switches + callout (Redundant Connectivity)
   ============================================================ */
.cat-redundancy {
  margin-top: 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.cat-switch {
  background: #fff;
  border: 1px solid rgba(25, 40, 107, 0.10);
  border-radius: 14px;
  padding: 22px 24px;
  position: relative;
  box-shadow: 0 6px 18px rgba(13, 9, 54, 0.04);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cat-switch::before {
  content: "";
  position: absolute;
  top: 0; left: 24px; right: 24px; height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, #4CD99B, var(--ifx-magenta));
}
.cat-switch .tag {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ifx-navy);
}
.cat-switch .name {
  font-family: var(--ff-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--ifx-navy);
  letter-spacing: -0.02em;
}
.cat-switch .status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: #1F8B5C;
  background: rgba(76, 217, 155, 0.18);
  border: 1px solid rgba(76, 217, 155, 0.40);
  padding: 4px 10px;
  border-radius: 999px;
  margin-top: 6px;
}
.cat-switch .status::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #4CD99B;
  box-shadow: 0 0 8px #4CD99B;
}
.cat-redundancy-callout {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 2fr;
  gap: 22px;
  margin-top: 4px;
}
.cat-redundancy-callout-big {
  background: linear-gradient(155deg, var(--ifx-violet-deep) 0%, #0B0830 100%);
  border-radius: 14px;
  padding: 22px 24px;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.cat-redundancy-callout-big::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--ifx-magenta), #E6A8FF, var(--ifx-blue));
}
.cat-redundancy-callout-big .num {
  font-family: var(--ff-display);
  font-size: clamp(56px, 5.5vw, 80px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  background: linear-gradient(140deg, #fff 0%, #FFD8FF 60%, var(--ifx-magenta) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cat-redundancy-callout-big .tag {
  margin-top: 8px;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ifx-magenta);
  font-weight: 700;
}
.cat-redundancy-callout-big .sub {
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255,255,255,0.72);
  line-height: 1.4;
}
.cat-redundancy-quote {
  background: #fff;
  border: 1px solid rgba(25, 40, 107, 0.10);
  border-left: 3px solid var(--ifx-magenta);
  border-radius: 0 12px 12px 0;
  padding: 20px 24px;
  font-style: italic;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ifx-ink);
  display: flex;
  align-items: center;
}

/* Shared narrow-width fallback for the wider new vizes */
@media (max-width: 900px) {
  .cat-callout    { grid-template-columns: 1fr; }
  .cat-tworules,
  .cat-programs,
  .cat-compliance,
  .cat-supportgrid,
  .cat-screening,
  .cat-networks,
  .cat-redundancy { grid-template-columns: 1fr; }
  .cat-redundancy-callout { grid-template-columns: 1fr; }
}
.flip-card {
  perspective: 1000px;
  aspect-ratio: 5 / 4;
  cursor: pointer;
}
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.55s cubic-bezier(0.34, 1.4, 0.64, 1);
  transform-style: preserve-3d;
}
.flip-card.flipped .flip-card-inner { transform: rotateY(180deg); }
.flip-card-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-family: var(--ff-body);
}
.flip-card-front {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 119, 255, 0.22);
  color: #fff;
  font-size: clamp(13px, 1.1vw, 17px);
  font-weight: 500;
  line-height: 1.32;
  text-align: left;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.flip-card-front::before {
  content: "•";
  color: var(--ifx-magenta);
  font-size: 1.7em;
  line-height: 0.5;
  margin-bottom: 10px;
}
.flip-card:hover .flip-card-front {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 119, 255, 0.5);
}
.flip-card-back {
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 119, 255, 0.45), transparent 65%),
    linear-gradient(155deg, var(--ifx-magenta) 0%, var(--ifx-violet) 100%);
  color: #fff;
  transform: rotateY(180deg);
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  border: 1px solid rgba(255, 119, 255, 0.6);
  box-shadow: 0 6px 20px rgba(162, 38, 158, 0.3);
}
.flip-card-back .fc-icon {
  width: clamp(22px, 2.4vw, 32px);
  height: clamp(22px, 2.4vw, 32px);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.4);
}
.flip-card-back .fc-icon svg {
  width: 60%;
  height: 60%;
  stroke: #fff;
}
.flip-card-back .fc-tag {
  font-family: var(--ff-mono);
  font-size: clamp(8.5px, 0.75vw, 10px);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.95;
}
.flywheel-drawer-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 119, 255, 0.4);
  background: rgba(13, 9, 54, 0.85);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 5;
  transition: all 0.3s var(--ease);
  line-height: 1;
  padding: 0;
}
.flywheel-drawer-close:hover {
  background: var(--ifx-magenta);
  color: var(--ifx-violet-deep);
  transform: rotate(90deg);
  border-color: var(--ifx-magenta);
}

/* Narrow-width font overrides intentionally removed — labels now scale with
   the wheel size via SVG user-unit font-size set in 03-render-flywheel.js. */

/* === 09-page-pains.css === */
/* =============================================================
   PAGE 4 — IMPACT (light, editorial — was "pains" / dark)
   ============================================================= */
#page-4 {
  background:
    radial-gradient(1000px 600px at 12% 16%, rgba(255, 119, 255, 0.05), transparent 55%),
    radial-gradient(900px 700px at 92% 88%, rgba(50, 74, 178, 0.06), transparent 60%),
    var(--ifx-lavender-2);
  color: var(--ifx-ink);
}
.pains-header {
  /* Unified eyebrow→title→subtitle scale + spacing — matches About Us
     (.proof-header) and Infrastructure (.platform-header). */
  margin: 0 auto 14px;
  max-width: 1500px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
}
.pains-header .eyebrow {
  color: var(--ifx-navy);
  margin-bottom: 14px;
}
.pains-title {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 44px);
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--ifx-navy);
  margin: 0;
}
.pains-title em {
  font-style: italic;
  color: var(--ifx-magenta-deep);
}
.pains-subtitle {
  /* Each of the two sentences must sit on its own single line. The <br/>
     between them gives the line break; nowrap stops mid-sentence wrapping. */
  color: var(--ifx-ink-soft);
  font-size: clamp(14px, 1.05vw, 17px);
  line-height: 1.5;
  margin: 14px 0 0;
  max-width: none;
  white-space: nowrap;
}
@media (max-width: 1200px) {
  /* On narrower viewports the lines won't fit — let them wrap naturally. */
  .pains-subtitle { white-space: normal; max-width: 60ch; }
}

/* 5 columns; lists start at the same y-line via shared min-height on the head. */
.pains-columns {
  flex: 1;
  max-width: 1500px;
  width: 100%;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 32px;
  min-height: 0;
  overflow: hidden;
}
@media (max-width: 1280px) { .pains-columns { gap: 24px; } }
@media (max-width: 1024px) {
  /* Switch to natural-flow stacking — content scrolls with the page. */
  .pains-columns {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    overflow: visible;
    flex: none;
  }
  .pain-column { min-height: 0; }
  .pain-col-head {
    height: auto;
    grid-template-rows: auto auto;
    gap: 8px;
  }
  .pain-col-tags {
    overflow: visible;
    flex: none;
  }
  .pain-tag { width: 100%; }
}
@media (max-width: 600px) { .pains-columns { grid-template-columns: 1fr; } }

.pain-column {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.pain-col-head {
  flex-shrink: 0;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(25, 40, 107, 0.18);
  position: relative;
  /* Fixed head height keeps the rule (break line) at the same y across all
     columns. Name (1 or 2 lines) sits at the top, tagline pinned to the
     bottom — so 1-line columns get the empty space above the rule, not below. */
  display: grid;
  grid-template-rows: 1fr auto;
  height: 92px;
}
.pain-col-head::before {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 36px; height: 2px;
  background: var(--ifx-magenta-deep);
}
.pain-col-name {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(18px, 1.5vw, 24px);
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ifx-navy);
  margin: 0;
  align-self: start;
}
.pain-col-tagline {
  font-family: var(--ff-body);
  font-style: italic;
  font-size: 13px;
  line-height: 1.35;
  color: var(--ifx-ink-soft);
  margin: 0;
  align-self: end;
}

.pain-col-tags {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  padding-right: 4px;
}
.pain-col-tags::-webkit-scrollbar { width: 4px; }
.pain-col-tags::-webkit-scrollbar-track { background: transparent; }
.pain-col-tags::-webkit-scrollbar-thumb { background: rgba(25, 40, 107, 0.20); border-radius: 999px; }

/* Pain tags — softer navy at rest, lighter still on hover. */
.pain-tag {
  position: relative;
  text-align: left;
  width: 96%;
  align-self: flex-start;
  padding: 10px 14px;
  background: linear-gradient(180deg, rgba(25, 40, 107, 0.92) 0%, rgba(19, 26, 78, 0.95) 100%);
  border: 1px solid rgba(25, 40, 107, 0.45);
  border-radius: 10px;
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: 13px;
  color: #fff;
  cursor: pointer;
  transition: all 0.25s var(--ease);
  line-height: 1.3;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(13, 9, 54, 0.14);
}
.pain-tag:hover {
  transform: translateX(3px);
  box-shadow: 0 6px 18px rgba(255, 119, 255, 0.22);
  border-color: var(--ifx-magenta-deep);
  background: linear-gradient(180deg, rgba(50, 74, 178, 0.85) 0%, rgba(25, 40, 107, 0.92) 100%);
}
.pain-tag:active { transform: translateX(0); }
.pain-tag::after {
  content: "→";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ifx-magenta);
  opacity: 0;
  transition: opacity 0.25s var(--ease);
  font-family: var(--ff-mono);
  font-weight: 700;
}
.pain-tag:hover::after { opacity: 1; }

/* Density rules for shorter laptop viewports. */
@media (max-height: 880px) {
  .pain-col-head { height: 80px; padding-bottom: 10px; margin-bottom: 12px; }
  .pain-col-name { font-size: clamp(16px, 1.35vw, 22px); }
  .pain-col-tagline { font-size: 12px; }
  .pain-tag { padding: 10px 14px; font-size: 13px; }
}

/* === 10-proof-card.css === */
/* =============================================================
   ISSUE / IMPACT / SOLUTION CARD (modal) — light theme
   ============================================================= */
.card-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8, 6, 42, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
}
.card-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}
.proof-card {
  max-width: 720px;
  width: 100%;
  max-height: 86vh;
  overflow-y: auto;
  background:
    radial-gradient(900px 500px at 80% 0%, rgba(255,119,255,0.05), transparent 60%),
    linear-gradient(160deg, #FFFFFF 0%, var(--ifx-lavender-2) 100%);
  border: 1px solid rgba(25, 40, 107, 0.10);
  border-radius: 16px;
  padding: 44px 48px;
  position: relative;
  transform: translateY(20px) scale(0.96);
  opacity: 0;
  transition: transform 0.4s var(--ease), opacity 0.3s var(--ease);
  box-shadow: 0 24px 80px rgba(13, 9, 54, 0.30);
  scrollbar-width: thin;
}
.card-backdrop.open .proof-card {
  transform: translateY(0) scale(1);
  opacity: 1;
}
@media (max-width: 720px) {
  .proof-card { padding: 30px 26px; }
}
.proof-card::-webkit-scrollbar { width: 5px; }
.proof-card::-webkit-scrollbar-thumb { background: rgba(255,119,255,0.30); border-radius: 999px; }

.proof-close {
  position: absolute;
  top: 18px; right: 18px;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(25, 40, 107, 0.18);
  background: #fff;
  color: var(--ifx-ink);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all 0.3s var(--ease);
  font-size: 20px;
  font-weight: 300;
  line-height: 1;
  box-shadow: 0 4px 12px rgba(13, 9, 54, 0.10);
}
.proof-close:hover {
  border-color: var(--ifx-magenta);
  background: var(--ifx-magenta);
  color: #fff;
  transform: rotate(90deg);
}

.proof-pain-headline {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--ifx-navy);
  margin: 0 0 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(25, 40, 107, 0.10);
}

.proof-section { margin-bottom: 18px; }
.proof-section:last-child { margin-bottom: 0; }
.proof-section-label {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ifx-navy);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.proof-section-label::before {
  content: "";
  width: 22px; height: 2px;
  background: var(--ifx-magenta-deep);
}

.proof-pain-body,
.proof-impact {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ifx-ink);
  margin: 0;
}

/* Solution wrapper — pink rail + glow on the outside, dark gradient inside so
   the actual solution copy pops as the answer. */
.proof-solution-wrap {
  position: relative;
  margin: 0 0 12px;
  padding: 4px;
  background: linear-gradient(135deg, rgba(162, 38, 158, 0.32) 0%, rgba(50, 74, 178, 0.18) 100%);
  border-radius: 14px;
  box-shadow: 0 6px 22px rgba(162, 38, 158, 0.20);
}
.proof-solution-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  border: 1px solid rgba(162, 38, 158, 0.55);
  pointer-events: none;
}
.proof-mechanism {
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
  padding: 18px 22px;
  background:
    radial-gradient(600px 300px at 80% 0%, rgba(255, 119, 255, 0.18), transparent 60%),
    linear-gradient(155deg, var(--ifx-violet-deep) 0%, #0B0830 100%);
  border-radius: 11px;
  margin: 0;
  border-left: 3px solid var(--ifx-magenta);
}
.proof-mechanism strong { color: #fff; font-weight: 700; }
.proof-mechanism em { color: var(--ifx-magenta); font-style: italic; }

/* Solution viz — sits inside the same dark wrapper, separated by a hairline. */
.proof-solution-viz {
  margin: 0;
  padding: 14px 22px 18px;
  background:
    radial-gradient(600px 300px at 20% 100%, rgba(50, 74, 178, 0.30), transparent 60%),
    linear-gradient(155deg, #0B0830 0%, var(--ifx-violet-deep) 100%);
  border-radius: 0 0 11px 11px;
  border-top: 1px dashed rgba(255, 119, 255, 0.22);
  border-left: 3px solid var(--ifx-magenta);
}
/* When a viz is rendered, the JS toggles `.has-viz` on the wrap so the
   mechanism block flattens its bottom corners. Avoiding :has() keeps the
   rule compatible with older mobile browsers. */
.proof-solution-wrap.has-viz .proof-mechanism {
  border-radius: 11px 11px 0 0;
}

/* --- Viz kinds --- */
.proof-viz {
  display: flex;
  gap: 12px;
  align-items: stretch;
  flex-wrap: wrap;
}
.proof-viz-stat {
  align-items: baseline;
  gap: 14px;
}
.proof-viz-stat .pv-num {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 36px;
  letter-spacing: -0.025em;
  line-height: 1;
  background: linear-gradient(140deg, #fff 0%, #FFD8FF 50%, var(--ifx-magenta) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.proof-viz-stat .pv-tag {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

.proof-viz-compare {
  align-items: stretch;
}
.proof-viz-compare .pv-col {
  flex: 1;
  padding: 12px 14px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.proof-viz-compare .pv-before {
  background: rgba(214, 69, 69, 0.10);
  border: 1px solid rgba(214, 69, 69, 0.30);
}
.proof-viz-compare .pv-after {
  background: rgba(255, 119, 255, 0.12);
  border: 1px solid rgba(255, 119, 255, 0.45);
}
.proof-viz-compare .pv-l {
  font-family: var(--ff-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}
.proof-viz-compare .pv-before .pv-l { color: #FF9B9B; }
.proof-viz-compare .pv-after  .pv-l { color: var(--ifx-magenta); }
.proof-viz-compare .pv-v {
  font-family: var(--ff-display);
  font-size: 16px;
  color: #fff;
  font-weight: 600;
  line-height: 1.2;
}
.proof-viz .pv-arr {
  display: grid;
  place-items: center;
  font-size: 18px;
  color: var(--ifx-magenta);
  align-self: center;
  flex-shrink: 0;
  width: 22px;
}

.proof-viz-flow {
  align-items: stretch;
}
.proof-viz-flow .pv-node {
  flex: 1;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.3;
  text-align: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 119, 255, 0.30);
  color: rgba(255, 255, 255, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
}
.proof-viz-flow .pv-node.hero {
  background: linear-gradient(135deg, var(--ifx-magenta), var(--ifx-magenta-deep));
  border-color: var(--ifx-magenta);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(255, 119, 255, 0.35);
}

.proof-viz-bullets {
  flex-direction: column;
  gap: 6px;
}
.proof-viz-bullets .pv-bullet {
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.88);
  padding-left: 4px;
}
.proof-viz-bullets .pv-bullet::first-letter { color: var(--ifx-magenta); font-weight: 700; }
.proof-stat {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 16px;
  font-style: italic;
  color: var(--ifx-magenta-deep);
  line-height: 1.4;
  margin: 0;
  padding: 6px 4px 0;
}
.proof-stat::before {
  content: "“";
  font-family: var(--ff-display);
  font-size: 28px;
  color: var(--ifx-magenta);
  vertical-align: -6px;
  margin-right: 0;
  opacity: 0.7;
}
.proof-stat::after {
  content: "”";
  font-family: var(--ff-display);
  font-size: 28px;
  color: var(--ifx-magenta);
  vertical-align: -6px;
  margin-left: 0;
  opacity: 0.7;
}

.proof-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,119,255,0.15);
  border: 1px solid var(--ifx-magenta);
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ifx-magenta-deep);
  font-weight: 700;
  margin-left: 10px;
  vertical-align: middle;
}
.proof-status-badge::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--ifx-magenta);
  box-shadow: 0 0 6px var(--ifx-magenta);
}

/* === 11-hint-bar.css === */
/* =============================================================
   Hint bar at bottom of cover page
   ============================================================= */
.scroll-hint {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  animation: rise 1s var(--ease) 1.8s backwards;
}
.scroll-hint .line {
  width: 1px; height: 28px;
  background: linear-gradient(180deg, transparent, var(--ifx-magenta));
  animation: hintLine 2s ease-in-out infinite;
  transform-origin: top;
}
@keyframes hintLine {
  0%   { transform: scaleY(0); opacity: 0; }
  50%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

/* === 12-page-close.css === */
/* =============================================================
   PAGE 5 — CLOSE (dark, hero, "let's partner")
   The slide that stays on screen while the room talks. Built to
   feel inevitable: big partnership statement, four reasons, contact.
   ============================================================= */
.close-page {
  /* Same gradient family as the cover so the deck closes where it opened. */
  background:
    radial-gradient(1100px 600px at 82% 28%, rgba(255, 119, 255, 0.16), transparent 55%),
    radial-gradient(900px 700px at 18% 78%, rgba(50, 74, 178, 0.36), transparent 60%),
    linear-gradient(180deg, #0D0936 0%, #100A3F 60%, #0B0830 100%);
  position: relative;
  /* Only clip horizontally — vertical clipping (the previous `overflow: hidden`
     shorthand) overrode `.page { overflow-y: auto }` and broke inner-page
     scroll on phones where the contact card extends below the fold. */
  overflow-x: hidden;
  color: #fff;
}
.close-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  mix-blend-mode: screen;
}
.close-wave {
  width: 100%;
  height: 100%;
  display: block;
}
.close-wave path {
  animation: closeWaveDrift 9s ease-in-out infinite alternate;
}
@keyframes closeWaveDrift {
  0%   { transform: translateY(0)   scaleY(1); }
  100% { transform: translateY(-12px) scaleY(1.04); }
}

/* Layout: 2-column hero — narrative left, contact card right.
   align-self:center vertically centers the whole grid between the topnav and
   the fixed footer. The right card matches the exact height of the left
   column (headline + reasons grid) — no taller. */
.close-grid {
  position: relative;
  z-index: 2;
  margin: auto;
  max-width: 1500px;
  width: 100%;
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 56px;
  align-items: stretch;
}
.close-left {
  display: flex;
  flex-direction: column;
}
@media (max-width: 1024px) {
  /* Stack: headline + reasons on top, contact card below — natural scroll. */
  .close-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: start;
    margin: 0;
    padding-top: 12px;
  }
  .close-right { justify-content: flex-start; }
  .close-contact { max-width: 540px; }
}

/* ---- LEFT column ---- */
.close-eyebrow {
  color: var(--ifx-magenta);
  margin-bottom: 18px;
}
.close-title {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(40px, 5.0vw, 72px);
  letter-spacing: -0.035em;
  line-height: 1.04;
  color: #fff;
  margin: 0 0 36px;
}
.close-title em {
  font-style: italic;
  background: linear-gradient(140deg, var(--ifx-magenta) 0%, #FFD8FF 50%, #fff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.close-reasons-label {
  font-family: var(--ff-mono);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 16px;
}
/* Wraps the 4-reason grid in the same dark gradient + magenta border
   treatment used by the contact card on the right, so the two halves
   read as a matched pair. */
.close-reasons {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 22px 22px;
  border-radius: 18px;
  background:
    radial-gradient(600px 400px at 20% 20%, rgba(255, 119, 255, 0.18), transparent 60%),
    linear-gradient(155deg, var(--ifx-violet-deep) 0%, #0B0830 100%);
  border: 1px solid rgba(255, 119, 255, 0.35);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45), 0 0 60px rgba(255, 119, 255, 0.14);
  overflow: hidden;
}
.close-reasons::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--ifx-magenta), #E6A8FF, var(--ifx-blue));
}
@media (max-width: 720px) { .close-reasons { grid-template-columns: 1fr; padding: 18px; } }
.close-reason {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 119, 255, 0.18);
  border-radius: 12px;
  transition: all 0.3s var(--ease);
}
.close-reason:hover {
  background: rgba(255, 119, 255, 0.06);
  border-color: rgba(255, 119, 255, 0.4);
  transform: translateY(-2px);
}
.close-reason .n {
  font-family: var(--ff-display);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ifx-magenta);
}
.close-reason .t strong {
  display: block;
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: 16.5px;
  color: #fff;
  letter-spacing: -0.005em;
  line-height: 1.25;
  margin-bottom: 5px;
}
.close-reason .t span {
  display: block;
  font-size: 14px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.82);
}

/* ---- RIGHT column: Contact card stretches to match left column height. ---- */
.close-right {
  display: flex;
  justify-content: center;
  align-items: stretch;
}
.close-contact {
  position: relative;
  width: 100%;
  max-width: 480px;
  padding: 36px 36px 28px;
  border-radius: 18px;
  background:
    radial-gradient(600px 400px at 80% 20%, rgba(255, 119, 255, 0.22), transparent 60%),
    linear-gradient(155deg, var(--ifx-violet-deep) 0%, #0B0830 100%);
  border: 1px solid rgba(255, 119, 255, 0.35);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45), 0 0 60px rgba(255, 119, 255, 0.18);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.close-contact .close-rows {
  flex: 1;
  justify-content: center;
}
.close-contact::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--ifx-magenta), #E6A8FF, var(--ifx-blue));
}
.close-contact-label {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ifx-magenta);
  margin-bottom: 14px;
}
.close-contact-logo {
  /* Full lockup sits between the Contact label and the tagline. Aligns
     flush-left with the rest of the card text (label, tagline, rows). */
  width: 141px;
  height: auto;
  color: #fff;
  margin: 0 0 12px;
  align-self: flex-start;
  filter: drop-shadow(0 4px 18px rgba(255, 119, 255, 0.35));
}
.close-contact-logo img,
.close-contact-logo svg {
  width: 100%;
  height: auto;
  display: block;
}
.close-contact-name {
  font-family: var(--ff-display);
  font-size: clamp(34px, 3.4vw, 48px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #fff;
  margin: 0 0 6px;
}
.close-contact-tag {
  font-style: italic;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 24px;
}

.close-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 22px;
}
.close-row {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  align-items: center;
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.92);
}
.close-row.close-row-multi {
  align-items: flex-start;
  line-height: 1.45;
}
.close-row .ic {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 119, 255, 0.14);
  border: 1px solid rgba(255, 119, 255, 0.30);
  color: var(--ifx-magenta);
  flex-shrink: 0;
}
.close-row .ic svg { width: 14px; height: 14px; }
.close-row .v { font-family: var(--ff-body); font-weight: 500; }

/* Certifications strip — replaced the SOC/HIPAA/Patent text chips with a
   single composite image (certifications-dark.png) injected by JS. */
.close-certs {
  padding-top: 18px;
  border-top: 1px solid rgba(255, 119, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.close-certs img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-height: 880px) {
  .close-title { font-size: clamp(34px, 4.2vw, 56px); margin-bottom: 24px; }
  .close-reason { padding: 12px 14px; }
  .close-contact { padding: 28px 30px 22px; }
  .close-contact-name { font-size: clamp(28px, 3vw, 42px); }
}