/* Static clone overrides — no JS animation / Next runtime */

/*
 * Live `/` overscroll: html snow (globals) + body pure black here.
 * Do not paint document charcoal — charcoal belongs on clone sections only.
 */
html.dark,
body {
  min-height: 100%;
}

body {
  margin: 0;
}

/*
 * Overscroll split (WebKit/Blink): html canvas is pure black; a white
 * 100vh wash covers the top so pull-down bounce stays white, while
 * push-up past the footer reveals black. Beats globals white !important.
 */
html:has(body .home-page) {
  background-color: #000000 !important;
  background-image: linear-gradient(#ffffff, #ffffff) !important;
  background-size: 100% 100vh !important;
  background-repeat: no-repeat !important;
}

html body:has(.home-page) {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
}

/*
 * FeatureShowcase layout — MUST be unlayered + !important.
 * Raylight Tailwind lives in @layer and loses to Chakra/Next globals, which
 * flattened this into one full-bleed column (sticky Design/Animate sat under
 * the screens instead of on the right, matching the broken screenshots).
 *
 * Do NOT put overflow-x:clip on this section — it breaks position:sticky.
 */
.clonehometest-body .clone-feature-showcase {
  overflow: visible;
  background: #131313 !important;
  background-color: #131313 !important;
  padding-top: var(--clone-space-8, 5rem) !important;
  padding-bottom: var(--clone-space-8, 5rem) !important;
}

.clonehometest-body .clone-feature-grid {
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box;
  width: 100%;
}

.clonehometest-body .clone-feature-media {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0;
  gap: var(--clone-space-8, 7rem) !important;
}

.clonehometest-body .clone-feature-rail {
  display: none !important;
}

.clonehometest-body .clone-feature-mobile-copy {
  display: block !important;
}

@media (min-width: 768px) {
  .clonehometest-body .clone-feature-media {
    gap: calc(var(--clone-space-8, 7rem) * 1.15) !important;
  }
}

@media (min-width: 1024px) {
  .clonehometest-body .clone-feature-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px) !important;
    align-items: stretch !important;
    column-gap: var(--clone-space-6, 3rem) !important;
  }

  .clonehometest-body .clone-feature-media {
    /* Bleed clips here only — never on sticky ancestors. */
    overflow-x: clip !important;
    overflow-y: visible !important;
    min-width: 0 !important;
    gap: calc(var(--clone-space-8, 7rem) * 1.4) !important;
  }

  .clonehometest-body .clone-feature-rail {
    display: block !important;
    position: relative !important;
    min-height: 100%;
  }

  .clonehometest-body .clone-feature-sticky {
    position: sticky !important;
    top: 26vh !important;
    z-index: 2;
  }

  .clonehometest-body .clone-feature-mobile-copy {
    display: none !important;
  }
}

@media (min-width: 90rem) {
  .clonehometest-body .clone-feature-grid {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px) !important;
    column-gap: clamp(3rem, 3.5vw, 4.5rem) !important;
  }

  .clonehometest-body [data-feature-copy] > h3 {
    font-size: clamp(1.65rem, 1.35vw, 1.95rem) !important;
  }

  .clonehometest-body .clone-hero-sub {
    font-size: 22px !important;
  }
}

@media (min-width: 96rem) {
  .clonehometest-body .clone-feature-grid {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 420px) !important;
  }

  .clonehometest-body .clone-hero-sub {
    font-size: 23px !important;
  }
}

/*
 * FeatureShowcase screens: Raylight uses width 180% + negative margin so the
 * UI bleeds off the left edge under a horizontal mask. Chakra/global img
 * max-width:100% kills that — force the bleed back.
 */
.clonehometest-body img.feature-edge-fade {
  color: inherit;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
}

