/* ============================================================
   SAFEO funnel — landing /7mistakes
   Structure + typography cloned from jadedemoss.com/7mistakes
   (Lato, white bg, soft-grey text, centered, blue CTA).
   Brand accents (navy/gold) pulled from the SAFEO ad creative.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;0,900;1,400&display=swap');

:root{
  /* Jade structural tokens (measured from live page) */
  --text:#2f2f2f;          /* body grey */
  --bg:#ffffff;            /* white page */
  --cta:#0174c7;           /* exact Jade blue button */
  --cta-hover:#015fa3;
  /* SAFEO brand accents (from ad creative) */
  --navy:#1a2b44;
  --gold:#a8884e;
  --line:#e6e6e6;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Lato',Helvetica,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:680px;margin:0 auto;padding:0 20px;}

/* ---------- LOGO / TAGLINE ---------- */
.brandbar{text-align:center;padding:26px 0 14px;border-bottom:1px solid var(--line);}
.brandbar img{height:64px;width:auto;}
.brandbar .tagline{
  font-size:13px;color:#8a8a8a;letter-spacing:.02em;margin-top:10px;font-weight:400;
}

/* ---------- HERO / HEADLINE ---------- */
.hero{text-align:center;padding:34px 0 8px;}
.hero .eyebrow{font-size:22px;font-weight:700;color:var(--navy);margin-bottom:10px;}
.hero h1{
  font-size:33px;line-height:1.18;font-weight:900;color:var(--navy);
  max-width:640px;margin:0 auto 14px;
}
.hero .subhead{
  font-size:19px;font-weight:700;color:var(--text);font-style:italic;
  max-width:560px;margin:0 auto;
}

