/* Get Better With Money Club — the lead magnet landing page.
   Loads after styles.css and adds nothing to the token set: every colour,
   radius, shadow and easing here is one of the variables defined there.

   One page serves all 37 magnets (35-LEAD-MAGNET-FUNNEL-SPEC.md), so nothing
   in this file may hard-code a magnet's name, length or subject. Anything that
   changes per magnet is a data attribute set by get.js. */

/* ---------- page frame ---------- */
/* No nav links and no footer links by design. A landing page with somewhere
   else to go is a landing page with a leak in it. */
.lp-nav{padding:1.5rem 0 .5rem}
.lp-nav__in{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.lp-nav img{width:132px;height:auto}
.lp-nav__note{font-size:.78rem;color:var(--ink-3)}
@media (max-width:560px){.lp-nav img{width:108px}.lp-nav__note{display:none}}

/* ---------- hero ---------- */
.lp-hero{padding:clamp(1.5rem,3vw,2.5rem) 0 clamp(3rem,6vw,5rem)}
/* Three areas, not two columns. Desktop reads left-then-right; a phone reads
   promise, then the object, then the form, so nobody hands over an email
   without having seen the thing. */
.lp-hero__grid{display:grid;grid-template-columns:1.05fr .95fr;
  grid-template-areas:"copy mock" "form mock";
  grid-template-rows:auto 1fr;gap:1.6rem clamp(2rem,4vw,3.5rem);align-items:start}
.lp-hero__copy{grid-area:copy}
.lp-form{grid-area:form}
.mock{grid-area:mock;align-self:center}
@media (max-width:960px){
  .lp-hero__grid{grid-template-columns:1fr;grid-template-rows:auto;
    grid-template-areas:"copy" "mock" "form";gap:clamp(2rem,6vw,2.6rem)}
}

.lp-hero h1{margin:0;font-size:clamp(2.25rem,4.4vw,3.75rem);line-height:1.02}
.lp-hero .lede{max-width:46ch}

/* what it does — three lines, straight off the asset */
.lp-does{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:.6rem;max-width:52ch}
.lp-does li{display:flex;gap:.7rem;align-items:flex-start;font-size:.93rem;line-height:1.5;color:var(--ink-2)}
.lp-does .ico{width:19px;height:19px;margin-top:.15rem;stroke:var(--amber-ink)}
.lp-does strong{color:var(--ink);font-weight:600}

/* ---------- the form sheet ---------- */
/* Two fields. Every extra one costs completions and none of the others are
   needed to deliver a file. */
.lp-form{padding:clamp(1.35rem,2.6vw,1.8rem);max-width:520px}
.lp-form__legend{font-family:var(--serif);font-weight:600;font-size:1.5rem;line-height:1.15;margin:0 0 1rem}
.lp-form__fields{display:grid;gap:.7rem}
.lp-form input{width:100%;background:var(--white);border:1.5px solid var(--line);border-radius:var(--r-sm);padding:.85rem 1rem;font-size:.95rem;transition:border-color .25s,box-shadow .25s}
.lp-form input::placeholder{color:var(--ink-3)}
.lp-form input:focus{outline:none;border-color:var(--forest);box-shadow:0 0 0 3px rgba(17,44,40,.08)}
.lp-form .err{display:block;font-size:.72rem;color:var(--ink-3);margin-top:.3rem;min-height:0}
.lp-form .has-err input{border-color:#C7452F}
.lp-form .has-err .err{color:#9C2A1C}
.lp-form .btn{margin-top:1rem}
.lp-consent{font-size:.72rem;line-height:1.5;color:var(--ink-3);margin:.9rem 0 0}
.lp-form__err{background:#FBE7E3;color:#8E2418;font-size:.8rem;border-radius:var(--r-sm);padding:.7rem .9rem;margin:.9rem 0 0}

/* ---------- the mockup ---------- */
/* The object the reader is being handed, shown as an object: page 1 of the
   actual file, in a white frame on a short stack, tipped a degree and a half so
   it reads as paper on a table rather than as a screenshot. */
.mock{position:relative;justify-self:center;width:min(100%,455px);perspective:1400px}
.mock__body{position:relative;transform:rotate(-1.6deg);transition:transform .6s var(--ease)}
.mock:hover .mock__body{transform:rotate(-.4deg) translateY(-4px)}
.mock__body::before,.mock__body::after{content:"";position:absolute;inset:0;background:var(--white);border:1px solid var(--line-2);border-radius:6px;box-shadow:var(--sh-1)}
.mock__body::before{transform:rotate(2.6deg) translate(9px,7px);z-index:0}
.mock__body::after{transform:rotate(1.2deg) translate(4px,4px);z-index:1}
.mock__page{position:relative;z-index:2;background:var(--white);border-radius:var(--r-sm);padding:6px;box-shadow:var(--sh-3);overflow:hidden}
.mock__page img{width:100%;height:auto;border-radius:6px;display:block}
.mock__glare{position:absolute;inset:0;z-index:3;border-radius:var(--r-sm);pointer-events:none;
  background:linear-gradient(112deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,0) 34%,rgba(255,255,255,0) 76%,rgba(17,44,40,.05) 100%)}

/* the chip that names the object, sitting on the corner of it */
.mock__chip{position:absolute;z-index:4;left:-14px;bottom:-16px;display:inline-flex;align-items:center;gap:.45rem;
  background:var(--white);border:1px solid var(--line-2);border-radius:99px;padding:.5rem .95rem;
  font-size:.78rem;font-weight:600;color:var(--ink-2);box-shadow:var(--sh-2);white-space:nowrap;max-width:none}
.mock__chip .ico{width:15px;height:15px;stroke:var(--amber-ink)}
@media (max-width:560px){.mock__chip{left:50%;transform:translateX(-50%)}}

/* ---------- the cover ---------- */
/* A full-bleed photograph with the title set into its lower third — the way a
   published report is built, not the way a template is. It deliberately shows
   none of the file's content: most of these are one-pagers, so a legible
   preview is the whole magnet and there is nothing left to ask for.

   The premium read comes from restraint plus four physical cues:
     a page block along the right edge, so it has thickness
     a spine gradient on the left, so it has a bound side
     one raking highlight, so it has a surface rather than an outline
     a contact shadow tighter than the ambient one, so it sits on something
   Art is a portrait set built by scripts/build_cover_art.py. */
.cover{position:relative;z-index:2;aspect-ratio:.773;border-radius:var(--r-sm);
  box-shadow:var(--sh-3),0 2px 6px -2px rgba(17,44,40,.5)}
.cover__face{position:absolute;inset:0;overflow:hidden;border-radius:var(--r-sm);
  background:var(--forest);color:var(--on-forest)}
.cover__art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* Two stops doing different jobs: a light wash up top so the knocked-out
   wordmark holds on any frame, and a deep forest floor the type sits on. The
   long middle stop is what keeps it from looking like a black bar. */
.cover__scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,
      rgba(17,44,40,.60) 0,
      rgba(17,44,40,.14) 18%,
      rgba(17,44,40,0)   34%,
      rgba(17,44,40,.30) 55%,
      rgba(17,44,40,.80) 72%,
      rgba(17,44,40,.95) 86%,
      rgba(17,44,40,.97) 100%)}

/* The domain, top left, over the picture. Small and quiet: the scrim's top
   stop plus a shadow carry it, so it needs no panel of its own. */
.cover__url{position:absolute;z-index:3;top:clamp(1rem,2.8vw,1.4rem);
  left:clamp(1.1rem,3.2vw,1.7rem);
  font-size:.64rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.88);text-shadow:0 1px 8px rgba(0,0,0,.65)}

