/* Craft Blocks 2.x kit blocks — shared layout tokens */

/* Scope `box-sizing: border-box` to kit sections + their descendants so
   padding + borders behave predictably even when the host theme doesn't
   set a global border-box reset. Using the `:where()` wrapper keeps the
   selector specificity at 0 so theme styles remain winning. */
:where(.cb-kit-section, .cb-kit-section *, .cb-kit-section *::before, .cb-kit-section *::after) {
  box-sizing: border-box;
}

/* In-page anchor navigation: when TOC / kit links jump to `#anchor`, pull
   the target element down by `--cb-anchor-offset` so it doesn't land
   under a sticky site header. Sites override the token to match their
   header height. */
:where(.cb-kit-section [id], .cb-toc__article :is(h1,h2,h3,h4,h5,h6)[id]) {
  scroll-margin-top: var(--cb-anchor-offset, 4.5rem);
}

.cb-kit-section {
  position: relative;
  padding: var(--cb-kit-pad-y, 4rem) var(--cb-kit-pad-x, 1.25rem);
  background: var(--cb-kit-bg, transparent);
  color: var(--cb-kit-fg, #111);
}

.cb-kit-wrap {
  max-width: var(--cb-kit-max, 72rem);
  margin: 0 auto;
}

.cb-kit-muted {
  color: var(--cb-kit-muted, #6b7280);
  font-size: 0.95rem;
}

/* Stats count-up */
.cb-statrow__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 1.5rem;
}
.cb-statrow__num {
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 700;
  line-height: 1.1;
}
.cb-statrow__label {
  margin-top: 0.35rem;
  font-size: 0.9rem;
}

/* Stats bars */
.cb-statbars__item + .cb-statbars__item { margin-top: 1rem; }
.cb-statbars__track {
  height: 0.5rem;
  border-radius: 999px;
  background: #e5e7eb;
  overflow: hidden;
}
.cb-statbars__fill {
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: var(--cb-kit-accent, #c1272d);
  /* GPU-accelerated: transform is composited, so browsers can animate the
     bar on the compositor thread instead of re-laying-out the parent.
     `will-change` is intentionally omitted — the transition runs once per
     page load, and pinning a composited layer for the lifetime of the
     document would consume memory for no ongoing benefit. */
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.cb-statbars__row { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.9rem; }

/* Progress ring */
.cb-pr__ring-wrap { display: flex; flex-wrap: wrap; gap: 2rem; justify-content: center; align-items: center; }
.cb-pr__svg { width: 140px; height: 140px; transform: rotate(-90deg); }
.cb-pr__label { text-align: center; margin-top: 0.5rem; font-size: 0.85rem; }

/* Logo marquee */
.cb-lmarq { overflow: hidden; }
.cb-lmarq__track {
  display: flex; gap: 3rem; width: max-content;
  animation: cb-lmarq-scroll 22s linear infinite;
}
.cb-lmarq:hover .cb-lmarq__track { animation-play-state: paused; }
@keyframes cb-lmarq-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.cb-lmarq img { height: 2.25rem; width: auto; object-fit: contain; opacity: 0.85; filter: grayscale(1); }
.cb-lmarq img:hover { opacity: 1; filter: none; }

/* Logo grid */
.cb-lgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: 1.5rem; align-items: center; }
.cb-lgrid img { max-height: 2.5rem; width: auto; margin: 0 auto; display: block; filter: grayscale(1); opacity: 0.75; transition: 0.25s; }
.cb-lgrid img:hover { filter: none; opacity: 1; }

/* Pricing tiers */
.cb-ptier__toggle { display: inline-flex; gap: 0.5rem; align-items: center; margin-bottom: 2rem; }
.cb-ptier__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.25rem; }
.cb-ptier__card {
  border: 1px solid #e5e7eb; border-radius: 1rem; padding: 1.5rem;
  position: relative; background: #fff;
}
.cb-ptier__card--featured { border-color: var(--cb-kit-accent, #c1272d); box-shadow: 0 12px 40px rgba(0,0,0,0.08); }
.cb-ptier__ribbon {
  position: absolute; top: 0.75rem; right: 0.75rem;
  font-size: 0.65rem; font-weight: 700; text-transform: uppercase;
  background: var(--cb-kit-accent, #c1272d); color: #fff; padding: 0.2rem 0.5rem; border-radius: 0.25rem;
}
.cb-ptier__price { font-size: 2rem; font-weight: 700; margin: 0.5rem 0; }
.cb-ptier__feat { list-style: none; padding: 0; margin: 1rem 0 0; font-size: 0.9rem; }
.cb-ptier__feat li { padding: 0.35rem 0; border-top: 1px solid #f3f4f6; }

/* Pricing matrix */
.cb-pmat { overflow-x: auto; }
.cb-pmat table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.cb-pmat th, .cb-pmat td { padding: 0.65rem 0.75rem; border-bottom: 1px solid #e5e7eb; text-align: left; }
.cb-pmat th { background: #f9fafb; }

/* Pricing slider */
.cb-pslide__out { font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; margin: 1rem 0; }
.cb-pslide input[type="range"] { width: 100%; max-width: 28rem; }

/* Bento */
.cb-bento { display: grid; gap: 1rem; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(5rem, auto); }
@media (max-width: 900px) { .cb-bento { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .cb-bento { grid-template-columns: 1fr; } }
.cb-bento__cell {
  border-radius: 1rem; padding: 1.25rem; background: #f3f4f6;
  min-height: 5rem;
}
.cb-bento__cell--span2 { grid-column: span 2; }
.cb-bento__cell--span2r { grid-row: span 2; }
.cb-bento__cell--accent { background: var(--cb-kit-accent, #111); color: #fff; }

/* Tabs */
.cb-ftab__head { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.cb-ftab__btn {
  border: 1px solid #e5e7eb; background: #fff; padding: 0.5rem 1rem; border-radius: 999px;
  cursor: pointer; font-size: 0.9rem;
}
.cb-ftab__btn.is-active { background: #111; color: #fff; border-color: #111; }
.cb-ftab__panel { display: none; }
.cb-ftab__panel.is-active { display: block; }

/* Icon grid */
.cb-fig { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 1.25rem; }
.cb-fig__card { border: 1px solid #e5e7eb; border-radius: 0.75rem; padding: 1rem; }
.cb-fig__icon { width: 2rem; height: 2rem; margin-bottom: 0.5rem; color: var(--cb-kit-accent, #c1272d); }

/* Before / after */
.cb-bafter { position: relative; border-radius: 0.75rem; overflow: hidden; user-select: none; touch-action: none; aspect-ratio: 16/9; background: #f3f4f6; }
.cb-bafter__img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cb-bafter__img > img, .cb-bafter__img > .cb-sk-embed { display: block; width: 100%; height: 100%; object-fit: cover; }
.cb-bafter__img > .cb-sk-embed { object-fit: unset; }
.cb-bafter__top { position: absolute; inset: 0; width: 50%; overflow: hidden; }
.cb-bafter__top > img, .cb-bafter__top > .cb-sk-embed { width: 100%; height: 100%; object-fit: cover; max-width: none; display: block; }
.cb-bafter__top > .cb-sk-embed { object-fit: unset; width: 200%; }
.cb-bafter__handle {
  position: absolute; top: 0; bottom: 0; width: 4px; margin-left: -2px;
  background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.15); cursor: ew-resize; z-index: 2; left: 50%;
  /* WCAG 2.5.5: add invisible hit-padding so the 4px visible bar still
     exposes a comfortable ~32px touch/pointer target. */
  box-sizing: content-box;
  padding: 0 14px;
  margin-left: -16px;
  background-clip: content-box;
}
.cb-bafter__handle:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.25);
}

/* Feature comparison */
.cb-fcmp { overflow-x: auto; }
.cb-fcmp table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.cb-fcmp th, .cb-fcmp td { padding: 0.6rem; border: 1px solid #e5e7eb; }

/* Timelines */
.cb-tvm { border-left: 2px solid #e5e7eb; padding-left: 1.25rem; }
.cb-tvm__item { position: relative; padding-bottom: 1.5rem; }
.cb-tvm__item::before {
  content: ""; position: absolute; left: -1.4rem; top: 0.2rem; width: 0.65rem; height: 0.65rem;
  border-radius: 50%; background: var(--cb-kit-accent, #c1272d);
}
.cb-ths { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.5rem; }
.cb-ths__card { flex: 0 0 16rem; scroll-snap-align: start; border: 1px solid #e5e7eb; border-radius: 0.75rem; padding: 1rem; }

/* Changelog */
.cb-chlog__row { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid #eee; font-size: 0.92rem; }
@media (max-width: 520px) { .cb-chlog__row { grid-template-columns: 1fr; } }

/* Masonry-ish */
.cb-gmas { columns: 3 14rem; column-gap: 1rem; }
.cb-gmas__item { break-inside: avoid; margin-bottom: 1rem; border-radius: 0.5rem; overflow: hidden; }
.cb-gmas__item img { width: 100%; display: block; }

/* Lightbox grid */
.cb-glbx { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 0.5rem; }
.cb-glbx button { border: 0; padding: 0; cursor: zoom-in; border-radius: 0.35rem; overflow: hidden; }
.cb-glbx img { width: 100%; display: block; aspect-ratio: 1; object-fit: cover; }
.cb-glbx dialog { border: none; padding: 0; max-width: 90vw; background: transparent; }
.cb-glbx dialog::backdrop { background: rgba(0,0,0,0.75); }
.cb-glbx dialog img { max-width: 90vw; max-height: 85vh; display: block; border-radius: 0.35rem; }
.cb-glbx__dialog-form { margin: 0; padding: 0; border: 0; position: relative; }
.cb-glbx__close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  /* 2.75rem = 44px at default root, meeting WCAG 2.5.5 recommended target. */
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cb-glbx__close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Utility */
.cb-uprog { position: fixed; top: 0; left: 0; height: 3px; width: 0%; z-index: 9999; background: var(--cb-kit-accent, #c1272d); }
.cb-uann { position: relative; z-index: 50; text-align: center; font-size: 0.88rem; padding: 0.5rem 3.25rem; }
.cb-uann__close {
  position: absolute;
  right: 0.35rem;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  /* 2.25rem × 2.25rem = 36px, comfortably above the 24px WCAG 2.5.8 minimum. */
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cb-uann__close:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.cb-uann__close:hover {
  background: color-mix(in srgb, currentColor 10%, transparent);
}
.cb-ucta {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 900;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.75rem 1.25rem; background: rgba(17,17,17,0.92); color: #fff;
  transform: translateY(100%); transition: transform 0.35s ease;
}
.cb-ucta.is-visible { transform: translateY(0); }
.cb-ubtt {
  position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 901;
  width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 0; cursor: pointer;
  background: #111; color: #fff; opacity: 0; pointer-events: none; transition: opacity 0.25s;
}
.cb-ubtt.is-visible { opacity: 1; pointer-events: auto; }

/* Ribbon */
.cb-ribbon { text-align: center; padding: 0.65rem 1rem; font-weight: 600; font-size: 0.95rem; }

/* Magnetic CTA */
.cb-mag { display: inline-block; }

/* Hero split */
.cb-hsplit { display: grid; grid-template-columns: 1fr 1fr; gap: 0; min-height: 22rem; }
@media (max-width: 768px) { .cb-hsplit { grid-template-columns: 1fr; } }
.cb-hsplit__media {
  background: #111; min-height: 16rem; position: relative; overflow: hidden;
}
.cb-hsplit__media video,
.cb-hsplit__media img,
.cb-hsplit__media iframe,
.cb-hsplit__media .cb-sk-embed {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block; border: 0;
}
.cb-hsplit__text { padding: clamp(1.5rem, 4vw, 3rem); display: flex; flex-direction: column; justify-content: center; }

/* Marquee headlines */
.cb-hmarq { overflow: hidden; }
.cb-hmarq__line { font-size: clamp(1.75rem, 4vw, 3rem); font-weight: 800; white-space: nowrap; animation: cb-hmarq 18s linear infinite; }
@keyframes cb-hmarq { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* Marquee skeletons (scrolling UI screens + centered label) */
.cb-hmsk { overflow: hidden; padding-block: clamp(2rem, 4vw, 3.5rem); }
.cb-hmsk__inner { max-width: var(--cb-kit-max, 72rem); margin: 0 auto; }
.cb-hmsk__heading {
  text-align: center;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  color: var(--cb-kit-muted, #6b7280);
  margin: 0 0 1.5rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.cb-hmsk__viewport {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.cb-hmsk__track {
  display: flex;
  gap: 1.25rem;
  width: max-content;
  padding: 0.5rem 0;
  animation: cb-hmsk-scroll 60s linear infinite;
}
.cb-hmsk--speed-slow   .cb-hmsk__track { animation-duration: 90s; }
.cb-hmsk--speed-medium .cb-hmsk__track { animation-duration: 60s; }
.cb-hmsk--speed-fast   .cb-hmsk__track { animation-duration: 40s; }
.cb-hmsk:hover .cb-hmsk__track,
.cb-hmsk:focus-within .cb-hmsk__track { animation-play-state: paused; }
@keyframes cb-hmsk-scroll {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}
.cb-hmsk__card {
  flex: 0 0 auto;
  width: clamp(15rem, 20vw, 20rem);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.85rem 0.85rem 1rem;
  border-radius: 0.85rem;
  background: var(--cb-hmsk-card-bg, rgba(15, 23, 42, 0.04));
  border: 1px solid var(--cb-hmsk-card-border, rgba(15, 23, 42, 0.08));
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.cb-hmsk__graphic {
  aspect-ratio: 8 / 5;
  display: flex;
  border-radius: 0.55rem;
  overflow: hidden;
  background: var(--sk-bg, #ffffff);
  border: 1px solid var(--sk-border, rgba(15, 23, 42, 0.08));
}
.cb-hmsk__graphic > svg { width: 100%; height: 100%; display: block; }
.cb-hmsk__label {
  text-align: center;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--cb-kit-fg, #111);
}

/* Marquee integrations (text-only pills, multi-row ping-pong) */
.cb-hintg {
  overflow: hidden;
  padding-block: clamp(2rem, 4vw, 3.5rem);
  --cb-hintg-pill-bg: #ffffff;
  --cb-hintg-pill-border: rgba(15, 23, 42, 0.12);
  --cb-hintg-pill-fg: #0f172a;
  --cb-hintg-pill-muted: #64748b;
  --cb-hintg-pill-dot: #6366f1;
  --cb-hintg-bg: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
  --cb-hintg-heading: #0f172a;
  --cb-hintg-eyebrow: #6366f1;
  background: var(--cb-hintg-bg);
  color: var(--cb-hintg-heading);
}
.cb-hintg--outline {
  --cb-hintg-pill-bg: transparent;
  --cb-hintg-pill-border: rgba(15, 23, 42, 0.18);
  --cb-hintg-bg: transparent;
}
.cb-hintg--dark {
  --cb-hintg-pill-bg: rgba(255, 255, 255, 0.06);
  --cb-hintg-pill-border: rgba(255, 255, 255, 0.14);
  --cb-hintg-pill-fg: #f8fafc;
  --cb-hintg-pill-muted: #94a3b8;
  --cb-hintg-pill-dot: #a5b4fc;
  --cb-hintg-bg: linear-gradient(180deg, #0f172a 0%, #020617 100%);
  --cb-hintg-heading: #f8fafc;
  --cb-hintg-eyebrow: #a5b4fc;
}
.cb-hintg__inner {
  max-width: var(--cb-kit-max, 72rem);
  margin: 0 auto;
}
.cb-hintg__head {
  text-align: center;
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}
.cb-hintg__eyebrow {
  margin: 0 0 0.35rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--cb-hintg-eyebrow);
}
.cb-hintg__heading {
  margin: 0;
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--cb-hintg-heading);
}
.cb-hintg__viewport {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.cb-hintg__row {
  display: flex;
  gap: 0.75rem;
  width: max-content;
  animation: cb-hintg-scroll 55s linear infinite;
  will-change: transform;
}
.cb-hintg__row--reverse { animation-direction: reverse; }
.cb-hintg--speed-slow   .cb-hintg__row { animation-duration: 80s; }
.cb-hintg--speed-medium .cb-hintg__row { animation-duration: 55s; }
.cb-hintg--speed-fast   .cb-hintg__row { animation-duration: 35s; }
.cb-hintg:hover .cb-hintg__row,
.cb-hintg:focus-within .cb-hintg__row { animation-play-state: paused; }
@keyframes cb-hintg-scroll {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}
.cb-hintg__pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  background: var(--cb-hintg-pill-bg);
  border: 1px solid var(--cb-hintg-pill-border);
  color: var(--cb-hintg-pill-fg);
  font-size: 0.95rem;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.cb-hintg__pill:hover {
  transform: translateY(-1px);
  border-color: var(--cb-hintg-pill-dot);
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08);
}
.cb-hintg__pill-dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--cb-hintg-pill-dot);
  flex: 0 0 auto;
}
.cb-hintg__pill-name {
  font-weight: 600;
  letter-spacing: -0.005em;
}
.cb-hintg__pill-sep {
  color: var(--cb-hintg-pill-muted);
  opacity: 0.7;
}
.cb-hintg__pill-cat {
  color: var(--cb-hintg-pill-muted);
  font-weight: 500;
  font-size: 0.85rem;
}

/* Gradient mesh hero */
.cb-hmesh { min-height: 20rem; display: flex; align-items: center; justify-content: center; text-align: center; position: relative; overflow: hidden; }
.cb-hmesh__bg {
  position: absolute; inset: -20%;
  background: radial-gradient(at 40% 40%, #6366f1 0, transparent 45%),
    radial-gradient(at 70% 60%, #ec4899 0, transparent 40%),
    radial-gradient(at 30% 80%, #22d3ee 0, transparent 40%);
  filter: blur(40px); opacity: 0.85; animation: cb-mesh-drift 14s ease-in-out infinite alternate;
}
@keyframes cb-mesh-drift { 0% { transform: scale(1) translate(0,0); } 100% { transform: scale(1.08) translate(3%, -2%); } }
.cb-hmesh__inner { position: relative; z-index: 1; max-width: 40rem; padding: 2rem; }

/* Quote */
.cb-quote { font-size: clamp(1.25rem, 2.5vw, 1.75rem); font-weight: 600; line-height: 1.35; padding: 1.5rem 0; }
.cb-quote cite { display: block; margin-top: 1rem; font-size: 0.95rem; font-weight: 400; font-style: normal; color: #6b7280; }

/* Sticky TOC */
.cb-toc { display: grid; grid-template-columns: 12rem 1fr; gap: 2rem; align-items: start; }
@media (max-width: 768px) { .cb-toc { grid-template-columns: 1fr; } }
.cb-toc__nav { position: sticky; top: 1rem; font-size: 0.88rem; }
.cb-toc__nav a {
  display: block;
  /* Taller click target on mobile; ~36px with 0.88rem font. */
  padding: 0.55rem 0.5rem;
  color: inherit;
  text-decoration: none;
  border-left: 2px solid transparent;
  border-radius: 0 0.25rem 0.25rem 0;
}
.cb-toc__nav a:focus-visible {
  outline: 2px solid var(--cb-kit-accent, #c1272d);
  outline-offset: 2px;
}
.cb-toc__nav a.is-active { border-left-color: var(--cb-kit-accent, #c1272d); font-weight: 600; }

/* Multi column */
.cb-mcol { columns: 2 18rem; column-gap: 2rem; font-size: 0.95rem; line-height: 1.6; }

/* Immersive */
.cb-fgrain { position: relative; }
.cb-spot { position: relative; overflow: hidden; }
.cb-trail { position: fixed; inset: 0; pointer-events: none; z-index: 5; }

/* Newsletter */
.cb-nl { display: flex; flex-wrap: wrap; gap: 0.5rem; max-width: 32rem; }
.cb-nl input[type="email"] { flex: 1 1 12rem; padding: 0.6rem 0.75rem; border: 1px solid #d1d5db; border-radius: 0.35rem; }
.cb-nl button { padding: 0.6rem 1.25rem; border: 0; border-radius: 0.35rem; background: #111; color: #fff; cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  .cb-lmarq__track, .cb-hmarq__line, .cb-hmsk__track, .cb-hintg__row, .cb-hmesh__bg { animation: none !important; }
}

/* ---------------------------------------------------------
 * 2.x re-evaluation: bespoke block styles
 * --------------------------------------------------------- */

/* Hero — Mouse parallax */
.cb-hparallax {
  position: relative;
  min-height: 32rem;
  padding: clamp(3rem, 6vw, 6rem) 1.25rem;
  display: flex;
  align-items: center;
  background: var(--cb-bg);
  color: var(--cb-fg);
  overflow: hidden;
}
.cb-hparallax__stage {
  position: absolute;
  inset: -8%;
  pointer-events: none;
}
.cb-hparallax__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.75;
  transition: transform 0.25s ease-out;
  will-change: transform;
}
.cb-hparallax__content {
  position: relative;
  max-width: 42rem;
  margin: 0 auto;
  z-index: 2;
  text-align: center;
}
.cb-hparallax__kicker {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  opacity: 0.8;
  margin-bottom: 0.5rem;
}
.cb-hparallax__heading {
  font-size: clamp(2rem, 5vw, 3.25rem);
  margin: 0 0 0.75rem;
  line-height: 1.1;
}
.cb-hparallax__sub { margin: 0 0 1rem; opacity: 0.85; line-height: 1.5; }
.cb-hparallax__cta {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: var(--cb-fg);
  color: var(--cb-bg);
  text-decoration: none;
  border-radius: 0.5rem;
  font-weight: 600;
}

/* Hero — Variable font */
.cb-hvf {
  background: var(--cb-bg);
  color: var(--cb-fg);
  padding: clamp(3rem, 6vw, 6rem) 1.25rem;
  text-align: center;
}
.cb-hvf__wrap { max-width: 58rem; margin: 0 auto; }
.cb-hvf__heading {
  font-size: clamp(2.5rem, 8vw, 6rem);
  line-height: 0.95;
  margin: 0;
  letter-spacing: -0.02em;
  transition: font-variation-settings 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.cb-hvf__sub { margin: 1rem auto 1.25rem; max-width: 36rem; opacity: 0.75; line-height: 1.5; }
.cb-hvf__cta {
  display: inline-block; padding: 0.7rem 1.4rem; border-radius: 0.5rem;
  background: var(--cb-fg); color: var(--cb-bg); text-decoration: none; font-weight: 600;
}

/* Hero — Typing terminal */
.cb-hterm {
  background: var(--cb-bg, #0b0f19);
  color: #e2e8f0;
  padding: clamp(3rem, 6vw, 5rem) 1.25rem;
}
.cb-hterm__wrap {
  max-width: 72rem; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center;
}
@media (max-width: 820px) { .cb-hterm__wrap { grid-template-columns: 1fr; } }
.cb-hterm__copy h1 { font-size: clamp(1.75rem, 4vw, 2.75rem); margin: 0 0 0.75rem; }
.cb-hterm__copy p { opacity: 0.8; line-height: 1.5; margin: 0 0 1rem; }
.cb-hterm__cta {
  display: inline-block; padding: 0.65rem 1.2rem; border-radius: 0.4rem;
  background: var(--cb-term-fg); color: #0b0f19; text-decoration: none; font-weight: 600;
}
.cb-hterm__term {
  background: var(--cb-term-bg);
  border-radius: 0.75rem; border: 1px solid rgba(255, 255, 255, 0.08);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.88rem;
  overflow: hidden;
}
.cb-hterm__chrome {
  padding: 0.6rem 0.85rem;
  display: flex; gap: 0.4rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.cb-hterm__chrome span { width: 0.75rem; height: 0.75rem; border-radius: 50%; background: #475569; }
.cb-hterm__chrome span:nth-child(1) { background: #ef4444; }
.cb-hterm__chrome span:nth-child(2) { background: #f59e0b; }
.cb-hterm__chrome span:nth-child(3) { background: #22c55e; }
.cb-hterm__body { padding: 1rem; min-height: 9rem; color: var(--cb-term-fg); }
.cb-hterm__line {
  white-space: pre-wrap;
  opacity: 0.6;
  padding: 0.1rem 0;
}
.cb-hterm__line.is-typing { opacity: 1; }
.cb-hterm__line.is-done { opacity: 1; }
.cb-hterm__line.is-typing::after {
  content: "▊";
  display: inline-block;
  margin-left: 2px;
  animation: cb-term-blink 0.8s steps(2, end) infinite;
}
@keyframes cb-term-blink { 50% { opacity: 0; } }

/* Hero — Glitch */
.cb-hglitch {
  position: relative;
  background: var(--cb-bg);
  color: var(--cb-fg);
  padding: clamp(3rem, 6vw, 6rem) 1.25rem;
  overflow: hidden;
  text-align: center;
}
.cb-hglitch__scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(transparent 0 3px, rgba(255, 255, 255, 0.04) 3px 4px);
  mix-blend-mode: overlay;
}
.cb-hglitch__wrap { max-width: 48rem; margin: 0 auto; position: relative; z-index: 1; }
.cb-hglitch__kicker {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  opacity: 0.7;
  margin-bottom: 0.75rem;
}
.cb-hglitch__heading {
  font-size: clamp(2.5rem, 7vw, 5rem);
  line-height: 1;
  margin: 0;
  letter-spacing: -0.01em;
  font-weight: 900;
}
.cb-hglitch__sub { opacity: 0.8; margin: 1rem auto 1.25rem; max-width: 36rem; }
.cb-hglitch__cta {
  display: inline-block; padding: 0.7rem 1.4rem; border-radius: 0;
  background: var(--cb-fg); color: var(--cb-bg); text-decoration: none; font-weight: 700;
  border: 2px solid var(--cb-fg); letter-spacing: 0.02em;
}

/* Hero — Spotlight cursor */
.cb-hspot {
  position: relative;
  /* Fallback for browsers without color-mix (pre-2023) — keeps the solid bg. */
  background: var(--cb-bg);
  background: radial-gradient(1200px circle at var(--sx, 50%) var(--sy, 50%), rgba(255,255,255,0.15), var(--cb-bg) 55%), var(--cb-bg);
  background: radial-gradient(1200px circle at var(--sx, 50%) var(--sy, 50%), color-mix(in srgb, var(--cb-spot) 22%, transparent), var(--cb-bg) 55%), var(--cb-bg);
  color: var(--cb-fg);
  padding: clamp(4rem, 8vw, 8rem) 1.25rem;
  overflow: hidden;
}
.cb-hspot__wrap { max-width: 44rem; margin: 0 auto; text-align: center; position: relative; z-index: 1; }
.cb-hspot__kicker { text-transform: uppercase; font-size: 0.78rem; letter-spacing: 0.12em; opacity: 0.7; margin-bottom: 0.75rem; }
.cb-hspot__heading { font-size: clamp(2rem, 5vw, 3.5rem); margin: 0 0 0.75rem; }
.cb-hspot__sub { opacity: 0.8; margin: 0 auto 1.25rem; max-width: 30rem; }
.cb-hspot__cta { display: inline-block; padding: 0.7rem 1.3rem; border-radius: 999px; background: var(--cb-spot); color: #fff; text-decoration: none; font-weight: 600; }

/* Hero — 3D card stack */
.cb-h3d {
  background: var(--cb-bg); color: var(--cb-fg);
  padding: clamp(3rem, 6vw, 5rem) 1.25rem;
  overflow: hidden;
}
.cb-h3d__wrap {
  max-width: 72rem; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center;
}
@media (max-width: 820px) { .cb-h3d__wrap { grid-template-columns: 1fr; } }
.cb-h3d__copy h1 { font-size: clamp(1.75rem, 4vw, 2.75rem); margin: 0 0 0.75rem; }
.cb-h3d__kicker { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.78rem; opacity: 0.7; margin-bottom: 0.5rem; }
.cb-h3d__sub { opacity: 0.8; line-height: 1.5; margin: 0 0 1.25rem; }
.cb-h3d__cta {
  display: inline-block; padding: 0.65rem 1.2rem; background: var(--cb-accent); color: #fff;
  text-decoration: none; border-radius: 0.4rem; font-weight: 600;
}
.cb-h3d__stage {
  position: relative; height: 22rem;
  perspective: 1400px; transform-style: preserve-3d;
}
.cb-h3d__card {
  position: absolute; inset: 0;
  margin: auto; width: 20rem; max-width: 100%;
  background: #ffffff; color: #0f172a;
  padding: 1.25rem;
  border-radius: 0.9rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  border-top: 3px solid var(--cb-accent);
  transform: rotateX(8deg) rotateZ(calc((var(--cb-i) - (var(--cb-n) - 1) / 2) * -5deg)) translateY(calc(var(--cb-i) * 1.1rem));
  z-index: calc(10 - var(--cb-i));
}
.cb-h3d__card p { margin: 0.35rem 0 0; font-size: 0.88rem; color: #475569; line-height: 1.4; }

/* Hero — WebGL shader fallback */
.cb-hshader {
  position: relative;
  color: var(--cb-fg);
  padding: clamp(4rem, 8vw, 8rem) 1.25rem;
  overflow: hidden;
  text-align: center;
}
.cb-hshader__mesh {
  position: absolute; inset: -20%;
  background:
    radial-gradient(at 25% 30%, var(--cb-c1) 0, transparent 42%),
    radial-gradient(at 75% 25%, var(--cb-c2) 0, transparent 42%),
    radial-gradient(at 55% 80%, var(--cb-c3) 0, transparent 45%);
  filter: blur(60px); opacity: 0.9;
  animation: cb-mesh-drift 18s ease-in-out infinite alternate;
}
.cb-hshader__grain {
  position: absolute; inset: 0; pointer-events: none;
  opacity: 0.18;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
.cb-hshader__wrap { position: relative; z-index: 1; max-width: 46rem; margin: 0 auto; }
.cb-hshader__kicker { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.8rem; opacity: 0.8; margin-bottom: 0.75rem; }
.cb-hshader__heading { font-size: clamp(2rem, 5vw, 3.5rem); margin: 0 0 0.75rem; }
.cb-hshader__sub { opacity: 0.85; margin: 0 auto 1.25rem; max-width: 32rem; }
.cb-hshader__cta { display: inline-block; padding: 0.7rem 1.3rem; border-radius: 999px; background: var(--cb-fg); color: #111; text-decoration: none; font-weight: 600; }

/* Hero — Lottie */
.cb-hlottie {
  background: var(--cb-bg); color: var(--cb-fg);
  padding: clamp(3rem, 6vw, 5rem) 1.25rem;
}
.cb-hlottie__wrap {
  max-width: 72rem; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center;
}
@media (max-width: 820px) { .cb-hlottie__wrap { grid-template-columns: 1fr; } }
.cb-hlottie__copy h1 { font-size: clamp(1.75rem, 4vw, 2.75rem); margin: 0 0 0.75rem; }
.cb-hlottie__kicker { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.78rem; opacity: 0.7; margin-bottom: 0.5rem; }
.cb-hlottie__cta {
  display: inline-block; padding: 0.65rem 1.2rem; background: var(--cb-fg); color: var(--cb-bg);
  text-decoration: none; border-radius: 0.4rem; font-weight: 600;
}
.cb-hlottie__stage {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--cb-fg) 5%, transparent);
  border-radius: 1rem;
}
.cb-hlottie__stage > div { width: 100%; height: 100%; }
.cb-hlottie__empty { padding: 2rem; text-align: center; }
/* Lottie fallback: hidden while the runtime is healthy, revealed once JS
   sets `[data-cb-lottie-fallback]` on the host when lottie-web can't load. */
.cb-hlottie__stage [data-lottie-host] > .cb-hlottie__fallback,
.cb-hlottie__stage [data-lottie-host] > noscript.cb-hlottie__fallback { display: none; }
.cb-hlottie__stage [data-lottie-host][data-cb-lottie-fallback="1"] > .cb-hlottie__fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 2rem;
  text-align: center;
}
.cb-hlottie__stage [data-lottie-host][data-cb-lottie-fallback="1"] > .cb-hlottie__fallback[hidden] {
  display: flex;
}

/* Hero — Rive */
.cb-hrive {
  background: var(--cb-bg); color: var(--cb-fg);
  padding: clamp(3rem, 6vw, 5rem) 1.25rem;
}
.cb-hrive__wrap {
  max-width: 72rem; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center;
}
@media (max-width: 820px) { .cb-hrive__wrap { grid-template-columns: 1fr; } }
.cb-hrive__copy h1 { font-size: clamp(1.75rem, 4vw, 2.75rem); margin: 0 0 0.75rem; }
.cb-hrive__cta {
  display: inline-block; padding: 0.65rem 1.2rem; background: var(--cb-fg); color: var(--cb-bg);
  text-decoration: none; border-radius: 0.4rem; font-weight: 600;
}
.cb-hrive__stage {
  position: relative;
  aspect-ratio: 4/3;
  background: color-mix(in srgb, var(--cb-fg) 6%, transparent);
  border-radius: 1rem;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.cb-hrive__canvas { display: block; max-width: 100%; height: auto; }
.cb-hrive__empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 1rem; text-align: center; opacity: 0.7; }
.cb-hrive__stage[data-rive-ready] .cb-hrive__empty { display: none; }

/* Page heading — gradient text */
.cb-phgrad__kicker { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.82rem; color: var(--cb-fg); margin-bottom: 0.65rem; }
.cb-phgrad__heading {
  font-size: clamp(2.25rem, 5vw, 4rem);
  line-height: 1.05;
  margin: 0 0 0.75rem;
  background: linear-gradient(90deg, var(--cb-c1), var(--cb-c2), var(--cb-c3), var(--cb-c1));
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: cb-phgrad-shift 8s linear infinite;
}
.cb-phgrad__sub { color: var(--cb-fg); max-width: 36rem; opacity: 0.85; line-height: 1.5; margin: 0; }
@keyframes cb-phgrad-shift { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }

/* Page heading — underline draw */
.cb-phund__kicker { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.82rem; opacity: 0.7; margin-bottom: 0.65rem; color: var(--cb-fg); }
.cb-phund__heading { font-size: clamp(2rem, 5vw, 3.5rem); margin: 0 0 0.75rem; line-height: 1.1; color: var(--cb-fg); }
.cb-phund__accent { position: relative; display: inline-block; }
.cb-phund__line {
  position: absolute; left: 0; right: 0; bottom: -0.15em; width: 100%; height: 0.5em;
  color: var(--cb-accent);
  stroke-dasharray: 120; stroke-dashoffset: 120;
  transition: stroke-dashoffset 1.2s ease-out;
}
.cb-motion--visible .cb-phund__line,
[data-cb-motion="none"] .cb-phund__line { stroke-dashoffset: 0; }
.cb-phund__sub { color: var(--cb-fg); max-width: 36rem; opacity: 0.75; }

/* Page heading — slot rotator */
.cb-phslot__heading {
  font-size: clamp(2rem, 5vw, 3.5rem);
  margin: 0 0 0.75rem;
  color: var(--cb-fg);
  line-height: 1.15;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35em;
}
.cb-phslot__prefix { font-weight: 500; opacity: 0.8; }
.cb-phslot__slot {
  position: relative;
  display: inline-block;
  height: 1.1em;
  min-width: 6em;
  overflow: hidden;
  vertical-align: bottom;
  color: var(--cb-accent);
  font-weight: 800;
}
.cb-phslot__word {
  position: absolute; left: 0; top: 0;
  opacity: 0; transform: translateY(100%);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s;
}
.cb-phslot__word.is-current { opacity: 1; transform: translateY(0); }
.cb-phslot__word.is-leaving { opacity: 0; transform: translateY(-100%); }
.cb-phslot__sub { color: var(--cb-fg); opacity: 0.75; margin: 0; }
.cb-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Page heading — tag cloud */
.cb-phtag__kicker { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.82rem; opacity: 0.7; margin-bottom: 0.65rem; }
.cb-phtag__heading { font-size: clamp(2rem, 5vw, 3.25rem); margin: 0 0 0.75rem; line-height: 1.1; }
.cb-phtag__cloud {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem;
  max-width: 42rem; margin: 0 auto;
}
.cb-phtag__tag {
  display: inline-block;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--cb-accent) 50%, transparent);
  color: var(--cb-accent);
  font-size: 0.9rem;
  background: color-mix(in srgb, var(--cb-accent) 8%, transparent);
  transition: transform 0.25s ease;
}
.cb-phtag__tag:hover { transform: translateY(-2px); }

/* Page heading — stamped */
.cb-phstamp__wrap { text-align: center; max-width: 42rem; margin: 0 auto; }
.cb-phstamp__badge {
  display: inline-block;
  padding: 0.45rem 0.95rem;
  border: 2px solid var(--cb-stamp);
  color: var(--cb-stamp);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
  font-weight: 800;
  border-radius: 0.25rem;
  transform: rotate(-4deg);
  margin-bottom: 1rem;
  background: color-mix(in srgb, var(--cb-stamp) 6%, transparent);
}
.cb-phstamp__heading { font-size: clamp(2rem, 5vw, 3.5rem); margin: 0 0 0.75rem; line-height: 1.1; color: var(--cb-fg); }
.cb-phstamp__sub { color: var(--cb-fg); opacity: 0.75; margin: 0; }

/* Page heading — split mask */
.cb-phsplit__kicker { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.82rem; opacity: 0.7; margin-bottom: 0.65rem; }
/* Line-height is tuned so `.cb-phsplit__line`'s `overflow: hidden` clip does not amputate descenders or rounded glyph bottoms. Override via `--cb-phsplit-lh`. */
.cb-phsplit__heading { font-size: clamp(2rem, 5vw, 3.5rem); margin: 0 0 0.75rem; line-height: var(--cb-phsplit-lh, 1.2); color: var(--cb-fg); }
.cb-phsplit__line { display: block; overflow: hidden; line-height: var(--cb-phsplit-lh, 1.2); }
.cb-phsplit__inner { display: inline-block; }
.cb-phsplit__sub { max-width: 36rem; margin: 0; }

/* Page heading — video behind */
.cb-phvideo {
  position: relative;
  min-height: 22rem;
  padding: clamp(3rem, 6vw, 5rem) 1.25rem;
  color: var(--cb-fg);
  overflow: hidden;
  display: flex; align-items: center;
}
.cb-phvideo__v {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0;
}
.cb-phvideo__v--yt {
  width: 177.78vh;
  min-width: 100%;
  height: 56.25vw;
  min-height: 100%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.cb-phvideo__v--sk { object-fit: unset; display: flex; }
.cb-phvideo__overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0, var(--cb-overlay, 0.45));
}
.cb-phvideo__wrap { position: relative; z-index: 1; max-width: 44rem; margin: 0 auto; text-align: center; }
.cb-phvideo__kicker { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.82rem; opacity: 0.85; margin-bottom: 0.65rem; }
.cb-phvideo__heading { font-size: clamp(2.25rem, 5vw, 4rem); margin: 0 0 0.75rem; }
.cb-phvideo__sub { margin: 0 auto; max-width: 30rem; opacity: 0.9; }

/* Page heading — 3D text */
.cb-ph3d__kicker { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.82rem; opacity: 0.7; margin-bottom: 0.65rem; }
.cb-ph3d__heading {
  font-size: clamp(2.5rem, 7vw, 5rem);
  line-height: 1;
  margin: 0 0 1rem;
  font-weight: 900;
  color: var(--cb-fg);
}
.cb-ph3d__sub { max-width: 36rem; margin: 0; }

/* Callout — sticky badge */
.cb-cbadge__card {
  position: relative;
  padding: 1.75rem 1.5rem 1.5rem;
  border-radius: 0.75rem;
  border: 1px solid #e5e7eb;
  max-width: 42rem;
  margin: 0 auto;
}
.cb-cbadge__badge {
  position: absolute; top: -0.75rem; left: 1.25rem;
  padding: 0.3rem 0.7rem; color: #fff;
  border-radius: 0.35rem; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700;
}
.cb-cbadge__heading { margin: 0 0 0.35rem; font-size: 1.4rem; }
.cb-cbadge__body { margin: 0 0 0.85rem; opacity: 0.8; line-height: 1.5; }
.cb-cbadge__cta { text-decoration: none; font-weight: 600; color: inherit; border-bottom: 2px solid currentColor; }

/* Callout — animated underline */
.cb-cundr__kicker { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.82rem; opacity: 0.7; color: var(--cb-fg); margin-bottom: 0.75rem; }
.cb-cundr__heading { color: var(--cb-fg); font-size: clamp(1.75rem, 4vw, 2.5rem); margin: 0 0 0.75rem; line-height: 1.15; }
.cb-cundr__inner { background-image: linear-gradient(var(--cb-accent), var(--cb-accent)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 0.18em; padding-bottom: 0.1em; transition: background-size 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.cb-motion--visible .cb-cundr__inner,
[data-cb-motion="none"] .cb-cundr__inner { background-size: 100% 0.18em; }
.cb-cundr__body { color: var(--cb-fg); opacity: 0.78; max-width: 30rem; margin: 0 auto 1rem; }
.cb-cundr__cta { display: inline-block; padding: 0.7rem 1.4rem; border-radius: 999px; background: var(--cb-accent); color: #fff; text-decoration: none; font-weight: 600; }

/* Callout — newsletter */
.cb-cnl__wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; }
@media (max-width: 820px) { .cb-cnl__wrap { grid-template-columns: 1fr; } }
.cb-cnl__form { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cb-cnl__form input[type="email"] { flex: 1 1 12rem; padding: 0.7rem 0.85rem; border-radius: 0.4rem; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.06); color: inherit; }
.cb-cnl__form button { padding: 0.7rem 1.2rem; background: var(--cb-accent); color: #fff; border: 0; border-radius: 0.4rem; cursor: pointer; font-weight: 600; }

/* Callout — video background */
.cb-cvid {
  position: relative;
  min-height: 24rem;
  padding: clamp(3rem, 6vw, 5rem) 1.25rem;
  color: var(--cb-fg);
  overflow: hidden;
  display: flex; align-items: center;
}
.cb-cvid__v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.cb-cvid__v--yt {
  width: 177.78vh;
  min-width: 100%;
  height: 56.25vw;
  min-height: 100%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.cb-cvid__v--sk { object-fit: unset; display: flex; }
.cb-cvid__overlay { position: absolute; inset: 0; background: rgba(0,0,0, var(--cb-overlay, 0.55)); }
.cb-cvid__wrap { position: relative; z-index: 1; max-width: 38rem; margin: 0 auto; text-align: center; }
.cb-cvid__wrap h2 { font-size: clamp(1.75rem, 4vw, 2.75rem); margin: 0 0 0.75rem; }
.cb-cvid__cta { display: inline-block; padding: 0.7rem 1.4rem; border-radius: 999px; background: #fff; color: #111; text-decoration: none; font-weight: 600; margin-top: 1rem; }

/* Feature — spotlight carousel */
.cb-fspot__track { display: flex; gap: 0.75rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.5rem; }
.cb-fspot__panel {
  flex: 0 0 18rem; scroll-snap-align: start;
  position: relative; border-radius: 0.75rem; overflow: hidden;
  border: 1px solid #e5e7eb; background: #fff; min-height: 16rem;
  transition: flex-basis 0.35s ease, box-shadow 0.35s ease;
  display: flex; flex-direction: column;
}
.cb-fspot__panel img { width: 100%; height: 10rem; object-fit: cover; display: block; }
.cb-fspot__copy { padding: 1rem; }
.cb-fspot__copy p { margin: 0.35rem 0 0; font-size: 0.9rem; line-height: 1.45; }
.cb-fspot__panel.is-active, .cb-fspot__panel:hover, .cb-fspot__panel:focus-within {
  flex-basis: 26rem;
  box-shadow: 0 20px 40px rgba(0,0,0,0.1);
  border-color: var(--cb-accent);
}

/* Feature — interactive demo */
.cb-fdemo__grid { display: grid; grid-template-columns: 20rem 1fr; gap: 1.5rem; }
@media (max-width: 820px) { .cb-fdemo__grid { grid-template-columns: 1fr; } }
.cb-fdemo__steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.cb-fdemo__step {
  width: 100%; text-align: left; display: flex; gap: 0.75rem; align-items: flex-start;
  padding: 0.75rem 0.9rem; border-radius: 0.6rem; border: 1px solid #e5e7eb; background: #fff; cursor: pointer;
}
.cb-fdemo__step.is-active { border-color: var(--cb-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--cb-accent) 25%, transparent); }
.cb-fdemo__num { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.8rem; opacity: 0.6; padding-top: 0.15rem; }
.cb-fdemo__copy { display: grid; gap: 0.2rem; }
.cb-fdemo__stage {
  position: relative; min-height: 16rem; border-radius: 0.75rem; background: #f9fafb; border: 1px solid #e5e7eb; overflow: hidden;
}
.cb-fdemo__preview { position: absolute; inset: 0; opacity: 0; transition: opacity 0.35s; display: flex; align-items: center; justify-content: center; }
.cb-fdemo__preview.is-active { opacity: 1; }
.cb-fdemo__preview img { width: 100%; height: 100%; object-fit: cover; }
.cb-fdemo__empty { color: #94a3b8; font-size: 1.2rem; font-family: ui-monospace, monospace; }

/* Feature — reveal split */
.cb-frsplit__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; }
.cb-frsplit--image-left .cb-frsplit__grid { grid-template-areas: "media copy"; }
.cb-frsplit--image-right .cb-frsplit__grid { grid-template-areas: "copy media"; }
.cb-frsplit__copy { grid-area: copy; }
.cb-frsplit__media { grid-area: media; }
@media (max-width: 820px) {
  .cb-frsplit__grid { grid-template-columns: 1fr; grid-template-areas: "copy" "media"; }
}
.cb-frsplit__kicker { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.82rem; color: var(--cb-accent, #c1272d); margin-bottom: 0.65rem; }
.cb-frsplit__copy h2 { margin: 0 0 0.75rem; font-size: clamp(1.75rem, 4vw, 2.5rem); }
.cb-frsplit__cta { display: inline-block; padding: 0.65rem 1.2rem; background: #111; color: #fff; border-radius: 0.4rem; text-decoration: none; font-weight: 600; margin-top: 0.5rem; }
.cb-frsplit__media img { width: 100%; border-radius: 1rem; display: block; }
.cb-frsplit__empty { background: #f3f4f6; border-radius: 1rem; min-height: 14rem; display: flex; align-items: center; justify-content: center; padding: 1rem; }

/* Stats — hexagon counter */
.cb-hex__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 1.25rem 1rem; margin-top: 1.5rem;
}
.cb-hex__cell {
  position: relative;
  aspect-ratio: 1.1;
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: var(--cb-fg);
}
.cb-hex__shape {
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--cb-accent) 10%, transparent);
  border: 2px solid var(--cb-accent);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  transition: transform 0.3s ease;
}
.cb-hex__cell:hover .cb-hex__shape { transform: scale(1.04); }
.cb-hex__copy { position: relative; z-index: 1; padding: 0.5rem; }
.cb-hex__value { font-size: 1.6rem; font-weight: 800; line-height: 1; color: var(--cb-accent); }
.cb-hex__label { margin-top: 0.25rem; font-size: 0.78rem; opacity: 0.75; }

/* Logos — cloud sphere */
.cb-lsphere { padding: clamp(3rem, 6vw, 5rem) 1.25rem; }
.cb-lsphere__stage {
  position: relative;
  width: min(26rem, 90vw);
  margin: 1.5rem auto 0;
  aspect-ratio: 1;
  perspective: 800px;
  transform-style: preserve-3d;
}
.cb-lsphere__node {
  position: absolute; inset: 0; margin: auto;
  width: 4.5rem; height: 4.5rem;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1rem;
  padding: 0.5rem;
  --cb-angle: calc((360deg / var(--cb-n)) * var(--cb-i));
  --cb-r: 9rem;
  transform: rotate(var(--cb-angle)) translate(var(--cb-r)) rotate(calc(var(--cb-angle) * -1));
}
.cb-lsphere__node img { max-width: 100%; max-height: 100%; filter: brightness(0) invert(1); opacity: 0.85; }

/* Logos — strip static */
.cb-lstrip__heading { font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.8; margin: 0 0 1rem; }
.cb-lstrip__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1rem, 3vw, 2.5rem); }
.cb-lstrip__item img { max-height: 2.25rem; width: auto; display: block; opacity: 0.8; filter: grayscale(1); transition: 0.25s; }
.cb-lstrip__item:hover img { opacity: 1; filter: none; }

/* Gallery — before/after grid */
.cb-bagrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }
.cb-bagrid__card { margin: 0; }

/* Gallery — image trail */
.cb-gtrail { position: relative; min-height: 28rem; overflow: hidden; padding: clamp(3rem, 6vw, 5rem) 1.25rem; }
.cb-gtrail__pool { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.cb-gtrail__img {
  position: absolute; width: 10rem; height: 10rem; object-fit: cover;
  top: 50%; left: 50%; margin: -5rem 0 0 -5rem;
  opacity: 0; transform: scale(0.85);
  border-radius: 0.5rem; box-shadow: 0 14px 30px rgba(0,0,0,0.35);
  transition: opacity 0.6s, transform 0.6s;
}

/* Content — entry grid */
.cb-cgrid__grid {
  display: grid;
  grid-template-columns: repeat(var(--cb-cgrid-cols, 3), minmax(0, 1fr));
  gap: 1rem;
  align-items: stretch;
}
@media (max-width: 900px) {
  .cb-cgrid__grid { grid-template-columns: repeat(min(2, var(--cb-cgrid-cols, 3)), minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .cb-cgrid__grid { grid-template-columns: 1fr; }
}
.cb-cgrid__card {
  border: 1px solid #e5e7eb;
  border-radius: 0;
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}
.cb-cgrid__media { aspect-ratio: 16 / 10; background: #f3f4f6; flex-shrink: 0; }
.cb-cgrid__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cb-cgrid__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.cb-cgrid__tag {
  display: inline-block;
  margin: 0.75rem 0 0 1rem;
  padding: 0.2rem 0.5rem;
  background: #f3f4f6;
  border-radius: 999px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #475569;
  align-self: flex-start;
}
.cb-cgrid__title {
  margin: 0.5rem 1rem 0;
  font-size: var(--cb-cgrid-title-size, 17px);
  color: var(--cb-cgrid-title-color, #111827);
}
.cb-cgrid__excerpt {
  margin: 0.5rem 1rem 0;
  font-size: var(--cb-cgrid-excerpt-size, 14px);
  line-height: 1.45;
  color: var(--cb-cgrid-excerpt-color, #6b7280);
}
.cb-cgrid__footer { margin-top: auto; padding: 1rem; }
/* Chamfered BR (“chip”); self-contained (does not require Appearance .cb-btn) */
.cb-cgrid__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.2;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: opacity 0.2s ease, background-color 0.2s ease;
  color: #fff;
  background-color: var(--cb-accent, #c1272d);
  padding: 0.75rem 1.65rem;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
}
.cb-cgrid__cta:hover { opacity: 0.92; }

/* Content — changelog grid */
.cb-chgrid__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }
.cb-chgrid__card { padding: 1rem 1.1rem; border: 1px solid #e5e7eb; border-radius: 0.75rem; background: #fff; }
.cb-chgrid__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.cb-chgrid__v { font-family: ui-monospace, monospace; font-size: 0.95rem; }
.cb-chgrid__tag { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; padding: 0.15rem 0.45rem; border-radius: 999px; background: color-mix(in srgb, var(--cb-accent) 12%, transparent); color: var(--cb-accent); }
.cb-chgrid__notes { margin: 0; font-size: 0.9rem; line-height: 1.45; color: #374151; }

/* Content — footnotes */
.cb-cfoot__body { font-size: 1rem; line-height: 1.7; }
.cb-cfoot__rule { border: 0; border-top: 1px solid #e5e7eb; margin: 1.5rem 0 1rem; }
.cb-cfoot__list { padding-left: 1.25rem; font-size: 0.88rem; color: #475569; }
.cb-cfoot__list li { margin: 0.25rem 0; }

/* Immersive — globe */
.cb-iglobe { padding: clamp(3rem, 6vw, 5rem) 1.25rem; overflow: hidden; }
.cb-iglobe__wrap {
  max-width: 72rem; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center;
}
@media (max-width: 820px) { .cb-iglobe__wrap { grid-template-columns: 1fr; } }
.cb-iglobe__copy h2 { font-size: clamp(1.75rem, 4vw, 2.75rem); margin: 0 0 0.75rem; }
.cb-iglobe__kicker { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.78rem; opacity: 0.7; margin-bottom: 0.5rem; }
.cb-iglobe__cta { display: inline-block; padding: 0.65rem 1.2rem; background: var(--cb-dot); color: #fff; border-radius: 0.4rem; text-decoration: none; font-weight: 600; margin-top: 0.5rem; }
.cb-iglobe__stage { display: flex; align-items: center; justify-content: center; }
.cb-iglobe__svg { width: 100%; max-width: 26rem; color: currentColor; }

/* Immersive — noise texture */
.cb-inoise { position: relative; padding: clamp(3rem, 6vw, 5rem) 1.25rem; overflow: hidden; }
.cb-inoise::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  opacity: var(--cb-grain-opacity, 0.12);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  animation: cb-grain-shift 0.8s steps(4) infinite;
}
.cb-inoise__kicker { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.82rem; opacity: 0.75; margin-bottom: 0.65rem; }
.cb-inoise__cta { display: inline-block; padding: 0.65rem 1.2rem; background: currentColor; color: #111; border-radius: 0.4rem; text-decoration: none; font-weight: 600; }

/* Immersive — scroll reveal image */
.cb-revimg { margin: 0; }
.cb-revimg img { width: 100%; display: block; border-radius: 0.75rem; }

/* Immersive — hover reveal */
.cb-hrev { padding: clamp(3rem, 6vw, 5rem) 1.25rem; }
.cb-hrev__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.75rem; margin-top: 1.25rem; }
.cb-hrev__card {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.04);
}
.cb-hrev__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.06);
  transition: opacity 0.45s, transform 0.8s;
}
.cb-hrev__card:hover .cb-hrev__img,
.cb-hrev__card:focus-within .cb-hrev__img { opacity: 0.55; transform: scale(1); }
.cb-hrev__label {
  position: absolute; inset: auto 1rem 1rem; font-weight: 700; letter-spacing: -0.01em; font-size: 1.25rem;
}

/* Immersive — magnetic link grid */
.cb-imag { padding: clamp(3rem, 6vw, 5rem) 1.25rem; }
.cb-imag__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.75rem; margin-top: 1.25rem; }
.cb-imag__cell {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem; border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08);
  color: inherit; text-decoration: none;
  transition: background 0.2s;
}
.cb-imag__cell:hover { background: rgba(255, 255, 255, 0.12); }
.cb-imag__label { font-weight: 600; }
.cb-imag__arrow { font-size: 1.2rem; opacity: 0.7; }

/* Media — Rive scene */
.cb-rive__stage { position: relative; background: #f8fafc; border-radius: 1rem; padding: 1rem; min-height: 12rem; }
.cb-rive__canvas { display: block; max-width: 100%; height: auto; }
.cb-rive__empty { color: #94a3b8; padding: 2rem 1rem; }
.cb-rive__stage[data-rive-ready] .cb-rive__empty { display: none; }

/* Media video player */
.cb-mvid {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 0.5rem;
  overflow: hidden;
  background: #0f172a;
}
.cb-mvid iframe,
.cb-mvid .cb-sk-embed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Video reel grid */
.cb-vreel__item { margin: 0; position: relative; border-radius: 0.35rem; overflow: hidden; background: #f3f4f6; }
.cb-vreel__frame {
  width: 100%;
  aspect-ratio: 1;
  display: block;
  border: 0;
}
.cb-vreel__sk { aspect-ratio: 1; display: flex; }
.cb-vreel__sk .cb-sk-embed { width: 100%; height: 100%; }

/* Skeleton fallback wrappers (images) */
.cb-cgrid__media--sk { aspect-ratio: 16 / 10; display: flex; }
.cb-cgrid__media--sk .cb-sk-embed { width: 100%; height: 100%; }
.cb-lgrid__sk { aspect-ratio: 2 / 1; display: flex; align-items: center; justify-content: center; }
.cb-lgrid__sk .cb-sk-embed { width: 100%; height: 100%; }
.cb-lmarq__sk { display: inline-flex; align-items: center; width: 8rem; height: 2.25rem; }
.cb-lmarq__sk .cb-sk-embed { width: 100%; height: 100%; }
.cb-lstrip__sk { display: inline-flex; width: 6rem; height: 2.25rem; }
.cb-lstrip__sk .cb-sk-embed { width: 100%; height: 100%; }
.cb-lsphere__sk { width: 100%; height: 100%; display: flex; filter: brightness(0) invert(1); opacity: 0.85; }
.cb-lsphere__sk .cb-sk-embed { width: 100%; height: 100%; }
.cb-glbx__sk { aspect-ratio: 1; display: flex; }
.cb-glbx__sk .cb-sk-embed { width: 100%; height: 100%; }
.cb-gmas__item--sk { aspect-ratio: 4 / 3; overflow: hidden; display: flex; flex-direction: column; }
.cb-gmas__item--sk > .cb-sk-embed { flex: 1 1 auto; min-height: 8rem; }
.cb-gtrail__img--sk { display: flex; align-items: center; justify-content: center; }
.cb-gtrail__img--sk > .cb-sk-embed { width: 100%; height: 100%; }
.cb-hrev__img--sk { position: absolute; inset: 0; display: flex; opacity: 0; transform: scale(1.06); transition: opacity 0.45s, transform 0.8s; }
.cb-hrev__img--sk > .cb-sk-embed { width: 100%; height: 100%; }
.cb-hrev__card:hover .cb-hrev__img--sk,
.cb-hrev__card:focus-within .cb-hrev__img--sk { opacity: 0.55; transform: scale(1); }
.cb-revimg--sk > .cb-sk-embed { width: 100%; aspect-ratio: 16 / 9; display: block; }
.cb-frsplit__media .cb-sk-embed { width: 100%; aspect-ratio: 4 / 3; display: block; border-radius: 1rem; overflow: hidden; }
.cb-fspot__panel-media { width: 100%; height: 10rem; display: flex; }
.cb-fspot__panel-media > .cb-sk-embed { width: 100%; height: 100%; }
.cb-hparallax__layer--sk { position: absolute; inset: 0; display: flex; opacity: 0.7; }
.cb-hparallax__layer--sk > .cb-sk-embed { width: 100%; height: 100%; }

/* Page heading — shared CTA button (below supporting text).
   Renders from src/templates/_blocks/_page-heading-cta.twig. Every page
   heading gets the same spacing + motion hook; per-block wrap classes
   (e.g. .cb-phund__cta-wrap) can override alignment / colour without
   duplicating the margin. */
.cb-ph-cta__wrap {
  margin-top: 1.5rem;
}
.cb-ph-cta {
  /* .cb-btn already provides display:inline-flex + padding + transitions.
     Keep the selector present so the focus-visible ring below has
     something to hang on when block.buttonClasses is empty. */
}
.cb-ph-cta:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}
/* Tag-cloud lives in a centred column; pull the CTA into the same column. */
.cb-phtag__cta-wrap {
  text-align: center;
}
/* Video-behind forces white body text over the media overlay. The default
   --cb-btn-bg is the kit accent (red); if an editor wants the CTA to pop
   against dark video, they can override via `buttonStyle` (ghost / outline)
   on the block. Keep the wrapper margin a bit larger because the video
   section is usually full-viewport. */
.cb-phvideo__cta-wrap {
  margin-top: 1.75rem;
}

/* Reduced motion overrides */
@media (prefers-reduced-motion: reduce) {
  .cb-phgrad__heading, .cb-hshader__mesh, .cb-inoise::after { animation: none !important; }
  .cb-phund__line { transition: none; stroke-dashoffset: 0; }
  .cb-cundr__inner { transition: none; background-size: 100% 0.18em; }
  .cb-hvf__heading { transition: none; }
  .cb-hparallax__layer, .cb-h3d__card { transition: none; }
  /* Bars: show final value immediately instead of scaling in. */
  .cb-statbars__fill { transition: none; }
}

/* ------------------------------------------------------------------
 * Focus indicators
 * Most kit surfaces inherit the browser's default focus ring, which can
 * be invisible on coloured backgrounds. Give every interactive kit
 * element a consistent, high-contrast focus-visible treatment.
 * ------------------------------------------------------------------ */
.cb-ftab__btn:focus-visible,
.cb-fdemo__step:focus-visible,
.cb-glbx button:focus-visible,
.cb-ubtt:focus-visible,
.cb-ucta a:focus-visible,
.cb-nl button:focus-visible,
.cb-cnl__form button:focus-visible,
.cb-phtag__tag:focus-visible,
.cb-h3d__cta:focus-visible,
.cb-hshader__cta:focus-visible,
.cb-hparallax__cta:focus-visible,
.cb-hspot__cta:focus-visible,
.cb-hvf__cta:focus-visible,
.cb-hterm__cta:focus-visible,
.cb-hglitch__cta:focus-visible,
.cb-hlottie__cta:focus-visible,
.cb-hrive__cta:focus-visible,
.cb-iglobe__cta:focus-visible,
.cb-imag__cell:focus-visible,
.cb-inoise__cta:focus-visible,
.cb-cbadge__cta:focus-visible,
.cb-cundr__cta:focus-visible,
.cb-cvid__cta:focus-visible,
.cb-frsplit__cta:focus-visible,
.cb-phvideo__cta:focus-visible,
.cb-phvideo__wrap a:focus-visible,
.cb-cgrid__cta:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* ------------------------------------------------------------------
 * Print
 * Hide position:fixed overlays and pause heavy animations on paper /
 * PDF rendering. Static section content keeps its flow.
 * ------------------------------------------------------------------ */
@media print {
  .cb-uprog, .cb-ubtt, .cb-ucta, .cb-uann { display: none !important; }
  .cb-lmarq__track,
  .cb-hmarq__line,
  .cb-hmsk__track,
  .cb-hintg__row,
  .cb-hmesh__bg,
  .cb-hshader__mesh,
  .cb-inoise::after,
  .cb-phgrad__heading {
    animation: none !important;
  }
  .cb-hparallax__layer, .cb-h3d__card, .cb-hvf__heading { transition: none !important; }
  .cb-bafter__top { width: 50% !important; }
  .cb-glbx dialog { display: none !important; }
  .cb-hspot { background: var(--cb-bg) !important; }
  /* Ensure deferred <img data-cb-src> still renders something on print
     if a dialog was never opened: visible grid thumbnails are enough. */
  [data-cb-block] { break-inside: avoid-page; }
}