/* =========================================================================
ONBOARDING — a tela que decide se o dono de frota fica ou desiste.

Quem está do outro lado não é desenvolvedor: é dono de limusine, às vezes com
pouca prática de internet, que não sabe o que é embed, DNS ou API. A tela toda
existe para produzir uma frase na cabeça dele:

    "não preciso entender de tecnologia, só seguir os passos."

REGRAS QUE O VISUAL TEM DE SUSTENTAR
  · Um assunto por vez. Nada de nove blocos abertos competindo.
  · O que fazer vem antes de como fazer, que vem antes do técnico.
  · Nada de vermelho para "ainda não configurado" — vermelho é erro de verdade.
  · Alvo de toque >= 44px em tudo que se clica.

⚠️ ESTE ARQUIVO SUBSTITUIU O <style> INLINE da página. Duas folhas competindo
foi como nasceram os bugs de especificidade da landing (`.prod.rev` ganhando
das regras mobile). Aqui há uma fonte só.
========================================================================= */

: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}

/* ═══ HEADER + STEPPER ═══════════════════════════════════════════════════
   Sticky porque o stepper é a única âncora de "onde estou" numa página que
   rola bastante. 72px é alto o bastante para o stepper respirar e baixo o
   bastante para não comer a dobra no notebook. */
.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;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-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}

/* `overflow-x:auto` em toda largura, não só no telefone: entre ~820 e ~1120
   o stepper não cabe e VAZAVA POR CIMA da marca e do "Sign in". Sobreposição
   não transborda a página, então o guard de overflow passava enquanto o logo
   aparecia por baixo de "Account". Aqui ele rola em vez de invadir. */
.ob-stepper{flex:1;display:flex;align-items:center;justify-content:center;gap:0;
  min-width:0;overflow-x:auto;scrollbar-width:none}
.ob-stepper::-webkit-scrollbar{display:none}
.ob-stp{display:flex;align-items:center;gap:9px;padding:0 12px;white-space:nowrap}
.ob-stp-n{
  width:23px;height:23px;border-radius:999px;flex:none;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line-2);color:var(--ink-3);
  font:600 11.5px/1 var(--mono);transition:.2s;
}
.ob-stp-t{font:500 13px Inter;color:var(--ink-3);transition:.2s}
.ob-stp.on .ob-stp-n{border-color:var(--accent);background:var(--accent);color:var(--accent-ink)}
.ob-stp.on .ob-stp-t{color:var(--ink);font-weight:600}
.ob-stp.done .ob-stp-n{border-color:rgba(93,190,135,.5);color:var(--ok);background:var(--ok-soft)}
.ob-stp.done .ob-stp-t{color:var(--ink-2)}
/* linha ligando as etapas — bem fina, é orientação e não decoração */
.ob-stp-l{width:26px;height:1px;background:var(--line);flex:none}
.ob-stp-l.done{background:rgba(93,190,135,.4)}

/* ═══ GRID ═══════════════════════════════════════════════════════════════ */
.ob-main{max-width:1560px;margin:0 auto;padding:26px 28px 60px}
/* ⚠️ `minmax(0,1fr)`, nunca `1fr` sozinho. `1fr` é `minmax(auto,1fr)`, e esse
   `auto` recusa encolher abaixo do min-content do que estiver dentro — uma
   coluna sozinha num telefone de 375px media 386 e empurrava a PÁGINA INTEIRA
   para a rolagem horizontal, sem nenhum elemento visivelmente largo demais. */
.ob-grid{display:grid;grid-template-columns:minmax(0,1fr) 396px;gap:22px;align-items:start}
.ob-right{position:sticky;top:calc(var(--hdr-h) + 18px);display:flex;flex-direction:column;gap:16px}

/* ═══ CARTÕES E CONTROLES (o wizard, passos 1-5) ═════════════════════════ */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px}
.pane{display:none}.pane.on{display:block}

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}
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}
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}
input[type=color]{padding:3px;height:46px;cursor:pointer}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.colorRow{display:grid;grid-template-columns:62px 1fr;gap:8px;align-items:end}
.hint{font-size:13px;color:var(--ink-3);margin-top:6px}
.upl{display:flex;align-items:center;gap:14px;margin-top:12px}
.upl .prev{width:80px;height:52px;border:1px solid var(--line);border-radius:8px;
  background:#000 center/contain no-repeat;flex: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%}
/* `sm` é mais leve, não menor de alvo: 44px é o mínimo para o dedo e vale
   inclusive no desktop, onde a mesma tela é usada com trackpad ruim. */
.btn.sm{min-height:44px;padding:0 15px;font-size:13.2px}
.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}

.plans{display:grid;gap:12px}
.plan{border:1px solid var(--line);border-radius:12px;padding:18px;cursor:pointer;transition:.15s}
.plan:hover{border-color:var(--line-2)}
.plan.sel{border-color:var(--accent);background:var(--accent-soft)}
.plan h4{margin:0 0 2px;font:600 16px Inter}
.plan .price{font:600 22px/1 var(--mono);letter-spacing:-.02em;margin:6px 0}
.plan .price small{font:500 12px Inter;color:var(--ink-3)}
.plan p{margin:6px 0 0;font-size:13.5px;color:var(--ink-3)}
.plan ul{margin:10px 0 0;padding-left:18px;font-size:13px;color:var(--ink-2)}
.check{display:flex;gap:10px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line)}
.check:last-child{border-bottom:0}
.check i{font-style:normal;font-size:17px;line-height:1.3}
.check b{display:block;font-size:14.5px}
.check small{color:var(--ink-3);font-size:13px}
.ok-i{color:var(--ok)}.bad-i{color:var(--bad)}

