/* ============================================================
   MARGEM REAL — folha de estilo
   Direção: relatório financeiro impresso. Papel, tinta, régua.
   Nada de dashboard. O número é o protagonista.
   ============================================================ */

:root{
  --paper:      #F4F1EA;
  --paper-deep: #EBE6DA;
  --ink:        #17150F;
  --ink-soft:   #57524A;
  --ink-faint:  #8A8377;
  --rule:       #D9D2C4;
  --rule-soft:  #E4DED1;

  --loss:       #B3341F;
  --loss-wash:  #F3E2DD;
  --gain:       #3D5C38;
  --gain-wash:  #E4EADF;

  --display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans:    "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  --measure: 34rem;
  --gutter: clamp(1.25rem, 5vw, 2.5rem);

  --ease: cubic-bezier(.2,.7,.25,1);
}

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

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

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* Grão de papel — sutil, só atmosfera */
.grain{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap{
  width:100%;
  max-width:var(--measure);
  margin-inline:auto;
  padding-inline:var(--gutter);
  position:relative; z-index:1;
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ─────────────── Cabeçalho ─────────────── */

.masthead{
  border-bottom:1px solid var(--rule);
  background:var(--paper);
  position:relative; z-index:2;
}
.masthead__inner{
  display:flex; align-items:center; gap:.75rem;
  padding-block:.9rem;
}
.masthead__mark{
  font-family:var(--display);
  font-size:1.15rem;
  letter-spacing:.01em;
  white-space:nowrap;
}
.masthead__rule{ flex:1; height:1px; background:var(--rule); }
.masthead__meta{
  font-family:var(--mono);
  font-size:.6rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--ink-faint);
  white-space:nowrap;
}
@media (max-width:26rem){ .masthead__meta{ display:none; } .masthead__rule{ display:none; } }

/* ─────────────── Passos ─────────────── */

.step{ padding-block:clamp(2.25rem,7vw,3.5rem) 4rem; }
.step[hidden]{ display:none; }

.step--active > *{
  animation:rise .55s var(--ease) backwards;
}
.step--active > *:nth-child(1){ animation-delay:.02s }
.step--active > *:nth-child(2){ animation-delay:.08s }
.step--active > *:nth-child(3){ animation-delay:.14s }
.step--active > *:nth-child(4){ animation-delay:.20s }
.step--active > *:nth-child(5){ animation-delay:.26s }
.step--active > *:nth-child(6){ animation-delay:.32s }

@keyframes rise{
  from{ opacity:0; transform:translateY(14px); }
  to  { opacity:1; transform:none; }
}

.eyebrow{
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin:0 0 1.5rem;
  padding-bottom:.7rem;
  border-bottom:1px solid var(--rule);
}

.display{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2.1rem,8.5vw,3.1rem);
  line-height:1.08;
  letter-spacing:-.015em;
  margin:0 0 1.1rem;
  text-wrap:balance;
}
.display--sm{ font-size:clamp(1.8rem,7vw,2.5rem); }
.display__em{ white-space:nowrap; }
.display em{ font-style:italic; }

.lede{
  color:var(--ink-soft);
  font-size:1.0rem;
  margin:0 0 2rem;
  max-width:30rem;
}

.footnote{
  font-family:var(--mono);
  font-size:.68rem;
  color:var(--ink-faint);
  line-height:1.5;
  margin:1rem 0 0;
}

/* ─────────────── Palpite ─────────────── */

.guess{
  border-block:1px solid var(--rule);
  padding-block:2rem 1.4rem;
  margin-bottom:2rem;
}

.guess__value{
  display:block;
  text-align:center;
  font-family:var(--display);
  line-height:.9;
  margin-bottom:1.6rem;
}
.guess__num{ font-size:clamp(4.5rem,24vw,7rem); font-variant-numeric:tabular-nums; }
.guess__pct{ font-size:clamp(2rem,9vw,2.8rem); color:var(--ink-faint); }

