/* DaVinci Case Studies — bundled stylesheet.
 *
 * All rules scoped under .dc-app. Plugin-specific classes prefixed
 * .dc-cs-*. Nunito Sans loaded by host theme.
 */

/* ─── Brand tokens ─────────────────────────────────────────────────── */
.dc-app {
  --dc-white:          #FFFFFF;
  --dc-purple:         #5612BD;
  --dc-purple-light:   #D7BDFF;
  --dc-blue-light:     #9DE5FF;
  --dc-purple-deep:    #250651;
  --dc-purple-violet:  #9250F2;
  --dc-purple-glow:    #B695FF;
  --dc-cyan-bright:    #67E1F7;
  --dc-cyan-pop:       #57FFF7;
  --dc-bg:             var(--dc-white);
  --dc-surface:        #F9F5FF;
  --dc-surface-2:      #F3F0FB;
  --dc-border:         #D7BDFF;
  --dc-border-faint:   rgba(207, 194, 212, 0.30);
  --dc-fg:             var(--dc-purple-deep);
  --dc-fg-strong:      #100D0C;
  --dc-fg-muted:       #6F6883;
  --dc-fg-on-purple:   var(--dc-white);
  --dc-link:           var(--dc-purple);
  --dc-cta-bg:         #85ECFF;
  --dc-cta-fg:         var(--dc-purple-deep);
  --dc-cta-pop-bg:     var(--dc-purple);
  --dc-cta-pop-fg:     var(--dc-white);
  --dc-bg-dark:        #0E0125;
  --dc-grad-hero:      linear-gradient(110deg, #67E1F7 0%, #5612BD 35%, #9250F2 70%, #67E1F7 100%);
  --dc-shadow-cta:     0 11px 34px -8px rgba(86, 18, 189, 0.35);
  --dc-shadow-card:    0 14px 40px -22px rgba(86, 18, 189, 0.18);
  --dc-shadow-card-hi: 0 28px 60px -22px rgba(86, 18, 189, 0.28);
  --dc-radius-sm:      10px;
  --dc-radius-md:      18px;
  --dc-radius-lg:      24px;
  --dc-radius-xl:      28px;
  --dc-font: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  font-family: var(--dc-font);
  color: var(--dc-fg);
  background: #fff;
  position: relative;
  isolation: isolate;
}
.dc-app, .dc-app *, .dc-app *::before, .dc-app *::after { box-sizing: border-box; }
.dc-app button { font-family: inherit; }
.dc-app img, .dc-app svg { max-width: 100%; }
.dc-app a { color: var(--dc-link); text-decoration: none; }

.dc-app .dc-container { max-width: 1480px; margin: 0 auto; padding: 0 60px; }
.dc-app .dc-container--narrow { max-width: 1120px; }

/* Reveal-on-scroll */
.dc-app .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.dc-app .reveal.in { opacity: 1 !important; transform: translateY(0) !important; }
@media (prefers-reduced-motion: reduce) { .dc-app .reveal { opacity: 1; transform: none; transition: none; } }

/* ─── CTAs ────────────────────────────────────────────────────────── */
.dc-app .dc-cta {
  display: inline-flex; align-items: center; gap: 12px;
  font: 700 16px/1 var(--dc-font);
  background: var(--dc-cta-bg); color: var(--dc-cta-fg);
  padding: 16px 28px; border-radius: var(--dc-radius-sm);
  border: 0; cursor: pointer; text-decoration: none;
  transition: filter .15s ease, transform .15s ease, box-shadow .15s ease;
  box-shadow: var(--dc-shadow-cta);
  white-space: nowrap;
}
.dc-app .dc-cta:hover { filter: brightness(1.08); transform: translateY(-1px); }
.dc-app .dc-cta:active { transform: translateY(1px); filter: brightness(0.95); }
.dc-app .dc-cta--pop { background: var(--dc-cta-pop-bg); color: var(--dc-cta-pop-fg); box-shadow: 0 11px 28px -10px rgba(86, 18, 189, 0.45); }
.dc-app .dc-cta--ghost { background: transparent; color: var(--dc-purple); border: 1.5px solid var(--dc-purple); box-shadow: none; }
.dc-app .dc-cta--lg { font-size: 18px; padding: 20px 36px; }
.dc-app .dc-inline-cta { display: inline-flex; align-items: center; gap: 8px; font: 700 15px/1 var(--dc-font); color: var(--dc-purple); }
.dc-app .dc-inline-cta:hover { color: var(--dc-purple-deep); }
.dc-app .dc-inline-cta svg { transition: transform .2s ease; }
.dc-app .dc-inline-cta:hover svg { transform: translateX(4px); }

/* ─── Eyebrow / chip / gradient word ──────────────────────────────── */
.dc-app .dc-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font: 800 12px/1 var(--dc-font);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--dc-purple);
}
.dc-app .dc-eyebrow--light { color: var(--dc-cyan-bright); }
.dc-app .dc-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 13px/1 var(--dc-font);
  color: var(--dc-purple-deep);
  background: var(--dc-white);
  border: 1px solid var(--dc-border);
  padding: 8px 14px; border-radius: 999px;
  white-space: nowrap;
}
.dc-app .dc-chip--dark { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.18); color: var(--dc-white); }
.dc-app .dc-chip--filter {
  cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease;
  font-weight: 700;
}
.dc-app .dc-chip--filter:hover { border-color: var(--dc-purple); }
.dc-app .dc-chip--filter.is-active {
  background: var(--dc-purple); color: var(--dc-white); border-color: var(--dc-purple);
  box-shadow: 0 6px 18px -8px rgba(86,18,189,0.55);
}
.dc-app .dc-grad-word {
  background-image: var(--dc-grad-hero);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ─── Feature pill (NON-clickable, lightweight tag) ───────────────── */
.dc-app .dc-cs-feature-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 12px/1 var(--dc-font);
  color: var(--dc-purple);
  padding: 6px 10px;
  background: transparent;
  border: 0;
  border-radius: 0;
  letter-spacing: 0.02em;
}
.dc-app .dc-cs-feature-pill + .dc-cs-feature-pill { border-left: 1px solid var(--dc-border); padding-left: 14px; margin-left: 4px; }
.dc-app .dc-cs-feature-row { display: flex; flex-wrap: wrap; gap: 4px 0; align-items: center; }

/* ─── Brand background primitives ─────────────────────────────────── */
.dc-app .dc-cs-bg-grid {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, transparent 75%);
          mask-image: radial-gradient(ellipse at center, #000 0%, transparent 75%);
}
.dc-app .dc-cs-bg-blur {
  position: absolute;
  width: 900px; max-width: 70vw;
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}
.dc-app .dc-cs-stars { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.dc-app .dc-brand-star { display: inline-block; pointer-events: none; }

/* ─── Hero ────────────────────────────────────────────────────────── */
.dc-app .dc-cs-hero {
  position: relative; overflow: hidden;
  padding: 140px 0 100px;
  background: linear-gradient(180deg, #fff 0%, var(--dc-surface) 100%);
}
.dc-app .dc-cs-hero > .dc-container { position: relative; z-index: 2; }
.dc-app .dc-cs-hero__inner { text-align: center; max-width: 1000px; margin: 0 auto; }
.dc-app .dc-cs-hero h1 {
  font: 800 76px/1.02 var(--dc-font);
  letter-spacing: -0.028em;
  color: var(--dc-purple-deep);
  margin: 22px 0 22px;
}
.dc-app .dc-cs-hero__sub {
  font: 400 19px/1.55 var(--dc-font);
  color: var(--dc-fg-muted);
  max-width: 760px; margin: 0 auto;
}
.dc-app .dc-cs-hero .dc-cs-bg-blur--a { top: -200px; left: -180px; animation: dc-cs-drift-a 18s ease-in-out infinite alternate; }
.dc-app .dc-cs-hero .dc-cs-bg-blur--b { bottom: -260px; right: -180px; transform: scaleX(-1); animation: dc-cs-drift-b 22s ease-in-out infinite alternate; }
.dc-app .dc-cs-hero .dc-cs-stars .dc-brand-star { animation: dc-cs-twinkle 6s ease-in-out infinite; }
.dc-app .dc-cs-hero .dc-cs-stars .dc-brand-star:nth-child(3n) { animation-duration: 9s; animation-delay: -2s; }
.dc-app .dc-cs-hero .dc-cs-stars .dc-brand-star:nth-child(3n+1) { animation-duration: 7.5s; animation-delay: -4s; }

@keyframes dc-cs-drift-a {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(80px, 40px, 0) scale(1.06); }
}
@keyframes dc-cs-drift-b {
  0%   { transform: translate3d(0, 0, 0) scaleX(-1) scale(1); }
  100% { transform: translate3d(-60px, -30px, 0) scaleX(-1) scale(1.05); }
}
@keyframes dc-cs-twinkle {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.18); }
}
@media (prefers-reduced-motion: reduce) {
  .dc-app .dc-cs-hero .dc-cs-bg-blur--a,
  .dc-app .dc-cs-hero .dc-cs-bg-blur--b,
  .dc-app .dc-cs-hero .dc-cs-stars .dc-brand-star { animation: none; }
}

