/* ==========================================================================
   TECHNOLOGY PAGE OVERLAY — site/technology/index.html ONLY
   --------------------------------------------------------------------------
   Loads AFTER valere.css (design tokens + shared components) and
   case-study.css (the shared module library: .spine-*, .dataact-*,
   .m-select). This file holds ONLY what is specific to the /technology page:
   its section furniture (.tech-*) and the module overrides ported from
   vgm-use-case.css for the mods this page reuses (#spineViz endpoint cards,
   #htsStream card fixes, .uc-rpa, .uc-llm).

   RULE: never edit valere.css or case-study.css for this page's needs —
   other live pages depend on them. Page-specific overrides go HERE.

   Brand tokens used below: Navy #003262 (Core Foundation / structure),
   Light Blue #51B7E7 (Ecosystem & Orchestration / connectivity — bold on
   white), Seafoam #00C29B (Enable More / growth), Orange #F88024 (Execution
   / signature accent), Yellow #F5DE00 (graphic accent only), Body Gray
   #4D4D4D (copy), white canvas. Type: Fira Sans via the shared --font stack.
   ========================================================================== */

/* --------------------------------------------------------------------------
   S1 HERO (.tech-hero)
   White, centered, no video. Widths inherit the site baseline (2026-07-07):
   head block = var(--head-max) 720px, lede = P1 tier (16px / 63ch). The
   first-draft 820px/70ch overrides were removed when the baseline landed.
   -------------------------------------------------------------------------- */
.tech-hero p.lede + p.lede { margin-top: -0.6em; } /* the two ledes read as one passage */

/* --------------------------------------------------------------------------
   SUB-BLOCK RHYTHM (.tech-sub)
   One reusable sub-section unit inside the deep-dive sections: centered H3
   (navy bold 20px) + centered body paragraphs, with breathing room between
   consecutive sub-blocks. Mirrors the .sol-panel-item head treatment so the
   ported modules sit in familiar furniture.
   -------------------------------------------------------------------------- */
.tech-sub { margin-top: clamp(40px, 6vw, 72px); }
.tech-sub > h3 { text-align: center; margin-bottom: .4em; }
.tech-sub > p {
  color: var(--body-gray); /* Body Gray #4D4D4D */
  max-width: var(--p1-max); /* ONE prose width site-wide (Caleb 2026-07-07) */
  margin: 0 auto clamp(12px, 1.8vw, 16px);
  text-align: center;
}

/* closing paragraph after a module (e.g. Orchestration experienced /
   partner activation) — extra top space so it reads as a section close */
.tech-close-p { margin-top: clamp(28px, 4vw, 44px); }

/* --------------------------------------------------------------------------
   FOUR-UP CARD GRID (.tech-cards4)
   The Core Foundation capabilities (navy rules) and the governed-automation
   principles (orange rules) are 4 cards each. Base .card / .cards styles
   come from valere.css; this widens the grid to 4 columns and steps down
   responsively. Text left-aligned inside centered sections.
   -------------------------------------------------------------------------- */
.cards.tech-cards4 {
  grid-template-columns: repeat(4, 1fr);
  margin-top: clamp(24px, 4vw, 40px);
  text-align: left;
}
@media (max-width: 1020px) { .cards.tech-cards4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .cards.tech-cards4 { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   OBI EXAMPLE CARD (.tech-example) — S4c
   The payer-margin product-substitution example from 03, framed as a white
   card so the story reads as one unit. Light-blue #51B7E7 diamond markers =
   the intelligence/connectivity accent (color maps to architecture); lead
   line navy bold.
   -------------------------------------------------------------------------- */
.tech-example {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: clamp(20px, 3vw, 30px);
  max-width: 820px;
  margin: clamp(20px, 3vw, 28px) auto;
  text-align: left;
  box-shadow: 0 6px 18px rgba(0, 50, 98, .08);
}
.tech-example__lead { font-weight: var(--w-bold); color: var(--navy); }
.tech-example p { max-width: none; }
.tech-example ul { list-style: none; margin: 12px 0 16px; padding: 0; }
.tech-example li { position: relative; padding-left: 26px; margin-bottom: 10px; color: var(--body-gray); }
.tech-example li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 10px; height: 10px; border-radius: 3px;
  background: var(--light-blue); /* #51B7E7 — intelligence/connectivity */
  transform: rotate(45deg);
}

/* --------------------------------------------------------------------------
   S3 EVENT-STREAM ENDPOINT CARDS (#spineViz) — ported from vgm-use-case.css
   The spine endpoints are the eight technology/system categories a
   post-acute operation runs: navy #003262 mini-card, orange #F88024 Tabler
   icon, white bold label. Overrides the white .spine-endpoint__name pill
   from case-study.css via id specificity.
   -------------------------------------------------------------------------- */
.tech-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;   /* one line, always */
  /* FIXED width so both flip faces share one box — the particle tracks are
     measured against the endpoint centers and must not drift between faces.
     Wide enough for the longest label (Population Health & At-Risk) on ONE line. */
  width: clamp(212px, 22vw, 284px);
  box-shadow: 0 6px 18px rgba(0, 50, 98, .12);
  /* transform transition is LOAD-BEARING for the rotateX flip (the flip sets
     transform on THIS element; the repel translates the parent .spine-endpoint,
     so no conflict). */
  transition: transform .3s ease, background .3s ease, border-color .3s ease;
  will-change: transform;
}
.tech-stage .spine-endpoint__name .ti { color: var(--orange); font-size: 20px; line-height: 1; flex: 0 0 auto; }
/* Hover: NO shadow, NO lift (Caleb 2026-07-07) — the ecoweb-style push effect is
   the hover interaction now. Override the shared case-study.css hover (which adds
   translateY(-3px) + --shadow-window). Keep the subtle resting shadow. */
