/* ==========================================================================
   Vivo paid-campaign landing page.

   Loaded ONLY by /glp-1/, after site.css, which supplies every token, the
   typography and the shared components (.btn, .band-*, .cards, .timeline,
   .statrow, .faq, .formwrap). Nothing here restyles a shared class, so the
   rest of the site is unaffected whether this file loads or not.

   The landing page has no site navigation on purpose: one audience, one
   message, one action.
   ========================================================================== */

/* ---------------- masthead: logo, a phone number, one action -------------- */
.lp-top{position:sticky;top:0;z-index:60;background:var(--cream);border-bottom:1px solid var(--hairline)}
@supports (backdrop-filter:blur(1px)){
  .lp-top{background:color-mix(in srgb, var(--cream) 90%, transparent);backdrop-filter:blur(14px) saturate(1.3)}
}
.lp-mast{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 0}
.lp-brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink)}
.lp-brand img{width:42px;height:42px;flex:none}
.lp-name{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:1.3rem;letter-spacing:-.03em;line-height:1}
.lp-name span{background:var(--hot);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--ember)}
.lp-sub{display:block;font-size:.63rem;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-faint);font-weight:600;margin-top:3px}
.lp-mast-go{display:flex;align-items:center;gap:18px}
.lp-tel{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:.95rem;letter-spacing:-.01em}
.lp-tel svg{width:18px;height:18px;fill:none;stroke:var(--vital);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.lp-tel:hover{color:var(--ember-text)}
.lp-navcta{padding:11px 22px;font-size:.87rem}
.lp-navcta .go-a{display:none}
/* nested to outrank .lp-go further down the file, which also sets display
   and would otherwise bring this button back on a phone */
@media (max-width:820px){.lp-mast-go .lp-navcta{display:none}}
@media (max-width:420px){.lp-tel span{display:none}.lp-sub{display:none}}

/* ---------------- hero -----------------------------------------------------
   Full-bleed photograph across the whole band. The copy sits on a cream wash
   at the left, the form card is solid paper at the right, and the middle is
   left alone so the people in the photograph are never behind either one.
   The four pillar words run along the lower edge, full width.
   ------------------------------------------------------------------------- */
.lp-hero{position:relative;overflow:hidden;background:var(--cream);border-bottom:1px solid var(--hairline)}
.lp-hero-grid{position:relative;display:grid;grid-template-columns:.92fr 1.08fr;gap:40px;
  align-items:center;padding:46px 26px 84px;min-height:min(80vh,680px)}
.lp-hero-grid{max-width:1400px;grid-template-columns:minmax(0,1fr) 404px;gap:34px;
  padding-left:34px;padding-right:38px}
.lp-hero-copy{max-width:520px}
.nb{white-space:nowrap}
.lp-hero h1{font-size:clamp(2.45rem,3.5vw,3.3rem);line-height:1.04;margin:13px 0 14px}
.lp-lede{color:var(--ink-dim);font-weight:300;font-size:var(--step-1);margin:0;max-width:30ch}

/* three short proof rows, the reference's left column */
.lp-heroproof{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:13px;max-width:30ch}
.lp-heroproof li{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:center}
.lp-hp-ico{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:var(--sage-2);border:1px solid var(--hairline-g)}
.lp-hp-ico svg{width:19px;height:19px;fill:none;stroke:var(--vital);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.lp-heroproof b{display:block;font-size:.97rem;color:var(--ink);font-weight:700;line-height:1.25}
.lp-heroproof span span,.lp-heroproof li>span:last-child{font-size:.86rem;color:var(--ink-dim);
  font-weight:300;line-height:1.45}

/* the four words along the lower edge */
.lp-pillbar{position:absolute;left:0;right:0;bottom:0;z-index:2;
  background:linear-gradient(180deg,rgba(255,249,242,0) 0%,rgba(255,249,242,.92) 42%,var(--cream) 100%);
  border-top:1px solid var(--hairline-g);padding:16px 0 13px}
.lp-pillbar ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 30px}
.lp-pillbar li{font-family:Cinzel,Georgia,serif;font-weight:600;font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-dim);position:relative}
.lp-pillbar li+li::before{content:"";position:absolute;left:-17px;top:50%;width:4px;height:4px;
  margin-top:-2px;border-radius:50%;background:var(--leaf)}

@media (max-width:1040px){
  .lp-hero-grid{grid-template-columns:1fr;gap:28px;padding:32vh 26px 66px;min-height:0}
  .lp-lede,.lp-heroproof{max-width:none}
  .lp-heroproof{grid-template-columns:1fr 1fr;gap:14px 22px}
}
@media (max-width:620px){.lp-heroproof{grid-template-columns:1fr}}

/* ---------------- the consultation form ----------------------------------- */
.lp-formcard{
  background:var(--paper);border:1px solid rgba(242,223,201,.8);border-radius:22px;
  padding:24px 22px 22px;scroll-margin-top:96px;
  box-shadow:0 2px 6px -2px rgba(90,50,10,.10),
             0 18px 34px -14px rgba(120,64,12,.22),
             0 44px 80px -32px rgba(90,50,10,.34);
}
.lp-fc-eyebrow{margin:0 0 6px;font-family:Cinzel,Georgia,serif;font-weight:600;font-size:.68rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);text-align:center}
.lp-fc-h{margin:0 0 8px;font-size:1.62rem;line-height:1.1;text-align:center;
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;letter-spacing:-.02em}
.lp-fc-p{margin:0 0 20px;font-size:.9rem;color:var(--ink-dim);font-weight:300;line-height:1.55;text-align:center}
/* What happens after you submit. Sits under the button because that is where
   the decision is made. Matches .lp-fc-p's scale so it reads as part of the
   card rather than as a second pitch, and is separated by a hairline so the
   eye registers it as the answer to "and then what?" */
.lp-fc-next{margin:14px 0 0;padding-top:13px;border-top:1px solid var(--hairline);
  font-size:.86rem;color:var(--ink-dim);font-weight:300;line-height:1.5;text-align:center}
