/* =========================================================
   RENEWAL OPS DESK — MOBILE.CSS — PRODUCTION
   Mobile-first override system.
   Substitui completamente o mobile.css anterior.
   Estratégia: min-width para cima (mobile-first base)
   com overrides @media (max-width) apenas onde necessário
   para não interferir com valores desktop.
   ========================================================= */

/* ─── FOUNDATION RESET (sem media query — aplica em tudo) ─── */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
video,
svg {
  max-width: 100%;
  height: auto;
}

/* =========================================================
   BREAKPOINT PRINCIPAL — até 768px
   ========================================================= */
@media (max-width: 768px) {

  /* ─── GLOBAL LAYOUT ─── */

  .section,
  .section.light,
  .section.dark {
    padding-top: 52px;
    padding-bottom: 52px;
    overflow-x: clip; /* clip permite scroll interno sem vazar pro body */
  }

  .container {
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
    max-width: 100%;
  }

  /* ─── TIPOGRAFIA GLOBAL ─── */

  h1, h2, h3, h4, h5, h6 {
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
  }

  h2,
  .section-title {
    font-size: clamp(26px, 8vw, 38px);
    line-height: 1.05;
    letter-spacing: -.04em;
    white-space: normal;
  }

  h3 {
    font-size: clamp(17px, 5vw, 22px);
    line-height: 1.15;
  }

  p, li, .section-lead {
    font-size: 15px;
    line-height: 1.55;
  }

  .eyebrow,
  .badge {
    font-size: 9px;
    padding: 6px 10px;
    letter-spacing: .08em;
  }

  .testimonial-footnote {
    white-space: normal;
    text-align: center;
    font-size: 12px;
  }

  /* Toque mínimo 44px (Apple HIG) */
  .btn,
  a.btn,
  button {
    min-height: 48px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  /* ─── NAV ─── */

  .nav {
    height: calc(64px + env(safe-area-inset-top, 0px));
    min-height: 64px;
    padding: env(safe-area-inset-top, 0px) 20px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #101010;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 1px 0 rgba(255,255,255,.08);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
  }

  /* ── Hamburguer — mostrar ── */
  .mobile-menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 8px;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-menu-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform .25s ease, opacity .2s ease;
    max-width: none;
  }

  /* Animação X quando aberto */
  .nav.nav-open .mobile-menu-toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .nav.nav-open .mobile-menu-toggle span:nth-child(2) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* ── Esconder CTA desktop ── */
  .nav-desktop-cta {
    display: none;
  }

  /* ── nav-links: drawer mobile ──
     FIX CRÍTICO: O JS adiciona .nav-open ao .nav (não .open ao .nav-links).
     A regra correta é: .nav.nav-open .nav-links { display: flex }
  */
  .nav-links {
    position: fixed;
    top: calc(64px + env(safe-area-inset-top, 0px));
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(100dvh - 64px - env(safe-area-inset-top, 0px));
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 32px 24px;
    background: #101010;
    gap: 0;
    overflow-y: auto;
    display: none; /* escondido por padrão */
    z-index: 999;
  }

  /* Abre com a classe que o JS realmente adiciona (.nav-open no .nav) */
  .nav.nav-open .nav-links {
    display: flex;
  }

  .nav-links a {
    font-size: 18px;
    font-weight: 600;
    padding: 16px 0;
    width: 100%;
    border-bottom: 1px solid rgba(255,255,255,.06);
    color: rgba(255,255,255,.88);
    letter-spacing: -.02em;
  }

  /* CTA dentro do drawer */
  .mobile-nav-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 28px;
    width: 100%;
    min-height: 52px;
    padding: 14px 20px;
    border-radius: 999px;
    background: #fff;
    color: #101010;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: -.01em;
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  /* Body lock quando menu aberto */
  body.menu-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
  }

  /* ─── HERO ─── */

  .hero {
    padding-top: calc(64px + env(safe-area-inset-top, 0px) + 36px);
    padding-bottom: 52px;
    overflow: hidden;
  }

  .hero-centered {
    text-align: center;
    align-items: center;
    min-height: 0;
  }

  .hero h1,
  .hero-title {
    font-size: clamp(38px, 11.5vw, 58px);
    line-height: .94;
    letter-spacing: -.05em;
    max-width: 100%;
    width: 100%;
    word-break: break-word;
    white-space: normal;
  }

  .hero-subheadline {
    font-size: 16px;
    line-height: 1.5;
    max-width: 100%;
    margin-top: 20px;
  }

  .hero-actions {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 28px;
    width: 100%;
  }

  .hero-actions .btn {
    width: 100%;
    max-width: 320px;
    justify-content: center;
    font-size: 14px;
    padding: 14px 20px;
  }

  .secondary-line {
    font-size: 13px;
    max-width: 100%;
    margin-top: 24px;
    text-align: center;
    transform: none;
  }

  .hero-metrics-line {
    font-size: 9px;
    max-width: 100%;
    text-align: center;
    margin-top: 16px;
    transform: none;
  }

  /* Círculo decorativo — ocultar */
  .hero::after {
    display: none;
  }

  /* ─── ABOUT ─── */

  .about-compact {
    padding: 48px 0;
  }

  .compact-intro {
    text-align: center;
    margin-bottom: 28px;
  }

  .compact-intro h2 {
    font-size: clamp(24px, 7.5vw, 34px);
    line-height: 1.05;
  }

  .compact-intro p {
    font-size: 15px;
    margin-top: 12px;
  }

  .about-service-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: visible;
    width: 100%;
  }

  .about-service-card {
    width: 100%;
    min-width: 0;
    padding: 18px 20px;
    border-radius: 16px;
  }

  .about-service-card h3 {
    font-size: 15px;
    margin-bottom: 6px;
    line-height: 1.2;
  }

  .about-service-card p {
    font-size: 13px;
    line-height: 1.45;
  }

  /* ─── PROOF / TESTIMONIALS ─── */
  /*
     FIX CRÍTICO: grid-template-columns do desktop (repeat(3,1fr))
     sobrepõe grid-auto-columns. É preciso forçar
     grid-template-columns para um único valor de coluna
     OU usar grid-template-columns: none + grid-auto-flow: column.
     A solução correta: zerar grid-template-columns explicitamente.
  */

  .proof-section {
    overflow-x: clip;
  }

  .proof-grid {
    display: grid;
    grid-template-columns: 82% 82% 82%; /* força 3 colunas explícitas em 82% */
    grid-auto-columns: 82%;
    grid-auto-flow: column;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    scroll-snap-type: x mandatory;
    padding-bottom: 16px;
    padding-left: 20px;
    padding-right: 20px;
    margin-left: -20px;
    margin-right: -20px;
    scrollbar-width: none;
    max-width: none;
    width: calc(100% + 40px);
  }

  .proof-grid::-webkit-scrollbar {
    display: none;
  }

  .proof-grid > * {
    scroll-snap-align: start;
    min-width: 0;
  }

  .proof-card {
    padding: 20px;
    border-radius: 20px;
    min-width: 0;
  }

  .proof-card blockquote {
    font-size: 15px;
    line-height: 1.48;
  }

  .proof-amount,
  .proof-meta {
    font-size: 11px;
  }

  .proof-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 14px;
    margin-top: 20px;
    width: 100%;
  }

  .proof-stat {
    text-align: center;
    padding: 0;
  }

  .proof-stat strong {
    font-size: 20px;
    display: block;
  }

  .proof-stat span {
    font-size: 9.5px;
    line-height: 1.3;
    display: block;
    margin-top: 4px;
    margin-left: auto;
    margin-right: auto;
  }

  /* ─── WHY SECTION ─── */

  .why-section .split,
  .split {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .why-section .section-title {
    font-size: clamp(26px, 8vw, 36px);
    max-width: 100%;
  }

  .why-section .statement-card p {
    font-size: 15px;
    line-height: 1.55;
  }

  /* ─── FIT ─── */

  .fit-grid,
  #fit .grid-2 {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 28px;
  }

  .fit-card {
    width: 100%;
    padding: 20px;
    border-radius: 18px;
  }

  #fit .fit-card h3 {
    font-size: 19px;
    margin-bottom: 14px;
    letter-spacing: -.03em;
  }

  #fit .fit-list li {
    font-size: 14px;
    line-height: 1.5;
  }

  /* ─── FINDINGS (what-we-find) ─── */

  .compact-section {
    padding-top: 48px;
    padding-bottom: 52px;
  }

  #findings .what-find-layout,
  #findings .what-find-layout.refined {
    display: flex;
    flex-direction: column;
    gap: 28px;
    grid-template-columns: unset;
  }

  #findings .what-find-left {
    max-width: 100%;
    width: 100%;
  }

  #findings .risk-mini-table {
    width: 100%;
    max-width: 100%;
  }

  #findings .risk-mini-row {
    display: grid;
    grid-template-columns: 80px 1fr;
    column-gap: 12px;
    row-gap: 4px;
    padding: 10px 0;
    width: 100%;
  }

  #findings .risk-mini-row .risk-label {
    grid-row: span 2;
    align-self: center;
  }

  #findings .risk-mini-row strong {
    font-size: 13px;
  }

  #findings .risk-mini-row p {
    font-size: 11px;
    line-height: 1.35;
  }

  /* FIX CRÍTICO: report-frame tinha width/min-width: 560px fixos */
  #findings .report-frame {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: auto;
    min-height: 0;
    transform: none;
    border-radius: 20px;
    padding: 0;
    overflow: clip;
    justify-self: unset;
  }

  #findings .report-sample-scroll {
    display: grid;
    grid-template-columns: 88% 88% 88% 88%; /* 4 cards explícitos */
    grid-auto-columns: 88%;
    grid-auto-flow: column;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    scroll-snap-type: x mandatory;
    padding: 4px 4px 16px;
    scrollbar-width: none;
    width: 100%;
    height: auto;
  }

  #findings .report-sample-scroll::-webkit-scrollbar {
    display: none;
  }

  #findings .report-sample-scroll .finding-card {
    display: block;
    scroll-snap-align: start;
    padding: 20px;
    min-width: 0;
    flex: none;
    width: auto;
    min-height: auto;
    height: auto;
    overflow: visible;
    border-radius: 18px;
    border: 1px solid rgba(28,28,28,.10);
    background: #fff;
  }

  /* Esconder prev/next — substituídos por swipe */
  #findings .report-arrow {
    display: none;
  }

  #findings .what-find-footnote {
    font-size: 12px;
    margin-top: 24px;
    text-align: center;
  }

  .finding-card h3 {
    font-size: 22px;
    line-height: 1.1;
  }

  .finding-metrics {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .finding-metrics strong {
    font-size: 18px;
  }

  .finding-clause p,
  .finding-analysis,
  .finding-flag p {
    font-size: 13px;
    line-height: 1.45;
  }

  .risk-table {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
  }

  .risk-row {
    display: flex;
    flex-direction: column;
    padding: 16px 0;
    gap: 6px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    grid-template-columns: unset;
  }

  /* ─── RESULTS ─── */

  /* FIX CRÍTICO: white-space:nowrap no h2 causava overflow de ~499px */
  .results-header-v3 h2 {
    font-size: clamp(24px, 7.5vw, 34px);
    line-height: 1.0;
    white-space: normal;
    word-break: break-word;
  }

  .results-grid-v3 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 28px;
  }

  .results-grid-v3 article {
    padding: 18px;
    border-radius: 16px;
  }

  .results-grid-v3 strong {
    font-size: 30px;
    line-height: .9;
    letter-spacing: -.06em;
  }

  .results-grid-v3 span {
    font-size: 12px;
    line-height: 1.4;
    margin-top: 10px;
  }

  .results-question-v3 {
    font-size: clamp(16px, 5vw, 20px);
    margin-top: 28px;
    padding: 0 4px;
    white-space: normal;
  }

  /* ─── SAMPLE REPORT SECTION ─── */

  .sample-report-section {
    padding: 44px 0;
  }

  .sample-report-lead,
  .sample-strip-v2,
  .sample-report-inner {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: 28px 20px;
    grid-template-columns: unset;
    width: 100%;
  }

  .sample-report-copy h2 {
    font-size: clamp(26px, 8vw, 36px);
    line-height: .98;
    white-space: normal;
  }

  .sample-report-copy p {
    font-size: 14px;
    margin-top: 12px;
  }

  .sample-action {
    justify-content: flex-start;
  }

  .sample-action a {
    width: 100%;
    justify-content: center;
  }

  .sample-report-form {
    width: 100%;
    padding: 24px 20px;
  }

  /* Evita zoom automático no iOS (inputs < 16px trigam zoom) */
  .form-field input,
  .form-field select,
  .form-field textarea {
    font-size: 16px;
    height: 52px;
  }

  .sample-form-btn {
    width: 100%;
    height: 52px;
    font-size: 14px;
  }

  /* ─── COMMERCIAL ANALYSIS TABLE ─── */

  .analysis-header-v3 {
    display: flex;
    flex-direction: column;
    gap: 16px;
    grid-template-columns: unset;
    margin-bottom: 24px;
  }

  .analysis-header-v3 h2 {
    font-size: clamp(24px, 7.5vw, 34px);
    white-space: normal;
  }

  .analysis-header-v3 p {
    font-size: 14px;
    max-width: 100%;
  }

  .analysis-table,
  .analysis-table-v4,
  .risk-table-v4 {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: visible;
    border-radius: 16px;
  }

  .analysis-head-v4 {
    display: none;
  }

  .analysis-row-v4 {
    display: flex;
    flex-direction: column;
    padding: 16px 20px;
    gap: 6px;
    border-bottom: 1px solid rgba(28,28,28,.08);
    grid-template-columns: unset;
  }

  .analysis-row-v4 strong {
    font-size: 15px;
    line-height: 1.2;
  }

  .analysis-row-v4 p {
    font-size: 13px;
    line-height: 1.45;
  }

  .analysis-note-v3 {
    font-size: 12px;
    text-align: left;
    margin-top: 16px;
  }

  /* ─── SECURITY ─── */

  .security-grid,
  .security-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 24px;
  }

  .security-card {
    padding: 20px;
    border-radius: 16px;
  }

  .security-card strong {
    font-size: 16px;
  }

  .security-card p {
    font-size: 13.5px;
  }

  /* ─── METHODOLOGY / FOUNDER ─── */

  .methodology-section {
    padding: 48px 0;
  }

  .methodology-frame {
    padding: 20px;
    border-radius: 18px;
    overflow: visible;
  }

  .methodology-main {
    display: flex;
    flex-direction: column;
    gap: 24px;
    grid-template-columns: unset;
    margin-top: 20px;
  }

  .methodology-founder {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 14px;
    align-items: center;
    width: 100%;
    position: static;
  }

  .methodology-founder img {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
  }

  .methodology-founder strong {
    font-size: 16px;
    display: block;
  }

  .methodology-founder span {
    font-size: 12px;
    display: block;
    margin-top: 2px;
    max-width: 100%;
  }

  .methodology-links {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
    position: static;
  }

  /* FIX CRÍTICO: 2º link tem position:absolute no CSS base */
  .methodology-links a,
  .methodology-links a:nth-child(2) {
    position: static;
    font-size: 11px;
    padding: 8px 12px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
  }

  .methodology-quote {
    margin-top: 0;
  }

  .methodology-quote p {
    font-size: 14px;
    line-height: 1.55;
    max-width: 100%;
  }

  /* ─── PLANS & PRICING ─── */

  .plans-section,
  .pricing-section {
    padding: 52px 0;
  }

  .plan-prompt,
  .sample-report-cta {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    width: 100%;
    margin-bottom: 24px;
    align-items: flex-start;
  }

  .plan-prompt h3,
  .sample-report-cta span {
    font-size: 17px;
    line-height: 1.2;
  }

  .plan-prompt .btn,
  .sample-report-cta .btn,
  .sample-report-cta a {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  /* Plan model cards — scroll horizontal */
  .plan-model-grid {
    display: grid;
    grid-template-columns: 85% 85%;   /* 2 colunas explícitas em 85% */
    grid-auto-columns: 85%;
    grid-auto-flow: column;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    scroll-snap-type: x mandatory;
    padding-bottom: 16px;
    padding-left: 20px;
    padding-right: 20px;
    margin-left: -20px;
    margin-right: -20px;
    scrollbar-width: none;
    max-width: none;
    width: calc(100% + 40px);
  }

  .plan-model-grid::-webkit-scrollbar {
    display: none;
  }

  .plan-model-card {
    scroll-snap-align: start;
    padding: 22px;
    min-width: 0;
  }

  /* Pricing tabs */
  .pricing-tabs,
  .plan-tabs {
    gap: 6px;
    margin-top: 28px;
    margin-bottom: 20px;
    flex-wrap: nowrap; /* mantém na mesma linha */
    width: 100%;
    border-radius: 16px;
  }

  .pricing-tab,
  .plan-tab {
    font-size: 10px;
    padding: 10px 14px;
    flex: 1;
    text-align: center;
    justify-content: center;
    min-height: 44px;
  }

  /*
     FIX CRÍTICO: Pricing panels + pricing grid.

     O problema tem duas camadas:
     1. .pricing-panel { display: none } no styles.css — correto
     2. .pricing-panel.active { display: block } no styles.css — vira "block"
     3. Mas .pricing-grid é também .pricing-panel.
        No mobile queremos display: grid no painel ativo.
        O override "display: grid !important" no mobile.css anterior
        quebrava isso ao forçar display:grid em TODOS incluindo os inativos.

     Solução: não usar !important no display do .pricing-grid.
     Deixar .pricing-panel { display: none } do styles.css funcionar.
     Sobrescrever apenas o layout do painel ATIVO.
  */

  /* Painel inativo: herda display:none do styles.css — não mexer */
  /* Painel ativo: forçar grid com scroll horizontal */
  .pricing-panel.active,
  .pricing-grid.active {
    display: grid;
    grid-template-columns: 85% 85% 85%; /* 3 colunas explícitas = 3 cards */
    grid-auto-columns: 85%;
    grid-auto-flow: column;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    scroll-snap-type: x mandatory;
    padding-bottom: 16px;
    padding-left: 20px;
    padding-right: 20px;
    margin-left: -20px;
    margin-right: -20px;
    scrollbar-width: none;
    max-width: none;
    width: calc(100% + 40px);
  }

  .pricing-panel.active::-webkit-scrollbar,
  .pricing-grid.active::-webkit-scrollbar {
    display: none;
  }

  .pricing-card {
    scroll-snap-align: start;
    min-width: 0;
    min-height: auto;
    padding: 22px;
    border-radius: 22px;
  }

  .price-block strong {
    font-size: clamp(36px, 10vw, 52px);
  }

  .pricing-list li {
    font-size: 13px;
  }

  .enterprise-note {
    font-size: 13px;
    padding: 16px 18px;
    margin-top: 24px;
    text-align: center;
  }

  /* ─── FAQ ─── */

  .faq-section {
    padding: 52px 0 60px;
  }

  /* FIX: layout 2 colunas vira coluna única */
  .faq-layout {
    display: flex;
    flex-direction: column;
    gap: 32px;
    grid-template-columns: unset;
  }

  .faq-heading .section-title {
    font-size: clamp(28px, 8.5vw, 42px);
    line-height: .96;
    white-space: normal;
  }

  .faq-stack {
    max-width: 100%;
  }

  .faq-stack summary {
    font-size: 15px;
    line-height: 1.35;
    padding-right: 8px;
  }

  .faq-stack details p {
    font-size: 14px;
    line-height: 1.65;
  }

  /* ─── FINAL CTA ─── */

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

  .final-cta h2 {
    font-size: clamp(28px, 8vw, 42px);
    white-space: normal;
  }

  .final-cta p {
    font-size: 16px;
    margin: 16px auto 28px;
    max-width: 100%;
  }

  .final-actions {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .final-actions .btn {
    width: 100%;
    max-width: 320px;
    justify-content: center;
  }

  /* ─── FOOTER ─── */

  .footer .container {
    flex-direction: column;
    gap: 12px;
  }

  .footer-links {
    gap: 10px;
    flex-wrap: wrap;
  }

  /* ─── SAMPLE MODAL ─── */

  .sample-modal {
    padding: 16px;
    align-items: flex-end; /* desliza de baixo no mobile */
  }

  .sample-modal-card {
    width: 100%;
    max-width: 100%;
    max-height: 90dvh;
    overflow-y: auto;
    padding: 28px 24px;
    border-radius: 24px 24px 16px 16px;
  }

  .sample-modal-card h2 {
    font-size: clamp(26px, 7.5vw, 32px);
    line-height: .98;
    white-space: normal;
  }

  .sample-modal-card > p {
    font-size: 14px;
    line-height: 1.5;
    max-width: 100%;
  }

  .sample-modal-card .form-field input {
    font-size: 16px; /* evita zoom iOS */
    height: 52px;
  }

  .sample-modal-card .sample-form-btn {
    height: 52px;
    width: 100%;
  }

} /* fim @media (max-width: 768px) */

/* =========================================================
   BREAKPOINT PEQUENO — até 390px (iPhone 14)
   Ajustes finos sobre o bloco acima
   ========================================================= */
@media (max-width: 390px) {

  .hero h1,
  .hero-title {
    font-size: clamp(34px, 10.5vw, 46px);
  }

  .hero-actions .btn {
    max-width: 100%;
    font-size: 13px;
  }

  h2,
  .section-title {
    font-size: clamp(24px, 7.5vw, 34px);
  }

  .pricing-panel.active,
  .pricing-grid.active {
    grid-template-columns: 88% 88% 88%;
  }

  .proof-grid {
    grid-template-columns: 88% 88% 88%;
  }

  .plan-model-grid {
    grid-template-columns: 88% 88%;
  }

  .proof-stat strong {
    font-size: 18px;
  }

  .results-grid-v3 strong {
    font-size: 26px;
  }

  .sample-modal-card {
    padding: 24px 18px;
  }

} /* fim @media (max-width: 390px) */

/* =========================================================
   BREAKPOINT TABLET — 769px → 1024px
   Corrige grids que ficam apertados em tablet portrait
   ========================================================= */
@media (min-width: 769px) and (max-width: 1024px) {

  .container {
    padding-left: 28px;
    padding-right: 28px;
  }

  .pricing-grid {
    grid-template-columns: repeat(3, 1fr);
    overflow-x: visible;
  }

  .proof-grid {
    grid-template-columns: repeat(3, 1fr);
    overflow-x: visible;
  }

  .testimonial-grid,
  .premium-testimonials {
    grid-template-columns: repeat(2, 1fr);
  }

  .methodology-main {
    grid-template-columns: 220px 1fr;
    display: grid;
  }

  #findings .what-find-layout.refined {
    grid-template-columns: 1fr 1fr;
    display: grid;
  }

  #findings .report-frame {
    width: 100%;
    min-width: 0;
  }

  .analysis-header-v3 {
    grid-template-columns: 1fr 1fr;
    display: grid;
  }

  .results-grid-v3 {
    grid-template-columns: repeat(4, 1fr);
  }

} /* fim @media tablet */

