/* ==============================================================
   FLAS FUNNEL, SHARED STYLES (v2, light)
   Redesign 23 Jul 2026: the dark long-form system was replaced
   with a calm, light, classic lead-magnet layout on Stephen's
   direction ("dead simple, zero intimidation"). The long-form
   copy archive lives in launch/sales-page-longform.md.

   Palette: off-white paper, near-black ink, TGB gold reserved
   for buttons + accents only. Cera Pro self-hosted (fonts/),
   Playfair Bold Italic for tiny emphasis words only.
   ============================================================== */

/* ---- fonts (self-hosted, zero external requests) ---- */
@font-face {
  font-family: "Cera Pro";
  src: url("fonts/CeraPro-Light.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cera Pro";
  src: url("fonts/CeraPro-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cera Pro";
  src: url("fonts/CeraPro-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("fonts/PlayfairDisplay-BoldItalic.woff2") format("woff2");
  font-weight: 700; font-style: italic; font-display: swap;
}

/* ---- tokens ---- */
:root {
  --tgb-bg: #faf9f7;          /* warm paper */
  --tgb-surface: #ffffff;
  --tgb-ink: #212121;
  --tgb-body: #454340;        /* body text on paper */
  --tgb-mute: #7d7a74;
  --tgb-faint: #a8a49c;
  --tgb-gold: #f2b11c;
  --tgb-gold-deep: #b97f07;   /* readable gold for small text on light */
  --tgb-gold-soft: #fdf3dc;   /* gold tint fill */
  --tgb-border: #e9e5dd;
  --tgb-border-gold: #f0dcae;
  --tgb-green: #1d8a4b;
  --tgb-green-soft: #e5f4ea;
  --tgb-amber: #b06e0a;
  --tgb-amber-soft: #fbeed7;
  --tgb-red: #c73e3e;
  --tgb-red-soft: #fbe9e7;
  --tgb-shadow: 0 1px 2px rgba(33, 30, 24, 0.05), 0 10px 30px rgba(33, 30, 24, 0.07);
  --tgb-shadow-soft: 0 1px 2px rgba(33, 30, 24, 0.04), 0 4px 14px rgba(33, 30, 24, 0.05);
  --tgb-radius: 16px;
  --wrap-copy: 680px;
  --wrap-wide: 880px;
}

/* ---- reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--tgb-bg);
  color: var(--tgb-body);
  font-family: "Cera Pro", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; } /* the hidden attribute must always win, even over display:flex components */
a { color: var(--tgb-ink); }
strong { font-weight: 700; color: var(--tgb-ink); }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* ---- layout ---- */
.wrap { width: 100%; max-width: var(--wrap-copy); margin: 0 auto; padding: 0 22px; }
.wrap--wide { max-width: var(--wrap-wide); }
.tgb-section { padding: clamp(52px, 8vw, 88px) 0; }
.tgb-section--tint { background: var(--tgb-surface); border-top: 1px solid var(--tgb-border); border-bottom: 1px solid var(--tgb-border); }

/* ---- type ---- */
h1, h2, h3, h4 {
  color: var(--tgb-ink);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.015em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: clamp(34px, 5.6vw, 52px); }
h2 { font-size: clamp(26px, 3.8vw, 36px); }
h3 { font-size: clamp(19px, 2.4vw, 22px); }
.lead { font-size: clamp(18px, 2.3vw, 20px); line-height: 1.55; color: var(--tgb-body); }
.tgb-em { font-family: "Playfair Display", Georgia, serif; font-style: italic; font-weight: 700; letter-spacing: 0; }
.tgb-eyebrow {
  display: inline-block;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--tgb-gold-deep);
}
.center { text-align: center; }
.sub { color: var(--tgb-mute); }
.smallprint { font-size: 13.5px; color: var(--tgb-mute); line-height: 1.6; }

/* ---- topbar ---- */
.topbar { padding: 18px 0; }
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wordmark { font-weight: 700; color: var(--tgb-ink); font-size: 16.5px; letter-spacing: -0.01em; white-space: nowrap; }
.wordmark .accent { color: var(--tgb-gold-deep); }
.topbar-chip {
  font-size: 12.5px; color: var(--tgb-mute); text-decoration: none;
  border: 1px solid var(--tgb-border); border-radius: 999px;
  background: var(--tgb-surface); padding: 6px 13px; white-space: nowrap;
}
.topbar-chip strong { color: var(--tgb-ink); }
@media (max-width: 560px) {
  /* the long price chip does not fit beside the wordmark at 390px:
     stack them, centered, no overflow */
  .topbar .wrap { flex-direction: column; align-items: center; gap: 8px; }
}

/* ---- buttons ---- */
.tgb-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; text-align: center;
  background: var(--tgb-gold); color: #1c1503;
  font-family: inherit; font-weight: 700; font-size: 17px;
  padding: 16px 34px; border: 0; border-radius: 12px;
  text-decoration: none; cursor: pointer;
  box-shadow: 0 2px 4px rgba(178, 122, 8, 0.18), 0 8px 20px rgba(178, 122, 8, 0.16);
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.18s ease;
}
.tgb-btn:hover { transform: translateY(-1px); box-shadow: 0 3px 6px rgba(178, 122, 8, 0.2), 0 12px 26px rgba(178, 122, 8, 0.2); }
.tgb-btn:active { transform: translateY(0); }
.tgb-btn--ghost {
  background: transparent; color: var(--tgb-ink);
  border: 1.5px solid var(--tgb-border); box-shadow: none;
}
.tgb-btn--ghost:hover { border-color: var(--tgb-faint); box-shadow: none; }
.buy-block { margin-top: 30px; }
.btn-sub { font-size: 13.5px; color: var(--tgb-mute); margin: 12px 0 0; }
@media (max-width: 640px) {
  .tgb-btn { width: 100%; }
}

/* ---- cards ---- */
.tgb-card {
  background: var(--tgb-surface);
  border: 1px solid var(--tgb-border);
  border-radius: var(--tgb-radius);
  box-shadow: var(--tgb-shadow-soft);
  padding: clamp(22px, 3.5vw, 32px);
}
.tgb-card--gold { border-color: var(--tgb-border-gold); box-shadow: var(--tgb-shadow); }

/* ---- check / cross lists ---- */
.fit-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.fit-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.55; }
.mk {
  flex: none; width: 24px; height: 24px; margin-top: 1px;
  border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.mk--yes, .mk:not(.mk--no) { color: var(--tgb-gold-deep); background: var(--tgb-gold-soft); }
.mk--no { color: var(--tgb-red); background: var(--tgb-red-soft); }

/* ---- Leak Ledger mockup (light) ---- */
.mock {
  background: var(--tgb-surface);
  border: 1px solid var(--tgb-border);
  border-radius: var(--tgb-radius);
  box-shadow: var(--tgb-shadow);
  overflow: hidden;
}
.mock__bar {
  display: flex; align-items: center; gap: 7px;
  padding: 12px 16px; border-bottom: 1px solid var(--tgb-border);
  background: #fcfbf9;
}
.mock__bar .wdot { width: 9px; height: 9px; border-radius: 50%; background: var(--tgb-border); }
.mock__bar .ttl { margin-left: 6px; font-size: 12px; color: var(--tgb-mute); letter-spacing: 0.02em; }
.mock__bar .ttl strong { font-weight: 700; color: var(--tgb-ink); }
.mock__body { padding: clamp(18px, 3vw, 28px); }
.mock__score { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.mock__score .lbl { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tgb-mute); }
.mock__score .num { font-size: 40px; font-weight: 700; color: var(--tgb-ink); line-height: 1; }
.mock__score .num span { font-size: 16px; color: var(--tgb-mute); font-weight: 300; }
.ledger-table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 14.5px; }
.ledger-table td { padding: 10px 6px; border-top: 1px solid var(--tgb-border); color: var(--tgb-body); }
.ledger-table td:first-child { padding-left: 0; }
.ledger-table td:last-child { padding-right: 0; }
.ledger-table .cost { text-align: right; font-weight: 500; color: var(--tgb-ink); white-space: nowrap; }
.ledger-table .cost--hot { color: var(--tgb-red); font-weight: 700; }
.status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; border-radius: 999px; padding: 3px 10px;
}
.status i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status--green { color: var(--tgb-green); background: var(--tgb-green-soft); }
.status--amber { color: var(--tgb-amber); background: var(--tgb-amber-soft); }
.status--red { color: var(--tgb-red); background: var(--tgb-red-soft); }
.mock__foot {
  margin-top: 16px; padding: 12px 14px;
  border: 1px solid var(--tgb-border-gold); border-radius: 12px;
  background: var(--tgb-gold-soft); font-size: 14px; color: var(--tgb-ink);
}
.visual-caption { font-size: 13px; color: var(--tgb-mute); margin: 14px 0 0; text-align: center; }

