/* GENERATED FILE — DO NOT EDIT.

   Concatenation of the web section library's stylesheets:
   design-system/components/web/base.css followed by each <Component>.css.
   Edit those; regenerate with

     pnpm --filter @axeptio/studio build:webcss

   The Design System app also writes a component's CSS through its editor and
   regenerates this file. apps/studio/src/design-system/webcss.ts owns the
   order — it is the cascade.

   Link AFTER the design-system token chain (design-system/styles.css): this
   sheet layers the marketing-page skin on top of the tokens. The class names
   here are the contract the TSX components emit and the vanilla runtime
   scripts (apps/studio/src/ssg/runtime/*.js) bind to. */

/* ─────────────────────────── base.css ─────────────────────────── */
/* Shared foundation for the web section library.

   Page skin tokens, the designed dark theme, base element rules, the
   typography plumbing every section renders through, the shared layout
   utilities (.wrap, .band, .two-col, .figframe) and the primitives'
   styling (.eyebrow, .lead, .ilink, .caption, .stat, .btn-row, .ax-btn).

   It layers on the design-system token chain (design-system/styles.css) and
   is the FIRST file in the generated web.css, so every component file may
   override what it declares here.

   Derivation: measured from a real approved landing-page build, generalised.
   Button CSS is the verbatim core of components/buttons/Button.jsx plus the
   marketing-only white glossy pill. Rainbow utilities come from
   tokens/iridescence.css AS-IS (not redefined here). */

/* ===== Page skin tokens (light) ===== */
:root {
  /* client skin default — override --client-primary per page/slide */
  --client-on-primary: #fff;

  /* accents that stay legible whatever the client hue */
  --accent-on-dark: color-mix(in srgb, var(--client-primary), white 62%);
  --accent-text: var(--client-primary);

  /* surfaces / text (light) */
  --surface-page: #ffffff;
  --surface-card: #ffffff;
  --surface-muted: #f4f6fb;
  --surface-inverse: #151517;
  --text-title: #212121;
  --text-body: #52555a;
  --text-muted: #8a8e94;
  --border-subtle: rgba(138, 142, 148, 0.28);
  --border-strong: rgba(138, 142, 148, 0.5);

  --hero-bg: #111113;
  --container: 1320px;

  /* paragraph rhythm: the one gap between successive <p>s in a prose run.
     Em-based so it follows each container's own type size (a 19px lead
     breathes wider than a 15px card body). */
  --prose-gap: 1em;

  /* Height a viewport-pinned dock claims at the page bottom: the capsule
     itself plus the offset it floats at. The page reserves it as bottom
     padding while a dock is up (rule below), so fixed chrome never lands on
     running text. */
  --ax-dock-reserve: calc(56px + clamp(12px, 3vw, 24px) * 2);

  --mk-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --mk-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.12);
  --mk-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.18);
}

/* ===== Dark theme (designed, not inverted).
   The data-theme toggle must beat prefers-color-scheme BOTH ways. ===== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-page: #131316;
    --surface-card: #1e1f22;
    --surface-muted: #1a1b1e;
    --text-title: #f4f6fb;
    --text-body: #c4c7cc;
    --text-muted: #9498a0;
    --border-subtle: rgba(255, 255, 255, 0.14);
    --border-strong: rgba(255, 255, 255, 0.26);
    --accent-text: color-mix(in srgb, var(--client-primary), white 64%);
  }
}
:root[data-theme="dark"] {
  --surface-page: #131316;
  --surface-card: #1e1f22;
  --surface-muted: #1a1b1e;
  --text-title: #f4f6fb;
  --text-body: #c4c7cc;
  --text-muted: #9498a0;
  --border-subtle: rgba(255, 255, 255, 0.14);
  --border-strong: rgba(255, 255, 255, 0.26);
  --accent-text: color-mix(in srgb, var(--client-primary), white 64%);
}

/* ===== Base ===== */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* Chrome pinned to the viewport bottom owes the page its own room: while a
   selector is docked (and not dismissed) the page ends --ax-dock-reserve
   above the fold's bottom edge, so the last band scrolls clear of the
   capsule instead of under it. The reservation lifts with the dock. */
body:has(.ax-carousel:not(.ax-carousel--single)[data-selector-docked="true"]:not([data-selector-dismissed="true"])) {
  padding-bottom: var(--ax-dock-reserve);
}
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent-text), transparent 40%);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap { max-width: var(--container); margin: 0 auto; padding: 0 clamp(20px, 5vw, 64px); }

/* ===== Typography helpers ===== */
.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0 0 18px;
}
.eyebrow.on-dark { color: var(--accent-on-dark); }
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--text-title);
  letter-spacing: -0.02em;
  line-height: 1.04;
  margin: 0;
}
.section-h { font-size: clamp(30px, 4.4vw, 52px); margin: 0 0 22px; }
/* ----- Prose rhythm -----
   One token owns the gap between successive paragraphs: --prose-gap. `Lead`
   is the library's prose container — every component's body copy renders
   through it (band heads, copy columns, overlays), so the run's rhythm is
   declared once here. Interiors that zero their lone <p> (cards, quotes,
   steps) re-enter the same rhythm through the `p + p` list below the moment
   a second paragraph appears — the sibling selector outweighs each
   container's own zeroing rule, so no interior can swallow the gap. */
.lead p { font-size: clamp(16.5px, 1.35vw, 19px); line-height: 1.6; margin: 0 0 var(--prose-gap); color: var(--text-body); }
.lead p:last-child { margin-bottom: 0; }
.rv-quote p + p,
.bp-quote p + p,
.pull-quote blockquote p + p,
.pathway-card p + p,
.shake-step p + p,
.hero-copy .hc-body p + p { margin-top: var(--prose-gap); }
.ilink {
  color: var(--accent-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  font-weight: 600;
}
.on-dark .ilink, .hero-copy .ilink { color: var(--accent-on-dark); }


/* ===== Buttons (Button.jsx verbatim core + marketing white pill) ===== */
.ax-btn {
  --_pri: var(--client-primary, var(--primary));
  --_deep: var(--client-primary-strong, var(--primary-400));
  --_on: var(--client-on-primary, var(--secondary));
  appearance: none;
  border: 0;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  font-family: var(--font-display, "Figtree", sans-serif);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 100px;
  white-space: nowrap;
  position: relative;
  transition: transform 0.12s ease, box-shadow 0.18s ease, filter 0.18s ease, background 0.18s ease;
  color: var(--_on);
}
/* focus rings never key to the client hue — hue-on-hue grounds (a navy CTA
   over a navy render) made them invisible. Two-tone INK-INSIDE / WHITE-OUT:
   both ring bands sit on the page ground (outside the pill), so the ink band
   reads on light grounds and the white band on dark-stage grounds
   (--hero-bg #111113 / dark #131316 — where an ink-outer ring vanished). */
.ax-btn:focus-visible { outline: none; }
.ax-btn:focus-visible::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 100px;
  pointer-events: none;
  box-shadow: 0 0 0 2px #14151a, 0 0 0 4.5px #fff;
}
.ax-btn--sm { font-size: 15px; line-height: 20px; padding: 8px 20px; }
.ax-btn--md { font-size: 16px; line-height: 24px; padding: 12px 28px; }
.ax-btn--lg { font-size: 18px; line-height: 24px; padding: 16px 40px; }
.ax-btn--primary {
  background:
    linear-gradient(176.8deg, color-mix(in srgb, var(--_deep), transparent 6%) 74%, color-mix(in srgb, var(--_deep), transparent 84%) 96%),
    linear-gradient(var(--_pri), var(--_pri));
  box-shadow:
    inset 1px 1px 4px 0 var(--_deep),
    inset 0.68px 0 6.8px 0 color-mix(in srgb, var(--_pri), white 40%),
    inset 4px 4px 2.7px 0 rgba(255, 255, 255, 0.37),
    inset 11.5px 8.8px 6.8px 0 rgba(255, 255, 255, 0.18),
    inset -2px 0 4px -7px rgba(255, 255, 255, 0.2),
    0 24px 40px -8px color-mix(in srgb, var(--_pri), transparent 62%),
    0 6.4px 8.7px 0 rgba(0, 0, 0, 0.05),
    0 1.2px 1.7px 0 rgba(0, 0, 0, 0.05);
}
.ax-btn--primary:hover { transform: translateY(-1px); filter: brightness(1.04); }
.ax-btn--primary:active {
  transform: translateY(1px);
  filter: brightness(0.97);
  box-shadow:
    inset 1px 1px 6px 0 var(--_deep),
    inset 0 2px 10px 0 rgba(0, 0, 0, 0.18),
    0 4px 10px -4px color-mix(in srgb, var(--_pri), transparent 55%);
}
.ax-btn--ghost { background: transparent; color: var(--secondary); box-shadow: none; }
.ax-btn--ghost:hover { background: var(--buttons-general-btn-hover, rgba(0, 0, 0, 0.05)); }
.ax-btn--ghost:active { background: var(--buttons-general-btn-clicked, rgba(0, 0, 0, 0.12)); }
/* on-dark ghost keeps the marketing outline (a text-only ghost disappears
   over scene renders); hover/active washes follow the Button.jsx core */
.ax-btn--ghost.on-dark { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.4); }
.ax-btn--ghost.on-dark:hover { background: rgba(255, 255, 255, 0.15); }
.ax-btn--ghost.on-dark:active { background: rgba(255, 255, 255, 0.25); }
/* Translucent frosted-glass pill for dark scenes / rainbow ground.
   Production (axept.io "Get a demo") is NOT a solid white block: it is a
   translucent near-white glass — stacked low-alpha gradients that let the
   ground bleed through, blurred behind. That translucency is what makes the
   iridescent rim (.ax-rainbow-glow) read as light caught in glass rather than
   paint on plastic. Alpha stays high enough (0.62–0.85) to keep dark text
   legible on light AND dark grounds. */
.ax-btn--white {
  color: #16181d;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(241, 244, 247, 0.66) 60%, rgba(241, 244, 247, 0.55)),
    linear-gradient(90deg, rgba(255, 255, 255, 0.82), rgba(241, 244, 247, 0.62));
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  backdrop-filter: blur(10px) saturate(1.1);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.95),
    inset 0 -7px 12px -8px rgba(255, 255, 255, 0.7),
    0 12px 30px -8px rgba(0, 0, 0, 0.28),
    0 2px 4px rgba(0, 0, 0, 0.1);
}
.ax-btn--white:hover { transform: translateY(-1px); filter: brightness(1.02); }
.ax-btn--white:active { transform: translateY(1px); }

/* ===== Iridescent rainbow pill (button-scoped .ax-rainbow-glow) ============
   The production axept.io `neutral_light` CTA, ported verbatim (styles read
   off the live "See our customer case studies" pill). The anatomy:
     · the ELEMENT face carries the pastel rainbow wash (the house rainbow at
       40% over a near-white base) — it is always there, underneath;
     · ::before is the GELATINOUS white veil: opaque down to 80% then fading,
       so at idle the rainbow peeks out only along the BOTTOM edge (the
       iridescent underline). Its inset stack is the gel (bright top-left
       bevel, soft inner shade, hazy rim) and its drop stack the float;
     · on HOVER the veil's background swaps to a flat 50% white wash — the
       rainbow floods the whole face while the gel shadows stay put;
     · ::after is the standing gloss; the focus ring joins it on
       :focus-visible (one pseudo, both shadows — they never fight). */
.ax-btn.ax-rainbow-glow {
  color: #16181d;
  background:
    linear-gradient(90deg, rgba(243, 120, 98, 0.4), rgba(245, 209, 65, 0.4) 33%, rgba(17, 155, 155, 0.4) 66%, rgba(107, 141, 237, 0.4)),
    linear-gradient(#f1f4f5 59%, rgba(241, 244, 245, 0.6));
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.ax-btn.ax-rainbow-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(#f1f4f5, #f1f4f5 80%, rgba(241, 244, 245, 0.4));
  box-shadow:
    inset -11px 2px 12px #fff,
    inset 11.56px 8.84px 11.8px rgba(39, 39, 39, 0.34),
    inset 4.08px 4.08px 2.72px rgba(255, 255, 255, 0.4),
    inset 0.68px 0 6.8px rgba(214, 222, 221, 0.93),
    inset -4.76px -1.36px 6.8px rgba(255, 255, 255, 0.8),
    0 1.24px 1.68px rgba(0, 0, 0, 0.024),
    0 3.13px 4.26px rgba(0, 0, 0, 0.03),
    0 6.38px 8.68px rgba(0, 0, 0, 0.04),
    0 13.14px 17.89px rgba(0, 0, 0, 0.047),
    0 36px 49px rgba(0, 0, 0, 0.07);
  transition: background 0.25s ease;
}
.ax-btn.ax-rainbow-glow:hover::before { background: rgba(241, 244, 245, 0.5); }
.ax-btn.ax-rainbow-glow::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  /* explicit resets: the generic .ax-rainbow-glow::after blob (iridescence.css)
     merges per-property, and its background/blur/opacity would otherwise
     survive under this rule — the exact collision the focus ring once had */
  background: none;
  filter: none;
  opacity: 1;
  box-shadow: inset 4px 4px 3px rgba(255, 255, 255, 0.4);
}
/* keep the label above veil + gloss (the .ax-btn__label span; `> *` covers
   custom children too) */
.ax-btn.ax-rainbow-glow > * { position: relative; z-index: 3; }
.ax-btn.ax-rainbow-glow:focus-visible::after {
  box-shadow:
    inset 4px 4px 3px rgba(255, 255, 255, 0.4),
    0 0 0 2px #14151a,
    0 0 0 4.5px #fff;
}

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* ===== Generic section band ===== */
section.band { padding: clamp(72px, 11vw, 150px) 0; }
/* every section head clears the content below it — without this base rule a
   head whose section declares no scoped .band-head sits flush on its cards
   (the lead's last paragraph carries no bottom margin by design). Scoped
   heads (.stat-band, .scan-ledger, …) override with their own centring/gap. */
.band-head { margin: 0 0 44px; }
.band--muted { background: var(--surface-muted); }
.two-col { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
/* A wide capture scrolls inside its frame. Its intrinsic width must not
   become the grid column's minimum, including after image-CDN resizing. */
.two-col > * { min-width: 0; }
.two-col--text-right .col-text { order: 2; }
@media (max-width: 900px) {
  .two-col { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .two-col--text-right .col-text { order: 0; }
}

/* Subject framing (subject-frame.tsx). On wide viewports the <picture> is
   layout-transparent and the scene image behaves as a bare <img>. A
   component's narrow breakpoint turns it into a box of the crop ratio; then
   `img[data-subject-frame="local"]` places the full render so the crop
   window (--sf-x/y/w/h, render-normalized) fills the box, and a `delivered`
   image — imgix already cropped it — simply covers the box. The transform
   origin sits on the crop centre so scene animations scale about the same
   point in both cases. */
.subject-frame { display: contents; }

.figframe { border-radius: 28px; overflow: hidden; box-shadow: var(--mk-shadow-lg); background: var(--surface-inverse); }
.figframe.light { background: var(--surface-muted); }
.caption { font-size: 13.5px; color: var(--text-muted); margin: 16px 2px 0; line-height: 1.45; }
.on-dark .caption { color: rgba(255, 255, 255, 0.62); }

/* ===== Stat tiles (with optional per-stat citation) ===== */
.stat {
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 24px;
  border-radius: 18px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--mk-shadow-sm);
}
.stat .v { font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 4vw, 46px); line-height: 1; color: var(--text-title); }
.stat .l { font-size: 14px; color: var(--text-body); max-width: 220px; line-height: 1.4; }
.stat .c { font-size: 12.5px; }
.stat .c a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; }
.stat .c a:hover { color: var(--accent-text); }
.stat-row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 28px; }