/* =========================================================
   FINAL MOBILE CAROUSEL SYSTEM — Renewal Ops Desk
   Purpose:
   - removes cropped-card/peek behavior
   - shows one complete card per mobile viewport
   - adds premium clickable arrows via nav.js
   - no dots / no swipe text
   ========================================================= */

@media (max-width: 768px) {

  .section,
  .section.light,
  .section.dark {
    overflow-x: visible !important;
  }

  .mobile-carousel-shell {
    position: relative;
    width: 100%;
    max-width: 100%;
  }

  .mobile-carousel-shell.mobile-carousel-inactive {
    pointer-events: none;
  }

  .proof-grid,
  #fit .grid-2,
  #fit .fit-scroll-grid,
  #findings .report-sample-scroll,
  .plan-model-grid,
  .pricing-panel.active,
  .pricing-grid.active {
    display: grid !important;
    grid-template-columns: 100% !important;
    grid-auto-columns: 100% !important;
    grid-auto-flow: column !important;

    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 16px !important;

    gap: 14px !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    overscroll-behavior-x: contain !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    scroll-padding-left: 0 !important;
    scrollbar-width: none !important;
  }

  .proof-grid::-webkit-scrollbar,
  #fit .grid-2::-webkit-scrollbar,
  #fit .fit-scroll-grid::-webkit-scrollbar,
  #findings .report-sample-scroll::-webkit-scrollbar,
  .plan-model-grid::-webkit-scrollbar,
  .pricing-panel.active::-webkit-scrollbar,
  .pricing-grid.active::-webkit-scrollbar {
    display: none !important;
  }

  .proof-card,
  .fit-card,
  #findings .report-sample-scroll .finding-card,
  .plan-model-card,
  .pricing-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
  }

  #findings .report-frame {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
    position: relative !important;
  }

  /* Hide any old static report arrows if they still exist in cached HTML. */
  #findings .report-arrow {
    display: none !important;
  }

  .mobile-carousel-arrow {
    position: absolute;
    top: 50%;
    z-index: 30;

    width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0;
    border-radius: 999px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(28, 28, 28, .12);
    background: rgba(255, 255, 255, .78);
    color: rgba(28, 28, 28, .74);

    font-size: 27px;
    font-weight: 300;
    line-height: 1;

    box-shadow: 0 14px 36px rgba(0, 0, 0, .10);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    cursor: pointer;
    transform: translateY(-50%);
    transition:
      opacity .18s ease,
      transform .18s ease,
      background .18s ease,
      color .18s ease,
      border-color .18s ease;
  }

  .mobile-carousel-arrow:hover {
    background: rgba(255, 255, 255, .92);
    color: rgba(28, 28, 28, .92);
  }

  .mobile-carousel-arrow:active {
    transform: translateY(-50%) scale(.94);
  }

  .mobile-carousel-prev {
    left: -10px;
  }

  .mobile-carousel-next {
    right: -10px;
  }

  .mobile-carousel-arrow.is-disabled {
    opacity: .20;
    pointer-events: none;
  }

  .section.dark .mobile-carousel-arrow,
  .dark .mobile-carousel-arrow {
    border-color: rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .84);
    box-shadow: 0 16px 38px rgba(0, 0, 0, .26);
  }

  .section.dark .mobile-carousel-arrow.is-disabled,
  .dark .mobile-carousel-arrow.is-disabled {
    opacity: .18;
  }

  /* Make proof stats more compact on mobile. */
  .proof-stats {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    padding: 12px 10px !important;
  }

  .proof-stat strong {
    font-size: 17px !important;
  }

  .proof-stat span {
    font-size: 8.5px !important;
    line-height: 1.25 !important;
  }

  /* Security readability fix. */
  .security-section {
    background: #101010 !important;
    color: #fff !important;
  }

  .security-header h2 {
    color: rgba(255, 255, 255, .96) !important;
  }

  .security-header p {
    color: rgba(255, 255, 255, .62) !important;
  }

  .security-card {
    background: rgba(255, 255, 255, .045) !important;
    border-color: rgba(255, 255, 255, .12) !important;
  }

  .security-card span {
    color: rgba(255, 255, 255, .34) !important;
  }

  .security-card strong {
    color: rgba(255, 255, 255, .92) !important;
  }

  .security-card p {
    color: rgba(255, 255, 255, .58) !important;
  }

  /* FAQ: title first, questions full width. */
  #faq .faq-layout {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: unset !important;
    gap: 24px !important;
    width: 100% !important;
  }

  #faq .faq-heading,
  #faq .faq-stack {
    width: 100% !important;
    max-width: 100% !important;
  }

  #faq .faq-heading .section-title {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Compact footer on mobile. */
  .footer {
    padding: 28px 0 !important;
  }

  .footer .container {
    gap: 12px !important;
    align-items: center !important;
    text-align: center !important;
  }

  .footer p,
  .footer span {
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  .footer-links {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px 12px !important;
    width: 100% !important;
    max-width: 360px !important;
  }

  .footer-links a {
    font-size: 10px !important;
    line-height: 1.25 !important;
  }
}

