/* O produto é explicado antes dos casos de aplicação. */
.hero.hero-clarity {
  grid-template-columns: 1.03fr 1fr;
  align-items: center;
  gap: clamp(32px, 4.5vw, 68px);
  padding-block: 64px 78px;
}
.hero-clarity .hero-copy { min-width: 0; }
.hero.hero-clarity h1 {
  font-size: clamp(43px, 4.15vw, 60px);
  line-height: 1.15;
  letter-spacing: -.05em;
  max-width: 620px;
}
.hero-clarity .hero-lead {
  font-size: 18px;
  line-height: 1.7;
  max-width: 510px;
  margin-top: 24px;
  color: var(--ink);
}
.hero-clarity .hero-explanation {
  font-size: 16px;
  line-height: 1.8;
  color: var(--muted);
  max-width: 490px;
  margin-top: 13px;
}
.hero-clarity .hero-actions { margin-top: 27px; }
.hero-clarity .hero-note { margin-top: 15px; }
.product-overview {
  background: #e4ece3;
  border-radius: 60px 12px 50px 12px;
  padding: 27px;
  min-width: 0;
  width: 100%;
  position: relative;
}
.overview-kicker { font-size: 13px; font-weight: 600; color: var(--petrol); margin: 0 0 21px 4px; }
.overview-source { background: var(--paper); border-radius: 12px; padding: 20px; display: flex; align-items: center; gap: 14px; }
.overview-source svg, .overview-use svg { flex-shrink: 0; width: 30px; height: 30px; stroke: var(--petrol); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.overview-source strong { font-size: 16px; font-weight: 600; line-height: 1.5; display: block; }
.overview-source p { font-size: 13px; color: var(--muted); margin-top: 5px; line-height: 1.7; }
.overview-connector { display: block; height: 39px; font-size: 23px; line-height: 39px; color: var(--petrol); text-align: center; }
.overview-agent { background: var(--petrol); color: var(--paper); border-radius: 14px; padding: 23px; display: flex; gap: 20px; align-items: center; }
.overview-agent img { width: 56px; height: 56px; }
.overview-agent strong { display: block; font-size: 24px; letter-spacing: -.035em; font-weight: 600; line-height: 1.4; }
.overview-agent p { color: #d4e5db; font-size: 14px; line-height: 1.6; margin-top: 4px; }
.overview-directions { display: grid; grid-template-columns: 1fr 1fr; height: 34px; text-align: center; color: var(--petrol); font-size: 21px; }
.overview-uses { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.overview-use { background: var(--paper); border-radius: 12px; padding: 19px 17px 17px; min-width: 0; }
.overview-use svg { width: 27px; height: 27px; margin-bottom: 15px; }
.overview-use h3 { font-size: 16px; line-height: 1.5; letter-spacing: -.025em; }
.overview-use p { font-size: 14px; line-height: 1.65; margin-top: 7px; }
.overview-channel { display: block; font-size: 12px; font-weight: 500; color: var(--petrol); line-height: 1.6; margin-top: 15px; }
.overview-note { font-size: 12px; color: var(--muted); line-height: 1.7; margin: 17px 3px 0; }
.applications-section {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(40px, 6vw, 94px);
  align-items: start;
  padding-block: 76px 82px;
  scroll-margin-top: 20px;
}
.applications-intro { padding-top: 32px; min-width: 0; }
.applications-intro h2 { font-size: clamp(35px, 3.2vw, 46px); }
.applications-intro > p:not(.eyebrow) { font-size: 16px; line-height: 1.8; color: var(--muted); margin-top: 24px; max-width: 410px; }
.application-contexts { margin-top: 31px; display: grid; gap: 18px; }
.application-contexts > div { display: flex; gap: 14px; align-items: start; }
.application-contexts > div > span { color: var(--petrol); background: #e4ece3; border-radius: 50%; width: 32px; height: 32px; flex-shrink: 0; display: grid; place-items: center; font-size: 12px; font-weight: 600; }
.application-contexts p { font-size: 14px; line-height: 1.7; color: var(--muted); }
.application-contexts strong { display: block; color: var(--ink); font-size: 16px; font-weight: 600; margin-bottom: 3px; }
.applications-intro > .applications-note { font-size: 13px !important; line-height: 1.8; max-width: 370px; }
.applications-section .integrated-stage { width: 100%; max-width: none; scroll-margin-top: 120px; }
.applications-section .scene-category { font-size: 12px; font-weight: 600; line-height: 1.6; letter-spacing: .025em; }
.applications-section .scene-heading h3 { font-size: 27px; margin-top: 9px; }
.applications-section .scene-heading { min-height: 125px; }
@media (prefers-reduced-motion: no-preference) {
  .overview-connector, .overview-directions span { animation: overview-flow 1s ease-out 2; }
  .overview-directions span { animation-delay: .5s; }
  @keyframes overview-flow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
}
@media (max-width: 1120px) {
  .hero.hero-clarity { gap: 30px; }
  .hero.hero-clarity h1 { font-size: 46px; }
  .hero-clarity .hero-lead { font-size: 17px; }
  .product-overview { padding: 23px; }
  .overview-source { padding: 17px 14px; gap: 11px; }
  .overview-agent { padding: 20px 17px; gap: 14px; }
  .overview-agent strong { font-size: 22px; }
  .overview-use { padding: 17px 14px; }
  .applications-section { gap: 42px; grid-template-columns: .78fr 1.22fr; }
}
@media (max-width: 900px) {
  .hero.hero-clarity { grid-template-columns: 1fr; padding-block: 46px 55px; gap: 35px; }
  .hero.hero-clarity h1 { font-size: clamp(39px, 6.4vw, 58px); max-width: 720px; }
  .hero-clarity .hero-lead, .hero-clarity .hero-explanation { max-width: 620px; }
  .product-overview { max-width: 640px; justify-self: center; }
  .applications-section { grid-template-columns: 1fr; gap: 30px; padding-block: 44px 57px; }
  .applications-intro { padding-top: 0; }
  .applications-intro h2 br { display: none; }
  .applications-intro > p:not(.eyebrow) { max-width: 630px; margin-top: 17px; }
  .application-contexts { grid-template-columns: 1fr 1fr; margin-top: 24px; gap: 22px; }
  .applications-intro > .applications-note { max-width: 630px; }
  .applications-section .integrated-stage { max-width: 640px; justify-self: center; }
}
@media (max-width: 700px) {
  .hero.hero-clarity { padding-block: 35px 46px; gap: 28px; }
  .hero.hero-clarity h1 { font-size: clamp(35px, 8.8vw, 53px); line-height: 1.17; }
  .hero-clarity .hero-lead { font-size: 17px; line-height: 1.7; margin-top: 23px; }
  .hero-clarity .hero-explanation { font-size: 15px; line-height: 1.8; margin-top: 11px; }
  .product-overview { padding: 23px 17px 19px; border-radius: 38px 10px 36px 10px; }
  .overview-kicker { font-size: 13px; margin-bottom: 17px; }
  .overview-source { padding: 17px 13px; gap: 11px; }
  .overview-source svg { width: 25px; height: 25px; }
  .overview-source strong { font-size: 15px; }
  .overview-source p { font-size: 12px; }
  .overview-agent { padding: 19px 15px; gap: 15px; }
  .overview-agent img { width: 47px; height: 47px; }
  .overview-agent strong { font-size: 22px; }
  .overview-agent p { font-size: 13px; }
  .overview-uses { gap: 10px; }
  .overview-use { padding: 16px 12px; }
  .overview-use h3 { font-size: 15px; }
  .overview-use p { font-size: 13px; }
  .overview-channel { font-size: 12px; margin-top: 12px; }
  .applications-section { padding-block: 34px 45px; }
  .application-contexts { grid-template-columns: 1fr; gap: 17px; }
  .applications-intro > p:not(.eyebrow) { font-size: 15px; }
  .applications-section .scene-heading h3 { font-size: 25px; }
  .applications-section .scene-heading { min-height: 128px; }
}
@media (max-width: 360px) {
  .product-overview { padding-inline: 14px; }
  .overview-source { align-items: start; }
  .overview-agent { gap: 12px; padding-inline: 13px; }
  .overview-agent img { width: 40px; height: 40px; }
  .overview-agent strong { font-size: 20px; }
  .overview-directions { display: none; }
  .overview-uses { grid-template-columns: 1fr; margin-top: 17px; }
  .overview-use { display: grid; grid-template-columns: 28px 1fr; gap: 0 12px; }
  .overview-use svg { grid-row: 1 / 4; margin: 2px 0 0; }
  .overview-use p, .overview-use .overview-channel { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .product-overview * { animation: none !important; transition: none !important; }
}

/* Demonstração: contexto e canal permanecem visíveis durante a reprodução. */
.applications-section .application-contexts { gap: 12px; margin-top: 28px; }
.application-contexts > [data-scenario-context] {
  padding: 16px;
  border-radius: 13px;
  background: #eceee8;
  transition: background-color .2s;
}
.application-contexts > [data-scenario-context].is-current { background: #dce9df; }
.application-contexts > [data-scenario-context].is-current > span:first-child { background: var(--petrol); color: var(--paper); }
.application-contexts [data-scenario-context] .context-status { display: inline-flex; align-items: center; gap: 7px; min-height: 28px; padding: 4px 10px; margin-top: 10px; border-radius: 999px; background: var(--petrol); color: var(--paper); font-size: 14px; font-weight: 700; line-height: 1.4; visibility: hidden; }
.application-contexts .context-status::before { content: ''; width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; background: #a8cdbb; }
.application-contexts [aria-current='step'] .context-status { visibility: visible; }
html:not(.integrated-ready) .application-contexts .context-status,
html[data-stories-static='true'] .application-contexts .context-status { display: none; }
.applications-section .simulation-label {
  background: #dce9df;
  border: 0;
  border-radius: 8px;
  color: #183a38;
  padding: 10px 13px;
  font-size: 12px;
  line-height: 1.6;
}
.applications-section .simulation-label strong { display: block; font-size: 12px; line-height: 1.6; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.applications-section .simulation-label span { display: block; color: #35594c; font-weight: 500; font-size: 12px; }
.applications-section .scene-heading { min-height: 140px; padding-bottom: 20px; }
.applications-section .scene-heading h3 { font-size: 27px; max-width: 520px; }
.applications-section .scene-connections span:first-child { color: #dce9df; font-weight: 600; }
.demo-channel {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #20392f;
  border-radius: 12px 12px 0 0;
  padding: 13px 16px;
  min-height: 75px;
}
.demo-channel svg { width: 25px; height: 25px; flex-shrink: 0; stroke: #c4ddcd; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.demo-channel strong { display: block; color: var(--paper); font-size: 14px; font-weight: 600; line-height: 1.5; }
.demo-channel span { display: block; color: #c4ddcd; font-size: 12px; line-height: 1.6; margin-top: 3px; }
.applications-section .integrated-stage .story-thread { background: #142720; padding: 16px 10px 14px; border-radius: 0 0 12px 12px; height: 330px; }
.applications-section .integrated-stage .integration-result { margin-top: 17px; }
.applications-section .integration-result-heading > span { color: #c4ddcd; }
.applications-section .integration-disclaimer { margin-top: 12px; }
@media (max-width: 1120px) {
  .applications-section .scene-heading h3 { font-size: 25px; }
  .applications-section .scene-heading { min-height: 148px; }
}
@media (max-width: 700px) {
  .applications-section .simulator-toolbar { gap: 9px; align-items: center; }
  .applications-section .simulation-label { padding: 9px 10px; }
  .applications-section .simulation-label strong { font-size: 11px; }
  .applications-section .simulation-label span { font-size: 11px; }
  .applications-section .scene-heading { min-height: 150px; }
  .applications-section .scene-heading h3 { font-size: 24px; }
  .applications-section .scene-connections { gap: 5px 8px; }
  .applications-section .scene-connections span { font-size: 11px; }
  .demo-channel { padding: 13px 12px; gap: 9px; min-height: 88px; }
  .demo-channel strong { font-size: 13px; }
  .demo-channel span { font-size: 12px; }
  .demo-channel svg { width: 22px; height: 22px; }
  .applications-section .integrated-stage .story-thread { padding-inline: 8px; height: 360px; }
}
@media (max-width: 360px) {
  .applications-section .simulation-label strong { font-size: 10px; }
  .applications-section .simulation-label span { font-size: 11px; }
  .applications-section .scene-heading h3 { font-size: 22px; }
  .applications-section .scene-heading { min-height: 174px; }
}
html:not(.integrated-ready) .applications-section .integrated-stage .story-thread,
html[data-stories-static='true'] .applications-section .integrated-stage .story-thread { height: auto; overflow: visible; }
@media (prefers-reduced-motion: reduce) {
  .application-contexts > [data-scenario-context] { transition: none; }
}

/* Sequência visual guiada: o movimento e o progresso enquadram a demonstração. */
.applications-section .simulation-label { padding: 0; background: transparent; color: var(--paper); }
.applications-section .simulation-label strong { color: var(--paper); font-size: 13px; letter-spacing: .07em; }
.applications-section .simulation-label .motion-note { color: #c4ddcd; margin-top: 3px; }
.motion-note { display: none !important; }
html.integrated-ready:not([data-stories-static='true']) .motion-note { display: block !important; }
.demo-progress { display: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 3px 4px 21px; }
html.integrated-ready:not([data-stories-static='true']) .demo-progress { display: grid; }
.demo-progress > div > span:first-child { display: block; font-size: 12px; line-height: 1.6; color: #93b4a2; margin-bottom: 7px; }
.demo-progress-track { display: block; height: 4px; background: #355046; border-radius: 4px; overflow: hidden; }
.demo-progress-track i { display: block; width: 0; height: 100%; background: #a8cdbb; border-radius: 4px; }
.demo-progress [data-progress-state='active'] > span:first-child { color: var(--paper); font-weight: 600; }
.demo-progress [data-progress-state='complete'] i { width: 100%; }
.demo-progress [data-progress-state='active'] i { animation: example-demo-progress var(--scene-duration) linear both; }
.integrated-stage[data-clock='paused'] .demo-progress-track i { animation-play-state: paused; }
.applications-section .scene-heading { min-height: 128px; }
.applications-section .demo-channel { min-height: 64px; background: transparent; border-radius: 0; padding: 0 4px 16px; }
.applications-section .demo-channel svg { width: 30px; height: 30px; }
.applications-section .integrated-stage .story-thread { background: transparent; padding: 9px 4px 16px; border-radius: 0; }
html.integrated-ready:not([data-stories-static='true']) .applications-section .story-thread { scrollbar-width: none; mask-image: none; }
html.integrated-ready:not([data-stories-static='true']) .applications-section .has-thread-history .story-thread { mask-image: linear-gradient(to bottom, transparent, #000 32px, #000); }
html.integrated-ready:not([data-stories-static='true']) .applications-section .demo-channel { position: relative; z-index: 1; box-shadow: none; }
html.integrated-ready:not([data-stories-static='true']) .applications-section .has-thread-history .demo-channel { box-shadow: 0 12px 24px -10px #020d0b80; }
html.integrated-ready:not([data-stories-static='true']) .applications-section .story-thread::-webkit-scrollbar { display: none; }
.applications-section .next-scenario { display: none; }
@keyframes example-demo-progress { from { width: 0; } to { width: 100%; } }
@media (prefers-reduced-motion: no-preference) {
  .applications-section .story-message.is-visible { animation: example-message-arrival .28s ease-out both; }
  .integrated-stage[data-clock='paused'] .story-message.is-visible { animation-play-state: paused; }
  @keyframes example-message-arrival { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
}
@media (max-width: 700px) {
  .demo-progress { gap: 10px; margin-bottom: 17px; }
  .demo-progress > div > span:first-child { font-size: 11px; min-height: 36px; }
  .applications-section .scene-heading { min-height: 143px; }
  .applications-section .scene-heading h3 { font-size: 24px; }
  .applications-section .demo-channel { min-height: 81px; padding-bottom: 16px; }
}
@media (max-width: 360px) {
  .applications-section .scene-heading { min-height: 160px; }
  .applications-section .scene-heading h3 { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .demo-progress-track i { animation: none !important; }
}

/* No celular, a continuidade fica junto da conversa, dentro da primeira tela. */
@media (max-width: 700px) {
  .applications-section .integrated-scene { display: flex; flex-direction: column; }
  .applications-section .scene-heading { order: 0; }
  .applications-section .demo-channel { order: 1; }
  .applications-section .typing-row { order: 2; height: 43px; flex-shrink: 0; }
  .applications-section .story-thread { order: 3; flex-shrink: 0; }
  .applications-section .integration-result { order: 4; }
  .applications-section .next-scenario { order: 5; }
  html:not(.integrated-ready) .applications-section .typing-row,
  html[data-stories-static='true'] .applications-section .typing-row { display: none; }
}

/* O mesmo card anuncia o próximo caso e passa a identificar a conversa atual. */
.example-card-slot { display: none; position: relative; height: 132px; margin: 0 4px 19px; }
html.integrated-ready:not([data-stories-static='true']) .example-card-slot { display: block; }
.applications-section .example-card-slot .scene-transition {
  position: absolute;
  inset: 0 0 auto;
  height: 100%;
  padding: 18px 20px;
  border: 1px solid #527565;
  border-radius: 12px;
  background: #1c332b;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 4;
  transform: translateY(0);
}
.applications-section .example-card-slot .scene-transition > span {
  color: #b9d6c5;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: .025em;
  margin-bottom: 7px;
}
.applications-section .example-card-slot .scene-transition > strong {
  font-size: 27px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.035em;
}
html.integrated-ready:not([data-stories-static='true']) .applications-section .scene-heading {
  min-height: 0;
  padding: 0 4px 18px;
}
html.integrated-ready:not([data-stories-static='true']) .scene-heading h3,
html.integrated-ready:not([data-stories-static='true']) .scene-heading .scene-category { display: none; }
html.integrated-ready:not([data-stories-static='true']) .scene-connections { margin-top: 0; }
@media (prefers-reduced-motion: no-preference) {
  .applications-section .example-card-slot .scene-transition.is-announcing {
    transform: translateY(var(--example-card-offset, 180px));
    animation: example-card-announce .2s ease-out both;
  }
  .applications-section .example-card-slot .scene-transition.is-docking {
    animation: example-card-dock .55s cubic-bezier(.22,.75,.25,1) both;
  }
  .integrated-stage[data-clock='paused'] .scene-transition { animation-play-state: paused; }
  @keyframes example-card-announce { from { opacity: 0; } to { opacity: 1; } }
  @keyframes example-card-dock {
    from { transform: translateY(var(--example-card-offset, 180px)); }
    to { transform: translateY(0); }
  }
}
@media (max-width: 700px) {
  .example-card-slot { height: 151px; margin-bottom: 17px; }
  .applications-section .example-card-slot .scene-transition { padding: 16px; }
  .applications-section .example-card-slot .scene-transition > strong { font-size: 24px; }
}
@media (max-width: 360px) {
  .example-card-slot { height: 158px; }
  .applications-section .example-card-slot .scene-transition { padding: 15px 13px; }
  .applications-section .example-card-slot .scene-transition > strong { font-size: 22px; }
}

/* A primeira entrada apresenta o caso antes de mostrar a conversa. */
.integrated-stage[data-phase='intro'] .integrated-scene { opacity: 0; }
.integrated-stage[data-phase='intro'] .demo-progress-track i {
  animation: none !important;
  width: 0;
}

/* Participantes e canal têm hierarquia própria, acima dos balões. */
.applications-section .integrated-stage .message-author {
  display: block;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0;
  margin-bottom: 8px;
  color: #174b43;
}
.applications-section .integrated-stage .message-agent .message-author { color: #07565b; }
.message-document { display: flex; align-items: center; gap: 10px; min-width: 0; margin-top: 12px; padding: 11px; border-radius: 8px; background: #e5ede5; color: #07565b; }
.message-document svg { width: 24px; height: 24px; flex-shrink: 0; stroke: currentColor; stroke-width: 1.5; }
.message-document > div { min-width: 0; overflow-wrap: anywhere; }
.message-document strong { display: block; font-size: 13px; font-weight: 700; line-height: 1.5; }
.message-document span { display: block; font-size: 12px; line-height: 1.6; }
.applications-section .demo-channel {
  background: #dce9df;
  border-radius: 12px;
  padding: 17px;
  margin: 0 4px 16px;
  min-height: 116px;
  gap: 14px;
  align-items: flex-start;
}
.applications-section .demo-channel svg {
  width: 44px;
  height: 44px;
  padding: 9px;
  border-radius: 12px;
  background: var(--petrol);
  stroke: var(--paper);
}
.applications-section .demo-channel > div { min-width: 0; }
.applications-section .demo-channel strong { font-size: 22px; line-height: 1.3; color: #123d38; }
.applications-section .demo-channel .channel-participants {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  margin-top: 4px;
  color: #174b43;
}
.applications-section .demo-channel .channel-purpose { font-size: 13px; line-height: 1.6; color: #36594f; margin-top: 5px; }
@media (max-width: 700px) {
  .applications-section .integrated-stage .message-author { font-size: 14px; }
  .applications-section .demo-channel { padding: 15px 13px; gap: 11px; min-height: 134px; }
  .applications-section .demo-channel strong { font-size: 20px; }
  .applications-section .demo-channel .channel-participants { font-size: 14px; }
  .applications-section .demo-channel svg { width: 39px; height: 39px; padding: 8px; }
}
@media (max-width: 360px) {
  .applications-section .demo-channel { padding-inline: 11px; gap: 9px; min-height: 164px; }
  .applications-section .demo-channel svg { width: 35px; height: 35px; padding: 7px; }
}

/* Seleção opcional: cada aplicação pode ser vista novamente desde o início. */
.application-contexts > a[data-scenario-context] {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  text-align: left;
  text-decoration: none;
  color: inherit;
}
.application-contexts .context-number {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  color: var(--petrol);
  background: #e4ece3;
  font-size: 12px;
  font-weight: 600;
}
.application-contexts .context-copy { min-width: 0; font-size: 14px; line-height: 1.7; color: var(--muted); }
.application-contexts .context-copy strong { padding-right: 20px; }
.application-contexts .context-description { display: block; }
.application-contexts .context-chevron { position: absolute; right: 16px; top: 21px; width: 18px; height: 18px; stroke: var(--petrol); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .65; transition: transform .2s, opacity .2s; }
.application-contexts a[data-scenario-context]:hover { background: #dae6db; }
.application-contexts a[data-scenario-context]:hover .context-chevron { transform: translateX(2px); opacity: 1; }
.application-contexts a[data-scenario-context]:focus-visible { outline: 2px solid var(--petrol); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  .application-contexts .context-chevron { transition: none; }
}
.integrated-scene[id] { scroll-margin-top: 125px; }

/* O scroll-padding global já reserva o cabeçalho; não duplicar essa distância no celular. */
@media (max-width: 700px) {
  .applications-section .integrated-stage { scroll-margin-top: 20px; }
}
.applications-section .integrated-stage[data-clock='paused'] .example-card-slot .scene-transition {
  animation-play-state: paused;
}