/* ==========================================================================
   SOLUTIONS PAGE OVERLAY — site/solutions/index.html ONLY
   --------------------------------------------------------------------------
   Loads AFTER valere.css (design tokens incl. the MOTION tokens --dur- and
   --ease- families, shared components, home modules) and case-study.css (case-study
   module library + SPINE base). Holds ONLY what is specific to /solutions.
   Ports the Content Card + Accordion Cards + spine navy-endpoint styles from
   technology.css (not linked here). Motion follows animation-guidelines.md:
   entrances ease-out, exits ease-in, durations scale with the change.

   RULE: never edit valere.css or case-study.css for this page's needs.

   Tokens: Navy #003262, Orange #F88024, Light Blue #51B7E7, Seafoam #00C29B,
   Body Gray #4D4D4D, white canvas. Fira Sans via --font.
   ========================================================================== */

/* --------------------------------------------------------------------------
   AUDIENCE VARIANT SWITCHER (SEO-safe). All three audiences ship in the DOM;
   body.aud-* shows one. Scoped to .aud-variant so it never catches picker/
   subnav buttons. Visible variants play a slow fade-in on switch.
   -------------------------------------------------------------------------- */
body.aud-pac .aud-variant:not([data-aud="pac"]),
body.aud-hsp .aud-variant:not([data-aud="hsp"]),
body.aud-hct .aud-variant:not([data-aud="hct"]) { display: none !important; }
.aud-variant { animation: sol-aud-fade var(--dur-slow) var(--ease-out); }
@keyframes sol-aud-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .aud-variant { animation: none; } }

/* ==========================================================================
   S1 — HERO + "I AM A..." MINI-CARD AUDIENCE PICKER
   Collapsed: the selected audience as a navy mini-card (home .hero-card style)
   + a glowing chevron. Open: all three fade/slide in as inverted cards (white,
   navy border/text) that flip navy on hover. Choosing collapses back to it.
   Motion is deliberately slow (--dur-slower, hero moment).
   ========================================================================== */
.aud-picker { margin: clamp(22px, 3.4vw, 34px) auto 0; max-width: 440px; text-align: left; }
/* "I am a..." label rendered at the H4 tier (15px bold navy), centered */
.aud-picker__label {
  font-size: var(--fs-h4); font-weight: var(--w-bold); color: var(--navy);
  margin: 0 0 12px; text-align: center;
}
.aud-picker__stack { position: relative; display: flex; flex-direction: column; }

/* Each option is a DRAWER (the accordion philosophy the user liked). JS
   animates each option's inline max-height between 0 and its exact height, so
   there is no dead time; opacity + margin ride the same slow curve. As the
   options above the selected one collapse to 0, the selected slides up to the
   top; opening reverses it exactly. See animation-guidelines.md > Menu
   transitions. Non-selected clip while collapsing (overflow:hidden); the
   selected stays overflow:visible so its shadow is never clipped. */
.aud-opt {
  position: relative; display: block; width: 100%;
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; text-align: left; border-radius: 12px;
  max-height: 0; opacity: 0; margin-bottom: 0; overflow: hidden;
  transition: max-height var(--dur-slower) var(--ease-standard),
              opacity var(--dur-slow) var(--ease-standard),
              margin var(--dur-slower) var(--ease-standard);
}
.aud-opt.is-selected { overflow: visible; }
/* load default (no JS): the collapsed picker shows the selected option */
.aud-picker.is-collapsed .aud-opt.is-selected { max-height: none; opacity: 1; }
.aud-opt__card {
  display: flex; align-items: center; gap: 14px;
  border-radius: 12px; padding: 14px 44px 14px 18px;
  background: #fff; border: 1.5px solid var(--navy); color: var(--navy);
  box-shadow: 0 4px 14px rgba(0, 50, 98, .06);
  transition: background var(--dur-slow) var(--ease-standard),
              color var(--dur-slow) var(--ease-standard),
              border-color var(--dur-slow) var(--ease-standard),
              box-shadow var(--dur-slow) var(--ease-standard);
}
.aud-opt__ic { font-size: 26px; line-height: 1; flex: 0 0 auto; color: var(--orange); }
.aud-opt__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.aud-opt__title { font-size: 16px; font-weight: var(--w-bold); line-height: 1.25; }
/* the segment list = P3 (13px italic); text-wrap: balance kills last-line orphans */
.aud-opt__seg { font-size: 13px; font-style: italic; line-height: 1.4; color: inherit; opacity: .82; text-wrap: balance; }

/* hover flip to navy (only while open) */
.aud-picker.is-open .aud-opt:hover .aud-opt__card,
.aud-picker.is-open .aud-opt:focus-visible .aud-opt__card {
  background: var(--navy); color: #fff; border-color: var(--navy);
  box-shadow: 0 12px 28px rgba(0, 50, 98, .2);
}
.aud-opt:focus-visible { outline: none; }
.aud-opt:focus-visible .aud-opt__card { outline: 3px solid var(--light-blue); outline-offset: 2px; }

/* glowing dropdown chevron (meaningful when collapsed) */
.aud-opt__chev {
  position: absolute; right: 16px; top: 50%; width: 11px; height: 11px;
  margin-top: -8px; pointer-events: none;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); opacity: 0;
  transition: transform var(--dur-slow) var(--ease-emphasized), opacity var(--dur-fast) var(--ease-standard);
}

/* collapsed selected = navy mini-card + glowing chevron */
.aud-picker.is-collapsed .aud-opt.is-selected .aud-opt__card {
  background: var(--navy); color: #fff; border-color: var(--navy);
  box-shadow: 0 8px 22px rgba(0, 50, 98, .16);
}
.aud-picker.is-collapsed .aud-opt.is-selected .aud-opt__chev { opacity: 1; color: #fff; animation: aud-chev-glow 2s ease-in-out infinite; }
@keyframes aud-chev-glow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(248, 128, 36, 0)); }
  50%      { filter: drop-shadow(0 0 7px rgba(248, 128, 36, .95)); }
}

/* open selected = white inverted card, chevron points up */
.aud-picker.is-open .aud-opt.is-selected .aud-opt__card { border-color: var(--navy); box-shadow: 0 6px 18px rgba(0, 50, 98, .12); }
.aud-picker.is-open .aud-opt.is-selected .aud-opt__chev { opacity: 1; transform: rotate(225deg); }