@media (max-width: 390px) {
  .proof-grid,
  #fit .grid-2,
  #fit .fit-scroll-grid,
  #findings .report-sample-scroll,
  .plan-model-grid,
  .pricing-panel.active,
  .pricing-grid.active {
    grid-template-columns: 100% !important;
    grid-auto-columns: 100% !important;
  }

  .mobile-carousel-prev {
    left: -6px;
  }

  .mobile-carousel-next {
    right: -6px;
  }
}

/* =========================================================
   ROD — MOBILE POLISH REFINEMENTS
   Compact notes, smaller support sections, tighter forms
   Paste at the very end of mobile.css
   ========================================================= */

@media screen and (max-width: 768px) {

  /* ---------------------------------------------------------
     1) ABOUT — reduce 3 service boxes into compact note cards
     --------------------------------------------------------- */

  .about-compact {
    padding-top: 42px !important;
    padding-bottom: 38px !important;
  }

  .about-service-cards {
    gap: 8px !important;
    margin-top: 22px !important;
  }

  .about-service-card {
    padding: 12px 14px !important;
    border-radius: 15px !important;
    background: rgba(28, 28, 28, .035) !important;
    box-shadow: none !important;
  }

  .about-service-card h3 {
    font-size: 13px !important;
    line-height: 1.15 !important;
    margin-bottom: 5px !important;
    letter-spacing: -.02em !important;
  }

  .about-service-card p {
    font-size: 11.5px !important;
    line-height: 1.38 !important;
    color: rgba(28, 28, 28, .52) !important;
  }


  /* ---------------------------------------------------------
     2) WHY WE DO THIS — make section less dominant
     --------------------------------------------------------- */

  .why-section {
    padding-top: 38px !important;
    padding-bottom: 38px !important;
  }

  .why-section .split {
    gap: 16px !important;
  }

  .why-section .section-title {
    font-size: clamp(26px, 7vw, 34px) !important;
    line-height: 1 !important;
    letter-spacing: -.055em !important;
  }

  .why-section .statement-card {
    padding: 20px 22px !important;
    border-radius: 20px !important;
  }

  .why-section .statement-card p {
    font-size: 13.5px !important;
    line-height: 1.48 !important;
    margin-bottom: 12px !important;
    color: rgba(28, 28, 28, .62) !important;
  }

  .why-section .closing-statement {
    margin-top: 16px !important;
    padding-left: 14px !important;
    font-size: 13.5px !important;
    line-height: 1.42 !important;
    border-left-width: 2px !important;
  }


  /* ---------------------------------------------------------
     3) SAMPLE REPORT FORM — smaller box + smaller fields
     --------------------------------------------------------- */

  .sample-report-section {
    padding-top: 34px !important;
    padding-bottom: 34px !important;
  }

  .sample-report-lead,
  .sample-strip-v2,
  .sample-report-inner {
    padding: 20px 18px !important;
    border-radius: 22px !important;
    gap: 16px !important;
  }

  .sample-report-form {
    padding: 18px 16px !important;
    border-radius: 20px !important;
  }

  .form-field {
    margin-bottom: 12px !important;
    gap: 5px !important;
  }

  .form-field label {
    font-size: 8px !important;
    letter-spacing: .12em !important;
  }

  .form-field input,
  .form-field select,
  .form-field textarea {
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 13px !important;
    border-radius: 12px !important;
    font-size: 16px !important; /* keeps iPhone from zooming */
  }

  .sample-form-btn,
  .sample-report-form .btn {
    min-height: 44px !important;
    height: auto !important;
    padding: 12px 16px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
  }

  .sample-form-note {
    margin-top: 10px !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
  }


  /* ---------------------------------------------------------
     4) ANALYSIS NOTE — center final phrase
     --------------------------------------------------------- */

  .analysis-note-v3,
  .analysis-note {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 340px !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
  }


  /* ---------------------------------------------------------
     5) SECURITY — compact cards, number + title same line
     --------------------------------------------------------- */

  .security-section {
    padding-top: 34px !important;
    padding-bottom: 34px !important;
  }

  .security-header {
    margin-bottom: 18px !important;
  }

  .security-header h2 {
    font-size: clamp(25px, 7.2vw, 34px) !important;
    line-height: 1 !important;
    margin-top: 14px !important;
  }

  .security-header p {
    font-size: 13px !important;
    line-height: 1.45 !important;
    margin-top: 10px !important;
  }

  .security-grid {
    gap: 9px !important;
  }

  .security-card {
    padding: 13px 14px !important;
    border-radius: 15px !important;
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    column-gap: 8px !important;
    row-gap: 5px !important;
    align-items: baseline !important;
  }

  .security-card span {
    margin: 0 !important;
    font-size: 8px !important;
    line-height: 1.2 !important;
    color: rgba(255, 255, 255, .34) !important;
  }

  .security-card strong {
    font-size: 13.5px !important;
    line-height: 1.15 !important;
    margin: 0 !important;
  }

  .security-card p {
    grid-column: 1 / -1 !important;
    margin-top: 3px !important;
    font-size: 11.5px !important;
    line-height: 1.38 !important;
    color: rgba(255, 255, 255, .54) !important;
  }


  /* ---------------------------------------------------------
     6) METHODOLOGY / FOUNDER — make it feel like a note
     --------------------------------------------------------- */

  .methodology-section {
    padding-top: 24px !important;
    padding-bottom: 30px !important;
  }

  .methodology-frame {
    padding: 18px 18px 16px !important;
    border-radius: 20px !important;
  }

  .methodology-main {
    gap: 16px !important;
    margin-top: 16px !important;
  }

  .methodology-founder {
    grid-template-columns: 54px 1fr !important;
    gap: 12px !important;
    align-items: center !important;
  }

  .methodology-founder img {
    width: 54px !important;
    height: 54px !important;
    border-radius: 14px !important;
  }

  .methodology-founder strong {
    font-size: 13px !important;
    line-height: 1.15 !important;
  }

  .methodology-founder span {
    font-size: 10px !important;
    line-height: 1.3 !important;
    max-width: 190px !important;
  }

  .methodology-links {
    margin-top: 8px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .methodology-links a,
  .methodology-links a:nth-child(2) {
    position: static !important;
    min-height: 30px !important;
    padding: 6px 10px !important;
    font-size: 9.5px !important;
  }

  .methodology-quote p {
    font-size: 12.5px !important;
    line-height: 1.45 !important;
    color: rgba(28, 28, 28, .66) !important;
  }

  .methodology-quote p + p {
    margin-top: 8px !important;
  }

  .methodology-footer {
    margin-top: 14px !important;
    padding-top: 12px !important;
  }

  .methodology-footer span {
    display: block !important;
    font-size: 7.5px !important;
    line-height: 1.7 !important;
    letter-spacing: .11em !important;
  }


  /* ---------------------------------------------------------
     7) FINAL CTA BUTTON — prevent text overflow
     --------------------------------------------------------- */

  .final-cta .btn,
  .final-actions .btn {
    width: 100% !important;
    max-width: 360px !important;
    min-height: 50px !important;
    padding: 13px 18px !important;
    white-space: normal !important;
    text-align: center !important;
    line-height: 1.18 !important;
    font-size: 12.5px !important;
    letter-spacing: -.01em !important;
  }

  .final-actions {
    width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* ============================================================
   RENEWAL OPS DESK — sample-report-mobile-fix.css
   CSS completo para responsividade mobile.
   Mobile-first (min-width). Breakpoints: 320 · 375 · 390 · 430 · 768px
   Gerado em: 2026-05-14
   ============================================================ */

/* ────────────────────────────────────────────────
   BASE GLOBAL — aplica em TODOS os tamanhos
   (padrão mobile, sobrescrito pelo bloco min-width:768px)
   ──────────────────────────────────────────────── */

html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Containers já têm min() formula — só garantir que não vazem */
.container,
.sr-container {
  max-width: 100%;
  box-sizing: border-box;
}

/* Garantia global anti-overflow */
.sr-page {
  overflow-x: hidden;
}

/* Touch targets mínimos para todos os botões/links */
.btn, a.btn, button, .sr-tab {
  min-height: 44px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* ── NAV ── */
.nav {
  height: calc(60px + env(safe-area-inset-top, 0px));
  min-height: 60px;
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: 16px;
  padding-right: 16px;
}

.brand-mark {
  width: 28px;
  height: 28px;
}

.nav-sample-cta .btn,
.nav-sample-cta a.btn {
  padding: 10px 14px;
  font-size: 11px;
  white-space: nowrap;
}

/* ── HERO ── */
.sr-hero {
  padding-top: 84px;
  padding-bottom: 44px;
}

.sr-hero-inner {
  max-width: 100%;
}

.sr-hero h1 {
  max-width: 100%;
  font-size: clamp(30px, 8.5vw, 52px);
  letter-spacing: -0.05em;
  word-break: break-word;
  white-space: normal;
}

.sr-hero-sub {
  max-width: 100%;
  font-size: 14.5px;
  margin-top: 16px;
}

.sr-badge,
.sr-hero .sr-badge {
  margin-bottom: 22px;
  font-size: 8.5px;
  padding: 5px 9px;
}

.sr-hero-actions {
  flex-direction: column;
  width: 100%;
  gap: 10px;
  margin-top: 22px;
}

.sr-hero-actions .btn,
.sr-hero-actions a.btn {
  width: 100%;
  min-height: 50px;
  justify-content: center;
  text-align: center;
}

.sr-hero-actions .btn-ghost,
.sr-hero-actions a.btn-ghost {
  width: 100%;
}

.sr-hero-proof-line {
  max-width: 100%;
  font-size: 9px;
  letter-spacing: 0.07em;
  margin-top: 18px;
  white-space: normal;
  word-break: break-word;
  text-align: center;
}

/* ── SEÇÕES ── */
.sr-proof,
.sr-bridge,
.sr-faq,
.sr-sample-section {
  padding-top: 40px;
  padding-bottom: 40px;
}

.sr-proof-header {
  max-width: 100%;
}

/* ── PROOF STATS: 4-col → 2-col ── */
.sr-proof-stats {
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}

.sr-stat {
  padding: 16px;
}

.sr-stat strong {
  font-size: 26px;
}

.sr-stat span {
  font-size: 12px;
  margin-top: 6px;
}

/* ── PROOF CARDS / BRIDGE: 3-col → 1-col ── */
.sr-proof-cards,
.sr-bridge-items {
  grid-template-columns: 1fr;
  gap: 10px;
}

/* ── HEADINGS ── */
.sr-bridge h2,
.sr-faq-head h2,
.sr-switcher-header h2 {
  font-size: clamp(24px, 8vw, 38px);
  letter-spacing: -0.05em;
  word-break: break-word;
  white-space: normal;
}

/* ── FAQ ── */
.sr-faq-inner {
  max-width: 100%;
}

.sr-faq-stack {
  gap: 6px;
}

.sr-faq-stack summary {
  font-size: 13.5px;
  padding: 14px 16px;
  min-height: 48px;
}

/* ── EYEBROW ── */
.sr-eyebrow {
  font-size: 9px;
  letter-spacing: 0.07em;
}

/* ── COUPON BAR ── */
.sr-coupon-bar {
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 16px;
  margin-bottom: 18px;
}

.sr-coupon-bar::after {
  position: static;
  width: fit-content;
  margin: 0 0 2px;
}

.sr-coupon-bar::before {
  position: static;
  width: fit-content;
  margin-bottom: 4px;
  grid-row: 1;
}

.sr-coupon-code {
  padding-right: 0;
  padding-bottom: 14px;
  border-right: none;
  border-bottom: 1px solid rgba(28,28,28,0.1);
}

.sr-coupon-code strong {
  font-size: 28px;
}

.sr-coupon-desc {
  padding-right: 0;
  font-size: 14px;
}

/* ── TAB BAR ── */
.sr-tab-bar {
  width: 100%;
  flex-direction: row;
  border-radius: 16px;
  padding: 4px;
  gap: 3px;
}

.sr-tab {
  flex: 1;
  min-width: 0;
  text-align: center;
  padding: 10px 8px;
  font-size: 9px;
  letter-spacing: 0.07em;
}

/* ── SWITCHER HEADER ── */
.sr-switcher-header {
  max-width: 100%;
  margin-bottom: 18px;
}

/* ── PANEL INTRO + DARK BLOCKS ── */
.sr-panel-intro,
.sr-deliverable-block.dark,
.sr-panel-cta-block,
.sr-brief-pricing {
  padding: 18px 16px;
  border-radius: 14px;
}

.sr-panel-intro h3 {
  font-size: clamp(20px, 6.5vw, 32px);
}

.sr-panel-intro p,
.sr-deliverable-block.dark p,
.sr-panel-cta-block p {
  font-size: 14px;
}

/* ── MONITORING GRID: 2-col → 1-col ── */
.sr-status-grid,
.sr-monitoring-grid,
.sr-brief-pricing-grid {
  grid-template-columns: 1fr;
  gap: 12px;
}

/* ── MONITORING HEADER ── */
.sr-monitoring-header h4 {
  font-size: clamp(24px, 7.5vw, 44px);
}

.sr-monitoring-header h4::after {
  display: block;
  margin-top: 4px;
}

/* ── ALERT TABLE (monitoring) ── */
.sr-table-head,
.sr-table-row {
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: 6px;
  padding: 9px 12px;
  font-size: 12px;
}

.sr-table-head span:last-child,
.sr-table-row span:last-child {
  display: none;
}

/* ── ACTION CALENDAR (setup) ── */
.sr-calendar-head,
.sr-calendar-row {
  grid-template-columns: 100px 80px 1fr;
  gap: 6px;
  padding: 9px 12px;
  font-size: 12px;
}

.sr-calendar-head span:last-child,
.sr-calendar-row span:last-child {
  display: none;
}

/* ── METRICS ROW: 4-col → 2-col ── */
.sr-metrics-row {
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

/* ── TOP 3 ── */
.sr-top3-item {
  flex-wrap: wrap;
  gap: 8px;
}

.sr-top3-item strong,
.sr-top3-item p {
  font-size: 13px;
}

/* ── CONTRACT CARDS ── */
.sr-contract-cards {
  gap: 12px;
}

.sr-contract-card {
  padding: 18px 16px;
  border-radius: 14px;
}

.sr-contract-card h5 {
  font-size: 18px;
  word-break: break-word;
}

/* ── CONTRACT META: 4-col → 2-col ── */
.sr-contract-meta {
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

/* ── CONTRACT OPTIONS / SCENARIO: 3-col → 1-col ── */
.sr-contract-options,
.sr-scenario-grid {
  grid-template-columns: 1fr;
  gap: 6px;
}

/* ── CLAUSE COMPARE: 2-col → 1-col ── */
.sr-clause-compare {
  grid-template-columns: 1fr;
  gap: 8px;
}

/* ── EXPOSURE TABLE ── */
.sr-exposure-table {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── PLAYBOOK ── */
.sr-playbook-row {
  grid-template-columns: 56px 1fr;
  gap: 10px;
  padding: 12px 0;
}

/* ── QUARTERLY GRID: 4-col → 2-col ── */
.sr-quarterly-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

/* ── EMAIL CARDS ── */
.sr-email-card {
  padding: 16px;
}

/* ── BRIEF HEADER ── */
.sr-brief-header {
  flex-direction: column;
  gap: 10px;
}

/* ── BRIEF PRICING ── */
.sr-brief-pricing .btn,
.sr-brief-pricing a.btn {
  width: 100%;
  min-width: 0;
  margin-top: 16px;
  justify-content: center;
}

.sr-brief-plan {
  padding: 14px;
  min-height: auto;
}

.sr-brief-price strong {
  font-size: 34px;
}

/* ── SETUP PRICING GRID: 3-col → 1-col ── */
.sr-setup-pricing-grid {
  grid-template-columns: 1fr;
  gap: 12px;
}

.sr-setup-pricing-head {
  max-width: 100%;
  text-align: left;
  margin-bottom: 16px;
}

.sr-setup-price-card {
  padding: 20px 18px;
  border-radius: 18px;
}

.sr-setup-price {
  font-size: clamp(42px, 12vw, 64px);
}

.sr-setup-range {
  font-size: clamp(16px, 5vw, 26px);
  margin-bottom: 14px;
}

.sr-setup-price-card .btn,
.sr-setup-price-card a.btn {
  margin-top: 18px;
  padding: 15px 18px;
}

/* ── SETUP / LANDING PRICING PREVIEW ── */
.sr-setup-pricing-preview,
.sr-landing-pricing-preview {
  padding: 18px 16px;
  border-radius: 18px;
  margin-top: 22px;
}

.sr-landing-pricing-preview .sr-brief-pricing-grid {
  grid-template-columns: 1fr;
}

.sr-landing-pricing-preview .sr-brief-plan,
.sr-landing-pricing-preview .sr-brief-plan-featured,
.sr-setup-price-card {
  padding: 18px 16px;
}

.sr-landing-pricing-preview .btn,
.sr-landing-pricing-preview a.btn {
  width: 100%;
  min-width: 0;
}

/* ── COUPON PILL ── */
.sr-coupon-pill {
  flex-wrap: wrap;
  border-radius: 14px;
  padding: 8px 12px;
  text-align: center;
  font-size: 11px;
  gap: 6px;
}

/* ── UPGRADE HINT ── */
.sr-upgrade-hint {
  padding: 16px;
  border-radius: 12px;
}

.sr-upgrade-hint > strong {
  font-size: 14px;
}

.sr-upgrade-hint p {
  font-size: 13px;
}

/* ── MISSED CALLOUT ── */
.sr-missed-callout {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 14px;
}

/* ── DELIVERABLE BLOCK ── */
.sr-deliverable-block {
  padding: 16px;
  border-radius: 14px;
}

/* ── PANEL CTA BLOCK ── */
.sr-panel-cta-block h3 {
  font-size: clamp(20px, 6.5vw, 32px);
}

.sr-panel-cta-block .btn,
.sr-panel-cta-block a.btn {
  width: 100%;
  min-width: 0;
  justify-content: center;
}

.sr-panel-cta-note {
  font-size: 12px;
}

/* ── FINAL CTA ── */
.sr-final-cta {
  padding-top: 52px;
  padding-bottom: calc(44px + env(safe-area-inset-bottom, 0px));
}

.sr-final-cta h2 {
  font-size: clamp(26px, 9vw, 44px);
  letter-spacing: -0.05em;
  word-break: break-word;
  white-space: normal;
}

.sr-final-cta .btn,
.sr-final-cta a.btn {
  width: 100%;
  margin-top: 22px;
  min-height: 52px;
  justify-content: center;
}

.sr-final-inner {
  width: min(100%, calc(100% - 40px));
  padding: 0;
}

.sr-final-note {
  max-width: 100%;
  font-size: 12.5px;
  margin-top: 14px;
}

/* ── FOOTER ── */
.footer {
  padding-top: 24px;
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}

.footer .container {
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}

.footer-links {
  gap: 8px;
  flex-wrap: wrap;
}

.footer-links a {
  font-size: 12px;
}

/* ────────────────────────────────────────────────
   375px — iPhone SE / iPhone mini
   ──────────────────────────────────────────────── */
@media (min-width: 375px) {
  .sr-hero h1 {
    font-size: clamp(32px, 9vw, 52px);
  }

  .sr-proof-stats {
    gap: 10px;
  }

  .sr-stat {
    padding: 18px;
  }

  .sr-stat strong {
    font-size: 28px;
  }

  .sr-contract-card {
    padding: 20px;
  }

  .sr-tab {
    font-size: 9.5px;
    padding: 10px 10px;
  }

  .sr-coupon-code strong {
    font-size: 30px;
  }

  .sr-calendar-head,
  .sr-calendar-row {
    grid-template-columns: 110px 86px 1fr;
  }
}

/* ────────────────────────────────────────────────
   390px — iPhone 14
   ──────────────────────────────────────────────── */
@media (min-width: 390px) {
  .sr-hero h1 {
    font-size: clamp(34px, 9.5vw, 54px);
  }

  .sr-hero-sub {
    font-size: 15px;
  }

  .nav {
    padding-left: 18px;
    padding-right: 18px;
  }

  .nav-sample-cta .btn,
  .nav-sample-cta a.btn {
    padding: 11px 16px;
    font-size: 12px;
  }

  .sr-monitoring-header h4 {
    font-size: clamp(26px, 8vw, 44px);
  }

  .sr-brief-price strong {
    font-size: 38px;
  }

  .sr-calendar-head,
  .sr-calendar-row {
    grid-template-columns: 116px 90px 1fr;
    gap: 8px;
  }
}

/* ────────────────────────────────────────────────
   430px — iPhone 14 Plus
   ──────────────────────────────────────────────── */
@media (min-width: 430px) {
  .sr-hero h1 {
    font-size: clamp(36px, 9vw, 56px);
  }

  .sr-tab {
    font-size: 10px;
    padding: 11px 12px;
  }

  .sr-stat {
    padding: 20px;
  }

  .sr-stat strong {
    font-size: 30px;
  }

  .sr-contract-card {
    padding: 22px 20px;
  }

  .sr-contract-card h5 {
    font-size: 20px;
  }

  .sr-brief-price strong {
    font-size: 42px;
  }

  .sr-setup-pricing-grid {
    gap: 14px;
  }

  .sr-calendar-head,
  .sr-calendar-row {
    grid-template-columns: 126px 96px 1fr;
    gap: 10px;
  }

  .sr-coupon-code strong {
    font-size: 32px;
  }

  .sr-playbook-row {
    grid-template-columns: 62px 1fr;
  }
}

/* ────────────────────────────────────────────────
   768px — Tablet (iPad portrait) e acima
   Restaura o layout desktop.
   ──────────────────────────────────────────────── */
@media (min-width: 768px) {

  /* Touch targets normais no desktop */
  .btn, a.btn, button {
    min-height: 40px;
  }

  /* NAV */
  .nav {
    height: calc(76px + env(safe-area-inset-top, 0px));
    min-height: 76px;
    padding-top: env(safe-area-inset-top, 0px);
    padding-left: 44px;
    padding-right: 44px;
  }

  .brand-mark {
    width: 34px;
    height: 34px;
  }

  .nav-sample-cta .btn,
  .nav-sample-cta a.btn {
    padding: 14px 19px;
    font-size: 13px;
  }

  /* HERO */
  .sr-hero {
    padding-top: 112px;
    padding-bottom: 68px;
  }

  .sr-hero-inner {
    max-width: 840px;
  }

  .sr-hero h1 {
    max-width: 780px;
    font-size: clamp(42px, 5.2vw, 72px);
    letter-spacing: -0.065em;
  }

  .sr-hero-sub {
    max-width: 620px;
    font-size: 16px;
    margin-top: 22px;
  }

  .sr-badge,
  .sr-hero .sr-badge {
    margin-bottom: 42px;
    font-size: 9.5px;
    padding: 7px 11px;
  }

  .sr-hero-actions {
    flex-direction: row;
    width: auto;
    gap: 12px;
    margin-top: 32px;
  }

  .sr-hero-actions .btn,
  .sr-hero-actions a.btn,
  .sr-hero-actions .btn-ghost,
  .sr-hero-actions a.btn-ghost {
    width: auto;
    min-height: 40px;
  }

  .sr-hero-proof-line {
    font-size: 10px;
    letter-spacing: 0.1em;
    margin-top: 30px;
  }

  /* SEÇÕES */
  .sr-proof,
  .sr-bridge,
  .sr-faq,
  .sr-sample-section {
    padding-top: 52px;
    padding-bottom: 52px;
  }

  .sr-proof-header {
    max-width: 780px;
  }

  /* PROOF STATS: 4-col */
  .sr-proof-stats {
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 18px;
  }

  .sr-stat {
    padding: 22px;
  }

  .sr-stat strong {
    font-size: 32px;
  }

  .sr-stat span {
    font-size: 13px;
    margin-top: 10px;
  }

  /* PROOF CARDS / BRIDGE: 3-col */
  .sr-proof-cards,
  .sr-bridge-items {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }

  /* HEADINGS */
  .sr-bridge h2,
  .sr-faq-head h2,
  .sr-switcher-header h2 {
    font-size: clamp(32px, 3.6vw, 52px);
    letter-spacing: -0.06em;
  }

  /* FAQ */
  .sr-faq-inner {
    max-width: 760px;
  }

  .sr-eyebrow {
    font-size: 11px;
    padding: 7px 12px;
    letter-spacing: 0.1em;
  }

  /* COUPON BAR */
  .sr-coupon-bar {
    grid-template-columns: 200px 1fr;
    gap: 16px;
    padding: 16px 20px;
    margin-bottom: 24px;
  }

  .sr-coupon-bar::after {
    position: absolute;
  }

  .sr-coupon-bar::before {
    position: absolute;
  }

  .sr-coupon-code {
    padding-right: 16px;
    padding-bottom: 0;
    border-right: 1px solid var(--line-light);
    border-bottom: none;
  }

  .sr-coupon-code strong {
    font-size: 32px;
  }

  .sr-coupon-desc {
    font-size: 13.5px;
  }

  /* TAB BAR */
  .sr-tab-bar {
    width: fit-content;
    flex-direction: row;
    border-radius: 999px;
    padding: 7px;
  }

  .sr-tab {
    flex: none;
    min-width: 200px;
    text-align: center;
    padding: 13px 20px;
    font-size: 10px;
    letter-spacing: 0.09em;
  }

  /* SWITCHER HEADER */
  .sr-switcher-header {
    max-width: 980px;
    margin-bottom: 22px;
  }

  /* PANEL INTRO + DARK BLOCKS */
  .sr-panel-intro,
  .sr-deliverable-block.dark,
  .sr-panel-cta-block,
  .sr-brief-pricing {
    padding: 26px 28px;
    border-radius: 18px;
  }

  .sr-panel-intro h3 {
    font-size: clamp(24px, 3vw, 38px);
  }

  .sr-panel-intro p,
  .sr-deliverable-block.dark p,
  .sr-panel-cta-block p {
    font-size: 15px;
  }

  /* MONITORING GRID: 2-col */
  .sr-status-grid,
  .sr-monitoring-grid,
  .sr-brief-pricing-grid {
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }

  .sr-monitoring-grid {
    gap: 24px;
  }

  /* MONITORING HEADER */
  .sr-monitoring-header h4 {
    font-size: clamp(32px, 3.4vw, 54px);
  }

  .sr-monitoring-header h4::after {
    display: inline;
    margin-top: 0;
  }

  /* ALERT TABLE */
  .sr-table-head,
  .sr-table-row {
    grid-template-columns: 1fr 1.4fr 1.7fr 0.85fr;
    gap: 10px;
    padding: 11px 14px;
    font-size: 13px;
  }

  .sr-table-head span:last-child,
  .sr-table-row span:last-child {
    display: block;
  }

  /* ACTION CALENDAR */
  .sr-calendar-head,
  .sr-calendar-row {
    grid-template-columns: 140px 100px 1fr 1.2fr;
    gap: 12px;
    padding: 11px 16px;
    font-size: 13px;
  }

  .sr-calendar-head span:last-child,
  .sr-calendar-row span:last-child {
    display: block;
  }

  /* METRICS: 4-col */
  .sr-metrics-row {
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }

  /* CONTRACT CARDS */
  .sr-contract-cards {
    gap: 14px;
  }

  .sr-contract-card {
    padding: 22px 26px;
    border-radius: 16px;
  }

  .sr-contract-card h5 {
    font-size: 22px;
  }

  /* CONTRACT META: 4-col */
  .sr-contract-meta {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }

  /* CONTRACT OPTIONS / SCENARIO: 3-col */
  .sr-contract-options,
  .sr-scenario-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  /* CLAUSE COMPARE: 2-col */
  .sr-clause-compare {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  /* PLAYBOOK */
  .sr-playbook-row {
    grid-template-columns: 80px 1fr;
    gap: 14px;
    padding: 14px 0;
  }

  /* QUARTERLY: 4-col */
  .sr-quarterly-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }

  /* BRIEF */
  .sr-brief-header {
    flex-direction: row;
    gap: 14px;
  }

  .sr-brief-pricing .btn,
  .sr-brief-pricing a.btn {
    width: auto;
    min-width: 280px;
    margin-top: 22px;
  }

  .sr-brief-plan {
    padding: 16px;
  }

  .sr-brief-price strong {
    font-size: 26px;
  }

  /* SETUP PRICING: 3-col */
  .sr-setup-pricing-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }

  .sr-setup-pricing-head {
    text-align: center;
    margin-bottom: 24px;
  }

  .sr-setup-price-card {
    padding: 24px;
    border-radius: 24px;
  }

  .sr-setup-price {
    font-size: clamp(52px, 5vw, 74px);
  }

  .sr-setup-range {
    font-size: clamp(24px, 2vw, 34px);
    margin-bottom: 20px;
  }

  /* SETUP / LANDING PRICING PREVIEW */
  .sr-setup-pricing-preview {
    padding: 30px;
    border-radius: 30px;
    margin-top: 28px;
  }

  .sr-landing-pricing-preview {
    padding: 30px;
    border-radius: 30px;
    margin-top: 34px;
  }

  .sr-landing-pricing-preview .sr-brief-pricing-grid {
    grid-template-columns: 1fr 1fr;
  }

  .sr-landing-pricing-preview .sr-brief-plan,
  .sr-landing-pricing-preview .sr-brief-plan-featured,
  .sr-setup-price-card {
    padding: 22px;
  }

  .sr-landing-pricing-preview .btn,
  .sr-landing-pricing-preview a.btn {
    width: auto;
    min-width: 0;
  }

  /* COUPON PILL */
  .sr-coupon-pill {
    flex-wrap: nowrap;
    border-radius: 999px;
    padding: 8px 14px 8px 8px;
    font-size: 12px;
  }

  /* UPGRADE HINT */
  .sr-upgrade-hint {
    padding: 22px;
    border-radius: 16px;
  }

  /* FINAL CTA */
  .sr-final-cta {
    padding-top: 80px;
    padding-bottom: 68px;
  }

  .sr-final-cta h2 {
    font-size: clamp(36px, 4.5vw, 58px);
    letter-spacing: -0.065em;
  }

  .sr-final-cta .btn,
  .sr-final-cta a.btn {
    width: auto;
    margin-top: 30px;
    min-height: 40px;
  }

  .sr-final-inner {
    width: min(860px, calc(100% - 40px));
  }

  .sr-final-note {
    max-width: 580px;
    font-size: 13px;
    margin-top: 18px;
  }

  /* FOOTER */
  .footer {
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .footer .container {
    flex-direction: row;
    gap: 16px;
    align-items: flex-start;
    justify-content: space-between;
  }

  .footer-links {
    gap: 14px;
  }

  .footer-links a {
    font-size: 13px;
  }

  /* DELIVERABLE BLOCK */
  .sr-deliverable-block {
    padding: 20px 22px;
    border-radius: 16px;
  }

  /* PANEL CTA */
  .sr-panel-cta-block .btn,
  .sr-panel-cta-block a.btn {
    width: auto;
    min-width: 240px;
  }

  .sr-panel-cta-block h3 {
    font-size: clamp(24px, 3vw, 38px);
  }

  .sr-panel-cta-note {
    font-size: 12.5px;
  }
}

/* =========================================================
   SAMPLE REPORT PAGE — MOBILE FINAL REFINEMENTS
   Add at the very end of mobile.css
   ========================================================= */

@media screen and (max-width: 768px) {

  /* -----------------------------
     SAMPLE NAV — cleaner mobile
  ----------------------------- */

  body.sr-page .nav.nav-sample {
    height: 58px !important;
    min-height: 58px !important;
    padding: 0 14px !important;
    display: flex !important;
    justify-content: center !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
  }

  body.sr-page .nav-sample .brand {
    gap: 7px !important;
    font-size: 10px !important;
    letter-spacing: -.02em !important;
    max-width: 100% !important;
  }

  body.sr-page .nav-sample .brand-mark {
    width: 18px !important;
    height: 18px !important;
  }

  body.sr-page .nav-sample-cta,
  body.sr-page .nav-sample .mobile-menu-toggle {
    display: none !important;
  }


  /* -----------------------------
     SAMPLE HERO — better structure
  ----------------------------- */

  body.sr-page .sr-hero {
    min-height: auto !important;
    padding: 92px 14px 30px !important;
  }

  body.sr-page .sr-hero-inner {
    width: 100% !important;
    max-width: 390px !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  body.sr-page .sr-badge,
  body.sr-page .sr-eyebrow {
    font-size: 8px !important;
    padding: 6px 9px !important;
    letter-spacing: .12em !important;
    margin-bottom: 18px !important;
  }

  body.sr-page .sr-hero h1 {
    max-width: 360px !important;
    margin: 0 auto !important;
    font-size: clamp(29px, 8.4vw, 38px) !important;
    line-height: .94 !important;
    letter-spacing: -.065em !important;
  }

  body.sr-page .sr-hero-sub {
    max-width: 330px !important;
    margin: 16px auto 0 !important;
    font-size: 12.5px !important;
    line-height: 1.45 !important;
  }

  body.sr-page .sr-hero-actions {
    width: 100% !important;
    max-width: 390px !important;
    margin: 22px auto 0 !important;
    display: grid !important;
    gap: 9px !important;
  }

  body.sr-page .sr-hero-actions .btn {
    width: 100% !important;
    min-height: 44px !important;
    padding: 11px 16px !important;
    font-size: 11.5px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
  }

  body.sr-page .sr-hero-proof-line {
    max-width: 320px !important;
    margin: 18px auto 0 !important;
    font-size: 7.5px !important;
    line-height: 1.6 !important;
    letter-spacing: .09em !important;
  }


  /* -----------------------------
     SAMPLE PAGE CAROUSEL TRACKS
     full card + clickable arrows from nav.js
  ----------------------------- */

  body.sr-page .sr-proof-cards,
  body.sr-page .sr-bridge-items,
  body.sr-page .sr-brief-pricing-grid,
  body.sr-page .sr-setup-pricing-grid {
    display: grid !important;
    grid-template-columns: 100% !important;
    grid-auto-columns: 100% !important;
    grid-auto-flow: column !important;

    width: 100% !important;
    max-width: 100% !important;

    gap: 12px !important;
    overflow-x: auto !important;
    overflow-y: visible !important;

    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;

    padding: 2px 0 14px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;

    scrollbar-width: none;
  }

  body.sr-page .sr-proof-cards::-webkit-scrollbar,
  body.sr-page .sr-bridge-items::-webkit-scrollbar,
  body.sr-page .sr-brief-pricing-grid::-webkit-scrollbar,
  body.sr-page .sr-setup-pricing-grid::-webkit-scrollbar {
    display: none;
  }

  body.sr-page .sr-proof-card,
  body.sr-page .sr-bridge-item,
  body.sr-page .sr-brief-plan,
  body.sr-page .sr-setup-price-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
  }


  /* -----------------------------
     Carousel arrow shell
  ----------------------------- */

  body.sr-page .mobile-carousel-shell {
    position: relative !important;
    width: 100% !important;
  }

  body.sr-page .mobile-carousel-arrow {
    position: absolute !important;
    top: 50% !important;
    z-index: 30 !important;

    width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 999px !important;
    border: 1px solid rgba(28,28,28,.12) !important;
    background: rgba(255,255,255,.86) !important;
    color: rgba(28,28,28,.76) !important;

    font-size: 24px !important;
    line-height: 1 !important;
    font-weight: 300 !important;

    box-shadow: 0 12px 30px rgba(0,0,0,.10) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;

    transform: translateY(-50%) !important;
    transition: opacity .2s ease, transform .2s ease, background .2s ease !important;
  }

  body.sr-page .mobile-carousel-prev {
    left: -8px !important;
  }

  body.sr-page .mobile-carousel-next {
    right: -8px !important;
  }

  body.sr-page .mobile-carousel-arrow.is-disabled {
    opacity: .22 !important;
    pointer-events: none !important;
  }

  body.sr-page .mobile-carousel-arrow:active {
    transform: translateY(-50%) scale(.94) !important;
  }

  body.sr-page .sr-brief-pricing.dark .mobile-carousel-arrow,
  body.sr-page .sr-landing-pricing-preview .mobile-carousel-arrow {
    border-color: rgba(255,255,255,.13) !important;
    background: rgba(255,255,255,.10) !important;
    color: rgba(255,255,255,.86) !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.24) !important;
  }


  /* -----------------------------
     IMAGE 2 — Proof cards tighter
  ----------------------------- */

  body.sr-page .sr-proof {
    padding-top: 34px !important;
    padding-bottom: 34px !important;
  }

  body.sr-page .sr-proof-header {
    margin-bottom: 18px !important;
  }

  body.sr-page .sr-proof-header p {
    font-size: 12px !important;
    line-height: 1.45 !important;
  }

  body.sr-page .sr-proof-card {
    padding: 18px 20px !important;
    border-radius: 17px !important;
  }

  body.sr-page .sr-proof-amount {
    font-size: 13px !important;
    line-height: 1.2 !important;
  }

  body.sr-page .sr-proof-card blockquote {
    margin-top: 12px !important;
    padding-left: 10px !important;
    font-size: 12.5px !important;
    line-height: 1.45 !important;
  }

  body.sr-page .sr-proof-meta {
    margin-top: 14px !important;
    padding-top: 10px !important;
    font-size: 7px !important;
    letter-spacing: .11em !important;
  }


  /* -----------------------------
     IMAGE 3 — You'll see cards tighter
  ----------------------------- */

  body.sr-page .sr-bridge {
    padding-top: 34px !important;
    padding-bottom: 34px !important;
  }

  body.sr-page .sr-bridge h2 {
    font-size: clamp(24px, 7.2vw, 34px) !important;
    line-height: .98 !important;
    margin-bottom: 18px !important;
  }

  body.sr-page .sr-bridge-item {
    padding: 18px 20px !important;
    border-radius: 17px !important;
  }

  body.sr-page .sr-bridge-label {
    font-size: 7px !important;
    letter-spacing: .12em !important;
  }

  body.sr-page .sr-bridge-item strong {
    margin-top: 8px !important;
    font-size: 14px !important;
    line-height: 1.15 !important;
  }

  body.sr-page .sr-bridge-item p {
    margin-top: 9px !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
  }


  /* -----------------------------
     IMAGE 4 — Pricing carousel proportions
  ----------------------------- */

  body.sr-page .sr-brief-pricing,
  body.sr-page .sr-setup-pricing-preview {
    padding: 20px 16px !important;
    border-radius: 20px !important;
  }

  body.sr-page .sr-brief-pricing-label,
  body.sr-page .sr-setup-pricing-head .sr-eyebrow {
    font-size: 8px !important;
    letter-spacing: .12em !important;
  }

  body.sr-page .sr-brief-pricing-sub,
  body.sr-page .sr-setup-pricing-head p {
    font-size: 11.5px !important;
    line-height: 1.45 !important;
    margin-top: 8px !important;
  }

  body.sr-page .sr-brief-plan,
  body.sr-page .sr-setup-price-card {
    padding: 18px 18px !important;
    border-radius: 18px !important;
  }

  body.sr-page .sr-brief-plan > strong,
  body.sr-page .sr-setup-range {
    font-size: 17px !important;
    line-height: 1.1 !important;
  }

  body.sr-page .sr-first-payment {
    margin-top: 18px !important;
    padding-top: 16px !important;
  }

  body.sr-page .sr-first-payment div strong,
  body.sr-page .sr-setup-price {
    font-size: 36px !important;
    line-height: .92 !important;
  }

  body.sr-page .sr-first-payment p,
  body.sr-page .sr-setup-price-card p {
    font-size: 10.5px !important;
    line-height: 1.45 !important;
  }

  body.sr-page .sr-after-payment {
    padding: 14px !important;
    border-radius: 15px !important;
  }

  body.sr-page .sr-after-payment strong {
    font-size: 20px !important;
  }


  /* -----------------------------
     IMAGE 5 — Final CTA proportions
  ----------------------------- */

  body.sr-page .sr-final-cta {
    padding: 42px 18px 34px !important;
  }

  body.sr-page .sr-final-inner {
    max-width: 360px !important;
    margin: 0 auto !important;
  }

  body.sr-page .sr-coupon-pill {
    max-width: 300px !important;
    margin: 0 auto 22px !important;
    padding: 9px 14px !important;
    border-radius: 999px !important;
    font-size: 9.5px !important;
    line-height: 1.25 !important;
  }

  body.sr-page .sr-coupon-pill span {
    font-size: 7.5px !important;
  }

  body.sr-page .sr-final-cta h2 {
    max-width: 330px !important;
    margin: 0 auto !important;
    font-size: clamp(31px, 9vw, 43px) !important;
    line-height: .92 !important;
    letter-spacing: -.075em !important;
  }

  body.sr-page .sr-final-cta p {
    max-width: 310px !important;
    margin: 20px auto 0 !important;
    font-size: 12.5px !important;
    line-height: 1.45 !important;
  }

  body.sr-page .sr-final-cta .btn {
    width: 100% !important;
    max-width: 320px !important;
    min-height: 46px !important;
    margin: 24px auto 0 !important;
    padding: 12px 16px !important;
    font-size: 11.5px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
  }

  body.sr-page .sr-final-note {
    margin-top: 14px !important;
    font-size: 9.5px !important;
    line-height: 1.45 !important;
  }


  /* -----------------------------
     Footer on sample page
  ----------------------------- */

  body.sr-page .footer {
    padding: 22px 0 !important;
  }

  body.sr-page .footer .container {
    display: grid !important;
    gap: 14px !important;
    text-align: center !important;
  }

  body.sr-page .footer strong {
    font-size: 11px !important;
  }

  body.sr-page .footer p {
    margin: 3px auto 0 !important;
    font-size: 9.5px !important;
    line-height: 1.35 !important;
  }

  body.sr-page .footer-links {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px 14px !important;
    justify-items: center !important;
  }

  body.sr-page .footer-links a {
    font-size: 9px !important;
    line-height: 1.2 !important;
  }

  body.sr-page .footer-links a:last-child {
    grid-column: 1 / -1 !important;
  }
}

/* =========================================================
   SAMPLE REPORT PAGE — FOOTER MOBILE FIX
   Paste at the very end of mobile.css
   ========================================================= */

@media screen and (max-width: 768px) {

  body.sr-page .footer {
    padding: 28px 0 30px !important;
    border-top: 1px solid rgba(255, 255, 255, .10) !important;
  }

  body.sr-page .footer .container {
    width: 100% !important;
    max-width: 360px !important;
    padding-left: 22px !important;
    padding-right: 22px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 18px !important;
    text-align: center !important;
  }

  body.sr-page .footer strong {
    display: block !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    color: rgba(255, 255, 255, .86) !important;
  }

  body.sr-page .footer p {
    max-width: 260px !important;
    margin: 5px auto 0 !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
    color: rgba(255, 255, 255, .52) !important;
  }

  body.sr-page .footer-links {
    width: 100% !important;
    max-width: 280px !important;

    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 11px 18px !important;

    align-items: center !important;
    justify-items: center !important;
  }

  body.sr-page .footer-links a {
    font-size: 10.5px !important;
    line-height: 1.2 !important;
    color: rgba(255, 255, 255, .72) !important;
    text-decoration: underline !important;
    text-decoration-color: rgba(255, 255, 255, .24) !important;
    text-underline-offset: 4px !important;
  }

  body.sr-page .footer-links a:last-child {
    grid-column: 1 / -1 !important;
    margin-top: 2px !important;
    font-size: 10.5px !important;
    color: rgba(255, 255, 255, .64) !important;
  }
}

/* =========================================================
   INDEX PAGE — SAMPLE REPORT FORM INPUT TEXT FIX
   Paste at the very end of mobile.css
   ========================================================= */

@media screen and (max-width: 768px) {

  .sample-report-section .form-field input,
  .sample-report-section .form-field textarea,
  .sample-report-section .form-field select,
  .sample-report-form input,
  .sample-report-form textarea,
  .sample-report-form select {
    color: #101010 !important;
    background: #ffffff !important;
    -webkit-text-fill-color: #101010 !important;
    caret-color: #101010 !important;
  }

  .sample-report-section .form-field input::placeholder,
  .sample-report-section .form-field textarea::placeholder,
  .sample-report-form input::placeholder,
  .sample-report-form textarea::placeholder {
    color: rgba(16, 16, 16, .38) !important;
    -webkit-text-fill-color: rgba(16, 16, 16, .38) !important;
  }

  .sample-report-section .form-field input:focus,
  .sample-report-section .form-field textarea:focus,
  .sample-report-section .form-field select:focus,
  .sample-report-form input:focus,
  .sample-report-form textarea:focus,
  .sample-report-form select:focus {
    color: #101010 !important;
    background: #ffffff !important;
    outline: none !important;
    border-color: rgba(255, 255, 255, .42) !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .10) !important;
  }
}

/* =========================================================
   SECONDARY PAGES — MOBILE FIXES
   Paste at the END of styles-mobile.css
   Applies to legal / policy / terms / success pages
   ========================================================= */

@media screen and (max-width: 768px) {

  /* =========================================================
     GLOBAL NAV — SAME PATTERN AS MAIN SITE
     ========================================================= */

  .nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;

    height: calc(64px + env(safe-area-inset-top, 0px));
    min-height: 64px;

    padding: env(safe-area-inset-top, 0px) 20px 0;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    background: #101010;
    border-bottom: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 1px 0 rgba(255,255,255,.08);

    backdrop-filter: none;
    -webkit-backdrop-filter: none;

    transform: translateY(0);
    transition: transform .35s ease;
  }

  .nav.nav-hidden {
    transform: translateY(-100%);
  }

  .brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
  }

  .brand-mark {
    width: 34px;
    height: 34px;
    display: block;
    object-fit: contain;
    flex-shrink: 0;
  }

  .brand span {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: 1;
    white-space: nowrap;
  }

  .nav-desktop-cta,
  .nav > .btn.nav-desktop-cta {
    display: none !important;
  }

  .mobile-menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;

    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;

    border: none;
    background: transparent;
    cursor: pointer;
    padding: 8px;
    flex-shrink: 0;

    -webkit-tap-highlight-color: transparent;
  }

  .mobile-menu-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform .25s ease, opacity .2s ease;
    max-width: none;
  }

  .nav.nav-open .mobile-menu-toggle span:nth-child(1) {
    transform: translateY(3.5px) rotate(45deg);
  }

  .nav.nav-open .mobile-menu-toggle span:nth-child(2) {
    transform: translateY(-3.5px) rotate(-45deg);
  }

  .nav-links {
    position: fixed;
    top: calc(64px + env(safe-area-inset-top, 0px));
    left: 0;
    right: 0;
    bottom: 0;

    height: calc(100dvh - 64px - env(safe-area-inset-top, 0px));
    padding: 32px 24px;

    display: none;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;

    background: #101010;
    overflow-y: auto;
    z-index: 9998;
  }

  .nav.nav-open .nav-links {
    display: flex;
  }

  .nav-links a {
    width: 100%;
    min-height: 52px;
    padding: 16px 0;

    display: flex;
    align-items: center;

    border-bottom: 1px solid rgba(255,255,255,.06);
    color: rgba(255,255,255,.88);

    font-family: "IBM Plex Mono", monospace;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1.2;
  }

  .nav-links a:hover {
    color: #fff;
  }

  body.menu-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
  }


  /* =========================================================
     SECONDARY PAGE FOUNDATION
     ========================================================= */

  body.page {
    overflow-x: hidden;
  }

  .page {
    overflow-x: hidden;
  }

  .container {
    width: 100%;
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }

  .section,
  .section.light,
  .section.dark,
  .section.light.legal-section,
  .section.light:has(.legal-layout) {
    padding-top: 48px;
    padding-bottom: 56px;
    overflow-x: visible;
  }

  h1,
  h2,
  h3,
  .section-title {
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
  }


  /* =========================================================
     PAGE HERO — LEGAL / POLICY / TERMS
     ========================================================= */

  .page-hero {
    padding-top: calc(64px + env(safe-area-inset-top, 0px) + 44px);
    padding-bottom: 42px;
    min-height: auto;
    overflow: hidden;
  }

  .page-hero .badge,
  .page-hero .eyebrow {
    margin-bottom: 16px;
    font-size: 9px;
    padding: 7px 10px;
    letter-spacing: .08em;
  }

  .page-hero h1,
  .page-hero .section-title {
    max-width: 100%;
    font-size: clamp(34px, 10vw, 52px);
    line-height: .98;
    letter-spacing: -.055em;
  }

  .page-hero p {
    max-width: 100%;
    margin-top: 18px;
    font-size: 16px;
    line-height: 1.5;
  }


  /* =========================================================
     LEGAL LAYOUT
     ========================================================= */

  .legal-layout {
    display: flex;
    flex-direction: column;
    gap: 22px;
    grid-template-columns: unset;
  }

  .side-note {
    position: relative;
    top: auto;
    width: 100%;
    padding: 20px;
    border-radius: 20px;
  }

  .side-note .mono {
    font-size: 9px;
    letter-spacing: .08em;
    margin-bottom: 10px;
  }

  .side-note p {
    max-width: 100%;
    font-size: 14px;
    line-height: 1.55;
  }

  .legal-card {
    width: 100%;
    padding: 22px 20px;
    border-radius: 20px;
  }

  .legal-card + .legal-card {
    margin-top: 14px;
  }

  .legal-card h2,
  .legal-card h3 {
    font-size: clamp(22px, 6.5vw, 32px);
    line-height: 1.08;
    letter-spacing: -.04em;
  }

  .legal-card p {
    max-width: 100%;
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.65;
  }

  .legal-card ul,
  .legal-card ol {
    margin-top: 14px;
    padding-left: 18px;
  }

  .legal-card li {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 9px;
  }

  .legal-card strong {
    font-weight: 700;
  }


  /* =========================================================
     CHECKLIST / NOTICE CARDS
     ========================================================= */

  .checklist {
    gap: 10px;
    margin-top: 20px;
  }

  .check {
    gap: 9px;
    font-size: 14px;
    line-height: 1.5;
  }

  .notice-card {
    margin-top: 26px;
    padding: 22px 20px;
    border-radius: 20px;
  }

  .notice-card p {
    max-width: 100%;
    font-size: 14px;
    line-height: 1.55;
  }

  .placeholder {
    font-size: 9px;
    line-height: 1.2;
    padding: 6px 8px;
    white-space: normal;
  }


  /* =========================================================
     SUCCESS PAGES
     ========================================================= */

  .success-box {
    max-width: 100%;
    text-align: center;
    padding-top: 20px;
  }

  .success-box h1 {
    font-size: clamp(40px, 12vw, 62px);
    line-height: .96;
    letter-spacing: -.055em;
  }

  .success-box p {
    max-width: 100%;
    margin-top: 18px;
    font-size: 16px;
    line-height: 1.55;
  }

  .success-box .btn,
  .notice-card .btn {
    width: 100%;
    justify-content: center;
    margin-top: 20px;
    min-height: 48px;
    white-space: normal;
    text-align: center;
  }


  /* =========================================================
     SECONDARY PAGE BUTTONS
     ========================================================= */

  .btn,
  a.btn {
    min-height: 48px;
    white-space: normal;
    text-align: center;
    line-height: 1.2;
    -webkit-tap-highlight-color: transparent;
  }

  .page-hero .btn,
  .legal-card .btn {
    width: 100%;
    justify-content: center;
  }


  /* =========================================================
     FOOTER — SECONDARY PAGES
     ========================================================= */

  .footer {
    padding: 28px 0;
  }

  .footer .container,
  .footer__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }

  .footer-links,
  .footer__links {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .footer a,
  .footer-links a,
  .footer__links a {
    min-height: 32px;
    font-size: 13px;
    line-height: 1.35;
  }
}

