/* ============================================================================================
   home-overage.css — the home page's overage stylesheet (2026-09-11)

   WHAT THIS IS
   The site keeps every page's CSS under one budget: 40 KB gzipped for the stylesheets a page
   links (scripts/verify.mjs, rule P2). The home carries more drawn UI than any other page, and
   after the How AmplifAI Works engine section it crossed the line. Robert's call: hold the
   engine section's styles in a second sheet that only the home links, marked `data-overage`
   in the head, so the overage is visible and owned rather than hidden in the shared sheet.

   HOW IT IS MEASURED
   The verifier leaves this sheet out of the P2 total and reports it on its own line for the
   home ("overage stylesheet N bytes gzipped"). Everything else on the home still has to fit
   the budget. `npm run verify` writes reports/verify.md.

   WHAT IS IN IT
   The style blocks of five components, verbatim, in the order they render:
     src/components/sections/Engine.astro
     src/components/css/engine/HubStage.astro
     src/components/css/engine/ConnectStage.astro
     src/components/css/engine/HarnessStage.astro
     src/components/css/engine/OrchestrateStage.astro
     src/components/sections/PlatformTabs.astro (2026-09-22, the people and AI agents tabs)
   Each component carries a comment pointing here in place of its <style>. These rules read the
   site's tokens (--tile-wash, --border, --sp-*, --grain …), so this sheet must load after the
   main one, which the layout guarantees.

   HOW TO MERGE IT BACK
   Move a block back into its component's <style is:global> once the shared sheet has room:
   retire a section from the shared sheet (the archive's living examples are the usual cost),
   or lift the budget in scripts/verify.mjs DEFAULT_CONFIG.cssGzip with the decision recorded
   in V4_DESIGN_DECISIONS.md. Run `npm run build && npm run verify` after either. This file is
   served from public/ as-is (not minified); keep it tidy.
   ============================================================================================ */

