/* ============================================
   FEATURES — 7 linhas zigzag (1 iPhone por feature)
   ============================================ */

.features-rows {
  display: flex;
  flex-direction: column;
  gap: 140px;
  margin-top: 120px;
}

.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: center;
}

.feature-row.reverse {
  direction: rtl;
}
.feature-row.reverse > * {
  direction: ltr;
}

.feature-row-text {
  max-width: 480px;
}

.feature-row-text .feature-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}

.feature-row-text .feature-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 64px;
  line-height: 0.9;
  color: var(--gold);
  letter-spacing: -0.02em;
  flex-shrink: 0;
}

.feature-row-text .feature-bar {
  flex: 1;
  height: 1px;
  background: var(--line);
  position: relative;
  overflow: hidden;
}
.feature-row-text .feature-bar span {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--green), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1s var(--ease-out);
}
.feature-row.visible .feature-bar span,
.feature-row .feature-bar span {
  transform: scaleX(0.5);
}

.feature-row-text .overline {
  margin-bottom: 20px;
  display: block;
}

.feature-row-text h3 {
  margin-bottom: 24px;
  font-size: clamp(36px, 4vw, 56px);
  letter-spacing: -0.025em;
  line-height: 1.05;
  text-wrap: balance;
}

.feature-row-text p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 48ch;
}

