/* Meet Me Gently — the offer funnel (opt-in / sales page / thank-you).
   Layers on assets/site.css tokens (--bg, --panel, --line, --ink, --ink-soft,
   --serif, --sans, --maxw, --r, path colors, .btn, .section, .section-head,
   .eyebrow, .price-grid/.price, .faq-list, .safety, .whisper, .quote). Literal
   hex values are used only where no token exists. Mobile-first; no
   horizontal overflow. */

/* ---- visually-hidden label helper (no global .sr-only exists outside the footer chrome) ---- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- breadcrumb back to home ---- */
.offer-crumb { max-width: var(--maxw); margin: 0 auto; padding: 1.1rem clamp(1.1rem, 4vw, 2.4rem) 0; }
.offer-crumb a { text-decoration: none; font: 600 .82rem/1 var(--sans); color: var(--ink-soft); }
.offer-crumb a:hover { color: var(--ink); text-decoration: underline; }

/* =====================================================================
   OPT-IN HERO (offer/index.html) — one job, minimal distraction
   ===================================================================== */
.optin-wrap { max-width: 640px; margin: 0 auto; padding: clamp(2rem, 6vw, 3.6rem) clamp(1.1rem, 4vw, 2.4rem) clamp(3rem, 8vw, 5rem); text-align: center; }
.optin-wrap h1 { font-size: clamp(2rem, 5.4vw, 3rem); letter-spacing: -.01em; margin: .3rem 0 1rem; }
.optin-wrap .lead { font-size: clamp(1.02rem, 2vw, 1.18rem); color: var(--ink-soft); max-width: 52ch; margin: 0 auto; }

.kit-contents { list-style: none; margin: 1.8rem auto; padding: 0; max-width: 460px; display: grid; gap: .65rem; text-align: left; }
.kit-contents li { position: relative; padding-left: 1.7rem; color: var(--ink); font-size: .95rem; line-height: 1.5; }
.kit-contents li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--steady); font-weight: 700; }

.optin-form { display: flex; gap: .6rem; max-width: 460px; margin: 1.6rem auto 0; flex-wrap: wrap; justify-content: center; }
.optin-form input[type="email"] { flex: 1 1 240px; min-width: 0; padding: .85rem 1.15rem; font: 500 1rem/1.4 inherit;
  color: var(--ink); background: var(--panel); border: 1.5px solid var(--line); border-radius: 999px;
  transition: border-color .2s ease; }
.optin-form input[type="email"]:focus { outline: none; border-color: var(--steady); }
.optin-form button { flex: 0 0 auto; padding: .85rem 1.5rem; }