/* ===== Rainbow ground (reusable section treatment) =====
   The house no-brand wash — Axeptio's signature rainbow — spread as a SECTION
   GROUND behind a whole band, not just behind a CTA card. Apply it from
   OUTSIDE the component: either add the class to a `.band` section directly, or
   WRAP a section that owns no background (a plain, non-muted `.band` such as
   ScanLedger) in `<div class="ax-rainbow-ground">…</div>` — the wash paints
   behind and the transparent band lets it through. `isolation:isolate` +
   `z-index:-1` keep the wash strictly BEHIND the content (no child z-index to
   touch), and the same soft, blurred, low-opacity recipe as the trust wall
   keeps ink and titles legible in BOTH themes (screen-blended and lifted a
   touch in dark so pastels stay luminous over the dark canvas). Use it where a
   section belongs to no single brand — never over a customer-hued moment. */
.ax-rainbow-ground {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.ax-rainbow-ground::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--rainbow-gradient);
  opacity: 0.2;
  filter: blur(70px) saturate(1.05);
  pointer-events: none;
}
.ax-rainbow-ground > .wrap { position: relative; z-index: 1; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ax-rainbow-ground::before { mix-blend-mode: screen; opacity: 0.3; }
}
:root[data-theme="dark"] .ax-rainbow-ground::before { mix-blend-mode: screen; opacity: 0.3; }

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  .ax-btn { transition: none; }
  /* iridescent rim holds a static rainbow instead of shimmering */
  .ax-btn.ax-rainbow-glow::before { animation: none; }
}

/* ─────────────────────────── Page.css ─────────────────────────── */
/* Page — the body shell: dark hero band + site header (wordmark, theme
   toggle, optional CTA pill). */

/* ===== Header (inside the hero; wordmark is the page's brand anchor) ===== */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px clamp(20px, 5vw, 64px);
}
/* the wordmark is the page's brand anchor: it never shrinks away — under a
   flex squeeze an unguarded .brand collapses the img to 0 width */
.site-header .brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.site-header .brand img { width: clamp(160px, 15vw, 210px); height: auto; }
.header-actions { display: flex; align-items: center; gap: 12px; }
/* narrow viewports: the header CTA yields (a long localized label otherwise
   forces horizontal body scroll) — the hero and final CTAs stay reachable */
