/*
 * CometAI public home - Round 1
 * Truthful launch copy, commercial FAQ, spacing, accessibility.
 */

.hero-launch-note {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 0.65rem;
  width: min(100%, 720px);
  margin-top: 2.4rem;
  padding: 1.15rem 1.35rem;
  border: 1px solid rgba(167, 139, 250, 0.2);
  border-radius: 22px;
  background:
    linear-gradient(
      135deg,
      rgba(139, 92, 246, 0.11),
      rgba(34, 211, 238, 0.055)
    ),
    rgba(11, 11, 24, 0.72);
  box-shadow:
    0 20px 55px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
  text-align: center;
  animation: fade-up 0.6s ease 0.4s both;
}

.hero-launch-note__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  padding: 0.3rem 0.72rem;
  border: 1px solid rgba(52, 211, 153, 0.25);
  border-radius: 999px;
  background: rgba(52, 211, 153, 0.075);
  color: #86efac;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hero-launch-note__badge::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 14px rgba(52, 211, 153, 0.8);
}

.hero-launch-note strong {
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  line-height: 1.35;
}

.hero-launch-note p {
  max-width: 610px;
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.55;
  animation: none;
}

.hero-launch-note__facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem;
  margin-top: 0.15rem;
}

.hero-launch-note__facts span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0.25rem 0.62rem;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.025);
  color: rgba(229, 231, 255, 0.82);
  font-size: 0.72rem;
  font-weight: 700;
}

.stats--capabilities {
  padding-bottom: 72px;
}

.stat-card--capability {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 0.85rem;
  align-items: center;
  padding: 1.35rem;
  text-align: left;
}

.capability-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(167, 139, 250, 0.18);
  border-radius: 13px;
  background:
    linear-gradient(
      135deg,
      rgba(139, 92, 246, 0.17),
      rgba(34, 211, 238, 0.08)
    );
  font-size: 1.1rem;
}

.capability-copy {
  min-width: 0;
}

.capability-title {
  display: block;
  margin-bottom: 0.18rem;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 750;
  line-height: 1.3;
}

.capability-text {
  display: block;
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.launch-program-section {
  position: relative;
  overflow: hidden;
  padding: 76px 0;
}

.launch-program-section::before {
  content: '';
  position: absolute;
  inset: 15% auto auto 50%;
  width: 620px;
  height: 340px;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(
      ellipse,
      rgba(34, 211, 238, 0.09),
      transparent 70%
    );
  filter: blur(30px);
  pointer-events: none;
}

.launch-program-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.launch-program-card {
  position: relative;
  overflow: hidden;
  min-height: 220px;
  padding: 1.5rem;
  border: 1px solid rgba(167, 139, 250, 0.18);
  border-radius: 20px;
  background:
    linear-gradient(
      145deg,
      rgba(139, 92, 246, 0.08),
      rgba(34, 211, 238, 0.025)
    ),
    var(--surface);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
  transition:
    transform 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease;
}

.launch-program-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background:
    linear-gradient(
      180deg,
      var(--purple-light),
      var(--cyan)
    );
  opacity: 0.75;
}

.launch-program-card:hover {
  transform: translateY(-5px);
  border-color: rgba(34, 211, 238, 0.3);
  box-shadow: 0 28px 65px rgba(0, 0, 0, 0.25);
}

.launch-program-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
  font-size: 1.2rem;
}

.launch-program-card h3 {
  margin-bottom: 0.55rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.3;
}

.launch-program-card p {
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.65;
}

.launch-program-action {
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
}

.faq-question {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  text-align: left;
}

.faq-question:focus-visible {
  outline: 2px solid rgba(34, 211, 238, 0.72);
  outline-offset: -4px;
}

.faq-answer[aria-hidden='true'] {
  visibility: hidden;
}

.faq-item.open .faq-answer[aria-hidden='false'] {
  visibility: visible;
}

#planos {
  padding-bottom: 70px;
}