.tech-stage .spine-endpoint:hover .spine-endpoint__name,
.tech-stage .spine-endpoint:hover .spine-endpoint__name--more {
  transform: none; box-shadow: 0 6px 18px rgba(0, 50, 98, .12);
}
.tech-stage .spine-endpoint:hover .spine-endpoint__name { border-color: var(--navy); }
/* the Enable More face: seafoam #00C29B card, white text, NAVY icon */
.tech-stage .spine-endpoint__name--more { background: var(--seafoam); border-color: var(--seafoam); }
.tech-stage .spine-endpoint__name--more .ti { color: var(--navy); }
.tech-stage .spine-endpoint:hover .spine-endpoint__name--more { border-color: var(--seafoam); }
@media (prefers-reduced-motion: reduce) { .tech-stage .spine-endpoint__name { transition: none; } }
/* mobile arched layout: stack icon over a small label (beats the id rule above);
   endpoints share the row evenly so face swaps never shift the arch */
@media (max-width: 860px) {
  .tech-stage .spine-endpoint { flex: 1 1 0; min-width: 0; }
  .tech-stage .spine-endpoint__name {
    flex-direction: column; gap: 3px; font-size: 10px; font-weight: var(--w-bold);
    padding: 7px 6px; white-space: normal; text-align: center;
    width: 100%;
  }
  .tech-stage .spine-endpoint__name .ti { font-size: 15px; }

  /* ── ONE LINE PER ROW (Caleb, 2026-09-12) ─────────────────────────────────
     "the flip cards do not line up center on the top and bottom rows. Please
     center on a single row line for both top and bottom cards." Same for the
     Interoperability variant.
     case-study.css deliberately ARCHES the two rows on a phone:
     .spine-queue--left is align-items:flex-end and --right is flex-start. With
     labels wrapping to one, two or three lines the cards are different heights,
     so an edge-aligned row leaves their tops staggered - measured at 375px, the
     top four sat on two different lines 10px apart.
     `stretch` makes every card in a row the full row height, so tops AND bottoms
     line up and the row reads as one line. The connector lines are drawn to each
     endpoint's measured centre in JS, so they follow the new geometry on the
     next build rather than needing their own fix.
     Scoped to .tech-stage: the arch is still correct where the module is used
     on /solutions and the proposals. */
  .tech-stage .spine-queue { align-items: stretch; }
  .tech-stage .spine-queue .spine-endpoint { justify-content: stretch; }
  .tech-stage .spine-queue .spine-endpoint__name { height: 100%; justify-content: center; }
}

/* --------------------------------------------------------------------------
   CORE FOUNDATION SPINE VARIANTS (Caleb 2026-07-07)
   Two variants of the Event Stream module for the Core tabs:
   • Interoperability (.spine-viz--lines, #spineInterop): static light-blue
     connector LINES (the ecoweb web-line look) from each endpoint to the
     business-on-platform graphic — no particle dots, no mouse-repel. An H4
     statement sits where the counter was.
   • Security (#spineSecurity): the full particle spine, but the counter is
     replaced by the SOC 2 Type II mark + a P3 (italic) credentialing line.
   -------------------------------------------------------------------------- */
.spine-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.spine-lines line { stroke: var(--light-blue); stroke-width: 1.25; opacity: .5; } /* #51B7E7 = connectivity */

.spine-interop-head { text-align: center; margin-bottom: clamp(10px, 1.5vw, 16px); }
.spine-interop-head h4 { margin: 0 auto; max-width: 32ch; }

.spine-cred { text-align: center; margin-bottom: clamp(10px, 1.5vw, 16px); }
.spine-cred__logo {
  display: block; height: clamp(54px, 7vw, 76px); width: auto; margin: 0 auto 8px;
  /* tornado flip (left-to-right) once every 10s */
  animation: soc2-flip 10s ease-in-out infinite;
  backface-visibility: visible;
}
@keyframes soc2-flip {
  0%   { transform: rotateY(0deg); }
  8%   { transform: rotateY(360deg); }   /* ~0.8s spin, then rest */
  100% { transform: rotateY(360deg); }
}
@media (prefers-reduced-motion: reduce) { .spine-cred__logo { animation: none; } }
.spine-cred__desc { margin: 0 auto; max-width: 34ch; text-align: center; }

/* --------------------------------------------------------------------------
   S4a ONE CONNECTION FIXES (#htsStream) — ported from vgm-use-case.css
   Base .htsstream (valere.css) is sized for short vertical names and clips
   this page's longer category/service labels. Allow a two-line wrap inside a
   uniform card so the pipe stubs stay put. The Enable More faces go SEAFOAM
   #00C29B (navy icon) to match the Event Streaming flip cards. Platform
   renders ABOVE the event-stream dots (nodes flow behind it).
   -------------------------------------------------------------------------- */
