/* ============================================================================
   Futurum Custom Research — "Living Research" Design System
   Shared by both the Living Research and BEV Calculator experiences.
   Brand tokens sourced from the official Futurum 2026 template.
   ========================================================================== */

/* Self-contained: Urbanist (the Futurum web brand face) is bundled locally as
   variable-weight woff2 — no external font CDN — so it renders identically for
   everyone on Netlify, regardless of what's installed. Geometric system fonts
   remain as fallback if the files are ever missing. */
@font-face {
  font-family: 'Urbanist';
  src: url('../fonts/Urbanist-roman-VF.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Urbanist';
  src: url('../fonts/Urbanist-italic-VF.woff2') format('woff2');
  font-weight: 100 900; font-style: italic; font-display: swap;
}

/* ----------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand core */
  --navy:        #001740;   /* primary brand navy */
  --navy-700:    #042554;
  --navy-600:    #0a2d63;
  --teal:        #00707A;   /* heading / accent teal */
  --teal-300:    #2fb3bd;
  --blue:        #36A8DF;   /* bright data-viz accent */
  --blue-300:    #7cc8ef;

  /* Status */
  --green:       #2bbf7a;
  --green-300:   #6fe0ad;
  --amber:       #f5b14c;
  --red:         #ef6a6a;

  /* Dark theme surfaces */
  --bg:          #00112f;
  --bg-grad-1:   #00204f;
  --bg-grad-2:   #00102c;
  --surface:     rgba(255,255,255,.045);
  --surface-2:   rgba(255,255,255,.07);
  --surface-3:   rgba(255,255,255,.10);
  --border:      rgba(255,255,255,.11);
  --border-2:    rgba(255,255,255,.18);

  /* Text */
  --text:        #eaf1fb;
  --text-soft:   #c4d2e8;
  --muted:       #93a6c4;
  --muted-2:     #6b80a3;

  /* Type — Urbanist is the Futurum digital/web brand face; use it consistently
     for both display and body so the mockup mirrors futurumgroup.com. Falls back
     to geometric system fonts where Urbanist isn't installed. */
  --font-display: 'Urbanist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Urbanist', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Geometry */
  --radius:      16px;
  --radius-sm:   10px;
  --radius-lg:   24px;
  --maxw:        1240px;
  --shadow:      0 18px 50px -20px rgba(0,0,0,.6);
  --shadow-sm:   0 8px 24px -14px rgba(0,0,0,.55);
}

/* ----------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background:
    radial-gradient(1200px 700px at 80% -10%, rgba(54,168,223,.16), transparent 60%),
    radial-gradient(900px 600px at 0% 0%, rgba(0,112,122,.18), transparent 55%),
    linear-gradient(180deg, var(--bg-grad-1) 0%, var(--bg) 40%, var(--bg-grad-2) 100%);
  background-attachment: fixed;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
h1,h2,h3,h4,h5 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
a { color: var(--blue-300); text-decoration: none; }
a:hover { text-decoration: underline; }
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(18px, 4vw, 40px); }
.muted { color: var(--muted); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: .16em; font-size: 12px;
  color: var(--teal-300);
}
/* Eyebrow leading icon (e.g. the ROI Spectrum prism mark) — sized to the text,
   centered by the eyebrow's inline-flex + gap. */
.eyebrow__ico { width: 16px; height: 16px; flex: none; }
/* Concentric-ring radial (live customresearch.futurumgroup.com hero mark): used
   on the LR eyebrow (rings + trailing fade line) and in the FAB toggle (rings
   only). Slow staggered ring pulse; the per-ring delays are shared by both. */
/* Larger, and pulled left by ~half the circle so its centerpoint lands on the
   title's left margin (left half hangs into the margin, line runs right to the
   text) — matching the live hero. viewBox 74×48, circle center at x=24 →
   rendered ~20px in, so margin-left:-20px aligns it to the eyebrow origin. */
.eyebrow__radial { width: 60px; height: 39px; flex: none; overflow: visible; margin-left: -20px; margin-right: -2px; }
.eyebrow__radial .lr-ring { opacity: .16; animation: lrRingPulse 6s ease-in-out infinite; }
/* Absolutely centered in the toggle so the larger radial can't drift off-center
   from grid/baseline quirks. */
