/* =========================================================================
JOIN — a página do link de cadastro com código (megaride.app/join/).

🪤 CÓPIA, não `@import`, de onboarding/onboarding.css. O server.js tranca o
caminho /onboarding no preview (PREVIEW_BLOCK_ONBOARDING) e o cadastro de 6
passos pode mudar de folha sem pensar nesta página: puxar a folha de lá faria
o /join/ depender de um portão e de um arquivo que não são dele.

Só veio o que um formulário curto usa — tokens, cabeçalho, cartão, campos,
botões, mensagens e o corte do telefone em 820px. Nada de stepper, grid de
duas colunas nem painel lateral: aqui é uma coluna só, de cima para baixo.
========================================================================= */

:root{
  /* Superfícies — quase preto, sem azul demais para não parecer "tech" */
  --bg:#06080D;
  --card:#0D111B;
  --card-2:#10141F;
  --elev:#161B28;
  --press:#1D2333;

  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.18);

  --ink:#F5F7FA;
  --ink-2:#9299A8;
  --ink-3:rgba(245,247,250,.44);

  --accent:#D4A94E;          /* gold oficial MegaRide */
  --accent-ink:#0A0B10;      /* texto sobre o gold */
  --accent-soft:rgba(212,169,78,.10);
  --accent-line:rgba(212,169,78,.34);

  --ok:#5DBE87;
  --ok-soft:rgba(93,190,135,.12);
  --bad:#E0625A;             /* SÓ para erro de verdade */

  --r:10px; --r-lg:14px;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --serif:"Playfair Display",Georgia,serif;

  --hdr-h:72px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:15px/1.6 Inter,system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent);text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

/* ═══ CABEÇALHO (o do cadastro, sem o stepper) ═══════════════════════════ */
.ob-hdr{
  position:sticky;top:0;z-index:40;height:var(--hdr-h);
  background:rgba(6,8,13,.92);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.ob-hdr-in{
  max-width:1560px;margin:0 auto;height:100%;padding:0 28px;
  display:flex;align-items:center;justify-content:space-between;gap:28px;
}
.ob-brand{
  display:flex;align-items:baseline;gap:9px;color:var(--ink);flex:none;
  font:700 18px Inter;letter-spacing:-.02em;
}
.ob-brand span{font:500 13px Inter;color:var(--ink-3);letter-spacing:0}
.ob-brand-art{height:30px;width:auto;display:block}
.ob-signin{flex:none;font:500 13.5px Inter;color:var(--ink-2);white-space:nowrap}
.ob-signin b{color:var(--accent);font-weight:600}
.ob-signin:hover b{text-decoration:underline}

/* ═══ A CAPA (06/11/2026) ════════════════════════════════════════════════
   A Escalade no jatinho atrás do h1/lede — aprovada pelo Denis. `.hero` é
   coluna (foto atrás de tudo em `position:absolute`, texto ancorado
   embaixo via `margin-top:auto`); a foto não precisa de `overflow:hidden`
   no `.hero` — ela mesma, em `.hero-photo`, é quem corta.

   🔴 round 1 do checker: o cabeçalho MORAVA aqui dentro, e `position:sticky`
   só gruda enquanto o CONTAINING BLOCK do elemento (o pai mais próximo,
   `.hero`) ainda está na tela — uns 520–590px de altura, bem menos que o
   formulário inteiro. Rolar 600px já descolava o cabeçalho. Ele agora é
   IRMÃO de `.hero`, antes dela no documento (ver index.html): o containing
   block volta a ser a página inteira, como no `b114ea1`. */
.hero{position:relative;display:flex;flex-direction:column;min-height:520px;color:var(--ink)}
.hero-photo{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--bg)}
.hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% center;display:block}
/* O véu: escuro (= --bg) do lado do texto, transparente do outro — o texto
   fica ancorado embaixo nos dois tamanhos de tela, então o degradê é
   sempre de baixo para cima. Medido com contraste real (pixel da foto já
   renderizada, não a cor calculada): o degradê raso da 1ª versão deixava o
   h1/lede/badge em ~1.5–2.5:1 contra o céu do pôr do sol — a capa sobe
   escura até perto do topo (só o topo da foto fica mais claro). */
