/* 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;
  --hero-lead-font: clamp(1.05rem, 0.45vw + 0.95rem, 1.2rem);
  --hero-actions-mt: clamp(1.85rem, 3.2vw, 2.75rem);
  --btn-font: clamp(0.925rem, 0.45vw + 0.78rem, 1.1rem);
  --btn-min-h: clamp(2.65rem, 0.8vw + 2.15rem, 3.15rem);
  --btn-pad-x: clamp(1.15rem, 1.2vw + 0.75rem, 1.9rem);
  --btn-pad-y: clamp(0.55rem, 0.35vw + 0.45rem, 0.85rem);
  --btn-font-hero: clamp(1.15rem, 0.92rem + 0.48vw, 1.35rem);
  --btn-min-h-hero: clamp(3.15rem, 0.75vw + 2.65rem, 3.75rem);
  --btn-pad-x-hero: clamp(1.45rem, 1.25vw + 1rem, 2.2rem);
  --btn-pad-y-hero: clamp(0.75rem, 0.42vw + 0.58rem, 1.05rem);
  --btn-font-hero-glow: clamp(1.08rem, 0.9rem + 0.42vw, 1.28rem);
  --btn-min-h-hero-glow: clamp(3.15rem, 0.7vw + 2.65rem, 3.75rem);
  --btn-pad-x-hero-glow: clamp(1.45rem, 1.25vw + 1.05rem, 2.25rem);
  --btn-pad-y-hero-glow: clamp(0.75rem, 0.42vw + 0.58rem, 1.05rem);
  --btn-font-cta: clamp(1.2rem, 1rem + 0.55vw, 1.42rem);
  --btn-min-h-cta: clamp(3.45rem, 0.8vw + 2.9rem, 4.05rem);
  --btn-pad-x-cta: clamp(1.95rem, 1.4vw + 1.25rem, 2.9rem);
  --btn-pad-y-cta: clamp(0.85rem, 0.48vw + 0.65rem, 1.12rem);
}

[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.25rem, 2.4vw + 0.45rem, 2.35rem);
  line-height: 1.28;
}

[data-sp-embed][lang="th"] .contact h2{
  font-size: clamp(1.2rem, 2.2vw + 0.4rem, 2.2rem);
  line-height: 1.35;
}

[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="th"] .feature-nav-card__title{
  letter-spacing: 0;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

@media (min-width: 1041px) and (max-width: 1280px) {
  [data-sp-embed][lang="en"] .feature-nav-card__title, [data-sp-embed][lang="th"] .feature-nav-card__title{
    font-size: clamp(1.05rem, 1.35vw, 1.22rem);
    line-height: 1.3;
  }
}

[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(0.98rem, 3.4vw, 1.2rem);
    line-height: 1.35;
  }

  [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, [data-sp-embed][lang="th"] .contact h2{
    font-size: clamp(1.1rem, 4.2vw, 1.45rem);
  }

  [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: clip;
  overflow-y: scroll;
  overscroll-behavior-x: none;
  max-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: clip;
  overflow-y: visible;
  overscroll-behavior-x: none;
  max-width: 100%;
}

[data-sp-embed] main{
  overflow-x: clip;
  max-width: 100%;
  width: 100%;
  min-width: 0;
}

[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, 5vw, 80px);
}

[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%);
  /* カードUIのみアクセント赤（帯背景はセクション色のまま） */
  --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-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: var(--btn-min-h);
  align-items: center;
  justify-content: center;
  border-radius: 980px;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  font-size: var(--btn-font);
  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: var(--btn-font);
  letter-spacing: 0.03em;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  min-height: var(--btn-min-h);
  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: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -4px, 0); }
}

/* In-page jumps: land below fixed public header (72px + 16px 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) + 16px
  );
}

/* ===== Hero + MA/CDP shared wash (no seam between sections) ===== */
[data-sp-embed] .hero-platforms{
  overflow-x: clip;
  max-width: 100%;
  /* 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;
  justify-content: center;
  gap: 0;
  padding-top: calc(var(--sp-public-header-offset, 4.5rem) + env(safe-area-inset-top, 0px) + 5.75rem);
  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(8rem, 16.5vh, 11.25rem);
  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;
}

/* Hide float chrome until images decode (empty cards under fixed header) */
[data-sp-embed].js .hero-float:not(.is-media-ready){
  opacity: 0 !important;
  visibility: hidden !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%);
  min-width: 0;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-inline: 1rem;
  overflow: visible;
  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;
  padding-inline: 0.35rem;
  box-sizing: content-box;
  will-change: auto;
  transform-origin: center center;
  isolation: isolate;
  overflow: visible;
}

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

[data-sp-embed] .hero-brand-wordmark__sakina, [data-sp-embed] .hero-brand-wordmark__product{
  font-family: var(--font-sans);
  font-size: clamp(1.65rem, 4.05vw + 0.3rem, 2.95rem);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
  color: var(--ink);
  overflow: visible;
  padding-inline: 0.08em;
  text-shadow:
    0 0 18px rgba(248, 113, 113, 0.28),
    0 0 36px rgba(252, 165, 165, 0.18),
    0 0 56px rgba(254, 202, 202, 0.12);
}

[data-sp-embed] .hero-brand-wordmark__product{
  font-size: clamp(1.45rem, 3.6vw + 0.26rem, 2.6rem);
  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(248, 113, 113, 0.28),
      0 0 36px rgba(252, 165, 165, 0.18),
      0 0 56px rgba(254, 202, 202, 0.12);
  }
  50% {
    text-shadow:
      0 0 24px rgba(248, 113, 113, 0.42),
      0 0 48px rgba(252, 165, 165, 0.28),
      0 0 72px rgba(254, 202, 202, 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: none;
}

[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: 60rem;
  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: 2.5rem auto 0.45rem;
  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] .hero-title-keep{
  white-space: nowrap;
  overflow-wrap: normal;
}

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

[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);
    filter: blur(12px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

[data-sp-embed] .hero-center .hero-copy .hero-subtitle{
  margin-top: 0;
  line-height: 1.15;
}

[data-sp-embed][lang="th"] .hero-center .hero-copy .hero-subtitle{
  line-height: 1.28;
}

[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: var(--hero-lead-font);
  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: clamp(0.55rem, 1.1vw, 0.85rem);
  margin-top: var(--hero-actions-mt);
}

[data-sp-embed] .hero-center .hero-actions--stacked{
  flex-direction: column;
  gap: clamp(0.85rem, 1.6vw, 1.25rem);
}

[data-sp-embed] .hero-center .hero-actions__primary{
  display: flex;
  justify-content: center;
}

[data-sp-embed] .hero-center .hero-actions__secondary{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(0.55rem, 1.1vw, 0.85rem);
}

[data-sp-embed] .hero-center .hero-actions .button{
  min-height: var(--btn-min-h-hero);
  padding: var(--btn-pad-y-hero) var(--btn-pad-x-hero);
  font-size: var(--btn-font-hero);
  font-weight: 600;
  letter-spacing: 0.02em;
  animation: none;
  box-shadow: none;
}

[data-sp-embed] .hero-center .hero-actions .button:hover, [data-sp-embed] .hero-center .hero-actions .button:active{
  animation: none;
}

[data-sp-embed] .hero-center .hero-actions .button.secondary.button--glow{
  min-height: var(--btn-min-h-hero-glow);
  padding: var(--btn-pad-y-hero-glow) var(--btn-pad-x-hero-glow);
  font-size: var(--btn-font-hero-glow);
  border-color: rgba(225, 29, 72, 0.42);
  color: #e11d48;
  z-index: 1;
  box-shadow: none;
  animation: none;
}

[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: var(--btn-min-h-hero);
  padding: var(--btn-pad-y-hero) var(--btn-pad-x-hero);
  font-size: var(--btn-font-hero);
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

[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(2, minmax(0, 1fr));
  align-items: stretch;
  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: visible;
  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].is-hash-landing{
  overflow-anchor: none;
}

/* Safari: freeze industries motion while the long hash jump is running */
[data-sp-embed].is-hash-landing .industries-bg, [data-sp-embed].is-hash-landing .industries-bg *{
  animation-play-state: paused !important;
}

[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: 38rem;
  color: var(--muted);
  font-size: clamp(15px, 1.2vw + 0.4rem, 17px);
  line-height: 1.75;
  font-weight: 500;
}

[data-sp-embed] .band-industries .industry-grid{
  position: relative;
  z-index: 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);
}

/*
  Industries: 960×960 sources — wide 16:10 frame, light vertical crop via cover.
*/
[data-sp-embed] .band-industries .feature-card__visual{
  margin: 10px 16px 0;
  flex-shrink: 0;
  width: auto;
  aspect-ratio: 16 / 10;
  padding: 0;
  line-height: 0;
  border-radius: 10px;
  overflow: hidden;
  background:
    radial-gradient(circle at 28% 22%, rgba(186, 230, 253, 0.55), 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: cover;
  object-position: center 44%;
  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;
  font-size: clamp(1.125rem, 0.45vw + 1rem, 1.3125rem);
}

[data-sp-embed] .band-industries .feature-card p{
  color: #334155;
  font-size: clamp(0.9375rem, 0.25vw + 0.85rem, 1rem);
  line-height: 1.75;
}

[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% 50% at 50% 0%, rgba(245, 245, 247, 0.7), transparent 68%),
    linear-gradient(180deg, #ffffff 0%, #fbfbfd 48%, #ffffff 100%);
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  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: 1rem auto 0;
  max-width: 40rem;
  color: #4b5563;
  font-size: clamp(1.28rem, 1rem + 0.85vw, 1.85rem);
  line-height: 1.65;
  font-weight: 500;
  letter-spacing: 0.04em;
}

[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;
}

/* iPhone縦: 1列（アニメが見える幅を確保） */
@media (max-width: 499px) {
  [data-sp-embed] .value-flow__steps{
    grid-template-columns: 1fr;
    gap: clamp(1.1rem, 3.5vw, 1.5rem);
    align-items: stretch;
  }

  [data-sp-embed] .value-flow-step-wrap:nth-child(5){
    grid-column: auto;
    width: 100%;
    max-width: none;
    justify-self: stretch;
  }

  [data-sp-embed] .value-flow-step__visual{
    height: min(46vw, 200px);
  }
}

/* たぶ縮小〜タブレット: 2列（2-2-1） */
@media (min-width: 500px) and (max-width: 1099px) {
  [data-sp-embed] .value-flow__steps{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(14px, 2.8vw, 36px);
    row-gap: clamp(22px, 3.8vw, 40px);
    align-items: stretch;
  }

  [data-sp-embed] .value-flow-step-wrap:nth-child(5){
    grid-column: 1 / -1;
    width: 100%;
    max-width: calc((100% - clamp(14px, 2.8vw, 36px)) / 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;
}

/* 1列（iPhone縦）: 各ステップ間は下矢印 */
@media (max-width: 499px) {
  [data-sp-embed] .value-flow-step-wrap:not(:last-child) .value-flow-step__chevron{
    display: grid;
    place-items: center;
    position: absolute;
    left: 50%;
    bottom: calc(clamp(1.1rem, 3.5vw, 1.5rem) * -0.5 - 11px);
    width: 28px;
    height: 28px;
    transform: translateX(-50%) rotate(90deg);
    animation: flow-chevron-nudge-down 1.8s ease-in-out infinite;
  }

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

/* 2-2-1: 01→02 / 03→04 は右矢印、04→05 のみ下矢印 */
@media (min-width: 500px) and (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(14px, 2.8vw, 36px) * -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(22px, 3.8vw, 40px) * -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 (min-width: 500px) and (max-width: 767px) {
  [data-sp-embed] .value-flow-step__visual{
    height: clamp(148px, 22vw, 168px);
  }
}

/* iPad / 大きめタブレット: アニメ領域を広げて見やすく */
@media (min-width: 768px) and (max-width: 1099px) {
  [data-sp-embed] .value-flow-step__visual{
    height: clamp(176px, 22vw, 210px);
  }

  [data-sp-embed] .value-flow-step{
    padding: 18px 16px 20px;
    gap: 14px;
    border-radius: 20px;
  }

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

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

  [data-sp-embed] .value-flow-step h3{
    font-size: clamp(1rem, 1.1vw + 0.72rem, 1.18rem);
    line-height: 1.42;
  }

  [data-sp-embed] .value-flow-step p{
    font-size: clamp(0.84rem, 0.55vw + 0.62rem, 0.95rem);
    line-height: 1.68;
  }

  [data-sp-embed][lang="th"] .value-flow-step h3{
    font-size: clamp(0.95rem, 1vw + 0.68rem, 1.12rem);
    line-height: 1.48;
  }

  [data-sp-embed][lang="th"] .value-flow-step p{
    font-size: clamp(0.8rem, 0.5vw + 0.58rem, 0.9rem);
    line-height: 1.72;
  }

  [data-sp-embed] .value-flow-step__link{
    margin-top: 4px;
    padding: 0.42rem 0.78rem;
    font-size: 0.8125rem;
  }

  [data-sp-embed] .value-flow__steps{
    column-gap: clamp(18px, 2.6vw, 32px);
    row-gap: clamp(26px, 3.5vw, 40px);
  }

  [data-sp-embed] .value-flow-step-wrap:nth-child(5){
    max-width: min(22.5rem, calc((100% - clamp(18px, 2.6vw, 32px)) / 2 + 1.5rem));
  }
}

[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: inherit;
  font-weight: inherit;
  background: none;
  padding: 0;
}

[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;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  min-width: 0;
  padding: 10px 12px;
}

[data-sp-embed] .flow-ingest{
  width: 100%;
  height: 100%;
  min-width: 0;
  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;
  left: 0;
  right: 0;
  bottom: 6px;
  width: max-content;
  max-width: calc(100% - 12px);
  margin-inline: auto;
  padding: 0.15rem 0.4rem;
  white-space: nowrap;
  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: 86px;
  padding: 10px 12px;
  background:
    linear-gradient(180deg, #fff 0%, #f0fdf4 100%);
  overflow: visible;
}

/* 離脱ライン（Safari は width:0 + dashed border が消えるので実幅のグラデーション） */
[data-sp-embed] .flow-retain__churn-line, [data-sp-embed] .flow-retain__stage::before{
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  pointer-events: none;
  z-index: 0;
  background-color: transparent;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(239, 68, 68, 0.78),
    rgba(239, 68, 68, 0.78) 3px,
    transparent 3px,
    transparent 7px
  );
  transform: translateZ(0);
}

[data-sp-embed] .flow-retain__stage:has(.flow-retain__churn-line)::before{
  content: none;
  display: none;
}

[data-sp-embed] .flow-retain__stage::after{
  content: "離脱";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
  transform-origin: center;
  font-size: 0.4375rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: rgba(190, 18, 60, 0.62);
  pointer-events: none;
  z-index: 0;
  /* 線のすぐ右にラベルが来るよう少しずらす */
  margin-left: 0.55rem;
}

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

[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: 10%;
  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% で端末差を吸収） */
  left: 28%;
  top: 24%;
  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: 16%;
  top: 40%;
  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% {
    left: 28%;
    transform: translateY(0);
    opacity: 1;
  }
  38% {
    /* 中央の離脱線に到達 */
    left: 48%;
    transform: translateY(-2px);
    opacity: 0.9;
  }
  55% {
    /* ゾーン内へ少し食い込む */
    left: 56%;
    transform: translateY(0);
    opacity: 0.78;
  }
  78%, 100% {
    /* 引き戻し */
    left: 30%;
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes flow-retain-lasso {
  0%, 20% {
    width: 0;
    opacity: 0;
  }
  40% {
    width: 34%;
    opacity: 1;
  }
  55% {
    width: 44%;
    opacity: 1;
  }
  78%, 100% {
    width: 16%;
    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: 499px) {
  [data-sp-embed] .value-flow-step{
    padding: 16px 14px 18px;
    gap: 12px;
    border-radius: 18px;
  }

  [data-sp-embed] .value-flow-step__visual{
    height: min(46vw, 200px);
    border-radius: 14px;
    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(88%, 168px);
    padding: 8px;
    border-radius: 12px;
  }

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

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

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

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

  [data-sp-embed] .flow-builder__cta{
    height: 20px;
    font-size: 0.5625rem;
    border-radius: 7px;
  }

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

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

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

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

  [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__stage{
    height: 72px;
    padding: 8px 10px;
  }


  [data-sp-embed] .flow-retain__stage::after{
    font-size: 0.375rem;
  }

  [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: 8px;
  }

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

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

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

  [data-sp-embed] .value-flow-step__link{
    margin-top: 4px;
    padding: 0.4rem 0.7rem;
    font-size: 0.8125rem;
  }

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

/* たぶ縮小 2-2-1: 半分幅でもアニメが枠内に綺麗に収まる */
@media (min-width: 500px) and (max-width: 767px) {
  [data-sp-embed] .value-flow-step{
    padding: 14px 12px 16px;
    gap: 11px;
    border-radius: 18px;
  }

  [data-sp-embed] .value-flow-step__visual{
    height: clamp(148px, 20vw, 172px);
    border-radius: 13px;
    overflow: hidden;
  }

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

  [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: 7px 8px;
  }

  [data-sp-embed] .flow-builder__card{
    width: min(90%, 138px);
    padding: 7px;
    border-radius: 11px;
  }

  [data-sp-embed] .flow-builder__media{
    height: 42px;
    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: 17px;
    font-size: 0.5rem;
    border-radius: 6px;
  }

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

  [data-sp-embed] .flow-visual--dm{
    gap: 4px;
    padding: 7px 5px;
  }

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

  [data-sp-embed] .flow-visual__pill{
    padding: 0.24rem 0.42rem;
    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: 11px;
    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: 92%;
    padding: 0.3rem 0.38rem 0.34rem;
    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.3rem;
    font-size: 0.4375rem;
    box-shadow: none;
  }

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

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

  [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.16rem 0.3rem;
    font-size: 0.48rem;
    animation: flow-ingest-chip-compact 2.4s ease-in-out infinite;
  }

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

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

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

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

  [data-sp-embed] .flow-ingest__body{
    padding: 0.32rem 0.38rem 0.42rem;
    gap: 4px;
  }

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

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

  [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.2rem 0.28rem;
    gap: 4px;
    border-radius: 8px;
  }

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

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

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

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

  [data-sp-embed] .flow-ai-feed__action{
    max-width: 4.4rem;
    padding: 0.12rem 0.24rem;
    font-size: 0.375rem;
  }

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

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

  [data-sp-embed] .flow-retain__stage{
    height: 70px;
    padding: 7px 9px;
  }


  [data-sp-embed] .flow-retain__stage::after{
    font-size: 0.35rem;
  }

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

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

  [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: 7px;
  }

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

  [data-sp-embed] .value-flow-step h3{
    font-size: clamp(0.88rem, 1.5vw + 0.55rem, 1.02rem);
    line-height: 1.4;
  }

  [data-sp-embed] .value-flow-step p{
    font-size: clamp(0.75rem, 1.1vw + 0.45rem, 0.84rem);
    line-height: 1.58;
  }

  [data-sp-embed] .value-flow-step__link{
    margin-top: 2px;
    padding: 0.34rem 0.62rem;
    font-size: 0.75rem;
  }

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

/* iPad: アニメを画面幅に合わせて大きく・読みやすく */
@media (min-width: 768px) and (max-width: 1099px) {
  [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: 10px 12px;
  }

  [data-sp-embed] .flow-builder__card{
    width: min(78%, 168px);
    padding: 9px;
    border-radius: 12px;
  }

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

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

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

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

  [data-sp-embed] .flow-builder__cta{
    height: 20px;
    font-size: 0.5625rem;
    border-radius: 7px;
  }

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

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

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

  [data-sp-embed] .flow-visual__pill{
    padding: 0.3rem 0.55rem;
    font-size: 0.6rem;
  }

  [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: 14px;
    width: 2px;
    animation: flow-arrow-glow-compact 1.6s ease-in-out infinite;
  }

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

  [data-sp-embed] .flow-visual__coupon{
    width: 88%;
    padding: 0.4rem 0.5rem 0.42rem;
    border-radius: 12px;
    animation: flow-coupon-vibe-compact 1.6s ease-in-out infinite;
  }

  [data-sp-embed] .flow-visual__coupon-badge{
    margin-bottom: 0.12rem;
    padding: 0.1rem 0.4rem;
    font-size: 0.5rem;
    box-shadow: none;
  }

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

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

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

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

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

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

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

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

  [data-sp-embed] .flow-ingest__bar{
    gap: 4px;
    padding: 0.34rem 0.48rem;
  }

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

  [data-sp-embed] .flow-ingest__body{
    padding: 0.42rem 0.48rem 0.55rem;
    gap: 5px;
  }

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

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

  [data-sp-embed] .flow-visual--ai{
    padding: 8px;
    border-radius: 12px;
  }

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

  [data-sp-embed] .flow-ai-feed__row{
    padding: 0.28rem 0.4rem;
    gap: 6px;
    border-radius: 9px;
  }

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

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

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

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

  [data-sp-embed] .flow-ai-feed__action{
    max-width: 6rem;
    padding: 0.18rem 0.35rem;
    font-size: 0.45rem;
  }

  [data-sp-embed] .flow-retain{
    gap: 6px;
    padding: 6px;
  }

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

  [data-sp-embed] .flow-retain__stage{
    height: 84px;
    padding: 10px 12px;
  }

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

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

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

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

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

@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: #ffffff;
  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));
  grid-auto-rows: auto 1fr;
  column-gap: 18px;
  row-gap: 0.75rem;
  max-width: 1180px;
  margin: 0 auto;
  align-items: stretch;
}

[data-sp-embed] .feature-nav-group{
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  min-width: 0;
  min-height: 0;
}

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

[data-sp-embed] .feature-nav-group__label{
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

[data-sp-embed] .feature-nav-group__sub{
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

[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{
  display: flex;
  flex-direction: column;
  max-width: none;
  margin: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
}

[data-sp-embed] .feature-nav-card{
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  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__title:has(+ .feature-nav-card__desc){
  margin-bottom: 0.4rem;
}

[data-sp-embed] .feature-nav-card__desc{
  margin: 0;
  flex: 1;
  color: #4b5563;
  font-size: clamp(0.8125rem, 0.25vw + 0.72rem, 0.9375rem);
  line-height: 1.65;
  font-weight: 500;
  letter-spacing: 0.02em;
}

[data-sp-embed] .feature-nav-card__desc .text-accent-em{
  color: #374151;
  font-weight: 600;
}

[data-sp-embed] .feature-nav-card__cta{
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: auto;
  padding-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{
  overflow-x: clip;
  max-width: 100%;
  --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.22) 0%,
      rgba(255, 246, 247, 0.14) 35%,
      rgba(255, 252, 252, 0.08) 58%,
      rgba(255, 255, 255, 0) 82%
    ),
    radial-gradient(
      ellipse 90% 55% at 50% 0%,
      rgba(255, 255, 255, 0.98) 0%,
      rgba(255, 255, 255, 0) 70%
    ),
    linear-gradient(
      165deg,
      #ffffff 0%,
      #ffffff 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::after{
  content: "";
  position: absolute;
  inset: -3.5rem -4.25rem;
  z-index: 2;
}

/* Brighten only behind the MA composite — keep wash off the wordmark */
[data-sp-embed] .ma-stage__visual::before{
  content: "";
  position: absolute;
  inset: -16% -30% -22% 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 92% 88% at 68% 46%,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 1) 24%,
      rgba(255, 255, 255, 0.96) 40%,
      rgba(255, 255, 255, 0.78) 54%,
      rgba(255, 255, 255, 0.44) 70%,
      rgba(255, 255, 255, 0) 88%
    ),
    radial-gradient(
      ellipse 72% 66% at 72% 40%,
      rgba(255, 248, 230, 0.98) 0%,
      rgba(255, 252, 245, 0.78) 34%,
      rgba(255, 255, 255, 0.42) 58%,
      rgba(255, 255, 255, 0) 78%
    ),
    radial-gradient(
      ellipse 48% 44% at 78% 52%,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(255, 255, 255, 0) 72%
    );
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.45) 10%, #000 22%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.45) 10%, #000 22%);
}

[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;
  z-index: 1;
  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;
  visibility: hidden;
  transform: none;
  pointer-events: none;
  filter: none;
  z-index: 0;
}

[data-sp-embed] .ma-stage__slide.is-active, [data-sp-embed] .ma-stage__slide.is-entering, [data-sp-embed] .ma-stage__slide.is-exiting{
  visibility: visible;
  filter: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.1));
}

[data-sp-embed] .ma-stage__slide.is-active{
  opacity: 1;
  transform: none;
  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.2s cubic-bezier(0.34, 1.45, 0.64, 1) both;
  z-index: 2;
}

[data-sp-embed] .ma-stage__slide.is-exiting{
  animation: none;
  opacity: 0;
  visibility: hidden;
  filter: none;
  z-index: 0;
}

@keyframes ma-slide-pop {
  0% {
    opacity: 0;
    visibility: visible;
    transform: scale(0.88);
  }

  58% {
    opacity: 1;
    transform: scale(1.06);
  }

  100% {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
}

@keyframes ma-slide-out {
  0%,
  100% {
    opacity: 0;
    visibility: hidden;
    transform: none;
  }
}

@media (max-width: 767px) {
  [data-sp-embed] .ma-stage__slide.is-entering{
    animation-duration: 0.18s;
  }

  [data-sp-embed] .ma-stage__visual::after{
    inset: -2.25rem -1.5rem;
  }
}

[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{
  position: relative;
  z-index: 2;
  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);
  filter: blur(14px);
}

[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: inherit;
  font-weight: inherit;
  background: none;
  padding: 0;
}

/* 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;
  flex-shrink: 0;
  width: 100%;
  aspect-ratio: 16 / 10;
  padding: 0;
  line-height: 0;
  border-radius: 10px;
  overflow: hidden;
  background:
    radial-gradient(circle at 30% 20%, rgba(254, 226, 226, 0.55), 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 44%;
  transition: transform 320ms ease;
}

[data-sp-embed] .showcase-point--marketing:hover .showcase-point__visual img{
  transform: none;
}

[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(1.0625rem, 0.55vw + 0.95rem, 1.1875rem);
}

[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(0.9375rem, 0.35vw + 0.85rem, 1.03125rem);
  line-height: 1.75;
}

/* 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);
}

@media (prefers-reduced-motion: reduce) {
  [data-sp-embed].js .showcase-point.showcase-point--marketing.reveal, [data-sp-embed].js .showcase-point.showcase-point--marketing.reveal.visible, [data-sp-embed].js .band-industries .industry-grid .feature-card.reveal, [data-sp-embed].js .band-industries .industry-grid .feature-card.reveal.visible{
    animation: none;
    opacity: 1;
    transform: none;
    transition: opacity 200ms ease;
  }
}

[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: center;
  justify-self: stretch;
}

[data-sp-embed] .band-management .showcase--analysis-full > .showcase-copy, [data-sp-embed] .band-analysis .showcase--analysis-full > .showcase-copy, [data-sp-embed] .band-ai .showcase--ai-full > .showcase-copy, [data-sp-embed] .band-marketing .showcase--marketing > .showcase-copy{
  text-align: center;
  align-items: center;
}

/* 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;
}

@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-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;
}

/* AIユーザー分析プロファイル動画：左右の黒帯を少し削る（JAのみ） */
[data-sp-embed] .ai-insight-card__preview--side-crop-mid, [data-sp-embed] #ai-semantic .ai-insight-card__preview--side-crop{
  --side-crop: 0.09;
  --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);
}

[data-sp-embed] .ai-insight-tags--story .ai-insight-tag--cms .ai-insight-tag__cms-link{
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  z-index: 3;
  pointer-events: auto;
}

[data-sp-embed] .ai-insight-tags--story .ai-insight-tag--cms .ai-insight-tag__cms-link:hover .ai-insight-tag__cms-badge{
  background: rgba(194, 65, 12, 0.1);
  border-color: rgba(194, 65, 12, 0.7);
}

[data-sp-embed] .ai-insight-tags--story .ai-insight-tag--cms .ai-insight-tag__cms-link:hover .ai-insight-tag__arrow{
  opacity: 0.95;
  transform: translateX(2px);
}

@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-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-insight-card--hero-split, [data-sp-embed].js #showcases .reveal.visible .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.05rem, 0.7vw + 0.88rem, 1.3rem);
  line-height: 1.35;
  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(1rem, 0.45vw + 0.88rem, 1.125rem);
  line-height: 1.95;
  color: #334155;
}

/* 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: clamp(0.9375rem, 0.42vw + 0.82rem, 1.0625rem);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.5;
  padding: 0.5em 0.95em;
}

/* 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);
  }
}

/* Mobile stacked: title → lead + tags → media */
@media (max-width: 760px) {
  [data-sp-embed] #showcases .ai-insight-card--hero-split .hero-split-copy > p, [data-sp-embed] #showcases .ai-insight-card--hero-split .ai-insight-card__body > p{
    display: block !important;
    margin: 0.15rem 0 0.5rem !important;
    text-align: center;
    font-size: clamp(0.84rem, 3vw, 0.96rem);
    line-height: 1.55;
    overflow-wrap: anywhere;
  }

  [data-sp-embed] #showcases .ai-insight-card--hero-split .ai-insight-card__body{
    padding-top: 0.15rem !important;
    padding-bottom: 0.35rem !important;
    padding-inline: 0.25rem !important;
  }

  [data-sp-embed] #showcases .ai-insight-card--hero-split .ai-insight-tags--story{
    margin-top: 0 !important;
    justify-content: center;
  }

  [data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--hero-split .ai-insight-card__media-label h3{
    font-size: clamp(0.98rem, 3.2vw, 1.15rem);
  }

  [data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--hero-split .ai-insight-card__media-label-dot{
    width: 0.55em;
    height: 0.55em;
    box-shadow: 0 0 0 4px rgba(225, 29, 72, 0.12);
  }

  [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{
    font-size: clamp(0.62rem, 2.2vw, 0.74rem);
    padding: 0.28em 0.58em;
    max-width: min(100%, 18.5rem);
  }

  [data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--hero-split > .hero-split-media{
    margin-top: 0.25rem;
  }
}

@media (max-width: 400px) {
  [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{
    font-size: 0.6rem;
    padding: 0.26em 0.5em;
    max-width: 100%;
  }
}

@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: 1fr 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);
    /* Title ↔ subtitle: open vs tall media */
    row-gap: clamp(0.55rem, 1vw, 0.85rem);
    align-items: center;
    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-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: start;
  }

  [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{
    justify-content: flex-start;
    align-self: end;
    padding-bottom: 0.15rem;
  }

  /* 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, [data-sp-embed] #ai-semantic.ai-insight-card--hero-split-reverse.ai-insight-card--compact-media{
    grid-template-columns: minmax(0, 1.2fr) minmax(22rem, 42rem);
    column-gap: clamp(1rem, 2vw, 1.75rem);
    row-gap: clamp(0.4rem, 0.8vw, 0.65rem);
    justify-content: center;
  }

  [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.4rem;
  }

  [data-sp-embed] .ai-insights-bento.ai-insights-bento--pair > .ai-insight-card.ai-insight-card--compact-media > .hero-split-title{
    padding-top: 0;
  }

  [data-sp-embed] .ai-insights-bento.ai-insights-bento--pair > .ai-insight-card.ai-insight-card--hero-split-reverse.ai-insight-card--compact-media > .hero-split-media{
    width: 100%;
    max-width: 42rem;
    justify-self: stretch;
  }

  [data-sp-embed] #ai-semantic .hero-split-copy > p, [data-sp-embed] #ai-semantic .hero-split-copy > .ai-insight-tags{
    max-width: none;
  }
}

/* モバイル：セマンティック動画だけ幅を抑える（アスペクトはそのまま） */
[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%, 26rem);
  max-width: 100%;
  justify-self: center;
}

@media (min-width: 900px) {
  [data-sp-embed] #ai-profile.ai-insight-card--hero-split > .hero-split-media{
    width: 100%;
    max-width: none;
    justify-self: stretch;
  }

  [data-sp-embed] #ai-semantic.ai-insight-card--hero-split-reverse > .hero-split-media{
    width: 100%;
    max-width: 42rem;
    justify-self: stretch;
  }
}

[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: clamp(1.85rem, 3.2vw, 2.75rem);
}

[data-sp-embed] .contact .hero-actions .button{
  min-height: var(--btn-min-h-hero);
  padding: var(--btn-pad-y-hero) var(--btn-pad-x-hero);
  font-size: var(--btn-font-hero);
  font-weight: 600;
  letter-spacing: 0.02em;
}

[data-sp-embed] .contact .hero-actions .button.secondary.button--glow{
  min-height: var(--btn-min-h-hero-glow);
  padding: var(--btn-pad-y-hero-glow) var(--btn-pad-x-hero-glow);
  font-size: var(--btn-font-hero-glow);
  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: var(--btn-min-h-hero);
  padding: var(--btn-pad-y-hero) var(--btn-pad-x-hero);
  font-size: var(--btn-font-hero);
  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;
}

[data-sp-embed] .growth-fade{
  will-change: opacity, transform, filter;
}

@keyframes growth-fade-up {
  from {
    opacity: 0;
    transform: translateY(1.15rem);
    filter: blur(7px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(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);
  filter: blur(7px);
}

[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);
  filter: blur(14px);
}

[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;
}

/* Safari: ボタン群の横バイブは止める */
[data-sp-embed].js .hero-center.reveal .hero-actions.growth-fade, [data-sp-embed].js .hero-center.reveal.visible .hero-actions.growth-fade, [data-sp-embed].js .hero-center.reveal:not(.visible) .hero-actions.growth-fade{
  animation: none !important;
  filter: none !important;
  opacity: 1 !important;
  will-change: auto;
}

[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(7rem, 14.5vh, 9.25rem);
    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));
    column-gap: 14px;
    row-gap: 1.25rem;
  }

  [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{ gap: 12px; }
  [data-sp-embed] .workflow-step{
    min-height: 0;
    padding: 18px;
  }
}

@media (max-width: 760px) {
  [data-sp-embed] .section-band{
    padding: 3.25rem 1.15rem;
  }

  [data-sp-embed] .hero{
    /* 開いた瞬間はタイトル画面だけ。MA はスクロール後 */
    /* svh only: dvh changes with mobile URL-bar show/hide and causes scroll jitter */
    min-height: 100vh !important;
    min-height: 100svh !important;
    height: 100vh !important;
    height: 100svh !important;
    max-height: 100svh !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    /* Mobile: keep brand + title + CTAs near vertical center */
    padding-top: calc(var(--sp-public-header-offset, 4.5rem) + env(safe-area-inset-top, 0px) + 0.75rem) !important;
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom, 0px)) !important;
    padding-inline: 1rem;
    justify-content: center;
  }

  /* 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%,
      #fffcfd 30%,
      #fffafb 42%,
      #fffafb 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, 250, 251, 0) 0%,
      rgba(255, 250, 251, 0.28) 42%,
      #fffafb 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) + 1.1rem);
    bottom: 2.75rem;
    left: 0.4rem;
    right: 0.4rem;
    overflow: hidden;
  }

  [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;
    width: clamp(124px, 36vw, 156px);
    transform: rotate(-4deg);
  }

  [data-sp-embed] .hero-float--analysis{
    bottom: 3.25rem;
    left: 0;
    width: clamp(110px, 32vw, 138px);
    transform: rotate(3deg);
  }

  [data-sp-embed] .hero-float--management{
    top: 36%;
    right: 0;
    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: 0;
    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: 0;
    width: clamp(108px, 30vw, 136px);
  }

  [data-sp-embed][lang="en"] .hero-float--analysis, [data-sp-embed][lang="th"] .hero-float--analysis{
    bottom: 3rem;
    left: 0;
    width: clamp(100px, 28vw, 126px);
  }

  [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] .ma-stage__visual, [data-sp-embed] .ma-stage__visual-stage, [data-sp-embed] .cdp-stage__visual, [data-sp-embed] .cdp-stage__visual-stage{
    overflow-x: clip;
    max-width: 100%;
  }

  /* Clipping cuts the slide drop-shadow into a visible box; .platforms-band already clips x */
  [data-sp-embed] .ma-stage__visual, [data-sp-embed] .ma-stage__visual-stage{
    overflow-x: visible;
  }

  [data-sp-embed] .ma-stage__visual::after, [data-sp-embed] .ma-stage__visual::before{
    inset: -1.25rem 0;
  }

  /* Narrow inset clips the glow box; fade every edge so no white frame shows */
  [data-sp-embed] .ma-stage__visual::before{
    -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 45%, transparent 100%);
    mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 45%, transparent 100%);
  }

  [data-sp-embed] .showcase-capabilities{
    --insight-band-pad-inline: 1.15rem;
  }

  [data-sp-embed] .hero-center{
    padding-inline: 0.85rem;
    min-width: 0;
    overflow: visible;
    margin-top: 0;
  }

  [data-sp-embed] .hero-brand-logo{
    width: min(18rem, 84vw);
    margin: 0.4rem auto 0.55rem;
  }

  [data-sp-embed] .hero-brand-wordmark{
    gap: 0.04em;
  }

  [data-sp-embed] .hero-brand-wordmark__sakina{
    font-size: clamp(1.68rem, 7.9vw, 2.35rem);
    letter-spacing: 0;
  }

  [data-sp-embed] .hero-brand-wordmark__product{
    font-size: clamp(1.54rem, 7.2vw, 2.12rem);
    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%;
    max-width: 100%;
    min-width: 0;
    font-size: clamp(1.7rem, 7.8vw, 2.4rem);
    line-height: 1.28;
    margin-bottom: 0.28rem;
    letter-spacing: -0.015em;
  }

  [data-sp-embed] .hero-center .hero-copy .hero-subtitle{
    font-size: clamp(1.05rem, 4.6vw, 1.25rem);
    line-height: 1.25;
  }

  [data-sp-embed] .hero-title-float, [data-sp-embed] .hero-title-float:first-child{
    width: 100%;
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  [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-lead-font: clamp(0.6875rem, 2.2vw + 0.35rem, 0.875rem);
    --hero-actions-mt: clamp(1.25rem, 2.4vh, 1.85rem);
    --btn-font-hero: 0.92rem;
    --btn-min-h-hero: 2.35rem;
    --btn-pad-x-hero: 1.1rem;
    --btn-pad-y-hero: 0.45rem;
    --btn-font-hero-glow: 0.94rem;
    --btn-min-h-hero-glow: 2.4rem;
    --btn-pad-x-hero-glow: 1.15rem;
    --btn-pad-y-hero-glow: 0.46rem;
  }

  [data-sp-embed] .hero-center .lead{
    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;
  }

  [data-sp-embed] .hero-center .hero-actions{
    width: 100%;
    padding-inline: 0.45rem;
    box-sizing: border-box;
    overflow: visible;
    align-items: center;
  }

  [data-sp-embed] .hero-center .hero-actions .button, [data-sp-embed] .hero-center .hero-actions .button.button--dark{
    width: auto;
    max-width: min(92vw, 15rem);
    white-space: nowrap;
  }

  /* Demo CTA: fit label on one line (avoid stacked 「デモのご / 依頼」) */
  [data-sp-embed] .hero-center .hero-actions .button.secondary.button--glow, [data-sp-embed] .contact .hero-actions .button.secondary.button--glow{
    width: auto;
    max-width: min(92vw, 20rem);
    white-space: nowrap;
    box-shadow: none;
  }

  [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] .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 .card-top{
    padding: 0.75rem 0.95rem 0;
    min-height: 0;
  }

  [data-sp-embed] .band-industries .feature-card__visual{
    margin: 0.5rem 0.95rem 0;
    aspect-ratio: 4 / 3;
    max-height: none;
    border-radius: 8px;
  }

  [data-sp-embed] .band-industries .feature-card__visual img{
    object-position: center 42%;
  }

  [data-sp-embed] .band-industries .feature-card .card-copy{
    padding: 0.65rem 0.95rem 0.9rem;
  }

  [data-sp-embed] .band-industries .feature-card h3{
    font-size: 1.125rem;
    margin-bottom: 0.45rem;
  }

  [data-sp-embed] .band-industries .feature-card p{
    font-size: 0.9375rem;
    line-height: 1.65;
  }

  [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: 3rem;
  }

  [data-sp-embed] .showcase-video__caption{
    flex-direction: column;
    gap: 1rem;
  }

  [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--marketing{
    padding: 0.75rem 0.85rem 0.85rem;
    gap: 0.65rem;
  }

  [data-sp-embed] .showcase-point--marketing .showcase-point__visual{
    aspect-ratio: 2 / 1;
    max-height: clamp(148px, 42vw, 188px);
    border-radius: 8px;
  }

  [data-sp-embed] .showcase-point--marketing .showcase-point__visual img{
    object-position: center 42%;
  }

  [data-sp-embed] .showcase-point--marketing .showcase-point__body{
    padding: 0 2px 0;
  }

  [data-sp-embed] .showcase-point--marketing h3{
    font-size: 1.125rem;
    margin-bottom: 0.45rem;
  }

  [data-sp-embed] .showcase-point--marketing p{
    font-size: 0.9375rem;
    line-height: 1.65;
  }

  [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.45rem, 5.5vw, 1.95rem);
    line-height: 1.3;
  }

  [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] .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;
    align-items: center;
  }

  [data-sp-embed] .contact .hero-actions .button, [data-sp-embed] .contact .button{
    width: min(78%, 15rem);
  }

  [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: お問い合わせのグロー点滅だけ止める。ヒーローCTAは縦揺れを残す */
  [data-sp-embed] .contact .hero-actions .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-top: calc(var(--sp-public-header-offset, 4.5rem) + env(safe-area-inset-top, 0px) + 0.5rem) !important;
  }

  [data-sp-embed] .hero-center{
    margin-top: 0;
  }

  [data-sp-embed] .hero-brand-wordmark__sakina{
    font-size: clamp(1.58rem, 8.1vw, 2.16rem);
    letter-spacing: 0;
  }

  [data-sp-embed] .hero-brand-wordmark__product{
    font-size: clamp(1.45rem, 7.4vw, 1.94rem);
    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] .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;
  }
}

