/* ============================================================
   /mentoria — CSS da página
   Design System: OURO (tokens vêm de /assets/ds-mvp.css)
   ------------------------------------------------------------
   Este arquivo tem 3 partes:
   1. Ponte de tokens — o formulário/sticky/carrossel vieram da LP
      antiga e falam os nomes de token do DS antigo. Em vez de
      reescrever 250 linhas já provadas (e arriscar quebrar o funil),
      traduzo os nomes antigos para os valores do OURO.
   2. CSS próprio desta página.
   3. Blocos herdados intactos (carrossel, sticky, modal) — anexados
      abaixo, sem edição.
   ============================================================ */

/* ---------- 1. PONTE DE TOKENS (antigo → OURO) ---------- */
:root{
  /* tipografia */
  --f-title: var(--font-heading);
  --f-body:  var(--font-heading);
  --f-mono:  var(--font-mono);

  /* texto */
  --c-text-primary: var(--text-primary);
  --c-text-muted:   var(--text-muted);
  --c-text-faint:   var(--white-50);

  /* superfícies */
  --c-bg-dark:        var(--bg-base);
  --c-glass-soft:     var(--glass-bg);
  --c-glass-hover:    var(--white-05);
  --c-glass-border:   var(--white-10);
  --c-glass-divider:  var(--white-10);

  /* acento */
  --c-accent:    var(--gold);
  --grad-accent: var(--gold-grad);
  --glow-accent: 0 0 40px var(--gold-a25);

  /* forma */
  --r-lg:   var(--radius-sm);
  --r-pill: var(--radius-pill);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.55);

  /* movimento */
  --t-fast: .18s;
  --t-base: .3s;
  --t-slow: .5s;
  --ease-out:    cubic-bezier(.22,1,.36,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
}

/* ---------- 2. CSS DESTA PÁGINA ---------- */

/* 🐛 CORREÇÃO: o botão só abria o formulário no SEGUNDO clique.
   Causa: o overlay fechado tem pointer-events:none, mas `.form-step.active`
   reativa pointer-events:auto nos filhos. Como o overlay é fixed/inset:0
   com z-index 100, o <input> invisível ficava por cima da página inteira e
   comia o primeiro clique (focava o campo em vez de abrir o modal).
   `visibility:hidden` tira o elemento e TODOS os filhos do hit-test,
   independente de qualquer pointer-events:auto lá dentro. */
.form-modal-overlay{ visibility:hidden; }
.form-modal-overlay.open{ visibility:visible; }

/* .btn-primary — o HTML herdado (CTAs, sticky, formulário) usa este nome.
   Aqui ele veste o botão do OURO, pra não existir dois botões diferentes
   na mesma página. */
.btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-family:var(--font-heading);
  font-size:1rem;
  font-weight:700;
  letter-spacing:-.02em;
  padding:1rem 2.5rem;
  border:none;
  border-radius:var(--radius-pill);
  background:var(--btn-bg);
  color:var(--btn-fg);
  cursor:pointer;
  text-decoration:none;
  box-shadow:0 0 30px var(--gold-a35);
  transition:transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s;
}
.btn-primary:hover{
  transform:scale(1.05);
  box-shadow:0 0 60px var(--gold-a35), 0 0 100px var(--gold-a35);
}
/* 🐛 CORREÇÃO: "Continuar" e "Enviar" apareciam juntos no formulário.
   Causa: `.btn-primary{display:inline-flex}` tem a mesma especificidade
   do `[hidden]{display:none}` do navegador, e regra de autor sempre vence
   regra do agente do usuário em empate — então o JS marcava `hidden` no
   botão certo, mas ele continuava visível. Reforça o hidden nativo. */
[hidden]{ display:none !important; }
.btn-primary svg{width:16px;height:16px;transition:transform .3s;}
.btn-primary:hover svg{transform:translateX(3px);}
/* dentro do modal o botão não pulsa nem cresce — ali ele é navegação */
.form-modal .btn-primary:hover{transform:none;}
.btn-back{
  background:transparent;
  border:1px solid var(--white-10);
  color:var(--text-muted);
  font-family:var(--font-heading);
  font-weight:600;
  font-size:.9rem;
  padding:1rem 1.75rem;
  border-radius:var(--radius-pill);
  cursor:pointer;
  transition:border-color .3s, color .3s;
}
.btn-back:hover:not(:disabled){border-color:var(--gold);color:var(--text-primary);}
.btn-back:disabled{opacity:.35;cursor:not-allowed;}