@media (prefers-reduced-motion: reduce) {
  .aud-picker.is-collapsed .aud-opt.is-selected .aud-opt__chev { animation: none; }
  .aud-opt, .aud-opt__card, .aud-opt__chev { transition: none; }
}

.sols-hero .hero-actions { margin-top: clamp(20px, 3vw, 30px); }

/* --------------------------------------------------------------------------
   INVERTED HERO — audience picker on the navy S1 (Caleb 2026-07-08). The
   mini-cards flip to WHITE (navy text) so they read on navy; the icon stays
   orange and the collapsed chevron keeps its orange glow. Hover can't go
   navy-on-navy, so it lifts + gains an orange ring instead.
   -------------------------------------------------------------------------- */
.hero--inverted .aud-opt__card { background: #fff; color: var(--navy); border-color: #fff; }
.hero--inverted .aud-picker.is-collapsed .aud-opt.is-selected .aud-opt__card {
  background: #fff; color: var(--navy); border-color: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
}
.hero--inverted .aud-picker.is-open .aud-opt:hover .aud-opt__card,
.hero--inverted .aud-picker.is-open .aud-opt:focus-visible .aud-opt__card {
  background: #fff; color: var(--navy); border-color: var(--orange);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .32);
}
.hero--inverted .aud-picker.is-open .aud-opt.is-selected .aud-opt__card { border-color: var(--orange); }
/* the collapsed chevron is forced white for the old navy pill; on the inverted
   WHITE pill that is invisible, so make it navy so the dropdown arrow reads
   (Caleb 2026-07-09). The orange glow still pulses around it. */
.hero--inverted .aud-picker.is-collapsed .aud-opt.is-selected .aud-opt__chev { color: var(--navy); }

/* ==========================================================================
   STICKY SUB-NAV — sits right below the main nav, sticks to the top on scroll.
   Holds a jump link for EVERY section. Once the hero picker scrolls out of
   view, a compact audience-picker DROPDOWN slides in on the left (smooth) and
   the section links shift over to make room.
   ========================================================================== */
/* The main header must STAY on top (sticky) so the sub-nav reads as sub TO the
   main, not a replacement (Caleb 2026-07-08). The shared .site-header is
   already position:sticky but has no top, so it scrolls away; pin it here
   (solutions-only override) and raise it above the sub-nav. */
.site-header { top: 0; z-index: 70; }
.subnav {
  /* sticks directly BELOW the main header (JS sets --subnav-top = header
     height on load/resize; 72px fallback). */
  position: sticky; top: var(--subnav-top, 72px); z-index: 60;
  /* off-white bar with the same hairline border used on white/off-white cards.
     Lets the audience pill be a navy pill on select. */
  background: var(--off-white);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.subnav__inner { display: flex; align-items: center; gap: 6px; padding: 8px 0; min-height: 52px; }

/* section links — navy text on the light bar; active keeps the orange underline */
.subnav__links { display: flex; align-items: center; gap: 2px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.subnav__links::-webkit-scrollbar { display: none; }
.subnav__link {
  white-space: nowrap; text-decoration: none;
  color: var(--body-gray); font-size: 14px; font-weight: var(--w-medium);
  padding: 8px 12px; border-radius: 6px;
  transition: color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);
}
.subnav__link:hover { color: var(--navy); background: rgba(0, 50, 98, .05); }
.subnav__link.is-active { color: var(--navy); font-weight: var(--w-bold); box-shadow: inset 0 -3px 0 var(--orange); border-radius: 4px; }
.subnav__link:focus-visible { outline: 3px solid var(--light-blue); outline-offset: 2px; }

/* the compact audience picker dropdown — hidden until the hero picker leaves.
   Slides in from the left, pushing the links over (max-width + opacity +
   translate all animate together). */
.subnav__picker {
  position: relative; flex: 0 0 auto;
  max-width: 0; opacity: 0; overflow: visible; transform: translateX(-12px);
  transition: max-width var(--dur-slower) var(--ease-emphasized),
              opacity var(--dur-slow) var(--ease-standard),
              transform var(--dur-slower) var(--ease-emphasized),
              margin-right var(--dur-slower) var(--ease-emphasized);
  margin-right: 0; pointer-events: none;
}
.subnav.has-picker .subnav__picker { max-width: 320px; opacity: 1; transform: none; margin-right: 8px; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .subnav__picker { transition: none; } }

/* the dropdown trigger = a NAVY pill on the off-white bar (orange icon) */
.subnav__pk-btn {
  display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  appearance: none; cursor: pointer; font-family: inherit;
  background: var(--navy); color: #fff; border: 1px solid var(--navy); border-radius: 999px;
  padding: 7px 14px; font-size: 13px; font-weight: var(--w-bold);
  transition: box-shadow var(--dur-fast) var(--ease-standard);
}
.subnav__pk-btn:hover { box-shadow: 0 4px 12px rgba(0, 50, 98, .22); }
.subnav__pk-btn:focus-visible { outline: 3px solid var(--light-blue); outline-offset: 2px; }
.subnav__pk-ic { color: var(--orange); font-size: 16px; }
.subnav__pk-chev { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform var(--dur-base) var(--ease-emphasized); }
.subnav__picker.is-open .subnav__pk-chev { transform: rotate(225deg); }

/* the dropdown menu — styled + animated like the S1 picker (inverted cards) */
.subnav__pk-menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 5;
  width: 300px; max-width: 78vw;
  background: #fff; border-radius: 12px; padding: 8px;
  box-shadow: 0 18px 40px rgba(0, 50, 98, .28);
  display: flex; flex-direction: column; gap: 8px;
  opacity: 0; transform: translateY(-8px) scale(.98); transform-origin: top left;
  pointer-events: none;
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.subnav__picker.is-open .subnav__pk-menu { opacity: 1; transform: none; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .subnav__pk-menu { transition: none; } }
.subnav__pk-opt {
  display: flex; align-items: center; gap: 12px; text-align: left;
  appearance: none; cursor: pointer; font-family: inherit;
  background: #fff; color: var(--navy); border: 1.5px solid var(--navy); border-radius: 10px;
  padding: 11px 14px;
  transition: background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
}
.subnav__pk-opt .ti { color: var(--orange); font-size: 20px; flex: 0 0 auto; transition: color var(--dur-base) var(--ease-standard); }
.subnav__pk-opt span { font-size: 14px; font-weight: var(--w-bold); line-height: 1.2; }
.subnav__pk-opt:hover, .subnav__pk-opt:focus-visible { background: var(--navy); color: #fff; border-color: var(--navy); outline: none; }
.subnav__pk-opt:hover .ti, .subnav__pk-opt:focus-visible .ti { color: var(--orange); }
.subnav__pk-opt[aria-pressed="true"] { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }

@media (max-width: 640px) {
  .subnav__link { font-size: 13px; padding: 8px 9px; }
  .subnav.has-picker .subnav__picker { max-width: 190px; }
  .subnav__pk-btn span.subnav__pk-label { max-width: 96px; overflow: hidden; text-overflow: ellipsis; }
}

/* ==========================================================================
   S2 — AUDIENCE LOGO REEL (off-white; NO divider line)
   The three home per-audience reels as aud-variants. The shared .sol-reel adds
   a top hairline divider; remove it here (Caleb 2026-07-08), keep off-white.
   ========================================================================== */
.sol-audreel { padding-top: clamp(26px, 4vw, 40px); padding-bottom: clamp(26px, 4vw, 40px); }
.sol-audreel .sol-reel { margin-top: 0; padding-top: 0; border-top: 0; }

/* ==========================================================================
   CONTENT CARD (no-tabs "flat" variant) — PORTED from technology.css
   White card + colored top band; on /solutions the band carries an inverted
   AUDIENCE PILL. Body = 2-col split: copy (H2 + P1) LEFT, Accordion Cards
   RIGHT (matches the Technology layout). No tab strip (the picker drives it).
   ========================================================================== */
.content-card {
  background: #fff; border: 1px solid var(--hairline);
  border-radius: 14px; box-shadow: var(--shadow-window);
  overflow: hidden; text-align: left;
}
.content-card__band {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px clamp(18px, 2.4vw, 24px);
}
.content-card__band--seafoam { background: var(--enable-more); }   /* Enable More */
.content-card__band--blue    { background: var(--enable-better); } /* Enable Better */
.content-card__band--orange  { background: var(--orange); }        /* general orange */
.content-card__band--navy    { background: var(--navy); }
.content-card__title { margin: 0; color: #fff; font-weight: var(--w-bold); font-size: 20px; line-height: 1.25; }

.content-card__pill {
  flex: 0 0 auto; display: inline-flex; align-items: center;
  background: #fff; border-radius: 999px;
  padding: 5px 14px; font-size: 12px; font-weight: var(--w-bold);
  letter-spacing: .02em; white-space: nowrap;
}
.content-card__band--seafoam .content-card__pill { color: var(--enable-more); }
.content-card__band--blue    .content-card__pill { color: var(--enable-better); }
.content-card__band--orange  .content-card__pill { color: #c85f10; }
.content-card__band--navy    .content-card__pill { color: var(--navy); }

.content-card__body { padding: clamp(20px, 2.8vw, 32px); }
.sc-split { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(28px, 4vw, 56px); align-items: start; }
.sc-split > h2 { margin: 0 0 .5em; color: var(--navy); font-weight: var(--w-bold); font-size: 22px; line-height: 1.25; text-align: left; }
.sc-split > .sc-p1 { margin: 0 0 clamp(16px, 2.4vw, 22px); color: var(--body-gray); font-size: var(--fs-body); line-height: 1.6; text-align: left; max-width: none; }
/* EXPLICIT placement (Caleb 2026-07-08): copy (H2 + P1 + link) in column 1
   (LEFT), the Accordion Cards in column 2 (RIGHT) — matching Technology.
   Without this the acc-cards' row-span auto-placed it into column 1. */
.sc-split > h2, .sc-split > .sc-p1, .sc-split > .sol-link { grid-column: 1; }
.sc-split > .acc-cards { grid-column: 2; grid-row: 1 / 99; }
/* an inline Arrow Link CTA that sits within the copy column (e.g. the Data
   Activation "deep dive" link) gets a little separation from the P1 above it */
.sc-split > .sol-link { margin-top: 12px; }
/* the "Book Your Discovery" Arrow Link CTA. Inside a content-card split it sits
   in the copy column (col 1, below the copy) so it stays put when an accordion
   in col 2 expands; in the Growth & Revenue detail it just sits below the copy. */
.sc-cta { margin-top: clamp(16px, 2.4vw, 22px); }
.sc-split > .sc-cta { grid-column: 1; }
@media (max-width: 760px) {
  .sc-split { grid-template-columns: 1fr; }
  /* reset the explicit column so the accordions don't force an implicit 2nd
     column on mobile (single-column stack) */
  .sc-split > .acc-cards { grid-column: 1; grid-row: auto; margin-top: 6px; }
}

/* --------------------------------------------------------------------------
   ACCORDION CARDS — PORTED from technology.css (slowed to --dur-slow)
   -------------------------------------------------------------------------- */
.acc-cards { display: flex; flex-direction: column; gap: 12px; }
.acc-card { position: relative; background: #fff; border: 1px solid var(--hairline); border-radius: 10px; overflow: hidden; }
.acc-card .card__rule { margin: 16px 0 0 16px; }
.acc-card__head {
  width: 100%; appearance: none; background: none; border: 0; cursor: pointer;
  font-family: inherit; text-align: left;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 9px 16px 14px;
}
.acc-card__t { color: var(--navy); font-weight: var(--w-bold); font-size: var(--fs-h4); line-height: 1.3; }
.acc-card__head:focus-visible { outline: 3px solid var(--light-blue); outline-offset: -3px; border-radius: 8px; }
.acc-card__ic { position: relative; width: 16px; height: 16px; flex: 0 0 auto; }
.acc-card__ic::before, .acc-card__ic::after { content: ""; position: absolute; background: var(--orange); transition: transform var(--dur-base) var(--ease-standard), opacity var(--dur-base) var(--ease-standard); }
.acc-card__ic::before { left: 0; top: 7px; width: 16px; height: 2px; }
.acc-card__ic::after  { left: 7px; top: 0; width: 2px; height: 16px; }
.acc-card.is-open .acc-card__ic::after { transform: rotate(90deg); opacity: 0; }
.acc-cards--seafoam .acc-card__ic::before, .acc-cards--seafoam .acc-card__ic::after { background: var(--enable-more); }
.acc-cards--blue    .acc-card__ic::before, .acc-cards--blue    .acc-card__ic::after { background: var(--enable-better); }
.acc-card__body { overflow: hidden; max-height: 0; transition: max-height var(--dur-slow) var(--ease-standard); }
.acc-card__body p { margin: 0; padding: 2px 16px 15px; color: var(--body-gray); font-size: var(--fs-body); line-height: 1.55; max-width: none; opacity: 0; transition: opacity var(--dur-fast) var(--ease-standard); }
.acc-card.is-open .acc-card__body p { opacity: 1; transition: opacity var(--dur-base) var(--ease-out) .14s; }
@media (prefers-reduced-motion: reduce) { .acc-card__body, .acc-card__body p { transition: none; } }

/* --------------------------------------------------------------------------
   MODULE-BELOW-CARD LAYOUT (.sc-layer / .sc-stage) — card full width, module
   full width below. ONE spacing rule so S3's Ecoweb isn't crowded against the
   card (Caleb 2026-07-08) and S5/S6/S7 modules get the same breathing room.
   -------------------------------------------------------------------------- */
.sc-stage { position: relative; min-width: 0; margin-top: clamp(30px, 4.5vw, 52px); }
/* NOTE: do NOT force width:100% on the stage's children — the Ecoweb uses
   negative side margins for a centered full-bleed, and a forced 100% width
   broke that (left-shifted, not full width). Block children fill naturally. */

/* ==========================================================================
   S5 SPINE — Event Stream (General) navy-endpoint override (PORTED, scoped to
   .sc-stage). Base spine styles from case-study.css.
   ========================================================================== */
.sc-stage .spine-endpoint__name {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--navy); color: #fff; border: 1px solid var(--navy);
  border-radius: 12px;
  font-size: 15px; font-weight: var(--w-bold); line-height: 1.2;
  padding: 12px 16px; white-space: nowrap; text-align: left;
  width: clamp(212px, 22vw, 284px);
  box-shadow: 0 6px 18px rgba(0, 50, 98, .12);
  /* KEEP .3s — the spine flip JS swaps content at a 300ms midpoint; any other
     duration desyncs the flip (content pops before the card is edge-on). This
     is a module animation, NOT a menu transition — do not re-token it. */
  transition: transform .3s ease, background .3s ease, border-color .3s ease;
  will-change: transform;
}
.sc-stage .spine-endpoint__name .ti { color: var(--orange); font-size: 20px; line-height: 1; flex: 0 0 auto; }
.sc-stage .spine-endpoint:hover .spine-endpoint__name,
.sc-stage .spine-endpoint:hover .spine-endpoint__name--more { transform: none; box-shadow: 0 6px 18px rgba(0, 50, 98, .12); }
.sc-stage .spine-endpoint:hover .spine-endpoint__name { border-color: var(--navy); }
.sc-stage .spine-endpoint__name--more { background: var(--seafoam); border-color: var(--seafoam); }
.sc-stage .spine-endpoint__name--more .ti { color: var(--navy); }
.sc-stage .spine-endpoint:hover .spine-endpoint__name--more { border-color: var(--seafoam); }
@media (prefers-reduced-motion: reduce) { .sc-stage .spine-endpoint__name { transition: none; } }
@media (max-width: 860px) {
  .sc-stage .spine-endpoint { flex: 1 1 0; min-width: 0; }
  .sc-stage .spine-endpoint__name { flex-direction: column; gap: 3px; font-size: 10px; padding: 7px 6px; white-space: normal; text-align: center; width: 100%; }
  .sc-stage .spine-endpoint__name .ti { font-size: 15px; }
}

/* ==========================================================================
   S4 — GROWTH & REVENUE OPPORTUNITIES (stacked-grid More Module variant)
   3-col x 4-row grid of category mini-cards (hover inverts). Selecting fades
   the grid out and reveals a full-width seafoam-banded detail window; the
   audience pill sits ABOVE the category title (Caleb 2026-07-08). Partner
   logos fill the right column responsively and read proportional.
   ========================================================================== */
.grow { position: relative; }
.grow__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.6vw, 18px); }
.grow.is-detail .grow__grid { opacity: 0; pointer-events: none; position: absolute; inset: 0; }
.grow__card {
  display: flex; align-items: center; gap: 12px; text-align: left;
  appearance: none; cursor: pointer; font-family: inherit;
  background: #fff; color: var(--navy);
  border: 1.5px solid var(--hairline); border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 3px 10px rgba(0, 50, 98, .05);
  /* snappy hover; the converge animation swaps in a SLOW transform+opacity
     transition via .is-anim below (see animation-guidelines.md > Menu). */
  transition: background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-standard);
}
.grow__card .ti { font-size: 24px; line-height: 1; flex: 0 0 auto; color: var(--seafoam); transition: color var(--dur-base) var(--ease-standard); }
.grow__card span { font-size: 15px; font-weight: var(--w-bold); line-height: 1.25; }
.grow__card:hover, .grow__card:focus-visible {
  background: var(--navy); color: #fff; border-color: var(--navy);
  transform: translateY(-3px); box-shadow: 0 12px 26px rgba(0, 50, 98, .18); outline: none;
}
.grow__card:hover .ti, .grow__card:focus-visible .ti { color: var(--seafoam); }
@media (max-width: 720px) { .grow__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px) { .grow__grid { grid-template-columns: 1fr; } }

/* CONVERGE CHOREOGRAPHY (Caleb 2026-07-08). Selecting a card: all others slide
   INTO the selected one (--tx/--ty = vector to its center, set by JS) + shrink
   + fade (slow); then the selected fades out; then the detail fades in. "All
   opportunities" mirrors it in reverse. `is-anim` supplies the slow
   transform+opacity transition in BOTH directions so it never pops. */
.grow.is-anim .grow__card { position: relative; z-index: 1; transition: transform var(--dur-slow) var(--ease-standard), opacity var(--dur-slow) var(--ease-standard); }
/* the selected card sits ABOVE the others so they slide UNDERNEATH it and
   disappear behind it (Caleb 2026-07-08) */
.grow.is-anim .grow__card.is-target { z-index: 3; }
.grow.is-converged .grow__card:not(.is-target) { transform: translate(var(--tx, 0), var(--ty, 0)) scale(.35); opacity: 0; pointer-events: none; }
.grow__card.is-fading { opacity: 0; }
.grow__detail { display: none; }
.grow.is-detail .grow__detail { display: block; animation: grow-detail-in var(--dur-slow) var(--ease-out); }
@keyframes grow-detail-in { from { opacity: 0; } to { opacity: 1; } }
.grow.is-detail.is-detail-leaving .grow__detail { opacity: 0; animation: none; transition: opacity var(--dur-slow) var(--ease-in); }
@media (prefers-reduced-motion: reduce) {
  .grow__card, .grow.is-anim .grow__card { transition: none; }
  .grow__card:hover { transform: none; }
  .grow.is-detail .grow__detail, .grow.is-detail.is-detail-leaving .grow__detail { animation: none; transition: none; }
}
.grow__back {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px;
  appearance: none; background: none; border: 0; cursor: pointer; font-family: inherit;
  color: var(--navy); font-weight: var(--w-bold); font-size: 14px;
  transition: gap var(--dur-fast) var(--ease-out);
}
.grow__back:hover { gap: 10px; }
.grow__back:focus-visible { outline: 3px solid var(--light-blue); outline-offset: 3px; border-radius: 4px; }
/* band: pill sits ABOVE the title (stacked), left-aligned */
.grow__detail .content-card__band { flex-direction: column; align-items: flex-start; gap: 8px; }
.grow__detail .content-card__title { display: inline-flex; align-items: center; gap: 10px; order: 2; }
.grow__detail .content-card__title .ti { font-size: 22px; }
.grow__detail .content-card__pill { order: 1; }
.grow-detail__inner { display: grid; grid-template-columns: 1.15fr .85fr; column-gap: clamp(28px, 4vw, 52px); align-items: center; }
.grow-detail__copy p { margin: 0 0 14px; color: var(--body-gray); font-size: var(--fs-body); line-height: 1.6; max-width: none; }
.grow-detail__copy ul { margin: 0; padding: 0; list-style: none; }
.grow-detail__copy li { position: relative; padding-left: 22px; margin-bottom: 8px; color: var(--body-gray); font-size: var(--fs-body); line-height: 1.5; }
.grow-detail__copy li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 9px; height: 9px; background: var(--seafoam); border-radius: 2px; transform: rotate(45deg); }
/* logos fill the right column: a responsive grid, each logo centered in its
   cell and normalized to one visual weight (Caleb 2026-07-08). */
.grow-detail__logos { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: clamp(14px, 2vw, 26px); align-items: center; justify-items: center; }
.grow-detail__logos img { width: 100%; max-width: 150px; height: clamp(30px, 4vw, 42px); object-fit: contain; display: block; }
/* chip variants (Payer / Sales / Beyond) stack instead of a logo grid */
/* chips wrap 2-up (keeps the detail from getting tall, which keeps the locked
   static height reasonable); collapses to 1-up on narrow widths */
.grow-detail__logos.grow-detail__chips { grid-template-columns: repeat(2, 1fr); gap: 10px; justify-items: stretch; }
@media (max-width: 520px) { .grow-detail__logos.grow-detail__chips { grid-template-columns: 1fr; } }
.grow-detail__chip { display: inline-flex; align-items: center; gap: 10px; background: #eef6f9; border-radius: 10px; padding: 11px 15px; font-size: 13px; font-weight: var(--w-medium); color: var(--navy); }
.grow-detail__chip .ti { color: var(--light-blue); font-size: 18px; }
@media (max-width: 760px) { .grow-detail__inner { grid-template-columns: 1fr; row-gap: 22px; } }

/* ==========================================================================
   S7 AUTOMATION — supporting content below the card: the order-to-cash module
   on a navy surface (PAC). The specific workflow-card grid and the standalone
   governed-automation grid were removed 2026-07-08 (governance now lives in
   the Content Card accordions).
   ========================================================================== */
/* The audience tag is hidden inside Growth & Revenue (Caleb, 2026-09-12: "It
   has the post-acute care provider tag on each of those cards when selected.
   please hide that for now"). With the audience picker hidden and the page
   PAC-only, the pill repeats the one thing every card already assumes, on every
   selection. HIDDEN, NOT DELETED - same treatment as the picker itself, so it
   comes back with one line when the other two audiences return. */
.strat-slot[data-slot="more-growth"] .content-card__pill { display: none; }

.sols-o2c { background: var(--navy); border-radius: 18px; padding: clamp(22px, 3.5vw, 36px); box-shadow: var(--shadow-window); text-align: left; }
.sols-o2c > h3 { color: #fff; margin: 0 0 .5em; text-align: center; }
.sols-o2c > p  { color: rgba(255, 255, 255, .82); max-width: var(--p1-max); margin: 0 auto clamp(18px, 3vw, 26px); text-align: center; }
.o2c-steps { grid-template-columns: repeat(6, 1fr); }
/* The order-to-cash rail on a phone: ONE STEP AT A TIME, faded. Same treatment
   as /technology — six chips wrapped to two or three rows and the corner radii
   assume a single row, so it read as a broken grid. All six stack into one cell
   and only the selected one shows; the step number keeps the position legible.
   The flow below already stacks to one column at 860px (case-study.css). */
@media (max-width: 620px) {
  .o2c-steps { grid-template-columns: 1fr; }
  .o2c-step {
    grid-area: 1 / 1; border-left-width: 1px; border-radius: 10px 10px 0 0;
    opacity: 0; visibility: hidden;
    transition: opacity var(--dur-base) var(--ease-standard), visibility var(--dur-base) var(--ease-standard);
  }
  .o2c-step[aria-selected="true"] { opacity: 1; visibility: visible; }
}
@media (max-width: 860px) and (min-width: 621px) { .o2c-steps { grid-template-columns: repeat(3, 1fr); } }

/* --------------------------------------------------------------------------
   SECTION ANCHORS — clear the sticky sub-nav on jump.
   -------------------------------------------------------------------------- */
#enable-more, #enable-better { scroll-margin-top: 64px; }

/* --------------------------------------------------------------------------
   ARROW LINK CTA — theme color per strategy section (the .sol-link reads
   --cta-color; the card bodies are white/off-white, so the CTA matches the
   strategy theme). Enable More = seafoam; Enable Better = light blue. One
   pure color per strategy (Caleb 2026-07-13) via the role tokens.
   -------------------------------------------------------------------------- */
#enable-more   { --cta-color: var(--enable-more); }
#enable-better { --cta-color: var(--enable-better); }
.sol-link--seafoam { --cta-color: var(--enable-more); }   /* Enable More */
.sol-link--blue    { --cta-color: var(--enable-better); } /* Enable Better */
.sol-link--orange  { --cta-color: var(--orange); }        /* general orange CTA */

/* ==========================================================================
   S4 — ENABLE MORE / ENABLE BETTER OVERVIEW  (two deep-link cards)
   Mirrors the Technology three-layer overview: a frame the two strategy
   sections expand. Each card lifts on hover (Card Hover recipe) and carries
   the rotating-word heading + a section deep link.
   ========================================================================== */
.strat-overview__cards {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 2.5vw, 28px); margin-top: clamp(26px, 4vw, 40px);
}
@media (max-width: 760px) { .strat-overview__cards { grid-template-columns: 1fr; } }
.strat-ocard {
  position: relative; display: block; text-align: left; text-decoration: none;
  background: #fff; border: 1px solid var(--hairline); border-radius: 14px;
  box-shadow: var(--shadow-window); overflow: hidden;
  padding: clamp(22px, 3vw, 32px);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-standard);
}
.strat-ocard:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(0, 50, 98, .16); }
.strat-ocard:focus-visible { outline: 3px solid var(--light-blue); outline-offset: 3px; }
.strat-ocard .card__rule { margin-bottom: 16px; }
/* card label at the H4 tier (15px Bold) — a compact heading, not an eyebrow */
/* Card kicker. Was an h4 above the card's h3 title — a heading level used as an
   eyebrow, which read as an h2 -> h4 skip in the outline. Now a span, which is
   what it always was semantically, so it needs `display: block` to occupy its
   own line exactly as the h4 did. Ported from overview.css:119 (roadmap 2a). */
