/* =========================================================
   WATCH ME REBUILD — Funnel pages (checkout + thank-you)
   Built on the same Watch Me Rebuild tokens as the landing
   page. Warm paper-and-ink · inked outlines · wobble radii ·
   sticker shadows. Loaded AFTER styles-brand.css.
   ========================================================= */

/* ---------- progress / funnel step indicator ---------- */
.funnel-steps {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; flex-wrap: wrap;
  margin: 6px auto 0; padding: 0;
}
.funnel-steps .fstep {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-ui); font-weight: 700; font-size: 14px;
  color: var(--ink-soft);
}
.funnel-steps .fstep .dot {
  width: 26px; height: 26px; border-radius: 999px;
  border: 2.5px solid var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; background: var(--surface-card); color: var(--ink);
}
.funnel-steps .fstep.active .dot { background: var(--clay-500); color: #fff; }
.funnel-steps .fstep.done .dot { background: var(--sage-500); color: #fff; }
.funnel-steps .fstep.active { color: var(--ink); }
.funnel-steps .sep { width: 26px; height: 2.5px; background: var(--border-soft); border-radius: 2px; }
@media (max-width: 560px){
  .funnel-steps .fstep span.lbl { display: none; }
  .funnel-steps .sep { width: 16px; }
}

/* ---------- generic checkout layout ---------- */
.checkout-head { text-align: center; max-width: 760px; margin: 0 auto; }
.checkout-grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 38px;
  align-items: start; margin-top: 46px;
}
@media (max-width: 920px){ .checkout-grid { grid-template-columns: 1fr; gap: 30px; } }

/* panel card shared look */
.fcard {
  background: var(--surface-card);
  border: 2.5px solid var(--ink);
  border-radius: var(--wobble);
  box-shadow: var(--shadow-sticker-lg);
  padding: 30px 28px;
}
.fcard + .fcard { margin-top: 26px; }
.fcard h3 {
  font-family: var(--font-display); font-size: clamp(22px, 3vw, 28px);
  color: var(--ink); margin: 0;
}
.fcard .fcard-kicker {
  font-family: var(--font-ui); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--tracking-wide); font-size: 12.5px; color: var(--clay-600);
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 12px;
}
.fcard .fcard-kicker::before { content:""; width: 22px; height: 2.5px; background: var(--clay-500); border-radius: 2px; }

/* ---------- price tag ---------- */
.price-row { display: flex; align-items: baseline; gap: 12px; margin: 8px 0 4px; flex-wrap: wrap; }
.price-now {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(46px, 7vw, 62px); color: var(--clay-600); line-height: 1;
}
.price-unit { font-family: var(--font-hand); font-size: 24px; color: var(--ink-soft); }
.price-note { font-family: var(--font-hand); font-size: 21px; color: var(--sage-600); margin-top: 6px; }