@media (max-width: 560px) {
  .site-header { gap: 10px; }
  .header-actions { gap: 8px; }
  .header-actions > .ax-btn { display: none; }
}
.theme-toggle {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  width: 40px;
  height: 40px;
  border-radius: 100px;
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.theme-toggle:hover { background: rgba(255, 255, 255, 0.18); }
/* the wordmark twins: these rules decide which ink is up, here and in the
   breakpoint/theme block below, so exactly one twin has area at any width.
   Both are marked data-visual-swap="wordmark" in Page.tsx — the hidden twin
   is the pair working, not a missing visual, and a layout probe skips it. */
.logo-dark-only { display: none; }


/* the hero band the header sits inside */

.hero { position: relative; background: var(--hero-bg); }

/* the hero band below 861px: the carousel's static-copy form puts the copy on
   the page surface, so the band and its chrome flip to the theme tokens. A
   CUSTOM dark hero (Page darkHero) keeps its dark band and white chrome. */
@media (max-width: 860px) {
  .hero { background: var(--surface-page); }
  .hero .site-header { position: absolute; }
  /* the picker capsule is its own light ground at every width and in both
     themes — no breakpoint or theme chip overrides needed */
  .site-header .theme-toggle { border-color: var(--border-strong); background: transparent; color: var(--text-title); }
  .site-header .brand img { width: clamp(140px, 34vw, 180px); }
  /* wordmark swap follows the THEME, not the breakpoint: the band is dark
     again under data-theme=dark (the toggle runtime stamps it on load) */
  .logo-white-only { display: none; }
  .logo-dark-only { display: block; }
  :root[data-theme="dark"] .logo-white-only { display: block; }
  :root[data-theme="dark"] .logo-dark-only { display: none; }
  .hero--dark { background: var(--hero-bg); }
  .hero--dark .site-header .theme-toggle { border-color: rgba(255, 255, 255, 0.32); background: rgba(255, 255, 255, 0.08); color: #fff; }
  .hero--dark .logo-white-only { display: block; }
  .hero--dark .logo-dark-only { display: none; }
  .hero--dark .locale-switch { border-color: rgba(255, 255, 255, 0.32); background: rgba(255, 255, 255, 0.08); }
  .hero--dark .ls-item { color: rgba(255, 255, 255, 0.85); }
  .hero--dark a.ls-item:hover { background: rgba(255, 255, 255, 0.18); color: #fff; }
  .hero--dark .ls-item--current { background: #fff; color: #212121; }
}

/* ─────────────────────────── LocaleSwitcher.css ─────────────────────────── */
/* ===== Locale switcher (header language links) =====
   Plain links to the sibling static pages — no dropdown, no runtime. Styled
   for the dark hero band; the sub-861 light band re-tokens it below. */
.locale-switch {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.08);
  border-radius: 100px;
  padding: 3px;
}
.ls-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  padding: 5px 8px;
  border-radius: 100px;
  font: 700 12px var(--font-display);
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
}
a.ls-item:hover { background: rgba(255, 255, 255, 0.18); color: #fff; }
.ls-item--current { background: #fff; color: #212121; }
@media (max-width: 860px) {
  .locale-switch { border-color: var(--border-strong); background: transparent; }
  .ls-item { color: var(--text-body); }
  a.ls-item:hover { background: var(--surface-muted); color: var(--text-title); }
  .ls-item--current { background: var(--text-title); color: var(--surface-page); }
}

/* The first-visit locale suggestion (runtime/locale-switch.js): a quiet
   dismissible pill pinned bottom-left — the requested page always renders,
   the better-fitting sibling is only ever OFFERED, in its own language's
   name. DS card chrome, works over both themes. */
.locale-suggest {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px 6px;
  border: 1px solid var(--border-subtle);
  border-radius: 100px;
  background: var(--surface-page);
  box-shadow: var(--shadow-sm);
}
.locale-suggest__link {
  padding: 6px 12px;
  border-radius: 100px;
  font: 700 13px var(--font-display);
  color: var(--text-title);
  text-decoration: none;
}
.locale-suggest__link:hover { background: var(--surface-muted); }
.locale-suggest__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 100px;
  background: transparent;
  color: var(--text-body);
  font: 400 16px/1 var(--font-display);
  cursor: pointer;
}
.locale-suggest__close:hover { background: var(--surface-muted); color: var(--text-title); }

/* ─────────────────────────── HeroCarousel.css ─────────────────────────── */
/* HeroCarousel — the full-bleed estate hero (scene carousel + overlay copy)
   and its responsive brand selector: a floating glass panel over the desktop
   scene, then a compact in-flow scroller on narrow screens. Historical dock
   selectors remain only for older retained runtimes. Static twin of
   templates/landing-page/customer-carousel.html — keep in sync. */

/* the VIEWPORT owns the hero's height: floor = the render's aspect (capped
   88vh), but the in-flow copy can grow it past that — the stage itself has
   no preferred height (an aspect-ratio on the stage would beat grid stretch
   and leave a dark gap under the scene when the copy is the taller layer) */
.ax-carousel--hero .ax-carousel__viewport {
  border-radius: 0;
  background: var(--hero-bg);
  min-height: min(100vw / (var(--hero-aspect, 16/9)), 88vh);
}
.ax-carousel--hero .ax-carousel__stage { aspect-ratio: auto; min-height: 0; }
/* the stage only crops horizontally when the copy grew it past the render's
   aspect — anchor the scene so the SUBJECT group holds its side of the frame
   while the open zone stays in view under the copy. A slide's
   subjectSide/subjectPosition hint inlines its own object-position over these
   defaults, sliding the visible window across the wider-carried render to
   park the subjects clear of the copy without a re-render.
   The anchors are PERCENTAGES, not edge pins: percentage object-position
   slides the window proportionally as the box narrows (a no-op at the
   render's own aspect). An edge pin (0%/100%) shows exactly the subject zone
   at mid-band widths and crops the open stage out from under the copy. */
.ax-carousel--hero .ax-carousel__scene img { object-position: 40% 50%; }
.ax-carousel--hero.ax-carousel--copy-left .ax-carousel__scene img { object-position: 60% 50%; }


/* the copy is an IN-FLOW grid layer sharing the stage's area: the viewport
   grows to hold whichever is taller, so the stack can never bleed into the
   caption/tab band, and it centers on the SCENE — not on scene + tab strip */
.hero-copy {
  grid-area: 1 / 1;
  z-index: 6;
  align-self: center;
  justify-self: end;
  width: min(42%, 600px);
  /* top padding = header clearance; the centered box carries it so the copy
     never slides under the absolute header, even when it drives the height */
  padding: 110px clamp(20px, 5vw, 80px) 24px 12px;
  color: #fff;
  pointer-events: none;
}
.hero-copy--left {
  justify-self: start;
  padding-right: 12px;
  padding-left: clamp(20px, 5vw, 80px);
}
.hero-copy > * { pointer-events: auto; }
.hero-copy h1 { color: #fff; font-size: clamp(30px, 3.9vw, 58px); text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55); }
.hero-copy .hc-body { margin: 22px 0 0; }
.hero-copy .hc-body p {
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(15.5px, 1.2vw, 18px);
  line-height: 1.55;
  margin: 0 0 12px;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}
.hero-copy .eyebrow { text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5); }
.hero-stat {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 22px 0 26px;
  padding: 14px 20px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.hero-stat .v { font-family: var(--font-display); font-weight: 800; font-size: 40px; line-height: 1; color: #fff; }
.hero-stat .l { font-size: 13.5px; line-height: 1.35; color: rgba(255, 255, 255, 0.82); max-width: 190px; }
.hero-copy .btn-row { margin-top: 4px; }

/* ===== Light-scheme scene slides ============================================
   A slide's scheme describes the actual background behind its copy. A pale
   background takes dark text; a dark or saturated one takes light text.
   The Blender scene family and the brand website theme do not decide this.
   The runtime stamps the active slide's scheme on the section.
   This whole block only matters while the copy sits IN FRONT OF the scene
   (the desktop grid-area 1/1 layout) — below the 861px stack break the copy
   moves onto its own theme-surface band with no scene underneath (see the
   max-width:860px block), so these selectors are gated to desktop widths.
   Ungated, their extra attribute + class made them beat the mobile band's
   lower-specificity `.hero-copy h1`/`.hero-stat .v` resets regardless of
   source order, leaving light-scene slides with ink text and a light-halo
   shadow on the mobile theme surface — invisible (or ghosted) text in dark
   mode, since the surface there is near-black. */
@media (min-width: 861px) {
  .ax-carousel--hero[data-scene-scheme="light"] .hero-copy { color: #14151a; }
  .ax-carousel--hero[data-scene-scheme="light"] .hero-copy h1 { color: #14151a; text-shadow: 0 2px 18px rgba(255, 255, 255, 0.6); }
  .ax-carousel--hero[data-scene-scheme="light"] .hero-copy .hc-body p { color: rgba(20, 21, 26, 0.88); text-shadow: 0 1px 12px rgba(255, 255, 255, 0.6); }
  .ax-carousel--hero[data-scene-scheme="light"] .hero-copy .eyebrow { text-shadow: 0 1px 12px rgba(255, 255, 255, 0.55); }
  .ax-carousel--hero[data-scene-scheme="light"] .hero-copy .ilink { color: var(--client-primary-strong, #14151a); }
  .ax-carousel--hero[data-scene-scheme="light"] .hero-stat {
    background: rgba(20, 21, 26, 0.06);
    border-color: rgba(20, 21, 26, 0.14);
  }
  .ax-carousel--hero[data-scene-scheme="light"] .hero-stat .v { color: #14151a; }
  .ax-carousel--hero[data-scene-scheme="light"] .hero-stat .l { color: rgba(20, 21, 26, 0.8); }
  .ax-carousel--hero[data-scene-scheme="light"] .hero-copy .ax-btn--ghost.on-dark {
    color: #14151a;
    box-shadow: inset 0 0 0 1.5px rgba(20, 21, 26, 0.45);
  }
  .ax-carousel--hero[data-scene-scheme="light"] .hero-copy .ax-btn--ghost.on-dark:hover { background: rgba(20, 21, 26, 0.07); }
}


/* carousel caption + tabs sit in the dark hero band below the scene */
.ax-carousel--hero .ax-carousel__caption { color: rgba(255, 255, 255, 0.72); padding: 0 20px; margin-top: 20px; }
/* The DOCKED switcher is ONE rainbow-pill CAPSULE (same anatomy as
   .ax-btn.ax-rainbow-glow, container-scaled): gel-white veil over the house
   rainbow, so the iridescent underline peeks along the capsule's bottom
   edge. The capsule is the light ground for every mark — real colours in
   both themes, no per-chip grounds and no per-theme flips. (While the hero
   is in view the selector is the floating GLASS panel over the scene — see
   the floating-selector section below.) */
.ax-carousel--hero[data-selector-docked="true"] .ax-carousel__logos {
  width: fit-content;
  max-width: calc(100% - 40px);
  margin: 18px auto 26px;
  padding: 4px 5px;
  border-radius: 14px;
  gap: clamp(6px, 1.2vw, 14px);
  background:
    linear-gradient(#f1f4f5, #f1f4f5 80%, rgba(241, 244, 245, 0.4)),
    linear-gradient(90deg, rgba(243, 120, 98, 0.4), rgba(245, 209, 65, 0.4) 33%, rgba(17, 155, 155, 0.4) 66%, rgba(107, 141, 237, 0.4)),
    linear-gradient(#f1f4f5 59%, rgba(241, 244, 245, 0.6));
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.9),
    0 3.13px 4.26px rgba(0, 0, 0, 0.03),
    0 6.38px 8.68px rgba(0, 0, 0, 0.04),
    0 13.14px 17.89px rgba(0, 0, 0, 0.05);
}
/* Tabs inside the capsule: quiet transparent buttons — no chip grounds, no
   inset hairlines. The active tab lifts on white with the hue underline. */
.ax-carousel--hero[data-selector-docked="true"] .ax-carousel__logo {
  opacity: 1;
  filter: none;
  background: transparent;
  border-radius: 10px;
  padding: 6px 10px 8px;
  box-shadow: none;
}
.ax-carousel--hero[data-selector-docked="true"] .ax-carousel__logo img { filter: none; }
.ax-carousel--hero[data-selector-docked="true"] .ax-carousel__logo:hover { opacity: 1; filter: none; background: rgba(20, 21, 26, 0.05); }
.ax-carousel--hero[data-selector-docked="true"] .ax-carousel__logo.ax-carousel__logo--active {
  opacity: 1;
  background: #fff;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.14);
}
.ax-carousel--hero[data-selector-docked="true"] .ax-carousel__logo--active img { filter: none; }
.ax-carousel--hero[data-selector-docked="true"] .ax-carousel__logo--fallback { color: #212121; }
.ax-carousel--hero[data-selector-docked="true"] .ax-carousel__logo--active::after { left: 8px; right: 8px; bottom: 4px; }
/* marks run smaller inside the compact capsule */
.ax-carousel--hero[data-selector-docked="true"] .ax-carousel__logo img,
.ax-carousel--hero[data-selector-docked="true"] .ax-carousel__logo svg { height: clamp(18px, 1.8vw, 24px); }

@media (max-width: 860px) {
  /* static-copy band: the copy takes its own row ABOVE the scene, on the
     page surface (theme tokens, no scene underneath) */
  .ax-carousel--hero .ax-carousel__viewport { background: transparent; }
  .hero-copy, .hero-copy--left { grid-area: 1 / 1; align-self: start; justify-self: stretch; width: auto; padding: 88px clamp(20px, 6vw, 40px) 8px; }
  .ax-carousel--hero .ax-carousel__stage { grid-area: 2 / 1; }
  .hero-copy h1 { text-shadow: none; font-size: clamp(30px, 8vw, 42px); }
  .hero-copy .hc-body p { text-shadow: none; color: var(--text-body); }
  /* the eyebrow sits on the theme band here, not the scene — the on-dark
     tint made for the scene washes out on this light panel, so it takes the
     full-strength accent colour the same as it would off-scene */
  .hero-copy .eyebrow { text-shadow: none; color: var(--accent-text); }
  .hero-copy { color: var(--text-title); }
  .hero-copy h1 { color: var(--text-title); }
  /* the on-dark ghost pill sits on the THEME band here — token colours, and
     washes that read in both themes */
  .hero-copy .ax-btn--ghost.on-dark { color: var(--text-title); box-shadow: inset 0 0 0 1.5px var(--border-strong); }
  .hero-copy .ax-btn--ghost.on-dark:hover { background: color-mix(in srgb, var(--text-title), transparent 92%); }
  .hero-copy .ax-btn--ghost.on-dark:active { background: color-mix(in srgb, var(--text-title), transparent 85%); }
  .hero-stat { background: var(--surface-muted); border-color: var(--border-subtle); }
  .hero-stat .v { color: var(--text-title); }
  .hero-stat .l { color: var(--text-body); }
  /* the aspect prop governs BOTH breakpoints — hardcoding a ratio here crops
     frame-edge subjects out of wider renders; 16/10 is only the fallback */
  .ax-carousel--hero .ax-carousel__stage { aspect-ratio: var(--hero-aspect, 16/10); }
  .ax-carousel--hero .ax-carousel__caption { color: var(--text-muted); }
  /* every slide carries a subjectFrame: the stage takes the crop ratio and
     each slide shows the crop around its own staged subjects instead of the
     whole wide frame (see .subject-frame in base.css) */
  .ax-carousel--hero.ax-carousel--framed .ax-carousel__stage { aspect-ratio: var(--hero-narrow-aspect); }
  .ax-carousel--framed .ax-carousel__scene .subject-frame { display: block; position: absolute; inset: 0; overflow: hidden; }
  .ax-carousel--framed .ax-carousel__scene .subject-frame img { position: absolute; }
  .ax-carousel--framed .ax-carousel__scene .subject-frame img[data-subject-frame="local"] {
    left: calc(-100% * var(--sf-x) / var(--sf-w));
    top: calc(-100% * var(--sf-y) / var(--sf-h));
    width: calc(100% / var(--sf-w));
    height: calc(100% / var(--sf-h));
    max-width: none;
    object-fit: fill;
    transform-origin: calc(100% * (var(--sf-x) + var(--sf-w) / 2)) calc(100% * (var(--sf-y) + var(--sf-h) / 2));
  }
}

/* MID-BAND STEP (861-1217px): between the mobile stack break and the width
   where the desktop cap engages, the uncapped desktop percentage claims more
   of the frame than a render's quiet zone can give — object-position has no
   slack left at 1024, so the column itself narrows. */
@media (min-width: 861px) and (max-width: 1217px) {
  .hero-copy, .hero-copy--left { width: min(44%, 560px); }
}

/* ===== Carousel component (verbatim twin of customer-carousel.html) ===== */
.ax-carousel {
  --_pri: var(--client-primary, var(--primary));
  --_deep: var(--client-primary-strong, var(--primary-400));
  --_trans: 700ms;
  font-family: var(--font-body, sans-serif);
  position: relative;
  box-sizing: border-box;
  color: var(--text-on-inverse, #fff);
  padding-bottom: 10px;
}
.ax-carousel * { box-sizing: border-box; }
/* the single column is pinned to the container width — an auto track would
   inflate to the stage's aspect-ratio preferred size and drag end-justified
   grid items (the hero copy) off-frame */
.ax-carousel__viewport { position: relative; display: grid; grid-template-columns: 100%; overflow: hidden; border-radius: 32px; background: var(--surface-inverse, #212121); outline: none; }
/* keyboard focus: a two-tone ring painted OVER the scene — a single-colour
   ring disappears against some region of every render, white-over-ink reads
   on any scene in both themes */
.ax-carousel__viewport:focus-visible::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 18px;
  pointer-events: none;
  z-index: 4;
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px #14151a;
}
.ax-carousel__stage { position: relative; grid-area: 1 / 1; width: 100%; aspect-ratio: 16/10; min-height: 360px; }
.ax-carousel__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--_trans) ease, visibility 0s linear var(--_trans);
}
.ax-carousel__slide--active { opacity: 1; visibility: visible; transition: opacity var(--_trans) ease, visibility 0s; z-index: 1; }
.ax-carousel__scene { position: absolute; inset: 0; overflow: hidden; }
/* crossfade bleed + drift stay small: staged subjects sit as close as ~7%
   from the frame edge, so total crop must never exceed ~2.5% on any side */
.ax-carousel__scene img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.01); }
.ax-carousel__slide--active .ax-carousel__scene img { animation: ax-carousel-drift var(--_drift, 9000ms) linear both; }
.ax-carousel[data-paused="true"] .ax-carousel__slide--active .ax-carousel__scene img { animation-play-state: paused; }
@keyframes ax-carousel-drift {
  from { transform: scale(1.01) translate3d(0, 0, 0); }
  to { transform: scale(1.035) translate3d(-0.7%, -0.5%, 0); }
}
.ax-carousel__nav {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 3;
  width: 14%;
  min-width: 56px;
  max-width: 120px;
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: #fff;
  display: flex;
  align-items: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.ax-carousel__nav--prev { left: 0; justify-content: flex-start; padding-left: 14px; }
.ax-carousel__nav--next { right: 0; justify-content: flex-end; padding-right: 14px; }
.ax-carousel__viewport:hover .ax-carousel__nav, .ax-carousel__nav:focus-visible { opacity: 1; }
.ax-carousel__nav > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 100px;
  background: rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  font-size: 22px;
  line-height: 1;
}
.ax-carousel__nav:focus-visible { outline: none; }
.ax-carousel__nav:focus-visible > span {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4.5px #14151a, 0 4px 14px rgba(0, 0, 0, 0.28);
}
.ax-carousel__caption {
  margin: 18px auto 0;
  text-align: center;
  min-height: 1.5em;
  font-family: var(--font-body, sans-serif);
  font-size: clamp(15px, 1.6vw, 18px);
  color: var(--text-body, #52555a);
  transition: opacity var(--_trans) ease;
}
.ax-carousel__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 3vw, 40px);
  margin: 18px auto 0;
  padding: 0;
}
.ax-carousel__logo {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 8px 4px 12px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  filter: grayscale(1);
  opacity: 0.45;
  transition: filter 0.3s ease, opacity 0.3s ease;
}
.ax-carousel__logo img, .ax-carousel__logo svg { height: clamp(22px, 2.4vw, 30px); width: auto; display: block; pointer-events: none; }
.ax-carousel__logo:hover { opacity: 0.8; filter: grayscale(0.4); }
.ax-carousel__logo.ax-carousel__logo--active { filter: none; opacity: 1; }
.ax-carousel__logo--active::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 2px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--client-primary, var(--primary));
}
.ax-carousel__logo:focus-visible {
  outline: none;
  border-radius: 6px;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #14151a;
}
.ax-carousel__logo--fallback { font-family: var(--font-display, sans-serif); font-weight: 700; font-size: 16px; color: var(--text-title, #212121); }
/* WHITE-KNOCKOUT marks (slide logoTone: 'light'): every selector ground is
   LIGHT — the glass panel's pale idle chips, the active white chip and the
   docked gel capsule — so the tab backs the mark with a small ink chip and
   the mark reads without a hand-composited chip asset; the mark itself stays
   unfiltered. */
.ax-carousel--hero:not([data-selector-docked="true"]) .ax-carousel__logo--lightmark {
  background: #14151a;
  border-radius: 12px;
}
.ax-carousel--hero[data-selector-docked="true"] .ax-carousel__logo.ax-carousel__logo--lightmark,
.ax-carousel--hero[data-selector-docked="true"] .ax-carousel__logo.ax-carousel__logo--lightmark.ax-carousel__logo--active {
  background: #14151a;
  border-radius: 10px;
}
.ax-carousel--hero:not([data-selector-docked="true"]) .ax-carousel__logo--lightmark:hover { background: #212328; }
/* the ink chip keeps the same active telling as every other glass tab: the
   hue ring, at the same padding and mark height */
.ax-carousel--hero:not([data-selector-docked="true"]) .ax-carousel__logo--lightmark.ax-carousel__logo--active {
  background: #14151a;
  box-shadow: 0 0 0 2px var(--client-primary, var(--primary)), 0 6px 16px -8px rgba(0, 0, 0, 0.5);
}
.ax-carousel--hero:not([data-selector-docked="true"]) .ax-carousel__logo--lightmark img,
.ax-carousel--hero[data-selector-docked="true"] .ax-carousel__logo.ax-carousel__logo--lightmark img { filter: none; }
.ax-carousel--hero[data-selector-docked="true"] .ax-carousel__logo.ax-carousel__logo--lightmark:hover { background: #212328; opacity: 1; }

/* tab groups: the target's own properties vs the inspiration customers.
   Buttons stay in slide order across the groups (runtime maps by index). */
.ax-carousel__group { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ax-carousel__group-label {
  font-family: var(--font-body, sans-serif);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted, #8a8e94);
  padding: 0 4px;
}
.ax-carousel__group-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 3vw, 40px);
}
.ax-carousel__chooser-scroll {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
}
.ax-carousel__group + .ax-carousel__group {
  border-left: 1px solid rgba(20, 21, 26, 0.14);
  padding-left: clamp(14px, 2vw, 28px);
  margin-left: clamp(4px, 1vw, 10px);
}
/* labels sit INSIDE the light docked capsule: fixed ink, both themes */
.ax-carousel--hero[data-selector-docked="true"] .ax-carousel__group-label { color: rgba(20, 21, 26, 0.55); }
@media (max-width: 860px) {
  .ax-carousel__logos:has(.ax-carousel__group) { flex-direction: column; gap: 10px; }
  .ax-carousel__group + .ax-carousel__group {
    border-left: 0;
    border-top: 1px solid rgba(20, 21, 26, 0.14);
    padding: 10px 0 0;
    margin: 0;
  }
}

/* The chooser scrolls away with the hero. It must not become persistent
   viewport chrome over proof or copy farther down the page. */

.ax-carousel[data-selector-docked="true"] .ax-carousel__logos {
  position: fixed;
  left: 50%;
  bottom: clamp(12px, 3vw, 24px);
  transform: translateX(-50%);
  z-index: 50;
  margin: 0;
  padding: 4px 5px;
  width: auto;
  max-width: min(94vw, 680px);
  flex-direction: row;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: clamp(8px, 1.6vw, 16px);
  border: 0;
  border-radius: 14px;
  /* the same rainbow-pill capsule, floating: gel veil + iridescent bottom
     edge, plus the dock's own lift shadow */
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.9),
    var(--mk-shadow-md, 0 10px 30px rgba(0, 0, 0, 0.16));
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  scrollbar-width: none;
  animation: ax-dock-in 0.28s ease both;
}
.ax-carousel[data-selector-docked="true"] .ax-carousel__logos::-webkit-scrollbar { display: none; }
/* compact the grouped strip: labels drop, groups sit inline behind a hairline */
.ax-carousel[data-selector-docked="true"] .ax-carousel__group { flex-direction: row; align-items: center; }
.ax-carousel[data-selector-docked="true"] .ax-carousel__group-label { display: none; }
.ax-carousel[data-selector-docked="true"] .ax-carousel__group-tabs { flex-wrap: nowrap; gap: clamp(8px, 1.6vw, 16px); flex: 0 0 auto; }
/* Docked, the capsule is a nowrap + overflow-x:auto scroller. Tabs and groups
   must NOT flex-shrink, or a full estate (20 tabs) would crush each mark to a
   few px ("empty pills") instead of letting the capsule scroll. Keep them at
   their natural size so marks stay 18–24px and the capsule scrolls. */
.ax-carousel[data-selector-docked="true"] .ax-carousel__group,
.ax-carousel[data-selector-docked="true"] .ax-carousel__logo { flex: 0 0 auto; }
.ax-carousel[data-selector-docked="true"] .ax-carousel__group + .ax-carousel__group {
  border-left: 1px solid rgba(20, 21, 26, 0.14);
  border-top: 0;
  padding: 0 0 0 clamp(10px, 2vw, 16px);
  margin: 0;
}
/* docked, the strip keeps the hero capsule ground and tab styling as-is —
   the capsule is theme-invariant, so no docked chip or theme rules needed */
@keyframes ax-dock-in {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* ===== Floating glass selector (the hero-in-view state) =================
   While the hero is in view the brand selector floats OVER the scene as a
   glass panel on the SUBJECT side (opposite the copy): dark translucent
   ground + blur so the scene reads through it, grouped logo tabs, and an
   autoplay footer (pause toggle, dwell progress in the active hue, slide
   counter). Two orientations share the anatomy — the horizontal bar
   (default) and the vertical rail (.ax-carousel--sel-vertical).
   The tabs are EQUAL TABS, one of them selected: every mark keeps its REAL
   colours on a pale chip (a knockout only ever helped a mark that is already
   a flat silhouette — it turns a knocked-out wordmark into hole-letters on a
   slab), and the ACTIVE tab is told by GROUND + HUE RING — white chip, a
   2px ring in the active slide's hue — at the SAME chip padding and the SAME
   mark height as every idle tab, so the row reads as one selected tab rather
   than an oversized pill among faded ghosts. Docking swaps the whole panel
   for the capsule switcher above (which drops the footer); without JS the
   panel simply stays on the hero, footer inert. */
.ax-carousel--hero:not([data-selector-docked="true"]) .ax-carousel__logos {
  position: absolute;
  z-index: 7;
  top: clamp(96px, 14vh, 144px);
  left: clamp(20px, 4vw, 64px);
  margin: 0;
  width: clamp(320px, 34vw, 520px);
  max-width: calc(50% - clamp(28px, 5vw, 72px));
  max-height: min(54vh, calc(100% - 188px));
  padding: 14px;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 12px;
  overflow: hidden;
  border: 0;
  border-radius: 22px;
  background: rgba(18, 19, 24, 0.58);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  backdrop-filter: blur(18px) saturate(1.25);
  box-shadow: 0 24px 70px -28px rgba(0, 0, 0, 0.78);
}
/* On a mouse-led desktop the panel is contextual chrome: movement over the
   scene or panel wakes it, then the runtime lets it fade after a short idle.
   Keyboard-visible focus keeps it usable without letting a mouse-clicked tab
   pin the panel open. Touch/pen layouts do not opt into this concealment, and
   mobile stays persistently in flow. */
@media (min-width: 861px) and (hover: hover) and (pointer: fine) {
  .ax-carousel--hero:not([data-selector-docked="true"]) .ax-carousel__logos {
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px) scale(0.985);
    transform-origin: top left;
    transition: opacity 180ms ease, transform 220ms ease;
  }
  .ax-carousel--hero.ax-carousel--copy-left:not([data-selector-docked="true"]) .ax-carousel__logos { transform-origin: top right; }
  .ax-carousel--hero[data-selector-active="true"]:not([data-selector-docked="true"]) .ax-carousel__logos,
  .ax-carousel--hero:not([data-selector-docked="true"]) .ax-carousel__logos:has(:focus-visible) {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
  }
}
/* the panel holds the subject side: copy left ⇒ panel right */
.ax-carousel--hero.ax-carousel--copy-left:not([data-selector-docked="true"]) .ax-carousel__logos {
  left: auto;
  right: clamp(20px, 4vw, 64px);
}
.ax-carousel--hero:not([data-selector-docked="true"]) .ax-carousel__chooser-scroll {
  flex: 1 1 auto;
  min-height: 0;
  padding: 2px 5px 5px 2px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
}
.ax-carousel--hero:not([data-selector-docked="true"]) .ax-carousel__chooser-scroll::-webkit-scrollbar { width: 5px; }
.ax-carousel--hero:not([data-selector-docked="true"]) .ax-carousel__chooser-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.28); border-radius: 999px; }
.ax-carousel--hero:not([data-selector-docked="true"]) .ax-carousel__chooser-scroll:not(:has(.ax-carousel__group)) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ax-carousel--hero:not([data-selector-docked="true"]) .ax-carousel__group {
  align-items: flex-start;
  gap: 6px;
  width: 100%;
  min-width: 0;
}
.ax-carousel--hero:not([data-selector-docked="true"]) .ax-carousel__group-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.6);
  padding: 0 2px;
}
.ax-carousel--hero:not([data-selector-docked="true"]) .ax-carousel__group-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  justify-content: stretch;
  gap: 8px;
  width: 100%;
}
.ax-carousel--hero:not([data-selector-docked="true"]) .ax-carousel__group + .ax-carousel__group {
  border-left: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 10px 0 0;
  margin: 0;
}
/* glass tabs: a pale chip under every mark, white chip + hue ring when active */
.ax-carousel--hero:not([data-selector-docked="true"]) .ax-carousel__logo {
  opacity: 1;
  filter: none;
  background: rgba(242, 244, 246, 0.52);
  border-radius: 12px;
  width: 100%;
  min-width: 0;
  min-height: 54px;
  padding: 10px 14px;
  box-shadow: none;
  transition: box-shadow 0.16s ease, background-color 0.16s ease;
}
.ax-carousel--hero:not([data-selector-docked="true"]) .ax-carousel__logo img {
  height: 24px;
  max-width: min(100%, 128px);
  max-height: 30px;
  width: auto;
  object-fit: contain;
  filter: none;
  opacity: 1;
}
.ax-carousel--hero:not([data-selector-docked="true"]) .ax-carousel__logo:hover {
  opacity: 1;
  filter: none;
  background: rgba(242, 244, 246, 0.66);
}
.ax-carousel--hero:not([data-selector-docked="true"]) .ax-carousel__logo--active {
  opacity: 1;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 0 0 2px var(--client-primary, var(--primary)), 0 6px 16px -8px rgba(0, 0, 0, 0.5);
}
.ax-carousel--hero:not([data-selector-docked="true"]) .ax-carousel__logo--fallback { color: #151515; font-size: 13.5px; }
/* the glass panel carries no hue underline — the active state is ground + ring */
.ax-carousel--hero:not([data-selector-docked="true"]) .ax-carousel__logo--active::after { content: none; }

/* autoplay footer: pause toggle + dwell progress + counter */
.ax-carousel--hero .ax-carousel__selector-foot { display: flex; align-items: center; gap: 10px; }
.ax-carousel--hero .ax-carousel__playpause {
  appearance: none;
  width: 30px;
  height: 30px;
  padding: 0;
  flex: none;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 11px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.ax-carousel--hero .ax-carousel__playpause:hover { background: rgba(255, 255, 255, 0.16); }
.ax-carousel--hero .ax-carousel__playpause:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #14151a;
}
.ax-carousel--hero .ax-carousel__pp-play { display: none; }
.ax-carousel[data-user-paused="true"] .ax-carousel__pp-play { display: block; }
.ax-carousel[data-user-paused="true"] .ax-carousel__pp-pause { display: none; }
.ax-carousel--hero .ax-carousel__progress {
  position: relative;
  flex: 1;
  min-width: 64px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  overflow: hidden;
}
.ax-carousel--hero .ax-carousel__progress-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--client-primary, var(--primary)), white 28%);
}
.ax-carousel--hero .ax-carousel__count {
  font-family: var(--font-body, sans-serif);
  font-weight: 800;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* the docked capsule stays the compact switcher it always was: no footer */
.ax-carousel[data-selector-docked="true"] .ax-carousel__selector-foot { display: none; }

/* vertical rail: slim fixed-width column of centred marks */
.ax-carousel--hero.ax-carousel--sel-vertical:not([data-selector-docked="true"]) .ax-carousel__logos {
  width: 208px;
  max-width: none;
  padding: 14px 12px;
}
.ax-carousel--hero.ax-carousel--sel-vertical:not([data-selector-docked="true"]) .ax-carousel__chooser-scroll {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  width: 100%;
}

/* Older retained runtimes may still stamp the historical dock state. Hide the
   chooser in that state rather than fixing it over unrelated page content. */
.ax-carousel[data-selector-docked="true"] .ax-carousel__logos { display: none; }
.ax-carousel--hero.ax-carousel--sel-vertical:not([data-selector-docked="true"]) .ax-carousel__group { align-items: stretch; }
.ax-carousel--hero.ax-carousel--sel-vertical:not([data-selector-docked="true"]) .ax-carousel__group-label {
  align-self: center;
  text-align: center;
  padding: 2px 6px;
}
.ax-carousel--hero.ax-carousel--sel-vertical:not([data-selector-docked="true"]) .ax-carousel__group-tabs {
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
}
.ax-carousel--hero.ax-carousel--sel-vertical:not([data-selector-docked="true"]) .ax-carousel__logo {
  width: 100%;
  justify-content: center;
  padding: 9px 12px;
}
.ax-carousel--hero.ax-carousel--sel-vertical:not([data-selector-docked="true"]) .ax-carousel__logo img {
  max-width: 120px;
  max-height: 22px;
  height: auto;
}
.ax-carousel--hero.ax-carousel--sel-vertical:not([data-selector-docked="true"]) .ax-carousel__selector-foot {
  justify-content: center;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 10px;
}
.ax-carousel--hero.ax-carousel--sel-vertical:not([data-selector-docked="true"]) .ax-carousel__progress { display: none; }

@media (max-width: 860px) {
  /* Keep the image at its authored aspect and give the two carousel controls
     their own row. Edge-staged subjects can reach the scene boundary, so a
     pill over either image edge can cover the proof it is meant to browse. */
  .ax-carousel--hero:not(.ax-carousel--single) .ax-carousel__stage { margin-bottom: 56px; }
  .ax-carousel--hero .ax-carousel__nav {
    top: calc(100% + 6px);
    bottom: auto;
    width: 44px;
    min-width: 44px;
    max-width: 44px;
    height: 44px;
    padding: 0;
    opacity: 1;
  }
  .ax-carousel--hero .ax-carousel__nav--prev { left: calc(50% - 52px); }
  .ax-carousel--hero .ax-carousel__nav--next { right: calc(50% - 52px); }

  /* static-copy band: the panel leaves the scene and sits as its own block
     under the stage. The band ground is the THEME surface, so the glass
     goes near-opaque — white chrome must read on light and dark alike. */
  .ax-carousel--hero:not([data-selector-docked="true"]) .ax-carousel__logos,
  .ax-carousel--hero.ax-carousel--sel-vertical:not([data-selector-docked="true"]) .ax-carousel__logos {
    position: static;
    width: calc(100% - 24px);
    max-width: none;
    max-height: none;
    margin: 12px;
    padding: 10px;
    gap: 8px;
    border-radius: 18px;
    background: rgba(18, 19, 24, 0.94);
  }
  /* One horizontal viewport uses the phone's abundant inline space. Both
     groups travel in that same strip; the footer remains fixed below it. */
  .ax-carousel--hero:not([data-selector-docked="true"]) .ax-carousel__chooser-scroll,
  .ax-carousel--hero.ax-carousel--sel-vertical:not([data-selector-docked="true"]) .ax-carousel__chooser-scroll,
  .ax-carousel--hero:not([data-selector-docked="true"]) .ax-carousel__chooser-scroll:not(:has(.ax-carousel__group)) {
    display: flex;
    flex: none;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100%;
    padding: 2px 18px 6px 2px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .ax-carousel--hero:not([data-selector-docked="true"]) .ax-carousel__chooser-scroll::-webkit-scrollbar { display: none; }
  .ax-carousel--hero:not([data-selector-docked="true"]) .ax-carousel__chooser-scroll[data-overflow-right="true"] {
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
  }
  .ax-carousel--hero:not([data-selector-docked="true"]) .ax-carousel__chooser-scroll[data-overflow-left="true"][data-overflow-right="false"] {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 100%);
  }
  .ax-carousel--hero:not([data-selector-docked="true"]) .ax-carousel__chooser-scroll[data-overflow-left="true"][data-overflow-right="true"] {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
  }
  .ax-carousel--hero:not([data-selector-docked="true"]) .ax-carousel__group {
    flex: 0 0 auto;
    align-items: flex-start;
    min-width: 0;
    width: auto;
    max-width: none;
  }
  .ax-carousel--hero:not([data-selector-docked="true"]) .ax-carousel__group + .ax-carousel__group {
    border-top: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.14);
    padding: 0 0 0 14px;
    margin-left: 4px;
  }
  .ax-carousel--hero:not([data-selector-docked="true"]) .ax-carousel__group-tabs,
  .ax-carousel--hero.ax-carousel--sel-vertical:not([data-selector-docked="true"]) .ax-carousel__group-tabs {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: auto;
    overflow: visible;
    gap: 8px;
  }
  .ax-carousel--hero:not([data-selector-docked="true"]) .ax-carousel__logo {
    /* percentage basis, not a viewport unit: three tabs then sit at 30% each
       and fill the row exactly, no scroll needed — a longer estate still
       shrinks past `min-width` and falls back to the scrollable strip */
    flex: 1 1 30%;
    width: auto;
    max-width: 148px;
    min-width: 84px;
    min-height: 52px;
    scroll-snap-align: start;
  }
  .ax-carousel--hero:not([data-selector-docked="true"]) .ax-carousel__logo img {
    height: 23px;
    max-width: 116px;
  }
  .ax-carousel--hero:not([data-selector-docked="true"]) .ax-carousel__selector-foot {
    width: 100%;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }
}

/* ===== One slide: the scene, and nothing to choose ======================
   A single-property hero is a scene, not a slideshow. The brand selector
   (floating panel and docked capsule alike), its autoplay footer and the
   prev/next arrows all offer a choice that does not exist, and the panel and
   the capsule float OVER the page while offering it. The markup keeps them —
   the runtime reads the tab strip for the active slide's caption and binds
   the nav buttons on every carousel — so the chrome goes away here, in one
   place, for every one-slide hero. */
.ax-carousel.ax-carousel--single .ax-carousel__logos,
.ax-carousel.ax-carousel--single .ax-carousel__nav { display: none; }
/* (the page's dock reservation skips a single-slide hero too — see the
   body:has() rule in base.css) */

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  .ax-carousel__slide, .ax-carousel__slide--active { transition: opacity 1ms linear; }
  .ax-carousel__slide--active .ax-carousel__scene img { animation: none; transform: scale(1.01); }
  .ax-carousel__caption, .ax-carousel__logo, .ax-carousel__nav { transition: none; }
  /* the sticky selector docks instantly, no slide-in */
  .ax-carousel[data-selector-docked="true"] .ax-carousel__logos { animation: none; }
  /* no autoplay ⇒ the glass panel's autoplay footer has nothing to drive */
  .ax-carousel--hero .ax-carousel__selector-foot { display: none; }
}

/* ─────────────────────────── StageFull.css ─────────────────────────── */
/* StageFull — the full-bleed dark overlay act band. CTABanner's "stage"
   variant renders the same .stage-full anatomy and reuses these rules. */

/* ===== Full-bleed dark overlay sections (StageFull, CtaFull) =====
   COPY CONTAINMENT IS STRUCTURAL (the hero-copy pattern): the scene and the
   overlay are stacked GRID layers, so the band's height is max(scene floor,
   copy) — copy taller than the scene GROWS the band instead of overflowing
   into the neighbouring sections, and the scene stretches to keep covering
   (bottom-anchored, so the extra crop eats the sky, never the subjects). */
.stage-full { position: relative; display: grid; background: var(--hero-bg); }
/* bottom-anchored crop: staged subjects (pedestal, logo, mascot) stand on the
   render's floor, so when the crop bites it eats the sky. The scene floor
   (min-height) is the RENDER'S OWN ratio at full width, capped at 86vh; past
   it the copy drives the height. --stage-aspect is the component's `aspect`
   knob (the render's real ratio, inlined per instance the way HeroCarousel
   inlines --hero-aspect): a render wider than the 16/9 fallback is shown at
   its own shape instead of losing its flanks to the cover crop. Unset — the
   CTABanner stage variant — keeps the classic 16/9 band. Horizontal anchoring
   is per-instance too: the component inlines object-position from its
   subjectSide/subjectPosition hint (default: subjects opposite the copy),
   so the visible window parks the subjects clear of the overlay copy
   without a re-render */
.stage-full .scene-img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  min-height: min(100vw / (var(--stage-aspect, 16/9)), 86vh);
  object-fit: cover;
  object-position: 50% 100%;
  display: block;
}
.stage-full .overlay {
  grid-area: 1 / 1;
  align-self: center;
  justify-self: end;
  position: relative;
  z-index: 3;
  /* --overlay-w = the component's copyWidth knob (StageFull / CTABanner
     stage): a data edit for renders whose open zone is narrower than the
     default column */
  width: var(--overlay-w, min(46%, 560px));
  padding: clamp(32px, 5vw, 64px) clamp(20px, 5vw, 80px) clamp(32px, 5vw, 64px) 12px;
  color: #fff;
}
.stage-full .overlay--left {
  justify-self: start;
  padding-right: 12px;
  padding-left: clamp(20px, 5vw, 80px);
}
/* MID-BAND STEP (861-1217px): between the mobile stack break and the width
   where the desktop cap engages (560/0.46 ≈ 1217px), the uncapped desktop
   percentage claims more of the frame than a render's quiet zone can give —
   object-position has no slack left at 1024, so the column itself narrows.
   Same step for the hero copy (640/0.52 ≈ 1230px, close enough to share). */