@media (min-width: 1024px) {
  [data-sp-embed]{
    --hero-lead-font: clamp(1.4rem, 0.7vw + 1.18rem, 1.68rem);
    --hero-actions-mt: clamp(2.85rem, 5vw, 4rem);
    --btn-font-hero: clamp(1.12rem, 0.92rem + 0.42vw, 1.28rem);
    --btn-min-h-hero: 3.25rem;
    --btn-pad-x-hero: clamp(1.35rem, 0.95vw + 1.05rem, 1.85rem);
    --btn-pad-y-hero: clamp(0.68rem, 0.4vw + 0.55rem, 0.92rem);
    --btn-font-hero-glow: clamp(1.02rem, 0.86rem + 0.36vw, 1.18rem);
    --btn-min-h-hero-glow: clamp(3.05rem, 0.5vw + 2.5rem, 3.45rem);
    --btn-pad-x-hero-glow: clamp(1.3rem, 1vw + 1rem, 1.95rem);
    --btn-pad-y-hero-glow: clamp(0.65rem, 0.38vw + 0.5rem, 0.9rem);
    --btn-font-cta: clamp(1.18rem, 0.98rem + 0.5vw, 1.38rem);
    --btn-min-h-cta: clamp(3.3rem, 0.75vw + 2.8rem, 3.85rem);
    --btn-pad-x-cta: clamp(1.85rem, 1.3vw + 1.15rem, 2.65rem);
    --btn-pad-y-cta: clamp(0.8rem, 0.45vw + 0.62rem, 1.05rem);
  }
}

@media (min-width: 768px) and (max-width: 1200px) {
  [data-sp-embed]{
    --btn-font-hero: clamp(1.02rem, 0.9rem + 0.36vw, 1.12rem);
    --btn-min-h-hero: 2.95rem;
    --btn-pad-y-hero: 0.68rem;
    --btn-pad-x-hero: 1.3rem;
    --btn-font-hero-glow: clamp(0.98rem, 0.86rem + 0.32vw, 1.1rem);
    --btn-min-h-hero-glow: 2.95rem;
    --btn-pad-y-hero-glow: 0.66rem;
    --btn-pad-x-hero-glow: 1.3rem;
  }
}

/* ===== Marketing trigger stories (exit coupon / product survey) ===== */
[data-sp-embed] #marketing-triggers{
  scroll-margin-top: calc(
    var(--sp-public-header-offset, 4.5rem) + env(safe-area-inset-top, 0px) + 16px
  );
}

[data-sp-embed] .ma-trigger-stories{
  --ma-t: 14s;
  --ma-leaf: #15803d;
  --ma-leaf-soft: #bbf7d0;
  display: grid;
  gap: clamp(22px, 3vw, 32px);
}

[data-sp-embed].js .marketing-flow.reveal:not(.visible) .growth-fade{
  opacity: 0;
  transform: translateY(1.45rem);
  filter: blur(8px);
}

[data-sp-embed].js .marketing-flow.reveal.visible .growth-fade{
  animation: ma-float-in 1.15s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--d, 0ms);
}

[data-sp-embed].js .marketing-flow.reveal:not(.visible) .ma-trigger-story.growth-fade{
  opacity: 0;
  transform: translateY(2.2rem) scale(0.985);
  filter: blur(10px);
}

[data-sp-embed].js .marketing-flow.reveal.visible .ma-trigger-story.growth-fade{
  animation: ma-card-float-in 1.28s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--d, 0ms);
}