.form-status { min-height: 1.4rem; margin: .9rem auto 0; max-width: 460px; font: 600 .88rem/1.5 var(--sans); }
.form-status[data-state="success"] { color: #1E6B3A; }
.form-status[data-state="duplicate"] { color: #8A5E00; }
.form-status[data-state="notopen"] { color: #8A5E00; }
.form-status[data-state="error"] { color: var(--repair-ink); }

.optin-success { display: none; margin: 1.6rem auto 0; max-width: 460px; padding: 1.3rem 1.4rem; text-align: left;
  background: var(--steady-tint); border: 1px solid var(--steady-line); border-radius: var(--r); }
.optin-success.is-visible { display: block; }
.optin-success h2 { font-size: 1.15rem; margin: 0 0 .4rem; }
.optin-success p { margin: 0 0 1rem; color: var(--ink-soft); font-size: .92rem; }
.optin-success .btn { width: 100%; }

.optin-trust { margin-top: 1.6rem; font-size: .8rem; color: var(--ink-soft); }
.optin-alt { margin-top: .6rem; font-size: .85rem; }
.optin-alt a { color: var(--steady); font-weight: 600; }

/* =====================================================================
   DECK.HTML — sales page
   ===================================================================== */

/* ---- hero (centered, wedge-forward) ---- */
.deck-hero { max-width: 820px; margin: 0 auto; padding: clamp(2.2rem, 6vw, 4rem) clamp(1.1rem, 4vw, 2.4rem) clamp(1.4rem, 4vw, 2.2rem); text-align: center; }
.deck-hero h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); letter-spacing: -.01em; margin: .3rem 0 1.1rem; }
.deck-hero h1 em { font-style: italic; color: var(--steady); }
.deck-hero .lead { font-size: clamp(1.05rem, 2vw, 1.22rem); color: var(--ink-soft); max-width: 58ch; margin: 0 auto; }
.wedge-row { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 1.5rem 0 0; }
.wedge-chip { font: 700 .74rem/1 var(--sans); letter-spacing: .06em; text-transform: uppercase;
  padding: .5rem 1rem; border-radius: 999px; border: 1.5px solid var(--line); color: var(--ink-soft); background: var(--panel); }
.wedge-chip:nth-child(1) { border-color: var(--steady-line); color: var(--steady-ink); }
.wedge-chip:nth-child(2) { border-color: var(--open-line); color: var(--open-ink); }
.wedge-chip:nth-child(3) { border-color: var(--reach-line); color: var(--reach-ink); }
.wedge-chip:nth-child(4) { border-color: var(--repair-line); color: var(--repair-ink); }
.deck-hero .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin: 1.8rem 0 .6rem; }

/* ---- problem agitation ---- */
.problem-list { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: 1rem; max-width: 760px; }
.problem-list li { border: 1px solid var(--line); border-left: 3px solid var(--repair); border-radius: var(--r);
  background: var(--panel); padding: 1.1rem 1.3rem; }
.problem-list b { display: block; font-family: var(--serif); font-size: 1.02rem; margin-bottom: .3rem; color: var(--ink); }
.problem-list p { margin: 0; color: var(--ink-soft); font-size: .92rem; line-height: 1.6; }
.problem-bridge { margin: 1.6rem 0 0; max-width: 68ch; color: var(--ink-soft); font-size: .98rem; }

/* ---- six needs diagnostic ---- */
.needs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; margin-top: 1.8rem; }
@media (max-width: 900px) { .needs-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .needs-grid { grid-template-columns: 1fr; } }
.need-card { position: relative; background: linear-gradient(180deg, var(--nd-tint, var(--steady-tint)) 0%, var(--panel) 55%);
  border: 1px solid var(--nd-line, var(--steady-line)); border-top: 4px solid var(--nd, var(--steady));
  border-radius: var(--r); padding: 1.4rem 1.3rem 1.3rem; display: flex; flex-direction: column; gap: .5rem;
  text-decoration: none; color: inherit; transition: transform .18s ease, box-shadow .18s ease; }
.need-card:hover { transform: translateY(-3px); box-shadow: 0 16px 32px -20px color-mix(in srgb, var(--nd, var(--steady)) 50%, transparent); }
.need-card .need-tag { font: 700 .66rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--nd-ink, var(--steady-ink)); }
.need-card h3 { font-size: 1.12rem; margin: .3rem 0 0; }
.need-card .need-q { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: .96rem; color: var(--ink); }
.need-card p { margin: 0; font-size: .86rem; color: var(--ink-soft); line-height: 1.55; flex: 1; }
.need-card .need-link { font: 700 .82rem/1 var(--sans); color: var(--nd-ink, var(--steady-ink)); }
.needs-lens { margin: 1.6rem 0 0; max-width: 70ch; color: var(--ink-soft); font-size: .92rem; }

/* ---- repair spotlight ---- */
.repair-spotlight { position: relative; margin-top: 1.6rem; max-width: 820px;
  background: linear-gradient(135deg, var(--repair-tint) 0%, var(--panel) 60%);
  border: 1.5px solid var(--repair-line); border-radius: calc(var(--r) + 4px); padding: clamp(1.6rem, 4vw, 2.4rem); }
