/* =====================================================================
   MR START — auth.css · páginas públicas (login, cadastro, planos)
   ===================================================================== */
body.auth-page{
  min-height:100vh; display:flex; flex-direction:column;
  background:transparent;            /* o fundo é a camada .mr-bg */
}
.auth-topbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:22px clamp(16px, 4vw, 48px);
}
.auth-topbar .brand{ display:flex; align-items:center; }
.auth-topbar .brand img.brand-logo{ width:100%; max-width:158px; height:auto; }
@media (max-width:560px){ .auth-topbar .brand img.brand-logo{ max-width:124px; } }

.auth-shell{
  flex:1; display:flex; align-items:center; justify-content:center;
  padding:24px 16px 64px;
}
/* Sem moldura: o formulário assenta direto no fundo, sem caixa em volta.
   A classe continua existindo porque é ela que dá largura e alinhamento ao
   bloco (e vale para login e cadastro) — o que saiu foi só a casca visual:
   fundo, blur, borda e sombra. */
.auth-card{
  width:100%; max-width:420px;
  animation:fadeIn 0.4s ease;
}
/* Título e subtítulo centralizados: sem a caixa em volta, texto encostado à
   esquerda brigava com o logo centralizado logo acima. */
.auth-card h1{
  font-family:var(--font-display); font-size:26px; font-weight:800;
  letter-spacing:-0.02em; margin-bottom:6px; text-align:center;
}
.auth-card .auth-sub{ font-size:13px; color:var(--text-dim); margin-bottom:24px; text-align:center; }
.auth-foot{ margin-top:20px; text-align:center; font-size:12.5px; color:var(--text-dim); }
.auth-foot a{ color:var(--accent); font-weight:600; }
.auth-foot a:hover{ text-decoration:underline; }

/* --- Layout de duas colunas: vídeo à esquerda, formulário à direita ---
   O vídeo é o mesmo demoreel da home — quem ainda não entrou já vê do que
   se trata. É decorativo: roda mudo, sem controles, e a <img> do pôster
   fica atrás como o que sobra se ele não rodar. Abaixo de 900px a coluna
   some e a página volta ao card centralizado de sempre (o .webm tem ~6 MB;
   o celular nem chega a baixar — o src só é setado por JS no desktop). */
.auth-split{ flex:1; display:grid; grid-template-columns:1.06fr 1fr; min-width:0; }
.auth-media{
  /* Chanfro da marca (NW + SE), o mesmo corte da placa do logo e dos
     botões — só que numa escala que faça sentido num painel deste tamanho.
     Sem borda: o clip-path corta o contorno, então as duas diagonais
     ficariam sem linha enquanto os lados retos teriam — pela metade fica
     pior que sem nenhuma. */
  --notch-media:clamp(26px, 3.2vw, 44px);
  position:relative; overflow:hidden;
  margin:14px 0 14px 14px;
  clip-path:polygon(
    var(--notch-media) 0, 100% 0,
    100% calc(100% - var(--notch-media)),
    calc(100% - var(--notch-media)) 100%,
    0 100%, 0 var(--notch-media));
  /* O pôster entra como background (e não como <img>): assim, quando a
     coluna some no mobile, o browser nem chega a baixar o arquivo. */
  background:var(--bg-deep) url('../assets/video/demoreel-poster.jpg') center/cover no-repeat;
}
.auth-media-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1;
}
.auth-media.media-off .auth-media-video{ display:none; }
/* Vinheta discreta: assenta o vídeo no escuro da página em vez de deixar
   um retângulo de vídeo cru colado no fundo. */
.auth-media::after{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(120% 100% at 50% 45%, transparent 58%, rgba(3,14,16,0.4) 100%);
}

/* Coluna direita: logo · formulário · link dos planos, empilhados e
   centrados como uma coisa só. */