.fabcluster__ico.fabcluster__radial { width: 52px; height: 52px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.fabcluster__radial .lr-ring { opacity: .4; stroke-width: 1px; animation: fabRingPulse 6s ease-in-out infinite; }
/* Stagger the rings outward (center → edge). Declared AFTER the `animation`
   shorthand and scoped per context, so the shorthand doesn't reset delay to 0
   (which made all rings pulse in unison). */
.eyebrow__radial .lr-ring.r2, .fabcluster__radial .lr-ring.r2 { animation-delay: .6s; }
.eyebrow__radial .lr-ring.r3, .fabcluster__radial .lr-ring.r3 { animation-delay: 1.2s; }
.eyebrow__radial .lr-ring.r4, .fabcluster__radial .lr-ring.r4 { animation-delay: 1.8s; }
.eyebrow__radial .lr-ring.r5, .fabcluster__radial .lr-ring.r5 { animation-delay: 2.4s; }
@keyframes lrRingPulse { 0%, 100% { opacity: .12; } 50% { opacity: .62; } }
@keyframes fabRingPulse { 0%, 100% { opacity: .26; } 50% { opacity: .66; } }
@media (prefers-reduced-motion: reduce) {
  .lr-ring { animation: none !important; }
  .eyebrow__radial .lr-ring { opacity: .32; }
  .fabcluster__radial .lr-ring { opacity: .5; }
}
.section { padding-block: clamp(36px, 6vw, 72px); }
.section-tight { padding-block: clamp(24px, 4vw, 44px); }
.hidden { display: none !important; }

/* ----------------------------------------------------------------------------
   3. Ticker bar
   -------------------------------------------------------------------------- */
.ticker {
  background: linear-gradient(90deg, var(--navy) 0%, var(--navy-700) 100%);
  border-bottom: 1px solid var(--border);
  font-size: 13px; color: var(--text-soft); overflow: hidden; white-space: nowrap;
}
.ticker__track { display: inline-flex; align-items: center; gap: 60px; padding: 11px 0; animation: ticker 64s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__item { display: inline-flex; align-items: center; gap: 10px; }
.ticker__ico { display: inline-flex; color: var(--teal-300); }
.ticker__ico svg { width: 16px; height: 16px; display: block; }
.ticker__lab { color: var(--text-soft); }
.ticker__val { color: #fff; font-weight: 800; font-family: var(--font-display); }
.ticker__val.up { color: var(--green-300); }
.ticker__val.down { color: var(--amber); }
.ticker__item--stmt .ticker__ico { color: var(--amber); }
.ticker__item--stmt .ticker__stmt { color: #fff; font-weight: 700; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ----------------------------------------------------------------------------
   4. Header + primary tabs
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  backdrop-filter: blur(14px);
  background: rgba(0,11,30,.78);
  border-bottom: 1px solid var(--border);
}
.site-header__row { display: flex; align-items: center; gap: 24px; padding-block: 14px; }
.brand-logo { height: 30px; width: auto; flex: none; }
.brand-tag { font-family: var(--font-display); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); border-left: 1px solid var(--border-2); padding-left: 16px; }
.brand-tag b { color: var(--text); font-weight: 800; }
.header-spacer { flex: 1; }

.apptabs { display: inline-flex; gap: 6px; padding: 5px; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(142,0,64,.2); }
.apptab {
  appearance: none; border: 0; cursor: pointer;
  font-family: var(--font-display); font-weight: 800; font-size: 15px; letter-spacing: .01em;
  color: #fff; background: transparent;
  padding: 10px 20px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px;
  transition: all .2s ease;
}
.apptabs { cursor: pointer; }
.apptab { cursor: pointer; }
.apptab:hover { transform: scale(1.04); }
.apptab:not([aria-selected="true"]):hover { background: var(--surface-3); }
/* Demo switcher (Living Research ⟷ ROI Spectrum Live) uses Futurum's Pomegranate
   (the "Amplify" vertical, brand book v1.1) — a global meta control, deliberately
   distinct from the teal/blue of the in-experience navigation. White text ~9.4:1. */
.apptab[aria-selected="true"] { background: linear-gradient(135deg, #8e0040, #46162f); color: #fff; box-shadow: 0 8px 22px -8px rgba(142,0,64,.6); }
.apptab__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .85; }
/* subtle pulse on the active tab until the user interacts the first time */
.apptabs--pulse .apptab[aria-selected="true"] { animation: tabpulse 1.9s ease-in-out infinite; }
@keyframes tabpulse {
  0%   { box-shadow: 0 8px 22px -8px rgba(142,0,64,.6), 0 0 0 0 rgba(142,0,64,.5); }
  70%  { box-shadow: 0 8px 22px -8px rgba(142,0,64,.6), 0 0 0 10px rgba(142,0,64,0); }
  100% { box-shadow: 0 8px 22px -8px rgba(142,0,64,.6), 0 0 0 0 rgba(142,0,64,0); }
}
@media (prefers-reduced-motion: reduce) { .apptabs--pulse .apptab[aria-selected="true"] { animation: none; } }

/* ----------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  appearance: none; cursor: pointer; border: 1px solid var(--border-2);
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  color: var(--text); background: var(--surface-2);
  padding: 12px 20px; border-radius: 999px; display: inline-flex; align-items: center; gap: 9px;
  transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
  text-decoration: none;
}
.btn:hover { transform: translateY(-1px); text-decoration: none; }
.btn-primary { background: linear-gradient(135deg, var(--teal) 0%, var(--blue) 130%); border-color: transparent; color: #fff; box-shadow: var(--shadow-sm); }
.btn-ghost { background: transparent; }
.btn-ghost:hover { background: var(--surface); }
.btn-green { background: linear-gradient(135deg, var(--teal) 0%, var(--green) 110%); border-color: transparent; color: #fff; box-shadow: 0 14px 30px -12px rgba(43,191,122,.75); }
.btn-green:hover { filter: brightness(1.06); }
.btn-lg { padding: 15px 26px; font-size: 15.5px; }
.btn-sm { padding: 8px 14px; font-size: 13px; }
.btn-block { width: 100%; justify-content: center; }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

/* ----------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
/* Hero is a distinct full-bleed gradient banner (blue → blue, white text),
   visually separated from the small site-header above and the control bar below.
   Note: .hero__sub / .hero__cta / .hero__byline are reused elsewhere (e.g. the
   ROI case study inside .section); banner-only treatments are scoped to `.hero …`. */
.hero { position: relative; padding-block: clamp(30px, 4.2vw, 56px); overflow: hidden;
  background: linear-gradient(180deg, #062a6f 0%, #0c54ad 54%, #2f93e6 100%);
  border-bottom: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 22px 60px -34px rgba(0,0,0,.75);
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(820px 320px at 80% 0%, rgba(255,255,255,.14), transparent 68%);
}
.hero > .container { position: relative; z-index: 1; }
.hero h1 { font-size: clamp(32px, 4.6vw, 56px); margin-block: 6px 10px; max-width: 26ch; color: #fff; }
.hero__sub { font-size: clamp(16px, 2vw, 20px); color: var(--text-soft); max-width: 60ch; }
.hero__byline { display: flex; align-items: center; gap: 12px; margin-top: 18px; color: var(--muted); font-size: 14px; }
.hero__byline .avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--teal), var(--blue)); display: grid; place-items: center; color: #fff; font-family: var(--font-display); font-weight: 700; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* --- banner-scoped overrides (only the top hero, not reused classes) --- */
.hero .eyebrow { color: #bfe3ff; }
.hero .hero__sub { color: rgba(255,255,255,.9); }
.hero .hero__byline { color: rgba(255,255,255,.82); }
.hero .hero__byline b { color: #fff; }
.hero .btn-primary { background: #fff; color: var(--navy); border-color: transparent; box-shadow: 0 12px 30px -14px rgba(0,0,0,.5); }
.hero .btn-primary:hover { background: #eaf3ff; }
.hero .btn-ghost { border-color: rgba(255,255,255,.55); color: #fff; background: rgba(255,255,255,.06); }
.hero .btn-ghost:hover { background: rgba(255,255,255,.16); }
/* Research Updates panel sits on the banner: deeper-blue glass + white text */
.hero .livefeed-card { background: linear-gradient(160deg, rgba(0,42,104,.55), rgba(0,18,52,.62)); border-color: rgba(255,255,255,.2); color: #fff; backdrop-filter: blur(4px); }
.hero .livefeed-card h3 { color: #fff; }
.hero .livefeed-card .sub { color: rgba(255,255,255,.82); }
.hero .livefeed-card .livefeed-foot { color: rgba(255,255,255,.72); border-top-color: rgba(255,255,255,.18); }
.hero .livefeed-card .livefeed-foot b { color: #fff; }
.hero .livefeed-card .ingest__row { color: #fff; border-bottom-color: rgba(255,255,255,.14); }
.hero .livefeed-card .ingest__when { color: rgba(255,255,255,.68); }

/* ----------------------------------------------------------------------------
   7. Filters / selects
   -------------------------------------------------------------------------- */
.filters { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.field .help { cursor: help; color: var(--muted-2); border: 1px solid var(--border-2); border-radius: 50%; width: 15px; height: 15px; display: inline-grid; place-items: center; font-size: 10px; }
select, input[type="text"], input[type="number"], input[type="email"] {
  font-family: var(--font-body); font-size: 14px; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--border-2); border-radius: var(--radius-sm);
  padding: 10px 12px; min-width: 150px; outline: none;
}
select:focus, input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(54,168,223,.22); }
select option { color: #0a1830; }
.customized-for { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; font-size: 14px; color: var(--text-soft); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 7px 16px; }
.customized-for b { color: var(--teal-300); }

/* Control bar — the selectors (Living Research) / sub-nav (ROI Spectrum) strip
   that sits directly beneath the hero banner, as its own separated zone. */
.controlbar { background: rgba(255,255,255,.04); border-bottom: 1px solid var(--border); padding-block: 16px; }
.controlbar .pillnav { border-bottom: 0; padding-bottom: 0; }
.controlbar .customized-for { margin-top: 12px; }
/* control bar row: section nav on the left, filters on the right */
.controlbar__row { display: flex; align-items: center; justify-content: space-between; gap: 18px 24px; flex-wrap: wrap; }
.controlbar__row--nav { justify-content: flex-start; align-items: center; gap: 14px; }
.sectnav__label { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: .16em; font-size: 11px; color: var(--teal-300); flex: none; }
.controlbar { padding-block: 18px; }

/* customize trigger placed in the hero, under Research Updates */
.customize-trigger--hero { display: flex; flex-direction: column; align-items: stretch; gap: 10px; width: 100%; text-align: left; max-width: none;
  background: linear-gradient(135deg, var(--teal), var(--green)); border: 1px solid rgba(255,255,255,.2); border-radius: var(--radius); padding: 18px;
  box-shadow: 0 14px 30px -16px rgba(43,191,122,.6); }
.customize-trigger--hero:hover { filter: brightness(1.06); transform: translateY(-1px); border-color: rgba(255,255,255,.45); box-shadow: 0 18px 38px -16px rgba(43,191,122,.75); }
.customize-trigger--hero .ct-top { display: flex; align-items: center; gap: 10px; }
.customize-trigger--hero .customize-trigger__ico { color: #eafff5; font-size: 16px; }
.customize-trigger--hero .customize-trigger__lead { color: #fff; font-size: 17px; }
.customize-trigger--hero .customize-trigger__caret { color: #fff; margin-left: auto; }
.customize-trigger--hero .customize-trigger__sel { border-left: 0; padding-left: 0; white-space: normal; color: rgba(255,255,255,.92); font-size: 13px; }
.customize-trigger--hero .customize-trigger__sel b { color: #fff; }
/* ROI variant: single-line pill, with the current selections shown beneath it */
.customize-trigger--roi { flex-direction: row; align-items: center; gap: 12px; padding: 15px 20px; }
.customize-trigger--roi .customize-trigger__caret { margin-left: auto; }
.customize-sel { margin-top: 10px; text-align: right; color: rgba(255,255,255,.9); font-size: 13px; line-height: 1.7; }
.customize-sel b { color: #fff; }
/* match the customize box + summary to the ROI scale width (≤360px), right-aligned */
.hero-grid--roi .customize-trigger--roi, .hero-grid--roi .customize-sel { width: 100%; max-width: 360px; align-self: flex-end; }

/* photo headshot in the small hero byline avatar (replaces initials) */
.hero__byline .avatar--photo { background-image: none; background-size: cover; background-position: center; }
.controlbar__row .filters { flex-wrap: wrap; }
.controlbar .filters select { min-width: 130px; }   /* keep the four selects compact beside the pills */
.sectnav { display: flex; align-items: center; }

/* mobile section dropdown — mirrors the desktop pills, collapses to one menu */
.pillmenu { display: none; position: relative; }
.pillmenu__btn { appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 800; font-size: 14px; color: #fff; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 999px; padding: 10px 16px; }
.pillmenu__caret { color: var(--muted); font-size: 11px; transition: transform .2s ease; }
.pillmenu.open .pillmenu__caret { transform: rotate(180deg); }
.pillmenu__list { position: absolute; top: calc(100% + 6px); left: 0; z-index: 50; min-width: 230px; display: none; flex-direction: column; gap: 2px; background: #062a6f; border: 1px solid var(--border-2); border-radius: var(--radius-sm); padding: 6px; box-shadow: var(--shadow); }
.pillmenu.open .pillmenu__list { display: flex; }
.pillmenu__list button { appearance: none; cursor: pointer; text-align: left; border: 0; background: transparent; color: var(--text-soft); font-family: var(--font-display); font-weight: 700; font-size: 14px; padding: 10px 12px; border-radius: 8px; }
.pillmenu__list button:hover { background: var(--surface-2); color: #fff; }
.pillmenu__list button.is-active { background: linear-gradient(135deg, var(--teal), var(--blue)); color: #fff; }

@media (max-width: 860px) {
  .controlbar__row { align-items: stretch; gap: 12px; }
  .pillnav { display: none; }
  .pillmenu { display: block; }
}

/* ----------------------------------------------------------------------------
   8. Section pill nav (within an experience)
   -------------------------------------------------------------------------- */
.pillnav { display: flex; flex-wrap: wrap; gap: 10px; }
.pillnav button {
  appearance: none; cursor: pointer;
  font-family: var(--font-display); font-weight: 800; font-size: 14.5px; color: var(--text-soft);
  background: var(--surface-2); border: 1px solid var(--border-2);
  padding: 11px 20px; border-radius: 999px; transition: all .18s ease;
}
.pillnav button:hover { color: #fff; background: var(--surface-3); border-color: var(--blue); transform: translateY(-1px); }
.pillnav button.is-active { background: linear-gradient(135deg, var(--teal), var(--blue)); border-color: transparent; color: #fff; box-shadow: 0 10px 24px -10px rgba(54,168,223,.75); }
/* highlighted calculator pill — always bright green to draw attention */
.pillnav button.pill-cta { background: linear-gradient(135deg, var(--teal) 0%, var(--green) 115%); border-color: transparent; color: #fff; box-shadow: 0 10px 24px -10px rgba(43,191,122,.8); }
.pillnav button.pill-cta:hover { color: #fff; filter: brightness(1.06); }
.pillnav button.pill-cta svg { width: 16px; height: 16px; vertical-align: -3px; margin-right: 6px; }

/* ----------------------------------------------------------------------------
   9. Cards & grids
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px; box-shadow: var(--shadow-sm);
}
.card--pad-lg { padding: 28px; }
.card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.card h3 { font-size: 19px; }
.card .sub { color: var(--muted); font-size: 13px; margin-top: -2px; }

/* Metric cards */
.metric { background: linear-gradient(160deg, var(--surface-2), var(--surface)); }
.metric__label { color: var(--muted); font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.metric__value { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.05; margin: 8px 0 6px; }
.metric__delta { font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.metric__delta.up { color: var(--green-300); }
.metric__delta.down { color: var(--red); }

/* Tag chip */
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }
.chip-gain { background: rgba(43,191,122,.16); color: var(--green-300); }
.chip-invest { background: rgba(245,177,76,.16); color: var(--amber); }
.chip-teal { background: rgba(0,112,122,.22); color: var(--teal-300); }

/* ----------------------------------------------------------------------------
   10. Chart cards
   -------------------------------------------------------------------------- */
.chart-card .chart-wrap { position: relative; height: 320px; margin-top: 14px; }
.chart-card .chart-wrap.tall { height: 380px; }
/* Gentle highlight on hover for the charts + panels across the report and exec
   summary (chart cards, benefit-story cards, the bar-share graphic, financial
   cards, etc.), echoing the key-insight cards. */
.chart-card,
[data-roisection="report"] .card, [data-roisection="report"] .ro-graphic,
[data-roisection="case"] .card {
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.chart-card:hover,
[data-roisection="report"] .card:hover, [data-roisection="report"] .ro-graphic:hover,
[data-roisection="case"] .card:hover {
  border-color: rgba(54,168,223,.5); box-shadow: 0 18px 40px -22px rgba(54,168,223,.6); transform: translateY(-3px); }
.head-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.ask-ai-link { font-size: 12px; color: var(--blue-300); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.ask-ai-link:hover { text-decoration: underline; }

/* ----------------------------------------------------------------------------
   11. Decision point callout
   -------------------------------------------------------------------------- */
.decision {
  border-radius: var(--radius); padding: 26px 28px;
  background: linear-gradient(135deg, rgba(0,112,122,.22), rgba(54,168,223,.10));
  border: 1px solid var(--border-2); position: relative;
}
.decision::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 4px; border-radius: 4px; background: linear-gradient(var(--teal), var(--blue)); }
.decision .kicker { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: .14em; font-size: 11px; color: var(--teal-300); }
/* featured callout — lighter, punchier panel (matches Executive Insight) */
.decision.feature { background: linear-gradient(135deg, #17456f 0%, #0d3253 100%); border-color: var(--blue); box-shadow: 0 0 0 1px rgba(54,168,223,.25), 0 18px 44px -22px rgba(54,168,223,.5); }
.decision.feature .kicker { color: var(--blue-300); }
.decision.feature h4, .decision.feature p { color: #fff; }
.decision h4 { font-size: 20px; margin: 6px 0 8px; }
.decision p { color: var(--text-soft); margin: 0; }

/* ----------------------------------------------------------------------------
   12. Analyst feed
   -------------------------------------------------------------------------- */
.feed { display: flex; flex-direction: column; gap: 0; }
.feed-item { display: grid; grid-template-columns: 100px 1fr; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--border); }
.feed-item:last-child { border-bottom: 0; }
.feed-item .when { color: var(--muted); font-size: 13px; font-weight: 700; }
.feed-item .tag { display: inline-block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--blue-300); margin-bottom: 4px; }
.feed-item h4 { font-size: 16px; margin: 0 0 4px; }
.feed-item p { margin: 0; color: var(--text-soft); font-size: 14px; }

/* --- Living Research enhancements ------------------------------------- */
/* two-column hero: title block + live updates feed */
.hero-grid { display: grid; grid-template-columns: 1.9fr 1fr; gap: 36px; align-items: start; }
.hero-grid--roi { grid-template-columns: 1.5fr 1fr; gap: 60px; }
.livefeed-card { align-self: stretch; }
.livefeed-scroll { max-height: 150px; overflow: hidden; }
.hero-aside { display: flex; flex-direction: column; gap: 24px; align-self: stretch; }
.livefeed-foot { font-size: 12px; color: var(--muted); margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--border); }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }

/* live status bar */
.livebar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--text-soft); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 8px 16px; }
.livebar b { color: #fff; }
.livebar .sep { color: var(--muted-2); }
.livedot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); animation: lpulse 1.8s infinite; }
@keyframes lpulse { 0% { box-shadow: 0 0 0 0 rgba(43,191,122,.5);} 70% { box-shadow: 0 0 0 9px rgba(43,191,122,0);} 100% { box-shadow: 0 0 0 0 rgba(43,191,122,0);} }

/* analyst video embed */
.video-embed { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border-2); background: linear-gradient(135deg, #0c2f50, #06203f); min-height: 300px; display: flex; align-items: flex-end; }
.video-embed__poster { position: absolute; inset: 0; background: radial-gradient(600px 320px at 70% 20%, rgba(54,168,223,.28), transparent 60%); }
.video-embed__play { position: absolute; inset: 0; margin: auto; width: 76px; height: 76px; border-radius: 50%; border: 0; cursor: pointer; background: rgba(255,255,255,.94); color: #04193b; font-size: 26px; display: grid; place-items: center; box-shadow: var(--shadow); transition: transform .15s ease; }
.video-embed__play:hover { transform: scale(1.07); }
.video-embed__cap { position: relative; padding: 18px 20px; background: linear-gradient(0deg, rgba(0,17,47,.88), transparent); width: 100%; }
.video-embed__cap b { display: block; font-family: var(--font-display); }

/* key-stat inline chips in exec summary */
.keystats { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0 14px; }
.keystat { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 14px; min-width: 120px; }
.keystat .n { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--blue-300); line-height: 1.1; }
.keystat .l { color: var(--muted); font-size: 12px; margin-top: 2px; }

/* feed enhancements */
.feed-tag { display: inline-block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 5px; padding: 2px 9px; border-radius: 999px; }
.feed-tag.pov { background: rgba(54,168,223,.16); color: var(--blue-300); }
.feed-tag.data { background: rgba(43,191,122,.16); color: var(--green-300); }
.feed-tag.news { background: rgba(245,177,76,.16); color: var(--amber); }
.feed-link { font-size: 13px; color: var(--blue-300); }
.feed-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.feed-live { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--green-300); }

/* data ingestion log */
.ingest__row { display: grid; grid-template-columns: 16px 1fr auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.ingest__row:last-child { border-bottom: 0; }
.ingest__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal-300); }
.ingest__when { color: var(--muted); font-size: 12px; white-space: nowrap; }
.ingest__row.fresh { animation: ingfade .6s ease; }
@keyframes ingfade { from { opacity: 0; transform: translateY(-4px);} to { opacity: 1; transform: none;} }

/* customized-insight card uses the .exec-insight pop treatment already defined */

/* metric card benchmark footer (your profile vs top quartile) */
.metric__bench { display: flex; justify-content: space-between; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 11px; color: var(--muted); }
.metric__bench b { color: var(--text); font-family: var(--font-display); }

/* Key Insights three-thesis cards */
.keyinsight { border-top: 3px solid var(--blue); }
.keyinsight h4 { font-family: var(--font-display); font-size: 17px; margin: 0 0 8px; color: #fff; }
.keyinsight p { font-size: 14px; margin: 0; }

/* paired "what this means / what you should do" analysis */
.analysis__h { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.analysis__ico { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: linear-gradient(135deg, var(--teal), var(--blue)); color: #fff; font-size: 19px; flex: none; }
.analysis h3 { font-size: 21px; margin: 0; }
.analysis h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--teal-300); margin: 16px 0 4px; }
.analysis p { font-size: 14px; }

/* impact matrix indicators */
.impact-matrix td { vertical-align: middle; }
.impact-matrix b { white-space: nowrap; }

/* spectrum matrix (evaluation by benefit) */
.spectrum-matrix td { vertical-align: middle; }
.spectrum-matrix b { white-space: nowrap; }

/* case study tab */
.basis-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.basis-chip { font-size: 12px; font-weight: 700; color: var(--green-300); background: rgba(43,191,122,.12); border: 1px solid rgba(43,191,122,.3); border-radius: 999px; padding: 5px 12px; }
.pullquote { border-left: 3px solid var(--teal); }
.pullquote p { font-size: 15px; font-style: italic; color: #fff; margin: 0 0 8px; line-height: 1.5; }
.pullquote__who { font-size: 12px; color: var(--muted); font-weight: 700; }
.benefit-story h4 { font-family: var(--font-display); font-size: 18px; margin: 0 0 10px; }
.benefit-story .pp { display: flex; gap: 12px; margin-bottom: 12px; }
.benefit-story .pp__col { flex: 1; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; }
.benefit-story .pp__lab { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.benefit-story .pp__val { font-family: var(--font-display); font-weight: 800; font-size: 18px; margin-top: 3px; line-height: 1.1; }
.benefit-story .pp__val.proven { color: var(--green-300); }
.benefit-story .pp__val.projected { color: var(--blue-300); }
.benefit-story .benefit-quote { margin-top: 6px; font-size: 13px; font-style: italic; color: var(--text-soft); border-top: 1px solid var(--border); padding-top: 10px; }
.benefit-story .benefit-quote span { display: block; font-style: normal; color: var(--muted); font-weight: 700; margin-top: 4px; }

/* case study full-detail sections */
.cs-detail { border-top: 1px solid var(--border); margin-top: 32px; padding-top: 24px; scroll-margin-top: 80px; }
.cs-detail__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cs-detail__head h3 { font-size: 22px; margin: 0; }
.cs-detail__head .feed-link { background: none; border: 0; cursor: pointer; padding: 0; white-space: nowrap; }
.cs-theme { font-family: var(--font-display); font-size: 19px; font-weight: 800; color: var(--teal-300); margin: 22px 0 6px; }

/* spectrum quadrant (Speed × Scale) */
.quadrant { width: 100%; height: auto; display: block; margin-top: 8px; }

/* scenario range bars (Range of Outcomes) */
.scenarios { display: flex; flex-direction: column; gap: 20px; margin-top: 14px; }
.scenario__top { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; color: var(--text-soft); margin-bottom: 7px; }
.scenario__base { color: var(--blue-300); font-family: var(--font-display); }
.scenario__bar { position: relative; height: 12px; border-radius: 999px; background: linear-gradient(90deg, rgba(245,177,76,.55), rgba(54,168,223,.5) 50%, rgba(43,191,122,.6)); }
.scenario__marker { position: absolute; top: -3px; width: 4px; height: 18px; border-radius: 3px; background: #fff; box-shadow: 0 0 0 2px rgba(0,0,0,.35); transform: translateX(-50%); }
.scenario__ends { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 6px; }

/* ----------------------------------------------------------------------------
   13. Poll (peer benchmark)
   -------------------------------------------------------------------------- */
.poll__options { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; }
.poll__btn { flex: 1 1 140px; }
.poll__results { display: flex; flex-direction: column; gap: 12px; }
.poll__row .top { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 5px; }
.poll__bar { height: 10px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.poll__bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--teal), var(--blue)); width: 0; transition: width 1s cubic-bezier(.2,.8,.2,1); }
.poll__row.mine .poll__bar span { background: linear-gradient(90deg, var(--green), var(--green-300)); }
.poll__note { color: var(--muted); font-size: 12px; margin-top: 10px; }

/* ----------------------------------------------------------------------------
   14. Signal score cards
   -------------------------------------------------------------------------- */
.signal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.signal { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; }
.signal__top { display: flex; align-items: baseline; justify-content: space-between; }
.signal__name { font-family: var(--font-display); font-weight: 700; font-size: 17px; }
.signal__score { font-family: var(--font-display); font-weight: 800; font-size: 26px; color: var(--blue-300); }
.signal__score.tbd { color: var(--amber); font-size: 18px; }
.signal__rows { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.signal__rows .r { display: grid; grid-template-columns: 84px 1fr 34px; gap: 8px; align-items: center; font-size: 12px; color: var(--muted); }
.signal__rows .bar { height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.signal__rows .bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--teal), var(--blue)); }
.signal--opportunity { border-style: dashed; border-color: var(--amber); background: linear-gradient(160deg, rgba(245,177,76,.10), transparent); }

/* ----------------------------------------------------------------------------
   15. Tables
   -------------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 480px; }
table.data th, table.data td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--border); }
table.data thead th { background: var(--navy-700); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: .03em; }
table.data tbody tr:hover { background: var(--surface); }
table.data td:first-child { font-weight: 600; color: var(--text); }

/* ----------------------------------------------------------------------------
   16. FAQ accordion
   -------------------------------------------------------------------------- */
.faq-item { border-bottom: 1px solid var(--border); }
.faq-q { width: 100%; text-align: left; appearance: none; border: 0; background: transparent; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--text);
  padding: 18px 0; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.faq-q .ico { transition: transform .2s ease; color: var(--teal-300); flex: none; }
.faq-item.open .faq-q .ico { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; color: var(--text-soft); }
.faq-item.open .faq-a { max-height: 320px; }
.faq-a p { padding-bottom: 18px; margin: 0; }

/* ----------------------------------------------------------------------------
   17. BEV calculator layout
   -------------------------------------------------------------------------- */
.calc { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 24px; align-items: start; }
/* min-width:0 lets the grid columns actually shrink — without it the 1fr track
   can't go below its content's min-width (long <select> options, the chart),
   which blew the grid (and the whole page) wider than narrow viewports. */
.calc__inputs { position: sticky; top: 92px; min-width: 0; }
.calc__results { min-width: 0; }
.calc__tabs { display: flex; gap: 6px; margin-bottom: 16px; }
.calc__tabs button { flex: 1; appearance: none; border: 1px solid var(--border); background: var(--surface); color: var(--muted); cursor: pointer; font-family: var(--font-display); font-weight: 700; font-size: 13px; padding: 9px; border-radius: var(--radius-sm); }
.calc__tabs button.is-active { background: var(--surface-3); color: #fff; border-color: var(--border-2); }
.input-row { margin-bottom: 18px; }
.input-row .lab { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; font-weight: 700; color: var(--text-soft); margin-bottom: 8px; }
.input-row .val { font-family: var(--font-display); font-weight: 800; color: var(--blue-300); }
.input-row.full input[type="number"], .input-row.full select { width: 100%; }
/* compact inline slider: label · slider · value on one row (saves vertical space) */
.input-row.inline { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.input-row.inline .inlab { font-size: 13px; font-weight: 700; color: var(--text-soft); white-space: nowrap; min-width: 52px; }
.input-row.inline input[type="range"] { flex: 1; }
.input-row.inline .val { min-width: 44px; text-align: right; font-family: var(--font-display); font-weight: 800; color: var(--blue-300); }
input[type="range"] { width: 100%; appearance: none; height: 6px; border-radius: 999px; background: var(--surface-3); outline: none; }
input[type="range"]::-webkit-slider-thumb { appearance: none; width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(135deg, var(--teal), var(--blue)); cursor: pointer; border: 2px solid #fff2; box-shadow: var(--shadow-sm); }
input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border: 2px solid #fff2; border-radius: 50%; background: var(--blue); cursor: pointer; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button { appearance: none; cursor: pointer; border: 1px solid var(--border-2); background: var(--surface); color: var(--muted); font-size: 12px; font-weight: 700; padding: 7px 11px; border-radius: 999px; }
.seg button.on { background: linear-gradient(135deg, var(--teal), var(--blue)); color: #fff; border-color: transparent; }
.seg-uc { appearance: none; cursor: pointer; border: 1px solid var(--border-2); background: var(--surface); color: var(--muted); font-size: 12px; font-weight: 700; padding: 7px 11px; border-radius: 999px; opacity: .55; }
.seg-uc.on { background: linear-gradient(135deg, var(--teal), var(--blue)); color: #fff; border-color: transparent; opacity: 1; }

/* derived user breakdown chips */
.userbreak { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.userbreak .ub { font-size: 12px; font-weight: 700; color: var(--text-soft); background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 4px 10px; }
.userbreak .ub.off { opacity: .4; text-decoration: line-through; }

/* advanced sub-headers */
.adv-sub { font-family: var(--font-display); font-weight: 800; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--teal-300); margin: 16px 0 8px; border-top: 1px solid var(--border); padding-top: 14px; }

/* disabled department card */
.card.driver.off { opacity: .45; filter: grayscale(.6); }

/* money input with $ adornment */
.input-money { display: flex; align-items: stretch; }
.input-money .adorn { display: inline-flex; align-items: center; padding: 0 10px; background: var(--surface-3); border: 1px solid var(--border-2); border-right: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm); color: var(--teal-300); font-weight: 800; }
.input-money input { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; width: 100%; min-width: 0; }

/* ROI gauge */
.scorecards { align-items: stretch; }
.gauge-card { display: flex; flex-direction: column; justify-content: center; padding: 14px 18px 16px; }
.gauge { width: 100%; height: auto; display: block; }

/* distribution toggle + panes */
.dist-toggle { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.dist-toggle button[data-dist] { appearance: none; cursor: pointer; border: 1px solid var(--border-2); background: var(--surface); color: var(--muted); font-family: var(--font-display); font-weight: 700; font-size: 13px; padding: 7px 13px; border-radius: 999px; }
.dist-toggle button[data-dist].is-active { background: linear-gradient(135deg, var(--teal), var(--blue)); color: #fff; border-color: transparent; }
.dist-toggle .toggle-label { font-family: var(--font-display); font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-right: 2px; }
.dist-toggle button[data-cash] { appearance: none; cursor: pointer; border: 1px solid var(--border-2); background: var(--surface); color: var(--muted); font-family: var(--font-display); font-weight: 700; font-size: 13px; padding: 7px 14px; border-radius: 999px; transition: all .18s ease; }
.dist-toggle button[data-cash]:hover { color: #fff; border-color: var(--blue); }
.dist-toggle button[data-cash].is-active { background: linear-gradient(135deg, var(--blue) 0%, var(--blue-300) 120%); color: #04193b; border-color: transparent; box-shadow: 0 8px 20px -10px rgba(54,168,223,.85); }
.dist-pane { margin-top: 14px; }
.dist-pane.chart-wrap { height: 460px; }      /* taller so the area/pie charts aren't squished */
.sankey { width: 100%; height: auto; display: block; }
.chart-png { white-space: nowrap; }

/* Executive insight — lighter, punchier panel */
.exec-insight { background: linear-gradient(135deg, #17456f 0%, #0d3253 100%); border: 1px solid var(--blue); box-shadow: 0 0 0 1px rgba(54,168,223,.25), 0 18px 44px -22px rgba(54,168,223,.55); }
.exec-insight p { color: #fff; font-size: 15.5px; line-height: 1.6; }
.exec-insight .chip-teal { background: rgba(255,255,255,.18); color: #fff; }

/* redesigned department cards */
.dept-card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dept-card__name { font-family: var(--font-display); font-weight: 800; font-size: 18px; }
.dept-card__pv { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 4vw, 38px); line-height: 1.05; margin: 10px 0 2px; color: var(--green-300); }
.dept-card__pv span { font-family: var(--font-body); font-weight: 600; font-size: 13px; color: var(--muted); margin-left: 6px; }
.dept-card__desc { color: var(--text-soft); font-size: 13.5px; margin: 6px 0 16px; }
.metric-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.mtile { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; }
.mtile__v { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: #fff; line-height: 1.1; }
.mtile__l { color: var(--muted); font-size: 12px; margin-top: 3px; }
.dept-card.off { opacity: .45; filter: grayscale(.6); }
@media (max-width: 720px) { .scorecards { grid-template-columns: 1fr; } }

/* Result cards */
.results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.result {
  border-radius: var(--radius); padding: 22px; text-align: center;
  background: linear-gradient(160deg, var(--surface-2), var(--surface)); border: 1px solid var(--border-2);
}
.result.hero-result { background: linear-gradient(150deg, rgba(43,191,122,.22), rgba(0,112,122,.10)); }
.result__big { font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 4vw, 46px); line-height: 1; }
.result__lab { color: var(--muted); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.result__note { color: var(--text-soft); font-size: 12px; margin-top: 8px; }

/* Value driver cards */
.driver { border-left: 3px solid var(--teal); }
.driver.invest { border-left-color: var(--amber); }
.driver h4 { font-size: 16px; margin: 8px 0 6px; }
.driver p { color: var(--muted); font-size: 13px; margin: 0 0 14px; }
.driver__stats { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--border); padding-top: 12px; }
.driver__stats .s .n { font-family: var(--font-display); font-weight: 800; font-size: 18px; }
.driver__stats .s .l { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }

/* Waterfall row */
.waterfall { display: flex; flex-direction: column; gap: 10px; }
.wf-row { display: grid; grid-template-columns: 200px 1fr 90px; gap: 14px; align-items: center; font-size: 14px; }
.wf-bar { height: 26px; border-radius: 6px; background: var(--surface-3); position: relative; overflow: hidden; }
.wf-bar span { position: absolute; top: 0; bottom: 0; border-radius: 6px; }
.wf-row .amt { text-align: right; font-family: var(--font-display); font-weight: 700; }
.wf-row.total { font-weight: 800; }
.wf-row.total .wf-bar span { background: linear-gradient(90deg, var(--green), var(--green-300)); }
.wf-row.gain .wf-bar span { background: linear-gradient(90deg, var(--teal), var(--blue)); }
.wf-row.invest .wf-bar span { background: linear-gradient(90deg, #c98a2b, var(--amber)); }

/* Content gate */
.gate { position: relative; }
.gate__veil { position: relative; border-radius: var(--radius); border: 1px dashed var(--border-2); background: var(--surface); padding: 34px; text-align: center; }
.gate__veil h3 { font-size: 22px; }
.gate__form { max-width: 460px; margin: 18px auto 0; display: grid; gap: 12px; }
.gate__check { display: flex; gap: 10px; align-items: flex-start; font-size: 12px; color: var(--muted); text-align: left; }

/* ----------------------------------------------------------------------------
   18. Forms / question submit
   -------------------------------------------------------------------------- */
textarea { font-family: var(--font-body); font-size: 14px; color: var(--text); background: var(--surface-2); border: 1px solid var(--border-2); border-radius: var(--radius-sm); padding: 12px; width: 100%; min-height: 110px; resize: vertical; outline: none; }
textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(54,168,223,.22); }
.form-success { color: var(--green-300); font-weight: 700; }

/* ----------------------------------------------------------------------------
   19. AI assistant (shared, floating)
   -------------------------------------------------------------------------- */
/* Floating quick-actions cluster (Tablet view · Ask Futurum AI · Learn more).
   Collapsed = one round Pomegranate button bottom-right; the menu (absolute,
   above the toggle) expands the three labelled actions upward. */
.fabcluster { position: fixed; right: 22px; bottom: 22px; z-index: 80; }
.fabcluster__toggle { width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, #8e0040, #46162f); box-shadow: 0 16px 38px -12px rgba(142,0,64,.6);
  position: relative; transition: transform .18s ease; }
.fabcluster__toggle:hover { transform: scale(1.06); }
/* First-visit attention pulse (JS adds .fab-pulse ~15s after load, 2 rings).
   Bright rose ring + a gentle scale so it reads against the dark pomegranate. */
@keyframes fabPulse {
  0%   { box-shadow: 0 16px 38px -12px rgba(142,0,64,.6), 0 0 0 0 rgba(236,104,156,.85); transform: scale(1); }
  50%  { transform: scale(1.1); }
  70%  { box-shadow: 0 16px 38px -12px rgba(142,0,64,.6), 0 0 0 28px rgba(236,104,156,0); }
  100% { box-shadow: 0 16px 38px -12px rgba(142,0,64,.6), 0 0 0 0 rgba(236,104,156,0); transform: scale(1); }
}
.fabcluster__toggle.fab-pulse { animation: fabPulse 2s ease-out 2; }
.fabcluster__ico { width: 24px; height: 24px; }
.fabcluster__ico--close { display: none; }
.fabcluster.is-open .fabcluster__ico--open { display: none; }
.fabcluster.is-open .fabcluster__ico--close { display: block; }
.fabcluster__menu { position: absolute; right: 0; bottom: calc(100% + 12px);
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  opacity: 0; visibility: hidden; transform: translateY(8px) scale(.98); transform-origin: bottom right;
  transition: opacity .2s ease, transform .2s ease, visibility .2s; }
.fabcluster.is-open .fabcluster__menu { opacity: 1; visibility: visible; transform: none; }
/* Items share the toggle's Pomegranate identity: pomegranate-gradient pills with
   a rose border + rose icons, brightening to white on hover. */
.fabcluster__item { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; cursor: pointer;
  font-family: var(--font-display); font-weight: 800; font-size: 13.5px; color: #fbe6ef; white-space: nowrap;
  background: linear-gradient(135deg, rgba(142,0,64,.96), rgba(70,22,47,.97)); border: 1px solid rgba(236,104,156,.42); border-radius: 999px; padding: 11px 18px;
  box-shadow: 0 14px 34px -14px rgba(48,8,28,.7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: transform .15s ease, border-color .15s ease, color .15s ease; }
.fabcluster__item:hover { transform: scale(1.04); border-color: #ec689c; color: #fff; }
.fabcluster__item svg { width: 17px; height: 17px; flex: none; color: #f4a9c7; }
@media (prefers-reduced-motion: reduce) {
  .fabcluster__toggle:hover, .fabcluster__item:hover { transform: none; }
  .fabcluster__menu { transition: opacity .2s ease, visibility .2s; transform: none; }
}
.ai-panel {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  width: min(420px, calc(100vw - 32px)); height: min(640px, calc(100vh - 40px));
  background: #04193b; border: 1px solid var(--border-2); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); display: flex; flex-direction: column; overflow: hidden;
  transform: translateY(20px) scale(.98); opacity: 0; pointer-events: none; transition: all .25s ease;
}
.ai-panel.open { transform: none; opacity: 1; pointer-events: auto; }
.ai-panel__head { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--border); background: linear-gradient(135deg, rgba(0,112,122,.4), rgba(54,168,223,.2)); }
.ai-panel__head h4 { margin: 0; font-size: 16px; }
.ai-panel__head .sub { font-size: 12px; color: var(--text-soft); }
.ai-fmark { height: 24px; width: 15px; flex: none; color: var(--blue); }
.ai-panel__close { margin-left: auto; appearance: none; border: 0; background: transparent; color: var(--text-soft); font-size: 22px; cursor: pointer; line-height: 1; }
.ai-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.ai-suggests { display: grid; gap: 8px; }
.ai-suggest { text-align: left; appearance: none; cursor: pointer; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: var(--radius-sm); padding: 11px 13px; font-size: 13px; }
.ai-suggest:hover { border-color: var(--blue); background: var(--surface-2); }
.ai-suggest b { display: block; color: var(--teal-300); font-family: var(--font-display); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 2px; }
.ai-msg { max-width: 86%; padding: 11px 14px; border-radius: 14px; font-size: 14px; line-height: 1.5; }
.ai-msg.user { align-self: flex-end; background: linear-gradient(135deg, var(--teal), var(--blue)); color: #fff; border-bottom-right-radius: 4px; }
.ai-msg.bot { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.ai-foot { padding: 12px; border-top: 1px solid var(--border); display: flex; gap: 8px; }
.ai-foot input { flex: 1; min-width: 0; }

/* ----------------------------------------------------------------------------
   19b. Export modal (shared) — fades + blurs the page behind it
   -------------------------------------------------------------------------- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: center; padding: 24px;
  background: rgba(2,10,28,.62);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease;
}
.modal-overlay.open { opacity: 1; visibility: visible; }
.modal {
  width: min(620px, 100%); position: relative;
  background: linear-gradient(160deg, #0c4a9c 0%, #05224d 62%, #04193b 100%);
  border: 1px solid var(--border-2); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); padding: 30px;
  transform: translateY(12px) scale(.985); transition: transform .25s ease;
}
.modal-overlay.open .modal { transform: none; }
.modal__close { position: absolute; top: 14px; right: 16px; appearance: none; border: 0; background: transparent; color: var(--text-soft); font-size: 26px; line-height: 1; cursor: pointer; }
.modal__close:hover { color: #fff; }
.modal__title { font-size: 24px; margin: 8px 0 4px; color: #fff; }
.modal__sub { margin-bottom: 20px; color: rgba(255,255,255,.78); }
.export-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.export-opt {
  display: flex; align-items: center; gap: 14px; text-align: left;
  appearance: none; cursor: pointer; color: var(--text);
  background: rgba(255,255,255,.06); border: 1px solid var(--border-2); border-radius: var(--radius);
  padding: 16px; transition: transform .15s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.export-opt:hover { transform: translateY(-2px); background: rgba(255,255,255,.12); border-color: var(--blue); box-shadow: 0 16px 36px -18px rgba(54,168,223,.75); }
.export-opt:focus-visible { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(54,168,223,.35); }
.export-opt__ico { flex: none; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--teal), var(--blue)); transition: transform .2s ease; }
.export-opt:hover .export-opt__ico { transform: scale(1.06) rotate(-3deg); }
.export-opt__ico svg { width: 24px; height: 24px; display: block; }
.export-opt__body { display: flex; flex-direction: column; gap: 3px; }
.export-opt__name { font-family: var(--font-display); font-weight: 800; font-size: 15px; color: #fff; }
.export-opt__meta { color: rgba(255,255,255,.66); font-size: 12px; }
@media (max-width: 560px) { .export-grid { grid-template-columns: 1fr; } }

/* registration form inside the ROI export modal */
.reg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.reg-grid input { width: 100%; min-width: 0; }
.reg-check { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; font-size: 12.5px; color: var(--text-soft); }
.reg-check input { margin-top: 2px; }
.modal-divider { height: 1px; background: var(--border-2); margin: 18px 0; }
@media (max-width: 480px) { .reg-grid { grid-template-columns: 1fr; } }

/* ROI Complete Report sections: long-form text (left) + green callout metrics & quote (right) */
.ro-sec { margin-top: 44px; }
.ro-sec__h { font-size: clamp(22px, 2.7vw, 30px); color: #fff; margin: 0 0 16px; }
.ro-grid { display: grid; grid-template-columns: 1fr 340px; gap: 36px; align-items: start; }
.ro-standfirst { color: #fff; font-size: 17px; line-height: 1.7; margin: 0 0 18px; }
.ro-body { color: #eaf1fb; font-size: 15.5px; line-height: 1.78; margin: 0 0 16px; }
.ro-side { position: sticky; top: 92px; }
.ro-metrics { display: flex; flex-direction: column; gap: 22px; margin-bottom: 22px; }
.ro-metric__n { font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 4.6vw, 46px); line-height: 1; color: var(--green-300); }
.ro-metric__l { color: var(--text-soft); font-size: 13px; margin-top: 6px; line-height: 1.35; }
@media (max-width: 900px) { .ro-grid { grid-template-columns: 1fr; gap: 22px; } .ro-side { position: static; } .report-toc { max-width: none; } }
/* larger client-voices box with attribution + obvious expand cue */
.roi-quotebox { padding: 22px 24px; }
.roi-quotebox .quotebox__current { font-size: 18px; line-height: 1.6; min-height: 0; }
.roi-quotebox .quotebox__who { margin-top: 12px; color: var(--teal-300); font-family: var(--font-display); font-weight: 700; font-size: 13px; transition: opacity .25s ease; }
.roi-quotebox .quotebox__more { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-2); color: var(--blue-300); font-family: var(--font-display); font-weight: 800; font-size: 13.5px; display: flex; align-items: center; justify-content: space-between; }
.roi-quotebox:hover .quotebox__more { color: #fff; }

/* per-benefit deep dives */
.benefit-sec .bquotes { display: flex; flex-direction: column; gap: 14px; margin: 18px 0 4px; }
.bquote { margin: 0; padding-left: 16px; border-left: 3px solid var(--teal); font-style: italic; color: #fff; font-size: 14.5px; line-height: 1.55; }
.bquote cite { display: block; font-style: normal; color: var(--teal-300); font-weight: 700; font-size: 12.5px; margin-top: 6px; }
.bmetrics { display: flex; flex-wrap: wrap; gap: 18px 28px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.bmetric { display: flex; flex-direction: column; }
.bmetric__v { font-family: var(--font-display); font-weight: 800; font-size: 24px; color: var(--green-300); line-height: 1; }
.bmetric__l { color: var(--muted); font-size: 12px; margin-top: 4px; }
.bcurve-cap { color: var(--muted); font-size: 12px; line-height: 1.5; margin-top: 10px; }
/* profile-impact table (six customize selections) */
.bfactors { margin-top: 24px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.bfactors__row { display: grid; grid-template-columns: 1.3fr 1.4fr .8fr 1.1fr 1.1fr; gap: 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.bfactors__row:last-child { border-bottom: 0; }
.bfactors__row--head { background: var(--navy-700); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.bf-field { font-weight: 700; color: var(--text); }
.bf-val { color: var(--blue-300); font-weight: 700; }
.bf-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 999px; }
.bf-pill.bf-up { background: rgba(43,191,122,.16); color: var(--green-300); }
.bf-pill.bf-down { background: rgba(245,177,76,.16); color: var(--amber); }
.bf-pill.bf-impact-high { background: rgba(43,191,122,.16); color: var(--green-300); }
.bf-pill.bf-impact-medium { background: rgba(54,168,223,.16); color: var(--blue-300); }
.bf-pill.bf-impact-low { background: rgba(255,255,255,.08); color: var(--muted); }
@media (max-width: 720px) { .bfactors__row { grid-template-columns: 1fr 1fr; gap: 8px; } .bfactors__row--head { display: none; } }

/* ROI hero standout card: average ROI + quartile range + NPV/payback */
/* ROI hero figures sit directly on the banner — no box */
.roi-hero-card { background: none; border: 0; border-radius: 0; padding: 0; color: #fff; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; align-self: center; }
.roi-hero-card__lab { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: .1em; font-size: 12.5px; color: #bfe3ff; }
.roi-hero-card__big { font-family: var(--font-display); font-weight: 800; font-size: clamp(58px, 8.5vw, 88px); line-height: 1; color: var(--green-300); margin: 4px 0 2px; text-shadow: 0 8px 30px rgba(43,191,122,.35); }
.roi-hero-card__range { margin-top: 14px; max-width: 360px; }
.rhc-range__row { display: flex; align-items: center; gap: 14px; font-family: var(--font-display); font-weight: 800; font-size: 22px; color: #eaf1fb; }
.rhc-range__bar { flex: 1; height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--amber), var(--blue) 55%, var(--green)); }
.rhc-range__labels { display: flex; justify-content: space-between; font-size: 11px; color: rgba(255,255,255,.75); text-transform: uppercase; letter-spacing: .05em; margin-top: 7px; }
.roi-hero-card__sub { display: flex; gap: 48px; margin-top: 28px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.2); }
.roi-hero-card__sub .l { display: block; font-size: 11px; color: rgba(255,255,255,.75); text-transform: uppercase; letter-spacing: .05em; }
.roi-hero-card__sub .v { font-family: var(--font-display); font-weight: 800; font-size: 30px; color: #fff; margin-top: 4px; }
/* right-align the ROI figures + NPV/Payback icons */
.roi-hero-card { text-align: right; }
.roi-hero-card__range { margin-left: auto; }
.roi-hero-card__sub { justify-content: flex-end; }
.roi-hero-card__sub > div { display: flex; flex-direction: column; align-items: flex-end; }
.roi-hero-card__sub .l { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; }
.roi-hero-card__sub .l svg { width: 13px; height: 13px; color: var(--green-300); flex: none; }
.roi-hero-card__sub .v { display: block; color: var(--green-300); font-size: 27px; margin-top: 6px; }

/* Mobile: the ROI metric card (ROI / NPV / Payback) stacks below the title —
   center it and its contents instead of the desktop right-alignment. */
@media (max-width: 900px) {
  #roi-mount .hero-grid--roi .roi-hero-card { align-self: center; max-width: 420px; margin-left: auto; margin-right: auto; text-align: center; }
  #roi-mount .roi-hero-card__range { margin-left: auto; margin-right: auto; }
  #roi-mount .roi-hero-card__sub { justify-content: center; }
  #roi-mount .roi-hero-card__sub > div { align-items: center; }
  #roi-mount .roi-hero-card__sub .l { justify-content: center; }
}

/* ----------------------------------------------------------------------------
   20. Footer + toast
   -------------------------------------------------------------------------- */
.site-footer { border-top: 1px solid rgba(255,255,255,.16); margin-top: 56px; padding-block: 46px; color: rgba(255,255,255,.82); font-size: 13px;
  background: linear-gradient(180deg, #062a6f 0%, #0c54ad 54%, #2f93e6 100%); }
.site-footer .row { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; }
.disclaimer { color: rgba(255,255,255,.7); font-size: 12px; max-width: 70ch; margin-top: 10px; }

.toast { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(20px); background: #062a4f; border: 1px solid var(--border-2); color: #fff; padding: 12px 20px; border-radius: 999px; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: all .25s ease; z-index: 100; font-size: 14px; }
.toast.show { opacity: 1; transform: translateX(-50%); }

/* ----------------------------------------------------------------------------
   20b. Customize trigger · highlights row · full-width summary · verbatims
   -------------------------------------------------------------------------- */
/* compact "Customize your insights" trigger (control bar) */
.customize-trigger { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; max-width: 100%;
  background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 999px; padding: 9px 16px;
  color: var(--text); font-family: var(--font-body); transition: border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.customize-trigger:hover { border-color: var(--blue); background: var(--surface-3); box-shadow: 0 10px 26px -16px rgba(54,168,223,.7); }
.customize-trigger__ico { color: var(--teal-300); font-weight: 800; }
.customize-trigger__lead { font-family: var(--font-display); font-weight: 800; font-size: 14px; white-space: nowrap; }
.customize-trigger__sel { color: var(--muted); font-size: 13px; padding-left: 12px; border-left: 1px solid var(--border-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.customize-trigger__sel b { color: var(--teal-300); font-weight: 700; }
.customize-trigger__caret { color: var(--muted); font-size: 11px; }
@media (max-width: 600px) { .customize-trigger__sel { display: none; } }

/* customize dialog variants */
.modal--narrow { width: min(560px, 100%); }
.filters--modal { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: end; }
.filters--modal .field, .filters--modal select { width: 100%; }
.modal__foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
@media (max-width: 480px) { .filters--modal { grid-template-columns: 1fr; } }

/* highlights row: personalized insight (left) + briefing video (right) */
.highlights-row .exec-insight { display: flex; flex-direction: column; justify-content: center; }

/* metric cards hover */
.metric { transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease; }
.metric:hover { transform: translateY(-3px); border-color: var(--blue); box-shadow: 0 16px 34px -20px rgba(54,168,223,.7); }

/* bright briefing-video panel + clean line-art speaker */
.video-embed--bright { background: linear-gradient(150deg, #e8f1ff 0%, #cfe3fb 100%); border-color: rgba(255,255,255,.5); min-height: 260px; }
.video-embed--bright .video-embed__poster { background-image: url('../img/briefing-speaker.png'); background-size: cover; background-position: right center; }
.video-embed--bright .video-embed__play { background: linear-gradient(135deg, var(--teal), var(--blue)); color: #fff; }

/* full-width Executive Summary / Key Insights as core page text */
.sect-title { font-size: clamp(26px, 3.2vw, 36px); margin: 0 0 14px; color: #fff; }
.rule { height: 3px; width: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--teal), var(--blue) 45%, transparent 92%); margin: 0 0 18px; }
/* used as the spacer ABOVE a section header — invisible, keeps the spacing (line goes below the title only) */
.rule--lg { background: none; height: 0; margin: 58px 0 0; }
.summary-prose { max-width: none; }
.summary-prose p { color: #f1f6fd; font-size: 16px; line-height: 1.7; margin: 0 0 16px; }

/* customer verbatims carousel — 3 across, faded edges, auto-advance */
.vcar { display: flex; align-items: center; gap: 10px; margin-top: 24px; }
.vcar__view { position: relative; overflow: hidden; flex: 1;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 17%, #000 83%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 17%, #000 83%, transparent); }
.vcar__track { display: flex; gap: 18px; will-change: transform; }
.vcar__item { flex: 0 0 64%; box-sizing: border-box; background: none; border: 0; padding: 8px 28px; text-align: center; opacity: .3; transition: opacity .4s ease; }
.vcar__item.is-active { opacity: 1; }
.vcar__item blockquote { margin: 0 0 14px; font-size: 22px; line-height: 1.5; font-style: italic; color: #fff; }
.vcar__item blockquote::before { content: "\201C"; display: block; font-family: Georgia, "Times New Roman", serif; font-size: 54px; line-height: .5; color: var(--blue-300); margin-bottom: 14px; }
.vcar__item figcaption { color: var(--muted); font-size: 13px; }
.vcar__item figcaption b { display: block; color: var(--teal-300); font-family: var(--font-display); font-size: 15px; font-style: normal; margin-bottom: 2px; }
.vcar__nav { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border-2); background: var(--surface-2); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: all .2s ease; }
.vcar__nav:hover { border-color: var(--blue); background: var(--surface-3); transform: scale(1.06); }
@media (max-width: 560px) { .vcar__item { flex-basis: 84%; } .vcar__item blockquote { font-size: 18px; } }

/* self-assessment cards */
.sa-card { display: flex; flex-direction: column; }
.sa-card h3 { font-size: 16px; margin: 0 0 10px; }
.sa-chart { background: rgba(255,255,255,.03); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px; }
.sa-svg { width: 100%; height: auto; display: block; }
.sa-cap { margin-top: 12px; color: var(--text-soft); font-size: 13.5px; line-height: 1.5; }
.sa-cap__you { font-family: var(--font-display); font-weight: 800; color: var(--green-300); margin-right: 6px; }

/* analyst note (left, two-thirds) + analyst feed (right, one-third) */
.note-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; }
@media (max-width: 820px) { .note-grid { grid-template-columns: 1fr; } }

/* key-takeaway text sections: core page text (left) + metrics/quotes (right) */
.taki { margin-top: 56px; }
.taki:first-of-type { margin-top: 28px; }
.taki-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 32px; align-items: start; }
.taki__kicker { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: .12em; font-size: 12.5px; color: var(--teal-300); }
.taki__heading { font-size: clamp(22px, 2.6vw, 30px); margin: 8px 0 12px; color: #fff; }
.taki__body { color: #f1f6fd; font-size: 17px; line-height: 1.8; max-width: 64ch; }
.taki__side { display: flex; flex-direction: column; }
.taki__metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.taki__metric { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; }
.taki__metric .n { font-family: var(--font-display); font-weight: 800; font-size: clamp(20px, 2.4vw, 24px); color: var(--blue-300); line-height: 1.05; }
.taki__metric .l { color: var(--muted); font-size: 11.5px; margin-top: 4px; line-height: 1.3; }
.taki__metric .src { color: var(--muted-2); font-size: 9.5px; margin-top: 5px; text-transform: uppercase; letter-spacing: .04em; }
@media (max-width: 860px) { .taki-grid { grid-template-columns: 1fr; gap: 18px; } }

/* cycling quote box (click to expand all) */
.quotebox { cursor: pointer; background: linear-gradient(135deg, rgba(0,112,122,.2), rgba(54,168,223,.08)); border: 1px solid var(--border-2); border-radius: var(--radius); padding: 18px; transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease; }
.quotebox:hover { border-color: var(--blue); box-shadow: 0 14px 32px -20px rgba(54,168,223,.7); transform: translateY(-1px); }
.quotebox__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.quotebox__expand { color: var(--blue-300); font-size: 12px; font-weight: 700; }
.quotebox__current { margin: 0; font-style: italic; color: #fff; font-size: 15px; line-height: 1.55; transition: opacity .25s ease; min-height: 3.2em; }

/* quotes modal list */
/* Client-voices modal: quotes run inline (no boxes), left-aligned with the
   title, larger type, and flow in two columns on wide screens / one on narrow. */
.qmodal__list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 44px; max-height: 64vh; overflow: auto; margin-top: 16px; padding-right: 4px; }
.qmodal__item { background: none; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; padding: 18px 0; }
.qmodal__item blockquote { margin: 0; font-style: italic; color: #fff; font-size: 17px; line-height: 1.62; }
.qmodal__item figcaption { color: var(--teal-300); font-size: 13.5px; font-weight: 700; margin-top: 10px; }
#roiQuotesModal .modal, #lrQuotesModal .modal { width: min(900px, 100%); }
@media (max-width: 700px) { .qmodal__list { grid-template-columns: 1fr; gap: 0; } }

/* analyst author card with photo avatar + LinkedIn */
.author { display: flex; align-items: center; gap: 16px; margin-top: 24px; }
.author__photo { position: relative; flex: none; width: 76px; height: 76px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; text-decoration: none;
  background-color: #0c4a9c; background-image: linear-gradient(135deg, var(--teal), var(--blue)); background-size: cover; background-position: center;
  border: 2px solid rgba(255,255,255,.28); box-shadow: var(--shadow-sm); transition: transform .15s ease, box-shadow .2s ease; }
.author__photo:hover { transform: scale(1.04); box-shadow: 0 14px 30px -14px rgba(54,168,223,.7); }
.author__initials { font-family: var(--font-display); font-weight: 800; font-size: 23px; color: #fff; }
.author__meta { display: flex; flex-direction: column; gap: 2px; }
.author__meta b { font-family: var(--font-display); font-size: 16px; color: #fff; }
.author__meta span { color: var(--muted); font-size: 13px; }
.author__li { display: inline-flex; align-items: center; gap: 7px; margin-top: 6px; color: var(--blue-300); font-size: 13px; font-weight: 700; }
.author__li svg { width: 16px; height: 16px; }
.author__li:hover { text-decoration: underline; }

/* detailed-analysis client quote (beside each chart) */
.analysis-quote { margin-top: 16px; padding-left: 14px; border-left: 3px solid var(--teal); }
.analysis-quote p { font-style: italic; color: #fff; font-size: 14.5px; margin: 0 0 5px; line-height: 1.5; }
.analysis-quote span { color: var(--muted); font-size: 12px; font-weight: 700; }

/* Deep Dive full-report sections + call-out quotes */
.report-sec { margin-top: 48px; max-width: 82ch; }
.report-sec__h { font-size: clamp(21px, 2.5vw, 27px); color: #fff; margin: 6px 0 14px; }
.report-prose p { color: #eaf1fb; font-size: 16px; line-height: 1.8; margin: 0 0 16px; }
.report-callout { margin: 24px 0; padding: 6px 0 6px 22px; border-left: 4px solid var(--teal); font-style: italic; color: #fff; font-size: 20px; line-height: 1.5; }
.report-callout cite { display: block; font-style: normal; font-size: 13px; color: var(--teal-300); font-weight: 700; margin-top: 10px; }

/* ----------------------------------------------------------------------------
   21. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
  .calc { grid-template-columns: minmax(0, 1fr); }
  .calc__inputs { position: static; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .site-header__row { flex-wrap: wrap; gap: 12px; }
  .brand-tag { display: none; }
  .apptabs { order: 3; width: 100%; }
  .apptab { flex: 1; justify-content: center; }
  .grid-2, .grid-4 { grid-template-columns: 1fr; }
  .results { grid-template-columns: 1fr; }
  .wf-row { grid-template-columns: 120px 1fr 76px; gap: 8px; font-size: 12px; }
  .feed-item { grid-template-columns: 1fr; gap: 4px; }
}

/* ============================================================================
   2026-06-10 ADDITIONS — data currency, changelog, AI follow-ups, freshness
   ========================================================================== */

/* Header freshness chip */
.freshchip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px;
  background: rgba(43,191,122,.10); border: 1px solid rgba(43,191,122,.28); color: var(--text-soft);
  font-size: 12.5px; white-space: nowrap; }
.freshchip b { color: var(--green-300); font-weight: 700; }
@media (max-width: 720px) { .freshchip { display: none; } }

/* Data-currency rows: distinguish continuous feeds vs quarterly waves */
.ingest__kind { display: inline-block; margin-left: 7px; padding: 1px 7px; border-radius: 999px;
  font-size: 10px; letter-spacing: .02em; vertical-align: 1px;
  background: rgba(54,168,223,.16); color: var(--blue-300); }
.ingest__row--primary .ingest__kind { background: rgba(43,191,122,.16); color: var(--green-300); }
.ingest__row--primary .ingest__dot { background: var(--green-300); }

/* "What changed this quarter" changelog */
.changelog__list { margin-top: 10px; }
.changelog__row { display: grid; grid-template-columns: 86px 1fr; gap: 12px; align-items: start;
  padding: 10px 0; border-bottom: 1px solid var(--border); }
.changelog__row:last-child { border-bottom: 0; }
.changelog__row .chip { justify-self: start; margin-top: 1px; }
.changelog__row p { margin: 0; font-size: 13.5px; color: var(--text-soft); }
@media (max-width: 720px) { .changelog__row { grid-template-columns: 1fr; gap: 4px; } }

/* ROI case-study data-currency strip */
.currency-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px;
  padding: 11px 16px; border-radius: 12px; font-size: 13px; color: var(--text-soft);
  background: rgba(43,191,122,.07); border: 1px solid rgba(43,191,122,.22); }
.currency-strip b { color: var(--green-300); }
.currency-strip__stamps { color: var(--muted); font-size: 12px; }
.currency-strip__stamps b { color: var(--text-soft); }

/* AI assistant follow-up chips */
.ai-followups { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 2px; }
.ai-followup { text-align: left; padding: 8px 12px; border-radius: 10px; cursor: pointer;
  background: rgba(54,168,223,.08); border: 1px solid rgba(54,168,223,.25);
  color: var(--blue-300); font-size: 12.5px; font-family: inherit; transition: background .15s; }
.ai-followup:hover { background: rgba(54,168,223,.18); }

/* ============================================================================
   "Learn about this demo" — amber button + near-fullscreen about modal
   ========================================================================== */
/* (The standalone .ai-fab / .learn-fab / .tablet-fab floating buttons were
   consolidated into the .fabcluster above; .tablet-fab + .learn-fab remain as
   class hooks on the cluster items for app.js + the verifier.) */
.about-overlay { z-index: 90; }
.about-modal { max-width: var(--maxw, 1240px); width: min(94vw, var(--maxw, 1240px)); max-height: 90vh; overflow-y: auto; }
.about-modal__title { font-size: clamp(26px, 3vw, 34px); }
.about-modal .eyebrow--amber { color: var(--amber); }
.about__author { display: flex; align-items: center; gap: 14px; margin: 18px 0 6px; flex-wrap: wrap; }
.about__photo { width: 64px; height: 64px; flex: none; border-radius: 50%; background-size: cover; background-position: center;
  border: 2px solid rgba(245,177,76,.5); }
.about__author-meta { display: flex; flex-direction: column; line-height: 1.35; }
.about__author-meta b { color: #fff; font-family: var(--font-display); font-size: 16.5px; }
.about__author-meta span { color: var(--muted); font-size: 13.5px; }
.about__li { display: inline-flex; align-items: center; gap: 8px; margin-left: auto;
  padding: 8px 15px; border-radius: 999px; font-size: 13px; font-weight: 700; text-decoration: none;
  color: #7cc8ef; background: rgba(54,168,223,.10); border: 1px solid rgba(54,168,223,.35); transition: background .15s; }
.about__li:hover { background: rgba(54,168,223,.22); }
.about__li svg { width: 15px; height: 15px; }
.about__intro { color: #e2eaf7; font-size: 17.5px; line-height: 1.75; margin: 14px 0 0; }
.about__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0 8px; }
.about__card { background: rgba(54,168,223,.07); border: 1px solid rgba(54,168,223,.25); border-radius: 14px; padding: 18px; }
.about__card h4 { margin: 12px 0 8px; font-size: 18px; }
.about__card p { margin: 0; color: var(--text-soft); font-size: 15.5px; line-height: 1.68; }
.about__ico { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: none;
  border-radius: 10px; background: rgba(245,177,76,.14); color: var(--amber); }
.about__ico svg { width: 18px; height: 18px; }
.about__card .about__ico { background: rgba(54,168,223,.16); color: var(--blue-300); }
/* Header + content sections (no boxes): hairline rule, small-caps header */
.about-sec { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--border-2); }
.about-sec__h { display: flex; align-items: center; gap: 12px; margin: 0 0 10px;
  font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--amber); }
.about-sec__h .about__ico { width: 30px; height: 30px; }
.about-sec__h .about__ico svg { width: 16px; height: 16px; }
.about-sec p { margin: 0; color: #dce5f4; font-size: 17px; line-height: 1.75; max-width: 100ch; }
.about-sec:last-child p { color: var(--text-soft); }
.about__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.about__chip { padding: 5px 13px; border-radius: 999px; font-size: 13px; color: var(--text-soft);
  background: rgba(255,255,255,.06); border: 1px solid var(--border); }
@media (max-width: 720px) { .about__cards { grid-template-columns: 1fr; } }

/* ============================================================================
   Round-3 tweaks: interactive self-assessment, calculator tabs, profile grid,
   ROI hero alignment
   ========================================================================== */

/* Interactive self-assessment cards */
.sa-q h3 { font-size: 15.5px; margin-bottom: 12px; }
.sa-input { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.sa-input .inlab { font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.sa-input input[type="range"] { flex: 1; }
.sa-input .val { font-family: var(--font-display); font-weight: 800; color: #fff; min-width: 52px; text-align: right; }
.sa-row { display: grid; grid-template-columns: minmax(120px, 38%) 1fr 54px; gap: 10px; align-items: center; margin-bottom: 8px; }
.sa-row__lab { font-size: 11.5px; color: var(--muted); line-height: 1.25; }
.sa-row__bar { height: 12px; border-radius: 999px; background: rgba(255,255,255,.07); overflow: hidden; }
.sa-row__bar span { display: block; height: 100%; border-radius: 999px; transition: width .35s ease; }
.sa-row.you .sa-row__bar span { background: linear-gradient(90deg, var(--green), var(--green-300)); }
.sa-row.you .sa-row__lab { color: var(--green-300); font-weight: 800; }
.sa-row.seg .sa-row__bar span { background: linear-gradient(90deg, var(--teal), var(--blue)); }
.sa-row.all .sa-row__bar span { background: rgba(147,166,196,.65); }
.sa-row__val { font-family: var(--font-display); font-weight: 800; font-size: 12.5px; color: var(--text-soft); text-align: right; }
.sa-verdict { margin-top: 10px; padding: 8px 12px; border-radius: 10px; font-size: 12.5px; font-weight: 700;
  background: rgba(54,168,223,.10); border: 1px solid rgba(54,168,223,.25); color: var(--blue-300); }
.sa-cap { margin-top: 8px; font-size: 12px; color: var(--muted); }

/* Calculator: Primary/Advanced as obvious tabs attached to the card top */
.calc__tabs { display: flex; gap: 0; margin: -22px -22px 18px; border-bottom: 2px solid var(--border-2); }
.calc__tabs button { flex: 1; appearance: none; border: 0; background: transparent; cursor: pointer;
  font-family: var(--font-display); font-weight: 800; font-size: 13.5px; letter-spacing: .02em;
  color: var(--muted); padding: 14px 10px 12px; border-bottom: 3px solid transparent;
  border-radius: var(--radius) var(--radius) 0 0; margin-bottom: -2px; }
.calc__tabs button.is-active { color: #fff; background: rgba(0,112,122,.16); border-bottom-color: #2fb3bd; }
.calc__tabs button:hover:not(.is-active) { color: var(--text-soft); }

/* Profile selects at the top of the calculator inputs */
.profile-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 10px; margin-bottom: 16px; }
.profile-grid .field { min-width: 0; }   /* let the cells (and their <select>s) shrink instead of overflowing */
.profile-grid .field label { display: block; font-size: 11px; font-weight: 700; color: var(--muted); margin-bottom: 4px; }
.profile-grid .field select { width: 100%; max-width: 100%; }
.profile-note { font-weight: 400; color: var(--muted); font-size: 11.5px; margin-left: 6px; }

/* ROI "Personalization" panel — the profile dropdowns in their own titled card
   in the left column, directly above the inputs card. */
.calc-personalize { margin-bottom: 16px; }
.calc-personalize__head { margin-bottom: 12px; }
.calc-personalize__title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 18px; color: #fff; }
.calc-personalize__sub { margin: 6px 0 0; color: var(--text-soft); font-size: 12.5px; line-height: 1.5; }
.calc-personalize__grid { margin-bottom: 0; }   /* inherits the 2-col .profile-grid layout */

/* ROI hero: align the scorecard to the container's right edge */
.hero-grid--roi .roi-hero-card { width: 100%; max-width: 360px; align-self: flex-end; }

/* ============================================================================
   Round-4: exec-summary visual lift, report readability, financial summaries
   ========================================================================== */

/* Quote carousel: never gray out quotes that are in view */
.vcar__item { opacity: 1; }
.vcar__item.is-active blockquote { color: #fff; }

/* Hero: publish/updated dates + stacked aside CTAs */
.pubdates { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px;
  font-size: 13.5px; color: var(--muted); }
.pubdates__item { display: inline-flex; align-items: center; gap: 7px; }
.pubdates__item b { color: var(--text-soft); font-weight: 800; }
.pubdates__sep { color: var(--muted-2); }
.hero-aside__cta { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 360px; align-self: flex-end; }
.hero-aside__cta .btn { width: 100%; justify-content: center; }

/* Executive summary: bigger, brighter reading sizes */
[data-roisection="case"] .hero__sub { font-size: 17px; }
.summary-prose--lg p { font-size: 16.5px; line-height: 1.75; color: #dce5f4; }
[data-roisection="case"] .benefit-story p.muted { font-size: 14.5px; line-height: 1.65; }

/* About / State-of-market: editorial feature treatment (no boxes).
   Big bright prose with a drop cap, plus a thin-rule sidebar visual:
   a numbered benefit index for About, a large-numeral stat column for
   State of the Market. */
.case-feature { display: grid; grid-template-columns: 1.55fr 1fr; gap: 44px; align-items: start; margin-top: 2px; }
.case-feature__prose p { font-size: 19px; line-height: 1.78; color: #e2eaf7; margin: 0 0 1em; }
.case-feature__prose p:first-child { color: #eef3fb; }
.case-feature__prose p:last-child { margin-bottom: 0; }
.case-feature--about .case-feature__prose > p:first-child::first-letter,
.case-feature--lr .case-feature__prose > p:first-child::first-letter,
.case-feature--summary .case-feature__prose > p:first-child::first-letter {
  float: left; font-family: var(--font-display); font-weight: 800; font-size: 62px; line-height: .82;
  color: var(--teal-300, #2fb3bd); padding: 6px 12px 0 0; }
.case-feature__side { border-left: 1px solid var(--border-2); padding-left: 28px; }
.case-feature__side-h { font-family: var(--font-display); font-weight: 800; font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--teal-300, #2fb3bd); margin-bottom: 4px; }
.cfb { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--border); }
.cfb:last-child { border-bottom: 0; }
.cfb__num { font-family: var(--font-display); font-weight: 800; font-size: 19px; color: rgba(54,168,223,.65); line-height: 1.2; }
.cfb b { display: block; font-family: var(--font-display); font-size: 15px; color: #fff; margin-bottom: 2px; }
.cfb span { font-size: 13px; color: var(--muted); line-height: 1.5; }
.cfstat { padding: 14px 0 12px; border-bottom: 1px solid var(--border); }
.cfstat:last-child { border-bottom: 0; }
.cfstat__n { font-family: var(--font-display); font-weight: 800; font-size: 38px; line-height: 1.05;
  background: linear-gradient(90deg, #7cc8ef, var(--blue-300)); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; }
.cfstat__l { font-size: 13px; color: var(--muted); line-height: 1.5; margin-top: 4px; }

/* Exec-summary sidebars: items reveal as the panel scrolls into view (staggered
   via inline transition-delay), and glow softly on hover. The hidden state only
   applies once JS marks the panel ready, so content is never stuck invisible. */
/* Reveal: JS staggers it per item (no transition-delay, so hover stays snappy). */
.case-feature__side .reveal { opacity: 0; transform: translateY(10px);
  transition: opacity .45s ease, transform .2s ease; }
.case-feature__side .reveal.is-revealed { opacity: 1; transform: none; }
/* Hover = a slight grow (from the left edge). No underline, no boxed shade. */
.case-feature__side .cfsrc, .case-feature__side .cfb, .case-feature__side .cfstat { transform-origin: left center; }
.case-feature__side .cfsrc:hover, .case-feature__side .cfb:hover, .case-feature__side .cfstat:hover { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .case-feature__side .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  .case-feature__side .cfsrc:hover, .case-feature__side .cfb:hover, .case-feature__side .cfstat:hover { transform: none; }
}
@media (max-width: 900px) {
  .case-feature { grid-template-columns: 1fr; gap: 22px; }
  .case-feature__side { border-left: 0; border-top: 1px solid var(--border-2); padding: 18px 0 0; }
}

/* Key-insight cards: icon + hover lift */
.ki-card { position: relative; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.ki-card p { color: var(--text-soft); font-size: 14.5px; line-height: 1.65; }
.ki-card h3 { font-size: 17px; margin: 12px 0 8px; }
.ki-card__ico { display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 12px; background: rgba(43,191,122,.14); color: var(--green-300); }
.ki-card__ico svg { width: 21px; height: 21px; }
.ki-card:hover { transform: translateY(-4px); border-color: rgba(54,168,223,.5);
  box-shadow: 0 18px 40px -18px rgba(54,168,223,.45); }

/* Per-benefit distribution chart on the proven/projected cards */
.pp-chart { margin: 12px 0 10px; padding: 12px 12px 8px; border-radius: 12px;
  background: rgba(255,255,255,.04); border: 1px solid var(--border); }
.pp-chart__lab { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 6px; }
.band-svg { width: 100%; height: auto; display: block; }

/* Financial snapshot tiles in a row (exec summary) */
.scenarios--row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px) { .scenarios--row { grid-template-columns: 1fr; } }

/* Report sub-navigation (sticky) */
/* In-page report nav: only as wide as the left ro-grid content (1fr, with the
   340px side + 36px gap reserved), squared top corners so it tucks flush under
   the command-card overlay (rounded bottom matches the overlay's 16px radius). */
.report-toc { position: sticky; top: 74px; z-index: 50; overflow: hidden; display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  max-width: calc(100% - 392px); margin: -8px 0 18px 16px; padding: 14px 14px 13px; border-radius: 0 0 16px 16px;
  background: rgba(4,18,40,.96); border: 1px solid var(--border-2); border-top: 0; backdrop-filter: blur(8px); }
/* Pull the report sub-nav up so it starts right under the command card. */
#roi-mount [data-roisection="report"] .section-tight { padding-top: 0; }
/* Active section + a green progress fill (first→last) along the bottom; the
   pill's overflow:hidden clips the bar to its rounded shape. JS drives both. */
.report-toc button.is-active { background: rgba(43,191,122,.18); color: #fff; border-color: rgba(43,191,122,.5); }
.report-toc__bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; pointer-events: none;
  background: linear-gradient(90deg, var(--green), var(--green-300)); transition: width .15s ease; }
.report-toc__lab { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); margin: 0 6px 0 8px; }
.report-toc button { appearance: none; border: 1px solid transparent; background: transparent; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--text-soft);
  padding: 7px 13px; border-radius: 999px; transition: background .15s; }
.report-toc button:hover { background: rgba(54,168,223,.14); color: #fff; border-color: rgba(54,168,223,.3); }
/* Below desktop these must follow the base rule above to override the desktop
   max-width. The side column sits BELOW the toc (not beside it), so once the
   content column gets too narrow to hold the pills in one row (~1180px and
   down) the toc takes full width and stays flush-left under the command card —
   no orphaned second-row pill. */
@media (max-width: 1180px) {
  .report-toc { max-width: none; margin-left: 0; }
}
@media (max-width: 700px) {
  .report-toc { position: static; margin: 12px 0 16px; padding: 11px 12px 12px;
    border-radius: 14px; border-top: 1px solid var(--border-2); row-gap: 8px; }
  .report-toc__lab { width: 100%; margin: 0 0 2px; }
  .report-toc button { white-space: nowrap; }
}

/* Report readability: lead lines + bullets, brighter and bigger */
.ro-standfirst { font-size: 19px !important; color: #e2eaf7 !important; line-height: 1.75; }
.ro-lead { font-size: 19px; line-height: 1.78; color: #e9eff9; margin: 6px 0 10px; }
.ro-bullets { margin: 0 0 20px; padding-left: 22px; }
.ro-bullets li { font-size: 19px; line-height: 1.7; color: #d3ddee; margin-bottom: 10px; }
.ro-bullets li::marker { color: var(--teal-300, #2fb3bd); }
.cs-theme { font-size: 16px !important; }

/* Report inline graphics */
.ro-graphic { margin: 16px 0 22px; padding: 16px 18px; border-radius: 12px;
  background: rgba(255,255,255,.04); border: 1px solid var(--border); }
.ro-graphic__h { margin: 0 0 12px; font-size: 13.5px; color: var(--text-soft); }
.ro-graphic__src { margin-top: 8px; font-size: 11.5px; color: var(--muted); }
.drv { display: grid; grid-template-columns: minmax(160px, 46%) 1fr 44px; gap: 10px; align-items: center; margin-bottom: 8px; }
.drv__lab { font-size: 12.5px; color: var(--text-soft); line-height: 1.3; }
.drv__bar { height: 12px; border-radius: 999px; background: rgba(255,255,255,.07); overflow: hidden; }
.drv__bar span { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--teal), var(--blue)); }
.drv__val { font-family: var(--font-display); font-weight: 800; font-size: 12.5px; color: var(--green-300); text-align: right; }


/* ============================================================================
   Round-6: bold lead sentences, hero contrast + marker, methodology layout,
   analyst-note meta
   ========================================================================== */

/* Bolded first sentence in executive-summary body text */
.lead-b { color: #fff; font-weight: 800; }

/* Hero publish/updated dates: brighter for contrast over the gradient */
.pubdates { color: rgba(234, 241, 251, .82); }
.pubdates__item b { color: #fff; }
.pubdates .livedot { flex: none; }

/* Quartile bar: average marker at its true proportional position */
.rhc-range__bar { position: relative; }
.rhc-range__marker { position: absolute; top: -4px; bottom: -4px; width: 3px; border-radius: 2px;
  background: #fff; box-shadow: 0 0 6px rgba(0, 0, 0, .45); transform: translateX(-50%); }

/* Methodology layout (both experiences): opening statement, generous spacing */
.method-open { max-width: 86ch; }
.method-open p { font-size: 17px; line-height: 1.75; color: #dce5f4; margin: 0 0 14px; }
.method-open__sponsor { font-size: 14.5px !important; color: var(--muted) !important;
  border-left: 3px solid var(--teal-300, #2fb3bd); padding-left: 14px; }
.method-sec { margin-top: 34px; }
#roiMethod h3, [data-id="methodology"] h3 { margin-bottom: 14px; }
#roiMethod .table-wrap, [data-id="methodology"] .table-wrap { margin-top: 14px; }
#roiMethod .data th, [data-id="methodology"] .data th { padding-top: 12px; padding-bottom: 12px; }
#roiMethod .data td, [data-id="methodology"] .data td { padding-top: 11px; padding-bottom: 11px; }

/* Sponsor disclosure */
.disclosure { max-width: 96ch; padding-top: 22px; border-top: 1px solid var(--border-2); }
.disclosure h3 { font-size: 14px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.disclosure p { font-size: 13px; line-height: 1.7; color: var(--muted); margin: 0; }

/* Analyst note: article-style byline row */
.note-meta { display: flex; align-items: center; gap: 12px; margin: 16px 0 20px; }
.note-meta .avatar { width: 44px; height: 44px; flex: none; background-size: cover; background-position: center; }
.note-meta__who { display: flex; flex-direction: column; line-height: 1.3; }
.note-meta__who b { color: #fff; font-family: var(--font-display); font-size: 15px; }
.note-meta__who span { color: var(--muted); font-size: 12.5px; }
.note-meta__date { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--teal-300, #2fb3bd);
  padding: 5px 12px; border: 1px solid rgba(47,179,189,.35); border-radius: 999px; white-space: nowrap; }
.note-prose p { font-size: 17px; line-height: 1.75; }

/* ============================================================================
   Round-7: TOC download button, blur gate, methodology layout, note wrap
   ========================================================================== */

/* Download button nested at the right of the report sub-nav */
.report-toc__dl { margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  border-radius: 999px; font-size: 12.5px; padding: 8px 14px; }
@media (max-width: 900px) { .report-toc__dl { margin-left: 0; } }

/* Gated content: blurred beneath a floating register card */
.gatewrap { position: relative; }
.gatewrap__content.is-locked { filter: blur(8px) saturate(.8); pointer-events: none; user-select: none; }
.gatewrap__veil { position: absolute; top: 56px; left: 50%; transform: translateX(-50%); z-index: 6;
  width: min(540px, 94%); padding: 26px 28px; border-radius: var(--radius);
  background: linear-gradient(180deg, #0a2350, #061c40); border: 1px solid var(--border-2);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .65); text-align: center; }
.gatewrap__veil .gate__form { text-align: left; }
.gatewrap__veil.hidden { display: none; }

/* Methodology: open text sections (no boxes), sub-heads, terms grid */
.method-h { font-size: 19px; }
.method-text { font-size: 17px; line-height: 1.75; color: #dce5f4; max-width: 86ch; margin: 0 0 14px; }
.method-sub { font-size: 14px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--teal-300, #2fb3bd); margin: 26px 0 10px; }
.terms-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; }
.terms-grid .term b { display: block; color: var(--teal-300, #2fb3bd); font-size: 14.5px; margin-bottom: 3px; }
.terms-grid .term span { color: var(--muted); font-size: 13.5px; line-height: 1.6; }
@media (max-width: 720px) { .terms-grid { grid-template-columns: 1fr; } }

/* ROI analyst note */
.note-wrap { max-width: 88ch; }


/* ============================================================================
   Round-8: ROI hero intro animation (numbers tick in, marker rises)
   ========================================================================== */
/* (Marker slide-in is driven inline by FCR.roiHeroIntro: the quartile labels
   stay fixed and the line travels from the bar's left end to its position.) */

/* Gate veil, unlocked state: becomes the four-format download picker */
.gatewrap__veil--unlocked { width: min(680px, 96%); }
.gatewrap__veil--unlocked .export-grid { margin-top: 16px; text-align: left; }
.gatewrap__continue { margin-top: 16px; }

/* Gate veil: demo hint */
.gate__demo-note { margin: 2px 0 10px; font-size: 12px; color: var(--amber); opacity: .85; }

/* ============================================================================
   Round-10: floating tablet-view link (stacked above the AI fab)
   ========================================================================== */
/* (.tablet-fab styling now comes from .fabcluster__item; the class remains only
   as a hook for app.js's per-experience href update + the verifier.) */

/* ============================================================================
   2026-06-28: "Personalize Your Insights" section
   ========================================================================== */
/* Inline tailor controls (a synced copy of the header "Customize" popup). */
.insights-tailor { margin: 2px 0 24px; }
.insights-tailor__lab { display: block; font-family: var(--font-display); font-weight: 800;
  text-transform: uppercase; letter-spacing: .12em; font-size: 11px; color: var(--teal-300); margin-bottom: 10px; }
.insights-tailor__filters select { min-width: 150px; }

/* Personalized read — on-page prose with a green spine + corner label, sized to
   match the executive-summary prose (bigger than the old boxed card). */
.personalized-read { position: relative; border-left: 4px solid var(--green);
  border-radius: 0 6px 6px 0; padding: 30px 8px 6px 22px; margin-bottom: 4px; }
.personalized-read__tag { position: absolute; top: 4px; right: 6px; display: inline-flex;
  align-items: center; gap: 6px; font-family: var(--font-display); font-weight: 800;
  text-transform: uppercase; letter-spacing: .1em; font-size: 11px; color: var(--green-300); }
.personalized-read p { font-size: 17px; line-height: 1.7; color: #eaf1fb; margin: 0 0 12px; }
.personalized-read p:last-child { margin-bottom: 0; }

/* Share / register CTA row under the personalized read. */
.insights-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0 4px; }

/* "Your expected" metric boxes — green you-number, then Average + Top quartile. */
.metric__value--you { color: var(--green-300); }
.metric__cmp { margin-top: 12px; border-top: 1px solid var(--border-2); padding-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.metric__cmp-row { display: flex; align-items: baseline; justify-content: space-between; font-size: 13px; color: var(--muted); }
.metric__cmp-row b { color: #dce5f4; font-family: var(--font-display); }

/* Self-assessment result — standing band + quantified gaps + flipping takeaway. */
.sa-result { margin-top: 12px; }
.sa-result__band { display: inline-block; font-family: var(--font-display); font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em; font-size: 11px; padding: 4px 11px; border-radius: 999px; margin-bottom: 8px; }
.sa-result__band--good { background: rgba(43,191,122,.16); color: var(--green-300); }
.sa-result__band--mid { background: rgba(54,168,223,.16); color: var(--blue-300); }
.sa-result__band--low { background: rgba(245,177,76,.16); color: var(--amber); }
.sa-result__cmp { margin: 0 0 6px; font-size: 14.5px; color: #eaf1fb; line-height: 1.55; }
.sa-result__cmp b { color: var(--green-300); }
.sa-result__take { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.55; }

/* Hero byline: push "Last updated" to the right of the name/title. */
.hero__byline { flex-wrap: wrap; row-gap: 8px; }
.hero__byline-spacer { flex: 1 1 auto; }
.lastupd { appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.3); color: #e6f0fc;
  border-radius: 999px; padding: 7px 15px; font-family: var(--font-display); font-weight: 700; font-size: 12.5px; }
.lastupd:hover { background: rgba(255,255,255,.15); color: #fff; }
.lastupd__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: lpulse 1.8s infinite; }

/* Hero right-column action stack: video thumb → personalize → register. */
.hero-actions { display: flex; flex-direction: column; gap: 14px; width: 100%; }
.hero-actions__btn { width: 100%; justify-content: center; }
.hero-video { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; cursor: pointer;
  border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border-2);
  background: linear-gradient(150deg, #e8f1ff 0%, #cfe3fb 100%); }
.hero-video__poster { position: absolute; inset: 0; background-image: url('../img/briefing-speaker.png');
  background-size: cover; background-position: right center; }
.hero-video__play { position: absolute; inset: 0; margin: auto; width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center; background: linear-gradient(135deg, var(--teal), var(--blue)); color: #fff;
  font-size: 21px; box-shadow: var(--shadow); transition: transform .15s ease; }
.hero-video:hover .hero-video__play { transform: scale(1.07); }
.hero-video__cap { position: absolute; left: 0; right: 0; bottom: 0; text-align: left; padding: 12px 14px;
  background: linear-gradient(0deg, rgba(0,17,47,.92), transparent); }
.hero-video__cap b { display: block; color: #fff; font-family: var(--font-display); font-size: 14px; line-height: 1.25; }
.hero-video__cap .muted { font-size: 12px; }

/* Analyst note: single author card at top; more space before the Analyst Feed. */
.note-grid { column-gap: 44px; row-gap: 22px; }
.note-meta--author { display: block; margin: 18px 0 22px; }
.note-meta--author .author { margin-top: 0; }
.note-meta--author .note-meta__date { display: inline-block; margin: 12px 0 0; }

/* ROI exec summary: four data sources as clean check rows (not green pills),
   styled like the "four compounding benefits" list. */
.cfsrc { display: flex; gap: 13px; align-items: flex-start; padding: 13px 0; border-bottom: 1px solid var(--border); }
.cfsrc:last-child { border-bottom: 0; }
.cfsrc__check { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(43,191,122,.16); color: var(--green-300); font-size: 12px; font-weight: 800; margin-top: 1px; }
.cfsrc b { font-family: var(--font-display); font-size: 15px; color: #fff; line-height: 1.35; }

/* Data currency as a plain line (no green outlined box). */
.currency-line { display: block; margin-top: 20px; font-size: 13.5px; color: var(--text-soft); line-height: 1.5; }
.currency-line b { color: var(--green-300); }
.currency-line .livedot { display: inline-block; vertical-align: middle; margin-right: 8px; }
.currency-line__stamps { color: var(--muted); font-size: 12px; }
.currency-line__stamps b { color: var(--text-soft); }

/* Drop the LR hero's right column so the video lines up with the title (h1),
   not the eyebrow above it. Desktop two-column layout only. */
@media (min-width: 901px) { #lr-mount .hero-aside { margin-top: 30px; } }

/* ============================================================================
   2026-06-29: Overall ⟷ For-your-segment view (scenario bar + tailored read)
   ========================================================================== */
.controlbar__row--view { display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 14px; margin-top: 10px; }

/* Segmented Overall/segment toggle. */
.viewtoggle { display: inline-flex; background: var(--surface-3); border: 0;
  border-radius: 999px; padding: 4px; gap: 2px; }
.viewtoggle__btn { appearance: none; cursor: pointer; border: 0; background: transparent;
  color: var(--text-soft); font-family: var(--font-display); font-weight: 800; font-size: 14px;
  padding: 9px 18px; border-radius: 999px; white-space: nowrap; }
.viewtoggle__btn:hover { color: #fff; }
.viewtoggle__btn.is-active { background: linear-gradient(135deg, var(--teal), var(--blue)); color: #fff;
  box-shadow: 0 8px 20px -10px rgba(54,168,223,.7); }

/* "Scenario" chip that opens the scenario modal. */
/* Customize Scenario — same .btn pill as Download, blue secondary (not green),
   legible white text. */
.scenario-trigger { background: rgba(54, 168, 223, .16); border-color: rgba(54, 168, 223, .55); color: #fff; }
.scenario-trigger:hover { background: rgba(54, 168, 223, .28); border-color: var(--blue); }
.scenario-trigger__lab { font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  letter-spacing: .12em; font-size: 11px; color: var(--teal-300); flex: none; }
.scenario-trigger__sel { color: var(--text-soft); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scenario-trigger__sel b { color: #fff; font-weight: 700; }
.scenario-trigger__caret { color: var(--muted); font-size: 11px; flex: none; }

/* Tailored-read banner shown at the top of the reading in segment view. */
#lr-mount[data-lrview="segment"] .case-feature--lr { border-left: 3px solid var(--green); padding-left: 22px; }
.lr-tailored { background: linear-gradient(135deg, rgba(43,191,122,.12), rgba(0,112,122,.08));
  border: 1px solid rgba(43,191,122,.32); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 22px; }
.lr-tailored__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.lr-tailored__tag { font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  letter-spacing: .1em; font-size: 11px; color: var(--green-300); }
.lr-tailored__reset { appearance: none; cursor: pointer; border: 1px solid var(--border-2); background: transparent;
  color: var(--text-soft); border-radius: 999px; padding: 5px 13px; font-family: var(--font-display); font-weight: 700; font-size: 12px; }
.lr-tailored__reset:hover { color: #fff; border-color: var(--blue); }
.lr-tailored__lead { margin: 10px 0 8px; font-size: 16px; line-height: 1.6; color: #eef3fb; }
.lr-tailored__rec { margin: 0; font-size: 14.5px; color: var(--text-soft); }
.lr-tailored__rec b { color: var(--green-300); }
.lr-tailored__note { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); }

/* Scenario-picker legend for the ★ rich-segment markers. */
.filters__legend { margin: 12px 0 0; font-size: 12px; color: var(--muted); line-height: 1.5; }

/* End-of-reading register block (single primary CTA at the natural close). */
.endcta { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  margin-top: 34px; padding: 22px 24px; border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(54,168,223,.10), rgba(0,42,104,.18)); border: 1px solid var(--border-2); }
.endcta__copy b { display: block; font-family: var(--font-display); font-size: 17px; color: #fff; }
.endcta__copy span { display: block; margin-top: 4px; color: var(--text-soft); font-size: 14px; max-width: 62ch; }
.endcta .btn { flex: none; }

/* ============================================================================
   2026-06-29: accessibility wins (global)
   ========================================================================== */
/* Visible keyboard focus everywhere. Inputs/selects/.export-opt keep their own
   richer focus ring (more specific rules win); this covers buttons, links,
   pills, fabs, the toggle, etc., which previously had no consistent indicator. */
:focus-visible { outline: 2px solid var(--blue-300); outline-offset: 2px; border-radius: 3px; }

/* "Ask AI" is now a real <button>; strip native chrome so it still reads as a
   quiet inline affordance (font-size/color come from .ask-ai-link above). */
button.ask-ai-link { appearance: none; -webkit-appearance: none; border: 0; background: transparent;
  padding: 0; margin: 0; cursor: pointer; font-family: inherit; line-height: inherit; }

/* Respect prefers-reduced-motion: stop decorative loops and collapse long
   transitions/auto-advance so nothing moves on its own. */
@media (prefers-reduced-motion: reduce) {
  .ticker__track, .livedot, .apptabs--pulse .apptab[aria-selected="true"] { animation: none !important; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

/* ============================================================================
   2026-06-29: navigation tiers — reduce pill reliance (Living Research only)
   ========================================================================== */
/* Tier 1: section nav becomes a quiet underline tab bar (scoped to #lr-mount so
   the ROI experience's pill nav is untouched until its own pass). */
#lr-mount .masthead-nav .pillnav { gap: 4px; }
#lr-mount .pillnav button {
  background: transparent; border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  padding: 12px 16px; margin-bottom: 0; color: var(--text-soft); box-shadow: none; }
#lr-mount .pillnav button:hover { background: transparent; color: #fff; border-color: var(--border-2); transform: none; }
#lr-mount .pillnav button.is-active { background: transparent; color: #fff; border-bottom-color: var(--blue); box-shadow: none; }

/* Explore tabs ride on the hero (masthead), on the blue — white text + white
   active underline for contrast against the gradient. */
.masthead-nav { position: relative; z-index: 1; display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap; margin-top: clamp(22px, 3vw, 36px); }
.masthead-nav .sectnav__label { color: #bfe3ff; }
#lr-mount .hero .pillnav button { color: rgba(255,255,255,.82); }
#lr-mount .hero .pillnav button:hover { color: #fff; border-bottom-color: rgba(255,255,255,.45); }
#lr-mount .hero .pillnav button.is-active { color: #fff; border-bottom-color: #fff; }

/* Reading controls become a frosted, floating, sticky command card just below
   the masthead. It lifts off the page (shadow) and pins on scroll. */
.commandcard-wrap { position: sticky; top: 14px; z-index: 60; margin-top: -26px; margin-bottom: 8px; }
.commandcard { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: rgba(8, 28, 66, .72); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid var(--border-2); border-radius: 16px; padding: 12px 16px;
  box-shadow: 0 22px 48px -24px rgba(0, 0, 0, .75); }
@media (max-width: 700px) { .commandcard-wrap { position: static; margin-top: 14px; } }

/* The command card is the default (and only) nav: two labelled fields on the
   left (Section, View), Customize Scenario + Download on the right. */
.commandcard { justify-content: space-between; gap: 16px 24px; }
.cc-group { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.cc-group--right { gap: 12px; }
.cc-field { display: flex; align-items: center; gap: 10px; }
.cc-field__label { font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  letter-spacing: .12em; font-size: 11px; color: var(--teal-300); flex: none; }

/* Section dropdown (the section list IS the canonical data-pillnav nav). */
.cc-dropdown { position: relative; }
/* The current Section chip uses the same blue as the active View toggle, so
   "what you're currently seeing" always reads in that blue. */
.cc-section { display: inline-flex; align-items: center; gap: 9px; appearance: none; cursor: pointer;
  border: 0; background: linear-gradient(135deg, var(--teal), var(--blue)); color: #fff;
  font-family: var(--font-display); font-weight: 800; font-size: 14px; padding: 11px 18px; border-radius: 999px;
  box-shadow: 0 8px 20px -10px rgba(54, 168, 223, .7); transition: transform .15s ease, filter .2s ease, box-shadow .2s ease; }
.cc-section:hover { filter: brightness(1.07); }
.cc-section__caret { width: 16px; height: 16px; flex: none; color: rgba(255, 255, 255, .9); transition: transform .2s ease; }
/* Hamburger glyph: hidden on desktop, shown only in the compact (≤640) menu. */
.cc-section__burger { display: none; width: 18px; height: 18px; flex: none; color: #cfe0f5; }
.cc-dropdown.is-open .cc-section__caret { transform: rotate(180deg); }
/* Popover sits flush under the chip (no hover gap) and grows downward; opening
   is quick, the fold-away is ~2x slower (JS adds a ~0.75s close delay too). */
.cc-nav { position: absolute; top: 100%; left: 0; z-index: 70; min-width: 240px;
  display: flex; flex-direction: column; gap: 2px; padding: 8px 6px 6px;
  background: rgba(8, 28, 66, .97); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--border-2); border-radius: 14px; box-shadow: 0 24px 50px -22px rgba(0, 0, 0, .8);
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px) scaleY(.96);
  transform-origin: top center; transition: opacity .36s ease, transform .42s cubic-bezier(.4,0,.2,1), visibility .42s; }
.cc-dropdown.is-open .cc-nav { opacity: 1; visibility: visible; pointer-events: auto; transform: none;
  transition: opacity .16s ease, transform .2s cubic-bezier(.2,.8,.2,1), visibility 0s; }
.cc-nav button { appearance: none; cursor: pointer; text-align: left; border: 0; background: transparent;
  color: var(--text-soft); font-family: var(--font-display); font-weight: 800; font-size: 14px;
  padding: 9px 12px; border-radius: 9px; }
.cc-nav button:hover { color: #fff; background: var(--surface-2); }
.cc-nav button.is-active { color: #fff; background: linear-gradient(135deg, var(--teal), var(--blue)); }

/* ROI command card: section nav shown as inline PILLS (instead of LR's dropdown
   chip) — there's room to surface every page. Quiet by default; the current page
   reads in the same teal→blue as the Section chip / active toggle elsewhere, so
   "where you are" stays consistent. The calculator + Download keep their green. */
.cc-sectnav { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cc-sectnav button { appearance: none; cursor: pointer; border: 1px solid var(--border-2);
  background: transparent; color: var(--text-soft); font-family: var(--font-display);
  font-weight: 800; font-size: 14px; padding: 10px 16px; border-radius: 999px;
  transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .2s ease; }
.cc-sectnav button:hover { color: #fff; background: rgba(255,255,255,.08); border-color: var(--blue-300); }
.cc-sectnav button.is-active { color: #fff; border-color: transparent;
  background: linear-gradient(135deg, var(--teal), var(--blue)); box-shadow: 0 8px 20px -10px rgba(54,168,223,.7); }

/* ROI command card — its own collapse behavior (overrides the shared LR ladder).
   It stays a single space-between row from desktop down to phone; the section
   pills + the calculator collapse into ONE dropdown when the row would wrap; the
   Download button stays separate. Only at true phone sizing does it stack. */
#roi-mount .cc-roidd { display: none; }   /* dropdown hidden by default (pills shown) */
/* The ROI Calculator is the emphasized action inside the collapsed menu:
   set off by a divider, green text, green fill on hover/active. */
#roi-mount .cc-roinav-menu .cc-nav__calc { display: flex; align-items: center; gap: 8px;
  margin-top: 5px; padding-top: 12px; border-top: 1px solid var(--border-2); color: var(--green-300); }
#roi-mount .cc-roinav-menu .cc-nav__calc svg { width: 15px; height: 15px; flex: none; }
#roi-mount .cc-roinav-menu .cc-nav__calc:hover,
#roi-mount .cc-roinav-menu .cc-nav__calc.is-active { background: linear-gradient(135deg, var(--green), var(--teal)); color: #fff; }

/* Collapse the pills + calculator into the dropdown once the row would wrap.
   (~1100: tuned so the inline pills stay until they're actually out of room.) */
@media (max-width: 1100px) {
  #roi-mount .cc-sectnav { display: none; }
  #roi-mount .cc-roidd { display: inline-flex; }
  #roi-mount .cc-calc-btn { display: none; }   /* calculator now lives in the dropdown */
}
/* Between the collapse point and phone: keep ONE space-between row (override the
   shared full-width stretch) so the dropdown and Download just sit apart. */
@media (max-width: 1100px) and (min-width: 641px) {
  #roi-mount .commandcard { flex-wrap: nowrap; align-items: center; }
  #roi-mount .cc-group--left { flex: 0 1 auto; }
  #roi-mount .cc-group--right { flex: 0 0 auto; }
  #roi-mount .cc-section { width: auto; }
  #roi-mount .cc-group--right .btn { flex: 0 0 auto; width: auto; }
}
/* True phone: stack and fill the width. */
@media (max-width: 640px) {
  #roi-mount .cc-roidd, #roi-mount .cc-roidd .cc-section { width: 100%; }
  #roi-mount .cc-section { justify-content: space-between; }
  #roi-mount .cc-group--right .btn { width: 100%; }
}

/* Buttons swell slightly on hover (instead of lifting straight up) — feels like
   they invite a click. Scoped to Living Research. */
#lr-mount .btn:hover { transform: scale(1.04); }

/* First-visit attention pulse on the Section chip: two soft rings, then JS opens
   the menu for ~2s and the pulsing stops. (Suppressed under reduced-motion.) */
@keyframes ccPulse {
  0%   { box-shadow: 0 8px 20px -10px rgba(54,168,223,.7), 0 0 0 0 rgba(54,168,223,.55); }
  70%  { box-shadow: 0 8px 20px -10px rgba(54,168,223,.7), 0 0 0 13px rgba(54,168,223,0); }
  100% { box-shadow: 0 8px 20px -10px rgba(54,168,223,.7), 0 0 0 0 rgba(54,168,223,0); }
}
.cc-section.cc-pulse { animation: ccPulse 2s ease-out 2; }

/* Tier 3: metadata reads as a quiet link, not a button/pill. */
.lastupd { background: transparent; border: 0; border-radius: 0; padding: 0; color: var(--text-soft); }
.lastupd:hover { background: transparent; color: #fff; text-decoration: underline; }
.lr-tailored__reset { border: 0; background: transparent; border-radius: 0; padding: 0;
  color: var(--text-soft); text-decoration: underline; }
.lr-tailored__reset:hover { color: #fff; border-color: transparent; }

/* ============================================================================
   Nav variant: "expand-right" — the section list wipes rightward over the card
   content (covering View/controls) instead of dropping down. Toggle via
   livingResearch.navVariant. The "dropdown" variant uses the base rules above.
   ========================================================================== */
.commandcard { position: relative; }
.commandcard--expandright .cc-dropdown { position: static; }
/* The View toggle + Customize Scenario fade away when expanded; the section pill
   takes their space, while the SECTION label (left) and Download (right) stay. */
.commandcard--expandright .cc-field--view,
.commandcard--expandright #lrScenarioOpen { transition: opacity .3s ease, visibility .3s; }
.commandcard--expandright.cc-open .cc-field--view,
.commandcard--expandright.cc-open #lrScenarioOpen { opacity: 0; visibility: hidden; }
/* The section list is a pill anchored on the chip (left/width/height set by JS)
   that grows rightward via a ROUNDED clip wipe — same 999px radius as the chip,
   so it reads as the pill stretching. Lighter toward the leading (right) edge. */
.commandcard--expandright .cc-nav {
  position: absolute; top: 50%; transform: translateY(-50%); left: 0; width: 0; height: 44px; z-index: 5;
  flex-direction: row; align-items: center; gap: 0; padding: 0; border: 0; border-radius: 999px;
  background: linear-gradient(135deg, var(--teal) 0%, var(--blue) 115%);
  -webkit-backdrop-filter: blur(10px) saturate(1.1); backdrop-filter: blur(10px) saturate(1.1);
  box-shadow: 0 16px 38px -16px rgba(54,168,223,.6), inset 0 1px 0 rgba(255,255,255,.3), inset 0 0 0 1px rgba(255,255,255,.14);
  opacity: 1; visibility: visible;
  clip-path: inset(0 100% 0 0 round 999px); pointer-events: none;
  transition: clip-path .6s cubic-bezier(.4,0,.15,1); }
.commandcard--expandright .cc-dropdown.is-open .cc-nav {
  clip-path: inset(0 0 0 0 round 999px); transform: translateY(-50%); pointer-events: auto; }
.commandcard--expandright .cc-nav button { position: relative; padding: 10px 18px; white-space: nowrap;
  border-radius: 999px; color: rgba(255,255,255,.92); transition: background .15s ease, color .15s ease; }
.commandcard--expandright .cc-nav button:hover { color: #fff; background: rgba(255,255,255,.16); }
.commandcard--expandright .cc-nav button + button { margin-left: 2px; }
.commandcard--expandright .cc-nav button + button::before {
  content: ""; position: absolute; left: -2px; top: 50%; transform: translateY(-50%);
  width: 1px; height: 18px; background: rgba(255,255,255,.28); }
/* the whole bar is the gradient; the current section is marked with an underline */
.commandcard--expandright .cc-nav button.is-active { color: #fff; background: transparent; box-shadow: none; }
.commandcard--expandright .cc-nav button.is-active::after {
  content: ""; position: absolute; left: 18px; right: 18px; bottom: 6px; height: 2px; border-radius: 2px;
  background: #fff; box-shadow: 0 0 8px rgba(255,255,255,.6); }
/* bright leading edge — a soft sheen that rides the wave front rightward */
.commandcard--expandright .cc-nav::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 90px; border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5)); opacity: 0; pointer-events: none; }
.commandcard--expandright .cc-dropdown.is-open .cc-nav::after { animation: ccWave .6s cubic-bezier(.4,0,.15,1); }
@keyframes ccWave { 0% { opacity: 0; transform: translateX(-50px); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateX(var(--cc-w, 600px)); } }

/* Compact View dropdown (an alternate to the segmented toggle, reusing the
   Section dropdown's classes — cc-dropdown/cc-section/cc-section__name/
   cc-section__caret/cc-nav — so chip, caret rotate, and popover come for free).
   Hidden by default; a narrower stage swaps it in for the segmented toggle. */
.cc-viewdd { display: none; }

/* ============================================================================
   2026-06-29: progressive responsive collapse of the command card (+ video).
   The one-row card needs ~1180px; rather than one stack-everything cutoff it
   degrades in stages so the in-between widths read well:
     ≤1180  View segmented toggle → a compact dropdown (keeps one line longer).
     ≤1080  CTAs drop to their own line and fill it 50/50; Section + View share
            line 1 and stretch to fill it 50/50 (no more left-aligned wrap).
     ≤900   hero is single-column → cap the now-full-width video to a clip.
     ≤640   Section + View each take their own full-width line; Section becomes a
            cleared hamburger button; the View dropdown fills its line; CTAs 50/50.
   Section + the View dropdown are click-only at these widths (JS isStacked),
   so an opened menu can't cover the controls beneath it on hover.
   The three floating fabs (Tablet view, Ask AI, Learn) are left for later.
   ========================================================================== */

/* ≤1180 — swap the wide segmented View toggle for the compact dropdown. The
   card still lays out on one line; the dropdown just needs less room. */
@media (max-width: 1180px) {
  .viewtoggle { display: none; }
  .cc-viewdd { display: inline-flex; }
}

/* ≤1080 — one line no longer holds everything: CTAs wrap to their own line and
   fill it 50/50; Section + View share line 1 and stretch to fill it 50/50.
   Everything reaches the edges instead of sitting left-aligned. */
@media (max-width: 1080px) {
  .commandcard { flex-wrap: wrap; align-items: stretch; gap: 14px; }
  .cc-group--left  { flex: 1 1 100%; gap: 16px; }
  .cc-group--right { flex: 1 1 100%; gap: 12px; }
  .cc-group--left .cc-field { flex: 1 1 0; }
  .cc-field--section .cc-dropdown,
  .cc-field--view .cc-viewdd { flex: 1 1 auto; }
  .cc-section { width: 100%; justify-content: space-between; }
  .cc-group--right .btn { flex: 1 1 0; justify-content: center; }
}

/* ≤900 — hero is single-column, so the full-width video gets a height cap. */
@media (max-width: 900px) {
  .hero-video { aspect-ratio: auto; height: clamp(160px, 30vw, 220px); }
}

/* ≤640 — phones: Section + View each get their own full-width line (label above
   control); Section becomes a cleared hamburger button (scoped so the View
   trigger keeps its chip look); the View dropdown fills its line; CTAs stay
   50/50 from the ≤1080 rule. */
@media (max-width: 640px) {
  .commandcard { padding: 14px; }
  .cc-group--left { flex-direction: column; align-items: stretch; gap: 12px; }
  .cc-group--left .cc-field { flex: none; flex-direction: column; align-items: stretch; gap: 7px; }

  .cc-field--section .cc-dropdown { width: 100%; }
  .cc-field--section .cc-section { justify-content: flex-start; gap: 11px;
    background: rgba(255,255,255,.06); color: #fff; box-shadow: none; border: 1px solid var(--border-2); }
  .cc-field--section .cc-section:hover { filter: none; background: rgba(255,255,255,.1); }
  .cc-field--section .cc-section__burger { display: block; }
  .cc-field--section .cc-section__caret { display: none; }
  .commandcard--dropdown .cc-nav { left: 0; right: 0; width: auto; min-width: 0; }
}