@keyframes ma-float-in {
  from {
    opacity: 0;
    transform: translateY(1.45rem);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes ma-card-float-in {
  from {
    opacity: 0;
    transform: translateY(2.2rem) scale(0.985);
    filter: blur(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: none;
  }
}

[data-sp-embed] .ma-trigger-stories__intro{
  max-width: min(58rem, 100%);
}

[data-sp-embed] .ma-trigger-stories__kicker{
  margin: 0 0 8px;
  color: var(--ma-leaf);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

[data-sp-embed] .ma-trigger-stories__intro h3{
  margin: 0 0 10px;
  color: var(--ink);
  font-size: clamp(1.2rem, 1.45vw + 0.8rem, 1.9rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.4;
}

[data-sp-embed] .ma-trigger-stories__intro h3 .text-accent-em, [data-sp-embed] .ma-trigger-story__copy p .text-accent-em{
  color: var(--ma-leaf);
  font-weight: 700;
  background: linear-gradient(105deg, rgba(187, 247, 208, 0.95), rgba(167, 243, 208, 0.9));
  background-repeat: no-repeat;
  background-size: 100% 0.4em;
  background-position: 0 88%;
  padding: 0 0.06em;
}

[data-sp-embed] .ma-trigger-stories__intro p{
  margin: 0;
  color: var(--muted);
  font-size: clamp(0.9375rem, 0.5vw + 0.8rem, 1.22rem);
  line-height: 1.75;
  font-weight: 500;
}

[data-sp-embed] .ma-trigger-stories__head{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 0.85rem 1.75rem;
}

[data-sp-embed] .ma-trigger-stories__titles{
  min-width: 0;
}

[data-sp-embed] .ma-trigger-stories__edit{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  color: var(--ma-leaf);
  font-size: clamp(0.95rem, 0.35vw + 0.82rem, 1.12rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
}

[data-sp-embed] .ma-trigger-stories__edit:hover{
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

[data-sp-embed] .ma-trigger-story{
  padding: clamp(16px, 2vw, 22px);
  border: 1px solid rgba(22, 163, 74, 0.16);
  border-radius: 22px;
  background: linear-gradient(180deg, #ffffff 0%, #f7fdf9 100%);
  box-shadow: 0 14px 36px rgba(22, 163, 74, 0.07);
  overflow: visible;
}

[data-sp-embed] .ma-trigger-story__copy{
  margin-bottom: 16px;
}

[data-sp-embed] .ma-trigger-story__scene{
  display: inline-block;
  margin-bottom: 6px;
  color: var(--ma-leaf);
  font-size: clamp(0.6875rem, 0.28vw + 0.62rem, 0.9rem);
  font-weight: 700;
  letter-spacing: 0.14em;
}

[data-sp-embed] .ma-trigger-story__copy h4{
  margin: 0 0 6px;
  font-size: clamp(1.05rem, 1.15vw + 0.72rem, 1.72rem);
  font-weight: 700;
  letter-spacing: 0.02em;
}

[data-sp-embed] .ma-trigger-story__copy p{
  margin: 0;
  color: var(--muted);
  font-size: clamp(0.9375rem, 0.48vw + 0.82rem, 1.2rem);
  line-height: 1.7;
  font-weight: 500;
}

[data-sp-embed] .ma-trigger-story__stage{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2.4vw, 28px);
  min-height: 320px;
  padding: 44px 8px 8px;
  overflow: visible;
  pointer-events: none;
  user-select: none;
}

[data-sp-embed] .ma-person{
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 96px;
  flex: 0 0 auto;
  padding-top: 76px;
  overflow: visible;
  transform-origin: 50% 100%;
}

[data-sp-embed] .ma-person__label{
  color: var(--ink);
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
}

[data-sp-embed] .ma-person__avatar{
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.16);
}

[data-sp-embed] .ma-person--a .ma-person__avatar{
  background: linear-gradient(145deg, #34d399, #059669);
}

[data-sp-embed] .ma-person--b .ma-person__avatar{
  background: linear-gradient(145deg, #818cf8, #4f46e5);
}

[data-sp-embed] .ma-person__bubble{
  position: absolute;
  left: 50%;
  right: auto;
  top: 0;
  z-index: 4;
  width: max-content;
  min-width: 148px;
  max-width: none;
  padding: 10px 18px;
  border-radius: 14px;
  background: rgba(6, 24, 16, 0.94);
  border: 1px solid rgba(52, 211, 153, 0.85);
  box-shadow:
    0 0 8px rgba(52, 211, 153, 0.85),
    0 0 22px rgba(16, 185, 129, 0.55),
    0 10px 24px rgba(15, 23, 42, 0.28);
  color: #ecfdf5;
  font-size: 0.75rem;
  font-weight: 800;
  text-align: center;
  letter-spacing: 0.02em;
  line-height: 1.35;
  white-space: nowrap;
  text-shadow: 0 0 10px rgba(110, 231, 183, 0.95);
  opacity: 0;
  transform-origin: 50% 100%;
  transform: translate(-50%, 8px) scale(0.55);
}

[data-sp-embed] .ma-person--b .ma-person__bubble{
  background: rgba(20, 12, 48, 0.94);
  border-color: rgba(196, 181, 253, 0.9);
  box-shadow:
    0 0 8px rgba(167, 139, 250, 0.9),
    0 0 22px rgba(139, 92, 246, 0.55),
    0 10px 24px rgba(15, 23, 42, 0.28);
  color: #f5f3ff;
  text-shadow: 0 0 10px rgba(221, 214, 254, 0.95);
}

[data-sp-embed] .ma-person__bubble--3, [data-sp-embed] .ma-person--b .ma-person__bubble--3{
  min-width: 210px;
  padding: 15px 26px;
  border-radius: 18px;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  background: rgba(48, 4, 12, 0.96);
  border: 1px solid rgba(255, 64, 86, 1);
  box-shadow:
    0 0 14px rgba(255, 40, 80, 1),
    0 0 32px rgba(225, 29, 72, 0.9),
    0 0 56px rgba(244, 63, 94, 0.5);
  color: #fff5f5;
  text-shadow:
    0 0 8px rgba(255, 255, 255, 0.95),
    0 0 18px rgba(255, 70, 95, 1);
}

[data-sp-embed] .ma-phone, [data-sp-embed] .ma-phone--wide{
  position: relative;
  z-index: 1;
  width: 168px;
  height: 268px;
  flex: 0 0 auto;
  padding: 10px 8px 12px;
  border-radius: 28px;
  background: #111827;
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.18);
  /* Safari: parent filter/clip can skip painting overflow:hidden screens */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

[data-sp-embed] .ma-phone--wide{
  width: 196px;
}

[data-sp-embed] .ma-phone__notch{
  width: 42px;
  height: 6px;
  margin: 0 auto 8px;
  border-radius: 999px;
  background: #374151;
}

[data-sp-embed] .ma-phone__screen{
  position: relative;
  height: calc(100% - 14px);
  overflow: hidden;
  border-radius: 18px;
  background: #fff;
}

[data-sp-embed] .ma-web, [data-sp-embed] .ma-product{
  position: absolute;
  inset: 0;
  padding: 8px;
}

[data-sp-embed] .ma-web__bar{
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
}

[data-sp-embed] .ma-web__bar span{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fca5a5;
}

[data-sp-embed] .ma-web__bar span:nth-child(2){ background: #fcd34d; }
[data-sp-embed] .ma-web__bar span:nth-child(3){ background: #86efac; }

[data-sp-embed] .ma-web__bar em{
  flex: 1;
  margin-left: 4px;
  overflow: hidden;
  color: #6b7280;
  font-size: 0.5rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-overflow: ellipsis;
}

[data-sp-embed] .ma-web__close{
  color: #9ca3af;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
}

[data-sp-embed] .ma-web__hero, [data-sp-embed] .ma-product__img{
  height: 72px;
  margin-bottom: 8px;
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.35), transparent 40%),
    linear-gradient(165deg, #bbf7d0, #86efac 55%, #4ade80);
}

[data-sp-embed] .ma-product__img{
  height: 96px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.4), transparent 42%),
    linear-gradient(165deg, #bae6fd, #7dd3fc 50%, #38bdf8);
}

[data-sp-embed] .ma-web__lines{
  display: grid;
  gap: 6px;
}

[data-sp-embed] .ma-web__lines i, [data-sp-embed] .ma-web__lines i.is-short{
  display: block;
  height: 6px;
  border-radius: 999px;
  background: #e5e7eb;
}

[data-sp-embed] .ma-web__lines i.is-short{ width: 55%; }

[data-sp-embed] .ma-product__meta{
  display: grid;
  gap: 4px;
}

[data-sp-embed] .ma-product__meta em{
  color: #6b7280;
  font-size: 0.625rem;
  font-style: normal;
  font-weight: 600;
}

[data-sp-embed] .ma-product__meta strong{
  font-size: 0.875rem;
}

[data-sp-embed] .ma-cancel{
  display: grid;
  gap: 6px;
  padding: 2px 2px 0;
}

[data-sp-embed] .ma-cancel small{
  color: #94a3b8;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

[data-sp-embed] .ma-cancel strong{
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
}

[data-sp-embed] .ma-cancel > span{
  color: #6b7280;
  font-size: 0.5rem;
  font-weight: 600;
}

[data-sp-embed] .ma-cancel__keep, [data-sp-embed] .ma-cancel__go{
  width: 100%;
  margin-top: 2px;
  padding: 8px 8px;
  border-radius: 8px;
  font-size: 0.5625rem;
  font-weight: 800;
}

[data-sp-embed] .ma-cancel__keep{
  margin-top: 8px;
  border: 0;
  background: #f1f5f9;
  color: #334155;
}

[data-sp-embed] .ma-cancel__go{
  border: 1px solid rgba(220, 38, 38, 0.35);
  background: #fff;
  color: #dc2626;
  transform-origin: 50% 50%;
}

[data-sp-embed] .ma-article{
  position: absolute;
  inset: 0;
  padding: 8px;
}

[data-sp-embed] .ma-article__hero{
  height: 118px;
  margin-bottom: 8px;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 42%),
    linear-gradient(165deg, #e7d5c4 0%, #c4a484 48%, #8d6e54 100%);
  box-shadow: inset 0 -28px 24px rgba(15, 23, 42, 0.08);
}

[data-sp-embed] .ma-article__meta{
  display: grid;
  gap: 3px;
}

[data-sp-embed] .ma-article__meta em{
  color: #94a3b8;
  font-size: 0.5rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.1em;
}

[data-sp-embed] .ma-article__meta strong{
  font-size: 0.8125rem;
}

[data-sp-embed] .ma-article__meta span{
  color: #334155;
  font-size: 0.6875rem;
  font-weight: 700;
}

[data-sp-embed] .ma-shop, [data-sp-embed] .ma-pdp{
  position: absolute;
  inset: 0;
  padding: 8px;
}

/* First frame (shop list) must be visible before the loop starts.
   Safari can keep the 100% keyframe after animation: none. */
[data-sp-embed] .ma-shop{
  opacity: 1;
  transform: none;
  visibility: visible;
}

[data-sp-embed] .ma-shop__nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 8px;
}

[data-sp-embed] .ma-shop__nav strong{
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

[data-sp-embed] .ma-shop__nav span{
  color: #94a3b8;
  font-size: 0.5rem;
  font-weight: 700;
}

[data-sp-embed] .ma-shop__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

[data-sp-embed] .ma-shop__item{
  display: grid;
  gap: 4px;
  padding: 0;
}

[data-sp-embed] .ma-shop__item i{
  display: block;
  height: 54px;
  border-radius: 8px;
}

[data-sp-embed] .ma-shop__item b{
  color: #475569;
  font-size: 0.5rem;
  font-weight: 700;
}

[data-sp-embed] .ma-shop__item--1 i{ background: linear-gradient(165deg, #d6d3d1, #78716c); }
[data-sp-embed] .ma-shop__item--2 i{ background: linear-gradient(165deg, #e7d5c4, #c4a484 48%, #8d6e54); }
[data-sp-embed] .ma-shop__item--3 i{ background: linear-gradient(165deg, #e0e7ff, #818cf8); }
[data-sp-embed] .ma-shop__item--4 i{ background: linear-gradient(165deg, #fecdd3, #fb7185); }

[data-sp-embed] .ma-pdp{
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateX(22px);
}

[data-sp-embed] .ma-pdp__hero{
  height: 56px;
  margin-bottom: 6px;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 42%),
    linear-gradient(165deg, #e7d5c4 0%, #c4a484 48%, #8d6e54 100%);
}

[data-sp-embed] .ma-pdp__meta{
  display: grid;
  gap: 2px;
  margin-bottom: 6px;
}

[data-sp-embed] .ma-pdp__meta em{
  color: #94a3b8;
  font-size: 0.5rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.1em;
}

[data-sp-embed] .ma-pdp__meta strong{
  font-size: 0.75rem;
}

[data-sp-embed] .ma-pdp__meta span{
  color: #334155;
  font-size: 0.625rem;
  font-weight: 700;
}

[data-sp-embed] .ma-campaign{
  position: absolute;
  left: 8px;
  right: 8px;
  top: 28px;
  bottom: 8px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  padding: 12px 10px 10px;
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.18);
  opacity: 0;
  transform: translateY(18px) scale(0.94);
}

[data-sp-embed] .ma-campaign__close{
  position: absolute;
  top: 8px;
  right: 8px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #e5e7eb;
  color: #64748b;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

[data-sp-embed] .ma-campaign > small{
  color: #be185d;
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

[data-sp-embed] .ma-campaign > strong{
  margin: 2px 0 2px;
  font-size: 0.75rem;
  line-height: 1.3;
}

[data-sp-embed] .ma-campaign > span{
  color: #64748b;
  font-size: 0.5rem;
  font-weight: 600;
}

[data-sp-embed] .ma-trigger-story--product .ma-survey{
  position: absolute;
  left: 8px;
  right: 8px;
  top: 32px;
  bottom: 8px;
  z-index: 4;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 8px 8px;
  overflow: hidden;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.14);
}

[data-sp-embed] .ma-trigger-story--product .ma-survey small{
  display: block;
  color: #be185d;
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

[data-sp-embed] .ma-trigger-story--product .ma-survey strong{
  display: block;
  font-size: 0.6875rem;
  line-height: 1.3;
}

[data-sp-embed] .ma-trigger-story--product .ma-survey span{
  display: block;
  color: #64748b;
  font-size: 0.5rem;
  font-weight: 600;
}

[data-sp-embed] .ma-trigger-story--product .ma-coupon--product{
  position: absolute;
  left: 12px;
  right: 12px;
  top: 12%;
  bottom: 10%;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding: 16px 10px 14px;
  overflow: hidden;
  border: 0;
  border-radius: 16px;
  transform-origin: 50% 0;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.08), rgba(15, 23, 42, 0.28)),
    linear-gradient(165deg, #fda4af, #fb7185 42%, #c084fc);
  box-shadow: 0 16px 28px rgba(192, 132, 252, 0.4);
  color: #fff;
}

[data-sp-embed] .ma-trigger-story--product .ma-coupon--product small, [data-sp-embed] .ma-trigger-story--product .ma-coupon--product strong, [data-sp-embed] .ma-trigger-story--product .ma-coupon--product span{
  color: #fff;
}

[data-sp-embed] .ma-trigger-story--product .ma-coupon--product::before{
  content: "↓";
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1;
  opacity: 0.9;
}

[data-sp-embed] .ma-trigger-story--product .ma-coupon--product strong{
  font-size: 1.45rem;
  line-height: 1;
}

[data-sp-embed] .ma-trigger-story--product .ma-coupon--product em{
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 8px 8px;
  border-radius: 999px;
  background: #fff;
  color: #be185d;
  font-size: 0.5625rem;
  font-style: normal;
  font-weight: 800;
  transform-origin: 50% 50%;
}

[data-sp-embed] .ma-coupon__cdp{
  display: inline-block;
  margin-top: 4px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.28);
  color: #fff;
  font-size: 0.5rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.04em;
}

[data-sp-embed] .ma-web__exit{
  position: absolute;
  top: 92px;
  left: 50%;
  z-index: 2;
  padding: 3px 8px;
  border-radius: 999px;
  background: #fef3c7;
  color: #b45309;
  font-size: 0.5625rem;
  font-weight: 700;
  opacity: 0;
  transform: translateX(-50%) translateY(6px);
}

[data-sp-embed] .ma-coupon, [data-sp-embed] .ma-coupon--exit, [data-sp-embed] .ma-coupon--product{
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 12px;
  z-index: 4;
  padding: 10px 8px 9px;
  border-radius: 12px;
  text-align: center;
  opacity: 0;
  transform: translateY(16px) scale(0.92);
}

[data-sp-embed] .ma-coupon--exit{
  top: 12%;
  left: 12px;
  right: 12px;
  bottom: 10%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 18px 12px 16px;
  overflow: hidden;
  border: 0;
  border-radius: 16px;
  transform-origin: 50% 0;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.08), rgba(15, 23, 42, 0.28)),
    linear-gradient(165deg, #fda4af, #fb7185 42%, #c084fc);
  box-shadow: 0 16px 28px rgba(192, 132, 252, 0.4);
  color: #fff;
}

[data-sp-embed] .ma-coupon--exit::before{
  content: "↓";
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1;
  opacity: 0.9;
}

[data-sp-embed] .ma-coupon--exit small, [data-sp-embed] .ma-coupon--exit strong, [data-sp-embed] .ma-coupon--exit span{
  color: #fff;
}

[data-sp-embed] .ma-coupon small{
  display: block;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

[data-sp-embed] .ma-coupon strong{
  display: block;
  margin: 2px 0 1px;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}

[data-sp-embed] .ma-coupon span{
  display: block;
  font-size: 0.5625rem;
  font-weight: 600;
}

[data-sp-embed] .ma-coupon--exit small{
  font-size: 0.5rem;
}

[data-sp-embed] .ma-coupon--exit strong{
  margin: 2px 0 0;
  font-size: 1.55rem;
  line-height: 1;
}

[data-sp-embed] .ma-coupon--exit span{
  font-size: 0.5625rem;
}

[data-sp-embed] .ma-coupon--exit em{
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 8px 8px;
  border-radius: 999px;
  background: #fff;
  color: #be185d;
  font-size: 0.5625rem;
  font-style: normal;
  font-weight: 800;
  transform-origin: 50% 50%;
}

[data-sp-embed] .ma-coupon--campaign{
  top: 8px;
  bottom: 8px;
  left: 8px;
  right: 8px;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.12);
  text-align: left;
}

[data-sp-embed] .ma-coupon__ig-head, [data-sp-embed] .ma-admin__ig-head{
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 8px 6px;
}

[data-sp-embed] .ma-coupon__ig-avatar, [data-sp-embed] .ma-admin__ig-avatar{
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: linear-gradient(135deg, #f58529, #dd2a7b 55%, #8134af);
}

[data-sp-embed] .ma-coupon__ig-head strong, [data-sp-embed] .ma-admin__ig-head strong{
  display: block;
  margin: 0;
  color: #111827;
  font-size: 0.5625rem;
  letter-spacing: 0;
}

[data-sp-embed] .ma-coupon__ig-head > div span, [data-sp-embed] .ma-admin__ig-head > div span{
  display: block;
  color: #94a3b8;
  font-size: 0.4375rem;
  font-weight: 600;
}

[data-sp-embed] .ma-coupon__ig-media, [data-sp-embed] .ma-admin__ig-media{
  display: grid;
  place-items: center;
  flex: 1;
  min-height: 72px;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.08), rgba(15, 23, 42, 0.28)),
    linear-gradient(165deg, #fda4af, #fb7185 42%, #c084fc);
}

[data-sp-embed] .ma-admin__ig-media--campaign, [data-sp-embed] .ma-coupon--campaign .ma-coupon__ig-media{
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.12), rgba(15, 23, 42, 0.32)),
    linear-gradient(165deg, #7dd3fc, #818cf8 50%, #c084fc);
}

[data-sp-embed] .ma-coupon__ig-media b, [data-sp-embed] .ma-admin__ig-media b{
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: 0.04em;
}

[data-sp-embed] .ma-coupon__ig-media em{
  display: block;
  margin-top: 2px;
  font-size: 0.4375rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.14em;
  opacity: 0.9;
}

[data-sp-embed] .ma-coupon__ig-cta, [data-sp-embed] .ma-admin__ig-cta{
  background: #111;
  color: #fff;
  font-size: 0.4375rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-align: center;
  padding: 5px 6px;
}

[data-sp-embed] .ma-coupon__ig-caption, [data-sp-embed] .ma-admin__ig-caption{
  margin: 0;
  padding: 6px 8px 8px;
  color: #334155;
  font-size: 0.5rem;
  font-weight: 500;
  line-height: 1.35;
}

[data-sp-embed] .ma-cursor, [data-sp-embed] .ma-cursor--product{
  position: absolute;
  z-index: 8;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  background: rgba(17, 24, 39, 0.92);
  border: 2px solid #fff;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(15, 23, 42, 0.18);
  opacity: 0;
  transform: scale(1);
}

[data-sp-embed] .ma-cursor::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.9);
  background: rgba(250, 204, 21, 0.12);
  opacity: 0;
  pointer-events: none;
}

[data-sp-embed] .ma-survey{
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  z-index: 3;
  display: grid;
  gap: 5px;
  padding: 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.1);
  opacity: 0;
  transform: translateY(18px);
}

[data-sp-embed] .ma-survey p{
  margin: 0 0 2px;
  font-size: 0.625rem;
  font-weight: 700;
}

[data-sp-embed] .ma-survey button{
  display: block;
  width: 100%;
  padding: 5px 7px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 8px;
  background: #f8fafc;
  color: #334155;
  font-size: 0.5625rem;
  font-weight: 600;
  text-align: left;
  transform-origin: 50% 50%;
}

[data-sp-embed] .ma-admin{
  position: relative;
  display: flex;
  width: min(248px, 46vw);
  min-height: 220px;
  flex: 0 1 248px;
  overflow: visible;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow:
    0 18px 40px rgba(15, 23, 42, 0.12),
    0 1px 0 rgba(255, 255, 255, 0.9) inset;
}

[data-sp-embed] .ma-admin__rail{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 34px;
  flex: 0 0 34px;
  padding: 10px 0 12px;
  border-radius: 16px 0 0 16px;
  background: #0f172a;
}

[data-sp-embed] .ma-admin__mark{
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  background: linear-gradient(135deg, #34d399, #059669);
  color: #fff;
  font-size: 0.5rem;
  font-weight: 800;
}

[data-sp-embed] .ma-admin__rail-item{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
}

[data-sp-embed] .ma-admin__rail-item.is-on{
  background: #34d399;
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.28);
}

[data-sp-embed] .ma-admin__pane{
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  overflow: hidden;
  border-radius: 0 16px 16px 0;
}

[data-sp-embed] .ma-admin__bar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 8px 10px;
  background: linear-gradient(180deg, #fff 0%, #fafafa 100%);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

[data-sp-embed] .ma-admin__bar strong{
  overflow: hidden;
  font-size: 0.6875rem;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}

[data-sp-embed] .ma-admin__save{
  flex: 0 0 auto;
  padding: 3px 8px;
  border-radius: 999px;
  background: #111827;
  color: #fff;
  font-size: 0.5rem;
  font-weight: 700;
}

[data-sp-embed] .ma-admin__body{
  position: relative;
  padding: 8px 10px 10px;
}

[data-sp-embed] .ma-admin__body label{
  display: block;
  margin: 7px 0 4px;
  color: #94a3b8;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

[data-sp-embed] .ma-admin__body label:first-child{ margin-top: 0; }

[data-sp-embed] .ma-admin__channels{
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

[data-sp-embed] .ma-admin__channels span{
  padding: 4px 7px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 0.5rem;
  font-weight: 700;
}

[data-sp-embed] .ma-admin__channels span.is-on{
  background: #111827;
  color: #fff;
}

[data-sp-embed] .ma-admin__select-wrap{
  position: relative;
}

[data-sp-embed] .ma-admin__select, [data-sp-embed] .ma-admin__action{
  position: relative;
  padding: 7px 10px;
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: #f8fafc;
  font-size: 0.6875rem;
  font-weight: 700;
}

[data-sp-embed] .ma-admin__select{
  min-height: 32px;
}

[data-sp-embed] .ma-admin__select-idle, [data-sp-embed] .ma-admin__select-on{
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
}

[data-sp-embed] .ma-admin__select-idle{ color: #9ca3af; }
[data-sp-embed] .ma-admin__select-on{
  color: var(--ma-leaf);
  opacity: 0;
}

[data-sp-embed] .ma-admin__action{
  color: var(--ma-leaf);
  background: #f0fdf4;
  border-color: rgba(21, 128, 61, 0.22);
}

[data-sp-embed] .ma-admin__dropdown{
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 4;
  height: 132px;
  overflow: hidden;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
}

[data-sp-embed] .ma-admin__dropdown-head{
  padding: 6px 10px 4px;
  color: #9ca3af;
  font-size: 0.5rem;
  font-weight: 700;
}

[data-sp-embed] .ma-admin__dropdown-list{
  display: grid;
}

[data-sp-embed] .ma-admin__dropdown-list > div{
  position: relative;
  padding: 6px 28px 6px 10px;
}

[data-sp-embed] .ma-admin__dropdown-list b{
  display: block;
  font-size: 0.625rem;
  font-weight: 700;
}

[data-sp-embed] .ma-admin__dropdown-list small{
  display: block;
  color: #9ca3af;
  font-size: 0.5rem;
}

[data-sp-embed] .ma-admin__dropdown-list > div.is-pick{
  background: #f3f4f6;
}

[data-sp-embed] .ma-admin__dropdown-list i{
  position: absolute;
  right: 10px;
  top: 50%;
  color: var(--ma-leaf);
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 700;
  opacity: 0;
  transform: translateY(-50%);
}

[data-sp-embed] .ma-admin__preview{
  margin-top: 8px;
  padding: 8px;
  border-radius: 12px;
  background:
    radial-gradient(ellipse 70% 55% at 50% 18%, rgba(251, 113, 133, 0.12), transparent 70%),
    linear-gradient(180deg, #fff8fb 0%, #f8fafc 100%);
}

[data-sp-embed] .ma-admin__preview-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 6px;
}

[data-sp-embed] .ma-admin__preview-head > strong{
  color: #334155;
  font-size: 0.5625rem;
  font-weight: 700;
}

[data-sp-embed] .ma-admin__tabs{
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(15, 23, 42, 0.08);
}

[data-sp-embed] .ma-admin__tabs span{
  padding: 3px 6px;
  border-radius: 999px;
  color: #64748b;
  font-size: 0.4375rem;
  font-weight: 700;
}

[data-sp-embed] .ma-admin__tabs span.is-on{
  color: #fff;
  background: linear-gradient(120deg, #f58529, #dd2a7b 55%, #8134af);
}

[data-sp-embed] .ma-admin__ig{
  overflow: hidden;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.08);
}

[data-sp-embed] .ma-admin__ig-media{
  min-height: 54px;
}

[data-sp-embed] .ma-person--exit{
  z-index: 6;
  animation: ma-exit-person var(--ma-t) ease-in-out infinite;
}
[data-sp-embed] .ma-person--exit .ma-person__avatar{
  animation: ma-avatar-glow-a var(--ma-t) ease-in-out infinite;
}
[data-sp-embed] .ma-person--exit .ma-person__bubble--1{
  animation: ma-bubble-1 var(--ma-t) ease-in-out infinite;
}
[data-sp-embed] .ma-person--exit .ma-person__bubble--2{
  animation: ma-bubble-2 var(--ma-t) ease-in-out infinite;
}
[data-sp-embed] .ma-person--exit .ma-person__bubble--3{
  animation: ma-bubble-3 var(--ma-t) ease-in-out infinite;
}
[data-sp-embed] .ma-trigger-story--exit .ma-cursor{
  animation: ma-exit-cursor var(--ma-t) ease-in-out infinite;
}
[data-sp-embed] .ma-trigger-story--exit .ma-cursor::after{
  animation: ma-cursor-ring var(--ma-t) ease-out infinite;
}
[data-sp-embed] .ma-trigger-story--exit .ma-coupon--exit em{
  animation: ma-coupon-btn var(--ma-t) ease-in-out infinite;
}
[data-sp-embed] .ma-trigger-story--exit .ma-web__exit{
  animation: ma-exit-badge var(--ma-t) ease-in-out infinite;
}
[data-sp-embed] .ma-trigger-story--exit .ma-cancel__go{
  animation: ma-cancel-press var(--ma-t) ease-in-out infinite;
}
[data-sp-embed] .ma-coupon--exit{
  animation: ma-coupon-in var(--ma-t) cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
[data-sp-embed] .ma-trigger-story--exit .ma-admin__select-idle{
  opacity: 0;
}
[data-sp-embed] .ma-trigger-story--exit .ma-admin__select-on{
  opacity: 1;
}
[data-sp-embed] .ma-trigger-story--exit .ma-admin__action{
  animation: ma-action-pulse var(--ma-t) ease-in-out infinite;
}

[data-sp-embed] .ma-person--product{
  z-index: 6;
  animation: ma-product-person var(--ma-t) ease-in-out infinite;
}
[data-sp-embed] .ma-person--product .ma-person__avatar{
  animation: ma-avatar-glow-b var(--ma-t) ease-in-out infinite;
}
[data-sp-embed] .ma-person--product .ma-person__bubble--1{
  animation: ma-prod-bubble-1 var(--ma-t) ease-in-out infinite;
  min-width: 0;
}
[data-sp-embed] .ma-person--product .ma-person__bubble--2{
  animation: ma-prod-bubble-2 var(--ma-t) ease-in-out infinite;
}
[data-sp-embed] .ma-person--product .ma-person__bubble--3{
  animation: ma-prod-bubble-3 var(--ma-t) ease-in-out infinite;
}
[data-sp-embed] .ma-survey{
  animation: ma-survey-in var(--ma-t) ease-in-out infinite;
}
[data-sp-embed] .ma-campaign{
  animation: ma-campaign-in var(--ma-t) ease-in-out infinite;
}
[data-sp-embed] .ma-survey button.is-pick{
  animation: ma-survey-pick var(--ma-t) ease-in-out infinite;
}
[data-sp-embed] .ma-coupon--product{
  animation: ma-coupon-product var(--ma-t) ease-in-out infinite;
}
[data-sp-embed] .ma-cursor--product{
  animation: ma-product-cursor var(--ma-t) ease-in-out infinite;
}
[data-sp-embed] .ma-cursor--product::after{
  animation: ma-product-cursor-ring var(--ma-t) ease-out infinite;
}
[data-sp-embed] .ma-trigger-story--product .ma-coupon--product em{
  animation: ma-coupon-product-btn var(--ma-t) ease-in-out infinite;
}
[data-sp-embed] .ma-shop{
  animation: ma-shop-out var(--ma-t) ease-in-out infinite;
}
[data-sp-embed] .ma-pdp{
  animation: ma-pdp-in var(--ma-t) ease-in-out infinite;
}
[data-sp-embed] .ma-shop__item.is-pick{
  animation: ma-shop-pick var(--ma-t) ease-in-out infinite;
}
[data-sp-embed] .ma-trigger-story--product .ma-admin__select-idle{
  opacity: 0;
}
[data-sp-embed] .ma-trigger-story--product .ma-admin__select-on{
  opacity: 1;
}
[data-sp-embed] .ma-trigger-story--product .ma-admin__action{
  animation: ma-action-pulse var(--ma-t) ease-in-out infinite;
}
[data-sp-embed] .ma-trigger-story--product .ma-admin__pane{
  position: relative;
}
[data-sp-embed] .ma-trigger-story--product .ma-admin__bar{
  position: relative;
  min-height: 2rem;
}
[data-sp-embed] .ma-trigger-story--product .ma-admin__title-idle{
  animation: ma-admin-title-out var(--ma-t) ease-in-out infinite;
}
[data-sp-embed] .ma-trigger-story--product .ma-admin__title-cdp{
  position: absolute;
  left: 10px;
  top: 8px;
  color: #fff;
  opacity: 0;
  animation: ma-admin-title-in var(--ma-t) ease-in-out infinite;
}
[data-sp-embed] .ma-trigger-story--product .ma-admin__bar{
  animation: ma-admin-bar-cdp var(--ma-t) ease-in-out infinite;
}
[data-sp-embed] .ma-trigger-story--product .ma-admin__body--trigger{
  animation: ma-admin-trigger-out var(--ma-t) ease-in-out infinite;
}
[data-sp-embed] .ma-admin__body--cdp{
  position: absolute;
  left: 0;
  right: 0;
  top: 36px;
  display: grid;
  gap: 6px;
  opacity: 0;
}
[data-sp-embed] .ma-trigger-story--product .ma-admin__body--cdp{
  animation: ma-admin-cdp-in var(--ma-t) ease-in-out infinite;
}
[data-sp-embed] .ma-cdp-log__who{
  padding: 6px 8px;
  border-radius: 8px;
  background: #ecfdf5;
  color: var(--ma-leaf);
  font-size: 0.625rem;
  font-weight: 800;
}
[data-sp-embed] .ma-cdp-log__row{
  padding: 6px 8px;
  border-radius: 8px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 0.5625rem;
  font-weight: 700;
  opacity: 0;
  transform: translateY(6px);
}
[data-sp-embed] .ma-cdp-log__row--in{
  background: #eef2ff;
  color: #4338ca;
}
[data-sp-embed] .ma-cdp-log__row--ok{
  background: #f0fdf4;
  color: var(--ma-leaf);
}
[data-sp-embed] .ma-trigger-story--product .ma-cdp-log__row:nth-child(2){
  animation: ma-cdp-row-1 var(--ma-t) ease-in-out infinite;
}
[data-sp-embed] .ma-trigger-story--product .ma-cdp-log__row--in{
  animation: ma-cdp-row-2 var(--ma-t) ease-in-out infinite;
}
[data-sp-embed] .ma-trigger-story--product .ma-cdp-log__row--ok{
  animation: ma-cdp-row-3 var(--ma-t) ease-in-out infinite;
}

[data-sp-embed] .ma-trigger-story--product .ma-trigger-story__stage{
  position: relative;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-bottom: 28px;
}

[data-sp-embed] .ma-trigger-story--product .ma-trigger-story__play{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2vw, 22px);
  width: 100%;
  min-width: 0;
  overflow: visible;
  order: 1;
}

[data-sp-embed] .ma-trigger-story--product .ma-admin{
  order: 2;
}

[data-sp-embed] .ma-cdp-cta-wrap{
  pointer-events: none;
  position: relative;
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin: 4px 0 0;
  min-height: 3.4rem;
  padding: 6px 12px 1.35rem;
  overflow: visible;
  order: 3;
}

[data-sp-embed] .ma-cdp-cta__arrow{
  position: relative;
  width: 2px;
  height: 18px;
  background: linear-gradient(180deg, rgba(52, 211, 153, 0), #34d399);
  opacity: 0;
  transform: translateY(-10px);
  animation: ma-cdp-arrow-in var(--ma-t) ease-in-out infinite;
}

[data-sp-embed] .ma-cdp-cta__arrow::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: -3px;
  width: 8px;
  height: 8px;
  border-right: 2px solid #34d399;
  border-bottom: 2px solid #34d399;
  transform: translateX(-50%) rotate(45deg);
  filter: drop-shadow(0 0 6px rgba(52, 211, 153, 0.9));
}

[data-sp-embed] .ma-cdp-cta{
  pointer-events: auto;
  position: relative;
  z-index: 8;
  align-self: center;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.2rem;
  max-width: min(32rem, 100%);
  padding: 0.5rem 1.15rem;
  border-radius: 999px;
  background: #111827;
  color: #fff;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.45;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
  opacity: 0;
  transform: translateY(10px);
  animation: ma-cdp-cta-in var(--ma-t) ease-in-out infinite;
}

[data-sp-embed] .ma-cdp-cta:hover{
  background: #000;
}

[data-sp-embed] #cdp-customer{
  scroll-margin-top: calc(
    var(--sp-public-header-offset, 4.5rem) + env(safe-area-inset-top, 0px) + 16px
  );
}

@keyframes ma-campaign-in {
  0%, 16% { opacity: 0; transform: translateY(18px) scale(0.94); }
  24%, 100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes ma-exit-person {
  0%, 10% { transform: translateX(0); }
  18%, 32% { transform: translateX(14px); }
  42%, 100% { transform: translateX(-2px); }
}
@keyframes ma-bubble-1 {
  0%, 6% { opacity: 0; transform: translate(-50%, 8px) scale(0.5); }
  11% { opacity: 1; transform: translate(-50%, 0) scale(1.12); }
  16%, 26% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  32%, 100% { opacity: 0; transform: translate(-50%, -8px) scale(0.9); }
}
@keyframes ma-bubble-2 {
  0%, 36% { opacity: 0; transform: translate(-50%, 8px) scale(0.5); }
  41% { opacity: 1; transform: translate(-50%, 0) scale(1.12); }
  46%, 58% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  64%, 100% { opacity: 0; transform: translate(-50%, -8px) scale(0.9); }
}
@keyframes ma-bubble-3 {
  0%, 62% { opacity: 0; transform: translate(-50%, 8px) scale(0.5); }
  67% { opacity: 1; transform: translate(-50%, 0) scale(1.22); }
  74%, 90% { opacity: 1; transform: translate(-50%, 0) scale(1.08); }
  96%, 100% { opacity: 0; transform: translate(-50%, -8px) scale(0.9); }
}
@keyframes ma-exit-cursor {
  0%, 8% {
    top: 34%;
    left: 50%;
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  }
  16%, 22% {
    top: 50%;
    left: 50%;
    transform: scale(1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  }
  25% {
    top: 50%;
    left: 50%;
    transform: scale(0.72);
    box-shadow:
      0 0 0 4px rgba(255, 255, 255, 0.98),
      0 0 18px 6px rgba(250, 204, 21, 0.9),
      0 2px 8px rgba(0, 0, 0, 0.35);
  }
  30%, 40% {
    top: 50%;
    left: 50%;
    transform: scale(1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  }
  48%, 54% {
    top: 68%;
    left: 50%;
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  }
  58% {
    top: 68%;
    left: 50%;
    transform: scale(0.7);
    box-shadow:
      0 0 0 5px rgba(255, 255, 255, 0.98),
      0 0 20px 7px rgba(250, 204, 21, 0.95),
      0 0 32px 10px rgba(253, 186, 116, 0.55);
  }
  64%, 88% {
    top: 68%;
    left: 50%;
    opacity: 1;
    transform: scale(1);
    box-shadow:
      0 0 0 2px rgba(255, 255, 255, 0.75),
      0 0 12px 3px rgba(250, 204, 21, 0.45),
      0 2px 8px rgba(0, 0, 0, 0.35);
  }
  96%, 100% {
    top: 68%;
    left: 50%;
    opacity: 0.8;
    transform: scale(1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  }
}
@keyframes ma-cursor-ring {
  0%, 22% { opacity: 0; transform: scale(0.4); border-color: transparent; }
  25% { opacity: 1; transform: scale(0.95); border-color: rgba(255, 255, 255, 0.98); }
  32% { opacity: 0; transform: scale(1.8); border-color: rgba(250, 204, 21, 0.4); }
  54% { opacity: 0; transform: scale(0.4); border-color: transparent; }
  58% { opacity: 1; transform: scale(1); border-color: rgba(255, 255, 255, 0.98); }
  66% { opacity: 0; transform: scale(1.9); border-color: rgba(250, 204, 21, 0.35); }
  100% { opacity: 0; transform: scale(0.4); border-color: transparent; }
}
@keyframes ma-coupon-btn {
  0%, 54% {
    background: #fff;
    color: #be185d;
    box-shadow: none;
    filter: brightness(1);
    transform: scale(1);
  }
  58% {
    background: #fffbeb;
    color: #9d174d;
    box-shadow:
      0 0 0 4px rgba(255, 255, 255, 0.98),
      0 0 18px rgba(250, 204, 21, 0.85);
    filter: brightness(1.28);
    transform: scale(0.9);
  }
  64%, 80% {
    background: #fff7ed;
    color: #9d174d;
    box-shadow:
      0 0 0 3px rgba(255, 255, 255, 0.9),
      0 8px 22px rgba(250, 204, 21, 0.45);
    filter: brightness(1.18);
    transform: scale(1.06);
  }
  88%, 100% {
    background: #fff;
    color: #be185d;
    box-shadow: none;
    filter: brightness(1);
    transform: scale(1);
  }
}
@keyframes ma-exit-badge {
  0%, 14% { opacity: 0; transform: translateX(-50%) translateY(6px); }
  20%, 48% { opacity: 1; transform: translateX(-50%) translateY(0); }
  56%, 100% { opacity: 0; transform: translateX(-50%) translateY(-6px); }
}
@keyframes ma-cancel-press {
  0%, 22% { transform: scale(1); background: #fff; box-shadow: none; }
  25%, 29% {
    transform: scale(0.86);
    background: #fecaca;
    box-shadow:
      0 0 0 5px rgba(254, 202, 202, 0.95),
      0 0 18px rgba(250, 204, 21, 0.55);
  }
  34%, 50% { transform: scale(1); background: #fff1f2; box-shadow: 0 0 0 3px rgba(252, 165, 165, 0.55); }
  58%, 100% { transform: scale(1); background: #fff; box-shadow: none; }
}
@keyframes ma-coupon-in {
  0%, 29% {
    opacity: 0;
    transform: translateY(-140%);
  }
  34% {
    opacity: 1;
    transform: translateY(8%);
  }
  40% {
    opacity: 1;
    transform: translateY(-3%);
  }
  44%, 88% {
    opacity: 1;
    transform: translateY(0);
  }
  96%, 100% {
    opacity: 0;
    transform: translateY(18%);
  }
}
@keyframes ma-dd-open {
  0%, 16% { opacity: 0; transform: translateY(-6px) scale(0.98); }
  22%, 62% { opacity: 1; transform: translateY(0) scale(1); }
  70%, 100% { opacity: 0; transform: translateY(-6px) scale(0.98); }
}
@keyframes ma-dd-scroll {
  0%, 22% { transform: translateY(0); }
  52%, 100% { transform: translateY(-118px); }
}
@keyframes ma-dd-check {
  0%, 50% { opacity: 0; }
  56%, 100% { opacity: 1; }
}
@keyframes ma-select-idle {
  0%, 62% { opacity: 1; }
  68%, 100% { opacity: 0; }
}
@keyframes ma-select-on {
  0%, 62% { opacity: 0; }
  68%, 100% { opacity: 1; }
}
@keyframes ma-action-pulse {
  0%, 62% { box-shadow: none; }
  70%, 88% { box-shadow: 0 0 0 3px rgba(187, 247, 208, 0.8); }
  100% { box-shadow: none; }
}
@keyframes ma-product-person {
  0%, 48% { transform: translateY(0); }
  58%, 86% { transform: translateY(-4px); }
  100% { transform: translateY(0); }
}
@keyframes ma-prod-bubble-1 {
  0%, 6% { opacity: 0; transform: translate(-50%, 8px) scale(0.5); }
  11% { opacity: 1; transform: translate(-50%, 0) scale(1.12); }
  16%, 26% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  32%, 100% { opacity: 0; transform: translate(-50%, -8px) scale(0.9); }
}
@keyframes ma-prod-bubble-2 {
  0%, 34% { opacity: 0; transform: translate(-50%, 8px) scale(0.5); }
  39% { opacity: 1; transform: translate(-50%, 0) scale(1.12); }
  44%, 56% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  62%, 100% { opacity: 0; transform: translate(-50%, -8px) scale(0.9); }
}
@keyframes ma-prod-bubble-3 {
  0%, 70% { opacity: 0; transform: translate(-50%, 8px) scale(0.5); }
  75% { opacity: 1; transform: translate(-50%, 0) scale(1.22); }
  82%, 92% { opacity: 1; transform: translate(-50%, 0) scale(1.08); }
  97%, 100% { opacity: 0; transform: translate(-50%, -8px) scale(0.9); }
}
@keyframes ma-avatar-glow-a {
  0%, 32% {
    transform: scale(1);
    filter: brightness(1);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.16);
  }
  38% {
    transform: scale(1.18);
    filter: brightness(1.18);
    box-shadow:
      0 0 0 6px rgba(52, 211, 153, 0.38),
      0 0 18px rgba(52, 211, 153, 0.95),
      0 0 36px rgba(16, 185, 129, 0.7);
  }
  46% {
    transform: scale(1.06);
    filter: brightness(1.08);
    box-shadow:
      0 0 0 4px rgba(52, 211, 153, 0.22),
      0 0 14px rgba(52, 211, 153, 0.7);
  }
  54% {
    transform: scale(1.16);
    filter: brightness(1.16);
    box-shadow:
      0 0 0 6px rgba(52, 211, 153, 0.34),
      0 0 20px rgba(52, 211, 153, 0.9),
      0 0 32px rgba(16, 185, 129, 0.6);
  }
  64%, 88% {
    transform: scale(1.1);
    filter: brightness(1.12);
    box-shadow:
      0 0 0 5px rgba(52, 211, 153, 0.28),
      0 0 16px rgba(52, 211, 153, 0.8);
  }
  96%, 100% {
    transform: scale(1);
    filter: brightness(1);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.16);
  }
}
@keyframes ma-avatar-glow-b {
  0%, 62% {
    transform: scale(1);
    filter: brightness(1);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.16);
  }
  68% {
    transform: scale(1.2);
    filter: brightness(1.2);
    box-shadow:
      0 0 0 6px rgba(167, 139, 250, 0.42),
      0 0 20px rgba(167, 139, 250, 0.95),
      0 0 38px rgba(139, 92, 246, 0.7);
  }
  76% {
    transform: scale(1.06);
    filter: brightness(1.08);
    box-shadow:
      0 0 0 4px rgba(167, 139, 250, 0.24),
      0 0 14px rgba(167, 139, 250, 0.7);
  }
  84% {
    transform: scale(1.16);
    filter: brightness(1.16);
    box-shadow:
      0 0 0 6px rgba(167, 139, 250, 0.36),
      0 0 22px rgba(167, 139, 250, 0.9),
      0 0 34px rgba(139, 92, 246, 0.6);
  }
  92% {
    transform: scale(1.1);
    filter: brightness(1.12);
    box-shadow:
      0 0 0 5px rgba(167, 139, 250, 0.3),
      0 0 16px rgba(167, 139, 250, 0.8);
  }
  98%, 100% {
    transform: scale(1);
    filter: brightness(1);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.16);
  }
}
@keyframes ma-survey-in {
  0%, 30% { opacity: 0; transform: translateY(-28px); }
  36%, 58% { opacity: 1; transform: translateY(0); }
  64%, 100% { opacity: 0; transform: translateY(12px); }
}
@keyframes ma-survey-pick {
  0%, 46% {
    background: #f8fafc;
    border-color: rgba(15, 23, 42, 0.1);
    color: #334155;
    transform: scale(1);
    box-shadow: none;
  }
  50% {
    background: #dcfce7;
    border-color: rgba(21, 128, 61, 0.35);
    color: #166534;
    transform: scale(0.9);
    box-shadow:
      0 0 0 4px rgba(255, 255, 255, 0.95),
      0 0 16px rgba(250, 204, 21, 0.8);
  }
  56%, 62% {
    background: #dcfce7;
    border-color: rgba(21, 128, 61, 0.35);
    color: #166534;
    transform: scale(1.04);
    box-shadow: 0 0 0 3px rgba(187, 247, 208, 0.85);
  }
  68%, 100% {
    background: #f8fafc;
    border-color: rgba(15, 23, 42, 0.1);
    color: #334155;
    transform: scale(1);
    box-shadow: none;
  }
}
@keyframes ma-shop-out {
  0%, 26% { opacity: 1; transform: translateX(0); }
  34%, 100% { opacity: 0; transform: translateX(-18px); pointer-events: none; }
}
@keyframes ma-pdp-in {
  0%, 26% { opacity: 0; transform: translateX(22px); }
  34%, 100% { opacity: 1; transform: translateX(0); }
}
@keyframes ma-shop-pick {
  0%, 12% { transform: scale(1); }
  16%, 28% { transform: scale(0.94); }
  34%, 100% { transform: scale(1); }
}
@keyframes ma-coupon-product {
  0%, 60% { opacity: 0; transform: translateY(-140%); }
  66% { opacity: 1; transform: translateY(8%); }
  72%, 92% { opacity: 1; transform: translateY(0); }
  98%, 100% { opacity: 0; transform: translateY(16%); }
}
@keyframes ma-cdp-arrow-in {
  0%, 50% {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-14px);
    filter: drop-shadow(0 0 0 rgba(52, 211, 153, 0));
  }
  56% {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    filter: drop-shadow(0 0 8px rgba(52, 211, 153, 0.95));
  }
  64% {
    opacity: 1;
    visibility: visible;
    transform: translateY(2px);
    filter: drop-shadow(0 0 12px rgba(52, 211, 153, 1));
  }
  72%, 100% {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    filter: drop-shadow(0 0 8px rgba(52, 211, 153, 0.85));
  }
}
@keyframes ma-cdp-cta-in {
  0%, 54% {
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px) scale(0.92);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
  }
  60% {
    opacity: 1;
    visibility: visible;
    transform: translateY(-3px) scale(1.06);
    box-shadow:
      0 0 0 4px rgba(52, 211, 153, 0.35),
      0 0 22px rgba(52, 211, 153, 0.85),
      0 10px 24px rgba(15, 23, 42, 0.18);
  }
  68% {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    box-shadow:
      0 0 0 2px rgba(52, 211, 153, 0.2),
      0 0 14px rgba(52, 211, 153, 0.45),
      0 10px 24px rgba(15, 23, 42, 0.18);
  }
  76% {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1.04);
    box-shadow:
      0 0 0 5px rgba(52, 211, 153, 0.4),
      0 0 26px rgba(16, 185, 129, 0.8),
      0 10px 24px rgba(15, 23, 42, 0.18);
  }
  84% {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    box-shadow:
      0 0 0 2px rgba(52, 211, 153, 0.22),
      0 0 14px rgba(52, 211, 153, 0.5),
      0 10px 24px rgba(15, 23, 42, 0.18);
  }
  92%, 100% {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1.03);
    box-shadow:
      0 0 0 4px rgba(52, 211, 153, 0.32),
      0 0 22px rgba(52, 211, 153, 0.75),
      0 10px 24px rgba(15, 23, 42, 0.18);
  }
}
@keyframes ma-product-cursor {
  0%, 8% { top: 30%; left: 30%; opacity: 1; transform: scale(1); }
  14%, 18% { top: 44%; left: 64%; transform: scale(1); }
  20% {
    top: 44%;
    left: 64%;
    transform: scale(0.72);
    box-shadow:
      0 0 0 4px rgba(255, 255, 255, 0.98),
      0 0 16px 5px rgba(250, 204, 21, 0.85);
  }
  24%, 32% { top: 44%; left: 64%; transform: scale(1); }
  38%, 46% { top: 55%; left: 50%; transform: scale(1); }
  50% {
    top: 55%;
    left: 50%;
    transform: scale(0.7);
    box-shadow:
      0 0 0 5px rgba(255, 255, 255, 0.98),
      0 0 18px 6px rgba(250, 204, 21, 0.9);
  }
  54%, 62% { top: 55%; left: 50%; transform: scale(1); }
  68%, 72% { top: 70%; left: 50%; transform: scale(1); }
  76% {
    top: 70%;
    left: 50%;
    transform: scale(0.7);
    box-shadow:
      0 0 0 5px rgba(255, 255, 255, 0.98),
      0 0 20px 7px rgba(250, 204, 21, 0.95);
  }
  80%, 100% { top: 70%; left: 50%; opacity: 0.9; transform: scale(1); }
}
@keyframes ma-product-cursor-ring {
  0%, 18% { opacity: 0; transform: scale(0.4); border-color: transparent; }
  20% { opacity: 1; transform: scale(0.95); border-color: rgba(255, 255, 255, 0.98); }
  26% { opacity: 0; transform: scale(1.75); border-color: rgba(250, 204, 21, 0.4); }
  46% { opacity: 0; transform: scale(0.4); border-color: transparent; }
  50% { opacity: 1; transform: scale(1); border-color: rgba(255, 255, 255, 0.98); }
  56% { opacity: 0; transform: scale(1.8); border-color: rgba(250, 204, 21, 0.4); }
  72% { opacity: 0; transform: scale(0.4); border-color: transparent; }
  76% { opacity: 1; transform: scale(1); border-color: rgba(255, 255, 255, 0.98); }
  84% { opacity: 0; transform: scale(1.9); border-color: rgba(250, 204, 21, 0.35); }
  100% { opacity: 0; transform: scale(0.4); border-color: transparent; }
}
@keyframes ma-coupon-product-btn {
  0%, 72% {
    background: #fff;
    color: #be185d;
    box-shadow: none;
    filter: brightness(1);
    transform: scale(1);
  }
  76% {
    background: #fffbeb;
    color: #9d174d;
    box-shadow:
      0 0 0 4px rgba(255, 255, 255, 0.98),
      0 0 18px rgba(250, 204, 21, 0.85);
    filter: brightness(1.28);
    transform: scale(0.9);
  }
  82%, 92% {
    background: #fff7ed;
    color: #9d174d;
    box-shadow:
      0 0 0 3px rgba(255, 255, 255, 0.9),
      0 8px 22px rgba(250, 204, 21, 0.45);
    filter: brightness(1.16);
    transform: scale(1.05);
  }
  96%, 100% {
    background: #fff;
    color: #be185d;
    box-shadow: none;
    filter: brightness(1);
    transform: scale(1);
  }
}
@keyframes ma-admin-title-out {
  0%, 60% { opacity: 1; }
  68%, 100% { opacity: 0; }
}
@keyframes ma-admin-title-in {
  0%, 62% { opacity: 0; }
  70%, 100% { opacity: 1; }
}
@keyframes ma-admin-bar-cdp {
  0%, 60% { background: linear-gradient(180deg, #fff 0%, #fafafa 100%); }
  70%, 100% { background: #0f172a; }
}
@keyframes ma-admin-trigger-out {
  0%, 58% { opacity: 1; transform: translateY(0); }
  66%, 100% { opacity: 0; transform: translateY(-8px); pointer-events: none; }
}
@keyframes ma-admin-cdp-in {
  0%, 64% { opacity: 0; transform: translateY(10px); }
  72%, 100% { opacity: 1; transform: translateY(0); }
}
@keyframes ma-cdp-row-1 {
  0%, 70% { opacity: 0; transform: translateY(6px); }
  76%, 100% { opacity: 1; transform: translateY(0); }
}
@keyframes ma-cdp-row-2 {
  0%, 76% { opacity: 0; transform: translateY(6px); }
  82%, 100% { opacity: 1; transform: translateY(0); }
}
@keyframes ma-cdp-row-3 {
  0%, 82% { opacity: 0; transform: translateY(6px); }
  88%, 100% { opacity: 1; transform: translateY(0); }
}

[data-sp-embed].js .ma-trigger-story:not(.is-playing) .ma-trigger-story__stage *, [data-sp-embed].js .ma-trigger-story:not(.is-playing) .ma-trigger-story__stage *::before, [data-sp-embed].js .ma-trigger-story:not(.is-playing) .ma-trigger-story__stage *::after{
  animation: none !important;
}

[data-sp-embed].js .ma-trigger-story:not(.is-playing) .ma-shop{
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

[data-sp-embed].js .ma-trigger-story:not(.is-playing) .ma-pdp{
  opacity: 0 !important;
  visibility: hidden !important;
}

[data-sp-embed].js .flow-retain:not(.is-playing) .flow-retain__user--catch, [data-sp-embed].js .flow-retain:not(.is-playing) .flow-retain__user--catch i, [data-sp-embed].js .flow-retain:not(.is-playing) .flow-retain__leave, [data-sp-embed].js .flow-retain:not(.is-playing) .flow-retain__back, [data-sp-embed].js .flow-retain:not(.is-playing) .flow-retain__lasso{
  animation: none !important;
}

@media (min-width: 768px) {
  [data-sp-embed] .ma-bubble-break{
    display: none;
  }

  [data-sp-embed] .ma-trigger-story__stage{
    min-height: 360px;
    padding: 24px 12px 12px;
    gap: clamp(12px, 1.6vw, 22px);
  }

  [data-sp-embed] .ma-phone{
    width: 176px;
    height: 284px;
  }

  [data-sp-embed] .ma-phone--wide{
    width: 196px;
  }

  [data-sp-embed] .ma-admin{
    width: min(268px, 46%);
    min-height: 236px;
  }

  [data-sp-embed] .ma-person{
    width: 76px;
  }

  [data-sp-embed] .ma-person__avatar{
    width: 48px;
    height: 48px;
  }

  [data-sp-embed] .ma-admin__body label{
    font-size: 0.5625rem;
  }

  [data-sp-embed] .ma-admin__select, [data-sp-embed] .ma-admin__action{
    font-size: 0.75rem;
  }

  [data-sp-embed] .ma-coupon strong, [data-sp-embed] .ma-coupon__ig-media b, [data-sp-embed] .ma-admin__ig-media b{
    font-size: 1.1rem;
  }

  [data-sp-embed] .ma-trigger-story--product .ma-trigger-story__stage{
    display: grid;
    grid-template-columns: auto minmax(200px, 280px);
    grid-template-rows: auto auto;
    align-items: center;
    justify-content: center;
    justify-items: center;
    column-gap: clamp(14px, 2vw, 28px);
    row-gap: 8px;
    flex-direction: unset;
    width: 100%;
  }

  [data-sp-embed] .ma-trigger-story--product .ma-trigger-story__play{
    grid-column: 1;
    grid-row: 1 / span 2;
    order: unset;
    width: auto;
    flex-direction: row;
    align-items: center;
  }

  [data-sp-embed] .ma-trigger-story--product .ma-person{
    order: 1;
  }

  [data-sp-embed] .ma-trigger-story--product .ma-phone, [data-sp-embed] .ma-trigger-story--product .ma-phone--wide{
    order: 2;
  }

  [data-sp-embed] .ma-trigger-story--product .ma-admin{
    grid-column: 2;
    grid-row: 1;
    order: unset;
    width: min(268px, 100%);
    max-width: 292px;
    flex: none;
  }

  [data-sp-embed] .ma-trigger-story--product .ma-cdp-cta-wrap{
    grid-column: 2;
    grid-row: 2;
    order: unset;
    width: 100%;
    margin: 0;
    min-height: 0;
    padding-bottom: 1.5rem;
    overflow: visible;
  }
}

@media (min-width: 1201px) {
  [data-sp-embed] .ma-trigger-story{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    align-items: center;
    gap: clamp(24px, 3vw, 48px);
    padding: clamp(22px, 2.6vw, 36px) clamp(24px, 3vw, 44px);
  }

  [data-sp-embed] .ma-trigger-story--product{
    padding-bottom: clamp(2.4rem, 3.2vw, 3.25rem);
  }

  [data-sp-embed] .ma-trigger-story--product .ma-trigger-story__stage{
    grid-template-columns: auto minmax(240px, 360px);
  }

  [data-sp-embed] .ma-trigger-story__copy{
    margin-bottom: 0;
    max-width: none;
    justify-self: stretch;
    padding-inline: clamp(4px, 1vw, 12px);
  }

  [data-sp-embed] .ma-trigger-story__stage{
    justify-self: center;
    width: 100%;
  }
}

@media (min-width: 1280px) {
  [data-sp-embed] .ma-trigger-story{
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr);
    padding: clamp(28px, 3vw, 48px) clamp(32px, 3.6vw, 56px);
    gap: clamp(28px, 3.2vw, 56px);
  }

  [data-sp-embed] .ma-trigger-story__stage{
    min-height: 400px;
  }

  [data-sp-embed] .ma-phone{
    width: 196px;
    height: 314px;
  }

  [data-sp-embed] .ma-phone--wide{
    width: 220px;
  }

  [data-sp-embed] .ma-admin{
    width: min(292px, 48%);
    min-height: 252px;
  }

  [data-sp-embed] .ma-person{
    width: 84px;
  }

  [data-sp-embed] .ma-person__avatar{
    width: 52px;
    height: 52px;
    font-size: 1rem;
  }

  [data-sp-embed] .ma-web__hero{
    height: 84px;
  }

  [data-sp-embed] .ma-pdp__hero{
    height: 64px;
  }

  [data-sp-embed] .ma-admin__ig-media{
    min-height: 64px;
  }
}

@media (max-width: 767px) {
  [data-sp-embed] .ma-trigger-story__stage{
    min-height: 0;
    gap: 14px 12px;
  }
}

@media (max-width: 640px) {
  [data-sp-embed] .ma-trigger-story{
    padding: 24px 16px 28px;
  }

  [data-sp-embed] .ma-phone, [data-sp-embed] .ma-phone--wide{
    width: min(188px, 54vw) !important;
    height: min(304px, 86vw) !important;
  }

  [data-sp-embed] .ma-person{
    width: 76px;
  }

  [data-sp-embed] .ma-person__avatar{
    width: 40px;
    height: 40px;
  }
}

/* iOS「視覚効果を減らす」でもクーポン／カーソルのループは動かす。
   カードの登場アニメだけ止めて、親が opacity:0 のまま残らないようにする。 */
@media (prefers-reduced-motion: reduce) {
  [data-sp-embed].js .marketing-flow .growth-fade, [data-sp-embed].js .marketing-flow .ma-trigger-story.growth-fade, [data-sp-embed].js .marketing-flow.reveal:not(.visible) .growth-fade, [data-sp-embed].js .marketing-flow.reveal:not(.visible) .ma-trigger-story.growth-fade{
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  [data-sp-embed].js .marketing-flow .ma-trigger-story.is-playing .ma-person--exit .ma-person__bubble--1{
    animation: ma-bubble-1 var(--ma-t) ease-in-out infinite !important;
  }
  [data-sp-embed].js .marketing-flow .ma-trigger-story.is-playing .ma-person--exit .ma-person__bubble--2{
    animation: ma-bubble-2 var(--ma-t) ease-in-out infinite !important;
  }
  [data-sp-embed].js .marketing-flow .ma-trigger-story.is-playing .ma-person--exit .ma-person__bubble--3{
    animation: ma-bubble-3 var(--ma-t) ease-in-out infinite !important;
  }
  [data-sp-embed].js .marketing-flow .ma-trigger-story--exit.is-playing .ma-cursor{
    animation: ma-exit-cursor var(--ma-t) ease-in-out infinite !important;
  }
  [data-sp-embed].js .marketing-flow .ma-trigger-story--exit.is-playing .ma-cursor::after{
    animation: ma-cursor-ring var(--ma-t) ease-out infinite !important;
  }
  [data-sp-embed].js .marketing-flow .ma-trigger-story.is-playing .ma-coupon--exit{
    animation: ma-coupon-in var(--ma-t) cubic-bezier(0.16, 1, 0.3, 1) infinite !important;
  }
  [data-sp-embed].js .marketing-flow .ma-trigger-story--exit.is-playing .ma-coupon--exit em{
    animation: ma-coupon-btn var(--ma-t) ease-in-out infinite !important;
  }
  [data-sp-embed].js .marketing-flow .ma-trigger-story.is-playing .ma-person--product .ma-person__bubble--1{
    animation: ma-prod-bubble-1 var(--ma-t) ease-in-out infinite !important;
  }
  [data-sp-embed].js .marketing-flow .ma-trigger-story.is-playing .ma-person--product .ma-person__bubble--2{
    animation: ma-prod-bubble-2 var(--ma-t) ease-in-out infinite !important;
  }
  [data-sp-embed].js .marketing-flow .ma-trigger-story.is-playing .ma-person--product .ma-person__bubble--3{
    animation: ma-prod-bubble-3 var(--ma-t) ease-in-out infinite !important;
  }
  [data-sp-embed].js .marketing-flow .ma-trigger-story.is-playing .ma-survey{
    animation: ma-survey-in var(--ma-t) ease-in-out infinite !important;
  }
  [data-sp-embed].js .marketing-flow .ma-trigger-story.is-playing .ma-campaign{
    animation: ma-campaign-in var(--ma-t) ease-in-out infinite !important;
  }
  [data-sp-embed].js .marketing-flow .ma-trigger-story.is-playing .ma-coupon--product{
    animation: ma-coupon-product var(--ma-t) ease-in-out infinite !important;
  }
  [data-sp-embed].js .marketing-flow .ma-trigger-story.is-playing .ma-cursor--product{
    animation: ma-product-cursor var(--ma-t) ease-in-out infinite !important;
  }
  [data-sp-embed].js .marketing-flow .ma-trigger-story.is-playing .ma-cursor--product::after{
    animation: ma-product-cursor-ring var(--ma-t) ease-out infinite !important;
  }
  [data-sp-embed].js .marketing-flow .ma-trigger-story.is-playing .ma-pdp{
    animation: ma-pdp-in var(--ma-t) ease-in-out infinite !important;
  }
  [data-sp-embed].js .marketing-flow .ma-trigger-story.is-playing .ma-cdp-cta{
    animation: ma-cdp-cta-in var(--ma-t) ease-in-out infinite !important;
  }
  [data-sp-embed].js .marketing-flow .ma-trigger-story.is-playing .ma-cdp-cta__arrow{
    animation: ma-cdp-arrow-in var(--ma-t) ease-in-out infinite !important;
  }
  [data-sp-embed].js .marketing-flow .ma-trigger-story--product.is-playing .ma-admin__body--cdp{
    animation: ma-admin-cdp-in var(--ma-t) ease-in-out infinite !important;
  }
  [data-sp-embed].js .marketing-flow .ma-trigger-story--product.is-playing .ma-cdp-log__row:nth-child(2){
    animation: ma-cdp-row-1 var(--ma-t) ease-in-out infinite !important;
  }
  [data-sp-embed].js .marketing-flow .ma-trigger-story--product.is-playing .ma-cdp-log__row--in{
    animation: ma-cdp-row-2 var(--ma-t) ease-in-out infinite !important;
  }
  [data-sp-embed].js .marketing-flow .ma-trigger-story--product.is-playing .ma-cdp-log__row--ok{
    animation: ma-cdp-row-3 var(--ma-t) ease-in-out infinite !important;
  }
}

/* ===== 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 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-float:not(.is-media-ready){
  opacity: 0 !important;
  visibility: hidden !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;
  }
}

/* Title stays white until every hero image/video is decoded, then opens together */
[data-sp-embed].is-title-hold:not(.is-title-open) .hero-float, [data-sp-embed].is-title-hold:not(.is-title-open) .hero-float.is-ready, [data-sp-embed].is-title-hold:not(.is-title-open) .hero-float.is-media-ready{
  opacity: 0 !important;
  visibility: hidden !important;
  transition: none !important;
  animation: none !important;
}

[data-sp-embed].is-title-hold.is-title-open::before{
  animation: title-veil-out 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  pointer-events: none;
}

@keyframes title-veil-out {
  to {
    opacity: 0;
  }
}

/* ===== SCENE 01 / 02 phone: customer above phone, platform below. iPad+ stays PC-horizontal ===== */
@media (max-width: 767px) {
  [data-sp-embed] .ma-trigger-stories{
    --ma-t: 11s;
    gap: 18px;
  }

  [data-sp-embed] .ma-trigger-stories__intro{
    text-align: center;
    margin-inline: auto;
    max-width: 100%;
  }

  [data-sp-embed] .ma-trigger-stories__intro h3{
    text-align: center;
  }

  [data-sp-embed] .ma-trigger-stories__head{
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
  }

  [data-sp-embed].js .marketing-flow.reveal.visible .ma-trigger-story.growth-fade{
    animation-delay: 70ms !important;
    animation-duration: 0.9s;
  }

  [data-sp-embed].js .marketing-flow.reveal.visible .ma-trigger-story--product.growth-fade{
    animation-delay: 200ms !important;
  }

  [data-sp-embed] .ma-trigger-stories__intro p, [data-sp-embed] .ma-trigger-story__copy p, [data-sp-embed] .ma-cancel small, [data-sp-embed] .ma-cancel > span{
    display: none !important;
  }

  [data-sp-embed] .ma-trigger-story{
    overflow: visible;
    padding: 28px 20px 32px;
    text-align: center;
  }

  [data-sp-embed] .ma-trigger-story__copy{
    text-align: center;
    margin-bottom: 22px;
  }

  [data-sp-embed] .ma-trigger-story__scene{
    display: block;
    margin-bottom: 10px;
  }

  [data-sp-embed] .ma-trigger-story__copy h4{
    font-size: 1.05rem;
    line-height: 1.45;
    text-align: center;
    margin-bottom: 0;
  }

  [data-sp-embed] .ma-phone, [data-sp-embed] .ma-phone--wide{
    position: relative;
    z-index: 1;
    width: min(220px, 62vw) !important;
    height: min(354px, 96vw) !important;
    flex: 0 0 auto !important;
    margin: 0 auto !important;
    max-width: 100%;
  }

  [data-sp-embed] .ma-person, [data-sp-embed] .ma-person--exit, [data-sp-embed] .ma-person--product{
    position: relative;
    z-index: 2;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100%;
    min-height: 0;
    margin: 0 auto !important;
    padding: 4px 0 2px;
    flex: 0 0 auto !important;
    animation: none !important;
    overflow: visible;
  }

  /* SCENE 01: customer → phone → platform */
  [data-sp-embed] .ma-trigger-story--exit .ma-trigger-story__stage{
    display: flex !important;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    width: 100%;
    max-width: 100%;
    min-height: 0 !important;
    height: auto !important;
    padding: 8px 0 4px !important;
    overflow: visible;
  }

  [data-sp-embed] .ma-trigger-story--exit .ma-person{
    order: 1;
    width: auto !important;
  }

  [data-sp-embed] .ma-trigger-story--exit .ma-phone{
    order: 2;
  }

  [data-sp-embed] .ma-trigger-story--exit .ma-admin{
    display: none !important;
  }

  /* SCENE 02: customer → phone → CDP CTA → platform */
  [data-sp-embed] .ma-trigger-story--product .ma-trigger-story__stage{
    display: flex !important;
    flex-flow: column nowrap !important;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    width: 100%;
    max-width: 100%;
    min-height: 0 !important;
    height: auto !important;
    padding: 8px 0 4px !important;
    overflow-x: visible;
    overflow-y: visible;
  }

  [data-sp-embed] .ma-trigger-story--product .ma-trigger-story__play{
    order: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    width: 100%;
    max-width: 100%;
    padding: 0 0 2px;
    overflow: visible;
  }

  [data-sp-embed] .ma-trigger-story--product .ma-person{
    order: 1 !important;
  }

  [data-sp-embed] .ma-trigger-story--product .ma-phone, [data-sp-embed] .ma-trigger-story--product .ma-phone--wide{
    order: 2 !important;
  }

  [data-sp-embed] .ma-trigger-story--product .ma-cdp-cta-wrap{
    display: flex !important;
    order: 2 !important;
    width: auto;
    max-width: 100%;
    margin: 0 !important;
    min-height: 0;
  }

  [data-sp-embed] .ma-trigger-story--product .ma-admin{
    display: none !important;
  }

  [data-sp-embed] .ma-person__avatar{
    position: relative;
    left: auto;
    top: auto;
    width: 40px;
    height: 40px;
    font-size: 0.8rem;
  }

  [data-sp-embed] .ma-person__label{
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    text-align: center;
    font-size: 0.68rem;
  }

  [data-sp-embed] .ma-person__bubble, [data-sp-embed] .ma-person--b .ma-person__bubble, [data-sp-embed] .ma-person__bubble--3, [data-sp-embed] .ma-person--b .ma-person__bubble--3{
    left: calc(50% + 28px);
    right: auto;
    top: 50%;
    width: auto;
    min-width: 0;
    max-width: min(10.5rem, calc(50vw - 2.6rem));
    padding: 8px 12px;
    font-size: 0.82rem;
    letter-spacing: 0.01em;
    line-height: 1.4;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: keep-all;
    border-radius: 12px;
    transform: translate(0, -50%);
    transform-origin: 0 50%;
    box-shadow:
      0 0 6px rgba(52, 211, 153, 0.65),
      0 6px 12px rgba(15, 23, 42, 0.18);
  }

  [data-sp-embed] .ma-person--b .ma-person__bubble{
    box-shadow:
      0 0 6px rgba(167, 139, 250, 0.65),
      0 6px 12px rgba(15, 23, 42, 0.18);
  }

  [data-sp-embed] .ma-person__bubble--3, [data-sp-embed] .ma-person--b .ma-person__bubble--3{
    font-size: 0.95rem;
    padding: 10px 16px;
    box-shadow:
      0 0 6px rgba(255, 40, 80, 0.75),
      0 6px 12px rgba(15, 23, 42, 0.18);
  }

  [data-sp-embed] .ma-person--exit .ma-person__bubble--1{ animation-name: ma-bubble-fit-1; }
  [data-sp-embed] .ma-person--exit .ma-person__bubble--2{ animation-name: ma-bubble-fit-2; }
  [data-sp-embed] .ma-person--exit .ma-person__bubble--3{ animation-name: ma-bubble-fit-3; }
  [data-sp-embed] .ma-person--product .ma-person__bubble--1{ animation-name: ma-bubble-fit-1; }
  [data-sp-embed] .ma-person--product .ma-person__bubble--2{ animation-name: ma-bubble-fit-2; }
  [data-sp-embed] .ma-person--product .ma-person__bubble--3{ animation-name: ma-bubble-fit-3; }

  [data-sp-embed] .ma-admin__rail{
    width: 26px;
    flex: 0 0 26px;
    gap: 7px;
    padding: 8px 0 10px;
  }

  [data-sp-embed] .ma-admin__body label{
    font-size: 0.52rem;
  }

  [data-sp-embed] .ma-admin__select, [data-sp-embed] .ma-admin__action{
    font-size: 0.68rem;
    padding: 6px 8px;
  }

  [data-sp-embed] .ma-cancel{
    gap: 8px;
  }

  [data-sp-embed] .ma-cancel strong{
    font-size: 1rem;
  }

  [data-sp-embed] .ma-cancel__keep, [data-sp-embed] .ma-cancel__go{
    padding: 10px 8px;
    font-size: 0.72rem;
  }

  [data-sp-embed] .ma-coupon--exit strong, [data-sp-embed] .ma-coupon--product strong{
    font-size: 1.35rem;
  }

  [data-sp-embed] .ma-coupon--exit em, [data-sp-embed] .ma-coupon--product em, [data-sp-embed] .ma-trigger-story--product .ma-coupon--product em{
    display: block;
    width: auto;
    max-width: 100%;
    font-size: 0.62rem;
    line-height: 1.2;
    padding: 6px 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  [data-sp-embed] .ma-shop__grid{
    gap: 8px;
  }

  [data-sp-embed] .ma-shop__item i{
    height: 68px;
  }

  [data-sp-embed] .ma-trigger-story--product .ma-pdp__hero{
    height: 88px;
    margin-bottom: 8px;
  }

  [data-sp-embed] .ma-trigger-story--product .ma-survey{
    justify-content: center;
    gap: 6px;
    padding: 12px 10px 10px;
    animation-name: ma-survey-in-m;
  }

  [data-sp-embed] .ma-cursor--product{
    animation-name: ma-product-cursor-m;
  }

  [data-sp-embed] .ma-cursor--product::after{
    animation-name: ma-product-cursor-ring-m;
  }

  [data-sp-embed] .ma-trigger-story--product .ma-survey strong{
    font-size: 0.82rem;
  }

  [data-sp-embed] .ma-trigger-story--product .ma-survey p{
    font-size: 0.72rem;
  }

  [data-sp-embed] .ma-trigger-story--product .ma-survey button{
    font-size: 0.7rem;
    padding: 7px 8px;
  }

  [data-sp-embed] .ma-cdp-cta{
    font-size: 0.7rem;
    min-height: 2.4rem;
    padding: 0.55rem 1.1rem;
  }
}

@keyframes ma-exit-person-m {
  0%, 100% { transform: none; }
}

@keyframes ma-bubble-fit-1 {
  0%, 6% { opacity: 0; transform: translate(8px, -50%) scale(0.84); }
  10% { opacity: 1; transform: translate(0, -50%) scale(1.04); }
  14%, 24% { opacity: 1; transform: translate(0, -50%) scale(1); }
  30%, 100% { opacity: 0; transform: translate(-4px, -50%) scale(0.94); }
}

@keyframes ma-bubble-fit-2 {
  0%, 32% { opacity: 0; transform: translate(8px, -50%) scale(0.84); }
  36% { opacity: 1; transform: translate(0, -50%) scale(1.04); }
  40%, 54% { opacity: 1; transform: translate(0, -50%) scale(1); }
  60%, 100% { opacity: 0; transform: translate(-4px, -50%) scale(0.94); }
}

@keyframes ma-bubble-fit-3 {
  0%, 58% { opacity: 0; transform: translate(8px, -50%) scale(0.84); }
  63% { opacity: 1; transform: translate(0, -50%) scale(1.05); }
  70%, 88% { opacity: 1; transform: translate(0, -50%) scale(1); }
  94%, 100% { opacity: 0; transform: translate(-4px, -50%) scale(0.94); }
}

@keyframes ma-survey-in-m {
  0%, 34% { opacity: 0; transform: translateY(-28px); }
  42%, 60% { opacity: 1; transform: translateY(0); }
  66%, 100% { opacity: 0; transform: translateY(12px); }
}

@keyframes ma-survey-sheet {
  0%, 6% { opacity: 0; transform: translateY(110%); }
  14%, 58% { opacity: 1; transform: translateY(0); }
  66%, 100% { opacity: 0; transform: translateY(110%); }
}

@keyframes ma-product-cursor-m {
  0%, 8% {
    top: 30%;
    left: 28%;
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  }
  14%, 18% {
    top: 32%;
    left: 72%;
    transform: scale(1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  }
  20% {
    top: 32%;
    left: 72%;
    transform: scale(0.72);
    box-shadow:
      0 0 0 4px rgba(255, 255, 255, 0.98),
      0 0 16px 5px rgba(250, 204, 21, 0.85),
      0 2px 8px rgba(0, 0, 0, 0.35);
  }
  24%, 32% {
    top: 32%;
    left: 72%;
    transform: scale(1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  }
  38%, 46% {
    top: 58%;
    left: 50%;
    transform: scale(1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  }
  50% {
    top: 58%;
    left: 50%;
    transform: scale(0.7);
    box-shadow:
      0 0 0 5px rgba(255, 255, 255, 0.98),
      0 0 18px 6px rgba(250, 204, 21, 0.9),
      0 2px 8px rgba(0, 0, 0, 0.35);
  }
  54%, 62% {
    top: 58%;
    left: 50%;
    transform: scale(1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  }
  68%, 72% {
    top: 74%;
    left: 50%;
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  }
  76% {
    top: 74%;
    left: 50%;
    transform: scale(0.7);
    box-shadow:
      0 0 0 5px rgba(255, 255, 255, 0.98),
      0 0 20px 7px rgba(250, 204, 21, 0.95),
      0 2px 8px rgba(0, 0, 0, 0.35);
  }
  82%, 100% {
    top: 74%;
    left: 50%;
    opacity: 0.9;
    transform: scale(1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  }
}

@keyframes ma-product-cursor-ring-m {
  0%, 18% { opacity: 0; transform: scale(0.4); border-color: transparent; }
  20% { opacity: 1; transform: scale(0.95); border-color: rgba(255, 255, 255, 0.98); }
  26% { opacity: 0; transform: scale(1.75); border-color: rgba(250, 204, 21, 0.4); }
  46% { opacity: 0; transform: scale(0.4); border-color: transparent; }
  50% { opacity: 1; transform: scale(1); border-color: rgba(255, 255, 255, 0.98); }
  56% { opacity: 0; transform: scale(1.8); border-color: rgba(250, 204, 21, 0.4); }
  72% { opacity: 0; transform: scale(0.4); border-color: transparent; }
  76% { opacity: 1; transform: scale(1); border-color: rgba(255, 255, 255, 0.98); }
  84% { opacity: 0; transform: scale(1.9); border-color: rgba(250, 204, 21, 0.35); }
  100% { opacity: 0; transform: scale(0.4); border-color: transparent; }
}

/* 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):not(.ai-insight-card__preview--window-tab), [data-sp-embed] .ai-insights-bento .ai-insight-card__preview:has(.ai-insight-card__media):not(.ai-insight-card__preview--window-tab){
  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;
}

/* AI user profile: match semantic video height + window tabs (underline, like product UI) */
@media (min-width: 900px) {
  [data-sp-embed] .ai-insights-bento.ai-insights-bento--pair
    > .ai-insight-card.ai-insight-card--hero-split.ai-insight-card--compact-media:not(.ai-insight-card--hero-split-reverse){
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1.2fr);
    column-gap: clamp(10px, 1.4vw, 18px);
    row-gap: clamp(0.4rem, 0.8vw, 0.65rem);
  }

  [data-sp-embed] .ai-insights-bento.ai-insights-bento--pair
    > .ai-insight-card.ai-insight-card--compact-media:not(.ai-insight-card--hero-split-reverse)
    > .hero-split-media{
    justify-self: start;
  }

  [data-sp-embed] .ai-insights-bento.ai-insights-bento--pair
    > .ai-insight-card.ai-insight-card--hero-split.ai-insight-card--title-only{
    grid-template-rows: 1fr auto 1fr;
    grid-template-areas:
      "media ."
      "media title"
      "media .";
  }

  [data-sp-embed] .ai-insights-bento.ai-insights-bento--pair
    > .ai-insight-card.ai-insight-card--hero-split-reverse.ai-insight-card--title-only{
    grid-template-areas:
      ". media"
      "title media"
      ". media";
  }
}

[data-sp-embed] #ai-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] #ai-analysis .ai-insight-card__preview--window-tab::before{
  content: "";
  display: block !important;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  flex: 0 0 36px !important;
  height: 36px !important;
  width: 100%;
  box-sizing: border-box;
  border: none !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 14px 14px 0 0 !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;
  pointer-events: none;
}

[data-sp-embed] #ai-analysis .ma-preview-tabs{
  flex: 0 0 auto;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0.15rem;
  margin: 0;
  padding: 0 0.75rem;
  background: #fff;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  overflow-x: auto;
  scrollbar-width: none;
}

[data-sp-embed] #ai-analysis .ma-preview-tabs::-webkit-scrollbar{
  display: none;
}

[data-sp-embed] #ai-analysis .ma-preview-tabs > span{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 2.35rem;
  padding: 0.5rem 0.9rem 0.45rem;
  color: #475569;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.3;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}

[data-sp-embed] #ai-analysis .ma-preview-tabs > span.is-active{
  color: #2563eb;
  border-bottom-color: #2563eb;
}

[data-sp-embed] #ai-analysis .ai-insight-card--compact-media .ma-preview-tabs > span{
  padding-inline: 0.85rem;
  font-size: 0.8125rem;
}

[data-sp-embed] #ai-analysis .ma-preview-stage{
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: auto;
  height: auto;
  overflow: hidden;
  background: #fff;
}

[data-sp-embed] #ai-analysis .ai-insight-card__preview--window-tab .ma-preview-stage .ai-insight-card__media{
  position: relative;
  display: block;
  top: auto;
  left: 50%;
  width: calc(100% / (1 - (2 * var(--side-crop, 0.04))) * var(--media-zoom, 1));
  max-width: none;
  height: auto;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  object-fit: contain;
  object-position: top center;
  transform: translateX(-50%) !important;
}

/* Industries: keep card look, shimmer until image is decoded, then fade in */
[data-sp-embed].js .band-industries .feature-card__visual{
  position: relative;
}

[data-sp-embed].js .band-industries .feature-card__visual::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(
      110deg,
      rgba(226, 232, 240, 0) 0%,
      rgba(255, 255, 255, 0.7) 45%,
      rgba(226, 232, 240, 0) 90%
    );
  background-size: 220% 100%;
  animation: industry-media-shimmer 1.15s ease-in-out infinite;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.28s ease;
}

[data-sp-embed].js .band-industries .feature-card__visual:has(img.sp-media-fade:not(.is-media-ready))::after, [data-sp-embed].js .band-industries .feature-card__visual:not(.is-media-ready):has(img)::after{
  opacity: 1;
}

@keyframes industry-media-shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-sp-embed].js .band-industries .feature-card__visual::after{
    animation: none;
    background: rgba(241, 245, 249, 0.65);
  }
}

/* 顧客管理動画: 信号機ウィンドウ枠は重ねず、動画の上に置く */
[data-sp-embed] #cdp-customer .ai-insight-card__preview--side-crop{
  position: relative;
  overflow: hidden;
}

[data-sp-embed] #cdp-customer .ai-insight-card__preview--side-crop::before{
  content: "";
  display: block !important;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  z-index: auto;
  flex: 0 0 36px !important;
  height: 36px !important;
  width: 100%;
  box-sizing: border-box;
  border: none !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 14px 14px 0 0 !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;
  pointer-events: none;
}

/* 顧客管理動画のみ: 縦は切らず、左右の黒帯だけクロップ。他セクションは変えない */
[data-sp-embed] #cdp-customer .ai-insight-card__preview--side-crop, [data-sp-embed] #cdp-customer .ai-insight-card__preview--side-crop.ai-insight-card__preview:has(video), [data-sp-embed] #cdp-customer .ai-insight-card__preview--side-crop.ai-insight-card__preview:has(.ai-insight-card__media){
  --side-crop: 0.04;
  --media-zoom: 1;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  aspect-ratio: auto !important;
  height: auto !important;
  min-width: 0;
  min-height: 0 !important;
  overflow: hidden;
  background: #fff !important;
}

[data-sp-embed] #cdp-customer .ai-insight-card__preview--side-crop .ai-insight-card__media, [data-sp-embed] #cdp-customer .ai-insight-card__preview--side-crop video{
  position: relative;
  display: block;
  flex: 0 0 auto;
  left: 50%;
  width: calc(100% / (1 - (2 * var(--side-crop))) * var(--media-zoom)) !important;
  max-width: none !important;
  min-width: 0;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: cover !important;
  object-position: center center;
  transform: translateX(-50%) !important;
}

/* PC: この動画だけ列を広げ、高さは 16:9 のまま伸びる */
@media (min-width: 900px) {
  [data-sp-embed] #cdp-customer.ai-insight-card--hero-split{
    grid-template-columns: minmax(0, 3.9fr) minmax(0, 1fr);
    column-gap: clamp(12px, 1.6vw, 24px);
  }

  [data-sp-embed] #cdp-customer > .hero-split-media{
    align-self: start;
    width: 100%;
    height: auto;
  }
}

/* モバイル: この動画だけ横を少し広げる（画面端までは出さない） */
@media (max-width: 760px) {
  [data-sp-embed] #management .showcase-capabilities{
    overflow-x: visible;
  }

  [data-sp-embed] #cdp-customer > .hero-split-media{
    width: calc(100% + 1.2rem);
    max-width: none;
    margin-inline: -0.6rem;
  }
}

@media (max-width: 480px) {
  [data-sp-embed] #cdp-customer > .hero-split-media{
    width: calc(100% + 0.9rem);
    margin-inline: -0.45rem;
  }
}

/* Industries: number badge + title on one row, then image, then body */
[data-sp-embed] #industries .industry-grid .feature-card .card-top{
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 0;
}

[data-sp-embed] #industries .industry-grid .feature-card .card-top em{
  flex: 0 0 auto;
}

[data-sp-embed] #industries .industry-grid .feature-card .card-top h3{
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: clamp(1rem, 0.88rem + 0.4vw, 1.2rem);
  line-height: 1.35;
  letter-spacing: 0.02em;
  word-break: normal;
  overflow-wrap: anywhere;
  line-break: auto;
}