@media (min-width: 1024px) {
  .clonehometest-body img.feature-edge-fade {
    width: 180% !important;
    max-width: none !important;
    margin-left: -80% !important;
    -webkit-mask-image: linear-gradient(90deg, #0000 18%, #000 78%);
    mask-image: linear-gradient(90deg, #0000 18%, #000 78%);
  }
}

/* Sticky copy rail — only the active step expands (Raylight FeatureShowcase). */
.clonehometest-body [data-feature-copy] > h3 {
  transition: color 0.3s ease;
  font-family: var(--font-waldenburg), "Waldenburg", "Waldenburg Fallback", ui-serif, Georgia, serif !important;
  font-size: clamp(1.5rem, 2.4vw, 1.75rem) !important;
  font-weight: 300 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
}

.clonehometest-body [data-feature-copy][data-active="true"] > h3 {
  color: var(--color-canvas-foreground, #fff) !important;
}

.clonehometest-body [data-feature-copy][data-active="false"] > h3 {
  color: var(--color-canvas-muted, #999) !important;
}

.clonehometest-body .clone-feature-copy-body {
  overflow: hidden !important;
  transition: height 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.clonehometest-body .clone-feature-copy-body > p {
  font-family: var(--font-inter), "Inter", "Inter Fallback", ui-sans-serif, system-ui, sans-serif !important;
  font-size: 1.0625rem !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  letter-spacing: 0.01em !important;
  color: var(--color-canvas-muted, #999) !important;
}

.clonehometest-body [data-feature-copy][data-active="true"] .clone-feature-copy-body {
  opacity: 1 !important;
}

.clonehometest-body [data-feature-copy][data-active="false"] .clone-feature-copy-body {
  height: 0 !important;
  opacity: 0 !important;
}

/* Scroll-in: panels start slightly off + faded until IntersectionObserver arms them */
.clonehometest-body [data-feature-panel] img.feature-edge-fade {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1), transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.clonehometest-body [data-feature-panel][data-inview="true"] img.feature-edge-fade {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

@media (prefers-reduced-motion: reduce) {
  .clonehometest-body [data-feature-panel] img.feature-edge-fade,
  .clonehometest-body .clone-feature-copy-body {
    transition: none;
  }

  .clonehometest-body [data-feature-panel] img.feature-edge-fade {
  opacity: 1 !important;
  transform: none !important;
  }
}

/* Showcase marquees — animate only while in view (runtime sets data-animating). */
.showcase-row {
  animation: showcase-marquee var(--showcase-duration, 50s) linear infinite;
  animation-play-state: paused;
  will-change: auto;
}

.showcase-row[data-animating="true"] {
  animation-play-state: running;
  will-change: transform;
}

.showcase-row[data-direction="right"] {
  animation-direction: reverse;
}

@media (prefers-reduced-motion: reduce) {
  .showcase-row {
    animation: none;
    will-change: auto;
  }
}

/*
 * Page type system — match cream “best-in-class models” block:
 * Waldenburg 300 display + Inter body (same faces/sizing as .tw-type-5xl / .tw-type-base).
 *
 * Hero spacing lock: margin-top rhythm (not only flex gap) so Chakra resets don’t collapse it.
 *
 * Top-of-page palette — Claude login charcoal; cream ElevenCreative stays light.
 */
/*
 * Skip layout/paint for off-screen bands on desktop. Shells stay reserved via
 * contain-intrinsic-size so scrollbars don’t jump when content fills in.
 * Mobile disables this (see below) — wrong intrinsic heights make touch scroll
 * rubber-band / jump as sections enter and leave the cull window.
 */
.clonehometest-body .clone-feature-showcase,
.clonehometest-body .clone-showcase,
.clonehometest-body [data-clone-faq-band],
#clone-elevencreative .clone-cream-surface > .block-section,
.clonehometest-body .clone-closing-cta {
  content-visibility: auto;
  contain-intrinsic-size: auto 520px;
}

/*
 * React portal hosts (four-boxes / case studies / Ask AI) must stay
 * content-visibility: visible. `auto` skips layout for off-screen hosts and
 * can prevent IntersectionObserver-gated Lotties/images from ever loading.
 */
#clone-elevencreative .clone-four-boxes-slot,
#clone-elevencreative .clone-case-studies-slot,
#clone-elevencreative .clone-ask-ai-slot {
  content-visibility: visible;
  contain-intrinsic-size: none;
}

.clonehometest-page,
.clonehometest-body {
  --font-waldenburg: "Waldenburg", "Waldenburg Fallback";
  --font-inter: "Inter", "Inter Fallback";
  --font-display: var(--font-waldenburg), ui-serif, Georgia, serif;
  --clone-display-size: clamp(2rem, 4vw, 3.25rem);
  --clone-display-lh: 1.1;
  --clone-display-tracking: -0.03em;
  --clone-display-weight: 300;
  --clone-body-size: 1.0625rem;
  --clone-body-lh: 1.55;
  --clone-body-tracking: 0.01em;
  /* Content column — ElevenLabs default is 81.5rem; we step up on wide monitors. */
  --clone-container-max: 81.5rem;
  --clone-hero-title-size: clamp(42px, 6.8vw, 98px);
  --clone-hero-measure: 36rem;
  /* Shared modular rhythm — one scale for dark ↔ cream ↔ closing.
   * Steps ≈ major third (1.25×) with fluid clamps so spacing eases with viewport.
   * Top scoop matches homepage Ask AI / positioning band
   * (`.home-positioning-curve-shell`: 3rem 2rem → 3.5rem 2.5rem). */
  /* Brand kit editorial tokens (SSOT: src/lib/brand-primitives.json). */
  --brand-charcoal: #131313;
  --brand-charcoal-elevated: #1c1b19;
  --brand-parchment: #f5f0e8;
  --brand-parchment-muted: #a39e93;
  --brand-clay: #c4785a;
  --brand-eggshell: #fdfcfc;
  --brand-marketing-dark: #0a1118;
  /* Warm FAQ/closing toward charcoal so the dark family feels continuous. */
  --brand-marketing-dark-warm: color-mix(
    in srgb,
    var(--brand-marketing-dark) 58%,
    var(--brand-charcoal) 42%
  );
  --brand-purple: #6832e0;
  --clone-cream: var(--brand-eggshell);
  --clone-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --clone-space-1: 0.5rem; /* 8 */
  --clone-space-2: 0.75rem; /* 12 */
  --clone-space-3: 1rem; /* 16 */
  --clone-space-4: 1.5rem; /* 24 */
  --clone-space-5: 2rem; /* 32 */
  --clone-space-6: 3rem; /* 48 */
  --clone-space-7: clamp(3.5rem, 6.5vw, 5.5rem); /* section pad */
  --clone-space-8: clamp(5rem, 9vw, 7.5rem); /* major / feature gap */
  --clone-section-y: var(--clone-space-7);
  --clone-section-y-tight: clamp(2.25rem, 4vw, 3.25rem);
  --clone-section-y-first: clamp(3rem, 5.5vw, 4.5rem);
  --clone-block-gap: clamp(1.5rem, 2.75vw, 2.5rem);
  --clone-gutter-x: clamp(1.25rem, 3vw, 1.5rem);
  /* Elliptical scoop — overlap must exceed --clone-scoop-y or dark corner gaps show */
  --clone-scoop-x: 3rem;
  --clone-scoop-y: 2rem;
  --clone-scoop-tl: var(--clone-scoop-x) var(--clone-scoop-y);
  --clone-scoop-tr: var(--clone-scoop-x) var(--clone-scoop-y);
  --clone-band-overlap: calc(var(--clone-scoop-y) + 0.85rem);
  /* Legacy aliases used across clone rules — map to brand kit names. */
  --claude-bg: var(--brand-charcoal);
  --claude-bg-elevated: var(--brand-charcoal-elevated);
  --claude-fg: var(--brand-parchment);
  --claude-muted: var(--brand-parchment-muted);
  --claude-accent: var(--brand-clay);
  --color-canvas-foreground: var(--brand-parchment);
  --color-canvas-muted: var(--brand-parchment-muted);
  --color-canvas: var(--brand-charcoal);
  --color-pill: var(--brand-charcoal-elevated);
  --color-pill-hover: #2a2825;
  --background: var(--brand-charcoal);
  font-family: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

@media (min-width: 640px) {
  .clonehometest-page,
  .clonehometest-body {
    --clone-scoop-x: 3.5rem;
    --clone-scoop-y: 2.5rem;
    --clone-scoop-tl: var(--clone-scoop-x) var(--clone-scoop-y);
    --clone-scoop-tr: var(--clone-scoop-x) var(--clone-scoop-y);
    --clone-band-overlap: calc(var(--clone-scoop-y) + 0.85rem);
  }
}

/* Large / ultrawide: breathe the column, type, and section rhythm without ballooning prose. */
@media (min-width: 90rem) {
  .clonehometest-page,
  .clonehometest-body {
    --clone-container-max: 90rem;
    --clone-display-size: clamp(2.25rem, 2.6vw, 3.65rem);
    --clone-gutter-x: clamp(1.5rem, 2.2vw, 2.25rem);
    --clone-space-7: clamp(4rem, 5.5vw, 6.25rem);
    --clone-space-8: clamp(5.5rem, 7.5vw, 8.5rem);
    --clone-section-y: var(--clone-space-7);
    --clone-section-y-tight: clamp(2.5rem, 3.5vw, 3.75rem);
    --clone-section-y-first: clamp(3.5rem, 4.5vw, 5rem);
    --clone-block-gap: clamp(1.75rem, 2.2vw, 2.75rem);
    --clone-hero-title-size: clamp(56px, 5.4vw, 112px);
    --clone-hero-measure: 40rem;
    --container-width: min(100%, var(--clone-container-max));
    --container-width-absolute: min(100vw, var(--clone-container-max));
  }
}

@media (min-width: 96rem) {
  .clonehometest-page,
  .clonehometest-body {
    --clone-container-max: 96rem;
    --clone-display-size: clamp(2.5rem, 2.4vw, 3.9rem);
    --clone-hero-title-size: clamp(64px, 5vw, 120px);
    --clone-hero-measure: 42rem;
    --clone-gutter-x: clamp(1.75rem, 2vw, 2.75rem);
  }
}

@media (min-width: 120rem) {
  .clonehometest-page,
  .clonehometest-body {
    --clone-container-max: 104rem;
    --clone-display-size: clamp(2.75rem, 2.1vw, 4.15rem);
    --clone-hero-title-size: clamp(72px, 4.4vw, 128px);
    --clone-hero-measure: 44rem;
    --clone-space-7: clamp(5rem, 4.5vw, 7rem);
    --clone-space-8: clamp(6.5rem, 6vw, 9.5rem);
    --clone-section-y: var(--clone-space-7);
  }
}

.clonehometest-body {
  background: #131313 !important;
  background-color: #131313 !important;
  background-image: none !important;
}

.clonehometest-body .clone-hero {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center;
  padding: 7rem 1.5rem 0 !important; /* pt-28 px-6 */
  gap: 0 !important; /* margins own the rhythm — avoid double spacing */
  background: var(--claude-bg) !important;
  background-image: none !important;
}

@media (min-width: 768px) {
  .clonehometest-body .clone-hero {
    padding-top: 8rem !important; /* md:pt-32 */
  }
}

.clonehometest-body .clone-hero > .clone-hero-eyebrow,
.clonehometest-body .clone-hero > .clone-hero-title,
.clonehometest-body .clone-hero > .clone-hero-sub,
.clonehometest-body .clone-hero > .clone-hero-ctas {
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
}

.clonehometest-body .clone-hero > .clone-hero-eyebrow {
  margin-top: 0 !important;
}

.clonehometest-body .clone-hero-proof {
  font-family: var(--font-inter), "Inter", "Inter Fallback", ui-sans-serif, system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.35 !important;
  color: color-mix(in srgb, var(--claude-fg) 72%, transparent) !important;
  text-wrap: balance;
}

/* Equal hero stack — same step between eyebrow → title → sub → CTAs */
.clonehometest-body .clone-hero > .clone-hero-title {
  margin-top: var(--clone-space-4) !important;
}

.clonehometest-body .clone-hero > .clone-hero-sub {
  margin-top: var(--clone-space-4) !important;
}

.clonehometest-body .clone-hero > .clone-hero-ctas {
  margin-top: var(--clone-space-4) !important;
  width: 100%;
  max-width: var(--clone-hero-measure);
  justify-content: center;
}

.clonehometest-body .clone-hero-title {
  font-family: var(--font-waldenburg), "Waldenburg", "Waldenburg Fallback", ui-serif, Georgia, serif !important;
  font-size: var(--clone-hero-title-size) !important;
  font-weight: 300 !important;
  font-variation-settings: "wght" 300, "opsz" 18, "ital" 0 !important;
  line-height: 0.97 !important;
  letter-spacing: -0.03em !important;
  color: var(--claude-fg) !important;
  text-wrap: balance;
  max-width: none;
}

.clonehometest-body .clone-hero-sub {
  max-width: var(--clone-hero-measure) !important;
  font-family: var(--font-inter), "Inter", "Inter Fallback", ui-sans-serif, system-ui, sans-serif !important;
  font-size: 21px !important;
  font-weight: 600 !important;
  line-height: 1.55 !important;
  letter-spacing: -0.01em !important;
  color: var(--claude-muted) !important;
  text-wrap: pretty;
}

.clonehometest-body .clone-hero-ctas {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.75rem !important;
}

.clonehometest-body #clippable-cta-slot {
  width: 100%;
  max-width: var(--clone-hero-measure);
}

.clonehometest-body .clone-hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
}

/* Shared hero CTA geometry — identical 48px pills (same height + width pair). */
.clonehometest-body .clone-hero-cta-row {
  align-items: stretch !important;
}

.clonehometest-body .clone-hero-cta-start,
.clonehometest-body .clone-hero-cta-mcp,
.clonehometest-body a.clone-hero-cta-start,
.clonehometest-body a.clone-hero-cta-mcp {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  height: 3rem !important;
  min-height: 3rem !important;
  max-height: 3rem !important;
  border-radius: 9999px !important;
  border-width: 1px !important;
  border-style: solid !important;
  font-family: var(--font-inter), "Inter", "Inter Fallback", ui-sans-serif, system-ui, sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  line-height: 1 !important;
  text-decoration: none !important;
  /* Same horizontal padding on both — logo sits inside this box on the MCP pill */
  padding: 0 1.25rem !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}

@media (min-width: 640px) {
  /* Side-by-side: same footprint so Start free isn’t a tiny sibling */
  .clonehometest-body .clone-hero-cta-row {
    display: inline-flex !important;
    width: max-content;
    max-width: 100%;
  }

  .clonehometest-body .clone-hero-cta-start,
  .clonehometest-body .clone-hero-cta-mcp,
  .clonehometest-body a.clone-hero-cta-start,
  .clonehometest-body a.clone-hero-cta-mcp {
    flex: 1 1 0 !important;
    width: 18.5rem !important;
    min-width: 18.5rem !important;
    max-width: 18.5rem !important;
  }
}

.clonehometest-body .clone-hero-cta-start,
.clonehometest-body a.clone-hero-cta-start {
  border-color: transparent !important;
  background: #f5f5f4 !important;
  color: #0a1217 !important;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

.clonehometest-body .clone-hero-cta-start:hover,
.clonehometest-body a.clone-hero-cta-start:hover {
  background: var(--brand-purple, #6832e0) !important;
  border-color: transparent !important;
  color: #fff !important;
}

/* Dark-hero secondary pill — module defaults assume a light homepage surface */
.clonehometest-body .clone-hero-cta-mcp,
.clonehometest-body a.clone-hero-cta-mcp {
  gap: 0.5rem !important;
  border-color: rgba(245, 240, 232, 0.22) !important;
  background: rgba(245, 240, 232, 0.1) !important;
  color: var(--claude-fg, #f5f0e8) !important;
  box-shadow: none !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease !important;
}

.clonehometest-body .clone-hero-cta-mcp:hover {
  background: rgba(245, 240, 232, 0.18) !important;
  border-color: rgba(245, 240, 232, 0.4) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.clonehometest-body .clone-hero-cta-mcp [class*="logoStack"] {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  width: 22px !important;
  height: 22px !important;
  flex-shrink: 0 !important;
}

/* OpenAI mark is black — force white on the dark hero pill */
.clonehometest-body .clone-hero-cta-mcp img[src*="openai-logo"] {
  filter: brightness(0) invert(1) !important;
}

.clonehometest-body .clone-hero-cta-mcp [class*="logo"] {
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  width: 22px !important;
  height: 22px !important;
}

.clonehometest-body .clone-hero-cta-mcp [class*="labelLayer"] {
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  line-height: 1 !important;
  color: inherit !important;
  white-space: nowrap !important;
}

.clonehometest-body .clone-hero-cta-mcp [class*="gradientLayer"] {
  opacity: 0 !important;
}

/* Showcase → proof: one continuous dark band (tighter than the old Raylight gaps) */
.clonehometest-body .clone-showcase {
  padding-top: var(--clone-section-y) !important;
  padding-bottom: 0 !important;
}

.clonehometest-body .clone-proof {
  /* Sit under the showcase fade as a quiet bridge into Used by */
  margin-top: calc(-1 * var(--clone-space-2));
  padding-top: var(--clone-space-4) !important;
  padding-bottom: calc(var(--clone-space-4) + var(--clone-band-overlap)) !important;
}

.clonehometest-body .clone-partners {
  margin-top: var(--clone-space-5);
  padding: 0 var(--clone-gutter-x);
  color: #fff;
}

.clonehometest-body .clone-partners-eyebrow {
  margin: 0;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.clonehometest-body .clone-partners-logos {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.5rem 2.75rem;
}

.clonehometest-body .clone-partner {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  height: 36px;
  color: #fff;
}

.clonehometest-body .clone-partner-mark {
  display: block;
  flex-shrink: 0;
  opacity: 0.95;
}

.clonehometest-body .clone-partner-name {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #fff;
}

@media (max-width: 640px) {
  .clonehometest-body .clone-partners-logos {
    gap: 1.1rem 1.6rem;
  }

  .clonehometest-body .clone-partner-name {
    font-size: 16px;
  }

  .clonehometest-body .clone-partner-mark {
    width: 18px;
    height: 18px;
  }
}

/* Section titles that also fight Chakra heading resets */
.clonehometest-body h2.font-display {
  font-family: var(--font-waldenburg), "Waldenburg", "Waldenburg Fallback", ui-serif, Georgia, serif !important;
  font-size: var(--clone-display-size) !important;
  font-weight: var(--clone-display-weight) !important;
  line-height: var(--clone-display-lh) !important;
  letter-spacing: var(--clone-display-tracking) !important;
}

/*
 * ElevenCreative cream block (inlined). Keep page chrome black above it even
 * when elevencreative :root utilities load into document head.
 */
.clonehometest-body > main,
.clonehometest-body .bg-canvas,
.clonehometest-body .clone-feature-showcase,
.clonehometest-body .clone-showcase,
.clonehometest-body .clone-proof,
.clonehometest-body .clone-hero,
.clonehometest-body .clone-logo-marquee-slot,
.clonehometest-body .clone-used-by-marquee,
.clonehometest-body .clone-used-by-marquee .logo-marquee-band {
  background: #131313 !important;
  background-image: none !important;
  background-color: #131313 !important;
}

.clonehometest-body .clone-logo-marquee-slot,
.clonehometest-body .clone-used-by-marquee {
  background: var(--claude-bg, #131313) !important;
  background-image: none !important;
}

/* Reserve marquee band height before React portals the logos. */
.clonehometest-body .clone-logo-marquee-slot {
  min-height: 7.5rem;
}

.clonehometest-body .clone-used-by-eyebrow {
  font-family: var(--font-inter), "Inter", "Inter Fallback", ui-sans-serif, system-ui, sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.14em !important;
  color: color-mix(in srgb, var(--claude-fg, #f5f0e8) 50%, transparent);
}

/* Wide centered logo track */
.clonehometest-body .clone-used-by-marquee {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  max-width: min(64rem, 94vw) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

@media (min-width: 90rem) {
  .clonehometest-body .clone-used-by-marquee {
    max-width: min(76rem, 92vw) !important;
  }
}

@media (min-width: 120rem) {
  .clonehometest-body .clone-used-by-marquee {
    max-width: min(88rem, 90vw) !important;
  }
}

/* Showcase / feature columns follow the stepped container on wide monitors. */
.clonehometest-body .clone-showcase > .mx-auto,
.clonehometest-body .clone-feature-showcase > .mx-auto {
  max-width: min(100%, var(--clone-container-max, 80rem)) !important;
}

.clonehometest-body .clone-used-by-marquee .logo-marquee-band {
  background: var(--claude-bg, #131313) !important;
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  /* Kill any leftover full-bleed breakout (left/transform/w-screen) so the
     track stays centered inside overflow-x-clip parents. */
  position: relative !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  transform: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  /* Soft side mask — keep a little edge fade without eating the track */
  --logo-marquee-visible-inset: 6%;
}

/* Match edge fades to the flat #131313 top band (beats inline --logo-marquee-fade-color) */
.clonehometest-body .clone-used-by-marquee .logo-marquee-guide-rail-fade-left,
.clonehometest-body .clone-used-by-marquee .logo-marquee-guide-rail-fade-right {
  --logo-marquee-fade-color: #131313 !important;
}

.clonehometest-body .clone-used-by-marquee .logo-marquee-guide-rail-fade-left {
  background: linear-gradient(
    to right,
    #131313 0%,
    #131313 50%,
    rgba(19, 19, 19, 0) 100%
  ) !important;
}

.clonehometest-body .clone-used-by-marquee .logo-marquee-guide-rail-fade-right {
  background: linear-gradient(
    to left,
    #131313 0%,
    #131313 50%,
    rgba(19, 19, 19, 0) 100%
  ) !important;
}

/* Showcase bottom mask should reveal #131313, never a lighter/blacker plate */
.clonehometest-body .clone-showcase,
.clonehometest-body .clone-showcase .bg-canvas,
.clonehometest-body .clone-proof,
.clonehometest-body .clone-hero,
.clonehometest-body > main {
  background: #131313 !important;
  background-color: #131313 !important;
  background-image: none !important;
}

.clonehometest-body .clone-partners {
  color: var(--claude-fg, #f5f0e8);
}

.clonehometest-body .clone-partners-eyebrow {
  color: color-mix(in srgb, var(--claude-fg, #f5f0e8) 50%, transparent);
}

.clonehometest-body .clone-partner,
.clonehometest-body .clone-partner-name {
  color: var(--claude-fg, #f5f0e8) !important;
}

/* Cream-band partners (replaces ElevenLabs enterprise accordion) */
#clone-elevencreative .clone-partners--cream {
  margin-top: 0;
  padding: var(--clone-section-y-tight) var(--clone-gutter-x) var(--clone-space-4);
  color: #111 !important;
  background: transparent !important;
  background-color: transparent !important;
}

/* Kill the scraped section’s huge pb so FAQ scoop sits under the logos */
#clone-elevencreative [data-clone-partners-band] .pb-24,
#clone-elevencreative [data-clone-partners-band] .md\:pb-40,
#clone-elevencreative [data-clone-partners-band] .pb-40 {
  padding-bottom: 0 !important;
}

#clone-elevencreative .clone-partners--cream .clone-partners-eyebrow {
  color: rgba(17, 17, 17, 0.55) !important;
}

#clone-elevencreative .clone-partners--cream .clone-partner,
#clone-elevencreative .clone-partners--cream .clone-partner-name {
  color: #111 !important;
}

#clone-elevencreative .clone-partners--cream .clone-partner-mark {
  opacity: 0.9;
  color: #111 !important;
  fill: currentColor !important;
}

#clone-elevencreative [data-clone-partners-band] {
  background: var(--clone-cream, #fdfcfc) !important;
}

.clonehometest-body .clone-proof > p,
.clonehometest-body .clone-proof-line {
  font-family: var(--font-inter), "Inter", "Inter Fallback", ui-sans-serif, system-ui, sans-serif !important;
  font-size: clamp(0.9375rem, 1.15vw, 1.0625rem) !important; /* 15–17px */
  font-weight: 500 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.005em !important;
  max-width: 34rem;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: var(--clone-space-5) !important;
  text-wrap: pretty;
  color: color-mix(in srgb, var(--claude-fg, #f5f0e8) 62%, transparent) !important;
}

.clonehometest-body h2.font-display {
  color: var(--claude-fg, #f5f0e8) !important;
}

/* Duplicate earlier closing-cta color rules removed — see Claude charcoal block below */

#clone-elevencreative {
  display: block;
  position: relative;
  z-index: 3;
  width: 100%;
  /* Marketing-dark under cream scoop + FAQ→closing continuum. */
  background: #0a1118;
  color: #111;
  --page-background-color: var(--clone-cream, #fdfcfc);
  --marker-background-color: var(--clone-cream, #fdfcfc);
  /* ElevenLabs token used by content-grid card fills */
  --color-gray-100: 253 252 252;
  /* Scoop over charcoal — same shell as homepage Ask AI / positioning band */
  margin-top: calc(-1 * var(--clone-band-overlap));
  padding-top: 0;
  padding-bottom: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  /* Homepage footer handoff scoop (black footer shows in cutouts) */
  border-bottom-left-radius: 2rem 1.25rem;
  border-bottom-right-radius: 2rem 1.25rem;
  /*
   * Keep overflow visible — omnibox / Create·Publish·Improve pills use
   * negative z-index layers that overflow:hidden clips into blank cards.
   * Border-radius still clips this element's own background.
   */
  overflow: visible;
  isolation: isolate;
}

@media (min-width: 640px) {
  #clone-elevencreative {
    border-bottom-left-radius: 2.5rem 1.75rem;
    border-bottom-right-radius: 2.5rem 1.75rem;
  }
}

#clone-elevencreative #content {
  background-color: transparent !important;
  border-radius: 0;
}

/* Cream scoop — top curve only. Flat bottom so FAQ’s top scoop covers the
 * handoff cleanly (no dark corner cutouts from a white bottom radius). */
#clone-elevencreative .clone-cream-surface {
  position: relative;
  z-index: 2;
  background: var(--clone-cream, #fdfcfc);
  color: #111;
  --page-background-color: var(--clone-cream, #fdfcfc);
  --marker-background-color: var(--clone-cream, #fdfcfc);
  margin-top: 0;
  padding-top: var(--clone-space-4);
  /* Air under partners + pad for the FAQ scoop to overlap the flat edge */
  padding-bottom: calc(var(--clone-space-4) + var(--clone-band-overlap));
  border-top: 1px solid rgb(10 17 24 / 0.06);
  border-top-left-radius: var(--clone-scoop-tl);
  border-top-right-radius: var(--clone-scoop-tr);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  overflow: visible;
}

/* Even cream section rhythm — replace the huge ElevenLabs pt-120 / pb-120 leaps */
#clone-elevencreative .pt-80,
#clone-elevencreative .pt-120,
#clone-elevencreative .md\:pt-120,
#clone-elevencreative .md\:pt-40,
#clone-elevencreative .pt-24,
#clone-elevencreative .md\:pt-160 {
  padding-top: var(--clone-section-y) !important;
}

#clone-elevencreative .pb-24,
#clone-elevencreative .pb-40,
#clone-elevencreative .md\:pb-40,
#clone-elevencreative .pb-80,
#clone-elevencreative .md\:pb-80,
#clone-elevencreative .pb-120,
#clone-elevencreative .md\:pb-120 {
  padding-bottom: var(--clone-section-y) !important;
}

/* Mid-cream: slightly tighter vertical rhythm so bands don’t feel stacked */
#clone-elevencreative .clone-cream-surface > .block-section:not(:first-child) .pt-80,
#clone-elevencreative .clone-cream-surface > .block-section:not(:first-child) .pt-120,
#clone-elevencreative .clone-cream-surface > .block-section:not(:first-child) .md\:pt-120,
#clone-elevencreative .clone-cream-surface > .block-section:not(:first-child) .md\:pt-40,
#clone-elevencreative .clone-cream-surface > .block-section:not(:first-child) .pt-24,
#clone-elevencreative .clone-cream-surface > .block-section:not(:first-child) .md\:pt-160 {
  padding-top: var(--clone-section-y-tight) !important;
}

#clone-elevencreative .clone-cream-surface > .block-section:not(:first-child) .pb-24,
#clone-elevencreative .clone-cream-surface > .block-section:not(:first-child) .pb-40,
#clone-elevencreative .clone-cream-surface > .block-section:not(:first-child) .md\:pb-40,
#clone-elevencreative .clone-cream-surface > .block-section:not(:first-child) .pb-80,
#clone-elevencreative .clone-cream-surface > .block-section:not(:first-child) .md\:pb-80,
#clone-elevencreative .clone-cream-surface > .block-section:not(:first-child) .pb-120,
#clone-elevencreative .clone-cream-surface > .block-section:not(:first-child) .md\:pb-120 {
  padding-bottom: var(--clone-section-y-tight) !important;
}

#clone-elevencreative .block-section:first-child .pt-80,
#clone-elevencreative .block-section:first-child .pt-120,
#clone-elevencreative .block-section:first-child .md\:pt-120,
#clone-elevencreative .block-section:first-child .md\:pt-160 {
  padding-top: var(--clone-section-y-first) !important;
}

/* Equal air between cream titles and the block below */
#clone-elevencreative .clone-cream-surface .block-el-title {
  margin-bottom: var(--clone-block-gap);
}

#clone-elevencreative .clone-cream-surface > .block-section + .block-section,
#clone-elevencreative .clone-cream-surface > .clone-four-boxes-slot,
#clone-elevencreative .clone-cream-surface > .clone-case-studies-slot {
  margin-top: 0;
}

#clone-elevencreative [hidden] {
  display: none !important;
}

/*
 * Omnibox “One stack…” — match ElevenCreative models rail.
 * Clippable toolkit portal owns its own expand/opacity — leave it alone.
 */
#clone-elevencreative .block-el-omnibox-slides:not([data-clippable-toolkit-viewer]) [style*="opacity:0"],
#clone-elevencreative .block-el-omnibox-slides:not([data-clippable-toolkit-viewer]) [style*="opacity: 0"] {
  opacity: 1 !important;
}

/* Toolkit portal host: full width, no Framer clip */
#clone-elevencreative .block-el-omnibox-slides[data-clippable-toolkit-viewer] {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  overflow: visible !important;
  min-height: 0 !important;
}

@media (max-width: 734px) {
  #clone-elevencreative .block-el-omnibox-slides[data-clippable-toolkit-viewer] {
    margin-inline: 0 !important;
    padding-inline: 0 !important;
  }
}

#clone-elevencreative .block-el-omnibox-slides > .tw-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: var(--clone-block-gap) !important;
  align-items: stretch !important;
}

@media (min-width: 1024px) {
  #clone-elevencreative .block-el-omnibox-slides > .tw-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) !important;
    gap: var(--clone-space-6) !important;
  }

  #clone-elevencreative .block-el-omnibox-slides > .tw-grid > .tw-flex.tw-flex-col {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    min-height: 28rem !important;
  }
}

#clone-elevencreative .block-el-omnibox-slides [role="tablist"][aria-label="Feature demos"] {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: var(--clone-space-1) !important;
  width: 100% !important;
  /* Sit lower so Ads…Localize align with the demo card body. */
  margin-top: 2.25rem !important;
  padding-top: 0.5rem !important;
}

@media (min-width: 1024px) {
  #clone-elevencreative .block-el-omnibox-slides [role="tablist"][aria-label="Feature demos"] {
    gap: calc(var(--clone-space-1) + 0.1rem) !important;
    margin-top: 4rem !important;
    padding-top: 0.75rem !important;
  }
}

#clone-elevencreative .block-el-omnibox-slides [role="tab"] {
  display: inline-flex !important;
  align-items: center !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0.45rem 0.9rem 0.45rem 0.45rem !important;
  border-radius: 9999px !important;
  cursor: pointer !important;
  transition:
    background-color 160ms ease,
    opacity 160ms ease,
    color 160ms ease !important;
}

#clone-elevencreative .block-el-omnibox-slides [role="tab"][aria-selected="true"],
#clone-elevencreative .block-el-omnibox-slides [role="tab"][data-selected="true"] {
  background: rgb(0 0 0 / 0.055) !important;
  opacity: 1 !important;
}