.lp-fields{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.lp-f{margin:0;display:flex;flex-direction:column;gap:5px}
.lp-f-email,.lp-f-phone{grid-column:1 / -1}
.lp-f label{font-size:.78rem;font-weight:700;color:var(--ink-dim);letter-spacing:.01em}
.lp-f label b{color:var(--ember);font-weight:700;margin-left:2px}
.lp-f input{
  font:inherit;font-size:.96rem;color:var(--ink);background:var(--cream);
  border:1.5px solid var(--hairline-hi);border-radius:11px;padding:12px 13px;width:100%;
  transition:border-color .15s,box-shadow .15s;
}
.lp-f input:focus{outline:none;border-color:var(--vital);
  box-shadow:0 0 0 3px rgba(91,154,66,.18)}
.lp-f input.bad{border-color:var(--ember)}
.lp-f input.bad:focus{box-shadow:0 0 0 3px rgba(244,121,32,.2)}
.lp-err{font-size:.76rem;color:var(--ember-text);font-weight:600}

/* ---- SMS consent --------------------------------------------------------
   Two optional checkboxes above the button. They span both columns like the
   email and phone rows, and unlike every other field here the label text is
   VISIBLE: the .lp-lab screen-reader pattern would hide the exact sentences
   a carrier reviewer opens this page to read.

   Colour is --ink-dim, not the --ink-faint the card's other fine print uses.
   --ink-faint measures 2.76:1 against this card and had to be corrected once
   already on the follow-up page; consent language someone must read to
   consent does not get to be the second failure.

   The <label> wraps the box, so the whole row is the hit target - its
   padding plus line-height puts that target well past 24px tall without
   padding a native checkbox, which browsers honour inconsistently. */
.lp-consent,.lp-consent-note{grid-column:1 / -1}
.lp-consent{margin:0}
.lp-consent label{display:flex;align-items:flex-start;gap:10px;padding:4px 0;
  font-size:.78rem;font-weight:400;line-height:1.5;color:var(--ink-dim);cursor:pointer}
.lp-consent input[type=checkbox]{
  flex:0 0 auto;width:18px;height:18px;min-width:18px;margin:2px 0 0;padding:0;
  border:0;border-radius:0;background:none;box-shadow:none;
  accent-color:var(--vital);cursor:pointer}
.lp-consent input[type=checkbox]:focus-visible{outline:2px solid var(--vital);outline-offset:2px}
.lp-consent-note{margin:2px 0 0;font-size:.76rem;font-weight:300;line-height:1.5;
  color:var(--ink-dim)}
/* nowrap so "Privacy Policy" and "Terms and Conditions" each stay whole: at
   the card's width they otherwise break mid-name, which reads as three links
   rather than two. */
.lp-consent-note a{color:var(--ink-dim);text-decoration:underline;margin-left:7px;
  white-space:nowrap}
.lp-fc-go{grid-column:1 / -1;margin-top:5px;width:100%;display:inline-flex;align-items:center;
  justify-content:center;gap:9px;font-size:1.02rem;padding:15px 24px}
.lp-fc-go.busy{opacity:.75;cursor:progress}
.lp-fc-fine{grid-column:1 / -1;margin:4px 0 0;font-size:.76rem;color:var(--ink-faint);
  font-weight:300;line-height:1.5}
.lp-fc-live{margin:12px 0 0;font-size:.84rem;font-weight:600;color:var(--leaf-text);text-align:center}
@media (max-width:420px){.lp-fields{grid-template-columns:1fr}.lp-formcard{padding:22px 19px 20px}}

/* ---------------- four pillars -------------------------------------------- */
.lp-pillars{background:var(--paper);border-bottom:1px solid var(--hairline)}
.lp-pilgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:34px 0}
.lp-pil{padding:0 26px;border-left:1px solid var(--hairline)}
.lp-pil:first-child{border-left:0;padding-left:0}
.lp-pil-ico{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  background:var(--fresh);margin-bottom:13px}
.lp-pil-ico svg{width:23px;height:23px;fill:none;stroke:#fff;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.lp-pil h3{margin:0;font-size:1.12rem;line-height:1.2}
.lp-pil-sub{margin:3px 0 7px!important;font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:700}
.lp-pil p{margin:0;font-size:.86rem;color:var(--ink-dim);font-weight:300;line-height:1.55}
@media (max-width:900px){
  .lp-pilgrid{grid-template-columns:1fr 1fr;gap:28px 0;padding:30px 0}
  .lp-pil:nth-child(odd){border-left:0;padding-left:0}
}
@media (max-width:520px){
  .lp-pilgrid{grid-template-columns:1fr;gap:24px}
  .lp-pil{border-left:0;padding-left:0}
  .lp-pil-ico{width:40px;height:40px;margin-bottom:10px}
}

/* ---------------- value and price, one section ----------------------------
   Photograph, message, price. Three columns of one grid rather than two
   sections stacked, because the price IS the transparency claim the message
   makes: separating them made the reader take the argument on trust and then
   meet the evidence four screens later. */
.lp-value{position:relative;overflow:hidden;background:var(--cream)}
.lp-value::after{content:"";position:absolute;right:-16%;bottom:-40%;width:52%;height:150%;
  pointer-events:none;background:radial-gradient(closest-side,rgba(255,194,77,.2),
  rgba(255,194,77,.06) 58%,rgba(255,194,77,0) 100%)}
.lp-value-grid{position:relative;display:grid;grid-template-columns:.8fr 1.05fr .85fr;
  gap:44px;align-items:center}
.lp-shot{border-radius:22px;overflow:hidden;box-shadow:var(--lift-2);background:var(--cream-3)}
.lp-shot img{width:100%;height:100%;object-fit:cover;display:block}
.lp-shot-person{aspect-ratio:4/5;max-height:440px}
.lp-shot-person img{object-position:64% 36%}
.lp-value-copy .sec-h{margin-bottom:8px}
.lp-value-copy .sec-p{margin-bottom:22px;font-size:1.06rem;color:var(--ink)}
.lp-proof{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.lp-proof li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;
  font-size:.96rem;color:var(--ink-dim);font-weight:400}
.lp-proof svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--vital);stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}

.lp-pricecard{background:var(--paper);border:1.5px solid var(--hairline-g);border-radius:22px;
  padding:26px 26px 24px;box-shadow:var(--lift-2)}
.lp-pc-eyebrow{margin:0 0 10px;font-family:Cinzel,Georgia,serif;font-weight:600;font-size:.66rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--leaf-text)}
.lp-pc-amt{margin:0 0 12px;display:flex;align-items:baseline;gap:5px}
.lp-pc-amt b{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:3.4rem;
  letter-spacing:-.04em;line-height:1;background:var(--hot);-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent;color:var(--ember)}
.lp-pc-amt span{font-size:1rem;color:var(--ink-dim);font-weight:400}
.lp-pc-p{margin:0 0 20px;padding-top:16px;border-top:1px solid var(--hairline);
  font-size:.9rem;color:var(--ink-dim);font-weight:300;line-height:1.55}
.lp-pc-go .lp-go{width:100%}
@media (max-width:1040px){
  .lp-value-grid{grid-template-columns:1fr 1fr;gap:34px}
  .lp-shot-person{aspect-ratio:3/2;max-height:none}
  .lp-pricecard{grid-column:1 / -1;display:grid;grid-template-columns:auto 1fr auto;
    gap:24px;align-items:center;padding:22px 24px}
  .lp-pc-eyebrow{grid-column:1 / -1;margin:0}
  .lp-pc-amt{margin:0}
  .lp-pc-p{margin:0;padding-top:0;border-top:0}
  .lp-pc-go .lp-go{width:auto}
}
@media (max-width:720px){
  .lp-value-grid{grid-template-columns:1fr;gap:26px}
  .lp-pricecard{grid-template-columns:1fr;gap:14px;padding:24px}
  .lp-pc-p{padding-top:16px;border-top:1px solid var(--hairline)}
  .lp-pc-go .lp-go{width:100%}
}