#planos .commercial-plan-catalog .channel-plan-block:last-child {
  margin-bottom: 0 !important;
}

#faq {
  padding-top: 82px;
  padding-bottom: 82px;
}

.cta-section {
  padding: 88px 0 72px;
}

footer {
  padding-top: 54px;
}

section {
  scroll-margin-top: 76px;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid rgba(34, 211, 238, 0.76);
  outline-offset: 3px;
}

.whatsapp-float {
  animation-iteration-count: 1;
}

@media (max-width: 1024px) {
  .launch-program-grid {
    grid-template-columns: 1fr;
  }

  .launch-program-card {
    min-height: auto;
  }
}

@media (max-width: 768px) {
  .hero-launch-note {
    width: min(100%, 620px);
    padding: 1rem;
  }

  .stats--capabilities {
    gap: 0.8rem;
  }

  .stat-card--capability {
    grid-template-columns: 38px minmax(0, 1fr);
    padding: 1rem;
  }

  .capability-icon {
    width: 38px;
    height: 38px;
  }

  .launch-program-section,
  #faq {
    padding-top: 68px;
    padding-bottom: 68px;
  }

  .cta-section {
    padding: 72px 0 64px;
  }
}

@media (max-width: 480px) {
  .stats--capabilities {
    grid-template-columns: 1fr;
  }

  .hero-launch-note__facts {
    align-items: stretch;
  }

  .hero-launch-note__facts span {
    justify-content: center;
    flex: 1 1 130px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}


/* ROUND 1 DESKTOP REFINEMENT */

.stats--capabilities {
  width: min(100%, 1280px);
  max-width: 1280px;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
}

.stat-card--capability {
  min-height: 154px;
  padding: 1.25rem;
}

.launch-program-section
.section-header {
  max-width: 1080px;
  margin-right: auto;
  margin-left: auto;
}

.launch-program-section
.section-header h2 {
  max-width: 1040px;
  margin-right: auto;
  margin-left: auto;
  font-size:
    clamp(2rem, 3.15vw, 3.4rem);
  text-wrap: balance;
}

@media (max-width: 1180px) {
  .stats--capabilities {
    width: min(100%, 920px);
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .stats--capabilities {
    grid-template-columns: 1fr;
  }

  .stat-card--capability {
    min-height: 0;
  }
}
/* ROUND 2 - VISUAL RHYTHM */

/*
 * Aproxima o título principal dos planos
 * do primeiro bloco comercial.
 */
#planos .section-header,
#pricing .section-header {
  margin-bottom:
    clamp(1.75rem, 3vw, 2.75rem);
}

#planos .section-header h2,
#pricing .section-header h2 {
  max-width: 980px;
  margin-right: auto;
  margin-left: auto;
  text-wrap: balance;
}

/*
 * Cria um ritmo consistente entre
 * API Oficial e API Alternativa.
 */
#planos .commercial-plan-catalog,
#pricing .commercial-plan-catalog {
  display: grid;
  gap:
    clamp(4rem, 6vw, 6rem);
  margin-top: 0;
}

#planos .channel-plan-block,
#pricing .channel-plan-block {
  margin: 0;
}

/*
 * Mantém as headlines impactantes,
 * mas remove áreas vazias excessivas.
 */
#planos .channel-plan-story,
#pricing .channel-plan-story {
  min-height: 0;
  margin: 0 0 1.4rem;
  padding:
    clamp(2.8rem, 5vw, 4.5rem)
    clamp(1.4rem, 5vw, 4rem);
}

#planos .channel-plan-story h2,
#pricing .channel-plan-story h2 {
  max-width: 960px;
  font-size:
    clamp(2.3rem, 4.5vw, 4.6rem);
  line-height: 1;
}

#planos .channel-plan-story p,
#pricing .channel-plan-story p {
  max-width: 720px;
  margin-top: 1.15rem;
}

#planos .channel-plan-story-kicker,
#pricing .channel-plan-story-kicker {
  margin-bottom: 1rem;
}

