/* Homepage-only rules. Everything reusable lives in system.css. */

/* Section 4: the carousel track bleeds past the container, so the section clips horizontal overflow */
#agents { overflow-x: clip; }

/* Stat pair under the Agents and platforms headline: the two product counts, large and serif */
.stat-pair { display: flex; justify-content: center; align-items: baseline; gap: 8px clamp(28px, 5vw, 64px); flex-wrap: wrap; margin-top: 8px; color: var(--ink-2); font-size: 1.125rem; line-height: 1.2; }
.stat-pair span { display: inline-flex; align-items: baseline; gap: 12px; }
.stat-pair b { font-family: var(--font-serif); font-weight: 500; font-size: clamp(3rem, 3.4vw + 1.6rem, 4.25rem); line-height: .9; letter-spacing: -.02em; color: var(--coral-text); }

/* Section 3: heading -> diagram -> carousel stay close together */
#agents .section__head { margin-bottom: clamp(20px, 2.4vw, 32px); }

/* ===== Section 5: trust and deployment, one compact switcher module (js/home.js) ===== */
#trust { padding-block: clamp(36px, 3.2vw, 46px); }   /* the one compact section: the whole module targets ~600px at 1440 */
#trust .section__head { margin-bottom: clamp(18px, 1.8vw, 24px); }
.deploy { display: grid; gap: clamp(12px, 1.2vw, 16px); }