/* ---- countdown strip ---- */
.countdown {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px 18px; margin: 26px 0;
  padding: 14px 18px;
  background: var(--tgb-surface);
  border: 1px solid var(--tgb-border-gold);
  border-radius: 14px;
  box-shadow: var(--tgb-shadow-soft);
}
.countdown__label { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tgb-gold-deep); }
.countdown__clock { display: inline-flex; gap: 14px; }
.countdown__seg { display: inline-flex; flex-direction: column; align-items: center; min-width: 40px; }
.countdown__num { font-size: 24px; font-weight: 700; color: var(--tgb-ink); line-height: 1.1; font-variant-numeric: tabular-nums; }
.countdown__unit { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tgb-mute); }

/* ---- founding banner ---- */
.founding-note {
  margin: 22px 0 0; padding: 16px 18px;
  border: 1px solid var(--tgb-border-gold);
  background: var(--tgb-gold-soft);
  border-radius: 14px;
  font-size: 14.5px; line-height: 1.6; color: var(--tgb-body);
}
.founding-note p { margin: 0; }

/* ---- pricing ladder ---- */
.ladder { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 30px; }
.ladder-step {
  position: relative;
  background: var(--tgb-surface);
  border: 1px solid var(--tgb-border);
  border-radius: var(--tgb-radius);
  box-shadow: var(--tgb-shadow-soft);
  padding: 24px 20px;
  display: flex; flex-direction: column; gap: 6px;
}
.ladder-step .win { font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tgb-mute); }
.ladder-step .amt { font-size: 38px; font-weight: 700; color: var(--tgb-ink); line-height: 1.1; }
.ladder-step .per { font-size: 13.5px; color: var(--tgb-mute); line-height: 1.55; margin: 4px 0 0; }
.ladder-step .here {
  position: absolute; top: -11px; left: 18px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: #1c1503; background: var(--tgb-gold);
  border-radius: 999px; padding: 4px 11px;
}
.ladder-step--now { border-color: var(--tgb-gold); border-width: 2px; box-shadow: var(--tgb-shadow); }
.ladder-step.is-closed { opacity: 0.55; }
.closed-stamp {
  position: absolute; top: 14px; right: 14px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--tgb-red); border: 1.5px solid currentColor;
  border-radius: 6px; padding: 3px 8px; transform: rotate(-6deg);
}
@media (max-width: 720px) {
  .ladder { grid-template-columns: 1fr; }
  .ladder-step--now { order: -1; }
}