@media (min-width: 1041px) {
  [data-sp-embed] #industries .industry-grid .feature-card .card-top{
    padding: 18px 18px 0;
    gap: 12px;
  }

  [data-sp-embed] #industries .industry-grid .feature-card .card-top h3{
    font-size: clamp(1.05rem, 0.9rem + 0.35vw, 1.22rem);
  }

  [data-sp-embed] #industries .industry-grid .feature-card .card-copy{
    padding: 14px 18px 20px;
  }
}

@media (min-width: 761px) and (max-width: 1040px) {
  [data-sp-embed] #industries .industry-grid .feature-card .card-top{
    padding: 14px 14px 0;
    gap: 10px;
  }

  [data-sp-embed] #industries .industry-grid .feature-card .card-top h3{
    font-size: clamp(0.92rem, 0.8rem + 0.4vw, 1.08rem);
  }
}

@media (max-width: 760px) {
  [data-sp-embed] #industries .industry-grid .feature-card .card-top{
    padding: 14px 16px 0;
    gap: 12px;
    align-items: center;
  }

  [data-sp-embed] #industries .industry-grid .feature-card .card-top em{
    min-width: 36px;
    height: 36px;
    font-size: 12px;
  }

  [data-sp-embed] #industries .industry-grid .feature-card .card-top h3{
    font-size: clamp(1rem, 3.6vw, 1.125rem);
    line-height: 1.4;
  }

  [data-sp-embed] #industries .industry-grid .feature-card .card-copy{
    padding: 12px 16px 18px;
  }
}