/* Reveal on scroll — entrada suave, respeita reduced-motion */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.reveal.in-view{opacity:1;transform:none;}
.reveal[data-delay="1"]{transition-delay:.08s}
.reveal[data-delay="2"]{transition-delay:.16s}
.reveal[data-delay="3"]{transition-delay:.24s}
.reveal[data-delay="4"]{transition-delay:.32s}
.reveal[data-delay="5"]{transition-delay:.40s}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none;}
}

/* — Hero da mentoria: VSL no centro, não em grid — */
.m-hero{ text-align:center; }
.m-hero h1{ margin-bottom:18px; }
.m-hero .hero-sub{
  margin:0 auto 28px;
  max-width:640px;
  text-align:center;
}
/* A VSL é vertical (9:16) e o VTurb trava o player em 400px de largura.
   A moldura precisa acompanhar esse limite, senão sobra faixa preta
   dentro do quadro dourado no desktop. */
.m-hero-player{
  max-width:400px;
  margin:0 auto 28px;
  border-radius:var(--radius-sm);
  overflow:hidden;
}
.m-hero-player vturb-smartplayer{display:block;width:100%;}
.m-microcopy{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--white-50);
  margin-top:18px;
  line-height:1.8;
}

/* — Fotos de seção —
   FULL-BLEED: a foto encosta nas duas extremidades da tela, furando o
   padding do .container. O .shell tem overflow:hidden, então isso não
   cria scroll lateral. O fade de baixo sobe (68%) pra o texto poder
   pousar em cima dele em vez de esperar a imagem acabar. */
/* ⚠️ NÃO usar transform aqui. O .m-photo também carrega .reveal, e o
   `.reveal.in-view{transform:none}` apagaria o translate do full-bleed,
   jogando a foto pro lado. Esta técnica com margin não conflita. */
.m-photo{
  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);
  max-width:none;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 9%, #000 62%, transparent 100%);
          mask-image:linear-gradient(to bottom, transparent 0%, #000 9%, #000 62%, transparent 100%);
}
.m-photo img{ width:100%; height:auto; display:block; }
.m-photo--bleed{ }

/* fade ainda mais alto, pra quando o texto entra logo abaixo */
.m-photo--soft{
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 8%, #000 52%, transparent 100%);
          mask-image:linear-gradient(to bottom, transparent 0%, #000 8%, #000 52%, transparent 100%);
}

/* A foto vira fundo e o texto pousa DENTRO do fade dela.
   Usado no "Pare de travar": imagem grande, texto por cima do fade. */
.m-photo-stack{ position:relative; }
.m-photo-stack .m-photo{ margin-bottom:0; }
.m-photo-stack .m-photo-over{
  position:relative;
  z-index:3;
  margin-top:-30%;          /* o texto sobe pra dentro do fade */
}
@media (min-width:768px){
  .m-photo-stack .m-photo-over{ margin-top:-22%; }
}

/* — Foto quadrada do "Eu sou William" — */
.m-portrait{
  position:relative;
  aspect-ratio:1/1;
  max-width:330px;
  margin-inline:auto;
  border-radius:var(--radius-sm);
  overflow:hidden;
  border:1px solid var(--white-10);
}
.m-portrait img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 85%;
}
.m-portrait-glow{
  position:absolute;
  inset:-18%;
  background:radial-gradient(circle, var(--gold-a20), transparent 70%);
  filter:blur(46px);
  pointer-events:none;
  z-index:0;
}

/* — Título com trecho riscado (a virada) — */
.m-strike{
  position:relative;
  color:var(--white-50);
  white-space:nowrap;
}
.m-strike::after{
  content:'';
  position:absolute;
  left:-2%; right:-2%; top:54%;
  height:.08em;
  background:var(--gold);
  border-radius:2px;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .9s var(--ease-out) .25s;
}
.reveal.in-view .m-strike::after{ transform:scaleX(1); }
@media (prefers-reduced-motion: reduce){ .m-strike::after{transform:scaleX(1);transition:none;} }

/* — Grid de duas colunas (quem sou) — */
.m-split{
  display:grid;
  grid-template-columns:1fr;
  gap:40px;
  align-items:center;
}
@media (min-width:900px){
  .m-split{ grid-template-columns:.85fr 1.15fr; gap:64px; }
}

/* — Grid de cards genérico — */
.m-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin-top:44px;
}
@media (min-width:768px){
  .m-grid{ grid-template-columns:repeat(2,1fr); gap:20px; }
}
.m-grid--3{ }
@media (min-width:900px){
  .m-grid--3{ grid-template-columns:repeat(3,1fr); }
}

