/* ============================================================
   STYLES: mobile-first (~480px). "Grace/restoration" palette (leva
   do dono): warm cream, deep green CTAs, soft green surfaces, gold
   accents. Inter, no serif. Mockups are NO LONGER dark app screens:
   they are light, soft cards (white or soft-green) with green/gold
   accents, matching the funnel. No alarm/vigilance/cybersecurity
   visual language anywhere (no red, no dark "hacker" cards).
   ============================================================ */
:root {
  --bg: #F8F6F1;
  --card: #FFFFFF;
  --surface-soft: #F1ECE1;
  --text: #1E1E1E;
  --text-secondary: #8B8B8B;
  --muted: #ABA79E;
  --border: #E8E2D6;
  --green: #214D3E;
  --green-light: #DCE8E1;
  --gold: #C8A24A;
  --gold-ink: #7C6329;
  --gold-deep: #A9873B;
  --danger: #B3402B;
  --danger-surface: rgba(179, 64, 43, 0.08);
  --orange: #E8763A;
  --shadow: 0 4px 18px rgba(31, 31, 31, 0.08);
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: "Lora", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.5;
  touch-action: manipulation;
}

#app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  position: relative;
}

a { color: var(--text-secondary); }
:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
button { font-family: var(--font-body); }

/* ---------- Topbar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 10; background: var(--bg);
  padding: max(14px, env(safe-area-inset-top)) 20px 0;
}
.header { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 32px; margin-bottom: 10px; }
.back-btn {
  border: none; background: none; font-size: 20px; cursor: pointer; color: var(--text);
  padding: 6px 8px; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: flex-start;
  flex: none;
}
.wordmark-mini {
  font-family: var(--font-serif); font-weight: 700; font-size: 18px; letter-spacing: 0; color: var(--text);
  text-align: center; flex: 1;
}
.start-over-btn {
  border: none; background: none; color: var(--muted); font-size: 12px; font-weight: 500;
  cursor: pointer; padding: 6px 4px; min-height: 44px; text-decoration: underline; flex: none;
}
.progress { height: 4px; background: var(--border); border-radius: 999px; overflow: hidden; margin-bottom: 10px; }
.progress-bar { height: 100%; width: 0; background: var(--green); border-radius: 999px; transition: width 300ms ease; }

/* ---------- Screen ---------- */
.screen {
  flex: 1; padding: 16px 20px 24px; display: flex; flex-direction: column;
  justify-content: center;
  animation: screenIn 280ms ease;
}
@keyframes screenIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .screen { animation: none; }
}

h1.q-title {
  font-family: var(--font-body); font-size: 28px; line-height: 1.18; font-weight: 700;
  letter-spacing: -0.03em; margin: 4px 0 18px; color: var(--text);
}
.q-title-center { text-align: center; }
.q-title-left { text-align: left; }
p.q-sub { color: var(--text-secondary); font-size: 16px; line-height: 1.55; margin: 0 0 18px; }
.q-sub-left { text-align: left; }
.q-sub-center { text-align: center; }
.accent { color: var(--gold-deep); }

/* ---------- Marca (logo do app: quadrado dourado com "S" serifado + wordmark serifado) ---------- */
.brand-mark {
  flex: none; width: 32px; height: 32px; border-radius: 9px;
  background: linear-gradient(135deg, #E7C878, #C39A3E);
  color: #fff; font-family: var(--font-serif); font-weight: 700; font-size: 20px;
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
  box-shadow: 0 1px 4px rgba(163, 135, 59, 0.35);
}
.brand-name { font-family: var(--font-serif); font-weight: 700; font-size: 21px; color: var(--text); letter-spacing: 0; text-transform: none; }

/* ---------- T0 Landing ---------- */
.landing-wordmark {
  display: flex; align-items: center; justify-content: flex-start; gap: 9px;
  margin: 8px 0 40px;
}
h1.landing-h1 {
  font-family: var(--font-body); font-size: 40px; line-height: 1.06; font-weight: 700;
  letter-spacing: -0.035em; margin: 0 0 16px; text-align: left; color: var(--text);
}
p.landing-sub { color: var(--text-secondary); font-size: 16px; line-height: 1.55; margin: 0; text-align: left; }
p.landing-sub + p.landing-sub { margin-top: 12px; }
p.landing-sub.landing-sub-stack { margin-bottom: 0; }
.landing-sub-line { display: block; font-weight: 600; color: var(--text); }
.landing-kicker { margin: 12px 0 0; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-deep); }
.landing-demo { margin: 18px 0 4px; }
.landing-demo .img-slot { width: 100%; height: auto; border-radius: 16px; }
.landing-creds { list-style: none; margin: 20px 0 4px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.landing-creds li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text); font-weight: 500; }
.landing-cred-check { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--green); color: #fff; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; }
.landing-age-prompt { margin: 24px 0 10px; font-size: 15px; font-weight: 600; color: var(--text); }
.landing-ages { display: flex; flex-direction: column; gap: 10px; }
.landing-age { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 16px 18px; border: 1.5px solid var(--border, #E4E0D8); border-radius: 14px; background: var(--card); color: var(--text); font-size: 16px; font-weight: 600; cursor: pointer; transition: border-color .15s, background .15s; }
.landing-age:hover { border-color: var(--green); }
.landing-age.selected { border-color: var(--green); background: rgba(33,77,62,0.06); }
.landing-age .opt-radio { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--muted); position: relative; }
.landing-age.selected .opt-radio { border-color: var(--green); }
.landing-age.selected .opt-radio::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--green); }
.landing-privacy { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 16px 0 0; font-size: 12.5px; color: var(--muted); font-weight: 500; text-align: center; }
.landing-footer { text-align: center; font-size: 12px; color: var(--muted); margin-top: 16px; }
.landing-footer a { color: var(--muted); text-decoration: underline; }
@media (max-width: 360px) {
  h1.landing-h1 { font-size: 34px; }
}