[data-sp-embed][lang="en"] #industries .industry-grid .feature-card .card-top, [data-sp-embed][lang="th"] #industries .industry-grid .feature-card .card-top{
  min-height: 3.35rem;
  align-items: center;
}

[data-sp-embed][lang="en"] #industries .industry-grid .feature-card .card-top h3{
  font-size: clamp(0.95rem, 0.82rem + 0.28vw, 1.08rem);
  line-height: 1.3;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}

[data-sp-embed][lang="th"] #industries .industry-grid .feature-card .card-top h3{
  font-size: clamp(0.9rem, 0.78rem + 0.28vw, 1.05rem);
  line-height: 1.4;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-break: anywhere;
}

@media (min-width: 761px) and (max-width: 1040px) {
  [data-sp-embed][lang="en"] #industries .industry-grid .feature-card .card-top h3{
    font-size: clamp(0.82rem, 0.72rem + 0.35vw, 0.95rem);
  }

  [data-sp-embed][lang="th"] #industries .industry-grid .feature-card .card-top h3{
    font-size: clamp(0.8rem, 0.7rem + 0.35vw, 0.92rem);
  }
}

@media (max-width: 760px) {
  [data-sp-embed][lang="en"] #industries .industry-grid .feature-card .card-top, [data-sp-embed][lang="th"] #industries .industry-grid .feature-card .card-top{
    min-height: 0;
  }

  [data-sp-embed][lang="en"] #industries .industry-grid .feature-card .card-top h3, [data-sp-embed][lang="th"] #industries .industry-grid .feature-card .card-top h3{
    font-size: clamp(1rem, 3.4vw, 1.12rem);
  }
}

/* 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), [data-sp-embed] .band-ai .showcase--ai-full > .showcase-capabilities.ai-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: 0.72rem 1.05rem 0.82rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #64748b;
  font-size: clamp(0.8rem, 0.16vw + 0.76rem, 0.9rem);
  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: 0.28rem;
  height: 2px;
  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] a[data-sp-jump], [data-sp-embed] .section-jump-bar__item{
  touch-action: manipulation;
}

@media (prefers-reduced-motion: reduce), (prefers-reduced-transparency: reduce) {
  [data-sp-embed] .section-jump-bar.is-pinned{
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: #f8f9fa;
  }
}

[data-sp-embed] #management .showcase-copy .showcase-subtitle, [data-sp-embed] #analysis .showcase-copy .showcase-subtitle, [data-sp-embed] #ai-analysis .showcase-copy .showcase-subtitle, [data-sp-embed] #marketing .showcase-copy .showcase-subtitle{
  color: #4b5563;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.65;
  font-size: clamp(1.28rem, 1rem + 0.85vw, 1.85rem);
}

/* Mobile / stacked layout: hide section subtitles under Management / Analysis / AI / Marketing */
@media (max-width: 899px) {
  [data-sp-embed] #management .showcase-copy .showcase-subtitle, [data-sp-embed] #analysis .showcase-copy .showcase-subtitle, [data-sp-embed] #ai-analysis .showcase-copy .showcase-subtitle, [data-sp-embed] #marketing .showcase-copy .showcase-subtitle{
    display: none;
  }
}

[data-sp-embed] #management .showcase-copy .showcase-subtitle .text-accent-em, [data-sp-embed] #analysis .showcase-copy .showcase-subtitle .text-accent-em, [data-sp-embed] #ai-analysis .showcase-copy .showcase-subtitle .text-accent-em, [data-sp-embed] #marketing .showcase-copy .showcase-subtitle .text-accent-em, [data-sp-embed] #management .showcase-copy .showcase-subtitle .hero-subtitle-char, [data-sp-embed] #analysis .showcase-copy .showcase-subtitle .hero-subtitle-char, [data-sp-embed] #ai-analysis .showcase-copy .showcase-subtitle .hero-subtitle-char, [data-sp-embed] #marketing .showcase-copy .showcase-subtitle .hero-subtitle-char{
  color: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}

[data-sp-embed] #features .feature-nav-card__desc{
  color: #4b5563;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.65;
}

[data-sp-embed] #features .feature-nav-card__desc .text-accent-em{
  color: inherit;
  font-weight: inherit;
}

[data-sp-embed] #management .ai-insight-card__body p, [data-sp-embed] #analysis .ai-insight-card__body p, [data-sp-embed] #ai-analysis .ai-insight-card__body p, [data-sp-embed] #marketing .ai-insight-card__body p{
  color: #4b5563;
  font-weight: 500;
  letter-spacing: 0.04em;
}

[data-sp-embed] #management .ai-insight-card__body p .text-accent-em, [data-sp-embed] #analysis .ai-insight-card__body p .text-accent-em, [data-sp-embed] #ai-analysis .ai-insight-card__body p .text-accent-em, [data-sp-embed] #marketing .ai-insight-card__body p .text-accent-em{
  color: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}

/* ===== MA / CDP problem stats ===== */
[data-sp-embed] .ma-problem{
  background: #fff;
  padding-block: clamp(4.5rem, 9vw, 7.5rem);
}

[data-sp-embed] .ma-problem__grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.75rem, 6vw, 4.5rem);
  align-items: start;
  width: min(1120px, 100%);
  margin: 0 auto;
}

[data-sp-embed] .ma-problem__stat{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

[data-sp-embed] .ma-problem__num{
  display: block;
  margin: 0;
  font-family: Inter, "Noto Sans JP", "Noto Sans Thai", sans-serif;
  font-size: 3.75rem;
  font-weight: 900;
  letter-spacing: -0.07em;
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

[data-sp-embed] .ma-problem__stat--switch .ma-problem__num{
  background-image: linear-gradient(to right, #ef4444, #e11d48);
}

[data-sp-embed] .ma-problem__stat--stress .ma-problem__num{
  background-image: linear-gradient(to right, #f59e0b, #ea580c);
}

[data-sp-embed] .ma-problem__stat--personalize .ma-problem__num{
  background-image: linear-gradient(to right, #9333ea, #4f46e5);
}

[data-sp-embed] .ma-problem__title{
  margin: 1.05rem 0 0;
  max-width: 16.5em;
  font-size: clamp(1.02rem, 0.2vw + 0.98rem, 1.18rem);
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: -0.03em;
  color: #0f172a;
}

[data-sp-embed] .ma-problem__source{
  margin: 0.45rem 0 0;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.4;
  color: #94a3b8;
}

[data-sp-embed].js .ma-problem__stat.reveal{
  opacity: 0;
  transform: translate3d(0, 40px, 0);
  transition:
    opacity 820ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 820ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
  pointer-events: none;
}

[data-sp-embed].js .ma-problem__stat.reveal.visible{
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

[data-sp-embed].js .ma-problem__num.is-counting{
  animation: ma-problem-num-pop 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes ma-problem-num-pop {
  0% {
    transform: translateY(0.4em) scale(0.7);
  }
  62% {
    transform: translateY(0) scale(1.08);
  }
  100% {
    transform: none;
  }
}

@media (min-width: 768px) {
  [data-sp-embed] .ma-problem__grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.5rem, 3vw, 3rem);
  }

  [data-sp-embed] .ma-problem__num{
    font-size: 4.5rem;
  }
}

@media (min-width: 1024px) {
  [data-sp-embed] .ma-problem__num{
    font-size: 6rem;
  }
}

/* Mobile / portrait: more white space above & below stats only */
@media (max-width: 760px), (orientation: portrait) and (max-width: 980px) {
  [data-sp-embed] #ma-problem.ma-problem{
    overflow: hidden;
    padding-block: clamp(5.75rem, 12vh, 8rem);
  }

  [data-sp-embed] #ma-problem .ma-problem__grid{
    gap: clamp(3.25rem, 7vh, 4.75rem);
  }

  [data-sp-embed] .hero-float--analysis{
    bottom: 3.25rem !important;
    left: 0 !important;
  }
}

@media (max-width: 480px) {
  [data-sp-embed] #ma-problem.ma-problem{
    padding-block: clamp(6.25rem, 14vh, 8.5rem);
  }
}


/* ===== Data approach: analysis → DM demo (ported from SAKINA CMS) ===== */
[data-sp-embed] #data-approach .create-demo__more{
  margin: 1.75rem 0 0.75rem;
  text-align: center;
}

[data-sp-embed] #data-approach .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] #data-approach .create-demo__more a:hover{
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

[data-sp-embed] #data-approach .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 #data-approach .reveal-media:not(.visible) .create-demo__window{
  opacity: 0;
  transform: translateY(1.25rem) scale(0.975);
}

[data-sp-embed].js #data-approach .reveal-media.visible .create-demo__window{
  animation: create-demo-in 0.78s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

[data-sp-embed] #data-approach .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] #data-approach .create-demo__chrome-left{
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.95rem;
  color: #111827;
}

[data-sp-embed] #data-approach .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] #data-approach .create-demo__chrome-actions{
  display: inline-flex;
  gap: 0.45rem;
}

[data-sp-embed] #data-approach .create-demo__ghost, [data-sp-embed] #data-approach .create-demo__save{
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 0.38rem 0.8rem;
}

[data-sp-embed] #data-approach .create-demo__ghost{
  color: #64748b;
  background: #f1f5f9;
}

[data-sp-embed] #data-approach .create-demo__save{
  color: #fff;
  background: #111827;
}

[data-sp-embed] #data-approach .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] #data-approach .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] #data-approach .create-demo__field{
  display: grid;
  gap: 0.28rem;
  margin: 0;
}

[data-sp-embed] #data-approach .create-demo__field > span{
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #94a3b8;
  text-transform: uppercase;
}

[data-sp-embed] #data-approach .create-demo__field strong, [data-sp-embed] #data-approach .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] #data-approach .create-demo__field--area p{
  min-height: 4.6rem;
}

[data-sp-embed] #data-approach .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] #data-approach .create-demo__insight.is-active{
  display: grid;
}

[data-sp-embed] #data-approach .create-demo__insight-label{
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #9d174d;
}

[data-sp-embed] #data-approach .create-demo__person{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.65rem;
  align-items: center;
}

[data-sp-embed] #data-approach .create-demo__person strong{
  display: block;
  font-size: 0.86rem;
  color: #0f172a;
}

[data-sp-embed] #data-approach .create-demo__person p{
  margin: 0.15rem 0 0;
  font-size: 0.76rem;
  line-height: 1.45;
  color: #475569;
}

[data-sp-embed] #data-approach .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] #data-approach .create-demo__face--b{ background: #f59e0b;
}

[data-sp-embed] #data-approach .create-demo__face--c{ background: #8b5cf6;
}

[data-sp-embed] #data-approach .create-demo__face--d{ background: #0ea5e9;
}

[data-sp-embed] #data-approach .create-demo__faces{
  display: flex;
  padding-left: 0.15rem;
}

[data-sp-embed] #data-approach .create-demo__faces .create-demo__face{
  margin-left: -0.45rem;
}

[data-sp-embed] #data-approach .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] #data-approach .create-demo__fit strong{
  font-size: 1.15rem;
  color: #be185d;
}

[data-sp-embed] #data-approach .create-demo__meters{
  display: grid;
  gap: 0.42rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-sp-embed] #data-approach .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] #data-approach .create-demo__bar{
  display: block;
  height: 0.38rem;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}

[data-sp-embed] #data-approach .create-demo__bar i{
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #fb7185, #e11d48);
}

[data-sp-embed] #data-approach .create-demo__meters b{
  text-align: right;
  color: #be185d;
}

[data-sp-embed] #data-approach .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] #data-approach .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] #data-approach .create-demo__stats span{
  font-size: 0.66rem;
  font-weight: 700;
  color: #64748b;
}

[data-sp-embed] #data-approach .create-demo__stats strong{
  font-size: 0.95rem;
  color: #0f172a;
}

[data-sp-embed] #data-approach .create-demo__insight--line{
  background: #eef2ff;
  border-color: #818cf8;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

[data-sp-embed] #data-approach .create-demo__insight--line .create-demo__insight-label, [data-sp-embed] #data-approach .create-demo__insight--instagram .create-demo__insight-label, [data-sp-embed] #data-approach .create-demo__insight--facebook .create-demo__insight-label{
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

[data-sp-embed] #data-approach .create-demo__insight--line .create-demo__insight-label::before, [data-sp-embed] #data-approach .create-demo__insight--instagram .create-demo__insight-label::before, [data-sp-embed] #data-approach .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] #data-approach .create-demo__insight--line .create-demo__insight-label{
  color: #4338ca;
}

[data-sp-embed] #data-approach .create-demo__insight--line .create-demo__person strong{
  color: #1e1b4b;
}

[data-sp-embed] #data-approach .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] #data-approach .create-demo__id-person{
  width: 1.4rem;
  height: 1.4rem;
}

[data-sp-embed] #data-approach .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] #data-approach .create-demo__id-badge{
  position: absolute;
  right: -0.32rem;
  bottom: -0.18rem;
  display: grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 999px;
  border: 2px solid #eef2ff;
  background: #fff;
  font-size: 0.62rem;
  line-height: 1;
}

[data-sp-embed] #data-approach .create-demo__insight--line .create-demo__person p{
  margin-top: 0.1rem;
  font-size: 0.66rem;
  font-weight: 700;
  color: #6366f1;
}

[data-sp-embed] #data-approach .create-demo__phase{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-sp-embed] #data-approach .create-demo__phase li{
  padding: 0.28rem 0.1rem;
  border-radius: 999px;
  background: #e0e7ff;
  font-size: 0.6rem;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  color: #6366f1;
}

[data-sp-embed] #data-approach .create-demo__phase li.is-now{
  background: #4f46e5;
  box-shadow: 0 4px 10px rgba(79, 70, 229, 0.3);
  color: #fff;
}

[data-sp-embed] #data-approach .create-demo__phase li.is-now ~ li{
  background: #fff;
  color: #a5b4fc;
}

[data-sp-embed] #data-approach .create-demo__tags{
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-sp-embed] #data-approach .create-demo__tags li{
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(99, 102, 241, 0.3);
  font-size: 0.62rem;
  font-weight: 700;
  white-space: nowrap;
  color: #4338ca;
}

[data-sp-embed] #data-approach .create-demo__phase li small{
  display: block;
  margin-top: 0.05rem;
  font-size: 0.5rem;
  font-weight: 700;
  white-space: normal;
  opacity: 0.9;
}

[data-sp-embed] #data-approach .create-demo__phase li.is-now{
  border-radius: 0.6rem;
}

[data-sp-embed] #data-approach .create-demo__next{
  display: grid;
  gap: 0.2rem;
  padding: 0.5rem 0.6rem;
  border-radius: 0.6rem;
  background: #ecfdf5;
  border: 1px solid #6ee7b7;
}

[data-sp-embed] #data-approach .create-demo__next b{
  justify-self: start;
  padding: 0.08rem 0.45rem;
  border-radius: 999px;
  background: #06c755;
  font-size: 0.6rem;
  letter-spacing: 0.04em;
  color: #fff;
}

[data-sp-embed] #data-approach .create-demo__next p{
  margin: 0;
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.45;
  color: #065f46;
}

[data-sp-embed] #data-approach .create-demo__id svg{
  display: block;
  fill: currentColor;
}

[data-sp-embed] #data-approach .create-demo__reads{
  display: grid;
  gap: 0.4rem;
  margin: 0;
}

[data-sp-embed] #data-approach .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] #data-approach .create-demo__reads dt, [data-sp-embed] #data-approach .create-demo__reads dd{
  margin: 0;
}

[data-sp-embed] #data-approach .create-demo__reads dt{
  font-size: 0.68rem;
  font-weight: 800;
  color: #4f46e5;
}

[data-sp-embed] #data-approach .create-demo__reads dd{
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.35;
  color: #1e1b4b;
  text-align: right;
}

[data-sp-embed] #data-approach .create-demo__insight--instagram{
  background: #fff1f2;
  border-color: #fb7185;
  box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.1);
}

[data-sp-embed] #data-approach .create-demo__insight--instagram .create-demo__insight-label{
  color: #be123c;
}

[data-sp-embed] #data-approach .create-demo__insight--instagram .create-demo__face{
  border-color: #fff1f2;
}

[data-sp-embed] #data-approach .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] #data-approach .create-demo__eng-total{
  display: grid;
  gap: 0.05rem;
}

[data-sp-embed] #data-approach .create-demo__eng-total span{
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #9f1239;
}

[data-sp-embed] #data-approach .create-demo__eng-total strong{
  font-size: 1.35rem;
  line-height: 1.1;
  color: #4c0519;
}

[data-sp-embed] #data-approach .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] #data-approach .create-demo__spark{
  display: flex;
  align-items: flex-end;
  gap: 0.22rem;
  height: 2.6rem;
}

[data-sp-embed] #data-approach .create-demo__spark i{
  flex: 1;
  border-radius: 0.2rem 0.2rem 0.1rem 0.1rem;
  background: #fecdd3;
}

[data-sp-embed] #data-approach .create-demo__spark i.is-peak{
  background: linear-gradient(180deg, #f43f5e, #c026d3);
}

[data-sp-embed] #data-approach .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] #data-approach .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] #data-approach .create-demo__peaks span{
  font-size: 0.62rem;
  font-weight: 800;
  color: #be123c;
}

[data-sp-embed] #data-approach .create-demo__peaks strong{
  font-size: 0.9rem;
  color: #4c0519;
}

[data-sp-embed] #data-approach .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] #data-approach .create-demo__topusers .create-demo__face{
  width: 1.75rem;
  height: 1.75rem;
  font-size: 0.66rem;
}

[data-sp-embed] #data-approach .create-demo__face--more{
  background: #4c0519;
  font-size: 0.6rem;
}

[data-sp-embed] #data-approach .create-demo__insight--facebook{
  background: #f0f9ff;
  border-color: #38bdf8;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}

[data-sp-embed] #data-approach .create-demo__insight--facebook .create-demo__insight-label{
  color: #0369a1;
}

[data-sp-embed] #data-approach .create-demo__insight--facebook .create-demo__stats li{
  border-color: rgba(14, 165, 233, 0.25);
}

[data-sp-embed] #data-approach .create-demo__insight--facebook .create-demo__stats span{
  color: #0284c7;
}

[data-sp-embed] #data-approach .create-demo__insight--facebook .create-demo__stats strong{
  color: #0c4a6e;
}

[data-sp-embed] #data-approach .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] #data-approach .create-demo__funnel li{
  display: contents;
}

[data-sp-embed] #data-approach .create-demo__funnel li:not(.is-drop)::after{
  content: "";
}

[data-sp-embed] #data-approach .create-demo__funnel .create-demo__bar{
  background: #e0f2fe;
}

[data-sp-embed] #data-approach .create-demo__funnel .create-demo__bar i{
  background: linear-gradient(90deg, #38bdf8, #0284c7);
}

[data-sp-embed] #data-approach .create-demo__funnel b{
  text-align: right;
  color: #0c4a6e;
}

[data-sp-embed] #data-approach .create-demo__funnel em{
  min-width: 0;
  font-style: normal;
}

[data-sp-embed] #data-approach .create-demo__funnel li.is-drop{
  color: #b91c1c;
}

[data-sp-embed] #data-approach .create-demo__funnel li.is-drop .create-demo__bar i{
  background: linear-gradient(90deg, #fb923c, #ef4444);
}

[data-sp-embed] #data-approach .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] #data-approach .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] #data-approach .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] #data-approach .create-demo__alert strong{
  font-size: 0.78rem;
  line-height: 1.4;
  color: #9a3412;
}

[data-sp-embed] #data-approach .create-demo__alert p{
  margin: 0;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.45;
  color: #7c2d12;
}

[data-sp-embed] #data-approach .create-demo__select{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
}

[data-sp-embed] #data-approach .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] #data-approach .create-demo__detail-tail{
  white-space: nowrap;
}

[data-sp-embed] #data-approach .create-demo__url{
  font-size: 0.78rem !important;
  color: #475569 !important;
  word-break: break-all;
}

[data-sp-embed] #data-approach .create-demo__copy-short{
  display: none;
}

[data-sp-embed] #data-approach .create-demo__copy-full{
  display: inline;
}

[data-sp-embed] #data-approach .create-demo__status{
  width: fit-content;
  color: #15803d !important;
  background: #ecfdf3 !important;
  border-color: rgba(34, 197, 94, 0.28) !important;
}

[data-sp-embed] #data-approach .create-demo__chips{
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

[data-sp-embed] #data-approach .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 #data-approach .reveal-media:not(.visible) .create-demo__field, [data-sp-embed].js #data-approach .reveal-media:not(.visible) .create-demo__chips li{
  opacity: 0;
  transform: translateY(10px);
}

[data-sp-embed].js #data-approach .reveal-media.visible .create-demo__field{
  animation: create-field-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  animation-delay: calc(180ms + var(--i, 0) * 90ms);
}

[data-sp-embed].js #data-approach .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 #data-approach .reveal-media.visible .create-demo__chips li:nth-child(1){ animation-delay: 0.72s;
}

[data-sp-embed].js #data-approach .reveal-media.visible .create-demo__chips li:nth-child(2){ animation-delay: 0.84s;
}

[data-sp-embed].js #data-approach .reveal-media.visible .create-demo__chips li:nth-child(3){ animation-delay: 0.96s;
}

[data-sp-embed].js #data-approach .reveal-media.visible .create-demo__chips li:nth-child(4){ animation-delay: 1.08s;
}

[data-sp-embed] #data-approach .create-demo__title-box{
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 2.7rem;
}

[data-sp-embed] #data-approach .create-demo__typing{
  display: inline;
  white-space: pre-wrap;
}

[data-sp-embed] #data-approach .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;
}

[data-sp-embed] #data-approach .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] #data-approach .create-demo__preview-head{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  margin-bottom: 0.7rem;
}

[data-sp-embed] #data-approach .create-demo__preview-head > strong{
  font-size: 0.82rem;
  color: #334155;
}

[data-sp-embed] #data-approach .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] #data-approach .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;
  display: inline-flex;
  align-items: center;
  gap: 0;
  white-space: nowrap;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease, gap 0.25s ease;
}

[data-sp-embed] #data-approach .create-demo__tab-send{
  display: inline-flex;
  width: 0;
  margin-left: 0;
  overflow: hidden;
  opacity: 0;
  flex: none;
}

[data-sp-embed] #data-approach .create-demo__tab-send svg{
  width: 0.78rem;
  height: 0.78rem;
  fill: currentColor;
  flex: none;
}

[data-sp-embed] #data-approach .create-demo__tab.is-active .create-demo__tab-send{
  width: 0.78rem;
  margin-left: 0.28rem;
  opacity: 1;
  overflow: visible;
  animation: create-tab-send 0.62s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes create-tab-send {
  0% {
    opacity: 0;
    transform: translate(-7px, 4px) rotate(-22deg) scale(0.45);
  }
  58% {
    opacity: 1;
    transform: translate(2px, -3px) rotate(10deg) scale(1.12);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

[data-sp-embed] #data-approach .create-demo__tab.is-active{
  color: #fff;
  background: #111827;
  transform: translateY(-1px);
}

[data-sp-embed] #data-approach .create-demo__tab[data-create-tab="line"].is-active{
  background: var(--create-line);
}

[data-sp-embed] #data-approach .create-demo__tab[data-create-tab="instagram"].is-active{
  background: linear-gradient(120deg, #f58529, #dd2a7b 55%, #8134af);
}

[data-sp-embed] #data-approach .create-demo__tab[data-create-tab="facebook"].is-active{
  background: #111827;
}

[data-sp-embed] #data-approach .create-demo__stage{
  position: relative;
  min-height: 18.5rem;
  display: grid;
  place-items: center;
}

[data-sp-embed] #data-approach .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] #data-approach .create-demo__panel.is-active{
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

[data-sp-embed] #data-approach .create-line, [data-sp-embed] #data-approach .create-ig, [data-sp-embed] #data-approach .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] #data-approach .create-line{
  background: #8cabd8;
  padding: 0 0 0.7rem;
}

[data-sp-embed] #data-approach .create-line__head{
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.75rem;
  background: #fff;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

[data-sp-embed] #data-approach .create-line__back{
  font-size: 1.1rem;
  line-height: 1;
  color: #111827;
}

[data-sp-embed] #data-approach .create-line__head strong{
  font-size: 0.78rem;
  color: #111827;
}

[data-sp-embed] #data-approach .create-line__date{
  display: table;
  margin: 0.45rem auto 0.4rem;
  padding: 0.16rem 0.6rem;
  border-radius: 999px;
  background: rgba(29, 78, 216, 0.28);
  font-size: 0.6rem;
  font-weight: 700;
  color: #fff;
}

[data-sp-embed] #data-approach .create-line__msg{
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr) auto;
  align-items: end;
  gap: 0.3rem;
  padding: 0 0.5rem;
}

[data-sp-embed] #data-approach .create-line__avatar{
  align-self: start;
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: #06c755;
  font-size: 0.7rem;
  font-weight: 900;
  color: #fff;
}

[data-sp-embed] #data-approach .create-line__bubble{
  overflow: hidden;
  border-radius: 0.3rem 0.9rem 0.9rem 0.9rem;
  background: #fff;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12);
}