/* =====================================================
   RENEWAL OPS DESK — STYLES-MOBILE.CSS — PRIVATE-SCAN
   Mobile-first override system.
   Segue o padrão do mobile.css da página principal.
   Aplica apenas a página /private-scan via BEM classes.
   ===================================================== */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
video,
svg {
  max-width: 100%;
  height: auto;
}

/* =====================================================
   BREAKPOINT PRINCIPAL — até 768px
   ===================================================== */
@media (max-width: 768px) {

  /* ─── LAYOUT GLOBAL ─── */

  .section--hero,
  .section--trust,
  .section--dark,
  .section--light,
  .section--paper,
  .section--cta {
    padding-top: 52px;
    padding-bottom: 52px;
  }

  .container {
    width: calc(100% - 32px);
    margin: 0 auto;
  }

  /* ─── NAV ─── */

  .nav {
    height: calc(60px + env(safe-area-inset-top, 0px));
    min-height: 60px;
    padding-top: env(safe-area-inset-top, 0px);
    padding-left: 16px;
    padding-right: 16px;
  }

  .brand {
    font-size: 14px;
    gap: 8px;
  }

  .brand-mark {
    width: 28px;
    height: 28px;
  }

  .nav-desktop-cta {
    display: none;
  }

  /* ─── HERO ─── */

  .section--hero {
    padding-top: calc(60px + env(safe-area-inset-top, 0px) + 32px);
    padding-bottom: 40px;
  }

  .hero__layout {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    gap: 32px;
    align-items: stretch;
  }

  .hero__copy {
    order: 1;
    width: 100%;
    min-width: 0;
  }

  .hero__preview {
    order: 2;
    width: 100%;
    min-width: 0;
  }

  .hero__headline {
    font-size: clamp(28px, 8.5vw, 38px);
    line-height: 1.06;
    letter-spacing: -0.03em;
    margin-bottom: 16px;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  .hero__sub {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 24px;
    max-width: 100%;
  }

  .hero__sub strong {
    font-weight: 700;
  }

  /* ─── BOTÕES ─── */

  .btn,
  .btn--primary,
  .btn-primary {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 52px;
    padding: 14px 18px;
    font-size: 14px;
    white-space: normal;
    text-align: center;
    box-sizing: border-box;
  }

  .hero__disclaimer {
    margin-top: 14px;
    font-size: 9.5px;
    line-height: 1.5;
    letter-spacing: 0.06em;
  }

  /* ─── PREVIEW CARD ─── */

  .preview__card {
    width: 100%;
    max-width: 100%;
    border-radius: 16px;
    box-sizing: border-box;
  }

  .preview__header {
    padding: 14px 16px 12px;
  }

  .preview__title {
    font-size: 12px;
    letter-spacing: 0.02em;
  }

  .preview__rows {
    padding: 0 16px;
  }

  .preview__row {
    padding: 14px 0;
    gap: 10px;
    flex-wrap: nowrap;
    align-items: center;
  }

  .preview__label {
    font-size: 13px;
    line-height: 1.4;
    flex: 1;
    min-width: 0;
  }

  .preview__value {
    font-size: 13px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .preview__value--urgent {
    font-size: 18px;
    letter-spacing: -0.02em;
  }

  .preview__finding {
    padding: 16px;
    border-radius: 0 0 14px 14px;
  }

  .preview__finding-label {
    font-size: 9px;
    letter-spacing: 0.14em;
    margin-bottom: 8px;
  }

  .preview__finding-text {
    font-size: 13.5px;
    line-height: 1.5;
    max-width: 100%;
  }

  /* ─── SECTION PILLS ─── */

  .section-pill,
  .section-pill--dark {
    font-size: 9px;
    padding: 5px 10px;
    letter-spacing: 0.08em;
    margin-bottom: 14px;
  }

  /* ─── HEADINGS COMPARTILHADOS ─── */

  .section__headline,
  .section__headline--light,
  .section__headline--centered {
    font-size: clamp(24px, 7.5vw, 36px);
    line-height: 1.1;
    margin-bottom: 14px;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  .section__sub,
  .section__sub--light {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 32px;
    max-width: 100%;
  }

  /* ─── TRUST / CONFIDENCIALIDADE ─── */

  .trust__layout {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    gap: 32px;
  }

  .trust__copy {
    order: 1;
    width: 100%;
    min-width: 0;
  }

  .trust__right {
    order: 2;
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .trust__headline {
    font-size: clamp(24px, 7.5vw, 36px);
    line-height: 1.1;
    margin-bottom: 14px;
    max-width: 100%;
    overflow-wrap: break-word;
  }

  .trust__body {
    font-size: 14.5px;
    line-height: 1.65;
    margin-bottom: 16px;
    max-width: 100%;
  }

  .trust__list {
    margin-bottom: 16px;
  }

  .trust__list li {
    font-size: 14px;
    line-height: 1.6;
    padding: 4px 0;
  }

  .trust__note {
    font-size: 9.5px;
    letter-spacing: 0.06em;
    line-height: 1.5;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  .trust__finding-card {
    padding: 20px;
    border-radius: 16px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .trust__finding-label {
    font-size: 9px;
    letter-spacing: 0.14em;
    margin-bottom: 10px;
  }

  .trust__finding-card p {
    font-size: 13.5px;
    line-height: 1.6;
    max-width: 100%;
  }

  .trust__right .btn,
  .trust__right a.btn {
    max-width: 100%;
    width: 100%;
    min-width: 0;
  }

  .trust__link {
    font-size: 13px;
  }

  /* ─── SCOPE GRID — 3 colunas → 1 coluna ─── */

  .scope__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .scope__card {
    padding: 18px;
    border-radius: 14px;
  }

  .scope__num {
    font-size: 10px;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
  }

  .scope__title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 8px;
  }

  .scope__body {
    font-size: 13.5px;
    line-height: 1.6;
  }

  /* ─── DELIVERABLE ─── */

  .deliverable__layout {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    gap: 28px;
  }

  .deliverable__copy {
    order: 1;
    width: 100%;
    min-width: 0;
  }

  .deliverable__items {
    order: 2;
    border-radius: 14px;
    width: 100%;
  }

  .deliverable__headline {
    font-size: clamp(22px, 7vw, 34px);
    line-height: 1.1;
    margin-bottom: 10px;
    max-width: 100%;
    overflow-wrap: break-word;
  }

  .deliverable__body {
    font-size: 14px;
    line-height: 1.65;
    max-width: 100%;
  }

  .deliverable__item {
    padding: 14px 16px;
    gap: 12px;
    align-items: center;
    flex-wrap: nowrap;
  }

  .deliverable__badge {
    font-size: 8.5px;
    letter-spacing: 0.1em;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .deliverable__item-name {
    font-size: 14px;
    line-height: 1.4;
    min-width: 0;
    flex: 1;
  }

  /* ─── WHY THIS MATTERS ─── */

  .why__inner {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
    text-align: center;
  }

  .why__body {
    font-size: 14.5px;
    line-height: 1.65;
    max-width: 100%;
  }

  .why__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
  }

  .why__tag {
    font-size: 9.5px;
    padding: 7px 12px;
    letter-spacing: 0.08em;
    border-radius: 999px;
  }

  /* ─── CTA / ENVIO SEGURO ─── */

  .cta__box {
    padding: 28px 20px;
    border-radius: 20px;
    width: 100%;
    box-sizing: border-box;
  }

  .cta__headline {
    font-size: clamp(24px, 7.5vw, 36px);
    line-height: 1.1;
    margin-bottom: 14px;
    text-align: center;
    overflow-wrap: break-word;
  }

  .cta__body {
    font-size: 14.5px;
    line-height: 1.65;
    text-align: center;
    max-width: 100%;
    margin-bottom: 24px;
  }

  .cta__disclaimer {
    margin-top: 14px;
    font-size: 9.5px;
    letter-spacing: 0.06em;
    line-height: 1.5;
    text-align: center;
  }

  /* ─── FOOTER ─── */

  .footer {
    padding: 32px 0 env(safe-area-inset-bottom, 0px);
  }

  .footer__inner {
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
  }

  .footer__brand {
    width: 100%;
  }

  .footer__name {
    font-size: 12px;
  }

  .footer__tagline {
    font-size: 12px;
  }

  .footer__links {
    flex-wrap: wrap;
    gap: 10px 16px;
  }

  .footer__links a {
    font-size: 11.5px;
  }
}

/* =====================================================
   BREAKPOINT PEQUENO — até 480px
   ===================================================== */
@media (max-width: 480px) {

  .section--hero,
  .section--trust,
  .section--dark,
  .section--light,
  .section--paper,
  .section--cta {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .section--hero {
    padding-top: calc(60px + env(safe-area-inset-top, 0px) + 24px);
    padding-bottom: 32px;
  }

  .hero__layout {
    gap: 24px;
  }

  .hero__headline {
    font-size: clamp(26px, 9vw, 34px);
  }

  .hero__sub {
    font-size: 14px;
  }

  .scope__card {
    padding: 16px;
  }

  .trust__finding-card {
    padding: 16px;
  }

  .cta__box {
    padding: 24px 16px;
  }

  .preview__finding {
    padding: 14px;
  }

  .why__tag {
    font-size: 9px;
    padding: 6px 10px;
  }
}