#htsStream .htsstream__stream { position: relative; z-index: 3; }
#htsStream .htsstream__card { width: clamp(200px, 21vw, 240px); }
#htsStream .htsstream__card-t { white-space: normal; line-height: 1.25; }
#htsStream .htsstream__card-in { min-height: 36px; align-items: center; }
#htsStream .htsstream__card--more { background: var(--seafoam); }
#htsStream .htsstream__card--more .ti { color: var(--navy); }

/* ── #htsStream on a phone (Caleb, 2026-09-12) ───────────────────────────────
   "this looks terrible on mobile. Need to have the line and icon correctly in
   between the business and platform. Then you need to center row all four flip
   cards on one row (not column) and make the wireframe branch correctly to the
   four center points of the flip cards."
   Three parts:
   1. The pipes come BACK. valere.css hides them below 860px because the desktop
      geometry assumes a horizontal row; the module's build() now has a vertical
      branch, so there is real geometry to draw.
   2. The four cards become an even four-column ROW. They were 200px wide each,
      so at 335px only one fitted per line and they stacked into a column. Now
      each is a quarter of the width with the icon over a wrapping label, the
      same shape the spine endpoints use on a phone.
   3. Room under the platform for the bus line to run before it branches down. */
@media (max-width: 860px) {
  #htsStream .htsstream__pipes { display: block; }

  #htsStream .htsstream__targets {
    display: grid; grid-template-columns: repeat(4, 1fr);
    align-items: stretch;                 /* one line: labels wrap to different
                                             heights, and without this the four
                                             tops sat 12px apart and the pipe
                                             drops stopped short of two of them */
    gap: 6px; width: 100%; margin-top: clamp(26px, 7vw, 40px);
  }
  #htsStream .htsstream__card { width: auto; min-width: 0; padding: 8px 4px; height: 100%; }
  #htsStream .htsstream__card-in { flex-direction: column; gap: 4px; min-height: 0; text-align: center; }
  #htsStream .htsstream__card .ti { font-size: 16px; }
  #htsStream .htsstream__card-t { font-size: 10px; line-height: 1.2; white-space: normal; }
}

/* --------------------------------------------------------------------------
   S5a RPA MODULE (.uc-rpa) — ported from vgm-use-case.css
   A busy wireframe ERP screen (no real text — stubs, chips, cells, fields
   only), three window tabs whose views swap, and a cursor that races between
   targets, clicking as it goes. Driven by the ucRpa IIFE (infinite loop).
   Reduced-motion / no-JS: static busy screen, no cursor.
   Light blue #51B7E7 flash = the click; seafoam #00C29B tint = work done;
   orange #F88024 = the Next arrow (Execution accent).
   -------------------------------------------------------------------------- */