.incl-list { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.incl-list li {
  display: flex; align-items: flex-start; gap: 12px;
  font-family: var(--font-body); font-size: 17.5px; color: var(--ink); line-height: 1.4;
}
.incl-list li .ck {
  flex: none; width: 24px; height: 24px; border-radius: 999px;
  background: var(--sage-50); border: 2px solid var(--sage-600); color: var(--sage-600);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 900; font-size: 13px;
  margin-top: 2px;
}

/* ---------- bank transfer box ---------- */
.bank-box {
  background: var(--paper-deep);
  border: 2.5px dashed var(--ink);
  border-radius: var(--radius-md);
  padding: 20px 22px; margin-top: 4px;
}
.bank-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px 0; border-bottom: 1.5px solid var(--border-soft);
}
.bank-row:last-child { border-bottom: 0; }
.bank-row .lab {
  font-family: var(--font-ui); font-weight: 700; font-size: 13px;
  text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft);
}
.bank-row .val {
  font-family: var(--font-body); font-size: 19px; font-weight: 600; color: var(--ink);
  text-align: right;
}
.bank-row .val.amount { color: var(--clay-600); font-family: var(--font-display); font-weight: 800; font-size: 22px; }
.placeholder {
  background: var(--honey-50); border: 1.5px solid var(--honey-500);
  border-radius: 6px; padding: 2px 8px; color: var(--honey-600);
  font-family: var(--font-ui); font-weight: 700; font-size: 15px; letter-spacing: .01em;
}
.copy-btn {
  margin-left: 8px; cursor: pointer; border: 2px solid var(--ink);
  background: var(--surface-card); color: var(--ink);
  font-family: var(--font-ui); font-weight: 700; font-size: 12px;
  border-radius: 999px; padding: 3px 10px; box-shadow: 2px 2px 0 var(--ink);
  transition: transform .08s ease, box-shadow .08s ease;
}
.copy-btn:active { transform: translate(2px,2px); box-shadow: 0 0 0 var(--ink); }
.copy-btn.copied { background: var(--sage-500); color: #fff; border-color: var(--sage-600); }

/* numbered how-to-pay steps */
.pay-steps { counter-reset: pay; list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.pay-steps li { display: flex; gap: 14px; align-items: flex-start; font-family: var(--font-body); font-size: 17px; color: var(--ink); line-height: 1.45; }
.pay-steps li .n {
  counter-increment: pay; flex: none;
  width: 30px; height: 30px; border-radius: 999px;
  background: var(--clay-500); color: #fff; border: 2.5px solid var(--ink);
  font-family: var(--font-display); font-weight: 800; font-size: 15px;
  display: inline-flex; align-items: center; justify-content: center;
}
.pay-steps li .n::before { content: counter(pay); }

/* ---------- embedded google form ---------- */
.form-embed-wrap { margin-top: 6px; }
.form-embed-wrap iframe { width: 100%; border: 0; border-radius: var(--radius-md); background: var(--surface-card); display: block; }
/* Google Form embed: fit height closely to the form so there's no blank space.
   Narrower widths wrap the form taller, so phones get more height than desktop. */
.form-embed-wrap iframe.gform { height: 660px; }
@media (max-width: 560px) { .form-embed-wrap iframe.gform { height: 700px; } }
@media (max-width: 400px) { .form-embed-wrap iframe.gform { height: 740px; } }
.embed-placeholder {
  border: 2.5px dashed var(--clay-500); border-radius: var(--radius-md);
  background: var(--clay-50); padding: 30px 26px; text-align: center;
}
.embed-placeholder .ttl { font-family: var(--font-display); font-weight: 800; font-size: 21px; color: var(--clay-700); }
.embed-placeholder p { font-family: var(--font-body); font-size: 16px; color: var(--ink-soft); margin-top: 10px; line-height: 1.5; }
.embed-placeholder code { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 13px; background: var(--paper-card); border: 1.5px solid var(--border-soft); border-radius: 6px; padding: 2px 6px; }

/* fields the form should collect — shown as a checklist in placeholder */
.field-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; }
.field-chips .chip {
  font-family: var(--font-ui); font-weight: 700; font-size: 13px;
  background: var(--surface-card); border: 2px solid var(--ink); border-radius: 999px;
  padding: 6px 13px; color: var(--ink); box-shadow: 2px 2px 0 var(--ink);
}

/* ---------- ebook preview gallery ---------- */
.preview-head { text-align: center; max-width: 720px; margin: 0 auto; }
.peek-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
  margin-top: 36px;
}
@media (max-width: 820px){ .peek-grid { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; } }
.peek {
  background: var(--surface-raised); border: 2.5px solid var(--ink);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sticker);
  padding: 12px; transform: rotate(-1deg); transition: transform .2s ease, box-shadow .2s ease;
}
.peek:nth-child(2){ transform: rotate(1.2deg); }
.peek:nth-child(3){ transform: rotate(-0.6deg); }
.peek:hover { transform: rotate(0) translateY(-4px); box-shadow: var(--shadow-sticker-lg); }
.peek img { display: block; width: 100%; border-radius: 8px; border: 1.5px solid var(--border-soft); }
.peek .cap { font-family: var(--font-hand); font-size: 19px; color: var(--ink-soft); text-align: center; margin-top: 10px; }
.peek-tag {
  display: inline-block; font-family: var(--font-hand); font-size: 22px; color: var(--clay-600);
  transform: rotate(-1.4deg);
}

/* ---------- trust / reassurance strip ---------- */
.assure-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 26px; margin-top: 34px; }
.assure {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-body); font-size: 16px; color: var(--ink-soft);
}
.assure .ai { font-size: 19px; }

/* ============================================================
   THANK-YOU PAGE
   ============================================================ */