/* ═══ HERO DO PASSO LIVE ═════════════════════════════════════════════════ */
.lv-hero{text-align:center;padding:34px 24px 26px}
.lv-tick{
  width:46px;height:46px;border-radius:999px;margin:0 auto 20px;
  display:flex;align-items:center;justify-content:center;
  border:1.5px solid var(--accent-line);background:var(--accent-soft);
  color:var(--accent);font-size:21px;
}
.lv-hero h1{margin:0 0 12px;font-size:38px}
.lv-hero h1 em{font-style:normal;color:var(--accent)}
.lv-hero p{margin:0;color:var(--ink-2);font-size:15.5px;line-height:1.65}

/* progresso — reduz ansiedade dizendo o que falta em número, não em lista */
.lv-prog{margin:22px auto 0;max-width:420px}
.lv-prog-t{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:9px}
.lv-prog-t b{font:600 12px Inter;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.lv-prog-t span{font:500 13px Inter;color:var(--ink-2)}
.lv-prog-bar{height:6px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden}
.lv-prog-fill{height:100%;background:var(--accent);border-radius:999px;transition:width .45s cubic-bezier(.4,0,.2,1)}
.lv-prog-fill.full{background:var(--ok)}

/* ═══ O CHECKLIST ════════════════════════════════════════════════════════ */
.lv-panel{background:var(--card-2);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:20px;margin-top:22px}
.lv-panel-h{display:flex;gap:13px;align-items:flex-start;margin-bottom:16px}
.lv-panel-h .ic{font-size:19px;line-height:1.2;flex:none}
.lv-panel-h b{display:block;font:600 12px Inter;letter-spacing:.11em;text-transform:uppercase;color:var(--accent)}
.lv-panel-h span{display:block;font-size:13.5px;color:var(--ink-3);margin-top:3px}

.lv-steps{display:flex;flex-direction:column;gap:8px}
.lv-s{border:1px solid var(--line);border-radius:12px;background:var(--card);
  overflow:hidden;transition:border-color .16s}
.lv-s:hover{border-color:var(--line-2)}
.lv-s.on{border-color:var(--line-2)}
.lv-s-h{
  display:flex;align-items:center;gap:14px;width:100%;
  padding:14px 16px;min-height:62px;
  background:none;border:0;cursor:pointer;text-align:left;color:inherit;font:inherit;
}
.lv-s-h:hover{background:rgba(255,255,255,.022)}
.lv-s-n{
  width:26px;height:26px;border-radius:999px;flex:none;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line-2);color:var(--ink-3);font:600 12px/1 var(--mono);
}
.lv-s.done .lv-s-n{border-color:rgba(93,190,135,.5);background:var(--ok-soft);color:var(--ok)}
.lv-s-ic{
  width:38px;height:38px;border-radius:9px;flex:none;
  display:flex;align-items:center;justify-content:center;font-size:18px;
  background:var(--elev);border:1px solid var(--line);
}
.lv-s-t{flex:1;min-width:0}
.lv-s-t b{display:block;font:600 15px Inter;letter-spacing:-.005em}
.lv-s-t span{display:block;font-size:13.2px;color:var(--ink-3);margin-top:2px}
.lv-s-x{flex:none;color:var(--ink-3);font-size:13px;transition:transform .22s ease}
.lv-s.on .lv-s-x{transform:rotate(180deg)}

/* Etiqueta de estado. Nunca vermelha: "não configurado" não é erro. */
.lv-tag{
  flex:none;min-height:28px;display:inline-flex;align-items:center;gap:6px;
  padding:0 11px;border-radius:999px;font:600 12px Inter;
  border:1px solid var(--line-2);color:var(--ink-2);
}
.lv-tag.done{border-color:rgba(93,190,135,.42);background:var(--ok-soft);color:var(--ok)}
.lv-tag.start{border-color:var(--accent-line);background:var(--accent-soft);color:var(--accent)}
.lv-tag.opt{border-color:var(--line);color:var(--ink-3)}
.lv-tag.na{border-color:var(--line);color:var(--ink-3)}

.lv-s-b{display:none;padding:2px 18px 20px 92px;border-top:1px solid var(--line);margin-top:-1px}
.lv-s.on .lv-s-b{display:block;animation:lv-in .22s ease}
@keyframes lv-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.lv-s-b h4{margin:18px 0 8px;font:600 16px Inter;letter-spacing:-.01em}
.lv-s-b p{margin:0 0 12px;font-size:14px;line-height:1.65;color:var(--ink-2)}
.lv-s-b ol{margin:12px 0;padding-left:20px}
.lv-s-b ol li{font-size:14px;line-height:1.7;padding:3px 0;color:var(--ink-2)}
.lv-s-b ol li b{color:var(--ink);font-weight:600}