/* MID-BAND STEP (861-1217px): between the mobile stack break and the width
   where the desktop cap engages, the uncapped desktop percentage claims more
   of the frame than a render's quiet zone can give — object-position has no
   slack left at 1024, so the column itself narrows. */
@media (min-width: 861px) and (max-width: 1217px) {
  .stage-full .overlay, .stage-full .overlay--left { width: var(--overlay-w, min(38%, 480px)); }
}

.stage-full .overlay h2 { color: #fff; font-size: clamp(28px, 3.6vw, 48px); margin: 0 0 16px; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55); }
.stage-full .overlay .lead p { color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5); }
.stage-full .overlay .caption { color: rgba(255, 255, 255, 0.6); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5); }
.stage-full .overlay .stat { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.18); }
.stage-full .overlay .stat .v { color: #fff; }
.stage-full .overlay .stat .l { color: rgba(255, 255, 255, 0.82); }
.stage-full .overlay .btn-row { margin-top: 22px; }
/* light tone — light studio scene renders as a full-bleed act band. The copy
   keys to the IMAGE, not the theme (the baked render stays light in both
   themes), so inks are fixed like the dark tone's fixed white. */
.stage-full--light { background: #f2efec; }
.stage-full--light .overlay { color: #212121; }
.stage-full--light .overlay .eyebrow { color: rgba(20, 21, 26, 0.58); }
.stage-full--light .overlay h2 { color: #212121; text-shadow: none; }
.stage-full--light .overlay .lead p { color: rgba(20, 21, 26, 0.84); text-shadow: none; }
.stage-full--light .overlay .caption { color: rgba(20, 21, 26, 0.55); text-shadow: none; }
.stage-full--light .overlay .stat { background: rgba(255, 255, 255, 0.55); border-color: rgba(20, 21, 26, 0.14); }
.stage-full--light .overlay .stat .v { color: #212121; }
.stage-full--light .overlay .stat .l { color: rgba(20, 21, 26, 0.78); }
.stage-full--light .overlay .stat .c a { color: rgba(20, 21, 26, 0.5); }
@media (max-width: 860px) {
  /* stacked form: leave the grid so scene and copy flow one under the other */
  .stage-full { display: block; background: var(--surface-page); }
  .stage-full .overlay, .stage-full .overlay--left {
    position: static;
    transform: none;
    width: auto;
    color: var(--text-title);
    padding: 28px clamp(20px, 6vw, 40px) 0;
  }
  .stage-full .overlay h2 { color: var(--text-title); text-shadow: none; }
  .stage-full .overlay .lead p { color: var(--text-body); text-shadow: none; }
  .stage-full .overlay .caption { color: var(--text-muted); text-shadow: none; }
  /* the aspect prop governs BOTH breakpoints — hardcoding a ratio here crops
     frame-edge subjects out of wider renders; 16/10 is only the fallback */
  .stage-full .scene-img { height: auto; min-height: 0; aspect-ratio: var(--stage-aspect, 16/10); object-position: 38% 100%; }
  /* subjectFrame: the stacked scene is the crop around the staged subjects
     instead of the whole wide frame (see .subject-frame in base.css) */
  .stage-full .subject-frame { display: block; position: relative; overflow: hidden; aspect-ratio: var(--sf-aspect); }
  .stage-full .subject-frame .scene-img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
  .stage-full .subject-frame .scene-img[data-subject-frame="local"] {
    left: calc(-100% * var(--sf-x) / var(--sf-w));
    top: calc(-100% * var(--sf-y) / var(--sf-h));
    width: calc(100% / var(--sf-w));
    height: calc(100% / var(--sf-h));
    max-width: none;
    object-fit: fill;
    transform-origin: calc(100% * (var(--sf-x) + var(--sf-w) / 2)) calc(100% * (var(--sf-y) + var(--sf-h) / 2));
  }
  .stage-full .overlay .stat { background: var(--surface-muted); border-color: var(--border-subtle); }
  .stage-full .overlay .stat .v { color: var(--text-title); }
  .stage-full .overlay .stat .l { color: var(--text-body); }
  .stage-full .overlay .ilink { color: var(--accent-text); }
  /* the on-dark ghost pill sits on the THEME band here, same as the hero's —
     token colours instead of the scene's white-on-dark treatment */
  .stage-full .overlay .ax-btn--ghost.on-dark { color: var(--text-title); box-shadow: inset 0 0 0 1.5px var(--border-strong); }
  .stage-full .overlay .ax-btn--ghost.on-dark:hover { background: color-mix(in srgb, var(--text-title), transparent 92%); }
  .stage-full .overlay .ax-btn--ghost.on-dark:active { background: color-mix(in srgb, var(--text-title), transparent 85%); }
  /* light tone: stacked copy sits on the page surface again — re-token the
     fixed inks so the dark theme stays legible */
  .stage-full--light .overlay .eyebrow { color: var(--text-muted); }
  .stage-full--light .overlay .stat .c a { color: var(--text-muted); }
  .stage-full { padding-bottom: clamp(40px, 8vw, 72px); }
}

/* ─────────────────────────── CTABanner.css ─────────────────────────── */
/* ===== Contained CTA card (CTABanner variant "contained") ===== */
.cta-card {
  position: relative;
  display: grid;
  grid-template-columns: 1.5fr 0.9fr;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  border-radius: 28px;
  background: var(--surface-muted);
  border: 1px solid var(--border-subtle);
  padding: clamp(32px, 5vw, 72px);
}
.cta-card h2 { font-size: clamp(28px, 3.4vw, 44px); margin: 0 0 18px; }
.cta-card .btn-row { margin-top: 26px; }
.cta-card .ax-btn--ghost { color: var(--text-title); box-shadow: inset 0 0 0 1.5px var(--border-strong); }
.cta-card .ax-btn--ghost:hover { background: color-mix(in srgb, var(--text-title), transparent 92%); }
.cta-card__mascot { display: flex; justify-content: center; }
.cta-card__mascot img { max-height: 260px; width: auto; }
@media (max-width: 820px) {
  .cta-card { grid-template-columns: 1fr; }
  .cta-card__mascot { order: -1; }
  .cta-card__mascot img { max-height: 180px; }
}
/* The pills are the copy column's widest unbreakable atom: `.ax-btn` keeps its
   label on one line and `--lg` adds 40px of padding each side, so a
   sentence-long action ("send this page to my agency") gives the column a
   minimum width of its own — past a phone's viewport, taking the card and the
   page's whole closing argument off-screen with it. Here the column may shrink
   to its track and the label may take a second line, so the pill is bounded by
   the card instead of the card by the pill. */
.cta-card__copy { min-width: 0; }
.cta-card .btn-row .ax-btn { max-width: 100%; white-space: normal; }
/* on a phone the label wins the room the wide-pill padding was taking */
@media (max-width: 560px) {
  .cta-card .btn-row .ax-btn--lg { padding: 14px 24px; }
}

/* The "stage" variant renders the .stage-full anatomy — see StageFull.css. */

/* ─────────────────────────── FeatureSplit.css ─────────────────────────── */
/* FeatureSplit — the two-column act. The .two-col grid and .figframe panel
   are shared utilities (base.css); these are the visual variants. */

/* ===== Collage + phone visual variants (FeatureSplit) ===== */
.figframe.collage { position: relative; aspect-ratio: 16/12; }
.collage__item { position: absolute; width: 62%; border-radius: 14px; box-shadow: var(--mk-shadow-md); }
.collage__item--1 { top: 8%; left: 6%; transform: rotate(-3deg); z-index: 1; }
.collage__item--2 { top: 30%; right: -4%; transform: rotate(2.2deg); z-index: 2; }
.collage__item--3 { bottom: -6%; left: 18%; transform: rotate(-1.4deg); z-index: 3; }
.phone-frame {
  width: min(320px, 80%);
  margin: 0 auto;
  border-radius: 44px;
  border: 10px solid #1b1b1e;
  background: #1b1b1e;
  overflow: hidden;
  box-shadow: var(--mk-shadow-lg);
}
.phone-frame img { width: 100%; display: block; border-radius: 34px; }

/* ===== Subject-framed scene (FeatureSplit / PluginSpotlight) =====
   Stacked layout: the frame shows the crop around the staged subjects
   instead of the whole render (see .subject-frame in base.css). */
@media (max-width: 900px) {
  .figframe .subject-frame { display: block; position: relative; overflow: hidden; aspect-ratio: var(--sf-aspect); }
  .figframe .subject-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .figframe .subject-frame img[data-subject-frame="local"] {
    left: calc(-100% * var(--sf-x) / var(--sf-w));
    top: calc(-100% * var(--sf-y) / var(--sf-h));
    width: calc(100% / var(--sf-w));
    height: calc(100% / var(--sf-h));
    max-width: none;
    object-fit: fill;
    transform-origin: calc(100% * (var(--sf-x) + var(--sf-w) / 2)) calc(100% * (var(--sf-y) + var(--sf-h) / 2));
  }
  /* Show an unframed capture whole, regardless of its source/CDN resolution.
     Enlarging it beyond the column hides the chart, labels and controls. */
  .figframe:not(.collage) > img:not([data-subject-frame]) {
    width: 100%;
    max-width: 100%;
    height: auto;
  }
}

/* ─────────────────────────── FeatureAccordion.css ─────────────────────────── */
/* ===== Feature accordion (rainbow progress underline) ===== */
.ax-accordion { display: grid; gap: 4px; }
.ax-accordion__row { border-bottom: 1px solid var(--border-subtle); }
.ax-accordion__head {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: block;
  width: 100%;
  text-align: left;
  position: relative;
  /* right padding is the chevron's reserved lane — the label never runs under it */
  padding: 18px 40px 18px 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(17px, 1.5vw, 21px);
  color: var(--text-body);
  transition: color 0.2s ease;
}
/* the openable affordance: a chevron on every row, always present, pointing
   down when the row is closed and flipping up when it opens. Drawn from two
   borders so it needs no icon element and no markup change. */
.ax-accordion__head::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  transform-origin: center;
  transition: transform 0.2s ease;
  pointer-events: none;
}
.ax-accordion__row--open .ax-accordion__head { color: var(--text-title); }
.ax-accordion__row--open .ax-accordion__head::after { transform: translateY(-30%) rotate(-135deg); }
.ax-accordion__head:hover { color: var(--text-title); }
.ax-accordion__progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2.5px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  border-radius: 2px;
  background: var(--rainbow-gradient-full);
  opacity: 0;
}
.ax-accordion__row--open .ax-accordion__progress { opacity: 1; transform: scaleX(var(--_p, 0)); }
.ax-accordion__body { overflow: hidden; }
/* top margin keeps the pane copy clear of the active row's progress underline;
   the bottom margin is the pane's own breathing room before the next row's
   rule, so an open pane never sits flush on the row below it */
.ax-accordion__body p { margin: 14px 4px 28px; color: var(--text-body); font-size: clamp(15.5px, 1.2vw, 17.5px); line-height: 1.55; }

/* Companion media panel — the visual ROTATES with the open row. Two columns
   on desktop (visual beside the rows), stacked on narrow. Images share one
   cell and cross-fade; only the --on image is opaque. */
.ax-accordion--media { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(20px, 3vw, 44px); align-items: start; }
.ax-accordion--media .ax-accordion__rows { display: grid; gap: 4px; align-self: center; }
.ax-accordion__media {
  /* sticky so the visual stays in view while the reader scans tall rows */
  position: sticky;
  top: clamp(16px, 6vh, 96px);
  margin: 0;
  border-radius: 28px;
  overflow: hidden;
  background: var(--surface-muted, rgba(0, 0, 0, 0.04));
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 5;
}
.ax-accordion__media-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.ax-accordion__media-img--on { opacity: 1; }
@media (max-width: 860px) {
  .ax-accordion--media { grid-template-columns: 1fr; }
  .ax-accordion__media { position: relative; top: auto; aspect-ratio: 16 / 10; margin-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .ax-accordion__media-img { transition: none; }
  .ax-accordion__head::after { transition: none; }
}

/* ─────────────────────────── StatBand.css ─────────────────────────── */
/* StatBand — standalone stat band section */

.stat-band .stat-row { justify-content: center; margin-top: 0; }
.stat-band .band-head { text-align: center; max-width: 760px; margin: 0 auto 36px; }
/* StatBand tiles react to the client hue (the carousel re-skin reaches them):
   hue-tinted ground + border, value in the theme-safe accent derivative.
   Overridden by the dark-stage variant's frosted tiles below. */
.stat-band .stat {
  background: color-mix(in srgb, var(--client-primary, var(--primary)), var(--surface-card) 93%);
  border-color: color-mix(in srgb, var(--client-primary, var(--primary)), var(--border-subtle) 76%);
}
.stat-band .stat .v { color: var(--accent-text); }
/* stacked on mobile, the tiles take the row's own width instead of shrinking
   to their own label — three stacked cards read as one comparable set only
   when their edges line up */
@media (max-width: 640px) {
  .stat-band .stat-row { flex-direction: column; }
  .stat-band .stat { width: 100%; }
}

/* ===== Dark-stage stat band (StatBand background="dark-stage") ===== */
.stat-band--dark {
  background:
    radial-gradient(120% 140% at 12% 0%, rgba(255, 255, 255, 0.07), transparent 55%),
    radial-gradient(130% 120% at 88% 100%, color-mix(in srgb, var(--client-primary), transparent 78%), transparent 60%),
    var(--surface-inverse);
}
.stat-band--dark .section-h, .stat-band--dark h2 { color: #fff; }
.stat-band--dark .lead p { color: rgba(255, 255, 255, 0.85); }
.stat-band--dark .stat { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.16); }
/* frosted tiles keep their glass ground; the value carries the hue reaction
   via the on-dark accent derivative (client hue lifted toward white) */
.stat-band--dark .stat .v { color: var(--accent-on-dark); }
.stat-band--dark .stat .l { color: rgba(255, 255, 255, 0.8); }
.stat-band--dark .stat .c a { color: rgba(255, 255, 255, 0.55); }

/* ─────────────────────────── LogoWall.css ─────────────────────────── */
/* ===== Trust wall (rainbow ground: no-brand neutrality) ===== */
.trust { position: relative; background: var(--surface-muted); overflow: hidden; }
.trust::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--rainbow-gradient);
  opacity: 0.22;
  filter: blur(70px) saturate(1.05);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .trust::before { mix-blend-mode: screen; opacity: 0.3; }
}
:root[data-theme="dark"] .trust::before { mix-blend-mode: screen; opacity: 0.3; }
.trust .wrap { position: relative; z-index: 1; }
/* the wall's head (title, lead, stats) is centred over the centred grid */
.trust-head { max-width: 760px; margin: 0 auto; text-align: center; }
/* neighbourhood stats read as quiet numbers, NOT as more white cards
   competing with the logo chips: no chrome, centred */
.trust .stat-row { justify-content: center; }
.trust .stat {
  background: transparent;
  border: 0;
  box-shadow: none;
  align-items: center;
  text-align: center;
  padding: 12px 28px;
}
.trust .stat .l { max-width: 240px; }
/* The wall's tile geometry is one set of custom properties, re-declared per
   density (LogoWall picks the density from how many real marks it has) and
   again at narrow widths. Chip size, mark size and gap move together, so the
   wall stays one design from 8 logos to 60 and from 1440px to 390px. */
.logo-wall {
  --chip-w: 168px;
  --chip-h: 96px;
  --chip-pad: 16px 20px;
  --chip-radius: 16px;
  --mark-h: 42px;
  --mark-w: 124px;
  --chip-gap: 16px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--chip-gap);
  margin: 44px 0 0;
}
/* A small honest set: the largest tile, so few real marks read as deliberate
   rather than as a wall with holes in it. Nothing pads the row. */
.logo-wall--sparse {
  --chip-w: 200px;
  --chip-h: 108px;
  --chip-pad: 20px 24px;
  --mark-h: 48px;
  --mark-w: 148px;
  --chip-gap: 20px;
}
/* Breadth comes from the number of real marks, not from reducing each mark to
   a badge. Dense walls keep a compact gap while preserving enough tile and
   mark area for detailed wordmarks to remain readable. */
.logo-wall--dense {
  --chip-w: 168px;
  --chip-h: 96px;
  --chip-pad: 14px 18px;
  --chip-radius: 16px;
  --mark-h: 42px;
  --mark-w: 132px;
  --chip-gap: 14px;
}
.logo-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: var(--chip-w);
  height: var(--chip-h);
  padding: var(--chip-pad);
  border-radius: var(--chip-radius);
  background: #fff;
  border: 1px solid var(--border-subtle);
  box-shadow: var(--mk-shadow-sm);
}
a.logo-chip { text-decoration: none; transition: transform 0.15s ease, box-shadow 0.2s ease; }
a.logo-chip:hover { transform: translateY(-2px); box-shadow: var(--mk-shadow-md); }
/* `contain` keeps every mark's own aspect ratio; the radius is for the marks
   that arrive with their own opaque ground, so they sit as an inset tile
   rather than a hard rectangle inside the chip. */