/* Tab pill */
.dc-app .dc-cs-tabs {
  margin: 44px auto 0;
  display: inline-flex; gap: 4px;
  padding: 6px;
  background: var(--dc-surface-2);
  border-radius: 14px;
  border: 1px solid var(--dc-border-faint);
}
.dc-app .dc-cs-tab {
  font: 700 15px/1 var(--dc-font);
  color: var(--dc-fg-muted);
  background: transparent;
  padding: 14px 28px;
  border-radius: 10px;
  border: 0; cursor: pointer;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.dc-app .dc-cs-tab[aria-selected="true"] {
  background: var(--dc-purple); color: var(--dc-white);
  box-shadow: 0 8px 22px -10px rgba(86,18,189,0.55);
}
.dc-app .dc-cs-tab:focus-visible { outline: 2px solid var(--dc-purple); outline-offset: 2px; }

/* Panel toggle */
.dc-app .dc-cs-panel { display: none; }
.dc-app .dc-cs-panel.is-active { display: block; }
.dc-app .dc-cs-main.pre-boot .dc-cs-panel { display: block; }

/* ─── Section primitives ──────────────────────────────────────────── */
.dc-app .dc-cs-section { padding: 100px 0; position: relative; overflow: hidden; }
.dc-app .dc-cs-section--surface { background: var(--dc-surface); }
.dc-app .dc-cs-section--dark { background: var(--dc-bg-dark); color: var(--dc-white); }
.dc-app .dc-cs-section--dark .dc-cs-section__title { color: var(--dc-white); }
.dc-app .dc-cs-section--full { padding: 120px 0; }
.dc-app .dc-cs-section__head { max-width: 820px; margin: 0 auto 56px; text-align: center; position: relative; z-index: 2; }
.dc-app .dc-cs-section__title {
  font: 800 56px/1.05 var(--dc-font);
  letter-spacing: -0.022em;
  color: var(--dc-purple-deep);
  margin: 14px 0 16px;
}
.dc-app .dc-cs-section__sub {
  font: 400 18px/1.55 var(--dc-font);
  color: var(--dc-fg-muted);
}
.dc-app .dc-cs-section > .dc-container { position: relative; z-index: 2; }

/* ─── Industry cycler (Optimizely-style hero showcase) ────────────── */
.dc-app .dc-cs-cycler {
  position: relative;
  background: linear-gradient(180deg, #fff 0%, var(--dc-surface) 100%);
  border-radius: 32px;
  padding: 56px 56px 48px;
  box-shadow: 0 30px 80px -40px rgba(86,18,189,0.30);
  border: 1px solid var(--dc-border-faint);
  overflow: hidden;
}
.dc-app .dc-cs-cycler__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.dc-app .dc-cs-cycler__copy { display: flex; flex-direction: column; gap: 18px; }
.dc-app .dc-cs-cycler__head { font: 800 36px/1.08 var(--dc-font); letter-spacing: -0.018em; color: var(--dc-purple-deep); margin: 0; }
.dc-app .dc-cs-cycler__intro { font: 400 16px/1.6 var(--dc-font); color: var(--dc-fg-muted); margin: 0; }
.dc-app .dc-cs-cycler__chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* Cycler verticals: only one is_active at a time */
.dc-app .dc-cs-cycler__stage { position: relative; }
.dc-app .dc-cs-cycler__slide { display: none; }
.dc-app .dc-cs-cycler__slide.is-active { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }

/* Dots (vertical position indicators) */
.dc-app .dc-cs-cycler__dots {
  display: flex; gap: 8px;
  margin-top: 16px;
}
.dc-app .dc-cs-cycler__dot {
  width: 28px; height: 4px;
  border-radius: 2px;
  background: var(--dc-border);
  border: 0; cursor: pointer;
  transition: background .25s ease, width .25s ease;
}
.dc-app .dc-cs-cycler__dot.is-active { background: var(--dc-purple); width: 44px; }

/* ─── Industry filter strip ───────────────────────────────────────── */
.dc-app .dc-cs-strip {
  margin: 0 0 36px;
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center;
}
.dc-app .dc-cs-strip-stage {
  background: var(--dc-white);
  border: 1px solid var(--dc-border-faint);
  border-radius: var(--dc-radius-xl);
  padding: 56px;
  box-shadow: var(--dc-shadow-card);
  min-height: 480px;
}
.dc-app .dc-cs-strip-feature { display: none; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.dc-app .dc-cs-strip-feature.is-active { display: grid; }
.dc-app .dc-cs-strip-feature__copy { display: flex; flex-direction: column; gap: 16px; }
.dc-app .dc-cs-strip-feature__h { font: 800 32px/1.12 var(--dc-font); letter-spacing: -0.015em; color: var(--dc-purple-deep); margin: 0; }
.dc-app .dc-cs-strip-feature__p { font: 400 17px/1.65 var(--dc-font); color: var(--dc-fg-muted); margin: 0; }
.dc-app .dc-cs-strip-feature__features { margin-top: 6px; }
.dc-app .dc-cs-strip-feature__cta { margin-top: 8px; }

/* ─── Chat player ─────────────────────────────────────────────────── */
.dc-app .dc-cs-phone {
  position: relative; width: 100%; max-width: 360px; margin: 0 auto;
  border-radius: 44px; background: #1A0438; padding: 10px;
  box-shadow: 0 30px 60px -25px rgba(86,18,189,0.45);
  transition: transform .4s cubic-bezier(.2,.7,.2,1);
}
.dc-app .dc-cs-phone__screen {
  border-radius: 36px; overflow: hidden; background: #F7F7F9;
  aspect-ratio: 9 / 19.5; position: relative;
}
.dc-app .dc-cs-phone__notch {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  width: 102px; height: 28px; border-radius: 999px;
  background: #1A0438; z-index: 5;
}
.dc-app .dc-cs-desktop {
  position: relative; width: 100%; max-width: 620px; margin: 0 auto;
  border-radius: 14px; background: #1A0438; padding: 10px;
  box-shadow: 0 30px 60px -25px rgba(86,18,189,0.45);
}
.dc-app .dc-cs-desktop__bar { display: flex; gap: 6px; padding: 4px 8px 8px; }
.dc-app .dc-cs-desktop__bar span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.25); }
.dc-app .dc-cs-desktop__bar span:first-child { background: #FF5F57; }
.dc-app .dc-cs-desktop__bar span:nth-child(2) { background: #FEBC2E; }
.dc-app .dc-cs-desktop__bar span:nth-child(3) { background: #28C840; }
.dc-app .dc-cs-desktop__screen { background: #F7F7F9; border-radius: 8px; overflow: hidden; aspect-ratio: 16 / 11; }

/* Chat layout */
.dc-app .dc-cs-chat {
  display: flex; flex-direction: column;
  height: 100%; background: #F7F7F9;
}
.dc-app .dc-cs-chat__header {
  display: flex; gap: 10px; align-items: center;
  padding: 56px 18px 12px;
  background: #fff;
  border-bottom: 1px solid #ECEAF2;
}
.dc-app .dc-cs-chat__header--desktop { padding: 14px 18px; }
.dc-app .dc-cs-chat__avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #5612BD 0%, #9250F2 100%);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font: 800 14px/1 var(--dc-font);
}
.dc-app .dc-cs-chat__brand { font: 700 14px/1.15 var(--dc-font); color: #1A1A1A; }
.dc-app .dc-cs-chat__sub { font: 400 11px/1.2 var(--dc-font); color: #888; }

.dc-app .dc-cs-chat__messages {
  flex: 1; min-height: 0;
  overflow: hidden;
  padding: 14px 14px 18px;
  display: flex; flex-direction: column; gap: 10px;
  scroll-behavior: smooth;
  background: #F7F7F9;
}

/* Bubbles are display:none until the playback engine reveals them.
   This matches the sister homepage's pattern: hidden bubbles take no
   space, so scrollHeight grows exactly by the new bubble each step and
   auto-scroll-to-bottom keeps the chat anchored cleanly. */
.dc-app .dc-cs-bubble-wrap {
  display: none;
  opacity: 0;
  transform: translateY(8px) scale(.98);
  flex-shrink: 0;
}
.dc-app .dc-cs-bubble-wrap.is-shown {
  display: block;
  animation: dc-cs-bubble-pop .35s ease forwards;
}
@keyframes dc-cs-bubble-pop {
  0%   { opacity: 0; transform: translateY(8px) scale(.98); }
  100% { opacity: 1; transform: translateY(0)  scale(1);    }
}
@media (prefers-reduced-motion: reduce) {
  .dc-app .dc-cs-bubble-wrap.is-shown { animation: none; opacity: 1; transform: none; }
}

.dc-app .dc-cs-bubble { display: flex; }
.dc-app .dc-cs-bubble--user { justify-content: flex-end; }
.dc-app .dc-cs-bubble--ai   { justify-content: flex-start; }

.dc-app .dc-cs-bubble__content {
  max-width: 86%;
  font: 400 13.5px/1.5 var(--dc-font);
  color: #1A1A1A;
}
.dc-app .dc-cs-bubble--user .dc-cs-bubble__content {
  background: #5612BD; color: #fff;
  padding: 10px 14px;
  border-radius: 16px 16px 4px 16px;
}
.dc-app .dc-cs-bubble--ai.dc-cs-bubble--text .dc-cs-bubble__content {
  background: #fff;
  border: 1px solid #ECEAF2;
  padding: 10px 14px;
  border-radius: 16px 16px 16px 4px;
}

/* Typing indicator */
.dc-app .dc-cs-typing { display: inline-flex; gap: 4px; padding: 4px 0; }
.dc-app .dc-cs-typing i {
  width: 6px; height: 6px; border-radius: 50%; background: #B5B0C2;
  animation: dcCsTyping 1.2s infinite ease-in-out;
}
.dc-app .dc-cs-typing i:nth-child(2) { animation-delay: 0.15s; }
.dc-app .dc-cs-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dcCsTyping { 0%, 80%, 100% { transform: translateY(0); opacity: 0.4; } 40% { transform: translateY(-4px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .dc-app .dc-cs-typing i { animation: none; } }

/* Product card in chat */
.dc-app .dc-cs-bubble--product .dc-cs-bubble__content,
.dc-app .dc-cs-bubble--grid .dc-cs-bubble__content,
.dc-app .dc-cs-bubble--locator .dc-cs-bubble__content,
.dc-app .dc-cs-bubble--cta .dc-cs-bubble__content { max-width: 92%; padding: 0; background: transparent; border: 0; }
.dc-app .dc-cs-bubble--product, .dc-cs-bubble--grid, .dc-cs-bubble--locator, .dc-cs-bubble--cta { width: 100%; }

.dc-app .dc-cs-product {
  display: flex; gap: 10px; padding: 10px;
  background: #fff;
  border: 1px solid #ECEAF2;
  border-radius: 14px;
  width: 100%;
}
.dc-app .dc-cs-product__media {
  flex: 0 0 88px;
  aspect-ratio: 1;
  background: #F3F0FB;
  border-radius: 8px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.dc-app .dc-cs-product__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dc-app .dc-cs-product__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dc-app .dc-cs-product__title { font: 800 13.5px/1.2 var(--dc-font); color: var(--dc-purple-deep); }
.dc-app .dc-cs-product__sub { font: 400 12px/1.4 var(--dc-font); color: #6F6883; }
.dc-app .dc-cs-product__tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.dc-app .dc-cs-product__tag {
  font: 700 10px/1 var(--dc-font);
  color: var(--dc-purple);
  background: #F3F0FB;
  padding: 4px 8px;
  border-radius: 999px;
}

/* Grid (carousel-style) */
.dc-app .dc-cs-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.dc-app .dc-cs-grid__item {
  background: #fff; border: 1px solid #ECEAF2; border-radius: 12px;
  padding: 8px;
  display: flex; flex-direction: column; gap: 4px;
}
.dc-app .dc-cs-grid__media {
  aspect-ratio: 1.1; background: #F3F0FB; border-radius: 8px; overflow: hidden;
}
.dc-app .dc-cs-grid__media img { width: 100%; height: 100%; object-fit: cover; }
.dc-app .dc-cs-grid__title { font: 800 12px/1.2 var(--dc-font); color: var(--dc-purple-deep); }
.dc-app .dc-cs-grid__sub { font: 400 11px/1.3 var(--dc-font); color: #6F6883; }

/* Inline CTA row */
.dc-app .dc-cs-ctarow { display: flex; flex-wrap: wrap; gap: 6px; }
.dc-app .dc-cs-ctarow__btn {
  font: 700 12px/1 var(--dc-font);
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--dc-border);
  background: #fff;
  color: var(--dc-purple-deep);
}
.dc-app .dc-cs-ctarow__btn--primary {
  background: var(--dc-purple); color: #fff;
  border-color: var(--dc-purple);
}

/* Locator */
.dc-app .dc-cs-locator {
  background: #fff;
  border: 1px solid #ECEAF2;
  border-radius: 14px;
  overflow: hidden;
}
.dc-app .dc-cs-locator__map {
  aspect-ratio: 16/9;
  background: #DEE7F0;
  overflow: hidden;
}
.dc-app .dc-cs-locator__map img { width: 100%; height: 100%; object-fit: cover; }
.dc-app .dc-cs-locator__body { padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.dc-app .dc-cs-locator__store { font: 800 13px/1.2 var(--dc-font); color: var(--dc-purple-deep); }
.dc-app .dc-cs-locator__addr  { font: 400 11px/1.4 var(--dc-font); color: #6F6883; }
.dc-app .dc-cs-locator__dist  { font: 700 11px/1.4 var(--dc-font); color: var(--dc-purple); }

/* Without variant — gray, dull */
.dc-app .dc-cs-chat__messages[data-variant="without"] .dc-cs-bubble--user .dc-cs-bubble__content {
  background: #DCD9E3; color: #1A1A1A;
}
.dc-app .dc-cs-chat__messages[data-variant="without"] .dc-cs-bubble--ai.dc-cs-bubble--text .dc-cs-bubble__content {
  background: #F0EDF5; border-color: #E0DDE6;
}

/* ─── Without/With side-by-side ─────────────────────────────────── */
.dc-app .dc-cs-vs2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: flex-start;
}
.dc-app .dc-cs-vs2__pane {
  background: var(--dc-white);
  border-radius: var(--dc-radius-xl);
  padding: 36px;
  border: 1px solid var(--dc-border-faint);
  display: flex; flex-direction: column; gap: 20px;
  min-height: 580px;
  position: relative;
}
.dc-app .dc-cs-vs2__pane--without {
  background: linear-gradient(180deg, #F4F1ED 0%, #EDE9E0 100%);
  border-color: #DCD3C0;
}
.dc-app .dc-cs-vs2__pane--with {
  background: linear-gradient(180deg, var(--dc-white) 0%, var(--dc-surface) 100%);
  border-color: var(--dc-border);
  box-shadow: var(--dc-shadow-card);
}
.dc-app .dc-cs-vs2__label {
  display: inline-flex; align-items: center; gap: 8px;
  font: 800 11px/1 var(--dc-font); letter-spacing: 0.18em; text-transform: uppercase;
  padding: 8px 14px; border-radius: 999px; align-self: flex-start;
}
.dc-app .dc-cs-vs2__label--without { background: #E5DDD0; color: #6E5F3F; }
.dc-app .dc-cs-vs2__label--with    { background: var(--dc-purple); color: var(--dc-white); }
.dc-app .dc-cs-vs2__h {
  font: 800 26px/1.15 var(--dc-font); letter-spacing: -0.01em;
  color: var(--dc-purple-deep); margin: 0;
}
.dc-app .dc-cs-vs2__pane--without .dc-cs-vs2__h { color: #5C523F; }
.dc-app .dc-cs-vs2__stage { display: flex; justify-content: center; padding: 12px 0; }
.dc-app .dc-cs-vs2__with-coming-soon {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
}
.dc-app .dc-cs-vs2.is-revealed .dc-cs-vs2__with-coming-soon { opacity: 1; transform: translateX(0); }
@media (prefers-reduced-motion: reduce) { .dc-app .dc-cs-vs2__with-coming-soon { opacity: 1; transform: none; transition: none; } }

/* ─── Stat band ─────────────────────────────────────────────────── */
.dc-app .dc-cs-stat-band {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
  background: var(--dc-white);
  border: 1px solid var(--dc-border-faint);
  border-radius: var(--dc-radius-xl);
  padding: 48px;
  box-shadow: var(--dc-shadow-card);
}
.dc-app .dc-cs-stat-band__item { text-align: center; }
.dc-app .dc-cs-stat-band__num {
  font: 800 64px/1 var(--dc-font);
  letter-spacing: -0.02em;
  background-image: var(--dc-grad-hero);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.dc-app .dc-cs-stat-band__lab {
  font: 400 15px/1.5 var(--dc-font);
  color: var(--dc-fg-muted);
  max-width: 320px; margin: 12px auto 0;
}
.dc-app .dc-cs-stat-band__src {
  font: 600 11px/1.4 var(--dc-font);
  color: var(--dc-fg-muted);
  letter-spacing: 0.08em; text-transform: uppercase;
  margin-top: 12px; opacity: 0.6;
}

/* ─── Quote (V2: fixed mark position, no overlap) ────────────────── */
.dc-app .dc-cs-quote-v2 {
  max-width: 980px; margin: 0 auto;
  background: var(--dc-white);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-xl);
  box-shadow: var(--dc-shadow-card);
  padding: 56px 56px 48px;
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 24px;
  align-items: start;
}
.dc-app .dc-cs-quote-v2__mark {
  font: 800 100px/0.8 Georgia, serif;
  color: var(--dc-purple-light);
  user-select: none;
  letter-spacing: -0.05em;
}
.dc-app .dc-cs-quote-v2__body { display: flex; flex-direction: column; gap: 16px; }
.dc-app .dc-cs-quote-v2__text {
  font: 400 22px/1.55 var(--dc-font);
  color: var(--dc-purple-deep);
  margin: 0;
}
.dc-app .dc-cs-quote-v2__cite {
  display: flex; align-items: center; gap: 14px;
  font: 700 14px/1.5 var(--dc-font);
  color: var(--dc-purple);
}
.dc-app .dc-cs-quote-v2__cite img { display: block; max-height: 24px; width: auto; }

/* Quote carousel — multiple quotes, one visible at a time */
.dc-app .dc-cs-quote-carousel { position: relative; }
.dc-app .dc-cs-quote-carousel__slide { display: none; }
.dc-app .dc-cs-quote-carousel__slide.is-active { display: block; }
.dc-app .dc-cs-quote-carousel__nav {
  display: flex; justify-content: center; gap: 8px;
  margin-top: 32px;
}
.dc-app .dc-cs-quote-carousel__dot {
  width: 28px; height: 4px; border-radius: 2px;
  background: var(--dc-border); border: 0; cursor: pointer;
  transition: background .25s ease, width .25s ease;
}
.dc-app .dc-cs-quote-carousel__dot.is-active { background: var(--dc-purple); width: 44px; }

/* ─── Dark band ─────────────────────────────────────────────────── */
.dc-app .dc-cs-dark-band {
  text-align: center; max-width: 820px; margin: 0 auto;
  position: relative; z-index: 1;
}
.dc-app .dc-cs-dark-band h3 {
  font: 800 56px/1.06 var(--dc-font);
  letter-spacing: -0.022em;
  color: var(--dc-white);
  margin: 18px 0 18px;
}
.dc-app .dc-cs-dark-band p {
  font: 400 18px/1.6 var(--dc-font);
  color: rgba(255,255,255,0.78);
  margin: 0 auto 28px;
  max-width: 640px;
}

/* ─── Detail page hero ─────────────────────────────────────────── */
.dc-app .dc-cs-detail-hero {
  position: relative; overflow: hidden;
  padding: 100px 0 80px;
  background: linear-gradient(180deg, #fff 0%, var(--dc-surface) 100%);
}
.dc-app .dc-cs-detail-hero > .dc-container { position: relative; z-index: 2; }
.dc-app .dc-cs-detail-hero__inner {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: 64px; align-items: center;
}
.dc-app .dc-cs-detail-hero__copy { display: flex; flex-direction: column; gap: 20px; }
.dc-app .dc-cs-detail-hero h1 {
  font: 800 56px/1.04 var(--dc-font);
  letter-spacing: -0.025em;
  color: var(--dc-purple-deep);
  margin: 8px 0 0;
}
.dc-app .dc-cs-detail-hero__intro {
  font: 400 19px/1.55 var(--dc-font);
  color: var(--dc-fg-muted);
}
.dc-app .dc-cs-detail-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.dc-app .dc-cs-detail-hero__logo { margin: 0 0 8px; }
.dc-app .dc-cs-detail-hero__logo img { display: block; max-height: 44px; width: auto; }
.dc-app .dc-cs-detail-hero__logo--double { display: flex; gap: 18px; align-items: center; }
.dc-app .dc-cs-detail-hero__logo--double img { max-height: 40px; }
.dc-app .dc-cs-detail-hero__logo-sep { color: var(--dc-fg-muted); }

/* Headline stat row */
.dc-app .dc-cs-headline-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 18px;
}
.dc-app .dc-cs-headline-stats--3 { grid-template-columns: repeat(3, 1fr); }
.dc-app .dc-cs-headline-stat { display: flex; flex-direction: column; gap: 4px; }
.dc-app .dc-cs-headline-stat__num {
  font: 800 36px/1 var(--dc-font);
  letter-spacing: -0.015em;
  background-image: var(--dc-grad-hero);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.dc-app .dc-cs-headline-stat__lab { font: 400 13px/1.4 var(--dc-font); color: var(--dc-fg-muted); }

/* ─── Body prose (case study long-form) ─────────────────────────── */
.dc-app .dc-cs-prose { max-width: 760px; margin: 0 auto; }
.dc-app .dc-cs-prose h2 {
  font: 800 36px/1.1 var(--dc-font);
  letter-spacing: -0.015em;
  color: var(--dc-purple);
  margin: 56px 0 18px;
}
.dc-app .dc-cs-prose h3 { font: 800 22px/1.2 var(--dc-font); color: var(--dc-purple-deep); margin: 32px 0 10px; }
.dc-app .dc-cs-prose p  { font: 400 17px/1.7 var(--dc-font); color: var(--dc-purple-deep); margin: 0 0 18px; }
.dc-app .dc-cs-prose ul { margin: 0 0 24px; padding: 0; list-style: none; }
.dc-app .dc-cs-prose ul li {
  font: 400 16px/1.65 var(--dc-font); color: var(--dc-purple-deep);
  padding-left: 26px; position: relative; margin-bottom: 10px;
}
.dc-app .dc-cs-prose ul li::before {
  content: ""; position: absolute; left: 4px; top: 11px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--dc-purple);
}
.dc-app .dc-cs-prose strong { color: var(--dc-purple); font-weight: 800; }

/* Channels / Triggers grid */
.dc-app .dc-cs-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.dc-app .dc-cs-grid-3__col { background: var(--dc-white); border: 1px solid var(--dc-border-faint); border-radius: var(--dc-radius-md); padding: 28px; }
.dc-app .dc-cs-grid-3__h { font: 800 12px/1 var(--dc-font); letter-spacing: 0.18em; text-transform: uppercase; color: var(--dc-purple); margin: 0 0 14px; }
.dc-app .dc-cs-grid-3__col ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.dc-app .dc-cs-grid-3__col li { font: 400 14px/1.5 var(--dc-font); color: var(--dc-purple-deep); }

/* Video embed (Diageo) */
.dc-app .dc-cs-video {
  position: relative; max-width: 980px; margin: 0 auto;
  border-radius: var(--dc-radius-xl); overflow: hidden; background: #000;
  border: 1px solid var(--dc-border-faint); box-shadow: var(--dc-shadow-card);
  aspect-ratio: 16 / 9;
}
.dc-app .dc-cs-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Capabilities row (full grid, distinct from feature pills) */
.dc-app .dc-cs-caps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.dc-app .dc-cs-cap {
  background: var(--dc-white); border: 1px solid var(--dc-border-faint);
  border-radius: var(--dc-radius-md); padding: 22px;
  display: flex; flex-direction: column; gap: 8px;
}
.dc-app .dc-cs-cap__title { font: 800 16px/1.25 var(--dc-font); color: var(--dc-purple-deep); }
.dc-app .dc-cs-cap__body  { font: 400 14px/1.55 var(--dc-font); color: var(--dc-fg-muted); }

/* Customer logo strip */
.dc-app .dc-cs-customer-logo { display: block; max-height: 36px; width: auto; }

/* ─── Build-steps (for case-study "The build" section) ─────────── */
.dc-app .dc-cs-buildsteps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.dc-app .dc-cs-buildstep {
  background: var(--dc-white);
  border: 1px solid var(--dc-border-faint);
  border-radius: var(--dc-radius-md);
  padding: 28px 24px;
  display: flex; flex-direction: column; gap: 10px;
}
.dc-app .dc-cs-buildstep__num {
  font: 800 14px/1 var(--dc-font);
  color: var(--dc-purple);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.dc-app .dc-cs-buildstep__h { font: 800 18px/1.25 var(--dc-font); color: var(--dc-purple-deep); margin: 0; }
.dc-app .dc-cs-buildstep__b { font: 400 14px/1.5 var(--dc-font); color: var(--dc-fg-muted); margin: 0; }

/* ─── Commerce Marketing — case-study showcase rows ─────────────── */
.dc-app .dc-cs-showcase { display: flex; flex-direction: column; gap: 96px; }
.dc-app .dc-cs-showcase__row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
  position: relative;
}
.dc-app .dc-cs-showcase__row:nth-child(even) { direction: rtl; }
.dc-app .dc-cs-showcase__row:nth-child(even) > * { direction: ltr; }
.dc-app .dc-cs-showcase__copy { display: flex; flex-direction: column; gap: 18px; }
.dc-app .dc-cs-showcase__logo img { display: block; max-height: 40px; width: auto; }
.dc-app .dc-cs-showcase__logo--double { display: flex; gap: 18px; align-items: center; }
.dc-app .dc-cs-showcase__h { font: 800 40px/1.08 var(--dc-font); letter-spacing: -0.02em; color: var(--dc-purple-deep); margin: 0; }
.dc-app .dc-cs-showcase__p { font: 400 17px/1.65 var(--dc-font); color: var(--dc-fg-muted); margin: 0; }
.dc-app .dc-cs-showcase__cta { margin-top: 4px; }
.dc-app .dc-cs-showcase__visual {
  aspect-ratio: 4/3; border-radius: var(--dc-radius-xl);
  background: linear-gradient(160deg, var(--dc-surface) 0%, #fff 100%);
  border: 1px solid var(--dc-border-faint);
  box-shadow: var(--dc-shadow-card);
  padding: 40px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.dc-app .dc-cs-showcase__visual-logo img { max-height: 56px; width: auto; }
.dc-app .dc-cs-showcase__visual-logo--double { display: flex; gap: 22px; align-items: center; }
.dc-app .dc-cs-showcase__stat-big {
  font: 800 80px/1 var(--dc-font); letter-spacing: -0.025em;
  background-image: var(--dc-grad-hero);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-top: 12px;
}
.dc-app .dc-cs-showcase__stat-lab {
  font: 400 14px/1.5 var(--dc-font); color: var(--dc-fg-muted); max-width: 280px;
}
.dc-app .dc-cs-showcase__stat-row {
  display: flex; gap: 28px; flex-wrap: wrap;
  margin-top: 8px;
}
.dc-app .dc-cs-showcase__stat-item { display: flex; flex-direction: column; gap: 4px; }
.dc-app .dc-cs-showcase__stat-item-num {
  font: 800 28px/1 var(--dc-font); letter-spacing: -0.01em;
  background-image: var(--dc-grad-hero);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.dc-app .dc-cs-showcase__stat-item-lab { font: 400 12px/1.4 var(--dc-font); color: var(--dc-fg-muted); max-width: 180px; }

/* Anonymized scroll row (carries over from prior styles) */
.dc-app .dc-cs-scroll { position: relative; margin: 0 -60px; }
.dc-app .dc-cs-scroll__track {
  display: flex; gap: 20px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 60px;
  padding: 16px 60px 32px;
  scrollbar-width: thin;
  scrollbar-color: var(--dc-purple-light) transparent;
}
.dc-app .dc-cs-scroll__track::-webkit-scrollbar { height: 8px; }
.dc-app .dc-cs-scroll__track::-webkit-scrollbar-thumb { background: var(--dc-purple-light); border-radius: 4px; }
.dc-app .dc-cs-card-anon {
  flex: 0 0 360px; scroll-snap-align: start;
  background: var(--dc-white);
  border: 1px solid var(--dc-border-faint);
  border-radius: var(--dc-radius-lg);
  padding: 32px;
  box-shadow: var(--dc-shadow-card);
  display: flex; flex-direction: column; gap: 12px;
  text-decoration: none; color: inherit;
  transition: box-shadow .25s ease, transform .25s ease;
}
.dc-app .dc-cs-card-anon:hover { box-shadow: var(--dc-shadow-card-hi); transform: translateY(-3px); }
.dc-app .dc-cs-card-anon__h { font: 800 20px/1.2 var(--dc-font); letter-spacing: -0.01em; color: var(--dc-purple-deep); margin: 0; }
.dc-app .dc-cs-card-anon__big {
  font: 800 44px/1 var(--dc-font); letter-spacing: -0.02em;
  background-image: var(--dc-grad-hero);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin: 6px 0;
}
.dc-app .dc-cs-card-anon__sub { font: 400 14px/1.55 var(--dc-font); color: var(--dc-fg-muted); margin: 0; flex: 1; }
.dc-app .dc-cs-card-anon__cta { margin-top: auto; padding-top: 6px; }
.dc-app .dc-cs-scroll__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--dc-white); border: 1px solid var(--dc-border);
  color: var(--dc-purple);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 5;
  box-shadow: 0 8px 18px -8px rgba(86,18,189,0.35);
}
.dc-app .dc-cs-scroll__nav[disabled] { opacity: 0; pointer-events: none; }
.dc-app .dc-cs-scroll__nav--prev { left: 18px; }
.dc-app .dc-cs-scroll__nav--next { right: 18px; }

/* ─── MOBILE ─────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .dc-app .dc-container { padding: 0 20px; }
  .dc-app .dc-cs-hero { padding: 60px 0 50px; }
  .dc-app .dc-cs-hero h1 { font-size: 40px; }
  .dc-app .dc-cs-hero__sub { font-size: 16px; }
  .dc-app .dc-cs-tabs { width: 100%; max-width: 360px; }
  .dc-app .dc-cs-tabs .dc-cs-tab { flex: 1; padding: 12px 18px; font-size: 14px; }

  .dc-app .dc-cs-section { padding: 56px 0; }
  .dc-app .dc-cs-section__title { font-size: 32px; }
  .dc-app .dc-cs-section__sub { font-size: 16px; }
  .dc-app .dc-cs-section__head { margin-bottom: 32px; }

  .dc-app .dc-cs-cycler { padding: 28px 22px; }
  .dc-app .dc-cs-cycler__grid,
  .dc-app .dc-cs-cycler__slide.is-active { grid-template-columns: 1fr; gap: 28px; }
  .dc-app .dc-cs-cycler__head { font-size: 28px; }

  .dc-app .dc-cs-strip-stage { padding: 24px; min-height: 0; }
  .dc-app .dc-cs-strip-feature.is-active { grid-template-columns: 1fr; gap: 24px; }
  .dc-app .dc-cs-strip-feature__h { font-size: 26px; }

  .dc-app .dc-cs-vs2 { grid-template-columns: 1fr; gap: 20px; }
  .dc-app .dc-cs-vs2__pane { min-height: 0; padding: 22px; }
  .dc-app .dc-cs-vs2__h { font-size: 22px; }
  .dc-app .dc-cs-vs2__with-coming-soon { transform: translateY(40px) !important; }
  .dc-app .dc-cs-vs2.is-revealed .dc-cs-vs2__with-coming-soon { transform: translateY(0) !important; }

  .dc-app .dc-cs-detail-hero { padding: 60px 0 40px; }
  .dc-app .dc-cs-detail-hero__inner { grid-template-columns: 1fr; gap: 32px; }
  .dc-app .dc-cs-detail-hero h1 { font-size: 32px; }
  .dc-app .dc-cs-detail-hero__intro { font-size: 16px; }

  .dc-app .dc-cs-headline-stats,
  .dc-app .dc-cs-headline-stats--3 { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .dc-app .dc-cs-headline-stat__num { font-size: 28px; }

  .dc-app .dc-cs-stat-band { grid-template-columns: 1fr; padding: 28px; gap: 22px; }
  .dc-app .dc-cs-stat-band__num { font-size: 44px; }

  .dc-app .dc-cs-quote-v2 { padding: 28px 22px; grid-template-columns: 1fr; gap: 8px; }
  .dc-app .dc-cs-quote-v2__mark { font-size: 64px; }
  .dc-app .dc-cs-quote-v2__text { font-size: 18px; }

  .dc-app .dc-cs-dark-band h3 { font-size: 32px; }
  .dc-app .dc-cs-dark-band p { font-size: 16px; }

  .dc-app .dc-cs-showcase { gap: 64px; }
  .dc-app .dc-cs-showcase__row,
  .dc-app .dc-cs-showcase__row:nth-child(even) { grid-template-columns: 1fr; gap: 24px; direction: ltr; }
  .dc-app .dc-cs-showcase__h { font-size: 28px; }
  .dc-app .dc-cs-showcase__stat-big { font-size: 56px; }
  .dc-app .dc-cs-showcase__visual { padding: 28px; }

  .dc-app .dc-cs-caps,
  .dc-app .dc-cs-grid-3,
  .dc-app .dc-cs-buildsteps { grid-template-columns: 1fr; }

  .dc-app .dc-cs-prose h2 { font-size: 26px; margin-top: 36px; }
  .dc-app .dc-cs-prose h3 { font-size: 18px; }
  .dc-app .dc-cs-prose p { font-size: 16px; }

  .dc-app .dc-cs-scroll { margin: 0 -20px; }
  .dc-app .dc-cs-scroll__track { padding: 12px 20px 24px; scroll-padding: 20px; }
  .dc-app .dc-cs-card-anon { flex-basis: 280px; padding: 22px; }
  .dc-app .dc-cs-scroll__nav { display: none; }

  .dc-app .dc-cta { font-size: 15px; padding: 14px 22px; }
  .dc-app .dc-cta--lg { font-size: 16px; padding: 16px 24px; }

  .dc-app .dc-cs-phone { max-width: 280px; }
  .dc-app .dc-cs-desktop { max-width: 100%; }
}

@media (max-width: 480px) {
  .dc-app .dc-container { padding: 0 16px; }
  .dc-app .dc-cs-hero h1 { font-size: 34px; }
  .dc-app .dc-cs-section__title { font-size: 28px; }
  .dc-app .dc-cs-headline-stats,
  .dc-app .dc-cs-headline-stats--3 { grid-template-columns: 1fr; }
  .dc-app .dc-cs-stat-band__num { font-size: 38px; }
  .dc-app .dc-cs-card-anon { flex-basis: 240px; }
}

/* ════════════════════════════════════════════════════════════════════
   V2 — Jeton/Lucien-DNA detail page (AlcoBev)
   Stacked, scroll-pinned, full-bleed sections.
   ════════════════════════════════════════════════════════════════════ */

/* ─── V2 HERO ─── */
.dc-app .dc-cs-v2-hero {
  position: relative; overflow: hidden;
  padding: 160px 0 140px;
  background: #fff;
}
.dc-app .dc-cs-v2-hero > .dc-container { position: relative; z-index: 3; }
.dc-app .dc-cs-v2-hero__blur {
  position: absolute; z-index: 1; pointer-events: none;
  width: 1400px; max-width: 110vw;
  opacity: 0.85;
  filter: saturate(1.4) hue-rotate(-10deg);
}
.dc-app .dc-cs-v2-hero__blur--a { top: -460px; left: -360px; animation: dc-cs-drift-a 18s ease-in-out infinite alternate; }
.dc-app .dc-cs-v2-hero__blur--b { bottom: -520px; right: -340px; transform: scaleX(-1); animation: dc-cs-drift-b 22s ease-in-out infinite alternate; opacity: 0.7; }

.dc-app .dc-cs-v2-hero__inner { max-width: 1100px; margin: 0 auto; text-align: center; }
.dc-app .dc-cs-v2-hero__h {
  font: 800 96px/1.02 var(--dc-font);
  letter-spacing: -0.032em;
  color: var(--dc-purple-deep);
  margin: 28px 0 26px;
}
.dc-app .dc-cs-v2-hero__p {
  font: 400 21px/1.55 var(--dc-font);
  color: var(--dc-fg-muted);
  max-width: 820px; margin: 0 auto 36px;
}
.dc-app .dc-cs-v2-hero__cta { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ─── V2 PROMPT TICKER ─── */
.dc-app .dc-cs-v2-prompt {
  position: relative; padding: 50px 0 70px;
  background: #fff;
}
.dc-app .dc-cs-v2-prompt__inner {
  max-width: 1100px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center;
  gap: 14px;
  text-align: center;
}
.dc-app .dc-cs-v2-prompt__lbl {
  display: block;
  font: 800 12px/1 var(--dc-font);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--dc-purple-deep);
}
/* Flatter, terminal-style typing line — not a button. */
.dc-app .dc-cs-v2-prompt__bar {
  display: inline-flex; align-items: baseline; gap: 14px;
  background: transparent;
  color: var(--dc-purple-deep);
  padding: 0;
  font: 800 44px/1.1 var(--dc-font);
  letter-spacing: -0.02em;
  box-shadow: none;
  border-bottom: 2px dashed rgba(86,18,189,0.18);
  padding-bottom: 8px;
}
.dc-app .dc-cs-v2-prompt__caret { color: var(--dc-purple); font-weight: 800; }
.dc-app .dc-cs-v2-prompt__text { color: var(--dc-purple-deep); }
.dc-app .dc-cs-v2-prompt__text span {
  background-image: var(--dc-grad-hero);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.dc-app .dc-cs-v2-prompt__send { display: none; }

/* ─── V2 BAND (Without / With shared) ─── */
.dc-app .dc-cs-v2-band {
  position: relative; overflow: hidden;
  padding: 140px 0 160px;
}
/* Without — flat white. No gradient washes. */
.dc-app .dc-cs-v2-band--without {
  background: #fff;
  color: var(--dc-purple-deep);
}
/* With — flat brand SVG underneath. White veneer above fades on flip
   (Jeton-style color flip), then the brand dark takes over. */
.dc-app .dc-cs-v2-band--with {
  background: #fff;
  color: #fff;
}
.dc-app .dc-cs-v2-band__brand-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  z-index: 0; pointer-events: none;
}
.dc-app .dc-cs-v2-band--with::before {
  content: ""; position: absolute; inset: 0;
  background: #fff;
  z-index: 1; pointer-events: none;
  opacity: 1;
  transition: opacity 0.9s ease;
}
.dc-app .dc-cs-v2-band--with.has-flipped::before { opacity: 0; }
.dc-app .dc-cs-v2-band--with .dc-cs-v2-band__copy { opacity: 0; transition: opacity .9s ease .15s; }
.dc-app .dc-cs-v2-band--with.has-flipped .dc-cs-v2-band__copy { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .dc-app .dc-cs-v2-band--with::before { opacity: 0; }
  .dc-app .dc-cs-v2-band--with .dc-cs-v2-band__copy { opacity: 1; }
}
.dc-app .dc-cs-v2-band__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px;
  align-items: start; position: relative; z-index: 2;
}
.dc-app .dc-cs-v2-band__grid--flip .dc-cs-v2-band__stage { order: 1; }
.dc-app .dc-cs-v2-band__grid--flip .dc-cs-v2-band__copy  { order: 2; }
.dc-app .dc-cs-v2-band__sticky { position: sticky; top: 80px; }
.dc-app .dc-cs-v2-band__sticky-stage {
  position: sticky; top: 80px;
  display: flex; justify-content: center;
}

.dc-app .dc-cs-v2-tag {
  display: inline-flex; align-items: center;
  font: 800 11px/1 var(--dc-font);
  letter-spacing: 0.22em; text-transform: uppercase;
  padding: 8px 14px; border-radius: 999px;
}
.dc-app .dc-cs-v2-tag--without { background: rgba(215,189,255,0.35); color: var(--dc-purple-deep); }
.dc-app .dc-cs-v2-tag--with { background: rgba(133,236,255,0.18); color: #85ECFF; }

.dc-app .dc-cs-v2-band__h {
  font: 800 76px/1.02 var(--dc-font);
  letter-spacing: -0.028em;
  color: var(--dc-purple-deep);
  margin: 22px 0 22px;
}
.dc-app .dc-cs-v2-band__h--light { color: #fff; }
.dc-app .dc-cs-v2-band__p {
  font: 400 19px/1.55 var(--dc-font);
  color: var(--dc-fg-muted);
  margin: 0 0 36px; max-width: 480px;
}
.dc-app .dc-cs-v2-band__p--light { color: rgba(255,255,255,0.82); }

.dc-app .dc-cs-v2-band__pivot {
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
  margin: -8px 0 36px;
  max-width: 480px;
}
.dc-app .dc-cs-v2-band__pivot-line {
  font: 700 17px/1.4 var(--dc-font);
  color: var(--dc-purple-deep);
  letter-spacing: -0.01em;
}
@media (max-width: 480px) {
  .dc-app .dc-cs-v2-band__pivot-line { font-size: 15px; }
}

.dc-app .dc-cs-v2-callouts { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 22px; }
.dc-app .dc-cs-v2-callout {
  display: grid; grid-template-columns: 36px 1fr; gap: 14px;
  align-items: start;
  opacity: 0; transform: translateY(12px);
  transition: opacity .5s ease, transform .5s ease;
}
.dc-app .dc-cs-v2-callout.is-shown { opacity: 1; transform: translateY(0); }
.dc-app .dc-cs-v2-callout__mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: rgba(86,18,189,0.06);
  border-radius: 10px;
}
.dc-app .dc-cs-v2-callouts--light .dc-cs-v2-callout__mark { background: rgba(133,236,255,0.10); }
.dc-app .dc-cs-v2-callout__h {
  font: 800 18px/1.3 var(--dc-font);
  letter-spacing: -0.01em;
  color: inherit;
  margin-bottom: 4px;
}
.dc-app .dc-cs-v2-callout__b {
  font: 400 15px/1.55 var(--dc-font);
  color: var(--dc-fg-muted);
}
.dc-app .dc-cs-v2-callouts--light .dc-cs-v2-callout__b { color: rgba(255,255,255,0.78); }

/* ─── V2 TRANSITION ─── */
.dc-app .dc-cs-v2-transition {
  position: relative; overflow: hidden;
  padding: 140px 0 180px;
  background: linear-gradient(110deg, #67E1F7 0%, #5612BD 35%, #9250F2 70%, #67E1F7 100%);
  background-size: 200% 100%;
  animation: dc-cs-v2-grad-pan 12s ease-in-out infinite alternate;
}
/* Flat — no edge stripes. The animated brand gradient stands alone. */
.dc-app .dc-cs-v2-transition__blur { position: absolute; top: -200px; right: -200px; width: 900px; opacity: 0.4; mix-blend-mode: screen; pointer-events: none; }
.dc-app .dc-cs-v2-transition__inner { text-align: center; position: relative; z-index: 2; }
.dc-app .dc-cs-v2-transition__lbl {
  display: inline-block;
  font: 800 13px/1 var(--dc-font);
  letter-spacing: 0.24em; text-transform: uppercase;
  color: #fff;
  margin-bottom: 18px;
  opacity: 0.85;
}
.dc-app .dc-cs-v2-transition__h {
  font: 800 88px/1.02 var(--dc-font);
  letter-spacing: -0.03em;
  color: #fff;
  max-width: 1100px; margin: 0 auto;
}
.dc-app .dc-cs-v2-transition__h .dc-grad-word {
  background: linear-gradient(110deg, #fff 0%, #FFE6FF 50%, #fff 100%);
  background-clip: text; -webkit-background-clip: text; color: transparent;
}
@keyframes dc-cs-v2-grad-pan {
  0%   { background-position:   0% 50%; }
  100% { background-position: 100% 50%; }
}

/* ─── V2 FEATURE PILLS section ─── */
.dc-app .dc-cs-v2-pills {
  padding: 56px 0;
  background: var(--dc-white);
  border-top: 1px solid var(--dc-border-faint);
  border-bottom: 1px solid var(--dc-border-faint);
}

/* ─── V2 PHONE FRAME (realistic iPhone) ─── */
.dc-app .dc-cs-phone--v2 {
  position: relative;
  width: 340px; height: 700px;
  background: linear-gradient(160deg, #1c1c1e 0%, #0b0b0d 100%);
  border-radius: 52px;
  padding: 12px;
  box-shadow:
    0 0 0 2px #2c2c2e inset,
    0 0 0 4px #000 inset,
    0 60px 120px -40px rgba(14, 1, 37, 0.55),
    0 28px 60px -28px rgba(86, 18, 189, 0.35);
}
.dc-app .dc-cs-phone__screen {
  position: relative;
  width: 100%; height: 100%;
  background: #fff;
  border-radius: 40px;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.dc-app .dc-cs-phone__status {
  position: relative;
  height: 44px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px;
  font: 700 14px/1 var(--dc-font);
  color: var(--dc-purple-deep);
  flex-shrink: 0;
}
.dc-app .dc-cs-phone__time { font-weight: 700; }
.dc-app .dc-cs-phone__island {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  width: 110px; height: 32px;
  background: #000; border-radius: 18px;
}
.dc-app .dc-cs-phone__indicators { display: inline-flex; gap: 5px; align-items: center; }
.dc-app .dc-cs-phone__signal { width: 16px; height: 10px; background: var(--dc-purple-deep); clip-path: polygon(0 100%, 24% 100%, 24% 70%, 0 70%, 0 100%, 38% 100%, 38% 50%, 24% 50%, 62% 100%, 62% 30%, 38% 30%, 86% 100%, 86% 0, 62% 0, 100% 100%, 100% 100%); border-radius: 1px; }
.dc-app .dc-cs-phone__wifi   { width: 14px; height: 10px; background: var(--dc-purple-deep); border-radius: 2px; mask: radial-gradient(circle at 50% 100%, transparent 30%, #000 30%, #000 50%, transparent 50%, transparent 65%, #000 65%, #000 85%, transparent 85%); }
.dc-app .dc-cs-phone__battery {
  width: 26px; height: 12px; border: 1.5px solid var(--dc-purple-deep);
  border-radius: 3px; position: relative;
  background: linear-gradient(90deg, var(--dc-purple-deep) 70%, transparent 70%);
}
.dc-app .dc-cs-phone__battery::after {
  content: ""; position: absolute; right: -3px; top: 3px;
  width: 2px; height: 4px; background: var(--dc-purple-deep); border-radius: 0 1px 1px 0;
}
.dc-app .dc-cs-phone__home {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  width: 134px; height: 5px; background: #000; border-radius: 3px; opacity: 0.85;
}
.dc-app .dc-cs-phone__btn { position: absolute; background: #2c2c2e; border-radius: 2px; }
.dc-app .dc-cs-phone__btn--silent { top: 100px; left: -2px; width: 4px; height: 32px; }
.dc-app .dc-cs-phone__btn--vol-up { top: 150px; left: -2px; width: 4px; height: 52px; }
.dc-app .dc-cs-phone__btn--vol-dn { top: 215px; left: -2px; width: 4px; height: 52px; }
.dc-app .dc-cs-phone__btn--power  { top: 170px; right: -2px; width: 4px; height: 80px; }

.dc-app .dc-cs-phone--v2 .dc-cs-chat--mobile {
  flex: 1; overflow: hidden;
  background: linear-gradient(180deg, #fff 0%, #faf6ff 100%);
}

/* ─── V2 MACBOOK FRAME ───
   True MacBook Air aspect ratio: 16:10 screen inside a thin bezel.
   Outer width 760px, bezel inset; the screen itself is the 16:10 box. */
.dc-app .dc-cs-mac--v2 {
  position: relative;
  width: 760px; max-width: 100%;
  filter: drop-shadow(0 60px 120px rgba(14, 1, 37, 0.32));
}
.dc-app .dc-cs-mac__lid {
  background: #111114;
  border-radius: 14px 14px 4px 4px;
  padding: 10px;
  border: 1px solid #2c2c2e;
}
.dc-app .dc-cs-mac__bar {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 10px 10px;
}
.dc-app .dc-cs-mac__dot { width: 11px; height: 11px; border-radius: 50%; }
.dc-app .dc-cs-mac__dot--red { background: #ff5f57; }
.dc-app .dc-cs-mac__dot--yel { background: #febc2e; }
.dc-app .dc-cs-mac__dot--grn { background: #28c840; }
.dc-app .dc-cs-mac__url {
  margin-left: 12px;
  padding: 5px 14px;
  background: #2c2c2e;
  color: #aaa;
  border-radius: 6px;
  font: 600 12px/1 var(--dc-font);
}
/* 16:10 screen — height auto-calculated from width.
   For a 760px frame, inner usable width ≈ 740px → height ≈ 462px. */
.dc-app .dc-cs-mac__screen {
  background: #fff;
  border-radius: 2px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  display: flex; flex-direction: column;
}
.dc-app .dc-cs-mac--without .dc-cs-mac__screen { background: #fff; }
.dc-app .dc-cs-mac__base {
  height: 12px;
  background: linear-gradient(180deg, #d0d2d6 0%, #8e9197 100%);
  border-radius: 0 0 16px 16px;
  margin: 0 -28px;
  position: relative;
}
.dc-app .dc-cs-mac__notch {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 110px; height: 6px;
  background: #5a5d62; border-radius: 0 0 8px 8px;
}

/* ─── V2 chat tweaks (Without = bland) ─── */
.dc-app .dc-cs-chat__messages[data-variant="without"] .dc-cs-bubble--text .dc-cs-bubble__content {
  background: #fafafa;
  color: #2D2D2D;
  border-radius: 8px;
  border: 1px solid #ECECEC;
  font: 400 14px/1.55 var(--dc-font);
  padding: 16px 18px;
  max-width: 100%;
}
.dc-app .dc-cs-chat__messages[data-variant="without"] .dc-cs-bubble--user .dc-cs-bubble__content {
  background: var(--dc-purple-deep);
  color: #fff;
  border: 0;
  border-radius: 16px;
  padding: 10px 14px;
}

/* Plain product (no styling) — used only in "Without" */
.dc-app .dc-cs-plain-product {
  background: #fff;
  border: 1px solid #e8e3d4;
  border-radius: 6px;
  padding: 16px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  max-width: 220px;
}
.dc-app .dc-cs-plain-product__media {
  width: 100%; aspect-ratio: 1/1;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
}
.dc-app .dc-cs-plain-product__media img { max-width: 75%; max-height: 75%; object-fit: contain; }
.dc-app .dc-cs-plain-product__title {
  font: 400 13px/1.4 var(--dc-font);
  color: #4D4538;
}

/* Variant "without" desktop chat: tighten visuals */
.dc-app .dc-cs-mac--without .dc-cs-chat__header {
  border-bottom: 1px solid #e8e3d4;
  background: #fafaf7;
}

/* ─── V2 mobile responsive ─── */
@media (max-width: 1024px) {
  .dc-app .dc-cs-v2-band__grid { grid-template-columns: 1fr; gap: 40px; }
  .dc-app .dc-cs-v2-band__grid--flip .dc-cs-v2-band__stage { order: 2; }
  .dc-app .dc-cs-v2-band__grid--flip .dc-cs-v2-band__copy  { order: 1; }
  .dc-app .dc-cs-v2-band__sticky,
  .dc-app .dc-cs-v2-band__sticky-stage { position: relative; top: auto; }
  .dc-app .dc-cs-mac--v2 { width: 100%; }
  .dc-app .dc-cs-mac__screen { height: 380px; }
}
@media (max-width: 720px) {
  .dc-app .dc-cs-v2-hero { padding: 90px 0 70px; }
  .dc-app .dc-cs-v2-hero__h { font-size: 44px; }
  .dc-app .dc-cs-v2-hero__p { font-size: 16px; }
  .dc-app .dc-cs-v2-prompt { padding: 50px 0 60px; }
  .dc-app .dc-cs-v2-prompt__bar { font-size: 16px; padding: 14px 20px; }
  .dc-app .dc-cs-v2-band { padding: 80px 0 90px; }
  .dc-app .dc-cs-v2-band__h { font-size: 38px; }
  .dc-app .dc-cs-v2-band__p { font-size: 16px; }
  .dc-app .dc-cs-v2-transition { padding: 70px 0; }
  .dc-app .dc-cs-v2-transition__h { font-size: 38px; }
  .dc-app .dc-cs-phone--v2 { width: 290px; height: 600px; }
  .dc-app .dc-cs-mac__screen { height: 340px; }
}

/* ─── V2 rich bubbles (With chat) ─────────────────────────────────── */

/* Mobile chat container — let the scroll happen */
.dc-app .dc-cs-phone--v2 .dc-cs-chat--mobile {
  flex: 1;
  overflow-y: auto;
  scroll-behavior: smooth;
  background: linear-gradient(180deg, #fff 0%, #faf6ff 100%);
  padding: 0;
}
.dc-app .dc-cs-phone--v2 .dc-cs-chat--mobile::-webkit-scrollbar { width: 0; }
.dc-app .dc-cs-phone--v2 .dc-cs-chat__messages { padding: 12px 14px 20px; }

/* Bubble base spacing */
.dc-app .dc-cs-bubble--hero-image,
.dc-app .dc-cs-bubble--guardrail,
.dc-app .dc-cs-bubble--rich-carousel,
.dc-app .dc-cs-bubble--reviews,
.dc-app .dc-cs-bubble--cta-card,
.dc-app .dc-cs-bubble--spec { margin: 8px 0; }

/* Hero image card — used inline as the BrandStore's opening visual.
   Big, edge-to-edge, and dressed up so the visual contrast against the
   Without "wall of text" is unmissable. */
.dc-app .dc-cs-bubble--hero-image { width: 100%; }
.dc-app .dc-cs-hero-img {
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--dc-border-faint);
  box-shadow: 0 18px 42px -18px rgba(86,18,189,0.35);
  width: 100%;
}
.dc-app .dc-cs-hero-img__media {
  aspect-ratio: 4/5;
  background: linear-gradient(160deg, #FCE9F1 0%, #E8D8FF 100%);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.dc-app .dc-cs-hero-img__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dc-app .dc-cs-hero-img__body { padding: 16px 18px 18px; }
.dc-app .dc-cs-hero-img__title { font: 800 18px/1.2 var(--dc-font); color: var(--dc-purple-deep); }
.dc-app .dc-cs-hero-img__meta  { font: 600 12px/1.3 var(--dc-font); color: var(--dc-purple); margin-top: 4px; letter-spacing: 0.02em; }
.dc-app .dc-cs-hero-img__cap   { font: 400 13px/1.5 var(--dc-font); color: var(--dc-fg-muted); margin-top: 8px; }

/* Guardrail card */
.dc-app .dc-cs-guardrail {
  display: grid; grid-template-columns: 48px 1fr; gap: 12px;
  background: linear-gradient(135deg, #2A0768 0%, #4A1797 100%);
  color: #fff;
  border-radius: 14px;
  padding: 14px 16px;
}
.dc-app .dc-cs-guardrail__icon {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 12px;
  background: rgba(255,255,255,0.12);
  color: #85ECFF;
  font: 800 13px/1 var(--dc-font);
}
.dc-app .dc-cs-guardrail__label { font: 800 11px/1 var(--dc-font); letter-spacing: 0.16em; text-transform: uppercase; color: #85ECFF; }
.dc-app .dc-cs-guardrail__text  { font: 400 13px/1.5 var(--dc-font); color: rgba(255,255,255,0.92); margin-top: 4px; }

/* Rich product / recipe carousel */
.dc-app .dc-cs-rich-carousel {
  display: flex; gap: 10px;
  overflow-x: auto; padding: 2px 0 4px;
}
.dc-app .dc-cs-rich-carousel::-webkit-scrollbar { height: 0; }
.dc-app .dc-cs-rich-card {
  flex: 0 0 220px;
  background: #fff;
  border: 1px solid var(--dc-border-faint);
  border-radius: 14px;
  box-shadow: 0 10px 28px -16px rgba(86,18,189,0.25);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.dc-app .dc-cs-rich-card__media {
  aspect-ratio: 4/3;
  background: linear-gradient(160deg, #F9F5FF 0%, #fff 100%);
  display: flex; align-items: center; justify-content: center;
}
.dc-app .dc-cs-rich-card__media img { max-width: 72%; max-height: 80%; object-fit: contain; }
.dc-app .dc-cs-rich-card__body { padding: 12px 12px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.dc-app .dc-cs-rich-card__top  { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.dc-app .dc-cs-rich-card__title { font: 800 13px/1.25 var(--dc-font); color: var(--dc-purple-deep); }
.dc-app .dc-cs-rich-card__rating {
  font: 700 11px/1 var(--dc-font); color: var(--dc-purple);
  background: rgba(86,18,189,0.08);
  padding: 4px 8px; border-radius: 999px;
  white-space: nowrap;
}
.dc-app .dc-cs-rich-card__rating span { color: #FFB73D; margin-right: 2px; }
.dc-app .dc-cs-rich-card__desc { font: 400 12px/1.45 var(--dc-font); color: var(--dc-fg-muted); }
.dc-app .dc-cs-rich-card__ctas { display: flex; gap: 6px; margin-top: auto; align-items: stretch; }
.dc-app .dc-cs-rich-card__cta {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font: 700 11px/1.2 var(--dc-font);
  padding: 10px 10px;
  border-radius: 8px;
  letter-spacing: 0.01em;
  box-sizing: border-box;
  min-height: 32px;
  border: 1px solid transparent;
}
.dc-app .dc-cs-rich-card__cta--primary { background: var(--dc-cta-bg); color: var(--dc-cta-fg); }
.dc-app .dc-cs-rich-card__cta--ghost   { background: transparent; color: var(--dc-purple); border-color: rgba(86,18,189,0.18); }

/* Reviews block */
.dc-app .dc-cs-reviews {
  background: #fff;
  border: 1px solid var(--dc-border-faint);
  border-radius: 14px;
  padding: 12px 14px 14px;
}
.dc-app .dc-cs-reviews__hdr {
  display: flex; align-items: baseline; gap: 8px;
  padding-bottom: 8px; border-bottom: 1px solid var(--dc-border-faint);
  margin-bottom: 10px;
}
.dc-app .dc-cs-reviews__stars { color: #FFB73D; font-size: 14px; letter-spacing: 1px; }
.dc-app .dc-cs-reviews__num   { font: 800 14px/1 var(--dc-font); color: var(--dc-purple-deep); }
.dc-app .dc-cs-reviews__count { font: 600 11px/1 var(--dc-font); color: var(--dc-fg-muted); }
.dc-app .dc-cs-reviews__list  { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.dc-app .dc-cs-reviews__item  { display: flex; flex-direction: column; gap: 2px; }
.dc-app .dc-cs-reviews__author { font: 700 11px/1 var(--dc-font); color: var(--dc-purple); }
.dc-app .dc-cs-reviews__quote  { font: 400 12px/1.45 var(--dc-font); color: var(--dc-fg-muted); font-style: italic; }

/* Spec card (ingredients / nutrition) */
.dc-app .dc-cs-spec {
  background: #fff;
  border: 1px solid var(--dc-border-faint);
  border-radius: 14px;
  padding: 12px 14px 14px;
}
.dc-app .dc-cs-spec__title { font: 800 12px/1 var(--dc-font); color: var(--dc-purple); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 10px; }
.dc-app .dc-cs-spec__list  { list-style: none; padding: 0; margin: 0; }
.dc-app .dc-cs-spec__row   {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 7px 0;
  border-top: 1px dashed var(--dc-border-faint);
  font: 400 12px/1.4 var(--dc-font);
}
.dc-app .dc-cs-spec__row:first-child { border-top: 0; padding-top: 0; }
.dc-app .dc-cs-spec__k { color: var(--dc-fg-muted); font-weight: 600; }
.dc-app .dc-cs-spec__v { color: var(--dc-purple-deep); font-weight: 700; text-align: right; }

/* Final CTA card */
.dc-app .dc-cs-cta-card {
  background: linear-gradient(135deg, var(--dc-purple-deep) 0%, #4A1797 100%);
  color: #fff;
  border-radius: 16px;
  padding: 14px;
  display: grid; grid-template-columns: 80px 1fr; gap: 12px;
  align-items: center;
}
.dc-app .dc-cs-cta-card__media {
  background: rgba(255,255,255,0.08);
  border-radius: 10px;
  aspect-ratio: 1/1;
  display: flex; align-items: center; justify-content: center;
}
.dc-app .dc-cs-cta-card__media img { max-width: 80%; max-height: 80%; object-fit: contain; }
.dc-app .dc-cs-cta-card__title { font: 800 14px/1.25 var(--dc-font); color: #fff; }
.dc-app .dc-cs-cta-card__sub   { font: 400 11px/1.4 var(--dc-font); color: rgba(255,255,255,0.78); margin: 4px 0 10px; }
.dc-app .dc-cs-cta-card__ctas  { display: flex; gap: 6px; }
.dc-app .dc-cs-cta-card__cta {
  flex: 1; text-align: center;
  font: 700 11px/1 var(--dc-font);
  padding: 9px 8px;
  border-radius: 8px;
}
.dc-app .dc-cs-cta-card__cta--primary { background: var(--dc-cta-bg); color: var(--dc-cta-fg); }
.dc-app .dc-cs-cta-card__cta--ghost   { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.30); }

/* Plain product (override stronger) */
.dc-app .dc-cs-plain-product {
  background: #fff;
  border: 1px solid #ECECEC;
  border-radius: 8px;
  padding: 16px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  max-width: 240px;
}
.dc-app .dc-cs-plain-product__media {
  width: 100%; aspect-ratio: 1/1;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
}
.dc-app .dc-cs-plain-product__media img { max-width: 80%; max-height: 80%; object-fit: contain; }
.dc-app .dc-cs-plain-product__title { font: 400 13px/1.4 var(--dc-font); color: #2D2D2D; }

/* Bigger MacBook + tall phone — give chat room */
@media (min-width: 1025px) {
  .dc-app .dc-cs-mac--v2 { width: 760px; }
  .dc-app .dc-cs-mac__screen { height: 560px; }
  .dc-app .dc-cs-phone--v2 { width: 360px; height: 740px; }
}

/* ─── V2 FINAL CTA — flat brand dark, no gradient stripes ─────────── */
.dc-app .dc-cs-v2-final {
  position: relative; overflow: hidden;
  padding: 140px 0 160px;
  background: #1B0345; /* fallback under the brand bg */
  color: #fff;
}
.dc-app .dc-cs-v2-final__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  z-index: 0; pointer-events: none;
}
.dc-app .dc-cs-v2-final > .dc-container { position: relative; z-index: 2; }
.dc-app .dc-cs-v2-final__inner { text-align: center; max-width: 880px; margin: 0 auto; }
.dc-app .dc-cs-v2-final__h {
  font: 800 64px/1.04 var(--dc-font);
  letter-spacing: -0.025em;
  color: #fff;
  margin: 16px 0 18px;
}
.dc-app .dc-cs-v2-final__p {
  font: 400 19px/1.6 var(--dc-font);
  color: rgba(255,255,255,0.85);
  max-width: 720px; margin: 0 auto 32px;
}

/* ─── FIX chat scroller cutoff ─────────────────────────────────────
   The JS scrolls `.dc-cs-chat__messages` but parents were scrolling
   instead. Make the messages container the actual scroll container
   in both v2 shells; remove overflow from parents. */
.dc-app .dc-cs-phone--v2 .dc-cs-phone__screen { overflow: hidden; }
.dc-app .dc-cs-phone--v2 .dc-cs-chat--mobile {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: linear-gradient(180deg, #fff 0%, #faf6ff 100%);
  display: flex; flex-direction: column;
}
.dc-app .dc-cs-phone--v2 .dc-cs-chat__messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scroll-behavior: smooth;
  padding: 18px 16px 28px;
  scroll-padding-top: 22px;
}
.dc-app .dc-cs-phone--v2 .dc-cs-chat__messages > .dc-cs-bubble-wrap:first-child { margin-top: 4px; }
.dc-app .dc-cs-phone--v2 .dc-cs-chat__messages::-webkit-scrollbar { width: 0; }

.dc-app .dc-cs-mac--v2 .dc-cs-mac__screen {
  overflow: hidden;
  display: flex; flex-direction: column;
}
.dc-app .dc-cs-mac--v2 .dc-cs-chat--desktop {
  flex: 1;
  min-height: 0;
  display: flex; flex-direction: column;
  background: #fff;
}
.dc-app .dc-cs-mac--v2 .dc-cs-chat__messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scroll-behavior: smooth;
  padding: 24px 28px 32px;
  scroll-padding-top: 24px;
}
.dc-app .dc-cs-mac--v2 .dc-cs-chat__messages > .dc-cs-bubble-wrap:first-child { margin-top: 4px; }
.dc-app .dc-cs-mac--v2 .dc-cs-chat__messages::-webkit-scrollbar { width: 0; }

/* Chat header should not shrink */
.dc-app .dc-cs-phone--v2 .dc-cs-chat__header,
.dc-app .dc-cs-mac--v2 .dc-cs-chat__header { flex-shrink: 0; }

/* ─── V2 BRAND WORLD — Typewriter prompt + image swap loop.
   A single search-style prompt types out, the matching Vanquish
   image fades in at center, mini chat rectangles surface around
   it, then the prompt backspaces and the next entry cycles in.
   Pure JS typewriter (initV2World in animations.js). */
.dc-app .dc-cs-v2-world {
  position: relative;
  padding: 120px 0 0;
  background: #fff;
  overflow: hidden;
}
.dc-app .dc-cs-v2-world__head { text-align: center; max-width: 1040px; margin: 0 auto 56px; padding: 0 24px; }
.dc-app .dc-cs-v2-world__h {
  font: 800 72px/1.04 var(--dc-font);
  letter-spacing: -0.028em;
  color: var(--dc-purple-deep);
  margin: 18px 0 18px;
}
.dc-app .dc-cs-v2-world__p {
  font: 400 20px/1.55 var(--dc-font);
  color: var(--dc-fg-muted);
  max-width: 640px; margin: 0 auto;
}

/* Full-bleed rectangular stage. Light brand surface so the image
   and overlays read; no dark-on-dark. */
.dc-app .dc-cs-v2-world__stage {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: 860px;
  background:
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(215,189,255,0.45) 0%, transparent 70%),
    linear-gradient(180deg, #F9F5FF 0%, #fff 100%);
  overflow: hidden;
  isolation: isolate;
}

/* IMAGE STAGE — prominent but NOT full-bleed. Image sits in the
   middle with breathing room so the two overlay cards have headroom. */
.dc-app .dc-cs-v2-world__images {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 1;
}
.dc-app .dc-cs-v2-world__img {
  position: absolute;
  max-width: min(56%, 760px);
  max-height: 68%;
  width: auto; height: auto;
  object-fit: contain;
  border-radius: 22px;
  opacity: 0;
  transform: scale(0.96);
  transition: opacity .55s ease, transform .55s ease;
  filter: drop-shadow(0 50px 100px rgba(14,1,37,0.30));
}
.dc-app .dc-cs-v2-world__img.is-active {
  opacity: 1;
  transform: scale(1);
}

/* TWO floating mini-rectangle cards — overlay the image edges.
   Card A = shopper prompt (top-left). Card B = brand value-prop
   (bottom-right). Both are larger than the earlier minis so they
   read clearly against the lifestyle photo. */
.dc-app .dc-cs-v2-world__card {
  position: absolute;
  z-index: 5;
  background: #fff;
  border: 1px solid var(--dc-border-faint);
  border-radius: 18px;
  padding: 20px 24px;
  width: clamp(280px, 36%, 460px);
  box-shadow: 0 30px 70px -24px rgba(14,1,37,0.30);
  display: flex; flex-direction: column; gap: 10px;
}
.dc-app .dc-cs-v2-world__card-lbl {
  display: inline-flex; align-items: center; gap: 8px;
  font: 800 11px/1 var(--dc-font);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--dc-purple);
}
.dc-app .dc-cs-v2-world__card-line {
  display: flex; align-items: center;
  font: 700 20px/1.25 var(--dc-font);
  color: var(--dc-purple-deep);
  min-height: 28px;
  flex-wrap: wrap;
}
.dc-app .dc-cs-v2-world__card-caret { color: var(--dc-purple); margin-right: 10px; }
.dc-app .dc-cs-v2-world__card-text  { white-space: pre-wrap; }
.dc-app .dc-cs-v2-world__card-cursor {
  display: inline-block;
  width: 2px; height: 22px;
  background: var(--dc-purple);
  margin-left: 3px;
  vertical-align: middle;
  animation: dc-cs-world-blink 1s steps(2,start) infinite;
}
@keyframes dc-cs-world-blink {
  to { background: transparent; }
}

/* Card B value-prop body */
.dc-app .dc-cs-v2-world__card-vp {
  font: 600 17px/1.4 var(--dc-font);
  color: var(--dc-purple-deep);
}

/* Card B uses a brand-gradient frame to differentiate from A */
.dc-app .dc-cs-v2-world__card--b {
  background: linear-gradient(180deg, #fff 0%, #F5EFFF 100%);
  border-color: rgba(86,18,189,0.18);
}

/* Positioning: overlap the image edges */
/* Cards stay straight (no tilt) but sit at radially-scattered
   positions around the centred image — different shapes of the
   three cards give the visual rhythm. */
.dc-app .dc-cs-v2-world__card--a { top: 12%;    left: 4%;  }
.dc-app .dc-cs-v2-world__card--b { bottom: 10%; left: 4%;  }

/* Card C — context-aware card (recipe / pairings / SKU list).
   Positioned middle-right; tilts the opposite way to A so cards
   feel scattered, not aligned. */
.dc-app .dc-cs-v2-world__cardc-set {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none; z-index: 5;
}
.dc-app .dc-cs-v2-world__cardc {
  position: absolute;
  top: 14%; right: 5%;
  width: clamp(260px, 26%, 340px);
  background: #fff;
  border: 1px solid var(--dc-border-faint);
  border-radius: 18px;
  padding: 18px 20px;
  box-shadow: 0 30px 70px -24px rgba(14,1,37,0.30);
  opacity: 0;
  transition: opacity .5s ease;
  display: flex; flex-direction: column; gap: 10px;
}
.dc-app .dc-cs-v2-world__cardc.is-active { opacity: 1; }
.dc-app .dc-cs-v2-world__cardc--wide {
  width: clamp(340px, 36%, 460px);
  padding: 22px 24px;
}
.dc-app .dc-cs-v2-world__cardc--wide .dc-cs-v2-world__cardc-pairs { table-layout: fixed; }
.dc-app .dc-cs-v2-world__cardc--wide .dc-cs-v2-world__cardc-pairs th,
.dc-app .dc-cs-v2-world__cardc--wide .dc-cs-v2-world__cardc-pairs td {
  padding: 12px 0;
  font-size: 13px;
  vertical-align: middle;
}
.dc-app .dc-cs-v2-world__cardc--wide .dc-cs-v2-world__cardc-pairs th {
  width: 38%;
  padding-right: 18px;
  white-space: nowrap;
}
.dc-app .dc-cs-v2-world__cardc-lbl {
  display: inline-flex; align-items: center; gap: 8px;
  font: 800 10px/1 var(--dc-font);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--dc-purple);
}
.dc-app .dc-cs-v2-world__cardc-title {
  font: 800 17px/1.25 var(--dc-font);
  color: var(--dc-purple-deep);
}

/* Recipe ingredient list */
.dc-app .dc-cs-v2-world__cardc-ings { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.dc-app .dc-cs-v2-world__cardc-ings li {
  display: grid; grid-template-columns: 56px 1fr; gap: 10px;
  padding: 8px 0;
  border-top: 1px dashed var(--dc-border-faint);
  font: 600 13px/1.35 var(--dc-font);
  color: var(--dc-purple-deep);
}
.dc-app .dc-cs-v2-world__cardc-ings li:first-child { border-top: 0; padding-top: 0; }
.dc-app .dc-cs-v2-world__cardc-qty {
  font: 800 12px/1.35 var(--dc-font);
  letter-spacing: 0.04em;
  color: var(--dc-purple);
  white-space: nowrap;
}

/* Pairings table */
.dc-app .dc-cs-v2-world__cardc-pairs { width: 100%; border-collapse: collapse; }
.dc-app .dc-cs-v2-world__cardc-pairs th,
.dc-app .dc-cs-v2-world__cardc-pairs td {
  text-align: left;
  font: 600 13px/1.35 var(--dc-font);
  padding: 7px 0;
  border-top: 1px dashed var(--dc-border-faint);
}
.dc-app .dc-cs-v2-world__cardc-pairs tr:first-child th,
.dc-app .dc-cs-v2-world__cardc-pairs tr:first-child td { border-top: 0; }
.dc-app .dc-cs-v2-world__cardc-pairs th {
  font-weight: 800;
  color: var(--dc-purple);
  letter-spacing: 0.04em;
  width: 72px;
}
.dc-app .dc-cs-v2-world__cardc-pairs td { color: var(--dc-purple-deep); }

/* SKU list */
.dc-app .dc-cs-v2-world__cardc-skus { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.dc-app .dc-cs-v2-world__cardc-skus li {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px;
  background: rgba(86,18,189,0.05);
  border-radius: 10px;
  padding: 8px 12px;
}
.dc-app .dc-cs-v2-world__cardc-sku-name { font: 800 13px/1 var(--dc-font); color: var(--dc-purple-deep); }
.dc-app .dc-cs-v2-world__cardc-sku-note { font: 600 11px/1 var(--dc-font); color: var(--dc-fg-muted); letter-spacing: 0.02em; }

/* Frame counter */
.dc-app .dc-cs-v2-world__counter {
  position: absolute; right: 32px; top: 40px;
  z-index: 5;
  font: 800 13px/1 var(--dc-font);
  letter-spacing: 0.18em;
  color: var(--dc-purple);
}
.dc-app .dc-cs-v2-world__counter-sep { margin: 0 6px; color: rgba(86,18,189,0.4); }
.dc-app .dc-cs-v2-world__counter-tot { color: rgba(86,18,189,0.4); }

/* Section-end CTA */
.dc-app .dc-cs-v2-world__cta {
  display: flex; justify-content: center;
  padding: 56px 0 80px;
  background: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .dc-app .dc-cs-v2-world__img { transition: none; }
  .dc-app .dc-cs-v2-world__card-cursor { animation: none; opacity: 1; }
}

/* Tablet sizing for the cards + image */
@media (max-width: 1100px) {
  .dc-app .dc-cs-v2-world__h { font-size: 48px; }
  .dc-app .dc-cs-v2-world__stage { height: 760px; }
  .dc-app .dc-cs-v2-world__card { padding: 16px 20px; }
  .dc-app .dc-cs-v2-world__card-line { font-size: 17px; }
  .dc-app .dc-cs-v2-world__card-vp { font-size: 15px; }
  .dc-app .dc-cs-v2-world__img { max-width: 64%; max-height: 60%; }
}

/* ─── V2 section CTAs (Without / With / Capabilities) ─── */
.dc-app .dc-cs-v2-band__cta { margin-top: 32px; }
.dc-app .dc-cs-v2-caps-cta { display: flex; justify-content: center; margin-top: 48px; }

/* ════════════════════════════════════════════════════════════════════
   V2 — Mobile fixes (audited at 390x844)
   ════════════════════════════════════════════════════════════════════ */

/* Stat band — inline grid-template-columns from the JSX wins by
   specificity, so the mobile override must also be inline-style level.
   Single column with proper card spacing. */
@media (max-width: 720px) {
  .dc-app .dc-cs-stat-band[style] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .dc-app .dc-cs-stat-band__item { padding: 22px 20px !important; }
  .dc-app .dc-cs-stat-band__num { font-size: 44px !important; }
}

/* Hero StarField + Final CTA StarField — on mobile the stars sit on
   top of the centered headline. Push them off the edges and reduce
   to a single accent star at the bottom that can't collide. */
@media (max-width: 720px) {
  .dc-app .dc-cs-v2-hero .dc-cs-stars,
  .dc-app .dc-cs-v2-final .dc-cs-stars { display: none; }
}

/* Brand World on phones — the two floating cards no longer make sense
   overlapping a smaller image. Stack vertically: Card A on top, image
   in the middle (full width), Card B at the bottom. */
@media (max-width: 720px) {
  .dc-app .dc-cs-v2-world__stage {
    height: auto;
    min-height: 720px;
    padding: 24px 16px;
  }
  .dc-app .dc-cs-v2-world__images {
    position: relative; inset: auto;
    margin: 130px auto 12px;
    height: 360px;
    width: 100%;
  }
  /* Keep images absolutely stacked so only the .is-active one shows.
     Center them inside the wrapper, full width. */
  .dc-app .dc-cs-v2-world__img {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.96);
    max-width: 92%;
    max-height: 100%;
  }
  .dc-app .dc-cs-v2-world__img.is-active {
    transform: translate(-50%, -50%) scale(1);
  }
  .dc-app .dc-cs-v2-world__card {
    width: calc(100% - 32px);
  }
  .dc-app .dc-cs-v2-world__card--a {
    position: absolute;
    top: 16px; left: 16px; right: 16px; bottom: auto;
  }
  .dc-app .dc-cs-v2-world__card--b {
    position: relative;
    top: auto; right: auto; bottom: auto; left: auto;
    margin: 16px auto 0;
    transform: none;
  }
  .dc-app .dc-cs-v2-world__card--a { transform: none; }
  .dc-app .dc-cs-v2-world__img,
  .dc-app .dc-cs-v2-world__img.is-active { transform: translate(-50%, -50%) scale(1); }

  /* Card C variants — stack vertically between image and Card B */
  .dc-app .dc-cs-v2-world__cardc-set {
    position: relative; inset: auto;
    margin: 16px 0 0;
    min-height: 0;
  }
  .dc-app .dc-cs-v2-world__cardc {
    position: absolute;
    top: 0; left: 16px; right: 16px;
    width: calc(100% - 32px);
    transform: none;
    pointer-events: auto;
  }
  /* Hide the inactive Card C variants so they don't stack invisibly */
  .dc-app .dc-cs-v2-world__cardc:not(.is-active) { display: none; }
  .dc-app .dc-cs-v2-world__cardc.is-active { position: relative; left: auto; right: auto; }
  .dc-app .dc-cs-v2-world__card-line { font-size: 15px; line-height: 1.3; flex-wrap: wrap; }
  .dc-app .dc-cs-v2-world__card-text { white-space: normal; word-break: break-word; }
  .dc-app .dc-cs-v2-world__card-cursor { height: 18px; }
  .dc-app .dc-cs-v2-world__card-vp { font-size: 14px; line-height: 1.45; }
  .dc-app .dc-cs-v2-world__counter { top: auto; bottom: 20px; right: 16px; }
  .dc-app .dc-cs-v2-world__cta { padding: 32px 16px 56px; }
}

/* Even narrower — phones below 420px */
@media (max-width: 420px) {
  .dc-app .dc-cs-v2-world__h { font-size: 30px !important; }
  .dc-app .dc-cs-v2-world__card-line { font-size: 14px; }
  .dc-app .dc-cs-v2-band__h { font-size: 32px !important; line-height: 1.08 !important; }
  .dc-app .dc-cs-v2-transition__h { font-size: 28px !important; }
  .dc-app .dc-cs-v2-final__h { font-size: 34px !important; line-height: 1.08 !important; }
}

/* Kill any accidental horizontal scroll from 100vw stages */
/* `overflow: clip` prevents horizontal overflow without creating a
   scroll container — preserves position:sticky on nested sections
   (e.g. the Diageo orbit deck). */
.dc-app.dc-cs-detail { overflow-x: clip; }

/* ════════════════════════════════════════════════════════════════════
   LANDING PAGE A — "Your brand. Inside ChatGPT. In 2 weeks."
   Slug: brandstore-2-weeks
   Section order: hero (shader video bg) → why-now stats →
   multi-vertical iPhone strip → speed anchor (dark) → final CTA (dark).
   ════════════════════════════════════════════════════════════════════ */

.dc-app .dc-cs-detail--lp { overflow-x: hidden; }

/* ─── HERO with shader video bg ─── */
.dc-app .dc-cs-lp-hero {
  position: relative;
  padding: 140px 0 120px;
  min-height: 86vh;
  display: flex;
  align-items: center;
  background: #0E0125; /* brand dark — paints under the video */
  isolation: isolate;
  overflow: hidden;
}
.dc-app .dc-cs-lp-hero__vid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
/* Veil — darkens the shader so headline is always legible. Brand
   dark vignette with a slight gradient toward the bottom so the
   transition into the white "why now" section feels intentional. */
.dc-app .dc-cs-lp-hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(120% 80% at 50% 40%, rgba(14,1,37,0.30) 0%, rgba(14,1,37,0.55) 60%, rgba(14,1,37,0.78) 100%),
    linear-gradient(180deg, rgba(14,1,37,0.10) 0%, rgba(14,1,37,0.35) 100%);
  pointer-events: none;
}
.dc-app .dc-cs-lp-hero > .dc-container { position: relative; z-index: 2; }
.dc-app .dc-cs-lp-hero__inner {
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
}
.dc-app .dc-cs-lp-hero__h {
  font-weight: 800;
  font-size: 88px;
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin: 22px 0 26px;
  color: #fff;
}
.dc-app .dc-cs-lp-hero__p {
  font-size: 19px;
  line-height: 1.5;
  max-width: 660px;
  margin: 0 auto 36px;
  color: rgba(255,255,255,0.88);
}
.dc-app .dc-cs-lp-hero__p code {
  font-family: inherit;
  font-weight: 700;
  color: #85ECFF;
  background: rgba(133,236,255,0.10);
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.95em;
}
.dc-app .dc-cs-lp-hero__cta {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.dc-app .dc-cs-lp-hero__trust {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
}

/* ─── WHY NOW — 3 stat tiles ─── */
.dc-app .dc-cs-lp-why {
  position: relative;
  padding: 110px 0 90px;
  background: #fff;
  isolation: isolate;
}
.dc-app .dc-cs-lp-why__head { text-align: center; max-width: 760px; margin: 0 auto 56px; }
.dc-app .dc-cs-lp-why__h {
  font-weight: 800;
  font-size: 56px;
  line-height: 1.05;
  letter-spacing: -0.022em;
  margin: 18px 0 0;
  color: #100D0C;
}
.dc-app .dc-cs-lp-why__band {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}
.dc-app .dc-cs-lp-why__item {
  text-align: center;
  padding: 40px 28px;
  background: #F9F5FF;
  border: 1px solid #D7BDFF;
  border-radius: 24px;
  box-shadow: 0 14px 40px -28px rgba(86,18,189,0.20);
}
.dc-app .dc-cs-lp-why__num {
  font-weight: 800;
  font-size: 64px;
  line-height: 1;
  letter-spacing: -0.03em;
  background-image: linear-gradient(110deg,#67E1F7 0%,#5612BD 50%,#9250F2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 10px;
}
.dc-app .dc-cs-lp-why__lab {
  font-size: 16px;
  line-height: 1.4;
  color: #250651;
  font-weight: 600;
  margin-bottom: 10px;
}
.dc-app .dc-cs-lp-why__src {
  font-size: 12px;
  color: #757267;
  font-weight: 500;
}

/* ─── MULTI-VERTICAL STRIP ─── */
.dc-app .dc-cs-lp-strip {
  padding: 110px 0;
  background: #F9F5FF;
}
.dc-app .dc-cs-lp-strip__head { text-align: center; max-width: 820px; margin: 0 auto 56px; }
.dc-app .dc-cs-lp-strip__h {
  font-weight: 800;
  font-size: 56px;
  line-height: 1.05;
  letter-spacing: -0.022em;
  margin: 18px 0 0;
  color: #100D0C;
}
.dc-app .dc-cs-lp-strip__sub {
  margin: 14px auto 0;
  max-width: 680px;
  font-size: 17px;
  line-height: 1.5;
  color: #757267;
}
.dc-app .dc-cs-lp-strip__outs {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 1100px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.dc-app .dc-cs-lp-strip__outs li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 24px;
  background: #fff;
  border: 1px solid rgba(215,189,255,0.6);
  border-radius: 20px;
}
.dc-app .dc-cs-lp-strip__mark {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(86,18,189,0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dc-app .dc-cs-lp-strip__outh {
  font-weight: 800;
  font-size: 17px;
  color: #100D0C;
  margin-bottom: 4px;
}
.dc-app .dc-cs-lp-strip__outb {
  font-size: 15px;
  line-height: 1.45;
  color: #250651;
}

/* ─── ANIMATED VERTICAL STAGE ───────────────────────────────────────
   One active phone in the center, prev + next phones peek from the
   sides (ghosted), 4th phone is off-stage. Categories cycle on a
   timer; each card plays 3 bubbles (user prompt → hero image → AI
   reply) before crossfading to the next. JS driver: initLpStrip in
   animations.js. On mobile (≤900px) the stage flattens into a
   horizontal scroll-snap rail. */

.dc-app .dc-cs-lp-stage {
  position: relative;
  max-width: 1280px;
  margin: 0 auto 64px;
  padding: 32px 0 8px;
}

/* ─── Desktop: absolute-positioned cards on a centered stage ─── */
.dc-app .dc-cs-lp-stage__track {
  position: relative;
  height: 620px;
  perspective: 1400px;
}

.dc-app .dc-cs-lp-stage__card {
  position: absolute;
  top: 0;
  left: 50%;
  width: 300px;
  transform-origin: 50% 50%;
  will-change: transform, opacity, filter;
  transition:
    transform 1100ms cubic-bezier(0.2, 0.7, 0.2, 1),
    opacity   900ms cubic-bezier(0.2, 0.7, 0.2, 1),
    filter    900ms cubic-bezier(0.2, 0.7, 0.2, 1);
  pointer-events: none;
}

/* Active card — front and center, full opacity, no blur. */
.dc-app .dc-cs-lp-stage__card[data-state="active"] {
  transform: translate(-50%, 0) scale(1);
  opacity: 1;
  filter: none;
  z-index: 3;
  pointer-events: auto;
}
/* Prev (left peek) */
.dc-app .dc-cs-lp-stage__card[data-state="prev"] {
  transform: translate(calc(-50% - 340px), 30px) scale(0.78);
  opacity: 0.22;
  filter: blur(2px) saturate(0.75);
  z-index: 1;
}
/* Next (right peek) */
.dc-app .dc-cs-lp-stage__card[data-state="next"] {
  transform: translate(calc(-50% + 340px), 30px) scale(0.78);
  opacity: 0.22;
  filter: blur(2px) saturate(0.75);
  z-index: 1;
}
/* Off-stage (queued) */
.dc-app .dc-cs-lp-stage__card[data-state="off"] {
  transform: translate(-50%, 80px) scale(0.6);
  opacity: 0;
  filter: blur(6px);
  z-index: 0;
}

/* ─── The phone itself (re-used styling from miniphone, scaled up) ─── */
.dc-app .dc-cs-lp-stage__phone {
  width: 100%;
}
.dc-app .dc-cs-lp-stage__screen {
  background: #fff;
  border-radius: 44px;
  border: 11px solid #100D0C;
  overflow: hidden;
  position: relative;
  box-shadow:
    0 40px 80px -30px rgba(86,18,189,0.45),
    0 0 0 1px rgba(255,255,255,0.6) inset;
  aspect-ratio: 9 / 19;
  display: flex;
  flex-direction: column;
}
.dc-app .dc-cs-lp-stage__status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px 8px;
  font-size: 12px;
  font-weight: 700;
  color: #100D0C;
}
.dc-app .dc-cs-lp-stage__island {
  width: 78px;
  height: 18px;
  background: #100D0C;
  border-radius: 999px;
}
.dc-app .dc-cs-lp-stage__indicators { display: flex; gap: 4px; }
.dc-app .dc-cs-lp-stage__indicators span {
  width: 12px;
  height: 9px;
  background: #100D0C;
  border-radius: 2px;
}
.dc-app .dc-cs-lp-stage__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 18px 10px;
  border-bottom: 1px solid #F0E8FF;
}
.dc-app .dc-cs-lp-stage__avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #5612BD, #9250F2);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dc-app .dc-cs-lp-stage__brand { font-size: 14px; font-weight: 800; color: #100D0C; line-height: 1.1; }
.dc-app .dc-cs-lp-stage__sub { font-size: 11px; color: #757267; }
.dc-app .dc-cs-lp-stage__chat {
  flex: 1;
  padding: 14px 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.dc-app .dc-cs-lp-stage__chat::-webkit-scrollbar { display: none; }
/* Prevent bubbles from compressing under flex when chat is short */
.dc-app .dc-cs-lp-stage__bubble { flex: 0 0 auto; }

/* AI text bubble — used for transition messages like
   "Finding nearest store near you." */
.dc-app .dc-cs-lp-stage__bubble--aitext {
  align-self: flex-start;
  background: #F9F5FF;
  color: #250651;
  font-size: 12px;
  font-style: italic;
  font-weight: 500;
  line-height: 1.4;
  padding: 8px 12px;
  border-radius: 4px 14px 14px 14px;
  max-width: 90%;
  border: 1px solid rgba(215,189,255,0.45);
}

/* Bubbles — start hidden, JS adds .is-shown to reveal lazily. */
.dc-app .dc-cs-lp-stage__bubble {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 700ms cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.dc-app .dc-cs-lp-stage__bubble.is-shown {
  opacity: 1;
  transform: translateY(0);
}

.dc-app .dc-cs-lp-stage__bubble--user {
  align-self: flex-end;
  background: #5612BD;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 14px 14px 4px 14px;
  max-width: 80%;
}
.dc-app .dc-cs-lp-stage__bubble--hero {
  background: #fff;
  border: 1px solid #E8DCFF;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 22px -12px rgba(86,18,189,0.30);
}
.dc-app .dc-cs-lp-stage__media {
  aspect-ratio: 4 / 5;
  background: #F9F5FF;
  overflow: hidden;
}
.dc-app .dc-cs-lp-stage__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.dc-app .dc-cs-lp-stage__body { padding: 10px 12px 12px; }
.dc-app .dc-cs-lp-stage__title {
  font-size: 13px;
  font-weight: 800;
  color: #100D0C;
  line-height: 1.2;
  margin-bottom: 3px;
}
.dc-app .dc-cs-lp-stage__metaline {
  font-size: 11px;
  color: #757267;
  line-height: 1.35;
}
.dc-app .dc-cs-lp-stage__bubble--ai {
  align-self: flex-start;
  background: #F9F5FF;
  color: #250651;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  padding: 9px 12px;
  border-radius: 4px 14px 14px 14px;
  max-width: 90%;
  border: 1px solid rgba(215,189,255,0.45);
}

/* ─── Category dots (clickable, jump to a card) ─── */
.dc-app .dc-cs-lp-stage__dots {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 24px;
}
.dc-app .dc-cs-lp-stage__dot {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: #fff;
  border: 1px solid rgba(215,189,255,0.55);
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #757267;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: color 280ms ease, border-color 280ms ease, background 280ms ease, transform 280ms ease;
}
.dc-app .dc-cs-lp-stage__dot:hover {
  color: #5612BD;
  border-color: #5612BD;
  transform: translateY(-1px);
}
.dc-app .dc-cs-lp-stage__dot.is-active {
  color: #5612BD;
  border-color: #5612BD;
  background: rgba(86,18,189,0.06);
}
.dc-app .dc-cs-lp-stage__dot-ring {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #D7BDFF;
  transition: background 280ms ease, box-shadow 280ms ease;
}
.dc-app .dc-cs-lp-stage__dot.is-active .dc-cs-lp-stage__dot-ring {
  background: #5612BD;
  box-shadow: 0 0 0 4px rgba(86,18,189,0.12);
}
.dc-app .dc-cs-lp-stage__dot-label { line-height: 1; }

/* Dark-section gradient-word override — solid cyan reads better
   against #0E0125 than the purple-heavy multi-stop gradient, which
   loses contrast at the purple stops. Light sections keep the
   gradient because it reads fine on white. */
.dc-app .dc-cs-lp-hero .dc-grad-word,
.dc-app .dc-cs-lp-final .dc-grad-word,
.dc-app .dc-cs-v2-final .dc-grad-word {
  background-image: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: #85ECFF;
}

/* ─── Per-section inline + primary CTAs (light sections) ─── */
.dc-app .dc-cs-lp-why__cta,
.dc-app .dc-cs-lp-strip__cta {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}

/* ─── SPEED ANCHOR — light surface (was dark; the only dark sections
   on this page are now the hero and the final CTA) ─── */
.dc-app .dc-cs-lp-speed {
  position: relative;
  padding: 110px 0;
  background: #fff;
  isolation: isolate;
  overflow: hidden;
}
.dc-app .dc-cs-lp-speed > .dc-container { position: relative; z-index: 2; }
.dc-app .dc-cs-lp-speed__inner {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  color: #250651;
}
.dc-app .dc-cs-lp-speed__h {
  font-weight: 800;
  font-size: 76px;
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin: 22px 0 24px;
  color: #100D0C;
}
.dc-app .dc-cs-lp-speed__p {
  font-size: 19px;
  line-height: 1.55;
  max-width: 680px;
  margin: 0 auto 24px;
  color: #250651;
}
.dc-app .dc-cs-lp-speed__line {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  background: rgba(86,18,189,0.06);
  border: 1px solid rgba(86,18,189,0.18);
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  color: #5612BD;
  margin-bottom: 36px;
}
.dc-app .dc-cs-lp-speed__cta { display: flex; justify-content: center; }

/* ─── FINAL CTA — dark immersive, two-column with HubSpot form ─── */
.dc-app .dc-cs-lp-final__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
}
.dc-app .dc-cs-lp-final__copy {
  color: #fff;
}
.dc-app .dc-cs-lp-final__copy .dc-cs-v2-final__h { margin: 18px 0 18px; }
.dc-app .dc-cs-lp-final__copy .dc-cs-v2-final__p { margin: 0 0 24px; }
.dc-app .dc-cs-lp-final__bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dc-app .dc-cs-lp-final__bullets li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  color: rgba(255,255,255,0.88);
}

/* The form card — frosted-glass panel against the dark hero. HubSpot
   injects its form HTML into #dc-cs-lp-form-slot; styles below try to
   coerce HubSpot's default markup into the brand surface. */
.dc-app .dc-cs-lp-final__formcard {
  background: #fff;
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 30px 80px -30px rgba(86,18,189,0.55);
}
.dc-app .dc-cs-lp-final__formhdr { margin-bottom: 20px; }
.dc-app .dc-cs-lp-final__formtitle {
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: #100D0C;
}
.dc-app .dc-cs-lp-final__formsub {
  font-size: 14px;
  color: #757267;
  margin-top: 4px;
}
.dc-app .dc-cs-lp-final__slot {
  min-height: 320px;
}
/* HubSpot form coercion — fields, labels, button. We touch attribute
   selectors and HubSpot's class names so the form picks up the brand
   look without being too clever about parsing their markup. */
.dc-app .dc-cs-lp-final__slot form { font-family: inherit; }
.dc-app .dc-cs-lp-final__slot .hs-form-field { margin-bottom: 16px; }
.dc-app .dc-cs-lp-final__slot label,
.dc-app .dc-cs-lp-final__slot .hs-form-field > label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #250651;
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}
.dc-app .dc-cs-lp-final__slot input[type="text"],
.dc-app .dc-cs-lp-final__slot input[type="email"],
.dc-app .dc-cs-lp-final__slot input[type="tel"],
.dc-app .dc-cs-lp-final__slot input[type="number"],
.dc-app .dc-cs-lp-final__slot select,
.dc-app .dc-cs-lp-final__slot textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #E0D2FA;
  border-radius: 10px;
  font-family: inherit;
  font-size: 15px;
  color: #100D0C;
  background: #FBF8FF;
  box-sizing: border-box;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.dc-app .dc-cs-lp-final__slot input:focus,
.dc-app .dc-cs-lp-final__slot select:focus,
.dc-app .dc-cs-lp-final__slot textarea:focus {
  outline: none;
  border-color: #5612BD;
  box-shadow: 0 0 0 4px rgba(86,18,189,0.10);
}
.dc-app .dc-cs-lp-final__slot input[type="submit"],
.dc-app .dc-cs-lp-final__slot .hs-button {
  width: 100%;
  background: #85ECFF;
  color: #250651;
  border: none;
  border-radius: 10px;
  padding: 16px 22px;
  font-family: inherit;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  margin-top: 4px;
  transition: transform 180ms ease, box-shadow 220ms ease;
}
.dc-app .dc-cs-lp-final__slot input[type="submit"]:hover,
.dc-app .dc-cs-lp-final__slot .hs-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 32px -16px rgba(133,236,255,0.55);
}
.dc-app .dc-cs-lp-final__slot .hs-error-msgs,
.dc-app .dc-cs-lp-final__slot .hs-error-msg {
  color: #B91C1C;
  font-size: 12px;
  margin-top: 4px;
  list-style: none;
  padding: 0;
}
.dc-app .dc-cs-lp-final__slot .legal-consent-container,
.dc-app .dc-cs-lp-final__slot .hs-richtext {
  font-size: 12px;
  color: #757267;
  line-height: 1.5;
}
.dc-app .dc-cs-lp-final__slot .legal-consent-container a { color: #5612BD; }
.dc-app .dc-cs-lp-final__slot .submitted-message {
  font-size: 16px;
  color: #250651;
  text-align: center;
  padding: 32px 8px;
}

/* ─── Stage specialty bubbles — guardrail / spec / reviews / locator
   Each fits within the ~278px-wide active mini phone chat column. ─── */
.dc-app .dc-cs-lp-stage__bubble--guardrail {
  align-self: stretch;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: linear-gradient(110deg, #67E1F7 0%, #9250F2 60%, #5612BD 100%);
  color: #fff;
  border-radius: 4px 14px 14px 14px;
  box-shadow: 0 10px 24px -14px rgba(86,18,189,0.40);
}
.dc-app .dc-cs-lp-stage__gicon {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.40);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
}
.dc-app .dc-cs-lp-stage__glabel {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  margin-bottom: 2px;
}
.dc-app .dc-cs-lp-stage__gtext {
  font-size: 11px;
  line-height: 1.35;
  color: rgba(255,255,255,0.92);
}

.dc-app .dc-cs-lp-stage__bubble--spec {
  align-self: stretch;
  background: #fff;
  border: 1px solid #E8DCFF;
  border-radius: 4px 14px 14px 14px;
  padding: 10px 12px;
  box-shadow: 0 8px 22px -12px rgba(86,18,189,0.30);
}
.dc-app .dc-cs-lp-stage__spec-title {
  font-size: 12px;
  font-weight: 800;
  color: #100D0C;
  margin-bottom: 6px;
}
.dc-app .dc-cs-lp-stage__spec-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dc-app .dc-cs-lp-stage__spec-list li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  line-height: 1.4;
  padding: 4px 0;
  border-top: 1px dashed #EFE4FF;
}
.dc-app .dc-cs-lp-stage__spec-list li:first-child { border-top: none; }
.dc-app .dc-cs-lp-stage__spec-k { color: #757267; font-weight: 700; }
.dc-app .dc-cs-lp-stage__spec-v { color: #250651; font-weight: 600; text-align: right; }

.dc-app .dc-cs-lp-stage__bubble--reviews {
  align-self: stretch;
  background: #fff;
  border: 1px solid #E8DCFF;
  border-radius: 4px 14px 14px 14px;
  padding: 10px 12px;
  box-shadow: 0 8px 22px -12px rgba(86,18,189,0.30);
}
.dc-app .dc-cs-lp-stage__rev-hdr {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.dc-app .dc-cs-lp-stage__rev-stars {
  color: #FFB800;
  letter-spacing: 0.02em;
  font-size: 12px;
}
.dc-app .dc-cs-lp-stage__rev-num {
  font-size: 12px;
  font-weight: 800;
  color: #100D0C;
}
.dc-app .dc-cs-lp-stage__rev-count {
  font-size: 10px;
  color: #757267;
}
.dc-app .dc-cs-lp-stage__rev-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dc-app .dc-cs-lp-stage__rev-list li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11px;
  line-height: 1.35;
  padding: 4px 0;
  border-top: 1px dashed #EFE4FF;
}
.dc-app .dc-cs-lp-stage__rev-list li:first-child { border-top: none; }
.dc-app .dc-cs-lp-stage__rev-author {
  font-weight: 700;
  color: #5612BD;
  font-size: 10px;
}
.dc-app .dc-cs-lp-stage__rev-text {
  color: #250651;
  font-style: italic;
}

.dc-app .dc-cs-lp-stage__bubble--locator {
  align-self: stretch;
  background: #fff;
  border: 1px solid #E8DCFF;
  border-radius: 4px 14px 14px 14px;
  overflow: hidden;
  box-shadow: 0 8px 22px -12px rgba(86,18,189,0.30);
}
.dc-app .dc-cs-lp-stage__map {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #F9F5FF;
  overflow: hidden;
}
.dc-app .dc-cs-lp-stage__map svg,
.dc-app .dc-cs-lp-stage__map img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.dc-app .dc-cs-lp-stage__loc-body { padding: 8px 12px 10px; }
.dc-app .dc-cs-lp-stage__loc-store {
  font-size: 12px;
  font-weight: 800;
  color: #100D0C;
  line-height: 1.2;
}
.dc-app .dc-cs-lp-stage__loc-addr {
  font-size: 10px;
  color: #757267;
  margin-top: 2px;
}
.dc-app .dc-cs-lp-stage__loc-dist {
  font-size: 10px;
  color: #5612BD;
  font-weight: 700;
  margin-top: 4px;
}

/* ════════════════════════════════════════════════════════════════════
   LP A — MOBILE (≤900px)
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .dc-app .dc-cs-lp-hero { padding: 90px 0 80px; min-height: 78vh; }
  .dc-app .dc-cs-lp-hero__h { font-size: 48px; }
  .dc-app .dc-cs-lp-hero__p { font-size: 16px; }

  .dc-app .dc-cs-lp-why { padding: 80px 0 60px; }
  .dc-app .dc-cs-lp-why__h { font-size: 36px; }
  .dc-app .dc-cs-lp-why__band { grid-template-columns: 1fr; gap: 18px; }
  .dc-app .dc-cs-lp-why__item { padding: 32px 24px; }
  .dc-app .dc-cs-lp-why__num { font-size: 52px; }

  .dc-app .dc-cs-lp-strip { padding: 80px 0; }
  .dc-app .dc-cs-lp-strip__h { font-size: 36px; }
  .dc-app .dc-cs-lp-strip__sub { font-size: 15px; }
  .dc-app .dc-cs-lp-strip__outs { grid-template-columns: 1fr; gap: 14px; }

  /* Mobile: same single-active-card stage as desktop — but the
     prev/next ghost cards are hidden (no room on narrow screens),
     and the active card scales down to fit. Auto-cycle + dot
     navigation work identically to desktop. */
  .dc-app .dc-cs-lp-stage { padding: 12px 0 0; margin-bottom: 40px; }
  .dc-app .dc-cs-lp-stage__track { height: 600px; perspective: none; }
  .dc-app .dc-cs-lp-stage__card { width: 280px; }
  .dc-app .dc-cs-lp-stage__card[data-state="prev"],
  .dc-app .dc-cs-lp-stage__card[data-state="next"],
  .dc-app .dc-cs-lp-stage__card[data-state="off"] {
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 0) scale(0.9);
  }
  .dc-app .dc-cs-lp-stage__card[data-state="active"] {
    transform: translate(-50%, 0) scale(1);
  }

  .dc-app .dc-cs-lp-speed { padding: 80px 0; }
  .dc-app .dc-cs-lp-speed__h { font-size: 48px; }
  .dc-app .dc-cs-lp-speed__p { font-size: 16px; }

  /* Final CTA — stack copy + form on mobile */
  .dc-app .dc-cs-lp-final__grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .dc-app .dc-cs-lp-final__formcard { padding: 24px; }

  /* Per-section CTA buttons — give them room above */
  .dc-app .dc-cs-lp-why__cta,
  .dc-app .dc-cs-lp-strip__cta { margin-top: 36px; }
}

/* ════════════════════════════════════════════════════════════════════
   LP A — SMALL MOBILE (≤480px)
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .dc-app .dc-cs-lp-hero__h { font-size: 40px; }
  .dc-app .dc-cs-lp-hero__p { font-size: 15px; }
  .dc-app .dc-cs-lp-why__h { font-size: 30px; }
  .dc-app .dc-cs-lp-why__num { font-size: 44px; }
  .dc-app .dc-cs-lp-strip__h { font-size: 30px; }
  .dc-app .dc-cs-lp-stage__card { flex-basis: 82vw; }
  .dc-app .dc-cs-lp-speed__h { font-size: 40px; }
}

/* ─────────────────────────────────────────────────────────────────────
   LANDING PAGE B — "You've done SEO. You're doing GEO. Here's what's next."
   Most styles reuse LP A's dc-cs-lp-* classes. The LADDER section
   (replacing SPEED) is the only new layout.
   ───────────────────────────────────────────────────────────────────── */
.dc-app .dc-cs-lp-ladder {
  position: relative;
  padding: 110px 0;
  background: #F9F5FF;
  isolation: isolate;
  overflow: hidden;
}
.dc-app .dc-cs-lp-ladder > .dc-container { position: relative; z-index: 2; }
.dc-app .dc-cs-lp-ladder__head {
  max-width: 860px;
  margin: 0 auto 56px;
  text-align: center;
  color: #250651;
}
.dc-app .dc-cs-lp-ladder__h {
  font-weight: 800;
  font-size: 64px;
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 22px 0 18px;
  color: #100D0C;
}
.dc-app .dc-cs-lp-ladder__p {
  font-size: 18px;
  line-height: 1.55;
  max-width: 680px;
  margin: 0 auto;
  color: #250651;
}
.dc-app .dc-cs-lp-ladder__steps {
  list-style: none;
  margin: 0 0 48px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  counter-reset: ladder;
}
.dc-app .dc-cs-lp-ladder__step {
  position: relative;
  padding: 40px 32px 36px;
  background: #ffffff;
  border: 1px solid #D7BDFF;
  border-radius: 24px;
  box-shadow: 0 14px 40px -22px rgba(86,18,189,0.18);
  color: #250651;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}
.dc-app .dc-cs-lp-ladder__step.is-highlight {
  border-color: transparent;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(110deg,#67E1F7 0%,#5612BD 35%,#9250F2 70%,#67E1F7 100%) border-box;
  border: 2px solid transparent;
  box-shadow: 0 28px 60px -22px rgba(86,18,189,0.28);
}
.dc-app .dc-cs-lp-ladder__rank {
  position: absolute;
  top: 14px;
  right: 22px;
  font-weight: 800;
  font-size: 72px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(86,18,189,0.20);
  pointer-events: none;
}
.dc-app .dc-cs-lp-ladder__step.is-highlight .dc-cs-lp-ladder__rank {
  -webkit-text-stroke: 1.5px rgba(86,18,189,0.32);
}
.dc-app .dc-cs-lp-ladder__channel {
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #5612BD;
  margin-top: 8px;
}
.dc-app .dc-cs-lp-ladder__q {
  font-weight: 800;
  font-size: 26px;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #100D0C;
}
.dc-app .dc-cs-lp-ladder__b {
  font-size: 16px;
  line-height: 1.55;
  color: #250651;
}
.dc-app .dc-cs-lp-ladder__cta { display: flex; justify-content: center; }

@media (max-width: 900px) {
  .dc-app .dc-cs-lp-ladder { padding: 60px 0; }
  .dc-app .dc-cs-lp-ladder__h { font-size: 34px; }
  .dc-app .dc-cs-lp-ladder__steps { grid-template-columns: 1fr; gap: 16px; }
  .dc-app .dc-cs-lp-ladder__step { padding: 28px 22px 24px; }
  .dc-app .dc-cs-lp-ladder__rank { font-size: 56px; top: 10px; right: 16px; }
  .dc-app .dc-cs-lp-ladder__q { font-size: 22px; }
}
@media (max-width: 480px) {
  .dc-app .dc-cs-lp-ladder__h { font-size: 30px; }
}

/* ─── Case study detail: inline local video module ─────────────────── */
.dc-app .dc-cs-inline-video {
  max-width: 960px;
  margin: 0 auto;
  border-radius: var(--dc-radius-lg, 20px);
  overflow: hidden;
  background: #0E0125;
  box-shadow: 0 30px 80px -40px rgba(86, 18, 189, 0.45), 0 0 0 1px rgba(215, 189, 255, 0.35);
}
.dc-app .dc-cs-inline-video__el {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #0E0125;
}

/* ─── Case study detail: body section with eyebrow + media + pull-stat ── */
.dc-app .dc-cs-body-section { position: relative; margin-bottom: 56px; }
.dc-app .dc-cs-body-section .dc-eyebrow { margin-bottom: 14px; }
.dc-app .dc-cs-body-section__split {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
/* Cap the media column so it doesn't keep growing on huge screens —
   the leaderboards already look great at ~360-420px wide. */
.dc-app .dc-cs-body-section__media { max-width: 460px; }
.dc-app .dc-cs-body-section__copy > p:last-child,
.dc-app .dc-cs-body-section__copy > ul:last-child { margin-bottom: 0; }
.dc-app .dc-cs-body-section__media { position: sticky; top: 100px; }

/* ─── Inline media — base ─────────────────────────────────────────── */
/* Videos / images render at their NATURAL aspect ratio. Per-shape
   modifiers below adjust grid layout — never force an aspect-ratio
   that fights the source asset. */
.dc-app .dc-cs-media { margin: 28px 0 12px; }
.dc-app .dc-cs-media--below { margin: 40px 0 12px; }
.dc-app .dc-cs-media__grid {
  display: grid;
  gap: 18px;
}
.dc-app .dc-cs-media__cell {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: var(--dc-surface);
  border: 1px solid var(--dc-border-faint, rgba(86, 18, 189, 0.12));
  box-shadow: 0 18px 44px -26px rgba(86, 18, 189, 0.35);
  display: flex;
  flex-direction: column;
}
.dc-app .dc-cs-media__video,
.dc-app .dc-cs-media__img {
  display: block;
  width: 100%;
  height: auto;
  /* No forced aspect-ratio — let the asset speak for itself. */
  background: #0E0125;
}
.dc-app .dc-cs-media__cap {
  font: 800 11px/1 var(--dc-font);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dc-purple);
  padding: 12px 16px;
  border-top: 1px solid rgba(86, 18, 189, 0.10);
  background: #fff;
}
.dc-app .dc-cs-media__note {
  font: 400 14px/1.55 var(--dc-font);
  color: var(--dc-purple-deep);
  opacity: 0.72;
  text-align: center;
  margin: 18px auto 0;
  max-width: 720px;
}

/* ─── Shape: leaderboard (8:1 banner ads) ─────────────────────────── */
/* Used in the right column. Stack each banner full-width. The cell
   chrome is minimal so the wide banner reads cleanly. */
.dc-app .dc-cs-media--shape-leaderboard .dc-cs-media__grid {
  grid-template-columns: 1fr;
  gap: 14px;
}
.dc-app .dc-cs-media__cell--leaderboard {
  border-radius: 10px;
}
.dc-app .dc-cs-media__cell--leaderboard .dc-cs-media__cap {
  padding: 8px 12px;
  font-size: 10px;
  letter-spacing: 0.14em;
}

/* ─── Shape: square (GetGo + 67% callout row) ─────────────────────── */
/* Two squares + the inline-stat circle make a 3-up row. On mobile
   the row collapses to one column. */
.dc-app .dc-cs-media--shape-square .dc-cs-media__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 24px;
  justify-items: center;
}
.dc-app .dc-cs-media__cell--square {
  max-width: 360px;
  width: 100%;
}
.dc-app .dc-cs-media__inline-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  color: #fff;
  text-align: center;
  background:
    /* Top-left specular highlight — small bright spot */
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 22%),
    /* Main body — purple sphere with light→dark falloff */
    radial-gradient(circle at 32% 28%,
      #D7BDFF 0%,
      #B57FF7 14%,
      #9250F2 42%,
      #6F2BD9 78%,
      #3A0890 100%
    );
  /* Inset shadows give the rounded volume; outer shadow grounds it */
  box-shadow:
    inset -14px -22px 50px rgba(20, 0, 60, 0.45),
    inset 10px 14px 32px rgba(255, 255, 255, 0.22),
    0 30px 70px -22px rgba(86, 18, 189, 0.6);
  align-self: center;
}
.dc-app .dc-cs-media__inline-stat-num {
  font: 800 64px/1 var(--dc-font);
  letter-spacing: -0.025em;
}
.dc-app .dc-cs-media__inline-stat-lab {
  font: 600 14px/1.35 var(--dc-font);
  margin-top: 10px;
  max-width: 170px;
}

/* ─── Pull-stat — standalone circle inside a prose section ────────── */
.dc-app .dc-cs-pull-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  margin: 36px auto 8px;
  color: #fff;
  text-align: center;
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 22%),
    radial-gradient(circle at 32% 28%,
      #D7BDFF 0%,
      #B57FF7 14%,
      #9250F2 42%,
      #6F2BD9 78%,
      #3A0890 100%
    );
  box-shadow:
    inset -14px -22px 50px rgba(20, 0, 60, 0.45),
    inset 10px 14px 32px rgba(255, 255, 255, 0.22),
    0 30px 70px -22px rgba(86, 18, 189, 0.6);
}
.dc-app .dc-cs-pull-stat__num {
  font: 800 56px/1 var(--dc-font);
  letter-spacing: -0.025em;
}
.dc-app .dc-cs-pull-stat__lab {
  font: 600 13px/1.3 var(--dc-font);
  margin-top: 8px;
  max-width: 160px;
  opacity: 0.95;
}

/* ─── Inline pull-quote — Jonathon Hunt card ──────────────────────── */
.dc-app .dc-cs-inline-quote {
  position: relative;
  margin: 32px 0 8px;
  padding: 32px 36px 28px 64px;
  background: linear-gradient(180deg, #F9F5FF 0%, #FFFFFF 100%);
  border-left: 4px solid var(--dc-purple);
  border-radius: 14px;
  box-shadow: 0 18px 44px -28px rgba(86, 18, 189, 0.30);
}
.dc-app .dc-cs-inline-quote__mark {
  position: absolute;
  top: 6px;
  left: 18px;
  font: 800 80px/1 var(--dc-font);
  color: var(--dc-purple);
  opacity: 0.35;
}
.dc-app .dc-cs-inline-quote__text {
  margin: 0 0 14px;
  font: 400 italic 19px/1.55 var(--dc-font);
  color: var(--dc-purple-deep);
}
.dc-app .dc-cs-inline-quote__cite {
  font: 700 13px/1.4 var(--dc-font);
  color: var(--dc-purple);
  letter-spacing: 0.02em;
}

/* ─── Hero upgrades: bigger logos, gradient stat cards ────────────── */
.dc-app .dc-cs-detail-hero__logo {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.dc-app .dc-cs-detail-hero__logo--double { gap: 22px; }
/* The chip variant gives the logo lockup a frosted-white tile so the
   color logos read cleanly against the dark hero band. */
.dc-app .dc-cs-detail-hero__logo--chip {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(215, 189, 255, 0.45);
  border-radius: 18px;
  padding: 18px 28px;
  box-shadow: 0 24px 60px -28px rgba(86, 18, 189, 0.55);
  display: inline-flex;
  width: auto;
  align-self: flex-start;
}
.dc-app .dc-cs-detail-hero__logo .dc-cs-customer-logo,
.dc-app .dc-cs-detail-hero__logo img {
  display: inline-block;
  height: 56px;
  max-height: none;
  width: auto;
}
.dc-app .dc-cs-detail-hero__logo--double .dc-cs-customer-logo:last-child,
.dc-app .dc-cs-detail-hero__logo--double img:last-child {
  height: 48px;
  max-height: none;
}
/* Smaller chip padding to match the smaller logos */
.dc-app .dc-cs-detail-hero__logo--chip {
  padding: 12px 20px;
  border-radius: 14px;
  margin-bottom: 22px;
}
.dc-app .dc-cs-detail-hero__logo-sep {
  font: 400 30px/1 var(--dc-font);
  color: var(--dc-purple);
  opacity: 0.55;
}

/* ─── Dark hero band — full-bleed with cyan/violet blur blobs ────── */
.dc-app .dc-cs-detail-hero--dark {
  position: relative;
  overflow: hidden;
  padding: 120px 0 140px;
  background: #0E0125;
  color: #fff;
}
.dc-app .dc-cs-detail-hero--dark .dc-cs-detail-hero__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  z-index: 0; pointer-events: none;
}
.dc-app .dc-cs-detail-hero--dark > .dc-container { position: relative; z-index: 2; }
.dc-app .dc-cs-detail-hero__blur {
  position: absolute;
  width: 720px; height: 720px;
  pointer-events: none;
  z-index: 1;
  filter: blur(10px);
  opacity: 0.55;
}
.dc-app .dc-cs-detail-hero__blur--a { top: -220px; left: -160px; }
.dc-app .dc-cs-detail-hero__blur--b { bottom: -260px; right: -180px; transform: scaleX(-1); }

/* Dark hero typography */
.dc-app .dc-cs-detail-hero--dark h1 {
  color: #fff;
  letter-spacing: -0.025em;
  font: 800 84px/1.04 var(--dc-font);
  margin: 0 0 20px;
  max-width: 1100px;
}
.dc-app .dc-cs-detail-hero--dark .dc-cs-detail-hero__intro {
  color: rgba(255, 255, 255, 0.82);
  font: 400 19px/1.65 var(--dc-font);
  max-width: 820px;
  margin: 18px 0 36px;
}
.dc-app .dc-cs-detail-hero--dark .dc-eyebrow,
.dc-app .dc-cs-detail-hero--dark .dc-eyebrow--light {
  color: #85ECFF;
  margin-bottom: 14px;
}

/* Dark hero stat cards: translucent dark cards with gradient num */
.dc-app .dc-cs-detail-hero--dark .dc-cs-headline-stats { margin-top: 8px; }
.dc-app .dc-cs-detail-hero--dark .dc-cs-headline-stat {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 26px 26px 22px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.dc-app .dc-cs-detail-hero--dark .dc-cs-headline-stat__num {
  font: 800 60px/1 var(--dc-font);
  letter-spacing: -0.03em;
  background: linear-gradient(110deg, #85ECFF 0%, #9DE5FF 35%, #D7BDFF 75%, #FFFFFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.dc-app .dc-cs-detail-hero--dark .dc-cs-headline-stat__lab {
  font: 600 13px/1.45 var(--dc-font);
  color: rgba(255, 255, 255, 0.78);
  margin-top: 10px;
}

/* ─── Quote callout: multi-logo lockup ────────────────────────────── */
.dc-app .dc-cs-quote-v2__logos {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-right: 14px;
}
.dc-app .dc-cs-quote-v2__logos img,
.dc-app .dc-cs-quote-v2__logos .dc-cs-customer-logo {
  height: 32px;
  max-height: none;
  width: auto;
}
.dc-app .dc-cs-quote-v2__cite {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.dc-app .dc-cs-detail-hero__intro {
  font: 400 19px/1.6 var(--dc-font);
  color: var(--dc-purple-deep);
  max-width: 760px;
  margin: 18px 0 28px;
}

/* Light-mode hero stat cards — kept for case studies that don't use
   the dark hero variant (Diageo, the anonymous ones). The dark-hero
   override above wins on Giant Eagle. */
.dc-app .dc-cs-detail-hero:not(.dc-cs-detail-hero--dark) .dc-cs-headline-stat {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(86, 18, 189, 0.10);
  border-radius: 14px;
  padding: 22px 22px 20px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.dc-app .dc-cs-detail-hero:not(.dc-cs-detail-hero--dark) .dc-cs-headline-stat__num {
  font: 800 52px/1 var(--dc-font);
  letter-spacing: -0.03em;
  background: linear-gradient(110deg, #5612BD 10%, #9250F2 50%, #67E1F7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.dc-app .dc-cs-detail-hero:not(.dc-cs-detail-hero--dark) .dc-cs-headline-stat__lab {
  font: 600 13px/1.4 var(--dc-font);
  color: var(--dc-purple-deep);
  margin-top: 8px;
  opacity: 0.85;
}

/* ─── Widen the prose container on case-study detail pages ────────── */
/* Case-study detail pages flow nearly end-to-end. The host theme's
   container cap is replaced with a wide rule + ~1in (96px) gutters
   so the body content has room to breathe. */
/* 
.dc-app.dc-cs-detail .dc-container,
.dc-app .dc-cs-detail-hero .dc-container,
.dc-app .dc-cs-v2-final .dc-container {
  max-width: none;
  padding: 0 64px;
}
.dc-app.dc-cs-detail .dc-cs-prose { max-width: none; }
.dc-app .dc-cs-detail-hero__inner { max-width: none !important; }
.dc-app .dc-cs-detail-hero__copy { max-width: 100% !important; }
*/
/* Body copy (paragraphs / lists) is still capped for legibility — it's
   the WRAPPER that goes wide, not the line length. The hero stays
   wide so the H1 and stat cards can stretch. */
.dc-app.dc-cs-detail .dc-cs-body-section > p,
.dc-app.dc-cs-detail .dc-cs-body-section > ul,
.dc-app.dc-cs-detail .dc-cs-body-section__copy > p,
.dc-app.dc-cs-detail .dc-cs-body-section__copy > ul {
  max-width: 880px;
}
/* For the inline pull-quote, keep it narrower so it reads as a callout. */
.dc-app.dc-cs-detail .dc-cs-inline-quote { max-width: 920px; }

@media (max-width: 900px) {
  .dc-app.dc-cs-detail .dc-container,
  .dc-app .dc-cs-detail-hero .dc-container,
  .dc-app .dc-cs-v2-final .dc-container {
    padding: 0 24px;
  }
}

/* ─── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .dc-app .dc-cs-body-section__split { grid-template-columns: 1fr; gap: 28px; }
  .dc-app .dc-cs-body-section__media { position: static; }
  .dc-app .dc-cs-pull-stat { width: 180px; height: 180px; }
  .dc-app .dc-cs-pull-stat__num { font-size: 44px; }
  .dc-app .dc-cs-media--shape-square .dc-cs-media__grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .dc-app .dc-cs-media__inline-stat { max-width: 220px; aspect-ratio: 1/1; margin: 0 auto; }
  .dc-app .dc-cs-media__inline-stat-num { font-size: 48px; }
  .dc-app .dc-cs-inline-video { border-radius: 16px; }
  .dc-app .dc-cs-detail-hero__logo .dc-cs-customer-logo,
  .dc-app .dc-cs-detail-hero__logo img { height: 64px; }
  .dc-app .dc-cs-detail-hero__logo--double .dc-cs-customer-logo:last-child,
  .dc-app .dc-cs-detail-hero__logo--double img:last-child { height: 56px; }
  .dc-app .dc-cs-detail-hero--dark { padding: 80px 0 90px; }
  .dc-app .dc-cs-detail-hero--dark h1 { font-size: 44px; line-height: 1.1; }
  .dc-app .dc-cs-detail-hero--dark .dc-cs-detail-hero__intro { font-size: 17px; }
  .dc-app .dc-cs-detail-hero--dark .dc-cs-headline-stat__num { font-size: 44px; }
  .dc-app .dc-cs-detail-hero:not(.dc-cs-detail-hero--dark) .dc-cs-headline-stat__num { font-size: 40px; }
  .dc-app .dc-cs-inline-quote { padding: 24px 24px 22px 52px; }
  .dc-app .dc-cs-inline-quote__mark { font-size: 60px; left: 14px; }
  .dc-app .dc-cs-inline-quote__text { font-size: 17px; }
}
@media (max-width: 480px) {
  .dc-app .dc-cs-pull-stat { width: 160px; height: 160px; }
  .dc-app .dc-cs-pull-stat__num { font-size: 38px; }
  .dc-app .dc-cs-detail-hero__logo .dc-cs-customer-logo,
  .dc-app .dc-cs-detail-hero__logo img { height: 52px; }
  .dc-app .dc-cs-detail-hero__logo--double .dc-cs-customer-logo:last-child,
  .dc-app .dc-cs-detail-hero__logo--double img:last-child { height: 44px; }
  .dc-app .dc-cs-detail-hero--dark h1 { font-size: 36px; }
  .dc-app .dc-cs-detail-hero__logo--chip { padding: 14px 18px; }
}

/* ─── Hero H1 word-by-word reveal (staggered) ─────────────────────── */
/* Each word is wrapped by HeadlineGrad in its own .dc-h1-word with an
   inline animation-delay. Starts hidden, finishes opaque + in place. */
.dc-app .dc-cs-detail-hero h1 .dc-h1-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(28px);
  filter: blur(6px);
  animation: dc-h1-reveal 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
@keyframes dc-h1-reveal {
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .dc-app .dc-cs-detail-hero h1 .dc-h1-word {
    opacity: 1;
    transform: none;
    filter: none;
    animation: none;
  }
}

/* ─── Quote band — solid deep-purple anchor section ──────────────── */
.dc-app .dc-cs-quote-band {
  position: relative;
  overflow: hidden;
  padding: 120px 0 130px;
  background: #5612BD; /* flat brand dark purple */
  color: #fff;
}
/* Hide the decorative blur blobs on this flat background */
.dc-app .dc-cs-quote-band__blur { display: none; }
.dc-app .dc-cs-quote-band__swoosh { display: none; }
.dc-app .dc-cs-quote-band > .dc-container { position: relative; z-index: 3; }
.dc-app .dc-cs-quote-band__blur {
  position: absolute;
  width: 700px; height: 700px;
  pointer-events: none;
  z-index: 1;
  filter: blur(8px);
  opacity: 0.45;
}
.dc-app .dc-cs-quote-band__blur--a { top: -220px; left: -180px; }
.dc-app .dc-cs-quote-band__blur--b { bottom: -240px; right: -160px; transform: scaleX(-1); opacity: 0.35; }

/* The signature Salesforce-style swoosh graphic — an asymmetric ribbon
   running diagonally behind the quote. Uses an inline SVG gradient
   so it sits on top of the dark band without a raster asset. */
.dc-app .dc-cs-quote-band__swoosh {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  opacity: 0.9;
}

.dc-app .dc-cs-quote-band__inner {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
  padding: 0 24px;
}
.dc-app .dc-cs-quote-band__mark {
  font: 800 140px/0.8 var(--dc-font);
  color: #85ECFF;
  opacity: 0.6;
  margin-bottom: -34px;
}
.dc-app .dc-cs-quote-band__text {
  font: 800 48px/1.32 var(--dc-font); /* Nunito Sans Black, non-italic */
  font-style: normal;
  color: #fff;
  letter-spacing: -0.015em;
  margin: 0 auto 40px;
  max-width: 1100px;
}
.dc-app .dc-cs-quote-band__cite {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.dc-app .dc-cs-quote-band__logos {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 14px;
  padding: 14px 22px;
  box-shadow: 0 20px 50px -24px rgba(0, 0, 0, 0.6);
}
.dc-app .dc-cs-quote-band__logos img,
.dc-app .dc-cs-quote-band__logos .dc-cs-customer-logo {
  height: 48px;
  max-height: none;
  width: auto;
  display: block;
}
.dc-app .dc-cs-quote-band__logos .dc-cs-customer-logo:last-child { height: 42px; }
.dc-app .dc-cs-quote-band__name {
  font: 700 15px/1.5 var(--dc-font);
  color: rgba(255, 255, 255, 0.82);
  letter-spacing: 0.02em;
}

/* ─── Pastel section gradients (Salesforce pattern) ──────────────────
   Body sections aren't flat white anymore — each carries a subtle
   180deg gradient from white to a tinted pastel at the bottom.
   We rotate through 3 tints so each section reads slightly
   differently as the eye scrolls. */
.dc-app.dc-cs-detail .dc-cs-prose .dc-cs-body-section {
  position: relative;
  padding: 64px 0 56px;
}
.dc-app.dc-cs-detail .dc-cs-prose .dc-cs-body-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 24px;
  background: linear-gradient(180deg, #FFFFFF 0%, rgb(249, 240, 255) 100%);
  /* Bleed past the prose container so the gradient reads as a band */
  left: calc(-1 * (50vw - 50%));
  right: calc(-1 * (50vw - 50%));
}
.dc-app.dc-cs-detail .dc-cs-prose .dc-cs-body-section:nth-of-type(2)::before {
  background: linear-gradient(180deg, #FFFFFF 0%, rgb(238, 244, 255) 100%);
}
.dc-app.dc-cs-detail .dc-cs-prose .dc-cs-body-section:nth-of-type(3)::before {
  background: linear-gradient(180deg, #FFFFFF 0%, rgb(222, 249, 243) 100%);
}
.dc-app.dc-cs-detail .dc-cs-prose .dc-cs-body-section:nth-of-type(4)::before {
  background: linear-gradient(180deg, #FFFFFF 0%, rgb(251, 243, 224) 100%);
}

/* ─── Responsive — quote band + reveal ─────────────────────────────── */
@media (max-width: 900px) {
  .dc-app .dc-cs-quote-band { padding: 80px 0 84px; }
  .dc-app .dc-cs-quote-band__text { font-size: 28px; line-height: 1.3; }
  .dc-app .dc-cs-quote-band__mark { font-size: 90px; margin-bottom: -18px; }
  .dc-app .dc-cs-quote-band__logos img,
  .dc-app .dc-cs-quote-band__logos .dc-cs-customer-logo { height: 38px; }
  .dc-app .dc-cs-quote-band__logos .dc-cs-customer-logo:last-child { height: 34px; }
}
@media (max-width: 480px) {
  .dc-app .dc-cs-quote-band__text { font-size: 22px; }
  .dc-app.dc-cs-detail .dc-cs-prose .dc-cs-body-section { padding: 40px 0; }
}

/* ─── Chapter tower + chapter layout ───────────────────────────────
   Two-column body: sticky tower nav on the left, prose sections on
   the right. The tower mirrors Salesforce's stacked-layer category
   nav — colorful glass-finish cards that highlight as you scroll. */
.dc-app .dc-cs-chapters {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}
.dc-app .dc-cs-tower {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.dc-app .dc-cs-tower__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  border-radius: 16px;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  isolation: isolate;
  /* Glass finish: gradient bg + top inner highlight + soft outer shadow */
  background: linear-gradient(135deg, #5612BD 0%, #9250F2 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15),
    0 14px 36px -18px rgba(86, 18, 189, 0.45);
  opacity: 0.62;
  transform: scale(0.96);
  transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s ease;
}
/* Frosted glint at the top edge of each card */
.dc-app .dc-cs-tower__card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(120% 50% at 50% -10%, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 60%);
}
.dc-app .dc-cs-tower__card--2 {
  background: linear-gradient(135deg, #1E3A8A 0%, #67E1F7 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15),
    0 14px 36px -18px rgba(103, 225, 247, 0.5);
}
.dc-app .dc-cs-tower__card--3 {
  background: linear-gradient(135deg, #9250F2 0%, #D7BDFF 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12),
    0 14px 36px -18px rgba(146, 80, 242, 0.55);
}
.dc-app .dc-cs-tower__card.is-active {
  opacity: 1;
  transform: scale(1.02);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    0 28px 60px -20px rgba(86, 18, 189, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.22);
}
.dc-app .dc-cs-tower__card:hover { opacity: 1; }
.dc-app .dc-cs-tower__num {
  font: 800 12px/1 var(--dc-font);
  letter-spacing: 0.22em;
  opacity: 0.78;
}
.dc-app .dc-cs-tower__title {
  font: 700 16px/1.3 var(--dc-font);
  letter-spacing: -0.005em;
}

/* ─── Caps stack — interactive expand/collapse tiles ──────────────
   Three large glass-finish tiles. Click one → expands to reveal its
   list with a smooth swoosh (grid-template-rows transition). Others
   collapse simultaneously. Always one open. */
.dc-app .dc-cs-caps-stack {
  display: grid;
  gap: 18px;
  max-width: 1100px;
  margin: 0 auto;
}
.dc-app .dc-cs-caps-tile {
  position: relative;
  border-radius: 22px;
  padding: 28px 32px;
  cursor: pointer;
  color: #fff;
  isolation: isolate;
  user-select: none;
  background: linear-gradient(135deg, #1B0345 0%, #4A154B 50%, #5612BD 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2),
    0 24px 56px -28px rgba(86, 18, 189, 0.4);
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1),
              box-shadow 0.4s ease,
              background 0.5s ease;
  overflow: hidden;
}
.dc-app .dc-cs-caps-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(140% 60% at 50% -20%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 60%);
}
.dc-app .dc-cs-caps-tile--dynamics {
  background: linear-gradient(135deg, #002A4B 0%, #1E3A8A 60%, #67E1F7 100%);
}
.dc-app .dc-cs-caps-tile--triggers {
  background: linear-gradient(135deg, #2D004B 0%, #9250F2 60%, #D7BDFF 100%);
}
.dc-app .dc-cs-caps-tile[aria-expanded="true"] {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2),
    0 36px 80px -32px rgba(86, 18, 189, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.16);
}
.dc-app .dc-cs-caps-tile__head {
  display: flex;
  align-items: center;
  gap: 22px;
  font: 800 22px/1 var(--dc-font);
  letter-spacing: -0.01em;
}
.dc-app .dc-cs-caps-tile__num {
  font: 800 12px/1 var(--dc-font);
  letter-spacing: 0.22em;
  opacity: 0.75;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
}
.dc-app .dc-cs-caps-tile__title { flex: 1; font-size: 26px; }
.dc-app .dc-cs-caps-tile__count {
  font: 700 12px/1 var(--dc-font);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.72;
}
.dc-app .dc-cs-caps-tile__chev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), background 0.3s ease;
}
.dc-app .dc-cs-caps-tile[aria-expanded="true"] .dc-cs-caps-tile__chev {
  transform: rotate(180deg);
  background: rgba(255, 255, 255, 0.22);
}

/* Swoosh — collapse uses grid-template-rows trick (1fr <-> 0fr) so
   the height animates without measuring the content. */
.dc-app .dc-cs-caps-tile__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.55s cubic-bezier(0.2, 0.7, 0.2, 1),
              opacity 0.35s ease 0.05s,
              padding-top 0.4s ease;
  opacity: 0;
  padding-top: 0;
}
.dc-app .dc-cs-caps-tile[aria-expanded="true"] .dc-cs-caps-tile__body {
  grid-template-rows: 1fr;
  opacity: 1;
  padding-top: 22px;
}
.dc-app .dc-cs-caps-tile__body > * {
  min-height: 0;
  overflow: hidden;
}
.dc-app .dc-cs-caps-tile__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 28px;
  margin: 0;
  padding: 14px 0 4px;
  list-style: none;
}
.dc-app .dc-cs-caps-tile__list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 600 15px/1.4 var(--dc-font);
  color: rgba(255, 255, 255, 0.94);
}

/* ─── H1 gradient — toned-down single cyan sweep on dark hero ─── */
.dc-app .dc-cs-detail-hero--dark h1 .dc-grad-word {
  background: linear-gradient(110deg, #85ECFF 0%, #9DE5FF 60%, #D7BDFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ─── Responsive: tower collapses to horizontal pills on tablet ─── */
@media (max-width: 1100px) {
  .dc-app .dc-cs-chapters {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .dc-app .dc-cs-tower {
    position: relative;
    top: 0;
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .dc-app .dc-cs-tower__card {
    flex: 0 0 240px;
  }
}
@media (max-width: 900px) {
  .dc-app .dc-cs-caps-tile { padding: 22px 22px; border-radius: 18px; }
  .dc-app .dc-cs-caps-tile__head { gap: 14px; }
  .dc-app .dc-cs-caps-tile__title { font-size: 20px; }
  .dc-app .dc-cs-caps-tile__list { grid-template-columns: 1fr 1fr; gap: 10px 18px; }
}
@media (max-width: 480px) {
  .dc-app .dc-cs-caps-tile__list { grid-template-columns: 1fr; }
  .dc-app .dc-cs-caps-tile__count { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   HERO REFRESH — shader gradient background, stats moved out
   ═══════════════════════════════════════════════════════════════════ */
.dc-app .dc-cs-detail-hero--shader {
  position: relative;
  overflow: hidden;
  padding: 110px 0 130px;
  background: #0E0125;
  color: #fff;
  isolation: isolate;
}
.dc-app .dc-cs-detail-hero__shader {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
  opacity: 0.85;
  /* The webm is mostly purples + cyans already; blend it gently. */
  filter: saturate(1.1) contrast(1.05);
}
/* Dark veil + vignette so text reads cleanly over the moving gradient. */
.dc-app .dc-cs-detail-hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 10%, rgba(14, 1, 37, 0.10) 0%, rgba(14, 1, 37, 0.55) 60%, rgba(14, 1, 37, 0.85) 100%),
    linear-gradient(180deg, rgba(14, 1, 37, 0.10) 0%, rgba(14, 1, 37, 0.55) 100%);
}
.dc-app .dc-cs-detail-hero--shader > .dc-container { position: relative; z-index: 2; }

/* Override the previous dark hero stat-cards inside this variant (we
   moved stats out, so we don't want any leftover card chrome bleeding). */
.dc-app .dc-cs-detail-hero--shader .dc-cs-headline-stats { display: none; }
.dc-app .dc-cs-detail-hero--shader h1 {
  font: 800 96px/1.02 var(--dc-font);
  letter-spacing: -0.025em;
  max-width: 1200px;
  margin: 0 0 24px;
  color: #fff;
}
.dc-app .dc-cs-detail-hero--shader .dc-cs-detail-hero__intro {
  color: rgba(255, 255, 255, 0.86);
  font: 400 19px/1.65 var(--dc-font);
  max-width: 820px;
  margin: 18px 0 36px;
}

/* ═══════════════════════════════════════════════════════════════════
   STAT STRIP — sits below hero, full-bleed dark band, big count-up
   ═══════════════════════════════════════════════════════════════════ */
.dc-app .dc-cs-stat-strip {
  position: relative;
  background:
    linear-gradient(180deg, #0E0125 0%, #1B0345 100%);
  padding: 72px 0 84px;
  color: #fff;
}
.dc-app .dc-cs-stat-strip__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
}
.dc-app .dc-cs-stat-strip__item {
  position: relative;
  padding: 32px 28px 28px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  isolation: isolate;
  overflow: hidden;
}
/* Subtle gradient glow behind each card — colored per index. */
.dc-app .dc-cs-stat-strip__item::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(80% 60% at 20% 0%, rgba(133, 236, 255, 0.18) 0%, transparent 60%);
}
.dc-app .dc-cs-stat-strip__item:nth-child(2)::before {
  background: radial-gradient(80% 60% at 20% 0%, rgba(146, 80, 242, 0.22) 0%, transparent 60%);
}
.dc-app .dc-cs-stat-strip__item:nth-child(3)::before {
  background: radial-gradient(80% 60% at 20% 0%, rgba(103, 225, 247, 0.22) 0%, transparent 60%);
}
.dc-app .dc-cs-stat-strip__item:nth-child(4)::before {
  background: radial-gradient(80% 60% at 20% 0%, rgba(215, 189, 255, 0.22) 0%, transparent 60%);
}
.dc-app .dc-cs-stat-strip__num {
  margin-bottom: 14px;
  line-height: 1;
}
.dc-app .dc-cs-stat-strip__num-val {
  display: inline-block;
  font: 800 88px/1 var(--dc-font);
  letter-spacing: -0.035em;
  background: linear-gradient(110deg, #85ECFF 0%, #9DE5FF 35%, #D7BDFF 65%, #FFFFFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.dc-app .dc-cs-stat-strip__lab {
  font: 600 14px/1.45 var(--dc-font);
  color: rgba(255, 255, 255, 0.78);
  letter-spacing: 0.005em;
  max-width: 260px;
}

/* ═══════════════════════════════════════════════════════════════════
   NOOMO MOMENT 1 — count-up "explode" reveal
   The number starts scaled-down + blurred, animates to its true size
   as soon as it scrolls into view. Pairs naturally with count-up.
   ═══════════════════════════════════════════════════════════════════ */
.dc-app .dc-cs-stat-strip__pop {
  opacity: 0;
  transform: scale(0.55);
  filter: blur(10px);
  animation: dc-pop-in 0.85s cubic-bezier(0.18, 0.85, 0.25, 1.05) forwards;
  animation-play-state: paused;
}
.dc-app .reveal.in .dc-cs-stat-strip__pop {
  animation-play-state: running;
}
@keyframes dc-pop-in {
  0%   { opacity: 0; transform: scale(0.55); filter: blur(10px); }
  60%  { opacity: 1; transform: scale(1.06); filter: blur(0); }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
  .dc-app .dc-cs-stat-strip__pop {
    opacity: 1; transform: none; filter: none; animation: none;
  }
}
/* Stagger across the 4 stat cards so they explode one after another. */
.dc-app .dc-cs-stat-strip__grid > :nth-child(1) .dc-cs-stat-strip__pop { animation-delay: 0ms; }
.dc-app .dc-cs-stat-strip__grid > :nth-child(2) .dc-cs-stat-strip__pop { animation-delay: 120ms; }
.dc-app .dc-cs-stat-strip__grid > :nth-child(3) .dc-cs-stat-strip__pop { animation-delay: 240ms; }
.dc-app .dc-cs-stat-strip__grid > :nth-child(4) .dc-cs-stat-strip__pop { animation-delay: 360ms; }

/* ═══════════════════════════════════════════════════════════════════
   NOOMO MOMENT 2 — Section H2 char-by-char reveal
   Applied via JS that wraps each char in a span with stagger delay.
   ═══════════════════════════════════════════════════════════════════ */
.dc-app .dc-cs-body-section h2 .dc-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  filter: blur(4px);
  animation: dc-char-reveal 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
  animation-play-state: paused;
}
.dc-app .reveal.in .dc-cs-body-section h2 .dc-char,
.dc-app .dc-cs-body-section.reveal.in h2 .dc-char {
  animation-play-state: running;
}
@keyframes dc-char-reveal {
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
  .dc-app .dc-cs-body-section h2 .dc-char {
    opacity: 1; transform: none; filter: none; animation: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   NOOMO MOMENT 3 — 3D mouse-follow tilt on cards
   JS adds CSS vars --tilt-x / --tilt-y on mousemove inside any
   element with [data-tilt]. The CSS reads them and tilts.
   ═══════════════════════════════════════════════════════════════════ */
.dc-app [data-tilt] {
  transition: transform 0.25s ease-out;
  transform-style: preserve-3d;
  will-change: transform;
}
.dc-app [data-tilt].is-tilted {
  transform: perspective(1000px)
             rotateX(calc(var(--tilt-y, 0) * 6deg))
             rotateY(calc(var(--tilt-x, 0) * 6deg))
             translateZ(0);
  transition: transform 0.05s linear;
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .dc-app .dc-cs-stat-strip__grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .dc-app .dc-cs-detail-hero--shader h1 { font-size: 72px; }
}
@media (max-width: 900px) {
  .dc-app .dc-cs-detail-hero--shader { padding: 80px 0 90px; }
  .dc-app .dc-cs-detail-hero--shader h1 { font-size: 48px; }
  .dc-app .dc-cs-stat-strip { padding: 52px 0 56px; }
  .dc-app .dc-cs-stat-strip__num-val { font-size: 64px; }
  .dc-app .dc-cs-stat-strip__item { padding: 24px 22px 22px; border-radius: 18px; }
}
@media (max-width: 480px) {
  .dc-app .dc-cs-detail-hero--shader h1 { font-size: 38px; }
  .dc-app .dc-cs-stat-strip__grid { grid-template-columns: 1fr; }
  .dc-app .dc-cs-stat-strip__num-val { font-size: 56px; }
}

/* ═══════════════════════════════════════════════════════════════════
   H1 gradient — pure cyan range so it reads cleanly on dark hero
   ═══════════════════════════════════════════════════════════════════ */
.dc-app .dc-cs-detail-hero--shader h1 .dc-grad-word {
  background: linear-gradient(110deg, #85ECFF 0%, #67E1F7 50%, #9DE5FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ═══════════════════════════════════════════════════════════════════
   Inline hero stats — sit between intro and CTA, compact treatment
   ═══════════════════════════════════════════════════════════════════ */
.dc-app .dc-cs-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin: 0 0 32px;
  max-width: 1100px;
}
.dc-app .dc-cs-hero-stats__item {
  padding: 18px 20px 16px;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}
.dc-app .dc-cs-hero-stats__item:first-child { padding-left: 0; border-left: 0; }
.dc-app .dc-cs-hero-stats__num { line-height: 1; margin-bottom: 10px; }
.dc-app .dc-cs-hero-stats__num-val {
  display: inline-block;
  font: 800 64px/1 var(--dc-font);
  letter-spacing: -0.035em;
  background: linear-gradient(110deg, #85ECFF 0%, #9DE5FF 60%, #FFFFFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.dc-app .dc-cs-hero-stats__lab {
  font: 600 13px/1.4 var(--dc-font);
  color: rgba(255, 255, 255, 0.74);
  letter-spacing: 0.005em;
}
/* Reuse the existing "explode" pop reveal on these too. */
.dc-app .dc-cs-hero-stats__pop {
  opacity: 0;
  transform: scale(0.55);
  filter: blur(10px);
  animation: dc-pop-in 0.85s cubic-bezier(0.18, 0.85, 0.25, 1.05) forwards;
  animation-play-state: paused;
}
.dc-app .reveal.in .dc-cs-hero-stats__pop { animation-play-state: running; }
.dc-app .dc-cs-hero-stats > :nth-child(1) .dc-cs-hero-stats__pop { animation-delay: 0ms; }
.dc-app .dc-cs-hero-stats > :nth-child(2) .dc-cs-hero-stats__pop { animation-delay: 100ms; }
.dc-app .dc-cs-hero-stats > :nth-child(3) .dc-cs-hero-stats__pop { animation-delay: 200ms; }
.dc-app .dc-cs-hero-stats > :nth-child(4) .dc-cs-hero-stats__pop { animation-delay: 300ms; }

/* Old standalone stat-strip section is gone — hide if any leftover. */
.dc-app .dc-cs-stat-strip { display: none; }

/* ═══════════════════════════════════════════════════════════════════
   Playing-card fan — Channels / Dynamic / Triggers
   3 oversized cards, rotated, slightly overlapping. Neutral palette
   matches the reference: white / sage / black. The whole section
   sits on a soft warm surface so the cards "float" against it.
   ═══════════════════════════════════════════════════════════════════ */
.dc-app .dc-cs-fan-section {
  background: #FFFFFF;
  position: relative;
  overflow: hidden;
}
/* Override the global pastel-gradient body section bg if it cascades */
.dc-app .dc-cs-fan-section::before { content: none; }

.dc-app .dc-cs-fan {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 0;
  min-height: 540px;
  padding: 40px 0 60px;
  /* perspective for any 3D card movement */
  perspective: 1200px;
}
.dc-app .dc-cs-fan-card {
  position: relative;
  width: 340px;
  min-height: 460px;
  padding: 36px 36px 40px;
  border-radius: 24px;
  box-shadow:
    0 28px 60px -20px rgba(20, 16, 12, 0.28),
    0 8px 18px -10px rgba(20, 16, 12, 0.15);
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  transform-origin: 50% 100%;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1),
              box-shadow 0.4s ease;
  will-change: transform;
}
/* Card 1: light purple — left */
.dc-app .dc-cs-fan-card--1 {
  background: #9250F2;
  color: #FFFFFF;
  transform: rotate(-8deg) translateX(70px) translateY(8px);
  z-index: 1;
}
/* Card 2: cyan — middle */
.dc-app .dc-cs-fan-card--2 {
  background: #67E1F7;
  color: #100D0C;
  transform: rotate(-2deg) translateY(-12px);
  z-index: 2;
  margin: 0 -50px;  /* overlap with neighbors */
}
/* Card 3: dark purple — right */
.dc-app .dc-cs-fan-card--3 {
  background: #5612BD;
  color: #FFFFFF;
  transform: rotate(7deg) translateX(-70px) translateY(8px);
  z-index: 1;
}

/* Hover lift each card individually, with deeper shadow */
.dc-app .dc-cs-fan-card:hover {
  z-index: 4;
  transform: rotate(0deg) translateY(-24px) scale(1.04);
  box-shadow:
    0 50px 100px -28px rgba(20, 16, 12, 0.4),
    0 16px 30px -16px rgba(20, 16, 12, 0.22);
}

.dc-app .dc-cs-fan-card__title {
  font: 800 44px/1.05 var(--dc-font);
  letter-spacing: -0.025em;
  margin: 0 0 auto;  /* big title up top, list pinned to bottom */
  color: inherit;
  padding-bottom: 32px;
}
.dc-app .dc-cs-fan-card__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dc-app .dc-cs-fan-card__list li {
  font: 600 17px/1.3 var(--dc-font);
  color: inherit;
}
/* Override the global prose ul bullet styling */
.dc-app .dc-cs-fan-card__list li::before { content: none !important; }

/* Scroll-in animation: cards fan out from a stacked center position */
.dc-app .dc-cs-fan-card {
  opacity: 0;
}
.dc-app .reveal.in .dc-cs-fan-card {
  animation: dc-fan-in 0.95s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
.dc-app .reveal.in .dc-cs-fan-card--1 { animation-delay: 80ms; }
.dc-app .reveal.in .dc-cs-fan-card--2 { animation-delay: 220ms; }
.dc-app .reveal.in .dc-cs-fan-card--3 { animation-delay: 360ms; }

@keyframes dc-fan-in {
  0% {
    opacity: 0;
    transform: rotate(0deg) translateY(60px) scale(0.85);
  }
  100% {
    opacity: 1;
    /* end-state transform is set by per-card --1 / --2 / --3 rules */
  }
}
/* Hard-set end-state per card so the animation lands on the rotation */
.dc-app .reveal.in .dc-cs-fan-card--1 {
  animation-name: dc-fan-in-1;
}
.dc-app .reveal.in .dc-cs-fan-card--2 {
  animation-name: dc-fan-in-2;
}
.dc-app .reveal.in .dc-cs-fan-card--3 {
  animation-name: dc-fan-in-3;
}
@keyframes dc-fan-in-1 {
  0%   { opacity: 0; transform: rotate(0deg) translateX(0) translateY(60px) scale(0.85); }
  100% { opacity: 1; transform: rotate(-8deg) translateX(70px) translateY(8px); }
}
@keyframes dc-fan-in-2 {
  0%   { opacity: 0; transform: rotate(0deg) translateY(80px) scale(0.85); }
  100% { opacity: 1; transform: rotate(-2deg) translateY(-12px); }
}
@keyframes dc-fan-in-3 {
  0%   { opacity: 0; transform: rotate(0deg) translateX(0) translateY(60px) scale(0.85); }
  100% { opacity: 1; transform: rotate(7deg) translateX(-70px) translateY(8px); }
}

/* Kill the dark accordion remnants so they don't bleed into anywhere */
.dc-app .dc-cs-caps-stack,
.dc-app .dc-cs-caps-tile { display: none; }

@media (max-width: 1100px) {
  .dc-app .dc-cs-hero-stats { grid-template-columns: repeat(2, 1fr); gap: 14px 18px; }
  .dc-app .dc-cs-hero-stats__num-val { font-size: 52px; }
}
@media (max-width: 900px) {
  .dc-app .dc-cs-fan { flex-direction: column; align-items: center; min-height: 0; gap: 18px; padding: 24px 0; }
  .dc-app .dc-cs-fan-card { width: 100%; max-width: 360px; margin: 0; }
  .dc-app .dc-cs-fan-card--1,
  .dc-app .dc-cs-fan-card--2,
  .dc-app .dc-cs-fan-card--3 {
    transform: none;
  }
  @keyframes dc-fan-in-1 { 0%{opacity:0;transform:translateY(30px);} 100%{opacity:1;transform:none;} }
  @keyframes dc-fan-in-2 { 0%{opacity:0;transform:translateY(30px);} 100%{opacity:1;transform:none;} }
  @keyframes dc-fan-in-3 { 0%{opacity:0;transform:translateY(30px);} 100%{opacity:1;transform:none;} }
  .dc-app .dc-cs-fan-card:hover { transform: translateY(-6px) scale(1.01); }
}
@media (max-width: 480px) {
  .dc-app .dc-cs-hero-stats { grid-template-columns: 1fr 1fr; }
  .dc-app .dc-cs-hero-stats__num-val { font-size: 44px; }
  .dc-app .dc-cs-fan-card { padding: 26px 26px 28px; min-height: 380px; }
  .dc-app .dc-cs-fan-card__num { font-size: 64px; }
  .dc-app .dc-cs-fan-card__title { font-size: 28px; }
}

/* ─── Docked right-side pull-stat (no media but has a stat sphere) ─
   Used in section 1 where the 54% sphere should float alongside the
   copy instead of dropping below it. */
.dc-app .dc-cs-body-section__split--stat {
  align-items: start;
}
.dc-app .dc-cs-body-section__media--stat {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  max-width: 360px;
  position: sticky;
  top: 100px;
}
/* Match the size of the inline-stat sphere in section 3 (GetGo +
   67% row). Both spheres now ~320px so they read as the same
   visual element across the page. */
.dc-app .dc-cs-body-section__media--stat .dc-cs-pull-stat {
  margin: 0 auto;
  width: 320px;
  height: 320px;
}
.dc-app .dc-cs-body-section__media--stat .dc-cs-pull-stat__num {
  font-size: 80px;
}
.dc-app .dc-cs-body-section__media--stat .dc-cs-pull-stat__lab {
  font-size: 15px;
  max-width: 200px;
  margin-top: 12px;
}
@media (max-width: 900px) {
  .dc-app .dc-cs-body-section__media--stat { position: static; max-width: 100%; }
  .dc-app .dc-cs-body-section__media--stat .dc-cs-pull-stat { width: 240px; height: 240px; }
  .dc-app .dc-cs-body-section__media--stat .dc-cs-pull-stat__num { font-size: 60px; }
}

/* ═══════════════════════════════════════════════════════════════════
   Marker reveal — broad cyan bars cover each LINE of the quote;
   on scroll-into-section they wipe off left→right (one per line,
   staggered). On scroll-UP back past the section, bars come back.
   Per-line bars are inserted by initQuoteMarker() in animations.js
   after layout (so we know where each line wraps).
   ═══════════════════════════════════════════════════════════════════ */
.dc-app .dc-cs-quote-marker {
  position: relative;
  line-height: 1.32;
  /* Clip the absolutely-positioned bars to the blockquote box so a
     bar can never visually overflow into the figcaption below
     (which holds the logos + cite). The padding + negative margin
     pair preserves the original text position; only the clip box
     changes. */
  overflow: hidden;
  padding: 6px 14px;
  margin: -6px -14px 0;
}
/* Guarantee a visible gap between the clipped blockquote box and
   the figcaption — keeps the logos visually separate even if a
   late layout reflow nudges measurements. */
.dc-app .dc-cs-quote-band__cite { margin-top: 14px; }
/* Each word stays in normal flow; it provides the line-position info
   we need to draw per-line bars. Text is always opaque white. */
.dc-app .dc-cs-quote-marker__word {
  position: relative;
  display: inline-block;
  color: #fff;
  z-index: 1;
}
.dc-app .dc-cs-quote-marker__text {
  position: relative;
  z-index: 1;
  color: #fff;
}
/* Per-line bar — absolutely positioned, dimensions set inline by JS.
   Broad chunky cyan band, slight skew for the loose marker feel. */
.dc-app .dc-cs-quote-marker__bar {
  position: absolute;
  background: #67E1F7;
  border-radius: 2px;
  transform-origin: right center;
  transform: scaleX(1) skewX(-3deg);
  z-index: 2;
  pointer-events: none;
  transition: transform 0.85s cubic-bezier(0.77, 0, 0.175, 1);
}
.dc-app .dc-cs-section.dc-cs-section--tight-to-quote { padding-bottom: 0; }
.dc-app #full-story:has(+ .dc-cs-quote-band),
.dc-app #full-story:has(+ .dc-cs-fan-section) {
  padding-bottom: 0;
  overflow: visible;
}
.dc-app #full-story:has(+ .dc-cs-quote-band) .dc-cs-chapter:last-child .dc-cs-body-section,
.dc-app #full-story:has(+ .dc-cs-fan-section) .dc-cs-chapter:last-child .dc-cs-body-section {
  margin-bottom: 0;
  padding-bottom: 80px;
}
.dc-app #full-story:has(+ .dc-cs-quote-band) .dc-cs-chapter:last-child .dc-cs-body-section > *:last-child,
.dc-app #full-story:has(+ .dc-cs-fan-section) .dc-cs-chapter:last-child .dc-cs-body-section > *:last-child { margin-bottom: 0; }
/* When the fan section follows the body prose directly, tighten the
   gap to a single ~80px breathing room (instead of the default 100px
   top + 80px body bottom = 180px white band) but don't zero it —
   the heading needs some breathing room above it. */
.dc-app #full-story + .dc-cs-fan-section { padding-top: 80px; }
.dc-app .dc-cs-link-cta-wrap { margin-bottom: 0; }
.dc-app .dc-cs-link-cta-wrap { margin: 28px 0 0; }
.dc-app .dc-cs-link-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 999px;
  background: #F3ECFF;
  color: #5612BD;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 1px solid #D7BDFF;
  transition: background 0.18s ease, transform 0.18s ease;
}
.dc-app .dc-cs-link-cta:hover { background: #E8DBFF; transform: translateY(-1px); }
.dc-app .dc-cs-link-cta__arrow { font-weight: 800; }
.dc-app .dc-cs-body-section a { color: #5612BD; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.dc-app .dc-cs-body-section a:hover { color: #9250F2; }
/* Revealed state: bars wipe off to the right */
.dc-app .dc-cs-quote-band__inner.is-revealed .dc-cs-quote-marker__bar {
  transform: scaleX(0) skewX(-3deg);
}
@media (prefers-reduced-motion: reduce) {
  .dc-app .dc-cs-quote-marker__bar {
    transition: none;
    transform: scaleX(0);
  }
}

/* ─────────────────────────────────────────────────────────────────────
   Diageo case-study additions — hero award chip, dedicated award band,
   and the orbit cards scope section. Lavender / cyan tinted-glass
   pattern is scoped under .dc-cs-orbit-section.
   ───────────────────────────────────────────────────────────────────── */

/* ─── Hero eyebrow row: lets the eyebrow + award chip sit on one line ── */
.dc-app .dc-cs-detail-hero__eyebrow-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

/* ─── Hero award chip — small badge lockup next to the eyebrow ──────── */
.dc-app .dc-cs-hero-award-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(133, 236, 255, 0.45);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  text-decoration: none;
  color: #fff;
  transition: background 240ms ease, border-color 240ms ease, transform 240ms ease;
  box-shadow: 0 8px 24px -12px rgba(103, 225, 247, 0.45);
}
.dc-app .dc-cs-hero-award-chip:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(133, 236, 255, 0.85);
  transform: translateY(-1px);
  color: #fff;
}
.dc-app .dc-cs-hero-award-chip__badge {
  width: 34px;
  height: 34px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
}
.dc-app .dc-cs-hero-award-chip__label {
  font: 700 12px/1.2 var(--dc-font);
  letter-spacing: 0.04em;
  color: #fff;
  white-space: nowrap;
}
@media (max-width: 480px) {
  .dc-app .dc-cs-hero-award-chip__label {
    white-space: normal;
  }
  .dc-app .dc-cs-hero-award-chip {
    padding: 6px 12px 6px 6px;
  }
  .dc-app .dc-cs-hero-award-chip__badge { width: 28px; height: 28px; }
}

/* ─── Dedicated Award band — sits between hero and video ─────────────── */
.dc-app .dc-cs-award-band {
  background: linear-gradient(180deg, #F9F5FF 0%, #ffffff 100%);
  padding: 72px 0 80px;
}
.dc-app .dc-cs-award-band__inner {
  display: grid;
  grid-template-columns: minmax(260px, 360px) 1fr;
  gap: 56px;
  align-items: center;
}
.dc-app .dc-cs-award-band__motion {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background: #0E0125;
  aspect-ratio: 1 / 1;
  box-shadow:
    0 30px 60px -28px rgba(86, 18, 189, 0.55),
    0 0 0 1px rgba(215, 189, 255, 0.35);
}
.dc-app .dc-cs-award-band__video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.dc-app .dc-cs-award-band__copy {
  position: relative;
}
.dc-app .dc-cs-award-band__badge {
  width: 88px;
  height: auto;
  display: block;
  margin-bottom: 18px;
  filter: drop-shadow(0 6px 16px rgba(86, 18, 189, 0.25));
}
.dc-app .dc-cs-award-band__h {
  font: 800 44px/1.06 var(--dc-font);
  letter-spacing: -0.02em;
  color: var(--dc-purple-deep);
  margin: 12px 0 16px;
}
.dc-app .dc-cs-award-band__h .dc-grad-word {
  background-image: linear-gradient(110deg, #67E1F7 0%, #5612BD 35%, #9250F2 70%, #67E1F7 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.dc-app .dc-cs-award-band__p {
  font: 400 18px/1.55 var(--dc-font);
  color: var(--dc-purple-deep);
  max-width: 56ch;
  margin: 0 0 22px;
}
@media (max-width: 900px) {
  .dc-app .dc-cs-award-band { padding: 56px 0 64px; }
  .dc-app .dc-cs-award-band__inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .dc-app .dc-cs-award-band__motion {
    max-width: 320px;
    margin: 0 auto;
  }
  .dc-app .dc-cs-award-band__badge { width: 72px; margin-bottom: 14px; }
  .dc-app .dc-cs-award-band__h { font-size: 34px; }
  .dc-app .dc-cs-award-band__p { font-size: 16px; }
}
@media (max-width: 480px) {
  .dc-app .dc-cs-award-band__h { font-size: 28px; }
}

/* ─── Orbit section — sticky-scroll stack reveal ─────────────────────
   Section is tall (~520vh) on desktop so the user has runway to
   scroll through all 6 cards while the inner sticky container holds
   the deck pinned to the viewport. */
.dc-app .dc-cs-orbit-section {
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, #F9F5FF 100%);
  padding: 0;
  /* Override the default .dc-cs-section overflow:hidden — that would
     kill position:sticky on the inner pane. Using `clip` instead. */
  overflow: clip;
}
@media (min-width: 901px) {
  /* 200vh = 100vh of scroll runway during which the cards glide
     from scattered to docked. The convergence band (see initOrbit)
     covers most of that runway so the motion reads as a graceful
     glide, not a snap. */
  .dc-app .dc-cs-orbit-section { min-height: 200vh; }
}
.dc-app .dc-cs-orbit-section__sticky {
  position: relative;
  padding: 80px 0 96px;
}
@media (min-width: 901px) {
  .dc-app .dc-cs-orbit-section__sticky {
    position: sticky;
    top: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px 0;
  }
}
.dc-app .dc-cs-orbit__sub {
  font: 400 18px/1.5 var(--dc-font);
  color: var(--dc-purple-deep);
  opacity: 0.78;
  margin: 12px auto 0;
  max-width: 60ch;
  text-align: center;
}
.dc-app .dc-cs-orbit {
  position: relative;
}
.dc-app .dc-cs-orbit__stage {
  position: relative;
  /* Tall enough to hold a 6-card vertical stack with each card
     peeking ~130px below the one in front of it. */
  height: 920px;
  margin: 0 auto;
  perspective: 1800px;
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
}
.dc-app .dc-cs-orbit__card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 340px;
  min-height: 270px;
  padding: 28px 30px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-radius: 22px;
  /* CSS vars set by JS: --t is 0..1 along the arc, --depth a normalized
     z-depth so cards near the apex scale up subtly. */
  --t: 0;
  --depth: 0;
  /* Scattered → converged collage. Each card has a per-nth-of-type
     spread origin (--spread-x/y, asymmetric across the viewport) and
     a final docked position (--final-x/y, a tight hexagon). The
     --convergence custom property (0..1) is inherited from the stage
     and lerps the card from its scattered spot to its final dock.
     Do NOT set --convergence on the card itself — it must inherit. */
  --rest-rot: 0deg;
  --spread-x: 0px;
  --spread-y: 0px;
  --final-x: 0px;
  --final-y: 0px;
  --tx: calc(var(--spread-x) + var(--convergence, 0) * (var(--final-x) - var(--spread-x)));
  --ty: calc(var(--spread-y) + var(--convergence, 0) * (var(--final-y) - var(--spread-y)));
  /* Flat rectangles — no Y/X 3D tilt. Only a small per-card Z
     rotation so the collage doesn't read as a rigid grid. */
  transform: translate(-50%, -50%)
             translateX(var(--tx))
             translateY(var(--ty))
             rotateZ(var(--rest-rot));
  opacity: 1;
  transform-style: preserve-3d;
  will-change: transform;
  will-change: transform;
  /* Tinted-glass slab. Restored from the earlier stacked-deck pass:
     three background layers (top-light catch, vertical hue shade,
     base tint) + a stacked box-shadow that fakes the slab thickness
     and the deep drop. Per-card hue variation set via nth-of-type. */
  --tone-light:  rgba(176, 134, 252, 0.96);
  --tone-mid:    rgba(146, 80, 242, 0.96);
  --tone-deep:   rgba(96, 28, 198, 0.96);
  --tone-edge:   rgba(58, 14, 130, 0.70);
  --tone-shadow: rgba(36, 6, 81, 0.55);
  /* Uniform-surface slab lighting. Three layers:
     1. Soft top-edge specular highlight (overhead light catch).
     2. A near-uniform body color — light at top easing into mid by
        ~40%, then mid all the way down. No deep/dark bottom, so the
        text reads against a consistent surface instead of a muddy
        vignette.
     The slight darkening at the very bottom corners comes from the
     inset shadow stack, not the gradient — matches the slab-thickness
     reflection from a single overhead light source. */
  background:
    radial-gradient(ellipse 130% 75% at 50% -8%,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0.12) 22%,
      rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg,
      var(--tone-light) 0%,
      var(--tone-mid)   42%,
      var(--tone-mid)   100%);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow:
    0 18px 0 -2px var(--tone-edge),
    0 30px 0 -12px var(--tone-edge),
    0 70px 90px -28px var(--tone-shadow),
    0 12px 36px -8px rgba(146, 80, 242, 0.32),
    inset 0 2px 0 rgba(255, 255, 255, 0.70),
    inset 0 -3px 6px -4px rgba(36, 6, 81, 0.35);
  color: #fff;
  overflow: hidden;
}
/* A soft, wide top-light bloom — strengthens the overhead-lighting
   read without any streaking. Single radial, low alpha. */
.dc-app .dc-cs-orbit__card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(ellipse 80% 50% at 50% 0%,
    rgba(255, 255, 255, 0.20) 0%,
    rgba(255, 255, 255, 0) 70%);
  z-index: 0;
}
/* Bottom vignette using the card's OWN darker tone — gives the
   white text a subtle dark ground without introducing an off-hue
   grey shadow. The lightest cards override text color instead
   (see nth-of-type(1) below). */
.dc-app .dc-cs-orbit__card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg,
    transparent 45%,
    var(--tone-deep) 100%);
  opacity: 0.55;
  z-index: 0;
}
/* Per-card position + distinct brand color. Each card sits centered
   on the stage and is pushed down by a progressive Y offset, with a
   descending z-index so the first card sits on top of the stack.
   Colors travel cyan → purple-deep down the deck. The transform
   keeps the rotateY/X tilt from the base card rule.

   --stack-y is the per-card translateY in px. We use it inside the
   transform via composition so the base rotate stays unchanged. */
.dc-app .dc-cs-orbit__card:nth-of-type(1) {
  --tone-light:  rgba(170, 240, 252, 0.97);
  --tone-mid:    rgba(103, 225, 247, 0.96);
  --tone-deep:   rgba(40, 165, 200, 0.96);
  --tone-edge:   rgba(15, 90, 120, 0.70);
  --tone-shadow: rgba(15, 90, 120, 0.55);
  /* scattered: upper-left; docked: top-left of 3x2 collage */
  --spread-x: -34vw;
  --spread-y: -26vh;
  --final-x: -340px;
  --final-y: -160px;
  --rest-rot: -4deg;
  z-index: 6;
}
.dc-app .dc-cs-orbit__card:nth-of-type(2) {
  --tone-light:  rgba(200, 240, 255, 0.97);
  --tone-mid:    rgba(157, 229, 255, 0.96);
  --tone-deep:   rgba(85, 175, 220, 0.96);
  --tone-edge:   rgba(30, 95, 150, 0.70);
  --tone-shadow: rgba(30, 95, 150, 0.55);
  /* scattered: upper-right corner; docked: top-center */
  --spread-x: 36vw;
  --spread-y: -34vh;
  --final-x: 0px;
  --final-y: -180px;
  --rest-rot: 5deg;
  z-index: 5;
}
.dc-app .dc-cs-orbit__card:nth-of-type(3) {
  --tone-light:  rgba(232, 215, 255, 0.97);
  --tone-mid:    rgba(190, 160, 250, 0.96);
  --tone-deep:   rgba(150, 110, 235, 0.96);
  --tone-edge:   rgba(70, 30, 160, 0.70);
  --tone-shadow: rgba(70, 30, 160, 0.55);
  /* scattered: mid-right; docked: top-right */
  --spread-x: 40vw;
  --spread-y: 10vh;
  --final-x: 340px;
  --final-y: -150px;
  --rest-rot: -2deg;
  z-index: 4;
}
.dc-app .dc-cs-orbit__card:nth-of-type(4) {
  --tone-light:  rgba(180, 130, 252, 0.97);
  --tone-mid:    rgba(146, 80, 242, 0.96);
  --tone-deep:   rgba(105, 40, 200, 0.96);
  --tone-edge:   rgba(50, 10, 130, 0.70);
  --tone-shadow: rgba(50, 10, 130, 0.55);
  /* scattered: lower-center; docked: bottom-left */
  --spread-x: -12vw;
  --spread-y: 32vh;
  --final-x: -330px;
  --final-y: 170px;
  --rest-rot: 4deg;
  z-index: 3;
}
.dc-app .dc-cs-orbit__card:nth-of-type(5) {
  --tone-light:  rgba(135, 70, 220, 0.97);
  --tone-mid:    rgba(86, 18, 189, 0.96);
  --tone-deep:   rgba(55, 6, 135, 0.96);
  --tone-edge:   rgba(20, 0, 60, 0.75);
  --tone-shadow: rgba(20, 0, 60, 0.60);
  /* scattered: left side; docked: bottom-center */
  --spread-x: -38vw;
  --spread-y: 22vh;
  --final-x: 10px;
  --final-y: 190px;
  --rest-rot: -3deg;
  z-index: 2;
}
.dc-app .dc-cs-orbit__card:nth-of-type(6) {
  --tone-light:  rgba(80, 38, 135, 0.97);
  --tone-mid:    rgba(45, 10, 90, 0.96);
  --tone-deep:   rgba(20, 0, 50, 0.96);
  --tone-edge:   rgba(8, 0, 30, 0.80);
  --tone-shadow: rgba(8, 0, 30, 0.65);
  /* scattered: upper-center; docked: bottom-right */
  --spread-x: 16vw;
  --spread-y: -38vh;
  --final-x: 320px;
  --final-y: 160px;
  --rest-rot: 2deg;
  z-index: 1;
}
/* Lift card content above the ::before / ::after light layers and
   tighten the type for white-on-glass legibility. */
.dc-app .dc-cs-orbit__card > * { position: relative; z-index: 1; }

/* The lightest card (cyan, nth-of-type 1) is too pale for white type
   to read cleanly. Flip the type color to deep purple, drop the dark
   text-shadows, and use a light text-shadow lift instead. The bottom
   vignette also dials down so it doesn't crush the dark text. */
.dc-app .dc-cs-orbit__card:nth-of-type(1) .dc-cs-orbit__num,
.dc-app .dc-cs-orbit__card:nth-of-type(1) .dc-cs-orbit__label,
.dc-app .dc-cs-orbit__card:nth-of-type(1) .dc-cs-orbit__sub-label,
.dc-app .dc-cs-orbit__card:nth-of-type(2) .dc-cs-orbit__num,
.dc-app .dc-cs-orbit__card:nth-of-type(2) .dc-cs-orbit__label,
.dc-app .dc-cs-orbit__card:nth-of-type(2) .dc-cs-orbit__sub-label {
  color: var(--dc-purple-deep);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.40);
}
.dc-app .dc-cs-orbit__card:nth-of-type(1)::after,
.dc-app .dc-cs-orbit__card:nth-of-type(2)::after {
  opacity: 0.18;
}

/* Note: the .--cyan modifier is intentionally not styled — color
   assignment is now driven entirely by nth-of-type on the stack so
   every card carries a distinct brand hue. */
.dc-app .dc-cs-orbit__num {
  font: 800 60px/1 var(--dc-font);
  letter-spacing: -0.025em;
  color: #fff;
  text-shadow: 0 2px 6px rgba(36, 6, 81, 0.30);
  margin-bottom: 10px;
}
.dc-app .dc-cs-orbit__label {
  font: 800 15px/1.2 var(--dc-font);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 4px rgba(36, 6, 81, 0.30);
  margin-bottom: 10px;
}
.dc-app .dc-cs-orbit__sub-label {
  font: 600 16px/1.4 var(--dc-font);
  color: #fff;
  text-shadow: 0 1px 4px rgba(36, 6, 81, 0.35);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Static-grid fallback for reduced motion or when JS can't run */
.dc-app .dc-cs-orbit__fallback {
  display: none;
  list-style: none;
  padding: 0;
  margin: 0;
}
.dc-app .dc-cs-orbit.is-static .dc-cs-orbit__stage { display: none; }
.dc-app .dc-cs-orbit.is-static .dc-cs-orbit__fallback {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
/* Fallback grid items — match the desktop card tones via nth-of-type
   below. Same uniform-surface lighting (top-light catch + light→mid
   linear shade + tone-deep bottom vignette via ::after). Slab
   thickness shadows are dialed down since there's no 3D space. */
.dc-app .dc-cs-orbit__fallback-item {
  position: relative;
  list-style: none;
  padding: 26px 24px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: #fff;
  overflow: hidden;
  background:
    radial-gradient(ellipse 130% 75% at 50% -8%,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0.12) 22%,
      rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg,
      var(--tone-light) 0%,
      var(--tone-mid)   42%,
      var(--tone-mid)   100%);
  box-shadow:
    0 8px 0 -2px var(--tone-edge),
    0 18px 36px -16px var(--tone-shadow),
    inset 0 2px 0 rgba(255, 255, 255, 0.65);
}
.dc-app .dc-cs-orbit__fallback-item::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 45%, var(--tone-deep) 100%);
  opacity: 0.55;
  z-index: 0;
}
.dc-app .dc-cs-orbit__fallback-item > * { position: relative; z-index: 1; }

/* Per-position tone — mirrors the nth-of-type cascade on the desktop
   cards so the mobile/static grid carries the same brand-palette
   sequence (cyan → light-blue → light-purple → violet → purple → deep). */
.dc-app .dc-cs-orbit__fallback-item:nth-of-type(1) {
  --tone-light:  rgba(170, 240, 252, 0.97);
  --tone-mid:    rgba(103, 225, 247, 0.96);
  --tone-deep:   rgba(40, 165, 200, 0.96);
  --tone-edge:   rgba(15, 90, 120, 0.70);
  --tone-shadow: rgba(15, 90, 120, 0.55);
}
.dc-app .dc-cs-orbit__fallback-item:nth-of-type(2) {
  --tone-light:  rgba(200, 240, 255, 0.97);
  --tone-mid:    rgba(157, 229, 255, 0.96);
  --tone-deep:   rgba(85, 175, 220, 0.96);
  --tone-edge:   rgba(30, 95, 150, 0.70);
  --tone-shadow: rgba(30, 95, 150, 0.55);
}
.dc-app .dc-cs-orbit__fallback-item:nth-of-type(3) {
  --tone-light:  rgba(232, 215, 255, 0.97);
  --tone-mid:    rgba(190, 160, 250, 0.96);
  --tone-deep:   rgba(150, 110, 235, 0.96);
  --tone-edge:   rgba(70, 30, 160, 0.70);
  --tone-shadow: rgba(70, 30, 160, 0.55);
}
.dc-app .dc-cs-orbit__fallback-item:nth-of-type(4) {
  --tone-light:  rgba(180, 130, 252, 0.97);
  --tone-mid:    rgba(146, 80, 242, 0.96);
  --tone-deep:   rgba(105, 40, 200, 0.96);
  --tone-edge:   rgba(50, 10, 130, 0.70);
  --tone-shadow: rgba(50, 10, 130, 0.55);
}
.dc-app .dc-cs-orbit__fallback-item:nth-of-type(5) {
  --tone-light:  rgba(135, 70, 220, 0.97);
  --tone-mid:    rgba(86, 18, 189, 0.96);
  --tone-deep:   rgba(55, 6, 135, 0.96);
  --tone-edge:   rgba(20, 0, 60, 0.75);
  --tone-shadow: rgba(20, 0, 60, 0.60);
}
.dc-app .dc-cs-orbit__fallback-item:nth-of-type(6) {
  --tone-light:  rgba(80, 38, 135, 0.97);
  --tone-mid:    rgba(45, 10, 90, 0.96);
  --tone-deep:   rgba(20, 0, 50, 0.96);
  --tone-edge:   rgba(8, 0, 30, 0.80);
  --tone-shadow: rgba(8, 0, 30, 0.65);
}
/* Two lightest cards (cyan, light blue) get dark text for legibility,
   matching the desktop nth-of-type(1)/(2) override. */
.dc-app .dc-cs-orbit__fallback-item:nth-of-type(1) .dc-cs-orbit__num,
.dc-app .dc-cs-orbit__fallback-item:nth-of-type(1) .dc-cs-orbit__label,
.dc-app .dc-cs-orbit__fallback-item:nth-of-type(1) .dc-cs-orbit__sub-label,
.dc-app .dc-cs-orbit__fallback-item:nth-of-type(2) .dc-cs-orbit__num,
.dc-app .dc-cs-orbit__fallback-item:nth-of-type(2) .dc-cs-orbit__label,
.dc-app .dc-cs-orbit__fallback-item:nth-of-type(2) .dc-cs-orbit__sub-label {
  color: var(--dc-purple-deep);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.40);
}
.dc-app .dc-cs-orbit__fallback-item:nth-of-type(1)::after,
.dc-app .dc-cs-orbit__fallback-item:nth-of-type(2)::after {
  opacity: 0.18;
}
@media (max-width: 900px) {
  .dc-app .dc-cs-orbit-section { padding: 64px 0 72px; }
  /* On narrow viewports, stop the arc animation and stack the cards
     so the content stays readable. JS adds .is-static, but as a
     belt-and-braces fallback we hide the absolute stage at this width
     too. */
  .dc-app .dc-cs-orbit__stage { display: none; }
  .dc-app .dc-cs-orbit__fallback {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  .dc-app .dc-cs-orbit__num { font-size: 42px; }
}
@media (max-width: 480px) {
  .dc-app .dc-cs-orbit__fallback {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dc-app .dc-cs-orbit__stage { display: none; }
  .dc-app .dc-cs-orbit__fallback {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   HUB PAGE — [davinci_hub] shortcode
   All hub-specific classes prefixed dc-hub-. Tab handler reuses
   .dc-cs-tabs / .dc-cs-tab from earlier blocks so the existing
   initTabs() in animations.js still drives the panel swap.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── HERO ────────────────────────────────────────────────────────── */
.dc-app .dc-hub-hero {
  position: relative;
  padding: 140px 0 80px;
  overflow: hidden;
  isolation: isolate;
}
.dc-app .dc-hub-hero__inner {
  position: relative;
  max-width: 920px;
  text-align: center;
  margin: 0 auto;
  z-index: 2;
}
.dc-app .dc-hub-hero__h {
  font: 800 88px/0.98 var(--dc-font);
  letter-spacing: -0.03em;
  color: var(--dc-fg-strong);
  margin: 22px 0 24px;
}
.dc-app .dc-hub-hero__sub {
  font: 400 20px/1.6 var(--dc-font);
  color: var(--dc-fg-muted);
  max-width: 720px;
  margin: 0 auto 36px;
}
.dc-app .dc-hub-hero__cta { display: flex; justify-content: center; }

/* ─── DOTS GRID (ambient hero texture) ───────────────────────────── */
.dc-app .dc-hub-sparkles,
.dc-app .dc-hub-dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}
.dc-app .dc-hub-dots__halo {
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(133,236,255,0.35) 0%, rgba(146,80,242,0.18) 45%, transparent 72%);
  filter: blur(24px);
  left: var(--halo-x, 50%);
  top: var(--halo-y, 40%);
  transform: translate(-50%, -50%);
  transition: left 0.4s cubic-bezier(0.2,0.7,0.2,1), top 0.4s cubic-bezier(0.2,0.7,0.2,1);
  opacity: 0.7;
}
@media (hover: none) {
  .dc-app .dc-hub-dots__halo { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dc-app .dc-hub-dots__halo { transition: none; }
}

/* ─── DRAW-PATH SPINE ────────────────────────────────────────────── */
.dc-app .dc-hub-spine {
  display: block;
  width: 100%;
  height: 80px;
  margin: -20px 0;
  pointer-events: none;
}
.dc-app .dc-hub-spine path {
  stroke-dasharray: 2400;
  stroke-dashoffset: 2400;
  transition: stroke-dashoffset 1.6s cubic-bezier(0.2,0.7,0.2,1);
}
.dc-app .dc-hub-spine.is-in path { stroke-dashoffset: 0; }
.dc-app .dc-hub-spine--flip { transform: scaleX(-1); }
@media (prefers-reduced-motion: reduce) {
  .dc-app .dc-hub-spine path { stroke-dashoffset: 0; transition: none; }
}

/* ─── TAB BAR (sticky) ───────────────────────────────────────────── */
.dc-app .dc-hub-tabbar-wrap {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(249,245,255,0.85);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid rgba(215,189,255,0.4);
  padding: 14px 0;
  transition: padding 0.25s ease, background 0.25s ease;
}
.dc-app .dc-hub-tabbar-wrap.is-stuck { padding: 10px 0; background: rgba(255,255,255,0.92); }
.dc-app .dc-hub-tabbar {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.dc-app .dc-hub-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  background: transparent;
  color: var(--dc-fg-muted);
  font: 700 15px/1 var(--dc-font);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.dc-app .dc-hub-tab:hover { color: var(--dc-purple); }
.dc-app .dc-hub-tab[aria-selected="true"] {
  color: var(--dc-purple);
  border-color: var(--dc-purple);
  background: rgba(133,236,255,0.18);
}

/* ─── TAB PANELS + LAYOUT-GRID-FLIP ──────────────────────────────── */
.dc-app .dc-hub-panel { display: none; }
.dc-app .dc-hub-panel.is-active { display: block; }
.dc-app .dc-hub-panel.is-active .dc-hub-card,
.dc-app .dc-hub-panel.is-active .dc-hub-spotlight,
.dc-app .dc-hub-panel.is-active .dc-hub-tab-intro {
  animation: dc-hub-flip-in 0.55s cubic-bezier(0.2,0.7,0.2,1) backwards;
}
.dc-app .dc-hub-panel.is-active .dc-hub-card:nth-child(1)  { animation-delay: 0.04s; }
.dc-app .dc-hub-panel.is-active .dc-hub-card:nth-child(2)  { animation-delay: 0.08s; }
.dc-app .dc-hub-panel.is-active .dc-hub-card:nth-child(3)  { animation-delay: 0.12s; }
.dc-app .dc-hub-panel.is-active .dc-hub-card:nth-child(4)  { animation-delay: 0.16s; }
.dc-app .dc-hub-panel.is-active .dc-hub-card:nth-child(5)  { animation-delay: 0.20s; }
.dc-app .dc-hub-panel.is-active .dc-hub-card:nth-child(6)  { animation-delay: 0.24s; }
.dc-app .dc-hub-panel.is-active .dc-hub-card:nth-child(7)  { animation-delay: 0.28s; }
.dc-app .dc-hub-panel.is-active .dc-hub-card:nth-child(n+8){ animation-delay: 0.32s; }
@keyframes dc-hub-flip-in {
  from { opacity: 0; transform: translateY(18px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dc-app .dc-hub-panel.is-active .dc-hub-card,
  .dc-app .dc-hub-panel.is-active .dc-hub-spotlight,
  .dc-app .dc-hub-panel.is-active .dc-hub-tab-intro { animation: none; }
}

/* ─── TAB INTRO ──────────────────────────────────────────────────── */
.dc-app .dc-hub-tab-intro {
  padding: 56px 0 16px;
  text-align: center;
}
.dc-app .dc-hub-tab-intro__p {
  font: 400 19px/1.55 var(--dc-font);
  color: var(--dc-fg-muted);
  max-width: 760px;
  margin: 14px auto 0;
}

/* ─── FEATURED SPOTLIGHT (Gong-style) ────────────────────────────── */
.dc-app .dc-hub-spotlight {
  position: relative;
  padding: 32px 0 88px;
  overflow: hidden;
}
.dc-app .dc-hub-spotlight__inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: center;
}
.dc-app .dc-hub-spotlight__eyebrow-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.dc-app .dc-hub-spotlight__award {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 700 12px/1 var(--dc-font);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dc-purple-violet);
  padding: 6px 10px;
  border: 1px solid rgba(146,80,242,0.3);
  border-radius: 999px;
  background: rgba(146,80,242,0.06);
}
.dc-app .dc-hub-spotlight__h {
  font: 800 60px/1.02 var(--dc-font);
  letter-spacing: -0.025em;
  color: var(--dc-fg-strong);
  margin: 0 0 22px;
}
.dc-app .dc-hub-spotlight__p {
  font: 400 19px/1.6 var(--dc-font);
  color: var(--dc-fg-muted);
  margin: 0 0 28px;
  max-width: 560px;
}
.dc-app .dc-hub-spotlight__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 0 0 32px;
  max-width: 560px;
}
.dc-app .dc-hub-spotlight__stat-num {
  font: 800 36px/1 var(--dc-font);
  background-image: linear-gradient(110deg, #67E1F7 0%, #5612BD 35%, #9250F2 70%, #67E1F7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.dc-app .dc-hub-spotlight__stat-lab {
  font: 400 13px/1.4 var(--dc-font);
  color: var(--dc-fg-muted);
}
.dc-app .dc-hub-spotlight__cta {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.dc-app .dc-hub-spotlight__visual {
  position: relative;
  display: block;
  aspect-ratio: 1 / 0.92;
  border-radius: 28px;
  overflow: hidden;
  background: linear-gradient(160deg, #F9F5FF 0%, #FFFFFF 100%);
  border: 1px solid rgba(215,189,255,0.6);
  box-shadow: 0 28px 60px -28px rgba(86,18,189,0.22);
  transition: transform 0.45s cubic-bezier(0.2,0.7,0.2,1), box-shadow 0.45s ease;
}
.dc-app .dc-hub-spotlight__visual:hover {
  transform: translateY(-4px);
  box-shadow: 0 36px 72px -24px rgba(86,18,189,0.32);
}
.dc-app .dc-hub-spotlight__visual-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  gap: 24px;
}
.dc-app .dc-hub-spotlight__visual-logo {
  position: absolute;
  top: 28px;
  left: 28px;
  z-index: 2;
}
.dc-app .dc-hub-spotlight__visual-img {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dc-app .dc-hub-spotlight__visual-img img {
  max-width: 86%;
  max-height: 86%;
  object-fit: contain;
}
.dc-app .dc-hub-spotlight__visual-mono {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 800 280px/1 var(--dc-font);
  letter-spacing: -0.04em;
  background-image: linear-gradient(110deg, #67E1F7 0%, #5612BD 45%, #9250F2 75%, #67E1F7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0.95;
}

/* ─── HUB CARDS (tight, headline-led) ────────────────────────────── */
.dc-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 22px;
  padding: 12px 60px 72px;
  max-width: 1480px;
  margin: 0 auto;
  box-sizing: border-box;
}
.dc-app .dc-hub-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 320px;
  padding: 28px 28px 22px;
  border-radius: 22px;
  background: #FFFFFF;
  border: 1px solid rgba(215,189,255,0.55);
  box-shadow: 0 14px 40px -22px rgba(86,18,189,0.18);
  text-decoration: none;
  color: inherit;
  transition: transform 0.35s cubic-bezier(0.2,0.7,0.2,1),
              box-shadow 0.35s ease,
              border-color 0.35s ease;
  overflow: hidden;
}
.dc-app .dc-hub-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(135deg, rgba(133,236,255,0.0) 0%, rgba(146,80,242,0.06) 100%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.dc-app .dc-hub-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 60px -22px rgba(86,18,189,0.32);
  border-color: rgba(146,80,242,0.6);
}
.dc-app .dc-hub-card:hover::before { opacity: 1; }
.dc-app .dc-hub-card.is-featured {
  border-color: rgba(146,80,242,0.5);
  background: linear-gradient(165deg, #FFFFFF 0%, #F9F5FF 100%);
}
.dc-app .dc-hub-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.dc-app .dc-hub-card__stat-pill {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}
.dc-app .dc-hub-card__stat-pill strong {
  font: 800 22px/1 var(--dc-font);
  letter-spacing: -0.02em;
  background-image: linear-gradient(110deg, #67E1F7 0%, #5612BD 35%, #9250F2 70%, #67E1F7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.dc-app .dc-hub-card__stat-pill span {
  font: 600 10px/1.2 var(--dc-font);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dc-fg-muted);
  max-width: 130px;
  text-align: right;
}
.dc-app .dc-hub-card__h {
  font: 800 24px/1.18 var(--dc-font);
  letter-spacing: -0.015em;
  color: var(--dc-fg-strong);
  margin: 4px 0 24px;
  flex: 1;
}
.dc-app .dc-hub-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid rgba(215,189,255,0.5);
}
.dc-app .dc-hub-card__cta {
  position: relative;
  display: inline-block;
  font: 700 13px/1 var(--dc-font);
  color: var(--dc-purple);
  letter-spacing: 0.02em;
}
.dc-app .dc-hub-card__cta-default { display: inline-block; transition: opacity 0.25s ease, transform 0.25s ease; }
.dc-app .dc-hub-card__cta-hover {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  white-space: nowrap;
}
.dc-app .dc-hub-card:hover .dc-hub-card__cta-default { opacity: 0; transform: translateY(-4px); }
.dc-app .dc-hub-card:hover .dc-hub-card__cta-hover   { opacity: 1; transform: none; }
.dc-app .dc-hub-card__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(86,18,189,0.08);
  color: var(--dc-purple);
  transition: background 0.25s ease, transform 0.35s cubic-bezier(0.2,0.7,0.2,1);
}
.dc-app .dc-hub-card:hover .dc-hub-card__arrow {
  background: var(--dc-purple);
  color: #fff;
  transform: translateX(4px) rotate(-12deg);
}

/* ─── INTERLEAVED SPOTLIGHT BAND ─────────────────────────────────── */
.dc-app .dc-hub-inline {
  position: relative;
  padding: 64px 0;
  overflow: hidden;
}
.dc-app .dc-hub-inline__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  padding: 48px;
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(133,236,255,0.10) 0%, rgba(146,80,242,0.08) 100%);
  border: 1px solid rgba(215,189,255,0.5);
  transform: scale(0.94);
  opacity: 0.55;
  transition: transform 0.75s cubic-bezier(0.2,0.7,0.2,1), opacity 0.75s ease;
  transform-origin: center;
}
.dc-app .dc-hub-inline.is-in .dc-hub-inline__inner { transform: scale(1); opacity: 1; }
.dc-app .dc-hub-inline--right .dc-hub-inline__inner { direction: rtl; }
.dc-app .dc-hub-inline--right .dc-hub-inline__copy,
.dc-app .dc-hub-inline--right .dc-hub-inline__visual { direction: ltr; }
.dc-app .dc-hub-inline__h {
  font: 800 38px/1.1 var(--dc-font);
  letter-spacing: -0.02em;
  color: var(--dc-fg-strong);
  margin: 14px 0 16px;
}
.dc-app .dc-hub-inline__p {
  font: 400 17px/1.55 var(--dc-font);
  color: var(--dc-fg-muted);
  margin: 0 0 22px;
}
.dc-app .dc-hub-inline__visual {
  position: relative;
  aspect-ratio: 1 / 0.85;
  border-radius: 22px;
  background: #FFFFFF;
  border: 1px solid rgba(215,189,255,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 28px;
}
.dc-app .dc-hub-inline__visual img { max-width: 86%; max-height: 86%; object-fit: contain; }
.dc-app .dc-hub-inline__logo {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
}
.dc-app .dc-hub-inline__mono {
  font: 800 200px/1 var(--dc-font);
  letter-spacing: -0.04em;
  background-image: linear-gradient(110deg, #67E1F7 0%, #5612BD 45%, #9250F2 75%, #67E1F7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (prefers-reduced-motion: reduce) {
  .dc-app .dc-hub-inline__inner { transform: none; opacity: 1; transition: none; }
}

/* ─── FINAL CTA (dark) ───────────────────────────────────────────── */
.dc-app .dc-hub-final {
  position: relative;
  padding: 120px 0 140px;
  background: var(--dc-bg-dark, #0E0125);
  color: #FFFFFF;
  overflow: hidden;
  isolation: isolate;
}
.dc-app .dc-hub-pixels {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(133,236,255,0.35) 1.4px, transparent 1.6px),
    radial-gradient(circle, rgba(146,80,242,0.22) 1.2px, transparent 1.4px);
  background-size: 26px 26px, 52px 52px;
  background-position: 0 0, 13px 13px;
  mask-image: radial-gradient(ellipse 75% 60% at 50% 50%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 75% 60% at 50% 50%, #000 30%, transparent 100%);
  pointer-events: none;
  z-index: -1;
  animation: dc-hub-pixel-twinkle 7s ease-in-out infinite alternate;
}
@keyframes dc-hub-pixel-twinkle {
  0%   { opacity: 0.65; background-position: 0 0, 13px 13px; }
  100% { opacity: 1.0;  background-position: 6px 4px, 18px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .dc-app .dc-hub-pixels { animation: none; opacity: 0.8; }
}
.dc-app .dc-hub-final__inner {
  position: relative;
  max-width: 820px;
  text-align: center;
  margin: 0 auto;
}
.dc-app .dc-hub-final__h {
  font: 800 56px/1.05 var(--dc-font);
  letter-spacing: -0.025em;
  color: #FFFFFF;
  margin: 22px 0 18px;
}
.dc-app .dc-hub-final__p {
  font: 400 19px/1.6 var(--dc-font);
  color: rgba(255,255,255,0.78);
  max-width: 620px;
  margin: 0 auto 30px;
}

/* ─── MOBILE (hub) ───────────────────────────────────────────────── */
@media (max-width: 900px) {
  .dc-app .dc-hub-hero { padding: 80px 0 48px; }
  .dc-app .dc-hub-hero__h { font-size: 44px; letter-spacing: -0.025em; }
  .dc-app .dc-hub-hero__sub { font-size: 16px; }

  .dc-app .dc-hub-tabbar-wrap { padding: 10px 0; }
  .dc-app .dc-hub-tab { padding: 9px 16px; font-size: 13px; }

  .dc-app .dc-hub-tab-intro { padding: 36px 0 8px; }
  .dc-app .dc-hub-tab-intro__p { font-size: 16px; }

  .dc-app .dc-hub-spotlight { padding: 24px 0 48px; }
  .dc-app .dc-hub-spotlight__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .dc-app .dc-hub-spotlight__h { font-size: 34px; letter-spacing: -0.02em; }
  .dc-app .dc-hub-spotlight__p { font-size: 16px; }
  .dc-app .dc-hub-spotlight__stats { grid-template-columns: 1fr 1fr; gap: 14px; }
  .dc-app .dc-hub-spotlight__stat-num { font-size: 28px; }
  .dc-app .dc-hub-spotlight__visual-mono { font-size: 180px; }

  .dc-hub-grid {
    grid-template-columns: 1fr;
    padding: 8px 20px 48px;
    gap: 16px;
  }
  .dc-app .dc-hub-card { min-height: 240px; padding: 22px 22px 18px; }
  .dc-app .dc-hub-card__h { font-size: 20px; }

  .dc-app .dc-hub-inline { padding: 40px 0; }
  .dc-app .dc-hub-inline__inner {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 28px;
  }
  .dc-app .dc-hub-inline--right .dc-hub-inline__inner { direction: ltr; }
  .dc-app .dc-hub-inline__h { font-size: 26px; }
  .dc-app .dc-hub-inline__p { font-size: 15px; }
  .dc-app .dc-hub-inline__mono { font-size: 140px; }

  .dc-app .dc-hub-final { padding: 72px 0 84px; }
  .dc-app .dc-hub-final__h { font-size: 34px; letter-spacing: -0.02em; }
  .dc-app .dc-hub-final__p { font-size: 16px; }

  .dc-app .dc-hub-spine { height: 50px; margin: -10px 0; }
}
@media (max-width: 480px) {
  .dc-app .dc-hub-hero__h { font-size: 36px; }
  .dc-app .dc-hub-spotlight__h { font-size: 28px; }
  .dc-app .dc-hub-card__h { font-size: 18px; }
  .dc-app .dc-hub-tab span { display: inline; }
}

/* ═══════════════════════════════════════════════════════════════════════
   HUB v4 — two-column editorial sections + soft-rounded stage frame
   Reverts: notch corners → soft 28px radius; drops wipe + ghost + hero
   zone; adds rich-carousel and proper spec-table bubble kinds.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Tab intro note (kept) ──────────────────────────────────────── */
.dc-app .dc-hub-tab-intro__note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 16px auto 0;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(146,80,242,0.08);
  border: 1px solid rgba(146,80,242,0.2);
  color: var(--dc-purple-violet);
  font: 600 12px/1.4 var(--dc-font);
  letter-spacing: 0.02em;
}

/* ─── Pinned scroll layout ───────────────────────────────────────── */
.dc-app .dc-hub-pinned {
  position: relative;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 0;
  max-width: 1480px;
  margin: 0 auto;
  padding: 32px 60px 64px;
  box-sizing: border-box;
}

/* ─── Left rail — name-only vertical nav ─────────────────────────── */
.dc-app .dc-hub-rail { position: relative; }
.dc-app .dc-hub-rail__inner {
  position: sticky;
  top: 96px;
  padding-right: 24px;
}
.dc-app .dc-hub-rail__eyebrow {
  font: 800 11px/1 var(--dc-font);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dc-purple);
  margin-bottom: 22px;
}
.dc-app .dc-hub-rail__list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-left: 1px solid rgba(215,189,255,0.5);
}
.dc-app .dc-hub-rail__item { margin: 0; }
.dc-app .dc-hub-rail__link {
  display: block;
  padding: 14px 0 14px 20px;
  margin-left: -1px;
  border-left: 2px solid transparent;
  font: 700 14px/1.4 var(--dc-font);
  color: var(--dc-fg-muted);
  text-decoration: none;
  transition: color 0.25s ease, border-color 0.25s ease, padding-left 0.25s ease;
}
.dc-app .dc-hub-rail__link:hover { color: var(--dc-purple); }
.dc-app .dc-hub-rail__link.is-active {
  color: var(--dc-purple-deep);
  border-left-color: var(--dc-purple);
  padding-left: 24px;
}

/* ─── Pinned stage column ────────────────────────────────────────── */
.dc-app .dc-hub-pinned__stage {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ─── Per-entry pinned section — two-column ──────────────────────── */
.dc-app .dc-hub-pin {
  position: relative;
  padding: 80px 0 80px;
  scroll-margin-top: 96px;
  border-bottom: 1px solid rgba(215,189,255,0.32);
}
.dc-app .dc-hub-pin:last-child { border-bottom: none; }
.dc-app .dc-hub-pin__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 64px;
  align-items: center;
}
.dc-app .dc-hub-pin__copy {
  max-width: 520px;
}
.dc-app .dc-hub-pin__h {
  font: 800 38px/1.1 var(--dc-font);
  letter-spacing: -0.022em;
  color: var(--dc-fg-strong);
  margin: 14px 0 18px;
}
.dc-app .dc-hub-pin__p {
  font: 400 17px/1.6 var(--dc-font);
  color: var(--dc-fg-muted);
  margin: 0 0 22px;
}
.dc-app .dc-hub-pin__bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dc-app .dc-hub-pin__bullets li {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 600 14px/1.4 var(--dc-font);
  color: var(--dc-fg);
}

/* ─── STAGE — soft frame ─────────────────────────────────────────── */
.dc-app .dc-stage-frame {
  position: relative;
  width: 100%;
  max-width: 680px;
  aspect-ratio: 4 / 3;
  margin: 0 auto;
  border-radius: 28px;
  background: linear-gradient(160deg, #FFFFFF 0%, #F9F5FF 100%);
  box-shadow:
    0 32px 80px -32px rgba(86,18,189,0.28),
    0 0 0 1.5px rgba(146,80,242,0.12) inset;
  overflow: hidden;
}
/* Gradient stroke via pseudo-element — same rounded shape. */
.dc-app .dc-stage-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 28px;
  padding: 1.5px;
  background: linear-gradient(135deg, #67E1F7 0%, #9250F2 50%, #5612BD 100%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.dc-app .dc-stage-frame__body {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 28px;
  overflow: hidden;
}

/* ─── STAGE CANVAS — single chat surface (no hero zone) ───────────── */
.dc-app .dc-stage-canvas {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 24px 28px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
  background: linear-gradient(180deg, #FAFAFF 0%, #F4ECFF 100%);
  overflow-y: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.dc-app .dc-stage-canvas::-webkit-scrollbar { display: none; }

/* Beats are hidden by default — display:none means they take NO space
   in the chat layout. When `.is-in` is added the beat reveals with a
   pop-in animation. Hidden beats don't push scrollHeight, so the
   canvas grows exactly by one bubble per beat and auto-scroll-to-
   bottom keeps the latest beat anchored cleanly. */
.dc-app .dc-stage-beat {
  display: none;
  opacity: 0;
  transform: translateY(8px) scale(.98);
  flex-shrink: 0;
}
.dc-app .dc-stage-beat.is-in {
  display: block;
  animation: dc-stage-beat-pop .35s ease forwards;
}
.dc-app .dc-stage-beat--user-prompt.is-in {
  display: flex;
}
.dc-app .dc-stage-beat--ai-text.is-in,
.dc-app .dc-stage-beat--data-chip.is-in,
.dc-app .dc-stage-beat--rich-carousel.is-in,
.dc-app .dc-stage-beat--data-spec.is-in {
  display: block;
}
@keyframes dc-stage-beat-pop {
  0%   { opacity: 0; transform: translateY(8px) scale(.98); }
  100% { opacity: 1; transform: translateY(0)  scale(1);    }
}
.dc-app .dc-stage-beat.is-out { opacity: 0.55; }
@media (prefers-reduced-motion: reduce) {
  .dc-app .dc-stage-beat.is-in { animation: none; opacity: 1; transform: none; }
  .dc-app .dc-stage-beat.is-out { opacity: 1; }
}

/* User prompt */
.dc-app .dc-stage-beat--user-prompt {
  display: flex;
  justify-content: flex-end;
}
.dc-app .dc-stage-prompt {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 12px 18px;
  border-radius: 22px 22px 4px 22px;
  background: var(--dc-purple);
  color: #FFFFFF;
  font: 600 14px/1.4 var(--dc-font);
  max-width: 76%;
  box-shadow: 0 6px 14px -6px rgba(86,18,189,0.4);
}
.dc-app .dc-stage-prompt__typed { white-space: pre-wrap; }
.dc-app .dc-stage-prompt__caret {
  display: inline-block;
  width: 2px;
  height: 16px;
  background: #FFFFFF;
  margin-left: 2px;
  animation: dc-stage-caret 1s steps(1) infinite;
}
.dc-app .dc-stage-beat--user-prompt.is-typed .dc-stage-prompt__caret { display: none; }
@keyframes dc-stage-caret {
  0%, 50%   { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* AI text bubble */
.dc-app .dc-stage-bubble {
  padding: 12px 16px;
  border-radius: 4px 22px 22px 22px;
  font: 400 14px/1.5 var(--dc-font);
  color: var(--dc-fg-strong);
  max-width: 88%;
  background: #FFFFFF;
  border: 1px solid rgba(215,189,255,0.65);
}
.dc-app .dc-stage-bubble--ai { align-self: flex-start; }

/* Rich carousel — 2 product cards side-by-side inside the frame */
.dc-app .dc-stage-carousel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-self: flex-start;
  width: 100%;
}
.dc-app .dc-stage-card {
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  background: #FFFFFF;
  border: 1px solid rgba(215,189,255,0.6);
  overflow: hidden;
  box-shadow: 0 8px 18px -10px rgba(86,18,189,0.18);
}
.dc-app .dc-stage-card__img {
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: #F9F5FF;
}
.dc-app .dc-stage-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dc-app .dc-stage-card__body {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dc-app .dc-stage-card__title {
  font: 700 12px/1.3 var(--dc-font);
  color: var(--dc-fg-strong);
}
.dc-app .dc-stage-card__desc {
  font: 400 11px/1.4 var(--dc-font);
  color: var(--dc-fg-muted);
  margin-bottom: 4px;
}
.dc-app .dc-stage-card__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.dc-app .dc-stage-card__primary {
  display: inline-flex;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--dc-purple);
  color: #FFFFFF;
  font: 700 10px/1 var(--dc-font);
  letter-spacing: 0.04em;
}
.dc-app .dc-stage-card__rating {
  font: 700 11px/1 var(--dc-font);
  color: var(--dc-purple-violet);
}

/* Data-spec — real table-like rows */
.dc-app .dc-stage-spec {
  padding: 14px 16px;
  border-radius: 14px;
  background: #FFFFFF;
  border: 1px solid rgba(215,189,255,0.6);
  align-self: flex-start;
  width: 100%;
}
.dc-app .dc-stage-spec__title {
  font: 800 11px/1 var(--dc-font);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dc-purple-violet);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(215,189,255,0.5);
}
.dc-app .dc-stage-spec__list {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dc-app .dc-stage-spec__row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 12px;
  padding: 4px 0;
}
.dc-app .dc-stage-spec__row dt {
  font: 700 11px/1.4 var(--dc-font);
  color: var(--dc-purple);
  letter-spacing: 0.02em;
  margin: 0;
}
.dc-app .dc-stage-spec__row dd {
  font: 400 12px/1.4 var(--dc-font);
  color: var(--dc-fg-strong);
  margin: 0;
}

/* Data chip (age-gating style — still used by AlcoBev) */
.dc-app .dc-stage-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(146,80,242,0.07);
  border: 1px solid rgba(146,80,242,0.28);
  align-self: flex-start;
}
.dc-app .dc-stage-chip__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--dc-purple);
  color: #FFFFFF;
  font: 800 11px/1 var(--dc-font);
  flex-shrink: 0;
}
.dc-app .dc-stage-chip__label {
  font: 700 11px/1 var(--dc-font);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dc-purple-deep);
  margin-bottom: 4px;
}
.dc-app .dc-stage-chip__text {
  font: 400 12px/1.4 var(--dc-font);
  color: var(--dc-fg-muted);
}

/* CTA (lives in the left column, next to bullets) */
.dc-app .dc-hub-pin__cta { display: flex; }
.dc-app .dc-stage-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 16px 26px;
  border-radius: 999px;
  background: var(--dc-cyan-cta, #85ECFF);
  color: var(--dc-purple-deep);
  font: 700 15px/1 var(--dc-font);
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.dc-app .dc-stage-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -16px rgba(86,18,189,0.3);
}
.dc-app .dc-stage-cta__arrow {
  display: inline-flex;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--dc-purple);
  color: #FFFFFF;
  align-items: center;
  justify-content: center;
}

/* ─── MOBILE ────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .dc-app .dc-hub-pinned {
    grid-template-columns: 1fr;
    padding: 20px 20px 48px;
  }
  .dc-app .dc-hub-rail { display: none; }
  .dc-app .dc-hub-pin { padding: 48px 0 48px; }
  .dc-app .dc-hub-pin__inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .dc-app .dc-hub-pin__h { font-size: 28px; letter-spacing: -0.02em; }
  .dc-app .dc-hub-pin__p { font-size: 16px; }

  .dc-app .dc-stage-frame { aspect-ratio: 3 / 4; max-width: 100%; }
  .dc-app .dc-stage-canvas { padding: 18px 18px; gap: 8px; }
  .dc-app .dc-stage-bubble,
  .dc-app .dc-stage-prompt { font-size: 13px; }
  .dc-app .dc-stage-carousel { grid-template-columns: 1fr; }
  .dc-app .dc-stage-spec__row { grid-template-columns: 110px 1fr; gap: 8px; }
  .dc-app .dc-stage-card__img { aspect-ratio: 16 / 9; }
}

/* ─── HUB v4.2 — new beat kinds (locator, lifestyle, reviews, colorway) */

/* Locator */
.dc-app .dc-stage-locator {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #FFFFFF;
  border: 1px solid rgba(215,189,255,0.6);
  align-items: center;
  align-self: flex-start;
  width: 100%;
}
.dc-app .dc-stage-locator__img {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  overflow: hidden;
  background: #F9F5FF;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dc-app .dc-stage-locator__img img { width: 100%; height: 100%; object-fit: cover; }
.dc-app .dc-stage-locator__body { flex: 1; min-width: 0; }
.dc-app .dc-stage-locator__label {
  font: 700 10px/1 var(--dc-font);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dc-purple-violet);
  margin-bottom: 4px;
}
.dc-app .dc-stage-locator__store {
  font: 700 13px/1.3 var(--dc-font);
  color: var(--dc-fg-strong);
  margin-bottom: 4px;
}
.dc-app .dc-stage-locator__row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font: 400 11px/1.4 var(--dc-font);
  color: var(--dc-fg-muted);
}
.dc-app .dc-stage-locator__dist { color: var(--dc-purple); font-weight: 600; }

/* Lifestyle image */
.dc-app .dc-stage-lifestyle {
  position: relative;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: #F9F5FF;
  aspect-ratio: 16 / 9;
}
.dc-app .dc-stage-lifestyle img { width: 100%; height: 100%; object-fit: cover; }
.dc-app .dc-stage-lifestyle__caption {
  position: absolute;
  bottom: 10px;
  left: 12px;
  right: 12px;
  font: 700 11px/1.3 var(--dc-font);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #FFFFFF;
  text-shadow: 0 2px 12px rgba(0,0,0,0.55);
}

/* Reviews */
.dc-app .dc-stage-reviews {
  padding: 12px 14px;
  border-radius: 14px;
  background: #FFFFFF;
  border: 1px solid rgba(215,189,255,0.6);
  align-self: flex-start;
  width: 100%;
}
.dc-app .dc-stage-reviews__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(215,189,255,0.4);
}
.dc-app .dc-stage-reviews__rating {
  font: 800 16px/1 var(--dc-font);
  color: var(--dc-purple);
}
.dc-app .dc-stage-reviews__count {
  font: 600 11px/1 var(--dc-font);
  color: var(--dc-fg-muted);
}
.dc-app .dc-stage-reviews__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dc-app .dc-stage-reviews__item { padding: 6px 0; }
.dc-app .dc-stage-reviews__quote {
  font: 400 12px/1.45 var(--dc-font);
  color: var(--dc-fg-strong);
  font-style: italic;
  margin-bottom: 4px;
}
.dc-app .dc-stage-reviews__author {
  font: 600 11px/1 var(--dc-font);
  color: var(--dc-purple-violet);
}

/* Colorway */
.dc-app .dc-stage-colorway {
  padding: 12px 14px;
  border-radius: 14px;
  background: #FFFFFF;
  border: 1px solid rgba(215,189,255,0.6);
  align-self: flex-start;
  width: 100%;
}
.dc-app .dc-stage-colorway__title {
  font: 800 11px/1 var(--dc-font);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dc-purple-violet);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(215,189,255,0.45);
}
.dc-app .dc-stage-colorway__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.dc-app .dc-stage-colorway__cell {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(249,245,255,0.6);
}
.dc-app .dc-stage-colorway__swatch {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
}
.dc-app .dc-stage-colorway__name {
  font: 700 12px/1.2 var(--dc-font);
  color: var(--dc-fg-strong);
}
.dc-app .dc-stage-colorway__stock {
  font: 400 10px/1.3 var(--dc-font);
  color: var(--dc-fg-muted);
}

/* Beat reveal — re-declare display state for new kinds. */
.dc-app .dc-stage-beat--locator.is-in,
.dc-app .dc-stage-beat--lifestyle.is-in,
.dc-app .dc-stage-beat--reviews.is-in,
.dc-app .dc-stage-beat--colorway.is-in { display: block; }

/* Mobile: colorway grid stays 2-col but tighter. */
@media (max-width: 900px) {
  .dc-app .dc-stage-colorway__grid { gap: 6px; }
  .dc-app .dc-stage-colorway__cell { padding: 5px 6px; }
  .dc-app .dc-stage-colorway__swatch { width: 22px; height: 22px; }
  .dc-app .dc-stage-locator__img { width: 44px; height: 44px; }
}

/* ─── HUB v4.3 — case-study beat kinds ──────────────────────────────── */

/* Video loop */
.dc-app .dc-stage-video {
  position: relative;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: #0E0125;
  aspect-ratio: 16 / 9;
}
.dc-app .dc-stage-video video,
.dc-app .dc-stage-video img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.dc-app .dc-stage-video__caption {
  position: absolute;
  bottom: 10px;
  left: 12px;
  right: 12px;
  font: 700 11px/1.3 var(--dc-font);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #FFFFFF;
  text-shadow: 0 2px 12px rgba(0,0,0,0.55);
}

/* Brand ticker (horizontal marquee) */
.dc-app .dc-stage-ticker {
  position: relative;
  width: 100%;
  padding: 10px 0;
  border-radius: 14px;
  background: rgba(146,80,242,0.06);
  border: 1px solid rgba(146,80,242,0.18);
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.dc-app .dc-stage-ticker__track {
  display: inline-flex;
  gap: 32px;
  white-space: nowrap;
  animation: dc-stage-ticker-roll 28s linear infinite;
  will-change: transform;
}
.dc-app .dc-stage-ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 700 13px/1 var(--dc-font);
  color: var(--dc-purple-deep);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
@keyframes dc-stage-ticker-roll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .dc-app .dc-stage-ticker__track { animation: none; }
}

/* Stat billboard (the big number) */
.dc-app .dc-stage-billboard {
  width: 100%;
  padding: 22px 18px;
  border-radius: 14px;
  background: linear-gradient(140deg, rgba(133,236,255,0.10), rgba(146,80,242,0.10));
  border: 1px solid rgba(146,80,242,0.22);
  text-align: center;
}
.dc-app .dc-stage-billboard__num {
  font: 800 56px/1 var(--dc-font);
  letter-spacing: -0.03em;
  background-image: linear-gradient(110deg, #67E1F7 0%, #5612BD 35%, #9250F2 70%, #67E1F7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.dc-app .dc-stage-billboard__lab {
  margin-top: 8px;
  font: 700 12px/1.3 var(--dc-font);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dc-purple-deep);
}

/* Stat strip (supporting numbers under the billboard) */
.dc-app .dc-stage-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: 100%;
  padding: 10px;
  border-radius: 14px;
  background: #FFFFFF;
  border: 1px solid rgba(215,189,255,0.6);
}
.dc-app .dc-stage-strip__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 6px 4px;
}
.dc-app .dc-stage-strip__num {
  font: 800 18px/1 var(--dc-font);
  background-image: linear-gradient(110deg, #67E1F7 0%, #5612BD 50%, #9250F2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.01em;
}
.dc-app .dc-stage-strip__lab {
  margin-top: 4px;
  font: 600 10px/1.3 var(--dc-font);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dc-fg-muted);
}

/* Africa map */
.dc-app .dc-stage-map {
  position: relative;
  width: 100%;
  border-radius: 14px;
  background: linear-gradient(180deg, #FAFAFF 0%, #F4ECFF 100%);
  border: 1px solid rgba(215,189,255,0.6);
  aspect-ratio: 5 / 4;
  overflow: hidden;
}
.dc-app .dc-stage-map__svg {
  width: 100%;
  height: 100%;
  display: block;
}
.dc-app .dc-stage-map__dot {
  transform-origin: center;
  animation: dc-stage-map-pulse 2.6s ease-in-out infinite;
}
@keyframes dc-stage-map-pulse {
  0%, 100% { opacity: 0.45; r: 1.0; }
  50%      { opacity: 1;    r: 1.6; }
}
@media (prefers-reduced-motion: reduce) {
  .dc-app .dc-stage-map__dot { animation: none; opacity: 0.8; }
}
.dc-app .dc-stage-map__ticker {
  position: absolute;
  bottom: 10px;
  left: 12px;
  right: 12px;
  height: 22px;
  overflow: hidden;
  text-align: center;
}
.dc-app .dc-stage-map__city {
  display: block;
  font: 700 12px/22px var(--dc-font);
  letter-spacing: 0.04em;
  color: var(--dc-purple-deep);
  animation: dc-stage-map-ticker 24s linear infinite;
}
@keyframes dc-stage-map-ticker {
  0%,  9%   { opacity: 0; transform: translateY(8px); }
  10%, 18%  { opacity: 1; transform: translateY(-100%); }
  19%, 100% { opacity: 0; transform: translateY(-200%); }
}

/* Partner grid */
.dc-app .dc-stage-partners {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  width: 100%;
  padding: 10px;
  border-radius: 14px;
  background: #FFFFFF;
  border: 1px solid rgba(215,189,255,0.6);
}
.dc-app .dc-stage-partners__cell {
  padding: 8px 10px;
  border-radius: 8px;
  font: 700 11px/1.3 var(--dc-font);
  letter-spacing: 0.02em;
  background: rgba(249,245,255,0.7);
  border: 1px solid rgba(215,189,255,0.5);
  color: var(--dc-purple-deep);
}
.dc-app .dc-stage-partners__cell--cpg {
  background: rgba(133,236,255,0.10);
  border-color: rgba(133,236,255,0.3);
}
.dc-app .dc-stage-partners__cell--restaurant {
  background: rgba(146,80,242,0.08);
  border-color: rgba(146,80,242,0.28);
}

/* Reveal display states for the new beat kinds */
.dc-app .dc-stage-beat--video-loop.is-in,
.dc-app .dc-stage-beat--brand-ticker.is-in,
.dc-app .dc-stage-beat--stat-billboard.is-in,
.dc-app .dc-stage-beat--stat-strip.is-in,
.dc-app .dc-stage-beat--africa-map.is-in,
.dc-app .dc-stage-beat--partner-grid.is-in { display: block; }

/* Mobile tightening */
@media (max-width: 900px) {
  .dc-app .dc-stage-billboard__num { font-size: 40px; }
  .dc-app .dc-stage-strip { grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 8px; }
  .dc-app .dc-stage-strip__num { font-size: 14px; }
  .dc-app .dc-stage-strip__lab { font-size: 9px; }
  .dc-app .dc-stage-ticker__item { font-size: 12px; }
}

/* ─── HUB v4.3 — Case Study Stage (static, no sequencer) ─────────────── */

/* Brand logo above the headline */
.dc-app .dc-hub-pin__logo {
  margin-bottom: 14px;
  display: flex;
  align-items: center;
}
.dc-app .dc-hub-pin__logo img {
  height: 32px;
  width: auto;
  max-width: 180px;
  display: block;
}

/* Case-study stage canvas */
.dc-app .dc-cs-stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* ─── Video case (Diageo, Giant Eagle) ───────────────────────────── */
.dc-app .dc-stage-frame--has-video .dc-cs-stage__video {
  position: relative;
  width: 100%;
  flex: 1 1 60%;
  background: #0E0125;
  overflow: hidden;
}
.dc-app .dc-cs-stage__video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Caption sits BELOW the video, in the seam between video and billboard.
   No longer overlaying the video. */
.dc-app .dc-stage-frame--has-video .dc-cs-stage__caption {
  position: relative;
  width: 100%;
  padding: 10px 18px 0;
  font: 700 11px/1.4 var(--dc-font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dc-purple-deep);
  background: #FFFFFF;
  text-align: center;
  box-sizing: border-box;
}

/* Billboard inside the video-case frame */
.dc-app .dc-cs-stage__billboard {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.dc-app .dc-stage-frame--has-video .dc-cs-stage__billboard {
  flex: 1 1 40%;
  padding: 14px 24px 22px;
  background: linear-gradient(160deg, #FFFFFF 0%, #F9F5FF 100%);
}
.dc-app .dc-cs-stage__num {
  font: 800 56px/1 var(--dc-font);
  letter-spacing: -0.03em;
  background-image: linear-gradient(110deg, #67E1F7 0%, #5612BD 35%, #9250F2 70%, #67E1F7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.dc-app .dc-cs-stage__lab {
  margin-top: 6px;
  font: 700 11px/1.4 var(--dc-font);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dc-purple-deep);
  max-width: 380px;
}

/* ─── Stat-only case — purple sphere, no frame ──────────────────────
   Same gradient sphere treatment used on the case-study detail pages
   (.dc-cs-media__inline-stat). Renders standalone in the right column. */
.dc-app .dc-cs-stage--stat-only {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto;
  padding: 20px 0;
}
.dc-app .dc-cs-sphere {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  color: #FFFFFF;
  text-align: center;
  padding: 32px;
  box-sizing: border-box;
  background:
    radial-gradient(circle at 28% 22%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 22%),
    radial-gradient(circle at 32% 28%,
      #D7BDFF 0%,
      #B57FF7 14%,
      #9250F2 42%,
      #6F2BD9 78%,
      #3A0890 100%
    );
  box-shadow:
    inset -14px -22px 50px rgba(20,0,60,0.45),
    inset 10px 14px 32px rgba(255,255,255,0.22),
    0 30px 70px -22px rgba(86,18,189,0.6);
}
.dc-app .dc-cs-sphere__num {
  font: 800 72px/1 var(--dc-font);
  letter-spacing: -0.025em;
}
.dc-app .dc-cs-sphere__lab {
  font: 600 13px/1.4 var(--dc-font);
  margin-top: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  max-width: 200px;
}

/* Mobile tightening */
@media (max-width: 900px) {
  .dc-app .dc-hub-pin__logo img { height: 26px; }
  .dc-app .dc-stage-frame--has-video .dc-cs-stage__num { font-size: 44px; }
  .dc-app .dc-cs-sphere { max-width: 280px; padding: 24px; }
  .dc-app .dc-cs-sphere__num { font-size: 52px; }
  .dc-app .dc-cs-sphere__lab { font-size: 11px; }
}