[data-sp-embed] #data-approach .create-line__photo{
  margin: 0;
  aspect-ratio: 1024 / 535;
  overflow: hidden;
  background: #cfe6e6;
}

[data-sp-embed] #data-approach .create-line__photo img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

[data-sp-embed] #data-approach .create-line__body{
  display: grid;
  gap: 0.28rem;
  padding: 0.55rem 0.7rem 0.65rem;
}

[data-sp-embed] #data-approach .create-line__badge{
  justify-self: start;
  padding: 0.16rem 0.5rem;
  border-radius: 999px;
  background: #e0f2f1;
  font-size: 0.58rem;
  font-weight: 800;
  color: #0f766e;
}

[data-sp-embed] #data-approach .create-line__title{
  margin: 0;
  font-size: 0.84rem;
  font-weight: 800;
  line-height: 1.35;
  color: #0f2b4c;
}

[data-sp-embed] #data-approach .create-line__text{
  margin: 0;
  font-size: 0.68rem;
  line-height: 1.45;
  color: #475569;
}

[data-sp-embed] #data-approach .create-line__btn{
  display: block;
  margin-top: 0.1rem;
  padding: 0.42rem 0.7rem;
  border-radius: 999px;
  background: var(--create-line);
  text-align: center;
  font-size: 0.74rem;
  font-weight: 800;
  color: #fff;
}

[data-sp-embed] #data-approach .create-line__time{
  font-size: 0.55rem;
  color: rgba(255, 255, 255, 0.92);
}

[data-sp-embed] #data-approach .create-ig__head, [data-sp-embed] #data-approach .create-fb__head{
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 0.75rem 0.55rem;
}

[data-sp-embed] #data-approach .create-ig__avatar{
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #f58529, #dd2a7b 55%, #8134af);
}

[data-sp-embed] #data-approach .create-ig__head strong, [data-sp-embed] #data-approach .create-fb__head strong{
  display: block;
  font-size: 0.78rem;
  color: #111827;
}

[data-sp-embed] #data-approach .create-ig__head span, [data-sp-embed] #data-approach .create-fb__head span{
  display: block;
  font-size: 0.66rem;
  color: #94a3b8;
}

[data-sp-embed] #data-approach .create-ig__media, [data-sp-embed] #data-approach .create-fb__media{
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #f1f5f9;
}

[data-sp-embed] #data-approach .create-ig__media img, [data-sp-embed] #data-approach .create-fb__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

[data-sp-embed] #data-approach .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] #data-approach .create-ig__caption, [data-sp-embed] #data-approach .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] #data-approach .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] #data-approach .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] #data-approach .create-fb--story{
  position: relative;
  background: #f8fafc;
  min-height: 22rem;
}

[data-sp-embed] #data-approach .create-fb__article{
  display: flex;
  flex-direction: column;
  min-height: 22rem;
  box-sizing: border-box;
  padding: 0.15rem 0 0.75rem;
}

[data-sp-embed] #data-approach .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] #data-approach .create-fb__mast strong{
  font-size: 0.72rem;
  letter-spacing: 0.01em;
  color: #1e293b;
}

[data-sp-embed] #data-approach .create-fb__mast span{
  font-size: 0.62rem;
  color: #94a3b8;
}

[data-sp-embed] #data-approach .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] #data-approach .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] #data-approach .create-fb__byline{
  margin: 0;
  padding: 0 0.75rem 0.15rem;
  font-size: 0.62rem;
  color: #94a3b8;
}

[data-sp-embed] #data-approach .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] #data-approach .create-fb__lines{
  display: grid;
  gap: 0.32rem;
  margin-top: auto;
  padding: 0.45rem 0.75rem 0;
}

[data-sp-embed] #data-approach .create-fb__lines span{
  display: block;
  height: 0.38rem;
  border-radius: 999px;
  background: #e2e8f0;
}

[data-sp-embed] #data-approach .create-fb__lines .is-short{
  width: 62%;
}

[data-sp-embed] #data-approach .create-fb__scrim, [data-sp-embed] #data-approach .create-fb__popup{
  position: absolute;
  pointer-events: none;
}

[data-sp-embed] #data-approach .create-fb__scrim{
  inset: 0;
  background: rgba(15, 23, 42, 0.34);
  opacity: 0;
}

[data-sp-embed] #data-approach .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] #data-approach .create-fb__popup-photo{
  margin: 0 -0.75rem 0.55rem;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #e2e8f0;
}

[data-sp-embed] #data-approach .create-fb__popup-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

[data-sp-embed] #data-approach .create-fb__popup-kicker{
  margin: 0;
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: #0058a3;
}

[data-sp-embed] #data-approach .create-fb__popup strong{
  display: block;
  margin-top: 0.12rem;
  font-size: 0.78rem;
  color: #0f172a;
}

[data-sp-embed] #data-approach .create-fb__popup-note{
  margin: 0.2rem 0 0;
  font-size: 0.66rem;
  line-height: 1.45;
  color: #475569;
}

[data-sp-embed] #data-approach .create-fb__popup-survey{
  margin: 0.4rem 0 0;
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.4;
  color: #0f172a;
}

[data-sp-embed] #data-approach .create-fb__popup-survey mark{
  padding: 0 0.15rem;
  background: linear-gradient(transparent 52%, #ffdb00 52%);
  color: inherit;
}

[data-sp-embed] #data-approach .create-fb__popup-cta{
  display: block;
  margin-top: 0.5rem;
  padding: 0.48rem 0.6rem;
  border-radius: 999px;
  background: #0058a3;
  box-shadow: 0 6px 14px rgba(0, 88, 163, 0.28);
  font-size: 0.7rem;
  font-weight: 800;
  color: #fff;
}

/* 公式HP preview: article list -> tap -> article page -> popup */
[data-sp-embed] #data-approach .create-fb__list{
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding-bottom: 0.75rem;
  background: #fff;
}

[data-sp-embed] #data-approach .create-fb__list-title{
  margin: 0;
  padding: 0.3rem 0.75rem 0;
  font-size: 0.8rem;
  font-weight: 800;
  color: #0f172a;
}

[data-sp-embed] #data-approach .create-fb__item{
  position: relative;
  display: grid;
  grid-template-columns: 4.2rem 1fr;
  gap: 0.6rem;
  align-items: center;
  margin: 0 0.65rem;
  padding: 0.45rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.7rem;
  background: #f8fafc;
}

[data-sp-embed] #data-approach .create-fb__thumb{
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 0.5rem;
  overflow: hidden;
  background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
}

[data-sp-embed] #data-approach .create-fb__thumb.is-food{
  background: linear-gradient(135deg, #fde68a, #f97316);
}

[data-sp-embed] #data-approach .create-fb__thumb.is-travel{
  background: linear-gradient(135deg, #bae6fd, #6366f1);
}

[data-sp-embed] #data-approach .create-fb__thumb img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

[data-sp-embed] #data-approach .create-fb__item small{
  display: block;
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #9a3412;
}

[data-sp-embed] #data-approach .create-fb__item strong{
  display: block;
  margin-top: 0.1rem;
  font-size: 0.74rem;
  line-height: 1.35;
  color: #0f172a;
}

[data-sp-embed] #data-approach .create-fb__tap{
  position: absolute;
  left: 84%;
  top: 50%;
  width: 2.6rem;
  height: 2.6rem;
  margin: -1.3rem 0 0 -1.3rem;
  border: 2px solid rgba(24, 119, 242, 0.75);
  border-radius: 50%;
  background: rgba(24, 119, 242, 0.28);
  opacity: 0;
  pointer-events: none;
}

[data-sp-embed] #data-approach .create-fb__scrim{
  z-index: 2;
}

[data-sp-embed] #data-approach .create-fb__popup{
  z-index: 3;
}

[data-sp-embed] #data-approach .create-fb__popup-badge{
  position: absolute;
  top: 0.5rem;
  left: 50%;
  z-index: 1;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  background: #1877f2;
  box-shadow: 0 6px 16px rgba(24, 119, 242, 0.35);
  font-size: 0.64rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  color: #fff;
  transform: translateX(-50%);
}

[data-sp-embed] #data-approach .create-demo__panel--facebook.is-active .create-fb__item.is-target{
  animation: create-fb-press 0.5s ease 0.9s both;
}

[data-sp-embed] #data-approach .create-demo__panel--facebook.is-active .create-fb__tap{
  animation: create-fb-tap 0.65s ease-out 0.85s both;
}

[data-sp-embed] #data-approach .create-demo__panel--facebook.is-active .create-fb__list{
  animation: create-fb-leave 0.45s ease 1.6s both;
}

[data-sp-embed] #data-approach .create-demo__panel--facebook.is-active .create-fb__article{
  animation: create-fb-enter 0.45s ease 1.6s both;
}

[data-sp-embed] #data-approach .create-demo__panel--facebook.is-active .create-fb__scrim{
  animation: create-fb-fade 0.4s ease 2.5s both;
}

[data-sp-embed] #data-approach .create-demo__panel--facebook.is-active .create-fb__popup{
  animation: create-fb-popin 0.55s cubic-bezier(0.16, 1, 0.3, 1) 2.6s both;
}

[data-sp-embed] #data-approach .create-demo__panel--facebook.is-active .create-fb__popup-badge{
  animation: create-fb-badge 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 3.05s both;
}


@keyframes create-fb-press {
  0%, 100% { background: #f8fafc; transform: scale(1); }
  40% { background: #dbeafe; transform: scale(0.97); }
}

@keyframes create-fb-tap {
  0% { opacity: 0; transform: scale(0.4); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.7); }
}

@keyframes create-fb-leave {
  to { opacity: 0; transform: translateX(-18%); visibility: hidden; }
}

@keyframes create-fb-enter {
  from { opacity: 0; transform: translateX(18%); }
  to { opacity: 1; transform: none; }
}

@keyframes create-fb-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes create-fb-popin {
  from { opacity: 0; transform: translateY(calc(-50% + 22px)) scale(0.9); }
  to { opacity: 1; transform: translateY(-50%) scale(1); }
}

@keyframes create-fb-badge {
  from { opacity: 0; transform: translateX(-50%) scale(0.6); }
  to { opacity: 1; transform: translateX(-50%) scale(1); }
}

[data-sp-embed] #data-approach .create-demo__story{
  display: grid;
  gap: 0.95rem;
  justify-items: start;
  max-width: 42rem;
}

[data-sp-embed] #data-approach .create-demo__story > p{
  margin: 0;
  font-size: clamp(0.98rem, 0.9rem + 0.35vw, 1.12rem);
  line-height: 1.7;
  color: #334155;
}

@media (min-width: 768px) and (max-width: 920px) {
  [data-sp-embed] #data-approach .create-demo__body{
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    min-height: 0;
  }

  [data-sp-embed] #data-approach .create-demo__editor{
    display: grid;
    padding: 0.85rem 0.85rem 1rem;
    gap: 0.7rem;
  }

  [data-sp-embed] #data-approach .create-demo__preview{
    padding: 0.75rem 0.7rem 0.9rem;
  }

  [data-sp-embed] #data-approach .create-demo__preview-head{
    gap: 0.4rem;
    margin-bottom: 0.55rem;
  }

  [data-sp-embed] #data-approach .create-demo__preview-head strong{
    font-size: 0.82rem;
  }

  [data-sp-embed] #data-approach .create-demo__tab{
    font-size: 0.7rem;
    padding: 0.32rem 0.5rem;
  }

  [data-sp-embed] #data-approach .create-demo__stage{
    min-height: 16rem;
  }

  [data-sp-embed] #data-approach .create-demo__panel{
    width: min(100%, 15.5rem);
  }

  [data-sp-embed] #data-approach .create-demo__chrome{
    padding: 0.7rem 0.9rem;
  }

  [data-sp-embed] #data-approach .create-demo__chrome strong{
    font-size: 0.9rem;
  }

  [data-sp-embed] #data-approach .create-demo__field > span{
    font-size: 0.78rem;
  }
}

@media (max-width: 767px) {
  [data-sp-embed] #data-approach .create-demo__body{
    grid-template-columns: 1fr;
    min-height: 0;
  }

  [data-sp-embed] #data-approach .create-demo__editor{
    display: none;
  }

  [data-sp-embed] #data-approach .create-demo__preview{
    padding: 0.75rem 0.7rem 0.9rem;
  }

  [data-sp-embed] #data-approach .create-demo__preview-head{
    gap: 0.4rem;
    margin-bottom: 0.55rem;
  }

  [data-sp-embed] #data-approach .create-demo__preview-head strong{
    font-size: 0.82rem;
  }

  [data-sp-embed] #data-approach .create-demo__tab{
    font-size: 0.7rem;
    padding: 0.32rem 0.5rem;
  }

  [data-sp-embed] #data-approach .create-demo__stage{
    min-height: 16rem;
    display: grid;
    place-items: start center;
    overflow: hidden;
  }

  [data-sp-embed] #data-approach .create-demo__panel, [data-sp-embed] #data-approach .create-demo__panel.is-active{
    width: min(100%, 16.5rem);
    transform: none;
    transition: none;
    justify-self: center;
    align-self: start;
  }

  [data-sp-embed] #data-approach .create-demo__chrome{
    padding: 0.6rem 0.8rem;
  }

  [data-sp-embed] #data-approach .create-demo__chrome strong{
    font-size: 0.88rem;
  }
}

@media (max-width: 640px) {
  [data-sp-embed] #data-approach .create-demo__chrome-actions{
    display: none;
  }

  [data-sp-embed] #data-approach .create-demo__panel, [data-sp-embed] #data-approach .create-demo__panel.is-active{
    width: min(100%, 16.5rem);
  }
}

[data-sp-embed] #data-approach .create-demo{
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  box-sizing: border-box;
}

[data-sp-embed] #data-approach .create-demo__story p{
  font-size: clamp(1.22rem, 1.05rem + 0.55vw, 1.48rem) !important;
  line-height: 1.95 !important;
}

@media (min-width: 861px) {
  [data-sp-embed] #data-approach .create-demo__story p{
    font-size: clamp(1.12rem, 0.98rem + 0.38vw, 1.28rem) !important;
    line-height: 1.95 !important;
  }
}

[data-sp-embed] #data-approach .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] #data-approach .create-demo__field > span{
  font-size: 0.72rem !important;
}

[data-sp-embed] #data-approach .create-demo__field strong, [data-sp-embed] #data-approach .create-demo__field p, [data-sp-embed] #data-approach .create-demo__title-box, [data-sp-embed] #data-approach .create-demo__url{
  font-size: clamp(0.82rem, 0.78rem + 0.12vw, 0.9rem) !important;
}

[data-sp-embed] #data-approach .create-demo__chrome strong, [data-sp-embed] #data-approach .create-demo__preview-head{
  font-size: 1.02rem !important;
}

@media (min-width: 1900px) {
  [data-sp-embed] #data-approach .create-demo__story .ai-insight-tag{
    font-size: 1.12rem !important;
    padding: 0.55rem 1.05rem !important;
    line-height: 1.4 !important;
  }
}

[data-sp-embed] #data-approach .create-demo{
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  box-sizing: border-box;
}

@media (max-width: 1024px) {
  [data-sp-embed] #data-approach .create-demo__story{
    text-align: center !important;
    align-items: center !important;
    justify-items: center !important;
    justify-content: center !important;
  }

  [data-sp-embed] #data-approach .create-demo__story .section-label, [data-sp-embed] #data-approach .create-demo__story h2{
    text-align: center !important;
    margin-inline: auto !important;
  }

  [data-sp-embed] #data-approach .create-demo__story .showcase-subtitle{
    margin-inline: auto !important;
    text-align: center !important;
  }

  [data-sp-embed] #data-approach .create-demo__story{
    justify-items: center !important;
    justify-content: center;
    width: 100%;
  }

  [data-sp-embed] #data-approach .create-demo__story .ai-insight-tags{
    justify-content: center !important;
    margin-inline: auto !important;
  }

  [data-sp-embed] #data-approach .create-demo__preview-head{
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  [data-sp-embed] #data-approach .create-demo__tabs{
    justify-content: center;
  }
}

@media (max-width: 1024px) {
  [data-sp-embed] #data-approach .create-demo, [data-sp-embed] #data-approach .create-demo__window{
    min-width: 0;
    max-width: 100%;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  [data-sp-embed] #data-approach .create-demo__body{
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr) !important;
  }
}

@media (max-width: 767px) {
  [data-sp-embed] #data-approach .create-demo__body{
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  [data-sp-embed] #data-approach .create-demo__story .ai-insight-tags--story{
    gap: 0.35rem !important;
  }

  [data-sp-embed] #data-approach .create-demo__story .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;
  }
}

@keyframes create-demo-in {
  from {
    opacity: 0;
    transform: translateY(1.25rem) scale(0.975);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes create-field-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes create-chip-pop {
  0% {
    opacity: 0;
    transform: scale(0.72);
  }
  70% {
    opacity: 1;
    transform: scale(1.06);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes create-caret {
  50% { background: transparent; }
}

@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); }
}

[data-sp-embed] .data-approach{
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(251, 113, 133, 0.08), transparent 70%),
    linear-gradient(180deg, #ffffff 0%, #fffafc 100%);
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  padding-block: clamp(72px, 9vw, 120px);
}

[data-sp-embed] .data-approach__inner{
  max-width: min(68rem, 100%);
  margin: 0 auto;
}

[data-sp-embed] .data-approach__heading{
  max-width: 52rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

[data-sp-embed] .data-approach__heading h2{
  line-height: 1.35;
}

[data-sp-embed] .data-approach__lead{
  margin: 1rem auto 0;
  max-width: 40rem;
  color: #4b5563;
  font-size: clamp(1.02rem, 0.9rem + 0.45vw, 1.3rem);
  line-height: 1.7;
  font-weight: 500;
  letter-spacing: 0.03em;
}

[data-sp-embed] #data-approach .create-demo{
  width: 100%;
  margin: 0;
}

[data-sp-embed] #data-approach .create-demo__body{
  position: relative;
}

[data-sp-embed] #data-approach .create-demo__zone{
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #0f172a;
}

[data-sp-embed] #data-approach .create-demo__zone small{
  padding: 0.12rem 0.48rem;
  border-radius: 999px;
  background: #db2777;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

[data-sp-embed] #data-approach .create-demo__zone--dm small{
  background: #ea580c;
}

[data-sp-embed] #data-approach .create-demo__connector{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 3;
}

[data-sp-embed] #data-approach .create-demo__connector-path{
  fill: none;
  stroke: #db2777;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 6 6;
  opacity: 0.85;
  animation: data-approach-flow 0.9s linear infinite;
}

[data-sp-embed] #data-approach .create-demo__connector marker path{
  fill: #db2777;
}

@keyframes data-approach-flow {
  to {
    stroke-dashoffset: -12;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-sp-embed] #data-approach .create-demo__connector-path{
    animation: none;
  }
}

@media (max-width: 767px) {
  [data-sp-embed] #data-approach .create-demo__editor{
    display: grid;
    border-right: 0;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  }

  [data-sp-embed] #data-approach .create-demo__connector{
    display: none;
  }

  [data-sp-embed] #data-approach .create-demo__preview{
    padding: 1rem 0.8rem 1.1rem;
  }

  [data-sp-embed] #data-approach .create-demo__preview-head{
    gap: 0.55rem;
    margin-bottom: 0.75rem;
  }

  [data-sp-embed] #data-approach .create-demo__zone{
    font-size: 1.05rem;
  }

  [data-sp-embed] #data-approach .create-demo__zone small{
    font-size: 0.68rem;
  }

  [data-sp-embed] #data-approach .create-demo__tabs{
    padding: 0.22rem;
  }

  [data-sp-embed] #data-approach .create-demo__tab{
    font-size: 0.84rem;
    padding: 0.45rem 0.85rem;
  }
}

@media (min-width: 768px) {
  [data-sp-embed] #data-approach .create-demo__tabs{
    padding: 0.22rem;
    gap: 0.25rem;
  }

  [data-sp-embed] #data-approach .create-demo__tab{
    font-size: 0.88rem;
    padding: 0.5rem 1rem;
  }
}

@media (min-width: 768px) and (max-width: 920px) {
  [data-sp-embed] #data-approach .create-demo__tab{
    font-size: 0.8rem;
    padding: 0.42rem 0.75rem;
  }
}

@media (min-width: 921px) {
  [data-sp-embed] #data-approach .create-demo__stage{
    min-height: 25.5rem;
  }

  [data-sp-embed] #data-approach .create-demo__panel{
    transform: translateY(14px) scale(1.05);
  }

  [data-sp-embed] #data-approach .create-demo__panel.is-active{
    transform: translateY(0) scale(1.1);
  }
}

/* Instagram preview: like -> push notification -> DM thread opens */
[data-sp-embed] #data-approach .create-ig--dm{
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
}

[data-sp-embed] #data-approach .create-igdm__head{
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid rgba(15, 23, 42, 0.07);
}

[data-sp-embed] #data-approach .create-igdm__back{
  font-size: 1.35rem;
  line-height: 1;
  color: #111827;
}

[data-sp-embed] #data-approach .create-igdm__head .create-ig__avatar{
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
}

[data-sp-embed] #data-approach .create-igdm__head strong{
  display: block;
  font-size: 0.78rem;
  color: #111827;
}

[data-sp-embed] #data-approach .create-igdm__head small{
  display: block;
  font-size: 0.6rem;
  font-weight: 600;
  color: #16a34a;
}

[data-sp-embed] #data-approach .create-igdm__thread{
  display: grid;
  gap: 0.4rem;
  padding: 0.6rem 0.7rem 0.35rem;
  background: linear-gradient(180deg, #fff 0%, #fdf2f8 100%);
}

[data-sp-embed] #data-approach .create-igdm__incoming{
  display: grid;
}

[data-sp-embed] #data-approach .create-igdm__incoming > *{
  grid-area: 1 / 1;
}

[data-sp-embed] #data-approach .create-igdm__msg{
  display: flex;
  align-items: flex-end;
  gap: 0.4rem;
  transform-origin: left bottom;
}

[data-sp-embed] #data-approach .create-igdm__msg > .create-ig__avatar{
  flex: none;
  width: 1.2rem;
  height: 1.2rem;
}

[data-sp-embed] #data-approach .create-igdm__card{
  width: 84%;
  border-radius: 1rem 1rem 1rem 0.3rem;
  overflow: hidden;
  background: #efeff3;
  box-shadow: 0 10px 22px rgba(221, 42, 123, 0.14);
}

[data-sp-embed] #data-approach .create-igdm__card figure{
  margin: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #f1f5f9;
}

[data-sp-embed] #data-approach .create-igdm__card img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 62%;
}

[data-sp-embed] #data-approach .create-igdm__card .create-ig__cta{
  font-size: 0.6rem;
  padding: 0.38rem 0.5rem;
}

[data-sp-embed] #data-approach .create-igdm__card p{
  margin: 0;
  padding: 0.5rem 0.65rem 0.6rem;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.4;
  color: #111827;
}

[data-sp-embed] #data-approach .create-igdm__time{
  justify-self: start;
  margin-left: 1.6rem;
  font-size: 0.58rem;
  color: #94a3b8;
}

[data-sp-embed] #data-approach .create-igdm__input{
  margin: 0.3rem 0.65rem 0.55rem;
  padding: 0.4rem 0.8rem;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 999px;
  font-size: 0.66rem;
  color: #94a3b8;
}

[data-sp-embed] #data-approach .create-igdm__lock{
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  background: #fff;
  color: #111827;
  pointer-events: none;
}

[data-sp-embed] #data-approach .create-igdm__feed-head{
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.75rem 0.45rem;
  font-size: 0.74rem;
}

[data-sp-embed] #data-approach .create-igdm__feed-head .create-ig__avatar{
  flex: none;
  width: 1.45rem;
  height: 1.45rem;
}

[data-sp-embed] #data-approach .create-igdm__post{
  position: relative;
  /* Fill whatever height the screen leaves so the likes row sits at the bottom */
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  background: #f1f5f9;
}

[data-sp-embed] #data-approach .create-igdm__post img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 50%;
}

[data-sp-embed] #data-approach .create-igdm__heart{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 4.2rem;
  line-height: 1;
  color: #fff;
  text-shadow: 0 6px 22px rgba(225, 48, 108, 0.55);
  opacity: 0;
}

[data-sp-embed] #data-approach .create-igdm__actions{
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.7rem;
}

[data-sp-embed] #data-approach .create-igdm__like{
  position: relative;
  display: inline-grid;
  font-size: 1.15rem;
  line-height: 1;
}

[data-sp-embed] #data-approach .create-igdm__like > *{
  grid-area: 1 / 1;
  font-style: normal;
}

[data-sp-embed] #data-approach .create-igdm__like em{
  color: #ed4956;
  opacity: 0;
}

[data-sp-embed] #data-approach .create-igdm__likes b{
  font-weight: 800;
}

[data-sp-embed] #data-approach .create-igdm__notice{
  position: absolute;
  top: 0.6rem;
  left: 0.55rem;
  right: 0.55rem;
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.6rem 0.7rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.3);
  color: #111827;
  text-align: left;
  opacity: 0;
  transform: translateY(-130%);
}

[data-sp-embed] #data-approach .create-igdm__notice-icon{
  flex: none;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 0.5rem;
  background:
    radial-gradient(circle at 30% 110%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 100%);
  box-shadow: inset 0 0 0 0.32rem rgba(255, 255, 255, 0), 0 0 0 0 transparent;
  position: relative;
}

[data-sp-embed] #data-approach .create-igdm__notice-icon::after{
  content: "";
  position: absolute;
  inset: 0.42rem;
  border: 2px solid #fff;
  border-radius: 0.38rem;
}

[data-sp-embed] #data-approach .create-igdm__notice > div{
  min-width: 0;
}

[data-sp-embed] #data-approach .create-igdm__notice-app{
  display: flex;
  justify-content: space-between;
  gap: 0.4rem;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #64748b;
  text-transform: uppercase;
}

[data-sp-embed] #data-approach .create-igdm__notice-app em{
  font-style: normal;
  font-weight: 500;
  text-transform: none;
}

[data-sp-embed] #data-approach .create-igdm__notice strong{
  display: block;
  margin-top: 0.1rem;
  font-size: 0.72rem;
}

[data-sp-embed] #data-approach .create-igdm__notice p{
  margin: 0.05rem 0 0;
  font-size: 0.68rem;
  line-height: 1.35;
  color: #334155;
}

[data-sp-embed] #data-approach .create-demo__panel--instagram{
  --igdm-wait: 4s;
}

@media (max-width: 767px) {
  [data-sp-embed] #data-approach .create-demo__panel--instagram{
    --igdm-wait: 1s;
  }
}

[data-sp-embed] #data-approach .create-demo__panel.is-active .create-igdm__heart{
  animation: igdm-heart 0.9s ease-out calc(var(--igdm-wait, 0s) + 0.35s) both;
}

[data-sp-embed] #data-approach .create-demo__panel.is-active .create-igdm__like em{
  animation: igdm-heart 0.5s ease-out calc(var(--igdm-wait, 0s) + 0.45s) both;
}

[data-sp-embed] #data-approach .create-demo__panel.is-active .create-igdm__notice{
  animation:
    igdm-notice 0.55s cubic-bezier(0.2, 1.25, 0.4, 1) calc(var(--igdm-wait, 0s) + 1.2s) both,
    igdm-tap 0.3s ease calc(var(--igdm-wait, 0s) + 2.5s);
}

[data-sp-embed] #data-approach .create-demo__panel.is-active .create-igdm__lock{
  animation: igdm-open 0.45s ease calc(var(--igdm-wait, 0s) + 2.85s) both;
}

[data-sp-embed] #data-approach .create-demo__panel.is-active .create-igdm__msg{
  animation: igdm-arrive 0.6s cubic-bezier(0.2, 1.3, 0.4, 1) calc(var(--igdm-wait, 0s) + 3.35s) both;
}

[data-sp-embed] #data-approach .create-demo__panel.is-active .create-igdm__time{
  animation: igdm-fade 0.3s ease calc(var(--igdm-wait, 0s) + 3.8s) both;
}

@keyframes igdm-heart {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  35% {
    opacity: 1;
    transform: scale(1.25);
  }
  60% {
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes igdm-notice {
  from {
    opacity: 0;
    transform: translateY(-130%);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes igdm-tap {
  50% {
    transform: scale(0.95);
  }
}

@keyframes igdm-open {
  from {
    opacity: 1;
    transform: none;
  }
  to {
    opacity: 0;
    transform: scale(1.06);
    visibility: hidden;
  }
}

@keyframes igdm-pop {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes igdm-arrive {
  0% {
    opacity: 0;
    transform: translate(-22px, 26px) scale(0.82);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes igdm-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-sp-embed] #data-approach .create-demo__menu, [data-sp-embed] #data-approach .create-demo__menu li{
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* Workflow section: slightly more compact, steps appear without the one-by-one entrance */
[data-sp-embed].js .value-flow__steps.reveal--stagger:not(.visible) .growth-fade, [data-sp-embed].js .value-flow__steps.reveal--stagger.visible .growth-fade, [data-sp-embed].js .value-flow__steps.reveal.visible .value-flow-step-wrap.growth-fade{
  opacity: 1;
  transform: none;
  filter: none;
  animation: none;
}

[data-sp-embed] .value-flow.section-band{
  padding-block: clamp(64px, 8vw, 112px);
}

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

[data-sp-embed] .value-flow__heading{
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}

@media (min-width: 1100px) {
  [data-sp-embed] .value-flow-step__visual{
    height: clamp(180px, 15vw, 210px);
  }

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

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

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

/* Hero catch copy: near-black base, deeper brand gradient on the second line */
[data-sp-embed] .hero-center .hero-copy h1{
  color: #111827;
}

[data-sp-embed] .hero-center .hero-copy h1 .hero-title-float:first-child{
  font-weight: 700;
}

[data-sp-embed] .hero-title-x{
  display: inline-block;
  margin: 0 0.22em;
  font-weight: 500;
  color: #374151;
}

[data-sp-embed] .hero-center .hero-copy h1 .hero-title-float + .hero-title-float{
  font-weight: 800;
  letter-spacing: 0.02em;
}

[data-sp-embed] .hero-title-accent{
  display: inline-block;
  padding-bottom: 0.08em;
  background: linear-gradient(100deg, #d1006c 0%, #5b21b6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* JA catch copy stays larger than the SAKINA wordmark, and scales with the screen */
[data-sp-embed][lang="ja"] .hero-center .hero-copy h1{
  font-size: clamp(2.35rem, 10.4vw, 2.85rem);
  line-height: 1.2;
}

[data-sp-embed][lang="ja"] .hero-title-split{
  display: inline;
}

@media (max-width: 700px) {
  [data-sp-embed][lang="ja"] .hero-center .hero-copy h1{
    margin-top: 1.15rem;
    font-size: clamp(2rem, 8.8vw, 2.55rem);
    line-height: 1.28;
    text-align: center;
    align-items: center;
  }

  [data-sp-embed][lang="ja"] .hero-center .hero-copy h1 .hero-title-float, [data-sp-embed][lang="ja"] .hero-center .hero-copy h1 .hero-title-float:first-child{
    width: 100%;
    text-align: center;
    white-space: nowrap;
    overflow-wrap: normal;
  }

  [data-sp-embed][lang="ja"] .hero-center .hero-copy h1 .hero-title-keep{
    white-space: nowrap;
    overflow-wrap: normal;
  }

  /* Keep each line visually centered (ビジネスを ≠ 次のステージへ。 width) */
  [data-sp-embed][lang="ja"] .hero-center .hero-copy h1 .hero-title-keep.hero-title-accent{
    display: inline-block;
    white-space: normal;
    text-align: center;
  }

  [data-sp-embed][lang="ja"] .hero-title-split{
    display: block;
    text-align: center;
  }

  [data-sp-embed][lang="ja"] .hero-center .hero-copy h1 .hero-title-float + .hero-title-float{
    margin-top: 0.22rem;
    font-size: 1em;
    letter-spacing: 0.01em;
  }
}

@media (min-width: 701px) and (max-width: 1023px) {
  [data-sp-embed][lang="ja"] .hero-center .hero-copy h1{
    font-size: clamp(2.7rem, 4.4vw + 0.85rem, 3.65rem);
    line-height: 1.18;
  }
}

@media (min-width: 1024px) {
  [data-sp-embed][lang="ja"] .hero-center .hero-copy h1{
    font-size: clamp(3.45rem, 2.1vw + 2.15rem, 4.35rem);
    line-height: 1.16;
  }

  [data-sp-embed][lang="ja"] .hero-center .hero-copy h1 .hero-title-float + .hero-title-float{
    margin-top: 0.4rem;
  }
}

[data-sp-embed] #data-approach .create-demo__reaction{
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0.45rem 0 0.15rem;
  padding: 0.55rem 0.75rem;
  border-radius: 0.75rem;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05);
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.4;
  color: #1f2937;
}

[data-sp-embed] #data-approach .create-demo__reaction-icon{
  flex: none;
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  font-size: 0.95rem;
  line-height: 1;
}

[data-sp-embed] #data-approach .create-demo__reaction-icon.is-ig{
  background: linear-gradient(135deg, #fde7f3, #f3e8ff);
}

[data-sp-embed] #data-approach .create-demo__reaction-icon.is-web{
  background: #e0f2fe;
}

[data-sp-embed] #data-approach .create-demo__reaction-icon.is-line{
  background: #dcfce7;
}

[data-sp-embed] #data-approach .create-demo__picker{
  position: relative;
}

[data-sp-embed] #data-approach .create-demo__select-btn{
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
}

[data-sp-embed] #data-approach .create-demo__select-btn:focus-visible{
  outline: none;
}

[data-sp-embed] #data-approach .create-demo__select-btn .create-demo__select{
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

[data-sp-embed] #data-approach .create-demo__select-btn:hover .create-demo__select, [data-sp-embed] #data-approach .create-demo__select-btn:focus-visible .create-demo__select, [data-sp-embed] #data-approach .create-demo.is-type-menu-open .create-demo__select{
  border-color: rgba(99, 102, 241, 0.55);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.14);
}