#planos .channel-plan-story-signal,
#pricing .channel-plan-story-signal {
  margin-top: 1.25rem;
}

#planos .channel-plan-heading,
#pricing .channel-plan-heading {
  margin-bottom: 1.15rem;
}

#planos .channel-plan-grid,
#pricing .channel-plan-grid {
  margin-top: 0;
}

/*
 * Os cards de capacidades passam a usar
 * toda a largura disponível para o texto.
 */
.stats--capabilities
.stat-card--capability {
  grid-template-columns: 1fr;
  align-content: start;
  align-items: start;
  gap: 0.72rem;
  min-height: 164px;
}

.stats--capabilities
.capability-icon {
  margin-bottom: 0.1rem;
}

.stats--capabilities
.capability-title {
  max-width: 100%;
  font-size: 1rem;
  text-wrap: balance;
}

.stats--capabilities
.capability-text {
  max-width: 29ch;
}

/*
 * Evita seis cards muito estreitos.
 * A grade passa a privilegiar leitura
 * e percepção premium.
 */
#nichos .niches-grid {
  width: min(100%, 1180px);
  margin-right: auto;
  margin-left: auto;
  grid-template-columns:
    repeat(4, minmax(0, 1fr)) !important;
  gap: 1rem;
}

#nichos .niche-card {
  min-width: 0;
  min-height: 270px;
  padding: 1.4rem;
}

#nichos .niche-card h3 {
  font-size: 1.04rem;
  line-height: 1.35;
  text-wrap: balance;
}

#nichos .niche-card p {
  font-size: 0.82rem;
  line-height: 1.55;
}

/*
 * Responsividade progressiva.
 */
@media (max-width: 1180px) {
  #nichos .niches-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 860px) {
  #planos .channel-plan-story,
  #pricing .channel-plan-story {
    padding:
      2.8rem
      1.25rem;
  }

  #nichos .niches-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }

  #nichos .niche-card {
    min-height: 0;
  }
}

@media (max-width: 560px) {
  #planos .commercial-plan-catalog,
  #pricing .commercial-plan-catalog {
    gap: 3.5rem;
  }

  #planos .channel-plan-story,
  #pricing .channel-plan-story {
    padding:
      2.4rem
      1rem;
  }

  #planos .channel-plan-story h2,
  #pricing .channel-plan-story h2 {
    font-size:
      clamp(2rem, 12vw, 3rem);
  }

  #nichos .niches-grid {
    grid-template-columns:
      1fr !important;
  }
}
/* ROUND 3 - COMPACT SECTION FLOW */

/*
 * Remove a soma excessiva de paddings entre
 * os cards de capacidades e as especialidades.
 */
.stats--capabilities {
  padding-bottom:
    clamp(2.25rem, 4vw, 3.5rem);
}


/*
 * As seções continuam tendo respiro,
 * mas deixam de ocupar quase uma tela inteira
 * apenas com espaço vazio.
 */
#nichos,
#como-funciona,
#recursos,
#planos,
.launch-program-section,
#faq,
.cta-section {
  min-height: 0;
}

#nichos {
  padding:
    clamp(3.75rem, 6vw, 5.25rem)
    0;
}

#como-funciona {
  padding:
    clamp(3.75rem, 6vw, 5.25rem)
    0;
}

#recursos {
  padding:
    clamp(3.5rem, 5.5vw, 4.75rem)
    0;
}

#planos {
  padding:
    clamp(3.75rem, 6vw, 5.25rem)
    0
    clamp(3rem, 5vw, 4rem);
}

.launch-program-section {
  padding:
    clamp(3.75rem, 6vw, 5rem)
    0;
}

#faq {
  padding:
    clamp(3.75rem, 6vw, 5rem)
    0
    clamp(2.75rem, 4.5vw, 3.75rem);
}

.cta-section {
  padding:
    clamp(3.5rem, 5.5vw, 4.75rem)
    0
    clamp(3rem, 4.5vw, 4rem);
}