.logo-chip img {
  max-height: var(--mark-h);
  max-width: var(--mark-w);
  width: auto;
  object-fit: contain;
  border-radius: 6px;
  filter: grayscale(1);
  opacity: 0.72;
}
/* Ink chip for a light-toned mark (LogoWallLogo.tone === 'light'): a white or
   pale knockout is invisible on the white chip, so its tile alone takes the
   inverse ground. Fixed ink in BOTH themes — the point is contrast under the
   mark, not theme reactivity. */
.logo-chip--ink { background: var(--surface-inverse); border-color: rgba(255, 255, 255, 0.14); }
.logo-chip--ink img { opacity: 0.86; }
.logo-chip__name {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.logo-chip--ink .logo-chip__name { color: rgba(255, 255, 255, 0.76); }
/* Name chip: a supported customer whose mark is not available. Same tile as a
   mark — the customer counts the same — with the name itself carrying the
   tile instead of an image, so nothing on the wall stands in for a logo. */
.logo-chip--name .logo-wall__name {
  display: block;
  max-width: 100%;
  color: var(--text-title);
  font-size: 16px;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-align: center;
  overflow-wrap: anywhere;
}
/* Narrow: percentage chips divide every wall into two readable columns. A
   dense set stays visibly broad through its rows without shrinking detailed
   marks into a third, illegible column. */
@media (max-width: 520px) {
  .logo-wall {
    --chip-w: 46%;
    --chip-h: 82px;
    --chip-pad: 12px 14px;
    --mark-h: 38px;
    --mark-w: 110px;
    --chip-gap: 12px;
  }
  .logo-wall--sparse {
    --chip-w: 46%;
    --chip-h: 88px;
    --mark-h: 42px;
    --mark-w: 120px;
  }
  .logo-wall--dense {
    --chip-w: 46%;
    --chip-h: 82px;
    --chip-pad: 12px 14px;
    --mark-h: 38px;
    --mark-w: 124px;
    --chip-gap: 12px;
  }
}

/* trust wall variants */

.trust--plain::before { content: none; }
.logo-wall--color .logo-chip img { filter: none; opacity: 1; }

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  .logo-chip { transition: none; }
}