.hero-veil{position:absolute;inset:0;z-index:1;background:linear-gradient(to top,
  rgba(6,8,13,.94) 0%, rgba(6,8,13,.86) 55%, rgba(6,8,13,.60) 80%, rgba(6,8,13,.20) 94%, rgba(6,8,13,0) 100%)}
/* `margin-top:auto` é o que ancora o texto embaixo da capa: ele puxa o
   bloco para o pé do `.hero` (que é coluna) enquanto sobrar espaço até a
   `min-height`; num conteúdo mais alto que ela, ele só segue o cabeçalho,
   sem colar nem sobrar — do jeito que já acontece em telas baixas. */
.hero-copy{position:relative;z-index:2;max-width:640px;margin:auto auto 0;padding:0 28px 48px;width:100%}
.hero h1{font-size:clamp(34px, 5vw, 56px);line-height:1.1;color:var(--ink);margin:0 0 16px}
.hero .lede{max-width:46ch;margin:0 0 20px}
/* `inline-block`, não `inline-flex`: os três `<span>` (rótulo / " · code " /
   código) viravam itens de flex, e o navegador cortava o espaço nas PONTAS
   de cada item — "free· codePARTNER3", sem os espaços ao redor do "·".
   Texto puro em fluxo inline não tem essa armadilha. */
.hero-badge{display:inline-block;margin:0 0 24px;padding:9px 16px;
  border:1px solid var(--accent-line);background:var(--accent-soft);color:var(--accent);
  border-radius:999px;font:600 13.5px Inter}
.hero-badge[hidden]{display:none}
.hero-badge .mono{font-family:var(--mono);font-weight:500;letter-spacing:.03em}
.hero-benefits{list-style:none;margin:0 0 28px;padding:0;display:flex;flex-direction:column;gap:10px}
.hero-benefits li{display:flex;align-items:center;gap:10px;color:var(--ink-2);font-size:14.5px}
.hero-benefits svg{flex:none;stroke:var(--accent)}
/* `.hero-copy .hero-start` (2 classes), não `.hero-start` sozinho: a regra
   `.btn{display:inline-flex}` mora MAIS ABAIXO no arquivo (seção do
   cartão) com a MESMA especificidade de uma classe só — e por vir depois,
   vencia o `display:none` daqui, deixando o "Start now" visível também no
   desktop. Medido no Chrome a 1440×900: o botão aparecia sob o h1 mesmo
   fora do breakpoint de 820px. */
.hero-copy .hero-start{display:none}
/* O link da capa só existe no celular (ver o media query de 820px): no
   desktop a seção #how-it-works já está logo abaixo do formulário, visível
   sem precisar de atalho. */
.hero-copy .hero-how{display:none}

/* ═══ A COLUNA ═══════════════════════════════════════════════════════════
   640px: um formulário de nove campos lido de cima para baixo. Mais largo
   que isso, o olho perde a linha entre o rótulo e o campo. */
.ob-main{max-width:640px;margin:0 auto;padding:0 28px 60px}
/* Acima de 820px o cartão do formulário sobe sobre o pé da capa — a mesma
   cara de cartão, só puxado para cima por cima da foto.
   🔴 round 1 do checker: `.ob-main{padding-top:34px}` NESTE MESMO media
   query cancelava quase todo o `margin-top:-48px` do cartão (34 - 48 =
   -14: só 14px de sobreposição real, medidos ao vivo). O recuo de cima do
   `.ob-main` é 0 por padrão (linha acima) — sem redeclarar aqui, a margem
   negativa do cartão vale os 48px inteiros. Os 48px caem dentro do
   `padding-bottom:48px` + `margin-bottom:28px` que `.hero-copy`/
   `.hero-benefits` já reservam abaixo dos benefícios (ver `.hero-copy` e
   `.hero-benefits`), então o cartão nunca alcança o texto. */
