/* ============================================================
   Coexia | landing
   Estilo: Editorial Grid / Magazine (ui-ux-pro-max)
   Base quente + tipografia editorial. Modo claro por padrão.
   ============================================================ */

/* ---------- TOKENS ---------- */
:root{
  /* papel */
  --paper:    #F7F3EC;
  --paper-up: #FFFDF9;
  --paper-dn: #EEE7DA;

  /* tinta */
  --ink:   #1B1815;
  --ink-2: #4A4239;
  --ink-3: #6E6459;

  /* marca */
  --green:      #14653A;
  --green-dark: #0E4A2A;
  --green-tint: #E4EFE6;
  --live:       #1FA855;
  --tick:       #2F9FD4;
  --clay:       #C2603A;   /* decorativo / texto grande (>=24px) */
  --clay-ink:   #A34A27;   /* texto pequeno, 5.3:1 sobre o papel */

  --rule:      rgba(27,24,21,.13);
  --rule-soft: rgba(27,24,21,.07);

  --serif: "Calistoga", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* espaçamento generoso (density 3/10) */
  --s-1: 8px;   --s-2: 16px;  --s-3: 24px;
  --s-4: 40px;  --s-5: 64px;  --s-6: 96px;

  --wrap: 1140px;
  --ease: cubic-bezier(.25,.46,.45,.94);
}

/* ---------- BASE ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; scroll-padding-top:90px; -webkit-text-size-adjust:100%; }

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* grão de papel: dá textura e mata o "liso demais" */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:9999;
  pointer-events:none;
  opacity:.32;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }

h1,h2,h3{ font-family:var(--serif); font-weight:400; line-height:1.08; letter-spacing:-.015em; }

:focus-visible{
  outline:2.5px solid var(--green);
  outline-offset:3px;
  border-radius:3px;
}

.wrap{ width:min(var(--wrap), calc(100% - 44px)); margin-inline:auto; }
section{ padding:var(--s-6) 0; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--paper);
  padding:12px 20px; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

/* ---------- SEÇÃO / CABEÇALHOS ---------- */
.sec-label{
  display:inline-block;
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--green);
  margin-bottom:var(--s-2);
  padding-bottom:5px;
  border-bottom:1.5px solid currentColor;
}
/* A medida vai no h2, não aqui: `ch` no .sec-head seria calculado em Inter 17px
   e não na Calistoga de display, apertando o título muito além do pretendido. */
.sec-head{ margin-bottom:var(--s-5); }
.sec-head h2{ font-size:clamp(2rem, 4.4vw, 3.1rem); max-width:24ch; }
.sec-sub{
  color:var(--ink-2);
  font-size:1.05rem;
  max-width:52ch;
  margin-top:var(--s-2);
}
.sec-head .sec-sub{ margin-top:var(--s-3); }

/* ---------- BOTÕES ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--sans);
  font-weight:600;
  font-size:1rem;
  line-height:1;
  padding:15px 26px;
  min-height:48px;
  border-radius:999px;
  border:1.5px solid transparent;
  cursor:pointer;
  text-align:center;
  transition:transform .22s var(--ease), background .22s var(--ease),
             color .22s var(--ease), border-color .22s var(--ease),
             box-shadow .22s var(--ease);
}
.btn-primary{
  background:var(--green);
  color:#FFFDF9;
  box-shadow:0 1px 2px rgba(27,24,21,.16);
}
.btn-primary:hover{
  background:var(--green-dark);
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(20,101,58,.24);
}
.btn-primary:active{ transform:translateY(0); }

.btn-ghost{
  border-color:var(--rule);
  color:var(--ink);
  background:transparent;
}
.btn-ghost:hover{
  border-color:var(--ink);
  transform:translateY(-2px);
  background:rgba(27,24,21,.03);
}

.btn-sm{ padding:12px 20px; min-height:44px; font-size:.94rem; }
.btn-lg{ padding:18px 34px; min-height:56px; font-size:1.06rem; }
.btn-block{ display:flex; width:100%; }

.link-quiet{
  display:inline-flex; align-items:center;
  min-height:44px;
  font-size:.95rem; font-weight:500; color:var(--ink-2);
  padding:8px 6px;
  border-bottom:1.5px solid transparent;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.link-quiet:hover{ color:var(--ink); border-color:var(--ink); }

/* ---------- MASTHEAD ---------- */
.masthead{
  position:fixed; inset:0 0 auto 0; z-index:100;
  background:rgba(247,243,236,.88);
  -webkit-backdrop-filter:saturate(180%) blur(10px);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--rule);
}
.masthead-inner{ display:flex; align-items:center; gap:var(--s-3); height:72px; }