.guess__range{
  -webkit-appearance:none; appearance:none;
  width:100%; height:2.75rem; background:transparent; cursor:pointer; display:block;
}
.guess__range::-webkit-slider-runnable-track{
  height:2px; background:var(--ink); border-radius:0;
}
.guess__range::-moz-range-track{ height:2px; background:var(--ink); }
.guess__range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:1.6rem; height:1.6rem; margin-top:-.79rem;
  background:var(--paper); border:2px solid var(--ink); border-radius:50%;
  transition:transform .18s var(--ease), background .18s var(--ease);
}
.guess__range::-moz-range-thumb{
  width:1.6rem; height:1.6rem;
  background:var(--paper); border:2px solid var(--ink); border-radius:50%;
}
.guess__range:active::-webkit-slider-thumb{ transform:scale(1.18); background:var(--ink); }
.guess__range:focus-visible{ outline:2px solid var(--ink); outline-offset:6px; }

.guess__scale{
  display:flex; justify-content:space-between;
  font-family:var(--mono); font-size:.65rem; color:var(--ink-faint);
  margin-top:.35rem;
}

/* ─────────────── Formulário ─────────────── */

.form{ margin-bottom:1rem; }

.field{
  padding-block:1.4rem;
  border-bottom:1px solid var(--rule-soft);
}
.field:first-of-type{ border-top:1px solid var(--rule); }
.field--tight{ border:0; padding-block:.6rem; }