#clone-elevencreative .block-el-omnibox-slides [role="tab"][aria-selected="false"] {
  background: transparent !important;
  opacity: 0.5 !important;
}

#clone-elevencreative .block-el-omnibox-slides [role="tab"][aria-selected="false"]:hover {
  opacity: 0.72 !important;
  background: rgb(0 0 0 / 0.03) !important;
}

#clone-elevencreative .block-el-omnibox-slides [role="tab"] h3 {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.65rem !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
  color: #111 !important;
  font-family: var(--font-inter), "Inter", "Inter Fallback", ui-sans-serif, system-ui, sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
}

@media (min-width: 1024px) {
  #clone-elevencreative .block-el-omnibox-slides [role="tab"] h3 {
    font-size: 1.2rem !important;
  }
}

#clone-elevencreative .block-el-omnibox-slides [role="tab"] h3 > span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 2rem !important;
  height: 2rem !important;
  border-radius: 0.65rem !important;
  border: 1px solid rgb(0 0 0 / 0.08) !important;
  background: #fff !important;
}

#clone-elevencreative .block-el-omnibox-slides [role="tab"][aria-selected="true"] h3 > span {
  border-color: rgb(0 0 0 / 0.1) !important;
  background: #fff !important;
}

#clone-elevencreative .block-el-omnibox-slides [role="tabpanel"] {
  display: flex !important;
  width: 100% !important;
  justify-content: center !important;
  align-items: stretch !important;
}

#clone-elevencreative .block-el-omnibox-slides [role="tabpanel"] > .tw-rounded-2xl {
  background: #f3f1ef !important;
  border-radius: 1.25rem !important;
  overflow: hidden !important;
  min-height: 28rem !important;
}

#clone-elevencreative .block-el-omnibox-slides .tw-bg-cream {
  background-color: #f3f1ef !important;
}

#clone-elevencreative .block-el-omnibox-slides [data-clone-omnibox-caption-title] {
  font-family: var(--font-inter), "Inter", "Inter Fallback", ui-sans-serif, system-ui, sans-serif !important;
  font-size: 1.125rem !important;
  font-weight: 500 !important;
  color: #111 !important;
}

#clone-elevencreative .block-el-omnibox-slides [data-clone-omnibox-caption-body] {
  font-family: var(--font-inter), "Inter", "Inter Fallback", ui-sans-serif, system-ui, sans-serif !important;
  font-size: 0.975rem !important;
  line-height: 1.5 !important;
  color: rgb(17 17 17 / 0.55) !important;
}

/* Toolkit omnibox: tabs alone are enough — hide prev/next arrows. */
#clone-elevencreative .block-el-omnibox-slides [data-clone-omnibox-prev],
#clone-elevencreative .block-el-omnibox-slides [data-clone-omnibox-next],
#clone-elevencreative .block-el-omnibox-slides button[aria-label="Previous"],
#clone-elevencreative .block-el-omnibox-slides button[aria-label="Next"],
#clone-elevencreative .block-el-omnibox-slides button[aria-label="Previous slide"],
#clone-elevencreative .block-el-omnibox-slides button[aria-label="Next slide"],
#clone-elevencreative .block-el-omnibox-slides .tw-hidden.tw-gap-3.tw-mt-6.lg\:tw-flex {
  display: none !important;
}

#clone-elevencreative button[aria-label="Previous"],
#clone-elevencreative button[aria-label="Next"],
#clone-elevencreative button[aria-label="Previous slide"],
#clone-elevencreative button[aria-label="Next slide"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 2rem !important;
  height: 2rem !important;
  border-radius: 9999px !important;
  background: rgb(0 0 0 / 0.06) !important;
  color: #111 !important;
  box-shadow: none !important;
  --tw-shadow: 0 0 #0000 !important;
  --tw-ring-shadow: 0 0 #0000 !important;
  --tw-ring-offset-shadow: 0 0 #0000 !important;
  border: none !important;
  border-width: 0 !important;
  outline: none !important;
  cursor: pointer !important;
}

#clone-elevencreative button[aria-label="Previous"]:hover,
#clone-elevencreative button[aria-label="Next"]:hover,
#clone-elevencreative button[aria-label="Previous slide"]:hover,
#clone-elevencreative button[aria-label="Next slide"]:hover {
  background: rgb(0 0 0 / 0.1) !important;
  box-shadow: none !important;
}

#clone-elevencreative [data-clone-faq-band] button[aria-label="Previous"],
#clone-elevencreative [data-clone-faq-band] button[aria-label="Next"],
#clone-elevencreative [data-clone-faq-band] button[aria-label="Previous slide"],
#clone-elevencreative [data-clone-faq-band] button[aria-label="Next slide"] {
  background: rgb(255 255 255 / 0.08) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: none !important;
}

#clone-elevencreative [data-clone-faq-band] button[aria-label="Previous"]:hover,
#clone-elevencreative [data-clone-faq-band] button[aria-label="Next"]:hover,
#clone-elevencreative [data-clone-faq-band] button[aria-label="Previous slide"]:hover,
#clone-elevencreative [data-clone-faq-band] button[aria-label="Next slide"]:hover {
  background: rgb(255 255 255 / 0.14) !important;
}

/*
 * Cream section titles / body — keep the native Waldenburg/Inter faces;
 * only reinforce size/rhythm so Chakra resets can’t flatten them.
 */
#clone-elevencreative .tw-type-5xl {
  font-family: var(--font-waldenburg), "Waldenburg", "Waldenburg Fallback", ui-serif, Georgia, serif !important;
  font-size: var(--clone-display-size) !important;
  line-height: var(--clone-display-lh) !important;
  letter-spacing: var(--clone-display-tracking) !important;
  font-weight: var(--clone-display-weight) !important;
}

#clone-elevencreative .tw-type-base {
  font-family: var(--font-inter), "Inter", "Inter Fallback", ui-sans-serif, system-ui, sans-serif !important;
  font-size: var(--clone-body-size) !important;
  font-weight: 400 !important;
  line-height: var(--clone-body-lh) !important;
  letter-spacing: var(--clone-body-tracking) !important;
}

#clone-elevencreative .block-section {
  box-sizing: border-box;
}

/* Skip paint for lower cream blocks only — keep early sticky/tab sections live */
#clone-elevencreative .blocks > .block-section:nth-child(n + 4) {
  content-visibility: auto;
  contain-intrinsic-size: 1px 720px;
}

/*
 * Cream editorial grid: continuous vertical rails + full-width horizontals
 * that run edge-to-edge until they meet a rail (not short centered ticks).
 * FAQ dark scoop still strips chrome via `[data-clone-faq-band]` below.
 */
#clone-elevencreative .clone-cream-surface {
  --clone-rail-color: rgba(0, 0, 0, 0.08);
  /*
   * Sit outside the content column (not on the ElevenLabs .container edge).
   * Homepage guide rails are ~5%; keep a similar outer inset so copy/cards
   * never sit on the lines.
   */
  --clone-rail-x: max(
    1rem,
    calc((100% - min(100%, var(--clone-container-max, 81.5rem))) / 2 - 1.75rem)
  );
}

@media (min-width: 640px) {
  #clone-elevencreative .clone-cream-surface {
    --clone-rail-x: max(
      1.5rem,
      calc((100% - min(100%, var(--clone-container-max, 81.5rem))) / 2 - 2.25rem)
    );
  }
}

@media (min-width: 1024px) {
  #clone-elevencreative .clone-cream-surface {
    --clone-rail-x: max(
      2rem,
      calc((100% - min(100%, var(--clone-container-max, 81.5rem))) / 2 - 2.75rem)
    );
  }
}

/* Keep cream/FAQ Eleven containers on the stepped wide measure. */
#clone-elevencreative,
#clone-elevencreative .clone-cream-surface,
#clone-elevencreative [data-clone-faq-band] {
  --container-width: min(100%, var(--clone-container-max, 81.5rem));
  --container-width-absolute: min(100vw, var(--clone-container-max, 81.5rem));
}

#clone-elevencreative .clone-cream-surface::before,
#clone-elevencreative .clone-cream-surface::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--clone-rail-color);
  z-index: 6;
  pointer-events: none;
}

#clone-elevencreative .clone-cream-surface::before {
  left: var(--clone-rail-x);
}

#clone-elevencreative .clone-cream-surface::after {
  right: var(--clone-rail-x);
}

/*
 * Continuous cream page — no hairlines between mid bands.
 * Rails already mark the column; section borders read as stacked cards.
 */
#clone-elevencreative .clone-cream-surface > .block-section,
#clone-elevencreative .clone-cream-surface > .clone-four-boxes-slot,
#clone-elevencreative .clone-cream-surface > .clone-case-studies-slot {
  border-top: none !important;
}

/* Title + content stay one band — no hairline under “One ecosystem…” or “What Clippy makes…” */
#clone-elevencreative .clone-cream-surface > .block-section:first-child + .block-section,
#clone-elevencreative .clone-cream-surface > .block-section:has(.block-el-title) + .block-section {
  border-top: none !important;
}

/*
 * Continuous cream flow — kill stacked title/content pads so sections share
 * one --clone-section-y rhythm instead of 2× air between bands.
 */
#clone-elevencreative .clone-cream-surface > .block-section:has(.block-el-title) .pb-24,
#clone-elevencreative .clone-cream-surface > .block-section:has(.block-el-title) .pb-40,
#clone-elevencreative .clone-cream-surface > .block-section:has(.block-el-title) .md\:pb-40 {
  padding-bottom: 0 !important;
}

#clone-elevencreative .clone-cream-surface > .block-section:has(.block-el-title) + .block-section .pt-24,
#clone-elevencreative .clone-cream-surface > .block-section:has(.block-el-title) + .block-section .md\:pt-40,
#clone-elevencreative .clone-cream-surface > .block-section:has(.block-el-title) + .block-section .pt-0 {
  padding-top: 0 !important;
}

/* Enterprise / API / From-brief — air under the top rail only; bottom flush to hairline */
#clone-elevencreative .block-section:has(.block-el-content-grid) .pt-0,
#clone-elevencreative .block-section:has(.block-el-content-grid) .md\:pt-0 {
  padding-top: var(--clone-section-y-tight) !important;
}

#clone-elevencreative .block-section:has(.block-el-content-grid) .pb-0,
#clone-elevencreative .block-section:has(.block-el-content-grid) .md\:pb-0 {
  padding-bottom: 0 !important;
}

/*
 * 3-up content grid — media sits on the bottom edge so cards meet the hairline
 * (no cream gap under the images). Desktop only: equal-height columns + auto
 * push. On phones that stretch leaves a dead gap under “Talk to sales”.
 */
#clone-elevencreative .block-el-content-grid .tw-group {
  display: flex !important;
  flex-direction: column !important;
}

#clone-elevencreative .block-el-content-grid img[src*="/clonehometest/media/"] {
  display: block !important;
  max-height: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 0 auto !important;
  object-fit: contain !important;
  object-position: right bottom !important;
  vertical-align: bottom;
}

/* Enterprise frosted-team graphic (replaces Studio.webp) */
#clone-elevencreative .block-el-content-grid #clippable-enterprise-team-graphic,
#clone-elevencreative .block-el-content-grid .clippable-enterprise-team-graphic {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 0 auto !important;
  aspect-ratio: 27 / 16 !important;
  overflow: hidden !important;
  border-radius: 0 0 0 12px;
  /* Reset cream-card media slot: line-height:0 + page text-white hide the graphic */
  background: transparent !important;
  color: #111111 !important;
  line-height: normal !important;
  font-size: 16px !important;
}

@media (min-width: 64rem) {
  #clone-elevencreative .block-el-content-grid .tw-group {
    min-height: 100% !important;
    height: 100% !important;
  }

  #clone-elevencreative .block-el-content-grid .tw-group > .tw-flex.tw-flex-col.tw-flex-1 {
    flex: 1 1 auto !important;
  }

  #clone-elevencreative .block-el-content-grid .tw-group > .tw-relative.tw-min-w-0 {
    margin-top: auto !important;
    margin-bottom: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    line-height: 0 !important;
  }
}

@media (max-width: 63.99rem) {
  #clone-elevencreative .block-section:has(.block-el-content-grid),
  #clone-elevencreative .block-section:has(.block-el-content-grid) .container,
  #clone-elevencreative .block-el-content-grid {
    overflow: visible !important;
  }

  #clone-elevencreative .block-el-content-grid .tw-group {
    min-height: 0 !important;
    height: auto !important;
    /* Let media break out to the cream rail (tw-overflow-hidden clips it) */
    overflow: visible !important;
  }

  #clone-elevencreative .block-el-content-grid .tw-group > .tw-flex.tw-flex-col.tw-flex-1 {
    flex: 0 0 auto !important;
  }

  /* Sit the product shot tight under the CTA — no auto-pushed dead air */
  #clone-elevencreative .block-el-content-grid .tw-group > .tw-relative.tw-min-w-0 {
    margin-top: 0.85rem !important;
    margin-bottom: 0 !important;
    /*
     * Pull past the container gutter so the shot’s right edge lands on the
     * cream vertical rail (rail paints above at --clone-rail-x).
     */
    margin-right: calc(
      -1 * (var(--outer-gutter, 1.25rem) + 0.75rem)
    ) !important;
    width: calc(100% + var(--outer-gutter, 1.25rem) + 0.75rem) !important;
    max-width: none !important;
    overflow: visible !important;
    line-height: 0 !important;
  }

  #clone-elevencreative .block-el-content-grid .tw-mt-8,
  #clone-elevencreative .block-el-content-grid .md\:tw-mt-10 {
    margin-top: 1rem !important;
  }

  #clone-elevencreative .block-el-content-grid .tw-gap-4\.5 {
    gap: 0.7rem !important;
  }

  /*
   * Full shot, natural asset ratio, flush right into the rail breakout.
   */
  #clone-elevencreative .block-el-content-grid img[src*="/clonehometest/media/"] {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    aspect-ratio: 1176 / 783 !important;
    object-fit: contain !important;
    object-position: right bottom !important;
  }

  #clone-elevencreative .block-el-content-grid #clippable-enterprise-team-graphic,
  #clone-elevencreative .block-el-content-grid .clippable-enterprise-team-graphic {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    aspect-ratio: 27 / 16 !important;
    border-radius: 0;
  }
}

/* Partners band — one top rhythm, not section-y + partners padding */
#clone-elevencreative [data-clone-partners-band] .pt-24,
#clone-elevencreative [data-clone-partners-band] .md\:pt-40 {
  padding-top: 0 !important;
}

/* Drop short/broken ElevenLabs section chrome — cream rails own the frame */
#clone-elevencreative .clone-cream-surface .mt-0\.5.h-1.w-full.bg-overlay-dark,
#clone-elevencreative .clone-cream-surface .absolute.top-0.h-1.w-full.bg-overlay-dark,
#clone-elevencreative .clone-cream-surface .absolute.bottom-0.h-1.w-full.bg-overlay-dark {
  display: none !important;
}

#clone-elevencreative .clone-cream-surface .tw-absolute.tw-z-20.tw-flex.tw-size-5 {
  display: none !important;
}

#clone-elevencreative .clone-cream-surface .relative.h-\[2px\] {
  display: none !important;
}

#clone-elevencreative .clone-cream-surface .container.border-l,
#clone-elevencreative .clone-cream-surface .container.border-r,
#clone-elevencreative .clone-cream-surface .relative.container.border-l.border-r {
  border-left: none !important;
  border-right: none !important;
  border-color: transparent !important;
}