/* ---------- LETTER (photo left, text flows) ---------- */
.letter{padding:30px 0 6px;}
.letter .author-col{
  float:left;width:150px;margin:6px 24px 12px 0;text-align:center;
}
.letter .author-col img{
  width:140px;height:140px;border-radius:50%;object-fit:cover;
  border:1px solid var(--line);
}
.letter .author-col .name{font-size:15px;font-weight:700;color:var(--text);margin-top:10px;line-height:1.3;}
.letter .author-col .role{font-size:13px;color:#8a8a8a;margin-top:4px;}
.letter .desk{font-size:17px;color:var(--text);margin-bottom:4px;}
.letter .desk strong{font-weight:700;}
.letter .desk.dear{margin-top:18px;margin-bottom:18px;}
.letter p{font-size:17px;color:var(--text);margin-bottom:16px;}
.letter .clear{clear:both;}

/* ---------- EBOOK BLOCK (title + cover + microline) ---------- */
.ebook-block{text-align:center;padding:26px 0 6px;}
.ebook-block h2{
  font-size:27px;font-weight:900;color:var(--navy);line-height:1.2;
  max-width:520px;margin:0 auto 22px;
}
.ph-cover{
  width:230px;height:298px;margin:0 auto 18px;
  background:repeating-linear-gradient(45deg,#eee,#eee 12px,#e3e3e3 12px,#e3e3e3 24px);
  border:1px dashed #bbb;color:#999;border-radius:3px;
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:13px;
}
.ebook-cover{
  display:block;width:310px;max-width:82%;height:auto;margin:0 auto 18px;
  filter:drop-shadow(0 10px 22px rgba(26,43,68,.22));
}

/* ============================================================
   BOOKING PAGE (element 4) — confirmation banner + offer
   ============================================================ */
.confirm-banner{
  background:var(--navy);color:#fff;text-align:center;
  padding:24px 22px;margin:0 0 8px;
}
.confirm-banner .check{
  display:inline-block;color:var(--gold);font-size:30px;font-weight:900;
  line-height:1;margin-bottom:8px;
}
.confirm-banner h2{font-size:24px;font-weight:900;color:#fff;margin-bottom:8px;}
.confirm-banner p{font-size:16px;color:#dfe4ec;max-width:560px;margin:0 auto;}
.confirm-banner p strong{color:#fff;}

.booking{padding:40px 0 0;text-align:center;}
.booking .address{font-size:22px;font-weight:700;color:var(--navy);margin-bottom:18px;}
.booking h1{
  font-size:31px;line-height:1.22;font-weight:900;color:var(--navy);
  max-width:660px;margin:0 auto 26px;
}
.booking .how{font-size:19px;font-weight:700;color:var(--gold);margin-bottom:28px;}
.booking .intro{
  font-size:18px;color:var(--text);max-width:540px;margin:0 auto 28px;line-height:1.55;
}
.booking .intro strong{font-weight:700;color:var(--navy);}

/* Jade-style booking CTA — fixed width, 2-line, arrow inline at end */
.btn-book{
  display:inline-block;cursor:pointer;
  font-family:'Lato',Helvetica,sans-serif;font-weight:600;
  font-size:21px;line-height:1.3;color:#fff;background:var(--cta);
  border:none;border-radius:3px;padding:15px 30px;
  max-width:380px;text-decoration:none;text-align:center;
  box-shadow:0 3px 0 var(--cta-hover);transition:background .15s, transform .05s;
}
.btn-book:hover{background:var(--cta-hover);}
.btn-book:active{transform:translateY(2px);box-shadow:0 1px 0 var(--cta-hover);}

/* WHY section: photo left, A/B/C right */
.why{padding:36px 0 10px;}
.why h2{text-align:center;font-size:28px;font-weight:900;color:var(--navy);margin-bottom:26px;line-height:1.2;}
.why-grid{display:flex;gap:34px;align-items:flex-start;}
.why-photo{flex:0 0 220px;text-align:center;}
.why-photo img{width:200px;height:200px;border-radius:50%;object-fit:cover;border:2px solid #e6e6e6;}
.why-photo .name{font-size:18px;font-weight:700;color:var(--navy);margin-top:14px;line-height:1.3;}
.why-photo .role{font-size:13px;color:#8a8a8a;margin-top:4px;}
.why-text{flex:1;text-align:left;}
.why-text h3{font-size:19px;font-weight:800;color:var(--navy);margin:0 0 6px;}
.why-text h3:not(:first-child){margin-top:24px;}
.why-text p{font-size:16px;color:var(--text);margin-bottom:0;line-height:1.5;}

@media(max-width:680px){
  .booking h1{font-size:24px;}
  .why-grid{flex-direction:column;align-items:center;}
  .why-photo{flex:none;}
  .why-text{text-align:left;}
}

/* ---------- LEGAL PAGES (privacy / legal notice) ---------- */
.legal{padding:40px 0 50px;}
.legal h1{font-size:30px;font-weight:900;color:var(--navy);margin-bottom:22px;}
.legal h2{font-size:19px;font-weight:700;color:var(--navy);margin:26px 0 8px;}
.legal p{font-size:16px;color:var(--text);margin-bottom:14px;}
.legal ul{margin:0 0 14px 22px;}
.legal li{font-size:16px;color:var(--text);margin-bottom:6px;}
.legal .back{margin-top:30px;}
.legal .back a{color:var(--cta);text-decoration:none;font-weight:700;}
.ebook-block .microline{font-size:17px;color:var(--text);margin-bottom:20px;max-width:480px;margin-left:auto;margin-right:auto;}

/* ---------- CTA BUTTON (exact Jade spec, brand-blue) ---------- */
.cta-block{text-align:center;margin:8px 0 14px;}
.btn{
  display:inline-block;cursor:pointer;
  font-family:'Lato',Helvetica,sans-serif;font-weight:700;
  font-size:26px;color:#fff;background:var(--cta);
  border:none;border-radius:3px;padding:14px 34px;
  text-decoration:none;text-align:center;
  box-shadow:0 3px 0 var(--cta-hover);
  transition:background .15s, transform .05s;
}
.btn:hover{background:var(--cta-hover);}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--cta-hover);}
.btn.full{width:100%;font-size:22px;}

/* ---------- DISCOVER LIST (checkmarks) ---------- */
.discover{padding:30px 0 8px;}
.discover h2{
  text-align:center;font-size:27px;font-weight:900;color:var(--navy);margin-bottom:24px;
}
.discover ul{list-style:none;max-width:600px;margin:0 auto;}
.discover li{
  position:relative;padding:0 0 20px 38px;font-size:17px;color:var(--text);
}
.discover li::before{
  content:"✓";position:absolute;left:0;top:0;
  color:var(--gold);font-weight:900;font-size:21px;line-height:1;
}
.discover li b{font-weight:700;color:var(--navy);}

/* ---------- CLOSING ---------- */
.closing{text-align:center;padding:14px 0 0;}
.closing h2{
  font-size:26px;font-weight:900;color:var(--navy);line-height:1.25;
  max-width:540px;margin:0 auto 12px;
}
.closing .microline{font-size:17px;color:var(--text);font-style:italic;margin-bottom:22px;}
.closing .final-letter{text-align:left;max-width:600px;margin:24px auto 0;}
.closing .final-letter p{font-size:17px;margin-bottom:16px;}
.closing .signoff{font-weight:700;}

/* ---------- FOOTER ---------- */
footer{
  text-align:center;font-size:12px;color:#9a9a9a;
  padding:34px 0 50px;margin-top:30px;border-top:1px solid var(--line);
}
footer a{color:#9a9a9a;text-decoration:underline;}

/* ============================================================
   OPT-IN POPUP (element 3)
   ============================================================ */
.overlay{
  position:fixed;inset:0;z-index:50;background:rgba(26,43,68,.62);
  display:none;align-items:center;justify-content:center;padding:20px;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.overlay.open{display:flex;}
.modal{
  background:#fff;border-radius:6px;max-width:880px;width:100%;
  padding:34px 38px;position:relative;margin:auto;
  display:flex;gap:36px;align-items:center;
  box-shadow:0 18px 50px rgba(0,0,0,.4);animation:pop .18s ease-out;
}
@keyframes pop{from{transform:scale(.94);opacity:0;}to{transform:scale(1);opacity:1;}}
.modal .close{
  position:absolute;top:10px;right:14px;cursor:pointer;font-size:26px;
  color:#aaa;line-height:1;border:none;background:none;z-index:2;
}
.modal .close:hover{color:var(--navy);}

/* LEFT column — cover + photo + name */
.modal-left{flex:0 0 200px;text-align:center;}
.modal-cover{display:block;width:150px;height:auto;margin:0 auto 18px;
  filter:drop-shadow(0 6px 14px rgba(26,43,68,.22));}
.modal-photo{width:140px;height:140px;border-radius:50%;object-fit:cover;
  border:2px solid #e6e6e6;margin:0 auto 12px;display:block;}
.modal-name{font-size:17px;font-weight:700;color:var(--text);line-height:1.3;}
.modal-role{font-size:13px;color:#8a8a8a;margin-top:4px;}

/* RIGHT column — headline + form */
.modal-right{flex:1;text-align:center;}
.modal .micro{font-size:15px;color:var(--text);margin-bottom:12px;}
.modal .ebook-title{font-size:25px;font-weight:900;color:var(--navy);line-height:1.18;margin-bottom:18px;}
.modal .prompt{color:var(--cta);font-weight:700;font-size:18px;margin-bottom:18px;}
.modal input{
  width:100%;font-family:'Lato',sans-serif;font-size:16px;
  padding:14px 16px;margin-bottom:12px;border:1px solid #cfcfcf;border-radius:4px;
  background:#f3f3f3;
}
.modal input:focus{outline:none;border-color:var(--cta);background:#fff;}
.modal .btn.full{margin-top:4px;font-size:24px;padding:16px 18px;}
.modal .privacy{font-size:11px;color:#aaa;margin-top:12px;}

@media(max-width:680px){
  .overlay{align-items:flex-start;padding:14px;}
  .modal{flex-direction:column;gap:16px;padding:28px 22px;max-width:460px;margin:0 auto;}
  .modal-left{flex:none;display:flex;align-items:center;justify-content:center;gap:16px;}
  .modal-cover{width:90px;margin:0;}
  .modal-photo{width:90px;height:90px;margin:0;}
  .modal-name,.modal-role{text-align:left;}
  .modal .ebook-title{font-size:20px;}
}

@media(max-width:600px){
  .hero h1{font-size:25px;}
  .hero .eyebrow{font-size:19px;}
  .letter .author-col{float:none;width:auto;margin:0 auto 18px;}
  .btn{font-size:21px;padding:13px 24px;}
  .discover h2,.ebook-block h2,.closing h2{font-size:22px;}
}

/* ============================================================
   GOOGLE LP (root, 2026-07) — design language of the NEW
   safeoadvisory.com (redesign branch): warm beige / deep navy /
   gold accents, Montserrat, 0.5rem radius, elegant shadows.
   Scoped under body.lp so /guide + legal pages stay untouched.
   ============================================================ */

body.lp{
  font-family:'Montserrat',Helvetica,Arial,sans-serif;
  background:#F5F0E8;               /* --background warm beige */
  color:#0D1F2D;                    /* --foreground deep navy */
  line-height:1.6;
}
.lp-wrap{max-width:760px;margin:0 auto;padding:0 20px;}
body.lp h1,body.lp h2,body.lp h3{
  font-family:'Montserrat',sans-serif;font-weight:700;letter-spacing:-0.02em;
}
body.lp h1,body.lp h2,body.lp h3{color:#0D1F2D;}
/* dark sections override (specificity 0-2-1 beats 0-1-2 above) */
body.lp .lp-hero h1{color:#fff;}
body.lp .lp-pains h2{color:#fff;}
body.lp .lp-how h2{color:#fff;}
body.lp .lp-final h2{color:#fff;}

/* ---------- brand bar (logo only, no nav, no descriptor since S-2026-07-28) ---------- */
/* Slimmed 110px -> ~62px (S-2026-07-28): a full-bleed beige band that tall reads as a
   site nav bar even with no nav in it, which is the "looks like a website" tell.
   Identity is worth keeping — an unsigned page opening straight into the dark hero
   reads as a funnel — but a landing header is ~60px, not 110. */
.lp-brandbar{padding:12px 0 10px;text-align:center;background:#F5F0E8;}
/* display:block kills the inline baseline gap under the image (~8px of dead beige) */
.lp-logo{height:40px;width:auto;display:block;margin:0 auto;}

/* ---------- eyebrow section labels ---------- */
.lp-eyebrow{
  text-align:center;font-size:13px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:#B89968;margin-bottom:10px;
}
.lp-eyebrow-light{color:#B89968;}

/* ---------- hero (site navy pattern) ---------- */
.lp-hero{
  background:#0D1F2D;text-align:left;padding:56px 0 46px;
}
/* .lp-hero-eyebrow removed S-2026-07-28 together with its markup (duplicate of H1) */
/* line-height stays 1.12 — inside every display-heading bench found (Butterick 1.0-1.2,
   Pimp my Type ~1.1, IBM Carbon heading-07 1.185); see H7 in
   execution/site/visual-conventions-research-2026-07.md. Air belongs AROUND the heading,
   so the gap to the sub goes 20 -> 28px, matching the sub's own bottom margin. */
.lp-hero h1{font-size:42px;line-height:1.12;font-weight:800;max-width:760px;margin:0 0 28px;}
/* hero grid: copy left + photo right (desktop only — photo hidden on mobile) */
.lp-hero-grid{display:flex;gap:44px;align-items:center;}
.lp-hero-copy{flex:1 1 auto;min-width:0;}
.lp-hero-photo{
  flex:0 0 240px;width:240px;height:300px;border-radius:0.5rem;object-fit:cover;
  border-bottom:3px solid #B89968;
  box-shadow:0 8px 28px -6px rgba(0,0,0,.45);
}
.lp-sub{
  font-size:20px;line-height:1.5;color:#D9DEE5;max-width:620px;margin:0 0 28px;
  border-left:3px solid #B89968;padding-left:18px;
}
/* one sentence per line — see the markup comment in index.html.
   The longest sentence needs 304px of text; below ~375px viewport it no longer fits and
   the forced break produces a wrapped line with a one-word orphan, which is worse than
   natural flow. Under that width the spans go back to inline and the text reflows
   normally (the newlines between them in the markup supply the word spacing). */
.lp-sub span{display:block;}
/* Air goes BETWEEN the beats, not inside them: raising line-height would also loosen a
   sentence that wrapped, and would have to be undone in the narrow fallback below.
   As a margin it applies only between sentences, and below 375px (spans inline) vertical
   margins are ignored by definition, so the fallback needs no extra rule. */
.lp-sub span + span{margin-top:10px;}
@media(max-width:374px){.lp-sub span{display:inline;}}
/* inline-block so the wrapper shrinks to the button's width: the block still anchors
   to the left edge of the copy column (with the H1 and the sub), while the micro line
   centres under the BUTTON rather than inside the whole column — which is wider than
   the button at most viewport widths. 0-2-0 beats .lp-cta-block declared later. */
.lp-cta-block.lp-cta-hero{display:inline-block;text-align:center;}
.lp-cta-hero .lp-micro{color:#8fa0af;}
.lp-btn.lp-btn-gold{background:#B89968;}
.lp-btn.lp-btn-gold:hover{background:#c4a87b;}

/* ---------- facts band (own beige band under hero — alternation, S-2026-07-24) ---------- */
.lp-factsband{background:#F5F0E8;padding:38px 0 34px;}
.lp-facts{
  display:flex;gap:36px;align-items:flex-start;
}
.lp-fact{flex:1 1 0;padding-top:12px;border-top:3px solid #B89968;text-align:center;}
.lp-fact-num{
  font-size:38px;font-weight:800;color:#0D1F2D;line-height:1.1;letter-spacing:-0.02em;
}
.lp-fact-label{font-size:14px;color:#5a6b7a;margin-top:6px;line-height:1.4;}

/* ---------- CTA blocks + button ---------- */
.lp-cta-block{text-align:center;margin:6px 0 10px;}
.lp-btn{
  display:inline-block;cursor:pointer;
  font-family:'Montserrat',sans-serif;font-weight:600;
  font-size:18px;line-height:1.3;color:#fff;background:#0D1F2D;
  border:none;border-radius:0.5rem;padding:16px 32px;
  text-decoration:none;text-align:center;
  box-shadow:0 4px 20px -4px rgba(13,31,45,.25);
  transition:all .3s cubic-bezier(0.4,0,0.2,1);
}
.lp-btn:hover{background:#1C3345;transform:translateY(-2px);box-shadow:0 8px 28px -6px rgba(13,31,45,.35);}
.lp-micro{font-size:14px;color:#5a6b7a;margin-top:12px;}
.lp-nb{white-space:nowrap;}

/* ---------- sections rhythm ---------- */
.lp-pains,.lp-results,.lp-how,.lp-about,.lp-faq,.lp-final{padding:56px 0;}
.lp-pains h2,.lp-results h2,.lp-how h2,.lp-faq h2{
  font-size:30px;text-align:center;margin-bottom:30px;
}

/* ---------- pains ---------- */
.lp-pains{background:#0D1F2D;}
.lp-pains h2{color:#fff;}
.lp-pain-list{list-style:none;max-width:620px;margin:0 auto;}
.lp-pain-list li{
  position:relative;padding:0 0 20px 40px;font-size:18px;line-height:1.55;color:#EAE7E0;
}
/* lucide icons (site design language: stroke 1.5, gold) replace the dash markers */
.lp-pain-ico{
  position:absolute;left:0;top:2px;width:24px;height:24px;color:#B89968;
}
.lp-pain-close{
  max-width:620px;margin:10px auto 0;padding-left:40px;
  font-size:17px;font-style:italic;color:#B89968;
}

/* ---------- proof block (recent results) ---------- */
.lp-case{
  background:#fff;border-radius:0.5rem;padding:24px 34px;margin-bottom:18px;
  box-shadow:0 2px 12px -2px rgba(13,31,45,.08);
  border-top:3px solid #B89968;
}
/* cases = accordion (outcome header visible, body folded — CRO audit S-2026-07-27) */
.lp-case summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;
  align-items:center;gap:14px;
}
.lp-case summary::-webkit-details-marker{display:none;}
.lp-case summary::after{
  content:"+";flex:0 0 auto;font-size:26px;font-weight:500;color:#B89968;
  line-height:1;transition:transform .2s ease;
}
.lp-case[open] summary::after{transform:rotate(45deg);}
.lp-case-body{padding-top:16px;}
.lp-case h3{font-size:22px;margin-bottom:0;}
.lp-case p{font-size:16px;line-height:1.6;margin-bottom:10px;color:#1C3345;}
.lp-case p:last-child{margin-bottom:0;}
.lp-case-label{
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#8a8171;margin:14px 0 4px;
}
.lp-case-label:first-of-type{margin-top:0;}
.lp-case-result{
  display:flex;gap:14px;align-items:flex-start;
  background:#F5F0E8;border-radius:0.5rem;padding:14px 18px;margin-top:16px;
}
.lp-case-result-label{
  flex:0 0 auto;font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:#B89968;padding-top:3px;
}
.lp-case-result p{font-size:17px;font-weight:600;color:#0D1F2D;margin:0;}
.lp-case-points{list-style:none;margin:0;}
.lp-case-points li{
  position:relative;padding:0 0 10px 24px;font-size:16px;line-height:1.55;color:#1C3345;
}
.lp-case-points li::before{
  content:"";position:absolute;left:0;top:10px;width:12px;height:2px;background:#B89968;
}
.lp-case-note{font-size:13px;color:#8a8171;margin-top:12px;}
.lp-case-note em{font-style:italic;}

/* ---------- how it works (site navy method-band pattern) ---------- */
.lp-how{background:#0D1F2D;}
.lp-steps{list-style:none;max-width:640px;margin:0 auto 26px;counter-reset:step;}
.lp-steps li{display:flex;gap:18px;align-items:flex-start;padding-bottom:22px;}
.lp-step-num{
  flex:0 0 40px;height:40px;border-radius:50%;
  background:transparent;border:1.5px solid rgba(255,255,255,.55);
  color:#fff;font-weight:700;font-size:17px;
  display:flex;align-items:center;justify-content:center;
}
.lp-steps p{font-size:17px;line-height:1.6;padding-top:7px;color:#D9DEE5;}
.lp-how .lp-btn{background:#B89968;}
.lp-how .lp-btn:hover{background:#c4a87b;}

/* ---------- service description (blueprint §9, beige band between navy How and white About) ---------- */
.lp-service{background:#F5F0E8;padding:56px 0;}
.lp-service h2{font-size:30px;text-align:center;margin-bottom:14px;}
.lp-service-intro{
  text-align:center;font-size:17px;color:#5a6b7a;max-width:560px;margin:0 auto 30px;
}
.lp-service-steps{max-width:640px;margin:0 auto;}
.lp-service-steps p{color:#1C3345;}
.lp-service-steps p strong{color:#0D1F2D;}
.lp-step-num-dark{
  border-color:rgba(13,31,45,.45);color:#0D1F2D;background:transparent;
}

/* ---------- about (rectangular plant photo — congruence, S-2026-07-24) ---------- */
.lp-about{background:#fff;}
.lp-about-grid{display:flex;gap:32px;align-items:center;max-width:720px;}
.lp-about-photo{
  flex:0 0 240px;width:240px;height:300px;border-radius:0.5rem;object-fit:cover;
  box-shadow:0 4px 20px -4px rgba(13,31,45,.2);
}
/* copy column: left-aligned beside the photo (the shared .lp-eyebrow and section-h2 rules
   centre by default, which is right for full-width sections and wrong for this one).
   .lp-about-text retired S-2026-07-28 together with the single-paragraph markup. */
.lp-about-copy{text-align:left;}
.lp-about-copy h2{font-size:26px;margin:0 0 14px;}
/* text-wrap:pretty asks the browser to avoid a one-word last line; ignored by older
   engines, which simply fall back to the normal ragged wrap. No layout risk. */
.lp-about-copy p{font-size:18px;line-height:1.65;color:#1C3345;text-wrap:pretty;}
.lp-about-copy p + p{margin-top:14px;}

/* ---------- FAQ (accordion) ---------- */
.lp-faq-item{
  max-width:640px;margin:0 auto 14px;background:#fff;border-radius:0.5rem;
  box-shadow:0 2px 12px -2px rgba(13,31,45,.06);
}
.lp-faq-item summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;
  align-items:center;gap:12px;font-size:17px;font-weight:700;color:#0D1F2D;
  padding:16px 20px;
}
.lp-faq-item summary::-webkit-details-marker{display:none;}
.lp-faq-item summary::after{
  content:"+";flex:0 0 auto;font-size:24px;font-weight:500;color:#B89968;
  line-height:1;transition:transform .2s ease;
}
.lp-faq-item[open] summary::after{transform:rotate(45deg);}
.lp-faq-item p{font-size:16px;line-height:1.6;color:#1C3345;padding:0 20px 18px;}
.lp-faq-item a{color:#0D1F2D;font-weight:600;}

/* ---------- final CTA + quote ---------- */
.lp-final{background:#0D1F2D;text-align:center;}
.lp-quote{max-width:600px;margin:0 auto 26px;}
.lp-quote p{font-size:20px;line-height:1.55;color:#EAE7E0;font-style:italic;margin-bottom:12px;}
.lp-quote cite{font-size:15px;color:#B89968;font-style:normal;}
.lp-final .lp-btn{background:#B89968;box-shadow:0 4px 20px -4px rgba(0,0,0,.35);}
.lp-final .lp-btn:hover{background:#c4a87b;}

/* ---------- written path (visible address + mailto + Copy, raw §43) ---------- */
.lp-writeline{margin-top:20px;font-size:15px;color:#8fa0af;line-height:1.7;}
.lp-writeline-row{white-space:nowrap;}
.lp-writeline-addr{color:#EAE7E0;font-weight:600;text-decoration:underline;text-underline-offset:3px;}
.lp-copybtn{
  margin-left:8px;font-family:'Montserrat',sans-serif;font-size:12px;font-weight:500;
  color:rgba(184,153,104,.85);background:transparent;border:1px solid rgba(184,153,104,.35);
  border-radius:4px;padding:2px 9px;cursor:pointer;vertical-align:baseline;
  transition:all .2s ease;
}
.lp-copybtn:hover{border-color:#B89968;color:#B89968;}
.lp-copybtn.is-copied{color:#F5F0E8;background:rgba(184,153,104,.3);border-color:#B89968;}
.lp-footer-contact a{font-weight:600;}

/* ---------- footer ---------- */
.lp-footer{
  text-align:center;font-size:13px;color:#5a6b7a;
  padding:30px 0 44px;background:#F5F0E8;
}
.lp-footer a{color:#5a6b7a;text-decoration:underline;}
.lp-footer p{margin-bottom:6px;}

/* ---------- Cal.com modal host containment (S-2026-07-27c mobile-tail fix) ----------
   cal-modal-box is appended after the footer as position:absolute at document end.
   On WebKit the slotted calendar iframe lays out inside the host and EXTENDS the
   document by the iframe height (beige tail past the footer, persists after close
   because Cal hides via visibility:hidden which keeps layout). Chromium contains it
   via the fixed shadow backdrop, so desktop never showed the tail.
   Fix: pin the host to the viewport + drop it from layout entirely when hidden. */
cal-modal-box{position:fixed !important;top:0 !important;left:0 !important;}
cal-modal-box[style*="hidden"]{display:none !important;}

/* ---------- sticky mobile CTA (FIND-3) ---------- */
.lp-sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(245,240,232,.96);border-top:1px solid #E8E3D9;
  transform:translateY(110%);transition:transform .25s ease-out;
  display:none;
}
.lp-sticky-cta.is-visible{transform:translateY(0);}
.lp-btn-sticky{display:block;width:100%;font-size:16px;padding:14px 16px;}

/* ---------- mobile ---------- */
@media(max-width:680px){
  .lp-hero{padding:38px 0 34px;}
  .lp-hero h1{font-size:29px;}
  /* mobile: photo stacks BELOW copy+CTA (flex column), centered */
  .lp-hero-grid{flex-direction:column;gap:26px;}
  .lp-hero-photo{flex:0 0 auto;width:240px;height:300px;margin:0 auto;}
  .lp-sub{font-size:17px;}
  .lp-sub span + span{margin-top:8px;}   /* scaled with the smaller mobile type */
  .lp-service h2{font-size:23px;}
  .lp-case summary h3{font-size:18px;}
  .lp-factsband{padding:26px 0 22px;}
  /* variant A: compact 3-in-a-row strip, one-glance read */
  .lp-facts{gap:14px;align-items:flex-start;}
  .lp-fact{padding-top:8px;border-top-width:2px;}
  .lp-fact-num{font-size:19px;letter-spacing:-0.01em;}
  .lp-fact-label{font-size:11px;line-height:1.35;margin-top:4px;}
  .lp-about-grid{flex-direction:column;text-align:center;}
  /* stacked under the photo -> follow the section's centred rhythm again */
  .lp-about-copy{text-align:center;}
  .lp-about-copy h2{font-size:22px;}
  .lp-about-photo{flex:0 0 auto;width:220px;height:275px;}
  .lp-case{padding:22px 20px;}
  .lp-pains h2,.lp-results h2,.lp-how h2,.lp-faq h2{font-size:23px;}
  .lp-sticky-cta{display:block;}
  /* keep footer text clear of the sticky CTA (fix S-2026-07-24, remark 9) */
  .lp-footer{padding-bottom:120px;}
}