.repair-spotlight .rs-tag { display: inline-block; font: 700 .7rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  color: #fff; background: var(--repair); border-radius: 999px; padding: .4rem .85rem; margin-bottom: .9rem; }
.repair-spotlight h2 { font-size: clamp(1.4rem, 3.4vw, 1.9rem); margin: 0 0 .8rem; color: var(--repair-ink); }
.repair-spotlight p { margin: 0 0 1rem; color: var(--ink); font-size: 1rem; line-height: 1.7; max-width: 66ch; }
.repair-spotlight .btn { margin-top: .3rem; }

/* ---- after dark progression band ---- */
.progression-band { position: relative; margin-top: clamp(2.5rem, 6vw, 3.6rem); padding: clamp(2.4rem, 6vw, 4rem) clamp(1.1rem, 4vw, 2.4rem);
  background: radial-gradient(120% 100% at 50% 0%, #2E1019 0%, #170A0E 60%, #120709 100%); color: #EAD9DD; text-align: center; }
.progression-band .eyebrow { color: #F2879A; }
.progression-band h2 { color: #F4ECD9; font-size: clamp(1.6rem, 4vw, 2.4rem); max-width: 34ch; margin: 0 auto 1.3rem; }
.progression-quote { max-width: 62ch; margin: 0 auto 1.2rem; font-family: var(--serif); font-style: italic;
  font-size: clamp(1.05rem, 2.2vw, 1.3rem); line-height: 1.6; color: #F4ECD9; }
.progression-note { max-width: 58ch; margin: 0 auto 1.4rem; color: #C9AEB4; font-size: .92rem; line-height: 1.7; }
.progression-band .show-cta { color: #FF8A9C; text-decoration: none; font-weight: 700; }
.progression-band .show-cta:hover { text-decoration: underline; }
.progression-micro { margin-top: 1.1rem; font-size: .78rem; color: #93887A; letter-spacing: .02em; }
.seal-18 { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid #E01F3D; color: #FF5A70; font: 700 .62rem/1 var(--sans); background: rgba(224,31,61,.12); vertical-align: middle; margin-right: .5rem; }

/* ---- pricing section ---- */
.pricing-note { margin: 1.4rem 0 0; max-width: 66ch; color: var(--ink-soft); font-size: .9rem; }
.price .tag-soon { display: inline-block; font: 700 .62rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  color: #8A5E00; background: #FBF2D8; border: 1px solid #D9B65A; border-radius: 999px; padding: .28rem .6rem; margin-bottom: .6rem; }
.price.bump { border-style: dashed; background: linear-gradient(180deg, var(--repair-tint), var(--panel) 60%); }
.price .btn { width: 100%; }
.placeholder { display: inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .86em; color: #8A5E00; background: #FBF2D8; border: 1px dashed #D9B65A; border-radius: 5px; padding: .05em .45em; line-height: 1.4; }

/* ---- value stack ---- */
.stack-wrap { margin-top: clamp(2rem, 5vw, 3rem); max-width: 640px; }
.stack-wrap h3 { font-size: 1.25rem; margin: 0 0 .3rem; }
.stack-wrap .sub { color: var(--ink-soft); font-size: .9rem; margin: 0 0 1.2rem; }
.stack-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.stack-table td { padding: .7rem .3rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.stack-table td:first-child { color: var(--ink); }
.stack-table td:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink-soft); }
.stack-table tr.stack-total td { border-top: 2px solid var(--ink); border-bottom: none; font-weight: 700; padding-top: 1rem; }
.stack-table tr.stack-total td:last-child { text-decoration: line-through; color: var(--ink-soft); }
.stack-table tr.stack-today td { font-weight: 800; font-size: 1.1rem; color: var(--steady-ink); padding-top: .3rem; }
.stack-table tr.stack-today td:last-child { text-decoration: none; }

/* ---- waitlist panel ---- */
.waitlist-panel { margin-top: clamp(2rem, 5vw, 3rem); max-width: 560px; background: var(--panel);
  border: 1.5px solid var(--steady-line); border-radius: calc(var(--r) + 4px); padding: clamp(1.5rem, 4vw, 2.1rem); scroll-margin-top: 90px; }
.waitlist-panel h3 { font-size: 1.2rem; margin: 0 0 .5rem; }
.waitlist-panel .sub { color: var(--ink-soft); font-size: .88rem; margin: 0 0 1rem; }
.waitlist-selected { font-size: .9rem; margin: 0 0 1rem; padding: .6rem .9rem; background: var(--steady-tint);
  border-radius: 10px; color: var(--steady-ink); }
.waitlist-selected strong { font-weight: 700; }
.waitlist-form { display: flex; gap: .6rem; flex-wrap: wrap; }
.waitlist-form input[type="email"] { flex: 1 1 200px; min-width: 0; padding: .8rem 1.05rem; font: 500 .96rem/1.4 inherit;
  color: var(--ink); background: var(--bg); border: 1.5px solid var(--line); border-radius: 999px; }
.waitlist-form input[type="email"]:focus { outline: none; border-color: var(--steady); }
.waitlist-form button { flex: 0 0 auto; }

/* ---- guarantee ---- */
.guarantee-box { margin-top: clamp(2rem, 5vw, 3rem); max-width: 720px; text-align: center;
  background: linear-gradient(180deg, #FBF2D8 0%, var(--panel) 70%); border: 1.5px solid #D9B65A;
  border-radius: calc(var(--r) + 6px); padding: clamp(1.8rem, 5vw, 2.6rem); }
.guarantee-box .badge { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px;
  border-radius: 50%; border: 2px solid #8A5E00; color: #8A5E00; font: 800 .72rem/1 var(--sans); margin-bottom: 1rem; }
.guarantee-box h2 { font-size: clamp(1.4rem, 3.6vw, 2rem); margin: 0 0 1rem; color: #6a5a2a; }
.guarantee-box p { margin: 0; color: var(--ink); font-size: 1rem; line-height: 1.75; max-width: 60ch; margin: 0 auto; }

/* ---- scarcity ---- */
.scarcity-note { margin-top: 1.6rem; max-width: 66ch; color: var(--ink-soft); font-size: .92rem; line-height: 1.7;
  border-left: 3px solid var(--reach); padding-left: 1rem; }
.scarcity-note b { color: var(--ink); }

/* =====================================================================
   THANKS.HTML
   ===================================================================== */
.thanks-hero { max-width: 640px; margin: 0 auto; padding: clamp(2.2rem, 6vw, 4rem) clamp(1.1rem, 4vw, 2.4rem) 1.6rem; text-align: center; }
.thanks-hero h1 { font-size: clamp(2rem, 5.4vw, 2.9rem); margin: .3rem 0 1rem; }
.thanks-hero .lead { color: var(--ink-soft); font-size: 1.05rem; max-width: 52ch; margin: 0 auto; }
.inbox-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin: 1.6rem 0 0; }
.inbox-actions a { text-decoration: none; }

.soft-pitch { max-width: 620px; margin: clamp(2rem, 6vw, 3.2rem) auto 0; background: var(--panel);
  border: 1.5px solid var(--line); border-radius: calc(var(--r) + 4px); padding: clamp(1.6rem, 4vw, 2.2rem); text-align: center; }
.soft-pitch .eyebrow { justify-content: center; display: block; }
.soft-pitch h2 { font-size: 1.4rem; margin: 0 0 .8rem; }
.soft-pitch p { margin: 0 0 1.3rem; color: var(--ink-soft); font-size: .96rem; line-height: 1.65; max-width: 50ch; margin-left: auto; margin-right: auto; }

@media (prefers-reduced-motion: reduce) {
  .need-card, .price { transition: none; }
}