/*
 * 3-up content grid: one top + one bottom hairline that meet the cream
 * vertical rails (no second container border, no mt-0.5 twin).
 */
#clone-elevencreative .block-section:has(.block-el-content-grid) {
  position: relative;
}

#clone-elevencreative .block-section:has(.block-el-content-grid)::before,
#clone-elevencreative .block-section:has(.block-el-content-grid)::after {
  content: "";
  position: absolute;
  left: var(--clone-rail-x);
  right: var(--clone-rail-x);
  height: 1px;
  background: var(--clone-rail-color);
  z-index: 5;
  pointer-events: none;
}

#clone-elevencreative .block-section:has(.block-el-content-grid)::before {
  /* Sit on the card/gutter tops, not above the section pad */
  top: var(--clone-section-y-tight);
}

#clone-elevencreative .block-section:has(.block-el-content-grid)::after {
  bottom: 0;
}

/* Card gutters only — same ink as the cream rails */
#clone-elevencreative .clone-cream-surface .block-el-content-grid .bg-overlay-dark,
#clone-elevencreative .clone-cream-surface [class*="group/cfe-row"] > .relative.h-1.w-full.bg-overlay-dark {
  display: block !important;
  background-color: var(--clone-rail-color) !important;
}

/* Stretch vertical gutters full card height so they hit top + bottom of the row */
@media (min-width: 64rem) {
  #clone-elevencreative [class*="group/cfe-row"] > .relative.h-1.w-full.bg-overlay-dark {
    position: relative !important;
    z-index: 2 !important;
  }
}

/* Omnibox: ElevenLabs-style icon pills (inline SVGs, not scraped CDN) */
#clone-elevencreative .block-el-omnibox-slides [role="tab"] h3 > span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 2rem !important;
  height: 2rem !important;
  border-radius: 0.65rem !important;
  border: 1px solid rgb(0 0 0 / 0.08) !important;
  background: #fff !important;
  color: #111 !important;
  flex-shrink: 0 !important;
}

#clone-elevencreative .block-el-omnibox-slides [role="tab"] h3 > span img {
  display: none !important;
}

#clone-elevencreative .block-el-omnibox-slides .clone-omnibox-tab-icon {
  display: block !important;
  width: 1.05rem !important;
  height: 1.05rem !important;
}

#clone-elevencreative .block-el-omnibox-slides [data-clone-omnibox-preview] {
  position: relative;
  z-index: 10;
  flex: 1 1 auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 0;
  padding: 0.15rem 1.25rem 0.5rem;
}

#clone-elevencreative .block-el-omnibox-slides .clone-omnibox-card {
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
}

#clone-elevencreative .block-el-omnibox-slides .clone-omnibox-open {
  position: relative;
  z-index: 40;
  display: flex;
  justify-content: flex-end;
  padding: 0.45rem 0.65rem 0;
}

#clone-elevencreative .block-el-omnibox-slides .clone-omnibox-open-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 2rem !important;
  height: 2rem !important;
  border-radius: 9999px !important;
  background: #fff !important;
  color: #111 !important;
  box-shadow:
    0 0 1px rgba(0, 0, 0, 0.35),
    0 1px 1px rgba(0, 0, 0, 0.04),
    0 2px 4px rgba(0, 0, 0, 0.04) !important;
  border: none !important;
  text-decoration: none !important;
}

#clone-elevencreative .block-el-omnibox-slides .clone-omnibox-demo {
  width: min(100%, 28rem);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-top: 0.15rem;
}

#clone-elevencreative .block-el-omnibox-slides .clone-omnibox-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
}

#clone-elevencreative .block-el-omnibox-slides .clone-omnibox-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  height: 2.25rem !important;
  padding: 0 0.7rem 0 0.9rem !important;
  border-radius: 9999px !important;
  border: 1px solid rgb(0 0 0 / 0.08) !important;
  background: #fff !important;
  color: #111 !important;
  font-family: var(--font-inter), "Inter", "Inter Fallback", ui-sans-serif, system-ui, sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  cursor: default !important;
  box-shadow: none !important;
}

#clone-elevencreative .block-el-omnibox-slides .clone-omnibox-demo-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 10.25rem;
  padding: 1rem 1.1rem 3rem;
  border-radius: 1.15rem;
  background: #fff;
  box-shadow:
    0 0 1px rgb(0 0 0 / 0.35),
    0 2px 2px rgb(0 0 0 / 0.04);
}

#clone-elevencreative .block-el-omnibox-slides .clone-omnibox-demo-body {
  margin: 0 !important;
  font-family: var(--font-inter), "Inter", "Inter Fallback", ui-sans-serif, system-ui, sans-serif !important;
  font-size: 0.925rem !important;
  line-height: 1.55 !important;
  color: rgb(55 55 55) !important;
  white-space: pre-wrap;
}

#clone-elevencreative .block-el-omnibox-slides .clone-omnibox-tag {
  display: inline !important;
  padding: 0.1rem 0.28rem !important;
  margin: 0 0.05rem !important;
  border-radius: 0.2rem !important;
  border: 1px solid rgb(183 67 198 / 0.22) !important;
  color: #b743c6 !important;
  white-space: nowrap !important;
  font-weight: 500 !important;
}

#clone-elevencreative .block-el-omnibox-slides .clone-omnibox-send {
  position: absolute !important;
  right: 0.85rem !important;
  bottom: 0.85rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 2.15rem !important;
  height: 2.15rem !important;
  border-radius: 9999px !important;
  border: none !important;
  background: #111 !important;
  color: #fff !important;
  cursor: default !important;
  box-shadow: none !important;
}

#clone-elevencreative .block-el-omnibox-slides .clone-omnibox-caption {
  position: relative;
  z-index: 20;
  flex-shrink: 0;
  padding: 0.1rem 1.35rem 1.25rem;
}

/* Desktop default: keep summary node out of the ElevenLabs two-column layout. */
#clone-elevencreative .block-el-omnibox-slides .clone-omnibox-mobile-summary {
  display: none;
}

/*
 * Mobile toolkit: demo first, then wrapping pill tabs.
 * Caption blurbs under the pills are desktop-only (hidden on phones).
 */
@media (max-width: 1023px) {
  #clone-elevencreative .block-el-omnibox-slides .tw-contents > .tw-grid,
  #clone-elevencreative .block-el-omnibox-slides > .tw-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.85rem !important;
  }

  /* Content / demo card */
  #clone-elevencreative .block-el-omnibox-slides [data-clone-omnibox-demo-col],
  #clone-elevencreative .block-el-omnibox-slides .tw-grid > .tw-relative.tw-flex {
    order: 1 !important;
    width: 100% !important;
    margin: 0 !important;
  }

  /* Caption lives in the demo context on desktop; hide the mobile summary blurb */
  #clone-elevencreative .block-el-omnibox-slides .clone-omnibox-mobile-summary {
    display: none !important;
  }

  /* Tabs organizer last — wrapping pills, not a tall vertical list */
  #clone-elevencreative .block-el-omnibox-slides [data-clone-omnibox-tabs-col],
  #clone-elevencreative .block-el-omnibox-slides .tw-grid > .tw-flex.tw-flex-col {
    order: 2 !important;
    width: 100% !important;
  }

  #clone-elevencreative .block-el-omnibox-slides .tw-overflow-x-auto {
    display: block !important;
    overflow: visible !important;
    overflow-x: visible !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    gap: 0 !important;
  }

  #clone-elevencreative .block-el-omnibox-slides .tw-flow-root > .tw-absolute.tw-w-16 {
    display: none !important;
  }

  #clone-elevencreative .block-el-omnibox-slides [role="tablist"][aria-label="Feature demos"] {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    margin-top: 0.25rem !important;
    padding-top: 0 !important;
    gap: 0.4rem !important;
  }

  #clone-elevencreative .block-el-omnibox-slides [role="tab"] {
    width: auto !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    justify-content: center !important;
    padding: 0.4rem 0.75rem 0.4rem 0.4rem !important;
  }

  #clone-elevencreative .block-el-omnibox-slides [role="tab"] h3 {
    font-size: 0.875rem !important;
    gap: 0.45rem !important;
  }

  /* Avoid duplicating the same blurb inside the cream card on phones. */
  #clone-elevencreative .block-el-omnibox-slides .clone-omnibox-card .clone-omnibox-caption {
    display: none !important;
  }

  #clone-elevencreative .block-el-omnibox-slides .clone-omnibox-open {
    order: 1;
  }

  #clone-elevencreative .block-el-omnibox-slides [data-clone-omnibox-preview] {
    order: 2;
    padding-top: 0.35rem !important;
    padding-bottom: 1rem !important;
  }

  /* Prev/next chrome is desktop-only */
  #clone-elevencreative .block-el-omnibox-slides .tw-hidden.lg\:tw-flex {
    display: none !important;
  }
}

#clone-elevencreative .block-el-omnibox-slides .clone-omnibox-caption-title,
#clone-elevencreative .block-el-omnibox-slides [data-clone-omnibox-caption-title] {
  margin: 0 0 0.4rem !important;
  font-family: var(--font-inter), "Inter", "Inter Fallback", ui-sans-serif, system-ui, sans-serif !important;
  font-size: 1.125rem !important;
  font-weight: 500 !important;
  color: #111 !important;
}

#clone-elevencreative .block-el-omnibox-slides .clone-omnibox-caption-body,
#clone-elevencreative .block-el-omnibox-slides [data-clone-omnibox-caption-body] {
  margin: 0 !important;
  font-family: var(--font-inter), "Inter", "Inter Fallback", ui-sans-serif, system-ui, sans-serif !important;
  font-size: 0.975rem !important;
  line-height: 1.5 !important;
  color: rgb(17 17 17 / 0.55) !important;
}

/* Match ElevenLabs models header: no CTA under the body copy */
#clone-elevencreative .block-el-title .tw-mt-6:has(a[href="/signup"]) {
  display: none !important;
}

/* Pull toolkit title → omnibox demo tighter so Brand kit / Meta doesn’t float. */
#clone-elevencreative .clone-cream-surface > .block-section:first-child .block-el-title {
  margin-bottom: clamp(1.15rem, 2vw, 1.75rem);
}

/* “One ecosystem…” — exactly two lines; nowrap spans prevent a third wrap. */
#clone-elevencreative .clone-cream-surface > .block-section:first-child .block-el-title h2 {
  max-width: none !important;
  white-space: normal !important;
}

#clone-elevencreative .clone-cream-surface > .block-section:first-child .block-el-title h2 > span {
  white-space: nowrap !important;
}

/*
 * Mobile: drop the “Research the market…” body under the ecosystem headline.
 * Desktop (lg+) keeps it as the right-column blurb beside the title.
 */
@media (max-width: 1023px) {
  #clone-elevencreative .clone-cream-surface > .block-section:first-child .block-el-title .tw-flex.tw-flex-col.tw-mt-8 {
    display: none !important;
  }
}

/* Soften local product shots — opacity only (filters force layers). */
#clone-elevencreative .block-el-content-grid img[src*="/clonehometest/media/"],
#clone-elevencreative .block-el-asset-rotator img[src*="/clonehometest/media/"] {
  opacity: 0.96;
}

#clone-elevencreative .tw-bg-black {
  background-color: #000 !important;
}

/*
 * “Available on the web…” 3-up content grid — exact ElevenLabs layout.
 * CDN utilities live in @layer and lose to Chakra; force unlayered.
 */
#clone-elevencreative .block-el-content-grid {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-left-width: 0 !important;
  border-right-width: 0 !important;
}

#clone-elevencreative .block-el-content-grid .tw-bg-\[rgb\(var\(--color-gray-100\)\)\] {
  background-color: rgb(var(--color-gray-100)) !important;
}

/* Primary / elevated CTAs — Chakra steals tw-text-white so pills look empty */
#clone-elevencreative a.tw-bg-black,
#clone-elevencreative a[appearance="primary"] {
  background-color: #111 !important;
  color: #fff !important;
}

#clone-elevencreative a.tw-bg-black:hover,
#clone-elevencreative a[appearance="primary"]:hover {
  background-color: #111 !important;
  color: #fff !important;
  opacity: 0.88;
}

#clone-elevencreative a[appearance="elevated"],
#clone-elevencreative a.tw-bg-white.tw-shadow-\[0_0_1px_rgba\(0\,0\,0\,0\.4\)\,0_1px_1px_rgba\(0\,0\,0\,0\.04\)\,0_2px_4px_rgba\(0\,0\,0\,0\.04\)\] {
  background-color: rgb(0 0 0 / 0.06) !important;
  color: rgb(17 17 17 / 0.72) !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  --tw-shadow: 0 0 #0000 !important;
  --tw-ring-shadow: 0 0 #0000 !important;
  --tw-ring-offset-shadow: 0 0 #0000 !important;
}

#clone-elevencreative a[appearance="elevated"]:hover,
#clone-elevencreative a.tw-bg-white.tw-shadow-\[0_0_1px_rgba\(0\,0\,0\,0\.4\)\,0_1px_1px_rgba\(0\,0\,0\,0\.04\)\,0_2px_4px_rgba\(0\,0\,0\,0\.04\)\]:hover {
  background-color: rgb(0 0 0 / 0.09) !important;
  color: #111 !important;
  opacity: 1;
}

/*
 * Unified cream pills — same language as case-study category tabs
 * (Music Artists / Tech & Apps…): text-sm · medium · px-4 · soft secondary.
 */
#clone-elevencreative [class*="group/cfe-row"] .tw-flex.tw-flex-wrap,
#clone-elevencreative .block-el-content-grid .tw-flex.tw-flex-wrap.tw-gap-2 {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

#clone-elevencreative [class*="group/cfe-row"] a[appearance="primary"],
#clone-elevencreative [class*="group/cfe-row"] a[appearance="elevated"],
#clone-elevencreative .block-el-content-grid a.tw-rounded-full.tw-h-11,
#clone-elevencreative .clone-four-boxes-slot a[href],
#clone-elevencreative .block-el-title a[href="/signup"].tw-rounded-full {
  position: relative !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  width: fit-content !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0.625rem 1rem !important; /* py-2.5 px-4 */
  border: none !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  border-radius: 9999px !important;
  outline: none !important;
  box-shadow: none !important;
  --tw-shadow: 0 0 #0000 !important;
  --tw-ring-shadow: 0 0 #0000 !important;
  --tw-ring-offset-shadow: 0 0 #0000 !important;
  font-family: var(--font-inter), "Inter", "Inter Fallback", ui-sans-serif, system-ui, sans-serif !important;
  font-size: 0.875rem !important; /* text-sm */
  font-weight: 500 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
  transform: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
  transition: background-color 160ms ease, color 160ms ease, opacity 160ms ease !important;
  z-index: 1 !important;
  isolation: isolate !important;
}

#clone-elevencreative .clone-four-boxes-slot a[href] {
  background-color: #111 !important;
  color: #fff !important;
  border-radius: 9999px !important;
}

#clone-elevencreative .clone-four-boxes-slot a[href]:hover {
  opacity: 0.88;
}

/* Portal bands live inside cream — same surface, no nested scoops / hard cuts */
#clone-elevencreative .clone-four-boxes-slot,
#clone-elevencreative .clone-case-studies-slot {
  color: #111;
  background: var(--brand-eggshell, var(--clone-cream, #fdfcfc));
}

/* Kill leftover Eleven TTS / magenta chrome if any markup remains */
#clone-elevencreative [style*="B743C6"],
#clone-elevencreative [style*="#B743C6"],
#clone-elevencreative [style*="b743c6"] {
  background: transparent !important;
  color: inherit !important;
  border-color: rgb(17 17 17 / 0.12) !important;
}

#clone-elevencreative .clone-four-boxes-slot > section {
  background: var(--brand-eggshell, #fdfcfc) !important;
}

#clone-elevencreative .clone-ask-ai-slot {
  color: inherit;
  background: transparent;
}

#clone-elevencreative .clone-four-boxes-slot {
  min-height: 32rem;
  overflow: visible;
}

#clone-elevencreative .clone-case-studies-slot {
  min-height: 28rem;
}

#clone-elevencreative .clone-ask-ai-slot {
  min-height: 12rem;
}

/* Empty portal hosts keep their cream band painted before React fills them. */
#clone-elevencreative .clone-four-boxes-slot:empty,
#clone-elevencreative .clone-case-studies-slot:empty,
#clone-elevencreative .clone-ask-ai-slot:empty {
  display: block;
}

/* Never leave the React four-box portal host at cream-reveal opacity:0. */
#clone-elevencreative .clone-four-boxes-slot.clone-reveal,
#clone-elevencreative .clone-case-studies-slot.clone-reveal {
  opacity: 1 !important;
  transform: none !important;
  will-change: auto !important;
}

#clone-elevencreative .clone-four-boxes-slot a,
#clone-elevencreative .clone-case-studies-slot a,
#clone-elevencreative .clone-ask-ai-slot a {
  text-decoration: none;
}

#clone-elevencreative .clone-four-boxes-slot > section,
#clone-elevencreative .clone-case-studies-slot > section,
#clone-elevencreative .clone-case-studies-slot > [data-nav-theme],
#clone-elevencreative .clone-case-studies-slot > div.relative {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-top: none !important;
  background-color: var(--clone-cream, #fdfcfc) !important;
  box-shadow: none !important;
  padding-top: var(--clone-section-y-tight) !important;
  padding-bottom: var(--clone-section-y-tight) !important;
  overflow: visible !important;
}