/* ---- src/components/sections/Engine.astro (the engine section: the capsule strip, the step panels, the corner switches, the notes) ---- */
  .engine-tab { display: inline-flex; align-items: center; gap: var(--sp-8); }
  .engine-tab-n { font-variant-numeric: tabular-nums; opacity: .6; }
  .product-tabs-trigger[aria-selected="true"] .engine-tab-n { opacity: .8; }
  /* the panel: the use-case panel's recipe on the wash; a dark step takes the band and the dark wash */
  .engine-step { position: relative; padding: var(--product-tab-panel-padding); border: 1px solid var(--border); border-radius: var(--product-tab-panel-radius); background: var(--tile-wash); display: grid; gap: var(--sp-32); overflow: hidden; }
  .engine-step + .engine-step { margin-top: var(--sp-24); }
  .engine-step[hidden] { display: none; }
  .engine-step[data-band="dark"] { background: var(--tile-wash), var(--grad-band); border-color: rgba(255, 255, 255, .1); }
  .engine-head { display: grid; gap: var(--sp-12); max-width: 92ch; }
  /* the connect step's detail toggle sits in the panel's corner */
  .engine-toggle { position: absolute; top: calc(var(--product-tab-panel-padding) + 4px); right: var(--product-tab-panel-padding); z-index: 2; }
  @media (max-width: 640px) { .engine-toggle { position: static; justify-self: start; } }
  .engine-title { font-size: var(--fs-subhead); line-height: var(--lh-display); letter-spacing: var(--track-tight); color: var(--ink); text-wrap: balance; }
  .engine-lede { font-size: var(--fs-lead-sm); line-height: var(--lh-sub); color: var(--body); }
  .engine-note { font-size: var(--fs-ui); color: var(--muted); line-height: var(--lh-body); max-width: 90ch; padding-top: var(--sp-24); border-top: 1px solid var(--border); }
  .engine-note b, .engine-note strong { color: var(--ink); font-weight: var(--fw-data); }
  [data-band="dark"] .engine-title { color: #fff; }
  [data-band="dark"] .engine-lede { color: rgba(255, 255, 255, .78); }
  [data-band="dark"] .engine-note { color: rgba(255, 255, 255, .6); border-color: rgba(255, 255, 255, .12); }
  [data-band="dark"] .engine-note b { color: #fff; }
  @media (max-width: 640px) { .engine-step { --product-tab-panel-padding: var(--sp-24); gap: var(--sp-24); } }
  @media print { .engine-step[hidden] { display: grid; } }

/* ---- src/components/css/engine/HubStage.astro (the hub stage (Gather Data inbound, Orchestrate teams outbound): beams, comets, seats, info notes) ---- */
  .gs { position: relative; width: 100%; aspect-ratio: 2.2 / 1; }
  .gs-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  /* a seat without logos rotates its words through the same box, in the ink, each word opening with its
     glyph in the small square frame (the vendor form); on the outbound stage each word is an action pill
     (Robert, 2026-09-11): an outlined capsule with the round frame inside it */
  .gs .df-word { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 10px; text-align: left; font-size: var(--fs-ui-small); font-weight: var(--fw-data); color: var(--ink); opacity: 0; transform: translateY(7px); transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease); }
  .df-word-ic { flex: none; }
  /* the outbound stage's words are action pills, arriving inside the same tinted box the vendors use, so
     the pill has a ground to stand against (Robert, 2026-09-11) */
  .gs[data-hub="out"] .df-word { padding: 0 8px; }
  .gs .action-pill { max-width: 100%; white-space: normal; text-align: left; line-height: 1.15; }  /* a pill wraps before it spills past the box */
  .gs .df-word.is-on { opacity: .85; transform: none; }
  .gs .df-word.is-out { opacity: 0; transform: translateY(-7px); }
  .gs .df-tile:hover .df-word.is-on { opacity: 1; }
  /* the mark: a rounded square on the brand gradient with the white logo, lifted by an orange cast */
  .gs-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: clamp(96px, 14%, 150px); aspect-ratio: 1; border-radius: var(--r-panel); background: var(--grad-brand); display: flex; align-items: center; justify-content: center; padding: 14px; box-shadow: 0 20px 60px -10px rgba(255, 87, 34, .45), inset 0 1px 0 rgba(255, 255, 255, .28); }
  .gs-core img { width: 100%; max-width: 100%; height: auto; }
  .gs-tiles { list-style: none; margin: 0; padding: 0; }
  .gs-seat { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); width: clamp(150px, 21%, 230px); }  /* wide enough for the longest pill on one line */
  .gs-tile { margin: 0; position: relative; }
  /* a seat's label wraps rather than truncating (the teams' names are long) */
  .gs-tile .df-cat { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.4; }
  .gs-seat:hover, .gs-seat:focus-within { z-index: 2; }
  /* the info dot in the tile's corner, its note above the tile on hover or focus (no script) */
  .gs-tile:has(> .gs-info) .df-cat { padding-right: 24px; }
  .gs-info { position: absolute; top: 12px; right: 12px; width: 18px; height: 18px; padding: 0; border-radius: var(--r-circle); border: 1px solid var(--border-strong); background: var(--bg); color: var(--muted); font: inherit; font-size: 11px; font-weight: var(--fw-strong); font-style: italic; line-height: 1; display: grid; place-items: center; cursor: default; transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
  .gs-info:hover, .gs-info:focus-visible { color: var(--ink); border-color: var(--ink); }
  .gs-info:focus-visible { outline: 2px solid var(--plum); outline-offset: 2px; }
  .gs-tip { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translate(-50%, 4px); width: max(100%, 230px); padding: 10px 12px; border-radius: var(--r-field); border: 1px solid var(--border); background: var(--bg); color: var(--body); font-size: var(--fs-small); line-height: var(--lh-body); text-align: left; box-shadow: 0 14px 32px -12px rgba(26, 26, 46, .28); opacity: 0; visibility: hidden; transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), visibility 0s linear var(--t-fast); z-index: 3; }
  .gs-info:hover + .gs-tip, .gs-info:focus + .gs-tip, .gs-tip:hover { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
  @media (max-width: 759px) {
    .gs { aspect-ratio: auto; display: grid; gap: var(--sp-16); }
    .gs-svg { display: none; }
    .gs-core { position: static; transform: none; width: 120px; margin-inline: auto; }
    .gs-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-12); }
    .gs-seat { position: static; transform: none; width: auto; }
  }
  /* On a phone the Orchestrate teams take turns (Robert, 2026-09-29): one column of full-width tiles, so an
     action's label fits on one line. While the OrchestrateStage script runs the swap (data-wave-on), the two
     groups of four share rows by each seat's data-slot and crossfade, so the stage keeps one height; without
     it (no scripts, reduced motion, or once the reader has tapped or focused a team) all eight show. */
  @media (max-width: 759px) {
    .gs[data-waves] .gs-tiles { grid-template-columns: minmax(0, 1fr); }
    .gs[data-waves][data-wave-on] .gs-seat { grid-column: 1; transition: opacity var(--t-slow) var(--ease); }
    .gs[data-waves][data-wave-on] .gs-seat[data-slot="1"] { grid-row: 1; }
    .gs[data-waves][data-wave-on] .gs-seat[data-slot="2"] { grid-row: 2; }
    .gs[data-waves][data-wave-on] .gs-seat[data-slot="3"] { grid-row: 3; }
    .gs[data-waves][data-wave-on] .gs-seat[data-slot="4"] { grid-row: 4; }
    .gs[data-wave-on][data-wave-show="1"] .gs-seat[data-wave="2"],
    .gs[data-wave-on][data-wave-show="2"] .gs-seat[data-wave="1"] { opacity: 0; pointer-events: none; }
  }
  @media (prefers-reduced-motion: reduce) { .gs-comet { display: none; } }