.brand{ display:flex; align-items:center; gap:10px; margin-right:auto; min-height:44px; }
.brand img{ width:32px; height:32px; object-fit:contain; }
.brand-name{ font-family:var(--serif); font-size:1.3rem; letter-spacing:-.01em; }

.main-nav ul{ display:flex; gap:var(--s-3); }
.main-nav a{
  font-size:.95rem; font-weight:500; color:var(--ink-2);
  padding:6px 0;
  border-bottom:1.5px solid transparent;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.main-nav a:hover{ color:var(--ink); border-color:var(--clay); }

.masthead-actions{ display:flex; align-items:center; gap:var(--s-2); }

.masthead-progress{ height:2px; background:transparent; }
.masthead-progress i{
  display:block; height:100%; width:0;
  background:var(--clay);
  transition:width .1s linear;
}

.nav-toggle{
  display:none;
  width:44px; height:44px;
  flex-direction:column; justify-content:center; align-items:center; gap:5px;
}
.nav-toggle span{
  display:block; width:22px; height:1.6px; background:var(--ink);
  transition:transform .25s var(--ease), opacity .2s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:first-child{ transform:translateY(3.3px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child{ transform:translateY(-3.3px) rotate(-45deg); }

/* ---------- HERO ---------- */
.hero{ padding-top:calc(72px + var(--s-6)); padding-bottom:var(--s-5); }
.hero-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;   /* assimétrico */
  gap:var(--s-5);
  align-items:center;
}

.kicker{
  font-size:.92rem; font-weight:500; color:var(--ink-3);
  margin-bottom:var(--s-3);
  padding-left:34px; position:relative;
}
.kicker::before{
  content:""; position:absolute; left:0; top:.62em;
  width:24px; height:1.5px; background:var(--clay);
}

.hero h1{
  font-size:clamp(2.7rem, 6.4vw, 4.7rem);
  margin-bottom:var(--s-3);
}

/* marca de marca-texto desenhada à mão */
.marked{ position:relative; white-space:nowrap; }
.marked::after{
  content:"";
  position:absolute; left:-.06em; right:-.06em; bottom:.04em;
  height:.34em;
  background:var(--clay);
  opacity:.22;
  border-radius:.18em .3em .22em .26em / .5em .4em .55em .45em;
  transform:rotate(-.5deg);
  z-index:-1;
}

.lede{
  font-size:1.14rem;
  color:var(--ink-2);
  max-width:47ch;
  margin-bottom:var(--s-4);
}

.hero-ctas{ display:flex; flex-wrap:wrap; gap:var(--s-2); margin-bottom:var(--s-3); }
.hero-note{ font-size:.92rem; color:var(--ink-3); }

/* ---------- TELEFONE / CONVERSA ---------- */
.hero-demo{ display:flex; flex-direction:column; align-items:center; gap:var(--s-2); }

.phone{
  width:100%; max-width:330px;
  background:#EDE4D8;
  border:1px solid rgba(27,24,21,.16);
  border-radius:26px;
  overflow:hidden;
  transform:rotate(-1.4deg);
  box-shadow:0 1px 1px rgba(27,24,21,.05),
             0 12px 28px rgba(27,24,21,.10),
             0 40px 60px -30px rgba(27,24,21,.22);
}

.phone-top{
  display:flex; align-items:center; gap:10px;
  padding:13px 15px;
  background:var(--green);
  color:#FFFDF9;
}
.avatar{
  width:34px; height:34px; flex:0 0 34px;
  border-radius:50%;
  background:rgba(255,253,249,.22);
  display:grid; place-items:center;
  font-size:.78rem; font-weight:600;
}
.phone-who{ display:flex; flex-direction:column; line-height:1.25; margin-right:auto; }
.phone-who strong{ font-size:.92rem; font-weight:600; }
.phone-who em{ font-style:normal; font-size:.74rem; opacity:.82; }
.phone-ico{ opacity:.85; }

.phone-body{
  /* Altura fixa. Com min-height o balão novo empurrava o layout a cada
     mensagem (63px de deslocamento por ciclo) e sacudia a página na rolagem.
     overflow:hidden corta por dentro e ainda deixa o scrollTop do JS funcionar,
     sem capturar a roda do mouse de quem está rolando a página. */
  height:340px;
  overflow:hidden;
  padding:16px 13px;
  display:flex; flex-direction:column; gap:8px;
  /* papel de parede sutil, sem imagem externa */
  background:
    radial-gradient(circle at 20% 15%, rgba(27,24,21,.035) 1px, transparent 1px),
    radial-gradient(circle at 70% 60%, rgba(27,24,21,.03) 1px, transparent 1px),
    #EDE4D8;
  background-size:46px 46px, 62px 62px, auto;
}

/* ancora a conversa embaixo, como num app de mensagem de verdade */
.phone-body > :first-child{ margin-top:auto; }

.bubble{
  max-width:82%;
  padding:8px 11px 6px;
  border-radius:11px;
  font-size:.87rem;
  line-height:1.45;
  background:#FFFDF9;
  box-shadow:0 1px 1px rgba(27,24,21,.10);
  position:relative;
  animation:pop .34s var(--ease) both;
}
.bubble.out{ align-self:flex-end; background:var(--green-tint); }
.bubble.in { align-self:flex-start; }

.bubble .meta{
  display:flex; align-items:center; justify-content:flex-end; gap:3px;
  font-size:.64rem; color:var(--ink-3);
  margin-top:2px;
}
.bubble .ticks{ display:inline-flex; color:var(--ink-3); transition:color .3s var(--ease); }
.bubble .ticks.read{ color:var(--tick); }

@keyframes pop{
  from{ opacity:0; transform:translateY(9px) scale(.97); }
  to  { opacity:1; transform:none; }
}

/* "digitando…" */
.typing{
  align-self:flex-start;
  display:flex; gap:4px;
  padding:11px 13px;
  background:#FFFDF9;
  border-radius:11px;
  box-shadow:0 1px 1px rgba(27,24,21,.10);
  animation:pop .3s var(--ease) both;
}
.typing i{
  width:6px; height:6px; border-radius:50%;
  background:var(--ink-3); opacity:.5;
  animation:blink 1.25s infinite;
}
.typing i:nth-child(2){ animation-delay:.18s; }
.typing i:nth-child(3){ animation-delay:.36s; }
@keyframes blink{
  0%,60%,100%{ opacity:.28; transform:translateY(0); }
  30%        { opacity:.9;  transform:translateY(-3px); }
}

.phone-bar{
  display:flex; align-items:center; gap:8px;
  padding:10px 12px;
  background:var(--paper-dn);
  border-top:1px solid var(--rule-soft);
}
.phone-input{
  flex:1; background:#FFFDF9;
  border-radius:999px;
  padding:8px 14px;
  font-size:.82rem; color:var(--ink-3);
}
.phone-send{
  width:34px; height:34px; flex:0 0 34px;
  border-radius:50%;
  background:var(--green); color:#FFFDF9;
  display:grid; place-items:center;
}

.demo-cap{
  display:flex; align-items:center; gap:8px;
  font-size:.86rem; color:var(--ink-3);
  text-align:center;
}
.demo-cap strong{ color:var(--ink-2); font-weight:600; }
.pulse{
  width:7px; height:7px; border-radius:50%;
  background:var(--live);
  box-shadow:0 0 0 0 rgba(31,168,85,.5);
  animation:pulse 2s infinite;
}
@keyframes pulse{
  70% { box-shadow:0 0 0 9px rgba(31,168,85,0); }
  100%{ box-shadow:0 0 0 0 rgba(31,168,85,0); }
}

/* ---------- MANIFESTO ---------- */
.manifesto{
  padding:var(--s-6) 0;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  background:var(--paper-dn);
}
.manifesto-text{
  font-family:var(--serif);
  font-size:clamp(1.25rem, 2.5vw, 1.72rem);
  line-height:1.45;
  max-width:34ch;
  margin-inline:auto;
  text-align:left;
  letter-spacing:-.01em;
}
/* capitular, assinatura editorial */
.dropcap{
  float:left;
  font-family:var(--serif);
  font-size:3.3em;
  line-height:.78;
  padding:.06em .1em 0 0;
  color:var(--clay);
}

/* ---------- PASSOS ---------- */
.steps{
  display:grid;
  gap:0;
  border-top:1px solid var(--rule);
}
.step{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:var(--s-3);
  align-items:start;
  padding:var(--s-4) 0;
  border-bottom:1px solid var(--rule);
  transition:background .3s var(--ease);
}
.step:hover{ background:rgba(27,24,21,.018); }
.step-n{
  font-family:var(--serif);
  font-size:2.6rem;
  line-height:1;
  color:transparent;
  -webkit-text-stroke:1.2px var(--clay);
  width:1.7em;
}
.step-body h3{ font-size:1.5rem; margin-bottom:8px; }
.step-body p{ color:var(--ink-2); max-width:62ch; }

/* Os três passos alinham na mesma coluna. A variação vem da medida do
   texto (abaixo), não de recuo: recuo progressivo lê como erro de alinhamento. */
.step:nth-child(1) .step-body p{ max-width:56ch; }
.step:nth-child(2) .step-body p{ max-width:50ch; }
.step:nth-child(3) .step-body p{ max-width:58ch; }

/* ---------- CALCULADORA ---------- */
.calc-section{ background:var(--paper-dn); border-bottom:1px solid var(--rule); }
.calc-grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:var(--s-5);
  align-items:center;
}
.calc-copy h2{ font-size:clamp(1.9rem, 4vw, 2.9rem); }

.calc-control{ margin-top:var(--s-4); }
.calc-control label{
  display:block;
  font-size:.86rem; font-weight:600; color:var(--ink-3);
  margin-bottom:4px;
}
.calc-out{
  display:block;
  font-family:var(--serif);
  font-size:2rem;
  color:var(--green);
  margin-bottom:var(--s-2);
  font-variant-numeric:tabular-nums;
}

input[type="range"]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:44px;
  background:transparent;
  cursor:pointer;
}
input[type="range"]::-webkit-slider-runnable-track{
  height:3px; border-radius:2px;
  background:rgba(27,24,21,.2);
}
input[type="range"]::-moz-range-track{
  height:3px; border-radius:2px;
  background:rgba(27,24,21,.2);
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:26px; height:26px; margin-top:-11.5px;
  border-radius:50%;
  background:var(--green);
  border:3px solid var(--paper-up);
  box-shadow:0 2px 6px rgba(27,24,21,.22);
  transition:transform .18s var(--ease);
}
input[type="range"]::-moz-range-thumb{
  width:20px; height:20px;
  border-radius:50%;
  background:var(--green);
  border:3px solid var(--paper-up);
  box-shadow:0 2px 6px rgba(27,24,21,.22);
}
input[type="range"]:hover::-webkit-slider-thumb{ transform:scale(1.12); }
input[type="range"]:active::-webkit-slider-thumb{ transform:scale(1.04); }

.calc-help{ font-size:.85rem; color:var(--ink-3); margin-top:10px; max-width:44ch; }

.calc-result{
  background:var(--paper-up);
  border:1px solid var(--rule);
  border-radius:14px;
  padding:var(--s-4);
  box-shadow:0 1px 2px rgba(27,24,21,.04), 0 18px 40px -28px rgba(27,24,21,.4);
}
.calc-row + .calc-row{ margin-top:var(--s-4); }
.calc-row-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--s-2);
  margin-bottom:10px;
}
.calc-tag{ font-size:.94rem; color:var(--ink-2); }
.calc-tag b{ font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }
.calc-time{
  font-family:var(--serif); font-size:1.65rem; font-weight:400;
  font-variant-numeric:tabular-nums;
}
.calc-row--bad  .calc-time{ color:var(--clay); }
.calc-row--good .calc-time{ color:var(--green); }