.field__label{
  display:block;
  font-weight:600;
  font-size:.98rem;
  letter-spacing:-.005em;
  margin-bottom:.2rem;
}
.field__help{
  color:var(--ink-faint);
  font-size:.82rem;
  line-height:1.45;
  margin:0 0 .8rem;
  max-width:28rem;
}
.field__input{
  display:flex; align-items:baseline; gap:.4rem;
  border-bottom:1.5px solid var(--ink);
  padding-bottom:.3rem;
  transition:border-color .2s var(--ease);
}
.field__input:focus-within{ border-color:var(--loss); }
.field__prefix,.field__suffix{
  font-family:var(--mono); font-size:.95rem; color:var(--ink-faint); flex:none;
}
.field__input input{
  flex:1; min-width:0;
  border:0; background:transparent; padding:0;
  font-family:var(--mono); font-size:1.45rem; font-weight:500;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.field__input input:focus{ outline:none; }
.field__input input::placeholder{ color:#BDB6A8; }

.form__error{
  color:var(--loss);
  font-size:.85rem;
  margin:1.2rem 0 0;
  padding-left:.8rem;
  border-left:2px solid var(--loss);
}

/* ─────────────── Auxiliares de cálculo ─────────────── */

.helper{
  margin-top:1.1rem;
  border:1px solid var(--rule);
  background:var(--paper-deep);
}
.helper__summary{
  font-family:var(--mono);
  font-size:.68rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-soft);
  cursor:pointer; list-style:none;
  padding:.7rem .9rem;
}
.helper__summary::-webkit-details-marker{ display:none; }
.helper__summary::before{ content:"+ "; }
.helper[open] .helper__summary::before{ content:"− "; }
.helper__summary:hover{ color:var(--ink); }

.helper__body{ padding:0 .9rem 1rem; }
.helper__grid{ display:grid; gap:1.1rem; margin-bottom:1rem; }
.helper__grid > *{ min-width:0; }
.helper input{ width:100%; }
.helper{ max-width:100%; }
.helper__field .field__input{ border-bottom-color:var(--ink-faint); }
.helper__field .field__input input{ font-size:1.15rem; }
.helper__label{
  display:block;
  font-size:.8rem; font-weight:600;
  margin-bottom:.35rem;
}

.helper__toggle{ display:flex; gap:.4rem; flex-wrap:wrap; }
.helper__opt{
  font-family:var(--sans); font-size:.8rem;
  padding:.45rem .8rem;
  border:1px solid var(--rule); background:transparent;
  color:var(--ink-soft); cursor:pointer;
  transition:background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.helper__opt:hover{ border-color:var(--ink-faint); }
.helper__opt--on{ background:var(--ink); border-color:var(--ink); color:var(--paper); }

.helper__out{
  font-family:var(--mono); font-size:.9rem;
  color:var(--ink-soft);
  margin:0 0 .9rem;
  padding:.7rem .8rem;
  background:var(--paper);
  border-left:2px solid var(--rule);
  line-height:1.5;
}
.helper__out--ready{ border-left-color:var(--ink); color:var(--ink); }
.helper__out strong{ font-size:1.15rem; }

.helper .btn--wide{ margin-top:0; padding-block:.7rem; font-size:.85rem; }
.helper .btn:disabled{ opacity:.4; cursor:default; }
.helper .btn:disabled:hover{ background:transparent; color:var(--ink); }

.helper__note{
  font-size:.78rem; color:var(--ink-faint); line-height:1.5;
  margin:.9rem 0 0;
}
.helper__note strong{ color:var(--ink-soft); }

@media (min-width:30rem){
  .helper__grid{ grid-template-columns:1fr 1fr; align-items:end; }
}

/* ─────────────── Botões ─────────────── */

.btn{
  font-family:var(--sans);
  font-size:.95rem; font-weight:600;
  padding:.95rem 1.5rem;
  border-radius:0;
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  transition:background .2s var(--ease), color .2s var(--ease), transform .12s var(--ease);
  border:1.5px solid transparent;
}
.btn:active{ transform:translateY(1px); }
.btn:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }

.btn--primary{ background:var(--ink); color:var(--paper); }
.btn--primary:hover{ background:var(--loss); }

.btn--outline{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn--outline:hover{ background:var(--ink); color:var(--paper); }

.btn--ghost{
  background:transparent; color:var(--ink-faint);
  padding-inline:0; font-weight:500; font-size:.88rem;
}
.btn--ghost:hover{ color:var(--ink); }

.btn--wide{ width:100%; margin-top:1.8rem; }
.btn__arrow{ transition:transform .2s var(--ease); }
.btn:hover .btn__arrow{ transform:translateX(3px); }

/* ─────────────── Veredito ─────────────── */

.verdict{
  text-align:center;
  padding-block:1.5rem 2.5rem;
  border-bottom:1px solid var(--rule);
  margin-bottom:2.5rem;
}
.verdict__label{
  font-family:var(--mono);
  font-size:.66rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-faint);
  margin:0 0 .6rem;
}
.verdict__number{
  font-family:var(--display);
  font-size:clamp(5rem,27vw,8.5rem);
  line-height:.85;
  margin:0;
  font-variant-numeric:tabular-nums;
  transition:color .5s var(--ease);
}
.verdict__pct{ font-size:.42em; color:var(--ink-faint); }
.verdict__cash{
  font-family:var(--mono);
  font-size:.9rem;
  color:var(--ink-soft);
  margin:1rem 0 0;
}
.verdict--loss .verdict__number{ color:var(--loss); }
.verdict--gain .verdict__number{ color:var(--gain); }

/* ─────────────── Régua ─────────────── */

.ruler{ margin:0 0 2.5rem; }
.ruler__caption{
  font-family:var(--mono);
  font-size:.62rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-faint);
  margin-bottom:4.4rem; /* espaço para o rótulo do palpite, que sobe acima da linha */
}
.ruler__track{
  position:relative;
  height:2px;
  background:var(--rule);
  margin-bottom:4.6rem; /* o rótulo do resultado desce abaixo da linha e não pode
                           ser encoberto pela caixa da diferença */
}
/* Sem transição de posição: ver comentário em app.js (renderRuler).
   A régua assume o valor final de imediato; a ênfase fica no contador. */