/* segmented switcher */
.deploy__tabs { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: auto; justify-content: center; justify-self: center; gap: 4px; padding: 4px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--white); }
.deploy__tab { position: relative; min-height: 48px; padding: 0 clamp(16px, 2.4vw, 30px); border-radius: 999px; font-size: 1rem; font-weight: 600; line-height: 1.2; color: var(--ink-2); transition: background var(--t), color var(--t); }
.deploy__tab:hover { color: var(--ink); }
.deploy__tab[aria-selected="true"] { background: var(--ink); color: var(--paper); }
/* auto-advance progress: a thin coral line under the active tab; runs only while the module is in view and untouched */
.deploy__tab::after { content: ''; position: absolute; left: 24px; right: 24px; bottom: 5px; height: 2px; border-radius: 2px; background: var(--coral-lt); transform: scaleX(0); transform-origin: 0 50%; opacity: 0; }
.deploy.is-auto .deploy__tab[aria-selected="true"]::after { opacity: 1; animation: deploy-prog 5s linear forwards; animation-play-state: paused; }
.deploy.is-auto.is-run .deploy__tab[aria-selected="true"]::after { animation-play-state: running; }
@keyframes deploy-prog { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* panels share one grid cell, so the module never changes height; the active one crossfades in */
.deploy__panels { display: grid; }
.deploy__panel { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(20px, 3vw, 44px); padding: clamp(16px, 1.6vw, 20px) clamp(22px, 3vw, 36px); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .45s var(--ease), transform .45s var(--ease), visibility 0s .45s; }
.deploy__panel.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.deploy__intro h3 { font-family: var(--font-serif); font-weight: 600; font-size: clamp(1.375rem, .6vw + 1.1rem, 1.625rem); line-height: 1.2; letter-spacing: -.01em; }
.deploy__intro p { margin-top: 6px; color: var(--ink-2); font-size: 1rem; }
.deploy__rows { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(20px, 3vw, 40px); }
.deploy__rows > div { padding: 9px 0; border-top: 1px solid var(--line); }
.deploy__rows dt { font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.deploy__rows dd { margin-top: 3px; font-size: 1.0625rem; line-height: 1.4; color: var(--ink); }

/* schematic: a dashed boundary (where it runs) around App, Data and AI model */
.deploy__map { display: grid; gap: 8px; justify-items: stretch; }
.deploy__zone { display: inline-flex; align-items: center; gap: 8px; font-size: .8125rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--coral-text); }
.deploy__zone .icon { width: 16px; height: 16px; }
.deploy__stack { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 10px; border: 1.5px dashed var(--coral); border-radius: var(--r-md); background: var(--paper-2); }
.deploy__stack span { display: grid; justify-items: center; gap: 4px; padding: 8px 4px; border-radius: 10px; background: var(--white); border: 1px solid var(--line); font-size: .875rem; font-weight: 600; color: var(--ink); }
.deploy__stack .icon { width: 20px; height: 20px; color: var(--coral-text); }
.deploy__by { font-size: .9375rem; color: var(--ink-2); }

/* six pillars as compact chips; the ones that hold for the selected option are highlighted */
.deploy__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.dchip { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 14px 0 10px; border: 1px solid var(--line-strong); border-radius: 999px; background: transparent; font-size: .9375rem; font-weight: 600; line-height: 1.2; color: var(--ink-3); transition: background var(--t), color var(--t), border-color var(--t); }
.dchip .icon { width: 18px; height: 18px; opacity: .6; transition: opacity var(--t); }
.dchip.is-on { background: var(--coral-soft); border-color: rgba(184, 75, 57, .45); color: #A8402F; }
.dchip.is-on .icon { opacity: 1; }
.dchip.is-part { border-style: dashed; }   /* holds for part of the option only (Data in KSA on the Cloud tab) */

.deploy__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px 40px; }
.deploy__foot .micro { max-width: 880px; }
.deploy__foot .link-arrow { flex: none; }

@media (max-width: 1100px) {
  .deploy__panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
  .deploy__map { display: none; }
}
@media (max-width: 860px) {
  .deploy__panel { grid-template-columns: 1fr; gap: 14px; }
  .deploy__rows { grid-template-columns: 1fr; }
  .deploy__foot { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
  .deploy__tabs { grid-auto-columns: 1fr; justify-self: stretch; }
  .deploy__tab { padding: 0 6px; font-size: .875rem; min-height: 56px; }
  .deploy__tab::after { left: 14px; right: 14px; }
  .deploy__chips { justify-content: flex-start; gap: 8px; }
  .dchip { font-size: .875rem; padding: 0 12px 0 10px; }
}

/* ===== Hero: compact copy column left, motion stage right (js/hero-motion.js, D-04F) ===== */
.hero--motion { position: relative; display: flex; align-items: center; padding-block: clamp(40px, 4.6vw, 68px); overflow: hidden; background: radial-gradient(70% 80% at 72% 48%, #2C231E 0%, #211B17 45%, var(--dark) 78%); }
.hero__split { position: relative; display: grid; grid-template-columns: minmax(380px, 1fr) minmax(0, clamp(520px, 40vw, 580px)); gap: clamp(24px, 3.4vw, 48px); align-items: center; }
.hero__copy { display: grid; gap: 26px; align-content: center; --hf: clamp(3.5rem, 5.2vw, 4.75rem); }
.hero__copy .eyebrow { font-size: .8125rem; line-height: 1.5; }
.hero__copy .eyebrow .eb { display: block; }
.hero__copy .eyebrow .eb-sep { display: none; }
.hero__copy .display { max-width: 8.4em; text-wrap: balance; line-height: 1.04; font-size: var(--hf); }
.hero__copy .display em { text-wrap: balance; }
.hero__copy .lead { font-size: 1.25rem; max-width: 31em; }
.hero__copy .hero__actions { gap: 14px; }
.hero__copy .btn-row { gap: 12px 24px; }
.hero__stage { min-width: 0; max-width: clamp(520px, 40vw, 580px); width: 100%; justify-self: end; }

/* The stage is a fixed-size "composition" (CSS vars --W/--H) that JS scales to fit its box. */
.stage { --W: 600; --H: 548; position: relative; width: 100%; height: calc(var(--H) * 1px); }
.cmp { position: absolute; left: 0; top: 0; width: calc(var(--W) * 1px); height: calc(var(--H) * 1px); transform-origin: 0 0; }
.cmp__fade { position: absolute; inset: 0; }
.cmp > * , .cmp__fade > * { position: absolute; }
.stage__label { font-size: 13px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--on-dark-3); }

/* left: kinetic typography (defaults = final frame) */
.words { left: 0; top: 28px; font-size: 38px; --pitch: 54px; }
.kw { position: relative; height: var(--pitch); display: flex; align-items: center; gap: .32em; }
.kw__mask { display: block; overflow: hidden; padding: .06em .04em .1em 0; margin: -.06em -.04em -.1em 0; }
.kt { display: block; position: relative; font-family: var(--font-serif); font-weight: 600; letter-spacing: -.02em; line-height: 1.15; color: var(--on-dark); white-space: nowrap; opacity: 0; }
.ks { position: absolute; left: -2%; right: -2%; top: 53%; height: 6px; margin-top: -3px; border-radius: 3px; background: var(--coral); transform-origin: 0 50%; transform: scaleX(0); }
.kx { width: .5em; height: .5em; flex: none; color: var(--coral-lt); opacity: 0; }
.kx svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.promise { left: 0; top: 34px; width: 600px; font-size: 54px; }
.promise p { font-family: var(--font-serif); font-weight: 600; font-size: 1em; line-height: 1.05; letter-spacing: -.025em; color: var(--on-dark); transform-origin: 0 60%; will-change: transform, opacity; }
.promise__b { font-style: italic; font-weight: 500 !important; color: var(--coral) !important; }
.promise__inf { position: absolute; left: 0; top: 182px; width: 150px; overflow: visible; visibility: hidden; }   /* kept only as the source path for the Users counter infinity: the final frame shows exactly one */
.promise__inf path { fill: none; stroke: var(--coral); stroke-width: 6.5; stroke-linecap: round; stroke-linejoin: round; }

/* below the promise: users counter and fee card side by side, avatars underneath */
.users { left: 0; top: 202px; width: 290px; height: 150px; }
.users .stage__label { position: absolute; left: 0; top: 0; }
.users__odo, .users__inf { position: absolute; left: -2px; top: 30px; font-family: var(--font-serif); font-weight: 500; font-size: 88px; line-height: 1; color: var(--on-dark); }
.users__inf { top: 50px; width: 124px; height: 54px; opacity: 1; transform-origin: 0 50%; }
.users__inf svg { display: block; width: 100%; height: auto; overflow: visible; }
.users__inf path { fill: none; stroke: var(--on-dark); stroke-width: 6.5; stroke-linecap: round; stroke-linejoin: round; }
.avs { left: 0; top: 366px; width: 600px; height: 168px; overflow: hidden; -webkit-mask-image: radial-gradient(ellipse 62% 66% at 50% 50%, #000 52%, transparent 100%); mask-image: radial-gradient(ellipse 62% 66% at 50% 50%, #000 52%, transparent 100%); }
.avs__grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(22, 1fr); grid-template-rows: repeat(5, 1fr); transform-origin: 50% 50%; }
.av { display: grid; place-items: center; color: var(--on-dark); }
.av svg { width: 74%; height: 74%; fill: currentColor; }
.av.is-c { color: var(--coral); }
.av.is-t { color: #CDBFA9; }
.inv { left: 310px; top: 202px; width: 290px; height: 150px; border: 1px solid var(--line-dark-strong); border-radius: 16px; background: rgba(242, 239, 230, .035); padding: 16px 20px 0; transform-origin: 50% 50%; overflow: hidden; }
.inv__row { position: relative; height: 78px; margin-top: 10px; }
.inv__grow, .inv__lock { position: absolute; left: 0; top: 0; display: flex; align-items: baseline; gap: 10px; font-family: var(--font-serif); font-size: 42px; line-height: 78px; white-space: nowrap; }
.inv__grow { color: var(--on-dark); transform-origin: 0 50%; }
.inv__cur, .inv__per { font-family: var(--font-sans); font-size: 18px; font-weight: 500; color: var(--on-dark-3); }
.inv__strike { position: absolute; left: -4px; right: -4px; top: 50%; height: 6px; margin-top: -3px; border-radius: 3px; background: var(--coral); transform-origin: 0 50%; transform: scaleX(0); }
.inv__lock { color: var(--on-dark); font-size: 54px; }
.inv__lock b { font-weight: 500; }
.inv__icon { align-self: center; width: 26px; height: 26px; margin-left: 8px; fill: none; stroke: var(--coral-lt); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.inv__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(242, 239, 230, .06); }
.inv__bar i { display: block; height: 100%; width: 100%; background: #E8705B; transform-origin: 0 50%; transform: scaleX(0); }
.inv__rule { position: absolute; left: 20px; right: 20px; bottom: 16px; height: 2px; border-radius: 2px; background: var(--coral); transform-origin: 0 50%; }

/* odometer digits (counter + fee) */
.odo { display: inline-flex; align-items: flex-start; height: 1.1em; line-height: 1.1em; font-variant-numeric: tabular-nums; }
.odo__d { display: block; position: relative; width: .56em; height: 1.1em; overflow: hidden; text-align: center; }
.odo__s { display: block; will-change: transform; }
.odo__s span { display: block; height: 1.1em; line-height: 1.1em; }
.odo__c { display: block; width: .26em; text-align: center; height: 1.1em; overflow: hidden; }

/* playhead + pause (Remotion-style chrome, kept quiet) */
.stage__bar { position: absolute; left: 0; right: 0; bottom: 6px; height: 2px; background: var(--coral); opacity: .55; transform-origin: 0 50%; z-index: 2; }
.stage__pause { position: absolute; right: 0; bottom: 14px; z-index: 3; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--on-dark-3); transition: color var(--t), background var(--t); }
.stage__pause:hover { color: var(--on-dark); background: rgba(242, 239, 230, .08); }
.stage__pause .icon { width: 14px; height: 14px; fill: currentColor; stroke: none; }
.stage__pause .i-play, .stage.is-paused .i-pause { display: none; }
.stage.is-paused .i-play { display: block; }

/* stacked layout: copy first, stage below. The composition switches to a portrait arrangement. */
@media (max-width: 1180px) {
  .hero--motion { display: block; padding-block: 40px 48px; }
  .hero__split { grid-template-columns: 1fr; gap: 36px; }
  .hero__stage { justify-self: start; max-width: 640px; }
  .hero__copy { --hf: clamp(2.75rem, 6vw + .6rem, 4.25rem); }
}
@media (max-width: 760px) {
  .stage { --W: 380; --H: 650; }
  .words { left: 0; top: 40px; font-size: 36px; --pitch: 56px; }
  .promise { left: 0; top: 34px; width: 380px; font-size: 40px; }
  .users { left: 0; top: 226px; width: 380px; height: 110px; }
  .users__odo { font-size: 70px; top: 24px; }
  .users__inf { top: 40px; width: 104px; height: 46px; }
  .avs { left: 0; top: 342px; width: 380px; height: 150px; }
  .avs__grid { grid-template-columns: repeat(16, 1fr); grid-template-rows: repeat(6, 1fr); }
  .inv { left: 0; top: 510px; width: 380px; height: 126px; padding: 14px 18px 0; }
  .inv__row { height: 64px; margin-top: 8px; }
  .inv__grow, .inv__lock { font-size: 48px; line-height: 64px; }
  .inv__lock { font-size: 52px; }
  .inv__rule { left: 18px; right: 18px; bottom: 14px; }
  .stage__bar { left: 0; right: 0; }
}

/* ===== Section 4: use cases (department chips + card carousel; js/home.js [data-ucc]) =====
   Cards are light by default and turn --dark on hover and keyboard focus. Each department's lead card (.ucc--lead) is dark at rest.
   Colours come from --ucc-* custom properties, so the two states differ only by values (no layout shift). Documented in README.md. */
#usecases { overflow-x: clip; }
#usecases .section__head { gap: 10px; margin-bottom: clamp(22px, 2.4vw, 30px); }
#usecases .h2 { font-size: clamp(2rem, 1.1vw + 1.6rem, 2.5rem); }
#usecases .lead { font-size: 1.125rem; }
#usecases .chip { min-height: 32px; padding: 0 14px; font-size: .875rem; }
#usecases .ucc-bar .link-arrow { font-size: 1.0625rem; }
#usecases { --cw: calc((min(100vw - 2 * var(--gutter), var(--container)) - 40px) / 3); }
/* Peek-tuned card widths (B+): about half a card shows on the right at every width; the whole-card count N steps up with the screen.
   --off is the first card's left offset. 100vw is deliberate here (a scrollbar only moves the cut by a few px). */
#agents, #usecases { --off: max(var(--gutter), calc((100vw - var(--container)) / 2)); --n: 1; }
@media (min-width: 900px) { #agents, #usecases { --n: 2; } }
@media (min-width: 1280px) { #agents, #usecases { --n: 3; } }
@media (min-width: 2200px) { #agents, #usecases { --n: 4; } }
@media (min-width: 2900px) { #agents, #usecases { --n: 5; } }
@media (min-width: 700px) {
  #agents .carousel__track .pcard { flex-basis: clamp(320px, calc((100vw - var(--off) + 24px) / (var(--n) + .5) - 24px), 440px); }
  #usecases { --cw: clamp(320px, calc((100vw - var(--off) + 20px) / (var(--n) + .5) - 20px), 440px); }
}
.ucc-filter { gap: 10px; margin-bottom: clamp(22px, 2.4vw, 28px); }
.ucc-filter .pill { min-height: 46px; padding: 0 20px; }
.ucc-filter .pill[aria-pressed="true"] { background: var(--coral-fill); border-color: var(--coral-fill); color: #fff; }
.ucc-filter .pill[aria-pressed="true"]::before { background: #fff; }

.ucc-track {
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  padding: 8px max(var(--gutter), calc((100% - var(--container)) / 2)) 12px; margin-block: -4px;   /* room for the focus ring */
  scroll-padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2));
  cursor: grab; transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.ucc-track::-webkit-scrollbar { display: none; }
.ucc-track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.ucc-track.is-dragging a { pointer-events: none; }
.ucc-track:focus-visible { outline-offset: -3px; }
.ucc-track.is-out { opacity: 0; transform: translateY(10px); }
.ucc-track.is-in .ucc { animation: ucc-rise .45s var(--ease) both; animation-delay: calc(var(--n, 0) * 70ms); }
@keyframes ucc-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Card colour scheme: light by default; dark on hover and keyboard focus. Each department's lead card is dark at rest.
   All colours come from --ucc-* custom properties so the two states differ only by values (no layout change). */
.ucc {
  --ucc-bg: var(--white); --ucc-bd: var(--line); --ucc-title: var(--ink); --ucc-body: var(--ink-2); --ucc-label: var(--ink-3);
  --ucc-chip-bg: var(--coral-soft); --ucc-chip-fg: #A8402F;   /* 5.0:1 on --coral-soft, same as the shared .chip */
  --ucc-disc-bg: transparent; --ucc-disc-bd: var(--line-strong); --ucc-disc-fg: var(--ink);
  --ucc-tile-bg: var(--coral-soft); --ucc-tile-bd: transparent; --ucc-tile-fg: var(--coral-text);
  position: relative; flex: 0 0 var(--cw); scroll-snap-align: start; display: flex; flex-direction: column; gap: 10px; padding: 22px 26px 22px;
  border: 1px solid var(--ucc-bd); border-radius: 18px; background: var(--ucc-bg); color: var(--ucc-title);
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.ucc--lead, .ucc:has(.ucc__link:focus-visible) {
  --ucc-bg: var(--dark); --ucc-bd: var(--dark); --ucc-title: var(--on-dark); --ucc-body: var(--on-dark-2); --ucc-label: var(--coral-lt);
  --ucc-chip-bg: rgba(228, 145, 127, .16); --ucc-chip-fg: var(--coral-lt);
  --ucc-disc-bg: var(--on-dark); --ucc-disc-bd: var(--on-dark); --ucc-disc-fg: var(--dark);
  --ucc-tile-bg: rgba(242, 239, 230, .08); --ucc-tile-bd: var(--line-dark-strong); --ucc-tile-fg: var(--coral-lt);
}
@media (hover: hover) {
  .ucc:hover {
    --ucc-bg: var(--dark); --ucc-bd: var(--dark); --ucc-title: var(--on-dark); --ucc-body: var(--on-dark-2); --ucc-label: var(--coral-lt);
    --ucc-chip-bg: rgba(228, 145, 127, .16); --ucc-chip-fg: var(--coral-lt);
    --ucc-disc-bg: var(--on-dark); --ucc-disc-bd: var(--on-dark); --ucc-disc-fg: var(--dark);
    --ucc-tile-bg: rgba(242, 239, 230, .08); --ucc-tile-bd: var(--line-dark-strong); --ucc-tile-fg: var(--coral-lt);
  }
  /* a lead card is already dark, so its hover lifts to a slightly lighter dark with a coral hairline */
  .ucc--lead:hover { --ucc-bg: var(--dark-3); --ucc-bd: var(--coral); }
}
.ucc--lead:has(.ucc__link:focus-visible) { --ucc-bg: var(--dark-3); --ucc-bd: var(--coral); }
.ucc:has(.ucc__link:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.ucc__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.ucc .icon-tile { width: 56px; height: 56px; border-radius: 16px; background: var(--ucc-tile-bg); border-color: var(--ucc-tile-bd); color: var(--ucc-tile-fg); transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); }
.ucc .icon-tile .icon { width: 26px; height: 26px; }
.ucc__dept { font-size: .875rem; font-weight: 600; color: var(--ucc-label); transition: color .2s var(--ease); }
.ucc__t { font-family: var(--font-serif); font-weight: 600; font-size: 1.3125rem; line-height: 1.25; letter-spacing: -.01em; text-wrap: balance; color: var(--ucc-title); transition: color .2s var(--ease); }
.ucc__link::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.ucc__link:focus-visible { outline: none; }
.ucc__line { font-size: 1rem; line-height: 1.55; color: var(--ucc-body); transition: color .2s var(--ease); }
.ucc__foot { margin-top: auto; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ucc__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ucc .chip { background: var(--ucc-chip-bg); color: var(--ucc-chip-fg); transition: background-color .2s var(--ease), color .2s var(--ease); }
.ucc__go { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--ucc-disc-bg); border: 1.5px solid var(--ucc-disc-bd); color: var(--ucc-disc-fg); transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); }
.ucc__go .icon { width: 18px; height: 18px; }

.ucc-bar { display: flex; align-items: center; gap: 20px 32px; flex-wrap: wrap; margin-top: clamp(16px, 2vw, 22px); }
.ucc-bar .arrow-btn { width: 48px; height: 48px; }
.ucc-progress { flex: 1; min-width: 80px; height: 3px; border-radius: 2px; background: var(--line); position: relative; overflow: hidden; }
.ucc-progress span { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; border-radius: 2px; background: var(--coral); transition: left .2s linear, width .35s var(--ease); }
.ucc-bar .carousel__links { margin-left: auto; }
@media (max-width: 860px) {
  #usecases { --cw: min(76vw, 340px); }
  .ucc-bar .ucc-progress { order: 3; flex-basis: 100%; }
  .ucc-bar .carousel__links { margin-left: 0; }
}
@media (max-width: 640px) { .ucc-bar { gap: 12px 20px; } }
@media (prefers-reduced-motion: reduce) {
  .ucc-track.is-in .ucc { animation: none; }
  .ucc, .ucc * { transition: none !important; }
}

/* Black rhythm on the home agents row only: every third card uses the dark-card tokens (title 15.5:1, body 8.9:1, label 7.3:1 on --dark) */
#agents .carousel__track .pcard:nth-child(3n) {
  background-color: var(--dark); border-color: var(--dark); color: var(--on-dark);
  --ink: var(--on-dark); --ink-2: var(--on-dark-2); --ink-3: var(--on-dark-3);
  --coral-text: var(--coral-lt); --coral-text-s: var(--coral-lt);
  --line: var(--line-dark); --line-strong: var(--line-dark-strong);
}
#agents .carousel__track .pcard:nth-child(3n) :is(.icon-tile, .pcard__media--tile) { background: rgba(242, 239, 230, .06); border-color: var(--line-dark); }
#agents .carousel__track .pcard:nth-child(3n) .pcard__media:not(.pcard__media--tile) { --ink: #141413; --ink-2: #4A4741; --ink-3: #6B655C; --coral-text: #B84B39; --line: rgba(20, 20, 19, .12); --line-strong: rgba(20, 20, 19, .24); color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  #agents .carousel__track .pcard:nth-child(3n):hover { background-color: var(--dark-3); border-color: var(--coral); }
}