/* ---------- Options (cards de resposta) ---------- */
.options { display: flex; flex-direction: column; gap: 12px; }
.option {
  display: flex; align-items: center; gap: 12px;
  background: var(--card); border: 1px solid var(--border); color: var(--text);
  text-align: left; padding: 16px 18px; border-radius: 14px; min-height: 58px;
  font-size: 16px; font-weight: 500; line-height: 1.35;
  cursor: pointer; width: 100%; font-family: var(--font-body);
  transition: border-color 150ms, box-shadow 150ms, background 150ms, transform 100ms;
}
.option:active { transform: scale(0.99); }
@media (hover: hover) {
  .option:hover { background: var(--surface-soft); border-color: var(--muted); transform: translateY(-1px); }
}
.option.selected {
  background: var(--green-light); border-color: var(--green);
  box-shadow: 0 0 0 1.5px var(--green);
}
.option .emoji { font-size: 21px; flex: none; }
.option .opt-label { flex: 1; }
.option .opt-radio {
  flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #D2CFC4;
  position: relative; background: #fff;
}
.option.selected .opt-radio { border-color: var(--green); background: var(--green); }
.option.selected .opt-radio::after {
  content: ""; position: absolute; inset: 6px; border-radius: 50%; background: #fff;
}

.privacy-footer { text-align: center; font-size: 13px; color: var(--muted); margin-top: 18px; }

/* ---------- Icon badge / decorative rows ---------- */
.icon-badge {
  width: 60px; height: 60px; border-radius: 50%; background: var(--green-light);
  border: 1px solid var(--border); display: flex; align-items: center; justify-content: center;
  font-size: 26px; margin: 4px auto 16px;
}
.stars-row { text-align: center; margin-bottom: 10px; }
.star { color: var(--gold); font-size: 18px; margin: 0 1px; }
.laurel-row { text-align: center; margin-bottom: 8px; font-size: 16px; }
.verse-block { border-left: 3px solid var(--green); padding-left: 14px; margin: 8px 0 18px; }
.verse-text { font-family: var(--font-body); font-size: 15px; font-style: italic; color: var(--text); line-height: 1.55; margin: 0 0 6px; }
.verse-ref { font-size: 12px; color: var(--muted); margin: 0; }

/* ---------- Mockup slots: telas do app, agora CLARAS e suaves (sem alarme) ---------- */
.mockup-slot { margin: 16px 0 6px; }
.img-slot { display: block; width: 100%; height: auto; border-radius: 16px; object-fit: cover; background: var(--surface-soft); }

/* T6 interstitialHighRisk mockup */
.app-mockup {
  background: var(--card); border: 1px solid var(--border); border-radius: 20px;
  padding: 20px; box-shadow: var(--shadow); position: relative;
}
.app-mockup-tag {
  display: inline-block; background: var(--green-light); color: var(--green);
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px; margin-bottom: 12px;
}
.app-mockup-tag-gold { background: rgba(200, 162, 74, 0.18); color: var(--gold-ink); }
.app-mockup-icon { font-size: 26px; margin-bottom: 4px; }
.app-mockup-title { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); margin-top: 4px; }
.app-mockup-time { font-family: var(--font-body); font-size: 24px; font-weight: 700; color: var(--green); margin: 6px 0 10px; letter-spacing: -0.02em; }
.app-mockup-riskline { font-size: 13px; color: var(--text-secondary); line-height: 1.5; margin: 0 0 10px; }
.app-mockup-line { font-size: 12.5px; color: var(--green); font-weight: 600; line-height: 1.5; margin: 0 0 14px; }
.app-mockup-spark { width: 100%; height: 36px; display: block; margin-bottom: 14px; opacity: 0.55; }
.app-mockup-fakebtn {
  display: block; width: 100%; background: var(--green); color: #fff;
  border: none; border-radius: 12px; padding: 12px; font-size: 14px; font-weight: 700;
  cursor: default; pointer-events: none;
}

/* T9 interstitialIntervention: 3 cards conectados verticalmente (copy congelada, so estilo muda) */
.intervention-mockup { display: flex; flex-direction: column; align-items: stretch; }
.intervention-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 18px;
  padding: 18px; box-shadow: var(--shadow);
}
.intervention-connector { width: 2px; height: 20px; background: var(--green-light); margin: 0 auto; }
.intervention-icon { font-size: 24px; margin-bottom: 8px; }
.intervention-line { font-size: 15px; color: var(--text); font-weight: 600; margin: 0 0 4px; line-height: 1.4; }
.intervention-line-muted { font-weight: 400; color: var(--text-secondary); font-size: 14px; }
.intervention-context { font-size: 13.5px; color: var(--text-secondary); line-height: 1.5; margin: 0 0 10px; }
.intervention-quote { font-family: var(--font-body); font-style: italic; font-size: 15px; color: var(--green); line-height: 1.6; margin: 0; }
.intervention-steps { margin: 0 0 14px; padding-left: 20px; color: var(--text); font-size: 14px; line-height: 1.8; }
.intervention-steps li { padding-left: 2px; }

