/* SAKINA MA / CDP — Gemini-inspired minimal type (black + red eyebrow only) */
[data-sp-embed]{
  --ink: #000000;
  --muted: #3c4043;
  --paper: #f8f9fa;
  --white: #ffffff;
  --line: rgba(0, 0, 0, 0.08);
  --dark: #000000;
  --accent-red: #dc2626;
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
  --tracking-display: -0.03em;
  --tracking-body: 0;
  --leading-display: 1.15;
  --leading-body: 1.7;
  --bg-hero: #ffffff;
  --bg-section: #f8f9fa;
  --band-management: #f0fdf4;
  --band-analysis: #faf5ff;
  --band-ai: #f0f9ff;
  --band-marketing: #fff5f9;
  --weight-display: 600;
  --font-sans: "Inter", Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

[data-sp-embed][lang="th"]{
  --font-sans: "Inter", "Noto Sans Thai", Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --leading-display: 1.28;
  --leading-body: 1.75;
}

/* EN / TH: prevent title & copy overflow (JA-oriented nowrap / tracking) */
[data-sp-embed][lang="en"] .hero-title-float, [data-sp-embed][lang="th"] .hero-title-float{
  width: 100%;
  white-space: normal;
  overflow-wrap: break-word;
}

[data-sp-embed][lang="en"] .hero-title-float:first-child, [data-sp-embed][lang="th"] .hero-title-float:first-child{
  white-space: normal;
}

[data-sp-embed][lang="en"] .hero-center .hero-copy h1, [data-sp-embed][lang="th"] .hero-center .hero-copy h1{
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: normal;
  line-height: 1.22;
}

[data-sp-embed][lang="en"] .hero-center .hero-copy h1{
  font-size: clamp(2rem, 4.2vw + 0.5rem, 3.35rem);
  letter-spacing: -0.02em;
}

[data-sp-embed][lang="th"] .hero-center .hero-copy h1{
  font-size: clamp(1.85rem, 3.8vw + 0.45rem, 3.1rem);
  letter-spacing: -0.01em;
  line-height: 1.3;
}

[data-sp-embed][lang="en"] .contact-title-line, [data-sp-embed][lang="th"] .contact-title-line{
  white-space: normal;
  overflow-wrap: break-word;
  max-width: 100%;
}

[data-sp-embed][lang="en"] .contact h2, [data-sp-embed][lang="th"] .contact h2{
  overflow-wrap: break-word;
  max-width: 100%;
}

[data-sp-embed][lang="en"] .contact h2{
  font-size: clamp(1.85rem, 3.4vw + 0.7rem, 3.1rem);
  line-height: 1.22;
  letter-spacing: -0.03em;
}

[data-sp-embed][lang="th"] .contact h2{
  font-size: clamp(1.7rem, 3.1vw + 0.6rem, 2.85rem);
  line-height: 1.38;
  letter-spacing: -0.01em;
}

[data-sp-embed][lang="en"] .section-heading h2, [data-sp-embed][lang="th"] .section-heading h2, [data-sp-embed][lang="en"] .showcase-copy h2, [data-sp-embed][lang="th"] .showcase-copy h2, [data-sp-embed][lang="en"] .showcase-copy .showcase-subtitle, [data-sp-embed][lang="th"] .showcase-copy .showcase-subtitle, [data-sp-embed][lang="en"] .ai-insight-card__media-label h3, [data-sp-embed][lang="th"] .ai-insight-card__media-label h3, [data-sp-embed][lang="en"] .ai-insights-bento--pair > .ai-insight-card--hero-split .ai-insight-card__media-label h3, [data-sp-embed][lang="th"] .ai-insights-bento--pair > .ai-insight-card--hero-split .ai-insight-card__media-label h3, [data-sp-embed][lang="en"] .value-flow-step h3, [data-sp-embed][lang="th"] .value-flow-step h3, [data-sp-embed][lang="en"] .feature-nav-card__title, [data-sp-embed][lang="th"] .feature-nav-card__title, [data-sp-embed][lang="en"] .feature-card h3, [data-sp-embed][lang="th"] .feature-card h3, [data-sp-embed][lang="en"] .showcase-point__body h3, [data-sp-embed][lang="th"] .showcase-point__body h3, [data-sp-embed][lang="en"] .card-copy h3, [data-sp-embed][lang="th"] .card-copy h3{
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  max-width: 100%;
}

[data-sp-embed][lang="en"] .showcase-copy .showcase-subtitle, [data-sp-embed][lang="th"] .showcase-copy .showcase-subtitle{
  letter-spacing: 0.02em;
  line-height: 1.45;
}

[data-sp-embed][lang="en"] .section-heading h2{
  font-size: clamp(1.45rem, 2.8vw + 0.4rem, 2.55rem);
  line-height: 1.25;
}

[data-sp-embed][lang="th"] .section-heading h2{
  font-size: clamp(1.35rem, 2.6vw + 0.35rem, 2.4rem);
  line-height: 1.35;
}

[data-sp-embed][lang="en"] .platform-stage__tagline, [data-sp-embed][lang="th"] .platform-stage__tagline, [data-sp-embed][lang="en"] .cdp-stage .platform-stage__tagline, [data-sp-embed][lang="th"] .cdp-stage .platform-stage__tagline{
  max-width: 100%;
  overflow-wrap: break-word;
  white-space: normal;
}

[data-sp-embed][lang="en"] .value-flow__lead, [data-sp-embed][lang="en"] .feature-index__lead, [data-sp-embed][lang="en"] .industries__lead, [data-sp-embed][lang="en"] .contact__lead, [data-sp-embed][lang="th"] .value-flow__lead, [data-sp-embed][lang="th"] .feature-index__lead, [data-sp-embed][lang="th"] .industries__lead, [data-sp-embed][lang="th"] .contact__lead{
  max-width: min(40rem, 100%);
  padding-inline: 0.35rem;
  overflow-wrap: break-word;
  word-break: normal;
  box-sizing: border-box;
}

[data-sp-embed][lang="en"] .feature-nav-card__desc, [data-sp-embed][lang="th"] .feature-nav-card__desc, [data-sp-embed][lang="en"] .ai-insight-card__body > p, [data-sp-embed][lang="th"] .ai-insight-card__body > p, [data-sp-embed][lang="en"] .hero-split-copy > p, [data-sp-embed][lang="th"] .hero-split-copy > p{
  overflow-wrap: break-word;
  max-width: 100%;
}

[data-sp-embed][lang="en"] .ai-insight-tag, [data-sp-embed][lang="th"] .ai-insight-tag{
  white-space: normal;
  max-width: 100%;
  overflow-wrap: break-word;
}

[data-sp-embed][lang="en"] .hero-float__label, [data-sp-embed][lang="th"] .hero-float__label{
  white-space: normal;
  overflow-wrap: break-word;
  max-width: 100%;
  text-align: center;
  line-height: 1.25;
}

[data-sp-embed][lang="en"] .hero-actions .button, [data-sp-embed][lang="th"] .hero-actions .button, [data-sp-embed][lang="en"] .contact .hero-actions .button, [data-sp-embed][lang="th"] .contact .hero-actions .button{
  white-space: normal;
  text-align: center;
  line-height: 1.3;
  overflow-wrap: break-word;
  max-width: 100%;
}

[data-sp-embed][lang="th"] .hero-subtitle{
  max-width: min(20em, 100%);
  padding-inline: 0.5rem;
  box-sizing: border-box;
}

[data-sp-embed][lang="en"] .hero-subtitle{
  max-width: min(22em, 100%);
  padding-inline: 0.35rem;
  box-sizing: border-box;
}

@media (max-width: 899px) {
  [data-sp-embed][lang="en"] .hero-center .hero-copy h1, [data-sp-embed][lang="th"] .hero-center .hero-copy h1{
    font-size: clamp(1.8rem, 7.5vw, 2.45rem);
    line-height: 1.26;
  }

  [data-sp-embed][lang="en"] .section-heading h2, [data-sp-embed][lang="th"] .section-heading h2{
    font-size: clamp(1.2rem, 4.8vw, 1.65rem);
  }

  [data-sp-embed][lang="en"] .showcase-copy h2, [data-sp-embed][lang="th"] .showcase-copy h2{
    font-size: clamp(1.2rem, 5vw, 1.7rem);
  }

  [data-sp-embed][lang="en"] .showcase-copy .showcase-subtitle, [data-sp-embed][lang="th"] .showcase-copy .showcase-subtitle{
    font-size: clamp(0.95rem, 3.4vw, 1.15rem);
    letter-spacing: 0.01em;
  }

  [data-sp-embed][lang="en"] .ai-insights-bento--pair > .ai-insight-card--hero-split .ai-insight-card__media-label h3, [data-sp-embed][lang="th"] .ai-insights-bento--pair > .ai-insight-card--hero-split .ai-insight-card__media-label h3{
    font-size: clamp(1.15rem, 4.2vw, 1.55rem);
    line-height: 1.3;
  }

  [data-sp-embed][lang="en"] .platform-stage .platform-stage__tagline, [data-sp-embed][lang="th"] .platform-stage .platform-stage__tagline, [data-sp-embed][lang="en"] .cdp-stage .platform-stage__tagline, [data-sp-embed][lang="th"] .cdp-stage .platform-stage__tagline{
    font-size: clamp(1.15rem, 4.5vw, 1.65rem);
    line-height: 1.35;
  }

  [data-sp-embed][lang="en"] .contact h2{
    font-size: clamp(1.85rem, 7.2vw, 2.55rem);
    line-height: 1.22;
  }

  [data-sp-embed][lang="th"] .contact h2{
    font-size: clamp(1.7rem, 6.6vw, 2.35rem);
    line-height: 1.4;
  }

  [data-sp-embed][lang="en"] .value-flow-step h3, [data-sp-embed][lang="th"] .value-flow-step h3{
    font-size: clamp(0.95rem, 3.5vw, 1.15rem);
    line-height: 1.35;
  }
}

@media (max-width: 480px) {
  [data-sp-embed][lang="en"] .hero-center .hero-copy h1{
    font-size: clamp(1.7rem, 7.6vw, 2.15rem);
  }

  [data-sp-embed][lang="th"] .hero-center .hero-copy h1{
    font-size: clamp(1.65rem, 7.2vw, 2.1rem);
  }
}

[data-sp-embed], [data-sp-embed] *{ box-sizing: border-box; }

[data-sp-embed]{
  scroll-behavior: auto;
  overflow-x: visible;
  overflow-y: scroll;
  overscroll-behavior-x: none;
  max-width: 100%;
  width: 100%;
}

[data-sp-embed]{
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg-hero);
  letter-spacing: var(--tracking-body);
  line-height: var(--leading-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: visible;
  overflow-y: visible;
  overscroll-behavior-x: none;
  max-width: 100%;
  width: 100%;
  position: relative;
}

[data-sp-embed] main{
  overflow: visible;
  overscroll-behavior-x: none;
  max-width: 100%;
  width: 100%;
}

[data-sp-embed] a{ color: inherit; text-decoration: none; }

[data-sp-embed] img{
  max-width: 100%;
  display: block;
  -webkit-user-drag: none;
  user-select: none;
}

[data-sp-embed] h1, [data-sp-embed] h2, [data-sp-embed] h3, [data-sp-embed] p{ margin-top: 0; }
[data-sp-embed] ul{ margin: 0; padding: 0; list-style: none; }

[data-sp-embed] .section-band{
  padding: clamp(88px, 11vw, 148px) clamp(20px, 6.5vw, 104px);
}

@media (min-width: 900px) {
  [data-sp-embed] .section-band{
    padding-inline: clamp(3.5rem, 10vw, 11rem);
  }
}

[data-sp-embed] .white-band{
  background: var(--white);
  border-top: none;
  border-bottom: none;
}

[data-sp-embed] .paper-band{
  background: var(--bg-section);
}

[data-sp-embed] .band-management{
  background: linear-gradient(180deg, #f8f9fa 0%, #f4fdf8 55%, #ecfdf5 100%);
  /* Management cards: green/neutral (no red wash) */
  --card-live: #16a34a;
  --card-live-hi: #4ade80;
  --card-live-lo: #15803d;
  --card-live-soft: rgba(22, 163, 74, 0.14);
  --card-live-glow: rgba(22, 163, 74, 0.22);
  --card-live-border: rgba(22, 163, 74, 0.24);
  --card-live-wash: #f7fdf9;
}

[data-sp-embed] .band-analysis{
  background: linear-gradient(180deg, #f8f9fa 0%, #fdfaff 55%, #f5f3ff 100%);
  --card-live: #dc2626;
  --card-live-hi: #f87171;
  --card-live-lo: #b91c1c;
  --card-live-soft: rgba(220, 38, 38, 0.14);
  --card-live-glow: rgba(220, 38, 38, 0.26);
  --card-live-border: rgba(220, 38, 38, 0.28);
  --card-live-wash: #fef2f2;
}

[data-sp-embed] .band-ai{
  background: linear-gradient(180deg, #f8f9fa 0%, #f8fbff 55%, #eff6ff 100%);
  --card-live: #dc2626;
  --card-live-hi: #f87171;
  --card-live-lo: #b91c1c;
  --card-live-soft: rgba(220, 38, 38, 0.14);
  --card-live-glow: rgba(220, 38, 38, 0.26);
  --card-live-border: rgba(220, 38, 38, 0.28);
  --card-live-wash: #fef2f2;
}

[data-sp-embed] .band-marketing{
  background: linear-gradient(180deg, #f8f9fa 0%, #fff8f9 55%, #fff5f7 100%);
  --card-live: #dc2626;
  --card-live-hi: #f87171;
  --card-live-lo: #b91c1c;
  --card-live-soft: rgba(220, 38, 38, 0.14);
  --card-live-glow: rgba(220, 38, 38, 0.26);
  --card-live-border: rgba(220, 38, 38, 0.28);
  --card-live-wash: #fef2f2;
}

[data-sp-embed] .nobr-product{
  white-space: nowrap;
  display: inline;
}

/* ===== Labels — only hero eyebrow is red ===== */
[data-sp-embed] .section-label{
  display: block;
  margin: 0 0 1.75rem;
  padding-inline-start: 0;
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.4;
}

[data-sp-embed] .hero .eyebrow{
  display: block;
  margin: 0 0 1.75rem;
  padding-inline-start: 0.14em;
  color: var(--accent-red);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.4;
}

[data-sp-embed] .text-accent-em, [data-sp-embed] .hero-title-em{
  font-style: normal;
  font-weight: inherit;
  color: var(--ink);
  background: none;
  padding: 0;
}

/* ===== Buttons ===== */
[data-sp-embed] .button{
  display: inline-flex;
  min-height: clamp(2.65rem, 0.8vw + 2.15rem, 3.15rem);
  align-items: center;
  justify-content: center;
  border-radius: 980px;
  padding: clamp(0.55rem, 0.35vw + 0.45rem, 0.85rem) clamp(1.15rem, 1.2vw + 0.75rem, 1.9rem);
  font-size: clamp(0.925rem, 0.45vw + 0.78rem, 1.1rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: transform 220ms ease, background 220ms ease, opacity 220ms ease, box-shadow 220ms ease;
  cursor: pointer;
}

[data-sp-embed] .button:hover{ transform: scale(1.02); }
[data-sp-embed] .button.primary{ background: var(--ink); color: #fff; }
[data-sp-embed] .button.primary:hover{ background: #000; }
[data-sp-embed] .button.secondary{
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.14);
  color: var(--ink);
  box-shadow: 0 0.45rem 1.1rem rgba(15, 23, 42, 0.06);
}

[data-sp-embed] .button.button--dark{
  background: #0f172a;
  color: #fff;
  border: 0;
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.03em;
  padding: 0.75rem 1.5rem;
  min-height: 3rem;
  border-radius: 9999px;
  box-shadow:
    0 4px 6px -1px rgba(29, 78, 216, 0.28),
    0 2px 4px -2px rgba(15, 23, 42, 0.14);
  transition: background 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

[data-sp-embed] .button.button--dark:hover{
  background: #1e293b;
  box-shadow:
    0 10px 15px -3px rgba(15, 23, 42, 0.28),
    0 4px 6px -4px rgba(15, 23, 42, 0.16);
  transform: translateY(-2px);
}

[data-sp-embed] .button.secondary.button--glow{
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink);
  font-weight: 600;
  box-shadow: none;
  animation: none;
}

[data-sp-embed] .button.secondary.button--glow:hover{
  background: var(--paper);
  border-color: rgba(0, 0, 0, 0.14);
  color: var(--ink);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
  animation: none;
}

[data-sp-embed] .button.button--glow{
  border-color: var(--line);
  color: var(--ink);
  box-shadow: none;
  animation: none;
}

[data-sp-embed] .button.button--glow::after{
  display: none;
}

[data-sp-embed] .button.primary.button--glow{
  color: #fff;
  border: 0;
  background: var(--ink);
  box-shadow: var(--shadow);
  animation: none;
}

[data-sp-embed] .button.primary.button--glow::after{
  display: none;
}

[data-sp-embed] .button.primary.button--glow:hover{
  color: #fff;
  background: #1a1a1a;
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
  animation: none;
}

@keyframes button-glow-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 0 rgba(225, 29, 72, 0.4),
      0 0 16px rgba(225, 29, 72, 0.22),
      0 0.45rem 1.1rem rgba(225, 29, 72, 0.1);
  }
  50% {
    box-shadow:
      0 0 0 10px rgba(225, 29, 72, 0),
      0 0 34px rgba(225, 29, 72, 0.45),
      0 0.55rem 1.3rem rgba(225, 29, 72, 0.16);
  }
}

@keyframes button-glow-shine {
  0%, 42% { transform: translateX(-130%); }
  62% { transform: translateX(130%); }
  100% { transform: translateX(130%); }
}

@keyframes button-cta-bob {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-3px) scale(1.02); }
}

/* In-page jumps: land below fixed public header (bar + 48px gap) */
[data-sp-embed] main [id], [data-sp-embed] .section-band[id], [data-sp-embed] #hero, [data-sp-embed] #features, [data-sp-embed] #use-cases, [data-sp-embed] #create, [data-sp-embed] #analysis, [data-sp-embed] #management, [data-sp-embed] #value-flow, [data-sp-embed] #value-flow-steps, [data-sp-embed] #industries, [data-sp-embed] #ai-analysis, [data-sp-embed] #marketing, [data-sp-embed] #marketing-demo, [data-sp-embed] #cdp-customer, [data-sp-embed] #departments, [data-sp-embed] #difference, [data-sp-embed] #abilities, [data-sp-embed] #visual, [data-sp-embed] #contact, [data-sp-embed] .showcase-copy, [data-sp-embed] .section-heading, [data-sp-embed] .growth-lede, [data-sp-embed] .departments-heading, [data-sp-embed] .visual-copy, [data-sp-embed] .ai-insight-card[id] .ai-insight-card__media-label{
  scroll-margin-top: calc(
    var(--sp-public-header-offset, 4.5rem) + env(safe-area-inset-top, 0px) + 48px
  );
}

/* ===== Hero + MA/CDP shared wash (no seam between sections) ===== */
[data-sp-embed] .hero-platforms{
  /* Soft lead-in; MA/CDP accent wash lives on .platforms-band */
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #ffffff 58%,
    #fffbfc 78%,
    #fff8f9 100%
  );
}

/* Soft wash at hero bottom — blends into MA pink on short mobile viewports */
[data-sp-embed] .hero::after{
  content: none;
}

/* ===== Hero ===== */
[data-sp-embed] .hero{
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* overflow時に上端（固定ヘッダー側）へ食い込まない */
  justify-content: safe center;
  gap: 0;
  padding-top: calc(var(--sp-public-header-offset, 4.5rem) + env(safe-area-inset-top, 0px) + 7rem);
  padding-bottom: clamp(48px, 8vw, 96px);
  background: transparent;
  border-bottom: none;
  overflow-x: clip;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

[data-sp-embed] .hero-floats{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Allow floats to sit fully in-frame; horizontal spill is clipped by .hero */
  overflow: visible;
}

[data-sp-embed] .hero-float{
  position: absolute;
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  background: linear-gradient(
    165deg,
    var(--hero-float-bg-start, #f8fbff) 0%,
    var(--hero-float-bg-mid, #eef4ff) 52%,
    var(--hero-float-bg-end, #e3edff) 100%
  );
  border: 1px solid var(--hero-float-border, rgba(96, 165, 250, 0.34));
  box-shadow:
    0 24px 48px var(--hero-float-shadow, rgba(59, 130, 246, 0.16)),
    0 10px 22px var(--hero-float-glow, rgba(147, 197, 253, 0.24)),
    0 0 0 1px var(--hero-float-ring, rgba(147, 197, 253, 0.12));
  will-change: transform, opacity;
}

[data-sp-embed] .hero-float::before{
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  z-index: 2;
  width: 100%;
  height: 3px;
  background: var(
    --hero-float-accent,
    linear-gradient(90deg, #93c5fd 0%, #3b82f6 55%, #2563eb 100%)
  );
  pointer-events: none;
}

[data-sp-embed] .hero-float::after{
  content: "";
  position: absolute;
  inset: -18%;
  z-index: 0;
  background: radial-gradient(
    ellipse at center,
    var(--hero-float-halo, rgba(147, 197, 253, 0.28)) 0%,
    transparent 68%
  );
  pointer-events: none;
}

[data-sp-embed] .hero-float img{
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
  background: var(--hero-float-img-bg, #eef4ff);
}

[data-sp-embed] .hero-float--marketing{
  --hero-float-bg-start: #fff5f9;
  --hero-float-bg-mid: #fce7f3;
  --hero-float-bg-end: #fbcfe8;
  --hero-float-border: rgba(236, 72, 153, 0.36);
  --hero-float-shadow: rgba(236, 72, 153, 0.18);
  --hero-float-glow: rgba(244, 114, 182, 0.28);
  --hero-float-ring: rgba(251, 113, 133, 0.16);
  --hero-float-halo: rgba(244, 114, 182, 0.34);
  --hero-float-accent: linear-gradient(90deg, #f9a8d4 0%, #ec4899 55%, #db2777 100%);
  --hero-float-img-bg: #fdf2f8;
  --hero-float-label-bg: rgba(252, 231, 243, 0.96);
  --hero-float-label-border: rgba(244, 114, 182, 0.32);
  --hero-float-label-color: #be185d;
  top: clamp(6.25rem, 13vh, 9.5rem);
  left: clamp(0.75rem, 3.5vw, 3.5rem);
  width: clamp(224px, 25vw, 372px);
  transform: rotate(-3deg);
}

[data-sp-embed] .hero-float--analysis{
  --hero-float-bg-start: #faf5ff;
  --hero-float-bg-mid: #f3e8ff;
  --hero-float-bg-end: #e9d5ff;
  --hero-float-border: rgba(168, 85, 247, 0.36);
  --hero-float-shadow: rgba(147, 51, 234, 0.18);
  --hero-float-glow: rgba(192, 132, 252, 0.28);
  --hero-float-ring: rgba(167, 139, 250, 0.16);
  --hero-float-halo: rgba(192, 132, 252, 0.34);
  --hero-float-accent: linear-gradient(90deg, #c4b5fd 0%, #a855f7 55%, #9333ea 100%);
  --hero-float-img-bg: #f5f3ff;
  --hero-float-label-bg: rgba(237, 233, 254, 0.96);
  --hero-float-label-border: rgba(167, 139, 250, 0.32);
  --hero-float-label-color: #7e22ce;
  bottom: clamp(3.25rem, 9vh, 5.75rem);
  left: clamp(0.5rem, 2.5vw, 2.75rem);
  width: clamp(214px, 23vw, 358px);
  transform: rotate(2.5deg);
}

[data-sp-embed] .hero-float--analysis img{
  width: 114%;
  max-width: none;
  margin: -5% 0 -3% -7%;
}

[data-sp-embed] .hero-float--management{
  --hero-float-bg-start: #f0fdf4;
  --hero-float-bg-mid: #dcfce7;
  --hero-float-bg-end: #bbf7d0;
  --hero-float-border: rgba(34, 197, 94, 0.36);
  --hero-float-shadow: rgba(22, 163, 74, 0.18);
  --hero-float-glow: rgba(74, 222, 128, 0.28);
  --hero-float-ring: rgba(134, 239, 172, 0.16);
  --hero-float-halo: rgba(74, 222, 128, 0.34);
  --hero-float-accent: linear-gradient(90deg, #86efac 0%, #22c55e 55%, #16a34a 100%);
  --hero-float-img-bg: #ecfdf3;
  --hero-float-label-bg: rgba(220, 252, 231, 0.96);
  --hero-float-label-border: rgba(74, 222, 128, 0.32);
  --hero-float-label-color: #15803d;
  top: 42%;
  right: clamp(0.75rem, 3vw, 3rem);
  width: clamp(242px, 26vw, 412px);
  transform: rotate(-1.5deg);
}

[data-sp-embed] .hero-float--management img{
  width: 106%;
  max-width: none;
  margin: -2% 0 -1% -3%;
}

[data-sp-embed] .hero-float__label{
  position: absolute;
  z-index: 3;
  left: 0;
  bottom: 0;
  margin: 0;
  padding: 0.38rem 0.72rem;
  border-radius: 0;
  background: var(--hero-float-label-bg, rgba(219, 234, 254, 0.96));
  border: none;
  border-top: 1px solid var(--hero-float-label-border, rgba(96, 165, 250, 0.28));
  border-right: 1px solid var(--hero-float-label-border, rgba(96, 165, 250, 0.28));
  color: var(--hero-float-label-color, #1d4ed8);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: none;
  line-height: 1;
}

/* Non-CMS hero floats: show immediately. CMS title floats wait for decode. */
[data-sp-embed].js .hero:not(.hero--cms-story) .hero-float:not(.is-media-ready), [data-sp-embed].js .hero:not(.hero--cms-story) .hero-float.is-ready{
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
}

/* Hero floats: show immediately (no reveal fade) so first paint isn't empty */
[data-sp-embed] .hero-float.is-ready, [data-sp-embed].js .hero-float.is-ready{
  opacity: 1;
  filter: none;
  pointer-events: none;
  transform: rotate(var(--hero-float-tilt, 0deg));
  transition: none;
}

[data-sp-embed] .hero-float--marketing, [data-sp-embed].js .hero-float--marketing.is-ready{
  --hero-float-tilt: -3deg;
}

[data-sp-embed] .hero-float--analysis, [data-sp-embed].js .hero-float--analysis.is-ready{
  --hero-float-tilt: 2.5deg;
}

[data-sp-embed] .hero-float--management, [data-sp-embed].js .hero-float--management.is-ready{
  --hero-float-tilt: -1.5deg;
}

[data-sp-embed].js .hero-float.is-animating{
  animation: hero-float-drift var(--hero-float-duration, 6s) ease-in-out infinite;
  animation-delay: var(--hero-float-delay, 0s);
}

[data-sp-embed].js .hero-float--marketing.is-animating{
  --hero-float-duration: 5.8s;
  --hero-float-delay: 0s;
}

[data-sp-embed].js .hero-float--analysis.is-animating{
  --hero-float-duration: 6.6s;
  --hero-float-delay: 0.4s;
}

[data-sp-embed].js .hero-float--management.is-animating{
  --hero-float-duration: 7.2s;
  --hero-float-delay: 0.8s;
}

@keyframes hero-float-drift {
  0%,
  100% {
    translate: 0 0;
  }

  50% {
    translate: 0 -14px;
  }
}

[data-sp-embed] .hero-center{
  position: relative;
  z-index: 5;
  isolation: isolate;
  width: 100%;
  max-width: min(80rem, 100%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-inline: 1rem;
  overflow-x: clip;
  box-sizing: border-box;
}

[data-sp-embed] .hero-brand-logo{
  display: block;
  position: relative;
  z-index: 2;
  width: min(42rem, 92vw);
  margin: -0.75rem auto 0.65rem;
  will-change: opacity, transform;
  transform-origin: center center;
  isolation: isolate;
}

[data-sp-embed] .hero-brand-wordmark{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.06em;
  line-height: 1.06;
}

[data-sp-embed] .hero-brand-wordmark__sakina, [data-sp-embed] .hero-brand-wordmark__product{
  font-family: var(--font-sans);
  font-size: clamp(1.85rem, 4.6vw + 0.35rem, 3.35rem);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
  color: var(--ink);
  text-shadow:
    0 0 18px rgba(147, 197, 253, 0.28),
    0 0 36px rgba(191, 219, 254, 0.18),
    0 0 56px rgba(219, 234, 254, 0.12);
}

[data-sp-embed] .hero-brand-wordmark__product{
  font-size: clamp(1.65rem, 4.1vw + 0.3rem, 2.95rem);
  letter-spacing: 0.04em;
}

[data-sp-embed] .hero-brand-logo::after{
  display: none;
}

@keyframes hero-logo-pop {
  0% {
    opacity: 0;
    transform: translate(-0.85rem, 1.35rem) scale(0.78) rotate(-5deg);
  }
  58% {
    opacity: 1;
    transform: translate(0.12rem, -0.28rem) scale(1.08) rotate(0.8deg);
  }
  78% {
    opacity: 1;
    transform: translate(-0.04rem, 0.08rem) scale(0.98) rotate(-0.25deg);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
}

@keyframes hero-logo-shine {
  0% { opacity: 0; transform: translateX(-135%); }
  14% { opacity: 1; }
  62% { opacity: 1; }
  100% { opacity: 0; transform: translateX(135%); }
}

@keyframes hero-logo-glow {
  0%, 100% {
    text-shadow:
      0 0 18px rgba(147, 197, 253, 0.28),
      0 0 36px rgba(191, 219, 254, 0.18),
      0 0 56px rgba(219, 234, 254, 0.12);
  }
  50% {
    text-shadow:
      0 0 24px rgba(147, 197, 253, 0.42),
      0 0 48px rgba(191, 219, 254, 0.28),
      0 0 72px rgba(219, 234, 254, 0.18);
  }
}

[data-sp-embed].js .hero-center.reveal:not(.visible) .hero-brand-logo{
  opacity: 0;
  transform: translate(-0.85rem, 1.35rem) scale(0.78) rotate(-5deg);
}

[data-sp-embed].js .hero-center.reveal.visible .hero-brand-logo{
  animation: hero-logo-pop 0.72s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--d, 0ms);
}

[data-sp-embed].js .hero-center.reveal.visible .hero-brand-logo::after{
  display: none;
}

[data-sp-embed].js .hero-center.reveal.visible .hero-brand-wordmark__sakina, [data-sp-embed].js .hero-center.reveal.visible .hero-brand-wordmark__product{
  animation: hero-logo-glow 3.6s ease-in-out infinite;
}

[data-sp-embed].js .hero-center.reveal.visible .hero-brand-wordmark__product{
  animation-delay: 0.4s;
}

[data-sp-embed] .hero-visual{
  width: min(34rem, 78vw);
  margin: 0.15rem auto 0;
  background: transparent;
  overflow: visible;
  padding: 0;
}

[data-sp-embed] .hero-visual img{
  width: 100%;
  height: auto;
  max-height: min(300px, 34vh);
  object-fit: contain;
  margin-inline: auto;
  filter: none;
}

[data-sp-embed] .hero-center .hero-copy{
  width: 100%;
  max-width: 52rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
  margin-top: 1.5rem;
  box-sizing: border-box;
}

[data-sp-embed] .hero .eyebrow{
  margin: 0 0 1.25rem;
  color: var(--accent-red);
  font-size: clamp(0.7rem, 0.15vw + 0.66rem, 0.8125rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-align: center;
}

[data-sp-embed] .hero-center .hero-copy h1{
  margin: 0 auto 1.5rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: clamp(2.5rem, 5vw + 0.75rem, 4.25rem);
  font-weight: var(--weight-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: var(--ink);
  box-sizing: border-box;
  text-align: center;
  word-break: normal;
  line-break: auto;
  overflow-wrap: normal;
}

[data-sp-embed] .hero-center .hero-copy h1 .hero-title-line{
  display: block;
  max-width: 100%;
}

[data-sp-embed] .hero-title-float{
  display: block;
  width: fit-content;
  max-width: 100%;
  text-align: center;
}

[data-sp-embed] .hero-title-float:first-child{
  white-space: nowrap;
}

[data-sp-embed] .hero-title-float + .hero-title-float{
  margin-top: 0.35rem;
  letter-spacing: 0.04em;
}

[data-sp-embed].js .hero-center.reveal:not(.visible) .hero-title-float{
  opacity: 0;
  transform: translateY(1.35rem) scale(0.97);
}

[data-sp-embed].js .hero-center.reveal.visible .hero-title-float{
  animation: hero-title-float 1.4s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 280ms;
}

[data-sp-embed].js .hero-center.reveal.visible .hero-title-float + .hero-title-float{
  animation-delay: 520ms;
}

@keyframes hero-title-float {
  0% {
    opacity: 0;
    transform: translateY(1.35rem) scale(0.97);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

[data-sp-embed] .hero-subtitle{
  width: 100%;
  max-width: 36em;
  margin: 0 auto;
  font-size: clamp(1.5rem, 1.1vw + 1.15rem, 1.9rem);
  font-weight: 400;
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  color: var(--ink);
  word-break: normal;
  line-break: auto;
  white-space: pre-line;
  text-align: center;
}

[data-sp-embed] .hero-subtitle [data-hero-subtitle]{
  display: inline-block;
  max-width: 100%;
  text-align: center;
}

[data-sp-embed] .hero-subtitle-char{
  display: inline-block;
  opacity: 0;
  transform: translateY(0.45em) scale(0.92);
  will-change: opacity, transform;
}

[data-sp-embed] .hero-subtitle .text-accent-em, [data-sp-embed] .hero-subtitle .hero-subtitle-char.text-accent-em{
  color: var(--accent-red);
  font-weight: 600;
  background: linear-gradient(
    105deg,
    rgba(254, 202, 202, 0.95),
    rgba(254, 215, 170, 0.85)
  );
  background-repeat: no-repeat;
  background-size: 100% 0.4em;
  background-position: 0 88%;
  padding: 0 0.06em;
}

[data-sp-embed].js .hero-center.reveal.visible .hero-subtitle-char{
  animation: hero-subtitle-char-pop 0.34s cubic-bezier(0.34, 1.45, 0.64, 1) both;
  animation-delay: calc(var(--hero-subtitle-base, 780ms) + var(--i, 0) * 48ms);
}

@keyframes hero-subtitle-char-pop {
  0% {
    opacity: 0;
    transform: translateY(0.45em) scale(0.92);
  }
  55% {
    opacity: 1;
    transform: translateY(-0.07em) scale(1.03);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

[data-sp-embed] .hero-center .lead{
  max-width: 36em;
  margin: 0 auto;
  font-size: clamp(1.05rem, 0.45vw + 0.95rem, 1.2rem);
  font-weight: 400;
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  color: var(--ink);
}

[data-sp-embed] .hero-center .lead .lead-line{
  display: block;
}

[data-sp-embed] .hero-center .hero-actions{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

[data-sp-embed] .hero-center .hero-actions .button{
  min-height: clamp(2.75rem, 0.5vw + 2.4rem, 3.5rem);
  padding: clamp(0.6rem, 0.35vw + 0.5rem, 0.95rem) clamp(1.5rem, 1vw + 1rem, 2.35rem);
  font-size: clamp(1rem, 0.85rem + 0.4vw, 1.15rem);
  font-weight: 600;
  letter-spacing: 0.02em;
}

[data-sp-embed] .hero-center .hero-actions .button.secondary.button--glow{
  min-height: clamp(2.85rem, 0.55vw + 2.5rem, 3.65rem);
  padding: clamp(0.65rem, 0.38vw + 0.55rem, 1rem) clamp(1.55rem, 1.1vw + 1.05rem, 2.5rem);
  font-size: 1.05rem;
  border-color: rgba(225, 29, 72, 0.42);
  color: #e11d48;
  z-index: 1;
  box-shadow:
    0 0 0 0 rgba(225, 29, 72, 0.4),
    0 0 26px rgba(225, 29, 72, 0.34),
    0 0.5rem 1.2rem rgba(225, 29, 72, 0.14);
  animation: button-glow-pulse 2.4s ease-in-out infinite;
}

[data-sp-embed] .hero-center .hero-actions .button.secondary.button--glow:hover{
  background: #fff5f7;
  border-color: rgba(225, 29, 72, 0.6);
  color: #be123c;
  transform: scale(1.045) translateY(-2px);
  box-shadow:
    0 0 0 3px rgba(225, 29, 72, 0.18),
    0 0 40px rgba(225, 29, 72, 0.48),
    0 0.65rem 1.45rem rgba(225, 29, 72, 0.2);
  animation: none;
}

[data-sp-embed] .hero-center .hero-actions .button.secondary.button--glow:active{
  transform: scale(0.98) translateY(0);
}

[data-sp-embed] .hero-center .hero-actions .button.button--dark{
  min-height: 3.1rem;
  padding: 0.8rem 1.65rem;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

[data-sp-embed] .hero-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* ===== Section headings ===== */
[data-sp-embed] .section-heading{
  max-width: 900px;
  margin-bottom: 48px;
}

[data-sp-embed] .section-heading.center{
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

[data-sp-embed] .section-heading h2{
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(28px, 3.8vw + 0.5rem, 48px);
  line-height: 1.2;
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
  color: var(--ink);
  word-break: normal;
  line-break: auto;
  overflow-wrap: normal;
}

[data-sp-embed] .section-heading .section-label{
  margin-bottom: 1.25rem;
}

/* ===== Problem ===== */
[data-sp-embed] .problem-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  max-width: 1100px;
  margin: 0 auto;
}

[data-sp-embed] .problem-card{
  display: flex;
  gap: 14px;
  align-items: flex-start;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  padding: 20px 18px;
  box-shadow: none;
}

[data-sp-embed] .problem-card i{
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-weight: 700;
  font-size: 13px;
}

[data-sp-embed] .problem-card p{
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
  word-break: keep-all;
  line-break: strict;
}

/* ===== Workflow ===== */
[data-sp-embed] .workflow-list{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

[data-sp-embed] .workflow-step{
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  padding: 26px;
  min-height: 200px;
  min-width: 0;
  overflow: hidden;
  box-shadow: none;
}

[data-sp-embed] .workflow-step span{
  display: inline-flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0;
  font-size: 14px;
}

[data-sp-embed] .workflow-step h3{
  margin: 22px 0 0;
  font-size: clamp(15px, 1.5vw, 20px);
  line-height: 1.45;
  font-weight: 700;
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
  word-break: keep-all;
  line-break: strict;
  max-width: 100%;
}

/* ===== Feature cards ===== */
[data-sp-embed] .feature-grid, [data-sp-embed] .industry-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

[data-sp-embed] .feature-card{
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  box-shadow: none;
  overflow: hidden;
  min-height: 220px;
  transition: border-color 220ms ease;
}

[data-sp-embed] .feature-card:hover{
  transform: none;
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: none;
}

[data-sp-embed] .feature-card .card-top{
  padding: 20px 22px 0;
  background: var(--white);
  min-height: 72px;
}

[data-sp-embed] .feature-card .card-top em{
  display: inline-flex;
  min-width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-style: normal;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0;
}

[data-sp-embed] .feature-card .card-copy{ padding: 18px 22px 24px; }

[data-sp-embed] .feature-card h3{
  margin: 0 0 10px;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.02em;
  word-break: keep-all;
  line-break: strict;
}

[data-sp-embed] .feature-card p{
  margin: 0;
  color: var(--muted);
  line-height: 1.75;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.03em;
}

/* ===== Industries (soft blue + white, subtle grid) ===== */
[data-sp-embed] .band-industries{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--ink);
  background:
    radial-gradient(90% 70% at 8% 0%, rgba(191, 219, 254, 0.55) 0%, transparent 58%),
    radial-gradient(80% 60% at 96% 100%, rgba(186, 230, 253, 0.45) 0%, transparent 55%),
    linear-gradient(180deg, #f8fafc 0%, #eef6ff 38%, #f4f9ff 68%, #ffffff 100%);
}

[data-sp-embed] .band-industries > *:not(.industries-bg){
  position: relative;
  z-index: 1;
}

[data-sp-embed] .industries-bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

[data-sp-embed] .industries-bg__grid{
  position: absolute;
  inset: -20%;
  background-image:
    linear-gradient(rgba(59, 130, 246, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59, 130, 246, 0.08) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(ellipse 78% 70% at 50% 48%, #000 18%, transparent 76%);
  -webkit-mask-image: radial-gradient(ellipse 78% 70% at 50% 48%, #000 18%, transparent 76%);
  animation: industries-grid-drift 32s linear infinite;
  opacity: 0.55;
}

[data-sp-embed] .industries-bg__glow{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(46% 40% at 28% 30%, rgba(125, 211, 252, 0.22), transparent 72%),
    radial-gradient(40% 36% at 74% 72%, rgba(147, 197, 253, 0.2), transparent 74%);
  animation: industries-glow-pulse 12s ease-in-out infinite alternate;
}

[data-sp-embed] .industries-bg__beam{
  position: absolute;
  width: 46%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(59, 130, 246, 0.06) 20%,
    rgba(56, 189, 248, 0.38) 50%,
    rgba(59, 130, 246, 0.06) 80%,
    transparent 100%
  );
  filter: blur(0.2px);
  opacity: 0.45;
  transform: rotate(-18deg);
  animation: industries-beam-sweep 16s ease-in-out infinite;
}

[data-sp-embed] .industries-bg__beam--1{
  top: 30%;
  left: -8%;
}

[data-sp-embed] .industries-bg__beam--2{
  top: 64%;
  right: -10%;
  width: 48%;
  transform: rotate(16deg);
  animation-name: industries-beam-sweep-alt;
  animation-delay: -6s;
  animation-duration: 20s;
  opacity: 0.32;
}

[data-sp-embed] .industries-bg__scan{
  position: absolute;
  left: 0;
  right: 0;
  height: 26%;
  top: -30%;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(59, 130, 246, 0.05) 45%,
    transparent 100%
  );
  animation: industries-scan 18s ease-in-out infinite;
}

@keyframes industries-grid-drift {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(52px, 52px, 0); }
}

@keyframes industries-glow-pulse {
  0% { opacity: 0.55; transform: scale(1); }
  100% { opacity: 0.95; transform: scale(1.03); }
}

@keyframes industries-beam-sweep {
  0%, 100% { opacity: 0.12; transform: translateX(-6%) rotate(-18deg); }
  50% { opacity: 0.5; transform: translateX(8%) rotate(-18deg); }
}

@keyframes industries-beam-sweep-alt {
  0%, 100% { opacity: 0.1; transform: translateX(6%) rotate(16deg); }
  50% { opacity: 0.42; transform: translateX(-8%) rotate(16deg); }
}

@keyframes industries-scan {
  0% { top: -30%; opacity: 0; }
  12% { opacity: 1; }
  55% { top: 85%; opacity: 0.45; }
  100% { top: 110%; opacity: 0; }
}

[data-sp-embed] .band-industries .section-label{
  color: #0284c7;
}

[data-sp-embed] .band-industries .section-heading h2{
  color: #0f172a;
  text-shadow: none;
}

[data-sp-embed] .industries__lead{
  margin: 1.25rem auto 0;
  max-width: 44rem;
  color: var(--muted);
  font-size: clamp(1.05rem, 0.72rem + 0.55vw, 1.28rem);
  line-height: 1.7;
  font-weight: 500;
}

[data-sp-embed] .band-industries .industry-grid{
  position: relative;
  z-index: 1;
}

[data-sp-embed] .industry-grid--single{
  grid-template-columns: minmax(0, 22rem);
  justify-content: center;
}

[data-sp-embed] .industry-grid--single .feature-card:last-child{
  grid-column: auto;
}

[data-sp-embed] .industry-grid--cases{
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  max-width: min(68rem, 100%);
  margin-inline: auto;
  justify-content: center;
}

[data-sp-embed] .industry-grid--cases .feature-card:last-child{
  grid-column: auto;
}

@media (min-width: 1041px) {
  [data-sp-embed] #use-cases.section-band{
    padding-inline: clamp(2.5rem, 7vw, 8rem);
  }

  [data-sp-embed] #use-cases .industry-grid--cases{
    max-width: min(76rem, 100%);
    gap: clamp(20px, 2.2vw, 32px);
  }

  [data-sp-embed] #use-cases .industry-grid--cases .feature-card .card-top{
    padding: 20px 22px 0;
  }

  [data-sp-embed] #use-cases .industry-grid--cases .feature-card__visual{
    margin: 14px 18px 0;
    aspect-ratio: 3 / 2;
  }

  [data-sp-embed] #use-cases .industry-grid--cases .feature-card .card-copy{
    padding: 18px 22px 26px;
  }

  [data-sp-embed] #use-cases .industry-grid--cases .feature-card h3{
    font-size: clamp(1.35rem, 1.1rem + 0.6vw, 1.7rem);
  }

  [data-sp-embed] #use-cases .industry-grid--cases .feature-card p{
    font-size: clamp(0.95rem, 0.85rem + 0.25vw, 1.08rem);
    line-height: 1.75;
  }

  [data-sp-embed] #use-cases .industry-grid--cases .use-case-status__item, [data-sp-embed] #use-cases .industry-grid--cases .use-case-tag{
    font-size: 13px;
  }
}

[data-sp-embed] .use-case-metrics{
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

[data-sp-embed] .use-case-metrics li, [data-sp-embed] .use-case-metric{
  position: relative;
  isolation: isolate;
  overflow: visible;
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
  padding: 0.35em 0.7em;
  border-radius: 999px;
  background: rgba(14, 165, 233, 0.08);
  border: 1px solid rgba(14, 165, 233, 0.18);
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: 0.02em;
  box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.16);
}

[data-sp-embed] .use-case-metric--conv{
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.22);
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.16);
}

[data-sp-embed] .use-case-metrics__label{
  color: #64748b;
  font-weight: 600;
}

[data-sp-embed] .use-case-metrics__value{
  color: #0369a1;
  font-weight: 700;
}

[data-sp-embed] .use-case-metric--conv .use-case-metrics__value{
  color: #047857;
}

[data-sp-embed] .use-case-metric::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(
    115deg,
    transparent 36%,
    rgba(255, 255, 255, 0.62) 48%,
    transparent 60%
  );
  background-size: 220% 100%;
  background-position: 120% 0;
  opacity: 0;
}

[data-sp-embed] .use-case-metric > *{
  position: relative;
  z-index: 1;
}

[data-sp-embed].js .feature-card.reveal.visible .use-case-metric, [data-sp-embed]:not(.js) .use-case-metric{
  animation: use-case-metric-pulse 2.6s ease-in-out infinite;
}

[data-sp-embed].js .feature-card.reveal.visible .use-case-metric--conv, [data-sp-embed]:not(.js) .use-case-metric--conv{
  animation-name: use-case-metric-pulse-conv;
  animation-delay: 0.55s;
}

[data-sp-embed].js .feature-card.reveal.visible .use-case-metric::after, [data-sp-embed]:not(.js) .use-case-metric::after{
  animation: use-case-metric-shine 2.6s ease-in-out infinite;
}

[data-sp-embed].js .feature-card.reveal.visible .use-case-metric--conv::after, [data-sp-embed]:not(.js) .use-case-metric--conv::after{
  animation-delay: 0.55s;
}

[data-sp-embed].js .feature-card.reveal.visible .use-case-metrics__value, [data-sp-embed]:not(.js) .use-case-metrics__value{
  animation: use-case-metric-value 2.6s ease-in-out infinite;
}

[data-sp-embed].js .feature-card.reveal.visible .use-case-metric--conv .use-case-metrics__value, [data-sp-embed]:not(.js) .use-case-metric--conv .use-case-metrics__value{
  animation-name: use-case-metric-value-conv;
  animation-delay: 0.55s;
}

@keyframes use-case-metric-pulse {
  0%, 100% {
    transform: scale(1);
    background: rgba(14, 165, 233, 0.08);
    border-color: rgba(14, 165, 233, 0.2);
    box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.18);
  }
  50% {
    transform: scale(1.045);
    background: rgba(14, 165, 233, 0.18);
    border-color: rgba(56, 189, 248, 0.62);
    box-shadow:
      0 0 0 7px rgba(14, 165, 233, 0),
      0 0 18px rgba(14, 165, 233, 0.34);
  }
}

@keyframes use-case-metric-pulse-conv {
  0%, 100% {
    transform: scale(1);
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.24);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.18);
  }
  50% {
    transform: scale(1.045);
    background: rgba(16, 185, 129, 0.2);
    border-color: rgba(52, 211, 153, 0.68);
    box-shadow:
      0 0 0 7px rgba(16, 185, 129, 0),
      0 0 18px rgba(16, 185, 129, 0.34);
  }
}

@keyframes use-case-metric-shine {
  0%, 42% {
    opacity: 0;
    background-position: 120% 0;
  }
  55% {
    opacity: 0.95;
    background-position: 50% 0;
  }
  70%, 100% {
    opacity: 0;
    background-position: -20% 0;
  }
}

@keyframes use-case-metric-value {
  0%, 100% {
    color: #0369a1;
    text-shadow: none;
  }
  50% {
    color: #0284c7;
    text-shadow: 0 0 10px rgba(14, 165, 233, 0.45);
  }
}

@keyframes use-case-metric-value-conv {
  0%, 100% {
    color: #047857;
    text-shadow: none;
  }
  50% {
    color: #059669;
    text-shadow: 0 0 10px rgba(16, 185, 129, 0.45);
  }
}

[data-sp-embed] .use-case-tags{
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

[data-sp-embed] .use-case-tag{
  display: inline-flex;
  align-items: center;
  padding: 0.35em 0.75em;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.3;
}

[data-sp-embed] .use-case-tag--newsml{
  color: #0369a1;
  background: rgba(14, 165, 233, 0.1);
  border: 1px solid rgba(14, 165, 233, 0.22);
}

[data-sp-embed] .use-case-tag--housei{
  color: #047857;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.22);
}

[data-sp-embed] .use-case-status{
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

[data-sp-embed] .use-case-status__item{
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.65em;
  padding: 0.6em 0.8em;
  border-radius: 10px;
  background: rgba(248, 250, 252, 0.95);
  border: 1px solid rgba(148, 163, 184, 0.28);
  color: #475569;
  font-size: 12px;
  line-height: 1.55;
  font-weight: 500;
}

[data-sp-embed] .use-case-status__dot{
  position: relative;
  flex: 0 0 auto;
  width: 0.9em;
  height: 0.9em;
  margin-top: 0.28em;
  border-radius: 999px;
  background: #94a3b8;
}

[data-sp-embed] .use-case-status__text{
  min-width: 0;
}

[data-sp-embed] .use-case-status__ellipsis{
  display: inline-flex;
  gap: 0.12em;
  margin-left: 0.08em;
  vertical-align: baseline;
}

[data-sp-embed] .use-case-status__ellipsis i{
  width: 0.22em;
  height: 0.22em;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.25;
}

[data-sp-embed] .use-case-status__item--generating{
  border-color: rgba(56, 189, 248, 0.28);
}

[data-sp-embed] .use-case-status__item--generating .use-case-status__dot{
  background: #38bdf8;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.16);
}

[data-sp-embed] .use-case-status__item--done{
  border-color: rgba(34, 197, 94, 0.22);
}

[data-sp-embed] .use-case-status__item--done .use-case-status__dot{
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.14);
}

[data-sp-embed] .use-case-status__item--done .use-case-status__dot::after{
  content: "";
  position: absolute;
  left: 0.22em;
  top: 0.16em;
  width: 0.28em;
  height: 0.42em;
  border-right: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
  transform: rotate(40deg);
}

/* Generating → done loop, starts when the card is in view */
[data-sp-embed].js .feature-card--ai.reveal.visible .use-case-status__item--generating, [data-sp-embed].js .feature-card--ingest.reveal.visible .use-case-status__item--generating{
  animation: use-case-gen-row 6.4s ease-in-out infinite;
}

[data-sp-embed].js .feature-card--ai.reveal.visible .use-case-status__item--generating .use-case-status__dot, [data-sp-embed].js .feature-card--ingest.reveal.visible .use-case-status__item--generating .use-case-status__dot{
  animation: use-case-gen-dot 6.4s ease-in-out infinite;
}

[data-sp-embed].js .feature-card--ai.reveal.visible .use-case-status__ellipsis i, [data-sp-embed].js .feature-card--ingest.reveal.visible .use-case-status__ellipsis i{
  animation: use-case-ellipsis 1.05s ease-in-out infinite;
}

[data-sp-embed].js .feature-card--ai.reveal.visible .use-case-status__ellipsis i:nth-child(2), [data-sp-embed].js .feature-card--ingest.reveal.visible .use-case-status__ellipsis i:nth-child(2){
  animation-delay: 0.16s;
}

[data-sp-embed].js .feature-card--ai.reveal.visible .use-case-status__ellipsis i:nth-child(3), [data-sp-embed].js .feature-card--ingest.reveal.visible .use-case-status__ellipsis i:nth-child(3){
  animation-delay: 0.32s;
}

[data-sp-embed].js .feature-card--ai.reveal.visible .use-case-status__item--done, [data-sp-embed].js .feature-card--ingest.reveal.visible .use-case-status__item--done{
  animation: use-case-done-row 6.4s ease-in-out infinite;
}

[data-sp-embed].js .feature-card--ai.reveal.visible .use-case-status__item--done .use-case-status__dot, [data-sp-embed].js .feature-card--ingest.reveal.visible .use-case-status__item--done .use-case-status__dot{
  animation: use-case-done-dot 6.4s ease-in-out infinite;
}

[data-sp-embed].js .feature-card--ai.reveal.visible .use-case-status__item--done .use-case-status__text, [data-sp-embed].js .feature-card--ingest.reveal.visible .use-case-status__item--done .use-case-status__text{
  animation: use-case-done-text 6.4s ease-in-out infinite;
}

/* Slight offset so both cards don't pulse in lockstep */
[data-sp-embed].js .feature-card--ingest.reveal.visible .use-case-status__item--generating, [data-sp-embed].js .feature-card--ingest.reveal.visible .use-case-status__item--generating .use-case-status__dot, [data-sp-embed].js .feature-card--ingest.reveal.visible .use-case-status__item--done, [data-sp-embed].js .feature-card--ingest.reveal.visible .use-case-status__item--done .use-case-status__dot, [data-sp-embed].js .feature-card--ingest.reveal.visible .use-case-status__item--done .use-case-status__text{
  animation-delay: 0.9s;
}

[data-sp-embed].js .feature-card--ingest.reveal.visible .use-case-status__ellipsis i:nth-child(1){
  animation-delay: 0.9s;
}

[data-sp-embed].js .feature-card--ingest.reveal.visible .use-case-status__ellipsis i:nth-child(2){
  animation-delay: 1.06s;
}

[data-sp-embed].js .feature-card--ingest.reveal.visible .use-case-status__ellipsis i:nth-child(3){
  animation-delay: 1.22s;
}

/* Skip the "generating…" theater — show the finished row only */
[data-sp-embed] #use-cases .use-case-status__item--generating{
  display: none !important;
}
[data-sp-embed] #use-cases .use-case-status__item--done, [data-sp-embed].js .feature-card--ai.reveal.visible .use-case-status__item--done, [data-sp-embed].js .feature-card--ingest.reveal.visible .use-case-status__item--done{
  animation: none !important;
  background: rgba(240, 253, 244, 0.98);
  border-color: rgba(34, 197, 94, 0.5);
  color: #14532d;
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.1), 0 8px 18px rgba(22, 163, 74, 0.08);
  transform: none;
}
[data-sp-embed] #use-cases .use-case-status__item--done .use-case-status__dot, [data-sp-embed].js .feature-card--ai.reveal.visible .use-case-status__item--done .use-case-status__dot, [data-sp-embed].js .feature-card--ingest.reveal.visible .use-case-status__item--done .use-case-status__dot{
  animation: none !important;
  background: #16a34a;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.16);
  transform: none;
}
[data-sp-embed] #use-cases .use-case-status__item--done .use-case-status__text, [data-sp-embed].js .feature-card--ai.reveal.visible .use-case-status__item--done .use-case-status__text, [data-sp-embed].js .feature-card--ingest.reveal.visible .use-case-status__item--done .use-case-status__text{
  animation: none !important;
  opacity: 1;
}
[data-sp-embed] #use-cases .feature-card__visual img:not(.is-media-ready){
  opacity: 0 !important;
}
[data-sp-embed] #use-cases .feature-card__visual img.is-media-ready{
  opacity: 1 !important;
  transition: opacity 0.35s ease;
}

@keyframes use-case-ellipsis {
  0%, 20% { opacity: 0.2; transform: translateY(0); }
  45% { opacity: 1; transform: translateY(-1px); }
  100% { opacity: 0.2; transform: translateY(0); }
}

@keyframes use-case-gen-row {
  0%, 46% {
    background: rgba(240, 249, 255, 0.98);
    border-color: rgba(56, 189, 248, 0.55);
    color: #0f172a;
    box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.12), 0 8px 18px rgba(14, 165, 233, 0.08);
  }
  58%, 100% {
    background: rgba(248, 250, 252, 0.88);
    border-color: rgba(148, 163, 184, 0.22);
    color: #94a3b8;
    box-shadow: none;
  }
}

@keyframes use-case-gen-dot {
  0%, 46% {
    background: #38bdf8;
    box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.22), 0 0 12px rgba(56, 189, 248, 0.45);
    transform: scale(1);
  }
  12%, 28% {
    transform: scale(1.18);
  }
  58%, 100% {
    background: #cbd5e1;
    box-shadow: none;
    transform: scale(1);
  }
}

@keyframes use-case-done-row {
  0%, 48% {
    background: rgba(248, 250, 252, 0.88);
    border-color: rgba(148, 163, 184, 0.2);
    color: #94a3b8;
    box-shadow: none;
    transform: translateY(2px);
  }
  60%, 100% {
    background: rgba(240, 253, 244, 0.98);
    border-color: rgba(34, 197, 94, 0.5);
    color: #14532d;
    box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.1), 0 8px 18px rgba(22, 163, 74, 0.08);
    transform: translateY(0);
  }
}

@keyframes use-case-done-dot {
  0%, 48% {
    background: #cbd5e1;
    box-shadow: none;
    transform: scale(0.86);
  }
  60% {
    background: #22c55e;
    box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.22);
    transform: scale(1.18);
  }
  72%, 100% {
    background: #16a34a;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.16);
    transform: scale(1);
  }
}

@keyframes use-case-done-text {
  0%, 50% { opacity: 0.45; }
  62%, 100% { opacity: 1; }
}

[data-sp-embed] .band-industries .feature-card{
  display: flex;
  flex-direction: column;
  color: var(--ink);
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border-color: rgba(147, 197, 253, 0.45);
  box-shadow:
    0 14px 36px rgba(15, 23, 42, 0.06),
    0 0 0 1px rgba(255, 255, 255, 0.8) inset;
  backdrop-filter: none;
  overflow: hidden;
}

[data-sp-embed] .band-industries .feature-card:hover{
  border-color: rgba(56, 189, 248, 0.55);
  box-shadow:
    0 18px 40px rgba(14, 165, 233, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.9) inset;
}

[data-sp-embed] .band-industries .feature-card .card-top{
  background: transparent;
  min-height: 0;
  padding: 16px 18px 0;
}

[data-sp-embed] .band-industries .feature-card .card-top em{
  background: linear-gradient(145deg, #0f2744, #0369a1);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.12);
}

[data-sp-embed] .band-industries .feature-card__visual{
  margin: 12px 16px 0;
  aspect-ratio: 3 / 2;
  border-radius: 10px;
  overflow: hidden;
  background:
    radial-gradient(circle at 28% 22%, rgba(186, 230, 253, 0.9), transparent 58%),
    linear-gradient(145deg, #f0f9ff 0%, #e0f2fe 100%);
}

[data-sp-embed] .band-industries .feature-card__visual img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transition: transform 320ms ease;
}

[data-sp-embed] .band-industries .feature-card:hover .feature-card__visual img{
  transform: none;
}

[data-sp-embed] .band-industries .feature-card .card-copy{
  flex: 1;
  padding: 14px 18px 20px;
}

[data-sp-embed] .band-industries .feature-card h3{
  color: #0f172a;
}

[data-sp-embed] .band-industries .feature-card p{
  color: #334155;
}

[data-sp-embed] .band-industries .feature-card p .text-accent-em{
  color: #0c4a6e;
  font-weight: 700;
  background: linear-gradient(
    105deg,
    rgba(186, 230, 253, 0.95),
    rgba(224, 242, 254, 0.92)
  );
  background-repeat: no-repeat;
  background-size: 100% 0.42em;
  background-position: 0 88%;
  padding: 0 0.06em;
}

/* ===== Value flow (MA/CDP workflow) ===== */
[data-sp-embed] .value-flow{
  --flow-orange: #ea580c;
  --flow-orange-soft: rgba(251, 146, 60, 0.16);
  background:
    radial-gradient(ellipse 90% 55% at 50% 0%, rgba(255, 237, 213, 0.75), transparent 62%),
    linear-gradient(180deg, #fffaf5 0%, #fff7ed 42%, #ffffff 100%);
  border-top: 1px solid rgba(251, 146, 60, 0.14);
  padding-inline: clamp(16px, 3vw, 40px);
}

[data-sp-embed] .value-flow__inner{
  max-width: min(1560px, 100%);
  margin: 0 auto;
}

[data-sp-embed] .value-flow__heading{
  margin-bottom: clamp(2.25rem, 4.5vw, 3.5rem);
  max-width: 52rem;
}

[data-sp-embed] .value-flow__lead{
  margin: 1.1rem auto 0;
  max-width: 40rem;
  color: var(--muted);
  font-size: clamp(15px, 1.1vw + 0.4rem, 17px);
  line-height: 1.75;
  font-weight: 500;
}

[data-sp-embed] .value-flow__steps{
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(18px, 2.5vw, 24px);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* スマホ〜PC縮小: 2列（2-2-1。イラストが横に伸びすぎないように） */
@media (max-width: 1099px) {
  [data-sp-embed] .value-flow__steps{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(12px, 2.5vw, 40px);
    row-gap: clamp(20px, 3.5vw, 36px);
    align-items: stretch;
  }

  [data-sp-embed] .value-flow-step-wrap:nth-child(5){
    grid-column: 1 / -1;
    width: 100%;
    max-width: calc((100% - clamp(12px, 2.5vw, 40px)) / 2);
    justify-self: center;
  }
}

@media (min-width: 1100px) {
  [data-sp-embed] .value-flow__steps{
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    align-items: stretch;
  }
}

[data-sp-embed] .value-flow-step-wrap{
  position: relative;
  display: flex;
  align-items: stretch;
  min-width: 0;
}

@media (min-width: 1100px) {
  [data-sp-embed] .value-flow-step-wrap{
    padding-inline: 10px;
  }
}

[data-sp-embed] .value-flow-step__chevron{
  display: none;
  color: var(--flow-orange);
  flex: 0 0 auto;
  z-index: 2;
}

/* 2列幅: 01→02 / 03→04 は右矢印、04→05 のみ下矢印（02→04 は出さない） */
@media (max-width: 1099px) {
  [data-sp-embed] .value-flow-step-wrap:nth-child(odd) .value-flow-step__chevron{
    display: grid;
    place-items: center;
    position: absolute;
    top: 42%;
    right: calc(clamp(12px, 2.5vw, 40px) * -0.5 - 12px);
    width: clamp(24px, 4vw, 32px);
    height: clamp(24px, 4vw, 32px);
    transform: translateY(-50%);
    animation: flow-chevron-nudge 1.8s ease-in-out infinite;
  }

  [data-sp-embed] .value-flow-step-wrap:nth-child(4) .value-flow-step__chevron{
    display: grid;
    place-items: center;
    position: absolute;
    left: 50%;
    bottom: calc(clamp(20px, 3.5vw, 36px) * -0.5 - 12px);
    width: clamp(24px, 4vw, 32px);
    height: clamp(24px, 4vw, 32px);
    transform: translateX(-50%) rotate(90deg);
    animation: flow-chevron-nudge-down 1.8s ease-in-out infinite;
  }

  [data-sp-embed] .value-flow-step-wrap:nth-child(2) .value-flow-step__chevron, [data-sp-embed] .value-flow-step-wrap:last-child .value-flow-step__chevron{
    display: none;
  }
}

@media (min-width: 1100px) {
  [data-sp-embed] .value-flow-step__chevron{
    display: grid;
    place-items: center;
    position: absolute;
    top: 42%;
    right: -16px;
    width: 32px;
    height: 32px;
    transform: translateY(-50%);
    animation: flow-chevron-nudge 1.8s ease-in-out infinite;
  }

  [data-sp-embed] .value-flow-step-wrap:last-child .value-flow-step__chevron{
    display: none;
  }
}

[data-sp-embed] .value-flow-step{
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 100%;
  padding: 20px 18px 22px;
  border-radius: 22px;
  border: 2px solid rgba(251, 146, 60, 0.22);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 14px 34px rgba(234, 88, 12, 0.06);
  position: relative;
  color: inherit;
  text-decoration: none;
  transition:
    transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 240ms ease,
    border-color 240ms ease;
}

[data-sp-embed] .value-flow-step:hover, [data-sp-embed] .value-flow-step:focus-visible{
  transform: translateY(-6px) scale(1.015);
  box-shadow: 0 22px 44px rgba(234, 88, 12, 0.12);
  outline: none;
}

[data-sp-embed] .value-flow-step--cms{
  border-color: rgba(251, 146, 60, 0.42);
  background: linear-gradient(165deg, #fffdfb 0%, #fff7ed 100%);
}

[data-sp-embed] .value-flow-step--ma{
  border-color: rgba(244, 114, 182, 0.45);
  background: linear-gradient(165deg, #fff 0%, #fff1f5 100%);
}

[data-sp-embed] .value-flow-step--cdp{
  border-color: rgba(34, 197, 94, 0.42);
  background: linear-gradient(165deg, #fff 0%, #f0fdf4 100%);
}

[data-sp-embed] .value-flow-step--ai{
  border-color: rgba(56, 189, 248, 0.48);
  background: linear-gradient(165deg, #fff 0%, #f0f9ff 100%);
}

[data-sp-embed] .value-flow-step--analytics{
  border-color: rgba(22, 163, 74, 0.5);
  background: linear-gradient(165deg, #fff 0%, #ecfdf5 100%);
  box-shadow:
    0 14px 34px rgba(22, 163, 74, 0.1),
    0 0 0 0 rgba(74, 222, 128, 0.35);
  animation: flow-card-glow 2.6s ease-in-out infinite;
}

[data-sp-embed] .value-flow-step--analytics:hover, [data-sp-embed] .value-flow-step--analytics:focus-visible{
  box-shadow:
    0 22px 44px rgba(22, 163, 74, 0.16),
    0 0 28px rgba(74, 222, 128, 0.35);
}

[data-sp-embed] .value-flow-step__visual{
  height: clamp(200px, 18vw, 240px);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(15, 23, 42, 0.06);
  display: grid;
  place-items: center;
}

@media (max-width: 1099px) {
  [data-sp-embed] .value-flow-step__visual{
    height: clamp(128px, 34vw, 176px);
  }
}

[data-sp-embed] .value-flow-step__body{
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
}

[data-sp-embed] .value-flow-step__num{
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--flow-orange);
}

[data-sp-embed] .value-flow-step--ma .value-flow-step__num{ color: #db2777; }
[data-sp-embed] .value-flow-step--cdp .value-flow-step__num{ color: #15803d; }
[data-sp-embed] .value-flow-step--ai .value-flow-step__num{ color: #0284c7; }
[data-sp-embed] .value-flow-step--analytics .value-flow-step__num{ color: #047857; }

[data-sp-embed] .value-flow-step h3{
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.05rem, 0.45vw + 0.95rem, 1.2rem);
  line-height: 1.45;
  font-weight: 700;
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
}

[data-sp-embed] .value-flow-step p{
  margin: 0;
  color: var(--muted);
  font-size: clamp(0.875rem, 0.2vw + 0.8rem, 0.9375rem);
  line-height: 1.75;
  font-weight: 500;
  flex: 1 1 auto;
  overflow-wrap: anywhere;
}

[data-sp-embed] .value-flow-step p .text-accent-em{
  color: var(--accent-red);
  font-weight: 700;
  background: linear-gradient(
    105deg,
    rgba(254, 202, 202, 0.95),
    rgba(254, 215, 170, 0.85)
  );
  background-repeat: no-repeat;
  background-size: 100% 0.4em;
  background-position: 0 88%;
  padding: 0 0.06em;
}

[data-sp-embed] .value-flow-step__link{
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-top: 6px;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.85);
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}

[data-sp-embed] .value-flow-step:hover .value-flow-step__link, [data-sp-embed] .value-flow-step:focus-visible .value-flow-step__link{
  transform: translateX(3px);
  border-color: rgba(29, 78, 216, 0.28);
  background: #fff;
}

[data-sp-embed] .value-flow-step--cms .value-flow-step__link{
  border-color: rgba(234, 88, 12, 0.28);
  color: #c2410c;
}

[data-sp-embed] .value-flow-step--ma .value-flow-step__link{
  border-color: rgba(244, 114, 182, 0.35);
  color: #be185d;
}

[data-sp-embed] .value-flow-step--cdp .value-flow-step__link{
  border-color: rgba(34, 197, 94, 0.35);
  color: #15803d;
}

[data-sp-embed] .value-flow-step--ai .value-flow-step__link{
  border-color: rgba(56, 189, 248, 0.4);
  color: #0369a1;
}

[data-sp-embed] .value-flow-step--analytics .value-flow-step__link{
  border-color: rgba(16, 185, 129, 0.4);
  color: #047857;
}

/* Mini visuals */
[data-sp-embed] .flow-visual{
  width: 100%;
  height: 100%;
  position: relative;
}

[data-sp-embed] .flow-visual--create{
  display: grid;
  place-items: center;
  padding: 10px 12px;
}

[data-sp-embed] .flow-builder{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}

[data-sp-embed] .flow-builder__stage{
  position: relative;
  flex: 1 1 auto;
  display: grid;
  place-items: center;
  min-height: 0;
}

[data-sp-embed] .flow-builder__card{
  position: relative;
  width: min(88%, 148px);
  padding: 8px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(234, 88, 12, 0.22);
  box-shadow:
    0 12px 24px rgba(234, 88, 12, 0.12),
    0 2px 6px rgba(15, 23, 42, 0.05);
  animation: flow-float 3.2s ease-in-out infinite;
}

[data-sp-embed] .flow-builder__media{
  height: 52px;
  border-radius: 8px;
  background: linear-gradient(135deg, #ffedd5 0%, #fed7aa 45%, #fdba74 100%);
  display: grid;
  place-items: center;
  margin-bottom: 8px;
  overflow: hidden;
  position: relative;
}

[data-sp-embed] .flow-builder__media::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgba(255, 255, 255, 0.45) 48%,
    transparent 62%
  );
  transform: translateX(-120%);
  animation: flow-builder-shimmer 2.8s ease-in-out infinite;
}

[data-sp-embed] .flow-builder__media-label{
  position: relative;
  z-index: 1;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #9a3412;
  opacity: 0.7;
}

[data-sp-embed] .flow-builder__lines{
  display: grid;
  gap: 4px;
  margin-bottom: 8px;
}

[data-sp-embed] .flow-builder__line{
  display: block;
  height: 5px;
  border-radius: 999px;
  background: #e7e5e4;
  transform-origin: left center;
  animation: flow-builder-line 2.8s ease-in-out infinite;
}

[data-sp-embed] .flow-builder__line--title{
  width: 78%;
  height: 6px;
  background: #d6d3d1;
  animation-delay: 0.15s;
}

[data-sp-embed] .flow-builder__line--short{
  width: 52%;
  animation-delay: 0.3s;
}

[data-sp-embed] .flow-builder__cta{
  display: grid;
  place-items: center;
  height: 22px;
  border-radius: 7px;
  background: linear-gradient(90deg, #ea580c, #f97316);
  color: #fff;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  opacity: 0;
  transform: translateY(4px) scale(1);
  transform-origin: center;
  animation: flow-builder-cta 2.8s ease-in-out infinite;
}

[data-sp-embed] .flow-builder__cursor{
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 2px solid #ea580c;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.15);
  top: 22%;
  left: 58%;
  transform: translate(-50%, -50%);
  animation: flow-builder-cursor 2.8s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}

[data-sp-embed] .flow-builder__palette{
  display: flex;
  justify-content: center;
  gap: 5px;
  flex-wrap: wrap;
}

[data-sp-embed] .flow-builder__chip{
  padding: 0.22rem 0.45rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(234, 88, 12, 0.22);
  color: #c2410c;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  animation: flow-pill-pop 2.4s ease-in-out infinite;
}

[data-sp-embed] .flow-builder__chip:nth-child(2){ animation-delay: 0.2s; }
[data-sp-embed] .flow-builder__chip:nth-child(3){ animation-delay: 0.4s; }

@keyframes flow-builder-shimmer {
  0%, 25% { transform: translateX(-120%); }
  55%, 100% { transform: translateX(120%); }
}

@keyframes flow-builder-line {
  0%, 12% { transform: scaleX(0.15); opacity: 0.35; }
  35%, 78% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0.85; }
}

@keyframes flow-builder-cta {
  0%, 35% { opacity: 0; transform: translateY(4px) scale(1); }
  48%, 62% { opacity: 1; transform: translateY(0) scale(1); }
  70% { opacity: 1; transform: translateY(1px) scale(0.94); filter: brightness(0.92); }
  80%, 100% { opacity: 1; transform: translateY(0) scale(1); filter: brightness(1); }
}

@keyframes flow-builder-cursor {
  0%, 10% {
    top: 22%;
    left: 58%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
  }
  20% {
    opacity: 1;
    top: 28%;
    left: 55%;
    transform: translate(-50%, -50%) scale(1);
  }
  42% {
    top: 58%;
    left: 40%;
    transform: translate(-50%, -50%) scale(1);
  }
  60% {
    top: 86%;
    left: 50%;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  70% {
    top: 86%;
    left: 50%;
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.78);
    box-shadow: 0 0 0 5px rgba(234, 88, 12, 0.22);
  }
  82%, 100% {
    top: 86%;
    left: 50%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
    box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.15);
  }
}

[data-sp-embed] .flow-visual--dm{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
}

[data-sp-embed] .flow-visual__actions{
  display: flex;
  gap: 8px;
}

[data-sp-embed] .flow-visual__pill{
  padding: 0.4rem 0.65rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(244, 114, 182, 0.28);
  font-size: 0.6875rem;
  font-weight: 700;
  color: #9d174d;
}

[data-sp-embed] .flow-visual__pill--like, [data-sp-embed] .flow-visual__pill--comment{
  animation: flow-pill-glow 1.8s ease-in-out infinite;
}

[data-sp-embed] .flow-visual__pill--comment{
  animation-delay: 0.25s;
}

[data-sp-embed] .flow-visual__arrow{
  width: 2px;
  height: 18px;
  background: linear-gradient(180deg, rgba(244, 114, 182, 0.15), #db2777);
  position: relative;
}

[data-sp-embed] .flow-visual__arrow--glow{
  width: 3px;
  height: 20px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fbcfe8, #db2777, #f472b6);
  box-shadow:
    0 0 8px rgba(244, 114, 182, 0.65),
    0 0 16px rgba(236, 72, 153, 0.35);
  animation: flow-arrow-glow 1.6s ease-in-out infinite;
}

[data-sp-embed] .flow-visual__arrow::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: -3px;
  width: 7px;
  height: 7px;
  border-right: 2px solid #db2777;
  border-bottom: 2px solid #db2777;
  transform: translateX(-50%) rotate(45deg);
}

[data-sp-embed] .flow-visual__arrow--glow::after{
  width: 8px;
  height: 8px;
  border-right-width: 2.5px;
  border-bottom-width: 2.5px;
  border-color: #ec4899;
  filter: drop-shadow(0 0 4px rgba(236, 72, 153, 0.7));
}

[data-sp-embed] .flow-visual__coupon{
  width: 88%;
  padding: 0.65rem 0.7rem 0.7rem;
  border-radius: 14px;
  text-align: center;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.9), transparent 40%),
    linear-gradient(145deg, #fff1f5 0%, #ffe4e6 48%, #fecdd3 100%);
  border: 1.5px solid rgba(244, 114, 182, 0.45);
  box-shadow:
    0 0 0 0 rgba(244, 114, 182, 0.35),
    0 10px 22px rgba(236, 72, 153, 0.18);
  animation: flow-coupon-vibe 1.5s ease-in-out infinite;
}

[data-sp-embed] .flow-visual__coupon-badge{
  display: inline-block;
  margin-bottom: 0.2rem;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  background: #fff;
  color: #db2777;
  font-size: 0.5625rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 0 10px rgba(244, 114, 182, 0.45);
}

[data-sp-embed] .flow-visual__coupon strong{
  display: block;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #be185d;
  line-height: 1.15;
  text-shadow: 0 0 12px rgba(244, 114, 182, 0.45);
}

[data-sp-embed] .flow-visual__coupon-sub{
  display: block;
  margin-top: 0.15rem;
  font-size: 0.5625rem;
  font-weight: 700;
  color: #9d174d;
  letter-spacing: 0.02em;
  opacity: 0.85;
}

@keyframes flow-pill-glow {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(244, 114, 182, 0);
    border-color: rgba(244, 114, 182, 0.28);
  }
  50% {
    transform: scale(1.07);
    box-shadow:
      0 0 0 4px rgba(251, 207, 232, 0.55),
      0 0 14px rgba(236, 72, 153, 0.45);
    border-color: rgba(236, 72, 153, 0.55);
    background: #fff5f8;
  }
}

@keyframes flow-arrow-glow {
  0%, 100% {
    opacity: 0.65;
    filter: brightness(1);
    box-shadow: 0 0 6px rgba(244, 114, 182, 0.35);
  }
  50% {
    opacity: 1;
    filter: brightness(1.25);
    box-shadow:
      0 0 12px rgba(244, 114, 182, 0.85),
      0 0 22px rgba(236, 72, 153, 0.45);
  }
}

@keyframes flow-coupon-vibe {
  0%, 100% {
    transform: translateY(0) rotate(0deg) scale(1);
    box-shadow:
      0 0 0 0 rgba(244, 114, 182, 0.2),
      0 10px 22px rgba(236, 72, 153, 0.16);
  }
  25% {
    transform: translateY(-2px) rotate(-1.2deg) scale(1.03);
  }
  50% {
    transform: translateY(0) rotate(1deg) scale(1.05);
    box-shadow:
      0 0 18px 2px rgba(244, 114, 182, 0.45),
      0 12px 26px rgba(236, 72, 153, 0.22);
  }
  75% {
    transform: translateY(-1px) rotate(-0.8deg) scale(1.03);
  }
}

[data-sp-embed] .flow-visual--cdp{
  display: grid;
  place-items: center;
  padding: 10px 12px;
}

[data-sp-embed] .flow-ingest{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

[data-sp-embed] .flow-ingest__signals{
  display: flex;
  justify-content: center;
  gap: 6px;
  width: 100%;
}

[data-sp-embed] .flow-ingest__chip{
  padding: 0.28rem 0.5rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(34, 197, 94, 0.28);
  color: #166534;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  animation: flow-ingest-chip 2.4s ease-in-out infinite;
}

[data-sp-embed] .flow-ingest__chip--likes{ animation-delay: 0.2s; color: #15803d; }
[data-sp-embed] .flow-ingest__chip--login{ animation-delay: 0.4s; color: #047857; }

[data-sp-embed] .flow-ingest__streams{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  width: 72%;
  height: 18px;
  position: relative;
}

[data-sp-embed] .flow-ingest__streams i{
  display: block;
  width: 2px;
  height: 100%;
  margin: 0 auto;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(74, 222, 128, 0.15), #22c55e);
  position: relative;
  overflow: hidden;
}

[data-sp-embed] .flow-ingest__streams i::after{
  content: "";
  position: absolute;
  left: 50%;
  top: -6px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.7);
  transform: translateX(-50%);
  animation: flow-ingest-drop 1.8s ease-in-out infinite;
}

[data-sp-embed] .flow-ingest__streams i:nth-child(2)::after{ animation-delay: 0.25s; }
[data-sp-embed] .flow-ingest__streams i:nth-child(3)::after{ animation-delay: 0.5s; }

[data-sp-embed] .flow-ingest__platform{
  width: 92%;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  border: 1.5px solid rgba(34, 197, 94, 0.35);
  box-shadow:
    0 0 0 0 rgba(34, 197, 94, 0.2),
    0 10px 20px rgba(22, 163, 74, 0.12);
  animation: flow-ingest-platform 2.4s ease-in-out infinite;
}

[data-sp-embed] .flow-ingest__bar{
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0.3rem 0.5rem;
  background: linear-gradient(90deg, #ecfdf5, #d1fae5);
  border-bottom: 1px solid rgba(34, 197, 94, 0.18);
}

[data-sp-embed] .flow-ingest__dot{
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: #86efac;
}

[data-sp-embed] .flow-ingest__dot:nth-child(1){ background: #fca5a5; }
[data-sp-embed] .flow-ingest__dot:nth-child(2){ background: #fde68a; }
[data-sp-embed] .flow-ingest__dot:nth-child(3){ background: #86efac; }

[data-sp-embed] .flow-ingest__bar strong{
  margin-left: auto;
  font-size: 0.5625rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #15803d;
}

[data-sp-embed] .flow-ingest__body{
  position: relative;
  display: grid;
  gap: 5px;
  padding: 0.55rem 0.6rem 0.65rem;
  background: linear-gradient(180deg, #fff 0%, #f0fdf4 100%);
}

[data-sp-embed] .flow-ingest__row{
  display: block;
  height: 6px;
  border-radius: 999px;
  background: #dcfce7;
  transform-origin: left center;
  animation: flow-ingest-row 2.4s ease-in-out infinite;
}

[data-sp-embed] .flow-ingest__row--mid{
  width: 78%;
  animation-delay: 0.15s;
}

[data-sp-embed] .flow-ingest__row--short{
  width: 54%;
  animation-delay: 0.3s;
}

[data-sp-embed] .flow-ingest__catch{
  position: absolute;
  right: 6px;
  bottom: 6px;
  padding: 0.15rem 0.4rem;
  border-radius: 999px;
  background: rgba(22, 163, 74, 0.12);
  color: #15803d;
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  opacity: 0;
  animation: flow-ingest-catch 2.4s ease-in-out infinite;
}

@keyframes flow-ingest-chip {
  0%, 100% {
    transform: translateY(0) scale(1);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
  40% {
    transform: translateY(-2px) scale(1.06);
    box-shadow: 0 0 0 4px rgba(187, 247, 208, 0.55);
    border-color: rgba(34, 197, 94, 0.5);
  }
}

@keyframes flow-ingest-drop {
  0% { top: -6px; opacity: 0; }
  15% { opacity: 1; }
  70% { top: calc(100% - 2px); opacity: 1; }
  100% { top: calc(100% + 4px); opacity: 0; }
}

@keyframes flow-ingest-platform {
  0%, 100% {
    box-shadow:
      0 0 0 0 rgba(34, 197, 94, 0.15),
      0 10px 20px rgba(22, 163, 74, 0.1);
  }
  50% {
    box-shadow:
      0 0 16px 2px rgba(74, 222, 128, 0.35),
      0 12px 24px rgba(22, 163, 74, 0.16);
  }
}

@keyframes flow-ingest-row {
  0%, 20% { transform: scaleX(0.2); opacity: 0.4; }
  45%, 80% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0.85; }
}

@keyframes flow-ingest-catch {
  0%, 35% { opacity: 0; transform: translateY(3px); }
  50%, 85% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0.7; }
}

[data-sp-embed] .value-flow-step--ai .value-flow-step__visual{
  padding: 0;
  overflow: hidden;
}

[data-sp-embed] .flow-visual--ai{
  overflow: hidden;
  border-radius: 12px;
  background: linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 100%);
  display: grid;
  place-items: center;
  padding: 10px;
}

[data-sp-embed] .flow-ai-feed{
  width: 100%;
  display: grid;
  gap: 6px;
}

[data-sp-embed] .flow-ai-feed__row{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  padding: 0.4rem 0.5rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(56, 189, 248, 0.28);
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.08);
  opacity: 0;
  transform: translateY(8px);
  animation: flow-ai-row 3.6s ease-in-out infinite;
}

[data-sp-embed] .flow-ai-feed__row--1{ animation-delay: 0s; }
[data-sp-embed] .flow-ai-feed__row--2{ animation-delay: 0.55s; }
[data-sp-embed] .flow-ai-feed__row--3{ animation-delay: 1.1s; }

[data-sp-embed] .flow-ai-feed__avatar{
  display: grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  background: linear-gradient(145deg, #7dd3fc, #38bdf8);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 800;
}

[data-sp-embed] .flow-ai-feed__row--2 .flow-ai-feed__avatar{
  background: linear-gradient(145deg, #a5b4fc, #818cf8);
}

[data-sp-embed] .flow-ai-feed__row--3 .flow-ai-feed__avatar{
  background: linear-gradient(145deg, #67e8f9, #22d3ee);
}

[data-sp-embed] .flow-ai-feed__meta{
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

[data-sp-embed] .flow-ai-feed__meta strong{
  font-size: 0.625rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.2;
}

[data-sp-embed] .flow-ai-feed__tag{
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #0284c7;
}

[data-sp-embed] .flow-ai-feed__action{
  max-width: 7.5rem;
  padding: 0.22rem 0.4rem;
  border-radius: 999px;
  background: #0ea5e9;
  color: #fff;
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transform: scale(0.86);
  animation: flow-ai-action 3.6s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.35);
}

[data-sp-embed] .flow-ai-feed__row--1 .flow-ai-feed__action{ animation-delay: 0.35s; }
[data-sp-embed] .flow-ai-feed__row--2 .flow-ai-feed__action{ animation-delay: 0.9s; }
[data-sp-embed] .flow-ai-feed__row--3 .flow-ai-feed__action{ animation-delay: 1.45s; }

@keyframes flow-ai-row {
  0%, 8% { opacity: 0; transform: translateY(8px); }
  18%, 78% { opacity: 1; transform: translateY(0); }
  92%, 100% { opacity: 0.55; transform: translateY(0); }
}

@keyframes flow-ai-action {
  0%, 20% {
    opacity: 0;
    transform: scale(0.86);
    box-shadow: 0 0 0 0 rgba(14, 165, 233, 0);
  }
  35%, 80% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.45);
  }
  100% {
    opacity: 0.85;
    transform: scale(1);
  }
}

[data-sp-embed] .flow-visual--retain{
  display: grid;
  place-items: center;
  padding: 10px 12px;
}

[data-sp-embed] .flow-retain{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

[data-sp-embed] .flow-retain__platform{
  width: 94%;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  border: 1.5px solid rgba(16, 185, 129, 0.38);
  box-shadow: 0 10px 20px rgba(16, 185, 129, 0.12);
}

[data-sp-embed] .flow-retain__bar{
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0.3rem 0.5rem;
  background: linear-gradient(90deg, #ecfdf5, #d1fae5);
  border-bottom: 1px solid rgba(16, 185, 129, 0.18);
}

[data-sp-embed] .flow-retain__bar span{
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: #86efac;
}

[data-sp-embed] .flow-retain__bar span:nth-child(1){ background: #fca5a5; }
[data-sp-embed] .flow-retain__bar span:nth-child(2){ background: #fde68a; }

[data-sp-embed] .flow-retain__bar strong{
  margin-left: auto;
  font-size: 0.5625rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #047857;
}

[data-sp-embed] .flow-retain__stage{
  position: relative;
  height: 78px;
  padding: 10px 12px;
  background:
    linear-gradient(180deg, #fff 0%, #f0fdf4 100%);
  overflow: hidden;
}

[data-sp-embed] .flow-retain__stage::before{
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  right: 0;
  width: 28px;
  background: linear-gradient(90deg, transparent, rgba(254, 226, 226, 0.85));
  border-left: 1px dashed rgba(248, 113, 113, 0.45);
  pointer-events: none;
}

[data-sp-embed] .flow-retain__user{
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

[data-sp-embed] .flow-retain__user i{
  display: grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 999px;
  font-style: normal;
  font-size: 0.625rem;
  font-weight: 800;
  color: #fff;
}

[data-sp-embed] .flow-retain__user em{
  font-style: normal;
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

[data-sp-embed] .flow-retain__user--stay{
  left: 18%;
  top: 22%;
}

[data-sp-embed] .flow-retain__user--stay i{
  background: linear-gradient(145deg, #34d399, #059669);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
}

[data-sp-embed] .flow-retain__user--stay em{
  color: #047857;
}

[data-sp-embed] .flow-retain__user--catch em{
  position: absolute;
  top: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

[data-sp-embed] .flow-retain__user--catch{
  left: 52%;
  top: 28%;
  animation: flow-retain-escape 2.8s ease-in-out infinite;
  z-index: 2;
}

[data-sp-embed] .flow-retain__user--catch i{
  background: linear-gradient(145deg, #fb7185, #e11d48);
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.2);
  animation: flow-retain-avatar 2.8s ease-in-out infinite;
}

[data-sp-embed] .flow-retain__leave{
  color: #be123c;
  animation: flow-retain-leave 2.8s ease-in-out infinite;
}

[data-sp-embed] .flow-retain__back{
  color: #047857;
  animation: flow-retain-back 2.8s ease-in-out infinite;
}

[data-sp-embed] .flow-retain__lasso{
  position: absolute;
  left: 34%;
  top: 42%;
  width: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #34d399, #059669);
  transform-origin: left center;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.55);
  animation: flow-retain-lasso 2.8s ease-in-out infinite;
  z-index: 1;
}

[data-sp-embed] .flow-retain__lasso::after{
  content: "";
  position: absolute;
  right: -5px;
  top: 50%;
  width: 9px;
  height: 9px;
  border: 2px solid #059669;
  border-radius: 999px;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.45);
}

[data-sp-embed] .flow-retain__note{
  font-size: 0.5625rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #047857;
  opacity: 0.9;
}

@keyframes flow-retain-escape {
  0%, 12% {
    transform: translateX(0) translateY(0);
    opacity: 1;
  }
  38% {
    transform: translateX(42px) translateY(-2px);
    opacity: 0.85;
  }
  58% {
    transform: translateX(48px) translateY(0);
    opacity: 0.7;
  }
  78%, 100% {
    transform: translateX(4px) translateY(0);
    opacity: 1;
  }
}

@keyframes flow-retain-lasso {
  0%, 20% {
    width: 0;
    opacity: 0;
  }
  40% {
    width: 52px;
    opacity: 1;
  }
  55% {
    width: 58px;
    opacity: 1;
  }
  78%, 100% {
    width: 22px;
    opacity: 0.85;
  }
}

@keyframes flow-retain-leave {
  0%, 55% { opacity: 1; }
  70%, 100% { opacity: 0; }
}

@keyframes flow-retain-back {
  0%, 55% { opacity: 0; }
  70%, 100% { opacity: 1; }
}

@keyframes flow-retain-avatar {
  0%, 58% {
    background: linear-gradient(145deg, #fb7185, #e11d48);
    box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.2);
  }
  78%, 100% {
    background: linear-gradient(145deg, #34d399, #059669);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.22);
  }
}

@keyframes flow-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes flow-pulse {
  0% { box-shadow: 0 0 0 0 rgba(234, 88, 12, 0.45); }
  70% { box-shadow: 0 0 0 8px rgba(234, 88, 12, 0); }
  100% { box-shadow: 0 0 0 0 rgba(234, 88, 12, 0); }
}

@keyframes flow-pill-pop {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(1.06); }
}

@keyframes flow-draw {
  0% { stroke-dashoffset: 220; }
  45%, 100% { stroke-dashoffset: 0; }
}

@keyframes flow-dot {
  0%, 35% { opacity: 0; }
  50%, 100% { opacity: 1; }
}

@keyframes flow-card-glow {
  0%, 100% {
    box-shadow:
      0 14px 34px rgba(22, 163, 74, 0.1),
      0 0 0 0 rgba(74, 222, 128, 0.2);
  }
  50% {
    box-shadow:
      0 16px 38px rgba(22, 163, 74, 0.14),
      0 0 26px 4px rgba(74, 222, 128, 0.28);
  }
}

@keyframes flow-chevron-nudge {
  0%, 100% { transform: translateY(-50%) translateX(0); opacity: 0.75; }
  50% { transform: translateY(-50%) translateX(4px); opacity: 1; }
}

@keyframes flow-chevron-nudge-down {
  0%, 100% { transform: translateX(-50%) rotate(90deg) translateX(0); opacity: 0.75; }
  50% { transform: translateX(-50%) rotate(90deg) translateX(4px); opacity: 1; }
}

@media (max-width: 760px) {
  [data-sp-embed] .value-flow-step{
    padding: 12px 10px 14px;
    gap: 10px;
    border-radius: 16px;
  }

  [data-sp-embed] .value-flow-step__visual{
    height: 136px;
    border-radius: 12px;
    overflow: hidden;
  }

  [data-sp-embed] .value-flow-step--ai .value-flow-step__visual{
    padding: 0;
  }

  /* transform scale は枠外クリップで崩れるため、要素自体をコンパクト化 */
  [data-sp-embed] .value-flow-step__visual .flow-visual, [data-sp-embed] .value-flow-step__visual .flow-visual--ai{
    transform: none;
    width: 100%;
    height: 100%;
  }

  [data-sp-embed] .flow-builder__palette{
    display: none;
  }

  [data-sp-embed] .flow-visual--create{
    padding: 6px 8px;
  }

  [data-sp-embed] .flow-builder__card{
    width: min(92%, 124px);
    padding: 6px;
    border-radius: 10px;
  }

  [data-sp-embed] .flow-builder__media{
    height: 38px;
    margin-bottom: 5px;
  }

  [data-sp-embed] .flow-builder__media-label{
    font-size: 0.5rem;
  }

  [data-sp-embed] .flow-builder__lines{
    gap: 3px;
    margin-bottom: 5px;
  }

  [data-sp-embed] .flow-builder__line{
    height: 4px;
  }

  [data-sp-embed] .flow-builder__cta{
    height: 16px;
    font-size: 0.5rem;
    border-radius: 6px;
  }

  [data-sp-embed] .flow-builder__cursor{
    width: 10px;
    height: 10px;
  }

  /* STEP 02 MA: クーポンまで収める＋グローを抑える */
  [data-sp-embed] .flow-visual--dm{
    gap: 3px;
    padding: 6px 4px;
  }

  [data-sp-embed] .flow-visual__actions{
    gap: 4px;
  }

  [data-sp-embed] .flow-visual__pill{
    padding: 0.22rem 0.4rem;
    font-size: 0.5rem;
  }

  [data-sp-embed] .flow-visual__pill--like, [data-sp-embed] .flow-visual__pill--comment{
    animation: flow-pill-glow-compact 1.8s ease-in-out infinite;
  }

  [data-sp-embed] .flow-visual__arrow--glow{
    height: 12px;
    width: 2px;
    animation: flow-arrow-glow-compact 1.6s ease-in-out infinite;
  }

  [data-sp-embed] .flow-visual__arrow--glow::after{
    width: 6px;
    height: 6px;
    bottom: -2px;
  }

  [data-sp-embed] .flow-visual__coupon{
    width: 94%;
    padding: 0.28rem 0.35rem 0.32rem;
    border-radius: 10px;
    animation: flow-coupon-vibe-compact 1.6s ease-in-out infinite;
  }

  [data-sp-embed] .flow-visual__coupon-badge{
    margin-bottom: 0.08rem;
    padding: 0.08rem 0.32rem;
    font-size: 0.4375rem;
    box-shadow: none;
  }

  [data-sp-embed] .flow-visual__coupon strong{
    font-size: 0.75rem;
    text-shadow: none;
  }

  [data-sp-embed] .flow-visual__coupon-sub{
    font-size: 0.4375rem;
    margin-top: 0.05rem;
  }

  /* STEP 03 CDP */
  [data-sp-embed] .flow-visual--cdp{
    padding: 6px;
  }

  [data-sp-embed] .flow-ingest{
    gap: 4px;
  }

  [data-sp-embed] .flow-ingest__signals{
    gap: 3px;
  }

  [data-sp-embed] .flow-ingest__chip{
    padding: 0.18rem 0.32rem;
    font-size: 0.5rem;
    animation: flow-ingest-chip-compact 2.4s ease-in-out infinite;
  }

  [data-sp-embed] .flow-ingest__streams{
    width: 78%;
    height: 10px;
    gap: 8px;
  }

  [data-sp-embed] .flow-ingest__platform{
    width: 94%;
    border-radius: 8px;
  }

  [data-sp-embed] .flow-ingest__bar{
    gap: 3px;
    padding: 0.28rem 0.4rem;
  }

  [data-sp-embed] .flow-ingest__bar strong{
    font-size: 0.5625rem;
  }

  [data-sp-embed] .flow-ingest__body{
    padding: 0.35rem 0.4rem 0.45rem;
    gap: 4px;
  }

  [data-sp-embed] .flow-ingest__row{
    height: 4px;
  }

  [data-sp-embed] .flow-ingest__catch{
    font-size: 0.4375rem;
    padding: 0.12rem 0.35rem;
  }

  /* STEP 04 AI: 2行に絞って収める */
  [data-sp-embed] .flow-visual--ai{
    padding: 5px;
    border-radius: 10px;
  }

  [data-sp-embed] .flow-ai-feed{
    gap: 3px;
  }

  [data-sp-embed] .flow-ai-feed__row{
    padding: 0.22rem 0.3rem;
    gap: 4px;
    border-radius: 8px;
  }

  [data-sp-embed] .flow-ai-feed__row--3{
    display: none;
  }

  [data-sp-embed] .flow-ai-feed__avatar{
    width: 1.05rem;
    height: 1.05rem;
    font-size: 0.5rem;
  }

  [data-sp-embed] .flow-ai-feed__meta strong{
    font-size: 0.5rem;
  }

  [data-sp-embed] .flow-ai-feed__tag{
    font-size: 0.4rem;
  }

  [data-sp-embed] .flow-ai-feed__action{
    max-width: 4.75rem;
    padding: 0.14rem 0.28rem;
    font-size: 0.4rem;
  }

  /* STEP 05 retain */
  [data-sp-embed] .flow-retain{
    gap: 4px;
    padding: 4px;
  }

  [data-sp-embed] .flow-retain__platform{
    border-radius: 8px;
  }

  [data-sp-embed] .flow-retain__bar strong{
    font-size: 0.5625rem;
  }

  [data-sp-embed] .flow-retain__user i{
    width: 1.1rem;
    height: 1.1rem;
    font-size: 0.5rem;
  }

  [data-sp-embed] .flow-retain__user em{
    font-size: 0.4375rem;
  }

  [data-sp-embed] .flow-retain__note{
    font-size: 0.4375rem;
  }

  [data-sp-embed] .value-flow-step__body{
    gap: 6px;
  }

  [data-sp-embed] .value-flow-step__num{
    font-size: 0.625rem;
    letter-spacing: 0.06em;
  }

  [data-sp-embed] .value-flow-step h3{
    font-size: 0.8125rem;
    line-height: 1.4;
  }

  [data-sp-embed] .value-flow-step p{
    font-size: 0.6875rem;
    line-height: 1.55;
  }

  [data-sp-embed] .value-flow-step__link{
    margin-top: 2px;
    padding: 0.3rem 0.55rem;
    font-size: 0.6875rem;
  }

  [data-sp-embed] .value-flow-step__chevron svg{
    width: 22px;
    height: 22px;
  }
}

@keyframes flow-pill-glow-compact {
  0%, 100% {
    transform: scale(1);
    box-shadow: none;
    border-color: rgba(244, 114, 182, 0.28);
  }
  50% {
    transform: scale(1.03);
    box-shadow: 0 0 0 2px rgba(251, 207, 232, 0.45);
    border-color: rgba(236, 72, 153, 0.5);
    background: #fff5f8;
  }
}

@keyframes flow-arrow-glow-compact {
  0%, 100% {
    opacity: 0.7;
    box-shadow: 0 0 4px rgba(244, 114, 182, 0.3);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 8px rgba(244, 114, 182, 0.55);
  }
}

@keyframes flow-coupon-vibe-compact {
  0%, 100% {
    transform: translateY(0) scale(1);
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.14);
  }
  50% {
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 6px 14px rgba(236, 72, 153, 0.2);
  }
}

@keyframes flow-ingest-chip-compact {
  0%, 100% {
    transform: translateY(0) scale(1);
    box-shadow: none;
  }
  40% {
    transform: translateY(-1px) scale(1.03);
    box-shadow: 0 0 0 2px rgba(187, 247, 208, 0.45);
  }
}

/* ===== Feature index nav ===== */
[data-sp-embed] .feature-index{
  background: linear-gradient(180deg, #f8f9fa 0%, #fafbfc 55%, #ffffff 100%);
  border-top: 1px solid var(--line);
}

[data-sp-embed] .feature-index__lead{
  margin: 1.25rem auto 0;
  max-width: 36rem;
  color: var(--muted);
  font-size: clamp(15px, 1.2vw + 0.4rem, 17px);
  line-height: 1.75;
  font-weight: 500;
}

[data-sp-embed] .feature-nav-wrap{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  max-width: 1180px;
  margin: 0 auto;
  align-items: stretch;
}

[data-sp-embed] .feature-nav-group{
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
  height: 100%;
}

[data-sp-embed] .feature-nav-group__header{
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  padding: 0 0.15rem;
}

[data-sp-embed] .feature-nav-group__label{
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}

[data-sp-embed] .feature-nav-group__sub{
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--muted);
}

[data-sp-embed] .feature-nav-group--cdp .feature-nav-group__label{
  color: #15803d;
}

[data-sp-embed] .feature-nav-group--analysis .feature-nav-group__label{
  color: #7e22ce;
}

[data-sp-embed] .feature-nav-group--analysis-ai .feature-nav-group__label{
  color: #1d4ed8;
  text-transform: none;
  letter-spacing: 0.04em;
}

[data-sp-embed] .feature-nav-group--ma .feature-nav-group__label{
  color: #be185d;
}

/* Keep desktop headers aligned: hide duplicate 分析 label above AI card */
@media (min-width: 1041px) {
  [data-sp-embed] .feature-nav-group--analysis-ai .feature-nav-group__header{
    visibility: hidden;
  }
}

[data-sp-embed] .feature-nav{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  max-width: 1180px;
  margin: 0 auto;
}

[data-sp-embed] .feature-nav--group{
  max-width: none;
  margin: 0;
  width: 100%;
  flex: 1 1 auto;
  align-content: stretch;
  align-items: stretch;
  grid-template-columns: minmax(0, 1fr);
}

[data-sp-embed] .feature-nav-card{
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 220px;
  padding: 1.35rem 1.35rem 1.15rem;
  border-radius: 16px;
  border: 1px solid var(--fn-border, rgba(0, 0, 0, 0.08));
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    var(--fn-bg-mid, #fafbfc) 55%,
    var(--fn-bg-end, #ffffff) 100%
  );
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 8px 24px var(--fn-shadow, rgba(0, 0, 0, 0.04));
  overflow: hidden;
  isolation: isolate;
  transition:
    transform 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease;
}

[data-sp-embed] .feature-nav-card::before{
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--fn-accent, var(--ink));
  opacity: 0.92;
  z-index: 2;
}

[data-sp-embed] .feature-nav-card::after{
  content: "";
  position: absolute;
  top: -30%;
  left: 0;
  width: 38%;
  height: 160%;
  background: linear-gradient(
    105deg,
    transparent 0%,
    transparent 36%,
    rgba(255, 255, 255, 0.25) 44%,
    rgba(255, 255, 255, 0.95) 49%,
    #fff 50.5%,
    rgba(255, 255, 255, 0.95) 52%,
    rgba(255, 255, 255, 0.25) 57%,
    transparent 64%,
    transparent 100%
  );
  transform: translateX(-200%) skewX(-24deg);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  filter: blur(0.4px);
}

[data-sp-embed] .feature-nav-card > *{
  position: relative;
  z-index: 2;
}

[data-sp-embed] .feature-nav-card:hover{
  transform: translateY(-3px);
  border-color: var(--fn-border-hover, rgba(0, 0, 0, 0.14));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 16px 36px var(--fn-shadow-hover, rgba(0, 0, 0, 0.08));
}

[data-sp-embed] .feature-nav-card:hover::after{
  animation: feature-nav-sheen 0.48s cubic-bezier(0.25, 0.9, 0.3, 1) both;
}

@keyframes feature-nav-sheen {
  0% {
    opacity: 0;
    transform: translateX(-200%) skewX(-24deg);
  }
  12% {
    opacity: 1;
  }
  78% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(340%) skewX(-24deg);
  }
}

[data-sp-embed] .feature-nav-card:focus-within{
  border-color: var(--fn-border-hover, rgba(0, 0, 0, 0.14));
}

[data-sp-embed] .feature-nav-card:focus-visible{
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

[data-sp-embed] .feature-nav-card__system{
  display: block;
  margin: 0 0 0.85rem;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--fn-system-color, var(--muted));
}

[data-sp-embed] .feature-nav-card__title{
  margin: 0 0 0.65rem;
  font-size: clamp(1.25rem, 1.1vw + 0.85rem, 1.5rem);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink);
}

[data-sp-embed] .feature-nav-card__desc{
  margin: 0;
  flex: 1;
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.7;
  font-weight: 500;
  letter-spacing: 0.02em;
}

[data-sp-embed] .feature-nav-card__tags{
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  margin: 0.85rem 0 0;
  padding: 0;
}

[data-sp-embed] .feature-nav-card__tags li{
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.05);
  color: #374151;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

[data-sp-embed] .feature-nav-card__cta{
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 1.1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--fn-cta-color, var(--ink));
  transition: gap 180ms ease;
}

[data-sp-embed] .feature-nav-card:hover .feature-nav-card__cta{
  gap: 0.55rem;
}

[data-sp-embed] .feature-nav-card__main{
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

[data-sp-embed] .feature-nav-card__main .feature-nav-card__desc{
  flex: 1;
}

/* Nested jump cards inside feature cards */
[data-sp-embed] .feature-nav-subs{
  display: grid;
  gap: 8px;
  margin-top: 1.15rem;
}

[data-sp-embed] .feature-nav-sub{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0.85rem;
  border-radius: 12px;
  border: 1px solid var(--fn-border, rgba(0, 0, 0, 0.08));
  background: rgba(255, 255, 255, 0.78);
  color: var(--fn-cta-color, var(--ink));
  box-shadow: 0 2px 8px var(--fn-shadow, rgba(0, 0, 0, 0.03));
  transition:
    transform 180ms ease,
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

[data-sp-embed] .feature-nav-sub:hover, [data-sp-embed] .feature-nav-sub:focus-visible{
  transform: translateY(-1px);
  background: #fff;
  border-color: var(--fn-border-hover, rgba(0, 0, 0, 0.14));
  box-shadow: 0 8px 18px var(--fn-shadow-hover, rgba(0, 0, 0, 0.08));
  outline: none;
}

[data-sp-embed] .feature-nav-sub__label{
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.35;
  color: var(--ink);
}

[data-sp-embed] .feature-nav-sub__cta{
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--fn-cta-color, var(--ink));
  white-space: nowrap;
}

[data-sp-embed] .feature-nav-sub--demo{
  background: color-mix(in srgb, var(--fn-cta-color, #be185d) 8%, #fff);
  border-color: color-mix(in srgb, var(--fn-cta-color, #be185d) 28%, transparent);
}

[data-sp-embed] .feature-nav-card--management{
  --fn-bg-mid: #f4fdf8;
  --fn-bg-end: #ecfdf5;
  --fn-border: rgba(34, 197, 94, 0.14);
  --fn-border-hover: rgba(34, 197, 94, 0.28);
  --fn-shadow: rgba(22, 163, 74, 0.05);
  --fn-shadow-hover: rgba(22, 163, 74, 0.1);
  --fn-accent: linear-gradient(90deg, #86efac 0%, #22c55e 55%, #16a34a 100%);
  --fn-system-color: #15803d;
  --fn-cta-color: #15803d;
}

[data-sp-embed] .feature-nav-card--analysis{
  --fn-bg-mid: #fdfaff;
  --fn-bg-end: #f5f3ff;
  --fn-border: rgba(168, 85, 247, 0.14);
  --fn-border-hover: rgba(168, 85, 247, 0.28);
  --fn-shadow: rgba(147, 51, 234, 0.05);
  --fn-shadow-hover: rgba(147, 51, 234, 0.1);
  --fn-accent: linear-gradient(90deg, #c4b5fd 0%, #a855f7 55%, #9333ea 100%);
  --fn-system-color: #7e22ce;
  --fn-cta-color: #7e22ce;
}

[data-sp-embed] .feature-nav-card--ai{
  --fn-bg-mid: #f8fbff;
  --fn-bg-end: #eff6ff;
  --fn-border: rgba(59, 130, 246, 0.14);
  --fn-border-hover: rgba(59, 130, 246, 0.28);
  --fn-shadow: rgba(37, 99, 235, 0.05);
  --fn-shadow-hover: rgba(37, 99, 235, 0.1);
  --fn-accent: linear-gradient(90deg, #93c5fd 0%, #3b82f6 55%, #2563eb 100%);
  --fn-system-color: #1d4ed8;
  --fn-cta-color: #1d4ed8;
}

[data-sp-embed] .feature-nav-card--marketing{
  --fn-bg-mid: #fff8f9;
  --fn-bg-end: #fff5f7;
  --fn-border: rgba(236, 72, 153, 0.14);
  --fn-border-hover: rgba(236, 72, 153, 0.28);
  --fn-shadow: rgba(219, 39, 119, 0.05);
  --fn-shadow-hover: rgba(219, 39, 119, 0.1);
  --fn-accent: linear-gradient(90deg, #f9a8d4 0%, #ec4899 55%, #db2777 100%);
  --fn-system-color: #be185d;
  --fn-cta-color: #be185d;
}

/* ===== MA + CDP shared band ===== */
[data-sp-embed] .platforms-band{
  --platforms-max: min(66rem, 100%);
  --platforms-visual-max: clamp(300px, 40vw, 540px);
  --platforms-gap: clamp(1.5rem, 3.2vw, 2.75rem);
  --platforms-cols-copy: minmax(0, 0.92fr);
  --platforms-cols-visual: minmax(0, 1.08fr);
  /* Soft even wash: pale red from right, mint from CDP bottom-left — no hard edges */
  background:
    radial-gradient(
      ellipse 120% 95% at 0% 100%,
      rgba(220, 252, 231, 0.55) 0%,
      rgba(236, 253, 245, 0.32) 32%,
      rgba(247, 254, 250, 0.14) 55%,
      rgba(255, 255, 255, 0) 78%
    ),
    radial-gradient(
      ellipse 70% 120% at 100% 42%,
      rgba(254, 226, 226, 0.42) 0%,
      rgba(255, 241, 242, 0.22) 35%,
      rgba(255, 250, 250, 0.1) 58%,
      rgba(255, 255, 255, 0) 82%
    ),
    radial-gradient(
      ellipse 90% 55% at 50% 0%,
      rgba(255, 251, 252, 0.9) 0%,
      rgba(255, 255, 255, 0) 70%
    ),
    linear-gradient(
      165deg,
      #ffffff 0%,
      #fffcfc 28%,
      #fffcfd 48%,
      #fafefc 72%,
      #f7fcf9 100%
    );
}

[data-sp-embed] .platforms-band > .platform-stage.section-band, [data-sp-embed] .platforms-band > .cdp-stage.section-band{
  background: transparent;
  padding-inline: clamp(28px, 7.5vw, 120px);
}

/* ===== MA Platform Stage ===== */
[data-sp-embed] .platform-stage{
  position: relative;
  padding-top: clamp(3.5rem, 7vw, 5.5rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
  overflow: visible;
  background: transparent;
}

[data-sp-embed] .platform-stage__inner{
  position: relative;
  z-index: 1;
  max-width: var(--platforms-max);
  margin: 0 auto;
}

[data-sp-embed] .platform-stage__inner.showcase{
  grid-template-columns: var(--platforms-cols-copy) var(--platforms-cols-visual);
  gap: var(--platforms-gap);
  align-items: center;
}

[data-sp-embed] .ma-stage__visual{
  position: relative;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  cursor: pointer;
}

[data-sp-embed] .ma-stage__visual:focus-visible{
  outline: 2px solid rgba(220, 38, 38, 0.45);
  outline-offset: 6px;
  border-radius: 4px;
}

[data-sp-embed] .ma-stage__visual-stage{
  position: relative;
  display: grid;
  grid-template: 1fr / 1fr;
  width: min(100%, var(--platforms-visual-max));
  margin-left: auto;
  overflow: visible;
  background: transparent;
}

[data-sp-embed] .ma-stage__slide{
  grid-area: 1 / 1;
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border: none;
  border-radius: 0;
  object-fit: contain;
  opacity: 0;
  transform: scale(0.82) rotate(var(--ma-slide-tilt, 0deg));
  pointer-events: none;
  will-change: opacity, transform;
  filter: drop-shadow(0 28px 56px rgba(0, 0, 0, 0.2));
}

[data-sp-embed] .ma-stage__slide:nth-child(1){
  --ma-slide-tilt: -2.5deg;
}

[data-sp-embed] .ma-stage__slide:nth-child(2){
  --ma-slide-tilt: 2deg;
}

[data-sp-embed] .ma-stage__slide.is-active{
  opacity: 1;
  transform: scale(1) rotate(var(--ma-slide-tilt, 0deg));
  z-index: 1;
}

[data-sp-embed] .ma-stage__slide.is-active:not(.is-entering):not(.is-exiting){
  animation: hero-float-drift 6.2s ease-in-out infinite;
}

[data-sp-embed] .ma-stage__slide.is-entering{
  animation: ma-slide-pop 0.62s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  z-index: 2;
}

[data-sp-embed] .ma-stage__slide.is-exiting{
  animation: ma-slide-out 0.36s cubic-bezier(0.55, 0, 1, 0.45) both;
  z-index: 0;
}

@keyframes ma-slide-pop {
  0% {
    opacity: 0;
    transform: scale(0.68) translateY(28px);
  }

  45% {
    opacity: 1;
    transform: scale(1.1) translateY(-8px);
  }

  70% {
    transform: scale(0.97) translateY(3px);
  }

  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes ma-slide-out {
  0% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }

  100% {
    opacity: 0;
    transform: scale(0.78) translateY(-18px);
  }
}

[data-sp-embed] .platform-stage__inner.showcase .platform-stage__copy{
  order: 1;
}

[data-sp-embed] .platform-stage__inner.showcase .ma-stage__visual{
  order: 2;
}

[data-sp-embed] .platform-stage__copy{
  width: 100%;
  max-width: min(34rem, 100%);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

[data-sp-embed] .platform-stage__copy .eyebrow{
  margin: 0 0 1.1rem;
  color: var(--accent-red);
  font-size: clamp(0.7rem, 0.15vw + 0.66rem, 0.8125rem);
  font-weight: 600;
  letter-spacing: 0.14em;
}

[data-sp-embed] .platform-stage__copy .hero-subtitle{
  margin: 0;
  text-align: right;
}

[data-sp-embed] .platform-wordmark{
  display: block;
  font-family: var(--font-sans);
  font-size: clamp(4.5rem, 14vw + 0.5rem, 9rem);
  font-weight: var(--weight-display);
  letter-spacing: -0.04em;
  line-height: 0.92;
  color: var(--ink);
}

[data-sp-embed] .platform-wordmark--cdp{
  letter-spacing: -0.02em;
}

[data-sp-embed] .platform-stage__wordmark{
  margin: 0 0 clamp(0.75rem, 1.5vw, 1.1rem);
}

[data-sp-embed] .cdp-stage__wordmark{
  margin: 0;
}

[data-sp-embed] .platform-stage .showcase-copy .platform-stage__tagline{
  margin: clamp(0.75rem, 1.5vw, 1.1rem) 0 0;
  width: 100%;
  display: block;
  text-align: right;
  font-size: clamp(1.65rem, 3.2vw + 0.5rem, 2.75rem);
  font-weight: var(--weight-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: var(--ink);
}

[data-sp-embed] .platform-stage .platform-stage__tagline [data-stage-subtitle]{
  display: inline-block;
  max-width: 100%;
  text-align: right;
}

[data-sp-embed] .cdp-stage .platform-stage__tagline{
  margin: clamp(0.75rem, 1.5vw, 1.1rem) 0 0;
  width: 100%;
  display: block;
  text-align: left;
  font-size: clamp(1.65rem, 3.2vw + 0.5rem, 2.75rem);
  font-weight: var(--weight-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: var(--ink);
}

[data-sp-embed] .cdp-stage .platform-stage__tagline [data-stage-subtitle]{
  display: inline-block;
  max-width: 100%;
  text-align: left;
}

/* Soft wordmark float for MA / CDP */
[data-sp-embed].js .platform-stage__copy.reveal:not(.visible) .growth-fade--soft, [data-sp-embed].js .cdp-stage__copy.reveal:not(.visible) .growth-fade--soft, [data-sp-embed].js .section-heading.reveal:not(.visible) .growth-fade--soft, [data-sp-embed].js .showcase-copy.reveal--stagger:not(.visible) .growth-fade--soft, [data-sp-embed].js .contact-inner.reveal--stagger:not(.visible) .growth-fade--soft{
  opacity: 0;
  transform: translateY(1.5rem) scale(0.97);
}

[data-sp-embed].js .platform-stage__copy.reveal.visible .growth-fade--soft, [data-sp-embed].js .cdp-stage__copy.reveal.visible .growth-fade--soft, [data-sp-embed].js .section-heading.reveal.visible .growth-fade--soft, [data-sp-embed].js .showcase-copy.reveal--stagger.visible .growth-fade--soft, [data-sp-embed].js .contact-inner.reveal--stagger.visible .growth-fade--soft{
  animation: hero-title-float 1.85s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--d, 180ms);
}

/* Stage / section subtitles: katakana-tick char reveal */
[data-sp-embed].js .platform-stage__copy.reveal:not(.visible) .hero-subtitle-char, [data-sp-embed].js .cdp-stage__copy.reveal:not(.visible) .hero-subtitle-char, [data-sp-embed].js .section-heading.reveal:not(.visible) .hero-subtitle-char, [data-sp-embed].js .showcase-copy.reveal--stagger:not(.visible) .hero-subtitle-char, [data-sp-embed].js .contact-inner.reveal--stagger:not(.visible) .hero-subtitle-char{
  opacity: 0;
  transform: translateY(0.45em) scale(0.92);
}

[data-sp-embed].js .platform-stage__copy.reveal.visible .hero-subtitle-char, [data-sp-embed].js .cdp-stage__copy.reveal.visible .hero-subtitle-char, [data-sp-embed].js .section-heading.reveal.visible .hero-subtitle-char, [data-sp-embed].js .showcase-copy.reveal--stagger.visible .hero-subtitle-char, [data-sp-embed].js .contact-inner.reveal--stagger.visible .hero-subtitle-char{
  animation: hero-subtitle-char-pop 0.36s cubic-bezier(0.34, 1.45, 0.64, 1) both;
  animation-delay: calc(
    var(--stage-subtitle-base, 920ms) + var(--i, 0) * var(--stage-char-delay, 52ms)
  );
}

/* Long section leads: snappier char flow */
[data-sp-embed].js .section-heading.reveal.visible .value-flow__lead .hero-subtitle-char, [data-sp-embed].js .section-heading.reveal.visible .feature-index__lead .hero-subtitle-char, [data-sp-embed].js .section-heading.reveal.visible .industries__lead .hero-subtitle-char, [data-sp-embed].js .contact-inner.reveal--stagger.visible .contact__lead .hero-subtitle-char{
  animation-duration: 0.2s;
}

[data-sp-embed] .platform-stage__tagline .hero-subtitle-char, [data-sp-embed] .feature-index__lead .hero-subtitle-char, [data-sp-embed] .value-flow__lead .hero-subtitle-char, [data-sp-embed] .industries__lead .hero-subtitle-char, [data-sp-embed] .showcase-subtitle .hero-subtitle-char, [data-sp-embed] .contact__lead .hero-subtitle-char{
  display: inline-block;
}

[data-sp-embed] .feature-index__lead [data-stage-subtitle], [data-sp-embed] .value-flow__lead [data-stage-subtitle], [data-sp-embed] .industries__lead [data-stage-subtitle], [data-sp-embed] .showcase-subtitle [data-stage-subtitle], [data-sp-embed] .contact__lead [data-stage-subtitle]{
  display: inline;
}

[data-sp-embed] .feature-index__lead .text-accent-em, [data-sp-embed] .value-flow__lead .text-accent-em, [data-sp-embed] .feature-index__lead .hero-subtitle-char.text-accent-em, [data-sp-embed] .value-flow__lead .hero-subtitle-char.text-accent-em{
  color: var(--accent-red);
  font-weight: 600;
  background: linear-gradient(
    105deg,
    rgba(254, 202, 202, 0.95),
    rgba(254, 215, 170, 0.85)
  );
  background-repeat: no-repeat;
  background-size: 100% 0.4em;
  background-position: 0 88%;
  padding: 0 0.06em;
}

/* Feature cards: soft float-in */
[data-sp-embed].js .feature-nav-wrap.reveal:not(.visible) .feature-nav-card, [data-sp-embed].js .feature-nav-wrap.reveal:not(.visible) .feature-nav-group__header{
  opacity: 0;
  transform: translateY(1.25rem) scale(0.98);
  filter: blur(8px);
}

[data-sp-embed].js .feature-nav-wrap.reveal.visible .feature-nav-group:nth-child(1) .feature-nav-group__header, [data-sp-embed].js .feature-nav-wrap.reveal.visible .feature-nav-group:nth-child(1) .feature-nav-card{
  animation: growth-fade-up 1.35s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 180ms;
}

[data-sp-embed].js .feature-nav-wrap.reveal.visible .feature-nav-group:nth-child(2) .feature-nav-group__header, [data-sp-embed].js .feature-nav-wrap.reveal.visible .feature-nav-group:nth-child(2) .feature-nav-card{
  animation: growth-fade-up 1.35s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 320ms;
}

[data-sp-embed].js .feature-nav-wrap.reveal.visible .feature-nav-group:nth-child(3) .feature-nav-group__header, [data-sp-embed].js .feature-nav-wrap.reveal.visible .feature-nav-group:nth-child(3) .feature-nav-card{
  animation: growth-fade-up 1.35s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 460ms;
}

[data-sp-embed].js .feature-nav-wrap.reveal.visible .feature-nav-group:nth-child(4) .feature-nav-group__header, [data-sp-embed].js .feature-nav-wrap.reveal.visible .feature-nav-group:nth-child(4) .feature-nav-card{
  animation: growth-fade-up 1.35s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 600ms;
}

[data-sp-embed].js .value-flow__steps.reveal.visible .value-flow-step-wrap.growth-fade{
  animation: growth-fade-up 1.25s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--d, 280ms);
}

/* ===== CDP Platform Stage ===== */
[data-sp-embed] .cdp-stage{
  position: relative;
  padding-top: clamp(2rem, 4vw, 3rem);
  padding-bottom: clamp(3.5rem, 7vw, 5.5rem);
  overflow: visible;
  background: transparent;
}

[data-sp-embed] .cdp-stage__inner{
  position: relative;
  z-index: 1;
  max-width: var(--platforms-max);
  margin: 0 auto;
}

[data-sp-embed] .cdp-stage__inner.showcase.reverse{
  grid-template-columns: var(--platforms-cols-visual) var(--platforms-cols-copy);
  gap: var(--platforms-gap);
}

[data-sp-embed] .cdp-stage__visual{
  position: relative;
  isolation: isolate;
}

[data-sp-embed] .cdp-stage__visual.showcase-media{
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

[data-sp-embed] .cdp-stage__visual-stage{
  position: relative;
  z-index: 1;
  width: min(100%, var(--platforms-visual-max));
  max-width: none;
  margin-inline: 0;
  margin-right: auto;
  border-radius: 0;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  overflow: visible;
  transform-origin: center center;
  will-change: transform;
}

[data-sp-embed] .cdp-stage__visual-stage::before{
  display: none;
}

[data-sp-embed] .cdp-stage__visual-stage img{
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border: none;
  border-radius: 0;
  object-fit: contain;
  max-height: none;
  transition: none;
  background: transparent;
}

[data-sp-embed].js .cdp-stage__visual.is-animating .cdp-stage__visual-stage{
  animation:
    cdp-media-settle 1.1s cubic-bezier(0.22, 1, 0.36, 1) both,
    cdp-showcase-float 5.2s ease-in-out 1.1s infinite;
}

[data-sp-embed].js .cdp-stage__visual.is-animating img{
  animation: none;
}

@keyframes cdp-media-settle {
  from {
    transform: scale(1.03);
    filter: saturate(0.9);
  }

  to {
    transform: scale(1);
    filter: none;
  }
}

@keyframes cdp-showcase-float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-14px);
  }
}

[data-sp-embed] .cdp-stage__copy .eyebrow{
  margin: 0 0 1rem;
  color: var(--accent-red);
  font-size: clamp(0.7rem, 0.15vw + 0.66rem, 0.8125rem);
  font-weight: 600;
  letter-spacing: 0.14em;
}

/* ===== Showcases ===== */
[data-sp-embed] .showcase{
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
}

[data-sp-embed] .showcase.reverse{
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
}

[data-sp-embed] .showcase.reverse .showcase-copy{ order: 2; }
[data-sp-embed] .showcase.reverse .showcase-media{ order: 1; }

[data-sp-embed] .showcase-copy .section-label{
  display: inline-block;
  margin-bottom: 1rem;
}

[data-sp-embed] .showcase--marketing .section-label{
  color: #be185d;
}

[data-sp-embed] .band-management .section-label{
  color: #15803d;
}

[data-sp-embed] .band-analysis .section-label{
  color: #7e22ce;
}

[data-sp-embed] .band-ai .section-label{
  color: #0284c7;
}

[data-sp-embed] .showcase-copy h2{
  margin: 0;
  font-size: clamp(26px, 3.6vw + 0.4rem, 42px);
  line-height: 1.2;
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
  word-break: normal;
  line-break: auto;
  overflow-wrap: normal;
}

[data-sp-embed] .showcase-copy > p{
  margin: 20px 0 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.85;
  font-weight: 500;
  letter-spacing: 0.04em;
}

[data-sp-embed] .showcase-points{
  display: grid;
  gap: 10px;
  margin-top: 28px;
}

@media (min-width: 900px) {
  [data-sp-embed] .showcase-points--grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

[data-sp-embed] .showcase-point{
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  padding: 16px 18px;
}

[data-sp-embed] .showcase-point h3{
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

[data-sp-embed] .showcase-point p{
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
  font-weight: 500;
}

/* Cross-link to SAKINA CMS — soft highlight under management points */
[data-sp-embed] .cms-bridge{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  margin-top: 22px;
  padding: 18px 20px;
  border-radius: 14px;
  border: 1px solid rgba(22, 163, 74, 0.14);
  background:
    linear-gradient(135deg, rgba(240, 253, 244, 0.95) 0%, rgba(220, 252, 231, 0.55) 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset;
}

[data-sp-embed] .cms-bridge__text{
  margin: 0;
  flex: 1 1 12rem;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: 0.01em;
}

[data-sp-embed] .cms-bridge__button{
  flex: 0 0 auto;
  min-height: 42px;
  padding: 0 22px;
  font-size: 14px;
  border-color: rgba(22, 163, 74, 0.22);
  box-shadow: 0 0.35rem 0.9rem rgba(22, 163, 74, 0.08);
}

[data-sp-embed] .cms-bridge__button:hover{
  border-color: rgba(22, 163, 74, 0.35);
  box-shadow: 0 0.45rem 1.1rem rgba(22, 163, 74, 0.12);
}

/* Inline CMS cross-link — subtle pill badge on "CMS" */
[data-sp-embed] .cms-crosslink{
  margin: 14px 0 0;
}

[data-sp-embed] .cms-crosslink__link{
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35em 0.45em;
  color: var(--muted);
  font-size: clamp(16px, 0.35vw + 0.9rem, 18px);
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: 0.03em;
  text-decoration: none;
  transition: color 220ms ease;
}

[data-sp-embed] .cms-crosslink__link:hover{
  color: var(--ink);
}

[data-sp-embed] .cms-crosslink__badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0.12em 0.62em;
  border-radius: 999px;
  background: rgba(249, 115, 22, 0.12);
  border: 1px solid rgba(249, 115, 22, 0.28);
  color: #c2410c;
  font-size: 0.82em;
  font-weight: 700;
  letter-spacing: 0.1em;
  transition:
    background 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    transform 220ms ease;
}

[data-sp-embed] .cms-crosslink__link:hover .cms-crosslink__badge{
  background: rgba(249, 115, 22, 0.18);
  border-color: rgba(249, 115, 22, 0.36);
  box-shadow: 0 2px 8px rgba(249, 115, 22, 0.12);
  transform: translateY(-1px);
}

[data-sp-embed] .cms-crosslink__arrow{
  opacity: 0.55;
  transition: opacity 220ms ease, transform 220ms ease;
}

[data-sp-embed] .cms-crosslink__link:hover .cms-crosslink__arrow{
  opacity: 0.9;
  transform: translateX(2px);
}

/* Visual showcase points — icon + body layout */
[data-sp-embed] .showcase-points--visual{
  gap: 14px;
}

[data-sp-embed] .showcase-point--visual{
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 20px 20px;
  transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

[data-sp-embed] .showcase-point__icon{
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(145deg, #fff5f5 0%, #fce8ea 100%);
  border: 1px solid rgba(220, 38, 38, 0.12);
  color: var(--accent-red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

[data-sp-embed] .showcase-point__icon svg{
  width: 22px;
  height: 22px;
}

[data-sp-embed] .showcase-point__body{
  flex: 1;
  min-width: 0;
}

[data-sp-embed] .showcase-point--visual:hover{
  border-color: rgba(220, 38, 38, 0.22);
  box-shadow: 0 8px 24px rgba(220, 38, 38, 0.08);
  transform: translateY(-2px);
}

[data-sp-embed] .showcase-point--visual h3{
  margin: 0 0 8px;
}

[data-sp-embed] .showcase-media{
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  box-shadow: none;
  padding: 12px;
  overflow: hidden;
}

[data-sp-embed] .showcase-media img{
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  object-fit: cover;
  max-height: 480px;
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1), filter 700ms ease;
}

[data-sp-embed] .cdp-stage__visual.showcase-media img{
  border: none;
  border-radius: 0;
}

[data-sp-embed] .showcase-media.visible:hover img{
  transform: scale(1.025);
}

[data-sp-embed] .cdp-stage__visual.visible:hover img{
  transform: none;
}

[data-sp-embed] .showcase-media.showcase-media--video{
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  align-self: center;
  justify-self: center;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

[data-sp-embed] .showcase-media--video::before{
  content: none;
}

[data-sp-embed] .showcase-video{
  position: relative;
  z-index: 1;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.875rem;

  /* ===== 固定サイズ（PC）1080x1920 = 9:16 ===== */
  --video-width: 24rem;
  --video-aspect-w: 9;
  --video-aspect-h: 16;
  --video-radius: 1.75rem;
  /* 動画のみ削る（上 右 下 左） */
  --crop-top: 10%;
  --crop-right: 0;
  --crop-bottom: 0;
  --crop-left: 0;
}

[data-sp-embed] .showcase-video__stage{
  position: relative;
  width: var(--video-width);
  max-width: 100%;
  margin: 0 auto;
  padding-top: 0.35rem;
}

[data-sp-embed] .showcase-video__badge{
  position: absolute;
  top: -0.15rem;
  left: 50%;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  transform: translateX(-50%);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18);
  pointer-events: none;
}

[data-sp-embed] .showcase-video__badge-dot{
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: #fb7185;
  box-shadow: 0 0 0 0 rgba(251, 113, 133, 0.55);
  animation: showcase-video-pulse 2s ease-in-out infinite;
}

@keyframes showcase-video-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(251, 113, 133, 0.55);
  }
  50% {
    box-shadow: 0 0 0 0.45rem rgba(251, 113, 133, 0);
  }
}

[data-sp-embed] .showcase-video__stage::after{
  content: "";
  position: absolute;
  inset: 0.35rem 0 0;
  z-index: 0;
  border-radius: calc(var(--video-radius) + 3px);
  background: linear-gradient(
    135deg,
    rgba(244, 114, 182, 0.75) 0%,
    rgba(251, 113, 133, 0.65) 40%,
    rgba(251, 191, 36, 0.55) 75%,
    rgba(244, 114, 182, 0.75) 100%
  );
  filter: blur(0.5px);
  pointer-events: none;
}

[data-sp-embed] .showcase-video__frame{
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: var(--video-aspect-w) / var(--video-aspect-h);
  overflow: hidden;
  border-radius: var(--video-radius);
  background: #111827;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 28px 56px rgba(29, 78, 216, 0.28),
    0 12px 24px rgba(225, 29, 72, 0.12);
}

[data-sp-embed] .showcase-video__frame::before, [data-sp-embed] .showcase-video__frame::after{
  content: none;
}

[data-sp-embed] .showcase-video__player{
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  border-radius: var(--video-radius);
  clip-path: inset(
    var(--crop-top, 0) var(--crop-right, 0) var(--crop-bottom, 0) var(--crop-left, 0)
      round var(--video-radius)
  );
  background: transparent;
}

[data-sp-embed] .showcase-video__caption{
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 0.625rem;
  width: var(--video-width);
  max-width: 100%;
  margin: 0;
  padding: 0;
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.55;
  text-align: center;
}

[data-sp-embed] .showcase-video__caption > span{
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 241, 246, 0.92) 100%);
  border: 1px solid rgba(225, 29, 72, 0.14);
  box-shadow: 0 4px 14px rgba(225, 29, 72, 0.08);
  color: #64748b;
  font-weight: 600;
  letter-spacing: 0.02em;
}

[data-sp-embed] .showcase-video__sound{
  appearance: none;
  border: 1px solid rgba(225, 29, 72, 0.22);
  border-radius: 999px;
  background: linear-gradient(135deg, #fff 0%, #fff1f2 100%);
  color: #be123c;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.45rem 0.85rem;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(225, 29, 72, 0.1);
  transition:
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

[data-sp-embed] .showcase-video__sound:hover{
  background: #fff;
  border-color: rgba(225, 29, 72, 0.45);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(225, 29, 72, 0.14);
}

[data-sp-embed] .showcase-video__sound[aria-pressed="true"]{
  background: linear-gradient(135deg, #be123c 0%, #e11d48 100%);
  border-color: #be123c;
  color: #fff;
  box-shadow: 0 8px 20px rgba(225, 29, 72, 0.28);
}

/* ===== 動画デモ アニメーション ===== */
[data-sp-embed].js .showcase-media--video.reveal:not(.visible) .showcase-video__stage{
  opacity: 0;
  transform: translateY(28px) scale(0.92);
}

[data-sp-embed].js .showcase-media--video.reveal.visible .showcase-video__stage{
  animation: showcase-video-enter 0.85s cubic-bezier(0.16, 1, 0.3, 1) both;
}

[data-sp-embed].js .showcase-media--video.is-animating .showcase-video__stage{
  animation:
    showcase-video-enter 0.85s cubic-bezier(0.16, 1, 0.3, 1) both,
    showcase-video-float 5.8s ease-in-out 0.85s infinite;
}

@keyframes showcase-video-enter {
  0% {
    opacity: 0;
    transform: translateY(28px) scale(0.92);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes showcase-video-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Marketing — transparent cutout beside video + 3 cards below */
[data-sp-embed] .showcase--marketing{
  align-items: center;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(24px, 4vw, 48px);
}

[data-sp-embed] .showcase--marketing .showcase-copy{
  display: flex;
  flex-direction: column;
  max-width: none;
}

[data-sp-embed] .marketing-cutout{
  position: relative;
  isolation: isolate;
  width: 100%;
  margin: clamp(18px, 2.5vw, 28px) 0 0;
  padding: 0;
  border: none;
  background: transparent;
  overflow: visible;
}

[data-sp-embed] .marketing-cutout__glow{
  position: absolute;
  left: 52%;
  top: 48%;
  z-index: 0;
  width: min(88%, 520px);
  height: min(86%, 420px);
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle at center,
    rgba(251, 113, 133, 0.4) 0%,
    rgba(244, 114, 182, 0.2) 42%,
    rgba(255, 255, 255, 0) 72%
  );
  filter: blur(10px);
  pointer-events: none;
}

[data-sp-embed] .marketing-cutout__img{
  position: relative;
  z-index: 1;
  display: block;
  width: 88%;
  max-width: min(100%, 700px);
  height: auto;
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  object-fit: contain;
  filter: drop-shadow(0 24px 44px rgba(15, 23, 42, 0.16));
  animation: showcase-float 5.4s ease-in-out infinite;
}

[data-sp-embed].js .marketing-cutout.is-animating .marketing-cutout__img{
  animation: showcase-float 5.4s ease-in-out infinite;
}

[data-sp-embed] .marketing-flow{
  margin-top: clamp(36px, 5vw, 56px);
}

[data-sp-embed] .showcase-points--marketing{
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(12px, 1.8vw, 18px);
  margin-top: 0;
}

@media (min-width: 900px) {
  [data-sp-embed] .showcase-points--marketing{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(14px, 2vw, 20px);
  }
}

[data-sp-embed] .showcase-point--marketing{
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.6vw, 16px);
  min-height: 100%;
  padding: clamp(14px, 1.6vw, 18px);
  border-color: rgba(220, 38, 38, 0.14);
  background: linear-gradient(180deg, #ffffff 0%, #fff8f8 100%);
  box-shadow: 0 10px 28px rgba(220, 38, 38, 0.06);
  transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
  overflow: hidden;
}

[data-sp-embed] .showcase-point--marketing:hover{
  border-color: rgba(220, 38, 38, 0.28);
  box-shadow: 0 16px 36px rgba(220, 38, 38, 0.12);
  transform: translateY(-2px);
}

[data-sp-embed] .showcase-point--marketing .showcase-point__visual{
  margin: 0;
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  overflow: hidden;
  background:
    radial-gradient(circle at 30% 20%, rgba(254, 226, 226, 0.9), transparent 55%),
    linear-gradient(145deg, #fff7f7 0%, #fde8ea 100%);
}

[data-sp-embed] .showcase-point--marketing .showcase-point__visual img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 320ms ease;
}

[data-sp-embed] .showcase-point--marketing:hover .showcase-point__visual img{
  transform: scale(1.03);
}

[data-sp-embed] .showcase-point--marketing .showcase-point__body{
  flex: 1;
  min-width: 0;
  padding: 0 4px 2px;
}

[data-sp-embed] .showcase-point--marketing h3{
  margin: 0 0 8px;
  font-size: clamp(15px, 0.35vw + 0.8rem, 16px);
}

[data-sp-embed] .showcase-point--marketing h3 .text-accent-em{
  color: var(--accent-red);
  font-weight: 700;
  background: linear-gradient(
    105deg,
    rgba(254, 202, 202, 0.95),
    rgba(254, 215, 170, 0.85)
  );
  background-repeat: no-repeat;
  background-size: 100% 42%;
  background-position: 0 88%;
  padding: 0 0.06em;
}

[data-sp-embed] .showcase-point--marketing p{
  margin: 0;
  font-size: clamp(13px, 0.25vw + 0.72rem, 14px);
  line-height: 1.7;
}

/* Soft pon-pon-pon pop-in (marketing + industry cards) */
@keyframes card-soft-pop {
  0% {
    opacity: 0;
    transform: scale(0.88) translateY(18px);
  }
  58% {
    opacity: 1;
    transform: scale(1.035) translateY(-3px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

[data-sp-embed].js .showcase-point.showcase-point--marketing.reveal, [data-sp-embed].js .band-industries .industry-grid .feature-card.reveal{
  opacity: 0;
  transform: scale(0.88) translateY(18px);
  transition: none;
  pointer-events: none;
  will-change: opacity, transform;
}

[data-sp-embed].js .showcase-point.showcase-point--marketing.reveal.visible, [data-sp-embed].js .band-industries .industry-grid .feature-card.reveal.visible{
  opacity: 1;
  pointer-events: auto;
  animation: card-soft-pop 0.78s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--reveal-delay, 0ms);
}

/* Settled: clear animation so hover lift won't restart the pop */
[data-sp-embed].js .showcase-point.showcase-point--marketing.reveal.visible.is-settled, [data-sp-embed].js .band-industries .industry-grid .feature-card.reveal.visible.is-settled{
  animation: none;
  opacity: 1;
  transform: none;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

[data-sp-embed].js .showcase-point.showcase-point--marketing.reveal.visible.is-settled:hover, [data-sp-embed].js .band-industries .industry-grid .feature-card.reveal.visible.is-settled:hover{
  transform: translateY(-2px);
}

[data-sp-embed] .showcase-copy .showcase-subtitle{
  margin: 14px 0 0;
  color: var(--ink);
  font-size: clamp(18px, 2.2vw + 0.35rem, 26px);
  line-height: 1.45;
  font-weight: 600;
  letter-spacing: 0.06em;
}

[data-sp-embed] .showcase-copy .showcase-lead{
  margin: 10px 0 0;
  color: var(--muted);
  font-size: clamp(15px, 1.6vw + 0.3rem, 18px);
  line-height: 1.65;
  font-weight: 500;
  letter-spacing: 0.02em;
}

[data-sp-embed] .showcase-copy .showcase-subtitle + p{
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.75;
  font-weight: 500;
  letter-spacing: 0.03em;
}

[data-sp-embed] .showcase-point h3:last-child{
  margin-bottom: 0;
}

[data-sp-embed] #management > .showcase + .showcase--analysis-full{
  margin-top: clamp(36px, 5vw, 56px);
}

[data-sp-embed] .showcase-copy .showcase-subtitle + .showcase-lead{
  margin-top: 14px;
}

[data-sp-embed] .showcase-copy h2 + .showcase-lead{
  margin-top: 14px;
}

[data-sp-embed] .showcase-copy .showcase-lead + .showcase-subtitle{
  margin-top: clamp(24px, 3.5vw, 36px);
}

[data-sp-embed] .showcase-copy .showcase-lead--emphasis{
  color: var(--ink);
  font-size: clamp(17px, 1.9vw + 0.35rem, 22px);
  font-weight: 600;
  letter-spacing: 0.04em;
}

[data-sp-embed] .showcase-capabilities{
  margin-top: clamp(28px, 4vw, 40px);
  padding-top: clamp(20px, 3vw, 28px);
  border-top: 1px solid rgba(220, 38, 38, 0.12);
  --insight-band-pad-inline: clamp(20px, 5vw, 80px);
  overflow-x: clip;
}

[data-sp-embed] .showcase-capabilities-heading{
  margin: 0;
  color: var(--ink);
  font-size: clamp(17px, 1.9vw + 0.35rem, 22px);
  font-weight: 600;
  letter-spacing: 0.04em;
}

[data-sp-embed] .showcase-capabilities .showcase-points{
  margin-top: 20px;
}

[data-sp-embed] .ai-insights-bento--single{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  max-width: none;
  margin: 0;
  gap: 0;
}

[data-sp-embed] .ai-insights-bento--single .ai-insight-card{
  width: 100%;
}

[data-sp-embed] .ai-insights-bento--pair{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 3.2vw, 36px);
  width: 100%;
  max-width: none;
  margin: 0;
}

/* 管理・分析：タイトル上段全幅・画像左右交互。画像はやや大きめに表示 */
@media (min-width: 900px) {
  [data-sp-embed] .ai-insights-bento--pair.ai-insights-bento--trio{
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(40px, 5vw, 72px);
    align-items: stretch;
    max-width: none;
    margin-inline: 0;
  }

  [data-sp-embed] .ai-insights-bento--pair.ai-insights-bento--trio > .ai-insight-card{
    display: grid;
    grid-template-columns: minmax(0, 8.5fr) minmax(12rem, 2.5fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "label label"
      "preview body";
    align-items: stretch;
    min-width: 0;
    min-height: 0;
  }

  /* 偶数カード：画像を右へ */
  [data-sp-embed] .ai-insights-bento--pair.ai-insights-bento--trio > .ai-insight-card:nth-child(even){
    grid-template-columns: minmax(12rem, 2.5fr) minmax(0, 8.5fr);
    grid-template-areas:
      "label label"
      "body preview";
  }

  [data-sp-embed] .ai-insights-bento--pair.ai-insights-bento--trio .ai-insight-card__media-label{
    grid-area: label;
    align-self: stretch;
    padding: clamp(16px, 1.8vw, 22px) clamp(18px, 2vw, 28px);
    border-bottom: 1px solid rgba(220, 38, 38, 0.1);
    background: linear-gradient(180deg, #ffffff 0%, #fef2f2 100%);
  }

  [data-sp-embed] .ai-insights-bento--pair.ai-insights-bento--trio .ai-insight-card__preview{
    grid-area: preview;
    aspect-ratio: auto;
    overflow: hidden;
    align-self: stretch;
    border-bottom: none;
    border-right: 1px solid rgba(220, 38, 38, 0.08);
    border-left: none;
    padding: clamp(10px, 1.2vw, 16px);
    background:
      linear-gradient(165deg, #fff7f7 0%, #fef2f2 48%, #fffafa 100%);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 0;
  }

  [data-sp-embed] .ai-insights-bento--pair.ai-insights-bento--trio > .ai-insight-card:nth-child(even) .ai-insight-card__preview{
    border-right: none;
    border-left: 1px solid rgba(220, 38, 38, 0.08);
  }

  /* ブラウザ風の細いタイトルバー */
  [data-sp-embed] .ai-insights-bento--pair.ai-insights-bento--trio .ai-insight-card__preview::before{
    content: "";
    display: block;
    flex: 0 0 auto;
    height: 22px;
    border: 1px solid rgba(220, 38, 38, 0.14);
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    background:
      radial-gradient(circle at 14px 50%, #f87171 0 4px, transparent 5px),
      radial-gradient(circle at 30px 50%, #fbbf24 0 4px, transparent 5px),
      radial-gradient(circle at 46px 50%, #4ade80 0 4px, transparent 5px),
      linear-gradient(180deg, #fff 0%, #fff5f5 100%);
  }

  [data-sp-embed] .ai-insights-bento--pair.ai-insights-bento--trio .ai-insight-card__preview img{
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
    object-position: top center;
    border: 1px solid rgba(220, 38, 38, 0.14);
    border-radius: 0 0 10px 10px;
    box-shadow: 0 10px 28px rgba(185, 28, 28, 0.1);
    background: #fff;
  }

  /* 動画は左右クロップのみ（ウィンドウ枠レイアウトは使わない） */
  [data-sp-embed] .ai-insights-bento--pair.ai-insights-bento--trio .ai-insight-card__preview--side-crop{
    aspect-ratio: auto;
    min-height: 0;
    padding: 0;
    display: block;
    background: #0f172a;
  }

  [data-sp-embed] .ai-insights-bento--pair.ai-insights-bento--trio .ai-insight-card__preview--side-crop::before{
    display: none;
  }

  [data-sp-embed] .ai-insights-bento--pair.ai-insights-bento--trio .ai-insight-card__body{
    grid-area: body;
    flex: 1 1 auto;
    padding: clamp(18px, 2vw, 28px) clamp(20px, 2.2vw, 32px);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* フルブリードをやめて余白を確保 */
  [data-sp-embed] .showcase--analysis-full > .showcase-capabilities.analysis-capabilities:has(.ai-insights-bento--trio){
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
    box-sizing: border-box;
  }
}

@media (max-width: 899.98px) {
  [data-sp-embed] .ai-insights-bento--pair.ai-insights-bento--trio{
    grid-template-columns: minmax(0, 1fr);
  }
}

[data-sp-embed] .showcase--analysis-full > .showcase-capabilities{
  margin-top: clamp(32px, 4vw, 48px);
  padding-top: 0;
  border-top: none;
}

[data-sp-embed] .showcase--analysis-full > .showcase-capabilities.analysis-capabilities{
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

[data-sp-embed] .showcase--analysis-full > .showcase-copy{
  width: 100%;
  max-width: none;
  margin-inline: 0;
  text-align: left;
  justify-self: stretch;
}

/* AI顧客分析も管理・分析・マーケと同じフル幅 */
[data-sp-embed] .showcase--ai-full > .showcase-copy, [data-sp-embed] .showcase--ai-full > .showcase-capabilities.ai-analysis-capabilities, [data-sp-embed] .showcase--ai-full .ai-insights-bento{
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

[data-sp-embed] .showcase--ai-full > .showcase-capabilities{
  margin-top: clamp(32px, 4vw, 48px);
  padding-top: 0;
  border-top: none;
}

/* pair の img 向け指定を動画プレビューにも適用 */
[data-sp-embed] .ai-insights-bento--pair .ai-insight-card__preview--side-crop{
  background: #fff;
  border-bottom: none;
}

@media (min-width: 900px) {
  [data-sp-embed] .ai-insights-bento--pair{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(28px, 3.5vw, 40px);
  }

  /* pair の 2列指定より後でも trio は必ず 1列（上段タイトル＋左右交互） */
  [data-sp-embed] .ai-insights-bento--pair.ai-insights-bento--trio{
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(40px, 5vw, 72px);
    max-width: none;
    margin-inline: 0;
  }

  [data-sp-embed] .ai-insights-bento--pair .ai-insight-card{
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  /* trio はカード内グリッドを優先（上の flex を打ち消す） */
  [data-sp-embed] .ai-insights-bento--pair.ai-insights-bento--trio > .ai-insight-card{
    display: grid;
    grid-template-columns: minmax(0, 8.5fr) minmax(12rem, 2.5fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "label label"
      "preview body";
    align-items: stretch;
  }

  [data-sp-embed] .ai-insights-bento--pair.ai-insights-bento--trio > .ai-insight-card:nth-child(even){
    grid-template-columns: minmax(12rem, 2.5fr) minmax(0, 8.5fr);
    grid-template-areas:
      "label label"
      "body preview";
  }

  [data-sp-embed] .ai-insights-bento--pair.ai-insights-bento--trio .ai-insight-card__preview{
    border-bottom: none;
    border-right: 1px solid rgba(220, 38, 38, 0.08);
    border-left: none;
    padding: clamp(10px, 1.2vw, 16px);
    background: linear-gradient(165deg, #fff7f7 0%, #fef2f2 48%, #fffafa 100%);
  }

  [data-sp-embed] .ai-insights-bento--pair.ai-insights-bento--trio > .ai-insight-card:nth-child(even) .ai-insight-card__preview{
    border-right: none;
    border-left: 1px solid rgba(220, 38, 38, 0.08);
  }

  [data-sp-embed] .ai-insights-bento--pair.ai-insights-bento--trio .ai-insight-card__preview--side-crop{
    aspect-ratio: auto;
    min-height: 0;
    padding: 0;
    display: block;
    background: #0f172a;
  }

  [data-sp-embed] .ai-insights-bento--pair .ai-insight-card__preview{
    padding: 0;
    background: #fff;
    border-bottom: 1px solid rgba(220, 38, 38, 0.08);
    aspect-ratio: auto;
    overflow: hidden;
  }

  /* 動画は上下を切らず、高さは動画本来の比率。下線も消す */
  [data-sp-embed] .ai-insights-bento--pair .ai-insight-card__preview--side-crop{
    aspect-ratio: auto;
    border-bottom: none;
  }

  [data-sp-embed] .ai-insights-bento--pair .ai-insight-card__preview img{
    width: 100%;
    height: auto;
    border: none;
    border-radius: 0;
    object-fit: contain;
    object-position: top center;
    background: #fff;
  }

  [data-sp-embed] .ai-insights-bento--pair .ai-insight-card__body{
    flex: 1 1 auto;
    padding: clamp(18px, 2vw, 26px) clamp(18px, 2vw, 24px) clamp(20px, 2.2vw, 28px);
  }

  [data-sp-embed] .ai-insights-bento--pair .ai-insight-card__body:has(.ai-insight-tags--story){
    padding: clamp(20px, 2.2vw, 28px) clamp(20px, 2.2vw, 28px) clamp(22px, 2.4vw, 30px);
  }

  [data-sp-embed] .ai-insights-bento--pair .ai-insight-card__body p{
    font-size: clamp(13px, 0.3vw + 0.6rem, 14px);
    line-height: 1.75;
    margin-bottom: 12px;
  }

  [data-sp-embed] .ai-insights-bento--single .ai-insight-card, [data-sp-embed] .ai-insights-bento--single .ai-insight-card--featured{
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(16rem, 0.85fr);
    align-items: stretch;
    min-height: 0;
  }

  [data-sp-embed] .ai-insights-bento--single .ai-insight-card__preview{
    padding: 0;
    background: #fff;
    border-bottom: none;
    border-right: 1px solid rgba(220, 38, 38, 0.08);
  }

  [data-sp-embed] .ai-insights-bento--single .ai-insight-card__preview img{
    width: 100%;
    height: auto;
    border: none;
    border-radius: 0;
    object-fit: contain;
    object-position: top center;
    background: #fff;
  }

  [data-sp-embed] .ai-insights-bento--single .ai-insight-card__body{
    padding: clamp(20px, 2vw, 28px) clamp(22px, 2.2vw, 32px);
  }

  [data-sp-embed] .ai-insights-bento--single .ai-insight-tags{
    gap: 8px;
  }
}

@media (max-width: 899px) {
  [data-sp-embed] .ai-insights-bento--pair .ai-insight-card__preview{
    padding: 0;
    aspect-ratio: auto;
    overflow: hidden;
  }

  [data-sp-embed] .ai-insights-bento--pair .ai-insight-card__preview--side-crop{
    aspect-ratio: auto;
  }

  [data-sp-embed] .ai-insights-bento--single .ai-insight-card__preview img{
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: top center;
  }

  [data-sp-embed] .ai-insights-bento--pair .ai-insight-card__preview img{
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
    object-position: top center;
  }
}

/* ===== AI Customer Analysis — bento insights ===== */
[data-sp-embed] .showcase--ai-full{
  grid-template-columns: 1fr;
  align-items: start;
}

[data-sp-embed] .showcase--analysis-full{
  grid-template-columns: 1fr;
  align-items: start;
}

[data-sp-embed] .ai-analysis-capabilities, [data-sp-embed] .analysis-capabilities{
  margin-top: clamp(24px, 4vw, 36px);
}

[data-sp-embed] .ai-insights-bento{
  display: grid;
  gap: 14px;
  margin-top: 20px;
}

/* ===== Insight card marquee (SAKINA CLAW 部署カードと同系) ===== */
[data-sp-embed] .ai-insight-marquee{
  overflow: hidden;
  width: calc(100% + (2 * var(--insight-band-pad-inline)));
  max-width: none;
  margin-inline: calc(-1 * var(--insight-band-pad-inline));
  padding-block: clamp(1.25rem, 2.5vw, 2.25rem);
  container-type: inline-size;
  container-name: insight-marquee;
  box-sizing: border-box;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  --insight-edge-fade: clamp(0.35rem, 1.4vw, 0.85rem);
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--insight-edge-fade),
    #000 calc(100% - var(--insight-edge-fade)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--insight-edge-fade),
    #000 calc(100% - var(--insight-edge-fade)),
    transparent 100%
  );
}

[data-sp-embed] .ai-insight-marquee .ai-insight-card{
  cursor: pointer;
  -webkit-user-drag: none;
}

[data-sp-embed] .ai-insights-bento.ai-insights-bento--marquee .ai-insight-card + .ai-insight-card{
  margin-left: 0;
}

[data-sp-embed] .ai-insight-marquee .ai-insight-card img{
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}

[data-sp-embed] .ai-insight-marquee.is-dragging{
  cursor: grabbing;
}

[data-sp-embed] .ai-insight-marquee.is-dragging .ai-insight-card{
  pointer-events: none;
  cursor: grabbing;
}

[data-sp-embed] .ai-insights-bento.ai-insights-bento--marquee{
  --insight-marquee-gap: 1rem;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: var(--insight-marquee-gap);
  width: max-content;
  margin-top: 0;
  will-change: transform;
}

[data-sp-embed] .ai-insights-bento.ai-insights-bento--marquee-driven{
  animation: none !important;
}

/* Management × CLAW部署カード型: 縮小タブ/iPad/モバイルは横流し（広めPCのみcoverflow） */
@media (max-width: 1279px) {
  [data-sp-embed] #management .showcase-capabilities.analysis-capabilities{
    --insight-band-pad-inline: var(--showcase-pad-inline, clamp(14px, 3.5vw, 22px));
    overflow: visible !important;
    overflow-x: visible !important;
  }

  [data-sp-embed] #management .ai-insight-marquee{
    width: calc(100% + (2 * var(--insight-band-pad-inline)));
    max-width: none;
    margin-inline: calc(-1 * var(--insight-band-pad-inline));
    padding-block: clamp(1.1rem, 3vw, 2rem);
    overflow: hidden;
    touch-action: pan-y;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.ai-insights-bento--marquee, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.is-mgmt-marquee.ai-insights-bento--marquee{
    position: relative !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: var(--insight-marquee-gap, 0.75rem) !important;
    width: max-content !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    perspective: none !important;
    overflow: visible !important;
    cursor: inherit;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.ai-insights-bento--marquee > .ai-insight-card, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.ai-insights-bento--marquee > .ai-insight-card[data-mgmt-pos]{
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
    z-index: auto !important;
    pointer-events: auto !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 min(82cqi, 28rem) !important;
    width: min(82cqi, 28rem) !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    grid-template-columns: none !important;
    grid-template-areas: none !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.ai-insights-bento--marquee > .ai-insight-card::after{
    display: none !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.ai-insights-bento--marquee .ai-insight-card__media-label, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.ai-insights-bento--marquee .hero-split-title{
    order: 1;
    padding: 0.7rem 0.85rem 0.55rem !important;
    justify-content: center;
    text-align: center;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.ai-insights-bento--marquee .ai-insight-card__media-label h3{
    font-size: clamp(1.05rem, 0.95rem + 0.32vw, 1.22rem) !important;
    line-height: 1.25 !important;
  }

  /* Stacked: title → tags → media */
  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.ai-insights-bento--marquee .ai-insight-card__body, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.ai-insights-bento--marquee .hero-split-copy{
    order: 2;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    padding: 0.55rem 0.75rem 0.35rem !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.ai-insights-bento--marquee .ai-insight-card__body > p{
    display: none !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.ai-insights-bento--marquee .ai-insight-tags--story{
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.32rem !important;
    margin: 0 !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.ai-insights-bento--marquee .ai-insight-tag{
    font-size: 0.72rem !important;
    padding: 0.24rem 0.5rem !important;
    line-height: 1.25 !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.ai-insights-bento--marquee .ai-insight-card__preview, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.ai-insights-bento--marquee .hero-split-media{
    order: 3;
    width: 100% !important;
    border-right: none !important;
    border-left: none !important;
    border-bottom: none !important;
    padding: 8px 8px 10px !important;
    height: auto !important;
    min-height: 0 !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.ai-insights-bento--marquee .ai-insight-card__preview img{
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    object-fit: contain !important;
  }
}

@media (max-width: 760px) {
  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.ai-insights-bento--marquee > .ai-insight-card{
    flex: 0 0 min(86vw, 24rem) !important;
    width: min(86vw, 24rem) !important;
  }
}

@media (min-width: 761px) and (max-width: 1279px) {
  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.ai-insights-bento--marquee > .ai-insight-card{
    flex: 0 0 min(62cqi, 32rem) !important;
    width: min(62cqi, 32rem) !important;
  }
}


@media (min-width: 761px) {
  [data-sp-embed] .ai-insights-bento.ai-insights-bento--marquee .ai-insight-card{
    flex: 0 0 max(36rem, min(44rem, calc(100cqi * 0.86)));
    flex-shrink: 0;
    width: max(36rem, min(44rem, calc(100cqi * 0.86)));
    min-width: 36rem;
    align-self: stretch;
  }
}

@media (min-width: 900px) {
  [data-sp-embed] .ai-insights-bento.ai-insights-bento--marquee .ai-insight-card{
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
    align-items: stretch;
    min-height: clamp(280px, 32vw, 380px);
  }

  [data-sp-embed] .ai-insights-bento.ai-insights-bento--marquee .ai-insight-card__preview{
    display: flex;
    align-items: stretch;
    height: 100%;
    min-height: 100%;
    padding: clamp(12px, 1.5vw, 18px);
    border-bottom: none;
    border-right: 1px solid rgba(220, 38, 38, 0.08);
  }

  [data-sp-embed] .ai-insights-bento.ai-insights-bento--marquee .ai-insight-card__preview img{
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-height: clamp(240px, 28vw, 340px);
    max-height: none;
    aspect-ratio: auto;
    border-radius: 12px;
    object-fit: cover;
    object-position: top center;
  }

  [data-sp-embed] .ai-insights-bento.ai-insights-bento--marquee .ai-insight-card__body{
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(18px, 2vw, 24px) clamp(20px, 2.2vw, 28px);
  }

  [data-sp-embed] .ai-insights-bento.ai-insights-bento--marquee .ai-insight-card__body p{
    font-size: clamp(13px, 0.35vw + 0.62rem, 15px);
    line-height: 1.8;
  }
}

@media (max-width: 760px) {
  [data-sp-embed] .ai-insight-marquee{
    width: calc(100% + (2 * var(--insight-band-pad-inline)));
    padding-block: 1rem;
  }

  [data-sp-embed] .ai-insights-bento.ai-insights-bento--marquee{
    --insight-marquee-gap: 0.75rem;
  }

  [data-sp-embed] .ai-insights-bento.ai-insights-bento--marquee .ai-insight-card{
    flex: 0 0 min(92vw, 26rem);
    width: min(92vw, 26rem);
    min-width: 0;
  }
}

[data-sp-embed] .ai-insight-card{
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 16px;
  background: linear-gradient(165deg, #fff 0%, #fff8f9 100%);
  overflow: hidden;
  box-shadow: 0 10px 32px rgba(220, 38, 38, 0.06);
  transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

[data-sp-embed] .ai-insight-card:hover{
  border-color: rgba(0, 0, 0, 0.22);
  box-shadow: 0 16px 40px rgba(220, 38, 38, 0.1);
  transform: translateY(-2px);
}

[data-sp-embed] .ai-insight-card--link{
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

[data-sp-embed] .ai-insight-card--link:focus-visible{
  outline: 2px solid rgba(220, 38, 38, 0.55);
  outline-offset: 3px;
}

[data-sp-embed] .ai-insight-card--link:active{
  transform: translateY(0) scale(0.985);
  box-shadow: 0 8px 24px rgba(220, 38, 38, 0.12);
}

[data-sp-embed] .ai-insight-card--link:hover .ai-insight-card__cta{
  background: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%);
  box-shadow: 0 12px 28px rgba(220, 38, 38, 0.34);
  transform: translateY(-1px);
}

[data-sp-embed] .ai-insight-card--link:active .ai-insight-card__cta{
  transform: translateY(0);
  box-shadow: 0 6px 16px rgba(220, 38, 38, 0.24);
}

[data-sp-embed] .ai-insight-card__preview{
  margin: 0;
  padding: clamp(10px, 1.4vw, 14px);
  background: linear-gradient(180deg, #fce9ee 0%, #fff5f7 100%);
  border-bottom: 1px solid rgba(220, 38, 38, 0.08);
  line-height: 0;
}

[data-sp-embed] .ai-insight-card__preview img, [data-sp-embed] .ai-insight-card__preview .ai-insight-card__media{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  object-fit: contain;
  object-position: top center;
  background: #fff;
}

[data-sp-embed] .ai-insight-card__media-label{
  display: flex;
  align-items: center;
  gap: 0.55em;
  margin: 0;
  padding: clamp(14px, 1.6vw, 18px) clamp(16px, 1.8vw, 22px);
  border-bottom: 1px solid rgba(220, 38, 38, 0.08);
  background: linear-gradient(180deg, #ffffff 0%, #fff8fb 100%);
}

[data-sp-embed] .ai-insight-card__media-label:has(.ai-insight-card__media-label-sub){
  align-items: flex-start;
}

[data-sp-embed] .ai-insight-card__media-label-text{
  display: flex;
  flex-direction: column;
  gap: 0.28em;
  min-width: 0;
}

[data-sp-embed] .ai-insight-card__media-label h3{
  margin: 0;
  color: #0f172a;
  font-size: clamp(15px, 0.4vw + 0.8rem, 17px);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.3;
}

[data-sp-embed] .ai-insight-card__media-label-sub{
  margin: 0;
  color: var(--muted);
  font-size: clamp(12px, 0.22vw + 0.68rem, 13px);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.02em;
}

[data-sp-embed] .ai-insight-card__media-label-sub .text-accent-em{
  color: var(--accent-red);
  font-weight: 600;
  background: linear-gradient(
    105deg,
    rgba(254, 202, 202, 0.95),
    rgba(254, 215, 170, 0.85)
  );
  background-repeat: no-repeat;
  background-size: 100% 0.4em;
  background-position: 0 88%;
  padding: 0 0.06em;
}

[data-sp-embed] .ai-insight-card__media-label-dot{
  flex: 0 0 auto;
  position: relative;
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: linear-gradient(135deg, #fb7185 0%, #e11d48 100%);
  box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.12);
}

[data-sp-embed] .ai-insight-card__media-label-dot::after{
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: transparent;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 180ms ease;
}

[data-sp-embed] .ai-insight-card__media-label:has(.ai-insight-card__media-label-sub) .ai-insight-card__media-label-dot{
  margin-top: 0.42em;
}

/* セクション色のステータス丸 → 機能カードは共通でアクセント赤 */
[data-sp-embed] .band-management .ai-insight-card__media-label-dot, [data-sp-embed] .band-analysis .ai-insight-card__media-label-dot, [data-sp-embed] .band-ai .ai-insight-card__media-label-dot{
  background: linear-gradient(135deg, var(--card-live-hi) 0%, var(--card-live-lo) 100%);
  box-shadow: 0 0 0 3px var(--card-live-soft);
}

/* 光が欠けないよう、セクション内カードは overflow を緩める */
[data-sp-embed] .band-management .ai-insight-card, [data-sp-embed] .band-analysis .ai-insight-card, [data-sp-embed] .band-marketing .ai-insight-card, [data-sp-embed] .band-ai .ai-insight-card{
  overflow: visible;
}

[data-sp-embed] .band-management .ai-insight-card__media-label, [data-sp-embed] .band-analysis .ai-insight-card__media-label, [data-sp-embed] .band-ai .ai-insight-card__media-label{
  border-radius: 16px 16px 0 0;
  overflow: visible;
  background: linear-gradient(180deg, #ffffff 0%, var(--card-live-wash) 100%);
  border-bottom-color: rgba(15, 23, 42, 0.06);
}

[data-sp-embed] .band-management .ai-insight-card__preview, [data-sp-embed] .band-analysis .ai-insight-card__preview, [data-sp-embed] .band-ai .ai-insight-card__preview{
  overflow: hidden;
}

/* 機能カードの画像：淡い赤の余白＋ウィンドウ枠（比率は維持） */
@media (min-width: 900px) {
  [data-sp-embed] .band-management .ai-insight-card__preview, [data-sp-embed] .band-analysis .ai-insight-card__preview, [data-sp-embed] .band-ai .ai-insight-card__preview{
    padding: clamp(10px, 1.2vw, 16px);
    background: linear-gradient(165deg, #fff7f7 0%, #fef2f2 48%, #fffafa 100%);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 0;
  }

  [data-sp-embed] .band-management .ai-insight-card__preview::before, [data-sp-embed] .band-analysis .ai-insight-card__preview::before, [data-sp-embed] .band-ai .ai-insight-card__preview::before{
    content: "";
    display: block;
    flex: 0 0 auto;
    height: 22px;
    border: 1px solid rgba(220, 38, 38, 0.14);
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    background:
      radial-gradient(circle at 14px 50%, #f87171 0 4px, transparent 5px),
      radial-gradient(circle at 30px 50%, #fbbf24 0 4px, transparent 5px),
      radial-gradient(circle at 46px 50%, #4ade80 0 4px, transparent 5px),
      linear-gradient(180deg, #fff 0%, #fff5f5 100%);
  }

  [data-sp-embed] .band-management .ai-insight-card__preview img, [data-sp-embed] .band-analysis .ai-insight-card__preview img, [data-sp-embed] .band-ai .ai-insight-card__preview img{
    border: 1px solid rgba(220, 38, 38, 0.14);
    border-radius: 0 0 10px 10px;
    box-shadow: 0 10px 28px rgba(185, 28, 28, 0.1);
    background: #fff;
  }

  /* 動画は左右クロップのみ。縦は動画本来の比率 */
  [data-sp-embed] .band-management .ai-insight-card__preview--side-crop, [data-sp-embed] .band-analysis .ai-insight-card__preview--side-crop, [data-sp-embed] .band-ai .ai-insight-card__preview--side-crop{
    aspect-ratio: auto;
    padding: 0;
    display: block;
    background: #fff;
    border-bottom: none;
  }

  [data-sp-embed] .band-management .ai-insight-card__preview--side-crop::before, [data-sp-embed] .band-analysis .ai-insight-card__preview--side-crop::before, [data-sp-embed] .band-ai .ai-insight-card__preview--side-crop::before{
    display: none;
  }
}

[data-sp-embed] .band-management .ai-insight-card__body, [data-sp-embed] .band-analysis .ai-insight-card__body, [data-sp-embed] .band-ai .ai-insight-card__body{
  border-radius: 0 0 16px 16px;
  overflow: hidden;
}

/*
  PCのみ: 画面に入った瞬間に「オンライン」点灯 → ふわっとパルス継続
  ホバーでカード／丸の色味を強める
*/
@media (hover: hover) and (pointer: fine) {
  [data-sp-embed].js .band-management .reveal:not(.visible) .ai-insight-card, [data-sp-embed].js .band-analysis .reveal:not(.visible) .ai-insight-card, [data-sp-embed].js .band-ai .reveal:not(.visible) .ai-insight-card{
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
  }

  [data-sp-embed].js .band-management .reveal:not(.visible) .ai-insight-card__media-label-dot, [data-sp-embed].js .band-analysis .reveal:not(.visible) .ai-insight-card__media-label-dot, [data-sp-embed].js .band-ai .reveal:not(.visible) .ai-insight-card__media-label-dot{
    background: #cbd5e1;
    box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.18);
    transform: scale(0.92);
  }

  [data-sp-embed].js .band-management .reveal.visible .ai-insight-card, [data-sp-embed].js .band-analysis .reveal.visible .ai-insight-card, [data-sp-embed].js .band-ai .reveal.visible .ai-insight-card{
    border-color: rgba(0, 0, 0, 0.14);
    box-shadow:
      0 14px 36px var(--card-live-soft),
      0 0 0 1px rgba(0, 0, 0, 0.02);
    transition:
      border-color 520ms ease,
      box-shadow 640ms ease,
      transform 220ms ease,
      background-color 520ms ease;
  }

  [data-sp-embed].js .band-management .reveal.visible .ai-insight-card__media-label, [data-sp-embed].js .band-analysis .reveal.visible .ai-insight-card__media-label, [data-sp-embed].js .band-ai .reveal.visible .ai-insight-card__media-label{
    background: linear-gradient(180deg, #ffffff 0%, var(--card-live-wash) 100%);
    border-bottom-color: var(--card-live-soft);
    transition: background 640ms ease, border-color 520ms ease;
  }

  [data-sp-embed].js .band-management .reveal.visible .ai-insight-card__preview, [data-sp-embed].js .band-analysis .reveal.visible .ai-insight-card__preview, [data-sp-embed].js .band-ai .reveal.visible .ai-insight-card__preview{
    border-bottom-color: var(--card-live-soft);
    transition: border-color 520ms ease;
  }

  [data-sp-embed].js .band-management .reveal.visible .ai-insight-card__media-label-dot, [data-sp-embed].js .band-analysis .reveal.visible .ai-insight-card__media-label-dot, [data-sp-embed].js .band-ai .reveal.visible .ai-insight-card__media-label-dot{
    background: linear-gradient(135deg, var(--card-live-hi) 0%, var(--card-live-lo) 100%);
    transform: scale(1);
    animation:
      card-dot-online 0.9s cubic-bezier(0.22, 1, 0.36, 1) both,
      card-dot-pulse 2.4s ease-in-out 0.85s infinite;
  }

  [data-sp-embed].js .band-management .reveal.visible .ai-insight-card:nth-child(1) .ai-insight-card__media-label-dot, [data-sp-embed].js .band-analysis .reveal.visible .ai-insight-card:nth-child(1) .ai-insight-card__media-label-dot, [data-sp-embed].js .band-ai .reveal.visible .ai-insight-card:nth-child(1) .ai-insight-card__media-label-dot{
    animation-delay: 0ms, 850ms;
  }

  [data-sp-embed].js .band-management .reveal.visible .ai-insight-card:nth-child(2) .ai-insight-card__media-label-dot, [data-sp-embed].js .band-analysis .reveal.visible .ai-insight-card:nth-child(2) .ai-insight-card__media-label-dot, [data-sp-embed].js .band-ai .reveal.visible .ai-insight-card:nth-child(2) .ai-insight-card__media-label-dot{
    animation-delay: 140ms, 990ms;
  }

  [data-sp-embed].js .band-management .reveal.visible .ai-insight-card:nth-child(3) .ai-insight-card__media-label-dot, [data-sp-embed].js .band-analysis .reveal.visible .ai-insight-card:nth-child(3) .ai-insight-card__media-label-dot, [data-sp-embed].js .band-ai .reveal.visible .ai-insight-card:nth-child(3) .ai-insight-card__media-label-dot{
    animation-delay: 260ms, 1110ms;
  }

  [data-sp-embed].js .band-management .reveal.visible .ai-insight-card:nth-child(1), [data-sp-embed].js .band-analysis .reveal.visible .ai-insight-card:nth-child(1), [data-sp-embed].js .band-ai .reveal.visible .ai-insight-card:nth-child(1){
    transition-delay: 0ms;
  }

  [data-sp-embed].js .band-management .reveal.visible .ai-insight-card:nth-child(2), [data-sp-embed].js .band-analysis .reveal.visible .ai-insight-card:nth-child(2), [data-sp-embed].js .band-ai .reveal.visible .ai-insight-card:nth-child(2){
    transition-delay: 80ms;
  }

  [data-sp-embed].js .band-management .reveal.visible .ai-insight-card:nth-child(3), [data-sp-embed].js .band-analysis .reveal.visible .ai-insight-card:nth-child(3), [data-sp-embed].js .band-ai .reveal.visible .ai-insight-card:nth-child(3){
    transition-delay: 160ms;
  }

  [data-sp-embed] .band-management .ai-insight-card:hover, [data-sp-embed] .band-analysis .ai-insight-card:hover, [data-sp-embed] .band-ai .ai-insight-card:hover{
    border-color: rgba(0, 0, 0, 0.24);
    box-shadow:
      0 18px 44px var(--card-live-glow),
      0 0 0 1px rgba(0, 0, 0, 0.04);
    transform: translateY(-3px);
  }

  [data-sp-embed] .band-management .ai-insight-card:hover .ai-insight-card__media-label, [data-sp-embed] .band-analysis .ai-insight-card:hover .ai-insight-card__media-label, [data-sp-embed] .band-ai .ai-insight-card:hover .ai-insight-card__media-label{
    background: linear-gradient(180deg, #ffffff 0%, var(--card-live-wash) 100%);
    border-bottom-color: var(--card-live-border);
  }

  /* .reveal.visible より強い詳細度で赤ホバーを確実に適用 */
  [data-sp-embed].js .band-management .reveal.visible .ai-insight-card:hover .ai-insight-card__media-label-dot, [data-sp-embed].js .band-analysis .reveal.visible .ai-insight-card:hover .ai-insight-card__media-label-dot, [data-sp-embed].js .band-ai .reveal.visible .ai-insight-card:hover .ai-insight-card__media-label-dot, [data-sp-embed].js .band-management .reveal.visible .ai-insight-card:nth-child(1):hover .ai-insight-card__media-label-dot, [data-sp-embed].js .band-analysis .reveal.visible .ai-insight-card:nth-child(1):hover .ai-insight-card__media-label-dot, [data-sp-embed].js .band-ai .reveal.visible .ai-insight-card:nth-child(1):hover .ai-insight-card__media-label-dot, [data-sp-embed].js .band-management .reveal.visible .ai-insight-card:nth-child(2):hover .ai-insight-card__media-label-dot, [data-sp-embed].js .band-analysis .reveal.visible .ai-insight-card:nth-child(2):hover .ai-insight-card__media-label-dot, [data-sp-embed].js .band-ai .reveal.visible .ai-insight-card:nth-child(2):hover .ai-insight-card__media-label-dot, [data-sp-embed].js .band-management .reveal.visible .ai-insight-card:nth-child(3):hover .ai-insight-card__media-label-dot, [data-sp-embed].js .band-analysis .reveal.visible .ai-insight-card:nth-child(3):hover .ai-insight-card__media-label-dot, [data-sp-embed].js .band-ai .reveal.visible .ai-insight-card:nth-child(3):hover .ai-insight-card__media-label-dot, [data-sp-embed] .band-management .ai-insight-card:hover .ai-insight-card__media-label-dot, [data-sp-embed] .band-analysis .ai-insight-card:hover .ai-insight-card__media-label-dot, [data-sp-embed] .band-ai .ai-insight-card:hover .ai-insight-card__media-label-dot{
    background: linear-gradient(135deg, #fb7185 0%, #e11d48 100%);
    transform: scale(1.22);
    filter: drop-shadow(0 0 6px rgba(225, 29, 72, 0.65));
    box-shadow:
      0 0 0 4px rgba(225, 29, 72, 0.22),
      0 0 18px rgba(225, 29, 72, 0.55);
    animation: card-dot-pulse-red 1.1s ease-in-out infinite;
    animation-delay: 0ms;
  }

  [data-sp-embed].js .band-management .reveal.visible .ai-insight-card:hover .ai-insight-card__media-label-dot::after, [data-sp-embed].js .band-analysis .reveal.visible .ai-insight-card:hover .ai-insight-card__media-label-dot::after, [data-sp-embed].js .band-ai .reveal.visible .ai-insight-card:hover .ai-insight-card__media-label-dot::after, [data-sp-embed] .band-management .ai-insight-card:hover .ai-insight-card__media-label-dot::after, [data-sp-embed] .band-analysis .ai-insight-card:hover .ai-insight-card__media-label-dot::after, [data-sp-embed] .band-ai .ai-insight-card:hover .ai-insight-card__media-label-dot::after{
    background: radial-gradient(circle, rgba(248, 113, 113, 0.55) 0%, rgba(225, 29, 72, 0.18) 45%, transparent 70%);
    opacity: 1;
    animation: card-dot-halo-red 1.1s ease-in-out infinite;
  }

  [data-sp-embed] .band-management .ai-insight-card--link:focus-visible, [data-sp-embed] .band-analysis .ai-insight-card--link:focus-visible, [data-sp-embed] .band-ai .ai-insight-card--link:focus-visible{
    outline-color: color-mix(in srgb, var(--card-live) 55%, transparent);
  }

  [data-sp-embed] .band-management .ai-insight-card--link:active, [data-sp-embed] .band-analysis .ai-insight-card--link:active, [data-sp-embed] .band-ai .ai-insight-card--link:active{
    box-shadow: 0 8px 24px var(--card-live-soft);
  }
}

@keyframes card-dot-online {
  0% {
    transform: scale(0.7);
    box-shadow: 0 0 0 0 transparent;
    filter: saturate(0.4) brightness(1.1);
  }
  45% {
    transform: scale(1.28);
    box-shadow:
      0 0 0 6px var(--card-live-soft),
      0 0 18px var(--card-live-glow);
    filter: saturate(1.15) brightness(1.08);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 3px var(--card-live-soft);
    filter: none;
  }
}

@keyframes card-dot-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 3px var(--card-live-soft);
  }
  50% {
    box-shadow:
      0 0 0 6px var(--card-live-soft),
      0 0 12px var(--card-live-glow);
  }
}

@keyframes card-dot-pulse-red {
  0%,
  100% {
    transform: scale(1.12);
    box-shadow:
      0 0 0 3px rgba(225, 29, 72, 0.2),
      0 0 10px rgba(225, 29, 72, 0.35);
    filter: drop-shadow(0 0 4px rgba(225, 29, 72, 0.45));
  }
  50% {
    transform: scale(1.28);
    box-shadow:
      0 0 0 7px rgba(225, 29, 72, 0.28),
      0 0 22px rgba(225, 29, 72, 0.65);
    filter: drop-shadow(0 0 10px rgba(225, 29, 72, 0.75));
  }
}

@keyframes card-dot-halo-red {
  0%,
  100% {
    transform: scale(1.4);
    opacity: 0.55;
  }
  50% {
    transform: scale(2.6);
    opacity: 0.95;
  }
}

/*
  左右だけクロップ。高さは動画本来の比率のまま（上下は切らない）
  --side-crop: 左右それぞれ削る割合（0〜0.4）
  --media-zoom: 追加ズーム（1 = なし。例: 1.12）
*/
[data-sp-embed] .ai-insight-card__preview--side-crop{
  position: relative;
  overflow: hidden;
  aspect-ratio: auto;
  padding: 0;
  border-bottom: none;
  --side-crop: 0.04; /* 左右同じ割合でクロップ。0〜0.4 */
  --media-zoom: 1.02; /* 左右共通ズーム */
}

/* 左右を強めに削る（セマンティック：余白・端UIを隠し） */
[data-sp-embed] .ai-insight-card__preview--side-crop-deep{
  --side-crop: 0.2;
  --media-zoom: 1.04;
}

/* customer-management 動画のみ：左右クロップを少しだけ */
[data-sp-embed] .ai-insight-card__preview--side-crop-soft{
  --side-crop: 0.05;
  --media-zoom: 1;
}

[data-sp-embed] .ai-insight-card__preview--side-crop .ai-insight-card__media{
  position: relative;
  display: block;
  top: auto;
  left: 50%;
  width: calc(100% / (1 - (2 * var(--side-crop))) * var(--media-zoom));
  max-width: none;
  height: auto;
  border: none;
  border-radius: 0;
  object-fit: contain;
  object-position: center center;
  transform: translateX(-50%);
}

/* trio でも動画は左右クロップ＋本来の縦比率を維持 */
@media (min-width: 900px) {
  [data-sp-embed] .ai-insights-bento--pair.ai-insights-bento--trio .ai-insight-card__preview--side-crop{
    aspect-ratio: auto;
    min-height: 0;
    align-self: stretch;
    padding: 0;
    display: block;
    background: #0f172a;
  }

  [data-sp-embed] .ai-insights-bento--pair.ai-insights-bento--trio .ai-insight-card__preview--side-crop::before{
    display: none;
  }
}

[data-sp-embed] .ai-insights-bento:not(.ai-insights-bento--single):not(.ai-insights-bento--marquee):not(.ai-insights-bento--pair) .ai-insight-card--featured .ai-insight-card__preview img{
  height: auto;
}

[data-sp-embed] .ai-insights-bento:not(.ai-insights-bento--single):not(.ai-insights-bento--marquee):not(.ai-insights-bento--pair) .ai-insight-card__preview--side-crop .ai-insight-card__media{
  height: auto;
}

@media (min-width: 900px) {
  [data-sp-embed] .ai-insights-bento--single .ai-insight-card__preview{
    display: block;
    align-self: stretch;
    min-height: 0;
    height: auto;
  }

  [data-sp-embed] .ai-insights-bento--single .ai-insight-card__preview img{
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    aspect-ratio: auto;
    object-fit: contain;
    object-position: top center;
  }

  [data-sp-embed] .ai-insights-bento--single .ai-insight-card__body{
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  [data-sp-embed] .ai-insights-bento--single .ai-insight-card__body p{
    font-size: clamp(14px, 0.35vw + 0.62rem, 15px);
    line-height: 1.85;
  }
}

[data-sp-embed] .ai-insight-card__body{
  padding: 18px 20px 20px;
}

[data-sp-embed] .ai-insight-card__body h3{
  margin: 0 0 8px;
  font-size: clamp(16px, 1.4vw + 0.35rem, 18px);
  font-weight: 700;
  letter-spacing: 0.02em;
}

[data-sp-embed] .ai-insight-card__body p{
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.75;
  font-weight: 500;
}

[data-sp-embed] .ai-insight-card__body p .text-accent-em{
  color: var(--muted);
  font-weight: 600;
  background: none;
  padding: 0;
}

[data-sp-embed] .ai-insight-phases{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

[data-sp-embed] .ai-insight-phases span{
  padding: 4px 10px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #6b7280;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

[data-sp-embed] .ai-insight-phases span.is-active{
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
  color: #fff;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25);
}

[data-sp-embed] .ai-insight-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-sp-embed] .ai-insight-tags li{
  padding: 5px 11px;
  border-radius: 8px;
  border: 1px solid rgba(220, 38, 38, 0.14);
  background: rgba(255, 255, 255, 0.9);
  color: var(--accent-red);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
}

/* Story tags: title-only cards, color-coded chips */
[data-sp-embed] .ai-insight-card__body:not(:has(> p)) h3{
  margin-bottom: 14px;
}

[data-sp-embed] .ai-insight-tags--story{
  gap: 10px 12px;
}

[data-sp-embed] .ai-insight-tags--story .ai-insight-tag, [data-sp-embed] .ai-insight-tags--story li.ai-insight-tag{
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.4;
  transform-origin: center;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

[data-sp-embed] .ai-insight-tag__icon{
  font-size: 1.05em;
  line-height: 1;
  opacity: 0.82;
}

[data-sp-embed] .ai-insight-card--link:hover .ai-insight-tags--story .ai-insight-tag:not(.ai-insight-tag--cms){
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.06);
}

[data-sp-embed] .ai-insight-tags--story .ai-insight-tag--system{
  color: #4b5563;
  background: #f5f6f7;
  border-color: rgba(75, 85, 99, 0.12);
}

[data-sp-embed] .ai-insight-tags--story .ai-insight-tag--channel{
  color: #9f1239;
  background: rgba(225, 29, 72, 0.04);
  border-color: rgba(225, 29, 72, 0.12);
}

[data-sp-embed] .ai-insight-tags--story .ai-insight-tag--ai{
  color: #6d28d9;
  background: rgba(124, 58, 237, 0.05);
  border-color: rgba(124, 58, 237, 0.14);
}

[data-sp-embed] .ai-insight-tags--story .ai-insight-tag--salesforce{
  color: #0284c7;
  background: rgba(14, 165, 233, 0.07);
  border-color: rgba(14, 165, 233, 0.18);
}

[data-sp-embed] .ai-insight-tags--story .ai-insight-tag--content{
  color: #57534e;
  background: rgba(120, 113, 108, 0.05);
  border-color: rgba(120, 113, 108, 0.12);
}

[data-sp-embed] .ai-insight-tags--story .ai-insight-tag--inquiry{
  color: #1e3a5f;
  background: rgba(59, 130, 246, 0.04);
  border-color: rgba(59, 130, 246, 0.12);
}

[data-sp-embed] .ai-insight-tags--story .ai-insight-tag--log{
  color: #134e4a;
  background: rgba(20, 184, 166, 0.04);
  border-color: rgba(20, 184, 166, 0.12);
}

[data-sp-embed] .ai-insight-tags--story .ai-insight-tag--cms{
  --tag-glow: transparent;
  flex-basis: 100%;
  width: max-content;
  max-width: 100%;
  margin-top: 6px;
  padding: 0;
  gap: 0.45em;
  color: var(--muted);
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.03em;
}

[data-sp-embed] .ai-insight-card--link:hover .ai-insight-tags--story .ai-insight-tag--cms{
  transform: none;
  box-shadow: none;
}

[data-sp-embed] .ai-insight-tag__cms-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0.16em 0.72em;
  border-radius: 999px;
  background: transparent;
  border: 1px solid rgba(194, 65, 12, 0.45);
  color: #c2410c;
  font-size: 0.84em;
  font-weight: 700;
  letter-spacing: 0.1em;
  box-shadow: none;
}

[data-sp-embed] .ai-insight-tag__arrow{
  opacity: 0.55;
  color: var(--muted);
}

@keyframes tag-fuwa-in {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.96);
    filter: blur(4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

[data-sp-embed].js .reveal:not(.visible) .ai-insight-tags--story .ai-insight-tag{
  opacity: 0;
  transform: translateY(14px) scale(0.96);
  filter: blur(4px);
}

[data-sp-embed].js .reveal.visible .ai-insight-tags--story .ai-insight-tag{
  animation: tag-fuwa-in 0.72s cubic-bezier(0.22, 1, 0.36, 1) both;
}

[data-sp-embed].js .reveal.visible .ai-insight-tags--story .ai-insight-tag:nth-child(1){
  animation-delay: 0.12s;
}
[data-sp-embed].js .reveal.visible .ai-insight-tags--story .ai-insight-tag:nth-child(2){
  animation-delay: 0.24s;
}
[data-sp-embed].js .reveal.visible .ai-insight-tags--story .ai-insight-tag:nth-child(3){
  animation-delay: 0.36s;
}
[data-sp-embed].js .reveal.visible .ai-insight-tags--story .ai-insight-tag:nth-child(4){
  animation-delay: 0.48s;
}
[data-sp-embed].js .reveal.visible .ai-insight-tags--story .ai-insight-tag:nth-child(5){
  animation-delay: 0.6s;
}
[data-sp-embed].js .reveal.visible .ai-insight-tags--story .ai-insight-tag:nth-child(6){
  animation-delay: 0.72s;
}
[data-sp-embed].js .reveal.visible .ai-insight-tags--story .ai-insight-tag:nth-child(7){
  animation-delay: 0.84s;
}

[data-sp-embed].js .reveal.visible .ai-insight-tags--story .ai-insight-tag--cms{
  box-shadow: none;
}

[data-sp-embed] .ai-insight-card__cta{
  display: inline-flex;
  width: 100%;
  min-height: 52px;
  margin-top: 16px;
  padding: 0 24px;
  font-size: 15px;
  letter-spacing: 0.05em;
  border-radius: 12px;
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
  box-shadow: 0 8px 24px rgba(220, 38, 38, 0.28);
  color: #fff;
  transition: background 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

[data-sp-embed] .ai-insight-card__cta:hover{
  background: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%);
  box-shadow: 0 12px 28px rgba(220, 38, 38, 0.34);
  transform: translateY(-2px);
}

[data-sp-embed] .ai-insight-card__cta span::after{
  content: " →";
  font-weight: 700;
}

[data-sp-embed] .ai-insight-card--wide{
  background: linear-gradient(135deg, #fff 0%, #fff5f6 55%, #fce9ee 100%);
}

[data-sp-embed] .ai-insight-card--compact{
  background: linear-gradient(135deg, #fff 0%, #fafafa 100%);
  border-style: dashed;
  border-color: rgba(220, 38, 38, 0.18);
}

[data-sp-embed] .ai-insight-card--wide .ai-insight-card__preview--inline{
  padding: clamp(10px, 1.4vw, 14px);
  border-bottom: none;
}

[data-sp-embed] .ai-insight-card--wide .ai-insight-card__preview--inline img{
  border-radius: 10px;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: top center;
}

@media (min-width: 900px) {
  [data-sp-embed] .analysis-insights-bento .ai-insight-card--wide:not(.ai-insight-card--compact):not(.ai-insight-card--wide-stack):not(.ai-insight-card--hero-split){
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: stretch;
  }

  [data-sp-embed] .analysis-insights-bento .ai-insight-card--wide:not(.ai-insight-card--compact):not(.ai-insight-card--wide-stack) .ai-insight-card__preview--inline{
    padding: clamp(10px, 1.4vw, 14px);
    border-bottom: none;
    border-right: 1px solid rgba(220, 38, 38, 0.08);
    display: block;
  }

  [data-sp-embed] .analysis-insights-bento .ai-insight-card--wide:not(.ai-insight-card--compact):not(.ai-insight-card--wide-stack) .ai-insight-card__preview--inline img{
    border-radius: 10px;
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: top center;
  }

  [data-sp-embed] .analysis-insights-bento .ai-insight-card--wide:not(.ai-insight-card--compact):not(.ai-insight-card--wide-stack) .ai-insight-card__body--split{
    padding: 18px 20px;
  }
}

/* フル幅・縦積み：画像を潰さず自然な比率で表示（予測分析など横長ダッシュボード向け） */
[data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--wide-stack{
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
}

[data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--wide-stack .ai-insight-card__preview, [data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--wide-stack .ai-insight-card__preview--inline{
  padding: clamp(12px, 1.6vw, 18px);
  aspect-ratio: auto;
  border-bottom: 1px solid rgba(220, 38, 38, 0.08);
  background: #f8fafc;
  overflow: visible;
}

[data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--wide-stack .ai-insight-card__preview--inline img, [data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--wide-stack .ai-insight-card__preview img{
  display: block;
  width: 100%;
  height: auto;
  max-height: min(52vh, 420px);
  aspect-ratio: auto;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  object-fit: contain;
  object-position: top center;
  background: #fff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

[data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--wide-stack .ai-insight-card__body{
  padding: clamp(18px, 2vw, 26px) clamp(18px, 2vw, 28px) clamp(20px, 2.2vw, 28px);
}

/* 管理・分析・AI：縦積みヒーロー（左右交互） */
[data-sp-embed] .ai-insights-bento--pair.ai-insights-bento--hero{
  --hero-block-gap: clamp(44px, 6.5vw, 88px);
  gap: var(--hero-block-gap);
}

/* セクション内：機能ブロックごとの区切り線 */
[data-sp-embed] .ai-insights-bento--pair.ai-insights-bento--hero > .ai-insight-card + .ai-insight-card{
  position: relative;
}

[data-sp-embed] .ai-insights-bento--pair.ai-insights-bento--hero > .ai-insight-card + .ai-insight-card::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--hero-block-gap) / -2);
  height: 1px;
  background: rgba(15, 23, 42, 0.12);
  pointer-events: none;
}

/* 見出し〜機能のあいだにセクション線 */
[data-sp-embed] .band-management .showcase--analysis-full > .showcase-capabilities.analysis-capabilities, [data-sp-embed] .band-analysis .showcase--analysis-full > .showcase-capabilities.analysis-capabilities, [data-sp-embed] .band-marketing .showcase--analysis-full > .showcase-capabilities.analysis-capabilities, [data-sp-embed] .band-ai .showcase--ai-full > .showcase-capabilities.ai-analysis-capabilities{
  margin-top: clamp(28px, 3.5vw, 44px);
  padding-top: clamp(32px, 4vw, 52px);
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  overflow-x: visible;
}

/* ヒーロー分割：一セクション感のある画像＋テキスト（左右交互） */
[data-sp-embed] .ai-insights-bento.ai-insights-bento--pair > .ai-insight-card.ai-insight-card--hero-split{
  grid-column: 1 / -1;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  /* Stacked: title → copy/tags → media */
  grid-template-areas:
    "title"
    "body"
    "media";
  gap: clamp(0.55rem, 1.8vw, 0.85rem);
  align-items: stretch;
  border: none;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  padding-block: clamp(16px, 2.5vw, 36px);
  flex-direction: unset;
}

[data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--hero-split > .hero-split-title{
  grid-area: title;
  justify-content: center;
  width: 100%;
}

[data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--hero-split > .hero-split-media{
  grid-area: media;
}

[data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--hero-split > .hero-split-copy{
  grid-area: body;
  position: relative;
  z-index: 2;
}

/* Stacked column: keep title / lead / tags on center axis */
@media (max-width: 899.98px) {
  [data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--hero-split > .hero-split-title, [data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--hero-split .ai-insight-card__media-label{
    justify-content: center;
    text-align: center;
  }

  [data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--hero-split .ai-insight-card__body{
    align-items: center;
    text-align: center;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding-inline: 0.35rem;
    box-sizing: border-box;
  }

  [data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--hero-split .ai-insight-card__body > p, [data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--hero-split .hero-split-copy > p, [data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--hero-split .hero-split-copy > .ai-insight-tags{
    margin-left: 0;
    margin-inline: auto;
    width: 100%;
    max-width: min(34em, 100%);
    text-align: center;
    justify-content: center;
    box-sizing: border-box;
  }

  [data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--hero-split .ai-insight-tags, [data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--hero-split .ai-insight-tags--story{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 0.35rem 0.4rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding-inline: 0.15rem;
    box-sizing: border-box;
  }

  /* Tags smaller than title/subtitle; wrap so EN/TH never clip */
  [data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--hero-split .ai-insight-tag, [data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--hero-split .ai-insight-tags--story .ai-insight-tag{
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    font-size: clamp(0.68rem, 0.2vw + 0.64rem, 0.8rem);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.01em;
    padding: 0.32em 0.7em;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    text-align: left;
  }

  [data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--hero-split .ai-insight-tag__icon{
    flex-shrink: 0;
    font-size: 0.95em;
  }
}

[data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--hero-split:hover, [data-sp-embed].js #showcases .reveal.visible .ai-insights-bento:not(.ai-insights-bento--mgmt-carousel) .ai-insight-card--hero-split, [data-sp-embed].js #showcases .reveal.visible .ai-insights-bento:not(.ai-insights-bento--mgmt-carousel) .ai-insight-card--hero-split:hover{
  transform: none;
  border-color: transparent;
  box-shadow: none;
}

/* ブラウザ風ウィンドウ枠（信号機バー） */
[data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--hero-split .ai-insight-card__preview::before{
  content: "";
  display: block !important;
  flex: 0 0 auto;
  height: 30px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-bottom: none;
  border-radius: 14px 14px 0 0;
  background:
    radial-gradient(circle at 15px 50%, #f87171 0 4.5px, transparent 5.5px),
    radial-gradient(circle at 32px 50%, #fbbf24 0 4.5px, transparent 5.5px),
    radial-gradient(circle at 49px 50%, #4ade80 0 4.5px, transparent 5.5px),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

[data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--hero-split .ai-insight-card__preview{
  margin: 0;
  padding: 0 !important;
  aspect-ratio: auto;
  background: transparent !important;
  border: none;
  border-radius: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  transition: transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

[data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--hero-split .ai-insight-card__preview img, [data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--hero-split .ai-insight-card__preview > video{
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  aspect-ratio: auto;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-top: none !important;
  border-radius: 0 0 14px 14px;
  object-fit: contain;
  object-position: top left;
  background: #fff;
  box-shadow:
    0 28px 64px rgba(15, 23, 42, 0.12),
    0 2px 0 rgba(255, 255, 255, 0.65) inset;
  transition: transform 620ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 620ms ease;
}

/* 動画：左右クロップを維持しつつ、ウィンドウ枠で包む */
[data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--hero-split .ai-insight-card__preview--side-crop{
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #fff !important;
  box-shadow:
    0 28px 64px rgba(15, 23, 42, 0.12),
    0 2px 0 rgba(255, 255, 255, 0.65) inset;
}

[data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--hero-split .ai-insight-card__preview--side-crop::before{
  border: none;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 0;
}

[data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--hero-split .ai-insight-card__preview--side-crop .ai-insight-card__media{
  position: relative;
  display: block;
  left: 50%;
  width: calc(100% / (1 - (2 * var(--side-crop))) * var(--media-zoom));
  max-width: none;
  height: auto;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  object-fit: contain;
  object-position: center center;
  /* 横中央寄せ。ホバーで transform を上書きしないこと */
  transform: translateX(-50%) !important;
  transition: none;
}

/* 画像のみ浮かせる。side-crop 動画は親 figure 側で動かす（translateX を壊さない） */
[data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--hero-split:hover .ai-insight-card__preview:not(.ai-insight-card__preview--side-crop) img{
  transform: translateY(-4px);
  box-shadow:
    0 34px 72px rgba(15, 23, 42, 0.14),
    0 2px 0 rgba(255, 255, 255, 0.65) inset;
}

[data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--hero-split:hover .ai-insight-card__preview--side-crop{
  transform: translateY(-4px);
  box-shadow:
    0 34px 72px rgba(15, 23, 42, 0.14),
    0 2px 0 rgba(255, 255, 255, 0.65) inset;
}

[data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--hero-split:hover .ai-insight-card__preview--side-crop .ai-insight-card__media{
  transform: translateX(-50%) !important;
}

[data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--hero-split .ai-insight-card__body{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(12px, 1.6vw, 18px);
  margin: 0;
  padding: 0;
  border: none;
  background: transparent !important;
  overflow: visible;
  min-width: 0;
}

[data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--hero-split .ai-insight-card__media-label{
  margin: 0;
  padding: 0;
  border: none;
  background: transparent !important;
  overflow: visible;
  gap: 0.55em;
}

[data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--hero-split .ai-insight-card__media-label h3{
  font-size: clamp(1.6rem, 1.5vw + 1.12rem, 2.2rem);
  line-height: 1.45;
  letter-spacing: -0.01em;
  font-weight: 700;
}

[data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--hero-split .ai-insight-card__media-label-sub{
  margin: 0.35em 0 0;
  font-size: clamp(0.9rem, 0.3vw + 0.82rem, 1rem);
  line-height: 1.55;
  font-weight: 500;
  color: #64748b;
}

[data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--hero-split .ai-insight-card__media-label-dot{
  width: 0.68em;
  height: 0.68em;
  flex: 0 0 auto;
  box-shadow: 0 0 0 5px rgba(225, 29, 72, 0.12);
}

[data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--hero-split .ai-insight-card__body > p{
  margin: 0;
  max-width: 34em;
  padding: 0;
  text-indent: 0;
  font-size: clamp(1.12rem, 0.5vw + 0.98rem, 1.28rem);
  line-height: 2;
  color: #3c3c43;
}

/* Desktop only: align subtitle/tags with title text (after the red dot) */
@media (min-width: 900px) {
  [data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--hero-split .hero-split-copy > p, [data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--hero-split .hero-split-copy > .ai-insight-tags{
    margin-left: calc(0.68em + 0.55em);
    width: calc(100% - (0.68em + 0.55em));
    max-width: 34em;
    box-sizing: border-box;
  }
}

[data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--hero-split .ai-insight-tags{
  gap: 0.45rem;
  max-width: 100%;
  margin-top: 0;
}

[data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--hero-split .ai-insight-tag{
  font-size: 0.875rem;
  padding: 0.48em 0.85em;
}

/* Stacked (resized PC / tablet / phone): force true center axis */
@media (max-width: 899.98px) {
  [data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--hero-split > .hero-split-title, [data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--hero-split .ai-insight-card__media-label{
    justify-content: center !important;
    align-items: center;
    width: 100%;
    margin-inline: auto;
    text-align: center;
  }

  [data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--hero-split .ai-insight-card__body, [data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--hero-split > .hero-split-copy{
    align-items: center !important;
    justify-content: center;
    text-align: center;
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    padding-inline: 0.5rem;
    box-sizing: border-box;
  }

  [data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--hero-split .ai-insight-card__body > p, [data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--hero-split .hero-split-copy > p, [data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--hero-split .hero-split-copy > .ai-insight-tags{
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-inline: auto !important;
    width: 100% !important;
    max-width: min(36rem, 100%) !important;
    text-align: center !important;
    justify-content: center !important;
  }

  [data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--hero-split .ai-insight-tags, [data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--hero-split .ai-insight-tags--story{
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center;
  }
}

/* 入場アニメーション（メディア / コピー） */
[data-sp-embed].js #showcases .reveal:not(.visible) .ai-insight-card--hero-split .hero-split-media{
  opacity: 0;
  transform: translate3d(-28px, 12px, 0) scale(0.985);
}

[data-sp-embed].js #showcases .reveal:not(.visible) .ai-insight-card--hero-split-reverse .hero-split-media{
  transform: translate3d(28px, 12px, 0) scale(0.985);
}

/* Title + body: same slide as the media, entering from the text side */
[data-sp-embed].js #showcases .reveal:not(.visible) .ai-insight-card--hero-split > .hero-split-title, [data-sp-embed].js #showcases .reveal:not(.visible) .ai-insight-card--hero-split .hero-split-copy > .ai-insight-card__media-label, [data-sp-embed].js #showcases .reveal:not(.visible) .ai-insight-card--hero-split .hero-split-copy > p{
  opacity: 0;
  transform: translate3d(28px, 12px, 0) scale(0.985);
  filter: none;
}

[data-sp-embed].js #showcases .reveal:not(.visible) .ai-insight-card--hero-split-reverse > .hero-split-title, [data-sp-embed].js #showcases .reveal:not(.visible) .ai-insight-card--hero-split-reverse .hero-split-copy > .ai-insight-card__media-label, [data-sp-embed].js #showcases .reveal:not(.visible) .ai-insight-card--hero-split-reverse .hero-split-copy > p{
  transform: translate3d(-28px, 12px, 0) scale(0.985);
}

[data-sp-embed].js #showcases .reveal:not(.visible) .ai-insight-card--hero-split .hero-split-copy > .ai-insight-tags{
  opacity: 1;
  transform: none;
  filter: none;
}

[data-sp-embed].js #showcases .reveal:not(.visible) .ai-insight-card--hero-split .hero-split-copy .ai-insight-tag{
  opacity: 0;
  transform: scale(0.52) translateY(12px);
  filter: none !important;
  box-shadow: 0 0 0 0 transparent;
}

[data-sp-embed].js #showcases .reveal.visible .ai-insight-card--hero-split .hero-split-media{
  opacity: 1;
  transform: none;
  transition:
    opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 80ms;
}

[data-sp-embed].js #showcases .reveal.visible .ai-insight-card--hero-split > .hero-split-title, [data-sp-embed].js #showcases .reveal.visible .ai-insight-card--hero-split .hero-split-copy > .ai-insight-card__media-label, [data-sp-embed].js #showcases .reveal.visible .ai-insight-card--hero-split .hero-split-copy > p{
  opacity: 1;
  transform: none;
  filter: none;
  transition:
    opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 80ms;
}

/* Tag pills: soft pop, then katakata label */
[data-sp-embed].js #showcases .reveal:not(.visible) .ai-insight-tag [data-tag-subtitle] .hero-subtitle-char, [data-sp-embed].js .reveal:not(.visible) .ai-insight-tags--story .ai-insight-tag [data-tag-subtitle] .hero-subtitle-char{
  opacity: 0;
}

[data-sp-embed].js #showcases .reveal.visible .ai-insight-card--hero-split .hero-split-copy .ai-insight-tag [data-tag-subtitle] .hero-subtitle-char, [data-sp-embed].js .reveal.visible .ai-insight-tags--story .ai-insight-tag [data-tag-subtitle] .hero-subtitle-char{
  animation: hero-subtitle-char-pop 0.3s cubic-bezier(0.34, 1.45, 0.64, 1) both;
  animation-delay: calc(
    var(--tag-type-base, 0.55s) + var(--i, 0) * 34ms
  );
}

[data-sp-embed].js #showcases .reveal.visible .ai-insight-card--hero-split .hero-split-copy .ai-insight-tag:nth-child(1), [data-sp-embed].js .reveal.visible .ai-insight-tags--story .ai-insight-tag:nth-child(1){
  --tag-type-base: 0.42s;
}
[data-sp-embed].js #showcases .reveal.visible .ai-insight-card--hero-split .hero-split-copy .ai-insight-tag:nth-child(2), [data-sp-embed].js .reveal.visible .ai-insight-tags--story .ai-insight-tag:nth-child(2){
  --tag-type-base: 0.58s;
}
[data-sp-embed].js #showcases .reveal.visible .ai-insight-card--hero-split .hero-split-copy .ai-insight-tag:nth-child(3), [data-sp-embed].js .reveal.visible .ai-insight-tags--story .ai-insight-tag:nth-child(3){
  --tag-type-base: 0.74s;
}
[data-sp-embed].js #showcases .reveal.visible .ai-insight-card--hero-split .hero-split-copy .ai-insight-tag:nth-child(4), [data-sp-embed].js .reveal.visible .ai-insight-tags--story .ai-insight-tag:nth-child(4){
  --tag-type-base: 0.9s;
}
[data-sp-embed].js #showcases .reveal.visible .ai-insight-card--hero-split .hero-split-copy .ai-insight-tag:nth-child(5), [data-sp-embed].js .reveal.visible .ai-insight-tags--story .ai-insight-tag:nth-child(5){
  --tag-type-base: 1.06s;
}
[data-sp-embed].js #showcases .reveal.visible .ai-insight-card--hero-split .hero-split-copy .ai-insight-tag:nth-child(6), [data-sp-embed].js .reveal.visible .ai-insight-tags--story .ai-insight-tag:nth-child(6){
  --tag-type-base: 1.22s;
}
[data-sp-embed].js #showcases .reveal.visible .ai-insight-card--hero-split .hero-split-copy .ai-insight-tag:nth-child(7), [data-sp-embed].js .reveal.visible .ai-insight-tags--story .ai-insight-tag:nth-child(7){
  --tag-type-base: 1.38s;
}

[data-sp-embed] .ai-insight-tag [data-tag-subtitle]{
  display: inline;
}

[data-sp-embed] .ai-insight-tag [data-tag-subtitle] .hero-subtitle-char{
  display: inline-block;
}

[data-sp-embed].js #showcases .reveal.visible .ai-insight-card--hero-split .hero-split-copy .ai-insight-tag, [data-sp-embed].js #showcases .growth-fade:not(.visible) .ai-insight-card--hero-split .hero-split-copy .ai-insight-tag{
  filter: none !important;
}

[data-sp-embed].js #showcases .reveal.visible .ai-insight-card--hero-split .hero-split-copy .ai-insight-tag{
  animation: hero-split-tag-pop 0.68s cubic-bezier(0.34, 1.45, 0.64, 1) both;
}

[data-sp-embed].js #showcases .reveal.visible .ai-insight-card--hero-split .hero-split-copy .ai-insight-tag--cms{
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none !important;
  animation: hero-split-cms-fade 0.55s ease both;
}

[data-sp-embed].js #showcases .reveal.visible .ai-insight-card--hero-split .hero-split-copy .ai-insight-tag:nth-child(1){
  animation-delay: 420ms;
}

[data-sp-embed].js #showcases .reveal.visible .ai-insight-card--hero-split .hero-split-copy .ai-insight-tag:nth-child(2){
  animation-delay: 500ms;
}

[data-sp-embed].js #showcases .reveal.visible .ai-insight-card--hero-split .hero-split-copy .ai-insight-tag:nth-child(3){
  animation-delay: 580ms;
}

[data-sp-embed].js #showcases .reveal.visible .ai-insight-card--hero-split .hero-split-copy .ai-insight-tag:nth-child(4){
  animation-delay: 660ms;
}

[data-sp-embed].js #showcases .reveal.visible .ai-insight-card--hero-split .hero-split-copy .ai-insight-tag:nth-child(5){
  animation-delay: 740ms;
}

[data-sp-embed].js #showcases .reveal.visible .ai-insight-card--hero-split .hero-split-copy .ai-insight-tag:nth-child(6){
  animation-delay: 820ms;
}

[data-sp-embed].js #showcases .reveal.visible .ai-insight-card--hero-split .hero-split-copy .ai-insight-tag:nth-child(7){
  animation-delay: 900ms;
}

[data-sp-embed].js #showcases .reveal.visible .ai-insight-card--hero-split .hero-split-copy .ai-insight-tag:nth-child(8){
  animation-delay: 980ms;
}

[data-sp-embed].js #showcases .reveal.visible .ai-insight-card--hero-split .ai-insight-card__media-label-dot{
  animation: hero-split-dot-pulse 2.4s ease-in-out 700ms infinite;
}

[data-sp-embed].js #showcases .ai-insight-card--hero-split .hero-split-copy .ai-insight-tag, [data-sp-embed].js #showcases .reveal:not(.visible) .ai-insight-card--hero-split .hero-split-copy .ai-insight-tag, [data-sp-embed].js #showcases .reveal.visible .ai-insight-card--hero-split .hero-split-copy .ai-insight-tag, [data-sp-embed].js #showcases .growth-fade:not(.visible) .ai-insight-card--hero-split .hero-split-copy .ai-insight-tag{
  opacity: 1;
  transform: none;
  filter: none;
  animation: none;
  transition: none;
}

@keyframes hero-split-tag-pop {
  0% {
    opacity: 0;
    transform: scale(0.52) translateY(12px);
    filter: none;
    box-shadow:
      0 0 0 0 rgba(225, 29, 72, 0),
      0 0 0 transparent;
  }

  55% {
    opacity: 1;
    transform: scale(1.1) translateY(-3px);
    filter: none;
    box-shadow:
      0 0 0 5px rgba(225, 29, 72, 0.1),
      0 10px 22px rgba(225, 29, 72, 0.16);
  }

  78% {
    transform: scale(0.97) translateY(0);
    filter: none;
    box-shadow:
      0 0 0 2px rgba(225, 29, 72, 0.05),
      0 4px 12px rgba(15, 23, 42, 0.06);
  }

  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  }
}

@keyframes hero-split-cms-fade {
  0% {
    opacity: 0;
    transform: translateY(8px);
    filter: none;
    box-shadow: none;
  }

  100% {
    opacity: 1;
    transform: none;
    filter: none;
    box-shadow: none;
  }
}

@keyframes hero-split-dot-pulse {
  0%, 100% {
    box-shadow: 0 0 0 5px rgba(225, 29, 72, 0.12);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(225, 29, 72, 0.08);
    transform: scale(1.08);
  }
}

@media (min-width: 900px) {
  [data-sp-embed] .ai-insights-bento.ai-insights-bento--pair > .ai-insight-card.ai-insight-card--hero-split{
    display: grid !important;
    grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr);
    /* 上余白 < 下余白で、中央よりわずかに上寄り */
    grid-template-rows: 0.55fr auto auto 1fr;
    grid-template-areas:
      "media ."
      "media title"
      "media body"
      "media .";
    gap: clamp(28px, 3.6vw, 52px);
    column-gap: clamp(28px, 3.6vw, 52px);
    row-gap: 0.75rem;
    align-items: stretch;
    min-height: 0;
    flex-direction: unset;
  }

  /* 左右反転：テキスト左・メディア右 */
  [data-sp-embed] .ai-insights-bento.ai-insights-bento--pair > .ai-insight-card.ai-insight-card--hero-split-reverse{
    grid-template-columns: minmax(0, 1fr) minmax(0, 2.3fr);
    grid-template-areas:
      ". media"
      "title media"
      "body media"
      ". media";
  }

  [data-sp-embed] .ai-insights-bento.ai-insights-bento--pair > .ai-insight-card.ai-insight-card--hero-split-text{
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    grid-template-areas:
      "title"
      "body";
  }

  [data-sp-embed] .ai-insights-bento.ai-insights-bento--pair > .ai-insight-card.ai-insight-card--hero-split-reverse .hero-split-media, [data-sp-embed] .ai-insights-bento.ai-insights-bento--pair > .ai-insight-card.ai-insight-card--hero-split-reverse .hero-split-copy, [data-sp-embed] .ai-insights-bento.ai-insights-bento--pair > .ai-insight-card.ai-insight-card--hero-split-reverse .hero-split-title{
    order: unset;
  }

  [data-sp-embed] .ai-insights-bento.ai-insights-bento--pair > .ai-insight-card.ai-insight-card--hero-split .ai-insight-card__body{
    padding-top: 0;
    padding-inline: 0;
    align-self: stretch;
  }

  [data-sp-embed] .ai-insights-bento.ai-insights-bento--pair > .ai-insight-card.ai-insight-card--hero-split-reverse .ai-insight-card__body{
    padding-inline: 0 8px;
  }

  [data-sp-embed] .ai-insights-bento.ai-insights-bento--pair > .ai-insight-card.ai-insight-card--hero-split > .hero-split-title{
    align-self: stretch;
    padding-top: 0;
  }

  /* AIセマンティックのみ：比率は維持したまま動画を小さく、文字側の余白を詰める */
  [data-sp-embed] .ai-insights-bento.ai-insights-bento--pair > .ai-insight-card.ai-insight-card--hero-split-reverse.ai-insight-card--compact-media{
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.65fr);
    column-gap: clamp(10px, 1.4vw, 18px);
    row-gap: 0.15rem;
  }

  [data-sp-embed] .ai-insights-bento.ai-insights-bento--pair > .ai-insight-card.ai-insight-card--compact-media .ai-insight-card__body{
    gap: clamp(6px, 0.9vw, 9px);
  }

  [data-sp-embed] .ai-insights-bento.ai-insights-bento--pair > .ai-insight-card.ai-insight-card--compact-media .ai-insight-tags{
    gap: 0.35rem;
  }

  [data-sp-embed] .ai-insights-bento.ai-insights-bento--pair > .ai-insight-card.ai-insight-card--compact-media > .hero-split-title{
    padding-top: 0.15rem;
  }

  [data-sp-embed] .ai-insights-bento.ai-insights-bento--pair > .ai-insight-card.ai-insight-card--compact-media > .hero-split-media{
    width: 100%;
  }
}

/* モバイル：セマンティック動画だけ幅を抑える（アスペクトはそのまま） */
[data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--hero-split.ai-insight-card--compact-media{
  gap: clamp(0.35rem, 1.2vw, 0.55rem);
}

[data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--hero-split.ai-insight-card--compact-media > .hero-split-media{
  width: min(100%, 34rem);
  max-width: 100%;
  justify-self: start;
}

[data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--hero-split.ai-insight-card--compact-media .ai-insight-card__body{
  gap: clamp(6px, 1vw, 9px);
}

[data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--hero-split.ai-insight-card--compact-media .ai-insight-card__body > p{
  line-height: 1.7;
}

[data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--hero-split.ai-insight-card--compact-media .ai-insight-tags{
  gap: 0.35rem;
  margin-top: 0;
}

[data-sp-embed] .ai-insight-card__body--split{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

[data-sp-embed] .ai-insight-tags--stack{
  align-self: flex-start;
}

@media (min-width: 900px) {
  [data-sp-embed] .ai-insights-bento{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }

  [data-sp-embed] .ai-insights-bento > .ai-insight-card{
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  [data-sp-embed] .ai-insights-bento > .ai-insight-card .ai-insight-card__body{
    flex: 1 1 auto;
  }

  [data-sp-embed] .ai-insight-card--wide{
    grid-column: 1 / -1;
  }

  [data-sp-embed] .ai-insight-card__body--split{
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: clamp(20px, 4vw, 48px);
  }

  [data-sp-embed] .ai-insight-card__copy{
    flex: 1;
    min-width: 0;
  }

  [data-sp-embed] .ai-insight-card__body--split p{
    margin-bottom: 0;
  }

  [data-sp-embed] .ai-insight-tags--stack{
    flex: 0 0 auto;
    max-width: 280px;
  }
}

[data-sp-embed] .showcase-media--float{
  position: relative;
  isolation: isolate;
  border: 1px solid rgba(220, 38, 38, 0.1);
  border-radius: 20px;
  background: linear-gradient(160deg, #fff8f9 0%, #fce9ee 45%, #fff4f6 100%);
  padding: clamp(14px, 2.4vw, 26px);
  overflow: hidden;
  box-shadow:
    0 24px 56px rgba(220, 38, 38, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

[data-sp-embed] .showcase-media--float::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 54%;
  z-index: 0;
  width: min(78%, 460px);
  height: 62%;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    ellipse at center,
    rgba(220, 38, 38, 0.28) 0%,
    rgba(251, 113, 133, 0.16) 36%,
    rgba(255, 255, 255, 0) 72%
  );
  filter: blur(26px);
  pointer-events: none;
}

[data-sp-embed] .showcase-media--float::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(
    circle at 50% 42%,
    rgba(255, 255, 255, 0.72) 0%,
    rgba(255, 255, 255, 0) 58%
  );
  pointer-events: none;
}

[data-sp-embed] .showcase-media__stage{
  position: relative;
  z-index: 1;
}

[data-sp-embed] .showcase-media--float img{
  border: none;
  border-radius: 14px;
  object-fit: contain;
  max-height: min(520px, 62vw);
  width: 100%;
}

[data-sp-embed].js .showcase-media--float.is-animating .showcase-media__stage{
  animation:
    media-settle 1.1s cubic-bezier(0.22, 1, 0.36, 1) both,
    showcase-float 5s ease-in-out 1.1s infinite;
}

[data-sp-embed] .showcase-media--float.visible:hover img{
  transform: none;
}

@keyframes showcase-float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-14px);
  }
}

/* ===== Outcomes ===== */
[data-sp-embed] .outcome-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  max-width: 980px;
  margin: 0 auto;
}

[data-sp-embed] .outcome-card{
  display: flex;
  gap: 14px;
  align-items: flex-start;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  padding: 20px 18px;
  box-shadow: none;
}

[data-sp-embed] .outcome-card i{
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-weight: 700;
  font-size: 13px;
}

[data-sp-embed] .outcome-card p{
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Visual outcome cards — icon-led layout */
[data-sp-embed] .outcome-grid--visual{
  gap: 16px;
}

[data-sp-embed] .outcome-card--visual{
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 22px 20px;
  transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

[data-sp-embed] .outcome-card__icon{
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(145deg, #fff5f5 0%, #fce8ea 100%);
  border: 1px solid rgba(220, 38, 38, 0.12);
  color: var(--accent-red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

[data-sp-embed] .outcome-card__icon svg{
  width: 24px;
  height: 24px;
}

[data-sp-embed] .outcome-card--visual:hover{
  border-color: rgba(220, 38, 38, 0.22);
  box-shadow: 0 8px 24px rgba(220, 38, 38, 0.08);
  transform: translateY(-2px);
}

/* Last outcome spans full width on desktop when odd count */
@media (min-width: 900px) {
  [data-sp-embed] .outcome-grid--visual .outcome-card--visual:last-child:nth-child(odd){
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    gap: 18px;
  }
}

/* ===== Contact ===== */
[data-sp-embed] .contact{
  background: linear-gradient(
    180deg,
    #f8f9fa 0%,
    #fff8f9 55%,
    #fff5f7 100%
  );
  text-align: center;
  overflow: visible;
}

[data-sp-embed] .contact-inner{
  max-width: 960px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  padding-inline: 0.25rem;
  padding-block-end: 1.75rem;
}

[data-sp-embed] .contact .section-label{
  margin: 0 0 1.35rem;
}

[data-sp-embed] .contact h2{
  margin: 0;
  font-size: clamp(1.55rem, 3.5vw + 0.55rem, 3.1rem);
  line-height: 1.2;
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
  color: var(--ink);
  word-break: normal;
  overflow-wrap: normal;
  line-break: auto;
}

[data-sp-embed] .contact-title-line{
  display: block;
  white-space: nowrap;
  line-height: 1.25;
}

[data-sp-embed] .contact p:not(.section-label){
  max-width: 640px;
  margin: 0.9rem auto 2.25rem;
  color: var(--muted);
  font-size: clamp(1.05rem, 0.55vw + 0.92rem, 1.3rem);
  line-height: 1.65;
  font-weight: 400;
  letter-spacing: 0.02em;
}

[data-sp-embed] .contact .hero-actions{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2.25rem;
}

[data-sp-embed] .contact .hero-actions .button{
  min-height: clamp(2.75rem, 0.5vw + 2.4rem, 3.5rem);
  padding: clamp(0.6rem, 0.35vw + 0.5rem, 0.95rem) clamp(1.5rem, 1vw + 1rem, 2.35rem);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

[data-sp-embed] .contact .hero-actions .button.secondary.button--glow{
  min-height: clamp(2.85rem, 0.55vw + 2.5rem, 3.65rem);
  padding: clamp(0.65rem, 0.38vw + 0.55rem, 1rem) clamp(1.55rem, 1.1vw + 1.05rem, 2.5rem);
  font-size: 1.05rem;
  border-color: rgba(225, 29, 72, 0.42);
  color: #e11d48;
  z-index: 1;
  box-shadow:
    0 0 0 0 rgba(225, 29, 72, 0.4),
    0 0 26px rgba(225, 29, 72, 0.34),
    0 0.5rem 1.2rem rgba(225, 29, 72, 0.14);
  animation: button-glow-pulse 2.4s ease-in-out infinite;
}

[data-sp-embed] .contact .hero-actions .button.secondary.button--glow:hover{
  background: #fff5f7;
  border-color: rgba(225, 29, 72, 0.6);
  color: #be123c;
  transform: scale(1.045) translateY(-2px);
  box-shadow:
    0 0 0 3px rgba(225, 29, 72, 0.18),
    0 0 40px rgba(225, 29, 72, 0.48),
    0 0.65rem 1.45rem rgba(225, 29, 72, 0.2);
  animation: none;
}

[data-sp-embed] .contact .hero-actions .button.secondary.button--glow:active{
  transform: scale(0.98) translateY(0);
}

[data-sp-embed] .contact .hero-actions .button.button--dark{
  min-height: 3.1rem;
  padding: 0.8rem 1.65rem;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

/* ===== Motion ===== */
[data-sp-embed] .reveal{
  opacity: 1;
  transform: none;
  transition:
    opacity 320ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

[data-sp-embed].js .reveal{
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  pointer-events: none;
}

[data-sp-embed].js .reveal.reveal-left{
  transform: translate3d(-18px, 10px, 0);
}

[data-sp-embed].js .reveal.reveal-right{
  transform: translate3d(18px, 10px, 0);
}

/* Media: never hide with opacity/blur — paint as soon as the file arrives */
[data-sp-embed].js .reveal.reveal-media{
  opacity: 1;
  filter: none;
  transform: translate3d(0, 12px, 0) scale(0.985);
  pointer-events: none;
}

[data-sp-embed].js .reveal.visible{
  opacity: 1;
  transform: none;
  filter: none;
  pointer-events: auto;
}

[data-sp-embed].js .reveal.reveal-media.visible{
  pointer-events: auto;
}

[data-sp-embed].js .reveal.reveal--stagger:not(.visible), [data-sp-embed].js .reveal.reveal--stagger.visible{
  opacity: 1;
  transform: none;
  filter: none;
  transition: none;
  pointer-events: auto;
}

@keyframes growth-fade-up {
  from {
    opacity: 0;
    transform: translateY(1.15rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes growth-em-glow {
  0%, 100% {
    filter: drop-shadow(0 0 0 rgba(225, 29, 72, 0));
  }
  50% {
    filter: drop-shadow(0 0 10px rgba(225, 29, 72, 0.35));
  }
}

[data-sp-embed].js .section-heading.reveal:not(.visible) .growth-fade, [data-sp-embed].js .hero-center.reveal:not(.visible) .growth-fade, [data-sp-embed].js .platform-stage__copy.reveal:not(.visible) .growth-fade, [data-sp-embed].js .showcase-copy.reveal--stagger:not(.visible) .growth-fade, [data-sp-embed].js .value-flow__steps.reveal--stagger:not(.visible) .growth-fade, [data-sp-embed].js .contact-inner.reveal--stagger:not(.visible) .growth-fade{
  opacity: 0;
  transform: translateY(1.15rem);
}

[data-sp-embed].js .section-heading.reveal.visible .growth-fade, [data-sp-embed].js .hero-center.reveal.visible .growth-fade, [data-sp-embed].js .platform-stage__copy.reveal.visible .growth-fade, [data-sp-embed].js .showcase-copy.reveal--stagger.visible .growth-fade, [data-sp-embed].js .value-flow__steps.reveal--stagger.visible .growth-fade, [data-sp-embed].js .contact-inner.reveal--stagger.visible .growth-fade{
  animation: growth-fade-up 1.05s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--d, 0ms);
}

[data-sp-embed].js .showcase-copy.reveal--stagger:not(.visible) .growth-fade--soft, [data-sp-embed].js .contact-inner.reveal--stagger:not(.visible) .growth-fade--soft{
  opacity: 0;
  transform: translateY(1.5rem) scale(0.97);
}

[data-sp-embed].js .showcase-copy.reveal--stagger.visible .growth-fade--soft, [data-sp-embed].js .contact-inner.reveal--stagger.visible .growth-fade--soft{
  animation: hero-title-float 1.85s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--d, 180ms);
}

[data-sp-embed].js .showcase-copy.reveal--stagger.visible .showcase-lead .text-accent-em{
  animation: growth-em-glow 2.4s ease-in-out 0.9s infinite;
}

[data-sp-embed].js .hero-center.reveal.visible .hero-title-em{
  animation: none;
}

[data-sp-embed] .hero-center .growth-fade{
  display: inline-block;
}

[data-sp-embed] .hero-center .hero-copy h1 .hero-title-line.growth-fade{
  display: block;
}

[data-sp-embed] .hero-center .lead.growth-fade{
  display: block;
}

[data-sp-embed] .hero-center .hero-actions.growth-fade{
  display: flex;
}

[data-sp-embed] .section-heading .growth-fade{
  display: block;
}

[data-sp-embed] .contact-inner .growth-fade{
  display: block;
}

[data-sp-embed] .contact-inner .hero-actions.growth-fade{
  display: flex;
}

[data-sp-embed] .contact__lead{
  max-width: 640px;
  margin: 0.9rem auto 2.25rem;
  color: var(--muted);
  font-size: clamp(1.05rem, 0.55vw + 0.92rem, 1.3rem);
  line-height: 1.65;
  font-weight: 400;
  letter-spacing: 0.02em;
}

[data-sp-embed].js .hero-visual.is-animating img, [data-sp-embed].js .showcase-media:not(.cdp-stage__visual).is-animating img{
  animation: media-settle 1.1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes media-settle {
  from { transform: scale(1.03); filter: saturate(0.9); }
  to { transform: scale(1); filter: none; }
}

[data-sp-embed] .workflow-step, [data-sp-embed] .problem-card, [data-sp-embed] .outcome-card, [data-sp-embed] .feature-card, [data-sp-embed] .feature-nav-card{
  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    border-color 220ms ease,
    opacity 780ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 780ms cubic-bezier(0.22, 1, 0.36, 1);
}

[data-sp-embed] .workflow-step.visible:hover, [data-sp-embed] .problem-card.visible:hover, [data-sp-embed] .outcome-card.visible:hover{
  transform: none;
  box-shadow: none;
  border-color: rgba(0, 0, 0, 0.12);
}

/* ===== Responsive ===== */
@media (min-width: 768px) {
  [data-sp-embed] .hero-center .hero-actions{ gap: 1rem; }
  [data-sp-embed] .contact .section-label{
    margin-bottom: 1.6rem;
    font-size: clamp(0.8125rem, 0.35vw + 0.72rem, 0.95rem);
  }
  [data-sp-embed] .contact h2{ font-size: clamp(2rem, 2.8vw + 1rem, 3.25rem); }
}

@media (max-width: 1040px) {
  [data-sp-embed] .hero-visual{ width: min(34rem, 88vw); }
  [data-sp-embed] .hero-float--marketing{
    top: clamp(5.25rem, 11vh, 7.5rem);
    width: clamp(220px, 30vw, 340px);
  }
  [data-sp-embed] .hero-float--analysis{
    width: clamp(210px, 28vw, 320px);
  }
  [data-sp-embed] .hero-float--management{
    width: clamp(230px, 31vw, 360px);
  }
  [data-sp-embed] .showcase, [data-sp-embed] .showcase.reverse{ grid-template-columns: 1fr; }
  [data-sp-embed] .showcase.reverse .showcase-copy, [data-sp-embed] .showcase.reverse .showcase-media{ order: initial; }
  [data-sp-embed] .workflow-list, [data-sp-embed] .feature-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-sp-embed] .feature-nav-wrap{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 14px;
  }

  [data-sp-embed] .feature-nav-group--cdp .feature-nav--group, [data-sp-embed] .feature-nav-group--analysis .feature-nav--group, [data-sp-embed] .feature-nav-group--ma .feature-nav--group{
    grid-template-columns: minmax(0, 1fr);
  }
  [data-sp-embed] .industry-grid{ grid-template-columns: 1fr 1fr; gap: 12px; }
  [data-sp-embed] .industry-grid .feature-card:last-child{ grid-column: 1 / -1; }
  [data-sp-embed] .industry-grid.industry-grid--single{
    grid-template-columns: minmax(0, 22rem);
    justify-content: center;
  }
  [data-sp-embed] .industry-grid.industry-grid--single .feature-card:last-child{
    grid-column: auto;
  }
  [data-sp-embed] .industry-grid.industry-grid--cases{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: center;
    max-width: min(44rem, 100%);
    margin-inline: auto;
    gap: 12px;
  }
  [data-sp-embed] .industry-grid.industry-grid--cases .feature-card:last-child{
    grid-column: auto;
  }
  [data-sp-embed] .workflow-step{
    min-height: 0;
    padding: 18px;
  }
}

/* iPad: keep use-case mocks fully visible (no zoom crop) */
@media (min-width: 761px) and (max-width: 1040px) {
  [data-sp-embed] .industry-grid.industry-grid--cases .feature-card__visual img{
    transform: none;
    object-fit: contain;
  }

  [data-sp-embed] .industry-grid.industry-grid--cases .feature-card:hover .feature-card__visual img{
    transform: none;
  }
}

@media (max-width: 760px) {
  [data-sp-embed] .section-band{
    padding: 3.25rem 1.15rem;
  }

  /* 活用事例: 機種の縦幅いっぱいまで青背景を伸ばし、ジャンプ着地で管理の緑を見せない */
  [data-sp-embed] .section-band.band-industries{
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    min-height: 100lvh;
    padding-top: calc(
      var(--sp-public-header-offset, 4.5rem) + env(safe-area-inset-top, 0px) + 48px
    );
    padding-bottom: clamp(2.25rem, 7vh, 3.75rem);
    padding-inline: 1.15rem;
  }

  [data-sp-embed] .section-band.band-industries .section-heading{
    flex: 0 0 auto;
  }

  [data-sp-embed] .section-band.band-industries .industry-grid--cases{
    flex: 1 1 auto;
    width: 100%;
    align-content: center;
  }

  /* 管理: 活用事例と同じく画面の縦幅まで緑背景を伸ばし、着地で前後セクションを見せない */
  [data-sp-embed] #management.section-band.band-management{
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    min-height: 100lvh;
    padding-top: calc(
      var(--sp-public-header-offset, 4.5rem) + env(safe-area-inset-top, 0px) + 48px
    ) !important;
    padding-bottom: clamp(2.25rem, 7vh, 3.75rem) !important;
    padding-inline: 1.15rem;
  }

  [data-sp-embed] #management .showcase.showcase--analysis-full{
    flex: 1 1 auto;
    width: 100%;
  }

  [data-sp-embed] #management.band-management .ai-insights-bento--mgmt-carousel .ai-insight-card__media-label h3, [data-sp-embed] #management.band-management .ai-insights-bento--mgmt-carousel.ai-insights-bento--marquee .ai-insight-card__media-label h3{
    font-size: clamp(0.88rem, 3.1vw, 1rem) !important;
    line-height: 1.3 !important;
  }

  [data-sp-embed] .hero{
    min-height: auto;
    padding-top: calc(var(--sp-public-header-offset, 4.5rem) + env(safe-area-inset-top, 0px) + 4.5rem);
    padding-bottom: 3.75rem;
    padding-inline: 1rem;
    justify-content: flex-start;
  }

  /* Mobile: hold the MA pink wash across the hero→MA junction (no hard cut) */
  [data-sp-embed] .hero-platforms{
    background: linear-gradient(
      180deg,
      #ffffff 0%,
      #ffffff 18%,
      #fffafb 30%,
      #fff5f7 42%,
      #fff5f7 54%,
      #f7fffb 64%,
      #f0fdf4 78%,
      #f0fdf4 92%,
      #f7fffb 100%
    );
  }

  [data-sp-embed] .hero::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: clamp(3.25rem, 14vw, 5rem);
    /* Behind floats so MA wash doesn't visually "cut" the bottom image */
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(
      180deg,
      rgba(255, 245, 247, 0) 0%,
      rgba(255, 245, 247, 0.42) 42%,
      #fff5f7 100%
    );
  }

  [data-sp-embed] .hero-floats{
    display: block;
    /* Keep decorative floats below the fixed public header */
    top: calc(var(--sp-public-header-offset, 4.5rem) + env(safe-area-inset-top, 0px) + 0.35rem);
    bottom: 0.85rem;
    overflow: visible;
  }

  [data-sp-embed] .hero-float{
    opacity: 0.58;
  }

  [data-sp-embed] .hero-float.is-ready, [data-sp-embed].js .hero-float.is-ready{
    opacity: 0.58;
  }

  [data-sp-embed] .hero-float__label{
    font-size: 0.58rem;
    padding: 0.28rem 0.52rem;
  }

  [data-sp-embed] .hero-float--marketing{
    top: 1.55rem;
    left: -0.85rem;
    width: clamp(124px, 36vw, 156px);
    transform: rotate(-4deg);
  }

  [data-sp-embed] .hero-float--analysis{
    bottom: 1.45rem;
    left: -0.7rem;
    width: clamp(118px, 34vw, 148px);
    transform: rotate(3deg);
  }

  [data-sp-embed] .hero-float--management{
    top: 36%;
    right: -0.85rem;
    width: clamp(130px, 37vw, 162px);
    transform: rotate(-2deg);
  }

  /* EN/TH: taller titles — keep floats clear of center copy */
  [data-sp-embed][lang="en"] .hero-floats, [data-sp-embed][lang="th"] .hero-floats{
    opacity: 0.42;
  }

  [data-sp-embed][lang="en"] .hero-float--management, [data-sp-embed][lang="th"] .hero-float--management{
    top: 22%;
    right: -1.75rem;
    width: clamp(112px, 32vw, 140px);
    opacity: 0.5;
  }

  [data-sp-embed][lang="en"] .hero-float--marketing, [data-sp-embed][lang="th"] .hero-float--marketing{
    top: 0.85rem;
    left: -1.35rem;
    width: clamp(108px, 30vw, 136px);
  }

  [data-sp-embed][lang="en"] .hero-float--analysis, [data-sp-embed][lang="th"] .hero-float--analysis{
    bottom: 0.85rem;
    left: -1.2rem;
    width: clamp(104px, 29vw, 132px);
  }

  [data-sp-embed][lang="en"] .hero-copy, [data-sp-embed][lang="th"] .hero-copy{
    position: relative;
    z-index: 6;
  }

  [data-sp-embed].js .hero-float.is-ready, [data-sp-embed].js .hero-float--marketing.is-ready, [data-sp-embed].js .hero-float--analysis.is-ready, [data-sp-embed].js .hero-float--management.is-ready{
    transform: rotate(var(--hero-float-tilt, 0deg));
  }

  [data-sp-embed].js .hero-float--marketing.is-ready{
    --hero-float-tilt: -4deg;
  }

  [data-sp-embed].js .hero-float--analysis.is-ready{
    --hero-float-tilt: 3deg;
  }

  [data-sp-embed].js .hero-float--management.is-ready{
    --hero-float-tilt: -2deg;
  }

  [data-sp-embed] .platform-stage{
    padding-top: 2.75rem;
    padding-bottom: 1.5rem;
  }

  [data-sp-embed] .cdp-stage{
    padding-top: 1.5rem;
    padding-bottom: 2.5rem;
  }

  [data-sp-embed] .platform-stage__inner.showcase{
    grid-template-columns: 1fr;
  }

  [data-sp-embed] .platform-stage__inner.showcase .platform-stage__copy, [data-sp-embed] .platform-stage__inner.showcase .ma-stage__visual{
    order: initial;
  }

  [data-sp-embed] .platform-stage__copy{
    align-items: center;
    text-align: center;
    max-width: 100%;
  }

  [data-sp-embed] .platform-stage .showcase-copy .platform-stage__tagline{
    text-align: center;
  }

  [data-sp-embed] .platform-stage .platform-stage__tagline [data-stage-subtitle]{
    text-align: center;
  }

  [data-sp-embed] .platform-stage__copy .hero-subtitle{
    text-align: center;
  }

  [data-sp-embed] .ma-stage__visual-stage{
    width: min(100%, var(--platforms-visual-max, min(28rem, 92vw)));
    max-width: min(28rem, 92vw);
    margin-inline: auto;
  }

  [data-sp-embed] .platform-wordmark{
    font-size: clamp(3.25rem, 18vw, 5.5rem);
  }

  [data-sp-embed] .showcase-copy .platform-stage__tagline, [data-sp-embed] .cdp-stage .platform-stage__tagline{
    font-size: clamp(1.35rem, 5vw, 1.85rem);
  }

  [data-sp-embed] .platform-stage__copy .hero-subtitle{
    font-size: clamp(1.05rem, 3.8vw, 1.25rem);
  }

  [data-sp-embed] .cdp-stage__inner.showcase.reverse{
    grid-template-columns: 1fr;
  }

  /* Mobile: CDP text → CDP image (same reading order as MA) */
  [data-sp-embed] .cdp-stage__inner.showcase.reverse .cdp-stage__copy{
    order: 1;
  }

  [data-sp-embed] .cdp-stage__inner.showcase.reverse .cdp-stage__visual{
    order: 2;
  }

  [data-sp-embed] .cdp-stage__copy{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 100%;
  }

  [data-sp-embed] .cdp-stage .showcase-copy .platform-stage__tagline, [data-sp-embed] .cdp-stage .platform-stage__tagline{
    text-align: center;
  }

  [data-sp-embed] .cdp-stage .platform-stage__tagline [data-stage-subtitle]{
    text-align: center;
  }

  [data-sp-embed] .cdp-stage__visual-stage{
    width: min(100%, var(--platforms-visual-max, min(28rem, 92vw)));
    max-width: min(28rem, 92vw);
    margin-inline: auto;
  }

  [data-sp-embed] .hero-center{
    /* Leave room so the CTA glow isn't clipped by overflow-x */
    padding-inline: 0.85rem;
    overflow-x: visible;
  }

  [data-sp-embed] .hero-brand-logo{
    width: min(18rem, 84vw);
    margin: -0.5rem auto 0.55rem;
  }

  [data-sp-embed] .hero-brand-wordmark{
    gap: 0.04em;
  }

  [data-sp-embed] .hero-brand-wordmark__sakina{
    font-size: clamp(1.55rem, 6.8vw, 2.05rem);
    letter-spacing: -0.022em;
  }

  [data-sp-embed] .hero-brand-wordmark__product{
    font-size: clamp(1.4rem, 6.1vw, 1.85rem);
    letter-spacing: 0.03em;
  }

  [data-sp-embed] .hero-visual{
    width: min(18.5rem, 82vw);
    margin-top: 0.1rem;
  }

  [data-sp-embed] .hero-visual img{
    max-height: 200px;
  }

  [data-sp-embed] .hero-center .hero-copy{
    margin-top: 1.15rem;
  }

  [data-sp-embed] .hero .eyebrow{
    margin-bottom: 0.85rem;
    font-size: 0.65rem;
    letter-spacing: 0.16em;
  }

  [data-sp-embed] .hero-center .hero-copy h1{
    width: 100%;
    font-size: clamp(1.7rem, 7.8vw, 2.4rem);
    line-height: 1.28;
    margin-bottom: 0.85rem;
    letter-spacing: -0.015em;
  }

  [data-sp-embed] .hero-title-float:first-child{
    white-space: normal;
  }

  [data-sp-embed] .hero-title-float + .hero-title-float{
    margin-top: 0.3rem;
    letter-spacing: 0.03em;
  }

  [data-sp-embed] .hero-center .hero-copy h1 .hero-title-line{
    display: block;
    white-space: normal;
  }

  [data-sp-embed] .hero-subtitle{
    font-size: clamp(0.8125rem, 3.4vw, 0.9375rem);
    line-height: 1.72;
    letter-spacing: 0.01em;
    max-width: 22em;
  }

  [data-sp-embed][lang="en"] .hero-center .hero-copy h1{
    font-size: clamp(1.9rem, 8.2vw, 2.5rem);
    line-height: 1.2;
  }

  [data-sp-embed] .hero-center .lead{
    font-size: 0.9rem;
    line-height: 1.65;
    letter-spacing: 0.015em;
  }

  [data-sp-embed] .hero-center .lead .lead-line{
    display: block;
  }

  [data-sp-embed] .hero-actions{
    flex-direction: column;
    width: 100%;
    gap: 0.65rem;
    margin-top: 1.15rem;
  }

  [data-sp-embed] .hero-center .hero-actions{
    width: 100%;
    margin-top: 1.15rem;
    padding-inline: 0.45rem;
    box-sizing: border-box;
    overflow: visible;
  }

  [data-sp-embed] .hero-center .hero-actions .button, [data-sp-embed] .hero-center .hero-actions .button.secondary.button--glow, [data-sp-embed] .hero-center .hero-actions .button.button--dark{
    width: 100%;
    min-height: 3rem;
    padding: 0.75rem 1.25rem;
    font-size: 0.9375rem;
  }

  /* Soft pink glow (static on mobile — pulse can feel like vibration) */
  [data-sp-embed] .hero-center .hero-actions .button.secondary.button--glow, [data-sp-embed] .contact .hero-actions .button.secondary.button--glow{
    animation: none;
    transform: none;
    box-shadow:
      0 0 0 0 rgba(225, 29, 72, 0.4),
      0 0 26px rgba(225, 29, 72, 0.34),
      0 0.5rem 1.2rem rgba(225, 29, 72, 0.14);
  }

  [data-sp-embed] .button{ width: 100%; }

  [data-sp-embed] .problem-grid, [data-sp-embed] .workflow-list, [data-sp-embed] .feature-grid, [data-sp-embed] .feature-nav-wrap, [data-sp-embed] .feature-nav-group--cdp .feature-nav--group, [data-sp-embed] .feature-nav-group--analysis .feature-nav--group, [data-sp-embed] .feature-nav-group--ma .feature-nav--group, [data-sp-embed] .outcome-grid, [data-sp-embed] .industry-grid{
    grid-template-columns: 1fr;
    gap: 10px;
  }

  [data-sp-embed] .industry-grid.industry-grid--cases{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: center;
    align-items: stretch;
    max-width: min(36rem, 100%);
    margin-inline: auto;
    gap: 10px;
  }

  [data-sp-embed] .industry-grid.industry-grid--cases .feature-card:last-child{
    grid-column: auto;
  }

  [data-sp-embed] .industry-grid.industry-grid--cases .feature-card{
    height: 100%;
    min-height: 0;
  }

  [data-sp-embed] .industry-grid.industry-grid--cases .feature-card .card-top{
    padding: 14px 12px 0;
    margin-bottom: 0;
    min-height: 0;
  }

  [data-sp-embed] .industry-grid.industry-grid--cases .feature-card .card-top em{
    min-width: 34px;
    height: 34px;
    font-size: 11px;
  }

  [data-sp-embed] .industry-grid.industry-grid--cases .feature-card__visual{
    margin: 10px 10px 0;
    aspect-ratio: 3 / 2;
    flex: 0 0 auto;
    transform: none;
  }

  [data-sp-embed] .industry-grid.industry-grid--cases .feature-card__visual img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    transform: none;
  }

  [data-sp-embed] .industry-grid.industry-grid--cases .feature-card .card-copy{
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 12px 12px 14px;
  }

  [data-sp-embed] .industry-grid.industry-grid--cases .feature-card h3{
    font-size: 14px;
    line-height: 1.35;
    margin-bottom: 8px;
  }

  [data-sp-embed] .industry-grid.industry-grid--cases .feature-card p{
    font-size: 11px;
    line-height: 1.6;
  }

  [data-sp-embed] .industry-grid.industry-grid--cases .use-case-metrics{
    margin-top: auto;
    padding-top: 10px;
    gap: 6px;
  }

  [data-sp-embed] .industry-grid.industry-grid--cases .use-case-metrics li{
    font-size: 10px;
    padding: 0.28em 0.55em;
  }

  [data-sp-embed] .industry-grid.industry-grid--cases .use-case-tags{
    margin-top: auto;
    padding-top: 10px;
    gap: 6px;
  }

  [data-sp-embed] .industry-grid.industry-grid--cases .use-case-tag{
    font-size: 10px;
    padding: 0.28em 0.55em;
  }

  [data-sp-embed] .industry-grid.industry-grid--cases .use-case-status{
    margin-top: auto;
    padding-top: 10px;
    gap: 6px;
  }

  [data-sp-embed] .industry-grid.industry-grid--cases .use-case-status__item{
    font-size: 10px;
    padding: 0.5em 0.6em;
    line-height: 1.45;
  }

  [data-sp-embed] .feature-nav-group--analysis-ai .feature-nav-group__header{
    visibility: visible;
  }

  [data-sp-embed] .feature-nav-card{
    min-height: 0;
    padding: 1.1rem 1rem 0.95rem;
  }

  [data-sp-embed] .feature-nav-card__title{
    font-size: 1.15rem;
  }

  [data-sp-embed] .feature-index__lead{
    font-size: 0.875rem;
    line-height: 1.65;
  }

  [data-sp-embed] .industry-grid .feature-card:last-child{
    grid-column: auto;
  }

  [data-sp-embed] .section-heading{
    margin-bottom: 1.5rem;
    max-width: 100%;
  }

  [data-sp-embed] .section-heading .section-label, [data-sp-embed] .showcase-copy .section-label{
    margin-bottom: 0.75rem;
    font-size: 0.68rem;
    letter-spacing: 0.16em;
  }

  [data-sp-embed] .section-heading h2{
    font-size: clamp(1.25rem, 5vw, 1.65rem);
    line-height: 1.35;
    letter-spacing: 0.01em;
  }

  [data-sp-embed] .problem-card, [data-sp-embed] .outcome-card, [data-sp-embed] .outcome-card--visual{
    padding: 1rem 0.95rem;
    border-radius: 14px;
    gap: 0.75rem;
  }

  [data-sp-embed] .outcome-card__icon{
    width: 42px;
    height: 42px;
    border-radius: 12px;
  }

  [data-sp-embed] .outcome-card__icon svg{
    width: 20px;
    height: 20px;
  }

  [data-sp-embed] .problem-card p, [data-sp-embed] .outcome-card p{
    font-size: 0.9rem;
    line-height: 1.6;
    font-weight: 600;
  }

  [data-sp-embed] .workflow-step{
    padding: 1.15rem 1.05rem;
    border-radius: 14px;
    min-height: 0;
  }

  [data-sp-embed] .workflow-step span{
    width: 40px;
    height: 40px;
    font-size: 12px;
  }

  [data-sp-embed] .workflow-step h3{
    margin-top: 0.9rem;
    font-size: 0.95rem;
    line-height: 1.45;
  }

  [data-sp-embed] .feature-card{
    min-height: 0;
    border-radius: 14px;
  }

  [data-sp-embed] .feature-card .card-top{
    padding: 1rem 1.05rem 0;
    min-height: 56px;
  }

  [data-sp-embed] .feature-card .card-top em{
    min-width: 36px;
    height: 36px;
    font-size: 12px;
  }

  [data-sp-embed] .feature-card .card-copy{
    padding: 0.85rem 1.05rem 1.15rem;
  }

  [data-sp-embed] .band-industries .feature-card__visual{
    margin: 0.65rem 0.85rem 0;
    border-radius: 8px;
  }

  [data-sp-embed] .band-industries .feature-card .card-copy{
    padding: 0.75rem 0.95rem 1.05rem;
  }

  [data-sp-embed] .feature-card h3{
    font-size: 1.05rem;
    margin-bottom: 0.45rem;
  }

  [data-sp-embed] .feature-card p{
    font-size: 0.875rem;
    line-height: 1.65;
  }

  [data-sp-embed] .showcase{
    gap: 1.35rem;
  }

  [data-sp-embed] .showcase-copy h2{
    font-size: clamp(1.2rem, 4.8vw, 1.5rem);
    line-height: 1.35;
  }

  [data-sp-embed] .showcase-copy > p{
    margin-top: 0.85rem;
    font-size: 0.9375rem;
    line-height: 1.7;
    letter-spacing: 0.015em;
  }

  [data-sp-embed] .showcase-points{
    margin-top: 1.15rem;
    gap: 8px;
  }

  [data-sp-embed] .marketing-flow{
    margin-top: 1.75rem;
  }

  [data-sp-embed] .marketing-cutout{
    margin-top: 1.1rem;
  }

  [data-sp-embed] .marketing-cutout__img{
    width: 90%;
    max-width: min(100%, 360px);
    margin-inline: auto;
  }

  [data-sp-embed] .showcase-point, [data-sp-embed] .showcase-point--visual, [data-sp-embed] .showcase-point--marketing{
    padding: 0.85rem 0.95rem;
    border-radius: 12px;
  }

  [data-sp-embed] .showcase-point__icon{
    width: 40px;
    height: 40px;
  }

  [data-sp-embed] .showcase-point__icon svg{
    width: 20px;
    height: 20px;
  }

  [data-sp-embed] .showcase-point h3{
    font-size: 0.9375rem;
  }

  [data-sp-embed] .showcase-point p{
    font-size: 0.8125rem;
    line-height: 1.6;
  }

  [data-sp-embed] .ai-insight-card__preview{
    padding: 10px;
  }

  [data-sp-embed] .ai-insight-card__preview img{
    height: auto;
    object-fit: contain;
  }

  [data-sp-embed] .ai-insight-card__preview--side-crop .ai-insight-card__media{
    height: auto;
    object-fit: contain;
  }

  [data-sp-embed] .ai-insights-bento--pair .ai-insight-card__preview img{
    height: auto;
    object-fit: contain;
  }

  [data-sp-embed] .ai-insight-card__body{
    padding: 14px 16px 16px;
  }

  [data-sp-embed] .ai-insight-card__body h3{
    font-size: 0.9375rem;
  }

  [data-sp-embed] .ai-insight-card__body p{
    font-size: 0.8125rem;
    line-height: 1.65;
  }

  [data-sp-embed] .showcase-media{
    padding: 8px;
    border-radius: 14px;
  }

  [data-sp-embed] .cdp-stage__visual.showcase-media{
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  [data-sp-embed] .cdp-stage__visual-stage{
    width: min(100%, var(--platforms-visual-max, min(28rem, 92vw)));
    max-width: min(28rem, 92vw);
    margin-inline: auto;
  }

  [data-sp-embed] .cdp-stage__visual.showcase-media img{
    border: none !important;
    border-radius: 0 !important;
  }

  [data-sp-embed] .showcase-media.showcase-media--video{
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    padding: 0;
  }

  /* ===== 動画固定サイズ（モバイル） ===== */
  [data-sp-embed] .showcase-video{
    --video-width: 18rem;
    --video-radius: 1.5rem;
    --crop-top: 10%;
  }

  [data-sp-embed] .showcase-media--float{
    padding: 12px;
    border-radius: 16px;
  }

  [data-sp-embed] .showcase-media img{
    max-height: none;
    border-radius: 10px;
  }

  [data-sp-embed] .contact.section-band{
    padding: 2.75rem 1.15rem 3.75rem;
    overflow-x: clip;
  }

  [data-sp-embed] .contact-inner{
    padding-inline: 0.45rem;
    padding-block-end: 1.25rem;
    overflow: visible;
  }

  [data-sp-embed] .contact .section-label{
    margin: 0 0 0.7rem;
    font-size: clamp(0.75rem, 2.2vw, 0.875rem);
    letter-spacing: 0.14em;
  }

  [data-sp-embed] .contact h2{
    font-size: clamp(1.85rem, 7vw, 2.55rem);
    line-height: 1.24;
  }

  [data-sp-embed] .contact-title-line{
    display: block;
    white-space: normal;
  }

  [data-sp-embed][lang="en"] .contact-title-line{
    white-space: normal;
  }

  [data-sp-embed][lang="th"] .contact-title-line{
    white-space: normal;
    line-height: 1.4;
  }

  [data-sp-embed] .contact p:not(.section-label){
    margin: 0.65rem auto 1.5rem;
    font-size: clamp(1rem, 3.2vw, 1.2rem);
    line-height: 1.55;
    white-space: normal;
    max-width: 100%;
    padding-inline: 0.25rem;
  }

  [data-sp-embed] .contact .hero-actions{
    flex-direction: column;
    width: 100%;
    gap: 0.65rem;
    padding-inline: 0.45rem;
    box-sizing: border-box;
    overflow: visible;
  }

  [data-sp-embed] .contact .button{
    width: 100%;
    min-height: 3rem;
  }

  /* Mobile: Integration / Contact CTAs — match compact hero buttons */
  [data-sp-embed] #integration .hero-actions, [data-sp-embed] #contact .hero-actions{
    flex-direction: column;
    align-items: center;
    width: min(100%, 12.5rem);
    margin-inline: auto;
    gap: 0.42rem;
    padding-inline: 0;
  }

  [data-sp-embed] #integration .hero-actions{
    width: min(100%, 14.5rem);
  }

  [data-sp-embed] #integration .button.button--neon, [data-sp-embed] #contact .hero-actions .button, [data-sp-embed] #contact .hero-actions .button.secondary.button--glow, [data-sp-embed] #contact .hero-actions .button.button--dark{
    width: 100%;
    min-height: 2.25rem !important;
    padding: 0.5rem 1.45rem !important;
    font-size: 0.8rem !important;
    letter-spacing: 0.02em;
  }

  [data-sp-embed] #contact .hero-actions .button.secondary.button--glow{
    min-height: 2.35rem !important;
    padding: 0.54rem 1.55rem !important;
    font-size: 0.82rem !important;
  }

  [data-sp-embed] #integration .button.button--neon{
    animation: none;
  }

  [data-sp-embed] #integration .button.button--neon::before{
    animation: none;
  }

  [data-sp-embed] .nobr-product{ white-space: normal; }

  [data-sp-embed].js .reveal.reveal-left, [data-sp-embed].js .reveal.reveal-right{
    transform: translate3d(0, 22px, 0);
  }

  /* Mobile: keep static glow light, no pulse/bob vibration */
  [data-sp-embed] .button.secondary.button--glow, [data-sp-embed] .button.primary.button--glow{
    animation: none;
  }
}

@media (max-width: 480px) {
  [data-sp-embed] .section-band{
    padding: 2.75rem 0.95rem;
  }

  [data-sp-embed] .hero{
    padding-inline: 0.85rem;
    padding-bottom: 2.25rem;
  }

  [data-sp-embed] .hero-brand-wordmark__sakina{
    font-size: clamp(1.38rem, 6.5vw, 1.75rem);
    letter-spacing: -0.018em;
  }

  [data-sp-embed] .hero-brand-wordmark__product{
    font-size: clamp(1.25rem, 5.8vw, 1.58rem);
    letter-spacing: 0.025em;
  }

  [data-sp-embed] .hero-visual{
    width: min(16.5rem, 88vw);
  }

  [data-sp-embed] .hero-visual img{
    max-height: 170px;
  }

  [data-sp-embed] .hero-center .hero-copy h1{
    font-size: clamp(1.95rem, 9vw, 2.6rem);
  }

  [data-sp-embed][lang="en"] .hero-center .hero-copy h1{
    font-size: clamp(1.8rem, 8.4vw, 2.4rem);
  }

  [data-sp-embed] .hero-center .lead{
    font-size: 0.85rem;
  }

  [data-sp-embed] .section-heading h2{
    font-size: clamp(1.15rem, 5.2vw, 1.4rem);
  }

  [data-sp-embed] .showcase-copy h2{
    font-size: clamp(1.1rem, 5vw, 1.35rem);
  }

  [data-sp-embed] .problem-card p, [data-sp-embed] .outcome-card p{
    font-size: 0.85rem;
  }
}


/* ===== CMS page — feature nav (3 cards in one row) ===== */
[data-sp-embed] .feature-nav-wrap--cms{
  grid-template-columns: 1fr;
  max-width: 1180px;
}

[data-sp-embed] .feature-nav-group--cms .feature-nav-group__label{
  color: #15803d;
}

[data-sp-embed] .feature-nav-group--cms .feature-nav--group{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

[data-sp-embed] .feature-nav-group--cms .feature-nav-card{
  height: 100%;
}

[data-sp-embed] .feature-nav-group--cms .feature-nav-card__title{
  margin-bottom: 0.45rem;
}

[data-sp-embed] .feature-nav-group--cms .feature-nav-card__desc{
  flex: 1;
  color: #4b5563;
  font-size: clamp(0.9rem, 0.22vw + 0.82rem, 1rem);
  line-height: 1.75;
  font-weight: 500;
  letter-spacing: 0.01em;
}

[data-sp-embed] .feature-nav-group--cms .feature-nav-card__cta{
  margin-top: auto;
  padding-top: 1.15rem;
}

@media (max-width: 1040px) {
  [data-sp-embed] .feature-nav-group--cms .feature-nav--group{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  [data-sp-embed] .feature-nav-group--cms .feature-nav--group{
    grid-template-columns: 1fr;
  }
}

/* ===== CMS hero — floating story (ref composition) ===== */
[data-sp-embed] .hero--cms-story{
  min-height: min(100vh, 920px);
  background: #e6e3e1;
  justify-content: safe center;
  /* 固定ヘッダー下端〜タイトル上の余白（大きく = タイトルが下がる） */
  --cms-hero-title-gap: clamp(10.5rem, 15vh, 13.5rem);
}

/* 公式固定ヘッダー分を必ず確保（タイトルがヘッダーに埋まらない） */
[data-sp-embed] .hero--cms-story[data-sp-embed-top]{
  padding-top: calc(
    var(--sp-public-header-offset, 4.5rem) + env(safe-area-inset-top, 0px) + var(--cms-hero-title-gap)
  ) !important;
}

[data-sp-embed] .hero--cms-story .hero-center{
  z-index: 3;
  max-width: min(28rem, 88vw);
  /* ヘッダー下端から最低でも離す（safe center の補助） */
  margin-top: 0.25rem;
}

[data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.08em;
  font-size: clamp(2rem, 4.8vw, 3.35rem);
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.28;
  color: #1f2937;
}

[data-sp-embed] .hero--cms-story .hero-title-float{
  display: block;
}

[data-sp-embed] .hero--cms-story .hero-title-float + .hero-title-float{
  margin-top: 0;
}

[data-sp-embed].js .hero--cms-story .hero-center.reveal.visible .hero-title-float:nth-child(1){
  animation-delay: 280ms;
}
[data-sp-embed].js .hero--cms-story .hero-center.reveal.visible .hero-title-float:nth-child(2){
  animation-delay: 420ms;
}
[data-sp-embed].js .hero--cms-story .hero-center.reveal.visible .hero-title-float:nth-child(3){
  animation-delay: 560ms;
}
[data-sp-embed].js .hero--cms-story .hero-center.reveal.visible .hero-title-float:nth-child(4){
  animation-delay: 700ms;
}

[data-sp-embed] .hero--cms-story .hero-float{
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}

[data-sp-embed] .hero--cms-story .hero-float::before, [data-sp-embed] .hero--cms-story .hero-float::after{
  display: none;
}

[data-sp-embed] .hero--cms-story .hero-float img{
  width: 100%;
  height: auto;
  background: transparent;
  filter: drop-shadow(0 18px 34px rgba(15, 23, 42, 0.14));
}

[data-sp-embed] .hero--cms-story .hero-float__label{
  display: none;
}

/* Top-left: Instagram composite */
[data-sp-embed] .hero--cms-story .hero-float--ig{
  top: clamp(5.5rem, 11vh, 8.25rem);
  left: clamp(0.2rem, 2.2vw, 2.5rem);
  width: clamp(168px, 20vw, 292px);
  transform: rotate(-4deg);
}

/* Top-right: LINE composite */
[data-sp-embed] .hero--cms-story .hero-float--line{
  top: clamp(5.75rem, 12vh, 8.75rem);
  right: clamp(0.35rem, 2.4vw, 2.75rem);
  left: auto;
  width: clamp(158px, 18.5vw, 276px);
  transform: rotate(3.5deg);
}

/* Bottom-left: Facebook composite */
[data-sp-embed] .hero--cms-story .hero-float--fb{
  bottom: clamp(2.75rem, 7vh, 5.25rem);
  left: clamp(0.45rem, 3vw, 3.25rem);
  top: auto;
  width: clamp(156px, 18vw, 268px);
  transform: rotate(2deg);
}

/* Bottom-right: campaign — same 16:9 scale as other floats (1920×1080) */
[data-sp-embed] .hero--cms-story .hero-float--campaign{
  bottom: clamp(2.75rem, 7vh, 5.25rem);
  right: clamp(0.45rem, 3vw, 3.25rem);
  left: auto;
  top: auto;
  width: clamp(156px, 18vw, 268px);
  transform: rotate(-2.5deg);
}

[data-sp-embed] .hero--cms-story .hero-float--ig, [data-sp-embed].js .hero--cms-story .hero-float--ig.is-ready{
  --hero-float-tilt: -4deg;
}
[data-sp-embed] .hero--cms-story .hero-float--line, [data-sp-embed].js .hero--cms-story .hero-float--line.is-ready{
  --hero-float-tilt: 3.5deg;
}
[data-sp-embed] .hero--cms-story .hero-float--fb, [data-sp-embed].js .hero--cms-story .hero-float--fb.is-ready{
  --hero-float-tilt: 2deg;
}
[data-sp-embed] .hero--cms-story .hero-float--campaign, [data-sp-embed].js .hero--cms-story .hero-float--campaign.is-ready{
  --hero-float-tilt: -2.5deg;
}

/* Floats stay visible — only soft orbit (no opacity hide) */
[data-sp-embed].js .hero--cms-story .hero-float.is-ready{
  opacity: 1;
  transform: rotate(var(--hero-float-tilt, 0deg));
}

[data-sp-embed].js .hero--cms-story .hero-float.is-animating{
  animation: hero-float-drift var(--hero-float-duration, 6.4s) ease-in-out infinite;
  animation-delay: var(--float-in-delay, 0ms);
}

[data-sp-embed].js .hero--cms-story .hero-float--ig.is-animating{
  --hero-float-duration: 5.8s;
}
[data-sp-embed].js .hero--cms-story .hero-float--line.is-animating{
  --hero-float-duration: 6.4s;
}
[data-sp-embed].js .hero--cms-story .hero-float--fb.is-animating{
  --hero-float-duration: 7s;
}
[data-sp-embed].js .hero--cms-story .hero-float--campaign.is-animating{
  --hero-float-duration: 6.7s;
}

@keyframes cms-float-enter {
  from {
    opacity: 0;
    transform: rotate(var(--hero-float-tilt, 0deg)) translateY(22px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: rotate(var(--hero-float-tilt, 0deg)) translateY(0) scale(1);
  }
}

@media (max-width: 1040px) {
  [data-sp-embed] .hero--cms-story .hero-float--ig{
    width: clamp(148px, 22vw, 220px);
  }
  [data-sp-embed] .hero--cms-story .hero-float--line{
    width: clamp(140px, 20vw, 206px);
  }
  [data-sp-embed] .hero--cms-story .hero-float--fb{
    width: clamp(136px, 19vw, 198px);
  }
  [data-sp-embed] .hero--cms-story .hero-float--campaign{
    width: clamp(150px, 22vw, 224px);
  }
}

@media (max-width: 760px) {
  [data-sp-embed] .hero--cms-story{
    min-height: auto;
    padding-bottom: 2.5rem;
  }

  [data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
    font-size: clamp(1.7rem, 8vw, 2.15rem);
  }

  [data-sp-embed] .hero--cms-story .hero-floats{
    opacity: 0.92;
  }

  [data-sp-embed] .hero--cms-story .hero-float--ig{
    top: clamp(4.4rem, 8vh, 5.8rem);
    left: -0.85rem;
    width: clamp(112px, 34vw, 148px);
  }

  [data-sp-embed] .hero--cms-story .hero-float--line{
    top: clamp(4.6rem, 8.5vh, 6rem);
    right: -0.75rem;
    width: clamp(104px, 32vw, 138px);
  }

  [data-sp-embed] .hero--cms-story .hero-float--fb{
    bottom: 0.15rem;
    left: -0.65rem;
    width: clamp(102px, 31vw, 134px);
  }

  [data-sp-embed] .hero--cms-story .hero-float--campaign{
    bottom: 0.05rem;
    right: -0.7rem;
    width: clamp(112px, 34vw, 148px);
  }
}

/* CMS hero: brand as single red line "SAKINA CMS" */
[data-sp-embed] .hero--cms-story .hero-brand-wordmark--inline{
  flex-direction: row;
  gap: 0.28em;
}

[data-sp-embed] .hero--cms-story .hero-brand-wordmark__full{
  font-family: var(--font-sans);
  font-size: clamp(1.55rem, 3.6vw + 0.45rem, 2.55rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.1;
  color: #111111;
  text-shadow: none;
  white-space: nowrap;
}

[data-sp-embed].js .hero--cms-story .hero-center.reveal.visible .hero-brand-wordmark__full{
  animation: none;
}

@keyframes hero-logo-glow-red {
  0%,
  100% {
    text-shadow:
      0 0 18px rgba(220, 38, 38, 0.18),
      0 0 36px rgba(248, 113, 113, 0.12);
  }
  50% {
    text-shadow:
      0 0 24px rgba(220, 38, 38, 0.32),
      0 0 48px rgba(248, 113, 113, 0.2);
  }
}

@media (max-width: 760px) {
  [data-sp-embed] .hero--cms-story .hero-brand-wordmark__full{
    font-size: clamp(1.35rem, 5.8vw, 1.75rem);
    letter-spacing: 0.05em;
  }
}

/* ===== CMS hero alignment fixes ===== */
[data-sp-embed] .hero--cms-story .hero-center{
  max-width: min(36rem, 94vw);
  overflow: visible;
  overflow-x: visible;
  align-items: center;
}

[data-sp-embed] .hero--cms-story .hero-brand-logo{
  width: auto;
  max-width: 100%;
  margin: 0 auto 0.85rem;
  display: flex;
  justify-content: center;
  align-items: center;
  /* Kill leftover pop-translation asymmetry */
  transform: none;
}

[data-sp-embed] .hero--cms-story .hero-brand-wordmark--inline{
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: 100%;
}

[data-sp-embed] .hero--cms-story .hero-brand-wordmark__full{
  display: block;
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
  text-align: center;
  white-space: nowrap;
  box-sizing: border-box;
}

[data-sp-embed].js .hero--cms-story .hero-center.reveal:not(.visible) .hero-brand-logo{
  transform: translateY(1rem) scale(0.92);
}

[data-sp-embed].js .hero--cms-story .hero-center.reveal.visible .hero-brand-logo{
  animation: cms-brand-pop 0.72s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--d, 0ms);
}

@keyframes cms-brand-pop {
  0% {
    opacity: 0;
    transform: translateY(1rem) scale(0.92);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

[data-sp-embed] .hero--cms-story .hero-center .hero-copy{
  width: 100%;
  align-items: center;
}

[data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
  width: 100%;
  align-items: center;
}

/* Pull floats inward so composites are fully readable */
[data-sp-embed] .hero--cms-story .hero-float--ig{
  top: clamp(5.75rem, 12vh, 8.5rem);
  left: clamp(1.25rem, 5.5vw, 5.5rem);
  width: clamp(150px, 17.5vw, 250px);
}

[data-sp-embed] .hero--cms-story .hero-float--line{
  top: clamp(6rem, 12.5vh, 8.75rem);
  right: clamp(1.25rem, 5.5vw, 5.5rem);
  width: clamp(142px, 16.5vw, 238px);
}

[data-sp-embed] .hero--cms-story .hero-float--fb{
  bottom: clamp(3.25rem, 8vh, 6rem);
  left: clamp(1.5rem, 6vw, 6rem);
  width: clamp(140px, 16vw, 230px);
}

[data-sp-embed] .hero--cms-story .hero-float--campaign{
  bottom: clamp(3rem, 7.5vh, 5.75rem);
  right: clamp(1.35rem, 5.8vw, 5.75rem);
  width: clamp(152px, 17.5vw, 255px);
}

@media (max-width: 1040px) {
  [data-sp-embed] .hero--cms-story .hero-float--ig{
    left: clamp(0.75rem, 3vw, 2rem);
    width: clamp(132px, 19vw, 198px);
  }
  [data-sp-embed] .hero--cms-story .hero-float--line{
    right: clamp(0.75rem, 3vw, 2rem);
    width: clamp(124px, 17.5vw, 186px);
  }
  [data-sp-embed] .hero--cms-story .hero-float--fb{
    left: clamp(0.85rem, 3.2vw, 2.25rem);
    width: clamp(122px, 17vw, 180px);
  }
  [data-sp-embed] .hero--cms-story .hero-float--campaign{
    right: clamp(0.8rem, 3vw, 2.1rem);
    width: clamp(132px, 19vw, 198px);
  }
}

@media (max-width: 760px) {
  [data-sp-embed] .hero--cms-story .hero-brand-logo{
    margin-bottom: 0.65rem;
  }

  [data-sp-embed] .hero--cms-story .hero-float--ig{
    top: clamp(4.6rem, 8.5vh, 6rem);
    left: 0.15rem;
    width: clamp(104px, 30vw, 136px);
  }

  [data-sp-embed] .hero--cms-story .hero-float--line{
    top: clamp(4.8rem, 9vh, 6.25rem);
    right: 0.15rem;
    width: clamp(98px, 28vw, 128px);
  }

  [data-sp-embed] .hero--cms-story .hero-float--fb{
    bottom: 0.45rem;
    left: 0.25rem;
    width: clamp(96px, 28vw, 126px);
  }

  [data-sp-embed] .hero--cms-story .hero-float--campaign{
    bottom: 0.35rem;
    right: 0.2rem;
    width: clamp(104px, 30vw, 136px);
  }
}

/* 3 transparent floats: campaign sits bottom-left for balance */
[data-sp-embed] .hero--cms-story .hero-float--campaign{
  bottom: clamp(3.25rem, 8vh, 6rem);
  left: clamp(1.5rem, 6vw, 6rem);
  right: auto;
  top: auto;
  width: clamp(150px, 17.5vw, 250px);
  transform: rotate(2deg);
}

[data-sp-embed] .hero--cms-story .hero-float--campaign, [data-sp-embed].js .hero--cms-story .hero-float--campaign.is-ready{
  --hero-float-tilt: 2deg;
}

/* Add a subtle fourth presence on bottom-right using campaign twin position for line? keep line top-right */
[data-sp-embed] .hero--cms-story .hero-float--line{
  /* keep top-right, also mirror a little lower if needed */
}

@media (max-width: 1040px) {
  [data-sp-embed] .hero--cms-story .hero-float--campaign{
    left: clamp(0.85rem, 3.2vw, 2.25rem);
    right: auto;
    width: clamp(132px, 19vw, 198px);
  }
}

@media (max-width: 760px) {
  [data-sp-embed] .hero--cms-story .hero-float--campaign{
    bottom: 0.45rem;
    left: 0.25rem;
    right: auto;
    width: clamp(104px, 30vw, 136px);
  }
}

/* Keep campaign bottom-right (reference composition without facebook) */
[data-sp-embed] .hero--cms-story .hero-float--campaign{
  bottom: clamp(3rem, 7.5vh, 5.75rem);
  right: clamp(1.35rem, 5.8vw, 5.75rem);
  left: auto;
  top: auto;
  width: clamp(152px, 17.5vw, 255px);
  transform: rotate(-2.5deg);
}

[data-sp-embed] .hero--cms-story .hero-float--campaign, [data-sp-embed].js .hero--cms-story .hero-float--campaign.is-ready{
  --hero-float-tilt: -2.5deg;
}

@media (max-width: 1040px) {
  [data-sp-embed] .hero--cms-story .hero-float--campaign{
    right: clamp(0.8rem, 3vw, 2.1rem);
    left: auto;
    width: clamp(132px, 19vw, 198px);
  }
}

@media (max-width: 760px) {
  [data-sp-embed] .hero--cms-story .hero-float--campaign{
    bottom: 0.35rem;
    right: 0.2rem;
    left: auto;
    width: clamp(104px, 30vw, 136px);
  }
}

/* Full-page beige canvas for CMS story page */
[data-sp-embed]:has(.hero--cms-story), [data-sp-embed]:has(.hero--cms-story){
  background: #e6e3e1;
}

[data-sp-embed]:has(.hero--cms-story){
  --bg-hero: #e6e3e1;
  --paper: #e6e3e1;
  --bg-section: #e6e3e1;
}

[data-sp-embed] main:has(.hero--cms-story){
  background: #e6e3e1;
}

[data-sp-embed] .hero--cms-story{
  background: #e6e3e1 !important;
}

/* CMS hero: larger type + floats, brighter greige */
[data-sp-embed] .hero--cms-story{
  min-height: min(100vh, 980px);
}

[data-sp-embed] .hero--cms-story .hero-brand-wordmark__full{
  font-size: clamp(1.85rem, 4.2vw + 0.5rem, 3rem);
}

[data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
  font-size: clamp(2.35rem, 5.6vw, 3.9rem);
  line-height: 1.22;
}

[data-sp-embed] .hero--cms-story .hero-subtitle{
  font-size: clamp(1.05rem, 1.6vw + 0.55rem, 1.35rem);
  margin-top: 1.1rem;
}

[data-sp-embed] .hero--cms-story .hero-center .hero-actions{
  margin-top: 1.5rem;
  gap: 0.85rem;
}

[data-sp-embed] .hero--cms-story .hero-center .hero-actions .button{
  font-size: 0.98rem;
  padding: 0.9rem 1.35rem;
}

[data-sp-embed] .hero--cms-story .hero-float--ig{
  width: clamp(200px, 22.5vw, 340px);
}

[data-sp-embed] .hero--cms-story .hero-float--line{
  width: clamp(188px, 21vw, 320px);
}

[data-sp-embed] .hero--cms-story .hero-float--fb{
  width: clamp(184px, 20.5vw, 310px);
}

[data-sp-embed] .hero--cms-story .hero-float--campaign{
  width: clamp(205px, 23vw, 350px);
}

@media (max-width: 1040px) {
  [data-sp-embed] .hero--cms-story .hero-float--ig{ width: clamp(170px, 24vw, 250px); }
  [data-sp-embed] .hero--cms-story .hero-float--line{ width: clamp(160px, 22vw, 236px); }
  [data-sp-embed] .hero--cms-story .hero-float--fb{ width: clamp(156px, 21.5vw, 228px); }
  [data-sp-embed] .hero--cms-story .hero-float--campaign{ width: clamp(172px, 24vw, 252px); }
}

@media (max-width: 760px) {
  [data-sp-embed] .hero--cms-story .hero-brand-wordmark__full{
    font-size: clamp(1.55rem, 6.4vw, 2rem);
  }
  [data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
    font-size: clamp(1.95rem, 8.6vw, 2.45rem);
  }
  [data-sp-embed] .hero--cms-story .hero-float--ig{ width: clamp(132px, 38vw, 172px); }
  [data-sp-embed] .hero--cms-story .hero-float--line{ width: clamp(124px, 36vw, 162px); }
  [data-sp-embed] .hero--cms-story .hero-float--fb{ width: clamp(120px, 35vw, 156px); }
  [data-sp-embed] .hero--cms-story .hero-float--campaign{ width: clamp(132px, 38vw, 172px); }
}

/* Title black + keep text clear of floats */
[data-sp-embed] .hero--cms-story{
  min-height: min(100vh, 1040px);
  padding-inline: clamp(0.5rem, 2vw, 1.5rem);
}

[data-sp-embed] .hero--cms-story .hero-center{
  z-index: 4;
  max-width: min(22rem, 46vw);
  padding-inline: 0.5rem;
}

[data-sp-embed] .hero--cms-story .hero-brand-logo{
  margin-bottom: 1.15rem;
}

[data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
  color: #000000;
  gap: 0.18em;
  line-height: 1.3;
}

[data-sp-embed] .hero--cms-story .hero-title-float, [data-sp-embed] .hero--cms-story .hero-title-float + .hero-title-float{
  color: #000000;
  margin-top: 0;
}

[data-sp-embed] .hero--cms-story .hero-subtitle{
  color: #111111;
  margin-top: 1.35rem;
}

/* Keep floats in outer gutters, away from center copy */
[data-sp-embed] .hero--cms-story .hero-float--ig{
  top: clamp(5.5rem, 10vh, 8rem);
  left: clamp(0.4rem, 2.2vw, 2.25rem);
  width: clamp(168px, 18vw, 280px);
}

[data-sp-embed] .hero--cms-story .hero-float--line{
  top: clamp(5.75rem, 10.5vh, 8.25rem);
  right: clamp(0.4rem, 2.2vw, 2.25rem);
  left: auto;
  width: clamp(158px, 16.5vw, 265px);
}

[data-sp-embed] .hero--cms-story .hero-float--fb{
  bottom: clamp(2.75rem, 6.5vh, 5.25rem);
  left: clamp(0.55rem, 2.6vw, 2.75rem);
  right: auto;
  top: auto;
  width: clamp(152px, 16vw, 255px);
}

[data-sp-embed] .hero--cms-story .hero-float--campaign{
  bottom: clamp(2.5rem, 6vh, 5rem);
  right: clamp(0.45rem, 2.4vw, 2.5rem);
  left: auto;
  top: auto;
  width: clamp(170px, 18vw, 285px);
  transform: rotate(-2.5deg);
}

[data-sp-embed] .hero--cms-story .hero-float--campaign, [data-sp-embed].js .hero--cms-story .hero-float--campaign.is-ready{
  --hero-float-tilt: -2.5deg;
}

@media (max-width: 1100px) {
  [data-sp-embed] .hero--cms-story .hero-center{
    max-width: min(20rem, 42vw);
  }
  [data-sp-embed] .hero--cms-story .hero-float--ig, [data-sp-embed] .hero--cms-story .hero-float--line, [data-sp-embed] .hero--cms-story .hero-float--fb, [data-sp-embed] .hero--cms-story .hero-float--campaign{
    width: clamp(140px, 16vw, 220px);
  }
}

@media (max-width: 860px) {
  [data-sp-embed] .hero--cms-story .hero-center{
    max-width: min(18rem, 58vw);
  }
  [data-sp-embed] .hero--cms-story .hero-float--ig{
    top: 4.75rem;
    left: 0.15rem;
    width: clamp(110px, 28vw, 148px);
  }
  [data-sp-embed] .hero--cms-story .hero-float--line{
    top: 4.95rem;
    right: 0.15rem;
    width: clamp(104px, 26vw, 140px);
  }
  [data-sp-embed] .hero--cms-story .hero-float--fb{
    bottom: 0.55rem;
    left: 0.2rem;
    width: clamp(100px, 26vw, 136px);
  }
  [data-sp-embed] .hero--cms-story .hero-float--campaign{
    bottom: 0.4rem;
    right: 0.15rem;
    width: clamp(110px, 28vw, 148px);
  }
}

/* Lower center block; tighter headline; soft brand glow */
[data-sp-embed] .hero--cms-story .hero-center{
  margin-top: clamp(2.5rem, 7vh, 5.5rem);
  transform: none;
}

[data-sp-embed] .hero--cms-story .hero-brand-logo{
  margin-bottom: 0.7rem;
}

[data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
  gap: 0.02em;
  line-height: 1.12;
  letter-spacing: 0.02em;
}

[data-sp-embed] .hero--cms-story .hero-title-float + .hero-title-float{
  margin-top: 0;
}

[data-sp-embed] .hero--cms-story .hero-subtitle{
  margin-top: 0.95rem;
}

[data-sp-embed] .hero--cms-story .hero-brand-wordmark__full{
  color: #111111;
  text-shadow:
    0 0 0 rgba(225, 29, 72, 0.4),
    0 0 18px rgba(225, 29, 72, 0.42),
    0 0 36px rgba(225, 29, 72, 0.32),
    0 0 58px rgba(225, 29, 72, 0.2);
}

[data-sp-embed].js .hero--cms-story .hero-center.reveal.visible .hero-brand-wordmark__full{
  animation: cms-brand-glow 2.4s ease-in-out infinite;
}

@keyframes cms-brand-glow {
  0%,
  100% {
    text-shadow:
      0 0 0 rgba(225, 29, 72, 0.35),
      0 0 18px rgba(225, 29, 72, 0.38),
      0 0 34px rgba(225, 29, 72, 0.28),
      0 0 54px rgba(225, 29, 72, 0.16);
  }
  50% {
    text-shadow:
      0 0 3px rgba(225, 29, 72, 0.22),
      0 0 28px rgba(225, 29, 72, 0.55),
      0 0 48px rgba(225, 29, 72, 0.4),
      0 0 78px rgba(225, 29, 72, 0.26);
  }
}

@media (max-width: 760px) {
  [data-sp-embed] .hero--cms-story .hero-center{
    margin-top: clamp(1.5rem, 5vh, 2.75rem);
  }
}

[data-sp-embed] .hero--cms-story .hero-title-float{
  white-space: nowrap;
}

/* CMS: extra pitch bands after UNIFIED CMS */
[data-sp-embed] #nocode-platform.platform-stage .cdp-stage__visual, [data-sp-embed] #ai-platform.cdp-stage .cdp-stage__visual{
  width: min(100%, 34rem);
}

[data-sp-embed] #nocode-platform .platform-stage__tagline, [data-sp-embed] #ai-platform .platform-stage__tagline{
  max-width: 18ch;
}

/* Keep hero floats large on shrink */
@media (max-width: 1100px) {
  [data-sp-embed] .hero--cms-story .hero-float--ig, [data-sp-embed] .hero--cms-story .hero-float--line, [data-sp-embed] .hero--cms-story .hero-float--fb, [data-sp-embed] .hero--cms-story .hero-float--campaign{
    width: clamp(180px, 22vw, 270px);
  }
}

@media (max-width: 860px) {
  [data-sp-embed] .hero--cms-story .hero-center{
    max-width: min(16.5rem, 52vw);
  }

  [data-sp-embed] .hero--cms-story .hero-float--ig{
    top: 4.35rem;
    left: -0.35rem;
    width: clamp(148px, 36vw, 198px);
  }

  [data-sp-embed] .hero--cms-story .hero-float--line{
    top: 4.55rem;
    right: -0.35rem;
    width: clamp(140px, 34vw, 188px);
  }

  [data-sp-embed] .hero--cms-story .hero-float--fb{
    bottom: 0.35rem;
    left: -0.2rem;
    width: clamp(136px, 34vw, 184px);
  }

  [data-sp-embed] .hero--cms-story .hero-float--campaign{
    bottom: 0.2rem;
    right: -0.3rem;
    width: clamp(148px, 36vw, 198px);
  }
}

@media (max-width: 760px) {
  [data-sp-embed] .hero--cms-story .hero-floats{
    opacity: 1;
  }

  [data-sp-embed] .hero--cms-story .hero-center{
    max-width: min(15.5rem, 58vw);
  }

  [data-sp-embed] .hero--cms-story .hero-float--ig{
    top: 4.1rem;
    left: -0.55rem;
    width: clamp(138px, 40vw, 178px);
  }

  [data-sp-embed] .hero--cms-story .hero-float--line{
    top: 4.3rem;
    right: -0.55rem;
    width: clamp(130px, 38vw, 170px);
  }

  [data-sp-embed] .hero--cms-story .hero-float--fb{
    bottom: 0.2rem;
    left: -0.35rem;
    width: clamp(126px, 38vw, 166px);
  }

  [data-sp-embed] .hero--cms-story .hero-float--campaign{
    bottom: 0.1rem;
    right: -0.45rem;
    width: clamp(138px, 40vw, 178px);
  }
}

@media (max-width: 420px) {
  [data-sp-embed] .hero--cms-story .hero-float--ig, [data-sp-embed] .hero--cms-story .hero-float--campaign{
    width: clamp(128px, 42vw, 156px);
  }

  [data-sp-embed] .hero--cms-story .hero-float--line, [data-sp-embed] .hero--cms-story .hero-float--fb{
    width: clamp(120px, 40vw, 148px);
  }
}

/* Brand under title (was subtitle) */
[data-sp-embed] .hero--cms-story .hero-brand-logo--under-title{
  display: flex;
  justify-content: center;
  width: auto;
  max-width: 100%;
  margin: 1.15rem auto 0;
}

[data-sp-embed] .hero--cms-story .hero-brand-logo--under-title .hero-brand-wordmark__full{
  font-size: clamp(1.45rem, 3.2vw + 0.4rem, 2.35rem);
}

[data-sp-embed].js .hero--cms-story .hero-center.reveal.visible .hero-title-float:nth-child(1){
  animation-delay: 280ms;
}
[data-sp-embed].js .hero--cms-story .hero-center.reveal.visible .hero-title-float:nth-child(2){
  animation-delay: 480ms;
}

[data-sp-embed] .hero--cms-story .hero-title-float{
  white-space: normal;
  max-width: 100%;
  text-wrap: balance;
}

/* SAKINA CMS: no glow, deep gray */
[data-sp-embed] .hero--cms-story .hero-brand-wordmark__full{
  color: #374151;
  text-shadow: none;
}

[data-sp-embed].js .hero--cms-story .hero-center.reveal.visible .hero-brand-wordmark__full{
  animation: none;
}

[data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
  gap: 0.12em;
}

[data-sp-embed] .hero--cms-story .hero-title-float{
  white-space: nowrap;
  display: block;
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
}

/* Easy / AI pitch: side-by-side on PC, stacked on mobile */
[data-sp-embed] .cms-pitch{
  padding-top: clamp(3rem, 6vw, 5rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
  background: transparent;
}

[data-sp-embed] .cms-pitch__inner{
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  max-width: min(1180px, calc(100% - 4rem));
  margin: 0 auto;
}

[data-sp-embed] .cms-pitch--flip .cms-pitch__inner{
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}

[data-sp-embed] .cms-pitch__copy{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  width: 100%;
  max-width: min(34rem, 100%);
}

[data-sp-embed] .cms-pitch--flip .cms-pitch__copy{
  align-items: flex-end;
  text-align: right;
  grid-column: 2;
  grid-row: 1;
}

[data-sp-embed] .cms-pitch--flip .cms-pitch__visual{
  grid-column: 1;
  grid-row: 1;
}

[data-sp-embed] .cms-pitch__copy .eyebrow{
  margin: 0 0 1.1rem;
  color: var(--accent-red);
  font-size: clamp(0.7rem, 0.15vw + 0.66rem, 0.8125rem);
  font-weight: 600;
  letter-spacing: 0.14em;
}

[data-sp-embed] .cms-pitch__wordmark{
  margin: 0 0 clamp(0.75rem, 1.5vw, 1.1rem);
}

[data-sp-embed] .cms-pitch .platform-stage__tagline{
  margin: clamp(0.75rem, 1.5vw, 1.1rem) 0 0;
  width: 100%;
  text-align: inherit;
}

[data-sp-embed] .cms-pitch--flip .platform-stage__tagline, [data-sp-embed] .cms-pitch--flip .platform-stage__tagline [data-stage-subtitle]{
  text-align: right;
}

[data-sp-embed] .cms-pitch__visual{
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

[data-sp-embed] .cms-pitch__visual-stage{
  width: min(100%, 36rem);
  margin: 0;
}

[data-sp-embed] .cms-pitch--flip .cms-pitch__visual-stage{
  margin-right: auto;
  margin-left: 0;
}

[data-sp-embed] .cms-pitch:not(.cms-pitch--flip) .cms-pitch__visual-stage{
  margin-left: auto;
  margin-right: 0;
}

[data-sp-embed] .cms-pitch__visual-stage img{
  display: block;
  width: 100%;
  height: auto;
  border: none;
  border-radius: 0;
  object-fit: contain;
  filter: drop-shadow(0 22px 40px rgba(15, 23, 42, 0.12));
}

@media (max-width: 760px) {
  [data-sp-embed] .cms-pitch__inner, [data-sp-embed] .cms-pitch--flip .cms-pitch__inner{
    grid-template-columns: 1fr;
    max-width: min(40rem, calc(100% - 2rem));
  }

  [data-sp-embed] .cms-pitch__copy, [data-sp-embed] .cms-pitch--flip .cms-pitch__copy{
    grid-column: auto;
    grid-row: auto;
    order: 1;
    align-items: center;
    text-align: center;
    max-width: 100%;
  }

  [data-sp-embed] .cms-pitch__visual, [data-sp-embed] .cms-pitch--flip .cms-pitch__visual{
    grid-column: auto;
    grid-row: auto;
    order: 2;
  }

  [data-sp-embed] .cms-pitch .platform-stage__tagline, [data-sp-embed] .cms-pitch--flip .platform-stage__tagline, [data-sp-embed] .cms-pitch--flip .platform-stage__tagline [data-stage-subtitle]{
    text-align: center;
  }

  [data-sp-embed] .cms-pitch__visual-stage, [data-sp-embed] .cms-pitch--flip .cms-pitch__visual-stage, [data-sp-embed] .cms-pitch:not(.cms-pitch--flip) .cms-pitch__visual-stage{
    width: min(100%, 28rem);
    margin-inline: auto;
  }
}

/* Hero title: one centered block */
[data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
  gap: 0.12em;
}

[data-sp-embed] .hero--cms-story .hero-title-float{
  display: block;
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
  text-align: center;
  white-space: nowrap;
}

/* Hero scales with viewport; floats closer, title larger */
[data-sp-embed] .hero--cms-story{
  min-height: min(100svh, 1100px);
  padding-bottom: clamp(3rem, 6vw, 6rem);
}

[data-sp-embed] .hero--cms-story .hero-center{
  z-index: 4;
  width: min(42rem, 52vw);
  max-width: min(42rem, 54vw);
  margin-top: clamp(1.25rem, 4.5vh, 4rem);
  padding-inline: clamp(0.5rem, 1.2vw, 1rem);
}

[data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
  font-size: clamp(2.45rem, 1.2rem + 3.8vw, 4.6rem);
  line-height: 1.18;
  gap: 0.14em;
  letter-spacing: 0.01em;
}

[data-sp-embed] .hero--cms-story .hero-brand-logo--under-title{
  margin-top: clamp(0.95rem, 1.8vw, 1.45rem);
}

[data-sp-embed] .hero--cms-story .hero-brand-logo--under-title .hero-brand-wordmark__full{
  font-size: clamp(1.35rem, 0.7rem + 1.6vw, 2.2rem);
  color: #374151;
  text-shadow: none;
}

[data-sp-embed] .hero--cms-story .hero-center .hero-actions{
  margin-top: clamp(1.25rem, 2.4vw, 1.9rem);
  gap: clamp(0.65rem, 1.2vw, 1rem);
}

[data-sp-embed] .hero--cms-story .hero-center .hero-actions .button{
  font-size: clamp(0.92rem, 0.75rem + 0.4vw, 1.08rem);
  padding: clamp(0.8rem, 0.55rem + 0.45vw, 1.05rem) clamp(1.15rem, 0.8rem + 0.9vw, 1.7rem);
}

/* Floats: scale up on large tabs, sit nearer center without covering type */
[data-sp-embed] .hero--cms-story .hero-float--ig{
  top: clamp(5.25rem, 9vh, 7.75rem);
  left: clamp(4vw, 10.5vw, 14rem);
  width: clamp(170px, 19.5vw, 340px);
}

[data-sp-embed] .hero--cms-story .hero-float--line{
  top: clamp(5.45rem, 9.5vh, 8rem);
  right: clamp(4vw, 10.5vw, 14rem);
  left: auto;
  width: clamp(160px, 18vw, 320px);
}

[data-sp-embed] .hero--cms-story .hero-float--fb{
  bottom: clamp(2.5rem, 7vh, 5.5rem);
  left: clamp(4.5vw, 11vw, 14.5rem);
  right: auto;
  top: auto;
  width: clamp(154px, 17.5vw, 305px);
}

[data-sp-embed] .hero--cms-story .hero-float--campaign{
  bottom: clamp(2.25rem, 6.5vh, 5.25rem);
  right: clamp(4.2vw, 10.8vw, 14.2rem);
  left: auto;
  top: auto;
  width: clamp(172px, 19.5vw, 345px);
}

@media (min-width: 1400px) {
  [data-sp-embed] .hero--cms-story .hero-center{
    width: min(46rem, 48vw);
    max-width: min(46rem, 48vw);
  }

  [data-sp-embed] .hero--cms-story .hero-float--ig, [data-sp-embed] .hero--cms-story .hero-float--campaign{
    width: clamp(260px, 18vw, 380px);
  }

  [data-sp-embed] .hero--cms-story .hero-float--line, [data-sp-embed] .hero--cms-story .hero-float--fb{
    width: clamp(245px, 16.5vw, 355px);
  }

  [data-sp-embed] .hero--cms-story .hero-float--ig, [data-sp-embed] .hero--cms-story .hero-float--line{
    left: unset;
  }

  [data-sp-embed] .hero--cms-story .hero-float--ig{
    left: clamp(6rem, 12vw, 16rem);
  }
  [data-sp-embed] .hero--cms-story .hero-float--line{
    right: clamp(6rem, 12vw, 16rem);
  }
  [data-sp-embed] .hero--cms-story .hero-float--fb{
    left: clamp(6.5rem, 12.5vw, 16.5rem);
  }
  [data-sp-embed] .hero--cms-story .hero-float--campaign{
    right: clamp(6.2rem, 12.2vw, 16.2rem);
  }
}

@media (max-width: 1100px) {
  [data-sp-embed] .hero--cms-story .hero-center{
    width: min(22rem, 46vw);
    max-width: min(22rem, 46vw);
  }

  [data-sp-embed] .hero--cms-story .hero-float--ig{
    left: clamp(1.5rem, 5vw, 4rem);
    width: clamp(168px, 20vw, 250px);
  }
  [data-sp-embed] .hero--cms-story .hero-float--line{
    right: clamp(1.5rem, 5vw, 4rem);
    width: clamp(158px, 18.5vw, 236px);
  }
  [data-sp-embed] .hero--cms-story .hero-float--fb{
    left: clamp(1.75rem, 5.5vw, 4.25rem);
    width: clamp(150px, 18vw, 228px);
  }
  [data-sp-embed] .hero--cms-story .hero-float--campaign{
    right: clamp(1.6rem, 5.2vw, 4.1rem);
    width: clamp(168px, 20vw, 250px);
  }
}

@media (max-width: 760px) {
  [data-sp-embed] .hero--cms-story .hero-center{
    width: min(16.5rem, 62vw);
    max-width: min(16.5rem, 62vw);
    margin-top: clamp(1rem, 3vh, 2rem);
  }

  [data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
    font-size: clamp(1.85rem, 7.2vw, 2.35rem);
  }

  [data-sp-embed] .hero--cms-story .hero-float--ig{
    top: 4.1rem;
    left: -0.35rem;
    width: clamp(138px, 40vw, 178px);
  }
  [data-sp-embed] .hero--cms-story .hero-float--line{
    top: 4.3rem;
    right: -0.35rem;
    width: clamp(130px, 38vw, 170px);
  }
  [data-sp-embed] .hero--cms-story .hero-float--fb{
    bottom: 0.2rem;
    left: -0.2rem;
    width: clamp(126px, 38vw, 166px);
  }
  [data-sp-embed] .hero--cms-story .hero-float--campaign{
    bottom: 0.1rem;
    right: -0.3rem;
    width: clamp(138px, 40vw, 178px);
  }
}

/* Brand above title again */
[data-sp-embed] .hero--cms-story .hero-brand-logo--above-title{
  display: flex;
  justify-content: center;
  width: auto;
  max-width: 100%;
  margin: 0 auto clamp(0.85rem, 1.6vw, 1.25rem);
}

[data-sp-embed] .hero--cms-story .hero-brand-logo--above-title .hero-brand-wordmark__full{
  font-size: clamp(1.35rem, 0.7rem + 1.6vw, 2.2rem);
  color: #374151;
  text-shadow: none;
}

/* Optical center: cancel letter-spacing trailing gap + slight left nudge */
[data-sp-embed] .hero--cms-story .hero-brand-logo--above-title, [data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
  transform: translateX(-0.22em);
}

[data-sp-embed] .hero--cms-story .hero-brand-logo--above-title .hero-brand-wordmark__full{
  letter-spacing: 0.04em;
  margin-inline-end: -0.04em;
  padding-inline: 0;
}

[data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
  letter-spacing: 0;
}

[data-sp-embed] .hero--cms-story .hero-title-float, [data-sp-embed] .hero--cms-story .hero-title-float + .hero-title-float{
  letter-spacing: 0.01em;
  margin-inline: auto -0.01em;
  text-indent: 0;
}

[data-sp-embed].js .hero--cms-story .hero-center.reveal:not(.visible) .hero-brand-logo--above-title{
  transform: translateX(-0.22em) translateY(1rem) scale(0.92);
}

[data-sp-embed].js .hero--cms-story .hero-center.reveal.visible .hero-brand-logo--above-title{
  animation: none;
  opacity: 1;
  transform: translateX(-0.22em);
}

@media (max-width: 760px) {
  [data-sp-embed] .hero--cms-story .hero-brand-logo--above-title, [data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
    transform: translateX(-0.18em);
  }

  [data-sp-embed].js .hero--cms-story .hero-center.reveal:not(.visible) .hero-brand-logo--above-title{
    transform: translateX(-0.18em) translateY(1rem) scale(0.92);
  }

  [data-sp-embed].js .hero--cms-story .hero-center.reveal.visible .hero-brand-logo--above-title{
    transform: translateX(-0.18em);
  }
}

/* Title too far right: reset bad margins, shift left; hero bg white */
[data-sp-embed]:has(.hero--cms-story), [data-sp-embed]:has(.hero--cms-story), [data-sp-embed] main:has(.hero--cms-story){
  background: #ffffff;
}

[data-sp-embed]:has(.hero--cms-story){
  --bg-hero: #ffffff;
  --paper: #ffffff;
  --bg-section: #ffffff;
}

[data-sp-embed] .hero--cms-story{
  background: #ffffff !important;
}

[data-sp-embed] .hero--cms-story .hero-brand-logo--above-title, [data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
  transform: translateX(-0.55em);
}

[data-sp-embed] .hero--cms-story .hero-title-float, [data-sp-embed] .hero--cms-story .hero-title-float + .hero-title-float{
  letter-spacing: 0;
  margin-inline: auto;
}

[data-sp-embed] .hero--cms-story .hero-brand-logo--above-title .hero-brand-wordmark__full{
  letter-spacing: 0.02em;
  margin-inline-end: 0;
}

[data-sp-embed].js .hero--cms-story .hero-center.reveal:not(.visible) .hero-brand-logo--above-title{
  transform: translateX(-0.55em) translateY(1rem) scale(0.92);
}

[data-sp-embed].js .hero--cms-story .hero-center.reveal.visible .hero-brand-logo--above-title{
  transform: translateX(-0.55em);
}

@media (max-width: 760px) {
  [data-sp-embed] .hero--cms-story .hero-brand-logo--above-title, [data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
    transform: translateX(-0.45em);
  }

  [data-sp-embed].js .hero--cms-story .hero-center.reveal:not(.visible) .hero-brand-logo--above-title{
    transform: translateX(-0.45em) translateY(1rem) scale(0.92);
  }

  [data-sp-embed].js .hero--cms-story .hero-center.reveal.visible .hero-brand-logo--above-title{
    transform: translateX(-0.45em);
  }
}

/* White from hero through Easy / AI bands */
[data-sp-embed]:has(.hero--cms-story), [data-sp-embed]:has(.hero--cms-story), [data-sp-embed] main:has(.hero--cms-story){
  background: #ffffff;
}

[data-sp-embed]:has(.hero--cms-story){
  --bg-hero: #ffffff;
  --paper: #ffffff;
  --bg-section: #ffffff;
}

[data-sp-embed] .hero--cms-story, [data-sp-embed] .hero--cms-story.section-band, [data-sp-embed] #nocode-platform.cms-pitch, [data-sp-embed] #ai-platform.cms-pitch{
  background: #ffffff !important;
}

/* Hero kicker: CDP・MAと連動 */
[data-sp-embed] .hero--cms-story .hero-kicker{
  margin: 0 auto 0.55rem;
  font-family: var(--font-sans);
  font-size: clamp(0.78rem, 0.55rem + 0.55vw, 0.95rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #6b7280;
  text-align: center;
  transform: translateX(-0.7em);
}

[data-sp-embed] .hero--cms-story .hero-brand-logo--above-title, [data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
  transform: translateX(-0.7em);
}

[data-sp-embed] .hero--cms-story .hero-title-float, [data-sp-embed] .hero--cms-story .hero-title-float + .hero-title-float{
  letter-spacing: 0;
  margin-inline: auto;
}

[data-sp-embed].js .hero--cms-story .hero-center.reveal:not(.visible) .hero-brand-logo--above-title{
  transform: translateX(-0.7em) translateY(1rem) scale(0.92);
}

[data-sp-embed].js .hero--cms-story .hero-center.reveal.visible .hero-brand-logo--above-title{
  animation: none;
  opacity: 1;
  transform: translateX(-0.7em);
}

@media (max-width: 760px) {
  [data-sp-embed] .hero--cms-story .hero-kicker, [data-sp-embed] .hero--cms-story .hero-brand-logo--above-title, [data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
    transform: translateX(-0.55em);
  }

  [data-sp-embed].js .hero--cms-story .hero-center.reveal:not(.visible) .hero-brand-logo--above-title{
    transform: translateX(-0.55em) translateY(1rem) scale(0.92);
  }

  [data-sp-embed].js .hero--cms-story .hero-center.reveal.visible .hero-brand-logo--above-title{
    transform: translateX(-0.55em);
  }
}

/* AI pitch image: larger */
[data-sp-embed] #ai-platform.cms-pitch .cms-pitch__inner{
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.75fr);
  max-width: min(1280px, calc(100% - 2rem));
  gap: clamp(1.25rem, 3vw, 2.5rem);
}

[data-sp-embed] #ai-platform .cms-pitch__visual-stage{
  width: min(100%, 46rem);
}

[data-sp-embed] #ai-platform .cms-pitch__visual-stage img{
  filter: drop-shadow(0 18px 36px rgba(15, 23, 42, 0.14));
}

@media (max-width: 760px) {
  [data-sp-embed] #ai-platform .cms-pitch__visual-stage{
    width: min(100%, 28rem);
  }
}

/* ===== CMS hero title: reset nudge hacks, true center, clean 2 lines ===== */
[data-sp-embed] .hero--cms-story .hero-center{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: min(48rem, 88vw);
  max-width: min(48rem, 88vw);
  margin-inline: auto;
  padding-inline: 1rem;
  transform: none !important;
}

[data-sp-embed] .hero--cms-story .hero-kicker, [data-sp-embed] .hero--cms-story .hero-brand-logo, [data-sp-embed] .hero--cms-story .hero-brand-logo--above-title, [data-sp-embed] .hero--cms-story .hero-center .hero-copy, [data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  transform: none !important;
}

[data-sp-embed] .hero--cms-story .hero-kicker{
  letter-spacing: 0.06em;
  margin-bottom: 0.55rem;
}

[data-sp-embed] .hero--cms-story .hero-brand-logo--above-title{
  display: flex;
  justify-content: center;
  margin-bottom: clamp(0.75rem, 1.4vw, 1.1rem);
}

[data-sp-embed] .hero--cms-story .hero-brand-logo--above-title .hero-brand-wordmark__full{
  display: inline-block;
  margin: 0;
  letter-spacing: 0.04em;
  text-align: center;
}

[data-sp-embed] .hero--cms-story .hero-center .hero-copy{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 0;
}

[data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.12em;
  width: auto;
  max-width: 100%;
  margin: 0 auto 0;
  letter-spacing: 0;
  font-size: clamp(2.1rem, 1.2rem + 3.2vw, 4.2rem);
  line-height: 1.25;
}

[data-sp-embed] .hero--cms-story .hero-title-float, [data-sp-embed] .hero--cms-story .hero-title-float + .hero-title-float{
  display: block;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  letter-spacing: 0;
  white-space: nowrap;
  text-align: center;
  text-wrap: unset;
}

[data-sp-embed].js .hero--cms-story .hero-center.reveal:not(.visible) .hero-brand-logo--above-title, [data-sp-embed].js .hero--cms-story .hero-center.reveal.visible .hero-brand-logo--above-title{
  animation: none !important;
  opacity: 1;
  transform: none !important;
}

[data-sp-embed].js .hero--cms-story .hero-center.reveal:not(.visible) .hero-kicker{
  opacity: 0;
}

[data-sp-embed].js .hero--cms-story .hero-center.reveal.visible .hero-kicker{
  opacity: 1;
}

[data-sp-embed] .hero--cms-story .hero-center .hero-actions{
  justify-content: center;
  width: 100%;
  margin-top: clamp(1.2rem, 2.2vw, 1.8rem);
}

@media (max-width: 760px) {
  [data-sp-embed] .hero--cms-story .hero-center{
    width: min(22rem, 92vw);
    max-width: min(22rem, 92vw);
  }

  [data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
    font-size: clamp(1.7rem, 6.6vw, 2.15rem);
  }
}

/* Remove kicker visuals; add space between title lines */
[data-sp-embed] .hero--cms-story .hero-kicker{
  display: none !important;
}

[data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
  gap: 0.38em;
}

[data-sp-embed] .hero--cms-story .hero-title-float + .hero-title-float{
  margin-top: 0;
}

/* AI pitch image: even larger */
[data-sp-embed] #ai-platform.cms-pitch .cms-pitch__inner{
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.6fr);
  max-width: min(1400px, calc(100% - 1.25rem));
  gap: clamp(1rem, 2.5vw, 2rem);
}

[data-sp-embed] #ai-platform .cms-pitch__visual-stage{
  width: min(100%, 54rem);
  max-width: none;
}

[data-sp-embed] #ai-platform .cms-pitch__visual-stage img{
  width: 100%;
  max-width: none;
  transform: scale(1.06);
  transform-origin: center center;
}

@media (max-width: 760px) {
  [data-sp-embed] #ai-platform .cms-pitch__visual-stage{
    width: min(100%, 34rem);
  }

  [data-sp-embed] #ai-platform .cms-pitch__visual-stage img{
    transform: scale(1.08);
  }
}

/* Easy / AI: same width, equal left-right columns */
[data-sp-embed] .cms-pitch__inner, [data-sp-embed] .cms-pitch--flip .cms-pitch__inner, [data-sp-embed] #ai-platform.cms-pitch .cms-pitch__inner{
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: clamp(2rem, 4vw, 3.5rem) !important;
  max-width: min(1200px, calc(100% - 8rem)) !important;
  margin-inline: auto;
  align-items: center;
}

[data-sp-embed] .cms-pitch__copy, [data-sp-embed] .cms-pitch--flip .cms-pitch__copy{
  max-width: none;
  width: 100%;
}

[data-sp-embed] .cms-pitch__visual, [data-sp-embed] .cms-pitch--flip .cms-pitch__visual, [data-sp-embed] #ai-platform .cms-pitch__visual{
  width: 100%;
  max-width: none;
}

[data-sp-embed] .cms-pitch__visual-stage, [data-sp-embed] .cms-pitch--flip .cms-pitch__visual-stage, [data-sp-embed] .cms-pitch:not(.cms-pitch--flip) .cms-pitch__visual-stage, [data-sp-embed] #ai-platform .cms-pitch__visual-stage{
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
}

[data-sp-embed] #ai-platform .cms-pitch__visual-stage img{
  transform: none !important;
  width: 100%;
  max-width: none;
}

@media (max-width: 760px) {
  [data-sp-embed] .cms-pitch__inner, [data-sp-embed] .cms-pitch--flip .cms-pitch__inner, [data-sp-embed] #ai-platform.cms-pitch .cms-pitch__inner{
    grid-template-columns: 1fr !important;
    max-width: min(40rem, calc(100% - 2rem)) !important;
    gap: clamp(1.25rem, 4vw, 2rem) !important;
  }
}

/* AI image larger, keep same overall section width as Easy */
[data-sp-embed] #ai-platform.cms-pitch .cms-pitch__inner{
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr) !important;
}

[data-sp-embed] #ai-platform .cms-pitch__visual{
  overflow: visible;
}

[data-sp-embed] #ai-platform .cms-pitch__visual-stage{
  width: 112% !important;
  max-width: none !important;
  margin-left: -4% !important;
  margin-right: 0 !important;
}

[data-sp-embed] #ai-platform .cms-pitch__visual-stage img{
  transform: none !important;
  width: 100%;
}

@media (max-width: 760px) {
  [data-sp-embed] #ai-platform.cms-pitch .cms-pitch__inner{
    grid-template-columns: 1fr !important;
  }

  [data-sp-embed] #ai-platform .cms-pitch__visual-stage{
    width: min(100%, 36rem) !important;
    margin-inline: auto !important;
  }
}

/* ===== Easy / AI: mirrored equal layout (final) ===== */
[data-sp-embed] #nocode-platform.cms-pitch, [data-sp-embed] #ai-platform.cms-pitch{
  padding-top: clamp(3.25rem, 6vw, 5.5rem);
  padding-bottom: clamp(3.25rem, 6vw, 5.5rem);
}

[data-sp-embed] #nocode-platform .cms-pitch__inner, [data-sp-embed] #ai-platform.cms-pitch .cms-pitch__inner, [data-sp-embed] #ai-platform.cms-pitch--flip .cms-pitch__inner{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: clamp(2rem, 4.5vw, 4rem) !important;
  align-items: center;
  max-width: min(1120px, calc(100% - 8rem)) !important;
  margin-inline: auto;
  box-sizing: border-box;
}

[data-sp-embed] #nocode-platform .cms-pitch__copy, [data-sp-embed] #ai-platform .cms-pitch__copy{
  width: 100%;
  max-width: none;
}

[data-sp-embed] #nocode-platform .cms-pitch__visual, [data-sp-embed] #ai-platform .cms-pitch__visual{
  width: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

[data-sp-embed] #nocode-platform .cms-pitch__visual-stage, [data-sp-embed] #ai-platform .cms-pitch__visual-stage{
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-sp-embed] #nocode-platform .cms-pitch__visual-stage img, [data-sp-embed] #ai-platform .cms-pitch__visual-stage img{
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
  transform: none !important;
}

/* Easy: text left / image right — image hugs right like a mirror of AI */
[data-sp-embed] #nocode-platform .cms-pitch__visual{
  justify-content: flex-end;
}

[data-sp-embed] #nocode-platform .cms-pitch__copy{
  align-items: flex-start;
  text-align: left;
}

/* AI: image left / text right — same column weight as Easy */
[data-sp-embed] #ai-platform .cms-pitch__visual{
  justify-content: flex-start;
}

[data-sp-embed] #ai-platform .cms-pitch__copy{
  align-items: flex-end;
  text-align: right;
}

@media (max-width: 760px) {
  [data-sp-embed] #nocode-platform .cms-pitch__inner, [data-sp-embed] #ai-platform.cms-pitch .cms-pitch__inner{
    grid-template-columns: 1fr !important;
    max-width: min(40rem, calc(100% - 2rem)) !important;
    gap: 1.5rem !important;
  }

  [data-sp-embed] #nocode-platform .cms-pitch__visual, [data-sp-embed] #ai-platform .cms-pitch__visual, [data-sp-embed] #nocode-platform .cms-pitch__copy, [data-sp-embed] #ai-platform .cms-pitch__copy{
    justify-content: center;
    align-items: center;
    text-align: center;
  }
}

/* AI image larger while keeping Easy/AI shared outer width */
[data-sp-embed] #ai-platform .cms-pitch__visual-stage{
  width: 128% !important;
  max-width: none !important;
  margin-left: -6% !important;
  margin-right: -22% !important;
}

[data-sp-embed] #ai-platform .cms-pitch__visual-stage img{
  width: 100%;
  transform: none !important;
}

[data-sp-embed] #ai-platform .cms-pitch__visual{
  overflow: visible;
  z-index: 1;
}

[data-sp-embed] #ai-platform .cms-pitch__copy{
  position: relative;
  z-index: 2;
}

@media (max-width: 760px) {
  [data-sp-embed] #ai-platform .cms-pitch__visual-stage{
    width: min(108%, 36rem) !important;
    margin-inline: auto !important;
  }
}

/* AI image: larger still */
[data-sp-embed] #ai-platform .cms-pitch__visual-stage{
  width: 158% !important;
  max-width: none !important;
  margin-left: -10% !important;
  margin-right: -48% !important;
}

[data-sp-embed] #ai-platform .cms-pitch__visual-stage img{
  width: 100%;
  transform: scale(1.08) !important;
  transform-origin: center left;
}

@media (max-width: 760px) {
  [data-sp-embed] #ai-platform .cms-pitch__visual-stage{
    width: min(118%, 40rem) !important;
    margin-inline: auto !important;
  }

  [data-sp-embed] #ai-platform .cms-pitch__visual-stage img{
    transform: scale(1.05) !important;
    transform-origin: center center;
  }
}

/* ===== Easy / AI visual balance (shared frame, AI image larger) ===== */
[data-sp-embed] #nocode-platform.cms-pitch, [data-sp-embed] #ai-platform.cms-pitch{
  padding-top: clamp(3rem, 5.5vw, 5rem);
  padding-bottom: clamp(3rem, 5.5vw, 5rem);
}

[data-sp-embed] #nocode-platform .cms-pitch__inner, [data-sp-embed] #ai-platform .cms-pitch__inner{
  max-width: min(1200px, calc(100% - 8rem)) !important;
  margin-inline: auto;
  gap: clamp(1.75rem, 3.5vw, 3rem) !important;
  align-items: center;
}

/* Easy: text :: image ≈ 38 : 62 */
[data-sp-embed] #nocode-platform .cms-pitch__inner{
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.35fr) !important;
}

[data-sp-embed] #nocode-platform .cms-pitch__visual{
  justify-content: flex-end;
}

[data-sp-embed] #nocode-platform .cms-pitch__visual-stage{
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

[data-sp-embed] #nocode-platform .cms-pitch__visual-stage img{
  width: 100%;
  transform: none !important;
}

/* AI: image :: text ≈ 68 : 32 — same outer width as Easy */
[data-sp-embed] #ai-platform .cms-pitch__inner{
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 0.8fr) !important;
}

[data-sp-embed] #ai-platform .cms-pitch__visual{
  justify-content: center;
  overflow: visible;
  z-index: 1;
}

[data-sp-embed] #ai-platform .cms-pitch__visual-stage{
  width: 118% !important;
  max-width: none !important;
  margin-left: -4% !important;
  margin-right: -14% !important;
}

[data-sp-embed] #ai-platform .cms-pitch__visual-stage img{
  width: 100%;
  transform: scale(1.12) !important;
  transform-origin: center center;
}

[data-sp-embed] #ai-platform .cms-pitch__copy{
  position: relative;
  z-index: 2;
  padding-left: 0.5rem;
}

@media (max-width: 760px) {
  [data-sp-embed] #nocode-platform .cms-pitch__inner, [data-sp-embed] #ai-platform .cms-pitch__inner{
    grid-template-columns: 1fr !important;
    max-width: min(40rem, calc(100% - 2rem)) !important;
  }

  [data-sp-embed] #ai-platform .cms-pitch__visual-stage{
    width: min(112%, 38rem) !important;
    margin-inline: auto !important;
  }

  [data-sp-embed] #ai-platform .cms-pitch__visual-stage img{
    transform: scale(1.06) !important;
  }
}

/* Longer hero title lines */
[data-sp-embed] .hero--cms-story .hero-center{
  width: min(52rem, 92vw);
  max-width: min(52rem, 92vw);
}

[data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
  font-size: clamp(1.85rem, 1rem + 2.6vw, 3.6rem);
  gap: 0.42em;
}

@media (max-width: 760px) {
  [data-sp-embed] .hero--cms-story .hero-center{
    width: min(22rem, 92vw);
    max-width: min(22rem, 92vw);
  }

  [data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
    font-size: clamp(1.35rem, 5.2vw, 1.85rem);
  }

  [data-sp-embed] .hero--cms-story .hero-title-float{
    white-space: nowrap;
  }
}

/* SAKINA CMS higher + more space before title */
[data-sp-embed] .hero--cms-story .hero-center{
  margin-top: clamp(0.25rem, 1.5vh, 1.25rem);
}

[data-sp-embed] .hero--cms-story .hero-brand-logo--above-title{
  margin-top: 0;
  margin-bottom: clamp(1.35rem, 2.8vw, 2.25rem);
}

[data-sp-embed] .hero--cms-story .hero-center .hero-copy{
  margin-top: 0;
}

[data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
  margin-top: 0;
}

/* Hero title larger */
[data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
  font-size: clamp(2.55rem, 1.35rem + 4.2vw, 5rem) !important;
  line-height: 1.18;
  gap: 0.4em;
}

@media (max-width: 760px) {
  [data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
    font-size: clamp(1.95rem, 7.6vw, 2.55rem) !important;
  }
}

/* Hero CTAs a bit lower */
[data-sp-embed] .hero--cms-story .hero-center .hero-actions{
  margin-top: clamp(1.85rem, 3.2vw, 2.75rem) !important;
}

/* Easy: subtitle left-aligned under Easy */
[data-sp-embed] #nocode-platform .cms-pitch__copy, [data-sp-embed] #nocode-platform .showcase-copy{
  align-items: flex-start;
  text-align: left;
}

[data-sp-embed] #nocode-platform .platform-stage__tagline, [data-sp-embed] #nocode-platform .showcase-copy .platform-stage__tagline, [data-sp-embed] #nocode-platform .platform-stage__tagline [data-stage-subtitle]{
  text-align: left !important;
  margin-left: 0;
  margin-right: auto;
  width: 100%;
  max-width: none;
}

[data-sp-embed] #nocode-platform .platform-stage__tagline [data-stage-subtitle]{
  display: inline-block;
}

/* ===== Apple-like soft white atmosphere: hero → Easy → AI ===== */
[data-sp-embed]:has(.hero--cms-story), [data-sp-embed]:has(.hero--cms-story){
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(255, 255, 255, 1) 0%, rgba(248, 249, 251, 0.96) 42%, rgba(244, 245, 247, 1) 100%),
    #f5f6f8;
}

[data-sp-embed]:has(.hero--cms-story){
  --bg-hero: transparent;
  --paper: #f7f8fa;
  --bg-section: #f7f8fa;
}

[data-sp-embed] main:has(.hero--cms-story){
  background: transparent;
}

[data-sp-embed] .hero--cms-story, [data-sp-embed] .hero--cms-story.section-band, [data-sp-embed] #nocode-platform.cms-pitch, [data-sp-embed] #ai-platform.cms-pitch{
  position: relative;
  isolation: isolate;
  background: transparent !important;
}

/* Shared soft canvas behind hero + Easy + AI */
[data-sp-embed] .hero--cms-story::before, [data-sp-embed] #nocode-platform.cms-pitch::before, [data-sp-embed] #ai-platform.cms-pitch::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(68% 58% at 18% 22%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 62%),
    radial-gradient(64% 54% at 84% 18%, rgba(236, 242, 255, 0.55) 0%, rgba(236, 242, 255, 0) 64%),
    radial-gradient(70% 58% at 72% 78%, rgba(255, 241, 246, 0.42) 0%, rgba(255, 241, 246, 0) 66%),
    radial-gradient(90% 70% at 50% 48%, rgba(255, 255, 255, 0.72) 0%, rgba(247, 248, 250, 0.35) 55%, rgba(243, 244, 246, 0) 100%),
    linear-gradient(180deg, #ffffff 0%, #f7f8fa 48%, #f3f4f6 100%);
}

[data-sp-embed] .hero--cms-story > *, [data-sp-embed] #nocode-platform.cms-pitch > *, [data-sp-embed] #ai-platform.cms-pitch > *{
  position: relative;
  z-index: 1;
}

/* Soft vignette at section seams (Apple product-page feel) */
[data-sp-embed] .hero--cms-story::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: clamp(4rem, 10vw, 7rem);
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(247, 248, 250, 0) 0%, rgba(247, 248, 250, 0.85) 100%);
}

[data-sp-embed] #ai-platform.cms-pitch::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(3rem, 8vw, 5.5rem);
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(243, 244, 246, 0) 0%, rgba(248, 249, 250, 0.9) 100%);
}

/* Keep float composites readable on soft white */
[data-sp-embed] .hero--cms-story .hero-float img{
  filter: drop-shadow(0 18px 34px rgba(15, 23, 42, 0.1));
}

/* ===== Easy: CSS laptop motion (Create → Analyze → Manage) ===== */
[data-sp-embed] #nocode-platform .cms-pitch__visual-stage--laptop{
  width: 100% !important;
  max-width: min(100%, 40rem) !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  perspective: 1400px;
}

[data-sp-embed] .cms-laptop{
  --create: #db2777;
  --analyze: #7e22ce;
  --manage: #15803d;
  width: 100%;
  user-select: none;
}

[data-sp-embed] .cms-laptop__lid{
  position: relative;
  border-radius: 1.05rem 1.05rem 0.55rem 0.55rem;
  padding: 0.72rem 0.72rem 0.55rem;
  background: linear-gradient(165deg, #d7dbe2 0%, #f4f5f7 38%, #c5cad3 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.75) inset,
    0 24px 48px rgba(15, 23, 42, 0.14);
}

[data-sp-embed] .cms-laptop__bezel{
  position: relative;
  border-radius: 0.72rem;
  padding: 0.7rem 0.55rem 0.5rem;
  background: #0b0f16;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

[data-sp-embed] .cms-laptop__camera{
  position: absolute;
  top: 0.28rem;
  left: 50%;
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 999px;
  transform: translateX(-50%);
  background: radial-gradient(circle at 35% 35%, #4b5563, #111827 70%);
}

[data-sp-embed] .cms-laptop__screen{
  position: relative;
  overflow: hidden;
  border-radius: 0.4rem;
  aspect-ratio: 16 / 10.4;
  background: #f8fafc;
}

[data-sp-embed] .cms-laptop__chrome{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem 0.55rem;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

[data-sp-embed] .cms-laptop__brand{
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #111827;
}

[data-sp-embed] .cms-laptop__logo{
  width: 0.72rem;
  height: 0.72rem;
  border-radius: 999px;
  background: linear-gradient(145deg, #fb7185, #e11d48);
  box-shadow: 0 0 0 2px rgba(225, 29, 72, 0.12);
}

[data-sp-embed] .cms-laptop__tabs{
  display: inline-flex;
  gap: 0.25rem;
}

[data-sp-embed] .cms-laptop__tab{
  padding: 0.18rem 0.42rem;
  border-radius: 999px;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #94a3b8;
  background: #f1f5f9;
  opacity: 0.7;
}

[data-sp-embed] .cms-laptop__tab--create{
  animation: cms-tab-create 12s infinite;
}
[data-sp-embed] .cms-laptop__tab--analyze{
  animation: cms-tab-analyze 12s infinite;
}
[data-sp-embed] .cms-laptop__tab--manage{
  animation: cms-tab-manage 12s infinite;
}

@keyframes cms-tab-create {
  0%, 30% { opacity: 1; color: #fff; background: var(--create); }
  33%, 100% { opacity: 0.7; color: #94a3b8; background: #f1f5f9; }
}
@keyframes cms-tab-analyze {
  0%, 30% { opacity: 0.7; color: #94a3b8; background: #f1f5f9; }
  33%, 63% { opacity: 1; color: #fff; background: var(--analyze); }
  66%, 100% { opacity: 0.7; color: #94a3b8; background: #f1f5f9; }
}
@keyframes cms-tab-manage {
  0%, 63% { opacity: 0.7; color: #94a3b8; background: #f1f5f9; }
  66%, 96% { opacity: 1; color: #fff; background: var(--manage); }
  100% { opacity: 0.7; color: #94a3b8; background: #f1f5f9; }
}

[data-sp-embed] .cms-laptop__viewport{
  position: relative;
  height: calc(100% - 2rem);
  min-height: 13.5rem;
  background:
    radial-gradient(90% 80% at 15% 0%, rgba(255, 255, 255, 0.9), transparent 55%),
    linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
}

[data-sp-embed] .cms-laptop__slide{
  position: absolute;
  inset: 0;
  padding: 0.7rem 0.75rem 0.8rem;
  opacity: 0;
  transform: translateY(8px) scale(0.985);
  pointer-events: none;
}

[data-sp-embed] .cms-laptop__slide--create{
  animation: cms-slide-create 12s infinite;
}
[data-sp-embed] .cms-laptop__slide--analyze{
  animation: cms-slide-analyze 12s infinite;
}
[data-sp-embed] .cms-laptop__slide--manage{
  animation: cms-slide-manage 12s infinite;
}

@keyframes cms-slide-create {
  0%, 28% { opacity: 1; transform: translateY(0) scale(1); }
  33%, 100% { opacity: 0; transform: translateY(10px) scale(0.985); }
}
@keyframes cms-slide-analyze {
  0%, 30% { opacity: 0; transform: translateY(10px) scale(0.985); }
  33%, 61% { opacity: 1; transform: translateY(0) scale(1); }
  66%, 100% { opacity: 0; transform: translateY(10px) scale(0.985); }
}
@keyframes cms-slide-manage {
  0%, 63% { opacity: 0; transform: translateY(10px) scale(0.985); }
  66%, 94% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(10px) scale(0.985); }
}

[data-sp-embed] .cms-laptop__slide-head{
  margin-bottom: 0.55rem;
}

[data-sp-embed] .cms-laptop__eyebrow{
  margin: 0 0 0.18rem;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

[data-sp-embed] .cms-laptop__slide--create .cms-laptop__eyebrow{ color: var(--create); }
[data-sp-embed] .cms-laptop__slide--analyze .cms-laptop__eyebrow{ color: var(--analyze); }
[data-sp-embed] .cms-laptop__slide--manage .cms-laptop__eyebrow{ color: var(--manage); }

[data-sp-embed] .cms-laptop__slide-head h3{
  margin: 0;
  font-size: clamp(0.82rem, 1.5vw, 1rem);
  font-weight: 700;
  color: #111827;
  letter-spacing: 0.01em;
}

/* Create screen */
[data-sp-embed] .cms-create{
  position: relative;
  display: grid;
  gap: 0.42rem;
  padding: 0.65rem;
  border-radius: 0.7rem;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(219, 39, 119, 0.14);
  box-shadow: 0 10px 24px rgba(219, 39, 119, 0.08);
  overflow: hidden;
}

[data-sp-embed] .cms-create__field{
  display: grid;
  gap: 0.12rem;
  padding: 0.4rem 0.5rem;
  border-radius: 0.45rem;
  background: #f8fafc;
}

[data-sp-embed] .cms-create__field span{
  font-size: 0.55rem;
  font-weight: 600;
  color: #94a3b8;
}

[data-sp-embed] .cms-create__field strong, [data-sp-embed] .cms-create__typing{
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  color: #1f2937;
}

[data-sp-embed] .cms-create__typing{
  width: 0;
  white-space: nowrap;
  overflow: hidden;
  border-right: 2px solid var(--create);
  animation:
    cms-typing 12s infinite steps(22, end),
    cms-caret 0.8s step-end infinite;
}

@keyframes cms-typing {
  0%, 4% { width: 0; }
  18%, 28% { width: 100%; }
  33%, 100% { width: 100%; }
}

@keyframes cms-caret {
  50% { border-color: transparent; }
}

[data-sp-embed] .cms-create__btn{
  justify-self: end;
  margin-top: 0.15rem;
  border: 0;
  border-radius: 999px;
  padding: 0.38rem 0.75rem;
  font-size: 0.62rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #f472b6, var(--create));
  box-shadow: 0 8px 16px rgba(219, 39, 119, 0.22);
  animation: cms-btn-pulse 12s infinite;
}

@keyframes cms-btn-pulse {
  0%, 16% { transform: scale(1); }
  20%, 24% { transform: scale(1.05); }
  28%, 100% { transform: scale(1); }
}

[data-sp-embed] .cms-create__spark{
  position: absolute;
  top: -20%;
  left: -30%;
  width: 40%;
  height: 160%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-18deg) translateX(-120%);
  animation: cms-spark 12s infinite;
}

@keyframes cms-spark {
  0%, 10% { transform: skewX(-18deg) translateX(-120%); }
  22% { transform: skewX(-18deg) translateX(280%); }
  100% { transform: skewX(-18deg) translateX(280%); }
}

/* Analyze screen */
[data-sp-embed] .cms-analyze{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
}

[data-sp-embed] .cms-analyze__metric{
  padding: 0.55rem 0.6rem;
  border-radius: 0.65rem;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(126, 34, 206, 0.14);
  box-shadow: 0 8px 18px rgba(126, 34, 206, 0.07);
}

[data-sp-embed] .cms-analyze__metric span{
  display: block;
  font-size: 0.55rem;
  font-weight: 700;
  color: #a78bfa;
  letter-spacing: 0.06em;
}

[data-sp-embed] .cms-analyze__metric strong{
  display: block;
  margin-top: 0.15rem;
  font-size: 1.05rem;
  color: #3b0764;
}

[data-sp-embed] .cms-analyze__chart{
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-end;
  gap: 0.35rem;
  height: 5.2rem;
  padding: 0.55rem 0.6rem 0.45rem;
  border-radius: 0.65rem;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(126, 34, 206, 0.12);
}

[data-sp-embed] .cms-analyze__chart span{
  flex: 1;
  height: var(--h);
  border-radius: 0.35rem 0.35rem 0.2rem 0.2rem;
  background: linear-gradient(180deg, #d8b4fe 0%, var(--analyze) 100%);
  transform-origin: bottom;
  animation: cms-bar 12s infinite ease;
}

[data-sp-embed] .cms-analyze__chart span:nth-child(2){ animation-delay: 0.05s; }
[data-sp-embed] .cms-analyze__chart span:nth-child(3){ animation-delay: 0.1s; }
[data-sp-embed] .cms-analyze__chart span:nth-child(4){ animation-delay: 0.15s; }
[data-sp-embed] .cms-analyze__chart span:nth-child(5){ animation-delay: 0.2s; }
[data-sp-embed] .cms-analyze__chart span:nth-child(6){ animation-delay: 0.25s; }

@keyframes cms-bar {
  0%, 30% { transform: scaleY(0.15); opacity: 0.35; }
  38%, 63% { transform: scaleY(1); opacity: 1; }
  70%, 100% { transform: scaleY(0.15); opacity: 0.35; }
}

[data-sp-embed] .cms-analyze__note{
  grid-column: 1 / -1;
  margin: 0.05rem 0 0;
  font-size: 0.62rem;
  font-weight: 600;
  color: #6b7280;
}

/* Manage screen */
[data-sp-embed] .cms-manage{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
}

[data-sp-embed] .cms-manage__card{
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  gap: 0.4rem;
  align-items: center;
  padding: 0.4rem;
  border-radius: 0.55rem;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(21, 128, 61, 0.12);
  box-shadow: 0 8px 16px rgba(21, 128, 61, 0.06);
  animation: cms-card-in 12s infinite;
}

[data-sp-embed] .cms-manage__card:nth-child(2){ animation-delay: 0.08s; }
[data-sp-embed] .cms-manage__card:nth-child(3){ animation-delay: 0.16s; }
[data-sp-embed] .cms-manage__card:nth-child(4){ animation-delay: 0.24s; }

@keyframes cms-card-in {
  0%, 63% { opacity: 0; transform: translateY(8px); }
  70%, 94% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(8px); }
}

[data-sp-embed] .cms-manage__thumb{
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 0.4rem;
}

[data-sp-embed] .cms-manage__thumb--a{ background: linear-gradient(145deg, #fda4af, #fb7185); }
[data-sp-embed] .cms-manage__thumb--b{ background: linear-gradient(145deg, #c4b5fd, #a78bfa); }
[data-sp-embed] .cms-manage__thumb--c{ background: linear-gradient(145deg, #86efac, #4ade80); }
[data-sp-embed] .cms-manage__thumb--d{ background: linear-gradient(145deg, #93c5fd, #60a5fa); }

[data-sp-embed] .cms-manage__card strong{
  display: block;
  font-size: 0.58rem;
  color: #111827;
  letter-spacing: 0.02em;
}

[data-sp-embed] .cms-manage__card span{
  display: inline-block;
  margin-top: 0.15rem;
  padding: 0.08rem 0.28rem;
  border-radius: 999px;
  font-size: 0.48rem;
  font-weight: 700;
  color: #15803d;
  background: rgba(34, 197, 94, 0.12);
}

[data-sp-embed] .cms-laptop__hinge{
  height: 0.35rem;
  margin: 0 4%;
  border-radius: 0 0 0.2rem 0.2rem;
  background: linear-gradient(180deg, #9aa3b2, #7b8494);
}

[data-sp-embed] .cms-laptop__base{
  position: relative;
  height: 0.85rem;
  margin-top: -1px;
  border-radius: 0 0 0.85rem 0.85rem;
  background: linear-gradient(180deg, #e8eaef 0%, #c7ccd6 55%, #aeb5c1 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 16px 28px rgba(15, 23, 42, 0.12);
}

[data-sp-embed] .cms-laptop__notch{
  position: absolute;
  top: 0.18rem;
  left: 50%;
  width: min(28%, 7.5rem);
  height: 0.28rem;
  border-radius: 999px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #98a0ad, #7f8796);
}

@media (max-width: 760px) {
  [data-sp-embed] #nocode-platform .cms-pitch__visual-stage--laptop{
    max-width: min(100%, 28rem) !important;
    margin-inline: auto !important;
  }

  /* Keep Create/Analyze/Manage animation fully inside the laptop screen */
  [data-sp-embed] .cms-laptop__lid{
    padding: 0.55rem 0.55rem 0.42rem;
  }

  [data-sp-embed] .cms-laptop__bezel{
    padding: 0.55rem 0.4rem 0.36rem;
  }

  [data-sp-embed] .cms-laptop__screen{
    aspect-ratio: 16 / 11;
  }

  [data-sp-embed] .cms-laptop__chrome{
    padding: 0.3rem 0.4rem;
    gap: 0.35rem;
  }

  [data-sp-embed] .cms-laptop__brand{
    font-size: 0.6rem;
  }

  [data-sp-embed] .cms-laptop__logo{
    width: 0.62rem;
    height: 0.62rem;
  }

  [data-sp-embed] .cms-laptop__tab{
    padding: 0.14rem 0.34rem;
    font-size: 0.52rem;
  }

  [data-sp-embed] .cms-laptop__viewport{
    height: calc(100% - 1.55rem);
    min-height: 0;
  }

  [data-sp-embed] .cms-laptop__slide{
    padding: 0.42rem 0.48rem 0.38rem;
    display: flex;
    flex-direction: column;
  }

  [data-sp-embed] .cms-laptop__slide-head{
    margin-bottom: 0.32rem;
    flex-shrink: 0;
  }

  [data-sp-embed] .cms-laptop__eyebrow{
    margin-bottom: 0.1rem;
    font-size: 0.52rem;
  }

  [data-sp-embed] .cms-laptop__slide-head h3{
    font-size: 0.76rem;
  }

  [data-sp-embed] .cms-create{
    gap: 0.28rem;
    padding: 0.42rem;
    flex: 1;
    min-height: 0;
  }

  [data-sp-embed] .cms-create__field{
    padding: 0.28rem 0.38rem;
  }

  [data-sp-embed] .cms-create__field span{
    font-size: 0.48rem;
  }

  [data-sp-embed] .cms-create__field strong, [data-sp-embed] .cms-create__typing{
    font-size: 0.62rem;
  }

  [data-sp-embed] .cms-create__btn{
    margin-top: 0.05rem;
    padding: 0.28rem 0.58rem;
    font-size: 0.55rem;
  }

  [data-sp-embed] .cms-analyze{
    gap: 0.3rem;
    flex: 1;
    min-height: 0;
    align-content: start;
  }

  [data-sp-embed] .cms-analyze__metric{
    padding: 0.38rem 0.42rem;
  }

  [data-sp-embed] .cms-analyze__metric span{
    font-size: 0.48rem;
  }

  [data-sp-embed] .cms-analyze__metric strong{
    margin-top: 0.08rem;
    font-size: 0.88rem;
  }

  [data-sp-embed] .cms-analyze__chart{
    height: 3.35rem;
    gap: 0.28rem;
    padding: 0.38rem 0.42rem 0.32rem;
  }

  [data-sp-embed] .cms-analyze__note{
    margin-top: 0;
    font-size: 0.55rem;
  }

  [data-sp-embed] .cms-manage{
    gap: 0.26rem;
    flex: 1;
    min-height: 0;
    align-content: start;
  }

  [data-sp-embed] .cms-manage__card{
    grid-template-columns: 1.55rem 1fr;
    gap: 0.28rem;
    padding: 0.26rem;
  }

  [data-sp-embed] .cms-manage__thumb{
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 0.32rem;
  }

  [data-sp-embed] .cms-manage__card strong{
    font-size: 0.48rem;
    line-height: 1.2;
  }

  [data-sp-embed] .cms-manage__card span{
    margin-top: 0.08rem;
    padding: 0.05rem 0.22rem;
    font-size: 0.42rem;
  }
}

@media (max-width: 420px) {
  [data-sp-embed] .cms-laptop__screen{
    aspect-ratio: 16 / 11.4;
  }

  [data-sp-embed] .cms-laptop__slide{
    padding: 0.36rem 0.4rem 0.32rem;
  }

  [data-sp-embed] .cms-manage__card{
    grid-template-columns: 1.4rem 1fr;
    gap: 0.22rem;
    padding: 0.22rem;
  }

  [data-sp-embed] .cms-manage__thumb{
    width: 1.4rem;
    height: 1.4rem;
  }

  [data-sp-embed] .cms-analyze__chart{
    height: 3rem;
  }
}

/* ===== CMS hero: scatter to 4 corners + slow orbit (2026-08-10) ===== */
[data-sp-embed] .hero--cms-story{
  --cms-hero-float-side: clamp(-0.35rem, 0.4vw, 0.85rem);
  --cms-hero-float-top: clamp(4.4rem, 7.5vh, 6.5rem);
  --cms-hero-float-bottom: clamp(0.65rem, 2.8vh, 2.25rem);
  --cms-hero-float-w-lg: clamp(148px, 13.5vw, 236px);
  --cms-hero-float-w-sm: clamp(136px, 12.5vw, 216px);
  --cms-orbit-r: 14px;
  min-height: min(100svh, 980px);
  overflow: hidden;
}

[data-sp-embed] .hero--cms-story .hero-center{
  z-index: 5;
  width: min(28rem, 42vw) !important;
  max-width: min(28rem, 42vw) !important;
  margin-top: clamp(0.35rem, 1.8vh, 1.5rem) !important;
  padding-inline: 0.75rem !important;
}

[data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
  width: auto !important;
  max-width: 100% !important;
  font-size: clamp(2rem, 1.1rem + 2.2vw, 3.35rem) !important;
  line-height: 1.22 !important;
  gap: 0.28em !important;
}

[data-sp-embed] .hero--cms-story .hero-title-float, [data-sp-embed] .hero--cms-story .hero-title-float + .hero-title-float{
  white-space: nowrap;
}

[data-sp-embed] .hero--cms-story .hero-center .hero-actions{
  margin-top: clamp(1.5rem, 2.8vw, 2.35rem) !important;
}

/* TL / TR / BL / BR — further into corners so center copy breathes */
[data-sp-embed] .hero--cms-story .hero-float--ig{
  top: var(--cms-hero-float-top) !important;
  left: var(--cms-hero-float-side) !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--cms-hero-float-w-lg) !important;
  --cms-orbit-r: 16px;
}

[data-sp-embed] .hero--cms-story .hero-float--line{
  top: calc(var(--cms-hero-float-top) + 0.65rem) !important;
  right: var(--cms-hero-float-side) !important;
  left: auto !important;
  bottom: auto !important;
  width: var(--cms-hero-float-w-sm) !important;
  --cms-orbit-r: 13px;
}

[data-sp-embed] .hero--cms-story .hero-float--fb{
  bottom: var(--cms-hero-float-bottom) !important;
  left: calc(var(--cms-hero-float-side) + 0.35rem) !important;
  right: auto !important;
  top: auto !important;
  width: var(--cms-hero-float-w-sm) !important;
  --cms-orbit-r: 15px;
}

[data-sp-embed] .hero--cms-story .hero-float--campaign{
  bottom: calc(var(--cms-hero-float-bottom) + 0.35rem) !important;
  right: calc(var(--cms-hero-float-side) + 0.2rem) !important;
  left: auto !important;
  top: auto !important;
  width: var(--cms-hero-float-w-lg) !important;
  --cms-orbit-r: 12px;
}

/* translate-based circle so tilt transform stays independent */
@keyframes cms-float-orbit {
  0% {
    translate: 0 calc(var(--cms-orbit-r, 14px) * -1);
  }
  12.5% {
    translate:
      calc(var(--cms-orbit-r, 14px) * 0.707)
      calc(var(--cms-orbit-r, 14px) * -0.707);
  }
  25% {
    translate: var(--cms-orbit-r, 14px) 0;
  }
  37.5% {
    translate:
      calc(var(--cms-orbit-r, 14px) * 0.707)
      calc(var(--cms-orbit-r, 14px) * 0.707);
  }
  50% {
    translate: 0 var(--cms-orbit-r, 14px);
  }
  62.5% {
    translate:
      calc(var(--cms-orbit-r, 14px) * -0.707)
      calc(var(--cms-orbit-r, 14px) * 0.707);
  }
  75% {
    translate: calc(var(--cms-orbit-r, 14px) * -1) 0;
  }
  87.5% {
    translate:
      calc(var(--cms-orbit-r, 14px) * -0.707)
      calc(var(--cms-orbit-r, 14px) * -0.707);
  }
  100% {
    translate: 0 calc(var(--cms-orbit-r, 14px) * -1);
  }
}

[data-sp-embed].js .hero--cms-story .hero-float.is-animating{
  animation:
    cms-float-enter 0.9s cubic-bezier(0.16, 1, 0.3, 1) var(--float-in-delay, 0ms) both,
    cms-float-orbit 15s linear calc(var(--float-in-delay, 0ms) + 900ms) infinite !important;
}

[data-sp-embed].js .hero--cms-story .hero-float--ig.is-animating{
  animation:
    cms-float-enter 0.9s cubic-bezier(0.16, 1, 0.3, 1) var(--float-in-delay, 0ms) both,
    cms-float-orbit 14s linear calc(var(--float-in-delay, 0ms) + 900ms) infinite !important;
}

[data-sp-embed].js .hero--cms-story .hero-float--line.is-animating{
  animation:
    cms-float-enter 0.9s cubic-bezier(0.16, 1, 0.3, 1) var(--float-in-delay, 0ms) both,
    cms-float-orbit 16.5s linear calc(var(--float-in-delay, 0ms) + 900ms - 3.2s) infinite reverse !important;
}

[data-sp-embed].js .hero--cms-story .hero-float--fb.is-animating{
  animation:
    cms-float-enter 0.9s cubic-bezier(0.16, 1, 0.3, 1) var(--float-in-delay, 0ms) both,
    cms-float-orbit 17.5s linear calc(var(--float-in-delay, 0ms) + 900ms - 6.5s) infinite !important;
}

[data-sp-embed].js .hero--cms-story .hero-float--campaign.is-animating{
  animation:
    cms-float-enter 0.9s cubic-bezier(0.16, 1, 0.3, 1) var(--float-in-delay, 0ms) both,
    cms-float-orbit 15.2s linear calc(var(--float-in-delay, 0ms) + 900ms - 9s) infinite reverse !important;
}

@media (min-width: 1400px) {
  [data-sp-embed] .hero--cms-story{
    --cms-hero-float-side: clamp(0.15rem, 1.6vw, 1.75rem);
    --cms-hero-float-w-lg: clamp(200px, 13.5vw, 275px);
    --cms-hero-float-w-sm: clamp(182px, 12.2vw, 248px);
  }

  [data-sp-embed] .hero--cms-story .hero-center{
    width: min(30rem, 34vw) !important;
    max-width: min(30rem, 34vw) !important;
  }
}

@media (max-width: 1100px) {
  [data-sp-embed] .hero--cms-story{
    --cms-hero-float-side: clamp(-0.45rem, 0.2vw, 0.25rem);
    --cms-hero-float-w-lg: clamp(118px, 14.5vw, 160px);
    --cms-hero-float-w-sm: clamp(108px, 13.5vw, 148px);
    --cms-orbit-r: 10px;
  }

  [data-sp-embed] .hero--cms-story .hero-center{
    width: min(18.5rem, 40vw) !important;
    max-width: min(18.5rem, 40vw) !important;
  }

  [data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
    font-size: clamp(1.6rem, 0.95rem + 1.9vw, 2.35rem) !important;
  }
}

@media (max-width: 860px) {
  [data-sp-embed] .hero--cms-story{
    --cms-hero-float-top: 4.1rem;
    --cms-hero-float-bottom: 0.15rem;
    --cms-hero-float-side: -0.45rem;
    --cms-hero-float-w-lg: clamp(96px, 27vw, 128px);
    --cms-hero-float-w-sm: clamp(90px, 25vw, 120px);
    --cms-orbit-r: 8px;
    min-height: auto;
    overflow-x: clip;
  }

  [data-sp-embed] .hero--cms-story .hero-center{
    width: min(17rem, 66vw) !important;
    max-width: min(17rem, 66vw) !important;
    margin-top: clamp(0.75rem, 2.5vh, 1.5rem) !important;
  }

  [data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
    font-size: clamp(1.65rem, 6.2vw, 2.1rem) !important;
  }

  [data-sp-embed] .hero--cms-story .hero-floats{
    opacity: 0.88;
  }
}

/* Create band: match management/analysis showcase card polish */
[data-sp-embed] .band-marketing .section-label{
  color: #be185d;
}

[data-sp-embed] .band-marketing .ai-insight-card__media-label-dot{
  background: #ec4899;
}


/* ===== AI scene: modal + fanned cards with pop-out ===== */
[data-sp-embed] #ai-platform .cms-pitch__visual-stage--ai-scene{
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  overflow: visible !important;
}

[data-sp-embed] #ai-platform .cms-pitch__visual-stage--ai-scene img{
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  transform: none !important;
  object-fit: cover !important;
}

[data-sp-embed] #ai-platform .cms-pitch__visual{
  overflow: visible !important;
}

[data-sp-embed] .cms-ai-scene{
  --ai-accent: #7c3aed;
  --ai-glow: rgba(124, 58, 237, 0.28);
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 6;
  min-height: 28rem;
  max-height: 44rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  isolation: isolate;
  overflow: visible;
  background: transparent;
  border: none;
  box-shadow: none;
  outline: none;
}

[data-sp-embed] .cms-ai-scene__cards{
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.35rem, 3.4vw, 2.1rem);
  width: min(100%, 40rem);
  padding: 0.55rem 0.85rem 0.35rem;
  pointer-events: none;
}

[data-sp-embed] .cms-ai-card{
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  width: auto;
  max-width: 10.5rem;
  min-width: 0;
  padding: 0.4rem 0.4rem 0.45rem;
  border-radius: 0.85rem;
  border: 1px solid rgba(15, 23, 42, 0.06);
  background: #fff;
  box-shadow:
    0 10px 24px rgba(15, 23, 42, 0.12),
    0 1px 0 rgba(255, 255, 255, 0.9) inset;
  transform:
    translate(var(--pop-x, 0), var(--pop-y, 0))
    rotate(var(--pop-rotate, 0deg))
    scale(1);
  transform-origin: center center;
  will-change: transform, opacity;
}

[data-sp-embed] .cms-ai-card__media{
  overflow: hidden;
  border-radius: 0.55rem;
  /* Match reference photos ~1024×671 landscape — keep ratio */
  aspect-ratio: 1024 / 671;
  background: #f3f4f6;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.04);
}

[data-sp-embed] .cms-ai-card__media img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

[data-sp-embed] .cms-ai-card__body{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: 1 1 auto;
  margin-top: 0.35rem;
  text-align: center;
}

[data-sp-embed] .cms-ai-card__body h3{
  margin: 0;
  width: 100%;
  min-height: 1.4em;
  font-size: clamp(0.62rem, 0.52rem + 0.35vw, 0.78rem);
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.3;
  color: #111827;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

[data-sp-embed] .cms-ai-card__meta, [data-sp-embed] .cms-ai-card__status{
  display: block;
  margin-top: 0.18rem;
  font-size: clamp(0.5rem, 0.44rem + 0.18vw, 0.58rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #9ca3af;
  background: none;
  padding: 0;
  border-radius: 0;
}

[data-sp-embed] .cms-ai-card__body p{
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0.12rem 0 0;
  font-size: clamp(0.48rem, 0.42rem + 0.16vw, 0.56rem);
  line-height: 1.35;
  color: #6b7280;
}

[data-sp-embed] .cms-ai-card__btn{
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  margin-top: 0.45rem;
  min-height: 1.45rem;
  padding: 0.32rem 0.45rem;
  border-radius: 0.42rem;
  font-size: clamp(0.52rem, 0.46rem + 0.2vw, 0.62rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  color: #fff;
  background: linear-gradient(180deg, #34d399 0%, #059669 100%);
  box-shadow: 0 3px 8px rgba(5, 150, 105, 0.28);
  white-space: nowrap;
}

/* Soft fan: sides tilt out, center sits slightly forward */
[data-sp-embed] .cms-ai-card--left{
  z-index: 2;
  --pop-rotate: -5deg;
  --pop-x: -0.55rem;
  --pop-y: 0.45rem;
  --pop-delay: 60ms;
}

[data-sp-embed] .cms-ai-card--center{
  z-index: 3;
  --pop-rotate: 1deg;
  --pop-x: 0;
  --pop-y: -0.35rem;
  --pop-delay: 120ms;
}

[data-sp-embed] .cms-ai-card--bottom{
  z-index: 2;
  --pop-rotate: 0deg;
  --pop-x: 0;
  --pop-y: 0;
  --pop-delay: 120ms;
}

[data-sp-embed] .cms-ai-card--right{
  z-index: 2;
  --pop-rotate: 5deg;
  --pop-x: 0.55rem;
  --pop-y: 0.45rem;
  --pop-delay: 180ms;
}

[data-sp-embed] .cms-ai-modal{
  position: relative;
  z-index: 1;
  width: min(72%, 19.5rem);
  margin-top: 0.15rem;
  padding: 0.95rem 1rem 0.9rem;
  border-radius: 0.95rem;
  background: #fff;
  box-shadow:
    0 0 0 1px rgba(124, 58, 237, 0.1),
    0 22px 48px var(--ai-glow),
    0 10px 24px rgba(15, 23, 42, 0.12);
}

[data-sp-embed] .cms-ai-modal__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

[data-sp-embed] .cms-ai-modal__head h3{
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: clamp(0.82rem, 0.7rem + 0.4vw, 0.98rem);
  font-weight: 700;
  color: var(--ai-accent);
}

[data-sp-embed] .cms-ai-modal__spark{
  display: inline-grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 0.35rem;
  font-size: 0.72rem;
  color: #fff;
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  box-shadow: 0 4px 10px rgba(124, 58, 237, 0.28);
}

[data-sp-embed] .cms-ai-modal__close{
  width: 1.35rem;
  height: 1.35rem;
  display: grid;
  place-items: center;
  border-radius: 0.35rem;
  color: #9ca3af;
  font-size: 1.05rem;
  line-height: 1;
  background: #f3f4f6;
}

[data-sp-embed] .cms-ai-modal__body{
  display: grid;
  gap: 0.55rem;
}

[data-sp-embed] .cms-ai-modal__field{
  display: grid;
  gap: 0.22rem;
}

[data-sp-embed] .cms-ai-modal__field span{
  font-size: 0.62rem;
  font-weight: 600;
  color: #6b7280;
}

[data-sp-embed] .cms-ai-modal__field strong, [data-sp-embed] .cms-ai-modal__field p{
  margin: 0;
  padding: 0.45rem 0.55rem;
  border-radius: 0.45rem;
  border: 1px solid #e5e7eb;
  background: #fafafa;
  font-size: 0.7rem;
  font-weight: 600;
  color: #111827;
  line-height: 1.45;
}

[data-sp-embed] .cms-ai-modal__url{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500 !important;
  color: #374151 !important;
}

[data-sp-embed] .cms-ai-modal__field--area p{
  min-height: 3.4rem;
  font-weight: 500;
  color: #374151;
}

[data-sp-embed] .cms-ai-modal__ai-link{
  justify-self: start;
  margin: -0.1rem 0 0.1rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ai-accent);
  font-size: 0.66rem;
  font-weight: 700;
  cursor: default;
}

[data-sp-embed] .cms-ai-modal__field--area{
  position: relative;
}

[data-sp-embed] .cms-ai-modal__field--count{
  display: none;
}

[data-sp-embed] .cms-ai-modal__field--count strong{
  text-align: inherit;
  color: #6b7280;
  font-weight: 700;
}

[data-sp-embed] .cms-ai-modal__foot{
  display: flex;
  justify-content: flex-end;
  gap: 0.45rem;
  margin-top: 0.85rem;
}

[data-sp-embed] .cms-ai-modal__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  padding: 0.4rem 0.75rem;
  border-radius: 0.45rem;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
}

[data-sp-embed] .cms-ai-modal__btn--ghost{
  color: #4b5563;
  background: #fff;
  border: 1px solid #e5e7eb;
}

[data-sp-embed] .cms-ai-modal__btn--primary{
  color: #fff;
  background: linear-gradient(180deg, #8b5cf6 0%, #7c3aed 100%);
  box-shadow: 0 8px 18px rgba(124, 58, 237, 0.28);
}

/* Snappy pop-out for generated cards */
[data-sp-embed].js #create .create-hero__visual:not(.visible) .cms-ai-card, [data-sp-embed].js #create .create-hero__visual:not(.visible) .cms-ai-card{
  opacity: 0;
  transform:
    translate(var(--pop-x, 0), calc(var(--pop-y, 0px) + 1.25rem))
    rotate(var(--pop-rotate, 0deg))
    scale(0.72);
  animation: none;
}

[data-sp-embed].js #create .create-hero__visual.visible .cms-ai-card, [data-sp-embed].js #create .create-hero__visual.visible .cms-ai-card{
  animation: cms-ai-card-pop 0.52s cubic-bezier(0.16, 1.2, 0.3, 1) var(--pop-delay, 0ms) both;
}

[data-sp-embed]:not(.js) #create .cms-ai-card{
  opacity: 1;
  transform:
    translate(var(--pop-x, 0), var(--pop-y, 0))
    rotate(var(--pop-rotate, 0deg))
    scale(1);
}

[data-sp-embed].js #create .create-hero__visual:not(.visible) .cms-ai-modal, [data-sp-embed].js #create .create-hero__visual:not(.visible) .cms-ai-modal{
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  animation: none;
}

[data-sp-embed].js #create .create-hero__visual.visible .cms-ai-modal, [data-sp-embed].js #create .create-hero__visual.visible .cms-ai-modal{
  animation: cms-ai-modal-in 0.42s cubic-bezier(0.16, 1, 0.3, 1) 40ms both;
}

[data-sp-embed]:not(.js) #create .cms-ai-modal{
  opacity: 1;
  transform: none;
}

@keyframes cms-ai-card-pop {
  0% {
    opacity: 0;
    transform:
      translate(var(--pop-x, 0), calc(var(--pop-y, 0px) + 1.4rem))
      rotate(var(--pop-rotate, 0deg))
      scale(0.7);
  }
  72% {
    opacity: 1;
    transform:
      translate(var(--pop-x, 0), calc(var(--pop-y, 0px) - 0.15rem))
      rotate(var(--pop-rotate, 0deg))
      scale(1.03);
  }
  100% {
    opacity: 1;
    transform:
      translate(var(--pop-x, 0), var(--pop-y, 0))
      rotate(var(--pop-rotate, 0deg))
      scale(1);
  }
}

@keyframes cms-ai-modal-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 760px) {
  [data-sp-embed] .cms-ai-scene{
    aspect-ratio: auto;
    min-height: 0;
    max-height: none;
    gap: 1.65rem;
    padding: 0.35rem 0 0.5rem;
  }

  [data-sp-embed] .cms-ai-scene__cards{
    width: 100%;
    max-width: 22.5rem;
    gap: 0.7rem;
    padding: 0.25rem 0.35rem 0.55rem;
  }

  [data-sp-embed] .cms-ai-card{
    max-width: 6.6rem;
    padding: 0.28rem 0.28rem 0.32rem;
    /* Flatten fan on narrow screens so cards don't collide */
    --pop-rotate: 0deg !important;
    --pop-x: 0 !important;
    --pop-y: 0 !important;
  }

  [data-sp-embed] .cms-ai-card--left, [data-sp-embed] .cms-ai-card--center, [data-sp-embed] .cms-ai-card--right{
    --pop-rotate: 0deg;
    --pop-x: 0;
    --pop-y: 0;
  }

  [data-sp-embed] .cms-ai-card--center{
    z-index: 2;
  }

  [data-sp-embed] .cms-ai-modal{
    width: min(92%, 19rem);
    margin-top: 0.35rem;
  }

  [data-sp-embed] .cms-ai-card__body p{
    display: none;
  }

  [data-sp-embed] .cms-ai-card__btn{
    margin-top: 0.35rem;
    min-height: 1.3rem;
    padding: 0.28rem 0.35rem;
  }
}

/* ===== CMS hero: restore 4 corner floats in side gutters ===== */
[data-sp-embed] .hero--cms-story{
  --cms-hero-float-top: clamp(5rem, 8.5vh, 7.25rem);
  --cms-hero-float-bottom: clamp(1.5rem, 4vh, 3.25rem);
  --cms-hero-float-side: clamp(0.85rem, 3.5vw, 3.25rem);
  --cms-hero-float-w-lg: clamp(168px, 18vw, 300px);
  --cms-hero-float-w-sm: clamp(155px, 16.5vw, 275px);
  --cms-orbit-r: 8px;
  min-height: min(100svh, 980px) !important;
  overflow: hidden !important;
  justify-content: center !important;
}

[data-sp-embed] .hero--cms-story .hero-floats{
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  z-index: 1 !important;
  overflow: visible !important;
  pointer-events: none !important;
}

/* Title corridor — keep clear of floats */
[data-sp-embed] .hero--cms-story .hero-center{
  z-index: 5 !important;
  width: min(22rem, 34vw) !important;
  max-width: min(22rem, 34vw) !important;
  margin-top: clamp(0.25rem, 1.2vh, 1rem) !important;
  padding-inline: 0.75rem !important;
}

[data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
  width: auto !important;
  max-width: 100% !important;
  font-size: clamp(1.9rem, 1.05rem + 2.1vw, 3.15rem) !important;
  line-height: 1.22 !important;
  gap: 0.28em !important;
}

[data-sp-embed] .hero--cms-story .hero-title-float, [data-sp-embed] .hero--cms-story .hero-title-float + .hero-title-float{
  white-space: nowrap !important;
}

[data-sp-embed] .hero--cms-story .hero-center .hero-actions{
  margin-top: clamp(1.35rem, 2.4vw, 2rem) !important;
}

/* Visible after decode — keep hidden until .is-media-ready */
[data-sp-embed] .hero--cms-story .hero-float.is-media-ready, [data-sp-embed].js .hero--cms-story .hero-float.is-ready.is-media-ready{
  visibility: visible;
}

[data-sp-embed].js .hero--cms-story .hero-float.is-ready:not(.is-animating){
  transform: rotate(var(--hero-float-tilt, 0deg));
}

/* Four corners in the side/edge gutters */
[data-sp-embed] .hero--cms-story .hero-float--ig{
  top: var(--cms-hero-float-top) !important;
  left: var(--cms-hero-float-side) !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--cms-hero-float-w-lg) !important;
  max-width: min(32vw, 300px) !important;
  --cms-orbit-r: 9px;
  --hero-float-tilt: -3.5deg;
}

[data-sp-embed] .hero--cms-story .hero-float--line{
  top: calc(var(--cms-hero-float-top) + 0.35rem) !important;
  right: var(--cms-hero-float-side) !important;
  left: auto !important;
  bottom: auto !important;
  width: var(--cms-hero-float-w-sm) !important;
  max-width: min(30vw, 275px) !important;
  --cms-orbit-r: 7px;
  --hero-float-tilt: 3deg;
}

[data-sp-embed] .hero--cms-story .hero-float--fb{
  bottom: var(--cms-hero-float-bottom) !important;
  left: var(--cms-hero-float-side) !important;
  right: auto !important;
  top: auto !important;
  width: var(--cms-hero-float-w-sm) !important;
  max-width: min(30vw, 275px) !important;
  --cms-orbit-r: 8px;
  --hero-float-tilt: 2deg;
}

[data-sp-embed] .hero--cms-story .hero-float--campaign{
  bottom: calc(var(--cms-hero-float-bottom) + 0.1rem) !important;
  right: var(--cms-hero-float-side) !important;
  left: auto !important;
  top: auto !important;
  width: var(--cms-hero-float-w-lg) !important;
  max-width: min(32vw, 300px) !important;
  --cms-orbit-r: 7px;
  --hero-float-tilt: -2.5deg;
}

[data-sp-embed] .hero--cms-story .hero-float img{
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

/* Pop-in then soft drift after media is ready */
[data-sp-embed].js .hero--cms-story .hero-float.is-animating{
  animation:
    cms-float-pop 0.7s cubic-bezier(0.16, 1.15, 0.3, 1) var(--float-in-delay, 0ms) both,
    cms-float-orbit 16s linear calc(var(--float-in-delay, 0ms) + 700ms) infinite !important;
}

[data-sp-embed].js .hero--cms-story .hero-float--ig.is-animating{
  animation:
    cms-float-pop 0.7s cubic-bezier(0.16, 1.15, 0.3, 1) var(--float-in-delay, 0ms) both,
    cms-float-orbit 15s linear calc(var(--float-in-delay, 0ms) + 700ms) infinite !important;
}

[data-sp-embed].js .hero--cms-story .hero-float--line.is-animating{
  animation:
    cms-float-pop 0.7s cubic-bezier(0.16, 1.15, 0.3, 1) var(--float-in-delay, 0ms) both,
    cms-float-orbit 17s linear calc(var(--float-in-delay, 0ms) + 700ms - 3s) infinite reverse !important;
}

[data-sp-embed].js .hero--cms-story .hero-float--fb.is-animating{
  animation:
    cms-float-pop 0.7s cubic-bezier(0.16, 1.15, 0.3, 1) var(--float-in-delay, 0ms) both,
    cms-float-orbit 18s linear calc(var(--float-in-delay, 0ms) + 700ms - 6s) infinite !important;
}

[data-sp-embed].js .hero--cms-story .hero-float--campaign.is-animating{
  animation:
    cms-float-pop 0.7s cubic-bezier(0.16, 1.15, 0.3, 1) var(--float-in-delay, 0ms) both,
    cms-float-orbit 16s linear calc(var(--float-in-delay, 0ms) + 700ms - 9s) infinite reverse !important;
}

@keyframes cms-float-pop {
  0% {
    opacity: 0;
    transform: rotate(var(--hero-float-tilt, 0deg)) translateY(22px) scale(0.78);
  }
  70% {
    opacity: 1;
    transform: rotate(var(--hero-float-tilt, 0deg)) translateY(-4px) scale(1.05);
  }
  100% {
    opacity: 1;
    transform: rotate(var(--hero-float-tilt, 0deg)) translateY(0) scale(1);
  }
}

@media (min-width: 1400px) {
  [data-sp-embed] .hero--cms-story{
    --cms-hero-float-side: clamp(1.75rem, 5vw, 5rem);
    --cms-hero-float-w-lg: clamp(220px, 17vw, 340px);
    --cms-hero-float-w-sm: clamp(200px, 15.5vw, 310px);
  }

  [data-sp-embed] .hero--cms-story .hero-center{
    width: min(24rem, 30vw) !important;
    max-width: min(24rem, 30vw) !important;
  }
}

@media (max-width: 1100px) {
  [data-sp-embed] .hero--cms-story{
    --cms-hero-float-side: clamp(0.45rem, 2vw, 1.25rem);
    --cms-hero-float-w-lg: clamp(130px, 20vw, 200px);
    --cms-hero-float-w-sm: clamp(118px, 18vw, 180px);
    --cms-orbit-r: 6px;
  }

  [data-sp-embed] .hero--cms-story .hero-center{
    width: min(16.5rem, 38vw) !important;
    max-width: min(16.5rem, 38vw) !important;
  }

  [data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
    font-size: clamp(1.5rem, 0.95rem + 1.6vw, 2.2rem) !important;
  }
}

@media (max-width: 860px) {
  [data-sp-embed] .hero--cms-story{
    --cms-hero-float-top: 4.35rem;
    --cms-hero-float-bottom: 0.65rem;
    --cms-hero-float-side: 0.15rem;
    --cms-hero-float-w-lg: clamp(104px, 30vw, 142px);
    --cms-hero-float-w-sm: clamp(96px, 28vw, 132px);
    --cms-orbit-r: 4px;
    min-height: auto !important;
  }

  [data-sp-embed] .hero--cms-story .hero-center{
    width: min(15.5rem, 62vw) !important;
    max-width: min(15.5rem, 62vw) !important;
    margin-top: clamp(0.6rem, 2vh, 1.25rem) !important;
  }

  [data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
    font-size: clamp(1.55rem, 5.8vw, 2rem) !important;
  }
}

/* ===== CMS hero floats: fade in after media ready ===== */
[data-sp-embed] .hero--cms-story .hero-floats{
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  z-index: 1 !important;
  overflow: visible !important;
  pointer-events: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

[data-sp-embed].js .hero--cms-story .hero-float:not(.is-animating){
  opacity: 0 !important;
  visibility: hidden !important;
}

[data-sp-embed].js .hero--cms-story .hero-float.is-animating{
  visibility: visible !important;
}

[data-sp-embed] .hero--cms-story .hero-float img{
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

/* Pop after decode, then orbit */
[data-sp-embed].js .hero--cms-story .hero-float.is-media-ready.is-animating{
  animation:
    cms-float-pop 0.7s cubic-bezier(0.16, 1.15, 0.3, 1) both,
    cms-float-orbit 15s linear 0.7s infinite !important;
}

[data-sp-embed].js .hero--cms-story .hero-float--ig.is-media-ready.is-animating{
  animation:
    cms-float-pop 0.7s cubic-bezier(0.16, 1.15, 0.3, 1) both,
    cms-float-orbit 14s linear 0.7s infinite !important;
}

[data-sp-embed].js .hero--cms-story .hero-float--line.is-media-ready.is-animating{
  animation:
    cms-float-pop 0.7s cubic-bezier(0.16, 1.15, 0.3, 1) both,
    cms-float-orbit 16.5s linear -2.5s infinite reverse !important;
}

[data-sp-embed].js .hero--cms-story .hero-float--fb.is-media-ready.is-animating{
  animation:
    cms-float-pop 0.7s cubic-bezier(0.16, 1.15, 0.3, 1) both,
    cms-float-orbit 17.5s linear -5.8s infinite !important;
}

[data-sp-embed].js .hero--cms-story .hero-float--campaign.is-media-ready.is-animating{
  animation:
    cms-float-pop 0.7s cubic-bezier(0.16, 1.15, 0.3, 1) both,
    cms-float-orbit 15.2s linear -8.3s infinite reverse !important;
}

/* ===== CMS hero floats: larger + closer to center ===== */
[data-sp-embed] .hero--cms-story{
  --cms-hero-float-top: clamp(4.25rem, 6.5vh, 6rem);
  --cms-hero-float-bottom: clamp(0.85rem, 2.8vh, 2.25rem);
  --cms-hero-float-side: clamp(3.5rem, 7.5vw, 9.5rem);
  --cms-hero-float-w-lg: clamp(230px, 27vw, 420px);
  --cms-hero-float-w-sm: clamp(210px, 24.5vw, 385px);
  --cms-orbit-r: 10px;
}

[data-sp-embed] .hero--cms-story .hero-center{
  width: min(20rem, 32vw) !important;
  max-width: min(20rem, 32vw) !important;
}

[data-sp-embed] .hero--cms-story .hero-float--ig, [data-sp-embed] .hero--cms-story .hero-float--line, [data-sp-embed] .hero--cms-story .hero-float--fb, [data-sp-embed] .hero--cms-story .hero-float--campaign{
  max-width: none !important;
}

[data-sp-embed] .hero--cms-story .hero-float--ig{
  width: var(--cms-hero-float-w-lg) !important;
  top: var(--cms-hero-float-top) !important;
  left: var(--cms-hero-float-side) !important;
}

[data-sp-embed] .hero--cms-story .hero-float--line{
  width: var(--cms-hero-float-w-sm) !important;
  top: calc(var(--cms-hero-float-top) + 0.45rem) !important;
  right: var(--cms-hero-float-side) !important;
}

[data-sp-embed] .hero--cms-story .hero-float--fb{
  width: var(--cms-hero-float-w-sm) !important;
  bottom: var(--cms-hero-float-bottom) !important;
  left: calc(var(--cms-hero-float-side) + 0.35rem) !important;
}

[data-sp-embed] .hero--cms-story .hero-float--campaign{
  width: var(--cms-hero-float-w-lg) !important;
  bottom: calc(var(--cms-hero-float-bottom) + 0.2rem) !important;
  right: calc(var(--cms-hero-float-side) + 0.15rem) !important;
}

@media (min-width: 1400px) {
  [data-sp-embed] .hero--cms-story{
    --cms-hero-float-side: clamp(5rem, 9vw, 12rem);
    --cms-hero-float-w-lg: clamp(300px, 26vw, 460px);
    --cms-hero-float-w-sm: clamp(275px, 23.5vw, 420px);
  }

  [data-sp-embed] .hero--cms-story .hero-center{
    width: min(22rem, 28vw) !important;
    max-width: min(22rem, 28vw) !important;
  }
}

@media (max-width: 1100px) {
  [data-sp-embed] .hero--cms-story{
    --cms-hero-float-side: clamp(1.25rem, 3.5vw, 3rem);
    --cms-hero-float-w-lg: clamp(160px, 26vw, 250px);
    --cms-hero-float-w-sm: clamp(148px, 24vw, 230px);
  }

  [data-sp-embed] .hero--cms-story .hero-center{
    width: min(15.5rem, 36vw) !important;
    max-width: min(15.5rem, 36vw) !important;
  }
}

@media (max-width: 860px) {
  [data-sp-embed] .hero--cms-story{
    --cms-hero-title-gap: clamp(12.5rem, 28vw, 15.5rem);
    --cms-hero-float-top: 3.65rem;
    --cms-hero-float-bottom: 0.55rem;
    --cms-hero-float-side: 0.2rem;
    --cms-hero-float-w-lg: clamp(96px, 27vw, 128px);
    --cms-hero-float-w-sm: clamp(90px, 25vw, 118px);
  }

  [data-sp-embed] .hero--cms-story .hero-center{
    width: min(16rem, 78vw) !important;
    max-width: min(16rem, 78vw) !important;
    margin-top: 1.35rem !important;
  }

  [data-sp-embed] .hero--cms-story .hero-brand-logo{
    margin-bottom: 0.75rem !important;
  }
}

/* Phone: keep brand clear of top float composites */
@media (max-width: 760px) {
  [data-sp-embed] .hero--cms-story{
    --cms-hero-title-gap: clamp(13.75rem, 34vw, 17rem);
    --cms-hero-float-top: 3.4rem;
    --cms-hero-float-bottom: 0.7rem;
    --cms-hero-float-side: 0.15rem;
    --cms-hero-float-w-lg: clamp(88px, 24vw, 112px);
    --cms-hero-float-w-sm: clamp(82px, 22vw, 104px);
    padding-bottom: 3.25rem !important;
  }

  [data-sp-embed] .hero--cms-story .hero-center{
    width: min(17rem, 84vw) !important;
    max-width: min(17rem, 84vw) !important;
    margin-top: 1.75rem !important;
    z-index: 6 !important;
  }

  [data-sp-embed] .hero--cms-story .hero-float--ig{
    top: var(--cms-hero-float-top) !important;
    left: var(--cms-hero-float-side) !important;
    width: var(--cms-hero-float-w-lg) !important;
  }

  [data-sp-embed] .hero--cms-story .hero-float--line{
    top: calc(var(--cms-hero-float-top) + 0.2rem) !important;
    right: var(--cms-hero-float-side) !important;
    width: var(--cms-hero-float-w-sm) !important;
  }

  [data-sp-embed] .hero--cms-story .hero-float--fb{
    bottom: var(--cms-hero-float-bottom) !important;
    left: var(--cms-hero-float-side) !important;
    width: var(--cms-hero-float-w-sm) !important;
  }

  [data-sp-embed] .hero--cms-story .hero-float--campaign{
    bottom: calc(var(--cms-hero-float-bottom) + 0.1rem) !important;
    right: var(--cms-hero-float-side) !important;
    left: auto !important;
    width: var(--cms-hero-float-w-lg) !important;
  }

  [data-sp-embed] .hero--cms-story .hero-brand-logo{
    margin-bottom: 0.85rem !important;
  }

  [data-sp-embed] .hero--cms-story .hero-center .hero-actions{
    margin-top: 1.15rem !important;
  }
}

/* ===== Create demo: editor + channel preview ===== */
[data-sp-embed] #create .create-demo__more{
  margin: 1.75rem 0 0.75rem;
  text-align: center;
}

[data-sp-embed] #create .create-demo__more a{
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.92rem;
  font-weight: 700;
  color: #be185d;
  text-decoration: none;
}

[data-sp-embed] #create .create-demo__more a:hover{
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

[data-sp-embed] #create .create-demo__window{
  --create-accent: #db2777;
  --create-line: #06c755;
  --create-ig: #e1306c;
  --create-fb: #1877f2;
  border-radius: 1.15rem;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow:
    0 28px 60px rgba(15, 23, 42, 0.1),
    0 2px 0 rgba(255, 255, 255, 0.9) inset;
  overflow: hidden;
  transform-origin: center top;
}

[data-sp-embed].js #create .reveal-media:not(.visible) .create-demo__window{
  opacity: 0;
  transform: translateY(1.25rem) scale(0.975);
}

[data-sp-embed].js #create .reveal-media.visible .create-demo__window{
  animation: create-demo-in 0.78s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes create-demo-in {
  from {
    opacity: 0;
    transform: translateY(1.25rem) scale(0.975);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

[data-sp-embed] #create .create-demo__chrome{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  background: linear-gradient(180deg, #fff 0%, #fafafa 100%);
}

[data-sp-embed] #create .create-demo__chrome-left{
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.95rem;
  color: #111827;
}

[data-sp-embed] #create .create-demo__dot{
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: var(--create-accent);
  box-shadow: 0 0 0 4px rgba(219, 39, 119, 0.12);
}

[data-sp-embed] #create .create-demo__chrome-actions{
  display: inline-flex;
  gap: 0.45rem;
}

[data-sp-embed] #create .create-demo__ghost, [data-sp-embed] #create .create-demo__save{
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 0.38rem 0.8rem;
}

[data-sp-embed] #create .create-demo__ghost{
  color: #64748b;
  background: #f1f5f9;
}

[data-sp-embed] #create .create-demo__save{
  color: #fff;
  background: #111827;
}

[data-sp-embed] #create .create-demo__body{
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  min-height: clamp(22rem, 46vw, 30rem);
}

[data-sp-embed] #create .create-demo__editor{
  display: grid;
  gap: 0.7rem;
  align-content: start;
  padding: 1.05rem 1.15rem 1.25rem;
  border-right: 1px solid rgba(15, 23, 42, 0.06);
  background: #fff;
}

[data-sp-embed] #create .create-demo__field{
  display: grid;
  gap: 0.28rem;
  margin: 0;
}

[data-sp-embed] #create .create-demo__field > span{
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #94a3b8;
  text-transform: uppercase;
}

[data-sp-embed] #create .create-demo__field strong, [data-sp-embed] #create .create-demo__field p{
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: #0f172a;
  padding: 0.62rem 0.75rem;
  border-radius: 0.7rem;
  background: #f8fafc;
  border: 1px solid rgba(148, 163, 184, 0.28);
}

[data-sp-embed] #create .create-demo__field--area p{
  min-height: 4.6rem;
}

[data-sp-embed] #create .create-demo__insight{
  display: none;
  gap: 0.7rem;
  margin-top: 0.35rem;
  padding: 0.85rem 0.9rem 0.95rem;
  border-radius: 0.85rem;
  background: #f8fafc;
  border: 1px solid rgba(148, 163, 184, 0.28);
}

[data-sp-embed] #create .create-demo__insight.is-active{
  display: grid;
}

[data-sp-embed] #create .create-demo__insight-label{
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #9d174d;
}

[data-sp-embed] #create .create-demo__person{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.65rem;
  align-items: center;
}

[data-sp-embed] #create .create-demo__person strong{
  display: block;
  font-size: 0.86rem;
  color: #0f172a;
}

[data-sp-embed] #create .create-demo__person p{
  margin: 0.15rem 0 0;
  font-size: 0.76rem;
  line-height: 1.45;
  color: #475569;
}

[data-sp-embed] #create .create-demo__face{
  display: grid;
  place-items: center;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 999px;
  border: 2px solid #fff;
  background: #fb7185;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
}

[data-sp-embed] #create .create-demo__face--b{ background: #f59e0b; }
[data-sp-embed] #create .create-demo__face--c{ background: #8b5cf6; }
[data-sp-embed] #create .create-demo__face--d{ background: #0ea5e9; }

[data-sp-embed] #create .create-demo__faces{
  display: flex;
  padding-left: 0.15rem;
}

[data-sp-embed] #create .create-demo__faces .create-demo__face{
  margin-left: -0.45rem;
}

[data-sp-embed] #create .create-demo__fit{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0;
  padding-top: 0.15rem;
  border-top: 1px solid rgba(148, 163, 184, 0.28);
  font-size: 0.72rem;
  font-weight: 700;
  color: #64748b;
}

[data-sp-embed] #create .create-demo__fit strong{
  font-size: 1.15rem;
  color: #be185d;
}

[data-sp-embed] #create .create-demo__meters{
  display: grid;
  gap: 0.42rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-sp-embed] #create .create-demo__meters li{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 1.6rem;
  gap: 0.45rem;
  align-items: center;
  font-size: 0.74rem;
  font-weight: 700;
  color: #334155;
}

[data-sp-embed] #create .create-demo__bar{
  display: block;
  height: 0.38rem;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}

[data-sp-embed] #create .create-demo__bar i{
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #fb7185, #e11d48);
}

[data-sp-embed] #create .create-demo__meters b{
  text-align: right;
  color: #be185d;
}

[data-sp-embed] #create .create-demo__stats{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-sp-embed] #create .create-demo__stats li{
  display: grid;
  gap: 0.2rem;
  padding: 0.55rem 0.4rem;
  border-radius: 0.65rem;
  background: #fff;
  border: 1px solid rgba(148, 163, 184, 0.22);
  text-align: center;
}

[data-sp-embed] #create .create-demo__stats span{
  font-size: 0.66rem;
  font-weight: 700;
  color: #64748b;
}

[data-sp-embed] #create .create-demo__stats strong{
  font-size: 0.95rem;
  color: #0f172a;
}

[data-sp-embed] #create .create-demo__insight--line{
  background: #eef2ff;
  border-color: #818cf8;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

[data-sp-embed] #create .create-demo__insight--line .create-demo__insight-label, [data-sp-embed] #create .create-demo__insight--instagram .create-demo__insight-label, [data-sp-embed] #create .create-demo__insight--facebook .create-demo__insight-label{
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

[data-sp-embed] #create .create-demo__insight--line .create-demo__insight-label::before, [data-sp-embed] #create .create-demo__insight--instagram .create-demo__insight-label::before, [data-sp-embed] #create .create-demo__insight--facebook .create-demo__insight-label::before{
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);
}

[data-sp-embed] #create .create-demo__insight--line .create-demo__insight-label{
  color: #4338ca;
}

[data-sp-embed] #create .create-demo__insight--line .create-demo__person strong{
  color: #1e1b4b;
}

[data-sp-embed] #create .create-demo__id{
  position: relative;
  display: grid;
  place-items: center;
  width: 2.45rem;
  height: 2.45rem;
  border-radius: 999px;
  background: #4f46e5;
  color: #fff;
}

[data-sp-embed] #create .create-demo__id-person{
  width: 1.4rem;
  height: 1.4rem;
}

[data-sp-embed] #create .create-demo__id-moon{
  position: absolute;
  right: -0.28rem;
  bottom: -0.08rem;
  width: 1.05rem;
  height: 1.05rem;
  padding: 0.12rem;
  border-radius: 999px;
  border: 2px solid #eef2ff;
  background: #fbbf24;
  color: #78350f;
  box-sizing: border-box;
}

[data-sp-embed] #create .create-demo__id svg{
  display: block;
  fill: currentColor;
}

[data-sp-embed] #create .create-demo__reads{
  display: grid;
  gap: 0.4rem;
  margin: 0;
}

[data-sp-embed] #create .create-demo__reads div{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.65rem;
  margin: 0;
  padding: 0.4rem 0.55rem;
  border-radius: 0.55rem;
  background: #fff;
  border: 1px solid rgba(99, 102, 241, 0.2);
}

[data-sp-embed] #create .create-demo__reads dt, [data-sp-embed] #create .create-demo__reads dd{
  margin: 0;
}

[data-sp-embed] #create .create-demo__reads dt{
  font-size: 0.68rem;
  font-weight: 800;
  color: #4f46e5;
}

[data-sp-embed] #create .create-demo__reads dd{
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.35;
  color: #1e1b4b;
  text-align: right;
}

[data-sp-embed] #create .create-demo__insight--instagram{
  background: #fff1f2;
  border-color: #fb7185;
  box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.1);
}

[data-sp-embed] #create .create-demo__insight--instagram .create-demo__insight-label{
  color: #be123c;
}

[data-sp-embed] #create .create-demo__insight--instagram .create-demo__face{
  border-color: #fff1f2;
}

[data-sp-embed] #create .create-demo__eng{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.8rem;
  align-items: end;
  padding: 0.55rem 0.65rem;
  border-radius: 0.65rem;
  background: #fff;
  border: 1px solid rgba(244, 63, 94, 0.2);
}

[data-sp-embed] #create .create-demo__eng-total{
  display: grid;
  gap: 0.05rem;
}

[data-sp-embed] #create .create-demo__eng-total span{
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #9f1239;
}

[data-sp-embed] #create .create-demo__eng-total strong{
  font-size: 1.35rem;
  line-height: 1.1;
  color: #4c0519;
}

[data-sp-embed] #create .create-demo__eng-total em{
  justify-self: start;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: #dcfce7;
  color: #15803d;
  font-size: 0.64rem;
  font-style: normal;
  font-weight: 800;
}

[data-sp-embed] #create .create-demo__spark{
  display: flex;
  align-items: flex-end;
  gap: 0.22rem;
  height: 2.6rem;
}

[data-sp-embed] #create .create-demo__spark i{
  flex: 1;
  border-radius: 0.2rem 0.2rem 0.1rem 0.1rem;
  background: #fecdd3;
}

[data-sp-embed] #create .create-demo__spark i.is-peak{
  background: linear-gradient(180deg, #f43f5e, #c026d3);
}

[data-sp-embed] #create .create-demo__peaks{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-sp-embed] #create .create-demo__peaks li{
  display: grid;
  gap: 0.1rem;
  padding: 0.4rem 0.55rem;
  border-radius: 0.55rem;
  background: #fff;
  border: 1px solid rgba(244, 63, 94, 0.2);
}

[data-sp-embed] #create .create-demo__peaks span{
  font-size: 0.62rem;
  font-weight: 800;
  color: #be123c;
}

[data-sp-embed] #create .create-demo__peaks strong{
  font-size: 0.9rem;
  color: #4c0519;
}

[data-sp-embed] #create .create-demo__topusers{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  font-size: 0.68rem;
  font-weight: 800;
  color: #be123c;
}

[data-sp-embed] #create .create-demo__topusers .create-demo__face{
  width: 1.75rem;
  height: 1.75rem;
  font-size: 0.66rem;
}

[data-sp-embed] #create .create-demo__face--more{
  background: #4c0519;
  font-size: 0.6rem;
}

[data-sp-embed] #create .create-demo__insight--facebook{
  background: #f0f9ff;
  border-color: #38bdf8;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}

[data-sp-embed] #create .create-demo__insight--facebook .create-demo__insight-label{
  color: #0369a1;
}

[data-sp-embed] #create .create-demo__insight--facebook .create-demo__stats li{
  border-color: rgba(14, 165, 233, 0.25);
}

[data-sp-embed] #create .create-demo__insight--facebook .create-demo__stats span{
  color: #0284c7;
}

[data-sp-embed] #create .create-demo__insight--facebook .create-demo__stats strong{
  color: #0c4a6e;
}

[data-sp-embed] #create .create-demo__funnel{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 2.3rem auto;
  gap: 0.32rem 0.45rem;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 800;
  color: #0369a1;
  margin: 0;
  padding: 0.5rem 0.6rem;
  border-radius: 0.6rem;
  background: #fff;
  border: 1px solid rgba(14, 165, 233, 0.25);
  list-style: none;
}

[data-sp-embed] #create .create-demo__funnel li{
  display: contents;
}

[data-sp-embed] #create .create-demo__funnel li:not(.is-drop)::after{
  content: "";
}

[data-sp-embed] #create .create-demo__funnel .create-demo__bar{
  background: #e0f2fe;
}

[data-sp-embed] #create .create-demo__funnel .create-demo__bar i{
  background: linear-gradient(90deg, #38bdf8, #0284c7);
}

[data-sp-embed] #create .create-demo__funnel b{
  text-align: right;
  color: #0c4a6e;
}

[data-sp-embed] #create .create-demo__funnel em{
  min-width: 0;
  font-style: normal;
}

[data-sp-embed] #create .create-demo__funnel li.is-drop{
  color: #b91c1c;
}

[data-sp-embed] #create .create-demo__funnel li.is-drop .create-demo__bar i{
  background: linear-gradient(90deg, #fb923c, #ef4444);
}

[data-sp-embed] #create .create-demo__funnel li.is-drop em{
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: #fee2e2;
  color: #b91c1c;
  font-size: 0.6rem;
}

[data-sp-embed] #create .create-demo__alert{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.15rem 0.5rem;
  align-items: baseline;
  padding: 0.5rem 0.6rem;
  border-radius: 0.6rem;
  background: #fff7ed;
  border: 1px solid #fdba74;
}

[data-sp-embed] #create .create-demo__alert b{
  grid-row: span 2;
  padding: 0.08rem 0.42rem;
  border-radius: 999px;
  background: #f97316;
  color: #fff;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

[data-sp-embed] #create .create-demo__alert strong{
  font-size: 0.78rem;
  line-height: 1.4;
  color: #9a3412;
}

[data-sp-embed] #create .create-demo__alert p{
  margin: 0;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.45;
  color: #7c2d12;
}

[data-sp-embed] #create .create-demo__select{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
}

[data-sp-embed] #create .create-demo__select::after{
  content: "";
  flex: 0 0 auto;
  width: 0.42rem;
  height: 0.42rem;
  margin-right: 0.15rem;
  border-right: 1.6px solid #64748b;
  border-bottom: 1.6px solid #64748b;
  transform: rotate(45deg) translateY(-1px);
}

[data-sp-embed] #create .create-demo__detail-tail{
  white-space: nowrap;
}

[data-sp-embed] #create .create-demo__url{
  font-size: 0.78rem !important;
  color: #475569 !important;
  word-break: break-all;
}

[data-sp-embed] #create .create-demo__copy-short{
  display: none;
}

[data-sp-embed] #create .create-demo__copy-full{
  display: inline;
}

[data-sp-embed] #create .create-demo__status{
  width: fit-content;
  color: #15803d !important;
  background: #ecfdf3 !important;
  border-color: rgba(34, 197, 94, 0.28) !important;
}

[data-sp-embed] #create .create-demo__chips{
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

[data-sp-embed] #create .create-demo__chips li{
  font-size: 0.74rem;
  font-weight: 700;
  color: #9d174d;
  background: #fdf2f8;
  border: 1px solid rgba(244, 114, 182, 0.35);
  border-radius: 999px;
  padding: 0.28rem 0.62rem;
}

[data-sp-embed].js #create .reveal-media:not(.visible) .create-demo__field, [data-sp-embed].js #create .reveal-media:not(.visible) .create-demo__chips li{
  opacity: 0;
  transform: translateY(10px);
}

[data-sp-embed].js #create .reveal-media.visible .create-demo__field{
  animation: create-field-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(180ms + var(--i, 0) * 90ms);
}

[data-sp-embed].js #create .reveal-media.visible .create-demo__chips li{
  animation: create-chip-pop 0.48s cubic-bezier(0.16, 1.2, 0.3, 1) both;
}

[data-sp-embed].js #create .reveal-media.visible .create-demo__chips li:nth-child(1){ animation-delay: 0.72s; }
[data-sp-embed].js #create .reveal-media.visible .create-demo__chips li:nth-child(2){ animation-delay: 0.84s; }
[data-sp-embed].js #create .reveal-media.visible .create-demo__chips li:nth-child(3){ animation-delay: 0.96s; }
[data-sp-embed].js #create .reveal-media.visible .create-demo__chips li:nth-child(4){ animation-delay: 1.08s; }

@keyframes create-field-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes create-chip-pop {
  0% {
    opacity: 0;
    transform: scale(0.72);
  }
  70% {
    opacity: 1;
    transform: scale(1.06);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

[data-sp-embed] #create .create-demo__title-box{
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 2.7rem;
}

[data-sp-embed] #create .create-demo__typing{
  display: inline;
  white-space: pre-wrap;
}

[data-sp-embed] #create .create-demo__typing.is-typing::after{
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 1px;
  vertical-align: -0.12em;
  background: rgba(219, 39, 119, 0.8);
  animation: create-caret 0.85s step-end infinite;
}

@keyframes create-caret {
  50% { background: transparent; }
}

[data-sp-embed] #create .create-demo__preview{
  display: grid;
  grid-template-rows: auto 1fr;
  background:
    radial-gradient(ellipse 70% 55% at 50% 18%, rgba(251, 113, 133, 0.12), transparent 70%),
    linear-gradient(180deg, #fff8fb 0%, #f8fafc 100%);
  padding: 1rem 1rem 1.15rem;
}

[data-sp-embed] #create .create-demo__preview-head{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  margin-bottom: 0.85rem;
}

[data-sp-embed] #create .create-demo__preview-head > strong{
  font-size: 0.82rem;
  color: #334155;
}

[data-sp-embed] #create .create-demo__tabs{
  display: inline-flex;
  gap: 0.2rem;
  padding: 0.18rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(15, 23, 42, 0.08);
}

[data-sp-embed] #create .create-demo__tab{
  appearance: none;
  border: 0;
  background: transparent;
  color: #64748b;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 0.4rem 0.72rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

[data-sp-embed] #create .create-demo__tab.is-active{
  color: #fff;
  background: #111827;
  transform: translateY(-1px);
}

[data-sp-embed] #create .create-demo__tab[data-create-tab="line"].is-active{
  background: var(--create-line);
}

[data-sp-embed] #create .create-demo__tab[data-create-tab="instagram"].is-active{
  background: linear-gradient(120deg, #f58529, #dd2a7b 55%, #8134af);
}

[data-sp-embed] #create .create-demo__tab[data-create-tab="facebook"].is-active{
  background: #111827;
}

[data-sp-embed] #create .create-demo__stage{
  position: relative;
  min-height: 18.5rem;
  display: grid;
  place-items: center;
}

[data-sp-embed] #create .create-demo__panel{
  grid-area: 1 / 1;
  width: min(100%, 17.5rem);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.96);
  transition:
    opacity 0.42s ease,
    transform 0.48s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0.42s;
  pointer-events: none;
}

[data-sp-embed] #create .create-demo__panel.is-active{
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

[data-sp-embed] #create .create-line, [data-sp-embed] #create .create-ig, [data-sp-embed] #create .create-fb{
  background: #fff;
  border-radius: 1rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.12);
  overflow: hidden;
}

[data-sp-embed] #create .create-line{
  background: #7ebce8;
  padding: 1rem 0.85rem 1.1rem;
}

[data-sp-embed] #create .create-line__bubble{
  background: #fff;
  border-radius: 0.85rem;
  padding: 0.85rem;
  display: grid;
  gap: 0.55rem;
}

[data-sp-embed] #create .create-line__title{
  margin: 0;
  font-size: 0.9rem;
  font-weight: 800;
  color: #111827;
}

[data-sp-embed] #create .create-line__text{
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.45;
  color: #475569;
}

[data-sp-embed] #create .create-line__coupon{
  border-radius: 0.7rem;
  padding: 0.85rem 0.7rem;
  text-align: center;
  color: #fff;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.18), transparent 45%),
    linear-gradient(120deg, #fb7185, #f97316 55%, #facc15);
}

[data-sp-embed] #create .create-line__coupon span{
  display: block;
  font-size: 1.45rem;
  font-weight: 900;
  letter-spacing: 0.02em;
}

[data-sp-embed] #create .create-line__coupon strong{
  display: block;
  margin-top: 0.15rem;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}

[data-sp-embed] #create .create-line__btn{
  display: block;
  text-align: center;
  border-radius: 999px;
  padding: 0.62rem 0.8rem;
  font-size: 0.82rem;
  font-weight: 800;
  color: #fff;
  background: var(--create-line);
}

[data-sp-embed] #create .create-ig__head, [data-sp-embed] #create .create-fb__head{
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 0.75rem 0.55rem;
}

[data-sp-embed] #create .create-ig__avatar{
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #f58529, #dd2a7b 55%, #8134af);
}

[data-sp-embed] #create .create-ig__head strong, [data-sp-embed] #create .create-fb__head strong{
  display: block;
  font-size: 0.78rem;
  color: #111827;
}

[data-sp-embed] #create .create-ig__head span, [data-sp-embed] #create .create-fb__head span{
  display: block;
  font-size: 0.66rem;
  color: #94a3b8;
}

[data-sp-embed] #create .create-ig__media, [data-sp-embed] #create .create-fb__media{
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #f1f5f9;
}

[data-sp-embed] #create .create-ig__media img, [data-sp-embed] #create .create-fb__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

[data-sp-embed] #create .create-ig__cta{
  background: #111;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 0.48rem 0.5rem;
}

[data-sp-embed] #create .create-ig__caption, [data-sp-embed] #create .create-fb__text{
  margin: 0;
  padding: 0.65rem 0.75rem 0.85rem;
  font-size: 0.74rem;
  line-height: 1.4;
  color: #334155;
}

[data-sp-embed] #create .create-fb__mark{
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 900;
  background: var(--create-fb);
}

[data-sp-embed] #create .create-fb__foot{
  display: flex;
  justify-content: space-around;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  padding: 0.55rem 0.4rem 0.65rem;
  font-size: 0.7rem;
  font-weight: 700;
  color: #64748b;
}

[data-sp-embed] #create .create-fb--story{
  position: relative;
  background: #f8fafc;
  min-height: 22rem;
}

[data-sp-embed] #create .create-fb__article{
  display: flex;
  flex-direction: column;
  min-height: 22rem;
  box-sizing: border-box;
  padding: 0.15rem 0 0.75rem;
}

[data-sp-embed] #create .create-fb__mast{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  padding: 0.65rem 0.75rem 0.2rem;
}

[data-sp-embed] #create .create-fb__mast strong{
  font-size: 0.72rem;
  letter-spacing: 0.01em;
  color: #1e293b;
}

[data-sp-embed] #create .create-fb__mast span{
  font-size: 0.62rem;
  color: #94a3b8;
}

[data-sp-embed] #create .create-fb__kicker{
  margin: 0;
  padding: 0.35rem 0.75rem 0;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #9a3412;
}

[data-sp-embed] #create .create-fb__headline{
  margin: 0.15rem 0 0.2rem;
  padding: 0 0.75rem;
  font-size: 0.98rem;
  line-height: 1.35;
  letter-spacing: 0;
  color: #0f172a;
}

[data-sp-embed] #create .create-fb__byline{
  margin: 0;
  padding: 0 0.75rem 0.15rem;
  font-size: 0.62rem;
  color: #94a3b8;
}

[data-sp-embed] #create .create-fb__lead{
  margin: 0.45rem 0 0;
  padding: 0 0.75rem;
  font-size: 0.7rem;
  line-height: 1.55;
  color: #475569;
}

[data-sp-embed] #create .create-fb__lines{
  display: grid;
  gap: 0.32rem;
  margin-top: auto;
  padding: 0.45rem 0.75rem 0;
}

[data-sp-embed] #create .create-fb__lines span{
  display: block;
  height: 0.38rem;
  border-radius: 999px;
  background: #e2e8f0;
}

[data-sp-embed] #create .create-fb__lines .is-short{
  width: 62%;
}

[data-sp-embed] #create .create-fb__scrim, [data-sp-embed] #create .create-fb__popup{
  position: absolute;
  pointer-events: none;
}

[data-sp-embed] #create .create-fb__scrim{
  inset: 0;
  background: rgba(15, 23, 42, 0.34);
  opacity: 0;
}

[data-sp-embed] #create .create-fb__popup{
  left: 0.65rem;
  right: 0.65rem;
  top: 50%;
  padding: 0 0.75rem 0.78rem;
  border-radius: 0.85rem;
  background: #fff;
  text-align: center;
  box-shadow: 0 16px 36px rgba(29, 78, 216, 0.28);
  overflow: hidden;
  opacity: 0;
  transform: translateY(calc(-50% + 14px)) scale(0.94);
}

[data-sp-embed] #create .create-fb__popup-photo{
  margin: 0 -0.75rem 0.55rem;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #e2e8f0;
}

[data-sp-embed] #create .create-fb__popup-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

[data-sp-embed] #create .create-fb__popup-kicker{
  margin: 0;
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: #1877f2;
}

[data-sp-embed] #create .create-fb__popup strong{
  display: block;
  margin-top: 0.12rem;
  font-size: 0.78rem;
  color: #0f172a;
}

[data-sp-embed] #create .create-fb__popup p:last-child{
  margin: 0.18rem 0 0;
  font-size: 0.68rem;
  line-height: 1.4;
  color: #64748b;
}

[data-sp-embed] #create .create-demo__panel--facebook.is-active .create-fb__scrim{
  animation: create-fb-scrim 2.5s ease forwards;
}

[data-sp-embed] #create .create-demo__panel--facebook.is-active .create-fb__popup{
  animation: create-fb-pop 2.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes create-fb-scrim {
  0%, 22% { opacity: 0; }
  46%, 100% { opacity: 1; }
}

@keyframes create-fb-pop {
  0%, 24% { opacity: 0; transform: translateY(calc(-50% + 16px)) scale(0.94); }
  52%, 100% { opacity: 1; transform: translateY(-50%) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  [data-sp-embed] #create .create-demo__panel--facebook.is-active .create-fb__scrim, [data-sp-embed] #create .create-demo__panel--facebook.is-active .create-fb__popup{
    animation: none;
    opacity: 1;
  }

  [data-sp-embed] #create .create-demo__panel--facebook.is-active .create-fb__popup{
    transform: translateY(-50%);
  }
}

[data-sp-embed] #create .create-demo__story{
  display: grid;
  gap: 0.95rem;
  justify-items: start;
  max-width: 42rem;
}

[data-sp-embed] #create .create-demo__story > p{
  margin: 0;
  font-size: clamp(0.98rem, 0.9rem + 0.35vw, 1.12rem);
  line-height: 1.7;
  color: #334155;
}

/* Tablet (iPad): keep editor + preview like PC, slightly compact */
@media (min-width: 768px) and (max-width: 920px) {
  [data-sp-embed] #create .create-demo__body{
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    min-height: 0;
  }

  [data-sp-embed] #create .create-demo__editor{
    display: grid;
    padding: 0.85rem 0.85rem 1rem;
    gap: 0.7rem;
  }

  [data-sp-embed] #create .create-demo__preview{
    padding: 0.75rem 0.7rem 0.9rem;
  }

  [data-sp-embed] #create .create-demo__preview-head{
    gap: 0.4rem;
    margin-bottom: 0.55rem;
  }

  [data-sp-embed] #create .create-demo__preview-head strong{
    font-size: 0.82rem;
  }

  [data-sp-embed] #create .create-demo__tab{
    font-size: 0.7rem;
    padding: 0.32rem 0.5rem;
  }

  [data-sp-embed] #create .create-demo__stage{
    min-height: 16rem;
  }

  [data-sp-embed] #create .create-demo__panel{
    width: min(100%, 15.5rem);
  }

  [data-sp-embed] #create .create-demo__chrome{
    padding: 0.7rem 0.9rem;
  }

  [data-sp-embed] #create .create-demo__chrome strong{
    font-size: 0.9rem;
  }

  [data-sp-embed] #create .create-demo__field > span{
    font-size: 0.78rem;
  }
}

@media (max-width: 767px) {
  /* Phone: preview only (hide editor form) */
  [data-sp-embed] #create .create-demo__body{
    grid-template-columns: 1fr;
    min-height: 0;
  }

  [data-sp-embed] #create .create-demo__editor{
    display: none;
  }

  [data-sp-embed] #create .create-demo__preview{
    padding: 0.75rem 0.7rem 0.9rem;
  }

  [data-sp-embed] #create .create-demo__preview-head{
    gap: 0.4rem;
    margin-bottom: 0.55rem;
  }

  [data-sp-embed] #create .create-demo__preview-head strong{
    font-size: 0.82rem;
  }

  [data-sp-embed] #create .create-demo__tab{
    font-size: 0.7rem;
    padding: 0.32rem 0.5rem;
  }

  [data-sp-embed] #create .create-demo__stage{
    min-height: 16rem;
    display: grid;
    place-items: start center;
    overflow: hidden;
  }

  [data-sp-embed] #create .create-demo__panel, [data-sp-embed] #create .create-demo__panel.is-active{
    width: min(100%, 16.5rem);
    transform: none;
    transition: none;
    justify-self: center;
    align-self: start;
  }

  [data-sp-embed] #create .create-demo__chrome{
    padding: 0.6rem 0.8rem;
  }

  [data-sp-embed] #create .create-demo__chrome strong{
    font-size: 0.88rem;
  }
}

@media (max-width: 640px) {
  [data-sp-embed] #create .create-demo__chrome-actions{
    display: none;
  }

  [data-sp-embed] #create .create-demo__panel, [data-sp-embed] #create .create-demo__panel.is-active{
    width: min(100%, 16.5rem);
  }
}

/* ===== AI platform: match Create section background + type ===== */
[data-sp-embed] #ai-platform.band-marketing{
  background: linear-gradient(180deg, #f8f9fa 0%, #fff8f9 55%, #fff5f7 100%);
}

[data-sp-embed] #ai-platform .showcase--analysis-full > .showcase-copy{
  text-align: center;
  align-items: center;
  justify-items: center;
  margin-inline: auto;
}

[data-sp-embed] #ai-platform .showcase-copy .section-label{
  color: #be185d;
}

[data-sp-embed] #ai-platform .showcase-copy h2{
  font-size: clamp(26px, 3.6vw + 0.4rem, 42px);
  line-height: 1.2;
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
}

[data-sp-embed] #ai-platform .showcase-copy .showcase-subtitle{
  margin: 14px 0 0;
  font-size: clamp(18px, 2.2vw + 0.35rem, 26px);
  line-height: 1.45;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink);
  max-width: 28em;
}

[data-sp-embed] #ai-platform .ai-platform-demo{
  width: min(100%, 56rem);
  margin: clamp(1.5rem, 3vw, 2.75rem) auto 0;
}

[data-sp-embed] #ai-platform .cms-ai-scene{
  width: 100%;
  max-width: none;
  margin: 0 auto;
}

/* ===== AI platform: PC = text left / visual right; mobile keeps stack ===== */
@media (min-width: 861px) {
  [data-sp-embed] #ai-platform .showcase--analysis-full{
    display: grid !important;
    grid-template-columns: minmax(12rem, 0.85fr) minmax(0, 1.35fr);
    align-items: center;
    gap: clamp(1.75rem, 4vw, 3.5rem);
    width: min(1200px, calc(100% - 8rem));
    margin-inline: auto;
  }

  [data-sp-embed] #ai-platform .showcase--analysis-full > .showcase-copy{
    text-align: left !important;
    align-items: flex-start !important;
    justify-items: start !important;
    margin: 0 !important;
    max-width: none;
  }

  [data-sp-embed] #ai-platform .showcase-copy .showcase-subtitle{
    margin-left: 0;
    margin-right: 0;
    max-width: 16em;
  }

  [data-sp-embed] #ai-platform .ai-platform-demo{
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  [data-sp-embed] #ai-platform .cms-ai-scene{
    aspect-ratio: 5 / 6;
    min-height: 26rem;
    max-height: 40rem;
  }
}

@media (max-width: 860px) {
  [data-sp-embed] #ai-platform .showcase--analysis-full{
    display: flex;
    flex-direction: column;
  }

  [data-sp-embed] #ai-platform .showcase--analysis-full > .showcase-copy{
    text-align: center;
    align-items: center;
    justify-items: center;
    margin-inline: auto;
  }

  [data-sp-embed] #ai-platform .ai-platform-demo{
    width: min(100%, 56rem);
    margin: clamp(1.5rem, 3vw, 2.75rem) auto 0;
  }
}

/* ===== Create: copy left + AI image right, demo below ===== */
[data-sp-embed] #create .create-hero{
  display: grid;
  grid-template-columns: minmax(12rem, 0.75fr) minmax(0, 1.35fr);
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  width: min(1200px, calc(100% - 8rem));
  margin: 0 auto clamp(1.5rem, 3vw, 2.75rem);
}

[data-sp-embed] #create .create-hero__copy{
  order: 1;
  text-align: left !important;
  align-items: flex-start !important;
  justify-items: start !important;
  margin: 0 !important;
  max-width: none;
  width: auto;
}

[data-sp-embed] #create .create-hero__copy .section-label{
  color: #be185d;
  font-size: clamp(0.85rem, 0.7rem + 0.35vw, 1.05rem);
  letter-spacing: 0.12em;
}

[data-sp-embed] #create .create-hero__copy h2{
  font-size: clamp(2.4rem, 1.4rem + 3.2vw, 4rem) !important;
  line-height: 1.15;
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
}

[data-sp-embed] #create .create-hero__copy .showcase-subtitle{
  margin: 1rem 0 0;
  font-size: clamp(1.15rem, 0.85rem + 1vw, 1.65rem) !important;
  line-height: 1.6;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
  max-width: 16em;
}

[data-sp-embed] #create .create-hero__visual{
  order: 2;
  min-width: 0;
  width: 100%;
  overflow: visible;
}

[data-sp-embed] #create .create-hero__shot-wrap{
  width: 100%;
  max-width: min(100%, 52rem);
  margin-inline: auto;
  will-change: transform, opacity;
}

[data-sp-embed] #create .create-hero__copy .ai-insight-tags{
  margin-top: 1.1rem;
  max-width: 22em;
}

[data-sp-embed] #create .create-hero__shot{
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  transform-origin: 50% 55%;
  filter:
    drop-shadow(0 0 8px rgba(147, 51, 234, 0.22))
    drop-shadow(0 0 22px rgba(168, 85, 247, 0.16))
    drop-shadow(0 14px 28px rgba(88, 28, 135, 0.1));
}

[data-sp-embed] #create .create-hero__shot-wrap.cms-ai-scene{
  max-width: min(100%, 46rem);
  filter: none;
  background: transparent;
}

[data-sp-embed].js #create .create-hero__visual:not(.visible) .create-hero__shot-wrap{
  opacity: 0;
  transform: translateY(22px) scale(0.78);
  animation: none;
}

[data-sp-embed].js #create .create-hero__visual.visible .create-hero__shot-wrap{
  animation: create-hero-shot-pop 0.58s cubic-bezier(0.16, 1.25, 0.3, 1) both;
}

[data-sp-embed]:not(.js) #create .create-hero__shot-wrap{
  opacity: 1;
  transform: none;
}

@keyframes create-hero-shot-pop {
  0% {
    opacity: 0;
    transform: translateY(26px) scale(0.72);
  }
  70% {
    opacity: 1;
    transform: translateY(-4px) scale(1.04);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}


/* iPad / モバイル: 作成ヒーローは文言中央 → 画像は下 */
@media (max-width: 1024px) {
  [data-sp-embed] #create .create-hero{
    grid-template-columns: 1fr !important;
    gap: clamp(1.25rem, 3.5vw, 2.25rem);
    align-items: center;
    justify-items: center;
    margin-bottom: clamp(1.25rem, 4vw, 2rem);
  }

  [data-sp-embed] #create .create-hero__copy{
    order: -1;
    width: 100%;
    max-width: min(36rem, 92%);
    margin-inline: auto !important;
    text-align: center !important;
    align-items: center !important;
    justify-items: center !important;
  }

  [data-sp-embed] #create .create-hero__visual{
    order: 0;
    width: 100%;
    max-width: min(40rem, 94%);
  }

  [data-sp-embed] #create .create-hero__shot-wrap{
    max-width: min(100%, 40rem);
    margin-inline: auto;
  }

  [data-sp-embed] #create .create-hero__copy .section-label, [data-sp-embed] #create .create-hero__copy h2, [data-sp-embed] #create .create-hero__copy .showcase-subtitle{
    text-align: center !important;
    margin-inline: auto !important;
  }

  [data-sp-embed] #create .create-hero__copy .showcase-subtitle, [data-sp-embed] #create .create-hero__copy .ai-insight-tags{
    max-width: 28em;
    margin-inline: auto !important;
  }

  [data-sp-embed] #create .create-hero__copy .ai-insight-tags{
    justify-content: center !important;
  }
}

@media (max-width: 767px) {
  [data-sp-embed] #create .create-hero__shot-wrap{
    max-width: 28rem;
  }
}

/* SNS反応分析動画: 左右は控えめに削り、PC横画面の比率を維持 */
[data-sp-embed] #analysis .ai-insight-card__preview--sns-video, [data-sp-embed] #analysis .ai-insight-card__preview--survey-video{
  --side-crop: 0.04;
  --media-zoom: 1;
  background: #fff !important;
  width: min(100%, 41rem);
  max-width: 41rem;
  margin-inline: auto;
  justify-self: center;
  overflow: hidden;
}

/* 録画時の左端黒縁を隠す（contain だとクロップが効かない） */
[data-sp-embed] #analysis .ai-insight-card__preview--sns-video{
  --side-crop: 0.05;
  --media-zoom: 1.03;
}

/* アンケート作成動画: 左右の黒帯をカット */
[data-sp-embed] #create .ai-insight-card__preview--survey-create-video{
  --side-crop: 0.12;
  --media-zoom: 1;
  background: #fff !important;
  width: min(100%, 41rem);
  max-width: 41rem;
  margin-inline: auto;
  justify-self: center;
  overflow: hidden;
}

[data-sp-embed] #analysis .ai-insight-card__preview--survey-video .ai-insight-card__media, [data-sp-embed] #create .ai-insight-card__preview--survey-create-video .ai-insight-card__media{
  object-fit: contain;
  object-position: center center;
  height: auto;
  aspect-ratio: auto;
}

[data-sp-embed] #analysis .ai-insight-card__preview--sns-video .ai-insight-card__media{
  object-fit: cover !important;
  object-position: 60% center !important;
  height: auto;
  aspect-ratio: 16 / 10;
  border: none !important;
  box-shadow: none !important;
}

@media (max-width: 860px) {
  [data-sp-embed] #analysis .ai-insight-card__preview--sns-video, [data-sp-embed] #analysis .ai-insight-card__preview--survey-video, [data-sp-embed] #create .ai-insight-card__preview--survey-create-video{
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    justify-self: stretch !important;
    overflow: hidden;
  }

  [data-sp-embed] #analysis .ai-insight-card__preview--survey-video{
    --side-crop: 0.04;
    --media-zoom: 1;
  }

  /*
    アンケート作成（モバイル）: 横幅は全幅のまま、高さは動画本来の比率。
    cover + 16/9 固定だと上下が欠けて縦比率が崩れる。
    左右の黒帯は --side-crop で隠す。
  */
  [data-sp-embed] #create .ai-insight-card__preview--survey-create-video{
    --side-crop: 0.13;
    --media-zoom: 1.02;
    aspect-ratio: auto !important;
    height: auto !important;
    min-height: 0 !important;
  }

  [data-sp-embed] #create .ai-insight-card__preview--survey-create-video .ai-insight-card__media{
    object-fit: contain !important;
    object-position: center center !important;
    aspect-ratio: auto !important;
    width: calc(100% / (1 - (2 * var(--side-crop))) * var(--media-zoom)) !important;
    height: auto !important;
    max-height: none !important;
  }

  /*
    SNS反応分析（モバイル）: 左端の黒線を隠す。
    録画内の左境界が見えているので、左側をやや強めに寄せてクリップ。
  */
  [data-sp-embed] #analysis .ai-insight-card__preview--sns-video{
    --side-crop: 0.08;
    --media-zoom: 1.1;
  }

  [data-sp-embed] #analysis .ai-insight-card__preview--sns-video .ai-insight-card__media{
    object-fit: cover !important;
    object-position: 78% center !important;
    aspect-ratio: 16 / 10;
    height: auto;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
  }

  [data-sp-embed] #analysis .ai-insight-card__preview--survey-video .ai-insight-card__media{
    object-fit: contain !important;
    object-position: center center !important;
    aspect-ratio: auto;
    height: auto;
  }
}

/* iPad縦: カード間の余白と動画比率を寄せる */
@media (min-width: 768px) and (max-width: 1024px) {
  [data-sp-embed] #analysis .ai-insight-card__preview--sns-video{
    --side-crop: 0.08;
    --media-zoom: 1.1;
  }

  [data-sp-embed] #analysis .ai-insight-card__preview--sns-video .ai-insight-card__media{
    object-fit: cover !important;
    object-position: 78% center !important;
  }

  [data-sp-embed] #create .ai-insight-card__preview--survey-create-video{
    --side-crop: 0.135;
    --media-zoom: 1.02;
  }

  [data-sp-embed] #create .ai-insight-card__preview--survey-create-video .ai-insight-card__media{
    object-fit: cover !important;
    object-position: center center !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel{
    --mgmt-card-w: min(72vw, 26rem);
    --mgmt-side-x: 12%;
    --mgmt-side-scale: 0.86;
    min-height: clamp(28rem, 62vw, 40rem);
    overflow: visible !important;
  }
}


/* Left floats (IG/FB): match right-side visual scale (landscape assets need larger width) */
[data-sp-embed] .hero--cms-story{
  --cms-hero-float-w-left: clamp(270px, 32vw, 480px);
}

[data-sp-embed] .hero--cms-story .hero-float--ig, [data-sp-embed] .hero--cms-story .hero-float--fb{
  width: var(--cms-hero-float-w-left) !important;
  max-width: none !important;
}

[data-sp-embed] .hero--cms-story .hero-float--line, [data-sp-embed] .hero--cms-story .hero-float--campaign{
  width: var(--cms-hero-float-w-lg) !important;
}

@media (min-width: 1400px) {
  [data-sp-embed] .hero--cms-story{
    --cms-hero-float-w-left: clamp(340px, 30vw, 520px);
    --cms-hero-float-w-lg: clamp(300px, 26vw, 460px);
  }
}

@media (max-width: 1100px) {
  [data-sp-embed] .hero--cms-story{
    --cms-hero-float-w-left: clamp(190px, 30vw, 290px);
  }
}

@media (max-width: 760px) {
  [data-sp-embed] .hero--cms-story{
    --cms-hero-float-w-left: clamp(132px, 40vw, 178px);
  }
}

/* All 4 hero floats: same large display size */
[data-sp-embed] .hero--cms-story{
  --cms-hero-float-w-all: clamp(300px, 34vw, 520px);
}

[data-sp-embed] .hero--cms-story .hero-float--ig, [data-sp-embed] .hero--cms-story .hero-float--line, [data-sp-embed] .hero--cms-story .hero-float--fb, [data-sp-embed] .hero--cms-story .hero-float--campaign{
  width: var(--cms-hero-float-w-all) !important;
  max-width: none !important;
}

@media (min-width: 1400px) {
  [data-sp-embed] .hero--cms-story{
    --cms-hero-float-w-all: clamp(360px, 32vw, 560px);
  }
}

@media (max-width: 1100px) {
  [data-sp-embed] .hero--cms-story{
    --cms-hero-float-w-all: clamp(200px, 32vw, 310px);
  }
}

@media (max-width: 760px) {
  [data-sp-embed] .hero--cms-story{
    --cms-hero-float-w-all: clamp(140px, 42vw, 190px);
  }
}

/* Hero floats even larger */
[data-sp-embed] .hero--cms-story{
  --cms-hero-float-w-all: clamp(340px, 38vw, 580px);
}

@media (min-width: 1400px) {
  [data-sp-embed] .hero--cms-story{
    --cms-hero-float-w-all: clamp(400px, 36vw, 620px);
  }
}

@media (max-width: 1100px) {
  [data-sp-embed] .hero--cms-story{
    --cms-hero-float-w-all: clamp(220px, 36vw, 340px);
  }
}

@media (max-width: 760px) {
  [data-sp-embed] .hero--cms-story{
    --cms-hero-float-w-all: clamp(150px, 46vw, 210px);
  }
}

/* Campaign (BR) smaller; other three floats larger — desktop only */
@media (min-width: 1101px) {
  [data-sp-embed] .hero--cms-story .hero-float--ig, [data-sp-embed] .hero--cms-story .hero-float--line, [data-sp-embed] .hero--cms-story .hero-float--fb{
    width: clamp(360px, 40vw, 620px) !important;
  }

  [data-sp-embed] .hero--cms-story .hero-float--campaign{
    width: clamp(250px, 28vw, 420px) !important;
  }
}

@media (min-width: 1400px) {
  [data-sp-embed] .hero--cms-story .hero-float--ig, [data-sp-embed] .hero--cms-story .hero-float--line, [data-sp-embed] .hero--cms-story .hero-float--fb{
    width: clamp(420px, 38vw, 660px) !important;
  }

  [data-sp-embed] .hero--cms-story .hero-float--campaign{
    width: clamp(290px, 26vw, 460px) !important;
  }
}

@media (max-width: 1100px) {
  [data-sp-embed] .hero--cms-story .hero-float--ig, [data-sp-embed] .hero--cms-story .hero-float--line, [data-sp-embed] .hero--cms-story .hero-float--fb{
    width: clamp(230px, 38vw, 360px) !important;
  }

  [data-sp-embed] .hero--cms-story .hero-float--campaign{
    width: clamp(170px, 28vw, 260px) !important;
  }
}

@media (max-width: 760px) {
  [data-sp-embed] .hero--cms-story .hero-float--ig, [data-sp-embed] .hero--cms-story .hero-float--line, [data-sp-embed] .hero--cms-story .hero-float--fb{
    width: clamp(155px, 48vw, 220px) !important;
  }

  [data-sp-embed] .hero--cms-story .hero-float--campaign{
    width: clamp(120px, 36vw, 170px) !important;
  }
}

/* Hero title slightly larger; side floats further out */
[data-sp-embed] .hero--cms-story .hero-center{
  width: min(24rem, 38vw) !important;
  max-width: min(24rem, 38vw) !important;
}

[data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
  font-size: clamp(2.15rem, 1.15rem + 2.45vw, 3.55rem) !important;
  line-height: 1.2 !important;
}

[data-sp-embed] .hero--cms-story{
  --cms-hero-float-side: clamp(0.85rem, 2.8vw, 3.25rem);
}

@media (min-width: 1400px) {
  [data-sp-embed] .hero--cms-story{
    --cms-hero-float-side: clamp(1.25rem, 3.2vw, 4rem);
  }

  [data-sp-embed] .hero--cms-story .hero-center{
    width: min(26rem, 34vw) !important;
    max-width: min(26rem, 34vw) !important;
  }

  [data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
    font-size: clamp(2.35rem, 1.2rem + 2.5vw, 3.75rem) !important;
  }
}

@media (max-width: 1100px) {
  [data-sp-embed] .hero--cms-story{
    --cms-hero-float-side: clamp(0.35rem, 1.6vw, 1.25rem);
  }

  [data-sp-embed] .hero--cms-story .hero-center{
    width: min(17rem, 42vw) !important;
    max-width: min(17rem, 42vw) !important;
  }

  [data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
    font-size: clamp(1.65rem, 1rem + 1.85vw, 2.45rem) !important;
  }
}

@media (max-width: 860px) {
  [data-sp-embed] .hero--cms-story{
    --cms-hero-float-side: -0.15rem;
  }

  [data-sp-embed] .hero--cms-story .hero-center{
    width: min(16rem, 62vw) !important;
    max-width: min(16rem, 62vw) !important;
  }

  [data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
    font-size: clamp(1.7rem, 5.2vw, 2.15rem) !important;
  }
}


/* ===== Management: centered coverflow + swipe ===== */
[data-sp-embed] #management .showcase--analysis-full > .showcase-copy{
  text-align: center !important;
  justify-items: center;
  justify-self: center;
  width: min(52rem, 100%);
  margin-inline: auto;
}

[data-sp-embed] #management .showcase--analysis-full > .showcase-capabilities.analysis-capabilities{
  width: 100%;
  max-width: none;
  overflow: visible;
}

[data-sp-embed] #management .ai-insights-bento--mgmt-carousel{
  --mgmt-card-w: min(78vw, 62rem);
  --mgmt-side-x: 34%;
  --mgmt-side-scale: 0.82;
  position: relative;
  display: block;
  width: min(100%, 96rem);
  max-width: 96rem;
  margin: clamp(1rem, 2.5vw, 2rem) auto 0;
  min-height: clamp(28rem, 48vw, 42rem);
  padding: 1.5rem 0 2rem;
  perspective: 1600px;
  overflow: visible;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

[data-sp-embed] #management .ai-insights-bento--mgmt-carousel.is-dragging{
  cursor: grabbing;
}

[data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card{
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--mgmt-card-w);
  max-width: var(--mgmt-card-w);
  margin: 0;
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
  transition:
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.45s ease,
    filter 0.45s ease,
    box-shadow 0.45s ease;
  will-change: transform, opacity;
  backface-visibility: hidden;
  background: #fff !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.1);
  overflow: hidden;
  -webkit-user-drag: none;
}

[data-sp-embed] #management .ai-insights-bento--mgmt-carousel.is-dragging > .ai-insight-card{
  transition: none;
}

[data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card img{
  -webkit-user-drag: none;
  pointer-events: none;
}

/* Front card */
[data-sp-embed].js #showcases #management .reveal.visible .ai-insights-bento--mgmt-carousel > .ai-insight-card[data-mgmt-pos="0"], [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card[data-mgmt-pos="0"]{
  transform: translate(-50%, -50%) scale(1) !important;
  opacity: 1 !important;
  filter: brightness(1);
  z-index: 5;
  box-shadow:
    0 28px 60px rgba(15, 23, 42, 0.16),
    0 0 0 1px rgba(22, 163, 74, 0.14) !important;
  pointer-events: auto;
}

/* Right behind */
[data-sp-embed].js #showcases #management .reveal.visible .ai-insights-bento--mgmt-carousel > .ai-insight-card[data-mgmt-pos="1"], [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card[data-mgmt-pos="1"]{
  transform: translate(calc(-50% + var(--mgmt-side-x)), calc(-50% + 1.25rem)) scale(var(--mgmt-side-scale)) rotateY(-16deg) !important;
  opacity: 0.62 !important;
  filter: brightness(0.94);
  z-index: 2;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.1) !important;
  pointer-events: auto;
  cursor: pointer;
}

/* Left behind */
[data-sp-embed].js #showcases #management .reveal.visible .ai-insights-bento--mgmt-carousel > .ai-insight-card[data-mgmt-pos="2"], [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card[data-mgmt-pos="2"]{
  transform: translate(calc(-50% - var(--mgmt-side-x)), calc(-50% + 1.25rem)) scale(var(--mgmt-side-scale)) rotateY(16deg) !important;
  opacity: 0.62 !important;
  filter: brightness(0.94);
  z-index: 1;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.1) !important;
  pointer-events: auto;
  cursor: pointer;
}

/* Keep split-card layout; images keep natural aspect + browser chrome */
@media (min-width: 900px) {
  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel{
    --mgmt-card-w: min(74vw, 70rem);
    --mgmt-side-x: 36%;
    min-height: clamp(34rem, 48vw, 46rem);
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card{
    display: grid !important;
    grid-template-columns: minmax(0, 1.28fr) minmax(17rem, 0.82fr);
    grid-template-rows: auto auto;
    grid-template-areas:
      "label label"
      "preview body";
    min-height: 0;
    align-items: stretch;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card .ai-insight-card__media-label{
    grid-area: label;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card .ai-insight-card__preview{
    grid-area: preview;
    height: auto;
    min-height: 0;
    border-bottom: none;
    border-right: 1px solid rgba(60, 60, 67, 0.12);
    background: #f5f5f7;
    padding: 12px 12px 14px !important;
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card.ai-insight-card--hero-split-reverse{
    grid-template-columns: minmax(17rem, 0.82fr) minmax(0, 1.28fr);
    grid-template-areas:
      "label label"
      "body preview";
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card.ai-insight-card--hero-split-reverse .ai-insight-card__preview{
    border-right: none;
    border-left: 1px solid rgba(60, 60, 67, 0.12);
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card .ai-insight-card__body{
    grid-area: body;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(1.15rem, 1.8vw, 1.65rem) clamp(1.2rem, 1.9vw, 1.75rem) !important;
    gap: 0.15rem;
  }

  /* macOS-like window top bar on screenshots */
  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card .ai-insight-card__preview::before{
    content: "" !important;
    display: block !important;
    flex: 0 0 auto;
    height: 32px;
    border: 1px solid rgba(60, 60, 67, 0.12);
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    background:
      radial-gradient(circle at 15px 50%, #ff5f57 0 5px, transparent 6px),
      radial-gradient(circle at 35px 50%, #febc2e 0 5px, transparent 6px),
      radial-gradient(circle at 55px 50%, #28c840 0 5px, transparent 6px),
      linear-gradient(180deg, #f6f6f7 0%, #ebebed 100%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card .ai-insight-card__preview img{
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    object-fit: contain;
    object-position: top center;
    border: 1px solid rgba(60, 60, 67, 0.12) !important;
    border-top: none !important;
    border-radius: 0 0 10px 10px !important;
    box-shadow:
      0 10px 28px rgba(0, 0, 0, 0.08),
      0 1px 0 rgba(255, 255, 255, 0.5) inset !important;
    background: #fff;
  }
}

/* 広めPC: 静的3列（説明文はタグカード型に合わせて非表示） */
@media (min-width: 1280px) {
  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel:not(.ai-insights-bento--marquee){
    min-height: 0;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel:not(.ai-insights-bento--marquee) .ai-insight-card__body{
    display: flex !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel:not(.ai-insights-bento--marquee) .ai-insight-card__body > p{
    display: none !important;
  }
}

/* Coverflow/marquee has its own motion — don't keep hero-split entrance (opacity 0 + translate) */
[data-sp-embed].js #showcases #management .ai-insights-bento--mgmt-carousel .ai-insight-card--hero-split .hero-split-media, [data-sp-embed].js #showcases #management .ai-insights-bento--mgmt-carousel .ai-insight-card--hero-split > .hero-split-title, [data-sp-embed].js #showcases #management .ai-insights-bento--mgmt-carousel .ai-insight-card--hero-split .hero-split-copy > .ai-insight-card__media-label, [data-sp-embed].js #showcases #management .ai-insights-bento--mgmt-carousel .ai-insight-card--hero-split .hero-split-copy > p, [data-sp-embed].js #showcases #management .ai-insights-bento--mgmt-carousel .ai-insight-card--hero-split .hero-split-copy > .ai-insight-tags, [data-sp-embed].js #showcases #management .ai-insights-bento--mgmt-carousel .ai-insight-card--hero-split .hero-split-copy .ai-insight-tag, [data-sp-embed].js #showcases #management .ai-insights-bento--mgmt-carousel .ai-insight-card--hero-split .hero-split-copy > p .hero-subtitle-char{
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  animation: none !important;
  transition: none !important;
}

/* Management carousel type: keep title > copy > tags hierarchy, slightly compact */
[data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-card__media-label{
  padding: 0.72rem 1rem 0.6rem !important;
}

[data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-card__media-label h3{
  font-size: clamp(1.05rem, 0.95rem + 0.32vw, 1.22rem) !important;
  line-height: 1.3 !important;
  letter-spacing: -0.02em;
}

[data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-card__body p{
  font-size: clamp(0.82rem, 0.76rem + 0.16vw, 0.92rem) !important;
  line-height: 1.65 !important;
  margin-bottom: 0.65rem !important;
}

[data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-tags--story{
  gap: 0.38rem !important;
}

[data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-tag{
  font-size: clamp(0.7rem, 0.66rem + 0.1vw, 0.78rem) !important;
  padding: 0.3rem 0.58rem !important;
}

/* Mobile: still show browser chrome on images */
@media (max-width: 899px) {
  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card .ai-insight-card__preview{
    display: flex !important;
    flex-direction: column;
    padding: 10px 10px 12px !important;
    background: #f5f5f7 !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card .ai-insight-card__preview::before{
    content: "" !important;
    display: block !important;
    height: 28px;
    border: 1px solid rgba(60, 60, 67, 0.12);
    border-bottom: none;
    border-radius: 9px 9px 0 0;
    background:
      radial-gradient(circle at 13px 50%, #ff5f57 0 4.5px, transparent 5.5px),
      radial-gradient(circle at 30px 50%, #febc2e 0 4.5px, transparent 5.5px),
      radial-gradient(circle at 47px 50%, #28c840 0 4.5px, transparent 5.5px),
      linear-gradient(180deg, #f6f6f7 0%, #ebebed 100%);
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card .ai-insight-card__preview img{
    border: 1px solid rgba(60, 60, 67, 0.12) !important;
    border-top: none !important;
    border-radius: 0 0 9px 9px !important;
    width: 100%;
    height: auto;
    object-fit: contain !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card .ai-insight-card__body{
    padding: 1rem 1.05rem 1.15rem !important;
  }
}

/* Management cards: Apple-like system surfaces */
[data-sp-embed] #management .ai-insights-bento--mgmt-carousel{
  --apple-label: #1d1d1f;
  --apple-secondary: #6e6e73;
  --apple-fill: #f5f5f7;
  --apple-separator: rgba(60, 60, 67, 0.12);
  --apple-blue: #0071e3;
  --apple-green: #30d158;
}

[data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card{
  background:
    linear-gradient(180deg, #ffffff 0%, #fbfbfd 100%) !important;
  border: 1px solid var(--apple-separator) !important;
  border-radius: 18px !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 10px 28px rgba(0, 0, 0, 0.06),
    0 28px 56px rgba(0, 0, 0, 0.08) !important;
  color: var(--apple-label);
}

[data-sp-embed].js #showcases #management .reveal.visible .ai-insights-bento--mgmt-carousel > .ai-insight-card[data-mgmt-pos="0"], [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card[data-mgmt-pos="0"]{
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 14px 36px rgba(0, 0, 0, 0.08),
    0 36px 72px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(0, 113, 227, 0.12) !important;
}

[data-sp-embed].js #showcases #management .reveal.visible .ai-insights-bento--mgmt-carousel > .ai-insight-card[data-mgmt-pos="1"], [data-sp-embed].js #showcases #management .reveal.visible .ai-insights-bento--mgmt-carousel > .ai-insight-card[data-mgmt-pos="2"], [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card[data-mgmt-pos="1"], [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card[data-mgmt-pos="2"]{
  background:
    linear-gradient(180deg, #fbfbfd 0%, #f5f5f7 100%) !important;
  opacity: 0.78 !important;
  filter: saturate(0.92) brightness(0.99);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 8px 24px rgba(0, 0, 0, 0.06) !important;
}

[data-sp-embed] .band-management .ai-insight-card__media-label, [data-sp-embed].js .band-management .reveal.visible .ai-insight-card__media-label{
  background: linear-gradient(180deg, #ffffff 0%, #fbfbfd 100%) !important;
  border-bottom-color: var(--apple-separator, rgba(60, 60, 67, 0.12)) !important;
  color: var(--apple-label, #1d1d1f);
}

[data-sp-embed] .band-management .ai-insight-card__media-label h3{
  color: #1d1d1f !important;
  font-weight: 650;
  letter-spacing: -0.01em;
}

[data-sp-embed] .band-management .ai-insight-card__media-label-dot, [data-sp-embed].js .band-management .reveal.visible .ai-insight-card__media-label-dot{
  background: linear-gradient(180deg, #64d2ff 0%, #0071e3 100%) !important;
  box-shadow:
    0 0 0 3px rgba(0, 113, 227, 0.14),
    0 0 10px rgba(0, 113, 227, 0.28) !important;
}

[data-sp-embed] .band-management .ai-insight-card__body{
  background: #ffffff !important;
  color: #1d1d1f;
}

[data-sp-embed] .band-management .ai-insight-card__body p{
  color: #3c3c43 !important;
}

[data-sp-embed] .band-management .ai-insight-card__body p .text-accent-em{
  color: #3c3c43 !important;
  font-weight: 600;
  background: none !important;
  padding: 0;
}

[data-sp-embed] #create .ai-insight-card__body p, [data-sp-embed] #analysis .ai-insight-card__body p, [data-sp-embed] #create .ai-insight-card__body p .text-accent-em, [data-sp-embed] #analysis .ai-insight-card__body p .text-accent-em, [data-sp-embed] #create .ai-insight-card__body p .hero-subtitle-char, [data-sp-embed] #analysis .ai-insight-card__body p .hero-subtitle-char{
  color: #3c3c43 !important;
  font-weight: 500;
  background: none !important;
  padding: 0;
}

[data-sp-embed] .band-management .ai-insight-tags--story .ai-insight-tag--channel, [data-sp-embed] .band-management .ai-insight-tags--story .ai-insight-tag--system, [data-sp-embed] .band-management .ai-insight-tags--story .ai-insight-tag--content, [data-sp-embed] .band-management .ai-insight-tags--story .ai-insight-tag--inquiry{
  color: #1d1d1f !important;
  background: #f5f5f7 !important;
  border-color: rgba(60, 60, 67, 0.1) !important;
  border-radius: 980px;
}

@media (hover: hover) and (pointer: fine) {
  [data-sp-embed].js .band-management .reveal.visible .ai-insight-card:hover .ai-insight-card__media-label-dot, [data-sp-embed].js .band-management .reveal.visible .ai-insight-card:nth-child(1):hover .ai-insight-card__media-label-dot, [data-sp-embed].js .band-management .reveal.visible .ai-insight-card:nth-child(2):hover .ai-insight-card__media-label-dot, [data-sp-embed].js .band-management .reveal.visible .ai-insight-card:nth-child(3):hover .ai-insight-card__media-label-dot, [data-sp-embed] .band-management .ai-insight-card:hover .ai-insight-card__media-label-dot{
    background: linear-gradient(180deg, #64d2ff 0%, #0071e3 100%) !important;
    filter: none !important;
    box-shadow:
      0 0 0 4px rgba(0, 113, 227, 0.18),
      0 0 14px rgba(0, 113, 227, 0.35) !important;
    animation: none !important;
  }

  [data-sp-embed].js .band-management .reveal.visible .ai-insight-card:hover .ai-insight-card__media-label-dot::after, [data-sp-embed] .band-management .ai-insight-card:hover .ai-insight-card__media-label-dot::after{
    background: radial-gradient(circle, rgba(0, 113, 227, 0.35) 0%, rgba(0, 113, 227, 0.1) 45%, transparent 70%) !important;
    animation: none !important;
  }

  [data-sp-embed] .band-management .ai-insight-card:hover .ai-insight-card__media-label{
    background: linear-gradient(180deg, #ffffff 0%, #fbfbfd 100%) !important;
    border-bottom-color: rgba(60, 60, 67, 0.12) !important;
  }
}

@media (min-width: 900px) {
  /* Don't strip chrome from management carousel screenshots */
  [data-sp-embed] .band-management .ai-insight-card__preview:not(.hero-split-media){
    padding: 0 !important;
    background: #fff !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card .ai-insight-card__preview{
    padding: 12px 12px 14px !important;
    background: #f5f5f7 !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card .ai-insight-card__preview::before{
    display: block !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card .ai-insight-card__preview img{
    border: 1px solid rgba(60, 60, 67, 0.12) !important;
    border-top: none !important;
    border-radius: 0 0 10px 10px !important;
    box-shadow:
      0 10px 28px rgba(0, 0, 0, 0.08),
      0 1px 0 rgba(255, 255, 255, 0.5) inset !important;
    width: 100%;
    height: auto;
    object-fit: contain !important;
    object-position: top center;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card .ai-insight-card__preview{
    border-right-color: rgba(60, 60, 67, 0.12);
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card.ai-insight-card--hero-split-reverse .ai-insight-card__preview{
    border-left-color: rgba(60, 60, 67, 0.12);
  }
}

@media (max-width: 899px) {
  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel{
    --mgmt-card-w: min(74vw, 24rem);
    --mgmt-side-x: 12%;
    --mgmt-side-scale: 0.86;
    min-height: clamp(26rem, 96vw, 38rem);
    overflow: visible !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card .ai-insight-card__preview img{
    flex: 0 0 auto;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    min-height: 8rem;
  }
}

/* Integration: bright soft-red gradient + neon CTA */
[data-sp-embed] #integration.integration-band{
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0) 58%),
    linear-gradient(180deg, #fff9fa 0%, #fff1f4 42%, #ffe8ee 100%);
}

[data-sp-embed] #integration .button.button--neon{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #0a0a0a;
  color: #fff;
  border: 1px solid rgba(255, 80, 110, 0.55);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06) inset,
    0 0 18px rgba(244, 63, 94, 0.45),
    0 0 42px rgba(225, 29, 72, 0.28),
    0 10px 28px rgba(15, 23, 42, 0.18);
  animation: integration-neon-pulse 2.4s ease-in-out infinite;
}

[data-sp-embed] #integration .button.button--neon::before{
  content: "";
  position: absolute;
  inset: -40% -60%;
  background: linear-gradient(
    115deg,
    transparent 35%,
    rgba(255, 255, 255, 0.35) 48%,
    rgba(255, 180, 190, 0.45) 52%,
    transparent 65%
  );
  transform: translateX(-130%);
  animation: integration-neon-shine 3.2s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

[data-sp-embed] #integration .button.button--neon:hover{
  background: #111;
  border-color: rgba(255, 120, 145, 0.85);
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1) inset,
    0 0 26px rgba(244, 63, 94, 0.65),
    0 0 58px rgba(225, 29, 72, 0.4),
    0 14px 32px rgba(29, 78, 216, 0.28);
}

@keyframes integration-neon-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.06) inset,
      0 0 14px rgba(244, 63, 94, 0.35),
      0 0 34px rgba(225, 29, 72, 0.2),
      0 10px 28px rgba(15, 23, 42, 0.16);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.1) inset,
      0 0 26px rgba(244, 63, 94, 0.7),
      0 0 56px rgba(225, 29, 72, 0.42),
      0 12px 30px rgba(15, 23, 42, 0.2);
  }
}

@keyframes integration-neon-shine {
  0%, 40% { transform: translateX(-130%); }
  62% { transform: translateX(130%); }
  100% { transform: translateX(130%); }
}

/* PC: Integration + Contact を大きく見せる */
@media (min-width: 900px) {
  [data-sp-embed] #integration.integration-band{
    padding-block: clamp(6.5rem, 9vw, 9rem) !important;
  }

  [data-sp-embed] #integration .section-heading{
    max-width: 58rem;
    margin-bottom: 0;
  }

  [data-sp-embed] #integration .section-label{
    font-size: 0.9375rem;
    letter-spacing: 0.16em;
    margin-bottom: 1.5rem;
  }

  [data-sp-embed] #integration .section-heading h2{
    font-size: clamp(2.75rem, 3.2vw + 1.1rem, 3.85rem);
    line-height: 1.15;
  }

  [data-sp-embed] #integration .feature-index__lead{
    margin-top: 1.65rem;
    max-width: 44rem;
    font-size: clamp(1.125rem, 0.55vw + 0.95rem, 1.35rem);
    line-height: 1.8;
  }

  [data-sp-embed] #integration .hero-actions{
    margin-top: 2.15rem;
  }

  [data-sp-embed] #integration .button.button--neon{
    min-height: 3.85rem;
    padding: 1.05rem 2.5rem;
    font-size: 1.125rem;
    font-weight: 650;
  }

  [data-sp-embed] #contact.contact.section-band{
    padding-block: clamp(6.5rem, 9vw, 9rem) !important;
  }

  [data-sp-embed] #contact .contact-inner{
    max-width: 64rem;
    padding-block-end: 2.25rem;
  }

  [data-sp-embed] #contact .section-label{
    font-size: 0.9375rem;
    letter-spacing: 0.16em;
    margin-bottom: 1.6rem;
  }

  [data-sp-embed] #contact .contact h2, [data-sp-embed] #contact h2{
    font-size: clamp(2.65rem, 3vw + 1rem, 3.75rem);
    line-height: 1.18;
  }

  [data-sp-embed] #contact .contact__lead, [data-sp-embed] #contact p:not(.section-label){
    margin-top: 1.25rem;
    margin-bottom: 2.5rem;
    max-width: 40rem;
    font-size: clamp(1.125rem, 0.45vw + 0.95rem, 1.3rem);
    line-height: 1.75;
  }

  [data-sp-embed] #contact .hero-actions{
    gap: 1rem;
  }

  [data-sp-embed] #contact .hero-actions .button{
    min-height: 3.85rem;
    padding: 1.05rem 2.4rem;
    font-size: 1.125rem;
  }

  [data-sp-embed] #contact .hero-actions .button.secondary.button--glow{
    min-height: 4rem;
    padding: 1.1rem 2.55rem;
    font-size: 1.15rem;
  }
}

/* ===== Create / Analysis / Management: shared inset + band shell ===== */
[data-sp-embed] #create, [data-sp-embed] #analysis, [data-sp-embed] #management{
  --showcase-pad-inline: clamp(12px, 2.2vw, 36px);
  --showcase-content-max: min(96rem, 100%);
  --showcase-band-soft: #f8f9fa;
  box-sizing: border-box;
  width: 100%;
  padding-block: clamp(88px, 10vw, 132px) !important;
  padding-inline: var(--showcase-pad-inline) !important;
}

@media (min-width: 900px) {
  [data-sp-embed] #create, [data-sp-embed] #analysis, [data-sp-embed] #management{
    --showcase-pad-inline: clamp(4.5rem, 12vw, 14rem);
  }
}

[data-sp-embed] #create.band-marketing{
  background: linear-gradient(
    180deg,
    var(--showcase-band-soft) 0%,
    #fff8f9 48%,
    #fff5f7 100%
  );
}

[data-sp-embed] #analysis.band-analysis{
  background: linear-gradient(
    180deg,
    var(--showcase-band-soft) 0%,
    #faf5ff 48%,
    #f5f3ff 100%
  );
}

[data-sp-embed] #management.band-management{
  background: linear-gradient(
    180deg,
    var(--showcase-band-soft) 0%,
    #f4fdf8 48%,
    #ecfdf5 100%
  );
}

[data-sp-embed] #create .showcase.showcase--analysis-full, [data-sp-embed] #analysis .showcase.showcase--analysis-full, [data-sp-embed] #management .showcase.showcase--analysis-full{
  width: 100% !important;
  max-width: var(--showcase-content-max) !important;
  margin-inline: auto !important;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  justify-items: stretch;
  box-sizing: border-box;
}

[data-sp-embed] #create .showcase--analysis-full > .showcase-copy, [data-sp-embed] #analysis .showcase--analysis-full > .showcase-copy, [data-sp-embed] #management .showcase--analysis-full > .showcase-copy{
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  justify-self: stretch !important;
}

[data-sp-embed] #create .create-hero{
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  box-sizing: border-box;
}

[data-sp-embed] #create .create-demo{
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  box-sizing: border-box;
}

[data-sp-embed] #create .showcase-capabilities, [data-sp-embed] #analysis .showcase-capabilities, [data-sp-embed] #management .showcase-capabilities{
  --insight-band-pad-inline: 0px;
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  box-sizing: border-box;
  overflow-x: visible;
}

[data-sp-embed] #create .ai-insights-bento, [data-sp-embed] #analysis .ai-insights-bento, [data-sp-embed] #management .ai-insights-bento{
  width: 100%;
  max-width: none;
  margin-inline: 0;
  box-sizing: border-box;
}

/* Coverflow sizing is desktop-only — never override mobile marquee track */
@media (min-width: 1280px) {
  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel:not(.ai-insights-bento--marquee){
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    --mgmt-card-w: min(92vw, 76rem);
    --mgmt-side-x: clamp(24%, 30vw, 38%);
    min-height: clamp(30rem, 50vw, 48rem);
  }
}

[data-sp-embed] #analysis .showcase--analysis-full > .showcase-copy, [data-sp-embed] #management .showcase--analysis-full > .showcase-copy{
  text-align: center !important;
  justify-items: center;
}

/* Keep Create AI visual sizing as-is (not part of the text scale-up) */
[data-sp-embed] #create .create-hero__shot-wrap{
  max-width: min(100%, 52rem);
}

[data-sp-embed] #analysis .ai-insight-card__preview--sns-video, [data-sp-embed] #analysis .ai-insight-card__preview--survey-video, [data-sp-embed] #create .ai-insight-card__preview--survey-create-video{
  width: min(100%, 48rem) !important;
  max-width: min(100%, 48rem) !important;
  margin-inline: auto;
  box-sizing: border-box;
}

/* Larger body/UI type (titles / h2 kept; AI強調色はサイズ変更しない) */
[data-sp-embed] #create .create-hero__copy .section-label, [data-sp-embed] #analysis .showcase-copy .section-label, [data-sp-embed] #management .showcase-copy .section-label{
  font-size: clamp(0.95rem, 0.8rem + 0.35vw, 1.15rem) !important;
}

[data-sp-embed] #create .create-hero__copy .showcase-subtitle, [data-sp-embed] #analysis .showcase-copy .showcase-subtitle, [data-sp-embed] #management .showcase-copy .showcase-subtitle{
  font-size: clamp(1.28rem, 1rem + 0.85vw, 1.85rem) !important;
  line-height: 1.65 !important;
  max-width: 22em;
  color: #4b5563;
  font-weight: 500;
}

/* Mobile / stacked layout: hide section subtitles under Create / Analysis / Management */
@media (max-width: 899px) {
  [data-sp-embed] #create .create-hero__copy .showcase-subtitle, [data-sp-embed] #analysis .showcase-copy .showcase-subtitle, [data-sp-embed] #management .showcase-copy .showcase-subtitle{
    display: none !important;
  }
}

[data-sp-embed] #create .create-hero__copy .showcase-subtitle .text-accent-em, [data-sp-embed] #analysis .showcase-copy .showcase-subtitle .text-accent-em, [data-sp-embed] #management .showcase-copy .showcase-subtitle .text-accent-em{
  color: #374151;
}

[data-sp-embed] #analysis .showcase-copy .showcase-subtitle, [data-sp-embed] #management .showcase-copy .showcase-subtitle{
  margin-inline: auto;
  text-align: center;
}

[data-sp-embed] #create .ai-insight-card__media-label h3, [data-sp-embed] #analysis .ai-insight-card__media-label h3, [data-sp-embed] #management .ai-insight-card__media-label h3{
  font-size: clamp(1.6rem, 1.25rem + 0.95vw, 2.15rem) !important;
  line-height: 1.45 !important;
}

[data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-card__media-label h3{
  font-size: clamp(1.22rem, 1.08rem + 0.32vw, 1.42rem) !important;
  line-height: 1.3 !important;
}

[data-sp-embed] #create .ai-insight-card__body p, [data-sp-embed] #analysis .ai-insight-card__body p, [data-sp-embed] #management .ai-insight-card__body p, [data-sp-embed] #create .create-demo__story p{
  font-size: clamp(1.22rem, 1.05rem + 0.55vw, 1.48rem) !important;
  line-height: 1.95 !important;
}

/* PC: タイトルとの階層を残しつつ、機能内の説明をもう一段大きく */
@media (min-width: 861px) {
  [data-sp-embed] #create .ai-insight-card__body p, [data-sp-embed] #analysis .ai-insight-card__body p, [data-sp-embed] #management .ai-insight-card__body p, [data-sp-embed] #create .ai-insights-bento--pair > .ai-insight-card--hero-split .ai-insight-card__body > p, [data-sp-embed] #analysis .ai-insights-bento--pair > .ai-insight-card--hero-split .ai-insight-card__body > p, [data-sp-embed] #create .create-demo__story p{
    font-size: clamp(1.12rem, 0.98rem + 0.38vw, 1.28rem) !important;
    line-height: 1.95 !important;
  }

  /* 機能内カード: 画像の高さに対してタイトル〜説明が詰まらないよう行間を確保 */
  [data-sp-embed] #create .ai-insights-bento--pair > .ai-insight-card.ai-insight-card--hero-split, [data-sp-embed] #analysis .ai-insights-bento--pair > .ai-insight-card.ai-insight-card--hero-split, [data-sp-embed] #management .ai-insights-bento--pair > .ai-insight-card.ai-insight-card--hero-split{
    row-gap: 0.85rem !important;
  }

  [data-sp-embed] #create .ai-insights-bento--pair > .ai-insight-card--hero-split .ai-insight-card__body, [data-sp-embed] #analysis .ai-insights-bento--pair > .ai-insight-card--hero-split .ai-insight-card__body, [data-sp-embed] #management .ai-insights-bento--pair > .ai-insight-card--hero-split .ai-insight-card__body{
    gap: clamp(14px, 1.8vw, 20px) !important;
  }
}

[data-sp-embed] #create .ai-insight-tag, [data-sp-embed] #analysis .ai-insight-tag, [data-sp-embed] #management .ai-insight-tag, [data-sp-embed] #create .create-demo__story .ai-insight-tag{
  font-size: clamp(0.86rem, 0.8rem + 0.16vw, 0.98rem) !important;
  padding: 0.42rem 0.82rem !important;
  line-height: 1.35 !important;
}

[data-sp-embed] #create .create-demo__field > span{
  font-size: 0.9rem !important;
}

[data-sp-embed] #create .create-demo__field strong, [data-sp-embed] #create .create-demo__field p, [data-sp-embed] #create .create-demo__title-box, [data-sp-embed] #create .create-demo__url{
  font-size: clamp(0.82rem, 0.78rem + 0.12vw, 0.9rem) !important;
}

[data-sp-embed] #create .create-demo__chrome strong, [data-sp-embed] #create .create-demo__preview-head{
  font-size: 1.02rem !important;
}

[data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-card__body p{
  font-size: clamp(0.95rem, 0.86rem + 0.22vw, 1.08rem) !important;
  line-height: 1.7 !important;
}

@media (min-width: 861px) {
  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-card__body p{
    font-size: clamp(0.95rem, 0.86rem + 0.22vw, 1.08rem) !important;
    line-height: 1.7 !important;
  }
}

[data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-card__media-label h3{
  font-size: clamp(1.22rem, 1.08rem + 0.32vw, 1.42rem) !important;
}

[data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-tag{
  font-size: clamp(0.88rem, 0.82rem + 0.18vw, 1rem) !important;
  padding: 0.44rem 0.86rem !important;
}

@media (min-width: 1900px) {
  [data-sp-embed] #create .ai-insight-tag, [data-sp-embed] #analysis .ai-insight-tag, [data-sp-embed] #management .ai-insight-tag, [data-sp-embed] #create .create-demo__story .ai-insight-tag, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-tag{
    font-size: 1.12rem !important;
    padding: 0.55rem 1.05rem !important;
    line-height: 1.4 !important;
  }

  [data-sp-embed] #create .ai-insight-tag__icon, [data-sp-embed] #analysis .ai-insight-tag__icon, [data-sp-embed] #management .ai-insight-tag__icon, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-tag__icon{
    font-size: 1.12em !important;
  }

  [data-sp-embed] #create .ai-insight-tags--story, [data-sp-embed] #analysis .ai-insight-tags--story, [data-sp-embed] #management .ai-insight-tags--story, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-tags--story{
    gap: 0.55rem 0.65rem !important;
  }
}

/* images stay natural ratio */
[data-sp-embed] #create .ai-insight-card__preview img, [data-sp-embed] #analysis .ai-insight-card__preview img, [data-sp-embed] #management .ai-insight-card__preview img, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card .ai-insight-card__preview img{
  height: auto !important;
  object-fit: contain !important;
}

@media (max-width: 860px) {
  [data-sp-embed] #create, [data-sp-embed] #analysis, [data-sp-embed] #management{
    --showcase-pad-inline: clamp(14px, 3.5vw, 22px);
    padding-block: clamp(72px, 14vw, 104px) !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel{
    --mgmt-card-w: min(76vw, 22.5rem);
    --mgmt-side-x: 11%;
    --mgmt-side-scale: 0.86;
    min-height: clamp(24rem, 108vw, 34rem);
    overflow: visible !important;
  }

  [data-sp-embed] #create .create-hero__copy .showcase-subtitle, [data-sp-embed] #analysis .showcase-copy .showcase-subtitle, [data-sp-embed] #management .showcase-copy .showcase-subtitle{
    max-width: 30em;
  }

  /* iPhone幅: ヒーロー分割カードが横にはみ出さない */
  [data-sp-embed] #create .ai-insight-card--hero-split, [data-sp-embed] #analysis .ai-insight-card--hero-split, [data-sp-embed] #management .ai-insight-card--hero-split{
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  [data-sp-embed] #create .ai-insight-card__preview, [data-sp-embed] #analysis .ai-insight-card__preview{
    max-width: 100%;
    overflow: hidden;
  }

  /* 機能紹介カードタイトル: 画像プレビューとバランスが取れるサイズに */
  [data-sp-embed] #create .ai-insight-card__media-label h3, [data-sp-embed] #analysis .ai-insight-card__media-label h3, [data-sp-embed] #management .ai-insight-card__media-label h3, [data-sp-embed] #create .ai-insights-bento--pair > .ai-insight-card--hero-split .ai-insight-card__media-label h3, [data-sp-embed] #analysis .ai-insights-bento--pair > .ai-insight-card--hero-split .ai-insight-card__media-label h3, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-card__media-label h3{
    font-size: clamp(1.12rem, 4vw, 1.32rem) !important;
    line-height: 1.4 !important;
    letter-spacing: -0.01em;
  }

  [data-sp-embed] #create .ai-insight-card__media-label, [data-sp-embed] #analysis .ai-insight-card__media-label{
    gap: 0.4em;
  }
}

/* Hero: larger title + more air around brand & CTAs */
[data-sp-embed] .hero--cms-story .hero-center{
  width: min(28rem, 44vw) !important;
  max-width: min(28rem, 44vw) !important;
}

[data-sp-embed] .hero--cms-story .hero-brand-logo--above-title{
  margin-bottom: clamp(1.9rem, 3.6vw, 3rem) !important;
}

[data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
  font-size: clamp(2.45rem, 1.3rem + 2.9vw, 4.15rem) !important;
  line-height: 1.18 !important;
  gap: 0.34em !important;
}

[data-sp-embed] .hero--cms-story .hero-center .hero-actions{
  margin-top: clamp(2.2rem, 4vw, 3.25rem) !important;
  gap: clamp(0.85rem, 1.5vw, 1.2rem) !important;
}

@media (min-width: 1400px) {
  [data-sp-embed] .hero--cms-story .hero-center{
    width: min(32rem, 40vw) !important;
    max-width: min(32rem, 40vw) !important;
  }

  [data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
    font-size: clamp(2.7rem, 1.35rem + 2.9vw, 4.4rem) !important;
  }
}

@media (max-width: 1100px) {
  [data-sp-embed] .hero--cms-story .hero-center{
    width: min(20rem, 48vw) !important;
    max-width: min(20rem, 48vw) !important;
  }

  [data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
    font-size: clamp(1.95rem, 1.1rem + 2.2vw, 2.85rem) !important;
  }

  [data-sp-embed] .hero--cms-story .hero-brand-logo--above-title{
    margin-bottom: clamp(1.55rem, 3vw, 2.25rem) !important;
  }

  [data-sp-embed] .hero--cms-story .hero-center .hero-actions{
    margin-top: clamp(1.85rem, 3.4vw, 2.6rem) !important;
  }
}

@media (max-width: 860px) {
  [data-sp-embed] .hero--cms-story .hero-center{
    width: min(20rem, 88vw) !important;
    max-width: min(20rem, 88vw) !important;
  }

  [data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
    font-size: clamp(2rem, 8.8vw, 2.55rem) !important;
  }

  [data-sp-embed] .hero--cms-story .hero-brand-logo--above-title{
    margin-bottom: clamp(1.4rem, 4vw, 2rem) !important;
  }

  [data-sp-embed] .hero--cms-story .hero-center .hero-actions{
    margin-top: clamp(1.75rem, 4.5vw, 2.4rem) !important;
  }
}

/* Management carousel: cursor-follow soft glow on front card */
[data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card{
  --mgmt-glow-x: 50%;
  --mgmt-glow-y: 42%;
}

[data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
  background: radial-gradient(
    460px circle at var(--mgmt-glow-x) var(--mgmt-glow-y),
    rgba(187, 247, 208, 0.55) 0%,
    rgba(134, 239, 172, 0.22) 26%,
    rgba(34, 197, 94, 0.08) 48%,
    transparent 70%
  );
  z-index: 6;
}

[data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card[data-mgmt-pos="0"].is-cursor-glow{
  box-shadow:
    0 28px 60px rgba(15, 23, 42, 0.16),
    0 0 0 1px rgba(34, 197, 94, 0.28),
    0 0 36px rgba(34, 197, 94, 0.28),
    0 0 72px rgba(22, 163, 74, 0.16) !important;
  border-color: rgba(34, 197, 94, 0.28) !important;
}

[data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card[data-mgmt-pos="0"].is-cursor-glow::after{
  opacity: 1;
}

[data-sp-embed] #management .ai-insights-bento--mgmt-carousel.is-dragging > .ai-insight-card::after{
  opacity: 0;
}

/* ===== Create / Analysis: align L/R edges (keep analysis video aspect as-is) ===== */
[data-sp-embed] #create, [data-sp-embed] #analysis{
  --showcase-pad-inline: clamp(16px, 2.8vw, 40px);
  --showcase-content-max: min(92rem, 100%);
}

@media (min-width: 900px) {
  [data-sp-embed] #create, [data-sp-embed] #analysis{
    --showcase-pad-inline: clamp(4.5rem, 12vw, 14rem);
  }
}

[data-sp-embed] #create .showcase.showcase--analysis-full, [data-sp-embed] #analysis .showcase.showcase--analysis-full{
  width: 100% !important;
  max-width: var(--showcase-content-max) !important;
  margin-inline: auto !important;
}

[data-sp-embed] #create .create-hero, [data-sp-embed] #create .create-demo, [data-sp-embed] #create .showcase-capabilities, [data-sp-embed] #analysis .showcase-capabilities, [data-sp-embed] #create .ai-insights-bento, [data-sp-embed] #analysis .ai-insights-bento{
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  box-sizing: border-box;
}

/*
  Video figures were shrink-centered (48rem + margin auto), which made
  zig-zag rows' outer edges drift. Stretch to the media column instead.
  Do NOT touch aspect-ratio / object-fit / side-crop on the <video>.
*/
[data-sp-embed] #create .ai-insight-card__preview--survey-create-video, [data-sp-embed] #analysis .ai-insight-card__preview--sns-video, [data-sp-embed] #analysis .ai-insight-card__preview--survey-video{
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  justify-self: stretch !important;
}

/* Mirror text↔media columns so left/right outer edges match across rows */
@media (min-width: 900px) {
  [data-sp-embed] #create .ai-insights-bento--pair > .ai-insight-card.ai-insight-card--hero-split:not(.ai-insight-card--hero-split-reverse), [data-sp-embed] #analysis .ai-insights-bento--pair > .ai-insight-card.ai-insight-card--hero-split:not(.ai-insight-card--hero-split-reverse){
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr) !important;
  }

  [data-sp-embed] #create .ai-insights-bento--pair > .ai-insight-card.ai-insight-card--hero-split-reverse, [data-sp-embed] #analysis .ai-insights-bento--pair > .ai-insight-card.ai-insight-card--hero-split-reverse{
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr) !important;
  }

  [data-sp-embed] #create .ai-insights-bento--pair > .ai-insight-card.ai-insight-card--hero-split .hero-split-copy, [data-sp-embed] #analysis .ai-insights-bento--pair > .ai-insight-card.ai-insight-card--hero-split .hero-split-copy{
    width: 100%;
    max-width: none;
  }

  [data-sp-embed] #create .ai-insights-bento--pair > .ai-insight-card.ai-insight-card--hero-split-reverse .ai-insight-card__body, [data-sp-embed] #analysis .ai-insights-bento--pair > .ai-insight-card.ai-insight-card--hero-split-reverse .ai-insight-card__body{
    padding-inline: 0 0.25rem;
  }

  [data-sp-embed] #create .ai-insights-bento--pair > .ai-insight-card.ai-insight-card--hero-split:not(.ai-insight-card--hero-split-reverse) .ai-insight-card__body, [data-sp-embed] #analysis .ai-insights-bento--pair > .ai-insight-card.ai-insight-card--hero-split:not(.ai-insight-card--hero-split-reverse) .ai-insight-card__body{
    padding-inline: 0.25rem 0;
  }
}

/* Editor + preview need the full row; side-by-side with the copy they get cramped */
@media (min-width: 900px) and (max-width: 1300px) {
  [data-sp-embed] #create .ai-insights-bento--pair > .ai-insight-card.ai-insight-card--survey-live{
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: none;
    grid-template-areas:
      "title"
      "body"
      "media";
  }

  [data-sp-embed] #create .ai-insight-card--survey-live > .hero-split-title{
    justify-content: center !important;
    text-align: center !important;
  }

  [data-sp-embed] #create .ai-insight-card--survey-live > .hero-split-copy{
    align-items: center !important;
    text-align: center !important;
    padding-inline: 0 !important;
  }

  [data-sp-embed] #create .ai-insight-card--survey-live .hero-split-copy > p, [data-sp-embed] #create .ai-insight-card--survey-live .hero-split-copy > .ai-insight-tags{
    margin-left: 0 !important;
    margin-inline: auto !important;
    width: 100% !important;
    max-width: 34em;
    text-align: center !important;
  }

  [data-sp-embed] #create .ai-insight-card--survey-live .hero-split-copy > .ai-insight-tags{
    justify-content: center !important;
  }
}

/* The shared phone title size falls below the subtitle; keep this heading a step above it */
@media (max-width: 860px) {
  [data-sp-embed] #create .ai-insights-bento--pair > .ai-insight-card--hero-split.ai-insight-card--survey-live .ai-insight-card__media-label h3{
    font-size: clamp(1.42rem, 1.2rem + 0.6vw, 1.7rem) !important;
  }
}

@media (max-width: 860px) {
  [data-sp-embed] #create, [data-sp-embed] #analysis{
    --showcase-pad-inline: clamp(14px, 3.5vw, 22px);
  }
}

/* Management cards: compact mobile (hide body copy, smaller title/tags/card) */
@media (max-width: 860px) {
  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel{
    --mgmt-card-w: min(76vw, 22.5rem) !important;
    --mgmt-side-x: 11% !important;
    --mgmt-side-scale: 0.86;
    min-height: clamp(26rem, 108vw, 34rem) !important;
    overflow: visible !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card{
    border-radius: 14px !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-card__media-label{
    padding: 0.62rem 0.75rem 0.55rem !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-card__media-label h3{
    font-size: clamp(1.22rem, 4.2vw, 1.42rem) !important;
    line-height: 1.3 !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-card__body > p, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.ai-insights-bento--marquee .ai-insight-card__body > p{
    display: none !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-card__body{
    padding: 0.55rem 0.7rem 0.7rem !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-tags--story{
    gap: 0.28rem !important;
    margin: 0 !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-tag{
    font-size: 0.68rem !important;
    padding: 0.22rem 0.48rem !important;
    line-height: 1.25 !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-tag__icon{
    font-size: 0.85em !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card .ai-insight-card__preview{
    padding: 8px 8px 10px !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card .ai-insight-card__preview::before{
    height: 24px !important;
  }
}

/* iPad / モバイル: 作成・分析・マネジメントの文言を中央寄せ */
@media (max-width: 1024px) {
  [data-sp-embed] #create .create-hero__copy, [data-sp-embed] #create .create-demo__story, [data-sp-embed] #analysis .showcase-copy, [data-sp-embed] #management .showcase-copy{
    text-align: center !important;
    align-items: center !important;
    justify-items: center !important;
    justify-content: center !important;
  }

  [data-sp-embed] #create .create-hero__copy .section-label, [data-sp-embed] #create .create-hero__copy h2, [data-sp-embed] #create .create-demo__story .section-label, [data-sp-embed] #create .create-demo__story h2, [data-sp-embed] #analysis .showcase-copy .section-label, [data-sp-embed] #analysis .showcase-copy h2, [data-sp-embed] #management .showcase-copy .section-label, [data-sp-embed] #management .showcase-copy h2{
    text-align: center !important;
    margin-inline: auto !important;
  }

  [data-sp-embed] #create .create-hero__copy .showcase-subtitle, [data-sp-embed] #create .create-demo__story .showcase-subtitle, [data-sp-embed] #analysis .showcase-copy .showcase-subtitle, [data-sp-embed] #management .showcase-copy .showcase-subtitle{
    margin-inline: auto !important;
    text-align: center !important;
  }

  [data-sp-embed] #create .create-demo__story{
    justify-items: center !important;
    justify-content: center;
    width: 100%;
  }

  [data-sp-embed] #create .create-demo__story .ai-insight-tags, [data-sp-embed] #create .ai-insight-card__body .ai-insight-tags, [data-sp-embed] #analysis .ai-insight-card__body .ai-insight-tags, [data-sp-embed] #management .ai-insight-card__body .ai-insight-tags{
    justify-content: center !important;
    margin-inline: auto !important;
  }

  [data-sp-embed] #create .ai-insight-card__body, [data-sp-embed] #analysis .ai-insight-card__body, [data-sp-embed] #management .ai-insight-card__body, [data-sp-embed] #create .ai-insight-card__media-label, [data-sp-embed] #analysis .ai-insight-card__media-label, [data-sp-embed] #management .ai-insight-card__media-label{
    text-align: center !important;
    align-items: center !important;
  }

  [data-sp-embed] #create .ai-insight-card__media-label, [data-sp-embed] #analysis .ai-insight-card__media-label, [data-sp-embed] #management .ai-insight-card__media-label{
    justify-content: center !important;
  }

  [data-sp-embed] #create .ai-insight-card--hero-split .hero-split-copy > p, [data-sp-embed] #create .ai-insight-card--hero-split .hero-split-copy > .ai-insight-tags, [data-sp-embed] #analysis .ai-insight-card--hero-split .hero-split-copy > p, [data-sp-embed] #analysis .ai-insight-card--hero-split .hero-split-copy > .ai-insight-tags, [data-sp-embed] #management .ai-insight-card--hero-split .hero-split-copy > p, [data-sp-embed] #management .ai-insight-card--hero-split .hero-split-copy > .ai-insight-tags{
    margin-left: 0 !important;
    margin-inline: auto !important;
    width: 100% !important;
    max-width: 34em;
    text-align: center !important;
  }

  [data-sp-embed] #create .create-demo__preview-head{
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  [data-sp-embed] #create .create-demo__tabs{
    justify-content: center;
  }
}

/* ===== Page X-scroll lock only (do not clip section visuals) ===== */
[data-sp-embed], [data-sp-embed]{
  overflow-x: hidden !important;
  overscroll-behavior-x: none !important;
}

[data-sp-embed] main{
  overflow-x: hidden;
  overscroll-behavior-x: none;
  max-width: 100%;
}

/* Soft fit for mobile/iPad: scale down, don't chop content */
@media (max-width: 1024px) {
  /* Keep page from panning; allow decorative overflow inside sections */
  [data-sp-embed] #hero.hero--cms-story{
    overflow: hidden;
  }

  [data-sp-embed] .hero--cms-story .hero-floats{
    overflow: visible;
    pointer-events: none;
  }

  /* Hero title + corner images: Soft fit does not resize/reposition them */

  /* Easy / AI pitch: stack earlier so wordmark + mock aren't cut */
  [data-sp-embed] .cms-pitch__inner, [data-sp-embed] .cms-pitch--flip .cms-pitch__inner, [data-sp-embed] #nocode-platform .cms-pitch__inner, [data-sp-embed] #ai-platform.cms-pitch .cms-pitch__inner{
    grid-template-columns: 1fr !important;
    max-width: min(40rem, calc(100% - 2rem)) !important;
    gap: clamp(1.25rem, 3vw, 2rem) !important;
  }

  [data-sp-embed] .cms-pitch__copy, [data-sp-embed] .cms-pitch--flip .cms-pitch__copy, [data-sp-embed] #nocode-platform .cms-pitch__copy{
    grid-column: auto !important;
    grid-row: auto !important;
    order: 1;
    align-items: center !important;
    text-align: center !important;
    max-width: 100% !important;
  }

  [data-sp-embed] .cms-pitch__visual, [data-sp-embed] .cms-pitch--flip .cms-pitch__visual, [data-sp-embed] #nocode-platform .cms-pitch__visual{
    grid-column: auto !important;
    grid-row: auto !important;
    order: 2;
    width: 100%;
    max-width: 100%;
  }

  [data-sp-embed] #nocode-platform .platform-wordmark, [data-sp-embed] #ai-platform .platform-wordmark, [data-sp-embed] .cms-pitch .platform-wordmark{
    font-size: clamp(3rem, 12vw, 5.5rem) !important;
    max-width: 100%;
  }

  [data-sp-embed] .cms-pitch .platform-stage__tagline, [data-sp-embed] #nocode-platform .platform-stage__tagline{
    text-align: center !important;
  }

  [data-sp-embed] .cms-pitch__visual-stage, [data-sp-embed] #nocode-platform .cms-pitch__visual-stage, [data-sp-embed] #ai-platform .cms-pitch__visual-stage{
    width: min(100%, 32rem) !important;
    max-width: 100% !important;
    margin-inline: auto !important;
  }

  [data-sp-embed] #create .create-hero, [data-sp-embed] #create .create-demo, [data-sp-embed] #create .create-demo__window{
    min-width: 0;
    max-width: 100%;
  }

  [data-sp-embed] #create .create-hero__shot{
    max-width: 100%;
    height: auto;
  }

  /* Management: 切れ線なし。カード幅と左右オフセットを抑えてビューポート内に収める */
  [data-sp-embed] #management .showcase-capabilities.analysis-capabilities, [data-sp-embed] #management .showcase--analysis-full > .showcase-capabilities{
    overflow: visible !important;
    overflow-x: visible !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel{
    overflow: visible !important;
    width: 100%;
    max-width: 100%;
    --mgmt-card-w: min(76vw, 24rem);
    --mgmt-side-x: 11%;
    --mgmt-side-scale: 0.86;
    padding-inline: clamp(0.35rem, 1.5vw, 0.85rem);
    box-sizing: border-box;
  }

  [data-sp-embed] .ai-insight-card, [data-sp-embed] .ai-insight-card__preview, [data-sp-embed] .ai-insight-card__body, [data-sp-embed] .feature-nav-wrap, [data-sp-embed] .feature-nav-group, [data-sp-embed] .feature-nav, [data-sp-embed] .feature-nav-card{
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  /* iPad: create hero is stacked (copy above image); demo stays two-column */
  [data-sp-embed] #create .create-hero{
    grid-template-columns: 1fr !important;
  }

  [data-sp-embed] #create .create-demo__body{
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr) !important;
  }
}

@media (max-width: 767px) {
  [data-sp-embed] #create .create-hero{
    grid-template-columns: 1fr !important;
  }

  [data-sp-embed] #create .create-demo__body{
    grid-template-columns: 1fr !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel{
    --mgmt-card-w: min(78vw, 22rem);
    --mgmt-side-x: 10%;
    --mgmt-side-scale: 0.86;
    overflow: visible !important;
  }

  [data-sp-embed] .cms-create__spark{
    display: none;
  }
}


/* Easy (mobile/iPad): force copy center — override left-align rules */
@media (max-width: 1024px) {
  [data-sp-embed] #nocode-platform .cms-pitch__copy, [data-sp-embed] #nocode-platform .showcase-copy{
    align-items: center !important;
    justify-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
  }

  [data-sp-embed] #nocode-platform .cms-pitch__copy .eyebrow, [data-sp-embed] #nocode-platform .cms-pitch__wordmark, [data-sp-embed] #nocode-platform .platform-wordmark, [data-sp-embed] #nocode-platform .platform-stage__tagline, [data-sp-embed] #nocode-platform .showcase-copy .platform-stage__tagline, [data-sp-embed] #nocode-platform .platform-stage__tagline [data-stage-subtitle]{
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: auto;
    max-width: 100%;
  }

  [data-sp-embed] #nocode-platform .platform-stage__tagline [data-stage-subtitle]{
    display: block;
  }
}

/* Mobile / iPad: slightly smaller section subtitles only
   (does not touch #hero title text or corner float images) */
@media (max-width: 1024px) {
  [data-sp-embed] #nocode-platform .platform-stage__tagline, [data-sp-embed] #ai-platform .platform-stage__tagline, [data-sp-embed] .cms-pitch .platform-stage__tagline, [data-sp-embed] .cdp-stage .platform-stage__tagline{
    font-size: clamp(1.15rem, 3.6vw, 1.55rem) !important;
    line-height: 1.4 !important;
  }

  [data-sp-embed] #create .create-hero__copy .showcase-subtitle, [data-sp-embed] #analysis .showcase-copy .showcase-subtitle, [data-sp-embed] #management .showcase-copy .showcase-subtitle, [data-sp-embed] #ai-platform .showcase-copy .showcase-subtitle, [data-sp-embed] #showcases .showcase-copy .showcase-subtitle{
    font-size: clamp(0.98rem, 2.4vw + 0.35rem, 1.25rem) !important;
    line-height: 1.45 !important;
  }

  [data-sp-embed] .feature-index__lead, [data-sp-embed] #integration .feature-index__lead, [data-sp-embed] .industries__lead, [data-sp-embed] .value-flow__lead, [data-sp-embed] #contact .contact__lead, [data-sp-embed] #contact p:not(.section-label){
    font-size: clamp(0.92rem, 1.8vw + 0.45rem, 1.05rem) !important;
    line-height: 1.65 !important;
  }

  [data-sp-embed] #create .showcase-copy .showcase-lead, [data-sp-embed] #analysis .showcase-copy .showcase-lead, [data-sp-embed] #management .showcase-copy .showcase-lead, [data-sp-embed] .platform-stage__copy .hero-subtitle{
    font-size: clamp(0.92rem, 2vw + 0.4rem, 1.08rem) !important;
  }
}

/*
  Use Cases: show full mock images on PC / iPad / mobile.
  Images are 1536×1024 (3:2). cover + 16:9/16:10 was cropping top/bottom.
*/
[data-sp-embed] #use-cases .industry-grid--cases .feature-card__visual{
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

[data-sp-embed] #use-cases .industry-grid--cases .feature-card__visual img{
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
  transform-origin: center center !important;
}

[data-sp-embed] #use-cases .industry-grid--cases .feature-card:hover .feature-card__visual img{
  transform: none !important;
}

/* Mobile only: keep title + tags, hide body copy on create/analysis cards */
@media (max-width: 760px) {
  [data-sp-embed] #create .ai-insight-card--hero-split .hero-split-copy > p, [data-sp-embed] #create .ai-insight-card--hero-split .ai-insight-card__body > p, [data-sp-embed] #analysis .ai-insight-card--hero-split .hero-split-copy > p, [data-sp-embed] #analysis .ai-insight-card--hero-split .ai-insight-card__body > p{
    display: none !important;
  }

  [data-sp-embed] #create .ai-insight-card--hero-split .ai-insight-card__body, [data-sp-embed] #analysis .ai-insight-card--hero-split .ai-insight-card__body{
    padding-top: 0.55rem !important;
  }

  [data-sp-embed] #create .ai-insight-card--hero-split .ai-insight-tags--story, [data-sp-embed] #analysis .ai-insight-card--hero-split .ai-insight-tags--story{
    margin-top: 0 !important;
  }
}

/*
  Mobile: unify feature-card tag chip size
  (機能一覧 + Create / Analysis / Management 内カード)
*/
@media (max-width: 760px) {
  [data-sp-embed] .feature-nav-card__tags{
    gap: 0.35rem;
  }

  [data-sp-embed] .feature-nav-card__tags li{
    font-size: 0.72rem !important;
    line-height: 1.25 !important;
    padding: 0.28rem 0.55rem !important;
    min-height: 1.55rem;
    box-sizing: border-box;
  }

  [data-sp-embed] #create .ai-insight-tags--story, [data-sp-embed] #analysis .ai-insight-tags--story, [data-sp-embed] #management .ai-insight-tags--story, [data-sp-embed] #create .create-demo__story .ai-insight-tags--story, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-tags--story, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.ai-insights-bento--marquee .ai-insight-tags--story{
    gap: 0.35rem !important;
  }

  [data-sp-embed] #create .ai-insight-tag, [data-sp-embed] #analysis .ai-insight-tag, [data-sp-embed] #management .ai-insight-tag, [data-sp-embed] #create .create-demo__story .ai-insight-tag, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-tag, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.ai-insights-bento--marquee .ai-insight-tag{
    font-size: 0.72rem !important;
    line-height: 1.25 !important;
    padding: 0.28rem 0.55rem !important;
    min-height: 1.55rem;
    box-sizing: border-box;
  }

  [data-sp-embed] #create .ai-insight-tag__icon, [data-sp-embed] #analysis .ai-insight-tag__icon, [data-sp-embed] #management .ai-insight-tag__icon, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-tag__icon{
    font-size: 0.95em !important;
  }
}

/* ===== Easy section: prevent wordmark / laptop overlap ===== */
@media (min-width: 1025px) {
  [data-sp-embed] #nocode-platform .cms-pitch__inner{
    grid-template-columns: minmax(14rem, 1.05fr) minmax(0, 1.15fr) !important;
    gap: clamp(2.75rem, 5.5vw, 5rem) !important;
    align-items: center;
  }

  [data-sp-embed] #nocode-platform .cms-pitch__copy, [data-sp-embed] #nocode-platform .showcase-copy{
    position: relative;
    z-index: 2;
    min-width: 0;
    max-width: 100%;
    padding-right: clamp(0.75rem, 1.5vw, 1.5rem);
    box-sizing: border-box;
  }

  [data-sp-embed] #nocode-platform .platform-wordmark{
    font-size: clamp(3.75rem, 6.5vw + 0.5rem, 7.25rem) !important;
    max-width: 100%;
    overflow-wrap: normal;
  }

  [data-sp-embed] #nocode-platform .platform-stage__tagline, [data-sp-embed] #nocode-platform .showcase-copy .platform-stage__tagline{
    max-width: 100%;
    font-size: clamp(1.35rem, 1.8vw + 0.55rem, 2.15rem) !important;
  }

  [data-sp-embed] #nocode-platform .cms-pitch__visual{
    position: relative;
    z-index: 1;
    min-width: 0;
    justify-content: flex-end;
  }

  [data-sp-embed] #nocode-platform .cms-pitch__visual-stage--laptop{
    width: 100% !important;
    max-width: min(100%, 34rem) !important;
    margin-left: auto !important;
    margin-right: 0 !important;
  }
}

/* Mid desktop: stack a bit earlier if still tight */
@media (min-width: 1025px) and (max-width: 1180px) {
  [data-sp-embed] #nocode-platform .cms-pitch__inner{
    grid-template-columns: minmax(12rem, 1.1fr) minmax(0, 1fr) !important;
    gap: clamp(2rem, 4vw, 3.25rem) !important;
  }

  [data-sp-embed] #nocode-platform .cms-pitch__visual-stage--laptop{
    max-width: min(100%, 30rem) !important;
  }

  [data-sp-embed] #nocode-platform .platform-wordmark{
    font-size: clamp(3.25rem, 5.8vw + 0.4rem, 5.75rem) !important;
  }
}

/* ===== Top floats: clear fixed public header on ALL viewports ===== */
[data-sp-embed] .hero--cms-story{
  --cms-hero-header-clear: calc(
    var(--sp-public-header-offset, 4.5rem) + env(safe-area-inset-top, 0px) + 1.15rem
  );
  --cms-hero-float-top: var(--cms-hero-header-clear);
}


/* iOS「視覚効果を減らす」/ prefers-reduced-motion でもヒーロー浮遊は止めない
   （runtime.js の reduceMotion = false と揃える） */




/* ===== Management mobile/iPad: force marquee, kill coverflow stack bug ===== */
@media (max-width: 1279px) {
  [data-sp-embed] #management .showcase-capabilities.analysis-capabilities, [data-sp-embed] #management .showcase--analysis-full > .showcase-capabilities{
    overflow: hidden !important;
    overflow-x: hidden !important;
  }

  [data-sp-embed] #management .ai-insight-marquee{
    width: calc(100% + (2 * var(--showcase-pad-inline, 1rem))) !important;
    max-width: none !important;
    margin-inline: calc(-1 * var(--showcase-pad-inline, 1rem)) !important;
    padding-block: clamp(0.85rem, 2.5vw, 1.5rem) !important;
    overflow: hidden !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.is-mgmt-marquee, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.ai-insights-bento--marquee{
    position: relative !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
    width: max-content !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    perspective: none !important;
    overflow: visible !important;
    cursor: grab;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card[data-mgmt-pos], [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card[data-mgmt-pos="0"], [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card[data-mgmt-pos="1"], [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card[data-mgmt-pos="2"], [data-sp-embed].js #showcases #management .reveal.visible .ai-insights-bento--mgmt-carousel > .ai-insight-card[data-mgmt-pos="0"], [data-sp-embed].js #showcases #management .reveal.visible .ai-insights-bento--mgmt-carousel > .ai-insight-card[data-mgmt-pos="1"], [data-sp-embed].js #showcases #management .reveal.visible .ai-insights-bento--mgmt-carousel > .ai-insight-card[data-mgmt-pos="2"]{
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
    z-index: auto !important;
    pointer-events: auto !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 min(86vw, 22rem) !important;
    width: min(86vw, 22rem) !important;
    max-width: min(86vw, 22rem) !important;
    min-width: min(86vw, 22rem) !important;
    min-height: 0 !important;
    margin: 0 !important;
    grid-template-columns: none !important;
    grid-template-areas: none !important;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.8) inset,
      0 10px 28px rgba(0, 0, 0, 0.06),
      0 18px 40px rgba(15, 23, 42, 0.1) !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card::after{
    display: none !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-card__media-label, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel .hero-split-title{
    order: 1;
    padding: 0.7rem 0.85rem 0.55rem !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-card__preview, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel .hero-split-media{
    order: 2;
    width: 100% !important;
    border-right: none !important;
    border-left: none !important;
    padding: 8px 8px 10px !important;
    height: auto !important;
    min-height: 0 !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-card__preview img{
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-card__body, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel .hero-split-copy{
    order: 3;
    display: flex !important;
    flex-direction: column !important;
    padding: 0.55rem 0.75rem 0.8rem !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-card__body > p{
    display: none !important;
  }
}




@media (min-width: 1101px) {
  [data-sp-embed] .hero--cms-story{
    --cms-float-edge: max(1rem, env(safe-area-inset-left, 0px));
    --cms-float-w: clamp(260px, 24vw, 400px);
    --cms-float-w-campaign: clamp(190px, 18vw, 300px);
  }

  [data-sp-embed] .hero--cms-story .hero-float--ig{
    top: clamp(5.5rem, 11vh, 8rem) !important;
    bottom: auto !important;
  }

  [data-sp-embed] .hero--cms-story .hero-float--line{
    top: clamp(6.25rem, 13vh, 9rem) !important;
    bottom: auto !important;
  }

  [data-sp-embed] .hero--cms-story .hero-float--fb, [data-sp-embed] .hero--cms-story .hero-float--campaign{
    top: auto !important;
    bottom: clamp(3rem, 7vh, 5.5rem) !important;
  }
}


/* =============================================================================
   SAKINA CMS ヒーロー — タイトル周りフロート（PC版 1101px以上）

   ■ 写真4枚の名前
     ig       … Instagram（左上）
     line     … LINE（右上）
     fb       … Facebook（左下）
     campaign … キャンペーン（右下・女の人）

   ■ 主な変数
     --cms-pc-center        … 中央テキストエリアの幅
     --cms-float-edge       … 画像の左端/右端からの距離
     --cms-float-w          … 左上・右上の幅
     --cms-float-w-campaign … 左下・右下（下段ペア）の幅
     --cms-orbit-r          … 画像の角丸

   ■ ブレイクポイント
     15708行 … PC基本（1101px以上）
     15802行 … PCタブ縮小（1101〜1366px）
     16106行 … 狭いPC縮小（1025〜1100px・タブレット帯は対象外）
     15815行 … 大画面（1400px以上）
     15825行 … 超大画面（1680px以上）
     15850行 … 1900px以上（1680の構図を拡大して固定）
   ============================================================================= */
@media (min-width: 1101px) {
  [data-sp-embed] .hero--cms-story{
    --cms-hero-title-gap: clamp(16.5rem, 24vh, 21rem);
    /* 上段フロート: タイトル開始位置からの縦オフセット（大きく = 下へ / マイナス大きく = 上へ） */
    --cms-ig-y: -6rem;
    --cms-line-y: -5rem;
    --cms-pc-center: min(24rem, 36vw);
    --cms-float-edge: clamp(1.75rem, 3.2vw, 4.25rem);
    --cms-float-gutter-fit: calc(
      50% - (var(--cms-pc-center) / 2) - var(--cms-float-edge) - 0.45rem
    );
    --cms-float-w: min(36vw, 620px, var(--cms-float-gutter-fit));
    --cms-float-w-campaign: min(32vw, 540px);
    --cms-orbit-r: 6px;
    overflow: hidden !important;
    justify-content: flex-start;
  }

  [data-sp-embed] .hero--cms-story .hero-center{
    width: var(--cms-pc-center) !important;
    max-width: var(--cms-pc-center) !important;
    z-index: 6 !important;
  }

  [data-sp-embed] .hero--cms-story .hero-float--ig{
    left: var(--cms-float-edge) !important;
    right: auto !important;
    width: var(--cms-float-w) !important;
    max-width: none !important;
  }

  /* BL: match BR (campaign) scale on the bottom row */
  [data-sp-embed] .hero--cms-story .hero-float--fb{
    left: var(--cms-float-edge) !important;
    right: auto !important;
    width: var(--cms-float-w-campaign) !important;
    max-width: none !important;
  }

  [data-sp-embed] .hero--cms-story .hero-float--line{
    right: var(--cms-float-edge) !important;
    left: auto !important;
    width: calc(var(--cms-float-w) * 0.93) !important;
    max-width: none !important;
  }

  [data-sp-embed] .hero--cms-story .hero-float--campaign{
    right: var(--cms-float-edge) !important;
    left: auto !important;
    width: var(--cms-float-w-campaign) !important;
    max-width: none !important;
  }

  /* TL / TR: title-gap と連動（--cms-hero-title-gap を広げると一緒に下がる） */
  [data-sp-embed] .hero--cms-story .hero-float--ig{
    top: calc(
      var(--sp-public-header-offset, 4.5rem) + env(safe-area-inset-top, 0px) + var(--cms-hero-title-gap) + var(--cms-ig-y)
    ) !important;
    bottom: auto !important;
  }

  [data-sp-embed] .hero--cms-story .hero-float--line{
    top: calc(
      var(--sp-public-header-offset, 4.5rem) + env(safe-area-inset-top, 0px) + var(--cms-hero-title-gap) + var(--cms-line-y)
    ) !important;
    bottom: auto !important;
  }

  /* BL / BR: same bottom row — matched scale and vertical position */
  [data-sp-embed] .hero--cms-story .hero-float--fb, [data-sp-embed] .hero--cms-story .hero-float--campaign{
    top: auto !important;
    bottom: clamp(3rem, 7vh, 5.5rem) !important;
  }
}

/* PC tab shrink (~13–14" window): keep inward layout, slightly tighter */
@media (min-width: 1101px) and (max-width: 1366px) {
  [data-sp-embed] .hero--cms-story{
    --cms-pc-center: min(22.5rem, 34vw);
    --cms-float-edge: clamp(1.1rem, 2.2vw, 2.5rem);
    --cms-float-w: min(34vw, 520px, var(--cms-float-gutter-fit));
    --cms-float-w-campaign: min(31vw, 480px);
    --cms-orbit-r: 4px;
    /* ウィンドウ縮小時: PC大画面と同じ余白基準 */
    --cms-hero-title-gap: clamp(10rem, 15vh, 12rem);
    justify-content: flex-start;
  }
}

@media (min-width: 1400px) {
  [data-sp-embed] .hero--cms-story{
    --cms-hero-title-gap: clamp(14rem, 20vh, 16rem);
    --cms-pc-center: min(25.5rem, 32vw);
    --cms-float-edge: clamp(2rem, 4vw, 5.5rem);
    --cms-float-w: min(34vw, 640px, var(--cms-float-gutter-fit));
    --cms-float-w-campaign: min(31vw, 580px);
  }
}

@media (min-width: 1680px) {
  [data-sp-embed] .hero--cms-story{
    --cms-hero-title-gap: clamp(16rem, 24vh, 20rem);
    --cms-pc-center: min(27rem, 28vw);
    --cms-float-edge: clamp(2.75rem, 5.5vw, 7rem);
    --cms-float-w: min(32vw, 680px, var(--cms-float-gutter-fit));
    --cms-float-w-campaign: min(30vw, 620px);
  }
}

/* 1900px以上: 1680の構図を一段大きくして、それ以降は画面幅で伸びない */
@media (min-width: 1900px) {
  [data-sp-embed] .hero--cms-story{
    --cms-hero-title-gap: 12rem;
    --cms-pc-center: 32rem;
    --cms-float-edge: 11rem;
    --cms-float-w: 500px;
    --cms-float-w-campaign: 600px;
    --cms-ig-y: -6rem;
    --cms-line-y: -5rem;
    --cms-orbit-r: 8px;
  }

  [data-sp-embed] .hero--cms-story .hero-brand-wordmark__full{
    font-size: 3rem !important;
  }

  [data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
    font-size: 4rem !important;
  }

  [data-sp-embed] .hero--cms-story .hero-float--fb, [data-sp-embed] .hero--cms-story .hero-float--campaign{
    bottom: 5.5rem !important;
  }

  [data-sp-embed] #use-cases .industries__lead, [data-sp-embed] .band-industries .industries__lead{
    font-size: 1.55rem !important;
    line-height: 1.65 !important;
    max-width: 52rem;
    font-weight: 500;
  }
}


/* ===== Management: narrow = edge marquee; wide = static 3-col ===== */
[data-sp-embed] #management{
  overflow-x: clip;
}

/* Shared card chrome (grid + marquee): title → image → tags */
[data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card::after{
  display: none !important;
}

[data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-card__media-label, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel .hero-split-title{
  order: 1;
  padding: 0.75rem 0.95rem 0.55rem !important;
}

[data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-card__preview, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel .hero-split-media{
  order: 2;
  width: 100% !important;
  border-right: none !important;
  border-left: none !important;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

[data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-card__preview img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

[data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-card__body, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel .hero-split-copy{
  order: 3;
  padding: 0.75rem 0.95rem 1rem !important;
}

[data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-card__body > p{
  display: none !important;
}

@media (max-width: 1279px) {
  [data-sp-embed] #management .showcase--analysis-full > .showcase-capabilities.analysis-capabilities{
    width: 100% !important;
    max-width: none !important;
    overflow: visible !important;
    overflow-x: visible !important;
    padding-inline: 0 !important;
  }

  [data-sp-embed] #management .ai-insight-marquee{
    --insight-band-pad-inline: 0px;
    --insight-edge-fade: clamp(0.75rem, 2.5vw, 1.75rem);
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-block: clamp(1.25rem, 3vw, 2.5rem) !important;
    padding-inline: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.is-mgmt-marquee, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.ai-insights-bento--marquee{
    position: relative !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: clamp(0.85rem, 1.6vw, 1.35rem) !important;
    width: max-content !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    perspective: none !important;
    overflow: visible !important;
    cursor: grab;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card[data-mgmt-pos], [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.ai-insights-bento--marquee > .ai-insight-card, [data-sp-embed].js #showcases #management .reveal.visible .ai-insights-bento--mgmt-carousel > .ai-insight-card[data-mgmt-pos="0"], [data-sp-embed].js #showcases #management .reveal.visible .ai-insights-bento--mgmt-carousel > .ai-insight-card[data-mgmt-pos="1"], [data-sp-embed].js #showcases #management .reveal.visible .ai-insights-bento--mgmt-carousel > .ai-insight-card[data-mgmt-pos="2"]{
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
    z-index: auto !important;
    pointer-events: auto !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 clamp(18rem, 42vw, 28rem) !important;
    width: clamp(18rem, 42vw, 28rem) !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    grid-template-columns: none !important;
    grid-template-areas: none !important;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.8) inset,
      0 10px 28px rgba(0, 0, 0, 0.06),
      0 18px 40px rgba(15, 23, 42, 0.1) !important;
    transition: none !important;
    will-change: auto !important;
    touch-action: pan-y !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card:hover{
    transform: none !important;
  }

  @media (max-width: 767px) {
    [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.ai-insights-bento--marquee > .ai-insight-card{
      flex: 0 0 min(86vw, 22rem) !important;
      width: min(86vw, 22rem) !important;
    }
  }
}

@media (max-width: 1279px) {
  [data-sp-embed] #management .ai-insight-marquee.is-native-scroll{
    overflow-x: scroll !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1rem;
    overscroll-behavior-x: contain;
    touch-action: auto !important;
    cursor: grab;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    scrollbar-width: none;
    padding-inline: 1rem !important;
  }

  [data-sp-embed] #management .ai-insight-marquee.is-native-scroll::-webkit-scrollbar{
    display: none;
    height: 0;
  }

  [data-sp-embed] #management .ai-insight-marquee.is-native-scroll, [data-sp-embed] #management .ai-insight-marquee.is-native-scroll .ai-insight-card, [data-sp-embed] #management .ai-insight-marquee.is-native-scroll .ai-insights-bento--mgmt-carousel, [data-sp-embed] #management .ai-insight-marquee.is-native-scroll .ai-insights-bento--mgmt-carousel > .ai-insight-card{
    touch-action: auto !important;
  }

  [data-sp-embed] #management .ai-insight-marquee.is-native-scroll .ai-insights-bento--mgmt-carousel, [data-sp-embed] #management .ai-insight-marquee.is-native-scroll .ai-insights-bento--mgmt-carousel.ai-insights-bento--marquee{
    transform: none !important;
    will-change: auto !important;
  }

  [data-sp-embed] #management .ai-insight-marquee.is-native-scroll .ai-insight-card{
    scroll-snap-align: start;
    scroll-snap-stop: always;
    contain: none !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.ai-insights-bento--marquee{
    will-change: auto;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card{
    contain: layout paint;
    will-change: auto !important;
    transition: none !important;
  }

  [data-sp-embed] #management .ai-insight-marquee.is-native-scroll .ai-insights-bento--mgmt-carousel > .ai-insight-card{
    contain: none !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-card__preview, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel .hero-split-media{
    height: 11.5rem !important;
    min-height: 11.5rem !important;
    max-height: 11.5rem !important;
    overflow: hidden !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-card__preview img{
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: top center !important;
  }
}

@media (min-width: 1280px) {
  /* Fill the open tab harder: near full-bleed 3-up */
  [data-sp-embed] #management{
    --showcase-pad-inline: clamp(1.25rem, 2.5vw, 2.75rem);
    overflow-x: clip;
  }

  [data-sp-embed] #management .showcase--analysis-full > .showcase-capabilities.analysis-capabilities{
    width: 100% !important;
    max-width: none !important;
    overflow: visible !important;
    padding-inline: 0 !important;
  }

  [data-sp-embed] #management .ai-insight-marquee{
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    padding-block: clamp(0.85rem, 1.6vw, 1.35rem) !important;
    padding-inline: 0 !important;
    overflow: visible !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.is-mgmt-marquee, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel:not(.ai-insights-bento--marquee){
    position: relative !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: clamp(0.75rem, 1.2vw, 1.25rem) !important;
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: clamp(0.75rem, 1.2vw, 1.15rem) !important;
    padding-inline: 0 !important;
    padding-block: 0 !important;
    box-sizing: border-box !important;
    min-height: 0 !important;
    height: auto !important;
    perspective: none !important;
    overflow: visible !important;
    cursor: default !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card[data-mgmt-pos], [data-sp-embed].js #showcases #management .reveal.visible .ai-insights-bento--mgmt-carousel > .ai-insight-card[data-mgmt-pos="0"], [data-sp-embed].js #showcases #management .reveal.visible .ai-insights-bento--mgmt-carousel > .ai-insight-card[data-mgmt-pos="1"], [data-sp-embed].js #showcases #management .reveal.visible .ai-insights-bento--mgmt-carousel > .ai-insight-card[data-mgmt-pos="2"]{
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
    z-index: auto !important;
    pointer-events: auto !important;
    display: flex !important;
    flex-direction: column !important;
    flex: unset !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    grid-column: auto !important;
    grid-template-columns: none !important;
    grid-template-areas: none !important;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.8) inset,
      0 10px 28px rgba(0, 0, 0, 0.06),
      0 18px 40px rgba(15, 23, 42, 0.1) !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card{
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card:hover{
    transform: translateY(-8px) !important;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.8) inset,
      0 20px 50px rgba(15, 23, 42, 0.13),
      0 30px 60px rgba(15, 23, 42, 0.1) !important;
  }

  /* Landscape screenshots: keep native wide ratio, no crop */
  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-card__media-label, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel .hero-split-title{
    padding: clamp(0.9rem, 1.15vw, 1.15rem) clamp(1rem, 1.25vw, 1.25rem) 0.7rem !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-card__media-label h3{
    font-size: clamp(1.18rem, 1.05rem + 0.32vw, 1.42rem) !important;
    line-height: 1.3 !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-card__preview, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel .hero-split-media{
    aspect-ratio: auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding: clamp(6px, 0.7vw, 10px) !important;
    background: #f5f5f7 !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-card__preview img, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card .ai-insight-card__preview img{
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: top center !important;
    display: block !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-card__body, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel .hero-split-copy{
    padding: clamp(0.75rem, 1vw, 1rem) clamp(1rem, 1.25vw, 1.25rem) clamp(1rem, 1.25vw, 1.25rem) !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-tag{
    font-size: clamp(0.8rem, 0.72rem + 0.22vw, 0.95rem) !important;
    padding: 0.34rem 0.66rem !important;
  }
}


/* =============================================================================
   SAKINA CMS ヒーロー — PCウィンドウ縮小（1025〜1100px）
   1101px未満まで縮めた時用（タブレット≤1024は触らない）。

   ■ ここだけ数字を書き換える（下の当てはめブロックは触らなくてOK）
     ig / line / fb / campaign それぞれ:
       --cms-{写真}-x … 横（左端 or 右端からの距離）大きく = 端から離れる
       --cms-{写真}-y … 縦
         上2枚（ig, line）: 大きく = 下へ / マイナス大きく = 上へ
         下2枚（fb, campaign）: 大きく = 下から離れる（上へ）/ 小さく = 下に寄る
       --cms-{写真}-w … 大きさ（幅）
   ============================================================================= */
@media (min-width: 1025px) and (max-width: 1100px) {
  [data-sp-embed] .hero--cms-story{
    --cms-pc-center: min(15.5rem, 30vw);
    /* 小さく = タイトルが上へ */
    --cms-hero-title-gap: 10rem;

    /* --- Instagram（左上）--- */
    --cms-ig-x: clamp(0.35rem, 1vw, 0.75rem);
    --cms-ig-y: -4.5rem;
    --cms-ig-w: min(45vw, 450px);

    /* --- LINE（右上）--- */
    --cms-line-x: clamp(0.35rem, 1vw, 0.75rem);
    --cms-line-y: -3.75rem;
    --cms-line-w: min(45vw, 450px);

    /* --- Facebook（左下）--- */
    --cms-fb-x: clamp(0.35rem, 1vw, 0.75rem);
    --cms-fb-y: clamp(2.75rem, 6vh, 4.75rem);
    --cms-fb-w: min(45vw, 450px);

    /* --- キャンペーン（右下）--- */
    --cms-campaign-x: clamp(0.35rem, 1vw, 0.75rem);
    --cms-campaign-y: clamp(2.75rem, 6vh, 4.75rem);
    --cms-campaign-w: min(45vw, 450px);

    overflow: hidden !important;
    justify-content: flex-start;
  }

  [data-sp-embed] .hero--cms-story .hero-center{
    width: var(--cms-pc-center) !important;
    max-width: var(--cms-pc-center) !important;
    z-index: 8 !important;
    margin-top: 0.5rem !important;
  }

  /* Instagram（左上） */
  [data-sp-embed] .hero--cms-story .hero-float--ig{
    left: var(--cms-ig-x) !important;
    right: auto !important;
    width: var(--cms-ig-w) !important;
    max-width: none !important;
    top: calc(
      var(--sp-public-header-offset, 4.5rem) + env(safe-area-inset-top, 0px) + var(--cms-hero-title-gap) + var(--cms-ig-y)
    ) !important;
    bottom: auto !important;
  }

  /* LINE（右上） */
  [data-sp-embed] .hero--cms-story .hero-float--line{
    right: var(--cms-line-x) !important;
    left: auto !important;
    width: var(--cms-line-w) !important;
    max-width: none !important;
    top: calc(
      var(--sp-public-header-offset, 4.5rem) + env(safe-area-inset-top, 0px) + var(--cms-hero-title-gap) + var(--cms-line-y)
    ) !important;
    bottom: auto !important;
  }

  /* Facebook（左下） */
  [data-sp-embed] .hero--cms-story .hero-float--fb{
    left: var(--cms-fb-x) !important;
    right: auto !important;
    width: var(--cms-fb-w) !important;
    max-width: none !important;
    top: auto !important;
    bottom: var(--cms-fb-y) !important;
  }

  /* キャンペーン（右下） */
  [data-sp-embed] .hero--cms-story .hero-float--campaign{
    right: var(--cms-campaign-x) !important;
    left: auto !important;
    width: var(--cms-campaign-w) !important;
    max-width: none !important;
    top: auto !important;
    bottom: var(--cms-campaign-y) !important;
  }
}


/* EN / TH: CMS hero — same center axis as the title (logo, headline, buttons) */
[data-sp-embed][lang="en"] .hero--cms-story .hero-center, [data-sp-embed][lang="th"] .hero--cms-story .hero-center{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-inline: auto;
}

[data-sp-embed][lang="en"] .hero--cms-story .hero-brand-logo, [data-sp-embed][lang="th"] .hero--cms-story .hero-brand-logo, [data-sp-embed][lang="en"] .hero--cms-story .hero-brand-wordmark, [data-sp-embed][lang="th"] .hero--cms-story .hero-brand-wordmark{
  margin-inline: auto;
  text-align: center;
}

[data-sp-embed][lang="en"] .hero--cms-story .hero-center, [data-sp-embed][lang="th"] .hero--cms-story .hero-center{
  overflow-x: visible;
}

[data-sp-embed][lang="en"] .hero--cms-story .hero-title-float, [data-sp-embed][lang="en"] .hero--cms-story .hero-title-float:first-child, [data-sp-embed][lang="th"] .hero--cms-story .hero-title-float, [data-sp-embed][lang="th"] .hero--cms-story .hero-title-float:first-child{
  display: block;
  width: max-content;
  max-width: none;
  margin-inline: auto;
  white-space: nowrap;
  text-align: center;
  overflow-wrap: normal;
}

[data-sp-embed][lang="en"] .hero--cms-story .hero-center .hero-copy, [data-sp-embed][lang="th"] .hero--cms-story .hero-center .hero-copy{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  text-align: center;
}

[data-sp-embed][lang="en"] .hero--cms-story .hero-center .hero-copy h1, [data-sp-embed][lang="th"] .hero--cms-story .hero-center .hero-copy h1{
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: center;
  width: max-content !important;
  max-width: none !important;
  min-width: max-content;
  /* auto margins collapse to 0 on overflow and override align-self: center */
  margin-inline: 0;
  text-align: center;
  letter-spacing: 0;
}

/* 英語・タイ語タイトル：SAKINA CMS / ボタンと同じ画面中央軸。狭いカラム幅には縛らない */
[data-sp-embed][lang="en"] .hero--cms-story .hero-copy h1 .hero-title-float, [data-sp-embed][lang="th"] .hero--cms-story .hero-copy h1 .hero-title-float{
  position: relative;
  left: 0;
  width: max-content;
  max-width: none;
  margin-inline: auto;
  text-align: center;
}

[data-sp-embed][lang="en"] .hero--cms-story .hero-center .hero-actions, [data-sp-embed][lang="th"] .hero--cms-story .hero-center .hero-actions{
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  align-items: center;
  justify-content: center;
}

[data-sp-embed][lang="en"] .hero--cms-story .hero-center .hero-actions__pair, [data-sp-embed][lang="th"] .hero--cms-story .hero-center .hero-actions__pair{
  width: auto;
  max-width: 100%;
  margin-inline: auto;
  justify-content: center;
}

[data-sp-embed][lang="en"] .hero--cms-story .hero-center .hero-actions .button, [data-sp-embed][lang="th"] .hero--cms-story .hero-center .hero-actions .button{
  justify-content: center;
}


/* ===== Hero CTAs: more air under title, slow fade-in =====
   Button / wordmark sizes: keep PC & iPad base sizes; shrink only on mobile. */
[data-sp-embed] .hero--cms-story .hero-brand-logo--above-title{
  margin-bottom: clamp(1.75rem, 3.2vw, 2.75rem) !important;
}

[data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
  gap: 0.42em !important;
  line-height: 1.28 !important;
}

[data-sp-embed] .hero--cms-story .hero-center .hero-actions{
  margin-top: clamp(2.85rem, 5vw, 4rem) !important;
  gap: clamp(0.55rem, 1.1vw, 0.85rem) !important;
  flex-direction: column;
  align-items: center;
  width: auto;
  max-width: 100%;
}

[data-sp-embed] .hero--cms-story .hero-center .hero-actions__pair{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: inherit;
  justify-content: center;
  align-items: stretch;
  width: 100%;
}

[data-sp-embed].js .hero--cms-story .hero-center.reveal:not(.visible) .hero-actions.growth-fade--hero-cta{
  opacity: 1;
  transform: none;
  filter: none;
}

[data-sp-embed].js .hero--cms-story .hero-center.reveal:not(.visible) .hero-actions.growth-fade--hero-cta .hero-cta-btn{
  opacity: 0;
  transform: translateY(0.85rem);
}

[data-sp-embed].js .hero--cms-story .hero-center.reveal.visible .hero-actions.growth-fade--hero-cta{
  animation: none;
  opacity: 1;
  transform: none;
  filter: none;
}

[data-sp-embed].js .hero--cms-story .hero-center.reveal.visible .hero-actions.growth-fade--hero-cta .hero-cta-btn{
  animation: hero-cta-fade-in 1.45s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--d, 980ms) + var(--cta-d, 0ms));
}

[data-sp-embed].js .hero--cms-story .hero-center.reveal.visible .hero-actions.growth-fade--hero-cta .button.secondary.button--glow{
  animation:
    hero-cta-fade-in 1.45s cubic-bezier(0.22, 1, 0.36, 1) both,
    button-glow-pulse 2.4s ease-in-out 2.4s infinite;
  animation-delay:
    calc(var(--d, 980ms) + var(--cta-d, 0ms)),
    calc(var(--d, 980ms) + var(--cta-d, 0ms) + 1.45s);
}

@keyframes hero-cta-fade-in {
  from {
    opacity: 0;
    transform: translateY(0.85rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mobile only: smaller button text + tighter inner padding */
@media (max-width: 767px) {
  [data-sp-embed] .hero--cms-story .hero-brand-logo--above-title{
    margin-bottom: clamp(1.1rem, 2.8vh, 1.55rem) !important;
  }

  [data-sp-embed] .hero--cms-story .hero-brand-logo--above-title .hero-brand-wordmark__full{
    font-size: clamp(0.95rem, 3.6vw, 1.15rem) !important;
  }

  [data-sp-embed] .hero--cms-story .hero-center .hero-actions{
    margin-top: clamp(1.35rem, 3.2vh, 1.85rem) !important;
    flex-direction: column !important;
    gap: 0.4rem !important;
    width: min(100%, 11.75rem) !important;
    margin-inline: auto !important;
  }

  [data-sp-embed] .hero--cms-story .hero-center .hero-actions__pair{
    flex-direction: column !important;
    gap: 0.4rem !important;
    width: 100% !important;
  }

  [data-sp-embed] .hero--cms-story .hero-center .hero-actions .button, [data-sp-embed] .hero--cms-story .hero-center .hero-actions .button.secondary.button--glow, [data-sp-embed] .hero--cms-story .hero-center .hero-actions .button.button--dark{
    width: 100% !important;
    min-height: 1.95rem !important;
    padding: 0.28rem 0.85rem !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.01em !important;
    justify-content: center !important;
  }

  [data-sp-embed] .hero--cms-story .hero-center .hero-actions .button.secondary.button--glow{
    min-height: 2rem !important;
    padding: 0.3rem 0.95rem !important;
    font-size: 0.8rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-sp-embed].js .hero--cms-story .hero-center.reveal.visible .hero-actions.growth-fade--hero-cta .hero-cta-btn, [data-sp-embed].js .hero--cms-story .hero-center.reveal.visible .hero-actions.growth-fade--hero-cta .button.secondary.button--glow, [data-sp-embed].js .hero--cms-story .hero-center.reveal:not(.visible) .hero-brand-logo--above-title, [data-sp-embed].js .hero--cms-story .hero-center.reveal.visible .hero-brand-logo--above-title, [data-sp-embed].js .hero--cms-story .hero-center.reveal.visible .hero-brand-logo--above-title .hero-brand-wordmark__full{
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* ===== SAKINA CMS wordmark: slow fade-in (re-enable after earlier animation:none) ===== */
[data-sp-embed].js .hero--cms-story .hero-center.reveal:not(.visible) .hero-brand-logo--above-title{
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

[data-sp-embed].js .hero--cms-story .hero-center.reveal:not(.visible) .hero-brand-logo--above-title .hero-brand-wordmark__full{
  opacity: 0;
  transform: translateY(0.75rem);
}

[data-sp-embed].js .hero--cms-story .hero-center.reveal.visible .hero-brand-logo--above-title{
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

[data-sp-embed].js .hero--cms-story .hero-center.reveal.visible .hero-brand-logo--above-title .hero-brand-wordmark__full{
  animation: hero-brand-fade-in 1.5s cubic-bezier(0.22, 1, 0.36, 1) both !important;
  animation-delay: 80ms !important;
}

@keyframes hero-brand-fade-in {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ===== Hero CTAs: prevent label wrap when tab/window shrinks ===== */
[data-sp-embed] .hero--cms-story .hero-center .hero-actions .button, [data-sp-embed] .hero--cms-story .hero-center .hero-actions .button.secondary.button--glow, [data-sp-embed] .hero--cms-story .hero-center .hero-actions .button.button--dark, [data-sp-embed] .hero--cms-story .hero-center .hero-actions .hero-cta-btn{
  white-space: nowrap;
  text-wrap: nowrap;
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
}

[data-sp-embed] .hero--cms-story .hero-center .hero-actions__pair{
  width: auto;
  max-width: 100%;
  flex-wrap: nowrap;
  justify-content: center;
}

/* Medium widths: stack top pair so each label stays on one line */
@media (min-width: 768px) and (max-width: 1200px) {
  [data-sp-embed] .hero--cms-story .hero-center .hero-actions{
    width: min(100%, 15.5rem) !important;
    margin-inline: auto !important;
  }

  [data-sp-embed] .hero--cms-story .hero-center .hero-actions__pair{
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 0.5rem !important;
  }

  [data-sp-embed] .hero--cms-story .hero-center .hero-actions .button, [data-sp-embed] .hero--cms-story .hero-center .hero-actions .button.secondary.button--glow, [data-sp-embed] .hero--cms-story .hero-center .hero-actions .button.button--dark{
    width: 100% !important;
    min-height: 2.65rem !important;
    padding: 0.55rem 1.15rem !important;
    font-size: clamp(0.8rem, 0.72rem + 0.35vw, 0.92rem) !important;
    letter-spacing: 0.02em !important;
  }

  [data-sp-embed] .hero--cms-story .hero-center .hero-actions .button.secondary.button--glow{
    min-height: 2.75rem !important;
    padding: 0.58rem 1.25rem !important;
    font-size: clamp(0.82rem, 0.74rem + 0.35vw, 0.95rem) !important;
  }
}

/* EN / TH: keep PC button pair in a row (labels are shorter than JA). Stack only on phones. */
@media (min-width: 768px) {
  [data-sp-embed][lang="en"] .hero--cms-story .hero-center .hero-actions, [data-sp-embed][lang="th"] .hero--cms-story .hero-center .hero-actions{
    width: auto !important;
    max-width: 100% !important;
    flex-direction: column !important;
    align-items: center !important;
    margin-inline: auto !important;
  }

  [data-sp-embed][lang="en"] .hero--cms-story .hero-center .hero-actions__pair, [data-sp-embed][lang="th"] .hero--cms-story .hero-center .hero-actions__pair{
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: center !important;
    width: auto !important;
    max-width: 100% !important;
    gap: inherit !important;
  }

  [data-sp-embed][lang="en"] .hero--cms-story .hero-center .hero-actions .button, [data-sp-embed][lang="en"] .hero--cms-story .hero-center .hero-actions .button.secondary.button--glow, [data-sp-embed][lang="en"] .hero--cms-story .hero-center .hero-actions .button.button--dark, [data-sp-embed][lang="th"] .hero--cms-story .hero-center .hero-actions .button, [data-sp-embed][lang="th"] .hero--cms-story .hero-center .hero-actions .button.secondary.button--glow, [data-sp-embed][lang="th"] .hero--cms-story .hero-center .hero-actions .button.button--dark{
    width: auto !important;
    flex: 0 0 auto !important;
  }
}




/* =============================================================================
   SAKINA CMS ヒーロー — タイトル周りフロート（モバイル / iPad / iPhone SE）
   モバイル共通: 767px以下 / SEのみ追加調整: 375px以下
   PC（1101px以上・1025〜1100pxタブ縮小）はこのファイル上部の min-width ブロックのまま。

   ■ 写真4枚の名前
     ig       … Instagram（左上）
     line     … LINE（右上）
     fb       … Facebook（左下）
     campaign … キャンペーン（右下）

   ■ タッチ端末共通（1024px以下）
     iPad Mini / Pro / Surface Duo 等 → 16526行〜 の共通ブロック
     モバイル（767px以下）→ 16585行〜（数値は共通と同じ、SE用微調整は375px以下）

   ■ 各写真につける3つの値（下の端末別ブロックで数字だけ書き換える）
     --cms-{写真}-x … 横移動（左端/右端からの距離）
       → 数値を大きくする = 右へ移動 / 小さく or マイナス = 左へ移動
     --cms-{写真}-y … 縦移動
       → 上2枚（ig, line）: 大きく = 下へ / 小さく or マイナス = 上へ
       → 下2枚（fb, campaign）: 大きく = 下から離れる（上へ）/ 小さく = 下に寄る
     --cms-{写真}-w … 大きさ（幅）
       → clamp(最小px, 画面比率vw, 最大px) — 3つ目を大きく = 全体的に大きく
   ============================================================================= */

@media (max-width: 1024px) {
  /* 公式ヘッダーの高さ（float の「上」計算の基準） */
  [data-sp-embed] .hero--cms-story{
    --cms-hero-header-clear: calc(
      var(--sp-public-header-offset, 4.5rem) + env(safe-area-inset-top, 0px)
    );
  }

  /* 中身は端末フル画面と同じ比率のまま。Safariのバー（dvh）で潰さない。
     ヘッダー分だけ下にずらす（画像サイズ・配置・余白の比率は変えない） */
  [data-sp-embed] .hero.hero--cms-story, [data-sp-embed] .hero--cms-story, [data-sp-embed] .hero--cms-story[data-sp-embed-top]{
    min-height: calc(
      100vh + var(--sp-public-header-offset, 4.5rem) + env(safe-area-inset-top, 0px)
    ) !important;
    min-height: calc(
      100lvh + var(--sp-public-header-offset, 4.5rem) + env(safe-area-inset-top, 0px)
    ) !important;
    height: auto !important;
    max-height: none !important;
    box-sizing: border-box !important;
    padding-top: calc(
      var(--sp-public-header-offset, 4.5rem) + env(safe-area-inset-top, 0px)
    ) !important;
    padding-bottom: 0 !important;
    justify-content: center !important;
    overflow: hidden !important;
    margin-bottom: 0 !important;
  }

  [data-sp-embed] .hero--cms-story .hero-floats{
    z-index: 1 !important;
    inset: 0 !important;
  }

  [data-sp-embed] .hero--cms-story .hero-center{
    position: relative;
    z-index: 6 !important;
    isolation: isolate;
    margin-inline: auto;
    margin-top: 0 !important;
    flex-shrink: 0;
  }
}

/* 写真の位置・大きさを変数に当てはめる（1024px以下 = スマホ + iPad すべて） */
@media (max-width: 1024px) {
  [data-sp-embed] .hero--cms-story .hero-float--ig, [data-sp-embed] .hero--cms-story .hero-float--line, [data-sp-embed] .hero--cms-story .hero-float--fb, [data-sp-embed] .hero--cms-story .hero-float--campaign{
    max-width: none !important;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
  }

  /* Instagram（左上）— 下の --cms-ig-x / -y / -w を書き換える */
  [data-sp-embed] .hero--cms-story .hero-float--ig{
    top: calc(var(--cms-hero-header-clear) + var(--cms-ig-y)) !important;
    left: var(--cms-ig-x) !important;
    width: var(--cms-ig-w) !important;
  }

  /* LINE（右上）— 下の --cms-line-x / -y / -w を書き換える */
  [data-sp-embed] .hero--cms-story .hero-float--line{
    top: calc(var(--cms-hero-header-clear) + var(--cms-line-y)) !important;
    right: var(--cms-line-x) !important;
    width: var(--cms-line-w) !important;
  }

  /* Facebook（左下）— 下の --cms-fb-x / -y / -w を書き換える */
  [data-sp-embed] .hero--cms-story .hero-float--fb{
    bottom: var(--cms-fb-y) !important;
    left: var(--cms-fb-x) !important;
    width: var(--cms-fb-w) !important;
  }

  /* キャンペーン（右下）— 下の --cms-campaign-x / -y / -w を書き換える */
  [data-sp-embed] .hero--cms-story .hero-float--campaign{
    bottom: var(--cms-campaign-y) !important;
    right: var(--cms-campaign-x) !important;
    width: var(--cms-campaign-w) !important;
  }
}

/* =============================================================================
   タブレット共通（768px〜1024px）— iPad Mini / Pro / Air 等を同一レイアウトに
   ============================================================================= */
@media (min-width: 768px) and (max-width: 1024px) {
  [data-sp-embed] .hero--cms-story{
    --cms-ig-y: clamp(4.5svh, 7.5svh, 9svh);
    --cms-line-y: clamp(6svh, 9svh, 11svh);
    /* 横位置: 画面内に収める（スマホのマイナス値は端末幅が狭い時用） */
    --cms-ig-x: -2rem;
    --cms-ig-w: clamp(400px, 66vw, 310px);
    --cms-line-x: -2rem;
    --cms-line-w: clamp(400px, 66vw, 310px);
    --cms-fb-x: -2rem;
    --cms-fb-y: 6rem;
    --cms-fb-w: clamp(400px, 66vw, 310px);
    --cms-campaign-x: -2rem;
    --cms-campaign-y: 6rem;
    --cms-campaign-w: clamp(400px, 66vw, 310px);
  }

  [data-sp-embed] .hero--cms-story .hero-center{
    width: min(16.5rem, 78vw) !important;
    max-width: min(16.5rem, 78vw) !important;
  }

  [data-sp-embed] .hero--cms-story .hero-brand-logo--above-title{
    margin-bottom: clamp(0.55rem, 1.2svh, 0.9rem) !important;
  }

  [data-sp-embed] .hero--cms-story .hero-center .hero-actions{
    margin-top: clamp(0.75rem, 1.8svh, 1.15rem) !important;
    flex-direction: column !important;
    width: min(100%, 12rem) !important;
    margin-inline: auto !important;
    gap: 0.45rem !important;
  }

  [data-sp-embed] .hero--cms-story .hero-center .hero-actions .button{
    width: 100% !important;
    justify-content: center !important;
  }

  [data-sp-embed] .hero--cms-story, [data-sp-embed] .hero--cms-story[data-sp-embed-top]{
    padding-bottom: 0 !important;
  }
}

/* =============================================================================
   モバイル（767px以下）
   ============================================================================= */
@media (max-width: 767px) {
  [data-sp-embed] .hero--cms-story, [data-sp-embed] .hero--cms-story[data-sp-embed-top]{
    padding-bottom: 0 !important;
  }

  [data-sp-embed] .hero--cms-story{
    /* 上段2枚: ヘッダー下から svh で配置（中央寄せタイトルとバランス） */
    --cms-ig-y: clamp(4.5svh, 7.5svh, 9svh);
    --cms-line-y: clamp(6svh, 9svh, 11svh);
    /* --- Instagram（左上）--- */
    --cms-ig-x: -1rem;
    --cms-ig-y: 4rem;
    --cms-ig-w: clamp(228px, 66vw, 310px);

    /* --- LINE（右上）--- */
    --cms-line-x: -2rem;
    --cms-line-y: 3rem;
    --cms-line-w: clamp(228px, 66vw, 310px);

    /* --- Facebook（左下）--- */
    --cms-fb-x: -1rem;
    --cms-fb-y: 9rem;
    --cms-fb-w: clamp(228px, 66vw, 310px);

    /* --- キャンペーン（右下）--- */
    --cms-campaign-x: -1rem;
    --cms-campaign-y: 9rem;
    --cms-campaign-w: clamp(228px, 66vw, 310px);
  }

  [data-sp-embed] .hero--cms-story .hero-center{
    width: min(16.5rem, 78vw) !important;
    max-width: min(16.5rem, 78vw) !important;
    /* ヘッダー直下の余白を少し詰める */
    margin-top: -9rem !important;
  }

  [data-sp-embed] .hero--cms-story .hero-brand-logo--above-title{
    margin-bottom: clamp(0.55rem, 1.2svh, 0.9rem) !important;
  }

  [data-sp-embed] .hero--cms-story .hero-center .hero-actions{
    margin-top: clamp(0.75rem, 1.8svh, 1.15rem) !important;
    flex-direction: column !important;
    width: min(100%, 12rem) !important;
    margin-inline: auto !important;
    gap: 0.45rem !important;
  }

  [data-sp-embed] .hero--cms-story .hero-center .hero-actions .button{
    width: 100% !important;
    justify-content: center !important;
  }
}

/* =============================================================================
   iPhone SE 等（375px以下）
   767px ブロックと同じ配置のまま、幅・高さが小さい分だけ写真と余白を少し詰める
   ============================================================================= */
@media (max-width: 375px) {
  [data-sp-embed] .hero--cms-story, [data-sp-embed] .hero--cms-story[data-sp-embed-top]{
    padding-bottom: 0 !important;
  }

  [data-sp-embed] .hero--cms-story{
    /* 大きさだけ SE 向けに縮小（位置は 767px ブロックと同じ svh） */
    --cms-ig-y: clamp(3.5svh, 6svh, 7.5svh);
    --cms-line-y: clamp(5svh, 7.5svh, 9svh);
    --cms-ig-w: clamp(220px, 62vw, 262px);
    --cms-line-w: clamp(220px, 62vw, 262px);
    --cms-fb-w: clamp(220px, 62vw, 262px);
    --cms-campaign-w: clamp(200px, 58vw, 248px);
  }

  [data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
    font-size: clamp(1.9rem, 8.2vw, 2.4rem) !important;
  }
}

/* =============================================================================
   端末別の微調整（他の端末・PC・iPadには一切影響しない）
   ============================================================================= */

/* --- Galaxy Z Fold 5 カバー画面（幅344×882）---
   モバイル（767px）と同じ位置。幅だけ狭い分を少し小さく。
   ※外側画面。内側（広げた状態 ~900px）はタブレット共通ブロックが効く */
@media (min-width: 340px) and (max-width: 350px) {
  [data-sp-embed] .hero--cms-story{
    --cms-ig-x: -1.4rem;
    --cms-ig-y: 6rem;
    --cms-ig-w: clamp(220px, 68vw, 280px);

    --cms-line-x: -3rem;
    --cms-line-y: 6rem;
    --cms-line-w: clamp(220px, 68vw, 280px);

    --cms-fb-x: -1rem;
    --cms-fb-y: 6rem;
    --cms-fb-w: clamp(210px, 64vw, 270px);

    --cms-campaign-x: -3rem;
    --cms-campaign-y: 6rem;
    --cms-campaign-w: clamp(210px, 64vw, 270px);
  }

  [data-sp-embed] .hero--cms-story .hero-center{
    width: min(15.5rem, 82vw) !important;
    max-width: min(15.5rem, 82vw) !important;
  }
}

/* --- Surface Duo / 横長タッチ --- 共通ブロックと同じ（個別上書き削除） */

/* --- Nest Hub（1024×600 = 横長タッチ画面）--- 共通ブロック + max-height でカバー */

/* ===== Hero: kicker after SAKINA CMS + tighter title stack ===== */
[data-sp-embed] .hero--cms-story .hero-kicker{
  display: block !important;
  margin: 0 auto clamp(0.3rem, 0.7vw, 0.5rem) !important;
  padding: 0;
  font-family: var(--font-sans);
  font-size: clamp(0.72rem, 0.5rem + 0.45vw, 0.88rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.2;
  color: #6b7280;
  text-align: center;
  transform: none !important;
}

[data-sp-embed] .hero--cms-story .hero-brand-logo--above-title{
  margin-bottom: clamp(1.5rem, 2.8vw, 2.5rem) !important;
}

@media (max-width: 767px) {
  [data-sp-embed] .hero--cms-story .hero-brand-logo--above-title{
    margin-bottom: clamp(1.1rem, 2.8vh, 1.55rem) !important;
  }
}

[data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
  gap: 0.1em !important;
  line-height: 1.08 !important;
}

[data-sp-embed] .hero--cms-story .hero-title-float + .hero-title-float{
  margin-top: 0 !important;
}

[data-sp-embed].js .hero--cms-story .hero-center.reveal:not(.visible) .hero-kicker{
  opacity: 0;
  transform: translateY(0.5rem);
}

[data-sp-embed].js .hero--cms-story .hero-center.reveal.visible .hero-kicker{
  animation: hero-brand-fade-in 1.35s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 120ms;
}

/* ===== SAKINA CMS wordmark: soft red neon + letter shadow ===== */
[data-sp-embed] .hero--cms-story .hero-brand-logo--above-title .hero-brand-wordmark__full{
  color: #171717 !important;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.82),
    0 2px 6px rgba(15, 23, 42, 0.2),
    0 6px 14px rgba(15, 23, 42, 0.1),
    0 0 10px rgba(254, 202, 202, 0.55),
    0 0 22px rgba(252, 165, 165, 0.42),
    0 0 40px rgba(248, 113, 113, 0.3),
    0 0 64px rgba(239, 68, 68, 0.18) !important;
}

[data-sp-embed].js .hero--cms-story .hero-center.reveal.visible .hero-brand-logo--above-title .hero-brand-wordmark__full{
  animation:
    hero-brand-fade-in 1.5s cubic-bezier(0.22, 1, 0.36, 1) both,
    cms-hero-wordmark-neon 3.2s ease-in-out 1.55s infinite !important;
  animation-delay: 80ms, 1.55s !important;
}

@keyframes cms-hero-wordmark-neon {
  0%,
  100% {
    text-shadow:
      0 1px 0 rgba(255, 255, 255, 0.82),
      0 2px 6px rgba(15, 23, 42, 0.2),
      0 6px 14px rgba(15, 23, 42, 0.1),
      0 0 10px rgba(254, 202, 202, 0.5),
      0 0 22px rgba(252, 165, 165, 0.38),
      0 0 38px rgba(248, 113, 113, 0.26),
      0 0 58px rgba(239, 68, 68, 0.14);
  }
  50% {
    text-shadow:
      0 1px 0 rgba(255, 255, 255, 0.88),
      0 2px 7px rgba(29, 78, 216, 0.28),
      0 7px 16px rgba(15, 23, 42, 0.12),
      0 0 14px rgba(254, 202, 202, 0.72),
      0 0 30px rgba(252, 165, 165, 0.58),
      0 0 52px rgba(248, 113, 113, 0.42),
      0 0 82px rgba(239, 68, 68, 0.28);
  }
}

/* ===== Media fade-in after decode (images + videos) ===== */
[data-sp-embed].js img.sp-media-fade:not(.is-media-ready), [data-sp-embed].js video.sp-media-fade:not(.is-media-ready){
  opacity: 0 !important;
}

[data-sp-embed].js #management img.sp-media-fade, [data-sp-embed].js #management img.sp-media-fade:not(.is-media-ready), [data-sp-embed].js #management img.sp-media-fade.is-media-ready{
  opacity: 1 !important;
  transition: none;
}

[data-sp-embed].js img.sp-media-fade.is-media-ready, [data-sp-embed].js video.sp-media-fade.is-media-ready{
  opacity: 1 !important;
  transition: opacity 0.48s ease;
}

/* Hero cards fade as a unit — keep inner media opaque */
[data-sp-embed].js .hero-float img.sp-media-fade, [data-sp-embed].js .hero-float video.sp-media-fade{
  opacity: 1 !important;
  transition: none;
}

[data-sp-embed].js .hero:not(.hero--cms-story) .hero-float:not(.is-media-ready){
  opacity: 1 !important;
  visibility: visible !important;
}

[data-sp-embed].js .hero--cms-story .hero-float.is-media-ready.is-animating{
  visibility: visible !important;
}

[data-sp-embed].js .hero:not(.hero--cms-story) .hero-float.is-media-ready{
  opacity: 1 !important;
  visibility: visible !important;
  transition: opacity 0.48s ease;
}

@media (prefers-reduced-motion: reduce) {
  [data-sp-embed].js img.sp-media-fade.is-media-ready, [data-sp-embed].js video.sp-media-fade.is-media-ready, [data-sp-embed].js .hero:not(.hero--cms-story) .hero-float.is-media-ready{
    transition: none !important;
  }
}

/* =============================================================================
   管理カード: 画像は常に元比率。全幅でカバーフロー（2秒交代・ホバーで停止）。
   ============================================================================= */
[data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-card__preview, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel .hero-split-media, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card .ai-insight-card__preview{
  aspect-ratio: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  overflow: hidden !important;
}

[data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-card__preview picture, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card .ai-insight-card__preview picture{
  display: block !important;
  width: 100% !important;
}

[data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-card__preview img, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card .ai-insight-card__preview img{
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: top center !important;
  display: block !important;
  transform: none !important;
}

[data-sp-embed] #management .ai-insights-bento--mgmt-carousel.is-mgmt-coverflow, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.is-mgmt-coverflow.is-mgmt-marquee, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.is-mgmt-coverflow.ai-insights-bento--marquee, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.is-mgmt-coverflow:not(.ai-insights-bento--marquee){
  position: relative !important;
  display: block !important;
  grid-template-columns: none !important;
  width: min(100%, 96rem) !important;
  max-width: 96rem !important;
  min-height: clamp(26rem, 64vw, 46rem) !important;
  height: auto !important;
  margin: clamp(0.75rem, 2vw, 1.75rem) auto 0 !important;
  padding: 1.1rem 0 2rem !important;
  perspective: 1600px !important;
  overflow: visible !important;
  cursor: grab !important;
  touch-action: pan-y !important;
  overscroll-behavior-x: none;
  -webkit-overflow-scrolling: touch;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

[data-sp-embed] #management .ai-insights-bento--mgmt-carousel.is-mgmt-coverflow > .ai-insight-card, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.is-mgmt-coverflow > .ai-insight-card[data-mgmt-pos], [data-sp-embed].js #showcases #management .reveal.visible .ai-insights-bento--mgmt-carousel.is-mgmt-coverflow > .ai-insight-card[data-mgmt-pos="0"], [data-sp-embed].js #showcases #management .reveal.visible .ai-insights-bento--mgmt-carousel.is-mgmt-coverflow > .ai-insight-card[data-mgmt-pos="1"], [data-sp-embed].js #showcases #management .reveal.visible .ai-insights-bento--mgmt-carousel.is-mgmt-coverflow > .ai-insight-card[data-mgmt-pos="2"]{
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  flex: none !important;
  width: var(--mgmt-card-w, min(86vw, 42rem)) !important;
  max-width: var(--mgmt-card-w, min(86vw, 42rem)) !important;
  min-width: 0 !important;
  margin: 0 !important;
  pointer-events: auto !important;
  contain: none !important;
  touch-action: pan-y !important;
  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.4s ease,
    filter 0.4s ease,
    box-shadow 0.4s ease !important;
}

[data-sp-embed].js #showcases #management .reveal.visible .ai-insights-bento--mgmt-carousel.is-mgmt-coverflow > .ai-insight-card[data-mgmt-pos="0"], [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.is-mgmt-coverflow > .ai-insight-card[data-mgmt-pos="0"]{
  transform: translate(-50%, -50%) scale(1) rotateY(0deg) !important;
  opacity: 1 !important;
  filter: brightness(1) !important;
  z-index: 5 !important;
}

[data-sp-embed].js #showcases #management .reveal.visible .ai-insights-bento--mgmt-carousel.is-mgmt-coverflow > .ai-insight-card[data-mgmt-pos="1"], [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.is-mgmt-coverflow > .ai-insight-card[data-mgmt-pos="1"]{
  transform: translate(calc(-50% + var(--mgmt-side-x, 32%)), calc(-50% + 1.15rem)) scale(var(--mgmt-side-scale, 0.84)) rotateY(-15deg) !important;
  opacity: 0.64 !important;
  filter: brightness(0.95) !important;
  z-index: 2 !important;
  cursor: pointer;
}

[data-sp-embed].js #showcases #management .reveal.visible .ai-insights-bento--mgmt-carousel.is-mgmt-coverflow > .ai-insight-card[data-mgmt-pos="2"], [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.is-mgmt-coverflow > .ai-insight-card[data-mgmt-pos="2"]{
  transform: translate(calc(-50% - var(--mgmt-side-x, 32%)), calc(-50% + 1.15rem)) scale(var(--mgmt-side-scale, 0.84)) rotateY(15deg) !important;
  opacity: 0.64 !important;
  filter: brightness(0.95) !important;
  z-index: 1 !important;
  cursor: pointer;
}

@media (max-width: 767px) {
  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.is-mgmt-coverflow{
    --mgmt-card-w: min(88vw, 26rem);
    --mgmt-side-x: 26%;
    --mgmt-side-scale: 0.86;
    min-height: clamp(24rem, 118vw, 34rem) !important;
  }
}

@media (min-width: 768px) {
  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.is-mgmt-coverflow{
    --mgmt-card-w: min(78vw, 46rem);
    --mgmt-side-x: 30%;
    --mgmt-side-scale: 0.84;
  }
}

@media (min-width: 1500px) {
  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.is-mgmt-coverflow{
    --mgmt-card-w: min(58vw, 56rem);
    --mgmt-side-x: 32%;
    --mgmt-side-scale: 0.82;
    min-height: clamp(32rem, 42vw, 50rem) !important;
  }
}

[data-sp-embed] #management .ai-insights-bento--mgmt-carousel.is-mgmt-coverflow::before, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.is-mgmt-coverflow::after{
  content: "";
  position: absolute;
  top: 6%;
  bottom: 8%;
  width: min(28%, 11rem);
  z-index: 8;
  pointer-events: auto;
  cursor: pointer;
}
@media (hover: none), (pointer: coarse), (max-width: 1279px) {
  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.is-mgmt-coverflow::before, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.is-mgmt-coverflow::after{
    pointer-events: none;
  }
}
[data-sp-embed] #management .ai-insights-bento--mgmt-carousel.is-mgmt-coverflow::before{
  left: 0;
}
[data-sp-embed] #management .ai-insights-bento--mgmt-carousel.is-mgmt-coverflow::after{
  right: 0;
}
[data-sp-embed] #management .ai-insights-bento--mgmt-carousel.is-mgmt-coverflow > .ai-insight-card[data-mgmt-pos="1"], [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.is-mgmt-coverflow > .ai-insight-card[data-mgmt-pos="2"]{
  cursor: pointer !important;
}
[data-sp-embed] #management .ai-insights-bento--mgmt-carousel.is-mgmt-coverflow.is-mgmt-intro > .ai-insight-card, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.is-mgmt-coverflow.is-mgmt-intro > .ai-insight-card[data-mgmt-pos], [data-sp-embed].js #showcases #management .reveal.visible .ai-insights-bento--mgmt-carousel.is-mgmt-coverflow.is-mgmt-intro > .ai-insight-card[data-mgmt-pos="0"], [data-sp-embed].js #showcases #management .reveal.visible .ai-insights-bento--mgmt-carousel.is-mgmt-coverflow.is-mgmt-intro > .ai-insight-card[data-mgmt-pos="1"], [data-sp-embed].js #showcases #management .reveal.visible .ai-insights-bento--mgmt-carousel.is-mgmt-coverflow.is-mgmt-intro > .ai-insight-card[data-mgmt-pos="2"]{
  transition:
    transform 0.36s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.3s ease,
    filter 0.3s ease,
    box-shadow 0.3s ease !important;
}

/* Reserve video height so #industries etc. don't land on the section above */
[data-sp-embed] .ai-insights-bento .ai-insight-card__preview:has(video), [data-sp-embed] .ai-insights-bento .ai-insight-card__preview:has(.ai-insight-card__media){
  aspect-ratio: 16 / 9;
  min-height: 12.5rem;
}
[data-sp-embed] .ai-insights-bento .ai-insight-card__preview video, [data-sp-embed] .ai-insights-bento .ai-insight-card__preview .ai-insight-card__media{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/*
  Analysis videos: macOS chrome + purple title tab (like サーベイタイプ).
  Tab sits ABOVE the video so the existing video aspect-ratio is unchanged.
*/
[data-sp-embed] #analysis .ai-insight-card__preview--window-tab{
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  aspect-ratio: auto !important;
  min-height: 0 !important;
  overflow: hidden;
}

[data-sp-embed] #analysis .ai-insight-card__preview--window-tab::before{
  height: 36px !important;
  flex: 0 0 36px !important;
  background:
    radial-gradient(circle at 16px 50%, #ff5f57 0 5.5px, transparent 6.5px),
    radial-gradient(circle at 36px 50%, #febc2e 0 5.5px, transparent 6.5px),
    radial-gradient(circle at 56px 50%, #28c840 0 5.5px, transparent 6.5px),
    linear-gradient(180deg, #f7f7f8 0%, #ececee 100%) !important;
  border: none !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 0 !important;
}

[data-sp-embed] #analysis .cms-preview-tab{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.7rem 1.05rem 0.7rem 1rem;
  margin: 0;
  background: #fff;
  color: #111827;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.35;
  border: none;
  border-left: 4px solid #8b5cf6;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset;
}

[data-sp-embed] #analysis .ai-insight-card__preview--window-tab > .ai-insight-card__media{
  flex: 0 0 auto !important;
  height: auto !important;
  max-height: none !important;
}

[data-sp-embed] #analysis .ai-insight-card__preview--sns-video.ai-insight-card__preview--window-tab > .ai-insight-card__media{
  aspect-ratio: 16 / 10;
}

[data-sp-embed] #analysis .ai-insight-card__preview--survey-video.ai-insight-card__preview--window-tab > .ai-insight-card__media{
  aspect-ratio: auto;
}

/* モバイル アンケート作成: 横幅は現状のまま、縦だけ本来比率に戻す（16/9 予約を上書き） */
@media (max-width: 860px) {
  [data-sp-embed] #create .ai-insight-card__preview--survey-create-video, [data-sp-embed] #create .ai-insight-card__preview--survey-create-video.ai-insight-card__preview:has(video){
    aspect-ratio: auto !important;
    height: auto !important;
    min-height: 0 !important;
  }

  [data-sp-embed] #create .ai-insight-card__preview--survey-create-video .ai-insight-card__media, [data-sp-embed] #create .ai-insight-card__preview--survey-create-video video{
    object-fit: contain !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: auto !important;
  }
}

/* モバイル管理: ネイティブスワイプ（3枚が見える横スクロール） */
@media (max-width: 860px) {
  [data-sp-embed] #management .showcase-capabilities.analysis-capabilities, [data-sp-embed] #management .showcase--analysis-full > .showcase-capabilities{
    overflow: visible !important;
    overflow-x: visible !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.is-mgmt-snap, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.is-mgmt-snap.is-mgmt-coverflow{
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 0.65rem !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0.6rem 0 0 !important;
    padding: 0.25rem 8% 1rem !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 8%;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x !important;
    perspective: none !important;
    cursor: grab;
    scrollbar-width: none;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.is-mgmt-snap::-webkit-scrollbar{
    display: none;
    height: 0;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.is-mgmt-snap > .ai-insight-card, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.is-mgmt-snap > .ai-insight-card[data-mgmt-pos], [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.is-mgmt-snap > .ai-insight-card[data-mgmt-pos="0"], [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.is-mgmt-snap > .ai-insight-card[data-mgmt-pos="1"], [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.is-mgmt-snap > .ai-insight-card[data-mgmt-pos="2"], [data-sp-embed].js #showcases #management .reveal.visible .ai-insights-bento--mgmt-carousel.is-mgmt-snap > .ai-insight-card[data-mgmt-pos="0"], [data-sp-embed].js #showcases #management .reveal.visible .ai-insights-bento--mgmt-carousel.is-mgmt-snap > .ai-insight-card[data-mgmt-pos="1"], [data-sp-embed].js #showcases #management .reveal.visible .ai-insights-bento--mgmt-carousel.is-mgmt-snap > .ai-insight-card[data-mgmt-pos="2"]{
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
    z-index: auto !important;
    flex: 0 0 84% !important;
    width: 84% !important;
    max-width: 84% !important;
    min-width: 84% !important;
    margin: 0 !important;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    will-change: auto !important;
    transition: none !important;
    pointer-events: auto !important;
    touch-action: pan-x !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.is-mgmt-snap > .ai-insight-card:hover{
    transform: none !important;
  }
}

[data-sp-embed] .mgmt-snap-shell{
  position: relative;
  width: 100%;
}
[data-sp-embed] .mgmt-snap-arrow{
  display: none;
}
@media (max-width: 860px) {
  [data-sp-embed] .mgmt-snap-shell:not([hidden]) .mgmt-snap-arrow{
    display: flex;
    position: absolute;
    top: 50%;
    z-index: 8;
    width: 2.1rem;
    height: 3rem;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(15, 23, 42, 0.4);
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  [data-sp-embed] .mgmt-snap-arrow--prev{
    left: 0;
  }
  [data-sp-embed] .mgmt-snap-arrow--next{
    right: 0;
  }
  [data-sp-embed] .mgmt-snap-arrow svg{
    width: 1.2rem;
    height: 1.2rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.55;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
}

/* Use Cases: number badge + Japanese title on one row, then image, then body */
[data-sp-embed] #use-cases .industry-grid--cases .feature-card .card-top{
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 0;
}

[data-sp-embed] #use-cases .industry-grid--cases .feature-card .card-top em{
  flex: 0 0 auto;
}

[data-sp-embed] #use-cases .industry-grid--cases .feature-card .card-top h3{
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: clamp(1.05rem, 0.92rem + 0.5vw, 1.35rem);
  line-height: 1.4;
  letter-spacing: 0.02em;
  word-break: normal;
  overflow-wrap: anywhere;
  line-break: auto;
}

[data-sp-embed][lang="th"] #use-cases .industry-grid--cases .feature-card .card-top h3{
  overflow-wrap: anywhere;
  word-break: break-word;
  line-break: anywhere;
}

@media (min-width: 1041px) {
  [data-sp-embed] #use-cases .industry-grid--cases .feature-card .card-top{
    padding: 20px 22px 0;
    gap: 14px;
  }

  [data-sp-embed] #use-cases .industry-grid--cases .feature-card .card-top h3{
    font-size: clamp(1.15rem, 1.02rem + 0.4vw, 1.4rem);
    white-space: nowrap;
    overflow-wrap: normal;
  }

  [data-sp-embed] #use-cases .industry-grid--cases .feature-card .card-copy{
    padding: 16px 22px 26px;
  }
}

@media (min-width: 761px) and (max-width: 1040px) {
  [data-sp-embed] #use-cases .industry-grid--cases .feature-card .card-top{
    padding: 16px 16px 0;
    gap: 10px;
  }

  [data-sp-embed] #use-cases .industry-grid--cases .feature-card .card-top h3{
    font-size: clamp(0.95rem, 0.8rem + 0.6vw, 1.2rem);
  }
}

@media (max-width: 760px) {
  [data-sp-embed] #use-cases .industry-grid.industry-grid--cases{
    grid-template-columns: minmax(0, 1fr);
    max-width: min(28rem, 100%);
    gap: 14px;
  }

  [data-sp-embed] #use-cases .industry-grid--cases .feature-card .card-top{
    padding: 16px 16px 0;
    gap: 12px;
    align-items: center;
  }

  [data-sp-embed] #use-cases .industry-grid--cases .feature-card .card-top em{
    min-width: 36px;
    height: 36px;
    font-size: 12px;
  }

  [data-sp-embed] #use-cases .industry-grid--cases .feature-card .card-top h3{
    font-size: clamp(1rem, 3.8vw, 1.15rem);
    line-height: 1.4;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow-wrap: normal;
  }

  [data-sp-embed] #use-cases .industry-grid--cases .feature-card__visual{
    margin: 12px 16px 0;
  }

  [data-sp-embed] #use-cases .industry-grid--cases .feature-card .card-copy{
    padding: 12px 16px 18px;
  }

  [data-sp-embed] #use-cases .industry-grid--cases .feature-card .card-copy p{
    font-size: 13px;
    line-height: 1.7;
  }
}

/* CMS title floats: hidden until all 4 decode, then snap in together */
[data-sp-embed].js .hero--cms-story .hero-floats:not(.is-group-ready) .hero-float, [data-sp-embed].js .hero--cms-story .hero-float:not(.is-animating){
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

[data-sp-embed].js .hero--cms-story .hero-floats:not(.is-group-ready) .hero-float img, [data-sp-embed].js .hero--cms-story .hero-float:not(.is-animating) img{
  opacity: 0 !important;
}

[data-sp-embed].js .hero--cms-story .hero-floats.is-group-ready .hero-float, [data-sp-embed].js .hero--cms-story .hero-float.is-animating{
  visibility: visible !important;
}

[data-sp-embed].js .hero--cms-story .hero-floats.is-group-ready .hero-float img{
  opacity: 1 !important;
}

[data-sp-embed].js .hero--cms-story .hero-floats.is-group-ready .hero-float.is-animating{
  animation:
    cms-float-snap 0.38s cubic-bezier(0.22, 1, 0.36, 1) both,
    cms-float-orbit 15s linear 0.38s infinite !important;
}

[data-sp-embed].js .hero--cms-story .hero-floats.is-group-ready .hero-float--ig.is-animating{
  animation:
    cms-float-snap 0.38s cubic-bezier(0.22, 1, 0.36, 1) both,
    cms-float-orbit 14s linear 0.38s infinite !important;
}

[data-sp-embed].js .hero--cms-story .hero-floats.is-group-ready .hero-float--line.is-animating{
  animation:
    cms-float-snap 0.38s cubic-bezier(0.22, 1, 0.36, 1) both,
    cms-float-orbit 16.5s linear -2.8s infinite reverse !important;
}

[data-sp-embed].js .hero--cms-story .hero-floats.is-group-ready .hero-float--fb.is-animating{
  animation:
    cms-float-snap 0.38s cubic-bezier(0.22, 1, 0.36, 1) both,
    cms-float-orbit 17.5s linear -6.1s infinite !important;
}

[data-sp-embed].js .hero--cms-story .hero-floats.is-group-ready .hero-float--campaign.is-animating{
  animation:
    cms-float-snap 0.38s cubic-bezier(0.22, 1, 0.36, 1) both,
    cms-float-orbit 15.2s linear -8.6s infinite reverse !important;
}

@keyframes cms-float-snap {
  from {
    opacity: 0;
    transform: rotate(var(--hero-float-tilt, 0deg)) scale(0.96);
  }
  to {
    opacity: 1;
    transform: rotate(var(--hero-float-tilt, 0deg)) scale(1);
  }
}

/* Jump bar: just below the section divider, centered. Light theme, glow underline. */
[data-sp-embed] .showcase-capabilities > .section-jump-bar-slot{
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  margin: 0.85rem 0 1.1rem;
  overflow-anchor: none;
}

[data-sp-embed] .band-management .showcase--analysis-full > .showcase-capabilities.analysis-capabilities:has(> .section-jump-bar-slot), [data-sp-embed] .band-analysis .showcase--analysis-full > .showcase-capabilities.analysis-capabilities:has(> .section-jump-bar-slot){
  padding-top: 0;
}

[data-sp-embed] .section-jump-bar{
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

[data-sp-embed] .section-jump-bar__item{
  position: relative;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  margin: 0;
  padding: clamp(0.68rem, 0.28vw + 0.42rem, 1.05rem) clamp(1.05rem, 0.45vw + 0.5rem, 1.75rem) clamp(0.75rem, 0.32vw + 0.46rem, 1.15rem);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #64748b;
  font-size: clamp(1rem, 0.68vw + 0.62rem, 1.8rem);
  font-weight: 650;
  letter-spacing: 0.02em;
  line-height: 1.35;
  text-decoration: none;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  transition: color 180ms ease, background 180ms ease;
}

[data-sp-embed] .section-jump-bar__item + .section-jump-bar__item::before{
  content: "";
  position: absolute;
  left: 0;
  top: 28%;
  bottom: 28%;
  width: 1px;
  background: rgba(15, 23, 42, 0.1);
  pointer-events: none;
}

[data-sp-embed] .section-jump-bar__item::after{
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: clamp(0.24rem, 0.14vw, 0.4rem);
  height: clamp(2px, 0.11vw, 3px);
  border-radius: 99px;
  background: transparent;
  opacity: 0;
  transform: scaleX(0.4);
  transition:
    opacity 180ms ease,
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 180ms ease,
    background 180ms ease;
}

[data-sp-embed] .section-jump-bar__item:focus{
  outline: none;
}

[data-sp-embed] .section-jump-bar__item.is-current{
  color: #be123c;
  background: transparent;
}

[data-sp-embed] .section-jump-bar__item.is-current::before{
  opacity: 0;
}

[data-sp-embed] .section-jump-bar__item.is-current::after{
  opacity: 1;
  transform: scaleX(1);
  height: 3px;
  left: 12%;
  right: 12%;
  background: linear-gradient(90deg, #fb7185 0%, #ffffff 48%, #f43f5e 100%);
  box-shadow:
    0 0 10px rgba(244, 63, 94, 0.55),
    0 0 22px rgba(251, 113, 133, 0.38),
    0 0 36px rgba(253, 164, 175, 0.22);
}

@media (hover: hover) and (pointer: fine) {
  [data-sp-embed] .section-jump-bar__item:hover, [data-sp-embed] .section-jump-bar__item:focus-visible{
    color: #e11d48;
    background: transparent;
  }

  [data-sp-embed] .section-jump-bar__item:hover::after, [data-sp-embed] .section-jump-bar__item:focus-visible::after{
    opacity: 0.7;
    transform: scaleX(1);
    background: linear-gradient(90deg, #fb7185 0%, #fff 50%, #f43f5e 100%);
    box-shadow:
      0 0 8px rgba(244, 63, 94, 0.35),
      0 0 16px rgba(251, 113, 133, 0.22);
  }

  [data-sp-embed] .section-jump-bar__item.is-current:hover::after, [data-sp-embed] .section-jump-bar__item.is-current:focus-visible::after{
    opacity: 1;
    height: 3px;
    left: 12%;
    right: 12%;
    background: linear-gradient(90deg, #fb7185 0%, #ffffff 48%, #f43f5e 100%);
    box-shadow:
      0 0 10px rgba(244, 63, 94, 0.55),
      0 0 22px rgba(251, 113, 133, 0.38),
      0 0 36px rgba(253, 164, 175, 0.22);
  }
}

[data-sp-embed] .section-jump-bar.is-pinned{
  position: fixed;
  z-index: 90;
  top: calc(var(--sp-public-header-offset, 4.5rem) + env(safe-area-inset-top, 0px));
  left: 0;
  right: 0;
  width: auto;
  max-width: none;
  margin: 0;
  justify-content: center;
  padding: 0.35rem clamp(20px, 5vw, 80px) 0.2rem;
  border: 0;
  border-radius: 0;
  background: rgba(248, 249, 250, 0.94);
  box-shadow: none;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

[data-sp-embed] .section-jump-bar-slot.is-pinned{
  margin-top: 0;
  margin-bottom: 0;
}

[data-sp-embed] .ai-insight-card[id]{
  scroll-margin-top: calc(
    var(--sp-public-header-offset, 4.5rem) + env(safe-area-inset-top, 0px) +
      var(--section-jump-bar-h, 3.6rem) + 22px
  );
}

[data-sp-embed] .ai-insight-card[id] > .hero-split-media, [data-sp-embed] .ai-insight-card[id] > .ai-insight-card__preview{
  scroll-margin-top: calc(
    var(--sp-public-header-offset, 4.5rem) + env(safe-area-inset-top, 0px) +
      var(--section-jump-bar-h, 3.6rem) + 22px
  );
}

[data-sp-embed][lang="en"] .section-jump-bar__item, [data-sp-embed][lang="th"] .section-jump-bar__item{
  font-weight: 600;
  letter-spacing: 0.01em;
}

@media (max-width: 760px) {
  [data-sp-embed] .section-jump-bar{
    max-width: 100%;
  }

  [data-sp-embed] .ai-insight-card[id] > .hero-split-title, [data-sp-embed] .ai-insight-card[id] > .ai-insight-card__media-label{
    scroll-margin-top: calc(
      var(--sp-public-header-offset, 4.5rem) + env(safe-area-inset-top, 0px) +
        var(--section-jump-bar-h, 3.6rem) + 18px
    );
  }

  [data-sp-embed] .section-jump-bar__item{
    padding: 0.62rem 0.72rem 0.74rem;
    font-size: 0.76rem;
  }

  [data-sp-embed] .section-jump-bar.is-pinned{
    padding-inline: clamp(16px, 4vw, 24px);
  }
}

[data-sp-embed] #create .create-demo__lights{
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
}

[data-sp-embed] #create .create-demo__lights i{
  width: 0.58rem;
  height: 0.58rem;
  border-radius: 999px;
  background: #f87171;
}

[data-sp-embed] #create .create-demo__lights i:nth-child(2){
  background: #fbbf24;
}

[data-sp-embed] #create .create-demo__lights i:nth-child(3){
  background: #4ade80;
}

[data-sp-embed] #create .ai-insight-card--survey-live > .create-demo{
  width: 100%;
  min-width: 0;
  align-self: center;
}

[data-sp-embed].js #create .reveal.visible .reveal-media:not(.visible) .create-demo__window{
  opacity: 1;
  transform: none;
}

[data-sp-embed] #create .ai-insight-card--survey-live .create-demo__chrome{
  justify-content: flex-start;
  min-height: 2.35rem;
  padding: 0.55rem 0.95rem;
}

[data-sp-embed] #create .ai-insight-card--survey-live .create-demo__body{
  min-height: 0;
}

[data-sp-embed] #create .ai-insight-card--survey-live .create-demo__stage{
  min-height: 0;
  place-items: start center;
}

[data-sp-embed] #create .ai-insight-card--survey-live .create-demo__panel--survey{
  width: min(100%, 18.75rem);
}

[data-sp-embed] #create .ai-insight-card--survey-live .create-survey__hero{
  aspect-ratio: auto;
}

[data-sp-embed] #create .ai-insight-card--survey-live .create-demo__more{
  margin: 0.75rem 0 0;
}

[data-sp-embed] #create .create-demo__preview-head{
  justify-content: center;
}

[data-sp-embed] #create .create-survey-type{
  display: grid;
  gap: 0.45rem;
}

[data-sp-embed] #create .create-survey-type > span{
  font-size: 0.9rem;
  font-weight: 700;
  color: #94a3b8;
}

[data-sp-embed] #create .create-survey-type > div{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 0.3rem;
  width: 100%;
  padding: 0.3rem;
  border-radius: 0.95rem;
  background: linear-gradient(135deg, #fff1f5 0%, #f5f3ff 100%);
  border: 1px solid rgba(236, 72, 153, 0.22);
  box-shadow: 0 6px 18px rgba(236, 72, 153, 0.1);
}

[data-sp-embed] #create .create-survey-type button{
  appearance: none;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.22rem;
  min-width: 0;
  border: 1px solid rgba(15, 23, 42, 0.06);
  background: #fff;
  color: #334155;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  padding: 0.5rem 0.3rem 0.55rem;
  border-radius: 0.7rem;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

[data-sp-embed] #create .create-survey-type button::before{
  flex: none;
  font-size: 1.3em;
  line-height: 1;
}

[data-sp-embed] #create .create-survey-type button[data-survey-type="normal"]::before{
  content: "📝";
}

[data-sp-embed] #create .create-survey-type button[data-survey-type="quiz"]::before{
  content: "💡";
}

[data-sp-embed] #create .create-survey-type button[data-survey-type="estimation"]::before{
  content: "🧾";
}

[data-sp-embed] #create .create-survey-type button:hover{
  color: #be185d;
  border-color: rgba(236, 72, 153, 0.35);
  box-shadow: 0 6px 14px rgba(236, 72, 153, 0.18);
  transform: translateY(-2px);
}

[data-sp-embed] #create .create-survey-type button:active{
  transform: translateY(0) scale(0.97);
}

[data-sp-embed] #create .create-survey-type button:focus-visible{
  outline: 2px solid #db2777;
  outline-offset: 2px;
}

[data-sp-embed] #create .create-survey-type button.is-on, [data-sp-embed] #create .create-survey-type button.is-on:hover{
  color: #fff;
  background: linear-gradient(135deg, #ec4899 0%, #a855f7 100%);
  border-color: transparent;
  box-shadow: 0 8px 18px rgba(168, 85, 247, 0.32);
  transform: translateY(-1px);
}

/* Invite the first tap; stops once the visitor picks a type */
[data-sp-embed] #create .create-demo:not(.is-type-picked) .create-survey-type > div{
  animation: create-survey-type-invite 2.4s ease-in-out infinite;
}

@keyframes create-survey-type-invite {
  0%,
  100% {
    box-shadow: 0 6px 18px rgba(236, 72, 153, 0.1), 0 0 0 0 rgba(236, 72, 153, 0);
  }
  50% {
    box-shadow: 0 6px 18px rgba(236, 72, 153, 0.16), 0 0 0 5px rgba(236, 72, 153, 0.16);
  }
}

[data-sp-embed] #create .create-coupon-edit{
  display: none;
}

[data-sp-embed] #create .create-demo.is-coupon-edit .create-demo__field--title, [data-sp-embed] #create .create-demo.is-coupon-edit .create-survey-q{
  display: none;
}

[data-sp-embed] #create .create-demo.is-coupon-edit .create-coupon-edit{
  display: grid;
  gap: 0.45rem;
  padding: 0.8rem;
  border-radius: 0.95rem;
  border: 1px solid rgba(244, 114, 182, 0.35);
  background:
    linear-gradient(180deg, #fff7fb 0%, #fff 42%);
  animation: create-survey-enter 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

[data-sp-embed] #create .create-coupon-edit__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

[data-sp-embed] #create .create-coupon-edit__head span{
  font-size: 0.78rem;
  font-weight: 800;
  color: #9d174d;
}

[data-sp-embed] #create .create-coupon-edit__head em{
  font-style: normal;
  font-size: 0.64rem;
  font-weight: 700;
  color: #be185d;
  background: #fce7f3;
  border-radius: 999px;
  padding: 0.16rem 0.45rem;
}

[data-sp-embed] #create .create-coupon-edit__off{
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.15rem;
  padding: 0.7rem 0.5rem 0.55rem;
  border-radius: 0.8rem;
  background: #fff;
  border: 1px dashed rgba(219, 39, 119, 0.35);
  color: #be185d;
}

[data-sp-embed] #create .create-coupon-edit__off b{
  font-size: 2.4rem;
  line-height: 0.9;
  letter-spacing: -0.04em;
}

[data-sp-embed] #create .create-coupon-edit__off small{
  margin-bottom: 0.2rem;
  font-size: 0.95rem;
  font-weight: 800;
}

[data-sp-embed] #create .create-coupon-edit__row{
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  align-items: center;
  gap: 0.45rem;
}

[data-sp-embed] #create .create-coupon-edit__row span{
  font-size: 0.68rem;
  font-weight: 800;
  color: #9d174d;
}

[data-sp-embed] #create .create-coupon-edit__row strong{
  display: block;
  padding: 0.42rem 0.6rem;
  border-radius: 0.55rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  font-size: 0.82rem;
  font-weight: 700;
  color: #111827;
}

[data-sp-embed] #create .create-survey-q{
  display: grid;
  gap: 0.45rem;
  padding: 0.75rem 0.8rem 0.7rem;
  border-radius: 0.9rem;
  border: 1.5px solid #818cf8;
  background: #f8f7ff;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

[data-sp-embed] #create .create-survey-q__top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
}

[data-sp-embed] #create .create-survey-q__top .create-survey-q__status{
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  color: #4f46e5;
  background: #eef2ff;
}

[data-sp-embed] #create .create-survey-q__status::before{
  content: "";
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 999px;
  background: #6366f1;
  animation: create-edit-pulse 1.4s ease-in-out infinite;
}

@keyframes create-edit-pulse {
  50% { opacity: 0.3; }
}

[data-sp-embed] #create .create-survey-q__top strong{
  font-size: 0.86rem;
  color: #111827;
}

[data-sp-embed] #create .create-survey-q__top span, [data-sp-embed] #create .create-survey-q__top em{
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 700;
  color: #6366f1;
  background: #fff;
  border-radius: 999px;
  padding: 0.12rem 0.42rem;
}

[data-sp-embed] #create .create-survey-q > p{
  margin: 0;
  padding: 0.45rem 0.6rem;
  border-radius: 0.6rem;
  border: 1px solid rgba(99, 102, 241, 0.35);
  background: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  color: #1e293b;
}

[data-sp-embed] #create .create-survey-q > p::after{
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -0.12em;
  background: #6366f1;
  animation: create-caret 0.85s step-end infinite;
}

[data-sp-embed] #create .create-survey-q ol{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}

[data-sp-embed] #create .create-survey-q li{
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0.42rem 0.55rem;
  border-radius: 0.6rem;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  font-size: 0.84rem;
  font-weight: 600;
  color: #334155;
  opacity: 1;
}

[data-sp-embed] #create .create-demo.is-creating .create-survey-q li{
  animation: create-opt-in 0.45s ease both;
  animation-delay: calc(var(--i) * 0.28s + 0.85s);
}

[data-sp-embed] #create .create-survey-q li b{
  display: grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 999px;
  background: #eef2ff;
  color: #4f46e5;
  font-size: 0.68rem;
}

[data-sp-embed] #create .create-survey-q__add{
  justify-self: start;
  font-size: 0.78rem;
  font-weight: 700;
  color: #db2777;
}

[data-sp-embed] #create .create-demo__panel--survey{
  width: min(100%, 20rem);
}

[data-sp-embed] #create .create-survey, [data-sp-embed] #create .create-trend{
  background: #fff;
  border-radius: 1rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.12);
  overflow: hidden;
}

[data-sp-embed] #create .create-survey__hero{
  margin: 0;
  aspect-ratio: auto;
  background: #111827;
}

[data-sp-embed] #create .create-survey__hero img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

[data-sp-embed] #create .create-survey__body{
  display: grid;
  gap: 0.35rem;
  padding: 0.75rem 0.85rem 0.9rem;
}

[data-sp-embed] #create .create-survey__kicker{
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #db2777;
}

[data-sp-embed] #create .create-survey__body h4, [data-sp-embed] #create .create-survey__ask{
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: #111827;
}

[data-sp-embed] #create .create-survey__body > p{
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: #64748b;
}

[data-sp-embed] #create .create-survey__body ul{
  list-style: none;
  margin: 0.15rem 0 0.2rem;
  padding: 0;
  display: grid;
  gap: 0.3rem;
}

[data-sp-embed] #create .create-survey__body li{
  margin: 0;
  padding: 0.4rem 0.6rem;
  border-radius: 0.55rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  font-size: 0.8rem;
  font-weight: 600;
  color: #334155;
}

[data-sp-embed] #create .create-survey__btn{
  justify-self: stretch;
  text-align: center;
  margin-top: 0.2rem;
  padding: 0.48rem 0.7rem;
  border-radius: 999px;
  background: #06c755;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
}

[data-sp-embed] #create .create-trend{
  display: grid;
  gap: 0.55rem;
  padding: 0.85rem 0.85rem 0.95rem;
}

[data-sp-embed] #create .create-trend__label{
  margin: 0;
  font-size: 0.78rem;
  font-weight: 800;
  color: #111827;
}

[data-sp-embed] #create .create-trend__meta{
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
}

[data-sp-embed] #create .create-trend__meta span{
  font-size: 0.68rem;
  font-weight: 700;
  color: #9f1239;
  background: #fff1f2;
  border-radius: 999px;
  padding: 0.16rem 0.45rem;
}

[data-sp-embed] #create .create-trend__start, [data-sp-embed] #create .create-trend__end{
  display: grid;
  gap: 0.12rem;
  padding: 0.5rem 0.6rem;
  border-radius: 0.7rem;
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.06);
}

[data-sp-embed] #create .create-trend__start span, [data-sp-embed] #create .create-trend__q em{
  font-style: normal;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #64748b;
}

[data-sp-embed] #create .create-trend__start strong, [data-sp-embed] #create .create-trend__q > div > strong{
  font-size: 0.8rem;
  line-height: 1.4;
  color: #111827;
}

[data-sp-embed] #create .create-trend__q{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem;
  align-items: start;
}

[data-sp-embed] #create .create-trend__num{
  display: grid;
  place-items: center;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 0.4rem;
  background: #2563eb;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
}

[data-sp-embed] #create .create-trend__q > div{
  display: grid;
  gap: 0.28rem;
}

[data-sp-embed] #create .create-trend__opt{
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.38rem 0.5rem;
  border-radius: 0.55rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  font-size: 0.76rem;
  font-weight: 600;
  color: #334155;
}

[data-sp-embed] #create .create-trend__opt.is-top{
  border-color: rgba(244, 63, 94, 0.45);
  background: #fff1f2;
}

[data-sp-embed] #create .create-trend__opt b{
  margin-left: auto;
  color: #111827;
}

[data-sp-embed] #create .create-trend__opt em{
  font-style: normal;
  font-size: 0.64rem;
  font-weight: 800;
  color: #fff;
  background: #e11d48;
  border-radius: 999px;
  padding: 0.05rem 0.35rem;
}

[data-sp-embed] #create .create-trend__bar{
  height: 0.28rem;
  border-radius: 999px;
  background: #ffe4e6;
  overflow: hidden;
}

[data-sp-embed] #create .create-trend__bar i{
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #fb7185, #e11d48);
}

[data-sp-embed] #create .create-demo__panel.is-active .create-trend__view.is-active .create-trend__bar i{
  width: var(--w, 100%);
  transition: width 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.12s;
}

[data-sp-embed] #create .create-trend__end{
  color: #047857;
  font-size: 0.78rem;
  font-weight: 800;
  background: #ecfdf5;
  border-color: rgba(16, 185, 129, 0.25);
}

@keyframes create-opt-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 767px) {
  [data-sp-embed] #create .create-demo__editor{
    display: grid;
    border-right: 0;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    gap: 0.5rem;
    padding: 0.7rem 0.65rem 0.85rem;
  }

  [data-sp-embed] #create .create-demo__editor > .create-survey-type{
    order: 1;
  }

  /* Phone layout is stacked and Safari has no scroll anchoring, so switching
     survey types must not change the editor height. */
  [data-sp-embed] #create .create-demo__editor > .create-survey-collapse{
    display: none;
  }

  [data-sp-embed] #create .create-demo__editor .create-survey-q li[data-survey-only]:not(.is-shown){
    display: flex;
    visibility: hidden;
  }

  /* Portrait stack: shrink editor copy so title / Q1 / options fit */
  [data-sp-embed] #create .create-survey-type{
    gap: 0.3rem;
  }

  [data-sp-embed] #create .create-survey-type > span{
    font-size: 0.64rem;
  }

  [data-sp-embed] #create .create-survey-type > div{
    gap: 0.22rem;
    padding: 0.22rem;
    border-radius: 0.75rem;
  }

  [data-sp-embed] #create .create-survey-type button{
    font-size: 0.66rem;
    gap: 0.12rem;
    padding: 0.34rem 0.18rem 0.38rem;
    border-radius: 0.55rem;
  }

  [data-sp-embed] #create .create-survey-type button::before{
    font-size: 1.05em;
  }

  [data-sp-embed] #create .create-demo__field{
    gap: 0.18rem;
  }

  [data-sp-embed] #create .create-demo__field > span{
    font-size: 0.6rem !important;
    letter-spacing: 0.03em;
  }

  [data-sp-embed] #create .create-demo__field strong, [data-sp-embed] #create .create-demo__field p, [data-sp-embed] #create .create-demo__title-box{
    font-size: 0.74rem !important;
    line-height: 1.35 !important;
    padding: 0.38rem 0.48rem;
    border-radius: 0.55rem;
  }

  [data-sp-embed] #create .create-demo__title-box{
    min-height: calc(2.35em + 0.76rem + 2px);
    min-height: calc(2lh + 0.76rem + 2px);
  }

  [data-sp-embed] #create .create-survey-q{
    gap: 0.3rem;
    padding: 0.5rem 0.55rem 0.48rem;
    border-radius: 0.7rem;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
  }

  [data-sp-embed] #create .create-survey-q__top strong{
    font-size: 0.68rem;
  }

  [data-sp-embed] #create .create-survey-q__top span, [data-sp-embed] #create .create-survey-q__top em{
    font-size: 0.56rem;
    padding: 0.08rem 0.3rem;
  }

  [data-sp-embed] #create .create-survey-q__status::before{
    width: 0.3rem;
    height: 0.3rem;
  }

  [data-sp-embed] #create .create-survey-q > p{
    font-size: 0.72rem;
    padding: 0.3rem 0.42rem;
    border-radius: 0.48rem;
  }

  [data-sp-embed] #create .create-survey-q ol{
    gap: 0.25rem;
  }

  [data-sp-embed] #create .create-survey-q li{
    font-size: 0.66rem;
    gap: 0.3rem;
    padding: 0.28rem 0.4rem;
    border-radius: 0.48rem;
  }

  [data-sp-embed] #create .create-survey-q li b{
    width: 0.92rem;
    height: 0.92rem;
    font-size: 0.56rem;
  }

  [data-sp-embed] #create .create-survey-q__chip{
    font-size: 0.54rem;
    padding: 0.06rem 0.3rem;
  }

  [data-sp-embed] #create .create-survey-q__add{
    font-size: 0.62rem;
  }

  [data-sp-embed] #create .create-demo__stage{
    min-height: 0;
  }

  [data-sp-embed] #create .create-demo__panel--survey, [data-sp-embed] #create .create-demo__panel--survey.is-active{
    width: min(100%, 20rem);
  }
}

/* ===== Create: survey type switch (normal / estimation / quiz) ===== */

[data-sp-embed] #create .create-survey-collapse{
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  margin-top: -0.45rem;
  transition:
    grid-template-rows 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.3s ease,
    margin-top 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-sp-embed] #create .create-demo__editor > .create-survey-collapse{
  margin-top: -0.7rem;
}

[data-sp-embed] #create .create-survey-collapse.is-shown{
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 0;
}

[data-sp-embed] #create .create-survey-collapse__inner{
  min-height: 0;
  overflow: hidden;
}

[data-sp-embed] #create .create-demo__editor [data-survey-only]:not(.is-shown):not(.create-survey-collapse){
  display: none;
}

[data-sp-embed] #create .create-survey-q__tabs{
  display: flex;
  gap: 0.2rem;
  padding: 0.16rem;
  border-radius: 0.6rem;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(99, 102, 241, 0.14);
  width: max-content;
  max-width: 100%;
}

[data-sp-embed] #create .create-survey-q__tabs span{
  font-size: 0.68rem;
  font-weight: 700;
  color: #64748b;
  padding: 0.2rem 0.55rem;
  border-radius: 0.45rem;
}

[data-sp-embed] #create .create-survey-q__tabs span.is-active{
  color: #fff;
  background: #312e81;
}

[data-sp-embed] #create .create-survey-q__tabs span.is-shown{
  animation: create-survey-chip-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

[data-sp-embed] #create .create-survey-q > p.is-swapped, [data-sp-embed] #create .create-survey__ask.is-swapped{
  animation: create-survey-swap 0.4s ease both;
}

[data-sp-embed] #create .create-survey-q__chip{
  margin-left: auto;
  font-style: normal;
  font-size: 0.66rem;
  font-weight: 800;
  white-space: nowrap;
  border-radius: 999px;
  padding: 0.1rem 0.45rem;
}

[data-sp-embed] #create .create-survey-q__chip.is-shown{
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  animation: create-survey-chip-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: calc(var(--i, 0) * 0.08s + 0.1s);
}

[data-sp-embed] #create .create-survey-q__chip--price{
  color: #0e7490;
  background: #ecfeff;
  border: 1px solid rgba(8, 145, 178, 0.2);
}

[data-sp-embed] #create .create-survey-q__chip--check{
  color: #94a3b8;
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.08);
}

[data-sp-embed] #create .create-survey-q__chip--check::before{
  content: "";
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 0.18rem;
  border: 1.5px solid currentColor;
  box-sizing: border-box;
}

[data-sp-embed] #create .create-survey-q__chip--check.is-checked{
  color: #047857;
  background: #ecfdf5;
  border-color: rgba(16, 185, 129, 0.3);
}

[data-sp-embed] #create .create-survey-q__chip--check.is-checked::before{
  content: "✓";
  display: grid;
  place-items: center;
  font-size: 0.5rem;
  line-height: 1;
  color: #fff;
  background: #10b981;
  border-color: #10b981;
}

[data-sp-embed] #create .create-survey-set, [data-sp-embed] #create .create-survey-base dl{
  display: grid;
  gap: 0.3rem;
  margin: 0;
}

[data-sp-embed] #create .create-survey-set > div, [data-sp-embed] #create .create-survey-base dl > div{
  display: grid;
  grid-template-columns: 4.6rem minmax(0, 1fr);
  align-items: center;
  gap: 0.4rem;
}

[data-sp-embed] #create .create-survey-set dt, [data-sp-embed] #create .create-survey-base dt{
  font-size: 0.66rem;
  font-weight: 700;
  color: #64748b;
}

[data-sp-embed] #create .create-survey-set dd, [data-sp-embed] #create .create-survey-base dd{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  font-size: 0.74rem;
  font-weight: 700;
  color: #1e293b;
}

[data-sp-embed] #create .create-survey-set dd small{
  font-size: 0.62rem;
  font-weight: 600;
  color: #94a3b8;
}

[data-sp-embed] #create .create-survey-set__modes code{
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.62rem;
  font-weight: 600;
  color: #64748b;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 0.35rem;
  padding: 0.12rem 0.32rem;
}

[data-sp-embed] #create .create-survey-set__modes code.is-on{
  color: #fff;
  background: #0891b2;
  border-color: #0891b2;
}

[data-sp-embed] #create .create-survey-set__note{
  font-weight: 600 !important;
  color: #475569 !important;
  background: #fff;
  border: 1px dashed rgba(99, 102, 241, 0.3);
  border-radius: 0.45rem;
  padding: 0.25rem 0.45rem;
  line-height: 1.45;
}

[data-sp-embed] #create .create-survey-base{
  display: grid;
  gap: 0.4rem;
  padding: 0.65rem 0.8rem;
  border-radius: 0.9rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #f8fafc;
}

[data-sp-embed] #create .create-survey-base__title{
  margin: 0;
  font-size: 0.78rem;
  font-weight: 800;
  color: #111827;
}

[data-sp-embed] #create .create-survey-base dt{
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

[data-sp-embed] #create .create-survey-base dd{
  padding: 0.3rem 0.5rem;
  border-radius: 0.45rem;
  border: 1px solid rgba(99, 102, 241, 0.3);
  background: #fff;
}

/* Preview: mode badge */
[data-sp-embed] #create .create-survey-badge{
  --badge-color: #db2777;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--badge-color);
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--badge-color) 28%, transparent);
  border-radius: 999px;
  padding: 0.28rem 0.62rem;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
  transition: color 0.3s ease, border-color 0.3s ease;
}

[data-sp-embed] #create .create-survey-badge[data-mode="estimation"]{
  --badge-color: #0891b2;
}

[data-sp-embed] #create .create-survey-badge[data-mode="quiz"]{
  --badge-color: #7c3aed;
}

[data-sp-embed] #create .create-survey-badge__icon{
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--badge-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--badge-color) 18%, transparent);
}

[data-sp-embed] #create .create-survey-badge.is-loading .create-survey-badge__icon{
  width: 0.62rem;
  height: 0.62rem;
  background: transparent;
  box-shadow: none;
  border: 2px solid color-mix(in srgb, var(--badge-color) 25%, transparent);
  border-top-color: var(--badge-color);
  animation: create-survey-spin 0.7s linear infinite;
}

[data-sp-embed] #create .create-survey-badge.is-pop{
  animation: create-survey-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Preview: card + views */
[data-sp-embed] #create .create-survey.is-entering{
  animation: create-survey-enter 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

[data-sp-embed] #create .create-survey__hero img{
  max-height: none;
  height: auto;
  object-fit: contain;
  object-position: center;
}

[data-sp-embed] #create .create-survey__hero img.create-survey__hero-quiz{
  display: none;
}

[data-sp-embed] #create .create-demo[data-survey-mode="quiz"] .create-survey__hero img.create-survey__hero-default{
  display: none;
}

[data-sp-embed] #create .create-demo[data-survey-mode="quiz"] .create-survey__hero img.create-survey__hero-quiz{
  display: block;
}

[data-sp-embed] #create .create-trend__pair{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
  margin-top: 0.35rem;
}

[data-sp-embed] #create .create-trend__side--both{
  grid-column: 1 / -1;
  grid-template-columns: auto auto 1fr;
  align-items: center;
}

[data-sp-embed] #create .create-trend__side--both b{
  grid-column: -2;
  justify-self: end;
}

[data-sp-embed] #create .create-trend__side{
  appearance: none;
  display: grid;
  justify-items: start;
  gap: 0.12rem;
  width: 100%;
  padding: 0.55rem 0.5rem 0.5rem;
  border-radius: 0.7rem;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: #fff;
  color: #111827;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

[data-sp-embed] #create .create-trend__side small{
  font-size: 0.62rem;
  font-weight: 800;
  color: #64748b;
}

[data-sp-embed] #create .create-trend__side strong{
  font-size: 0.78rem;
  line-height: 1.3;
}

[data-sp-embed] #create .create-trend__side em{
  display: none;
  font-style: normal;
  font-size: 0.62rem;
  font-weight: 800;
  color: #fff;
  background: #e11d48;
  border-radius: 999px;
  padding: 0.05rem 0.38rem;
}

[data-sp-embed] #create .create-trend__side b{
  font-size: 0.72rem;
  color: #111827;
}

[data-sp-embed] #create .create-trend__side.is-correct{
  border-color: rgba(16, 185, 129, 0.45);
  background: #ecfdf5;
}

[data-sp-embed] #create .create-trend__side.is-correct em{
  display: inline-block;
}

[data-sp-embed] #create .create-trend__side.is-correct small, [data-sp-embed] #create .create-trend__side.is-correct strong{
  color: #047857;
}

[data-sp-embed] #create .create-survey__body > p.create-survey__ask{
  font-size: 0.88rem;
  font-weight: 700;
  color: #111827;
}

[data-sp-embed] #create .create-survey__view{
  display: none;
}

[data-sp-embed] #create .create-survey__view.is-active{
  display: grid;
}

[data-sp-embed] #create .create-survey__view > .create-survey__step{
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition:
    opacity 0.4s ease,
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0.4s;
}

[data-sp-embed] #create .create-survey__view > .create-survey__step.is-active{
  opacity: 1;
  visibility: visible;
  transform: none;
}

[data-sp-embed] #create .create-survey__body li{
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease;
}

[data-sp-embed] #create .create-survey__body li i{
  margin-left: auto;
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 800;
  color: #0e7490;
}

[data-sp-embed] #create .create-survey__body li.is-picked{
  color: #312e81;
  background: #eef2ff;
  border-color: #6366f1;
  transform: scale(1.02);
}

[data-sp-embed] #create .create-survey__body li.is-picked::after, [data-sp-embed] #create .create-survey__body li.is-correct::after, [data-sp-embed] #create .create-survey__body li.is-wrong::after{
  content: "✓";
  display: grid;
  place-items: center;
  width: 1rem;
  height: 1rem;
  margin-left: auto;
  border-radius: 999px;
  font-size: 0.6rem;
  color: #fff;
  background: #6366f1;
  animation: create-survey-chip-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

[data-sp-embed] #create .create-survey__body li:has(i)::after{
  margin-left: 0;
}

[data-sp-embed] #create .create-survey__body li.is-correct{
  color: #065f46;
  background: #ecfdf5;
  border-color: #10b981;
}

[data-sp-embed] #create .create-survey__body li.is-correct::after{
  background: #10b981;
}

[data-sp-embed] #create .create-survey__body li.is-wrong{
  color: #9f1239;
  background: #fff1f2;
  border-color: #f43f5e;
  animation: create-survey-shake 0.42s ease;
}

[data-sp-embed] #create .create-survey__body li.is-wrong::after{
  content: "×";
  background: #f43f5e;
}

[data-sp-embed] #create .create-survey__btn{
  transition: transform 0.2s ease, filter 0.2s ease;
}

[data-sp-embed] #create .create-survey__btn.is-pressed{
  animation: create-survey-press 0.45s ease;
}

/* Preview: estimation */
[data-sp-embed] #create .create-survey__estimate{
  position: relative;
  display: grid;
  gap: 0.1rem;
  padding: 0.55rem 0.7rem;
  border-radius: 0.75rem;
  color: #fff;
  background: linear-gradient(135deg, #0e7490 0%, #1e1b4b 100%);
  box-shadow: 0 10px 22px rgba(14, 116, 144, 0.22);
}

[data-sp-embed] #create .create-survey__estimate > span{
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  opacity: 0.8;
}

[data-sp-embed] #create .create-survey__estimate strong{
  font-size: 1.02rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

[data-sp-embed] #create .create-survey__estimate.is-bump strong{
  animation: create-survey-bump 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-sp-embed] #create .create-survey__estimate-delta{
  position: absolute;
  top: 0.45rem;
  right: 0.6rem;
  font-style: normal;
  font-size: 0.7rem;
  font-weight: 800;
  color: #a5f3fc;
  opacity: 0;
  pointer-events: none;
}

[data-sp-embed] #create .create-survey__estimate-delta.is-up{
  animation: create-survey-float-up 1.1s ease-out both;
}

/* Preview: quiz */
[data-sp-embed] #create .create-survey__quizhead{
  display: flex;
  justify-content: space-between;
  gap: 0.4rem;
}

[data-sp-embed] #create .create-survey__quizhead span{
  font-size: 0.64rem;
  font-weight: 800;
  color: #6d28d9;
  background: #f5f3ff;
  border-radius: 999px;
  padding: 0.14rem 0.5rem;
}

[data-sp-embed] #create .create-survey__feedback{
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.3s ease;
}

[data-sp-embed] #create .create-survey__feedback.is-shown{
  grid-template-rows: 1fr;
  opacity: 1;
}

[data-sp-embed] #create .create-survey__feedback > div{
  min-height: 0;
  overflow: hidden;
  border-radius: 0.6rem;
}

[data-sp-embed] #create .create-survey__feedback.is-shown > div{
  padding: 0.45rem 0.6rem;
}

[data-sp-embed] #create .create-survey__feedback.is-correct > div{
  background: #ecfdf5;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

[data-sp-embed] #create .create-survey__feedback.is-wrong > div{
  background: #fff1f2;
  border: 1px solid rgba(244, 63, 94, 0.3);
}

[data-sp-embed] #create .create-survey__feedback strong{
  display: inline-block;
  font-size: 0.86rem;
  font-weight: 800;
}

[data-sp-embed] #create .create-survey__feedback.is-correct strong{
  color: #047857;
}

[data-sp-embed] #create .create-survey__feedback.is-wrong strong{
  color: #e11d48;
}

[data-sp-embed] #create .create-survey__feedback.is-shown strong{
  animation: create-survey-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

[data-sp-embed] #create .create-survey__feedback p{
  margin: 0.15rem 0 0;
  font-size: 0.7rem;
  line-height: 1.5;
  color: #475569;
}

[data-sp-embed] #create .create-survey__score, [data-sp-embed] #create .create-survey__coupon{
  justify-items: center;
  align-content: center;
  text-align: center;
}

[data-sp-embed] #create .create-survey__ring{
  --p: 0;
  display: grid;
  place-items: center;
  align-content: center;
  width: 5.6rem;
  height: 5.6rem;
  margin: 0.2rem 0;
  border-radius: 999px;
  background:
    radial-gradient(closest-side, #fff 78%, transparent 79% 100%),
    conic-gradient(#7c3aed calc(var(--p) * 1%), #ede9fe 0);
}

[data-sp-embed] #create .create-survey__ring strong{
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1;
  color: #4c1d95;
  font-variant-numeric: tabular-nums;
}

[data-sp-embed] #create .create-survey__ring small{
  font-size: 0.62rem;
  font-weight: 700;
  color: #94a3b8;
}

[data-sp-embed] #create .create-survey__body > p.create-survey__result{
  font-size: 0.82rem;
  font-weight: 800;
  color: #047857;
}

[data-sp-embed] #create .create-survey__body > p.create-survey__result.is-fail{
  color: #b45309;
}

/* Preview: coupon issued */
[data-sp-embed] #create .create-survey__coupon-icon{
  font-size: 1.6rem;
  line-height: 1;
}

[data-sp-embed] #create .create-survey__step.is-active .create-survey__coupon-icon{
  animation: create-survey-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both;
}

[data-sp-embed] #create .create-survey__coupon-off{
  font-size: 2.4rem;
  font-weight: 900;
  line-height: 1;
  color: #db2777;
}

[data-sp-embed] #create .create-survey__coupon-off small{
  font-size: 0.9rem;
  margin-left: 0.1rem;
}

[data-sp-embed] #create .create-survey__coupon-code{
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #111827;
  border: 1.5px dashed rgba(219, 39, 119, 0.45);
  border-radius: 0.5rem;
  padding: 0.3rem 0.8rem;
  background: #fff1f2;
}

@keyframes create-survey-enter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes create-survey-chip-in {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes create-survey-swap {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes create-survey-pop {
  0% {
    transform: scale(0.85);
  }
  60% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes create-survey-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes create-survey-shake {
  0%,
  100% {
    transform: none;
  }
  20%,
  60% {
    transform: translateX(-4px);
  }
  40%,
  80% {
    transform: translateX(4px);
  }
}

@keyframes create-survey-press {
  40% {
    transform: scale(0.94);
    filter: brightness(1.12);
  }
}

@keyframes create-survey-bump {
  30% {
    transform: translateY(-2px) scale(1.05);
    color: #a5f3fc;
  }
}

@keyframes create-survey-float-up {
  0% {
    opacity: 0;
    transform: translateY(6px);
  }
  25% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-14px);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-sp-embed] #create .create-survey-type button, [data-sp-embed] #create .create-survey-type button:hover, [data-sp-embed] #create .create-survey-type button:active{
    transform: none;
  }

  [data-sp-embed] #create .create-demo:not(.is-type-picked) .create-survey-type > div{
    animation: none;
  }

  [data-sp-embed] #create .create-survey__body li.is-wrong{
    animation: none;
  }
}


[data-sp-embed] #create .create-demo__preview-head{
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  row-gap: 0.45rem;
}

[data-sp-embed] #create .ai-insight-card--survey-live .create-demo__preview-head{
  justify-content: center;
}

[data-sp-embed] #create .ai-insight-card--survey-live .create-demo__stage{
  align-items: start;
  /* Room for the card's drop shadow; phones clip the stage with overflow: hidden */
  padding-bottom: 1.75rem;
}

[data-sp-embed] #create .create-trend__opt > span{
  min-width: 0;
}

[data-sp-embed] #create .ai-insight-card--survey-live .create-demo__panel:not(.is-active){
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% 0;
}

[data-sp-embed] #create .create-demo__preview-label{
  font-size: 0.9rem;
  font-weight: 700;
  color: #94a3b8;
  white-space: nowrap;
}

[data-sp-embed] #create .create-demo__chrome-title{
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #475569;
  white-space: nowrap;
}

@media (max-width: 899px) {
  [data-sp-embed] #create .ai-insights-bento--pair > .ai-insight-card--survey-live{
    grid-template-areas:
      "title"
      "body"
      "media";
  }

  [data-sp-embed] #create .ai-insight-card--survey-live > .hero-split-copy{
    margin-bottom: 0.35rem;
  }
}

/* ===== Analysis: survey-only answer flow ===== */

@media (min-width: 900px) {
  [data-sp-embed] #analysis .ai-insight-card--analysis-live.ai-insight-card--hero-split-reverse{
    grid-template-columns: minmax(14rem, 0.82fr) minmax(20rem, 1.18fr);
    align-items: center;
  }
}

[data-sp-embed] #analysis .ai-insight-card--analysis-live > .analysis-form{
  align-self: center;
  width: 100%;
  min-width: 0;
}

[data-sp-embed] #analysis .analysis-form__window{
  border-radius: 1.15rem;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow:
    0 28px 60px rgba(15, 23, 42, 0.1),
    0 2px 0 rgba(255, 255, 255, 0.9) inset;
  overflow: hidden;
}

[data-sp-embed] #analysis .analysis-form__chrome{
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.72rem 1rem;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  background: linear-gradient(180deg, #fff 0%, #fafafa 100%);
}

[data-sp-embed] #analysis .analysis-form__lights{
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
}

[data-sp-embed] #analysis .analysis-form__lights i{
  width: 0.52rem;
  height: 0.52rem;
  border-radius: 999px;
  background: #f87171;
}

[data-sp-embed] #analysis .analysis-form__lights i:nth-child(2){ background: #fbbf24; }
[data-sp-embed] #analysis .analysis-form__lights i:nth-child(3){ background: #4ade80; }

[data-sp-embed] #analysis .analysis-form__chrome-title{
  font-size: 0.82rem;
  font-weight: 700;
  color: #475569;
}

[data-sp-embed] #analysis .analysis-form__body{
  display: grid;
  gap: 0.7rem;
  padding: 0.85rem 0.95rem 1rem;
  background:
    radial-gradient(ellipse 80% 45% at 50% 0%, rgba(99, 102, 241, 0.08), transparent 70%),
    #fff;
}

[data-sp-embed] #analysis .analysis-form__summary{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0.28rem 0.1rem;
  border-radius: 0.55rem;
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.06);
}

[data-sp-embed] #analysis .analysis-form__summary > div{
  display: grid;
  justify-items: center;
  gap: 0.06rem;
  margin: 0;
  padding: 0.28rem 0.35rem;
  border-radius: 0;
  background: transparent;
  border: 0;
  border-right: 1px solid rgba(15, 23, 42, 0.08);
}

[data-sp-embed] #analysis .analysis-form__summary > div:last-child{
  border-right: 0;
}

[data-sp-embed] #analysis .analysis-form__summary dt{
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #94a3b8;
  text-align: center;
  white-space: nowrap;
}

[data-sp-embed] #analysis .analysis-form__summary dd{
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.1rem;
  margin: 0;
}

[data-sp-embed] #analysis .analysis-form__summary strong{
  font-size: 0.82rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0f172a;
}

[data-sp-embed] #analysis .analysis-form__summary small{
  font-size: 0.5rem;
  font-weight: 700;
  color: #94a3b8;
}

[data-sp-embed] #analysis .analysis-form__summary .is-good small{ color: #16a34a; }
[data-sp-embed] #analysis .analysis-form__summary .is-warn small{ color: #9a3412; }

[data-sp-embed] #analysis .analysis-form__summary .is-good{
  background: transparent;
  border-color: transparent;
}

[data-sp-embed] #analysis .analysis-form__summary .is-good strong{
  color: #16a34a;
}

[data-sp-embed] #analysis .analysis-form__summary .is-warn strong{
  font-size: 0.72rem;
  color: #c2410c;
}

[data-sp-embed] #analysis .analysis-form__tabs{
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
}

[data-sp-embed] #analysis .analysis-form__tabs button{
  appearance: none;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #f8fafc;
  color: #64748b;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
  padding: 0.34rem 0.62rem;
  border-radius: 999px;
  cursor: pointer;
}

[data-sp-embed] #analysis .analysis-form__tabs button.is-active{
  color: #fff;
  background: #4f46e5;
  border-color: #4f46e5;
}

[data-sp-embed] #analysis .analysis-form__tabs button:focus-visible{
  outline: 2px solid #6366f1;
  outline-offset: 2px;
}

[data-sp-embed] #analysis .analysis-form__stage{ min-height: 15.5rem; }

[data-sp-embed] #analysis .analysis-form__pane{ display: none; }

[data-sp-embed] #analysis .analysis-form__pane.is-active{
  display: grid;
  gap: 0.38rem;
  align-content: start;
  animation: analysis-pane-in 0.35s ease both;
}

@keyframes analysis-pane-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

[data-sp-embed] #analysis .analysis-form__q{
  display: grid;
  gap: 0.08rem;
  margin: 0.15rem 0 0;
}

[data-sp-embed] #analysis .analysis-form__q em, [data-sp-embed] #analysis .analysis-route header b, [data-sp-embed] #analysis .analysis-form__legend, [data-sp-embed] #analysis .analysis-insight > p:first-child{
  font-style: normal;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #6366f1;
}

[data-sp-embed] #analysis .analysis-form__q strong, [data-sp-embed] #analysis .analysis-route header strong, [data-sp-embed] #analysis .analysis-insight strong{
  font-size: 0.86rem;
  line-height: 1.35;
  color: #111827;
}

[data-sp-embed] #analysis .analysis-form__opt{
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.38rem 0.5rem;
  border-radius: 0.55rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  font-size: 0.76rem;
  font-weight: 700;
  color: #334155;
}

[data-sp-embed] #analysis .analysis-form__opt.is-top{
  border-color: rgba(239, 68, 68, 0.45);
  background: #fff1f2;
}

[data-sp-embed] #analysis .analysis-form__opt b{ margin-left: auto; color: #111827; }

[data-sp-embed] #analysis .analysis-form__opt em{
  font-style: normal;
  font-size: 0.62rem;
  font-weight: 800;
  color: #fff;
  background: #ef4444;
  border-radius: 999px;
  padding: 0.04rem 0.36rem;
}

[data-sp-embed] #analysis .analysis-form__bar{
  display: block;
  height: 0.28rem;
  border-radius: 999px;
  background: #ffe4e6;
  overflow: hidden;
}

[data-sp-embed] #analysis .analysis-form__bar.is-second{ background: #ffedd5; }

[data-sp-embed] #analysis .analysis-form__bar i{
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #fb7185, #e11d48);
}

[data-sp-embed] #analysis .analysis-form__bar.is-second i{
  background: linear-gradient(90deg, #fdba74, #f97316);
}

[data-sp-embed] #analysis .analysis-form__pane.is-active .analysis-form__bar i, [data-sp-embed] #analysis .analysis-form__pane.is-active .analysis-pick__meter i{
  animation: analysis-bar 0.85s cubic-bezier(0.16, 1, 0.3, 1) both;
}

[data-sp-embed] #analysis .analysis-pick{
  display: grid;
  gap: 0.4rem;
  margin: 0;
  padding: 0.55rem 0.6rem 0.65rem;
  border-radius: 0.8rem;
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.06);
}

[data-sp-embed] #analysis .analysis-pick header{
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

[data-sp-embed] #analysis .analysis-pick header b{
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 0.35rem;
  background: #4f46e5;
  color: #fff;
  font-size: 0.7rem;
}

[data-sp-embed] #analysis .analysis-pick header strong{
  font-size: 0.86rem;
  color: #111827;
}

[data-sp-embed] #analysis .analysis-pick__row{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.12rem 0.45rem;
  align-items: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: #64748b;
}

[data-sp-embed] #analysis .analysis-pick__row b{
  font-variant-numeric: tabular-nums;
  color: #94a3b8;
}

[data-sp-embed] #analysis .analysis-pick__row.is-win{
  color: #9f1239;
  font-weight: 800;
}

[data-sp-embed] #analysis .analysis-pick__row.is-win b{
  font-size: 1.05rem;
  color: #e11d48;
}

[data-sp-embed] #analysis .analysis-pick__meter{
  grid-column: 1 / -1;
  height: 0.32rem;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}

[data-sp-embed] #analysis .analysis-pick__row.is-win .analysis-pick__meter{
  height: 0.72rem;
  background: #ffe4e6;
}

[data-sp-embed] #analysis .analysis-pick__meter i{
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: #cbd5e1;
}

[data-sp-embed] #analysis .analysis-pick__row.is-win .analysis-pick__meter i{
  background: linear-gradient(90deg, #fb7185, #e11d48);
}

[data-sp-embed] #analysis .analysis-pick__gap{
  grid-column: 1 / -1;
  justify-self: start;
  margin: 0.05rem 0 0;
  padding: 0.16rem 0.55rem;
  border-radius: 999px;
  background: #e11d48;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.3;
}

[data-sp-embed] #analysis .analysis-pick__next{
  margin: 0;
  text-align: center;
  font-size: 0.68rem;
  font-weight: 800;
  color: #6366f1;
}

[data-sp-embed] #analysis .analysis-pick__next::before{
  content: "↓  ";
}

[data-sp-embed] #analysis .analysis-pick__done{
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0.45rem 0.6rem;
  border-radius: 0.7rem;
  background: #ecfdf5;
  border: 1px solid rgba(16, 185, 129, 0.28);
}

[data-sp-embed] #analysis .analysis-pick__done span{
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: #059669;
  color: #fff;
  font-size: 0.66rem;
  font-weight: 800;
}

[data-sp-embed] #analysis .analysis-pick__done strong{
  margin-left: auto;
  color: #047857;
  font-size: 0.9rem;
}

[data-sp-embed] #analysis .analysis-stuck{
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 0.45rem;
}

[data-sp-embed] #analysis .analysis-stuck > div{
  display: grid;
  gap: 0.15rem;
  align-content: start;
  margin: 0;
  padding: 0.6rem 0.65rem 0.7rem;
  border-radius: 0.8rem;
}

[data-sp-embed] #analysis .analysis-stuck span, [data-sp-embed] #analysis .analysis-stuck em{
  font-style: normal;
  font-size: 0.66rem;
  font-weight: 800;
}

[data-sp-embed] #analysis .analysis-stuck p{
  display: flex;
  align-items: baseline;
  gap: 0.12rem;
  margin: 0.1rem 0 0;
}

[data-sp-embed] #analysis .analysis-stuck strong{
  font-size: 1.65rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

[data-sp-embed] #analysis .analysis-stuck small{
  font-size: 0.68rem;
  font-weight: 800;
}

[data-sp-embed] #analysis .analysis-stuck .is-ok{
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #047857;
}

[data-sp-embed] #analysis .analysis-stuck .is-slow{
  background: #fff7ed;
  border: 1px solid #fdba74;
  color: #c2410c;
}

[data-sp-embed] #analysis .analysis-stuck .is-slow strong{
  font-size: 1.2rem;
}

[data-sp-embed] #analysis .analysis-stuck__path{
  list-style: none;
  margin: 0.15rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.42rem;
}

[data-sp-embed] #analysis .analysis-stuck__path li{
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.74rem;
  font-weight: 800;
  color: #047857;
}

[data-sp-embed] #analysis .analysis-stuck__path .analysis-form__bar{
  height: 0.42rem;
  background: #d1fae5;
}

[data-sp-embed] #analysis .analysis-stuck__path .analysis-form__bar i{
  background: linear-gradient(90deg, #34d399, #059669);
}

[data-sp-embed] #analysis .analysis-stuck__path .analysis-form__bar.is-second i{
  background: linear-gradient(90deg, #fdba74, #f97316);
}

@keyframes analysis-bar {
  from { width: 0; }
  to { width: var(--w, 100%); }
}

[data-sp-embed] #analysis .analysis-form__legend{
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  color: #64748b;
}

[data-sp-embed] #analysis .analysis-form__legend i{
  width: 1.1rem;
  height: 0.28rem;
  border-radius: 999px;
  background: #e11d48;
}

[data-sp-embed] #analysis .analysis-form__legend i.is-2{
  width: 0.7rem;
  height: 0.16rem;
  background: #f97316;
}

[data-sp-embed] #analysis .analysis-form__legend span{
  margin-left: auto;
  font-weight: 700;
}

[data-sp-embed] #analysis .analysis-route{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}

[data-sp-embed] #analysis .analysis-route > li{
  display: grid;
  gap: 0.32rem;
  padding: 0.5rem 0.55rem 0.55rem;
  border-radius: 0.75rem;
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.06);
}

[data-sp-embed] #analysis .analysis-route header{
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

[data-sp-embed] #analysis .analysis-route header b, [data-sp-embed] #analysis .analysis-route .is-end span{
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 0.35rem;
  background: #4f46e5;
  color: #fff;
  font-size: 0.7rem;
}

[data-sp-embed] #analysis .analysis-route__choice{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.08rem 0.4rem;
  align-items: center;
  font-size: 0.74rem;
  font-weight: 700;
  color: #334155;
}

[data-sp-embed] #analysis .analysis-route__choice b{ color: #111827; }

[data-sp-embed] #analysis .analysis-route__choice em{
  grid-column: 1 / -1;
  justify-self: start;
  font-style: normal;
  font-size: 0.6rem;
  font-weight: 800;
  color: #9f1239;
  background: #fff;
  border-radius: 999px;
  padding: 0.05rem 0.35rem;
}

[data-sp-embed] #analysis .analysis-route__choice .analysis-form__bar{ grid-column: 1 / -1; }

[data-sp-embed] #analysis .analysis-route__choice.is-1 .analysis-form__bar{ height: 0.42rem; }
[data-sp-embed] #analysis .analysis-route__choice.is-2 .analysis-form__bar{ height: 0.18rem; }

[data-sp-embed] #analysis .analysis-route .is-end{
  display: flex;
  align-items: center;
  gap: 0.45rem;
  background: #ecfdf5;
  border-color: rgba(16, 185, 129, 0.28);
}

[data-sp-embed] #analysis .analysis-route .is-end span{ background: #059669; width: auto; height: auto; padding: 0.12rem 0.4rem; }
[data-sp-embed] #analysis .analysis-route .is-end strong{ color: #047857; font-size: 0.8rem; }
[data-sp-embed] #analysis .analysis-route .is-end b{ margin-left: auto; color: #047857; }

[data-sp-embed] #analysis .analysis-insight{
  display: grid;
  gap: 0.2rem;
  margin: 0;
  padding: 0.7rem 0.75rem;
  border-radius: 0.8rem;
}

[data-sp-embed] #analysis .analysis-insight.is-bad{
  background: #fff1f2;
  border: 1px solid #fecdd3;
}

[data-sp-embed] #analysis .analysis-insight.is-good{
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
}

[data-sp-embed] #analysis .analysis-insight.is-bad > p:first-child{ color: #be123c; }
[data-sp-embed] #analysis .analysis-insight.is-good > p:first-child{ color: #047857; }

[data-sp-embed] #analysis .analysis-insight p{
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: #334155;
}

[data-sp-embed] #analysis .analysis-insight b{ font-size: 1.05rem; }
[data-sp-embed] #analysis .analysis-insight.is-bad b{ color: #be123c; }
[data-sp-embed] #analysis .analysis-insight.is-good b{ color: #047857; }

[data-sp-embed] #analysis .analysis-insight small{
  font-size: 0.66rem;
  font-weight: 700;
  color: #64748b;
}

[data-sp-embed] #analysis .analysis-form__hint{
  margin: 0;
  padding: 0.55rem 0.65rem;
  border-radius: 0.65rem;
  background: #fff7ed;
  border: 1px dashed #fdba74;
  color: #9a3412;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.5;
}

[data-sp-embed] #analysis .analysis-form__funnel{
  list-style: none;
  margin: 0.15rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}

[data-sp-embed] #analysis .analysis-form__funnel li{
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.74rem;
  font-weight: 800;
  color: #047857;
}

[data-sp-embed] #analysis .analysis-form__funnel .analysis-form__bar{
  height: 0.42rem;
  background: #d1fae5;
}

[data-sp-embed] #analysis .analysis-form__funnel .analysis-form__bar i{
  background: linear-gradient(90deg, #34d399, #059669);
}

[data-sp-embed] #analysis .analysis-journey{
  display: grid;
  gap: 0.55rem;
}

[data-sp-embed] #analysis .analysis-journey__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem 0.8rem;
  flex-wrap: wrap;
}

[data-sp-embed] #analysis .analysis-journey__head > p{
  margin: 0;
  font-size: 0.72rem;
  font-weight: 800;
  color: #0f172a;
}

[data-sp-embed] #analysis .analysis-journey__legend{
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem 0.62rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.6rem;
  font-weight: 700;
  color: #64748b;
}

[data-sp-embed] #analysis .analysis-journey__opt.is-1 > b, [data-sp-embed] #analysis .analysis-journey__rank.is-1{ background: #ef4444; }

[data-sp-embed] #analysis .analysis-journey__flow{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.15rem;
}

[data-sp-embed] #analysis .analysis-journey__step{
  display: grid;
  grid-template-columns: 1.7rem minmax(0, 1fr);
  gap: 0.5rem;
  align-items: start;
  position: relative;
}

[data-sp-embed] #analysis .analysis-journey__step:not(:last-child)::before{
  content: "";
  position: absolute;
  left: 0.78rem;
  top: 1.65rem;
  bottom: -0.2rem;
  width: 2px;
  background: #e2e8f0;
}

[data-sp-embed] #analysis .analysis-journey__node{
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 0.42rem;
  background: #2563eb;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.28);
}

[data-sp-embed] #analysis .analysis-journey__node--flag{
  border-radius: 999px;
  background: #0f172a;
  box-shadow: 0 6px 14px rgba(29, 78, 216, 0.28);
}

[data-sp-embed] #analysis .analysis-journey__card{
  min-width: 0;
  margin: 0 0 0.35rem;
  padding: 0.55rem 0.65rem 0.62rem;
  border-radius: 0.9rem;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
}

[data-sp-embed] #analysis .analysis-journey__card--start{
  background: #fff;
}

[data-sp-embed] #analysis .analysis-journey__kicker{
  margin: 0;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #94a3b8;
}

[data-sp-embed] #analysis .analysis-journey__card > strong{
  display: block;
  margin: 0.16rem 0 0.28rem;
  font-size: 0.8rem;
  line-height: 1.4;
  color: #0f172a;
}

[data-sp-embed] #analysis .analysis-journey__lead{
  margin: 0;
  font-size: 0.66rem;
  line-height: 1.5;
  color: #64748b;
}

[data-sp-embed] #analysis .analysis-journey__opt{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.28rem 0.35rem;
  margin-top: 0.38rem;
  padding: 0.32rem 0.4rem 0.32rem 0.32rem;
  border-radius: 999px;
  border: 1px solid #fecaca;
  background: #fff;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 800;
  color: #0f172a;
  width: 100%;
  text-align: left;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition:
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.28s ease,
    border-color 0.28s ease,
    background 0.28s ease,
    opacity 0.28s ease;
}

[data-sp-embed] #analysis .analysis-journey__opt > span:not(.analysis-journey__next){
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-sp-embed] #analysis .analysis-journey__opt.is-2{ border-color: #fed7aa; }

[data-sp-embed] #analysis .analysis-journey__opt > b{
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 999px;
  background: #f97316;
  color: #fff;
  font-size: 0.62rem;
}

[data-sp-embed] #analysis .analysis-journey__opt em{
  flex: 0 0 auto;
  font-style: normal;
  padding: 0.04rem 0.38rem;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 0.62rem;
  white-space: nowrap;
}

[data-sp-embed] #analysis .analysis-journey__next{
  flex: 0 0 auto;
  margin-left: auto;
  white-space: nowrap;
  padding: 0.08rem 0.42rem;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #64748b;
  font-size: 0.58rem;
  font-weight: 700;
}

[data-sp-embed] #analysis .analysis-journey__rank{
  flex: 0 0 auto;
  font-style: normal;
  padding: 0.08rem 0.36rem;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 0.58rem;
  line-height: 1.2;
  white-space: nowrap;
}

[data-sp-embed] #analysis .analysis-journey__opt.is-2 .analysis-journey__rank{ background: #f97316; }

[data-sp-embed] #analysis .analysis-journey__fork{
  margin: 0.15rem 0 0;
}

[data-sp-embed] #analysis .analysis-journey__fork svg{
  display: block;
  width: 100%;
  height: 3.1rem;
}

[data-sp-embed] #analysis .analysis-journey__fork path{
  fill: none;
  stroke-width: 3.2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

[data-sp-embed] #analysis .analysis-journey__fork path.is-1{ stroke: #ef4444; }
[data-sp-embed] #analysis .analysis-journey__fork path.is-2{ stroke: #f97316; }

[data-sp-embed] #analysis .analysis-journey__fork .analysis-journey__tip{
  fill: #ef4444;
  stroke: none;
}

[data-sp-embed] #analysis .analysis-form__pane.is-active .analysis-journey__fork path.is-1, [data-sp-embed] #analysis .analysis-form__pane.is-active .analysis-journey__fork path.is-2{
  stroke-dasharray: 160;
  animation: analysis-draw 0.9s ease both;
}

@keyframes analysis-draw {
  from { stroke-dashoffset: 160; }
  to { stroke-dashoffset: 0; }
}

[data-sp-embed] #analysis .analysis-journey__opt:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

[data-sp-embed] #analysis .analysis-journey__opt:focus-visible{
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

[data-sp-embed] #analysis .analysis-journey__opt.is-picked{
  border-color: #2563eb;
  background: #eff6ff;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16);
  transform: translateY(-1px);
}

[data-sp-embed] #analysis .analysis-journey__opt.is-dimmed{
  opacity: 0.42;
}

[data-sp-embed] #analysis .analysis-journey__opt.is-picked .analysis-journey__next, [data-sp-embed] #analysis .analysis-journey__opt:hover .analysis-journey__next{
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}

[data-sp-embed] #analysis .analysis-journey__next{
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

[data-sp-embed] #analysis .analysis-form__pane.is-active .analysis-journey:not(.is-interacted) .analysis-journey__opt[data-journey-to] .analysis-journey__next{
  animation: analysis-journey-hint 1.8s ease-in-out infinite;
}

[data-sp-embed] #analysis .analysis-journey__step.is-from::before{
  background: linear-gradient(180deg, #2563eb 0%, #93c5fd 100%);
}

[data-sp-embed] #analysis .analysis-journey__step.is-pulse::after{
  content: "";
  position: absolute;
  left: 0.66rem;
  top: 1.65rem;
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 999px;
  background: #2563eb;
  box-shadow: 0 0 0 5px rgba(37, 99, 235, 0.18);
  z-index: 2;
  animation: analysis-journey-dot 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

[data-sp-embed] #analysis .analysis-journey__step.is-arrived .analysis-journey__card{
  border-color: #93c5fd;
  background: #eff6ff;
  animation: analysis-journey-arrive 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

[data-sp-embed] #analysis .analysis-journey__step.is-arrived .analysis-journey__node{
  animation: analysis-journey-node-pop 0.45s cubic-bezier(0.34, 1.45, 0.64, 1) both;
}

[data-sp-embed] #analysis .analysis-journey__step.is-arrived .analysis-journey__opt{
  animation: analysis-journey-opt-in 0.4s ease both;
}

[data-sp-embed] #analysis .analysis-journey__step.is-arrived .analysis-journey__opt:nth-child(2){
  animation-delay: 0.06s;
}

[data-sp-embed] #analysis .analysis-journey__step.is-arrived .analysis-journey__opt:nth-child(3){
  animation-delay: 0.12s;
}

@keyframes analysis-journey-hint {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(3px); }
}

@keyframes analysis-journey-dot {
  from { transform: translateY(0); opacity: 0; }
  18% { opacity: 1; }
  to { transform: translateY(3.4rem); opacity: 0.15; }
}

@keyframes analysis-journey-arrive {
  from { transform: translateY(10px); opacity: 0.45; }
  to { transform: none; opacity: 1; }
}

@keyframes analysis-journey-node-pop {
  from { transform: scale(0.72); }
  to { transform: scale(1); }
}

@keyframes analysis-journey-opt-in {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  [data-sp-embed] #analysis .analysis-form__pane.is-active .analysis-journey:not(.is-interacted) .analysis-journey__opt[data-journey-to] .analysis-journey__next, [data-sp-embed] #analysis .analysis-journey__step.is-pulse::after, [data-sp-embed] #analysis .analysis-journey__step.is-arrived .analysis-journey__card, [data-sp-embed] #analysis .analysis-journey__step.is-arrived .analysis-journey__node, [data-sp-embed] #analysis .analysis-journey__step.is-arrived .analysis-journey__opt{
    animation: none !important;
  }
}

[data-sp-embed] #analysis .analysis-advice__counts{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
}

[data-sp-embed] #analysis .analysis-advice__counts p{
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  margin: 0;
  padding: 0.45rem 0.6rem;
  border-radius: 0.7rem;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
}

[data-sp-embed] #analysis .analysis-advice__counts strong{
  font-size: 1.15rem;
  line-height: 1;
  color: #4338ca;
  font-variant-numeric: tabular-nums;
}

[data-sp-embed] #analysis .analysis-advice__counts span{
  font-size: 0.68rem;
  font-weight: 800;
  color: #4338ca;
}

[data-sp-embed] #analysis .analysis-advice__counts .is-empty{
  background: #f8fafc;
  border-color: #e2e8f0;
}

[data-sp-embed] #analysis .analysis-advice__counts .is-empty strong, [data-sp-embed] #analysis .analysis-advice__counts .is-empty span{ color: #64748b; }

[data-sp-embed] #analysis .analysis-advice-grid{
  display: grid;
  gap: 0.4rem;
}

[data-sp-embed] #analysis .analysis-advice{
  display: grid;
  gap: 0.3rem;
  margin: 0;
  padding: 0.4rem 0.45rem 0.45rem;
  border-radius: 0.8rem;
  border: 1px solid #fecaca;
  background: #fff1f2;
  min-width: 0;
}

[data-sp-embed] #analysis .analysis-advice.is-mid{
  border-color: #fde68a;
  background: #fffbeb;
}

[data-sp-embed] #analysis .analysis-advice header{
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

[data-sp-embed] #analysis .analysis-advice header b{
  font-size: 0.72rem;
  color: #be123c;
}

[data-sp-embed] #analysis .analysis-advice.is-mid header b{ color: #b45309; }

[data-sp-embed] #analysis .analysis-advice header em{
  font-style: normal;
  font-size: 0.62rem;
  font-weight: 800;
  color: #9f1239;
}

[data-sp-embed] #analysis .analysis-advice.is-mid header em{ color: #b45309; }

[data-sp-embed] #analysis .analysis-advice article{
  display: grid;
  gap: 0.28rem;
  margin: 0;
  padding: 0.45rem 0.5rem;
  border-radius: 0.65rem;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.06);
}

[data-sp-embed] #analysis .analysis-advice h4{
  display: flex;
  align-items: flex-start;
  gap: 0.28rem;
  margin: 0;
  font-size: 0.74rem;
  line-height: 1.35;
  color: #0f172a;
}

[data-sp-embed] #analysis .analysis-advice p{
  margin: 0;
  font-size: 0.7rem;
  line-height: 1.4;
  color: #334155;
}

[data-sp-embed] #analysis .analysis-advice__level{
  justify-self: start;
  margin: 0;
  padding: 0.12rem 0.42rem;
  border-radius: 999px;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.3;
  color: #be123c;
  background: #ffe4e6;
}

[data-sp-embed] #analysis .analysis-advice.is-mid .analysis-advice__level{
  color: #b45309;
  background: #fef3c7;
}

[data-sp-embed] #analysis .analysis-advice__do{
  padding-top: 0.22rem;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}

[data-sp-embed] #analysis .analysis-advice__do b, [data-sp-embed] #analysis .analysis-advice__alert b{
  display: inline;
  margin: 0 0.28rem 0 0;
  font-size: 0.6rem;
  font-weight: 800;
  color: #64748b;
  letter-spacing: 0.02em;
}

[data-sp-embed] #analysis .analysis-advice__alert{
  margin-top: 0.15rem;
  padding: 0.4rem 0.48rem;
  border-radius: 0.55rem;
  background: #fff7ed;
  border: 1px solid #fdba74;
}

[data-sp-embed] #analysis .analysis-advice__alert span{ margin-right: 0.15rem; }

[data-sp-embed] #analysis .analysis-predict{
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 0.5rem 0.55rem 0.55rem;
  border-radius: 0.8rem;
  border: 1px solid #bfdbfe;
  background: #eff6ff;
}

[data-sp-embed] #analysis .analysis-predict header{
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

[data-sp-embed] #analysis .analysis-predict header b{
  font-size: 0.72rem;
  color: #1d4ed8;
}

[data-sp-embed] #analysis .analysis-predict header em{
  font-style: normal;
  font-size: 0.62rem;
  font-weight: 800;
  color: #1d4ed8;
}

[data-sp-embed] #analysis .analysis-predict__qid{
  margin: 0;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #64748b;
  word-break: break-all;
}

[data-sp-embed] #analysis .analysis-predict article{
  display: grid;
  gap: 0.16rem;
  margin: 0;
  padding: 0.5rem 0.55rem;
  border-radius: 0.65rem;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.06);
}

[data-sp-embed] #analysis .analysis-predict h4{
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0;
  font-size: 0.8rem;
  color: #0f172a;
}

[data-sp-embed] #analysis .analysis-predict p{
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.45;
  color: #334155;
}

[data-sp-embed] #analysis .analysis-predict__conf b{
  color: #1d4ed8;
}

[data-sp-embed] #analysis .analysis-predict__conf span{
  margin-left: 0.2rem;
  font-weight: 800;
  color: #1d4ed8;
}

[data-sp-embed] #analysis .analysis-predict__channels{
  display: grid;
  gap: 0.32rem;
  margin: 0.2rem 0 0;
  padding: 0;
  list-style: none;
}

[data-sp-embed] #analysis .analysis-predict__channels li{
  display: grid;
  grid-template-columns: 4.8rem 1fr 2.2rem;
  align-items: center;
  gap: 0.4rem;
  padding: 0.28rem 0.35rem;
  border-radius: 0.5rem;
  font-size: 0.7rem;
  color: #334155;
  background: #f8fafc;
}

[data-sp-embed] #analysis .analysis-predict__channels span{
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  font-weight: 800;
}

[data-sp-embed] #analysis .analysis-predict__channels span::before{
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 999px;
  background: currentColor;
  flex: none;
}

[data-sp-embed] #analysis .analysis-predict__channels i{
  position: relative;
  height: 0.42rem;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}

[data-sp-embed] #analysis .analysis-predict__channels i::after{
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w);
  border-radius: inherit;
  background: #64748b;
}

[data-sp-embed] #analysis .analysis-predict__channels b{
  text-align: right;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #334155;
}

[data-sp-embed] #analysis .analysis-predict__channels li[data-channel="line"]{
  background: #f0fdf4;
  color: #166534;
}

[data-sp-embed] #analysis .analysis-predict__channels li[data-channel="line"] span{ color: #06c755; }
[data-sp-embed] #analysis .analysis-predict__channels li[data-channel="line"] i{ background: #bbf7d0; }
[data-sp-embed] #analysis .analysis-predict__channels li[data-channel="line"] i::after{ background: #06c755; }
[data-sp-embed] #analysis .analysis-predict__channels li[data-channel="line"] b{ color: #15803d; }

[data-sp-embed] #analysis .analysis-predict__channels li[data-channel="instagram"]{
  background: #fdf2f8;
  color: #9d174d;
}

[data-sp-embed] #analysis .analysis-predict__channels li[data-channel="instagram"] span{ color: #db2777; }
[data-sp-embed] #analysis .analysis-predict__channels li[data-channel="instagram"] i{ background: #fbcfe8; }
[data-sp-embed] #analysis .analysis-predict__channels li[data-channel="instagram"] i::after{
  background: linear-gradient(90deg, #f59e0b 0%, #ec4899 45%, #8b5cf6 100%);
}
[data-sp-embed] #analysis .analysis-predict__channels li[data-channel="instagram"] b{ color: #be185d; }

[data-sp-embed] #analysis .analysis-predict__channels li[data-channel="other"]{
  background: #f1f5f9;
  color: #475569;
}

[data-sp-embed] #analysis .analysis-predict__channels li[data-channel="other"] span{ color: #64748b; }
[data-sp-embed] #analysis .analysis-predict__channels li[data-channel="other"] i{ background: #e2e8f0; }
[data-sp-embed] #analysis .analysis-predict__channels li[data-channel="other"] i::after{ background: #94a3b8; }
[data-sp-embed] #analysis .analysis-predict__channels li[data-channel="other"] b{ color: #475569; }

[data-sp-embed] #analysis .analysis-predict__meta{
  justify-self: start;
  padding: 0.08rem 0.42rem;
  border-radius: 999px;
  background: #f0fdf4;
  color: #15803d;
  font-size: 0.64rem;
  font-weight: 800;
}

@media (max-width: 899px) {
  [data-sp-embed] #analysis .ai-insights-bento--pair > .ai-insight-card--analysis-live, [data-sp-embed] #analysis .ai-insights-bento--pair > #analysis-content-sns{
    grid-template-areas:
      "title"
      "body"
      "media";
  }

  [data-sp-embed] #analysis .analysis-journey__opt{
    flex-wrap: wrap;
    border-radius: 0.7rem;
    padding: 0.4rem 0.5rem 0.4rem 0.4rem;
  }

  [data-sp-embed] #analysis .analysis-journey__next{
    flex: 1 1 100%;
    max-width: none;
    margin-left: 1.5rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-sp-embed] #analysis .analysis-form__pane.is-active, [data-sp-embed] #analysis .analysis-form__pane.is-active .analysis-form__bar i, [data-sp-embed] #analysis .analysis-form__pane.is-active .analysis-pick__meter i, [data-sp-embed] #analysis .analysis-form__pane.is-active .analysis-journey__fork path.is-1, [data-sp-embed] #analysis .analysis-form__pane.is-active .analysis-journey__fork path.is-2{
    animation: none;
  }

  [data-sp-embed] #analysis .analysis-form__bar i, [data-sp-embed] #analysis .analysis-pick__meter i{
    width: var(--w, 100%);
  }
}

/* ===== Post insights platform demo ===== */
[data-sp-embed] #analysis .ai-insight-card--analysis-live > .post-insights{
  align-self: center;
  width: 100%;
  min-width: 0;
}

[data-sp-embed] #analysis .post-insights__window{
  border-radius: 1.15rem;
  background: #f4f5f7;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow:
    0 28px 60px rgba(15, 23, 42, 0.1),
    0 2px 0 rgba(255, 255, 255, 0.9) inset;
  overflow: hidden;
}

[data-sp-embed] #analysis .post-insights.is-insights .post-insights__window{
  overflow: visible;
}

[data-sp-embed] #analysis .post-insights__body{
  display: grid;
  gap: 0.5rem;
  padding: 0.75rem 0.8rem 0.85rem;
}

[data-sp-embed] #analysis .post-insights__toolbar{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem;
}

[data-sp-embed] #analysis .post-insights__toolbar strong{
  display: block;
  font-size: 0.88rem;
  font-weight: 800;
  color: #111827;
  line-height: 1.25;
}

[data-sp-embed] #analysis .post-insights__toolbar > div > span{
  display: block;
  margin-top: 0.1rem;
  font-size: 0.66rem;
  font-weight: 600;
  color: #64748b;
}

[data-sp-embed] #analysis .post-insights__toolbar-actions{
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: 0 0 auto;
}

[data-sp-embed] #analysis .post-insights__refresh{
  padding: 0.3rem 0.55rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: #fff;
  font-size: 0.66rem;
  font-weight: 700;
  color: #334155;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

[data-sp-embed] #analysis .post-insights__views{
  display: inline-flex;
  gap: 0.22rem;
  padding: 0.28rem;
  border-radius: 0.5rem;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
}

[data-sp-embed] #analysis .post-insights__views i{
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 0.22rem;
  background: #e2e8f0;
}

[data-sp-embed] #analysis .post-insights__views i.is-on{
  background: #334155;
}

[data-sp-embed] #analysis .post-insights__filter{
  display: flex;
  align-items: center;
  min-height: 1.9rem;
  padding: 0.32rem 0.65rem;
  border-radius: 0.5rem;
  background: #e8eaed;
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 600;
}

[data-sp-embed] #analysis .post-insights__split{
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  align-items: stretch;
  min-height: 0;
}

[data-sp-embed] #analysis .post-insights.is-insights .post-insights__split::before{
  content: "";
  position: absolute;
  inset: -0.15rem;
  z-index: 2;
  border-radius: 0.7rem;
  background: rgba(29, 78, 216, 0.28);
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
  animation: post-insights-scrim-in 0.45s ease both;
  pointer-events: none;
}

[data-sp-embed] #analysis .post-insights.is-insights .post-insights__grid{
  filter: saturate(0.9);
}

[data-sp-embed] #analysis .post-insights.is-insights .post-insights__card--tap{
  z-index: 1;
  position: relative;
  box-shadow:
    0 0 0 2px rgba(225, 29, 72, 0.28),
    0 14px 28px rgba(15, 23, 42, 0.14);
}

[data-sp-embed] #analysis .post-insights__grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
  align-content: start;
}

[data-sp-embed] #analysis .post-insights__card{
  position: relative;
  display: grid;
  gap: 0.28rem;
  margin: 0;
  padding: 0.38rem 0.4rem 0.42rem;
  border-radius: 0.65rem;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
  min-width: 0;
  transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}

[data-sp-embed] #analysis .post-insights__card--tap{
  cursor: pointer;
}

[data-sp-embed] #analysis .post-insights__card--static{
  cursor: default;
  pointer-events: none;
  opacity: 0.92;
}

[data-sp-embed] #analysis .post-insights__card:focus-visible{
  outline: 2px solid #e11d48;
  outline-offset: 2px;
}

[data-sp-embed] #analysis .post-insights__card.is-active{
  border-color: rgba(225, 29, 72, 0.35);
  box-shadow:
    0 0 0 1px rgba(225, 29, 72, 0.12),
    0 8px 18px rgba(15, 23, 42, 0.08);
}

[data-sp-embed] #analysis .post-insights__card.is-tapping{
  transform: scale(0.96);
}

[data-sp-embed] #analysis .post-insights__tap{
  position: absolute;
  left: 0.42rem;
  top: 2.35rem;
  right: auto;
  bottom: auto;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 999px;
  background: rgba(225, 29, 72, 0.88);
  border: 2px solid #fff;
  box-shadow: 0 4px 12px rgba(225, 29, 72, 0.35);
  opacity: 0;
  pointer-events: none;
  transform: scale(0.5);
}

[data-sp-embed] #analysis .post-insights__card.is-hinting .post-insights__tap{
  animation: post-insights-tap 1.35s ease both;
}

@keyframes post-insights-tap {
  0% { opacity: 0; transform: scale(0.4) translate(4px, 6px); }
  25% { opacity: 1; transform: scale(1) translate(0, 0); }
  55% { opacity: 1; transform: scale(0.88) translate(0, 1px); }
  100% { opacity: 0; transform: scale(1.15) translate(-2px, -4px); }
}

[data-sp-embed] #analysis .post-insights__card header{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.32rem;
  align-items: center;
  min-width: 0;
}

[data-sp-embed] #analysis .post-insights__plat{
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 999px;
  flex: 0 0 auto;
}

[data-sp-embed] #analysis .post-insights__plat.is-ig{
  background: linear-gradient(135deg, #f97316, #db2777 55%, #7c3aed);
}

[data-sp-embed] #analysis .post-insights__plat.is-fb{
  background: #2563eb;
}

[data-sp-embed] #analysis .post-insights__card header b{
  display: block;
  font-size: 0.58rem;
  font-weight: 700;
  color: #111827;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-sp-embed] #analysis .post-insights__card header em{
  display: block;
  margin-top: 0.05rem;
  font-size: 0.52rem;
  font-style: normal;
  font-weight: 600;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-sp-embed] #analysis .post-insights__media{
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 0.42rem;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.35), transparent 45%),
    linear-gradient(160deg, #cbd5e1 0%, #94a3b8 100%);
}

[data-sp-embed] #analysis .post-insights__media::after{
  content: "";
  position: absolute;
  inset: 22% 18%;
  border-radius: 0.3rem;
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.28);
}

[data-sp-embed] #analysis .post-insights__media.is-tone-a{
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.28), transparent 50%),
    linear-gradient(145deg, #fda4af, #fb7185 45%, #f43f5e);
}

[data-sp-embed] #analysis .post-insights__media.is-tone-b{
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.28), transparent 50%),
    linear-gradient(145deg, #93c5fd, #60a5fa 50%, #3b82f6);
}

[data-sp-embed] #analysis .post-insights__media.is-tone-c{
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.28), transparent 50%),
    linear-gradient(145deg, #c4b5fd, #a78bfa 50%, #8b5cf6);
}

[data-sp-embed] #analysis .post-insights__media.is-tone-d{
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.28), transparent 50%),
    linear-gradient(145deg, #86efac, #4ade80 50%, #22c55e);
}

[data-sp-embed] #analysis .post-insights__media.is-tone-e{
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.28), transparent 50%),
    linear-gradient(145deg, #fcd34d, #fbbf24 50%, #f59e0b);
}

[data-sp-embed] #analysis .post-insights__media.is-tone-f{
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.28), transparent 50%),
    linear-gradient(145deg, #67e8f9, #22d3ee 50%, #06b6d4);
}

[data-sp-embed] #analysis .post-insights__card > p{
  margin: 0;
  font-size: 0.56rem;
  line-height: 1.3;
  color: #475569;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 1.45em;
}

[data-sp-embed] #analysis .post-insights__tag{
  color: #2563eb;
  font-weight: 700;
}

[data-sp-embed] #analysis .post-insights__detail{
  --pi-scale: 1;
  position: absolute;
  z-index: 3;
  inset: auto;
  top: 50%;
  left: 50%;
  width: min(36rem, 94%);
  max-width: 94%;
  max-height: none;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  grid-template-areas:
    "head head"
    "stat chart"
    "rank hours";
  gap: 0.55rem 0.7rem;
  align-content: start;
  padding: 0.85rem 0.95rem 0.95rem;
  border-radius: 1rem;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(244, 63, 94, 0.08), transparent 42%),
    radial-gradient(90% 70% at 100% 0%, rgba(37, 99, 235, 0.07), transparent 40%),
    rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow:
    0 28px 64px rgba(29, 78, 216, 0.28),
    0 2px 0 rgba(255, 255, 255, 0.9) inset;
  transform-origin: center center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -46%) scale(calc(var(--pi-scale) * 0.94));
  transition:
    opacity 0.42s ease,
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.42s;
  overflow: visible;
}

[data-sp-embed] #analysis .post-insights.is-insights .post-insights__detail{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(var(--pi-scale));
}

[data-sp-embed] #analysis .post-insights.is-insights .post-insights__detail.is-pop{
  animation: post-insights-float-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes post-insights-float-in {
  0% {
    opacity: 0;
    transform: translate(-50%, -42%) scale(calc(var(--pi-scale) * 0.92));
    filter: blur(2px);
  }
  60% {
    opacity: 1;
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(var(--pi-scale));
    filter: blur(0);
  }
}

@keyframes post-insights-scrim-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

[data-sp-embed] #analysis .post-insights__detail-head{
  grid-area: head;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

[data-sp-embed] #analysis .post-insights__detail-actions{
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex: 0 0 auto;
}

[data-sp-embed] #analysis .post-insights__close{
  appearance: none;
  -webkit-appearance: none;
  display: inline-grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 999px;
  background: #fff;
  color: #334155;
  font: inherit;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
  transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

[data-sp-embed] #analysis .post-insights__close:hover{
  background: #f8fafc;
  border-color: rgba(15, 23, 42, 0.18);
  transform: scale(1.04);
}

[data-sp-embed] #analysis .post-insights__close:focus-visible{
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

[data-sp-embed] #analysis .post-insights__detail-kicker{
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

[data-sp-embed] #analysis .post-insights__detail h4{
  margin: 0.28rem 0 0.18rem;
  font-size: 1rem;
  font-weight: 800;
  color: #111827;
  line-height: 1.25;
}

[data-sp-embed] #analysis .post-insights__detail-head > div > p{
  margin: 0;
  font-size: 0.66rem;
  line-height: 1.4;
  color: #64748b;
  max-width: 28rem;
}

[data-sp-embed] #analysis .post-insights__stat{
  grid-area: stat;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
  margin: 0;
}

[data-sp-embed] #analysis .post-insights__stat > div, [data-sp-embed] #analysis .post-insights__stat-card{
  margin: 0;
  padding: 0.55rem 0.6rem 0.6rem;
  border-radius: 0.75rem;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.07);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
}

[data-sp-embed] #analysis .post-insights__stat-card.is-like{
  background: linear-gradient(165deg, #fff1f2 0%, #fff 55%);
  border-color: rgba(244, 63, 94, 0.14);
}

[data-sp-embed] #analysis .post-insights__stat-card.is-comment{
  background: linear-gradient(165deg, #eff6ff 0%, #fff 55%);
  border-color: rgba(37, 99, 235, 0.14);
}

[data-sp-embed] #analysis .post-insights__stat dt{
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  font-size: 0.58rem;
  font-weight: 700;
  color: #64748b;
}

[data-sp-embed] #analysis .post-insights__stat-ico{
  display: inline-grid;
  place-items: center;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 999px;
  font-size: 0.58rem;
  line-height: 1;
}

[data-sp-embed] #analysis .post-insights__stat-card.is-like .post-insights__stat-ico{
  background: #ffe4e6;
  color: #e11d48;
}

[data-sp-embed] #analysis .post-insights__stat-card.is-comment .post-insights__stat-ico{
  background: #dbeafe;
  color: #1d4ed8;
  font-size: 0.52rem;
}

[data-sp-embed] #analysis .post-insights__stat dd{
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0.28rem 0 0;
  flex-wrap: wrap;
}

[data-sp-embed] #analysis .post-insights__stat strong{
  font-size: 1.45rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #111827;
}

[data-sp-embed] #analysis .post-insights__stat small{
  display: block;
  margin-top: 0.35rem;
  font-size: 0.58rem;
  font-weight: 700;
  line-height: 1.35;
  color: #64748b;
}

[data-sp-embed] #analysis .post-insights__stat small b{
  font-weight: 800;
  color: #0f172a;
}

[data-sp-embed] #analysis .post-insights__avatars--inline{
  margin-left: 0.1rem;
}

[data-sp-embed] #analysis .post-insights__avatars--inline i{
  width: 1.2rem;
  height: 1.2rem;
  font-size: 0.42rem;
}

[data-sp-embed] #analysis .post-insights__avatars--inline i:nth-child(4){
  background: linear-gradient(145deg, #86efac, #16a34a);
  color: #fff;
}

[data-sp-embed] #analysis .post-insights__avatars--inline i:nth-child(5){
  background: #e2e8f0;
  color: #475569;
}

[data-sp-embed] #analysis .post-insights__chart{
  grid-area: chart;
  display: grid;
  gap: 0.28rem;
  align-content: start;
  padding: 0.55rem 0.6rem 0.65rem;
  border-radius: 0.75rem;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.07);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
}

[data-sp-embed] #analysis .post-insights__chart > span{
  font-size: 0.58rem;
  font-weight: 700;
  color: #64748b;
}

[data-sp-embed] #analysis .post-insights__chart svg{
  width: 100%;
  height: 3.4rem;
  border-radius: 0.55rem;
  background: linear-gradient(180deg, #fff1f2 0%, #f8fafc 100%);
  border: 1px solid rgba(244, 63, 94, 0.12);
}

[data-sp-embed] #analysis .post-insights__chart polyline{
  fill: none;
  stroke: #e11d48;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: d 0.35s ease;
}

[data-sp-embed] #analysis .post-insights__rank-block{
  grid-area: rank;
  display: grid;
  gap: 0.28rem;
  padding: 0.55rem 0.6rem 0.65rem;
  border-radius: 0.75rem;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.07);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
}

[data-sp-embed] #analysis .post-insights__rank-label{
  font-size: 0.58rem;
  font-weight: 700;
  color: #64748b;
}

[data-sp-embed] #analysis .post-insights__rank{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.22rem;
}

[data-sp-embed] #analysis .post-insights__rank li{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 0.35rem;
  align-items: center;
  padding: 0.32rem 0.4rem;
  border-radius: 0.5rem;
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.05);
}

[data-sp-embed] #analysis .post-insights__rank > li > i{
  display: inline-grid;
  place-items: center;
  width: 1rem;
  height: 1rem;
  border-radius: 999px;
  background: #111827;
  color: #fff;
  font-size: 0.52rem;
  font-style: normal;
  font-weight: 800;
}

[data-sp-embed] #analysis .post-insights__rank > li:nth-child(1) > i{ background: #e11d48; }
[data-sp-embed] #analysis .post-insights__rank > li:nth-child(2) > i{ background: #f97316; }
[data-sp-embed] #analysis .post-insights__rank > li:nth-child(3) > i{ background: #64748b; }

[data-sp-embed] #analysis .post-insights__rank b{
  font-size: 0.6rem;
  font-weight: 700;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-sp-embed] #analysis .post-insights__rank em{
  font-size: 0.58rem;
  font-style: normal;
  font-weight: 800;
  color: #64748b;
  font-variant-numeric: tabular-nums;
}

[data-sp-embed] #analysis .post-insights__avatars--rank{
  justify-self: end;
}

[data-sp-embed] #analysis .post-insights__avatars--rank i{
  width: 1.1rem;
  height: 1.1rem;
  margin-right: -0.28rem;
  font-size: 0.42rem;
  box-shadow: none;
}

[data-sp-embed] #analysis .post-insights__hours{
  grid-area: hours;
  display: grid;
  gap: 0.3rem;
  align-content: start;
  padding: 0.55rem 0.6rem 0.65rem;
  border-radius: 0.75rem;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.07);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
}

[data-sp-embed] #analysis .post-insights__hours-label{
  font-size: 0.58rem;
  font-weight: 700;
  color: #64748b;
}

[data-sp-embed] #analysis .post-insights__hours-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.28rem;
}

[data-sp-embed] #analysis .post-insights__hours-list li{
  display: grid;
  grid-template-columns: 4.2rem minmax(0, 1fr) auto;
  gap: 0.35rem;
  align-items: center;
}

[data-sp-embed] #analysis .post-insights__hours-list b{
  font-size: 0.58rem;
  font-weight: 800;
  color: #0f172a;
}

[data-sp-embed] #analysis .post-insights__hours-list i{
  display: block;
  height: 0.42rem;
  border-radius: 999px;
  background: #fee2e2;
  position: relative;
  overflow: hidden;
  font-style: normal;
}

[data-sp-embed] #analysis .post-insights__hours-list i::after{
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w, 50%);
  border-radius: inherit;
  background: linear-gradient(90deg, #fb7185, #e11d48);
}

[data-sp-embed] #analysis .post-insights__hours-list em{
  font-size: 0.54rem;
  font-style: normal;
  font-weight: 800;
  color: #64748b;
}

[data-sp-embed] #analysis .post-insights__avatars{
  display: inline-flex;
  align-items: center;
}

[data-sp-embed] #analysis .post-insights__avatars i{
  display: inline-grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  margin-right: -0.32rem;
  border-radius: 999px;
  border: 1.5px solid #fff;
  background: linear-gradient(145deg, #fda4af, #e11d48);
  color: #fff;
  font-size: 0.5rem;
  font-style: normal;
  font-weight: 800;
  box-shadow: 0 4px 10px rgba(225, 29, 72, 0.18);
}

[data-sp-embed] #analysis .post-insights__avatars i:nth-child(2){
  background: linear-gradient(145deg, #93c5fd, #2563eb);
}

[data-sp-embed] #analysis .post-insights__avatars i:nth-child(3){
  background: linear-gradient(145deg, #c4b5fd, #7c3aed);
}

[data-sp-embed] #analysis .post-insights__avatars i:nth-child(4){
  background: #e2e8f0;
  color: #475569;
}

[data-sp-embed] #analysis .post-insights__updated{
  margin: 0;
  flex: 0 0 auto;
  font-size: 0.54rem;
  font-weight: 700;
  color: #94a3b8;
  white-space: nowrap;
}

@media (max-width: 899px) {
  [data-sp-embed] #analysis .post-insights__split{
    grid-template-columns: 1fr;
  }

  [data-sp-embed] #analysis .post-insights__grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  [data-sp-embed] #analysis .post-insights__card:nth-child(n + 4){
    display: none;
  }

  [data-sp-embed] #analysis .post-insights__detail{
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "stat"
      "chart"
      "rank"
      "hours";
    width: min(34rem, 94%);
    --pi-scale: 1;
  }

  [data-sp-embed] #analysis .post-insights.is-insights .post-insights__detail{
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    width: min(34rem, 94%);
  }
}

@media (max-width: 520px) {
  [data-sp-embed] #analysis .post-insights__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  [data-sp-embed] #analysis .post-insights__card:nth-child(n + 4){
    display: grid;
  }

  [data-sp-embed] #analysis .post-insights__card:nth-child(n + 5){
    display: none;
  }

  [data-sp-embed] #analysis .post-insights__detail{
    width: min(32rem, 96%);
    --pi-scale: 0.92;
  }
}

@media (min-width: 900px) {
  [data-sp-embed] #analysis .ai-insight-card--analysis-live:has(.post-insights){
    grid-template-columns: minmax(14rem, 0.78fr) minmax(24rem, 1.35fr);
    align-items: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-sp-embed] #analysis .post-insights__card, [data-sp-embed] #analysis .post-insights__detail, [data-sp-embed] #analysis .post-insights.is-insights .post-insights__detail.is-pop, [data-sp-embed] #analysis .post-insights.is-insights .post-insights__split::before, [data-sp-embed] #analysis .post-insights__card.is-hinting .post-insights__tap{
    animation: none;
    transition: none;
  }

  [data-sp-embed] #analysis .post-insights__card.is-tapping{
    transform: none;
  }

  [data-sp-embed] #analysis .post-insights__card.is-hinting .post-insights__tap{
    opacity: 0.85;
    transform: none;
  }

  [data-sp-embed] #analysis .post-insights.is-posts .post-insights__detail{
    transform: none;
  }
}

[data-sp-embed][lang="ja"] .contact .section-label, [data-sp-embed][lang="ja"] #contact .section-label{
  margin: 0 0 2.35rem;
}

[data-sp-embed][lang="ja"] .contact h2{
  font-size: clamp(1.75rem, 3.2vw + 0.65rem, 3rem);
  line-height: 1.35;
  letter-spacing: 0.02em;
  font-feature-settings: "palt";
}

[data-sp-embed][lang="ja"] .contact h2 .contact-title-line--single{
  display: inline-block;
  white-space: nowrap;
  max-width: none;
  font-feature-settings: "palt";
  letter-spacing: 0.02em;
  line-height: 1.35;
}

@media (max-width: 760px) {
  [data-sp-embed][lang="ja"] .contact .section-label, [data-sp-embed][lang="ja"] #contact .section-label{
    margin: 0 0 2rem;
  }

  [data-sp-embed][lang="ja"] .contact h2{
    font-size: clamp(1.8rem, 6.8vw, 2.45rem);
    line-height: 1.38;
  }

  [data-sp-embed][lang="ja"] .contact h2 .contact-title-line{
    display: block;
    white-space: normal;
  }

  [data-sp-embed][lang="ja"] .contact h2 .contact-title-line--single{
    white-space: normal;
  }
}

/* Keep infinite motion off the GPU until the block is actually on screen. */
[data-sp-embed].js .hero-floats:not(.is-gpu-live) .hero-float.is-animating, [data-sp-embed].js .cms-laptop:not(.is-gpu-live), [data-sp-embed].js .cms-laptop:not(.is-gpu-live) *{
  animation-play-state: paused;
}

/* LINE float contact popup (LP-style) — hardened for host embed */
[data-sp-embed] [data-contact-popup].contact-popup.line-float, [data-sp-embed] .contact-popup.line-float{
  position: fixed !important;
  z-index: 2147483000 !important;
  right: max(0.7rem, env(safe-area-inset-right)) !important;
  left: auto !important;
  bottom: calc(
    var(--sp-public-footer-offset, 88px) + max( 0.5rem, env(safe-area-inset-bottom, 0px)))
  ) !important;
  width: min(17.5rem, calc(100vw - 1.6rem)) !important;
  max-width: calc(100vw - 1.2rem) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: var(--font-sans, "Hiragino Sans", "Noto Sans JP", sans-serif) !important;
  color: #0f172a !important;
  pointer-events: none !important;
  transform: translateY(18px);
  opacity: 0;
  visibility: hidden;
  transition:
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.35s ease,
    visibility 0s linear 0.55s;
}

[data-sp-embed] .contact-popup.line-float.is-open{
  transform: translateY(0) !important;
  opacity: 1 !important;
  visibility: visible !important;
  transition:
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.45s ease,
    visibility 0s;
}

[data-sp-embed] .contact-popup.line-float .line-float__card{
  pointer-events: auto !important;
  display: block !important;
  width: 100% !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

[data-sp-embed] .contact-popup.line-float .line-float__icon, [data-sp-embed] .contact-popup.line-float .line-float__avatar, [data-sp-embed] .contact-popup.line-float .line-float__role{
  display: none !important;
}

[data-sp-embed] .contact-popup.line-float .line-float__bubble{
  position: relative !important;
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
  padding: 1rem 1rem 1.05rem !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  box-shadow:
    0 16px 34px rgba(15, 23, 42, 0.16),
    0 2px 6px rgba(15, 23, 42, 0.06) !important;
  color: #0f172a !important;
}

[data-sp-embed] .contact-popup.line-float .line-float__bubble::before{
  content: none !important;
  display: none !important;
}

[data-sp-embed] .contact-popup.line-float .line-float__head{
  display: block !important;
  position: relative !important;
  margin: 0 1.6rem 0.45rem 0 !important;
  padding: 0 !important;
}

[data-sp-embed] .contact-popup.line-float .line-float__title{
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0.98rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.4 !important;
  color: #0f172a !important;
}

[data-sp-embed] .contact-popup.line-float .line-float__close{
  position: absolute !important;
  top: -0.15rem !important;
  right: -0.2rem !important;
  z-index: 2 !important;
  width: 1.7rem !important;
  height: 1.7rem !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #f1f5f9 !important;
  color: #64748b !important;
  font-size: 1.05rem !important;
  line-height: 1 !important;
  cursor: pointer !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  flex: none !important;
}

[data-sp-embed] .contact-popup.line-float .line-float__close:hover{
  background: #e2e8f0 !important;
  color: #334155 !important;
}

[data-sp-embed] .contact-popup.line-float .line-float__badge{
  display: block !important;
  margin: 0 0 0.35rem !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #64748b !important;
  font-size: 0.74rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  line-height: 1.45 !important;
}

[data-sp-embed] .contact-popup.line-float .line-float__speech{
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  font-size: 0.86rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.55 !important;
  color: #334155 !important;
}

[data-sp-embed] .contact-popup.line-float .line-float__speech.is-typing{
  min-height: 2.6em;
}

[data-sp-embed] .contact-popup.line-float .line-float__speech strong, [data-sp-embed] .contact-popup.line-float .line-float__speech .line-float__em{
  color: #1d4ed8 !important;
  font-weight: 800 !important;
  background: none !important;
}

[data-sp-embed] .contact-popup.line-float .line-float__btn, [data-sp-embed] .contact-popup.line-float .contact-popup__button{
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.4rem !important;
  margin-top: 0.85rem !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 2.65rem !important;
  padding: 0.62rem 0.9rem !important;
  border: 0 !important;
  border-radius: 11px !important;
  background: #1d4ed8 !important;
  color: #fff !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  line-height: 1.3 !important;
  text-decoration: none !important;
  text-align: center !important;
  box-shadow: 0 6px 16px rgba(29, 78, 216, 0.28) !important;
  transition: transform 160ms ease, background 160ms ease;
}

[data-sp-embed] .contact-popup.line-float .line-float__btn::after{
  content: "";
  position: absolute;
  top: 0;
  left: -35%;
  width: 40%;
  height: 100%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, 0.15) 35%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0.15) 65%,
    transparent 100%
  );
  transform: skewX(-18deg);
  pointer-events: none;
}

[data-sp-embed] .contact-popup.line-float .line-float__btn:hover{
  transform: translateY(-1px);
  background: #1e40af !important;
  color: #fff !important;
}

[data-sp-embed] .contact-popup.line-float .line-float__btn-text{
  position: relative;
  z-index: 1;
  color: #fff !important;
}

[data-sp-embed] .contact-popup.line-float.is-minimized{
  width: auto !important;
}

[data-sp-embed] .contact-popup.line-float.is-minimized .line-float__head, [data-sp-embed] .contact-popup.line-float.is-minimized .line-float__title, [data-sp-embed] .contact-popup.line-float.is-minimized .line-float__close, [data-sp-embed] .contact-popup.line-float.is-minimized .line-float__badge, [data-sp-embed] .contact-popup.line-float.is-minimized .line-float__speech, [data-sp-embed] .contact-popup.line-float.is-minimized .line-float__sr{
  display: none !important;
}

[data-sp-embed] .contact-popup.line-float.is-minimized .line-float__bubble{
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

[data-sp-embed] .contact-popup.line-float.is-minimized .line-float__btn{
  margin-top: 0 !important;
  min-width: 10.5rem !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
  animation: line-btn-glow 2.2s ease-in-out infinite;
}

[data-sp-embed] .contact-popup.line-float .line-float__sr{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

[data-sp-embed] .contact-popup.line-float .line-float__caret{
  display: inline-block;
  width: 0.12em;
  height: 1.05em;
  margin-left: 0.08em;
  vertical-align: -0.12em;
  background: currentColor;
  border-radius: 1px;
  animation: line-caret-blink 0.9s steps(1) infinite;
}

[data-sp-embed] .contact-popup.line-float .line-float__think{
  display: inline-block;
  letter-spacing: 0.12em;
  color: #94a3b8;
  animation: line-think-pulse 0.9s ease-in-out infinite;
}

[data-sp-embed] .contact-popup.line-float .line-float__badge.is-thinking, [data-sp-embed] .contact-popup.line-float .line-float__badge.is-typing{
  min-height: 1.15rem;
}

[data-sp-embed] .contact-popup.line-float .line-float__btn.is-pending{
  opacity: 1;
  transform: none;
  pointer-events: auto;
  animation: none;
}

[data-sp-embed] .contact-popup.line-float .line-float__btn.is-pending::after{
  animation: none;
}

[data-sp-embed] .contact-popup.line-float .line-float__btn.is-ready{
  opacity: 1 !important;
  animation:
    line-btn-in 360ms cubic-bezier(0.22, 1, 0.36, 1) both,
    line-btn-glow 2.2s ease-in-out 360ms infinite;
}

[data-sp-embed] .contact-popup.line-float .line-float__btn.is-ready::after{
  animation: line-btn-shine 2.6s ease-in-out 360ms infinite;
}

@keyframes line-caret-blink {
  0%, 45% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@keyframes line-think-pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

@keyframes line-btn-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@keyframes line-btn-shine {
  0%, 35% { left: -40%; opacity: 0; }
  45% { opacity: 1; }
  70%, 100% { left: 120%; opacity: 0; }
}

@keyframes line-btn-glow {
  0%, 100% {
    box-shadow: 0 6px 16px rgba(29, 78, 216, 0.28), 0 0 0 0 rgba(29, 78, 216, 0.35);
  }
  50% {
    box-shadow: 0 8px 20px rgba(29, 78, 216, 0.38), 0 0 0 7px rgba(29, 78, 216, 0);
  }
}

@keyframes line-avatar-vibe {
  0%, 100% { transform: none; }
}

@media (min-width: 641px) {
  [data-sp-embed] .contact-popup.line-float{
    width: min(clamp(17.5rem, 14vw + 4rem, 21rem), calc(100vw - 2rem)) !important;
  }
  [data-sp-embed] .contact-popup.line-float .line-float__title{
    font-size: clamp(0.98rem, 0.85rem + 0.3vw, 1.12rem) !important;
  }
  [data-sp-embed] .contact-popup.line-float .line-float__speech{
    font-size: clamp(0.86rem, 0.75rem + 0.22vw, 0.98rem) !important;
  }
  [data-sp-embed] .contact-popup.line-float .line-float__btn, [data-sp-embed] .contact-popup.line-float .contact-popup__button{
    min-height: clamp(2.65rem, 2.3rem + 0.4vw, 3.05rem) !important;
    font-size: clamp(0.88rem, 0.78rem + 0.2vw, 0.98rem) !important;
  }
}

@media (min-width: 1280px) {
  [data-sp-embed] .contact-popup.line-float{
    width: min(clamp(19.5rem, 15vw + 2rem, 24rem), calc(100vw - 2.5rem)) !important;
    right: max(1rem, env(safe-area-inset-right)) !important;
  }
}

@media (min-width: 1600px) {
  [data-sp-embed] .contact-popup.line-float{
    width: min(clamp(22rem, 14vw + 1rem, 27rem), calc(100vw - 3rem)) !important;
  }
  [data-sp-embed] .contact-popup.line-float .line-float__title{ font-size: 1.18rem !important; }
  [data-sp-embed] .contact-popup.line-float .line-float__speech{ font-size: 1.02rem !important; }
  [data-sp-embed] .contact-popup.line-float .line-float__btn, [data-sp-embed] .contact-popup.line-float .contact-popup__button{
    min-height: 3.1rem !important;
    font-size: 1rem !important;
  }
}

@media (max-width: 640px) {
  [data-sp-embed] .contact-popup.line-float{
    left: auto !important;
    right: max(0.6rem, env(safe-area-inset-right)) !important;
    bottom: calc(
      var(--sp-public-footer-offset, 88px) + max(0.85rem, env(safe-area-inset-bottom, 0px))
    ) !important;
    width: min(15.75rem, calc(100vw - 1.4rem)) !important;
  }
  [data-sp-embed] .contact-popup.line-float.is-minimized{ width: auto !important; }
}

@media (prefers-reduced-motion: reduce) {
  [data-sp-embed] .contact-popup.line-float, [data-sp-embed] .contact-popup.line-float.is-open{
    transition: opacity 0.2s ease, visibility 0s;
    transform: none !important;
  }
  [data-sp-embed] .contact-popup.line-float .line-float__btn.is-ready, [data-sp-embed] .contact-popup.line-float .line-float__btn.is-ready::after, [data-sp-embed] .contact-popup.line-float.is-minimized .line-float__btn{
    animation: none !important;
  }
}

[data-sp-embed]{visibility:visible}