@media(min-width:821px){
  /* round 2 do checker: `.hero` é `position:relative` (para a foto
     absoluta se ancorar nela) — e um elemento POSICIONADO, mesmo sem
     z-index (auto), pinta POR CIMA de um irmão sem position nenhum. Sem
     isto, nos 48px de sobreposição o `.hero` (e o que mora dentro dele)
     cobria o `.ob-main`: medido ao vivo, `elementsFromPoint` no centro do
     `<h2>Your login</h2>` devolvia `.hero-copy, .hero-veil, img,
     .hero-photo, section.hero` antes do próprio `h2` — ~81% dele coberto,
     o canto arredondado do cartão sumido. `position:relative` +
     `z-index:5` (> o z-index AUTO do `.hero`, < os 40 do `.ob-hdr`
     sticky — ele precisa continuar por cima de tudo ao rolar) vira o
     resultado do hit-test para `h2, #form.card, .ob-main`. */
  .ob-main{position:relative;z-index:5}
  #form{margin-top:-48px}
}

/* ═══ CARTÃO E CONTROLES ═════════════════════════════════════════════════ */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px}

h1{font:600 34px/1.18 var(--serif);letter-spacing:-.01em;margin:0 0 10px}
h2{font:600 20px/1.3 Inter;margin:0 0 6px;letter-spacing:-.01em}
/* O segundo e o terceiro bloco do cartão respiram do anterior. */
h2.sec{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
p.lede{color:var(--ink-2);margin:0 0 24px;font-size:15.5px}

label{display:block;font:600 11.5px Inter;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);margin:16px 0 6px}
label .opt{text-transform:none;letter-spacing:0;font-weight:500}
input,select,textarea{
  background:var(--bg);border:1px solid var(--line);color:var(--ink);
  padding:12px 13px;border-radius:var(--r);font:15px Inter,sans-serif;width:100%;min-height:46px;
}
input:focus,select:focus{outline:2px solid var(--accent);outline-offset:-1px}
/* Quando o join.js rola até um campo (senha errada → `block:"end"`), ele não
   cola na beira da tela: medido a 375×667, a senha ficava rente ao rodapé. */
input,select{scroll-margin-block:24px}
/* O código fica em caixa alta enquanto a pessoa digita — é como ele vai
   para o servidor, e ver "partner3" virar outra coisa no envio assusta. */
#code{text-transform:uppercase;font-family:var(--mono);letter-spacing:.06em}
.grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.hint{font-size:13px;color:var(--ink-3);margin-top:6px}
/* A frase do código recusado. Vermelho porque é erro de verdade: o envio
   está bloqueado por causa dele. */