.feature-row-phone {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

@media (max-width: 980px) {
  .features-rows {
    gap: 100px;
    margin-top: 80px;
  }
  .feature-row {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .feature-row.reverse {
    direction: ltr;
  }
  .feature-row-text {
    max-width: 100%;
  }
  .feature-row-text h3 {
    font-size: clamp(30px, 7vw, 44px);
  }
  .feature-row-text .feature-num {
    font-size: 48px;
  }
  .feature-row-phone {
    order: -1;
  }
}

.features-grid, .features-list, .features-phone, .features-phone-sticky, .phone-slot, .feature-block {
  display: none !important;
}
.features-rows .feature-row { display: grid !important; }
@media (max-width: 980px) {
  .features-rows .feature-row { grid-template-columns: 1fr !important; }
}

/* ============================================
   MOBILE — responsive polish
   ============================================ */

@media (max-width: 768px) {
  .container { padding: 0 20px; }
  section { padding: 60px 0; }

  .nav { padding: 14px 0; }
  .nav-links { display: none; }
  .nav-inner .btn { padding: 9px 14px; font-size: 12px; }

  .hero {
    padding-top: 100px;
    padding-bottom: 20px;
    min-height: auto;
  }
  .hero-grid { gap: 60px; }
  .hero h1 { font-size: clamp(40px, 11vw, 56px); line-height: 1.02; }
  .hero h1 br { display: none; }
  .hero-pill { font-size: 11px; padding: 6px 12px; gap: 6px; margin-bottom: 20px; }
  .hero .lead { font-size: 16px; margin-bottom: 28px; }
  .hero-cta { gap: 10px; }
  .hero-cta .btn { padding: 14px 22px; font-size: 14px; flex: 1; justify-content: center; }
  .hero-cta .btn-lg { padding: 16px 22px; }
  .hero-foot span { font-size: 12px; }
  /* iPhone do hero: container com altura compensando o scale (660*0.82=541)
     pra próxima seção NÃO subir e sobrepor */
  .hero-phone {
    min-height: 0;
    height: 580px;
    padding: 30px 0 0;
    overflow: visible;
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }
  .hero-phone .phone-wrap {
    transform: scale(0.82);
    transform-origin: center top;
    margin: 0;
  }
  /* Floating cards saem da tela em mobile — esconde, foco vai no chat */
  .hero-phone .floating-card { display: none; }

  .hero-marquee { margin-top: 40px; padding: 14px 0; }
  .marquee-content { font-size: 11px; gap: 24px; padding-right: 24px; }

  .intro-grid { gap: 40px; }
  .intro-text h2 { font-size: clamp(38px, 9vw, 56px); }
  .intro-text .lead { font-size: 16px; }
  .check-list li { font-size: 14px; }
  .intro-portrait { transform: scale(0.85); margin: 0 auto; }

  .stats-grid { grid-template-columns: 1fr 1fr !important; }
  .stat-card { padding: 28px 20px; }
  .stat-num { font-size: 44px !important; }

  .features-rows { gap: 80px; margin-top: 60px; }
  .feature-row { gap: 28px; }
  .feature-row-text { padding: 0 4px; }
  .feature-row-text h3 { font-size: clamp(28px, 7vw, 36px); }
  .feature-row-text .feature-num { font-size: 40px; }
  .feature-row-text p { font-size: 15px; }
  /* iPhone das feature rows: container com altura compensada pelo scale
     (660 * 0.78 = 515) — sem margin negativo que causa overlap. */
  .feature-row-phone {
    overflow: visible;
    height: 560px;
    min-height: 0;
    padding: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }
  .feature-row-phone .phone-wrap {
    transform: scale(0.78);
    transform-origin: center top;
    margin: 0;
  }

  .steps-list { gap: 12px; }
  .step-card { padding: 24px 20px; gap: 16px; grid-template-columns: auto 1fr; }
  .step-num { font-size: 40px; }
  .step-body h3 { font-size: 19px; }
  .step-body p { font-size: 14px; }
  .step-line { display: none; }

  .security-grid { grid-template-columns: 1fr; gap: 16px; }
  .sec-card { padding: 24px; }
  .sec-card h3 { font-size: 17px; }

  .proof-head h2 { font-size: clamp(40px, 10vw, 56px); }
  .proof-meta { flex-direction: column; gap: 12px; align-items: center; text-align: center; }
  .tcols-wrap { margin-top: 40px; max-height: 620px; }

  .pricing-grid { gap: 20px; }
  .plan-card { padding: 32px 24px 28px; }
  .plan-name { font-size: 28px; }
  .plan-amount { font-size: 64px; }
  .plan-features li { font-size: 13px; }
  .pricing-foot {
    flex-direction: column;
    gap: 6px;
    margin-top: 28px;
    text-align: center;
  }
  .pricing-foot .dot { display: none; }

  .final-cta { padding: 100px 0 120px; }
  .final-headline { font-size: clamp(44px, 11vw, 64px) !important; line-height: 1.04 !important; }
  .final-sub { font-size: 16px !important; }
  .final-mainbtn { padding: 18px 28px !important; font-size: 15px !important; }
  .final-microcopy { flex-direction: column; gap: 4px; font-size: 11px !important; }
  .final-microcopy .dot { display: none; }
  .final-divider { display: none; }
  .final-trust { grid-template-columns: 1fr !important; gap: 20px !important; padding: 24px !important; }
  .ft-num { font-size: 32px !important; }

  .faq-q { font-size: 16px; padding: 22px 4px; gap: 16px; }
  .faq-chev { width: 28px; height: 28px; }

  .footer { padding: 60px 0 30px; }
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 32px; margin-bottom: 40px; }
  .footer-bottom { flex-direction: column; gap: 10px; align-items: flex-start; font-size: 11px; }

  .tweaks-toggle { bottom: 12px; right: 12px; }
}

@media (max-width: 480px) {
  h1 { font-size: clamp(36px, 11vw, 48px); }
  h2 { font-size: clamp(34px, 9vw, 48px); }
  h3 { font-size: clamp(24px, 7vw, 34px); }
  .lead { font-size: 15px; }

  .stats-grid { grid-template-columns: 1fr !important; }
  .footer-grid { grid-template-columns: 1fr !important; }

  .phone-wrap { transform: scale(0.7); margin: 0 auto -150px; }
  .feature-row-phone .phone-wrap { transform: scale(0.7); margin: 0 auto -150px; }
}

@media (max-width: 980px) {
  body { overflow-x: hidden; }
  .feature-row.reverse > * { direction: ltr; }
}

/* ============================================
   MOBILE OVERRIDES — corrige:
   1. Rich orbit (logos com radius fixo em px estouram o viewport)
   2. Intro grid empilhado com espaço adequado
   3. Nav compacto sem espremer logo
   4. Trial-note padding
   5. Hero phone não sobre nav
   ============================================ */

@media (max-width: 768px) {
  /* impede qualquer elemento absoluto de criar overflow horizontal */
  html { overflow-x: hidden; }
  main, section { overflow-x: clip; }

  /* INTRO: empilha vertical com Rich centralizado E logos orbitando
     proporcionalmente (radius/size ajustados via useIsMobile no React). */
  .intro {
    overflow: hidden;
    padding: 60px 0 80px;
  }
  .intro-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .intro-portrait {
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
  }
  .rich-orbit-stage {
    width: 320px;
    height: 320px;
    max-width: 100%;
    aspect-ratio: 1;
    margin: 0 auto;
  }
  .intro-text {
    text-align: left;
    max-width: 520px;
    margin: 0 auto;
  }
  .intro-text .check-list { gap: 14px; }

  /* NAV mais compacto: logo menor + botão menor */
  .nav { padding: 12px 0; }
  .nav-inner { gap: 12px; }
  .nav-inner .fz-wordmark img { height: 28px !important; }
  .nav-inner .fz-wordmark span { font-size: 16px !important; }
  .nav-inner .btn-sm { padding: 8px 12px; font-size: 12px; }

  /* HERO mais respiro do nav fixo + h1 respeita <br /> (text-wrap: balance
     descarta <br /> em alguns Chromium — força quebra) */
  .hero { padding-top: 90px; }
  .hero h1, h1 {
    text-wrap: wrap;
    white-space: normal;
  }
  .hero h1 br { display: block; content: ''; }

  /* Quando scrollar via âncora pra uma seção, dar offset pro nav fixo
     não comer o eyebrow/título */
  section[id] {
    scroll-margin-top: 72px;
  }

  /* Stats: faixa do header centralizada com mais respiro */
  .stats { padding: 60px 0; }

  /* Trial note: padding adaptado */
  .trial-note {
    margin: 36px auto 0;
    padding: 18px 20px;
  }
  .trial-note p { font-size: 13.5px; }

  /* Pricing-foot: empilhado vertical */
  .pricing-foot {
    flex-direction: column;
    gap: 6px;
    text-align: center;
  }
  .pricing-foot .dot { display: none; }

  /* Wall of love: 1 coluna só (já tinha mas reforço) */
  .tcols-wrap {
    grid-template-columns: 1fr !important;
    gap: 16px;
    max-height: 600px;
  }
  .tcol-md, .tcol-lg { display: none; }
  .tcol-card {
    max-width: 100%;
    padding: 22px 20px 20px;
  }

  /* Final CTA: empilhado */
  .final-microcopy {
    flex-direction: column;
    gap: 4px;
  }
  .final-microcopy .dot { display: none; }
  .final-trust { grid-template-columns: 1fr !important; }

  /* Footer: 1 coluna em mobile pequeno */
  .footer { padding: 50px 0 28px; }
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px;
    margin-bottom: 32px;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    font-size: 11px;
  }
}

@media (max-width: 480px) {
  /* Hero mais compacto */
  .hero h1 { font-size: clamp(36px, 11vw, 50px); }
  .hero .lead { font-size: 15px; }

  /* Footer 1 coluna */
  .footer-grid { grid-template-columns: 1fr !important; gap: 24px; }

  /* Phones em telas pequenas: scale + altura compensada (660 * 0.7 = 462) */
  .hero-phone {
    height: 530px;
  }
  .hero-phone .phone-wrap {
    transform: scale(0.74);
  }
  .feature-row-phone {
    height: 510px;
  }
  .feature-row-phone .phone-wrap {
    transform: scale(0.7);
  }
  /* Reduz tamanho da stage da órbita em telas bem pequenas */
  .rich-orbit-stage {
    width: 280px;
    height: 280px;
  }
}