/* Hairline above “One system / that gets smarter.” */
#clone-elevencreative .clone-four-boxes-slot header {
  position: relative;
  padding-top: 0 !important;
  text-align: center !important;
}

/* Slot already has a full-width top rule from the cream grid; no short tick. */
#clone-elevencreative .clone-four-boxes-slot header::before {
  display: none !important;
}

/*
 * Match cream section titles — black Waldenburg, not homepage purple / giant clamp.
 * Mobile: centered two-line wrap (nowrap was clipping past section overflow).
 */
#clone-elevencreative .clone-four-boxes-slot header h2,
#clone-elevencreative .clone-four-boxes-slot header h2 strong,
#clone-elevencreative .clone-four-boxes-slot header h2 span {
  color: #111 !important;
  font-family: var(--font-waldenburg), "Waldenburg", "Waldenburg Fallback", ui-serif, Georgia, serif !important;
  font-size: var(--clone-display-size) !important;
  font-weight: var(--clone-display-weight) !important;
  font-variation-settings: "wght" 300, "opsz" 18, "ital" 0 !important;
  line-height: var(--clone-display-lh, 1.12) !important;
  letter-spacing: var(--clone-display-tracking, -0.02em) !important;
}

#clone-elevencreative .clone-four-boxes-slot header h2 {
  display: block !important;
  width: 100% !important;
  max-width: 14ch !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  white-space: normal !important;
  overflow: visible !important;
  text-wrap: balance;
}

@media (min-width: 640px) {
  #clone-elevencreative .clone-four-boxes-slot header h2 {
    max-width: none !important;
    white-space: nowrap !important;
  }
}

#clone-elevencreative .clone-four-boxes-slot header h2 strong {
  font-weight: 400 !important;
  font-variation-settings: "wght" 400, "opsz" 18, "ital" 0 !important;
}

#clone-elevencreative .clone-four-boxes-slot header h2 span {
  font-weight: var(--clone-display-weight) !important;
  font-variation-settings: "wght" 300, "opsz" 18, "ital" 0 !important;
  opacity: 1;
}


@media (max-width: 639px) {
  #clone-elevencreative .clone-four-boxes-slot > section {
    overflow-x: clip !important;
    overflow-y: visible !important;
  }
}

/* Ask AI lives in the marketing-dark FAQ scoop — never paint cream over it */
#clone-elevencreative .clone-ask-ai-slot > section,
#clone-elevencreative .clone-ask-ai-slot > div {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-top: none !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: #f5f7f8 !important;
}

#clone-elevencreative .clone-case-studies-slot {
  min-height: 28rem;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  overflow: visible;
  width: 100%;
}

#clone-elevencreative .clone-case-studies-slot.py-10,
#clone-elevencreative .clone-case-studies-slot.md\:py-16,
#clone-elevencreative .clone-case-studies-slot.sm\:py-16,
#clone-elevencreative .clone-case-studies-slot.lg\:py-16 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/*
 * Clear air between “How people use Clippable” + chips and the brand story.
 * Prefer data attrs — Tailwind gap classes are easy to miss under clone resets.
 */
#clone-elevencreative .clone-case-studies-slot [data-case-studies-stack="title-and-stories"] {
  display: flex !important;
  flex-direction: column !important;
  row-gap: 0 !important;
}

#clone-elevencreative
  .clone-case-studies-slot
  [data-case-studies-stack="title-and-stories"]
  > [data-case-studies-heading] {
  margin-bottom: 0 !important;
  padding-bottom: 3.75rem !important;
}

@media (max-width: 639px) {
  #clone-elevencreative
    .clone-case-studies-slot
    [data-case-studies-stack="title-and-stories"]
    > [data-case-studies-heading] {
    padding-bottom: 1.25rem !important;
    transform: none !important;
  }
}

#clone-elevencreative
  .clone-case-studies-slot
  [data-case-studies-stack="title-and-stories"]
  [data-case-studies-body] {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

@media (min-width: 640px) {
  #clone-elevencreative
    .clone-case-studies-slot
    [data-case-studies-stack="title-and-stories"]
    > [data-case-studies-heading] {
    padding-bottom: 4.75rem !important;
  }
}

@media (min-width: 1024px) {
  #clone-elevencreative
    .clone-case-studies-slot
    [data-case-studies-stack="title-and-stories"]
    > [data-case-studies-heading] {
    padding-bottom: 5.25rem !important;
  }
}

/* Brand under section title should read as a subhead, not a second hero line */
#clone-elevencreative
  .clone-case-studies-slot
  [data-case-studies-stack="title-and-stories"]
  [data-case-studies-body]
  h3 {
  font-size: clamp(1.45rem, 1.1rem + 1.1vw, 2.2rem) !important;
  line-height: 1.15 !important;
}

/* Case studies — same Waldenburg display face as hero / cream titles */
#clone-elevencreative .clone-case-studies-slot h2,
#clone-elevencreative .clone-case-studies-slot h3 {
  font-family: var(--font-waldenburg), "Waldenburg", "Waldenburg Fallback", ui-serif, Georgia, serif !important;
  font-weight: 300 !important;
  font-variation-settings: "wght" 300, "opsz" 18, "ital" 0 !important;
  letter-spacing: -0.03em !important;
}

/* Use more of the cream column so tabs + phones aren’t clipped at the rails */
#clone-elevencreative .clone-case-studies-slot [data-nav-theme] > div {
  max-width: none !important;
  width: 100% !important;
  padding-left: clamp(0.75rem, 2.2vw, 1.75rem) !important;
  padding-right: clamp(0.75rem, 2.2vw, 1.75rem) !important;
  /* Section pad lives on the portal root; kill nested py-* */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  box-sizing: border-box !important;
}

#clone-elevencreative .clone-case-studies-slot [data-nav-theme] > div > div {
  padding-left: 0 !important;
}

#clone-elevencreative .clone-ask-ai-slot {
  /* FAQ already owns the band gap — don't stack another section-y above Ask AI. */
  padding-top: 0.25rem;
  padding-bottom: var(--clone-section-y-tight);
}

/* FAQ → Ask AI share one dark scoop; kill the leftover ElevenLabs section bottom pad. */
#clone-elevencreative [data-clone-faq-band="start"] .pb-80,
#clone-elevencreative [data-clone-faq-band="start"] .md\:pb-120,
#clone-elevencreative [data-clone-faq-band="start"] .pb-120 {
  padding-bottom: clamp(1rem, 2vw, 1.75rem) !important;
}

#clone-elevencreative [data-clone-ask-ai].block-section {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/*
 * FAQ → Ask AI → Latest updates → closing CTA
 * Continuous homepage marketing-dark scoop (#0a1118). Marked sections (no
 * wrapper div — ElevenLabs nesting closes wrappers early).
 */
#clone-elevencreative [data-clone-faq-band],
.clonehometest-body .clone-closing-cta[data-clone-faq-band="end"] {
  --clone-faq-bg: var(--brand-marketing-dark-warm, #101214);
  --page-background-color: var(--clone-faq-bg);
  --marker-background-color: var(--clone-faq-bg);
  --color-gray-100: 17 26 34;
  background: var(--clone-faq-bg) !important;
  background-color: var(--clone-faq-bg) !important;
  color: #f5f7f8 !important;
}

#clone-elevencreative [data-clone-faq-band="start"] {
  position: relative;
  /* Sit over the flat cream edge — only this top scoop should read as the curve */
  z-index: 4;
  margin-top: calc(-1 * var(--clone-band-overlap));
  padding-top: 0;
  border-top: 1px solid rgb(255 255 255 / 0.1);
  border-top-left-radius: var(--clone-scoop-tl);
  border-top-right-radius: var(--clone-scoop-tr);
  background: var(--clone-faq-bg, #0a1118) !important;
  background-color: var(--clone-faq-bg, #0a1118) !important;
  overflow: hidden;
  isolation: isolate;
}

#clone-elevencreative [data-clone-faq-band="start"] .pt-80,
#clone-elevencreative [data-clone-faq-band="start"] .pt-120,
#clone-elevencreative [data-clone-faq-band="start"] .md\:pt-120 {
  padding-top: var(--clone-section-y) !important;
}

#clone-elevencreative [data-clone-faq-band="part"] {
  position: relative;
  z-index: 3;
  border-radius: 0;
}

#clone-elevencreative [data-clone-faq-band] .tw-text-black,
#clone-elevencreative [data-clone-faq-band] h2,
#clone-elevencreative [data-clone-faq-band] h3,
#clone-elevencreative [data-clone-faq-band] .tw-type-5xl,
#clone-elevencreative [data-clone-faq-band] .tw-type-base {
  color: var(--brand-parchment, #f5f0e8) !important;
}

#clone-elevencreative [data-clone-faq-band] h2.tw-type-5xl,
.clonehometest-body .clone-closing-cta h2 {
  font-family: var(--font-waldenburg), "Waldenburg", "Waldenburg Fallback", ui-serif, Georgia, serif !important;
  font-weight: 300 !important;
}

#clone-elevencreative [data-clone-faq-band] .tw-text-gray-600,
#clone-elevencreative [data-clone-faq-band] .tw-text-gray-500,
#clone-elevencreative [data-clone-faq-band] .tw-opacity-40,
#clone-elevencreative [data-clone-faq-band] button[aria-expanded="false"] h3,
#clone-elevencreative [data-clone-faq-band] .f-paragraph-02,
#clone-elevencreative [data-clone-faq-band] p {
  color: rgb(245 247 248 / 0.72) !important;
}

#clone-elevencreative [data-clone-faq-band] button[aria-expanded="true"] h3,
#clone-elevencreative [data-clone-faq-band] button[aria-expanded="true"] .tw-type-base {
  color: #fff !important;
  opacity: 1 !important;
}

/*
 * Continuous dark scoop — strip ElevenLabs rails / hairlines / corner ticks
 * so FAQ → Ask AI → Latest updates reads as one surface (no boxed seams).
 */
#clone-elevencreative [data-clone-faq-band] .container.border-l,
#clone-elevencreative [data-clone-faq-band] .container.border-r,
#clone-elevencreative [data-clone-faq-band] .relative.container.border-l.border-r {
  border-left: none !important;
  border-right: none !important;
  border-color: transparent !important;
}

#clone-elevencreative [data-clone-faq-band] .h-1.bg-overlay-dark,
#clone-elevencreative [data-clone-faq-band] .bg-overlay-dark.h-1,
#clone-elevencreative [data-clone-faq-band] .absolute.top-0.h-1,
#clone-elevencreative [data-clone-faq-band] .absolute.bottom-0.h-1,
#clone-elevencreative [data-clone-faq-band] .mt-0\.5.h-1.w-full.bg-overlay-dark,
#clone-elevencreative [data-clone-faq-band] .relative.h-\[2px\],
#clone-elevencreative [data-clone-faq-band] .block-el-faqs [style*="repeating-radial-gradient"] {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#clone-elevencreative [data-clone-faq-band] .tw-absolute.tw-z-20.tw-flex.tw-size-5 {
  display: none !important;
}

/* FAQ — centered heading + rounded card rows (legacy homepage FAQ style) */
#clone-elevencreative [data-clone-faq-band] .block-el-faqs {
  max-width: 48rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

#clone-elevencreative [data-clone-faq-band] .block-el-faqs .lg\:tw-flex {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
}

#clone-elevencreative [data-clone-faq-band] .block-el-faqs > .lg\:tw-flex > h2,
#clone-elevencreative [data-clone-faq-band] .block-el-faqs h2.tw-type-5xl {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 0 2.5rem !important;
  padding: 0 !important;
  flex: none !important;
  text-align: center !important;
  font-size: clamp(2rem, 4.2vw, 3.5rem) !important;
  font-weight: 500 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.1 !important;
  color: #fff !important;
}

#clone-elevencreative [data-clone-faq-band] .block-el-faqs h2.tw-type-5xl::before {
  content: "FAQ";
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: rgb(255 255 255 / 0.55);
}

#clone-elevencreative [data-clone-faq-band] .block-el-faqs > .lg\:tw-flex > .tw-flex-auto {
  width: 100% !important;
  flex: none !important;
}

#clone-elevencreative [data-clone-faq-band] .block-el-faqs .tw-flow-root {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

#clone-elevencreative [data-clone-faq-band] .block-el-faqs .tw-group[data-rac] {
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-bottom: 1px solid rgb(255 255 255 / 0.12) !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  isolation: auto !important;
}

#clone-elevencreative [data-clone-faq-band] .block-el-faqs .tw-group[data-rac]:hover {
  border-color: rgb(255 255 255 / 0.18) !important;
  background: transparent !important;
  background-color: transparent !important;
}

#clone-elevencreative [data-clone-faq-band] .block-el-faqs .tw-flow-root > .tw-group[data-rac]:last-child {
  border-bottom: none !important;
}

#clone-elevencreative [data-clone-faq-band] .block-el-faqs button[slot="trigger"],
#clone-elevencreative [data-clone-faq-band] .block-el-faqs button[data-rac] {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

#clone-elevencreative [data-clone-faq-band] .block-el-faqs button[aria-expanded] .tw-flex.tw-gap-4 {
  align-items: center !important;
  gap: 1rem !important;
}

#clone-elevencreative [data-clone-faq-band] .block-el-faqs button[aria-expanded] .tw-py-5,
#clone-elevencreative [data-clone-faq-band] .block-el-faqs button[aria-expanded] .tw-flex-auto {
  padding-top: 1.25rem !important;
  padding-bottom: 1.25rem !important;
  font-size: 0.9375rem !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  color: #fff !important;
  opacity: 1 !important;
}

@media (min-width: 640px) {
  #clone-elevencreative [data-clone-faq-band] .block-el-faqs button[aria-expanded] .tw-py-5,
  #clone-elevencreative [data-clone-faq-band] .block-el-faqs button[aria-expanded] .tw-flex-auto {
    font-size: 1rem !important;
  }
}

/* Keep question readable whether open or closed (cards, not muted flat rows). */
#clone-elevencreative [data-clone-faq-band] .block-el-faqs button[aria-expanded="false"] h3,
#clone-elevencreative [data-clone-faq-band] .block-el-faqs button[aria-expanded="false"] .tw-flex-auto,
#clone-elevencreative [data-clone-faq-band] .block-el-faqs button[aria-expanded="true"] h3,
#clone-elevencreative [data-clone-faq-band] .block-el-faqs button[aria-expanded="true"] .tw-flex-auto {
  color: #fff !important;
  opacity: 1 !important;
}

/* Clean Plus → X (hide ElevenLabs dual-stroke glyphs). */
#clone-elevencreative [data-clone-faq-band] .block-el-faqs button[aria-expanded] .tw-size-5.tw-relative {
  flex: none !important;
  width: 1.25rem !important;
  height: 1.25rem !important;
  margin-top: 0 !important;
  color: rgb(255 255 255 / 0.5) !important;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), color 180ms ease !important;
}

#clone-elevencreative [data-clone-faq-band] .block-el-faqs button[aria-expanded] .tw-size-5.tw-relative svg {
  display: none !important;
}

#clone-elevencreative [data-clone-faq-band] .block-el-faqs button[aria-expanded] .tw-size-5.tw-relative::before,
#clone-elevencreative [data-clone-faq-band] .block-el-faqs button[aria-expanded] .tw-size-5.tw-relative::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: currentColor;
  border-radius: 1px;
}

#clone-elevencreative [data-clone-faq-band] .block-el-faqs button[aria-expanded] .tw-size-5.tw-relative::before {
  width: 0.75rem;
  height: 1.5px;
  transform: translate(-50%, -50%);
}

#clone-elevencreative [data-clone-faq-band] .block-el-faqs button[aria-expanded] .tw-size-5.tw-relative::after {
  width: 1.5px;
  height: 0.75rem;
  transform: translate(-50%, -50%);
}

#clone-elevencreative [data-clone-faq-band] .block-el-faqs button[aria-expanded="true"] .tw-size-5.tw-relative {
  color: rgb(255 255 255 / 0.72) !important;
}

/* Smooth FAQ answer slide (JS sets height; keep overflow clipped) */
#clone-elevencreative [data-clone-faq-band] .block-el-faqs [role="group"],
#clone-elevencreative [data-clone-faq-band] .block-el-faqs .tw-overflow-clip {
  overflow: hidden !important;
  will-change: height, opacity;
}

#clone-elevencreative [data-clone-faq-band] .block-el-faqs [role="group"] .tw-pb-8 {
  padding-top: 0 !important;
  padding-bottom: 1.25rem !important;
}

#clone-elevencreative [data-clone-faq-band] .block-el-faqs [role="group"] p {
  color: rgb(255 255 255 / 0.7) !important;
  line-height: 1.625 !important;
}

/* Ask AI — parchment on warm marketing-dark (matches charcoal family) */
#clone-elevencreative [data-clone-faq-band] .clone-ask-ai-slot,
#clone-elevencreative [data-clone-faq-band] .clone-ask-ai-slot > div,
#clone-elevencreative [data-clone-ask-ai] .clone-ask-ai-slot,
#clone-elevencreative [data-clone-ask-ai] .clone-ask-ai-slot > div {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--brand-parchment, #f5f0e8) !important;
}