/* — Card de entregável: imagem + texto — */
.m-deliver{
  overflow:hidden;
  padding:0;
}
/* As fotos são verticais (1264x2400) e terminam em muito espaço vazio —
   braço, fundo. A proporção fixa corta esse rodapé morto e traz o texto
   pra perto do telefone, sem cortar o aparelho (que vive no topo). */
.m-deliver-img{
  position:relative;
  aspect-ratio:1 / 1.2;
  overflow:hidden;
  background:linear-gradient(180deg, var(--bg-panel), var(--bg-base));
}
.m-deliver-img img{
  width:100%; height:100%; display:block;
  object-fit:cover;
  object-position:top center;
  -webkit-mask-image:linear-gradient(to bottom, #000 84%, transparent 100%);
          mask-image:linear-gradient(to bottom, #000 84%, transparent 100%);
}
.m-deliver-body{ padding:0 22px 26px; margin-top:-14px; position:relative; z-index:1; }
.m-deliver-body h4{ margin:10px 0 8px; }
.m-deliver-body p{ font-size:.92rem; color:var(--text-muted); margin:0; }

/* — Colunas pra quem é / não é — */
.m-filter{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  margin-top:44px;
}
@media (min-width:900px){ .m-filter{ grid-template-columns:repeat(2,1fr); gap:20px; } }
.m-filter h4{ margin-bottom:20px; }
.m-filter ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.m-filter li{ display:flex; gap:12px; align-items:flex-start; font-size:.94rem; line-height:1.6; }
.m-filter .is-no li{ color:var(--text-muted); }

/* — FAQ — */
.m-faq{ margin-top:44px; display:flex; flex-direction:column; gap:10px; }
.m-faq details{
  background:var(--glass-bg);
  border:1px solid var(--white-10);
  border-radius:var(--radius-xs);
  padding:18px 20px;
  transition:border-color var(--t-base) var(--ease-out);
}
.m-faq details[open]{ border-color:var(--gold-a30); }
.m-faq summary{
  cursor:pointer;
  list-style:none;
  font-weight:600;
  font-size:1rem;
  letter-spacing:-.02em;
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:center;
}
.m-faq summary::-webkit-details-marker{ display:none; }
.m-faq summary::after{
  content:'+';
  font-family:var(--font-mono);
  color:var(--gold);
  font-size:1.2rem;
  line-height:1;
  flex:0 0 auto;
  transition:transform var(--t-base) var(--ease-out);
}
.m-faq details[open] summary::after{ transform:rotate(45deg); }
.m-faq .m-faq-a{
  margin-top:14px;
  font-size:.94rem;
  line-height:1.75;
  color:var(--text-muted);
}

/* — Manifesto do fechamento — */
.m-manifesto{
  margin-top:72px;
  padding-top:44px;
  border-top:1px solid var(--white-10);
}
.m-manifesto p{
  font-size:1.05rem;
  line-height:1.7;
  margin-bottom:20px;
  color:var(--text-primary);
}
.m-manifesto em{
  font-style:italic;
  color:var(--gold-light);
}
.m-manifesto .m-sign{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--white-50);
  margin-top:28px;
}

/* — Rodapé — */
.m-footer{
  padding:56px 0 108px;
  text-align:center;
  border-top:1px solid var(--white-10);
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--white-50);
}
.m-footer a{ color:var(--gold); text-decoration:none; }
@media (min-width:1024px){ .m-footer{ padding-bottom:56px; } }

/* Espaço pro sticky CTA não cobrir o fim da página no mobile */
@media (max-width:1023px){
  body{ padding-bottom:76px; }
}

/* ============================================================
   3. BLOCOS HERDADOS DA LP ANTIGA — copiados sem edição
      (carrossel de depoimentos · sticky CTA · modal do formulário)
      Funcionam sobre a ponte de tokens da parte 1.
   ============================================================ */

/* ── CARROSSEL DE DEPOIMENTOS (herdado) ── */
/* 🐛 CORREÇÃO: dava pra ver os depoimentos deslizando sozinhos, mas não
   dava pra arrastar com o dedo — `overflow:hidden` bloqueia qualquer touch
   scroll, e o deslize era só um `transform` em keyframe (não scroll de
   verdade). Trocado pro padrão: `overflow-x:auto` nativo (arrasta normal,
   em qualquer direção) + JS empurrando `scrollLeft` devagar quando ninguém
   está tocando. Scrollbar escondida pra não perder o visual de carrossel. */