/* ---- src/components/css/engine/ConnectStage.astro (Connect the Dots: the dot field, hubs, threads, the detail layer) ---- */
  .cs { position: relative; width: 100%; aspect-ratio: 1000 / 520; }
  /* calm by default: the detail is masked faint until the toggle brings it up */
  .cs .cs-detail { transition: opacity var(--t-base) var(--ease); }
  .cs:not(.is-detail) .cs-detail { opacity: .14; }
  .cs:not(.is-detail) line.cs-detail { opacity: .1; }
  .cs-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  .cs-link { animation: cs-feed 8s linear infinite; }
  @keyframes cs-feed { to { stroke-dashoffset: -96; } }
  .cs-hub, .cs-sat, .cs-rel { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); }
  .cs-hub { display: grid; justify-items: center; gap: 10px; }
  .cs-hub-ic { width: 52px; height: 52px; border-radius: var(--r-circle); background: rgba(14, 12, 30, .9); border: 1.5px solid var(--hue); color: var(--hue); display: grid; place-items: center; box-shadow: 0 0 0 6px color-mix(in srgb, var(--hue) 18%, transparent), 0 0 34px color-mix(in srgb, var(--hue) 45%, transparent); }
  .cs-hub-ic .icon { width: 22px; height: 22px; }
  .cs-hub-label { font-size: var(--fs-ui); font-weight: var(--fw-strong); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--hue); white-space: nowrap; text-shadow: 0 1px 12px rgba(10, 9, 28, .8); }
  .cs-sat { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; white-space: nowrap; }
  .cs-sat-dot { grid-row: 1 / span 2; width: 14px; height: 14px; border-radius: var(--r-circle); background: var(--hue); box-shadow: 0 0 0 4px color-mix(in srgb, var(--hue) 22%, transparent); }
  .cs-sat-k { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--hue); line-height: 1.2; }
  .cs-sat-v { font-size: var(--fs-ui-small); color: #fff; line-height: 1.2; }
  .cs-rel { padding: 5px 12px; border-radius: var(--r-full); background: rgba(14, 12, 30, .85); border: 1px solid rgba(255, 255, 255, .22); color: #fff; font-size: var(--fs-ui-small); white-space: nowrap; }
  .cs-rel::before { content: '✦ '; color: #FF9E78; }
  @media (max-width: 1000px) { .cs-sat, .cs-rel { font-size: 11px; } .cs-sat-v { font-size: 11px; } }
  @media (max-width: 759px) {
    .cs { aspect-ratio: 1 / 1; }
    .cs-sat, .cs-rel { display: none; }
    .cs-hub:nth-child(2) { --x: 30%; --y: 28%; } .cs-hub:nth-child(3) { --x: 70%; --y: 28%; } .cs-hub:nth-child(4) { --x: 30%; --y: 74%; } .cs-hub:nth-child(5) { --x: 70%; --y: 74%; }
  }
  @media (prefers-reduced-motion: reduce) { .cs-link { animation: none; } }

/* ---- src/components/css/engine/HarnessStage.astro (Harness Intelligence: the rings and the items) ---- */
  .hs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr) minmax(0, 1fr); align-items: center; gap: var(--sp-16); }
  .hs-stage { position: relative; width: 100%; aspect-ratio: 1; }
  .hs-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  .hs-core-disc { filter: drop-shadow(0 1px 4px rgba(232, 72, 28, .35)); }
  .hs-spin { transform-origin: 50% 50%; animation: hs-turn 60s linear infinite; }
  @keyframes hs-turn { to { transform: rotate(360deg); } }
  .hs-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 4px; text-align: center; color: #fff; }
  .hs-core-k { font-weight: var(--fw-data); font-size: var(--fs-ui-small); }
  .hs-core-arrow { font-size: 16px; line-height: 1; opacity: .85; }
  .hs-core-v { font-size: 10px; font-weight: var(--fw-data); }
  .hs-ring, .hs-item { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); white-space: nowrap; }
  .hs-ring { padding: 4px 12px; border-radius: var(--r-full); background: rgba(10, 9, 28, .9); border: 1px solid color-mix(in srgb, var(--hue) 40%, transparent); color: var(--hue); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: var(--fw-data); }
  .hs-item { color: var(--hue); font-size: var(--fs-ui-small); font-weight: var(--fw-data); padding: 2px 6px; background: rgba(10, 9, 28, .55); border-radius: var(--r-xs); }
  .hs-side-k { color: rgba(255, 255, 255, .78); font-size: var(--fs-ui-small); font-weight: var(--fw-data); line-height: var(--lh-snug); }
  .hs-in { text-align: right; display: grid; gap: var(--sp-12); justify-items: end; }
  .hs-out { display: grid; gap: var(--sp-12); justify-items: start; }
  .hs-arrow { width: 72px; height: 2px; background: linear-gradient(90deg, transparent, #8FD0F5); position: relative; }
  .hs-arrow::after { content: ''; position: absolute; right: -1px; top: -4px; border-left: 8px solid #8FD0F5; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
  .hs-arrow--out { background: linear-gradient(90deg, #FF9E78, transparent); }
  .hs-arrow--out::after { display: none; }
  .hs-outs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-8); }
  .hs-outs li { padding: 6px 14px; border-radius: var(--r-full); border: 1px solid rgba(255, 158, 120, .55); color: #fff; font-size: var(--fs-ui-small); width: max-content; }
  @media (max-width: 1100px) { .hs-item { font-size: 11px; } .hs-ring { font-size: 10px; } }
  @media (max-width: 899px) {
    .hs { grid-template-columns: minmax(0, 1fr); }
    .hs-in, .hs-out { justify-items: start; text-align: left; }
    .hs-in { order: 1; } .hs-stage { order: 2; } .hs-out { order: 3; }
    .hs-arrow { display: none; }
    .hs-outs { grid-auto-flow: column; }
  }
  @media (max-width: 640px) { .hs-item { font-size: 9px; padding: 1px 4px; } .hs-ring { font-size: 9px; padding: 3px 8px; } .hs-core-k { font-size: var(--fs-ui-small); } .hs-core-v { font-size: 9px; } }
  @media (prefers-reduced-motion: reduce) { .hs-spin { animation: none; } }

/* ---- src/components/css/engine/OrchestrateStage.astro (Orchestrate Actions: the process tiles, the route, the loop line) ---- */
  .os { display: grid; gap: var(--sp-24); }
  /* the design system's tile (white, hairline, 16px corners, the 40px icon frame) four across */
  .os-teams, .os-process { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-16); }
  .os-teams[hidden], .os-process[hidden], .os-close[hidden], .os-feed[hidden], .engine-note[hidden] { display: none; }
  .os-teams--stage { display: block; }
  .os-tile { gap: var(--sp-12); }
  .os-tile .icon-tile { margin-bottom: var(--sp-8); }
  .os-tile .action-pill .icon-tile { margin: 0; }  /* the pill's frame sits on its centre line; the tile's frame margin is for the heading frame only */
  .os-title { font-size: var(--fs-card-sm); line-height: var(--lh-tight); color: var(--ink); }
  .os-body { color: var(--body); font-size: var(--fs-ui); line-height: var(--lh-body); }
  /* the loop's tiles, in the deck's template: the number in the icon frame, the copy, the graphic, a value
     line. The four share one set of rows (subgrid), so the graphics start and end on the same lines as the
     third step's route and every value sits on the same baseline (Robert, 2026-09-11). */
  .os-process { grid-auto-rows: auto; }
  .os-step { grid-row: span 4; grid-template-rows: subgrid; }
  .os-n { font-size: var(--fs-ui-small); font-weight: var(--fw-strong); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
  .os-art { align-self: stretch; display: grid; align-content: center; }  /* the graphic sits centred in its box (Robert, 2026-09-14) */
  /* the graphic boxes fill the shared row, the artwork centred on its own ground with air above and below */
  .os-art img { display: block; width: 100%; height: 100%; object-fit: contain; }
  .os-art--signals, .os-art--performers, .os-art--effect { min-height: 200px; overflow: hidden; border-radius: var(--r-field); border: 1px solid var(--border); background: #f8f7fa; }
  /* the connected-data bar above the loop (Robert, 2026-09-14): the hub's orange mark across the four tiles,
     the white logo and a tracked label, and beneath it four Gather beams stood on end, one into each tile's
     centre (the loop line's own x positions), each with a comet running down; the bar's block pulls the
     row's gap back so the beams land on the tiles' top edge */
  .os-feed { display: grid; margin-bottom: calc(-1 * var(--sp-24)); }
  .os-feed-core { margin: 0; min-height: 60px; padding: var(--sp-12) var(--sp-24); border-radius: var(--r-card); background: var(--grad-brand); color: #fff; display: flex; align-items: center; justify-content: center; gap: var(--sp-12); box-shadow: 0 20px 60px -10px rgba(255, 87, 34, .45), inset 0 1px 0 rgba(255, 255, 255, .28); }
  .os-feed-core img { display: block; width: auto; height: 22px; }
  .os-feed-k { padding-left: var(--sp-12); border-left: 1px solid rgba(255, 255, 255, .4); font-size: var(--fs-nano); font-weight: var(--fw-strong); letter-spacing: var(--track-widest); text-transform: uppercase; line-height: 1.6; }
  .os-feed-lines { display: block; width: 100%; height: 40px; overflow: visible; }
  @media (prefers-reduced-motion: reduce) { .os-feed-comet { display: none; } }
  /* the third step's route: the next best action rotating through one box, a flow arrow down, the box the
     role lands in; each action keeps its deck hue as a dot before the word */
  /* the route is left-aligned (Robert, 2026-09-11): the frames sit at one x in both boxes with the words
     beside them, the labels above on the same edge, and the beam threads the two frames' centre */
  .os-route { display: grid; gap: var(--sp-8); justify-items: start; }
  /* the action's glyph takes its deck hue inside the frame; the role's stays in the ink */
  .action-pill > .os-word-ic { color: var(--hue); border-color: color-mix(in srgb, var(--hue) 45%, var(--icon-frame)); }
  .os-down { display: block; width: 40px; height: 44px; margin-left: 7px; overflow: visible; }  /* the line at x 20 lands on the round frames' centre: the box's 8px, the pill's border and 3px padding, then 15px */
  @media (prefers-reduced-motion: reduce) { .os-down-comet { display: none; } }
  .os-role { display: grid; gap: 6px; width: 100%; justify-items: start; }
  .os-role-k { font-size: var(--fs-nano); letter-spacing: var(--track-widest); text-transform: uppercase; color: var(--muted); }
  /* the boxes the pills arrive in share the graphic boxes' ground: the same off-white, hairline and corner (Robert, 2026-09-11) */
  .os-role-box.df-logo { position: relative; width: 100%; height: 48px; filter: none; background: #f8f7fa; border: 1px solid var(--border); border-radius: var(--r-field); }
  .os-role-box .df-word { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-start; padding: 0 8px; opacity: 0; transform: translateY(7px); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
  .os-role-box .df-word.is-on { opacity: 1; transform: none; }
  .os-role-box .df-word.is-out { opacity: 0; transform: translateY(-7px); }
  /* where the loop closes: the line runs under the tiles from the fourth back to the first, its dashes
     pushing that way, the label sitting on it, the closing line beneath */
  .os-close { position: relative; display: grid; gap: var(--sp-12); justify-items: center; padding-top: var(--sp-4); }
  .os-close-line { display: block; width: 100%; height: 64px; overflow: visible; }
  @media (prefers-reduced-motion: reduce) { .os-close-comet { display: none; } }
  .os-close-head { position: absolute; left: 12.5%; top: 11px; width: 9px; height: 9px; border-left: 2px solid var(--orange); border-top: 2px solid var(--orange); transform: translate(-50%, 0) rotate(45deg); }
  .os-close-label { position: absolute; left: 50%; top: 44px; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: var(--sp-8); margin: 0; padding: 4px 12px; border-radius: var(--r-full); border: 1px solid var(--border); background: var(--bg); color: var(--ink); font-size: var(--fs-nano); font-weight: var(--fw-strong); letter-spacing: var(--track-widest); text-transform: uppercase; white-space: nowrap; }
  .os-close-label .icon { width: 14px; height: 14px; color: var(--orange); }
  .os-close-text { margin: 0; max-width: 72ch; text-align: center; color: var(--muted); font-size: var(--fs-ui); line-height: var(--lh-body); }
  @media (max-width: 1000px) {
    .os-teams, .os-process { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .os-step { grid-row: auto; grid-template-rows: auto auto auto 1fr; }  /* two across: each tile keeps its own rows */
    .os-feed-lines { display: none; }
    .os-feed { margin-bottom: 0; }
    .os-close-line, .os-close-head { display: none; }
    .os-close-label { position: static; transform: none; }
  }
  @media (max-width: 640px) { .os-teams, .os-process { grid-template-columns: minmax(0, 1fr); } }
  @media print { .os-teams[hidden], .os-process[hidden] { display: grid; } .os-close[hidden], .os-feed[hidden] { display: grid; } .engine-note[hidden] { display: block; } }

/* ---- src/components/sections/PlatformTabs.astro (2026-09-22) ---- */
  /* before scripts: the audiences stack, each title, line, call and tiles in turn */
  .pt-title { margin: var(--s-6) 0 0; padding-top: var(--s-5); border-top: 1px solid var(--hairline); font-size: var(--fs-subhead); font-weight: var(--fw-display); letter-spacing: var(--track-display); line-height: var(--lh-tight); }
  .pt-trigger { all: unset; box-sizing: border-box; display: block; width: 100%; color: var(--ink); cursor: default; }
  .pt-line { margin: var(--s-3) 0 0; max-width: 44ch; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--muted); }
  .pt-call { margin: var(--s-5) 0 0; }
  .pt-tiles { list-style: none; margin: var(--s-5) 0 0; padding: var(--platform-card-gap); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--platform-card-gap); border-radius: var(--r-panel); background: var(--bg-2); }
  .pt-tiles > li { display: grid; min-width: 0; }
  /* the tiles run half the orbit card's width, so the icon sits closer and the definition stops at three lines
     (the whole definition stays in the HTML; the product page carries it in full) */
  .pt-tiles { --platform-card-icon-gap: var(--sp-16); }
  .pt-tiles .panel-card-def { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  /* this sheet loads before the shared one, so the tile outranks .panel-card by one class, not by order */
  .pt-tiles .pt-tile { background: var(--bg); }
  .pt-tile:is(:hover, :focus-visible) .panel-card-ic { border-color: var(--ink); }
  /* enhanced: the island has opened one audience; the rest show their titles only, muted */
  .platform-tabs[data-enhanced] .pt-trigger { cursor: pointer; }
  .platform-tabs[data-enhanced] .pt-trigger[aria-expanded="false"] { color: var(--faint, var(--muted)); opacity: .55; transition: opacity var(--t-fast) var(--ease); }
  .platform-tabs[data-enhanced] .pt-trigger[aria-expanded="false"]:hover { opacity: 1; }
  .pt-trigger:focus-visible { outline: 2px solid var(--plum); outline-offset: 4px; border-radius: var(--r-frame); }
  .platform-tabs [hidden] { display: none; }
  /* two columns from 960px: the left column fills in reading order, the open audience's tiles hold the right
     from the first title down (auto-placement skips the hidden parts, so no per-row rules) */
  @media (min-width: 960px) {
    .platform-tabs[data-enhanced] > .container { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s-8); align-items: start; }
    .platform-tabs[data-enhanced] > .container > .section-head { grid-column: 1 / -1; }
    .platform-tabs[data-enhanced] .pt-title, .platform-tabs[data-enhanced] .pt-line, .platform-tabs[data-enhanced] .pt-call { grid-column: 1; }
    .platform-tabs[data-enhanced] .pt-title:first-of-type { margin-top: 0; border-top: 0; padding-top: 0; }
    .platform-tabs[data-enhanced] .pt-tiles { grid-column: 2; grid-row: 2 / span 12; margin-top: 0; }
  }
  @media (max-width: 640px) { .pt-tiles { grid-template-columns: minmax(0, 1fr); --platform-card-padding: var(--sp-24); } }
  /* On a phone the audiences start closed (Robert, 2026-09-29): every title in the ink, each with the accordion's
     toggle at its right (AccordionItem's 34px plum-wash square and purple +, turning to × when open), drawn by the
     button's own pseudo-elements: the square behind, the + over it, so only the + turns */
  @media (max-width: 767px) {
    .platform-tabs[data-enhanced] .pt-trigger { position: relative; padding-right: 50px; }
    .platform-tabs[data-enhanced] .pt-trigger[aria-expanded="false"] { color: var(--ink); opacity: 1; }
    .platform-tabs[data-enhanced] .pt-trigger::before,
    .platform-tabs[data-enhanced] .pt-trigger::after { position: absolute; right: 0; top: 50%; width: 34px; height: 34px; margin-top: -17px; }
    .platform-tabs[data-enhanced] .pt-trigger::before { content: ''; border-radius: var(--r-md); background: var(--plum-wash); }
    .platform-tabs[data-enhanced] .pt-trigger::after { content: '+'; display: grid; place-items: center; color: var(--purple); font-size: var(--fs-card-sm); line-height: var(--lh-flat); transition: transform var(--t-fast) var(--ease); }
    .platform-tabs[data-enhanced] .pt-trigger[aria-expanded="true"]::after { transform: rotate(45deg); }
  }
  @media print { .platform-tabs [hidden] { display: revert; } }

/* the home's lead-in (Robert, 2026-09-30): the open hero's 100px of extra air under the bars, less 60px here, so the
   home starts 112px under the bar on desktop and 88px below 961px. The other open heroes keep 100px (V4 §49). */
.hero--s2 { --hero-lead-in: 40px; }

/* the home keeps its hero as it was (2026-09-30): it has no slot, and the row the shared hero now drops when empty
   stays in its desktop template, so its video does not move (V4 §50) */
.marketing-grid > .hero--s2 > .hero--s2-inner:not(:has(> .hero-slot)) { --hero-row-slot: 'slot slot'; }