.uc-rpa { position: relative; max-width: 640px; margin: clamp(20px, 3vw, 32px) auto 0; text-align: left; }
.uc-rpa__screen { position: relative; background: #fff; border: 1px solid var(--hairline); border-radius: 14px; box-shadow: var(--shadow-window); overflow: hidden; }
.uc-rpa__bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; background: var(--navy); }
.uc-rpa__dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .35); flex: 0 0 auto; }
.uc-rpa__bar-stub { height: 8px; width: 110px; border-radius: 4px; background: rgba(255, 255, 255, .25); margin-left: 10px; }
/* fake window tabs — the "different windows" the cursor races through */
.uc-rpa__wtabs { display: flex; gap: 6px; padding: 8px 12px 0; background: var(--off-white); border-bottom: 1px solid var(--hairline); }
.uc-rpa__wtab { width: 86px; height: 22px; border-radius: 8px 8px 0 0; background: #dde5ec; border: 1px solid transparent; }
.uc-rpa__wtab.is-live { background: #fff; border-color: var(--hairline); border-bottom-color: #fff; }
/* dense wireframe views (sidebar + toolbar + grids of stubs) */
.uc-rpa__views { position: relative; height: clamp(220px, 30vw, 280px); }
.uc-rpa__view { position: absolute; inset: 0; display: grid; grid-template-columns: 88px 1fr; gap: 12px; padding: 12px 12px 48px; opacity: 0; pointer-events: none; transition: opacity .18s ease; }
.uc-rpa__view.is-live { opacity: 1; }
.uc-rpa__side { display: flex; flex-direction: column; gap: 8px; border-right: 1px solid #eef2f7; padding-right: 10px; }
.uc-rpa__main { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.uc-rpa__stub { height: 8px; border-radius: 4px; background: #e3e9f0; }
.uc-rpa__stub--dark { background: #c9d4df; }
.uc-rpa__toolbar { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.uc-rpa__chip { height: 20px; border-radius: 6px; background: #eef2f7; border: 1px solid var(--hairline); }
.uc-rpa__cellrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.uc-rpa__cell { height: 18px; border-radius: 5px; background: #f4f7fa; border: 1px solid #e3e9f0; }
.uc-rpa__formgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.uc-rpa__field { height: 22px; border-radius: 6px; background: #f4f7fa; border: 1px solid var(--hairline); }
/* click targets: light-blue flash on the click, seafoam tint once done */
.uc-rpa__hit { transition: background .15s ease, border-color .15s ease; }
.uc-rpa__hit.is-hit { background: rgba(81, 183, 231, .3); border-color: var(--light-blue); }
.uc-rpa__hit.is-done { background: rgba(0, 194, 155, .16); border-color: rgba(0, 194, 155, .55); }
/* checkbox targets: a real box that gets a seafoam check when clicked */
.uc-rpa__checkrow { display: flex; align-items: center; gap: 8px; }
.uc-rpa__checkrow .uc-rpa__stub { flex: 1; }
.uc-rpa__check { width: 14px; height: 14px; flex: 0 0 auto; position: relative; background: #fff; border: 1.5px solid #c9d4df; border-radius: 4px; }
.uc-rpa__check.is-hit { border-color: var(--light-blue); background: rgba(81, 183, 231, .3); }
.uc-rpa__check.is-done { border-color: var(--seafoam); background: rgba(0, 194, 155, .12); }
.uc-rpa__check.is-done::after { content: "\2713"; position: absolute; left: 1px; top: -4px; font-size: 12px; font-weight: var(--w-bold); color: var(--seafoam); }
/* typed-field targets: a bar "types" across in steps once clicked */
.uc-rpa__type { position: relative; height: 22px; border: 1px solid var(--hairline); border-radius: 6px; background: #fff; overflow: hidden; }
.uc-rpa__type-fill { display: block; height: 8px; margin: 6px 8px 0; width: 0; border-radius: 4px; background: #c9d4df; }
.uc-rpa__type.is-hit { border-color: var(--light-blue); background: rgba(81, 183, 231, .12); }
.uc-rpa__type.is-done { border-color: rgba(0, 194, 155, .55); }
.uc-rpa__type.is-done .uc-rpa__type-fill { width: 86%; transition: width .9s steps(14, end); }
/* the NEXT arrow, bottom-right of every window — RPA clicks it to move on */
.uc-rpa__next {
  position: absolute; right: 10px; bottom: 10px; z-index: 2;
  width: 30px; height: 30px; border-radius: 8px; background: var(--orange);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 10px rgba(248, 128, 36, .4); transition: filter .15s ease;
}
.uc-rpa__next::after { content: ""; width: 9px; height: 9px; border-right: 2.5px solid #fff; border-top: 2.5px solid #fff; transform: rotate(45deg); margin-left: -3px; }
.uc-rpa__next.is-hit { filter: brightness(.85); }
/* the simulated cursor: inline SVG arrow, FAST left/top transitions */
.uc-rpa__cursor {
  position: absolute; z-index: 6; left: 14%; top: 30%;
  width: 20px; height: 20px; pointer-events: none;
  filter: drop-shadow(0 2px 5px rgba(0, 50, 98, .35));
  transition: left .16s ease, top .16s ease, transform .1s ease;
}
.uc-rpa__cursor.is-click { transform: scale(.78); }
.no-js .uc-rpa__cursor { display: none; }
@media (prefers-reduced-motion: reduce) { .uc-rpa__cursor { display: none; } .uc-rpa__view { transition: none; } }

/* --------------------------------------------------------------------------
   S5b LLM DATA EXTRACTION PIPELINE (.uc-llm) — ported from vgm-use-case.css
   FIVE captioned stages, left to right (the full intake-to-ERP story):
   1 Intake triage (growing doc stack) -> 2 Document read (zones highlight
   light blue) -> 3 Data extracted (pills) -> 4 Packaged & organized (record
   rows) -> 5 Keyed into your ERP (fields fill + seafoam check). The live
   stage lights (light-blue border); done stages stay full opacity. Driven by
   the ucLlm IIFE (loop). 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); }
/* stage 1: intake triage — the doc cards APPEAR one by one from blank; once
   full they FADE OUT together, refill once more, and PAUSE on the full
   window (no infinite loop — Caleb, 2026-07-06 pm). */
.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__doclist { transition: none; } }
/* stage 2: the FULL document is read like a human reads — a bright reading
   highlight moves left-to-right, top-to-bottom over EVERY component (lines,
   scribbles, the signature); read components keep a faint tint. The panel is
   a flex column with space-between so the document FILLS the panel height. */
.uc-llm__stage[data-stage="1"] .uc-llm__panel { display: flex; flex-direction: column; justify-content: space-between; }
/* the ghosted document-text bars. display:block is LOAD-BEARING — as bare
   <span>s they default to display:inline, which ignores height/width and
   collapses them to zero size (invisible). Block makes them the gray lines
   that sit under the blue reading highlight (Caleb 2026-07-09). */
.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; }
/* stage 3: extracted-data pills (six — fills the panel) */
.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); }
/* stage 4: package icon on top; check-then-line rows appear top-down */
.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); }
/* stage 5: a REPLICA of the RPA screen reformatted for the portrait panel
   (same anatomy at mini scale). Its .uc-llm__erphit elements light in order.
   The replica FILLS its panel: panel -> erp -> body all stretch, and the
   sidebar + main column space their content across the full height. */
.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; }
/* lighting: selects tint seafoam, checkboxes get the check, the field types */
.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 ────────────────────
   Five columns squeezed into a 375px screen made every panel unreadable. Caleb
   asked for the opposite: keep each stage at the size and orientation it has on
   desktop, and step through them - stage animates, fades out, next fades in.
   The module's own scripted timeline ALREADY tracks which stage is live
   (`live(k)` sets .is-live), so this needs no second timer: every stage is
   stacked into the same grid cell and only .is-live is shown. The container
   therefore sits at the height of the TALLEST stage and never jumps between
   steps, and each stage gets the full width instead of a fifth of it.
   `.is-stepping` is added by the IIFE when it actually starts, so no-JS and
   prefers-reduced-motion (which return early) keep the old stacked layout
   rather than hiding every stage. */
@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; }
}
@media (max-width: 560px) { .uc-llm { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   S6 SECURITY BAND (.tech-security)
   Navy #003262 card = deliberate accent on the off-white band (the
   case-study navy-card pattern). White type; light-blue #51B7E7 icons
   (legible at icon size on navy); white bold link with the sol-link hover.
   Claims inside are quoted exactly from their sources — never extend them.
   -------------------------------------------------------------------------- */
.tech-security {
  background: var(--navy);
  border-radius: 18px;
  padding: clamp(26px, 4vw, 44px);
  box-shadow: var(--shadow-window);
  text-align: center;
  max-width: 860px;
  margin: 0 auto;
}
.tech-security__rows {
  list-style: none; margin: 0 0 clamp(18px, 2.5vw, 26px); padding: 0;
  display: flex; flex-direction: column; gap: 14px; align-items: center;
}
.tech-security__row {
  display: inline-flex; align-items: flex-start; gap: 12px;
  color: #fff; font-size: 16px; font-weight: var(--w-medium);
  line-height: 1.45; text-align: left; max-width: 56ch;
}
.tech-security__row .ti { color: var(--light-blue); font-size: 22px; line-height: 1.3; flex: 0 0 auto; }
.tech-security__link {
  display: inline-flex; align-items: center; gap: 8px;
  color: #fff; font-weight: var(--w-bold); text-decoration: none;
  transition: gap .15s ease;
}
.tech-security__link:hover { gap: 12px; }
.tech-security__link:focus-visible { outline: 3px solid var(--light-blue); outline-offset: 3px; }

/* ==========================================================================
   NEW MODULES (2026-07-07) — Content Card + interactive module layout
   --------------------------------------------------------------------------
   The three layer sections (Core / Ecosystem & Orchestration / Execution) are
   re-laid as a two-column .tech-layer: a tabbed Content Card on the LEFT and
   the wide interactive module on the RIGHT. Everything from here down is the
   new system; the .tech-sub / .tech-example / .tech-cards4 / .tech-security
   rules ABOVE are now unused (left in place, harmless).

   Color = architecture: Core band navy #003262, Ecosystem band light-blue
   #51B7E7, Execution band orange #F88024. White card chrome, navy H2s, gray
   body. Accordion flow rules follow the layer (navy->blue Core, blue->seafoam
   Eco, orange Execution).
   ========================================================================== */

/* --------------------------------------------------------------------------
   LAYER LAYOUT (.tech-layer) — Caleb 2026-07-07 rev
   The Content Card is a FULL-WIDTH window (one column). The interactive module
   sits BELOW the card, full width, at the size it was designed for (the wide
   modules were strangled in a half-page column). Inside the card, the active
   panel is a two-column split: copy LEFT, the three accordion cards RIGHT.
   -------------------------------------------------------------------------- */
.tech-layer { }                                   /* card, then full-width stage below */
.tech-layer .tech-stage { margin-top: clamp(26px, 4vw, 44px); }

/* --------------------------------------------------------------------------
   CONTENT CARD (.content-card) + tabs variant
   White card: hairline border, radius 14px, window shadow. A colored top BAND
   holds the layer name (H3, white bold). A tab strip sits under the band; the
   body shows one .content-panel per tab.
   -------------------------------------------------------------------------- */
.content-card {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  box-shadow: var(--shadow-window);
  overflow: hidden;              /* clip the band's top corners to the radius */
}

/* colored top band — layer name in WHITE bold */
.content-card__band {
  padding: 16px clamp(18px, 2.4vw, 24px);
}
.content-card__band--core { background: var(--navy); }        /* Core = navy */
.content-card__band--eco  { background: var(--light-blue); }  /* Ecosystem = light blue */
.content-card__band--exec { background: var(--orange); }      /* Execution = orange */

/* The "Book Your Discovery" Arrow Link (.content-panel__cta = a .sol-link that
   reads --cta-color) matches each card's layer theme (Caleb 2026-07-09):
   Core = navy, Ecosystem = light blue, Execution = orange. Eco uses the same
   AA-safe darkened light blue (#2a8ec2) as the eco active tab, since pure
   #51B7E7 is too light for text on white. */
.content-card--tabs[data-cardgroup="core"] { --cta-color: var(--navy); }
.content-card--tabs[data-cardgroup="eco"]  { --cta-color: #2a8ec2; }
.content-card--tabs[data-cardgroup="exec"] { --cta-color: var(--orange); }
.content-card__title {
  margin: 0; color: #fff; font-weight: var(--w-bold);
  font-size: 20px; line-height: 1.25;
}

/* tab strip directly under the band */
.content-card__tabs {
  display: flex; flex-wrap: wrap; gap: 2px;
  padding: 0 clamp(14px, 2vw, 20px);
  border-bottom: 1px solid var(--hairline);
}
.content-card__tab {
  appearance: none; background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: var(--w-medium);
  color: var(--body-gray);                 /* inactive = body gray */
  padding: 13px 12px; margin-bottom: -1px; /* overlap the strip border */
  border-bottom: 3px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}

/* ── Ecoweb reveal (Caleb, 2026-09-12) ───────────────────────────────────────
   "When I select this I see all the logos bunched up for a split second and
   then the web appears."
   The graphic's nodes are stacked in the markup and positioned by JS only after
   its slot becomes visible, so for a few frames the raw stack was on screen.

   ⚠ CSS ONLY, AND IT MUST STAY THAT WAY. The first attempt drove this with a
   MutationObserver watching the slot's class. It deadlocked the page: every
   script on /technology stopped responding, verified by a fresh tab timing out
   on `1+1` while other tabs answered instantly. Do not reach for an observer
   here - the slot is display:none when inactive, so simply becoming visible
   RESTARTS this animation on its own, which is all the trigger needed.

   `both` holds opacity at 0 through the delay, so the stacked logos are never
   painted, then it fades in once the layout pass has run. */
@keyframes eco-reveal { from { opacity: 0; } to { opacity: 1; } }
.tech-stage__slot.is-active .ecoweb,
.tech-stage__slot.is-active .ecoflip {
  animation: eco-reveal var(--dur-slow) var(--ease-out) .32s both;
}
@media (prefers-reduced-motion: reduce) {
  .tech-stage__slot.is-active .ecoweb,
  .tech-stage__slot.is-active .ecoflip { animation: none; }
}

/* EVEN TOP AND BOTTOM (Caleb, 2026-09-12: "fix how it is not centered inside
   the space. It should have even padding top and bottom").
   .ecoweb carries an asymmetric vertical margin from case-study.css - a big
   NEGATIVE top that deliberately pulls it toward the paragraph above it on
   /solutions, and a small positive bottom. There is no such paragraph in the
   Technology stage, so that negative top lifted the graphic and left the gap
   underneath. Equal margins here; the negative LEFT/RIGHT bleed is kept. */
.tech-stage__slot .ecoweb { margin-block: clamp(8px, 1.5vw, 18px); }

/* ── Tab strip on a phone (Caleb, 2026-09-11: "Execution layer - not all three
   tabs fit on one line, please fix that") ───────────────────────────────────
   The strip is flex-wrap:wrap, so at phone width the third tab dropped to a
   second row and the strip looked broken. Below 620px it becomes an even
   three-column grid instead: every tab is exactly a third of the card, the
   STRIP is always one row, and a long label (Workflow Automation, LLM Data
   Extraction) wraps inside its own tab rather than pushing the next one down.
   Grid rather than nowrap + shrinking type, because at 375px the longest label
   cannot fit one line at any readable size. Applies to all three layer cards,
   which is what keeps them consistent with each other. */
@media (max-width: 620px) {
  .content-card__tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding: 0 6px; }
  .content-card__tab { font-size: 12px; padding: 11px 4px; text-align: center; line-height: 1.25; }
}
.content-card__tab:hover { color: var(--navy); }
/* active tab: layer-colored text + a layer-colored bottom border */
.content-card--tabs[data-cardgroup="core"] .content-card__tab.is-active { color: var(--navy); border-bottom-color: var(--navy); }
.content-card--tabs[data-cardgroup="eco"]  .content-card__tab.is-active { color: #2a8ec2; border-bottom-color: var(--light-blue); } /* darkened for AA text on white */
.content-card--tabs[data-cardgroup="exec"] .content-card__tab.is-active { color: var(--orange); border-bottom-color: var(--orange); }
.content-card__tab.is-active { font-weight: var(--w-bold); }
.content-card__tab:focus-visible { outline: 3px solid var(--light-blue); outline-offset: -3px; border-radius: 4px; }

/* card body + panels. The active panel is a TWO-COLUMN split: copy (H2 + P2 +
   link) on the LEFT, the three accordion cards on the RIGHT. Explicit grid
   placement keeps the copy stacked in col 1 and the accordion spanning col 2,
   so no extra wrapper markup is needed. All copy stays LEFT-aligned. */
.content-card__body { padding: clamp(20px, 2.8vw, 32px); }
.content-panel { display: none; }
.content-panel.is-active {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.content-panel.is-active > h2,
.content-panel.is-active > .content-panel__p1,
.content-panel.is-active > .content-panel__link { grid-column: 1; }
.content-panel.is-active > .acc-cards { grid-column: 2; grid-row: 1 / 99; align-self: start; }
@media (max-width: 760px) {
  .content-panel.is-active { grid-template-columns: 1fr; }
  .content-panel.is-active > .acc-cards { grid-column: 1; grid-row: auto; margin-top: 6px; }
}
.content-panel h2 {
  margin: 0 0 .5em; color: var(--navy); font-weight: var(--w-bold);
  font-size: 22px; line-height: 1.25; text-align: left;
}
/* the paragraph under the H2 is the SMALLER P2 tier (14px) — Caleb 2026-07-07 */
.content-panel__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;
}
.content-panel__link {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 4px;
  color: var(--navy); font-weight: var(--w-bold); text-decoration: none;
  transition: gap .15s ease;
}
.content-panel__link:hover { gap: 12px; }
.content-panel__link:focus-visible { outline: 3px solid var(--light-blue); outline-offset: 3px; }

/* "Book Your Discovery" Arrow Link CTA on EVERY tab panel (Caleb 2026-07-09).
   Injected by the page script into each .content-panel (one source of truth,
   not 9 hand-placed copies) so it shows on every card and every tab, matching
   the Solutions content cards. It is the site-standard .sol-link (bold, orange
   --cta-color, arrow slides on hover) — orange reads on the white panel body.
   Sits in the LEFT copy column, below the copy (and below the security panel's
   existing .content-panel__link), never in the accordion column. */
.content-panel__cta { margin-top: clamp(16px, 2.4vw, 22px); }
.content-panel.is-active > .content-panel__cta { grid-column: 1; }

/* TAB FADE (Caleb 2026-07-07): switching a tab fades the active panel AND its
   module OUT, then the incoming pair fades IN (no overlap — the controller
   waits out the fade-out before showing the new pair).
   Fade OUT = the .is-fading opacity transition.
   Fade IN  = a keyframe ANIMATION that plays automatically whenever the
   panel/slot becomes displayed — animations (unlike transitions) reliably run
   on first render, so the incoming content cannot "pop" in. */
.content-panel.is-active,
.tech-stage__slot.is-active {
  opacity: 1;
  transition: opacity .45s ease;
  animation: tech-fade-in .45s ease;
}
.content-panel.is-active.is-fading,
.tech-stage__slot.is-active.is-fading { opacity: 0; }
@keyframes tech-fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .content-panel.is-active, .tech-stage__slot.is-active { transition: none; animation: none; }
}

/* --------------------------------------------------------------------------
   ACCORDION CARDS (.acc-cards / .acc-card)
   Three stacked mini-cards inside each panel. A flow-rule line on top (the
   shared .card__rule--flow with the layer color variant), a header BUTTON with
   the title + a CSS-drawn +/- toggle, and a collapsible body (P2 14px). All
   start collapsed; toggles are independent; keyboard accessible.
   -------------------------------------------------------------------------- */
.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;
}
/* Flow rule: the shared .card__rule is a 40px bar with an 18px bottom margin.
   As a raw first child of the (padding-0) card it hugged the top-left corner,
   detached from the title. Inset it to the title's left edge (16px) with a tight
   gap so it reads like a normal card rule sitting directly above the H3. */
.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;   /* tight top gap under the flow rule */
}
/* Accordion header = H4 (Bold, navy, 15px) — the logged standard for these
   card headers (--fs-h4, Caleb 2026-07-07). */
.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; }

/* CSS-drawn +/- glyph (a plus that loses its vertical stroke when open) */
.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 .25s ease, opacity .25s ease;
}
.acc-card__ic::before { left: 0; top: 7px; width: 16px; height: 2px; }               /* horizontal */
.acc-card__ic::after  { left: 7px; top: 0; width: 2px; height: 16px; }               /* vertical */
.acc-card.is-open .acc-card__ic::after { transform: rotate(90deg); opacity: 0; }     /* becomes a minus */
/* glyph color follows the layer */
[data-cardgroup="core"] .acc-card__ic::before,
[data-cardgroup="core"] .acc-card__ic::after { background: var(--navy); }
[data-cardgroup="eco"]  .acc-card__ic::before,
[data-cardgroup="eco"]  .acc-card__ic::after { background: var(--light-blue); }
/* exec keeps the default orange */

/* DRAWER SLIDE (Caleb 2026-07-07): the body opens like a drawer. max-height
   0 -> cap animates the reveal; with the site's global border-box the padding
   is included in the 0 so the closed state fully collapses (no sliver). JS
   toggles .is-open. The cap is generous — content is short, so it reads as a
   normal drawer. */
.acc-card__body {
  overflow: hidden;
  max-height: 0;
  /* JS animates the inline max-height to the EXACT content height on open and
     back to 0 on close, so the slide is symmetric with no dead time (a fixed
     cap made it fast + asymmetric). Slowed to .42s (Caleb 2026-07-07). */
  transition: max-height .42s ease;
}
.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;
  /* The P2 is invisible until the drawer starts opening, then fades in a beat
     after the slide begins; on close it fades out with the slide (mirrored). */
  opacity: 0; transition: opacity .2s ease;
}
.acc-card.is-open .acc-card__body p { opacity: 1; transition: opacity .3s ease .14s; }
@media (prefers-reduced-motion: reduce) {
  .acc-card__body, .acc-card__body p { transition: none; }
}

/* --------------------------------------------------------------------------
   INTERACTIVE STAGE (.tech-stage) — the RIGHT column
   One .tech-stage__slot per tab; only the active one is shown. The wide
   modules must never overflow this ~660px column, so cap width to 100% and let
   the scoped module reductions below keep them inside.
   -------------------------------------------------------------------------- */
.tech-stage { position: relative; min-width: 0; }
.tech-stage__slot { display: none; max-width: 100%; }
.tech-stage__slot.is-active { display: block; }

/* --------------------------------------------------------------------------
   PLACEHOLDER MODULE (.tech-placeholder)
   Dashed box, centered muted label — for the Core › Interoperability and
   Core › Security right-side slots until their modules are built.
   -------------------------------------------------------------------------- */
.tech-placeholder {
  display: flex; align-items: center; justify-content: center;
  min-height: 340px;
  border: 2px dashed var(--hairline);
  border-radius: 14px;
  background: #fbfcfd;
}
.tech-placeholder span {
  color: #9aa4ad; font-weight: var(--w-medium); font-size: 15px;
  letter-spacing: .02em;
}

/* --------------------------------------------------------------------------
   FULL-WIDTH MODULE STAGE (Caleb 2026-07-07 rev)
   The interactive modules now sit BELOW the card at full width, so they render
   at the size they were designed for — no per-module shrinking. (The earlier
   half-column reductions were removed with the two-column layout.) The active
   slot centers its module; modules keep their own responsive behavior.
   -------------------------------------------------------------------------- */
.tech-stage__slot.is-active { display: flex; flex-direction: column; align-items: center; }
.tech-stage__slot > * { width: 100%; }

/* --------------------------------------------------------------------------
   OTC - GENERAL WRAPPER (.tech-o2c) — Execution › Workflow Automation slot
   The ported OTC module (.o2c-* in valere.css, .cs-flow internals in
   case-study.css) is designed for a navy surface, so it gets its own navy
   card here (the .sols-o2c pattern replicated per the spin-off rules —
   solutions.css is never linked cross-page). Navy #003262 = deliberate accent.
   -------------------------------------------------------------------------- */
.tech-o2c {
  background: var(--navy);
  border-radius: 18px;
  padding: clamp(18px, 2.6vw, 28px);
  box-shadow: var(--shadow-window);
  text-align: left;
}
/* Cascade repair (same fix as the VGM / solutions overlays): case-study.css
   re-declares `.cs-steps { repeat(3, 1fr) }` AFTER valere.css, clobbering the
   `.o2c-steps` 6-column strip. Re-assert it here (this sheet loads last). */
.tech-o2c .o2c-steps { grid-template-columns: repeat(6, 1fr); }
/* ── The order-to-cash rail on a phone: ONE STEP AT A TIME, faded ────────────
   Six step chips wrapped into two or three rows, and the rail's corner radii
   assume a single row, so it read as a broken grid. Caleb asked for the same
   treatment as the pipeline above: compact, fading between steps, and he is
   fine with less on screen ("I am ok with this being more mobile optimize
   (content wise)").
   All six chips stack into ONE grid cell and only the selected one is shown, so
   the rail is exactly one chip tall and cross-fades as the module advances. The
   step NUMBER stays visible, which is what keeps "03 of six" legible without a
   second indicator. The flow underneath already stacks to one column at 860px
   (case-study.css), so this is the last squeezed piece.
   The chips are role=tab, so hiding five removes step-jumping on a phone: the
   module auto-advances, which makes it a demo rather than a control, and
   visibility:hidden also takes them out of the tab order rather than leaving
   invisible focus stops. */
/* ── Order-to-cash on a phone (Caleb, 2026-09-12) ────────────────────────────
   "Layer the data streamed, valere executes, and outcome on top of each other
   for each module... then the card flips and pulses for Valere executes, then
   the card flips again and shows outcome."
   The three columns collapse into ONE card slot. Only the phase named by
   data-phase on the module is shown, and the slot rotates on its X axis between
   them, reusing the same flip the module already uses for its stage changes.
   The step rail is replaced by the .m-select dropdown above it, so the reader
   chooses the workflow and it never switches under them. */
@media (max-width: 860px) {
  .tech-o2c .cs-flow { display: grid; grid-template-columns: 1fr; perspective: 900px; }
  .tech-o2c .cs-flow__sep { display: none; }            /* the arrows describe a row that no longer exists */
  .tech-o2c .cs-flow__col {
    grid-area: 1 / 1;
    opacity: 0; visibility: hidden;
    transition: opacity var(--dur-base) var(--ease-standard), visibility var(--dur-base) var(--ease-standard);
  }
  .tech-o2c .o2c-stage[data-phase="0"] .cs-flow__col:nth-child(1),
  .tech-o2c .o2c-stage[data-phase="1"] .cs-flow__col:nth-child(3),
  .tech-o2c .o2c-stage[data-phase="2"] .cs-flow__col:nth-child(5) { opacity: 1; visibility: visible; }
  /* the flip itself: the slot tips away and back while the phase swaps */
  .tech-o2c .cs-flow { transition: transform var(--dur-base) var(--ease-standard); transform-style: preserve-3d; }
  .tech-o2c .cs-flow.is-flipping { transform: rotateX(-90deg); }
  /* the rail is gone; the dropdown above replaces it */
  .tech-o2c .o2c-steps-wrap { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tech-o2c .cs-flow, .tech-o2c .cs-flow__col { transition: none; }
}

@media (max-width: 620px) {
  .tech-o2c .o2c-steps { grid-template-columns: 1fr; }
  .tech-o2c .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);
  }
  .tech-o2c .o2c-step[aria-selected="true"] { opacity: 1; visibility: visible; }
}

/* ==========================================================================
   STICKY SUB-NAV (.subnav) — ported from /solutions as the LINKS-ONLY variant
   (this page has no audience picker). Sits directly below the sticky main
   header and sticks to the top on scroll; one jump link per layer, with the
   in-view section scrollspied to an orange underline. Off-white bar, hairline
   top/bottom. The page script sets --subnav-top = live header height; the
   header is raised above the bar so the two stack cleanly.
   Brand: Body Gray links, Navy active text, Orange #F88024 active underline.
   ========================================================================== */
.site-header { top: 0; z-index: 70; }   /* raise the main nav above the sub-nav (z 60) */
.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;
  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 — body gray on the light bar; active = navy + 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; }
@media (max-width: 640px) { .subnav__link { font-size: 13px; padding: 8px 9px; } }

/* section anchors clear the sticky sub-nav on jump (matches /solutions) */
#core-foundation, #ecosystem-orchestration, #execution-layer { scroll-margin-top: 64px; }