.hint.bad{color:#FFC9C4}
.hint:empty{display:none}

/* A oferta, logo acima do botão. Dourada: é a Mega Ride dizendo o que
   oferece, não um "deu certo". Vazia (sem código válido), some. */
.offer{margin:20px 0 0;padding:12px 14px;border:1px solid var(--accent-line);
  background:var(--accent-soft);border-radius:var(--r);color:var(--ink);font-weight:500;font-size:14.5px}
.offer:empty{display:none}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid var(--line-2);background:transparent;color:var(--ink);
  padding:0 20px;min-height:44px;border-radius:var(--r);
  font:600 14px Inter;cursor:pointer;transition:background .16s,border-color .16s,filter .16s;
}
.btn:hover{background:var(--press)}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.pri:hover{filter:brightness(1.07);background:var(--accent)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn.wide{width:100%}
.row{display:flex;gap:12px;margin-top:22px}

.msg{padding:12px 14px;border-radius:var(--r);font-size:14px;margin:16px 0;display:none;white-space:pre-wrap}
.msg.show{display:block}
.msg.err{background:rgba(224,98,90,.12);border:1px solid rgba(224,98,90,.35);color:#FFC9C4}
.msg.ok{background:var(--ok-soft);border:1px solid rgba(93,190,135,.35);color:#BFF0D5}

/* O próximo passo quando a empresa já existe (ou nasceu e a Stripe recusou):
   o botão para o painel, fora do formulário que não deve ser enviado de novo. */
.next{margin:0 0 18px}
.next[hidden]{display:none}
.next p{margin:0 0 12px;color:var(--ink-2)}
#form[hidden]{display:none}

/* ═══ QUEM SOMOS / COMO FUNCIONA (07/11/2026) ════════════════════════════
   Mesmo `.card` do formulário, só abaixo dele — reaproveita o fundo, a
   borda e o raio de sempre. Os títulos usam `--serif` (como o h1 da capa),
   nunca o Inter do `h2` genérico do formulário; os separadores (`h2.sec`)
   já existem lá em cima e servem aqui sem mudar nada. */
.card.how{margin-top:28px}
.how h2{font:600 24px/1.3 var(--serif);letter-spacing:-.01em}

.how-steps{list-style:decimal;margin:4px 0 0;padding-left:22px;
  display:flex;flex-direction:column;gap:14px}
.how-steps li{color:var(--ink-2);font-size:14.5px;line-height:1.55}
.how-steps li::marker{color:var(--accent);font-weight:600}
.how-steps strong{color:var(--ink);font-weight:600}

.how-links{list-style:none;margin:4px 0 0;padding:0;
  display:flex;flex-direction:column;gap:10px}
.how-links a{font-weight:600;font-size:14.5px}
.how-links a:hover{text-decoration:underline}

/* A família Mega: um quadro levemente dourado dentro de "Learn more" — o
   mesmo --accent-soft/--accent-line do selo da oferta na capa, e os ícones
   no traço dos três benefícios da capa. */
.how-family{margin-top:16px;padding:16px 18px;border:1px solid var(--accent-line);
  border-radius:var(--r-lg);background:var(--accent-soft)}
.how-family h3{margin:0 0 6px;font:600 19px/1.3 var(--serif);color:var(--ink)}
.how-family p{margin:0 0 10px;color:var(--ink-2);font-size:14.5px;line-height:1.55}
.how-family-list{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:10px}
.how-family-list li{display:flex;align-items:flex-start;gap:10px;color:var(--ink-2);font-size:14.5px;line-height:1.5}
.how-family-list svg{flex:none;margin-top:2px;stroke:var(--accent)}
.how-family-list strong{color:var(--ink);font-weight:600}
.how-family a{font-weight:600;font-size:14.5px}
.how-family a:hover{text-decoration:underline}

/* ═══ TELEFONE ═══════════════════════════════════════════════════════════
   O link chega por WhatsApp: a maioria abre isto no celular. */
@media(max-width:820px){
  .ob-hdr{height:auto;position:static}
  .ob-hdr-in{flex-wrap:wrap;padding:12px 16px;gap:10px;height:auto}
  .ob-brand{font-size:17px}
  .ob-signin{margin-left:auto}
  /* Denis, 06/11: "muito espaço vazio no mobile" — o piso de 70svh daqui
     reservava uma faixa de céu enorme entre o cabeçalho e o h1 (~180px
     medidos). Sem min-height a capa vira do tamanho do CONTEÚDO; quem
     desenha a faixa de foto visível (a asa do jato + o pôr do sol) agora é
     o padding-top do `.hero-copy` — uns 72–96px, não mais um piso de
     viewport. O desktop (>820px) não muda: continua com `min-height:520px`
     da regra base. */
  .hero{min-height:0}
  .hero-copy{margin:0 auto;padding:84px 16px 24px}
  .hero-badge{margin-bottom:18px}
  .hero-benefits{margin-bottom:22px}
  .hero-copy .hero-start{display:inline-flex;margin-top:4px}
  .hero-copy .hero-how{display:block;margin-top:14px;color:var(--ink-2);font:600 13.5px Inter}
  .hero-copy .hero-how:hover{color:var(--accent)}
  .ob-main{padding:18px 16px 44px}
  .card{padding:18px}
  .grid2{grid-template-columns:minmax(0,1fr);gap:0}
  .row{flex-direction:column}
  .row .btn{width:100%}
}
/* Em 375 a frase inteira do "Sign in" empurra a marca para duas linhas;
   fica só o verbo, que é o que se clica. */
@media(max-width:480px){
  .ob-signin .q{display:none}
}