/* linha de "copie isto" */
.lv-copy{display:flex;gap:8px;align-items:stretch;margin:8px 0 4px}
.lv-copy code{
  flex:1;min-width:0;display:flex;align-items:center;
  font:13px var(--mono);background:var(--bg);border:1px solid var(--line);
  border-radius:9px;padding:10px 13px;word-break:break-all;line-height:1.5;
}
.lv-lbl{font:600 10.5px var(--mono);letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-3);margin:14px 0 6px}

/* escolha de plataforma (Wix, GoDaddy…) */
.lv-plats{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.lv-plat{
  min-height:44px;padding:0 15px;border-radius:999px;cursor:pointer;
  display:inline-flex;align-items:center;
  font:600 13px Inter;border:1px solid var(--line-2);background:transparent;color:var(--ink);
}
.lv-plat:hover{background:var(--press)}
.lv-plat.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
/* Etiqueta que só informa ("onde posso usar isto?"). Não é clicável, então
   não precisa de alvo de 44px — e não pode parecer clicável. */
.lv-chip{
  display:inline-flex;align-items:center;min-height:32px;padding:0 13px;border-radius:999px;
  font:500 12.5px Inter;border:1px solid var(--line);background:var(--elev);color:var(--ink-2);
}

/* "Advanced" — o técnico existe, mas fechado. Progressive disclosure. */
.lv-adv{margin-top:16px;border-top:1px solid var(--line);padding-top:14px}
.lv-adv summary{
  cursor:pointer;font:500 13px Inter;color:var(--ink-3);
  list-style:none;display:flex;align-items:center;gap:7px;min-height:44px;
}
.lv-adv summary::-webkit-details-marker{display:none}
.lv-adv summary::before{content:"›";display:inline-block;transition:transform .2s;font-size:16px}
.lv-adv[open] summary::before{transform:rotate(90deg)}
.lv-adv summary:hover{color:var(--ink-2)}

/* rodapé de cada passo: marcar como feito */
.lv-mark{display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.lv-mark-ok{font:500 13.5px Inter;color:var(--ok);display:flex;align-items:center;gap:7px}
.lv-skip{background:none;border:0;color:var(--ink-3);font:500 13px Inter;cursor:pointer;
  min-height:44px;padding:0 6px;text-decoration:underline;text-underline-offset:3px}
.lv-skip:hover{color:var(--ink-2)}

/* nota discreta no fim de um passo */
.lv-note{margin:14px 0 0;font-size:12.8px;line-height:1.6;color:var(--ink-3);
  border-left:2px solid var(--line);padding-left:12px}

/* ajuda em linha — o "?" que explica um conceito sem sair da página */
.lv-q{
  display:inline-flex;align-items:center;justify-content:center;
  width:17px;height:17px;border-radius:999px;margin-left:6px;vertical-align:middle;
  border:1px solid var(--line-2);background:none;color:var(--ink-3);
  font:600 11px/1 Inter;cursor:pointer;padding:0;
}
.lv-q:hover{border-color:var(--accent);color:var(--accent)}
.lv-tip{margin:8px 0 0;padding:11px 13px;border-radius:9px;font-size:13.2px;line-height:1.6;
  background:var(--elev);border:1px solid var(--line);color:var(--ink-2);display:none}
.lv-tip.on{display:block}

/* QR */
.lv-qr{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap;margin:14px 0 4px}
.lv-qr-img{flex:none;background:#fff;border-radius:12px;padding:10px;line-height:0}
.lv-qr-img svg{display:block}
.lv-qr-side{flex:1;min-width:210px}

/* preview do botão "Book now" */
.lv-btnprev{display:flex;align-items:center;justify-content:center;padding:26px;
  border-radius:11px;border:1px solid var(--line);background:var(--bg);margin:10px 0}
.lv-btnprev span{display:inline-flex;align-items:center;min-height:44px;padding:0 26px;
  border-radius:8px;font:600 14.5px Inter}

/* preview da assinatura de e-mail */
.lv-sig{border:1px solid var(--line);border-radius:11px;padding:16px 18px;background:var(--bg);
  margin:10px 0;font-size:14px;line-height:1.7}
.lv-sig .nm{font-weight:600}
.lv-sig .co{color:var(--ink-2)}
.lv-sig .lk{color:var(--accent);word-break:break-all}

/* ═══ CARTÃO FINAL (gold) ════════════════════════════════════════════════ */
.lv-cta{
  margin-top:18px;border-radius:var(--r-lg);padding:20px 22px;
  border:1px solid var(--accent-line);
  background:linear-gradient(180deg,rgba(212,169,78,.11),rgba(212,169,78,.04));
  display:flex;gap:16px;align-items:center;flex-wrap:wrap;
}
.lv-cta.ready{border-color:rgba(93,190,135,.4);
  background:linear-gradient(180deg,rgba(93,190,135,.11),rgba(93,190,135,.03))}
.lv-cta .ic{font-size:24px;flex:none}
.lv-cta .tx{flex:1;min-width:190px}
.lv-cta .tx b{display:block;font:600 15.5px Inter;color:var(--accent)}
.lv-cta.ready .tx b{color:var(--ok)}
.lv-cta .tx span{display:block;font-size:13.5px;color:var(--ink-2);margin-top:3px}
.lv-cta .btn{flex:none}

/* ═══ COLUNA DIREITA — LIVE PREVIEW ══════════════════════════════════════
   Os aparelhos são reconstruções em CSS, não screenshot: eles recebem as
   cores e o logo REAIS enquanto a pessoa escolhe, que é o que faz o preview
   valer alguma coisa. */
.pv{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--card)}
.pv-h{padding:0 8px 0 16px;min-height:48px;display:flex;align-items:center;gap:10px;
  font:600 10.5px Inter;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);border-bottom:1px solid var(--line)}
/* Duas abas porque a empresa recebe DUAS telas de desktop: o site que os
   clientes dela usam e o console que ela usa. Mostrar só uma faz o operador
   achar que comprou metade. */
.pv-tabs{margin-left:auto;display:flex;gap:4px}
.pv-tab{
  min-height:44px;padding:0 10px;border:0;background:none;cursor:pointer;
  font:600 10.5px Inter;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);border-bottom:2px solid transparent;
}
.pv-tab:hover{color:var(--ink-2)}
.pv-tab.on{color:var(--ink);border-bottom-color:var(--accent)}
.pv-b{padding:20px}
.pv-screen{position:absolute;inset:15px 0 0 0}
.pv-desk[data-mode="site"] .pv-screen-console,
.pv-desk[data-mode="console"] .pv-screen-site{display:none}