/* ---- two columns (who for / not for) ---- */
.fit-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 26px; }
@media (max-width: 720px) { .fit-cols { grid-template-columns: 1fr; } }

/* ---- identity strip ---- */
.identity-card {
  display: flex; gap: 18px; align-items: center;
  background: var(--tgb-surface);
  border: 1px solid var(--tgb-border);
  border-radius: var(--tgb-radius);
  box-shadow: var(--tgb-shadow-soft);
  padding: 20px 22px; margin-top: 34px;
}
.identity-card img { flex: none; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.identity-name { font-weight: 700; color: var(--tgb-ink); margin: 0 0 3px; }
.identity-sub { font-size: 14px; color: var(--tgb-mute); line-height: 1.55; margin: 0 0 5px; }
.identity-card a { font-size: 13.5px; color: var(--tgb-gold-deep); text-decoration: none; font-weight: 500; }
.identity-card a:hover { text-decoration: underline; }
@media (max-width: 520px) { .identity-card { flex-direction: column; align-items: flex-start; } }

/* ---- proof strip ---- */
.proof-strip {
  margin-top: 26px; padding: 14px 18px; text-align: center;
  border: 1px dashed var(--tgb-border);
  border-radius: 12px;
  font-size: 13.5px; color: var(--tgb-mute);
}

/* ---- guarantee ---- */
.guarantee-box {
  background: var(--tgb-surface);
  border: 2px solid var(--tgb-gold);
  border-radius: var(--tgb-radius);
  box-shadow: var(--tgb-shadow);
  padding: clamp(24px, 4vw, 36px);
  text-align: center;
}
.guarantee-box .badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--tgb-gold-soft); color: var(--tgb-gold-deep);
  margin-bottom: 14px;
}
.guarantee-box .badge svg { width: 28px; height: 28px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- FAQ ---- */
.faq { display: grid; gap: 10px; margin-top: 26px; }
.faq-item {
  background: var(--tgb-surface);
  border: 1px solid var(--tgb-border);
  border-radius: 12px;
  box-shadow: var(--tgb-shadow-soft);
}
.faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 18px;
  font-weight: 700; color: var(--tgb-ink); font-size: 15.5px; line-height: 1.4;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item .ic { flex: none; color: var(--tgb-gold-deep); font-weight: 300; font-size: 22px; line-height: 1; transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1); }