.auth-side{ display:flex; flex-direction:column; min-width:0; }
.auth-side .auth-shell{ padding:32px clamp(16px,2.6vw,34px) 48px; }
.auth-stack{
  width:100%; max-width:420px;
  display:flex; flex-direction:column; align-items:center;
}
.auth-stack .auth-card{ max-width:none; }
.auth-brand{ display:block; margin-bottom:26px; }
.auth-brand img{ display:block; width:100%; max-width:168px; height:auto; }
@media (max-width:560px){ .auth-brand img{ max-width:134px; } }

@media (max-width:900px){
  .auth-split{ grid-template-columns:1fr; }
  .auth-media{ display:none; }
}

/* =====================================================================
   Página de planos — tabela comparativa
   Linhas = o que o produto entrega · colunas = os três planos. A matriz
   aqui espelha o `min` de cada feature em js/core/plans.js: se o gating
   mudar lá, esta tabela precisa mudar junto.
   ===================================================================== */
/* O width:100% não é decorativo. O body é flex-column e este wrap usa
   `margin:0 auto` para centralizar — e margem automática no eixo
   transversal DESLIGA o stretch do flex, fazendo o item ser medido pelo
   conteúdo. Sem largura explícita ele assume os 800px da tabela e arrasta
   a página inteira para o lado no celular, em vez de a tabela rolar
   sozinha dentro do .cmp-scroll. */
.pricing-wrap{ width:100%; max-width:1080px; margin:0 auto; padding:12px 16px 80px; }
.pricing-head{ text-align:center; margin-bottom:42px; }
.pricing-head p{ color:var(--text-dim); margin-top:16px; font-size:15px; }

.cmp-scroll{ overflow-x:auto; }
.cmp{
  width:100%; min-width:800px;
  border-collapse:separate; border-spacing:0; table-layout:fixed;
}
.cmp col.cmp-c-feat{ width:37%; }
/* O texto do CTA pode quebrar em duas linhas: a coluna é estreita e
   "Criar conta grátis" não cabe numa só. */
.cmp .btn{ white-space:normal; line-height:1.3; }

/* --- Topo e pé: as duas pontas "vendedoras" da coluna ---
   Ficam num <div> dentro da célula porque o clip-path do chanfro precisa
   de uma caixa própria — aplicado direto na célula da tabela ele briga
   com o modelo de bordas. */
/* height:1px dá à célula uma altura *definida* para o height:100% da caixa
   ter contra o que resolver — a célula cresce até o conteúdo de qualquer
   jeito. Sem isso a caixa do FREE para na própria altura e sobra um vão
   transparente até a linha de baixo, porque a coluna do meio é mais alta
   (tem o selo "Recomendado"). */
.cmp thead th,.cmp tfoot td{ padding:0; background:transparent; height:1px; }
.cmp-box{
  height:100%; background:var(--surface);
  border-left:1px solid var(--border);
  display:flex; flex-direction:column; justify-content:flex-end;
}
.cmp tfoot .cmp-box{ justify-content:flex-start; }
.cmp thead .cmp-box{ padding:24px 16px 20px; border-top:1px solid var(--border); }
.cmp tfoot .cmp-box{ padding:22px 16px 24px; border-bottom:1px solid var(--border); }
.cmp thead th:last-child .cmp-box,.cmp tfoot td:last-child .cmp-box{
  border-right:1px solid var(--border);
}
.cmp-corner{ background:transparent !important; }

.cmp-plan-name{
  display:block; font-family:var(--font-display);
  font-size:20px; font-weight:800; letter-spacing:var(--tracking-title);
}
.cmp-price{
  font-family:var(--font-display); font-size:clamp(26px,2.6vw,34px);
  font-weight:800; letter-spacing:-0.03em; line-height:1.05;
}
.cmp-cycle{ font-size:11.5px; color:var(--text-dim); margin:4px 0 16px; }

/* --- Coluna recomendada: a placa amarela da marca, chanfrada NW/SE ---
   Sólida no topo e no pé; no corpo é só a tinta suave. Treze linhas de
   amarelo cheio viram parede — o destaque some justamente por excesso. */