.ty-hero { text-align: center; max-width: 720px; margin: 0 auto; }
.ty-badge {
  width: 92px; height: 92px; margin: 0 auto 24px;
  border-radius: 999px; background: var(--sage-50);
  border: 3px solid var(--sage-600); color: var(--sage-600);
  display: flex; align-items: center; justify-content: center;
  font-size: 46px; box-shadow: var(--shadow-sticker);
  animation: pop .5s cubic-bezier(.2,.9,.3,1.4) both;
}
@keyframes pop { 0% { transform: scale(.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce){ .ty-badge { animation: none; } }

.ty-receipt {
  max-width: 560px; margin: 36px auto 0;
  background: var(--surface-card); border: 2.5px solid var(--ink);
  border-radius: var(--wobble); box-shadow: var(--shadow-sticker-lg);
  padding: 28px 30px; text-align: left;
}
.ty-receipt .r-line { display: flex; align-items: flex-start; gap: 14px; padding: 13px 0; border-bottom: 1.5px dashed var(--border-soft); }
.ty-receipt .r-line:last-child { border-bottom: 0; }
.ty-receipt .r-ic {
  flex: none; width: 34px; height: 34px; border-radius: 999px;
  background: var(--clay-50); border: 2px solid var(--clay-500); color: var(--clay-600);
  display: inline-flex; align-items: center; justify-content: center; font-size: 17px;
}
.ty-receipt .r-t { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--ink); }
.ty-receipt .r-d { font-family: var(--font-body); font-size: 16px; color: var(--ink-soft); margin-top: 2px; line-height: 1.45; }

/* instagram follow card */
.ig-card {
  max-width: 620px; margin: 44px auto 0;
  background: var(--ink); color: var(--paper);
  border: 2.5px solid var(--ink); border-radius: var(--wobble-lg);
  box-shadow: var(--shadow-sticker-lg);
  padding: 38px 34px; text-align: center;
}
.ig-card h3 { color: var(--paper); font-size: clamp(24px, 4vw, 32px); }
.ig-card .ig-sub { font-family: var(--font-body); color: rgba(251,241,225,.82); font-size: 18px; line-height: 1.55; margin-top: 12px; max-width: 42ch; margin-left:auto; margin-right:auto; }
.ig-qr {
  width: 210px; height: 210px; margin: 26px auto 0;
  background: #fff; border: 3px solid var(--paper);
  border-radius: var(--radius-md); padding: 12px;
  box-shadow: 5px 6px 0 rgba(0,0,0,.45);
}
.ig-qr img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 6px; }
.ig-handle {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 22px;
  font-family: var(--font-display); font-weight: 800; font-size: 21px; color: var(--paper);
}
.ig-handle .ig-glyph {
  width: 34px; height: 34px; border-radius: 9px;
  background: linear-gradient(135deg, var(--honey-500), var(--clay-500));
  border: 2px solid var(--paper);
  display: inline-flex; align-items: center; justify-content: center; font-size: 18px;
}
.ig-card .btn { margin-top: 26px; }
.ig-scan-note { font-family: var(--font-hand); font-size: 20px; color: var(--honey-300); margin-top: 16px; }

/* simple centered single-column section helper */
.narrow { max-width: 920px; margin-left: auto; margin-right: auto; }
.center { text-align: center; }
.backlink {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 30px;
  font-family: var(--font-ui); font-weight: 700; font-size: 15px; color: var(--ink-soft);
  text-decoration: none;
}
.backlink:hover { color: var(--clay-600); }

/* ============================================================
   ADDITIONS — sage panel · readable gallery + lightbox ·
   Instagram icons · responsive (mobile / tablet / desktop)
   ============================================================ */