/* ── UMA TELA POR ABA ───────────────────────────────────────────────────
   A composição em camadas (desktop com dois telefones por cima) é bonita num
   print de 1200px e ilegível numa coluna de 356: os aparelhos cobriam a
   direita do desktop, que é onde moram as pills de status, e nada dava para
   ler. Cada aba mostra UMA tela, na moldura inteira. */
.pv-stage .pv-desk{left:0;right:0;bottom:6px}
.pv-stage[data-mode="apps"] .pv-desk{display:none}
.pv-stage:not([data-mode="apps"]) .pv-ph{display:none}

/* Na aba dos apps os dois telefones ficam lado a lado, grandes o bastante
   para se reconhecer o que cada um faz — e rotulados, porque "dois retângulos
   pretos" não diz qual é do motorista. */
.pv-stage[data-mode="apps"] .pv-ph{
  width:104px;height:224px;top:6px;bottom:auto;border-radius:12px;
}
.pv-stage[data-mode="apps"] .pv-ph.l{left:12%}
.pv-stage[data-mode="apps"] .pv-ph.r{right:12%}
.pv-stage[data-mode="apps"] .pv-ph .scr{padding:10px 8px 16px;gap:7px}
.pv-stage[data-mode="apps"] .pv-ph .ttl{font-size:9px}
.pv-stage[data-mode="apps"] .pv-ph .ln{height:5px}
.pv-stage[data-mode="apps"] .pv-ph .pill{font-size:7px;padding:3px 7px;border-radius:4px}
.pv-stage[data-mode="apps"] .pv-ph .cap{opacity:.85;font-size:6px;padding:3px 0}

/* ── O CONSOLE, reconstruído da tela real ───────────────────────────────
   Os 6 KPIs, os chips do pipeline e as colunas saem de dispatch/index.html —
   não de imaginação. Aqui cabem 3 KPIs e 4 chips: abaixo disso o rótulo fica
   ilegível e vira ruído cinza, que é pior que mostrar menos. */
.pv-screen-console{display:flex;font-size:5.5px}
.pvc-rail{width:26px;flex:none;border-right:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;gap:5px;padding:6px 0}
.pvc-rail .mk{width:13px;height:4px;border-radius:1px;background:var(--accent);flex:none}
.pvc-rail i{width:12px;height:2.5px;border-radius:1px;background:rgba(255,255,255,.16);display:block}
.pvc-rail i.on{background:var(--accent);width:14px}
.pvc-main{flex:1;min-width:0;padding:6px 7px;display:flex;flex-direction:column;gap:5px}
.pvc-top{display:flex;align-items:center;gap:6px}
.pvc-top b{font:600 8px Inter}
.pvc-live{margin-left:auto;font:600 4.5px Inter;letter-spacing:.08em;color:#5DBE87;
  border:1px solid rgba(93,190,135,.4);border-radius:999px;padding:1.5px 4px}
.pvc-kpis{display:flex;gap:4px}
.pvc-kpi{flex:1;min-width:0;border:1px solid var(--line);border-radius:3px;padding:4px}
.pvc-kpi span{display:block;font:600 4px Inter;letter-spacing:.1em;opacity:.55}
.pvc-kpi b{display:block;font:600 10px Inter;margin-top:1px}
.pvc-kpi.attn{border-color:rgba(212,169,78,.45)}
.pvc-chips{display:flex;gap:3px}
.pvc-chips span{border:1px solid var(--line);border-radius:999px;padding:1.5px 5px;
  font:600 4.2px Inter;letter-spacing:.06em;opacity:.7}
