/* Three core product pages share one opening rhythm while keeping distinct product visuals. */
.core-product-page {
  --core-ink: #101828;
  --core-muted: #536178;
  --core-blue: #3157ff;
}

.core-product-page .agent-new-hero.agent-hero-centered,
.core-product-page .voice-hero.desk-hero {
  min-height: 0 !important;
  background-color: #f5f7fd !important;
  background-image:
    radial-gradient(ellipse 58% 72% at 6% 0%, rgba(70, 105, 255, .12), transparent 74%),
    radial-gradient(ellipse 45% 58% at 98% 100%, rgba(45, 191, 226, .09), transparent 76%) !important;
  background-size: 100% 100%, 100% 100% !important;
  background-repeat: no-repeat !important;
}

.core-product-agent .agent-new-hero.agent-hero-centered {
  display: grid !important;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  align-items: center !important;
  gap: clamp(36px, 4vw, 72px) !important;
  padding: clamp(72px, 7vw, 106px) max(32px, calc((100vw - 1240px) / 2)) 82px !important;
  text-align: left !important;
  overflow: hidden !important;
}

.core-product-agent .agent-new-hero.agent-hero-centered::before {
  display: none !important;
}

.core-product-agent .agent-new-hero.agent-hero-centered .hero-copy {
  min-width: 0 !important;
  max-width: 620px !important;
  margin: 0 !important;
}

.core-product-agent .agent-new-hero.agent-hero-centered .hero-eyebrow {
  justify-content: flex-start !important;
  margin-bottom: 20px !important;
}

body.core-product-agent .agent-new-hero.agent-hero-centered h1 {
  max-width: none !important;
  margin: 0 !important;
  font-size: clamp(38px, 3vw, 44px) !important;
  line-height: 1.13 !important;
  letter-spacing: -.045em !important;
}

.core-product-agent .agent-new-hero.agent-hero-centered h1 em {
  white-space: normal !important;
}

.core-product-agent .agent-new-hero.agent-hero-centered .agent-hero-lead {
  max-width: 560px !important;
  margin: 25px 0 0 !important;
  color: var(--core-muted) !important;
  font-size: 16px !important;
  line-height: 1.8 !important;
}

.core-product-agent .agent-new-hero.agent-hero-centered .hero-actions {
  justify-content: flex-start !important;
  margin-top: 30px !important;
}

.core-product-agent .agent-hero-trust {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: start;
  gap: 10px 18px;
  max-width: 580px;
  margin: 28px 0 0;
  font-size: 12px;
}

.core-agent-visual {
  position: relative;
  z-index: 1;
  min-width: 0;
  margin: 0;
  padding: 12px;
  border: 1px solid rgba(152, 172, 229, .42);
  border-radius: 24px;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 32px 74px rgba(53, 81, 155, .16), 0 4px 16px rgba(53, 81, 155, .06);
}

.core-agent-visual::before {
  position: absolute;
  z-index: -1;
  inset: -32px -28px;
  border-radius: 44px;
  background: radial-gradient(ellipse at center, rgba(81, 121, 255, .2), transparent 68%);
  content: '';
}

.core-agent-visual img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 520px;
  aspect-ratio: 1.1;
  object-fit: cover;
  object-position: 48% center;
  border-radius: 15px;
}

.core-product-page .voice-hero.desk-hero {
  padding-top: 78px !important;
  padding-bottom: 82px !important;
  overflow: hidden;
}

.core-product-page .voice-hero-grid {
  grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr) !important;
  gap: clamp(36px, 4vw, 62px) !important;
  align-items: center !important;
}

.core-product-page .voice-hero h1 {
  max-width: 590px;
  font-size: clamp(38px, 3.5vw, 52px) !important;
  line-height: 1.13 !important;
  letter-spacing: -.045em !important;
}

.core-product-page .voice-hero h1 > span,
.core-product-page .voice-hero h1 em {
  white-space: normal !important;
}