.calc-bar{
  height:9px; border-radius:999px;
  background:rgba(27,24,21,.08);
  overflow:hidden;
}
.calc-bar i{
  display:block; height:100%; border-radius:999px;
  transition:width .5s var(--ease);
}
.calc-row--bad  .calc-bar i{ background:var(--clay); opacity:.55; }
.calc-row--good .calc-bar i{ background:var(--green); }
.calc-note{ font-size:.85rem; color:var(--ink-3); margin-top:8px; }

.calc-numbers{
  display:flex; flex-wrap:wrap; gap:7px;
  margin-top:var(--s-4);
  padding-top:var(--s-3);
  border-top:1px solid var(--rule-soft);
}
.calc-chip{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.8rem; font-weight:500;
  padding:6px 12px;
  border-radius:999px;
  background:var(--green-tint);
  color:var(--green-dark);
  animation:pop .3s var(--ease) both;
}
.calc-chip::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--live);
}

/* ---------- COEXISTÊNCIA ---------- */
.coex-grid{
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:var(--s-5);
  align-items:start;
}
.coex-text > p{ color:var(--ink-2); max-width:60ch; }

.pullquote{
  font-family:var(--serif);
  font-size:clamp(1.3rem, 2.4vw, 1.75rem);
  line-height:1.35;
  color:var(--ink);
  margin:var(--s-4) 0;
  padding-left:var(--s-3);
  border-left:2.5px solid var(--clay);
  max-width:32ch;
}