#clone-elevencreative [data-clone-faq-band] .clone-ask-ai-slot h2,
#clone-elevencreative [data-clone-faq-band] .clone-ask-ai-slot [class*="TypographyH2"],
#clone-elevencreative [data-clone-faq-band] .clone-ask-ai-slot .text-brand-ink,
#clone-elevencreative [data-clone-faq-band] .clone-ask-ai-slot .text-brand-parchment,
#clone-elevencreative [data-clone-ask-ai] .clone-ask-ai-slot h2,
#clone-elevencreative [data-clone-ask-ai] .clone-ask-ai-slot [class*="TypographyH2"],
#clone-elevencreative [data-clone-ask-ai] .clone-ask-ai-slot .text-brand-ink,
#clone-elevencreative [data-clone-ask-ai] .clone-ask-ai-slot .text-brand-parchment,
#clone-elevencreative [data-clone-ask-ai] .clone-ask-ai-slot [class*="text-\["] {
  color: var(--brand-parchment, #f5f0e8) !important;
  font-family: var(--font-waldenburg), "Waldenburg", "Waldenburg Fallback", ui-serif, Georgia, serif !important;
  font-weight: 300 !important;
}

#clone-elevencreative [data-clone-faq-band] .clone-ask-ai-slot p,
#clone-elevencreative [data-clone-faq-band] .clone-ask-ai-slot .text-brand-body-muted,
#clone-elevencreative [data-clone-faq-band] .clone-ask-ai-slot .text-brand-parchment-muted,
#clone-elevencreative [data-clone-ask-ai] .clone-ask-ai-slot p,
#clone-elevencreative [data-clone-ask-ai] .clone-ask-ai-slot .text-brand-body-muted,
#clone-elevencreative [data-clone-ask-ai] .clone-ask-ai-slot .text-brand-parchment-muted {
  color: var(--brand-parchment-muted, #a39e93) !important;
}

#clone-elevencreative [data-clone-faq-band] .clone-ask-ai-slot a,
#clone-elevencreative [data-clone-ask-ai] .clone-ask-ai-slot a {
  border-color: rgb(255 255 255 / 0.16) !important;
  background: rgb(255 255 255 / 0.06) !important;
  color: #fff !important;
}

#clone-elevencreative [data-clone-faq-band] .clone-ask-ai-slot a img,
#clone-elevencreative [data-clone-ask-ai] .clone-ask-ai-slot a img {
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

#clone-elevencreative [data-clone-faq-band] .clone-ask-ai-slot a img[src*="openai-logo"],
#clone-elevencreative [data-clone-ask-ai] .clone-ask-ai-slot a img[src*="openai-logo"] {
  filter: brightness(0) invert(1) !important;
}

#clone-elevencreative [data-clone-faq-band] .clone-ask-ai-slot a:hover,
#clone-elevencreative [data-clone-ask-ai] .clone-ask-ai-slot a:hover {
  background: rgb(255 255 255 / 0.1) !important;
}

/* Mobile: Ask ChatGPT + Ask Claude stay one row, one line each */
@media (max-width: 767px) {
  #clone-elevencreative .clone-ask-ai-slot [data-ask-ai-actions] {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #clone-elevencreative .clone-ask-ai-slot [data-ask-ai-actions] a {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    font-size: 0.8125rem !important;
    padding-left: 0.65rem !important;
    padding-right: 0.65rem !important;
    gap: 0.4rem !important;
  }
}

/* Latest updates on dark */
#clone-elevencreative [data-clone-faq-band] ul[blossom-carousel="true"] article h3,
#clone-elevencreative [data-clone-faq-band] ul[blossom-carousel="true"] article h3 a {
  color: #fff !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

#clone-elevencreative [data-clone-faq-band] ul[blossom-carousel="true"] article h3 a span[class*="tw-absolute"],
#clone-elevencreative [data-clone-faq-band] ul[blossom-carousel="true"] article h3 a span.tw-absolute {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

#clone-elevencreative [data-clone-faq-band] ul[blossom-carousel="true"] article .tw-aspect-square {
  border-radius: 1.15rem !important;
  box-shadow: none !important;
  outline: none !important;
  border: none !important;
  overflow: hidden !important;
}

/* Kill ElevenLabs inset “card” rings + focus outlines on Latest updates */
#clone-elevencreative [data-clone-faq-band] ul[blossom-carousel="true"] article [class*="tw-ring"],
#clone-elevencreative ul[blossom-carousel="true"] article [class*="tw-ring-inset"] {
  display: none !important;
  box-shadow: none !important;
  --tw-ring-shadow: 0 0 #0000 !important;
  --tw-ring-offset-shadow: 0 0 #0000 !important;
}

#clone-elevencreative ul[blossom-carousel="true"] article .tw-aspect-square[class*="outline-focus"],
#clone-elevencreative ul[blossom-carousel="true"] article .group-has-\[\:focus-visible\]\:tw-outline-focus,
#clone-elevencreative ul[blossom-carousel="true"] article:focus-within .tw-aspect-square {
  outline: none !important;
  box-shadow: none !important;
}

#clone-elevencreative [data-clone-faq-band] ul[blossom-carousel="true"] article dl,
#clone-elevencreative [data-clone-faq-band] ul[blossom-carousel="true"] article time,
#clone-elevencreative [data-clone-faq-band] ul[blossom-carousel="true"] article dd {
  color: rgb(245 247 248 / 0.6) !important;
}

#clone-elevencreative [data-clone-faq-band] a.tw-bg-black,
#clone-elevencreative [data-clone-faq-band] a[appearance="primary"] {
  background-color: #fff !important;
  color: #0a1118 !important;
  box-shadow: none !important;
}

#clone-elevencreative [data-clone-faq-band] a.tw-bg-black:hover,
#clone-elevencreative [data-clone-faq-band] a[appearance="primary"]:hover {
  background-color: #fff !important;
  color: #0a1118 !important;
  opacity: 0.88;
}

#clone-elevencreative [data-clone-faq-band] a[appearance="elevated"],
#clone-elevencreative [data-clone-faq-band] a.tw-bg-white {
  background-color: rgb(255 255 255 / 0.08) !important;
  color: rgb(255 255 255 / 0.75) !important;
  box-shadow: none !important;
}

#clone-elevencreative [data-clone-faq-band] a[appearance="elevated"]:hover,
#clone-elevencreative [data-clone-faq-band] a.tw-bg-white:hover {
  background-color: rgb(255 255 255 / 0.12) !important;
  color: #fff !important;
  opacity: 1;
}

/* Latest updates “All updates” + any dark-band rounded CTAs — category-tab scale */
#clone-elevencreative [data-clone-faq-band] a.tw-rounded-full.tw-h-11,
#clone-elevencreative [data-clone-faq-band] a[appearance="primary"],
#clone-elevencreative [data-clone-faq-band] a[appearance="elevated"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0.625rem 1rem !important;
  border: none !important;
  border-width: 0 !important;
  border-radius: 9999px !important;
  outline: none !important;
  box-shadow: none !important;
  --tw-shadow: 0 0 #0000 !important;
  --tw-ring-shadow: 0 0 #0000 !important;
  font-family: var(--font-inter), "Inter", "Inter Fallback", ui-sans-serif, system-ui, sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
  text-decoration: none !important;
  transform: none !important;
  transition: background-color 160ms ease, color 160ms ease, opacity 160ms ease !important;
}

/*
 * Closing CTA — end of the same marketing-dark scoop (not a separate charcoal band).
 * Mobile: globe in-flow under CTAs (old BrandsSection sphere). sm+: absolute backdrop.
 */
.clonehometest-body .clone-closing-cta[data-clone-faq-band="end"],
#clone-elevencreative .clone-closing-cta[data-clone-faq-band="end"] {
  position: relative;
  z-index: 3;
  margin-top: 0 !important;
  padding-top: var(--clone-section-y) !important;
  /* Mobile globe is in-flow (old brands size); pad only for the soft fade + scoop */
  padding-bottom: 0 !important;
  min-height: 0;
  /* Same plate as FAQ / Latest updates — never a separate charcoal or #0a1118 hardcode */
  background: var(--clone-faq-bg, var(--brand-marketing-dark-warm, #0d1115)) !important;
  background-color: var(--clone-faq-bg, var(--brand-marketing-dark-warm, #0d1115)) !important;
  color: #f5f7f8 !important;
  border-top: none !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  /* Match homepage `.home-landing-footer-handoff` into black footer */
  border-bottom-left-radius: 2rem 1.25rem !important;
  border-bottom-right-radius: 2rem 1.25rem !important;
  overflow: hidden;
  isolation: isolate;
  /*
   * Thin black ledge only — a tall solid shadow was painting over the footer
   * (logo + column titles) because this band stacks above the footer.
   */
  box-shadow: 0 0.75rem 0 0 #000;
}

@media (min-width: 640px) {
  .clonehometest-body .clone-closing-cta[data-clone-faq-band="end"],
  #clone-elevencreative .clone-closing-cta[data-clone-faq-band="end"] {
    /* Tall enough for a round Earth behind the CTA — not a flat mid-band crop */
    padding-bottom: clamp(10rem, 22vw, 14rem) !important;
    min-height: min(88vw, 44rem);
    border-bottom-left-radius: 2.5rem 1.75rem !important;
    border-bottom-right-radius: 2.5rem 1.75rem !important;
  }
}

.clonehometest-body .clone-closing-cta[data-clone-faq-band="end"] .clone-closing-globe-slot {
  background: transparent !important;
}

.clonehometest-body .clone-closing-cta h2 {
  font-family: var(--font-waldenburg), "Waldenburg", "Waldenburg Fallback", ui-serif, Georgia, serif !important;
  color: #f5f7f8 !important;
  font-size: clamp(2.75rem, 7.2vw, 5.25rem) !important;
  font-weight: var(--clone-display-weight) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.04em !important;
  position: relative;
  z-index: 2;
}

.clonehometest-body .clone-closing-cta .clone-closing-cta-actions {
  position: relative;
  z-index: 2;
  margin-top: var(--clone-space-5) !important;
  gap: var(--clone-space-2) !important;
}

.clonehometest-body .clone-closing-cta a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--font-inter), "Inter", "Inter Fallback", ui-sans-serif, system-ui, sans-serif !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
  padding: 0.625rem 1rem !important;
  border: none !important;
  border-radius: 9999px !important;
  outline: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
  transition: background-color 160ms ease-out, color 160ms ease-out !important;
}

.clonehometest-body .clone-closing-cta a.bg-canvas-foreground {
  background: #fff !important;
  color: #0a1118 !important;
  text-decoration: none !important;
}

.clonehometest-body .clone-closing-cta a.bg-canvas-foreground:hover {
  background: var(--brand-purple, #6832e0) !important;
  color: #fff !important;
}

.clonehometest-body .clone-closing-cta a.bg-pill {
  background: rgb(255 255 255 / 0.08) !important;
  color: rgb(255 255 255 / 0.75) !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

.clonehometest-body .clone-closing-cta a.bg-pill:hover {
  background: rgb(255 255 255 / 0.14) !important;
  color: #fff !important;
}

.clonehometest-body .clone-closing-cta img {
  display: block;
  max-width: min(55rem, 100vw);
  margin-left: auto;
  margin-right: auto;
}

/*
 * Closing globe slot
 * - Mobile: in-flow under headline/CTAs — same sphere as old BrandsSection
 *   (HOME_GLOBE_MOBILE_SIZE_CLASS + soft bottom fade). No absolute crop fights.
 * - sm+: absolute backdrop under the copy (desktop closing look).
 */
.clonehometest-body .clone-closing-cta[data-clone-faq-band="end"] {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.clonehometest-body .clone-closing-globe-slot {
  position: relative !important;
  inset: auto !important;
  z-index: 0 !important;
  order: 3;
  width: 100% !important;
  max-width: none !important;
  /*
   * Mobile: keep normal flow margins so an empty/warm slot never pulls the
   * footer over the headline. Sphere crop is section overflow + mask on mobile.
   */
  margin: -0.25rem 0 0 !important;
  overflow: visible !important;
  background: transparent !important;
  pointer-events: auto;
  min-height: 0 !important;
  height: auto !important;
  max-height: none;
}

.clonehometest-body .clone-closing-cta h2 {
  order: 1;
}

.clonehometest-body .clone-closing-cta .clone-closing-cta-actions {
  order: 2;
}

.clonehometest-body .clone-closing-globe-slot > * {
  pointer-events: auto;
  width: 100% !important;
  max-width: 100% !important;
  left: auto !important;
  transform: none !important;
  margin: 0 !important;
  min-height: 0 !important;
  height: auto !important;
}

/* Copy + buttons stay above the canvas and keep their own hit targets */
.clonehometest-body .clone-closing-cta h2,
.clonehometest-body .clone-closing-cta .clone-closing-cta-actions {
  pointer-events: none;
  position: relative;
  z-index: 2;
}

.clonehometest-body .clone-closing-cta .clone-closing-cta-actions a {
  pointer-events: auto;
}

/* Closing variant has no quote — keep any leftover brands chrome hidden */
.clonehometest-body .clone-closing-globe-slot figure,
.clonehometest-body .clone-closing-globe-slot .grid > [class*="z-20"] {
  display: none !important;
}

/* Let the React closing variant size the sphere (do not override width/height) */
.clonehometest-body .clone-closing-globe-slot .grid,
.clonehometest-body .clone-closing-globe-slot [class*="justify-center"] {
  width: 100% !important;
}

/* Desktop only — must stay ≥768 so it never fights the mobile closing crop */
@media (min-width: 768px) {
  .clonehometest-body .clone-closing-globe-slot {
    position: absolute !important;
    inset: 0 !important;
    order: 0;
    margin: 0 !important;
    overflow: hidden !important;
    min-height: 100% !important;
    height: 100% !important;
    max-height: none !important;
  }

  .clonehometest-body .clone-closing-globe-slot > * {
    min-height: 100% !important;
    height: 100% !important;
  }

  /*
   * Keep intermediate wrappers filling the slot. The old flex + absolute sphere
   * combo collapsed the justify-center parent to height:0, so bottom:-28%
   * resolved to 0 and the Earth sat fully above the crop (stars-only).
   */
  .clonehometest-body .clone-closing-globe-slot > * > .relative {
    height: 100% !important;
    min-height: 100% !important;
  }

  .clonehometest-body .clone-closing-globe-slot [class*="justify-center"] {
    position: static !important;
    display: block !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /*
   * Desktop: center the sphere behind the headline with a light bottom tuck.
   * `bottom: -72%` sliced Earth into a flat band (top + bottom overflow clips).
   */
  .clonehometest-body .clone-closing-globe-slot [class*="aspect-square"] {
    position: absolute !important;
    left: 50% !important;
    top: 48% !important;
    bottom: auto !important;
    right: auto !important;
    transform: translate(-50%, -46%) !important;
    margin: 0 !important;
    width: min(88vw, 860px) !important;
    max-width: min(88vw, 860px) !important;
    height: min(88vw, 860px) !important;
  }
}

@media (min-width: 90rem) {
  .clonehometest-body .clone-closing-globe-slot [class*="aspect-square"] {
    width: min(68vw, 980px) !important;
    max-width: min(68vw, 980px) !important;
    height: min(68vw, 980px) !important;
    top: 50% !important;
    transform: translate(-50%, -48%) !important;
  }

  .clonehometest-body .clone-closing-globe-slot .grid > [class*="max-w-7xl"],
  .clonehometest-body .clone-closing-globe-slot .relative.mx-auto {
    max-width: min(100%, var(--clone-container-max, 90rem)) !important;
    padding-left: clamp(2.5rem, 3vw, 3.5rem) !important;
    padding-right: clamp(2.5rem, 3vw, 3.5rem) !important;
  }

  .clonehometest-body .clone-closing-globe-slot figure {
    max-width: 40rem !important;
  }

  .clonehometest-body .clone-closing-globe-slot figure blockquote {
    font-size: clamp(1.9rem, 1.5vw, 2.15rem) !important;
  }

  .clonehometest-body .clone-closing-cta h2.font-display {
    font-size: clamp(3.25rem, 4.2vw, 4.75rem) !important;
  }
}

@media (min-width: 120rem) {
  .clonehometest-body .clone-closing-globe-slot [class*="aspect-square"] {
    width: min(60vw, 1180px) !important;
    max-width: min(60vw, 1180px) !important;
    height: min(60vw, 1180px) !important;
  }

  .clonehometest-body .clone-closing-globe-slot figure {
    max-width: 44rem !important;
  }

  .clonehometest-body .clone-closing-cta h2.font-display {
    font-size: clamp(3.75rem, 3.6vw, 5.25rem) !important;
  }
}

/* Stars: undo left bias; pin to viewport center behind the copy */
.clonehometest-body .clone-closing-globe-slot [aria-hidden="true"][class*="absolute"][class*="z-0"] {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  margin-left: 0 !important;
  opacity: 0.95 !important;
}

/* (Enterprise accordion removed — partners band uses clone-partners--cream) */

.clonehometest-body .clone-raylight-footer {
  background: #000 !important;
  color: #fff !important;
}

.clonehometest-body .clone-raylight-footer .text-foreground,
.clonehometest-body .clone-raylight-footer p {
  color: #fff !important;
}

.clonehometest-body .clone-raylight-footer .text-muted-foreground,
.clonehometest-body .clone-raylight-footer a {
  color: rgba(255, 255, 255, 0.55) !important;
  text-decoration: none !important;
}

.clonehometest-body .clone-raylight-footer a:hover {
  color: #fff !important;
}

.clonehometest-body .clone-raylight-footer .text-muted-foreground\/60 {
  color: rgba(255, 255, 255, 0.4) !important;
}

#clone-elevencreative [class*="group/cfe-row"] {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  align-items: stretch !important;
}

/* Mobile / tablet: horizontal 1px rules between stacked cards — span cream rails */
#clone-elevencreative [class*="group/cfe-row"] > .relative.h-1.w-full.bg-overlay-dark {
  display: block !important;
  position: relative !important;
  left: 50% !important;
  width: calc(100vw - 2 * var(--clone-rail-x, 1.25rem)) !important;
  max-width: none !important;
  height: 1px !important;
  min-height: 1px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  transform: translateX(-50%) !important;
  background-color: var(--clone-rail-color, rgba(0, 0, 0, 0.08)) !important;
}

@media (min-width: 64rem) {
  #clone-elevencreative [class*="group/cfe-row"] {
    grid-template-columns: 1fr auto 1fr auto 1fr !important;
    gap: 0 !important;
  }

  /* Vertical 1px gutters between the three cards */
  #clone-elevencreative [class*="group/cfe-row"] > .relative.h-1.w-full.bg-overlay-dark {
    display: block !important;
    position: relative !important;
    left: auto !important;
    transform: none !important;
    width: 1px !important;
    height: auto !important;
    min-height: 100% !important;
    align-self: stretch !important;
    justify-self: stretch !important;
  }

  /* FAQ cards stay stacked + centered at all breakpoints */
  #clone-elevencreative [data-clone-faq-band] .block-el-faqs .lg\:tw-flex {
    display: flex !important;
    flex-direction: column !important;
  }
}