[data-sp-embed] #data-approach .create-demo__select::after{
  transition: transform 0.2s ease;
}

[data-sp-embed] #data-approach .create-demo.is-type-menu-open .create-demo__select::after{
  transform: rotate(-135deg) translate(-2px, -2px);
}

[data-sp-embed] #data-approach .create-demo__menu{
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  right: 0;
  z-index: 20;
  display: grid;
  gap: 0.1rem;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  background: #fff;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 0.8rem;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
  opacity: 1;
  animation: create-type-menu-in 0.18s ease-out;
}

[data-sp-embed] #data-approach .create-demo__menu[hidden]{
  display: none;
}

[data-sp-embed] #data-approach .create-demo__option{
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.45rem 0.55rem;
  border: 0;
  border-radius: 0.55rem;
  background: transparent;
  font: inherit;
  text-align: left;
  color: #0f172a;
}

[data-sp-embed] #data-approach .create-demo__option[aria-current="true"]{
  background: #eef2ff;
}

[data-sp-embed] #data-approach .create-demo__option[aria-current="true"]::after{
  content: "✓";
  margin-left: auto;
  color: #4f46e5;
  font-size: 0.85rem;
  font-weight: 800;
}

[data-sp-embed] #data-approach .create-demo__option-icon{
  flex: none;
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: #f8fafc;
  font-size: 0.9rem;
  line-height: 1;
}

[data-sp-embed] #data-approach .create-demo__option-text{
  display: grid;
  gap: 0.05rem;
  min-width: 0;
}

[data-sp-embed] #data-approach .create-demo__option-text b{
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.3;
}

[data-sp-embed] #data-approach .create-demo__option-text small{
  font-size: 0.66rem;
  line-height: 1.35;
  color: #64748b;
}

@keyframes create-type-menu-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

[data-sp-embed] #data-approach .create-demo__reaction{
  gap: 0.65rem;
  margin: 0 0 0.15rem;
  padding: 0.8rem 0.8rem;
  border-radius: 0.95rem;
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
  transition: background 0.35s ease, border-color 0.35s ease;
}

[data-sp-embed] #data-approach .create-demo__reaction .create-demo__reaction-icon{
  width: 2.3rem;
  height: 2.3rem;
  font-size: 1.2rem;
  background: #fff;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

[data-sp-embed] #data-approach .create-demo__reaction-body{
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

[data-sp-embed] #data-approach .create-demo__reaction-ch{
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
}

[data-sp-embed] #data-approach .create-demo__reaction-main{
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.4;
  color: #0f172a;
}

[data-sp-embed] #data-approach .create-demo__reaction .create-demo__reaction-icon, [data-sp-embed] #data-approach .create-demo__reaction-body{
  animation: create-reaction-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

[data-sp-embed] #data-approach .create-demo__reaction:has(.is-ig){
  background: linear-gradient(135deg, #fff1f7 0%, #f5edff 100%);
  border-color: rgba(219, 39, 119, 0.22);
}

[data-sp-embed] #data-approach .create-demo__reaction:has(.is-ig) .create-demo__reaction-ch{
  color: #db2777;
}

[data-sp-embed] #data-approach .create-demo__reaction:has(.is-web){
  background: linear-gradient(135deg, #eff6ff 0%, #f0f9ff 100%);
  border-color: rgba(37, 99, 235, 0.2);
}

[data-sp-embed] #data-approach .create-demo__reaction:has(.is-web) .create-demo__reaction-ch{
  color: #2563eb;
}

[data-sp-embed] #data-approach .create-demo__reaction:has(.is-line){
  background: linear-gradient(135deg, #ecfdf3 0%, #f0fdf4 100%);
  border-color: rgba(6, 199, 85, 0.26);
}

[data-sp-embed] #data-approach .create-demo__reaction:has(.is-line) .create-demo__reaction-ch{
  color: #059669;
}

@keyframes create-reaction-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

[data-sp-embed] #data-approach .create-demo__field--type{
  position: relative;
  z-index: 30;
}

[data-sp-embed] #data-approach .create-demo__option{
  appearance: none;
  -webkit-appearance: none;
  cursor: default;
  user-select: none;
  transition: background-color 0.15s ease;
}

[data-sp-embed] #data-approach .create-demo__option:hover, [data-sp-embed] .create-demo__menu.is-portaled .create-demo__option:hover{
  background: #f1f5f9;
}

[data-sp-embed] #data-approach .create-demo__option[aria-current="true"]:hover, [data-sp-embed] .create-demo__menu.is-portaled .create-demo__option[aria-current="true"]:hover{
  background: #e0e7ff;
}

[data-sp-embed] #data-approach .create-demo.is-type-menu-open .create-demo__window, [data-sp-embed] #data-approach .create-demo.is-type-menu-open .create-demo__body, [data-sp-embed] #data-approach .create-demo.is-type-menu-open .create-demo__editor, [data-sp-embed] #data-approach .create-demo.is-type-menu-open .create-demo__field--type{
  overflow: visible;
  transform: none;
  animation: none;
}

[data-sp-embed] #data-approach .create-demo.is-type-menu-open .create-demo__window{
  position: relative;
  z-index: 6;
}

[data-sp-embed] #data-approach .create-demo.is-type-menu-open .create-demo__field--type{
  z-index: 40;
}

[data-sp-embed] #data-approach .create-demo.is-type-menu-open .create-demo__menu{
  opacity: 1;
  visibility: visible;
}

/* Portaled so a published/embed overflow clip cannot hide the list */
[data-sp-embed] .create-demo__menu.is-portaled{
  position: fixed;
  z-index: 100001;
  display: grid;
  gap: 0.1rem;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  background: #fff;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 0.8rem;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
  opacity: 1;
  visibility: visible;
  max-height: min(70vh, 28rem);
  overflow: auto;
  animation: create-type-menu-in 0.18s ease-out;
}

[data-sp-embed] .create-demo__menu.is-portaled[hidden]{
  display: none !important;
}

[data-sp-embed] .create-demo__menu.is-portaled .create-demo__option{
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.45rem 0.55rem;
  border: 0;
  border-radius: 0.55rem;
  background: transparent;
  font: inherit;
  text-align: left;
  color: #0f172a;
  cursor: default;
  transition: background-color 0.15s ease;
  user-select: none;
}

[data-sp-embed] .create-demo__menu.is-portaled .create-demo__option[aria-current="true"]{
  background: #eef2ff;
}

[data-sp-embed] .create-demo__menu.is-portaled .create-demo__option[aria-current="true"]::after{
  content: "✓";
  margin-left: auto;
  color: #4f46e5;
  font-size: 0.85rem;
  font-weight: 800;
}

[data-sp-embed] .create-demo__menu.is-portaled .create-demo__option-icon{
  flex: none;
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: #f8fafc;
  font-size: 0.9rem;
  line-height: 1;
}

[data-sp-embed] .create-demo__menu.is-portaled .create-demo__option-text{
  display: grid;
  gap: 0.05rem;
  min-width: 0;
}

[data-sp-embed] .create-demo__menu.is-portaled .create-demo__option-text b{
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.3;
}

[data-sp-embed] .create-demo__menu.is-portaled .create-demo__option-text small{
  font-size: 0.66rem;
  line-height: 1.35;
  color: #64748b;
}

[data-sp-embed] #data-approach .create-demo__menu.is-closing{
  animation: create-type-menu-out 0.18s ease-in both;
}

[data-sp-embed] #data-approach .create-demo__menu li{
  animation: create-type-option-in 0.34s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(60ms + var(--i, 0) * 50ms);
}

@keyframes create-type-menu-out {
  to {
    opacity: 0;
    transform: translateY(-4px);
  }
}

@keyframes create-type-option-in {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

[data-sp-embed] #data-approach .create-demo.is-type-hint:not(.is-type-menu-open) .create-demo__select{
  animation: create-type-hint 2.2s ease-in-out infinite;
}

[data-sp-embed] #data-approach .create-demo.is-type-hint:not(.is-type-menu-open) .create-demo__select::after{
  animation: create-type-hint-chevron 2.2s ease-in-out infinite;
}

@keyframes create-type-hint {
  18% {
    border-color: rgba(99, 102, 241, 0.6);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2);
  }
  45% {
    box-shadow: 0 0 0 10px rgba(99, 102, 241, 0);
  }
}

@keyframes create-type-hint-chevron {
  0%,
  36%,
  100% {
    border-color: #64748b;
    transform: rotate(45deg) translateY(-1px);
  }
  12% {
    border-color: #6366f1;
    transform: rotate(45deg) translate(2px, 2px);
  }
  24% {
    border-color: #6366f1;
    transform: rotate(45deg) translateY(-1px);
  }
}

/* Triggers: text-only scene cards */
[data-sp-embed] .ma-trigger-stories.ma-trigger-stories--text{
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 24px);
}

[data-sp-embed] .ma-trigger-stories--text .ma-trigger-story--text{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  justify-items: start;
  gap: 0.7rem;
  padding: clamp(22px, 2.6vw, 34px) clamp(22px, 2.8vw, 38px);
  text-align: left;
}

[data-sp-embed] .ma-trigger-stories--text .ma-trigger-story__scene{
  margin: 0;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: rgba(187, 247, 208, 0.65);
  line-height: 1.2;
}

[data-sp-embed] .ma-trigger-stories--text .ma-trigger-story--text h4{
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.08rem, 0.95vw + 0.78rem, 1.55rem);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.02em;
}

@media (max-width: 767px) {
  [data-sp-embed] .ma-trigger-stories.ma-trigger-stories--text{
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  [data-sp-embed] .ma-trigger-stories--text .ma-trigger-story--text{
    justify-items: center;
    padding: 22px 20px;
    text-align: center;
  }
}

/* Stacked layout: channel analysis sits below the preview animation */
@media (max-width: 767px) {
  [data-sp-embed] #data-approach .create-demo__body{
    display: flex;
    flex-direction: column;
    background: #fff;
  }

  [data-sp-embed] #data-approach .create-demo__editor{
    display: contents;
  }

  [data-sp-embed] #data-approach .create-demo__reaction, [data-sp-embed] #data-approach .create-demo__field--type{
    margin-inline: 1.15rem;
  }

  [data-sp-embed] #data-approach .create-demo__reaction{
    margin-top: 1.05rem;
  }

  [data-sp-embed] #data-approach .create-demo__field--type{
    margin-top: 0.7rem;
    margin-bottom: 1.25rem;
  }

  [data-sp-embed] #data-approach .create-demo__preview{
    order: 1;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
  }

  [data-sp-embed] #data-approach .create-demo__insight{
    order: 2;
    margin: 1.05rem 1.15rem 1.25rem;
  }
}

/* Channel tabs: tile buttons that invite switching */
[data-sp-embed] #data-approach .create-demo .create-demo__tabs{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.3rem;
  width: min(100%, 26rem);
  margin-inline: auto;
  padding: 0.3rem;
  border-radius: 0.95rem;
  background: linear-gradient(135deg, #fff1f5 0%, #f5f3ff 55%, #ecfdf5 100%);
  border: 1px solid rgba(221, 42, 123, 0.18);
  box-shadow: 0 6px 18px rgba(221, 42, 123, 0.08);
}

[data-sp-embed] #data-approach .create-demo .create-demo__tab{
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: center;
  row-gap: 0.22rem;
  min-width: 0;
  padding: 0.5rem 0.35rem 0.55rem;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 0.7rem;
  background: #fff;
  color: #334155;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.2;
  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] #data-approach .create-demo .create-demo__tab::before{
  grid-column: 1 / -1;
  justify-self: center;
  font-size: 1.3em;
  line-height: 1;
}

[data-sp-embed] #data-approach .create-demo .create-demo__tab[data-create-tab="instagram"]::before{
  content: "📸";
}

[data-sp-embed] #data-approach .create-demo .create-demo__tab[data-create-tab="facebook"]::before{
  content: "🌐";
}

[data-sp-embed] #data-approach .create-demo .create-demo__tab[data-create-tab="line"]::before{
  content: "💬";
}

[data-sp-embed] #data-approach .create-demo .create-demo__tab:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.12);
}

[data-sp-embed] #data-approach .create-demo .create-demo__tab[data-create-tab="instagram"]:not(.is-active):hover{
  color: #c13584;
  border-color: rgba(221, 42, 123, 0.35);
}

[data-sp-embed] #data-approach .create-demo .create-demo__tab[data-create-tab="facebook"]:not(.is-active):hover{
  color: #111827;
  border-color: rgba(17, 24, 39, 0.3);
}

[data-sp-embed] #data-approach .create-demo .create-demo__tab[data-create-tab="line"]:not(.is-active):hover{
  color: #06a33a;
  border-color: rgba(6, 199, 85, 0.4);
}

[data-sp-embed] #data-approach .create-demo .create-demo__tab:active{
  transform: translateY(0) scale(0.97);
}

[data-sp-embed] #data-approach .create-demo .create-demo__tab:focus:not(:focus-visible){
  outline: none;
}

[data-sp-embed] #data-approach .create-demo .create-demo__tab:focus-visible{
  outline: 2px solid #dd2a7b;
  outline-offset: 2px;
}

[data-sp-embed] #data-approach .create-demo .create-demo__tab.is-active{
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 18px rgba(29, 78, 216, 0.28);
  transform: translateY(-1px);
}

[data-sp-embed] #data-approach .create-demo .create-demo__tab[data-create-tab="instagram"].is-active{
  box-shadow: 0 8px 18px rgba(221, 42, 123, 0.32);
}

[data-sp-embed] #data-approach .create-demo .create-demo__tab[data-create-tab="line"].is-active{
  box-shadow: 0 8px 18px rgba(6, 199, 85, 0.3);
}

@media (max-width: 400px) {
  [data-sp-embed] #data-approach .create-demo .create-demo__tab{
    padding-inline: 0.2rem;
    font-size: 0.78rem;
  }
}

/* Invite the first tap; stops once the visitor picks a channel */
[data-sp-embed] #data-approach .create-demo:not(.is-channel-picked) .create-demo__tabs{
  animation: create-channel-invite 2.4s ease-in-out infinite;
}

@keyframes create-channel-invite {
  0%,
  100% {
    box-shadow: 0 6px 18px rgba(221, 42, 123, 0.08), 0 0 0 0 rgba(221, 42, 123, 0);
  }
  50% {
    box-shadow: 0 6px 18px rgba(221, 42, 123, 0.14), 0 0 0 5px rgba(221, 42, 123, 0.15);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-sp-embed] #data-approach .create-demo:not(.is-channel-picked) .create-demo__tabs{
    animation: none;
  }

  [data-sp-embed] #data-approach .create-demo .create-demo__tab, [data-sp-embed] #data-approach .create-demo .create-demo__tab:hover, [data-sp-embed] #data-approach .create-demo .create-demo__tab:active{
    transform: none;
  }
}


/* User detail management: interactive mock replaces video */
[data-sp-embed] #cdp-customer .ai-insight-card__preview--side-crop{
  position: relative;
  overflow: visible;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  aspect-ratio: auto !important;
  height: auto !important;
  min-height: 0 !important;
  background: #fff !important;
  border-radius: 14px;
}

[data-sp-embed] #cdp-customer .ai-insight-card__preview--side-crop::before{
  content: "";
  display: block !important;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  z-index: auto;
  flex: 0 0 36px !important;
  height: 36px !important;
  width: 100%;
  box-sizing: border-box;
  border: none !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 14px 14px 0 0 !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;
  pointer-events: none;
}

[data-sp-embed] #cdp-customer .user-detail-demo{
  display: grid;
  grid-template-columns: minmax(9.5rem, 0.34fr) minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.75rem 0.8rem 0.9rem;
  min-height: 0;
  align-items: start;
  background:
    linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
  color: #0f172a;
  font-size: 0.72rem;
  line-height: 1.35;
}

[data-sp-embed] #cdp-customer .user-detail-demo__profile{
  display: grid;
  align-content: center;
  align-self: stretch;
  justify-items: center;
  gap: 0.45rem;
  padding: 0.75rem 0.7rem 0.8rem;
  border-radius: 0.9rem;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

[data-sp-embed] #cdp-customer .user-detail-demo__avatar{
  display: grid;
  place-items: center;
  width: 3.6rem;
  height: 3.6rem;
  margin: 0 auto;
  border-radius: 999px;
  background: linear-gradient(145deg, #93c5fd, #6366f1);
  color: #fff;
  font-size: 1.25rem;
  font-weight: 800;
}

[data-sp-embed] #cdp-customer .user-detail-demo__name{
  display: block;
  text-align: center;
  font-size: 1.12rem;
  font-weight: 800;
}

[data-sp-embed] #cdp-customer .user-detail-demo__sub{
  margin: 0;
  text-align: center;
  color: #64748b;
  font-size: 0.82rem;
  font-weight: 700;
}

[data-sp-embed] #cdp-customer .user-detail-demo__platforms-label{
  margin: 0.35rem 0 0;
  text-align: center;
  color: #94a3b8;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

[data-sp-embed] #cdp-customer .user-detail-demo__platforms{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.28rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-sp-embed] #cdp-customer .user-detail-demo__platforms li{
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  background: #f1f5f9;
  border: 1px solid rgba(15, 23, 42, 0.06);
  color: #334155;
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1.2;
}

[data-sp-embed] #cdp-customer .user-detail-demo__platforms li[data-platform="line"]{
  background: #e8f8ee;
  border-color: rgba(6, 199, 85, 0.35);
  color: #06c755;
}

[data-sp-embed] #cdp-customer .user-detail-demo__platforms li[data-platform="instagram"]{
  background: linear-gradient(135deg, #fce7f3, #ede9fe);
  border-color: rgba(219, 39, 119, 0.28);
  color: #c026a0;
}

[data-sp-embed] #cdp-customer .user-detail-demo__platforms li[data-platform="web"]{
  background: #eff6ff;
  border-color: rgba(37, 99, 235, 0.28);
  color: #2563eb;
}

[data-sp-embed] #cdp-customer .user-detail-demo__meta{
  display: grid;
  gap: 0.28rem;
  margin: 0.15rem 0 0;
}

[data-sp-embed] #cdp-customer .user-detail-demo__meta > div{
  display: flex;
  justify-content: space-between;
  gap: 0.4rem;
  padding: 0.28rem 0.35rem;
  border-radius: 0.45rem;
  background: #f8fafc;
}

[data-sp-embed] #cdp-customer .user-detail-demo__meta dt{
  color: #94a3b8;
  font-weight: 700;
}

[data-sp-embed] #cdp-customer .user-detail-demo__meta dd{
  margin: 0;
  font-weight: 800;
  text-align: right;
}

[data-sp-embed] #cdp-customer .user-detail-demo__actions{
  display: grid;
  gap: 0.35rem;
  margin-top: 0.2rem;
}

[data-sp-embed] #cdp-customer .user-detail-demo__btn{
  display: grid;
  place-items: center;
  min-height: 2rem;
  padding: 0.35rem 0.5rem;
  border-radius: 0.55rem;
  background: #0f172a;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  text-align: center;
}

[data-sp-embed] #cdp-customer .user-detail-demo__btn--ai{
  background: linear-gradient(120deg, #7c3aed, #2563eb);
}

[data-sp-embed] #cdp-customer .user-detail-demo__main{
  min-width: 0;
  align-self: start;
  display: grid;
  grid-template-rows: auto auto;
  align-content: start;
  gap: 0.55rem;
  padding: 0.7rem 0.75rem 0.8rem;
  border-radius: 0.9rem;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

[data-sp-embed] #cdp-customer .user-detail-demo__panel[data-user-detail-panel="timeline"].is-active{
  align-content: start;
  align-self: start;
}

[data-sp-embed] #cdp-customer .user-detail-demo__tabs{
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.18rem;
  border-radius: 999px;
  background: #f1f5f9;
  border: 1px solid rgba(15, 23, 42, 0.06);
  width: fit-content;
  max-width: 100%;
}

[data-sp-embed] #cdp-customer .user-detail-demo__tab{
  appearance: none;
  border: 0;
  background: transparent;
  color: #64748b;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 0.38rem 0.7rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

[data-sp-embed] #cdp-customer .user-detail-demo__tab.is-active{
  background: #2563eb;
  color: #fff;
}

[data-sp-embed] #cdp-customer .user-detail-demo__panel{
  display: none;
  gap: 0.5rem;
}

[data-sp-embed] #cdp-customer .user-detail-demo__panel.is-active{
  display: grid;
}

[data-sp-embed] #cdp-customer .user-detail-demo__panel[hidden]{
  display: none !important;
}

[data-sp-embed] #cdp-customer .user-detail-demo__lead, [data-sp-embed] #cdp-customer .user-detail-demo__date{
  margin: 0;
}

[data-sp-embed] #cdp-customer .user-detail-demo__lead{
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 700;
}

[data-sp-embed] #cdp-customer .user-detail-demo__date{
  justify-self: start;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 0.66rem;
  font-weight: 800;
}

[data-sp-embed] #cdp-customer .user-detail-demo__feed{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
  align-content: start;
}

[data-sp-embed] #cdp-customer .user-detail-demo__feed > li{
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.42rem 0.65rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.65rem;
  background: #fff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

[data-sp-embed] #cdp-customer .user-detail-demo__feed-rail{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
  padding-top: 0;
}

[data-sp-embed] #cdp-customer .user-detail-demo__feed time{
  color: #64748b;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
  line-height: 1;
  min-width: 2.1rem;
}

[data-sp-embed] #cdp-customer .user-detail-demo__feed-icon{
  display: grid;
  place-items: center;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 999px;
  background: #06c755;
  color: #fff;
  font-size: 0.4rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px #e2e8f0;
}

[data-sp-embed] #cdp-customer .user-detail-demo__feed-card{
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

[data-sp-embed] #cdp-customer .user-detail-demo__feed-card header{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

[data-sp-embed] #cdp-customer .user-detail-demo__feed-card strong{
  font-size: 0.76rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.25;
}

[data-sp-embed] #cdp-customer .user-detail-demo__feed-card footer{
  display: flex;
  align-items: center;
  margin-top: 0.35rem;
}

[data-sp-embed] #cdp-customer .user-detail-demo__feed-card footer span{
  padding: 0.12rem 0.42rem;
  border-radius: 999px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #64748b;
  font-size: 0.58rem;
  font-weight: 800;
}

[data-sp-embed] #cdp-customer .user-detail-demo__feed-card--blank{
  min-height: 2.4rem;
  display: flex;
  align-items: flex-end;
}

[data-sp-embed] #cdp-customer .user-detail-demo__feed-card--blank footer{
  margin-top: 0;
}

[data-sp-embed] #cdp-customer .user-detail-demo__range{
  display: inline-flex;
  gap: 0.2rem;
  padding: 0.14rem;
  border-radius: 999px;
  background: #f1f5f9;
}

[data-sp-embed] #cdp-customer .user-detail-demo__range span{
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  color: #64748b;
  font-size: 0.66rem;
  font-weight: 800;
}

[data-sp-embed] #cdp-customer .user-detail-demo__range .is-on{
  background: #0f172a;
  color: #fff;
}

[data-sp-embed] #cdp-customer .user-detail-demo__stats{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.35rem;
}

[data-sp-embed] #cdp-customer .user-detail-demo__stats--rich li{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "icon label"
    "icon value";
  column-gap: 0.35rem;
  row-gap: 0.08rem;
  align-items: center;
  padding: 0.42rem 0.45rem;
  border-radius: 0.7rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
}

[data-sp-embed] #cdp-customer .user-detail-demo__stats--rich i{
  grid-area: icon;
  font-style: normal;
  font-size: 0.85rem;
  line-height: 1;
}

[data-sp-embed] #cdp-customer .user-detail-demo__stats--rich span{
  grid-area: label;
  color: #94a3b8;
  font-size: 0.54rem;
  font-weight: 800;
  line-height: 1.2;
}

[data-sp-embed] #cdp-customer .user-detail-demo__stats--rich strong{
  grid-area: value;
  font-size: 0.95rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.1;
}

[data-sp-embed] #cdp-customer .user-detail-demo__stats--rich li[data-stat="phase"]{
  background: #0f172a;
  border-color: #0f172a;
  color: #fff;
}

[data-sp-embed] #cdp-customer .user-detail-demo__stats--rich li[data-stat="phase"] span{
  color: #94a3b8;
}

[data-sp-embed] #cdp-customer .user-detail-demo__phase-pill{
  grid-area: value;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 0.14rem 0.45rem;
  border-radius: 999px;
  background: #bbf7d0;
  color: #166534;
  font-size: 0.62rem;
  font-weight: 800;
}

[data-sp-embed] #cdp-customer .user-detail-demo__semantic{
  display: grid;
  gap: 0.55rem;
  padding: 0.55rem 0.6rem 0.6rem;
  border-radius: 0.8rem;
  border: 1px solid #e2e8f0;
  background: #fff;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.04);
}

[data-sp-embed] #cdp-customer .user-detail-demo__semantic > header strong{
  font-size: 0.74rem;
  font-weight: 800;
  color: #0f172a;
}

[data-sp-embed] #cdp-customer .user-detail-demo__funnel{
  display: grid;
  gap: 0.28rem;
}

[data-sp-embed] #cdp-customer .user-detail-demo__funnel-bar{
  display: grid;
  grid-template-columns: 1.1fr 1.2fr 1.35fr 1.5fr;
  gap: 0.18rem;
  height: 0.55rem;
}

[data-sp-embed] #cdp-customer .user-detail-demo__funnel-bar span{
  display: block;
  border-radius: 999px;
  background: #cbd5e1;
}

[data-sp-embed] #cdp-customer .user-detail-demo__funnel-bar span[data-stage="interest"]{
  background: #60a5fa;
}

[data-sp-embed] #cdp-customer .user-detail-demo__funnel-bar span[data-stage="consider"]{
  background: #a78bfa;
}

[data-sp-embed] #cdp-customer .user-detail-demo__funnel-bar span[data-stage="decide"]{
  background: #34d399;
  box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.28);
}

[data-sp-embed] #cdp-customer .user-detail-demo__funnel ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1.1fr 1.2fr 1.35fr 1.5fr;
  gap: 0.18rem;
}

[data-sp-embed] #cdp-customer .user-detail-demo__funnel li{
  color: #94a3b8;
  font-size: 0.54rem;
  font-weight: 800;
  text-align: center;
}

[data-sp-embed] #cdp-customer .user-detail-demo__funnel li.is-current{
  color: #059669;
}

[data-sp-embed] #cdp-customer .user-detail-demo__semantic-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 0.55rem;
  align-items: start;
}

[data-sp-embed] #cdp-customer .user-detail-demo__intents p, [data-sp-embed] #cdp-customer .user-detail-demo__sentiment p{
  margin: 0 0 0.3rem;
  color: #64748b;
  font-size: 0.58rem;
  font-weight: 800;
}

[data-sp-embed] #cdp-customer .user-detail-demo__intents ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.28rem;
}

[data-sp-embed] #cdp-customer .user-detail-demo__intents li{
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr) 1.2rem;
  gap: 0.28rem;
  align-items: center;
}

[data-sp-embed] #cdp-customer .user-detail-demo__intents li span{
  color: #475569;
  font-size: 0.54rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-sp-embed] #cdp-customer .user-detail-demo__intents li div{
  height: 0.38rem;
  border-radius: 999px;
  background: #f1f5f9;
  overflow: hidden;
}

[data-sp-embed] #cdp-customer .user-detail-demo__intents li i{
  display: block;
  width: var(--w, 40%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #8b5cf6, #6366f1);
  font-style: normal;
}

[data-sp-embed] #cdp-customer .user-detail-demo__intents li b{
  color: #0f172a;
  font-size: 0.58rem;
  font-weight: 800;
  text-align: right;
}

[data-sp-embed] #cdp-customer .user-detail-demo__sentiment-pill{
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #475569;
  font-size: 0.62rem;
  font-weight: 800;
}

[data-sp-embed] #cdp-customer .user-detail-demo__stats--trio{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

[data-sp-embed] #cdp-customer .user-detail-demo__stats--hero{
  gap: 0.55rem;
  width: 100%;
  margin: 0.15rem 0 0.35rem;
}

[data-sp-embed] #cdp-customer .user-detail-demo__stats--hero li{
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "icon label"
    "icon value";
  column-gap: 0.55rem;
  row-gap: 0.18rem;
  padding: 0.85rem 0.8rem;
  border-radius: 0.9rem;
  border: 1px solid #e2e8f0;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}

[data-sp-embed] #cdp-customer .user-detail-demo__stats--hero i{
  font-size: 1.35rem;
  width: 2.1rem;
  height: 2.1rem;
  display: grid;
  place-items: center;
  border-radius: 0.7rem;
  background: #f1f5f9;
}

[data-sp-embed] #cdp-customer .user-detail-demo__stats--hero span{
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #64748b;
}

[data-sp-embed] #cdp-customer .user-detail-demo__stats--hero strong{
  font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0f172a;
  line-height: 1;
}

[data-sp-embed] #cdp-customer .user-detail-demo__stats--hero li[data-stat="chat"] i{
  background: #eff6ff;
}

[data-sp-embed] #cdp-customer .user-detail-demo__stats--hero li[data-stat="action"] i{
  background: #fdf4ff;
}

[data-sp-embed] #cdp-customer .user-detail-demo__stats--hero li[data-stat="reply"] i{
  background: #ecfdf5;
}

[data-sp-embed] #cdp-customer .user-detail-demo__panel[data-user-detail-panel="analysis"].is-active{
  gap: 0.45rem;
  max-height: none;
  overflow: visible;
  align-content: start;
  padding-block: 0.35rem;
}

[data-sp-embed] #cdp-customer .user-detail-demo__journey{
  padding: 0.55rem 0.6rem 0.6rem;
  border-radius: 0.8rem;
  border: 1px solid #0f172a;
  background: linear-gradient(145deg, #0f172a 0%, #1e293b 100%);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
}