footer {
  padding-top:
    clamp(2.5rem, 4vw, 3.25rem);
}


/*
 * Aproxima os títulos do conteúdo que eles
 * apresentam, sem deixar tudo apertado.
 */
#nichos .section-header,
#como-funciona .section-header,
#planos .section-header,
.launch-program-section .section-header,
#faq .section-header {
  margin-bottom:
    clamp(1.75rem, 2.8vw, 2.5rem);
}


/*
 * Catálogo comercial:
 * reduz o intervalo entre a família oficial
 * e a família alternativa.
 */
#planos .commercial-plan-catalog,
#pricing .commercial-plan-catalog {
  gap:
    clamp(2.25rem, 3.8vw, 3.5rem);
}


/*
 * Reduz a área vazia dentro das grandes
 * headlines dos planos.
 */
#planos .channel-plan-story,
#pricing .channel-plan-story {
  min-height: 0;
  margin-bottom: 1rem;

  padding:
    clamp(1.75rem, 3vw, 2.75rem)
    clamp(1.25rem, 4vw, 3rem);
}

#planos .channel-plan-story h2,
#pricing .channel-plan-story h2 {
  font-size:
    clamp(2.2rem, 4.2vw, 4.2rem);

  line-height: 0.98;
}

#planos .channel-plan-story p,
#pricing .channel-plan-story p {
  margin-top: 0.9rem;
  line-height: 1.55;
}

#planos .channel-plan-story-kicker,
#pricing .channel-plan-story-kicker {
  margin-bottom: 0.8rem;
}

#planos .channel-plan-story-signal,
#pricing .channel-plan-story-signal {
  margin-top: 1rem;
}


/*
 * Aproxima a apresentação da família
 * dos cards e da tabela comparativa.
 */
#planos .channel-plan-heading,
#pricing .channel-plan-heading {
  margin-bottom: 1rem;
}

#planos .channel-plan-grid,
#pricing .channel-plan-grid {
  margin-bottom: 0;
}

#planos .channel-comparison-slot,
#pricing .channel-comparison-slot {
  min-height: 0;
  margin:
    clamp(1rem, 2vw, 1.4rem)
    0
    0;
}

/*
 * Segurança para não reservar espaço caso
 * a comparação ainda não tenha sido carregada.
 */
#planos .channel-comparison-slot:empty,
#pricing .channel-comparison-slot:empty {
  display: none !important;
}

#planos .channel-comparison-card,
#pricing .channel-comparison-card {
  min-height: 0;
  margin: 0;
}

#planos .channel-risk-callout,
#pricing .channel-risk-callout {
  margin-top: 1.25rem;
  margin-bottom: 0;
}


/*
 * Evita margens extras entre as famílias.
 */
#planos .channel-plan-block,
#pricing .channel-plan-block {
  min-height: 0;
}

#planos .channel-plan-block
+ .channel-plan-block,
#pricing .channel-plan-block
+ .channel-plan-block {
  margin-top: 0;
}


/*
 * Compactação moderada do programa
 * de lançamento.
 */
.launch-program-grid {
  margin-top: 0;
}

.launch-program-action {
  margin-top: 1.25rem;
}


/*
 * Tablet e mobile:
 * mantém o respiro sem repetir os grandes
 * espaços da versão desktop.
 */
@media (max-width: 860px) {
  .stats--capabilities {
    padding-bottom: 2.5rem;
  }

  #nichos,
  #como-funciona,
  #recursos,
  #planos,
  .launch-program-section,
  #faq,
  .cta-section {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  #planos .channel-plan-story,
  #pricing .channel-plan-story {
    padding:
      1.75rem
      1.1rem;
  }

  #planos .commercial-plan-catalog,
  #pricing .commercial-plan-catalog {
    gap: 2.5rem;
  }
}