/* distinct background for the "You're not the only one" block */
.panel-sage { background: #e4d2b4; }

/* ---------- readable ebook gallery (click/tap to read) ---------- */
.peek-btn {
  display: block; width: 100%; padding: 0; border: 0; margin: 0;
  background: none; cursor: zoom-in; position: relative; border-radius: 8px;
}
.peek-btn img { display: block; width: 100%; border-radius: 8px; border: 1.5px solid var(--border-soft); }
.peek-zoom {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
  font-family: var(--font-ui); font-weight: 700; font-size: 13px;
  background: var(--ink); color: var(--paper);
  border: 2px solid var(--paper); border-radius: 999px; padding: 6px 14px;
  box-shadow: 2px 2px 0 rgba(0,0,0,.4); white-space: nowrap;
  opacity: .92; transition: opacity .15s ease, transform .15s ease;
}
.peek-btn:hover .peek-zoom, .peek-btn:focus-visible .peek-zoom { opacity: 1; transform: translateX(-50%) translateY(-2px); }
.peek-btn:focus-visible { outline: 3px solid var(--sky-500); outline-offset: 3px; }

/* ---------- lightbox / full-size reader ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(34, 25, 18, 0.86);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: clamp(16px, 4vw, 48px) 16px;
  overscroll-behavior: contain;
}
.lightbox[hidden] { display: none !important; }
.lb-stage {
  width: 100%; max-width: 860px; max-height: 86vh; overflow: auto;
  border-radius: 12px; -webkit-overflow-scrolling: touch;
  display: flex; justify-content: center; align-items: flex-start;
}
.lb-stage img {
  width: 100%; max-width: 820px; height: auto; display: block;
  border-radius: 12px; border: 3px solid var(--paper);
  box-shadow: 0 18px 50px rgba(0,0,0,.5);
}
.lb-close {
  position: fixed; top: 16px; right: 16px; z-index: 10000;
  width: 48px; height: 48px; border-radius: 999px;
  background: var(--clay-500); color: #fff; border: 2.5px solid var(--paper);
  font-family: var(--font-ui); font-weight: 800; font-size: 20px; cursor: pointer;
  box-shadow: 3px 3px 0 rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center;
}
.lb-close:active { transform: translate(2px,2px); box-shadow: 0 0 0; }
.lb-hint { margin-top: 14px; font-family: var(--font-hand); font-size: 19px; color: var(--honey-300); text-align: center; }

/* ---------- instagram icons (replacing camera emoji) ---------- */
.ig-glyph svg { display: block; }
.ig-glyph { overflow: hidden; }
.ig-btn-icon { display: inline-flex; align-items: center; justify-content: center; }
.ig-btn-icon svg { display: block; }

/* ============================================================
   RESPONSIVE — tablet & mobile readability
   ============================================================ */

/* gallery columns: 3 on desktop, 2 on tablet, 1 on phone */
@media (max-width: 1024px) and (min-width: 681px) {
  .peek-grid { grid-template-columns: repeat(2, 1fr); max-width: 680px; margin-left: auto; margin-right: auto; }
  .peek:nth-child(3) { grid-column: 1 / -1; max-width: 330px; margin-left: auto; margin-right: auto; }
}

/* TABLET and below */
@media (max-width: 820px) {
  .peek-grid { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; gap: 26px; }
  .peek { transform: none !important; }
  .peek-zoom { opacity: 1; font-size: 14px; }     /* always visible on touch */
}

/* general tablet tightening */
@media (max-width: 760px) {
  .checkout-grid { gap: 26px; }
  .fcard { padding: 24px 20px; }
  .fcard h3 { font-size: 23px; }
  .price-now { font-size: 52px; }
  .ig-card { padding: 30px 22px; }
}

/* PHONE */
@media (max-width: 560px) {
  /* funnel step indicator stays readable: show numbers, hide long labels (already handled), keep centered */
  .funnel-steps { gap: 8px; }

  /* bank details: stack label above value so nothing is cramped or clipped */
  .bank-row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .bank-row .val { text-align: left; }
  .bank-row .val.amount { font-size: 24px; }
  .placeholder { font-size: 14px; word-break: break-word; }

  /* pay steps + included list comfortable line length */
  .pay-steps li, .incl-list li { font-size: 16.5px; }

  /* order summary / cards */
  .fcard { padding: 22px 18px; border-radius: 16px; }
  .fcard h3 { font-size: 22px; }
  .price-now { font-size: 46px; }
  .price-unit { font-size: 20px; }

  /* checkout intro + heads */
  .checkout-head .lead, .preview-head .lead { font-size: 17px; }

  /* instagram card + QR sizing for small screens */
  .ig-card { padding: 26px 18px; border-radius: 22px; }
  .ig-card h3 { font-size: 24px; }
  .ig-sub { font-size: 16.5px; }
  .ig-qr { width: 172px; height: 172px; }
  .ig-handle { font-size: 18px; }
  .ig-card .btn { width: 100%; }

  /* thank-you receipt */
  .ty-receipt { padding: 22px 18px; }
  .ty-receipt .r-t { font-size: 17px; }
  .ty-receipt .r-d { font-size: 15.5px; }

  /* lightbox close a touch smaller, image fills width */
  .lb-close { width: 44px; height: 44px; top: 12px; right: 12px; }
  .lb-stage { max-height: 82vh; }
}

/* very small phones */
@media (max-width: 380px) {
  .price-now { font-size: 40px; }
  .ig-qr { width: 150px; height: 150px; }
  .fcard h3 { font-size: 20px; }
}