.fb-marquee{
  position:relative;
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x;
  scrollbar-width:none;
  -ms-overflow-style:none;
  /* fade nas bordas pra os cards entrarem/saírem suave */
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image:linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.fb-marquee::-webkit-scrollbar{ display:none; height:0; }
.fb-marquee--videos{ margin-top:56px; }
.fb-marquee--photos{ margin-top:24px; }

.fb-track{
  display:flex;
  align-items:center;
  gap:20px;
  width:max-content;
  padding-block:10px;           /* respiro pro glow/sombra dos cards */
}

.fb-item{ flex:0 0 auto; }

/* —— Vídeos verticais —— */
.fb-video{
  position:relative;
  height:440px;
  aspect-ratio:9 / 16;
  border-radius:var(--r-lg);
  overflow:hidden;
  border:1px solid var(--c-glass-border);
  background:radial-gradient(circle at 50% 35%, rgba(196,159,106,.12), var(--c-bg-video) 72%);
  box-shadow:0 20px 44px rgba(0,0,0,.5);
}
.fb-video--tall{ aspect-ratio:9 / 20; }   /* o 6º vídeo é mais alto */
.fb-video iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0; display:block;
}

/* —— Conversas (prints WhatsApp) — card limpo de cantos arredondados —— */
.fb-photo{
  height:420px;
}
.fb-photo img{
  height:100%; width:auto; display:block;
  border-radius:var(--r-lg);
  border:1px solid var(--c-glass-border);
  box-shadow:0 16px 36px rgba(0,0,0,.4);
}

@media (min-width:768px){
  .fb-track{ gap:28px; }
  .fb-video{ height:540px; }
  .fb-photo{ height:500px; }
}
/* prefers-reduced-motion: o JS já não roda o auto-scroll nesse caso
   (checa matchMedia antes de iniciar o loop) — só falta garantir que o
   scroll manual continue liso, o que overflow-x:auto acima já cobre. */


/* ── STICKY CTA (herdado) ── */
.sticky-cta{
  position:fixed;
  bottom:0;left:0;right:0;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  /* Gradiente removido — criava banda com cor antiga (olive) que
     destoava do background atual (foto + overlay warm). Agora o
     botão flutua direto sobre o conteúdo. */
  background:transparent;
  z-index:50;
  display:flex;
  justify-content:center;
  pointer-events:none;
  opacity:0;
  transition:opacity var(--t-slow) var(--ease-out);
}
.sticky-cta.visible{opacity:1;pointer-events:auto;}
.sticky-cta .btn-primary{width:100%;max-width:380px;font-size:13px;white-space:nowrap;padding:12px 24px;}
@media (min-width:1024px){.sticky-cta{display:none;}}

/* ── MODAL DO FORMULÁRIO (herdado) ── */
button.btn-primary{border:none;cursor:pointer;font-family:var(--f-body);}

.form-modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(5,5,5,.85);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  opacity:0;
  pointer-events:none;
  transition:opacity var(--t-base) var(--ease-out), visibility var(--t-base) var(--ease-out);
}
.form-modal-overlay.open{
  opacity:1;
  pointer-events:auto;
}
body.modal-open{overflow:hidden;}
body.modal-open .sticky-cta{opacity:0 !important;pointer-events:none !important;}

.form-modal{
  position:relative;
  width:100%;
  max-width:520px;
  max-height:calc(100vh - 40px);
  background:linear-gradient(180deg, rgba(26,34,31,.98) 0%, rgba(26,34,31,1) 100%);
  border:1px solid var(--c-glass-border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg), 0 0 60px rgba(196,159,106,.08);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transform:translateY(20px) scale(.98);
  transition:transform var(--t-slow) var(--ease-spring);
}
.form-modal-overlay.open .form-modal{transform:translateY(0) scale(1);}

.form-modal-close{
  position:absolute;
  top:14px;
  right:14px;
  width:36px;
  height:36px;
  border-radius:50%;
  border:1px solid var(--c-glass-border);
  background:var(--c-glass-soft);
  color:var(--c-text-primary);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  z-index:2;
  transition:background var(--t-fast), border-color var(--t-fast);
}
.form-modal-close:hover{background:var(--c-glass-hover);border-color:rgba(244,241,236,.2);}
.form-modal-close svg{width:16px;height:16px;}

.form-modal-progress{
  height:2px;
  background:rgba(244,241,236,.06);
  position:relative;
  overflow:hidden;
}
.form-modal-progress-fill{
  position:absolute;
  inset:0 auto 0 0;
  background:var(--grad-accent);
  width:0%;
  transition:width var(--t-slow) var(--ease-out);
}