.pvc-chips span.on{opacity:1}
.pvc-rows{display:flex;flex-direction:column;gap:3px;margin-top:1px}
.pvc-row{display:flex;align-items:center;gap:5px;border:1px solid var(--line);
  border-radius:3px;padding:4px 5px}
.pvc-row .id{font:600 5px var(--mono);opacity:.78;flex:none}
.pvc-row .nm{font:600 5.5px Inter;flex:1;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.pvc-row .pill{font:600 4px Inter;letter-spacing:.06em;border-radius:999px;
  padding:1.5px 5px;flex:none}

/* Números de exemplo têm de dizer que são de exemplo. Um operador que confere
   e descobre que o "1" não era dele perde a confiança na tela inteira. */
.pv-sample{position:absolute;right:6px;top:-4px;z-index:3;
  font:600 7px Inter;letter-spacing:.09em;text-transform:uppercase;
  background:rgba(0,0,0,.62);border:1px solid var(--line);color:var(--ink-3);
  border-radius:999px;padding:2px 7px}

.pv-stage{position:relative;height:236px;margin-bottom:22px}
.pv-desk{
  position:absolute;left:9%;right:9%;top:4px;bottom:44px;border-radius:9px;overflow:hidden;
  border:1px solid var(--line-2);box-shadow:0 20px 44px rgba(0,0,0,.6);
  /* fundo de segurança: os tokens da empresa entram por JS, mas o mockup não
     pode parecer quebrado no instante anterior a isso */
  background:#0B0D14;
}
.pv-bar{height:15px;background:var(--elev);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:3px;padding:0 6px}
.pv-bar i{width:4px;height:4px;border-radius:999px;background:var(--line-2);display:block}
/* ── A PÁGINA DE RESERVAS, reconstruída da tela real ────────────────────
   Era um "hero" com nome grande, tagline e uma mancha cinza que devia sugerir
   um carro e parecia defeito de renderização. Nada disso é a página: o
   /book/ real é um FORMULÁRIO — escolher veículo, endereços, data e hora,
   "Request this ride". Mostrar o formulário diz o que o produto faz; um hero
   genérico não diz nada e ainda parece template.

   ⚠️ O SELETOR SEGUE O HTML: estas regras nasceram como `.pv-hero` e, quando
   a tela virou aba, o elemento trocou de classe e o CSS ficou para trás — o
   layout sumiu e o logo tomou a moldura inteira. */
.pv-screen-site{display:flex;flex-direction:column;padding:7px 9px;gap:3.5px;z-index:1}
.pvs-top{display:flex;align-items:center;gap:5px;margin-bottom:1px}
/* Teto DUPLO no logo: `height` sozinho não segura nada, porque a largura sai
   da proporção — e logo de cliente é arquivo arbitrário. Um 5300×1900 (o
   formato dos oficiais daqui) vira 30px; um 2000×120 atravessaria a moldura. */
.pvs-top .lg{height:10px;max-height:10px;max-width:34%;object-fit:contain;
  object-position:left;display:none;flex:none}
.pvs-top .nm{font:600 8.5px Inter;letter-spacing:-.01em;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.pvs-sec{font:600 4.6px Inter;letter-spacing:.13em;text-transform:uppercase;
  opacity:.5;margin-top:2px}
.pvs-veh{display:flex;gap:3px}
.pvs-veh span{flex:1;border:1px solid var(--line);border-radius:3px;padding:4px 3px;
  font:600 4.6px Inter;text-align:center}
.pvs-f{border:1px solid var(--line);border-radius:3px;padding:4.5px 5px}
.pvs-f i{font-style:normal;font:500 4.6px Inter;opacity:.42}
.pvs-row{display:flex;gap:3px}
.pvs-row .pvs-f{flex:1}
.pvs-btn{margin-top:3px;border-radius:3px;padding:5px;text-align:center;
  font:600 5.6px Inter;background:var(--accent);color:var(--accent-ink)}

.pv-ph{
  position:absolute;bottom:0;width:64px;border-radius:9px;overflow:hidden;
  border:1px solid var(--line-2);background:#0A0B10;box-shadow:0 16px 34px rgba(0,0,0,.65);
}
.pv-ph.l{left:0;height:124px}
.pv-ph.r{right:0;height:140px}
.pv-ph .cap{position:absolute;left:0;right:0;bottom:0;text-align:center;
  font:600 4.5px Inter;letter-spacing:.09em;text-transform:uppercase;
  padding:2px 0;background:rgba(0,0,0,.55);opacity:0}
.pv-ph .scr{position:absolute;inset:3px;border-radius:6px;overflow:hidden;
  display:flex;flex-direction:column;padding:6px 5px;gap:4px}
.pv-ph .ttl{font:600 6px Inter;line-height:1.25}
.pv-ph .ln{height:3px;border-radius:2px;background:rgba(255,255,255,.13)}
.pv-ph .ln.s{width:60%}
/* O mapa é uma grade de ruas com um trajeto por cima. Só a grade, no tamanho
   grande da aba Apps, lê como área vazia — e área vazia num mockup parece
   tela que não carregou. */
.pv-ph .map{flex:1;border-radius:4px;position:relative;overflow:hidden;background:
  repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,transparent 1px 11px),
  repeating-linear-gradient(0deg,rgba(255,255,255,.07) 0 1px,transparent 1px 11px)}
.pv-ph .map::before{
  content:"";position:absolute;left:18%;right:22%;top:26%;bottom:30%;
  border-left:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);
  border-bottom-left-radius:8px;opacity:.85;
}
.pv-ph .map::after{
  content:"";position:absolute;right:20%;top:22%;width:5px;height:5px;
  border-radius:999px;background:var(--accent);
  box-shadow:0 0 0 2px rgba(212,169,78,.28);
}
.pv-ph .pill{padding:2px 5px;border-radius:3px;font:600 5.5px Inter;align-self:flex-start}