/* T14 interstitialCommunity: feed com posts */
.community-feed { display: flex; flex-direction: column; gap: 12px; }
.community-post {
  display: flex; gap: 12px; background: var(--card); border: 1px solid var(--border);
  border-radius: 16px; padding: 14px; box-shadow: var(--shadow);
}
.community-avatar {
  flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--green);
  color: #fff; font-weight: 700; font-size: 14px; display: flex;
  align-items: center; justify-content: center;
}
.community-post-body { flex: 1; min-width: 0; }
.community-post-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.community-name { font-weight: 700; font-size: 13.5px; color: var(--text); }
.community-status { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.community-quote { font-size: 13.5px; color: var(--text-secondary); line-height: 1.5; margin: 0 0 6px; font-style: italic; }
.community-encouragements { font-size: 11.5px; color: var(--green); font-weight: 600; }

/* ---------- T18 Loading ---------- */
.loading-circle { display: flex; justify-content: center; margin: 8px 0 22px; }
.loading-spinner {
  width: 64px; height: 64px; border-radius: 50%;
  border: 3px solid var(--border); border-top-color: var(--green);
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .loading-spinner { animation-duration: 2.4s; }
}
.loading-list { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-direction: column; gap: 12px; min-height: 108px; }
.loading-list li {
  font-size: 14px; color: var(--text); font-weight: 500; padding-left: 26px; position: relative;
  animation: screenIn 280ms ease;
}
.loading-list li::before {
  content: "✓"; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%;
  background: var(--green); color: #fff; font-size: 11px; display: flex;
  align-items: center; justify-content: center;
}

/* ---------- T19 Result ---------- */
.result-badge {
  text-align: center; color: var(--gold-deep); font-size: 12px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 10px;
}
.result-archetype {
  font-family: var(--font-body); font-size: 30px; line-height: 1.12; font-weight: 800;
  letter-spacing: -0.03em; text-align: center; color: var(--text); margin: 0 0 10px;
}
.result-archetype-sm { font-size: 20px; margin-bottom: 6px; }
.result-archetype-msg { text-align: center; color: var(--text-secondary); font-size: 15px; line-height: 1.55; margin: 0 0 22px; }
.result-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  padding: 20px; margin-bottom: 14px; box-shadow: var(--shadow);
}
.result-diagnosis { font-size: 15px; color: var(--text); line-height: 1.55; margin: 0 0 10px; }
.result-duration { font-size: 15px; color: var(--green); font-weight: 600; margin: 0; }
.result-sec-title { font-family: var(--font-body); font-size: 17px; font-weight: 700; color: var(--text); margin: 0 0 12px; letter-spacing: -0.015em; }
.result-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.result-checks li { font-size: 14.5px; color: var(--text); font-weight: 500; }
.cycle-diagram { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cycle-step {
  background: var(--surface-soft); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 16px; font-size: 13.5px; font-weight: 600; color: var(--text); text-align: center;
  width: 100%;
}
.cycle-step-loop { border-color: var(--danger); color: var(--danger); background: var(--danger-surface); }
.cycle-arrow { color: var(--muted); font-size: 14px; }
.result-why-p { font-size: 14.5px; color: var(--text-secondary); line-height: 1.6; margin: 0 0 10px; }
.result-why-p:last-child { margin-bottom: 0; }
.result-why-highlight { color: var(--green); font-weight: 600; }
.result-future-imagine { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 10px; }
.result-todayvs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.result-col { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.result-col-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 2px; }
.pill { display: inline-block; font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 999px; }
.pill-danger { background: var(--danger-surface); color: var(--danger); }
.pill-brand { background: var(--green-light); color: var(--green); }

/* ---------- Inputs ---------- */
.field { width: 100%; padding: 16px; font-size: 16px; border: 1.5px solid var(--border); border-radius: 12px; margin-bottom: 12px; background: var(--card); color: var(--text); font-family: var(--font-body); }
.field::placeholder { color: var(--muted); }
.field:focus { outline: none; border-color: var(--green); }
.privacy-box { background: var(--surface-soft); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; font-size: 12.5px; color: var(--text-secondary); margin-bottom: 12px; }

/* ---------- Email teaser (T20) ---------- */
.email-teaser { position: relative; margin: 4px 0 16px; }
.email-teaser-card {
  background: var(--surface-soft); border: 1px solid var(--border); border-radius: 16px; padding: 20px;
  filter: blur(6px); pointer-events: none; user-select: none;
}
.email-teaser-lock {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 40px; height: 40px; border-radius: 50%; background: var(--card); box-shadow: var(--shadow);
  display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.email-inbox-line { font-size: 12.5px; color: var(--muted); text-align: center; margin: 0 0 12px; }

/* ---------- Modals (email consent + wheel) ---------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(31, 31, 31, 0.45); z-index: 50;
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.modal-overlay[hidden] { display: none; }
.modal-card {
  background: var(--card); border-radius: 18px;
  padding: 26px 22px; max-width: 360px; width: 100%; text-align: center; box-shadow: 0 12px 32px rgba(31, 31, 31, 0.2);
}
.modal-title { font-size: 18px; font-weight: 700; margin: 0 0 10px; color: var(--text); }
.modal-body { font-size: 13.5px; color: var(--text-secondary); line-height: 1.55; margin: 0 0 18px; }
.modal-link { display: block; width: 100%; background: none; border: none; color: var(--muted); font-size: 13px; margin-top: 10px; padding: 10px; cursor: pointer; text-decoration: underline; font-family: var(--font-body); min-height: 44px; }

/* ---------- Wheel ("Before revealing your plan...") ---------- */
.wheel-modal-card { position: relative; padding-top: 34px; }
.modal-close {
  position: absolute; top: 8px; right: 10px; background: none; border: none; font-size: 22px;
  color: var(--muted); cursor: pointer; line-height: 1; padding: 10px; min-width: 44px; min-height: 44px;
}
.wheel-subtitle { font-size: 13.5px; color: var(--text-secondary); margin: 0 0 6px; line-height: 1.5; }
.wheel-wrap { position: relative; width: 200px; height: 200px; margin: 16px auto 20px; }
.wheel-pointer {
  position: absolute; top: -6px; left: 50%; transform: translateX(-50%); font-size: 18px;
  color: var(--green); z-index: 2;
}
.wheel {
  width: 100%; height: 100%; border-radius: 50%; position: relative;
  background: conic-gradient(
    var(--green) 0deg 36deg, var(--gold-deep) 36deg 72deg,
    var(--green) 72deg 108deg, var(--gold-deep) 108deg 144deg,
    var(--green) 144deg 180deg, var(--gold-deep) 180deg 216deg,
    var(--green) 216deg 252deg, var(--gold-deep) 252deg 288deg,
    var(--green) 288deg 324deg, var(--gold-deep) 324deg 360deg
  );
  box-shadow: var(--shadow); border: 4px solid var(--card);
}
.wheel-seg {
  position: absolute; top: 50%; left: 50%; width: 32px; margin-left: -16px; margin-top: -8px;
  text-align: center; color: #fff; font-weight: 800; font-size: 10.5px; transform-origin: center;
}
.wheel-center {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px;
  border-radius: 50%; background: var(--card); box-shadow: var(--shadow); display: flex;
  align-items: center; justify-content: center; font-size: 16px; z-index: 1;
}

/* ---------- Paywall: header (secao 1) ---------- */
.pw-header { text-align: center; margin-bottom: 20px; }
.pw-check { width: 40px; height: 40px; border-radius: 50%; background: var(--green); color: #fff; font-size: 18px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; }
.pw-header-title { font-family: var(--font-body); font-size: 23px; font-weight: 700; letter-spacing: -0.025em; margin: 0 0 14px; color: var(--text); }
.pw-freedom-label { font-size: 12.5px; color: var(--muted); margin: 0 0 6px; text-transform: uppercase; letter-spacing: 0.05em; }
.pw-freedom-pill { display: inline-block; background: var(--card); border: 1.5px solid var(--green); border-radius: 999px; padding: 9px 20px; font-weight: 600; font-size: 14.5px; color: var(--green); box-shadow: var(--shadow); }

/* ---------- Paywall: personal summary (secao 2) ---------- */
.summary-card { background: var(--surface-soft); border: 1px solid var(--border); border-radius: 16px; padding: 18px; margin-bottom: 22px; }
.summary-title { font-size: 15px; font-weight: 700; margin: 0 0 12px; text-align: center; color: var(--text); }
.pattern-row { display: flex; flex-direction: column; gap: 3px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.pattern-row:last-child { border-bottom: none; }
.pattern-label { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.pattern-value { font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.4; }
.pattern-value-danger { color: var(--danger); }

/* ---------- Paywall: prayer (agora antes do comparativo) ---------- */
.prayer-label { font-size: 14px; text-align: center; color: var(--text-secondary); margin: 0 0 10px; font-weight: 600; }
.prayer-card { background: #FBF3E3; border: 1px solid #E3C98C; border-radius: 16px; padding: 22px 20px; margin-bottom: 24px; }
.prayer-text { font-size: 16px; line-height: 1.75; color: var(--text); }
.prayer-text .word { opacity: 0; display: inline-block; animation: wordIn 350ms ease forwards; }
@keyframes wordIn { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }
.prayer-placeholder { color: var(--muted); font-style: italic; }
.prayer-verse { font-size: 12.5px; color: var(--green); margin: 16px 0 0; text-align: right; font-style: italic; }
@media (prefers-reduced-motion: reduce) {
  .prayer-text .word { animation: none; opacity: 1; }
}

/* ---------- Paywall: Today vs Freedom Date (mockup 2 phones claro + barras) ---------- */
.pw-sec-title { font-family: var(--font-body); font-size: 17px; font-weight: 700; margin: 26px 0 12px; color: var(--text); letter-spacing: -0.015em; }
.pw-sec-title-center { text-align: center; }
.pw-sec-title-serif { font-family: var(--font-body); font-weight: 700; font-size: 21px; letter-spacing: -0.025em; }

.phones-mockup { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; align-items: stretch; }
.phone-card { border-radius: 16px; padding: 16px 14px; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.phone-card-left { background: var(--card); border: 1.5px solid rgba(200, 162, 74, 0.5); }
.phone-card-right { background: var(--green-light); border: 1px solid rgba(33, 77, 62, 0.25); }
.phone-lines, .phone-checks { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px; flex: 1; justify-content: center; }
.phone-lines li, .phone-checks li { display: flex; align-items: center; gap: 9px; font-size: 13px; line-height: 1.3; }
.phone-lines li { color: var(--text); }
.phone-checks li { color: var(--green); font-weight: 600; }
.pl-mark { flex: none; display: inline-flex; align-items: center; justify-content: center; }
.pl-mark-warn { width: 7px; height: 7px; border-radius: 50%; background: var(--gold-deep); }
.pl-mark-check { color: var(--green); font-weight: 700; font-size: 13px; }

.today-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.today-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 14px; box-shadow: var(--shadow); }
.today-card-future { border-color: var(--green); }
.today-card-label { font-weight: 700; font-size: 12.5px; text-align: center; margin-bottom: 10px; color: var(--text); }
.today-dim { margin-bottom: 10px; }
.today-dim:last-child { margin-bottom: 0; }
.today-dim-name { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 1px; }
.today-dim-label { font-size: 10.5px; font-weight: 600; color: var(--text-secondary); margin-bottom: 4px; }
.today-dim-track { height: 6px; border-radius: 99px; background: var(--border); overflow: hidden; }
.today-dim-fill { display: block; height: 100%; border-radius: 99px; width: 0; transition: width 1s cubic-bezier(0.16, 0.84, 0.44, 1); }
.today-dim-fill-danger { background: var(--orange); }
.today-dim-fill-brand { background: var(--green); }

/* ---------- Paywall: How Stronghold Works ---------- */
.mech-pills { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; margin: 4px 0 18px; }
.mech-pill { border-radius: 999px; padding: 7px 12px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.mech-pill-gray { background: var(--surface-soft); color: var(--text-secondary); border: 1px solid var(--border); }
.mech-pill-dark { background: var(--green); color: #fff; font-size: 13px; padding: 9px 14px; box-shadow: var(--shadow); }
.mech-pill-soft { background: var(--green-light); color: var(--green); border: 1px solid var(--green); }
.mech-arrow { color: var(--muted); font-weight: 700; font-size: 14px; }
.mech-steps { display: flex; flex-direction: column; gap: 12px; margin-bottom: 4px; }
.mech-step { display: flex; gap: 12px; align-items: center; }
.mech-step-num {
  flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--green); color: #fff;
  font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 13px;
}
.mech-step-text { font-size: 14.5px; color: var(--text); font-weight: 500; }

/* ---------- Paywall: benefícios (6 checks ICP) ---------- */
.benefit-checks { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.benefit-check { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; font-size: 14px; font-weight: 600; color: var(--text); box-shadow: var(--shadow); }

/* ---------- Paywall: 4 fases ---------- */
.plan-timeline { display: flex; flex-direction: column; gap: 10px; }
.plan-step { display: flex; gap: 12px; align-items: center; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 13px 14px; }
.plan-step-num { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--green); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 13px; }
.plan-step-title { font-weight: 600; font-size: 13.5px; color: var(--text); }
.plan-step-days { font-size: 12px; color: var(--muted); margin-top: 2px; }

.milestones { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; }
.milestone { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; }
.milestone-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--border); border: 2px solid var(--muted); }
.milestone-final .milestone-dot { background: var(--green); border-color: var(--green); }
.milestone-label { font-size: 11px; color: var(--muted); }
.milestone-final .milestone-label { color: var(--green); font-weight: 700; }
.milestone-caption { font-size: 12.5px; color: var(--text-secondary); text-align: center; margin-top: 10px; line-height: 1.5; }
.arc-line { font-size: 12.5px; color: var(--text-secondary); text-align: center; line-height: 1.55; margin: 14px 0 0; padding: 12px; background: var(--surface-soft); border-radius: 12px; }

/* ---------- Paywall: included table ---------- */
.included-table { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--card); }
.included-row { display: grid; grid-template-columns: 1fr 64px 90px; align-items: center; padding: 11px 10px; border-bottom: 1px solid var(--border); }
.included-row:last-child { border-bottom: none; }
.included-row-head { background: var(--surface-soft); padding: 9px 10px; }
.included-feature { font-size: 12.5px; color: var(--text); font-weight: 500; padding-right: 6px; }
.included-col-without, .included-col-return { text-align: center; font-size: 13px; font-weight: 700; }
.included-col-without { color: var(--muted); }
.included-col-return { color: var(--green); }
.included-row-head .included-col-return { color: var(--green); font-size: 10.5px; letter-spacing: 0.04em; }
.included-row-head .included-col-without { font-size: 10.5px; letter-spacing: 0.04em; }

/* ---------- Review cards + carrossel ---------- */
.review-cards { display: flex; gap: 12px; margin: 4px 0 18px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
.review-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; flex: 0 0 78%; scroll-snap-align: start; box-shadow: var(--shadow); }
.review-photo { background: var(--surface-soft); color: var(--muted); font-size: 11px; aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center; }
.review-body { padding: 12px 14px 14px; }
.review-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.review-name { font-size: 12.5px; font-weight: 700; color: var(--text); }
.review-badge { font-size: 11px; font-weight: 700; color: var(--gold-ink); white-space: nowrap; }
.review-quote { font-size: 12.5px; color: var(--text-secondary); line-height: 1.55; font-style: italic; margin: 0; }
.review-stars { margin-bottom: 4px; }
.review-stars .star { font-size: 12px; margin: 0; letter-spacing: 1px; }

/* Carrossel swipeável de reviews (paywall): scroll-snap nativo + dots pill */
.review-carousel { margin: 4px 0 18px; }
.review-carousel-track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 2px; scrollbar-width: none; }
.review-carousel-track::-webkit-scrollbar { display: none; }
.review-carousel-track .review-card { flex: 0 0 86%; scroll-snap-align: start; }
/* Spacer no fim: dá espaço de scroll p/ o ÚLTIMO card alinhar ao início (senão fica só meio visível) */
.review-carousel-track::after { content: ""; flex: 0 0 14%; }
.review-carousel-dots { display: flex; justify-content: center; gap: 7px; margin-top: 12px; }
.rc-dot { width: 7px; height: 7px; padding: 0; border: none; border-radius: 50%; background: var(--border); cursor: pointer; transition: background .2s, width .2s; }
.rc-dot.active { width: 18px; border-radius: 4px; background: var(--green); }
.review-carousel-stage { position: relative; }
.rc-arrow { position: absolute; top: 44%; transform: translateY(-50%); z-index: 2; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border); background: rgba(255,255,255,0.92); color: var(--text); font-size: 20px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); }
.rc-arrow-left { left: -4px; }
.rc-arrow-right { right: -4px; }
.rc-arrow.is-hidden { opacity: 0; pointer-events: none; }

.review-marquee { overflow: hidden; margin: 4px -20px 18px; }
.review-marquee-track { display: flex; gap: 12px; width: max-content; padding: 4px 0; }
.review-marquee .review-card { flex: 0 0 250px; scroll-snap-align: none; }
.review-marquee-compact .review-card { flex: 0 0 220px; }
.review-marquee-compact .review-marquee-track { animation-duration: 22s; }
.review-marquee-compact .review-photo { aspect-ratio: 16 / 7; font-size: 10px; }
.review-marquee-compact .review-body { padding: 10px 12px 12px; }
/* Marquee agora é JS (wireMarquees), não CSS: dispara em qualquer navegador, nunca trava. */

/* ---------- Paywall: pricing em linhas (12-week primeiro) ---------- */
.pw-pricing-sub { text-align: center; margin: 0 0 14px; }
.wheel-banner { background: var(--green-light); border: 1px solid var(--green); border-radius: 12px; padding: 12px 14px; margin: 0 0 14px; text-align: center; }
.wheel-banner-title { color: var(--green); font-weight: 700; font-size: 14px; }
.wheel-banner-sub { color: var(--green); font-weight: 500; font-size: 12.5px; margin-top: 2px; opacity: 0.85; }
.plan-rows { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.plan-row {
  position: relative; display: flex; align-items: center; gap: 12px;
  border: 1.5px solid var(--border); border-radius: 14px; background: var(--card); padding: 14px;
  cursor: pointer; font-family: var(--font-body); text-align: left; width: 100%;
}
.plan-row.selected { border-color: var(--green); box-shadow: 0 0 0 1.5px var(--green); background: var(--green-light); }
.plan-row-radio { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #D2CFC4; display: flex; align-items: center; justify-content: center; background: #fff; }
.plan-row.selected .plan-row-radio { border-color: var(--green); background: var(--green); }
.plan-row.selected .plan-row-radio::after { content: "✓"; color: #fff; font-size: 12px; font-weight: 800; }
.plan-row-info { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.plan-row-label { font-size: 13px; font-weight: 700; color: var(--text); letter-spacing: 0.02em; text-transform: uppercase; }
.plan-row-sublabel { font-size: 11.5px; color: var(--green); font-weight: 500; }
.plan-row-price { display: flex; align-items: baseline; gap: 8px; }
.plan-row-anchor { font-size: 11px; font-weight: 400; color: var(--muted); text-decoration: line-through; opacity: 0.75; }
.plan-row-now { font-size: 13.5px; font-weight: 500; color: var(--text-secondary); }
.plan-row-tag { flex: none; background: var(--surface-soft); color: var(--text); border-radius: 12px; padding: 7px 11px; text-align: center; min-width: 64px; }
.plan-row-tag-selected { background: var(--green); color: #fff; }
.plan-row-tag-price { font-size: 20px; font-weight: 800; display: block; line-height: 1.05; }
.plan-row-tag-price sup { font-size: 11px; }
.plan-row-tag-suffix { font-size: 9px; font-weight: 700; opacity: 0.85; display: block; margin-top: 1px; }
.plan-row-badge { position: absolute; top: -12px; left: 14px; background: var(--green); color: #fff; font-size: 8.5px; font-weight: 800; letter-spacing: 0.02em; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.pw-prayer-free-line { font-size: 12.5px; color: var(--text-secondary); line-height: 1.55; text-align: center; margin: 16px 0 4px; }
.objections { display: flex; flex-direction: column; gap: 6px; margin: 14px 0 4px; }
.objection { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-secondary); justify-content: center; }
.objection-icon { flex: none; font-size: 13px; }
.pw-fine-print { font-size: 10.5px; color: var(--muted); line-height: 1.5; margin: 10px 0 20px; }

/* ---------- Paywall: prova social de loja (condicional) ---------- */
.store-proof { text-align: center; margin: 4px 0 18px; }
.store-proof-rating { display: flex; align-items: center; justify-content: center; gap: 8px; }
.store-proof-number { font-size: 15px; font-weight: 700; color: var(--text); }
.store-proof-stars .star { font-size: 15px; }
.store-proof-count { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.store-badges { display: flex; gap: 10px; justify-content: center; align-items: center; margin-top: 10px; }
.store-badge-img { height: 42px; width: auto; display: block; border-radius: 8px; }
.store-badge { display: inline-flex; }
.store-badge-svg { height: 42px; width: auto; display: block; }

/* ---------- Paywall: card grande de garantia (selo 30 dias) ---------- */
.guarantee-card { display: flex; align-items: center; gap: 16px; background: #fff; border: 1.5px solid var(--green); border-radius: 18px; padding: 22px 20px; margin: 8px 0 20px; box-shadow: 0 6px 20px rgba(33,77,62,0.10); }
.guarantee-card-body { flex: 1 1 auto; }
.guarantee-card-title { font-family: var(--font-body); font-size: 22px; font-weight: 700; letter-spacing: -0.025em; color: var(--text); margin: 0 0 10px; line-height: 1.12; }
.guarantee-card-text { font-size: 13px; line-height: 1.5; color: var(--text-secondary); margin: 0; }
.guarantee-card-link { margin-top: 8px; }
.guarantee-card-link a { color: var(--green); text-decoration: underline; }
.guarantee-seal { flex: none; }
@media (max-width: 420px) {
  .guarantee-card { gap: 12px; padding: 20px 16px; }
  .guarantee-seal { width: 90px; height: 90px; }
}

/* ---------- Paywall: FAQ acordeão ---------- */
.faq { margin: 4px 0 20px; border-top: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 2px; background: none; border: none; cursor: pointer; text-align: left; font-size: 15px; font-weight: 600; color: var(--text); font-family: inherit; }
.faq-chevron { flex: none; font-size: 22px; font-weight: 400; color: var(--green); line-height: 1; transition: transform .2s; }
.faq-item.open .faq-chevron { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq-item.open .faq-a { max-height: 520px; }
.faq-a-inner { padding: 0 2px 16px; }
.faq-a-inner p { margin: 0 0 8px; font-size: 14px; line-height: 1.55; color: var(--text-secondary); }
.faq-a-inner p:last-child { margin-bottom: 0; }
.faq-a-inner strong { color: var(--text); font-weight: 700; }
.faq-a-inner em { font-style: italic; }
.faq-a-inner a { color: var(--green); text-decoration: underline; }
.faq-a-inner ul { margin: 6px 0 8px; padding-left: 18px; }
.faq-a-inner li { font-size: 14px; line-height: 1.5; color: var(--text-secondary); margin-bottom: 4px; }

/* ---------- Result: "How Stronghold interrupts the cycle" ---------- */
.interrupt-intro { font-size: 14px; line-height: 1.55; color: var(--text-secondary); margin: 0 0 16px; }
.interrupt-steps { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.interrupt-step { display: flex; align-items: flex-start; gap: 12px; }
.interrupt-num { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--green); color: #fff; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
.interrupt-step-text { font-size: 15px; line-height: 1.4; color: var(--text); font-weight: 500; }
.interrupt-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 16px; border-top: 1px solid var(--border); }
.interrupt-flow-item { font-size: 12.5px; font-weight: 700; color: var(--green); }
.interrupt-flow-arrow { color: var(--muted); font-size: 13px; }

/* ---------- Escritura (cara cristã): versículo serifado com cruz dourada ---------- */
.scripture { text-align: center; margin: 6px 0 20px; padding: 0 6px; }
.scripture-ornament { display: inline-flex; color: var(--gold-deep); margin-bottom: 8px; }
.scripture-text { font-family: var(--font-serif); font-style: italic; font-size: 16.5px; line-height: 1.5; color: var(--text); margin: 0 0 7px; }
.scripture-ref { font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-deep); margin: 0; }

/* ---------- Result: gráfico de trajetória (antes vs depois) ---------- */
.traj-sub { font-size: 14px; line-height: 1.5; color: var(--text-secondary); margin: 0 0 14px; }
.traj-chart { position: relative; }
.traj-svg { display: block; width: 100%; height: auto; }
.traj-tag { position: absolute; right: 0; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.traj-tag-up { top: 2%; color: #fff; background: var(--gold-deep); }
.traj-tag-down { top: 74%; color: var(--muted); background: var(--surface-soft); border: 1px solid var(--border); }
.traj-axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); font-weight: 600; margin-top: 2px; }

/* ---------- Result: prova social compacta (Caleb) ---------- */
.social-proof-card .sp-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.sp-avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none; }
.sp-name { font-size: 14px; font-weight: 700; color: var(--text); }
.sp-loc { font-size: 12px; color: var(--muted); }
.sp-stars { margin-bottom: 8px; }
.sp-stars .star { font-size: 14px; }
.sp-quote { font-size: 15px; line-height: 1.5; color: var(--text); font-style: italic; margin: 0; }

/* ---------- Result: demo carrossel (mockups) ---------- */
.demo-sub { font-size: 14px; line-height: 1.5; color: var(--text-secondary); margin: 0 0 16px; }
.demo-carousel { position: relative; }
.demo-stage { position: relative; }
.demo-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.demo-track::-webkit-scrollbar { display: none; }
.demo-slide { flex: 0 0 100%; scroll-snap-align: start; padding: 0 2px; }
.demo-mockup { height: 320px; display: flex; align-items: center; justify-content: center; background: var(--surface-soft); border-radius: 12px; overflow: hidden; }
.demo-mockup .img-slot { position: static; width: 100%; height: 100%; object-fit: contain; border-radius: 12px; }
.demo-mockup-ph { font-size: 12px; color: var(--muted); }
.demo-caption { padding: 12px 2px 0; text-align: center; }
.demo-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: var(--gold-deep); margin-bottom: 6px; }
.demo-slide-title { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.demo-slide-desc { font-size: 13px; line-height: 1.5; color: var(--text-secondary); margin: 0; }
.demo-arrow { position: absolute; top: 160px; transform: translateY(-50%); z-index: 2; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border); background: rgba(255,255,255,0.92); color: var(--text); font-size: 20px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); }
.demo-arrow-left { left: -4px; }
.demo-arrow-right { right: -4px; }
.demo-arrow.is-hidden { opacity: 0; pointer-events: none; }
.demo-dots { display: flex; justify-content: center; gap: 7px; margin-top: 14px; }
.demo-dot { width: 7px; height: 7px; padding: 0; border: none; border-radius: 50%; background: var(--border); cursor: pointer; transition: background .2s, width .2s; }
.demo-dot.active { width: 18px; border-radius: 4px; background: var(--green); }
.demo-footer-line { text-align: center; font-size: 13.5px; line-height: 1.5; color: var(--text); font-weight: 600; margin: 18px 0 0; }

/* ---------- Paywall: oração colapsável ---------- */
.prayer-collapsible { position: relative; overflow: hidden; transition: max-height .35s ease; }
.prayer-collapsible:not(.expanded) { max-height: 172px; }
.prayer-collapsible.expanded { max-height: 3000px; }
.prayer-collapsible:not(.expanded)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 64px; background: linear-gradient(rgba(251,243,227,0), #FBF3E3); pointer-events: none; }
.prayer-toggle { display: inline-block; margin-top: 12px; padding: 6px 0; background: none; border: none; color: var(--green); font-weight: 700; font-size: 14px; font-family: inherit; cursor: pointer; text-decoration: underline; min-height: 44px; }

/* ---------- Paywall: "Your 90-Day Stronghold System" ---------- */
.system-card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 20px; margin-bottom: 18px; box-shadow: var(--shadow); }
.system-checks { display: flex; flex-direction: column; gap: 12px; }
.system-check { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.4; color: var(--text); }
.system-check-mark { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--green); color: #fff; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }

/* ---------- Paywall: trust / discretion / footer ---------- */
.trust-compact { display: flex; gap: 12px; align-items: center; margin: 4px 0 12px; }
.trust-shield { flex: none; }
.trust-compact-title { font-weight: 700; font-size: 14px; color: var(--text); }
.trust-compact-sub { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }
.pw-discretion { text-align: center; font-size: 12px; color: var(--text-secondary); margin: 0 0 12px; }
.pw-footer { text-align: center; font-size: 11px; color: var(--muted); margin: 10px 0; }
.pw-footer a { color: var(--muted); text-decoration: underline; }
.pw-takeaway { text-align: center; font-size: 11.5px; color: var(--muted); margin-top: 14px; }
.pw-sticky-spacer { height: 88px; }

/* ---------- CTA ---------- */
.nav { position: sticky; bottom: 0; padding: 10px 20px max(18px, env(safe-area-inset-bottom)); background: var(--bg); }
.cta {
  display: block; width: 100%; background: var(--green); color: #fff; border: none;
  padding: 17px; min-height: 56px; border-radius: 14px; font-size: 16px; font-weight: 700;
  letter-spacing: -0.01em; cursor: pointer; text-align: center; text-decoration: none;
  box-sizing: border-box; font-family: var(--font-body); transition: background 150ms, transform 100ms;
  box-shadow: var(--shadow);
}
.cta:hover { background: #1A3F33; transform: translateY(-1px); }
.cta:active { background: #163429; transform: translateY(0); }
.cta:disabled { background: var(--border); color: var(--muted); cursor: not-allowed; transform: none; box-shadow: none; }
.cta-inline { margin: 16px 0 4px; }

/* ---------- Paywall sticky CTA ---------- */
.pw-sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; max-width: 480px; margin: 0 auto;
  background: var(--card); box-shadow: 0 -6px 18px rgba(31, 31, 31, 0.1); padding: 12px 16px max(12px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
}
.pw-sticky-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pw-sticky-timer { display: flex; flex-direction: column; }
.pw-sticky-timer[hidden] { display: none; }
.pw-sticky-timer-label { font-size: 10px; color: var(--text-secondary); }
.pw-sticky-timer-value { font-size: 16px; font-weight: 700; color: var(--text); }
.pw-sticky-btn { width: auto; flex: none; padding: 12px 20px; min-height: 0; font-size: 14px; }

/* ---------- Utility ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* Mockups dos interstitials em full-bleed (pedido do dono: mais legível) */
.mockup-slot { margin-left: -20px; margin-right: -20px; }
.mockup-slot .img-slot { border-radius: 0; }

/* Espaçador que substitui o botão Start over removido (mantém wordmark centrado) */
.header-spacer { flex: none; min-width: 44px; }

/* Depoimentos reais: foto real + localização (T3) */
.review-photo-img { display: block; width: 100%; aspect-ratio: 16/10; object-fit: cover; background: var(--surface-soft); }
.review-marquee-compact .review-photo-img { aspect-ratio: 16/7; }
.review-loc { font-size: 11px; color: var(--muted); font-weight: 500; }
.review-head { flex-direction: column; align-items: flex-start; gap: 1px; }

/* T3 socialProof compacta: cabe sem scroll (pedido do dono) */
.screen.screen-compact { justify-content: flex-start; padding-top: 8px; }
.q-title-sm { font-size: 23px; margin: 2px 0 8px; }
.q-sub-sm { font-size: 14px; line-height: 1.45; margin: 0 0 12px; }
.review-marquee-avatar .review-card { flex: 0 0 270px; }
.review-card-avatar { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 14px; box-shadow: var(--shadow); }
.review-avatar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.review-avatar-img, .review-avatar-ph { width: 42px; height: 42px; border-radius: 50%; flex: none; object-fit: cover; background: var(--surface-soft); }
.review-avatar-ph { background: var(--green-light); border: 1px solid var(--border); }
.review-card-avatar .review-head { flex-direction: column; align-items: flex-start; gap: 0; }
.review-card-avatar .review-stars { margin-bottom: 6px; }
.review-card-avatar .review-stars .star { font-size: 13px; }
.review-card-avatar .review-quote { font-size: 13px; line-height: 1.5; }

/* Contagem de comunidade à esquerda do rating (T3) */
.store-proof-community { font-size: 15px; font-weight: 700; color: var(--text); }
.store-proof-sep { color: var(--muted); font-size: 14px; }

/* Card de review do paywall: nome + badge na linha 1, localização na linha 2 */
.review-head-stack { flex-direction: column; align-items: flex-start; gap: 2px; }
.review-head-line { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; width: 100%; }

/* Interstitial de comunidade: mockup como herói (topo colado, mockup alto e sangrando) */
.screen-mockup-lead { padding-bottom: 0; }
.screen-mockup-lead .q-title-sm { margin-top: 4px; }
.mockup-slot-tall { position: relative; margin-top: 10px; margin-bottom: 0; flex: 1 1 0; min-height: 0; display: flex; align-items: stretch; justify-content: center; overflow: hidden; }
.mockup-slot-tall .img-slot { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; border-radius: 16px; }

/* T5 carrossel de slides (tour do mecanismo) */
.carousel { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; margin-top: 8px; }
.carousel-phone { flex: 1 1 0; min-height: 0; display: flex; align-items: center; justify-content: center; cursor: grab; touch-action: pan-y; }
.carousel-phone .img-slot { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.carousel-phone:active { cursor: grabbing; }
.mockup-fallback { color: var(--muted); font-size: 12px; padding: 40px; text-align: center; }
.carousel-caption { text-align: center; padding: 10px 4px 4px; }
.carousel-title { font-size: 18px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; }
.carousel-desc { font-size: 14px; color: var(--text-secondary); line-height: 1.45; margin: 4px 0 0; }
.carousel-dots { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.carousel-dot { width: 8px; height: 8px; border-radius: 50%; border: none; padding: 0; background: var(--border); cursor: pointer; transition: background 200ms, width 200ms; }
.carousel-dot.active { background: var(--green); width: 22px; border-radius: 999px; }

/* Carrossel: phone MAIOR (pedido do dono). Encolhe cabeçalho/caption, phone ganha altura. */
.screen-compact .carousel .q-title-sm { font-size: 21px; }
.carousel { margin-top: 4px; }
.carousel-phone { flex: 1 1 0; }
.carousel-phone .img-slot { object-position: center top; }
.carousel-caption { padding: 8px 4px 2px; }
.carousel-title { font-size: 17px; }
.carousel-desc { font-size: 13px; margin-top: 2px; }
.carousel-dots { margin-top: 8px; }

/* Carrossel v2: título compacto (sem sub), setas laterais, phone bem maior */
.q-title-xs { font-size: 19px; line-height: 1.22; margin: 2px 0 8px; }
.carousel-stage { flex: 1 1 0; min-height: 0; display: flex; align-items: center; gap: 2px; }
.carousel-stage .carousel-phone { flex: 1 1 auto; height: 100%; }
.carousel-arrow {
  flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--card); color: var(--green); font-size: 22px; line-height: 1; font-weight: 400;
  display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow);
  padding-bottom: 3px;
}
.carousel-arrow:active { transform: scale(0.92); }

/* Stepper / linha do tempo em cima do carrossel (T8): caminho que fica verde conforme avança */
.stepper { display: flex; align-items: flex-start; justify-content: center; gap: 0; margin: 2px 0 8px; padding: 0 6px; }
.stepper-item { display: flex; flex-direction: column; align-items: center; gap: 5px; flex: 0 0 auto; width: 84px; }
.stepper-node {
  width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--border); background: var(--card);
  display: flex; align-items: center; justify-content: center; position: relative; transition: background 350ms, border-color 350ms;
}
.stepper-num { font-size: 12px; font-weight: 700; color: var(--muted); transition: opacity 200ms; }
.stepper-check { position: absolute; font-size: 13px; font-weight: 700; color: #fff; opacity: 0; }
.stepper-item.active .stepper-node, .stepper-item.done .stepper-node { background: var(--green); border-color: var(--green); }
.stepper-item.active .stepper-num { color: #fff; }
.stepper-item.done .stepper-num { opacity: 0; }
.stepper-item.done .stepper-check { opacity: 1; }
.stepper-label { font-size: 10.5px; line-height: 1.2; text-align: center; color: var(--muted); font-weight: 500; transition: color 350ms; }
.stepper-item.active .stepper-label, .stepper-item.done .stepper-label { color: var(--green); font-weight: 700; }
.stepper-line { flex: 1 1 auto; height: 2px; background: var(--border); margin-top: 13px; min-width: 12px; border-radius: 2px; position: relative; overflow: hidden; }
.stepper-line::after { content: ""; position: absolute; inset: 0; width: 0; background: var(--green); transition: width 400ms ease; }
.stepper-line.filled::after { width: 100%; }

/* Phone ainda maior: encolhe headline e reduz margens do stepper/caption */
.screen-compact .carousel .q-title-xs, .q-title-xs { font-size: 17px; margin: 0 0 6px; }
.stepper { margin: 0 0 4px; }
.stepper-node { width: 24px; height: 24px; }
.carousel-caption { padding: 6px 4px 0; }
.carousel-desc { font-size: 12.5px; }
.carousel-dots { margin-top: 6px; }
.screen.screen-compact { padding-top: 6px; padding-bottom: 16px; }

/* Fix de especificidade: headline do carrossel realmente menor (2 linhas), phone bem maior */
h1.q-title.q-title-xs { font-size: 18px; line-height: 1.25; margin: 0 0 6px; font-weight: 700; }

/* FIX definitivo do carrossel: imagem em posição absoluta dentro do palco, nunca overflow */
.carousel-stage .carousel-phone { position: relative; flex: 1 1 0; min-height: 0; height: auto; }
.carousel-phone .img-slot, .mockup-slot-tall .img-slot {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center;
}

/* O phone precisa ESTICAR na altura do palco (senão a imagem absoluta colapsa) */
.carousel-stage { align-items: stretch; }
.carousel-arrow { align-self: center; }
.carousel-stage .carousel-phone { align-self: stretch; height: auto; }