.ruler__gap{
  position:absolute; top:0; height:2px;
  background:var(--loss);
  animation:fadeIn .7s var(--ease) .35s backwards;
}
.ruler__pin{
  position:absolute; top:50%;
  transform:translate(-50%,-50%);
}
.ruler__pin--real{ animation:fadeIn .6s var(--ease) .5s backwards; }
@keyframes fadeIn{ from{ opacity:0 } to{ opacity:1 } }
.ruler__pin::after{
  content:""; position:absolute; top:50%; left:50%;
  width:11px; height:11px; margin:-5.5px 0 0 -5.5px;
  border-radius:50%; background:var(--paper);
  border:2px solid var(--ink);
}
.ruler__pin--real::after{ background:var(--loss); border-color:var(--loss); }

.ruler__pinLabel,.ruler__pinVal{
  position:absolute; left:50%; transform:translateX(-50%);
  white-space:nowrap; text-align:center;
}
.ruler__pinLabel{
  font-family:var(--mono); font-size:.58rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint);
}
.ruler__pinVal{
  font-family:var(--display); font-size:1.5rem; line-height:1;
  font-variant-numeric:tabular-nums;
}
/* palpite acima da linha, real abaixo — nunca colidem */
.ruler__pin--guess .ruler__pinLabel{ bottom:2.55rem; }
.ruler__pin--guess .ruler__pinVal  { bottom:1.05rem; }
.ruler__pin--real  .ruler__pinVal  { top:1.05rem; color:var(--loss); }
.ruler__pin--real  .ruler__pinLabel{ top:2.75rem; }

.ruler__delta{
  font-family:var(--sans);
  font-size:1.02rem;
  color:var(--ink);
  margin:0;
  padding:1rem 1.1rem;
  background:var(--loss-wash);
  border-left:2px solid var(--loss);
}
.ruler--gain .ruler__gap{ background:var(--gain); }
.ruler--gain .ruler__pin--real::after{ background:var(--gain); border-color:var(--gain); }
.ruler--gain .ruler__pin--real .ruler__pinVal{ color:var(--gain); }
.ruler--gain .ruler__delta{ background:var(--gain-wash); border-left-color:var(--gain); }

.sentence{
  font-family:var(--display);
  font-size:clamp(1.5rem,6vw,2rem);
  line-height:1.2;
  margin:0 0 3rem;
  text-wrap:balance;
}
.sentence em{ font-style:italic; color:var(--loss); }

/* ─────────────── Razão / extrato ─────────────── */

.ledger{ margin-bottom:3rem; }
.ledger__title,.structure__title,.action__title,.capture__title{
  font-family:var(--mono);
  font-size:.66rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-faint);
  font-weight:500;
  margin:0 0 1.1rem;
  padding-bottom:.7rem;
  border-bottom:1px solid var(--rule);
}
.ledger__list{ list-style:none; margin:0; padding:0; }
.ledger__row{
  display:flex; align-items:baseline; gap:.75rem;
  padding-block:.75rem;
  border-bottom:1px solid var(--rule-soft);
}
.ledger__name{ flex:1; font-size:.94rem; }
.ledger__bar{
  flex:none; width:clamp(2.5rem,14vw,5rem); height:7px;
  background:var(--rule-soft); position:relative; overflow:hidden;
}
/* Sem animação de entrada: com `backwards` a barra ficava presa em scaleX(0)
   enquanto a animação não progredisse, escondendo o dado. */
.ledger__bar i{
  position:absolute; inset:0 auto 0 0; display:block;
  width:100%;
  background:var(--ink);
  transform-origin:left;
}
.ledger__val{
  flex:none;
  font-family:var(--mono); font-size:.94rem; font-variant-numeric:tabular-nums;
  min-width:5.5rem; text-align:right;
}
.ledger__row--total{
  border-bottom:0; border-top:1.5px solid var(--ink);
  margin-top:.4rem; padding-top:1rem; font-weight:600;
}
.ledger__row--total .ledger__val,
.ledger__row--total .ledger__name{ font-weight:600; }
.ledger__row--negative .ledger__val{ color:var(--loss); }
.ledger__row--negative .ledger__bar i{ background:var(--loss); }
.ledger__note{
  font-size:.8rem; color:var(--ink-faint); line-height:1.5;
  margin:1.1rem 0 0;
}

