/* GBP Funnel v2 demo — matches pensacolaseocompany.com house tokens */
:root{
  --cream:#f7f5e7; --cream-light:#f5efe3; --charcoal:#333333; --dark:#2d2d2d;
  --gold:#c4a265; --gold-dark:#8a5d2a; --btn:#fd5353; --btn-dark:#e84444;
  --border:#e8e5d8; --muted:#6b675a;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:clip}
body{font-family:'DM Sans',Arial,Helvetica,sans-serif;background:var(--cream);color:var(--charcoal);line-height:1.6}
a{color:var(--gold-dark)}

.demo-banner{background:var(--dark);color:#fff;text-align:center;font-size:13px;padding:8px 12px;letter-spacing:.04em}
.demo-banner a{color:var(--gold);margin-left:10px}

.wrap{max-width:960px;margin:0 auto;padding:48px 20px}
.kicker{color:var(--gold-dark);font-weight:700;text-transform:uppercase;letter-spacing:.18em;font-size:13px;display:block;margin-bottom:12px}
h1{font-size:clamp(30px,5vw,46px);font-weight:700;color:var(--charcoal);line-height:1.15;margin-bottom:16px}
.sub{font-size:19px;color:var(--muted);max-width:640px;margin-bottom:28px}

.card{position:relative;background:#fff;border:1px solid var(--border);border-radius:0;box-shadow:0 10px 30px rgba(45,45,45,.08);padding:36px}
@media(max-width:576px){.card{padding:24px 18px}}

label{font-weight:600;display:block;margin-bottom:6px}
input[type=text],input[type=email],input[type=tel]{
  width:100%;padding:13px 15px;font-size:17px;border:1px solid var(--border);border-radius:0;
  background:#fff;font-family:inherit;margin-bottom:18px}
input:focus{outline:2px solid var(--gold);border-color:var(--gold)}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--muted);margin-bottom:22px}
.consent input{margin-top:4px}

.btn{display:inline-block;border:0;cursor:pointer;font-family:inherit;font-weight:700;font-size:18px;
  background:var(--btn);color:#fff;padding:15px 34px;border-radius:0;text-decoration:none;text-align:center;
  transition:background .15s}
.btn:hover{background:var(--btn-dark)}
.btn-block{width:100%}
.btn-gold{background:var(--gold)} .btn-gold:hover{background:var(--gold-dark)}
.err{background:#fdecea;border:1px solid #f5c6c0;color:#a33;border-radius:0;padding:10px 14px;font-size:14px;margin-bottom:16px;display:none}

.steps{display:flex;gap:8px;margin-bottom:26px;font-size:13px;color:var(--muted)}
.step-dot{flex:1;height:4px;border-radius:2px;background:var(--border)}
.step-dot.on{background:var(--gold)}

.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:8px}
@media(max-width:640px){.choice-grid{grid-template-columns:1fr}}
.choice{border:2px solid var(--border);border-radius:0;background:#fff;padding:28px 22px;cursor:pointer;
  text-align:center;font-family:inherit;transition:border-color .15s,transform .15s}
.choice:hover{border-color:var(--gold);transform:translateY(-2px)}
.choice h3{font-size:21px;margin-bottom:0;color:var(--charcoal)}
.choice p{font-size:15px;color:var(--muted)}
.choice .tag{display:inline-block;margin-top:14px;font-weight:700;color:var(--gold-dark);font-size:14px;letter-spacing:.06em;text-transform:uppercase}

.hero-center{text-align:center}
.hero-center .sub{margin-left:auto;margin-right:auto}
.hero-center .card{margin:0 auto;text-align:left}
.hero-xl{font-size:clamp(45px,8.2vw,114px);margin-bottom:26px;white-space:nowrap}
@media(min-width:700px){.hero-xl{width:max-content;max-width:96vw;margin-left:50%;transform:translateX(-50%)}}
@media(max-width:700px){.hero-xl{white-space:normal;text-wrap:balance}}

.proof-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;
  width:100%;max-width:1800px;margin:0 auto 38px;padding:0 24px}
.proof-row img{width:100%;min-width:0;aspect-ratio:1.75;object-fit:cover;object-position:center;display:block;
  border:1px solid var(--border);box-shadow:0 6px 20px rgba(45,45,45,.10)}
@media(max-width:900px){.proof-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:0 16px}}
@media(max-width:500px){.proof-row{grid-template-columns:minmax(0,1fr)}}