.cmp-box--hl{
  background:var(--accent); color:var(--accent-text); border-left-color:var(--accent);
}
.cmp thead .cmp-box--hl{
  border-top-color:var(--accent);
  clip-path:polygon(var(--notch-lg) 0, 100% 0, 100% 100%, 0 100%, 0 var(--notch-lg));
}
.cmp tfoot .cmp-box--hl{
  border-bottom-color:var(--accent);
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - var(--notch-lg)),
    calc(100% - var(--notch-lg)) 100%, 0 100%);
}
.cmp-box--hl .cmp-cycle{ color:rgba(4,48,53,0.72); }
/* Selo "Recomendado": placa petrol sobre o amarelo — a inversão do
   badge da marca. */
.cmp-tag{
  display:inline-block; margin-bottom:10px;
  background:var(--accent-text); color:var(--accent);
  font-size:9.5px; font-weight:700; letter-spacing:0.2em; text-transform:uppercase;
  padding:5px 13px; clip-path:var(--notch-clip);
}
/* CTA sobre o amarelo: amarelo em amarelo não existe, então inverte. */
.btn-invert{ background:var(--accent-text); border:none; color:var(--accent); border-radius:0;
  clip-path:var(--notch-clip); padding:11px 19px; }
.btn-invert:hover{ background:#065A64; color:var(--accent-2); }

/* --- Corpo: uma linha por entrega --- */
.cmp tbody th[scope="row"]{
  text-align:left; font-weight:400; font-size:13.5px;
  padding:12px 18px; background:var(--surface-2);
  border-top:1px solid var(--border);
}
.cmp tbody td{
  text-align:center; padding:12px 16px;
  background:var(--surface); border-top:1px solid var(--border);
  border-left:1px solid var(--border);
}
.cmp tbody td:last-child{ border-right:1px solid var(--border); }
.cmp tbody td.is-hl{ background:var(--accent-soft); border-left-color:var(--accent-glow); }
.cmp tbody tr:last-child td.is-hl{ border-bottom:1px solid var(--accent-glow); }

/* A label do grupo ocupa só a coluna das entregas. Com colspan=4 ela
   cortaria a placa amarela em cinco pedaços — as células dos planos ficam
   vazias justamente para a coluna seguir inteira por trás. */
.cmp-group td{ padding:0; }
.cmp-group .cmp-group-label{
  text-align:left; padding:22px 18px 8px;
  background:var(--surface-2); border-left:0;
  font-size:10px; font-weight:700; letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase; color:var(--text-dim);
}
/* A marca é desenhada por máscara em currentColor — assim o mesmo ✓ muda
   de cor sozinho na coluna amarela. O texto de verdade ("Incluído") vai
   no .sr-only dentro do span: sem ele, quem usa leitor de tela ouve o
   nome da linha, o nome do plano e depois silêncio. */
.cmp-mark{ display:block; width:20px; height:20px; margin:0 auto; }
.cmp-mark::before{
  content:''; display:block; width:100%; height:100%; background:currentColor;
  -webkit-mask:var(--mark) center/contain no-repeat;
  mask:var(--mark) center/contain no-repeat;
}
.cmp-yes{
  color:var(--success);
  --mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.4 12.3 2.4 2.4 4.8-5.1'/%3E%3C/svg%3E");
}
.cmp-no{
  color:var(--text-faint);
  --mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E");
  width:15px; height:15px;
}
/* No corpo a coluna destacada é tinta suave sobre escuro (não amarelo
   cheio como o topo e o pé) — então a marca vai em amarelo, não em
   petrol. Petrol aqui daria ~1.2:1 e sumiria. */
.cmp td.is-hl .cmp-yes{ color:var(--accent); }

/* Abaixo de 760px a tabela rola na horizontal e a coluna das entregas
   fica grudada — sem ela, rolar para o lado vira adivinhação. */
@media (max-width:760px){
  .cmp tbody th[scope="row"],.cmp .cmp-group-label,.cmp-corner{
    position:sticky; left:0; z-index:2; background:var(--surface-solid);
  }
  .cmp-corner{ background:var(--bg) !important; }
}