.coex-points{ margin-top:var(--s-4); }
.coex-points li{
  padding:var(--s-3) 0;
  border-top:1px solid var(--rule);
  color:var(--ink-2);
  max-width:58ch;
}
.coex-points li:last-child{ border-bottom:1px solid var(--rule); }
.coex-points strong{ color:var(--ink); font-weight:600; }

/* Painel da conta (substitui o organograma: linhas retas, tudo alinhado) */
.acct{
  background:var(--paper-up);
  border:1px solid var(--rule);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 1px 2px rgba(27,24,21,.04), 0 18px 40px -28px rgba(27,24,21,.4);
}

.acct-head{
  display:flex; flex-direction:column; gap:2px;
  padding:var(--s-3);
  background:var(--green);
  color:#FFFDF9;
}
.acct-title{ font-family:var(--serif); font-size:1.16rem; }
.acct-sub{ font-size:.82rem; color:rgba(255,253,249,.78); }

.acct-lines{ padding:4px var(--s-3); }
.acct-line{
  display:grid;
  grid-template-columns:auto 3.4em 1fr auto;
  align-items:center;
  gap:10px;
  padding:13px 0;
}
.acct-line + .acct-line{ border-top:1px solid var(--rule-soft); }

.acct-dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--live);
  box-shadow:0 0 0 0 rgba(31,168,85,.45);
  animation:pulse 2.4s infinite;
}
.acct-line:nth-child(2) .acct-dot{ animation-delay:.5s; }
.acct-line:nth-child(3) .acct-dot{ animation-delay:1s; }

