/* ============================================================================
   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 — Brand Book v1.1 (#7605) */
  --navy:        #023358;   /* primary brand navy (was #001740) */
  --navy-700:    #042554;
  --navy-600:    #0a2d63;
  --teal:        #00707A;   /* chart series accent — kept for series differentiation */
  --teal-300:    #2fb3bd;   /* chart palette slot 5 — kept for series differentiation */
  --blue:        #07A7E8;   /* Vivid Blue — canonical Futurum accent */
  --blue-300:    #77CFF2;   /* the --blue tint: #07A7E8 mixed 45% toward white */

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

  /* Futurum POMEGRANATE (2026-09-10, polish 2 — Ben). The brand's second
     signature colour: `.apptab` already paints itself with the #8e0040 →
     #46162f gradient, but neither end was a token, so nothing else on the
     site could reach it. Both ends are named here, plus a lighter tint that
     reads on the dark card ground: #8e0040 itself is too dark against
     --bg (then #00112f) to carry a data series, so --pomegranate-300 is what the
     charts use. Chosen from the ~#c2185b range Ben named, at the bright end
     of it, because series B has to look MORE important than series A
     (--blue, #07A7E8) rather than less — #c2185b itself reads as a recessive
     maroon beside that blue on this ground. */
  --pomegranate:     #8e0040;
  --pomegranate-700: #46162f;   /* the .apptab gradient partner */
  --pomegranate-300: #d81b60;   /* the on-dark tint the charts draw with */

  /* Palette hues 7 and 8 (2026-09-10, polish 2). The chart palette had six
     hues and two of them (--blue / --blue-300) were the same light blue at
     two lightnesses, which is not a distinct hue in a legend. A violet and a
     coral join, and --blue-300 leaves the palette (it stays a token; it is
     still used for tints elsewhere), so eight categories in one chart get
     eight hues nobody has to read twice. */
  --violet:      #a78bfa;
  --violet-300:  #c4b5fd;
  --coral:       #ff8a6b;

  /* SEMANTIC SCALE anchors (2026-09-10, polish 2 — Ben's `scale:` field).
     An ordinal answer set (Likert importance, concern, agreement, readiness,
     time-to-move) is not a set of categories: it is a scale, so it gets a
     ramp rather than eight unrelated hues. Three families, all anchored
     here so a host restyling the site restyles the ramps with it:
       sentiment          bad -> neutral -> good   (orange, tan, green)
       neutral            low -> high              (pale blue -> brand blue)
       emphasis           one highlighted category (pomegranate) + muted rest
     assets/js/lr-chart-rules.js holds the same literals as its var()
     fallbacks and mixes the intermediate steps in OKLab. */
  --scale-bad:          #f5b14c;
  --scale-mid:          #f6e7cf;
  --scale-good:         #2bbf7a;
  --scale-neutral-low:  #cfe9fb;
  --scale-neutral-high: #07A7E8;
  --scale-muted:        #55688a;

  /* Dark theme surfaces — primary gradient per Brand Book v1.1 (#7605) */
  --bg:          #023358;   /* was #00112f */
  --bg-grad-1:   #023358;
  --bg-grad-2:   #050f18;
  --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 — body copy black or white only per Brand Book v1.1 (#7605) */
  --text:        #ffffff;   /* was #eaf1fb */
  --text-soft:   #c4d2e8;
  --muted:       #93a6c4;
  --muted-2:     #8a9fc0;   /* lightened for AA contrast (≥4.5:1) against new --bg #023358 */
  /* 2026-08-21 readability pass: dedicated PROSE token, matching the house
     standard (fcr-tokens.css --text-soft #e8effa). This site's --text-soft
     (#c4d2e8) predates the standard and is used ~40x for control/label text,
     so it keeps its value; all reading text (body paragraphs, chart
     descriptions) now uses --text-body instead. House rule 3: nothing a user
     reads as a sentence goes below 14px or dimmer than this. */
  --text-body:   #ffffff;   /* was #e8effa — white per Brand Book */
  --measure-body: 72ch;

  /* 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);

  /* Series colour rule, site-wide (Ben's decision D4, 2026-09-09). Exactly
     three reserved chart colours, defined ONCE here and read by the chart
     core (assets/js/fcr-chart-core.js normalizeView(), keyed off a series'
     `role` field) and by the export path (assets/js/charts.js's
     resolveToken()), so a report page, the Explorer and a PPTX/PDF export can
     never draw the Global sample or the reader's own segment in different
     colours.

     2026-09-10, Unit 4B: the three are now the FIRST THREE hues of the one
     brand chart palette, in plan order — the previous version's own series
     ramp (fcr-chart-core.js's LR_PALETTE: blue, teal, green, blue tint,
     amber, muted-2). Series A stopped being the muted grey dashed
     reference: lines draw solid and every series is a full hue, because
     colour is what distinguishes them now. A/B/C therefore take the ramp's
     first three and a categorical series takes the fourth onwards, so a
     comparison series still cannot be mistaken for Global or the reader.

     2026-09-10, polish 2 (Ben, final): a compare chart draws at most TWO
     series — All respondents and the reader's region × industry scenario —
     and the scenario is the point of the card, so series B is POMEGRANATE
     and has to read as the more important of the two. --lr-reader-deep is
     kept defined (the token is referenced by the export path and by tests)
     but nothing plans a third series any more: the deep filters are
     Explorer-only again. */
  --lr-global:      var(--blue,             #07A7E8);   /* series A — All respondents */
  --lr-reader:      var(--pomegranate-300,  #d81b60);   /* series B — the reader's scenario; also the reader-category highlight */
  --lr-reader-deep: var(--violet-300,       #c4b5fd);   /* reserved; the Explorer's own deeper cut — deliberately NOT a palette hue */
}

/* ----------------------------------------------------------------------------
   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(7,167,232,.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(--blue-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-700) 0%, var(--navy) 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(--blue); }
.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; }
/* Red Hat client logo next to the Futurum logo (2026-08-12). Slightly shorter than the
   Futurum mark so the two read as peer logos; separated by the same hairline the tag uses. */
.brand-logo--client { height: 26px; border-left: 1px solid var(--border-2); padding-left: 24px; }
.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 blue of the in-experience navigation. White text ~9.4:1. */
.apptab[aria-selected="true"] { background: linear-gradient(135deg, var(--pomegranate, #8e0040), var(--pomegranate-700, #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; }
/* 2026-10-01, Brand Book v1.1 (#7605, review F25 + F30/F33): LABEL INK ON THE
   LIT RAMPS. This PR replaced the dark --teal stop with --blue on two gradient
   families, which left every white label on them below AA. Both now carry
   #04193b instead of #fff:

     BLUE ramp   var(--blue) -> var(--blue-300)
                 white 2.73:1 at best, 1.75:1 at worst -- no AA-passing area
                 anywhere. #04193b: 6.38:1 / 7.90:1 midpoint / 9.93:1.
     GREEN ramp  var(--blue) -> var(--green)
                 white 2.73:1 at best, 2.41:1 at the box end, 2.60:1 under a
                 centred label. #04193b: 6.38:1 worst, 6.69:1 centred.

   #04193b rather than a new value because .dist-toggle button[data-cash]
   .is-active already carried it on the blue ramp (see below), so the bundle
   keeps ONE dark-on-blue ink rather than minting a second.

   ELEVEN live controls carry this: six here (.btn-primary, .btn-green,
   .hero__byline .avatar, .viewtoggle__btn.is-active, .cc-section,
   .cc-nav button.is-active) and five in lr-shell.css (listed in its own note).

   Everything else on these two ramps is emitted by NOTHING in this package --
   checked by grepping assets/js, the ten shells and content-pack-v2 for each
   class name, which is the only method that answers the question -- and is
   deliberately LEFT WHITE, because brand.css is shared with the ROI-Spectrum
   calculator where they may well render. Do not "finish the sweep" on them:
     blue ramp   .pillmenu__list, .pillnav, .seg, .seg-uc, .dist-toggle,
                 .ai-msg, .cc-sectnav, .commandcard--expandright,
                 .analysis__ico, .export-opt__ico, .author__photo /
                 .author__initials
     green ramp  .pillnav button.pill-cta, .customize-trigger--hero,
                 #roi-mount .cc-roinav-menu .cc-nav__calc.is-active */
.btn-primary { background: linear-gradient(135deg, var(--blue) 0%, var(--blue-300) 130%); border-color: transparent; color: #04193b; box-shadow: var(--shadow-sm); }
.btn-ghost { background: transparent; }
.btn-ghost:hover { background: var(--surface); }
.btn-green { background: linear-gradient(135deg, var(--blue) 0%, var(--green) 110%); border-color: transparent; color: #04193b; 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: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--blue), var(--blue-300)); display: grid; place-items: center; color: #04193b; font-family: var(--font-display); font-weight: 700; flex: none; }
/* Two-author byline, photos + links (2026-09-15): each author is its own
   row (photo/initials + name/role/tag), the two laid out side by side with
   a gap, wrapping onto their own lines on a narrow screen. */
.hero__byline-authors { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.hero__byline-line { display: inline; line-height: 1.4; }
.hero__byline-tag { opacity: .78; }
/* The whole author block is a link (new tab) when the author has a `url`;
   it keeps the byline's own colour — never the default link blue/underline —
   with a subtle hover instead of the site-wide `a:hover` underline. */
.hero__author { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.hero__author:hover { color: inherit; text-decoration: none; }
.hero__author:hover .hero__byline-line b { text-decoration: underline; }
.hero__author:hover .hero__author-photo { filter: brightness(1.08); }
.hero__author-photo { width: 40px; height: 40px; border-radius: 50%; flex: none; object-fit: cover; }
.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(7,167,232,.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(--blue-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(--blue-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(--blue), 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(--blue), var(--blue-300)); 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(--blue), var(--blue-300)); border-color: transparent; color: #fff; box-shadow: 0 10px 24px -10px rgba(7,167,232,.75); }
/* highlighted calculator pill — always bright green to draw attention */
.pillnav button.pill-cta { background: linear-gradient(135deg, var(--blue) 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; }
/* 2026-08-21 readability pass: was 13px var(--muted) — the named chart-description
   anti-pattern (house rule 3). Chart descriptions are reading text. */
.card .sub { color: var(--text-body); font-size: 16px; line-height: 1.75; max-width: var(--measure-body); 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(7,167,232,.22); color: var(--blue-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(7,167,232,.5); box-shadow: 0 18px 40px -22px rgba(7,167,232,.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(7,167,232,.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(--blue), var(--blue-300)); }
.decision .kicker { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: .14em; font-size: 11px; color: var(--blue-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(7,167,232,.25), 0 18px 44px -22px rgba(7,167,232,.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--solo { grid-template-columns: 1fr; }
.hero-grid--solo h1 { max-width: 44ch; }
.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);} }

/* 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(7,167,232,.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(--blue); }
.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(--blue), var(--blue-300)); 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(--blue-300); margin: 16px 0 4px; }
/* 2026-08-21 readability pass: was 14px (with .muted color from the template) —
   this is the main analytical prose beside every chart. House standard. */
.analysis p { font-size: var(--body-size); line-height: var(--body-lh); color: var(--body-color); max-width: var(--body-measure); }

/* 2026-09-10, polish 1 (Ben): the "What to do" COLOURED BOX is retired. The
   recommendations are a plain list — one themed icon, a bold first sentence,
   body text, no background and no border — and that component (.wtd-list /
   .wtd-item / .wtd-item__ico) lives in lr-shell.css beside the rest of the
   renderer's own markup. `.analyst-callout` (lr-shell.css) was the only other
   user of this box's values and carries its own copy of them, so
   .wtd / .wtd__label / .wtd__body no longer exist anywhere. */

/* 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(--blue); }
.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(--blue); 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(7,167,232,.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(--blue), var(--blue-300)); 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; }
/* 2026-08-21 readability pass: 12px muted → 13px text-soft. These are compact
   metric labels (not prose), so they stay small — but not faded. */
.signal__rows .r { display: grid; grid-template-columns: 88px 1fr 34px; gap: 8px; align-items: center; font-size: 13px; color: var(--text-soft); }
.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(--blue), var(--blue-300)); }
.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(--blue); 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(--blue), var(--blue-300)); 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(--blue), var(--blue-300)); 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(--blue), var(--blue-300)); 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(--blue-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(--blue-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(--blue), var(--blue-300)); 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(7,167,232,.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(7,167,232,.25), 0 18px 44px -22px rgba(7,167,232,.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(--blue); }
.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(--blue), var(--blue-300)); }
.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(7,167,232,.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, var(--pomegranate, #8e0040), var(--pomegranate-700, #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(7,167,232,.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(--blue-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(--blue), var(--blue-300)); 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; }
/* 2026-09-15 (Ben): the lead modal ("About this study") puts its label
   straight above its first paragraph, and 4px read as one crowded block.
   Scoped to a pack modal's dialog and to a paragraph that directly follows
   the heading, so the quotes pop-out's own list keeps its spacing. */
[data-lr-modal-dialog] .modal__title + p { margin-top: 14px; }
.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(7,167,232,.75); }
.export-opt:focus-visible { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(7,167,232,.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(--blue), var(--blue-300)); 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; }
/* 2026-08-21 readability pass: 12px/66% → 13px/80% (format line is short label
   text, but it must stay legible against the dark modal). */
.export-opt__meta { color: rgba(255,255,255,.8); font-size: 13px; }
@media (max-width: 560px) { .export-grid { grid-template-columns: 1fr; } }

/* PNG download modal (color + background choice before a chart PNG
   downloads) — a narrower modal than the Downloads dialog, two small radio
   groups plus a Download button, all existing tokens. */
.modal--png { width: min(360px, 100%); }
.pngopt-group { border: 0; padding: 0; margin: 18px 0 0; }
.pngopt-legend { padding: 0; font-family: var(--font-display); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-soft); }
.pngopt-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 14px; color: #fff; cursor: pointer; }
.pngopt-row input { margin: 0; accent-color: var(--blue); }
.modal--png [data-lr-png-download] { margin-top: 22px; width: 100%; justify-content: center; }

/* 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: #ffffff; 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(--blue-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(--blue); font-style: italic; color: #fff; font-size: 14.5px; line-height: 1.55; }
.bquote cite { display: block; font-style: normal; color: var(--blue-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(7,167,232,.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: #ffffff; }
.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(7,167,232,.7); }
.customize-trigger__ico { color: var(--blue); 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(--blue-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 */
.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(7,167,232,.7); }

/* 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(--blue), var(--blue-300) 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 { font-size: var(--body-size); line-height: var(--body-lh); color: var(--body-color); 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(--blue-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); }
/* 2026-09-16 (a11y fix, keyboard focus indicator): same rule as the site-wide
   `:focus-visible` default (brand.css above), copied explicitly because
   `.vcar__nav`'s own `transition: all .2s ease` was animating the outline IN
   from zero — invisible for the first ~150ms of a Tab stop, which read to a
   keyboard user as no indicator at all. `transition: none` here (scoped to
   the focus-visible state only, so a mouse click's non-focus-visible focus
   is untouched) makes the ring appear immediately instead. */
.vcar__nav--prev:focus-visible,
.vcar__nav--next:focus-visible { transition: none; outline: 2px solid var(--blue-300); outline-offset: 2px; border-radius: 3px; }
@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(--blue-300); }
.taki__heading { font-size: clamp(22px, 2.6vw, 30px); margin: 8px 0 12px; color: #fff; }
.taki__body { font-size: var(--body-size); line-height: var(--body-lh); color: var(--body-color); max-width: var(--body-measure); }
.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; }
/* 2026-09-10, polish 1 (Ben): same treatment as the .cfstat label — the
   tile's label is body type, not a caption. */
.taki__metric .l { font-size: var(--body-size); line-height: var(--body-lh); color: var(--body-color); margin-top: 6px; }
/* The personalized compare row ("All respondents: 66 percent") — the basis
   rule's own line, styled like the delta line beside it (polish 1). */
.taki__metric .src { font-size: var(--body-size); line-height: var(--body-lh); color: var(--body-color); font-style: italic; margin-top: 5px; }
@media (max-width: 860px) { .taki-grid { grid-template-columns: 1fr; gap: 18px; } }
/* 2026-09-16: text-only subsection (no tiles, no pop-outs) — one column at
   the body measure instead of a half-width column beside an empty one. */
.taki--solo .taki-grid { grid-template-columns: 1fr; }
.taki--solo .taki__text { max-width: var(--body-measure, 72ch); }

/* cycling quote box (click to expand all) */
.quotebox { cursor: pointer; background: linear-gradient(135deg, rgba(7,167,232,.2), rgba(7,167,232,.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(7,167,232,.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(--blue-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(--blue), var(--blue-300)); 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(7,167,232,.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(--blue); }
.analysis-quote p { font-style: italic; font-size: var(--body-size); line-height: var(--body-lh); color: var(--body-color); margin: 0 0 5px; }
.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 { font-size: var(--body-size); line-height: var(--body-lh); color: var(--body-color); margin: 0 0 16px; }
.report-callout { margin: 24px 0; padding: 6px 0 6px 22px; border-left: 4px solid var(--blue); 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(--blue-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(7,167,232,.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(7,167,232,.08); border: 1px solid rgba(7,167,232,.25);
  color: var(--blue-300); font-size: 12.5px; font-family: inherit; transition: background .15s; }
.ai-followup:hover { background: rgba(7,167,232,.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: #77CFF2; background: rgba(7,167,232,.10); border: 1px solid rgba(7,167,232,.35); transition: background .15s; }
.about__li:hover { background: rgba(7,167,232,.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(7,167,232,.07); border: 1px solid rgba(7,167,232,.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(7,167,232,.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(--blue), var(--blue-300)); }
.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(7,167,232,.10); border: 1px solid rgba(7,167,232,.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(7,167,232,.16); border-bottom-color: #07A7E8; }
.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; }
/* 2026-08-21 readability pass: #dce5f4 → prose token (near-white standard). */
.summary-prose--lg p { font-size: 16.5px; line-height: 1.75; color: var(--text-body); }
[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; }
/* 2026-09-10, polish 1 (Ben): these three values ARE the site's body type.
   They live in lr-shell.css as --body-size / --body-lh / --body-color, and
   every other prose selector points at the same three, so the whole site
   moves together. Do not re-type a number here. */
/* 2026-09-10, polish 4 (Ben): DIRECT children only. The prose column can now
   hold a component as well as paragraphs — `{{chart:… width=inline}}` puts a
   whole .chart-card in here — and a component brings its own type (the card's
   title, its subtitle, its footer note). A descendant selector handed all
   three 19px/1.78 body type; `> p` keeps body type to the body text, where it
   belongs. Every .case-feature__prose on the site writes its paragraphs as
   direct children (assets/js/lr-site.js paraHtml, living-research.js's
   methodology and summary blocks), so nothing else moves. */
.case-feature__prose > p { font-size: var(--body-size); line-height: var(--body-lh); color: var(--body-color); margin: 0 0 1em; }
.case-feature__prose > p:first-child { color: #ffffff; }
.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(--blue); 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(--blue-300); 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(7,167,232,.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, #77CFF2, var(--blue-300)); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; }
/* 2026-08-21 readability pass: 13px muted → 14px text-soft (sidebar stat labels
   are short sentences the reader actually reads — floor is 14px). */
/* 2026-09-10, polish 1 (Ben): the Key Metrics label is a full sentence the
   reader actually reads, so it is BODY TYPE — the same three tokens as the
   exec-summary prose beside it, not a shrunken caption. */
.cfstat__l { font-size: var(--body-size); line-height: var(--body-lh); color: var(--body-color); margin-top: 6px; }
/* 2026-09-14 (Ben): the Executive Summary's optional "About this study"
   pop-out trigger, under the Key Metrics column. */
.case-feature__side-btn { margin-top: 18px; width: 100%; justify-content: center; }

/* 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(7,167,232,.5);
  box-shadow: 0 18px 40px -18px rgba(7,167,232,.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(7,167,232,.14); color: #fff; border-color: rgba(7,167,232,.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(--blue); }
.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(--blue), var(--blue-300)); }
.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(--blue); 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(--blue-300);
  padding: 5px 12px; border: 1px solid rgba(7,167,232,.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(--blue-300); margin: 26px 0 10px; }
.terms-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; }
.terms-grid .term b { display: block; color: var(--blue-300); 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(--blue-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: #ffffff; 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(7,167,232,.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: #ffffff; 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: personalize → register. */
.hero-actions { display: flex; flex-direction: column; gap: 14px; width: 100%; }

/* Header "Downloads" CTA (2026-08-12, demo simplification Round 2, "C3") —
   reuses the command card's .cc-dropdown/.cc-nav popover pattern (see
   living-research.js's initHeroDownloadsNav(), same shape as initViewNav()),
   just widened to match the full-width hero button instead of a pill chip. */
.hero-downloads__menu { left: 0; right: 0; width: auto; min-width: 0; }

/* Downloads modal (2026-08-12, "C4"): row 1 spans both columns. */
.export-opt--full { grid-column: 1 / -1; }
.export-opt__notice { display: block; margin-top: 6px; font-size: 12px; }
.hero-actions__btn { width: 100%; justify-content: center; }

/* 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 hero-aside content 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(--blue), var(--blue-300)); color: #04193b;
  box-shadow: 0 8px 20px -10px rgba(7,167,232,.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(7,167,232, .16); border-color: rgba(7,167,232, .55); color: #fff; }
.scenario-trigger:hover { background: rgba(7,167,232, .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(--blue-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(7,167,232,.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(--blue-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(--blue), var(--blue-300)); color: #04193b;
  font-family: var(--font-display); font-weight: 800; font-size: 14px; padding: 11px 18px; border-radius: 999px;
  box-shadow: 0 8px 20px -10px rgba(7,167,232, .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(4, 25, 59, .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: #04193b; }
.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: #04193b; background: linear-gradient(135deg, var(--blue), var(--blue-300)); }

/* 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 blue→blue-300 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(--blue), var(--blue-300)); box-shadow: 0 8px 20px -10px rgba(7,167,232,.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(--blue)); 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(7,167,232,.7), 0 0 0 0 rgba(7,167,232,.55); }
  70%  { box-shadow: 0 8px 20px -10px rgba(7,167,232,.7), 0 0 0 13px rgba(7,167,232,0); }
  100% { box-shadow: 0 8px 20px -10px rgba(7,167,232,.7), 0 0 0 0 rgba(7,167,232,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(--blue) 0%, var(--blue-300) 115%);
  -webkit-backdrop-filter: blur(10px) saturate(1.1); backdrop-filter: blur(10px) saturate(1.1);
  box-shadow: 0 16px 38px -16px rgba(7,167,232,.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.
   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).
     ≤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) {
  /* 2026-09-02 (R3 review, finding C1): SCOPED to the command card's own
     Research-Summary/Personalized toggle, which has the .cc-viewdd dropdown
     below to take its place. The bare `.viewtoggle { display: none }` this
     replaces also hid the Explore section's "Break out by" and "Show as"
     controls (living-research.js's exploreSectionHTML() reuses the same
     .viewtoggle vocabulary), which have NO alternate — so on every viewport
     ≤1180px, iPad landscape included, the section's two controls vanished
     while their labels stayed, and the breakdown could never be changed.
     Keep this selector scoped if the rule is ever edited. */
  .cc-field--view .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; }
}

/* ≤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; }
}

/* ============================================================================
   === 07-28 Tier-3 disclosure + language + gating ===
   Phase 2 (production-shaped services architecture). New selectors only;
   the gating overlay itself reuses the existing .gatewrap/.gate__* rules
   above ("Round-7: … blur gate") and the existing .chip/.chip-teal tokens —
   see assets/js/living-research.js for where each class is used.
   ========================================================================== */

/* Visually-hidden label (language selector's <label>; keeps it in the
   accessibility tree without showing redundant text next to the select). */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Tier-3 "AI-adapted for your profile" disclosure chip (FR-7): sits under the
   swapped-in sample text inside .lr-tailored [data-lr-tailored-slot]. */
.lr-tailored__disclosure { margin-top: 10px; }

/* Language selector: a compact select alongside the command-card's
   Customize/Download actions. Live translation (Round 5, Chrome's built-in
   on-device Translator API) is wired in assets/js/services.js +
   assets/js/living-research.js; this select's markup/id are unchanged. */
.lr-lang { position: relative; display: flex; align-items: center; }
.lr-lang select { min-width: 0; padding: 9px 10px; font-size: 13px; }

/* Inline "Translating…" status, shown next to the selector while a language
   switch is downloading its on-device model or translating the page; empty
   and hidden once the switch settles. */
.lr-lang-status { font-size: 12px; color: var(--muted); margin-left: 8px; white-space: nowrap; }
.lr-lang-status.hidden { display: none; }

/* Dismissible notice banner, shown under the command card when a non-English
   language is chosen in a browser without the Translator API (graceful
   fallback — Firefox, Safari, older Chrome, file:// without the flag). */
.lr-lang-notice { background: rgba(245,177,76,.12); border-top: 1px solid rgba(245,177,76,.3); border-bottom: 1px solid rgba(245,177,76,.3); }
.lr-lang-notice.hidden { display: none; }
.lr-lang-notice .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 10px; font-size: 13.5px; color: var(--amber); }
.lr-lang-notice__close { appearance: none; cursor: pointer; border: 0; background: transparent; color: inherit; font-size: 18px; line-height: 1; padding: 2px 6px; }
.lr-lang-notice__close:hover { color: #fff; }

/* ============================================================================
   === 07-29 Region dimension: energy-chart override + additive paragraph ===
   Region owns the energy chart and one additive summary paragraph
   (docs/DECISIONS.md's dimension chart-ownership rule); industry keeps the
   marketShare chart + full summary/takeaways swap. Reuses the existing
   .chip/.chip-teal tokens for the region label instead of inventing a new
   visual language. 2026-09-02 (data engine, package 6): the energy chart is
   now a live `follow_profile: [region]` resolution through FCR.lrData, not
   the hand-written regionParagraphHTML()/withRegionOverride() this comment
   originally named (both retired) — only the summary paragraph still uses
   these classes.
   ========================================================================== */
.lr-region-add { margin-top: 10px; }
.lr-region-chip { margin-right: 8px; vertical-align: middle; }

/* ============================================================================
   === 08-12 Batch B: "Explore the Data" + chart-local quick filters ===
   New section (data-id="insights", replaces the old Self-Assessment) plus
   two small chart-local filter rows (Exec Summary, Detailed Analysis). All
   of this is display only — none of it writes to FCR.profile. See
   assets/js/living-research.js's exploreSectionHTML()/quickFilterHTML().
   ========================================================================== */
.explore-filterbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; margin: 18px 0 22px; }
.explore-breakdown { flex: none; }
.explore-focus select { min-width: 190px; }
.explore-charts { display: flex; flex-direction: column; gap: 26px; }
.explore-chart-card { width: 100%; }

/* 2026-09-02 (data engine, package 6): the rebuilt Explore section — a row of
   question chips, the "Break out by" segmented control, and a chart-type
   toggle that only appears where a second type is honest for that question.
   The controls reuse the existing .chip and .viewtoggle vocabulary rather
   than inventing a third one. */
.explore-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 4px; }
.explore-chip { background: var(--surface-3); color: var(--text-soft); border: 1px solid var(--border);
  cursor: pointer; text-transform: none; letter-spacing: 0; font-size: 13.5px; font-weight: 700;
  padding: 8px 14px; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.explore-chip:hover { color: var(--text); border-color: var(--blue-300); }
.explore-chip.is-active { background: var(--blue); color: #001428; border-color: var(--blue); }
.explore-ctl-label { display: block; font-size: 12.5px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-soft); margin-bottom: 6px; }
.explore-typetoggle.hidden { display: none; }
.explore-typetoggle .viewtoggle__btn.hidden { display: none; }
/* Specificity note: the earlier ".chart-card .chart-wrap { height: 320px }"
   (line ~385) has specificity (0,2,0) — two classes. A bare ".explore-chart"
   is only (0,1,0) and loses, so these three charts rendered at 320px instead
   of 440px. ".explore-chart-card .chart-wrap.explore-chart" is (0,3,0),
   which outranks the 320px rule regardless of source order. */
.explore-chart-card .chart-wrap.explore-chart { height: 440px; margin-top: 14px; }   /* large, the visual center of the section */
/* 2026-08-21 readability pass: 12.5px → 14px text-soft (multi-sentence data
   footnote = reading text; 14px floor applies). */
.explore-footnote { margin-top: 12px; font-size: 14px; color: var(--text-soft); max-width: 82ch; }

/* 2026-09-02 (Phase 2, WP1): the .quickfilter rules that lived here are
   gone with the chart-local quick filters they styled. The strip that
   replaced them is the "Your Profile" block at the end of this file. */

/* Honest "no cuts available" caption a quick filter drops under a chart it
   can't (and won't) redraw — see applyRadarHighlight()/updateSatisfactionNote(). */
/* 2026-08-21 readability pass: 12.5px → 14px (the honest "no cuts available"
   note is a sentence the reader must be able to read). */
.chart-note { margin-top: 10px; font-size: 14px; color: var(--amber); }
.chart-note.hidden { display: none; }

/* 2026-09-02 (data engine, docs/DATA-ENGINE-SPEC.md §6.2): the one-line
   source note under every resolved chart card — "Q1 · Financial Services
   respondents · n=305 · unweighted". Small and muted by design: it is
   provenance, not commentary, and must never compete with the chart. When a
   min-n fallback fires, the same element carries that sentence too and
   switches to the amber the honest .chart-note above already uses. */
.chart-card__note { margin: 10px 0 0; font-size: 13px; line-height: 1.45; color: var(--text-soft); }
.chart-card__note--flag { color: var(--amber); }
.chart-card__note.hidden { display: none; }

@media (max-width: 720px) {
  .explore-chart-card .chart-wrap.explore-chart { height: 340px; }
  /* 2026-09-02 (R3 review, finding C1): the Explore controls are now visible
     on narrow viewports (the ≤1180 rule above is scoped to the command card),
     so they need to wrap rather than overflow — four breakdown pills do not
     fit one 390px line. .viewtoggle is a pill rail; wrapping it keeps each
     row centred inside the same rounded track. */
  .explore-breakdown,
  .explore-typetoggle { flex: 1 1 100%; min-width: 0; }
  .explore-breakdown .viewtoggle,
  .explore-typetoggle .viewtoggle { display: flex; flex-wrap: wrap; justify-content: flex-start; max-width: 100%; }
  .explore-breakdown .viewtoggle__btn,
  .explore-typetoggle .viewtoggle__btn { padding: 8px 14px; font-size: 13.5px; }
  .explore-filterbar { gap: 12px; }
}

/* ==========================================================================
   READABILITY + HERO CTA PASS (2026-08-21) — appended block
   Ben's polish brief, fix 1 (readability) + fix 5 (hero button).
   House standard (fcr-site-generator design-system.md, rule 3): reading text
   is 16px / 1.75 / near-white (--text-body) / 72ch measure; nothing a user
   reads as a sentence goes below 14px. In-place edits carry the same date
   stamp; this block holds the new primitives.
   ========================================================================== */

/* Section lede — the intro paragraph directly under a section title. Markup
   keeps the legacy `muted` class (verify.mjs selects on p.muted), so this
   rule is declared AFTER .muted and carries both class names to win the
   cascade at equal specificity. 82ch: ledes run wider than body copy, same
   as the house --fs-lede spec. */
.section-lede, p.muted.section-lede {
  font-size: 16px; line-height: 1.7; color: var(--text-body);
  max-width: 82ch;
}

/* Hero downloads CTA (fix 5). Was: .hero-actions__btn { width:100% } — a
   green bar stretched across the entire right-hand hero column with dead
   space below it. Now an auto-width pill pinned to the top-right of the
   aside (where the eye expects a CTA), menu anchored to its right edge so
   it never overflows the viewport. The slot itself (.hero-actions' CTA
   stack) is otherwise unchanged. */
.hero-actions { align-items: flex-end; }
.hero-actions__btn { width: auto; min-width: 200px; padding: 13px 26px; font-size: 15px; }
.hero-downloads { align-self: flex-end; }
.hero-downloads__menu { left: auto; right: 0; width: max-content; min-width: 232px; }
@media (max-width: 900px) {
  /* Stacked hero: the compact pill hangs oddly off the right edge once the
     aside sits under the copy — go back to a full-width action. */
  .hero-actions { align-items: stretch; }
  .hero-actions__btn { width: 100%; }
  .hero-downloads { align-self: stretch; }
  .hero-downloads__menu { left: 0; right: 0; width: auto; }
}

/* --------------------------------------------------------------------------
   METHODOLOGY REBUILD (2026-08-21, fix 2) — exec-summary structure.
   The old boxed layout (.card--pad-lg stack + 14px muted text) is gone from
   the template; .method-open/.method-text/.method-h/.method-sub above are
   now unused legacy (kept for the tablet/export paths until confirmed dead).
   -------------------------------------------------------------------------- */
.case-feature--method { padding-top: clamp(22px, 3vw, 40px); }
.method-prose p, .method-prose li {
  font-size: var(--body-size); line-height: var(--body-lh); color: var(--body-color); max-width: var(--body-measure);
}
.method-prose p { margin: 10px 0 0; }
.method-prose .taki__kicker { display: block; margin-bottom: 6px; }
.method-list { list-style: none; margin: 8px 0 0; padding: 0; }
.method-list li { position: relative; padding-left: 22px; margin-bottom: 16px; }
.method-list li::before { content: ""; position: absolute; left: 0; top: .62em;
  width: 10px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--blue), var(--blue-300)); }
.method-moe { margin-top: 16px; }
.method-moe b { color: #fff; }
.method-side { position: sticky; top: 96px; }
.method-tables { margin-top: 44px; align-items: start; }
.method-tables .taki__kicker { display: block; margin-bottom: 10px; }
@media (max-width: 900px) { .method-side { position: static; } }

/* v3.1 lint hardening (2026-08-21): an overflow-x:auto scroll wrapper that
   can contain absolutely-positioned children must establish a containing
   block, or those children escape it and inflate document.scrollWidth on
   phones (real bug class found in the Ops Dashboard retrofit). */
.table-wrap { position: relative; }

/* --------------------------------------------------------------------------
   CHART ENGINE SWAP (2026-08-21, fix 3) — fcr-chart-core embeds.
   The adapter (assets/js/charts.js) mounts every chart as
   .chart-wrap > .corechart > .qcard.qcard--embed. The qcard box itself is
   neutralized here (the SITE's .chart-card is the panel — house rule: one
   box, not two); heights go auto because DOM/SVG charts size to content,
   unlike the old fixed-height canvases.
   -------------------------------------------------------------------------- */
.chart-card .chart-wrap.has-core,
.explore-chart-card .chart-wrap.explore-chart.has-core { height: auto; min-height: 0; }
.corechart .qcard--embed { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; margin: 0; }
.corechart .legend { margin: 2px 0 10px; }
.corechart .chart svg { width: 100%; height: auto; display: block; }

/* v3.1 lint rule (c) applied to the methodology rebuild (2026-08-21, found
   in the real-browser pass): grid children default min-width:auto, so the
   480px-min-width methodology tables forced their grid tracks wider than
   the viewport at 1000px/390px (document.scrollWidth 1022/500 — sideways
   drag). min-width:0 lets .table-wrap's own overflow-x:auto do its job. */
.case-feature--method > *, .method-tables > div { min-width: 0; }

/* Adversarial-review fixes (2026-08-21): reading-text lines that slipped
   under the 14px floor / faded-muted rule. Labels/captions stay small;
   sentences don't. (The quick-filter hint that was the third line here went
   with the quick filters on 2026-09-02, Phase 2, WP1.) */
.filters__legend { font-size: 14px; color: var(--text-soft); }
.gatewrap__veil p.muted { font-size: 14px; color: var(--text-soft); }

/* ==========================================================================
   "YOUR PROFILE" STRIP + CUSTOMIZE SCENARIO ROWS (2026-09-02, Phase 2, WP1)
   docs/PHASE2-WORKPLAN-2026-09-02.md §1.3-§1.4.

   Replaces the .quickfilter row (retired above). Two instances of .profstrip
   render, one above the Executive Summary's charts and one above the
   Detailed Analysis cards, and both are views of FCR.lrProfile — so this
   block styles ONE vocabulary used in three places: the two strips and the
   Customize Scenario modal's fields (.scfield), which share the .profsw
   switch. Keeping the switch in one rule is deliberate: a reader who learns
   the control in the modal must recognise it on the strip.

   The switch is small on purpose (Ben: "little") — 28x16 with a 12px knob,
   brand blue when on, plain surface when off.
   ======================================================================== */

/* --- the small on/off switch, shared by the strip chips and the modal --- */
.profsw { appearance: none; cursor: pointer; flex: none; padding: 0;
  width: 28px; height: 16px; border-radius: 999px;
  background: var(--surface-3); border: 1px solid var(--border-2);
  transition: background .15s ease, border-color .15s ease; }
.profsw__knob { display: block; width: 12px; height: 12px; margin-left: 1px; border-radius: 50%;
  background: var(--muted); transition: transform .15s ease, background .15s ease; }
.profsw[aria-checked="true"] { background: rgba(7,167,232,.55); border-color: var(--blue); }
.profsw[aria-checked="true"] .profsw__knob { transform: translateX(12px); background: #fff; }
.profsw:hover { border-color: var(--blue); }
.profsw:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(7,167,232,.35); }

/* --- the strip ---------------------------------------------------------- */
.profstrip { margin: 18px 0 6px; padding: 14px 16px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border); }
.profstrip__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 12px; }
.profstrip__title { font-family: var(--font-display); font-weight: 800; font-size: 14px; color: #fff; }
.profstrip__sub { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue-300); }
/* The base sentence is a full sentence a reader must be able to read, so it
   sits at the 14px floor (2026-08-21 readability standard), not at label size. */
.profstrip__base { margin-left: auto; font-size: 14px; color: var(--text-soft); }
.profstrip__base.hidden { display: none; }
.profstrip__row { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 14px 18px; }
.profstrip__group { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 14px 16px; }
.profstrip__group--deep { align-items: flex-end; }
/* The divider marks "past here, you are narrowing the data, not the reading". */
.profstrip__divider { align-self: stretch; width: 1px; min-height: 46px; background: var(--border-2); }
.profstrip__grouplabel { align-self: center; font-size: 11px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); white-space: nowrap; }

/* --- one chip: switch on top, label, then the select styled as a chip --- */
.profchip { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "sw label" "sel sel";
  align-items: center; gap: 4px 8px; }
.profchip .profsw { grid-area: sw; }
.profchip__label { grid-area: label; font-size: 11px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.profchip__sel { grid-area: sel; min-width: 0; width: 100%; max-width: 240px;
  padding: 7px 10px; font-size: 13.5px; border-radius: 999px; }
/* Parked (toggle off): greyed, but the reader's pick is still readable and
   still changeable — picking a value turns the dimension back on. */
.profchip.is-off .profchip__sel,
.scfield.is-off select { opacity: .55; border-color: var(--border); color: var(--text-soft); }
.profchip.is-off .profchip__label,
.scfield.is-off label { color: var(--muted-2, var(--muted)); }

/* --- "Show normalized average" (2026-09-02, Phase 2, WP2) ---------------
   workplan §2.1: one switch, at the right end of both profile strips, shown
   only in the Personalized view. It sits after the deep-dive group with
   margin-left:auto so it lands at the right edge on a wide strip and simply
   wraps onto its own line when the chips need the width. Same .profsw as
   every other switch on the page, on purpose. */
.profnorm { display: flex; align-items: center; gap: 8px; margin-left: auto; padding-bottom: 6px; }
.profnorm.hidden { display: none; }
.profnorm__label { font-size: 11px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); white-space: nowrap; }
/* The strip's own line about what the charts are showing. Present only in
   Research Summary, where the profile above it is a scenario the reader has
   set and the charts below it are the whole sample. */
.profstrip__mode { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.profstrip__mode.hidden { display: none; }
/* A doughnut that gained the comparison series is drawn as grouped bars, so
   the card gets a little more room around the taller shape. Height itself is
   auto once chart-core owns the wrap (see .chart-wrap.has-core above). */
.chart-card .chart-wrap--paired { min-height: 300px; }

/* --- Customize Scenario: two labelled rows ------------------------------ */
.scrow { margin-top: 16px; }
.scrow__head { font-family: var(--font-display); font-weight: 800; font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--blue-300); margin-bottom: 10px; }
.scrow--deep .scrow__head { color: var(--muted); }
.filters--modal-3 { grid-template-columns: 1fr 1fr 1fr; }
/* Switch above the label, label above the select — the same reading order as
   a strip chip, so the two controls teach each other. */
.scfield { position: relative; }
.scfield .profsw { margin-bottom: 4px; }
.scrow__base { margin: 16px 0 0; font-size: 13px; color: var(--text-soft); }
.scrow__help { margin: 6px 0 0; font-size: 13px; color: var(--muted); line-height: 1.5; }

/* --- responsive: the strip wraps to two rows, then stacks -------------- */
@media (max-width: 900px) {
  /* Two rows: primary dims on the first, the "Deep dive" group on the
     second. The vertical divider becomes a horizontal rule, because a 1px
     column between stacked rows reads as a rendering artifact. */
  .profstrip__group { flex: 1 1 100%; }
  .profstrip__divider { width: 100%; min-height: 0; height: 1px; }
  .profstrip__base { margin-left: 0; flex: 1 1 100%; }
  /* Stacked strip: the switch takes its own full-width row rather than
     hanging off the end of the deep-dive column. */
  .profnorm { flex: 1 1 100%; margin-left: 0; padding-bottom: 0; }
}
@media (max-width: 600px) {
  .profstrip__group { flex-direction: column; align-items: stretch; }
  .profchip__sel { max-width: none; }
  .profstrip__grouplabel { align-self: flex-start; }
  .filters--modal-3 { grid-template-columns: 1fr; }
}