/* ─────────────────────────── PathwayCards.css ─────────────────────────── */
/* ===== Pathway cards ===== */
.pathway-cards { display: grid; gap: 20px; grid-template-columns: repeat(2, 1fr); }
.pathway-cards--3 { grid-template-columns: repeat(3, 1fr); }
.pathway-card {
  position: relative;
  display: block;
  text-decoration: none;
  border-radius: 24px;
  background: var(--surface-muted);
  border: 1px solid var(--border-subtle);
  padding: clamp(28px, 3.5vw, 56px);
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
a.pathway-card:hover { transform: translateY(-2px); box-shadow: var(--mk-shadow-md); }
.pathway-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  margin-bottom: 20px;
}
.pathway-card__icon img { max-width: 30px; max-height: 30px; }
.pathway-card h3 { font-size: clamp(20px, 2vw, 26px); margin: 0 0 12px; }
.pathway-card p { margin: 0; color: var(--text-body); }
.pathway-card__more {
  position: absolute;
  right: 24px;
  bottom: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 100px;
  border: 1.5px solid var(--border-strong);
  color: var(--text-title);
  font-size: 22px;
  line-height: 1;
}
@media (max-width: 820px) { .pathway-cards, .pathway-cards--3 { grid-template-columns: 1fr; } }

/* ─────────────────────────── CaseInset.css ─────────────────────────── */
/* ===== Case inset (own-brand block, contained — never full-bleed) ===== */
.case-inset {
  border-radius: 28px;
  overflow: hidden;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--mk-shadow-md);
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  align-items: stretch;
}
/* no panel tint, no padding: the visual is a composited scene render that
   carries its own ground — it fills the panel edge to edge */
.case-inset .ci-visual { position: relative; min-height: 320px; }
.case-inset .ci-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* no visual at all: the inset degrades to a single copy column instead of
   rendering an empty 320px panel */
.case-inset--solo { grid-template-columns: 1fr; }
.case-inset .ci-copy { padding: clamp(28px, 4vw, 56px); }
/* --case-eyebrow is a min-contrast derivative of the verified hue (set by
   the component via color-mix toward the theme's title ink) — a pale brand
   hue used raw as text on the card was illegible */
.case-inset .ci-copy .eyebrow { color: var(--case-eyebrow, var(--accent-text)); }
.case-inset .ci-copy h3 { font-size: clamp(24px, 2.6vw, 34px); margin: 0 0 18px; }
.case-inset .ci-copy .caption { margin-top: 20px; }
@media (max-width: 860px) {
  .case-inset { grid-template-columns: 1fr; }
  .case-inset .ci-visual { min-height: 240px; }
}

/* ─────────────────────────── ScanLedger.css ─────────────────────────── */
/* ===== Scan ledger (per-property consent audit board, account mode) =====
   Multi-brand section: neutral token chrome, no customer hue on card chrome.
   --sl-alert / --sl-ok are SCOPED semantic UI signals (badge tints + fact
   dots only, deliberately muted) — they are not brand accents and never
   appear as fills or page accents.
   Cards are styled as OFFICIAL REPORT sheets, not marketing cards: the
   as-scanned exhibit full-bleed from the sheet's top (brand + domain
   overlaid on its ink fade), stamped CMP verdict, mono domain, ruled
   findings. The document look is the credibility. Above 6 sheets the grid
   becomes a swipeable snap strip with nav controls. */
.scan-ledger {
  --sl-alert: #c4463d;
  --sl-ok: #2e8f6b;
  --sl-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .scan-ledger { --sl-alert: #e0736b; --sl-ok: #5cbf98; }
}
:root[data-theme="dark"] .scan-ledger { --sl-alert: #e0736b; --sl-ok: #5cbf98; }
.scan-ledger .band-head { max-width: 760px; margin: 0 auto 44px; text-align: center; }
.sl-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  align-items: stretch;
}
/* above 6 sheets: a swipeable snap strip — native touch swipe, nav buttons
   for pointer users (runtime/scan-ledger.js), scrollbar hidden */
.sl-grid--carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  align-items: stretch;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.sl-grid--carousel::-webkit-scrollbar { display: none; }
.sl-grid--carousel > li { flex: 0 0 min(86vw, 360px); scroll-snap-align: start; }
.sl-nav { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.sl-nav__btn {
  appearance: none;
  cursor: pointer;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface-card);
  color: var(--text-body);
  font-size: 15px;
  line-height: 1;
}
.sl-nav__btn:hover { color: var(--text-title); border-color: var(--text-title); }
.sl-nav__btn:disabled { opacity: 0.35; cursor: default; }
.sl-nav__btn:disabled:hover { color: var(--text-body); border-color: var(--border-strong); }
/* sheet chrome follows the DS Card (24px radius, subtle 1px stroke,
   shadow-sm) — the report look lives in the mono chrome, not the border */
.sl-card,
.sl-face {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: 24px;
  box-shadow: var(--mk-shadow-sm);
  padding: 22px 24px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* compact row: a card-tier property with nothing to show below its identity
   line spans the grid as one flat row instead of an empty card body */
.sl-card--row {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 18px;
  padding: 14px 22px;
}
/* flippable sheet: the LI is a bare 3D stage — the sheet chrome moves onto
   the two faces (front report / back vendor ledger) */
.sl-card--flip {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  perspective: 1400px;
  position: relative;
}
.sl-flip {
  display: grid;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.3, 0.7, 0.25, 1);
}
.sl-card--flipped .sl-flip { transform: rotateY(180deg); }
.sl-face {
  grid-area: 1 / 1;
  min-width: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.sl-face--back { transform: rotateY(180deg); }
/* the hidden face leaves the tab order too (delay ≈ half the turn) */
.sl-card--flipped .sl-face--front,
.sl-card--flip:not(.sl-card--flipped) .sl-face--back { visibility: hidden; transition: visibility 0s 0.3s; }
/* the sheet's action footer: PDF download + flip side by side, pinned to
   the sheet's bottom edge (each face carries its own row) */
.sl-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
}
/* download + flip share ONE look and ONE fixed height — anchor vs button
   UA differences are normalized away */
.sl-flip-btn,
.sl-report {
  appearance: none;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  height: 30px;
  border: 1.5px solid var(--border-strong);
  border-radius: 6px;
  background: var(--surface-card);
  color: var(--text-body);
  font-family: var(--sl-mono);
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0 10px;
  text-decoration: none;
  white-space: nowrap;
}
.sl-flip-btn:hover,
.sl-report:hover { color: var(--text-title); border-color: var(--text-title); }
.sl-report::before { content: "↓ "; white-space: pre; }
.sl-flip-btn .sl-flip-btn__back { display: none; }
.sl-card--flipped .sl-flip-btn .sl-flip-btn__front { display: none; }
.sl-card--flipped .sl-flip-btn .sl-flip-btn__back { display: inline; }
/* identity block: brand + linked domain — a plain header on exhibit-less
   sheets, overlaid on the exhibit's ink fade when one exists */
.sl-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sl-id h3 { font-size: 19px; line-height: 1.2; margin: 0; }
/* the stamp row */
.sl-head { display: flex; align-items: flex-start; gap: 10px 12px; flex-wrap: wrap; }
/* the CMP verdict, stamped: rectangular, bordered, set in caps */
.sl-badge {
  flex: none;
  font-family: var(--sl-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1.5px solid var(--border-strong);
  color: var(--text-body);
  white-space: nowrap;
}
/* the stamp names WHAT it asserts: "CMP DETECTED: DIDOMI" — prefix quiet,
   verdict carries the tone colour */
.sl-badge em { font-style: normal; font-weight: 600; color: var(--text-muted); margin-right: 6px; }
.sl-badge--exposed {
  background: color-mix(in srgb, var(--sl-alert), transparent 92%);
  border-color: color-mix(in srgb, var(--sl-alert), transparent 45%);
  color: var(--sl-alert);
}
/* already-Axeptio properties: rainbow ring — the house no-brand accent */
.sl-badge--axeptio {
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--surface-card), var(--surface-card)) padding-box,
    var(--rainbow-gradient-full) border-box;
  color: var(--text-title);
}
.sl-domain {
  font-family: var(--sl-mono);
  font-size: 12.5px;
  color: var(--text-muted);
  text-decoration: none;
  width: fit-content;
}
.sl-domain:hover { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
/* the evidence exhibit: the property AS SCANNED — the capture run's viewport
   frame (consent layer in place), FULL-WIDTH from the sheet's top (it
   escapes the face padding), with the identity block overlaid on an ink
   fade so brand + domain read over any page screenshot. A scan record,
   never decorative widget imagery. */
.sl-exhibit {
  position: relative;
  margin: -22px -24px 0;
  border-radius: 23px 23px 0 0;
  overflow: hidden;
  background: var(--surface-muted);
  border-bottom: 1px solid var(--border-subtle);
}
/* screenshots are documents: full-bleed, pinned to the page top, no padding */
.sl-exhibit img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.sl-exhibit__id {
  position: absolute;
  inset: 0 0 auto 0;
  margin: 0;
  padding: 16px 20px 30px;
  background: linear-gradient(rgba(17, 17, 19, 0.78), rgba(17, 17, 19, 0.4) 62%, transparent);
}
.sl-exhibit__id h3 { color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45); }
.sl-exhibit__id .sl-domain { color: rgba(255, 255, 255, 0.82); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45); }
.sl-exhibit__id .sl-domain:hover { color: #fff; }
.sl-facts { list-style: none; margin: 0; padding: 0; }
.sl-facts-label {
  margin: 2px 0 0;
  font-family: var(--sl-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
/* findings as ruled report lines */
.sl-facts li { position: relative; padding: 8px 0 8px 18px; font-size: 14.5px; line-height: 1.45; }
.sl-facts li + li { border-top: 1px solid var(--border-subtle); }
.sl-facts li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: calc(8px + 0.52em);
  width: 7px;
  height: 7px;
  border-radius: 100px;
  background: var(--border-strong);
}
.sl-fact--alert::before { background: var(--sl-alert); }
.sl-fact--ok::before { background: var(--sl-ok); }
.sl-fact--alert { color: var(--text-title); }
/* vendor ledger (back face): digest vendor names as mono chips, the group
   tone carried by the chip dot */
.sl-vendors { list-style: none; margin: 0; padding: 2px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sl-vendors li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--border-subtle);
  border-radius: 5px;
  padding: 3px 9px;
  font-family: var(--sl-mono);
  font-size: 11.5px;
  color: var(--text-body);
}
.sl-vendors li::before { content: ""; width: 6px; height: 6px; border-radius: 100px; background: var(--border-strong); }
.sl-vendors--alert li::before { background: var(--sl-alert); }
.sl-vendors--ok li::before { background: var(--sl-ok); }
.sl-card .caption { margin-top: 2px; }
/* quiet note line (crawl caveats on the front; counts + scan date on the
   detailed-results face) — plain small text, pinned above the action row */
.sl-note {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-muted);
}
.sl-unverified { margin: 24px auto 0; max-width: 860px; text-align: center; font-size: 13px; color: var(--text-muted); line-height: 1.6; }

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  /* the vendor-ledger flip becomes an instant swap */
  .sl-flip { transition: none; }
  .sl-card--flipped .sl-face--front,
  .sl-card--flip:not(.sl-card--flipped) .sl-face--back { transition: none; }
}

/* ─────────────────────────── ShakeMethod.css ─────────────────────────── */
/* ===== Shake methodology (the "how a scan works" trust block) =====
   Follows the ScanLedger on the page and speaks its document language:
   mono numerals, ruled steps, a specimen scan-record sheet. Axeptio-tech
   band — NO customer hue; the one accent is the rainbow ring on the
   specimen (house no-brand accent, like the trust wall). */