/* the type, set into the lower third */
.cover__body{position:absolute;z-index:2;left:0;right:0;bottom:0;
  padding:0 clamp(1.1rem,3.2vw,1.7rem) clamp(1rem,2.8vw,1.45rem)}
.cover__eyebrow{margin:0 0 .5rem;font-size:.68rem;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--amber);line-height:1.4}
.cover__title{margin:0;font-family:var(--serif);font-weight:600;
  font-size:clamp(1.5rem,2.6vw,2.15rem);line-height:1.05;letter-spacing:-.015em;
  color:var(--white);text-wrap:balance;text-shadow:0 2px 14px rgba(0,0,0,.35)}
.cover__foot{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  margin-top:clamp(.9rem,2.4vw,1.2rem);padding-top:.8rem;
  border-top:1px solid rgba(255,255,255,.18);
  font-size:.66rem;font-weight:600;letter-spacing:.055em;color:var(--on-forest-3);
  text-transform:uppercase}
/* The wordmark sits here rather than over the picture: this strip is the
   deepest part of the scrim, effectively solid forest, which is the one ground
   the mark is built for. Its white halo stroke separates and its gold runs
   7.8:1, so it needs no panel behind it. */
.cover__mark{width:clamp(76px,22%,94px);height:auto;flex:none;display:block}
@media (max-width:560px){.cover__mark{width:68px}}

/* thickness, binding, surface */
.cover::after{content:"";position:absolute;top:5px;bottom:5px;right:-5px;width:6px;
  border-radius:0 6px 6px 0;pointer-events:none;
  background:repeating-linear-gradient(to bottom,var(--white) 0 1px,var(--line) 1px 2.5px);
  box-shadow:1px 0 3px -1px rgba(17,44,40,.35)}
.cover__spine{position:absolute;top:0;bottom:0;left:0;width:15px;pointer-events:none;z-index:3;
  border-radius:var(--r-sm) 0 0 var(--r-sm);
  background:linear-gradient(90deg,rgba(0,0,0,.34),rgba(0,0,0,.12) 45%,transparent)}
.cover__gloss{position:absolute;inset:0;pointer-events:none;z-index:3;border-radius:var(--r-sm);
  background:linear-gradient(104deg,rgba(255,255,255,.12) 0 18%,rgba(255,255,255,0) 46%)}

@media (max-width:560px){.cover__foot{font-size:.6rem}}

/* ---------- delivered state ---------- */
/* The file arrives on screen the moment the form is answered, and by email so
   it survives a closed tab. */