.strat-ocard__label { display: block; margin: 0; font-size: var(--fs-h4); font-weight: var(--w-bold); line-height: 1.2; }
.strat-ocard--more   .strat-ocard__label { color: var(--enable-more); }
.strat-ocard--better .strat-ocard__label { color: var(--enable-better); }
/* Enable Better overview-card accent bar: navy -> light blue (was orange) */
.strat-ocard--better .card__rule--flow { --flow-1: var(--navy); --flow-2: var(--enable-better); }
.strat-ocard__title { color: var(--navy); font-weight: var(--w-bold); font-size: 22px; line-height: 1.2; margin: .35em 0 .45em; }
.strat-ocard p { color: var(--body-gray); font-size: var(--fs-body); line-height: 1.6; margin: 0 0 16px; max-width: none; }

/* ==========================================================================
   STRATEGY SECTIONS (.strat-sec / .strat) — Enable More (S5) + Enable Better
   (S6). Two-column top row: a LEFT rail (eyebrow + rotating-word H2 + lede +
   vertical pill selector) and the RIGHT Content Card whose panel swaps per
   pill. Below, full width, the pill's visual stage. The strat pill controller
   swaps .strat-panel + .strat-slot in lockstep and fires a resize.
   ========================================================================== */
.strat { display: grid; grid-template-columns: minmax(280px, 340px) 1fr; column-gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (max-width: 900px) { .strat { grid-template-columns: 1fr; row-gap: clamp(20px, 3vw, 28px); } }

.strat__rail { min-width: 0; }
.strat__title { color: var(--navy); font-weight: var(--w-bold); font-size: var(--fs-h2, 26px); line-height: 1.2; margin: .25em 0 .5em; text-align: left; }
.strat__lede { color: var(--body-gray); font-size: var(--fs-p1); line-height: 1.6; margin: 0 0 clamp(18px, 2.6vw, 26px); max-width: none; }

/* vertical pill selector (role=tablist). Active pill = navy fill; the icon
   keeps its strategy accent so it reads on navy. */
.strat__pills { display: flex; flex-direction: column; gap: 10px; }
.strat__pill {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  appearance: none; cursor: pointer; font-family: inherit;
  background: #fff; color: var(--navy);
  border: 1.5px solid var(--hairline); border-radius: 12px;
  padding: 13px 16px; box-shadow: 0 3px 10px rgba(0, 50, 98, .05);
  transition: background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-standard);
}
.strat__pill .ti { font-size: 22px; line-height: 1; flex: 0 0 auto; transition: color var(--dur-base) var(--ease-standard); }
.strat__pill span { font-size: 15px; font-weight: var(--w-bold); line-height: 1.25; }
.strat-sec--more   .strat__pill .ti { color: var(--enable-more); }
.strat-sec--better .strat__pill .ti { color: var(--enable-better); }
.strat__pill:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0, 50, 98, .14); }
.strat-sec--more   .strat__pill:hover { border-color: var(--enable-more); }
.strat-sec--better .strat__pill:hover { border-color: var(--enable-better); }
/* Enable Better accordion +/- glyphs + accent bars: light blue / navy->blue */
.strat-sec--better .acc-card__ic::before,
.strat-sec--better .acc-card__ic::after { background: var(--enable-better); }
.strat-sec--better .card__rule--flow { --flow-1: var(--navy); --flow-2: var(--enable-better); }
.strat__pill.is-active { background: var(--navy); color: #fff; border-color: var(--navy); }
.strat__pill.is-active:hover { transform: none; }
.strat__pill:focus-visible { outline: 3px solid var(--light-blue); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .strat__pill { transition: none; } .strat__pill:hover { transform: none; } }

/* the strat Content Card (one per section; band + body). Base .content-card
   styles apply; the band color is the strategy color (bands belong to
   Better/More only — Caleb + Dewey 2026-07-13). */
.content-card--strat { align-self: start; }

/* pill PANELS (inside the card body) + visual SLOTS (in the stage below).
   Only the active one shows; the swap fades out then the incoming fades in via
   a keyframe (mirrors the Technology tab fade). */
.strat-panel { display: none; }
.strat-panel.is-active { display: block; opacity: 1; transition: opacity var(--dur-base) var(--ease-standard); animation: sol-strat-fade var(--dur-slow) var(--ease-out); }
.strat-panel.is-active.is-fading { opacity: 0; }
.strat-slot { display: none; }
.strat-slot.is-active { display: block; opacity: 1; transition: opacity var(--dur-base) var(--ease-standard); animation: sol-strat-fade var(--dur-slow) var(--ease-out); }
.strat-slot.is-active.is-fading { opacity: 0; }
@keyframes sol-strat-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .strat-panel.is-active, .strat-slot.is-active { transition: none; animation: none; } }