.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin:26px 0 8px}
.phone-line{color:var(--muted);font-size:15px;margin-top:10px}

.skool-card{background:#fff;border:1px solid var(--border);border-radius:0;overflow:hidden;
  box-shadow:0 10px 30px rgba(45,45,45,.08);max-width:640px;margin:0 auto;text-align:left}
.skool-card img{width:100%;height:auto;display:block}
.skool-card .body{padding:26px 28px}
.skool-card .price{color:var(--gold-dark);font-weight:700}

.checklist-sec{margin-top:56px;padding-top:40px;border-top:1px solid var(--border)}
.checklist-sec h2{font-size:28px;margin-bottom:6px}
.checklist-sec .sub{font-size:16px;margin-bottom:24px}
.checklist-wrap{max-width:820px;margin:0 auto}
.checklist-wrap img{width:100%;height:auto;display:block;border:1px solid var(--border);border-radius:0;
  box-shadow:0 6px 20px rgba(45,45,45,.10);margin-bottom:16px}

.demo-drawer{position:fixed;bottom:0;left:0;right:0;z-index:50;font-size:13.5px}
.drawer-toggle{width:100%;border:0;cursor:pointer;font-family:inherit;font-weight:700;font-size:14px;
  background:var(--charcoal);color:var(--cream);padding:11px 16px;text-align:left}