.shake-method { --shake-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace; }
.shake-method .band-head { max-width: 760px; margin: 0 auto 44px; text-align: center; }
.shake-cols {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.shake-cols--solo { grid-template-columns: 1fr; max-width: 760px; margin: 0 auto; }
.shake-steps { list-style: none; margin: 0; padding: 0; }
.shake-step { display: flex; gap: 18px; padding: 20px 0; }
.shake-step + .shake-step { border-top: 1px solid var(--border-subtle); }
.shake-step__num {
  flex: none;
  font-family: var(--shake-mono);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding-top: 4px;
  min-width: 30px;
}
.shake-step h3 { font-size: 19px; line-height: 1.25; margin: 0 0 6px; }
.shake-step p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text-body); }
/* the specimen: one real scan record as a document sheet */
/* the rainbow RING (never a one-sided rule) is the house no-brand accent */
.shake-record {
  background: var(--surface-card);
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--surface-card), var(--surface-card)) padding-box,
    var(--rainbow-gradient-full) border-box;
  border-radius: 10px;
  box-shadow: var(--mk-shadow-sm);
  padding: 20px 22px;
}
.shake-record__head {
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-subtle);
  font-family: var(--shake-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.shake-record__grid { margin: 0; display: grid; gap: 0; }
.shake-record__grid > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
}
.shake-record__grid > div + div { border-top: 1px solid var(--border-subtle); }
.shake-record__grid dt {
  font-family: var(--shake-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.shake-record__grid dd { margin: 0; font-weight: 600; font-size: 14.5px; color: var(--text-title); text-align: right; }
.shake-record__note {
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.5;
}
.shake-cta { display: flex; justify-content: center; margin-top: 36px; }
@media (max-width: 900px) {
  .shake-cols { grid-template-columns: 1fr; gap: 36px; }
}

/* ─────────────────────────── DocumentsLedger.css ─────────────────────────── */
/* ===== Documents ledger (published legal documents, account mode) =====
   The ScanLedger's twin for what a target PUBLISHES: one REPORT SHEET per
   contractual/legal document (terms, privacy policy, cookie policy, legal
   notice), in the same document language as the scan board — mono kind
   kicker and filing strip, stamped verdict, ruled findings, a verbatim
   excerpt when the document's own words carry the point. Multi-brand
   section: neutral token chrome, no customer hue on sheet chrome.
   --dl-alert / --dl-ok are SCOPED semantic UI signals (stamp tints + fact
   dots only, deliberately muted) — never fills, never page accents.
   The closing Terms panel wears the RAINBOW RING (the house no-brand
   accent, as on BeforeAndAfter's AFTER panel): the outcome is Axeptio. */
.doc-ledger {
  --dl-alert: #c4463d;
  --dl-ok: #2e8f6b;
  --dl-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .doc-ledger { --dl-alert: #e0736b; --dl-ok: #5cbf98; }
}
:root[data-theme="dark"] .doc-ledger { --dl-alert: #e0736b; --dl-ok: #5cbf98; }
.doc-ledger .band-head { max-width: 760px; margin: 0 auto 44px; text-align: center; }
.dl-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  align-items: stretch;
}
/* sheet chrome follows the DS Card (24px radius, subtle 1px stroke,
   shadow-sm) — the document look lives in the mono chrome, not the border */
.dl-sheet {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: 24px;
  box-shadow: var(--mk-shadow-sm);
  padding: 24px 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* a document already served through Terms is the outcome on the board:
   the house rainbow ring, exactly like the Terms panel below */
.dl-sheet--axeptio {
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--surface-card), var(--surface-card)) padding-box,
    var(--rainbow-gradient-full) border-box;
}
.dl-kind {
  margin: 0;
  font-family: var(--dl-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.dl-title { font-size: 20px; line-height: 1.2; margin: 0; }
.dl-property {
  margin: 0;
  font-family: var(--dl-mono);
  font-size: 12.5px;
  color: var(--text-muted);
}
/* the verdict, stamped: rectangular, bordered, set in caps — the sheet's
   one-line reading of the document as published */
.dl-badge {
  align-self: flex-start;
  margin: 2px 0 0;
  font-family: var(--dl-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1.5px solid var(--border-strong);
  color: var(--text-body);
}
.dl-badge em { font-style: normal; font-weight: 600; color: var(--text-muted); margin-right: 6px; }
.dl-badge--missing,
.dl-badge--outdated,
.dl-badge--opaque {
  background: color-mix(in srgb, var(--dl-alert), transparent 92%);
  border-color: color-mix(in srgb, var(--dl-alert), transparent 45%);
  color: var(--dl-alert);
}
.dl-badge--sound {
  background: color-mix(in srgb, var(--dl-ok), transparent 92%);
  border-color: color-mix(in srgb, var(--dl-ok), transparent 45%);
  color: var(--dl-ok);
}
/* already on Terms: the rainbow ring — the house no-brand accent */
.dl-badge--axeptio {
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--surface-card), var(--surface-card)) padding-box,
    var(--rainbow-gradient-full) border-box;
  color: var(--text-title);
}
/* the filing strip: what the document itself states (date, version, format) */
.dl-meta { margin: 4px 0 0; display: grid; gap: 0; }
.dl-meta > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
}
.dl-meta > div + div { border-top: 1px solid var(--border-subtle); }
.dl-meta dt {
  font-family: var(--dl-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.dl-meta dd { margin: 0; font-weight: 600; font-size: 14px; color: var(--text-title); text-align: right; }
.dl-facts-label {
  margin: 2px 0 0;
  font-family: var(--dl-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
/* findings as ruled report lines */
.dl-facts { list-style: none; margin: 0; padding: 0; }
.dl-facts li { position: relative; padding: 8px 0 8px 18px; font-size: 14.5px; line-height: 1.45; }
.dl-facts li + li { border-top: 1px solid var(--border-subtle); }
.dl-facts li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: calc(8px + 0.52em);
  width: 7px;
  height: 7px;
  border-radius: 100px;
  background: var(--border-strong);
}
.dl-fact--alert::before { background: var(--dl-alert); }
.dl-fact--ok::before { background: var(--dl-ok); }
.dl-fact--alert { color: var(--text-title); }
/* the verbatim passage: quiet quoted specimen on the muted surface */
.dl-excerpt { margin: 4px 0 0; }
.dl-excerpt blockquote { margin: 6px 0 0; padding: 12px 16px; border-radius: 14px; background: var(--surface-muted); }
.dl-excerpt blockquote p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-body); }
.dl-excerpt blockquote p::before { content: "\201C"; }
.dl-excerpt blockquote p::after { content: "\201D"; }
.dl-excerpt blockquote p:lang(fr)::before { content: "\00AB\2009"; }
.dl-excerpt blockquote p:lang(fr)::after { content: "\2009\00BB"; }
.dl-excerpt blockquote p:lang(de)::before { content: "\201E"; }
.dl-excerpt blockquote p:lang(de)::after { content: "\201C"; }
.dl-note { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-muted); }
/* the link to the document, pinned to the sheet's bottom edge — same chip as
   the scan board's actions (one look, one fixed height) */
.dl-actions { display: flex; justify-content: flex-end; margin: auto 0 0; padding-top: 8px; }
.dl-open {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  height: 30px;
  border: 1.5px solid var(--border-strong);
  border-radius: 6px;
  background: var(--surface-card);
  color: var(--text-body);
  font-family: var(--dl-mono);
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0 10px;
  text-decoration: none;
  white-space: nowrap;
}
.dl-open:hover { color: var(--text-title); border-color: var(--text-title); }
.dl-open::after { content: " \2197"; white-space: pre; }
/* the Terms panel: the outcome, on the house rainbow ring */
.dl-remedy {
  margin-top: 28px;
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--surface-card), var(--surface-card)) padding-box,
    var(--rainbow-gradient-full) border-box;
  border-radius: 24px;
  box-shadow: var(--mk-shadow-md);
  padding: clamp(28px, 3.4vw, 48px);
}
.dl-remedy__illo { width: 96px; height: auto; margin: 0 0 18px; }
.dl-remedy__eyebrow {
  margin: 0 0 10px;
  font: 700 12.5px var(--font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.dl-remedy h3 { font-size: clamp(24px, 2.6vw, 34px); margin: 0 0 10px; }
.dl-remedy__sub { margin: 0 0 22px; font-weight: 700; font-size: 15.5px; color: var(--text-title); line-height: 1.4; }
.dl-remedy__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.dl-remedy__list li { position: relative; padding-left: 30px; font-size: 15px; line-height: 1.5; color: var(--text-body); }
.dl-remedy__list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: -1px;
  font-weight: 800;
  font-size: 16px;
  color: var(--dl-ok);
}
@media (max-width: 820px) {
  .dl-remedy__list { grid-template-columns: 1fr; }
}

/* ─────────────────────────── PluginSpotlight.css ─────────────────────────── */
/* ===== Plugin spotlight (the "killer plugin" act) =====
   The target's detected platform meets Axeptio's first-class plugin for it.
   Copy + ruled capability list left, the identity PLATE right: platform mark
   on a neutral chip, cited adoption stat, marketplace pill + rating. The
   plate wears the RAINBOW RING (the plugin is Axeptio tech — the house
   no-brand accent, the ShakeMethod-specimen precedent); the only other
   accent is the page's client hue (capability dots via --accent-text, the
   primary pill). Platform identity lives in the mark alone — never a
   per-platform brand colour channel. */
.plugin-spotlight .ps-cols {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.ps-caps { list-style: none; margin: 28px 0 0; padding: 0; }
.ps-cap { position: relative; padding: 16px 0 16px 22px; }
.ps-cap + .ps-cap { border-top: 1px solid var(--border-subtle); }
/* the capability dot reacts to the client re-skin (theme-safe derivative) */
.ps-cap::before {
  content: '';
  position: absolute;
  left: 0;
  top: 24px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-text);
}
.ps-cap h3 { font-size: 18px; line-height: 1.3; margin: 0 0 4px; }
.ps-cap p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text-body); }
.ps-aside { display: grid; gap: 24px; }
.ps-visual .figframe img { width: 100%; display: block; }
/* the plate: DS card chrome carrying the house rainbow ring */
.ps-plate {
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--surface-card), var(--surface-card)) padding-box,
    var(--rainbow-gradient-full) border-box;
  border-radius: 24px;
  box-shadow: var(--mk-shadow-sm);
  padding: clamp(22px, 3vw, 32px);
}
.ps-plate__identity {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 16px;
}
/* the platform mark chip follows the logo-chip contract: neutral light
   ground by default, ink ground for a light-knockout mark (tone data) */
.ps-mark {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--border-subtle);
}
.ps-mark img { max-width: 44px; max-height: 44px; width: auto; height: auto; object-fit: contain; }
.ps-mark--ink { background: var(--surface-inverse); border-color: rgba(255, 255, 255, 0.14); }
.ps-mark--word {
  width: auto;
  min-width: 64px;
  padding: 0 14px;
  font-weight: 800;
  font-size: 15px;
  color: var(--text-title);
}
.ps-plate__name { font-weight: 700; font-size: 18px; color: var(--text-title); }
/* the adoption stat drops its tile chrome inside the plate (no nested card) */
.ps-plate .stat { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.ps-plate__actions { margin-top: 18px; }
.ps-rating { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 14px; }
.ps-rating__value { font-weight: 700; color: var(--text-title); }
.ps-rating__cite { font-size: 12.5px; color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; }
.ps-rating__cite:hover { color: var(--accent-text); }
@media (max-width: 900px) {
  .plugin-spotlight .ps-cols { grid-template-columns: 1fr; gap: 36px; }
}

/* ─────────────────────────── BeforeAndAfter.css ─────────────────────────── */
/* ===== Before / after (estate consolidation: multi-CMP → one Axeptio) =====
   Two pricing-idiom panels on the DS Card chrome. BEFORE stays muted with
   alert × marks; AFTER wears the rainbow ring (house no-brand accent — the
   outcome is Axeptio, never a customer hue). */
.ba-cols {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(16px, 2.5vw, 28px);
  align-items: stretch;
  position: relative;
}
.ba-panel {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: 24px;
  box-shadow: var(--mk-shadow-sm);
  padding: clamp(28px, 3.4vw, 44px);
  display: flex;
  flex-direction: column;
}
.ba-panel--before { background: var(--surface-muted); box-shadow: none; }
/* The ring runs along the panel's LONG axis. The stock token gradient is
   near-horizontal (120deg), and a border sampling that axis on a panel much
   taller than it is wide shows only the red→green slice: pink at the top,
   green at the bottom, no yellow band and no blue. --ba-ring-angle turns
   with the layout instead — near-vertical while the two panels stand side by
   side, back to the house angle once they stack and each panel is wider than
   it is tall — so all four house stops read whatever the shape. */
.ba-panel--after {
  --ba-ring-angle: 200deg;
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--surface-card), var(--surface-card)) padding-box,
    linear-gradient(
      var(--ba-ring-angle),
      var(--rainbow-red),
      var(--rainbow-yellow) 28%,
      var(--rainbow-green) 60%,
      var(--rainbow-blue) 100%
    ) border-box;
  box-shadow: var(--mk-shadow-md);
}
.ba-illo { width: 96px; height: auto; margin: 0 0 18px; }
.ba-eyebrow {
  margin: 0 0 10px;
  font: 700 12.5px var(--font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ba-panel--after .ba-eyebrow { color: var(--accent-text); }
.ba-panel h3 { font-size: clamp(26px, 2.8vw, 38px); margin: 0 0 10px; }
.ba-sub { margin: 0 0 20px; font-weight: 700; font-size: 15.5px; color: var(--text-title); line-height: 1.4; }
.ba-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; align-content: start; }
.ba-list li { position: relative; padding-left: 30px; font-size: 15px; line-height: 1.5; color: var(--text-body); }
.ba-list li::before {
  position: absolute;
  left: 0;
  top: -1px;
  font-weight: 800;
  font-size: 16px;
}
.ba-panel--before .ba-list li::before { content: "×"; color: var(--ba-alert, #c4463d); }
.ba-panel--after .ba-list li::before { content: "✓"; color: var(--ba-ok, #2e8f6b); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .before-after { --ba-alert: #e0736b; --ba-ok: #5cbf98; }
}
:root[data-theme="dark"] .before-after { --ba-alert: #e0736b; --ba-ok: #5cbf98; }
/* the turn: a ringed chip between the panels */
.ba-arrow {
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 100px;
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--surface-card), var(--surface-card)) padding-box,
    var(--rainbow-gradient-full) border-box;
  box-shadow: var(--mk-shadow-sm);
  font: 800 20px var(--font-display);
  color: var(--text-title);
}
@media (max-width: 900px) {
  .ba-cols { grid-template-columns: 1fr; }
  /* stacked, the panel is wider than it is tall: the long axis is horizontal
     again, so the ring returns to the house angle */
  .ba-panel--after { --ba-ring-angle: 120deg; }
  .ba-arrow { transform: rotate(90deg); justify-self: center; margin: -4px 0; }
}

/* ─────────────────────────── BookingCTA.css ─────────────────────────── */
/* ===== BookingCTA — dedicated-interlocutor booking act =====================
   The account's named human beside their live HubSpot meetings calendar, on
   the house RAINBOW ground (no-brand neutrality — same recipe as the trust
   wall). The person card wears the Axeptio WIDGET's anatomy: "certified"
   strip, full-bleed media zone, white scoop curve (mascot peeking over
   it), conversational greeting + bold name, and a bottom action bar. Like
   the real widget, the card SKINS ITSELF with the page's client hue
   (--client-primary / --client-on-primary; default = Axeptio yellow when
   no hue is set). Calendar panel follows DS card chrome; 8px rhythm. */
.booking { position: relative; background: var(--surface-muted); overflow: hidden; }
.booking::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--rainbow-gradient);
  opacity: 0.22;
  filter: blur(70px) saturate(1.05);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .booking::before { mix-blend-mode: screen; opacity: 0.3; }
}
:root[data-theme="dark"] .booking::before { mix-blend-mode: screen; opacity: 0.3; }
.booking .wrap { position: relative; z-index: 1; }
.booking .band-head { text-align: center; max-width: 720px; margin: 0 auto; }
.booking-grid {
  display: grid;
  grid-template-columns: minmax(280px, 360px) 1fr;
  gap: 24px;
  align-items: start;
  justify-content: center;
  margin-top: 32px;
}
.booking-person {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: 24px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.bp-cert {
  margin: 0;
  padding: 12px 24px;
  background: var(--client-primary, var(--primary));
  color: var(--client-on-primary, var(--secondary));
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.bp-media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: color-mix(in srgb, var(--client-primary, var(--primary)), var(--surface-muted) 78%);
  display: grid;
  place-items: center;
}
.bp-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bp-photo--initials {
  font: 700 44px/1 var(--font-display, sans-serif);
  color: var(--text-title);
  opacity: 0.85;
}
/* white scoop curving up over the media zone — the widget's card seam */
.bp-body {
  position: relative;
  z-index: 1;
  margin-top: -26px;
  padding: 24px 24px 20px;
  background: var(--surface-card);
  border-top-left-radius: 50% 26px;
  border-top-right-radius: 50% 26px;
}
.bp-mascot {
  position: absolute;
  right: 16px;
  top: -52px;
  width: 76px;
  height: auto;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.18));
}
.bp-hi { margin: 0; font-size: 15px; color: var(--text-muted); }
.bp-name { margin: 2px 0 0; font-size: 24px; line-height: 1.15; color: var(--text-title); }
.bp-role { margin: 4px 0 0; font-size: 14px; font-weight: 600; color: var(--text-muted); }
.bp-quote { margin: 14px 0 0; padding: 0; border: 0; background: none; }
.bp-quote p { margin: 0; font-size: 15px; color: var(--text-body); line-height: 1.55; }
.bp-quote p::before { content: "\201C"; }
.bp-quote p::after { content: "\201D"; }
/* quote glyphs follow the page language (SSG stamps <html lang>): French
   gets guillemets with a thin space, German its low-9/high-6 pair */