/* Ecoweb reveal: the network graphic rebuilds ~150ms after its slot is shown;
   hold it at opacity 0 until the controller adds .eco-ready (~300ms later),
   then fade it in — so the pre-build platform-svg flash never shows. */
.strat-slot[data-slot="more-network"] .ecoweb,
.strat-slot[data-slot="more-network"] .ecoflip { opacity: 0; transition: opacity var(--dur-slow) var(--ease-out); }
.strat-slot[data-slot="more-network"].eco-ready .ecoweb,
.strat-slot[data-slot="more-network"].eco-ready .ecoflip { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .strat-slot[data-slot="more-network"] .ecoweb,
  .strat-slot[data-slot="more-network"] .ecoflip { transition: none; }
}

/* Growth & Revenue intro panel (universal copy; the grid is the visual below) */
.strat-intro > h2 { margin: 0 0 .5em; color: var(--navy); font-weight: var(--w-bold); font-size: 22px; line-height: 1.25; text-align: left; }
.strat-intro > .sc-p1 { margin: 0 0 clamp(16px, 2.4vw, 22px); color: var(--body-gray); font-size: var(--fs-body); line-height: 1.6; text-align: left; max-width: none; }

/* ==========================================================================
   ROTATING WORD (.rotator) — the strategy heading's cycling word. Width-locked
   in JS to the widest word so the heading never reflows. Bold + strategy color
   (seafoam darkened for AA on white / orange). Fade-swap per
   animation-guidelines.md: OUT on --dur-fast/ease-in, IN via a keyframe.
   ========================================================================== */
