/* In Case Anything Happens — landing page v1
   Warm, calm, trustworthy. Mobile-first (cold FB traffic is mostly mobile).
   Palette matches the planner for brand cohesion. */

:root {
  --teal: #2f5d57;
  --teal-dark: #243b38;
  --gold: #b08d57;
  --ink: #2b2b2b;
  --muted: #5f6b66;
  --soft: #faf7f1;       /* page background */
  --cream: #f5efe3;      /* section tint */
  --mint: #eef3f1;       /* callout tint */
  --line: #ddd6c7;
  --maxw: 680px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--soft);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; color: var(--teal-dark); line-height: 1.18; font-weight: 600; }
p { margin: 0 0 1em; }
strong { color: var(--teal-dark); }
img { max-width: 100%; height: auto; display: block; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }

/* ---- top bar ---- */
.topbar { border-bottom: 1px solid var(--line); background: var(--soft); }
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; padding-bottom: 14px; }
.brand { font-family: Georgia, serif; font-size: 17px; color: var(--teal-dark); font-weight: 600; letter-spacing: .2px; }
.brand .dot { color: var(--gold); }
.topbar .trust { font-size: 13px; color: var(--muted); }
.topbar .tb-right { display: flex; align-items: center; gap: 18px; }
.topbar .tb-link { font-size: 14px; color: var(--teal); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--gold); padding-bottom: 1px; white-space: nowrap; }
.topbar .tb-link:hover { color: var(--teal-dark); }
@media (max-width: 600px) { .topbar .trust { display: none; } }

/* ---- PDP module (two-column product page: gallery left / buy column right) ---- */
.eyebrow { text-transform: uppercase; letter-spacing: 2px; font-size: 13px; color: var(--teal); margin: 0 0 14px; font-weight: 600; }
.pdp { background: linear-gradient(180deg, var(--soft), var(--cream)); padding: 26px 0 44px; }
.pdp-wrap { max-width: 1060px; margin: 0 auto; padding: 0 22px; display: grid; gap: 30px; }
.pdp-gallery { max-width: 420px; margin: 0 auto; width: 100%; }
/* stacked layouts (<900px): the BUY module leads, gallery second (Norman audit
   2026-07-09 P1 + Clarity 2026-07-10: mobile 46% + tablet 30% of traffic scroll
   16–27% deep — the gallery stacking above title/price/CTA pushed the offer
   below the only screens most visitors ever see). Reset at 900px where the
   two-column grid places gallery left / buy right. */