.bp-quote p:lang(fr)::before { content: "\00AB\2009"; }
.bp-quote p:lang(fr)::after { content: "\2009\00BB"; }
.bp-quote p:lang(de)::before { content: "\201E"; }
.bp-quote p:lang(de)::after { content: "\201C"; }
/* widget bottom action bar: ghost beside the yellow primary, ruled seam */
.bp-actions {
  display: flex;
  gap: 8px;
  padding: 12px;
  margin-top: auto;
  border-top: 1px solid var(--border-subtle);
}
.bp-pill {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: var(--surface-card);
  box-shadow: var(--shadow-sm);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-title);
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bp-pill:hover { background: var(--surface-muted); }
.bp-pill--primary {
  background: var(--client-primary, var(--primary));
  border-color: var(--client-primary, var(--primary));
  color: var(--client-on-primary, var(--secondary));
}
.bp-pill--primary:hover { background: color-mix(in srgb, var(--client-primary, var(--primary)), black 6%); }
.bp-pill:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #14151a; /* two-tone white-over-ink, the house ring */
}
.booking-cal {
  position: relative;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: 24px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  height: 560px;
}
.booking-cal::before {
  content: "Live availability calendar";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--text-muted);
  font-size: 14px;
}
.bp-cal-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
/* --- native scheduler (runtime/booking.js): our own DS-styled render of the
   meetings link — HubSpot's embed is not reskinnable. The .bkc-* tree is
   built by the runtime; statically the panel holds only .bkc-status with the
   no-JS/fallback link. */
.booking-cal--native { display: flex; flex-direction: column; }
.booking-cal--native::before { content: none; } /* the static .bkc-status link owns the empty state */
.bkc-status { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; font-size: 14px; color: var(--text-muted); }
.bkc-status a, .bkc-fallback { color: var(--accent-text); font-weight: 600; }
.bkc-pane, .bkc-form { position: absolute; inset: 0; z-index: 1; background: var(--surface-card); display: flex; flex-direction: column; overflow-y: auto; }
/* calendar mode runs tight — the grid is the chrome; form mode keeps real padding */
.bkc-pane { padding: 14px 16px 16px; }
.bkc-form { padding: 24px 26px; }
.bkc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bkc-month { margin: 0; font-size: 17px; color: var(--text-title); text-transform: capitalize; }
.bkc-nav {
  width: 34px; height: 34px; border-radius: 100px; border: 1px solid var(--border-subtle);
  background: transparent; color: var(--text-title); font-size: 18px; line-height: 1; cursor: pointer;
}
.bkc-nav:hover:not(:disabled) { background: var(--surface-muted); }
.bkc-nav:disabled { opacity: 0.35; cursor: default; }
.bkc-durations { display: flex; gap: 8px; margin-top: 10px; }
.bkc-duration {
  padding: 6px 14px; border-radius: 100px; border: 1px solid var(--border-subtle);
  background: transparent; color: var(--text-body); font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.bkc-duration--active { background: var(--text-title); border-color: var(--text-title); color: var(--surface-card); }
.bkc-dow, .bkc-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  width: 100%;
  max-width: 420px; /* keeps day cells finger-sized on wide panels (cells are square — wider = taller = pane scroll) */
  margin-left: auto;
  margin-right: auto;
}
.bkc-dow { margin-top: 12px; }
.bkc-dow-cell { text-align: center; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.bkc-grid { margin-top: 6px; }
.bkc-day {
  aspect-ratio: 1; border-radius: 100px; border: 0; background: transparent;
  font-size: 13.5px; font-weight: 600; color: var(--text-title); cursor: pointer;
}
.bkc-day:hover:not(:disabled) { background: var(--surface-muted); }
.bkc-day--off { color: var(--text-muted); opacity: 0.45; cursor: default; }
.bkc-day--active { background: var(--text-title); color: var(--surface-card); }
.bkc-day--active:hover:not(:disabled) { background: var(--text-title); }
.bkc-slots { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; overflow-y: auto; }
.bkc-slot {
  padding: 8px 14px; border-radius: 100px; border: 1px solid var(--border-strong);
  background: transparent; color: var(--text-title); font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.bkc-slot:hover { background: var(--surface-muted); }
.bkc-empty { margin: 16px 0 0; font-size: 14px; color: var(--text-muted); }
.bkc-when { margin: 0 0 14px; font-size: 14.5px; font-weight: 600; color: var(--text-title); }
/* two-column field grid so the link's full form fits the panel unscrolled;
   selects carry long bilingual labels and span the row */
.bkc-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bkc-field--wide { grid-column: 1 / -1; }
.bkc-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bkc-field-label { font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em; color: var(--text-muted); }
.bkc-input {
  padding: 9px 12px; border-radius: 10px; border: 1px solid var(--border-subtle);
  background: var(--surface-page); color: var(--text-title); font: inherit; font-size: 14px;
}
.bkc-input:focus-visible,
.bkc-nav:focus-visible, .bkc-duration:focus-visible, .bkc-day:focus-visible,
.bkc-slot:focus-visible, .bkc-back:focus-visible, .bkc-submit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #14151a; /* two-tone white-over-ink, the house ring */
}
.bkc-form-row { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; }
.bkc-back {
  padding: 9px 18px; border-radius: 100px; border: 1px solid var(--border-subtle);
  background: transparent; color: var(--text-body); font-size: 14px; font-weight: 600; cursor: pointer;
}
.bkc-submit {
  padding: 9px 20px; border-radius: 100px; border: 0; cursor: pointer;
  background: var(--text-title); color: var(--surface-card); font-size: 14px; font-weight: 700;
}
.bkc-submit:disabled { opacity: 0.6; cursor: default; }
.bkc-form-error { margin: 12px 0 0; font-size: 13.5px; color: var(--text-body); }
.bkc-done { position: absolute; inset: 0; z-index: 1; background: var(--surface-card); display: grid; place-content: center; text-align: center; padding: 28px; }
.bkc-done-title { margin: 0; font-size: 24px; color: var(--text-title); }
.bkc-done-body { margin: 10px 0 0; font-size: 14.5px; color: var(--text-body); max-width: 380px; }
@media (max-width: 860px) {
  .booking-grid { grid-template-columns: 1fr; }
  .booking-cal { height: 500px; } /* calendar content ends ~460px at 390w; busy days scroll .bkc-slots internally */
}
@media (max-width: 560px) {
  .bkc-fields { grid-template-columns: 1fr; } /* half-columns get too narrow to type in */
}

/* ─────────────────────────── ReviewBand.css ─────────────────────────── */
/* ===== Review band (verbatim third-party social proof) ==========
   1–3 review cards — DS card chrome, the verbatim quote as the body,
   attribution + segment, provider chip linking to the public review. The
   QUOTES stay documents (verbatim, no provider brand colour); the band sits
   on the house rainbow ground and its star fill takes the client-hue accent
   so it reacts to the carousel re-skin. .stars is the shared rating glyph
   (the exported Stars component) — PullQuote renders it too. */

.stars { position: relative; display: inline-block; line-height: 1; font-size: 17px; letter-spacing: 2px; color: var(--border-strong); }
.stars__fill { position: absolute; inset: 0; overflow: hidden; white-space: nowrap; color: var(--text-title); }
.review-band .stars__fill { color: var(--accent-text); }
.review-band .band-head { text-align: center; max-width: 760px; margin: 0 auto 40px; }
.review-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
}
.review-grid--1 { grid-template-columns: minmax(0, 720px); justify-content: center; }
.review-grid--2 { grid-template-columns: repeat(2, minmax(0, 520px)); justify-content: center; }
.review-card {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.6vw, 36px);
  border-radius: 24px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--mk-shadow-sm);
}
.rv-top { display: flex; align-items: baseline; gap: 12px; }
.rv-provider {
  margin-left: auto;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
a.rv-provider { text-decoration: underline; text-underline-offset: 3px; }
a.rv-provider:hover { color: var(--text-title); }
.rv-date { font-size: 12.5px; color: var(--text-muted); }
.rv-quote { margin: 18px 0 0; }
.rv-quote p { margin: 0; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.55; color: var(--text-title); }
.rv-who { margin-top: auto; padding-top: 20px; display: flex; flex-direction: column; gap: 2px; }
.rv-name { font-weight: 700; font-size: 14.5px; color: var(--text-title); }
.rv-role, .rv-seg { font-size: 13px; color: var(--text-muted); }
@media (max-width: 900px) {
  .review-grid, .review-grid--2 { grid-template-columns: 1fr; justify-content: stretch; }
}

/* ─────────────────────────── PullQuote.css ─────────────────────────── */
/* ===== Pull quote (one voice given the weight of a band) =====
   Large centred display quote, attribution beneath. Keeps ink stars (the
   default .stars__fill from ReviewBand.css). */

.pull-quote .pq { margin: 0; max-width: 900px; margin-inline: auto; text-align: center; }
.pull-quote blockquote { margin: 0; }
.pull-quote blockquote p {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(24px, 3.2vw, 42px);
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--text-title);
  margin: 0;
}
.pull-quote blockquote p::before { content: "\201C"; }
.pull-quote blockquote p::after { content: "\201D"; }
/* locale-aware quote glyphs, same pattern as .bp-quote */
.pull-quote blockquote p:lang(fr)::before { content: "\00AB\2009"; }
.pull-quote blockquote p:lang(fr)::after { content: "\2009\00BB"; }
.pull-quote blockquote p:lang(de)::before { content: "\201E"; }
.pull-quote blockquote p:lang(de)::after { content: "\201C"; }
.pull-quote .stars { margin-top: 22px; }
.pq-attr { margin-top: 18px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
/* The review platform's mark (Trustpilot, G2), between the stars and the
   name: small, on its own white plate, fixed white in BOTH themes the way a
   .logo-chip is — the plate is there for contrast under the mark, not for
   theme reactivity, and on the light page ground it reads as no plate at all.
   Sized well under the name's line so the mark stays a letterhead and the
   quote keeps the weight. */
.pq-platform {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  margin-bottom: 12px;
  border-radius: 10px;
  background: #fff;
}
.pq-platform img { max-height: 22px; max-width: 132px; width: auto; object-fit: contain; }
/* white/light knockout mark: its plate takes the ink ground instead */
.pq-platform--ink { background: var(--surface-inverse); }
.pq-name { font-weight: 700; font-size: 15.5px; color: var(--text-title); }
.pq-role { font-size: 14px; color: var(--text-muted); }
.pq-source { font-size: 12.5px; color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; margin-top: 6px; }
.pq-source:hover { color: var(--accent-text); }

/* ─────────────────────────── MarginNote.css ─────────────────────────── */
/* ===== Margin note (the small aside an author drops beside a claim) ===== */

/* quiet by construction: small text, hue-tinted quiet surface, full subtle
   ring (accents are rings or in-flow rules, never a one-sided bar). The
   ground reacts to the client hue — a light wash of --client-primary over
   the muted surface, so the aside re-tints as the carousel re-skins while
   staying an annotation, not a highlight. */
.margin-note {
  display: block;
  margin: 20px 0 0;
  padding: 14px 18px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--client-primary, var(--primary)), var(--surface-muted) 93%);
  border: 1px solid color-mix(in srgb, var(--client-primary, var(--primary)), var(--border-subtle) 80%);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-body);
  max-width: 560px;
}
.band--muted .margin-note, .cta-card .margin-note {
  background: color-mix(in srgb, var(--client-primary, var(--primary)), var(--surface-card) 93%);
}
/* inside a centred `.band-head` lead, the note follows the same axis as the
   eyebrow/headline/lead above it instead of hugging the head's left edge */
.band-head .margin-note { margin-left: auto; margin-right: auto; }
.mn-label {
  display: block;
  margin-bottom: 4px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-body);
}

/* ─────────────────────────── SourcesFooter.css ─────────────────────────── */
/* ===== Footer / sources ===== */
footer.site-footer { background: var(--surface-inverse); color: rgba(255, 255, 255, 0.72); padding: clamp(48px, 7vw, 80px) 0; }
footer.site-footer .wrap { display: grid; grid-template-columns: 1.1fr 1.4fr; gap: 40px; }
@media (max-width: 820px) { footer.site-footer .wrap { grid-template-columns: 1fr; gap: 28px; } }
footer .foot-brand img { height: 30px; width: auto; margin-bottom: 16px; }
footer .foot-brand p { font-size: 14px; color: rgba(255, 255, 255, 0.55); max-width: 320px; }
/* The optional closing action, under the wordmark and tagline. The tagline
   carries no bottom margin of its own beyond the UA's, so the row states the
   gap it wants; the pills themselves are the shared `.btn-row` / `.ax-btn`
   primitives (white glass + ghost-on-dark — the band belongs to no brand). */
footer .foot-actions { margin-top: 24px; }
footer .sources-label {
  font-family: var(--font-display);
  font-weight: 700;
  color: #fff;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 14px;
}
footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
footer ul a {
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  text-decoration: none;
  line-height: 1.4;
  border-bottom: 1px solid transparent;
}
footer ul a:hover { color: #fff; border-bottom-color: rgba(255, 255, 255, 0.4); }
footer .prod-note { margin-top: 22px; font-size: 12.5px; color: rgba(255, 255, 255, 0.42); }