/*
 * Latest updates — 3-up media row (flat, no card chrome).
 * Force carousel width vars that often fail under Chakra.
 */
#clone-elevencreative [data-clone-latest-updates] + .block-section ul[blossom-carousel],
#clone-elevencreative ul[blossom-carousel="true"] {
  display: flex !important;
  gap: 1rem !important;
  list-style: none !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
}

#clone-elevencreative ul[blossom-carousel="true"]::-webkit-scrollbar {
  display: none;
}

#clone-elevencreative ul[blossom-carousel="true"] > li {
  flex: 0 0 min(100%, 20rem) !important;
  width: min(100%, 20rem) !important;
  max-width: 100%;
  scroll-snap-align: start;
}

/* Mobile: show all 3 articles stacked — not a 1-card horizontal carousel */
@media (max-width: 39.99rem) {
  #clone-elevencreative [data-clone-latest-updates] + .block-section ul[blossom-carousel],
  #clone-elevencreative [data-clone-latest-updates] + .block-section ul[blossom-carousel="true"],
  #clone-elevencreative ul[blossom-carousel="true"] {
    flex-direction: column !important;
    gap: 2rem !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #clone-elevencreative [data-clone-latest-updates] + .block-section ul[blossom-carousel="true"] > li,
  #clone-elevencreative ul[blossom-carousel="true"] > li {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Hide blossom prev/next chrome — all three cards are already visible */
  #clone-elevencreative [data-clone-latest-updates] + .block-section button[aria-label="Previous"],
  #clone-elevencreative [data-clone-latest-updates] + .block-section button[aria-label="Next"] {
    display: none !important;
  }
}

#clone-elevencreative ul[blossom-carousel="true"] article .tw-aspect-square {
  position: relative !important;
  aspect-ratio: 1 / 1 !important;
  width: 100% !important;
  overflow: hidden !important;
  border-radius: 1.15rem !important;
  box-shadow: none !important;
  outline: none !important;
  border: none !important;
  background-color: transparent !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

#clone-elevencreative ul[blossom-carousel="true"] article .tw-aspect-square > img {
  display: none !important;
}

#clone-elevencreative ul[blossom-carousel="true"] article h3 {
  margin-top: 1.5rem !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  font-size: clamp(1.15rem, 1.4vw, 1.35rem) !important;
  line-height: 1.3 !important;
  font-weight: 500 !important;
  color: #111 !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

#clone-elevencreative ul[blossom-carousel="true"] article h3 a {
  color: inherit !important;
  text-decoration: none !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

#clone-elevencreative ul[blossom-carousel="true"] article dl {
  margin-top: 1.25rem !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.625rem 0.625rem !important;
}

#clone-elevencreative ul[blossom-carousel="true"] article dd {
  margin: 0 !important;
  font-size: 0.75rem !important;
  line-height: 1.3 !important;
}

@media (min-width: 40rem) {
  #clone-elevencreative ul[blossom-carousel="true"] > li {
    flex-basis: calc((100% - 1rem) / 2) !important;
    width: calc((100% - 1rem) / 2) !important;
  }
}

@media (min-width: 64rem) {
  #clone-elevencreative ul[blossom-carousel="true"] {
    overflow: visible !important;
  }

  #clone-elevencreative ul[blossom-carousel="true"] > li {
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: none !important;
  }

  /*
   * ElevenLabs `lg:tw-grid` / `lg:tw-col-span-*` live in @layer and lose to
   * Chakra/Next unlayered resets — force the 12-col title rows (Flows, Latest
   * updates, etc.) so the right-hand subtitle sits beside the headline.
   */
  #clone-elevencreative .lg\:tw-grid.lg\:tw-grid-cols-12 {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    column-gap: 3rem !important;
    align-items: start !important;
  }

  #clone-elevencreative .lg\:tw-col-span-6 {
    grid-column: span 6 / span 6 !important;
  }

  #clone-elevencreative .tw-contents.lg\:tw-block {
    display: block !important;
  }

  #clone-elevencreative .lg\:tw-mt-0 {
    margin-top: 0 !important;
  }
}

/*
 * Flows feature tabs (Research / Create / Scale) — match ElevenCreative Flows:
 * soft rounded shell on the media card only; clean 3 progress columns below
 * (no per-tab boxes / outlines).
 *
 * Live markup nests `.tw-order-1` / `.tw-order-2` inside a flex wrapper — do not
 * require direct-child (`>`) selectors or spacing hits the wrong node.
 */
#clone-elevencreative .block-el-asset-rotator[data-clone-flows-rotator],
#clone-elevencreative .block-el-asset-rotator:has([data-clone-flows-tabs]) {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  gap: 0 !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

#clone-elevencreative .block-el-asset-rotator:has([data-clone-flows-tabs]) > .tw-flex.tw-flex-col {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  gap: 0 !important;
}

/* Media — stay tight under the section title; soft shell only here */
#clone-elevencreative .block-el-asset-rotator:has([data-clone-flows-tabs]) .tw-order-1 {
  order: 1 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0.65rem !important;
  border-radius: 1.5rem !important;
  background: #f3f1ef !important;
}

@media (min-width: 768px) {
  #clone-elevencreative .block-el-asset-rotator:has([data-clone-flows-tabs]) .tw-order-1 {
    padding: 0.85rem !important;
    border-radius: 1.75rem !important;
  }
}

/* Tabs — only this block moves down (margin below the images) */
#clone-elevencreative .block-el-asset-rotator:has([data-clone-flows-tabs]) .tw-order-2 {
  order: 2 !important;
  width: 100% !important;
  margin: 2.75rem 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

@media (min-width: 768px) {
  #clone-elevencreative .block-el-asset-rotator:has([data-clone-flows-tabs]) .tw-order-2 {
    margin-top: 3.25rem !important;
  }
}

#clone-elevencreative .block-el-asset-rotator:has([data-clone-flows-tabs]) .tw-rounded-3xl.tw-bg-cream,
#clone-elevencreative .block-el-asset-rotator:has([data-clone-flows-tabs]) .tw-bg-cream {
  background: #faf9f7 !important;
  border-radius: 1.1rem !important;
  overflow: hidden !important;
}

#clone-elevencreative .block-el-asset-rotator:has([data-clone-flows-tabs]) [style*="mix-blend-mode:plus-lighter"],
#clone-elevencreative .block-el-asset-rotator:has([data-clone-flows-tabs]) [style*="mix-blend-mode: plus-lighter"] {
  transition: opacity 420ms ease !important;
}

#clone-elevencreative [data-clone-flows-tabs] {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 1.25rem !important;
  width: 100% !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

@media (min-width: 768px) {
  #clone-elevencreative [data-clone-flows-tabs] {
    gap: 2.5rem !important;
  }
}

#clone-elevencreative [data-clone-flows-tabs] [role="tab"] {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  text-align: left !important;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
  cursor: pointer !important;
}

#clone-elevencreative [data-clone-flows-tabs] [role="tab"]:focus,
#clone-elevencreative [data-clone-flows-tabs] [role="tab"]:focus-visible,
#clone-elevencreative [data-clone-flows-tabs] [role="tab"]:active {
  outline: none !important;
  box-shadow: none !important;
  border: 0 !important;
  background: transparent !important;
}

#clone-elevencreative [data-clone-flows-tabs] [role="tab"] * {
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Progress rail — GPU scaleX fill (smooth; no JS width stepping) */
#clone-elevencreative [data-clone-flows-tabs] {
  --clone-flows-fill-ms: 5600ms;
}

@keyframes clone-flows-fill {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

#clone-elevencreative [data-clone-flows-tabs] .tw-relative.tw-h-1.tw-rounded-md {
  display: block !important;
  width: 100% !important;
  height: 4px !important;
  border-radius: 9999px !important;
  overflow: hidden !important;
  background: rgb(0 0 0 / 0.12) !important;
  border: 0 !important;
  box-shadow: none !important;
}

#clone-elevencreative [data-clone-flows-tabs] .tw-bg-black {
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 9999px !important;
  background: #111 !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

#clone-elevencreative [data-clone-flows-tabs] .tw-bg-black[data-flows-fill="empty"] {
  transform: scaleX(0);
  animation: none !important;
}

#clone-elevencreative [data-clone-flows-tabs] .tw-bg-black[data-flows-fill="full"] {
  transform: scaleX(1);
  animation: none !important;
}

#clone-elevencreative [data-clone-flows-tabs] .tw-bg-black[data-flows-fill="animate"] {
  animation: clone-flows-fill var(--clone-flows-fill-ms) linear forwards;
}

#clone-elevencreative [data-clone-flows-tabs][data-flows-playing="false"] .tw-bg-black[data-flows-fill="animate"] {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  #clone-elevencreative [data-clone-flows-tabs] .tw-bg-black[data-flows-fill="animate"] {
    animation: none !important;
    transform: scaleX(1);
  }
}

#clone-elevencreative [data-clone-flows-tabs] [role="tab"] > p.tw-font-medium {
  display: block !important;
  margin-top: 1rem !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  font-family: var(--font-inter), "Inter", "Inter Fallback", ui-sans-serif, system-ui, sans-serif !important;
  font-size: 0.975rem !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.015em !important;
  color: #111 !important;
  background: transparent !important;
  transition: opacity 180ms ease !important;
}

#clone-elevencreative [data-clone-flows-tabs] [role="tab"] > p.tw-type-sm {
  display: block !important;
  margin-top: 0.55rem !important;
  padding: 0 !important;
  font-family: var(--font-inter), "Inter", "Inter Fallback", ui-sans-serif, system-ui, sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  color: rgb(17 17 17 / 0.55) !important;
  background: transparent !important;
  transition: opacity 180ms ease !important;
}

#clone-elevencreative [data-clone-flows-tabs] [role="tab"][aria-selected="false"] > p.tw-font-medium,
#clone-elevencreative [data-clone-flows-tabs] [role="tab"][aria-selected="false"] > p.tw-type-sm {
  opacity: 0.42 !important;
}

#clone-elevencreative [data-clone-flows-tabs] [role="tab"][aria-selected="true"] > p.tw-font-medium,
#clone-elevencreative [data-clone-flows-tabs] [role="tab"][aria-selected="true"] > p.tw-type-sm {
  opacity: 1 !important;
}

@media (max-width: 767px) {
  #clone-elevencreative [data-clone-flows-tabs] {
    position: relative !important;
    gap: 0.65rem !important;
    /* Reserve space for the full-width active caption under the rails */
    margin-bottom: 9.5rem !important;
    padding-bottom: 0 !important;
  }

  #clone-elevencreative .block-el-asset-rotator:has([data-clone-flows-tabs]) .tw-order-2 {
    margin-top: 1.25rem !important;
  }

  /*
   * Original markup ships a second mobile caption in `.tw-order-3` (opacity:0
   * entrance). Our runtime lifts opacity locks, which duplicated the active
   * tab body under the progress columns — kill the spare block entirely.
   */
  #clone-elevencreative .block-el-asset-rotator:has([data-clone-flows-tabs]) .tw-order-3 {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
  }

  /* Titles only in the 3 columns — never the long bodies in-column */
  #clone-elevencreative [data-clone-flows-tabs] [role="tab"] > p.tw-font-medium,
  #clone-elevencreative [data-clone-flows-tabs] [role="tab"] > p.tw-type-base {
    display: block !important;
    font-size: 0.8125rem !important;
    margin-top: 0.75rem !important;
  }

  #clone-elevencreative [data-clone-flows-tabs] [role="tab"] > p.tw-type-sm,
  #clone-elevencreative [data-clone-flows-tabs] [role="tab"] > p.tw-text-pretty {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /*
   * Active body: full width of the tablist (do NOT position:relative the tabs —
   * that trapped this caption in a single column and overlapped the next band).
   */
  #clone-elevencreative [data-clone-flows-tabs] [role="tab"][aria-selected="true"] > p.tw-type-sm,
  #clone-elevencreative [data-clone-flows-tabs] [role="tab"][aria-selected="true"] > p.tw-text-pretty {
    display: block !important;
    visibility: visible !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 100% !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    margin: 0.85rem 0 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
    z-index: 1 !important;
    font-size: 0.875rem !important;
    line-height: 1.45 !important;
    color: rgb(17 17 17 / 0.62) !important;
    opacity: 1 !important;
    text-align: left !important;
    text-wrap: pretty;
  }
}

/* =============================================================================
 * Mobile — match raylight.app + elevenlabs.io/creative small-screen behavior
 * ============================================================================= */