.pv-name{font:600 20px/1.25 var(--serif);margin-bottom:3px;word-break:break-word}
.pv-tag{font-size:13px;color:var(--ink-2)}
.pv-logo{max-height:32px;max-width:170px;display:none;margin-bottom:12px}
.pv-card{border-radius:9px;padding:14px;margin-top:16px;border:1px solid var(--line)}
.pv-card .lb{font:600 10px Inter;letter-spacing:.14em;text-transform:uppercase;
  display:flex;align-items:center;gap:7px}
.pv-card .sample{padding:1px 6px;border-radius:3px;font:600 8.5px Inter;letter-spacing:.06em;
  background:rgba(255,255,255,.09);color:var(--ink-3)}
.pv-card .rd{font-weight:600;margin-top:6px;font-size:14.5px}
.pv-card .tm{font-size:12.5px;margin-top:2px;opacity:.66}
.pv-cta{margin-top:16px}

/* aviso de leitura — substitui a tabela de contraste que vazava para o cliente */
.pv-warn{margin-top:12px;padding:11px 13px;border-radius:9px;font-size:13px;line-height:1.55;
  background:rgba(212,169,78,.09);border:1px solid var(--accent-line);color:#F0DDB2;display:none}
.pv-warn.on{display:block}

/* ═══ NEED HELP ══════════════════════════════════════════════════════════ */
.hp{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);padding:18px}
.hp-h{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px}
.hp-h .ic{width:32px;height:32px;border-radius:999px;flex:none;display:flex;
  align-items:center;justify-content:center;background:var(--elev);border:1px solid var(--line)}
.hp-h b{display:block;font:600 15px Inter}
.hp-h span{display:block;font-size:13px;color:var(--ink-3);margin-top:2px}
.hp-i{display:flex;align-items:center;gap:13px;padding:12px 13px;border-radius:10px;
  border:1px solid var(--line);margin-bottom:8px;min-height:56px;color:inherit;transition:.15s}
a.hp-i:hover{background:var(--press);border-color:var(--line-2)}
.hp-i .ic{font-size:16px;flex:none;width:20px;text-align:center}
.hp-i .tx{flex:1;min-width:0}
.hp-i .tx b{display:block;font:600 13.8px Inter}
.hp-i .tx span{display:block;font-size:12.5px;color:var(--ink-3);margin-top:1px}
.hp-i .go{color:var(--ink-3);font-size:15px;flex:none}
.hp-i.soon{opacity:.55}
.hp-i.soon .go{font:600 10px Inter;letter-spacing:.06em;text-transform:uppercase}

