/* 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: left 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 left (text reveals right-to-left) */
.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; }
}

/* ─── Blog post — "your-brand-in-chatgpt" ──────────────────────────── */
.dc-app.dc-blog { background: #fff; color: #250651; }

/* Hero — uses DaVinci Background - Light.svg full-bleed behind copy */
.dc-app .dc-blog-hero { position: relative; padding: 120px 0 72px; overflow: hidden; background: #fff; }
.dc-app .dc-blog-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-blog-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0) 60%, rgba(255,255,255,0.92) 100%); z-index: 1; pointer-events: none; }
.dc-app .dc-blog-hero__inner { max-width: 860px; margin: 0 auto; text-align: left; position: relative; z-index: 2; }
.dc-app .dc-blog-hero__meta { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: #5612BD; margin-bottom: 24px; }
.dc-app .dc-blog-hero__tag { background: rgba(255,255,255,0.85); backdrop-filter: blur(4px); padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(86,18,189,0.15); }
.dc-app .dc-blog-hero__dot { color: #9DA0B8; }
.dc-app .dc-blog-hero__date,
.dc-app .dc-blog-hero__read { color: #6F6883; letter-spacing: 0.12em; }
.dc-app .dc-blog-hero__h { font-weight: 800; letter-spacing: -0.025em; font-size: 64px; line-height: 1.05; margin: 0 0 24px; color: #100D0C; }
.dc-app .dc-blog-hero__deck { font-size: 21px; line-height: 1.6; color: #2b1f4a; margin: 0; max-width: 760px; }

/* Body */
.dc-app .dc-blog-body { padding: 56px 0 96px; position: relative; }
.dc-app .dc-blog-grid { max-width: 760px; margin: 0 auto; }
.dc-app .dc-blog-section { margin: 0 0 48px; }
.dc-app .dc-blog-section p { font-size: 18px; line-height: 1.75; color: #2b1f4a; margin: 0 0 18px; }
.dc-app .dc-blog-section strong { color: #100D0C; font-weight: 800; }
.dc-app .dc-blog-section a { color: #5612BD; font-weight: 700; text-decoration: underline; text-decoration-color: rgba(86,18,189,0.35); text-underline-offset: 3px; }
.dc-app .dc-blog-section a:hover { text-decoration-color: #5612BD; }
.dc-app .dc-blog-h2 { font-weight: 800; letter-spacing: -0.02em; font-size: 36px; line-height: 1.15; color: #100D0C; margin: 56px 0 20px; }
.dc-app .dc-blog-h3 { font-weight: 800; letter-spacing: -0.015em; font-size: 22px; line-height: 1.3; color: #250651; margin: 32px 0 12px; }
.dc-app .dc-blog-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: rgba(86,18,189,0.08); color: #5612BD; padding: 2px 8px; border-radius: 6px; font-size: 0.92em; font-weight: 700; }

/* Numbered list — used when a section explicitly enumerates points */
.dc-app .dc-blog-list { list-style: none; counter-reset: dcblog; margin: 8px 0 22px; padding: 0; }
.dc-app .dc-blog-list > li { position: relative; padding: 14px 20px 14px 60px; margin: 0 0 12px; font-size: 17px; line-height: 1.7; color: #2b1f4a; background: #FAF6FF; border: 1px solid rgba(86,18,189,0.12); border-radius: 18px; counter-increment: dcblog; }
.dc-app .dc-blog-list > li::before { content: counter(dcblog); position: absolute; left: 16px; top: 14px; width: 32px; height: 32px; border-radius: 10px; background: #5612BD; color: #fff; font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.dc-app .dc-blog-list > li strong { color: #100D0C; font-weight: 800; }

/* Pull-quote */
.dc-app .dc-blog-pull { margin: 32px 0; padding: 28px 32px; border-radius: 24px; background: linear-gradient(135deg, rgba(133,236,255,0.18) 0%, rgba(215,189,255,0.28) 100%); border-left: 4px solid #5612BD; position: relative; }
.dc-app .dc-blog-pull .dc-spark { position: absolute; top: 18px; right: 22px; opacity: 0.55; }
.dc-app .dc-blog-pull__q { font-weight: 800; letter-spacing: -0.015em; font-size: 22px; line-height: 1.4; color: #250651; margin: 0 0 12px; font-style: normal; }
.dc-app .dc-blog-pull__src { font-size: 13px; color: #5612BD; font-weight: 700; letter-spacing: 0.04em; }

/* Inline mini-chat — frame holds a width-capped inner stack so the
   spec table doesn't float in a wide lavender margin on desktop. */
.dc-app .dc-blog-chat { margin: 36px 0; max-width: 100%; }
.dc-app .dc-blog-chat__frame { background: linear-gradient(180deg, #F4ECFF 0%, #ECDDFE 100%); border-radius: 28px; padding: 28px 22px; border: 1px solid rgba(86,18,189,0.12); box-shadow: 0 24px 60px -28px rgba(86,18,189,0.35); }
.dc-app .dc-blog-chat__inner { max-width: 480px; margin: 0 auto; }
.dc-app .dc-blog-chat__header { display: flex; align-items: center; gap: 12px; padding: 4px 6px 16px; }
.dc-app .dc-blog-chat__avatar { width: 36px; height: 36px; border-radius: 12px; background: linear-gradient(135deg,#5612BD,#9250F2); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.dc-app .dc-blog-chat__brand { font-weight: 800; color: #100D0C; font-size: 16px; letter-spacing: -0.01em; }
.dc-app .dc-blog-chat__sub { font-size: 12px; color: #6F6883; font-weight: 600; }
.dc-app .dc-blog-chat__feed { display: flex; flex-direction: column; gap: 10px; }
.dc-app .dc-blog-chat__bubble { border-radius: 22px; padding: 14px 18px; font-size: 15.5px; line-height: 1.45; max-width: 92%; }
.dc-app .dc-blog-chat__bubble--user { background: #5612BD; color: #fff; align-self: flex-end; font-weight: 600; border-bottom-right-radius: 8px; }
.dc-app .dc-blog-chat__bubble--hero { background: #fff; padding: 0; overflow: hidden; border: 1px solid rgba(86,18,189,0.08); align-self: flex-start; width: 100%; max-width: 100%; }
.dc-app .dc-blog-chat__media { aspect-ratio: 16/9; overflow: hidden; }
.dc-app .dc-blog-chat__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dc-app .dc-blog-chat__body { padding: 14px 18px 16px; }
.dc-app .dc-blog-chat__title { font-weight: 800; font-size: 16px; color: #100D0C; letter-spacing: -0.01em; }
.dc-app .dc-blog-chat__metaline { color: #6F6883; font-size: 13px; margin-top: 3px; font-weight: 600; }
.dc-app .dc-blog-chat__bubble--spec { background: #fff; border: 1px solid rgba(86,18,189,0.10); align-self: flex-start; width: 100%; max-width: 100%; padding: 16px 18px; }
.dc-app .dc-blog-chat__spec-title { font-weight: 800; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: #5612BD; margin-bottom: 8px; }
.dc-app .dc-blog-chat__spec-list { list-style: none; margin: 0; padding: 0; }
.dc-app .dc-blog-chat__spec-list li { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-top: 1px solid rgba(86,18,189,0.10); font-size: 14px; }
.dc-app .dc-blog-chat__spec-list li:first-child { border-top: none; }
.dc-app .dc-blog-chat__spec-k { color: #757267; font-weight: 700; }
.dc-app .dc-blog-chat__spec-v { color: #250651; font-weight: 700; text-align: right; }
.dc-app .dc-blog-chat__bubble--guardrail { background: #FFF8E1; border: 1px solid #FFE082; align-self: flex-start; width: 100%; max-width: 100%; display: flex; gap: 12px; align-items: flex-start; }
.dc-app .dc-blog-chat__gicon { width: 36px; height: 36px; border-radius: 10px; background: #FFE082; color: #6D4C0F; font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.dc-app .dc-blog-chat__glabel { font-weight: 800; color: #6D4C0F; font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 2px; }
.dc-app .dc-blog-chat__gtext { font-size: 14.5px; line-height: 1.5; color: #3a2a08; }
.dc-app .dc-blog-chat__bubble--locator { background: #fff; border: 1px solid rgba(86,18,189,0.10); align-self: flex-start; width: 100%; max-width: 100%; }
.dc-app .dc-blog-chat__loc-store { font-weight: 800; color: #100D0C; font-size: 15px; }
.dc-app .dc-blog-chat__loc-addr { color: #6F6883; font-size: 13.5px; margin-top: 2px; }
.dc-app .dc-blog-chat__loc-dist { color: #5612BD; font-weight: 700; font-size: 13px; margin-top: 6px; }
.dc-app .dc-blog-chat__cap { font-size: 13px; color: #6F6883; font-style: italic; margin-top: 12px; text-align: center; }

/* Inline CTA card — calm light surface, purple accent. No bright
   gradient background that competes with the text. */
.dc-app .dc-blog-cta { margin: 40px 0; }
.dc-app .dc-blog-cta__inner { background: #F9F5FF; border-radius: 24px; padding: 32px 30px; border: 1px solid rgba(86,18,189,0.18); border-left: 6px solid #5612BD; text-align: left; }
.dc-app .dc-blog-cta__inner .dc-eyebrow { color: #5612BD; }
.dc-app .dc-blog-cta__h { font-weight: 800; letter-spacing: -0.02em; font-size: 26px; line-height: 1.25; margin: 10px 0 12px; color: #100D0C; }
.dc-app .dc-blog-cta__p { font-size: 16.5px; line-height: 1.6; margin: 0 0 22px; color: #3a2861; }

/* Final CTA — no overrides needed. The final dark section uses the
   same .dc-cs-section--dark + .dc-cs-section--full pattern as the
   use-case pages and renders as a direct sibling of <article>, so it
   spans full-bleed naturally. */

/* Mobile */
@media (max-width: 900px) {
  .dc-app .dc-blog-hero { padding: 64px 0 40px; }
  .dc-app .dc-blog-hero__h { font-size: 38px; }
  .dc-app .dc-blog-hero__deck { font-size: 17px; }
  .dc-app .dc-blog-h2 { font-size: 26px; margin: 40px 0 14px; }
  .dc-app .dc-blog-h3 { font-size: 19px; }
  .dc-app .dc-blog-section p { font-size: 16.5px; }
  .dc-app .dc-blog-pull__q { font-size: 18px; }
  .dc-app .dc-blog-cta__h { font-size: 21px; }
  .dc-app .dc-blog-cta__inner { padding: 26px 22px; }
  .dc-app .dc-blog-chat__inner { max-width: 100%; }
}
@media (max-width: 480px) {
  .dc-app .dc-blog-hero__h { font-size: 30px; }
}

/* ══════════════════════════════════════════════════════════════════
   PRODUCT PAGE v5 — ONE continuous scene (dc-cs-prodx-scene / -phone /
   -xcard). hero-right phone → center → emit → ring → shift left. Driven
   by initProdxScene (rAF). --dc-nav-h reserves the site nav height.
   ══════════════════════════════════════════════════════════════════ */
.dc-app.dc-cs-prodx { --dc-nav-h: 116px; }

/* shared phone */
.dc-app .dc-cs-prodx-phone { position: relative; width: clamp(300px, calc((100vh - var(--dc-nav-h) - 52px) * 320 / 686), 344px); aspect-ratio: 320 / 686; background: #0a0a0c; border-radius: 50px; padding: 11px; box-shadow: 0 56px 120px -36px rgba(20,4,50,.6), 0 0 0 2px rgba(255,255,255,.06) inset; }
.dc-app .dc-cs-prodx-phone__btn { position: absolute; background: #1c1c22; border-radius: 3px; }
.dc-app .dc-cs-prodx-phone__btn--power { right: -3px; top: 158px; width: 3px; height: 62px; }
.dc-app .dc-cs-prodx-phone__btn--vol { left: -3px; top: 136px; width: 3px; height: 44px; }
.dc-app .dc-cs-prodx-phone__screen { position: relative; height: 100%; background: #fff; border-radius: 40px; overflow: hidden; }
.dc-app .dc-cs-prodx-phone__status { display: flex; align-items: center; justify-content: space-between; padding: 13px 24px 6px; font-size: 12px; font-weight: 700; color: #100D0C; }
.dc-app .dc-cs-prodx-phone__island { width: 76px; height: 19px; background: #0a0a0c; border-radius: 12px; }
.dc-app .dc-cs-prodx-phone__ind { display: inline-flex; gap: 3px; }
.dc-app .dc-cs-prodx-phone__ind i { width: 4px; height: 11px; background: #100D0C; border-radius: 1px; display: inline-block; }
.dc-app .dc-cs-prodx-scr { position: absolute; left: 0; right: 0; top: 42px; bottom: 0; padding: 12px 15px; overflow: hidden; }
.dc-app .dc-cs-prodx-scr__hdr { display: flex; align-items: center; gap: 9px; padding: 4px 2px 12px; border-bottom: 1px solid #efeaf7; margin-bottom: 12px; }
.dc-app .dc-cs-prodx-scr__avatar { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg,#5612BD,#9250F2); color: #fff; font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.dc-app .dc-cs-prodx-scr__brand { font-weight: 800; font-size: 14px; color: #100D0C; }
.dc-app .dc-cs-prodx-scr__sub { font-size: 11px; color: #9a93ab; }
.dc-app .dc-cs-prodx-msg { font-size: 13px; line-height: 1.45; border-radius: 14px; padding: 9px 12px; margin: 0 0 9px; max-width: 92%; }
.dc-app .dc-cs-prodx-msg--user { background: #efeaf7; color: #250651; margin-left: auto; }
.dc-app .dc-cs-prodx-msg--ai { background: #f6f4fb; color: #3a3450; }
.dc-app .dc-cs-prodx-card { border: 1px solid #e9e3f5; border-radius: 16px; overflow: hidden; margin-bottom: 9px; }
.dc-app .dc-cs-prodx-card__media { aspect-ratio: 16/9; overflow: hidden; }
.dc-app .dc-cs-prodx-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dc-app .dc-cs-prodx-card__body { padding: 10px 12px 12px; }
.dc-app .dc-cs-prodx-card__title { font-weight: 800; font-size: 13px; color: #100D0C; }
.dc-app .dc-cs-prodx-card__meta { font-size: 11px; color: #9a93ab; margin-top: 2px; }
.dc-app .dc-cs-prodx-card__ctas { display: flex; gap: 6px; margin-top: 9px; }
.dc-app .dc-cs-prodx-card__cta { font-size: 11px; font-weight: 700; padding: 6px 12px; border-radius: 999px; border: 1px solid #d7bdff; color: #5612BD; }
.dc-app .dc-cs-prodx-card__cta--p { background: #85ECFF; border-color: #85ECFF; color: #250651; }
.dc-app .dc-cs-prodx-swatches { display: flex; gap: 8px; margin: 0 0 9px; }
.dc-app .dc-cs-prodx-swatch { flex: 1; text-align: center; font-size: 10px; font-weight: 700; color: #6a6577; }
.dc-app .dc-cs-prodx-swatch img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 10px; display: block; margin-bottom: 3px; }
.dc-app .dc-cs-prodx-inline-stars { color: #5612BD; letter-spacing: 1px; }

/* ─── SCENE ─── */
.dc-app .dc-cs-prodx-scene { position: relative; height: 820vh; --hero:1; --bg:0; --jrn:0; --cue:1; --collage:0; }
.dc-app .dc-cs-prodx-scene__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; background: #0E0125; color: #fff; }
.dc-app .dc-cs-prodx-scene__vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; z-index: 0; }
.dc-app .dc-cs-prodx-scene__veil { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(130% 90% at 30% 30%, rgba(14,1,37,0) 30%, rgba(14,1,37,.72) 82%); }
.dc-app .dc-cs-prodx-scene__light { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: var(--bg); background: linear-gradient(180deg, #F4EEFF 0%, #FBF8FF 100%); }

.dc-app .dc-cs-prodx-scene__hero { position: absolute; left: clamp(24px, 6vw, 110px); top: calc(50% + var(--dc-nav-h) / 2); transform: translateY(-50%); z-index: 5; width: min(560px, 46vw); text-align: left; opacity: var(--hero); }
.dc-app .dc-cs-prodx-scene__lead { margin: 0 0 16px; font-size: clamp(16px, 1.5vw, 21px); font-weight: 600; color: rgba(215,189,255,.92); }
.dc-app .dc-cs-prodx-scene__h { margin: 0; font-weight: 800; letter-spacing: -0.03em; line-height: 1.03; font-size: clamp(36px, 4.6vw, 72px); color: #fff; }
.dc-app .dc-cs-prodx-scene__cy { color: #85ECFF; }
.dc-app .dc-cs-prodx-scene__value { margin: 22px 0 0; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.6; color: rgba(255,255,255,.78); max-width: 460px; }
.dc-app .dc-cs-prodx-scene__cue { margin-top: 30px; display: inline-flex; align-items: center; gap: 10px; opacity: var(--cue); font-size: 15px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.92); }
.dc-app .dc-cs-prodx-scene__cue-arr { font-size: 20px; }
.dc-app .dc-cs-prodx-scene__cue-arr { animation: dcProdxBob 1.6s ease-in-out infinite; }
@keyframes dcProdxBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* Collage section header — anchored top-left, clear of the right-side
   phone; reads on the light collage surface. Opacity scrubbed (--collage). */
.dc-app .dc-cs-prodx-scene__collagehd {
  position: absolute; z-index: 7; left: clamp(24px, 6vw, 110px); top: calc(var(--dc-nav-h) + 3vh);
  width: min(560px, 52vw); text-align: left; opacity: var(--collage); pointer-events: none;
}
.dc-app .dc-cs-prodx-scene__collage-eyebrow { margin: 0 0 12px; font-size: 13px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: #5612BD; }
.dc-app .dc-cs-prodx-scene__collage-h { margin: 0; font-weight: 800; letter-spacing: -0.025em; line-height: 1.06; font-size: clamp(28px, 3.6vw, 52px); color: #100D0C; }

/* Mobile "questions shoppers ask" row — hidden on desktop (scatter plays). */
.dc-app .dc-cs-prodx-scene__qrow { display: none; }
/* Mobile lede above the phone — hidden on desktop. */
.dc-app .dc-cs-prodx-scene__mlede { display: none; }
.dc-app .dc-cs-prodx-scene__mlede-eye { font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: #5612BD; }
.dc-app .dc-cs-prodx-scene__mlede-tx { font-size: 15px; line-height: 1.5; font-weight: 600; color: #4a4458; }
.dc-app .dc-cs-prodx-scene__qcard {
  flex: 0 0 80%; max-width: 320px; scroll-snap-align: start;
  background: #fff; border: 1px solid #E1D5F7; border-radius: 18px; padding: 18px 18px 20px;
  box-shadow: 0 22px 50px -30px rgba(86,18,189,.5);
}
.dc-app .dc-cs-prodx-scene__qcard-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #5612BD; }
.dc-app .dc-cs-prodx-scene__qcard-q { margin: 12px 0 0; font-size: 17px; line-height: 1.4; font-weight: 700; color: #250651; }

.dc-app .dc-cs-prodx-scene__phone { position: absolute; left: 50%; top: calc(50% + var(--dc-nav-h) / 2); z-index: 6; transform: translate(-50%, -50%); }
.dc-app .dc-cs-prodx-scene__breathe { animation: dcProdxBreathe 4.8s ease-in-out infinite; transform-origin: center; }
@keyframes dcProdxBreathe { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-9px) scale(1.012); } }

.dc-app .dc-cs-prodx-scene__ring { position: absolute; inset: 0; z-index: 4; }
.dc-app .dc-cs-prodx-xcard { position: absolute; left: 50%; top: calc(50% + var(--dc-nav-h) / 2); width: 252px; opacity: 0; will-change: transform, opacity; background: #fff; border-radius: 20px; border: 1px solid #ece5f8; box-shadow: 0 28px 64px -32px rgba(86,18,189,.5); overflow: hidden; color: #100D0C; }
.dc-app .dc-cs-prodx-xcard--tall { padding: 18px; }
.dc-app .dc-cs-prodx-xcard__lbl { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: #5612BD; margin-bottom: 12px; }
.dc-app .dc-cs-prodx-xcard__h { font-weight: 800; font-size: 16px; line-height: 1.25; letter-spacing: -0.01em; margin-bottom: 12px; }
.dc-app .dc-cs-prodx-xtable { display: flex; flex-direction: column; gap: 10px; }
.dc-app .dc-cs-prodx-xrow { display: flex; align-items: center; gap: 11px; }
.dc-app .dc-cs-prodx-xrow img { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; flex: 0 0 auto; }
.dc-app .dc-cs-prodx-xrow div { display: flex; flex-direction: column; }
.dc-app .dc-cs-prodx-xrow b { font-size: 13px; }
.dc-app .dc-cs-prodx-xrow span { font-size: 11px; color: #9a93ab; }
.dc-app .dc-cs-prodx-xkv { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; padding: 6px 0; border-bottom: 1px solid #f3eefb; }
.dc-app .dc-cs-prodx-xkv:last-child { border-bottom: 0; }
.dc-app .dc-cs-prodx-xkv span:first-child { color: #9a93ab; flex: 0 0 auto; }
.dc-app .dc-cs-prodx-xkv span:last-child { text-align: right; font-weight: 600; color: #3a3450; }
.dc-app .dc-cs-prodx-xreview__hdr { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.dc-app .dc-cs-prodx-xreview__stars { color: #5612BD; font-size: 16px; letter-spacing: 2px; }
.dc-app .dc-cs-prodx-xreview__num { font-weight: 800; font-size: 22px; color: #250651; }
.dc-app .dc-cs-prodx-xreview__count { font-size: 12px; color: #9a93ab; }
.dc-app .dc-cs-prodx-recco { display: flex; align-items: center; gap: 10px; margin: 0 0 9px; padding: 11px 13px; border-radius: 14px; background: #e3f8ff; border: 1px solid #85ECFF; }
.dc-app .dc-cs-prodx-recco__stat { flex: 0 0 auto; font-weight: 800; font-size: 22px; line-height: 1; color: #250651; }
.dc-app .dc-cs-prodx-recco__tx { font-size: 12px; line-height: 1.4; font-weight: 600; color: #250651; }
.dc-app .dc-cs-prodx-xreview__quote { font-size: 14px; line-height: 1.5; color: #2b2640; margin: 0 0 12px; }
.dc-app .dc-cs-prodx-xreview__by { font-size: 12px; font-weight: 700; color: #5612BD; }
.dc-app .dc-cs-prodx-xcard--img { width: 270px; }
.dc-app .dc-cs-prodx-xcard__media { aspect-ratio: 4/3; overflow: hidden; }
.dc-app .dc-cs-prodx-xcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dc-app .dc-cs-prodx-xcard__cap { padding: 12px 15px; font-weight: 700; font-size: 13px; line-height: 1.35; }

/* Lead label — tight, top-centered, never over the phone. */
.dc-app .dc-cs-prodx-scene__leadtext { position: absolute; left: 50%; top: calc(var(--dc-nav-h) + 14px); transform: translateX(-50%); z-index: 7; width: max-content; max-width: 90vw; text-align: center; opacity: var(--lead); pointer-events: none; }
.dc-app .dc-cs-prodx-scene__leadtext-eyebrow { display: inline-block; margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: #5612BD; }
.dc-app .dc-cs-prodx-scene__leadtext-h { margin: 3px 0 0; font-weight: 800; font-size: clamp(18px, 1.7vw, 23px); letter-spacing: -0.01em; color: #100D0C; }

.dc-app .dc-cs-prodx-scene__detail { position: absolute; right: clamp(24px, 5vw, 92px); top: calc(50% + var(--dc-nav-h) / 2); z-index: 7; width: min(420px, 40vw); transform: translateY(-50%) translateX(calc((1 - var(--detail)) * 44px)); opacity: var(--detail); text-align: left; }
.dc-app .dc-cs-prodx-scene__detail-eyebrow { margin: 0 0 14px; font-size: 13px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: #5612BD; }
.dc-app .dc-cs-prodx-scene__detail-h { margin: 0; font-weight: 800; font-size: clamp(28px, 3.2vw, 46px); letter-spacing: -0.025em; line-height: 1.08; color: #100D0C; }
.dc-app .dc-cs-prodx-scene__detail-p { margin: 20px 0 0; font-size: clamp(15px, 1.1vw, 18px); line-height: 1.6; color: #4a4458; }

/* ── "What if I'm not there?" — generic vs branded answer toggle ── */
.dc-app .dc-cs-prodx-miss { background: #FBF8FF; padding: clamp(72px, 11vh, 140px) 0; }
.dc-app .dc-cs-prodx-miss__head { max-width: 720px; margin: 0 auto 40px; text-align: center; }
.dc-app .dc-cs-prodx-miss__eyebrow { margin: 0 0 12px; font-size: 13px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: #5612BD; }
.dc-app .dc-cs-prodx-miss__h { margin: 0; font-weight: 800; letter-spacing: -0.025em; line-height: 1.06; font-size: clamp(30px, 4vw, 56px); color: #100D0C; }
.dc-app .dc-cs-prodx-miss__p { margin: 18px auto 0; max-width: 600px; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.6; color: #4a4458; }

.dc-app .dc-cs-prodx-miss__card { max-width: 860px; margin: 0 auto; background: transparent; border: 0; box-shadow: none; overflow: visible; }
/* Two-tab control above the laptop (segmented) */
.dc-app .dc-cs-prodx-miss__tabs { display: flex; gap: 4px; width: fit-content; margin: 0 auto 18px; padding: 5px; background: #ece6f6; border-radius: 14px; }
.dc-app .dc-cs-prodx-miss__tab { border: 0; cursor: pointer; background: transparent; padding: 11px 22px; border-radius: 10px; font-weight: 700; font-size: 14px; color: #6a6577; transition: background .25s ease, color .25s ease, box-shadow .25s ease; }
.dc-app .dc-cs-prodx-miss__tab:hover { color: #250651; }
.dc-app .dc-cs-prodx-miss__tab.is-on { background: #fff; color: #250651; box-shadow: 0 4px 12px -4px rgba(86,18,189,.4); }
.dc-app .dc-cs-prodx-miss__tab[data-miss-tab="with"].is-on { background: #5612BD; color: #fff; box-shadow: 0 6px 16px -6px rgba(86,18,189,.6); }
/* Cyan end-of-chat nudge (generic only) */
.dc-app .dc-cs-prodx-miss__endnote { width: 100%; border: 0; cursor: pointer; text-align: left; font-family: inherit; align-items: center; gap: 10px; background: #85ECFF; color: #06323F; border-radius: 14px; padding: 14px 16px; font-size: 14px; font-weight: 800; line-height: 1.4; box-shadow: 0 16px 36px -16px rgba(6,50,63,.5); transition: transform .2s ease, box-shadow .2s ease; }
.dc-app .dc-cs-prodx-miss__endnote.dc-cs-prodx-miss__rv.is-shown { display: flex; }
.dc-app .dc-cs-prodx-miss__endnote:hover { transform: translateY(-1px); box-shadow: 0 20px 42px -16px rgba(6,50,63,.6); }
.dc-app .dc-cs-prodx-miss__endnote-ic { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px; background: rgba(6,50,63,.14); display: flex; align-items: center; justify-content: center; }
.dc-app .dc-cs-prodx-miss__endnote-arr { margin-left: auto; font-size: 16px; }
/* Realistic silver MacBook frame */
.dc-app .dc-cs-prodx-miss__laptop { max-width: 880px; margin: 0 auto; }
/* aluminium lid */
.dc-app .dc-cs-prodx-miss__screen {
  position: relative;
  background: linear-gradient(168deg, #f1f2f5 0%, #dcdee3 46%, #c6cad1 100%);
  border-radius: 24px 24px 6px 6px; padding: 11px;
  box-shadow: 0 54px 110px -52px rgba(16,13,12,.55), inset 0 1px 0 rgba(255,255,255,.85), inset 0 0 0 1px rgba(120,122,135,.4);
}
/* camera dot on the bezel */
.dc-app .dc-cs-prodx-miss__screen::after { content: ""; position: absolute; top: 17px; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%; background: #3a3a40; box-shadow: 0 0 0 1.5px #1b1b1f; z-index: 2; }
/* black bezel + white display, accurate 16:10 */
.dc-app .dc-cs-prodx-miss__viewport {
  box-sizing: border-box; background: #fff; border: 8px solid #2a2b31; border-radius: 11px;
  aspect-ratio: 16 / 10; min-height: 380px; overflow: hidden; display: flex; flex-direction: column;
}
.dc-app .dc-cs-prodx-miss__bar { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; background: #f3f0f7; border-bottom: 1px solid #ece7f5; }
.dc-app .dc-cs-prodx-miss__dot { width: 11px; height: 11px; border-radius: 50%; background: #d2cede; }
.dc-app .dc-cs-prodx-miss__dot--r { background: #ff5f57; }
.dc-app .dc-cs-prodx-miss__dot--y { background: #febc2e; }
.dc-app .dc-cs-prodx-miss__dot--g { background: #28c840; }
.dc-app .dc-cs-prodx-miss__bar-tab { margin-left: 10px; font-size: 11px; font-weight: 600; color: #8a8596; background: #fff; border: 1px solid #e7e1f2; padding: 4px 16px; border-radius: 7px; }
.dc-app .dc-cs-prodx-miss__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 22px; -webkit-overflow-scrolling: touch; }
/* base: hinge + aluminium wedge with the centre lip */
.dc-app .dc-cs-prodx-miss__deck { position: relative; height: 18px; width: 110%; margin: 0 -5%; background: linear-gradient(180deg, #dadce1 0%, #c0c4cb 52%, #a6aab2 100%); border-radius: 0 0 14px 14px; box-shadow: 0 26px 44px -22px rgba(16,13,12,.5); }
.dc-app .dc-cs-prodx-miss__deck::before { content: ""; position: absolute; top: 0; left: 5.5%; right: 5.5%; height: 3px; background: linear-gradient(180deg, #8d9099, #c3c6cd); }
.dc-app .dc-cs-prodx-miss__notch { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 116px; height: 9px; background: linear-gradient(180deg, #9a9ea6, #c2c6cd); border-radius: 0 0 11px 11px; }
.dc-app .dc-cs-prodx-miss__prompt { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.dc-app .dc-cs-prodx-miss__prompt-lbl { flex: 0 0 auto; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #9250F2; background: #f0e9fb; border-radius: 999px; padding: 6px 12px; }
.dc-app .dc-cs-prodx-miss__prompt-q { margin: 0; font-size: clamp(15px, 1.4vw, 19px); font-weight: 700; color: #250651; }

.dc-app .dc-cs-prodx-miss__answer { padding: 0; }
.dc-app .dc-cs-prodx-miss__state--brand { display: none; }
.dc-app .dc-cs-prodx-miss__card.is-brand .dc-cs-prodx-miss__state--generic { display: none; }
.dc-app .dc-cs-prodx-miss__card.is-brand .dc-cs-prodx-miss__state--brand { display: block; }
.dc-app .dc-cs-prodx-miss__state { animation: dcMissIn .4s ease; }
@keyframes dcMissIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.dc-app .dc-cs-prodx-miss__tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 18px; padding: 6px 12px; border-radius: 999px; }
.dc-app .dc-cs-prodx-miss__tag--generic { color: #7c7689; background: #f0f0f3; }
.dc-app .dc-cs-prodx-miss__tag--brand { color: #5612BD; background: #f0e9fb; }

/* GENERIC (without): a wall of text + bullets, then a bland white PDP */
.dc-app .dc-cs-prodx-miss__generic { display: flex; flex-direction: column; gap: 18px; }
.dc-app .dc-cs-prodx-miss__gen-tx p { margin: 0 0 10px; font-size: 15px; line-height: 1.55; color: #4a4458; }
.dc-app .dc-cs-prodx-miss__gen-tx ul { margin: 0 0 10px; padding-left: 18px; }
.dc-app .dc-cs-prodx-miss__gen-tx li { font-size: 14.5px; line-height: 1.5; color: #4a4458; margin-bottom: 6px; }
.dc-app .dc-cs-prodx-miss__gen-foot { font-size: 13px; color: #9a93ab; }
.dc-app .dc-cs-prodx-miss__pdp { align-self: flex-start; width: 200px; border: 1px solid #ededf0; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 12px 30px -22px rgba(16,13,12,.3); }
.dc-app .dc-cs-prodx-miss__pdp-img { aspect-ratio: 1/1; background: #fff; }
.dc-app .dc-cs-prodx-miss__pdp-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dc-app .dc-cs-prodx-miss__pdp-meta { padding: 10px 12px; }
.dc-app .dc-cs-prodx-miss__pdp-title { font-weight: 700; font-size: 13px; color: #3a3450; }
.dc-app .dc-cs-prodx-miss__pdp-sub { font-size: 11px; color: #9a93ab; margin-top: 2px; }

/* WITH (Lumera): a rich, branded conversation */
.dc-app .dc-cs-prodx-miss__chat { display: flex; flex-direction: column; gap: 12px; }
.dc-app .dc-cs-prodx-miss__welcome { border: 1px solid #eee; border-radius: 18px; overflow: hidden; }
.dc-app .dc-cs-prodx-miss__welcome-media { aspect-ratio: 16/10; overflow: hidden; }
.dc-app .dc-cs-prodx-miss__welcome-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dc-app .dc-cs-prodx-miss__welcome-body { padding: 16px 18px; }
.dc-app .dc-cs-prodx-miss__welcome-h { font-weight: 800; font-size: 22px; color: #100D0C; }
.dc-app .dc-cs-prodx-miss__welcome-sub { font-weight: 700; font-size: 14px; color: #5612BD; margin-top: 4px; }
.dc-app .dc-cs-prodx-miss__welcome-p { margin: 10px 0 0; font-size: 15px; color: #4a4458; }
.dc-app .dc-cs-prodx-miss__b { max-width: 86%; border-radius: 16px; padding: 12px 15px; font-size: 15px; line-height: 1.5; }
.dc-app .dc-cs-prodx-miss__b--ai { background: #f4f1fb; color: #3a3450; align-self: flex-start; }
.dc-app .dc-cs-prodx-miss__b--user { background: #5612BD; color: #fff; align-self: flex-end; }
/* scripted turns: each user bubble / AI block reveals on cue */
.dc-app .dc-cs-prodx-miss__turn { display: flex; flex-direction: column; gap: 12px; }
.dc-app .dc-cs-prodx-miss__rv { display: none; }
.dc-app .dc-cs-prodx-miss__rv.is-shown { display: block; animation: dcMissIn .42s ease; }
.dc-app [data-turn-ai].dc-cs-prodx-miss__rv.is-shown { display: flex; flex-direction: column; gap: 12px; }
/* typed input bar (ChatGPT-style, pinned at the bottom of the screen) */
.dc-app .dc-cs-prodx-miss__inputbar { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-top: 1px solid #ece7f5; background: #faf8ff; }
.dc-app .dc-cs-prodx-miss__inputfield { flex: 1 1 auto; display: flex; align-items: center; min-height: 42px; padding: 0 16px; background: #fff; border: 1px solid #e4ddf3; border-radius: 999px; font-size: 14px; line-height: 1.3; color: #250651; overflow: hidden; }
.dc-app .dc-cs-prodx-miss__input-tx:empty::before { content: "Message Lumera"; color: #b6b0c4; }
.dc-app .dc-cs-prodx-miss__caret { flex: 0 0 auto; width: 2px; height: 18px; background: #5612BD; margin-left: 1px; animation: dcMissCaret 1.05s steps(1) infinite; }
@keyframes dcMissCaret { 0%,50% { opacity: 1; } 51%,100% { opacity: 0; } }
.dc-app .dc-cs-prodx-miss__send { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: #5612BD; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; }
/* skin-type quiz + concern icons */
.dc-app .dc-cs-prodx-miss__quiz { border: 1px solid #ece3fa; border-radius: 16px; padding: 16px; background: #fff; }
.dc-app .dc-cs-prodx-miss__quiz-row { display: flex; gap: 8px; }
.dc-app .dc-cs-prodx-miss__quiz-chip { flex: 1; text-align: center; padding: 10px; border-radius: 12px; border: 1px solid #e1d5f7; font-weight: 700; font-size: 14px; color: #5612BD; }
.dc-app .dc-cs-prodx-miss__quiz-chip.is-on { background: #5612BD; color: #fff; border-color: #5612BD; }
.dc-app .dc-cs-prodx-miss__quiz-concerns { display: flex; gap: 8px; margin-top: 12px; }
.dc-app .dc-cs-prodx-miss__concern { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border-radius: 12px; border: 1px solid #f0ecf8; font-size: 12px; font-weight: 700; color: #6a6577; }
.dc-app .dc-cs-prodx-miss__concern.is-on { border-color: #5612BD; background: #f6f1fd; color: #250651; }
/* sensitivity & Rx check */
.dc-app .dc-cs-prodx-miss__rx { display: flex; gap: 12px; align-items: flex-start; align-self: flex-start; max-width: 94%; background: linear-gradient(135deg, #2a0a5e, #4a1aa0); color: #fff; border-radius: 16px; padding: 16px; }
.dc-app .dc-cs-prodx-miss__rx-badge { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,.14); color: #85ECFF; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.dc-app .dc-cs-prodx-miss__rx-h { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #85ECFF; margin-bottom: 6px; }
.dc-app .dc-cs-prodx-miss__rx-p { margin: 0; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.92); }
/* product cards */
.dc-app .dc-cs-prodx-miss__prods { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dc-app .dc-cs-prodx-miss__prod { border: 1px solid #ece3fa; border-radius: 16px; overflow: hidden; background: #fff; }
.dc-app .dc-cs-prodx-miss__prod-media { aspect-ratio: 16/10; overflow: hidden; }
.dc-app .dc-cs-prodx-miss__prod-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dc-app .dc-cs-prodx-miss__prod-body { padding: 14px; }
.dc-app .dc-cs-prodx-miss__prod-top { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.dc-app .dc-cs-prodx-miss__prod-title { font-weight: 800; font-size: 14px; color: #100D0C; }
.dc-app .dc-cs-prodx-miss__prod-rate { flex: 0 0 auto; font-size: 12px; font-weight: 800; color: #250651; background: #f0e9fb; border-radius: 999px; padding: 3px 9px; }
.dc-app .dc-cs-prodx-miss__prod-desc { margin: 8px 0 0; font-size: 13px; line-height: 1.45; color: #6a6577; }
.dc-app .dc-cs-prodx-miss__prod-ctas { display: flex; gap: 7px; margin-top: 12px; flex-wrap: wrap; }
.dc-app .dc-cs-prodx-miss__prod-cta { font-size: 12px; font-weight: 700; padding: 8px 12px; border-radius: 999px; border: 1px solid #d7bdff; color: #5612BD; }
.dc-app .dc-cs-prodx-miss__prod-cta--p { background: #85ECFF; border-color: #85ECFF; color: #250651; }
/* AM / PM routine */
.dc-app .dc-cs-prodx-miss__routine { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dc-app .dc-cs-prodx-miss__routine-col { border: 1px solid #ece3fa; border-radius: 16px; padding: 14px 16px; background: #faf8ff; }
.dc-app .dc-cs-prodx-miss__routine-hd { font-weight: 800; font-size: 14px; color: #5612BD; margin-bottom: 8px; }
.dc-app .dc-cs-prodx-miss__routine-col ol { margin: 0; padding-left: 18px; }
.dc-app .dc-cs-prodx-miss__routine-col li { font-size: 13px; line-height: 1.6; color: #3a3450; }
/* ingredients & allergens */
.dc-app .dc-cs-prodx-miss__ing { border: 1px solid #ece3fa; border-radius: 16px; overflow: hidden; }
.dc-app .dc-cs-prodx-miss__ing-hd { background: #f6f1fd; padding: 12px 16px; font-weight: 800; font-size: 13px; color: #250651; }
.dc-app .dc-cs-prodx-miss__ing-row { display: grid; grid-template-columns: 1.1fr 1fr auto; gap: 10px; align-items: center; padding: 11px 16px; border-top: 1px solid #f1ecfa; font-size: 13px; color: #3a3450; }
.dc-app .dc-cs-prodx-miss__ing-row span:first-child { font-weight: 700; color: #100D0C; }
.dc-app .dc-cs-prodx-miss__ing-ok { font-size: 11px; font-weight: 700; color: #1a7f5a; background: #e6f6ee; border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.dc-app .dc-cs-prodx-miss__ing-warn { font-size: 11px; font-weight: 700; color: #9a5a00; background: #fdf0db; border-radius: 999px; padding: 4px 10px; white-space: nowrap; }

/* toggle */
.dc-app .dc-cs-prodx-miss__switch { padding: 0 24px 24px; }
.dc-app .dc-cs-prodx-miss__btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; cursor: pointer; background: #85ECFF; color: #250651; border: 0; border-radius: 14px; padding: 16px 24px; font-size: 15px; font-weight: 700; box-shadow: 0 16px 36px -18px rgba(8,52,66,.5); transition: transform .2s ease; }
.dc-app .dc-cs-prodx-miss__btn:hover { transform: translateY(-1px); }
.dc-app .dc-cs-prodx-miss__card.is-brand .dc-cs-prodx-miss__btn { background: #5612BD; color: #fff; }
.dc-app .dc-cs-prodx-miss__btn-arr { font-weight: 800; }

@media (max-width: 680px) {
  .dc-app .dc-cs-prodx-miss__prods,
  .dc-app .dc-cs-prodx-miss__routine { grid-template-columns: 1fr; }
  .dc-app .dc-cs-prodx-miss__prompt { flex-direction: column; align-items: flex-start; gap: 8px; }
  .dc-app .dc-cs-prodx-miss__ing-row { grid-template-columns: 1fr auto; }
  .dc-app .dc-cs-prodx-miss__ing-row span:nth-child(2) { display: none; }
}

/* Mobile: swap the MacBook for a PORTRAIT PHONE frame (same chat inside). */
@media (max-width: 700px) {
  .dc-app .dc-cs-prodx-miss__laptop { max-width: min(300px, 80vw); }
  .dc-app .dc-cs-prodx-miss__screen { background: #3a3b42; border-radius: 42px; padding: 5px; box-shadow: 0 36px 76px -42px rgba(16,13,12,.5); }
  .dc-app .dc-cs-prodx-miss__screen::after { display: none; }                 /* laptop camera off */
  .dc-app .dc-cs-prodx-miss__viewport { border: 0; border-radius: 38px; aspect-ratio: auto; height: 74vh; min-height: 520px; max-height: 660px; }
  .dc-app .dc-cs-prodx-miss__deck { display: none; }                          /* no laptop base */
  /* top bar reads as a phone status/app bar: hide window dots, centre the tab */
  .dc-app .dc-cs-prodx-miss__bar { height: 38px; justify-content: center; border-radius: 30px 30px 0 0; }
  .dc-app .dc-cs-prodx-miss__dot { display: none; }
  .dc-app .dc-cs-prodx-miss__bar-tab { margin-left: 0; }
  .dc-app .dc-cs-prodx-miss__scroll { padding: 16px; }
}

/* Closing (light) */
.dc-app .dc-cs-prodx-after { background: #FBF8FF; padding: clamp(96px, 15vh, 190px) 0; text-align: center; }
.dc-app .dc-cs-prodx-after__inner { max-width: 760px; margin: 0 auto; }
.dc-app .dc-cs-prodx-after__eyebrow { font-size: 13px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: #5612BD; margin: 0 0 18px; }
.dc-app .dc-cs-prodx-after__h { font-weight: 800; font-size: clamp(30px, 4.4vw, 58px); letter-spacing: -0.025em; line-height: 1.06; color: #100D0C; margin: 0; }
.dc-app .dc-cs-prodx-after__p { max-width: 620px; margin: 26px auto 36px; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.6; color: #4a4458; }
.dc-app .dc-cs-prodx-after__cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ════════ Lower sections (no phone) ════════ */
.dc-app .dc-cs-prodx-eyebrow { font-size: 13px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: #5612BD; margin: 0 0 14px; }
.dc-app .dc-cs-prodx-h2 { font-weight: 800; letter-spacing: -0.025em; line-height: 1.07; font-size: clamp(28px, 3.8vw, 52px); color: #100D0C; margin: 0; }
.dc-app .dc-cs-prodx-lead { margin: 20px 0 0; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.6; color: #4a4458; max-width: 560px; }

/* How hard — 2 weeks + bar race */
.dc-app .dc-cs-prodx-hard { background: #FBF8FF; padding: clamp(72px, 11vh, 140px) 0; }
.dc-app .dc-cs-prodx-hard__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(36px, 5vw, 80px); align-items: center; }
.dc-app .dc-cs-prodx-race { margin-top: 34px; display: flex; flex-direction: column; gap: 18px; }
.dc-app .dc-cs-prodx-race__lab { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-bottom: 8px; }
.dc-app .dc-cs-prodx-race__lab b { font-weight: 800; font-size: 15px; color: #250651; }
.dc-app .dc-cs-prodx-race__lab span { font-weight: 600; font-size: 12.5px; color: #9a93ab; }
.dc-app .dc-cs-prodx-race__lab--brand b { color: #5612BD; }
.dc-app .dc-cs-prodx-race__lab--brand { color: #5612BD; }
.dc-app .dc-cs-prodx-race__track { height: 22px; border-radius: 999px; background: #ece6f6; overflow: hidden; }
.dc-app .dc-cs-prodx-race__fill { display: block; height: 100%; width: 0; border-radius: 999px; transition: width var(--dur) cubic-bezier(.2,.7,.2,1); }
.dc-app .dc-cs-prodx-race__fill--diy { background: linear-gradient(90deg, #c9bfe0, #ab9ed0); transition-timing-function: linear; }
.dc-app .dc-cs-prodx-race__fill--brand { background: linear-gradient(90deg, #67E1F7, #5612BD); }
.dc-app .reveal.in .dc-cs-prodx-race__fill { width: var(--w); }
.dc-app .dc-cs-prodx-hard__shot-frame { border-radius: 18px; overflow: hidden; border: 1px solid #e7e1f2; box-shadow: 0 40px 90px -50px rgba(86,18,189,.5); background: linear-gradient(135deg, #f6f2fd, #e9f6fb); min-height: 280px; display: flex; align-items: center; justify-content: center; }
.dc-app .dc-cs-prodx-hard__shot-frame img { width: 100%; height: auto; display: block; }
.dc-app .dc-cs-prodx-hard__shot-ph { color: #9a93ab; font-weight: 700; font-size: 14px; text-align: center; padding: 24px; }
.dc-app .dc-cs-prodx-hard__shot-cap { margin: 14px 0 0; font-size: 13px; color: #9a93ab; }

/* Vertical revolving ticker on a curved arc — the column scrolls up while
   the section is pinned, then settles on "Your Brand". Cards arc out toward
   the headline (JS sets per-card translateX). Clean white cards. */
.dc-app .dc-cs-prodx-tick { position: relative; min-height: 175vh; background: #0E0125; }
.dc-app .dc-cs-prodx-tick__sticky { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; overflow: hidden; }
.dc-app .dc-cs-prodx-tick__vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; z-index: 0; }
.dc-app .dc-cs-prodx-tick__veil { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(130% 100% at 35% 35%, rgba(14,1,37,0) 28%, rgba(14,1,37,.78) 84%); }
.dc-app .dc-cs-prodx-tick__grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 80px); align-items: center; width: 100%; }
/* dark-section text: eyebrow + headline + body to light, grad word to cyan */
.dc-app .dc-cs-prodx-tick .dc-cs-prodx-eyebrow { color: #9DE5FF; }
.dc-app .dc-cs-prodx-tick .dc-cs-prodx-h2 { color: #fff; }
.dc-app .dc-cs-prodx-tick .dc-cs-prodx-lead { color: rgba(255,255,255,.78); }
.dc-app .dc-cs-prodx-tick .dc-grad-word { background: linear-gradient(115deg, #5AEBFD, #85ECFF 50%, #93F0FB); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.dc-app .dc-cs-prodx-tick__rail { position: relative; height: clamp(460px, 70vh, 640px); overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%); }
.dc-app .dc-cs-prodx-tick__col { display: flex; flex-direction: column; align-items: flex-end; gap: 26px; will-change: transform; padding: 8px 0; }
/* no container — clean rotating text, right-aligned so the leftward arc never clips */
.dc-app .dc-cs-prodx-tick__card { position: relative; flex: 0 0 auto; align-self: flex-end; text-align: right; white-space: nowrap; will-change: transform; font-weight: 800; letter-spacing: -0.025em; font-size: clamp(26px, 3.2vw, 46px); line-height: 1.1; color: rgba(255,255,255,.42); transition: color .45s ease; }
.dc-app .dc-cs-prodx-tick__card--you.is-on {
  background: linear-gradient(115deg, #5AEBFD, #85ECFF 45%, #93F0FB);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 0 10px rgba(90,235,253,.6));
}

/* Is this real — stats */
.dc-app .dc-cs-prodx-real { background: #fff; padding: clamp(72px, 11vh, 140px) 0; }
.dc-app .dc-cs-prodx-real__head { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.dc-app .dc-cs-prodx-real__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 56px); }
.dc-app .dc-cs-prodx-real__stat { text-align: center; }
.dc-app .dc-cs-prodx-real__num { font-weight: 800; letter-spacing: -0.03em; font-size: clamp(46px, 7vw, 92px); line-height: 1; background: linear-gradient(120deg, #67E1F7, #5612BD 60%, #9250F2); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dc-app .dc-cs-prodx-real__lab { margin: 16px auto 0; max-width: 290px; font-size: 15px; line-height: 1.5; color: #4a4458; }
.dc-app .dc-cs-prodx-real__slide { display: flex; align-items: center; gap: 16px; justify-content: center; margin: 60px auto 0; max-width: 560px; }
.dc-app .dc-cs-prodx-real__slide-end { font-weight: 800; font-size: 14px; color: #9a93ab; white-space: nowrap; }
.dc-app .dc-cs-prodx-real__slide-end--on { color: #5612BD; }
.dc-app .dc-cs-prodx-real__slide-track { position: relative; flex: 1; height: 4px; border-radius: 999px; background: linear-gradient(90deg, #e1d5f7, #85ECFF); }
.dc-app .dc-cs-prodx-real__slide-dot { position: absolute; top: 50%; left: 0; width: 18px; height: 18px; border-radius: 50%; background: #5612BD; box-shadow: 0 0 0 5px rgba(86,18,189,.18); transform: translateY(-50%); transition: left 1.5s cubic-bezier(.2,.7,.2,1); }
.dc-app .reveal.in .dc-cs-prodx-real__slide-dot { left: calc(100% - 18px); }

/* More than a chat — constellation */
.dc-app .dc-cs-prodx-net { background: #FBF8FF; padding: clamp(72px, 11vh, 140px) 0; }
.dc-app .dc-cs-prodx-net__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 80px); align-items: center; }
.dc-app .dc-cs-prodx-net__stage { position: relative; width: 100%; max-width: 540px; margin: 0 auto; aspect-ratio: 1; }
.dc-app .dc-cs-prodx-net__links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dc-app .dc-cs-prodx-net__link { stroke: #c3a9ee; stroke-width: .45; stroke-dasharray: 140; stroke-dashoffset: 140; transition: stroke-dashoffset .8s ease; transition-delay: var(--d); }
.dc-app .reveal.in .dc-cs-prodx-net__link { stroke-dashoffset: 0; }
.dc-app .dc-cs-prodx-net__core { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 3; width: 104px; height: 104px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: linear-gradient(135deg, #5612BD, #9250F2); color: #fff; font-weight: 800; font-size: 13px; box-shadow: 0 18px 46px -14px rgba(86,18,189,.7); }
/* Content Enrichment Engine ring — the inputs feed the Engine, which holds the Storefront ([u]) */
.dc-app .dc-cs-prodx-net__enginering { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 2; width: 47%; height: 47%; border-radius: 50%; border: 2px dashed rgba(146,80,242,.55); background: radial-gradient(circle, rgba(146,80,242,.10), rgba(146,80,242,0) 70%); }
.dc-app .dc-cs-prodx-net__enginelbl { position: absolute; left: 50%; top: -11px; transform: translateX(-50%); white-space: nowrap; background: #fff; border: 1px solid #e3d6fb; border-radius: 999px; padding: 4px 11px; font-size: 11px; font-weight: 800; letter-spacing: .02em; color: #5612BD; box-shadow: 0 8px 22px -12px rgba(86,18,189,.4); }
/* icon source nodes — the node IS the round badge; label sits outside it */
.dc-app .dc-cs-prodx-net__inode { position: absolute; transform: translate(-50%,-50%); z-index: 2; width: 82px; height: 82px; border-radius: 50%; background: #fff; border: 1px solid #ece3fa; box-shadow: 0 20px 44px -22px rgba(86,18,189,.55); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .5s ease; transition-delay: var(--d); }
.dc-app .reveal.in .dc-cs-prodx-net__inode { opacity: 1; }
.dc-app .dc-cs-prodx-net__inode svg { width: 48px; height: 48px; }
.dc-app .dc-cs-prodx-net__lbl { position: absolute; font-size: 14.5px; font-weight: 800; line-height: 1.2; color: #250651; white-space: nowrap; }
.dc-app .dc-cs-prodx-net__inode--lt .dc-cs-prodx-net__lbl { bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%); text-align: center; }
.dc-app .dc-cs-prodx-net__inode--lb .dc-cs-prodx-net__lbl { top: calc(100% + 9px); left: 50%; transform: translateX(-50%); text-align: center; white-space: normal; width: 130px; }
.dc-app .dc-cs-prodx-net__inode--lr .dc-cs-prodx-net__lbl { left: calc(100% + 13px); top: 50%; transform: translateY(-50%); text-align: left; }
.dc-app .dc-cs-prodx-net__inode--ll .dc-cs-prodx-net__lbl { right: calc(100% + 13px); top: 50%; transform: translateY(-50%); text-align: right; }
/* sparkles + dots filling the web */
.dc-app .dc-cs-prodx-net__spark { position: absolute; transform: translate(-50%,-50%); z-index: 2; opacity: 0; transition: opacity .5s ease; transition-delay: var(--d); }
.dc-app .reveal.in .dc-cs-prodx-net__spark { opacity: .9; }
.dc-app .dc-cs-prodx-net__dot2 { position: absolute; transform: translate(-50%,-50%); z-index: 1; width: 10px; height: 10px; border-radius: 50%; background: #67E1F7; box-shadow: 0 0 0 4px rgba(103,225,247,.18); opacity: 0; transition: opacity .5s ease; transition-delay: var(--d); }
.dc-app .reveal.in .dc-cs-prodx-net__dot2 { opacity: 1; }

/* Control & safe — checklist */
.dc-app .dc-cs-prodx-safe { background: #fff; padding: clamp(72px, 11vh, 140px) 0; }
.dc-app .dc-cs-prodx-safe__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(36px, 5vw, 80px); align-items: center; }
.dc-app .dc-cs-prodx-safe__shield { margin-top: 28px; width: 64px; height: 64px; border-radius: 18px; background: #f0e9fb; display: flex; align-items: center; justify-content: center; }
.dc-app .dc-cs-prodx-safe__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.dc-app .dc-cs-prodx-safe__item { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; border: 1px solid #ece3fa; border-radius: 14px; background: #FBF8FF; font-size: 15.5px; line-height: 1.45; font-weight: 600; color: #250651; opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; transition-delay: var(--d); }
.dc-app .reveal.in .dc-cs-prodx-safe__item { opacity: 1; transform: none; }
.dc-app .dc-cs-prodx-safe__tick { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: #5612BD; display: flex; align-items: center; justify-content: center; transform: scale(.4); opacity: 0; transition: transform .45s cubic-bezier(.3,1.5,.5,1), opacity .45s ease; transition-delay: var(--d); }
.dc-app .reveal.in .dc-cs-prodx-safe__tick { transform: scale(1); opacity: 1; }

/* Will they find me — trio */
.dc-app .dc-cs-prodx-find { background: #FBF8FF; padding: clamp(72px, 11vh, 140px) 0; }
.dc-app .dc-cs-prodx-find__inner { max-width: 740px; margin: 0 auto; text-align: center; }
.dc-app .dc-cs-prodx-find__inner .dc-cs-prodx-lead { margin-left: auto; margin-right: auto; }
.dc-app .dc-cs-prodx-find__trio { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin: 34px 0 30px; }
.dc-app .dc-cs-prodx-find__chip { display: flex; flex-direction: column; gap: 4px; align-items: center; min-width: 160px; padding: 18px 22px; border-radius: 16px; background: #fff; border: 1px solid #e7e1f2; font-weight: 800; font-size: 20px; color: #5612BD; box-shadow: 0 18px 40px -28px rgba(86,18,189,.5); }
.dc-app .dc-cs-prodx-find__chip span { font-weight: 600; font-size: 12px; letter-spacing: .03em; color: #9a93ab; }
.dc-app .dc-cs-prodx-find__link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; color: #5612BD; }

/* Go deeper */
.dc-app .dc-cs-prodx-deeper { background: #fff; padding: clamp(60px, 9vh, 110px) 0 clamp(40px, 6vh, 70px); }
.dc-app .dc-cs-prodx-deeper__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 900px; margin: 0 auto; }
.dc-app .dc-cs-prodx-deeper__card { display: block; padding: 34px; border-radius: 22px; border: 1px solid #ece3fa; background: #FBF8FF; transition: transform .25s ease, box-shadow .25s ease; }
.dc-app .dc-cs-prodx-deeper__card:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -36px rgba(86,18,189,.5); }
.dc-app .dc-cs-prodx-deeper__k { font-weight: 800; font-size: 24px; color: #100D0C; margin: 0; }
.dc-app .dc-cs-prodx-deeper__d { margin: 12px 0 18px; font-size: 15.5px; line-height: 1.55; color: #4a4458; }
.dc-app .dc-cs-prodx-deeper__go { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; color: #5612BD; }
.dc-app .dc-cs-prodx-deeper__next { text-align: center; margin-top: 30px; }

/* Final CTA */
.dc-app .dc-cs-prodx-final { position: relative; overflow: hidden; background: #0E0125; padding: clamp(90px, 16vh, 200px) 0; text-align: center; }
.dc-app .dc-cs-prodx-final__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dc-app .dc-cs-prodx-final__blur { position: absolute; }
.dc-app .dc-cs-prodx-final__blur--a { top: -12%; left: 2%; }
.dc-app .dc-cs-prodx-final__blur--b { bottom: -16%; right: -2%; }
.dc-app .dc-cs-prodx-final__inner { position: relative; z-index: 2; max-width: 860px; margin: 0 auto; }
.dc-app .dc-cs-prodx-final__h { font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; font-size: clamp(34px, 5.2vw, 72px); color: #fff; margin: 0 0 36px; }
.dc-app .dc-cs-prodx-final__cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 860px) {
  .dc-app .dc-cs-prodx-hard__grid,
  .dc-app .dc-cs-prodx-tick__grid,
  .dc-app .dc-cs-prodx-net__grid,
  .dc-app .dc-cs-prodx-safe__grid { grid-template-columns: 1fr; }
  .dc-app .dc-cs-prodx-real__stats { grid-template-columns: 1fr; gap: 40px; }
  .dc-app .dc-cs-prodx-deeper__grid { grid-template-columns: 1fr; }
  .dc-app .dc-cs-prodx-net__stage { max-width: 340px; }
  .dc-app .dc-cs-prodx-net__inode { width: 60px; height: 60px; }
  .dc-app .dc-cs-prodx-net__inode svg { width: 34px; height: 34px; }
  .dc-app .dc-cs-prodx-net__lbl { font-size: 11px; }
  .dc-app .dc-cs-prodx-net__inode--lb .dc-cs-prodx-net__lbl { width: 100px; }
  /* Stack ALL constellation labels vertically + centered on mobile so the
     side labels never clip the viewport edges (was horizontal lr/ll). */
  .dc-app .dc-cs-prodx-net__inode--vup .dc-cs-prodx-net__lbl {
    left: 50%; right: auto; top: auto; bottom: calc(100% + 7px);
    transform: translateX(-50%); text-align: center;
    white-space: normal; width: 92px;
  }
  .dc-app .dc-cs-prodx-net__inode--vdn .dc-cs-prodx-net__lbl {
    left: 50%; right: auto; bottom: auto; top: calc(100% + 7px);
    transform: translateX(-50%); text-align: center;
    white-space: normal; width: 92px;
  }
  .dc-app .dc-cs-prodx-net__core { width: 76px; height: 76px; font-size: 10.5px; }
  /* ticker on mobile: copy on top, shorter rail, still pins on Your Brand.
     CENTER-ALIGNED vertical scroll (no right-side curved arc). */
  .dc-app .dc-cs-prodx-tick { min-height: 150vh; }
  .dc-app .dc-cs-prodx-tick__grid { gap: 20px; }
  .dc-app .dc-cs-prodx-tick__copy { text-align: center; }
  .dc-app .dc-cs-prodx-tick__rail { height: 48vh; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%); }
  .dc-app .dc-cs-prodx-tick__col { align-items: center; gap: 22px; }
  .dc-app .dc-cs-prodx-tick__card { align-self: center; text-align: center; white-space: normal; transform: none; font-size: clamp(24px, 6.4vw, 32px); }
}

/* ─── Static fallback (≤900px / reduced motion): no hero phone; chat
   shows once; cards become a horizontal scroll row ─── */
.dc-app .dc-cs-prodx-scene.is-static { height: auto; }
.dc-app .dc-cs-prodx-scene.is-static .dc-cs-prodx-scene__sticky { position: static; height: auto; padding: calc(var(--dc-nav-h) + 40px) 0 64px; }
.dc-app .dc-cs-prodx-scene.is-static .dc-cs-prodx-scene__hero { position: static; transform: none; width: auto; max-width: 620px; margin: 0 20px; opacity: 1; }
.dc-app .dc-cs-prodx-scene.is-static .dc-cs-prodx-scene__cue { display: none; }
.dc-app .dc-cs-prodx-scene.is-static .dc-cs-prodx-scene__phone { position: static; transform: none; margin: 40px auto 0; display: flex; justify-content: center; }
.dc-app .dc-cs-prodx-scene.is-static .dc-cs-prodx-scene__breathe { animation: none; }
.dc-app .dc-cs-prodx-scene.is-static .dc-cs-prodx-scene__leadtext { position: static; transform: none; opacity: 1; margin: 44px auto 14px; }
.dc-app .dc-cs-prodx-scene.is-static .dc-cs-prodx-scene__ring { position: static; inset: auto; display: flex; gap: 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 8px 20px 18px; scroll-snap-type: x mandatory; }
.dc-app .dc-cs-prodx-scene.is-static .dc-cs-prodx-xcard { position: static; transform: none !important; opacity: 1 !important; flex: 0 0 auto; scroll-snap-align: start; }
.dc-app .dc-cs-prodx-scene.is-static .dc-cs-prodx-scene__detail { position: static; transform: none; width: auto; max-width: 560px; margin: 24px 20px 0; opacity: 1; }
.dc-app .dc-cs-prodx-scene.is-static .dc-cs-prodx-scene__collagehd { position: static; width: auto; max-width: 620px; margin: 56px 20px 4px; opacity: 1; }
/* Reduced-motion mobile: same question row instead of the product cards. */
.dc-app .dc-cs-prodx-scene.is-static .dc-cs-prodx-scene__ring { display: none; }
.dc-app .dc-cs-prodx-scene.is-static .dc-cs-prodx-scene__qrow { display: flex; gap: 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 22px 20px 10px; scroll-snap-type: x mandatory; }
.dc-app .dc-cs-prodx-scene.is-static .dc-cs-prodx-scene__mlede { display: flex; flex-direction: column; gap: 8px; text-align: center; max-width: 460px; margin: 96px auto 8px; padding: 0 28px; }

@media (max-width: 900px) {
  /* Safety net: never let any animated/transformed element push the page
     wider than the viewport on mobile. overflow-x:clip keeps the y-axis
     visible, so the pinned scene/ticker still stick correctly. */
  .dc-app.dc-cs-prodx { overflow-x: clip; }
  .dc-app .dc-cs-prodx-scene__h { font-size: clamp(28px, 8vw, 40px); }
  .dc-app .dc-cs-prodx-phone { width: min(300px, 80vw); }
}

/* Static fallback (mobile): DARK hero that fades to a LIGHT lower
   section as you scroll. Cards/lead/detail read on the light surface. */
.dc-app .dc-cs-prodx-scene.is-static .dc-cs-prodx-scene__sticky { background: #FBF8FF; padding-top: 0; }
.dc-app .dc-cs-prodx-scene.is-static .dc-cs-prodx-scene__vid,
.dc-app .dc-cs-prodx-scene.is-static .dc-cs-prodx-scene__veil,
.dc-app .dc-cs-prodx-scene.is-static .dc-cs-prodx-scene__light { display: none; }
.dc-app .dc-cs-prodx-scene.is-static .dc-cs-prodx-scene__hero {
  background: #0E0125;
  color: #fff; width: auto; max-width: none; margin: 0;
  padding: calc(var(--dc-nav-h) + 44px) 24px 64px;
}
.dc-app .dc-cs-prodx-scene.is-static .dc-cs-prodx-scene__lead { color: rgba(215,189,255,.92); }
.dc-app .dc-cs-prodx-scene.is-static .dc-cs-prodx-scene__h { color: #fff; }
.dc-app .dc-cs-prodx-scene.is-static .dc-cs-prodx-scene__cy { color: #85ECFF; }
.dc-app .dc-cs-prodx-scene.is-static .dc-cs-prodx-scene__value { color: rgba(255,255,255,.82); }

/* ══ Mobile (≤900px, motion ok): is-mplay — linear, visual-first auto-play.
   Hero (dark) → collage header + swipe card row → a fixed phone whose chat
   auto-scrolls through the beats, with the active phase-word + caption +
   chips beneath it (only the active phase's column/chips shown). ══ */
.dc-app .dc-cs-prodx-scene.is-mplay { height: auto; }
.dc-app .dc-cs-prodx-scene.is-mplay .dc-cs-prodx-scene__sticky { position: static; height: auto; display: flex; flex-direction: column; overflow: visible; background: #FBF8FF; padding: 0 0 56px; }
.dc-app .dc-cs-prodx-scene.is-mplay .dc-cs-prodx-scene__vid,
.dc-app .dc-cs-prodx-scene.is-mplay .dc-cs-prodx-scene__veil,
.dc-app .dc-cs-prodx-scene.is-mplay .dc-cs-prodx-scene__light { display: none; }
/* hero — dark intro */
.dc-app .dc-cs-prodx-scene.is-mplay .dc-cs-prodx-scene__hero { order: 0; position: static; transform: none; width: auto; max-width: none; opacity: 1; background: #0E0125; color: #fff; padding: calc(var(--dc-nav-h) + 48px) 24px 72px; }
.dc-app .dc-cs-prodx-scene.is-mplay .dc-cs-prodx-scene__lead { color: rgba(215,189,255,.92); }
.dc-app .dc-cs-prodx-scene.is-mplay .dc-cs-prodx-scene__h { color: #fff; font-size: clamp(28px, 8vw, 40px); }
.dc-app .dc-cs-prodx-scene.is-mplay .dc-cs-prodx-scene__cy { color: #85ECFF; }
.dc-app .dc-cs-prodx-scene.is-mplay .dc-cs-prodx-scene__value { color: rgba(255,255,255,.82); }
.dc-app .dc-cs-prodx-scene.is-mplay .dc-cs-prodx-scene__cue { display: none; }
/* collage — thesis header + swipeable QUESTION row (not the product cards) */
.dc-app .dc-cs-prodx-scene.is-mplay .dc-cs-prodx-scene__collagehd { order: 1; position: static; transform: none; width: auto; max-width: none; opacity: 1; margin: 64px 0 0; padding: 0 24px; }
.dc-app .dc-cs-prodx-scene.is-mplay .dc-cs-prodx-scene__ring { display: none; }
.dc-app .dc-cs-prodx-scene.is-mplay .dc-cs-prodx-scene__qrow { order: 2; display: flex; position: static; inset: auto; gap: 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 22px 24px 10px; scroll-snap-type: x mandatory; }
/* mobile lede — names the experience, sits right above the phone */
.dc-app .dc-cs-prodx-scene.is-mplay .dc-cs-prodx-scene__mlede { order: 3; display: flex; flex-direction: column; gap: 8px; text-align: center; max-width: 460px; margin: 120px auto 0; padding: 0 28px; }
/* journey phone — fixed, chat auto-scrolled by the controller */
.dc-app .dc-cs-prodx-scene.is-mplay .dc-cs-prodx-scene__phone { order: 4; position: relative; left: auto; top: auto; transform: none; margin: 48px auto 0; }
.dc-app .dc-cs-prodx-scene.is-mplay .dc-cs-prodx-scene__breathe { animation: none; }
.dc-app .dc-cs-prodx-scene.is-mplay .dc-cs-prodx-scr { scroll-behavior: smooth; }
/* caption — only the active phase's column, only its active block */
.dc-app .dc-cs-prodx-scene.is-mplay .dc-cs-prodx-scene__jrn { order: 5; position: static; transform: none; width: auto; max-width: 560px; margin: 60px auto 0; padding: 0 24px; opacity: 1; text-align: center; display: none; }
.dc-app .dc-cs-prodx-scene.is-mplay .dc-cs-prodx-scene__jrn.is-on { display: block; }
.dc-app .dc-cs-prodx-scene.is-mplay .dc-cs-prodx-scene__jrn-kicker { display: none; }
.dc-app .dc-cs-prodx-scene.is-mplay .dc-cs-prodx-scene__jrn-blocks { position: static; min-height: 0; }
.dc-app .dc-cs-prodx-scene.is-mplay .dc-cs-prodx-scene__jrn-block { position: static; opacity: 1; transform: none; display: none; }
.dc-app .dc-cs-prodx-scene.is-mplay .dc-cs-prodx-scene__jrn-block.is-active { display: block; }
.dc-app .dc-cs-prodx-scene.is-mplay .dc-cs-prodx-scene__jrn-word { font-size: clamp(26px, 7vw, 34px); }
.dc-app .dc-cs-prodx-scene.is-mplay .dc-cs-prodx-scene__jrn-cap { margin: 10px auto 0; }
/* chips — removed on mobile (they sit around the phone on desktop only) */
.dc-app .dc-cs-prodx-scene.is-mplay .dc-cs-prodx-scene__chips { display: none; }


.dc-app .dc-cs-jrn-carousel { display: flex; gap: 8px; overflow: hidden; margin-bottom: 9px; }
.dc-app .dc-cs-jrn-ccard { flex: 0 0 44%; border: 1px solid #e9e3f5; border-radius: 13px; overflow: hidden; font-size: 11px; font-weight: 700; color: #100D0C; }
.dc-app .dc-cs-jrn-ccard img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.dc-app .dc-cs-jrn-ccard span { display: block; padding: 7px 9px; }
.dc-app .dc-cs-jrn-swap { position: relative; }
.dc-app .dc-cs-jrn-swap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dc-app .dc-cs-jrn-swap__b { position: absolute; inset: 0; opacity: 0; }
.dc-app .dc-cs-jrn-b.is-shown .dc-cs-jrn-swap__b { animation: dcJrnSwap 3.4s ease-in-out 0.5s infinite; }
@keyframes dcJrnSwap { 0%,40% { opacity: 0; } 55%,90% { opacity: 1; } 100% { opacity: 0; } }
.dc-app .dc-cs-jrn-buy { display: flex; flex-direction: column; gap: 7px; }
.dc-app .dc-cs-jrn-buyopt { display: flex; align-items: flex-start; gap: 9px; padding: 10px 12px; border-radius: 14px; border: 1px solid #e9e3f5; background: #fff; }
.dc-app .dc-cs-jrn-buyopt--p { border-color: #85ECFF; background: #f1fcff; }
.dc-app .dc-cs-jrn-buyopt__ic { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: #f1ebfb; }
.dc-app .dc-cs-jrn-buyopt--p .dc-cs-jrn-buyopt__ic { background: #85ECFF; }
.dc-app .dc-cs-jrn-buyopt__tx { display: flex; flex-direction: column; gap: 2px; }
.dc-app .dc-cs-jrn-buyopt__t { font-size: 13px; font-weight: 800; color: #100D0C; line-height: 1.2; }
.dc-app .dc-cs-jrn-buyopt__d { font-size: 11px; font-weight: 600; color: #6a6577; line-height: 1.35; }



/* Mobile: show the full transcript (no internal scroll) */
.dc-app .dc-cs-prodx-scene.is-static .dc-cs-prodx-phone { width: min(320px, 84vw); aspect-ratio: auto; height: auto; }
.dc-app .dc-cs-prodx-scene.is-static .dc-cs-prodx-scr { position: static; height: auto; }
.dc-app .dc-cs-prodx-scene.is-static .dc-cs-prodx-phone__screen { height: auto; }


/* ── Journey copy v2 — two columns (left=consideration, right=purchase),
   per-beat BLOCKS (word + caption together, proper spacing). Shown via
   .is-on (set by the controller during the matching segment). ── */
.dc-app .dc-cs-prodx-scene__jrn {
  position: absolute; top: calc(50% + var(--dc-nav-h) / 2); transform: translateY(-50%);
  z-index: 6; width: min(430px, 40vw); text-align: left;
  opacity: 0; transition: opacity .55s ease; pointer-events: none;
}
.dc-app .dc-cs-prodx-scene__jrn.is-on { opacity: 1; }
.dc-app .dc-cs-prodx-scene__jrn--left  { left: clamp(24px, 6vw, 110px); }
.dc-app .dc-cs-prodx-scene__jrn--right { right: clamp(24px, 6vw, 110px); text-align: left; }
.dc-app .dc-cs-prodx-scene__jrn-kicker { margin: 0 0 18px; font-size: 13px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: #5612BD; }
.dc-app .dc-cs-prodx-scene__jrn-blocks { position: relative; min-height: clamp(220px, 30vh, 290px); }
.dc-app .dc-cs-prodx-scene__jrn-block { position: absolute; left: 0; top: 0; width: 100%; opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; pointer-events: none; }
.dc-app .dc-cs-prodx-scene__jrn-block.is-active { opacity: 1; transform: none; }
.dc-app .dc-cs-prodx-scene__jrn-word { font-weight: 800; letter-spacing: -0.03em; line-height: 1.04; font-size: clamp(32px, 4vw, 58px); color: #100D0C; }
.dc-app .dc-cs-prodx-scene__jrn-cap { margin: 18px 0 0; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.6; color: #4a4458; max-width: 410px; }

/* ── Collage chips: up to two pills fanned at the phone's copy-side edge.
   JS sets each layer's left/top per frame; .is-on fades the layer in,
   .is-active crossfades the active beat's group of (≤2) chips. ── */
.dc-app .dc-cs-prodx-scene__chips {
  position: absolute; z-index: 8; pointer-events: none;
  width: 248px; height: 0; top: auto; left: auto;
  opacity: 0; transition: opacity .5s ease;
}
.dc-app .dc-cs-prodx-scene__chips.is-on { opacity: 1; }
.dc-app .dc-cs-prodx-scene__chipgrp {
  position: absolute; left: 0; top: 0; width: 100%;
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  opacity: 0; transform: translateY(8px); transition: opacity .45s ease, transform .45s ease;
}
.dc-app .dc-cs-prodx-scene__chipgrp.is-active { opacity: 1; transform: none; }
.dc-app .dc-cs-prodx-scene__chips--left .dc-cs-prodx-scene__chipgrp { align-items: flex-end; }
/* the "paths to purchase" chip sits lower-left, beside its chat moment */
.dc-app .dc-cs-prodx-scene__chipgrp[data-chipgrp="5"] { top: 400px; }
/* Pine-style chips — larger square-ish tiles: visual on top, label below. */
.dc-app .dc-cs-prodx-scene__chip {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 12px;
  min-width: 150px; max-width: 240px;
  background: #fff; border: 1px solid #ECE3FA; border-radius: 20px;
  padding: 20px 22px; font-size: 16px; font-weight: 800; line-height: 1.25; color: #250651;
  box-shadow: 0 24px 54px -26px rgba(86,18,189,.55);
}
.dc-app .dc-cs-prodx-scene__chips--left .dc-cs-prodx-scene__chip { align-items: flex-end; text-align: right; }
.dc-app .dc-cs-prodx-scene__chip-ic {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center; background: #EFE7FF;
}
.dc-app .dc-cs-prodx-scene__chip-ic--picks { background: #F0E7FF; }
.dc-app .dc-cs-prodx-scene__chip-tx { min-width: 0; font-weight: 700; }
/* colour-dot chip (finishes) */
.dc-app .dc-cs-prodx-scene__chip-dots { flex: 0 0 auto; display: inline-flex; }
.dc-app .dc-cs-prodx-scene__chip-dots i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(16,13,12,.08); display: inline-block; }
.dc-app .dc-cs-prodx-scene__chip-dots i + i { margin-left: -7px; }
/* star-rating chip (reviews) */
.dc-app .dc-cs-prodx-scene__chip--stars .dc-cs-prodx-scene__chip-stars { color: #F5A623; letter-spacing: 1px; font-size: 16px; }
.dc-app .dc-cs-prodx-scene__chip-rate { font-size: 18px; font-weight: 800; color: #250651; }
.dc-app .dc-cs-prodx-scene__chip--stars .dc-cs-prodx-scene__chip-tx { font-weight: 600; color: #6a6577; font-size: 13px; }
/* red-pin distance chip (locator) */
.dc-app .dc-cs-prodx-scene__chip-ic--pin { background: #FEE2E2; }
/* cyan paths chip (purchase) */
.dc-app .dc-cs-prodx-scene__chip-ic--paths { background: #CFF7FE; }

/* Cyan caption overlay, anchored to the bottom-centre of the phone screen. */
.dc-app .dc-cs-prodx-scene__povl { position: absolute; left: 16px; right: 16px; bottom: 26px; z-index: 9; display: flex; justify-content: center; pointer-events: none; }
.dc-app .dc-cs-prodx-scene__povl-line {
  position: absolute; bottom: 0; max-width: 100%; text-align: center; white-space: normal;
  background: #E3F7FD; color: #0B5566; border: 1px solid #B7E8F4; font-weight: 700; font-size: 13px; line-height: 1.35;
  padding: 9px 15px; border-radius: 10px; box-shadow: 0 6px 18px -10px rgba(11,85,102,.28);
  opacity: 0; transform: translateY(6px); transition: opacity .4s ease, transform .4s ease;
}
.dc-app .dc-cs-prodx-scene__povl-line.is-active { opacity: 1; transform: none; }
/* Desktop only: a wide horizontal callout straddling the phone's right
   edge (part over the chat, part outside), ~1/4 up from the bottom. */
@media (min-width: 701px) {
  .dc-app .dc-cs-prodx-scene__povl { left: auto; right: -104px; bottom: 25%; justify-content: flex-end; }
  .dc-app .dc-cs-prodx-scene__povl-line { min-width: 260px; max-width: 320px; text-align: left; padding: 14px 20px; font-size: 14px; }
}

/* Static fallback (mobile): show both columns stacked, active blocks only. */
.dc-app .dc-cs-prodx-scene.is-static .dc-cs-prodx-scene__jrn { position: static; transform: none; width: auto; max-width: 620px; margin: 8px 20px 0; opacity: 1; }
.dc-app .dc-cs-prodx-scene.is-static .dc-cs-prodx-scene__jrn-blocks { position: static; min-height: 0; }
.dc-app .dc-cs-prodx-scene.is-static .dc-cs-prodx-scene__jrn-block { position: static; opacity: 1; transform: none; margin-bottom: 18px; }
.dc-app .dc-cs-prodx-scene.is-static .dc-cs-prodx-scene__jrn-word { font-size: 24px; }
.dc-app .dc-cs-prodx-scene.is-static .dc-cs-prodx-scene__chips { display: none; }


/* ════════════════════════════════════════════════════════════════════
   PAGE 2 — Agentic BrandStore TECHNICAL / how-it-works (dc-cs-hiw-*)
   Prefixed so it never collides with Page 1's dc-cs-prodx-*.
   ════════════════════════════════════════════════════════════════════ */

/* Stagger: this page's reveals honor an optional --d delay. */
.dc-app.dc-cs-hiw .reveal { transition-delay: var(--d, 0s); }

.dc-app .dc-cs-hiw-grad {
  background-image: linear-gradient(110deg,#67E1F7 0%,#5612BD 35%,#9250F2 70%,#67E1F7 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ── HERO ──────────────────────────────────────────────────────────── */
.dc-app .dc-cs-hiw-hero {
  position: relative; overflow: hidden;
  padding: calc(var(--dc-nav-h, 116px) + 96px) 0 112px;
  background: linear-gradient(180deg,#FBF8FF 0%,#F9F5FF 100%);
}
.dc-app .dc-cs-hiw-hero > .dc-container { position: relative; z-index: 2; }
.dc-app .dc-cs-hiw-hero__blur {
  position: absolute; z-index: 1; top: -180px; left: 50%; transform: translateX(-50%);
  width: 920px; height: 720px; pointer-events: none;
  background: radial-gradient(circle at 50% 40%, rgba(182,149,255,.30), rgba(182,149,255,0) 62%);
  filter: blur(40px);
}
.dc-app .dc-cs-hiw-hero__copy { max-width: 820px; }
.dc-app .dc-cs-hiw-hero__h1 {
  margin: 18px 0 0; font-weight: 800; letter-spacing: -.03em; line-height: 1.02;
  font-size: clamp(40px, 7vw, 84px); color: var(--dc-fg-strong, #100D0C);
}
.dc-app .dc-cs-hiw-hero__sub {
  margin: 24px 0 0; max-width: 680px; font-size: clamp(17px, 2vw, 20px);
  line-height: 1.55; color: var(--dc-purple-deep, #250651);
}
.dc-app .dc-cs-hiw-hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* Hero proof block — three structured, crawlable cells. */
.dc-app .dc-cs-hiw-hero__proof {
  margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.dc-app .dc-cs-hiw-proof {
  background: #fff; border: 1px solid #ece3fa; border-radius: 18px; padding: 24px 24px 26px;
  box-shadow: 0 14px 40px -26px rgba(86,18,189,.22);
}
.dc-app .dc-cs-hiw-proof__tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 800; font-size: 15px; letter-spacing: -.01em; color: var(--dc-purple, #5612BD);
}
.dc-app .dc-cs-hiw-proof__body {
  margin: 12px 0 0; font-size: 15.5px; line-height: 1.5; color: var(--dc-purple-deep, #250651);
}





/* ── ARCHITECTURE — isometric blueprint stack ──────────────────────── */
.dc-app .dc-cs-hiw-iso { position: relative; overflow: clip; background: #0E0125; padding: 104px 0 108px; }
.dc-app .dc-cs-hiw-iso__glow { position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(620px 420px at 22% 18%, rgba(86,18,189,.42), transparent 70%),
  radial-gradient(560px 420px at 82% 86%, rgba(103,225,247,.20), transparent 70%); }
.dc-app .dc-cs-hiw-iso > .dc-container { position: relative; z-index: 2; }
.dc-app .dc-cs-hiw-iso__head { max-width: 760px; margin: 0 auto 16px; text-align: center; }
.dc-app .dc-cs-hiw-iso__head .dc-eyebrow { justify-content: center; }
.dc-app .dc-cs-hiw-iso__h2 { margin: 14px 0 0; font-weight: 800; letter-spacing: -.022em; line-height: 1.05; font-size: clamp(28px, 4vw, 54px); color: #fff; }
.dc-app .dc-cs-hiw-iso__sub { margin: 16px 0 0; font-size: clamp(16px, 1.7vw, 19px); line-height: 1.55; color: #c9bce8; }

/* desktop isometric scene */
.dc-app .dc-cs-hiw-iso__scene { position: relative; margin: 8px auto 0; max-width: 1080px; }
.dc-app .dc-cs-hiw-iso__art { display: block; width: 64%; height: auto; margin: 0 auto; overflow: visible; }
.dc-app .dc-cs-hiw-iso__art { animation: dcIsoFloat 7s ease-in-out infinite; }
.dc-app .dc-cs-hiw-iso__plane { fill: rgba(133,236,255,.04); stroke: #6f54b8; stroke-width: 1.5; }

/* side labels — aligned to each layer's vertical centre */
.dc-app .dc-cs-hiw-iso__label { position: absolute; transform: translateY(-50%); width: 24%; max-width: 270px; opacity: 0; transition: opacity .7s ease .35s; }
.dc-app .dc-cs-hiw-iso__scene.in .dc-cs-hiw-iso__label { opacity: 1; }
.dc-app .dc-cs-hiw-iso__label--left { left: 0; text-align: right; padding-right: 16px; border-right: 2px solid rgba(133,236,255,.40); }
.dc-app .dc-cs-hiw-iso__label--right { right: 0; text-align: left; padding-left: 16px; border-left: 2px solid rgba(133,236,255,.40); }
.dc-app .dc-cs-hiw-iso__lname { font-family: ui-monospace, Menlo, monospace; font-size: 16px; font-weight: 800; color: #85ECFF; letter-spacing: -.01em; }
.dc-app .dc-cs-hiw-iso__ldesc { margin-top: 6px; font-size: 13.5px; line-height: 1.45; color: #c2b4e4; }
.dc-app .dc-cs-hiw-iso__packet { filter: drop-shadow(0 0 6px rgba(133,236,255,.9)); animation: dcIsoPacket 4.2s cubic-bezier(.65,0,.35,1) infinite; }

/* assemble-on-scroll: parent .reveal.in staggers each layer in */
.dc-app .dc-cs-hiw-iso__layer { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0s); transform-box: fill-box; transform-origin: center; }
.dc-app .dc-cs-hiw-iso__scene.in .dc-cs-hiw-iso__layer { opacity: 1; transform: none; }
.dc-app .dc-cs-hiw-iso__conn { opacity: 0; transition: opacity .8s ease .5s; }
.dc-app .dc-cs-hiw-iso__scene.in .dc-cs-hiw-iso__conn { opacity: 1; }

@keyframes dcIsoFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes dcIsoPacket { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateY(490px); opacity: 0; } }

/* flattened vertical stack (mobile / reduced motion) */
.dc-app .dc-cs-hiw-iso__flat { display: none; list-style: none; margin: 8px 0 0; padding: 0; }
.dc-app .dc-cs-hiw-iso__flayer { position: relative; display: flex; gap: 16px; align-items: flex-start; background: rgba(255,255,255,.04); border: 1px solid rgba(146,80,242,.32); border-radius: 18px; padding: 18px 18px; }
.dc-app .dc-cs-hiw-iso__flayer + .dc-cs-hiw-iso__flayer { margin-top: 34px; }
.dc-app .dc-cs-hiw-iso__flayer + .dc-cs-hiw-iso__flayer::before { content: ""; position: absolute; top: -28px; left: 36px; width: 2px; height: 22px; background: linear-gradient(#85ECFF, #5612BD); }
.dc-app .dc-cs-hiw-iso__fcube { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 8px; background: linear-gradient(135deg, #85ECFF 0%, #5612BD 100%); box-shadow: 0 0 18px -4px rgba(133,236,255,.7); }
.dc-app .dc-cs-hiw-iso__fname { font-family: ui-monospace, Menlo, monospace; font-size: 15px; font-weight: 800; color: #85ECFF; }
.dc-app .dc-cs-hiw-iso__fdesc { margin-top: 5px; font-size: 14px; line-height: 1.45; color: #c9bce8; }

@media (max-width: 900px) {
  .dc-app .dc-cs-hiw-iso { padding: 60px 0 64px; }
  .dc-app .dc-cs-hiw-iso__scene { display: none; }
  .dc-app .dc-cs-hiw-iso__flat { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .dc-app .dc-cs-hiw-iso__art, .dc-app .dc-cs-hiw-iso__packet { animation: none; }
  .dc-app .dc-cs-hiw-iso__layer { opacity: 1; transform: none; }
  .dc-app .dc-cs-hiw-iso__conn { opacity: 1; }
}

/* ── Shared section header + chips for how-it-works lower sections ──── */
.dc-app .dc-cs-hiw-sec__head { max-width: 760px; margin: 0 auto 44px; text-align: center; }
.dc-app .dc-cs-hiw-sec__head .dc-eyebrow { justify-content: center; }
.dc-app .dc-cs-hiw-sec__h2 { margin: 14px 0 0; font-weight: 800; letter-spacing: -.022em; line-height: 1.06; font-size: clamp(27px, 3.8vw, 50px); color: var(--dc-fg-strong, #100D0C); }
.dc-app .dc-cs-hiw-sec__sub { margin: 16px 0 0; font-size: clamp(16px, 1.7vw, 19px); line-height: 1.55; color: var(--dc-purple-deep, #250651); }
.dc-app .dc-cs-hiw-chip { font-size: 12.5px; font-weight: 700; color: var(--dc-purple-deep, #250651); background: #fff; border: 1px solid #e2d4f7; border-radius: 999px; padding: 7px 13px; }
.dc-app .dc-cs-hiw-ticks { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 11px; }
.dc-app .dc-cs-hiw-ticks li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.45; color: var(--dc-purple-deep, #250651); }
.dc-app .dc-cs-hiw-mk { width: 22px; height: 22px; }

/* ── Content Enrichment — the detailed lead section (Diaz/Alka 06-19) ── */
.dc-app .dc-cs-hiw-ce { position: relative; overflow: clip; background: var(--dc-surface, #F9F5FF); padding: clamp(64px, 8vh, 104px) 0; }
.dc-app .dc-cs-hiw-ce__glow { position: absolute; top: -120px; left: 50%; width: 720px; height: 480px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(146,80,242,.16), transparent 72%); pointer-events: none; }
.dc-app .dc-cs-hiw-ce .dc-container { position: relative; }
/* 16:9 visual slots (placeholders now; Alka's slides drop in via src swap) */
.dc-app .dc-cs-hiw-ce__viz { margin: clamp(28px, 4vh, 44px) auto 0; max-width: 1040px; }
.dc-app .dc-cs-hiw-ce__viz img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 26px; border: 1px solid var(--dc-border-faint, #ece3fa); box-shadow: 0 30px 70px -40px rgba(86,18,189,.45); background: #fff; }
.dc-app .dc-cs-hiw-ce__cap { margin: 12px 2px 0; text-align: right; font-size: 12.5px; font-style: italic; color: #8a83a0; }
/* the three things enrichment does */
.dc-app .dc-cs-hiw-ce__points { list-style: none; margin: clamp(32px, 5vh, 52px) auto 0; padding: 0; max-width: 1040px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); }
.dc-app .dc-cs-hiw-ce__point { display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 20px 22px 4px; background: transparent; border: 0; border-top: 3px solid var(--dc-purple, #5612BD); border-radius: 0; box-shadow: none; }
.dc-app .dc-cs-hiw-ce__pt-ic { width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
  background: #f4f1fa; flex: none; }
.dc-app .dc-cs-hiw-ce__point b { font-weight: 800; font-size: 15.5px; line-height: 1.2; letter-spacing: -.01em; color: var(--dc-fg-strong, #100D0C); }
.dc-app .dc-cs-hiw-ce__point span { font-size: 14px; line-height: 1.5; color: #5b5570; }
/* the engine sub-head */
.dc-app .dc-cs-hiw-ce__subhead { margin-top: clamp(56px, 8vh, 92px); }
.dc-app .dc-cs-hiw-ce__h3 { margin: 14px 0 0; font-weight: 800; letter-spacing: -.02em; line-height: 1.08; font-size: clamp(24px, 3vw, 38px); color: var(--dc-fg-strong, #100D0C); }
@media (max-width: 880px) {
  .dc-app .dc-cs-hiw-ce__points { grid-template-columns: 1fr; max-width: 460px; }
}

/* ── Content enrichment Without/With ───────────────────────────────── */
.dc-app .dc-cs-hiw-enrich { background: #fff; padding: 96px 0; }
.dc-app .dc-cs-hiw-enrich__prompt { max-width: 760px; margin: 0 auto 36px; display: flex; align-items: center; gap: 12px; justify-content: center; text-align: center; background: linear-gradient(110deg,#5612BD,#9250F2); color: #fff; border-radius: 16px; padding: 16px 22px; font-size: 16px; font-weight: 600; line-height: 1.4; }
.dc-app .dc-cs-hiw-enrich__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.dc-app .dc-cs-hiw-vs { border-radius: 24px; padding: 24px; }
.dc-app .dc-cs-hiw-vs--without { background: #f4f4f6; border: 1px solid #e7e7ea; }
.dc-app .dc-cs-hiw-vs--with { background: linear-gradient(180deg,#F4ECFF 0%,#FBF8FF 100%); border: 1px solid #d9c4ff; }
.dc-app .dc-cs-hiw-vs__tag { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #8c8c95; margin-bottom: 16px; }
.dc-app .dc-cs-hiw-vs__tag--with { color: var(--dc-purple, #5612BD); }
.dc-app .dc-cs-hiw-vs__raw { background: #fff; border: 1px solid #e7e7ea; border-radius: 14px; padding: 16px; }
.dc-app .dc-cs-hiw-vs__raw b { font-size: 14px; color: #3a3a40; font-family: ui-monospace, Menlo, monospace; }
.dc-app .dc-cs-hiw-vs__raw p { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: #6b6b73; font-family: ui-monospace, Menlo, monospace; }
.dc-app .dc-cs-hiw-vs__notes { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 9px; }
.dc-app .dc-cs-hiw-vs__notes li { font-size: 13.5px; line-height: 1.4; color: #6b6b73; padding-left: 16px; position: relative; }
.dc-app .dc-cs-hiw-vs__notes li::before { content: "\2014"; position: absolute; left: 0; color: #b6b6bd; }
.dc-app .dc-cs-hiw-vs__sources { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.dc-app .dc-cs-hiw-vs__src { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: var(--dc-purple-deep, #250651); background: #fff; border: 1px solid #e2d4f7; border-radius: 999px; padding: 5px 10px; }
.dc-app .dc-cs-hiw-vs__enriched { background: #fff; border: 1px solid #e6d8ff; border-radius: 14px; padding: 16px; }
.dc-app .dc-cs-hiw-vs__enriched b { font-size: 14.5px; font-weight: 800; color: var(--dc-fg-strong, #100D0C); }
.dc-app .dc-cs-hiw-vs__enriched ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.dc-app .dc-cs-hiw-vs__enriched li { font-size: 13px; line-height: 1.45; color: #3f3559; }
.dc-app .dc-cs-hiw-vs__enriched em { font-style: normal; font-weight: 800; color: var(--dc-purple, #5612BD); }
.dc-app .dc-cs-hiw-vs__verified { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 12px; font-weight: 700; color: #22A06B; }
.dc-app .dc-cs-hiw-vs__answer { margin-top: 14px; background: #0E0125; border-radius: 14px; padding: 14px; }
.dc-app .dc-cs-hiw-vs__answer-hd { font-size: 11px; font-weight: 800; letter-spacing: .2em; color: #85ECFF; margin-bottom: 10px; }
.dc-app .dc-cs-hiw-vs__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dc-app .dc-cs-hiw-vs__cards > div { background: #fff; border-radius: 12px; overflow: hidden; }
.dc-app .dc-cs-hiw-vs__cards img { width: 100%; height: 120px; object-fit: cover; display: block; }
.dc-app .dc-cs-hiw-vs__cards span { display: block; font-size: 11.5px; font-weight: 700; color: #250651; padding: 7px 9px; }

/* ── Storefront Studio ─────────────────────────────────────────────── */
.dc-app .dc-cs-hiw-studio { background: linear-gradient(180deg,#FBF8FF 0%,#fff 100%); padding: 96px 0; }
.dc-app .dc-cs-hiw-studio__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px; align-items: center; }
.dc-app .dc-cs-hiw-studio__tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.dc-app .dc-cs-hiw-studio__shot { position: relative; border-radius: 22px; overflow: hidden; border: 1px solid #ece3fa; box-shadow: 0 30px 70px -34px rgba(86,18,189,.4); background: #fff; }
.dc-app .dc-cs-hiw-studio__shot img { width: 100%; height: auto; display: block; }
.dc-app .dc-cs-hiw-studio__ph { font-size: 12px; font-weight: 700; color: #8a7aa8; text-align: center; padding: 12px; background: #f6f2fe; border-top: 1px dashed #d9c4ff; }

/* ── Short journey ─────────────────────────────────────────────────── */
.dc-app .dc-cs-hiw-jrn { background: #fff; padding: 88px 0; }
.dc-app .dc-cs-hiw-jrn__row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.dc-app .dc-cs-hiw-jrn__beat { position: relative; padding-top: 26px; }
.dc-app .dc-cs-hiw-jrn__beat::before { content: ""; position: absolute; top: 7px; left: 0; right: 0; height: 2px; background: linear-gradient(90deg,#85ECFF,#9250F2); border-radius: 2px; }
.dc-app .dc-cs-hiw-jrn__dot { position: absolute; top: 2px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: #5612BD; box-shadow: 0 0 0 4px rgba(86,18,189,.14); }
.dc-app .dc-cs-hiw-jrn__word { font-size: 22px; font-weight: 800; letter-spacing: -.01em; color: var(--dc-fg-strong, #100D0C); }
.dc-app .dc-cs-hiw-jrn__cap { margin: 10px 0 0; font-size: 15px; line-height: 1.5; color: var(--dc-purple-deep, #250651); }

/* ── GEO comparison ────────────────────────────────────────────────── */
.dc-app .dc-cs-hiw-geo { background: linear-gradient(180deg,#fff 0%,#FBF8FF 100%); padding: 96px 0; }
/* GEO → GEO+ description contrast (sits above the comparison table) */
.dc-app .dc-cs-geoplus { max-width: 720px; margin: 0 auto 28px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 14px; }
.dc-app .dc-cs-geoplus__card { display: flex; flex-direction: column; gap: 9px; padding: 22px 22px 24px; border-radius: 18px; border: 1px solid #ece3fa; background: #fff; }
.dc-app .dc-cs-geoplus__card--geo { background: #f7f5fb; }
.dc-app .dc-cs-geoplus__card--plus { border-color: #c9b6f2; box-shadow: 0 18px 44px -30px rgba(86,18,189,.5); background: linear-gradient(160deg,#fff, #faf6ff); }
.dc-app .dc-cs-geoplus__tag { align-self: flex-start; font-weight: 800; font-size: 12px; letter-spacing: .04em; padding: 4px 12px; border-radius: 999px; background: #ece6f6; color: #6b6480; }
.dc-app .dc-cs-geoplus__tag--plus { background: #85ECFF; color: #0E0125; }
.dc-app .dc-cs-geoplus__desc { margin: 2px 0 0; font-size: 15px; line-height: 1.5; font-weight: 700; color: var(--dc-fg-strong,#100D0C); }
.dc-app .dc-cs-geoplus__note { font-size: 13px; line-height: 1.45; color: #9a93ab; margin-top: auto; }
.dc-app .dc-cs-geoplus__src { font-size: 13px; line-height: 1.45; color: #5b5570; }
.dc-app .dc-cs-geoplus__win { display: inline-flex; align-items: center; gap: 7px; margin-top: auto; font-weight: 800; font-size: 13.5px; color: var(--dc-purple,#5612BD); }
.dc-app .dc-cs-geoplus__arrow { align-self: center; color: #9250F2; }
@media (max-width: 720px) {
  .dc-app .dc-cs-geoplus { grid-template-columns: 1fr; }
  .dc-app .dc-cs-geoplus__arrow { transform: rotate(90deg); }
}

.dc-app .dc-cs-hiw-cmp { max-width: 720px; margin: 0 auto; background: #fff; border: 1px solid #ece3fa; border-radius: 20px; overflow: hidden; box-shadow: 0 22px 54px -34px rgba(86,18,189,.3); }
.dc-app .dc-cs-hiw-cmp__head, .dc-app .dc-cs-hiw-cmp__row { display: grid; grid-template-columns: 1fr 96px 150px; align-items: center; }
.dc-app .dc-cs-hiw-cmp__head { background: #f6f2fe; padding: 4px 0; }
.dc-app .dc-cs-hiw-cmp__col { text-align: center; font-size: 14px; font-weight: 800; color: var(--dc-purple, #5612BD); padding: 14px 8px; }
.dc-app .dc-cs-hiw-cmp__col--bs { color: var(--dc-purple-deep, #250651); }
.dc-app .dc-cs-hiw-cmp__row { border-top: 1px solid #f1ecfa; }
.dc-app .dc-cs-hiw-cmp__lbl { font-size: 14.5px; color: var(--dc-purple-deep, #250651); padding: 16px 20px; }
.dc-app .dc-cs-hiw-cmp__cell { display: flex; justify-content: center; padding: 14px 8px; }

/* ── Works across every AI platform (dark) ─────────────────────────── */
.dc-app .dc-cs-hiw-platform { position: relative; overflow: hidden; background: #0E0125; padding: 100px 0; text-align: center; }
.dc-app .dc-cs-hiw-platform__glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(600px 400px at 50% 30%, rgba(86,18,189,.5), transparent 70%); }
.dc-app .dc-cs-hiw-platform__inner { position: relative; z-index: 2; max-width: 820px; margin: 0 auto; }
.dc-app .dc-cs-hiw-platform__inner .dc-eyebrow { justify-content: center; }
.dc-app .dc-cs-hiw-platform__h2 { margin: 14px 0 0; font-weight: 800; letter-spacing: -.022em; line-height: 1.05; font-size: clamp(30px, 4.4vw, 58px); color: #fff; }
.dc-app .dc-cs-hiw-platform__sub { margin: 18px auto 0; max-width: 660px; font-size: clamp(16px,1.7vw,19px); line-height: 1.55; color: #c9bce8; }
.dc-app .dc-cs-hiw-platform__wall { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 34px 0 0; }
.dc-app .dc-cs-hiw-platform__chip { font-size: 15px; font-weight: 700; color: #fff; background: rgba(255,255,255,.06); border: 1px solid rgba(146,80,242,.4); border-radius: 999px; padding: 11px 20px; }
.dc-app .dc-cs-hiw-platform__note { margin: 26px 0 0; font-size: 13px; font-style: italic; color: #9b8cc4; }

/* ── Buy vs build ──────────────────────────────────────────────────── */
.dc-app .dc-cs-hiw-build { background: #fff; padding: 96px 0; }
.dc-app .dc-cs-hiw-bld { border: 1px solid #ece3fa; border-radius: 20px; overflow: hidden; box-shadow: 0 22px 54px -34px rgba(86,18,189,.3); }
.dc-app .dc-cs-hiw-bld__head, .dc-app .dc-cs-hiw-bld__row { display: grid; grid-template-columns: 0.8fr 1.1fr 1.2fr; }
.dc-app .dc-cs-hiw-bld__head { background: #f6f2fe; }
.dc-app .dc-cs-hiw-bld__head span { padding: 16px 18px; font-size: 14px; font-weight: 800; color: var(--dc-purple, #5612BD); }
.dc-app .dc-cs-hiw-bld__h-b { color: var(--dc-purple-deep, #250651); }
.dc-app .dc-cs-hiw-bld__row { border-top: 1px solid #f1ecfa; }
.dc-app .dc-cs-hiw-bld__row > span { padding: 16px 18px; font-size: 14px; line-height: 1.45; }
.dc-app .dc-cs-hiw-bld__c { font-weight: 800; color: var(--dc-purple, #5612BD); }
.dc-app .dc-cs-hiw-bld__d { color: #6b6b73; }
.dc-app .dc-cs-hiw-bld__b { color: var(--dc-purple-deep, #250651); font-weight: 600; display: flex; gap: 8px; align-items: flex-start; background: #fbf8ff; }

/* ── Final CTA (dark) ──────────────────────────────────────────────── */
.dc-app .dc-cs-hiw-final { position: relative; overflow: hidden; background: #0E0125; padding: 104px 0; text-align: center; }
.dc-app .dc-cs-hiw-final__glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(620px 420px at 50% 40%, rgba(103,225,247,.22), transparent 70%), radial-gradient(520px 360px at 20% 80%, rgba(86,18,189,.45), transparent 70%); }
.dc-app .dc-cs-hiw-final__inner { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; }
.dc-app .dc-cs-hiw-final__h2 { font-weight: 800; letter-spacing: -.022em; line-height: 1.06; font-size: clamp(30px,4.4vw,56px); color: #fff; }
.dc-app .dc-cs-hiw-final__sub { margin: 18px auto 0; max-width: 560px; font-size: clamp(16px,1.7vw,19px); line-height: 1.55; color: #c9bce8; }
.dc-app .dc-cs-hiw-final__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 32px; }

/* ── Responsive for the lower sections ─────────────────────────────── */
@media (max-width: 900px) {
  .dc-app .dc-cs-hiw-enrich, .dc-app .dc-cs-hiw-studio, .dc-app .dc-cs-hiw-jrn, .dc-app .dc-cs-hiw-geo, .dc-app .dc-cs-hiw-build { padding: 60px 0; }
  .dc-app .dc-cs-hiw-platform, .dc-app .dc-cs-hiw-final { padding: 64px 0; }
  .dc-app .dc-cs-hiw-enrich__grid { grid-template-columns: 1fr; gap: 18px; }
  .dc-app .dc-cs-hiw-studio__grid { grid-template-columns: 1fr; gap: 32px; }
  .dc-app .dc-cs-hiw-jrn__row { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .dc-app .dc-cs-hiw-cmp__head, .dc-app .dc-cs-hiw-cmp__row { grid-template-columns: 1fr 64px 88px; }
  .dc-app .dc-cs-hiw-cmp__lbl { padding: 14px; font-size: 13.5px; }
  /* keep the same 3-column table as desktop; scroll horizontally if narrow */
  .dc-app .dc-cs-hiw-bld { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .dc-app .dc-cs-hiw-bld__head, .dc-app .dc-cs-hiw-bld__row { min-width: 620px; }
  .dc-app .dc-cs-hiw-bld__head span, .dc-app .dc-cs-hiw-bld__row > span { font-size: 13px; padding: 13px 14px; }
}
@media (max-width: 560px) {
  .dc-app .dc-cs-hiw-jrn__row { grid-template-columns: 1fr; }
}

/* ════ how-it-works v2 sections (enrichment phone, invoked, tools, journey) ════ */

/* ── Content enrichment: typed prompt + static phone + source callouts ── */
.dc-app .dc-cs-hiw-en2 { background: #fff; padding: 96px 0; }
.dc-app .dc-cs-hiw-en2__promptbar { max-width: 540px; margin: 0 auto 44px; display: flex; align-items: center; gap: 10px; background: #fff; border: 1.5px solid #d9c4ff; border-radius: 14px; padding: 14px 18px; box-shadow: 0 14px 36px -26px rgba(86,18,189,.4); font-size: 16px; font-weight: 600; color: var(--dc-purple-deep,#250651); }
.dc-app .dc-cs-hiw-en2__caret { width: 2px; height: 19px; background: #5612BD; margin-left: -4px; animation: dcCaret 1.1s steps(1) infinite; }
@keyframes dcCaret { 0%,50% { opacity: 1; } 51%,100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .dc-app .dc-cs-hiw-en2__caret { animation: none; } }

.dc-app .dc-cs-hiw-en2__stage { position: relative; max-width: 1040px; margin: 0 auto; min-height: 700px; }
.dc-app .dc-cs-hiw-en2__lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.dc-app .dc-cs-hiw-en2__phone { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 298px; z-index: 2; }
.dc-app .dc-cs-hiw-en2__phone .dc-cs-hiw-ph__screen { min-height: 600px; }
.dc-app .dc-cs-hiw-en2__brand { font-size: 12px; font-weight: 800; letter-spacing: .22em; color: #100D0C; margin-bottom: 10px; }
.dc-app .dc-cs-hiw-en2__intro { font-size: 12.5px; line-height: 1.4; color: #3f3559; margin-bottom: 12px; }
.dc-app .dc-cs-hiw-en2__car { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.dc-app .dc-cs-hiw-en2__card { border: 1px solid #eee; border-radius: 12px; overflow: hidden; }
.dc-app .dc-cs-hiw-en2__card img { width: 100%; height: 120px; object-fit: cover; display: block; }
.dc-app .dc-cs-hiw-en2__card span { display: block; font-size: 11px; font-weight: 700; color: #250651; padding: 7px 8px; }
.dc-app .dc-cs-hiw-en2__table { margin-top: 12px; border: 1px solid #efe9fb; border-radius: 12px; overflow: hidden; }
.dc-app .dc-cs-hiw-en2__table > div { display: flex; justify-content: space-between; gap: 10px; padding: 8px 12px; border-top: 1px solid #f4f0fc; }
.dc-app .dc-cs-hiw-en2__table > div:first-child { border-top: 0; }
.dc-app .dc-cs-hiw-en2__table span { font-size: 11px; font-weight: 700; color: #9250F2; }
.dc-app .dc-cs-hiw-en2__table b { font-size: 11.5px; color: #250651; }
.dc-app .dc-cs-hiw-en2__rev { margin-top: 12px; background: #f6f4fb; border-radius: 12px; padding: 11px 13px; }
.dc-app .dc-cs-hiw-en2__stars { color: #9250F2; font-size: 12px; letter-spacing: 1px; }
.dc-app .dc-cs-hiw-en2__rev p { margin: 5px 0 0; font-size: 12px; line-height: 1.4; color: #2b2540; }
.dc-app .dc-cs-hiw-en2__by { display: block; margin-top: 6px; font-size: 10.5px; font-weight: 700; color: #8a7aa8; }

.dc-app .dc-cs-hiw-en2__call { position: absolute; z-index: 3; width: 22%; max-width: 240px; transform: translateY(-50%); font-size: 13.5px; line-height: 1.4; font-weight: 600; color: var(--dc-purple-deep,#250651); }
.dc-app .dc-cs-hiw-en2__call--left { left: 0; text-align: right; }
.dc-app .dc-cs-hiw-en2__call--right { right: 0; text-align: left; }
.dc-app .dc-cs-hiw-en2__call--c1 { top: 27%; }
.dc-app .dc-cs-hiw-en2__call--c2 { top: 52%; }
.dc-app .dc-cs-hiw-en2__call--c3 { top: 75%; }
.dc-app .dc-cs-hiw-en2__call-k { display: block; font-weight: 800; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--dc-purple, #5612BD); margin-bottom: 3px; }
/* dotted connector + dot anchored to each callout, pointing at the phone */
.dc-app .dc-cs-hiw-en2__call::after { content: ""; position: absolute; top: 50%; width: 96px; border-top: 2px dotted #8b6fc4; }
.dc-app .dc-cs-hiw-en2__call::before { content: ""; position: absolute; top: 50%; transform: translateY(-50%); width: 7px; height: 7px; border-radius: 50%; background: #7a5cc0; }
.dc-app .dc-cs-hiw-en2__call--left::after { right: -104px; }
.dc-app .dc-cs-hiw-en2__call--left::before { right: -108px; }
.dc-app .dc-cs-hiw-en2__call--right::after { left: -104px; }
.dc-app .dc-cs-hiw-en2__call--right::before { left: -108px; }

/* ── Realistic titanium phone frame (shared) ───────────────────────── */
.dc-app .dc-cs-hiw-ph { position: relative; padding: 6px; border-radius: 50px; background: linear-gradient(145deg,#f0f0f4 0%,#c2c2cc 18%,#9a9aa6 50%,#cfcfd6 82%,#ababb6 100%); box-shadow: 0 46px 100px -42px rgba(20,3,46,.5), inset 0 0 0 1px rgba(255,255,255,.45); }
.dc-app .dc-cs-hiw-ph::before, .dc-app .dc-cs-hiw-ph::after { content: ""; position: absolute; right: -3px; width: 3px; border-radius: 2px; background: #9a9aa6; }
.dc-app .dc-cs-hiw-ph::before { top: 23%; height: 56px; }
.dc-app .dc-cs-hiw-ph::after { top: 40%; height: 34px; }
.dc-app .dc-cs-hiw-ph__screen { position: relative; background: #fff; border-radius: 44px; padding: 44px 16px 18px; overflow: hidden; }
.dc-app .dc-cs-hiw-ph__island { position: absolute; top: 13px; left: 50%; transform: translateX(-50%); width: 86px; height: 25px; border-radius: 999px; background: #0a0a0c; z-index: 6; }

/* ── How it gets invoked ───────────────────────────────────────────── */
.dc-app .dc-cs-hiw-inv { background: linear-gradient(180deg,#FBF8FF 0%,#fff 100%); padding: 96px 0; }
.dc-app .dc-cs-hiw-inv__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.dc-app .dc-cs-hiw-inv__card { background: transparent; border: 0; border-radius: 0; padding: 0; display: flex; gap: 22px; align-items: center; box-shadow: none; }
.dc-app .dc-cs-hiw-inv__card + .dc-cs-hiw-inv__card { position: relative; }
.dc-app .dc-cs-hiw-inv__grid > .dc-cs-hiw-inv__card:nth-child(2)::before { content: ""; position: absolute; left: -28px; top: 6%; bottom: 6%; width: 1px; background: linear-gradient(#ece3fa, #d9c4ff, #ece3fa); }
.dc-app .dc-cs-hiw-inv__shot { flex: 0 0 168px; }
.dc-app .dc-cs-hiw-inv__shot img { width: 100%; height: auto; border-radius: 16px; display: block; box-shadow: 0 18px 44px -26px rgba(20,3,46,.5); }
.dc-app .dc-cs-hiw-inv__tag { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--dc-purple,#5612BD); }
.dc-app .dc-cs-hiw-inv__title { margin: 10px 0 0; font-size: 22px; font-weight: 800; letter-spacing: -.01em; color: var(--dc-fg-strong,#100D0C); }
.dc-app .dc-cs-hiw-inv__copy p { margin: 10px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--dc-purple-deep,#250651); }

/* ── What a Storefront can do — alternating tool rows ──────────────── */
.dc-app .dc-cs-hiw-tools { background: #fff; padding: 96px 0 60px; }
.dc-app .dc-cs-hiw-tool { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; margin-top: 64px; }
.dc-app .dc-cs-hiw-tool--right .dc-cs-hiw-tool__copy { order: 2; }
.dc-app .dc-cs-hiw-tool--right .dc-cs-hiw-tool__shot { order: 1; }
.dc-app .dc-cs-hiw-tool__kick { font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--dc-purple,#5612BD); }
.dc-app .dc-cs-hiw-tool__title { margin: 14px 0 0; font-size: clamp(24px,2.8vw,34px); font-weight: 800; letter-spacing: -.018em; line-height: 1.1; color: var(--dc-fg-strong,#100D0C); }
.dc-app .dc-cs-hiw-tool__copy p { margin: 14px 0 0; font-size: 16px; line-height: 1.55; color: var(--dc-purple-deep,#250651); }
.dc-app .dc-cs-hiw-tool__shot { display: flex; justify-content: center; }
.dc-app .dc-cs-hiw-tool__shot img { width: 290px; max-width: 100%; height: auto; border-radius: 22px; display: block; box-shadow: 0 36px 80px -38px rgba(20,3,46,.5); }

/* ── Journey — alternating phone + text, static screens ────────────── */
.dc-app .dc-cs-hiw-jr2 { background: linear-gradient(180deg,#fff 0%,#FBF8FF 100%); padding: 64px 0 96px; }
.dc-app .dc-cs-hiw-jr2__row { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; margin-top: 56px; }
.dc-app .dc-cs-hiw-jr2__row--right .dc-cs-hiw-jr2__phone { order: 2; }
.dc-app .dc-cs-hiw-jr2__row--right .dc-cs-hiw-jr2__copy { order: 1; }
.dc-app .dc-cs-hiw-jr2__phone { display: flex; justify-content: center; }
.dc-app .dc-cs-hiw-jr2__word { font-size: clamp(26px,3.2vw,40px); font-weight: 800; letter-spacing: -.02em; color: var(--dc-fg-strong,#100D0C); }
.dc-app .dc-cs-hiw-jr2__cap { margin: 16px 0 0; font-size: clamp(16px,1.7vw,18px); line-height: 1.55; color: var(--dc-purple-deep,#250651); max-width: 440px; }
.dc-app .dc-cs-hiw-jr2__copy.dc-cs-hiw-jr2__copy { }
.dc-app .dc-cs-hiw-jr2__scr { width: 288px; min-height: 560px; display: flex; flex-direction: column; background: #fff; border: 9px solid #15032e; border-radius: 40px; padding: 18px 16px; box-shadow: 0 40px 90px -40px rgba(20,3,46,.6); }
.dc-app .dc-cs-hiw-jr2__scr::before { content: ""; display: block; width: 80px; height: 6px; border-radius: 6px; background: #e7e2ef; margin: -4px auto 14px; }
.dc-app .dc-cs-hiw-jr2__brand { font-size: 12px; font-weight: 800; letter-spacing: .22em; color: #100D0C; margin-bottom: 10px; }
.dc-app .dc-cs-hiw-jr2__line { font-size: 12.5px; color: #3f3559; margin-bottom: 12px; }
.dc-app .dc-cs-hiw-jr2__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.dc-app .dc-cs-hiw-jr2__cards > div { border: 1px solid #eee; border-radius: 12px; overflow: hidden; }
.dc-app .dc-cs-hiw-jr2__cards img { width: 100%; height: 150px; object-fit: cover; display: block; }
.dc-app .dc-cs-hiw-jr2__cards span { display: block; font-size: 11px; font-weight: 700; color: #250651; padding: 7px 8px; }
.dc-app .dc-cs-hiw-jr2__media { border-radius: 14px; overflow: hidden; }
.dc-app .dc-cs-hiw-jr2__media img { width: 100%; height: 200px; object-fit: cover; display: block; }
.dc-app .dc-cs-hiw-jr2__name { margin-top: 11px; font-size: 14.5px; font-weight: 800; color: #100D0C; }
.dc-app .dc-cs-hiw-jr2__sw { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.dc-app .dc-cs-hiw-jr2__sw i { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.dc-app .dc-cs-hiw-jr2__sw span { margin-left: 4px; font-size: 11.5px; font-weight: 700; color: #6b5a8a; }
.dc-app .dc-cs-hiw-jr2__stars { margin-top: 10px; font-size: 12px; color: #9250F2; letter-spacing: 1px; }
.dc-app .dc-cs-hiw-jr2__stars em { font-style: normal; color: #250651; font-weight: 700; letter-spacing: 0; }
.dc-app .dc-cs-hiw-jr2__chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.dc-app .dc-cs-hiw-jr2__chips span { font-size: 11px; font-weight: 700; color: #250651; border: 1px solid #e2d4f7; border-radius: 999px; padding: 6px 11px; }
.dc-app .dc-cs-hiw-jr2__chips span.is-primary { background: #85ECFF; border-color: #85ECFF; }
.dc-app .dc-cs-hiw-jr2__store { margin-top: 11px; font-size: 11.5px; font-weight: 700; color: #5612BD; }

@media (max-width: 900px) {
  .dc-app .dc-cs-hiw-en2, .dc-app .dc-cs-hiw-inv, .dc-app .dc-cs-hiw-tools, .dc-app .dc-cs-hiw-jr2 { padding: 60px 0; }
  /* enrichment mobile: stack callouts under the phone (revisit) */
  .dc-app .dc-cs-hiw-en2__stage { min-height: 0; max-width: 340px; }
  .dc-app .dc-cs-hiw-en2__lines { display: none; }
  .dc-app .dc-cs-hiw-en2__phone { position: static; transform: none; margin: 0 auto; }
  .dc-app .dc-cs-hiw-en2__call { position: static; width: auto; max-width: none; text-align: left !important; margin: 20px auto 0; max-width: 360px; padding-left: 14px; border-left: 3px solid var(--dc-purple, #5612BD); font-size: 14.5px; }
  .dc-app .dc-cs-hiw-en2__call-k { font-size: 12px; }
  .dc-app .dc-cs-hiw-inv__grid { grid-template-columns: 1fr; gap: 18px; }
  .dc-app .dc-cs-hiw-inv__card { flex-direction: column; text-align: center; }
  .dc-app .dc-cs-hiw-inv__shot { flex: 0 0 auto; width: 180px; }
  .dc-app .dc-cs-hiw-tool, .dc-app .dc-cs-hiw-jr2__row { grid-template-columns: 1fr; gap: 24px; margin-top: 44px; }
  .dc-app .dc-cs-hiw-tool--right .dc-cs-hiw-tool__copy, .dc-app .dc-cs-hiw-tool--right .dc-cs-hiw-tool__shot,
  .dc-app .dc-cs-hiw-jr2__row--right .dc-cs-hiw-jr2__phone, .dc-app .dc-cs-hiw-jr2__row--right .dc-cs-hiw-jr2__copy { order: 0; }
  .dc-app .dc-cs-hiw-jr2__phone { order: -1; }
}

/* ── Journey phone frame + richer screen content ───────────────────── */
.dc-app .dc-cs-hiw-jr2__phone .dc-cs-hiw-ph { width: 300px; }
.dc-app .dc-cs-hiw-jr2__phone .dc-cs-hiw-ph__screen { min-height: 540px; }
.dc-app .dc-cs-hiw-jr2__q { display: inline-block; font-size: 12.5px; font-weight: 700; color: #250651; background: #f1eefb; padding: 9px 13px; border-radius: 13px 13px 13px 4px; margin-bottom: 10px; }
.dc-app .dc-cs-hiw-jr2__say { font-size: 12px; line-height: 1.45; color: #3f3559; margin-bottom: 12px; }
.dc-app .dc-cs-hiw-jr2__hero { border-radius: 13px; overflow: hidden; }
.dc-app .dc-cs-hiw-jr2__hero img { width: 100%; height: 168px; object-fit: cover; display: block; }
.dc-app .dc-cs-hiw-jr2__thumbs { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin-top: 8px; }
.dc-app .dc-cs-hiw-jr2__thumbs > div { border-radius: 9px; overflow: hidden; }
.dc-app .dc-cs-hiw-jr2__thumbs img { width: 100%; height: 66px; object-fit: cover; display: block; }
.dc-app .dc-cs-hiw-jr2__kv { display: flex; gap: 8px; margin-top: 9px; font-size: 11.5px; line-height: 1.35; }
.dc-app .dc-cs-hiw-jr2__kv span { flex: 0 0 62px; font-weight: 800; color: #9250F2; }
.dc-app .dc-cs-hiw-jr2__kv b { color: #2b2540; font-weight: 600; }
.dc-app .dc-cs-hiw-jr2__rev { margin-top: 11px; background: #f6f4fb; border-radius: 11px; padding: 10px 12px; }
.dc-app .dc-cs-hiw-jr2__rev p { margin: 5px 0 0; font-size: 11.5px; line-height: 1.4; color: #2b2540; }
.dc-app .dc-cs-hiw-jr2__rev .dc-cs-hiw-jr2__stars em { font-style: normal; color: #250651; }
.dc-app .dc-cs-hiw-jr2__map { margin-top: 11px; border-radius: 11px; overflow: hidden; height: 100px; }
.dc-app .dc-cs-hiw-jr2__map img { width: 100%; height: auto; object-fit: cover; object-position: top; display: block; }

/* ── Storefront Studio tag list (non-button) + section CTAs ────────── */
.dc-app .dc-cs-hiw-studio__taglist { display: flex; flex-wrap: wrap; align-items: center; margin-top: 20px; }
.dc-app .dc-cs-hiw-studio__taglist span { font-size: 14px; font-weight: 700; color: #5a4d76; }
.dc-app .dc-cs-hiw-studio__taglist span:not(:last-child)::after { content: "·"; margin: 0 11px; color: #c3a9ee; }
.dc-app .dc-cs-hiw-secta { margin-top: 40px; text-align: center; }
.dc-app .dc-cs-hiw-secta--start { text-align: left; margin-top: 24px; }
.dc-app .dc-cs-hiw-secta--light .dc-inline-cta { color: #85ECFF; }
@media (max-width: 900px) { .dc-app .dc-cs-hiw-en2__call::before, .dc-app .dc-cs-hiw-en2__call::after { display: none; } }

/* ── Platform logo wall (dark) + channels line ─────────────────────── */
.dc-app .dc-cs-hiw-platform__wall { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 30px 44px; margin: 36px 0 0; }
.dc-app .dc-cs-hiw-platform__logo { height: 30px; width: auto; max-width: 160px; object-fit: contain; opacity: .92; }
.dc-app .dc-cs-hiw-platform__channels { margin: 26px 0 0; font-size: 14.5px; color: #b9a9e0; }
@media (max-width: 600px) { .dc-app .dc-cs-hiw-platform__wall { gap: 22px 30px; } .dc-app .dc-cs-hiw-platform__logo { height: 24px; } }

/* ==================================================================== *
 * PAGE 3 — ACP+/UCP+ (protocols).  All classes dc-cs-acp-*.            *
 * Reuses the visual vocabulary of Page 2 (dark immersive sections,     *
 * gradient emphasis word, centered section heads, pill CTAs).          *
 * ==================================================================== */
.dc-app.dc-cs-acp { --dc-nav-h: 116px; }
.dc-app .dc-cs-acp-grad {
  background-image: linear-gradient(110deg,#67E1F7 0%,#5612BD 35%,#9250F2 70%,#67E1F7 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* shared section heads */
.dc-app .dc-cs-acp-head { max-width: 780px; margin: 0 auto 44px; text-align: center; }
.dc-app .dc-cs-acp-head .dc-eyebrow { justify-content: center; }
.dc-app .dc-cs-acp-h2 { margin: 14px 0 0; font-weight: 800; letter-spacing: -.022em; line-height: 1.06; font-size: clamp(27px, 3.9vw, 52px); color: #100D0C; }
.dc-app .dc-cs-acp-sub { margin: 16px 0 0; font-size: clamp(16px, 1.7vw, 19px); line-height: 1.55; color: #250651; }
.dc-app .dc-cs-acp-head--light .dc-cs-acp-h2 { color: #fff; }
.dc-app .dc-cs-acp-head--light .dc-cs-acp-sub { color: #c9bce8; }
.dc-app .dc-cs-acp-secta { margin-top: 40px; text-align: center; }

/* ── 1 · HERO ──────────────────────────────────────────────────────── */
.dc-app .dc-cs-acp-hero { position: relative; overflow: hidden; padding: calc(var(--dc-nav-h,116px) + 96px) 0 112px; background: linear-gradient(180deg,#FBF8FF 0%,#F9F5FF 100%); }
.dc-app .dc-cs-acp-hero > .dc-container { position: relative; z-index: 2; }
.dc-app .dc-cs-acp-hero__blur { position: absolute; z-index: 1; top: -180px; left: 50%; transform: translateX(-50%); width: 920px; height: 720px; pointer-events: none; background: radial-gradient(circle at 50% 40%, rgba(182,149,255,.30), rgba(182,149,255,0) 62%); filter: blur(40px); }
.dc-app .dc-cs-acp-hero__copy { max-width: 860px; }
.dc-app .dc-cs-acp-hero__h1 { margin: 18px 0 0; font-weight: 800; letter-spacing: -.03em; line-height: 1.02; font-size: clamp(40px, 7vw, 84px); color: #100D0C; }
.dc-app .dc-cs-acp-hero__sub { margin: 24px 0 0; max-width: 700px; font-size: clamp(17px, 2vw, 20px); line-height: 1.55; color: #250651; }
.dc-app .dc-cs-acp-hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* ── 2 · WHAT ACP & UCP ARE ────────────────────────────────────────── */
.dc-app .dc-cs-acp-defs { padding: 104px 0; background: #fff; }
.dc-app .dc-cs-acp-defs__rows { max-width: 920px; margin: 0 auto; }
.dc-app .dc-cs-acp-defs__row { display: grid; grid-template-columns: 200px 1fr; gap: 24px 40px; align-items: start; padding: 34px 0; border-top: 1px solid #ece3fa; }
.dc-app .dc-cs-acp-defs__row:first-child { border-top: 0; }
.dc-app .dc-cs-acp-defs__abbr { font-weight: 800; font-size: clamp(30px,4vw,46px); letter-spacing: -.02em; line-height: 1; }
.dc-app .dc-cs-acp-defs__name { margin: 0; font-weight: 800; font-size: clamp(19px,2.1vw,24px); letter-spacing: -.012em; color: #100D0C; }
.dc-app .dc-cs-acp-defs__rc p { margin: 10px 0 0; font-size: 16.5px; line-height: 1.55; color: #3a2d63; max-width: 560px; }

/* ── 3 · RAILS VS TRAIN — centerpiece ──────────────────────────────── */
.dc-app .dc-cs-acp-rails { position: relative; overflow: hidden; background: #0E0125; padding: 104px 0 108px; }
.dc-app .dc-cs-acp-rails__glow { position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(620px 420px at 20% 16%, rgba(86,18,189,.42), transparent 70%),
  radial-gradient(620px 460px at 84% 86%, rgba(103,225,247,.22), transparent 70%); }
.dc-app .dc-cs-acp-rails > .dc-container { position: relative; z-index: 2; }
.dc-app .dc-cs-acp-rails__head { max-width: 800px; margin: 0 auto 8px; text-align: center; }
.dc-app .dc-cs-acp-rails__head .dc-eyebrow { justify-content: center; }
.dc-app .dc-cs-acp-rails__h2 { margin: 14px 0 0; font-weight: 800; letter-spacing: -.022em; line-height: 1.05; font-size: clamp(27px, 3.9vw, 52px); color: #fff; }
.dc-app .dc-cs-acp-rails__sub { margin: 16px auto 0; max-width: 680px; font-size: clamp(16px, 1.7vw, 19px); line-height: 1.55; color: #c9bce8; }
.dc-app .dc-cs-acp-rails__scene { position: relative; max-width: 1000px; margin: 28px auto 0; }
.dc-app .dc-cs-acp-rails__art { display: block; width: 100%; height: auto; overflow: visible; }

/* ── rails-vs-train distribution stage (sources → train → every LLM) ── */
.dc-app .dc-cs-acp-rails2 { position: relative; aspect-ratio: 1000 / 540; max-width: 1000px; margin: 0 auto; }
.dc-app .dc-cs-acp-rails2__wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dc-app .dc-cs-acp-rails2__feed { stroke: rgba(150,120,255,.5); stroke-width: 1.5; stroke-dasharray: 3 6; }
.dc-app .dc-cs-acp-rails2__rail { stroke: rgba(133,236,255,.6); stroke-width: 2; }
.dc-app .dc-cs-acp-rails2__rail--c { stroke: rgba(146,80,242,.65); }
.dc-app .dc-cs-acp-rails2__fpkt { fill: #b79bf0; animation: dcRail2Feed 3s linear infinite; }
.dc-app .dc-cs-acp-rails2__trainglow { fill: #67E1F7; opacity: .3; }
.dc-app .dc-cs-acp-rails2__trainbody { fill: #85ECFF; }
.dc-app .dc-cs-acp-rails2__train { animation: dcRail2Run 2.9s ease-in-out infinite; }
@keyframes dcRail2Feed { 0% { offset-distance: 0%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@keyframes dcRail2Run { 0% { offset-distance: 0%; opacity: 0; } 10% { opacity: 1; } 88% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
.dc-app .dc-cs-acp-rails2__col { display: contents; }
.dc-app .dc-cs-acp-rails2__node { position: absolute; transform: translate(-50%, -50%); z-index: 2; }
.dc-app .dc-cs-acp-rails2__node--src { font-weight: 800; font-size: 13px; color: #e4dcf7; background: rgba(150,120,255,.14); border: 1px solid rgba(150,120,255,.42); border-radius: 11px; padding: 9px 14px; white-space: nowrap; }
.dc-app .dc-cs-acp-rails2__node--dest { display: flex; flex-direction: column; align-items: center; gap: 6px; background: rgba(30,8,66,.78); border: 1px solid rgba(133,236,255,.4); border-radius: 13px; padding: 11px 16px; box-shadow: 0 14px 36px -16px rgba(0,0,0,.7); }
.dc-app .dc-cs-acp-rails2__node--dest img { height: 19px; width: auto; display: block; }
.dc-app .dc-cs-acp-rails2__node--dest span { font-weight: 800; font-size: 11.5px; color: #e4dcf7; }
.dc-app .dc-cs-acp-rails2__core { position: absolute; transform: translate(-50%, -50%); z-index: 3; width: clamp(150px, 19vw, 196px); display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; padding: 20px 16px; border-radius: 20px; background: linear-gradient(160deg, rgba(133,236,255,.16), rgba(86,18,189,.34)); border: 1.5px solid rgba(133,236,255,.6); box-shadow: 0 0 70px -14px rgba(133,236,255,.55); }
.dc-app .dc-cs-acp-rails2__corev { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: rgba(133,236,255,.14); border: 1px solid rgba(133,236,255,.5); }
.dc-app .dc-cs-acp-rails2__core b { font-weight: 800; font-size: clamp(13px, 1.5vw, 15.5px); color: #fff; line-height: 1.15; }
.dc-app .dc-cs-acp-rails2__coretag { font-weight: 800; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #85ECFF; }
.dc-app .dc-cs-acp-rails2__railtag { position: absolute; left: 71%; top: 8%; transform: translate(-50%, -50%); z-index: 2; font-weight: 800; font-size: 11px; letter-spacing: .03em; color: #d7ccf2; background: rgba(146,80,242,.18); border: 1px solid rgba(146,80,242,.45); border-radius: 999px; padding: 6px 13px; white-space: nowrap; }
.dc-app .dc-cs-acp-rails2__sidelbl { position: absolute; top: 1%; z-index: 2; font-weight: 800; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #9a8fc4; }
@media (prefers-reduced-motion: reduce) {
  .dc-app .dc-cs-acp-rails2__fpkt { animation: none; offset-distance: 55%; }
  .dc-app .dc-cs-acp-rails2__train { animation: none; offset-distance: 70%; }
}
/* stacked flow on small screens (no wires) */
@media (max-width: 720px) {
  .dc-app .dc-cs-acp-rails2 { aspect-ratio: auto; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 6px 0; }
  .dc-app .dc-cs-acp-rails2__wires, .dc-app .dc-cs-acp-rails2__railtag { display: none; }
  .dc-app .dc-cs-acp-rails2__col { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; max-width: 460px; }
  .dc-app .dc-cs-acp-rails2__node, .dc-app .dc-cs-acp-rails2__core { position: static; transform: none; }
  .dc-app .dc-cs-acp-rails2__sidelbl { position: static; width: 100%; text-align: center; }
  .dc-app .dc-cs-acp-rails2__col--dest::before, .dc-app .dc-cs-acp-rails2__core::before { content: "\2193"; display: block; width: 100%; text-align: center; color: #85ECFF; font-size: 18px; margin: 2px 0; }
}
/* caption row below the scene (rails | train) */
.dc-app .dc-cs-acp-rails__caps { max-width: 900px; margin: 18px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 24px 56px; }
.dc-app .dc-cs-acp-rails__cap { padding-left: 16px; border-left: 2px solid rgba(133,236,255,.5); }
.dc-app .dc-cs-acp-rails__lname { font-weight: 800; font-size: 17px; letter-spacing: -.01em; color: #85ECFF; }
.dc-app .dc-cs-acp-rails__ldesc { margin-top: 8px; font-size: 15px; line-height: 1.5; color: #c9bce8; }

/* ── 4 · THE PLUS ──────────────────────────────────────────────────── */
.dc-app .dc-cs-acp-plus { padding: 104px 0; background: #F9F5FF; }
.dc-app .dc-cs-acp-plus__points { list-style: none; margin: 0 auto; padding: 0; max-width: 760px; display: grid; gap: 14px; }
.dc-app .dc-cs-acp-plus__points li { display: flex; align-items: flex-start; gap: 12px; background: #fff; border: 1px solid #ece3fa; border-radius: 16px; padding: 18px 22px; font-size: 16.5px; line-height: 1.5; color: #2c2153; box-shadow: 0 14px 40px -30px rgba(86,18,189,.22); }
.dc-app .dc-cs-acp-plus__points li .dc-spark { flex: 0 0 auto; margin-top: 5px; }

/* ── 5 · WHERE IT SURFACES ─────────────────────────────────────────── */
.dc-app .dc-cs-acp-surf { position: relative; overflow: hidden; background: #0E0125; padding: 104px 0; }
.dc-app .dc-cs-acp-surf__glow { position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(560px 420px at 80% 14%, rgba(86,18,189,.40), transparent 70%),
  radial-gradient(560px 420px at 16% 88%, rgba(103,225,247,.18), transparent 70%); }
.dc-app .dc-cs-acp-surf > .dc-container { position: relative; z-index: 2; }
.dc-app .dc-cs-acp-surf__grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; max-width: 900px; margin: 0 auto; }
.dc-app .dc-cs-acp-surf__card { background: rgba(255,255,255,.04); border: 1px solid rgba(183,155,240,.28); border-radius: 20px; padding: 24px 26px; }
.dc-app .dc-cs-acp-surf__card--geo { border-color: rgba(133,236,255,.45); background: rgba(103,225,247,.07); }
.dc-app .dc-cs-acp-surf__abbr { display: inline-block; font-weight: 800; font-size: 13.5px; letter-spacing: .02em; color: #85ECFF; }
.dc-app .dc-cs-acp-surf__card p { margin: 10px 0 0; font-size: 15.5px; line-height: 1.5; color: #c9bce8; }
.dc-app .dc-cs-acp-surf__wall { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 30px 44px; margin: 44px 0 0; }
.dc-app .dc-cs-acp-surf__logo { height: 30px; width: auto; max-width: 160px; object-fit: contain; opacity: .92; }
.dc-app .dc-cs-acp-surf__note { margin: 24px 0 0; text-align: center; font-size: 14.5px; color: #b9a9e0; }

/* ── 6 · FUNNEL POSITION ───────────────────────────────────────────── */
.dc-app .dc-cs-acp-fun { padding: 104px 0; background: #fff; }
.dc-app .dc-cs-acp-fun__layout { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 40px 56px; align-items: center; max-width: 980px; margin: 0 auto; }
.dc-app .dc-cs-acp-fun__viz { display: flex; justify-content: center; }
.dc-app .dc-cs-acp-fun__art { width: 100%; max-width: 380px; height: auto; filter: drop-shadow(0 20px 44px rgba(86,18,189,.18)); }
.dc-app .dc-cs-acp-fun__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.dc-app .dc-cs-acp-fun__item { padding: 18px 22px; border-radius: 16px; background: #faf7ff; border: 1px solid #efe8fa; }
.dc-app .dc-cs-acp-fun__item.is-on { background: linear-gradient(120deg, rgba(103,225,247,.10), rgba(86,18,189,.07)); border-color: #cdb6f6; }
.dc-app .dc-cs-acp-fun__tag { display: block; font-weight: 800; font-size: 15px; letter-spacing: -.005em; color: #8a8499; }
.dc-app .dc-cs-acp-fun__item.is-on .dc-cs-acp-fun__tag { color: #5612BD; }
.dc-app .dc-cs-acp-fun__item p { margin: 7px 0 0; font-size: 15.5px; line-height: 1.5; color: #3a2d63; }

/* ── 7 · SEO → GEO → BRANDSTORE LADDER ─────────────────────────────── */
.dc-app .dc-cs-acp-ladder { position: relative; overflow: hidden; background: #0E0125; padding: 104px 0; }
.dc-app .dc-cs-acp-ladder__glow { position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(620px 460px at 18% 20%, rgba(86,18,189,.40), transparent 70%),
  radial-gradient(560px 420px at 86% 84%, rgba(103,225,247,.20), transparent 70%); }
.dc-app .dc-cs-acp-ladder > .dc-container { position: relative; z-index: 2; }
.dc-app .dc-cs-acp-ladder__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; max-width: 820px; margin: 0 auto; }
.dc-app .dc-cs-acp-ladder__step { border: 1px solid rgba(183,155,240,.28); border-radius: 22px; padding: 26px 28px; background: rgba(255,255,255,.03); }
.dc-app .dc-cs-acp-ladder__step:nth-child(2) { margin-left: 5%; }
.dc-app .dc-cs-acp-ladder__step:nth-child(3) { margin-left: 10%; }
.dc-app .dc-cs-acp-ladder__step--bs { border-color: rgba(133,236,255,.5); background: linear-gradient(120deg, rgba(103,225,247,.10), rgba(86,18,189,.12)); }
.dc-app .dc-cs-acp-ladder__era { font-weight: 800; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #9c84e0; }
.dc-app .dc-cs-acp-ladder__name { margin: 8px 0 0; font-weight: 800; font-size: clamp(19px,2.2vw,26px); letter-spacing: -.015em; color: #fff; }
.dc-app .dc-cs-acp-ladder__step--bs .dc-cs-acp-ladder__name { color: #85ECFF; }
.dc-app .dc-cs-acp-ladder__step p { margin: 10px 0 0; font-size: 15.5px; line-height: 1.5; color: #c9bce8; }
.dc-app .dc-cs-acp-ladder__note { margin: 28px auto 0; max-width: 760px; text-align: center; font-size: 15px; line-height: 1.55; color: #b9a9e0; }

/* ── 8 · GO DEEPER ─────────────────────────────────────────────────── */
.dc-app .dc-cs-acp-deep { padding: 104px 0; background: #fff; }
.dc-app .dc-cs-acp-deep__grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 22px; }
.dc-app .dc-cs-acp-deep__card { display: block; text-decoration: none; background: #F9F5FF; border: 1px solid #ece3fa; border-radius: 24px; padding: 32px 32px 28px; box-shadow: 0 14px 40px -26px rgba(86,18,189,.22); transition: transform .25s ease, box-shadow .25s ease; }
.dc-app .dc-cs-acp-deep__card:hover { transform: translateY(-4px); box-shadow: 0 28px 60px -28px rgba(86,18,189,.34); }
.dc-app .dc-cs-acp-deep__kick { font-weight: 800; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #5612BD; }
.dc-app .dc-cs-acp-deep__title { margin: 8px 0 0; font-weight: 800; font-size: clamp(20px,2.3vw,28px); letter-spacing: -.015em; color: #100D0C; }
.dc-app .dc-cs-acp-deep__card p { margin: 10px 0 0; font-size: 16px; line-height: 1.5; color: #3a2d63; }
.dc-app .dc-cs-acp-deep__go { display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; font-weight: 700; font-size: 15px; color: #5612BD; }

/* ── 10 · FINAL CTA ────────────────────────────────────────────────── */
.dc-app .dc-cs-acp-final { position: relative; overflow: hidden; background: #0E0125; padding: 104px 0; text-align: center; }
.dc-app .dc-cs-acp-final__glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(620px 420px at 50% 40%, rgba(103,225,247,.22), transparent 70%), radial-gradient(520px 360px at 22% 82%, rgba(86,18,189,.45), transparent 70%); }
.dc-app .dc-cs-acp-final__inner { position: relative; z-index: 2; max-width: 780px; margin: 0 auto; }
.dc-app .dc-cs-acp-final__h2 { font-weight: 800; letter-spacing: -.022em; line-height: 1.06; font-size: clamp(30px,4.4vw,56px); color: #fff; }
.dc-app .dc-cs-acp-final__sub { margin: 18px auto 0; max-width: 560px; font-size: clamp(16px,1.7vw,19px); line-height: 1.55; color: #c9bce8; }
.dc-app .dc-cs-acp-final__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 32px; }

/* ── responsive ────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .dc-app .dc-cs-acp-hero { padding: calc(var(--dc-nav-h,116px) + 48px) 0 72px; }
  .dc-app .dc-cs-acp-defs, .dc-app .dc-cs-acp-plus, .dc-app .dc-cs-acp-surf, .dc-app .dc-cs-acp-fun, .dc-app .dc-cs-acp-ladder, .dc-app .dc-cs-acp-deep, .dc-app .dc-cs-acp-rails, .dc-app .dc-cs-acp-final { padding: 64px 0; }
  .dc-app .dc-cs-acp-surf__grid, .dc-app .dc-cs-acp-deep__grid { grid-template-columns: 1fr; gap: 16px; }
  .dc-app .dc-cs-acp-defs__row { grid-template-columns: 1fr; gap: 6px 0; padding: 26px 0; }
  .dc-app .dc-cs-acp-fun__layout { grid-template-columns: 1fr; gap: 28px; }
  .dc-app .dc-cs-acp-fun__art { max-width: 300px; }
  .dc-app .dc-cs-acp-ladder__step:nth-child(2), .dc-app .dc-cs-acp-ladder__step:nth-child(3) { margin-left: 0; }
  .dc-app .dc-cs-acp-rails__caps { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 600px) {
  .dc-app .dc-cs-acp-surf__wall { gap: 22px 30px; }
  .dc-app .dc-cs-acp-surf__logo { height: 24px; }
}

/* ── Custom-tool recreated chat demos (wide rectangle, on-brand) ───── */
.dc-app .dc-cs-hiw-tool--right .dc-cs-hiw-tool__demo { order: 1; }
.dc-app .dc-cs-hiw-tool__demo { display: flex; justify-content: center; }
.dc-app .dc-cs-hiw-demo { width: 100%; max-width: 540px; background: #fff; border: 1px solid #ece3fa; border-radius: 22px; padding: 22px; box-shadow: 0 26px 62px -34px rgba(86,18,189,.34); }
.dc-app .dc-cs-hiw-demo__ask { display: block; width: fit-content; max-width: 86%; margin-left: auto; background: #f1eefb; color: #250651; font-size: 13.5px; font-weight: 600; line-height: 1.4; padding: 10px 14px; border-radius: 14px 14px 4px 14px; }
.dc-app .dc-cs-hiw-demo__brand { margin: 16px 0 0; font-size: 11px; font-weight: 800; letter-spacing: .2em; color: #100D0C; }
.dc-app .dc-cs-hiw-demo__say { margin: 8px 0 14px; font-size: 13.5px; line-height: 1.45; color: #3f3559; }
/* lookrec */
.dc-app .dc-cs-hiw-demo__looks { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.dc-app .dc-cs-hiw-demo__looks figure { margin: 0; border: 1px solid #eee; border-radius: 13px; overflow: hidden; }
.dc-app .dc-cs-hiw-demo__looks img { width: 100%; height: 152px; object-fit: cover; display: block; }
.dc-app .dc-cs-hiw-demo__looks figcaption { font-size: 11.5px; font-weight: 700; color: #250651; padding: 8px 9px; }
/* quiz */
.dc-app .dc-cs-hiw-demo__quizgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 6px; }
.dc-app .dc-cs-hiw-demo__q { background: #faf7ff; border: 1px solid #efe9fb; border-radius: 14px; padding: 14px; }
.dc-app .dc-cs-hiw-demo__qh { font-size: 12.5px; font-weight: 800; color: #250651; margin-bottom: 8px; }
.dc-app .dc-cs-hiw-demo__opt { display: flex; align-items: center; gap: 9px; padding: 8px 0; border-top: 1px solid #f1ecfa; }
.dc-app .dc-cs-hiw-demo__opt:first-of-type { border-top: 0; }
.dc-app .dc-cs-hiw-demo__odot { width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg,#D7BDFF,#9250F2); flex: 0 0 auto; }
.dc-app .dc-cs-hiw-demo__olbl { flex: 1; font-size: 13px; font-weight: 600; color: #250651; }
.dc-app .dc-cs-hiw-demo__plus { width: 22px; height: 22px; border-radius: 50%; border: 1px solid #d9c4ff; color: #5612BD; display: flex; align-items: center; justify-content: center; font-size: 12px; font-style: normal; font-weight: 800; flex: 0 0 auto; }
.dc-app .dc-cs-hiw-demo__opt.is-on .dc-cs-hiw-demo__plus { background: #5612BD; border-color: #5612BD; color: #fff; }
.dc-app .dc-cs-hiw-demo__shades { display: flex; gap: 10px; justify-content: space-between; }
.dc-app .dc-cs-hiw-demo__shades figure { margin: 0; text-align: center; }
.dc-app .dc-cs-hiw-demo__shades span { display: block; width: 40px; height: 40px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); margin: 0 auto 6px; }
.dc-app .dc-cs-hiw-demo__shades figure.is-on span { box-shadow: 0 0 0 3px #fff, 0 0 0 5px #5612BD; }
.dc-app .dc-cs-hiw-demo__shades figcaption { font-size: 11px; font-weight: 700; color: #6b5a8a; }
.dc-app .dc-cs-hiw-demo__result { margin-top: 14px; font-size: 13px; color: #3f3559; }
.dc-app .dc-cs-hiw-demo__result b { color: #5612BD; }
/* travel */
.dc-app .dc-cs-hiw-demo__guide { margin-top: 6px; font-size: 16px; font-weight: 800; color: #100D0C; }
.dc-app .dc-cs-hiw-demo__tabs { display: flex; gap: 8px; margin: 11px 0 12px; }
.dc-app .dc-cs-hiw-demo__tabs span { font-size: 12px; font-weight: 700; color: #5a4d76; border: 1px solid #e2d4f7; border-radius: 999px; padding: 5px 14px; }
.dc-app .dc-cs-hiw-demo__tabs span.is-on { background: #250651; color: #fff; border-color: #250651; }
.dc-app .dc-cs-hiw-demo__trip { display: grid; gap: 10px; }
.dc-app .dc-cs-hiw-demo__tcard { display: flex; gap: 12px; align-items: center; background: #faf7ff; border: 1px solid #efe9fb; border-radius: 13px; padding: 10px; }
.dc-app .dc-cs-hiw-demo__ttile { flex: 0 0 56px; height: 56px; border-radius: 10px; }
.dc-app .dc-cs-hiw-demo__ttile--a { background: linear-gradient(135deg,#E7C7A2,#C98B5A); }
.dc-app .dc-cs-hiw-demo__ttile--b { background: linear-gradient(135deg,#F0D9B8,#D8A878); }
.dc-app .dc-cs-hiw-demo__tcard b { font-size: 13px; color: #100D0C; }
.dc-app .dc-cs-hiw-demo__tcard p { margin: 3px 0 0; font-size: 11.5px; line-height: 1.35; color: #6b5a8a; }
.dc-app .dc-cs-hiw-demo__flight { display: flex; align-items: center; gap: 7px; margin-top: 12px; font-size: 12.5px; font-weight: 700; color: #250651; }
@media (max-width: 900px) {
  .dc-app .dc-cs-hiw-tool--right .dc-cs-hiw-tool__demo { order: 0; }
  .dc-app .dc-cs-hiw-demo { max-width: 460px; }
}
@media (max-width: 480px) {
  .dc-app .dc-cs-hiw-demo__quizgrid { grid-template-columns: 1fr; }
  .dc-app .dc-cs-hiw-demo__looks img { height: 120px; }
}

/* ── Custom-tool demos: real images (4-up looks, shade faces, food) ─── */
.dc-app .dc-cs-hiw-demo__looks--four { grid-template-columns: repeat(4,1fr); gap: 8px; }
.dc-app .dc-cs-hiw-demo__looks--four img { height: 150px; }
.dc-app .dc-cs-hiw-demo__shades img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; object-position: center top; display: block; margin: 0 auto 6px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.dc-app .dc-cs-hiw-demo__shades figure.is-on img { box-shadow: 0 0 0 3px #fff, 0 0 0 5px #5612BD; }
.dc-app img.dc-cs-hiw-demo__ttile { width: 56px; height: 56px; object-fit: cover; object-position: center; display: block; }

/* ─────────────────────────────────────────────────────────────────────
   Agentic BrandStore — OVERVIEW page (the umbrella hub). dc-cs-ov-*
   ───────────────────────────────────────────────────────────────────── */

/* Hero — small phase rail under the CTAs */
.dc-app .dc-cs-ov-hero__phases {
  display: flex; align-items: center; gap: 12px; margin-top: 30px;
  font-weight: 800; letter-spacing: .02em; color: #5612BD; font-size: 14px;
}
.dc-app .dc-cs-ov-hero__phases i { color: #9250F2; font-style: normal; opacity: .7; }
.dc-app .dc-cs-ov-hero__phases span { text-transform: uppercase; letter-spacing: .14em; font-size: 12px; }

/* Market context — widen to 4 stats */
.dc-app .dc-cs-ov-real .dc-cs-prodx-real__stats { grid-template-columns: repeat(4, 1fr); }
.dc-app .dc-cs-ov-real .dc-cs-prodx-real__num { font-size: clamp(40px, 5.2vw, 72px); }
@media (max-width: 900px) {
  .dc-app .dc-cs-ov-real .dc-cs-prodx-real__stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .dc-app .dc-cs-ov-real .dc-cs-prodx-real__stats { grid-template-columns: 1fr; }
}

/* The three phases — triptych centerpiece */
.dc-app .dc-cs-ov-phases { padding: clamp(70px, 9vw, 130px) 0; background: var(--dc-surface); }
.dc-app .dc-cs-ov-phases__head { text-align: center; max-width: 720px; margin: 0 auto clamp(40px, 5vw, 64px); }
.dc-app .dc-cs-ov-phases__head .dc-cs-prodx-eyebrow,
.dc-app .dc-cs-ov-deeper__head .dc-cs-prodx-eyebrow { text-align: center; }
.dc-app .dc-cs-ov-phases__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.dc-app .dc-cs-ov-phase {
  position: relative; display: flex; flex-direction: column; gap: 12px;
  padding: 34px 28px 28px; border-radius: var(--dc-radius-xl);
  background: #fff; border: 1px solid var(--dc-border-faint);
  box-shadow: var(--dc-shadow-card); color: var(--dc-fg);
  transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease;
  transition-delay: var(--d, 0s);
}
.dc-app a.dc-cs-ov-phase:hover { transform: translateY(-6px); box-shadow: var(--dc-shadow-card-hi); }
.dc-app .dc-cs-ov-phase__step {
  position: absolute; top: 22px; right: 26px; font-weight: 800;
  font-size: 40px; line-height: 1; color: var(--dc-purple-light); opacity: .55; letter-spacing: -.03em;
}
.dc-app .dc-cs-ov-phase__ic { width: 48px; height: 48px; }
.dc-app .dc-cs-ov-phase__ic svg { width: 100%; height: 100%; }
.dc-app .dc-cs-ov-phase__eyebrow {
  display: inline-flex; align-items: center; gap: 7px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .16em; font-size: 12px; color: #5612BD;
}
.dc-app .dc-cs-ov-phase__verb { font-weight: 800; letter-spacing: -.02em; font-size: 26px; color: var(--dc-fg-strong); }
.dc-app .dc-cs-ov-phase__head { font-weight: 800; font-size: 17px; line-height: 1.3; color: var(--dc-fg-strong); }
.dc-app .dc-cs-ov-phase__body { font-size: 15px; line-height: 1.6; color: #5b5570; }
.dc-app .dc-cs-ov-phase__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.dc-app .dc-cs-ov-phase__chip {
  font-weight: 600; font-size: 12px; padding: 5px 11px; border-radius: 999px;
  background: var(--dc-surface-2); color: var(--dc-purple-deep); border: 1px solid var(--dc-border-faint);
}
.dc-app .dc-cs-ov-phase__go {
  margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 7px;
  font-weight: 700; font-size: 15px; color: var(--dc-purple);
}
.dc-app .dc-cs-ov-phase__go svg { transition: transform .3s ease; }
.dc-app a.dc-cs-ov-phase:hover .dc-cs-ov-phase__go svg { transform: translateX(4px); }
@media (max-width: 900px) {
  .dc-app .dc-cs-ov-phases__grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
}

/* The differentiator — Engine teaser with the two-output firewall */
.dc-app .dc-cs-ov-engine { position: relative; overflow: hidden; padding: clamp(70px, 9vw, 130px) 0; background: #fff; }
.dc-app .dc-cs-ov-engine__blur { position: absolute; top: -10%; right: -8%; width: 60%; opacity: .5; pointer-events: none; }
.dc-app .dc-cs-ov-engine__grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.dc-app .dc-cs-ov-engine__copy .dc-inline-cta { margin-top: 22px; }
.dc-app .dc-cs-ov-engine__viz { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
/* inputs row + flow connectors + surfaces (re-sequenced engine diagram) */
.dc-app .dc-cs-ov-engine__ins { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dc-app .dc-cs-ov-engine__in { background: #faf7ff; border: 1px solid #ece3fa; border-radius: 14px; padding: 13px 15px; font-weight: 800; font-size: 14px; color: #100D0C; text-align: center; display: flex; flex-direction: column; gap: 4px; }
.dc-app .dc-cs-ov-engine__in small { font-weight: 600; font-size: 11.5px; color: #6f6883; }
.dc-app .dc-cs-ov-engine__flow { position: relative; height: 28px; }
.dc-app .dc-cs-ov-engine__flow::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 8px; width: 2px; transform: translateX(-50%); background: #cdbcf0; }
.dc-app .dc-cs-ov-engine__flow::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 8px; height: 8px; border-right: 2px solid #cdbcf0; border-bottom: 2px solid #cdbcf0; transform: translateX(-50%) rotate(45deg); }
.dc-app .dc-cs-ov-engine__surf { background: #5612BD; color: #fff; border-radius: 14px; padding: 13px 15px; font-weight: 800; font-size: 15px; text-align: center; display: flex; flex-direction: column; gap: 4px; }
.dc-app .dc-cs-ov-engine__surf small { font-weight: 600; font-size: 11.5px; color: rgba(255,255,255,.82); }
.dc-app .dc-cs-ov-engine__node {
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
  padding: 22px 24px; border-radius: var(--dc-radius-lg);
  background: linear-gradient(135deg, #F3F0FB, #fff);
  border: 1px solid var(--dc-border); box-shadow: var(--dc-shadow-card);
  font-weight: 800; color: var(--dc-fg-strong); font-size: 18px;
}
.dc-app .dc-cs-ov-engine__node small { font-weight: 600; font-size: 12.5px; color: #6f6883; letter-spacing: .01em; }
.dc-app .dc-cs-ov-engine__split {
  width: 2px; height: 36px; margin: 0 auto;
  background: repeating-linear-gradient(#9250F2 0 5px, transparent 5px 11px);
  position: relative;
}
.dc-app .dc-cs-ov-engine__split::before,
.dc-app .dc-cs-ov-engine__split::after {
  content: ""; position: absolute; bottom: 0; width: 38%; height: 2px;
  background: repeating-linear-gradient(90deg, #9250F2 0 5px, transparent 5px 11px);
}
.dc-app .dc-cs-ov-engine__split::before { left: 6%; }
.dc-app .dc-cs-ov-engine__split::after { right: 6%; }
.dc-app .dc-cs-ov-engine__outs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dc-app .dc-cs-ov-engine__out {
  display: flex; flex-direction: column; gap: 5px; padding: 18px 18px 20px;
  border-radius: var(--dc-radius-lg); background: var(--dc-surface);
  border: 1px solid var(--dc-border-faint);
}
.dc-app .dc-cs-ov-engine__out--exp { background: var(--dc-bg-dark); border-color: rgba(150,120,255,.3); }
.dc-app .dc-cs-ov-engine__out-k { font-weight: 800; font-size: 15px; color: var(--dc-fg-strong); }
.dc-app .dc-cs-ov-engine__out--exp .dc-cs-ov-engine__out-k { color: #fff; }
.dc-app .dc-cs-ov-engine__out-tag {
  align-self: flex-start; font-weight: 700; font-size: 11px; letter-spacing: .08em;
  padding: 3px 9px; border-radius: 999px; background: #fff; color: #5612BD; border: 1px solid var(--dc-border);
}
.dc-app .dc-cs-ov-engine__out--exp .dc-cs-ov-engine__out-tag { background: #67E1F7; color: #0E0125; border: none; }
.dc-app .dc-cs-ov-engine__out-d { font-size: 13.5px; line-height: 1.45; color: #5b5570; }
.dc-app .dc-cs-ov-engine__out--exp .dc-cs-ov-engine__out-d { color: rgba(255,255,255,.8); }
.dc-app .dc-cs-ov-engine__out-d b { color: var(--dc-purple); }
.dc-app .dc-cs-ov-engine__out--exp .dc-cs-ov-engine__out-d b { color: #85ECFF; }
@media (max-width: 900px) {
  .dc-app .dc-cs-ov-engine__grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .dc-app .dc-cs-ov-engine__outs { grid-template-columns: 1fr; }
  .dc-app .dc-cs-ov-engine__ins { grid-template-columns: 1fr; }
}

/* Go deeper — 4-card grid (override prodx-deeper's 2-col) */
.dc-app .dc-cs-ov-deeper__head { text-align: center; margin-bottom: clamp(32px, 4vw, 48px); }
.dc-app .dc-cs-ov-deeper__grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 920px; margin: 0 auto;
}
@media (max-width: 700px) { .dc-app .dc-cs-ov-deeper__grid { grid-template-columns: 1fr; } }



/* ─────────────────────────────────────────────────────────────────────
   OVERVIEW — three-act journey (light, titanium, ONE big phone).
   Discovery: chrome cycles ChatGPT→Gemini→Alexa→your site; your brand
   surfaces among other brands. Morph → Experience → Purchase.
   State classes live on .dc-cs-ov-jrn: is-brand, is-surfaced, data-surface.
   ───────────────────────────────────────────────────────────────────── */
/* ── OVERVIEW — non-animated 3-phase value statement (the "what we do" block) ── */
.dc-app .dc-cs-ov-tri { position: relative; background: linear-gradient(180deg,#FBF8FF 0%,#F4EEFF 100%); padding: clamp(64px,9vh,120px) 0; }
.dc-app .dc-cs-ov-tri__head { max-width: 760px; margin: 0 auto clamp(36px,5vh,56px); text-align: center; }
.dc-app .dc-cs-ov-tri__head .dc-cs-prodx-eyebrow,
.dc-app .dc-cs-ov-tri__head .dc-cs-prodx-lead { margin-left: auto; margin-right: auto; }
.dc-app .dc-cs-ov-tri__row { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr); align-items: stretch; gap: 0; max-width: 1140px; margin: 0 auto; }
.dc-app .dc-cs-ov-tri__arrow { display: flex; align-items: center; justify-content: center; color: #c3b2e8; padding: 0 clamp(10px,1.6vw,22px); }
/* Non-clickable info columns — NOT cards (no shadow/fill/button radius). A top
   accent rule signals "informational", so they don't read as clickable. */
.dc-app .dc-cs-ov-tri__card { position: relative; background: transparent; border: none; border-top: 3px solid #d9c6fb; border-radius: 0; padding: 22px 22px 0 0; box-shadow: none; display: flex; flex-direction: column; }
.dc-app .dc-cs-ov-tri__n { font-family: ui-monospace, Menlo, monospace; font-size: 13px; font-weight: 700; color: #b9a8e0; }
.dc-app .dc-cs-ov-tri__label { margin-top: 6px; font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #5612BD; }
.dc-app .dc-cs-ov-tri__verb { margin: 8px 0 0; font-weight: 800; letter-spacing: -.02em; font-size: clamp(24px,2.4vw,32px); color: #100D0C; }
.dc-app .dc-cs-ov-tri__how { margin: 12px 0 0; font-size: 15px; line-height: 1.55; color: #4a4458; flex: 1 1 auto; }
.dc-app .dc-cs-ov-tri__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.dc-app .dc-cs-ov-tri__chip { font-size: 11.5px; font-weight: 700; padding: 5px 11px; border-radius: 999px; background: #f4f1fa; color: #5612BD; border: 1px solid #ece3fa; }
.dc-app .dc-cs-ov-tri__card--experience { border-top-color: #5612BD; border-top-width: 3px; box-shadow: none; }
.dc-app .dc-cs-ov-tri__diagram { max-width: 1040px; margin: 0 auto clamp(40px,6vh,64px); padding: clamp(8px,2vw,20px) 0; }
.dc-app .dc-cs-ov-tri__diagram img { display: block; width: 100%; height: auto; }
@media (max-width: 880px) {
  .dc-app .dc-cs-ov-tri__row { grid-template-columns: 1fr; gap: 14px; max-width: 460px; }
  .dc-app .dc-cs-ov-tri__arrow { transform: rotate(90deg); padding: 2px 0; }
  .dc-app .dc-cs-ov-tri__diagram { margin-bottom: clamp(28px,5vh,40px); }
}

.dc-app .dc-cs-ov-jrn { position: relative; height: 300vh; }
.dc-app .dc-cs-ov-jrn__sticky {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  background: linear-gradient(180deg, #FBF8FF 0%, #F4EEFF 52%, #FBF8FF 100%);
}
.dc-app .dc-cs-ov-jrn__blur { position: absolute; pointer-events: none; opacity: .5; z-index: 0; }
.dc-app .dc-cs-ov-jrn__blur--a { top: -12%; left: -6%; width: 46%; }
.dc-app .dc-cs-ov-jrn__blur--b { bottom: -16%; right: -8%; width: 52%; }
.dc-app .dc-cs-ov-jrn__grid {
  position: relative; z-index: 2; height: 100%;
  display: grid; grid-template-columns: 340px minmax(0, 1fr); align-items: center;
  gap: clamp(24px, 4vw, 64px); padding-top: var(--dc-nav-h, 116px);
}

/* Narration */
.dc-app .dc-cs-ov-jrn__kicker { display: inline-flex; align-items: center; gap: 8px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .18em; font-size: 12px; color: #5612BD; margin: 0 0 22px; }
.dc-app .dc-cs-ov-jrn__narrs { position: relative; min-height: 330px; margin-bottom: 8px; }
.dc-app .dc-cs-ov-jrn__narr { position: absolute; inset: 0; opacity: 0; transform: translateY(16px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.2,1); pointer-events: none; }
.dc-app .dc-cs-ov-jrn__narr.is-on { opacity: 1; transform: none; pointer-events: auto; }
.dc-app .dc-cs-ov-jrn__narr-step { display: inline-block; font-weight: 800; font-size: 13px; letter-spacing: .1em; color: #9250F2; margin-bottom: 10px; }
.dc-app .dc-cs-ov-jrn__narr-eyebrow { display: block; font-weight: 800; text-transform: uppercase; letter-spacing: .16em; font-size: 12px; color: #5612BD; margin-bottom: 6px; }
.dc-app .dc-cs-ov-jrn__narr-verb { display: block; font-weight: 800; letter-spacing: -.025em; font-size: clamp(32px, 3.6vw, 50px); line-height: 1.04; color: #100D0C; }
.dc-app .dc-cs-ov-jrn__narr-body { margin: 14px 0 0; font-size: clamp(15px, 1.1vw, 18px); line-height: 1.58; color: #4a4458; max-width: 340px; }
.dc-app .dc-cs-ov-jrn__narr-point { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 16px; padding: 11px 14px;
  font-size: 13px; font-weight: 700; line-height: 1.4; color: #3a2b5e; background: #fff;
  border: 1px solid var(--dc-border); border-radius: 12px; max-width: 340px; box-shadow: var(--dc-shadow-card); }
.dc-app .dc-cs-ov-jrn__narr-point svg { flex: 0 0 auto; margin-top: 2px; }
.dc-app .dc-cs-ov-jrn__narr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dc-app .dc-cs-ov-jrn__narr-chip { font-weight: 700; font-size: 12px; padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--dc-border); color: #5612BD; }
.dc-app .dc-cs-ov-jrn__rail { display: flex; gap: 22px; margin-top: 30px; }
.dc-app .dc-cs-ov-jrn__rail-dot { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 12px; color: #a79fbb; transition: color .4s ease; }
.dc-app .dc-cs-ov-jrn__rail-dot i { width: 9px; height: 9px; border-radius: 50%; background: #d7cdef; transition: background .4s ease, box-shadow .4s ease, transform .4s ease; }
.dc-app .dc-cs-ov-jrn__rail-dot.is-on { color: #5612BD; }
.dc-app .dc-cs-ov-jrn__rail-dot.is-on i { background: #5612BD; }
.dc-app .dc-cs-ov-jrn__rail-dot.is-cur i { transform: scale(1.3); box-shadow: 0 0 0 5px rgba(86,18,189,.14); }

/* Stage — one big phone, centered, the hero */
.dc-app .dc-cs-ov-jrn__stage { position: relative; height: min(80vh, 720px); display: flex; align-items: center; justify-content: center; }
/* width derived from available HEIGHT so the phone never elongates past the stage */
.dc-app .dc-cs-ov-jrn__ph { width: clamp(320px, calc((100vh - var(--dc-nav-h, 116px) - 80px) * 320 / 640), 404px); }
.dc-app .dc-cs-ov-jrn__ph .dc-cs-hiw-ph__screen { padding: 0; aspect-ratio: 320 / 640; display: flex; flex-direction: column; }
.dc-app .dc-cs-ov-jrn__ph--main { transform: scale(.99); transition: transform .7s cubic-bezier(.5,.05,.2,1); }
.dc-app .dc-cs-ov-jrn.is-brand .dc-cs-ov-jrn__ph--main { transform: scale(1.04); }

/* ── Morphing chrome — surface headers cycle; brand header on morph ── */
.dc-app .dc-cs-ov-jrn__hdr { position: relative; height: 42px; flex: 0 0 auto; margin-top: 6px; border-bottom: 1px solid #efeaf7; }
.dc-app .dc-cs-ov-jrn__hdr-srf, .dc-app .dc-cs-ov-jrn__hdr-brand {
  position: absolute; inset: 0; display: flex; align-items: center; gap: 8px; padding: 0 16px;
  opacity: 0; transition: opacity .45s ease; pointer-events: none;
}
/* show the active surface chrome (only while NOT branded) */
.dc-app .dc-cs-ov-jrn:not(.is-brand)[data-surface="chatgpt"] .dc-cs-ov-jrn__hdr-chatgpt,
.dc-app .dc-cs-ov-jrn:not(.is-brand)[data-surface="gemini"]  .dc-cs-ov-jrn__hdr-gemini,
.dc-app .dc-cs-ov-jrn:not(.is-brand)[data-surface="alexa"]   .dc-cs-ov-jrn__hdr-alexa,
.dc-app .dc-cs-ov-jrn:not(.is-brand)[data-surface="site"]    .dc-cs-ov-jrn__hdr-site { opacity: 1; }
.dc-app .dc-cs-ov-jrn.is-brand .dc-cs-ov-jrn__hdr-brand { opacity: 1; }
.dc-app .dc-cs-ov-jrn__hdr-burger { font-size: 16px; color: #6a6577; }
.dc-app .dc-cs-ov-jrn__hdr-spark { color: #4285F4; font-size: 14px; }
.dc-app .dc-cs-ov-jrn__hdr-llmname { font-weight: 800; font-size: 14px; color: #100D0C; }
.dc-app .dc-cs-ov-jrn__hdr-llmname i { color: #9a93ab; font-style: normal; }
.dc-app .dc-cs-ov-jrn__hdr-dots { margin-left: auto; color: #9a93ab; font-weight: 800; }
.dc-app .dc-cs-ov-jrn__hdr-alexatx { font-size: 13.5px; color: #232F3E; font-weight: 600; }
.dc-app .dc-cs-ov-jrn__hdr-alexatx b { color: #00CAFF; font-weight: 800; }
.dc-app .dc-cs-ov-jrn__hdr-back { font-size: 18px; color: #6a6577; }
.dc-app .dc-cs-ov-jrn__hdr-url { font-size: 12.5px; font-weight: 700; color: #100D0C; background: #f1eef8; border-radius: 8px; padding: 4px 12px; }
.dc-app .dc-cs-ov-jrn__hdr-stylist { margin-left: auto; font-size: 10px; font-weight: 700; color: #5612BD; background: #F3F0FB; border-radius: 999px; padding: 3px 9px; }
.dc-app .dc-cs-ov-jrn__hdr-wordmark { font-weight: 800; letter-spacing: .24em; font-size: 15px; color: #243A5E; }
.dc-app .dc-cs-ov-jrn__hdr-tag { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #5612BD; background: #F3F0FB; border-radius: 999px; padding: 3px 8px; }
.dc-app .dc-cs-ov-jrn__hdr-x { margin-left: auto; color: #9a93ab; font-size: 17px; }

/* Screens (cross-faded) */
.dc-app .dc-cs-ov-jrn__screens { position: relative; flex: 1 1 auto; overflow: hidden; }
.dc-app .dc-cs-ov-jrn__screen { position: absolute; inset: 0; padding: 14px 15px 16px; overflow: hidden;
  display: flex; flex-direction: column;
  opacity: 0; transform: translateY(12px) scale(.99); transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.2,1); pointer-events: none; }
.dc-app .dc-cs-ov-jrn__screen.is-on { opacity: 1; transform: none; pointer-events: auto; }

.dc-app .dc-cs-ov-jrn__msg { font-size: 13px; line-height: 1.44; border-radius: 14px; padding: 9px 12px; margin: 0 0 9px; max-width: 94%; }
.dc-app .dc-cs-ov-jrn__msg--user { background: #efeaf7; color: #250651; margin-left: auto; }
.dc-app .dc-cs-ov-jrn__msg--ai { background: #f6f4fb; color: #3a3450; }

/* Discovery tiles. One grid per screen: generic screen = 2 tiles (natural 3:4,
   packed top, whitespace below is fine); surfaced screen = 2 of YOUR tiles
   (large 3:4 hero images) + 2 smaller other-brand tiles. Never stretched. */
.dc-app .dc-cs-ov-jrn__tilegrid { flex: 1 1 auto; min-height: 0; display: grid; gap: 9px; align-content: start; margin: 4px 0 10px; }
.dc-app .dc-cs-ov-jrn__tilegrid--generic { grid-template-columns: 1fr 1fr; }
.dc-app .dc-cs-ov-jrn__tilegrid--surfaced { grid-template-columns: 1fr 1fr; }
.dc-app .dc-cs-ov-jrn__tile { position: relative; display: flex; flex-direction: column; border: 1px solid #e9e3f5; border-radius: 13px; overflow: hidden; background: #fff; }
.dc-app .dc-cs-ov-jrn__tile-img { overflow: hidden; }
.dc-app .dc-cs-ov-jrn__tile-img img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.dc-app .dc-cs-ov-jrn__tile-body { flex: 0 0 auto; padding: 7px 9px 9px; }
.dc-app .dc-cs-ov-jrn__tile-body b { display: block; font-size: 11.5px; color: #100D0C; line-height: 1.2; }
.dc-app .dc-cs-ov-jrn__tile-body span { font-size: 10px; color: #8a839a; }
.dc-app .dc-cs-ov-jrn__tile--generic { opacity: .82; }
.dc-app .dc-cs-ov-jrn__tile--brand { border-color: #b98bff; box-shadow: 0 0 0 1px #d7bdff, 0 12px 26px -16px rgba(86,18,189,.5); }
/* tile image proportions — natural, never stretched */
.dc-app .dc-cs-ov-jrn__tilegrid--generic .dc-cs-ov-jrn__tile-img { aspect-ratio: 3 / 4; }
/* Surfaced screen: YOUR tiles are the hero — image fills the tile, caption
   overlays the bottom so the product imagery dominates (not the text). */
.dc-app .dc-cs-ov-jrn__tilegrid--surfaced .dc-cs-ov-jrn__tile--brand .dc-cs-ov-jrn__tile-img { aspect-ratio: 4 / 5; }
.dc-app .dc-cs-ov-jrn__tilegrid--surfaced .dc-cs-ov-jrn__tile--brand .dc-cs-ov-jrn__tile-body {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 10px 8px;
  background: linear-gradient(to top, rgba(16,13,12,.86) 22%, rgba(16,13,12,0)); }
.dc-app .dc-cs-ov-jrn__tilegrid--surfaced .dc-cs-ov-jrn__tile--brand .dc-cs-ov-jrn__tile-body b { color: #fff; font-size: 12px; }
.dc-app .dc-cs-ov-jrn__tilegrid--surfaced .dc-cs-ov-jrn__tile--brand .dc-cs-ov-jrn__tile-body span { color: rgba(255,255,255,.82); }
/* other-brand tiles stay small and quiet */
.dc-app .dc-cs-ov-jrn__tilegrid--surfaced .dc-cs-ov-jrn__tile--generic .dc-cs-ov-jrn__tile-img { aspect-ratio: 16 / 10; }
.dc-app .dc-cs-ov-jrn__tilegrid--surfaced .dc-cs-ov-jrn__tile--generic .dc-cs-ov-jrn__tile-body { padding: 5px 8px 7px; }
.dc-app .dc-cs-ov-jrn__tilegrid--surfaced .dc-cs-ov-jrn__tile--generic .dc-cs-ov-jrn__tile-body b { font-size: 10px; }
.dc-app .dc-cs-ov-jrn__tile-badge { position: absolute; top: 7px; left: 7px; z-index: 2; display: inline-flex; align-items: center; gap: 4px;
  font-weight: 800; font-size: 9.5px; letter-spacing: .02em; color: #250651; background: #85ECFF; border-radius: 999px; padding: 3px 8px;
  box-shadow: 0 6px 16px -6px rgba(86,18,189,.5); }
/* discovery footnotes — generic shows the "not here yet" note; surfaced shows the deeplink */
.dc-app .dc-cs-ov-jrn__missnote { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; color: #9a93ab; }
.dc-app .dc-cs-ov-jrn__missnote span { color: #c9bfe0; font-size: 13px; }
.dc-app .dc-cs-ov-jrn__deeplink { display: none; align-items: center; justify-content: center; gap: 7px; font-weight: 800; font-size: 12.5px;
  color: #250651; background: #85ECFF; border-radius: 12px; padding: 11px; }
.dc-app .dc-cs-ov-jrn.is-surfaced .dc-cs-ov-jrn__missnote { display: none; }
.dc-app .dc-cs-ov-jrn.is-surfaced .dc-cs-ov-jrn__deeplink { display: flex; }

/* Tiny "live · in chat" caption at the foot of the phone (discovery only) */
.dc-app .dc-cs-ov-jrn__srfcap { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 5px;
  height: 18px; margin: 4px 0 2px; font-weight: 700; font-size: 9.5px; letter-spacing: .04em; text-transform: uppercase;
  color: #9a93ab; opacity: 0; transition: opacity .4s ease; }
.dc-app .dc-cs-ov-jrn:not(.is-brand) .dc-cs-ov-jrn__srfcap { opacity: 1; }
.dc-app .dc-cs-ov-jrn__srfcap-dot { width: 6px; height: 6px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,.16); }

/* Experience */
.dc-app .dc-cs-ov-jrn__hero { position: relative; border-radius: 14px; overflow: hidden; margin-bottom: 10px; aspect-ratio: 16/10; }
.dc-app .dc-cs-ov-jrn__hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dc-app .dc-cs-ov-jrn__hero-cap { position: absolute; left: 12px; bottom: 10px; color: #fff; font-weight: 800; font-size: 16px; text-shadow: 0 2px 12px rgba(0,0,0,.5); }
.dc-app .dc-cs-ov-jrn__hero-cap span { display: block; font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: #85ECFF; margin-bottom: 2px; }
.dc-app .dc-cs-ov-jrn__looks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 10px; }
.dc-app .dc-cs-ov-jrn__look { border-radius: 12px; overflow: hidden; position: relative; }
.dc-app .dc-cs-ov-jrn__look img { width: 100%; aspect-ratio: 3/4; object-fit: cover; object-position: center top; display: block; }
.dc-app .dc-cs-ov-jrn__look span { position: absolute; left: 7px; bottom: 6px; font-size: 10px; font-weight: 700; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.dc-app .dc-cs-ov-jrn__tool { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 11.5px; color: #5612BD; border: 1px solid #d7bdff; border-radius: 999px; padding: 7px 13px; }

/* Purchase */
.dc-app .dc-cs-ov-jrn__pdp { display: flex; gap: 11px; margin-bottom: 11px; }
.dc-app .dc-cs-ov-jrn__pdp-img { width: 110px; aspect-ratio: 3/4; border-radius: 12px; overflow: hidden; flex: 0 0 auto; }
.dc-app .dc-cs-ov-jrn__pdp-img img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.dc-app .dc-cs-ov-jrn__pdp-body { min-width: 0; flex: 1; }
.dc-app .dc-cs-ov-jrn__pdp-title { font-weight: 800; font-size: 14px; color: #100D0C; }
.dc-app .dc-cs-ov-jrn__pdp-price { font-weight: 800; font-size: 15px; color: #5612BD; margin: 3px 0 10px; }
.dc-app .dc-cs-ov-jrn__pdp-price span { font-weight: 700; font-size: 10.5px; color: #8a839a; margin-left: 5px; }
.dc-app .dc-cs-ov-jrn__pdp-clr { display: flex; align-items: center; gap: 7px; margin-bottom: 11px; }
.dc-app .dc-cs-ov-jrn__pdp-clr > span:first-child { font-size: 10.5px; font-weight: 700; color: #6a6577; margin-right: 2px; }
.dc-app .dc-cs-ov-jrn__sw { width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.dc-app .dc-cs-ov-jrn__sw--pink { background: #E7B8C6; }
.dc-app .dc-cs-ov-jrn__sw--cream { background: #EFE7D6; }
.dc-app .dc-cs-ov-jrn__sw--navy { background: #243A5E; }
.dc-app .dc-cs-ov-jrn__sw.is-on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #5612BD; }
.dc-app .dc-cs-ov-jrn__pdp-size { display: flex; gap: 6px; }
.dc-app .dc-cs-ov-jrn__size { width: 30px; height: 28px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #6a6577; border: 1px solid #e0d8ef; border-radius: 8px; }
.dc-app .dc-cs-ov-jrn__size.is-on { background: #250651; color: #fff; border-color: #250651; }
.dc-app .dc-cs-ov-jrn__checkout { border: 1px solid #e9e3f5; border-radius: 14px; padding: 11px; }
.dc-app .dc-cs-ov-jrn__co-h { font-weight: 800; font-size: 12px; color: #100D0C; margin-bottom: 8px; }
.dc-app .dc-cs-ov-jrn__co-opt { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 12px; color: #3a3450; padding: 9px 11px; border-radius: 10px; border: 1px solid #e9e3f5; margin-bottom: 6px; }
.dc-app .dc-cs-ov-jrn__co-opt--p { background: #85ECFF; border-color: #85ECFF; color: #250651; }
.dc-app .dc-cs-ov-jrn__co-opt:last-child { margin-bottom: 0; }

/* Floating act chips */
.dc-app .dc-cs-ov-jrn__floats { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.dc-app .dc-cs-ov-jrn__float { position: absolute; display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 12px;
  color: #0E0125; background: #85ECFF; border-radius: 999px; padding: 8px 14px; box-shadow: 0 16px 36px -14px rgba(86,18,189,.4);
  opacity: 0; transform: translateY(10px) scale(.96); transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1); }
.dc-app .dc-cs-ov-jrn__float.is-on { opacity: 1; transform: none; }
.dc-app .dc-cs-ov-jrn__float--discovery { top: 7%; left: 2%; }
.dc-app .dc-cs-ov-jrn__float--experience { top: 7%; right: 2%; background: #D7BDFF; }
.dc-app .dc-cs-ov-jrn__float--purchase { bottom: 8%; right: 4%; }

/* Surface strip (surfaced discovery screen) + swipe hint */
.dc-app .dc-cs-ov-jrn__strip { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 2px; }
.dc-app .dc-cs-ov-jrn__strip-lab { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: #9250F2; }
.dc-app .dc-cs-ov-jrn__strip-chip { font-size: 10px; font-weight: 700; color: #5612BD; background: #F3F0FB; border: 1px solid var(--dc-border); border-radius: 999px; padding: 3px 8px; }
/* "Scroll to follow the journey" cue — now visible on desktop too and much
   larger, so it's obvious the page scrolls (Diaz feedback). */
.dc-app .dc-cs-ov-jrn__swipehint { display: inline-flex; align-items: center; gap: 9px; margin-top: 22px; font-weight: 800; font-size: 16px; letter-spacing: .01em; color: #5612BD; }
.dc-app .dc-cs-ov-jrn__hint-swipe { display: none; }
.dc-app .dc-cs-ov-jrn__swipehint-arrow { transform: rotate(90deg); animation: dcOvScrollCue 1.5s ease-in-out infinite; }
@keyframes dcOvScrollCue { 0%,100% { transform: rotate(90deg) translateX(0); } 50% { transform: rotate(90deg) translateX(5px); } }
@media (prefers-reduced-motion: reduce) { .dc-app .dc-cs-ov-jrn__swipehint-arrow { animation: none; } }

/* Static fallback (reduced motion / no JS) — stack all screens */
.dc-app .dc-cs-ov-jrn.is-static { height: auto; }
.dc-app .dc-cs-ov-jrn.is-static .dc-cs-ov-jrn__sticky { position: static; height: auto; padding: 56px 0; }
.dc-app .dc-cs-ov-jrn.is-static .dc-cs-ov-jrn__grid { grid-template-columns: 1fr; padding-top: 0; gap: 32px; }
.dc-app .dc-cs-ov-jrn.is-static .dc-cs-ov-jrn__narr { position: static; opacity: 1; transform: none; margin-bottom: 22px; }
.dc-app .dc-cs-ov-jrn.is-static .dc-cs-ov-jrn__narrs { min-height: 0; }
.dc-app .dc-cs-ov-jrn.is-static .dc-cs-ov-jrn__stage { height: auto; }
.dc-app .dc-cs-ov-jrn.is-static .dc-cs-ov-jrn__ph .dc-cs-hiw-ph__screen { aspect-ratio: auto; }
.dc-app .dc-cs-ov-jrn.is-static .dc-cs-ov-jrn__screens { height: auto; }
.dc-app .dc-cs-ov-jrn.is-static .dc-cs-ov-jrn__screen { position: static; opacity: 1; transform: none; margin-bottom: 14px; }
.dc-app .dc-cs-ov-jrn.is-static .dc-cs-ov-jrn__tilegrid { min-height: 200px; }
.dc-app .dc-cs-ov-jrn.is-static .dc-cs-ov-jrn__hdr-chatgpt { opacity: 1; }
.dc-app .dc-cs-ov-jrn.is-static .dc-cs-ov-jrn__float, .dc-app .dc-cs-ov-jrn.is-static .dc-cs-ov-jrn__srfcap, .dc-app .dc-cs-ov-jrn.is-static .dc-cs-ov-jrn__swipehint { display: none; }

/* Mobile / tablet — manual horizontal swipe (4 slides) */
@media (max-width: 900px) {
  .dc-app .dc-cs-ov-jrn { height: auto; }
  .dc-app .dc-cs-ov-jrn__sticky { position: static; height: auto; padding: 52px 0; }
  .dc-app .dc-cs-ov-jrn__grid { grid-template-columns: 1fr; padding-top: 0; gap: 26px; text-align: center; }
  .dc-app .dc-cs-ov-jrn__kicker { justify-content: center; }
  .dc-app .dc-cs-ov-jrn__rail { justify-content: center; flex-wrap: wrap; }
  /* active slide defines the height (others overlay) so it always fits exactly */
  .dc-app .dc-cs-ov-jrn__narrs { min-height: 0; margin-bottom: 6px; }
  .dc-app .dc-cs-ov-jrn__narr.is-on { position: relative; inset: auto; }
  .dc-app .dc-cs-ov-jrn__rail { margin-top: 18px; }
  .dc-app .dc-cs-ov-jrn__narr-body, .dc-app .dc-cs-ov-jrn__narr-point { margin-left: auto; margin-right: auto; }
  .dc-app .dc-cs-ov-jrn__narr-chips, .dc-app .dc-cs-ov-jrn__strip { justify-content: center; }
  .dc-app .dc-cs-ov-jrn__swipehint { display: inline-flex; justify-content: center; }
  .dc-app .dc-cs-ov-jrn__hint-scroll { display: none; }
  .dc-app .dc-cs-ov-jrn__hint-swipe { display: inline; }
  .dc-app .dc-cs-ov-jrn__swipehint-arrow { transform: rotate(0deg); }
  .dc-app .dc-cs-ov-jrn__stage { height: auto; }
  .dc-app .dc-cs-ov-jrn__ph { width: min(330px, 86vw); }
  .dc-app .dc-cs-ov-jrn__ph .dc-cs-hiw-ph__screen { aspect-ratio: 320 / 680; }
  .dc-app .dc-cs-ov-jrn__float, .dc-app .dc-cs-ov-jrn__srfcap { display: none; }
  /* swipe track: all 4 screens side by side, snap */
  .dc-app .dc-cs-ov-jrn.is-mswipe .dc-cs-ov-jrn__screens { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .dc-app .dc-cs-ov-jrn.is-mswipe .dc-cs-ov-jrn__screens::-webkit-scrollbar { display: none; }
  .dc-app .dc-cs-ov-jrn.is-mswipe .dc-cs-ov-jrn__screen { position: relative; inset: auto; opacity: 1; transform: none; pointer-events: auto; flex: 0 0 100%; scroll-snap-align: center; }
}

/* Journey — experience description + review card; purchase map locator */
.dc-app .dc-cs-ov-jrn__desc { flex: 0 0 auto; margin-bottom: 8px; }
.dc-app .dc-cs-ov-jrn__desc b { font-size: 12.5px; color: #100D0C; }
.dc-app .dc-cs-ov-jrn__desc p { margin: 3px 0 0; font-size: 11px; line-height: 1.45; color: #6f6883; }
.dc-app .dc-cs-ov-jrn__rev { flex: 0 0 auto; background: #f6f4fb; border-radius: 12px; padding: 9px 11px; margin-bottom: 9px; }
.dc-app .dc-cs-ov-jrn__rev-top { display: flex; align-items: center; gap: 6px; }
.dc-app .dc-cs-ov-jrn__rev-stars { color: #5612BD; font-size: 11px; letter-spacing: 1px; }
.dc-app .dc-cs-ov-jrn__rev-top b { font-size: 12px; color: #100D0C; }
.dc-app .dc-cs-ov-jrn__rev-count { font-size: 10px; color: #8a839a; }
.dc-app .dc-cs-ov-jrn__rev-q { margin: 5px 0 4px; font-size: 11px; line-height: 1.4; color: #3a3450; }
.dc-app .dc-cs-ov-jrn__rev-by { font-size: 9.5px; font-weight: 700; color: #8a839a; }
.dc-app .dc-cs-ov-jrn__map { position: relative; border-radius: 12px; overflow: hidden; margin-bottom: 10px; aspect-ratio: 16 / 9; flex: 0 0 auto; }
.dc-app .dc-cs-ov-jrn__map img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dc-app .dc-cs-ov-jrn__map-tag { position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 5px;
  font-weight: 700; font-size: 10px; color: #250651; background: rgba(255,255,255,.94); border-radius: 999px; padding: 5px 10px; box-shadow: 0 4px 12px -4px rgba(0,0,0,.3); }
/* experience hero a touch shorter now that the screen carries more */
.dc-app .dc-cs-ov-jrn__screen--exp .dc-cs-ov-jrn__hero { aspect-ratio: 2 / 1; margin-bottom: 8px; }
.dc-app .dc-cs-ov-jrn__screen--exp .dc-cs-ov-jrn__look img { aspect-ratio: 1 / 1; }
.dc-app .dc-cs-ov-jrn__screen--exp .dc-cs-ov-jrn__desc { margin-bottom: 6px; }
.dc-app .dc-cs-ov-jrn__screen--exp .dc-cs-ov-jrn__rev { margin-bottom: 6px; }

/* Experience + Purchase screens: media keeps its natural size (don't let the
   flex column shrink the hero/PDP). Content sits top-aligned; spare space below. */
.dc-app .dc-cs-ov-jrn__screen--exp > *, .dc-app .dc-cs-ov-jrn__screen--buy > * { flex: 0 0 auto; }

/* ─────────────────────────────────────────────────────────────────────
   OVERVIEW — Explore the platform (visual preview + CTA per sub-page)
   Replaces the old three-phases + go-deeper cards. Alternating editorial rows.
   ───────────────────────────────────────────────────────────────────── */
.dc-app .dc-cs-ov-xp { padding: clamp(70px, 9vw, 120px) 0; background: #fff; }
.dc-app .dc-cs-ov-xp__head { text-align: center; max-width: 680px; margin: 0 auto clamp(40px, 5vw, 66px); }
.dc-app .dc-cs-ov-xp__head .dc-cs-prodx-eyebrow { text-align: center; }
.dc-app .dc-cs-ov-xp__rows { display: flex; flex-direction: column; gap: clamp(44px, 6vw, 84px); max-width: 1000px; margin: 0 auto; }
.dc-app .dc-cs-ov-xp__row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.dc-app .dc-cs-ov-xp__row:nth-child(even) .dc-cs-ov-xp__viz-wrap { order: 2; }
.dc-app .dc-cs-ov-xp__eyebrow { display: inline-flex; align-items: center; gap: 7px; font-weight: 800; text-transform: uppercase; letter-spacing: .16em; font-size: 12px; color: #5612BD; }
.dc-app .dc-cs-ov-xp__title { font-weight: 800; letter-spacing: -.02em; font-size: clamp(22px, 2.4vw, 31px); line-height: 1.12; color: #100D0C; margin: 9px 0 0; }
.dc-app .dc-cs-ov-xp__body { margin: 12px 0 18px; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.6; color: #4a4458; max-width: 430px; }
.dc-app .dc-cs-ov-xp__cta { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 15px; color: #5612BD; }
.dc-app .dc-cs-ov-xp__cta svg { transition: transform .3s ease; }
.dc-app .dc-cs-ov-xp__cta:hover svg { transform: translateX(4px); }

/* the preview frame */
.dc-app .dc-cs-ov-xp-viz { position: relative; aspect-ratio: 4 / 3; border-radius: var(--dc-radius-xl); overflow: hidden;
  background: linear-gradient(160deg, #FBF8FF, #F1EAFF); border: 1px solid var(--dc-border-faint); box-shadow: var(--dc-shadow-card);
  display: flex; align-items: center; justify-content: center; padding: 22px; }

/* discovery — your tile in a sea of grey */
.dc-app .dc-cs-ov-xp-viz--disc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 24px; }
.dc-app .dc-cs-ov-xp-disc__grey { aspect-ratio: 3 / 4; border-radius: 10px; background: #e6e1ef; }
.dc-app .dc-cs-ov-xp-disc__you { position: relative; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden;
  box-shadow: 0 0 0 2px #5612BD, 0 16px 32px -14px rgba(86,18,189,.6); }
.dc-app .dc-cs-ov-xp-disc__you img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.dc-app .dc-cs-ov-xp-disc__badge { position: absolute; top: 6px; left: 6px; display: inline-flex; align-items: center; gap: 4px;
  font-weight: 800; font-size: 9px; color: #250651; background: #85ECFF; border-radius: 999px; padding: 3px 7px; }

/* experience — hero + colorway thumbs + swatches */
.dc-app .dc-cs-ov-xp-viz--exp { gap: 12px; }
.dc-app .dc-cs-ov-xp-exp__hero { flex: 1.25; align-self: stretch; border-radius: 14px; overflow: hidden; }
.dc-app .dc-cs-ov-xp-exp__hero img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.dc-app .dc-cs-ov-xp-exp__side { flex: 1; align-self: stretch; display: flex; flex-direction: column; gap: 9px; }
.dc-app .dc-cs-ov-xp-exp__thumb { flex: 1; border-radius: 12px; overflow: hidden; }
.dc-app .dc-cs-ov-xp-exp__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.dc-app .dc-cs-ov-xp-exp__swatches { display: flex; gap: 8px; justify-content: center; padding: 4px 0 2px; }
.dc-app .dc-cs-ov-xp-exp__swatches .dc-cs-ov-jrn__sw { width: 22px; height: 22px; }

/* purchase — store locator fills the frame */
.dc-app .dc-cs-ov-xp-viz--buy { padding: 0; }
.dc-app .dc-cs-ov-xp-viz--buy img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dc-app .dc-cs-ov-xp-buy__tag { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; font-size: 12px; color: #250651; background: rgba(255,255,255,.95); border-radius: 999px; padding: 7px 13px; box-shadow: 0 6px 16px -6px rgba(0,0,0,.3); }

/* how it works — mini Content Enrichment Engine flow: two inputs → engine → two outputs → surfaces */
.dc-app .dc-cs-ov-xp-viz--hiw { flex-direction: column; gap: 6px; padding: 22px; }
.dc-app .dc-cs-ov-xp-hiw__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.dc-app .dc-cs-ov-xp-hiw__box { display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 9px 8px; border-radius: 10px; background: #faf7ff; border: 1px solid #ece3fa; color: #100D0C;
  font-weight: 800; font-size: 11px; line-height: 1.25; min-height: 40px; }
.dc-app .dc-cs-ov-xp-hiw__box--out { background: #fff; border-color: #d7c6f5; }
.dc-app .dc-cs-ov-xp-hiw__engine { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%;
  padding: 10px 12px; border-radius: 11px; background: var(--dc-grad-hero); background-size: 200% 100%; color: #fff;
  font-weight: 800; font-size: 12px; text-align: center; box-shadow: 0 10px 24px -14px rgba(86,18,189,.5); }
.dc-app .dc-cs-ov-xp-hiw__surf { width: 100%; padding: 10px 12px; border-radius: 11px; background: #5612BD; color: #fff;
  font-weight: 800; font-size: 12.5px; text-align: center; }
.dc-app .dc-cs-ov-xp-hiw__arrow { width: 2px; height: 14px; background: #cdbcf0; position: relative; }
.dc-app .dc-cs-ov-xp-hiw__arrow::after { content: ""; position: absolute; left: 50%; bottom: -1px; width: 6px; height: 6px;
  border-right: 2px solid #cdbcf0; border-bottom: 2px solid #cdbcf0; transform: translateX(-50%) rotate(45deg); }

/* acp/ucp/geo — rails vs train cubes */
.dc-app .dc-cs-ov-xp-viz--acp { flex-direction: column; gap: 12px; }
.dc-app .dc-cs-ov-xp-viz--acp svg { width: 100%; max-width: 320px; height: auto; }
.dc-app .dc-cs-ov-xp-acp__rail { stroke: #c9b6f2; stroke-width: 2; stroke-dasharray: 4 5; stroke-linecap: round; }
.dc-app .dc-cs-ov-xp-acp__rail--c { stroke: #67E1F7; }
.dc-app .dc-cs-ov-xp-acp__origin { fill: #fff; stroke: #c9b6f2; stroke-width: 1.5; }
.dc-app .dc-cs-ov-xp-acp__otxt { fill: #250651; font-weight: 800; font-size: 11px; text-anchor: middle; }
.dc-app .dc-cs-ov-xp-acp__dest { fill: #fff; stroke: #e2d4f7; stroke-width: 1.5; }
.dc-app .dc-cs-ov-xp-acp__dtxt { fill: #5612BD; font-weight: 800; font-size: 11px; text-anchor: middle; }
.dc-app .dc-cs-ov-xp-acp__pkt { fill: #5612BD; }
.dc-app .dc-cs-ov-xp-acp__pkt--1 { offset-path: path('M96 95 L206 22'); animation: dcAcpPk 2.6s linear infinite; }
.dc-app .dc-cs-ov-xp-acp__pkt--2 { offset-path: path('M96 95 L206 66'); animation: dcAcpPk 2.6s linear infinite .35s; }
.dc-app .dc-cs-ov-xp-acp__pkt--3 { offset-path: path('M96 95 L206 110'); animation: dcAcpPk 2.6s linear infinite .7s; }
.dc-app .dc-cs-ov-xp-acp__pkt--4 { offset-path: path('M96 95 L206 154'); animation: dcAcpPk 2.6s linear infinite 1.05s; }
@keyframes dcAcpPk { 0% { offset-distance: 0%; opacity: 0; } 12% { opacity: 1; } 86% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
.dc-app .dc-cs-ov-xp-acp__tags { display: flex; gap: 8px; }
.dc-app .dc-cs-ov-xp-acp__tags span { font-weight: 800; font-size: 12px; color: #5612BD; background: #fff; border: 1px solid var(--dc-border); border-radius: 999px; padding: 5px 12px; }

@media (prefers-reduced-motion: reduce) {
  .dc-app .dc-cs-ov-xp-acp__pkt { animation: none; offset-distance: 60%; }
}
@media (max-width: 760px) {
  .dc-app .dc-cs-ov-xp__row { grid-template-columns: 1fr; gap: 22px; }
  .dc-app .dc-cs-ov-xp__row:nth-child(even) .dc-cs-ov-xp__viz-wrap { order: 0; }
  .dc-app .dc-cs-ov-xp__body { margin-left: auto; margin-right: auto; }
  .dc-app .dc-cs-ov-xp__copy { text-align: center; }
  .dc-app .dc-cs-ov-xp__eyebrow { justify-content: center; }
}

/* ════════════════════════════════════════════════════════════════════
   DISCOVERY PAGE  (dc-cs-disc-*)  —  /agentic-brandstore/discovery
   The "get found" story. Light/dark rhythm; soft corners; Nunito Sans.
   --dc-nav-h always carries a fallback (standalone page).
   ════════════════════════════════════════════════════════════════════ */
.dc-app.dc-cs-disc { --dc-nav-h: 116px; }

/* shared section header (centered) */
.dc-app .dc-cs-disc-head { max-width: 760px; margin: 0 auto 40px; text-align: center; }
.dc-app .dc-cs-disc-head .dc-cs-prodx-eyebrow { color: #5612BD; }
.dc-app .dc-cs-disc-head .dc-cs-prodx-lead { margin-left: auto; margin-right: auto; }

/* hero phase breadcrumb */
.dc-app .dc-cs-disc-hero__phases { display: flex; align-items: center; gap: 12px; margin-top: 40px; font-weight: 800; letter-spacing: .02em; }
.dc-app .dc-cs-disc-hero__phases span { font-size: 14px; color: #b3a6cf; }
.dc-app .dc-cs-disc-hero__phases span.is-on { color: #5612BD; }
.dc-app .dc-cs-disc-hero__phases i { color: #cdbef0; font-style: normal; }
/* Experience page: the breadcrumb sits on the dark scene hero, so the active
   phase reads bright cyan (purple is for the light Discovery hero). */
.dc-app .dc-cs-prodx-scene .dc-cs-disc-hero__phases span.is-on { color: #85ECFF; }

/* ── THE PROBLEM — one phone, the misread (pinned 4-beat scrub) ──────── */
/* IMPORTANT: do NOT use overflow:hidden on this section — it silently breaks
   position:sticky on the pin track. Use overflow:clip instead (modern, doesn't
   establish a scrolling context). */
.dc-app .dc-cs-disc-gap { position: relative; overflow: clip; background: linear-gradient(180deg,#FBF8FF 0%,#F4EEFF 100%); padding: clamp(64px,9vh,110px) 0 0; }
.dc-app .dc-cs-disc-gap__blur { position: absolute; top: -120px; right: -120px; width: 720px; height: 620px; opacity: .5; pointer-events: none; }
.dc-app .dc-cs-disc-gap > .dc-container { position: relative; z-index: 2; }

/* pin track + sticky stage (desktop scroll-scrub) */
.dc-app .dc-cs-disc-gap__pin { position: relative; }
.dc-app .dc-cs-disc-gap.is-scrub .dc-cs-disc-gap__pin { height: 240vh; }
.dc-app .dc-cs-disc-gap__sticky { padding: 32px 0; }
.dc-app .dc-cs-disc-gap.is-scrub .dc-cs-disc-gap__sticky { position: sticky; top: var(--dc-nav-h,116px); height: calc(100vh - var(--dc-nav-h,116px)); display: flex; flex-direction: column; justify-content: center; padding: 0; }
.dc-app .dc-cs-disc-gap__sticky > .dc-container { width: 100%; }

/* stage = flex column: progress dots above the focal artifact. Always full
   width; dots can't overlap the phone. */
.dc-app .dc-cs-disc-gap__stage { position: relative; min-height: min(620px, 78vh); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(20px, 3vh, 36px); }
.dc-app .dc-cs-disc-gap.is-scrub .dc-cs-disc-gap__stage { min-height: 0; height: 100%; }
.dc-app .dc-cs-disc-gap__core { position: relative; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-items: center; flex: 1 1 auto; min-height: 0; }
.dc-app .dc-cs-disc-gap__quote, .dc-app .dc-cs-disc-gap__phone { grid-area: 1 / 1; }

/* Progress milestones — horizontal row above the focal artifact, bigger type */
.dc-app .dc-cs-disc-gap__dots { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: clamp(20px, 3vw, 40px); align-items: center; flex: 0 0 auto; }
.dc-app .dc-cs-disc-gap__dot { display: inline-flex; align-items: center; gap: 10px; font-size: clamp(15px, 1.15vw, 17px); font-weight: 800; color: #9b8cbd; transition: color .3s ease; letter-spacing: .01em; }
.dc-app .dc-cs-disc-gap__dot i { width: 12px; height: 12px; border-radius: 999px; background: #d7c8f3; transition: background .3s ease, transform .3s ease, box-shadow .3s ease; }
.dc-app .dc-cs-disc-gap__dot b { font-family: ui-monospace, Menlo, monospace; font-size: clamp(13px, 0.95vw, 15px); font-weight: 700; color: #b9a8e0; letter-spacing: 0; transition: color .3s ease; }
.dc-app .dc-cs-disc-gap.is-act-0 .dc-cs-disc-gap__dot[data-phase="0"],
.dc-app .dc-cs-disc-gap.is-act-1 .dc-cs-disc-gap__dot[data-phase="1"],
.dc-app .dc-cs-disc-gap.is-act-2 .dc-cs-disc-gap__dot[data-phase="1"],
.dc-app .dc-cs-disc-gap.is-act-3 .dc-cs-disc-gap__dot[data-phase="2"] { color: #5612BD; }
.dc-app .dc-cs-disc-gap.is-act-0 .dc-cs-disc-gap__dot[data-phase="0"] b,
.dc-app .dc-cs-disc-gap.is-act-1 .dc-cs-disc-gap__dot[data-phase="1"] b,
.dc-app .dc-cs-disc-gap.is-act-2 .dc-cs-disc-gap__dot[data-phase="1"] b,
.dc-app .dc-cs-disc-gap.is-act-3 .dc-cs-disc-gap__dot[data-phase="2"] b { color: #5612BD; }
.dc-app .dc-cs-disc-gap.is-act-0 .dc-cs-disc-gap__dot[data-phase="0"] i,
.dc-app .dc-cs-disc-gap.is-act-1 .dc-cs-disc-gap__dot[data-phase="1"] i,
.dc-app .dc-cs-disc-gap.is-act-2 .dc-cs-disc-gap__dot[data-phase="1"] i,
.dc-app .dc-cs-disc-gap.is-act-3 .dc-cs-disc-gap__dot[data-phase="2"] i { background: #5612BD; transform: scale(1.3); box-shadow: 0 0 0 6px rgba(86,18,189,.14); }

/* Layer A — the typed need */
.dc-app .dc-cs-disc-gap__quote { width: min(960px, 90%); margin: 0 auto; text-align: center; transition: opacity .5s ease, transform .5s ease; }
.dc-app .dc-cs-disc-gap__qline { margin: 0; font-weight: 800; letter-spacing: -.02em; line-height: 1.22; font-size: clamp(22px, 2.8vw, 42px); color: #100D0C; }
.dc-app .dc-cs-disc-gap__w { transition: color .45s ease; }
.dc-app .dc-cs-disc-gap__w + .dc-cs-disc-gap__w { margin-left: .26em; }
.dc-app .dc-cs-disc-gap__caret { display: inline-block; width: .06em; height: .95em; margin-left: .12em; vertical-align: -.12em; background: #9250F2; animation: dcDiscCaret 1s steps(1) infinite; }
@keyframes dcDiscCaret { 50% { opacity: 0; } }
.dc-app .dc-cs-disc-gap.is-act-1 .dc-cs-disc-gap__w:not(.is-keep) { color: #d4cae8; }
.dc-app .dc-cs-disc-gap.is-act-1 .dc-cs-disc-gap__w.is-keep { color: #5612BD; }
.dc-app .dc-cs-disc-gap.is-act-1 .dc-cs-disc-gap__caret { opacity: 0; }
.dc-app .dc-cs-disc-gap__qtag { display: inline-flex; align-items: center; gap: 4px; margin-top: 26px; padding: 9px 16px; border-radius: 999px; background: #fff; border: 1px solid #e7dafb; box-shadow: 0 10px 30px -16px rgba(86,18,189,.4); font-size: 13.5px; color: #6a6280; opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .4s ease; }
.dc-app .dc-cs-disc-gap__qtag b { color: #100D0C; font-weight: 800; }
.dc-app .dc-cs-disc-gap__qtag i { font-style: normal; color: #b09ad6; }
.dc-app .dc-cs-disc-gap.is-act-1 .dc-cs-disc-gap__qtag { opacity: 1; transform: none; }
.dc-app .dc-cs-disc-gap.is-act-2 .dc-cs-disc-gap__quote,
.dc-app .dc-cs-disc-gap.is-act-3 .dc-cs-disc-gap__quote { opacity: 0; transform: translateY(-18px); pointer-events: none; }

/* Layer B — the phone */
.dc-app .dc-cs-disc-gap__phone { justify-self: center; align-self: center; opacity: 0; transform: translateY(22px) scale(.97); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); pointer-events: none; }
.dc-app .dc-cs-disc-gap.is-act-2 .dc-cs-disc-gap__phone,
.dc-app .dc-cs-disc-gap.is-act-3 .dc-cs-disc-gap__phone { opacity: 1; transform: none; }
.dc-app .dc-cs-disc-gap__phone .dc-cs-hiw-ph { width: clamp(272px, calc((100vh - var(--dc-nav-h,116px) - 150px) * 320 / 640), 344px); }
.dc-app .dc-cs-disc-gap__phone .dc-cs-hiw-ph__screen { aspect-ratio: 320 / 640; padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.dc-app .dc-cs-disc-gap__phhdr { display: flex; align-items: center; gap: 8px; padding: 38px 16px 10px; border-bottom: 1px solid #f0eafa; font-size: 12px; color: #6a6280; }
.dc-app .dc-cs-disc-gap__phhdr-name { font-weight: 800; color: #100D0C; flex: 1; }
.dc-app .dc-cs-disc-gap__phhdr-name i { font-style: normal; color: #b09ad6; }
.dc-app .dc-cs-disc-gap__phhdr-burger, .dc-app .dc-cs-disc-gap__phhdr-dots { color: #b3a4d2; }
.dc-app .dc-cs-disc-gap__phbody { position: relative; flex: 1; min-height: 0; padding: 12px 12px 14px; display: flex; flex-direction: column; gap: 9px; }
.dc-app .dc-cs-disc-gap__msg { font-size: 12.5px; line-height: 1.4; border-radius: 13px; padding: 9px 12px; max-width: 86%; }
.dc-app .dc-cs-disc-gap__msg--user { align-self: flex-end; background: #5612BD; color: #fff; border-bottom-right-radius: 4px; margin-right: 4px; }
.dc-app .dc-cs-disc-gap__msg--ai { align-self: flex-start; background: #f4f1fa; color: #2c2540; border-bottom-left-radius: 4px; }
.dc-app .dc-cs-disc-gap__searching { display: inline-flex; align-items: center; gap: 4px; margin-right: 5px; padding: 2px 7px; border-radius: 6px; background: #ece6f7; font-size: 11px; font-weight: 700; color: #6a6280; }
.dc-app .dc-cs-disc-gap__searching.is-rich { background: #efe7fb; color: #5612BD; }
.dc-app .dc-cs-disc-gap__searching b { font-weight: 800; color: #4a4458; }
.dc-app .dc-cs-disc-gap__phscreens { position: relative; flex: 1; min-height: 0; }
.dc-app .dc-cs-disc-gap__phscreen { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 9px; opacity: 0; transition: opacity .5s ease; }
.dc-app .dc-cs-disc-gap__phscreen--generic { opacity: 1; }
.dc-app .dc-cs-disc-gap.is-act-3 .dc-cs-disc-gap__phscreen--generic { opacity: 0; }
.dc-app .dc-cs-disc-gap.is-act-3 .dc-cs-disc-gap__phscreen--altore { opacity: 1; }
.dc-app .dc-cs-disc-gap__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dc-app .dc-cs-disc-gap__tile { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid #ece3fa; background: #fff; }
.dc-app .dc-cs-disc-gap__tile-img { aspect-ratio: 1 / 1; background: #f1ecfb; }
.dc-app .dc-cs-disc-gap__tile-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dc-app .dc-cs-disc-gap__tile--g .dc-cs-disc-gap__tile-img img { filter: saturate(.55) opacity(.78); }
.dc-app .dc-cs-disc-gap__tile-lab { display: block; padding: 7px 9px 9px; font-size: 11px; font-weight: 800; color: #100D0C; }
.dc-app .dc-cs-disc-gap__tile-lab i { display: block; margin-top: 2px; font-style: normal; font-weight: 600; font-size: 10px; color: #9b91b3; }
.dc-app .dc-cs-disc-gap__tile--you { border-color: #c9aef6; box-shadow: 0 0 0 1px #c9aef6 inset, 0 12px 28px -14px rgba(86,18,189,.5); }
.dc-app .dc-cs-disc-gap__tile-badge { position: absolute; left: 6px; top: 6px; z-index: 2; display: inline-flex; align-items: center; gap: 3px; font-size: 9px; font-weight: 800; padding: 3px 7px; border-radius: 999px; background: #85ECFF; color: #250651; }
.dc-app .dc-cs-disc-gap__tray { display: flex; align-items: center; gap: 9px; margin-top: auto; padding: 9px 10px; border-radius: 12px; border: 1px dashed #d8c9f3; background: #faf7ff; opacity: .75; }
.dc-app .dc-cs-disc-gap__tray-thumb { flex: 0 0 auto; width: 34px; height: 42px; border-radius: 7px; overflow: hidden; background: #efe9fb; }
.dc-app .dc-cs-disc-gap__tray-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) opacity(.7); }
.dc-app .dc-cs-disc-gap__tray span { font-size: 11px; font-weight: 800; color: #6a6280; }
.dc-app .dc-cs-disc-gap__tray span i { display: block; margin-top: 2px; font-style: normal; font-weight: 700; font-size: 10px; color: #a8729a; }
.dc-app .dc-cs-disc-gap__found { display: inline-flex; align-items: center; gap: 5px; margin-top: auto; font-size: 11.5px; font-weight: 800; color: #1b7a47; }

.dc-app .dc-cs-disc-gap__foot { max-width: 640px; margin: 24px auto 0; padding-bottom: clamp(64px,9vh,110px); text-align: center; font-size: clamp(16px,1.4vw,19px); font-weight: 700; line-height: 1.5; color: #250651; }
.dc-app .dc-cs-disc-gap__foot .dc-inline-cta { display: inline-flex; margin-left: 10px; }

/* ── THE UNLOCK — surface marquee + one result (DARK section) ────────── */
.dc-app .dc-cs-disc-surf { position: relative; overflow: hidden; background: #0E0125; padding: clamp(72px,11vh,132px) 0; }
.dc-app .dc-cs-disc-surf__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.dc-app .dc-cs-disc-surf__blur { position: absolute; pointer-events: none; opacity: .35; z-index: 1; }
.dc-app .dc-cs-disc-surf__blur--a { top: -160px; left: -120px; width: 680px; height: 600px; }
.dc-app .dc-cs-disc-surf > .dc-container { position: relative; z-index: 2; }
/* invert head copy for dark bg */
.dc-app .dc-cs-disc-surf .dc-cs-prodx-eyebrow { color: #B695FF; }
.dc-app .dc-cs-disc-surf .dc-cs-prodx-h2 { color: #fff; }
.dc-app .dc-cs-disc-surf .dc-cs-prodx-lead { color: rgba(255,255,255,.78); }
.dc-app .dc-cs-disc-surf .dc-grad-word {
  background-image: linear-gradient(110deg,#85ECFF 0%,#9DE5FF 35%,#B695FF 70%,#85ECFF 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* full-bleed surface marquee — logos only, larger, dark theme */
.dc-app .dc-cs-disc-mq { position: relative; z-index: 2; margin: clamp(40px,6vh,64px) 0; padding: 28px 0; border-top: 1px solid rgba(146,80,242,.32); border-bottom: 1px solid rgba(146,80,242,.32); background: rgba(255,255,255,.03); overflow: hidden; }
.dc-app .dc-cs-disc-mq__viewport { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.dc-app .dc-cs-disc-mq__track { display: flex; align-items: center; width: max-content; animation: dcDiscMq 34s linear infinite; }
.dc-app .dc-cs-disc-mq__item { display: inline-flex; align-items: center; gap: 28px; padding: 0 6px; white-space: nowrap; }
.dc-app .dc-cs-disc-mq__logo { height: 60px; width: auto; max-width: 140px; object-fit: contain; filter: brightness(0) invert(1); opacity: .94; }
.dc-app .dc-cs-disc-mq__site { font-weight: 800; font-size: 22px; letter-spacing: -.01em; color: #fff; padding: 13px 22px; border: 1.5px solid rgba(255,255,255,.45); border-radius: 999px; line-height: 1; }
.dc-app .dc-cs-disc-mq__sep { margin: 0; opacity: .85; }
@keyframes dcDiscMq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .dc-app .dc-cs-disc-mq__track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; gap: 20px 28px; } }

/* "the difference is how" copy + CTA → How-it-works (replaces the old result card) */
.dc-app .dc-cs-disc-surf__diff { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; text-align: center; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.55; font-weight: 600; color: rgba(255,255,255,.82); }
.dc-app .dc-cs-disc-surf__diff .dc-grad-word { font-weight: 800; }
.dc-app .dc-cs-disc-surf__cta { position: relative; z-index: 2; margin: 26px 0 0; display: flex; justify-content: center; }

/* one result card — stays white as a contrast element on the dark section */
.dc-app .dc-cs-disc-surf__result { position: relative; z-index: 2; max-width: 560px; margin: 0 auto; background: #fff; border: 1px solid rgba(255,255,255,.08); border-radius: 22px; padding: 22px 22px 24px; box-shadow: 0 30px 70px -28px rgba(0,0,0,.5); }
.dc-app .dc-cs-disc-surf__result-q { font-weight: 800; font-size: clamp(16px,1.6vw,19px); letter-spacing: -.01em; line-height: 1.35; color: #100D0C; }
.dc-app .dc-cs-disc-surf__result-q span { color: #c3b2e8; font-size: 1.4em; line-height: 0; margin-right: 2px; }
.dc-app .dc-cs-disc-surf__result-a { display: inline-flex; align-items: center; gap: 6px; margin: 14px 0 12px; font-size: 13.5px; font-weight: 700; color: #5612BD; }
.dc-app .dc-cs-disc-surf__result-tiles { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 10px; }
.dc-app .dc-cs-disc-surf__result-tiles .dc-cs-disc-gap__tile-lab { font-size: 10.5px; }

/* ── HOW YOU GET FOUND — ACP+/UCP+/GEO+ (editorial, non-clickable) ───── */
.dc-app .dc-cs-disc-mech { background: #F9F5FF; padding: clamp(72px, 11vh, 132px) 0; }
.dc-app .dc-cs-disc-mech__rows { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 1080px; margin: 0 auto; }
/* Non-clickable info columns — open, not card-like (no shadow/fill/radius). */
.dc-app .dc-cs-disc-mech__row { background: transparent; border: none; border-top: 3px solid #d9c6fb; border-radius: 0; padding: 22px 22px 0 0; box-shadow: none; }
.dc-app .dc-cs-disc-mech__abbr { display: inline-block; font-weight: 800; font-size: 22px; letter-spacing: -.02em; background-image: linear-gradient(110deg,#67E1F7 0%,#5612BD 45%,#9250F2 80%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dc-app .dc-cs-disc-mech__name { margin: 14px 0 0; font-weight: 800; font-size: 19px; letter-spacing: -.015em; color: #100D0C; }
.dc-app .dc-cs-disc-mech__desc { margin: 9px 0 0; font-size: 15px; line-height: 1.55; color: #4a4458; }
.dc-app .dc-cs-disc-mech__cta { margin: 34px 0 0; text-align: center; }

/* ── EARNED LIKE SEO — Contextual Rank (light) ───────────────────────── */
.dc-app .dc-cs-disc-earn { position: relative; overflow: hidden; background: #fff; padding: clamp(72px, 11vh, 132px) 0; }
.dc-app .dc-cs-disc-earn__blur { position: absolute; bottom: -160px; right: -120px; width: 680px; height: 600px; opacity: .4; pointer-events: none; }
.dc-app .dc-cs-disc-earn__grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 76px); align-items: center; }
.dc-app .dc-cs-disc-earn__copy .dc-cs-prodx-eyebrow,
.dc-app .dc-cs-disc-earn__copy .dc-cs-prodx-h2 { text-align: left; }
.dc-app .dc-cs-disc-earn__copy .dc-cs-prodx-lead { margin-left: 0; }
.dc-app .dc-cs-disc-earn__copy .dc-inline-cta { margin-top: 22px; }
.dc-app .dc-cs-disc-earn__viz { background: linear-gradient(180deg,#FBF8FF,#F4EEFF); border: 1px solid #ece3fa; border-radius: 24px; padding: 28px 28px 22px; }
.dc-app .dc-cs-disc-earn__ladder { display: flex; align-items: center; gap: 8px; margin-bottom: 22px; }
.dc-app .dc-cs-disc-earn__rung { font-size: 12.5px; font-weight: 800; letter-spacing: .02em; padding: 7px 13px; border-radius: 999px; background: #fff; border: 1px solid #e7dafb; color: #8a7cae; }
.dc-app .dc-cs-disc-earn__rung + .dc-cs-disc-earn__rung { position: relative; }
.dc-app .dc-cs-disc-earn__rung + .dc-cs-disc-earn__rung::before { content: "→"; position: absolute; left: -15px; top: 50%; transform: translateY(-50%); color: #cdbef0; font-weight: 800; }
.dc-app .dc-cs-disc-earn__rung.is-on { background: #5612BD; border-color: #5612BD; color: #fff; }
.dc-app .dc-cs-disc-earn__bars { position: relative; display: flex; align-items: flex-end; gap: 12px; height: 168px; padding-bottom: 4px; border-bottom: 2px solid #e7dafb; }
.dc-app .dc-cs-disc-earn__bar { flex: 1; height: 8px; border-radius: 8px 8px 0 0; background: linear-gradient(180deg,#9250F2,#5612BD); transition: height .9s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0s); }
.dc-app .dc-cs-disc-earn__viz.in .dc-cs-disc-earn__bar { height: var(--h, 50%); }
.dc-app .dc-cs-disc-earn__bar:last-of-type { background: linear-gradient(180deg,#67E1F7,#5612BD); }
.dc-app .dc-cs-disc-earn__axis { display: block; margin-top: 12px; font-size: 12px; font-weight: 700; color: #a596c6; }

/* ── FUNNEL POSITION ─────────────────────────────────────────────────── */
.dc-app .dc-cs-disc-fun { background: linear-gradient(180deg,#F9F5FF,#FBF8FF); padding: clamp(72px, 11vh, 132px) 0; }
.dc-app .dc-cs-disc-fun__diagram { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.dc-app .dc-cs-disc-fun__band { position: relative; display: flex; align-items: center; gap: 16px; border-radius: 18px; padding: 22px 26px; background: #fff; border: 1px solid #ece3fa; }
.dc-app .dc-cs-disc-fun__band--top { width: 100%; }
.dc-app .dc-cs-disc-fun__band--mid { width: 84%; margin: 0 auto; }
.dc-app .dc-cs-disc-fun__band--low { width: 68%; margin: 0 auto; }
.dc-app .dc-cs-disc-fun__band.is-on { background: linear-gradient(110deg,#f3ecff,#efe6ff); border-color: #d9c6fb; box-shadow: 0 18px 44px -28px rgba(86,18,189,.4); }
.dc-app .dc-cs-disc-fun__k { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #a596c6; flex: 0 0 auto; width: 96px; }
.dc-app .dc-cs-disc-fun__band.is-on .dc-cs-disc-fun__k { color: #5612BD; }
.dc-app .dc-cs-disc-fun__v { flex: 1; font-size: clamp(15px, 1.5vw, 18px); font-weight: 800; letter-spacing: -.01em; color: #100D0C; }
.dc-app .dc-cs-disc-fun__who { flex: 0 0 auto; font-size: 12px; font-weight: 800; padding: 6px 12px; border-radius: 999px; background: #f1ecfb; color: #8a7cae; }
.dc-app .dc-cs-disc-fun__who--us { background: #5612BD; color: #fff; }
.dc-app .dc-cs-disc-fun__next { margin: 34px 0 0; text-align: center; }

/* ── RESPONSIVE ──────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .dc-app .dc-cs-disc-mech__rows { grid-template-columns: 1fr; gap: 16px; }
  .dc-app .dc-cs-disc-earn__grid { grid-template-columns: 1fr; gap: 36px; }
}
/* problem beat — mobile tweaks (layout already flex-column) */
@media (max-width: 760px) {
  .dc-app .dc-cs-disc-gap__stage { gap: 16px; }
  .dc-app .dc-cs-disc-gap__dots { gap: 14px; }
  .dc-app .dc-cs-disc-gap__dot { font-size: 13px; }
  .dc-app .dc-cs-disc-gap__dot b { font-size: 12px; }
  .dc-app .dc-cs-disc-gap__quote { width: 94%; }
  .dc-app .dc-cs-disc-gap__phone .dc-cs-hiw-ph { width: clamp(248px, 70vw, 290px); }
  /* surf marquee on mobile — keep logos prominent but tighter spacing */
  .dc-app .dc-cs-disc-mq__logo { height: 44px; max-width: 100px; }
  .dc-app .dc-cs-disc-mq__site { font-size: 17px; padding: 10px 16px; }
  .dc-app .dc-cs-disc-mq__item { gap: 18px; }
}
@media (max-width: 560px) {
  .dc-app .dc-cs-disc-surf__result-tiles { grid-template-columns: 1fr 1fr; }
  .dc-app .dc-cs-disc-surf__result-tiles > :first-child { grid-column: 1 / -1; }
  .dc-app .dc-cs-disc-fun__band--mid,
  .dc-app .dc-cs-disc-fun__band--low { width: 100%; }
  .dc-app .dc-cs-disc-fun__band { flex-wrap: wrap; gap: 8px; }
  .dc-app .dc-cs-disc-fun__k { width: auto; }
}

/* ════════════════════════════════════════════════════════════════════
   PURCHASE page (/agentic-brandstore/purchase) — dc-cs-pur-*
   Short close of the D→E→P spine. The baton scene reuses the generic
   4-beat scrub controller (initDiscGap) via [data-disc-gap] + the
   .dc-cs-disc-gap__pin structural class; all styling lives here.
   ════════════════════════════════════════════════════════════════════ */

/* ── Why it closes ───────────────────────────────────────────────── */
.dc-app .dc-cs-pur-why { position: relative; padding: clamp(64px,9vh,110px) 0 clamp(40px,6vh,70px); background: #fff; }
.dc-app .dc-cs-pur-why .dc-cs-disc-head { margin-bottom: 0; }

/* ── The baton — section frame ───────────────────────────────────── */
.dc-app .dc-cs-pur-bat { position: relative; overflow: clip; background: linear-gradient(180deg,#FBF8FF 0%,#F4EEFF 100%); padding: clamp(64px,9vh,110px) 0 0; }
.dc-app .dc-cs-pur-bat__blur { position: absolute; top: -120px; left: -140px; width: 720px; height: 620px; opacity: .45; pointer-events: none; }
.dc-app .dc-cs-pur-bat > .dc-container { position: relative; z-index: 2; }
.dc-app .dc-cs-pur-bat__foot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; margin: 0; padding: clamp(28px,4vh,48px) 0 clamp(56px,8vh,90px); text-align: center; }
.dc-app .dc-cs-pur-bat__foot p { margin: 0; font-size: 17px; color: #4a4458; }

/* pin track + sticky stage */
.dc-app .dc-cs-pur-bat.is-scrub .dc-cs-pur-bat__pin { height: 340vh; }
.dc-app .dc-cs-pur-bat__sticky { padding: 32px 0; }
.dc-app .dc-cs-pur-bat.is-scrub .dc-cs-pur-bat__sticky { position: sticky; top: var(--dc-nav-h,116px); height: calc(100vh - var(--dc-nav-h,116px)); display: flex; flex-direction: column; justify-content: center; padding: 0; }
.dc-app .dc-cs-pur-bat__sticky > .dc-container { width: 100%; }
.dc-app .dc-cs-pur-bat__stage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(22px,3.4vh,40px); min-height: min(600px,76vh); }
.dc-app .dc-cs-pur-bat.is-scrub .dc-cs-pur-bat__stage { min-height: 0; height: 100%; }

/* core layout: phone · path · destinations */
.dc-app .dc-cs-pur-bat__core { display: grid; grid-template-columns: auto minmax(120px,210px) minmax(0,400px); align-items: center; justify-content: center; gap: clamp(10px,1.8vw,26px); width: 100%; }

/* the Storefront phone */
.dc-app .dc-cs-pur-bat__phone { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.dc-app .dc-cs-pur-bat__phone .dc-cs-hiw-ph { width: clamp(232px, calc((100vh - var(--dc-nav-h,116px) - 130px) * 320 / 680), 320px); }
.dc-app .dc-cs-pur-bat__phone .dc-cs-hiw-ph__screen { padding: 0; display: flex; flex-direction: column; aspect-ratio: 320 / 680; }
.dc-app .dc-cs-pur-bat__phhdr { display: flex; align-items: center; justify-content: space-between; padding: 40px 14px 9px; border-bottom: 1px solid #f0eafa; }
.dc-app .dc-cs-pur-bat__phbrand { font-weight: 800; letter-spacing: .22em; font-size: 12px; color: #100D0C; }
.dc-app .dc-cs-pur-bat__phtag { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; color: #5612BD; background: #f3edfd; border-radius: 999px; padding: 3px 8px; }
.dc-app .dc-cs-pur-bat__phbody { padding: 11px 12px 14px; display: flex; flex-direction: column; gap: 9px; flex: 1; min-height: 0; }
.dc-app .dc-cs-pur-bat__phimg { border-radius: 14px; overflow: hidden; background: #f1ecfb; aspect-ratio: 5 / 4; flex: 1 1 auto; min-height: 0; }
.dc-app .dc-cs-pur-bat__phimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dc-app .dc-cs-pur-bat__phname { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-weight: 800; font-size: 13.5px; color: #100D0C; }
.dc-app .dc-cs-pur-bat__phname b { color: #5612BD; }
.dc-app .dc-cs-pur-bat__phmeta { font-size: 11px; color: #6a6280; margin-top: -4px; }
.dc-app .dc-cs-pur-bat__sizes { display: flex; gap: 6px; }
.dc-app .dc-cs-pur-bat__sizes span { width: 28px; height: 24px; display: grid; place-items: center; border-radius: 8px; border: 1px solid #e7dafb; font-size: 10.5px; font-weight: 700; color: #6a6280; }
.dc-app .dc-cs-pur-bat__sizes span.is-on { background: #5612BD; border-color: #5612BD; color: #fff; }
.dc-app .dc-cs-pur-bat__order { margin-top: 2px; border: 1px solid #e7dafb; border-radius: 13px; padding: 9px 10px; background: #faf7ff; transition: box-shadow .5s ease, border-color .5s ease; }
.dc-app .dc-cs-pur-bat.is-act-0 .dc-cs-pur-bat__order { border-color: #c9aef7; box-shadow: 0 0 0 5px rgba(86,18,189,.10); }
.dc-app .dc-cs-pur-bat__order-k { display: block; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #5612BD; margin-bottom: 6px; }
.dc-app .dc-cs-pur-bat__order-paths { display: flex; gap: 5px; }
.dc-app .dc-cs-pur-bat__order-paths span { flex: 1 1 auto; white-space: nowrap; text-align: center; padding: 6px 8px; border-radius: 999px; border: 1px solid #e7dafb; background: #fff; font-size: 10.5px; font-weight: 700; color: #6a6280; transition: background .35s ease, color .35s ease, border-color .35s ease; }
.dc-app .dc-cs-pur-bat.is-act-1 .dc-cs-pur-bat__order-paths span[data-path="1"],
.dc-app .dc-cs-pur-bat.is-act-2 .dc-cs-pur-bat__order-paths span[data-path="2"],
.dc-app .dc-cs-pur-bat.is-act-3 .dc-cs-pur-bat__order-paths span[data-path="3"] { background: #85ECFF; border-color: #85ECFF; color: #250651; }

/* the hand-off path + traveling baton */
.dc-app .dc-cs-pur-bat__path { position: relative; align-self: center; height: 130px; z-index: 3; }
.dc-app .dc-cs-pur-bat__path svg { width: 100%; height: 120px; display: block; overflow: visible; }
.dc-app .dc-cs-pur-bat__rail { stroke: #e3d7f8; stroke-width: 2.5; fill: none; }
.dc-app .dc-cs-pur-bat__flow { stroke-width: 2.5; fill: none; stroke-dasharray: 7 11; stroke-linecap: round; opacity: 0; transition: opacity .5s ease; }
.dc-app .dc-cs-pur-bat.is-act-1 .dc-cs-pur-bat__flow,
.dc-app .dc-cs-pur-bat.is-act-2 .dc-cs-pur-bat__flow,
.dc-app .dc-cs-pur-bat.is-act-3 .dc-cs-pur-bat__flow { opacity: 1; animation: dcPurDash 1.1s linear infinite; }
@keyframes dcPurDash { to { stroke-dashoffset: -36; } }

.dc-app .dc-cs-pur-bat__chip { position: absolute; left: 50%; top: 34px; width: max-content; display: flex; align-items: center; gap: 8px; padding: 7px 11px 7px 7px; border-radius: 999px; background: #fff; border: 1px solid #e0d2f9; box-shadow: 0 16px 38px -18px rgba(37,6,81,.45); opacity: 0; transform: translate(-130%, 26px) scale(.85); transition: opacity .45s ease; z-index: 4; }
.dc-app .dc-cs-pur-bat__chip-thumb { width: 30px; height: 30px; border-radius: 999px; overflow: hidden; background: #f1ecfb; flex: 0 0 auto; }
.dc-app .dc-cs-pur-bat__chip-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dc-app .dc-cs-pur-bat__chip-txt { font-size: 11.5px; font-weight: 800; color: #100D0C; line-height: 1.25; display: flex; flex-direction: column; }
.dc-app .dc-cs-pur-bat__chip-txt i { font-style: normal; font-weight: 600; color: #6a6280; font-size: 10.5px; }
.dc-app .dc-cs-pur-bat__chip-check { width: 18px; height: 18px; border-radius: 999px; background: #1b7a47; color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; opacity: 0; transition: opacity .3s ease .55s; }
.dc-app .dc-cs-pur-bat.is-act-1 .dc-cs-pur-bat__chip { opacity: 1; animation: dcPurHop1 .85s cubic-bezier(.3,.8,.3,1) forwards; }
.dc-app .dc-cs-pur-bat.is-act-2 .dc-cs-pur-bat__chip { opacity: 1; animation: dcPurHop2 .85s cubic-bezier(.3,.8,.3,1) forwards; }
.dc-app .dc-cs-pur-bat.is-act-3 .dc-cs-pur-bat__chip { opacity: 1; animation: dcPurHop3 .85s cubic-bezier(.3,.8,.3,1) forwards; }
.dc-app .dc-cs-pur-bat.is-act-1 .dc-cs-pur-bat__chip-check,
.dc-app .dc-cs-pur-bat.is-act-2 .dc-cs-pur-bat__chip-check,
.dc-app .dc-cs-pur-bat.is-act-3 .dc-cs-pur-bat__chip-check { opacity: 1; }
@keyframes dcPurHop1 { from { transform: translate(-130%, 26px) scale(.85); } 60% { transform: translate(-28%, -16px) scale(1.04); } to { transform: translate(-38%, -28px) scale(1); } }
@keyframes dcPurHop2 { from { transform: translate(-130%, 26px) scale(.85); } 60% { transform: translate(-28%, -16px) scale(1.04); } to { transform: translate(-38%, -28px) scale(1); } }
@keyframes dcPurHop3 { from { transform: translate(-130%, 26px) scale(.85); } 60% { transform: translate(-28%, -16px) scale(1.04); } to { transform: translate(-38%, -28px) scale(1); } }

/* destination stack — overlapped, one visible per beat */
.dc-app .dc-cs-pur-bat__dests { display: grid; width: 100%; max-width: 400px; }
.dc-app .dc-cs-pur-bat__dests > * { grid-area: 1 / 1; }
.dc-app .dc-cs-pur-bat__dest { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1); border-radius: 26px; background: #fff; border: 1px solid #ece3fa; box-shadow: 0 30px 70px -38px rgba(37,6,81,.4); overflow: hidden; pointer-events: none; }
.dc-app .dc-cs-pur-bat.is-act-1 .dc-cs-pur-bat__dest--retail,
.dc-app .dc-cs-pur-bat.is-act-2 .dc-cs-pur-bat__dest--deliver,
.dc-app .dc-cs-pur-bat.is-act-3 .dc-cs-pur-bat__dest--store { opacity: 1; transform: none; }

.dc-app .dc-cs-pur-bat__ghost { opacity: 1; transition: opacity .4s ease; border-radius: 26px; border: 2px dashed #d7c8f3; min-height: 240px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 24px; }
.dc-app .dc-cs-pur-bat__ghost-q { font-weight: 800; font-size: 17px; color: #4a4458; }
.dc-app .dc-cs-pur-bat__ghost-a { font-size: 13.5px; font-weight: 700; color: #9b8cbd; }
.dc-app .dc-cs-pur-bat.is-act-1 .dc-cs-pur-bat__ghost,
.dc-app .dc-cs-pur-bat.is-act-2 .dc-cs-pur-bat__ghost,
.dc-app .dc-cs-pur-bat.is-act-3 .dc-cs-pur-bat__ghost { opacity: 0; }

.dc-app .dc-cs-pur-bat__browser { display: flex; align-items: center; gap: 5px; padding: 11px 14px; border-bottom: 1px solid #f0eafa; background: #faf8ff; }
.dc-app .dc-cs-pur-bat__browser span { width: 9px; height: 9px; border-radius: 999px; background: #e3d7f8; }
.dc-app .dc-cs-pur-bat__browser i { font-style: normal; margin-left: 8px; flex: 1; background: #fff; border: 1px solid #ece3fa; border-radius: 999px; padding: 4px 12px; font-size: 11.5px; color: #6a6280; font-weight: 600; }
.dc-app .dc-cs-pur-bat__dbody { padding: 14px 16px; display: flex; flex-direction: column; gap: 9px; }
.dc-app .dc-cs-pur-bat__line { display: flex; align-items: center; gap: 10px; }
.dc-app .dc-cs-pur-bat__line-thumb { width: 42px; height: 42px; border-radius: 11px; overflow: hidden; background: #f1ecfb; flex: 0 0 auto; }
.dc-app .dc-cs-pur-bat__line-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dc-app .dc-cs-pur-bat__line-txt { flex: 1; font-size: 12.5px; font-weight: 800; color: #100D0C; display: flex; flex-direction: column; line-height: 1.3; }
.dc-app .dc-cs-pur-bat__line-txt i { font-style: normal; font-weight: 600; color: #6a6280; font-size: 11px; }
.dc-app .dc-cs-pur-bat__line b { font-weight: 800; color: #100D0C; }
.dc-app .dc-cs-pur-bat__row { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: #6a6280; }
.dc-app .dc-cs-pur-bat__row b { color: #100D0C; font-weight: 800; }
.dc-app .dc-cs-pur-bat__row--total { border-top: 1px solid #f0eafa; padding-top: 9px; font-weight: 800; color: #100D0C; }
.dc-app .dc-cs-pur-bat__placed { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: #e9f7ef; color: #1b7a47; font-size: 12px; font-weight: 800; opacity: 0; transform: translateY(6px); transition: opacity .4s ease .55s, transform .4s ease .55s; }
.dc-app .dc-cs-pur-bat__placed i { font-style: normal; width: 16px; height: 16px; border-radius: 999px; background: #1b7a47; color: #fff; font-size: 10px; display: grid; place-items: center; }
.dc-app .dc-cs-pur-bat.is-act-1 .dc-cs-pur-bat__dest--retail .dc-cs-pur-bat__placed,
.dc-app .dc-cs-pur-bat.is-act-3 .dc-cs-pur-bat__dest--store .dc-cs-pur-bat__placed { opacity: 1; transform: none; }
.dc-app .dc-cs-pur-bat__dmap { position: relative; height: 118px; background: #eef3f8; }
.dc-app .dc-cs-pur-bat__dmap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dc-app .dc-cs-pur-bat__dmap--store { height: 132px; }
.dc-app .dc-cs-pur-bat__eta { position: absolute; right: 10px; bottom: 10px; padding: 5px 11px; border-radius: 999px; background: #250651; color: #fff; font-size: 11.5px; font-weight: 800; }
.dc-app .dc-cs-pur-bat__steps { display: flex; gap: 6px; }
.dc-app .dc-cs-pur-bat__steps span { flex: 1; text-align: center; padding: 5px 6px; border-radius: 999px; font-size: 10.5px; font-weight: 700; background: #f4f1fa; color: #9b8cbd; }
.dc-app .dc-cs-pur-bat__steps span.is-done { background: #e9f7ef; color: #1b7a47; }
.dc-app .dc-cs-pur-bat__steps span.is-on { background: #5612BD; color: #fff; }
.dc-app .dc-cs-pur-bat__dcap { margin: 0; padding: 12px 16px 16px; border-top: 1px solid #f4effc; font-size: 13.5px; line-height: 1.5; color: #4a4458; }

/* beat title — single H3 below the visuals, crossfades per beat */
.dc-app .dc-cs-pur-bat__titles { display: grid; justify-items: center; text-align: center; width: 100%; }
.dc-app .dc-cs-pur-bat__titles h3 { grid-area: 1 / 1; margin: 0; font-weight: 800; letter-spacing: -.015em; font-size: clamp(20px, 2vw, 27px); color: #100D0C; opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .45s cubic-bezier(.2,.7,.2,1); }
.dc-app .dc-cs-pur-bat.is-act-0 .dc-cs-pur-bat__titles h3[data-k="0"],
.dc-app .dc-cs-pur-bat.is-act-1 .dc-cs-pur-bat__titles h3[data-k="1"],
.dc-app .dc-cs-pur-bat.is-act-2 .dc-cs-pur-bat__titles h3[data-k="2"],
.dc-app .dc-cs-pur-bat.is-act-3 .dc-cs-pur-bat__titles h3[data-k="3"] { opacity: 1; transform: none; }

/* ── Found. Chosen. Bought. ──────────────────────────────────────── */
.dc-app .dc-cs-pur-close { position: relative; padding: clamp(64px,9vh,110px) 0; background: #fff; }
.dc-app .dc-cs-pur-close__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 34px; margin-top: 28px; }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .dc-app .dc-cs-pur-bat__core { grid-template-columns: auto minmax(90px,150px) minmax(0,360px); }
}
@media (max-width: 760px) {
  /* one stage cell: phone (beat 0) crossfades to the destinations (1–3) */
  .dc-app .dc-cs-pur-bat__core { grid-template-columns: minmax(0,1fr); justify-items: center; }
  .dc-app .dc-cs-pur-bat__core > * { grid-area: 1 / 1; }
  .dc-app .dc-cs-pur-bat__path { display: none; }
  .dc-app .dc-cs-pur-bat__phone { transition: opacity .5s ease, transform .5s ease; }
  .dc-app .dc-cs-pur-bat__phone .dc-cs-hiw-ph { width: clamp(238px, 70vw, 286px); }
  .dc-app .dc-cs-pur-bat.is-act-1 .dc-cs-pur-bat__phone,
  .dc-app .dc-cs-pur-bat.is-act-2 .dc-cs-pur-bat__phone,
  .dc-app .dc-cs-pur-bat.is-act-3 .dc-cs-pur-bat__phone { opacity: 0; transform: translateY(-14px); pointer-events: none; }
  .dc-app .dc-cs-pur-bat__dests { max-width: min(400px, 92vw); align-self: center; }
  .dc-app .dc-cs-pur-bat__ghost { opacity: 0; }
  .dc-app .dc-cs-pur-bat__stage { min-height: 560px; }
  .dc-app .dc-cs-pur-bat__foot p { font-size: 15.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .dc-app .dc-cs-pur-bat__flow { animation: none !important; }
  .dc-app .dc-cs-pur-bat__chip { animation: none !important; transform: translate(-38%, -28px); }
}


/* ════════════════════════════════════════════════════════════════════
   HOW-IT-WORKS — "Behind the glass" architecture (dc-cs-hiw-arch)
   The phone (the ask) sits front of stage; the architecture lives on
   three depth planes behind it. Scroll dollies the camera: each beat
   pulls one plane into focus (scale + blur + opacity = depth) while the
   phone steps aside, then the phone returns with the assembled answer.
   Beats via the generic scrub controller ([data-disc-gap] + pin class):
   0 the ask · 1 surfaces/batch feeds · 2 the Answer Agent (climax) ·
   3 only-the-answer-leaves + hand-off + self-learning loop.
   ════════════════════════════════════════════════════════════════════ */
.dc-app .dc-cs-hiw-arch { position: relative; }
.dc-app .dc-cs-hiw-arch.is-scrub .dc-cs-hiw-arch__pin { height: 260vh; }
.dc-app .dc-cs-hiw-arch__sticky { padding: 18px 0; }
.dc-app .dc-cs-hiw-arch.is-scrub .dc-cs-hiw-arch__sticky { position: sticky; top: var(--dc-nav-h,116px); height: calc(100vh - var(--dc-nav-h,116px)); display: flex; flex-direction: column; justify-content: center; padding: 0; }
.dc-app .dc-cs-hiw-arch__stage { display: flex; flex-direction: column; align-items: center; gap: clamp(10px,1.6vh,20px); width: 100%; height: 100%; min-height: 560px; }
.dc-app .dc-cs-hiw-arch.is-scrub .dc-cs-hiw-arch__stage { min-height: 0; }
.dc-app .dc-cs-hiw-arch__foot { margin: 16px 4px 0; text-align: center; font-size: 12.5px; color: rgba(255,255,255,.5); }

/* ── the space ───────────────────────────────────────────────────── */
.dc-app .dc-cs-hiw-arch__space { position: relative; width: min(980px, 100%); flex: 1 1 auto; min-height: 380px; }

/* planes: depth = scale + blur + opacity. Each plane crossfades between
   far / focus / passed states per beat. */
.dc-app .dc-cs-hiw-arch__plane { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; transition: transform .8s cubic-bezier(.25,.7,.25,1), opacity .7s ease, filter .8s ease; }

/* PLANE A — surfaces (front plane) */
.dc-app .dc-cs-hiw-arch__plane--surf { z-index: 3; gap: 12px; transform: translateY(-26%) scale(.82); filter: blur(3px); opacity: .38; }
.dc-app .dc-cs-hiw-arch.is-act-1 .dc-cs-hiw-arch__plane--surf { transform: translateY(-8%) scale(1); filter: blur(0); opacity: 1; }
.dc-app .dc-cs-hiw-arch.is-act-2 .dc-cs-hiw-arch__plane--surf { transform: translateY(6%) scale(1.16); filter: blur(9px); opacity: 0; }
.dc-app .dc-cs-hiw-arch.is-act-3 .dc-cs-hiw-arch__plane--surf { transform: translateY(-31%) scale(.86); filter: blur(1px); opacity: .85; }

/* PLANE B — the BrandStore enclosure (middle) */
.dc-app .dc-cs-hiw-arch__plane--store { z-index: 2; transform: translateY(2%) scale(.7); filter: blur(5px); opacity: .3; }
.dc-app .dc-cs-hiw-arch.is-act-1 .dc-cs-hiw-arch__plane--store { transform: translateY(8%) scale(.76); filter: blur(4px); opacity: .35; }
.dc-app .dc-cs-hiw-arch.is-act-2 .dc-cs-hiw-arch__plane--store { transform: translateY(-2%) scale(1); filter: blur(0); opacity: 1; }
.dc-app .dc-cs-hiw-arch.is-act-3 .dc-cs-hiw-arch__plane--store { transform: translateY(4%) scale(.8); filter: blur(2.5px); opacity: .5; }

/* PLANE C — your systems (bedrock) */
.dc-app .dc-cs-hiw-arch__plane--sys { z-index: 1; justify-content: flex-end; transform: translateY(6%) scale(.84); filter: blur(3px); opacity: .32; }
.dc-app .dc-cs-hiw-arch.is-act-2 .dc-cs-hiw-arch__plane--sys { transform: translateY(2%) scale(.96); filter: blur(0); opacity: 1; }

/* plane content */
.dc-app .dc-cs-hiw-arch__zonek { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #B695FF; }
.dc-app .dc-cs-hiw-arch__zonek--cyan { color: #85ECFF; }

.dc-app .dc-cs-hiw-arch__surfaces { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; width: min(760px, 96%); }
.dc-app .dc-cs-hiw-arch__surface { position: relative; border: 1px solid rgba(157,229,255,.32); background: rgba(20,8,46,.88); border-radius: 16px; padding: 12px 14px 13px; display: flex; flex-direction: column; gap: 1px; text-align: center; }
.dc-app .dc-cs-hiw-arch__surface.is-entry { border-color: rgba(133,236,255,.75); box-shadow: 0 0 34px -10px rgba(133,236,255,.5); }
.dc-app .dc-cs-hiw-arch__sname { font-weight: 800; font-size: 15.5px; color: #fff; letter-spacing: -.01em; }
.dc-app .dc-cs-hiw-arch__snote { font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,.6); }
.dc-app .dc-cs-hiw-arch__sreply { position: absolute; left: 50%; bottom: -13px; transform: translate(-50%, 6px); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; padding: 5px 12px; border-radius: 999px; background: #fff; color: #250651; font-size: 11.5px; font-weight: 800; opacity: 0; transition: opacity .45s ease .9s, transform .45s ease .9s; }
.dc-app .dc-cs-hiw-arch.is-act-3 .dc-cs-hiw-arch__sreply { opacity: 1; transform: translate(-50%, 0); }

.dc-app .dc-cs-hiw-arch__batchlane { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.dc-app .dc-cs-hiw-arch__tile { padding: 4px 11px; border-radius: 8px; border: 1px dashed rgba(182,149,255,.65); color: #DCCDFF; font-size: 11px; font-weight: 800; letter-spacing: .04em; background: rgba(86,18,189,.3); }
.dc-app .dc-cs-hiw-arch__batchlane em { font-style: normal; font-size: 12px; font-weight: 600; color: rgba(255,255,255,.6); }
.dc-app .dc-cs-hiw-arch.is-act-1 .dc-cs-hiw-arch__tile { animation: dcHiwArchTile 2.2s ease-in-out infinite; }
.dc-app .dc-cs-hiw-arch.is-act-1 .dc-cs-hiw-arch__tile:nth-child(2) { animation-delay: .7s; }
.dc-app .dc-cs-hiw-arch.is-act-1 .dc-cs-hiw-arch__tile:nth-child(3) { animation-delay: 1.4s; }
@keyframes dcHiwArchTile { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* the enclosure */
.dc-app .dc-cs-hiw-arch__enclosure { position: relative; width: min(560px, 94%); border: 1.5px solid rgba(146,80,242,.6); background: linear-gradient(180deg, rgba(40,12,84,.92) 0%, rgba(16,3,40,.95) 100%); border-radius: 26px; padding: 26px 22px 18px; box-shadow: inset 0 0 60px -28px rgba(146,80,242,.55), 0 30px 90px -40px rgba(0,0,0,.8); display: flex; flex-direction: column; gap: 9px; }
.dc-app .dc-cs-hiw-arch.is-act-3 .dc-cs-hiw-arch__enclosure { border-color: rgba(133,236,255,.7); }
.dc-app .dc-cs-hiw-arch__lock { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 6px 16px; border-radius: 999px; background: #0E0125; border: 1px solid rgba(146,80,242,.6); font-weight: 800; font-size: 12.5px; letter-spacing: .03em; color: #fff; }
.dc-app .dc-cs-hiw-arch__core { display: flex; align-items: center; gap: 10px; }
.dc-app .dc-cs-hiw-arch__core strong { font-size: 19px; font-weight: 800; color: #fff; letter-spacing: -.015em; }
.dc-app .dc-cs-hiw-arch__orb { width: 42px; height: 42px; border-radius: 999px; display: grid; place-items: center; background: radial-gradient(circle at 32% 28%, #B6F4FF 0%, #85ECFF 45%, #4FC4E8 100%); box-shadow: 0 0 22px rgba(133,236,255,.5); flex: 0 0 auto; }
.dc-app .dc-cs-hiw-arch.is-act-2 .dc-cs-hiw-arch__orb { animation: dcHiwArchPulse 2.4s ease-in-out infinite; }
@keyframes dcHiwArchPulse { 0%,100% { box-shadow: 0 0 16px rgba(133,236,255,.4); } 50% { box-shadow: 0 0 38px rgba(133,236,255,.95); } }
.dc-app .dc-cs-hiw-arch__asm { display: flex; flex-direction: column; gap: 6px; }
.dc-app .dc-cs-hiw-arch__asmline { display: flex; align-items: baseline; gap: 8px; padding: 7px 11px; border-radius: 10px; background: rgba(255,255,255,.07); font-size: 13px; line-height: 1.4; color: rgba(255,255,255,.9); opacity: .35; transform: none; transition: opacity .45s ease, transform .45s ease, background .45s ease; }
.dc-app .dc-cs-hiw-arch__asmline i { font-style: normal; flex: 0 0 auto; font-family: ui-monospace, Menlo, monospace; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #85ECFF; }
.dc-app .dc-cs-hiw-arch.is-act-2 .dc-cs-hiw-arch__asmline { opacity: 0; transform: translateY(8px); animation: dcHiwArchLine .5s ease forwards; animation-delay: var(--d); }
@keyframes dcHiwArchLine { to { opacity: 1; transform: none; } }
.dc-app .dc-cs-hiw-arch__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.dc-app .dc-cs-hiw-arch__tags span { padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(133,236,255,.35); font-size: 10.5px; font-weight: 700; color: rgba(255,255,255,.78); }
.dc-app .dc-cs-hiw-arch__gate { display: flex; align-items: center; gap: 12px; border-top: 1px solid rgba(255,255,255,.14); padding-top: 11px; margin-top: 2px; }
.dc-app .dc-cs-hiw-arch__gate .dc-cs-hiw-arch__zonek { margin: 0; }
.dc-app .dc-cs-hiw-arch__gatego { padding: 4px 12px; border-radius: 999px; background: #85ECFF; color: #250651; font-size: 11.5px; font-weight: 800; opacity: .45; transition: opacity .45s ease .4s; }
.dc-app .dc-cs-hiw-arch.is-act-3 .dc-cs-hiw-arch__gatego { opacity: 1; }

/* systems strip */
.dc-app .dc-cs-hiw-arch__sysrow { width: min(820px, 96%); border: 1px solid rgba(255,255,255,.16); background: rgba(20,8,46,.85); border-radius: 16px; padding: 12px 16px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; }
.dc-app .dc-cs-hiw-arch__planek { font-size: 10.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: #B695FF; }
.dc-app .dc-cs-hiw-arch__chips { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; }
.dc-app .dc-cs-hiw-arch__chips span { padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); font-size: 12px; font-weight: 600; color: rgba(255,255,255,.85); white-space: nowrap; }

/* threads: enclosure → systems, lit at beat 2 */
.dc-app .dc-cs-hiw-arch__threads { position: absolute; left: 50%; transform: translateX(-50%); bottom: 8%; width: min(420px, 60%); height: 16%; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); opacity: 0; transition: opacity .5s ease; }
.dc-app .dc-cs-hiw-arch__threads span { position: relative; justify-self: center; width: 0; height: 100%; border-left: 2px dashed rgba(146,80,242,.6); }
.dc-app .dc-cs-hiw-arch.is-act-2 .dc-cs-hiw-arch__threads { opacity: 1; }
.dc-app .dc-cs-hiw-arch.is-act-2 .dc-cs-hiw-arch__threads span::after { content: ""; position: absolute; left: -4px; top: 0; width: 7px; height: 7px; border-radius: 999px; background: #85ECFF; box-shadow: 0 0 10px rgba(133,236,255,.9); animation: dcHiwArchUp 1.5s linear infinite; }
.dc-app .dc-cs-hiw-arch.is-act-2 .dc-cs-hiw-arch__threads span:nth-child(2)::after { animation-delay: .35s; }
.dc-app .dc-cs-hiw-arch.is-act-2 .dc-cs-hiw-arch__threads span:nth-child(3)::after { animation-delay: .7s; }
.dc-app .dc-cs-hiw-arch.is-act-2 .dc-cs-hiw-arch__threads span:nth-child(4)::after { animation-delay: 1.05s; }
@keyframes dcHiwArchUp { 0% { top: calc(100% - 4px); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { top: -3px; opacity: 0; } }

/* ── the phone (front of stage) ──────────────────────────────────── */
.dc-app .dc-cs-hiw-arch__phone { position: absolute; left: 50%; top: 50%; z-index: 6; transform: translate(-50%, -50%); transition: transform .8s cubic-bezier(.25,.7,.25,1), opacity .7s ease, filter .8s ease; }
.dc-app .dc-cs-hiw-arch__phone .dc-cs-hiw-ph { width: clamp(244px, calc((100vh - var(--dc-nav-h,116px) - 220px) * 320 / 640), 322px); }
.dc-app .dc-cs-hiw-arch__phone .dc-cs-hiw-ph__screen { padding: 0; display: flex; flex-direction: column; aspect-ratio: 320 / 640; }
.dc-app .dc-cs-hiw-arch.is-act-1 .dc-cs-hiw-arch__phone,
.dc-app .dc-cs-hiw-arch.is-act-2 .dc-cs-hiw-arch__phone { transform: translate(calc(-50% - min(31vw, 380px)), -50%) scale(.62); filter: blur(1px); opacity: .5; }
.dc-app .dc-cs-hiw-arch.is-act-3 .dc-cs-hiw-arch__phone { transform: translate(-50%, -50%) scale(1); filter: none; opacity: 1; }
.dc-app .dc-cs-hiw-arch__phhdr { display: flex; align-items: center; gap: 8px; padding: 38px 16px 10px; border-bottom: 1px solid #f0eafa; font-size: 12px; color: #b3a4d2; }
.dc-app .dc-cs-hiw-arch__phhdr b { flex: 1; font-weight: 800; color: #100D0C; }
.dc-app .dc-cs-hiw-arch__phhdr b i { font-style: normal; color: #b09ad6; }
.dc-app .dc-cs-hiw-arch__chat { flex: 1; min-height: 0; padding: 12px 12px 14px; display: flex; flex-direction: column; gap: 9px; }
.dc-app .dc-cs-hiw-arch__msg { font-size: 12.5px; line-height: 1.4; border-radius: 13px; padding: 9px 12px; max-width: 86%; }
.dc-app .dc-cs-hiw-arch__msg--user { align-self: flex-end; background: #5612BD; color: #fff; border-bottom-right-radius: 4px; margin-right: 4px; }
.dc-app .dc-cs-hiw-arch__msg--ai { align-self: flex-start; background: #f4f1fa; color: #2c2540; border-bottom-left-radius: 4px; }
.dc-app .dc-cs-hiw-arch__wait { align-self: flex-start; display: flex; gap: 4px; padding: 11px 14px; border-radius: 13px; border-bottom-left-radius: 4px; background: #f4f1fa; transition: opacity .4s ease; }
.dc-app .dc-cs-hiw-arch__wait span { width: 6px; height: 6px; border-radius: 999px; background: #b09ad6; animation: dcHiwArchWait 1.2s ease-in-out infinite; }
.dc-app .dc-cs-hiw-arch__wait span:nth-child(2) { animation-delay: .2s; }
.dc-app .dc-cs-hiw-arch__wait span:nth-child(3) { animation-delay: .4s; }
@keyframes dcHiwArchWait { 0%,100% { transform: translateY(0); opacity: .55; } 50% { transform: translateY(-4px); opacity: 1; } }
.dc-app .dc-cs-hiw-arch__reply { display: flex; flex-direction: column; gap: 8px; opacity: 0; transform: translateY(10px); transition: opacity .5s ease .35s, transform .5s ease .35s; }
.dc-app .dc-cs-hiw-arch.is-act-3 .dc-cs-hiw-arch__wait { opacity: 0; height: 0; padding: 0; overflow: hidden; }
.dc-app .dc-cs-hiw-arch.is-act-3 .dc-cs-hiw-arch__reply { opacity: 1; transform: none; }
.dc-app .dc-cs-hiw-arch__rtile { display: flex; align-items: center; gap: 10px; border: 1px solid #ece3fa; border-radius: 13px; padding: 8px; background: #fff; box-shadow: 0 12px 30px -18px rgba(37,6,81,.4); }
.dc-app .dc-cs-hiw-arch__rtile img { width: 52px; height: 52px; border-radius: 9px; object-fit: cover; display: block; }
.dc-app .dc-cs-hiw-arch__rtile span { font-size: 12px; font-weight: 800; color: #100D0C; line-height: 1.3; display: flex; flex-direction: column; }
.dc-app .dc-cs-hiw-arch__rtile span i { font-style: normal; font-weight: 600; color: #6a6280; font-size: 11px; }
.dc-app .dc-cs-hiw-arch__rbuy { align-self: flex-start; padding: 6px 13px; border-radius: 999px; background: #85ECFF; color: #250651; font-size: 11.5px; font-weight: 800; }

/* self-learning loop note */
.dc-app .dc-cs-hiw-arch__loop { position: absolute; left: 50%; transform: translate(-50%, 6px); bottom: -6px; z-index: 4; white-space: nowrap; padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(133,236,255,.4); background: rgba(14,1,37,.85); font-size: 11.5px; font-weight: 700; color: rgba(133,236,255,.9); opacity: 0; transition: opacity .5s ease .7s, transform .5s ease .7s; }
.dc-app .dc-cs-hiw-arch.is-act-3 .dc-cs-hiw-arch__loop { opacity: 1; transform: translate(-50%, 0); }

/* narration */
.dc-app .dc-cs-hiw-arch__narr { display: grid; width: min(720px, 100%); margin: 0 auto; text-align: center; flex: 0 0 auto; min-height: 96px; }
.dc-app .dc-cs-hiw-arch__beat { grid-area: 1 / 1; opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .45s cubic-bezier(.2,.7,.2,1); }
.dc-app .dc-cs-hiw-arch__beat h3 { margin: 0 0 6px; font-size: clamp(19px,1.8vw,24px); font-weight: 800; letter-spacing: -.015em; color: #fff; }
.dc-app .dc-cs-hiw-arch__beat p { margin: 0; font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,.74); }
.dc-app .dc-cs-hiw-arch.is-act-0 .dc-cs-hiw-arch__beat[data-k="0"],
.dc-app .dc-cs-hiw-arch.is-act-1 .dc-cs-hiw-arch__beat[data-k="1"],
.dc-app .dc-cs-hiw-arch.is-act-2 .dc-cs-hiw-arch__beat[data-k="2"],
.dc-app .dc-cs-hiw-arch.is-act-3 .dc-cs-hiw-arch__beat[data-k="3"] { opacity: 1; transform: none; }

/* static / reduced-motion: resolved end-state */
.dc-app .dc-cs-hiw-arch.is-static .dc-cs-hiw-arch__plane { opacity: 1; filter: none; }
.dc-app .dc-cs-hiw-arch.is-static .dc-cs-hiw-arch__asmline { opacity: 1; }
.dc-app .dc-cs-hiw-arch.is-static .dc-cs-hiw-arch__gatego,
.dc-app .dc-cs-hiw-arch.is-static .dc-cs-hiw-arch__sreply,
.dc-app .dc-cs-hiw-arch.is-static .dc-cs-hiw-arch__loop { opacity: 1; }

@media (max-width: 900px) {
  .dc-app .dc-cs-hiw-arch__space { min-height: 480px; }
  .dc-app .dc-cs-hiw-arch__surfaces { grid-template-columns: 1fr 1fr; gap: 8px; width: 96%; }
  .dc-app .dc-cs-hiw-arch__surface:first-child { grid-column: 1 / -1; }
  .dc-app .dc-cs-hiw-arch__enclosure { width: 96%; padding: 24px 14px 14px; }
  .dc-app .dc-cs-hiw-arch__lock { white-space: normal; text-align: center; max-width: 86%; font-size: 11.5px; }
  /* on small screens the phone fades instead of stepping aside */
  .dc-app .dc-cs-hiw-arch.is-act-1 .dc-cs-hiw-arch__phone,
  .dc-app .dc-cs-hiw-arch.is-act-2 .dc-cs-hiw-arch__phone { transform: translate(-50%, -50%) scale(.8); opacity: 0; }
  .dc-app .dc-cs-hiw-arch__phone .dc-cs-hiw-ph { width: clamp(224px, 62vw, 268px); }
  .dc-app .dc-cs-hiw-arch__loop { white-space: normal; text-align: center; max-width: 92%; }
  .dc-app .dc-cs-hiw-arch__narr { min-height: 170px; }
  .dc-app .dc-cs-hiw-arch__gate { flex-wrap: wrap; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .dc-app .dc-cs-hiw-arch__orb, .dc-app .dc-cs-hiw-arch__tile,
  .dc-app .dc-cs-hiw-arch__wait span,
  .dc-app .dc-cs-hiw-arch__threads span::after { animation: none !important; }
}

/* ════════════════════════════════════════════════════════════════════
   ACP-UCP (Feature details) rework — dc-cs-acp-vs / -geo / -scale
   Teaser-altitude "vs" sections: twin product tiles (feed vs Plus),
   the GEO+ 3-step PDP pipeline, and the every-surface authority band.
   ════════════════════════════════════════════════════════════════════ */

/* ── ACP/UCP vs + : twin tiles ───────────────────────────────────── */
.dc-app .dc-cs-acp-vs { position: relative; padding: clamp(64px,9vh,110px) 0; background: #fff; }
.dc-app .dc-cs-acp-vs__duo { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: stretch; gap: clamp(14px,2.4vw,30px); max-width: 880px; margin: 8px auto 0; }
.dc-app .dc-cs-acp-vs__card { position: relative; border-radius: 26px; border: 1px solid #ece3fa; background: #fff; padding: 46px 20px 20px; display: flex; flex-direction: column; gap: 13px; }
.dc-app .dc-cs-acp-vs__card--feed { background: #faf9fc; }
.dc-app .dc-cs-acp-vs__card--plus { border: 1.5px solid #c9aef7; box-shadow: 0 30px 70px -38px rgba(86,18,189,.45), 0 0 0 5px rgba(133,236,255,.12); }
.dc-app .dc-cs-acp-vs__tag { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 6px 16px; border-radius: 999px; background: #f4f1fa; border: 1px solid #e7dafb; font-size: 12px; font-weight: 800; letter-spacing: .04em; color: #6a6280; }
.dc-app .dc-cs-acp-vs__tag--plus { background: #5612BD; border-color: #5612BD; color: #fff; }
.dc-app .dc-cs-acp-vs__img { border-radius: 16px; overflow: hidden; background: #f1ecfb; aspect-ratio: 5 / 4; }
.dc-app .dc-cs-acp-vs__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dc-app .dc-cs-acp-vs__card--feed .dc-cs-acp-vs__img img { filter: saturate(.45) opacity(.85); }
.dc-app .dc-cs-acp-vs__rows { display: flex; flex-direction: column; gap: 7px; flex: 1; }
.dc-app .dc-cs-acp-vs__rows div { display: flex; justify-content: space-between; gap: 10px; padding: 7px 11px; border-radius: 9px; background: #f4f1fa; font-size: 13px; }
.dc-app .dc-cs-acp-vs__rows span { color: #9b8cbd; font-weight: 700; }
.dc-app .dc-cs-acp-vs__rows b { color: #4a4458; font-weight: 700; }
.dc-app .dc-cs-acp-vs__asks { display: flex; flex-direction: column; gap: 7px; flex: 1; }
.dc-app .dc-cs-acp-vs__asks span { align-self: flex-start; padding: 7px 13px; border-radius: 999px; background: #efe7fb; color: #5612BD; font-size: 13px; font-weight: 700; }
.dc-app .dc-cs-acp-vs__asks span:nth-child(2) { align-self: flex-end; background: #e3f8fe; color: #1b6e84; }
.dc-app .dc-cs-acp-vs__duo.in .dc-cs-acp-vs__asks span { animation: dcAcpAsk 3.2s ease-in-out infinite; animation-delay: var(--d); }
@keyframes dcAcpAsk { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.dc-app .dc-cs-acp-vs__verdict { align-self: center; padding: 6px 16px; border-radius: 999px; border: 1px solid #e7dafb; font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #9b8cbd; }
.dc-app .dc-cs-acp-vs__verdict--plus { background: #85ECFF; border-color: #85ECFF; color: #250651; }
.dc-app .dc-cs-acp-vs__arrow { align-self: center; display: flex; flex-direction: column; align-items: center; gap: 6px; color: #5612BD; }
.dc-app .dc-cs-acp-vs__foot { margin: 26px 0 0; text-align: center; font-size: 17px; font-weight: 700; color: #250651; }

/* ── GEO vs GEO+ : the PDP pipeline ──────────────────────────────── */
.dc-app .dc-cs-acp-geo { position: relative; padding: clamp(64px,9vh,110px) 0; background: linear-gradient(180deg,#FBF8FF 0%,#F4EEFF 100%); }
.dc-app .dc-cs-acp-geo__pipe { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr); align-items: stretch; gap: 10px; max-width: 980px; margin: 8px auto 0; }
.dc-app .dc-cs-acp-geo__step { position: relative; border-radius: 22px; border: 1px solid #ece3fa; background: #fff; padding: 22px 18px 18px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; box-shadow: 0 24px 60px -38px rgba(37,6,81,.35); }
.dc-app .dc-cs-acp-geo__num { position: absolute; top: -12px; left: 18px; width: 26px; height: 26px; border-radius: 999px; background: #5612BD; color: #fff; font-size: 12.5px; font-weight: 800; display: grid; place-items: center; }
.dc-app .dc-cs-acp-geo__step h3 { margin: 2px 0 0; font-size: 17.5px; font-weight: 800; letter-spacing: -.015em; color: #100D0C; }
.dc-app .dc-cs-acp-geo__step p { margin: 0; font-size: 13.5px; line-height: 1.5; color: #6a6280; }
.dc-app .dc-cs-acp-geo__ic { width: 52px; height: 52px; border-radius: 16px; background: #f3edfd; display: grid; place-items: center; }
.dc-app .dc-cs-acp-geo__pdp { width: 86px; padding: 9px 9px 10px; border-radius: 10px; border: 1px solid #e7dafb; background: #faf8ff; display: flex; flex-direction: column; gap: 4px; }
.dc-app .dc-cs-acp-geo__pdpbar { height: 8px; border-radius: 4px; background: #e3d7f8; width: 60%; }
.dc-app .dc-cs-acp-geo__pdpline { height: 5px; border-radius: 3px; background: #ece6f7; }
.dc-app .dc-cs-acp-geo__pdpline--hl { background: linear-gradient(90deg,#85ECFF,#B695FF); background-size: 200% 100%; animation: dcAcpGeoHl 2.6s linear infinite; }
@keyframes dcAcpGeoHl { 0% { background-position: 0% 0; } 100% { background-position: 200% 0; } }
.dc-app .dc-cs-acp-geo__ic--radar { position: relative; }
.dc-app .dc-cs-acp-geo__ic--radar span { position: absolute; inset: 50% auto auto 50%; width: 10px; height: 10px; border-radius: 999px; background: #5612BD; transform: translate(-50%,-50%); }
.dc-app .dc-cs-acp-geo__ic--radar span:nth-child(2), .dc-app .dc-cs-acp-geo__ic--radar span:nth-child(3) { background: none; border: 1.5px solid #b695ff; width: 24px; height: 24px; animation: dcAcpGeoPing 2.2s ease-out infinite; }
.dc-app .dc-cs-acp-geo__ic--radar span:nth-child(3) { animation-delay: 1.1s; }
@keyframes dcAcpGeoPing { 0% { width: 12px; height: 12px; opacity: 1; } 100% { width: 44px; height: 44px; opacity: 0; } }
.dc-app .dc-cs-acp-geo__link { align-self: center; width: 34px; height: 0; border-top: 2px dashed #c9aef7; position: relative; }
.dc-app .dc-cs-acp-geo__link::after { content: ""; position: absolute; right: -2px; top: -5px; border: 4px solid transparent; border-left-color: #9b6ee8; }
.dc-app .dc-cs-acp-geo__foot { margin: 26px 0 0; text-align: center; font-size: 17px; font-weight: 700; color: #250651; }

/* ── the authority band ──────────────────────────────────────────── */
.dc-app .dc-cs-acp-scale { position: relative; padding: clamp(64px,9vh,110px) 0; background: #fff; }
.dc-app .dc-cs-acp-scale__inner { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.dc-app .dc-cs-acp-scale__inner .dc-cs-acp-sub { margin: 0; }
.dc-app .dc-cs-acp-scale__punch { margin: 6px 0 0; font-size: clamp(19px,1.9vw,24px); font-weight: 700; letter-spacing: -.01em; color: #250651; }
.dc-app .dc-cs-acp-scale__punch b { font-weight: 800; background: linear-gradient(110deg,#5612BD 0%,#9250F2 60%,#67E1F7 110%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dc-app .dc-cs-acp-scale__cta { margin-top: 8px; }

@media (max-width: 900px) {
  .dc-app .dc-cs-acp-vs__duo { grid-template-columns: 1fr; max-width: 440px; }
  .dc-app .dc-cs-acp-vs__arrow { transform: rotate(90deg); padding: 2px 0; }
  .dc-app .dc-cs-acp-geo__pipe { grid-template-columns: 1fr; max-width: 420px; gap: 16px; }
  .dc-app .dc-cs-acp-geo__link { justify-self: center; width: 0; height: 26px; border-top: none; border-left: 2px dashed #c9aef7; }
  .dc-app .dc-cs-acp-geo__link::after { right: -5px; top: auto; bottom: -2px; border: 4px solid transparent; border-top-color: #9b6ee8; }
}
@media (prefers-reduced-motion: reduce) {
  .dc-app .dc-cs-acp-vs__asks span, .dc-app .dc-cs-acp-geo__pdpline--hl, .dc-app .dc-cs-acp-geo__ic--radar span { animation: none !important; }
}

/* ── SCROLL CUE — large "this page scrolls" affordance (Diaz feedback) ── */
.dc-app .dc-cs-scrollcue { display: inline-flex; align-items: center; gap: 11px; margin-top: 36px; font-size: 14px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #5612BD; }
.dc-app .dc-cs-scrollcue__chev { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 999px; border: 2px solid currentColor; animation: dcScrollBob 1.5s ease-in-out infinite; }
.dc-app .dc-cs-scrollcue--dark { color: #85ECFF; }
@keyframes dcScrollBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .dc-app .dc-cs-scrollcue__chev { animation: none; } }

/* Discovery beat "keep scrolling" nudge (in the pinned problem stage) */
.dc-app .dc-cs-disc-gap__nudge { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; align-self: center; font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #5612BD; transition: opacity .4s ease; }
.dc-app .dc-cs-disc-gap__nudge-arr { font-size: 18px; animation: dcScrollBob 1.5s ease-in-out infinite; }
.dc-app .dc-cs-disc-gap.is-act-3 .dc-cs-disc-gap__nudge { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .dc-app .dc-cs-disc-gap__nudge-arr { animation: none; } }

/* ACP — Contextual Rank expanded (light, copy-only section under the ladder) */
.dc-app .dc-cs-acp-rank { background: #F9F5FF; padding: clamp(48px, 7vh, 92px) 0; }
.dc-app .dc-cs-acp-rank__inner { max-width: 760px; margin: 0 auto; text-align: center; }
.dc-app .dc-cs-acp-rank__body { margin: 16px 0 0; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.6; color: #4a4458; }