/* ─────────────── Estrutura ─────────────── */

.structure{
  margin-bottom:3rem;
  padding:1.6rem 1.4rem 1.8rem;
  background:var(--paper-deep);
  border:1px solid var(--rule);
}
.structure__title{ border-bottom-color:var(--rule); }
.structure__lede{ font-size:.92rem; color:var(--ink-soft); margin:0 0 1.2rem; }
.structure__lede em{ font-style:italic; color:var(--ink); }
/* Itens de grid têm min-width:auto por padrão: a largura intrínseca do input
   empurrava os campos para fora da caixa. */
.structure__grid{ display:grid; gap:.9rem; }
.structure__grid > *{ min-width:0; }
.structure__grid input{ width:100%; }
.structure .field__input{ border-bottom-color:var(--ink); }
.structure .btn--wide{ margin-top:1.4rem; }

.afterFixed{
  margin-top:1.8rem; padding-top:1.6rem;
  border-top:1px solid var(--rule);
  text-align:center;
  animation:rise .5s var(--ease);
}
.afterFixed__label{
  font-family:var(--mono); font-size:.62rem;
  letter-spacing:.11em; text-transform:uppercase; color:var(--ink-faint);
  margin:0 0 .4rem;
}
.afterFixed__number{
  font-family:var(--display);
  font-size:clamp(3.2rem,15vw,4.5rem); line-height:.9; margin:0;
  font-variant-numeric:tabular-nums;
}
.afterFixed--loss .afterFixed__number{ color:var(--loss); }
.afterFixed--gain .afterFixed__number{ color:var(--gain); }
.afterFixed__cash{
  font-family:var(--mono); font-size:.85rem; color:var(--ink-soft); margin:.7rem 0 0;
}
.afterFixed__note{
  font-size:.92rem; margin:1.1rem 0 0; text-align:left;
  color:var(--ink-soft); line-height:1.55;
}

/* ─────────────── Ação ─────────────── */

.action{ margin-bottom:3rem; }
.action__line{
  font-size:1.05rem; line-height:1.5;
  margin:0 0 .9rem; padding-left:1.1rem;
  border-left:2px solid var(--ink);
}
.action__line strong{ font-family:var(--mono); font-weight:600; }
.action__note{ font-size:.83rem; color:var(--ink-faint); margin:1.3rem 0 0; }

/* ─────────────── Portão ─────────────── */