@media (max-width: 560px) {
  .stats--capabilities {
    padding-bottom: 2rem;
  }

  #nichos,
  #como-funciona,
  #recursos,
  #planos,
  .launch-program-section,
  #faq,
  .cta-section {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  #planos .channel-plan-story,
  #pricing .channel-plan-story {
    padding:
      1.5rem
      0.85rem;
  }

  #planos .commercial-plan-catalog,
  #pricing .commercial-plan-catalog {
    gap: 2.25rem;
  }

  footer {
    padding-top: 2.5rem;
  }
}
/* ROUND 3A - NICHE CTA AND RESPONSIVE SAFETY */

.niche-request-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem 0.55rem;
  max-width: 940px;
  margin:
    clamp(1.5rem, 3vw, 2rem)
    auto
    0;
  padding:
    0
    clamp(0.75rem, 2vw, 1.25rem);
  color: var(--text-muted);
  font-size:
    clamp(0.86rem, 1.3vw, 0.95rem);
  line-height: 1.6;
  text-align: center;
}

.niche-request-cta a {
  max-width: 100%;
  color: var(--purple-light);
  font-weight: 700;
  line-height: 1.5;
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-decoration-color:
    rgba(167, 139, 250, 0.35);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition:
    color 180ms ease,
    text-decoration-color 180ms ease;
}

.niche-request-cta a:hover {
  color: var(--cyan);
  text-decoration-color:
    rgba(34, 211, 238, 0.7);
}

.hero-btns > a {
  max-width: 100%;
  justify-content: center;
  text-align: center;
  white-space: normal;
}

@media (max-width: 860px) {
  .cta-section .hero-btns {
    width: 100%;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
  }

  .cta-section .hero-btns > a {
    flex:
      1
      1
      260px;
  }

  #planos .channel-plan-heading,
  #pricing .channel-plan-heading {
    align-items: flex-start;
  }

  #planos .channel-plan-details,
  #pricing .channel-plan-details {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  /*
   * Os canais continuam no footer.
   * No header mobile eles são removidos para
   * não competir com logo, idioma e CTA.
   */
  nav
  .public-channel-status:not(
    .public-channel-status--footer
  ) {
    display: none;
  }

  .niche-request-cta {
    max-width: 680px;
  }
}

@media (max-width: 560px) {
  .niche-request-cta {
    flex-direction: column;
    gap: 0.45rem;
    margin-top: 1.5rem;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
    font-size: 0.86rem;
  }

  .niche-request-cta span,
  .niche-request-cta a {
    display: block;
    width: 100%;
  }

  .hero-btns > a {
    width:
      min(
        100%,
        360px
      );
  }

  .footer-bottom {
    justify-content: center;
    text-align: center;
  }

  .footer-badges {
    flex-wrap: wrap;
    justify-content: center;
  }
}

@media (max-width: 390px) {
  nav {
    gap: 0.35rem;
    padding-right: 3%;
    padding-left: 3%;
  }

  .nav-cta {
    padding:
      0.4rem
      0.65rem;
    font-size: 0.72rem;
  }

  .niche-request-cta {
    line-height: 1.5;
  }
}

/* ROUND 3B - MOBILE COMPARISON CONTAINMENT */

/*
 * A tabela mantém sua largura de leitura, mas sua largura
 * intrínseca não pode aumentar a largura do documento.
 */
#planos .commercial-plan-catalog,
#pricing .commercial-plan-catalog,
#planos .channel-plan-block,
#pricing .channel-plan-block,
#planos .channel-comparison-slot,
#pricing .channel-comparison-slot,
#planos .channel-comparison-card,
#pricing .channel-comparison-card {
  min-width: 0 !important;
  width: 100%;
  max-width: 100%;
}

/*
 * O conteúdo largo fica contido no card.
 * O scroll passa a existir somente dentro da comparação.
 */
#planos .channel-comparison-slot,
#pricing .channel-comparison-slot,
#planos .channel-comparison-card,
#pricing .channel-comparison-card {
  overflow: hidden;
}

