/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved by My WordPress Agent */
/* PD Ebook opt-in section.

   The markup lives in an HTML widget; this snippet owns every value, so a
   design change is one edit here and never a per-widget Elementor control.

   Three deliberate departures from the supplied draft:
   1. Poppins is gone. The kit already loads Lora + Inter on every page, and a
      third family from a third-party host for one section is not worth the
      request (nor the referrer it leaks).
   2. The book is a 3D render with the background cut out, not a flat cover.
      So: no border-radius and no rotate (the render already carries the
      perspective), and drop-shadow instead of box-shadow -- box-shadow traces
      the img element's rectangle, which on a transparent PNG draws a shadow
      around thin air.
   3. Colours stay at the ebook's own palette (#1e3b2f / #c9a35a / #faf7f1)
      rather than the site globals. It reads as a distinct offer band. If it
      should join the site system instead, the three values above are the
      only edit. */

.pz-ebook{background:#faf7f1;padding:72px 24px;font-family:'Inter',sans-serif;color:#2b2f2b;}
.pz-ebook *{box-sizing:border-box;margin:0;}
.pz-wrap{max-width:1140px;margin:0 auto;display:flex;align-items:center;gap:56px;flex-wrap:wrap;}
.pz-text{flex:1 1 520px;min-width:300px;}
.pz-visual{flex:1 1 380px;min-width:280px;text-align:center;position:relative;}

/* The draft's #a8865a gives 3.16:1 on the cream ground. That is fine for the
   40px italic in the headline (large text needs 3:1) but fails for a 12px
   letterspaced label, which is the least readable text in the whole section.
   #8a6a37 is the same bronze one step down and clears AA at 4.68:1. */
.pz-kicker{font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:#8a6a37;font-weight:600;margin-bottom:14px;}
.pz-h2{font-family:'Lora',serif;font-weight:600;font-size:clamp(28px,4vw,40px);line-height:1.22;color:#1e3b2f;margin-bottom:18px;}
.pz-h2 em{font-style:italic;color:#a8865a;}
.pz-sub{font-weight:300;font-size:17px;line-height:1.65;color:#4c554c;margin-bottom:26px;max-width:560px;}

.pz-list{list-style:none;padding:0;margin:0 0 30px 0;}
.pz-list li{position:relative;padding-left:38px;margin-bottom:14px;font-size:15.5px;line-height:1.55;}
.pz-list li::before{content:"\2713";position:absolute;left:0;top:1px;width:24px;height:24px;border-radius:50%;
  background:#1e3b2f;color:#d9c48d;font-size:13px;line-height:24px;text-align:center;font-weight:600;}
.pz-list b{color:#1e3b2f;font-weight:600;}

.pz-card{background:#ffffff;border:1px solid #e7e2d4;border-radius:14px;padding:26px 26px 20px;
  max-width:560px;}
.pz-card .pz-row{display:flex;gap:12px;flex-wrap:wrap;}
.pz-card input{flex:1 1 180px;padding:14px 16px;border:1px solid #d8d2c2;border-radius:8px;
  font-family:'Inter',sans-serif;font-size:15px;background:#fdfcf9;color:#2b2f2b;}
.pz-card input:focus-visible{outline:2px solid #c9a35a;outline-offset:1px;border-color:#c9a35a;}
.pz-btn{flex:1 1 100%;width:100%;margin-top:12px;padding:16px 22px;border:0;border-radius:8px;cursor:pointer;
  background:linear-gradient(135deg,#26543f,#1e3b2f);color:#f6f2e8;font-family:'Inter',sans-serif;
  font-size:16px;font-weight:600;letter-spacing:.04em;box-shadow:0 10px 24px -10px rgba(30,59,47,.55);}
.pz-btn:hover{background:linear-gradient(135deg,#2d6349,#24503c);}
.pz-btn:focus-visible{outline:2px solid #c9a35a;outline-offset:3px;}
/* The GHL embed. form_embed.js writes an explicit pixel height onto the iframe
   (309px for this form) once iframe-resizer reports the measured height.

   No min-height on the iframe itself: it would become a floor the script
   cannot go under, and 400px against a 309px form left 91px of dead white
   inside the card. It also buys nothing during load, because the script parks
   the iframe at position:absolute until the handshake finishes -- out of flow,
   so it cannot hold space open anyway.

   The placeholder height goes on .ep-iFrameContainer instead, the in-flow
   wrapper the script builds around the iframe. That reserves the space and
   leaves the final height to the script. */
.pz-ghl{display:block;width:100%;border:0;border-radius:8px;background:transparent;}
.pz-card .ep-iFrameContainer{min-height:310px;}

.pz-micro{margin-top:14px;font-size:12px;line-height:1.6;color:#6f766d;}
.pz-micro a{color:#8a6a37;}

/* Cut-out render: the alpha channel is the shape, so the shadow has to follow
   it. drop-shadow does; box-shadow would draw the element box instead.

   The selector carries the parent on purpose. Elementor ships
   `.elementor img{max-width:100%}` at specificity (0,1,1), so a bare
   `.pz-book` (0,1,0) loses and the book renders at whatever the column is
   wide. This is the whole reason the draft's 340px cap did not hold. */
.pz-visual img.pz-book{max-width:340px;width:88%;position:relative;z-index:1;height:auto;
  filter:drop-shadow(16px 24px 32px rgba(22,48,31,.40));}
.pz-seven{position:absolute;right:2%;top:-6%;font-family:'Lora',serif;font-weight:700;
  font-size:200px;line-height:1;color:rgba(201,163,90,.16);z-index:0;pointer-events:none;}
.pz-badge{position:absolute;left:4%;bottom:6%;z-index:2;background:#c9a35a;color:#16301f;font-weight:600;
  font-size:13px;letter-spacing:.06em;padding:10px 18px;border-radius:999px;box-shadow:0 8px 20px -8px rgba(22,48,31,.5);}

/* Comparison block on the test page: the same white card treatment as the GHL
   embed so the two forms are judged on the same ground, not on their frames. */
.pz-elform{background:#ffffff;border:1px solid #e7e2d4;border-radius:14px;padding:26px;}
.pz-elform .elementor-field-group>label{font-family:'Inter',sans-serif;font-size:13px;font-weight:600;color:#2b2f2b;}
.pz-elform .elementor-field-textual{border:1px solid #d8d2c2;border-radius:8px;background:#fdfcf9;
  font-family:'Inter',sans-serif;font-size:15px;color:#2b2f2b;}
.pz-elform .elementor-field-textual:focus-visible{outline:2px solid #c9a35a;outline-offset:1px;border-color:#c9a35a;}
.pz-elform .elementor-button[type="submit"]{border-radius:8px;
  background:linear-gradient(135deg,#26543f,#1e3b2f);color:#f6f2e8;
  font-family:'Inter',sans-serif;font-size:16px;font-weight:600;letter-spacing:.04em;}
.pz-elform .elementor-button[type="submit"]:hover{background:linear-gradient(135deg,#2d6349,#24503c);}

/* TEST PAGE ONLY -- delete with the test page (id 238).
   Elementor's "hide title" lives in _elementor_page_settings, which the REST
   API refuses to write, so the theme's page header is hidden here instead.
   On the real home for this section, set Hide Title in the editor and drop
   this rule. */
body.page-id-238 .page-header{display:none;}

@media (max-width:860px){
  .pz-ebook{padding:56px 20px;}
  .pz-wrap{gap:32px;}
  .pz-visual{order:-1;}
  .pz-seven{font-size:130px;}

  /* On a phone the column is one long strip, so the order that reads well on
     a desktop buries the form: book, headline, promise, four bullets, and
     only then the thing you actually want tapped. Two changes bring it up.

     1. The book gives back a third of its height. It is still the first thing
        seen and still the largest element on the screen.
     2. The form moves ahead of the bullet list. The bullets are the argument
        for a hesitant reader; they should sit under the offer, not in front
        of it. Order is set here only, so the DOM keeps its reading order and
        a screen reader is unaffected. */
  .pz-visual img.pz-book{max-width:250px;}
  .pz-text{display:flex;flex-direction:column;}
  .pz-kicker{order:1;}
  .pz-h2{order:2;}
  .pz-sub{order:3;margin-bottom:22px;}
  .pz-card{order:4;margin-bottom:28px;}
  .pz-list{order:5;margin-bottom:0;}
}