[data-sp-embed] #cdp-customer .user-detail-demo__journey > header{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  margin-bottom: 0.45rem;
}

[data-sp-embed] #cdp-customer .user-detail-demo__journey > header span{
  font-size: 0.72rem;
  font-weight: 800;
  color: #f8fafc;
  letter-spacing: 0.02em;
}

[data-sp-embed] #cdp-customer .user-detail-demo__journey-now{
  margin: 0;
  padding: 0.14rem 0.5rem;
  border-radius: 999px;
  background: rgba(52, 211, 153, 0.16);
  border: 1px solid rgba(52, 211, 153, 0.45);
  color: #a7f3d0;
  font-size: 0.56rem;
  font-weight: 700;
}

[data-sp-embed] #cdp-customer .user-detail-demo__journey-now strong{
  color: #ecfdf5;
  font-weight: 800;
}

[data-sp-embed] #cdp-customer .user-detail-demo__journey-steps{
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0.95rem 0 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.15rem;
  position: relative;
}

[data-sp-embed] #cdp-customer .user-detail-demo__journey-steps::before{
  content: "";
  position: absolute;
  top: calc(0.95rem + 0.36rem);
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg, #64748b 0%, #64748b 72%, #34d399 72%, #34d399 100%);
  z-index: 0;
}

[data-sp-embed] #cdp-customer .user-detail-demo__journey-steps li{
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.28rem;
  min-width: 0;
  text-align: center;
}

[data-sp-embed] #cdp-customer .user-detail-demo__journey-pin{
  position: absolute;
  top: -0.95rem;
  left: 50%;
  transform: translateX(-50%);
  font-style: normal;
  padding: 0.08rem 0.38rem;
  border-radius: 999px;
  background: #34d399;
  color: #064e3b;
  font-size: 0.46rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}

[data-sp-embed] #cdp-customer .user-detail-demo__journey-dot{
  display: grid;
  place-items: center;
  width: 0.72rem;
  height: 0.72rem;
  border-radius: 999px;
  background: #475569;
  border: 2px solid #1e293b;
  color: #e2e8f0;
  font-size: 0.44rem;
  font-weight: 800;
  line-height: 1;
}

[data-sp-embed] #cdp-customer .user-detail-demo__journey-steps li.is-current .user-detail-demo__journey-dot{
  width: 0.88rem;
  height: 0.88rem;
  background: #34d399;
  border-color: #ecfdf5;
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.35);
}

[data-sp-embed] #cdp-customer .user-detail-demo__journey-label{
  color: #94a3b8;
  font-size: 0.5rem;
  font-weight: 800;
  line-height: 1.2;
}

[data-sp-embed] #cdp-customer .user-detail-demo__journey-steps li.is-current .user-detail-demo__journey-label{
  color: #ecfdf5;
  font-size: 0.54rem;
}

[data-sp-embed] #cdp-customer .user-detail-demo__analysis-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 0.4rem;
}

[data-sp-embed] #cdp-customer .user-detail-demo__analysis-grid--airy{
  gap: 0.4rem;
  margin-top: 0.2rem;
}

[data-sp-embed] #cdp-customer .user-detail-demo__analysis-grid--airy .user-detail-demo__msg-history, [data-sp-embed] #cdp-customer .user-detail-demo__analysis-grid--airy .user-detail-demo__delivery{
  padding: 0.45rem 0.5rem 0.5rem;
  border-radius: 0.7rem;
  min-height: 0;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
}

[data-sp-embed] #cdp-customer .user-detail-demo__analysis-grid--airy .user-detail-demo__msg-history h4, [data-sp-embed] #cdp-customer .user-detail-demo__analysis-grid--airy .user-detail-demo__delivery h4{
  margin-bottom: 0.35rem;
  font-size: 0.68rem;
}

[data-sp-embed] #cdp-customer .user-detail-demo__analysis-grid--airy .user-detail-demo__msg-history ul, [data-sp-embed] #cdp-customer .user-detail-demo__analysis-grid--airy .user-detail-demo__delivery ul{
  gap: 0.28rem;
  height: auto;
  align-content: start;
}

[data-sp-embed] #cdp-customer .user-detail-demo__analysis-grid--airy .user-detail-demo__msg-history li{
  gap: 0.35rem;
  padding: 0.32rem 0.42rem;
  border-radius: 0.48rem;
  border-color: #e2e8f0;
  background: #fff;
  font-size: 0.62rem;
  box-shadow: none;
}

[data-sp-embed] #cdp-customer .user-detail-demo__analysis-grid--airy .user-detail-demo__msg-history li i{
  font-size: 0.78rem;
  width: 1.2rem;
  height: 1.2rem;
  display: grid;
  place-items: center;
  border-radius: 0.35rem;
  background: #f8fafc;
}

[data-sp-embed] #cdp-customer .user-detail-demo__analysis-grid--airy .user-detail-demo__msg-history li span{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-sp-embed] #cdp-customer .user-detail-demo__analysis-grid--airy .user-detail-demo__delivery li{
  gap: 0.35rem;
  padding: 0.32rem 0.42rem;
  border-radius: 0.48rem;
  border: 1px solid #e2e8f0;
  background: #fff;
  box-shadow: none;
}

[data-sp-embed] #cdp-customer .user-detail-demo__analysis-grid--airy .user-detail-demo__delivery time{
  font-size: 0.54rem;
  padding: 0.14rem 0.32rem;
  border-radius: 0.32rem;
  background: #f1f5f9;
  color: #475569;
  font-weight: 800;
}

[data-sp-embed] #cdp-customer .user-detail-demo__analysis-grid--airy .user-detail-demo__delivery strong{
  font-size: 0.62rem;
  gap: 0.22rem;
}

[data-sp-embed] #cdp-customer .user-detail-demo__analysis-grid--airy .user-detail-demo__delivery strong i{
  font-size: 0.72rem;
}

[data-sp-embed] #cdp-customer .user-detail-demo__msg-history, [data-sp-embed] #cdp-customer .user-detail-demo__delivery, [data-sp-embed] #cdp-customer .user-detail-demo__weekday, [data-sp-embed] #cdp-customer .user-detail-demo__hourly{
  padding: 0.45rem 0.5rem;
  border-radius: 0.65rem;
  border: 1px solid #e2e8f0;
  background: #fff;
}

[data-sp-embed] #cdp-customer .user-detail-demo__msg-history, [data-sp-embed] #cdp-customer .user-detail-demo__delivery{
  padding: 0.55rem 0.55rem 0.6rem;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

[data-sp-embed] #cdp-customer .user-detail-demo__msg-history h4, [data-sp-embed] #cdp-customer .user-detail-demo__delivery h4, [data-sp-embed] #cdp-customer .user-detail-demo__weekday h4, [data-sp-embed] #cdp-customer .user-detail-demo__hourly h4{
  margin: 0;
  font-size: 0.62rem;
  font-weight: 800;
  color: #0f172a;
}

[data-sp-embed] #cdp-customer .user-detail-demo__msg-history h4, [data-sp-embed] #cdp-customer .user-detail-demo__delivery h4{
  margin-bottom: 0.4rem;
  font-size: 0.74rem;
  letter-spacing: 0.01em;
}

[data-sp-embed] #cdp-customer .user-detail-demo__msg-history-note{
  margin: 0.15rem 0 0.35rem;
  color: #94a3b8;
  font-size: 0.52rem;
  font-weight: 600;
}

[data-sp-embed] #cdp-customer .user-detail-demo__msg-history ul, [data-sp-embed] #cdp-customer .user-detail-demo__delivery ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}

[data-sp-embed] #cdp-customer .user-detail-demo__msg-history li{
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.32rem 0.4rem;
  border-radius: 0.5rem;
  border: 1px solid transparent;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1.25;
  color: #0f172a;
}

[data-sp-embed] #cdp-customer .user-detail-demo__msg-history li i{
  flex-shrink: 0;
  font-style: normal;
  font-size: 0.72rem;
  line-height: 1;
}

[data-sp-embed] #cdp-customer .user-detail-demo__msg-history li span{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-sp-embed] #cdp-customer .user-detail-demo__msg-history li:nth-child(1){
  background: #eff6ff;
  border-color: rgba(37, 99, 235, 0.18);
}

[data-sp-embed] #cdp-customer .user-detail-demo__msg-history li:nth-child(2){
  background: #fdf2f8;
  border-color: rgba(219, 39, 119, 0.16);
}

[data-sp-embed] #cdp-customer .user-detail-demo__msg-history li:nth-child(3){
  background: #fff7ed;
  border-color: rgba(234, 88, 12, 0.18);
}

[data-sp-embed] #cdp-customer .user-detail-demo__msg-history li:nth-child(4){
  background: #f5f3ff;
  border-color: rgba(124, 58, 237, 0.16);
}

[data-sp-embed] #cdp-customer .user-detail-demo__delivery ul{
  gap: 0.28rem;
}

[data-sp-embed] #cdp-customer .user-detail-demo__delivery li{
  display: grid;
  grid-template-columns: 2.35rem minmax(0, 1fr);
  gap: 0.35rem;
  align-items: center;
  padding: 0.32rem 0.38rem;
  border-radius: 0.5rem;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #0f172a;
}

[data-sp-embed] #cdp-customer .user-detail-demo__delivery li:nth-child(1){
  background: #f0fdf4;
  border-color: rgba(16, 185, 129, 0.22);
}

[data-sp-embed] #cdp-customer .user-detail-demo__delivery li:nth-child(2){
  background: #eff6ff;
  border-color: rgba(37, 99, 235, 0.18);
}

[data-sp-embed] #cdp-customer .user-detail-demo__delivery li:nth-child(3){
  background: #fff7ed;
  border-color: rgba(234, 88, 12, 0.18);
}

[data-sp-embed] #cdp-customer .user-detail-demo__delivery time{
  display: grid;
  place-items: center;
  min-height: 1.35rem;
  padding: 0.1rem 0.15rem;
  border-radius: 0.35rem;
  background: #0f172a;
  color: #fff;
  font-size: 0.48rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-align: center;
}

[data-sp-embed] #cdp-customer .user-detail-demo__delivery li > div{
  min-width: 0;
  display: grid;
  gap: 0.08rem;
}

[data-sp-embed] #cdp-customer .user-detail-demo__delivery strong{
  display: flex;
  align-items: center;
  gap: 0.22rem;
  min-width: 0;
  font-size: 0.58rem;
  font-weight: 800;
  line-height: 1.25;
  color: #0f172a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-sp-embed] #cdp-customer .user-detail-demo__delivery strong i{
  flex-shrink: 0;
  font-style: normal;
  font-size: 0.62rem;
  line-height: 1;
}

[data-sp-embed] #cdp-customer .user-detail-demo__delivery em{
  font-style: normal;
  width: fit-content;
  padding: 0.06rem 0.28rem;
  border-radius: 999px;
  background: #dcfce7;
  color: #15803d;
  font-size: 0.42rem;
  font-weight: 800;
}

[data-sp-embed] #cdp-customer .user-detail-demo__activity-duo{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.4rem;
}

[data-sp-embed] #cdp-customer .user-detail-demo__weekday-bars, [data-sp-embed] #cdp-customer .user-detail-demo__hourly-bars{
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.12rem;
  min-height: 2.65rem;
}

[data-sp-embed] #cdp-customer .user-detail-demo__weekday-bars li, [data-sp-embed] #cdp-customer .user-detail-demo__hourly-bars li{
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0.12rem;
  min-width: 0;
}

[data-sp-embed] #cdp-customer .user-detail-demo__weekday-bars i, [data-sp-embed] #cdp-customer .user-detail-demo__hourly-bars i{
  display: block;
  width: 100%;
  max-width: 0.85rem;
  height: max(2px, calc(var(--h, 0) * 2.35rem));
  border-radius: 0.25rem 0.25rem 0.1rem 0.1rem;
  background: #cbd5e1;
  font-style: normal;
}

[data-sp-embed] #cdp-customer .user-detail-demo__weekday-bars li.is-peak i, [data-sp-embed] #cdp-customer .user-detail-demo__hourly-bars li.is-peak i{
  background: linear-gradient(180deg, #6366f1, #4f46e5);
}

[data-sp-embed] #cdp-customer .user-detail-demo__weekday-bars span, [data-sp-embed] #cdp-customer .user-detail-demo__hourly-bars span{
  color: #94a3b8;
  font-size: 0.5rem;
  font-weight: 800;
}

[data-sp-embed] #cdp-customer .user-detail-demo__weekday-bars b{
  color: #64748b;
  font-size: 0.48rem;
  font-weight: 800;
}

[data-sp-embed] #cdp-customer .user-detail-demo__activity-peaks{
  margin: 0.35rem 0 0;
  color: #64748b;
  font-size: 0.5rem;
  font-weight: 700;
  line-height: 1.35;
}

[data-sp-embed] #cdp-customer .user-detail-demo__activity-peaks strong{
  color: #4f46e5;
  font-weight: 800;
}

[data-sp-embed] #cdp-customer .user-detail-demo__panel[data-user-detail-panel="survey"].is-active{
  gap: 0.55rem;
  max-height: none;
  overflow: visible;
  height: 100%;
  align-content: stretch;
  grid-template-rows: auto 1fr;
}

[data-sp-embed] #cdp-customer .user-detail-demo__survey-head{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(7.5rem, 0.95fr);
  gap: 0.55rem;
  align-items: center;
  padding: 0.55rem 0.65rem;
  border-radius: 0.7rem;
  border: 1px solid #e2e8f0;
  background: #fff;
}

[data-sp-embed] #cdp-customer .user-detail-demo__survey-total{
  margin: 0;
  font-size: 0.72rem;
  font-weight: 800;
  color: #0f172a;
}

[data-sp-embed] #cdp-customer .user-detail-demo__survey-total strong{
  font-size: 0.95rem;
}

[data-sp-embed] #cdp-customer .user-detail-demo__survey-sub{
  margin: 0.08rem 0 0;
  color: #64748b;
  font-size: 0.54rem;
  font-weight: 700;
}

[data-sp-embed] #cdp-customer .user-detail-demo__survey-chart{
  min-width: 0;
}

[data-sp-embed] #cdp-customer .user-detail-demo__survey-chart > p{
  margin: 0 0 0.22rem;
  color: #64748b;
  font-size: 0.5rem;
  font-weight: 800;
}

[data-sp-embed] #cdp-customer .user-detail-demo__survey-chart ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.18rem;
  min-height: 2.1rem;
}

[data-sp-embed] #cdp-customer .user-detail-demo__survey-chart li{
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0.12rem;
  min-width: 0;
}

[data-sp-embed] #cdp-customer .user-detail-demo__survey-chart li::before{
  content: "";
  display: block;
  width: 100%;
  max-width: 0.7rem;
  height: max(2px, calc(var(--h, 0.4) * 1.55rem));
  border-radius: 0.2rem 0.2rem 0.08rem 0.08rem;
  background: #93c5fd;
}

[data-sp-embed] #cdp-customer .user-detail-demo__survey-chart li.is-peak::before{
  background: #2563eb;
}

[data-sp-embed] #cdp-customer .user-detail-demo__survey-chart span{
  color: #94a3b8;
  font-size: 0.42rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

[data-sp-embed] #cdp-customer .user-detail-demo__survey-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-rows: repeat(3, minmax(3.4rem, 1fr));
  gap: 0.5rem;
  min-height: 0;
  height: 100%;
}

[data-sp-embed] #cdp-customer .user-detail-demo__survey-card{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.55rem;
  align-items: center;
  min-height: 3.4rem;
  padding: 0.7rem 0.75rem;
  border-radius: 0.8rem;
  border: 1px solid #e2e8f0;
  background: #fff;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
}

[data-sp-embed] #cdp-customer .user-detail-demo__survey-card-icon{
  display: grid;
  place-items: center;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 999px;
  background: #f1f5f9;
  font-size: 0.95rem;
  line-height: 1;
}

[data-sp-embed] #cdp-customer .user-detail-demo__survey-card-body{
  min-width: 0;
  display: grid;
  gap: 0;
}

[data-sp-embed] #cdp-customer .user-detail-demo__survey-card-body strong{
  font-size: 0.78rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.3;
}

[data-sp-embed] #cdp-customer .user-detail-demo__survey-count{
  display: none;
}

[data-sp-embed] #cdp-customer .user-detail-demo__survey-btn{
  appearance: none;
  border: 0;
  padding: 0.42rem 0.65rem;
  border-radius: 0.5rem;
  background: #0f172a;
  color: #fff;
  font: inherit;
  font-size: 0.58rem;
  font-weight: 800;
  white-space: nowrap;
  cursor: default;
}

[data-sp-embed] #cdp-customer .user-detail-demo__panel[data-user-detail-panel="payment"].is-active{
  gap: 0.4rem;
  max-height: none;
  overflow: visible;
  height: 100%;
  align-content: start;
}

[data-sp-embed] #cdp-customer .user-detail-demo__pay-stats{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.3rem;
}

[data-sp-embed] #cdp-customer .user-detail-demo__pay-stats li{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "icon label"
    "icon value";
  column-gap: 0.28rem;
  row-gap: 0.06rem;
  align-items: center;
  padding: 0.4rem 0.42rem;
  border-radius: 0.6rem;
  border: 1px solid #e2e8f0;
  background: #fff;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.04);
}

[data-sp-embed] #cdp-customer .user-detail-demo__pay-stats i{
  grid-area: icon;
  font-style: normal;
  font-size: 0.78rem;
  line-height: 1;
}

[data-sp-embed] #cdp-customer .user-detail-demo__pay-stats span{
  grid-area: label;
  color: #94a3b8;
  font-size: 0.46rem;
  font-weight: 800;
  line-height: 1.2;
}

[data-sp-embed] #cdp-customer .user-detail-demo__pay-stats strong{
  grid-area: value;
  font-size: 0.72rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

[data-sp-embed] #cdp-customer .user-detail-demo__pay-methods{
  padding: 0.42rem 0.48rem 0.48rem;
  border-radius: 0.7rem;
  border: 1px solid #e2e8f0;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

[data-sp-embed] #cdp-customer .user-detail-demo__pay-methods h4{
  margin: 0 0 0.35rem;
  font-size: 0.58rem;
  font-weight: 800;
  color: #0f172a;
}

[data-sp-embed] #cdp-customer .user-detail-demo__pay-methods ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem;
}

[data-sp-embed] #cdp-customer .user-detail-demo__pay-method{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.4rem;
  align-items: center;
  min-width: 0;
  padding: 0.45rem 0.5rem;
  border-radius: 0.65rem;
  border: 1px solid transparent;
  color: #fff;
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.12);
}

[data-sp-embed] #cdp-customer .user-detail-demo__pay-method--sony{
  background: linear-gradient(135deg, #1f2937 0%, #111827 70%);
  border-color: rgba(15, 23, 42, 0.35);
}

[data-sp-embed] #cdp-customer .user-detail-demo__pay-method--stripe{
  background: linear-gradient(135deg, #635bff 0%, #4f46e5 75%);
  border-color: rgba(79, 70, 229, 0.35);
}

[data-sp-embed] #cdp-customer .user-detail-demo__pay-method div{
  min-width: 0;
  display: grid;
  gap: 0.08rem;
}

[data-sp-embed] #cdp-customer .user-detail-demo__pay-method b{
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.2;
  opacity: 0.95;
}

[data-sp-embed] #cdp-customer .user-detail-demo__pay-brand{
  position: relative;
  flex-shrink: 0;
  width: 1.55rem;
  height: 1rem;
  border-radius: 0.22rem;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
}

[data-sp-embed] #cdp-customer .user-detail-demo__pay-brand--mc::before, [data-sp-embed] #cdp-customer .user-detail-demo__pay-brand--mc::after{
  content: "";
  position: absolute;
  top: 50%;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  transform: translateY(-50%);
}

[data-sp-embed] #cdp-customer .user-detail-demo__pay-brand--mc::before{
  left: 0.22rem;
  background: #eb001b;
}

[data-sp-embed] #cdp-customer .user-detail-demo__pay-brand--mc::after{
  right: 0.22rem;
  background: #f79e1b;
  opacity: 0.92;
}

[data-sp-embed] #cdp-customer .user-detail-demo__pay-brand--amex{
  background: #2e77bc;
}

[data-sp-embed] #cdp-customer .user-detail-demo__pay-brand--amex::before{
  content: "AX";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 0.38rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

[data-sp-embed] #cdp-customer .user-detail-demo__pay-history{
  min-width: 0;
  padding: 0.42rem 0.48rem 0.48rem;
  border-radius: 0.7rem;
  border: 1px solid #e2e8f0;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

[data-sp-embed] #cdp-customer .user-detail-demo__pay-history-tabs{
  display: inline-flex;
  gap: 0.15rem;
  margin-bottom: 0.4rem;
  padding: 0.12rem;
  border-radius: 999px;
  background: #eef2ff;
}

[data-sp-embed] #cdp-customer .user-detail-demo__pay-history-tabs button{
  appearance: none;
  border: 0;
  background: transparent;
  color: #64748b;
  font: inherit;
  font-size: 0.5rem;
  font-weight: 800;
  padding: 0.22rem 0.5rem;
  border-radius: 999px;
  cursor: default;
}

[data-sp-embed] #cdp-customer .user-detail-demo__pay-history-tabs button.is-on{
  background: #4f46e5;
  color: #fff;
  box-shadow: 0 4px 10px rgba(79, 70, 229, 0.28);
}

[data-sp-embed] #cdp-customer .user-detail-demo__pay-rows{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.28rem;
}

[data-sp-embed] #cdp-customer .user-detail-demo__pay-rows li{
  display: grid;
  grid-template-columns: 2.35rem minmax(0, 1fr) auto;
  gap: 0.4rem;
  align-items: center;
  padding: 0.38rem 0.42rem;
  border-radius: 0.55rem;
  border: 1px solid #e2e8f0;
  background: #fff;
}

[data-sp-embed] #cdp-customer .user-detail-demo__pay-rows time{
  display: grid;
  place-items: center;
  min-height: 1.45rem;
  padding: 0.1rem 0.15rem;
  border-radius: 0.4rem;
  background: #0f172a;
  color: #fff;
  font-size: 0.48rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

[data-sp-embed] #cdp-customer .user-detail-demo__pay-rows div{
  min-width: 0;
  display: grid;
  gap: 0.06rem;
}

[data-sp-embed] #cdp-customer .user-detail-demo__pay-rows strong{
  font-size: 0.58rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.2;
}

[data-sp-embed] #cdp-customer .user-detail-demo__pay-rows span{
  color: #64748b;
  font-size: 0.46rem;
  font-weight: 700;
}

[data-sp-embed] #cdp-customer .user-detail-demo__pay-rows b{
  font-size: 0.62rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
}

[data-sp-embed] #cdp-customer .user-detail-demo__tab{
  font-size: 0.64rem;
  padding: 0.34rem 0.55rem;
}

@media (max-width: 760px) {
  [data-sp-embed] #cdp-customer .ai-insight-card__preview--side-crop, [data-sp-embed] #cdp-customer .user-detail-demo, [data-sp-embed] #cdp-customer .user-detail-demo__main{
    overflow: visible;
  }

  [data-sp-embed] #cdp-customer .user-detail-demo{
    grid-template-columns: 1fr;
    padding: 0.7rem 0.65rem 0.95rem;
    gap: 0.75rem;
  }

  [data-sp-embed] #cdp-customer .user-detail-demo__main{
    padding: 0.65rem 0.6rem 0.85rem;
    gap: 0.65rem;
  }

  [data-sp-embed] #cdp-customer .user-detail-demo__tabs{
    width: 100%;
    justify-content: flex-start;
  }

  [data-sp-embed] #cdp-customer .user-detail-demo__tab{
    font-size: 0.7rem;
    padding: 0.38rem 0.7rem;
  }

  [data-sp-embed] #cdp-customer .user-detail-demo__stats{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  [data-sp-embed] #cdp-customer .user-detail-demo__semantic-grid, [data-sp-embed] #cdp-customer .user-detail-demo__activity-duo, [data-sp-embed] #cdp-customer .user-detail-demo__analysis-grid, [data-sp-embed] #cdp-customer .user-detail-demo__analysis-grid--airy{
    grid-template-columns: 1fr;
    gap: 0.55rem;
  }

  [data-sp-embed] #cdp-customer .user-detail-demo__msg-history, [data-sp-embed] #cdp-customer .user-detail-demo__delivery{
    padding: 0.55rem 0.55rem 0.6rem;
  }

  [data-sp-embed] #cdp-customer .user-detail-demo__msg-history h4, [data-sp-embed] #cdp-customer .user-detail-demo__delivery h4{
    margin-bottom: 0.35rem;
    font-size: 0.68rem;
  }

  [data-sp-embed] #cdp-customer .user-detail-demo__msg-history ul, [data-sp-embed] #cdp-customer .user-detail-demo__delivery ul{
    gap: 0.35rem;
  }

  [data-sp-embed] #cdp-customer .user-detail-demo__msg-history li{
    padding: 0.38rem 0.45rem;
    font-size: 0.62rem;
  }

  [data-sp-embed] #cdp-customer .user-detail-demo__msg-history li span, [data-sp-embed] #cdp-customer .user-detail-demo__analysis-grid--airy .user-detail-demo__msg-history li span, [data-sp-embed] #cdp-customer .user-detail-demo__delivery strong, [data-sp-embed] #cdp-customer .user-detail-demo__analysis-grid--airy .user-detail-demo__delivery strong{
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    line-height: 1.35;
  }

  [data-sp-embed] #cdp-customer .user-detail-demo__delivery li{
    grid-template-columns: 2.4rem minmax(0, 1fr);
    gap: 0.4rem;
    padding: 0.38rem 0.45rem;
  }

  [data-sp-embed] #cdp-customer .user-detail-demo__delivery strong{
    font-size: 0.62rem;
  }

  [data-sp-embed] #cdp-customer .user-detail-demo__delivery em{
    font-size: 0.42rem;
    padding: 0.06rem 0.28rem;
  }

  [data-sp-embed] #cdp-customer .user-detail-demo__stats--trio, [data-sp-embed] #cdp-customer .user-detail-demo__stats--hero{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.4rem;
  }

  [data-sp-embed] #cdp-customer .user-detail-demo__stats--hero li{
    padding: 0.65rem 0.35rem;
    justify-items: center;
    text-align: center;
    grid-template-columns: 1fr;
    grid-template-areas:
      "icon"
      "label"
      "value";
    row-gap: 0.22rem;
    min-width: 0;
  }

  [data-sp-embed] #cdp-customer .user-detail-demo__stats--hero i{
    width: 1.7rem;
    height: 1.7rem;
    font-size: 1rem;
  }

  [data-sp-embed] #cdp-customer .user-detail-demo__stats--hero span{
    font-size: 0.52rem;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.25;
  }

  [data-sp-embed] #cdp-customer .user-detail-demo__stats--hero strong{
    font-size: 1.15rem;
  }

  [data-sp-embed] #cdp-customer .user-detail-demo__pay-stats{
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }

  [data-sp-embed] #cdp-customer .user-detail-demo__pay-stats li{
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "icon label value";
    column-gap: 0.55rem;
    row-gap: 0;
    align-items: center;
    padding: 0.55rem 0.65rem;
  }

  [data-sp-embed] #cdp-customer .user-detail-demo__pay-stats span{
    font-size: 0.62rem;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.3;
  }

  [data-sp-embed] #cdp-customer .user-detail-demo__pay-stats strong{
    font-size: 0.82rem;
    letter-spacing: 0;
    white-space: nowrap;
    justify-self: end;
  }

  [data-sp-embed] #cdp-customer .user-detail-demo__pay-methods ul{
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }

  [data-sp-embed] #cdp-customer .user-detail-demo__pay-history-tabs{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }

  [data-sp-embed] #cdp-customer .user-detail-demo__pay-history-tabs button{
    font-size: 0.58rem;
    padding: 0.28rem 0.55rem;
  }

  [data-sp-embed] #cdp-customer .user-detail-demo__pay-rows li{
    gap: 0.45rem;
    padding: 0.45rem 0.5rem;
  }

  [data-sp-embed] #cdp-customer .user-detail-demo__pay-rows strong{
    font-size: 0.64rem;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  [data-sp-embed] #cdp-customer .user-detail-demo__survey-head{
    grid-template-columns: 1fr;
    gap: 0.55rem;
  }

  [data-sp-embed] #cdp-customer .user-detail-demo__survey-card{
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.4rem;
    align-items: center;
    padding: 0.55rem 0.6rem;
  }

  [data-sp-embed] #cdp-customer .user-detail-demo__survey-card-body strong{
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: 0.68rem;
  }

  [data-sp-embed] #cdp-customer .user-detail-demo__survey-btn{
    grid-column: auto;
    justify-self: end;
    margin-top: 0;
    flex-shrink: 0;
    font-size: 0.52rem;
    padding: 0.36rem 0.5rem;
  }

  [data-sp-embed] #cdp-customer .user-detail-demo__weekday, [data-sp-embed] #cdp-customer .user-detail-demo__hourly{
    padding: 0.55rem 0.55rem 0.7rem;
  }

  [data-sp-embed] #cdp-customer .user-detail-demo__weekday-bars, [data-sp-embed] #cdp-customer .user-detail-demo__hourly-bars{
    min-height: 3rem;
    gap: 0.2rem;
    padding-bottom: 0.15rem;
  }

  [data-sp-embed] #cdp-customer .user-detail-demo__weekday-bars span, [data-sp-embed] #cdp-customer .user-detail-demo__hourly-bars span, [data-sp-embed] #cdp-customer .user-detail-demo__weekday-bars b{
    font-size: 0.54rem;
    line-height: 1.2;
  }

  [data-sp-embed] #cdp-customer .user-detail-demo__journey{
    padding-inline: 0.55rem;
  }

  [data-sp-embed] #cdp-customer .user-detail-demo__journey-label{
    font-size: 0.52rem;
    white-space: nowrap;
  }

  [data-sp-embed] #cdp-customer .hero-split-copy .ai-insight-tags--story{
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    max-width: 100%;
    margin-top: 0.85rem;
    padding-bottom: 0.35rem;
  }

  [data-sp-embed] #cdp-customer .hero-split-copy .ai-insight-tags--story .ai-insight-tag{
    white-space: nowrap;
    max-width: 100%;
  }

  [data-sp-embed] #cdp-customer .user-detail-demo__profile{
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "avatar name"
      "avatar sub"
      "platforms-label platforms-label"
      "platforms platforms";
    column-gap: 0.55rem;
    row-gap: 0.2rem;
    justify-items: stretch;
    align-content: center;
    padding: 0.55rem 0.55rem 0.6rem;
  }

  [data-sp-embed] #cdp-customer .user-detail-demo__avatar{
    grid-area: avatar;
    margin: 0;
    align-self: center;
    width: 2.35rem;
    height: 2.35rem;
    font-size: 0.82rem;
  }

  [data-sp-embed] #cdp-customer .user-detail-demo__name{
    grid-area: name;
    text-align: left;
    align-self: end;
    font-size: 0.78rem;
    line-height: 1.25;
  }

  [data-sp-embed] #cdp-customer .user-detail-demo__sub{
    grid-area: sub;
    text-align: left;
    align-self: start;
    font-size: 0.58rem;
    line-height: 1.3;
  }

  [data-sp-embed] #cdp-customer .user-detail-demo__platforms-label{
    grid-area: platforms-label;
    text-align: left;
    margin-top: 0.2rem;
    font-size: 0.52rem;
  }

  [data-sp-embed] #cdp-customer .user-detail-demo__platforms{
    grid-area: platforms;
    justify-content: flex-start;
    gap: 0.2rem;
  }

  [data-sp-embed] #cdp-customer .user-detail-demo__platforms li{
    padding: 0.18rem 0.4rem;
    font-size: 0.54rem;
  }
}

@media (min-width: 900px) {
  [data-sp-embed] #cdp-customer.ai-insight-card--hero-split{
    grid-template-columns: minmax(0, 3.9fr) minmax(0, 1fr);
    column-gap: clamp(12px, 1.6vw, 24px);
  }
}

/* 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}