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

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

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

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

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

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

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

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

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

[data-sp-embed][lang="en"] .contact h2{
  font-size: clamp(1.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="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.28rem, 5vw, 1.85rem);
    line-height: 1.28;
  }

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

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

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

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

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

  [data-sp-embed][lang="en"] .contact h2, [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.15rem, 5.2vw, 1.45rem);
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Title floats: show immediately (decode wait made them feel late) */
[data-sp-embed].js .hero-float:not(.is-media-ready), [data-sp-embed].js .hero-float.is-ready{
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[data-sp-embed].js .hero-center.reveal:not(.visible) .hero-title-float{
  opacity: 0;
  transform: translateY(1.35rem) scale(0.97);
  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-subtitle{
  width: 100%;
  max-width: 36em;
  margin: 0 auto;
  font-size: clamp(1.5rem, 1.1vw + 1.15rem, 1.9rem);
  font-weight: 400;
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  color: var(--ink);
  word-break: normal;
  line-break: auto;
  white-space: pre-line;
  text-align: center;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Soft wordmark float for MA / CDP */
[data-sp-embed].js .platform-stage__copy.reveal:not(.visible) .growth-fade--soft, [data-sp-embed].js .cdp-stage__copy.reveal:not(.visible) .growth-fade--soft, [data-sp-embed].js .section-heading.reveal:not(.visible) .growth-fade--soft, [data-sp-embed].js .showcase-copy.reveal--stagger:not(.visible) .growth-fade--soft, [data-sp-embed].js .contact-inner.reveal--stagger:not(.visible) .growth-fade--soft{
  opacity: 0;
  transform: translateY(1.5rem) scale(0.97);
  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: var(--accent-red);
  font-weight: 600;
  background: linear-gradient(
    105deg,
    rgba(254, 202, 202, 0.95),
    rgba(254, 215, 170, 0.85)
  );
  background-repeat: no-repeat;
  background-size: 100% 0.4em;
  background-position: 0 88%;
  padding: 0 0.06em;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  /* iPad寄り: 説明文なし／タグ＋画像のみ */
  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.ai-insights-bento--marquee .ai-insight-card__body, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.ai-insights-bento--marquee .hero-split-copy{
    order: 3;
    display: flex !important;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0.55rem 0.75rem 0.8rem !important;
  }

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[data-sp-embed] .ai-insight-card__body{
  padding: 18px 20px 20px;
}

[data-sp-embed] .ai-insight-card__body h3{
  margin: 0 0 8px;
  font-size: clamp(16px, 1.4vw + 0.35rem, 18px);
  font-weight: 700;
  letter-spacing: 0.02em;
}

[data-sp-embed] .ai-insight-card__body p{
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.75;
  font-weight: 500;
}

[data-sp-embed] .ai-insight-card__body p .text-accent-em{
  color: var(--muted);
  font-weight: 600;
  background: none;
  padding: 0;
}

[data-sp-embed] .ai-insight-phases{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

[data-sp-embed] .ai-insight-phases span{
  padding: 4px 10px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #6b7280;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

[data-sp-embed] .ai-insight-phases span.is-active{
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
  color: #fff;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25);
}

[data-sp-embed] .ai-insight-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-sp-embed] .ai-insight-tags li{
  padding: 5px 11px;
  border-radius: 8px;
  border: 1px solid rgba(220, 38, 38, 0.14);
  background: rgba(255, 255, 255, 0.9);
  color: var(--accent-red);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
}

/* Story tags: title-only cards, color-coded chips */
[data-sp-embed] .ai-insight-card__body:not(:has(> p)) h3{
  margin-bottom: 14px;
}

[data-sp-embed] .ai-insight-tags--story{
  gap: 10px 12px;
}

[data-sp-embed] .ai-insight-tags--story .ai-insight-tag, [data-sp-embed] .ai-insight-tags--story li.ai-insight-tag{
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.4;
  transform-origin: center;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

[data-sp-embed] .ai-insight-tag__icon{
  font-size: 1.05em;
  line-height: 1;
  opacity: 0.82;
}

[data-sp-embed] .ai-insight-card--link:hover .ai-insight-tags--story .ai-insight-tag:not(.ai-insight-tag--cms){
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.06);
}

[data-sp-embed] .ai-insight-tags--story .ai-insight-tag--system{
  color: #4b5563;
  background: #f5f6f7;
  border-color: rgba(75, 85, 99, 0.12);
}

[data-sp-embed] .ai-insight-tags--story .ai-insight-tag--channel{
  color: #9f1239;
  background: rgba(225, 29, 72, 0.04);
  border-color: rgba(225, 29, 72, 0.12);
}

[data-sp-embed] .ai-insight-tags--story .ai-insight-tag--ai{
  color: #6d28d9;
  background: rgba(124, 58, 237, 0.05);
  border-color: rgba(124, 58, 237, 0.14);
}

[data-sp-embed] .ai-insight-tags--story .ai-insight-tag--salesforce{
  color: #0284c7;
  background: rgba(14, 165, 233, 0.07);
  border-color: rgba(14, 165, 233, 0.18);
}

[data-sp-embed] .ai-insight-tags--story .ai-insight-tag--content{
  color: #57534e;
  background: rgba(120, 113, 108, 0.05);
  border-color: rgba(120, 113, 108, 0.12);
}

[data-sp-embed] .ai-insight-tags--story .ai-insight-tag--inquiry{
  color: #1e3a5f;
  background: rgba(59, 130, 246, 0.04);
  border-color: rgba(59, 130, 246, 0.12);
}

[data-sp-embed] .ai-insight-tags--story .ai-insight-tag--log{
  color: #134e4a;
  background: rgba(20, 184, 166, 0.04);
  border-color: rgba(20, 184, 166, 0.12);
}

[data-sp-embed] .ai-insight-tags--story .ai-insight-tag--cms{
  --tag-glow: transparent;
  flex-basis: 100%;
  width: max-content;
  max-width: 100%;
  margin-top: 6px;
  padding: 0;
  gap: 0.45em;
  color: var(--muted);
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.03em;
}

[data-sp-embed] .ai-insight-card--link:hover .ai-insight-tags--story .ai-insight-tag--cms{
  transform: none;
  box-shadow: none;
}

[data-sp-embed] .ai-insight-tag__cms-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0.16em 0.72em;
  border-radius: 999px;
  background: transparent;
  border: 1px solid rgba(194, 65, 12, 0.45);
  color: #c2410c;
  font-size: 0.84em;
  font-weight: 700;
  letter-spacing: 0.1em;
  box-shadow: none;
}

[data-sp-embed] .ai-insight-tag__arrow{
  opacity: 0.55;
  color: var(--muted);
}

@keyframes tag-fuwa-in {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.96);
    filter: blur(4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

[data-sp-embed].js .reveal:not(.visible) .ai-insight-tags--story .ai-insight-tag{
  opacity: 0;
  transform: translateY(14px) scale(0.96);
  filter: blur(4px);
}

[data-sp-embed].js .reveal.visible .ai-insight-tags--story .ai-insight-tag{
  animation: tag-fuwa-in 0.72s cubic-bezier(0.22, 1, 0.36, 1) both;
}

[data-sp-embed].js .reveal.visible .ai-insight-tags--story .ai-insight-tag:nth-child(1){
  animation-delay: 0.12s;
}
[data-sp-embed].js .reveal.visible .ai-insight-tags--story .ai-insight-tag:nth-child(2){
  animation-delay: 0.24s;
}
[data-sp-embed].js .reveal.visible .ai-insight-tags--story .ai-insight-tag:nth-child(3){
  animation-delay: 0.36s;
}
[data-sp-embed].js .reveal.visible .ai-insight-tags--story .ai-insight-tag:nth-child(4){
  animation-delay: 0.48s;
}
[data-sp-embed].js .reveal.visible .ai-insight-tags--story .ai-insight-tag:nth-child(5){
  animation-delay: 0.6s;
}
[data-sp-embed].js .reveal.visible .ai-insight-tags--story .ai-insight-tag:nth-child(6){
  animation-delay: 0.72s;
}
[data-sp-embed].js .reveal.visible .ai-insight-tags--story .ai-insight-tag:nth-child(7){
  animation-delay: 0.84s;
}

[data-sp-embed].js .reveal.visible .ai-insight-tags--story .ai-insight-tag--cms{
  box-shadow: none;
}

[data-sp-embed] .ai-insight-card__cta{
  display: inline-flex;
  width: 100%;
  min-height: 52px;
  margin-top: 16px;
  padding: 0 24px;
  font-size: 15px;
  letter-spacing: 0.05em;
  border-radius: 12px;
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
  box-shadow: 0 8px 24px rgba(220, 38, 38, 0.28);
  color: #fff;
  transition: background 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

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

[data-sp-embed] .ai-insight-card__cta span::after{
  content: " →";
  font-weight: 700;
}

[data-sp-embed] .ai-insight-card--wide{
  background: linear-gradient(135deg, #fff 0%, #fff5f6 55%, #fce9ee 100%);
}

[data-sp-embed] .ai-insight-card--compact{
  background: linear-gradient(135deg, #fff 0%, #fafafa 100%);
  border-style: dashed;
  border-color: rgba(220, 38, 38, 0.18);
}

[data-sp-embed] .ai-insight-card--wide .ai-insight-card__preview--inline{
  padding: clamp(10px, 1.4vw, 14px);
  border-bottom: none;
}

[data-sp-embed] .ai-insight-card--wide .ai-insight-card__preview--inline img{
  border-radius: 10px;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: top center;
}

@media (min-width: 900px) {
  [data-sp-embed] .analysis-insights-bento .ai-insight-card--wide:not(.ai-insight-card--compact):not(.ai-insight-card--wide-stack):not(.ai-insight-card--hero-split){
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: stretch;
  }

  [data-sp-embed] .analysis-insights-bento .ai-insight-card--wide:not(.ai-insight-card--compact):not(.ai-insight-card--wide-stack) .ai-insight-card__preview--inline{
    padding: clamp(10px, 1.4vw, 14px);
    border-bottom: none;
    border-right: 1px solid rgba(220, 38, 38, 0.08);
    display: block;
  }

  [data-sp-embed] .analysis-insights-bento .ai-insight-card--wide:not(.ai-insight-card--compact):not(.ai-insight-card--wide-stack) .ai-insight-card__preview--inline img{
    border-radius: 10px;
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: top center;
  }

  [data-sp-embed] .analysis-insights-bento .ai-insight-card--wide:not(.ai-insight-card--compact):not(.ai-insight-card--wide-stack) .ai-insight-card__body--split{
    padding: 18px 20px;
  }
}

/* フル幅・縦積み：画像を潰さず自然な比率で表示（予測分析など横長ダッシュボード向け） */
[data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--wide-stack{
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
}

[data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--wide-stack .ai-insight-card__preview, [data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--wide-stack .ai-insight-card__preview--inline{
  padding: clamp(12px, 1.6vw, 18px);
  aspect-ratio: auto;
  border-bottom: 1px solid rgba(220, 38, 38, 0.08);
  background: #f8fafc;
  overflow: visible;
}

[data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--wide-stack .ai-insight-card__preview--inline img, [data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--wide-stack .ai-insight-card__preview img{
  display: block;
  width: 100%;
  height: auto;
  max-height: min(52vh, 420px);
  aspect-ratio: auto;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  object-fit: contain;
  object-position: top center;
  background: #fff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

[data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--wide-stack .ai-insight-card__body{
  padding: clamp(18px, 2vw, 26px) clamp(18px, 2vw, 28px) clamp(20px, 2.2vw, 28px);
}

/* 管理・分析・AI：縦積みヒーロー（左右交互） */
[data-sp-embed] .ai-insights-bento--pair.ai-insights-bento--hero{
  --hero-block-gap: clamp(44px, 6.5vw, 88px);
  gap: var(--hero-block-gap);
}

/* セクション内：機能ブロックごとの区切り線 */
[data-sp-embed] .ai-insights-bento--pair.ai-insights-bento--hero > .ai-insight-card + .ai-insight-card{
  position: relative;
}

[data-sp-embed] .ai-insights-bento--pair.ai-insights-bento--hero > .ai-insight-card + .ai-insight-card::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--hero-block-gap) / -2);
  height: 1px;
  background: rgba(15, 23, 42, 0.12);
  pointer-events: none;
}

/* 見出し〜機能のあいだにセクション線 */
[data-sp-embed] .band-management .showcase--analysis-full > .showcase-capabilities.analysis-capabilities, [data-sp-embed] .band-analysis .showcase--analysis-full > .showcase-capabilities.analysis-capabilities, [data-sp-embed] .band-marketing .showcase--analysis-full > .showcase-capabilities.analysis-capabilities, [data-sp-embed] .band-ai .showcase--ai-full > .showcase-capabilities.ai-analysis-capabilities{
  margin-top: clamp(28px, 3.5vw, 44px);
  padding-top: clamp(32px, 4vw, 52px);
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  overflow-x: visible;
}

/* ヒーロー分割：一セクション感のある画像＋テキスト（左右交互） */
[data-sp-embed] .ai-insights-bento.ai-insights-bento--pair > .ai-insight-card.ai-insight-card--hero-split{
  grid-column: 1 / -1;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "title"
    "media"
    "body";
  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;
}

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

[data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--hero-split:hover, [data-sp-embed].js #showcases .reveal.visible .ai-insights-bento:not(.ai-insights-bento--mgmt-carousel) .ai-insight-card--hero-split, [data-sp-embed].js #showcases .reveal.visible .ai-insights-bento:not(.ai-insights-bento--mgmt-carousel) .ai-insight-card--hero-split:hover{
  transform: none;
  border-color: transparent;
  box-shadow: none;
}

/* ブラウザ風ウィンドウ枠（信号機バー） */
[data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--hero-split .ai-insight-card__preview::before{
  content: "";
  display: block !important;
  flex: 0 0 auto;
  height: 30px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-bottom: none;
  border-radius: 14px 14px 0 0;
  background:
    radial-gradient(circle at 15px 50%, #f87171 0 4.5px, transparent 5.5px),
    radial-gradient(circle at 32px 50%, #fbbf24 0 4.5px, transparent 5.5px),
    radial-gradient(circle at 49px 50%, #4ade80 0 4.5px, transparent 5.5px),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

[data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--hero-split .ai-insight-card__preview{
  margin: 0;
  padding: 0 !important;
  aspect-ratio: auto;
  background: transparent !important;
  border: none;
  border-radius: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  transition: transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

[data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--hero-split .ai-insight-card__preview img, [data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--hero-split .ai-insight-card__preview > video{
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  aspect-ratio: auto;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-top: none !important;
  border-radius: 0 0 14px 14px;
  object-fit: contain;
  object-position: top left;
  background: #fff;
  box-shadow:
    0 28px 64px rgba(15, 23, 42, 0.12),
    0 2px 0 rgba(255, 255, 255, 0.65) inset;
  transition: transform 620ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 620ms ease;
}

/* 動画：左右クロップを維持しつつ、ウィンドウ枠で包む */
[data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--hero-split .ai-insight-card__preview--side-crop{
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #fff !important;
  box-shadow:
    0 28px 64px rgba(15, 23, 42, 0.12),
    0 2px 0 rgba(255, 255, 255, 0.65) inset;
}

[data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--hero-split .ai-insight-card__preview--side-crop::before{
  border: none;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 0;
}

[data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--hero-split .ai-insight-card__preview--side-crop .ai-insight-card__media{
  position: relative;
  display: block;
  left: 50%;
  width: calc(100% / (1 - (2 * var(--side-crop))) * var(--media-zoom));
  max-width: none;
  height: auto;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  object-fit: contain;
  object-position: center center;
  /* 横中央寄せ。ホバーで transform を上書きしないこと */
  transform: translateX(-50%) !important;
  transition: none;
}

/* 画像のみ浮かせる。side-crop 動画は親 figure 側で動かす（translateX を壊さない） */
[data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--hero-split:hover .ai-insight-card__preview:not(.ai-insight-card__preview--side-crop) img{
  transform: translateY(-4px);
  box-shadow:
    0 34px 72px rgba(15, 23, 42, 0.14),
    0 2px 0 rgba(255, 255, 255, 0.65) inset;
}

[data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--hero-split:hover .ai-insight-card__preview--side-crop{
  transform: translateY(-4px);
  box-shadow:
    0 34px 72px rgba(15, 23, 42, 0.14),
    0 2px 0 rgba(255, 255, 255, 0.65) inset;
}

[data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--hero-split:hover .ai-insight-card__preview--side-crop .ai-insight-card__media{
  transform: translateX(-50%) !important;
}

[data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--hero-split .ai-insight-card__body{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(12px, 1.6vw, 18px);
  margin: 0;
  padding: 0;
  border: none;
  background: transparent !important;
  overflow: visible;
  min-width: 0;
}

[data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--hero-split .ai-insight-card__media-label{
  margin: 0;
  padding: 0;
  border: none;
  background: transparent !important;
  overflow: visible;
  gap: 0.55em;
}

[data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--hero-split .ai-insight-card__media-label h3{
  font-size: clamp(1.6rem, 1.5vw + 1.12rem, 2.2rem);
  line-height: 1.45;
  letter-spacing: -0.01em;
  font-weight: 700;
}

[data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--hero-split .ai-insight-card__media-label-sub{
  margin: 0.35em 0 0;
  font-size: clamp(0.9rem, 0.3vw + 0.82rem, 1rem);
  line-height: 1.55;
  font-weight: 500;
  color: #64748b;
}

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

[data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--hero-split .ai-insight-card__body > p{
  margin: 0;
  max-width: 34em;
  padding: 0;
  text-indent: 0;
  font-size: clamp(1.12rem, 0.5vw + 0.98rem, 1.28rem);
  line-height: 2;
  color: #3c3c43;
}

/* Align subtitle with title text (after the red dot) */
[data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--hero-split .hero-split-copy > p, [data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--hero-split .hero-split-copy > .ai-insight-tags{
  margin-left: calc(0.68em + 0.55em);
  width: calc(100% - (0.68em + 0.55em));
  max-width: 34em;
  box-sizing: border-box;
}

[data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--hero-split .ai-insight-tags{
  gap: 0.45rem;
  max-width: 100%;
  margin-top: 0;
}

[data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--hero-split .ai-insight-tag{
  font-size: 0.875rem;
  padding: 0.48em 0.85em;
}

/* 入場アニメーション（メディア / コピー） */
[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);
}

[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-title, [data-sp-embed].js #showcases .reveal:not(.visible) .ai-insight-card--hero-split .hero-split-copy > p{
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  filter: blur(10px);
}

[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-copy > .ai-insight-card__media-label, [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 > p{
  opacity: 1;
  transform: none;
  filter: blur(0);
  transition:
    opacity 1.15s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.15s cubic-bezier(0.22, 1, 0.36, 1),
    filter 1.15s cubic-bezier(0.22, 1, 0.36, 1);
}

[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-title{
  transition-delay: 160ms;
}

/* Subtitle copy: container soft-in, then katakata chars */
[data-sp-embed].js #showcases .reveal.visible .ai-insight-card--hero-split .hero-split-copy > p{
  transition: none;
  filter: none;
}

[data-sp-embed].js #showcases .reveal:not(.visible) .ai-insight-card--hero-split .hero-split-copy > p .hero-subtitle-char, [data-sp-embed].js .band-management .reveal:not(.visible) .hero-split-copy > p .hero-subtitle-char, [data-sp-embed].js .band-analysis .reveal:not(.visible) .hero-split-copy > p .hero-subtitle-char, [data-sp-embed].js .band-ai .reveal:not(.visible) .hero-split-copy > p .hero-subtitle-char, [data-sp-embed].js .band-marketing .reveal:not(.visible) .hero-split-copy > p .hero-subtitle-char{
  opacity: 0;
  transform: translateY(0.4em) scale(0.94);
}

[data-sp-embed].js #showcases .reveal.visible .ai-insight-card--hero-split .hero-split-copy > p .hero-subtitle-char, [data-sp-embed].js .band-management .reveal.visible .hero-split-copy > p .hero-subtitle-char, [data-sp-embed].js .band-analysis .reveal.visible .hero-split-copy > p .hero-subtitle-char, [data-sp-embed].js .band-ai .reveal.visible .hero-split-copy > p .hero-subtitle-char, [data-sp-embed].js .band-marketing .reveal.visible .hero-split-copy > p .hero-subtitle-char{
  animation: hero-subtitle-char-pop 0.32s cubic-bezier(0.34, 1.45, 0.64, 1) both;
  animation-delay: calc(
    var(--stage-subtitle-base, 380ms) + var(--i, 0) * var(--stage-char-delay, 26ms)
  );
}

[data-sp-embed].js #showcases .reveal.visible .ai-insight-card--hero-split .hero-split-copy > p .hero-subtitle-char.text-accent-em, [data-sp-embed].js .reveal.visible .hero-split-copy > p .hero-subtitle-char.text-accent-em{
  color: #3c3c43;
  font-weight: 600;
  background: none;
  padding: 0;
}

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

@keyframes hero-split-tag-pop {
  0% {
    opacity: 0;
    transform: scale(0.52) translateY(12px);
    filter: none;
    box-shadow:
      0 0 0 0 rgba(225, 29, 72, 0),
      0 0 0 transparent;
  }

  55% {
    opacity: 1;
    transform: scale(1.1) translateY(-3px);
    filter: none;
    box-shadow:
      0 0 0 5px rgba(225, 29, 72, 0.1),
      0 10px 22px rgba(225, 29, 72, 0.16);
  }

  78% {
    transform: scale(0.97) translateY(0);
    filter: none;
    box-shadow:
      0 0 0 2px rgba(225, 29, 72, 0.05),
      0 4px 12px rgba(15, 23, 42, 0.06);
  }

  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  }
}

@keyframes hero-split-cms-fade {
  0% {
    opacity: 0;
    transform: translateY(8px);
    filter: none;
    box-shadow: none;
  }

  100% {
    opacity: 1;
    transform: none;
    filter: none;
    box-shadow: none;
  }
}

@keyframes hero-split-dot-pulse {
  0%, 100% {
    box-shadow: 0 0 0 5px rgba(225, 29, 72, 0.12);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(225, 29, 72, 0.08);
    transform: scale(1.08);
  }
}

@media (min-width: 900px) {
  [data-sp-embed] .ai-insights-bento.ai-insights-bento--pair > .ai-insight-card.ai-insight-card--hero-split{
    display: grid !important;
    grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr);
    /* 上余白 < 下余白で、中央よりわずかに上寄り */
    grid-template-rows: 0.55fr auto auto 1fr;
    grid-template-areas:
      "media ."
      "media title"
      "media body"
      "media .";
    gap: clamp(28px, 3.6vw, 52px);
    column-gap: clamp(28px, 3.6vw, 52px);
    row-gap: 0.75rem;
    align-items: stretch;
    min-height: 0;
    flex-direction: unset;
  }

  /* 左右反転：テキスト左・メディア右 */
  [data-sp-embed] .ai-insights-bento.ai-insights-bento--pair > .ai-insight-card.ai-insight-card--hero-split-reverse{
    grid-template-columns: minmax(0, 1fr) minmax(0, 2.3fr);
    grid-template-areas:
      ". media"
      "title media"
      "body media"
      ". media";
  }

  [data-sp-embed] .ai-insights-bento.ai-insights-bento--pair > .ai-insight-card.ai-insight-card--hero-split-reverse .hero-split-media, [data-sp-embed] .ai-insights-bento.ai-insights-bento--pair > .ai-insight-card.ai-insight-card--hero-split-reverse .hero-split-copy, [data-sp-embed] .ai-insights-bento.ai-insights-bento--pair > .ai-insight-card.ai-insight-card--hero-split-reverse .hero-split-title{
    order: unset;
  }

  [data-sp-embed] .ai-insights-bento.ai-insights-bento--pair > .ai-insight-card.ai-insight-card--hero-split .ai-insight-card__body{
    padding-top: 0;
    padding-inline: 0;
    align-self: stretch;
  }

  [data-sp-embed] .ai-insights-bento.ai-insights-bento--pair > .ai-insight-card.ai-insight-card--hero-split-reverse .ai-insight-card__body{
    padding-inline: 0 8px;
  }

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

  /* AIセマンティックのみ：比率は維持したまま動画を小さく、文字側の余白を詰める */
  [data-sp-embed] .ai-insights-bento.ai-insights-bento--pair > .ai-insight-card.ai-insight-card--hero-split-reverse.ai-insight-card--compact-media{
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.65fr);
    column-gap: clamp(10px, 1.4vw, 18px);
    row-gap: 0.15rem;
  }

  [data-sp-embed] .ai-insights-bento.ai-insights-bento--pair > .ai-insight-card.ai-insight-card--compact-media .ai-insight-card__body{
    gap: clamp(6px, 0.9vw, 9px);
  }

  [data-sp-embed] .ai-insights-bento.ai-insights-bento--pair > .ai-insight-card.ai-insight-card--compact-media .ai-insight-tags{
    gap: 0.35rem;
  }

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

  [data-sp-embed] .ai-insights-bento.ai-insights-bento--pair > .ai-insight-card.ai-insight-card--compact-media > .hero-split-media{
    width: 100%;
  }
}

/* モバイル：セマンティック動画だけ幅を抑える（アスペクトはそのまま） */
[data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--hero-split.ai-insight-card--compact-media{
  gap: clamp(0.35rem, 1.2vw, 0.55rem);
}

[data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--hero-split.ai-insight-card--compact-media > .hero-split-media{
  width: min(100%, 34rem);
  max-width: 100%;
  justify-self: start;
}

[data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--hero-split.ai-insight-card--compact-media .ai-insight-card__body{
  gap: clamp(6px, 1vw, 9px);
}

[data-sp-embed] .ai-insights-bento--pair > .ai-insight-card--hero-split.ai-insight-card--compact-media .ai-insight-card__body > p{
  line-height: 1.7;
}

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

[data-sp-embed] .ai-insight-card__body--split{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

[data-sp-embed] .ai-insight-tags--stack{
  align-self: flex-start;
}

@media (min-width: 900px) {
  [data-sp-embed] .ai-insights-bento{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }

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

  [data-sp-embed] .ai-insights-bento > .ai-insight-card .ai-insight-card__body{
    flex: 1 1 auto;
  }

  [data-sp-embed] .ai-insight-card--wide{
    grid-column: 1 / -1;
  }

  [data-sp-embed] .ai-insight-card__body--split{
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: clamp(20px, 4vw, 48px);
  }

  [data-sp-embed] .ai-insight-card__copy{
    flex: 1;
    min-width: 0;
  }

  [data-sp-embed] .ai-insight-card__body--split p{
    margin-bottom: 0;
  }

  [data-sp-embed] .ai-insight-tags--stack{
    flex: 0 0 auto;
    max-width: 280px;
  }
}

[data-sp-embed] .showcase-media--float{
  position: relative;
  isolation: isolate;
  border: 1px solid rgba(220, 38, 38, 0.1);
  border-radius: 20px;
  background: linear-gradient(160deg, #fff8f9 0%, #fce9ee 45%, #fff4f6 100%);
  padding: clamp(14px, 2.4vw, 26px);
  overflow: hidden;
  box-shadow:
    0 24px 56px rgba(220, 38, 38, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

[data-sp-embed] .showcase-media--float::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 54%;
  z-index: 0;
  width: min(78%, 460px);
  height: 62%;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    ellipse at center,
    rgba(220, 38, 38, 0.28) 0%,
    rgba(251, 113, 133, 0.16) 36%,
    rgba(255, 255, 255, 0) 72%
  );
  filter: blur(26px);
  pointer-events: none;
}

[data-sp-embed] .showcase-media--float::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(
    circle at 50% 42%,
    rgba(255, 255, 255, 0.72) 0%,
    rgba(255, 255, 255, 0) 58%
  );
  pointer-events: none;
}

[data-sp-embed] .showcase-media__stage{
  position: relative;
  z-index: 1;
}

[data-sp-embed] .showcase-media--float img{
  border: none;
  border-radius: 14px;
  object-fit: contain;
  max-height: min(520px, 62vw);
  width: 100%;
}

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

[data-sp-embed] .showcase-media--float.visible:hover img{
  transform: none;
}

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

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

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

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

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

[data-sp-embed] .outcome-card p{
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Visual outcome cards — icon-led layout */
[data-sp-embed] .outcome-grid--visual{
  gap: 16px;
}

[data-sp-embed] .outcome-card--visual{
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 22px 20px;
  transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

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

[data-sp-embed] .outcome-card__icon svg{
  width: 24px;
  height: 24px;
}

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

/* Last outcome spans full width on desktop when odd count */
@media (min-width: 900px) {
  [data-sp-embed] .outcome-grid--visual .outcome-card--visual:last-child:nth-child(odd){
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    gap: 18px;
  }
}

/* ===== Contact ===== */
[data-sp-embed] .contact{
  background: linear-gradient(
    180deg,
    #f8f9fa 0%,
    #fff8f9 55%,
    #fff5f7 100%
  );
  text-align: center;
  overflow: visible;
}

[data-sp-embed] .contact-inner{
  max-width: 960px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  padding-inline: 0.25rem;
  padding-block-end: 1.75rem;
}

[data-sp-embed] .contact .section-label{
  margin: 0 0 1.35rem;
}

[data-sp-embed] .contact h2{
  margin: 0;
  font-size: clamp(1.55rem, 3.5vw + 0.55rem, 3.1rem);
  line-height: 1.2;
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
  color: var(--ink);
  word-break: normal;
  overflow-wrap: normal;
  line-break: auto;
}

[data-sp-embed] .contact-title-line{
  display: block;
  white-space: nowrap;
  line-height: 1.25;
}

[data-sp-embed] .contact p:not(.section-label){
  max-width: 640px;
  margin: 0.9rem auto 2.25rem;
  color: var(--muted);
  font-size: clamp(1.05rem, 0.55vw + 0.92rem, 1.3rem);
  line-height: 1.65;
  font-weight: 400;
  letter-spacing: 0.02em;
}

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

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

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

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

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

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

/* ===== Motion ===== */
[data-sp-embed] .reveal{
  opacity: 1;
  transform: none;
  transition:
    opacity 320ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

[data-sp-embed].js .reveal{
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  pointer-events: none;
}

[data-sp-embed].js .reveal.reveal-left{
  transform: translate3d(-18px, 10px, 0);
}

[data-sp-embed].js .reveal.reveal-right{
  transform: translate3d(18px, 10px, 0);
}

/* Media: never hide with opacity/blur — paint as soon as the file arrives */
[data-sp-embed].js .reveal.reveal-media{
  opacity: 1;
  filter: none;
  transform: translate3d(0, 12px, 0) scale(0.985);
  pointer-events: none;
}

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

[data-sp-embed].js .reveal.reveal-media.visible{
  pointer-events: auto;
}

[data-sp-embed].js .reveal.reveal--stagger:not(.visible), [data-sp-embed].js .reveal.reveal--stagger.visible{
  opacity: 1;
  transform: none;
  filter: none;
  transition: none;
  pointer-events: auto;
}

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

[data-sp-embed] .section-heading .growth-fade{
  display: block;
}

[data-sp-embed] .contact-inner .growth-fade{
  display: block;
}

[data-sp-embed] .contact-inner .hero-actions.growth-fade{
  display: flex;
}

[data-sp-embed] .contact__lead{
  max-width: 640px;
  margin: 0.9rem auto 2.25rem;
  color: var(--muted);
  font-size: clamp(1.05rem, 0.55vw + 0.92rem, 1.3rem);
  line-height: 1.65;
  font-weight: 400;
  letter-spacing: 0.02em;
}

[data-sp-embed].js .hero-visual.is-animating img, [data-sp-embed].js .showcase-media:not(.cdp-stage__visual).is-animating img{
  animation: media-settle 1.1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

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

[data-sp-embed] .workflow-step, [data-sp-embed] .problem-card, [data-sp-embed] .outcome-card, [data-sp-embed] .feature-card, [data-sp-embed] .feature-nav-card{
  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    border-color 220ms ease,
    opacity 780ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 780ms cubic-bezier(0.22, 1, 0.36, 1);
}

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

/* ===== Responsive ===== */
@media (min-width: 768px) {
  [data-sp-embed] .hero-center .hero-actions{ gap: 1rem; }
  [data-sp-embed] .contact .section-label{
    margin-bottom: 1.6rem;
    font-size: clamp(0.8125rem, 0.35vw + 0.72rem, 0.95rem);
  }
  [data-sp-embed] .contact h2{ font-size: clamp(2rem, 2.8vw + 1rem, 3.25rem); }
}

@media (max-width: 1040px) {
  [data-sp-embed] .hero-visual{ width: min(34rem, 88vw); }
  [data-sp-embed] .hero-float--marketing{
    top: clamp(5.25rem, 11vh, 7.5rem);
    width: clamp(220px, 30vw, 340px);
  }
  [data-sp-embed] .hero-float--analysis{
    width: clamp(210px, 28vw, 320px);
  }
  [data-sp-embed] .hero-float--management{
    width: clamp(230px, 31vw, 360px);
  }
  [data-sp-embed] .showcase, [data-sp-embed] .showcase.reverse{ grid-template-columns: 1fr; }
  [data-sp-embed] .showcase.reverse .showcase-copy, [data-sp-embed] .showcase.reverse .showcase-media{ order: initial; }
  [data-sp-embed] .workflow-list, [data-sp-embed] .feature-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-sp-embed] .feature-nav-wrap{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 14px;
  }

  [data-sp-embed] .feature-nav-group--cdp .feature-nav--group, [data-sp-embed] .feature-nav-group--analysis .feature-nav--group, [data-sp-embed] .feature-nav-group--ma .feature-nav--group{
    grid-template-columns: minmax(0, 1fr);
  }
  [data-sp-embed] .industry-grid{ grid-template-columns: 1fr 1fr; gap: 12px; }
  [data-sp-embed] .industry-grid .feature-card:last-child{ grid-column: 1 / -1; }
  [data-sp-embed] .industry-grid.industry-grid--single{
    grid-template-columns: minmax(0, 22rem);
    justify-content: center;
  }
  [data-sp-embed] .industry-grid.industry-grid--single .feature-card:last-child{
    grid-column: auto;
  }
  [data-sp-embed] .industry-grid.industry-grid--cases{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: center;
    max-width: min(44rem, 100%);
    margin-inline: auto;
    gap: 12px;
  }
  [data-sp-embed] .industry-grid.industry-grid--cases .feature-card:last-child{
    grid-column: auto;
  }
  [data-sp-embed] .workflow-step{
    min-height: 0;
    padding: 18px;
  }
}

/* iPad: keep use-case mocks fully visible (no zoom crop) */
@media (min-width: 761px) and (max-width: 1040px) {
  [data-sp-embed] .industry-grid.industry-grid--cases .feature-card__visual img{
    transform: none;
    object-fit: contain;
  }

  [data-sp-embed] .industry-grid.industry-grid--cases .feature-card:hover .feature-card__visual img{
    transform: none;
  }
}

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

  /* 活用事例: 機種の縦幅いっぱいまで青背景を伸ばし、ジャンプ着地で管理の緑を見せない */
  [data-sp-embed] .section-band.band-industries{
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    min-height: 100lvh;
    padding-top: calc(
      var(--sp-public-header-offset, 4.5rem) + env(safe-area-inset-top, 0px) + 48px
    );
    padding-bottom: clamp(2.25rem, 7vh, 3.75rem);
    padding-inline: 1.15rem;
  }

  [data-sp-embed] .section-band.band-industries .section-heading{
    flex: 0 0 auto;
  }

  [data-sp-embed] .section-band.band-industries .industry-grid--cases{
    flex: 1 1 auto;
    width: 100%;
    align-content: center;
  }

  /* 管理: 活用事例と同じく画面の縦幅まで緑背景を伸ばし、着地で前後セクションを見せない */
  [data-sp-embed] #management.section-band.band-management{
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    min-height: 100lvh;
    padding-top: calc(
      var(--sp-public-header-offset, 4.5rem) + env(safe-area-inset-top, 0px) + 48px
    ) !important;
    padding-bottom: clamp(2.25rem, 7vh, 3.75rem) !important;
    padding-inline: 1.15rem;
  }

  [data-sp-embed] #management .showcase.showcase--analysis-full{
    flex: 1 1 auto;
    width: 100%;
  }

  [data-sp-embed] #management.band-management .ai-insights-bento--mgmt-carousel .ai-insight-card__media-label h3, [data-sp-embed] #management.band-management .ai-insights-bento--mgmt-carousel.ai-insights-bento--marquee .ai-insight-card__media-label h3{
    font-size: clamp(0.88rem, 3.1vw, 1rem) !important;
    line-height: 1.3 !important;
  }

  [data-sp-embed] .hero{
    min-height: auto;
    padding-top: calc(var(--sp-public-header-offset, 4.5rem) + env(safe-area-inset-top, 0px) + 4.5rem);
    padding-bottom: 3.75rem;
    padding-inline: 1rem;
    justify-content: flex-start;
  }

  /* Mobile: hold the MA pink wash across the hero→MA junction (no hard cut) */
  [data-sp-embed] .hero-platforms{
    background: linear-gradient(
      180deg,
      #ffffff 0%,
      #ffffff 18%,
      #fffafb 30%,
      #fff5f7 42%,
      #fff5f7 54%,
      #f7fffb 64%,
      #f0fdf4 78%,
      #f0fdf4 92%,
      #f7fffb 100%
    );
  }

  [data-sp-embed] .hero::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: clamp(3.25rem, 14vw, 5rem);
    /* Behind floats so MA wash doesn't visually "cut" the bottom image */
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(
      180deg,
      rgba(255, 245, 247, 0) 0%,
      rgba(255, 245, 247, 0.42) 42%,
      #fff5f7 100%
    );
  }

  [data-sp-embed] .hero-floats{
    display: block;
    /* Keep decorative floats below the fixed public header */
    top: calc(var(--sp-public-header-offset, 4.5rem) + env(safe-area-inset-top, 0px) + 0.35rem);
    bottom: 0.85rem;
    overflow: visible;
  }

  [data-sp-embed] .hero-float{
    opacity: 0.58;
  }

  [data-sp-embed] .hero-float.is-ready, [data-sp-embed].js .hero-float.is-ready{
    opacity: 0.58;
  }

  [data-sp-embed] .hero-float__label{
    font-size: 0.58rem;
    padding: 0.28rem 0.52rem;
  }

  [data-sp-embed] .hero-float--marketing{
    top: 1.55rem;
    left: -0.85rem;
    width: clamp(124px, 36vw, 156px);
    transform: rotate(-4deg);
  }

  [data-sp-embed] .hero-float--analysis{
    bottom: 1.45rem;
    left: -0.7rem;
    width: clamp(118px, 34vw, 148px);
    transform: rotate(3deg);
  }

  [data-sp-embed] .hero-float--management{
    top: 36%;
    right: -0.85rem;
    width: clamp(130px, 37vw, 162px);
    transform: rotate(-2deg);
  }

  /* EN/TH: taller titles — keep floats clear of center copy */
  [data-sp-embed][lang="en"] .hero-floats, [data-sp-embed][lang="th"] .hero-floats{
    opacity: 0.42;
  }

  [data-sp-embed][lang="en"] .hero-float--management, [data-sp-embed][lang="th"] .hero-float--management{
    top: 22%;
    right: -1.75rem;
    width: clamp(112px, 32vw, 140px);
    opacity: 0.5;
  }

  [data-sp-embed][lang="en"] .hero-float--marketing, [data-sp-embed][lang="th"] .hero-float--marketing{
    top: 0.85rem;
    left: -1.35rem;
    width: clamp(108px, 30vw, 136px);
  }

  [data-sp-embed][lang="en"] .hero-float--analysis, [data-sp-embed][lang="th"] .hero-float--analysis{
    bottom: 0.85rem;
    left: -1.2rem;
    width: clamp(104px, 29vw, 132px);
  }

  [data-sp-embed][lang="en"] .hero-copy, [data-sp-embed][lang="th"] .hero-copy{
    position: relative;
    z-index: 6;
  }

  [data-sp-embed].js .hero-float.is-ready, [data-sp-embed].js .hero-float--marketing.is-ready, [data-sp-embed].js .hero-float--analysis.is-ready, [data-sp-embed].js .hero-float--management.is-ready{
    transform: rotate(var(--hero-float-tilt, 0deg));
  }

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

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

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

  [data-sp-embed] .platform-stage{
    padding-top: 2.75rem;
    padding-bottom: 1.5rem;
  }

  [data-sp-embed] .cdp-stage{
    padding-top: 1.5rem;
    padding-bottom: 2.5rem;
  }

  [data-sp-embed] .platform-stage__inner.showcase{
    grid-template-columns: 1fr;
  }

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

  [data-sp-embed] .platform-stage__copy{
    align-items: center;
    text-align: center;
    max-width: 100%;
  }

  [data-sp-embed] .platform-stage .showcase-copy .platform-stage__tagline{
    text-align: center;
  }

  [data-sp-embed] .platform-stage .platform-stage__tagline [data-stage-subtitle]{
    text-align: center;
  }

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

  [data-sp-embed] .ma-stage__visual-stage{
    width: min(100%, var(--platforms-visual-max, min(28rem, 92vw)));
    max-width: min(28rem, 92vw);
    margin-inline: auto;
  }

  [data-sp-embed] .platform-wordmark{
    font-size: clamp(3.25rem, 18vw, 5.5rem);
  }

  [data-sp-embed] .showcase-copy .platform-stage__tagline, [data-sp-embed] .cdp-stage .platform-stage__tagline{
    font-size: clamp(1.35rem, 5vw, 1.85rem);
  }

  [data-sp-embed] .platform-stage__copy .hero-subtitle{
    font-size: clamp(1.05rem, 3.8vw, 1.25rem);
  }

  [data-sp-embed] .cdp-stage__inner.showcase.reverse{
    grid-template-columns: 1fr;
  }

  /* Mobile: CDP text → CDP image (same reading order as MA) */
  [data-sp-embed] .cdp-stage__inner.showcase.reverse .cdp-stage__copy{
    order: 1;
  }

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

  [data-sp-embed] .cdp-stage__copy{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 100%;
  }

  [data-sp-embed] .cdp-stage .showcase-copy .platform-stage__tagline, [data-sp-embed] .cdp-stage .platform-stage__tagline{
    text-align: center;
  }

  [data-sp-embed] .cdp-stage .platform-stage__tagline [data-stage-subtitle]{
    text-align: center;
  }

  [data-sp-embed] .cdp-stage__visual-stage{
    width: min(100%, var(--platforms-visual-max, min(28rem, 92vw)));
    max-width: min(28rem, 92vw);
    margin-inline: auto;
  }

  [data-sp-embed] .hero-center{
    /* Leave room so the CTA glow isn't clipped by overflow-x */
    padding-inline: 0.85rem;
    overflow-x: visible;
  }

  [data-sp-embed] .hero-brand-logo{
    width: min(18rem, 84vw);
    margin: -0.5rem auto 0.55rem;
  }

  [data-sp-embed] .hero-brand-wordmark{
    gap: 0.04em;
  }

  [data-sp-embed] .hero-brand-wordmark__sakina{
    font-size: clamp(1.55rem, 6.8vw, 2.05rem);
    letter-spacing: -0.022em;
  }

  [data-sp-embed] .hero-brand-wordmark__product{
    font-size: clamp(1.4rem, 6.1vw, 1.85rem);
    letter-spacing: 0.03em;
  }

  [data-sp-embed] .hero-visual{
    width: min(18.5rem, 82vw);
    margin-top: 0.1rem;
  }

  [data-sp-embed] .hero-visual img{
    max-height: 200px;
  }

  [data-sp-embed] .hero-center .hero-copy{
    margin-top: 1.15rem;
  }

  [data-sp-embed] .hero .eyebrow{
    margin-bottom: 0.85rem;
    font-size: 0.65rem;
    letter-spacing: 0.16em;
  }

  [data-sp-embed] .hero-center .hero-copy h1{
    width: 100%;
    font-size: clamp(1.35rem, 5.4vw, 2rem);
    line-height: 1.32;
    margin-bottom: 0.85rem;
    letter-spacing: -0.015em;
  }

  [data-sp-embed] .hero-title-float:first-child{
    white-space: normal;
  }

  [data-sp-embed] .hero-title-float + .hero-title-float{
    margin-top: 0.3rem;
    letter-spacing: 0.03em;
  }

  [data-sp-embed] .hero-center .hero-copy h1 .hero-title-line{
    display: block;
    white-space: normal;
  }

  [data-sp-embed] .hero-subtitle{
    font-size: clamp(0.8125rem, 3.4vw, 0.9375rem);
    line-height: 1.72;
    letter-spacing: 0.01em;
    max-width: 22em;
  }

  [data-sp-embed][lang="en"] .hero-center .hero-copy h1{
    font-size: clamp(1.4rem, 5.6vw, 1.8rem);
    line-height: 1.22;
  }

  [data-sp-embed] .hero-center .lead{
    font-size: 0.9rem;
    line-height: 1.65;
    letter-spacing: 0.015em;
  }

  [data-sp-embed] .hero-center .lead .lead-line{
    display: block;
  }

  [data-sp-embed] .hero-actions{
    flex-direction: column;
    width: 100%;
    gap: 0.65rem;
    margin-top: 1.15rem;
  }

  [data-sp-embed] .hero-center .hero-actions{
    width: 100%;
    margin-top: 1.15rem;
    padding-inline: 0.45rem;
    box-sizing: border-box;
    overflow: visible;
  }

  [data-sp-embed] .hero-center .hero-actions .button, [data-sp-embed] .hero-center .hero-actions .button.secondary.button--glow, [data-sp-embed] .hero-center .hero-actions .button.button--dark{
    width: 100%;
    min-height: 3rem;
    padding: 0.75rem 1.25rem;
    font-size: 0.9375rem;
  }

  /* Soft pink glow (static on mobile — pulse can feel like vibration) */
  [data-sp-embed] .hero-center .hero-actions .button.secondary.button--glow, [data-sp-embed] .contact .hero-actions .button.secondary.button--glow{
    animation: none;
    transform: none;
    box-shadow:
      0 0 0 0 rgba(225, 29, 72, 0.4),
      0 0 26px rgba(225, 29, 72, 0.34),
      0 0.5rem 1.2rem rgba(225, 29, 72, 0.14);
  }

  [data-sp-embed] .button{ width: 100%; }

  [data-sp-embed] .problem-grid, [data-sp-embed] .workflow-list, [data-sp-embed] .feature-grid, [data-sp-embed] .feature-nav-wrap, [data-sp-embed] .feature-nav-group--cdp .feature-nav--group, [data-sp-embed] .feature-nav-group--analysis .feature-nav--group, [data-sp-embed] .feature-nav-group--ma .feature-nav--group, [data-sp-embed] .outcome-grid, [data-sp-embed] .industry-grid{
    grid-template-columns: 1fr;
    gap: 10px;
  }

  [data-sp-embed] .industry-grid.industry-grid--cases{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: center;
    align-items: stretch;
    max-width: min(36rem, 100%);
    margin-inline: auto;
    gap: 10px;
  }

  [data-sp-embed] .industry-grid.industry-grid--cases .feature-card:last-child{
    grid-column: auto;
  }

  [data-sp-embed] .industry-grid.industry-grid--cases .feature-card{
    height: 100%;
    min-height: 0;
  }

  [data-sp-embed] .industry-grid.industry-grid--cases .feature-card .card-top{
    padding: 14px 12px 0;
    margin-bottom: 0;
    min-height: 0;
  }

  [data-sp-embed] .industry-grid.industry-grid--cases .feature-card .card-top em{
    min-width: 34px;
    height: 34px;
    font-size: 11px;
  }

  [data-sp-embed] .industry-grid.industry-grid--cases .feature-card__visual{
    margin: 10px 10px 0;
    aspect-ratio: 3 / 2;
    flex: 0 0 auto;
    transform: none;
  }

  [data-sp-embed] .industry-grid.industry-grid--cases .feature-card__visual img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    transform: none;
  }

  [data-sp-embed] .industry-grid.industry-grid--cases .feature-card .card-copy{
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 12px 12px 14px;
  }

  [data-sp-embed] .industry-grid.industry-grid--cases .feature-card h3{
    font-size: 14px;
    line-height: 1.35;
    margin-bottom: 8px;
  }

  [data-sp-embed] .industry-grid.industry-grid--cases .feature-card p{
    font-size: 11px;
    line-height: 1.6;
  }

  [data-sp-embed] .industry-grid.industry-grid--cases .use-case-metrics{
    margin-top: auto;
    padding-top: 10px;
    gap: 6px;
  }

  [data-sp-embed] .industry-grid.industry-grid--cases .use-case-metrics li{
    font-size: 10px;
    padding: 0.28em 0.55em;
  }

  [data-sp-embed] .industry-grid.industry-grid--cases .use-case-tags{
    margin-top: auto;
    padding-top: 10px;
    gap: 6px;
  }

  [data-sp-embed] .industry-grid.industry-grid--cases .use-case-tag{
    font-size: 10px;
    padding: 0.28em 0.55em;
  }

  [data-sp-embed] .industry-grid.industry-grid--cases .use-case-status{
    margin-top: auto;
    padding-top: 10px;
    gap: 6px;
  }

  [data-sp-embed] .industry-grid.industry-grid--cases .use-case-status__item{
    font-size: 10px;
    padding: 0.5em 0.6em;
    line-height: 1.45;
  }

  [data-sp-embed] .feature-nav-group--analysis-ai .feature-nav-group__header{
    visibility: visible;
  }

  [data-sp-embed] .feature-nav-card{
    min-height: 0;
    padding: 1.1rem 1rem 0.95rem;
  }

  [data-sp-embed] .feature-nav-card__title{
    font-size: 1.15rem;
  }

  [data-sp-embed] .feature-index__lead{
    font-size: 0.875rem;
    line-height: 1.65;
  }

  [data-sp-embed] .industry-grid .feature-card:last-child{
    grid-column: auto;
  }

  [data-sp-embed] .section-heading{
    margin-bottom: 1.5rem;
    max-width: 100%;
  }

  [data-sp-embed] .section-heading .section-label, [data-sp-embed] .showcase-copy .section-label{
    margin-bottom: 0.75rem;
    font-size: 0.68rem;
    letter-spacing: 0.16em;
  }

  [data-sp-embed] .section-heading h2{
    font-size: clamp(1.25rem, 5vw, 1.65rem);
    line-height: 1.35;
    letter-spacing: 0.01em;
  }

  [data-sp-embed] .problem-card, [data-sp-embed] .outcome-card, [data-sp-embed] .outcome-card--visual{
    padding: 1rem 0.95rem;
    border-radius: 14px;
    gap: 0.75rem;
  }

  [data-sp-embed] .outcome-card__icon{
    width: 42px;
    height: 42px;
    border-radius: 12px;
  }

  [data-sp-embed] .outcome-card__icon svg{
    width: 20px;
    height: 20px;
  }

  [data-sp-embed] .problem-card p, [data-sp-embed] .outcome-card p{
    font-size: 0.9rem;
    line-height: 1.6;
    font-weight: 600;
  }

  [data-sp-embed] .workflow-step{
    padding: 1.15rem 1.05rem;
    border-radius: 14px;
    min-height: 0;
  }

  [data-sp-embed] .workflow-step span{
    width: 40px;
    height: 40px;
    font-size: 12px;
  }

  [data-sp-embed] .workflow-step h3{
    margin-top: 0.9rem;
    font-size: 0.95rem;
    line-height: 1.45;
  }

  [data-sp-embed] .feature-card{
    min-height: 0;
    border-radius: 14px;
  }

  [data-sp-embed] .feature-card .card-top{
    padding: 1rem 1.05rem 0;
    min-height: 56px;
  }

  [data-sp-embed] .feature-card .card-top em{
    min-width: 36px;
    height: 36px;
    font-size: 12px;
  }

  [data-sp-embed] .feature-card .card-copy{
    padding: 0.85rem 1.05rem 1.15rem;
  }

  [data-sp-embed] .band-industries .feature-card__visual{
    margin: 0.65rem 0.85rem 0;
    border-radius: 8px;
  }

  [data-sp-embed] .band-industries .feature-card .card-copy{
    padding: 0.75rem 0.95rem 1.05rem;
  }

  [data-sp-embed] .feature-card h3{
    font-size: 1.05rem;
    margin-bottom: 0.45rem;
  }

  [data-sp-embed] .feature-card p{
    font-size: 0.875rem;
    line-height: 1.65;
  }

  [data-sp-embed] .showcase{
    gap: 1.35rem;
  }

  [data-sp-embed] .showcase-copy h2{
    font-size: clamp(1.2rem, 4.8vw, 1.5rem);
    line-height: 1.35;
  }

  [data-sp-embed] .showcase-copy > p{
    margin-top: 0.85rem;
    font-size: 0.9375rem;
    line-height: 1.7;
    letter-spacing: 0.015em;
  }

  [data-sp-embed] .showcase-points{
    margin-top: 1.15rem;
    gap: 8px;
  }

  [data-sp-embed] .marketing-flow{
    margin-top: 1.75rem;
  }

  [data-sp-embed] .marketing-cutout{
    margin-top: 1.1rem;
  }

  [data-sp-embed] .marketing-cutout__img{
    width: 90%;
    max-width: min(100%, 360px);
    margin-inline: auto;
  }

  [data-sp-embed] .showcase-point, [data-sp-embed] .showcase-point--visual, [data-sp-embed] .showcase-point--marketing{
    padding: 0.85rem 0.95rem;
    border-radius: 12px;
  }

  [data-sp-embed] .showcase-point__icon{
    width: 40px;
    height: 40px;
  }

  [data-sp-embed] .showcase-point__icon svg{
    width: 20px;
    height: 20px;
  }

  [data-sp-embed] .showcase-point h3{
    font-size: 0.9375rem;
  }

  [data-sp-embed] .showcase-point p{
    font-size: 0.8125rem;
    line-height: 1.6;
  }

  [data-sp-embed] .ai-insight-card__preview{
    padding: 10px;
  }

  [data-sp-embed] .ai-insight-card__preview img{
    height: auto;
    object-fit: contain;
  }

  [data-sp-embed] .ai-insight-card__preview--side-crop .ai-insight-card__media{
    height: auto;
    object-fit: contain;
  }

  [data-sp-embed] .ai-insights-bento--pair .ai-insight-card__preview img{
    height: auto;
    object-fit: contain;
  }

  [data-sp-embed] .ai-insight-card__body{
    padding: 14px 16px 16px;
  }

  [data-sp-embed] .ai-insight-card__body h3{
    font-size: 0.9375rem;
  }

  [data-sp-embed] .ai-insight-card__body p{
    font-size: 0.8125rem;
    line-height: 1.65;
  }

  [data-sp-embed] .showcase-media{
    padding: 8px;
    border-radius: 14px;
  }

  [data-sp-embed] .cdp-stage__visual.showcase-media{
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  [data-sp-embed] .cdp-stage__visual-stage{
    width: min(100%, var(--platforms-visual-max, min(28rem, 92vw)));
    max-width: min(28rem, 92vw);
    margin-inline: auto;
  }

  [data-sp-embed] .cdp-stage__visual.showcase-media img{
    border: none !important;
    border-radius: 0 !important;
  }

  [data-sp-embed] .showcase-media.showcase-media--video{
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    padding: 0;
  }

  /* ===== 動画固定サイズ（モバイル） ===== */
  [data-sp-embed] .showcase-video{
    --video-width: 18rem;
    --video-radius: 1.5rem;
    --crop-top: 10%;
  }

  [data-sp-embed] .showcase-media--float{
    padding: 12px;
    border-radius: 16px;
  }

  [data-sp-embed] .showcase-media img{
    max-height: none;
    border-radius: 10px;
  }

  [data-sp-embed] .contact.section-band{
    padding: 2.75rem 1.15rem 3.75rem;
    overflow-x: clip;
  }

  [data-sp-embed] .contact-inner{
    padding-inline: 0.45rem;
    padding-block-end: 1.25rem;
    overflow: visible;
  }

  [data-sp-embed] .contact .section-label{
    margin: 0 0 0.7rem;
    font-size: clamp(0.75rem, 2.2vw, 0.875rem);
    letter-spacing: 0.14em;
  }

  [data-sp-embed] .contact h2{
    font-size: clamp(1.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;
  }

  [data-sp-embed] .contact .button{
    width: 100%;
    min-height: 3rem;
  }

  /* Mobile: Integration / Contact CTAs — match compact hero buttons */
  [data-sp-embed] #integration .hero-actions, [data-sp-embed] #contact .hero-actions{
    flex-direction: column;
    align-items: center;
    width: min(100%, 12.5rem);
    margin-inline: auto;
    gap: 0.42rem;
    padding-inline: 0;
  }

  [data-sp-embed] #integration .hero-actions{
    width: min(100%, 14.5rem);
  }

  [data-sp-embed] #integration .button.button--neon, [data-sp-embed] #contact .hero-actions .button, [data-sp-embed] #contact .hero-actions .button.secondary.button--glow, [data-sp-embed] #contact .hero-actions .button.button--dark{
    width: 100%;
    min-height: 2.25rem !important;
    padding: 0.5rem 1.45rem !important;
    font-size: 0.8rem !important;
    letter-spacing: 0.02em;
  }

  [data-sp-embed] #contact .hero-actions .button.secondary.button--glow{
    min-height: 2.35rem !important;
    padding: 0.54rem 1.55rem !important;
    font-size: 0.82rem !important;
  }

  [data-sp-embed] #integration .button.button--neon{
    animation: none;
  }

  [data-sp-embed] #integration .button.button--neon::before{
    animation: none;
  }

  [data-sp-embed] .nobr-product{ white-space: normal; }

  [data-sp-embed].js .reveal.reveal-left, [data-sp-embed].js .reveal.reveal-right{
    transform: translate3d(0, 22px, 0);
  }

  /* Mobile: keep static glow light, no pulse/bob vibration */
  [data-sp-embed] .button.secondary.button--glow, [data-sp-embed] .button.primary.button--glow{
    animation: none;
  }
}

@media (max-width: 480px) {
  [data-sp-embed] .section-band{
    padding: 2.75rem 0.95rem;
  }

  [data-sp-embed] .hero{
    padding-inline: 0.85rem;
    padding-bottom: 2.25rem;
  }

  [data-sp-embed] .hero-brand-wordmark__sakina{
    font-size: clamp(1.38rem, 6.5vw, 1.75rem);
    letter-spacing: -0.018em;
  }

  [data-sp-embed] .hero-brand-wordmark__product{
    font-size: clamp(1.25rem, 5.8vw, 1.58rem);
    letter-spacing: 0.025em;
  }

  [data-sp-embed] .hero-visual{
    width: min(16.5rem, 88vw);
  }

  [data-sp-embed] .hero-visual img{
    max-height: 170px;
  }

  [data-sp-embed] .hero-center .hero-copy h1{
    font-size: clamp(1.2rem, 4.8vw, 1.85rem);
  }

  [data-sp-embed][lang="en"] .hero-center .hero-copy h1{
    font-size: clamp(1.28rem, 5.8vw, 1.55rem);
  }

  [data-sp-embed] .hero-center .lead{
    font-size: 0.85rem;
  }

  [data-sp-embed] .section-heading h2{
    font-size: clamp(1.15rem, 5.2vw, 1.4rem);
  }

  [data-sp-embed] .showcase-copy h2{
    font-size: clamp(1.1rem, 5vw, 1.35rem);
  }

  [data-sp-embed] .problem-card p, [data-sp-embed] .outcome-card p{
    font-size: 0.85rem;
  }
}


/* ===== CMS page — feature nav (3 cards in one row) ===== */
[data-sp-embed] .feature-nav-wrap--cms{
  grid-template-columns: 1fr;
  max-width: 1180px;
}

[data-sp-embed] .feature-nav-group--cms .feature-nav-group__label{
  color: #15803d;
}

[data-sp-embed] .feature-nav-group--cms .feature-nav--group{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1040px) {
  [data-sp-embed] .feature-nav-group--cms .feature-nav--group{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  [data-sp-embed] .feature-nav-group--cms .feature-nav--group{
    grid-template-columns: 1fr;
  }
}

/* ===== CMS hero — floating story (ref composition) ===== */
[data-sp-embed] .hero--cms-story{
  min-height: min(100vh, 920px);
  background: #e6e3e1;
  justify-content: safe center;
  /* 固定ヘッダー下端〜タイトル上の余白（大きく = タイトルが下がる） */
  --cms-hero-title-gap: clamp(10.5rem, 15vh, 13.5rem);
}

/* 公式固定ヘッダー分を必ず確保（タイトルがヘッダーに埋まらない） */
[data-sp-embed] .hero--cms-story[data-sp-embed-top]{
  padding-top: calc(
    var(--sp-public-header-offset, 4.5rem) + env(safe-area-inset-top, 0px) + var(--cms-hero-title-gap)
  ) !important;
}

[data-sp-embed] .hero--cms-story .hero-center{
  z-index: 3;
  max-width: min(28rem, 88vw);
  /* ヘッダー下端から最低でも離す（safe center の補助） */
  margin-top: 0.25rem;
}

[data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.08em;
  font-size: clamp(2rem, 4.8vw, 3.35rem);
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.28;
  color: #1f2937;
}

[data-sp-embed] .hero--cms-story .hero-title-float{
  display: block;
}

[data-sp-embed] .hero--cms-story .hero-title-float + .hero-title-float{
  margin-top: 0;
}

[data-sp-embed].js .hero--cms-story .hero-center.reveal.visible .hero-title-float:nth-child(1){
  animation-delay: 280ms;
}
[data-sp-embed].js .hero--cms-story .hero-center.reveal.visible .hero-title-float:nth-child(2){
  animation-delay: 420ms;
}
[data-sp-embed].js .hero--cms-story .hero-center.reveal.visible .hero-title-float:nth-child(3){
  animation-delay: 560ms;
}
[data-sp-embed].js .hero--cms-story .hero-center.reveal.visible .hero-title-float:nth-child(4){
  animation-delay: 700ms;
}

[data-sp-embed] .hero--cms-story .hero-float{
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}

[data-sp-embed] .hero--cms-story .hero-float::before, [data-sp-embed] .hero--cms-story .hero-float::after{
  display: none;
}

[data-sp-embed] .hero--cms-story .hero-float img{
  width: 100%;
  height: auto;
  background: transparent;
  filter: drop-shadow(0 18px 34px rgba(15, 23, 42, 0.14));
}

[data-sp-embed] .hero--cms-story .hero-float__label{
  display: none;
}

/* Top-left: Instagram composite */
[data-sp-embed] .hero--cms-story .hero-float--ig{
  top: clamp(5.5rem, 11vh, 8.25rem);
  left: clamp(0.2rem, 2.2vw, 2.5rem);
  width: clamp(168px, 20vw, 292px);
  transform: rotate(-4deg);
}

/* Top-right: LINE composite */
[data-sp-embed] .hero--cms-story .hero-float--line{
  top: clamp(5.75rem, 12vh, 8.75rem);
  right: clamp(0.35rem, 2.4vw, 2.75rem);
  left: auto;
  width: clamp(158px, 18.5vw, 276px);
  transform: rotate(3.5deg);
}

/* Bottom-left: Facebook composite */
[data-sp-embed] .hero--cms-story .hero-float--fb{
  bottom: clamp(2.75rem, 7vh, 5.25rem);
  left: clamp(0.45rem, 3vw, 3.25rem);
  top: auto;
  width: clamp(156px, 18vw, 268px);
  transform: rotate(2deg);
}

/* Bottom-right: campaign — same 16:9 scale as other floats (1920×1080) */
[data-sp-embed] .hero--cms-story .hero-float--campaign{
  bottom: clamp(2.75rem, 7vh, 5.25rem);
  right: clamp(0.45rem, 3vw, 3.25rem);
  left: auto;
  top: auto;
  width: clamp(156px, 18vw, 268px);
  transform: rotate(-2.5deg);
}

[data-sp-embed] .hero--cms-story .hero-float--ig, [data-sp-embed].js .hero--cms-story .hero-float--ig.is-ready{
  --hero-float-tilt: -4deg;
}
[data-sp-embed] .hero--cms-story .hero-float--line, [data-sp-embed].js .hero--cms-story .hero-float--line.is-ready{
  --hero-float-tilt: 3.5deg;
}
[data-sp-embed] .hero--cms-story .hero-float--fb, [data-sp-embed].js .hero--cms-story .hero-float--fb.is-ready{
  --hero-float-tilt: 2deg;
}
[data-sp-embed] .hero--cms-story .hero-float--campaign, [data-sp-embed].js .hero--cms-story .hero-float--campaign.is-ready{
  --hero-float-tilt: -2.5deg;
}

/* Floats stay visible — only soft orbit (no opacity hide) */
[data-sp-embed].js .hero--cms-story .hero-float.is-ready{
  opacity: 1;
  transform: rotate(var(--hero-float-tilt, 0deg));
}

[data-sp-embed].js .hero--cms-story .hero-float.is-animating{
  animation: hero-float-drift var(--hero-float-duration, 6.4s) ease-in-out infinite;
  animation-delay: var(--float-in-delay, 0ms);
}

[data-sp-embed].js .hero--cms-story .hero-float--ig.is-animating{
  --hero-float-duration: 5.8s;
}
[data-sp-embed].js .hero--cms-story .hero-float--line.is-animating{
  --hero-float-duration: 6.4s;
}
[data-sp-embed].js .hero--cms-story .hero-float--fb.is-animating{
  --hero-float-duration: 7s;
}
[data-sp-embed].js .hero--cms-story .hero-float--campaign.is-animating{
  --hero-float-duration: 6.7s;
}

@keyframes cms-float-enter {
  from {
    opacity: 0;
    transform: rotate(var(--hero-float-tilt, 0deg)) translateY(22px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: rotate(var(--hero-float-tilt, 0deg)) translateY(0) scale(1);
  }
}

@media (max-width: 1040px) {
  [data-sp-embed] .hero--cms-story .hero-float--ig{
    width: clamp(148px, 22vw, 220px);
  }
  [data-sp-embed] .hero--cms-story .hero-float--line{
    width: clamp(140px, 20vw, 206px);
  }
  [data-sp-embed] .hero--cms-story .hero-float--fb{
    width: clamp(136px, 19vw, 198px);
  }
  [data-sp-embed] .hero--cms-story .hero-float--campaign{
    width: clamp(150px, 22vw, 224px);
  }
}

@media (max-width: 760px) {
  [data-sp-embed] .hero--cms-story{
    min-height: auto;
    padding-bottom: 2.5rem;
  }

  [data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
    font-size: clamp(1.7rem, 8vw, 2.15rem);
  }

  [data-sp-embed] .hero--cms-story .hero-floats{
    opacity: 0.92;
  }

  [data-sp-embed] .hero--cms-story .hero-float--ig{
    top: clamp(4.4rem, 8vh, 5.8rem);
    left: -0.85rem;
    width: clamp(112px, 34vw, 148px);
  }

  [data-sp-embed] .hero--cms-story .hero-float--line{
    top: clamp(4.6rem, 8.5vh, 6rem);
    right: -0.75rem;
    width: clamp(104px, 32vw, 138px);
  }

  [data-sp-embed] .hero--cms-story .hero-float--fb{
    bottom: 0.15rem;
    left: -0.65rem;
    width: clamp(102px, 31vw, 134px);
  }

  [data-sp-embed] .hero--cms-story .hero-float--campaign{
    bottom: 0.05rem;
    right: -0.7rem;
    width: clamp(112px, 34vw, 148px);
  }
}

/* CMS hero: brand as single red line "SAKINA CMS" */
[data-sp-embed] .hero--cms-story .hero-brand-wordmark--inline{
  flex-direction: row;
  gap: 0.28em;
}

[data-sp-embed] .hero--cms-story .hero-brand-wordmark__full{
  font-family: var(--font-sans);
  font-size: clamp(1.55rem, 3.6vw + 0.45rem, 2.55rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.1;
  color: #111111;
  text-shadow: none;
  white-space: nowrap;
}

[data-sp-embed].js .hero--cms-story .hero-center.reveal.visible .hero-brand-wordmark__full{
  animation: none;
}

@keyframes hero-logo-glow-red {
  0%,
  100% {
    text-shadow:
      0 0 18px rgba(220, 38, 38, 0.18),
      0 0 36px rgba(248, 113, 113, 0.12);
  }
  50% {
    text-shadow:
      0 0 24px rgba(220, 38, 38, 0.32),
      0 0 48px rgba(248, 113, 113, 0.2);
  }
}

@media (max-width: 760px) {
  [data-sp-embed] .hero--cms-story .hero-brand-wordmark__full{
    font-size: clamp(1.35rem, 5.8vw, 1.75rem);
    letter-spacing: 0.05em;
  }
}

/* ===== CMS hero alignment fixes ===== */
[data-sp-embed] .hero--cms-story .hero-center{
  max-width: min(36rem, 94vw);
  overflow: visible;
  overflow-x: visible;
  align-items: center;
}

[data-sp-embed] .hero--cms-story .hero-brand-logo{
  width: auto;
  max-width: 100%;
  margin: 0 auto 0.85rem;
  display: flex;
  justify-content: center;
  align-items: center;
  /* Kill leftover pop-translation asymmetry */
  transform: none;
}

[data-sp-embed] .hero--cms-story .hero-brand-wordmark--inline{
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: 100%;
}

[data-sp-embed] .hero--cms-story .hero-brand-wordmark__full{
  display: block;
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
  text-align: center;
  white-space: nowrap;
  box-sizing: border-box;
}

[data-sp-embed].js .hero--cms-story .hero-center.reveal:not(.visible) .hero-brand-logo{
  transform: translateY(1rem) scale(0.92);
}

[data-sp-embed].js .hero--cms-story .hero-center.reveal.visible .hero-brand-logo{
  animation: cms-brand-pop 0.72s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--d, 0ms);
}

@keyframes cms-brand-pop {
  0% {
    opacity: 0;
    transform: translateY(1rem) scale(0.92);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

[data-sp-embed] .hero--cms-story .hero-center .hero-copy{
  width: 100%;
  align-items: center;
}

[data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
  width: 100%;
  align-items: center;
}

/* Pull floats inward so composites are fully readable */
[data-sp-embed] .hero--cms-story .hero-float--ig{
  top: clamp(5.75rem, 12vh, 8.5rem);
  left: clamp(1.25rem, 5.5vw, 5.5rem);
  width: clamp(150px, 17.5vw, 250px);
}

[data-sp-embed] .hero--cms-story .hero-float--line{
  top: clamp(6rem, 12.5vh, 8.75rem);
  right: clamp(1.25rem, 5.5vw, 5.5rem);
  width: clamp(142px, 16.5vw, 238px);
}

[data-sp-embed] .hero--cms-story .hero-float--fb{
  bottom: clamp(3.25rem, 8vh, 6rem);
  left: clamp(1.5rem, 6vw, 6rem);
  width: clamp(140px, 16vw, 230px);
}

[data-sp-embed] .hero--cms-story .hero-float--campaign{
  bottom: clamp(3rem, 7.5vh, 5.75rem);
  right: clamp(1.35rem, 5.8vw, 5.75rem);
  width: clamp(152px, 17.5vw, 255px);
}

@media (max-width: 1040px) {
  [data-sp-embed] .hero--cms-story .hero-float--ig{
    left: clamp(0.75rem, 3vw, 2rem);
    width: clamp(132px, 19vw, 198px);
  }
  [data-sp-embed] .hero--cms-story .hero-float--line{
    right: clamp(0.75rem, 3vw, 2rem);
    width: clamp(124px, 17.5vw, 186px);
  }
  [data-sp-embed] .hero--cms-story .hero-float--fb{
    left: clamp(0.85rem, 3.2vw, 2.25rem);
    width: clamp(122px, 17vw, 180px);
  }
  [data-sp-embed] .hero--cms-story .hero-float--campaign{
    right: clamp(0.8rem, 3vw, 2.1rem);
    width: clamp(132px, 19vw, 198px);
  }
}

@media (max-width: 760px) {
  [data-sp-embed] .hero--cms-story .hero-brand-logo{
    margin-bottom: 0.65rem;
  }

  [data-sp-embed] .hero--cms-story .hero-float--ig{
    top: clamp(4.6rem, 8.5vh, 6rem);
    left: 0.15rem;
    width: clamp(104px, 30vw, 136px);
  }

  [data-sp-embed] .hero--cms-story .hero-float--line{
    top: clamp(4.8rem, 9vh, 6.25rem);
    right: 0.15rem;
    width: clamp(98px, 28vw, 128px);
  }

  [data-sp-embed] .hero--cms-story .hero-float--fb{
    bottom: 0.45rem;
    left: 0.25rem;
    width: clamp(96px, 28vw, 126px);
  }

  [data-sp-embed] .hero--cms-story .hero-float--campaign{
    bottom: 0.35rem;
    right: 0.2rem;
    width: clamp(104px, 30vw, 136px);
  }
}

/* 3 transparent floats: campaign sits bottom-left for balance */
[data-sp-embed] .hero--cms-story .hero-float--campaign{
  bottom: clamp(3.25rem, 8vh, 6rem);
  left: clamp(1.5rem, 6vw, 6rem);
  right: auto;
  top: auto;
  width: clamp(150px, 17.5vw, 250px);
  transform: rotate(2deg);
}

[data-sp-embed] .hero--cms-story .hero-float--campaign, [data-sp-embed].js .hero--cms-story .hero-float--campaign.is-ready{
  --hero-float-tilt: 2deg;
}

/* Add a subtle fourth presence on bottom-right using campaign twin position for line? keep line top-right */
[data-sp-embed] .hero--cms-story .hero-float--line{
  /* keep top-right, also mirror a little lower if needed */
}

@media (max-width: 1040px) {
  [data-sp-embed] .hero--cms-story .hero-float--campaign{
    left: clamp(0.85rem, 3.2vw, 2.25rem);
    right: auto;
    width: clamp(132px, 19vw, 198px);
  }
}

@media (max-width: 760px) {
  [data-sp-embed] .hero--cms-story .hero-float--campaign{
    bottom: 0.45rem;
    left: 0.25rem;
    right: auto;
    width: clamp(104px, 30vw, 136px);
  }
}

/* Keep campaign bottom-right (reference composition without facebook) */
[data-sp-embed] .hero--cms-story .hero-float--campaign{
  bottom: clamp(3rem, 7.5vh, 5.75rem);
  right: clamp(1.35rem, 5.8vw, 5.75rem);
  left: auto;
  top: auto;
  width: clamp(152px, 17.5vw, 255px);
  transform: rotate(-2.5deg);
}

[data-sp-embed] .hero--cms-story .hero-float--campaign, [data-sp-embed].js .hero--cms-story .hero-float--campaign.is-ready{
  --hero-float-tilt: -2.5deg;
}

@media (max-width: 1040px) {
  [data-sp-embed] .hero--cms-story .hero-float--campaign{
    right: clamp(0.8rem, 3vw, 2.1rem);
    left: auto;
    width: clamp(132px, 19vw, 198px);
  }
}

@media (max-width: 760px) {
  [data-sp-embed] .hero--cms-story .hero-float--campaign{
    bottom: 0.35rem;
    right: 0.2rem;
    left: auto;
    width: clamp(104px, 30vw, 136px);
  }
}

/* Full-page beige canvas for CMS story page */
[data-sp-embed]:has(.hero--cms-story), [data-sp-embed]:has(.hero--cms-story){
  background: #e6e3e1;
}

[data-sp-embed]:has(.hero--cms-story){
  --bg-hero: #e6e3e1;
  --paper: #e6e3e1;
  --bg-section: #e6e3e1;
}

[data-sp-embed] main:has(.hero--cms-story){
  background: #e6e3e1;
}

[data-sp-embed] .hero--cms-story{
  background: #e6e3e1 !important;
}

/* CMS hero: larger type + floats, brighter greige */
[data-sp-embed] .hero--cms-story{
  min-height: min(100vh, 980px);
}

[data-sp-embed] .hero--cms-story .hero-brand-wordmark__full{
  font-size: clamp(1.85rem, 4.2vw + 0.5rem, 3rem);
}

[data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
  font-size: clamp(2.35rem, 5.6vw, 3.9rem);
  line-height: 1.22;
}

[data-sp-embed] .hero--cms-story .hero-subtitle{
  font-size: clamp(1.05rem, 1.6vw + 0.55rem, 1.35rem);
  margin-top: 1.1rem;
}

[data-sp-embed] .hero--cms-story .hero-center .hero-actions{
  margin-top: 1.5rem;
  gap: 0.85rem;
}

[data-sp-embed] .hero--cms-story .hero-center .hero-actions .button{
  font-size: 0.98rem;
  padding: 0.9rem 1.35rem;
}

[data-sp-embed] .hero--cms-story .hero-float--ig{
  width: clamp(200px, 22.5vw, 340px);
}

[data-sp-embed] .hero--cms-story .hero-float--line{
  width: clamp(188px, 21vw, 320px);
}

[data-sp-embed] .hero--cms-story .hero-float--fb{
  width: clamp(184px, 20.5vw, 310px);
}

[data-sp-embed] .hero--cms-story .hero-float--campaign{
  width: clamp(205px, 23vw, 350px);
}

@media (max-width: 1040px) {
  [data-sp-embed] .hero--cms-story .hero-float--ig{ width: clamp(170px, 24vw, 250px); }
  [data-sp-embed] .hero--cms-story .hero-float--line{ width: clamp(160px, 22vw, 236px); }
  [data-sp-embed] .hero--cms-story .hero-float--fb{ width: clamp(156px, 21.5vw, 228px); }
  [data-sp-embed] .hero--cms-story .hero-float--campaign{ width: clamp(172px, 24vw, 252px); }
}

@media (max-width: 760px) {
  [data-sp-embed] .hero--cms-story .hero-brand-wordmark__full{
    font-size: clamp(1.55rem, 6.4vw, 2rem);
  }
  [data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
    font-size: clamp(1.95rem, 8.6vw, 2.45rem);
  }
  [data-sp-embed] .hero--cms-story .hero-float--ig{ width: clamp(132px, 38vw, 172px); }
  [data-sp-embed] .hero--cms-story .hero-float--line{ width: clamp(124px, 36vw, 162px); }
  [data-sp-embed] .hero--cms-story .hero-float--fb{ width: clamp(120px, 35vw, 156px); }
  [data-sp-embed] .hero--cms-story .hero-float--campaign{ width: clamp(132px, 38vw, 172px); }
}

/* Title black + keep text clear of floats */
[data-sp-embed] .hero--cms-story{
  min-height: min(100vh, 1040px);
  padding-inline: clamp(0.5rem, 2vw, 1.5rem);
}

[data-sp-embed] .hero--cms-story .hero-center{
  z-index: 4;
  max-width: min(22rem, 46vw);
  padding-inline: 0.5rem;
}

[data-sp-embed] .hero--cms-story .hero-brand-logo{
  margin-bottom: 1.15rem;
}

[data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
  color: #000000;
  gap: 0.18em;
  line-height: 1.3;
}

[data-sp-embed] .hero--cms-story .hero-title-float, [data-sp-embed] .hero--cms-story .hero-title-float + .hero-title-float{
  color: #000000;
  margin-top: 0;
}

[data-sp-embed] .hero--cms-story .hero-subtitle{
  color: #111111;
  margin-top: 1.35rem;
}

/* Keep floats in outer gutters, away from center copy */
[data-sp-embed] .hero--cms-story .hero-float--ig{
  top: clamp(5.5rem, 10vh, 8rem);
  left: clamp(0.4rem, 2.2vw, 2.25rem);
  width: clamp(168px, 18vw, 280px);
}

[data-sp-embed] .hero--cms-story .hero-float--line{
  top: clamp(5.75rem, 10.5vh, 8.25rem);
  right: clamp(0.4rem, 2.2vw, 2.25rem);
  left: auto;
  width: clamp(158px, 16.5vw, 265px);
}

[data-sp-embed] .hero--cms-story .hero-float--fb{
  bottom: clamp(2.75rem, 6.5vh, 5.25rem);
  left: clamp(0.55rem, 2.6vw, 2.75rem);
  right: auto;
  top: auto;
  width: clamp(152px, 16vw, 255px);
}

[data-sp-embed] .hero--cms-story .hero-float--campaign{
  bottom: clamp(2.5rem, 6vh, 5rem);
  right: clamp(0.45rem, 2.4vw, 2.5rem);
  left: auto;
  top: auto;
  width: clamp(170px, 18vw, 285px);
  transform: rotate(-2.5deg);
}

[data-sp-embed] .hero--cms-story .hero-float--campaign, [data-sp-embed].js .hero--cms-story .hero-float--campaign.is-ready{
  --hero-float-tilt: -2.5deg;
}

@media (max-width: 1100px) {
  [data-sp-embed] .hero--cms-story .hero-center{
    max-width: min(20rem, 42vw);
  }
  [data-sp-embed] .hero--cms-story .hero-float--ig, [data-sp-embed] .hero--cms-story .hero-float--line, [data-sp-embed] .hero--cms-story .hero-float--fb, [data-sp-embed] .hero--cms-story .hero-float--campaign{
    width: clamp(140px, 16vw, 220px);
  }
}

@media (max-width: 860px) {
  [data-sp-embed] .hero--cms-story .hero-center{
    max-width: min(18rem, 58vw);
  }
  [data-sp-embed] .hero--cms-story .hero-float--ig{
    top: 4.75rem;
    left: 0.15rem;
    width: clamp(110px, 28vw, 148px);
  }
  [data-sp-embed] .hero--cms-story .hero-float--line{
    top: 4.95rem;
    right: 0.15rem;
    width: clamp(104px, 26vw, 140px);
  }
  [data-sp-embed] .hero--cms-story .hero-float--fb{
    bottom: 0.55rem;
    left: 0.2rem;
    width: clamp(100px, 26vw, 136px);
  }
  [data-sp-embed] .hero--cms-story .hero-float--campaign{
    bottom: 0.4rem;
    right: 0.15rem;
    width: clamp(110px, 28vw, 148px);
  }
}

/* Lower center block; tighter headline; soft brand glow */
[data-sp-embed] .hero--cms-story .hero-center{
  margin-top: clamp(2.5rem, 7vh, 5.5rem);
  transform: none;
}

[data-sp-embed] .hero--cms-story .hero-brand-logo{
  margin-bottom: 0.7rem;
}

[data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
  gap: 0.02em;
  line-height: 1.12;
  letter-spacing: 0.02em;
}

[data-sp-embed] .hero--cms-story .hero-title-float + .hero-title-float{
  margin-top: 0;
}

[data-sp-embed] .hero--cms-story .hero-subtitle{
  margin-top: 0.95rem;
}

[data-sp-embed] .hero--cms-story .hero-brand-wordmark__full{
  color: #111111;
  text-shadow:
    0 0 0 rgba(59, 130, 246, 0.4),
    0 0 18px rgba(59, 130, 246, 0.42),
    0 0 36px rgba(59, 130, 246, 0.32),
    0 0 58px rgba(59, 130, 246, 0.2);
}

[data-sp-embed].js .hero--cms-story .hero-center.reveal.visible .hero-brand-wordmark__full{
  animation: cms-brand-glow 2.4s ease-in-out infinite;
}

@keyframes cms-brand-glow {
  0%,
  100% {
    text-shadow:
      0 0 0 rgba(59, 130, 246, 0.35),
      0 0 18px rgba(59, 130, 246, 0.38),
      0 0 34px rgba(59, 130, 246, 0.28),
      0 0 54px rgba(59, 130, 246, 0.16);
  }
  50% {
    text-shadow:
      0 0 3px rgba(59, 130, 246, 0.22),
      0 0 28px rgba(59, 130, 246, 0.55),
      0 0 48px rgba(59, 130, 246, 0.4),
      0 0 78px rgba(59, 130, 246, 0.26);
  }
}

@media (max-width: 760px) {
  [data-sp-embed] .hero--cms-story .hero-center{
    margin-top: clamp(1.5rem, 5vh, 2.75rem);
  }
}

[data-sp-embed] .hero--cms-story .hero-title-float{
  white-space: nowrap;
}

/* CMS: extra pitch bands after UNIFIED CMS */
[data-sp-embed] #nocode-platform.platform-stage .cdp-stage__visual, [data-sp-embed] #ai-platform.cdp-stage .cdp-stage__visual{
  width: min(100%, 34rem);
}

[data-sp-embed] #nocode-platform .platform-stage__tagline, [data-sp-embed] #ai-platform .platform-stage__tagline{
  max-width: 18ch;
}

/* Keep hero floats large on shrink */
@media (max-width: 1100px) {
  [data-sp-embed] .hero--cms-story .hero-float--ig, [data-sp-embed] .hero--cms-story .hero-float--line, [data-sp-embed] .hero--cms-story .hero-float--fb, [data-sp-embed] .hero--cms-story .hero-float--campaign{
    width: clamp(180px, 22vw, 270px);
  }
}

@media (max-width: 860px) {
  [data-sp-embed] .hero--cms-story .hero-center{
    max-width: min(16.5rem, 52vw);
  }

  [data-sp-embed] .hero--cms-story .hero-float--ig{
    top: 4.35rem;
    left: -0.35rem;
    width: clamp(148px, 36vw, 198px);
  }

  [data-sp-embed] .hero--cms-story .hero-float--line{
    top: 4.55rem;
    right: -0.35rem;
    width: clamp(140px, 34vw, 188px);
  }

  [data-sp-embed] .hero--cms-story .hero-float--fb{
    bottom: 0.35rem;
    left: -0.2rem;
    width: clamp(136px, 34vw, 184px);
  }

  [data-sp-embed] .hero--cms-story .hero-float--campaign{
    bottom: 0.2rem;
    right: -0.3rem;
    width: clamp(148px, 36vw, 198px);
  }
}

@media (max-width: 760px) {
  [data-sp-embed] .hero--cms-story .hero-floats{
    opacity: 1;
  }

  [data-sp-embed] .hero--cms-story .hero-center{
    max-width: min(15.5rem, 58vw);
  }

  [data-sp-embed] .hero--cms-story .hero-float--ig{
    top: 4.1rem;
    left: -0.55rem;
    width: clamp(138px, 40vw, 178px);
  }

  [data-sp-embed] .hero--cms-story .hero-float--line{
    top: 4.3rem;
    right: -0.55rem;
    width: clamp(130px, 38vw, 170px);
  }

  [data-sp-embed] .hero--cms-story .hero-float--fb{
    bottom: 0.2rem;
    left: -0.35rem;
    width: clamp(126px, 38vw, 166px);
  }

  [data-sp-embed] .hero--cms-story .hero-float--campaign{
    bottom: 0.1rem;
    right: -0.45rem;
    width: clamp(138px, 40vw, 178px);
  }
}

@media (max-width: 420px) {
  [data-sp-embed] .hero--cms-story .hero-float--ig, [data-sp-embed] .hero--cms-story .hero-float--campaign{
    width: clamp(128px, 42vw, 156px);
  }

  [data-sp-embed] .hero--cms-story .hero-float--line, [data-sp-embed] .hero--cms-story .hero-float--fb{
    width: clamp(120px, 40vw, 148px);
  }
}

/* Brand under title (was subtitle) */
[data-sp-embed] .hero--cms-story .hero-brand-logo--under-title{
  display: flex;
  justify-content: center;
  width: auto;
  max-width: 100%;
  margin: 1.15rem auto 0;
}

[data-sp-embed] .hero--cms-story .hero-brand-logo--under-title .hero-brand-wordmark__full{
  font-size: clamp(1.45rem, 3.2vw + 0.4rem, 2.35rem);
}

[data-sp-embed].js .hero--cms-story .hero-center.reveal.visible .hero-title-float:nth-child(1){
  animation-delay: 280ms;
}
[data-sp-embed].js .hero--cms-story .hero-center.reveal.visible .hero-title-float:nth-child(2){
  animation-delay: 480ms;
}

[data-sp-embed] .hero--cms-story .hero-title-float{
  white-space: normal;
  max-width: 100%;
  text-wrap: balance;
}

/* SAKINA CMS: no glow, deep gray */
[data-sp-embed] .hero--cms-story .hero-brand-wordmark__full{
  color: #374151;
  text-shadow: none;
}

[data-sp-embed].js .hero--cms-story .hero-center.reveal.visible .hero-brand-wordmark__full{
  animation: none;
}

[data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
  gap: 0.12em;
}

[data-sp-embed] .hero--cms-story .hero-title-float{
  white-space: nowrap;
  display: block;
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
}

/* Easy / AI pitch: side-by-side on PC, stacked on mobile */
[data-sp-embed] .cms-pitch{
  padding-top: clamp(3rem, 6vw, 5rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
  background: transparent;
}

[data-sp-embed] .cms-pitch__inner{
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  max-width: min(1180px, calc(100% - 4rem));
  margin: 0 auto;
}

[data-sp-embed] .cms-pitch--flip .cms-pitch__inner{
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}

[data-sp-embed] .cms-pitch__copy{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  width: 100%;
  max-width: min(34rem, 100%);
}

[data-sp-embed] .cms-pitch--flip .cms-pitch__copy{
  align-items: flex-end;
  text-align: right;
  grid-column: 2;
  grid-row: 1;
}

[data-sp-embed] .cms-pitch--flip .cms-pitch__visual{
  grid-column: 1;
  grid-row: 1;
}

[data-sp-embed] .cms-pitch__copy .eyebrow{
  margin: 0 0 1.1rem;
  color: var(--accent-red);
  font-size: clamp(0.7rem, 0.15vw + 0.66rem, 0.8125rem);
  font-weight: 600;
  letter-spacing: 0.14em;
}

[data-sp-embed] .cms-pitch__wordmark{
  margin: 0 0 clamp(0.75rem, 1.5vw, 1.1rem);
}

[data-sp-embed] .cms-pitch .platform-stage__tagline{
  margin: clamp(0.75rem, 1.5vw, 1.1rem) 0 0;
  width: 100%;
  text-align: inherit;
}

[data-sp-embed] .cms-pitch--flip .platform-stage__tagline, [data-sp-embed] .cms-pitch--flip .platform-stage__tagline [data-stage-subtitle]{
  text-align: right;
}

[data-sp-embed] .cms-pitch__visual{
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

[data-sp-embed] .cms-pitch__visual-stage{
  width: min(100%, 36rem);
  margin: 0;
}

[data-sp-embed] .cms-pitch--flip .cms-pitch__visual-stage{
  margin-right: auto;
  margin-left: 0;
}

[data-sp-embed] .cms-pitch:not(.cms-pitch--flip) .cms-pitch__visual-stage{
  margin-left: auto;
  margin-right: 0;
}

[data-sp-embed] .cms-pitch__visual-stage img{
  display: block;
  width: 100%;
  height: auto;
  border: none;
  border-radius: 0;
  object-fit: contain;
  filter: drop-shadow(0 22px 40px rgba(15, 23, 42, 0.12));
}

@media (max-width: 760px) {
  [data-sp-embed] .cms-pitch__inner, [data-sp-embed] .cms-pitch--flip .cms-pitch__inner{
    grid-template-columns: 1fr;
    max-width: min(40rem, calc(100% - 2rem));
  }

  [data-sp-embed] .cms-pitch__copy, [data-sp-embed] .cms-pitch--flip .cms-pitch__copy{
    grid-column: auto;
    grid-row: auto;
    order: 1;
    align-items: center;
    text-align: center;
    max-width: 100%;
  }

  [data-sp-embed] .cms-pitch__visual, [data-sp-embed] .cms-pitch--flip .cms-pitch__visual{
    grid-column: auto;
    grid-row: auto;
    order: 2;
  }

  [data-sp-embed] .cms-pitch .platform-stage__tagline, [data-sp-embed] .cms-pitch--flip .platform-stage__tagline, [data-sp-embed] .cms-pitch--flip .platform-stage__tagline [data-stage-subtitle]{
    text-align: center;
  }

  [data-sp-embed] .cms-pitch__visual-stage, [data-sp-embed] .cms-pitch--flip .cms-pitch__visual-stage, [data-sp-embed] .cms-pitch:not(.cms-pitch--flip) .cms-pitch__visual-stage{
    width: min(100%, 28rem);
    margin-inline: auto;
  }
}

/* Hero title: one centered block */
[data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
  gap: 0.12em;
}

[data-sp-embed] .hero--cms-story .hero-title-float{
  display: block;
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
  text-align: center;
  white-space: nowrap;
}

/* Hero scales with viewport; floats closer, title larger */
[data-sp-embed] .hero--cms-story{
  min-height: min(100svh, 1100px);
  padding-bottom: clamp(3rem, 6vw, 6rem);
}

[data-sp-embed] .hero--cms-story .hero-center{
  z-index: 4;
  width: min(42rem, 52vw);
  max-width: min(42rem, 54vw);
  margin-top: clamp(1.25rem, 4.5vh, 4rem);
  padding-inline: clamp(0.5rem, 1.2vw, 1rem);
}

[data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
  font-size: clamp(2.45rem, 1.2rem + 3.8vw, 4.6rem);
  line-height: 1.18;
  gap: 0.14em;
  letter-spacing: 0.01em;
}

[data-sp-embed] .hero--cms-story .hero-brand-logo--under-title{
  margin-top: clamp(0.95rem, 1.8vw, 1.45rem);
}

[data-sp-embed] .hero--cms-story .hero-brand-logo--under-title .hero-brand-wordmark__full{
  font-size: clamp(1.35rem, 0.7rem + 1.6vw, 2.2rem);
  color: #374151;
  text-shadow: none;
}

[data-sp-embed] .hero--cms-story .hero-center .hero-actions{
  margin-top: clamp(1.25rem, 2.4vw, 1.9rem);
  gap: clamp(0.65rem, 1.2vw, 1rem);
}

[data-sp-embed] .hero--cms-story .hero-center .hero-actions .button{
  font-size: clamp(0.92rem, 0.75rem + 0.4vw, 1.08rem);
  padding: clamp(0.8rem, 0.55rem + 0.45vw, 1.05rem) clamp(1.15rem, 0.8rem + 0.9vw, 1.7rem);
}

/* Floats: scale up on large tabs, sit nearer center without covering type */
[data-sp-embed] .hero--cms-story .hero-float--ig{
  top: clamp(5.25rem, 9vh, 7.75rem);
  left: clamp(4vw, 10.5vw, 14rem);
  width: clamp(170px, 19.5vw, 340px);
}

[data-sp-embed] .hero--cms-story .hero-float--line{
  top: clamp(5.45rem, 9.5vh, 8rem);
  right: clamp(4vw, 10.5vw, 14rem);
  left: auto;
  width: clamp(160px, 18vw, 320px);
}

[data-sp-embed] .hero--cms-story .hero-float--fb{
  bottom: clamp(2.5rem, 7vh, 5.5rem);
  left: clamp(4.5vw, 11vw, 14.5rem);
  right: auto;
  top: auto;
  width: clamp(154px, 17.5vw, 305px);
}

[data-sp-embed] .hero--cms-story .hero-float--campaign{
  bottom: clamp(2.25rem, 6.5vh, 5.25rem);
  right: clamp(4.2vw, 10.8vw, 14.2rem);
  left: auto;
  top: auto;
  width: clamp(172px, 19.5vw, 345px);
}

@media (min-width: 1400px) {
  [data-sp-embed] .hero--cms-story .hero-center{
    width: min(46rem, 48vw);
    max-width: min(46rem, 48vw);
  }

  [data-sp-embed] .hero--cms-story .hero-float--ig, [data-sp-embed] .hero--cms-story .hero-float--campaign{
    width: clamp(260px, 18vw, 380px);
  }

  [data-sp-embed] .hero--cms-story .hero-float--line, [data-sp-embed] .hero--cms-story .hero-float--fb{
    width: clamp(245px, 16.5vw, 355px);
  }

  [data-sp-embed] .hero--cms-story .hero-float--ig, [data-sp-embed] .hero--cms-story .hero-float--line{
    left: unset;
  }

  [data-sp-embed] .hero--cms-story .hero-float--ig{
    left: clamp(6rem, 12vw, 16rem);
  }
  [data-sp-embed] .hero--cms-story .hero-float--line{
    right: clamp(6rem, 12vw, 16rem);
  }
  [data-sp-embed] .hero--cms-story .hero-float--fb{
    left: clamp(6.5rem, 12.5vw, 16.5rem);
  }
  [data-sp-embed] .hero--cms-story .hero-float--campaign{
    right: clamp(6.2rem, 12.2vw, 16.2rem);
  }
}

@media (max-width: 1100px) {
  [data-sp-embed] .hero--cms-story .hero-center{
    width: min(22rem, 46vw);
    max-width: min(22rem, 46vw);
  }

  [data-sp-embed] .hero--cms-story .hero-float--ig{
    left: clamp(1.5rem, 5vw, 4rem);
    width: clamp(168px, 20vw, 250px);
  }
  [data-sp-embed] .hero--cms-story .hero-float--line{
    right: clamp(1.5rem, 5vw, 4rem);
    width: clamp(158px, 18.5vw, 236px);
  }
  [data-sp-embed] .hero--cms-story .hero-float--fb{
    left: clamp(1.75rem, 5.5vw, 4.25rem);
    width: clamp(150px, 18vw, 228px);
  }
  [data-sp-embed] .hero--cms-story .hero-float--campaign{
    right: clamp(1.6rem, 5.2vw, 4.1rem);
    width: clamp(168px, 20vw, 250px);
  }
}

@media (max-width: 760px) {
  [data-sp-embed] .hero--cms-story .hero-center{
    width: min(16.5rem, 62vw);
    max-width: min(16.5rem, 62vw);
    margin-top: clamp(1rem, 3vh, 2rem);
  }

  [data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
    font-size: clamp(1.85rem, 7.2vw, 2.35rem);
  }

  [data-sp-embed] .hero--cms-story .hero-float--ig{
    top: 4.1rem;
    left: -0.35rem;
    width: clamp(138px, 40vw, 178px);
  }
  [data-sp-embed] .hero--cms-story .hero-float--line{
    top: 4.3rem;
    right: -0.35rem;
    width: clamp(130px, 38vw, 170px);
  }
  [data-sp-embed] .hero--cms-story .hero-float--fb{
    bottom: 0.2rem;
    left: -0.2rem;
    width: clamp(126px, 38vw, 166px);
  }
  [data-sp-embed] .hero--cms-story .hero-float--campaign{
    bottom: 0.1rem;
    right: -0.3rem;
    width: clamp(138px, 40vw, 178px);
  }
}

/* Brand above title again */
[data-sp-embed] .hero--cms-story .hero-brand-logo--above-title{
  display: flex;
  justify-content: center;
  width: auto;
  max-width: 100%;
  margin: 0 auto clamp(0.85rem, 1.6vw, 1.25rem);
}

[data-sp-embed] .hero--cms-story .hero-brand-logo--above-title .hero-brand-wordmark__full{
  font-size: clamp(1.35rem, 0.7rem + 1.6vw, 2.2rem);
  color: #374151;
  text-shadow: none;
}

/* Optical center: cancel letter-spacing trailing gap + slight left nudge */
[data-sp-embed] .hero--cms-story .hero-brand-logo--above-title, [data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
  transform: translateX(-0.22em);
}

[data-sp-embed] .hero--cms-story .hero-brand-logo--above-title .hero-brand-wordmark__full{
  letter-spacing: 0.04em;
  margin-inline-end: -0.04em;
  padding-inline: 0;
}

[data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
  letter-spacing: 0;
}

[data-sp-embed] .hero--cms-story .hero-title-float, [data-sp-embed] .hero--cms-story .hero-title-float + .hero-title-float{
  letter-spacing: 0.01em;
  margin-inline: auto -0.01em;
  text-indent: 0;
}

[data-sp-embed].js .hero--cms-story .hero-center.reveal:not(.visible) .hero-brand-logo--above-title{
  transform: translateX(-0.22em) translateY(1rem) scale(0.92);
}

[data-sp-embed].js .hero--cms-story .hero-center.reveal.visible .hero-brand-logo--above-title{
  animation: none;
  opacity: 1;
  transform: translateX(-0.22em);
}

@media (max-width: 760px) {
  [data-sp-embed] .hero--cms-story .hero-brand-logo--above-title, [data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
    transform: translateX(-0.18em);
  }

  [data-sp-embed].js .hero--cms-story .hero-center.reveal:not(.visible) .hero-brand-logo--above-title{
    transform: translateX(-0.18em) translateY(1rem) scale(0.92);
  }

  [data-sp-embed].js .hero--cms-story .hero-center.reveal.visible .hero-brand-logo--above-title{
    transform: translateX(-0.18em);
  }
}

/* Title too far right: reset bad margins, shift left; hero bg white */
[data-sp-embed]:has(.hero--cms-story), [data-sp-embed]:has(.hero--cms-story), [data-sp-embed] main:has(.hero--cms-story){
  background: #ffffff;
}

[data-sp-embed]:has(.hero--cms-story){
  --bg-hero: #ffffff;
  --paper: #ffffff;
  --bg-section: #ffffff;
}

[data-sp-embed] .hero--cms-story{
  background: #ffffff !important;
}

[data-sp-embed] .hero--cms-story .hero-brand-logo--above-title, [data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
  transform: translateX(-0.55em);
}

[data-sp-embed] .hero--cms-story .hero-title-float, [data-sp-embed] .hero--cms-story .hero-title-float + .hero-title-float{
  letter-spacing: 0;
  margin-inline: auto;
}

[data-sp-embed] .hero--cms-story .hero-brand-logo--above-title .hero-brand-wordmark__full{
  letter-spacing: 0.02em;
  margin-inline-end: 0;
}

[data-sp-embed].js .hero--cms-story .hero-center.reveal:not(.visible) .hero-brand-logo--above-title{
  transform: translateX(-0.55em) translateY(1rem) scale(0.92);
}

[data-sp-embed].js .hero--cms-story .hero-center.reveal.visible .hero-brand-logo--above-title{
  transform: translateX(-0.55em);
}

@media (max-width: 760px) {
  [data-sp-embed] .hero--cms-story .hero-brand-logo--above-title, [data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
    transform: translateX(-0.45em);
  }

  [data-sp-embed].js .hero--cms-story .hero-center.reveal:not(.visible) .hero-brand-logo--above-title{
    transform: translateX(-0.45em) translateY(1rem) scale(0.92);
  }

  [data-sp-embed].js .hero--cms-story .hero-center.reveal.visible .hero-brand-logo--above-title{
    transform: translateX(-0.45em);
  }
}

/* White from hero through Easy / AI bands */
[data-sp-embed]:has(.hero--cms-story), [data-sp-embed]:has(.hero--cms-story), [data-sp-embed] main:has(.hero--cms-story){
  background: #ffffff;
}

[data-sp-embed]:has(.hero--cms-story){
  --bg-hero: #ffffff;
  --paper: #ffffff;
  --bg-section: #ffffff;
}

[data-sp-embed] .hero--cms-story, [data-sp-embed] .hero--cms-story.section-band, [data-sp-embed] #problem.id-problem{
  background: transparent !important;
}

[data-sp-embed] #nocode-platform.cms-pitch, [data-sp-embed] #ai-platform.cms-pitch{
  background: #ffffff !important;
}

/* Hero kicker: CDP・MAと連動 */
[data-sp-embed] .hero--cms-story .hero-kicker{
  margin: 0 auto 0.55rem;
  font-family: var(--font-sans);
  font-size: clamp(0.78rem, 0.55rem + 0.55vw, 0.95rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #6b7280;
  text-align: center;
  transform: translateX(-0.7em);
}

[data-sp-embed] .hero--cms-story .hero-brand-logo--above-title, [data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
  transform: translateX(-0.7em);
}

[data-sp-embed] .hero--cms-story .hero-title-float, [data-sp-embed] .hero--cms-story .hero-title-float + .hero-title-float{
  letter-spacing: 0;
  margin-inline: auto;
}

[data-sp-embed].js .hero--cms-story .hero-center.reveal:not(.visible) .hero-brand-logo--above-title{
  transform: translateX(-0.7em) translateY(1rem) scale(0.92);
}

[data-sp-embed].js .hero--cms-story .hero-center.reveal.visible .hero-brand-logo--above-title{
  animation: none;
  opacity: 1;
  transform: translateX(-0.7em);
}

@media (max-width: 760px) {
  [data-sp-embed] .hero--cms-story .hero-kicker, [data-sp-embed] .hero--cms-story .hero-brand-logo--above-title, [data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
    transform: translateX(-0.55em);
  }

  [data-sp-embed].js .hero--cms-story .hero-center.reveal:not(.visible) .hero-brand-logo--above-title{
    transform: translateX(-0.55em) translateY(1rem) scale(0.92);
  }

  [data-sp-embed].js .hero--cms-story .hero-center.reveal.visible .hero-brand-logo--above-title{
    transform: translateX(-0.55em);
  }
}

/* AI pitch image: larger */
[data-sp-embed] #ai-platform.cms-pitch .cms-pitch__inner{
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.75fr);
  max-width: min(1280px, calc(100% - 2rem));
  gap: clamp(1.25rem, 3vw, 2.5rem);
}

[data-sp-embed] #ai-platform .cms-pitch__visual-stage{
  width: min(100%, 46rem);
}

[data-sp-embed] #ai-platform .cms-pitch__visual-stage img{
  filter: drop-shadow(0 18px 36px rgba(15, 23, 42, 0.14));
}

@media (max-width: 760px) {
  [data-sp-embed] #ai-platform .cms-pitch__visual-stage{
    width: min(100%, 28rem);
  }
}

/* ===== CMS hero title: reset nudge hacks, true center, clean 2 lines ===== */
[data-sp-embed] .hero--cms-story .hero-center{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: min(48rem, 88vw);
  max-width: min(48rem, 88vw);
  margin-inline: auto;
  padding-inline: 1rem;
  transform: none !important;
}

[data-sp-embed] .hero--cms-story .hero-kicker, [data-sp-embed] .hero--cms-story .hero-brand-logo, [data-sp-embed] .hero--cms-story .hero-brand-logo--above-title, [data-sp-embed] .hero--cms-story .hero-center .hero-copy, [data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  transform: none !important;
}

[data-sp-embed] .hero--cms-story .hero-kicker{
  letter-spacing: 0.06em;
  margin-bottom: 0.55rem;
}

[data-sp-embed] .hero--cms-story .hero-brand-logo--above-title{
  display: flex;
  justify-content: center;
  margin-bottom: clamp(0.75rem, 1.4vw, 1.1rem);
}

[data-sp-embed] .hero--cms-story .hero-brand-logo--above-title .hero-brand-wordmark__full{
  display: inline-block;
  margin: 0;
  letter-spacing: 0.04em;
  text-align: center;
}

[data-sp-embed] .hero--cms-story .hero-center .hero-copy{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 0;
}

[data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.12em;
  width: auto;
  max-width: 100%;
  margin: 0 auto 0;
  letter-spacing: 0;
  font-size: clamp(2.1rem, 1.2rem + 3.2vw, 4.2rem);
  line-height: 1.25;
}

[data-sp-embed] .hero--cms-story .hero-title-float, [data-sp-embed] .hero--cms-story .hero-title-float + .hero-title-float{
  display: block;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  letter-spacing: 0;
  white-space: nowrap;
  text-align: center;
  text-wrap: unset;
}

[data-sp-embed].js .hero--cms-story .hero-center.reveal:not(.visible) .hero-brand-logo--above-title, [data-sp-embed].js .hero--cms-story .hero-center.reveal.visible .hero-brand-logo--above-title{
  animation: none !important;
  opacity: 1;
  transform: none !important;
}

[data-sp-embed].js .hero--cms-story .hero-center.reveal:not(.visible) .hero-kicker{
  opacity: 0;
}

[data-sp-embed].js .hero--cms-story .hero-center.reveal.visible .hero-kicker{
  opacity: 1;
}

[data-sp-embed] .hero--cms-story .hero-center .hero-actions{
  justify-content: center;
  width: 100%;
  margin-top: clamp(1.2rem, 2.2vw, 1.8rem);
}

@media (max-width: 760px) {
  [data-sp-embed] .hero--cms-story .hero-center{
    width: min(22rem, 92vw);
    max-width: min(22rem, 92vw);
  }

  [data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
    font-size: clamp(1.7rem, 6.6vw, 2.15rem);
  }
}

/* Remove kicker visuals; add space between title lines */
[data-sp-embed] .hero--cms-story .hero-kicker{
  display: none !important;
}

[data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
  gap: 0.38em;
}

[data-sp-embed] .hero--cms-story .hero-title-float + .hero-title-float{
  margin-top: 0;
}

/* AI pitch image: even larger */
[data-sp-embed] #ai-platform.cms-pitch .cms-pitch__inner{
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.6fr);
  max-width: min(1400px, calc(100% - 1.25rem));
  gap: clamp(1rem, 2.5vw, 2rem);
}

[data-sp-embed] #ai-platform .cms-pitch__visual-stage{
  width: min(100%, 54rem);
  max-width: none;
}

[data-sp-embed] #ai-platform .cms-pitch__visual-stage img{
  width: 100%;
  max-width: none;
  transform: scale(1.06);
  transform-origin: center center;
}

@media (max-width: 760px) {
  [data-sp-embed] #ai-platform .cms-pitch__visual-stage{
    width: min(100%, 34rem);
  }

  [data-sp-embed] #ai-platform .cms-pitch__visual-stage img{
    transform: scale(1.08);
  }
}

/* Easy / AI: same width, equal left-right columns */
[data-sp-embed] .cms-pitch__inner, [data-sp-embed] .cms-pitch--flip .cms-pitch__inner, [data-sp-embed] #ai-platform.cms-pitch .cms-pitch__inner{
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: clamp(2rem, 4vw, 3.5rem) !important;
  max-width: min(1200px, calc(100% - 8rem)) !important;
  margin-inline: auto;
  align-items: center;
}

[data-sp-embed] .cms-pitch__copy, [data-sp-embed] .cms-pitch--flip .cms-pitch__copy{
  max-width: none;
  width: 100%;
}

[data-sp-embed] .cms-pitch__visual, [data-sp-embed] .cms-pitch--flip .cms-pitch__visual, [data-sp-embed] #ai-platform .cms-pitch__visual{
  width: 100%;
  max-width: none;
}

[data-sp-embed] .cms-pitch__visual-stage, [data-sp-embed] .cms-pitch--flip .cms-pitch__visual-stage, [data-sp-embed] .cms-pitch:not(.cms-pitch--flip) .cms-pitch__visual-stage, [data-sp-embed] #ai-platform .cms-pitch__visual-stage{
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
}

[data-sp-embed] #ai-platform .cms-pitch__visual-stage img{
  transform: none !important;
  width: 100%;
  max-width: none;
}

@media (max-width: 760px) {
  [data-sp-embed] .cms-pitch__inner, [data-sp-embed] .cms-pitch--flip .cms-pitch__inner, [data-sp-embed] #ai-platform.cms-pitch .cms-pitch__inner{
    grid-template-columns: 1fr !important;
    max-width: min(40rem, calc(100% - 2rem)) !important;
    gap: clamp(1.25rem, 4vw, 2rem) !important;
  }
}

/* AI image larger, keep same overall section width as Easy */
[data-sp-embed] #ai-platform.cms-pitch .cms-pitch__inner{
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr) !important;
}

[data-sp-embed] #ai-platform .cms-pitch__visual{
  overflow: visible;
}

[data-sp-embed] #ai-platform .cms-pitch__visual-stage{
  width: 112% !important;
  max-width: none !important;
  margin-left: -4% !important;
  margin-right: 0 !important;
}

[data-sp-embed] #ai-platform .cms-pitch__visual-stage img{
  transform: none !important;
  width: 100%;
}

@media (max-width: 760px) {
  [data-sp-embed] #ai-platform.cms-pitch .cms-pitch__inner{
    grid-template-columns: 1fr !important;
  }

  [data-sp-embed] #ai-platform .cms-pitch__visual-stage{
    width: min(100%, 36rem) !important;
    margin-inline: auto !important;
  }
}

/* ===== Easy / AI: mirrored equal layout (final) ===== */
[data-sp-embed] #nocode-platform.cms-pitch, [data-sp-embed] #ai-platform.cms-pitch{
  padding-top: clamp(3.25rem, 6vw, 5.5rem);
  padding-bottom: clamp(3.25rem, 6vw, 5.5rem);
}

[data-sp-embed] #nocode-platform .cms-pitch__inner, [data-sp-embed] #ai-platform.cms-pitch .cms-pitch__inner, [data-sp-embed] #ai-platform.cms-pitch--flip .cms-pitch__inner{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: clamp(2rem, 4.5vw, 4rem) !important;
  align-items: center;
  max-width: min(1120px, calc(100% - 8rem)) !important;
  margin-inline: auto;
  box-sizing: border-box;
}

[data-sp-embed] #nocode-platform .cms-pitch__copy, [data-sp-embed] #ai-platform .cms-pitch__copy{
  width: 100%;
  max-width: none;
}

[data-sp-embed] #nocode-platform .cms-pitch__visual, [data-sp-embed] #ai-platform .cms-pitch__visual{
  width: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

[data-sp-embed] #nocode-platform .cms-pitch__visual-stage, [data-sp-embed] #ai-platform .cms-pitch__visual-stage{
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-sp-embed] #nocode-platform .cms-pitch__visual-stage img, [data-sp-embed] #ai-platform .cms-pitch__visual-stage img{
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
  transform: none !important;
}

/* Easy: text left / image right — image hugs right like a mirror of AI */
[data-sp-embed] #nocode-platform .cms-pitch__visual{
  justify-content: flex-end;
}

[data-sp-embed] #nocode-platform .cms-pitch__copy{
  align-items: flex-start;
  text-align: left;
}

/* AI: image left / text right — same column weight as Easy */
[data-sp-embed] #ai-platform .cms-pitch__visual{
  justify-content: flex-start;
}

[data-sp-embed] #ai-platform .cms-pitch__copy{
  align-items: flex-end;
  text-align: right;
}

@media (max-width: 760px) {
  [data-sp-embed] #nocode-platform .cms-pitch__inner, [data-sp-embed] #ai-platform.cms-pitch .cms-pitch__inner{
    grid-template-columns: 1fr !important;
    max-width: min(40rem, calc(100% - 2rem)) !important;
    gap: 1.5rem !important;
  }

  [data-sp-embed] #nocode-platform .cms-pitch__visual, [data-sp-embed] #ai-platform .cms-pitch__visual, [data-sp-embed] #nocode-platform .cms-pitch__copy, [data-sp-embed] #ai-platform .cms-pitch__copy{
    justify-content: center;
    align-items: center;
    text-align: center;
  }
}

/* AI image larger while keeping Easy/AI shared outer width */
[data-sp-embed] #ai-platform .cms-pitch__visual-stage{
  width: 128% !important;
  max-width: none !important;
  margin-left: -6% !important;
  margin-right: -22% !important;
}

[data-sp-embed] #ai-platform .cms-pitch__visual-stage img{
  width: 100%;
  transform: none !important;
}

[data-sp-embed] #ai-platform .cms-pitch__visual{
  overflow: visible;
  z-index: 1;
}

[data-sp-embed] #ai-platform .cms-pitch__copy{
  position: relative;
  z-index: 2;
}

@media (max-width: 760px) {
  [data-sp-embed] #ai-platform .cms-pitch__visual-stage{
    width: min(108%, 36rem) !important;
    margin-inline: auto !important;
  }
}

/* AI image: larger still */
[data-sp-embed] #ai-platform .cms-pitch__visual-stage{
  width: 158% !important;
  max-width: none !important;
  margin-left: -10% !important;
  margin-right: -48% !important;
}

[data-sp-embed] #ai-platform .cms-pitch__visual-stage img{
  width: 100%;
  transform: scale(1.08) !important;
  transform-origin: center left;
}

@media (max-width: 760px) {
  [data-sp-embed] #ai-platform .cms-pitch__visual-stage{
    width: min(118%, 40rem) !important;
    margin-inline: auto !important;
  }

  [data-sp-embed] #ai-platform .cms-pitch__visual-stage img{
    transform: scale(1.05) !important;
    transform-origin: center center;
  }
}

/* ===== Easy / AI visual balance (shared frame, AI image larger) ===== */
[data-sp-embed] #nocode-platform.cms-pitch, [data-sp-embed] #ai-platform.cms-pitch{
  padding-top: clamp(3rem, 5.5vw, 5rem);
  padding-bottom: clamp(3rem, 5.5vw, 5rem);
}

[data-sp-embed] #nocode-platform .cms-pitch__inner, [data-sp-embed] #ai-platform .cms-pitch__inner{
  max-width: min(1200px, calc(100% - 8rem)) !important;
  margin-inline: auto;
  gap: clamp(1.75rem, 3.5vw, 3rem) !important;
  align-items: center;
}

/* Easy: text :: image ≈ 38 : 62 */
[data-sp-embed] #nocode-platform .cms-pitch__inner{
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.35fr) !important;
}

[data-sp-embed] #nocode-platform .cms-pitch__visual{
  justify-content: flex-end;
}

[data-sp-embed] #nocode-platform .cms-pitch__visual-stage{
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

[data-sp-embed] #nocode-platform .cms-pitch__visual-stage img{
  width: 100%;
  transform: none !important;
}

/* AI: image :: text ≈ 68 : 32 — same outer width as Easy */
[data-sp-embed] #ai-platform .cms-pitch__inner{
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 0.8fr) !important;
}

[data-sp-embed] #ai-platform .cms-pitch__visual{
  justify-content: center;
  overflow: visible;
  z-index: 1;
}

[data-sp-embed] #ai-platform .cms-pitch__visual-stage{
  width: 118% !important;
  max-width: none !important;
  margin-left: -4% !important;
  margin-right: -14% !important;
}

[data-sp-embed] #ai-platform .cms-pitch__visual-stage img{
  width: 100%;
  transform: scale(1.12) !important;
  transform-origin: center center;
}

[data-sp-embed] #ai-platform .cms-pitch__copy{
  position: relative;
  z-index: 2;
  padding-left: 0.5rem;
}

@media (max-width: 760px) {
  [data-sp-embed] #nocode-platform .cms-pitch__inner, [data-sp-embed] #ai-platform .cms-pitch__inner{
    grid-template-columns: 1fr !important;
    max-width: min(40rem, calc(100% - 2rem)) !important;
  }

  [data-sp-embed] #ai-platform .cms-pitch__visual-stage{
    width: min(112%, 38rem) !important;
    margin-inline: auto !important;
  }

  [data-sp-embed] #ai-platform .cms-pitch__visual-stage img{
    transform: scale(1.06) !important;
  }
}

/* Longer hero title lines */
[data-sp-embed] .hero--cms-story .hero-center{
  width: min(52rem, 92vw);
  max-width: min(52rem, 92vw);
}

[data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
  font-size: clamp(1.85rem, 1rem + 2.6vw, 3.6rem);
  gap: 0.42em;
}

@media (max-width: 760px) {
  [data-sp-embed] .hero--cms-story .hero-center{
    width: min(22rem, 92vw);
    max-width: min(22rem, 92vw);
  }

  [data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
    font-size: clamp(1.35rem, 5.2vw, 1.85rem);
  }

  [data-sp-embed] .hero--cms-story .hero-title-float{
    white-space: nowrap;
  }
}

/* SAKINA CMS higher + more space before title */
[data-sp-embed] .hero--cms-story .hero-center{
  margin-top: clamp(0.25rem, 1.5vh, 1.25rem);
}

[data-sp-embed] .hero--cms-story .hero-brand-logo--above-title{
  margin-top: 0;
  margin-bottom: clamp(1.35rem, 2.8vw, 2.25rem);
}

[data-sp-embed] .hero--cms-story .hero-center .hero-copy{
  margin-top: 0;
}

[data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
  margin-top: 0;
}

/* Hero title larger */
[data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
  font-size: clamp(2.55rem, 1.35rem + 4.2vw, 5rem) !important;
  line-height: 1.18;
  gap: 0.4em;
}

@media (max-width: 760px) {
  [data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
    font-size: clamp(1.95rem, 7.6vw, 2.55rem) !important;
  }
}

/* Hero CTAs a bit lower */
[data-sp-embed] .hero--cms-story .hero-center .hero-actions{
  margin-top: clamp(1.85rem, 3.2vw, 2.75rem) !important;
}

/* Easy: subtitle left-aligned under Easy */
[data-sp-embed] #nocode-platform .cms-pitch__copy, [data-sp-embed] #nocode-platform .showcase-copy{
  align-items: flex-start;
  text-align: left;
}

[data-sp-embed] #nocode-platform .platform-stage__tagline, [data-sp-embed] #nocode-platform .showcase-copy .platform-stage__tagline, [data-sp-embed] #nocode-platform .platform-stage__tagline [data-stage-subtitle]{
  text-align: left !important;
  margin-left: 0;
  margin-right: auto;
  width: 100%;
  max-width: none;
}

[data-sp-embed] #nocode-platform .platform-stage__tagline [data-stage-subtitle]{
  display: inline-block;
}

/* ===== Apple-like soft white atmosphere: hero → Easy → AI ===== */
[data-sp-embed]:has(.hero--cms-story), [data-sp-embed]:has(.hero--cms-story){
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(255, 255, 255, 1) 0%, rgba(248, 249, 251, 0.96) 42%, rgba(244, 245, 247, 1) 100%),
    #f5f6f8;
}

[data-sp-embed]:has(.hero--cms-story){
  --bg-hero: transparent;
  --paper: #f7f8fa;
  --bg-section: #f7f8fa;
}

[data-sp-embed] main:has(.hero--cms-story){
  background: transparent;
}

[data-sp-embed] .hero--cms-story, [data-sp-embed] .hero--cms-story.section-band, [data-sp-embed] #nocode-platform.cms-pitch, [data-sp-embed] #ai-platform.cms-pitch{
  position: relative;
  isolation: isolate;
  background: transparent !important;
}

/* Shared soft canvas behind hero + Easy + AI */
[data-sp-embed] .hero--cms-story::before, [data-sp-embed] #nocode-platform.cms-pitch::before, [data-sp-embed] #ai-platform.cms-pitch::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(68% 58% at 18% 22%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 62%),
    radial-gradient(64% 54% at 84% 18%, rgba(236, 242, 255, 0.55) 0%, rgba(236, 242, 255, 0) 64%),
    radial-gradient(70% 58% at 72% 78%, rgba(255, 241, 246, 0.42) 0%, rgba(255, 241, 246, 0) 66%),
    radial-gradient(90% 70% at 50% 48%, rgba(255, 255, 255, 0.72) 0%, rgba(247, 248, 250, 0.35) 55%, rgba(243, 244, 246, 0) 100%),
    linear-gradient(180deg, #ffffff 0%, #f7f8fa 48%, #f3f4f6 100%);
}

[data-sp-embed] .hero--cms-story > *, [data-sp-embed] #nocode-platform.cms-pitch > *, [data-sp-embed] #ai-platform.cms-pitch > *{
  position: relative;
  z-index: 1;
}

/* Soft vignette at section seams (Apple product-page feel) */
[data-sp-embed] .hero--cms-story::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: clamp(4rem, 10vw, 7rem);
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(247, 248, 250, 0) 0%, rgba(247, 248, 250, 0.85) 100%);
}

[data-sp-embed] #ai-platform.cms-pitch::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(3rem, 8vw, 5.5rem);
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(243, 244, 246, 0) 0%, rgba(248, 249, 250, 0.9) 100%);
}

/* Keep float composites readable on soft white */
[data-sp-embed] .hero--cms-story .hero-float img{
  filter: drop-shadow(0 18px 34px rgba(15, 23, 42, 0.1));
}

/* ===== Easy: CSS laptop motion (Create → Analyze → Manage) ===== */
[data-sp-embed] #nocode-platform .cms-pitch__visual-stage--laptop{
  width: 100% !important;
  max-width: min(100%, 40rem) !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  perspective: 1400px;
}

[data-sp-embed] .cms-laptop{
  --create: #db2777;
  --analyze: #7e22ce;
  --manage: #15803d;
  width: 100%;
  user-select: none;
}

[data-sp-embed] .cms-laptop__lid{
  position: relative;
  border-radius: 1.05rem 1.05rem 0.55rem 0.55rem;
  padding: 0.72rem 0.72rem 0.55rem;
  background: linear-gradient(165deg, #d7dbe2 0%, #f4f5f7 38%, #c5cad3 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.75) inset,
    0 24px 48px rgba(15, 23, 42, 0.14);
}

[data-sp-embed] .cms-laptop__bezel{
  position: relative;
  border-radius: 0.72rem;
  padding: 0.7rem 0.55rem 0.5rem;
  background: #0b0f16;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

[data-sp-embed] .cms-laptop__camera{
  position: absolute;
  top: 0.28rem;
  left: 50%;
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 999px;
  transform: translateX(-50%);
  background: radial-gradient(circle at 35% 35%, #4b5563, #111827 70%);
}

[data-sp-embed] .cms-laptop__screen{
  position: relative;
  overflow: hidden;
  border-radius: 0.4rem;
  aspect-ratio: 16 / 10.4;
  background: #f8fafc;
}

[data-sp-embed] .cms-laptop__chrome{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem 0.55rem;
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  backdrop-filter: blur(8px);
}

[data-sp-embed] .cms-laptop__brand{
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #111827;
}

[data-sp-embed] .cms-laptop__logo{
  width: 0.72rem;
  height: 0.72rem;
  border-radius: 999px;
  background: linear-gradient(145deg, #fb7185, #e11d48);
  box-shadow: 0 0 0 2px rgba(225, 29, 72, 0.12);
}

[data-sp-embed] .cms-laptop__tabs{
  display: inline-flex;
  gap: 0.25rem;
}

[data-sp-embed] .cms-laptop__tab{
  padding: 0.18rem 0.42rem;
  border-radius: 999px;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #94a3b8;
  background: #f1f5f9;
  opacity: 0.7;
}

[data-sp-embed] .cms-laptop__tab--create{
  animation: cms-tab-create 12s infinite;
}
[data-sp-embed] .cms-laptop__tab--analyze{
  animation: cms-tab-analyze 12s infinite;
}
[data-sp-embed] .cms-laptop__tab--manage{
  animation: cms-tab-manage 12s infinite;
}

@keyframes cms-tab-create {
  0%, 30% { opacity: 1; color: #fff; background: var(--create); }
  33%, 100% { opacity: 0.7; color: #94a3b8; background: #f1f5f9; }
}
@keyframes cms-tab-analyze {
  0%, 30% { opacity: 0.7; color: #94a3b8; background: #f1f5f9; }
  33%, 63% { opacity: 1; color: #fff; background: var(--analyze); }
  66%, 100% { opacity: 0.7; color: #94a3b8; background: #f1f5f9; }
}
@keyframes cms-tab-manage {
  0%, 63% { opacity: 0.7; color: #94a3b8; background: #f1f5f9; }
  66%, 96% { opacity: 1; color: #fff; background: var(--manage); }
  100% { opacity: 0.7; color: #94a3b8; background: #f1f5f9; }
}

[data-sp-embed] .cms-laptop__viewport{
  position: relative;
  height: calc(100% - 2rem);
  min-height: 13.5rem;
  background:
    radial-gradient(90% 80% at 15% 0%, rgba(255, 255, 255, 0.9), transparent 55%),
    linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
}

[data-sp-embed] .cms-laptop__slide{
  position: absolute;
  inset: 0;
  padding: 0.7rem 0.75rem 0.8rem;
  opacity: 0;
  transform: translateY(8px) scale(0.985);
  pointer-events: none;
}

[data-sp-embed] .cms-laptop__slide--create{
  animation: cms-slide-create 12s infinite;
}
[data-sp-embed] .cms-laptop__slide--analyze{
  animation: cms-slide-analyze 12s infinite;
}
[data-sp-embed] .cms-laptop__slide--manage{
  animation: cms-slide-manage 12s infinite;
}

@keyframes cms-slide-create {
  0%, 28% { opacity: 1; transform: translateY(0) scale(1); }
  33%, 100% { opacity: 0; transform: translateY(10px) scale(0.985); }
}
@keyframes cms-slide-analyze {
  0%, 30% { opacity: 0; transform: translateY(10px) scale(0.985); }
  33%, 61% { opacity: 1; transform: translateY(0) scale(1); }
  66%, 100% { opacity: 0; transform: translateY(10px) scale(0.985); }
}
@keyframes cms-slide-manage {
  0%, 63% { opacity: 0; transform: translateY(10px) scale(0.985); }
  66%, 94% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(10px) scale(0.985); }
}

[data-sp-embed] .cms-laptop__slide-head{
  margin-bottom: 0.55rem;
}

[data-sp-embed] .cms-laptop__eyebrow{
  margin: 0 0 0.18rem;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

[data-sp-embed] .cms-laptop__slide--create .cms-laptop__eyebrow{ color: var(--create); }
[data-sp-embed] .cms-laptop__slide--analyze .cms-laptop__eyebrow{ color: var(--analyze); }
[data-sp-embed] .cms-laptop__slide--manage .cms-laptop__eyebrow{ color: var(--manage); }

[data-sp-embed] .cms-laptop__slide-head h3{
  margin: 0;
  font-size: clamp(0.82rem, 1.5vw, 1rem);
  font-weight: 700;
  color: #111827;
  letter-spacing: 0.01em;
}

/* Create screen */
[data-sp-embed] .cms-create{
  position: relative;
  display: grid;
  gap: 0.42rem;
  padding: 0.65rem;
  border-radius: 0.7rem;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(219, 39, 119, 0.14);
  box-shadow: 0 10px 24px rgba(219, 39, 119, 0.08);
  overflow: hidden;
}

[data-sp-embed] .cms-create__field{
  display: grid;
  gap: 0.12rem;
  padding: 0.4rem 0.5rem;
  border-radius: 0.45rem;
  background: #f8fafc;
}

[data-sp-embed] .cms-create__field span{
  font-size: 0.55rem;
  font-weight: 600;
  color: #94a3b8;
}

[data-sp-embed] .cms-create__field strong, [data-sp-embed] .cms-create__typing{
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  color: #1f2937;
}

[data-sp-embed] .cms-create__typing{
  width: 0;
  white-space: nowrap;
  overflow: hidden;
  border-right: 2px solid var(--create);
  animation:
    cms-typing 12s infinite steps(22, end),
    cms-caret 0.8s step-end infinite;
}

@keyframes cms-typing {
  0%, 4% { width: 0; }
  18%, 28% { width: 100%; }
  33%, 100% { width: 100%; }
}

@keyframes cms-caret {
  50% { border-color: transparent; }
}

[data-sp-embed] .cms-create__btn{
  justify-self: end;
  margin-top: 0.15rem;
  border: 0;
  border-radius: 999px;
  padding: 0.38rem 0.75rem;
  font-size: 0.62rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #f472b6, var(--create));
  box-shadow: 0 8px 16px rgba(219, 39, 119, 0.22);
  animation: cms-btn-pulse 12s infinite;
}

@keyframes cms-btn-pulse {
  0%, 16% { transform: scale(1); }
  20%, 24% { transform: scale(1.05); }
  28%, 100% { transform: scale(1); }
}

[data-sp-embed] .cms-create__spark{
  position: absolute;
  top: -20%;
  left: -30%;
  width: 40%;
  height: 160%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-18deg) translateX(-120%);
  animation: cms-spark 12s infinite;
}

@keyframes cms-spark {
  0%, 10% { transform: skewX(-18deg) translateX(-120%); }
  22% { transform: skewX(-18deg) translateX(280%); }
  100% { transform: skewX(-18deg) translateX(280%); }
}

/* Analyze screen */
[data-sp-embed] .cms-analyze{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
}

[data-sp-embed] .cms-analyze__metric{
  padding: 0.55rem 0.6rem;
  border-radius: 0.65rem;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(126, 34, 206, 0.14);
  box-shadow: 0 8px 18px rgba(126, 34, 206, 0.07);
}

[data-sp-embed] .cms-analyze__metric span{
  display: block;
  font-size: 0.55rem;
  font-weight: 700;
  color: #a78bfa;
  letter-spacing: 0.06em;
}

[data-sp-embed] .cms-analyze__metric strong{
  display: block;
  margin-top: 0.15rem;
  font-size: 1.05rem;
  color: #3b0764;
}

[data-sp-embed] .cms-analyze__chart{
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-end;
  gap: 0.35rem;
  height: 5.2rem;
  padding: 0.55rem 0.6rem 0.45rem;
  border-radius: 0.65rem;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(126, 34, 206, 0.12);
}

[data-sp-embed] .cms-analyze__chart span{
  flex: 1;
  height: var(--h);
  border-radius: 0.35rem 0.35rem 0.2rem 0.2rem;
  background: linear-gradient(180deg, #d8b4fe 0%, var(--analyze) 100%);
  transform-origin: bottom;
  animation: cms-bar 12s infinite ease;
}

[data-sp-embed] .cms-analyze__chart span:nth-child(2){ animation-delay: 0.05s; }
[data-sp-embed] .cms-analyze__chart span:nth-child(3){ animation-delay: 0.1s; }
[data-sp-embed] .cms-analyze__chart span:nth-child(4){ animation-delay: 0.15s; }
[data-sp-embed] .cms-analyze__chart span:nth-child(5){ animation-delay: 0.2s; }
[data-sp-embed] .cms-analyze__chart span:nth-child(6){ animation-delay: 0.25s; }

@keyframes cms-bar {
  0%, 30% { transform: scaleY(0.15); opacity: 0.35; }
  38%, 63% { transform: scaleY(1); opacity: 1; }
  70%, 100% { transform: scaleY(0.15); opacity: 0.35; }
}

[data-sp-embed] .cms-analyze__note{
  grid-column: 1 / -1;
  margin: 0.05rem 0 0;
  font-size: 0.62rem;
  font-weight: 600;
  color: #6b7280;
}

/* Manage screen */
[data-sp-embed] .cms-manage{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
}

[data-sp-embed] .cms-manage__card{
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  gap: 0.4rem;
  align-items: center;
  padding: 0.4rem;
  border-radius: 0.55rem;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(21, 128, 61, 0.12);
  box-shadow: 0 8px 16px rgba(21, 128, 61, 0.06);
  animation: cms-card-in 12s infinite;
}

[data-sp-embed] .cms-manage__card:nth-child(2){ animation-delay: 0.08s; }
[data-sp-embed] .cms-manage__card:nth-child(3){ animation-delay: 0.16s; }
[data-sp-embed] .cms-manage__card:nth-child(4){ animation-delay: 0.24s; }

@keyframes cms-card-in {
  0%, 63% { opacity: 0; transform: translateY(8px); }
  70%, 94% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(8px); }
}

[data-sp-embed] .cms-manage__thumb{
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 0.4rem;
}

[data-sp-embed] .cms-manage__thumb--a{ background: linear-gradient(145deg, #fda4af, #fb7185); }
[data-sp-embed] .cms-manage__thumb--b{ background: linear-gradient(145deg, #c4b5fd, #a78bfa); }
[data-sp-embed] .cms-manage__thumb--c{ background: linear-gradient(145deg, #86efac, #4ade80); }
[data-sp-embed] .cms-manage__thumb--d{ background: linear-gradient(145deg, #93c5fd, #60a5fa); }

[data-sp-embed] .cms-manage__card strong{
  display: block;
  font-size: 0.58rem;
  color: #111827;
  letter-spacing: 0.02em;
}

[data-sp-embed] .cms-manage__card span{
  display: inline-block;
  margin-top: 0.15rem;
  padding: 0.08rem 0.28rem;
  border-radius: 999px;
  font-size: 0.48rem;
  font-weight: 700;
  color: #15803d;
  background: rgba(34, 197, 94, 0.12);
}

[data-sp-embed] .cms-laptop__hinge{
  height: 0.35rem;
  margin: 0 4%;
  border-radius: 0 0 0.2rem 0.2rem;
  background: linear-gradient(180deg, #9aa3b2, #7b8494);
}

[data-sp-embed] .cms-laptop__base{
  position: relative;
  height: 0.85rem;
  margin-top: -1px;
  border-radius: 0 0 0.85rem 0.85rem;
  background: linear-gradient(180deg, #e8eaef 0%, #c7ccd6 55%, #aeb5c1 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 16px 28px rgba(15, 23, 42, 0.12);
}

[data-sp-embed] .cms-laptop__notch{
  position: absolute;
  top: 0.18rem;
  left: 50%;
  width: min(28%, 7.5rem);
  height: 0.28rem;
  border-radius: 999px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #98a0ad, #7f8796);
}

@media (max-width: 760px) {
  [data-sp-embed] #nocode-platform .cms-pitch__visual-stage--laptop{
    max-width: min(100%, 28rem) !important;
    margin-inline: auto !important;
  }

  /* Keep Create/Analyze/Manage animation fully inside the laptop screen */
  [data-sp-embed] .cms-laptop__lid{
    padding: 0.55rem 0.55rem 0.42rem;
  }

  [data-sp-embed] .cms-laptop__bezel{
    padding: 0.55rem 0.4rem 0.36rem;
  }

  [data-sp-embed] .cms-laptop__screen{
    aspect-ratio: 16 / 11;
  }

  [data-sp-embed] .cms-laptop__chrome{
    padding: 0.3rem 0.4rem;
    gap: 0.35rem;
  }

  [data-sp-embed] .cms-laptop__brand{
    font-size: 0.6rem;
  }

  [data-sp-embed] .cms-laptop__logo{
    width: 0.62rem;
    height: 0.62rem;
  }

  [data-sp-embed] .cms-laptop__tab{
    padding: 0.14rem 0.34rem;
    font-size: 0.52rem;
  }

  [data-sp-embed] .cms-laptop__viewport{
    height: calc(100% - 1.55rem);
    min-height: 0;
  }

  [data-sp-embed] .cms-laptop__slide{
    padding: 0.42rem 0.48rem 0.38rem;
    display: flex;
    flex-direction: column;
  }

  [data-sp-embed] .cms-laptop__slide-head{
    margin-bottom: 0.32rem;
    flex-shrink: 0;
  }

  [data-sp-embed] .cms-laptop__eyebrow{
    margin-bottom: 0.1rem;
    font-size: 0.52rem;
  }

  [data-sp-embed] .cms-laptop__slide-head h3{
    font-size: 0.76rem;
  }

  [data-sp-embed] .cms-create{
    gap: 0.28rem;
    padding: 0.42rem;
    flex: 1;
    min-height: 0;
  }

  [data-sp-embed] .cms-create__field{
    padding: 0.28rem 0.38rem;
  }

  [data-sp-embed] .cms-create__field span{
    font-size: 0.48rem;
  }

  [data-sp-embed] .cms-create__field strong, [data-sp-embed] .cms-create__typing{
    font-size: 0.62rem;
  }

  [data-sp-embed] .cms-create__btn{
    margin-top: 0.05rem;
    padding: 0.28rem 0.58rem;
    font-size: 0.55rem;
  }

  [data-sp-embed] .cms-analyze{
    gap: 0.3rem;
    flex: 1;
    min-height: 0;
    align-content: start;
  }

  [data-sp-embed] .cms-analyze__metric{
    padding: 0.38rem 0.42rem;
  }

  [data-sp-embed] .cms-analyze__metric span{
    font-size: 0.48rem;
  }

  [data-sp-embed] .cms-analyze__metric strong{
    margin-top: 0.08rem;
    font-size: 0.88rem;
  }

  [data-sp-embed] .cms-analyze__chart{
    height: 3.35rem;
    gap: 0.28rem;
    padding: 0.38rem 0.42rem 0.32rem;
  }

  [data-sp-embed] .cms-analyze__note{
    margin-top: 0;
    font-size: 0.55rem;
  }

  [data-sp-embed] .cms-manage{
    gap: 0.26rem;
    flex: 1;
    min-height: 0;
    align-content: start;
  }

  [data-sp-embed] .cms-manage__card{
    grid-template-columns: 1.55rem 1fr;
    gap: 0.28rem;
    padding: 0.26rem;
  }

  [data-sp-embed] .cms-manage__thumb{
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 0.32rem;
  }

  [data-sp-embed] .cms-manage__card strong{
    font-size: 0.48rem;
    line-height: 1.2;
  }

  [data-sp-embed] .cms-manage__card span{
    margin-top: 0.08rem;
    padding: 0.05rem 0.22rem;
    font-size: 0.42rem;
  }
}

@media (max-width: 420px) {
  [data-sp-embed] .cms-laptop__screen{
    aspect-ratio: 16 / 11.4;
  }

  [data-sp-embed] .cms-laptop__slide{
    padding: 0.36rem 0.4rem 0.32rem;
  }

  [data-sp-embed] .cms-manage__card{
    grid-template-columns: 1.4rem 1fr;
    gap: 0.22rem;
    padding: 0.22rem;
  }

  [data-sp-embed] .cms-manage__thumb{
    width: 1.4rem;
    height: 1.4rem;
  }

  [data-sp-embed] .cms-analyze__chart{
    height: 3rem;
  }
}

/* ===== CMS hero: scatter to 4 corners + slow orbit (2026-08-10) ===== */
[data-sp-embed] .hero--cms-story{
  --cms-hero-float-side: clamp(-0.35rem, 0.4vw, 0.85rem);
  --cms-hero-float-top: clamp(4.4rem, 7.5vh, 6.5rem);
  --cms-hero-float-bottom: clamp(0.65rem, 2.8vh, 2.25rem);
  --cms-hero-float-w-lg: clamp(148px, 13.5vw, 236px);
  --cms-hero-float-w-sm: clamp(136px, 12.5vw, 216px);
  --cms-orbit-r: 14px;
  min-height: min(100svh, 980px);
  overflow: hidden;
}

[data-sp-embed] .hero--cms-story .hero-center{
  z-index: 5;
  width: min(28rem, 42vw) !important;
  max-width: min(28rem, 42vw) !important;
  margin-top: clamp(0.35rem, 1.8vh, 1.5rem) !important;
  padding-inline: 0.75rem !important;
}

[data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
  width: auto !important;
  max-width: 100% !important;
  font-size: clamp(2rem, 1.1rem + 2.2vw, 3.35rem) !important;
  line-height: 1.22 !important;
  gap: 0.28em !important;
}

[data-sp-embed] .hero--cms-story .hero-title-float, [data-sp-embed] .hero--cms-story .hero-title-float + .hero-title-float{
  white-space: nowrap;
}

[data-sp-embed] .hero--cms-story .hero-center .hero-actions{
  margin-top: clamp(1.5rem, 2.8vw, 2.35rem) !important;
}

/* TL / TR / BL / BR — further into corners so center copy breathes */
[data-sp-embed] .hero--cms-story .hero-float--ig{
  top: var(--cms-hero-float-top) !important;
  left: var(--cms-hero-float-side) !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--cms-hero-float-w-lg) !important;
  --cms-orbit-r: 16px;
}

[data-sp-embed] .hero--cms-story .hero-float--line{
  top: calc(var(--cms-hero-float-top) + 0.65rem) !important;
  right: var(--cms-hero-float-side) !important;
  left: auto !important;
  bottom: auto !important;
  width: var(--cms-hero-float-w-sm) !important;
  --cms-orbit-r: 13px;
}

[data-sp-embed] .hero--cms-story .hero-float--fb{
  bottom: var(--cms-hero-float-bottom) !important;
  left: calc(var(--cms-hero-float-side) + 0.35rem) !important;
  right: auto !important;
  top: auto !important;
  width: var(--cms-hero-float-w-sm) !important;
  --cms-orbit-r: 15px;
}

[data-sp-embed] .hero--cms-story .hero-float--campaign{
  bottom: calc(var(--cms-hero-float-bottom) + 0.35rem) !important;
  right: calc(var(--cms-hero-float-side) + 0.2rem) !important;
  left: auto !important;
  top: auto !important;
  width: var(--cms-hero-float-w-lg) !important;
  --cms-orbit-r: 12px;
}

/* translate-based circle so tilt transform stays independent */
@keyframes cms-float-orbit {
  0% {
    translate: 0 calc(var(--cms-orbit-r, 14px) * -1);
  }
  12.5% {
    translate:
      calc(var(--cms-orbit-r, 14px) * 0.707)
      calc(var(--cms-orbit-r, 14px) * -0.707);
  }
  25% {
    translate: var(--cms-orbit-r, 14px) 0;
  }
  37.5% {
    translate:
      calc(var(--cms-orbit-r, 14px) * 0.707)
      calc(var(--cms-orbit-r, 14px) * 0.707);
  }
  50% {
    translate: 0 var(--cms-orbit-r, 14px);
  }
  62.5% {
    translate:
      calc(var(--cms-orbit-r, 14px) * -0.707)
      calc(var(--cms-orbit-r, 14px) * 0.707);
  }
  75% {
    translate: calc(var(--cms-orbit-r, 14px) * -1) 0;
  }
  87.5% {
    translate:
      calc(var(--cms-orbit-r, 14px) * -0.707)
      calc(var(--cms-orbit-r, 14px) * -0.707);
  }
  100% {
    translate: 0 calc(var(--cms-orbit-r, 14px) * -1);
  }
}

[data-sp-embed].js .hero--cms-story .hero-float.is-animating{
  animation:
    cms-float-enter 0.9s cubic-bezier(0.16, 1, 0.3, 1) var(--float-in-delay, 0ms) both,
    cms-float-orbit 15s linear calc(var(--float-in-delay, 0ms) + 900ms) infinite !important;
}

[data-sp-embed].js .hero--cms-story .hero-float--ig.is-animating{
  animation:
    cms-float-enter 0.9s cubic-bezier(0.16, 1, 0.3, 1) var(--float-in-delay, 0ms) both,
    cms-float-orbit 14s linear calc(var(--float-in-delay, 0ms) + 900ms) infinite !important;
}

[data-sp-embed].js .hero--cms-story .hero-float--line.is-animating{
  animation:
    cms-float-enter 0.9s cubic-bezier(0.16, 1, 0.3, 1) var(--float-in-delay, 0ms) both,
    cms-float-orbit 16.5s linear calc(var(--float-in-delay, 0ms) + 900ms - 3.2s) infinite reverse !important;
}

[data-sp-embed].js .hero--cms-story .hero-float--fb.is-animating{
  animation:
    cms-float-enter 0.9s cubic-bezier(0.16, 1, 0.3, 1) var(--float-in-delay, 0ms) both,
    cms-float-orbit 17.5s linear calc(var(--float-in-delay, 0ms) + 900ms - 6.5s) infinite !important;
}

[data-sp-embed].js .hero--cms-story .hero-float--campaign.is-animating{
  animation:
    cms-float-enter 0.9s cubic-bezier(0.16, 1, 0.3, 1) var(--float-in-delay, 0ms) both,
    cms-float-orbit 15.2s linear calc(var(--float-in-delay, 0ms) + 900ms - 9s) infinite reverse !important;
}

@media (min-width: 1400px) {
  [data-sp-embed] .hero--cms-story{
    --cms-hero-float-side: clamp(0.15rem, 1.6vw, 1.75rem);
    --cms-hero-float-w-lg: clamp(200px, 13.5vw, 275px);
    --cms-hero-float-w-sm: clamp(182px, 12.2vw, 248px);
  }

  [data-sp-embed] .hero--cms-story .hero-center{
    width: min(30rem, 34vw) !important;
    max-width: min(30rem, 34vw) !important;
  }
}

@media (max-width: 1100px) {
  [data-sp-embed] .hero--cms-story{
    --cms-hero-float-side: clamp(-0.45rem, 0.2vw, 0.25rem);
    --cms-hero-float-w-lg: clamp(118px, 14.5vw, 160px);
    --cms-hero-float-w-sm: clamp(108px, 13.5vw, 148px);
    --cms-orbit-r: 10px;
  }

  [data-sp-embed] .hero--cms-story .hero-center{
    width: min(18.5rem, 40vw) !important;
    max-width: min(18.5rem, 40vw) !important;
  }

  [data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
    font-size: clamp(1.6rem, 0.95rem + 1.9vw, 2.35rem) !important;
  }
}

@media (max-width: 860px) {
  [data-sp-embed] .hero--cms-story{
    --cms-hero-float-top: 4.1rem;
    --cms-hero-float-bottom: 0.15rem;
    --cms-hero-float-side: -0.45rem;
    --cms-hero-float-w-lg: clamp(96px, 27vw, 128px);
    --cms-hero-float-w-sm: clamp(90px, 25vw, 120px);
    --cms-orbit-r: 8px;
    min-height: auto;
    overflow-x: clip;
  }

  [data-sp-embed] .hero--cms-story .hero-center{
    width: min(17rem, 66vw) !important;
    max-width: min(17rem, 66vw) !important;
    margin-top: clamp(0.75rem, 2.5vh, 1.5rem) !important;
  }

  [data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
    font-size: clamp(1.65rem, 6.2vw, 2.1rem) !important;
  }

  [data-sp-embed] .hero--cms-story .hero-floats{
    opacity: 0.88;
  }
}

/* Create band: match management/analysis showcase card polish */
[data-sp-embed] .band-marketing .section-label{
  color: #be185d;
}

[data-sp-embed] .band-marketing .ai-insight-card__media-label-dot{
  background: #ec4899;
}


/* ===== AI scene: modal + fanned cards with pop-out ===== */
[data-sp-embed] #ai-platform .cms-pitch__visual-stage--ai-scene{
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  overflow: visible !important;
}

[data-sp-embed] #ai-platform .cms-pitch__visual-stage--ai-scene img{
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  transform: none !important;
  object-fit: cover !important;
}

[data-sp-embed] #ai-platform .cms-pitch__visual{
  overflow: visible !important;
}

[data-sp-embed] .cms-ai-scene{
  --ai-accent: #7c3aed;
  --ai-glow: rgba(244, 63, 94, 0.42);
  position: relative;
  width: 100%;
  aspect-ratio: 11 / 9;
  min-height: 22rem;
  max-height: 36rem;
  display: grid;
  place-items: center;
  isolation: isolate;
}

[data-sp-embed] .cms-ai-scene__cards{
  position: absolute;
  inset: 0% 2% 22%;
  z-index: 1;
  pointer-events: none;
}

[data-sp-embed] .cms-ai-card{
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(42%, 13.5rem);
  padding: 0.55rem 0.55rem 0.7rem;
  border-radius: 0.85rem;
  background: #fff;
  box-shadow:
    0 18px 40px rgba(15, 23, 42, 0.14),
    0 2px 0 rgba(255, 255, 255, 0.8) inset;
  transform: translate(var(--pop-x), var(--pop-y)) rotate(var(--pop-rotate)) scale(1);
  transform-origin: center bottom;
  will-change: transform, opacity;
}

[data-sp-embed] .cms-ai-card__media{
  overflow: hidden;
  border-radius: 0.62rem;
  aspect-ratio: 4 / 3;
  background: #f3f4f6;
}

[data-sp-embed] .cms-ai-card__media img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

[data-sp-embed] .cms-ai-card__body{
  margin-top: 0.55rem;
  padding-inline: 0.15rem;
}

[data-sp-embed] .cms-ai-card__body h3{
  margin: 0;
  font-size: clamp(0.62rem, 0.5rem + 0.35vw, 0.78rem);
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.25;
  color: #111827;
}

[data-sp-embed] .cms-ai-card__status{
  display: inline-block;
  margin-top: 0.28rem;
  padding: 0.1rem 0.38rem;
  border-radius: 999px;
  font-size: 0.55rem;
  font-weight: 700;
  color: #15803d;
  background: rgba(34, 197, 94, 0.12);
}

[data-sp-embed] .cms-ai-card__body p{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0.35rem 0 0;
  font-size: 0.55rem;
  line-height: 1.45;
  color: #6b7280;
}

[data-sp-embed] .cms-ai-card--left{
  z-index: 2;
  --pop-rotate: -14deg;
  --pop-x: -58%;
  --pop-y: -70%;
  --pop-delay: 80ms;
}

[data-sp-embed] .cms-ai-card--center{
  z-index: 3;
  --pop-rotate: 0deg;
  --pop-x: -50%;
  --pop-y: -80%;
  --pop-delay: 0ms;
}

[data-sp-embed] .cms-ai-card--right{
  z-index: 2;
  --pop-rotate: 14deg;
  --pop-x: -42%;
  --pop-y: -70%;
  --pop-delay: 160ms;
}

[data-sp-embed] .cms-ai-modal{
  position: relative;
  z-index: 5;
  width: min(78%, 21.5rem);
  margin-top: 2%;
  padding: 0.95rem 1rem 0.9rem;
  border-radius: 0.95rem;
  background: #fff;
  box-shadow:
    0 0 0 1px rgba(244, 63, 94, 0.12),
    0 0 0 6px rgba(244, 63, 94, 0.08),
    0 22px 50px var(--ai-glow),
    0 10px 24px rgba(15, 23, 42, 0.12);
}

[data-sp-embed] .cms-ai-modal__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

[data-sp-embed] .cms-ai-modal__head h3{
  margin: 0;
  font-size: clamp(0.82rem, 0.7rem + 0.4vw, 0.98rem);
  font-weight: 700;
  color: var(--ai-accent);
}

[data-sp-embed] .cms-ai-modal__close{
  width: 1.35rem;
  height: 1.35rem;
  display: grid;
  place-items: center;
  border-radius: 0.35rem;
  color: #9ca3af;
  font-size: 1.05rem;
  line-height: 1;
  background: #f3f4f6;
}

[data-sp-embed] .cms-ai-modal__body{
  display: grid;
  gap: 0.55rem;
}

[data-sp-embed] .cms-ai-modal__field{
  display: grid;
  gap: 0.22rem;
}

[data-sp-embed] .cms-ai-modal__field span{
  font-size: 0.62rem;
  font-weight: 600;
  color: #6b7280;
}

[data-sp-embed] .cms-ai-modal__field strong, [data-sp-embed] .cms-ai-modal__field p{
  margin: 0;
  padding: 0.45rem 0.55rem;
  border-radius: 0.45rem;
  border: 1px solid #e5e7eb;
  background: #fafafa;
  font-size: 0.7rem;
  font-weight: 600;
  color: #111827;
  line-height: 1.45;
}

[data-sp-embed] .cms-ai-modal__url{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500 !important;
  color: #374151 !important;
}

[data-sp-embed] .cms-ai-modal__field--area p{
  min-height: 3.4rem;
  font-weight: 500;
  color: #374151;
}

[data-sp-embed] .cms-ai-modal__ai-link{
  justify-self: start;
  margin: -0.1rem 0 0.1rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ai-accent);
  font-size: 0.66rem;
  font-weight: 700;
  cursor: default;
}

[data-sp-embed] .cms-ai-modal__field--count{
  width: 4.5rem;
}

[data-sp-embed] .cms-ai-modal__field--count strong{
  text-align: center;
}

[data-sp-embed] .cms-ai-modal__foot{
  display: flex;
  justify-content: flex-end;
  gap: 0.45rem;
  margin-top: 0.85rem;
}

[data-sp-embed] .cms-ai-modal__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  padding: 0.4rem 0.75rem;
  border-radius: 0.45rem;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
}

[data-sp-embed] .cms-ai-modal__btn--ghost{
  color: #4b5563;
  background: #fff;
  border: 1px solid #e5e7eb;
}

[data-sp-embed] .cms-ai-modal__btn--primary{
  color: #fff;
  background: linear-gradient(180deg, #8b5cf6 0%, #7c3aed 100%);
  box-shadow: 0 8px 18px rgba(124, 58, 237, 0.28);
}

/* Snappy pop-out for generated cards */
[data-sp-embed].js #create .create-hero__visual:not(.visible) .cms-ai-card, [data-sp-embed].js #create .create-hero__visual:not(.visible) .cms-ai-card{
  opacity: 0;
  transform:
    translate(var(--pop-x), calc(var(--pop-y) + 18%))
    rotate(var(--pop-rotate))
    scale(0.55);
  animation: none;
}

[data-sp-embed].js #create .create-hero__visual.visible .cms-ai-card, [data-sp-embed].js #create .create-hero__visual.visible .cms-ai-card{
  animation: cms-ai-card-pop 0.52s cubic-bezier(0.16, 1.2, 0.3, 1) var(--pop-delay, 0ms) both;
}

[data-sp-embed]:not(.js) #create .cms-ai-card{
  opacity: 1;
  transform:
    translate(var(--pop-x), var(--pop-y))
    rotate(var(--pop-rotate))
    scale(1);
}

[data-sp-embed].js #create .create-hero__visual:not(.visible) .cms-ai-modal, [data-sp-embed].js #create .create-hero__visual:not(.visible) .cms-ai-modal{
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  animation: none;
}

[data-sp-embed].js #create .create-hero__visual.visible .cms-ai-modal, [data-sp-embed].js #create .create-hero__visual.visible .cms-ai-modal{
  animation: cms-ai-modal-in 0.42s cubic-bezier(0.16, 1, 0.3, 1) 40ms both;
}

[data-sp-embed]:not(.js) #create .cms-ai-modal{
  opacity: 1;
  transform: none;
}

@keyframes cms-ai-card-pop {
  0% {
    opacity: 0;
    transform:
      translate(calc(var(--pop-x)), calc(var(--pop-y) + 22%))
      rotate(calc(var(--pop-rotate) * 0.35))
      scale(0.42);
  }
  72% {
    opacity: 1;
    transform:
      translate(var(--pop-x), calc(var(--pop-y) - 2%))
      rotate(var(--pop-rotate))
      scale(1.06);
  }
  100% {
    opacity: 1;
    transform:
      translate(var(--pop-x), var(--pop-y))
      rotate(var(--pop-rotate))
      scale(1);
  }
}

@keyframes cms-ai-modal-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 760px) {
  [data-sp-embed] .cms-ai-scene{
    aspect-ratio: 10 / 11;
    min-height: 26rem;
    max-height: none;
  }

  [data-sp-embed] .cms-ai-card{
    width: min(46%, 10.5rem);
    padding: 0.42rem 0.42rem 0.55rem;
  }

  [data-sp-embed] .cms-ai-card--left{
    --pop-x: -62%;
    --pop-y: -58%;
  }

  [data-sp-embed] .cms-ai-card--center{
    --pop-y: -68%;
  }

  [data-sp-embed] .cms-ai-card--right{
    --pop-x: -38%;
    --pop-y: -58%;
  }

  [data-sp-embed] .cms-ai-modal{
    width: min(88%, 20rem);
    margin-top: 18%;
  }

  [data-sp-embed] .cms-ai-card__body p{
    display: none;
  }
}

/* ===== CMS hero: restore 4 corner floats in side gutters ===== */
[data-sp-embed] .hero--cms-story{
  --cms-hero-float-top: clamp(5rem, 8.5vh, 7.25rem);
  --cms-hero-float-bottom: clamp(1.5rem, 4vh, 3.25rem);
  --cms-hero-float-side: clamp(0.85rem, 3.5vw, 3.25rem);
  --cms-hero-float-w-lg: clamp(168px, 18vw, 300px);
  --cms-hero-float-w-sm: clamp(155px, 16.5vw, 275px);
  --cms-orbit-r: 8px;
  min-height: min(100svh, 980px) !important;
  overflow: hidden !important;
  justify-content: center !important;
}

[data-sp-embed] .hero--cms-story .hero-floats{
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  z-index: 1 !important;
  overflow: visible !important;
  pointer-events: none !important;
}

/* Title corridor — keep clear of floats */
[data-sp-embed] .hero--cms-story .hero-center{
  z-index: 5 !important;
  width: min(22rem, 34vw) !important;
  max-width: min(22rem, 34vw) !important;
  margin-top: clamp(0.25rem, 1.2vh, 1rem) !important;
  padding-inline: 0.75rem !important;
}

[data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
  width: auto !important;
  max-width: 100% !important;
  font-size: clamp(1.9rem, 1.05rem + 2.1vw, 3.15rem) !important;
  line-height: 1.22 !important;
  gap: 0.28em !important;
}

[data-sp-embed] .hero--cms-story .hero-title-float, [data-sp-embed] .hero--cms-story .hero-title-float + .hero-title-float{
  white-space: nowrap !important;
}

[data-sp-embed] .hero--cms-story .hero-center .hero-actions{
  margin-top: clamp(1.35rem, 2.4vw, 2rem) !important;
}

/* Visible after decode — keep hidden until .is-media-ready */
[data-sp-embed] .hero--cms-story .hero-float.is-media-ready, [data-sp-embed].js .hero--cms-story .hero-float.is-ready.is-media-ready{
  visibility: visible;
}

[data-sp-embed].js .hero--cms-story .hero-float.is-ready:not(.is-animating){
  transform: rotate(var(--hero-float-tilt, 0deg));
}

/* Four corners in the side/edge gutters */
[data-sp-embed] .hero--cms-story .hero-float--ig{
  top: var(--cms-hero-float-top) !important;
  left: var(--cms-hero-float-side) !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--cms-hero-float-w-lg) !important;
  max-width: min(32vw, 300px) !important;
  --cms-orbit-r: 9px;
  --hero-float-tilt: -3.5deg;
}

[data-sp-embed] .hero--cms-story .hero-float--line{
  top: calc(var(--cms-hero-float-top) + 0.35rem) !important;
  right: var(--cms-hero-float-side) !important;
  left: auto !important;
  bottom: auto !important;
  width: var(--cms-hero-float-w-sm) !important;
  max-width: min(30vw, 275px) !important;
  --cms-orbit-r: 7px;
  --hero-float-tilt: 3deg;
}

[data-sp-embed] .hero--cms-story .hero-float--fb{
  bottom: var(--cms-hero-float-bottom) !important;
  left: var(--cms-hero-float-side) !important;
  right: auto !important;
  top: auto !important;
  width: var(--cms-hero-float-w-sm) !important;
  max-width: min(30vw, 275px) !important;
  --cms-orbit-r: 8px;
  --hero-float-tilt: 2deg;
}

[data-sp-embed] .hero--cms-story .hero-float--campaign{
  bottom: calc(var(--cms-hero-float-bottom) + 0.1rem) !important;
  right: var(--cms-hero-float-side) !important;
  left: auto !important;
  top: auto !important;
  width: var(--cms-hero-float-w-lg) !important;
  max-width: min(32vw, 300px) !important;
  --cms-orbit-r: 7px;
  --hero-float-tilt: -2.5deg;
}

[data-sp-embed] .hero--cms-story .hero-float img{
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

/* Pop-in then soft drift after media is ready */
[data-sp-embed].js .hero--cms-story .hero-float.is-animating{
  animation:
    cms-float-pop 0.7s cubic-bezier(0.16, 1.15, 0.3, 1) var(--float-in-delay, 0ms) both,
    cms-float-orbit 16s linear calc(var(--float-in-delay, 0ms) + 700ms) infinite !important;
}

[data-sp-embed].js .hero--cms-story .hero-float--ig.is-animating{
  animation:
    cms-float-pop 0.7s cubic-bezier(0.16, 1.15, 0.3, 1) var(--float-in-delay, 0ms) both,
    cms-float-orbit 15s linear calc(var(--float-in-delay, 0ms) + 700ms) infinite !important;
}

[data-sp-embed].js .hero--cms-story .hero-float--line.is-animating{
  animation:
    cms-float-pop 0.7s cubic-bezier(0.16, 1.15, 0.3, 1) var(--float-in-delay, 0ms) both,
    cms-float-orbit 17s linear calc(var(--float-in-delay, 0ms) + 700ms - 3s) infinite reverse !important;
}

[data-sp-embed].js .hero--cms-story .hero-float--fb.is-animating{
  animation:
    cms-float-pop 0.7s cubic-bezier(0.16, 1.15, 0.3, 1) var(--float-in-delay, 0ms) both,
    cms-float-orbit 18s linear calc(var(--float-in-delay, 0ms) + 700ms - 6s) infinite !important;
}

[data-sp-embed].js .hero--cms-story .hero-float--campaign.is-animating{
  animation:
    cms-float-pop 0.7s cubic-bezier(0.16, 1.15, 0.3, 1) var(--float-in-delay, 0ms) both,
    cms-float-orbit 16s linear calc(var(--float-in-delay, 0ms) + 700ms - 9s) infinite reverse !important;
}

@keyframes cms-float-pop {
  0% {
    opacity: 0;
    transform: rotate(var(--hero-float-tilt, 0deg)) translateY(22px) scale(0.78);
  }
  70% {
    opacity: 1;
    transform: rotate(var(--hero-float-tilt, 0deg)) translateY(-4px) scale(1.05);
  }
  100% {
    opacity: 1;
    transform: rotate(var(--hero-float-tilt, 0deg)) translateY(0) scale(1);
  }
}

@media (min-width: 1400px) {
  [data-sp-embed] .hero--cms-story{
    --cms-hero-float-side: clamp(1.75rem, 5vw, 5rem);
    --cms-hero-float-w-lg: clamp(220px, 17vw, 340px);
    --cms-hero-float-w-sm: clamp(200px, 15.5vw, 310px);
  }

  [data-sp-embed] .hero--cms-story .hero-center{
    width: min(24rem, 30vw) !important;
    max-width: min(24rem, 30vw) !important;
  }
}

@media (max-width: 1100px) {
  [data-sp-embed] .hero--cms-story{
    --cms-hero-float-side: clamp(0.45rem, 2vw, 1.25rem);
    --cms-hero-float-w-lg: clamp(130px, 20vw, 200px);
    --cms-hero-float-w-sm: clamp(118px, 18vw, 180px);
    --cms-orbit-r: 6px;
  }

  [data-sp-embed] .hero--cms-story .hero-center{
    width: min(16.5rem, 38vw) !important;
    max-width: min(16.5rem, 38vw) !important;
  }

  [data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
    font-size: clamp(1.5rem, 0.95rem + 1.6vw, 2.2rem) !important;
  }
}

@media (max-width: 860px) {
  [data-sp-embed] .hero--cms-story{
    --cms-hero-float-top: 4.35rem;
    --cms-hero-float-bottom: 0.65rem;
    --cms-hero-float-side: 0.15rem;
    --cms-hero-float-w-lg: clamp(104px, 30vw, 142px);
    --cms-hero-float-w-sm: clamp(96px, 28vw, 132px);
    --cms-orbit-r: 4px;
    min-height: auto !important;
  }

  [data-sp-embed] .hero--cms-story .hero-center{
    width: min(15.5rem, 62vw) !important;
    max-width: min(15.5rem, 62vw) !important;
    margin-top: clamp(0.6rem, 2vh, 1.25rem) !important;
  }

  [data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
    font-size: clamp(1.55rem, 5.8vw, 2rem) !important;
  }
}

/* ===== CMS hero floats: fade in after media ready ===== */
[data-sp-embed] .hero--cms-story .hero-floats{
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  z-index: 1 !important;
  overflow: visible !important;
  pointer-events: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

[data-sp-embed].js .hero--cms-story .hero-float:not(.is-media-ready), [data-sp-embed].js .hero--cms-story .hero-float.is-ready{
  opacity: 1 !important;
  visibility: visible !important;
}

[data-sp-embed].js .hero--cms-story .hero-float.is-media-ready{
  visibility: visible !important;
}

[data-sp-embed] .hero--cms-story .hero-float img{
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

/* Pop after decode, then orbit */
[data-sp-embed].js .hero--cms-story .hero-float.is-media-ready.is-animating{
  animation:
    cms-float-pop 0.7s cubic-bezier(0.16, 1.15, 0.3, 1) both,
    cms-float-orbit 15s linear 0.7s infinite !important;
}

[data-sp-embed].js .hero--cms-story .hero-float--ig.is-media-ready.is-animating{
  animation:
    cms-float-pop 0.7s cubic-bezier(0.16, 1.15, 0.3, 1) both,
    cms-float-orbit 14s linear 0.7s infinite !important;
}

[data-sp-embed].js .hero--cms-story .hero-float--line.is-media-ready.is-animating{
  animation:
    cms-float-pop 0.7s cubic-bezier(0.16, 1.15, 0.3, 1) both,
    cms-float-orbit 16.5s linear -2.5s infinite reverse !important;
}

[data-sp-embed].js .hero--cms-story .hero-float--fb.is-media-ready.is-animating{
  animation:
    cms-float-pop 0.7s cubic-bezier(0.16, 1.15, 0.3, 1) both,
    cms-float-orbit 17.5s linear -5.8s infinite !important;
}

[data-sp-embed].js .hero--cms-story .hero-float--campaign.is-media-ready.is-animating{
  animation:
    cms-float-pop 0.7s cubic-bezier(0.16, 1.15, 0.3, 1) both,
    cms-float-orbit 15.2s linear -8.3s infinite reverse !important;
}

/* ===== CMS hero floats: larger + closer to center ===== */
[data-sp-embed] .hero--cms-story{
  --cms-hero-float-top: clamp(4.25rem, 6.5vh, 6rem);
  --cms-hero-float-bottom: clamp(0.85rem, 2.8vh, 2.25rem);
  --cms-hero-float-side: clamp(3.5rem, 7.5vw, 9.5rem);
  --cms-hero-float-w-lg: clamp(230px, 27vw, 420px);
  --cms-hero-float-w-sm: clamp(210px, 24.5vw, 385px);
  --cms-orbit-r: 10px;
}

[data-sp-embed] .hero--cms-story .hero-center{
  width: min(20rem, 32vw) !important;
  max-width: min(20rem, 32vw) !important;
}

[data-sp-embed] .hero--cms-story .hero-float--ig, [data-sp-embed] .hero--cms-story .hero-float--line, [data-sp-embed] .hero--cms-story .hero-float--fb, [data-sp-embed] .hero--cms-story .hero-float--campaign{
  max-width: none !important;
}

[data-sp-embed] .hero--cms-story .hero-float--ig{
  width: var(--cms-hero-float-w-lg) !important;
  top: var(--cms-hero-float-top) !important;
  left: var(--cms-hero-float-side) !important;
}

[data-sp-embed] .hero--cms-story .hero-float--line{
  width: var(--cms-hero-float-w-sm) !important;
  top: calc(var(--cms-hero-float-top) + 0.45rem) !important;
  right: var(--cms-hero-float-side) !important;
}

[data-sp-embed] .hero--cms-story .hero-float--fb{
  width: var(--cms-hero-float-w-sm) !important;
  bottom: var(--cms-hero-float-bottom) !important;
  left: calc(var(--cms-hero-float-side) + 0.35rem) !important;
}

[data-sp-embed] .hero--cms-story .hero-float--campaign{
  width: var(--cms-hero-float-w-lg) !important;
  bottom: calc(var(--cms-hero-float-bottom) + 0.2rem) !important;
  right: calc(var(--cms-hero-float-side) + 0.15rem) !important;
}

@media (min-width: 1400px) {
  [data-sp-embed] .hero--cms-story{
    --cms-hero-float-side: clamp(5rem, 9vw, 12rem);
    --cms-hero-float-w-lg: clamp(300px, 26vw, 460px);
    --cms-hero-float-w-sm: clamp(275px, 23.5vw, 420px);
  }

  [data-sp-embed] .hero--cms-story .hero-center{
    width: min(22rem, 28vw) !important;
    max-width: min(22rem, 28vw) !important;
  }
}

@media (max-width: 1100px) {
  [data-sp-embed] .hero--cms-story{
    --cms-hero-float-side: clamp(1.25rem, 3.5vw, 3rem);
    --cms-hero-float-w-lg: clamp(160px, 26vw, 250px);
    --cms-hero-float-w-sm: clamp(148px, 24vw, 230px);
  }

  [data-sp-embed] .hero--cms-story .hero-center{
    width: min(15.5rem, 36vw) !important;
    max-width: min(15.5rem, 36vw) !important;
  }
}

@media (max-width: 860px) {
  [data-sp-embed] .hero--cms-story{
    --cms-hero-float-top: 4.1rem;
    --cms-hero-float-bottom: 0.35rem;
    --cms-hero-float-side: 0.05rem;
    --cms-hero-float-w-lg: clamp(118px, 34vw, 158px);
    --cms-hero-float-w-sm: clamp(110px, 32vw, 148px);
  }

  [data-sp-embed] .hero--cms-story .hero-center{
    width: min(14.5rem, 58vw) !important;
    max-width: min(14.5rem, 58vw) !important;
  }
}

/* ===== Create demo: editor + channel preview ===== */
[data-sp-embed] #create .create-demo{
  width: min(100%, 72rem);
  margin: clamp(1.5rem, 3vw, 2.5rem) auto 0;
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

[data-sp-embed] #create .create-demo__window{
  --create-accent: #db2777;
  --create-line: #06c755;
  --create-ig: #e1306c;
  --create-fb: #1877f2;
  border-radius: 1.15rem;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow:
    0 28px 60px rgba(15, 23, 42, 0.1),
    0 2px 0 rgba(255, 255, 255, 0.9) inset;
  overflow: hidden;
  transform-origin: center top;
}

[data-sp-embed].js #create .reveal-media:not(.visible) .create-demo__window{
  opacity: 0;
  transform: translateY(1.25rem) scale(0.975);
}

[data-sp-embed].js #create .reveal-media.visible .create-demo__window{
  animation: create-demo-in 0.78s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes create-demo-in {
  from {
    opacity: 0;
    transform: translateY(1.25rem) scale(0.975);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

[data-sp-embed] #create .create-demo__chrome{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  background: linear-gradient(180deg, #fff 0%, #fafafa 100%);
}

[data-sp-embed] #create .create-demo__chrome-left{
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.95rem;
  color: #111827;
}

[data-sp-embed] #create .create-demo__dot{
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: var(--create-accent);
  box-shadow: 0 0 0 4px rgba(219, 39, 119, 0.12);
}

[data-sp-embed] #create .create-demo__chrome-actions{
  display: inline-flex;
  gap: 0.45rem;
}

[data-sp-embed] #create .create-demo__ghost, [data-sp-embed] #create .create-demo__save{
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 0.38rem 0.8rem;
}

[data-sp-embed] #create .create-demo__ghost{
  color: #64748b;
  background: #f1f5f9;
}

[data-sp-embed] #create .create-demo__save{
  color: #fff;
  background: #111827;
}

[data-sp-embed] #create .create-demo__body{
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  min-height: clamp(22rem, 46vw, 30rem);
}

[data-sp-embed] #create .create-demo__editor{
  display: grid;
  gap: 0.7rem;
  align-content: start;
  padding: 1.05rem 1.15rem 1.25rem;
  border-right: 1px solid rgba(15, 23, 42, 0.06);
  background: #fff;
}

[data-sp-embed] #create .create-demo__field{
  display: grid;
  gap: 0.28rem;
  margin: 0;
}

[data-sp-embed] #create .create-demo__field > span{
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #94a3b8;
  text-transform: uppercase;
}

[data-sp-embed] #create .create-demo__field strong, [data-sp-embed] #create .create-demo__field p{
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: #0f172a;
  padding: 0.62rem 0.75rem;
  border-radius: 0.7rem;
  background: #f8fafc;
  border: 1px solid rgba(148, 163, 184, 0.28);
}

[data-sp-embed] #create .create-demo__field--area p{
  min-height: 4.6rem;
}

[data-sp-embed] #create .create-demo__url{
  font-size: 0.78rem !important;
  color: #475569 !important;
  word-break: break-all;
}

[data-sp-embed] #create .create-demo__copy-short{
  display: none;
}

[data-sp-embed] #create .create-demo__copy-full{
  display: inline;
}

[data-sp-embed] #create .create-demo__status{
  width: fit-content;
  color: #15803d !important;
  background: #ecfdf3 !important;
  border-color: rgba(34, 197, 94, 0.28) !important;
}

[data-sp-embed] #create .create-demo__chips{
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

[data-sp-embed] #create .create-demo__chips li{
  font-size: 0.74rem;
  font-weight: 700;
  color: #9d174d;
  background: #fdf2f8;
  border: 1px solid rgba(244, 114, 182, 0.35);
  border-radius: 999px;
  padding: 0.28rem 0.62rem;
}

[data-sp-embed].js #create .reveal-media:not(.visible) .create-demo__field, [data-sp-embed].js #create .reveal-media:not(.visible) .create-demo__chips li{
  opacity: 0;
  transform: translateY(10px);
}

[data-sp-embed].js #create .reveal-media.visible .create-demo__field{
  animation: create-field-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(180ms + var(--i, 0) * 90ms);
}

[data-sp-embed].js #create .reveal-media.visible .create-demo__chips li{
  animation: create-chip-pop 0.48s cubic-bezier(0.16, 1.2, 0.3, 1) both;
}

[data-sp-embed].js #create .reveal-media.visible .create-demo__chips li:nth-child(1){ animation-delay: 0.72s; }
[data-sp-embed].js #create .reveal-media.visible .create-demo__chips li:nth-child(2){ animation-delay: 0.84s; }
[data-sp-embed].js #create .reveal-media.visible .create-demo__chips li:nth-child(3){ animation-delay: 0.96s; }
[data-sp-embed].js #create .reveal-media.visible .create-demo__chips li:nth-child(4){ animation-delay: 1.08s; }

@keyframes create-field-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes create-chip-pop {
  0% {
    opacity: 0;
    transform: scale(0.72);
  }
  70% {
    opacity: 1;
    transform: scale(1.06);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

[data-sp-embed] #create .create-demo__title-box{
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 2.7rem;
}

[data-sp-embed] #create .create-demo__typing{
  display: inline;
  white-space: pre-wrap;
}

[data-sp-embed] #create .create-demo__typing.is-typing::after{
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 1px;
  vertical-align: -0.12em;
  background: rgba(219, 39, 119, 0.8);
  animation: create-caret 0.85s step-end infinite;
}

@keyframes create-caret {
  50% { background: transparent; }
}

[data-sp-embed] #create .create-demo__preview{
  display: grid;
  grid-template-rows: auto 1fr;
  background:
    radial-gradient(ellipse 70% 55% at 50% 18%, rgba(251, 113, 133, 0.12), transparent 70%),
    linear-gradient(180deg, #fff8fb 0%, #f8fafc 100%);
  padding: 1rem 1rem 1.15rem;
}

[data-sp-embed] #create .create-demo__preview-head{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  margin-bottom: 0.85rem;
}

[data-sp-embed] #create .create-demo__preview-head > strong{
  font-size: 0.82rem;
  color: #334155;
}

[data-sp-embed] #create .create-demo__tabs{
  display: inline-flex;
  gap: 0.2rem;
  padding: 0.18rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(15, 23, 42, 0.08);
}

[data-sp-embed] #create .create-demo__tab{
  appearance: none;
  border: 0;
  background: transparent;
  color: #64748b;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 0.4rem 0.72rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

[data-sp-embed] #create .create-demo__tab.is-active{
  color: #fff;
  background: #111827;
  transform: translateY(-1px);
}

[data-sp-embed] #create .create-demo__tab[data-create-tab="line"].is-active{
  background: var(--create-line);
}

[data-sp-embed] #create .create-demo__tab[data-create-tab="instagram"].is-active{
  background: linear-gradient(120deg, #f58529, #dd2a7b 55%, #8134af);
}

[data-sp-embed] #create .create-demo__tab[data-create-tab="facebook"].is-active{
  background: var(--create-fb);
}

[data-sp-embed] #create .create-demo__stage{
  position: relative;
  min-height: 18.5rem;
  display: grid;
  place-items: center;
}

[data-sp-embed] #create .create-demo__panel{
  grid-area: 1 / 1;
  width: min(100%, 17.5rem);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.96);
  transition:
    opacity 0.42s ease,
    transform 0.48s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0.42s;
  pointer-events: none;
}

[data-sp-embed] #create .create-demo__panel.is-active{
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

[data-sp-embed] #create .create-line, [data-sp-embed] #create .create-ig, [data-sp-embed] #create .create-fb{
  background: #fff;
  border-radius: 1rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.12);
  overflow: hidden;
}

[data-sp-embed] #create .create-line{
  background: #7ebce8;
  padding: 1rem 0.85rem 1.1rem;
}

[data-sp-embed] #create .create-line__bubble{
  background: #fff;
  border-radius: 0.85rem;
  padding: 0.85rem;
  display: grid;
  gap: 0.55rem;
}

[data-sp-embed] #create .create-line__title{
  margin: 0;
  font-size: 0.9rem;
  font-weight: 800;
  color: #111827;
}

[data-sp-embed] #create .create-line__text{
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.45;
  color: #475569;
}

[data-sp-embed] #create .create-line__coupon{
  border-radius: 0.7rem;
  padding: 0.85rem 0.7rem;
  text-align: center;
  color: #fff;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.18), transparent 45%),
    linear-gradient(120deg, #fb7185, #f97316 55%, #facc15);
}

[data-sp-embed] #create .create-line__coupon span{
  display: block;
  font-size: 1.45rem;
  font-weight: 900;
  letter-spacing: 0.02em;
}

[data-sp-embed] #create .create-line__coupon strong{
  display: block;
  margin-top: 0.15rem;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}

[data-sp-embed] #create .create-line__btn{
  display: block;
  text-align: center;
  border-radius: 999px;
  padding: 0.62rem 0.8rem;
  font-size: 0.82rem;
  font-weight: 800;
  color: #fff;
  background: var(--create-line);
}

[data-sp-embed] #create .create-ig__head, [data-sp-embed] #create .create-fb__head{
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 0.75rem 0.55rem;
}

[data-sp-embed] #create .create-ig__avatar{
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #f58529, #dd2a7b 55%, #8134af);
}

[data-sp-embed] #create .create-ig__head strong, [data-sp-embed] #create .create-fb__head strong{
  display: block;
  font-size: 0.78rem;
  color: #111827;
}

[data-sp-embed] #create .create-ig__head span, [data-sp-embed] #create .create-fb__head span{
  display: block;
  font-size: 0.66rem;
  color: #94a3b8;
}

[data-sp-embed] #create .create-ig__media, [data-sp-embed] #create .create-fb__media{
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #f1f5f9;
}

[data-sp-embed] #create .create-ig__media img, [data-sp-embed] #create .create-fb__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

[data-sp-embed] #create .create-ig__cta{
  background: #111;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 0.48rem 0.5rem;
}

[data-sp-embed] #create .create-ig__caption, [data-sp-embed] #create .create-fb__text{
  margin: 0;
  padding: 0.65rem 0.75rem 0.85rem;
  font-size: 0.74rem;
  line-height: 1.4;
  color: #334155;
}

[data-sp-embed] #create .create-fb__mark{
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 900;
  background: var(--create-fb);
}

[data-sp-embed] #create .create-fb__foot{
  display: flex;
  justify-content: space-around;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  padding: 0.55rem 0.4rem 0.65rem;
  font-size: 0.7rem;
  font-weight: 700;
  color: #64748b;
}

[data-sp-embed] #create .create-demo__story{
  display: grid;
  gap: 0.95rem;
  justify-items: start;
  max-width: 42rem;
}

[data-sp-embed] #create .create-demo__story > p{
  margin: 0;
  font-size: clamp(0.98rem, 0.9rem + 0.35vw, 1.12rem);
  line-height: 1.7;
  color: #334155;
}

/* Tablet (iPad): keep editor + preview like PC, slightly compact */
@media (min-width: 768px) and (max-width: 920px) {
  [data-sp-embed] #create .create-demo__body{
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    min-height: 0;
  }

  [data-sp-embed] #create .create-demo__editor{
    display: grid;
    padding: 0.85rem 0.85rem 1rem;
    gap: 0.7rem;
  }

  [data-sp-embed] #create .create-demo__preview{
    padding: 0.75rem 0.7rem 0.9rem;
  }

  [data-sp-embed] #create .create-demo__preview-head{
    gap: 0.4rem;
    margin-bottom: 0.55rem;
  }

  [data-sp-embed] #create .create-demo__preview-head strong{
    font-size: 0.82rem;
  }

  [data-sp-embed] #create .create-demo__tab{
    font-size: 0.7rem;
    padding: 0.32rem 0.5rem;
  }

  [data-sp-embed] #create .create-demo__stage{
    min-height: 16rem;
  }

  [data-sp-embed] #create .create-demo__panel{
    width: min(100%, 15.5rem);
  }

  [data-sp-embed] #create .create-demo__chrome{
    padding: 0.7rem 0.9rem;
  }

  [data-sp-embed] #create .create-demo__chrome strong{
    font-size: 0.9rem;
  }

  [data-sp-embed] #create .create-demo__field > span{
    font-size: 0.78rem;
  }
}

@media (max-width: 767px) {
  /* Phone: preview only (hide editor form) */
  [data-sp-embed] #create .create-demo__body{
    grid-template-columns: 1fr;
    min-height: 0;
  }

  [data-sp-embed] #create .create-demo__editor{
    display: none;
  }

  [data-sp-embed] #create .create-demo__preview{
    padding: 0.75rem 0.7rem 0.9rem;
  }

  [data-sp-embed] #create .create-demo__preview-head{
    gap: 0.4rem;
    margin-bottom: 0.55rem;
  }

  [data-sp-embed] #create .create-demo__preview-head strong{
    font-size: 0.82rem;
  }

  [data-sp-embed] #create .create-demo__tab{
    font-size: 0.7rem;
    padding: 0.32rem 0.5rem;
  }

  [data-sp-embed] #create .create-demo__stage{
    min-height: 16rem;
    display: grid;
    place-items: center;
  }

  [data-sp-embed] #create .create-demo__panel{
    width: min(100%, 17rem);
  }

  [data-sp-embed] #create .create-demo__chrome{
    padding: 0.6rem 0.8rem;
  }

  [data-sp-embed] #create .create-demo__chrome strong{
    font-size: 0.88rem;
  }
}

@media (max-width: 640px) {
  [data-sp-embed] #create .create-demo__chrome-actions{
    display: none;
  }

  [data-sp-embed] #create .create-demo__panel{
    width: min(100%, 15.5rem);
  }
}

/* ===== AI platform: match Create section background + type ===== */
[data-sp-embed] #ai-platform.band-marketing{
  background: linear-gradient(180deg, #f8f9fa 0%, #fff8f9 55%, #fff5f7 100%);
}

[data-sp-embed] #ai-platform .showcase--analysis-full > .showcase-copy{
  text-align: center;
  align-items: center;
  justify-items: center;
  margin-inline: auto;
}

[data-sp-embed] #ai-platform .showcase-copy .section-label{
  color: #be185d;
}

[data-sp-embed] #ai-platform .showcase-copy h2{
  font-size: clamp(26px, 3.6vw + 0.4rem, 42px);
  line-height: 1.2;
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
}

[data-sp-embed] #ai-platform .showcase-copy .showcase-subtitle{
  margin: 14px 0 0;
  font-size: clamp(18px, 2.2vw + 0.35rem, 26px);
  line-height: 1.45;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink);
  max-width: 28em;
}

[data-sp-embed] #ai-platform .ai-platform-demo{
  width: min(100%, 56rem);
  margin: clamp(1.5rem, 3vw, 2.75rem) auto 0;
}

[data-sp-embed] #ai-platform .cms-ai-scene{
  width: 100%;
  max-width: none;
  margin: 0 auto;
}

/* ===== AI platform: PC = text left / visual right; mobile keeps stack ===== */
@media (min-width: 861px) {
  [data-sp-embed] #ai-platform .showcase--analysis-full{
    display: grid !important;
    grid-template-columns: minmax(12rem, 0.85fr) minmax(0, 1.35fr);
    align-items: center;
    gap: clamp(1.75rem, 4vw, 3.5rem);
    width: min(1200px, calc(100% - 8rem));
    margin-inline: auto;
  }

  [data-sp-embed] #ai-platform .showcase--analysis-full > .showcase-copy{
    text-align: left !important;
    align-items: flex-start !important;
    justify-items: start !important;
    margin: 0 !important;
    max-width: none;
  }

  [data-sp-embed] #ai-platform .showcase-copy .showcase-subtitle{
    margin-left: 0;
    margin-right: 0;
    max-width: 16em;
  }

  [data-sp-embed] #ai-platform .ai-platform-demo{
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  [data-sp-embed] #ai-platform .cms-ai-scene{
    aspect-ratio: 11 / 9;
    min-height: 20rem;
    max-height: 34rem;
  }
}

@media (max-width: 860px) {
  [data-sp-embed] #ai-platform .showcase--analysis-full{
    display: flex;
    flex-direction: column;
  }

  [data-sp-embed] #ai-platform .showcase--analysis-full > .showcase-copy{
    text-align: center;
    align-items: center;
    justify-items: center;
    margin-inline: auto;
  }

  [data-sp-embed] #ai-platform .ai-platform-demo{
    width: min(100%, 56rem);
    margin: clamp(1.5rem, 3vw, 2.75rem) auto 0;
  }
}

/* ===== Create: copy left + AI image right, demo below ===== */
[data-sp-embed] #create .create-hero{
  display: grid;
  grid-template-columns: minmax(12rem, 0.75fr) minmax(0, 1.35fr);
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  width: min(1200px, calc(100% - 8rem));
  margin: 0 auto clamp(1.5rem, 3vw, 2.75rem);
}

[data-sp-embed] #create .create-hero__copy{
  order: 1;
  text-align: left !important;
  align-items: flex-start !important;
  justify-items: start !important;
  margin: 0 !important;
  max-width: none;
  width: auto;
}

[data-sp-embed] #create .create-hero__copy .section-label{
  color: #be185d;
  font-size: clamp(0.85rem, 0.7rem + 0.35vw, 1.05rem);
  letter-spacing: 0.12em;
}

[data-sp-embed] #create .create-hero__copy h2{
  font-size: clamp(2.4rem, 1.4rem + 3.2vw, 4rem) !important;
  line-height: 1.15;
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
}

[data-sp-embed] #create .create-hero__copy .showcase-subtitle{
  margin: 1rem 0 0;
  font-size: clamp(1.15rem, 0.85rem + 1vw, 1.65rem) !important;
  line-height: 1.6;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
  max-width: 16em;
}

[data-sp-embed] #create .create-hero__visual{
  order: 2;
  min-width: 0;
  width: 100%;
}

[data-sp-embed] #create .create-hero__shot-wrap{
  width: 100%;
  max-width: min(100%, 52rem);
  margin-inline: auto;
  will-change: transform, opacity;
}

[data-sp-embed] #create .create-hero__copy .ai-insight-tags{
  margin-top: 1.1rem;
  max-width: 22em;
}

[data-sp-embed] #create .create-hero__shot{
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  transform-origin: 50% 55%;
  will-change: transform, filter;
  filter:
    drop-shadow(0 0 8px rgba(147, 51, 234, 0.22))
    drop-shadow(0 0 22px rgba(168, 85, 247, 0.16))
    drop-shadow(0 14px 28px rgba(88, 28, 135, 0.1));
}

[data-sp-embed].js #create .create-hero__visual:not(.visible) .create-hero__shot-wrap{
  opacity: 0;
  transform: translateY(22px) scale(0.78);
  animation: none;
}

[data-sp-embed].js #create .create-hero__visual.visible .create-hero__shot-wrap{
  animation: create-hero-shot-pop 0.58s cubic-bezier(0.16, 1.25, 0.3, 1) both;
}

[data-sp-embed].js #create .create-hero__visual.visible .create-hero__shot{
  animation: create-hero-shot-float 4.2s ease-in-out 0.45s infinite;
}

[data-sp-embed]:not(.js) #create .create-hero__shot-wrap{
  opacity: 1;
  transform: none;
}

@keyframes create-hero-shot-pop {
  0% {
    opacity: 0;
    transform: translateY(26px) scale(0.72);
  }
  70% {
    opacity: 1;
    transform: translateY(-4px) scale(1.04);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes create-hero-shot-float {
  0%,
  100% {
    transform: translateY(0);
    filter:
      drop-shadow(0 0 6px rgba(147, 51, 234, 0.18))
      drop-shadow(0 0 18px rgba(168, 85, 247, 0.12))
      drop-shadow(0 12px 24px rgba(88, 28, 135, 0.08));
  }
  50% {
    transform: translateY(-10px);
    filter:
      drop-shadow(0 0 10px rgba(147, 51, 234, 0.28))
      drop-shadow(0 0 26px rgba(168, 85, 247, 0.2))
      drop-shadow(0 16px 30px rgba(88, 28, 135, 0.12));
  }
}

/* iPad / モバイル: 作成ヒーローは文言中央 → 画像は下 */
@media (max-width: 1024px) {
  [data-sp-embed] #create .create-hero{
    grid-template-columns: 1fr !important;
    gap: clamp(1.25rem, 3.5vw, 2.25rem);
    align-items: center;
    justify-items: center;
    margin-bottom: clamp(1.25rem, 4vw, 2rem);
  }

  [data-sp-embed] #create .create-hero__copy{
    order: -1;
    width: 100%;
    max-width: min(36rem, 92%);
    margin-inline: auto !important;
    text-align: center !important;
    align-items: center !important;
    justify-items: center !important;
  }

  [data-sp-embed] #create .create-hero__visual{
    order: 0;
    width: 100%;
    max-width: min(40rem, 94%);
  }

  [data-sp-embed] #create .create-hero__shot-wrap{
    max-width: min(100%, 40rem);
    margin-inline: auto;
  }

  [data-sp-embed] #create .create-hero__copy .section-label, [data-sp-embed] #create .create-hero__copy h2, [data-sp-embed] #create .create-hero__copy .showcase-subtitle{
    text-align: center !important;
    margin-inline: auto !important;
  }

  [data-sp-embed] #create .create-hero__copy .showcase-subtitle, [data-sp-embed] #create .create-hero__copy .ai-insight-tags{
    max-width: 28em;
    margin-inline: auto !important;
  }

  [data-sp-embed] #create .create-hero__copy .ai-insight-tags{
    justify-content: center !important;
  }
}

@media (max-width: 767px) {
  [data-sp-embed] #create .create-hero__shot-wrap{
    max-width: 28rem;
  }
}

/* SNS反応分析動画: 左右は控えめに削り、PC横画面の比率を維持 */
[data-sp-embed] #analysis .ai-insight-card__preview--sns-video, [data-sp-embed] #analysis .ai-insight-card__preview--survey-video{
  --side-crop: 0.04;
  --media-zoom: 1;
  background: #fff !important;
  width: min(100%, 41rem);
  max-width: 41rem;
  margin-inline: auto;
  justify-self: center;
  overflow: hidden;
}

/* 録画時の左端黒縁を隠す（contain だとクロップが効かない） */
[data-sp-embed] #analysis .ai-insight-card__preview--sns-video{
  --side-crop: 0.05;
  --media-zoom: 1.03;
}

/* アンケート作成動画: 左右の黒帯をカット */
[data-sp-embed] #create .ai-insight-card__preview--survey-create-video{
  --side-crop: 0.12;
  --media-zoom: 1;
  background: #fff !important;
  width: min(100%, 41rem);
  max-width: 41rem;
  margin-inline: auto;
  justify-self: center;
  overflow: hidden;
}

[data-sp-embed] #analysis .ai-insight-card__preview--survey-video .ai-insight-card__media, [data-sp-embed] #create .ai-insight-card__preview--survey-create-video .ai-insight-card__media{
  object-fit: contain;
  object-position: center center;
  height: auto;
  aspect-ratio: auto;
}

[data-sp-embed] #analysis .ai-insight-card__preview--sns-video .ai-insight-card__media{
  object-fit: cover !important;
  object-position: 60% center !important;
  height: auto;
  aspect-ratio: 16 / 10;
  border: none !important;
  box-shadow: none !important;
}

@media (max-width: 860px) {
  [data-sp-embed] #analysis .ai-insight-card__preview--sns-video, [data-sp-embed] #analysis .ai-insight-card__preview--survey-video, [data-sp-embed] #create .ai-insight-card__preview--survey-create-video{
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    justify-self: stretch !important;
    overflow: hidden;
  }

  [data-sp-embed] #analysis .ai-insight-card__preview--survey-video{
    --side-crop: 0.04;
    --media-zoom: 1;
  }

  /*
    アンケート作成（モバイル）: 横幅は全幅のまま、高さは動画本来の比率。
    cover + 16/9 固定だと上下が欠けて縦比率が崩れる。
    左右の黒帯は --side-crop で隠す。
  */
  [data-sp-embed] #create .ai-insight-card__preview--survey-create-video{
    --side-crop: 0.13;
    --media-zoom: 1.02;
    aspect-ratio: auto !important;
    height: auto !important;
    min-height: 0 !important;
  }

  [data-sp-embed] #create .ai-insight-card__preview--survey-create-video .ai-insight-card__media{
    object-fit: contain !important;
    object-position: center center !important;
    aspect-ratio: auto !important;
    width: calc(100% / (1 - (2 * var(--side-crop))) * var(--media-zoom)) !important;
    height: auto !important;
    max-height: none !important;
  }

  /*
    SNS反応分析（モバイル）: 左端の黒線を隠す。
    録画内の左境界が見えているので、左側をやや強めに寄せてクリップ。
  */
  [data-sp-embed] #analysis .ai-insight-card__preview--sns-video{
    --side-crop: 0.08;
    --media-zoom: 1.1;
  }

  [data-sp-embed] #analysis .ai-insight-card__preview--sns-video .ai-insight-card__media{
    object-fit: cover !important;
    object-position: 78% center !important;
    aspect-ratio: 16 / 10;
    height: auto;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
  }

  [data-sp-embed] #analysis .ai-insight-card__preview--survey-video .ai-insight-card__media{
    object-fit: contain !important;
    object-position: center center !important;
    aspect-ratio: auto;
    height: auto;
  }
}

/* iPad縦: カード間の余白と動画比率を寄せる */
@media (min-width: 768px) and (max-width: 1024px) {
  [data-sp-embed] #analysis .ai-insight-card__preview--sns-video{
    --side-crop: 0.08;
    --media-zoom: 1.1;
  }

  [data-sp-embed] #analysis .ai-insight-card__preview--sns-video .ai-insight-card__media{
    object-fit: cover !important;
    object-position: 78% center !important;
  }

  [data-sp-embed] #create .ai-insight-card__preview--survey-create-video{
    --side-crop: 0.135;
    --media-zoom: 1.02;
  }

  [data-sp-embed] #create .ai-insight-card__preview--survey-create-video .ai-insight-card__media{
    object-fit: cover !important;
    object-position: center center !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel{
    --mgmt-card-w: min(72vw, 26rem);
    --mgmt-side-x: 12%;
    --mgmt-side-scale: 0.86;
    min-height: clamp(28rem, 62vw, 40rem);
    overflow: visible !important;
  }
}


/* Left floats (IG/FB): match right-side visual scale (landscape assets need larger width) */
[data-sp-embed] .hero--cms-story{
  --cms-hero-float-w-left: clamp(270px, 32vw, 480px);
}

[data-sp-embed] .hero--cms-story .hero-float--ig, [data-sp-embed] .hero--cms-story .hero-float--fb{
  width: var(--cms-hero-float-w-left) !important;
  max-width: none !important;
}

[data-sp-embed] .hero--cms-story .hero-float--line, [data-sp-embed] .hero--cms-story .hero-float--campaign{
  width: var(--cms-hero-float-w-lg) !important;
}

@media (min-width: 1400px) {
  [data-sp-embed] .hero--cms-story{
    --cms-hero-float-w-left: clamp(340px, 30vw, 520px);
    --cms-hero-float-w-lg: clamp(300px, 26vw, 460px);
  }
}

@media (max-width: 1100px) {
  [data-sp-embed] .hero--cms-story{
    --cms-hero-float-w-left: clamp(190px, 30vw, 290px);
  }
}

@media (max-width: 760px) {
  [data-sp-embed] .hero--cms-story{
    --cms-hero-float-w-left: clamp(132px, 40vw, 178px);
  }
}

/* All 4 hero floats: same large display size */
[data-sp-embed] .hero--cms-story{
  --cms-hero-float-w-all: clamp(300px, 34vw, 520px);
}

[data-sp-embed] .hero--cms-story .hero-float--ig, [data-sp-embed] .hero--cms-story .hero-float--line, [data-sp-embed] .hero--cms-story .hero-float--fb, [data-sp-embed] .hero--cms-story .hero-float--campaign{
  width: var(--cms-hero-float-w-all) !important;
  max-width: none !important;
}

@media (min-width: 1400px) {
  [data-sp-embed] .hero--cms-story{
    --cms-hero-float-w-all: clamp(360px, 32vw, 560px);
  }
}

@media (max-width: 1100px) {
  [data-sp-embed] .hero--cms-story{
    --cms-hero-float-w-all: clamp(200px, 32vw, 310px);
  }
}

@media (max-width: 760px) {
  [data-sp-embed] .hero--cms-story{
    --cms-hero-float-w-all: clamp(140px, 42vw, 190px);
  }
}

/* Hero floats even larger */
[data-sp-embed] .hero--cms-story{
  --cms-hero-float-w-all: clamp(340px, 38vw, 580px);
}

@media (min-width: 1400px) {
  [data-sp-embed] .hero--cms-story{
    --cms-hero-float-w-all: clamp(400px, 36vw, 620px);
  }
}

@media (max-width: 1100px) {
  [data-sp-embed] .hero--cms-story{
    --cms-hero-float-w-all: clamp(220px, 36vw, 340px);
  }
}

@media (max-width: 760px) {
  [data-sp-embed] .hero--cms-story{
    --cms-hero-float-w-all: clamp(150px, 46vw, 210px);
  }
}

/* Campaign (BR) smaller; other three floats larger — desktop only */
@media (min-width: 1101px) {
  [data-sp-embed] .hero--cms-story .hero-float--ig, [data-sp-embed] .hero--cms-story .hero-float--line, [data-sp-embed] .hero--cms-story .hero-float--fb{
    width: clamp(360px, 40vw, 620px) !important;
  }

  [data-sp-embed] .hero--cms-story .hero-float--campaign{
    width: clamp(250px, 28vw, 420px) !important;
  }
}

@media (min-width: 1400px) {
  [data-sp-embed] .hero--cms-story .hero-float--ig, [data-sp-embed] .hero--cms-story .hero-float--line, [data-sp-embed] .hero--cms-story .hero-float--fb{
    width: clamp(420px, 38vw, 660px) !important;
  }

  [data-sp-embed] .hero--cms-story .hero-float--campaign{
    width: clamp(290px, 26vw, 460px) !important;
  }
}

@media (max-width: 1100px) {
  [data-sp-embed] .hero--cms-story .hero-float--ig, [data-sp-embed] .hero--cms-story .hero-float--line, [data-sp-embed] .hero--cms-story .hero-float--fb{
    width: clamp(230px, 38vw, 360px) !important;
  }

  [data-sp-embed] .hero--cms-story .hero-float--campaign{
    width: clamp(170px, 28vw, 260px) !important;
  }
}

@media (max-width: 760px) {
  [data-sp-embed] .hero--cms-story .hero-float--ig, [data-sp-embed] .hero--cms-story .hero-float--line, [data-sp-embed] .hero--cms-story .hero-float--fb{
    width: clamp(155px, 48vw, 220px) !important;
  }

  [data-sp-embed] .hero--cms-story .hero-float--campaign{
    width: clamp(120px, 36vw, 170px) !important;
  }
}

/* Hero title slightly larger; side floats further out */
[data-sp-embed] .hero--cms-story .hero-center{
  width: min(24rem, 38vw) !important;
  max-width: min(24rem, 38vw) !important;
}

[data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
  font-size: clamp(2.15rem, 1.15rem + 2.45vw, 3.55rem) !important;
  line-height: 1.2 !important;
}

[data-sp-embed] .hero--cms-story{
  --cms-hero-float-side: clamp(0.85rem, 2.8vw, 3.25rem);
}

@media (min-width: 1400px) {
  [data-sp-embed] .hero--cms-story{
    --cms-hero-float-side: clamp(1.25rem, 3.2vw, 4rem);
  }

  [data-sp-embed] .hero--cms-story .hero-center{
    width: min(26rem, 34vw) !important;
    max-width: min(26rem, 34vw) !important;
  }

  [data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
    font-size: clamp(2.35rem, 1.2rem + 2.5vw, 3.75rem) !important;
  }
}

@media (max-width: 1100px) {
  [data-sp-embed] .hero--cms-story{
    --cms-hero-float-side: clamp(0.35rem, 1.6vw, 1.25rem);
  }

  [data-sp-embed] .hero--cms-story .hero-center{
    width: min(17rem, 42vw) !important;
    max-width: min(17rem, 42vw) !important;
  }

  [data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
    font-size: clamp(1.65rem, 1rem + 1.85vw, 2.45rem) !important;
  }
}

@media (max-width: 860px) {
  [data-sp-embed] .hero--cms-story{
    --cms-hero-float-side: -0.15rem;
  }

  [data-sp-embed] .hero--cms-story .hero-center{
    width: min(16rem, 62vw) !important;
    max-width: min(16rem, 62vw) !important;
  }

  [data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
    font-size: clamp(1.7rem, 5.2vw, 2.15rem) !important;
  }
}


/* ===== Management: centered coverflow + swipe ===== */
[data-sp-embed] #management .showcase--analysis-full > .showcase-copy{
  text-align: center !important;
  justify-items: center;
  justify-self: center;
  width: min(52rem, 100%);
  margin-inline: auto;
}

[data-sp-embed] #management .showcase--analysis-full > .showcase-capabilities.analysis-capabilities{
  width: 100%;
  max-width: none;
  overflow: visible;
}

[data-sp-embed] #management .ai-insights-bento--mgmt-carousel{
  --mgmt-card-w: min(78vw, 62rem);
  --mgmt-side-x: 34%;
  --mgmt-side-scale: 0.82;
  position: relative;
  display: block;
  width: min(100%, 96rem);
  max-width: 96rem;
  margin: clamp(1rem, 2.5vw, 2rem) auto 0;
  min-height: clamp(28rem, 48vw, 42rem);
  padding: 1.5rem 0 2rem;
  perspective: 1600px;
  overflow: visible;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

[data-sp-embed] #management .ai-insights-bento--mgmt-carousel.is-dragging{
  cursor: grabbing;
}

[data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card{
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--mgmt-card-w);
  max-width: var(--mgmt-card-w);
  margin: 0;
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
  transition:
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.45s ease,
    filter 0.45s ease,
    box-shadow 0.45s ease;
  will-change: transform, opacity;
  backface-visibility: hidden;
  background: #fff !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.1);
  overflow: hidden;
  -webkit-user-drag: none;
}

[data-sp-embed] #management .ai-insights-bento--mgmt-carousel.is-dragging > .ai-insight-card{
  transition: none;
}

[data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card img{
  -webkit-user-drag: none;
  pointer-events: none;
}

/* Front card */
[data-sp-embed].js #showcases #management .reveal.visible .ai-insights-bento--mgmt-carousel > .ai-insight-card[data-mgmt-pos="0"], [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card[data-mgmt-pos="0"]{
  transform: translate(-50%, -50%) scale(1) !important;
  opacity: 1 !important;
  filter: brightness(1);
  z-index: 5;
  box-shadow:
    0 28px 60px rgba(15, 23, 42, 0.16),
    0 0 0 1px rgba(22, 163, 74, 0.14) !important;
  pointer-events: auto;
}

/* Right behind */
[data-sp-embed].js #showcases #management .reveal.visible .ai-insights-bento--mgmt-carousel > .ai-insight-card[data-mgmt-pos="1"], [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card[data-mgmt-pos="1"]{
  transform: translate(calc(-50% + var(--mgmt-side-x)), calc(-50% + 1.25rem)) scale(var(--mgmt-side-scale)) rotateY(-16deg) !important;
  opacity: 0.62 !important;
  filter: brightness(0.94);
  z-index: 2;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.1) !important;
  pointer-events: auto;
  cursor: pointer;
}

/* Left behind */
[data-sp-embed].js #showcases #management .reveal.visible .ai-insights-bento--mgmt-carousel > .ai-insight-card[data-mgmt-pos="2"], [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card[data-mgmt-pos="2"]{
  transform: translate(calc(-50% - var(--mgmt-side-x)), calc(-50% + 1.25rem)) scale(var(--mgmt-side-scale)) rotateY(16deg) !important;
  opacity: 0.62 !important;
  filter: brightness(0.94);
  z-index: 1;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.1) !important;
  pointer-events: auto;
  cursor: pointer;
}

/* Keep split-card layout; images keep natural aspect + browser chrome */
@media (min-width: 900px) {
  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel{
    --mgmt-card-w: min(74vw, 70rem);
    --mgmt-side-x: 36%;
    min-height: clamp(34rem, 48vw, 46rem);
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card{
    display: grid !important;
    grid-template-columns: minmax(0, 1.28fr) minmax(17rem, 0.82fr);
    grid-template-rows: auto auto;
    grid-template-areas:
      "label label"
      "preview body";
    min-height: 0;
    align-items: stretch;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card .ai-insight-card__media-label{
    grid-area: label;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card .ai-insight-card__preview{
    grid-area: preview;
    height: auto;
    min-height: 0;
    border-bottom: none;
    border-right: 1px solid rgba(60, 60, 67, 0.12);
    background: #f5f5f7;
    padding: 12px 12px 14px !important;
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card.ai-insight-card--hero-split-reverse{
    grid-template-columns: minmax(17rem, 0.82fr) minmax(0, 1.28fr);
    grid-template-areas:
      "label label"
      "body preview";
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card.ai-insight-card--hero-split-reverse .ai-insight-card__preview{
    border-right: none;
    border-left: 1px solid rgba(60, 60, 67, 0.12);
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card .ai-insight-card__body{
    grid-area: body;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(1.15rem, 1.8vw, 1.65rem) clamp(1.2rem, 1.9vw, 1.75rem) !important;
    gap: 0.15rem;
  }

  /* macOS-like window top bar on screenshots */
  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card .ai-insight-card__preview::before{
    content: "" !important;
    display: block !important;
    flex: 0 0 auto;
    height: 32px;
    border: 1px solid rgba(60, 60, 67, 0.12);
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    background:
      radial-gradient(circle at 15px 50%, #ff5f57 0 5px, transparent 6px),
      radial-gradient(circle at 35px 50%, #febc2e 0 5px, transparent 6px),
      radial-gradient(circle at 55px 50%, #28c840 0 5px, transparent 6px),
      linear-gradient(180deg, #f6f6f7 0%, #ebebed 100%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card .ai-insight-card__preview img{
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    object-fit: contain;
    object-position: top center;
    border: 1px solid rgba(60, 60, 67, 0.12) !important;
    border-top: none !important;
    border-radius: 0 0 10px 10px !important;
    box-shadow:
      0 10px 28px rgba(0, 0, 0, 0.08),
      0 1px 0 rgba(255, 255, 255, 0.5) inset !important;
    background: #fff;
  }
}

/* 広めPC: 静的3列（説明文はタグカード型に合わせて非表示） */
@media (min-width: 1280px) {
  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel:not(.ai-insights-bento--marquee){
    min-height: 0;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel:not(.ai-insights-bento--marquee) .ai-insight-card__body{
    display: flex !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel:not(.ai-insights-bento--marquee) .ai-insight-card__body > p{
    display: none !important;
  }
}

/* Coverflow/marquee has its own motion — don't keep hero-split entrance (opacity 0 + translate) */
[data-sp-embed].js #showcases #management .ai-insights-bento--mgmt-carousel .ai-insight-card--hero-split .hero-split-media, [data-sp-embed].js #showcases #management .ai-insights-bento--mgmt-carousel .ai-insight-card--hero-split > .hero-split-title, [data-sp-embed].js #showcases #management .ai-insights-bento--mgmt-carousel .ai-insight-card--hero-split .hero-split-copy > .ai-insight-card__media-label, [data-sp-embed].js #showcases #management .ai-insights-bento--mgmt-carousel .ai-insight-card--hero-split .hero-split-copy > p, [data-sp-embed].js #showcases #management .ai-insights-bento--mgmt-carousel .ai-insight-card--hero-split .hero-split-copy > .ai-insight-tags, [data-sp-embed].js #showcases #management .ai-insights-bento--mgmt-carousel .ai-insight-card--hero-split .hero-split-copy .ai-insight-tag, [data-sp-embed].js #showcases #management .ai-insights-bento--mgmt-carousel .ai-insight-card--hero-split .hero-split-copy > p .hero-subtitle-char{
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  animation: none !important;
  transition: none !important;
}

/* Management carousel type: keep title > copy > tags hierarchy, slightly compact */
[data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-card__media-label{
  padding: 0.72rem 1rem 0.6rem !important;
}

[data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-card__media-label h3{
  font-size: clamp(1.05rem, 0.95rem + 0.32vw, 1.22rem) !important;
  line-height: 1.3 !important;
  letter-spacing: -0.02em;
}

[data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-card__body p{
  font-size: clamp(0.82rem, 0.76rem + 0.16vw, 0.92rem) !important;
  line-height: 1.65 !important;
  margin-bottom: 0.65rem !important;
}

[data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-tags--story{
  gap: 0.38rem !important;
}

[data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-tag{
  font-size: clamp(0.7rem, 0.66rem + 0.1vw, 0.78rem) !important;
  padding: 0.3rem 0.58rem !important;
}

/* Mobile: still show browser chrome on images */
@media (max-width: 899px) {
  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card .ai-insight-card__preview{
    display: flex !important;
    flex-direction: column;
    padding: 10px 10px 12px !important;
    background: #f5f5f7 !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card .ai-insight-card__preview::before{
    content: "" !important;
    display: block !important;
    height: 28px;
    border: 1px solid rgba(60, 60, 67, 0.12);
    border-bottom: none;
    border-radius: 9px 9px 0 0;
    background:
      radial-gradient(circle at 13px 50%, #ff5f57 0 4.5px, transparent 5.5px),
      radial-gradient(circle at 30px 50%, #febc2e 0 4.5px, transparent 5.5px),
      radial-gradient(circle at 47px 50%, #28c840 0 4.5px, transparent 5.5px),
      linear-gradient(180deg, #f6f6f7 0%, #ebebed 100%);
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card .ai-insight-card__preview img{
    border: 1px solid rgba(60, 60, 67, 0.12) !important;
    border-top: none !important;
    border-radius: 0 0 9px 9px !important;
    width: 100%;
    height: auto;
    object-fit: contain !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card .ai-insight-card__body{
    padding: 1rem 1.05rem 1.15rem !important;
  }
}

/* Management cards: Apple-like system surfaces */
[data-sp-embed] #management .ai-insights-bento--mgmt-carousel{
  --apple-label: #1d1d1f;
  --apple-secondary: #6e6e73;
  --apple-fill: #f5f5f7;
  --apple-separator: rgba(60, 60, 67, 0.12);
  --apple-blue: #0071e3;
  --apple-green: #30d158;
}

[data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card{
  background:
    linear-gradient(180deg, #ffffff 0%, #fbfbfd 100%) !important;
  border: 1px solid var(--apple-separator) !important;
  border-radius: 18px !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 10px 28px rgba(0, 0, 0, 0.06),
    0 28px 56px rgba(0, 0, 0, 0.08) !important;
  color: var(--apple-label);
}

[data-sp-embed].js #showcases #management .reveal.visible .ai-insights-bento--mgmt-carousel > .ai-insight-card[data-mgmt-pos="0"], [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card[data-mgmt-pos="0"]{
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 14px 36px rgba(0, 0, 0, 0.08),
    0 36px 72px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(0, 113, 227, 0.12) !important;
}

[data-sp-embed].js #showcases #management .reveal.visible .ai-insights-bento--mgmt-carousel > .ai-insight-card[data-mgmt-pos="1"], [data-sp-embed].js #showcases #management .reveal.visible .ai-insights-bento--mgmt-carousel > .ai-insight-card[data-mgmt-pos="2"], [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card[data-mgmt-pos="1"], [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card[data-mgmt-pos="2"]{
  background:
    linear-gradient(180deg, #fbfbfd 0%, #f5f5f7 100%) !important;
  opacity: 0.78 !important;
  filter: saturate(0.92) brightness(0.99);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 8px 24px rgba(0, 0, 0, 0.06) !important;
}

[data-sp-embed] .band-management .ai-insight-card__media-label, [data-sp-embed].js .band-management .reveal.visible .ai-insight-card__media-label{
  background: linear-gradient(180deg, #ffffff 0%, #fbfbfd 100%) !important;
  border-bottom-color: var(--apple-separator, rgba(60, 60, 67, 0.12)) !important;
  color: var(--apple-label, #1d1d1f);
}

[data-sp-embed] .band-management .ai-insight-card__media-label h3{
  color: #1d1d1f !important;
  font-weight: 650;
  letter-spacing: -0.01em;
}

[data-sp-embed] .band-management .ai-insight-card__media-label-dot, [data-sp-embed].js .band-management .reveal.visible .ai-insight-card__media-label-dot{
  background: linear-gradient(180deg, #64d2ff 0%, #0071e3 100%) !important;
  box-shadow:
    0 0 0 3px rgba(0, 113, 227, 0.14),
    0 0 10px rgba(0, 113, 227, 0.28) !important;
}

[data-sp-embed] .band-management .ai-insight-card__body{
  background: #ffffff !important;
  color: #1d1d1f;
}

[data-sp-embed] .band-management .ai-insight-card__body p{
  color: #3c3c43 !important;
}

[data-sp-embed] .band-management .ai-insight-card__body p .text-accent-em{
  color: #3c3c43 !important;
  font-weight: 600;
  background: none !important;
  padding: 0;
}

[data-sp-embed] #create .ai-insight-card__body p, [data-sp-embed] #analysis .ai-insight-card__body p, [data-sp-embed] #create .ai-insight-card__body p .text-accent-em, [data-sp-embed] #analysis .ai-insight-card__body p .text-accent-em, [data-sp-embed] #create .ai-insight-card__body p .hero-subtitle-char, [data-sp-embed] #analysis .ai-insight-card__body p .hero-subtitle-char{
  color: #3c3c43 !important;
  font-weight: 500;
  background: none !important;
  padding: 0;
}

[data-sp-embed] .band-management .ai-insight-tags--story .ai-insight-tag--channel, [data-sp-embed] .band-management .ai-insight-tags--story .ai-insight-tag--system, [data-sp-embed] .band-management .ai-insight-tags--story .ai-insight-tag--content, [data-sp-embed] .band-management .ai-insight-tags--story .ai-insight-tag--inquiry{
  color: #1d1d1f !important;
  background: #f5f5f7 !important;
  border-color: rgba(60, 60, 67, 0.1) !important;
  border-radius: 980px;
}

@media (hover: hover) and (pointer: fine) {
  [data-sp-embed].js .band-management .reveal.visible .ai-insight-card:hover .ai-insight-card__media-label-dot, [data-sp-embed].js .band-management .reveal.visible .ai-insight-card:nth-child(1):hover .ai-insight-card__media-label-dot, [data-sp-embed].js .band-management .reveal.visible .ai-insight-card:nth-child(2):hover .ai-insight-card__media-label-dot, [data-sp-embed].js .band-management .reveal.visible .ai-insight-card:nth-child(3):hover .ai-insight-card__media-label-dot, [data-sp-embed] .band-management .ai-insight-card:hover .ai-insight-card__media-label-dot{
    background: linear-gradient(180deg, #64d2ff 0%, #0071e3 100%) !important;
    filter: none !important;
    box-shadow:
      0 0 0 4px rgba(0, 113, 227, 0.18),
      0 0 14px rgba(0, 113, 227, 0.35) !important;
    animation: none !important;
  }

  [data-sp-embed].js .band-management .reveal.visible .ai-insight-card:hover .ai-insight-card__media-label-dot::after, [data-sp-embed] .band-management .ai-insight-card:hover .ai-insight-card__media-label-dot::after{
    background: radial-gradient(circle, rgba(0, 113, 227, 0.35) 0%, rgba(0, 113, 227, 0.1) 45%, transparent 70%) !important;
    animation: none !important;
  }

  [data-sp-embed] .band-management .ai-insight-card:hover .ai-insight-card__media-label{
    background: linear-gradient(180deg, #ffffff 0%, #fbfbfd 100%) !important;
    border-bottom-color: rgba(60, 60, 67, 0.12) !important;
  }
}

@media (min-width: 900px) {
  /* Don't strip chrome from management carousel screenshots */
  [data-sp-embed] .band-management .ai-insight-card__preview:not(.hero-split-media){
    padding: 0 !important;
    background: #fff !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card .ai-insight-card__preview{
    padding: 12px 12px 14px !important;
    background: #f5f5f7 !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card .ai-insight-card__preview::before{
    display: block !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card .ai-insight-card__preview img{
    border: 1px solid rgba(60, 60, 67, 0.12) !important;
    border-top: none !important;
    border-radius: 0 0 10px 10px !important;
    box-shadow:
      0 10px 28px rgba(0, 0, 0, 0.08),
      0 1px 0 rgba(255, 255, 255, 0.5) inset !important;
    width: 100%;
    height: auto;
    object-fit: contain !important;
    object-position: top center;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card .ai-insight-card__preview{
    border-right-color: rgba(60, 60, 67, 0.12);
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card.ai-insight-card--hero-split-reverse .ai-insight-card__preview{
    border-left-color: rgba(60, 60, 67, 0.12);
  }
}

@media (max-width: 899px) {
  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel{
    --mgmt-card-w: min(74vw, 24rem);
    --mgmt-side-x: 12%;
    --mgmt-side-scale: 0.86;
    min-height: clamp(26rem, 96vw, 38rem);
    overflow: visible !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card .ai-insight-card__preview img{
    flex: 0 0 auto;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    min-height: 8rem;
  }
}

/* Integration: match feature-index / support bands */
[data-sp-embed] #integration.integration-band{
  background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 55%, #ffffff 100%);
}

[data-sp-embed] #integration .button.button--neon{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #0a0a0a;
  color: #fff;
  border: 1px solid rgba(255, 80, 110, 0.55);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06) inset,
    0 0 18px rgba(244, 63, 94, 0.45),
    0 0 42px rgba(225, 29, 72, 0.28),
    0 10px 28px rgba(15, 23, 42, 0.18);
  animation: integration-neon-pulse 2.4s ease-in-out infinite;
}

[data-sp-embed] #integration .button.button--neon::before{
  content: "";
  position: absolute;
  inset: -40% -60%;
  background: linear-gradient(
    115deg,
    transparent 35%,
    rgba(255, 255, 255, 0.35) 48%,
    rgba(255, 180, 190, 0.45) 52%,
    transparent 65%
  );
  transform: translateX(-130%);
  animation: integration-neon-shine 3.2s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

[data-sp-embed] #integration .button.button--neon:hover{
  background: #111;
  border-color: rgba(255, 120, 145, 0.85);
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1) inset,
    0 0 26px rgba(244, 63, 94, 0.65),
    0 0 58px rgba(225, 29, 72, 0.4),
    0 14px 32px rgba(29, 78, 216, 0.28);
}

@keyframes integration-neon-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.06) inset,
      0 0 14px rgba(244, 63, 94, 0.35),
      0 0 34px rgba(225, 29, 72, 0.2),
      0 10px 28px rgba(15, 23, 42, 0.16);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.1) inset,
      0 0 26px rgba(244, 63, 94, 0.7),
      0 0 56px rgba(225, 29, 72, 0.42),
      0 12px 30px rgba(15, 23, 42, 0.2);
  }
}

@keyframes integration-neon-shine {
  0%, 40% { transform: translateX(-130%); }
  62% { transform: translateX(130%); }
  100% { transform: translateX(130%); }
}

/* PC: Integration + Contact を大きく見せる */
@media (min-width: 900px) {
  [data-sp-embed] #integration.integration-band{
    padding-block: clamp(6.5rem, 9vw, 9rem) !important;
  }

  [data-sp-embed] #integration .section-heading{
    max-width: 64rem;
    margin-bottom: 0;
  }

  [data-sp-embed] #integration .id-eco{
    margin-top: 2.15rem;
  }

  [data-sp-embed] #integration .button.button--neon{
    min-height: 3.85rem;
    padding: 1.05rem 2.5rem;
    font-size: 1.125rem;
    font-weight: 650;
  }

  [data-sp-embed] #contact.contact.section-band{
    padding-block: clamp(6.5rem, 9vw, 9rem) !important;
  }

  [data-sp-embed] #contact .contact-inner{
    max-width: 64rem;
    padding-block-end: 2.25rem;
  }

  [data-sp-embed] #contact .section-label{
    font-size: 0.9375rem;
    letter-spacing: 0.16em;
    margin-bottom: 1.6rem;
  }

  [data-sp-embed] #contact .contact h2, [data-sp-embed] #contact h2{
    font-size: clamp(2.65rem, 3vw + 1rem, 3.75rem);
    line-height: 1.18;
  }

  [data-sp-embed] #contact .contact__lead, [data-sp-embed] #contact p:not(.section-label){
    margin-top: 1.25rem;
    margin-bottom: 2.5rem;
    max-width: 40rem;
    font-size: clamp(1.125rem, 0.45vw + 0.95rem, 1.3rem);
    line-height: 1.75;
  }

  [data-sp-embed] #contact .hero-actions{
    gap: 1rem;
  }

  [data-sp-embed] #contact .hero-actions .button{
    min-height: 3.85rem;
    padding: 1.05rem 2.4rem;
    font-size: 1.125rem;
  }

  [data-sp-embed] #contact .hero-actions .button.secondary.button--glow{
    min-height: 4rem;
    padding: 1.1rem 2.55rem;
    font-size: 1.15rem;
  }
}

/* ===== Create / Analysis / Management: shared inset + band shell ===== */
[data-sp-embed] #create, [data-sp-embed] #analysis, [data-sp-embed] #management{
  --showcase-pad-inline: clamp(12px, 2.2vw, 36px);
  --showcase-content-max: min(96rem, 100%);
  --showcase-band-soft: #f8f9fa;
  box-sizing: border-box;
  width: 100%;
  padding-block: clamp(88px, 10vw, 132px) !important;
  padding-inline: var(--showcase-pad-inline) !important;
}

@media (min-width: 900px) {
  [data-sp-embed] #create, [data-sp-embed] #analysis, [data-sp-embed] #management{
    --showcase-pad-inline: clamp(4.5rem, 12vw, 14rem);
  }
}

[data-sp-embed] #create.band-marketing{
  background: linear-gradient(
    180deg,
    var(--showcase-band-soft) 0%,
    #fff8f9 48%,
    #fff5f7 100%
  );
}

[data-sp-embed] #analysis.band-analysis{
  background: linear-gradient(
    180deg,
    var(--showcase-band-soft) 0%,
    #faf5ff 48%,
    #f5f3ff 100%
  );
}

[data-sp-embed] #management.band-management{
  background: linear-gradient(
    180deg,
    var(--showcase-band-soft) 0%,
    #f4fdf8 48%,
    #ecfdf5 100%
  );
}

[data-sp-embed] #create .showcase.showcase--analysis-full, [data-sp-embed] #analysis .showcase.showcase--analysis-full, [data-sp-embed] #management .showcase.showcase--analysis-full{
  width: 100% !important;
  max-width: var(--showcase-content-max) !important;
  margin-inline: auto !important;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  justify-items: stretch;
  box-sizing: border-box;
}

[data-sp-embed] #create .showcase--analysis-full > .showcase-copy, [data-sp-embed] #analysis .showcase--analysis-full > .showcase-copy, [data-sp-embed] #management .showcase--analysis-full > .showcase-copy{
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  justify-self: stretch !important;
}

[data-sp-embed] #create .create-hero{
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  box-sizing: border-box;
}

[data-sp-embed] #create .create-demo{
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  box-sizing: border-box;
}

[data-sp-embed] #create .showcase-capabilities, [data-sp-embed] #analysis .showcase-capabilities, [data-sp-embed] #management .showcase-capabilities{
  --insight-band-pad-inline: 0px;
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  box-sizing: border-box;
  overflow-x: visible;
}

[data-sp-embed] #create .ai-insights-bento, [data-sp-embed] #analysis .ai-insights-bento, [data-sp-embed] #management .ai-insights-bento{
  width: 100%;
  max-width: none;
  margin-inline: 0;
  box-sizing: border-box;
}

/* Coverflow sizing is desktop-only — never override mobile marquee track */
@media (min-width: 1280px) {
  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel:not(.ai-insights-bento--marquee){
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    --mgmt-card-w: min(92vw, 76rem);
    --mgmt-side-x: clamp(24%, 30vw, 38%);
    min-height: clamp(30rem, 50vw, 48rem);
  }
}

[data-sp-embed] #management .showcase--analysis-full > .showcase-copy{
  text-align: center !important;
  justify-items: center;
}

/* Keep Create AI visual sizing as-is (not part of the text scale-up) */
[data-sp-embed] #create .create-hero__shot-wrap{
  max-width: min(100%, 52rem);
}

[data-sp-embed] #analysis .ai-insight-card__preview--sns-video, [data-sp-embed] #analysis .ai-insight-card__preview--survey-video, [data-sp-embed] #create .ai-insight-card__preview--survey-create-video{
  width: min(100%, 48rem) !important;
  max-width: min(100%, 48rem) !important;
  margin-inline: auto;
  box-sizing: border-box;
}

/* Larger body/UI type (titles / h2 kept; AI強調色はサイズ変更しない) */
[data-sp-embed] #create .create-hero__copy .section-label, [data-sp-embed] #analysis .showcase-copy .section-label, [data-sp-embed] #management .showcase-copy .section-label{
  font-size: clamp(0.95rem, 0.8rem + 0.35vw, 1.15rem) !important;
}

[data-sp-embed] #create .create-hero__copy .showcase-subtitle, [data-sp-embed] #analysis .showcase-copy .showcase-subtitle, [data-sp-embed] #management .showcase-copy .showcase-subtitle{
  font-size: clamp(1.28rem, 1rem + 0.85vw, 1.85rem) !important;
  line-height: 1.65 !important;
  max-width: 22em;
}

[data-sp-embed] #management .showcase-copy .showcase-subtitle{
  margin-inline: auto;
  text-align: center;
}

[data-sp-embed] #create .ai-insight-card__media-label h3, [data-sp-embed] #analysis .ai-insight-card__media-label h3, [data-sp-embed] #management .ai-insight-card__media-label h3{
  font-size: clamp(1.6rem, 1.25rem + 0.95vw, 2.15rem) !important;
  line-height: 1.45 !important;
}

[data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-card__media-label h3{
  font-size: clamp(1.22rem, 1.08rem + 0.32vw, 1.42rem) !important;
  line-height: 1.3 !important;
}

[data-sp-embed] #create .ai-insight-card__body p, [data-sp-embed] #analysis .ai-insight-card__body p, [data-sp-embed] #management .ai-insight-card__body p, [data-sp-embed] #create .create-demo__story p{
  font-size: clamp(1.22rem, 1.05rem + 0.55vw, 1.48rem) !important;
  line-height: 1.95 !important;
}

/* PC: タイトルとの階層を残しつつ、機能内の説明をもう一段大きく */
@media (min-width: 861px) {
  [data-sp-embed] #create .ai-insight-card__body p, [data-sp-embed] #analysis .ai-insight-card__body p, [data-sp-embed] #management .ai-insight-card__body p, [data-sp-embed] #create .ai-insights-bento--pair > .ai-insight-card--hero-split .ai-insight-card__body > p, [data-sp-embed] #analysis .ai-insights-bento--pair > .ai-insight-card--hero-split .ai-insight-card__body > p, [data-sp-embed] #create .create-demo__story p{
    font-size: clamp(1.12rem, 0.98rem + 0.38vw, 1.28rem) !important;
    line-height: 1.95 !important;
  }

  /* 機能内カード: 画像の高さに対してタイトル〜説明が詰まらないよう行間を確保 */
  [data-sp-embed] #create .ai-insights-bento--pair > .ai-insight-card.ai-insight-card--hero-split, [data-sp-embed] #analysis .ai-insights-bento--pair > .ai-insight-card.ai-insight-card--hero-split, [data-sp-embed] #management .ai-insights-bento--pair > .ai-insight-card.ai-insight-card--hero-split{
    row-gap: 0.85rem !important;
  }

  [data-sp-embed] #create .ai-insights-bento--pair > .ai-insight-card--hero-split .ai-insight-card__body, [data-sp-embed] #analysis .ai-insights-bento--pair > .ai-insight-card--hero-split .ai-insight-card__body, [data-sp-embed] #management .ai-insights-bento--pair > .ai-insight-card--hero-split .ai-insight-card__body{
    gap: clamp(14px, 1.8vw, 20px) !important;
  }
}

[data-sp-embed] #create .ai-insight-tag, [data-sp-embed] #analysis .ai-insight-tag, [data-sp-embed] #management .ai-insight-tag, [data-sp-embed] #create .create-demo__story .ai-insight-tag{
  font-size: clamp(0.86rem, 0.8rem + 0.16vw, 0.98rem) !important;
  padding: 0.42rem 0.82rem !important;
  line-height: 1.35 !important;
}

[data-sp-embed] #create .create-demo__field > span{
  font-size: 0.9rem !important;
}

[data-sp-embed] #create .create-demo__field strong, [data-sp-embed] #create .create-demo__field p, [data-sp-embed] #create .create-demo__title-box, [data-sp-embed] #create .create-demo__url{
  font-size: clamp(1rem, 0.92rem + 0.25vw, 1.12rem) !important;
}

[data-sp-embed] #create .create-demo__chrome strong, [data-sp-embed] #create .create-demo__preview-head{
  font-size: 1.02rem !important;
}

[data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-card__body p{
  font-size: clamp(0.95rem, 0.86rem + 0.22vw, 1.08rem) !important;
  line-height: 1.7 !important;
}

@media (min-width: 861px) {
  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-card__body p{
    font-size: clamp(0.95rem, 0.86rem + 0.22vw, 1.08rem) !important;
    line-height: 1.7 !important;
  }
}

[data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-card__media-label h3{
  font-size: clamp(1.22rem, 1.08rem + 0.32vw, 1.42rem) !important;
}

[data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-tag{
  font-size: clamp(0.88rem, 0.82rem + 0.18vw, 1rem) !important;
  padding: 0.44rem 0.86rem !important;
}

@media (min-width: 1900px) {
  [data-sp-embed] #create .ai-insight-tag, [data-sp-embed] #analysis .ai-insight-tag, [data-sp-embed] #management .ai-insight-tag, [data-sp-embed] #create .create-demo__story .ai-insight-tag, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-tag{
    font-size: 1.12rem !important;
    padding: 0.55rem 1.05rem !important;
    line-height: 1.4 !important;
  }

  [data-sp-embed] #create .ai-insight-tag__icon, [data-sp-embed] #analysis .ai-insight-tag__icon, [data-sp-embed] #management .ai-insight-tag__icon, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-tag__icon{
    font-size: 1.12em !important;
  }

  [data-sp-embed] #create .ai-insight-tags--story, [data-sp-embed] #analysis .ai-insight-tags--story, [data-sp-embed] #management .ai-insight-tags--story, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-tags--story{
    gap: 0.55rem 0.65rem !important;
  }
}

/* images stay natural ratio */
[data-sp-embed] #create .ai-insight-card__preview img, [data-sp-embed] #analysis .ai-insight-card__preview img, [data-sp-embed] #management .ai-insight-card__preview img, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card .ai-insight-card__preview img{
  height: auto !important;
  object-fit: contain !important;
}

@media (max-width: 860px) {
  [data-sp-embed] #create, [data-sp-embed] #analysis, [data-sp-embed] #management{
    --showcase-pad-inline: clamp(14px, 3.5vw, 22px);
    padding-block: clamp(72px, 14vw, 104px) !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel{
    --mgmt-card-w: min(76vw, 22.5rem);
    --mgmt-side-x: 11%;
    --mgmt-side-scale: 0.86;
    min-height: clamp(24rem, 108vw, 34rem);
    overflow: visible !important;
  }

  [data-sp-embed] #create .create-hero__copy .showcase-subtitle, [data-sp-embed] #analysis .showcase-copy .showcase-subtitle, [data-sp-embed] #management .showcase-copy .showcase-subtitle{
    max-width: 30em;
  }

  /* iPhone幅: ヒーロー分割カードが横にはみ出さない */
  [data-sp-embed] #create .ai-insight-card--hero-split, [data-sp-embed] #analysis .ai-insight-card--hero-split, [data-sp-embed] #management .ai-insight-card--hero-split{
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  [data-sp-embed] #create .ai-insight-card__preview, [data-sp-embed] #analysis .ai-insight-card__preview{
    max-width: 100%;
    overflow: hidden;
  }

  /* 機能紹介カードタイトル: 画像プレビューとバランスが取れるサイズに */
  [data-sp-embed] #create .ai-insight-card__media-label h3, [data-sp-embed] #analysis .ai-insight-card__media-label h3, [data-sp-embed] #management .ai-insight-card__media-label h3, [data-sp-embed] #create .ai-insights-bento--pair > .ai-insight-card--hero-split .ai-insight-card__media-label h3, [data-sp-embed] #analysis .ai-insights-bento--pair > .ai-insight-card--hero-split .ai-insight-card__media-label h3, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-card__media-label h3{
    font-size: clamp(1.12rem, 4vw, 1.32rem) !important;
    line-height: 1.4 !important;
    letter-spacing: -0.01em;
  }

  [data-sp-embed] #create .ai-insight-card__media-label, [data-sp-embed] #analysis .ai-insight-card__media-label{
    gap: 0.4em;
  }
}

/* Hero: larger title + more air around brand & CTAs */
[data-sp-embed] .hero--cms-story .hero-center{
  width: min(28rem, 44vw) !important;
  max-width: min(28rem, 44vw) !important;
}

[data-sp-embed] .hero--cms-story .hero-brand-logo--above-title{
  margin-bottom: clamp(1.9rem, 3.6vw, 3rem) !important;
}

[data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
  font-size: clamp(2.45rem, 1.3rem + 2.9vw, 4.15rem) !important;
  line-height: 1.18 !important;
  gap: 0.34em !important;
}

[data-sp-embed] .hero--cms-story .hero-center .hero-actions{
  margin-top: clamp(2.2rem, 4vw, 3.25rem) !important;
  gap: clamp(0.85rem, 1.5vw, 1.2rem) !important;
}

@media (min-width: 1400px) {
  [data-sp-embed] .hero--cms-story .hero-center{
    width: min(32rem, 40vw) !important;
    max-width: min(32rem, 40vw) !important;
  }

  [data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
    font-size: clamp(2.7rem, 1.35rem + 2.9vw, 4.4rem) !important;
  }
}

@media (max-width: 1100px) {
  [data-sp-embed] .hero--cms-story .hero-center{
    width: min(20rem, 48vw) !important;
    max-width: min(20rem, 48vw) !important;
  }

  [data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
    font-size: clamp(1.95rem, 1.1rem + 2.2vw, 2.85rem) !important;
  }

  [data-sp-embed] .hero--cms-story .hero-brand-logo--above-title{
    margin-bottom: clamp(1.55rem, 3vw, 2.25rem) !important;
  }

  [data-sp-embed] .hero--cms-story .hero-center .hero-actions{
    margin-top: clamp(1.85rem, 3.4vw, 2.6rem) !important;
  }
}

@media (max-width: 860px) {
  [data-sp-embed] .hero--cms-story .hero-center{
    width: min(18rem, 72vw) !important;
    max-width: min(18rem, 72vw) !important;
  }

  [data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
    font-size: clamp(1.95rem, 6vw, 2.45rem) !important;
  }

  [data-sp-embed] .hero--cms-story .hero-brand-logo--above-title{
    margin-bottom: clamp(1.4rem, 4vw, 2rem) !important;
  }

  [data-sp-embed] .hero--cms-story .hero-center .hero-actions{
    margin-top: clamp(1.75rem, 4.5vw, 2.4rem) !important;
  }
}

/* Management carousel: cursor-follow soft glow on front card */
[data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card{
  --mgmt-glow-x: 50%;
  --mgmt-glow-y: 42%;
}

[data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
  background: radial-gradient(
    460px circle at var(--mgmt-glow-x) var(--mgmt-glow-y),
    rgba(187, 247, 208, 0.55) 0%,
    rgba(134, 239, 172, 0.22) 26%,
    rgba(34, 197, 94, 0.08) 48%,
    transparent 70%
  );
  z-index: 6;
}

[data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card[data-mgmt-pos="0"].is-cursor-glow{
  box-shadow:
    0 28px 60px rgba(15, 23, 42, 0.16),
    0 0 0 1px rgba(34, 197, 94, 0.28),
    0 0 36px rgba(34, 197, 94, 0.28),
    0 0 72px rgba(22, 163, 74, 0.16) !important;
  border-color: rgba(34, 197, 94, 0.28) !important;
}

[data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card[data-mgmt-pos="0"].is-cursor-glow::after{
  opacity: 1;
}

[data-sp-embed] #management .ai-insights-bento--mgmt-carousel.is-dragging > .ai-insight-card::after{
  opacity: 0;
}

/* ===== Create / Analysis: align L/R edges (keep analysis video aspect as-is) ===== */
[data-sp-embed] #create, [data-sp-embed] #analysis{
  --showcase-pad-inline: clamp(16px, 2.8vw, 40px);
  --showcase-content-max: min(92rem, 100%);
}

@media (min-width: 900px) {
  [data-sp-embed] #create, [data-sp-embed] #analysis{
    --showcase-pad-inline: clamp(4.5rem, 12vw, 14rem);
  }
}

[data-sp-embed] #create .showcase.showcase--analysis-full, [data-sp-embed] #analysis .showcase.showcase--analysis-full{
  width: 100% !important;
  max-width: var(--showcase-content-max) !important;
  margin-inline: auto !important;
}

[data-sp-embed] #create .create-hero, [data-sp-embed] #create .create-demo, [data-sp-embed] #create .showcase-capabilities, [data-sp-embed] #analysis .showcase-capabilities, [data-sp-embed] #create .ai-insights-bento, [data-sp-embed] #analysis .ai-insights-bento{
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  box-sizing: border-box;
}

/*
  Video figures were shrink-centered (48rem + margin auto), which made
  zig-zag rows' outer edges drift. Stretch to the media column instead.
  Do NOT touch aspect-ratio / object-fit / side-crop on the <video>.
*/
[data-sp-embed] #create .ai-insight-card__preview--survey-create-video, [data-sp-embed] #analysis .ai-insight-card__preview--sns-video, [data-sp-embed] #analysis .ai-insight-card__preview--survey-video{
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  justify-self: stretch !important;
}

/* Mirror text↔media columns so left/right outer edges match across rows */
@media (min-width: 900px) {
  [data-sp-embed] #create .ai-insights-bento--pair > .ai-insight-card.ai-insight-card--hero-split:not(.ai-insight-card--hero-split-reverse), [data-sp-embed] #analysis .ai-insights-bento--pair > .ai-insight-card.ai-insight-card--hero-split:not(.ai-insight-card--hero-split-reverse){
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr) !important;
  }

  [data-sp-embed] #create .ai-insights-bento--pair > .ai-insight-card.ai-insight-card--hero-split-reverse, [data-sp-embed] #analysis .ai-insights-bento--pair > .ai-insight-card.ai-insight-card--hero-split-reverse{
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr) !important;
  }

  [data-sp-embed] #create .ai-insights-bento--pair > .ai-insight-card.ai-insight-card--hero-split .hero-split-copy, [data-sp-embed] #analysis .ai-insights-bento--pair > .ai-insight-card.ai-insight-card--hero-split .hero-split-copy{
    width: 100%;
    max-width: none;
  }

  [data-sp-embed] #create .ai-insights-bento--pair > .ai-insight-card.ai-insight-card--hero-split-reverse .ai-insight-card__body, [data-sp-embed] #analysis .ai-insights-bento--pair > .ai-insight-card.ai-insight-card--hero-split-reverse .ai-insight-card__body{
    padding-inline: 0 0.25rem;
  }

  [data-sp-embed] #create .ai-insights-bento--pair > .ai-insight-card.ai-insight-card--hero-split:not(.ai-insight-card--hero-split-reverse) .ai-insight-card__body, [data-sp-embed] #analysis .ai-insights-bento--pair > .ai-insight-card.ai-insight-card--hero-split:not(.ai-insight-card--hero-split-reverse) .ai-insight-card__body{
    padding-inline: 0.25rem 0;
  }
}

@media (max-width: 860px) {
  [data-sp-embed] #create, [data-sp-embed] #analysis{
    --showcase-pad-inline: clamp(14px, 3.5vw, 22px);
  }
}

/* Management cards: compact mobile (hide body copy, smaller title/tags/card) */
@media (max-width: 860px) {
  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel{
    --mgmt-card-w: min(76vw, 22.5rem) !important;
    --mgmt-side-x: 11% !important;
    --mgmt-side-scale: 0.86;
    min-height: clamp(26rem, 108vw, 34rem) !important;
    overflow: visible !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card{
    border-radius: 14px !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-card__media-label{
    padding: 0.62rem 0.75rem 0.55rem !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-card__media-label h3{
    font-size: clamp(1.22rem, 4.2vw, 1.42rem) !important;
    line-height: 1.3 !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-card__body > p, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.ai-insights-bento--marquee .ai-insight-card__body > p{
    display: none !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-card__body{
    padding: 0.55rem 0.7rem 0.7rem !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-tags--story{
    gap: 0.28rem !important;
    margin: 0 !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-tag{
    font-size: 0.68rem !important;
    padding: 0.22rem 0.48rem !important;
    line-height: 1.25 !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-tag__icon{
    font-size: 0.85em !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card .ai-insight-card__preview{
    padding: 8px 8px 10px !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card .ai-insight-card__preview::before{
    height: 24px !important;
  }
}

/* iPad / モバイル: 作成・分析・マネジメントの文言を中央寄せ */
@media (max-width: 1024px) {
  [data-sp-embed] #create .create-hero__copy, [data-sp-embed] #create .create-demo__story, [data-sp-embed] #analysis .showcase-copy, [data-sp-embed] #management .showcase-copy{
    text-align: center !important;
    align-items: center !important;
    justify-items: center !important;
    justify-content: center !important;
  }

  [data-sp-embed] #create .create-hero__copy .section-label, [data-sp-embed] #create .create-hero__copy h2, [data-sp-embed] #create .create-demo__story .section-label, [data-sp-embed] #create .create-demo__story h2, [data-sp-embed] #analysis .showcase-copy .section-label, [data-sp-embed] #analysis .showcase-copy h2, [data-sp-embed] #management .showcase-copy .section-label, [data-sp-embed] #management .showcase-copy h2{
    text-align: center !important;
    margin-inline: auto !important;
  }

  [data-sp-embed] #create .create-hero__copy .showcase-subtitle, [data-sp-embed] #create .create-demo__story .showcase-subtitle, [data-sp-embed] #analysis .showcase-copy .showcase-subtitle, [data-sp-embed] #management .showcase-copy .showcase-subtitle{
    margin-inline: auto !important;
    text-align: center !important;
  }

  [data-sp-embed] #create .create-demo__story{
    justify-items: center !important;
    justify-content: center;
    width: 100%;
  }

  [data-sp-embed] #create .create-demo__story .ai-insight-tags, [data-sp-embed] #create .ai-insight-card__body .ai-insight-tags, [data-sp-embed] #analysis .ai-insight-card__body .ai-insight-tags, [data-sp-embed] #management .ai-insight-card__body .ai-insight-tags{
    justify-content: center !important;
    margin-inline: auto !important;
  }

  [data-sp-embed] #create .ai-insight-card__body, [data-sp-embed] #analysis .ai-insight-card__body, [data-sp-embed] #management .ai-insight-card__body, [data-sp-embed] #create .ai-insight-card__media-label, [data-sp-embed] #analysis .ai-insight-card__media-label, [data-sp-embed] #management .ai-insight-card__media-label{
    text-align: center !important;
    align-items: center !important;
  }

  [data-sp-embed] #create .ai-insight-card__media-label, [data-sp-embed] #analysis .ai-insight-card__media-label, [data-sp-embed] #management .ai-insight-card__media-label{
    justify-content: center !important;
  }

  [data-sp-embed] #create .ai-insight-card--hero-split .hero-split-copy > p, [data-sp-embed] #create .ai-insight-card--hero-split .hero-split-copy > .ai-insight-tags, [data-sp-embed] #analysis .ai-insight-card--hero-split .hero-split-copy > p, [data-sp-embed] #analysis .ai-insight-card--hero-split .hero-split-copy > .ai-insight-tags, [data-sp-embed] #management .ai-insight-card--hero-split .hero-split-copy > p, [data-sp-embed] #management .ai-insight-card--hero-split .hero-split-copy > .ai-insight-tags{
    margin-left: 0 !important;
    margin-inline: auto !important;
    width: 100% !important;
    max-width: 34em;
    text-align: center !important;
  }

  [data-sp-embed] #create .create-demo__preview-head{
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  [data-sp-embed] #create .create-demo__tabs{
    justify-content: center;
  }
}

/* ===== Page X-scroll lock only (do not clip section visuals) ===== */
[data-sp-embed], [data-sp-embed]{
  overflow-x: hidden !important;
  overscroll-behavior-x: none !important;
}

[data-sp-embed] main{
  overflow-x: hidden;
  overscroll-behavior-x: none;
  max-width: 100%;
}

/* Soft fit for mobile/iPad: scale down, don't chop content */
@media (max-width: 1024px) {
  /* Keep page from panning; allow decorative overflow inside sections */
  [data-sp-embed] #hero.hero--cms-story{
    overflow: hidden;
  }

  [data-sp-embed] .hero--cms-story .hero-floats{
    overflow: visible;
    pointer-events: none;
  }

  /* Hero title + corner images: Soft fit does not resize/reposition them */

  /* Easy / AI pitch: stack earlier so wordmark + mock aren't cut */
  [data-sp-embed] .cms-pitch__inner, [data-sp-embed] .cms-pitch--flip .cms-pitch__inner, [data-sp-embed] #nocode-platform .cms-pitch__inner, [data-sp-embed] #ai-platform.cms-pitch .cms-pitch__inner{
    grid-template-columns: 1fr !important;
    max-width: min(40rem, calc(100% - 2rem)) !important;
    gap: clamp(1.25rem, 3vw, 2rem) !important;
  }

  [data-sp-embed] .cms-pitch__copy, [data-sp-embed] .cms-pitch--flip .cms-pitch__copy, [data-sp-embed] #nocode-platform .cms-pitch__copy{
    grid-column: auto !important;
    grid-row: auto !important;
    order: 1;
    align-items: center !important;
    text-align: center !important;
    max-width: 100% !important;
  }

  [data-sp-embed] .cms-pitch__visual, [data-sp-embed] .cms-pitch--flip .cms-pitch__visual, [data-sp-embed] #nocode-platform .cms-pitch__visual{
    grid-column: auto !important;
    grid-row: auto !important;
    order: 2;
    width: 100%;
    max-width: 100%;
  }

  [data-sp-embed] #nocode-platform .platform-wordmark, [data-sp-embed] #ai-platform .platform-wordmark, [data-sp-embed] .cms-pitch .platform-wordmark{
    font-size: clamp(3rem, 12vw, 5.5rem) !important;
    max-width: 100%;
  }

  [data-sp-embed] .cms-pitch .platform-stage__tagline, [data-sp-embed] #nocode-platform .platform-stage__tagline{
    text-align: center !important;
  }

  [data-sp-embed] .cms-pitch__visual-stage, [data-sp-embed] #nocode-platform .cms-pitch__visual-stage, [data-sp-embed] #ai-platform .cms-pitch__visual-stage{
    width: min(100%, 32rem) !important;
    max-width: 100% !important;
    margin-inline: auto !important;
  }

  [data-sp-embed] #create .create-hero, [data-sp-embed] #create .create-demo, [data-sp-embed] #create .create-demo__window{
    min-width: 0;
    max-width: 100%;
  }

  [data-sp-embed] #create .create-hero__shot{
    max-width: 100%;
    height: auto;
  }

  /* Management: 切れ線なし。カード幅と左右オフセットを抑えてビューポート内に収める */
  [data-sp-embed] #management .showcase-capabilities.analysis-capabilities, [data-sp-embed] #management .showcase--analysis-full > .showcase-capabilities{
    overflow: visible !important;
    overflow-x: visible !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel{
    overflow: visible !important;
    width: 100%;
    max-width: 100%;
    --mgmt-card-w: min(76vw, 24rem);
    --mgmt-side-x: 11%;
    --mgmt-side-scale: 0.86;
    padding-inline: clamp(0.35rem, 1.5vw, 0.85rem);
    box-sizing: border-box;
  }

  [data-sp-embed] .ai-insight-card, [data-sp-embed] .ai-insight-card__preview, [data-sp-embed] .ai-insight-card__body, [data-sp-embed] .feature-nav-wrap, [data-sp-embed] .feature-nav-group, [data-sp-embed] .feature-nav, [data-sp-embed] .feature-nav-card{
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  /* iPad: create hero is stacked (copy above image); demo stays two-column */
  [data-sp-embed] #create .create-hero{
    grid-template-columns: 1fr !important;
  }

  [data-sp-embed] #create .create-demo__body{
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr) !important;
  }
}

@media (max-width: 767px) {
  [data-sp-embed] #create .create-hero{
    grid-template-columns: 1fr !important;
  }

  [data-sp-embed] #create .create-demo__body{
    grid-template-columns: 1fr !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel{
    --mgmt-card-w: min(78vw, 22rem);
    --mgmt-side-x: 10%;
    --mgmt-side-scale: 0.86;
    overflow: visible !important;
  }

  [data-sp-embed] .cms-create__spark{
    display: none;
  }
}


/* Easy (mobile/iPad): force copy center — override left-align rules */
@media (max-width: 1024px) {
  [data-sp-embed] #nocode-platform .cms-pitch__copy, [data-sp-embed] #nocode-platform .showcase-copy{
    align-items: center !important;
    justify-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
  }

  [data-sp-embed] #nocode-platform .cms-pitch__copy .eyebrow, [data-sp-embed] #nocode-platform .cms-pitch__wordmark, [data-sp-embed] #nocode-platform .platform-wordmark, [data-sp-embed] #nocode-platform .platform-stage__tagline, [data-sp-embed] #nocode-platform .showcase-copy .platform-stage__tagline, [data-sp-embed] #nocode-platform .platform-stage__tagline [data-stage-subtitle]{
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: auto;
    max-width: 100%;
  }

  [data-sp-embed] #nocode-platform .platform-stage__tagline [data-stage-subtitle]{
    display: block;
  }
}

/* Mobile / iPad: slightly smaller section subtitles only
   (does not touch #hero title text or corner float images) */
@media (max-width: 1024px) {
  [data-sp-embed] #nocode-platform .platform-stage__tagline, [data-sp-embed] #ai-platform .platform-stage__tagline, [data-sp-embed] .cms-pitch .platform-stage__tagline, [data-sp-embed] .cdp-stage .platform-stage__tagline{
    font-size: clamp(1.15rem, 3.6vw, 1.55rem) !important;
    line-height: 1.4 !important;
  }

  [data-sp-embed] #create .create-hero__copy .showcase-subtitle, [data-sp-embed] #analysis .showcase-copy .showcase-subtitle, [data-sp-embed] #management .showcase-copy .showcase-subtitle, [data-sp-embed] #ai-platform .showcase-copy .showcase-subtitle, [data-sp-embed] #showcases .showcase-copy .showcase-subtitle{
    font-size: clamp(0.98rem, 2.4vw + 0.35rem, 1.25rem) !important;
    line-height: 1.45 !important;
  }

  [data-sp-embed] .feature-index__lead, [data-sp-embed] .industries__lead, [data-sp-embed] .value-flow__lead, [data-sp-embed] #contact .contact__lead, [data-sp-embed] #contact p:not(.section-label){
    font-size: clamp(0.92rem, 1.8vw + 0.45rem, 1.05rem) !important;
    line-height: 1.65 !important;
  }

  [data-sp-embed] #create .showcase-copy .showcase-lead, [data-sp-embed] #analysis .showcase-copy .showcase-lead, [data-sp-embed] #management .showcase-copy .showcase-lead, [data-sp-embed] .platform-stage__copy .hero-subtitle{
    font-size: clamp(0.92rem, 2vw + 0.4rem, 1.08rem) !important;
  }
}

/*
  Use Cases: show full mock images on PC / iPad / mobile.
  Images are 1536×1024 (3:2). cover + 16:9/16:10 was cropping top/bottom.
*/
[data-sp-embed] #use-cases .industry-grid--cases .feature-card__visual{
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

[data-sp-embed] #use-cases .industry-grid--cases .feature-card__visual img{
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
  transform-origin: center center !important;
}

[data-sp-embed] #use-cases .industry-grid--cases .feature-card:hover .feature-card__visual img{
  transform: none !important;
}

/* Mobile only: keep title + tags, hide body copy on create/analysis cards */
@media (max-width: 760px) {
  [data-sp-embed] #create .ai-insight-card--hero-split .hero-split-copy > p, [data-sp-embed] #create .ai-insight-card--hero-split .ai-insight-card__body > p, [data-sp-embed] #analysis .ai-insight-card--hero-split .hero-split-copy > p, [data-sp-embed] #analysis .ai-insight-card--hero-split .ai-insight-card__body > p{
    display: none !important;
  }

  [data-sp-embed] #create .ai-insight-card--hero-split .ai-insight-card__body, [data-sp-embed] #analysis .ai-insight-card--hero-split .ai-insight-card__body{
    padding-top: 0.55rem !important;
  }

  [data-sp-embed] #create .ai-insight-card--hero-split .ai-insight-tags--story, [data-sp-embed] #analysis .ai-insight-card--hero-split .ai-insight-tags--story{
    margin-top: 0 !important;
  }
}

/*
  Mobile: unify feature-card tag chip size
  (機能一覧 + Create / Analysis / Management 内カード)
*/
@media (max-width: 760px) {
  [data-sp-embed] .feature-nav-card__tags{
    gap: 0.35rem;
  }

  [data-sp-embed] .feature-nav-card__tags li{
    font-size: 0.72rem !important;
    line-height: 1.25 !important;
    padding: 0.28rem 0.55rem !important;
    min-height: 1.55rem;
    box-sizing: border-box;
  }

  [data-sp-embed] #create .ai-insight-tags--story, [data-sp-embed] #analysis .ai-insight-tags--story, [data-sp-embed] #management .ai-insight-tags--story, [data-sp-embed] #create .create-demo__story .ai-insight-tags--story, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-tags--story, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.ai-insights-bento--marquee .ai-insight-tags--story{
    gap: 0.35rem !important;
  }

  [data-sp-embed] #create .ai-insight-tag, [data-sp-embed] #analysis .ai-insight-tag, [data-sp-embed] #management .ai-insight-tag, [data-sp-embed] #create .create-demo__story .ai-insight-tag, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-tag, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.ai-insights-bento--marquee .ai-insight-tag{
    font-size: 0.72rem !important;
    line-height: 1.25 !important;
    padding: 0.28rem 0.55rem !important;
    min-height: 1.55rem;
    box-sizing: border-box;
  }

  [data-sp-embed] #create .ai-insight-tag__icon, [data-sp-embed] #analysis .ai-insight-tag__icon, [data-sp-embed] #management .ai-insight-tag__icon, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-tag__icon{
    font-size: 0.95em !important;
  }
}

/* ===== Easy section: prevent wordmark / laptop overlap ===== */
@media (min-width: 1025px) {
  [data-sp-embed] #nocode-platform .cms-pitch__inner{
    grid-template-columns: minmax(14rem, 1.05fr) minmax(0, 1.15fr) !important;
    gap: clamp(2.75rem, 5.5vw, 5rem) !important;
    align-items: center;
  }

  [data-sp-embed] #nocode-platform .cms-pitch__copy, [data-sp-embed] #nocode-platform .showcase-copy{
    position: relative;
    z-index: 2;
    min-width: 0;
    max-width: 100%;
    padding-right: clamp(0.75rem, 1.5vw, 1.5rem);
    box-sizing: border-box;
  }

  [data-sp-embed] #nocode-platform .platform-wordmark{
    font-size: clamp(3.75rem, 6.5vw + 0.5rem, 7.25rem) !important;
    max-width: 100%;
    overflow-wrap: normal;
  }

  [data-sp-embed] #nocode-platform .platform-stage__tagline, [data-sp-embed] #nocode-platform .showcase-copy .platform-stage__tagline{
    max-width: 100%;
    font-size: clamp(1.35rem, 1.8vw + 0.55rem, 2.15rem) !important;
  }

  [data-sp-embed] #nocode-platform .cms-pitch__visual{
    position: relative;
    z-index: 1;
    min-width: 0;
    justify-content: flex-end;
  }

  [data-sp-embed] #nocode-platform .cms-pitch__visual-stage--laptop{
    width: 100% !important;
    max-width: min(100%, 34rem) !important;
    margin-left: auto !important;
    margin-right: 0 !important;
  }
}

/* Mid desktop: stack a bit earlier if still tight */
@media (min-width: 1025px) and (max-width: 1180px) {
  [data-sp-embed] #nocode-platform .cms-pitch__inner{
    grid-template-columns: minmax(12rem, 1.1fr) minmax(0, 1fr) !important;
    gap: clamp(2rem, 4vw, 3.25rem) !important;
  }

  [data-sp-embed] #nocode-platform .cms-pitch__visual-stage--laptop{
    max-width: min(100%, 30rem) !important;
  }

  [data-sp-embed] #nocode-platform .platform-wordmark{
    font-size: clamp(3.25rem, 5.8vw + 0.4rem, 5.75rem) !important;
  }
}

/* ===== Top floats: clear fixed public header on ALL viewports ===== */
[data-sp-embed] .hero--cms-story{
  --cms-hero-header-clear: calc(
    var(--sp-public-header-offset, 4.5rem) + env(safe-area-inset-top, 0px) + 1.15rem
  );
  --cms-hero-float-top: var(--cms-hero-header-clear);
}


/* iOS「視覚効果を減らす」/ prefers-reduced-motion は無視する。
   止めると SNSログイン・OIDC図・CASE などが初期位置のまま崩れる。
   （runtime.js の reduceMotion = false と揃える） */




/* ===== Management mobile/iPad: force marquee, kill coverflow stack bug ===== */
@media (max-width: 1279px) {
  [data-sp-embed] #management .showcase-capabilities.analysis-capabilities, [data-sp-embed] #management .showcase--analysis-full > .showcase-capabilities{
    overflow: hidden !important;
    overflow-x: hidden !important;
  }

  [data-sp-embed] #management .ai-insight-marquee{
    width: calc(100% + (2 * var(--showcase-pad-inline, 1rem))) !important;
    max-width: none !important;
    margin-inline: calc(-1 * var(--showcase-pad-inline, 1rem)) !important;
    padding-block: clamp(0.85rem, 2.5vw, 1.5rem) !important;
    overflow: hidden !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.is-mgmt-marquee, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.ai-insights-bento--marquee{
    position: relative !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
    width: max-content !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    perspective: none !important;
    overflow: visible !important;
    cursor: grab;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card[data-mgmt-pos], [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card[data-mgmt-pos="0"], [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card[data-mgmt-pos="1"], [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card[data-mgmt-pos="2"], [data-sp-embed].js #showcases #management .reveal.visible .ai-insights-bento--mgmt-carousel > .ai-insight-card[data-mgmt-pos="0"], [data-sp-embed].js #showcases #management .reveal.visible .ai-insights-bento--mgmt-carousel > .ai-insight-card[data-mgmt-pos="1"], [data-sp-embed].js #showcases #management .reveal.visible .ai-insights-bento--mgmt-carousel > .ai-insight-card[data-mgmt-pos="2"]{
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
    z-index: auto !important;
    pointer-events: auto !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 min(86vw, 22rem) !important;
    width: min(86vw, 22rem) !important;
    max-width: min(86vw, 22rem) !important;
    min-width: min(86vw, 22rem) !important;
    min-height: 0 !important;
    margin: 0 !important;
    grid-template-columns: none !important;
    grid-template-areas: none !important;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.8) inset,
      0 10px 28px rgba(0, 0, 0, 0.06),
      0 18px 40px rgba(15, 23, 42, 0.1) !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card::after{
    display: none !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-card__media-label, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel .hero-split-title{
    order: 1;
    padding: 0.7rem 0.85rem 0.55rem !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-card__preview, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel .hero-split-media{
    order: 2;
    width: 100% !important;
    border-right: none !important;
    border-left: none !important;
    padding: 8px 8px 10px !important;
    height: auto !important;
    min-height: 0 !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-card__preview img{
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-card__body, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel .hero-split-copy{
    order: 3;
    display: flex !important;
    flex-direction: column !important;
    padding: 0.55rem 0.75rem 0.8rem !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-card__body > p{
    display: none !important;
  }
}




@media (min-width: 1101px) {
  [data-sp-embed] .hero--cms-story{
    --cms-float-edge: max(1rem, env(safe-area-inset-left, 0px));
    --cms-float-w: clamp(260px, 24vw, 400px);
    --cms-float-w-campaign: clamp(190px, 18vw, 300px);
  }

  [data-sp-embed] .hero--cms-story .hero-float--ig{
    top: clamp(5.5rem, 11vh, 8rem) !important;
    bottom: auto !important;
  }

  [data-sp-embed] .hero--cms-story .hero-float--line{
    top: clamp(6.25rem, 13vh, 9rem) !important;
    bottom: auto !important;
  }

  [data-sp-embed] .hero--cms-story .hero-float--fb, [data-sp-embed] .hero--cms-story .hero-float--campaign{
    top: auto !important;
    bottom: clamp(3rem, 7vh, 5.5rem) !important;
  }
}


/* =============================================================================
   SAKINA CMS ヒーロー — タイトル周りフロート（PC版 1101px以上）

   ■ 写真4枚の名前
     ig       … Instagram（左上）
     line     … LINE（右上）
     fb       … Facebook（左下）
     campaign … キャンペーン（右下・女の人）

   ■ 主な変数
     --cms-pc-center        … 中央テキストエリアの幅
     --cms-float-edge       … 画像の左端/右端からの距離
     --cms-float-w          … 左上・右上の幅
     --cms-float-w-campaign … 左下・右下（下段ペア）の幅
     --cms-orbit-r          … 画像の角丸

   ■ ブレイクポイント
     15708行 … PC基本（1101px以上）
     15802行 … PCタブ縮小（1101〜1366px）
     16106行 … 狭いPC縮小（1025〜1100px・タブレット帯は対象外）
     15815行 … 大画面（1400px以上）
     15825行 … 超大画面（1680px以上）
     15850行 … 1900px以上（1680の構図を拡大して固定）
   ============================================================================= */
@media (min-width: 1101px) {
  [data-sp-embed] .hero--cms-story{
    --cms-hero-title-gap: clamp(16.5rem, 24vh, 21rem);
    /* 上段フロート: タイトル開始位置からの縦オフセット（大きく = 下へ / マイナス大きく = 上へ） */
    --cms-ig-y: -6rem;
    --cms-line-y: -5rem;
    --cms-pc-center: min(24rem, 36vw);
    --cms-float-edge: clamp(1.75rem, 3.2vw, 4.25rem);
    --cms-float-gutter-fit: calc(
      50% - (var(--cms-pc-center) / 2) - var(--cms-float-edge) - 0.45rem
    );
    --cms-float-w: min(36vw, 620px, var(--cms-float-gutter-fit));
    --cms-float-w-campaign: min(32vw, 540px);
    --cms-orbit-r: 6px;
    overflow: hidden !important;
    justify-content: flex-start;
  }

  [data-sp-embed] .hero--cms-story .hero-center{
    width: var(--cms-pc-center) !important;
    max-width: var(--cms-pc-center) !important;
    z-index: 6 !important;
  }

  [data-sp-embed] .hero--cms-story .hero-float--ig{
    left: var(--cms-float-edge) !important;
    right: auto !important;
    width: var(--cms-float-w) !important;
    max-width: none !important;
  }

  /* BL: match BR (campaign) scale on the bottom row */
  [data-sp-embed] .hero--cms-story .hero-float--fb{
    left: var(--cms-float-edge) !important;
    right: auto !important;
    width: var(--cms-float-w-campaign) !important;
    max-width: none !important;
  }

  [data-sp-embed] .hero--cms-story .hero-float--line{
    right: var(--cms-float-edge) !important;
    left: auto !important;
    width: calc(var(--cms-float-w) * 0.93) !important;
    max-width: none !important;
  }

  [data-sp-embed] .hero--cms-story .hero-float--campaign{
    right: var(--cms-float-edge) !important;
    left: auto !important;
    width: var(--cms-float-w-campaign) !important;
    max-width: none !important;
  }

  /* TL / TR: title-gap と連動（--cms-hero-title-gap を広げると一緒に下がる） */
  [data-sp-embed] .hero--cms-story .hero-float--ig{
    top: calc(
      var(--sp-public-header-offset, 4.5rem) + env(safe-area-inset-top, 0px) + var(--cms-hero-title-gap) + var(--cms-ig-y)
    ) !important;
    bottom: auto !important;
  }

  [data-sp-embed] .hero--cms-story .hero-float--line{
    top: calc(
      var(--sp-public-header-offset, 4.5rem) + env(safe-area-inset-top, 0px) + var(--cms-hero-title-gap) + var(--cms-line-y)
    ) !important;
    bottom: auto !important;
  }

  /* BL / BR: same bottom row — matched scale and vertical position */
  [data-sp-embed] .hero--cms-story .hero-float--fb, [data-sp-embed] .hero--cms-story .hero-float--campaign{
    top: auto !important;
    bottom: clamp(3rem, 7vh, 5.5rem) !important;
  }
}

/* PC tab shrink (~13–14" window): keep inward layout, slightly tighter */
@media (min-width: 1101px) and (max-width: 1366px) {
  [data-sp-embed] .hero--cms-story{
    --cms-pc-center: min(22.5rem, 34vw);
    --cms-float-edge: clamp(1.1rem, 2.2vw, 2.5rem);
    --cms-float-w: min(34vw, 520px, var(--cms-float-gutter-fit));
    --cms-float-w-campaign: min(31vw, 480px);
    --cms-orbit-r: 4px;
    /* ウィンドウ縮小時: PC大画面と同じ余白基準 */
    --cms-hero-title-gap: clamp(10rem, 15vh, 12rem);
    justify-content: flex-start;
  }
}

@media (min-width: 1400px) {
  [data-sp-embed] .hero--cms-story{
    --cms-hero-title-gap: clamp(14rem, 20vh, 16rem);
    --cms-pc-center: min(25.5rem, 32vw);
    --cms-float-edge: clamp(2rem, 4vw, 5.5rem);
    --cms-float-w: min(34vw, 640px, var(--cms-float-gutter-fit));
    --cms-float-w-campaign: min(31vw, 580px);
  }
}

@media (min-width: 1680px) {
  [data-sp-embed] .hero--cms-story{
    --cms-hero-title-gap: clamp(16rem, 24vh, 20rem);
    --cms-pc-center: min(27rem, 28vw);
    --cms-float-edge: clamp(2.75rem, 5.5vw, 7rem);
    --cms-float-w: min(32vw, 680px, var(--cms-float-gutter-fit));
    --cms-float-w-campaign: min(30vw, 620px);
  }
}

/* 1900px以上: 1680の構図を一段大きくして、それ以降は画面幅で伸びない */
@media (min-width: 1900px) {
  [data-sp-embed] .hero--cms-story{
    --cms-hero-title-gap: 12rem;
    --cms-pc-center: 32rem;
    --cms-float-edge: 11rem;
    --cms-float-w: 500px;
    --cms-float-w-campaign: 600px;
    --cms-ig-y: -6rem;
    --cms-line-y: -5rem;
    --cms-orbit-r: 8px;
  }

  [data-sp-embed] .hero--cms-story .hero-brand-wordmark__full{
    font-size: 3rem !important;
  }

  [data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
    font-size: 4rem !important;
  }

  [data-sp-embed] .hero--cms-story .hero-float--fb, [data-sp-embed] .hero--cms-story .hero-float--campaign{
    bottom: 5.5rem !important;
  }

  [data-sp-embed] #use-cases .industries__lead, [data-sp-embed] .band-industries .industries__lead{
    font-size: 1.55rem !important;
    line-height: 1.65 !important;
    max-width: 52rem;
    font-weight: 500;
  }
}


/* ===== Management: narrow = edge marquee; wide = static 3-col ===== */
[data-sp-embed] #management{
  overflow-x: clip;
}

/* Shared card chrome (grid + marquee): title → image → tags */
[data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card::after{
  display: none !important;
}

[data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-card__media-label, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel .hero-split-title{
  order: 1;
  padding: 0.75rem 0.95rem 0.55rem !important;
}

[data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-card__preview, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel .hero-split-media{
  order: 2;
  width: 100% !important;
  border-right: none !important;
  border-left: none !important;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

[data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-card__preview img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

[data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-card__body, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel .hero-split-copy{
  order: 3;
  padding: 0.75rem 0.95rem 1rem !important;
}

[data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-card__body > p{
  display: none !important;
}

@media (max-width: 1279px) {
  [data-sp-embed] #management .showcase--analysis-full > .showcase-capabilities.analysis-capabilities{
    width: 100% !important;
    max-width: none !important;
    overflow: visible !important;
    overflow-x: visible !important;
    padding-inline: 0 !important;
  }

  [data-sp-embed] #management .ai-insight-marquee{
    --insight-band-pad-inline: 0px;
    --insight-edge-fade: clamp(0.75rem, 2.5vw, 1.75rem);
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-block: clamp(1.25rem, 3vw, 2.5rem) !important;
    padding-inline: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.is-mgmt-marquee, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.ai-insights-bento--marquee{
    position: relative !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: clamp(0.85rem, 1.6vw, 1.35rem) !important;
    width: max-content !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    perspective: none !important;
    overflow: visible !important;
    cursor: grab;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card[data-mgmt-pos], [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.ai-insights-bento--marquee > .ai-insight-card, [data-sp-embed].js #showcases #management .reveal.visible .ai-insights-bento--mgmt-carousel > .ai-insight-card[data-mgmt-pos="0"], [data-sp-embed].js #showcases #management .reveal.visible .ai-insights-bento--mgmt-carousel > .ai-insight-card[data-mgmt-pos="1"], [data-sp-embed].js #showcases #management .reveal.visible .ai-insights-bento--mgmt-carousel > .ai-insight-card[data-mgmt-pos="2"]{
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
    z-index: auto !important;
    pointer-events: auto !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 clamp(18rem, 42vw, 28rem) !important;
    width: clamp(18rem, 42vw, 28rem) !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    grid-template-columns: none !important;
    grid-template-areas: none !important;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.8) inset,
      0 10px 28px rgba(0, 0, 0, 0.06),
      0 18px 40px rgba(15, 23, 42, 0.1) !important;
    transition: none !important;
    will-change: auto !important;
    touch-action: pan-y !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card:hover{
    transform: none !important;
  }

  @media (max-width: 767px) {
    [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.ai-insights-bento--marquee > .ai-insight-card{
      flex: 0 0 min(86vw, 22rem) !important;
      width: min(86vw, 22rem) !important;
    }
  }
}

@media (max-width: 1279px) {
  [data-sp-embed] #management .ai-insight-marquee.is-native-scroll{
    overflow-x: scroll !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1rem;
    overscroll-behavior-x: contain;
    touch-action: auto !important;
    cursor: grab;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    scrollbar-width: none;
    padding-inline: 1rem !important;
  }

  [data-sp-embed] #management .ai-insight-marquee.is-native-scroll::-webkit-scrollbar{
    display: none;
    height: 0;
  }

  [data-sp-embed] #management .ai-insight-marquee.is-native-scroll, [data-sp-embed] #management .ai-insight-marquee.is-native-scroll .ai-insight-card, [data-sp-embed] #management .ai-insight-marquee.is-native-scroll .ai-insights-bento--mgmt-carousel, [data-sp-embed] #management .ai-insight-marquee.is-native-scroll .ai-insights-bento--mgmt-carousel > .ai-insight-card{
    touch-action: auto !important;
  }

  [data-sp-embed] #management .ai-insight-marquee.is-native-scroll .ai-insights-bento--mgmt-carousel, [data-sp-embed] #management .ai-insight-marquee.is-native-scroll .ai-insights-bento--mgmt-carousel.ai-insights-bento--marquee{
    transform: none !important;
    will-change: auto !important;
  }

  [data-sp-embed] #management .ai-insight-marquee.is-native-scroll .ai-insight-card{
    scroll-snap-align: start;
    scroll-snap-stop: always;
    contain: none !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.ai-insights-bento--marquee{
    will-change: auto;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card{
    contain: layout paint;
    will-change: auto !important;
    transition: none !important;
  }

  [data-sp-embed] #management .ai-insight-marquee.is-native-scroll .ai-insights-bento--mgmt-carousel > .ai-insight-card{
    contain: none !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-card__preview, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel .hero-split-media{
    height: 11.5rem !important;
    min-height: 11.5rem !important;
    max-height: 11.5rem !important;
    overflow: hidden !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-card__preview img{
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: top center !important;
  }
}

@media (min-width: 1280px) {
  /* Fill the open tab harder: near full-bleed 3-up */
  [data-sp-embed] #management{
    --showcase-pad-inline: clamp(1.25rem, 2.5vw, 2.75rem);
    overflow-x: clip;
  }

  [data-sp-embed] #management .showcase--analysis-full > .showcase-capabilities.analysis-capabilities{
    width: 100% !important;
    max-width: none !important;
    overflow: visible !important;
    padding-inline: 0 !important;
  }

  [data-sp-embed] #management .ai-insight-marquee{
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    padding-block: clamp(0.85rem, 1.6vw, 1.35rem) !important;
    padding-inline: 0 !important;
    overflow: visible !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.is-mgmt-marquee, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel:not(.ai-insights-bento--marquee){
    position: relative !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: clamp(0.75rem, 1.2vw, 1.25rem) !important;
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: clamp(0.75rem, 1.2vw, 1.15rem) !important;
    padding-inline: 0 !important;
    padding-block: 0 !important;
    box-sizing: border-box !important;
    min-height: 0 !important;
    height: auto !important;
    perspective: none !important;
    overflow: visible !important;
    cursor: default !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card[data-mgmt-pos], [data-sp-embed].js #showcases #management .reveal.visible .ai-insights-bento--mgmt-carousel > .ai-insight-card[data-mgmt-pos="0"], [data-sp-embed].js #showcases #management .reveal.visible .ai-insights-bento--mgmt-carousel > .ai-insight-card[data-mgmt-pos="1"], [data-sp-embed].js #showcases #management .reveal.visible .ai-insights-bento--mgmt-carousel > .ai-insight-card[data-mgmt-pos="2"]{
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
    z-index: auto !important;
    pointer-events: auto !important;
    display: flex !important;
    flex-direction: column !important;
    flex: unset !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    grid-column: auto !important;
    grid-template-columns: none !important;
    grid-template-areas: none !important;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.8) inset,
      0 10px 28px rgba(0, 0, 0, 0.06),
      0 18px 40px rgba(15, 23, 42, 0.1) !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card{
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card:hover{
    transform: translateY(-8px) !important;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.8) inset,
      0 20px 50px rgba(15, 23, 42, 0.13),
      0 30px 60px rgba(15, 23, 42, 0.1) !important;
  }

  /* Landscape screenshots: keep native wide ratio, no crop */
  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-card__media-label, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel .hero-split-title{
    padding: clamp(0.9rem, 1.15vw, 1.15rem) clamp(1rem, 1.25vw, 1.25rem) 0.7rem !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-card__media-label h3{
    font-size: clamp(1.18rem, 1.05rem + 0.32vw, 1.42rem) !important;
    line-height: 1.3 !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-card__preview, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel .hero-split-media{
    aspect-ratio: auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding: clamp(6px, 0.7vw, 10px) !important;
    background: #f5f5f7 !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-card__preview img, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card .ai-insight-card__preview img{
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: top center !important;
    display: block !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-card__body, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel .hero-split-copy{
    padding: clamp(0.75rem, 1vw, 1rem) clamp(1rem, 1.25vw, 1.25rem) clamp(1rem, 1.25vw, 1.25rem) !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-tag{
    font-size: clamp(0.8rem, 0.72rem + 0.22vw, 0.95rem) !important;
    padding: 0.34rem 0.66rem !important;
  }
}


/* =============================================================================
   SAKINA CMS ヒーロー — PCウィンドウ縮小（1025〜1100px）
   1101px未満まで縮めた時用（タブレット≤1024は触らない）。

   ■ ここだけ数字を書き換える（下の当てはめブロックは触らなくてOK）
     ig / line / fb / campaign それぞれ:
       --cms-{写真}-x … 横（左端 or 右端からの距離）大きく = 端から離れる
       --cms-{写真}-y … 縦
         上2枚（ig, line）: 大きく = 下へ / マイナス大きく = 上へ
         下2枚（fb, campaign）: 大きく = 下から離れる（上へ）/ 小さく = 下に寄る
       --cms-{写真}-w … 大きさ（幅）
   ============================================================================= */
@media (min-width: 1025px) and (max-width: 1100px) {
  [data-sp-embed] .hero--cms-story{
    --cms-pc-center: min(15.5rem, 30vw);
    /* 小さく = タイトルが上へ */
    --cms-hero-title-gap: 10rem;

    /* --- Instagram（左上）--- */
    --cms-ig-x: clamp(0.35rem, 1vw, 0.75rem);
    --cms-ig-y: -4.5rem;
    --cms-ig-w: min(45vw, 450px);

    /* --- LINE（右上）--- */
    --cms-line-x: clamp(0.35rem, 1vw, 0.75rem);
    --cms-line-y: -3.75rem;
    --cms-line-w: min(45vw, 450px);

    /* --- Facebook（左下）--- */
    --cms-fb-x: clamp(0.35rem, 1vw, 0.75rem);
    --cms-fb-y: clamp(2.75rem, 6vh, 4.75rem);
    --cms-fb-w: min(45vw, 450px);

    /* --- キャンペーン（右下）--- */
    --cms-campaign-x: clamp(0.35rem, 1vw, 0.75rem);
    --cms-campaign-y: clamp(2.75rem, 6vh, 4.75rem);
    --cms-campaign-w: min(45vw, 450px);

    overflow: hidden !important;
    justify-content: flex-start;
  }

  [data-sp-embed] .hero--cms-story .hero-center{
    width: var(--cms-pc-center) !important;
    max-width: var(--cms-pc-center) !important;
    z-index: 8 !important;
    margin-top: 0.5rem !important;
  }

  /* Instagram（左上） */
  [data-sp-embed] .hero--cms-story .hero-float--ig{
    left: var(--cms-ig-x) !important;
    right: auto !important;
    width: var(--cms-ig-w) !important;
    max-width: none !important;
    top: calc(
      var(--sp-public-header-offset, 4.5rem) + env(safe-area-inset-top, 0px) + var(--cms-hero-title-gap) + var(--cms-ig-y)
    ) !important;
    bottom: auto !important;
  }

  /* LINE（右上） */
  [data-sp-embed] .hero--cms-story .hero-float--line{
    right: var(--cms-line-x) !important;
    left: auto !important;
    width: var(--cms-line-w) !important;
    max-width: none !important;
    top: calc(
      var(--sp-public-header-offset, 4.5rem) + env(safe-area-inset-top, 0px) + var(--cms-hero-title-gap) + var(--cms-line-y)
    ) !important;
    bottom: auto !important;
  }

  /* Facebook（左下） */
  [data-sp-embed] .hero--cms-story .hero-float--fb{
    left: var(--cms-fb-x) !important;
    right: auto !important;
    width: var(--cms-fb-w) !important;
    max-width: none !important;
    top: auto !important;
    bottom: var(--cms-fb-y) !important;
  }

  /* キャンペーン（右下） */
  [data-sp-embed] .hero--cms-story .hero-float--campaign{
    right: var(--cms-campaign-x) !important;
    left: auto !important;
    width: var(--cms-campaign-w) !important;
    max-width: none !important;
    top: auto !important;
    bottom: var(--cms-campaign-y) !important;
  }
}


/* EN / TH: CMS hero — same center axis as the title (logo, headline, buttons) */
[data-sp-embed][lang="en"] .hero--cms-story .hero-center, [data-sp-embed][lang="th"] .hero--cms-story .hero-center{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-inline: auto;
}

[data-sp-embed][lang="en"] .hero--cms-story .hero-brand-logo, [data-sp-embed][lang="th"] .hero--cms-story .hero-brand-logo, [data-sp-embed][lang="en"] .hero--cms-story .hero-brand-wordmark, [data-sp-embed][lang="th"] .hero--cms-story .hero-brand-wordmark{
  margin-inline: auto;
  text-align: center;
}

[data-sp-embed][lang="en"] .hero--cms-story .hero-center, [data-sp-embed][lang="th"] .hero--cms-story .hero-center{
  overflow-x: visible;
}

[data-sp-embed][lang="en"] .hero--cms-story .hero-title-float, [data-sp-embed][lang="en"] .hero--cms-story .hero-title-float:first-child, [data-sp-embed][lang="th"] .hero--cms-story .hero-title-float, [data-sp-embed][lang="th"] .hero--cms-story .hero-title-float:first-child{
  display: block;
  width: max-content;
  max-width: none;
  margin-inline: auto;
  white-space: nowrap;
  text-align: center;
  overflow-wrap: normal;
}

[data-sp-embed][lang="en"] .hero--cms-story .hero-center .hero-copy, [data-sp-embed][lang="th"] .hero--cms-story .hero-center .hero-copy{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  text-align: center;
}

[data-sp-embed][lang="en"] .hero--cms-story .hero-center .hero-copy h1, [data-sp-embed][lang="th"] .hero--cms-story .hero-center .hero-copy h1{
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: center;
  width: max-content !important;
  max-width: none !important;
  min-width: max-content;
  margin-inline: auto;
  text-align: center;
  letter-spacing: 0;
}

/* 英語・タイ語タイトル：SAKINA CMS / ボタンと同じ画面中央軸。狭いカラム幅には縛らない */
[data-sp-embed][lang="en"] .hero--cms-story .hero-copy h1 .hero-title-float, [data-sp-embed][lang="th"] .hero--cms-story .hero-copy h1 .hero-title-float{
  position: relative;
  left: 0;
  width: max-content;
  max-width: none;
  margin-inline: auto;
  text-align: center;
}

[data-sp-embed][lang="en"] .hero--cms-story .hero-center .hero-actions, [data-sp-embed][lang="th"] .hero--cms-story .hero-center .hero-actions{
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  align-items: center;
  justify-content: center;
}

[data-sp-embed][lang="en"] .hero--cms-story .hero-center .hero-actions__pair, [data-sp-embed][lang="th"] .hero--cms-story .hero-center .hero-actions__pair{
  width: auto;
  max-width: 100%;
  margin-inline: auto;
  justify-content: center;
}

[data-sp-embed][lang="en"] .hero--cms-story .hero-center .hero-actions .button, [data-sp-embed][lang="th"] .hero--cms-story .hero-center .hero-actions .button{
  justify-content: center;
}


/* ===== Hero CTAs: more air under title, slow fade-in =====
   Button / wordmark sizes: keep PC & iPad base sizes; shrink only on mobile. */
[data-sp-embed] .hero--cms-story .hero-brand-logo--above-title{
  margin-bottom: clamp(1.75rem, 3.2vw, 2.75rem) !important;
}

[data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
  gap: 0.42em !important;
  line-height: 1.28 !important;
}

[data-sp-embed] .hero--cms-story .hero-center .hero-actions{
  margin-top: clamp(2.85rem, 5vw, 4rem) !important;
  gap: clamp(0.55rem, 1.1vw, 0.85rem) !important;
  flex-direction: column;
  align-items: center;
  width: auto;
  max-width: 100%;
}

[data-sp-embed] .hero--cms-story .hero-center .hero-actions__pair{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: inherit;
  justify-content: center;
  align-items: stretch;
  width: 100%;
}

[data-sp-embed].js .hero--cms-story .hero-center.reveal:not(.visible) .hero-actions.growth-fade--hero-cta{
  opacity: 1;
  transform: none;
  filter: none;
}

[data-sp-embed].js .hero--cms-story .hero-center.reveal:not(.visible) .hero-actions.growth-fade--hero-cta .hero-cta-btn{
  opacity: 0;
  transform: translateY(0.85rem);
  filter: blur(6px);
}

[data-sp-embed].js .hero--cms-story .hero-center.reveal.visible .hero-actions.growth-fade--hero-cta{
  animation: none;
  opacity: 1;
  transform: none;
  filter: none;
}

[data-sp-embed].js .hero--cms-story .hero-center.reveal.visible .hero-actions.growth-fade--hero-cta .hero-cta-btn{
  animation: hero-cta-fade-in 1.45s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--d, 980ms) + var(--cta-d, 0ms));
}

[data-sp-embed].js .hero--cms-story .hero-center.reveal.visible .hero-actions.growth-fade--hero-cta .button.secondary.button--glow{
  animation:
    hero-cta-fade-in 1.45s cubic-bezier(0.22, 1, 0.36, 1) both,
    button-glow-pulse 2.4s ease-in-out 2.4s infinite;
  animation-delay:
    calc(var(--d, 980ms) + var(--cta-d, 0ms)),
    calc(var(--d, 980ms) + var(--cta-d, 0ms) + 1.45s);
}

@keyframes hero-cta-fade-in {
  from {
    opacity: 0;
    transform: translateY(0.85rem);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* Mobile only: smaller button text + tighter inner padding */
@media (max-width: 767px) {
  [data-sp-embed] .hero--cms-story .hero-brand-logo--above-title{
    margin-bottom: clamp(1.1rem, 2.8vh, 1.55rem) !important;
  }

  [data-sp-embed] .hero--cms-story .hero-brand-logo--above-title .hero-brand-wordmark__full{
    font-size: clamp(0.95rem, 3.6vw, 1.15rem) !important;
  }

  [data-sp-embed] .hero--cms-story .hero-center .hero-actions{
    margin-top: clamp(1.35rem, 3.2vh, 1.85rem) !important;
    flex-direction: column !important;
    gap: 0.4rem !important;
    width: min(100%, 11.75rem) !important;
    margin-inline: auto !important;
  }

  [data-sp-embed] .hero--cms-story .hero-center .hero-actions__pair{
    flex-direction: column !important;
    gap: 0.4rem !important;
    width: 100% !important;
  }

  [data-sp-embed] .hero--cms-story .hero-center .hero-actions .button, [data-sp-embed] .hero--cms-story .hero-center .hero-actions .button.secondary.button--glow, [data-sp-embed] .hero--cms-story .hero-center .hero-actions .button.button--dark{
    width: 100% !important;
    min-height: 1.95rem !important;
    padding: 0.28rem 0.85rem !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.01em !important;
    justify-content: center !important;
  }

  [data-sp-embed] .hero--cms-story .hero-center .hero-actions .button.secondary.button--glow{
    min-height: 2rem !important;
    padding: 0.3rem 0.95rem !important;
    font-size: 0.8rem !important;
  }
}

@media not all /* iOS Reduce Motion: keep animations */ {
  [data-sp-embed].js .hero--cms-story .hero-center.reveal.visible .hero-actions.growth-fade--hero-cta .hero-cta-btn, [data-sp-embed].js .hero--cms-story .hero-center.reveal.visible .hero-actions.growth-fade--hero-cta .button.secondary.button--glow, [data-sp-embed].js .hero--cms-story .hero-center.reveal:not(.visible) .hero-brand-logo--above-title, [data-sp-embed].js .hero--cms-story .hero-center.reveal.visible .hero-brand-logo--above-title, [data-sp-embed].js .hero--cms-story .hero-center.reveal.visible .hero-brand-logo--above-title .hero-brand-wordmark__full{
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* ===== SAKINA CMS wordmark: slow fade-in (re-enable after earlier animation:none) ===== */
[data-sp-embed].js .hero--cms-story .hero-center.reveal:not(.visible) .hero-brand-logo--above-title{
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

[data-sp-embed].js .hero--cms-story .hero-center.reveal:not(.visible) .hero-brand-logo--above-title .hero-brand-wordmark__full{
  opacity: 0;
  transform: translateY(0.75rem);
  filter: blur(6px);
}

[data-sp-embed].js .hero--cms-story .hero-center.reveal.visible .hero-brand-logo--above-title{
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

[data-sp-embed].js .hero--cms-story .hero-center.reveal.visible .hero-brand-logo--above-title .hero-brand-wordmark__full{
  animation: hero-brand-fade-in 1.5s cubic-bezier(0.22, 1, 0.36, 1) both !important;
  animation-delay: 80ms !important;
}

@keyframes hero-brand-fade-in {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}


/* ===== Hero CTAs: prevent label wrap when tab/window shrinks ===== */
[data-sp-embed] .hero--cms-story .hero-center .hero-actions .button, [data-sp-embed] .hero--cms-story .hero-center .hero-actions .button.secondary.button--glow, [data-sp-embed] .hero--cms-story .hero-center .hero-actions .button.button--dark, [data-sp-embed] .hero--cms-story .hero-center .hero-actions .hero-cta-btn{
  white-space: nowrap;
  text-wrap: nowrap;
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
}

[data-sp-embed] .hero--cms-story .hero-center .hero-actions__pair{
  width: auto;
  max-width: 100%;
  flex-wrap: nowrap;
  justify-content: center;
}

/* Medium widths: stack top pair so each label stays on one line */
@media (min-width: 768px) and (max-width: 1200px) {
  [data-sp-embed] .hero--cms-story .hero-center .hero-actions{
    width: min(100%, 15.5rem) !important;
    margin-inline: auto !important;
  }

  [data-sp-embed] .hero--cms-story .hero-center .hero-actions__pair{
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 0.5rem !important;
  }

  [data-sp-embed] .hero--cms-story .hero-center .hero-actions .button, [data-sp-embed] .hero--cms-story .hero-center .hero-actions .button.secondary.button--glow, [data-sp-embed] .hero--cms-story .hero-center .hero-actions .button.button--dark{
    width: 100% !important;
    min-height: 2.65rem !important;
    padding: 0.55rem 1.15rem !important;
    font-size: clamp(0.8rem, 0.72rem + 0.35vw, 0.92rem) !important;
    letter-spacing: 0.02em !important;
  }

  [data-sp-embed] .hero--cms-story .hero-center .hero-actions .button.secondary.button--glow{
    min-height: 2.75rem !important;
    padding: 0.58rem 1.25rem !important;
    font-size: clamp(0.82rem, 0.74rem + 0.35vw, 0.95rem) !important;
  }
}

/* EN / TH: keep PC button pair in a row (labels are shorter than JA). Stack only on phones. */
@media (min-width: 768px) {
  [data-sp-embed][lang="en"] .hero--cms-story .hero-center .hero-actions, [data-sp-embed][lang="th"] .hero--cms-story .hero-center .hero-actions{
    width: auto !important;
    max-width: 100% !important;
    flex-direction: column !important;
    align-items: center !important;
    margin-inline: auto !important;
  }

  [data-sp-embed][lang="en"] .hero--cms-story .hero-center .hero-actions__pair, [data-sp-embed][lang="th"] .hero--cms-story .hero-center .hero-actions__pair{
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: center !important;
    width: auto !important;
    max-width: 100% !important;
    gap: inherit !important;
  }

  [data-sp-embed][lang="en"] .hero--cms-story .hero-center .hero-actions .button, [data-sp-embed][lang="en"] .hero--cms-story .hero-center .hero-actions .button.secondary.button--glow, [data-sp-embed][lang="en"] .hero--cms-story .hero-center .hero-actions .button.button--dark, [data-sp-embed][lang="th"] .hero--cms-story .hero-center .hero-actions .button, [data-sp-embed][lang="th"] .hero--cms-story .hero-center .hero-actions .button.secondary.button--glow, [data-sp-embed][lang="th"] .hero--cms-story .hero-center .hero-actions .button.button--dark{
    width: auto !important;
    flex: 0 0 auto !important;
  }
}




/* =============================================================================
   SAKINA CMS ヒーロー — タイトル周りフロート（モバイル / iPad / iPhone SE）
   モバイル共通: 767px以下 / SEのみ追加調整: 375px以下
   PC（1101px以上・1025〜1100pxタブ縮小）はこのファイル上部の min-width ブロックのまま。

   ■ 写真4枚の名前
     ig       … Instagram（左上）
     line     … LINE（右上）
     fb       … Facebook（左下）
     campaign … キャンペーン（右下）

   ■ タッチ端末共通（1024px以下）
     iPad Mini / Pro / Surface Duo 等 → 16526行〜 の共通ブロック
     モバイル（767px以下）→ 16585行〜（数値は共通と同じ、SE用微調整は375px以下）

   ■ 各写真につける3つの値（下の端末別ブロックで数字だけ書き換える）
     --cms-{写真}-x … 横移動（左端/右端からの距離）
       → 数値を大きくする = 右へ移動 / 小さく or マイナス = 左へ移動
     --cms-{写真}-y … 縦移動
       → 上2枚（ig, line）: 大きく = 下へ / 小さく or マイナス = 上へ
       → 下2枚（fb, campaign）: 大きく = 下から離れる（上へ）/ 小さく = 下に寄る
     --cms-{写真}-w … 大きさ（幅）
       → clamp(最小px, 画面比率vw, 最大px) — 3つ目を大きく = 全体的に大きく
   ============================================================================= */

@media (max-width: 1024px) {
  /* 公式ヘッダーの高さ（float の「上」計算の基準） */
  [data-sp-embed] .hero--cms-story{
    --cms-hero-header-clear: calc(
      var(--sp-public-header-offset, 4.5rem) + env(safe-area-inset-top, 0px)
    );
  }

  /* 中身は端末フル画面と同じ比率のまま。Safariのバー（dvh）で潰さない。
     ヘッダー分だけ下にずらす（画像サイズ・配置・余白の比率は変えない） */
  [data-sp-embed] .hero.hero--cms-story, [data-sp-embed] .hero--cms-story, [data-sp-embed] .hero--cms-story[data-sp-embed-top]{
    min-height: calc(
      100vh + var(--sp-public-header-offset, 4.5rem) + env(safe-area-inset-top, 0px)
    ) !important;
    min-height: calc(
      100lvh + var(--sp-public-header-offset, 4.5rem) + env(safe-area-inset-top, 0px)
    ) !important;
    height: auto !important;
    max-height: none !important;
    box-sizing: border-box !important;
    padding-top: calc(
      var(--sp-public-header-offset, 4.5rem) + env(safe-area-inset-top, 0px)
    ) !important;
    padding-bottom: 0 !important;
    justify-content: center !important;
    overflow: hidden !important;
    margin-bottom: 0 !important;
  }

  [data-sp-embed] .hero--cms-story .hero-floats{
    z-index: 1 !important;
    inset: 0 !important;
  }

  [data-sp-embed] .hero--cms-story .hero-center{
    position: relative;
    z-index: 6 !important;
    isolation: isolate;
    margin-inline: auto;
    margin-top: 0 !important;
    flex-shrink: 0;
  }
}

/* 写真の位置・大きさを変数に当てはめる（1024px以下 = スマホ + iPad すべて） */
@media (max-width: 1024px) {
  [data-sp-embed] .hero--cms-story .hero-float--ig, [data-sp-embed] .hero--cms-story .hero-float--line, [data-sp-embed] .hero--cms-story .hero-float--fb, [data-sp-embed] .hero--cms-story .hero-float--campaign{
    max-width: none !important;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
  }

  /* Instagram（左上）— 下の --cms-ig-x / -y / -w を書き換える */
  [data-sp-embed] .hero--cms-story .hero-float--ig{
    top: calc(var(--cms-hero-header-clear) + var(--cms-ig-y)) !important;
    left: var(--cms-ig-x) !important;
    width: var(--cms-ig-w) !important;
  }

  /* LINE（右上）— 下の --cms-line-x / -y / -w を書き換える */
  [data-sp-embed] .hero--cms-story .hero-float--line{
    top: calc(var(--cms-hero-header-clear) + var(--cms-line-y)) !important;
    right: var(--cms-line-x) !important;
    width: var(--cms-line-w) !important;
  }

  /* Facebook（左下）— 下の --cms-fb-x / -y / -w を書き換える */
  [data-sp-embed] .hero--cms-story .hero-float--fb{
    bottom: var(--cms-fb-y) !important;
    left: var(--cms-fb-x) !important;
    width: var(--cms-fb-w) !important;
  }

  /* キャンペーン（右下）— 下の --cms-campaign-x / -y / -w を書き換える */
  [data-sp-embed] .hero--cms-story .hero-float--campaign{
    bottom: var(--cms-campaign-y) !important;
    right: var(--cms-campaign-x) !important;
    width: var(--cms-campaign-w) !important;
  }
}

/* =============================================================================
   タブレット共通（768px〜1024px）— iPad Mini / Pro / Air 等を同一レイアウトに
   ============================================================================= */
@media (min-width: 768px) and (max-width: 1024px) {
  [data-sp-embed] .hero--cms-story{
    --cms-ig-y: clamp(4.5svh, 7.5svh, 9svh);
    --cms-line-y: clamp(6svh, 9svh, 11svh);
    /* 横位置: 画面内に収める（スマホのマイナス値は端末幅が狭い時用） */
    --cms-ig-x: -2rem;
    --cms-ig-w: clamp(400px, 66vw, 310px);
    --cms-line-x: -2rem;
    --cms-line-w: clamp(400px, 66vw, 310px);
    --cms-fb-x: -2rem;
    --cms-fb-y: 6rem;
    --cms-fb-w: clamp(400px, 66vw, 310px);
    --cms-campaign-x: -2rem;
    --cms-campaign-y: 6rem;
    --cms-campaign-w: clamp(400px, 66vw, 310px);
  }

  [data-sp-embed] .hero--cms-story .hero-center{
    width: min(16.5rem, 78vw) !important;
    max-width: min(16.5rem, 78vw) !important;
  }

  [data-sp-embed] .hero--cms-story .hero-brand-logo--above-title{
    margin-bottom: clamp(0.55rem, 1.2svh, 0.9rem) !important;
  }

  [data-sp-embed] .hero--cms-story .hero-center .hero-actions{
    margin-top: clamp(0.75rem, 1.8svh, 1.15rem) !important;
    flex-direction: column !important;
    width: min(100%, 12rem) !important;
    margin-inline: auto !important;
    gap: 0.45rem !important;
  }

  [data-sp-embed] .hero--cms-story .hero-center .hero-actions .button{
    width: 100% !important;
    justify-content: center !important;
  }

  [data-sp-embed] .hero--cms-story, [data-sp-embed] .hero--cms-story[data-sp-embed-top]{
    padding-bottom: 0 !important;
  }
}

/* =============================================================================
   モバイル（767px以下）
   ============================================================================= */
@media (max-width: 767px) {
  [data-sp-embed] .hero--cms-story, [data-sp-embed] .hero--cms-story[data-sp-embed-top]{
    padding-bottom: 0 !important;
  }

  [data-sp-embed] .hero--cms-story{
    /* 上段2枚: ヘッダー下から svh で配置（中央寄せタイトルとバランス） */
    --cms-ig-y: clamp(4.5svh, 7.5svh, 9svh);
    --cms-line-y: clamp(6svh, 9svh, 11svh);
    /* --- Instagram（左上）--- */
    --cms-ig-x: -1rem;
    --cms-ig-y: 4rem;
    --cms-ig-w: clamp(228px, 66vw, 310px);

    /* --- LINE（右上）--- */
    --cms-line-x: -2rem;
    --cms-line-y: 3rem;
    --cms-line-w: clamp(228px, 66vw, 310px);

    /* --- Facebook（左下）--- */
    --cms-fb-x: -1rem;
    --cms-fb-y: 9rem;
    --cms-fb-w: clamp(228px, 66vw, 310px);

    /* --- キャンペーン（右下）--- */
    --cms-campaign-x: -1rem;
    --cms-campaign-y: 9rem;
    --cms-campaign-w: clamp(228px, 66vw, 310px);
  }

  [data-sp-embed] .hero--cms-story .hero-center{
    width: min(16.5rem, 78vw) !important;
    max-width: min(16.5rem, 78vw) !important;
    /* ヘッダー直下の余白を少し詰める */
    margin-top: -9rem !important;
  }

  [data-sp-embed] .hero--cms-story .hero-brand-logo--above-title{
    margin-bottom: clamp(0.55rem, 1.2svh, 0.9rem) !important;
  }

  [data-sp-embed] .hero--cms-story .hero-center .hero-actions{
    margin-top: clamp(0.75rem, 1.8svh, 1.15rem) !important;
    flex-direction: column !important;
    width: min(100%, 12rem) !important;
    margin-inline: auto !important;
    gap: 0.45rem !important;
  }

  [data-sp-embed] .hero--cms-story .hero-center .hero-actions .button{
    width: 100% !important;
    justify-content: center !important;
  }
}

/* =============================================================================
   iPhone SE 等（375px以下）
   767px ブロックと同じ配置のまま、幅・高さが小さい分だけ写真と余白を少し詰める
   ============================================================================= */
@media (max-width: 375px) {
  [data-sp-embed] .hero--cms-story, [data-sp-embed] .hero--cms-story[data-sp-embed-top]{
    padding-bottom: 0 !important;
  }

  [data-sp-embed] .hero--cms-story{
    /* 大きさだけ SE 向けに縮小（位置は 767px ブロックと同じ svh） */
    --cms-ig-y: clamp(3.5svh, 6svh, 7.5svh);
    --cms-line-y: clamp(5svh, 7.5svh, 9svh);
    --cms-ig-w: clamp(220px, 62vw, 262px);
    --cms-line-w: clamp(220px, 62vw, 262px);
    --cms-fb-w: clamp(220px, 62vw, 262px);
    --cms-campaign-w: clamp(200px, 58vw, 248px);
  }

  [data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
    font-size: clamp(1.55rem, 6.8vw, 1.95rem) !important;
  }
}

/* =============================================================================
   端末別の微調整（他の端末・PC・iPadには一切影響しない）
   ============================================================================= */

/* --- Galaxy Z Fold 5 カバー画面（幅344×882）---
   モバイル（767px）と同じ位置。幅だけ狭い分を少し小さく。
   ※外側画面。内側（広げた状態 ~900px）はタブレット共通ブロックが効く */
@media (min-width: 340px) and (max-width: 350px) {
  [data-sp-embed] .hero--cms-story{
    --cms-ig-x: -1.4rem;
    --cms-ig-y: 6rem;
    --cms-ig-w: clamp(220px, 68vw, 280px);

    --cms-line-x: -3rem;
    --cms-line-y: 6rem;
    --cms-line-w: clamp(220px, 68vw, 280px);

    --cms-fb-x: -1rem;
    --cms-fb-y: 6rem;
    --cms-fb-w: clamp(210px, 64vw, 270px);

    --cms-campaign-x: -3rem;
    --cms-campaign-y: 6rem;
    --cms-campaign-w: clamp(210px, 64vw, 270px);
  }

  [data-sp-embed] .hero--cms-story .hero-center{
    width: min(15.5rem, 82vw) !important;
    max-width: min(15.5rem, 82vw) !important;
  }
}

/* --- Surface Duo / 横長タッチ --- 共通ブロックと同じ（個別上書き削除） */

/* --- Nest Hub（1024×600 = 横長タッチ画面）--- 共通ブロック + max-height でカバー */

/* ===== Hero: kicker after SAKINA CMS + tighter title stack ===== */
[data-sp-embed] .hero--cms-story .hero-kicker{
  display: block !important;
  margin: 0 auto clamp(0.3rem, 0.7vw, 0.5rem) !important;
  padding: 0;
  font-family: var(--font-sans);
  font-size: clamp(0.72rem, 0.5rem + 0.45vw, 0.88rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.2;
  color: #6b7280;
  text-align: center;
  transform: none !important;
}

[data-sp-embed] .hero--cms-story .hero-brand-logo--above-title{
  margin-bottom: clamp(1.5rem, 2.8vw, 2.5rem) !important;
}

@media (max-width: 767px) {
  [data-sp-embed] .hero--cms-story .hero-brand-logo--above-title{
    margin-bottom: clamp(1.1rem, 2.8vh, 1.55rem) !important;
  }
}

[data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
  gap: 0.1em !important;
  line-height: 1.08 !important;
}

[data-sp-embed] .hero--cms-story .hero-title-float + .hero-title-float{
  margin-top: 0 !important;
}

[data-sp-embed].js .hero--cms-story .hero-center.reveal:not(.visible) .hero-kicker{
  opacity: 0;
  transform: translateY(0.5rem);
  filter: blur(4px);
}

[data-sp-embed].js .hero--cms-story .hero-center.reveal.visible .hero-kicker{
  animation: hero-brand-fade-in 1.35s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 120ms;
}

/* ===== SAKINA ID wordmark: soft blue neon + letter shadow ===== */
[data-sp-embed] .hero--cms-story .hero-brand-logo--above-title .hero-brand-wordmark__full{
  color: #171717 !important;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.82),
    0 2px 6px rgba(15, 23, 42, 0.2),
    0 6px 14px rgba(15, 23, 42, 0.1),
    0 0 10px rgba(191, 219, 254, 0.55),
    0 0 22px rgba(147, 197, 253, 0.42),
    0 0 40px rgba(96, 165, 250, 0.3),
    0 0 64px rgba(59, 130, 246, 0.18) !important;
}

[data-sp-embed].js .hero--cms-story .hero-center.reveal.visible .hero-brand-logo--above-title .hero-brand-wordmark__full{
  animation:
    hero-brand-fade-in 1.5s cubic-bezier(0.22, 1, 0.36, 1) both,
    cms-hero-wordmark-neon 3.2s ease-in-out 1.55s infinite !important;
  animation-delay: 80ms, 1.55s !important;
}

@keyframes cms-hero-wordmark-neon {
  0%,
  100% {
    text-shadow:
      0 1px 0 rgba(255, 255, 255, 0.82),
      0 2px 6px rgba(15, 23, 42, 0.2),
      0 6px 14px rgba(15, 23, 42, 0.1),
      0 0 10px rgba(191, 219, 254, 0.5),
      0 0 22px rgba(147, 197, 253, 0.38),
      0 0 38px rgba(96, 165, 250, 0.26),
      0 0 58px rgba(59, 130, 246, 0.14);
  }
  50% {
    text-shadow:
      0 1px 0 rgba(255, 255, 255, 0.88),
      0 2px 7px rgba(29, 78, 216, 0.28),
      0 7px 16px rgba(15, 23, 42, 0.12),
      0 0 14px rgba(191, 219, 254, 0.72),
      0 0 30px rgba(147, 197, 253, 0.58),
      0 0 52px rgba(96, 165, 250, 0.42),
      0 0 82px rgba(59, 130, 246, 0.28);
  }
}

/* ===== Media fade-in after decode (images + videos) ===== */
[data-sp-embed].js img.sp-media-fade:not(.is-media-ready), [data-sp-embed].js video.sp-media-fade:not(.is-media-ready){
  opacity: 0 !important;
}

[data-sp-embed].js #management img.sp-media-fade, [data-sp-embed].js #management img.sp-media-fade:not(.is-media-ready), [data-sp-embed].js #management img.sp-media-fade.is-media-ready{
  opacity: 1 !important;
  transition: none;
}

[data-sp-embed].js img.sp-media-fade.is-media-ready, [data-sp-embed].js video.sp-media-fade.is-media-ready{
  opacity: 1 !important;
  transition: opacity 0.48s ease;
}

/* Hero cards fade as a unit — keep inner media opaque */
[data-sp-embed].js .hero-float img.sp-media-fade, [data-sp-embed].js .hero-float video.sp-media-fade{
  opacity: 1 !important;
  transition: none;
}

[data-sp-embed].js .hero-float:not(.is-media-ready){
  opacity: 1 !important;
  visibility: visible !important;
}

[data-sp-embed].js .hero--cms-story .hero-float.is-media-ready.is-animating{
  visibility: visible !important;
}

[data-sp-embed].js .hero:not(.hero--cms-story) .hero-float.is-media-ready{
  opacity: 1 !important;
  visibility: visible !important;
  transition: opacity 0.48s ease;
}

@media not all /* iOS Reduce Motion: keep animations */ {
  [data-sp-embed].js img.sp-media-fade.is-media-ready, [data-sp-embed].js video.sp-media-fade.is-media-ready, [data-sp-embed].js .hero:not(.hero--cms-story) .hero-float.is-media-ready{
    transition: none !important;
  }
}

/* =============================================================================
   管理カード: 画像は常に元比率。全幅でカバーフロー（2秒交代・ホバーで停止）。
   ============================================================================= */
[data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-card__preview, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel .hero-split-media, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card .ai-insight-card__preview{
  aspect-ratio: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  overflow: hidden !important;
}

[data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-card__preview picture, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card .ai-insight-card__preview picture{
  display: block !important;
  width: 100% !important;
}

[data-sp-embed] #management .ai-insights-bento--mgmt-carousel .ai-insight-card__preview img, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel > .ai-insight-card .ai-insight-card__preview img{
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: top center !important;
  display: block !important;
  transform: none !important;
}

[data-sp-embed] #management .ai-insights-bento--mgmt-carousel.is-mgmt-coverflow, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.is-mgmt-coverflow.is-mgmt-marquee, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.is-mgmt-coverflow.ai-insights-bento--marquee, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.is-mgmt-coverflow:not(.ai-insights-bento--marquee){
  position: relative !important;
  display: block !important;
  grid-template-columns: none !important;
  width: min(100%, 96rem) !important;
  max-width: 96rem !important;
  min-height: clamp(26rem, 64vw, 46rem) !important;
  height: auto !important;
  margin: clamp(0.75rem, 2vw, 1.75rem) auto 0 !important;
  padding: 1.1rem 0 2rem !important;
  perspective: 1600px !important;
  overflow: visible !important;
  cursor: grab !important;
  touch-action: pan-y !important;
  overscroll-behavior-x: none;
  -webkit-overflow-scrolling: touch;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

[data-sp-embed] #management .ai-insights-bento--mgmt-carousel.is-mgmt-coverflow > .ai-insight-card, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.is-mgmt-coverflow > .ai-insight-card[data-mgmt-pos], [data-sp-embed].js #showcases #management .reveal.visible .ai-insights-bento--mgmt-carousel.is-mgmt-coverflow > .ai-insight-card[data-mgmt-pos="0"], [data-sp-embed].js #showcases #management .reveal.visible .ai-insights-bento--mgmt-carousel.is-mgmt-coverflow > .ai-insight-card[data-mgmt-pos="1"], [data-sp-embed].js #showcases #management .reveal.visible .ai-insights-bento--mgmt-carousel.is-mgmt-coverflow > .ai-insight-card[data-mgmt-pos="2"]{
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  flex: none !important;
  width: var(--mgmt-card-w, min(86vw, 42rem)) !important;
  max-width: var(--mgmt-card-w, min(86vw, 42rem)) !important;
  min-width: 0 !important;
  margin: 0 !important;
  pointer-events: auto !important;
  contain: none !important;
  touch-action: pan-y !important;
  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.4s ease,
    filter 0.4s ease,
    box-shadow 0.4s ease !important;
}

[data-sp-embed].js #showcases #management .reveal.visible .ai-insights-bento--mgmt-carousel.is-mgmt-coverflow > .ai-insight-card[data-mgmt-pos="0"], [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.is-mgmt-coverflow > .ai-insight-card[data-mgmt-pos="0"]{
  transform: translate(-50%, -50%) scale(1) rotateY(0deg) !important;
  opacity: 1 !important;
  filter: brightness(1) !important;
  z-index: 5 !important;
}

[data-sp-embed].js #showcases #management .reveal.visible .ai-insights-bento--mgmt-carousel.is-mgmt-coverflow > .ai-insight-card[data-mgmt-pos="1"], [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.is-mgmt-coverflow > .ai-insight-card[data-mgmt-pos="1"]{
  transform: translate(calc(-50% + var(--mgmt-side-x, 32%)), calc(-50% + 1.15rem)) scale(var(--mgmt-side-scale, 0.84)) rotateY(-15deg) !important;
  opacity: 0.64 !important;
  filter: brightness(0.95) !important;
  z-index: 2 !important;
  cursor: pointer;
}

[data-sp-embed].js #showcases #management .reveal.visible .ai-insights-bento--mgmt-carousel.is-mgmt-coverflow > .ai-insight-card[data-mgmt-pos="2"], [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.is-mgmt-coverflow > .ai-insight-card[data-mgmt-pos="2"]{
  transform: translate(calc(-50% - var(--mgmt-side-x, 32%)), calc(-50% + 1.15rem)) scale(var(--mgmt-side-scale, 0.84)) rotateY(15deg) !important;
  opacity: 0.64 !important;
  filter: brightness(0.95) !important;
  z-index: 1 !important;
  cursor: pointer;
}

@media (max-width: 767px) {
  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.is-mgmt-coverflow{
    --mgmt-card-w: min(88vw, 26rem);
    --mgmt-side-x: 26%;
    --mgmt-side-scale: 0.86;
    min-height: clamp(24rem, 118vw, 34rem) !important;
  }
}

@media (min-width: 768px) {
  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.is-mgmt-coverflow{
    --mgmt-card-w: min(78vw, 46rem);
    --mgmt-side-x: 30%;
    --mgmt-side-scale: 0.84;
  }
}

@media (min-width: 1500px) {
  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.is-mgmt-coverflow{
    --mgmt-card-w: min(58vw, 56rem);
    --mgmt-side-x: 32%;
    --mgmt-side-scale: 0.82;
    min-height: clamp(32rem, 42vw, 50rem) !important;
  }
}

[data-sp-embed] #management .ai-insights-bento--mgmt-carousel.is-mgmt-coverflow::before, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.is-mgmt-coverflow::after{
  content: "";
  position: absolute;
  top: 6%;
  bottom: 8%;
  width: min(28%, 11rem);
  z-index: 8;
  pointer-events: auto;
  cursor: pointer;
}
@media (hover: none), (pointer: coarse), (max-width: 1279px) {
  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.is-mgmt-coverflow::before, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.is-mgmt-coverflow::after{
    pointer-events: none;
  }
}
[data-sp-embed] #management .ai-insights-bento--mgmt-carousel.is-mgmt-coverflow::before{
  left: 0;
}
[data-sp-embed] #management .ai-insights-bento--mgmt-carousel.is-mgmt-coverflow::after{
  right: 0;
}
[data-sp-embed] #management .ai-insights-bento--mgmt-carousel.is-mgmt-coverflow > .ai-insight-card[data-mgmt-pos="1"], [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.is-mgmt-coverflow > .ai-insight-card[data-mgmt-pos="2"]{
  cursor: pointer !important;
}
[data-sp-embed] #management .ai-insights-bento--mgmt-carousel.is-mgmt-coverflow.is-mgmt-intro > .ai-insight-card, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.is-mgmt-coverflow.is-mgmt-intro > .ai-insight-card[data-mgmt-pos], [data-sp-embed].js #showcases #management .reveal.visible .ai-insights-bento--mgmt-carousel.is-mgmt-coverflow.is-mgmt-intro > .ai-insight-card[data-mgmt-pos="0"], [data-sp-embed].js #showcases #management .reveal.visible .ai-insights-bento--mgmt-carousel.is-mgmt-coverflow.is-mgmt-intro > .ai-insight-card[data-mgmt-pos="1"], [data-sp-embed].js #showcases #management .reveal.visible .ai-insights-bento--mgmt-carousel.is-mgmt-coverflow.is-mgmt-intro > .ai-insight-card[data-mgmt-pos="2"]{
  transition:
    transform 0.36s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.3s ease,
    filter 0.3s ease,
    box-shadow 0.3s ease !important;
}

/* Reserve video height so #industries etc. don't land on the section above */
[data-sp-embed] .ai-insights-bento .ai-insight-card__preview:has(video), [data-sp-embed] .ai-insights-bento .ai-insight-card__preview:has(.ai-insight-card__media){
  aspect-ratio: 16 / 9;
  min-height: 12.5rem;
}
[data-sp-embed] .ai-insights-bento .ai-insight-card__preview video, [data-sp-embed] .ai-insights-bento .ai-insight-card__preview .ai-insight-card__media{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/*
  Analysis videos: macOS chrome + purple title tab (like サーベイタイプ).
  Tab sits ABOVE the video so the existing video aspect-ratio is unchanged.
*/
[data-sp-embed] #analysis .ai-insight-card__preview--window-tab{
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  aspect-ratio: auto !important;
  min-height: 0 !important;
  overflow: hidden;
}

[data-sp-embed] #analysis .ai-insight-card__preview--window-tab::before{
  height: 36px !important;
  flex: 0 0 36px !important;
  background:
    radial-gradient(circle at 16px 50%, #ff5f57 0 5.5px, transparent 6.5px),
    radial-gradient(circle at 36px 50%, #febc2e 0 5.5px, transparent 6.5px),
    radial-gradient(circle at 56px 50%, #28c840 0 5.5px, transparent 6.5px),
    linear-gradient(180deg, #f7f7f8 0%, #ececee 100%) !important;
  border: none !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 0 !important;
}

[data-sp-embed] #analysis .cms-preview-tab{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.7rem 1.05rem 0.7rem 1rem;
  margin: 0;
  background: #fff;
  color: #111827;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.35;
  border: none;
  border-left: 4px solid #8b5cf6;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset;
}

[data-sp-embed] #analysis .ai-insight-card__preview--window-tab > .ai-insight-card__media{
  flex: 0 0 auto !important;
  height: auto !important;
  max-height: none !important;
}

[data-sp-embed] #analysis .ai-insight-card__preview--sns-video.ai-insight-card__preview--window-tab > .ai-insight-card__media{
  aspect-ratio: 16 / 10;
}

[data-sp-embed] #analysis .ai-insight-card__preview--survey-video.ai-insight-card__preview--window-tab > .ai-insight-card__media{
  aspect-ratio: auto;
}

/* モバイル アンケート作成: 横幅は現状のまま、縦だけ本来比率に戻す（16/9 予約を上書き） */
@media (max-width: 860px) {
  [data-sp-embed] #create .ai-insight-card__preview--survey-create-video, [data-sp-embed] #create .ai-insight-card__preview--survey-create-video.ai-insight-card__preview:has(video){
    aspect-ratio: auto !important;
    height: auto !important;
    min-height: 0 !important;
  }

  [data-sp-embed] #create .ai-insight-card__preview--survey-create-video .ai-insight-card__media, [data-sp-embed] #create .ai-insight-card__preview--survey-create-video video{
    object-fit: contain !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: auto !important;
  }
}

/* モバイル管理: ネイティブスワイプ（3枚が見える横スクロール） */
@media (max-width: 860px) {
  [data-sp-embed] #management .showcase-capabilities.analysis-capabilities, [data-sp-embed] #management .showcase--analysis-full > .showcase-capabilities{
    overflow: visible !important;
    overflow-x: visible !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.is-mgmt-snap, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.is-mgmt-snap.is-mgmt-coverflow{
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 0.65rem !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0.6rem 0 0 !important;
    padding: 0.25rem 8% 1rem !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 8%;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x !important;
    perspective: none !important;
    cursor: grab;
    scrollbar-width: none;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.is-mgmt-snap::-webkit-scrollbar{
    display: none;
    height: 0;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.is-mgmt-snap > .ai-insight-card, [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.is-mgmt-snap > .ai-insight-card[data-mgmt-pos], [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.is-mgmt-snap > .ai-insight-card[data-mgmt-pos="0"], [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.is-mgmt-snap > .ai-insight-card[data-mgmt-pos="1"], [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.is-mgmt-snap > .ai-insight-card[data-mgmt-pos="2"], [data-sp-embed].js #showcases #management .reveal.visible .ai-insights-bento--mgmt-carousel.is-mgmt-snap > .ai-insight-card[data-mgmt-pos="0"], [data-sp-embed].js #showcases #management .reveal.visible .ai-insights-bento--mgmt-carousel.is-mgmt-snap > .ai-insight-card[data-mgmt-pos="1"], [data-sp-embed].js #showcases #management .reveal.visible .ai-insights-bento--mgmt-carousel.is-mgmt-snap > .ai-insight-card[data-mgmt-pos="2"]{
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
    z-index: auto !important;
    flex: 0 0 84% !important;
    width: 84% !important;
    max-width: 84% !important;
    min-width: 84% !important;
    margin: 0 !important;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    will-change: auto !important;
    transition: none !important;
    pointer-events: auto !important;
    touch-action: pan-x !important;
  }

  [data-sp-embed] #management .ai-insights-bento--mgmt-carousel.is-mgmt-snap > .ai-insight-card:hover{
    transform: none !important;
  }
}

[data-sp-embed] .mgmt-snap-shell{
  position: relative;
  width: 100%;
}
[data-sp-embed] .mgmt-snap-arrow{
  display: none;
}
@media (max-width: 860px) {
  [data-sp-embed] .mgmt-snap-shell:not([hidden]) .mgmt-snap-arrow{
    display: flex;
    position: absolute;
    top: 50%;
    z-index: 8;
    width: 2.1rem;
    height: 3rem;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(15, 23, 42, 0.4);
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  [data-sp-embed] .mgmt-snap-arrow--prev{
    left: 0;
  }
  [data-sp-embed] .mgmt-snap-arrow--next{
    right: 0;
  }
  [data-sp-embed] .mgmt-snap-arrow svg{
    width: 1.2rem;
    height: 1.2rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.55;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
}


/* ===== SAKINA ID — CMS-structure extras (do not affect other products) ===== */
[data-sp-embed] .nobr-product{
  white-space: nowrap;
  display: inline;
}

[data-sp-embed] .hero--cms-story .hero-float .id-float{
  --id-float-glow: rgba(15, 23, 42, 0.08);
  --id-status: #059669;
  --id-status-bg: rgba(16, 185, 129, 0.14);
  pointer-events: auto;
  cursor: default;
  width: 100%;
  border-radius: 1.15rem;
  padding: 0.78rem 0.88rem 0.86rem;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(22px) saturate(1.55);
  backdrop-filter: blur(22px) saturate(1.55);
  box-shadow:
    0 18px 34px rgba(15, 23, 42, 0.12),
    0 1px 0 rgba(255, 255, 255, 0.88) inset,
    0 0 0 1px rgba(15, 23, 42, 0.04);
  color: #111827;
  transform: translateZ(0) scale(1);
  transform-origin: center center;
  transition:
    transform 0.48s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.48s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.48s ease,
    border-color 0.48s ease;
  will-change: transform, box-shadow;
}

[data-sp-embed] .hero--cms-story .hero-float .id-float--auth{
  --id-float-glow: rgba(16, 185, 129, 0.32);
  --id-status: #059669;
  --id-status-bg: rgba(16, 185, 129, 0.14);
}
[data-sp-embed] .hero--cms-story .hero-float .id-float--pay{
  --id-float-glow: rgba(139, 92, 246, 0.34);
  --id-status: #7c3aed;
  --id-status-bg: rgba(139, 92, 246, 0.16);
}
[data-sp-embed] .hero--cms-story .hero-float .id-float--mem{
  --id-float-glow: rgba(59, 130, 246, 0.34);
  --id-status: #2563eb;
  --id-status-bg: rgba(59, 130, 246, 0.16);
}
[data-sp-embed] .hero--cms-story .hero-float .id-float--pts{
  --id-float-glow: rgba(249, 115, 22, 0.36);
  --id-status: #ea580c;
  --id-status-bg: rgba(249, 115, 22, 0.16);
}

[data-sp-embed] .id-float__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 0.4rem;
  margin-bottom: 0.48rem;
}

[data-sp-embed] .id-float__user{
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  min-width: 0;
  flex: 1 1 auto;
  font-size: clamp(0.62rem, 0.52rem + 0.28vw, 0.74rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #4b5563;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-sp-embed] .id-float__user em{
  margin: 0;
  font-size: 0.85em;
  font-style: normal;
  font-weight: 600;
  color: #9ca3af;
}

[data-sp-embed] .id-float__ico{
  flex-shrink: 0;
  font-size: 0.95em;
  line-height: 1;
  filter: grayscale(0.05);
}

[data-sp-embed] .id-float__status{
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  flex-shrink: 0;
  padding: 0.16rem 0.46rem 0.16rem 0.38rem;
  border-radius: 999px;
  background: var(--id-status-bg);
  color: var(--id-status);
  font-size: clamp(0.54rem, 0.46rem + 0.22vw, 0.66rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--id-status) 18%, transparent);
  transition:
    box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.45s ease;
}

[data-sp-embed] .id-float__status::before{
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--id-status);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--id-status) 55%, transparent);
  animation: id-float-dot 2.4s ease-out infinite;
}

[data-sp-embed] .id-float__status--ok{ --id-status: #059669; --id-status-bg: rgba(16, 185, 129, 0.14); }
[data-sp-embed] .id-float__status--active{ --id-status: #7c3aed; --id-status-bg: rgba(139, 92, 246, 0.16); }
[data-sp-embed] .id-float__status--corp{ --id-status: #2563eb; --id-status-bg: rgba(59, 130, 246, 0.16); }
[data-sp-embed] .id-float__status--pts{
  --id-status: #ea580c;
  --id-status-bg: rgba(249, 115, 22, 0.16);
  font-variant-numeric: tabular-nums;
}

[data-sp-embed] .id-float__status--pts b{
  font-size: 1.12em;
  font-weight: 800;
  letter-spacing: -0.02em;
}

[data-sp-embed] .id-float strong{
  display: block;
  font-size: clamp(0.8rem, 0.66rem + 0.55vw, 1.02rem);
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.28;
  color: #111827;
}

[data-sp-embed] .id-float strong .id-float__num{
  font-size: 1.08em;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: inherit;
}

[data-sp-embed] .id-float p{
  margin: 0.32rem 0 0;
  font-size: clamp(0.62rem, 0.54rem + 0.22vw, 0.72rem);
  font-weight: 600;
  line-height: 1.45;
  color: #6b7280;
  font-style: normal;
}

[data-sp-embed] .id-float__num{
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: #111827;
}

[data-sp-embed] .id-float--mem .id-float__num, [data-sp-embed] .id-float--pts strong .id-float__num{
  color: var(--id-status);
}

[data-sp-embed] .id-float__sep{
  color: #d1d5db;
}

[data-sp-embed] .hero--cms-story .hero-float:has(.id-float:hover), [data-sp-embed] .hero--cms-story .hero-float:has(.id-float:focus-visible){
  z-index: 8;
}

[data-sp-embed] .hero--cms-story .hero-float .id-float:hover, [data-sp-embed] .hero--cms-story .hero-float .id-float:focus-visible{
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.92);
  transform: translateY(-6px) scale(1.05);
  box-shadow:
    0 28px 52px rgba(15, 23, 42, 0.18),
    0 0 36px var(--id-float-glow),
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 0 0 1px rgba(15, 23, 42, 0.05);
}

[data-sp-embed] .hero--cms-story .hero-float .id-float:hover .id-float__status, [data-sp-embed] .hero--cms-story .hero-float .id-float:focus-visible .id-float__status{
  filter: brightness(1.06);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--id-status) 28%, transparent),
    0 0 14px color-mix(in srgb, var(--id-status) 42%, transparent),
    0 6px 14px color-mix(in srgb, var(--id-status) 22%, transparent);
}

@keyframes id-float-dot {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--id-status) 48%, transparent); }
  70% { box-shadow: 0 0 0 0.38rem color-mix(in srgb, var(--id-status) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--id-status) 0%, transparent); }
}

@media (max-width: 640px) {
  [data-sp-embed] .hero--cms-story .hero-float .id-float{
    padding: 0.52rem 0.58rem 0.58rem;
    border-radius: 0.85rem;
  }

  [data-sp-embed] .id-float__head{
    flex-wrap: wrap;
    gap: 0.28rem;
    margin-bottom: 0.32rem;
  }

  [data-sp-embed] .id-float p{
    display: none;
  }

  [data-sp-embed] .id-float__user em{
    display: none;
  }
}

@media not all /* iOS Reduce Motion: keep animations */ {
  [data-sp-embed] .id-float__status::before{
    animation: none;
  }

  [data-sp-embed] .hero--cms-story .hero-float .id-float{
    transition-duration: 0.2s;
  }
}

[data-sp-embed] .id-showcase-visual{
  width: min(1180px, calc(100% - 8rem));
  margin: 1.25rem auto 0;
}

[data-sp-embed] .id-showcase-visual .sso-viz, [data-sp-embed] .id-showcase-visual .mem-viz, [data-sp-embed] .id-showcase-visual .viz{
  min-height: 460px;
  border-radius: 12px;
}

[data-sp-embed] #use-cases .feature-card .card-copy{
  padding-top: 0.35rem;
}

@media (max-width: 760px) {
  [data-sp-embed] .id-showcase-visual{
    width: calc(100% - 2rem);
  }
  [data-sp-embed] .id-showcase-visual .sso-viz, [data-sp-embed] .id-showcase-visual .mem-viz, [data-sp-embed] .id-showcase-visual .viz{
    min-height: 340px;
  }
}

/* Original SAKINA ID visuals */
[data-sp-embed] .showcase-media--viz{
  align-self: stretch;
  display: flex;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
[data-sp-embed] .showcase-media--viz > *{
  flex: 1 1 auto;
  min-width: 0;
}
[data-sp-embed] .sso-viz{
  position: relative;
  width: 100%;
  min-height: 460px;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--line);
  background-color: #0a1628;
  box-shadow: var(--shadow);
}
@supports (height: 1cqmin) {
  [data-sp-embed] .sso-viz{ container-type: size; }
  [data-sp-embed] .id-viz .aspect-square{
    height: 94cqmin;
    width: 94cqmin;
    max-width: 94cqmin;
  }
}
[data-sp-embed] .id-viz .absolute{ position: absolute; }
[data-sp-embed] .id-viz .relative{ position: relative; }
[data-sp-embed] .id-viz .inset-0{ inset: 0; }
[data-sp-embed] .id-viz .flex{ display: flex; }
[data-sp-embed] .id-viz .items-center{ align-items: center; }
[data-sp-embed] .id-viz .justify-center{ justify-content: center; }
[data-sp-embed] .id-viz .gap-2{ gap: 0.5rem; }
[data-sp-embed] .id-viz .h-full{ height: 100%; }
[data-sp-embed] .id-viz .w-full{ width: 100%; }
[data-sp-embed] .id-viz .w-auto{ width: auto; }
[data-sp-embed] .id-viz .max-h-full{ max-height: 100%; }
[data-sp-embed] .id-viz .max-w-\[98\%\]{ max-width: 98%; }
[data-sp-embed] .id-viz .h-\[96\%\]{ height: 96%; }
[data-sp-embed] .id-viz .aspect-square{ aspect-ratio: 1 / 1; }
[data-sp-embed] .id-viz .overflow-hidden{ overflow: hidden; }
[data-sp-embed] .id-viz .pointer-events-none{ pointer-events: none; }
[data-sp-embed] .id-viz .cursor-default{ cursor: default; }
[data-sp-embed] .id-viz .outline-none{ outline: none; }
[data-sp-embed] .id-viz .p-1{ padding: 0.25rem; }
[data-sp-embed] .id-viz .px-2{ padding-left: 0.5rem; padding-right: 0.5rem; }
[data-sp-embed] .id-viz .px-2\.5{ padding-left: 0.625rem; padding-right: 0.625rem; }
[data-sp-embed] .id-viz .px-3{ padding-left: 0.75rem; padding-right: 0.75rem; }
[data-sp-embed] .id-viz .py-1{ padding-top: 0.25rem; padding-bottom: 0.25rem; }
[data-sp-embed] .id-viz .py-1\.5{ padding-top: 0.375rem; padding-bottom: 0.375rem; }
[data-sp-embed] .id-viz .py-3{ padding-top: 0.75rem; padding-bottom: 0.75rem; }
[data-sp-embed] .id-viz .mb-2{ margin-bottom: 0.5rem; }
[data-sp-embed] .id-viz .mt-2{ margin-top: 0.5rem; }
[data-sp-embed] .id-viz .ml-2{ margin-left: 0.5rem; }
[data-sp-embed] .id-viz .mr-2{ margin-right: 0.5rem; }
[data-sp-embed] .id-viz .rounded-full{ border-radius: 9999px; }
[data-sp-embed] .id-viz .rounded-lg{ border-radius: 0.5rem; }
[data-sp-embed] .id-viz .rounded-md{ border-radius: 0.375rem; }
[data-sp-embed] .id-viz .rounded-xl{ border-radius: 0.75rem; }
[data-sp-embed] .id-viz .rounded-\[1\.5rem\]{ border-radius: 1.5rem; }
[data-sp-embed] .id-viz .border{ border-width: 1px; border-style: solid; }
[data-sp-embed] .id-viz .border-2{ border-width: 2px; border-style: solid; }
[data-sp-embed] .id-viz .border-white\/20{ border-color: rgba(255,255,255,0.2); }
[data-sp-embed] .id-viz .border-white\/25{ border-color: rgba(255,255,255,0.25); }
[data-sp-embed] .id-viz .border-white\/35{ border-color: rgba(255,255,255,0.35); }
[data-sp-embed] .id-viz .bg-white{ background-color: #fff; }
[data-sp-embed] .id-viz .bg-black\/85{ background-color: rgba(0,0,0,0.85); }
[data-sp-embed] .id-viz .bg-\[\#0078d4\]{ background-color: #0078d4; }
[data-sp-embed] .id-viz .bg-\[\#06C755\]{ background-color: #06C755; }
[data-sp-embed] .id-viz .bg-\[\#2563eb\]{ background-color: #2563eb; }
[data-sp-embed] .id-viz .bg-\[\#2d6a6a\]{ background-color: #2d6a6a; }
[data-sp-embed] .id-viz .bg-primary\/25{ background-color: rgba(30,119,87,0.25); }
[data-sp-embed] .id-viz .bg-gradient-to-br{ background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); }
[data-sp-embed] .id-viz .from-\[\#f09433\]{ --tw-gradient-from: #f09433; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(240,148,51,0)); }
[data-sp-embed] .id-viz .via-\[\#e6683c\]{ --tw-gradient-stops: var(--tw-gradient-from), #e6683c, var(--tw-gradient-to, rgba(230,104,60,0)); }
[data-sp-embed] .id-viz .to-\[\#bc1888\]{ --tw-gradient-to: #bc1888; }
[data-sp-embed] .id-viz .shadow-lg{ box-shadow: 0 10px 15px -3px rgba(0,0,0,0.25), 0 4px 6px -4px rgba(0,0,0,0.2); }
[data-sp-embed] .id-viz .shadow-2xl{ box-shadow: 0 25px 50px -12px rgba(0,0,0,0.45); }
[data-sp-embed] .id-viz .ring-2{ box-shadow: 0 0 0 2px var(--tw-ring-color, rgba(255,255,255,0.2)); }
[data-sp-embed] .id-viz .ring-white\/20{ --tw-ring-color: rgba(255,255,255,0.2); }
[data-sp-embed] .id-viz .ring-white\/30{ --tw-ring-color: rgba(255,255,255,0.3); }
[data-sp-embed] .id-viz .shadow-lg.ring-2{ box-shadow: 0 10px 15px -3px rgba(0,0,0,0.25), 0 0 0 2px var(--tw-ring-color, rgba(255,255,255,0.2)); }
[data-sp-embed] .id-viz .text-white{ color: #fff; }
[data-sp-embed] .id-viz .text-white\/90{ color: rgba(255,255,255,0.9); }
[data-sp-embed] .id-viz .text-black{ color: #000; }
[data-sp-embed] .id-viz .text-\[\#1877F2\]{ color: #1877F2; }
[data-sp-embed] .id-viz .text-\[\#1a3a5c\]{ color: #1a3a5c; }
[data-sp-embed] .id-viz .text-\[9px\]{ font-size: 9px; }
[data-sp-embed] .id-viz .text-\[10px\]{ font-size: 10px; }
[data-sp-embed] .id-viz .text-xs{ font-size: 0.75rem; line-height: 1rem; }
[data-sp-embed] .id-viz .font-bold{ font-weight: 700; }
[data-sp-embed] .id-viz .font-heading{ font-weight: 800; }
[data-sp-embed] .id-viz .whitespace-nowrap{ white-space: nowrap; }
[data-sp-embed] .id-viz .opacity-0{ opacity: 0; }
[data-sp-embed] .id-viz .z-0{ z-index: 0; }
[data-sp-embed] .id-viz .z-10{ z-index: 10; }
[data-sp-embed] .id-viz .z-20{ z-index: 20; }
[data-sp-embed] .id-viz .z-30{ z-index: 30; }
[data-sp-embed] .id-viz .top-1\/2{ top: 50%; }
[data-sp-embed] .id-viz .left-1\/2{ left: 50%; }
[data-sp-embed] .id-viz .top-full{ top: 100%; }
[data-sp-embed] .id-viz .bottom-full{ bottom: 100%; }
[data-sp-embed] .id-viz .left-full{ left: 100%; }
[data-sp-embed] .id-viz .right-full{ right: 100%; }
[data-sp-embed] .id-viz .-translate-x-1\/2{ transform: translateX(-50%); }
[data-sp-embed] .id-viz .-translate-y-1\/2{ transform: translateY(-50%); }
[data-sp-embed] .id-viz .top-1\/2.-translate-x-1\/2.-translate-y-1\/2, [data-sp-embed] .id-viz .-translate-x-1\/2.-translate-y-1\/2{ transform: translate(-50%, -50%); }
[data-sp-embed] .id-viz .h-4{ height: 1rem; } [data-sp-embed] .id-viz .w-4{ width: 1rem; }
[data-sp-embed] .id-viz .h-5{ height: 1.25rem; } [data-sp-embed] .id-viz .w-5{ width: 1.25rem; }
[data-sp-embed] .id-viz .h-6{ height: 1.5rem; } [data-sp-embed] .id-viz .w-6{ width: 1.5rem; }
[data-sp-embed] .id-viz .h-10{ height: 2.5rem; } [data-sp-embed] .id-viz .w-10{ width: 2.5rem; }
[data-sp-embed] .id-viz .h-28{ height: 7rem; } [data-sp-embed] .id-viz .w-28{ width: 7rem; }
[data-sp-embed] .id-viz .w-\[min\(52\%\, [data-sp-embed] 200px\)\]{ width: min(52%, 200px); }
[data-sp-embed] .id-viz .min-h-\[260px\]{ min-height: 260px; }
[data-sp-embed] .id-viz .blur-2xl{ filter: blur(40px); }
[data-sp-embed] .id-viz .transition-transform{ transition: transform 200ms; }
[data-sp-embed] .id-viz .transition-opacity{ transition: opacity 200ms; }
[data-sp-embed] .id-viz .duration-200{ transition-duration: 200ms; }
[data-sp-embed] .id-viz .group:hover .group-hover\:scale-110, [data-sp-embed] .id-viz .group:focus-within .group-focus-visible\:scale-110{ transform: scale(1.1); }
[data-sp-embed] .id-viz .group:hover .group-hover\:opacity-100, [data-sp-embed] .id-viz .group:focus-within .group-focus-visible\:opacity-100{ opacity: 1; }
[data-sp-embed] .id-viz .svg-inline--fa{ display: inline-block; height: 1em; overflow: visible; vertical-align: -0.125em; }
[data-sp-embed] .id-viz .sso-pulse{ animation: sso-pulse 2.4s ease-in-out infinite; }
@keyframes sso-pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
@media (min-width: 640px) {
  [data-sp-embed] .id-viz .sm\:p-2{ padding: 0.5rem; }
  [data-sp-embed] .id-viz .sm\:px-4{ padding-left: 1rem; padding-right: 1rem; }
  [data-sp-embed] .id-viz .sm\:py-4{ padding-top: 1rem; padding-bottom: 1rem; }
  [data-sp-embed] .id-viz .sm\:h-5{ height: 1.25rem; } [data-sp-embed] .id-viz .sm\:w-5{ width: 1.25rem; }
  [data-sp-embed] .id-viz .sm\:h-6{ height: 1.5rem; } [data-sp-embed] .id-viz .sm\:w-6{ width: 1.5rem; }
  [data-sp-embed] .id-viz .sm\:h-11{ height: 2.75rem; } [data-sp-embed] .id-viz .sm\:w-11{ width: 2.75rem; }
  [data-sp-embed] .id-viz .sm\:h-36{ height: 9rem; } [data-sp-embed] .id-viz .sm\:w-36{ width: 9rem; }
  [data-sp-embed] .id-viz .sm\:text-\[10px\]{ font-size: 10px; }
  [data-sp-embed] .id-viz .sm\:text-\[11px\]{ font-size: 11px; }
  [data-sp-embed] .id-viz .sm\:text-sm{ font-size: 0.875rem; line-height: 1.25rem; }
  [data-sp-embed] .id-viz .sm\:min-h-\[300px\]{ min-height: 300px; }
}
@media (max-width: 760px) {
  [data-sp-embed] .sso-viz{ min-height: 340px; }
}
@media not all /* iOS Reduce Motion: keep animations */ {
  [data-sp-embed] .id-viz .sso-pulse{ animation: none; }
}
[data-sp-embed] .sso-viz [class*="-translate-x-1/2"][class*="-translate-y-1/2"]{
  transform: translate(-50%, -50%);
}
[data-sp-embed] .sso-viz [class*="-translate-x-1/2"]:not([class*="-translate-y-1/2"]){
  transform: translateX(-50%);
}
[data-sp-embed] .sso-viz [class*="-translate-y-1/2"]:not([class*="-translate-x-1/2"]){
  transform: translateY(-50%);
}
[data-sp-embed] .id-viz .group:hover > [class*="rounded-full"], [data-sp-embed] .id-viz .group:focus-within > [class*="rounded-full"]{
  transform: scale(1.1);
}
[data-sp-embed] .id-viz .relative.flex.h-10.w-10{
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.25), 0 0 0 2px rgba(255,255,255,0.2);
}
[data-sp-embed] .id-viz .bg-gradient-to-br{
  background-image: linear-gradient(to bottom right, #f09433, #e6683c, #bc1888);
}
[data-sp-embed] .mem-viz{
  position: relative;
  width: 100%;
  min-height: 460px;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--line);
  background-color: #0a1628;
  box-shadow: var(--shadow);
}
[data-sp-embed] .id-viz .grid{ display: grid; }
[data-sp-embed] .id-viz .grid-cols-1{ grid-template-columns: repeat(1, minmax(0, 1fr)); }
[data-sp-embed] .id-viz .flex-col{ flex-direction: column; }
[data-sp-embed] .id-viz .flex-1{ flex: 1 1 0%; }
[data-sp-embed] .id-viz .shrink-0{ flex-shrink: 0; }
[data-sp-embed] .id-viz .min-w-0{ min-width: 0; }
[data-sp-embed] .id-viz .inline-block{ display: inline-block; }
[data-sp-embed] .id-viz .text-center{ text-align: center; }
[data-sp-embed] .id-viz .font-medium{ font-weight: 500; }
[data-sp-embed] .id-viz .opacity-30{ opacity: 0.3; }
[data-sp-embed] .id-viz .backdrop-blur-sm{ backdrop-filter: blur(4px); }
[data-sp-embed] .id-viz .blur-xl{ filter: blur(24px); }
[data-sp-embed] .id-viz .shadow-sm{ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }
[data-sp-embed] .id-viz .-m-4{ margin: -1rem; }
[data-sp-embed] .id-viz .mb-1{ margin-bottom: 0.25rem; }
[data-sp-embed] .id-viz .mb-1\.5{ margin-bottom: 0.375rem; }
[data-sp-embed] .id-viz .mt-0\.5{ margin-top: 0.125rem; }
[data-sp-embed] .id-viz .mt-1{ margin-top: 0.25rem; }
[data-sp-embed] .id-viz .mt-7{ margin-top: 1.75rem; }
[data-sp-embed] .id-viz .gap-0\.5{ gap: 0.125rem; }
[data-sp-embed] .id-viz .gap-1\.5{ gap: 0.375rem; }
[data-sp-embed] .id-viz .gap-3{ gap: 0.75rem; }
[data-sp-embed] .id-viz .p-2\.5{ padding: 0.625rem; }
[data-sp-embed] .id-viz .px-1{ padding-left: 0.25rem; padding-right: 0.25rem; }
[data-sp-embed] .id-viz .py-0\.5{ padding-top: 0.125rem; padding-bottom: 0.125rem; }
[data-sp-embed] .id-viz .py-2{ padding-top: 0.5rem; padding-bottom: 0.5rem; }
[data-sp-embed] .id-viz .h-2{ height: 0.5rem; }
[data-sp-embed] .id-viz .w-2{ width: 0.5rem; }
[data-sp-embed] .id-viz .min-h-\[52px\]{ min-height: 52px; }
[data-sp-embed] .id-viz .max-w-\[200px\]{ max-width: 200px; }
[data-sp-embed] .id-viz .text-\[5px\]{ font-size: 5px; }
[data-sp-embed] .id-viz .text-\[6px\]{ font-size: 6px; }
[data-sp-embed] .id-viz .text-\[7px\]{ font-size: 7px; }
[data-sp-embed] .id-viz .text-\[8px\]{ font-size: 8px; }
[data-sp-embed] .id-viz .bg-\[\#1e3a5f\]{ background-color: #1e3a5f; }
[data-sp-embed] .id-viz .bg-sky-600{ background-color: #0284c7; }
[data-sp-embed] .id-viz .bg-sky-500\/30{ background-color: rgba(14, 165, 233, 0.3); }
[data-sp-embed] .id-viz .bg-sky-400\/20{ background-color: rgba(56, 189, 248, 0.2); }
[data-sp-embed] .id-viz .bg-sky-950\/40{ background-color: rgba(8, 47, 73, 0.4); }
[data-sp-embed] .id-viz .bg-emerald-600{ background-color: #059669; }
[data-sp-embed] .id-viz .bg-emerald-500\/30{ background-color: rgba(16, 185, 129, 0.3); }
[data-sp-embed] .id-viz .bg-emerald-950\/35{ background-color: rgba(2, 44, 34, 0.35); }
[data-sp-embed] .id-viz .bg-orange-500{ background-color: #f97316; }
[data-sp-embed] .id-viz .bg-orange-950\/30{ background-color: rgba(67, 20, 7, 0.3); }
[data-sp-embed] .id-viz .border-sky-300\/50{ border-color: rgba(125, 211, 252, 0.5); }
[data-sp-embed] .id-viz .border-sky-400\/45{ border-color: rgba(56, 189, 248, 0.45); }
[data-sp-embed] .id-viz .border-emerald-300\/50{ border-color: rgba(110, 231, 183, 0.5); }
[data-sp-embed] .id-viz .border-emerald-400\/45{ border-color: rgba(52, 211, 153, 0.45); }
[data-sp-embed] .id-viz .border-orange-400\/40{ border-color: rgba(251, 146, 60, 0.4); }
[data-sp-embed] .id-viz .text-sky-200{ color: #bae6fd; }
[data-sp-embed] .id-viz .text-emerald-200{ color: #a7f3d0; }
[data-sp-embed] .id-viz .text-orange-200{ color: #fed7aa; }
[data-sp-embed] .id-viz .text-orange-300{ color: #fdba74; }
[data-sp-embed] .id-viz .text-red-200{ color: #fecaca; }
[data-sp-embed] .id-viz .text-white\/65{ color: rgba(255, 255, 255, 0.65); }
[data-sp-embed] .id-viz .text-white\/70{ color: rgba(255, 255, 255, 0.7); }
[data-sp-embed] .id-viz .text-white\/80{ color: rgba(255, 255, 255, 0.8); }
@media (min-width: 640px) {
  [data-sp-embed] .id-viz .sm\:grid-cols-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  [data-sp-embed] .id-viz .sm\:gap-1{ gap: 0.25rem; }
  [data-sp-embed] .id-viz .sm\:gap-2{ gap: 0.5rem; }
  [data-sp-embed] .id-viz .sm\:gap-2\.5{ gap: 0.625rem; }
  [data-sp-embed] .id-viz .sm\:gap-5{ gap: 1.25rem; }
  [data-sp-embed] .id-viz .sm\:mb-2{ margin-bottom: 0.5rem; }
  [data-sp-embed] .id-viz .sm\:mt-8{ margin-top: 2rem; }
  [data-sp-embed] .id-viz .sm\:p-3{ padding: 0.75rem; }
  [data-sp-embed] .id-viz .sm\:px-2\.5{ padding-left: 0.625rem; padding-right: 0.625rem; }
  [data-sp-embed] .id-viz .sm\:px-3{ padding-left: 0.75rem; padding-right: 0.75rem; }
  [data-sp-embed] .id-viz .sm\:py-2\.5{ padding-top: 0.625rem; padding-bottom: 0.625rem; }
  [data-sp-embed] .id-viz .sm\:py-3{ padding-top: 0.75rem; padding-bottom: 0.75rem; }
  [data-sp-embed] .id-viz .sm\:py-3\.5{ padding-top: 0.875rem; padding-bottom: 0.875rem; }
  [data-sp-embed] .id-viz .sm\:h-2\.5{ height: 0.625rem; }
  [data-sp-embed] .id-viz .sm\:w-2\.5{ width: 0.625rem; }
  [data-sp-embed] .id-viz .sm\:h-\[18px\]{ height: 18px; }
  [data-sp-embed] .id-viz .sm\:w-\[18px\]{ width: 18px; }
  [data-sp-embed] .id-viz .sm\:min-h-\[64px\]{ min-height: 64px; }
  [data-sp-embed] .id-viz .sm\:max-w-\[220px\]{ max-width: 220px; }
  [data-sp-embed] .id-viz .sm\:text-\[6px\]{ font-size: 6px; }
  [data-sp-embed] .id-viz .sm\:text-\[7px\]{ font-size: 7px; }
  [data-sp-embed] .id-viz .sm\:text-\[8px\]{ font-size: 8px; }
  [data-sp-embed] .id-viz .sm\:text-\[9px\]{ font-size: 9px; }
  [data-sp-embed] .id-viz .sm\:text-xs{ font-size: 0.75rem; line-height: 1rem; }
}
@media (min-width: 768px) {
  [data-sp-embed] .id-viz .md\:gap-6{ gap: 1.5rem; }
}
@media (max-width: 760px) {
  [data-sp-embed] .mem-viz{ min-height: 400px; }
}
[data-sp-embed] .id-showcase-visual .viz, [data-sp-embed] .showcase-media .viz{
  position: relative;
  min-height: 460px;
  height: 100%;
  border-radius: 12px;
  border: 1px solid rgba(222, 215, 204, 0.85);
  background:
    radial-gradient(circle at 20% 18%, rgba(30, 119, 87, 0.12), transparent 42%),
    radial-gradient(circle at 84% 78%, rgba(29, 27, 22, 0.08), transparent 46%),
    linear-gradient(160deg, #1d1b16 0%, #2a332c 52%, #1a2420 100%);
  color: #fffdfa;
  overflow: hidden;
  padding: 22px;
}
[data-sp-embed] .viz-hub{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  min-width: 148px;
  padding: 16px 18px;
  border-radius: 12px;
  background: rgba(255, 253, 250, 0.96);
  color: #1d1b16;
  text-align: center;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}
[data-sp-embed] .viz-hub.compact{
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  min-width: 120px;
  padding: 14px 12px;
}
[data-sp-embed] .viz-hub strong{ display: block; font-size: 15px; font-weight: 900; letter-spacing: 0.04em; }
[data-sp-embed] .viz-hub span{
  display: inline-flex; margin-top: 10px; padding: 7px 12px; border-radius: 8px;
  background: #1e7757; color: #fff; font-size: 11px; font-weight: 800;
}
[data-sp-embed] .viz-pay{
  display: grid; grid-template-columns: 0.9fr 1.1fr 0.9fr; gap: 12px; align-items: center;
}
[data-sp-embed] .viz-pay-col{ display: grid; gap: 10px; }
[data-sp-embed] .viz-card{
  border-radius: 10px; padding: 14px 12px;
  background: linear-gradient(145deg, #3a3530, #1d1b16);
  border: 1px solid rgba(255, 253, 250, 0.18);
  font-size: 12px; font-weight: 800; line-height: 1.45;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
}
[data-sp-embed] .viz-card.muted{ opacity: 0.72; }
[data-sp-embed] .viz-card small{ display: block; margin-top: 4px; color: #72ddb0; font-size: 10px; font-weight: 800; letter-spacing: 0.06em; }
[data-sp-embed] .viz-pay-hub{
  position: relative; text-align: center; padding: 18px 12px; border-radius: 14px;
  background: rgba(255, 253, 250, 0.08); border: 1px solid rgba(255, 253, 250, 0.2);
}
[data-sp-embed] .viz-pay-hub strong{ display: block; margin-top: 8px; font-size: 14px; font-weight: 900; }
[data-sp-embed] .viz-pay-hub > span{ display: block; margin-top: 4px; color: rgba(255, 253, 250, 0.72); font-size: 11px; font-weight: 700; }
[data-sp-embed] .viz-lock{
  width: 42px; height: 42px; margin: 0 auto; border-radius: 12px;
  background: radial-gradient(circle at 40% 35%, #ffe08a, #d4a017);
  box-shadow: 0 0 24px rgba(255, 214, 90, 0.45); position: relative;
}
[data-sp-embed] .viz-lock::before{
  content: ""; position: absolute; left: 50%; top: 8px; width: 14px; height: 12px;
  border: 3px solid #1d1b16; border-bottom: 0; border-radius: 10px 10px 0 0; transform: translateX(-50%);
}
[data-sp-embed] .viz-lock::after{
  content: ""; position: absolute; left: 50%; top: 18px; width: 18px; height: 14px;
  border-radius: 4px; background: #1d1b16; transform: translateX(-50%);
}
[data-sp-embed] .viz-pills{ display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 12px; }
[data-sp-embed] .viz-pills em{
  font-style: normal; font-size: 9px; font-weight: 800; letter-spacing: 0.04em;
  padding: 5px 8px; border-radius: 999px; border: 1px solid rgba(255, 253, 250, 0.28); background: rgba(0, 0, 0, 0.28);
}
[data-sp-embed] .viz-label{
  padding: 10px 12px; border-radius: 8px; background: rgba(255, 253, 250, 0.1);
  border: 1px solid rgba(255, 253, 250, 0.2); font-size: 11px; font-weight: 800; text-align: center;
}
[data-sp-embed] .viz-label.soft{ color: #72ddb0; border-color: rgba(114, 221, 176, 0.35); }
@media (max-width: 760px) {
  [data-sp-embed] .id-showcase-visual .viz, [data-sp-embed] .showcase-media .viz{ min-height: 0; height: auto; padding: 16px; }
  [data-sp-embed] .viz-pay{ grid-template-columns: 1fr; min-height: 0; }
}

[data-sp-embed] #nocode-platform .platform-wordmark{
  font-size: clamp(3.2rem, 9vw + 0.4rem, 6.4rem);
  white-space: nowrap;
}

[data-sp-embed] #use-cases .industry-grid--cases{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: min(76rem, 100%);
}

[data-sp-embed] #use-cases .industry-grid--cases .feature-card{
  min-height: 0;
}

[data-sp-embed] #use-cases .industry-grid--cases .feature-card .card-copy{
  padding-bottom: 1.6rem;
}

@media (max-width: 1040px) {
  [data-sp-embed] #use-cases .industry-grid--cases{
    grid-template-columns: 1fr;
    max-width: min(44rem, 100%);
  }
}

[data-sp-embed] .hero--cms-story .hero-center{
  max-width: min(38rem, 92vw);
}

[data-sp-embed] .hero--cms-story .hero-copy .eyebrow{
  margin-bottom: 0.65rem;
}

[data-sp-embed] .hero-subtitle.hero-subtitle--lead{
  max-width: 28em;
  margin: 0.85rem auto 0;
  font-size: clamp(0.88rem, 0.35vw + 0.8rem, 1.05rem);
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: #4b5563;
  white-space: normal;
}

[data-sp-embed] .hero--cms-story .hero-center .hero-actions{
  margin-top: 1.35rem;
}

[data-sp-embed] .id-problem{
  background: transparent;
}

[data-sp-embed] .id-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] .id-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] .id-problem__num{
  display: block;
  margin: 0;
  font-family: Inter, "Noto Sans JP", 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] .id-problem__stat--churn .id-problem__num{
  background-image: linear-gradient(to right, #ef4444, #e11d48);
}

[data-sp-embed] .id-problem__stat--cost .id-problem__num{
  background-image: linear-gradient(to right, #f59e0b, #ea580c);
}

[data-sp-embed] .id-problem__stat--split .id-problem__num{
  background-image: linear-gradient(to right, #9333ea, #4f46e5);
}

[data-sp-embed] .id-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] .id-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 .id-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 .id-problem__stat.reveal.visible{
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

@media (min-width: 768px) {
  [data-sp-embed] .id-problem__grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.5rem, 3vw, 3rem);
  }

  [data-sp-embed] .id-problem__num{
    font-size: 4.5rem;
  }
}

@media (min-width: 1024px) {
  [data-sp-embed] .id-problem__num{
    font-size: 6rem;
  }
}

@media not all /* iOS Reduce Motion: keep animations */ {
  [data-sp-embed].js .id-problem__stat.reveal, [data-sp-embed].js .id-problem__stat.reveal.visible{
    opacity: 1;
    transform: none;
    transition: none;
    pointer-events: auto;
  }
}

[data-sp-embed] .id-showcase-lead{
  max-width: 44rem;
  margin: 0.85rem auto 0;
  font-size: clamp(0.92rem, 0.25vw + 0.85rem, 1.02rem);
  line-height: 1.8;
  color: #4b5563;
}

[data-sp-embed] .showcase--analysis-full > .showcase-copy .id-showcase-lead{
  margin-left: 0;
  text-align: left;
}

[data-sp-embed] .id-points{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.15rem;
  width: min(1180px, calc(100% - 4rem));
  margin: 1.15rem auto 0;
}

[data-sp-embed] .id-point{
  padding: 1.45rem 1.6rem 1.5rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

[data-sp-embed] .id-point:hover{
  transform: translateY(-0.2rem);
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(203, 213, 225, 0.95);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
}

[data-sp-embed] .id-point__num{
  display: block;
  margin: 0 0 0.5rem;
  color: #64748b;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1;
}

[data-sp-embed] .id-point h3{
  margin: 0 0 0.45rem;
  font-size: clamp(1.08rem, 0.35vw + 1.02rem, 1.22rem);
  font-weight: 700;
  line-height: 1.45;
}

[data-sp-embed] .id-point p{
  margin: 0;
  font-size: clamp(0.95rem, 0.2vw + 0.9rem, 1.05rem);
  line-height: 1.7;
  color: #4b5563;
}


[data-sp-embed] .id-eco{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  width: min(68rem, calc(100% - 2rem));
  margin: 2.15rem auto 0;
}

@media (min-width: 900px) {
  [data-sp-embed] .id-eco{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: min(68rem, calc(100% - 4rem));
  }
}

@media (min-width: 761px) and (max-width: 899px) {
  [data-sp-embed] .id-eco{
    width: min(40rem, calc(100% - 1.75rem));
  }
}

@media (max-width: 760px) {
  [data-sp-embed] .id-eco{
    width: min(28rem, calc(100% - 1.5rem));
  }
}

[data-sp-embed] .id-eco__card{
  --eco-accent: #0f172a;
  --eco-system: #64748b;
  --eco-cta: #0f172a;
  --eco-bg-mid: #fafbfc;
  --eco-bg-end: #ffffff;
  --eco-border: rgba(0, 0, 0, 0.08);
  --eco-border-hover: rgba(0, 0, 0, 0.14);
  --eco-shadow: rgba(0, 0, 0, 0.04);
  --eco-shadow-hover: rgba(0, 0, 0, 0.08);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 1.5rem 1.45rem 1.25rem;
  border-radius: 16px;
  border: 1px solid var(--eco-border);
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    var(--eco-bg-mid) 55%,
    var(--eco-bg-end) 100%
  );
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 8px 24px var(--eco-shadow);
  color: inherit;
  text-decoration: none;
  transition:
    transform 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease;
}

[data-sp-embed] .id-eco__card::before{
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--eco-accent);
  opacity: 0.92;
  z-index: 2;
}

[data-sp-embed] .id-eco__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] .id-eco__card > *{
  position: relative;
  z-index: 2;
}

[data-sp-embed] .id-eco__card:hover, [data-sp-embed] a.id-eco__card:focus-visible{
  transform: translateY(-3px);
  border-color: var(--eco-border-hover);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 16px 36px var(--eco-shadow-hover);
}

[data-sp-embed] .id-eco__card:hover::after, [data-sp-embed] a.id-eco__card:focus-visible::after{
  animation: feature-nav-sheen 0.48s cubic-bezier(0.25, 0.9, 0.3, 1) both;
}

[data-sp-embed] a.id-eco__card:focus-visible{
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

[data-sp-embed] .id-eco__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(--eco-system);
}

[data-sp-embed] .id-eco__card h3{
  margin: 0 0 0.65rem;
  font-size: clamp(1.25rem, 1.1vw + 0.85rem, 1.5rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.25;
  color: var(--ink);
}

[data-sp-embed] .id-eco__card p{
  margin: 0;
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.75;
  font-weight: 500;
  letter-spacing: 0.02em;
}

[data-sp-embed] .id-eco__tags{
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  margin: auto 0 0;
  padding: 0.9rem 0 0;
}

[data-sp-embed] .id-eco__tags li{
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.05);
  color: #374151;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

[data-sp-embed] .id-eco__cta{
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 1.1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--eco-cta);
  transition: gap 180ms ease;
}

[data-sp-embed] .id-eco__card:hover .id-eco__cta, [data-sp-embed] a.id-eco__card:focus-visible .id-eco__cta{
  gap: 0.55rem;
}

[data-sp-embed] .id-eco__card--ma{
  --eco-bg-mid: #fff8f9;
  --eco-bg-end: #fff5f7;
  --eco-border: rgba(236, 72, 153, 0.14);
  --eco-border-hover: rgba(236, 72, 153, 0.28);
  --eco-shadow: rgba(219, 39, 119, 0.05);
  --eco-shadow-hover: rgba(219, 39, 119, 0.1);
  --eco-accent: linear-gradient(90deg, #f9a8d4 0%, #ec4899 55%, #db2777 100%);
  --eco-system: #be185d;
  --eco-cta: #be185d;
}

[data-sp-embed] .id-eco__card--cms{
  --eco-bg-mid: #fffbeb;
  --eco-bg-end: #fefce8;
  --eco-border: rgba(234, 179, 8, 0.18);
  --eco-border-hover: rgba(217, 119, 6, 0.32);
  --eco-shadow: rgba(217, 119, 6, 0.05);
  --eco-shadow-hover: rgba(217, 119, 6, 0.1);
  --eco-accent: linear-gradient(90deg, #fde68a 0%, #fbbf24 55%, #d97706 100%);
  --eco-system: #b45309;
  --eco-cta: #b45309;
}

[data-sp-embed] .id-eco__card--api{
  --eco-bg-mid: #fdfaff;
  --eco-bg-end: #f5f3ff;
  --eco-border: rgba(168, 85, 247, 0.14);
  --eco-border-hover: rgba(168, 85, 247, 0.28);
  --eco-shadow: rgba(147, 51, 234, 0.05);
  --eco-shadow-hover: rgba(147, 51, 234, 0.1);
  --eco-accent: linear-gradient(90deg, #c4b5fd 0%, #a855f7 55%, #9333ea 100%);
  --eco-system: #7e22ce;
  --eco-cta: #7e22ce;
}

[data-sp-embed] #integration .hero-actions{
  justify-content: center;
}

[data-sp-embed] .id-support{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(4.25rem, 7vw, 6rem);
  background:
    radial-gradient(70% 52% at 18% 0%, rgba(226, 232, 240, 0.55) 0%, transparent 62%),
    radial-gradient(48% 40% at 100% 100%, rgba(241, 245, 249, 0.7) 0%, transparent 60%),
    #f7f8fa;
}

[data-sp-embed] #support .section-heading{
  margin-bottom: 0;
}

[data-sp-embed] #support .section-heading h2{
  font-size: clamp(1.65rem, 2.2vw + 0.8rem, 2.4rem);
}

[data-sp-embed] #support .section-heading .section-label{
  margin-bottom: 0.85rem;
}

[data-sp-embed] #support .feature-index__lead{
  margin-top: 0.85rem;
  max-width: 36rem;
  font-size: 1.05rem !important;
  line-height: 1.7;
}

[data-sp-embed] .id-support > *:not(.id-support-bg){
  position: relative;
  z-index: 1;
}

[data-sp-embed] .id-support-bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 86%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 86%, transparent 100%);
}

[data-sp-embed] .id-support-bg__source{
  position: absolute;
  top: -28%;
  left: -6%;
  width: min(58rem, 88vw);
  height: min(28rem, 42vh);
  background: radial-gradient(
    ellipse 72% 58% at 38% 30%,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(226, 232, 240, 0.35) 42%,
    transparent 74%
  );
  opacity: 0.7;
  animation: id-support-source-breathe 14s ease-in-out infinite;
}

[data-sp-embed] .id-support-bg__veil{
  position: absolute;
  inset: -8% -10% -18%;
  background: linear-gradient(
    118deg,
    transparent 8%,
    rgba(255, 255, 255, 0.14) 22%,
    transparent 34%,
    transparent 46%,
    rgba(241, 245, 249, 0.22) 58%,
    transparent 72%
  );
  opacity: 0.8;
  animation: id-support-veil-sweep 20s ease-in-out infinite;
}

[data-sp-embed] .id-support-bg__shaft{
  position: absolute;
  top: -18%;
  height: 148%;
  --rot: -18deg;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.42) 0%,
    rgba(226, 232, 240, 0.16) 38%,
    rgba(203, 213, 225, 0.05) 70%,
    transparent 100%
  );
  clip-path: polygon(32% 0, 68% 0, 86% 100%, 14% 100%);
  transform: rotate(-18deg);
  transform-origin: 50% 0;
  filter: blur(6px);
  opacity: 0.38;
  animation: id-support-shaft-breathe 16s ease-in-out infinite;
}

[data-sp-embed] .id-support-bg__shaft--1{
  left: 4%;
  width: 5.4rem;
  animation-delay: 0s;
}

[data-sp-embed] .id-support-bg__shaft--2{
  left: 16%;
  width: 4.1rem;
  opacity: 0.28;
  animation-delay: -4s;
}

[data-sp-embed] .id-support-bg__shaft--3{
  left: 26%;
  width: 6.2rem;
  animation-delay: -8s;
}

[data-sp-embed] .id-support-bg__shaft--4{
  left: 40%;
  width: 3.6rem;
  opacity: 0.24;
  animation-delay: -2s;
}

[data-sp-embed] .id-support-bg__shaft--5{
  left: 50%;
  width: 5rem;
  animation-delay: -11s;
}

[data-sp-embed] .id-support-bg__wave{
  position: absolute;
  left: -20%;
  right: -20%;
  top: 18%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(148, 163, 184, 0.08) 18%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(148, 163, 184, 0.08) 82%,
    transparent 100%
  );
  transform: rotate(-18deg);
  opacity: 0.45;
  animation: id-support-wave-slide 18s ease-in-out infinite;
}

[data-sp-embed] .id-support-bg__caustic{
  position: absolute;
  inset: auto 0 -22% auto;
  width: 62%;
  height: 48%;
  background: radial-gradient(
    ellipse at 70% 80%,
    rgba(241, 245, 249, 0.7) 0%,
    transparent 68%
  );
  opacity: 0.5;
  animation: id-support-caustic 18s ease-in-out infinite;
}

[data-sp-embed] .id-support-bg__motes{
  display: none;
}

@keyframes id-support-source-breathe {
  0%, 100% { opacity: 0.52; transform: translate3d(0, 0, 0); }
  50% { opacity: 0.82; transform: translate3d(1.2%, 0.6%, 0); }
}

@keyframes id-support-veil-sweep {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: 0.55; }
  50% { transform: translate3d(2.5%, -1%, 0); opacity: 0.9; }
}

@keyframes id-support-shaft-breathe {
  0%, 100% {
    opacity: 0.22;
    transform: rotate(var(--rot)) translate3d(0, 0, 0);
  }
  50% {
    opacity: 0.48;
    transform: rotate(var(--rot)) translate3d(1.4%, 1%, 0);
  }
}

@keyframes id-support-wave-slide {
  0% { top: 8%; opacity: 0; }
  18% { opacity: 0.5; }
  82% { opacity: 0.28; }
  100% { top: 78%; opacity: 0; }
}

@keyframes id-support-caustic {
  0%, 100% { opacity: 0.32; transform: translate3d(0, 0, 0); }
  50% { opacity: 0.58; transform: translate3d(-2%, -1%, 0); }
}

@media (max-width: 900px) {
  [data-sp-embed] .id-points{
    width: calc(100% - 2rem);
    grid-template-columns: 1fr;
    gap: 0.85rem;
    margin-top: 1rem;
  }

  [data-sp-embed] .id-point{
    padding: 1.25rem 1.3rem 1.3rem;
  }
}

@media (max-width: 767px) {
  [data-sp-embed] .id-support-bg__shaft--4, [data-sp-embed] .id-support-bg__shaft--5{
    display: none;
  }

  [data-sp-embed] .id-support-bg__source, [data-sp-embed] .id-support-bg__veil, [data-sp-embed] .id-support-bg__shaft{
    filter: none;
  }
}

@media not all /* iOS Reduce Motion: keep animations */ {
  [data-sp-embed] .id-point, [data-sp-embed] .id-point:hover, [data-sp-embed] .id-eco__card, [data-sp-embed] .id-eco__card:hover, [data-sp-embed] a.id-eco__card:focus-visible{
    transform: none;
    transition: none;
  }

  [data-sp-embed] .id-eco__card:hover::after, [data-sp-embed] a.id-eco__card:focus-visible::after{
    animation: none;
  }

  [data-sp-embed] .id-support-bg__source, [data-sp-embed] .id-support-bg__veil, [data-sp-embed] .id-support-bg__shaft, [data-sp-embed] .id-support-bg__wave, [data-sp-embed] .id-support-bg__caustic, [data-sp-embed] .id-support-bg__motes{
    animation: none !important;
  }

  [data-sp-embed] .id-support-bg__shaft{
    opacity: 0.32;
    transform: rotate(var(--rot));
  }

  [data-sp-embed] .id-support-bg__veil{
    opacity: 0.7;
  }

  [data-sp-embed] .id-support-bg__source{
    opacity: 0.7;
  }

  [data-sp-embed] .id-support-bg__wave{
    top: 36%;
    opacity: 0.28;
  }
}

@media (max-width: 767px) {
  [data-sp-embed] .id-problem__grid{
    grid-template-columns: 1fr;
  }
}

/* ===== MEMBERSHIP & LOYALTY zigzag ===== */
[data-sp-embed] #auth.section-band, [data-sp-embed] #payment.section-band, [data-sp-embed] #membership.section-band{
  padding-block: clamp(6rem, 10vw, 8rem);
}

[data-sp-embed] #auth .section-heading, [data-sp-embed] #payment .section-heading, [data-sp-embed] #membership .section-heading{
  margin-bottom: clamp(4rem, 8vw, 7rem);
}

[data-sp-embed] #auth .section-heading .section-label, [data-sp-embed] #payment .section-heading .section-label, [data-sp-embed] #membership .section-heading .section-label{
  margin-bottom: 1.5rem;
}

[data-sp-embed] #auth .section-heading h2, [data-sp-embed] #payment .section-heading h2, [data-sp-embed] #membership .section-heading h2{
  margin-bottom: 0;
}

[data-sp-embed] #auth .industries__lead, [data-sp-embed] #payment .industries__lead, [data-sp-embed] #membership .industries__lead{
  margin-top: 1.5rem;
  max-width: 42rem;
  line-height: 1.9;
}

[data-sp-embed] #auth:has(.section-jump-bar-slot) .section-heading, [data-sp-embed] #payment:has(.section-jump-bar-slot) .section-heading, [data-sp-embed] #membership:has(.section-jump-bar-slot) .section-heading{
  margin-bottom: clamp(1.15rem, 2.4vw, 1.85rem);
}

[data-sp-embed] #auth > .section-jump-bar-slot, [data-sp-embed] #payment > .section-jump-bar-slot, [data-sp-embed] #membership > .section-jump-bar-slot{
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  width: min(1120px, calc(100% - 4rem));
  margin: 0 auto clamp(2.25rem, 5vw, 4rem);
  overflow-anchor: none;
}

[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;
}

[data-sp-embed] .id-auth-block[id], [data-sp-embed] .id-pay-block[id], [data-sp-embed] .id-mem-block[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
  );
}

@media (max-width: 899px) {
  [data-sp-embed] #auth > .section-jump-bar-slot, [data-sp-embed] #payment > .section-jump-bar-slot, [data-sp-embed] #membership > .section-jump-bar-slot{
    width: calc(100% - 1.5rem);
    margin-bottom: 1.85rem;
  }

  [data-sp-embed] .section-jump-bar{
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    gap: 0.15rem 0.4rem;
  }

  [data-sp-embed] .section-jump-bar__item{
    justify-content: center;
    text-align: center;
    padding: 0.68rem 0.45rem 0.78rem;
    font-size: 0.74rem;
    line-height: 1.35;
  }

  [data-sp-embed] .section-jump-bar__item + .section-jump-bar__item::before{
    display: none;
  }

  [data-sp-embed] .section-jump-bar__item:last-child{
    grid-column: 1 / -1;
  }

  [data-sp-embed] .section-jump-bar.is-pinned{
    display: flex;
    grid-template-columns: none;
    justify-content: flex-start;
    gap: 0.1rem 0.15rem;
    padding-inline: clamp(16px, 4vw, 24px);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  [data-sp-embed] .section-jump-bar.is-pinned::-webkit-scrollbar{
    display: none;
  }

  [data-sp-embed] .section-jump-bar.is-pinned .section-jump-bar__item, [data-sp-embed] .section-jump-bar.is-pinned .section-jump-bar__item:last-child{
    flex: 0 0 auto;
    grid-column: auto;
    white-space: nowrap;
  }
}

[data-sp-embed] .id-mem-blocks{
  display: grid;
  gap: clamp(5.5rem, 9vw, 7rem);
  width: min(1120px, calc(100% - 4rem));
  margin: 0 auto;
}

[data-sp-embed] .id-mem-block{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(1.75rem, 3.2vw, 2.75rem);
  padding: clamp(1.4rem, 2.8vw, 2rem);
  border-radius: 1.5rem;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow: 0 22px 50px rgb(241 245 249 / 0.5);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  overflow: hidden;
}

[data-sp-embed] .id-mem-block__visual, [data-sp-embed] .id-mem-block__copy{
  min-width: 0;
}

[data-sp-embed] .id-mem-block__copy{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
  text-align: left;
}

[data-sp-embed] .id-mem-tag{
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.35em;
  margin-bottom: 0;
  padding: 0.32rem 0.82rem;
  border-radius: 999px;
  background: #e0f2fe;
  color: #0369a1;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

[data-sp-embed] .id-mem-tag--family{
  background: #fef3c7;
  color: #b45309;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

[data-sp-embed] .id-mem-tag--points{
  background: #ffedd5;
  color: #c2410c;
}

[data-sp-embed] .id-mem-block__copy h3{
  margin: 0;
  font-size: clamp(1.25rem, 1rem + 1.1vw, 1.85rem);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.02em;
}

[data-sp-embed] .id-mem-block__copy p{
  margin: 0;
  font-size: clamp(0.92rem, 0.2vw + 0.86rem, 1.02rem);
  line-height: 1.9;
  color: #4b5563;
}

[data-sp-embed] .id-auth-viz, [data-sp-embed] .id-mem-viz, [data-sp-embed] .id-pay-viz{
  position: relative;
  min-height: 280px;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
  border-radius: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.72) 0%, rgba(248, 250, 252, 0.38) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    0 12px 32px rgb(241 245 249 / 0.5);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

[data-sp-embed] .id-apple-glow{
  position: absolute;
  inset: -22%;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(204, 251, 241, 0.42), rgba(191, 219, 254, 0.32), rgba(237, 233, 254, 0.42));
  filter: blur(64px);
}

[data-sp-embed] .id-auth-viz > *:not(.id-apple-glow), [data-sp-embed] .id-mem-viz > *:not(.id-apple-glow), [data-sp-embed] .id-pay-viz > *:not(.id-apple-glow){
  position: relative;
  z-index: 1;
}

[data-sp-embed] .id-mem-viz--corp{
  min-height: 320px;
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.88) 0%, rgba(248, 250, 252, 0.72) 100%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 12px 28px rgb(241 245 249 / 0.55);
}

[data-sp-embed] .id-mem-viz--corp .id-apple-glow{
  background: linear-gradient(90deg, rgba(186, 230, 253, 0.55), rgba(224, 242, 254, 0.28), rgba(233, 213, 255, 0.38));
}

[data-sp-embed] .id-mem-viz--family{
  min-height: 320px;
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 247, 237, 0.72) 48%, rgba(255, 251, 235, 0.58) 100%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 12px 28px rgb(255 237 213 / 0.42);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

[data-sp-embed] .id-mem-viz--family .id-apple-glow{
  background: linear-gradient(90deg, rgba(254, 243, 199, 0.58), rgba(255, 237, 213, 0.36), rgba(253, 186, 116, 0.28));
}

[data-sp-embed] .id-mem-viz--points{
  min-height: 360px;
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 251, 235, 0.7) 48%, rgba(254, 243, 199, 0.38) 100%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 12px 28px rgb(253 230 138 / 0.28);
}

[data-sp-embed] .id-mem-viz--points .id-apple-glow{
  background: linear-gradient(90deg, rgba(254, 215, 170, 0.52), rgba(254, 243, 199, 0.38), rgba(253, 230, 138, 0.32));
}

[data-sp-embed] .id-corp, [data-sp-embed] .id-fam, [data-sp-embed] .id-pts{
  position: relative;
  height: 100%;
  min-height: 280px;
  padding: 1.15rem 1.1rem 1.2rem;
}

[data-sp-embed] .id-fam{
  min-height: 320px;
}

[data-sp-embed] .id-corp{
  display: grid;
  grid-template-columns: 1.2fr 12px 0.95fr;
  gap: 0.35rem;
  align-items: center;
  min-height: 320px;
}

[data-sp-embed] .id-corp__org, [data-sp-embed] .id-corp__bill{
  position: relative;
  min-width: 0;
}

[data-sp-embed] .id-corp__org{
  display: flex;
  flex-direction: column;
}

[data-sp-embed] .id-corp__parent{
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.7rem 0.8rem;
  border-radius: 0.85rem;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.8);
  color: #0f172a;
  box-shadow: 0 10px 22px rgba(14, 165, 233, 0.1);
}

[data-sp-embed] .id-corp__avatar, [data-sp-embed] .id-corp__kid span, [data-sp-embed] .id-fam__owner span, [data-sp-embed] .id-fam__kid span{
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: #0284c7;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  flex-shrink: 0;
}

[data-sp-embed] .id-corp__parent strong, [data-sp-embed] .id-fam__owner strong{
  display: block;
  font-size: 0.78rem;
  font-weight: 800;
}

[data-sp-embed] .id-corp__parent em, [data-sp-embed] .id-corp__kid small, [data-sp-embed] .id-fam__kid small{
  display: block;
  font-size: 0.68rem;
  font-style: normal;
  color: #64748b;
}

[data-sp-embed] .id-corp__stem{
  display: block;
  width: 2px;
  height: 16px;
  margin: 0.15rem auto 0;
  background: rgba(56, 189, 248, 0.55);
  transform-origin: top;
}

[data-sp-embed] .id-corp__branch{
  display: block;
  width: calc(100% - 1.4rem);
  height: 2px;
  margin: 0 auto;
  background: rgba(56, 189, 248, 0.4);
  transform-origin: center;
}

[data-sp-embed] .id-corp__kids{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.28rem;
  margin-top: 0.15rem;
}

[data-sp-embed] .id-corp__kid{
  display: grid;
  justify-items: center;
  gap: 0.22rem;
  padding: 0.48rem 0.12rem 0.42rem;
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.7);
  color: #0f172a;
  text-align: center;
  box-shadow: 0 8px 18px rgba(14, 165, 233, 0.08);
}

[data-sp-embed] .id-corp__kid small{
  color: #64748b;
  font-size: 0.58rem;
  white-space: nowrap;
}

[data-sp-embed] .id-corp__kid span{
  position: relative;
}

[data-sp-embed] .id-corp__plus, [data-sp-embed] .id-corp__letter{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 800;
}

[data-sp-embed] .id-corp__plus{
  opacity: 0;
}

[data-sp-embed] .id-corp__ok{
  position: absolute;
  right: -3px;
  bottom: -3px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 999px;
  background: #047857;
  color: #fff;
  font-size: 0.48rem;
  font-style: normal;
  font-weight: 800;
  box-shadow: 0 0 0 2px #fff;
}

[data-sp-embed] .id-corp__n--3{
  opacity: 0;
}

[data-sp-embed] .id-corp__nums{
  position: relative;
  display: inline-grid;
  min-width: 0.7em;
  justify-items: center;
}

[data-sp-embed] .id-corp__n{
  grid-area: 1 / 1;
  display: inline-block;
}

[data-sp-embed] .id-corp__kid--new span{
  background: #10b981;
}

[data-sp-embed] .id-corp__kid--new{
  border-style: dashed;
  border-color: rgba(16, 185, 129, 0.45);
  background: rgba(236, 253, 245, 0.72);
}

[data-sp-embed] .id-corp__grant{
  display: inline-flex;
  align-self: center;
  align-items: center;
  gap: 0.28rem;
  margin-top: 0.55rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: #10b981;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  white-space: nowrap;
}

[data-sp-embed] .id-corp__grant b, [data-sp-embed] .id-invoice__ok b, [data-sp-embed] .id-invoice__send b{
  font-weight: 800;
}

[data-sp-embed] .id-corp__flow{
  display: block;
  width: 0;
  height: 0;
  margin: 0 auto;
  border-style: solid;
  border-width: 5px 0 5px 9px;
  border-color: transparent transparent transparent #38bdf8;
  filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.45));
}

[data-sp-embed] .id-corp__bill{
  display: grid;
  justify-items: center;
  gap: 0.45rem;
}

[data-sp-embed] .id-corp__cal{
  padding: 0.16rem 0.5rem;
  border-radius: 999px;
  background: rgba(14, 165, 233, 0.12);
  color: #0369a1;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

[data-sp-embed] .id-corp__tally{
  width: 100%;
  padding: 0.42rem 0.55rem 0.48rem;
  border-radius: 0.7rem;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.75);
  text-align: center;
  box-shadow: 0 8px 18px rgba(14, 165, 233, 0.08);
}

[data-sp-embed] .id-corp__tally small{
  display: block;
  color: #64748b;
  font-size: 0.6rem;
  font-weight: 700;
}

[data-sp-embed] .id-corp__tally strong{
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.12rem;
  min-height: 1.35rem;
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
}

[data-sp-embed] .id-corp__tally i{
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 700;
  color: #64748b;
}

[data-sp-embed] .id-corp__n--4{
  color: #0284c7;
}

[data-sp-embed] .id-invoice{
  position: relative;
  width: 100%;
  max-width: 11rem;
  color: #0f172a;
}

[data-sp-embed] .id-invoice__page, [data-sp-embed] .id-invoice__face{
  border-radius: 0.8rem;
  background: #fff;
  box-shadow: 0 12px 28px rgba(148, 163, 184, 0.18);
}

[data-sp-embed] .id-invoice__page{
  position: absolute;
  inset: 0;
  border: 1px solid rgba(226, 232, 240, 0.95);
}

[data-sp-embed] .id-invoice__page--1{
  transform: rotate(-4deg);
}

[data-sp-embed] .id-invoice__page--2{
  transform: rotate(5deg);
}

[data-sp-embed] .id-invoice__face{
  position: relative;
  z-index: 1;
  padding: 0.85rem 0.8rem 0.9rem;
  border: 1px solid rgba(241, 245, 249, 0.95);
}

[data-sp-embed] .id-invoice__ok{
  position: absolute;
  top: -0.45rem;
  right: -0.35rem;
  display: inline-flex;
  align-items: center;
  gap: 0.18rem;
  padding: 0.14rem 0.42rem;
  border-radius: 999px;
  background: #10b981;
  color: #fff;
  font-size: 0.58rem;
  font-weight: 800;
  box-shadow: 0 6px 14px rgba(16, 185, 129, 0.28);
}

[data-sp-embed] .id-invoice__badge{
  display: inline-block;
  margin-bottom: 0.35rem;
  padding: 0.12rem 0.4rem;
  border-radius: 0.3rem;
  background: #dc2626;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
}

[data-sp-embed] .id-invoice strong{
  display: block;
  font-size: 0.82rem;
}

[data-sp-embed] .id-invoice small{
  color: #64748b;
  font-size: 0.68rem;
}

[data-sp-embed] .id-invoice__send{
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  background: #10b981;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  text-align: center;
  line-height: 1.35;
  max-width: 100%;
}

[data-sp-embed].js .id-mem-block:not(.visible) .id-corp__parent, [data-sp-embed].js .id-mem-block:not(.visible) .id-corp__stem, [data-sp-embed].js .id-mem-block:not(.visible) .id-corp__branch, [data-sp-embed].js .id-mem-block:not(.visible) .id-corp__kid, [data-sp-embed].js .id-mem-block:not(.visible) .id-corp__grant, [data-sp-embed].js .id-mem-block:not(.visible) .id-corp__flow, [data-sp-embed].js .id-mem-block:not(.visible) .id-corp__cal, [data-sp-embed].js .id-mem-block:not(.visible) .id-corp__tally, [data-sp-embed].js .id-mem-block:not(.visible) .id-invoice, [data-sp-embed].js .id-mem-block:not(.visible) .id-invoice__send, [data-sp-embed].js .id-mem-block:not(.visible) .id-fam__owner, [data-sp-embed].js .id-mem-block:not(.visible) .id-fam__pay, [data-sp-embed].js .id-mem-block:not(.visible) .id-fam__kid, [data-sp-embed].js .id-mem-block:not(.visible) .id-fam__share, [data-sp-embed].js .id-mem-block:not(.visible) .id-fam__halo, [data-sp-embed].js .id-mem-block:not(.visible) .id-pts__chip, [data-sp-embed].js .id-mem-block:not(.visible) .id-pts__paid, [data-sp-embed].js .id-mem-block:not(.visible) .id-pts__gain, [data-sp-embed].js .id-mem-block:not(.visible) .id-pts__share, [data-sp-embed].js .id-mem-block:not(.visible) .id-pts__row-new{
  opacity: 0;
}

[data-sp-embed].js .id-mem-block.visible .id-corp__parent{
  animation: id-corp-parent 9s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

[data-sp-embed].js .id-mem-block.visible .id-corp__stem{
  animation: id-corp-stem 9s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

[data-sp-embed].js .id-mem-block.visible .id-corp__branch{
  animation: id-corp-branch 9s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

[data-sp-embed].js .id-mem-block.visible .id-corp__kid:not(.id-corp__kid--new){
  animation: id-corp-kid 9s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  animation-delay: calc(var(--i) * 0.08s);
}

[data-sp-embed].js .id-mem-block.visible .id-corp__kid--new{
  animation: id-corp-kid-new 9s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

[data-sp-embed].js .id-mem-block.visible .id-corp__plus{
  animation: id-corp-plus 9s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

[data-sp-embed].js .id-mem-block.visible .id-corp__letter{
  animation: id-corp-letter 9s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

[data-sp-embed].js .id-mem-block.visible .id-corp__ok{
  animation: id-corp-ok 9s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

[data-sp-embed].js .id-mem-block.visible .id-corp__grant{
  animation: id-corp-grant 9s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

[data-sp-embed].js .id-mem-block.visible .id-corp__flow{
  animation: id-corp-flow 9s ease-in-out infinite;
}

[data-sp-embed].js .id-mem-block.visible .id-corp__cal{
  animation: id-corp-cal 9s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

[data-sp-embed].js .id-mem-block.visible .id-corp__tally{
  animation: id-corp-tally 9s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

[data-sp-embed].js .id-mem-block.visible .id-corp__n--3{
  animation: id-corp-n3 9s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

[data-sp-embed].js .id-mem-block.visible .id-corp__n--4{
  animation: id-corp-n4 9s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

[data-sp-embed].js .id-mem-block.visible .id-invoice{
  animation: id-corp-invoice 9s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

[data-sp-embed].js .id-mem-block.visible .id-invoice__page--1{
  animation: id-corp-page1 9s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

[data-sp-embed].js .id-mem-block.visible .id-invoice__page--2{
  animation: id-corp-page2 9s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

[data-sp-embed].js .id-mem-block.visible .id-invoice__ok{
  animation: id-corp-send-ok 9s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

[data-sp-embed].js .id-mem-block.visible .id-invoice__send{
  animation: id-corp-done 9s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

[data-sp-embed] .id-fam__halo{
  position: absolute;
  left: 50%;
  top: 18%;
  width: 7.5rem;
  height: 7.5rem;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.28) 0%, rgba(251, 191, 36, 0) 72%);
  transform: translate(-50%, -50%) scale(0.7);
  pointer-events: none;
}

[data-sp-embed] .id-fam__lines{
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

[data-sp-embed] .id-fam__path{
  fill: none;
  stroke: #f59e0b;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-dasharray: 90;
  stroke-dashoffset: 0;
  filter: drop-shadow(0 0 3px rgba(251, 191, 36, 0.55));
}

[data-sp-embed] .id-fam__pulse{
  fill: none;
  stroke: #fff7ed;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 12 90;
  stroke-dashoffset: 90;
  opacity: 0;
  filter: drop-shadow(0 0 5px rgba(251, 191, 36, 0.85));
}

[data-sp-embed].js .id-mem-block:not(.visible) .id-fam__path{
  stroke-dashoffset: 90;
}

[data-sp-embed] .id-fam__owner{
  position: absolute;
  left: 50%;
  top: 6%;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 0.28rem;
  min-width: 12rem;
  padding: 0.72rem 0.95rem 0.7rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.8);
  color: #0f172a;
  text-align: center;
  box-shadow: 0 12px 26px rgba(245, 158, 11, 0.12);
  transform: translateX(-50%);
}

[data-sp-embed] .id-fam__owner span{
  width: 2.15rem;
  height: 2.15rem;
  background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
  font-size: 1rem;
  box-shadow: 0 0 0 4px rgba(253, 230, 138, 0.55);
}

[data-sp-embed] .id-fam__owner strong{
  font-size: 0.74rem;
  letter-spacing: 0.01em;
}

[data-sp-embed] .id-fam__pay{
  display: inline-flex;
  margin-top: 0.12rem;
  padding: 0.16rem 0.55rem;
  border-radius: 999px;
  background: rgba(255, 247, 237, 0.95);
  color: #b45309;
  font-size: 0.6rem;
  font-weight: 800;
  font-style: normal;
  letter-spacing: 0.02em;
  white-space: nowrap;
  border: 1px solid rgba(253, 230, 138, 0.85);
}

[data-sp-embed] .id-fam__kids{
  position: absolute;
  left: 5%;
  right: 5%;
  top: 52%;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
}

[data-sp-embed] .id-fam__kid{
  display: grid;
  justify-items: center;
  gap: 0.22rem;
  padding: 0.5rem 0.18rem 0.45rem;
  border-radius: 0.85rem;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.78);
  color: #0f172a;
  text-align: center;
  box-shadow: 0 8px 18px rgba(245, 158, 11, 0.1);
}

[data-sp-embed] .id-fam__kid small{
  font-size: 0.58rem;
  font-weight: 700;
  color: #78716c;
  white-space: nowrap;
}

[data-sp-embed] .id-fam__kid span{
  position: relative;
  width: 2.05rem;
  height: 2.05rem;
  background: linear-gradient(180deg, #fb923c 0%, #ea580c 100%);
  font-size: 0.92rem;
}

[data-sp-embed] .id-fam__plus, [data-sp-embed] .id-fam__face{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.92rem;
  font-style: normal;
  font-weight: 800;
}

[data-sp-embed] .id-fam__plus{
  font-size: 1rem;
  color: #fff;
  opacity: 0;
}

[data-sp-embed] .id-fam__face{
  opacity: 1;
}

[data-sp-embed] .id-fam__kid--new{
  border-style: dashed;
  border-color: rgba(251, 191, 36, 0.7);
  background: rgba(255, 251, 235, 0.78);
}

[data-sp-embed] .id-fam__kid--new span{
  background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
}

[data-sp-embed] .id-fam__share{
  position: absolute;
  left: 50%;
  bottom: 0.62rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.26rem 0.7rem;
  border-radius: 999px;
  background: linear-gradient(90deg, #f59e0b 0%, #ea580c 100%);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(245, 158, 11, 0.32);
  transform: translateX(-50%);
}

[data-sp-embed].js .id-mem-block.visible .id-fam__halo{
  animation: id-fam-halo 0.7s ease-out 0.04s both;
}

[data-sp-embed].js .id-mem-block.visible .id-fam__owner{
  animation: id-fam-owner 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.04s both;
}

[data-sp-embed].js .id-mem-block.visible .id-fam__pay{
  animation: id-fam-pay 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}

[data-sp-embed].js .id-mem-block.visible .id-fam__path{
  animation: id-fam-draw 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(0.34s + var(--i) * 0.16s);
}

[data-sp-embed].js .id-mem-block.visible .id-fam__path--late{
  animation-name: id-fam-draw;
  animation-delay: 0.66s;
}

[data-sp-embed].js .id-mem-block.visible .id-fam__pulse{
  animation: id-fam-pulse 1.35s linear infinite;
  animation-delay: calc(0.72s + var(--i) * 0.18s);
}

[data-sp-embed].js .id-mem-block.visible .id-fam__pulse--late{
  animation-name: id-fam-pulse;
  animation-delay: 1.08s;
}

[data-sp-embed].js .id-mem-block.visible .id-fam__kid:not(.id-fam__kid--new){
  animation: id-fam-kid 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(0.52s + var(--i) * 0.22s);
}

[data-sp-embed].js .id-mem-block.visible .id-fam__kid--new{
  animation: id-fam-kid-new 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.96s both;
}

[data-sp-embed].js .id-mem-block.visible .id-fam__plus{
  animation: id-fam-plus 0.32s cubic-bezier(0.22, 1, 0.36, 1) 1.12s both;
}

[data-sp-embed].js .id-mem-block.visible .id-fam__face{
  animation: id-fam-face 0.32s cubic-bezier(0.22, 1, 0.36, 1) 1.12s both;
}

[data-sp-embed].js .id-mem-block.visible .id-fam__share{
  animation: id-fam-share 0.5s cubic-bezier(0.22, 1, 0.36, 1) 1.28s both;
}

[data-sp-embed] .id-pts{
  display: grid;
  place-items: center;
  isolation: isolate;
  min-height: 340px;
  padding-bottom: 3.4rem;
}

[data-sp-embed] .id-pts__book{
  position: relative;
  z-index: 2;
  width: min(17.6rem, 86%);
  padding: 0.95rem 1rem 0.85rem;
  border-radius: 1.15rem;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.72);
  color: #0f172a;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 16px 36px rgba(180, 83, 9, 0.1);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

[data-sp-embed] .id-pts__head{
  display: flex;
  align-items: center;
  gap: 0.62rem;
  padding-bottom: 0.72rem;
  border-bottom: 1px solid rgba(253, 230, 138, 0.7);
}

[data-sp-embed] .id-pts__mark{
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: linear-gradient(145deg, #fbbf24, #d97706);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  flex-shrink: 0;
  box-shadow: 0 8px 16px rgba(217, 119, 6, 0.28);
}

[data-sp-embed] .id-pts__head strong, [data-sp-embed] .id-pts__head small{
  display: block;
}

[data-sp-embed] .id-pts__head strong{
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

[data-sp-embed] .id-pts__head small{
  margin-top: 0.08rem;
  font-size: 0.68rem;
  color: #b45309;
  font-weight: 700;
}

[data-sp-embed] .id-pts__balance{
  display: grid;
  gap: 0.12rem;
  margin: 0.85rem 0 0.7rem;
  padding: 0.62rem 0.7rem 0.7rem;
  border-radius: 0.85rem;
  background:
    linear-gradient(180deg, rgba(255, 251, 235, 0.92) 0%, rgba(254, 243, 199, 0.55) 100%);
  border: 1px solid rgba(253, 224, 71, 0.45);
}

[data-sp-embed] .id-pts__balance span{
  font-size: 0.68rem;
  font-weight: 700;
  color: #92400e;
}

[data-sp-embed] .id-pts__balance strong{
  display: flex;
  align-items: baseline;
  gap: 0.28rem;
  color: #78350f;
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

[data-sp-embed] .id-pts__num{
  font-style: normal;
}

[data-sp-embed] .id-pts__balance i{
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 800;
  color: #b45309;
}

[data-sp-embed] .id-pts__ledger{
  display: grid;
  gap: 0.32rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-sp-embed] .id-pts__ledger li{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.28rem 0.12rem;
  font-size: 0.68rem;
  font-weight: 700;
  color: #64748b;
}

[data-sp-embed] .id-pts__ledger b{
  color: #c2410c;
  font-weight: 800;
}

[data-sp-embed] .id-pts__row-new{
  max-height: 0;
  padding: 0 0.42rem;
  overflow: hidden;
  border-radius: 0.55rem;
  background: rgba(254, 243, 199, 0.72);
  color: #92400e;
  opacity: 0;
}

[data-sp-embed] .id-pts__chip, [data-sp-embed] .id-pts__paid, [data-sp-embed] .id-pts__gain, [data-sp-embed] .id-pts__share{
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.28rem 0.62rem;
  border-radius: 999px;
  font-size: 0.64rem;
  font-weight: 800;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
}

[data-sp-embed] .id-pts__chip{
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 10px 22px rgba(180, 83, 9, 0.12);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

[data-sp-embed] .id-pts__chip--own{
  left: 4%;
  top: 10%;
  color: #c2410c;
}

[data-sp-embed] .id-pts__chip--ext{
  right: 4%;
  top: 10%;
  color: #0369a1;
}

[data-sp-embed] .id-pts__paid{
  left: 50%;
  bottom: 1.15rem;
  transform: translateX(-50%);
  background: #0f172a;
  color: #fff;
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.18);
}

[data-sp-embed] .id-pts__gain{
  left: 50%;
  bottom: 3.05rem;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #78350f;
  box-shadow: 0 12px 24px rgba(245, 158, 11, 0.32);
}

[data-sp-embed] .id-pts__share{
  left: 50%;
  bottom: 0.55rem;
  transform: translateX(-50%);
  background: #10b981;
  color: #fff;
  box-shadow: 0 10px 20px rgba(16, 185, 129, 0.28);
}

[data-sp-embed].js .id-mem-block.visible .id-pts__book{
  animation: id-apple-rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

[data-sp-embed].js .id-mem-block.visible .id-pts__mark{
  animation: id-pts-mark 3.8s ease-in-out 1.1s infinite;
}

[data-sp-embed] .id-pts.is-paid .id-pts__paid{
  animation: id-pts-paid 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}

[data-sp-embed] .id-pts.is-gain .id-pts__gain{
  animation: id-pts-bounce 0.85s cubic-bezier(0.22, 1.45, 0.36, 1) both;
}

[data-sp-embed] .id-pts.is-gain .id-pts__chip--own{
  animation: id-pts-chip 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both;
}

[data-sp-embed] .id-pts.is-sum .id-pts__balance{
  animation: id-pts-glow 1.1s ease-out both;
}

[data-sp-embed] .id-pts.is-sum .id-pts__num{
  animation: id-pts-tick 0.9s ease-out both;
}

[data-sp-embed] .id-pts.is-sum .id-pts__row-new{
  max-height: 2rem;
  padding: 0.32rem 0.42rem;
  animation: id-pts-row 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}

[data-sp-embed] .id-pts.is-share .id-pts__share{
  animation: id-pts-share 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

[data-sp-embed] .id-pts.is-share .id-pts__chip--ext{
  animation: id-pts-chip 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

[data-sp-embed] .id-pts.is-share .id-pts__paid{
  opacity: 0;
  animation: none;
}

@keyframes id-apple-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes id-apple-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(14, 165, 233, 0); }
  50% { transform: scale(1.045); box-shadow: 0 0 0 7px rgba(14, 165, 233, 0.1); }
}

@keyframes id-mem-stem {
  from { transform: scaleY(0); opacity: 0; }
  to { transform: scaleY(1); opacity: 1; }
}

@keyframes id-invoice-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes id-invoice-send {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes id-corp-parent {
  0%, 2% { opacity: 0; transform: translateY(8px); }
  8%, 92% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(0); }
}

@keyframes id-corp-stem {
  0%, 6% { opacity: 0; transform: scaleY(0); }
  12%, 92% { opacity: 1; transform: scaleY(1); }
  100% { opacity: 0; transform: scaleY(1); }
}

@keyframes id-corp-branch {
  0%, 8% { opacity: 0; transform: scaleX(0); }
  14%, 92% { opacity: 1; transform: scaleX(1); }
  100% { opacity: 0; }
}

@keyframes id-corp-kid {
  0%, 8% { opacity: 0; transform: translateY(10px) scale(0.92); }
  16%, 92% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(0) scale(1); }
}

@keyframes id-corp-kid-new {
  0%, 17% { opacity: 0; transform: translateY(12px) scale(0.6); }
  22% { opacity: 1; transform: translateY(0) scale(1.08); }
  26%, 92% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(0) scale(1); }
}

@keyframes id-corp-plus {
  0%, 17% { opacity: 1; transform: scale(1); }
  24% { opacity: 0; transform: scale(0.4); }
  26%, 100% { opacity: 0; }
}

@keyframes id-corp-letter {
  0%, 22% { opacity: 0; transform: scale(0.4); }
  28%, 100% { opacity: 1; transform: scale(1); }
}

@keyframes id-corp-ok {
  0%, 26% { opacity: 0; transform: scale(0.4); }
  32%, 92% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; }
}

@keyframes id-corp-grant {
  0%, 28% { opacity: 0; transform: translateY(8px) scale(0.92); }
  34% { opacity: 1; transform: translateY(0) scale(1.04); }
  38%, 92% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; }
}

@keyframes id-corp-flow {
  0%, 36% { opacity: 0; transform: translateX(-4px); }
  42%, 86% { opacity: 1; transform: translateX(0); }
  92%, 100% { opacity: 0; }
}

@keyframes id-corp-cal {
  0%, 36% { opacity: 0; transform: translateY(8px); }
  42%, 92% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; }
}

@keyframes id-corp-tally {
  0%, 38% { opacity: 0; transform: translateY(10px); }
  44%, 92% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; }
}

@keyframes id-corp-n3 {
  0%, 42% { opacity: 1; transform: scale(1); }
  48% { opacity: 0; transform: scale(0.6) translateY(-6px); }
  50%, 100% { opacity: 0; }
}

@keyframes id-corp-n4 {
  0%, 44% { opacity: 0; transform: scale(0.6) translateY(8px); }
  50% { opacity: 1; transform: scale(1.12); }
  54%, 100% { opacity: 1; transform: scale(1); }
}

@keyframes id-corp-invoice {
  0%, 50% { opacity: 0; transform: translateY(16px) scale(0.92); }
  58% { opacity: 1; transform: translateY(0) scale(1.03); }
  62%, 92% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; }
}

@keyframes id-corp-page1 {
  0%, 52% { transform: rotate(-12deg) translate(-6px, 4px); }
  62%, 100% { transform: rotate(-4deg); }
}

@keyframes id-corp-page2 {
  0%, 52% { transform: rotate(14deg) translate(7px, 3px); }
  62%, 100% { transform: rotate(5deg); }
}

@keyframes id-corp-send-ok {
  0%, 64% { opacity: 0; transform: scale(0.7) translateY(6px); }
  70% { opacity: 1; transform: scale(1.06) translateY(0); }
  74%, 92% { opacity: 1; transform: scale(1) translateY(0); }
  100% { opacity: 0; }
}

@keyframes id-corp-done {
  0%, 70% { opacity: 0; transform: translateY(8px); }
  76% { opacity: 1; transform: translateY(0) scale(1.04); }
  80%, 92% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; }
}

@keyframes id-fam-halo {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.65); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes id-fam-owner {
  from { opacity: 0; transform: translateX(-50%) translateY(12px) scale(0.96); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

@keyframes id-fam-pay {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes id-fam-draw {
  from { stroke-dashoffset: 90; opacity: 0; }
  to { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes id-fam-draw-late {
  from { stroke-dashoffset: 90; opacity: 0; }
  to { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes id-fam-pulse {
  0% { stroke-dashoffset: 90; opacity: 0; }
  14% { opacity: 1; }
  82% { opacity: 0.2; }
  100% { stroke-dashoffset: -22; opacity: 0; }
}

@keyframes id-fam-pulse-late {
  0% { stroke-dashoffset: 90; opacity: 0; }
  14% { opacity: 1; }
  82% { opacity: 0.2; }
  100% { stroke-dashoffset: -22; opacity: 0; }
}

@keyframes id-fam-kid {
  from { opacity: 0; transform: translateY(14px) scale(0.92); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes id-fam-kid-new {
  0% { opacity: 0; transform: translateY(16px) scale(0.72); }
  68% { opacity: 1; transform: translateY(-5px) scale(1.06); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes id-fam-plus {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.35); }
}

@keyframes id-fam-face {
  from { opacity: 0; transform: scale(0.35); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes id-fam-share {
  0% { opacity: 0; transform: translateX(-50%) translateY(10px) scale(0.92); }
  72% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.04); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

@keyframes id-pts-mark {
  0%, 100% { transform: scale(1); box-shadow: 0 8px 16px rgba(217, 119, 6, 0.28); }
  50% { transform: scale(1.06); box-shadow: 0 0 0 7px rgba(251, 191, 36, 0.18); }
}

@keyframes id-pts-paid {
  from { opacity: 0; transform: translateX(-50%) translateY(10px) scale(0.92); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

@keyframes id-pts-bounce {
  0% { opacity: 0; transform: translateX(-50%) translateY(26px) scale(0.72); }
  58% { opacity: 1; transform: translateX(-50%) translateY(-8px) scale(1.1); }
  78% { transform: translateX(-50%) translateY(3px) scale(0.98); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

@keyframes id-pts-chip {
  from { opacity: 0; transform: translateY(-8px) scale(0.92); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes id-pts-row {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes id-pts-tick {
  0% { transform: scale(1); }
  35% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

@keyframes id-pts-glow {
  0% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0); }
  40% { box-shadow: 0 0 0 8px rgba(251, 191, 36, 0.22); }
  100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0); }
}

@keyframes id-pts-share {
  0% { opacity: 0; transform: translateX(-50%) scale(0.86); }
  55% { opacity: 1; transform: translateX(-50%) scale(1.06); }
  100% { opacity: 1; transform: translateX(-50%) scale(1); }
}

@media not all /* iOS Reduce Motion: keep animations */ {
  [data-sp-embed].js .id-mem-block.visible .id-pts__book, [data-sp-embed].js .id-mem-block.visible .id-pts__mark, [data-sp-embed] .id-pts.is-paid .id-pts__paid, [data-sp-embed] .id-pts.is-gain .id-pts__gain, [data-sp-embed] .id-pts.is-gain .id-pts__chip--own, [data-sp-embed] .id-pts.is-sum .id-pts__balance, [data-sp-embed] .id-pts.is-sum .id-pts__num, [data-sp-embed] .id-pts.is-sum .id-pts__row-new, [data-sp-embed] .id-pts.is-share .id-pts__share, [data-sp-embed] .id-pts.is-share .id-pts__chip--ext{
    animation: none !important;
  }

  [data-sp-embed] .id-pts.is-paid .id-pts__paid, [data-sp-embed] .id-pts.is-gain .id-pts__gain, [data-sp-embed] .id-pts.is-gain .id-pts__chip--own, [data-sp-embed] .id-pts.is-sum .id-pts__row-new, [data-sp-embed] .id-pts.is-share .id-pts__share, [data-sp-embed] .id-pts.is-share .id-pts__chip--ext{
    opacity: 1;
  }

  [data-sp-embed] .id-pts.is-share .id-pts__paid{
    opacity: 0;
  }
}

@media (min-width: 900px) {
  [data-sp-embed] .id-mem-block{
    flex-direction: row;
    align-items: center;
  }

  [data-sp-embed] .id-mem-block--reverse{
    flex-direction: row-reverse;
  }

  [data-sp-embed] .id-mem-block__visual, [data-sp-embed] .id-mem-block__copy{
    flex: 1 1 0;
  }
}

@media (max-width: 899px) {
  [data-sp-embed] .id-mem-blocks{
    width: calc(100% - 2rem);
  }

  [data-sp-embed] .id-corp{
    grid-template-columns: 1fr;
    gap: 0.9rem;
    min-height: 0;
  }

  [data-sp-embed] .id-corp__flow{
    display: none;
  }

  [data-sp-embed] .id-invoice{
    max-width: 14rem;
  }

  [data-sp-embed] .id-pts__chip{
    font-size: 0.56rem;
    padding: 0.22rem 0.48rem;
  }

  [data-sp-embed] .id-pts__chip--own, [data-sp-embed] .id-pts__chip--ext{
    top: 6%;
  }

  [data-sp-embed] .id-fam__owner{
    min-width: 10.5rem;
    padding: 0.58rem 0.7rem 0.55rem;
  }

  [data-sp-embed] .id-fam__share{
    font-size: 0.54rem;
    padding: 0.2rem 0.5rem;
  }

  [data-sp-embed] .id-fam__kid small{
    font-size: 0.52rem;
  }

  [data-sp-embed] .id-mem-tag--family{
    white-space: normal;
    max-width: 100%;
  }
}

@media not all /* iOS Reduce Motion: keep animations */ {
  [data-sp-embed].js .id-mem-block.visible .id-corp__parent, [data-sp-embed].js .id-mem-block.visible .id-corp__stem, [data-sp-embed].js .id-mem-block.visible .id-corp__branch, [data-sp-embed].js .id-mem-block.visible .id-corp__kid, [data-sp-embed].js .id-mem-block.visible .id-corp__kid--new, [data-sp-embed].js .id-mem-block.visible .id-corp__plus, [data-sp-embed].js .id-mem-block.visible .id-corp__letter, [data-sp-embed].js .id-mem-block.visible .id-corp__ok, [data-sp-embed].js .id-mem-block.visible .id-corp__grant, [data-sp-embed].js .id-mem-block.visible .id-corp__flow, [data-sp-embed].js .id-mem-block.visible .id-corp__cal, [data-sp-embed].js .id-mem-block.visible .id-corp__tally, [data-sp-embed].js .id-mem-block.visible .id-corp__n--3, [data-sp-embed].js .id-mem-block.visible .id-corp__n--4, [data-sp-embed].js .id-mem-block.visible .id-invoice, [data-sp-embed].js .id-mem-block.visible .id-invoice__page--1, [data-sp-embed].js .id-mem-block.visible .id-invoice__page--2, [data-sp-embed].js .id-mem-block.visible .id-invoice__ok, [data-sp-embed].js .id-mem-block.visible .id-invoice__send{
    animation: none !important;
    opacity: 1;
    transform: none;
  }

  [data-sp-embed].js .id-mem-block.visible .id-fam__halo, [data-sp-embed].js .id-mem-block.visible .id-fam__owner, [data-sp-embed].js .id-mem-block.visible .id-fam__pay, [data-sp-embed].js .id-mem-block.visible .id-fam__path, [data-sp-embed].js .id-mem-block.visible .id-fam__kid, [data-sp-embed].js .id-mem-block.visible .id-fam__face, [data-sp-embed].js .id-mem-block.visible .id-fam__share{
    animation: none !important;
    opacity: 1;
  }

  [data-sp-embed].js .id-mem-block.visible .id-fam__owner, [data-sp-embed].js .id-mem-block.visible .id-fam__share{
    transform: translateX(-50%);
  }

  [data-sp-embed].js .id-mem-block.visible .id-fam__path{
    stroke-dashoffset: 0;
  }

  [data-sp-embed].js .id-mem-block.visible .id-fam__pulse, [data-sp-embed].js .id-mem-block.visible .id-fam__plus{
    animation: none !important;
    opacity: 0;
  }

  [data-sp-embed].js .id-mem-block.visible .id-corp__plus, [data-sp-embed].js .id-mem-block.visible .id-corp__n--3{
    opacity: 0;
  }
}

/* ===== PAYMENT & BILLING zigzag ===== */
[data-sp-embed] .id-pay-blocks{
  display: grid;
  gap: clamp(5.5rem, 9vw, 7rem);
  width: min(1120px, calc(100% - 4rem));
  margin: 0 auto;
}

[data-sp-embed] .id-pay-block{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(1.75rem, 3.2vw, 2.75rem);
  padding: clamp(1.4rem, 2.8vw, 2rem);
  border-radius: 1.5rem;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow: 0 22px 50px rgb(241 245 249 / 0.5);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  overflow: hidden;
}

[data-sp-embed] .id-pay-block__visual, [data-sp-embed] .id-pay-block__copy{
  min-width: 0;
}

[data-sp-embed] .id-pay-block__copy{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
  text-align: left;
  padding-inline: 0.15rem;
}

[data-sp-embed] .id-pay-tag{
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.35em;
  margin-bottom: 0;
  padding: 0.32rem 0.82rem;
  border-radius: 999px;
  background: #e0e7ff;
  color: #4338ca;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

[data-sp-embed] .id-pay-tag--sub{
  background: #ede9fe;
  color: #6d28d9;
}

[data-sp-embed] .id-pay-tag--flow{
  background: #ccfbf1;
  color: #0f766e;
}

[data-sp-embed] .id-pay-block__copy h3{
  margin: 0;
  font-size: clamp(1.25rem, 1rem + 1.1vw, 1.85rem);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.02em;
}

[data-sp-embed] .id-pay-block__copy p{
  margin: 0;
  font-size: clamp(0.92rem, 0.2vw + 0.86rem, 1.02rem);
  line-height: 1.9;
  color: #4b5563;
}

[data-sp-embed] .id-pay-viz{
  min-height: 280px;
  height: 100%;
}

[data-sp-embed] .id-pay-viz--gw .id-apple-glow{
  background: linear-gradient(90deg, rgba(199, 210, 254, 0.5), rgba(191, 219, 254, 0.32), rgba(233, 213, 255, 0.4));
}

[data-sp-embed] .id-pay-viz--sub .id-apple-glow{
  background: linear-gradient(90deg, rgba(221, 214, 254, 0.5), rgba(237, 233, 254, 0.32), rgba(254, 215, 226, 0.28));
}

[data-sp-embed] .id-pay-viz--flow{
  display: grid;
  place-items: center;
  min-height: 320px;
  padding: 1.15rem 0.75rem;
  background:
    linear-gradient(165deg, rgba(238, 242, 255, 0.5) 0%, rgba(255, 255, 255, 0.86) 48%, rgba(224, 231, 255, 0.32) 100%);
}

[data-sp-embed] .id-pay-viz--flow .id-apple-glow{
  background: linear-gradient(90deg, rgba(199, 210, 254, 0.55), rgba(255, 255, 255, 0.28), rgba(165, 180, 252, 0.38));
}

[data-sp-embed] .id-gw, [data-sp-embed] .id-cal, [data-sp-embed] .id-tap{
  position: relative;
  height: 100%;
  min-height: 280px;
}

[data-sp-embed] .id-gw__wires{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

[data-sp-embed] .id-gw__wires--mobile{
  display: none;
}

[data-sp-embed] .id-gw__wire{
  fill: none;
  stroke: rgba(79, 70, 229, 0.22);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 180;
  stroke-dashoffset: 0;
}

[data-sp-embed] .id-gw__pulse{
  fill: none;
  stroke: #6366f1;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 26 220;
  stroke-dashoffset: 80;
  opacity: 0;
  filter: drop-shadow(0 0 4px rgba(99, 102, 241, 0.55));
}

[data-sp-embed] .id-gw__src{
  position: absolute;
  left: 5%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

[data-sp-embed] .id-gw-easy{
  position: relative;
  width: 8.1rem;
  height: 6.4rem;
}

[data-sp-embed] .id-gw-wallet{
  position: relative;
  width: 7.35rem;
  height: 5.2rem;
}

[data-sp-embed] .id-gw-card{
  position: absolute;
  left: 0;
  top: 0.45rem;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 0.12rem;
  width: 7.1rem;
  height: 4.35rem;
  padding: 0.42rem 0.5rem 0.38rem;
  border-radius: 0.55rem;
  color: #eef2ff;
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.16);
  transform: translate(var(--x, 0), var(--y, 0)) rotate(var(--rot, 0deg)) scale(0.92);
  transform-origin: 50% 80%;
}

[data-sp-embed] .id-gw-card--visa{
  --rot: -15deg;
  --x: -0.55rem;
  --y: 0.7rem;
  z-index: 1;
  background: linear-gradient(135deg, #312e81 0%, #4338ca 48%, #6366f1 100%);
}

[data-sp-embed] .id-gw-card--mc{
  --rot: -5deg;
  --x: -0.15rem;
  --y: 0.28rem;
  z-index: 2;
  background: linear-gradient(135deg, #7f1d1d 0%, #b91c1c 46%, #f97316 100%);
}

[data-sp-embed] .id-gw-card--jcb{
  --rot: 5deg;
  --x: 0.2rem;
  --y: 0.28rem;
  z-index: 3;
  background: linear-gradient(135deg, #134e4a 0%, #0f766e 48%, #14b8a6 100%);
}

[data-sp-embed] .id-gw-card--amex{
  --rot: 15deg;
  --x: 0.55rem;
  --y: 0.7rem;
  z-index: 1;
  background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 48%, #38bdf8 100%);
}

[data-sp-embed] .id-gw-card__chip{
  width: 1.05rem;
  height: 0.72rem;
  border-radius: 0.18rem;
  background: linear-gradient(135deg, #fde68a, #f59e0b);
}

[data-sp-embed] .id-gw-card__num{
  align-self: end;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

[data-sp-embed] .id-gw-card em{
  justify-self: end;
  font-style: normal;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

[data-sp-embed] .id-gw-tap{
  position: absolute;
  left: 50%;
  bottom: -0.15rem;
  z-index: 6;
  padding: 0.2rem 0.52rem;
  border-radius: 999px;
  background: #059669;
  color: #fff;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  box-shadow: 0 8px 16px rgba(5, 150, 105, 0.22);
  transform: translateX(-50%);
  white-space: nowrap;
}

[data-sp-embed] .id-gw__core{
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.42rem;
  transform: translate(-50%, -50%);
}

[data-sp-embed] .id-gw__lock{
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 1rem;
  color: #4338ca;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 10px 24px rgba(67, 56, 202, 0.16);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

[data-sp-embed] .id-gw__gate{
  position: absolute;
  right: 5%;
  z-index: 2;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 0.45rem;
  align-items: center;
  min-width: 8.4rem;
  max-width: 10.4rem;
  padding: 0.52rem 0.62rem 0.48rem;
  border-radius: 0.95rem;
  background: rgba(255, 255, 255, 0.8);
  color: #0f172a;
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

[data-sp-embed].js .id-pay-block:not(.visible) .id-gw__gate, [data-sp-embed].js .id-pay-block:not(.visible) .id-gw__badge, [data-sp-embed].js .id-pay-block:not(.visible) .id-gw__toast, [data-sp-embed].js .id-pay-block:not(.visible) .id-gw-tap{
  opacity: 0;
}

[data-sp-embed].js .id-pay-block:not(.visible) .id-gw__wire{
  stroke-dashoffset: 180;
}

[data-sp-embed] .id-gw__gate--dom{ top: 14%; }
[data-sp-embed] .id-gw__gate--glob{ bottom: 14%; }

[data-sp-embed] .id-gw__flag{
  grid-row: 1 / span 2;
  font-size: 1.05rem;
  line-height: 1;
}

[data-sp-embed] .id-gw__gate strong{
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

[data-sp-embed] .id-gw__gate small{
  color: #64748b;
  font-size: 0.58rem;
  font-weight: 650;
  letter-spacing: 0.01em;
}

[data-sp-embed] .id-gw__badge{
  position: relative;
  z-index: 4;
  padding: 0.22rem 0.58rem;
  border-radius: 999px;
  background: #4338ca;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  box-shadow: 0 8px 16px rgba(67, 56, 202, 0.2);
  white-space: nowrap;
}

[data-sp-embed] .id-gw__toast{
  position: absolute;
  left: 50%;
  top: 10%;
  z-index: 5;
  padding: 0.26rem 0.68rem;
  border-radius: 999px;
  background: #059669;
  color: #fff;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 10px 20px rgba(5, 150, 105, 0.22);
  opacity: 0;
  transform: translate(-50%, 8px);
  white-space: nowrap;
  pointer-events: none;
}

[data-sp-embed].js .id-pay-block.visible .id-gw__wire--in{
  animation: id-pay-draw 1.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

[data-sp-embed].js .id-pay-block.visible .id-gw__wire--dom{
  animation: id-gw-wire-dom 8.4s ease-in-out 0.35s both infinite;
}

[data-sp-embed].js .id-pay-block.visible .id-gw__wire--glob{
  animation: id-gw-wire-glob 8.4s ease-in-out 0.35s both infinite;
}

[data-sp-embed].js .id-pay-block.visible .id-gw__pulse--dom{
  animation: id-gw-pulse-dom 8.4s linear 0.35s both infinite;
}

[data-sp-embed].js .id-pay-block.visible .id-gw__pulse--glob{
  animation: id-gw-pulse-glob 8.4s linear 0.35s both infinite;
}

[data-sp-embed].js .id-pay-block.visible .id-gw__lock{
  animation: id-gw-lock 8.4s ease-in-out 0.35s infinite;
}

[data-sp-embed].js .id-pay-block.visible .id-gw__gate--dom{
  animation: id-gw-gate-dom 8.4s ease-in-out 0.35s both infinite;
}

[data-sp-embed].js .id-pay-block.visible .id-gw__gate--glob{
  animation: id-gw-gate-glob 8.4s ease-in-out 0.35s both infinite;
}

[data-sp-embed].js .id-pay-block.visible .id-gw__badge{
  animation: id-gw-badge 1s cubic-bezier(0.16, 1, 0.3, 1) 0.7s both;
}

[data-sp-embed].js .id-pay-block.visible .id-gw__toast{
  animation: id-gw-toast 8.4s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both infinite;
}

[data-sp-embed].js .id-pay-block.visible .id-gw-card{
  animation: id-gw-card-cycle 8.4s cubic-bezier(0.22, 1, 0.36, 1) both infinite;
  animation-delay: calc(var(--i) * -2.1s);
}

[data-sp-embed].js .id-pay-block.visible .id-gw-tap{
  animation: id-gw-tap 8.4s cubic-bezier(0.22, 1, 0.36, 1) both infinite;
}

[data-sp-embed] .id-cal{
  display: grid;
  align-content: center;
  gap: 0.45rem;
  padding: 1.05rem 1.1rem 1rem;
}

[data-sp-embed] .id-cal__head{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  color: #4c1d95;
}

[data-sp-embed] .id-cal__head strong{
  font-size: 0.82rem;
  font-weight: 800;
}

[data-sp-embed] .id-cal__head span, [data-sp-embed] .id-cal__week{
  font-size: 0.62rem;
  font-weight: 700;
  color: #7c3aed;
}

[data-sp-embed] .id-cal__week{
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  text-align: center;
  opacity: 0.72;
}

[data-sp-embed] .id-cal__grid{
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.22rem;
}

[data-sp-embed] .id-cal__grid span{
  display: grid;
  place-items: center;
  min-height: 1.45rem;
  border-radius: 0.42rem;
  font-size: 0.62rem;
  font-weight: 700;
  color: #64748b;
  transition:
    background 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

[data-sp-embed] .id-cal__grid .is-trial{
  background: rgba(16, 185, 129, 0.1);
  color: #047857;
}

[data-sp-embed] .id-cal__grid .is-renew{
  background: rgba(139, 92, 246, 0.12);
  color: #6d28d9;
}

[data-sp-embed] .id-cal__grid .is-recover{
  background: rgba(245, 158, 11, 0.1);
  color: #b45309;
}

[data-sp-embed] .id-cal__grid .is-lit{
  background: rgba(16, 185, 129, 0.22);
  color: #047857;
}

[data-sp-embed] .id-cal__grid .is-cursor{
  background: #fff;
  color: #047857;
  box-shadow:
    0 0 0 2px #34d399,
    0 0 14px rgba(52, 211, 153, 0.4);
  transform: scale(1.08);
}

[data-sp-embed] .id-cal__grid .is-renew.is-cursor{
  color: #6d28d9;
  box-shadow:
    0 0 0 2px #8b5cf6,
    0 0 14px rgba(139, 92, 246, 0.38);
}

[data-sp-embed] .id-cal__grid .is-err{
  background: #fef3c7;
  color: #b45309;
  box-shadow:
    0 0 0 2px #f59e0b,
    0 0 12px rgba(245, 158, 11, 0.35);
}

[data-sp-embed] .id-cal__grid .is-retry{
  background: #fff7ed;
  color: #c2410c;
  box-shadow: 0 0 0 2px #fb923c;
  animation: id-cal-retry-pulse 0.55s ease-in-out infinite;
}

[data-sp-embed] .id-cal__grid .is-ok{
  background: #059669;
  color: #fff;
  box-shadow: 0 6px 14px rgba(5, 150, 105, 0.28);
}

[data-sp-embed] .id-cal__bar{
  height: 0.42rem;
  margin-top: 0.2rem;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.12);
  overflow: hidden;
}

[data-sp-embed] .id-cal__fill{
  display: block;
  width: 8%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #34d399, #8b5cf6);
  transition: width 200ms ease;
}

[data-sp-embed] .id-cal__status{
  position: relative;
  min-height: 1.7rem;
}

[data-sp-embed] .id-cal__badge{
  position: absolute;
  left: 50%;
  top: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.22rem 0.58rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 8px) scale(0.96);
  pointer-events: none;
  transition:
    opacity 220ms ease,
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

[data-sp-embed] .id-cal__badge.is-on{
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

[data-sp-embed] .id-cal__badge--trial{ color: #047857; }
[data-sp-embed] .id-cal__badge--auto{ color: #6d28d9; }
[data-sp-embed] .id-cal__badge--paid, [data-sp-embed] .id-cal__badge--recover{ color: #047857; }
[data-sp-embed] .id-cal__badge--err{ color: #b45309; }
[data-sp-embed] .id-cal__badge--retry{ color: #c2410c; }

@keyframes id-cal-retry-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

[data-sp-embed] .id-tap{
  --id-tap-loop: 24s;
  --id-tap-act: 8s;
  display: grid;
  place-items: center;
  height: auto;
  min-height: 0;
}

[data-sp-embed] .id-tap-phone{
  position: relative;
  z-index: 3;
  width: 9.45rem;
  height: 16.9rem;
  padding: 0.55rem 0.48rem 0.5rem;
  border-radius: 1.55rem;
  background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow:
    0 22px 40px rgba(148, 163, 184, 0.28),
    inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

[data-sp-embed] .id-tap-phone__notch{
  width: 2.45rem;
  height: 0.28rem;
  margin: 0 auto 0.38rem;
  border-radius: 999px;
  background: #cbd5e1;
}

[data-sp-embed] .id-tap-phone__screen{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
  height: calc(100% - 0.66rem);
  overflow: hidden;
  padding: 0.72rem 0.62rem 0.58rem;
  border-radius: 0.95rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 250, 252, 0.92) 100%);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

[data-sp-embed] .id-tap__wave{
  position: absolute;
  left: 50%;
  bottom: 2.6rem;
  z-index: 0;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 999px;
  border: 1.5px solid rgba(16, 185, 129, 0.45);
  transform: translate(-50%, 0) scale(0.4);
  opacity: 0;
  pointer-events: none;
}

[data-sp-embed] .id-tap__product, [data-sp-embed] .id-tap__sso-label, [data-sp-embed] .id-tap__sso, [data-sp-embed] .id-tap__wallet, [data-sp-embed] .id-tap__pay, [data-sp-embed] .id-tap__hint{
  position: relative;
  z-index: 1;
}

[data-sp-embed] .id-tap__product{
  display: grid;
  justify-items: start;
  gap: 0.12rem;
  padding-bottom: 0.32rem;
  border-bottom: 1px solid rgba(226, 232, 240, 0.9);
}

[data-sp-embed] .id-tap__product span{
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #64748b;
}

[data-sp-embed] .id-tap__product strong{
  font-size: 0.72rem;
  font-weight: 800;
  color: #0f172a;
}

[data-sp-embed] .id-tap__product b{
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #312e81;
}

[data-sp-embed] .id-tap__sso-label{
  display: grid;
  place-items: center;
  min-height: 0.82rem;
  margin: 0;
}

[data-sp-embed] .id-tap__sso-idle, [data-sp-embed] .id-tap__sso-ok{
  grid-area: 1 / 1;
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

[data-sp-embed] .id-tap__sso-idle{
  color: #64748b;
}

[data-sp-embed] .id-tap__sso-ok{
  color: #047857;
  opacity: 0;
}

[data-sp-embed] .id-tap__sso{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.28rem;
}

[data-sp-embed] .id-tap__sso-btn, [data-sp-embed] .id-tap__pay{
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 0;
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
  cursor: default;
}

[data-sp-embed] .id-tap__sso-btn{
  min-height: 2.35rem;
  padding: 0.28rem 0.08rem 0.22rem;
  gap: 0.1rem;
  border-radius: 0.62rem;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(226, 232, 240, 0.95), 0 6px 12px rgba(15, 23, 42, 0.05);
  color: #0f172a;
  font-size: 0.42rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

[data-sp-embed] .id-tap__sso-btn svg{
  display: block;
}

[data-sp-embed] .id-tap__pay-idle, [data-sp-embed] .id-tap__pay-ok{
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.32rem;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

[data-sp-embed] .id-tap__pay-ok{
  opacity: 0;
}

[data-sp-embed] .id-tap__wallet{
  display: flex;
  align-items: center;
  gap: 0.42rem;
  max-height: 0;
  padding: 0 0.48rem;
  overflow: hidden;
  border-radius: 0.75rem;
  background: rgba(238, 242, 255, 0.72);
  border: 1px solid transparent;
  opacity: 0;
  transform: translateY(8px);
}

[data-sp-embed] .id-tap__chip{
  display: grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  flex: 0 0 auto;
  border-radius: 0.45rem;
  background: #fff;
  font-size: 0.78rem;
  box-shadow: 0 4px 10px rgba(79, 70, 229, 0.08);
}

[data-sp-embed] .id-tap__wallet strong, [data-sp-embed] .id-tap__wallet small{
  display: block;
}

[data-sp-embed] .id-tap__wallet strong{
  font-size: 0.55rem;
  font-weight: 800;
  color: #312e81;
}

[data-sp-embed] .id-tap__wallet small{
  margin-top: 0.08rem;
  font-size: 0.5rem;
  color: #64748b;
}

[data-sp-embed] .id-tap__wallet em{
  display: inline-block;
  margin-top: 0.18rem;
  padding: 0.1rem 0.32rem;
  border-radius: 999px;
  background: #eef2ff;
  color: #4338ca;
  font-size: 0.46rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

[data-sp-embed] .id-tap__pay{
  width: 100%;
  min-height: 2.05rem;
  margin-top: auto;
  border-radius: 0.7rem;
  background: #cbd5e1;
  color: #fff;
  box-shadow: none;
  opacity: 1;
}

[data-sp-embed] .id-tap__pay-ok{
  color: #fff;
}

[data-sp-embed] .id-tap__hint{
  display: block;
  text-align: center;
  font-size: 0.48rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #059669;
  opacity: 0;
}

[data-sp-embed] .id-tap__press{
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 1.15rem;
  height: 1.15rem;
  margin: -0.575rem 0 0 -0.575rem;
  border-radius: 999px;
  background: rgba(99, 102, 241, 0.22);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.55);
  opacity: 0;
  pointer-events: none;
}

[data-sp-embed].js .id-pay-block.visible .id-tap__sso-btn{
  animation: id-tap-sso-pick var(--id-tap-loop) cubic-bezier(0.22, 1, 0.36, 1) both infinite;
}

[data-sp-embed].js .id-pay-block.visible .id-tap__sso-btn--apple{
  animation-delay: -16s;
}

[data-sp-embed].js .id-pay-block.visible .id-tap__sso-btn--facebook{
  animation-delay: -8s;
}

[data-sp-embed].js .id-pay-block.visible .id-tap__sso-btn .id-tap__press{
  animation: id-tap-press var(--id-tap-loop) ease both infinite;
}

[data-sp-embed].js .id-pay-block.visible .id-tap__sso-btn--apple .id-tap__press{
  animation-delay: -16s;
}

[data-sp-embed].js .id-pay-block.visible .id-tap__sso-btn--facebook .id-tap__press{
  animation-delay: -8s;
}

[data-sp-embed].js .id-pay-block.visible .id-tap__sso-idle{
  animation: id-tap-sso-idle var(--id-tap-act) ease both infinite;
}

[data-sp-embed].js .id-pay-block.visible .id-tap__sso-ok{
  animation: id-tap-sso-ok var(--id-tap-loop) ease both infinite;
}

[data-sp-embed].js .id-pay-block.visible .id-tap__sso-ok--apple{
  animation-delay: -16s;
}

[data-sp-embed].js .id-pay-block.visible .id-tap__sso-ok--facebook{
  animation-delay: -8s;
}

[data-sp-embed].js .id-pay-block.visible .id-tap__wallet{
  animation: id-tap-wallet var(--id-tap-act) cubic-bezier(0.22, 1, 0.36, 1) both infinite;
}

[data-sp-embed].js .id-pay-block.visible .id-tap__pay{
  animation: id-tap-pay var(--id-tap-act) cubic-bezier(0.22, 1, 0.36, 1) both infinite;
}

[data-sp-embed].js .id-pay-block.visible .id-tap__pay-idle{
  animation: id-tap-pay-idle var(--id-tap-act) ease both infinite;
}

[data-sp-embed].js .id-pay-block.visible .id-tap__pay-ok{
  animation: id-tap-pay-ok var(--id-tap-act) ease both infinite;
}

[data-sp-embed].js .id-pay-block.visible .id-tap__press--pay{
  animation: id-tap-press-pay var(--id-tap-act) ease both infinite;
}

[data-sp-embed].js .id-pay-block.visible .id-tap__wave{
  animation: id-tap-wave var(--id-tap-act) ease-out both infinite;
}

[data-sp-embed].js .id-pay-block.visible .id-tap__wave--2{
  animation-delay: 0.16s;
}

[data-sp-embed].js .id-pay-block.visible .id-tap__hint{
  animation: id-tap-hint var(--id-tap-act) ease both infinite;
}

@keyframes id-tap-sso-pick {
  0%, 4% {
    opacity: 1;
    transform: scale(1);
    background: #fff;
    filter: none;
    box-shadow: 0 0 0 1px rgba(226, 232, 240, 0.95), 0 6px 12px rgba(15, 23, 42, 0.05);
  }
  6% { transform: scale(0.9); }
  9% { transform: scale(1); }
  11%, 28% {
    opacity: 1;
    transform: scale(1);
    background: #ecfdf5;
    filter: none;
    box-shadow: 0 0 0 1px rgba(167, 243, 208, 0.95), 0 8px 14px rgba(5, 150, 105, 0.1);
  }
  33%, 97% {
    opacity: 0.38;
    transform: scale(0.96);
    background: #fff;
    filter: grayscale(0.35);
    box-shadow: 0 0 0 1px rgba(226, 232, 240, 0.7);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    background: #fff;
    filter: none;
    box-shadow: 0 0 0 1px rgba(226, 232, 240, 0.95), 0 6px 12px rgba(15, 23, 42, 0.05);
  }
}

@keyframes id-tap-sso-idle {
  0%, 8% { opacity: 1; }
  14%, 92% { opacity: 0; }
  97%, 100% { opacity: 1; }
}

@keyframes id-tap-sso-ok {
  0%, 8% { opacity: 0; transform: translateY(4px); }
  12%, 28% { opacity: 1; transform: translateY(0); }
  32%, 100% { opacity: 0; }
}

@keyframes id-tap-press {
  0%, 4% { opacity: 0; transform: scale(0.45); }
  6.5% { opacity: 1; transform: scale(1); }
  12%, 100% { opacity: 0; transform: scale(1.45); }
}

@keyframes id-tap-wallet {
  0%, 24% {
    opacity: 0;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-color: transparent;
    transform: translateY(8px);
  }
  32%, 82% {
    opacity: 1;
    max-height: 4.6rem;
    padding-top: 0.42rem;
    padding-bottom: 0.42rem;
    border-color: rgba(199, 210, 254, 0.8);
    transform: translateY(0);
  }
  90%, 100% {
    opacity: 0;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-color: transparent;
    transform: translateY(-4px);
  }
}

@keyframes id-tap-pay {
  0%, 30% {
    opacity: 1;
    transform: scale(1);
    background: #cbd5e1;
    box-shadow: none;
  }
  36%, 48% {
    opacity: 1;
    transform: scale(1);
    background: #0f172a;
    box-shadow: 0 10px 18px rgba(15, 23, 42, 0.16);
  }
  52% {
    opacity: 1;
    transform: scale(0.96);
    background: #0f172a;
  }
  58%, 82% {
    opacity: 1;
    transform: scale(1);
    background: #059669;
    box-shadow: 0 10px 22px rgba(5, 150, 105, 0.28);
  }
  90%, 100% {
    opacity: 1;
    transform: scale(1);
    background: #cbd5e1;
    box-shadow: none;
  }
}

@keyframes id-tap-pay-idle {
  0%, 52% { opacity: 1; }
  58%, 94% { opacity: 0; }
  98%, 100% { opacity: 1; }
}

@keyframes id-tap-pay-ok {
  0%, 54% { opacity: 0; transform: scale(0.96); }
  60%, 82% { opacity: 1; transform: scale(1); }
  90%, 100% { opacity: 0; }
}

@keyframes id-tap-press-pay {
  0%, 48% { opacity: 0; transform: scale(0.45); }
  52% { opacity: 1; transform: scale(1); }
  60%, 100% { opacity: 0; transform: scale(1.35); }
}

@keyframes id-tap-wave {
  0%, 54% { opacity: 0; transform: translate(-50%, 0) scale(0.4); }
  60% { opacity: 0.75; }
  76%, 100% { opacity: 0; transform: translate(-50%, 0) scale(2.15); }
}

@keyframes id-tap-hint {
  0%, 58% { opacity: 0; transform: translateY(6px); }
  64%, 82% { opacity: 1; transform: translateY(0); }
  90%, 100% { opacity: 0; }
}

@keyframes id-pay-draw {
  from { stroke-dashoffset: 180; }
  to { stroke-dashoffset: 0; }
}

@keyframes id-gw-wire-dom {
  0%, 40% { stroke: #6366f1; opacity: 1; }
  52%, 100% { stroke: rgba(79, 70, 229, 0.16); opacity: 0.42; }
}

@keyframes id-gw-wire-glob {
  0%, 46% { stroke: rgba(13, 148, 136, 0.16); opacity: 0.35; }
  58%, 90% { stroke: #0d9488; opacity: 1; }
  100% { stroke: rgba(13, 148, 136, 0.16); opacity: 0.35; }
}

@keyframes id-gw-pulse-dom {
  0%, 8% { opacity: 0; stroke-dashoffset: 70; }
  14%, 36% { opacity: 1; stroke: #818cf8; stroke-dashoffset: -160; }
  42%, 100% { opacity: 0; }
}

@keyframes id-gw-pulse-glob {
  0%, 52% { opacity: 0; stroke-dashoffset: 70; }
  58%, 82% { opacity: 1; stroke: #2dd4bf; stroke-dashoffset: -160; filter: drop-shadow(0 0 4px rgba(45, 212, 191, 0.55)); }
  90%, 100% { opacity: 0; }
}

@keyframes id-gw-lock {
  0%, 40%, 62%, 100% {
    transform: scale(1);
    box-shadow: 0 10px 24px rgba(67, 56, 202, 0.14);
    color: #4338ca;
  }
  48% {
    transform: scale(1.1);
    color: #0d9488;
    box-shadow:
      0 0 0 10px rgba(45, 212, 191, 0.14),
      0 0 28px rgba(99, 102, 241, 0.28);
  }
  54% { transform: scale(1.02); }
}

@keyframes id-gw-draw-mobile {
  from { stroke-dashoffset: 100; }
  to { stroke-dashoffset: 0; }
}

@keyframes id-gw-pulse-in-mobile {
  0%, 4% { opacity: 0; stroke-dashoffset: 10; }
  8%, 18% { opacity: 1; stroke-dashoffset: -90; }
  24%, 100% { opacity: 0; }
}

@keyframes id-gw-pulse-dom-mobile {
  0%, 22% { opacity: 0; stroke-dashoffset: 10; }
  28%, 42% { opacity: 1; stroke-dashoffset: -90; }
  48%, 100% { opacity: 0; }
}

@keyframes id-gw-pulse-glob-mobile {
  0%, 50% { opacity: 0; stroke-dashoffset: 10; }
  56%, 74% { opacity: 1; stroke: #2dd4bf; stroke-dashoffset: -90; filter: drop-shadow(0 0 4px rgba(45, 212, 191, 0.55)); }
  82%, 100% { opacity: 0; }
}

@keyframes id-gw-lock-mobile {
  0%, 6%, 26%, 62%, 100% {
    transform: scale(1);
    box-shadow: 0 10px 24px rgba(67, 56, 202, 0.14);
    color: #4338ca;
  }
  14% {
    transform: scale(1.12);
    color: #6366f1;
    box-shadow:
      0 0 0 10px rgba(99, 102, 241, 0.14),
      0 0 24px rgba(99, 102, 241, 0.28);
  }
  20% { transform: scale(1.02); }
  48% {
    transform: scale(1.1);
    color: #0d9488;
    box-shadow:
      0 0 0 10px rgba(45, 212, 191, 0.14),
      0 0 28px rgba(99, 102, 241, 0.28);
  }
  54% { transform: scale(1.02); }
}

@keyframes id-gw-gate-dom {
  0%, 42% {
    border-color: rgba(99, 102, 241, 0.42);
    box-shadow: 0 10px 22px rgba(99, 102, 241, 0.1);
  }
  54%, 100% {
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
  }
}

@keyframes id-gw-gate-glob {
  0%, 48% {
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
  }
  58%, 90% {
    border-color: rgba(13, 148, 136, 0.42);
    box-shadow: 0 10px 22px rgba(13, 148, 136, 0.12);
  }
  100% {
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
  }
}

@keyframes id-gw-badge {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes id-gw-toast {
  0%, 56% { opacity: 0; transform: translate(-50%, 10px) scale(0.94); }
  64%, 78% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  90%, 100% { opacity: 0; transform: translate(-50%, -10px) scale(0.98); }
}

@keyframes id-gw-card-cycle {
  0%, 18% {
    z-index: 5;
    transform: translate(0, -0.35rem) rotate(0deg) scale(1.06);
    box-shadow: 0 16px 28px rgba(29, 78, 216, 0.28);
  }
  26%, 100% {
    z-index: 1;
    transform: translate(var(--x), var(--y)) rotate(var(--rot)) scale(0.9);
    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.12);
  }
}

@keyframes id-gw-tap {
  0%, 3%, 21%, 24%, 46%, 49%, 71%, 74%, 96%, 100% {
    opacity: 0;
    transform: translate(-50%, 6px) scale(0.92);
  }
  8%, 16%, 29%, 37%, 54%, 62%, 79%, 87% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

@media (min-width: 900px) {
  [data-sp-embed] .id-pay-block{
    flex-direction: row;
    align-items: center;
  }

  [data-sp-embed] .id-pay-block--reverse{
    flex-direction: row-reverse;
  }

  [data-sp-embed] .id-pay-block__visual, [data-sp-embed] .id-pay-block__copy{
    flex: 1 1 0;
  }

  [data-sp-embed] .id-pay-block__copy{
    padding-inline: 0.6rem 0.35rem;
  }

  [data-sp-embed] .id-pay-block--reverse .id-pay-block__copy{
    padding-inline: 0.35rem 0.6rem;
  }
}

@media (max-width: 899px) {
  [data-sp-embed] .id-pay-blocks{
    width: calc(100% - 1.5rem);
  }

  [data-sp-embed] .id-gw-easy{
    width: 5.85rem;
    height: 4.55rem;
  }

  [data-sp-embed] .id-gw-wallet{
    width: 5.3rem;
    height: 3.7rem;
  }

  [data-sp-embed] .id-gw-card{
    width: 5.15rem;
    height: 3.1rem;
    padding: 0.32rem 0.4rem 0.28rem;
    border-radius: 0.46rem;
  }

  [data-sp-embed] .id-gw-card--visa{
    --x: -0.38rem;
    --y: 0.48rem;
  }

  [data-sp-embed] .id-gw-card--mc{
    --x: -0.1rem;
    --y: 0.2rem;
  }

  [data-sp-embed] .id-gw-card--jcb{
    --x: 0.14rem;
    --y: 0.2rem;
  }

  [data-sp-embed] .id-gw-card--amex{
    --x: 0.38rem;
    --y: 0.48rem;
  }

  [data-sp-embed] .id-gw-card__chip{
    width: 0.82rem;
    height: 0.56rem;
  }

  [data-sp-embed] .id-gw-card__num{
    font-size: 0.52rem;
  }

  [data-sp-embed] .id-gw-card em{
    font-size: 0.5rem;
  }

  [data-sp-embed] .id-gw-tap{
    font-size: 0.52rem;
    padding: 0.14rem 0.44rem;
  }

  [data-sp-embed] .id-gw__gate{
    min-width: 7.2rem;
    max-width: 8.8rem;
    padding: 0.4rem 0.48rem;
  }

  [data-sp-embed] .id-gw__gate strong{
    font-size: 0.64rem;
  }

  [data-sp-embed] .id-cal__badge{
    font-size: 0.55rem;
    padding: 0.18rem 0.45rem;
  }

  [data-sp-embed] .id-tap-phone{
    width: 8.55rem;
    height: 15.7rem;
  }

  [data-sp-embed] .id-gw{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "src src"
      "core core"
      "dom glob";
    align-items: center;
    justify-items: center;
    gap: 1.15rem 0.55rem;
    min-height: 0;
    padding: 0.85rem 0.7rem 0.95rem;
  }

  [data-sp-embed] .id-pay-viz--gw{
    min-height: 0;
  }

  [data-sp-embed] .id-gw__wires--desk{
    display: none;
  }

  [data-sp-embed] .id-gw__wires--mobile{
    display: block;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: visible;
  }

  [data-sp-embed] .id-gw__wires--mobile .id-gw__wire{
    vector-effect: non-scaling-stroke;
    stroke-width: 2.2;
    stroke: rgba(79, 70, 229, 0.28);
    stroke-linejoin: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 0;
  }

  [data-sp-embed] .id-gw__wires--mobile .id-gw__wire--dom{
    stroke: url(#idGwMobileDom);
    filter: drop-shadow(0 0 3px rgba(99, 102, 241, 0.4));
  }

  [data-sp-embed] .id-gw__wires--mobile .id-gw__wire--glob{
    stroke: url(#idGwMobileGlob);
    filter: drop-shadow(0 0 3px rgba(20, 184, 166, 0.35));
  }

  [data-sp-embed] .id-gw__wires--mobile .id-gw__pulse{
    vector-effect: non-scaling-stroke;
    stroke-width: 2.6;
    stroke-linejoin: round;
    stroke-dasharray: 12 88;
    stroke-dashoffset: 12;
    filter: drop-shadow(0 0 4px rgba(99, 102, 241, 0.55));
  }

  [data-sp-embed].js .id-pay-block:not(.visible) .id-gw__wires--mobile .id-gw__wire{
    stroke-dashoffset: 100;
  }

  [data-sp-embed] .id-gw__src, [data-sp-embed] .id-gw__core, [data-sp-embed] .id-gw__gate{
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    transform: none;
    z-index: 2;
  }

  [data-sp-embed] .id-gw__src{
    grid-area: src;
  }

  [data-sp-embed] .id-gw__core{
    display: grid;
    grid-area: core;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: 100%;
    gap: 0.4rem;
    margin-bottom: 0.35rem;
  }

  [data-sp-embed] .id-gw__lock{
    grid-column: 2;
  }

  [data-sp-embed] .id-gw__badge{
    grid-column: 3;
    justify-self: start;
  }

  [data-sp-embed] .id-gw__gate--dom{
    grid-area: dom;
    justify-self: stretch;
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  [data-sp-embed] .id-gw__gate--glob{
    grid-area: glob;
    justify-self: stretch;
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  [data-sp-embed].js .id-pay-block.visible .id-gw__gate--dom, [data-sp-embed].js .id-pay-block.visible .id-gw__gate--glob{
    opacity: 1;
  }

  [data-sp-embed].js .id-pay-block.visible .id-gw__wires--mobile .id-gw__wire--in{
    animation: id-gw-draw-mobile 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  [data-sp-embed].js .id-pay-block.visible .id-gw__wires--mobile .id-gw__wire--dom{
    animation:
      id-gw-draw-mobile 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.45s both,
      id-gw-wire-dom 8.4s ease-in-out 1.1s both infinite;
  }

  [data-sp-embed].js .id-pay-block.visible .id-gw__wires--mobile .id-gw__wire--glob{
    animation:
      id-gw-draw-mobile 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.6s both,
      id-gw-wire-glob 8.4s ease-in-out 1.1s both infinite;
  }

  [data-sp-embed].js .id-pay-block.visible .id-gw__wires--mobile .id-gw__pulse--in{
    animation: id-gw-pulse-in-mobile 8.4s linear 0.15s both infinite;
  }

  [data-sp-embed].js .id-pay-block.visible .id-gw__wires--mobile .id-gw__pulse--dom{
    animation: id-gw-pulse-dom-mobile 8.4s linear 0.15s both infinite;
  }

  [data-sp-embed].js .id-pay-block.visible .id-gw__wires--mobile .id-gw__pulse--glob{
    animation: id-gw-pulse-glob-mobile 8.4s linear 0.15s both infinite;
  }

  [data-sp-embed].js .id-pay-block.visible .id-gw__lock{
    animation: id-gw-lock-mobile 8.4s ease-in-out 0.15s infinite;
  }
}

@media (max-width: 767px) {
  [data-sp-embed] .id-pay-blocks, [data-sp-embed] .id-auth-blocks, [data-sp-embed] .id-mem-blocks{
    width: calc(100% - 1.25rem);
    gap: 3.35rem;
  }

  [data-sp-embed] .id-pay-block, [data-sp-embed] .id-auth-block, [data-sp-embed] .id-mem-block{
    padding: 1.2rem 1.05rem 1.5rem;
    gap: 1.5rem;
  }

  [data-sp-embed] .id-pay-block__copy, [data-sp-embed] .id-auth-block__copy, [data-sp-embed] .id-mem-block__copy{
    gap: 0.95rem;
  }

  [data-sp-embed] .id-pay-viz--gw, [data-sp-embed] .id-gw{
    min-height: 0;
  }

  [data-sp-embed] .id-gw-easy{
    width: 5.35rem;
    height: 4.15rem;
  }

  [data-sp-embed] .id-gw-wallet{
    width: 4.85rem;
    height: 3.35rem;
  }

  [data-sp-embed] .id-gw-card{
    width: 4.7rem;
    height: 2.82rem;
  }

  [data-sp-embed] .id-gw__lock{
    width: 2.45rem;
    height: 2.45rem;
    border-radius: 0.82rem;
  }

  [data-sp-embed] .id-gw__gate small{
    display: none;
  }

  [data-sp-embed] .id-gw__toast{
    display: none;
  }

  [data-sp-embed] .id-gw-tap{
    bottom: -0.35rem;
  }

  [data-sp-embed] .id-gw__badge{
    font-size: 0.56rem;
    padding: 0.2rem 0.5rem;
  }
}

@media not all /* iOS Reduce Motion: keep animations */ {
  [data-sp-embed].js .id-pay-block.visible .id-gw__wire--dom, [data-sp-embed].js .id-pay-block.visible .id-gw__wire--glob, [data-sp-embed].js .id-pay-block.visible .id-gw__pulse--in, [data-sp-embed].js .id-pay-block.visible .id-gw__pulse--dom, [data-sp-embed].js .id-pay-block.visible .id-gw__pulse--glob, [data-sp-embed].js .id-pay-block.visible .id-gw__lock, [data-sp-embed].js .id-pay-block.visible .id-gw__gate--dom, [data-sp-embed].js .id-pay-block.visible .id-gw__gate--glob, [data-sp-embed].js .id-pay-block.visible .id-gw__toast, [data-sp-embed].js .id-pay-block.visible .id-gw-card, [data-sp-embed].js .id-pay-block.visible .id-gw-tap, [data-sp-embed].js .id-pay-block.visible .id-tap__sso-btn, [data-sp-embed].js .id-pay-block.visible .id-tap__sso-idle, [data-sp-embed].js .id-pay-block.visible .id-tap__sso-ok, [data-sp-embed].js .id-pay-block.visible .id-tap__wallet, [data-sp-embed].js .id-pay-block.visible .id-tap__pay, [data-sp-embed].js .id-pay-block.visible .id-tap__pay-idle, [data-sp-embed].js .id-pay-block.visible .id-tap__pay-ok, [data-sp-embed].js .id-pay-block.visible .id-tap__press, [data-sp-embed].js .id-pay-block.visible .id-tap__wave, [data-sp-embed].js .id-pay-block.visible .id-tap__hint{
    animation: none !important;
  }

  [data-sp-embed].js .id-pay-block .id-gw__gate, [data-sp-embed].js .id-pay-block .id-gw__badge, [data-sp-embed].js .id-pay-block .id-gw-tap{
    opacity: 1;
    transform: none;
  }

  [data-sp-embed].js .id-pay-block .id-gw-tap{
    transform: translateX(-50%);
  }

  [data-sp-embed].js .id-pay-block .id-gw__toast, [data-sp-embed].js .id-pay-block .id-gw__pulse{
    opacity: 0;
  }

  [data-sp-embed].js .id-pay-block .id-gw__wire{
    stroke-dashoffset: 0;
    opacity: 0.85;
  }

  [data-sp-embed].js .id-pay-block .id-tap__sso-btn--google{
    background: #ecfdf5;
    box-shadow: 0 0 0 1px rgba(167, 243, 208, 0.9);
  }

  [data-sp-embed].js .id-pay-block .id-tap__sso-btn--apple, [data-sp-embed].js .id-pay-block .id-tap__sso-btn--facebook{
    opacity: 0.38;
    filter: grayscale(0.35);
  }

  [data-sp-embed].js .id-pay-block .id-tap__sso-idle, [data-sp-embed].js .id-pay-block .id-tap__sso-ok--apple, [data-sp-embed].js .id-pay-block .id-tap__sso-ok--facebook, [data-sp-embed].js .id-pay-block .id-tap__pay-idle, [data-sp-embed].js .id-pay-block .id-tap__press, [data-sp-embed].js .id-pay-block .id-tap__wave{
    opacity: 0;
  }

  [data-sp-embed].js .id-pay-block .id-tap__sso-ok--google, [data-sp-embed].js .id-pay-block .id-tap__wallet, [data-sp-embed].js .id-pay-block .id-tap__pay-ok, [data-sp-embed].js .id-pay-block .id-tap__hint{
    opacity: 1;
    transform: none;
  }

  [data-sp-embed].js .id-pay-block .id-tap__wallet{
    max-height: none;
    padding: 0.42rem 0.48rem;
    border-color: rgba(199, 210, 254, 0.8);
  }

  [data-sp-embed].js .id-pay-block .id-tap__pay{
    opacity: 1;
    background: #059669;
  }
}

/* ===== AUTH & SECURITY zigzag ===== */
[data-sp-embed] #auth.band-marketing{
  background: linear-gradient(180deg, #ffffff 0%, #fff7fb 42%, #f6f3ff 100%);
}

[data-sp-embed] .id-auth-blocks{
  display: grid;
  gap: clamp(5.5rem, 9vw, 7rem);
  width: min(1120px, calc(100% - 4rem));
  margin: 0 auto;
}

[data-sp-embed] .id-auth-block{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(1.75rem, 3.2vw, 2.75rem);
  padding: clamp(1.4rem, 2.8vw, 2rem);
  border-radius: 1.5rem;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow: 0 22px 50px rgb(241 245 249 / 0.5);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  overflow: hidden;
}

[data-sp-embed] .id-auth-block__visual, [data-sp-embed] .id-auth-block__copy{
  min-width: 0;
}

[data-sp-embed] .id-auth-block__copy{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
  text-align: left;
  padding-inline: 0.15rem;
}

[data-sp-embed] .id-auth-tag{
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.35em;
  margin-bottom: 0;
  padding: 0.32rem 0.82rem;
  border-radius: 999px;
  background: #fce7f3;
  color: #be185d;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

[data-sp-embed] .id-auth-tag--oidc{
  background: #ede9fe;
  color: #6d28d9;
}

[data-sp-embed] .id-auth-tag--secure{
  background: #e0f2fe;
  color: #0369a1;
}

[data-sp-embed] .id-auth-block__copy h3{
  margin: 0;
  font-size: clamp(1.25rem, 1rem + 1.1vw, 1.85rem);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.02em;
}

[data-sp-embed] .id-auth-block__copy p{
  margin: 0;
  font-size: clamp(0.92rem, 0.2vw + 0.86rem, 1.02rem);
  line-height: 1.9;
  color: #4b5563;
}

[data-sp-embed] .id-auth-viz--sso .id-apple-glow{
  background: linear-gradient(90deg, rgba(251, 207, 232, 0.5), rgba(196, 181, 253, 0.32), rgba(186, 230, 253, 0.28));
}

[data-sp-embed] .id-auth-viz--oidc{
  min-height: 320px;
  background:
    linear-gradient(to bottom right, rgba(238, 242, 255, 0.42), rgba(255, 255, 255, 0.78) 48%, rgba(250, 245, 255, 0.34));
}

[data-sp-embed] .id-auth-viz--oidc .id-apple-glow{
  background: linear-gradient(90deg, rgba(199, 210, 254, 0.55), rgba(255, 255, 255, 0.28), rgba(233, 213, 255, 0.38));
}

[data-sp-embed] .id-auth-viz--secure{
  background:
    linear-gradient(165deg, rgba(240, 253, 250, 0.42) 0%, rgba(255, 255, 255, 0.88) 48%, rgba(236, 253, 245, 0.28) 100%);
}

[data-sp-embed] .id-auth-viz--secure .id-apple-glow{
  background: linear-gradient(90deg, rgba(204, 251, 241, 0.55), rgba(255, 255, 255, 0.28), rgba(167, 243, 208, 0.4));
}

[data-sp-embed] .id-sso, [data-sp-embed] .id-oidc, [data-sp-embed] .id-sec{
  position: relative;
  height: 100%;
  min-height: 280px;
}

[data-sp-embed] .id-oidc{
  min-height: 320px;
  overflow: visible;
}

[data-sp-embed] .id-sso{
  display: grid;
  place-items: center;
}

[data-sp-embed] .id-sso__orb{
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.45rem;
  height: 2.45rem;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 10px 22px rgb(241 245 249 / 0.9), 0 1px 2px rgb(15 23 42 / 0.06);
  opacity: 0;
}

[data-sp-embed] .id-sso__orb--line{
  left: 12%;
  top: 16%;
  width: auto;
  padding: 0 0.58rem;
  background: #06c755;
  color: #fff;
  font-size: 0.58rem;
  font-weight: 800;
  --dx: 5.2rem;
  --dy: 4.1rem;
}

[data-sp-embed] .id-sso__orb--google{ right: 12%; top: 16%; --dx: -5.2rem; --dy: 4.1rem; }
[data-sp-embed] .id-sso__orb--apple{ left: 12%; bottom: 16%; color: #111; --dx: 5.2rem; --dy: -4.1rem; }
[data-sp-embed] .id-sso__orb--meta{ right: 12%; bottom: 16%; --dx: -5.2rem; --dy: -4.1rem; }

[data-sp-embed] .id-sso-phone{
  position: relative;
  z-index: 3;
  width: 7.1rem;
  height: 12.6rem;
  padding: 0.55rem 0.42rem 0.48rem;
  border-radius: 1.45rem;
  background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
  box-shadow:
    0 18px 36px rgb(148 163 184 / 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

[data-sp-embed] .id-sso-phone__notch{
  width: 2.35rem;
  height: 0.26rem;
  margin: 0 auto 0.38rem;
  border-radius: 999px;
  background: #cbd5e1;
}

[data-sp-embed] .id-sso-phone__screen{
  position: relative;
  height: calc(100% - 0.64rem);
  overflow: hidden;
  border-radius: 0.95rem;
  background: #fff;
}

[data-sp-embed] .id-sso-phone__slide{
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.35rem;
  padding: 0.7rem;
  text-align: center;
  opacity: 0;
}

[data-sp-embed] .id-sso-phone__mark{
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 0.45rem;
  background: #06c755;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
}

[data-sp-embed] .id-sso-phone__slide p, [data-sp-embed] .id-sso-phone__slide strong{
  margin: 0;
  font-size: 0.72rem;
  font-weight: 800;
  color: #0f172a;
}

[data-sp-embed] .id-sso-phone__slide small{
  color: #64748b;
  font-size: 0.62rem;
}

[data-sp-embed] .id-sso-phone__check{
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 999px;
  background: #06c755;
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
}

[data-sp-embed].js .id-auth-block.visible .id-sso__orb{
  animation: id-sso-orb 7.2s cubic-bezier(0.22, 1, 0.36, 1) both infinite;
  animation-delay: calc(var(--i) * 0.12s);
}

[data-sp-embed].js .id-auth-block.visible .id-sso-phone__slide--idle{
  animation: id-sso-idle 7.2s ease both infinite;
}

[data-sp-embed].js .id-auth-block.visible .id-sso-phone__slide--ok{
  animation: id-sso-ok 7.2s ease both infinite;
}

@keyframes id-sso-orb {
  0%, 6% {
    opacity: 0;
    transform: translate(0, 0) scale(0.82);
  }
  14%, 34% {
    opacity: 1;
    transform: translate(0, -6px) scale(1);
  }
  58% {
    opacity: 0.92;
    transform: translate(var(--dx), var(--dy)) scale(0.58);
  }
  72%, 100% {
    opacity: 0;
    transform: translate(calc(var(--dx) * 1.12), calc(var(--dy) * 1.12)) scale(0.12);
  }
}

@keyframes id-sso-idle {
  0%, 8% { opacity: 0; }
  14%, 58% { opacity: 1; }
  68%, 100% { opacity: 0; }
}

@keyframes id-sso-ok {
  0%, 62% { opacity: 0; transform: scale(0.9); }
  72%, 90% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; }
}

[data-sp-embed] .id-oidc__wires{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

[data-sp-embed] .id-oidc__wire, [data-sp-embed] .id-oidc__flow{
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

[data-sp-embed] .id-oidc__wire{
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
  opacity: 0.28;
}

[data-sp-embed] .id-oidc__flow{
  stroke-dasharray: 5 26;
  stroke-dashoffset: 0;
  opacity: 0;
}

[data-sp-embed] .id-oidc__hub{
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  width: 5.55rem;
  height: 5.55rem;
  transform: translate(-50%, -50%);
}

[data-sp-embed] .id-oidc__ring, [data-sp-embed] .id-oidc__ring--2{
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  border: 1.5px solid rgba(99, 102, 241, 0.28);
  transform: translate(-50%, -50%) scale(0.86);
  opacity: 0.35;
  pointer-events: none;
}

[data-sp-embed] .id-oidc__ring{
  width: 6.7rem;
  height: 6.7rem;
}

[data-sp-embed] .id-oidc__ring--2{
  width: 8.05rem;
  height: 8.05rem;
  border-color: rgba(168, 85, 247, 0.18);
}

[data-sp-embed] .id-oidc__core{
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.18rem;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  color: #4338ca;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(238, 242, 255, 0.82) 100%);
  border: 1px solid rgba(199, 210, 254, 0.78);
  box-shadow:
    0 14px 32px rgb(199 210 254 / 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

[data-sp-embed] .id-oidc__mark{
  display: grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #6366f1, #a855f7);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 6px 14px rgb(99 102 241 / 0.32);
}

[data-sp-embed] .id-oidc__core strong{
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #312e81;
}

[data-sp-embed] .id-oidc__key-badge{
  position: absolute;
  right: -0.15rem;
  bottom: -0.08rem;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(199, 210, 254, 0.8);
  box-shadow: 0 8px 16px rgb(129 140 248 / 0.28);
  font-size: 0.72rem;
  line-height: 1;
}

[data-sp-embed] .id-oidc__node{
  position: absolute;
  z-index: 5;
  min-width: 6.1rem;
  pointer-events: auto;
  cursor: pointer;
}

[data-sp-embed] .id-oidc__node--web{
  left: 4.5%;
  top: 7%;
  --oidc-accent: #2563eb;
  --oidc-accent-soft: #dbeafe;
  --oidc-border: rgba(37, 99, 235, 0.28);
  --oidc-glow: rgb(37 99 235 / 0.18);
}

[data-sp-embed] .id-oidc__node--mobile{
  right: 4.5%;
  top: 7%;
  --oidc-accent: #7c3aed;
  --oidc-accent-soft: #ede9fe;
  --oidc-border: rgba(124, 58, 237, 0.28);
  --oidc-glow: rgb(124 58 237 / 0.18);
}

[data-sp-embed] .id-oidc__node--crm{
  left: 4.5%;
  bottom: 7%;
  min-width: 7.1rem;
  --oidc-accent: #0284c7;
  --oidc-accent-soft: #e0f2fe;
  --oidc-border: rgba(2, 132, 199, 0.28);
  --oidc-glow: rgb(2 132 199 / 0.18);
}

[data-sp-embed] .id-oidc__node--stripe{
  right: 4.5%;
  bottom: 7%;
  min-width: 6.6rem;
  --oidc-accent: #635bff;
  --oidc-accent-soft: #eef2ff;
  --oidc-border: rgba(99, 91, 255, 0.32);
  --oidc-glow: rgb(99 91 255 / 0.2);
}

[data-sp-embed] .id-oidc__float{
  position: relative;
  padding: 0.52rem 0.62rem 0.5rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--oidc-border);
  box-shadow:
    0 10px 24px var(--oidc-glow),
    0 1px 0 rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

[data-sp-embed] .id-oidc__glyph{
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  margin-bottom: 0.28rem;
  border-radius: 0.52rem;
  color: var(--oidc-accent);
  background: var(--oidc-accent-soft);
}

[data-sp-embed] .id-oidc__node strong{
  display: block;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #0f172a;
  line-height: 1.25;
}

[data-sp-embed] .id-oidc__node small{
  display: block;
  margin-top: 0.08rem;
  color: #64748b;
  font-size: 0.58rem;
  font-weight: 700;
}

[data-sp-embed] .id-oidc__ok{
  position: absolute;
  top: -0.48rem;
  right: -0.42rem;
  display: inline-flex;
  align-items: center;
  gap: 0.16rem;
  padding: 0.12rem 0.38rem 0.12rem 0.28rem;
  border-radius: 999px;
  background: #ecfdf5;
  color: #047857;
  border: 1px solid rgba(16, 185, 129, 0.28);
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: 0 6px 14px rgb(16 185 129 / 0.16);
  opacity: 0;
  transform: translateY(6px) scale(0.9);
  pointer-events: none;
}

[data-sp-embed] .id-oidc__ok b{
  display: grid;
  place-items: center;
  width: 0.78rem;
  height: 0.78rem;
  border-radius: 999px;
  background: #10b981;
  color: #fff;
  font-size: 0.48rem;
  font-weight: 800;
  font-style: normal;
}

[data-sp-embed] .id-oidc__node--mobile .id-oidc__ok, [data-sp-embed] .id-oidc__node--stripe .id-oidc__ok{
  right: auto;
  left: -0.42rem;
}

[data-sp-embed].js .id-auth-block.visible .id-oidc__wire--web{
  animation: id-oidc-draw 8.4s cubic-bezier(0.22, 1, 0.36, 1) both infinite;
}

[data-sp-embed].js .id-auth-block.visible .id-oidc__wire--mobile{
  animation: id-oidc-draw 8.4s cubic-bezier(0.22, 1, 0.36, 1) both infinite;
  animation-delay: 0.16s;
}

[data-sp-embed].js .id-auth-block.visible .id-oidc__wire--crm{
  animation: id-oidc-draw 8.4s cubic-bezier(0.22, 1, 0.36, 1) both infinite;
  animation-delay: 0.3s;
}

[data-sp-embed].js .id-auth-block.visible .id-oidc__wire--stripe{
  animation: id-oidc-draw 8.4s cubic-bezier(0.22, 1, 0.36, 1) both infinite;
  animation-delay: 0.44s;
}

[data-sp-embed].js .id-auth-block.visible .id-oidc__flow{
  animation:
    id-oidc-flow-move 1.45s linear infinite,
    id-oidc-flow-vis 8.4s ease infinite;
}

[data-sp-embed].js .id-auth-block.visible .id-oidc__flow--mobile{ animation-delay: 0.16s, 0.16s; }
[data-sp-embed].js .id-auth-block.visible .id-oidc__flow--crm{ animation-delay: 0.3s, 0.3s; }
[data-sp-embed].js .id-auth-block.visible .id-oidc__flow--stripe{ animation-delay: 0.44s, 0.44s; }

[data-sp-embed].js .id-auth-block.visible .id-oidc__float{
  animation: id-oidc-float 4.6s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.28s);
}

[data-sp-embed].js .id-auth-block.visible .id-oidc__node{
  animation: id-oidc-snap 8.4s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  animation-delay: calc(var(--i) * 0.14s);
}

[data-sp-embed].js .id-auth-block.visible .id-oidc__ok{
  animation: id-oidc-ok 8.4s ease both infinite;
  animation-delay: calc(0.18s + var(--i) * 0.14s);
}

[data-sp-embed].js .id-auth-block.visible .id-oidc__hub{
  animation: id-oidc-hub 8.4s ease-in-out infinite;
}

[data-sp-embed].js .id-auth-block.visible .id-oidc__ring{
  animation: id-oidc-ring 8.4s ease-out infinite;
}

[data-sp-embed].js .id-auth-block.visible .id-oidc__ring--2{
  animation-delay: 0.55s;
}

[data-sp-embed].js .id-auth-block.visible .id-oidc__key-badge{
  animation: id-oidc-key 8.4s ease-in-out infinite;
}

[data-sp-embed] .id-oidc__node:hover .id-oidc__float{
  animation-play-state: paused;
  border-color: var(--oidc-accent);
  box-shadow:
    0 0 0 4px var(--oidc-glow),
    0 12px 28px var(--oidc-glow);
  transform: translateY(-1px);
}

[data-sp-embed] .id-oidc:has(.id-oidc__node:hover) .id-oidc__wire{
  opacity: 0.18;
}

[data-sp-embed].js .id-auth-block.visible .id-oidc:has(.id-oidc__node--web:hover) .id-oidc__wire--web, [data-sp-embed].js .id-auth-block.visible .id-oidc:has(.id-oidc__node--mobile:hover) .id-oidc__wire--mobile, [data-sp-embed].js .id-auth-block.visible .id-oidc:has(.id-oidc__node--crm:hover) .id-oidc__wire--crm, [data-sp-embed].js .id-auth-block.visible .id-oidc:has(.id-oidc__node--stripe:hover) .id-oidc__wire--stripe{
  stroke-dashoffset: 0;
  stroke-width: 2.2;
  opacity: 1;
}

[data-sp-embed].js .id-auth-block.visible .id-oidc:has(.id-oidc__node--web:hover) .id-oidc__wire--web, [data-sp-embed].js .id-auth-block.visible .id-oidc:has(.id-oidc__node--web:hover) .id-oidc__flow--web{
  filter: drop-shadow(0 0 6px rgba(37, 99, 235, 0.55));
}

[data-sp-embed].js .id-auth-block.visible .id-oidc:has(.id-oidc__node--mobile:hover) .id-oidc__wire--mobile, [data-sp-embed].js .id-auth-block.visible .id-oidc:has(.id-oidc__node--mobile:hover) .id-oidc__flow--mobile{
  filter: drop-shadow(0 0 6px rgba(124, 58, 237, 0.55));
}

[data-sp-embed].js .id-auth-block.visible .id-oidc:has(.id-oidc__node--crm:hover) .id-oidc__wire--crm, [data-sp-embed].js .id-auth-block.visible .id-oidc:has(.id-oidc__node--crm:hover) .id-oidc__flow--crm{
  filter: drop-shadow(0 0 6px rgba(2, 132, 199, 0.55));
}

[data-sp-embed].js .id-auth-block.visible .id-oidc:has(.id-oidc__node--stripe:hover) .id-oidc__wire--stripe, [data-sp-embed].js .id-auth-block.visible .id-oidc:has(.id-oidc__node--stripe:hover) .id-oidc__flow--stripe{
  filter: drop-shadow(0 0 6px rgba(99, 91, 255, 0.55));
}

[data-sp-embed].js .id-auth-block.visible .id-oidc:has(.id-oidc__node--web:hover) .id-oidc__flow--web, [data-sp-embed].js .id-auth-block.visible .id-oidc:has(.id-oidc__node--mobile:hover) .id-oidc__flow--mobile, [data-sp-embed].js .id-auth-block.visible .id-oidc:has(.id-oidc__node--crm:hover) .id-oidc__flow--crm, [data-sp-embed].js .id-auth-block.visible .id-oidc:has(.id-oidc__node--stripe:hover) .id-oidc__flow--stripe{
  opacity: 1;
  stroke-width: 2.1;
}

@keyframes id-oidc-draw {
  0%, 14% {
    stroke-dashoffset: 240;
    opacity: 0.2;
  }
  28%, 86% {
    stroke-dashoffset: 0;
    opacity: 0.92;
  }
  96%, 100% {
    stroke-dashoffset: 240;
    opacity: 0.15;
  }
}

@keyframes id-oidc-flow-move {
  to { stroke-dashoffset: -62; }
}

@keyframes id-oidc-flow-vis {
  0%, 26% { opacity: 0; }
  34%, 84% { opacity: 0.95; }
  92%, 100% { opacity: 0; }
}

@keyframes id-oidc-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -7px, 0); }
}

@keyframes id-oidc-snap {
  0%, 18% { transform: translate(0, 0); }
  24% { transform: translate(var(--sx), var(--sy)); }
  32%, 100% { transform: translate(0, 0); }
}

@keyframes id-oidc-ok {
  0%, 26% { opacity: 0; transform: translateY(6px) scale(0.9); }
  34%, 84% { opacity: 1; transform: translateY(0) scale(1); }
  94%, 100% { opacity: 0; transform: translateY(-4px) scale(0.96); }
}

@keyframes id-oidc-hub {
  0%, 16% {
    filter: none;
  }
  28%, 78% {
    filter: drop-shadow(0 0 18px rgba(99, 102, 241, 0.28));
  }
  90%, 100% {
    filter: none;
  }
}

@keyframes id-oidc-ring {
  0%, 16% {
    opacity: 0.22;
    transform: translate(-50%, -50%) scale(0.86);
  }
  30% {
    opacity: 0.7;
    transform: translate(-50%, -50%) scale(1);
  }
  62% {
    opacity: 0.28;
    transform: translate(-50%, -50%) scale(1.12);
  }
  86%, 100% {
    opacity: 0.18;
    transform: translate(-50%, -50%) scale(0.9);
  }
}

@keyframes id-oidc-key {
  0%, 18% { transform: scale(0.92); }
  28% { transform: scale(1.08); }
  40%, 78% { transform: scale(1); }
  92%, 100% { transform: scale(0.94); }
}

[data-sp-embed] .id-sec{
  display: grid;
  place-items: center;
}

[data-sp-embed] .id-sec__hover-wave, [data-sp-embed] .id-sec__aura, [data-sp-embed] .id-sec__ripple, [data-sp-embed] .id-sec__field, [data-sp-embed] .id-sec__barrier{
  position: absolute;
  left: 50%;
  top: 46%;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

[data-sp-embed] .id-sec__aura{
  width: 7.4rem;
  height: 7.4rem;
  background:
    radial-gradient(circle, rgba(45, 212, 191, 0.22) 0%, rgba(16, 185, 129, 0.08) 46%, transparent 72%);
  filter: blur(8px);
  opacity: 0.85;
}

[data-sp-embed] .id-sec__field{
  width: 8.6rem;
  height: 8.6rem;
  border: 1px solid rgba(45, 212, 191, 0.28);
  opacity: 0.7;
}

[data-sp-embed] .id-sec__field--2{
  width: 10.8rem;
  height: 10.8rem;
  border-color: rgba(45, 212, 191, 0.16);
  opacity: 0.55;
}

[data-sp-embed] .id-sec__ripple, [data-sp-embed] .id-sec__hover-wave{
  width: 5.4rem;
  height: 5.4rem;
  transform: translate(-50%, -50%) scale(0.42);
  opacity: 0;
}

[data-sp-embed] .id-sec__ripple{
  border: 1.5px solid rgba(244, 63, 94, 0.55);
}

[data-sp-embed] .id-sec__hover-wave{
  border: 1.5px solid rgba(16, 185, 129, 0.28);
}

[data-sp-embed] .id-sec__barrier{
  z-index: 2;
  width: 8.4rem;
  height: 8.4rem;
  border: 2px solid rgba(244, 63, 94, 0.55);
  box-shadow: 0 0 18px rgba(244, 63, 94, 0.18);
  opacity: 0;
}

[data-sp-embed] .id-sec__user{
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 46%;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin: -1rem 0 0 -1rem;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(180deg, #34d399 0%, #0ea5e9 100%);
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.72),
    0 10px 20px rgba(14, 165, 233, 0.28);
  opacity: 0;
}

[data-sp-embed] .id-sec__shield-wrap{
  position: relative;
  z-index: 2;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

[data-sp-embed] .id-auth-viz--secure:hover .id-sec__shield-wrap{
  transform: scale(1.05);
}

[data-sp-embed] .id-sec__shield{
  position: relative;
  display: grid;
  place-items: center;
  width: 5.85rem;
  height: 6.35rem;
  overflow: hidden;
  border-radius: 1.45rem;
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.78) 0%, rgba(240, 253, 250, 0.42) 100%);
  border: 1px solid rgba(167, 243, 208, 0.7);
  box-shadow:
    0 0 0 8px rgba(45, 212, 191, 0.08),
    0 16px 36px rgba(16, 185, 129, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

[data-sp-embed] .id-sec__glyph, [data-sp-embed] .id-sec__mesh{
  position: relative;
  z-index: 1;
  display: block;
}

[data-sp-embed] .id-sec__mesh{
  position: absolute;
  z-index: 2;
  opacity: 0.22;
  mix-blend-mode: multiply;
}

[data-sp-embed] .id-sec__body{
  fill: rgba(255, 255, 255, 0.55);
  stroke: rgba(13, 148, 136, 0.55);
  stroke-width: 1.7;
}

[data-sp-embed] .id-sec__check{
  fill: none;
  stroke: #059669;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 36;
  stroke-dashoffset: 36;
}

[data-sp-embed] .id-sec__scan{
  position: absolute;
  left: 16%;
  right: 16%;
  top: 18%;
  z-index: 4;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.9), transparent);
  opacity: 0;
  pointer-events: none;
}

[data-sp-embed] .id-sec__sensor{
  position: absolute;
  top: 1.05rem;
  left: 50%;
  z-index: 3;
  width: 0.48rem;
  height: 0.48rem;
  margin-left: -0.24rem;
  border-radius: 999px;
  background: #2dd4bf;
  box-shadow: 0 0 10px rgba(45, 212, 191, 0.8);
}

[data-sp-embed] .id-sec__hub{
  position: absolute;
  bottom: 0.72rem;
  z-index: 3;
  font-size: 0.46rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: rgba(15, 118, 110, 0.72);
}

[data-sp-embed] .id-sec__threat{
  position: absolute;
  z-index: 3;
  top: 46%;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin-top: -1rem;
  border-radius: 999px;
  background: #fff;
  color: #e11d48;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow:
    0 0 0 3px rgba(254, 226, 226, 0.9),
    0 10px 18px rgba(244, 63, 94, 0.18);
  opacity: 0;
}

[data-sp-embed] .id-sec__threat--ip{ left: 9%; }
[data-sp-embed] .id-sec__threat--dev{ right: 9%; }

[data-sp-embed] .id-sec__threat span{
  display: grid;
  place-items: center;
}

[data-sp-embed] .id-sec__threat::after{
  content: attr(data-label);
  position: absolute;
  top: calc(100% + 0.32rem);
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #e11d48;
  white-space: nowrap;
}

[data-sp-embed] .id-sec__slash{
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}

[data-sp-embed] .id-sec__slash::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 16%;
  width: 2px;
  height: 68%;
  border-radius: 2px;
  background: #e11d48;
  box-shadow: 0 0 6px rgba(225, 29, 72, 0.45);
  transform: translateX(-50%) rotate(-42deg);
}

[data-sp-embed] .id-sec__ok, [data-sp-embed] .id-sec__badge{
  position: absolute;
  left: 50%;
  z-index: 5;
  padding: 0.28rem 0.72rem;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 8px);
  pointer-events: none;
}

[data-sp-embed] .id-sec__ok{
  bottom: 0.85rem;
  background: #059669;
  color: #fff;
  box-shadow: 0 10px 20px rgba(5, 150, 105, 0.22);
}

[data-sp-embed] .id-sec__badge{
  bottom: 0.85rem;
  background: #be123c;
  color: #fff;
  box-shadow: 0 10px 20px rgba(190, 18, 60, 0.22);
}

[data-sp-embed].js .id-auth-block.visible .id-sec__aura{
  animation: id-sec-aura 9s ease-in-out infinite;
}

[data-sp-embed].js .id-auth-block.visible .id-sec__field{
  animation: id-sec-field 9s ease-in-out infinite;
}

[data-sp-embed].js .id-auth-block.visible .id-sec__field--2{
  animation-delay: 0.12s;
}

[data-sp-embed].js .id-auth-block.visible .id-sec__ripple{
  animation: id-sec-ripple 9s ease-out infinite;
}

[data-sp-embed].js .id-auth-block.visible .id-sec__barrier{
  animation: id-sec-barrier 9s ease-out infinite;
}

[data-sp-embed].js .id-auth-block.visible .id-sec__user{
  animation: id-sec-user 9s cubic-bezier(0.22, 1, 0.36, 1) both infinite;
}

[data-sp-embed].js .id-auth-block.visible .id-sec__check{
  animation: id-sec-check 9s ease both infinite;
}

[data-sp-embed].js .id-auth-block.visible .id-sec__ok{
  animation: id-sec-ok 9s ease both infinite;
}

[data-sp-embed].js .id-auth-block.visible .id-sec__threat--ip{
  animation: id-sec-threat-ip 9s cubic-bezier(0.22, 1, 0.36, 1) both infinite;
}

[data-sp-embed].js .id-auth-block.visible .id-sec__threat--dev{
  animation: id-sec-threat-dev 9s cubic-bezier(0.22, 1, 0.36, 1) both infinite;
}

[data-sp-embed].js .id-auth-block.visible .id-sec__slash{
  animation: id-sec-slash 9s ease both infinite;
}

[data-sp-embed].js .id-auth-block.visible .id-sec__mesh{
  animation: id-sec-mesh 9s ease both infinite;
}

[data-sp-embed].js .id-auth-block.visible .id-sec__sensor{
  animation: id-sec-sensor 9s ease both infinite;
}

[data-sp-embed].js .id-auth-block.visible .id-sec__scan{
  animation: id-sec-scan 9s ease both infinite;
}

[data-sp-embed].js .id-auth-block.visible .id-sec__badge{
  animation: id-sec-badge 9s cubic-bezier(0.22, 1, 0.36, 1) both infinite;
}

[data-sp-embed].js .id-auth-block.visible .id-sec__shield{
  animation: id-sec-shield 9s ease-in-out infinite;
}

[data-sp-embed] .id-auth-viz--secure:hover .id-sec__hover-wave{
  animation: id-sec-hover-wave 1.8s ease-out infinite;
}

[data-sp-embed] .id-auth-viz--secure:hover .id-sec__hover-wave--2{
  animation-delay: 0.55s;
}

@keyframes id-sec-aura {
  0%, 36%, 88%, 100% { opacity: 0.72; transform: translate(-50%, -50%) scale(1); }
  18% { opacity: 0.95; transform: translate(-50%, -50%) scale(1.08); }
  58%, 72% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); filter: blur(6px); }
}

@keyframes id-sec-field {
  0%, 48%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(1); border-color: rgba(45, 212, 191, 0.24); }
  56%, 70% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); border-color: rgba(244, 63, 94, 0.42); }
}

@keyframes id-sec-ripple {
  0%, 54% { opacity: 0; transform: translate(-50%, -50%) scale(0.55); }
  58% { opacity: 0.85; }
  72%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.85); }
}

@keyframes id-sec-barrier {
  0%, 54% { opacity: 0; transform: translate(-50%, -50%) scale(0.78); }
  58% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  70%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.08); }
}

@keyframes id-sec-user {
  0%, 4% { opacity: 0; transform: translate(-5.4rem, 0) scale(0.78); }
  12% { opacity: 1; transform: translate(-3.6rem, 0) scale(1); }
  24% { opacity: 1; transform: translate(0, 0) scale(0.92); }
  32% { opacity: 0; transform: translate(0, 0) scale(0.55); }
  38%, 100% { opacity: 0; transform: translate(0, 0) scale(0.5); }
}

@keyframes id-sec-check {
  0%, 20% { stroke-dashoffset: 36; }
  26%, 36% { stroke-dashoffset: 0; }
  44%, 100% { stroke-dashoffset: 36; }
}

@keyframes id-sec-ok {
  0%, 22% { opacity: 0; transform: translate(-50%, 10px) scale(0.96); }
  26%, 36% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  42%, 100% { opacity: 0; transform: translate(-50%, -6px) scale(0.98); }
}

@keyframes id-sec-threat-ip {
  0%, 42% { opacity: 0; transform: translate(0, 0) scale(0.72); }
  48% { opacity: 1; transform: translate(0, 0) scale(1); }
  56% { opacity: 1; transform: translate(2.85rem, 0) scale(1); }
  60% { opacity: 1; transform: translate(1.15rem, 0) scale(0.94); }
  72% { opacity: 1; transform: translate(0.15rem, 0) scale(0.9); }
  82%, 100% { opacity: 0; transform: translate(-0.35rem, 0) scale(0.78); }
}

@keyframes id-sec-threat-dev {
  0%, 42% { opacity: 0; transform: translate(0, 0) scale(0.72); }
  48% { opacity: 1; transform: translate(0, 0) scale(1); }
  56% { opacity: 1; transform: translate(-2.85rem, 0) scale(1); }
  60% { opacity: 1; transform: translate(-1.15rem, 0) scale(0.94); }
  72% { opacity: 1; transform: translate(-0.15rem, 0) scale(0.9); }
  82%, 100% { opacity: 0; transform: translate(0.35rem, 0) scale(0.78); }
}

@keyframes id-sec-slash {
  0%, 56% { opacity: 0; }
  60%, 76% { opacity: 1; }
  84%, 100% { opacity: 0; }
}

@keyframes id-sec-mesh {
  0%, 46% { opacity: 0.22; transform: scale(1); }
  54%, 74% { opacity: 0.95; transform: scale(1); filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.4)); }
  84%, 100% { opacity: 0.22; transform: scale(1); }
}

@keyframes id-sec-sensor {
  0%, 48%, 84%, 100% { background: #2dd4bf; box-shadow: 0 0 10px rgba(45, 212, 191, 0.8); transform: scale(1); }
  56%, 74% { background: #f43f5e; box-shadow: 0 0 14px rgba(244, 63, 94, 0.85); transform: scale(1.22); }
}

@keyframes id-sec-scan {
  0%, 46% { opacity: 0; top: 18%; }
  52% { opacity: 0.95; top: 22%; }
  72% { opacity: 0.85; top: 68%; }
  80%, 100% { opacity: 0; top: 74%; }
}

@keyframes id-sec-badge {
  0%, 58% { opacity: 0; transform: translate(-50%, 10px) scale(0.96); }
  64%, 78% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  86%, 100% { opacity: 0; transform: translate(-50%, -6px) scale(0.98); }
}

@keyframes id-sec-shield {
  0%, 48%, 82%, 100% {
    box-shadow:
      0 0 0 8px rgba(45, 212, 191, 0.08),
      0 16px 36px rgba(16, 185, 129, 0.14),
      inset 0 1px 0 rgba(255, 255, 255, 0.95);
    transform: scale(1);
  }
  22%, 32% {
    box-shadow:
      0 0 0 10px rgba(16, 185, 129, 0.14),
      0 16px 36px rgba(16, 185, 129, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.95);
    transform: scale(1.03);
  }
  56%, 70% {
    box-shadow:
      0 0 0 10px rgba(244, 63, 94, 0.12),
      0 0 24px rgba(244, 63, 94, 0.16),
      inset 0 1px 0 rgba(255, 255, 255, 0.95);
    transform: scale(1.03);
  }
}

@keyframes id-sec-hover-wave {
  0% { opacity: 0.55; transform: translate(-50%, -50%) scale(0.7); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.05); }
}

@media (min-width: 900px) {
  [data-sp-embed] .id-auth-block{
    flex-direction: row;
    align-items: center;
  }

  [data-sp-embed] .id-auth-block--reverse{
    flex-direction: row-reverse;
  }

  [data-sp-embed] .id-auth-block__visual, [data-sp-embed] .id-auth-block__copy{
    flex: 1 1 0;
  }

  [data-sp-embed] .id-auth-block__copy{
    padding-inline: 0.6rem 0.35rem;
  }

  [data-sp-embed] .id-auth-block--reverse .id-auth-block__copy{
    padding-inline: 0.35rem 0.6rem;
  }
}

@media (max-width: 899px) {
  [data-sp-embed] .id-auth-blocks{
    width: calc(100% - 1.25rem);
  }

  [data-sp-embed] .id-sso-phone{
    width: 6.4rem;
    height: 11.4rem;
  }

  [data-sp-embed] .id-sso__orb--line{ --dx: 4.1rem; --dy: 3.3rem; }
  [data-sp-embed] .id-sso__orb--google{ --dx: -4.1rem; --dy: 3.3rem; }
  [data-sp-embed] .id-sso__orb--apple{ --dx: 4.1rem; --dy: -3.3rem; }
  [data-sp-embed] .id-sso__orb--meta{ --dx: -4.1rem; --dy: -3.3rem; }

  [data-sp-embed] .id-oidc__node{
    min-width: 5.2rem;
  }

  [data-sp-embed] .id-oidc__float{
    padding: 0.42rem 0.48rem 0.42rem;
  }

  [data-sp-embed] .id-oidc__hub{
    width: 4.85rem;
    height: 4.85rem;
  }

  [data-sp-embed] .id-oidc__ring{ width: 5.9rem; height: 5.9rem; }
  [data-sp-embed] .id-oidc__ring--2{ width: 7.05rem; height: 7.05rem; }
}

@media not all /* iOS Reduce Motion: keep animations */ {
  [data-sp-embed].js .id-auth-block.visible .id-sso__orb, [data-sp-embed].js .id-auth-block.visible .id-sso-phone__slide--idle, [data-sp-embed].js .id-auth-block.visible .id-sso-phone__slide--ok, [data-sp-embed].js .id-auth-block.visible .id-oidc__wire, [data-sp-embed].js .id-auth-block.visible .id-oidc__flow, [data-sp-embed].js .id-auth-block.visible .id-oidc__hub, [data-sp-embed].js .id-auth-block.visible .id-oidc__ring, [data-sp-embed].js .id-auth-block.visible .id-oidc__key-badge, [data-sp-embed].js .id-auth-block.visible .id-oidc__node, [data-sp-embed].js .id-auth-block.visible .id-oidc__float, [data-sp-embed].js .id-auth-block.visible .id-oidc__ok, [data-sp-embed].js .id-auth-block.visible .id-sec__ripple, [data-sp-embed].js .id-auth-block.visible .id-sec__check, [data-sp-embed].js .id-auth-block.visible .id-sec__threat, [data-sp-embed].js .id-auth-block.visible .id-sec__badge, [data-sp-embed].js .id-auth-block.visible .id-sec__shield, [data-sp-embed].js .id-auth-block.visible .id-sec__user, [data-sp-embed].js .id-auth-block.visible .id-sec__ok, [data-sp-embed].js .id-auth-block.visible .id-sec__mesh, [data-sp-embed].js .id-auth-block.visible .id-sec__sensor, [data-sp-embed].js .id-auth-block.visible .id-sec__aura, [data-sp-embed].js .id-auth-block.visible .id-sec__field, [data-sp-embed].js .id-auth-block.visible .id-sec__barrier, [data-sp-embed].js .id-auth-block.visible .id-sec__scan, [data-sp-embed].js .id-auth-block.visible .id-sec__slash{
    animation: none !important;
  }

  [data-sp-embed].js .id-auth-block .id-sso__orb, [data-sp-embed].js .id-auth-block .id-sso-phone__slide--ok, [data-sp-embed].js .id-auth-block .id-oidc__node, [data-sp-embed].js .id-auth-block .id-oidc__ok, [data-sp-embed].js .id-auth-block .id-oidc__key-badge, [data-sp-embed].js .id-auth-block .id-sec__ok{
    opacity: 1;
    transform: translate(-50%, 0);
  }

  [data-sp-embed].js .id-auth-block .id-sec__badge, [data-sp-embed].js .id-auth-block .id-sec__threat, [data-sp-embed].js .id-auth-block .id-sec__user{
    opacity: 0;
  }

  [data-sp-embed].js .id-auth-block .id-sec__mesh{
    opacity: 0.4;
  }

  [data-sp-embed].js .id-auth-block .id-sec__field{
    opacity: 0.55;
    transform: translate(-50%, -50%);
  }

  [data-sp-embed].js .id-auth-block .id-sec__barrier, [data-sp-embed].js .id-auth-block .id-sec__scan, [data-sp-embed].js .id-auth-block .id-sec__slash{
    opacity: 0;
  }

  [data-sp-embed].js .id-auth-block .id-oidc__hub{
    transform: translate(-50%, -50%);
  }

  [data-sp-embed].js .id-auth-block .id-oidc__ring, [data-sp-embed].js .id-auth-block .id-oidc__ring--2{
    opacity: 0.45;
    transform: translate(-50%, -50%) scale(1);
  }

  [data-sp-embed].js .id-auth-block .id-oidc__wire{
    stroke-dashoffset: 0;
    opacity: 0.85;
  }

  [data-sp-embed].js .id-auth-block .id-oidc__flow{
    opacity: 0;
  }

  [data-sp-embed].js .id-auth-block .id-sec__check{
    stroke-dashoffset: 0;
  }

  [data-sp-embed].js .id-auth-block .id-sso-phone__slide--idle{
    opacity: 0;
  }

  [data-sp-embed] .id-auth-viz--secure:hover .id-sec__hover-wave{
    animation: none !important;
  }

  [data-sp-embed] .id-auth-viz--secure:hover .id-sec__shield-wrap{
    transform: none;
  }
}

/* ===== SAKINA ID hero — user-status floats (cascade win) ===== */
[data-sp-embed] .hero--cms-story .hero-float .id-float{
  pointer-events: auto !important;
}

@media (max-width: 860px) {
  [data-sp-embed] .hero--cms-story{
    --cms-hero-float-w-lg: clamp(148px, 42vw, 188px);
    --cms-hero-float-w-sm: clamp(138px, 40vw, 176px);
  }
}

/* ===== One ID hub: Apple-like phone + floating badges ===== */
[data-sp-embed] #nocode-platform.id-one-stage.cms-pitch{
  padding-top: clamp(4rem, 7vw, 6.5rem);
  padding-bottom: clamp(4rem, 7vw, 6.5rem);
}

[data-sp-embed] #nocode-platform.id-one-stage.cms-pitch::before{
  background:
    radial-gradient(70% 60% at 18% 28%, rgba(250, 245, 255, 0.55) 0%, rgba(250, 245, 255, 0) 62%),
    radial-gradient(64% 54% at 88% 12%, rgba(239, 246, 255, 0.5) 0%, rgba(239, 246, 255, 0) 64%),
    linear-gradient(to top right, rgba(250, 245, 255, 0.2), #ffffff 48%, rgba(239, 246, 255, 0.3));
}

[data-sp-embed] #nocode-platform.id-one-stage .cms-pitch__inner{
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 3rem !important;
  align-items: center;
  max-width: min(1120px, calc(100% - 4rem)) !important;
}

@media (min-width: 1024px) {
  [data-sp-embed] #nocode-platform.id-one-stage .cms-pitch__inner{
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 5rem !important;
    max-width: min(1180px, calc(100% - 8rem)) !important;
  }
}

[data-sp-embed] #nocode-platform.id-one-stage .platform-wordmark{
  letter-spacing: -0.045em;
  line-height: 0.9;
}

[data-sp-embed] #nocode-platform.id-one-stage .platform-stage__tagline, [data-sp-embed] #nocode-platform.id-one-stage .showcase-copy .platform-stage__tagline, [data-sp-embed] #nocode-platform.id-one-stage .platform-stage__tagline [data-stage-subtitle]{
  max-width: 14em !important;
  letter-spacing: -0.025em;
  line-height: 1.22;
}

[data-sp-embed] #nocode-platform.id-one-stage .id-one-stage__desc{
  margin: 1.35rem 0 0;
  max-width: 32em;
  font-size: clamp(0.9rem, 0.28vw + 0.84rem, 1.04rem);
  font-weight: 500;
  line-height: 1.85;
  letter-spacing: 0.01em;
  color: #4b5563;
}

@media (max-width: 1023px) {
  [data-sp-embed] #nocode-platform.id-one-stage .id-one-stage__desc{
    margin-inline: auto;
    text-align: center;
  }

  [data-sp-embed] #nocode-platform.id-one-stage .cms-pitch__visual{
    justify-content: center;
  }
}

[data-sp-embed] #nocode-platform.id-one-stage .cms-pitch__visual-stage--hub{
  width: 100% !important;
  max-width: min(100%, 36rem) !important;
  margin: 0 !important;
  overflow: visible;
}

[data-sp-embed] #nocode-platform.id-one-stage .cms-pitch__visual{
  justify-content: center;
  overflow: visible;
}

@media (min-width: 1024px) {
  [data-sp-embed] #nocode-platform.id-one-stage .cms-pitch__visual{
    justify-content: flex-end;
  }
}

[data-sp-embed] .id-one-viz{
  position: relative;
  width: 100%;
  aspect-ratio: 420 / 520;
  min-height: 26rem;
  overflow: visible;
}

[data-sp-embed] .id-one-viz::before{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: 78%;
  height: 72%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(251, 113, 133, 0.14) 0%, rgba(165, 180, 252, 0.1) 38%, transparent 70%);
  pointer-events: none;
}

[data-sp-embed] .id-one-viz__wires{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}

[data-sp-embed] .id-one-viz__wires--mobile{
  display: none;
}

[data-sp-embed] .id-one-viz__wire{
  fill: none;
  stroke-width: 1.15;
  stroke-linecap: round;
  opacity: 0.85;
}

[data-sp-embed] .id-one-viz__wire--auth{
  stroke-dasharray: 8 14;
  animation: id-one-wire-flow 2.8s linear infinite;
}

[data-sp-embed] .id-one-viz__wire--pay{
  stroke-dasharray: 6 12;
  animation: id-one-wire-flow 3.2s linear infinite reverse;
}

[data-sp-embed] .id-one-viz__wire--mem{
  stroke-dasharray: 7 13;
  animation: id-one-wire-flow 3.6s linear infinite;
}

@keyframes id-one-wire-flow {
  to { stroke-dashoffset: -44; }
}

[data-sp-embed] .id-one-phone{
  --id-one-loop: 7.6s;
  position: absolute;
  z-index: 2;
  top: 52%;
  left: 50%;
  width: min(40%, 11.6rem);
  isolation: isolate;
  transform: translate3d(-50%, -50%, 0);
}

[data-sp-embed] .id-one-phone__btn{
  position: absolute;
  background: linear-gradient(180deg, #5c5c60, #1c1c1e);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

[data-sp-embed] .id-one-phone__btn--silent{
  top: 18%;
  left: -0.13rem;
  width: 0.16rem;
  height: 1.05rem;
  border-radius: 0.12rem 0 0 0.12rem;
}

[data-sp-embed] .id-one-phone__btn--vol{
  top: 28%;
  left: -0.13rem;
  width: 0.16rem;
  height: 2.35rem;
  border-radius: 0.12rem 0 0 0.12rem;
}

[data-sp-embed] .id-one-phone__btn--power{
  top: 26%;
  right: -0.13rem;
  width: 0.16rem;
  height: 2.05rem;
  border-radius: 0 0.12rem 0.12rem 0;
}

[data-sp-embed] .id-one-phone__bezel{
  position: relative;
  aspect-ratio: 9 / 19.4;
  padding: 0.38rem;
  border-radius: 1.85rem;
  background:
    linear-gradient(160deg, #3a3a3e 0%, #1c1c1e 42%, #0a0a0c 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 28px 48px rgba(15, 23, 42, 0.32),
    0 8px 18px rgba(15, 23, 42, 0.18);
}

[data-sp-embed] .id-one-phone__island{
  position: absolute;
  z-index: 3;
  top: 0.72rem;
  left: 50%;
  width: 38%;
  height: 0.72rem;
  border-radius: 999px;
  transform: translate3d(-50%, 0, 0);
  background: #000;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

[data-sp-embed] .id-one-phone__screen{
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: 1.7rem 0.62rem 0.55rem;
  border-radius: 1.52rem;
  background: #fff;
  overflow: hidden;
  isolation: isolate;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

[data-sp-embed] .id-one-phone__brand{
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  flex: 0 0 auto;
}

[data-sp-embed] .id-one-phone__mark{
  display: grid;
  place-items: center;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 999px;
  background: linear-gradient(145deg, #fb7185, #e11d48);
  color: #fff;
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: 0;
}

[data-sp-embed] .id-one-phone__brand strong{
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #111827;
}

[data-sp-embed] .id-one-phone__flow{
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
}

[data-sp-embed] .id-one-phone__scene{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  opacity: 0;
  pointer-events: none;
}

[data-sp-embed] .id-one-phone__hint, [data-sp-embed] .id-one-phone__scene--wait p{
  margin: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding-inline: 0.12rem;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.3;
  color: #64748b;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}

[data-sp-embed] .id-one-phone__sso{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.22rem;
  width: 100%;
}

[data-sp-embed] .id-one-phone__sso-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.22rem;
  height: 1.18rem;
  border-radius: 0.42rem;
  font-size: 0.44rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1;
}

[data-sp-embed] .id-one-phone__sso-btn svg{
  display: block;
  flex: 0 0 auto;
  width: 0.62rem;
  height: 0.62rem;
}

[data-sp-embed] .id-one-phone__sso-btn--apple svg{
  width: 0.5rem;
  height: 0.58rem;
}

[data-sp-embed] .id-one-phone__sso-btn--line svg{
  width: 0.9rem;
  height: 0.9rem;
}

[data-sp-embed] .id-one-phone__sso-btn--line{
  background: #06c755;
  color: #fff;
}

[data-sp-embed] .id-one-phone__sso-btn--google{
  background: #fff;
  color: #3c4043;
  box-shadow: inset 0 0 0 1px #dadce0;
}

[data-sp-embed] .id-one-phone__sso-btn--apple{
  background: #111827;
  color: #fff;
}

[data-sp-embed] .id-one-phone__sso-btn--facebook{
  background: #1877f2;
  color: #fff;
}

[data-sp-embed] .id-one-phone__spinner{
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  border: 2px solid #fee2e2;
  border-top-color: #e11d48;
}

[data-sp-embed] .id-one-phone__card{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.32rem;
  width: 100%;
  padding: 0.85rem 0.5rem 0.78rem;
  border-radius: 0.95rem;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 10px 24px rgba(225, 29, 72, 0.1);
  text-align: center;
}

[data-sp-embed] .id-one-phone__check{
  display: grid;
  place-items: center;
  width: 2.15rem;
  height: 2.15rem;
}

[data-sp-embed] .id-one-phone__check svg{
  width: 100%;
  height: 100%;
}

[data-sp-embed] .id-one-phone__check-ring, [data-sp-embed] .id-one-phone__check-mark{
  fill: none;
  stroke: #e11d48;
  stroke-linecap: round;
  stroke-linejoin: round;
}

[data-sp-embed] .id-one-phone__check-ring{
  stroke-width: 2.4;
  stroke-dasharray: 114;
  stroke-dashoffset: 114;
}

[data-sp-embed] .id-one-phone__check-mark{
  stroke-width: 2.8;
  stroke-dasharray: 28;
  stroke-dashoffset: 28;
}

[data-sp-embed] .id-one-phone__card p{
  margin: 0.08rem 0 0;
  font-size: 0.48rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.04em;
  color: #111827;
  white-space: nowrap;
}

[data-sp-embed] .id-one-phone__card small{
  color: #64748b;
  font-size: 0.52rem;
  letter-spacing: 0.01em;
}

[data-sp-embed] .id-one-phone__home{
  flex: 0 0 auto;
  width: 2.1rem;
  height: 0.22rem;
  margin-top: 0.15rem;
  border-radius: 999px;
  background: #e5e7eb;
}

[data-sp-embed] .id-one-phone__scene--login{
  animation: id-one-scene-login var(--id-one-loop) ease both infinite;
}

[data-sp-embed] .id-one-phone__scene--wait{
  animation: id-one-scene-wait var(--id-one-loop) ease both infinite;
}

[data-sp-embed] .id-one-phone__scene--done{
  animation: id-one-scene-done var(--id-one-loop) cubic-bezier(0.16, 1, 0.3, 1) both infinite;
}

[data-sp-embed] .id-one-phone__sso-btn--line{
  animation: id-one-sso-press var(--id-one-loop) ease both infinite;
}

[data-sp-embed] .id-one-phone__spinner{
  animation: id-one-spin 0.7s linear infinite;
}

[data-sp-embed] .id-one-phone__check-ring{
  animation: id-one-check-ring var(--id-one-loop) cubic-bezier(0.22, 1, 0.36, 1) both infinite;
}

[data-sp-embed] .id-one-phone__check-mark{
  animation: id-one-check-mark var(--id-one-loop) cubic-bezier(0.22, 1, 0.36, 1) both infinite;
}

[data-sp-embed] .id-one-phone__card{
  animation: id-one-card-pop var(--id-one-loop) cubic-bezier(0.16, 1, 0.3, 1) both infinite;
}

@keyframes id-one-scene-login {
  0%, 3% { opacity: 0; transform: translateY(8px); }
  8%, 24% { opacity: 1; transform: none; }
  30%, 100% { opacity: 0; transform: translateY(-8px); }
}

@keyframes id-one-scene-wait {
  0%, 26% { opacity: 0; transform: translateY(8px); }
  32%, 46% { opacity: 1; transform: none; }
  52%, 100% { opacity: 0; transform: translateY(-8px); }
}

@keyframes id-one-scene-done {
  0%, 48% { opacity: 0; transform: translateY(10px); }
  54%, 90% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: translateY(-6px); }
}

@keyframes id-one-sso-press {
  0%, 16% { transform: scale(1); box-shadow: none; }
  20%, 26% { transform: scale(0.96); box-shadow: 0 0 0 2px rgba(6, 199, 85, 0.28); }
  30%, 100% { transform: scale(1); box-shadow: none; }
}

@keyframes id-one-spin {
  to { transform: rotate(360deg); }
}

@keyframes id-one-check-ring {
  0%, 50% { stroke-dashoffset: 114; }
  62%, 92% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 114; }
}

@keyframes id-one-check-mark {
  0%, 56% { stroke-dashoffset: 28; }
  68%, 92% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 28; }
}

@keyframes id-one-card-pop {
  0%, 50% { transform: scale(0.96); }
  58%, 90% { transform: scale(1); }
  100% { transform: scale(0.96); }
}

[data-sp-embed] .id-one-badge{
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  box-sizing: border-box;
  min-width: 0;
  max-width: min(14.5rem, calc(50% - 0.45rem));
  padding: 0.7rem 0.85rem;
  border-radius: 1.05rem;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow:
    0 14px 32px rgba(15, 23, 42, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.9) inset;
  animation: id-one-float 4.6s ease-in-out infinite;
}

[data-sp-embed] .id-one-badge__icon{
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 0.62rem;
  background: rgba(255, 255, 255, 0.85);
  font-size: 1.05rem;
  line-height: 1;
}

[data-sp-embed] .id-one-badge__body{
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

[data-sp-embed] .id-one-badge__body strong{
  font-size: clamp(0.82rem, 0.55vw + 0.72rem, 0.98rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #111827;
  line-height: 1.3;
  overflow-wrap: break-word;
}

[data-sp-embed] .id-one-badge__body span{
  font-size: clamp(0.68rem, 0.35vw + 0.6rem, 0.78rem);
  font-weight: 600;
  color: #64748b;
  letter-spacing: 0.01em;
  line-height: 1.35;
  overflow-wrap: break-word;
}

[data-sp-embed] .id-one-badge__brands{
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
}

[data-sp-embed] .id-one-badge--auth{
  top: 0;
  left: 0;
  animation-delay: 0s;
}

[data-sp-embed] .id-one-badge--pay{
  top: 7%;
  right: 0;
  animation-delay: -1.4s;
}

[data-sp-embed] .id-one-badge--mem{
  bottom: 1.5%;
  left: 0;
  animation-delay: -2.6s;
}

/* Large PC: keep badges readable but farther from the phone */
@media (min-width: 1024px) {
  [data-sp-embed] .id-one-viz{
    max-width: min(40rem, 100%);
    margin-inline: auto;
    aspect-ratio: 460 / 520;
    min-height: 28rem;
  }

  [data-sp-embed] .id-one-phone{
    width: min(34%, 10.8rem);
  }

  [data-sp-embed] .id-one-badge{
    max-width: min(13.2rem, calc(42% - 0.8rem));
  }

  [data-sp-embed] .id-one-badge--auth{
    top: -0.35rem;
    left: -0.35rem;
  }

  [data-sp-embed] .id-one-badge--pay{
    top: 4%;
    right: -0.35rem;
  }

  [data-sp-embed] .id-one-badge--mem{
    bottom: -0.15rem;
    left: -0.35rem;
  }
}

@media (min-width: 1280px) {
  [data-sp-embed] .id-one-viz{
    max-width: min(44rem, 100%);
    min-height: 30rem;
  }

  [data-sp-embed] .id-one-phone{
    width: min(32%, 10.6rem);
  }

  [data-sp-embed] .id-one-badge{
    max-width: min(13.6rem, calc(40% - 1rem));
  }

  [data-sp-embed] .id-one-badge--auth{
    top: -0.55rem;
    left: -1.1rem;
  }

  [data-sp-embed] .id-one-badge--pay{
    top: 2.5%;
    right: -1.1rem;
  }

  [data-sp-embed] .id-one-badge--mem{
    bottom: -0.35rem;
    left: -1.1rem;
  }
}

@keyframes id-one-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -0.55rem, 0); }
}

@media (max-width: 760px) {
  [data-sp-embed] .id-one-viz{
    min-height: 28rem;
    aspect-ratio: 340 / 540;
  }

  [data-sp-embed] .id-one-phone{
    width: min(48%, 10.4rem);
    top: 52%;
  }

  [data-sp-embed] .id-one-phone__screen{
    padding-inline: 0.42rem;
  }

  [data-sp-embed] .id-one-phone__hint, [data-sp-embed] .id-one-phone__scene--wait p{
    font-size: 0.4rem;
    letter-spacing: 0;
    white-space: normal;
    line-height: 1.28;
  }

  [data-sp-embed] .id-one-badge{
    max-width: min(11.8rem, calc(50% - 0.3rem));
    padding: 0.58rem 0.68rem;
    gap: 0.42rem;
    animation: none;
  }

  [data-sp-embed] .id-one-badge__icon{
    width: 1.65rem;
    height: 1.65rem;
    font-size: 0.95rem;
  }

  [data-sp-embed] .id-one-badge__body strong{
    font-size: clamp(0.74rem, 2.4vw, 0.88rem);
  }

  [data-sp-embed] .id-one-badge__body span{
    font-size: clamp(0.62rem, 2vw, 0.72rem);
  }

  [data-sp-embed] .id-one-badge--auth{ top: 0; left: 0; }
  [data-sp-embed] .id-one-badge--pay{ top: 8%; right: 0; }
  [data-sp-embed] .id-one-badge--mem{ bottom: 1%; left: 0; }

  [data-sp-embed] .id-one-viz__wires--desk{
    display: none;
  }

  [data-sp-embed] .id-one-viz__wires--mobile{
    display: block;
  }
}

@media not all /* iOS Reduce Motion: keep animations */ {
  [data-sp-embed] .id-one-badge, [data-sp-embed] .id-one-viz__wire, [data-sp-embed] .id-one-viz__wire--auth, [data-sp-embed] .id-one-viz__wire--pay, [data-sp-embed] .id-one-viz__wire--mem, [data-sp-embed] .id-one-phone__scene, [data-sp-embed] .id-one-phone__sso-btn--line, [data-sp-embed] .id-one-phone__spinner, [data-sp-embed] .id-one-phone__check, [data-sp-embed] .id-one-phone__check-ring, [data-sp-embed] .id-one-phone__check-mark, [data-sp-embed] .id-one-phone__card{
    animation: none !important;
  }

  [data-sp-embed] .id-one-phone__scene--login, [data-sp-embed] .id-one-phone__scene--wait{
    opacity: 0 !important;
  }

  [data-sp-embed] .id-one-phone__scene--done, [data-sp-embed] .id-one-phone__card{
    opacity: 1 !important;
    transform: none !important;
  }

  [data-sp-embed] .id-one-phone__check-ring, [data-sp-embed] .id-one-phone__check-mark{
    stroke-dashoffset: 0 !important;
  }
}

/* ===== Hero ID cards: tinted glass, float, live counts ===== */
[data-sp-embed] .hero--cms-story .hero-float .id-float{
  --id-live: 16s;
  position: relative;
  overflow: visible;
  isolation: isolate;
  background:
    linear-gradient(135deg, var(--id-tint-from, rgba(255, 255, 255, 0.12)), var(--id-tint-to, rgba(255, 255, 255, 0.04))),
    rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow:
    0 22px 44px rgba(15, 23, 42, 0.14),
    0 0 28px var(--id-float-glow),
    0 1px 0 rgba(255, 255, 255, 0.92) inset;
  animation: id-card-bob 6s ease-in-out infinite;
}

[data-sp-embed] .hero--cms-story .hero-float .id-float::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--id-status) 16%, transparent), transparent 58%),
    linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.38) 46%, transparent 62%);
  opacity: 0.9;
}

[data-sp-embed] .hero--cms-story .hero-float .id-float::after{
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0.22rem;
  border-radius: 1.15rem 0 0 1.15rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--id-status) 88%, white), var(--id-status));
  box-shadow: 0 0 10px color-mix(in srgb, var(--id-status) 45%, transparent);
  pointer-events: none;
}

[data-sp-embed] .hero--cms-story .hero-float .id-float > *{
  position: relative;
  z-index: 2;
}

[data-sp-embed] .hero--cms-story .hero-float .id-float--auth{
  --id-tint-from: rgba(16, 185, 129, 0.1);
  --id-tint-to: rgba(20, 184, 166, 0.05);
  --id-float-glow: rgba(16, 185, 129, 0.22);
  animation-duration: 5.6s;
  animation-delay: 0s;
}

[data-sp-embed] .hero--cms-story .hero-float .id-float--pay{
  --id-tint-from: rgba(168, 85, 247, 0.1);
  --id-tint-to: rgba(99, 102, 241, 0.05);
  --id-float-glow: rgba(139, 92, 246, 0.24);
  animation-duration: 6.4s;
  animation-delay: -1.15s;
}

[data-sp-embed] .hero--cms-story .hero-float .id-float--mem{
  --id-tint-from: rgba(59, 130, 246, 0.1);
  --id-tint-to: rgba(6, 182, 212, 0.05);
  --id-float-glow: rgba(37, 99, 235, 0.22);
  animation-duration: 7s;
  animation-delay: -2.2s;
}

[data-sp-embed] .hero--cms-story .hero-float .id-float--pts{
  --id-tint-from: rgba(245, 158, 11, 0.1);
  --id-tint-to: rgba(249, 115, 22, 0.05);
  --id-float-glow: rgba(245, 158, 11, 0.26);
  animation-duration: 6.2s;
  animation-delay: -3.05s;
}

@keyframes id-card-bob {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-0.42rem) scale(1); }
}

[data-sp-embed] .hero--cms-story .hero-float .id-float:hover, [data-sp-embed] .hero--cms-story .hero-float .id-float:focus-visible{
  animation-play-state: paused;
  background:
    linear-gradient(135deg, var(--id-tint-from), var(--id-tint-to)),
    rgba(255, 255, 255, 0.9);
  transform: translateY(-0.5rem) scale(1.05);
  box-shadow:
    0 32px 56px rgba(15, 23, 42, 0.2),
    0 0 40px var(--id-float-glow),
    0 1px 0 rgba(255, 255, 255, 0.96) inset;
}

[data-sp-embed] .id-float__status{
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

[data-sp-embed] .id-float__status--ok{
  background: linear-gradient(180deg, rgba(52, 211, 153, 0.32), rgba(16, 185, 129, 0.14));
  box-shadow:
    0 0 0 1px rgba(16, 185, 129, 0.22),
    0 0 14px rgba(16, 185, 129, 0.28);
  animation: id-status-glow 2.8s ease-in-out infinite;
}

[data-sp-embed] .id-float__status--active{
  background: linear-gradient(180deg, rgba(196, 181, 253, 0.42), rgba(139, 92, 246, 0.16));
  box-shadow:
    0 0 0 1px rgba(139, 92, 246, 0.24),
    0 0 14px rgba(139, 92, 246, 0.3);
}

[data-sp-embed] .id-float__status--corp{
  background: linear-gradient(180deg, rgba(96, 165, 250, 0.38), rgba(37, 99, 235, 0.16));
  box-shadow:
    0 0 0 1px rgba(37, 99, 235, 0.22),
    0 0 14px rgba(37, 99, 235, 0.28);
}

[data-sp-embed] .id-float__status--pts{
  position: relative;
  overflow: visible;
  background: linear-gradient(180deg, rgba(253, 186, 116, 0.46), rgba(245, 158, 11, 0.18));
  box-shadow:
    0 0 0 1px rgba(245, 158, 11, 0.28),
    0 0 16px rgba(249, 115, 22, 0.32);
}

@keyframes id-status-glow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.22), 0 0 10px rgba(16, 185, 129, 0.22); }
  50% { box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.38), 0 0 18px rgba(52, 211, 153, 0.45); }
}

[data-sp-embed] .id-float__check{
  display: inline-grid;
  place-items: center;
  width: 0.95em;
  height: 0.95em;
  margin-left: 0.18rem;
  border-radius: 999px;
  background: #10b981;
  color: #fff;
  font-size: 0.68em;
  font-weight: 800;
  line-height: 1;
  vertical-align: 0.08em;
  animation: id-check-spark var(--id-live) cubic-bezier(0.16, 1, 0.3, 1) 0.7s infinite;
}

@keyframes id-check-spark {
  0%, 10%, 28%, 100% { transform: scale(1); filter: none; box-shadow: 0 0 0 rgba(16, 185, 129, 0); }
  14% { transform: scale(1.28); filter: brightness(1.2); box-shadow: 0 0 12px rgba(52, 211, 153, 0.8); }
  20% { transform: scale(1); }
}

[data-sp-embed] .id-float--mem p, [data-sp-embed] .id-float--pts .id-float__head{
  position: relative;
}

[data-sp-embed] .id-float__swap{
  position: relative;
  display: inline-grid;
  vertical-align: baseline;
}

[data-sp-embed] .id-float__swap span{
  grid-area: 1 / 1;
  font-variant-numeric: tabular-nums;
}

[data-sp-embed] .id-float__swap span:last-child{
  opacity: 0;
  transform: translateY(0.35em);
}

[data-sp-embed] .id-float__swap--mem span:first-child{
  animation: id-swap-out var(--id-live) cubic-bezier(0.16, 1, 0.3, 1) 2.4s infinite;
}
[data-sp-embed] .id-float__swap--mem span:last-child{
  animation: id-swap-in var(--id-live) cubic-bezier(0.16, 1, 0.3, 1) 2.4s infinite;
}

[data-sp-embed] .id-float__swap--fam span:first-child{
  animation: id-swap-out var(--id-live) cubic-bezier(0.16, 1, 0.3, 1) 4.8s infinite;
}
[data-sp-embed] .id-float__swap--fam span:last-child{
  animation: id-swap-in var(--id-live) cubic-bezier(0.16, 1, 0.3, 1) 4.8s infinite;
}

@keyframes id-swap-out {
  0%, 16% { opacity: 1; transform: none; }
  24%, 78% { opacity: 0; transform: translateY(-0.4em); }
  88%, 100% { opacity: 1; transform: none; }
}

@keyframes id-swap-in {
  0%, 16% { opacity: 0; transform: translateY(0.4em); }
  24%, 78% { opacity: 1; transform: none; }
  88%, 100% { opacity: 0; transform: translateY(0.4em); }
}

[data-sp-embed] .id-float__join{
  position: absolute;
  left: 4.6rem;
  top: -0.85rem;
  padding: 0.12rem 0.38rem;
  border-radius: 999px;
  background: #2563eb;
  color: #fff;
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  animation: id-join-pop var(--id-live) cubic-bezier(0.16, 1, 0.3, 1) 2.4s infinite;
}

@keyframes id-join-pop {
  0%, 18% { opacity: 0; transform: translateY(8px) scale(0.86); }
  26%, 40% { opacity: 1; transform: translateY(-2px) scale(1); }
  52%, 100% { opacity: 0; transform: translateY(-12px) scale(0.94); }
}

[data-sp-embed] .id-float__pts{
  position: relative;
  display: inline-grid;
  font-variant-numeric: tabular-nums;
}

[data-sp-embed] .id-float__pts b{
  grid-area: 1 / 1;
}

[data-sp-embed] .id-float__pts b:last-child{
  opacity: 0;
}

[data-sp-embed] .id-float__pts b:first-child{
  animation: id-swap-out var(--id-live) cubic-bezier(0.22, 1, 0.36, 1) 3.8s infinite;
}

[data-sp-embed] .id-float__pts b:last-child{
  animation: id-swap-in var(--id-live) cubic-bezier(0.22, 1, 0.36, 1) 3.8s infinite;
}

[data-sp-embed] .id-float__delta{
  position: absolute;
  right: 0;
  top: -1.05rem;
  margin: 0;
  padding: 0.1rem 0.34rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #fb923c, #ea580c);
  color: #fff;
  font-size: 0.5rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  animation: id-join-pop var(--id-live) cubic-bezier(0.16, 1, 0.3, 1) 3.8s infinite;
}

[data-sp-embed] .id-float__fam{
  display: inline-flex;
  align-items: center;
  margin-right: 0.28rem;
  vertical-align: -0.12em;
}

[data-sp-embed] .id-float__fam span{
  display: grid;
  place-items: center;
  width: 1.05rem;
  height: 1.05rem;
  margin-left: -0.28rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(245, 158, 11, 0.28);
  font-size: 0.58rem;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}

[data-sp-embed] .id-float__fam span:first-child{
  margin-left: 0;
}

[data-sp-embed] .id-float__fam .is-new{
  opacity: 0;
  transform: scale(0.4);
  animation: id-av-pop var(--id-live) cubic-bezier(0.16, 1, 0.3, 1) 5s infinite;
}

@keyframes id-av-pop {
  0%, 18% { opacity: 0; transform: scale(0.4) translateY(4px); }
  28% { opacity: 1; transform: scale(1.18) translateY(0); }
  36%, 78% { opacity: 1; transform: scale(1); }
  88%, 100% { opacity: 0; transform: scale(0.4); }
}

@media (max-width: 640px) {
  [data-sp-embed] .hero--cms-story .hero-float .id-float--auth p, [data-sp-embed] .hero--cms-story .hero-float .id-float--mem p{
    display: block;
    font-size: 0.58rem;
  }

  [data-sp-embed] .id-float__join{
    left: 3.4rem;
    top: -0.7rem;
    font-size: 0.46rem;
  }

  [data-sp-embed] .id-float__fam span{
    width: 0.9rem;
    height: 0.9rem;
    font-size: 0.5rem;
  }
}

@media not all /* iOS Reduce Motion: keep animations */ {
  [data-sp-embed] .hero--cms-story .hero-float .id-float, [data-sp-embed] .id-float__status--ok, [data-sp-embed] .id-float__check, [data-sp-embed] .id-float__swap span, [data-sp-embed] .id-float__pts b, [data-sp-embed] .id-float__join, [data-sp-embed] .id-float__delta, [data-sp-embed] .id-float__fam .is-new{
    animation: none !important;
  }

  [data-sp-embed] .id-float__swap span:last-child, [data-sp-embed] .id-float__pts b:last-child, [data-sp-embed] .id-float__join, [data-sp-embed] .id-float__delta, [data-sp-embed] .id-float__fam .is-new{
    opacity: 0 !important;
  }

  [data-sp-embed] .id-float__swap span:first-child, [data-sp-embed] .id-float__pts b:first-child{
    opacity: 1 !important;
    transform: none !important;
  }
}

[data-sp-embed] #hero .hero-floats{
  display: none !important;
}

/* ===== ID hub spokes (title section only) ===== */
[data-sp-embed] .id-top-canvas{
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(72% 62% at 12% 8%, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0) 64%),
    radial-gradient(70% 58% at 88% 6%, rgba(224, 231, 255, 0.72) 0%, rgba(224, 231, 255, 0) 66%),
    radial-gradient(74% 62% at 82% 92%, rgba(255, 228, 236, 0.58) 0%, rgba(255, 228, 236, 0) 68%),
    radial-gradient(58% 48% at 18% 88%, rgba(255, 247, 214, 0.42) 0%, rgba(255, 247, 214, 0) 70%),
    #eef0f5;
}

[data-sp-embed] .id-top-canvas > #hero.hero--cms-story::before, [data-sp-embed] .id-top-canvas > #hero.hero--cms-story::after{
  display: none !important;
  content: none !important;
}

[data-sp-embed] #hero.hero--cms-story, [data-sp-embed] #problem.id-problem{
  position: relative;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

[data-sp-embed] #hero.hero--cms-story{
  overflow: hidden !important;
}

[data-sp-embed] #problem.id-problem{
  overflow: visible;
  padding-top: clamp(2.75rem, 6vw, 4.75rem) !important;
  padding-bottom: clamp(4.25rem, 8vw, 6.5rem) !important;
}

[data-sp-embed] .hero--cms-story > .hero-id-aurora{
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

[data-sp-embed] .hero-id-aurora__blob{
  position: absolute;
  display: block;
  border-radius: 50%;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

[data-sp-embed] .hero-id-aurora__blob--rose{
  width: 78%;
  height: 68%;
  left: 38%;
  top: -22%;
  background: radial-gradient(circle at 42% 44%, rgba(244, 63, 94, 0.28) 0%, rgba(251, 113, 133, 0.12) 36%, transparent 70%);
  animation: hero-id-aurora-a 18s ease-in-out infinite;
}

[data-sp-embed] .hero-id-aurora__blob--indigo{
  width: 72%;
  height: 64%;
  left: -18%;
  top: 28%;
  background: radial-gradient(circle at 58% 40%, rgba(99, 102, 241, 0.24) 0%, rgba(165, 180, 252, 0.1) 40%, transparent 72%);
  animation: hero-id-aurora-b 22s ease-in-out infinite;
}

[data-sp-embed] .hero-id-aurora__blob--gold{
  width: 64%;
  height: 56%;
  left: 48%;
  top: 46%;
  background: radial-gradient(circle at 40% 38%, rgba(251, 191, 36, 0.22) 0%, rgba(253, 224, 71, 0.08) 42%, transparent 72%);
  animation: hero-id-aurora-c 26s ease-in-out infinite;
}

[data-sp-embed] .hero-id-aurora__spin{
  position: absolute;
  inset: -28%;
  background: conic-gradient(
    from 210deg,
    transparent 0%,
    rgba(244, 63, 94, 0.09) 8%,
    transparent 18%,
    rgba(99, 102, 241, 0.08) 34%,
    transparent 46%,
    rgba(245, 158, 11, 0.08) 62%,
    transparent 74%,
    rgba(244, 63, 94, 0.06) 88%,
    transparent 100%
  );
  animation: hero-id-aurora-spin 42s linear infinite;
  opacity: 0.72;
}

@keyframes hero-id-aurora-a {
  0%, 100% { transform: translate3d(-4%, 3%, 0) scale(1); }
  50% { transform: translate3d(7%, -6%, 0) scale(1.12); }
}

@keyframes hero-id-aurora-b {
  0%, 100% { transform: translate3d(3%, -4%, 0) scale(1.04); }
  50% { transform: translate3d(-8%, 7%, 0) scale(0.92); }
}

@keyframes hero-id-aurora-c {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(6%, 8%, 0) scale(1.16); }
}

@keyframes hero-id-aurora-spin {
  to { transform: rotate(360deg); }
}

[data-sp-embed] .hero--cms-story > .hero-id-hub{
  position: absolute !important;
  inset: 0;
  z-index: 1 !important;
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  max-height: 100%;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
}

[data-sp-embed] .hero--cms-story > .hero-id-aurora{
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
}

[data-sp-embed] #hero.hero--cms-story > .hero-center{
  z-index: 2;
}

[data-sp-embed] .hero--cms-story .hero-center, [data-sp-embed] #problem .id-problem__grid{
  position: relative;
  z-index: 2;
}

/* ===== USE CASES: scenario cards with animated visuals ===== */
[data-sp-embed] #use-cases .industries__lead{
  max-width: 42rem;
}

[data-sp-embed] .id-cases{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  width: min(76rem, calc(100% - 2rem));
  margin: 2.35rem auto 0;
}

@media (min-width: 1100px) {
  [data-sp-embed] .id-cases{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: min(76rem, calc(100% - 4rem));
    gap: 1.5rem;
  }
}

[data-sp-embed] .id-case{
  --case-accent: #be123c;
  --case-accent-soft: #fda4af;
  --case-wash: #fff1f2;
  --case-after-bg: #fff1f2;
  --case-after-fg: #9f1239;
  --case-after-em: #e11d48;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100%;
  padding: 1.15rem 1.15rem 1.55rem;
  border-radius: 1.15rem;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  transition:
    transform 220ms ease,
    box-shadow 220ms ease;
}

[data-sp-embed] .id-case--ec{
  --case-accent: #be123c;
  --case-accent-soft: #fda4af;
  --case-wash: #fff1f2;
  --case-after-bg: #fff1f2;
  --case-after-fg: #9f1239;
  --case-after-em: #e11d48;
}

[data-sp-embed] .id-case:hover{
  transform: translateY(-0.3rem);
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
}

[data-sp-embed] .id-case--saas{
  --case-accent: #1d4ed8;
  --case-accent-soft: #93c5fd;
  --case-wash: #eff6ff;
  --case-after-bg: #eff6ff;
  --case-after-fg: #1e40af;
  --case-after-em: #2563eb;
}

[data-sp-embed] .id-case--b2b{
  --case-accent: #047857;
  --case-accent-soft: #6ee7b7;
  --case-wash: #ecfdf5;
  --case-after-bg: #ecfdf5;
  --case-after-fg: #047857;
  --case-after-em: #059669;
}

[data-sp-embed] .id-case__visual{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: 10rem;
  margin: 0 0 1.2rem;
  border-radius: 0.9rem;
  background: linear-gradient(180deg, var(--case-wash) 0%, #ffffff 78%);
}

[data-sp-embed] .id-case-viz__grid{
  position: absolute;
  inset: -35%;
  background-image:
    linear-gradient(color-mix(in srgb, var(--case-accent) 14%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--case-accent) 14%, transparent) 1px, transparent 1px);
  background-size: 22px 22px;
  animation: id-case-grid-drift 22s linear infinite;
  opacity: 0.7;
  pointer-events: none;
}

[data-sp-embed] .id-case-viz__glow{
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(42% 48% at 30% 30%, color-mix(in srgb, var(--case-accent-soft) 55%, transparent), transparent 70%),
    radial-gradient(38% 42% at 78% 72%, color-mix(in srgb, var(--case-accent) 18%, transparent), transparent 72%);
  animation: id-case-glow 5.5s ease-in-out infinite alternate;
  pointer-events: none;
}

[data-sp-embed] .id-case-viz__scan{
  position: absolute;
  left: -8%;
  right: -8%;
  height: 42%;
  top: -50%;
  background: linear-gradient(
    180deg,
    transparent 0%,
    color-mix(in srgb, var(--case-accent-soft) 22%, transparent) 48%,
    transparent 100%
  );
  animation: id-case-scan 6.8s ease-in-out infinite;
  pointer-events: none;
}

[data-sp-embed] .id-case-viz__stage{
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  height: 100%;
}

[data-sp-embed] .id-case-viz__play{
  position: relative;
  display: grid;
  place-items: center;
  width: min(16.75rem, 100%);
  height: 100%;
  overflow: hidden;
}

[data-sp-embed] .id-case--ec .id-case-viz__ripple{
  position: absolute;
  top: 1.35rem;
  left: 50%;
  width: 3.2rem;
  height: 3.2rem;
  margin-left: -1.6rem;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--case-accent) 45%, transparent);
  pointer-events: none;
  animation: id-case-ripple 3.6s ease-out infinite;
  animation-delay: 1.35s;
}

[data-sp-embed] .id-case--ec .id-case-viz__ripple--2{
  animation-delay: 1.7s;
}

[data-sp-embed] .id-case-viz__device{
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 0.42rem;
  width: 6.6rem;
  padding: 0.85rem 0.7rem 0.75rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow:
    0 10px 22px rgba(190, 18, 60, 0.12),
    0 1px 0 rgba(255, 255, 255, 0.8) inset;
}

[data-sp-embed] .id-case-viz__fields{
  position: absolute;
  top: 1.05rem;
  left: 50%;
  z-index: 2;
  display: grid;
  gap: 0.28rem;
  width: 4.7rem;
  margin-left: -2.35rem;
  pointer-events: none;
  animation: id-case-fields 3.6s ease-in-out infinite;
}

[data-sp-embed] .id-case-viz__fields span{
  display: block;
  height: 0.42rem;
  border-radius: 999px;
  background: #fecaca;
}

[data-sp-embed] .id-case-viz__fields span:nth-child(2){
  width: 78%;
}

[data-sp-embed] .id-case-viz__fields span:nth-child(3){
  width: 62%;
}

[data-sp-embed] .id-case-viz__tap{
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
}

[data-sp-embed] .id-case-viz__tap-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4.6rem;
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
  background: #be123c;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  animation: id-case-tap 3.6s ease-in-out infinite;
}

[data-sp-embed] .id-case-viz__finger{
  position: absolute;
  right: 0.08rem;
  bottom: -0.22rem;
  z-index: 3;
  width: 0.78rem;
  height: 0.78rem;
  border-radius: 50% 50% 50% 0;
  background: #1e293b;
  box-shadow: 0 4px 8px rgba(15, 23, 42, 0.28);
  transform-origin: 20% 20%;
  animation: id-case-finger 3.6s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

[data-sp-embed] .id-case-viz__ok{
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: #fecdd3;
  color: #be123c;
  font-size: 0.68rem;
  font-weight: 800;
  animation: id-case-ok 3.6s ease-in-out infinite;
}

[data-sp-embed] .id-case-viz__wires{
  position: absolute;
  inset: 18% 10% 18% 10%;
  width: auto;
  height: auto;
  overflow: visible;
}

[data-sp-embed] .id-case-viz__wires path{
  fill: none;
  stroke: color-mix(in srgb, var(--case-accent) 45%, transparent);
  stroke-width: 1.4;
  stroke-linecap: round;
}

[data-sp-embed] .id-case--saas .id-case-viz__wires path{
  stroke-dasharray: 140;
  animation: id-case-wire-plug 3.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

[data-sp-embed] .id-case-viz__node{
  position: absolute;
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 0.5rem;
  background: #fff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
  font-size: 0.68rem;
  font-weight: 800;
  box-shadow: 0 6px 14px rgba(29, 78, 216, 0.12);
  transform: translate(-50%, -50%);
  animation: id-case-plug-node 3.8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

[data-sp-embed] .id-case-viz__node--a{
  top: 32%;
  left: 21%;
}

[data-sp-embed] .id-case-viz__node--b{
  top: 68%;
  left: 21%;
}

[data-sp-embed] .id-case-viz__node--c{
  top: 32%;
  left: 79%;
}

[data-sp-embed] .id-case-viz__hub{
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-width: 3.6rem;
  height: 2.2rem;
  padding: 0 0.7rem;
  border-radius: 999px;
  background: #1d4ed8;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  box-shadow: 0 10px 22px rgba(29, 78, 216, 0.28);
  animation: id-case-plug-hub 3.8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

[data-sp-embed] .id-case-viz__dev-ok{
  position: absolute;
  bottom: 0.55rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.12rem 0.48rem;
  border-radius: 999px;
  background: rgba(29, 78, 216, 0.1);
  color: #1d4ed8;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  white-space: nowrap;
  animation: id-case-dev-ok 3.8s ease-in-out infinite;
}

[data-sp-embed] .id-case-viz__unify-pill{
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.38rem 0.7rem;
  border-radius: 999px;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.08);
}

[data-sp-embed] .id-case-viz__unify-pill--b2b{
  color: #0369a1;
  background: #e0f2fe;
  border: 1px solid #bae6fd;
  transform: translate(-50%, -50%) translate(-2.7rem, -1.85rem);
  animation: id-case-merge-b2b 4.2s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

[data-sp-embed] .id-case-viz__unify-pill--b2c{
  color: #b45309;
  background: #fef3c7;
  border: 1px solid #fde68a;
  transform: translate(-50%, -50%) translate(2.7rem, 1.85rem);
  animation: id-case-merge-b2c 4.2s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

[data-sp-embed] .id-case-viz__unify-hub{
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  min-width: 6.1rem;
  height: 2.15rem;
  padding: 0 0.7rem;
  border-radius: 999px;
  background: #047857;
  color: #fff;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  box-shadow: 0 10px 22px rgba(4, 120, 87, 0.28);
  animation: id-case-merge-hub 4.2s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

[data-sp-embed] .id-case__num{
  display: block;
  margin: 0 0 0.35rem;
  color: var(--case-accent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
}

[data-sp-embed] .id-case__label{
  display: block;
  margin: 0 0 0.55rem;
  color: var(--case-accent);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.35;
}

[data-sp-embed] .id-case h3{
  margin: 0 0 0.55rem;
  font-size: clamp(1.12rem, 0.95rem + 0.45vw, 1.32rem);
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: #0f172a;
  overflow-wrap: anywhere;
}

[data-sp-embed] .id-case__story{
  margin: 0 0 1.15rem;
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.75;
  color: #4b5563;
  flex: 1 1 auto;
}

[data-sp-embed] .id-case__flow{
  display: flex;
  align-items: stretch;
  gap: 0.45rem;
  margin: auto 0 0;
}

[data-sp-embed] .id-case__flow-item{
  flex: 1 1 0;
  display: grid;
  gap: 0.18rem;
  min-width: 0;
  padding: 0.55rem 0.7rem;
  border-radius: 0.75rem;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

[data-sp-embed] .id-case__flow-item em{
  font-style: normal;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

[data-sp-embed] .id-case__flow-item--before{
  background: #f8fafc;
  color: #475569;
}

[data-sp-embed] .id-case__flow-item--before em{
  color: #94a3b8;
}

[data-sp-embed] .id-case__flow-item--after{
  background: var(--case-after-bg);
  color: var(--case-after-fg);
}

[data-sp-embed] .id-case__flow-item--after em{
  color: var(--case-after-em);
}

[data-sp-embed] .id-case__flow-arrow{
  flex: 0 0 auto;
  align-self: center;
  color: #94a3b8;
  font-size: 0.95rem;
  font-weight: 700;
}

@keyframes id-case-grid-drift {
  to { transform: translate(-22px, -22px); }
}

@keyframes id-case-glow {
  from { opacity: 0.72; transform: scale(1); }
  to { opacity: 1; transform: scale(1.06); }
}

@keyframes id-case-scan {
  0% { top: -48%; opacity: 0; }
  12% { opacity: 0.85; }
  58% { opacity: 0.4; }
  100% { top: 110%; opacity: 0; }
}

@keyframes id-case-ripple {
  0% { transform: scale(0.45); opacity: 0.7; }
  55% { transform: scale(2.15); opacity: 0; }
  100% { transform: scale(2.15); opacity: 0; }
}

@keyframes id-case-fields {
  0%, 14% { opacity: 1; }
  28%, 100% { opacity: 0; }
}

@keyframes id-case-tap {
  0%, 18% { opacity: 0; transform: scale(0.96); }
  30% { opacity: 1; transform: scale(1); }
  40% { transform: scale(0.92); }
  50% { transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes id-case-ok {
  0%, 40% { transform: scale(0.55); opacity: 0; }
  52%, 78% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.55); opacity: 0; }
}

@keyframes id-case-finger {
  0%, 26% {
    opacity: 0;
    transform: rotate(45deg) translate(0.45rem, 0.45rem);
  }
  34% {
    opacity: 1;
    transform: rotate(45deg) translate(0.12rem, 0.12rem);
  }
  42% {
    opacity: 1;
    transform: rotate(45deg) translate(-0.08rem, -0.08rem) scale(0.9);
  }
  54%, 72% {
    opacity: 1;
    transform: rotate(45deg) translate(0.1rem, 0.12rem);
  }
  86%, 100% {
    opacity: 0;
    transform: rotate(45deg) translate(0.45rem, 0.45rem);
  }
}

@keyframes id-case-wire-plug {
  0%, 10% { stroke-dashoffset: 140; opacity: 0.2; }
  38%, 72% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 140; opacity: 0.2; }
}

@keyframes id-case-plug-node {
  0%, 16% { transform: translate(-50%, -50%) scale(1); }
  42%, 70% { transform: translate(-50%, -50%) scale(0.94); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

@keyframes id-case-plug-hub {
  0%, 16% { transform: scale(0.96); box-shadow: 0 8px 16px rgba(29, 78, 216, 0.16); }
  46%, 68% { transform: scale(1.05); box-shadow: 0 14px 28px rgba(29, 78, 216, 0.34); }
  100% { transform: scale(0.96); box-shadow: 0 8px 16px rgba(29, 78, 216, 0.16); }
}

@keyframes id-case-dev-ok {
  0%, 28% { opacity: 0; transform: translateX(-50%) translateY(0.2rem); }
  42%, 74% { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(0.2rem); }
}

@keyframes id-case-merge-b2b {
  0%, 16% {
    transform: translate(-50%, -50%) translate(-2.7rem, -1.85rem);
    opacity: 1;
  }
  48%, 72% {
    transform: translate(-50%, -50%) translate(0, 0) scale(0.82);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%) translate(-2.7rem, -1.85rem);
    opacity: 1;
  }
}

@keyframes id-case-merge-b2c {
  0%, 16% {
    transform: translate(-50%, -50%) translate(2.7rem, 1.85rem);
    opacity: 1;
  }
  48%, 72% {
    transform: translate(-50%, -50%) translate(0, 0) scale(0.82);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%) translate(2.7rem, 1.85rem);
    opacity: 1;
  }
}

@keyframes id-case-merge-hub {
  0%, 16% { transform: scale(0.92); opacity: 0.72; }
  48%, 74% { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(0.92); opacity: 0.72; }
}

@media not all /* iOS Reduce Motion: keep animations */ {
  [data-sp-embed] .id-case, [data-sp-embed] .id-case:hover{
    transform: none;
  }

  [data-sp-embed] .id-case-viz__grid, [data-sp-embed] .id-case-viz__glow, [data-sp-embed] .id-case-viz__scan, [data-sp-embed] .id-case-viz__ripple, [data-sp-embed] .id-case-viz__fields, [data-sp-embed] .id-case-viz__tap-btn, [data-sp-embed] .id-case-viz__ok, [data-sp-embed] .id-case-viz__finger, [data-sp-embed] .id-case-viz__wires path, [data-sp-embed] .id-case-viz__node, [data-sp-embed] .id-case-viz__hub, [data-sp-embed] .id-case-viz__dev-ok, [data-sp-embed] .id-case-viz__unify-pill, [data-sp-embed] .id-case-viz__unify-hub, [data-sp-embed] .id-case-viz__id, [data-sp-embed] .id-case-viz__dash, [data-sp-embed] .id-case-viz__slots i{
    animation: none;
  }
}

@media (min-width: 761px) and (max-width: 1099px) {
  [data-sp-embed] .id-cases{
    width: min(42rem, calc(100% - 1.75rem));
  }
}

@media (max-width: 760px) {
  [data-sp-embed] #use-cases.section-band.band-industries{
    min-height: 0;
    display: block;
    padding-top: calc(
      var(--sp-public-header-offset, 4.5rem) + env(safe-area-inset-top, 0px) + 2.5rem
    );
    padding-bottom: 3rem;
  }

  [data-sp-embed] .id-cases{
    width: min(30rem, calc(100% - 1.5rem));
  }

  [data-sp-embed] .id-case{
    padding: 1rem 1rem 1.35rem;
  }

  [data-sp-embed] .id-case__visual{
    height: 8.5rem;
  }

  [data-sp-embed] .id-case--b2b .id-case__visual{
    height: 10.25rem;
  }

  [data-sp-embed] .id-case-viz__unify-hub{
    animation: none;
    transform: none;
    opacity: 1;
  }

  [data-sp-embed] .id-case-viz__unify-pill--b2b, [data-sp-embed] .id-case-viz__unify-pill--b2c{
    animation: none;
  }

  [data-sp-embed] .id-case-viz__unify-pill--b2b{
    transform: translate(-50%, -50%) translate(0, -2.35rem);
  }

  [data-sp-embed] .id-case-viz__unify-pill--b2c{
    transform: translate(-50%, -50%) translate(0, 2.35rem);
  }
}

/* Fluid type: larger default body, then shrink/grow with tab width */
[data-sp-embed] .hero--cms-story .hero-center{
  max-width: min(48rem, 92vw);
}

[data-sp-embed] .hero--cms-story .hero-brand-logo--above-title .hero-brand-wordmark__full{
  font-size: clamp(1.4rem, 0.68rem + 2.75vw, 2.9rem) !important;
}

[data-sp-embed] .hero--cms-story .hero-copy h1, [data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
  font-size: clamp(1.8rem, 0.95rem + 2.7vw, 3.85rem) !important;
}

[data-sp-embed] #top .section-heading h2, [data-sp-embed] #id-auth .section-heading h2, [data-sp-embed] #id-payments .section-heading h2, [data-sp-embed] #id-membership .section-heading h2, [data-sp-embed] #id-cases .section-heading h2, [data-sp-embed] #id-usecases .section-heading h2, [data-sp-embed] #contact .section-heading h2, [data-sp-embed] .hero-cms-nocode .nocode-section-wrap .section-heading h2{
  font-size: clamp(1.5rem, 0.72rem + 2.15vw, 3rem) !important;
}

[data-sp-embed] #nocode-platform .platform-stage__tagline, [data-sp-embed] #nocode-platform .showcase-copy .platform-stage__tagline, [data-sp-embed] #nocode-platform .platform-stage__tagline [data-stage-subtitle]{
  font-size: clamp(1.42rem, 0.88rem + 1.55vw, 2.7rem) !important;
}

[data-sp-embed] #top .industries__lead, [data-sp-embed] #top .feature-index__lead, [data-sp-embed] #top .contact__lead, [data-sp-embed] #hero .hero-subtitle, [data-sp-embed] #hero .hero-subtitle--lead, [data-sp-embed] #nocode-platform .id-one-stage__desc{
  font-size: clamp(1.08rem, 0.96rem + 0.48vw, 1.36rem) !important;
}

[data-sp-embed] .id-auth-block__copy h3, [data-sp-embed] .id-pay-block__copy h3, [data-sp-embed] .id-mem-block__copy h3, [data-sp-embed] .id-case h3, [data-sp-embed] .id-problem__title, [data-sp-embed] .id-eco__card h3{
  font-size: clamp(1.2rem, 0.98rem + 0.95vw, 1.82rem);
}

[data-sp-embed] .id-auth-block__copy p, [data-sp-embed] .id-pay-block__copy p, [data-sp-embed] .id-mem-block__copy p, [data-sp-embed] .id-eco__card p, [data-sp-embed] .id-case__story, [data-sp-embed] .id-gw-note, [data-sp-embed] .feature-nav-card__desc{
  font-size: clamp(1.02rem, 0.94rem + 0.32vw, 1.16rem);
}

@media (max-width: 760px) {
  [data-sp-embed] .hero--cms-story .hero-brand-logo--above-title .hero-brand-wordmark__full{
    font-size: clamp(1.38rem, 5.6vw, 1.85rem) !important;
  }

  [data-sp-embed] .hero--cms-story .hero-copy h1, [data-sp-embed] .hero--cms-story .hero-center .hero-copy h1{
    font-size: clamp(1.5rem, 7.2vw, 1.75rem) !important;
  }
}

/* Mobile hero copy: true horizontal center (floats are hidden on ID) */
@media (max-width: 767px) {
  [data-sp-embed] #hero.hero--cms-story{
    padding-inline: 0 !important;
    align-items: center !important;
  }

  [data-sp-embed] #hero.hero--cms-story > .hero-center{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-inline: 1.35rem !important;
    box-sizing: border-box !important;
    align-items: center !important;
    text-align: center !important;
    transform: none !important;
    left: auto !important;
    right: auto !important;
  }

  [data-sp-embed] #hero.hero--cms-story .hero-brand-logo--above-title, [data-sp-embed] #hero.hero--cms-story .hero-center .hero-copy, [data-sp-embed] #hero.hero--cms-story .hero-center .hero-copy h1{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    transform: none !important;
    align-items: center !important;
  }

  [data-sp-embed] #hero.hero--cms-story .hero-center .hero-copy h1{
    font-size: clamp(1.5rem, 7.2vw, 1.75rem) !important;
    letter-spacing: 0.01em !important;
  }

  [data-sp-embed] #hero.hero--cms-story .hero-title-float, [data-sp-embed] #hero.hero--cms-story .hero-title-float + .hero-title-float{
    width: auto !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  [data-sp-embed] #hero.hero--cms-story .hero-center .hero-actions{
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-inline: 0 !important;
  }
}

/* PC / tablet hero copy: size to the title, then center that block */
@media (min-width: 768px) {
  [data-sp-embed] #hero.hero--cms-story{
    padding-inline: 0 !important;
    align-items: center !important;
  }

  [data-sp-embed] #hero.hero--cms-story > .hero-center{
    width: max-content !important;
    max-width: min(52rem, 92vw) !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-inline: 1.5rem !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    transform: none !important;
    overflow-x: visible !important;
    left: auto !important;
    right: auto !important;
  }

  [data-sp-embed] #hero.hero--cms-story .hero-brand-logo--above-title, [data-sp-embed] #hero.hero--cms-story .hero-center .hero-copy, [data-sp-embed] #hero.hero--cms-story .hero-center .hero-copy h1{
    width: max-content !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    transform: none !important;
    align-items: center !important;
  }

  [data-sp-embed] #hero.hero--cms-story .hero-center .hero-copy h1{
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  [data-sp-embed] #hero.hero--cms-story .hero-title-float, [data-sp-embed] #hero.hero--cms-story .hero-title-float + .hero-title-float{
    display: block !important;
    width: max-content !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  [data-sp-embed] #hero.hero--cms-story .hero-center .hero-actions{
    width: auto !important;
    max-width: 100% !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-inline: 0 !important;
  }
}

/* Hero CTAs: hug the label, no extra horizontal space */
[data-sp-embed] #hero.hero--cms-story .hero-center .hero-actions, [data-sp-embed] #hero.hero--cms-story .hero-center .hero-actions__pair{
  width: auto !important;
  max-width: 100% !important;
  align-items: center !important;
  align-content: center !important;
}

[data-sp-embed] #hero.hero--cms-story .hero-center .hero-actions .button, [data-sp-embed] #hero.hero--cms-story .hero-center .hero-actions .button.secondary.button--glow, [data-sp-embed] #hero.hero--cms-story .hero-center .hero-actions .button.button--dark, [data-sp-embed] #hero.hero--cms-story .hero-center .hero-actions .hero-cta-btn{
  display: inline-flex !important;
  width: fit-content !important;
  max-width: 100% !important;
  flex: 0 0 auto !important;
  padding-inline: 0.85em !important;
  white-space: nowrap !important;
}

[data-sp-embed] #hero.hero--cms-story .hero-center .hero-copy h1{
  gap: 0.32em !important;
}

[data-sp-embed] #hero.hero--cms-story .hero-title-float + .hero-title-float{
  margin-top: 0 !important;
}

[data-sp-embed] #hero.hero--cms-story .hero-center .hero-actions{
  margin-top: 2.15rem !important;
  gap: 0.8rem !important;
}

[data-sp-embed] #hero.hero--cms-story .hero-center .hero-actions__pair{
  gap: 0.8rem !important;
}

@media (min-width: 768px) {
  [data-sp-embed] #hero.hero--cms-story .hero-center .hero-copy h1{
    gap: 0.26em !important;
  }

  [data-sp-embed] #hero.hero--cms-story .hero-center .hero-actions, [data-sp-embed] #hero.hero--cms-story .hero-center .hero-actions__pair{
    margin-top: 2.5rem !important;
    gap: 0.9rem !important;
  }

  [data-sp-embed] #hero.hero--cms-story .hero-center .hero-actions__pair{
    margin-top: 0 !important;
  }
}

/* Jump tabs: stop hover/drag from jittering the cursor */
[data-sp-embed] .section-jump-bar__item{
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

[data-sp-embed] .section-jump-bar__item::before, [data-sp-embed] .section-jump-bar__item::after{
  pointer-events: none !important;
}

[data-sp-embed] .section-jump-bar__item::after{
  left: 12%;
  right: 12%;
  height: 3px;
}

[data-sp-embed] .section-jump-bar.is-pinned{
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: #f8f9fa;
}

/* ID hero: ADD one menu-bar of space above the title (do not pack it to the top) */
[data-sp-embed] #hero.hero--cms-story, [data-sp-embed] #hero.hero--cms-story[data-sp-embed-top]{
  padding-top: calc(
    var(--sp-public-header-offset, 4.5rem) + env(safe-area-inset-top, 0px)
    + var(--cms-hero-title-gap, clamp(10.5rem, 15vh, 13.5rem))
    + var(--sp-public-header-offset, 4.5rem)
  ) !important;
}

[data-sp-embed] #hero.hero--cms-story > .hero-center{
  margin-top: 0 !important;
}

@media (max-width: 1024px) {
  [data-sp-embed] #hero.hero--cms-story, [data-sp-embed] #hero.hero--cms-story[data-sp-embed-top]{
    padding-top: calc(
      var(--sp-public-header-offset, 4.5rem) + env(safe-area-inset-top, 0px)
      + var(--sp-public-header-offset, 4.5rem)
    ) !important;
    justify-content: center !important;
  }

  [data-sp-embed] #hero.hero--cms-story > .hero-center{
    margin-top: 0 !important;
  }
}

@media (max-width: 767px) {
  [data-sp-embed] #hero.hero--cms-story, [data-sp-embed] #hero.hero--cms-story[data-sp-embed-top]{
    box-sizing: border-box !important;
    min-height: 100svh !important;
    min-height: 100dvh !important;
    padding-top: calc(
      var(--sp-public-header-offset, 4.5rem) + env(safe-area-inset-top, 0px) + 2.25rem
    ) !important;
    padding-bottom: 2.75rem !important;
    justify-content: center !important;
  }

  [data-sp-embed] #hero.hero--cms-story > .hero-center{
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  [data-sp-embed] #hero.hero--cms-story .hero-brand-logo--above-title{
    margin-top: 0.35rem !important;
    margin-bottom: 1.15rem !important;
  }

  [data-sp-embed] #hero.hero--cms-story .hero-center .hero-actions{
    margin-top: 2.85rem !important;
  }

  [data-sp-embed] .hero-id-aurora__blob--rose{
    width: 88%;
    height: 72%;
    left: 6%;
    top: 4%;
  }

  [data-sp-embed] .hero-id-aurora__blob--indigo{
    width: 86%;
    height: 70%;
    left: 7%;
    top: 14%;
  }

  [data-sp-embed] .hero-id-aurora__blob--gold{
    width: 78%;
    height: 62%;
    left: 11%;
    top: 18%;
  }

  [data-sp-embed] .hero-id-aurora__spin{
    inset: -12%;
  }
}

/* Case 2: scattered site IDs merge into one SAKINA ID screen */
[data-sp-embed] .id-case--saas .id-case-viz__play{
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
}

[data-sp-embed] .id-case--saas .id-case-viz__glow{
  inset: auto;
  top: 50%;
  left: 50%;
  width: 10.5rem;
  height: 7.5rem;
  background: radial-gradient(
    circle at center,
    color-mix(in srgb, var(--case-accent-soft) 62%, transparent) 0%,
    color-mix(in srgb, var(--case-accent) 16%, transparent) 42%,
    transparent 72%
  );
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  animation: id-case-saas-glow 5.5s ease-in-out infinite alternate;
}

[data-sp-embed] .id-case-viz__id{
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 5.15rem;
  height: 1.42rem;
  border-radius: 0.42rem;
  background: #fff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
  box-shadow: 0 6px 14px rgba(29, 78, 216, 0.14);
}

[data-sp-embed] .id-case-viz__id--a{
  top: 12%;
  left: 6%;
  animation: id-case-id-a 4.8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

[data-sp-embed] .id-case-viz__id--b{
  top: 68%;
  left: 8%;
  animation: id-case-id-b 4.8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

[data-sp-embed] .id-case-viz__id--c{
  top: 14%;
  right: 6%;
  left: auto;
  animation: id-case-id-c 4.8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

[data-sp-embed] .id-case-viz__dash{
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 0.28rem;
  width: 6.4rem;
  height: 5.15rem;
  padding: 0.4rem 0.45rem 0.38rem;
  border-radius: 0.72rem;
  background: #fff;
  border: 1px solid #bfdbfe;
  box-shadow: 0 10px 22px rgba(29, 78, 216, 0.16);
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  animation: id-case-dash 4.8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

[data-sp-embed] .id-case-viz__dash-head{
  font-size: 0.54rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #1d4ed8;
  text-align: center;
  line-height: 1.2;
}

[data-sp-embed] .id-case-viz__slots{
  display: grid;
  gap: 0.22rem;
  align-content: center;
  min-height: 0;
}

[data-sp-embed] .id-case-viz__slots i{
  display: block;
  height: 0.72rem;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 0.48rem;
  font-weight: 800;
  font-style: normal;
  letter-spacing: 0.08em;
  text-align: center;
  line-height: 0.72rem;
  animation: id-case-slot 4.8s ease-in-out infinite;
}

[data-sp-embed] .id-case-viz__slots i:nth-child(1){ animation-delay: 0.08s; }
[data-sp-embed] .id-case-viz__slots i:nth-child(2){ animation-delay: 0.16s; }
[data-sp-embed] .id-case-viz__slots i:nth-child(3){ animation-delay: 0.24s; }

@keyframes id-case-saas-glow {
  from {
    opacity: 0.55;
    transform: translate(-50%, -50%) scale(0.94);
    -webkit-transform: translate(-50%, -50%) scale(0.94);
  }
  to {
    opacity: 0.95;
    transform: translate(-50%, -50%) scale(1.08);
    -webkit-transform: translate(-50%, -50%) scale(1.08);
  }
}

@keyframes id-case-id-a {
  0%, 18% {
    opacity: 1;
    transform: translate(0, 0) rotate(-7deg);
  }
  48%, 58% {
    opacity: 0.35;
    transform: translate(3.55rem, 1.55rem) rotate(0) scale(0.72);
  }
  70%, 100% {
    opacity: 0;
    transform: translate(3.55rem, 1.55rem) scale(0.45);
  }
}

@keyframes id-case-id-b {
  0%, 18% {
    opacity: 1;
    transform: translate(0, 0) rotate(6deg);
  }
  48%, 58% {
    opacity: 0.35;
    transform: translate(3.4rem, -1.45rem) rotate(0) scale(0.72);
  }
  70%, 100% {
    opacity: 0;
    transform: translate(3.4rem, -1.45rem) scale(0.45);
  }
}

@keyframes id-case-id-c {
  0%, 18% {
    opacity: 1;
    transform: translate(0, 0) rotate(8deg);
  }
  48%, 58% {
    opacity: 0.35;
    transform: translate(-3.15rem, 1.45rem) rotate(0) scale(0.72);
  }
  70%, 100% {
    opacity: 0;
    transform: translate(-3.15rem, 1.45rem) scale(0.45);
  }
}

@keyframes id-case-dash {
  0%, 16% {
    transform: translate(-50%, -50%) scale(0.9);
    -webkit-transform: translate(-50%, -50%) scale(0.9);
    opacity: 0.38;
    box-shadow: 0 8px 16px rgba(29, 78, 216, 0.1);
  }
  42%, 78% {
    transform: translate(-50%, -50%) scale(1);
    -webkit-transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    box-shadow: 0 14px 26px rgba(29, 78, 216, 0.28);
  }
  100% {
    transform: translate(-50%, -50%) scale(0.9);
    -webkit-transform: translate(-50%, -50%) scale(0.9);
    opacity: 0.38;
    box-shadow: 0 8px 16px rgba(29, 78, 216, 0.1);
  }
}

@keyframes id-case-slot {
  0%, 36% { opacity: 0.18; transform: scaleX(0.72); }
  52%, 82% { opacity: 1; transform: scaleX(1); }
  100% { opacity: 0.18; transform: scaleX(0.72); }
}

/* ===== Ecosystem map: SAKINA ID hub + connected products ===== */
[data-sp-embed] #integration.integration-band{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #ffffff !important;
  color: #0f172a;
}

[data-sp-embed] #integration.integration-band::before{
  display: none;
}

[data-sp-embed] #integration.integration-band > *{
  position: relative;
  z-index: 1;
}

[data-sp-embed] #integration .section-label{
  color: #e11d48;
}

[data-sp-embed] #integration .section-heading h2{
  color: #0f172a;
}

[data-sp-embed] #integration .industries__lead{
  color: #4b5563;
}

[data-sp-embed] .id-eco-map{
  --eco-col-gap: 1.25rem;
  width: min(68rem, calc(100% - 2rem));
  margin: 2.4rem auto 0;
}

[data-sp-embed] .id-eco-map__stage{
  display: grid;
  justify-items: center;
  gap: 0;
}

[data-sp-embed] .id-eco-map__hub{
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.95rem 1.35rem 0.95rem 0.95rem;
  border-radius: 999px;
  background: linear-gradient(145deg, #fb7185 0%, #e11d48 52%, #be123c 100%);
  color: #fff;
  box-shadow: 0 14px 32px rgba(225, 29, 72, 0.18);
}

[data-sp-embed] .id-eco-map__hub-mark{
  display: grid;
  place-items: center;
  width: 2.45rem;
  height: 2.45rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0;
}

[data-sp-embed] .id-eco-map__hub-copy{
  display: grid;
  gap: 0.12rem;
  text-align: left;
}

[data-sp-embed] .id-eco-map__hub-copy strong{
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.1;
}

[data-sp-embed] .id-eco-map__hub-copy small{
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.82);
}

[data-sp-embed] .id-eco-map__tree{
  position: relative;
  z-index: 1;
  width: 100%;
  height: 4.6rem;
  margin-top: -0.7rem;
  margin-bottom: -0.45rem;
}

[data-sp-embed] .id-eco-map__stem, [data-sp-embed] .id-eco-map__bar, [data-sp-embed] .id-eco-map__drop{
  position: absolute;
  pointer-events: none;
  border-radius: 999px;
}

[data-sp-embed] .id-eco-map__stem{
  left: 50%;
  top: 0;
  z-index: 1;
  width: 1.5px;
  height: 40%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #fb7185, #f43f5e);
}

[data-sp-embed] .id-eco-map__bar{
  top: 40%;
  left: calc((100% - 2 * var(--eco-col-gap)) / 6);
  right: calc((100% - 2 * var(--eco-col-gap)) / 6);
  height: 1.5px;
  background: linear-gradient(90deg, #fb7185 0%, #fbbf24 50%, #818cf8 100%);
}

[data-sp-embed] .id-eco-map__drop{
  top: 40%;
  bottom: 0;
  width: 1.5px;
  overflow: visible;
  transform: translateX(-50%);
  transition: filter 220ms ease, width 220ms ease;
}

[data-sp-embed] .id-eco-map__drop::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 2;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px 3px currentColor;
  transform: translate(-50%, -50%) scale(0.85);
  opacity: 0.78;
  pointer-events: none;
  transition:
    opacity 220ms ease,
    transform 220ms ease,
    box-shadow 220ms ease;
}

[data-sp-embed] .id-eco-map__drop--ma{
  left: calc((100% - 2 * var(--eco-col-gap)) / 6);
  color: #fb7185;
  background: linear-gradient(180deg, #fb7185, #f43f5e);
}

[data-sp-embed] .id-eco-map__drop--cms{
  left: 50%;
  color: #f59e0b;
  background: linear-gradient(180deg, #fbbf24, #ea580c);
}

[data-sp-embed] .id-eco-map__drop--api{
  left: calc(100% - (100% - 2 * var(--eco-col-gap)) / 6);
  color: #818cf8;
  background: linear-gradient(180deg, #a5b4fc, #6366f1);
}

[data-sp-embed] .id-eco-map__stem i, [data-sp-embed] .id-eco-map__drop i{
  position: absolute;
  left: 50%;
  top: 0;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px 2px currentColor;
  animation: id-eco-spark 2.8s ease-in-out infinite;
}

[data-sp-embed] .id-eco-map__stem i{
  color: #fb7185;
}

[data-sp-embed] .id-eco-map__drop--ma i{
  color: #fb7185;
  animation-delay: 0.35s;
}

[data-sp-embed] .id-eco-map__drop--cms i{
  color: #f59e0b;
  animation-delay: 0.7s;
}

[data-sp-embed] .id-eco-map__drop--api i{
  color: #818cf8;
  animation-delay: 1.05s;
}

@keyframes id-eco-spark {
  0% { top: 0; opacity: 0; }
  14% { opacity: 1; }
  86% { opacity: 1; }
  100% { top: calc(100% - 4px); opacity: 0; }
}

[data-sp-embed] .id-eco-map__nodes{
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  width: 100%;
}

[data-sp-embed] .id-eco-map__node{
  --node-accent: #e11d48;
  --node-wash: #fff7f8;
  --node-glow: rgba(225, 29, 72, 0.22);
  position: relative;
  display: grid;
  gap: 0.55rem;
  padding: 1.45rem 1.35rem 1.25rem;
  border-radius: 1.15rem;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow:
    0 10px 28px rgba(15, 23, 42, 0.05),
    inset 3px 0 0 var(--node-accent);
  color: inherit;
  text-decoration: none;
  overflow: visible;
  transition:
    transform 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    background 220ms ease;
}

[data-sp-embed] .id-eco-map__dot{
  position: absolute;
  top: -2px;
  left: 50%;
  z-index: 2;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--node-accent);
  transform: translateX(-50%);
  box-shadow: 0 0 8px var(--node-glow);
  animation: id-eco-dock 2.6s ease-in-out infinite;
}

@keyframes id-eco-dock {
  0%, 100% { opacity: 0.72; box-shadow: 0 0 6px var(--node-glow); }
  50% { opacity: 1; box-shadow: 0 0 11px var(--node-glow); }
}

[data-sp-embed] .id-eco-map__kicker{
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--node-accent);
}

[data-sp-embed] .id-eco-map__node h3{
  margin: 0;
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.4;
  color: #0f172a;
}

[data-sp-embed] .id-eco-map__points{
  display: grid;
  gap: 0.42rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-sp-embed] .id-eco-map__points li{
  position: relative;
  padding-left: 1.05rem;
  font-size: 0.86rem;
  font-weight: 550;
  line-height: 1.6;
  color: #4b5563;
}

[data-sp-embed] .id-eco-map__points li::before{
  content: "✦";
  position: absolute;
  left: 0;
  top: 0.02em;
  font-size: 0.68rem;
  color: var(--node-accent);
}

[data-sp-embed] .id-eco-map__cta{
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  margin-top: 0.2rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--node-accent);
}

[data-sp-embed] .id-eco-map__cta::after{
  content: "→";
  transition: transform 180ms ease;
}

[data-sp-embed] .id-eco-map__node:hover, [data-sp-embed] .id-eco-map__node:focus-visible{
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--node-accent) 42%, rgba(15, 23, 42, 0.08));
  background: var(--node-wash);
  box-shadow:
    0 16px 36px rgba(15, 23, 42, 0.08),
    0 0 0 1px color-mix(in srgb, var(--node-accent) 18%, transparent),
    0 18px 40px var(--node-glow),
    inset 3px 0 0 var(--node-accent);
}

[data-sp-embed] .id-eco-map__node:hover .id-eco-map__cta::after, [data-sp-embed] .id-eco-map__node:focus-visible .id-eco-map__cta::after{
  transform: translateX(0.2rem);
}

[data-sp-embed] .id-eco-map__node:hover .id-eco-map__dot, [data-sp-embed] .id-eco-map__node:focus-visible .id-eco-map__dot{
  animation: none;
  opacity: 1;
  box-shadow: 0 0 14px 5px var(--node-glow);
  transform: translateX(-50%) scale(1.45);
}

[data-sp-embed] .id-eco-map__node:focus-visible{
  outline: 2px solid #0f172a;
  outline-offset: 3px;
}

[data-sp-embed] .id-eco-map:has(.id-eco-map__node--ma:is(:hover, [data-sp-embed] :focus-visible)) .id-eco-map__drop--ma, [data-sp-embed] .id-eco-map:has(.id-eco-map__node--cms:is(:hover, [data-sp-embed] :focus-visible)) .id-eco-map__drop--cms, [data-sp-embed] .id-eco-map:has(.id-eco-map__node--api:is(:hover, [data-sp-embed] :focus-visible)) .id-eco-map__drop--api{
  width: 2px;
  filter: brightness(1.2);
}

[data-sp-embed] .id-eco-map:has(.id-eco-map__node--ma:is(:hover, [data-sp-embed] :focus-visible)) .id-eco-map__drop--ma::before, [data-sp-embed] .id-eco-map:has(.id-eco-map__node--cms:is(:hover, [data-sp-embed] :focus-visible)) .id-eco-map__drop--cms::before, [data-sp-embed] .id-eco-map:has(.id-eco-map__node--api:is(:hover, [data-sp-embed] :focus-visible)) .id-eco-map__drop--api::before{
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.25);
  box-shadow: 0 0 18px 6px currentColor;
}

[data-sp-embed] .id-eco-map__node--ma{
  --node-accent: #e11d48;
  --node-wash: #fff7f8;
  --node-glow: rgba(225, 29, 72, 0.2);
}
[data-sp-embed] .id-eco-map__node--cms{
  --node-accent: #ea580c;
  --node-wash: #fff7ed;
  --node-glow: rgba(234, 88, 12, 0.2);
}
[data-sp-embed] .id-eco-map__node--api{
  --node-accent: #6366f1;
  --node-wash: #f5f3ff;
  --node-glow: rgba(99, 102, 241, 0.22);
}

@media (min-width: 900px) {
  [data-sp-embed] .id-eco-map{
    width: min(70rem, calc(100% - 4rem));
    margin-top: 3rem;
  }

  [data-sp-embed] .id-eco-map__nodes{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--eco-col-gap);
  }

  [data-sp-embed] .id-eco-map__node{
    padding: 1.7rem 1.45rem 1.4rem;
  }

  [data-sp-embed] .id-eco-map__node h3{
    font-size: 1.16rem;
  }
}

@media (max-width: 899px) {
  [data-sp-embed] .id-eco-map__bar, [data-sp-embed] .id-eco-map__drop{
    display: none;
  }

  [data-sp-embed] .id-eco-map__tree{
    width: 1.5px;
    height: 1.7rem;
    margin: -0.35rem auto 0.05rem;
  }

  [data-sp-embed] .id-eco-map__stem{
    left: 0;
    width: 100%;
    height: 100%;
    transform: none;
    background: linear-gradient(180deg, #fb7185, #fbbf24, #818cf8);
  }

  [data-sp-embed] .id-eco-map__node{
    padding-left: 1.35rem;
  }

  [data-sp-embed] .id-eco-map__dot{
    display: none;
  }
}

@media (max-width: 760px) {
  [data-sp-embed] .id-eco-map{
    width: min(28rem, calc(100% - 1.5rem));
  }

  [data-sp-embed] .id-eco-map__hub{
    width: 100%;
    max-width: 20rem;
    justify-content: center;
  }

  [data-sp-embed] .id-eco-map__node h3{
    font-size: 1.02rem;
  }

  [data-sp-embed] .id-eco-map__points li{
    font-size: 0.82rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-sp-embed] .id-eco-map__stem i, [data-sp-embed] .id-eco-map__drop i, [data-sp-embed] .id-eco-map__dot{
    animation: none;
  }
}

/* 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}