/* ---------------- how it works -------------------------------------------- */
.lp-process{background:var(--cream-2)}
.lp-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.lp-step{position:relative;padding-top:4px}
.lp-step+.lp-step::before{content:"";position:absolute;left:-16px;top:22px;width:7px;height:7px;
  border-top:2px solid var(--hairline-hi);border-right:2px solid var(--hairline-hi);transform:rotate(45deg)}
.lp-step-n{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--fresh);
  color:#fff;font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:1.04rem;
  box-shadow:0 8px 18px -9px rgba(91,154,66,.8);margin-bottom:13px}
.lp-step h3{margin:0 0 5px;font-size:1.02rem;line-height:1.3}
.lp-step p{margin:0;font-size:.87rem;color:var(--ink-dim);font-weight:300;line-height:1.55}
@media (max-width:860px){
  .lp-steps{grid-template-columns:1fr 1fr;gap:26px 30px}
  .lp-step+.lp-step::before{display:none}
}
@media (max-width:460px){.lp-steps{grid-template-columns:1fr}}

/* ---------------- questions, and the disclosure that belongs beside them ---
   The required GLP-1 language used to be a full dark band, which made a
   disclaimer one of the largest destinations on a conversion page. Same words,
   set quietly under the answers, where someone reading about cost and sourcing
   is already reading. */
.lp-qa{background:var(--cream)}
.lp-disclose{
  margin:26px 0 0;max-width:80ch;font-size:.83rem;line-height:1.7;
  color:var(--ink-faint);font-weight:300;
}
.lp-disclose b{color:var(--ink-dim);font-weight:700}

/* ---------------- the close ------------------------------------------------ */
.lp-close{position:relative;overflow:hidden;background:var(--char)}
.lp-close-art{position:absolute;inset:0;background-image:url("/assets/campaign-couple-overlook.jpg");
  background-size:cover;background-position:62% 8%;background-repeat:no-repeat}
/* The couple sit right of frame in this one, so the dark wash carries the
   headline over the open valley and leaves the two of them in the light. */
.lp-close-scrim{position:absolute;inset:0;background:linear-gradient(100deg,
  rgba(26,18,10,.9) 0%,rgba(36,25,15,.78) 34%,rgba(36,25,15,.42) 58%,rgba(36,25,15,.2) 100%)}
/* tall enough that the photograph reads as a person in a landscape. A short
   band crops a standing figure to a torso, which is what this was doing. */
.lp-close-in{position:relative;padding-block:96px;min-height:300px;display:flex;
  flex-direction:column;justify-content:center}
.lp-close .sec-h{color:var(--on-char);font-size:var(--step-3);line-height:1.06;max-width:20ch}
.lp-close .sec-p{color:var(--on-char-dim)}
.lp-close .btn-go{padding:17px 32px;font-size:1.04rem;display:inline-flex;align-items:center;gap:9px}

/* ---------------- shared ---------------------------------------------------- */
/* Every call to action carries the same arrow. Sized once here: left to the
   browser an inline SVG with no dimensions lays out at 300x150 and pushes the
   page sideways, which is exactly what it did before this rule existed. */
.lp-go{display:inline-flex;align-items:center;justify-content:center;gap:9px}
.lp-go .go-a{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.lp-fc-go .go-a,.lp-exit-go .go-a{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.lp-close .lp-go,.lp-pc-go .lp-go{width:auto}
.lp-pc-go .lp-go{width:100%}

.lp-sticky{position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;padding:11px 16px;
  background:var(--cream);border-top:1.5px solid var(--hairline);box-shadow:0 -8px 24px -12px rgba(90,50,10,.3)}
.lp-sticky .btn{width:100%;padding:14px 20px;display:inline-flex;align-items:center;justify-content:center;gap:9px}
@media (max-width:980px){.lp-sticky.show{display:block}body.lp-has-sticky{--sticky-h:74px}}

.lp-foot{display:grid;grid-template-columns:2fr 1fr;gap:34px;margin-bottom:28px}
@media (max-width:700px){.lp-foot{grid-template-columns:1fr;gap:24px}}
.lp-foot h4{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim);
  margin:0 0 12px;font-family:Cinzel,serif;font-weight:600}
.lp-foot a{display:block;color:var(--ink-dim);text-decoration:none;margin-bottom:6px}
.lp-foot a:hover{color:var(--ember-text)}

@media (max-width:700px){
  .lp-close-art{background-position:72% 30%}
  .lp-close-in{padding-block:64px;min-height:0}
}


/* ==========================================================================
   The approved mockup (docs/reference/glp1-approved-mockup.webp) is the
   specification for everything below: a charcoal masthead, a photographic
   hero with the form floating over it, a pillar band, the price beside the
   promise, a single row for the process, patient stories and a charcoal
   footer. Rules here come after the originals on purpose, so the mockup's
   treatment wins without any of the earlier rules having to be unpicked.
   ========================================================================== */

/* ---------------- masthead ------------------------------------------------ */
.lp-top{background:var(--char);border-bottom:0}
@supports (backdrop-filter:blur(1px)){
  .lp-top{background:color-mix(in srgb,var(--char) 94%,transparent);backdrop-filter:blur(12px)}
}
.lp-mast{gap:26px;padding:12px 0}
.lp-brand{color:var(--on-char)}
.lp-brand img{width:46px;height:46px}
.lp-brand .lp-name{font-family:Cinzel,Georgia,serif;font-weight:600;font-size:1.5rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--gold);
  background:none;-webkit-text-fill-color:currentColor}
.lp-brand .lp-sub{color:var(--on-char-dim);font-size:.6rem;letter-spacing:.24em;margin-top:4px}

.lp-mast .lp-tel{margin-left:0;flex:none;background:var(--hot);color:#2A1607;
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:.9rem;
  padding:12px 24px;border-radius:99px;box-shadow:0 8px 20px -10px rgba(244,121,32,.8)}