.acct-n{
  font-family:var(--serif);
  font-size:.98rem;
  font-variant-numeric:tabular-nums;
}

.acct-bar{
  height:5px;
  border-radius:999px;
  background:rgba(27,24,21,.09);
  overflow:hidden;
}
.acct-bar i{
  display:block; height:100%;
  border-radius:999px;
  background:var(--green);
  opacity:.8;
  width:var(--fill);
}
/* preenche quando o bloco entra na tela */
.js .coex-visual .acct-bar i{ width:0; transition:width .9s var(--ease); }
.js .coex-visual.visible .acct-bar i{ width:var(--fill); }
.js .coex-visual.visible .acct-line:nth-child(2) .acct-bar i{ transition-delay:.1s; }
.js .coex-visual.visible .acct-line:nth-child(3) .acct-bar i{ transition-delay:.2s; }

.acct-rate{
  font-size:.84rem;
  color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}
.acct-rate span{ opacity:.7; }

.acct-foot{
  display:flex; align-items:baseline; justify-content:space-between;
  padding:var(--s-2) var(--s-3);
  border-top:1px solid var(--rule);
  background:var(--paper-dn);
  font-size:.86rem;
  color:var(--ink-2);
}
.acct-foot strong{
  font-family:var(--serif);
  font-size:1.16rem;
  font-weight:400;
  color:var(--green);
  font-variant-numeric:tabular-nums;
}

/* ---------- FEATURES (lista editorial, não card grid) ---------- */
.feats{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:0 var(--s-5);
  border-top:1px solid var(--rule);
}
.feat{
  padding:var(--s-3) 0;
  border-bottom:1px solid var(--rule);
}
.feat h3{
  font-size:1.28rem;
  margin-bottom:5px;
}
.feat p{ color:var(--ink-2); font-size:.98rem; max-width:46ch; }