.demo-drawer .drawer-body{display:none;background:#22211c;color:#d8d4c2;padding:14px 18px;max-height:40vh;overflow:auto}
.demo-drawer.open .drawer-body{display:block}
.log-line{padding:3px 0;border-bottom:1px dashed #3a382f;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;word-break:break-word;overflow-wrap:anywhere}
.log-t{color:var(--gold);margin-right:10px}
.log-empty{color:#8a8674;font-style:italic}
.drawer-note{margin-top:12px;font-size:12px;color:#8a8674;line-height:1.5}
body{padding-bottom:60px}

/* Calendar embed + PDF previewer (book-a-call rework) */
.cal-embed{background:#fff;border:1px solid var(--border);max-width:900px;margin:0 auto;box-shadow:0 10px 30px rgba(45,45,45,.08)}
.cal-embed iframe{display:block;width:100%}
.pdf-frame{border:1px solid var(--border);background:#fff;box-shadow:0 10px 30px rgba(45,45,45,.08);max-width:900px;margin:0 auto}
.pdf-frame iframe{display:block;width:100%;height:78vh;min-height:480px;border:0}
.pdf-scroll{height:78vh;min-height:480px;overflow-y:auto;background:#fff}
.pdf-page{width:100%;display:block;border-bottom:1px solid var(--border);aspect-ratio:8.5/11}
@media(max-width:576px){.cal-embed iframe{height:520px}.pdf-frame iframe{height:64vh}}
.pdf-wait{padding:60px 20px;text-align:center;color:var(--muted);font-size:15px}

/* Single-page stages: hidden ones sit off-screen at FULL width so the calendar
   and PDF iframes lay out and preload correctly before they are revealed. */
.stage{position:absolute;left:-200vw;top:0;width:100%;visibility:hidden}
.stage.on{position:static;visibility:visible}
.cal-embed iframe{height:1000px}
@media(max-width:576px){.cal-embed iframe{height:900px}}
@media(max-width:700px){#stage-diy h1{font-size:min(8.6vw,44px);white-space:nowrap}}

#stage-diy .skool-card{margin-top:8px}
#stage-diy .checklist-sec h1,#stage-diy .checklist-sec .sub{text-align:center}
#stage-diy .checklist-sec{margin-top:24px;padding-top:0;border-top:0}
#stage-diy .checklist-sec h1{margin-top:72px}
@media(max-width:700px){#stage-diy .checklist-sec h1{margin-top:56px}}
@media(min-width:701px){#stage-diy .checklist-sec h2{font-size:56px;line-height:1.12;margin-bottom:14px}}

#stage-form .proof-row{margin-top:8px;margin-bottom:56px}

/* ---- legal: disclaimers, footer, terms/privacy pages ---- */
.disclaimer{max-width:760px;margin:14px auto 0;font-size:13px;line-height:1.55;color:var(--muted);text-align:center}
.site-footer{border-top:1px solid var(--border);margin-top:64px;padding:28px 20px 40px;text-align:center;font-size:14px;color:var(--muted)}
.site-footer a{color:var(--gold-dark);text-decoration:underline}
.site-footer p{margin-bottom:8px}
.legal-copy{font-size:13px}
.legal{max-width:760px;text-align:left}
.legal h1{font-size:clamp(30px,5vw,44px);margin-bottom:6px}
.legal h2{font-size:21px;margin:30px 0 8px;color:var(--charcoal)}
.legal p,.legal li{color:#4a4a4a;margin-bottom:12px}
.legal ul{margin:0 0 12px 22px}
.legal a{color:var(--gold-dark)}
.legal-updated{color:var(--muted);font-size:14px;margin-bottom:26px}
.legal-back{margin-top:36px;padding-top:20px;border-top:1px solid var(--border)}

/* Consent checkbox: 13px was under the 44px tap-target guideline (QA 2026-08-09) */
.consent input[type=checkbox]{width:24px;height:24px;flex:0 0 24px;margin-top:1px;accent-color:var(--gold)}
.consent label{padding:6px 0}
/* Delivery confirmation shown after a successful (or failed) submit */
.delivery-note{max-width:640px;margin:0 auto 10px;font-size:15px;color:var(--gold-dark);font-weight:600}
.choice-q{font-size:20px;font-weight:700;color:var(--charcoal);text-align:center;margin-bottom:16px}
.cal-placeholder{padding:48px 24px;text-align:center;color:var(--muted);background:#fff}
.cal-placeholder p{margin-bottom:12px}

/* Step 1 (~554px) swaps for two buttons (~242px), which would collapse the card and
   yank the page up ~312px. lockCardHeight() pins the height, and the buttons GROW to
   fill it — so the card is the same size before and after, with no dead space. */
/* The card keeps its full pre-submit height so nothing on the page moves — but the
   VISIBLE card (white panel, border, shadow) only wraps the content that is actually
   there. The leftover height becomes an invisible spacer, so the reader sees a box
   that ends just under the buttons instead of a half-empty panel. */
.card-locked{background:transparent;border-color:transparent;box-shadow:none;padding:0;
             display:flex;flex-direction:column;align-items:stretch}
/* Progress bar + buttons must read as ONE panel — styling them separately left a
   visible seam between two stacked boxes. Wrap them in a single bordered block. */
.card-locked .card-visible{background:#fff;border:1px solid var(--border);
                    box-shadow:0 10px 30px rgba(45,45,45,.08);padding:36px;flex:0 0 auto}
.card-locked #step2{background:transparent;border:0;box-shadow:none;padding:0}
.card-locked .steps{position:static;margin-bottom:0}
.card-locked .choice-q{margin-top:26px;margin-bottom:18px}
.card-locked .choice{display:flex;align-items:center;justify-content:center;min-height:88px}
@media(max-width:576px){
  .card-locked #step2{padding:24px 18px}
  .card-locked .steps{padding:24px 18px 0}
}
/* Before submit the outer .card already draws the panel, so the wrapper is inert. */
.card-visible{background:transparent;border:0;box-shadow:none;padding:0}