.form-modal-body{
  position:relative;
  padding:48px 32px 24px;
  overflow:hidden;
  min-height:340px;
}

.form-step{
  position:absolute;
  inset:48px 32px 24px;
  opacity:0;
  pointer-events:none;
  transform:translateX(24px);
  transition:opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}
.form-step.active{
  opacity:1;
  pointer-events:auto;
  transform:translateX(0);
  position:relative;
  inset:auto;
}

.form-step-eyebrow{
  font-family:var(--f-mono);
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--c-text-faint);
  margin-bottom:12px;
}
.form-step-title{
  font-family:var(--f-title);
  font-size:26px;
  line-height:1.2;
  color:var(--c-text-primary);
  margin:0 0 8px;
  font-weight:500;
  letter-spacing:-.01em;
}
.form-step-hint{
  font-family:var(--f-body);
  font-size:13px;
  color:var(--c-text-muted);
  margin:0 0 24px;
  line-height:1.55;
}

.form-input,
.form-select{
  width:100%;
  padding:14px 18px;
  font-family:var(--f-body);
  font-size:15px;
  color:var(--c-text-primary);
  background:var(--c-glass-soft);
  border:1px solid var(--c-glass-border);
  border-radius:var(--r-pill);
  outline:none;
  transition:border-color var(--t-fast), background var(--t-fast);
  appearance:none;
  -webkit-appearance:none;
}
.form-input::placeholder{color:var(--c-text-faint);}
.form-input:focus,
.form-select:focus{
  border-color:var(--c-accent);
  background:var(--c-glass-hover);
}
.form-select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C49F6A' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;
  background-position:right 18px center;
  background-size:14px;
  padding-right:44px;
  cursor:pointer;
}
.form-select option{background:var(--c-bg-dark);color:var(--c-text-primary);}

.form-phone-group{display:flex;gap:8px;}
.form-phone-group .form-select{width:auto;min-width:120px;flex:0 0 auto;}
.form-phone-group .form-input{flex:1;}

.form-error{
  font-family:var(--f-mono);
  font-size:11px;
  color:#E89B7C;
  margin-top:8px;
  padding-left:18px;
  min-height:14px;
  opacity:0;
  transition:opacity var(--t-fast);
}
.form-error.visible{opacity:1;}
.form-input.invalid,
.form-select.invalid{border-color:rgba(232,155,124,.5);}

.form-modal-nav{
  display:flex;
  gap:12px;
  padding:16px 32px 28px;
  border-top:1px solid var(--c-glass-divider);
}
.form-modal-nav .btn-back{
  flex:0 0 auto;
  padding:14px 20px;
  background:transparent;
  border:1px solid var(--c-glass-border);
  border-radius:var(--r-pill);
  color:var(--c-text-muted);
  font-family:var(--f-body);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-weight:500;
  cursor:pointer;
  transition:all var(--t-fast);
}
.form-modal-nav .btn-back:hover{color:var(--c-text-primary);border-color:rgba(244,241,236,.2);}
.form-modal-nav .btn-back:disabled{opacity:0;pointer-events:none;}
.form-modal-nav .btn-next,
.form-modal-nav .btn-submit{
  flex:1;
  padding:14px 24px;
  min-height:48px;
  font-size:12px;
}
.form-modal-nav .btn-submit[disabled]{opacity:.6;cursor:wait;}

.form-success{text-align:center;padding:8px 0;}
.form-success-icon{
  width:64px;
  height:64px;
  margin:0 auto 24px;
  border-radius:50%;
  background:var(--grad-accent);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#0A0F0D;
  box-shadow:var(--glow-accent);
}
.form-success-icon svg{width:32px;height:32px;}
.form-success-title{
  font-family:var(--f-title);
  font-size:28px;
  color:var(--c-text-primary);
  margin:0 0 12px;
  font-weight:500;
}
.form-success-text{
  font-family:var(--f-body);
  font-size:14px;
  color:var(--c-text-muted);
  line-height:1.6;
  margin:0;
}

@media (max-width:600px){
  .form-modal-overlay{padding:0;align-items:flex-end;}
  .form-modal{max-width:100%;max-height:94vh;border-radius:var(--r-lg) var(--r-lg) 0 0;}
  .form-modal-body{padding:40px 24px 20px;min-height:300px;}
  .form-step{inset:40px 24px 20px;}
  .form-modal-nav{padding:14px 24px 24px;}
  .form-step-title{font-size:22px;}
}

@media (prefers-reduced-motion:reduce){
  .form-modal,
  .form-step,
  .form-modal-overlay,
  .form-modal-progress-fill{transition:none !important;}
}