/* ---------- PLANOS ---------- */
.plans-section{ background:var(--paper-dn); border-top:1px solid var(--rule); }
.plans{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--s-3);
  align-items:start;
}
.plan{
  background:var(--paper-up);
  border:1px solid var(--rule);
  border-radius:14px;
  padding:var(--s-4) var(--s-3);
  display:flex; flex-direction:column;
  transition:transform .28s var(--ease), box-shadow .28s var(--ease);
}
.plan:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 38px -24px rgba(27,24,21,.45);
}
.plan--pick{
  border-color:var(--green);
  border-width:1.5px;
  position:relative;
}
.plan-flag{
  position:absolute; top:-12px; left:var(--s-3);
  background:var(--green); color:#FFFDF9;
  font-size:.74rem; font-weight:600;
  padding:5px 12px;
  border-radius:999px;
}
.plan h3{ font-size:1.6rem; margin-bottom:5px; }
.plan-desc{ color:var(--ink-3); font-size:.92rem; min-height:2.9em; }
.plan-price{
  font-family:var(--serif);
  font-size:1.5rem;
  color:var(--green);
  margin:var(--s-2) 0 var(--s-3);
  padding-bottom:var(--s-3);
  border-bottom:1px solid var(--rule);
}
.plan-list{ margin-bottom:var(--s-4); flex:1; }
.plan-list li{
  position:relative;
  padding:7px 0 7px 24px;
  font-size:.95rem;
  color:var(--ink-2);
}
.plan-list li::before{
  content:"";
  position:absolute; left:2px; top:.95em;
  width:9px; height:5px;
  border-left:1.8px solid var(--green);
  border-bottom:1.8px solid var(--green);
  transform:rotate(-45deg);
}

/* ---------- FAQ ---------- */
.faq-grid{
  display:grid;
  grid-template-columns:.7fr 1.3fr;
  gap:var(--s-5);
  align-items:start;
}
.faq-grid .sec-head{ margin-bottom:0; position:sticky; top:110px; }

.faq-item{ border-bottom:1px solid var(--rule); }
.faq-item:first-child{ border-top:1px solid var(--rule); }
.faq-q{
  width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-2);
  padding:var(--s-3) 0;
  min-height:56px;
  font-family:var(--serif);
  font-size:1.22rem;
  line-height:1.25;
  text-align:left;
  color:var(--ink);
  transition:color .2s var(--ease);
}
.faq-q:hover{ color:var(--green); }

.faq-sign{
  position:relative; flex:0 0 18px; width:18px; height:18px;
}
.faq-sign::before,.faq-sign::after{
  content:""; position:absolute; left:50%; top:50%;
  background:var(--clay);
  transform:translate(-50%,-50%);
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.faq-sign::before{ width:15px; height:1.8px; }
.faq-sign::after { width:1.8px; height:15px; }
.faq-q[aria-expanded="true"] .faq-sign::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; }

.faq-a{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .34s var(--ease);
}
.faq-a > div{ overflow:hidden; }
.faq-a[data-open="true"]{ grid-template-rows:1fr; }
.faq-a p{
  color:var(--ink-2);
  max-width:62ch;
  padding-bottom:var(--s-3);
}

/* ---------- CONTATO ---------- */
.contact-section{ background:var(--paper-dn); border-top:1px solid var(--rule); }
.contact-grid{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:var(--s-5);
  align-items:start;
}
.contact-copy h2{ font-size:clamp(2rem, 4.2vw, 3rem); }

.contact-meta{ margin-top:var(--s-4); }
.contact-meta > div{
  padding:var(--s-2) 0;
  border-top:1px solid var(--rule);
}
.contact-meta dt{ font-size:.8rem; font-weight:600; color:var(--ink-3); }
.contact-meta dd{ font-size:1rem; margin-top:2px; }
.contact-meta a{ border-bottom:1.5px solid var(--green); }

.contact-form{
  background:var(--paper-up);
  border:1px solid var(--rule);
  border-radius:14px;
  padding:var(--s-4);
  box-shadow:0 1px 2px rgba(27,24,21,.04), 0 18px 40px -28px rgba(27,24,21,.4);
}
.f-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-3); }
.field{ margin-bottom:var(--s-3); }
.field label{
  display:block;
  font-size:.85rem; font-weight:600; color:var(--ink-2);
  margin-bottom:6px;
}
.field label span{ color:var(--clay-ink); }

.field input,.field select,.field textarea{
  width:100%;
  background:transparent;
  border:0;
  border-bottom:1.5px solid var(--rule);
  border-radius:0;
  padding:11px 2px;
  min-height:46px;
  font-size:1rem;
  transition:border-color .22s var(--ease);
}
.field textarea{ resize:vertical; min-height:70px; }
.field select{
  cursor:pointer;
  -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236E6459' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 4px center;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;
  border-bottom-color:var(--green);
  border-bottom-width:2px;
}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:none;
}
.field input::placeholder,.field textarea::placeholder{ color:var(--ink-3); opacity:.65; }