#planos .channel-comparison-scroll,
#pricing .channel-comparison-scroll {
  display: block;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: auto !important;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

/*
 * Mantém a tabela legível sem permitir que ela determine
 * a largura da página.
 */
#planos .channel-comparison-table,
#pricing .channel-comparison-table {
  max-width: none;
}

/*
 * Ajustes específicos para celulares estreitos.
 */
@media (max-width: 560px) {
  #planos .channel-comparison-heading,
  #pricing .channel-comparison-heading {
    gap: 0.75rem;
    padding:
      1.1rem
      1rem
      0.9rem;
  }

  #planos .channel-comparison-scroll,
  #pricing .channel-comparison-scroll {
    padding:
      0
      0.75rem
      1rem;
  }

  /*
   * Evita que o botão cubra trechos importantes do texto
   * nos viewports de 320 e 390 pixels.
   */
  .whatsapp-float {
    right: 12px;
    bottom:
      max(
        12px,
        env(safe-area-inset-bottom, 0px)
      );
    width: 48px;
    height: 48px;
    font-size: 1.3rem;
  }
}

/* ROUND 4A - SHARED HOME INTERACTIONS */

nav.site-nav--scrolled {
  background:
    rgba(7, 7, 15, 0.88);
  box-shadow:
    0 14px 38px
    rgba(0, 0, 0, 0.34);
}

.nav-links a {
  position: relative;
}

.nav-links a::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: -0.55rem;
  left: 0;
  height: 2px;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      var(--purple-light),
      var(--cyan)
    );
  opacity: 0;
  transform: scaleX(0.35);
  transform-origin: center;
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.nav-links a.nav-link--active,
.nav-links a[aria-current='location'] {
  color: var(--text);
}

.nav-links a.nav-link--active::after,
.nav-links a[aria-current='location']::after {
  opacity: 1;
  transform: scaleX(1);
}

.faq-answer[role='region'] {
  scroll-margin-top: 90px;
}

section[tabindex='-1']:focus {
  outline: none;
}

@media (max-width: 768px) {
  .nav-links a::after {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-links a::after {
    transition: none;
  }
}
/* ROUND 5A - PLAN CONVERSION CLARITY */

/*
 * channel-plan-block e channel-comparison-card
 * são sections aninhadas. Elas não podem herdar
 * o padding global reservado às seções principais.
 */
#planos .channel-plan-block,
#pricing .channel-plan-block,
#planos .channel-comparison-card,
#pricing .channel-comparison-card {
  padding: 0 !important;
}

#planos .channel-plan-block,
#pricing .channel-plan-block {
  overflow: visible;
}

.channel-plan-fit {
  min-height: 3.3rem;
  margin:
    0.9rem
    0
    1rem;
  padding:
    0.72rem
    0.8rem;
  border:
    1px solid
    rgba(167, 139, 250, 0.16);
  border-radius: 12px;
  background:
    rgba(139, 92, 246, 0.055);
  color:
    rgba(224, 221, 242, 0.78);
  font-size: 0.76rem;
  line-height: 1.5;
}

.channel-premium-card--alternative
.channel-plan-fit {
  border-color:
    rgba(246, 200, 95, 0.17);
  background:
    rgba(246, 200, 95, 0.055);
}

.channel-plan-fit strong {
  color: var(--text);
}

.channel-family-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin:
    1rem
    0
    0;
  padding:
    0.85rem
    1rem;
  border:
    1px solid
    rgba(34, 211, 238, 0.16);
  border-radius: 14px;
  background:
    rgba(34, 211, 238, 0.045);
  color:
    rgba(214, 211, 234, 0.7);
  font-size: 0.74rem;
  line-height: 1.5;
}

.channel-family-notice > span {
  flex: 0 0 auto;
  color: var(--cyan);
}

@media (max-width: 620px) {
  .channel-plan-fit {
    min-height: 0;
  }

  .channel-family-notice {
    padding:
      0.8rem
      0.85rem;
  }
}