.pdp-buy { order: -1; }
.pdp-title { font-size: 27px; margin: 0 0 8px; line-height: 1.2; }
.pdp-newline { font-size: 14px; color: var(--gold); font-weight: 600; margin: 0 0 16px; }
.pdp-benefits { list-style: none; padding: 0; margin: 0 0 22px; }
.pdp-benefits li { font-size: 15.5px; color: #3c4742; padding: 6px 0 6px 30px; position: relative; }
.pdp-benefits li::before {
  content: "✓"; position: absolute; left: 0; top: 8px; color: #fff; background: var(--teal);
  width: 19px; height: 19px; border-radius: 50%; font-size: 11px; line-height: 19px; text-align: center;
}
.offer-divider { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; color: var(--teal-dark);
  font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.offer-divider::before, .offer-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.offers { display: grid; gap: 10px; margin: 0 0 12px; }
.offer-row {
  position: relative; display: flex; align-items: center; gap: 14px; text-decoration: none;
  background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; color: var(--ink);
}
.offer-row.selected { border: 2px solid var(--teal); background: #fdfefd; box-shadow: 0 10px 30px -18px rgba(36,59,56,.5); }
.offer-row img { flex: none; width: 54px; height: 67px; object-fit: cover; border: 1px solid var(--line); border-radius: 4px; }
.offer-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.offer-info strong { font-family: Georgia, serif; font-size: 17px; color: var(--teal-dark); }
.offer-sub { font-size: 13px; color: var(--muted); line-height: 1.4; }
.offer-price { font-family: Georgia, serif; font-size: 21px; font-weight: 700; color: var(--teal-dark); white-space: nowrap; }
.offer-price s { font-size: 14px; color: #b0392e; font-weight: 400; margin-right: 4px; }
.offer-badge {
  position: absolute; top: -10px; right: 14px; background: var(--gold); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  padding: 3px 10px; border-radius: 20px;
}
.kit-strip { font-size: 13.5px; color: var(--muted); margin: 0 0 18px; }
.pdp-cta { display: block; text-align: center; }
.stock { display: flex; align-items: center; gap: 8px; justify-content: center; font-size: 14px; color: #3c4742; margin: 12px 0 0; }
.map-note { font-size: 13px; color: var(--muted); text-align: center; margin: 8px 0 0; }
.stock-dot { width: 9px; height: 9px; border-radius: 50%; background: #3d8f5f; box-shadow: 0 0 0 3px rgba(61,143,95,.18); }
.pdp-acc { border-bottom: 1px solid var(--line); }
.pdp-acc:first-of-type { border-top: 1px solid var(--line); margin-top: 22px; }
.pdp-acc summary { list-style: none; cursor: pointer; position: relative; font-family: Georgia, serif;
  font-size: 17px; font-weight: 600; color: var(--teal-dark); padding: 14px 32px 14px 0; }
.pdp-acc summary::-webkit-details-marker { display: none; }
.pdp-acc summary::after { content: "+"; position: absolute; right: 2px; top: 50%; transform: translateY(-50%); color: var(--teal); font-size: 22px; font-weight: 400; }
.pdp-acc[open] summary::after { content: "–"; }
.pdp-acc p { font-size: 15px; color: #3c4742; margin: 0; padding: 0 0 16px; }
/* billboard slide inside the gallery (the honest 365 card) */
.gmain { position: relative; }
.gmain .off { display: none; }
.gslide { aspect-ratio: 966 / 1200; background: var(--teal-dark); border-radius: 6px; border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 26px; }
.gslide-in { max-width: 300px; }
.gslide-kicker { color: #e8c98c; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; margin: 0 0 14px; }
.gslide-big { font-family: Georgia, serif; color: #fff; font-size: 34px; line-height: 1.15; margin: 0 0 16px; }
.gslide-sub { color: #cbd9d5; font-size: 15px; line-height: 1.55; margin: 0; }
.gslide-sub strong { color: #fff; }
.gthumb-slide { font-family: Georgia, serif; font-size: 10px; line-height: 1.25; color: #e8c98c; background: var(--teal-dark); }

/* ---- benefit rows under CTAs (icon-row device: labeled checks, scannable) ---- */
ul.benes { list-style: none; padding: 0; margin: 16px auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; max-width: 520px; }
ul.benes li { font-size: 14px; color: var(--muted); position: relative; padding-left: 22px; }
ul.benes li::before {
  content: "✓"; position: absolute; left: 0; top: 1px; color: #fff; background: var(--teal);
  width: 16px; height: 16px; border-radius: 50%; font-size: 10px; line-height: 16px; text-align: center;
}

/* ---- CTA ---- */
.cta {
  display: inline-block; background: var(--teal); color: #fff; text-decoration: none;
  font-size: 19px; font-weight: 600; padding: 17px 38px; border-radius: 8px;
  box-shadow: 0 10px 26px -10px rgba(47,93,87,.7); transition: transform .12s ease, background .12s ease;
}
.cta:hover { background: var(--teal-dark); transform: translateY(-1px); }
.cta-note { font-size: 14px; color: var(--muted); margin-top: 12px; }
.cta-wrap { text-align: center; }

/* ---- sections ---- */
section { padding: 46px 0; }
section.tint { background: var(--cream); }
section h2 { font-size: 27px; margin: 0 0 18px; }
.lead { font-size: 20px; color: #3c4742; }
.center { text-align: center; }

/* ---- the pain block ---- */
.pain p { color: #3c4742; }
.permanence {
  background: var(--mint); border-left: 4px solid var(--teal); padding: 18px 22px;
  border-radius: 4px; margin: 22px 0 0; font-size: 17px;
}
.permanence strong { color: var(--teal-dark); }

/* ---- what's inside ---- */
.inside-shot { margin: 8px 0 26px; }
.inside-shot.narrow { max-width: 440px; margin-left: auto; margin-right: auto; }
.product-shot { max-width: 300px; margin: 0 auto 24px; }
.inside-shot img { border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 14px 40px -20px rgba(36,59,56,.4); }
.caption { font-size: 14px; color: var(--muted); text-align: center; margin-top: 9px; font-style: italic; }
ul.checks { list-style: none; padding: 0; margin: 0 0 18px; }
ul.checks li { padding: 9px 0 9px 32px; position: relative; border-bottom: 1px solid var(--line); font-size: 17px; }
ul.checks li:last-child { border-bottom: none; }
ul.checks li::before {
  content: "✓"; position: absolute; left: 0; top: 8px; color: #fff; background: var(--teal);
  width: 21px; height: 21px; border-radius: 50%; font-size: 12px; line-height: 21px; text-align: center;
}

/* ---- objections ---- */
.obj { margin: 0 0 20px; }
.obj h3 { font-size: 19px; margin: 0 0 5px; color: var(--teal-dark); }
.obj p { color: #3c4742; margin: 0; }

/* ---- offer card ---- */
.offer { background: #fff; border: 2px solid var(--teal); border-radius: 14px; padding: 32px 26px; text-align: center; box-shadow: 0 20px 60px -30px rgba(36,59,56,.5); }
.offer .price { font-family: Georgia, serif; font-size: 46px; color: var(--teal-dark); margin: 6px 0 2px; }
.offer .price small { font-size: 18px; color: var(--muted); font-weight: normal; }
.offer .what { font-size: 16px; color: var(--muted); margin-bottom: 20px; }
.offer ul { text-align: left; max-width: 380px; margin: 0 auto 24px; }
.guarantee { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; color: var(--muted); margin-top: 16px; }
.guarantee .seal { width: 30px; height: 30px; border: 2px solid var(--gold); border-radius: 50%; color: var(--gold); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }

/* ---- founding note (honest social proof) ---- */
.founding { background: var(--mint); border-radius: 10px; padding: 20px 22px; font-size: 16px; color: #3c4742; }
.founding strong { color: var(--teal-dark); }

/* ---- footer ---- */
footer { background: var(--teal-dark); color: #d7e0dd; padding: 34px 0; font-size: 13px; line-height: 1.55; }
footer .wrap { text-align: center; }
footer .disc { color: #aebcb8; max-width: 560px; margin: 0 auto 14px; }
footer a { color: #fff; }
/* the global teal-dark strong is invisible on the teal-dark footer — the legal
   disclaimer's bold clause must be readable (same fix as .gslide-sub strong) */
footer strong { color: #fff; }

/* ---- free-guides discovery band (links the money page → the blog) ---- */
.guides-band { background: var(--cream); border-top: 1px solid var(--line); padding: 46px 0; }
.guides-band .eyebrow-c { text-transform: uppercase; letter-spacing: .13em; font-size: 13px; font-weight: 700; color: var(--gold); margin: 0 0 10px; }
.guides-band h2 { margin: 0 0 8px; }
.guides-band .lead { color: var(--muted); max-width: 560px; margin: 0 0 22px; }
.gcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin: 0 0 22px; }
.gcard { display: block; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; text-decoration: none; }
.gcard:hover { border-color: var(--gold); box-shadow: 0 6px 18px rgba(36,59,56,.06); }
.gcard h3 { margin: 0 0 6px; font-size: 17px; }
.gcard p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
.guides-all { color: var(--teal); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--gold); padding-bottom: 1px; }
.guides-all:hover { color: var(--teal-dark); }

.cta-sm { padding: 13px 28px; font-size: 17px; }
.cta-ghost { background: #fff; color: var(--teal); border: 2px solid var(--teal); box-shadow: none; }
.cta-ghost:hover { background: var(--mint); color: var(--teal-dark); }

/* ---- stat band ---- */
.statband { background: var(--teal-dark); color: #eaf1ef; padding: 38px 0; }
.statband .band-title { font-family: Georgia, serif; font-size: 21px; color: #fff; text-align: center; margin: 0 0 24px; }
.stats { display: grid; gap: 22px; }
.stat { text-align: center; }
.stat .num { display: block; font-family: Georgia, serif; font-size: 30px; color: #e8c98c; margin-bottom: 6px; }
.stat .lbl { display: block; font-size: 15px; color: #cbd9d5; line-height: 1.5; }
.stat em { color: #fff; font-style: italic; }
.band-foot { font-size: 11px; color: #8aa39d; text-align: center; margin: 24px 0 0; }
.statband sup { color: #8aa39d; }

/* ---- security ---- */
.security h2 { text-align: center; }
.security .lead { text-align: center; max-width: 600px; margin-left: auto; margin-right: auto; }

/* ---- founder note ---- */
.founder { max-width: 600px; }
.founder-photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 8px 24px -10px rgba(36,59,56,.4); margin-bottom: 16px; }
.founder h2 { font-size: 24px; }
.founder p { color: #3c4742; }
.founder .sign { font-family: Georgia, serif; font-style: italic; color: var(--teal-dark); margin-top: 4px; }

/* ---- value stack ---- */
.stack { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin-bottom: 24px; background: #fff; }
.stack-row, .stack-total { display: flex; justify-content: space-between; gap: 16px; padding: 12px 18px; font-size: 16px; }
.stack-row { border-bottom: 1px solid var(--line); }
.stack-row .v { color: var(--muted); white-space: nowrap; }
.stack-total { background: var(--mint); font-weight: 700; font-size: 18px; color: var(--teal-dark); }
.stack-total .v { color: var(--teal-dark); }

/* ---- offer + tiers ---- */
.offer { background: var(--cream); border-radius: 16px; padding: 26px 22px; }
.tiers { display: grid; gap: 16px; margin-bottom: 8px; }
.tier { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 22px 18px; text-align: center; }
.tier:only-child { grid-column: 1 / -1; max-width: 360px; margin-inline: auto; }
.tier.featured { border: 2px solid var(--teal); box-shadow: 0 16px 44px -26px rgba(36,59,56,.6); }
.tier-name { font-family: Georgia, serif; font-size: 18px; color: var(--teal-dark); margin: 0 0 4px; }
.tier .price { font-family: Georgia, serif; font-size: 40px; color: var(--teal-dark); margin: 2px 0 4px; }
.tier .price s { font-size: 20px; color: #a7b0ab; }
.tier-note { font-size: 14px; color: var(--muted); margin: 0 0 16px; min-height: 38px; }
.tier .cta { display: block; }
.tier-foot { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--gold); margin: 12px 0 0; }

.guarantee { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; color: #3c4742; margin-top: 22px; line-height: 1.5; }
.guarantee .seal { flex: none; width: 38px; height: 38px; border: 2px solid var(--gold); border-radius: 50%; color: var(--gold); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; }
.urgency { text-align: center; font-size: 15px; color: var(--teal-dark); margin: 16px 0 0; }

/* ---- order bump (the setup/action layer add-on) ---- */
.addon { background: #fff; border: 2px dashed var(--teal); border-radius: 12px; padding: 18px 20px; margin: 22px 0 0; text-align: left; }
.addon-head { display: flex; align-items: center; gap: 10px; font-size: 16px; color: var(--teal-dark); margin-bottom: 8px; }
.addon-head .addon-check { flex: none; width: 26px; height: 26px; border-radius: 6px; background: var(--teal); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; line-height: 1; }
.addon-head .addon-price { margin-left: auto; font-family: Georgia, serif; color: var(--teal); font-weight: 700; white-space: nowrap; }
.addon p { font-size: 15px; color: #3c4742; margin: 0 0 6px; }
.addon .addon-note { font-size: 13px; color: var(--muted); font-style: italic; margin: 0; }

/* ---- reviews (when seeded) ---- */
.reviews { margin-top: 30px; }
.review { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; margin: 14px 0; }
.review .quote { font-size: 17px; color: var(--ink); margin: 0 0 8px; }
.review .who { font-size: 14px; color: var(--muted); margin: 0; }

/* ---- the three locked doors (mechanism) ---- */
.doors { display: grid; gap: 14px; margin: 26px 0 22px; }
.door { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 22px 20px; position: relative; }
.door h3 { font-size: 19px; margin: 0 0 6px; color: var(--teal-dark); }
.door p { font-size: 15.5px; color: #3c4742; margin: 0; }
.door-num {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; margin-bottom: 12px;
  background: var(--teal); color: #fff; font-family: Georgia, serif; font-size: 17px; font-weight: 700;
}
.doors-close { font-size: 17px; color: #3c4742; text-align: center; max-width: 600px; margin: 0 auto; }

/* ---- how it works, 1-2-3 (same card language as the doors) ---- */
.howit { display: grid; gap: 14px; margin: 26px 0 24px; text-align: left; }
.howit .step { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 22px 20px; }
.howit .step h3 { font-size: 19px; margin: 0 0 6px; color: var(--teal-dark); }
.howit .step p { font-size: 15.5px; color: #3c4742; margin: 0; }

/* ---- doors × alternatives matrix (mechanism made visible) ---- */
.matrix { width: 100%; border-collapse: collapse; margin: 26px 0 12px; background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; font-size: 15px; }
.matrix th, .matrix td { padding: 11px 8px; border-bottom: 1px solid var(--line); text-align: center; }
.matrix tbody tr:last-child td { border-bottom: none; }
.matrix th { font-family: Georgia, serif; font-size: 14px; color: var(--teal-dark); font-weight: 600; line-height: 1.25; }
.matrix td:first-child { text-align: left; font-size: 14.5px; color: var(--ink); }
.matrix .us { background: var(--mint); }
.matrix th.us { color: var(--teal-dark); }
.matrix td.yes { color: var(--teal); font-weight: 700; font-size: 18px; }
.matrix td.no { color: #b9b3a4; font-size: 16px; }
.matrix td.part { color: var(--muted); font-size: 13px; }
.matrix-foot { font-size: 14px; color: var(--muted); text-align: center; max-width: 600px; margin: 0 auto; }

/* ---- honest price anchor (cost of the alternative) ---- */
.anchor-note {
  background: var(--mint); border-left: 4px solid var(--gold); border-radius: 4px;
  padding: 16px 20px; margin: 0 0 22px; font-size: 15.5px; color: #3c4742; text-align: left;
}
.anchor-note strong { color: var(--teal-dark); }

/* ---- gallery internals (main image + swappable thumbs) ---- */
.gmain img {
  width: 100%; height: auto; aspect-ratio: 966 / 1200; object-fit: cover; background: #fff;
  border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 18px 50px -22px rgba(36,59,56,.45);
}
/* flex-wrap added 2026-07-10: the 6th thumb (v6's kit slide) pushed the strip's
   min-content to ~410px — wider than ANY phone — which dragged the whole page
   ~18px past the right edge on mobile (prices on the offer cards rendered
   off-screen). 5 thumbs had just fit; never let this strip force page width. */
.gthumbs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 12px; }
.gthumb { width: 56px; height: 56px; padding: 0; border: 2px solid var(--line); border-radius: 6px; overflow: hidden; background: #fff; cursor: pointer; }
.gthumb img { width: 100%; height: 100%; object-fit: cover; }
.gthumb.active { border-color: var(--teal); }

/* ---- one real voice directly under the buy box ---- */
.hero-quote { max-width: 430px; margin: 20px auto 0; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 14px 18px; text-align: center; }
.hero-quote .quote { font-size: 16px; font-style: italic; color: var(--ink); margin: 0 0 4px; }
.hero-quote .who { font-size: 13px; color: var(--muted); margin: 0; }
.hero-quote .who a, .review .who a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.band-foot a { color: #8aa39d; }

/* ---- "what you get" glance box (2026-07-24) ----
   Clarity tap heatmap (150 taps): the four most-tapped elements on the money
   page were the four FAQ accordions in the buy column, beating buy-button taps
   ~5:1 — buyers couldn't see WHAT they were getting without digging. And the
   $59 CTA out-clicked the $32 one ~4.5:1 while the $32 outsold it 3:1: the two
   editions weren't visually distinguishable, so people downgraded at checkout.
   This box answers all four questions in visible copy and puts the two editions
   side by side. Reuses the existing system: .offer-divider as the label, the
   .offer-row card shell, .matrix's var(--mint) "this is the one" column tint,
   and the .stock-dot for the delivery line. Sits BELOW the CTA block so it adds
   no height above the primary CTA on a 390px phone. */
.glance-divider { margin-top: 26px; }
.glance { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 16px 16px 14px; margin: 0; }
.glance-lede { font-size: 15px; color: #3c4742; line-height: 1.5; margin: 0 0 9px; }
.glance-inside { font-size: 15px; color: #3c4742; line-height: 1.55; margin: 0 0 14px; }
.glance-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.glance-col { padding: 12px 10px 4px; }
.glance-col + .glance-col { border-left: 1px solid var(--line); }
.glance-col.glance-us { background: var(--mint); }
.glance-name { font-family: Georgia, serif; font-size: 14.5px; color: var(--teal-dark); font-weight: 600; line-height: 1.25; margin: 0; }
/* min-height keeps the two prices on the same baseline when the longer edition
   name wraps to two lines — the $59 vs $32 comparison is the whole job here. */
.glance-tier { display: block; min-height: 2.5em; }
.glance-price { display: block; font-family: Georgia, serif; font-size: 21px; font-weight: 700; color: var(--teal-dark); margin-top: 2px; }
.glance-price s { font-size: 13px; color: #b0392e; font-weight: 400; margin-right: 3px; }
.glance-col ul { list-style: none; padding: 0; margin: 9px 0 0; }
.glance-col li { font-size: 14px; color: #3c4742; line-height: 1.4; padding: 0 0 8px 17px; position: relative; }
.glance-col li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--teal); font-size: 12px; font-weight: 700; }
.glance-fam { font-size: 14.5px; color: #3c4742; line-height: 1.5; margin: 12px 0 0; border-top: 1px solid var(--line); padding-top: 12px; }
.glance-time { display: flex; align-items: flex-start; gap: 8px; font-size: 14.5px; color: #3c4742; line-height: 1.45; margin: 10px 0 0; }
.glance-time .stock-dot { flex: none; margin-top: 5px; }
@media (min-width: 700px) {
  .glance { padding: 18px 20px 16px; }
  .glance-col { padding: 14px 14px 6px; }
  .glance-col li, .glance-fam, .glance-time, .glance-inside { font-size: 14.5px; }
  .glance-lede { font-size: 16px; }
  .glance-name { font-size: 16px; }
  .glance-tier { min-height: 0; }   /* wide enough here that neither name wraps */
}

/* ---- full-width promise band (the mechanism resolved in one line) ---- */
.bandline { background: var(--teal-dark); padding: 34px 0; }
.bandline-big { font-family: Georgia, serif; color: #fff; text-align: center; font-size: 25px; line-height: 1.4; letter-spacing: .5px; margin: 0; }
.bandline-big .gold { color: #e8c98c; }

/* ---- objections as a FAQ accordion ---- */
details.obj { border-bottom: 1px solid var(--line); margin: 0; }
details.obj summary {
  list-style: none; cursor: pointer; position: relative;
  font-family: Georgia, serif; font-size: 19px; font-weight: 600; color: var(--teal-dark);
  padding: 15px 36px 15px 0;
}
details.obj summary::-webkit-details-marker { display: none; }
details.obj summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); color: var(--teal); font-size: 26px; font-weight: 400; }
details.obj[open] summary::after { content: "–"; }
details.obj p { color: #3c4742; margin: 0; padding: 0 0 18px; }

/* ---- sticky mobile buy bar ---- */
.sticky { position: fixed; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,.97); border-top: 1px solid var(--line); box-shadow: 0 -6px 20px -12px rgba(0,0,0,.25); z-index: 50; padding: 10px 0; }
.sticky-in { max-width: var(--maxw); margin: 0 auto; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.sticky-price { font-size: 15px; color: var(--teal-dark); }
.sticky .cta { box-shadow: none; }
body { padding-bottom: 68px; }       /* room for the sticky bar */

@media (min-width: 700px) {
  body { font-size: 19px; }
  section h2 { font-size: 31px; }
  .stats { grid-template-columns: repeat(3, 1fr); }
  .tiers { grid-template-columns: 1fr 1fr; }
  .doors { grid-template-columns: repeat(3, 1fr); }
  .howit { grid-template-columns: repeat(3, 1fr); }
  .gthumb { width: 64px; height: 64px; }
  .bandline-big { font-size: 32px; }
  /* sticky bar no longer hides here — it stays until the real two-column PDP
     exists at 900px. The old 700px cutoff left every portrait iPad (768–834px)
     with no visible CTA anywhere: no bar AND no side-by-side buy column
     (Norman audit 2026-07-09 P0; tablet = 30% of traffic, pure-human 65+,
     shallowest scroll — Clarity 2026-07-10). */
}

/* desktop PDP: the two columns side by side, buy column leading */
@media (min-width: 900px) {
  body { padding-bottom: 0; }         /* sticky bar gone — reclaim its room */
  .sticky { display: none; }          /* desktop: no sticky bar */
  .pdp { padding: 44px 0 56px; }
  .pdp-wrap { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 54px; align-items: start; }
  .pdp-buy { order: 0; }              /* source order returns: gallery left, buy right */
  .pdp-gallery { max-width: 480px; margin: 0; }
  .pdp-title { font-size: 31px; }
}

/* ---- tap-to-zoom lightbox ----
   Clarity heatmap (2026-07-04): the product photo was the #1 tapped element and
   did nothing — the 17% dead-click rate. Product + story photos now zoom on tap. */
.zoomable { cursor: zoom-in; }
.lightbox { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(20,26,25,.93); -webkit-tap-highlight-color: transparent; }
.lightbox.open { display: flex; }
.lightbox img { max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 6px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.7); cursor: zoom-out; }
.lightbox-close { position: absolute; top: 16px; right: 18px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255,255,255,.15); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.lightbox-close:hover { background: rgba(255,255,255,.28); }
@media (prefers-reduced-motion: no-preference) {
  .lightbox.open img { animation: lb-in .18s ease-out; }
  @keyframes lb-in { from { transform: scale(.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }
}