.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form-status{ font-size:.92rem; margin-top:var(--s-2); min-height:1.4em; }
.form-status.ok { color:var(--green); }
.form-status.err{ color:#B23A26; }
.form-status a{ border-bottom:1.5px solid currentColor; }

/* ---------- FOOTER ---------- */
.site-footer{
  border-top:1px solid var(--rule);
  padding:var(--s-5) 0 var(--s-4);
}
.footer-grid{
  display:grid;
  grid-template-columns:1fr 1.5fr;
  gap:var(--s-5);
  padding-bottom:var(--s-4);
}
/* O logo-wordmark.png é texto branco, feito pro site escuro antigo:
   no papel claro ele some. Aqui o nome vai em Calistoga, como no topo. */
.footer-brand .brand{ margin-bottom:var(--s-2); }
.footer-brand .brand img{ width:30px; height:30px; }
.footer-brand p{ color:var(--ink-3); font-size:.94rem; max-width:34ch; }

.footer-links{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-3); }
.footer-links h4{
  font-family:var(--sans);
  font-size:.8rem; font-weight:600; color:var(--ink-3);
  margin-bottom:10px;
}
.footer-links li{ margin-bottom:7px; }
.footer-links a{
  font-size:.94rem; color:var(--ink-2);
  border-bottom:1.5px solid transparent;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.footer-links a:hover{ color:var(--ink); border-color:var(--clay); }

.footer-bottom{
  border-top:1px solid var(--rule);
  padding-top:var(--s-3);
  font-size:.85rem;
  color:var(--ink-3);
}

/* ---------- REVEAL ----------
   Só esconde se houver JS para revelar. Sem JS, tudo nasce visível. */
.js .reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .38s var(--ease), transform .38s var(--ease);
}
.js .reveal.visible{ opacity:1; transform:none; }

/* ============================================================
   RESPONSIVO: 1024 / 768 / 480
   ============================================================ */
@media (max-width:1024px){
  .hero-grid,.calc-grid,.coex-grid,.contact-grid,.faq-grid{
    grid-template-columns:1fr;
  }
  .hero-demo{ order:-1; }
  .faq-grid .sec-head{ position:static; }
  .sec-head{ max-width:30ch; }
  .footer-grid{ grid-template-columns:1fr; gap:var(--s-4); }
}

@media (max-width:860px){
  .main-nav{
    position:absolute; inset:72px 0 auto 0;
    background:var(--paper);
    border-bottom:1px solid var(--rule);
    padding:var(--s-2) 22px var(--s-3);
    display:none;
  }
  .main-nav.open{ display:block; }
  .main-nav ul{ flex-direction:column; gap:0; }
  .main-nav a{
    display:block;
    padding:14px 0;
    min-height:48px;
    border-bottom:1px solid var(--rule-soft);
  }
  .nav-toggle{ display:flex; order:3; }
  .masthead-actions .link-quiet{ display:none; }
  .brand{ margin-right:auto; }
}

@media (max-width:768px){
  body{ font-size:16px; }
  section{ padding:var(--s-5) 0; }
  .wrap{ width:calc(100% - 36px); }
  .feats{ grid-template-columns:1fr; }
  .plans{ grid-template-columns:1fr; }
  .plan--pick{ order:-1; }
  .f-row{ grid-template-columns:1fr; gap:0; }
  .step:nth-child(2) .step-body,
  .step:nth-child(3) .step-body{ padding-left:0; }
  .manifesto-text{ max-width:none; }
  .calc-result,.contact-form{ padding:var(--s-3); }
}

@media (max-width:480px){
  .hero h1{ font-size:2.35rem; }
  .hero-ctas{ flex-direction:column; align-items:stretch; }
  .hero-ctas .btn{ width:100%; }
  .step{ grid-template-columns:1fr; gap:var(--s-1); }
  .step-n{ font-size:2rem; }
  .footer-links{ grid-template-columns:1fr 1fr; }
  .calc-row-head{ flex-direction:column; gap:2px; }
}

/* ---------- MOVIMENTO REDUZIDO ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .phone{ transform:none; }
}

/* ---------- IMPRESSÃO ---------- */
@media print{
  body::before,.masthead,.hero-demo,.contact-form{ display:none; }
  body{ background:#fff; }
}