.lp-done{max-width:520px}
.lp-done__ico{display:grid;place-items:center;width:56px;height:56px;border-radius:99px;background:var(--amber);margin-bottom:1.1rem}
.lp-done__ico .ico{width:26px;height:26px;stroke:var(--forest);stroke-width:2}
.lp-done h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.85rem,3vw,2.5rem);line-height:1.05;margin:0}
.lp-done p{color:var(--ink-2);margin:.9rem 0 0}
.lp-done .btn{margin-top:1.5rem}
.lp-next{list-style:none;margin:1.4rem 0 1.2rem;padding:0;display:grid;gap:.5rem;max-width:46ch}
.lp-next li{position:relative;padding-left:1.1rem;font-size:.85rem;line-height:1.55;color:var(--ink-3)}
.lp-next li::before{content:"";position:absolute;left:0;top:.58em;width:5px;height:5px;border-radius:99px;background:var(--amber)}

/* ---------- what's on it ---------- */
.lp-inside{background:var(--ivory-2);padding:var(--section-lg,clamp(3.5rem,7vw,5.5rem)) 0}
.lp-inside__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
@media (max-width:900px){.lp-inside__grid{grid-template-columns:1fr}}
/* Fifteen of the thirty-seven assets are one unbroken list or a workbook, so
   they have no named sections to itemise. Rather than invent a contents list,
   the heading takes the full width and the three cards below carry the section. */
.lp-inside__grid.is-solo{grid-template-columns:1fr;text-align:center;max-width:52ch;margin-inline:auto}
.lp-inside__grid.is-solo .lede{margin-inline:auto}
.lp-inside h2{margin:0}
.lp-contents{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.lp-contents li{display:flex;gap:.85rem;align-items:center;background:var(--white);border:1px solid var(--line-2);border-radius:14px;padding:.85rem 1.1rem;font-weight:600;font-size:.95rem;box-shadow:var(--sh-1)}
.lp-contents li span{display:grid;place-items:center;width:26px;height:26px;flex:none;border-radius:99px;background:var(--amber-soft);color:var(--amber-ink);font-size:.72rem;font-variant-numeric:tabular-nums}

/* why it is worth the two fields — fixed for every magnet */
.lp-why{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:clamp(2.5rem,5vw,3.5rem)}
@media (max-width:800px){.lp-why{grid-template-columns:1fr}}
.lp-why article{background:var(--white);border:1px solid var(--line-2);border-radius:var(--r);padding:clamp(1.3rem,2.4vw,1.7rem);box-shadow:var(--sh-1)}
.lp-why h3{font-family:var(--serif);font-weight:600;font-size:1.5rem;line-height:1.15;margin:.9rem 0 .5rem}
.lp-why p{margin:0;font-size:.93rem;line-height:1.6;color:var(--ink-2)}
.lp-why__ico{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--amber-soft)}
.lp-why__ico .ico{stroke:var(--amber-ink)}

/* ---------- who we are ---------- */
.lp-who{background:var(--forest);color:var(--on-forest);padding:clamp(3.5rem,7vw,5.5rem) 0;position:relative;overflow:hidden}
.lp-who::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 80% at 78% 20%,rgba(237,174,29,.13),transparent 70%);pointer-events:none}
.lp-who .wrap{position:relative}
.lp-who__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
@media (max-width:900px){.lp-who__grid{grid-template-columns:1fr}}
.lp-who h2{margin:0;color:var(--white)}
.lp-who p{color:var(--on-forest-2);margin:1.1rem 0 0;max-width:52ch}
.lp-who__facts{display:grid;gap:.9rem}
.lp-who__facts div{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.11);border-radius:16px;padding:1.05rem 1.2rem}
.lp-who__facts b{display:block;font-weight:600;font-size:.97rem;color:var(--white)}
.lp-who__facts span{display:block;font-size:.88rem;line-height:1.55;color:var(--on-forest-3);margin-top:.25rem}

/* ---------- the second ask ---------- */
/* Underneath the file, never before it. A reader who came for a checklist and
   meets a booking pitch first learns the checklist was bait. */
.lp-second{padding:clamp(3.5rem,7vw,5.5rem) 0}
.lp-second__card{max-width:760px;margin-inline:auto;text-align:center;padding:clamp(2rem,4vw,3rem);border-radius:var(--r-lg)}
.lp-second h2{margin:0}
.lp-second p{color:var(--ink-2);margin:1rem auto 0;max-width:46ch}
.lp-second .btn{margin-top:1.8rem}
.lp-second .disclosure{font-size:.76rem;color:var(--ink-3);margin:1.2rem auto 0;max-width:62ch;line-height:1.6}

/* ---------- footer ---------- */
.lp-foot{background:var(--forest);color:var(--on-forest-3);padding:2.5rem 0;font-size:.78rem;line-height:1.6}
.lp-foot .wrap{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between}
.lp-foot p{margin:0;max-width:64ch}
.lp-foot strong{color:var(--on-forest-2);font-weight:600}

@media (prefers-reduced-motion:reduce){
  .mock__body,.mock:hover .mock__body{transform:none;transition:none}
}