.lp-mast .lp-tel svg{stroke:#2A1607;width:17px;height:17px}
.lp-mast .lp-tel:hover{color:#2A1607;filter:saturate(1.08)}
@media (max-width:1040px){.lp-mast .lp-tel{margin-left:auto}}
@media (max-width:560px){.lp-mast .lp-tel{padding:10px 18px;font-size:.84rem}}
@media (max-width:420px){.lp-mast .lp-tel span{display:inline}}

/* ---------------- hero ----------------------------------------------------- */
/* The headline is three short lines in the reference, so the copy column is
   narrow and the picture keeps the middle of the frame. */
.lp-hero h1{font-size:clamp(2.5rem,3.6vw,3.45rem);line-height:1.02;margin:12px 0 13px;
  letter-spacing:-.028em}
.lp-hero-copy{max-width:470px}
.lp-lede{max-width:34ch;font-size:1.06rem;color:var(--ink);font-weight:400}
.lp-heroproof{max-width:34ch;gap:15px;margin-top:22px}
.lp-hp-ico{width:42px;height:42px;background:var(--vital);border:0;
  box-shadow:0 6px 14px -7px rgba(91,154,66,.9)}
.lp-hp-ico svg{stroke:#fff;width:20px;height:20px}
.lp-pillbar{border-top:0;background:linear-gradient(90deg,
  var(--cream) 0%,rgba(255,249,242,.97) 46%,rgba(255,249,242,.82) 62%,rgba(255,249,242,0) 84%)}
.lp-pillbar ul{gap:8px 34px}
.lp-pillbar li{color:var(--ink-dim)}

/* ---------------- the consultation form ----------------------------------- */
.lp-formcard{
  border:1px solid rgba(255,255,255,.9);border-radius:20px;padding:26px 24px 22px;
  /* the reference's shadow: a tight contact edge, a wide soft body, and a
     long low pool underneath, so the card reads as lifted off the photograph */
  box-shadow:0 1px 2px rgba(60,32,8,.10),
             0 4px 10px -3px rgba(80,44,12,.14),
             0 20px 38px -14px rgba(90,50,10,.26),
             0 52px 90px -38px rgba(60,32,8,.42);
}
.lp-fc-h{font-size:1.72rem;letter-spacing:-.02em;margin-bottom:10px}
.lp-fc-p{margin-bottom:18px;font-size:.88rem;line-height:1.5}
.lp-fields{gap:11px}
/* the field name lives in the box, as the reference has it */
.lp-lab{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.lp-f input,.lp-f select{
  font:inherit;font-size:.93rem;color:var(--ink);background:var(--paper);
  border:1.5px solid var(--hairline);border-radius:10px;padding:13px 14px;width:100%;
}
.lp-f input::placeholder{color:var(--ink-faint);opacity:1}
.lp-f select{color:var(--ink-faint);appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A4907C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:17px;
  padding-right:38px}
.lp-f-interest{grid-column:1 / -1}
.lp-fc-go{margin-top:7px;padding:15px 24px;font-size:1rem}
.lp-fc-secure{display:grid;grid-template-columns:auto 1fr;gap:9px;align-items:start;
  margin:14px 0 0;font-size:.75rem;color:var(--ink-faint);font-weight:300;line-height:1.45}
.lp-fc-secure svg{width:15px;height:15px;margin-top:1px;fill:none;stroke:var(--ink-faint);
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.lp-fc-fine{margin-top:9px}

/* ---------------- four pillars -------------------------------------------- */
.lp-pillars{background:var(--paper)}
.lp-pilgrid{padding:40px 0}
.lp-pil{display:grid;grid-template-columns:auto 1fr;gap:3px 17px;align-items:start;padding:0 22px}
.lp-pil-ico{background:#3D5B2C;width:52px;height:52px;box-shadow:none;grid-row:span 3}
.lp-pil-ico svg{width:24px;height:24px;stroke:#fff}
.lp-pil h3{font-size:1.16rem}
@media (max-width:900px){.lp-pil{padding:0 18px}}
@media (max-width:640px){.lp-pil{grid-template-columns:auto 1fr}}

/* ---------------- more than a prescription -------------------------------- */
/* copy, then the price, then her: the order the reference reads in. */
.lp-value-grid{grid-template-columns:1.25fr .72fr .78fr;gap:40px;align-items:center}
.lp-value-copy .sec-h{font-size:clamp(2rem,2.9vw,2.85rem);letter-spacing:-.03em;margin-bottom:14px}
.lp-value-copy .sec-p{font-size:1rem;color:var(--ink-dim);font-weight:300;line-height:1.7;
  margin-bottom:20px;max-width:46ch}
.lp-value-copy .sec-p b{color:var(--ink);font-weight:700}
.lp-proof li{font-size:.95rem;color:var(--ink);font-weight:400}
.lp-proof svg{width:15px;height:15px;stroke-width:3}
.lp-proof li span,.lp-proof li>svg{flex:none}

.lp-pricecard{background:var(--cream-2);border:1px solid var(--hairline);border-radius:16px;
  padding:24px 22px;box-shadow:none;text-align:center}
.lp-pc-amt{justify-content:center;margin-bottom:14px}
.lp-pc-list{list-style:none;margin:0;padding:16px 0 0;border-top:1px solid var(--hairline-hi);
  display:grid;gap:10px;text-align:left}
.lp-pc-list li{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;
  font-size:.88rem;color:var(--ink);font-weight:400}
.lp-pc-list svg{width:15px;height:15px;fill:none;stroke:var(--vital);stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round}
.lp-pc-tag{margin:18px 0 0;padding-top:15px;border-top:1px solid var(--hairline-hi);
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:1rem;
  line-height:1.3;color:var(--ink);letter-spacing:-.015em}

.lp-value-shot{position:relative}
.lp-shot-person{aspect-ratio:auto;max-height:none;height:100%;border-radius:16px;
  box-shadow:var(--lift)}
.lp-shot-person img{object-position:50% 22%;min-height:330px}

/* ---------------- how it works, one row ----------------------------------- */
.lp-process{background:var(--cream-2);padding-block:46px}
.lp-proc-head{display:flex;align-items:baseline;justify-content:center;gap:16px;flex-wrap:wrap;
  margin:0 0 26px;text-align:center}
.lp-proc-head .eyebrow{font-size:.8rem;letter-spacing:.22em}
.lp-proc-sub{font-family:Cinzel,Georgia,serif;font-weight:600;font-size:.68rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-faint)}
.lp-steps{grid-template-columns:repeat(4,1fr);gap:0}
.lp-step{display:grid;grid-template-columns:auto auto 1fr;gap:12px;align-items:center;
  padding:0 22px}
.lp-step+.lp-step::before{content:"";position:absolute;left:-4px;top:50%;width:8px;height:8px;
  margin-top:-4px;border-top:2px solid var(--hairline-hi);border-right:2px solid var(--hairline-hi);
  transform:rotate(45deg)}
.lp-step-n{width:36px;height:36px;font-size:.95rem;margin-bottom:0}
.lp-step-ico{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;
  background:var(--cream-3)}
.lp-step-ico svg{width:18px;height:18px;fill:none;stroke:var(--ink-dim);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
/* the strut of this box, not just the inner span, sets the line box: without
   a line-height here the parent's 1.62 wins and the two lines drift apart */
.lp-step-t{display:block;font-size:.79rem;line-height:1.45}
.lp-step-t b{display:block;font-family:"Bricolage Grotesque",sans-serif;font-size:.93rem;
  line-height:1.25;letter-spacing:-.012em;margin-bottom:3px}
.lp-step-t span{font-size:.79rem;color:var(--ink-dim);font-weight:300;line-height:1.45}
@media (max-width:1040px){
  .lp-steps{grid-template-columns:1fr 1fr;gap:24px 12px}
  .lp-step+.lp-step::before{display:none}
}
@media (max-width:560px){.lp-steps{grid-template-columns:1fr}.lp-step{padding:0}}

/* ---------------- patient stories ----------------------------------------- */
/* PLACEHOLDER CONTENT. The quotes and names arrived with the design mockup
   and are not real patients; the chip above the cards says so on the page.
   Avatars are initials rather than invented faces. */
.lp-stories{position:relative;background:#243019;padding-block:56px;text-align:center}
.lp-stories::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 0%,rgba(109,184,74,.22),rgba(36,48,25,0) 70%)}
.lp-stories .wrap{position:relative}
.lp-stories .eyebrow{color:var(--gold)}
.lp-stories .sec-h{color:var(--on-char);margin:10px auto 0;max-width:none;
  font-size:clamp(1.7rem,2.5vw,2.4rem)}
.lp-stories .mocknote{margin:14px 0 26px;background:rgba(255,255,255,.08);
  border-color:rgba(255,246,236,.28);color:var(--on-char-dim)}
.lp-storygrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;text-align:left}
.lp-story{margin:0;background:var(--paper);border:1px solid var(--hairline);border-radius:14px;
  padding:18px 20px 16px;display:grid;grid-template-columns:auto 1fr;gap:6px 15px;
  align-items:center;box-shadow:var(--lift)}
.lp-story-av{grid-row:span 2;display:grid;place-items:center;width:52px;height:52px;
  border-radius:50%;background:var(--fresh);color:#fff;
  font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:1.25rem}
.lp-story blockquote{margin:0;font-size:.86rem;color:var(--ink-dim);font-weight:300;
  line-height:1.55}
.lp-story figcaption{font-size:.83rem;font-weight:700;color:var(--ink)}
.lp-stars{color:var(--gold);letter-spacing:.06em;margin-left:5px;font-size:.82rem}
@media (max-width:900px){.lp-storygrid{grid-template-columns:1fr;gap:14px}}

/* ---------------- the close ------------------------------------------------ */
.lp-close-in{align-items:center;text-align:center;padding-block:86px}
/* the reference centres this copy, and centred copy lands on whoever is in
   the middle of the photograph, so the band gets a soft pool of shade under
   the words while the couple stay in the light */
.lp-close-scrim{background:
  radial-gradient(58% 72% at 42% 50%,rgba(18,11,5,.72) 0%,rgba(18,11,5,.45) 55%,rgba(18,11,5,0) 100%),
  linear-gradient(100deg,rgba(26,18,10,.88) 0%,rgba(36,25,15,.72) 34%,rgba(36,25,15,.38) 58%,rgba(36,25,15,.18) 100%)}
.lp-close .eyebrow{color:var(--gold)}
.lp-close .sec-h{max-width:22ch;margin-inline:auto;font-size:clamp(1.9rem,3vw,2.9rem)}
.lp-close .sec-p{margin:0 auto 26px;max-width:52ch}
.lp-close .rowend{justify-content:center;margin-top:0}

/* ---------------- the follow-up page: /glp-1/next-step/ --------------------
   Almost nothing here. The two options are site.css's own .cards.two and
   .card, with .btn-go and .btn-ghost, so the page is the same card and button
   system as the rest of the funnel rather than a second look that has to be
   kept in step with it. What is left is the centred header, bottom-aligned
   buttons, and the state the calendar button sits in until Vivo supplies a
   scheduling link.                                                          */
.lp-next{background:var(--cream-2);border-bottom:1px solid var(--hairline)}
.lp-next-in{padding-block:68px;text-align:center}
.lp-next-in .sec-h,.lp-next-in .sec-p{margin-inline:auto}
.lp-next-in .sec-p{margin-bottom:38px}
/* the cards read left-aligned even though the header above them is centred */
.lp-next .cards{text-align:left}
.lp-next .card{padding:30px 28px;gap:11px}
.lp-next .card h3{font-size:1.28rem;letter-spacing:-.02em}
/* margin-top:auto is what aligns the two buttons with each other. Without it
   the shorter card's button floats up and the pair reads as a ranking rather
   than a choice. */
.lp-next-go{margin-top:auto;padding-top:20px}
.lp-next-go .btn{width:100%}
/* No href, not focusable, nothing to click: the scheduling link does not exist
   yet and a dead button on the page a lead was just redirected to is worse
   than one that says so. */
.lp-next-wait{opacity:.5;cursor:default;pointer-events:none}
/* --ink-dim, not --ink-faint. This is the sentence that keeps the call path
   from reading as medical guidance, and at this size --ink-faint measures
   2.76:1 against the cream - below the 4.5:1 WCAG AA needs for body text.
   A compliance line nobody can read is not a compliance line. */
.lp-next-note{margin:26px auto 0;max-width:62ch;font-size:.83rem;line-height:1.65;
  color:var(--ink-dim);font-weight:400}
.lp-next-note b{font-weight:700;color:var(--ink)}
.lp-next-foot{margin:30px auto 0;max-width:52ch;font-size:.93rem;line-height:1.6;
  color:var(--ink-dim);font-weight:300}
@media (max-width:640px){
  .lp-next-in{padding-block:46px}
  .lp-next-in .sec-p{margin-bottom:28px}
  .lp-next .card{padding:26px 23px}
}

/* ---------------- footer ---------------------------------------------------- */
.lp-footer{background:var(--char);color:var(--on-char-dim);border-top:0;padding:34px 0 44px}
.lp-footer .lp-foot{display:flex;align-items:center;justify-content:space-between;gap:26px;
  flex-wrap:wrap;margin-bottom:22px;padding-bottom:20px;
  border-bottom:1px solid rgba(255,246,236,.14)}
.lp-foot-brand{display:flex;align-items:center;gap:11px}
.lp-foot-brand img{width:46px;height:46px;flex:none}
.lp-foot-brand .lp-name{font-family:Cinzel,Georgia,serif;font-weight:600;font-size:1.4rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--gold);
  background:none;-webkit-text-fill-color:currentColor}
.lp-foot-brand .lp-sub{color:var(--on-char-dim);font-size:.58rem;letter-spacing:.24em}
.lp-foot-nav{display:flex;gap:22px;flex-wrap:wrap}
.lp-footer .lp-foot-nav a,.lp-footer .lp-foot-legal a{display:inline;margin:0;
  font-size:.82rem;color:var(--on-char-dim);text-decoration:none}
.lp-footer .lp-foot-nav a:hover,.lp-footer .lp-foot-legal a:hover{color:var(--gold)}
.lp-foot-legal{display:flex;gap:18px;flex-wrap:wrap}
.lp-social{display:flex;gap:4px}
.lp-social a{display:grid;place-items:center;width:44px;height:44px}
.lp-social a:hover svg{stroke:var(--gold)}
.lp-social svg{width:19px;height:19px;fill:none;stroke:var(--on-char-dim);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.lp-foot-rule{margin:0 0 14px;font-size:.78rem;color:var(--ink-faint)}
.lp-footer a{color:var(--on-char-dim)}
.lp-footer p{color:var(--ink-faint)}
.lp-footer strong{color:var(--on-char-dim)}
@media (max-width:900px){
  .lp-footer .lp-foot{justify-content:flex-start;gap:18px}
  .lp-foot-nav{order:4;width:100%}
}

/* ---------------- the handwritten lines -----------------------------------
   The reference carries a script line on each photograph. These are the
   mockup's own words, at JOSEPH's instruction (2026-09-23); none of them is
   approved copy and all three are flagged in docs/GLP1-CAMPAIGN.md.
   Each one is placed in clear sky or clear water, never over a face and never
   under the form card, and it is hidden at the widths where that space
   stops existing. Decorative, so aria-hidden and pointer-events:none. */
.lp-script{
  position:absolute;z-index:2;margin:0;pointer-events:none;
  font-family:Caveat,"Brush Script MT",cursive;font-weight:600;
  line-height:1.05;color:var(--char);
  text-shadow:0 1px 10px rgba(255,249,242,.9),0 0 22px rgba(255,249,242,.75);
}
.lp-script span{display:block}
.lp-swoosh{display:block;width:78px;height:10px;margin-top:5px;fill:none;
  stroke:var(--ember);stroke-width:2.2;stroke-linecap:round}

/* hero: the gap between his head and the form card, over open sky */
/* her panel: the lake behind her right shoulder */
.lp-script-value{right:5%;top:46%;font-size:clamp(1rem,1.25vw,1.28rem);text-align:right;
  color:#2A1D12;text-shadow:0 1px 10px rgba(255,255,255,.92),0 0 20px rgba(255,255,255,.8)}
.lp-script-value .lp-swoosh{margin-left:auto;width:62px}
/* the close: the bright sky over the valley, left of the couple */
.lp-script-close{right:6%;top:16%;font-size:clamp(1.15rem,1.5vw,1.55rem);text-align:right;
  color:var(--on-char);text-shadow:0 2px 16px rgba(20,12,5,.75),0 0 30px rgba(20,12,5,.5)}
.lp-script-close .lp-swoosh{margin-left:auto;stroke:var(--gold)}

@media (max-width:1180px){
}
@media (max-width:1040px){
  /* the hero stacks and the sky becomes a band across the top */
  .lp-script-value{top:auto;bottom:6%}
}
@media (max-width:760px){.lp-script-value{display:none}}
@media (max-width:620px){.lp-script{display:none}}


/* ==========================================================================
   Matching the reference's proportions (JOSEPH 2026-09-23).
   The single biggest difference was measured off the mockup rather than
   guessed: its content spans about 92% of the page width, where the site's
   shared .wrap stops at 1140px, which is 79% at desktop. Everything in the
   middle of the page was therefore narrower and more cramped than the
   reference, and "More Than a Prescription" wrapped to two lines because of
   it. This widens the landing page only; .wrap is shared with the site and
   is not touched.
   ========================================================================== */
.lp-pillars .wrap,
.lp-value-grid,
.lp-process .wrap,
.lp-qa .wrap,
.lp-stories .wrap,
.lp-close-in,
.lp-footer .wrap{max-width:1320px}

/* copy : price : photograph, in the reference's ratio */
.lp-value-grid{grid-template-columns:1.95fr .66fr 1fr;gap:36px}
/* one line, as the reference sets it */
.lp-value-copy .sec-h{font-size:clamp(1.9rem,2.6vw,2.6rem);white-space:nowrap}
.lp-value-copy .sec-p{max-width:52ch}
/* the panel runs the height of the block there, rather than floating in it */
.lp-value-shot{align-self:stretch;display:flex}
.lp-shot-person{width:100%;min-height:390px}

/* the step headings sit on one line in the reference */
.lp-step{padding:0 18px}
.lp-step-t b{white-space:nowrap}

/* the footer puts its legal links and copyright on the right, on one row */
@media (min-width:901px){
  .lp-footer .lp-foot{flex-wrap:nowrap}
  .lp-foot-rule{text-align:right}
}

@media (max-width:1180px){
  .lp-value-copy .sec-h{white-space:normal}
  .lp-step-t b{white-space:normal}
}


/* Her panel is a portrait now rather than a crop out of a wider frame, so it
   is framed on her face instead of the middle of the picture. */
.lp-shot-person img{object-position:52% 18%}

/* ==========================================================================
   THE SECOND-CHANCE OFFER.
   Shown once, on the way out, and never while someone is filling the
   consultation form. Same materials as the rest of the campaign - cream
   card, gold eyebrow, one gradient button - so it reads as part of the page
   rather than an interruption bolted onto it. No countdown, no discount, no
   urgency: it offers a document and a visible way out.
   ========================================================================== */
.lp-exit[hidden]{display:none}
.lp-exit{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:20px}
.lp-exit-veil{position:absolute;inset:0;background:rgba(26,16,7,.62);
  backdrop-filter:blur(3px);animation:lp-veil .22s ease-out}
@keyframes lp-veil{from{opacity:0}to{opacity:1}}
.lp-exit-card{
  position:relative;width:min(452px,100%);max-height:calc(100vh - 40px);overflow:auto;
  background:var(--paper);border:1px solid rgba(242,223,201,.9);border-radius:22px;
  padding:34px 30px 26px;text-align:center;
  box-shadow:0 2px 6px rgba(60,32,8,.14),0 26px 48px -18px rgba(90,50,10,.4),
             0 64px 110px -44px rgba(40,22,6,.5);
  animation:lp-pop .26s cubic-bezier(.2,.8,.3,1);
}
@keyframes lp-pop{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .lp-exit-veil,.lp-exit-card{animation:none}
}
.lp-exit-x{position:absolute;top:12px;right:12px;appearance:none;border:0;cursor:pointer;
  width:34px;height:34px;border-radius:50%;background:var(--cream-2);display:grid;place-items:center}
.lp-exit-x svg{width:16px;height:16px;fill:none;stroke:var(--ink-dim);stroke-width:2.2;
  stroke-linecap:round}
.lp-exit-x:hover{background:var(--cream-3)}
.lp-exit-x:focus-visible{outline:2.5px solid var(--vital);outline-offset:2px}
.lp-exit-eyebrow{margin:0 0 12px;font-size:.95rem;color:var(--ink-dim);font-weight:400;
  line-height:1.4;padding:0 18px}
.lp-exit-h{margin:0 0 12px;font-size:1.02rem;font-weight:700;color:var(--ink-dim);
  letter-spacing:.01em;line-height:1.35;font-family:Karla,sans-serif}
.lp-exit-h span{display:block;margin-top:6px;font-family:"Bricolage Grotesque",sans-serif;
  font-size:1.46rem;line-height:1.16;letter-spacing:-.022em;color:var(--ink);font-weight:700}
.lp-exit-p{margin:0 0 20px;font-size:.9rem;color:var(--ink-dim);font-weight:300;line-height:1.55}
.lp-exit-fields{display:grid;gap:11px;text-align:left}
.lp-exit-go{width:100%;margin-top:4px;padding:15px 24px;font-size:1rem;
  display:inline-flex;align-items:center;justify-content:center;gap:9px}
.lp-exit-fine{margin:14px 0 0;font-size:.74rem;color:var(--ink-faint);font-weight:300;
  line-height:1.5}
.lp-exit-live{margin:12px 0 0;font-size:.88rem;font-weight:600;color:var(--leaf-text)}
/* the page does not scroll behind an open dialog */
body.lp-exit-open{overflow:hidden}

@media (max-width:480px){
  .lp-exit{padding:14px;align-items:end}
  .lp-exit-card{padding:30px 22px 22px;border-radius:20px}
  .lp-exit-h span{font-size:1.3rem}
  /* 16px stops iOS zooming the page when the field takes focus */
  .lp-exit-fields input{font-size:1rem}
}


/* ==========================================================================
   Combined revision pass (JOSEPH 2026-09-23).
   ========================================================================== */

/* ---- hero ----------------------------------------------------------------
   The older couple photograph has open water and sky on its right, so the
   form card lands on quiet scenery rather than on anyone's face - the one
   rule this hero has. The couple sit left, which puts them behind the
   headline, so the cream wash there is deeper and carries further: they read
   as a lit background rather than a collision. */
.lp-hero h1{font-size:clamp(2.3rem,3.3vw,3.15rem)}

/* ---- More Than a Prescription: a man and a woman, side by side -----------
   One page that visibly speaks to both. Equal weight, equal size, same
   treatment, so neither reads as the afterthought. */
.lp-value-grid{grid-template-columns:1.05fr 1fr;gap:48px;align-items:center}
.lp-value-shots{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.lp-shot{position:relative;margin:0;border-radius:16px;overflow:hidden;
  aspect-ratio:1/1;box-shadow:var(--lift)}
.lp-shot img{width:100%;height:100%;object-fit:cover;display:block}
/* Framed from the top: head, shoulders and upper chest on both, so the pair
   match each other and neither turns into a body shot on a page about
   medically guided weight care. */
.lp-shot-man img{object-position:50% 0%}
.lp-shot-woman img{object-position:50% 0%}
/* The line sits low, over the quiet bottom of the frame and never over a
   face, on a scrim that guarantees contrast whatever the photograph does. */
.lp-shot-script{
  position:absolute;left:0;right:0;bottom:0;margin:0;padding:34px 16px 14px;
  font-family:Caveat,"Brush Script MT",cursive;font-weight:600;
  font-size:clamp(1.05rem,1.35vw,1.32rem);line-height:1.12;color:#fff;
  text-shadow:0 1px 10px rgba(10,6,2,.75);
  background:linear-gradient(rgba(16,10,4,0),rgba(16,10,4,.55) 45%,rgba(16,10,4,.78));
}
.lp-shot-script .lp-swoosh{width:54px;margin-top:4px;stroke:var(--gold)}
@media (max-width:1040px){
  .lp-value-grid{grid-template-columns:1fr;gap:30px}
  .lp-value-shots{max-width:560px}
}
@media (max-width:440px){
  .lp-value-shots{grid-template-columns:1fr;max-width:320px;margin-inline:auto}
}

/* ---- the close ----------------------------------------------------------
   The heavy dark slab on the left was reading as wasted space rather than a
   photograph. The wash is lighter and shorter now, so the valley and the
   sunset carry the left of the frame, with just enough shade under the words
   to hold them. Copy left, couple right, script above the headline. */
.lp-close-art{background-position:74% 12%}
.lp-close-scrim{background:
  linear-gradient(94deg,rgba(22,14,6,.82) 0%,rgba(26,17,8,.66) 30%,rgba(30,20,10,.34) 52%,
  rgba(30,20,10,.12) 70%,rgba(30,20,10,.04) 100%),
  linear-gradient(rgba(20,13,5,.42),rgba(20,13,5,.1) 46%,rgba(20,13,5,0) 62%,rgba(20,13,5,.3))}
.lp-close-in{align-items:flex-start;text-align:left;padding-block:92px}
.lp-close .sec-h{max-width:17ch;margin-inline:0}
.lp-close .sec-p{margin:0 0 26px;max-width:40ch}
.lp-close .rowend{justify-content:flex-start}
/* Upper right, over the sky and the far ridge, as marked. That corner is the
   lightest part of the frame, so the wash carries a little more shade up
   there and the line keeps a warm shadow: cream on a bright sky needs both
   or it disappears at the top of the band. */
.lp-script-close{left:auto;right:6%;top:23%;bottom:auto;text-align:left;
  font-size:clamp(1.15rem,1.5vw,1.55rem);color:var(--on-char);
  text-shadow:0 2px 14px rgba(24,14,5,.85),0 0 34px rgba(24,14,5,.6)}
.lp-script-close .lp-swoosh{margin-left:0;stroke:var(--gold)}
@media (max-width:900px){
  .lp-close-in{padding-block:64px}
  .lp-script-close{display:none}
}

/* ---- the guide cover in the dialog -------------------------------------- */
.lp-exit-card{padding-top:26px}
.lp-exit-cover{width:196px;margin:0 auto 18px;border-radius:9px;overflow:hidden;
  box-shadow:0 3px 7px rgba(40,24,8,.22),0 20px 38px -12px rgba(40,24,8,.5);
  transform:rotate(-2deg)}
.lp-exit-cover img{display:block;width:100%;height:auto}
.lp-exit-h span{margin-top:5px;font-size:1.38rem}
.lp-exit-h em{display:block;margin-top:4px;font-style:normal;font-family:Karla,sans-serif;
  font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint)}
/* a preview that says nothing was sent should not look like a success */
.lp-exit-live.lp-exit-preview{color:var(--ink-faint);font-weight:400;font-size:.8rem}
@media (max-width:480px){.lp-exit-cover{width:158px;margin-bottom:14px}}


/* ==========================================================================
   THE HERO, REBUILT AROUND THE VIDEO (JOSEPH 2026-09-25).

   Headline and lede across the top, then the campaign film on the left with
   the form card on the right, and the three proof rows under the film. The
   film sits directly above the form its own narration asks people to fill in.

   The full-bleed photograph is gone. With a film in the left column it put a
   second set of faces behind a moving one, and at 209KB loaded as a CSS
   background it was the page's largest paint - a picture nobody was looking
   at, discovered only after this stylesheet parsed. The band is flat cream
   now and the poster frame is the only image the hero loads.

   Named grid areas, so the phone stacking order is one line rather than a
   change to the template.
   ========================================================================== */
.lp-hero{position:relative;background:var(--cream);border-bottom:1px solid var(--hairline)}
.lp-hero-grid{position:relative;display:grid;max-width:1400px;
  grid-template-columns:minmax(0,1fr) 404px;
  grid-template-areas:"copy  copy"
                      "video form"
                      "proof form";
  gap:22px 34px;align-items:start;min-height:0;
  padding:44px 38px 30px 34px}
.lp-hero-copy{grid-area:copy;max-width:820px}
.lp-hero-video{grid-area:video;margin:0;min-width:0}
.lp-formcard{grid-area:form;align-self:start}
.lp-heroproof{grid-area:proof;align-self:start}
.lp-hero h1{font-size:clamp(2.5rem,3.6vw,3.45rem);line-height:1.02;margin:12px 0 13px;
  letter-spacing:-.028em}
.lp-lede{margin:0;max-width:56ch;font-size:1.06rem;color:var(--ink);font-weight:400}

/* aspect-ratio reserves the box before the poster paints, and the width and
   height attributes say the same thing to a browser that has not reached this
   file yet: nothing below the video moves. The dark fill is what shows in the
   gap between layout and poster, which is what the first frame is anyway. */
.lp-hero-video .lp-video{display:block;width:100%;height:auto;aspect-ratio:16/9;
  background:var(--char);border-radius:18px;box-shadow:var(--lift-2)}
.lp-video-cap{margin:9px 2px 0;font-size:.8rem;font-weight:600;letter-spacing:.02em;
  color:var(--ink-faint)}

/* three short proof rows, across the width of the film */
.lp-heroproof{list-style:none;margin:2px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;max-width:none}

/* In flow now, not floated over the bottom of a photograph: the gradient that
   faded the picture out from under it is invisible over flat cream, and the
   absolute box would sit on the form card's lower edge. */
.lp-pillbar{position:static;background:none;border-top:1px solid var(--hairline-g);
  padding:15px 0 13px;margin-top:8px}

@media (max-width:1040px){
  /* Copy, film, then the form the film asks for, then the proof rows. The
     form goes above the proof rows deliberately: the narration ends on "fill
     out the form", and three rows between the two is three rows of scrolling
     at the exact moment someone has decided. */
  .lp-hero-grid{grid-template-columns:1fr;
    grid-template-areas:"copy" "video" "form" "proof";
    gap:24px;padding:32px 26px 24px;min-height:0}
  .lp-hero-copy,.lp-lede{max-width:none}
  .lp-heroproof{grid-template-columns:1fr 1fr;gap:14px 22px}
  .lp-hero-video .lp-video{border-radius:14px}
}
@media (max-width:620px){.lp-heroproof{grid-template-columns:1fr}}

/* ---------------------------------------------------------------------------
   The practice behind the program. Sits directly under the hero, so it is
   deliberately quieter than the hero and quieter than the pillars that follow:
   a thin band that reads as fact rather than as another pitch. Three columns
   on desktop to match .lp-pilgrid, collapsing before the text gets cramped.
   Icon treatment is borrowed from .lp-hp-ico rather than reinvented, so the
   two trust rows on the page look related instead of merely adjacent.
--------------------------------------------------------------------------- */
.lp-real{background:var(--cream-2);border-bottom:1px solid var(--hairline);padding-block:30px}
.lp-real-eyebrow{margin:0 0 5px;font-family:Cinzel,Georgia,serif;font-weight:600;font-size:.68rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint)}
.lp-real-h{margin:0 0 20px;font-size:1.3rem;line-height:1.2;
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.lp-real-list{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.lp-real-list li{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:start}
.lp-real-ico{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:var(--sage-2);border:1px solid var(--hairline-g)}
.lp-real-ico svg{width:19px;height:19px;fill:none;stroke:var(--vital);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.lp-real-list b{display:block;font-size:.97rem;color:var(--ink);font-weight:700;line-height:1.25;
  margin-bottom:3px}
.lp-real-list li>span:last-child{font-size:.86rem;color:var(--ink-dim);font-weight:300;line-height:1.45}
.lp-real-list a{color:var(--vital);text-decoration:none;font-weight:600}
.lp-real-list a:hover{text-decoration:underline}
@media (max-width:900px){.lp-real-list{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.lp-real-list{grid-template-columns:1fr}}


/* ==========================================================================
   Guide squeeze pages (/10-things/). The supplied hero image stands where the
   film stands on /glp-1/, in the same grid area.
   ========================================================================== */
.lp-hero-guide{grid-area:video;margin:0;min-width:0}
.lp-hero-guide img{display:block;width:100%;height:auto;aspect-ratio:1672/941;
  border-radius:18px;box-shadow:var(--lift-2);background:var(--char)}
@media (max-width:1040px){.lp-hero-guide img{border-radius:14px}}

/* The guide pages' follow-up screen: one dark block, one primary action, one
   quieter alternative beneath it (the funnel deck's Step 5 slide). */
.lp-gnext .lp-next-in{max-width:760px;margin:0 auto;text-align:center}
.lp-gnext-sent{margin:0 0 22px;color:var(--ink-dim)}
.lp-gnext-card{background:var(--char);color:var(--on-char);border-radius:26px;
  padding:42px 38px 38px;box-shadow:var(--lift-2);text-align:left}
.lp-gnext-eyebrow{margin:0 0 10px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--tangerine)}
.lp-gnext-h{margin:0 0 14px;font-size:clamp(1.6rem,3.2vw,2.2rem);line-height:1.12;color:var(--on-char)}
.lp-gnext-p{margin:0 0 26px;color:var(--on-char-dim);max-width:56ch}
.lp-gnext-go .btn{display:inline-flex}
.lp-gnext-alt{margin:22px 0 4px;font-size:1.08rem;font-weight:600;color:var(--ink)}
@media (max-width:620px){.lp-gnext-card{padding:30px 22px 26px}.lp-gnext-go .btn{width:100%;justify-content:center}}

/* A form with fewer fields than the consultation form (the guide pages ask for
   a first name and an email): every field takes the full row. */
.lp-fields-guide .lp-f{grid-column:1 / -1}