.faq-item[open] .ic { transform: rotate(45deg); }
.faq-item .a { padding: 0 18px 16px; font-size: 15px; color: var(--tgb-body); }

/* ---- forms ---- */
.field { margin-bottom: 14px; text-align: left; }
.field label { display: block; font-size: 13px; font-weight: 700; color: var(--tgb-ink); margin-bottom: 6px; }
.field input {
  width: 100%; font-family: inherit; font-size: 16px; color: var(--tgb-ink);
  background: var(--tgb-surface);
  border: 1.5px solid var(--tgb-border); border-radius: 10px;
  padding: 13px 15px; outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field input::placeholder { color: var(--tgb-faint); }
.field input:focus { border-color: var(--tgb-gold); box-shadow: 0 0 0 3px rgba(242, 177, 28, 0.18); }
.field input:disabled { background: var(--tgb-bg); color: var(--tgb-mute); }
.field--invalid input { border-color: var(--tgb-red); }
.field-error { font-size: 13px; color: var(--tgb-red); margin: 7px 0 0; }
.consent { font-size: 12.5px; color: var(--tgb-mute); line-height: 1.6; margin: 14px 0 0; }
.consent a { color: var(--tgb-mute); }

/* ---- signature ---- */
.signature { margin: 34px 0 0; font-size: 14px; color: var(--tgb-mute); line-height: 1.5; }
.signature strong { display: block; color: var(--tgb-ink); font-size: 15.5px; }

/* ---- success / steps (thank-you, delivery) ---- */
.success-icon {
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--tgb-green-soft); color: var(--tgb-green);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.success-icon svg { width: 28px; height: 28px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.steps-row { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 0; padding: 0; }
.steps-row li {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13.5px; font-weight: 500;
  border: 1px solid var(--tgb-border); border-radius: 999px;
  background: var(--tgb-surface); padding: 8px 15px 8px 9px;
}
.steps-row .step-num {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
}
.step--done { color: var(--tgb-mute); }
.step--done .step-num { color: var(--tgb-green); background: var(--tgb-green-soft); }
.step--next { color: var(--tgb-ink); border-color: var(--tgb-border-gold); background: var(--tgb-gold-soft); }
.step--next .step-num { color: #1c1503; background: var(--tgb-gold); }

/* ---- footer ---- */
.footer { border-top: 1px solid var(--tgb-border); padding: 30px 0 36px; margin-top: 20px; }
.footer-inner { display: grid; gap: 8px; text-align: center; }
.footer-meta, .footer-copy { font-size: 12.5px; color: var(--tgb-faint); margin: 0; }
.footer-legal { display: flex; gap: 18px; justify-content: center; }
.footer-legal a { font-size: 12.5px; color: var(--tgb-mute); text-decoration: none; }
.footer-legal a:hover { text-decoration: underline; }

/* ---- sticky mobile buy bar ---- */
.mobile-buybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: none; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.96);
  border-top: 1px solid var(--tgb-border);
  box-shadow: 0 -6px 20px rgba(33, 30, 24, 0.08);
  transform: translateY(110%);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.mobile-buybar.is-on { transform: translateY(0); }
.mobile-buybar .mb-price { font-size: 13.5px; color: var(--tgb-mute); white-space: nowrap; }
.mobile-buybar .mb-price strong { font-size: 16px; }
.mobile-buybar .tgb-btn { width: auto; padding: 12px 22px; font-size: 15px; flex: none; }
@media (max-width: 640px) { .mobile-buybar { display: flex; } }

/* ---- reveal on scroll (kept minimal) ---- */
.cv-reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1), transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); }
.cv-reveal.cv-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .cv-reveal { opacity: 1; transform: none; transition: none; }
}