.rotator { display: inline-block; vertical-align: baseline; font-weight: var(--w-bold); }
.rotator--more   { color: var(--enable-more); }
.rotator--better { color: var(--enable-better); }
.rotator.is-out { opacity: 0; transform: translateY(-4px); transition: opacity var(--dur-fast) var(--ease-in), transform var(--dur-fast) var(--ease-in); }
.rotator.is-in  { animation: sol-rot-in var(--dur-slow) var(--ease-out); }
@keyframes sol-rot-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rotator.is-out { transition: none; } .rotator.is-in { animation: none; } }

/* ==========================================================================
   LLM DATA EXTRACTION (.uc-llm) — PORTED from technology.css (the AI pill's
   visual). Five captioned stages; the live stage lights (light-blue border),
   done stages stay full opacity. Driven by the ucLlm IIFE. Markup ships fully
   lit for no-JS / reduced-motion.
   ========================================================================== */
.uc-llm {
  position: relative;
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: clamp(10px, 1.6vw, 18px); align-items: stretch;
  margin: clamp(20px, 3vw, 32px) auto 0; text-align: left;
}
.uc-llm__stage { display: flex; flex-direction: column; gap: 10px; min-width: 0; opacity: .45; transition: opacity .3s ease; }
.uc-llm__stage.is-live, .uc-llm__stage.is-done { opacity: 1; }
.uc-llm__cap {
  min-height: 2.5em; display: flex; align-items: flex-end; justify-content: center;
  text-align: center; font-size: 12px; font-weight: var(--w-bold); color: var(--navy);
  text-transform: uppercase; letter-spacing: .06em;
}
.uc-llm__panel {
  flex: 1; position: relative; overflow: hidden;
  background: #fff; border: 1px solid var(--hairline); border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0, 50, 98, .08); padding: 10px;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.uc-llm__stage.is-live .uc-llm__panel { border-color: var(--light-blue); box-shadow: 0 8px 20px rgba(81, 183, 231, .22); }
.uc-llm__docrow { display: flex; align-items: center; gap: 6px; padding: 5px 6px; border: 1px solid #e3e9f0; border-radius: 6px; margin-bottom: 6px; background: #f7fafc; opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .3s ease; }
.uc-llm__docrow.is-in { opacity: 1; transform: none; }
.uc-llm__docrow .ti { color: var(--orange); font-size: 13px; line-height: 1; flex: 0 0 auto; }
.uc-llm__docrow-stub { height: 6px; border-radius: 3px; background: #dde5ec; flex: 1; }
@media (prefers-reduced-motion: reduce) { .uc-llm__docrow { transition: none; } }
.uc-llm__stage[data-stage="1"] .uc-llm__panel { display: flex; flex-direction: column; justify-content: space-between; }
/* display:block is LOAD-BEARING — as bare <span>s these default to inline,
   which ignores height/width and collapses them to zero (invisible). */
.uc-llm__ln { display: block; height: 7px; border-radius: 3px; background: #d8e1ea; margin: 3px 0; }
.uc-llm__ln--head { height: 10px; width: 58%; background: #b9c7d4; }
.uc-llm__docline { display: flex; gap: 8px; align-items: center; }
.uc-llm__docline .uc-llm__read { flex: 0 0 auto; }
.uc-llm__read { display: block; border: 1px dashed transparent; border-radius: 5px; padding: 3px 5px; transition: background .2s ease, border-color .2s ease; }
.uc-llm__read.is-now { background: rgba(81, 183, 231, .3); border-color: var(--light-blue); }
.uc-llm__read.is-read { background: rgba(81, 183, 231, .08); }
.uc-llm__scrib { display: block; width: 100%; height: 13px; }
.uc-llm__scrib path { fill: none; stroke: #93a6b8; stroke-width: 1.7; stroke-linecap: round; }
.uc-llm__sigline { border-bottom: 1px solid #b9c7d4; }
.uc-llm__pill { display: flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--hairline); border-radius: 999px; padding: 6px 10px; font-size: 11px; font-weight: var(--w-medium); color: var(--navy); opacity: .4; transition: opacity .25s ease, border-color .25s ease; margin-bottom: 7px; }
.uc-llm__pill .ti { color: var(--orange); font-size: 13px; line-height: 1; flex: 0 0 auto; }
.uc-llm__pill.is-on { opacity: 1; border-color: var(--seafoam); }
.uc-llm__pkg { display: flex; justify-content: center; margin: 2px 0 12px; }
.uc-llm__pkg .ti { font-size: 28px; color: var(--orange); line-height: 1; }
.uc-llm__recrow { display: grid; grid-template-columns: 16px 1fr; gap: 8px; align-items: center; margin-bottom: 9px; opacity: .3; transition: opacity .25s ease; }
.uc-llm__recrow.is-on { opacity: 1; }
.uc-llm__recrow .ti { color: var(--seafoam); font-size: 14px; line-height: 1; }
.uc-llm__recbar { height: 9px; border-radius: 4px; background: rgba(0, 194, 155, .22); border: 1px solid rgba(0, 194, 155, .5); }
.uc-llm__stage[data-stage="4"] .uc-llm__panel { display: flex; flex-direction: column; }
.uc-llm__erp { position: relative; flex: 1; display: flex; flex-direction: column; border: 1px solid var(--hairline); border-radius: 8px; overflow: hidden; background: #fff; }
.uc-llm__erpbar { display: flex; align-items: center; gap: 4px; padding: 5px 7px; background: var(--navy); }
.uc-llm__erpdot { width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, .35); flex: 0 0 auto; }
.uc-llm__erpbarstub { height: 5px; width: 44%; border-radius: 3px; background: rgba(255, 255, 255, .25); margin-left: 6px; }
.uc-llm__erpwtabs { display: flex; gap: 4px; padding: 5px 7px 0; background: var(--off-white); border-bottom: 1px solid var(--hairline); }
.uc-llm__erpwtab { width: 34px; height: 12px; border-radius: 5px 5px 0 0; background: #dde5ec; border: 1px solid transparent; }
.uc-llm__erpwtab.is-live { background: #fff; border-color: var(--hairline); border-bottom-color: #fff; }
.uc-llm__erpbody { flex: 1; display: grid; grid-template-columns: 24% 1fr; gap: 7px; padding: 8px 8px 28px; }
.uc-llm__erpside { display: flex; flex-direction: column; gap: 5px; justify-content: space-between; border-right: 1px solid #eef2f7; padding-right: 6px; }
.uc-llm__erpstub { height: 5px; border-radius: 3px; background: #e3e9f0; }
.uc-llm__erpmain { display: flex; flex-direction: column; gap: 6px; justify-content: space-between; min-width: 0; }
.uc-llm__erptools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.uc-llm__erpchip { height: 11px; border-radius: 4px; background: #eef2f7; border: 1px solid var(--hairline); }
.uc-llm__erpcells { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.uc-llm__erpcell { height: 11px; border-radius: 4px; background: #f4f7fa; border: 1px solid #e3e9f0; }
.uc-llm__erpcheckrow { display: flex; align-items: center; gap: 5px; }
.uc-llm__erpcheckrow .uc-llm__erpstub { flex: 1; }
.uc-llm__erpcheck { width: 10px; height: 10px; flex: 0 0 auto; position: relative; background: #fff; border: 1.5px solid #c9d4df; border-radius: 3px; }
.uc-llm__erptype { position: relative; height: 13px; border: 1px solid var(--hairline); border-radius: 4px; background: #fff; overflow: hidden; }
.uc-llm__erptype-fill { display: block; height: 5px; margin: 3px 5px 0; width: 0; border-radius: 3px; background: #c9d4df; }
.uc-llm__erpnext { position: absolute; right: 6px; bottom: 6px; width: 18px; height: 18px; border-radius: 5px; background: var(--orange); opacity: .45; display: inline-flex; align-items: center; justify-content: center; transition: opacity .25s ease, filter .15s ease; }
.uc-llm__erpnext::after { content: ""; width: 5px; height: 5px; border-right: 2px solid #fff; border-top: 2px solid #fff; transform: rotate(45deg); margin-left: -2px; }
.uc-llm__erphit { transition: background .2s ease, border-color .2s ease; }
.uc-llm__erpchip.is-on, .uc-llm__erpcell.is-on { background: rgba(0, 194, 155, .16); border-color: rgba(0, 194, 155, .55); }
.uc-llm__erpcheck.is-on { border-color: var(--seafoam); background: rgba(0, 194, 155, .12); }
.uc-llm__erpcheck.is-on::after { content: "\2713"; position: absolute; left: 0; top: -4px; font-size: 10px; font-weight: var(--w-bold); color: var(--seafoam); }
.uc-llm__erptype.is-on { border-color: rgba(0, 194, 155, .55); }
.uc-llm__erptype.is-on .uc-llm__erptype-fill { width: 84%; transition: width .7s steps(10, end); }
.uc-llm__erpnext.is-on { opacity: 1; filter: brightness(.92); }
/* The pipeline on a phone: ONE STAGE AT A TIME, looping. Same treatment as
   /technology (2026-09-11) — five columns on a 375px screen made every panel
   unreadable, so the stages stack into one grid cell at full width and only the
   live one shows. The module's own timeline already tracks which stage is live,
   so no second timer is needed. `.is-stepping` is added by the IIFE when it
   actually starts, so no-JS and reduced motion keep the stacked layout. */
@media (max-width: 900px) {
  .uc-llm { grid-template-columns: 1fr 1fr; }
  .uc-llm__cap { min-height: 0; }
  .uc-llm.is-stepping { grid-template-columns: 1fr; }
  .uc-llm.is-stepping .uc-llm__stage {
    grid-area: 1 / 1; opacity: 0; visibility: hidden;
    transition: opacity var(--dur-slow) var(--ease-standard), visibility var(--dur-slow) var(--ease-standard);
  }
  .uc-llm.is-stepping .uc-llm__stage.is-live { opacity: 1; visibility: visible; }
}