@media (max-width: 767px) {
  /* --- Raylight hero --- */
  .clonehometest-body .clone-hero {
    /* Clear fixed nav + a tad more air before proof/title/CTAs */
    padding: 6.5rem 1.25rem 0 !important;
  }

  .clonehometest-body .clone-hero-proof {
    font-size: 12px !important;
    letter-spacing: 0.04em !important;
    padding: 0 0.25rem;
  }

  .clonehometest-body .clone-hero > .clone-hero-title {
    margin-top: var(--clone-space-4) !important;
  }

  .clonehometest-body .clone-hero-title {
    font-size: clamp(34px, 11vw, 48px) !important;
    line-height: 1.02 !important;
  }

  .clonehometest-body .clone-hero-sub {
    font-size: 16px !important;
    line-height: 1.5 !important;
    max-width: 22rem !important;
    margin-top: var(--clone-space-4) !important;
  }

  .clonehometest-body .clone-hero > .clone-hero-ctas {
    margin-top: var(--clone-space-4) !important;
    max-width: 100%;
    padding: 0;
  }

  .clonehometest-body #clippable-cta-slot {
    max-width: 100%;
  }

  /* Compact, content-sized pills — don’t stretch the AI CTA full-bleed */
  .clonehometest-body .clone-hero-cta-row {
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    width: auto;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .clonehometest-body .clone-hero-cta-start,
  .clonehometest-body .clone-hero-cta-mcp,
  .clonehometest-body a.clone-hero-cta-start,
  .clonehometest-body a.clone-hero-cta-mcp {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    height: 2.75rem !important;
    min-height: 2.75rem !important;
    max-height: 2.75rem !important;
    justify-content: center;
    padding: 0 1.05rem !important;
    font-size: 14px !important;
  }

  .clonehometest-body .clone-hero-cta-mcp [class*="logoStack"],
  .clonehometest-body .clone-hero-cta-mcp [class*="logo"] {
    width: 18px !important;
    height: 18px !important;
  }

  .clonehometest-body .clone-hero-cta-mcp [class*="labelLayer"] {
    font-size: 14px !important;
  }

  .clonehometest-body .clone-hero-cta-mcp [class*="labelStack"] {
    width: max-content !important;
    max-width: min(100%, 16.5rem) !important;
  }

  /* --- Showcase reel --- */
  .clonehometest-body .clone-showcase {
    padding-top: var(--clone-section-y-tight, 3.25rem) !important;
    overflow-x: clip;
  }

  .clonehometest-body .clone-proof {
    margin-top: calc(-1 * var(--clone-space-2));
    padding-left: var(--clone-gutter-x, 1.25rem);
    padding-right: var(--clone-gutter-x, 1.25rem);
    padding-top: var(--clone-space-4) !important;
    padding-bottom: calc(var(--clone-space-4) + var(--clone-band-overlap)) !important;
  }

  .clonehometest-body .clone-proof > p,
  .clonehometest-body .clone-proof-line {
    font-size: 0.9375rem !important;
    line-height: 1.5 !important;
    font-weight: 500 !important;
    max-width: 28rem;
  }

  .clonehometest-body .clone-partners {
    margin-top: var(--clone-space-4);
    padding: 0 var(--clone-gutter-x, 1.25rem) var(--clone-space-1);
  }

  /* --- Design / Animate (stacked like Raylight mobile) --- */
  .clonehometest-body .clone-feature-showcase {
    padding-top: var(--clone-space-8) !important;
    padding-bottom: var(--clone-space-8) !important;
  }

  .clonehometest-body .clone-feature-showcase > .mx-auto {
    padding-left: var(--clone-gutter-x, 1.25rem) !important;
    padding-right: var(--clone-gutter-x, 1.25rem) !important;
  }

  .clonehometest-body .clone-feature-showcase h2.font-display {
    font-size: clamp(1.75rem, 8vw, 2.25rem) !important;
  }

  .clonehometest-body .clone-feature-grid {
    margin-top: var(--clone-space-6) !important;
    gap: 0 !important;
    padding-left: var(--clone-gutter-x, 1.25rem) !important;
    padding-right: var(--clone-gutter-x, 1.25rem) !important;
  }

  .clonehometest-body .clone-feature-media {
    gap: var(--clone-space-8) !important;
  }

  .clonehometest-body img.feature-edge-fade {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    border-radius: 12px !important;
  }

  .clonehometest-body .clone-feature-mobile-copy {
    display: block !important;
    margin-top: 1.35rem !important;
  }

  .clonehometest-body .clone-feature-mobile-copy h3 {
    font-family: var(--font-waldenburg), "Waldenburg", "Waldenburg Fallback", ui-serif, Georgia, serif !important;
    font-size: clamp(1.5rem, 6vw, 1.75rem) !important;
    font-weight: 300 !important;
    letter-spacing: -0.02em !important;
    color: #fff !important;
    margin: 0 !important;
  }

  .clonehometest-body .clone-feature-mobile-copy p {
    font-family: var(--font-inter), "Inter", "Inter Fallback", ui-sans-serif, system-ui, sans-serif !important;
    font-size: 0.9375rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    letter-spacing: 0.01em !important;
    color: #999 !important;
    margin: 0.65rem 0 0 !important;
  }

  /* Softer enter animation on small screens */
  .clonehometest-body [data-feature-panel] img.feature-edge-fade {
    transform: translateY(16px);
  }

  .clonehometest-body [data-feature-panel][data-inview="true"] img.feature-edge-fade {
    transform: translateY(0) !important;
  }

  /*
   * Cream middle stack — redefine the same modular tokens (don’t invent one-offs).
   */
  #clone-elevencreative {
    --outer-gutter: 1.25rem;
    --section-px-default: 1.25rem;
    --full-bleed: 1.25rem;
    --container-full-bleed: 1.25rem;
    --clone-gutter-x: 1.25rem;
    --clone-space-7: 4rem;
    --clone-space-8: 5.5rem;
    --clone-section-y: var(--clone-space-7);
    --clone-section-y-tight: 2.5rem;
    --clone-section-y-first: 3.5rem;
    --clone-block-gap: 2rem;
    padding-top: 0;
    padding-bottom: 0;
    overflow: visible;
  }

  #clone-elevencreative .clone-cream-surface {
    padding-top: var(--clone-space-5);
    padding-bottom: calc(var(--clone-space-4) + var(--clone-band-overlap));
  }

  /* Keep inset column + vertical lines (do not full-bleed the container) */
  #clone-elevencreative .container {
    box-sizing: border-box;
  }

  #clone-elevencreative .pt-80,
  #clone-elevencreative .pt-120,
  #clone-elevencreative .md\:pt-120,
  #clone-elevencreative .md\:pt-40,
  #clone-elevencreative .pt-24,
  #clone-elevencreative .md\:pt-160 {
    padding-top: var(--clone-section-y) !important;
  }

  #clone-elevencreative .block-section:first-child .pt-80,
  #clone-elevencreative .block-section:first-child .pt-120,
  #clone-elevencreative .block-section:first-child .md\:pt-120,
  #clone-elevencreative .block-section:first-child .md\:pt-160 {
    padding-top: var(--clone-section-y-first) !important;
  }

  #clone-elevencreative .pb-24,
  #clone-elevencreative .pb-40,
  #clone-elevencreative .md\:pb-40,
  #clone-elevencreative .pb-80,
  #clone-elevencreative .md\:pb-80,
  #clone-elevencreative .pb-120,
  #clone-elevencreative .md\:pb-120 {
    padding-bottom: var(--clone-section-y) !important;
  }

  /* Title ↔ demo cards: same block gap as desktop */
  #clone-elevencreative .block-el-title {
    margin-bottom: var(--clone-block-gap);
  }

  #clone-elevencreative .block-el-omnibox-slides > .tw-grid {
    gap: var(--clone-block-gap) !important;
  }

  #clone-elevencreative .block-el-asset-rotator:has([data-clone-flows-tabs]) .tw-order-2 {
    margin-top: var(--clone-block-gap) !important;
  }

  /* Four-boxes / case studies — same equal section pad */
  #clone-elevencreative .clone-four-boxes-slot > section,
  #clone-elevencreative .clone-case-studies-slot > section,
  #clone-elevencreative .clone-case-studies-slot > [data-nav-theme],
  #clone-elevencreative .clone-case-studies-slot > div.relative {
    padding-top: var(--clone-section-y) !important;
    padding-bottom: var(--clone-section-y) !important;
  }

  #clone-elevencreative .clone-four-boxes-slot header {
    padding-top: 0 !important;
  }

  #clone-elevencreative .clone-four-boxes-slot header::before {
    margin-bottom: 0;
  }

  #clone-elevencreative .clone-case-studies-slot {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .clonehometest-body .clone-closing-cta {
    /* Pull the whole closing plate (copy → globe → scoop → footer) up */
    padding-top: max(2.25rem, calc(var(--clone-section-y) - 1.25rem)) !important;
    padding-bottom: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .clonehometest-body .clone-closing-cta .clone-closing-cta-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    width: auto !important;
    max-width: 100% !important;
    margin-top: 0.7rem !important;
    margin-bottom: 0 !important;
    padding: 0 0.75rem !important;
  }

  /*
   * Closing globe (mobile) — STABLE KNOBS. Scoop is CTA overflow + bottom radius;
   * footer only uses HOME_LANDING_FOOTER_HANDOFF_OVERLAP. Do not bring back huge
   * footer -mt/pt pairs or absolute bottom-tuck (those clipped Earth away).
   *   --clone-closing-globe-view  visible Earth band height
   *   --clone-closing-globe-size  sphere diameter
   *   --clone-closing-globe-nudge translateY (more negative = higher)
   */
  .clonehometest-body .clone-closing-globe-slot {
    --clone-closing-globe-view: min(58vw, 15.5rem);
    --clone-closing-globe-size: min(135vw, 32rem);
    --clone-closing-globe-nudge: -10%;
    position: relative !important;
    width: 100% !important;
    height: var(--clone-closing-globe-view) !important;
    min-height: var(--clone-closing-globe-view) !important;
    max-height: var(--clone-closing-globe-view) !important;
    margin-top: -6.25rem !important;
    margin-bottom: 0 !important;
    overflow: hidden !important;
  }

  .clonehometest-body .clone-closing-globe-slot > * {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    transform: none !important;
    overflow: hidden !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
  }

  .clonehometest-body .clone-closing-globe-slot .relative.z-10,
  .clonehometest-body .clone-closing-globe-slot [class*="z-10"] {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  /* Nudge via --clone-closing-globe-nudge (see slot vars above) */
  .clonehometest-body .clone-closing-globe-slot [class*="aspect-square"] {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    flex-shrink: 0 !important;
    width: var(--clone-closing-globe-size) !important;
    max-width: var(--clone-closing-globe-size) !important;
    height: var(--clone-closing-globe-size) !important;
    margin: 0 auto !important;
    transform: translateY(var(--clone-closing-globe-nudge, -10%)) !important;
  }

  .clonehometest-body .clone-closing-globe-slot [aria-hidden="true"][class*="absolute"] {
    top: -18% !important;
    left: 50% !important;
    width: min(180vw, 44rem) !important;
    max-width: none !important;
    transform: translate(-50%, -12%) !important;
    opacity: 0.95 !important;
    z-index: 0 !important;
  }

  .clonehometest-body .clone-closing-cta h2 {
    font-size: clamp(2.35rem, 10vw, 3.25rem) !important;
    line-height: 1.02 !important;
    padding-left: 1rem;
    padding-right: 1rem;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0 !important;
    padding-bottom: 0.15rem !important;
  }

  .clonehometest-body .clone-closing-cta a {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    min-height: 44px !important;
    padding: 0.65rem 0.95rem !important;
    font-size: 0.875rem !important;
  }

  /* Intentionally no width/height overrides — closing variant = brands mobile sphere */

  /* Latest updates — drop “All updates” CTA on phones; title only */
  #clone-elevencreative [data-clone-latest-updates] .block-el-title .tw-relative.tw-mt-8 {
    display: none !important;
  }

  #clone-elevencreative [data-clone-latest-updates] .tw-type-5xl {
    text-align: left !important;
  }

  /* Tighter card stack spacing for Enterprise / API / stack */
  #clone-elevencreative .block-section:has(.block-el-content-grid) .tw-p-5 {
    padding: 1.15rem 1.1rem 0.35rem !important;
  }

  #clone-elevencreative .block-section:has(.block-el-content-grid) h3.tw-type-lg {
    font-size: 1.125rem !important;
    margin: 0 !important;
  }

  #clone-elevencreative .block-section:has(.block-el-content-grid) .tw-type-sm {
    font-size: 0.9375rem !important;
    line-height: 1.45 !important;
  }

  #clone-elevencreative .tw-type-5xl {
    font-size: clamp(1.75rem, 8vw, 2.25rem) !important;
    line-height: 1.12 !important;
    letter-spacing: var(--clone-display-tracking) !important;
    font-weight: var(--clone-display-weight) !important;
    text-align: center;
  }

  #clone-elevencreative [data-clone-latest-updates] .tw-type-5xl {
    text-align: left !important;
  }

  #clone-elevencreative .tw-type-base {
    font-size: 0.9375rem !important;
    line-height: 1.5 !important;
    letter-spacing: var(--clone-body-tracking) !important;
  }

  #clone-elevencreative .block-el-title {
    padding-left: 0;
    padding-right: 0;
  }

  #clone-elevencreative .block-el-title .tw-max-w-2xl {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  #clone-elevencreative .-tw-mx-full-bleed.tw-overflow-x-auto {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  #clone-elevencreative .-tw-mx-full-bleed.tw-overflow-x-auto::-webkit-scrollbar {
    display: none;
  }

  #clone-elevencreative [role="tablist"] {
    max-width: 100%;
  }

  /* Case studies: title + wrapping category pills (no clipped horizontal strip) */
  #clone-elevencreative
    .clone-case-studies-slot
    [data-case-studies-stack="title-and-stories"]
    > [data-case-studies-heading] {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    transform: none !important;
    padding-bottom: 1rem !important;
    gap: 0.75rem !important;
    overflow: visible !important;
  }

  #clone-elevencreative
    .clone-case-studies-slot
    [data-case-studies-heading]
    > h2 {
    max-width: none !important;
    white-space: normal !important;
  }

  #clone-elevencreative
    .clone-case-studies-slot
    [data-case-studies-heading]
    > div {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    justify-content: flex-start !important;
    overflow: visible !important;
  }

  #clone-elevencreative .clone-case-studies-slot [data-nav-theme] > div {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    overflow: visible !important;
  }

  #clone-elevencreative .clone-case-studies-slot [data-case-studies-tabs],
  #clone-elevencreative .clone-case-studies-slot [role="tablist"] {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    gap: 0.4rem !important;
    overflow: visible !important;
    overflow-x: visible !important;
  }

  #clone-elevencreative .clone-case-studies-slot [role="tab"] {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  /*
   * Phone thumbnails: same approach as category pills — fit in the column,
   * no horizontal scroller, no rail-sliced peeks.
   */
  #clone-elevencreative .clone-case-studies-slot [data-case-studies-body],
  #clone-elevencreative
    .clone-case-studies-slot
    [data-case-studies-body]
    > div {
    overflow: visible !important;
  }

  #clone-elevencreative .clone-case-studies-slot [data-case-studies-phones] {
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0.25rem 0 0.5rem !important;
    gap: 0.5rem !important;
    overflow: visible !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  #clone-elevencreative
    .clone-case-studies-slot
    [data-case-studies-phones]
    > button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  #clone-elevencreative img,
  #clone-elevencreative video {
    max-width: 100%;
  }

  #clone-elevencreative
    .clone-case-studies-slot
    [data-case-studies-phones]
    img {
    max-width: 100% !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  #clone-elevencreative .block-el-quote-card-slider,
  #clone-elevencreative [class*="tw-scroll"] {
    overscroll-behavior-x: contain;
  }

  /* FAQ / accordion headings stay readable */
  #clone-elevencreative h3 {
    font-size: clamp(1.05rem, 4.5vw, 1.25rem) !important;
    line-height: 1.3 !important;
  }

  /* --- Mobile scroll stability --- */
  .clonehometest-page,
  .clonehometest-body,
  .relative.min-h-svh:has(.clonehometest-body) {
    overscroll-behavior-x: none;
  }

  /*
   * content-visibility culls with short intrinsic heights make iOS/Android
   * scroll position jump when tall FAQ/cream bands enter the viewport.
   */
  .clonehometest-body .clone-feature-showcase,
  .clonehometest-body .clone-showcase,
  .clonehometest-body [data-clone-faq-band],
  #clone-elevencreative .clone-cream-surface > .block-section,
  .clonehometest-body .clone-closing-cta,
  .clonehometest-body video {
    content-visibility: visible !important;
    contain-intrinsic-size: none !important;
  }

  /* Phantom full-bleed X-scrollers (omnibox rail, etc.) steal vertical gestures. */
  #clone-elevencreative .-tw-mx-full-bleed.tw-overflow-x-auto {
    overflow-x: visible !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: auto;
    overscroll-behavior: auto;
    touch-action: pan-y;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Intentional case-studies phone grid — no X-scroller on mobile. */
  #clone-elevencreative .clone-case-studies-slot [data-case-studies-phones] {
    overscroll-behavior: auto;
  }

  /* Showcase rows use the same data-animating play/pause as desktop. */

  #clone-elevencreative .clone-reveal {
    transform: none;
    transition: none;
  }
}

@media (max-width: 1023px) {
  /* Tablet: Raylight switches sticky rail at lg — keep stacked copy */
  .clonehometest-body .clone-feature-rail {
    display: none !important;
  }

  .clonehometest-body .clone-feature-mobile-copy {
    display: block !important;
  }

  .clonehometest-body img.feature-edge-fade {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  .clonehometest-body .clone-feature-media {
    gap: 6rem !important;
  }
}

/* Kill page-wide sideways scroll from full-bleed 100vw math */
.clonehometest-body,
.relative.min-h-svh:has(.clonehometest-body) {
  overflow-x: clip;
  max-width: 100%;
}

@media (max-width: 380px) {
  .clonehometest-body .clone-hero-title {
    font-size: 30px !important;
  }

  .clonehometest-body .clone-hero-sub {
    font-size: 15px !important;
  }

  .clonehometest-body .clone-partners-logos {
    gap: 0.9rem 1.25rem;
  }
}

/* Top hero/proof: no load-in motion — paint immediately. */

/*
 * Mid-cream scroll presence — soft rise only.
 * Never hide sections with opacity:0 (feels like “content didn’t load”).
 */
@media (prefers-reduced-motion: no-preference) {
  #clone-elevencreative .clone-reveal {
    opacity: 1;
    transform: translate3d(0, 0.55rem, 0);
    transition: transform 0.55s var(--clone-ease);
  }

  #clone-elevencreative .clone-reveal.is-inview {
    transform: none;
  }

}

/* Shared color-only hover for other homepage interactive chips / links */
#clone-elevencreative [data-clone-faq-band] .clone-ask-ai-slot a,
#clone-elevencreative [data-clone-ask-ai] .clone-ask-ai-slot a,
#clone-elevencreative .clone-case-studies-slot [role="tab"],
#clone-elevencreative a.tw-bg-black,
#clone-elevencreative a[appearance="primary"],
#clone-elevencreative a[appearance="elevated"] {
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    opacity 160ms ease !important;
}

@media (prefers-reduced-motion: reduce) {
  .clonehometest-body .clone-closing-cta a,
  .clonehometest-body .clone-hero-cta-start,
  .clonehometest-body .clone-hero-cta-mcp,
  #clone-elevencreative [data-clone-faq-band] .clone-ask-ai-slot a,
  #clone-elevencreative .clone-case-studies-slot [role="tab"],
  #clone-elevencreative a.tw-bg-black,
  #clone-elevencreative a[appearance="primary"],
  #clone-elevencreative a[appearance="elevated"] {
    transition: none !important;
  }
}