/* ═══ FOOTER ═════════════════════════════════════════════════════════════ */
.ob-foot{border-top:1px solid var(--line);margin-top:20px}
.ob-foot-in{max-width:1560px;margin:0 auto;padding:26px 28px;
  display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.ob-foot .fb{flex:1;min-width:180px}
.ob-foot .fb b{display:block;font:700 16px Inter;letter-spacing:-.02em}
.ob-foot .fb span{display:block;font-size:12.5px;color:var(--ink-3);margin-top:3px}
.ob-foot .fi{display:flex;align-items:center;gap:11px;flex:1;min-width:210px}
.ob-foot .fi .ic{font-size:17px;flex:none;opacity:.7}
.ob-foot .fi b{display:block;font:600 13.5px Inter}
.ob-foot .fi span{display:block;font-size:12.5px;color:var(--ink-3)}

/* ═══ ASSISTENTE DE SITE ═════════════════════════════════════════════════
   Uma pergunta por vez. Todo card selecionável aqui É `.plan` — hover, raio,
   borda e estado `.sel` vêm de lá. Estas regras só acrescentam ícone,
   descrição e as caixas de instrução. Segundo design system seria o começo
   de duas verdades sobre o que é "um card". */
.ws-head{margin-bottom:18px}
.ws-sub{margin:6px 0 0;font-size:13.5px;color:var(--ink-3)}

/* Quantas perguntas faltam. Sem isto, responder parece não ter fim. */
.ws-dots{display:flex;gap:6px;margin:0 0 14px}
.ws-dot{width:26px;height:3px;border-radius:2px;background:var(--line)}
.ws-dot.on{background:var(--accent)}

.ws-in{animation:wsIn .22s ease both}
@keyframes wsIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Cards grandes: duas colunas no desktop, uma no telefone. `auto-fit` com
   minmax evita media query para o caso de 3 opções. */
.ws-opts{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:14px}
.ws-opt{text-align:left;background:none;color:inherit;font:inherit;width:100%}
.ws-ico{display:block;font-size:22px;line-height:1;margin-bottom:10px}
.ws-caveat{display:block;margin-top:8px;font-size:12px;color:var(--ink-3);line-height:1.45}

/* Plataformas: alvos menores, mas nunca abaixo de 44px de altura. */
.ws-prov{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-top:14px}
.ws-provi{padding:14px 12px;min-height:52px;display:flex;align-items:center;justify-content:center;
  text-align:center;background:none;color:inherit;font:inherit}
.ws-provn{font:600 14.5px Inter}

/* Detecção: neutra por padrão. Verde só quando reconhecemos de verdade, e
   vermelho SÓ para endereço inválido — "não deu para identificar" não é
   erro, é o caso mais comum. */
.ws-detect{margin-top:8px;font-size:13px;color:var(--ink-3);line-height:1.5;min-height:20px}
.ws-detect.ok{color:var(--ok)}
.ws-detect.neutral{color:var(--ink-2)}
.ws-detect.bad{color:var(--bad)}

.ws-lbl{font:600 12px Inter;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin:16px 0 8px}
.ws-copy{display:flex;gap:8px;align-items:center;background:var(--card-2);border:1px solid var(--line);
  border-radius:var(--r);padding:8px 8px 8px 12px}
.ws-copy code{flex:1;min-width:0;font:12.5px/1.5 var(--mono);color:var(--ink-2);
  overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
.ws-copy .btn{flex:none}

.ws-ins{margin-top:6px}
.ws-ins h3{margin:0 0 2px;font:600 17px Inter}
.ws-ins ol{margin:14px 0 0;padding-left:20px;font-size:14px;color:var(--ink-2);line-height:1.75}
.ws-ins ol li{margin-bottom:4px}
.ws-row{flex-wrap:wrap;gap:8px;margin-top:16px}

/* Aviso de plano/plataforma. Âmbar, não vermelho: é condição, não falha. */
.ws-warn{margin-top:10px;padding:10px 12px;border-radius:var(--r);font-size:13px;line-height:1.5;
  background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--ink-2)}
.ws-note{margin-top:12px;font-size:13px;color:var(--ink-3);line-height:1.5}

.ws-sum{margin-top:6px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.ws-sum-r{display:flex;justify-content:space-between;gap:14px;padding:11px 14px;border-bottom:1px solid var(--line)}
.ws-sum-r:last-child{border-bottom:0}
.ws-sum-r.muted{background:var(--card-2)}
.ws-sum-k{font-size:13px;color:var(--ink-3)}
.ws-sum-v{font:600 13.5px Inter;text-align:right}
.ws-ok{font-style:normal;color:var(--ok);margin-right:6px}

.ws-rec{margin-top:16px}
.ws-rec p{margin:0;font-size:14px;color:var(--ink-2);line-height:1.6}

.ws-acc{margin-top:16px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
/* ⚠️ `min-height:44px` não é enfeite: com padding 13 + linha de 17 o summary
   media 43px e a auditoria de viewports reprovou. Um pixel abaixo do mínimo
   de toque continua sendo abaixo do mínimo. Flex em vez de `float` no marcador
   porque float não existe dentro de um flex container. */
.ws-acc>summary{padding:13px 14px;min-height:44px;cursor:pointer;font:600 14px Inter;
  list-style:none;display:flex;align-items:center;gap:10px}
.ws-acc>summary::-webkit-details-marker{display:none}
.ws-acc>summary::after{content:"›";margin-left:auto;transition:.2s;display:inline-block}
.ws-acc[open]>summary::after{transform:rotate(90deg)}
.ws-acc[open]>summary{border-bottom:1px solid var(--line)}
.ws-acc>*:not(summary){padding:0 14px 14px}

/* Checklist. Vazio é círculo, não vermelho — "ainda não fiz" não é erro. */
.ws-chk{margin-top:18px;border-top:1px solid var(--line);padding-top:14px}
.ws-chk-r{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:13.5px;color:var(--ink-2)}
.ws-chk-r i{font-style:normal;color:var(--ink-3)}
.ws-chk-r.done i{color:var(--ok)}
.ws-chk-r small{margin-left:auto;color:var(--ink-3);font-size:12px}

.ws-places{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.ws-place{border:1px solid var(--line);border-radius:var(--r);padding:12px}
.ws-place .ws-ico{font-size:18px;margin-bottom:6px}
.ws-place b{display:block;font:600 13.5px Inter}
.ws-place small{display:block;margin-top:3px;color:var(--ink-3);font-size:12.5px;line-height:1.45}

.ws-cta{margin-top:20px}
.ws-back,.ws-skip{display:block;margin:14px auto 0;background:none;border:0;cursor:pointer;
  color:var(--ink-3);font:13px Inter;padding:10px 12px;min-height:44px}
.ws-back:hover,.ws-skip:hover{color:var(--ink)}
.ws-back{margin-left:0}

.ws-skel-l{height:14px;border-radius:6px;background:var(--elev);margin-bottom:12px;
  animation:wsPulse 1.2s ease-in-out infinite}
.ws-skel-l:nth-child(2){width:70%}.ws-skel-l:nth-child(3){width:45%}
@keyframes wsPulse{0%,100%{opacity:.45}50%{opacity:.9}}

/* ═══ O HEADER APERTADO ══════════════════════════════════════════════════
   Marca + 6 etapas + "Already have an account? Sign in" pedem ~1100px. Abaixo
   disso os três blocos se SOBREPÕEM — e sobrepor não é transbordar: nada sai
   da tela, então um guard que só mede overflow passa com folga enquanto o
   logo aparece por baixo de "Account". O texto sai por etapas, do menos
   informativo para o mais. */
@media(max-width:1240px){
  .ob-signin .q{display:none}
}
@media(max-width:1120px){
  .ob-stp-t{display:none}          /* só os números; o rótulo é redundante */
  .ob-stp{padding:0 9px}
  .ob-stp-l{width:18px}
}

/* ═══ TABLET ═════════════════════════════════════════════════════════════
   Entre 768 e 1100 as duas colunas ficam apertadas demais para o checklist
   respirar. Vira uma coluna — leitura ganha do grid. */
@media(max-width:1100px){
  .ob-grid{grid-template-columns:minmax(0,1fr)}
  .ob-right{position:static;flex-direction:row;flex-wrap:wrap}
  .ob-right>*{flex:1;min-width:min(300px,100%)}
}

/* ═══ TELEFONE ═══════════════════════════════════════════════════════════
   O wizard termina no celular na maioria das vezes — a landing chega por
   WhatsApp. Isto não é o desktop espremido. */
@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}
  /* Stepper compacto: linha própria, rolando na horizontal.
     ⚠️ `flex-basis:100%`, NÃO `width:100%`. A regra base tem `flex:1`, que
     é `flex-basis:0%` — e basis ganha de width em item flex. Com width o
     stepper subia para a linha do "Sign in" e era cortado pela direita, o
     que parece bug de overflow e é precedência de flexbox. */
  .ob-stepper{order:3;flex:1 0 100%;justify-content:flex-start;overflow-x:auto;
    padding-bottom:4px;-webkit-overflow-scrolling:touch}
  .ob-stepper::-webkit-scrollbar{display:none}
  .ob-stp{padding:0 8px}
  .ob-stp-l{width:12px}
  /* De volta: aqui o stepper tem a linha inteira para si e rola, então o
     rótulo cabe. Ele só some de novo abaixo de 400. */
  .ob-stp-t{display:inline;font-size:12px}
  .ob-right{position:static;top:auto}
  .ob-main{padding:18px 16px 44px}
  .card{padding:18px}
  h1{font-size:27px}
  .lv-hero{padding:24px 6px 18px}
  .lv-hero h1{font-size:28px}
  .lv-panel{padding:14px}
  /* o corpo do passo perde o recuo do ícone — no telefone ele come a linha */
  .lv-s-b{padding:2px 14px 18px}
  .lv-s-h{padding:12px 13px;gap:11px}
  .lv-s-ic{width:34px;height:34px;font-size:16px}
  .lv-s-t b{font-size:14.2px}
  /* A etiqueta fica NA MESMA linha do título; quem cede é o título, que
     quebra em duas ou três linhas sem prejuízo. Deixar a etiqueta cair para
     baixo alinhava "Done" embaixo do número e parecia estado de outro item. */
  .lv-s-t{min-width:0}
  .lv-tag{padding:0 9px;font-size:11.5px}
  .lv-copy{flex-direction:column}
  .lv-copy .btn{width:100%}
  .lv-qr{gap:14px}
  .lv-cta .btn{width:100%}
  .grid2{grid-template-columns:1fr}
  .row{flex-direction:column}
  .row .btn{width:100%}
  .ob-foot-in{flex-direction:column;align-items:flex-start;gap:16px;padding:22px 16px}
}

@media(max-width:400px){
  .ob-stp-t{display:none}      /* só os números — 6 rótulos não cabem em 375 */
  .ob-stp{padding:0 5px}
  .lv-hero h1{font-size:25px}
}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}

/* ═══ ASSISTENTE DE SITE NO TELEFONE ═════════════════════════════════════
   Os grids já colapsam sozinhos (auto-fit com minmax), então aqui só o que
   o auto-fit não resolve: respiro, alvo de toque e a coluna única das
   plataformas em telas muito estreitas.

   ⚠️ Nada de `white-space:normal` no <code>: ele rola DENTRO da própria
   caixa (overflow-x:auto). Quebrar linha num snippet ou numa URL é como se
   copia metade de um link sem perceber. */
@media(max-width:820px){
  .ws-opts{grid-template-columns:1fr}
  .ws-places{grid-template-columns:1fr 1fr}
  .ws-sum-r{flex-direction:column;gap:2px}
  .ws-sum-v{text-align:left}
  .ws-row .btn{width:100%}
}

@media(max-width:400px){
  .ws-prov{grid-template-columns:1fr}
  .ws-places{grid-template-columns:1fr}
  .ws-copy{padding:8px}
  .ws-copy code{font-size:11.5px}
}

/* Nota de "já sabemos disso" acima dos chips de plataforma. Discreta: é
   confirmação do que a pessoa disse, não instrução nova. */
.lv-pre{margin:0 0 10px;font-size:13px;color:var(--ink-3);line-height:1.5}