.core-product-page .voice-hero h1 em {
  color: var(--core-blue) !important;
}

html[lang="en"] .core-product-page .voice-hero h1 {
  font-size: clamp(38px, 3vw, 44px) !important;
}

.core-product-page .voice-hero-lead {
  max-width: 560px;
  margin-top: 25px;
  color: var(--core-muted);
  font-size: 16px;
  line-height: 1.8;
}

.core-product-page .voice-proof {
  gap: 10px 18px;
  margin-top: 26px;
  font-size: 12px;
}

.core-product-page .voice-actions {
  margin-top: 29px;
}

.core-product-page .voice-console {
  min-width: 0;
}

.core-product-helpdesk .desk-hero-console {
  padding-top: 34px !important;
  padding-bottom: 70px !important;
}

.core-product-helpdesk .voice-hero.desk-hero {
  padding-bottom: 36px !important;
}

.core-product-page .voice-feature-showcase,
.core-product-agent .model {
  padding-top: clamp(78px, 7vw, 112px);
}

@media (max-width: 1000px) {
  .core-product-agent .agent-new-hero.agent-hero-centered,
  .core-product-page .voice-hero-grid {
    grid-template-columns: 1fr !important;
  }

  .core-product-agent .agent-new-hero.agent-hero-centered {
    gap: 48px !important;
    padding: 72px 32px 80px !important;
  }

  .core-product-agent .agent-new-hero.agent-hero-centered .hero-copy,
  .core-product-page .voice-hero-copy {
    max-width: 680px !important;
  }

  .core-agent-visual {
    width: min(100%, 760px);
    margin-inline: auto;
  }

  .core-agent-visual img { aspect-ratio: 1.65; }
  .core-product-page .voice-hero.desk-hero { padding: 72px 0 80px !important; }
  .core-product-page .voice-hero-grid { gap: 42px !important; }
  .core-product-page .voice-console { width: min(100%, 760px); margin-inline: auto; }
}

@media (max-width: 600px) {
  .core-product-agent .agent-new-hero.agent-hero-centered {
    gap: 36px !important;
    padding: 52px 20px 62px !important;
  }

  body.core-product-agent .agent-new-hero.agent-hero-centered h1,
  .core-product-page .voice-hero h1 { font-size: clamp(32px, 8.5vw, 40px) !important; }
  .core-product-agent .agent-new-hero.agent-hero-centered .agent-hero-lead,
  .core-product-page .voice-hero-lead { font-size: 15px !important; }
  .core-product-agent .agent-hero-trust { grid-template-columns: 1fr; }
  .core-agent-visual { padding: 7px; border-radius: 17px; }
  .core-agent-visual img { aspect-ratio: 1.28; border-radius: 11px; }
  .core-product-page .voice-hero.desk-hero { padding: 54px 0 64px !important; }
  .core-product-page .voice-hero-grid { gap: 30px !important; }
  .core-product-page .voice-proof { grid-template-columns: 1fr; }
  .core-product-helpdesk .desk-hero-console { padding: 24px 0 0 !important; }
}

/* Helpdesk: give the product UI its own full-width moment below the centered title. */
.core-product-helpdesk .voice-hero.desk-hero {
  padding: clamp(144px, 12vw, 192px) 0 104px !important;
}

.core-product-helpdesk .voice-hero-grid {
  width: min(1280px, calc(100% - 64px));
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
  align-items: start !important;
}

.core-product-helpdesk .desk-hero-heading {
  max-width: none !important;
  text-align: center;
}

.core-product-helpdesk .desk-hero-heading .voice-kicker {
  justify-content: center;
  margin-bottom: 25px;
}

.core-product-helpdesk .voice-hero h1 {
  max-width: 1100px;
  margin-inline: auto;
  font-size: clamp(48px, 5.2vw, 74px) !important;
  line-height: 1.15 !important;
}