.gate{
  margin-bottom:3rem;
  padding:1.8rem 1.4rem;
  background:var(--ink);
  color:var(--paper);
}
.gate__title{
  font-family:var(--display); font-size:1.5rem; line-height:1.18;
  color:var(--paper); margin:0 0 .7rem;
}
.gate__lede{ font-size:.92rem; color:#BDB6A8; margin:0 0 1.5rem; line-height:1.55; }

/* ── Apresentação da oferta ──
   No celular a pessoa lê rolando. Se ela não encontrar "tenho um material pra você,
   é de graça" antes dos bullets, lê a lista sem saber que está ganhando algo. */
.offer{
  margin:0 0 1.3rem; padding:1rem 1.05rem;
  background:#221F19; border:1px solid #322D25;
}
.offer__badge{
  display:inline-block;
  font-family:var(--mono); font-size:.58rem; letter-spacing:.11em;
  color:var(--paper); background:var(--loss);
  padding:.28rem .5rem; margin:0 0 .8rem;
}
.offer__hand{
  font-family:var(--display); font-size:1.32rem; line-height:1.2;
  color:var(--paper); margin:0 0 .55rem;
}
.offer__name{ font-size:.92rem; line-height:1.6; color:#BDB6A8; margin:0; }
.offer__name strong{ color:var(--paper); font-weight:600; }
.offer__free{ color:#9FBF98; }

.gate__listTitle{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.11em;
  text-transform:uppercase; color:#8A8377; margin:0 0 .5rem;
}

/* ── Prévia da capa ──
   Reconstruída em HTML em vez de imagem: carrega instantâneo (importa em tráfego
   pago) e mostra os números da própria pessoa, o que uma capa genérica não faz. */
.cover{
  margin:0 0 1.6rem;
  display:grid; gap:.7rem;
}
.cover__sheet{
  background:#100E0A;
  border:1px solid #322D25;
  padding:1.1rem 1rem 1rem;
  display:grid; gap:.55rem;
  box-shadow:0 12px 30px rgba(0,0,0,.35);
  transform:rotate(-.5deg);
}
.cover__top,.cover__foot{
  display:flex; justify-content:space-between; gap:.5rem;
  font-family:var(--mono); font-size:.5rem; letter-spacing:.1em;
  color:#6E675C;
}
.cover__top{ border-bottom:1px solid #29241C; padding-bottom:.5rem; }
.cover__foot{ border-top:1px solid #29241C; padding-top:.5rem; margin-top:.15rem; }
.cover__title{
  font-family:var(--display); font-weight:400;
  font-size:1.5rem; line-height:1.08; color:var(--paper);
  margin:.2rem 0 0;
}
.cover__title em{ font-style:italic; color:var(--loss); }
.cover__sub{ font-size:.72rem; line-height:1.35; color:#8A8377; margin:0; }
.cover__kicker{
  font-family:var(--mono); font-size:.46rem; letter-spacing:.09em;
  color:#6E675C; margin:.35rem 0 0;
}
.cover__bar{ height:1.1rem; background:#2A251D; position:relative; overflow:hidden; }
.cover__bar i{
  position:absolute; inset:0 auto 0 0; display:block;
  background:var(--loss); width:0;
}
.cover__bar i.is-gain{ background:var(--gain); }
.cover__stats{ display:flex; gap:.6rem; }
.cover__stat{ flex:1; min-width:0; }
.cover__stat span{
  display:block; font-family:var(--mono); font-size:.42rem;
  letter-spacing:.08em; color:#6E675C; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.cover__stat strong{
  display:block; font-family:var(--display); font-weight:400;
  font-size:1.05rem; color:var(--paper); margin-top:.1rem;
}
.cover__stat--accent strong{ color:var(--loss); }
.cover__stat--gain strong{ color:#9FBF98; }
.cover__caption{
  font-family:var(--mono); font-size:.58rem; letter-spacing:.08em;
  color:#6E675C; margin:0; text-align:center;
}

/* O que continua acontecendo se ela não pegar. Fica entre a lista e o formulário —
   último argumento antes do campo, e o único que fala de perda. */
.gate__stake{
  font-size:.92rem; line-height:1.55; color:var(--paper);
  margin:0 0 1.5rem; padding-left:.9rem;
  border-left:2px solid var(--loss);
}

/* Razão-porquê: quem oferece algo bom de graça sem explicar por quê gera desconfiança. */
.gate__why{
  margin-top:1.4rem; padding-top:1.2rem;
  border-top:1px solid #322D25;
}
.gate__whyTitle{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.11em;
  text-transform:uppercase; color:#8A8377; margin:0 0 .7rem;
}
.gate__why p{ font-size:.86rem; line-height:1.6; color:#BDB6A8; margin:0 0 .7rem; }
.gate__signature{
  font-family:var(--display); font-size:1.15rem;
  color:var(--paper) !important; margin-top:.9rem !important;
}

.gate__delivery{
  font-size:.82rem; line-height:1.5; color:#BDB6A8;
  margin:1.1rem 0 0; padding:.75rem .85rem;
  background:#221F19; border-left:2px solid var(--loss);
}
.gate__delivery strong{ color:var(--paper); }

.gate__list{
  list-style:none; margin:0 0 1.6rem; padding:0;
  border-top:1px solid #322D25;
}

@media (min-width:32rem){
  .cover{ grid-template-columns:minmax(0,1fr); }
  .cover__sheet{ max-width:20rem; margin-inline:auto; }
  .cover__title{ font-size:1.7rem; }
}
.gate__list li{
  position:relative;
  padding:.75rem 0 .75rem 1.5rem;
  border-bottom:1px solid #322D25;
  font-size:.92rem; line-height:1.45;
}
.gate__list li::before{
  content:"→";
  position:absolute; left:0; top:.75rem;
  color:var(--loss);
  font-family:var(--mono);
}

.gate__form{ display:grid; gap:1.2rem; }
.gate__fieldLabel{
  display:block;
  font-family:var(--mono);
  font-size:.62rem; letter-spacing:.11em; text-transform:uppercase;
  color:#8A8377;
  margin-bottom:.35rem;
}
.gate__opt{ text-transform:none; letter-spacing:0; font-size:.68rem; color:#6E675C; }

/* Depois da entrega completa, a oferta precisa de mais presença visual —
   ela concorre com a vontade de fechar a página. */
.gate--offer{ border-left:3px solid var(--loss); }
.gate__row input{
  width:100%;
  border:0; border-bottom:1.5px solid #4A453C;
  background:transparent; color:var(--paper);
  font-family:var(--mono); font-size:1.05rem;
  padding:.5rem 0;
}
.gate__row input:focus{ outline:none; border-bottom-color:var(--paper); }
.gate__row input::placeholder{ color:#6E675C; }
.gate .btn--primary{ background:var(--paper); color:var(--ink); margin-top:.4rem; }
.gate .btn--primary:hover{ background:var(--loss); color:var(--paper); }
.turnstile-slot:empty{ display:none; }
.turnstile-slot:not(:empty){ margin-top:.2rem; }
.btn.is-loading,
.btn:disabled{ cursor:wait; opacity:.72; pointer-events:none; }
.gate__status{ font-size:.88rem; margin:.9rem 0 0; min-height:1.2em; }
.gate__status--ok{ color:#9FBF98; }
.gate__status--err{ color:#E39A8A; }
.gate .footnote{ color:#6E675C; margin-top:1.2rem; }

/* Conteúdo atrás do portão. `hidden` no elemento cuida da ocultação;
   nada aqui pode depender de animação para reaparecer. */
#locked[hidden]{ display:none; }
.deliveryNotice{
  margin:0 0 1.5rem;
  padding:.9rem 1rem;
  border-left:3px solid var(--loss);
  background:var(--paper-deep);
  color:var(--ink);
  font-size:.88rem;
  line-height:1.55;
}

/* ─────────────── Método e rodapé ─────────────── */

.restart{ text-align:center; margin-bottom:2rem; }

.method{ border-top:1px solid var(--rule); padding-top:1.1rem; }
.method__summary{
  font-family:var(--mono); font-size:.68rem;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-faint); cursor:pointer; list-style:none;
}
.method__summary::-webkit-details-marker{ display:none; }
.method__summary::before{ content:"+ "; }
.method[open] .method__summary::before{ content:"− "; }
.method__body{ font-size:.85rem; color:var(--ink-soft); line-height:1.6; padding-top:1rem; }
.method__body p{ margin:0 0 .8rem; }
.method__warn{ color:var(--ink); padding-left:.9rem; border-left:2px solid var(--rule); }

.foot{
  border-top:1px solid var(--rule);
  padding-block:1.8rem 2.5rem;
  margin-top:2rem;
}
.foot__line{ font-size:.86rem; color:var(--ink-soft); margin:0 0 .4rem; }
.foot__meta{ font-family:var(--mono); font-size:.68rem; color:var(--ink-faint); margin:0; }

/* ─────────────── Preferências ─────────────── */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

@media (min-width:34rem){
  .structure__grid{ grid-template-columns:1fr 1fr; gap:1.4rem; }
  .capture__form{ grid-template-columns:1fr auto; align-items:end; }
}