/* =====================================================================
   composer/variants.css — RICH per-variant styles.

   The V3 richness layer. A variant that needs bespoke structure/animation
   (the kind V1 achieved with per-template CSS) puts it here, scoped to its
   own class. The ONE rule that keeps it maintainable + theme-correct:
   colour / font / radius / shadow come from --ds-* tokens ONLY — so every
   rich variant is dark-mode-correct + reskins with the theme for free
   (run `manage.py composer_lint_tokens --path static/css/composer/variants.css`).
   Layout, keyframes, masks, transforms are unconstrained.

   Loaded site-wide (like primitives.css); the ~tier-1 rich looks live here.
   ===================================================================== */

/* ── hero · marquee — giant scrolling keyword bands behind centred copy ──────
   Faithful to V1's _hero_marquee: huge type bands drift behind the content,
   alternating direction. Colour is --ds-text-strong at low alpha, so it's a
   quiet texture in light AND dark. Content sits on z-index 1. */
.cxv-marquee {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: clamp(520px, 82vh, 860px);
  display: flex; align-items: center;
}
.cxv-mq-bands {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(.35rem, 1.8vh, 1.35rem); overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
}
.cxv-mq-row {
  display: inline-flex; width: max-content; gap: 2.5rem; white-space: nowrap;
  font-family: var(--ds-font-heading, system-ui, sans-serif);
  font-weight: 800; line-height: 1; letter-spacing: -0.02em; text-transform: uppercase;
  font-size: clamp(3rem, 10vw, 8.5rem);
  color: color-mix(in srgb, var(--ds-text-strong, #0f172a) 8%, transparent);
  animation: cxv-mq-scroll 36s linear infinite; will-change: transform;
}
.cxv-mq-row--rev { animation-direction: reverse; }
.cxv-mq-row span { padding-inline-end: 2.5rem; }
.cxv-mq-content { position: relative; z-index: 1; }
@keyframes cxv-mq-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .cxv-mq-row { animation: none; }
  .cxv-mq-bands { flex-wrap: wrap; }
}

/* ── hero · terminal — code-terminal window (always-dark screen, mono) ──────── */
.cxv-term-win { max-width:62rem; margin-inline:auto; border-radius:var(--ds-card-radius,14px); overflow:hidden;
  background:var(--ds-surface,#fff); border:1px solid var(--ds-border,rgba(148,163,184,.2));
  box-shadow:0 30px 70px -30px rgba(2,6,23,.7); font-family:var(--ds-font-mono, ui-monospace,SFMono-Regular,Menlo,monospace); }
.cxv-term-bar { display:flex; align-items:center; gap:.75rem; padding:.6rem .9rem;
  background:var(--ds-surface-2,#f1f5f9); border-bottom:1px solid var(--ds-border,rgba(148,163,184,.2)); }
.cxv-term-dots { display:flex; gap:.4rem; } .cxv-term-dots i { width:11px; height:11px; border-radius:var(--ds-radius-full,50%); background:color-mix(in srgb,var(--ds-text-muted,#64748b) 45%,transparent); }
.cxv-term-tab { color:var(--ds-text-muted,#64748b); opacity:.7; font-size:.78rem; margin-inline:auto; }
.cxv-term-body { padding:clamp(1.4rem,4vw,2.6rem); color:var(--ds-text-strong,#0f172a); }
.cxv-term-cmd { opacity:.82; font-size:.95rem; margin:0 0 1rem; }
.cxv-term-pr { color:var(--ds-primary,#4f46e5); font-weight:700; }
.cxv-term-title { font-weight:700; letter-spacing:-.01em; font-size:clamp(1.8rem,4.5vw,3.2rem); line-height:1.12; margin:.2rem 0; color:var(--ds-text-strong,#0f172a); }
.cxv-term-sub { color:var(--ds-text-muted,#475569); opacity:.95; max-width:44rem; margin:.85rem 0 0; line-height:1.6; }
.cxv-term-caret { margin:1.1rem 0 0; } .cxv-term-blink { color:var(--ds-primary,#4f46e5); animation:cxv-blink 1.1s steps(1) infinite; }
.cxv-term-cta { margin-top:1.3rem; }
.cxv-term-ghost { color:var(--ds-text-strong,#0f172a); border:1px solid var(--ds-border,rgba(148,163,184,.3)); border-radius:var(--ds-radius-sm,10px); padding:.55rem 1.05rem; text-decoration:none; font-weight:600; }
@keyframes cxv-blink { 50% { opacity:0; } }

/* ── hero · glamour — luxury editorial serif ───────────────────────────────── */
.cxv-glam-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,6vw,5rem); align-items:center; }
.cxv-glam-eyebrow { font-size:.72rem; letter-spacing:.35em; text-transform:uppercase; font-weight:700; color:var(--ds-text-muted,#64748b); }
.cxv-glam-title { font-family:var(--ds-font-heading,Georgia,'Times New Roman',serif); font-weight:500; letter-spacing:-.02em;
  font-size:clamp(2.8rem,8vw,6rem); line-height:.98; margin:.6rem 0 0; color:var(--ds-text-strong,#0f172a); }
.cxv-glam-sub { font-size:1.1rem; line-height:1.7; color:var(--ds-text-muted,#475569); max-width:34rem; margin:1.4rem 0 0; }
.cxv-glam-cta { display:flex; gap:2rem; margin-top:2rem; flex-wrap:wrap; }
.cxv-glam-link { text-decoration:none; font-weight:600; letter-spacing:.02em; color:var(--ds-text-strong,#0f172a); border-bottom:1px solid var(--ds-text-strong,#0f172a); padding-bottom:.3rem; }
.cxv-glam-link--soft { color:var(--ds-text-muted,#64748b); border-color:var(--ds-border,rgba(148,163,184,.5)); }
.cxv-glam-media { position:relative; aspect-ratio:3/4; border-radius:var(--ds-radius-sm,3px); overflow:hidden; }
.cxv-glam-tag { position:absolute; bottom:0; left:-1.1rem; writing-mode:vertical-rl; font-size:.68rem; letter-spacing:.3em; text-transform:uppercase; font-weight:700; color:var(--ds-primary,#4f46e5); }
@media (max-width:820px){ .cxv-glam-grid { grid-template-columns:1fr; } .cxv-glam-media { aspect-ratio:4/3; } }

/* ── hero · orbital — keyword chips orbiting concentric rings ───────────────── */
.cxv-orb { position:relative; overflow:hidden; min-height:clamp(520px,80vh,820px); display:flex; align-items:center; isolation:isolate; }
.cxv-orb-stage { position:absolute; inset:0; z-index:0; display:grid; place-items:center; pointer-events:none; }
.cxv-orb-ring { position:absolute; border-radius:var(--ds-radius-full,50%); border:1px solid var(--ds-border,rgba(148,163,184,.22)); aspect-ratio:1; }
.cxv-orb-ring--1 { width:min(34rem,82vw); } .cxv-orb-ring--2 { width:min(48rem,118vw); } .cxv-orb-ring--3 { width:min(62rem,160vw); }
.cxv-orb-chip { position:absolute; --a:calc(var(--cxv-orb-i) / var(--cxv-orb-n) * 1turn);
  padding:.5rem 1.05rem; border-radius:var(--ds-radius-full,999px); font-weight:600; font-size:.85rem; white-space:nowrap;
  background:var(--ds-surface,#fff); border:1px solid var(--ds-border,rgba(148,163,184,.25)); color:var(--ds-text-strong,#0f172a);
  box-shadow:var(--ds-card-shadow,0 12px 30px -16px rgba(2,6,23,.4));
  animation:cxv-orb-orbit 50s linear infinite; animation-delay:calc(var(--a) / 1turn * -50s); }
@keyframes cxv-orb-orbit { from { transform:rotate(0) translateX(min(22rem,42vw)) rotate(0); } to { transform:rotate(1turn) translateX(min(22rem,42vw)) rotate(-1turn); } }
.cxv-orb-copy { position:relative; z-index:1; }
@media (prefers-reduced-motion:reduce){ .cxv-orb-chip { animation:none; transform:rotate(var(--a)) translateX(min(20rem,42vw)) rotate(calc(-1*var(--a))); } }

/* ── hero · forge — bold copy + tilted kanban mock ─────────────────────────── */
.cxv-forge-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.cxv-forge-chips { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.6rem; }
.cxv-forge-chips span { padding:.4rem .8rem; border-radius:var(--ds-radius-sm,8px); font-size:.8rem; font-weight:600;
  background:var(--ds-surface-2,#f1f5f9); color:var(--ds-text-muted,#475569); border:1px solid var(--ds-border,rgba(148,163,184,.22)); }
.cxv-forge-mock { perspective:1400px; }
.cxv-forge-board { display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem; padding:1rem; border-radius:var(--ds-card-radius,16px); position:relative;
  background:var(--ds-surface,#fff); border:1px solid var(--ds-border,rgba(148,163,184,.22)); box-shadow:var(--ds-card-shadow,0 30px 60px -30px rgba(2,6,23,.45));
  transform:rotateY(-18deg) rotateX(6deg) rotate(1deg); transform-style:preserve-3d; }
.cxv-forge-badge { position:absolute; top:-.8rem; right:-.5rem; z-index:2; font-size:.68rem; font-weight:800; letter-spacing:.04em;
  padding:.35rem .75rem; border-radius:var(--ds-radius-full,999px); color:var(--ds-on-primary,#fff); background:var(--ds-primary,#4f46e5);
  box-shadow:0 8px 22px -8px color-mix(in srgb,var(--ds-primary,#4f46e5) 60%,transparent); animation:cxv-forge-pulse 2.4s ease-in-out infinite; }
.cxv-forge-col { display:flex; flex-direction:column; gap:.5rem; }
.cxv-forge-col b { font-size:.6rem; text-transform:uppercase; letter-spacing:.12em; color:var(--ds-text-muted,#64748b); }
.cxv-forge-col i { display:block; height:2.6rem; border-radius:var(--ds-radius-sm,9px); background:var(--ds-surface-2,#f1f5f9); border:1px solid var(--ds-border,rgba(148,163,184,.18)); }
.cxv-forge-drag { background:color-mix(in srgb,var(--ds-primary,#4f46e5) 14%,var(--ds-surface,#fff)) !important; border-color:color-mix(in srgb,var(--ds-primary,#4f46e5) 40%,transparent) !important; animation:cxv-forge-drag 3s ease-in-out infinite; }
@keyframes cxv-forge-pulse { 50% { transform:scale(1.07); } }
@keyframes cxv-forge-drag { 50% { transform:translateY(-.5rem) translateX(.4rem) rotate(-2deg); } }
@media (max-width:820px){ .cxv-forge-grid { grid-template-columns:1fr; } .cxv-forge-board { transform:none; } }

/* ── hero · lumiere — editorial image slideshow (JS crossfade, white on scrim) ── */
.cxv-lum { position:relative; overflow:hidden; padding:0; min-height:clamp(560px,88vh,900px); display:flex; }
.cxv-lum-slides { position:absolute; inset:0; }
.cxv-lum-slide { position:absolute; inset:0; background-size:cover; background-position:center; display:flex; align-items:flex-end; opacity:0; transition:opacity 1.1s ease; will-change:opacity,transform; }
.cxv-lum-slide.is-active { opacity:1; z-index:1; }
/* transition variants — driven by .is-active / .is-prev toggled in lumiere.js */
.cxv-lum--slide .cxv-lum-slide { transition:opacity .9s ease, transform .9s cubic-bezier(.22,1,.36,1); transform:translateX(6%); }
.cxv-lum--slide .cxv-lum-slide.is-active { transform:translateX(0); }
.cxv-lum--slide .cxv-lum-slide.is-prev { transform:translateX(-6%); z-index:0; }
.cxv-lum--zoom .cxv-lum-slide { transition:opacity 1s ease, transform 1.3s ease; transform:scale(1.08); }
.cxv-lum--zoom .cxv-lum-slide.is-active { transform:scale(1); }
.cxv-lum--zoom .cxv-lum-slide.is-prev { z-index:0; }
.cxv-lum-slide--empty { background:linear-gradient(135deg, color-mix(in srgb,var(--ds-primary,#4f46e5) 16%,var(--ds-surface-2,#f1f5f9)), var(--ds-surface-2,#f1f5f9)); }
.cxv-lum-slide--empty .cxv-lum-scrim { display:none; }
.cxv-lum-slide--empty .cxv-lum-title { color:var(--ds-text-strong,#0f172a); }
.cxv-lum-slide--empty .cxv-lum-sub { color:var(--ds-text-muted,#475569); }
.cxv-lum-slide--empty .cxv-lum-eyebrow { color:var(--ds-text-muted,#64748b); }
.cxv-lum-scrim { position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.74), rgba(0,0,0,.15) 55%, transparent); }
.cxv-lum-copy { position:relative; z-index:1; padding-block:clamp(2.5rem,8vh,6rem); color:white; }
.cxv-lum-eyebrow { font-size:.72rem; letter-spacing:.3em; text-transform:uppercase; font-weight:700; opacity:.85; }
.cxv-lum-title { font-family:var(--ds-font-heading,Georgia,serif); font-weight:500; letter-spacing:-.02em; font-size:clamp(2.4rem,6.5vw,5rem); line-height:1; margin:.5rem 0 0; color:white; max-width:20ch; }
.cxv-lum-sub { font-size:1.15rem; line-height:1.6; margin:1rem 0 0; max-width:44ch; color:rgba(255,255,255,.9); }
.cxv-lum-cta { margin-top:1.6rem; }
.cxv-lum-dots { position:absolute; bottom:1.4rem; left:50%; transform:translateX(-50%); z-index:3; display:flex; gap:.5rem; }
.cxv-lum-dot { width:8px; height:8px; padding:0; border:0; cursor:pointer; border-radius:var(--ds-radius-full,50%); background:rgba(255,255,255,.4); transition:all .3s; }
.cxv-lum-dot:hover { background:rgba(255,255,255,.7); }
.cxv-lum-dot.is-active { background:white; width:22px; border-radius:var(--ds-radius-full,99px); }
/* prev / next arrows */
.cxv-lum-nav { position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:44px; height:44px; display:flex; align-items:center; justify-content:center; font-size:1.6rem; line-height:1; cursor:pointer; color:white; background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.35); border-radius:var(--ds-radius-full,50%); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); transition:background .2s, transform .2s; }
.cxv-lum-nav:hover { background:rgba(0,0,0,.5); }
.cxv-lum-prev { left:1.2rem; }
.cxv-lum-next { right:1.2rem; }
/* slide counter */
.cxv-lum-count { position:absolute; top:1.4rem; right:1.5rem; z-index:3; font-family:var(--ds-font-mono,ui-monospace,monospace); font-size:.8rem; letter-spacing:.15em; color:white; opacity:.85; }
@media (max-width:640px) {
  .cxv-lum-nav { width:38px; height:38px; font-size:1.3rem; }
  .cxv-lum-prev { left:.6rem; }
  .cxv-lum-next { right:.6rem; }
  .cxv-lum-count { top:1rem; right:1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cxv-lum-slide, .cxv-lum--slide .cxv-lum-slide, .cxv-lum--zoom .cxv-lum-slide { transition:opacity .3s ease; transform:none; }
}

/* ── Hero height toggle (content.height) ──────────────────────────────────────
   Every hero honours `height`. Two-class selector (0,2,0) overrides each variant's
   own min-height.
   • full   = fills the viewport BELOW the sticky nav (var --cx-nav-h, measured in
              _nav.html; 0 in the editor canvas where there's no nav) — so the hero
              never hides behind the nav and needs no scroll.
   • normal = a real compact hero (NOT 0 — min-height:0 collapsed image/slideshow
              heroes whose content is absolutely positioned, e.g. lumiere → vanished). */
.cx-section.cxv-h--full { min-height:calc(100svh - var(--cx-nav-h, 0px)); }
.cx-section.cxv-h--normal { min-height:clamp(440px, 62vh, 680px); }

/* ══════════════════════════════════════════════════════════════════════════════
   GOLD-STANDARD HERO FX — universal layers every variant inherits via {% hero_fx %}
   classes + the _hero_standard / _hero_media partials. Token-only (--ds-*).
   Contract: docs/design/composer-hero-contract.md.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Copy alignment (content.align) ── */
.cxv-al--left  { text-align:left; }
.cxv-al--center{ text-align:center; }
.cxv-al--right { text-align:right; }
.cxv-al--center .cx-stack { align-items:center; }
.cxv-al--left   .cx-stack { align-items:flex-start; }
.cxv-al--right  .cx-stack { align-items:flex-end; }
.cxv-al--center .cx-row { justify-content:center; }
.cxv-al--right  .cx-row { justify-content:flex-end; }
.cxv-al--left   .cx-row { justify-content:flex-start; }

/* ── Background glow (content.glow) — soft brand glows in the CORNERS behind the section
   (à la the V1 layout-selection page). SHARED across hero / content_grid / photo_gallery via
   section_fx. Primary top-left, accent top-right, soft primary bottom. Intensity = opacity
   custom-prop; content.glow_animate=on → slow breathe (cxv-glow-anim). ── */
[class*="cxv-glow--"] { position:relative; isolation:isolate; }
/* Glow sits at z-index:-1 — BEHIND every child (media layers + content). isolation:isolate keeps
   the negative layer contained to this hero (it can't slip behind the page). This is the fix for
   "glow hides the image": the old rule forced ALL children to z-index:1 while background media
   layers defined earlier in this file (orbital .cxv-orb-stage, lumiere slides) kept z-index:0 and
   so ended up UNDER the glow. Now nothing is lifted — each variant keeps its own z-index and the
   glow is always underneath. */
[class*="cxv-glow--"]::before {
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; transform-origin:center;
  opacity:var(--cxv-glow-op,.7);
  background:
    radial-gradient(42% 40% at 0% 0%,   color-mix(in srgb, var(--ds-primary,#4f46e5) 22%, transparent), transparent 72%),
    radial-gradient(42% 40% at 100% 0%, color-mix(in srgb, var(--ds-accent,#6366f1) 22%, transparent), transparent 72%),
    radial-gradient(60% 45% at 50% 100%, color-mix(in srgb, var(--ds-primary,#4f46e5) 14%, transparent), transparent 74%); }
.cxv-glow--soft   { --cxv-glow-op:.5; }
.cxv-glow--medium { --cxv-glow-op:.78; }
.cxv-glow--strong { --cxv-glow-op:1; }
.cxv-glow-anim::before { animation:cxvGlowBreathe 9s ease-in-out infinite; }
@keyframes cxvGlowBreathe {
  0%,100% { transform:scale(1);    opacity:var(--cxv-glow-op,.7); }
  50%     { transform:scale(1.09); opacity:calc(var(--cxv-glow-op,.7) * .72); } }
@media (prefers-reduced-motion:reduce){ .cxv-glow-anim::before { animation:none; } }

/* ── Image scrim (content.overlay) — darken behind text on image/slideshow heroes ── */
.cxv-ov--light  .cxv-slide::after,
.cxv-ov--light  .cxv-bgmedia::after { content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(0deg, var(--ds-scrim,rgba(2,6,23,.38)), transparent 70%); }
.cxv-ov--medium .cxv-slide::after,
.cxv-ov--medium .cxv-bgmedia::after { content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(0deg, var(--ds-scrim,rgba(2,6,23,.58)), var(--ds-scrim-2,rgba(2,6,23,.12)) 60%, transparent); }
.cxv-ov--heavy  .cxv-slide::after,
.cxv-ov--heavy  .cxv-bgmedia::after { content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(0deg, var(--ds-scrim-3,rgba(2,6,23,.74)), var(--ds-scrim,rgba(2,6,23,.3)) 55%, transparent); }

/* ── Float / slow Ken-Burns on media (content.float) ── */
@keyframes cxvFloat { 0%,100% { transform:scale(1.05) translateY(0); } 50% { transform:scale(1.075) translateY(-1.4%); } }
.cxv-float .cxv-media,
.cxv-float img.cx-media,
.cxv-float .cxv-slide.is-active { animation:cxvFloat 9s ease-in-out infinite; }

/* ── Accent-off (content.accent) — mute brand-coloured decoration ── */
.cxv-accent-off::before { display:none; }         /* kill the glow */
.cxv-accent-off .cxv-chip { color:var(--ds-text-muted,#475569);
  background:var(--ds-surface-2,#f1f5f9); border-color:var(--ds-border,rgba(148,163,184,.28)); }

/* ── Scroll cue (content.scroll_cue) — animated ↓ chevron, bottom-centre ── */
.cxv-cue-mark { position:absolute; bottom:1.5rem; left:50%; transform:translateX(-50%); z-index:2; pointer-events:none; }
.cxv-cue-mark span { display:block; width:14px; height:14px; border-right:2px solid; border-bottom:2px solid;
  border-color:var(--ds-text-muted,#64748b); transform:rotate(45deg); animation:cxvCue 1.7s ease-in-out infinite; }
@keyframes cxvCue { 0%,100% { transform:rotate(45deg) translate(0,0); opacity:.35; }
                    50%     { transform:rotate(45deg) translate(4px,4px); opacity:.9; } }

/* ── Bottom shape divider (content.divider) — bleeds into the next section ── */
.cxv-divider { position:absolute; left:0; right:0; bottom:0; z-index:2; pointer-events:none; background:var(--ds-page-bg,#f6f8fc); }
.cxv-divider--slant { height:58px; clip-path:polygon(0 100%, 100% 0, 100% 100%); }
.cxv-divider--tilt  { height:46px; clip-path:polygon(0 100%, 100% 42%, 100% 100%); }
.cxv-divider--wave  { height:26px;
  -webkit-mask:radial-gradient(20px at 50% 0, var(--ds-mask-cut,#0000) 96%, var(--ds-mask,#000)) repeat-x;
          mask:radial-gradient(20px at 50% 0, var(--ds-mask-cut,#0000) 96%, var(--ds-mask,#000)) repeat-x;
  -webkit-mask-size:40px 100%; mask-size:40px 100%; }

/* ── Keyword chips strip (content.chips_style) — static or marquee, any variant ── */
.cxv-chips { position:relative; z-index:1; margin-top:1.7rem; padding:0 1rem 1.6rem; }
.cxv-chips-track { display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; }
.cxv-chip { display:inline-flex; align-items:center; padding:.42rem .85rem; white-space:nowrap;
  border-radius:var(--ds-radius-full,999px); font-size:.78rem; font-weight:600; letter-spacing:.01em;
  color:var(--ds-primary,#4f46e5);
  background:color-mix(in srgb, var(--ds-primary,#4f46e5) 12%, var(--ds-surface,#fff));
  border:1px solid color-mix(in srgb, var(--ds-primary,#4f46e5) 30%, transparent); }
.cxv-chips--marquee { overflow:hidden;
  -webkit-mask:linear-gradient(90deg, transparent, var(--ds-mask,#000) 6%, var(--ds-mask,#000) 94%, transparent);
          mask:linear-gradient(90deg, transparent, var(--ds-mask,#000) 6%, var(--ds-mask,#000) 94%, transparent); }
.cxv-chips--marquee .cxv-chips-track { flex-wrap:nowrap; justify-content:flex-start; width:max-content;
  animation:cxvChipsScroll 24s linear infinite; }
.cxv-chips--marquee:hover .cxv-chips-track { animation-play-state:paused; }
@keyframes cxvChipsScroll { to { transform:translateX(-50%); } }

/* ── Chip POSITION (content.chips_pos) — bottom(default)/inline flow in the copy; top + the four
   corners FLOAT over the hero (section gets cxv-chips-float → position:relative from section_fx). ── */
.cxv-chips-float { position:relative; }
.cxv-chips--pos-top, .cxv-chips--pos-top-left, .cxv-chips--pos-top-right,
.cxv-chips--pos-bottom-left, .cxv-chips--pos-bottom-right {
  position:absolute; z-index:3; margin:0; padding:0; width:auto; max-width:min(92%,60rem); }
.cxv-chips--pos-top         { top:1.1rem; left:50%; transform:translateX(-50%); }
.cxv-chips--pos-top-left    { top:1.1rem; left:1.1rem; }
.cxv-chips--pos-top-right   { top:1.1rem; right:1.1rem; }
.cxv-chips--pos-bottom-left { bottom:1.1rem; left:1.1rem; }
.cxv-chips--pos-bottom-right{ bottom:1.1rem; right:1.1rem; }
.cxv-chips--pos-top-left .cxv-chips-track, .cxv-chips--pos-bottom-left .cxv-chips-track { justify-content:flex-start; }
.cxv-chips--pos-top-right .cxv-chips-track, .cxv-chips--pos-bottom-right .cxv-chips-track { justify-content:flex-end; }

/* ── Chip LOOK (content.chips_look) — 5 styles. soft = tinted pill (the base .cxv-chip). ── */
.cxv-chips--look-solid   .cxv-chip { color:var(--ds-on-primary,#fff); background:var(--ds-primary,#4f46e5); border-color:transparent; }
.cxv-chips--look-outline .cxv-chip { color:var(--ds-primary,#4f46e5); background:transparent;
  border-color:color-mix(in srgb, var(--ds-primary,#4f46e5) 55%, transparent); }
.cxv-chips--look-glass   .cxv-chip { color:var(--ds-text-strong,#0f172a);
  background:color-mix(in srgb, var(--ds-surface,#fff) 62%, transparent);
  border-color:color-mix(in srgb, var(--ds-surface,#fff) 40%, transparent);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.cxv-chips--look-gradient .cxv-chip { color:var(--ds-on-primary,#fff); border-color:transparent;
  background:linear-gradient(135deg, var(--ds-primary,#4f46e5), var(--ds-accent,#6366f1)); }

/* ── Media side (content.media_side) — which side the image sits on for a split hero (text on the
   other side). Default: media-right. cxv-side--left moves the media frame before the copy via grid
   `order`, so the text sits to the RIGHT of the image. (Centered heroes have no side to flip.) ── */
.cxv-side--left .cx-grid > .cxv-mediaframe { order:-1; }

/* ── Text shadow (content.text_shadow) — legibility over busy image heroes ── */
.cxv-tshadow .cx-heading, .cxv-tshadow .cx-text, .cxv-tshadow .cx-badge {
  text-shadow:0 2px 14px rgba(2,6,23,.45), 0 1px 3px rgba(2,6,23,.35); }

/* ── Graceful empty state (bound section with no rows yet) — never a blank section ── */
.cxv-empty { grid-column:1 / -1; display:flex; flex-direction:column; align-items:center; gap:.75rem;
  text-align:center; padding:clamp(2rem,5vw,3.5rem); border-radius:var(--ds-radius-lg,18px);
  border:1px dashed var(--ds-border,rgba(148,163,184,.4));
  background:color-mix(in srgb, var(--ds-primary,#4f46e5) 4%, var(--ds-surface,#fff)); }
.cxv-empty-icon { display:inline-flex; align-items:center; justify-content:center; width:3rem; height:3rem;
  border-radius:var(--ds-radius-full,999px); font-size:1.3rem; color:var(--ds-primary,#4f46e5);
  background:color-mix(in srgb, var(--ds-primary,#4f46e5) 12%, var(--ds-surface,#fff)); }
.cxv-empty-msg { color:var(--ds-text-muted,#475569); max-width:34ch; margin:0; }

/* ── Universal media / slideshow (_hero_media.html) — any variant with an image slot ── */
/* .cxv-mediaframe = a variant's media container (glamour frame, split/showcase card): clips
   slides + scrim + float, positions dots. .cxv-bgmedia = full-bleed background layer (media_bg). */
.cxv-mediaframe { position:relative; overflow:hidden; min-height:280px; }
.cxv-bgmedia { position:absolute; inset:0; z-index:0; overflow:hidden; }
.cx-stage { position:relative; }
.cx-stage > .cx-container { position:relative; z-index:1; }
.cxv-media { display:block; width:100%; height:100%; object-fit:cover; }
img.cxv-media { border-radius:inherit; }
.cxv-media--empty { min-height:280px; border-radius:inherit;
  background:linear-gradient(135deg, color-mix(in srgb,var(--ds-primary,#4f46e5) 14%, var(--ds-surface-2,#f1f5f9)), var(--ds-surface-2,#f1f5f9)); }
.cxv-slides { position:relative; width:100%; height:100%; min-height:320px; overflow:hidden; border-radius:inherit; }
.cxv-slide { position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity 1s ease; }
.cxv-slide.is-active { opacity:1; z-index:1; }
.cxv-slides--slide .cxv-slide { transition:opacity .9s ease, transform .9s cubic-bezier(.22,1,.36,1); transform:translateX(6%); }
.cxv-slides--slide .cxv-slide.is-active { transform:translateX(0); }
.cxv-slides--slide .cxv-slide.is-prev  { transform:translateX(-6%); }
.cxv-slides--zoom  .cxv-slide { transition:opacity 1s ease, transform 1.3s ease; transform:scale(1.08); }
.cxv-slides--zoom  .cxv-slide.is-active { transform:scale(1); }
.cxv-slides-dots { position:absolute; bottom:.85rem; left:50%; transform:translateX(-50%); z-index:3; display:flex; gap:.4rem; }
.cxv-slides-dot { width:7px; height:7px; padding:0; border:0; cursor:pointer;
  border-radius:var(--ds-radius-full,50%); background:var(--ds-scrim-dot,rgba(255,255,255,.5)); transition:all .3s; }
.cxv-slides-dot:hover { background:var(--ds-scrim-dot-hover,rgba(255,255,255,.8)); }
.cxv-slides-dot.is-active { background:var(--ds-scrim-dot-active,#fff); width:18px; border-radius:var(--ds-radius-full,99px); }

@media (prefers-reduced-motion: reduce) {
  .cxv-float .cxv-media, .cxv-float img.cx-media, .cxv-float .cxv-slide.is-active,
  .cxv-cue-mark span, .cxv-chips--marquee .cxv-chips-track,
  .cxv-slide, .cxv-slides--slide .cxv-slide, .cxv-slides--zoom .cxv-slide {
    animation:none !important; transition:opacity .3s ease; transform:none; }
}

/* ── hero · cinema — film-poster / magazine masthead ─────────────────────────
   A centred poster: numbered masthead band (rule-flanked eyebrow), an oversized
   title split by a hairline accent rule, a framed portrait media panel with a
   floating credit tag, and corner registration marks. Adaptive (Mode A): all
   surfaces/ink read theme tokens, so it flips with cx-dark for free. The title
   reveals via a rising letter-mask on load. */
.cxv-cine-wrap {
  position:relative; max-width:64rem; margin-inline:auto; text-align:center;
  padding-block:clamp(1rem, 4vh, 2.5rem);
}
/* corner registration marks — brand-tinted, muted when accent is off */
.cxv-cine-mark {
  position:absolute; width:18px; height:18px; pointer-events:none;
  border:2px solid color-mix(in srgb, var(--ds-primary, #4f46e5) 55%, transparent);
}
.cxv-cine-mark--tl { top:0; left:0; border-right:0; border-bottom:0; }
.cxv-cine-mark--tr { top:0; right:0; border-left:0; border-bottom:0; }
.cxv-cine-mark--bl { bottom:0; left:0; border-right:0; border-top:0; }
.cxv-cine-mark--br { bottom:0; right:0; border-left:0; border-top:0; }
.cxv-accent-off .cxv-cine-mark { border-color:var(--ds-border, rgba(148,163,184,.4)); }

/* masthead band — eyebrow flanked by hairline rules + issue credits */
.cxv-cine-masthead {
  display:flex; align-items:center; justify-content:center; gap:clamp(.75rem, 2vw, 1.5rem);
  margin-bottom:clamp(1rem, 3vh, 1.75rem);
}
.cxv-cine-issue {
  flex:0 0 auto; font-family:var(--ds-font-mono, ui-monospace, monospace);
  font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; font-weight:600;
  color:var(--ds-text-muted, #64748b); opacity:.75;
}
.cxv-cine-eyebrow {
  position:relative; flex:1 1 auto; max-width:26rem;
  font-family:var(--ds-font-mono, ui-monospace, monospace);
  font-size:.72rem; letter-spacing:.34em; text-transform:uppercase; font-weight:700;
  color:var(--ds-primary, #4f46e5);
}
.cxv-cine-eyebrow::before, .cxv-cine-eyebrow::after {
  content:''; position:absolute; top:50%; width:clamp(1.5rem, 8vw, 5rem); height:1px;
  background:var(--ds-border, rgba(148,163,184,.5));
}
.cxv-cine-eyebrow::before { right:calc(100% + .9rem); }
.cxv-cine-eyebrow::after  { left:calc(100% + .9rem); }
.cxv-accent-off .cxv-cine-eyebrow { color:var(--ds-text-muted, #64748b); }

/* oversized poster title with a rising letter-mask reveal */
.cxv-cine-title {
  margin:0; font-family:var(--ds-font-heading, system-ui, sans-serif);
  font-weight:800; letter-spacing:-.03em; line-height:.94; text-transform:uppercase;
  font-size:clamp(2.6rem, 9vw, 6.5rem); color:var(--ds-text-strong, #0f172a);
  padding-bottom:clamp(1.25rem, 3.5vh, 2rem);
  border-bottom:1px solid var(--ds-border, rgba(148,163,184,.45));
}
.cxv-cine-titleline { display:inline-block; will-change:transform, opacity; animation:cxvCineRise .9s cubic-bezier(.22,1,.36,1) both; }
@keyframes cxvCineRise { from { opacity:0; transform:translateY(.5em); } to { opacity:1; transform:translateY(0); } }

/* framed portrait media panel + floating credit tag */
.cxv-cine-media {
  position:relative; margin:clamp(1.5rem, 4vh, 2.5rem) auto 0; max-width:44rem;
  aspect-ratio:16/9; border-radius:var(--ds-radius-lg, 16px);
  border:1px solid var(--ds-border, rgba(148,163,184,.35)); box-shadow:var(--ds-shadow-lg);
}
.cxv-cine-credit {
  position:absolute; left:.9rem; bottom:.9rem; z-index:2;
  padding:.3rem .7rem; border-radius:var(--ds-radius-full, 999px);
  background:color-mix(in srgb, var(--ds-surface, #fff) 82%, transparent);
  border:1px solid var(--ds-border, rgba(148,163,184,.4)); backdrop-filter:blur(6px);
  font-family:var(--ds-font-mono, ui-monospace, monospace);
  font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; font-weight:700;
  color:var(--ds-text-strong, #0f172a);
}

.cxv-cine-sub {
  margin:clamp(1.4rem, 4vh, 2.25rem) auto 0; max-width:38rem;
  font-family:var(--ds-font-body, system-ui, sans-serif);
  font-size:1.075rem; line-height:1.65; color:var(--ds-text-muted, #475569);
}
.cxv-cine-cta { margin-top:clamp(1.5rem, 4vh, 2.25rem); gap:1rem; }
.cxv-cine-ghost {
  display:inline-flex; align-items:center; text-decoration:none; font-weight:600;
  padding:.6rem 1.2rem; border-radius:var(--ds-radius-sm, 10px);
  color:var(--ds-text-strong, #0f172a);
  border:1px solid var(--ds-border, rgba(148,163,184,.4));
}
.cxv-cine-ghost:hover { border-color:var(--ds-primary, #4f46e5); color:var(--ds-primary, #4f46e5); }

@media (prefers-reduced-motion: reduce) {
  .cxv-cine-titleline { animation:none; }
}
@media (max-width:820px) {
  .cxv-cine-title { font-size:clamp(2.2rem, 13vw, 3.6rem); }
  .cxv-cine-eyebrow::before, .cxv-cine-eyebrow::after { width:1.25rem; }
  .cxv-cine-issue--r { display:none; }
  .cxv-cine-media { aspect-ratio:4/3; }
}


/* ══════════════════════════════════════════════════════════════════════════════
   FULL-WIDTH (section_fx cxv-fw) — break the container to edge-to-edge (any section).
   ══════════════════════════════════════════════════════════════════════════════ */
.cxv-fw > .cx-container { max-width:none; }

/* ══════════════════════════════════════════════════════════════════════════════
   content_grid — the configurable STATIC workhorse. One template; classes drive the
   look. Token-only, light/dark-adaptive. Contract: docs/design/composer-hero-contract.md.
   ══════════════════════════════════════════════════════════════════════════════ */
.cxv-cg-head { margin-bottom:clamp(1.6rem,4vh,2.6rem); }

/* ── Display: GRID (default) + columns ── */
.cxv-cg-track { display:grid; gap:clamp(1rem,2.2vw,1.6rem); }
.cxv-cg--cols2 .cxv-cg-track { grid-template-columns:repeat(2,1fr); }
.cxv-cg--cols3 .cxv-cg-track { grid-template-columns:repeat(3,1fr); }
.cxv-cg--cols4 .cxv-cg-track { grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ .cxv-cg--cols3 .cxv-cg-track, .cxv-cg--cols4 .cxv-cg-track { grid-template-columns:repeat(2,1fr); } }

/* ── Display: CAROUSEL — smooth horizontal scroll-snap row ── */
.cxv-cg--carousel .cxv-cg-track { display:flex; grid-template-columns:none; overflow-x:auto;
  scroll-snap-type:x mandatory; scroll-behavior:smooth; -webkit-overflow-scrolling:touch;
  padding-bottom:.6rem; scrollbar-width:none; }
.cxv-cg--carousel .cxv-cg-track::-webkit-scrollbar { display:none; }
.cxv-cg--carousel .cxv-cg-card { scroll-snap-align:start; flex:0 0 clamp(240px,30%,340px); }

/* ── Display: DUAL_ROW — two rows, horizontal scroll ── */
.cxv-cg--dual_row .cxv-cg-track { display:grid; grid-auto-flow:column; grid-template-rows:1fr 1fr;
  grid-auto-columns:clamp(240px,30%,340px); overflow-x:auto; scroll-snap-type:x proximity;
  scroll-behavior:smooth; scrollbar-width:none; }
.cxv-cg--dual_row .cxv-cg-track::-webkit-scrollbar { display:none; }
.cxv-cg--dual_row .cxv-cg-card { scroll-snap-align:start; }

/* ── Display: MASONRY — CSS columns ── */
.cxv-cg--masonry .cxv-cg-track { display:block; columns:3 260px; column-gap:clamp(1rem,2vw,1.5rem); }
.cxv-cg--masonry .cxv-cg-card { break-inside:avoid; margin-bottom:clamp(1rem,2vw,1.5rem); }

/* ── Display: LIST — stacked rows, media beside text ── */
.cxv-cg--list .cxv-cg-track { display:flex; flex-direction:column; }
.cxv-cg--list .cxv-cg-card { display:grid; grid-template-columns:minmax(0,.34fr) 1fr; align-items:center;
  gap:clamp(1rem,3vw,2rem); }
.cxv-cg--list .cxv-cg-media { border-radius:var(--ds-radius-sm,10px); }
@media (max-width:640px){ .cxv-cg--list .cxv-cg-card { grid-template-columns:1fr; } }

@media (max-width:600px){
  .cxv-cg--grid .cxv-cg-track, .cxv-cg--masonry .cxv-cg-track { grid-template-columns:1fr; columns:1; }
}

/* ── Card base + styles ── */
.cxv-cg-card { position:relative; display:flex; flex-direction:column; overflow:hidden;
  border-radius:var(--ds-card-radius,14px); background:var(--ds-surface,#fff);
  transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s, border-color .25s; }
.cxv-cg-body { padding:clamp(1rem,1.6vw,1.5rem); display:flex; flex-direction:column; gap:.4rem; }
.cxv-cg--card-elevated .cxv-cg-card { box-shadow:var(--ds-card-shadow,0 12px 30px -16px rgba(2,6,23,.4)); border:1px solid transparent; }
.cxv-cg--card-bordered .cxv-cg-card { border:1px solid var(--ds-border,rgba(148,163,184,.25)); }
.cxv-cg--card-flat .cxv-cg-card { background:var(--ds-surface-2,#f1f5f9); }
.cxv-cg--card-glass .cxv-cg-card { background:color-mix(in srgb, var(--ds-surface,#fff) 68%, transparent);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid color-mix(in srgb, var(--ds-border,#94a3b8) 40%, transparent); }
.cxv-cg--card-minimal .cxv-cg-card { background:transparent; }
.cxv-cg--card-minimal .cxv-cg-body { padding-inline:0; }

/* ── Card glow (card_glow=on) — brand backlight on EVERY card (box-shadow isn't clipped by
   the card's overflow, so it reads even over solid cards). Breathes with glow_animate. ── */
.cxv-cg.cxv-cg--cardglow .cxv-cg-card { box-shadow:
  0 12px 34px -12px color-mix(in srgb, var(--ds-primary,#4f46e5) 52%, transparent),
  0 0 0 1px color-mix(in srgb, var(--ds-primary,#4f46e5) 14%, transparent); }
.cxv-cg.cxv-cg--cardglow .cxv-cg-card:hover { box-shadow:
  0 18px 46px -14px color-mix(in srgb, var(--ds-primary,#4f46e5) 68%, transparent),
  0 0 0 1px color-mix(in srgb, var(--ds-primary,#4f46e5) 24%, transparent); }
@media (prefers-reduced-motion:no-preference){
  .cxv-glow-anim.cxv-cg--cardglow .cxv-cg-card { animation:cxvCardGlow 3.8s ease-in-out infinite; }
  @keyframes cxvCardGlow {
    0%,100% { box-shadow:0 12px 34px -12px color-mix(in srgb, var(--ds-primary,#4f46e5) 52%, transparent),
                        0 0 0 1px color-mix(in srgb, var(--ds-primary,#4f46e5) 14%, transparent); }
    50%     { box-shadow:0 16px 44px -12px color-mix(in srgb, var(--ds-primary,#4f46e5) 78%, transparent),
                        0 0 0 1px color-mix(in srgb, var(--ds-primary,#4f46e5) 26%, transparent); } }
}

/* ── Media + aspect ── */
.cxv-cg-media { position:relative; width:100%; overflow:hidden; background:var(--ds-surface-2,#f1f5f9); }
.cxv-cg--aspect-square    .cxv-cg-media { aspect-ratio:1/1; }
.cxv-cg--aspect-landscape .cxv-cg-media { aspect-ratio:16/10; }
.cxv-cg--aspect-portrait  .cxv-cg-media { aspect-ratio:3/4; }
.cxv-cg--aspect-wide      .cxv-cg-media { aspect-ratio:2/1; }
.cxv-cg-media .cxv-media { width:100%; height:100%; object-fit:cover; display:block; }
.cxv-cg--aspect-auto .cxv-cg-media .cxv-media { height:auto; }
.cxv-cg-icon { display:flex; align-items:center; justify-content:center; width:100%; min-height:130px;
  font-size:2.4rem; color:var(--ds-primary,#4f46e5); }

/* ── Hover effects ── */
.cxv-cg--hover-lift .cxv-cg-card:hover { transform:translateY(-6px); box-shadow:var(--ds-shadow-lg,0 24px 50px -20px rgba(2,6,23,.5)); }
.cxv-cg--hover-tilt .cxv-cg-card:hover { transform:perspective(900px) rotateX(3deg) translateY(-4px); }
.cxv-cg--hover-zoom .cxv-cg-media .cxv-media { transition:transform .5s ease; }
.cxv-cg--hover-zoom .cxv-cg-card:hover .cxv-media { transform:scale(1.07); }
.cxv-cg--hover-grayscale .cxv-cg-media .cxv-media { filter:grayscale(1); transition:filter .45s ease; }
.cxv-cg--hover-grayscale .cxv-cg-card:hover .cxv-media { filter:grayscale(0); }

/* ── Text overlay on image (media_overlay=on) ── */
.cxv-cg--overlay .cxv-cg-card { min-height:clamp(260px,34vh,360px); justify-content:flex-end; }
.cxv-cg--overlay .cxv-cg-media { position:absolute; inset:0; aspect-ratio:auto; }
.cxv-cg--overlay .cxv-cg-body { position:relative; z-index:1; }
.cxv-cg--overlay .cxv-cg-body::before { content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(0deg, var(--ds-scrim-3,rgba(2,6,23,.82)), var(--ds-scrim,rgba(2,6,23,.25)) 55%, transparent); }
.cxv-cg--overlay .cxv-cg-ctitle { color:var(--ds-overlay-ink,#fff); }
.cxv-cg--overlay .cxv-cg-ctext  { color:color-mix(in srgb, var(--ds-overlay-ink,#fff) 85%, transparent); }
.cxv-cg--overlay .cxv-cg-ceyebrow { color:color-mix(in srgb, var(--ds-overlay-ink,#fff) 78%, transparent); }

/* ── Card typography ── */
.cxv-cg-ceyebrow { font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--ds-text-muted,#64748b); }
.cxv-cg-ctitle { font-family:var(--ds-font-heading,system-ui,sans-serif); font-size:1.16rem; font-weight:700;
  color:var(--ds-text-strong,#0f172a); margin:0; line-height:1.25; letter-spacing:-.01em; }
.cxv-cg-ctext { font-size:.92rem; line-height:1.6; color:var(--ds-text-muted,#475569); margin:0; }
.cxv-cg-clink { font-size:.85rem; font-weight:700; color:var(--ds-primary,#4f46e5); margin-top:.3rem; }
/* price/meta chips + add-to-cart (shown when content_grid is bound to products/services) */
.cxv-cg-cmeta { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.35rem; }
.cxv-cg-cmeta span { font-size:.9rem; font-weight:700; color:var(--ds-text-strong,#0f172a); }
.cxv-cg-cart { margin-top:.7rem; align-self:flex-start; }

/* ── catalog — the storefront browse block (filter rail + product grid). Token-only, dark-correct,
   collapses to one column on mobile (the rail becomes a scrollable strip). ── */
.cxv-cat-head { text-align:center; margin-bottom:clamp(1.5rem,4vw,2.5rem); }
.cxv-cat-head .cx-text { margin-top:.4rem; }
.cxv-cat-shell { display:grid; grid-template-columns:15rem minmax(0,1fr); gap:clamp(1.25rem,3vw,2.25rem); align-items:start; }
.cxv-cat-rail { position:sticky; top:5rem; display:flex; flex-direction:column; }
/* Sidebar rail = a premium card (surface + hairline + soft shadow), facets separated by dividers. */
.cxv-cat--f-sidebar .cxv-cat-rail, .cxv-cat--side-right .cxv-cat-rail {
  padding:1.1rem; border-radius:var(--ds-card-radius,16px); background:var(--ds-surface,#fff);
  border:1px solid var(--ds-border,rgba(148,163,184,.22)); box-shadow:var(--ds-card-shadow,0 12px 30px -18px rgba(2,6,23,.35)); }
/* Search — icon inside a pill, focus ring. */
.cxv-cat-search { position:relative; margin-bottom:.35rem; }
.cxv-cat-search::before { content:'⌕'; position:absolute; left:.7rem; top:50%; transform:translateY(-50%);
  font-size:1.05rem; color:var(--ds-text-muted,#94a3b8); pointer-events:none; }
.cxv-cat-search input { width:100%; box-sizing:border-box; padding:.6rem .8rem .6rem 2rem; font-size:.9rem;
  border-radius:var(--ds-radius-full,999px); border:1px solid var(--ds-border,rgba(148,163,184,.32));
  background:var(--ds-surface-2,#f1f5f9); color:var(--ds-text-strong,#0f172a); transition:border-color .18s, box-shadow .18s; }
.cxv-cat-search input:focus { outline:none; border-color:var(--ds-primary,#4f46e5);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--ds-primary,#4f46e5) 18%,transparent); }
/* Facet groups — <details>. In the sidebar they're open lists with an accent-tipped heading; the
   summary marker is hidden so it reads like a label. */
.cxv-cat-facet { padding:.9rem 0; border-top:1px solid var(--ds-border,rgba(148,163,184,.16)); }
.cxv-cat-facet:first-of-type { border-top:0; padding-top:.3rem; }
summary.cxv-cat-facet-h { display:flex; align-items:center; gap:.5rem; margin:0 0 .5rem; font-size:.7rem; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ds-text-muted,#64748b); cursor:pointer; list-style:none; }
summary.cxv-cat-facet-h::-webkit-details-marker { display:none; }
summary.cxv-cat-facet-h::before { content:''; width:.85rem; height:2px; border-radius:var(--ds-radius-sm,2px); background:var(--ds-primary,#4f46e5); }
.cxv-cat-facet-body { display:flex; flex-direction:column; gap:.1rem; }
/* Scroll-cap a long brand list so it doesn't dominate the rail. */
.cxv-cat-optlist { display:flex; flex-direction:column; gap:.1rem; max-height:15rem; overflow:auto; margin:-.2rem; padding:.2rem; }
.cxv-cat-optlist::-webkit-scrollbar { width:5px; } .cxv-cat-optlist::-webkit-scrollbar-thumb { background:var(--ds-border,rgba(148,163,184,.4)); border-radius:var(--ds-radius-full,9px); }
/* Options — hover slides an accent bar in; active fills; count is a pill badge. */
.cxv-cat-opt { position:relative; display:flex; justify-content:space-between; align-items:center; gap:.5rem;
  padding:.4rem .6rem; border-radius:var(--ds-radius-md,10px); font-size:.9rem; color:var(--ds-text-strong,#0f172a);
  text-decoration:none; transition:background .16s, color .16s; }
.cxv-cat-opt::before { content:''; position:absolute; left:0; top:50%; height:0; width:3px; border-radius:var(--ds-radius-sm,3px);
  background:var(--ds-primary,#4f46e5); transform:translateY(-50%); transition:height .18s; }
.cxv-cat-opt span { flex:none; min-width:1.4rem; text-align:center; font-size:.72rem; font-weight:700; padding:.05rem .4rem;
  border-radius:var(--ds-radius-full,999px); color:var(--ds-text-muted,#94a3b8); background:var(--ds-surface-2,#f1f5f9); }
.cxv-cat-opt:hover { background:var(--ds-surface-2,#f1f5f9); }
.cxv-cat-opt:hover::before { height:60%; }
.cxv-cat-opt.is-active { background:color-mix(in srgb,var(--ds-primary,#4f46e5) 12%,transparent); color:var(--ds-primary,#4f46e5); font-weight:700; }
.cxv-cat-opt.is-active::before { height:70%; }
.cxv-cat-opt.is-active span { color:var(--ds-on-primary,#fff); background:var(--ds-primary,#4f46e5); }
/* Price — labelled inputs + a filled Go button. */
.cxv-cat-price { display:flex; align-items:center; gap:.4rem; }
.cxv-cat-price input { width:100%; min-width:0; padding:.5rem .6rem; font-size:.85rem;
  border-radius:var(--ds-radius-md,9px); border:1px solid var(--ds-border,rgba(148,163,184,.32));
  background:var(--ds-surface-2,#f1f5f9); color:var(--ds-text-strong,#0f172a); }
.cxv-cat-price input:focus { outline:none; border-color:var(--ds-primary,#4f46e5); }
.cxv-cat-go { flex:none; font-size:.78rem; font-weight:700; color:var(--ds-on-primary,#fff); cursor:pointer;
  background:var(--ds-primary,#4f46e5); border:0; padding:.5rem .8rem; border-radius:var(--ds-radius-md,9px); }
/* In-stock — a real toggle switch row. */
.cxv-cat-switch { display:flex; align-items:center; justify-content:space-between; gap:.75rem; text-decoration:none;
  font-size:.9rem; font-weight:600; color:var(--ds-text-strong,#0f172a); padding:.15rem .2rem; }
.cxv-cat-switch-track { flex:none; width:2.4rem; height:1.35rem; border-radius:var(--ds-radius-full,999px);
  background:var(--ds-border,rgba(148,163,184,.5)); position:relative; transition:background .2s; }
.cxv-cat-switch-knob { position:absolute; top:2px; left:2px; width:calc(1.35rem - 4px); height:calc(1.35rem - 4px);
  border-radius:var(--ds-radius-full,50%); background:var(--ds-surface,#fff); box-shadow:0 1px 3px rgba(2,6,23,.35); transition:transform .2s; }
.cxv-cat-switch.is-on .cxv-cat-switch-track { background:var(--ds-primary,#4f46e5); }
.cxv-cat-switch.is-on .cxv-cat-switch-knob { transform:translateX(1.05rem); }
/* Clear — a proper outlined button. */
.cxv-cat-clear { display:inline-flex; align-items:center; gap:.4rem; margin-top:.6rem; font-size:.82rem; font-weight:600;
  color:var(--ds-text-muted,#64748b); background:none; border:1px solid var(--ds-border,rgba(148,163,184,.35));
  border-radius:var(--ds-radius-full,999px); cursor:pointer; text-decoration:none; padding:.4rem .9rem; justify-content:center; }
.cxv-cat-clear:hover { border-color:var(--ds-primary,#4f46e5); color:var(--ds-primary,#4f46e5); }
.cxv-cat-clear span { font-size:.72rem; }
.cxv-cat-toolbar { display:flex; align-items:center; justify-content:space-between; gap:1rem;
  margin-bottom:1.1rem; padding-bottom:.75rem; border-bottom:1px solid var(--ds-border,rgba(148,163,184,.22)); }
.cxv-cat-count { font-size:.85rem; color:var(--ds-text-muted,#64748b); }
.cxv-cat-sort select { padding:.4rem .6rem; font-size:.85rem; border-radius:var(--ds-radius-sm,8px);
  border:1px solid var(--ds-border,rgba(148,163,184,.35)); background:var(--ds-surface,#fff); color:var(--ds-text-strong,#0f172a); }
.cxv-cat-grid { display:grid; grid-template-columns:repeat(var(--cxv-cat-cols,3),minmax(0,1fr)); gap:clamp(1rem,2vw,1.5rem); }
.cxv-cat--cols-2 { --cxv-cat-cols:2; } .cxv-cat--cols-3 { --cxv-cat-cols:3; }
.cxv-cat--cols-4 { --cxv-cat-cols:4; } .cxv-cat--cols-5 { --cxv-cat-cols:5; }
.cxv-cat-card { display:flex; flex-direction:column; overflow:hidden; border-radius:var(--cxv-cat-radius,var(--ds-card-radius,14px));
  background:var(--ds-surface,#fff); transition:transform .2s, box-shadow .2s, border-color .2s; }
.cxv-cat--card-elevated .cxv-cat-card { box-shadow:var(--ds-card-shadow,0 12px 30px -16px rgba(2,6,23,.4)); border:1px solid transparent; }
.cxv-cat--card-bordered .cxv-cat-card { border:1px solid var(--ds-border,rgba(148,163,184,.25)); }
.cxv-cat--card-flat .cxv-cat-card { background:var(--ds-surface-2,#f1f5f9); }
.cxv-cat--card-glass .cxv-cat-card { background:color-mix(in srgb,var(--ds-surface,#fff) 68%,transparent);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border:1px solid color-mix(in srgb,var(--ds-border,#94a3b8) 40%,transparent); }
/* minimal = no card chrome, image + text only (a boutique/editorial look) */
.cxv-cat--card-minimal .cxv-cat-card { background:none; }
.cxv-cat--card-minimal .cxv-cat-body { padding-inline:0; }
/* overlay = copy sits OVER the image (fashion look) */
.cxv-cat--card-overlay .cxv-cat-card { position:relative; }
.cxv-cat--card-overlay .cxv-cat-media { aspect-ratio:var(--cxv-cat-aspect,3/4); }
.cxv-cat--card-overlay .cxv-cat-body { position:absolute; inset:auto 0 0 0; z-index:2;
  background:linear-gradient(0deg, color-mix(in srgb,black 72%,transparent), transparent);
  color:var(--ds-scrim-ink,#fff); padding:1rem; }
.cxv-cat--card-overlay .cxv-cat-title, .cxv-cat--card-overlay .cxv-cat-title a,
.cxv-cat--card-overlay .cxv-cat-price b { color:var(--ds-scrim-ink,#fff); }
.cxv-cat--card-overlay .cxv-cat-brand { color:color-mix(in srgb,white 78%,transparent); }
/* hover effects (default lift) */
.cxv-cat--hover-lift .cxv-cat-card:hover { transform:translateY(-4px); box-shadow:var(--ds-shadow-lg,0 20px 40px -20px rgba(2,6,23,.45)); }
.cxv-cat--hover-zoom .cxv-cat-card:hover .cxv-cat-media img { transform:scale(1.07); }
.cxv-cat--hover-glow .cxv-cat-card:hover { box-shadow:0 0 0 1px color-mix(in srgb,var(--ds-primary,#4f46e5) 50%,transparent),
  0 16px 40px -18px color-mix(in srgb,var(--ds-primary,#4f46e5) 55%,transparent); }
.cxv-cat-media { position:relative; aspect-ratio:var(--cxv-cat-aspect,1); background:var(--ds-surface-2,#f1f5f9);
  display:grid; place-items:center; overflow:hidden; }
.cxv-cat-media img { width:100%; height:100%; object-fit:var(--cxv-cat-fit,cover); transition:transform .35s cubic-bezier(.22,1,.36,1); }
/* image shape + fit + corner radius axes */
.cxv-cat--m-portrait  { --cxv-cat-aspect:3/4; } .cxv-cat--m-landscape { --cxv-cat-aspect:4/3; }
.cxv-cat--m-tall      { --cxv-cat-aspect:2/3; } .cxv-cat--m-square { --cxv-cat-aspect:1; }
.cxv-cat--fit-contain { --cxv-cat-fit:contain; }
.cxv-cat--fit-contain .cxv-cat-media { background:var(--ds-surface,#fff); }
.cxv-cat--r-sharp   { --cxv-cat-radius:0; }
.cxv-cat--r-rounded { --cxv-cat-radius:var(--ds-card-radius,14px); }
.cxv-cat--r-pill    { --cxv-cat-radius:var(--ds-radius-xl,26px); }
.cxv-cat-noimg { font-size:2rem; opacity:.5; }
.cxv-cat-badge { position:absolute; top:.6rem; left:.6rem; z-index:2; padding:.22rem .55rem; border-radius:var(--ds-radius-full,999px);
  font-size:.68rem; font-weight:700; color:var(--ds-on-primary,#fff); background:var(--ds-primary,#4f46e5); }
.cxv-cat-oos { position:absolute; inset:auto 0 0 0; z-index:2; padding:.3rem; text-align:center; font-size:.72rem; font-weight:700;
  color:var(--ds-on-primary,#fff); background:color-mix(in srgb,var(--ds-text-strong,#0f172a) 72%,transparent); }
.cxv-cat-body { display:flex; flex-direction:column; gap:.3rem; padding:clamp(.75rem,1.4vw,1.1rem); }
.cxv-cat-brand { font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ds-text-muted,#94a3b8); }
.cxv-cat-title { margin:0; font-size:.98rem; font-weight:600; line-height:1.3; color:var(--ds-text-strong,#0f172a); }
.cxv-cat-title a { color:inherit; text-decoration:none; }
.cxv-cat-title a:hover { color:var(--ds-primary,#4f46e5); }
a.cxv-cat-media { cursor:pointer; }
.cxv-cat-rating { font-size:.8rem; color:var(--ds-accent,#f59e0b); letter-spacing:.05em; }
.cxv-cat-rating i { color:var(--ds-text-muted,#94a3b8); font-style:normal; }
.cxv-cat-price { display:flex; align-items:baseline; gap:.5rem; margin-top:.1rem; }
.cxv-cat-price b { font-size:1.05rem; font-weight:800; color:var(--ds-text-strong,#0f172a); }
.cxv-cat-price s { font-size:.85rem; color:var(--ds-text-muted,#94a3b8); }
.cxv-cat-add { margin-top:.5rem; }
.cxv-cat-pager { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:2rem;
  padding-top:1.25rem; border-top:1px solid var(--ds-border,rgba(148,163,184,.22)); }
.cxv-cat-page { font-weight:600; color:var(--ds-primary,#4f46e5); text-decoration:none; }
.cxv-cat-pageinfo { font-size:.85rem; color:var(--ds-text-muted,#64748b); }
.cxv-cat-empty { text-align:center; padding:clamp(2rem,6vw,4rem); color:var(--ds-text-muted,#64748b); display:flex;
  flex-direction:column; align-items:center; gap:1rem; }
/* ── catalog PREMIUM MOTION — staggered card entrance, hover-reveal add-to-cart, image zoom +
   scrim, badge pop, loading shimmer. All CSS-only, reduced-motion safe, re-fires on filter swap. ── */
/* Staggered entrance: cards rise+fade in sequence on load AND on every island re-render (filter). */
.cxv-cat-grid .cxv-cat-card { animation:cxvCatCardIn .5s cubic-bezier(.22,1,.36,1) both; }
.cxv-cat-grid .cxv-cat-card:nth-child(1){animation-delay:.02s} .cxv-cat-grid .cxv-cat-card:nth-child(2){animation-delay:.06s}
.cxv-cat-grid .cxv-cat-card:nth-child(3){animation-delay:.10s} .cxv-cat-grid .cxv-cat-card:nth-child(4){animation-delay:.14s}
.cxv-cat-grid .cxv-cat-card:nth-child(5){animation-delay:.18s} .cxv-cat-grid .cxv-cat-card:nth-child(6){animation-delay:.22s}
.cxv-cat-grid .cxv-cat-card:nth-child(7){animation-delay:.26s} .cxv-cat-grid .cxv-cat-card:nth-child(8){animation-delay:.30s}
.cxv-cat-grid .cxv-cat-card:nth-child(n+9){animation-delay:.34s}
@keyframes cxvCatCardIn { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
/* A soft scrim rises over the image on hover (so the revealed button reads on any photo). */
.cxv-cat-media::after { content:''; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0;
  background:linear-gradient(0deg, color-mix(in srgb,black 55%,transparent), transparent 55%); transition:opacity .3s; }
.cxv-cat-card:hover .cxv-cat-media::after { opacity:1; }
/* Gentle image zoom on hover for EVERY card (the hover=zoom axis just goes further). */
.cxv-cat-card:hover .cxv-cat-media img { transform:scale(1.05); }
.cxv-cat--hover-zoom .cxv-cat-card:hover .cxv-cat-media img { transform:scale(1.09); }
/* Badge pops slightly on hover. */
.cxv-cat-badge { transition:transform .25s cubic-bezier(.34,1.56,.64,1); }
.cxv-cat-card:hover .cxv-cat-badge { transform:scale(1.06) translateY(-1px); }
/* Wishlist heart — top-right of the media, reveals on hover, fills + pops when saved (localStorage). */
.cxv-cat-wish { position:absolute; top:.55rem; right:.55rem; z-index:3; width:2.1rem; height:2.1rem; display:grid;
  place-items:center; cursor:pointer; border:0; border-radius:var(--ds-radius-full,50%);
  background:color-mix(in srgb,var(--ds-surface,#fff) 82%,transparent); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  box-shadow:0 2px 8px -2px rgba(2,6,23,.3); opacity:0; transform:scale(.8); transition:opacity .22s, transform .22s, background .2s; }
.cxv-cat-wish svg { width:1.15rem; height:1.15rem; fill:none; stroke:var(--ds-text-strong,#0f172a); stroke-width:2; transition:fill .2s, stroke .2s, transform .2s; }
.cxv-cat-card:hover .cxv-cat-wish, .cxv-cat-wish.is-saved { opacity:1; transform:scale(1); }
.cxv-cat-wish:hover { background:var(--ds-surface,#fff); }
.cxv-cat-wish:hover svg { stroke:var(--ds-danger,#e11d48); }
.cxv-cat-wish.is-saved svg { fill:var(--ds-danger,#e11d48); stroke:var(--ds-danger,#e11d48); animation:cxvWishPop .35s cubic-bezier(.34,1.56,.64,1); }
@keyframes cxvWishPop { 0%{transform:scale(.6)} 60%{transform:scale(1.25)} 100%{transform:scale(1)} }
@media (hover: none) { .cxv-cat-wish { opacity:1; transform:scale(1); } }
/* PREMIUM: add-to-cart REVEALS on card hover (fades + slides up). The button keeps its layout row
   (opacity, not display) so there's NO jump. On touch devices (no hover) it's always visible. */
@media (hover: hover) {
  .cxv-cat-add { opacity:0; transform:translateY(.45rem); pointer-events:none;
    transition:opacity .26s cubic-bezier(.22,1,.36,1), transform .26s cubic-bezier(.22,1,.36,1); }
  .cxv-cat-card:hover .cxv-cat-add, .cxv-cat-card:focus-within .cxv-cat-add { opacity:1; transform:translateY(0); pointer-events:auto; }
}
/* Loading shimmer: while the island fetches, the grid dims + a sweep passes over it. */
.cxv-cat.cx-catalog-loading .cxv-cat-main { opacity:.55; pointer-events:none; transition:opacity .2s; }
.cxv-cat.cx-catalog-loading .cxv-cat-grid { position:relative; overflow:hidden; }
.cxv-cat.cx-catalog-loading .cxv-cat-grid::after { content:''; position:absolute; inset:0; z-index:5; pointer-events:none;
  background:linear-gradient(105deg, transparent 40%, color-mix(in srgb,var(--ds-surface,#fff) 55%,transparent) 50%, transparent 60%);
  background-size:220% 100%; animation:cxvCatShimmer 1.1s linear infinite; }
@keyframes cxvCatShimmer { from { background-position:220% 0; } to { background-position:-40% 0; } }
@media (prefers-reduced-motion: reduce) {
  .cxv-cat-grid .cxv-cat-card { animation:none; }
  .cxv-cat-card:hover .cxv-cat-media img, .cxv-cat-card:hover .cxv-cat-badge { transform:none; }
  .cxv-cat.cx-catalog-loading .cxv-cat-grid::after { animation:none; }
}
@media (max-width:820px){
  .cxv-cat-shell { grid-template-columns:1fr; }
  .cxv-cat-rail { position:static; flex-flow:row wrap; gap:.6rem 1.2rem; padding-bottom:.75rem;
    border-bottom:1px solid var(--ds-border,rgba(148,163,184,.22)); }
  .cxv-cat--cols-3 .cxv-cat-grid, .cxv-cat--cols-4 .cxv-cat-grid { --cxv-cat-cols:2; }
}
@media (max-width:480px){ .cxv-cat-grid { --cxv-cat-cols:1 !important; } }

/* ── catalog DESIGN AXES — filter layout · rail side · density (per-tenant store shape) ── */
/* filters on the RIGHT */
.cxv-cat--side-right .cxv-cat-shell { grid-template-columns:minmax(0,1fr) 15rem; }
.cxv-cat--side-right .cxv-cat-rail { order:2; }
/* topbar — filters become a horizontal bar above the grid */
.cxv-cat--f-topbar .cxv-cat-shell { grid-template-columns:1fr; }
.cxv-cat--f-topbar .cxv-cat-rail { position:static; max-height:none; display:flex; flex-flow:row wrap;
  align-items:center; gap:.5rem 1.1rem; padding:.9rem 1.1rem; border-radius:var(--ds-radius-lg,14px);
  background:var(--ds-surface-2,#f1f5f9); border:1px solid var(--ds-border,rgba(148,163,184,.2)); }
/* Topbar — each facet is a compact DROPDOWN chip (not an inline wall). */
.cxv-cat--f-topbar .cxv-cat-facet { position:relative; border-top:0; padding:0; }
.cxv-cat--f-topbar summary.cxv-cat-facet-h { margin:0; padding:.5rem .85rem; border-radius:var(--ds-radius-full,999px);
  background:var(--ds-surface,#fff); border:1px solid var(--ds-border,rgba(148,163,184,.3)); color:var(--ds-text-strong,#0f172a);
  font-size:.75rem; }
.cxv-cat--f-topbar summary.cxv-cat-facet-h::before { display:none; }
.cxv-cat--f-topbar summary.cxv-cat-facet-h::after { content:'▾'; margin-left:.3rem; font-size:.9em; color:var(--ds-text-muted,#94a3b8); }
.cxv-cat--f-topbar .cxv-cat-facet[open] > summary.cxv-cat-facet-h { border-color:var(--ds-primary,#4f46e5); color:var(--ds-primary,#4f46e5); }
.cxv-cat--f-topbar .cxv-cat-facet-body { position:absolute; z-index:20; top:calc(100% + .4rem); left:0; min-width:13rem; max-height:20rem; overflow:auto;
  padding:.5rem; background:var(--ds-surface,#fff); border:1px solid var(--ds-border,rgba(148,163,184,.28));
  border-radius:var(--ds-radius-lg,14px); box-shadow:var(--ds-shadow-lg,0 20px 50px -20px rgba(2,6,23,.4)); }
.cxv-cat--f-topbar .cxv-cat-price { flex-flow:row nowrap; }
.cxv-cat--f-topbar .cxv-cat-facet .cxv-cat-opt { padding:.25rem .6rem; }
.cxv-cat--f-topbar .cxv-cat-search { flex:1 1 12rem; }
/* no filters — single column, wider grid */
.cxv-cat--f-none .cxv-cat-shell { grid-template-columns:1fr; }
/* drawer — the rail is a collapsible <details> above the grid (great on mobile) */
.cxv-cat--f-drawer .cxv-cat-shell { grid-template-columns:1fr; }
.cxv-cat-rail--drawer { position:static; max-height:none; border:1px solid var(--ds-border,rgba(148,163,184,.25));
  border-radius:var(--ds-radius-lg,14px); padding:0 1rem; }
.cxv-cat-drawer-toggle { cursor:pointer; padding:.7rem 0; font-weight:700; color:var(--ds-text-strong,#0f172a);
  list-style:none; }
.cxv-cat-rail--drawer[open] { padding-bottom:1rem; }
/* density — grid gap + card padding */
.cxv-cat--d-compact  .cxv-cat-grid { gap:.65rem; } .cxv-cat--d-compact  .cxv-cat-body { padding:.6rem .7rem; gap:.2rem; }
.cxv-cat--d-spacious .cxv-cat-grid { gap:clamp(1.5rem,3vw,2.5rem); } .cxv-cat--d-spacious .cxv-cat-body { padding:1.25rem; gap:.45rem; }

/* ── product_detail — the PDP body (gallery + info + related). Token-only, 1-col on mobile. ── */
.cxv-pdp-unlinked { display:flex; flex-direction:column; align-items:center; gap:.3rem; text-align:center;
  padding:clamp(2rem,6vw,4rem); border-radius:var(--ds-radius-lg,16px); font-size:1.4rem;
  border:1px dashed var(--ds-border,rgba(148,163,184,.5)); color:var(--ds-text-strong,#0f172a);
  background:color-mix(in srgb,var(--ds-primary,#4f46e5) 4%,var(--ds-surface,#fff)); }
.cxv-pdp-unlinked span { font-size:.9rem; color:var(--ds-text-muted,#64748b); }
.cxv-pdp-grid { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(1.5rem,4vw,3.5rem); align-items:start; }
.cxv-pdp-hero { aspect-ratio:1; border-radius:var(--ds-card-radius,16px); overflow:hidden; background:var(--ds-surface-2,#f1f5f9);
  display:grid; place-items:center; border:1px solid var(--ds-border,rgba(148,163,184,.2)); }
.cxv-pdp-hero img { width:100%; height:100%; object-fit:cover; }
.cxv-pdp-hero--empty { font-size:3rem; opacity:.4; }
.cxv-pdp-thumbs { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.8rem; }
.cxv-pdp-thumb { width:4.2rem; height:4.2rem; padding:0; border-radius:var(--ds-radius-md,10px); overflow:hidden; cursor:pointer;
  border:2px solid transparent; background:var(--ds-surface-2,#f1f5f9); }
.cxv-pdp-thumb img { width:100%; height:100%; object-fit:cover; }
.cxv-pdp-thumb.is-active { border-color:var(--ds-primary,#4f46e5); }
.cxv-pdp-gallery--stack .cxv-pdp-thumbs { flex-direction:column; }
.cxv-pdp-gallery--stack .cxv-pdp-thumb { width:100%; height:5.5rem; }
.cxv-pdp-info { display:flex; flex-direction:column; gap:.7rem; }
.cxv-pdp-brand { font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ds-text-muted,#94a3b8); }
.cxv-pdp-title { margin:0; font-size:clamp(1.6rem,3.5vw,2.4rem); }
.cxv-pdp-rating { font-size:.95rem; color:var(--ds-accent,#f59e0b); letter-spacing:.06em; }
.cxv-pdp-rating i { color:var(--ds-text-muted,#94a3b8); font-style:normal; font-size:.85rem; }
.cxv-pdp-price { display:flex; align-items:baseline; gap:.6rem; margin-top:.2rem; }
.cxv-pdp-price b { font-size:1.6rem; font-weight:800; color:var(--ds-text-strong,#0f172a); }
.cxv-pdp-price s { font-size:1rem; color:var(--ds-text-muted,#94a3b8); }
.cxv-pdp-stock { margin:0; font-size:.85rem; font-weight:600; }
.cxv-pdp-stock--in { color:var(--ds-success,#16a34a); }
.cxv-pdp-stock--out { color:var(--ds-danger,#dc2626); }
.cxv-pdp-desc { color:var(--ds-text-muted,#475569); line-height:1.7; margin-top:.3rem; }
.cxv-pdp-cta { margin-top:.6rem; }
.cxv-pdp-add { min-width:12rem; }
.cxv-pdp-sku { margin:0; font-size:.75rem; color:var(--ds-text-muted,#94a3b8); }
.cxv-pdp-related { margin-top:clamp(2.5rem,6vw,4rem); }
.cxv-pdp-related h2 { margin-bottom:1.2rem; }
.cxv-pdp-related-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(11rem,1fr)); gap:clamp(1rem,2vw,1.5rem); }
.cxv-pdp-rel-card { display:flex; flex-direction:column; gap:.35rem; text-decoration:none; }
.cxv-pdp-rel-media { aspect-ratio:1; border-radius:var(--ds-radius-md,12px); overflow:hidden; background:var(--ds-surface-2,#f1f5f9);
  display:grid; place-items:center; }
.cxv-pdp-rel-media img { width:100%; height:100%; object-fit:cover; }
.cxv-pdp-rel-title { font-size:.9rem; font-weight:600; color:var(--ds-text-strong,#0f172a); }
.cxv-pdp-rel-price { font-size:.85rem; font-weight:700; color:var(--ds-primary,#4f46e5); }
.cxv-pdp-reviews { margin-top:clamp(2.5rem,6vw,4rem); max-width:44rem; }
.cxv-pdp-reviews-head { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:1.2rem; }
.cxv-pdp-reviews-avg { font-size:.95rem; font-weight:700; color:var(--ds-accent,#f59e0b); }
.cxv-pdp-reviews-avg i { color:var(--ds-text-muted,#94a3b8); font-style:normal; font-weight:500; font-size:.85rem; }
.cxv-pdp-review-list { display:flex; flex-direction:column; gap:1rem; margin-bottom:1.5rem; }
.cxv-pdp-review { padding:1rem 1.1rem; border-radius:var(--ds-radius-md,12px); border:1px solid var(--ds-border,rgba(148,163,184,.22)); }
.cxv-pdp-review-top { display:flex; align-items:center; gap:.7rem; margin-bottom:.35rem; }
.cxv-pdp-review-top b { color:var(--ds-text-strong,#0f172a); font-size:.92rem; }
.cxv-pdp-review-stars { color:var(--ds-accent,#f59e0b); font-size:.85rem; }
.cxv-pdp-review-top time { margin-left:auto; font-size:.75rem; color:var(--ds-text-muted,#94a3b8); }
.cxv-pdp-review p { margin:0; font-size:.9rem; line-height:1.6; color:var(--ds-text-muted,#475569); }
.cxv-pdp-review-none { color:var(--ds-text-muted,#64748b); font-size:.9rem; margin:0 0 1.25rem; }
.cxv-pdp-review-form { display:flex; flex-direction:column; gap:.6rem; padding:1.1rem; border-radius:var(--ds-radius-lg,14px);
  background:var(--ds-surface-2,#f1f5f9); border:1px solid var(--ds-border,rgba(148,163,184,.2)); }
.cxv-pdp-review-formh { margin:0; font-weight:700; color:var(--ds-text-strong,#0f172a); }
.cxv-pdp-review-row { display:flex; gap:.6rem; }
.cxv-pdp-review-row input { flex:1; }
.cxv-pdp-review-form input, .cxv-pdp-review-form select, .cxv-pdp-review-form textarea {
  padding:.55rem .7rem; font-size:.9rem; border-radius:var(--ds-radius-md,10px); font-family:inherit;
  border:1px solid var(--ds-border,rgba(148,163,184,.35)); background:var(--ds-surface,#fff); color:var(--ds-text-strong,#0f172a); }
.cxv-pdp-review-form button { align-self:flex-start; }
@media (max-width:760px){ .cxv-pdp-grid { grid-template-columns:1fr; } }

/* ── mini-cart dock — floating cart button + slide-in drawer on V3 pages (loads the existing
   shopping cart sidebar → checkout). Hidden until the shop confirms it's active. Token-only. ── */
/* Bottom-LEFT so it never collides with the editor "Edit" chrome / dark-toggle (bottom-right). */
.cx-cartdock { position:fixed; z-index:60; left:max(1rem, env(safe-area-inset-left));
  bottom:max(1rem, env(safe-area-inset-bottom)); display:none; }
.cx-cartdock.is-ready { display:block; }
.cx-cartdock-btn { display:inline-flex; align-items:center; gap:.5rem; padding:.7rem 1.1rem; cursor:pointer;
  border:0; border-radius:var(--ds-radius-full,999px); font-weight:700; font-size:.9rem;
  color:var(--ds-on-primary,#fff); background:var(--ds-primary,#4f46e5); box-shadow:var(--ds-shadow-lg,0 12px 30px -10px rgba(2,6,23,.5)); }
.cx-cartdock-count { min-width:1.3rem; height:1.3rem; padding:0 .35rem; display:inline-grid; place-items:center;
  border-radius:var(--ds-radius-full,999px); font-size:.75rem; background:color-mix(in srgb,black 22%,var(--ds-primary,#4f46e5)); }
.cx-cartdock-scrim { position:fixed; inset:0; z-index:59; background:color-mix(in srgb,black 45%,transparent);
  opacity:0; pointer-events:none; transition:opacity .25s; }
.cx-cartdock-scrim.is-open { opacity:1; pointer-events:auto; }
.cx-cartdrawer, .cx-cartdock-panel { position:fixed; z-index:61; top:0; right:0; height:100dvh; width:min(24rem,92vw);
  background:var(--ds-surface,#fff); box-shadow:var(--ds-shadow-lg,-12px 0 40px -12px rgba(2,6,23,.4));
  transform:translateX(100%); transition:transform .28s cubic-bezier(.22,1,.36,1); display:flex; flex-direction:column;
  padding:1.1rem; overflow:auto; }
.cx-cartdock-panel.is-open { transform:translateX(0); }
.cx-cartdock-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:.8rem; }
.cx-cartdock-head b { font-size:1.05rem; color:var(--ds-text-strong,#0f172a); }
.cx-cartdock-close { background:none; border:0; font-size:1.4rem; cursor:pointer; color:var(--ds-text-muted,#64748b); }
@media (prefers-reduced-motion:reduce){ .cx-cartdock-panel, .cx-cartdock-scrim { transition:none; } }

/* ── Badge (option chip) ── */
.cxv-cg-badge { position:absolute; top:.7rem; left:.7rem; z-index:2; padding:.28rem .62rem;
  border-radius:var(--ds-radius-full,999px); font-size:.66rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; background:var(--ds-primary,#4f46e5); color:var(--ds-on-primary,#fff); }
.cxv-cg-badge--bare { position:static; align-self:flex-start; margin:1rem 1rem -.2rem; }

/* ── Stretched whole-card link ── */
.cxv-cg-cardlink { position:absolute; inset:0; z-index:4; }
.cxv-cg-card:hover .cxv-cg-clink { text-decoration:underline; }

/* ── Scroll entrance (reveal=on + animation style). Cards start hidden and settle to their
   natural position once JS adds .is-in (staggered). `draw` also animates the process nodes /
   numbers / connectors. All initial-hidden states are gated to (prefers-reduced-motion:
   no-preference) so reduced-motion users see everything, static — no motion, nothing hidden. */
@media (prefers-reduced-motion:no-preference){
  .cxv-cg--reveal .cxv-cg-card { transition:opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1); }
  .cxv-cg--reveal .cxv-cg-card:not(.is-in) { opacity:0; }
  .cxv-cg--anim-rise .cxv-cg-card:not(.is-in) { transform:translateY(18px); }
  .cxv-cg--anim-zoom .cxv-cg-card:not(.is-in) { transform:scale(.92); }
  .cxv-cg--anim-draw .cxv-cg-card:not(.is-in) { transform:translateY(14px); }
  /* journey: cards slide in from their own side */
  .cxv-cg--anim-draw.cxv-cg--journey .cxv-cg-card:nth-child(odd):not(.is-in)  { transform:translateX(-26px); }
  .cxv-cg--anim-draw.cxv-cg--journey .cxv-cg-card:nth-child(even):not(.is-in) { transform:translateX(26px); }
  /* draw: process nodes / step numbers pop, step connectors grow — tied to each card's .is-in */
  .cxv-cg--anim-draw.cxv-cg--timeline .cxv-cg-card::before,
  .cxv-cg--anim-draw.cxv-cg--journey  .cxv-cg-card::before,
  .cxv-cg--anim-draw.cxv-cg--steps    .cxv-cg-card::before { transition:transform .5s cubic-bezier(.34,1.56,.64,1), opacity .4s; }
  .cxv-cg--anim-draw.cxv-cg--timeline .cxv-cg-card:not(.is-in)::before,
  .cxv-cg--anim-draw.cxv-cg--journey  .cxv-cg-card:not(.is-in)::before { transform:scale(0); opacity:0; }
  .cxv-cg--anim-draw.cxv-cg--steps    .cxv-cg-card:not(.is-in)::before { transform:translateX(-50%) scale(0); opacity:0; }
  .cxv-cg--anim-draw.cxv-cg--steps    .cxv-cg-card::after { transition:transform .6s ease .08s; transform-origin:left; }
  .cxv-cg--anim-draw.cxv-cg--steps    .cxv-cg-card:not(.is-in)::after { transform:scaleX(0); }
}

/* ── Carousel nav arrows ── */
.cxv-cg-nav { display:flex; justify-content:flex-end; gap:.5rem; margin-top:1rem; }
.cxv-cg-arrow { width:42px; height:42px; border-radius:var(--ds-radius-full,50%);
  border:1px solid var(--ds-border,rgba(148,163,184,.3)); background:var(--ds-surface,#fff);
  color:var(--ds-text-strong,#0f172a); font-size:1.35rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:border-color .15s, color .15s; }
.cxv-cg-arrow:hover { border-color:var(--ds-primary,#4f46e5); color:var(--ds-primary,#4f46e5); }

/* ── Converge stage (display=converge): scattered chips wire into one glowing hub,
   above the cards. Ported from the V1 value_prop converge look — token-clean, Mode-A
   adaptive (flips with cx-dark for free). Cards below render as the normal grid. ── */
.cxv-cg--converge .cxv-cg-cvstage {
  position:relative; width:100%; max-width:40rem; height:232px;
  margin:clamp(1.5rem,4vh,2.75rem) auto; isolation:isolate;
}
.cxv-cg--converge .cxv-cg-cvwires { position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.cxv-cg--converge .cxv-cg-cvwire {
  fill:none; stroke:color-mix(in srgb, var(--ds-primary,#4f46e5) 55%, transparent);
  stroke-width:.5; stroke-dasharray:2.4 3.2; opacity:.55; animation:cxv-cvflow 2.6s linear infinite;
}
.cxv-cg--converge .cxv-cg-cvhub {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:84px; height:84px; border-radius:var(--ds-radius-full,50%); z-index:3;
  display:grid; place-items:center; font-size:1.5rem; font-family:var(--ds-font-heading,system-ui,sans-serif);
  color:var(--ds-on-primary,#fff);
  background:linear-gradient(135deg, var(--ds-primary,#4f46e5), var(--ds-accent,#6366f1));
  box-shadow:0 12px 30px -8px color-mix(in srgb, var(--ds-primary,#4f46e5) 55%, transparent),
             inset 0 1px 0 color-mix(in srgb, var(--ds-on-primary,#fff) 35%, transparent);
}
.cxv-cg--converge .cxv-cg-cvhub::before,
.cxv-cg--converge .cxv-cg-cvhub::after {
  content:''; position:absolute; inset:0; border-radius:var(--ds-radius-full,50%);
  border:1px solid var(--ds-border,rgba(148,163,184,.28)); z-index:-1;
}
.cxv-cg--converge .cxv-cg-cvhub::before { inset:-22px; animation:cxv-cvpulse 3.4s ease-in-out infinite; }
.cxv-cg--converge .cxv-cg-cvhub::after  { inset:-46px; animation:cxv-cvpulse 3.4s ease-in-out infinite .6s; }
.cxv-cg--converge .cxv-cg-cvchip {
  position:absolute; z-index:2; transform:translate(-50%,-50%);
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  padding:7px 11px; border-radius:var(--ds-radius-md,12px);
  font-size:.74rem; font-weight:700; font-family:var(--ds-font-body,system-ui,sans-serif);
  color:var(--ds-text-muted,#475569); background:var(--ds-surface,#fff);
  border:1px solid var(--ds-border,rgba(148,163,184,.2));
  box-shadow:var(--ds-shadow-sm,0 6px 16px -8px rgba(15,23,42,.28));
  animation:cxv-cvdrift 5s ease-in-out infinite;
}
/* chip positions — the SVG is child 1, chips are 2–7, hub is last (by class) */
.cxv-cg--converge .cxv-cg-cvchip:nth-child(2){ top:15%; left:15%; animation-delay:0s; }
.cxv-cg--converge .cxv-cg-cvchip:nth-child(3){ top:17%; left:84%; animation-delay:.5s; }
.cxv-cg--converge .cxv-cg-cvchip:nth-child(4){ top:52%; left:7%;  animation-delay:1s; }
.cxv-cg--converge .cxv-cg-cvchip:nth-child(5){ top:50%; left:92%; animation-delay:1.5s; }
.cxv-cg--converge .cxv-cg-cvchip:nth-child(6){ top:86%; left:22%; animation-delay:2s; }
.cxv-cg--converge .cxv-cg-cvchip:nth-child(7){ top:85%; left:80%; animation-delay:2.5s; }
@keyframes cxv-cvdrift { 0%,100%{ transform:translate(-50%,-50%); } 50%{ transform:translate(-50%,calc(-50% - 5px)); } }
@keyframes cxv-cvpulse { 0%,100%{ opacity:.7; transform:scale(1); } 50%{ opacity:.25; transform:scale(1.06); } }
@keyframes cxv-cvflow  { to { stroke-dashoffset:-22; } }
@media (max-width:720px){
  .cxv-cg--converge .cxv-cg-cvstage { height:200px; max-width:22rem; }
  .cxv-cg--converge .cxv-cg-cvchip { font-size:.68rem; padding:6px 9px; }
  .cxv-cg--converge .cxv-cg-cvchip:nth-child(3),
  .cxv-cg--converge .cxv-cg-cvchip:nth-child(5){ display:none; }
}

/* ── Layout: TIMELINE (vertical connected steps — process / roadmap) ── */
.cxv-cg--timeline .cxv-cg-track { display:flex; flex-direction:column; gap:0; position:relative; padding-left:2.4rem; }
.cxv-cg--timeline .cxv-cg-track::before { content:''; position:absolute; left:.6rem; top:.6rem; bottom:.6rem;
  width:2px; background:color-mix(in srgb, var(--ds-primary,#4f46e5) 32%, var(--ds-border,rgba(148,163,184,.3))); }
.cxv-cg--timeline .cxv-cg-card { position:relative; margin-bottom:clamp(1rem,2vw,1.6rem); }
.cxv-cg--timeline .cxv-cg-card:last-child { margin-bottom:0; }
.cxv-cg--timeline .cxv-cg-card::before { content:''; position:absolute; left:-2.05rem; top:1.5rem;
  width:13px; height:13px; border-radius:var(--ds-radius-full,50%); background:var(--ds-primary,#4f46e5);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--ds-primary,#4f46e5) 18%, transparent); z-index:2; }

/* ── Layout: SPLIT (alternating image / copy — BOUNDED feature rows). Inherits the card
   chrome (bg/border/shadow) + overflow:hidden so it's fully contained: image edge-to-edge on
   one side, padded copy on the other. Contained-in-flow ⇒ cannot bleed into the next section. ── */
.cxv-cg--split .cxv-cg-track { display:flex; flex-direction:column; gap:clamp(1.2rem,3vw,2rem); }
.cxv-cg--split .cxv-cg-card { display:grid; grid-template-columns:1fr 1fr; align-items:stretch; overflow:hidden; }
.cxv-cg--split .cxv-cg-media { aspect-ratio:auto; height:100%; min-height:clamp(200px,26vw,320px); }
.cxv-cg--split .cxv-cg-body { padding:clamp(1.2rem,2.6vw,2.2rem); justify-content:center; }
.cxv-cg--split .cxv-cg-card:nth-child(even) .cxv-cg-media { order:2; }
@media (max-width:720px){
  .cxv-cg--split .cxv-cg-card { grid-template-columns:1fr; }
  .cxv-cg--split .cxv-cg-card:nth-child(even) .cxv-cg-media { order:0; }
  .cxv-cg--split .cxv-cg-media { min-height:200px; }
}

/* ── Layout: SPOTLIGHT (first card = big hero tile, rest a supporting grid) ── */
.cxv-cg--spotlight .cxv-cg-card:first-child { grid-column:1 / -1; display:grid;
  grid-template-columns:1.25fr 1fr; align-items:stretch; }
.cxv-cg--spotlight .cxv-cg-card:first-child .cxv-cg-media { aspect-ratio:auto; height:100%;
  min-height:clamp(220px,32vh,340px); }
.cxv-cg--spotlight .cxv-cg-card:first-child .cxv-cg-body { align-self:center; padding:clamp(1.4rem,2.4vw,2.2rem); }
.cxv-cg--spotlight .cxv-cg-card:first-child .cxv-cg-ctitle { font-size:1.5rem; }
@media (max-width:720px){
  .cxv-cg--spotlight .cxv-cg-card:first-child { grid-template-columns:1fr; }
  .cxv-cg--spotlight .cxv-cg-card:first-child .cxv-cg-media { min-height:200px; }
}

/* ── Layout: STEPS (horizontal numbered "how it works" — auto-numbered via CSS counter,
   the number IS the visual so media is hidden). Scrolls if many; stacks ≤640px. ── */
.cxv-cg--steps .cxv-cg-track { display:grid; grid-auto-flow:column;
  grid-auto-columns:minmax(clamp(150px,20vw,240px),1fr); gap:clamp(1rem,2.5vw,2.2rem);
  counter-reset:cxstep; overflow-x:auto; scrollbar-width:none; padding-bottom:.4rem; }
.cxv-cg--steps .cxv-cg-track::-webkit-scrollbar { display:none; }
.cxv-cg--steps .cxv-cg-card { position:relative; text-align:center; padding-top:3.8rem;
  background:transparent; border:0; box-shadow:none; overflow:visible; }
.cxv-cg--steps .cxv-cg-card::before { counter-increment:cxstep; content:counter(cxstep);
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:2.8rem; height:2.8rem; border-radius:var(--ds-radius-full,50%); display:grid; place-items:center;
  font-family:var(--ds-font-heading,system-ui,sans-serif); font-weight:800; font-size:1.05rem;
  color:var(--ds-on-primary,#fff);
  background:linear-gradient(135deg,var(--ds-primary,#4f46e5),var(--ds-accent,#6366f1));
  box-shadow:0 8px 20px -8px color-mix(in srgb,var(--ds-primary,#4f46e5) 55%,transparent); z-index:2; }
.cxv-cg--steps .cxv-cg-card:not(:last-child)::after { content:''; position:absolute; top:1.4rem;
  left:calc(50% + 1.4rem); width:calc(100% + clamp(1rem,2.5vw,2.2rem) - 2.8rem); height:2px; z-index:0;
  background:color-mix(in srgb,var(--ds-primary,#4f46e5) 28%,var(--ds-border,rgba(148,163,184,.3))); }
.cxv-cg--steps .cxv-cg-media { display:none; }
.cxv-cg--steps .cxv-cg-body { align-items:center; padding-inline:.4rem; }
@media (max-width:640px){
  .cxv-cg--steps .cxv-cg-track { grid-auto-flow:row; grid-auto-columns:auto; overflow:visible; gap:1.5rem; }
  .cxv-cg--steps .cxv-cg-card:not(:last-child)::after { display:none; }
}

/* ── Layout: JOURNEY (centered vertical timeline, cards alternate sides, numbered nodes on
   the spine — milestones / story). Transparent blocks; ≤720px collapses to a left rail. ── */
.cxv-cg--journey .cxv-cg-track { display:flex; flex-direction:column; gap:0; position:relative; counter-reset:cxjrn; }
.cxv-cg--journey .cxv-cg-track::before { content:''; position:absolute; left:50%; top:.5rem; bottom:.5rem;
  width:2px; transform:translateX(-50%);
  background:color-mix(in srgb,var(--ds-primary,#4f46e5) 30%,var(--ds-border,rgba(148,163,184,.3))); }
.cxv-cg--journey .cxv-cg-card { position:relative; width:calc(50% - 2.4rem); margin-bottom:clamp(1rem,2vw,1.6rem);
  background:transparent; border:0; box-shadow:none; overflow:visible; }
.cxv-cg--journey .cxv-cg-card:last-child { margin-bottom:0; }
.cxv-cg--journey .cxv-cg-card:nth-child(odd)  { align-self:flex-start; }
.cxv-cg--journey .cxv-cg-card:nth-child(even) { align-self:flex-end; }
.cxv-cg--journey .cxv-cg-media { border-radius:var(--ds-card-radius,16px); }
.cxv-cg--journey .cxv-cg-card::before { counter-increment:cxjrn; content:counter(cxjrn);
  position:absolute; top:1.1rem; width:2.3rem; height:2.3rem; border-radius:var(--ds-radius-full,50%);
  display:grid; place-items:center; font-family:var(--ds-font-heading,system-ui,sans-serif);
  font-weight:800; font-size:.85rem; color:var(--ds-on-primary,#fff); z-index:2;
  background:linear-gradient(135deg,var(--ds-primary,#4f46e5),var(--ds-accent,#6366f1));
  box-shadow:0 0 0 4px color-mix(in srgb,var(--ds-primary,#4f46e5) 16%,transparent); }
.cxv-cg--journey .cxv-cg-card:nth-child(odd)::before  { right:-3.55rem; }
.cxv-cg--journey .cxv-cg-card:nth-child(even)::before { left:-3.55rem; }
@media (max-width:720px){
  .cxv-cg--journey .cxv-cg-track { padding-left:2.4rem; }
  .cxv-cg--journey .cxv-cg-track::before { left:.6rem; }
  .cxv-cg--journey .cxv-cg-card { width:auto; align-self:stretch; }
  .cxv-cg--journey .cxv-cg-card:nth-child(odd)::before,
  .cxv-cg--journey .cxv-cg-card:nth-child(even)::before { left:-2.95rem; right:auto; }
}

@media (prefers-reduced-motion:reduce){
  .cxv-cg-card, .cxv-cg--reveal .cxv-cg-card { transition:none; transform:none; opacity:1; }
  .cxv-cg--carousel .cxv-cg-track, .cxv-cg--dual_row .cxv-cg-track { scroll-behavior:auto; }
  .cxv-cg--converge .cxv-cg-cvchip, .cxv-cg--converge .cxv-cg-cvwire,
  .cxv-cg--converge .cxv-cg-cvhub::before, .cxv-cg--converge .cxv-cg-cvhub::after { animation:none; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   photo_gallery — the super-rich STATIC gallery. One template; classes drive it.
   Token-only, light/dark-adaptive. Contract: docs/design/composer-hero-contract.md.
   ══════════════════════════════════════════════════════════════════════════════ */
.cxv-pg-head { margin-bottom:clamp(1.4rem,3.5vh,2.4rem); }

/* ── Filter chips ── */
.cxv-pg-filter { display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin-bottom:clamp(1.2rem,3vh,2rem); }
.cxv-pg-chip { padding:.42rem .95rem; border-radius:var(--ds-radius-full,999px); cursor:pointer; font:inherit;
  font-size:.8rem; font-weight:600; border:1px solid var(--ds-border,rgba(148,163,184,.3));
  background:var(--ds-surface,#fff); color:var(--ds-text-muted,#475569); transition:all .15s; }
.cxv-pg-chip:hover { color:var(--ds-text-strong,#0f172a); border-color:var(--ds-primary,#4f46e5); }
.cxv-pg-chip.is-active { background:var(--ds-primary,#4f46e5); color:var(--ds-on-primary,#fff); border-color:transparent; }

/* ── Gap + radius scales ── */
.cxv-pg--gap-tight  .cxv-pg-grid { gap:.4rem; } .cxv-pg--gap-tight  .cxv-pg-item { margin-bottom:.4rem; }
.cxv-pg--gap-normal .cxv-pg-grid { gap:clamp(.7rem,1.6vw,1.1rem); } .cxv-pg--gap-normal .cxv-pg-item { margin-bottom:clamp(.7rem,1.6vw,1.1rem); }
.cxv-pg--gap-roomy  .cxv-pg-grid { gap:clamp(1.2rem,2.6vw,1.9rem); } .cxv-pg--gap-roomy  .cxv-pg-item { margin-bottom:clamp(1.2rem,2.6vw,1.9rem); }
.cxv-pg--r-sharp .cxv-pg-item, .cxv-pg--r-sharp .cxv-pg-item .cxv-media { border-radius:0; }
.cxv-pg--r-soft  .cxv-pg-item { border-radius:var(--ds-card-radius,14px); }
.cxv-pg--r-round .cxv-pg-item { border-radius:var(--ds-radius-xl,24px); }

/* ── Item base ── */
.cxv-pg-item { position:relative; overflow:hidden; margin:0; background:var(--ds-surface-2,#f1f5f9);
  transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .3s; }
.cxv-pg-item .cxv-media { width:100%; height:100%; object-fit:cover; display:block; }
.cxv-pg--lightbox .cxv-pg-item { cursor:zoom-in; }

/* ── Card glow (card_glow=on) — brand backlight on each photo tile (box-shadow reads outside
   the tile's overflow). Breathes with glow_animate. Mirrors content_grid's card glow. ── */
.cxv-pg.cxv-pg--cardglow .cxv-pg-item { box-shadow:
  0 12px 34px -12px color-mix(in srgb, var(--ds-primary,#4f46e5) 52%, transparent),
  0 0 0 1px color-mix(in srgb, var(--ds-primary,#4f46e5) 14%, transparent); }
.cxv-pg.cxv-pg--cardglow .cxv-pg-item:hover { box-shadow:
  0 18px 46px -14px color-mix(in srgb, var(--ds-primary,#4f46e5) 68%, transparent),
  0 0 0 1px color-mix(in srgb, var(--ds-primary,#4f46e5) 24%, transparent); }
@media (prefers-reduced-motion:no-preference){
  .cxv-glow-anim.cxv-pg--cardglow .cxv-pg-item { animation:cxvCardGlow 3.8s ease-in-out infinite; }
}
/* device layouts (phone/browser/duo) have no .cxv-pg-item — the glow attaches to the device
   frame instead. drop-shadow stacks over the frame's own chrome shadow (box-shadow would clobber it). */
.cxv-pg.cxv-pg--cardglow .cx-phone,
.cxv-pg.cxv-pg--cardglow .cx-browser {
  filter:drop-shadow(0 16px 42px color-mix(in srgb, var(--ds-primary,#4f46e5) 55%, transparent)); }
@media (prefers-reduced-motion:no-preference){
  .cxv-glow-anim.cxv-pg--cardglow .cx-phone,
  .cxv-glow-anim.cxv-pg--cardglow .cx-browser { animation:cxvDeviceGlow 3.8s ease-in-out infinite; }
  @keyframes cxvDeviceGlow {
    0%,100% { filter:drop-shadow(0 16px 42px color-mix(in srgb, var(--ds-primary,#4f46e5) 52%, transparent)); }
    50%     { filter:drop-shadow(0 16px 56px color-mix(in srgb, var(--ds-primary,#4f46e5) 82%, transparent)); } }
}

/* ── Layout: GRID ── */
.cxv-pg--grid .cxv-pg-grid { display:grid; }
.cxv-pg--grid.cxv-pg--cols2 .cxv-pg-grid { grid-template-columns:repeat(2,1fr); }
.cxv-pg--grid.cxv-pg--cols3 .cxv-pg-grid { grid-template-columns:repeat(3,1fr); }
.cxv-pg--grid.cxv-pg--cols4 .cxv-pg-grid { grid-template-columns:repeat(4,1fr); }
.cxv-pg--grid.cxv-pg--cols5 .cxv-pg-grid { grid-template-columns:repeat(5,1fr); }
.cxv-pg--grid .cxv-pg--aspect-square    .cxv-pg-item, .cxv-pg--grid.cxv-pg--aspect-square    .cxv-pg-item { aspect-ratio:1/1; }
.cxv-pg--grid.cxv-pg--aspect-landscape .cxv-pg-item { aspect-ratio:4/3; }
.cxv-pg--grid.cxv-pg--aspect-portrait  .cxv-pg-item { aspect-ratio:3/4; }
.cxv-pg--grid.cxv-pg--aspect-wide      .cxv-pg-item { aspect-ratio:16/9; }
.cxv-pg--grid.cxv-pg--aspect-original  .cxv-pg-item { aspect-ratio:auto; }
.cxv-pg--grid.cxv-pg--aspect-original .cxv-pg-item .cxv-media { height:auto; }

/* ── Layout: MASONRY (CSS columns) ── */
.cxv-pg--masonry .cxv-pg-grid { display:block; }
.cxv-pg--masonry.cxv-pg--cols2 .cxv-pg-grid { columns:2; } .cxv-pg--masonry.cxv-pg--cols3 .cxv-pg-grid { columns:3; }
.cxv-pg--masonry.cxv-pg--cols4 .cxv-pg-grid { columns:4; } .cxv-pg--masonry.cxv-pg--cols5 .cxv-pg-grid { columns:5; }
.cxv-pg--masonry .cxv-pg-item { break-inside:avoid; display:inline-block; width:100%; }
.cxv-pg--masonry .cxv-pg-item .cxv-media { height:auto; }

/* ── Layout: JUSTIFIED (Flickr rows — equal height, flex-grow to fill) ── */
.cxv-pg--justified .cxv-pg-grid { display:flex; flex-wrap:wrap; }
.cxv-pg--justified .cxv-pg-item { height:clamp(160px,22vw,240px); flex:1 1 auto; }
.cxv-pg--justified .cxv-pg-item .cxv-media { width:100%; height:100%; }

/* ── Layout: BENTO (dense grid, featured tiles span 2×2) ── */
.cxv-pg--bento .cxv-pg-grid { display:grid; grid-auto-flow:dense; grid-auto-rows:clamp(140px,18vw,210px); }
.cxv-pg--bento.cxv-pg--cols3 .cxv-pg-grid { grid-template-columns:repeat(3,1fr); }
.cxv-pg--bento.cxv-pg--cols4 .cxv-pg-grid { grid-template-columns:repeat(4,1fr); }
.cxv-pg--bento.cxv-pg--cols5 .cxv-pg-grid { grid-template-columns:repeat(5,1fr); }
.cxv-pg--bento .cxv-pg-item { height:100%; }
.cxv-pg--bento .cxv-pg-item--feat { grid-column:span 2; grid-row:span 2; }

/* ── Layout: CAROUSEL (horizontal scroll-snap) ── */
.cxv-pg--carousel .cxv-pg-grid { display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:.6rem; }
.cxv-pg--carousel .cxv-pg-grid::-webkit-scrollbar { display:none; }
.cxv-pg--carousel .cxv-pg-item { scroll-snap-align:center; flex:0 0 clamp(260px,42%,460px); aspect-ratio:4/3; }

@media (max-width:820px){
  .cxv-pg--cols4 .cxv-pg-grid, .cxv-pg--cols5 .cxv-pg-grid { grid-template-columns:repeat(3,1fr); columns:3; }
}
@media (max-width:560px){
  .cxv-pg--grid .cxv-pg-grid, .cxv-pg--bento .cxv-pg-grid { grid-template-columns:repeat(2,1fr); }
  .cxv-pg--masonry .cxv-pg-grid { columns:2; }
}

/* ── Layout: FILMSTRIP (big stage + thumbnail rail) ── */
.cxv-pg-stage { position:relative; aspect-ratio:16/9; border-radius:var(--ds-card-radius,14px); overflow:hidden; background:var(--ds-surface-2,#f1f5f9); }
.cxv-pg-shot { position:absolute; inset:0; margin:0; opacity:0; transition:opacity .5s ease; }
.cxv-pg-shot.is-active { opacity:1; }
.cxv-pg-shot img { width:100%; height:100%; object-fit:cover; }
.cxv-pg-shot figcaption { position:absolute; left:0; right:0; bottom:0; padding:1.4rem 1.2rem .9rem; color:var(--ds-overlay-ink,#fff);
  background:linear-gradient(0deg, var(--ds-scrim-3,rgba(2,6,23,.8)), transparent); font-size:.9rem; font-weight:600; }
.cxv-pg-rail { display:flex; gap:.5rem; margin-top:.7rem; overflow-x:auto; scrollbar-width:none; }
.cxv-pg-rail::-webkit-scrollbar { display:none; }
.cxv-pg-thumb { flex:0 0 84px; height:60px; border:0; padding:0; cursor:pointer; border-radius:var(--ds-radius-sm,8px);
  background-size:cover; background-position:center; opacity:.55; transition:opacity .2s, outline-color .2s; outline:2px solid transparent; }
.cxv-pg-thumb:hover { opacity:.85; }
.cxv-pg-thumb.is-active { opacity:1; outline-color:var(--ds-primary,#4f46e5); }

/* ── Layout: DEVICE (phone / browser / duo) ── */
.cxv-pg-device { display:flex; justify-content:center; }
/* .cx-browser has no intrinsic width — in a centring flex it collapsed to a tall sliver.
   Give it a real width so the frame fills correctly. */
.cxv-pg--browser .cxv-pg-device { display:block; }
.cxv-pg--browser .cx-browser { width:100%; max-width:52rem; margin-inline:auto; }
/* device slides now hold <img>/<video> children (video support), not a background-image */
.cxv-slides .cxv-slide > .cxv-media { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* duo — browser + phone overlapping, side by side (product demo).
   EXPLICIT widths (flex:none) — flex-basis let the browser shrink to a sliver. */
.cxv-pg-duo { display:flex; align-items:flex-end; justify-content:center; }
.cxv-pg-duo-browser { flex:none; width:min(42rem, 64vw); }
.cxv-pg-duo-phone { flex:none; width:clamp(140px, 16vw, 188px); margin-left:-3.5rem; margin-bottom:-1.5rem;
  z-index:2; box-shadow:var(--ds-shadow-lg,0 30px 60px -25px rgba(2,6,23,.6)); }
/* duo_split — same pair, side by side with a clean gap (no overlap) */
.cxv-pg-duo--split { align-items:center; gap:clamp(1.5rem,4vw,3.5rem); }
.cxv-pg-duo--split .cxv-pg-duo-browser { width:min(34rem, 56vw); }
.cxv-pg-duo--split .cxv-pg-duo-phone { margin:0; width:clamp(150px,18vw,210px); }
@media (max-width:720px){ .cxv-pg-duo { flex-direction:column; align-items:center; }
  .cxv-pg-duo-browser { width:min(42rem, 88vw); }
  .cxv-pg-duo-phone { margin-left:0; margin-bottom:0; margin-top:-2.5rem; width:clamp(150px,42vw,200px); }
  .cxv-pg-duo--split { gap:1.5rem; }
  .cxv-pg-duo--split .cxv-pg-duo-browser { width:min(42rem,88vw); }
  .cxv-pg-duo--split .cxv-pg-duo-phone { margin-top:0; width:clamp(150px,42vw,200px); } }
/* inline-video play marker (grid items) */
.cxv-pg-play { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2; width:54px; height:54px;
  display:flex; align-items:center; justify-content:center; border-radius:var(--ds-radius-full,50%); font-size:1.1rem;
  color:var(--ds-overlay-ink,#fff); background:color-mix(in srgb, var(--ds-text-strong,#0f172a) 45%, transparent);
  opacity:0; transition:opacity .2s; pointer-events:none; }
.cxv-pg-item--video:hover .cxv-pg-play { opacity:1; }

/* ── Tag + caption + zoom marker ── */
.cxv-pg-tag { position:absolute; top:.6rem; left:.6rem; z-index:2; padding:.24rem .55rem; border-radius:var(--ds-radius-full,999px);
  font-size:.62rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  background:color-mix(in srgb, var(--ds-primary,#4f46e5) 90%, transparent); color:var(--ds-on-primary,#fff); }
.cxv-pg-cap { position:absolute; left:0; right:0; bottom:0; z-index:2; padding:1.2rem .85rem .7rem; margin:0;
  color:var(--ds-overlay-ink,#fff); font-size:.82rem; font-weight:600; line-height:1.3;
  background:linear-gradient(0deg, var(--ds-scrim-3,rgba(2,6,23,.78)), transparent); }
.cxv-pg-zoom { position:absolute; top:.6rem; right:.6rem; z-index:2; width:32px; height:32px; display:flex; align-items:center;
  justify-content:center; border-radius:var(--ds-radius-full,50%); color:var(--ds-overlay-ink,#fff); font-size:1rem;
  background:color-mix(in srgb, var(--ds-text-strong,#0f172a) 40%, transparent); opacity:0; transition:opacity .2s; }
.cxv-pg-item:hover .cxv-pg-zoom { opacity:1; }
/* caption modes */
.cxv-pg--cap-hover  .cxv-pg-cap { opacity:0; transform:translateY(8px); transition:opacity .3s, transform .3s; }
.cxv-pg--cap-hover  .cxv-pg-item:hover .cxv-pg-cap { opacity:1; transform:none; }
.cxv-pg--cap-below  .cxv-pg-cap { position:static; background:none; color:var(--ds-text-muted,#475569);
  padding:.55rem .1rem 0; text-shadow:none; }
.cxv-pg--cap-below  .cxv-pg-item { background:transparent; overflow:visible; }
.cxv-pg--cap-off    .cxv-pg-cap { display:none; }

/* ── Hover effects ── */
.cxv-pg--hover-zoom .cxv-pg-item .cxv-media { transition:transform .55s cubic-bezier(.22,1,.36,1); }
.cxv-pg--hover-zoom .cxv-pg-item:hover .cxv-media { transform:scale(1.07); }
.cxv-pg--hover-lift .cxv-pg-item:hover { transform:translateY(-6px); box-shadow:var(--ds-shadow-lg,0 24px 50px -20px rgba(2,6,23,.5)); z-index:3; }
.cxv-pg--hover-grayscale .cxv-pg-item .cxv-media { filter:grayscale(1); transition:filter .45s ease; }
.cxv-pg--hover-grayscale .cxv-pg-item:hover .cxv-media { filter:grayscale(0); }
.cxv-pg--hover-tilt .cxv-pg-item:hover { transform:perspective(900px) rotateX(3deg) translateY(-4px); }

/* whole-image link (stretched) */
.cxv-pg-link { position:absolute; inset:0; z-index:3; }

/* ── Scroll-reveal ── */
.cxv-pg--reveal .cxv-pg-item { opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1); }
.cxv-pg--reveal .cxv-pg-item.is-in { opacity:1; transform:none; }

/* ── Carousel arrows ── */
.cxv-pg-nav { display:flex; justify-content:flex-end; gap:.5rem; margin-top:1rem; }
.cxv-pg-arrow { width:42px; height:42px; border-radius:var(--ds-radius-full,50%); border:1px solid var(--ds-border,rgba(148,163,184,.3));
  background:var(--ds-surface,#fff); color:var(--ds-text-strong,#0f172a); font-size:1.35rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:border-color .15s, color .15s; }
.cxv-pg-arrow:hover { border-color:var(--ds-primary,#4f46e5); color:var(--ds-primary,#4f46e5); }

/* ── Filter transition ── */
.cxv-pg-item.is-hidden { display:none; }

/* ══ LIGHTBOX (built by gallery.js, appended to <body>) ══ */
.cxv-lb { position:fixed; inset:0; z-index:9999; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:var(--ds-lb-bg,rgba(2,6,23,.94)); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  opacity:0; pointer-events:none; transition:opacity .25s ease; }
.cxv-lb.is-open { opacity:1; pointer-events:auto; }
.cxv-lb-stage { position:relative; max-width:92vw; max-height:76vh; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.cxv-lb-img { max-width:92vw; max-height:76vh; object-fit:contain; border-radius:var(--ds-radius-sm,8px); transition:transform .3s ease; cursor:zoom-in; }
.cxv-lb-img.is-zoomed { transform:scale(2); cursor:zoom-out; }
.cxv-lb-cap { color:var(--ds-lb-ink,#fff); margin-top:1rem; font-size:.9rem; opacity:.9; text-align:center; max-width:60ch; }
.cxv-lb-count { position:absolute; top:1.2rem; left:1.4rem; color:var(--ds-lb-ink,#fff); font-family:var(--ds-font-mono,ui-monospace,monospace); font-size:.8rem; opacity:.8; letter-spacing:.1em; }
.cxv-lb-btn { position:absolute; z-index:2; width:52px; height:52px; display:flex; align-items:center; justify-content:center;
  border:0; border-radius:var(--ds-radius-full,50%); cursor:pointer; color:var(--ds-lb-ink,#fff); font-size:1.8rem; line-height:1;
  background:color-mix(in srgb, var(--ds-lb-ink,#fff) 12%, transparent); transition:background .15s; }
.cxv-lb-btn:hover { background:color-mix(in srgb, var(--ds-lb-ink,#fff) 24%, transparent); }
.cxv-lb-prev { left:1.4rem; top:50%; transform:translateY(-50%); }
.cxv-lb-next { right:1.4rem; top:50%; transform:translateY(-50%); }
.cxv-lb-close { top:1.1rem; right:1.4rem; width:44px; height:44px; font-size:1.4rem; }
.cxv-lb-play { top:1.1rem; right:5.2rem; width:44px; height:44px; font-size:1rem; }
.cxv-lb-rail { display:flex; gap:.4rem; margin-top:1rem; max-width:92vw; overflow-x:auto; padding-bottom:.3rem; scrollbar-width:none; }
.cxv-lb-rail::-webkit-scrollbar { display:none; }
.cxv-lb-thumb { flex:0 0 64px; height:44px; border:0; padding:0; cursor:pointer; border-radius:var(--ds-radius-sm,6px);
  background-size:cover; background-position:center; opacity:.5; outline:2px solid transparent; transition:opacity .2s, outline-color .2s; }
.cxv-lb-thumb.is-active { opacity:1; outline-color:var(--ds-lb-ink,#fff); }
@media (max-width:640px){ .cxv-lb-prev { left:.4rem; } .cxv-lb-next { right:.4rem; } .cxv-lb-btn { width:44px; height:44px; font-size:1.4rem; } }

@media (prefers-reduced-motion:reduce){
  .cxv-pg-item, .cxv-pg-item .cxv-media, .cxv-pg--reveal .cxv-pg-item, .cxv-pg-shot, .cxv-lb, .cxv-lb-img {
    transition:none !important; transform:none !important; opacity:1; }
  .cxv-pg--reveal .cxv-pg-item { opacity:1; }
  .cxv-pg--carousel .cxv-pg-grid { scroll-behavior:auto; }
}

/* ═══════════ CONTACT (contact block) — channels + socials + form + map ═══════════
   ONE template; layout (.cxv-ct--split/stacked/cards/map) drives placement. Token-clean,
   Mode-A adaptive (flips with cx-dark). Form inputs read --ds-surface/border/text. ═══════ */
.cxv-ct-head { margin-bottom:clamp(1.6rem,4vh,2.6rem); }
.cxv-ct-grid { display:grid; gap:clamp(1.4rem,3vw,2.6rem); align-items:start; }
.cxv-ct--split .cxv-ct-grid, .cxv-ct--map .cxv-ct-grid { grid-template-columns:1fr 1fr; }
.cxv-ct--stacked .cxv-ct-grid { grid-template-columns:1fr; max-width:640px; margin-inline:auto; }
.cxv-ct--cards .cxv-ct-grid { grid-template-columns:1fr; }
.cxv-ct--form-left .cxv-ct-formwrap { order:-1; }
.cxv-ct--split .cxv-ct-map { grid-column:1 / -1; }
.cxv-ct--map .cxv-ct-info { grid-column:1 / -1; }
.cxv-ct--map .cxv-ct-map { grid-row:1; }
.cxv-ct--cards .cxv-ct-formwrap { max-width:640px; margin-inline:auto; width:100%; }
@media (max-width:820px){ .cxv-ct--split .cxv-ct-grid, .cxv-ct--map .cxv-ct-grid { grid-template-columns:1fr; } }

/* channels */
.cxv-ct-channels { display:flex; flex-direction:column; gap:.7rem; }
.cxv-ct--cards .cxv-ct-channels { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.cxv-ct-channel { display:flex; align-items:center; gap:.9rem; padding:.85rem 1rem; border-radius:var(--ds-radius-lg,16px);
  text-decoration:none; border:1px solid var(--ds-border,rgba(148,163,184,.22)); background:var(--ds-surface,#fff);
  color:var(--ds-text-strong,#0f172a); transition:border-color .15s, transform .12s, box-shadow .15s; }
a.cxv-ct-channel:hover { transform:translateY(-1px); border-color:color-mix(in srgb,var(--ds-primary,#4f46e5) 45%,transparent);
  box-shadow:0 6px 18px -10px color-mix(in srgb,var(--ds-primary,#4f46e5) 40%,transparent); }
.cxv-ct-cico { flex:none; width:44px; height:44px; border-radius:var(--ds-radius-md,12px); display:inline-flex;
  align-items:center; justify-content:center; color:var(--ds-on-primary,#fff);
  background:linear-gradient(135deg,var(--ds-primary,#4f46e5),var(--ds-accent,#6366f1)); }
.cxv-ct-cico svg { width:20px; height:20px; }
.cxv-ct-cbody { display:flex; flex-direction:column; gap:.1rem; min-width:0; }
.cxv-ct-clabel { font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--ds-text-muted,#64748b); }
.cxv-ct-cval { font-size:.95rem; font-weight:600; color:var(--ds-text-strong,#0f172a); overflow-wrap:anywhere; }

/* socials */
.cxv-ct-social { display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1.1rem; }
.cxv-ct-slink { width:42px; height:42px; border-radius:var(--ds-radius-full,50%); display:inline-flex; align-items:center;
  justify-content:center; border:1px solid var(--ds-border,rgba(148,163,184,.25)); color:var(--ds-text-muted,#475569);
  background:var(--ds-surface,#fff); transition:color .15s, border-color .15s, transform .12s; }
.cxv-ct-slink:hover { color:var(--ds-primary,#4f46e5); border-color:var(--ds-primary,#4f46e5); transform:translateY(-2px); }
.cxv-ct-slink svg { width:18px; height:18px; }

/* map */
.cxv-ct-map { border-radius:var(--ds-card-radius,16px); overflow:hidden; border:1px solid var(--ds-border,rgba(148,163,184,.22));
  min-height:260px; background:var(--ds-surface-2,#f1f5f9); }
.cxv-ct-map iframe { width:100%; height:100%; min-height:260px; border:0; display:block; }

/* form */
.cxv-ct--card-elevated .cxv-ct-formwrap, .cxv-ct--card-bordered .cxv-ct-formwrap,
.cxv-ct--card-glass .cxv-ct-formwrap, .cxv-ct--card-flat .cxv-ct-formwrap {
  padding:clamp(1.2rem,2.4vw,1.9rem); border-radius:var(--ds-card-radius,16px); }
.cxv-ct--card-elevated .cxv-ct-formwrap { background:var(--ds-surface,#fff); box-shadow:var(--ds-card-shadow,0 12px 30px -16px rgba(2,6,23,.4)); }
.cxv-ct--card-bordered .cxv-ct-formwrap { border:1px solid var(--ds-border,rgba(148,163,184,.25)); }
.cxv-ct--card-flat .cxv-ct-formwrap { background:var(--ds-surface-2,#f1f5f9); }
.cxv-ct--card-glass .cxv-ct-formwrap { background:color-mix(in srgb,var(--ds-surface,#fff) 68%,transparent);
  backdrop-filter:blur(10px); border:1px solid color-mix(in srgb,var(--ds-border,#cbd5e1) 60%,transparent); }
.cxv-ct-form { display:flex; flex-direction:column; gap:.85rem; position:relative; }
.cxv-ct-row { display:grid; grid-template-columns:1fr 1fr; gap:.85rem; }
@media (max-width:520px){ .cxv-ct-row { grid-template-columns:1fr; } }
.cxv-ct-hp { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.cxv-ct-lbl { display:flex; flex-direction:column; gap:.35rem; font-size:.72rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ds-text-muted,#64748b); }
.cxv-ct-input { width:100%; border-radius:var(--ds-radius-md,12px); border:1px solid var(--ds-border,rgba(148,163,184,.32));
  background:var(--ds-surface,#fff); color:var(--ds-text-strong,#0f172a); padding:.8rem 1rem; font-size:1rem;
  font-family:var(--ds-font-body,inherit); font-weight:500; text-transform:none; letter-spacing:normal; transition:border-color .15s, box-shadow .15s; }
.cxv-ct-input::placeholder { color:var(--ds-text-muted,#94a3b8); }
.cxv-ct-input:focus { outline:none; border-color:var(--ds-primary,#4f46e5); box-shadow:0 0 0 4px color-mix(in srgb,var(--ds-primary,#4f46e5) 16%,transparent); }
textarea.cxv-ct-input { resize:vertical; min-height:120px; }
.cxv-ct-submit { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; width:100%; cursor:pointer; border:0;
  padding:.9rem 1.5rem; border-radius:var(--ds-radius-md,12px); font-size:.98rem; font-weight:700; font-family:var(--ds-font-heading,inherit);
  color:var(--ds-on-primary,#fff); background:linear-gradient(135deg,var(--ds-primary,#4f46e5),var(--ds-accent,#6366f1));
  box-shadow:0 10px 26px -12px color-mix(in srgb,var(--ds-primary,#4f46e5) 55%,transparent); transition:transform .15s, box-shadow .2s, filter .2s; }
.cxv-ct-submit:hover { transform:translateY(-1px); filter:brightness(1.05); }
.cxv-ct-submit[disabled] { opacity:.6; cursor:default; transform:none; }
.cxv-ct-note { margin:0; font-size:.85rem; color:var(--ds-danger,#dc2626); }
.cxv-ct-ok { display:flex; align-items:center; gap:.7rem; padding:1rem 1.2rem; border-radius:var(--ds-radius-md,12px);
  background:color-mix(in srgb,var(--ds-primary,#4f46e5) 10%,transparent); color:var(--ds-text-strong,#0f172a); }
.cxv-ct-ok p { margin:0; font-size:.95rem; }
.cxv-ct-ok-mark { flex:none; width:30px; height:30px; border-radius:var(--ds-radius-full,50%); display:grid; place-items:center;
  color:var(--ds-on-primary,#fff); background:var(--ds-primary,#4f46e5); font-weight:800; }

/* ═══════════ BLOG (post_list block) — latest posts, grid / list / feature ═══════════
   Bound to blog.posts (Article shape) or static items; token-clean, Mode-A adaptive. ═══ */
.cxv-pl-head { margin-bottom:clamp(1.6rem,4vh,2.6rem); }
.cxv-pl-track { display:grid; gap:clamp(1rem,2.2vw,1.6rem); }
.cxv-pl--cols2 .cxv-pl-track { grid-template-columns:repeat(2,1fr); }
.cxv-pl--cols3 .cxv-pl-track { grid-template-columns:repeat(3,1fr); }
.cxv-pl--cols4 .cxv-pl-track { grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ .cxv-pl--cols3 .cxv-pl-track, .cxv-pl--cols4 .cxv-pl-track { grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .cxv-pl-track { grid-template-columns:1fr; } }
/* list mode — media beside copy */
.cxv-pl--list .cxv-pl-track { grid-template-columns:1fr; }
.cxv-pl--list .cxv-pl-card { display:grid; grid-template-columns:minmax(0,.32fr) 1fr; align-items:center; }
@media (max-width:600px){ .cxv-pl--list .cxv-pl-card { grid-template-columns:1fr; } }
/* feature mode — first post is a big lead tile */
.cxv-pl--feature .cxv-pl-card:first-child { grid-column:1 / -1; display:grid; grid-template-columns:1.3fr 1fr; align-items:stretch; }
.cxv-pl--feature .cxv-pl-card:first-child .cxv-pl-media { aspect-ratio:auto; height:100%; min-height:240px; }
@media (max-width:700px){ .cxv-pl--feature .cxv-pl-card:first-child { grid-template-columns:1fr; } }

.cxv-pl-card { position:relative; display:flex; flex-direction:column; overflow:hidden; border-radius:var(--ds-card-radius,16px);
  background:var(--ds-surface,#fff); transition:transform .18s ease, box-shadow .18s ease; }
.cxv-pl--card-elevated .cxv-pl-card { box-shadow:var(--ds-card-shadow,0 12px 30px -16px rgba(2,6,23,.4)); }
.cxv-pl--card-bordered .cxv-pl-card { border:1px solid var(--ds-border,rgba(148,163,184,.25)); }
.cxv-pl--card-flat .cxv-pl-card { background:var(--ds-surface-2,#f1f5f9); }
.cxv-pl--card-minimal .cxv-pl-card { background:transparent; }
.cxv-pl--card-minimal .cxv-pl-body { padding-inline:0; }
.cxv-pl-card:hover { transform:translateY(-4px); box-shadow:var(--ds-shadow-lg,0 24px 50px -20px rgba(2,6,23,.5)); }
.cxv-pl-media { width:100%; aspect-ratio:16/10; overflow:hidden; background:var(--ds-surface-2,#f1f5f9); }
.cxv-pl-media .cxv-media { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.cxv-pl-card:hover .cxv-pl-media .cxv-media { transform:scale(1.05); }
.cxv-pl-body { padding:clamp(1rem,1.6vw,1.4rem); display:flex; flex-direction:column; gap:.5rem; }
.cxv-pl-date { font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--ds-text-muted,#64748b); }
.cxv-pl-title { font-family:var(--ds-font-heading,system-ui,sans-serif); font-size:1.16rem; font-weight:700; line-height:1.3; margin:0; color:var(--ds-text-strong,#0f172a); }
.cxv-pl-excerpt { font-size:.92rem; line-height:1.6; color:var(--ds-text-muted,#475569); margin:0; }
.cxv-pl-more { font-size:.85rem; font-weight:700; color:var(--ds-primary,#4f46e5); margin-top:.2rem; }
.cxv-pl-link { position:absolute; inset:0; z-index:2; }
.cxv-pl-card:hover .cxv-pl-more { text-decoration:underline; }
.cxv-pl-cta { display:flex; justify-content:center; margin-top:clamp(1.4rem,3vw,2.2rem); }

/* ═══════════ V3 BLOG ARTICLE (blog_detail_v3) — read-only reading page ═══════════
   Token-clean, Mode-A adaptive. Body prose is CKEditor HTML via the cx_prose allowlist. ═══ */
.cxv-article-wrap { max-width:48rem; margin-inline:auto; }
.cxv-article-back { display:inline-block; margin-bottom:1.5rem; font-size:.9rem; font-weight:600;
  color:var(--ds-text-muted,#64748b); text-decoration:none; }
.cxv-article-back:hover { color:var(--ds-primary,#4f46e5); }
.cxv-article-head { margin-bottom:1.8rem; }
.cxv-article-title { margin:.8rem 0 1rem; }
.cxv-article-meta { display:flex; flex-wrap:wrap; gap:1rem; font-size:.9rem; color:var(--ds-text-muted,#64748b); }
.cxv-article-meta span { position:relative; }
.cxv-article-meta span + span::before { content:'·'; position:absolute; left:-.65rem; }
.cxv-article-hero { border-radius:var(--ds-card-radius,16px); overflow:hidden; margin:0 0 2rem;
  aspect-ratio:16/9; background:var(--ds-surface-2,#f1f5f9); }
.cxv-article-hero img { width:100%; height:100%; object-fit:cover; display:block; }
/* prose body */
.cxv-article-body { font-size:1.06rem; line-height:1.75; color:var(--ds-text-strong,#0f172a); }
.cxv-article-body :is(h2,h3,h4) { font-family:var(--ds-font-heading,system-ui,sans-serif); margin:2rem 0 .8rem; line-height:1.3; }
.cxv-article-body p { margin:0 0 1.1rem; }
.cxv-article-body a { color:var(--ds-primary,#4f46e5); text-decoration:underline; }
.cxv-article-body :is(ul,ol) { margin:0 0 1.1rem 1.4rem; }
.cxv-article-body li { margin:.3rem 0; }
.cxv-article-body img { max-width:100%; height:auto; border-radius:var(--ds-radius-md,12px); margin:1rem 0; }
.cxv-article-body blockquote { margin:1.4rem 0; padding:.6rem 1.2rem; border-left:3px solid var(--ds-primary,#4f46e5);
  color:var(--ds-text-muted,#64748b); font-style:italic; }
.cxv-article-body pre { background:var(--ds-surface-2,#f1f5f9); padding:1rem; border-radius:var(--ds-radius-md,12px);
  overflow:auto; font-family:var(--ds-font-mono,ui-monospace,monospace); font-size:.9rem; }
.cxv-article-body code { font-family:var(--ds-font-mono,ui-monospace,monospace); font-size:.9em; }
/* related */
.cxv-article-related { max-width:64rem; margin:4rem auto 0; border-top:1px solid var(--ds-border,rgba(148,163,184,.25)); padding-top:2.4rem; }
.cxv-article-related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.5rem); margin-top:1.4rem; }
@media (max-width:760px){ .cxv-article-related-grid { grid-template-columns:1fr; } }
.cxv-article-rcard { text-decoration:none; color:inherit; display:flex; flex-direction:column; gap:.5rem; }
.cxv-article-rmedia { aspect-ratio:16/10; border-radius:var(--ds-card-radius,14px); overflow:hidden; background:var(--ds-surface-2,#f1f5f9); }
.cxv-article-rmedia img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.cxv-article-rcard:hover .cxv-article-rmedia img { transform:scale(1.05); }
.cxv-article-rdate { font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--ds-text-muted,#64748b); }
.cxv-article-rtitle { font-family:var(--ds-font-heading,system-ui,sans-serif); font-size:1.05rem; font-weight:700; line-height:1.35; margin:0; color:var(--ds-text-strong,#0f172a); }

/* engagement (like + comments) on the V3 article */
.cxv-article-engage { display:flex; gap:.75rem; margin:2.4rem 0 0; padding-top:1.6rem; border-top:1px solid var(--ds-border,rgba(148,163,184,.25)); }
.cxv-like { display:inline-flex; align-items:center; gap:.5rem; padding:.55rem 1rem; border-radius:var(--ds-radius-full,999px);
  border:1px solid var(--ds-border,rgba(148,163,184,.3)); background:var(--ds-surface,#fff); color:var(--ds-text-muted,#64748b);
  font-weight:700; font-size:.95rem; cursor:pointer; text-decoration:none; transition:color .15s, border-color .15s, background .15s; }
.cxv-like svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; }
.cxv-like:hover { color:var(--ds-primary,#4f46e5); border-color:var(--ds-primary,#4f46e5); }
.cxv-like.is-liked { color:var(--ds-on-primary,#fff); background:var(--ds-primary,#4f46e5); border-color:var(--ds-primary,#4f46e5); }
.cxv-like.is-liked svg { fill:currentColor; }
.cxv-like[disabled] { opacity:.6; cursor:default; }
.cxv-comments { max-width:48rem; margin:3rem auto 0; }
.cxv-comment-form { display:flex; flex-direction:column; gap:.7rem; margin:1.2rem 0 2rem; }
.cxv-comment-form textarea { resize:vertical; min-height:84px; }
.cxv-comment-submit { align-self:flex-start; cursor:pointer; border:0; padding:.7rem 1.4rem; border-radius:var(--ds-radius-md,12px);
  font-weight:700; font-size:.92rem; color:var(--ds-on-primary,#fff); background:linear-gradient(135deg,var(--ds-primary,#4f46e5),var(--ds-accent,#6366f1)); }
.cxv-comment-submit:hover { filter:brightness(1.05); }
.cxv-comment-login { color:var(--ds-text-muted,#64748b); margin:1rem 0 2rem; }
.cxv-comment-login a { color:var(--ds-primary,#4f46e5); font-weight:700; }
.cxv-comment-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1.2rem; }
.cxv-comment { padding:1rem 1.2rem; border-radius:var(--ds-card-radius,14px); background:var(--ds-surface-2,#f1f5f9); }
.cxv-comment-head { display:flex; gap:.7rem; align-items:baseline; margin-bottom:.35rem; }
.cxv-comment-author { font-weight:700; color:var(--ds-text-strong,#0f172a); font-size:.92rem; }
.cxv-comment-date { font-size:.78rem; color:var(--ds-text-muted,#64748b); }
.cxv-comment-body { margin:0; font-size:.95rem; line-height:1.6; color:var(--ds-text-strong,#0f172a); }
.cxv-comment-err { margin:0; font-size:.85rem; color:var(--ds-danger,#dc2626); }

/* comment actions — like + reactions + reply + nested replies */
.cxv-comment-actions { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; margin-top:.6rem; }
.cxv-clike, .cxv-react { display:inline-flex; align-items:center; gap:.28rem; padding:.28rem .55rem; border-radius:var(--ds-radius-full,999px);
  border:1px solid var(--ds-border,rgba(148,163,184,.28)); background:var(--ds-surface,#fff); color:var(--ds-text-muted,#64748b);
  font-size:.82rem; font-weight:600; cursor:pointer; line-height:1; transition:color .15s, border-color .15s, background .15s; }
.cxv-clike svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; }
.cxv-clike[data-clike-url]:hover, .cxv-react[data-react-url]:hover { color:var(--ds-primary,#4f46e5); border-color:var(--ds-primary,#4f46e5); }
.cxv-clike.is-liked { color:var(--ds-primary,#4f46e5); border-color:var(--ds-primary,#4f46e5); }
.cxv-clike.is-liked svg { fill:currentColor; }
.cxv-react.is-on { background:color-mix(in srgb,var(--ds-primary,#4f46e5) 12%,transparent); border-color:color-mix(in srgb,var(--ds-primary,#4f46e5) 40%,transparent); }
.cxv-react:not(.has):not(.is-on) .cxv-react-count { display:none; }
.cxv-react-emoji { font-size:.95rem; }
.cxv-reply-btn { margin-left:.2rem; background:none; border:0; cursor:pointer; font-size:.82rem; font-weight:700; color:var(--ds-text-muted,#64748b); }
.cxv-reply-btn:hover { color:var(--ds-primary,#4f46e5); }
.cxv-reply-form { display:flex; flex-direction:column; gap:.5rem; margin:.7rem 0 0; }
.cxv-reply-submit { align-self:flex-start; cursor:pointer; border:0; padding:.45rem 1rem; border-radius:var(--ds-radius-md,10px);
  font-weight:700; font-size:.85rem; color:var(--ds-on-primary,#fff); background:var(--ds-primary,#4f46e5); }
.cxv-reply-submit:hover { filter:brightness(1.05); }
.cxv-reply-list { list-style:none; margin:.9rem 0 0; padding:0; display:flex; flex-direction:column; gap:.7rem; }
.cxv-reply-list:empty { margin:0; }
.cxv-comment--reply { margin-left:1.5rem; padding:.3rem 0 .3rem 1rem; background:transparent;
  border-left:2px solid var(--ds-border,rgba(148,163,184,.3)); }

/* [hidden] must beat an explicit display:flex on toggled forms/panels (else they show always) */
.cxv-reply-form[hidden], .cxv-ct-ok[hidden], .cxv-ct-form .cxv-ct-ok[hidden] { display:none; }

/* ═══════════ V3 BLOG LIST (blog_list_v3) — premium filtered list page ═══════════ */
.cxv-bloglist-head { margin-bottom:clamp(1.4rem,3vh,2rem); }
.cxv-bl-filters { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin:0 0 1rem; }
.cxv-bl-search { flex:1 1 240px; min-width:180px; }
.cxv-bl-sort { flex:0 0 auto; width:auto; min-width:150px; }
.cxv-bl-searchbtn { flex:0 0 auto; cursor:pointer; border:0; padding:.8rem 1.3rem; border-radius:var(--ds-radius-md,12px);
  font-weight:700; font-size:.92rem; color:var(--ds-on-primary,#fff); background:linear-gradient(135deg,var(--ds-primary,#4f46e5),var(--ds-accent,#6366f1)); }
.cxv-bl-searchbtn:hover { filter:brightness(1.05); }
.cxv-bl-chips { display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 2rem; }
.cxv-bl-chip { padding:.42rem .95rem; border-radius:var(--ds-radius-full,999px); border:1px solid var(--ds-border,rgba(148,163,184,.3));
  background:var(--ds-surface,#fff); color:var(--ds-text-muted,#64748b); font-size:.85rem; font-weight:600; text-decoration:none;
  transition:color .15s, border-color .15s, background .15s; }
.cxv-bl-chip:hover { color:var(--ds-primary,#4f46e5); border-color:var(--ds-primary,#4f46e5); }
.cxv-bl-chip.is-active { color:var(--ds-on-primary,#fff); background:var(--ds-primary,#4f46e5); border-color:var(--ds-primary,#4f46e5); }
.cxv-bl-empty { text-align:center; padding:4rem 1rem; color:var(--ds-text-muted,#64748b); }
.cxv-bl-pager { display:flex; align-items:center; justify-content:center; gap:1.2rem; margin-top:2.6rem; }
.cxv-bl-pagebtn { padding:.5rem 1.1rem; border-radius:var(--ds-radius-md,12px); border:1px solid var(--ds-border,rgba(148,163,184,.3));
  color:var(--ds-text-strong,#0f172a); text-decoration:none; font-weight:600; font-size:.9rem; transition:border-color .15s, color .15s; }
.cxv-bl-pagebtn:hover { border-color:var(--ds-primary,#4f46e5); color:var(--ds-primary,#4f46e5); }
.cxv-bl-pageinfo { color:var(--ds-text-muted,#64748b); font-size:.9rem; }
@media (max-width:560px){ .cxv-bl-search { flex:1 1 100%; } }

/* ══════════════════════════════════════════════════════════════════════════════
   rich_text — the configurable STATIC prose workhorse. ONE template; `layout` +
   `measure` + `drop_cap` drive the shell, a typed `blocks` component stream renders
   each rich component. Token-only, light/dark-adaptive. Semantic callout tones hook
   var(--ds-success/-warning/-info, #fallback) so a theme can override them.
   ══════════════════════════════════════════════════════════════════════════════ */
.cxv-rt-head { margin-bottom:clamp(1.6rem,4vh,2.6rem); }

/* ── Vertical rhythm (owl) — components self-space; headings breathe more ── */
.cxv-rt-flow > * { margin-block:0; }
.cxv-rt-flow > * + * { margin-block-start:1.15em; }

/* ── Reading width (content.measure) — the flow column ── */
.cxv-rt--m-narrow .cxv-rt-flow { max-width:38rem; }
.cxv-rt--m-normal .cxv-rt-flow { max-width:46rem; }
.cxv-rt--m-wide   .cxv-rt-flow { max-width:58rem; }
.cxv-rt--m-full   .cxv-rt-flow { max-width:none; }

/* Single layout: the HEADER shares the flow's reading column so the title lines up with
   the body (was: header full-width but body a measured column → the title never aligned
   with the text, and `align:left` split them apart). The shared column's POSITION follows
   `align` — default centred, left hugs left, right hugs right — so aligning left moves the
   title AND the body together, in line. */
.cxv-rt--single.cxv-rt--m-narrow .cxv-rt-head { max-width:38rem; }
.cxv-rt--single.cxv-rt--m-normal .cxv-rt-head { max-width:46rem; }
.cxv-rt--single.cxv-rt--m-wide   .cxv-rt-head { max-width:58rem; }
.cxv-rt--single .cxv-rt-head,
.cxv-rt--single .cxv-rt-flow  { margin-inline:auto; }          /* default: centred column */
.cxv-rt--single.cxv-al--left  .cxv-rt-head,
.cxv-rt--single.cxv-al--left  .cxv-rt-flow  { margin-inline:0 auto; }   /* hug left  */
.cxv-rt--single.cxv-al--right .cxv-rt-head,
.cxv-rt--single.cxv-al--right .cxv-rt-flow  { margin-inline:auto 0; }   /* hug right */

/* ── Layout: MULTI-COLUMN (two_col / three_col / magazine — newspaper flow) ── */
.cxv-rt--two_col .cxv-rt-flow,
.cxv-rt--three_col .cxv-rt-flow,
.cxv-rt--magazine .cxv-rt-flow { max-width:none; column-gap:clamp(1.6rem,4vw,3rem); }
.cxv-rt--two_col .cxv-rt-flow   { columns:2; }
.cxv-rt--three_col .cxv-rt-flow { columns:3; }
.cxv-rt--magazine .cxv-rt-flow  { columns:2; column-rule:1px solid var(--ds-border,rgba(148,163,184,.28)); }
.cxv-rt--two_col .cxv-rt-flow > *,
.cxv-rt--three_col .cxv-rt-flow > *,
.cxv-rt--magazine .cxv-rt-flow > * { break-inside:avoid; }
@media (max-width:820px){
  .cxv-rt--two_col .cxv-rt-flow, .cxv-rt--three_col .cxv-rt-flow, .cxv-rt--magazine .cxv-rt-flow { columns:1; column-rule:0; }
}

/* ── Layout: SPLIT + SIDEBAR (grid main + aside) — first ratio = main width ── */
.cxv-rt--split_6040 .cxv-rt-layout,
.cxv-rt--split_4060 .cxv-rt-layout,
.cxv-rt--split_3070 .cxv-rt-layout,
.cxv-rt--sidebar .cxv-rt-layout { display:grid; gap:clamp(1.6rem,4vw,3.4rem); align-items:start; }
.cxv-rt--split_6040 .cxv-rt-layout { grid-template-columns:60fr 40fr; }
.cxv-rt--split_4060 .cxv-rt-layout { grid-template-columns:40fr 60fr; }
.cxv-rt--split_3070 .cxv-rt-layout { grid-template-columns:30fr 70fr; }
.cxv-rt--sidebar    .cxv-rt-layout { grid-template-columns:1fr minmax(200px,17rem); }
.cxv-rt--split_6040 .cxv-rt-flow, .cxv-rt--split_4060 .cxv-rt-flow,
.cxv-rt--split_3070 .cxv-rt-flow, .cxv-rt--sidebar .cxv-rt-flow { max-width:none; margin-inline:0; }
.cxv-rt-aside { color:var(--ds-text-muted,#475569); font-size:.96rem; line-height:1.75; }
.cxv-rt--sidebar .cxv-rt-aside { position:sticky; top:1.5rem; padding:1.25rem 1.4rem;
  border-radius:var(--ds-card-radius,14px); background:var(--ds-surface-2,#f1f5f9);
  border:1px solid var(--ds-border,rgba(148,163,184,.22)); }
@media (max-width:760px){
  .cxv-rt--split_6040 .cxv-rt-layout, .cxv-rt--split_4060 .cxv-rt-layout,
  .cxv-rt--split_3070 .cxv-rt-layout, .cxv-rt--sidebar .cxv-rt-layout { grid-template-columns:1fr; }
  .cxv-rt--sidebar .cxv-rt-aside { position:static; }
}

/* ── Component: paragraph / legacy body ── */
.cxv-rt-p, .cxv-rt-body { color:var(--ds-text-muted,#475569); line-height:1.75; font-size:1.02rem; }
.cxv-rt-empty { color:var(--ds-text-soft,#94a3b8); font-style:italic; }

/* ── Component: lead paragraph ── */
.cxv-rt-lead { font-size:clamp(1.18rem,2.4vw,1.5rem); line-height:1.5; font-weight:450;
  color:var(--ds-text-strong,#0f172a); letter-spacing:-.01em; }

/* ── Component: headings ── */
.cxv-rt-h { font-family:var(--ds-font-heading,system-ui,sans-serif); font-weight:700;
  font-size:clamp(1.35rem,2.6vw,1.75rem); line-height:1.2; color:var(--ds-text-strong,#0f172a);
  letter-spacing:-.02em; margin-block-start:1.7em; }
.cxv-rt-sh { font-family:var(--ds-font-heading,system-ui,sans-serif); font-weight:650;
  font-size:1.12rem; color:var(--ds-text-strong,#0f172a); margin-block-start:1.4em; }
.cxv-rt-flow > :first-child { margin-block-start:0; }

/* ── Component: quote ── */
.cxv-rt-quote { border-inline-start:3px solid color-mix(in srgb,var(--ds-primary,#4f46e5) 55%,transparent);
  padding:.15rem 0 .15rem 1.3rem; margin-inline:0; }
.cxv-rt-quote blockquote { margin:0; font-size:1.12rem; line-height:1.6; font-style:italic; color:var(--ds-text-strong,#0f172a); }
.cxv-rt-quote figcaption { margin-top:.5rem; font-size:.85rem; font-weight:600; color:var(--ds-text-muted,#475569); font-style:normal; }

/* ── Component: pull quote (oversized decorative) ── */
.cxv-rt-pull { margin-block:1.6em; text-align:center; }
.cxv-rt-pull blockquote { margin:0; font-family:var(--ds-font-heading,system-ui,sans-serif); font-weight:600;
  font-size:clamp(1.5rem,3.4vw,2.15rem); line-height:1.28; letter-spacing:-.02em; color:var(--ds-text-strong,#0f172a); }
.cxv-rt-pull blockquote::before { content:'\201C'; color:color-mix(in srgb,var(--ds-primary,#4f46e5) 45%,transparent);
  font-size:1.5em; line-height:0; vertical-align:-.38em; margin-inline-end:.04em; }
.cxv-rt-pull figcaption { margin-top:.8rem; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  font-weight:700; color:var(--ds-primary,#4f46e5); }

/* ── Component: highlighted paragraph ── */
.cxv-rt-highlight { padding:1rem 1.25rem; border-radius:var(--ds-radius-md,12px);
  border-inline-start:3px solid var(--ds-primary,#4f46e5);
  background:color-mix(in srgb,var(--ds-primary,#4f46e5) 8%,var(--ds-surface,#fff));
  color:var(--ds-text-strong,#0f172a); font-weight:500; line-height:1.6; }

/* ── Component: callout family (note / tip / warning / success / info / callout) ── */
.cxv-rt-call { display:grid; grid-template-columns:auto 1fr; gap:.85rem; align-items:start;
  padding:1rem 1.2rem; border-radius:var(--ds-card-radius,14px); break-inside:avoid;
  border:1px solid color-mix(in srgb,var(--rt-tone,#4f46e5) 30%,transparent);
  background:color-mix(in srgb,var(--rt-tone,#4f46e5) 8%,var(--ds-surface,#fff)); }
.cxv-rt-call-ic { display:flex; align-items:center; justify-content:center; width:1.9rem; height:1.9rem; flex:none;
  border-radius:var(--ds-radius-full,50%); background:color-mix(in srgb,var(--rt-tone,#4f46e5) 18%,transparent);
  color:var(--rt-tone,#4f46e5); font-size:1rem; font-weight:700; line-height:1; }
.cxv-rt-call-t { display:block; color:var(--ds-text-strong,#0f172a); font-size:.98rem; margin-bottom:.15rem; }
.cxv-rt-call-body { color:var(--ds-text-muted,#475569); line-height:1.65; font-size:.97rem; }
.cxv-rt-call--note    { --rt-tone:var(--ds-text-muted,#64748b); }
.cxv-rt-call--callout { --rt-tone:var(--ds-primary,#4f46e5); }
.cxv-rt-call--info    { --rt-tone:var(--ds-info,#2563eb); }
.cxv-rt-call--tip     { --rt-tone:var(--ds-success,#0d9488); }
.cxv-rt-call--success { --rt-tone:var(--ds-success,#16a34a); }
.cxv-rt-call--warning { --rt-tone:var(--ds-warning,#d97706); }

/* ── Component: key statistic ── */
.cxv-rt-stat { padding:.2rem 0; }
.cxv-rt-stat-v { display:block; font-family:var(--ds-font-heading,system-ui,sans-serif); font-weight:800;
  font-size:clamp(2.2rem,5vw,3rem); line-height:1; letter-spacing:-.03em;
  background:linear-gradient(135deg,var(--ds-primary,#4f46e5),var(--ds-accent,#6366f1));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--ds-primary,#4f46e5); }
.cxv-rt-stat-l { display:block; margin-top:.3rem; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
  font-weight:700; color:var(--ds-text-soft,#64748b); }
.cxv-rt-stat-b { margin-top:.5rem; color:var(--ds-text-muted,#475569); line-height:1.6; }

/* ── Component: fact box ── */
.cxv-rt-fact { padding:1.1rem 1.3rem; border-radius:var(--ds-card-radius,14px); break-inside:avoid;
  background:var(--ds-surface-2,#f1f5f9); border:1px solid var(--ds-border,rgba(148,163,184,.22));
  color:var(--ds-text-muted,#475569); line-height:1.65; font-size:.97rem; }
.cxv-rt-fact-t { display:block; font-family:var(--ds-font-heading,system-ui,sans-serif); font-weight:700;
  color:var(--ds-text-strong,#0f172a); margin-bottom:.3rem; font-size:1rem; }

/* ── Component: definition ── */
.cxv-rt-def { margin:0; padding-inline-start:1rem; border-inline-start:2px solid var(--ds-border,rgba(148,163,184,.35)); }
.cxv-rt-def dt { font-weight:700; color:var(--ds-text-strong,#0f172a); font-size:1.02rem; }
.cxv-rt-def dd { margin:.25rem 0 0; color:var(--ds-text-muted,#475569); line-height:1.65; }

/* ── Component: side note ── */
.cxv-rt-sidenote { font-size:.86rem; line-height:1.55; color:var(--ds-text-soft,#64748b);
  padding-inline-start:.9rem; border-inline-start:2px solid color-mix(in srgb,var(--ds-accent,#ec4899) 45%,transparent); }
.cxv-rt-sidenote strong { color:var(--ds-text-muted,#475569); }

/* ── Component: lists (bullet + numbered) ── */
.cxv-rt-listlead { font-weight:600; color:var(--ds-text-strong,#0f172a); margin-bottom:.2rem; }
.cxv-rt-ul { list-style:none; margin:0; padding-inline-start:1.6em; color:var(--ds-text-muted,#475569); line-height:1.7; }
.cxv-rt-ul li { position:relative; margin-block:.4em; }
.cxv-rt-ul li::before { content:''; position:absolute; left:-1.15em; top:.6em; width:.42em; height:.42em; border-radius:2px;
  background:linear-gradient(135deg,var(--ds-primary,#4f46e5),var(--ds-accent,#6366f1)); transform:rotate(45deg); }
.cxv-rt-ol { counter-reset:rt; list-style:none; margin:0; padding-inline-start:2.4em; color:var(--ds-text-muted,#475569); line-height:1.7; }
.cxv-rt-ol li { position:relative; margin-block:.5em; counter-increment:rt; }
.cxv-rt-ol li::before { content:counter(rt); position:absolute; left:-2.4em; top:.02em; width:1.6em; height:1.6em;
  display:flex; align-items:center; justify-content:center; border-radius:var(--ds-radius-full,50%);
  background:color-mix(in srgb,var(--ds-primary,#4f46e5) 14%,transparent); color:var(--ds-primary,#4f46e5);
  font-size:.76rem; font-weight:800; }

/* ── Component: inline image / figure ── */
.cxv-rt-figure { margin:0; }
.cxv-rt-figure .cx-media { aspect-ratio:16/10; border-radius:var(--ds-card-radius,14px);
  box-shadow:var(--ds-card-shadow,0 12px 30px -16px rgba(2,6,23,.4)); }
.cxv-rt-figure figcaption { margin-top:.6rem; font-size:.82rem; color:var(--ds-text-soft,#64748b); text-align:center; }

/* ── Component: divider (plain + labelled) ── */
.cxv-rt-hr { height:1px; border:0; margin-block:1.8em;
  background:linear-gradient(90deg,transparent,var(--ds-border,rgba(148,163,184,.5)),transparent); }
.cxv-rt-hr--label { height:auto; background:none; display:flex; align-items:center; gap:1rem;
  color:var(--ds-text-soft,#64748b); font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; }
.cxv-rt-hr--label::before, .cxv-rt-hr--label::after { content:''; flex:1; height:1px;
  background:linear-gradient(90deg,transparent,var(--ds-border,rgba(148,163,184,.5))); }
.cxv-rt-hr--label::after { background:linear-gradient(90deg,var(--ds-border,rgba(148,163,184,.5)),transparent); }

/* ── Drop cap (content.drop_cap=on) — decorative first letter of the opening block ── */
.cxv-rt--dropcap .cxv-rt-flow > .cxv-rt-lead:first-child::first-letter,
.cxv-rt--dropcap .cxv-rt-flow > .cxv-rt-p:first-child::first-letter,
.cxv-rt--dropcap .cxv-rt-body::first-letter {
  float:left; font-family:var(--ds-font-heading,system-ui,sans-serif); font-weight:800;
  font-size:3.4em; line-height:.72; padding-inline-end:.09em; margin-block-start:.04em;
  background:linear-gradient(135deg,var(--ds-primary,#4f46e5),var(--ds-accent,#6366f1));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--ds-primary,#4f46e5); }

/* ══════════════════════════════════════════════════════════════════════════════
   faq — the field-driven FAQ workhorse (inherits content_grid's display/columns/
   card_style axes). ONE template; `display` (accordion / list / grid) + columns +
   card_style + marker drive the look. ACCORDION opens on HOVER (+ focus/tap) with a
   smooth grid-template-rows height reveal — premium, zero JS. Token-only, light/dark.
   section_fx (glow/divider/accent/full-width) is shared.
   ══════════════════════════════════════════════════════════════════════════════ */
.cxv-faq-head { margin-bottom:clamp(1.6rem,4vh,2.6rem); }
/* Header + list share ONE readable, align-positioned column (so the title lines up with
   the questions, and align:left moves both together — same fix as rich_text). */
.cxv-faq-head, .cxv-faq-list { max-width:52rem; margin-inline:auto; }
.cxv-faq--cols2 .cxv-faq-head, .cxv-faq--cols2 .cxv-faq-list { max-width:64rem; }
.cxv-faq.cxv-al--left  .cxv-faq-head, .cxv-faq.cxv-al--left  .cxv-faq-list { margin-inline:0 auto; }
.cxv-faq.cxv-al--right .cxv-faq-head, .cxv-faq.cxv-al--right .cxv-faq-list { margin-inline:auto 0; }
.cxv-faq:not(.cxv-al--left):not(.cxv-al--right) .cxv-faq-head { text-align:center; align-items:center; }

/* ── Layout: stacked (1 col) or grid (2 col) ── */
.cxv-faq-list { display:grid; gap:clamp(.7rem,1.6vw,1rem); align-items:start; }
.cxv-faq--cols2 .cxv-faq-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:720px){ .cxv-faq--cols2 .cxv-faq-list { grid-template-columns:1fr; } }

/* ── Item shell + question + answer ── */
.cxv-faq-item { border-radius:var(--ds-card-radius,14px); overflow:hidden;
  transition:border-color .25s ease, box-shadow .25s ease, background .25s ease; }
.cxv-faq-item:focus { outline:none; }
.cxv-faq-item:focus-visible { outline:2px solid var(--ds-primary,#4f46e5); outline-offset:2px; }
.cxv-faq-q { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:0;
  font-family:var(--ds-font-heading,system-ui,sans-serif); font-weight:650;
  font-size:clamp(1rem,1.6vw,1.12rem); line-height:1.4; color:var(--ds-text-strong,#0f172a);
  padding:clamp(.9rem,1.6vw,1.15rem) clamp(1rem,1.8vw,1.35rem);
  transition:color .25s ease; }
.cxv-faq-a { color:var(--ds-text-muted,#475569); line-height:1.7; font-size:1rem; }
/* list / grid: answers always shown (padding on the answer itself) */
.cxv-faq-item--open .cxv-faq-q { padding-bottom:.4rem; }
.cxv-faq-item--open .cxv-faq-a { padding:0 clamp(1rem,1.8vw,1.35rem) clamp(1rem,1.8vw,1.25rem); }

/* ── Accordion: smooth HOVER / focus reveal (grid-template-rows 0fr → 1fr), zero JS ──
   The answer stays in the DOM (clipped) so it's screen-reader accessible; the item is
   focusable (tabindex) so keyboard + touch users can reveal it too. */
.cxv-faq--accordion .cxv-faq-item { cursor:pointer; }
.cxv-faq--accordion .cxv-faq-a { display:grid; grid-template-rows:0fr; padding:0;
  transition:grid-template-rows .42s cubic-bezier(.22,1,.36,1); }
.cxv-faq--accordion .cxv-faq-a-in { overflow:hidden; min-height:0; opacity:0; transform:translateY(-.3rem);
  padding:.15rem clamp(1rem,1.8vw,1.35rem) clamp(1rem,1.8vw,1.2rem);
  transition:opacity .3s ease, transform .35s cubic-bezier(.22,1,.36,1); }
.cxv-faq--accordion .cxv-faq-item:hover,
.cxv-faq--accordion .cxv-faq-item:focus-within,
.cxv-faq--accordion .cxv-faq-item--pinned { }
.cxv-faq--accordion .cxv-faq-item:hover > .cxv-faq-a,
.cxv-faq--accordion .cxv-faq-item:focus-within > .cxv-faq-a,
.cxv-faq--accordion .cxv-faq-item--pinned > .cxv-faq-a { grid-template-rows:1fr; }
.cxv-faq--accordion .cxv-faq-item:hover .cxv-faq-a-in,
.cxv-faq--accordion .cxv-faq-item:focus-within .cxv-faq-a-in,
.cxv-faq--accordion .cxv-faq-item--pinned .cxv-faq-a-in { opacity:1; transform:none; }
.cxv-faq--accordion .cxv-faq-item:hover > .cxv-faq-q,
.cxv-faq--accordion .cxv-faq-item:focus-within > .cxv-faq-q,
.cxv-faq--accordion .cxv-faq-item--pinned > .cxv-faq-q { color:var(--ds-primary,#4f46e5); }

/* ── card_style (inherited from content_grid) ── */
.cxv-faq--card-elevated .cxv-faq-item { background:var(--ds-surface,#fff); border:1px solid transparent;
  box-shadow:var(--ds-card-shadow,0 12px 30px -16px rgba(2,6,23,.4)); }
.cxv-faq--card-bordered .cxv-faq-item { background:var(--ds-surface,#fff);
  border:1px solid var(--ds-border,rgba(148,163,184,.25)); }
.cxv-faq--card-flat .cxv-faq-item { background:var(--ds-surface-2,#f1f5f9); }
.cxv-faq--card-glass .cxv-faq-item { background:color-mix(in srgb,var(--ds-surface,#fff) 68%,transparent);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid color-mix(in srgb,var(--ds-border,#94a3b8) 40%,transparent); }
.cxv-faq--card-minimal .cxv-faq-item { background:transparent; }
.cxv-faq--card-minimal .cxv-faq-q,
.cxv-faq--card-minimal .cxv-faq-a,
.cxv-faq--card-minimal .cxv-faq-a-in { padding-inline:0; }
/* divided = no cards, hairline separators (a clean editorial FAQ) */
.cxv-faq--card-divided .cxv-faq-list { gap:0; }
.cxv-faq--card-divided .cxv-faq-item { background:transparent; border-radius:0;
  border-bottom:1px solid var(--ds-border,rgba(148,163,184,.22)); }
.cxv-faq--card-divided .cxv-faq-list > .cxv-faq-item:first-child { border-top:1px solid var(--ds-border,rgba(148,163,184,.22)); }
.cxv-faq--card-divided .cxv-faq-q,
.cxv-faq--card-divided .cxv-faq-a,
.cxv-faq--card-divided .cxv-faq-a-in { padding-inline:0; }
/* hover lift on carded accordions */
.cxv-faq--card-elevated .cxv-faq-item:hover,
.cxv-faq--card-bordered .cxv-faq-item:hover { border-color:color-mix(in srgb,var(--ds-primary,#4f46e5) 40%,transparent); }

/* ── Toggle marker (accordion only): chevron / plus / none — animates on hover/focus ── */
.cxv-faq-mark { flex:none; color:var(--ds-primary,#4f46e5); }
.cxv-faq--mark-chevron .cxv-faq-mark { width:.58rem; height:.58rem; margin-top:-.16rem;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg);
  transition:transform .3s cubic-bezier(.22,1,.36,1), margin-top .3s ease; }
.cxv-faq--mark-chevron .cxv-faq-item:hover .cxv-faq-mark,
.cxv-faq--mark-chevron .cxv-faq-item:focus-within .cxv-faq-mark,
.cxv-faq--mark-chevron .cxv-faq-item--pinned .cxv-faq-mark { transform:rotate(-135deg); margin-top:.1rem; }
.cxv-faq--mark-plus .cxv-faq-mark { position:relative; width:.95rem; height:.95rem; }
.cxv-faq--mark-plus .cxv-faq-mark::before,
.cxv-faq--mark-plus .cxv-faq-mark::after { content:''; position:absolute; background:currentColor; border-radius:2px; }
.cxv-faq--mark-plus .cxv-faq-mark::before { left:0; right:0; top:calc(50% - 1px); height:2px; }
.cxv-faq--mark-plus .cxv-faq-mark::after { top:0; bottom:0; left:calc(50% - 1px); width:2px; transition:transform .3s ease; }
.cxv-faq--mark-plus .cxv-faq-item:hover .cxv-faq-mark::after,
.cxv-faq--mark-plus .cxv-faq-item:focus-within .cxv-faq-mark::after,
.cxv-faq--mark-plus .cxv-faq-item--pinned .cxv-faq-mark::after { transform:scaleY(0); }
.cxv-faq--mark-none .cxv-faq-mark { display:none; }
.cxv-faq-item--open .cxv-faq-mark { display:none; }   /* no toggle glyph on always-open list/grid */

@media (prefers-reduced-motion:reduce){
  .cxv-faq--accordion .cxv-faq-a, .cxv-faq--accordion .cxv-faq-a-in,
  .cxv-faq-q, .cxv-faq-mark, .cxv-faq--mark-plus .cxv-faq-mark::after { transition:none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   GENERIC ANIMATION FX — inherited by ANY hero (and content_grid) via section_fx.
   Opt-in motion axes that need NO per-variant markup, so switching one on animates
   every existing look. Token-only, adaptive light/dark, CSS-only (so they run in
   the editor canvas), each fully neutralised under prefers-reduced-motion.
   See docs/design/composer-hero-contract.md §GS.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── entrance (content.entrance) — staggered load reveal. Keyed off the UNIVERSAL
   inline-edit hooks (data-cx-field) + the CTA row + chips, so it lands on every hero
   with zero bespoke markup. Fields reveal in reading order via per-role delays.
   rise = slide up · fade = opacity only · zoom = scale in. ── */
.cxv-enter [data-cx-field],
.cxv-enter .cx-row,
.cxv-enter .cxv-chips { opacity:0; animation:cxvEnterFade .7s cubic-bezier(.22,1,.36,1) both; }
.cxv-enter--rise [data-cx-field],
.cxv-enter--rise .cx-row,
.cxv-enter--rise .cxv-chips { animation-name:cxvEnterRise; }
.cxv-enter--zoom [data-cx-field],
.cxv-enter--zoom .cx-row,
.cxv-enter--zoom .cxv-chips { animation-name:cxvEnterZoom; }
/* reading-order stagger (rules AFTER the shorthand so the delay sticks) */
.cxv-enter [data-cx-field="eyebrow"]  { animation-delay:.05s; }
.cxv-enter [data-cx-field="title"]    { animation-delay:.18s; }
.cxv-enter [data-cx-field="subtitle"] { animation-delay:.32s; }
.cxv-enter .cx-row                    { animation-delay:.46s; }
.cxv-enter .cxv-chips                 { animation-delay:.60s; }
@keyframes cxvEnterFade { from { opacity:0; } to { opacity:1; } }
@keyframes cxvEnterRise { from { opacity:0; transform:translateY(1.4rem); } to { opacity:1; transform:translateY(0); } }
@keyframes cxvEnterZoom { from { opacity:0; transform:scale(.94); } to { opacity:1; transform:scale(1); } }
@media (prefers-reduced-motion:reduce){
  .cxv-enter [data-cx-field], .cxv-enter .cx-row, .cxv-enter .cxv-chips { opacity:1; animation:none; }
}

/* ── bg_motion (content.bg_motion) — animated brand background atmosphere behind ANY
   hero. Adaptive (brand tint over the theme surface → legible light + dark). The layer
   sits at z-index:-1 under an isolate context — the SAME rule as glow, so it never
   covers media/content (see §GS glow z-index rule). grid = perspective floor (à la V1
   gridpulse) · aurora = drifting brand blobs · rays = rotating light rays · mesh =
   shifting gradient mesh. ── */
.cxv-bg { position:relative; isolation:isolate; overflow:hidden; }
.cxv-bg::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; }

.cxv-bg--grid::before {
  inset:auto 0 0 0; height:62%;
  background-image:
    linear-gradient(to right,  color-mix(in srgb, var(--ds-primary,#4f46e5) 26%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--ds-primary,#4f46e5) 26%, transparent) 1px, transparent 1px);
  background-size:54px 54px;
  transform:perspective(340px) rotateX(70deg); transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(to top, black 28%, transparent 100%);
          mask-image:linear-gradient(to top, black 28%, transparent 100%);
  animation:cxvBgGrid 2.6s linear infinite;
}
@keyframes cxvBgGrid { to { background-position:0 54px; } }

.cxv-bg--aurora::before {
  background:
    radial-gradient(40% 40% at 22% 28%, color-mix(in srgb, var(--ds-primary,#4f46e5) 26%, transparent), transparent 70%),
    radial-gradient(38% 42% at 80% 30%, color-mix(in srgb, var(--ds-accent,#6366f1)  24%, transparent), transparent 72%),
    radial-gradient(46% 44% at 50% 84%, color-mix(in srgb, var(--ds-primary,#4f46e5) 18%, transparent), transparent 74%);
  filter:blur(14px); animation:cxvBgAurora 16s ease-in-out infinite alternate;
}
@keyframes cxvBgAurora {
  0%   { transform:translate3d(-3%,-2%,0) scale(1.05); }
  50%  { transform:translate3d(3%,2%,0)  scale(1.12); }
  100% { transform:translate3d(-2%,3%,0) scale(1.06); }
}

.cxv-bg--rays::before {
  background:repeating-conic-gradient(from 0deg at 50% 0%,
    transparent 0deg 6deg,
    color-mix(in srgb, var(--ds-primary,#4f46e5) 13%, transparent) 6deg 7.5deg);
  transform-origin:50% 0%; animation:cxvBgRays 44s linear infinite;
  -webkit-mask-image:radial-gradient(62% 62% at 50% 0%, black, transparent 78%);
          mask-image:radial-gradient(62% 62% at 50% 0%, black, transparent 78%);
}
@keyframes cxvBgRays { to { transform:rotate(1turn); } }

.cxv-bg--mesh::before {
  background:
    radial-gradient(30% 30% at 20% 20%, color-mix(in srgb, var(--ds-primary,#4f46e5) 22%, transparent), transparent 70%),
    radial-gradient(28% 28% at 80% 25%, color-mix(in srgb, var(--ds-accent,#6366f1)  20%, transparent), transparent 70%),
    radial-gradient(34% 34% at 65% 80%, color-mix(in srgb, var(--ds-primary,#4f46e5) 16%, transparent), transparent 72%),
    radial-gradient(26% 26% at 30% 75%, color-mix(in srgb, var(--ds-accent,#6366f1)  16%, transparent), transparent 72%);
  background-size:200% 200%; animation:cxvBgMesh 18s ease-in-out infinite alternate;
}
@keyframes cxvBgMesh { 0% { background-position:0% 0%; } 100% { background-position:100% 100%; } }

.cxv-accent-off.cxv-bg::before { opacity:.35; filter:grayscale(1); }
@media (prefers-reduced-motion:reduce){
  .cxv-bg--grid::before, .cxv-bg--aurora::before, .cxv-bg--rays::before, .cxv-bg--mesh::before { animation:none; }
}

/* ── title_fx (content.title_fx) — animated headline treatment on the title
   (data-cx-field=title / .cx-heading--1). shimmer = a gloss sweep via ::after (so it
   COMPOSES with entrance); gradient = animated brand-gradient text (owns the title's
   own animation, so it wins over entrance ON THE TITLE only — the rest still staggers). ── */
.cxv-titlefx [data-cx-field="title"],
.cxv-titlefx .cx-heading--1 { position:relative; }
.cxv-titlefx--shimmer [data-cx-field="title"]::after,
.cxv-titlefx--shimmer .cx-heading--1::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg, transparent 42%,
    color-mix(in srgb, var(--ds-primary,#4f46e5) 55%, transparent) 50%, transparent 58%);
  background-size:220% 100%; background-position:220% 0; opacity:.7;
  animation:cxvTitleShimmer 4.6s ease-in-out infinite;
}
@keyframes cxvTitleShimmer { 0%,100% { background-position:220% 0; } 55% { background-position:-40% 0; } }
.cxv-titlefx--gradient [data-cx-field="title"],
.cxv-titlefx--gradient .cx-heading--1 {
  background:linear-gradient(92deg, var(--ds-text-strong,#0f172a), var(--ds-primary,#4f46e5) 45%,
    var(--ds-accent,#6366f1) 70%, var(--ds-text-strong,#0f172a));
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:cxvTitleGradient 7s ease-in-out infinite;
}
@keyframes cxvTitleGradient { 0%,100% { background-position:0 0; } 50% { background-position:100% 0; } }
@media (prefers-reduced-motion:reduce){
  .cxv-titlefx--shimmer [data-cx-field="title"]::after,
  .cxv-titlefx--shimmer .cx-heading--1::after { animation:none; opacity:0; }
  .cxv-titlefx--gradient [data-cx-field="title"],
  .cxv-titlefx--gradient .cx-heading--1 { animation:none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PERSONA HERO ARCHETYPES — rich, distinct signature animations (clinic / gym /
   IT hardware / local services / salon+makeup). Each is a shell the generic FX
   layer above can layer onto. All Mode A (adaptive), token-only, reduced-motion.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── hero · vitals — clinical care monitor: ECG trace + breathing halo (clinic/health) ── */
.cxv-vitals { position:relative; isolation:isolate; }
.cxv-vitals-grid { align-items:center; }
.cxv-vitals-panel { position:relative; display:grid; place-items:center; min-height:clamp(18rem,42vh,26rem); }
.cxv-vitals-halo { position:absolute; width:min(24rem,82%); aspect-ratio:1; border-radius:var(--ds-radius-full,50%);
  background:radial-gradient(circle, color-mix(in srgb,var(--ds-primary,#4f46e5) 20%,transparent), transparent 68%);
  filter:blur(6px); z-index:0; animation:cxvVitalsBreathe 6s ease-in-out infinite; }
@keyframes cxvVitalsBreathe { 0%,100% { transform:scale(.9); opacity:.5; } 50% { transform:scale(1.08); opacity:.85; } }
.cxv-vitals-card { position:relative; z-index:1; width:min(26rem,100%); display:flex; flex-direction:column; gap:1rem;
  padding:clamp(1.1rem,3vw,1.6rem); border-radius:var(--ds-card-radius,18px);
  background:color-mix(in srgb,var(--ds-surface,#fff) 88%,transparent);
  border:1px solid var(--ds-border,rgba(148,163,184,.28)); box-shadow:var(--ds-card-shadow,0 24px 60px -30px rgba(2,6,23,.45));
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.cxv-vitals-dot { position:absolute; top:.55rem; right:.6rem; z-index:2; width:.55rem; height:.55rem;
  border-radius:var(--ds-radius-full,50%); background:var(--ds-primary,#4f46e5);
  animation:cxvVitalsDot 1.9s ease-in-out infinite; }
@keyframes cxvVitalsDot { 0% { box-shadow:0 0 0 0 color-mix(in srgb,var(--ds-primary,#4f46e5) 55%,transparent); }
  70%,100% { box-shadow:0 0 0 .7rem transparent; } }
.cxv-vitals-mon { position:relative; overflow:hidden; height:5rem; border-radius:var(--ds-radius-md,12px);
  background:color-mix(in srgb,var(--ds-primary,#4f46e5) 5%,var(--ds-surface-2,#f1f5f9));
  border:1px solid var(--ds-border,rgba(148,163,184,.2)); }
.cxv-vitals-ecg { position:absolute; inset:0; width:100%; height:100%; }
.cxv-vitals-line { fill:none; stroke:var(--ds-primary,#4f46e5); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:560; stroke-dashoffset:560; animation:cxvVitalsEcg 2.8s cubic-bezier(.6,0,.35,1) infinite; }
@keyframes cxvVitalsEcg { 0% { stroke-dashoffset:560; } 55% { stroke-dashoffset:0; } 100% { stroke-dashoffset:-560; } }
.cxv-vitals-scan { position:absolute; top:0; bottom:0; width:34%; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, transparent, color-mix(in srgb,var(--ds-primary,#4f46e5) 16%,transparent), transparent);
  animation:cxvVitalsScan 3.4s linear infinite; }
@keyframes cxvVitalsScan { from { transform:translateX(-40%); } to { transform:translateX(320%); } }
.cxv-vitals-readout { display:flex; gap:.5rem; }
.cxv-vitals-readout span { flex:1; display:flex; flex-direction:column; gap:.1rem; text-align:center;
  padding:.5rem .3rem; border-radius:var(--ds-radius-sm,10px); font-size:.66rem; color:var(--ds-text-muted,#64748b);
  background:color-mix(in srgb,var(--ds-primary,#4f46e5) 4%,var(--ds-surface-2,#f1f5f9)); }
.cxv-vitals-readout b { font-family:var(--ds-font-heading,system-ui,sans-serif); font-weight:800;
  font-size:1.3rem; line-height:1.1; color:var(--ds-text-strong,#0f172a); }
.cxv-vitals-readout i { font-style:normal; font-size:.64rem; }
@media (prefers-reduced-motion:reduce){
  .cxv-vitals-halo, .cxv-vitals-dot, .cxv-vitals-scan { animation:none; }
  .cxv-vitals-line { animation:none; stroke-dashoffset:0; } }
@media (max-width:820px){ .cxv-vitals-panel { min-height:15rem; } }

/* ── hero · pace — athletic energy streaks + pulsing tempo meter (gym/fitness) ── */
.cxv-pace { position:relative; isolation:isolate; overflow:hidden; }
.cxv-pace-streaks { position:absolute; inset:-20% -10%; z-index:0; pointer-events:none;
  background:repeating-linear-gradient(115deg, transparent 0 34px,
    color-mix(in srgb,var(--ds-primary,#4f46e5) 7%,transparent) 34px 37px);
  animation:cxvPaceStreak 1.5s linear infinite; }
@keyframes cxvPaceStreak { to { transform:translateX(37px); } }
.cxv-pace-copy { position:relative; z-index:1; }
.cxv-pace-badge { text-transform:uppercase; letter-spacing:.16em; font-weight:700; }
.cxv-pace-title { text-transform:uppercase; font-weight:800; letter-spacing:-.02em; line-height:.95;
  font-size:clamp(2.6rem,8vw,5.6rem); }
.cxv-pace-meter { display:flex; align-items:flex-end; justify-content:center; gap:.4rem; height:3rem; margin-top:.5rem; }
.cxv-pace-meter i { width:.42rem; height:100%; transform-origin:bottom; border-radius:var(--ds-radius-full,99px);
  background:linear-gradient(var(--ds-primary,#4f46e5), var(--ds-accent,#6366f1));
  animation:cxvPaceBeat 1s ease-in-out infinite; }
@keyframes cxvPaceBeat { 0%,100% { transform:scaleY(.32); } 50% { transform:scaleY(1); } }
.cxv-pace-meter i:nth-child(1) { animation-delay:-.90s; }
.cxv-pace-meter i:nth-child(2) { animation-delay:-.25s; }
.cxv-pace-meter i:nth-child(3) { animation-delay:-.60s; }
.cxv-pace-meter i:nth-child(4) { animation-delay:-.10s; }
.cxv-pace-meter i:nth-child(5) { animation-delay:-.78s; }
.cxv-pace-meter i:nth-child(6) { animation-delay:-.38s; }
.cxv-pace-meter i:nth-child(7) { animation-delay:-.86s; }
.cxv-pace-meter i:nth-child(8) { animation-delay:-.16s; }
.cxv-pace-meter i:nth-child(9) { animation-delay:-.52s; }
.cxv-pace-meter i:nth-child(10) { animation-delay:-.70s; }
@media (prefers-reduced-motion:reduce){ .cxv-pace-streaks, .cxv-pace-meter i { animation:none; } .cxv-pace-meter i { transform:scaleY(.7); } }
@media (max-width:640px){ .cxv-pace-meter { height:2.2rem; } }

/* ── hero · circuit — PCB signal pulses along brand traces (IT hardware) ──────── */
.cxv-circuit-grid { align-items:center; }
.cxv-circuit-panel { position:relative; display:grid; place-items:center; min-height:clamp(18rem,44vh,28rem); }
.cxv-circuit-svg { width:100%; max-width:30rem; height:auto; overflow:visible; }
.cxv-circuit-traces path { fill:none; stroke:var(--ds-border,rgba(148,163,184,.5)); stroke-width:2; }
.cxv-circuit-signals path { fill:none; stroke:var(--ds-primary,#4f46e5); stroke-width:2.4; stroke-linecap:round;
  stroke-dasharray:10 260; animation:cxvCircuitFlow 3s linear infinite; }
@keyframes cxvCircuitFlow { to { stroke-dashoffset:-270; } }
.cxv-circuit-signals path:nth-child(2) { animation-delay:-.5s; }
.cxv-circuit-signals path:nth-child(3) { animation-delay:-1s; }
.cxv-circuit-signals path:nth-child(4) { animation-delay:-1.5s; }
.cxv-circuit-signals path:nth-child(5) { animation-delay:-2s; }
.cxv-circuit-signals path:nth-child(6) { animation-delay:-2.5s; }
.cxv-circuit-nodes circle { fill:var(--ds-surface,#fff); stroke:var(--ds-primary,#4f46e5); stroke-width:2;
  animation:cxvCircuitNode 2.2s ease-in-out infinite; }
@keyframes cxvCircuitNode { 0%,100% { opacity:.45; }
  50% { opacity:1; filter:drop-shadow(0 0 4px color-mix(in srgb,var(--ds-primary,#4f46e5) 60%,transparent)); } }
.cxv-circuit-nodes circle:nth-child(2) { animation-delay:-.4s; }
.cxv-circuit-nodes circle:nth-child(3) { animation-delay:-.8s; }
.cxv-circuit-nodes circle:nth-child(4) { animation-delay:-1.2s; }
.cxv-circuit-nodes circle:nth-child(5) { animation-delay:-1.6s; }
.cxv-circuit-nodes circle:nth-child(6) { animation-delay:-2s; }
.cxv-circuit-die { stroke:var(--ds-primary,#4f46e5); stroke-width:2;
  fill:color-mix(in srgb,var(--ds-primary,#4f46e5) 12%,var(--ds-surface,#fff)); }
.cxv-circuit-die2 { fill:none; stroke-width:1.5; stroke:color-mix(in srgb,var(--ds-primary,#4f46e5) 50%,transparent);
  animation:cxvCircuitDie 2.4s ease-in-out infinite; }
@keyframes cxvCircuitDie { 0%,100% { opacity:.55; } 50% { opacity:1; } }
.cxv-circuit-chiplabel { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2;
  font-family:var(--ds-font-mono,ui-monospace,monospace); font-size:.7rem; font-weight:700; letter-spacing:.1em;
  color:var(--ds-primary,#4f46e5); pointer-events:none; }
@media (prefers-reduced-motion:reduce){
  .cxv-circuit-signals path, .cxv-circuit-nodes circle, .cxv-circuit-die2 { animation:none; }
  .cxv-circuit-signals path { stroke-dasharray:none; opacity:.5; } }
@media (max-width:820px){ .cxv-circuit-panel { min-height:16rem; } }

/* ── hero · beacon — radar locator ping + trust badges (local services/trades) ── */
.cxv-beacon-grid { align-items:center; }
.cxv-beacon-trust { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.4rem; }
.cxv-beacon-badge { display:inline-flex; align-items:center; gap:.4rem; padding:.34rem .7rem;
  border-radius:var(--ds-radius-full,999px); font-size:.78rem; font-weight:600; color:var(--ds-text-strong,#0f172a);
  background:color-mix(in srgb,var(--ds-primary,#4f46e5) 8%,var(--ds-surface,#fff));
  border:1px solid color-mix(in srgb,var(--ds-primary,#4f46e5) 22%,transparent); }
.cxv-beacon-check { flex:none; width:.9rem; height:.9rem; color:var(--ds-primary,#4f46e5); }
.cxv-beacon-radar { position:relative; display:grid; place-items:center; min-height:clamp(18rem,44vh,26rem); }
.cxv-beacon-sweep { position:absolute; z-index:1; width:min(20rem,84%); aspect-ratio:1; border-radius:var(--ds-radius-full,50%);
  background:conic-gradient(from 0deg, color-mix(in srgb,var(--ds-primary,#4f46e5) 30%,transparent) 0deg, transparent 60deg);
  opacity:.6; animation:cxvBeaconSweep 4s linear infinite; }
@keyframes cxvBeaconSweep { to { transform:rotate(1turn); } }
.cxv-beacon-ring { position:absolute; z-index:1; width:6rem; aspect-ratio:1; border-radius:var(--ds-radius-full,50%);
  border:1.5px solid color-mix(in srgb,var(--ds-primary,#4f46e5) 45%,transparent); opacity:0;
  animation:cxvBeaconPing 3s ease-out infinite; }
.cxv-beacon-ring--2 { animation-delay:1s; }
.cxv-beacon-ring--3 { animation-delay:2s; }
@keyframes cxvBeaconPing { 0% { transform:scale(.3); opacity:.9; } 80% { opacity:0; } 100% { transform:scale(4.4); opacity:0; } }
.cxv-beacon-pin { position:relative; z-index:2; width:1rem; height:1rem; border-radius:var(--ds-radius-full,50%);
  background:var(--ds-primary,#4f46e5); box-shadow:0 6px 18px -6px color-mix(in srgb,var(--ds-primary,#4f46e5) 70%,transparent);
  animation:cxvBeaconBob 2.4s ease-in-out infinite; }
@keyframes cxvBeaconBob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-.3rem); } }
.cxv-beacon-blip { position:absolute; z-index:2; width:.5rem; height:.5rem; border-radius:var(--ds-radius-full,50%);
  background:var(--ds-accent,#6366f1); animation:cxvBeaconBlip 2.8s ease-in-out infinite; }
.cxv-beacon-blip--a { top:32%; left:64%; }
.cxv-beacon-blip--b { top:62%; left:36%; animation-delay:1.2s; }
@keyframes cxvBeaconBlip { 0%,100% { opacity:0; transform:scale(.4); } 50% { opacity:1; transform:scale(1); } }
@media (prefers-reduced-motion:reduce){
  .cxv-beacon-sweep, .cxv-beacon-ring, .cxv-beacon-pin, .cxv-beacon-blip { animation:none; }
  .cxv-beacon-ring { opacity:.4; transform:scale(1.7); } }

/* ── hero · shimmer — warm salon/makeup: bokeh drift + portrait sheen ─────────── */
.cxv-shimmer { position:relative; isolation:isolate; overflow:hidden; }
.cxv-shimmer-orbs { position:absolute; inset:0; z-index:0; pointer-events:none; }
.cxv-shimmer-orbs i { position:absolute; border-radius:var(--ds-radius-full,50%); filter:blur(4px);
  background:radial-gradient(circle, color-mix(in srgb,var(--ds-primary,#4f46e5) 34%,transparent), transparent 70%);
  animation:cxvShimmerDrift 14s ease-in-out infinite; }
.cxv-shimmer-orbs i:nth-child(1) { width:7rem; height:7rem; left:6%; top:62%; }
.cxv-shimmer-orbs i:nth-child(2) { width:4rem; height:4rem; left:22%; top:20%; animation-delay:-3s;
  background:radial-gradient(circle, color-mix(in srgb,var(--ds-accent,#6366f1) 30%,transparent), transparent 70%); }
.cxv-shimmer-orbs i:nth-child(3) { width:9rem; height:9rem; right:9%; top:54%; animation-delay:-6s; }
.cxv-shimmer-orbs i:nth-child(4) { width:3rem; height:3rem; right:26%; top:16%; animation-delay:-9s;
  background:radial-gradient(circle, color-mix(in srgb,var(--ds-accent,#6366f1) 30%,transparent), transparent 70%); }
.cxv-shimmer-orbs i:nth-child(5) { width:5rem; height:5rem; left:48%; top:82%; animation-delay:-2s; }
@keyframes cxvShimmerDrift { 0%,100% { transform:translateY(0) scale(1); opacity:.5; }
  50% { transform:translateY(-1.6rem) scale(1.12); opacity:.8; } }
.cxv-shimmer-grid { position:relative; z-index:1; align-items:center; }
.cxv-shimmer-eyebrow { font-family:var(--ds-font-heading,serif); font-style:italic; letter-spacing:.02em;
  font-size:.98rem; color:var(--ds-primary,#4f46e5); }
.cxv-shimmer-title { font-size:clamp(2.4rem,6vw,4.6rem); letter-spacing:-.02em; line-height:1.02;
  background:linear-gradient(100deg, var(--ds-text-strong,#0f172a) 20%, var(--ds-primary,#4f46e5) 50%, var(--ds-text-strong,#0f172a) 80%);
  background-size:220% 100%; -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent; animation:cxvShimmerTitle 6s ease-in-out infinite; }
@keyframes cxvShimmerTitle { 0%,100% { background-position:0 0; } 50% { background-position:100% 0; } }
@supports not ((background-clip:text) or (-webkit-background-clip:text)) {
  .cxv-shimmer-title { color:var(--ds-text-strong,#0f172a); -webkit-text-fill-color:currentColor; } }
.cxv-shimmer-media { position:relative; overflow:hidden; aspect-ratio:4/5; border-radius:var(--ds-card-radius,20px);
  border:1px solid var(--ds-border,rgba(148,163,184,.3)); box-shadow:var(--ds-shadow-lg); }
.cxv-shimmer-sheen { position:absolute; inset:0; z-index:2; pointer-events:none; background-size:250% 100%; background-position:220% 0;
  background:linear-gradient(115deg, transparent 40%, color-mix(in srgb,var(--ds-surface,#fff) 55%,transparent) 50%, transparent 60%);
  animation:cxvShimmerSheen 5.5s ease-in-out infinite; }
@keyframes cxvShimmerSheen { 0%,100% { background-position:220% 0; } 55% { background-position:-60% 0; } }
@media (prefers-reduced-motion:reduce){
  .cxv-shimmer-orbs i, .cxv-shimmer-title, .cxv-shimmer-sheen { animation:none; }
  .cxv-shimmer-title { background-position:0 0; } }
@media (max-width:820px){ .cxv-shimmer-media { aspect-ratio:4/3; } }

/* ── Shared hero metric strip (_hero_metrics.html) — value+label KPI tiles, authored inline or
   bound to metrics.business (real BI-snapshot data). Used by pace/shimmer/beacon; vitals styles
   its own card tiles. Token-only, adaptive. ── */
.cxv-metrics { display:flex; flex-wrap:wrap; gap:clamp(1.1rem,3vw,2rem); margin-top:.5rem; }
.cxv-al--center .cxv-metrics { justify-content:center; }
.cxv-metric { display:flex; flex-direction:column; gap:.1rem; }
.cxv-metric-val { font-family:var(--ds-font-heading,system-ui,sans-serif); font-weight:800; line-height:1;
  font-size:clamp(1.5rem,3.4vw,2.1rem); color:var(--ds-text-strong,#0f172a); }
.cxv-metric-lbl { font-size:.76rem; font-weight:500; letter-spacing:.01em; color:var(--ds-text-muted,#64748b); }

/* media_side (content.media_side=left) also flips the decorative persona panels */
.cxv-side--left .cxv-vitals-panel, .cxv-side--left .cxv-circuit-panel, .cxv-side--left .cxv-beacon-radar { order:-1; }

/* ── doc — synced documentation body (markdown → safe HTML via cx_doc), with READING MODES:
   width · paper theme · font · size (cxv-doc--w/t/f/s-*). Doc-scoped vars (--cxv-doc-*) default to
   the theme tokens; the paper/sepia/slate/ink themes override them with a fixed reading palette (a
   Kindle-style surface, on purpose — independent of site dark mode). Code/tables/anchors read the
   same vars, so every mode stays legible. All token-only (fixed hexes only as var() fallbacks). ── */
.cxv-doc {
  --cxv-doc-bg:var(--ds-surface, #ffffff);
  --cxv-doc-ink:var(--ds-text-strong, #0f172a);
  --cxv-doc-muted:var(--ds-text-muted, #475569);
  --cxv-doc-rule:var(--ds-border, rgba(148,163,184,.28));
  --cxv-doc-code:var(--ds-surface-2, #f1f5f9);
  --cxv-doc-accent:var(--ds-primary, #4f46e5);
  --cxv-doc-measure:64ch; --cxv-doc-fs:1.02rem; --cxv-doc-lh:1.75;
  --cxv-doc-font:var(--ds-font-body, system-ui, sans-serif);
}
/* Paper themes — fixed warm/cool reading surfaces (hex only as var fallbacks). */
.cxv-doc--t-paper { --cxv-doc-bg:var(--ds-doc-paper-bg, #faf6ec); --cxv-doc-ink:var(--ds-doc-paper-ink, #3b3325);
  --cxv-doc-muted:var(--ds-doc-paper-muted, #6b6152); --cxv-doc-rule:var(--ds-doc-paper-rule, rgba(90,70,40,.2));
  --cxv-doc-code:var(--ds-doc-paper-code, #f0e9d6); }
.cxv-doc--t-sepia { --cxv-doc-bg:var(--ds-doc-sepia-bg, #f4ecd8); --cxv-doc-ink:var(--ds-doc-sepia-ink, #5b4636);
  --cxv-doc-muted:var(--ds-doc-sepia-muted, #7a6450); --cxv-doc-rule:var(--ds-doc-sepia-rule, rgba(91,70,54,.24));
  --cxv-doc-code:var(--ds-doc-sepia-code, #ece0c4); }
.cxv-doc--t-slate { --cxv-doc-bg:var(--ds-doc-slate-bg, #eceff3); --cxv-doc-ink:var(--ds-doc-slate-ink, #263243);
  --cxv-doc-muted:var(--ds-doc-slate-muted, #52627a); --cxv-doc-rule:var(--ds-doc-slate-rule, rgba(38,50,67,.16));
  --cxv-doc-code:var(--ds-doc-slate-code, #e0e5ec); }
.cxv-doc--t-ink { --cxv-doc-bg:var(--ds-doc-ink-bg, #1b1e26); --cxv-doc-ink:var(--ds-doc-ink-fg, #e7e3da);
  --cxv-doc-muted:var(--ds-doc-ink-muted, #a6a196); --cxv-doc-rule:var(--ds-doc-ink-rule, rgba(231,227,218,.16));
  --cxv-doc-code:var(--ds-doc-ink-code, #262a34); --cxv-doc-accent:var(--ds-doc-ink-accent, #9db4ff); }
/* Width + font + size modes. */
.cxv-doc--w-narrow   { --cxv-doc-measure:56ch; }
.cxv-doc--w-standard { --cxv-doc-measure:66ch; }
.cxv-doc--w-wide     { --cxv-doc-measure:82ch; }
.cxv-doc--w-full     { --cxv-doc-measure:none; }
.cxv-doc--f-serif    { --cxv-doc-font:var(--ds-font-serif, 'Iowan Old Style', Georgia, 'Times New Roman', serif); }
.cxv-doc--s-cozy        { --cxv-doc-fs:.95rem; --cxv-doc-lh:1.66; }
.cxv-doc--s-comfortable { --cxv-doc-fs:1.06rem; --cxv-doc-lh:1.78; }
.cxv-doc--s-large       { --cxv-doc-fs:1.2rem;  --cxv-doc-lh:1.85; }

.cxv-doc .cx-doc-wrap { max-width:calc(var(--cxv-doc-measure, 66ch) + 2 * clamp(1rem, 4vw, 3.25rem)); margin-inline:auto; }
.cxv-doc--w-full .cx-doc-wrap { max-width:none; }
/* Non-default themes paint a "sheet" so the reading surface reads as paper. */
.cxv-doc--t-paper, .cxv-doc--t-sepia, .cxv-doc--t-slate, .cxv-doc--t-ink { background:var(--cxv-doc-bg); }
.cxv-doc--t-paper .cx-doc-wrap, .cxv-doc--t-sepia .cx-doc-wrap,
.cxv-doc--t-slate .cx-doc-wrap, .cxv-doc--t-ink .cx-doc-wrap {
  background:var(--cxv-doc-bg); padding:clamp(1.5rem, 5vw, 3.5rem);
  border-radius:var(--ds-radius-lg, 16px); box-shadow:var(--ds-shadow-md, 0 10px 40px -20px rgba(2,6,23,.35)); }
.cxv-doc-title { margin-bottom:clamp(1rem,3vh,1.75rem); color:var(--cxv-doc-ink); font-family:var(--cxv-doc-font); }
.cxv-doc-body { color:var(--cxv-doc-ink); font-family:var(--cxv-doc-font);
  font-size:var(--cxv-doc-fs); line-height:var(--cxv-doc-lh); max-width:var(--cxv-doc-measure); }
.cxv-doc--w-full .cxv-doc-body { max-width:none; }
.cxv-doc-body :where(h1,h2,h3,h4) { color:var(--cxv-doc-ink); }
.cxv-doc-body :where(h2,h3,h4) { scroll-margin-top:5rem; margin-top:1.6em; }
.cxv-doc-body a { color:var(--cxv-doc-accent); text-decoration:underline; text-underline-offset:2px; }
.cxv-doc-body code { font-family:var(--ds-font-mono,ui-monospace,monospace); font-size:.9em; padding:.1em .35em;
  border-radius:var(--ds-radius-sm,6px); background:var(--cxv-doc-code); }
.cxv-doc-body pre { overflow:auto; padding:1rem 1.1rem; border-radius:var(--ds-radius-md,12px);
  background:var(--cxv-doc-code); border:1px solid var(--cxv-doc-rule); }
.cxv-doc-body pre code { padding:0; background:none; }
.cxv-doc-body table { width:100%; border-collapse:collapse; margin:1.2em 0; }
.cxv-doc-body :where(th,td) { padding:.5rem .7rem; text-align:left; border:1px solid var(--cxv-doc-rule); }
.cxv-doc-body th { background:var(--cxv-doc-code); font-weight:700; }
.cxv-doc-body blockquote { margin:1.2em 0; padding:.4rem 0 .4rem 1rem; color:var(--cxv-doc-muted);
  border-left:3px solid var(--cxv-doc-accent); }
.cxv-doc-anchor { margin-left:.4rem; opacity:0; text-decoration:none; color:var(--cxv-doc-muted); }
.cxv-doc-body :where(h1,h2,h3,h4):hover .cxv-doc-anchor { opacity:1; }

/* ── docs page-kind SHELL (composer/_docs_shell.html) — left nav tree · reading column · right TOC.
   Token-only, dark-correct, sticky rails, collapses to one column ≤960px. ── */
.cx-docs { display:grid; grid-template-columns:15rem minmax(0,1fr) 14rem; gap:clamp(1.5rem,4vw,3rem);
  max-width:88rem; margin-inline:auto; padding:clamp(1.5rem,4vw,3rem) var(--ds-space,1rem); align-items:start; }
/* Width modes: wide gives the reading column more room; full drops both rails (template) for a
   focused, edge-to-edge read. narrow keeps a tight measure. */
/* Width modes control the READING COLUMN, never navigation — nav tree + TOC stay in every mode.
   wide = wider whole layout; full = fill the viewport (no centred cap) for big/4K screens. */
.cx-docs--w-wide { max-width:120rem; grid-template-columns:16rem minmax(0,1fr) 16rem; }
.cx-docs--w-full { max-width:none; grid-template-columns:16rem minmax(0,1fr) 16rem;
  padding-inline:clamp(1.5rem, 5vw, 5rem); }
/* Reading theme paints the whole shell surface so paper/kindle feels immersive. */
.cx-docs--t-paper { background:var(--ds-doc-paper-bg, #faf6ec); }
.cx-docs--t-sepia { background:var(--ds-doc-sepia-bg, #f4ecd8); }
.cx-docs--t-slate { background:var(--ds-doc-slate-bg, #eceff3); }
.cx-docs--t-ink   { background:var(--ds-doc-ink-bg, #1b1e26); }
/* When the shell is themed, the doc block inside must NOT re-paint its own sheet (double surface). */
.cx-docs[class*="cx-docs--t-"]:not(.cx-docs--t-default) .cx-docs-main .cx-doc-wrap { background:none; box-shadow:none; padding-inline:0; }
.cx-docs-rail { position:sticky; top:5rem; align-self:start; max-height:calc(100svh - 6rem); overflow:auto; }
.cx-docs-tree { display:flex; flex-direction:column; gap:.15rem; }
.cx-docs-navlink { display:block; padding:.4rem .7rem; border-radius:var(--ds-radius-sm,8px);
  font-size:.9rem; color:var(--ds-text-muted,#475569); text-decoration:none; border-left:2px solid transparent; }
.cx-docs-navlink:hover { background:var(--ds-surface-2,#f1f5f9); color:var(--ds-text-strong,#0f172a); }
.cx-docs-navlink--child { padding-left:1.4rem; font-size:.85rem; }
.cx-docs-navlink.is-active { color:var(--ds-primary,#4f46e5); font-weight:600;
  border-left-color:var(--ds-primary,#4f46e5); background:color-mix(in srgb,var(--ds-primary,#4f46e5) 7%,transparent); }
.cx-docs-main { min-width:0; }
/* the doc block inside the shell drops its own section padding (the shell owns page layout); the
   doc's own reading measure still controls line length (centred), so width modes read well. */
.cx-docs-main .cxv-doc { padding:0; }
.cx-docs-main .cxv-doc .cx-doc-wrap { max-width:none; margin:0; padding-inline:0; }
.cx-docs-main .cxv-doc-body { margin-inline:auto; }
.cx-docs-pager { display:flex; justify-content:space-between; gap:1rem; margin-top:3rem;
  padding-top:1.5rem; border-top:1px solid var(--ds-border,rgba(148,163,184,.25)); }
.cx-docs-pager-link { display:flex; flex-direction:column; gap:.2rem; padding:.7rem 1rem; text-decoration:none;
  border:1px solid var(--ds-border,rgba(148,163,184,.3)); border-radius:var(--ds-radius-md,12px); max-width:48%; }
.cx-docs-pager-link:hover { border-color:var(--ds-primary,#4f46e5); }
.cx-docs-pager-link--next { text-align:right; margin-left:auto; }
.cx-docs-pager-dir { font-size:.72rem; color:var(--ds-text-muted,#64748b); }
.cx-docs-pager-title { font-weight:600; color:var(--ds-text-strong,#0f172a); }
.cx-docs-toc { display:flex; flex-direction:column; gap:.1rem; }
.cx-docs-toc-head { margin:0 0 .5rem; font-size:.72rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ds-text-muted,#64748b); }
.cx-docs-toc-link { display:block; padding:.2rem 0; font-size:.82rem; line-height:1.4; text-decoration:none;
  color:var(--ds-text-muted,#475569); border-left:2px solid var(--ds-border,rgba(148,163,184,.3)); padding-left:.7rem; }
.cx-docs-toc-link:hover { color:var(--ds-primary,#4f46e5); border-left-color:var(--ds-primary,#4f46e5); }
.cx-docs-toc-link--l3 { padding-left:1.3rem; } .cx-docs-toc-link--l4 { padding-left:1.9rem; }
@media (max-width:960px) {
  .cx-docs { grid-template-columns:1fr; }
  .cx-docs-rail { position:static; max-height:none; overflow:visible;
    border:1px solid var(--ds-border,rgba(148,163,184,.25)); border-radius:var(--ds-radius-md,12px);
    padding:.9rem 1rem; }
  .cx-docs-rail--toc { order:-1; }   /* TOC above the article on mobile */
  .cx-docs-pager-link { max-width:none; }
}