.core-product-helpdesk .desk-hero-console {
  width: min(100%, 980px) !important;
  margin: 52px auto 0 !important;
  padding: 22px 18px 52px !important;
}

.core-product-helpdesk .desk-hero-console::before {
  position: absolute;
  z-index: 0;
  inset: 3% 4% 7%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(76, 117, 255, .16), transparent 70%);
  filter: blur(26px);
  content: '';
}

.core-product-helpdesk .desk-hero-frame {
  position: relative;
  z-index: 1;
  box-shadow: 0 28px 70px rgba(28, 51, 118, .14);
}

.core-product-helpdesk .desk-highlight-card.is-assist { bottom: 4px; left: 0; }
.core-product-helpdesk .desk-highlight-card.is-context { top: 0; right: 0; }

.core-product-helpdesk .desk-hero-story {
  display: grid;
  justify-items: center;
  width: min(100%, 1080px);
  margin: 36px auto 0;
  text-align: center;
}

.core-product-helpdesk .desk-hero-story .voice-hero-lead {
  max-width: 830px;
  margin: 0;
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.85;
}

.core-product-helpdesk .desk-hero-story .voice-proof {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
  gap: 14px;
  margin-top: 34px;
  text-align: left;
}

.core-product-helpdesk .desk-hero-story .voice-proof span {
  justify-content: center;
  min-height: 62px;
  padding: 12px;
  border: 1px solid rgba(95, 125, 210, .18);
  border-radius: 12px;
  background: rgba(255, 255, 255, .72);
  color: #35425c;
  font-size: 14px;
}

.core-product-helpdesk .desk-hero-story .voice-actions {
  justify-content: center;
  margin-top: 32px;
}

@media (max-width: 900px) {
  .core-product-helpdesk .voice-hero.desk-hero { padding: 142px 0 82px !important; }
  .core-product-helpdesk .voice-hero-grid { width: min(100% - 40px, 760px); }
  .core-product-helpdesk .voice-hero h1 { font-size: clamp(40px, 6vw, 58px) !important; }
  .core-product-helpdesk .desk-hero-console { margin-top: 42px !important; padding: 0 !important; }
  .core-product-helpdesk .desk-hero-details {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
  }
  .core-product-helpdesk .desk-highlight-card.is-assist,
  .core-product-helpdesk .desk-highlight-card.is-context { position: static; width: auto; }
  .core-product-helpdesk .desk-hero-story { margin-top: 32px; }
  .core-product-helpdesk .desk-hero-story .voice-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .core-product-helpdesk .voice-hero.desk-hero { padding: 126px 0 68px !important; }
  .core-product-helpdesk .voice-hero-grid { width: calc(100% - 36px); }
  .core-product-helpdesk .desk-hero-heading .voice-kicker { margin-bottom: 20px; }
  .core-product-helpdesk .voice-hero h1 { font-size: clamp(34px, 9vw, 46px) !important; line-height: 1.19 !important; }
  .core-product-helpdesk .desk-hero-console { margin-top: 34px !important; }
  .core-product-helpdesk .desk-hero-frame,
  .core-product-helpdesk .desk-hero-frame img { border-radius: 12px; }
  .core-product-helpdesk .desk-hero-details { grid-template-columns: 1fr; }
  .core-product-helpdesk .desk-hero-story { margin-top: 26px; }
  .core-product-helpdesk .desk-hero-story .voice-hero-lead { font-size: 15px; text-align: left; }
  .core-product-helpdesk .desk-hero-story .voice-proof { gap: 9px; margin-top: 24px; }
  .core-product-helpdesk .desk-hero-story .voice-proof span { min-height: 54px; padding: 10px; font-size: 12px; }
  .core-product-helpdesk .desk-hero-story .voice-actions { width: 100%; margin-top: 26px; }
}

/* The translated Voice pages still use the earlier hero markup; keep their layout in step. */
html:is([lang="en"], [lang="ja"]) body.core-product-voice .voice-hero.desk-hero {
  min-height: 0 !important;
  padding: clamp(144px, 12vw, 192px) 0 104px !important;
}

html:is([lang="en"], [lang="ja"]) body.core-product-voice .voice-hero-grid {
  width: min(1280px, calc(100% - 64px));
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
  justify-items: center !important;
}

html:is([lang="en"], [lang="ja"]) body.core-product-voice .voice-hero-copy {
  width: 100%;
  max-width: 1100px !important;
  text-align: center;
}

html:is([lang="en"], [lang="ja"]) body.core-product-voice .voice-kicker { justify-content: center; margin-bottom: 25px; }

html:is([lang="en"], [lang="ja"]) body.core-product-voice .voice-hero h1 {
  max-width: 1100px;
  margin: 0 auto;
  font-size: clamp(42px, 4.7vw, 66px) !important;
  line-height: 1.15 !important;
}

html:is([lang="en"], [lang="ja"]) body.core-product-voice .voice-hero h1 span,
html:is([lang="en"], [lang="ja"]) body.core-product-voice .voice-hero h1 em { white-space: normal !important; }

html:is([lang="en"], [lang="ja"]) body.core-product-voice .voice-hero-lead {
  max-width: 830px;
  margin: 32px auto 0;
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.85;
}

html:is([lang="en"], [lang="ja"]) body.core-product-voice .voice-proof {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(100%, 1080px);
  gap: 14px;
  margin: 34px auto 0;
  text-align: left;
}

html:is([lang="en"], [lang="ja"]) body.core-product-voice .voice-proof span {
  justify-content: center;
  min-height: 62px;
  padding: 12px;
  border: 1px solid rgba(95, 125, 210, .18);
  border-radius: 12px;
  background: rgba(255, 255, 255, .72);
  color: #35425c;
  font-size: 14px;
}

html:is([lang="en"], [lang="ja"]) body.core-product-voice .voice-actions { justify-content: center; margin-top: 32px; }

html:is([lang="en"], [lang="ja"]) body.core-product-voice .voice-conversation-scene {
  width: min(100%, 760px) !important;
  margin: 52px auto 0 !important;
  justify-content: center;
}

@media (max-width: 900px) {
  html:is([lang="en"], [lang="ja"]) body.core-product-voice .voice-hero.desk-hero { padding: 142px 0 82px !important; }
  html:is([lang="en"], [lang="ja"]) body.core-product-voice .voice-hero-grid { width: min(100% - 40px, 760px); }
  html:is([lang="en"], [lang="ja"]) body.core-product-voice .voice-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html:is([lang="en"], [lang="ja"]) body.core-product-voice .voice-conversation-scene { margin-top: 42px !important; }
}

@media (max-width: 600px) {
  html:is([lang="en"], [lang="ja"]) body.core-product-voice .voice-hero.desk-hero { padding: 126px 0 68px !important; }
  html:is([lang="en"], [lang="ja"]) body.core-product-voice .voice-hero-grid { width: calc(100% - 36px); }
  html:is([lang="en"], [lang="ja"]) body.core-product-voice .voice-hero h1 { font-size: clamp(34px, 9vw, 46px) !important; }
  html:is([lang="en"], [lang="ja"]) body.core-product-voice .voice-hero-lead { font-size: 15px; text-align: left; }
  html:is([lang="en"], [lang="ja"]) body.core-product-voice .voice-proof { grid-template-columns: 1fr; gap: 9px; margin-top: 24px; }
  html:is([lang="en"], [lang="ja"]) body.core-product-voice .voice-proof span { justify-content: flex-start; min-height: 54px; padding: 10px 14px; font-size: 12px; }
  html:is([lang="en"], [lang="ja"]) body.core-product-voice .voice-actions { width: 100%; margin-top: 26px; }
  html:is([lang="en"], [lang="ja"]) body.core-product-voice .voice-conversation-scene { margin-top: 34px !important; }
}