/* ============================================================
   LEAD-MAGNET LANDING PAGE — #000 throughout, CRO-focused
   ============================================================ */
body.lp{background:#000;color:#fff}

/* minimal header (few exits = better conversion) */
.lp-header{position:absolute;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:24px var(--pad)}
.lp-header .brand{color:#fff}
.lp-header .brand .word{font-family:var(--display);font-size:1.24rem;font-weight:700}
.lp-header .brand .word b{color:var(--neon)}
.lp-mini-cta{font-family:var(--mono);font-size:.72rem;letter-spacing:calc(.072em * var(--mono-track, 1));text-transform:uppercase;color:#fff;border:1px solid var(--neon);border-radius:6px;padding:9px 16px;transition:background .2s,box-shadow .2s}
.lp-mini-cta:hover{background:var(--orange-soft);box-shadow:var(--neon-glow)}
/*
 * The way back into the site. Quieter than the CTA across the header from it —
 * it is the alternative to converting, not a second ask — but present, so a
 * reader who wants to know who wrote this has somewhere to go that is not the
 * back button.
 *
 * It sits with the brand, and the gap is wider than the one on the right: the
 * logo and this link are two separate things that happen to be adjacent, where
 * the group on the right is one cluster.
 */
.lp-header__start{display:flex;align-items:center;gap:22px}
.lp-header__end{display:flex;align-items:center;gap:18px}
.lp-home-link{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:.66rem;letter-spacing:calc(.064em * var(--mono-track, 1));text-transform:uppercase;
  color:rgba(255,255,255,.62);transition:color .2s;
}
.lp-home-link:hover{color:#fff}
.lp-home-link__arrow{font-size:.9rem;line-height:1;transition:transform .2s}
.lp-home-link:hover .lp-home-link__arrow{transform:translateX(-3px)}

/* hero — full bleed */
/* dvh, not vh: on a phone 100vh is measured against the viewport with the
   browser's own bars hidden, so a hero sized in vh is taller than the screen
   and its lower edge sits under the address bar until the user scrolls. */
.lp-hero{position:relative;background:#000;min-height:100vh;min-height:100dvh;display:flex;align-items:center}
.lp-hero-inner{max-width:1340px;margin:0 auto;width:100%;padding:130px var(--pad) 70px;display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(30px,6vw,90px);align-items:center}

/* ---- book mockup ---- */
.book-stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:440px;perspective:1600px}
.book{position:relative;width:272px;height:368px;transform:rotate(-7deg);transform-style:preserve-3d;z-index:2}
.book .cover{position:absolute;inset:0;border-radius:2px 7px 7px 2px;overflow:hidden;background:linear-gradient(152deg,#191919 0%,#050505 62%);border:1px solid #2a2a2a;box-shadow:0 48px 64px -20px rgba(0,0,0,.8),0 12px 22px rgba(0,0,0,.5)}
.book .art{position:absolute;inset:0;padding:30px 26px;display:flex;flex-direction:column}
.book .art .bmini{font-family:var(--mono);font-size:.56rem;letter-spacing:calc(.088em * var(--mono-track, 1));text-transform:uppercase;color:#8f8f8f}
.book .art .bkick{font-family:var(--mono);font-size:.58rem;letter-spacing:calc(.08em * var(--mono-track, 1));text-transform:uppercase;color:var(--neon);margin-top:36px}
.book .art h3{font-family:var(--display);font-weight:800;font-size:var(--fs-h3,2rem);line-height:1.02;color:#fff;margin:12px 0 0}
.book .art .bsub{font-family:var(--display);font-style:italic;font-size:.9rem;color:rgba(255,255,255,.66);margin-top:12px;line-height:1.35}
.book .art .bline{width:44px;height:2px;background:var(--neon);box-shadow:var(--neon-glow);margin-top:auto}
.book .art .bbadge{margin-top:16px;font-family:var(--mono);font-size:.6rem;letter-spacing:calc(.072em * var(--mono-track, 1));text-transform:uppercase;color:#0a0a0a;background:var(--orange);align-self:flex-start;padding:5px 10px;border-radius:4px}
.book .spine{position:absolute;top:6px;bottom:6px;left:-19px;width:22px;background:linear-gradient(90deg,#000,#1a1a1a 72%,#242424);border-radius:3px 0 0 3px;transform:perspective(600px) rotateY(34deg);transform-origin:right center;box-shadow:inset -8px 0 12px rgba(0,0,0,.7)}
.book .spine span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--mono);font-size:.46rem;letter-spacing:calc(.064em * var(--mono-track, 1));color:#8a8a8a;text-transform:uppercase;white-space:nowrap}
.book .pages{position:absolute;top:6px;bottom:6px;right:-9px;width:13px;background:repeating-linear-gradient(to bottom,#efe7d8,#efe7d8 1px,#c9c0ae 2px,#c9c0ae 3px);transform:perspective(600px) rotateY(-32deg);transform-origin:left center;border-radius:0 2px 2px 0}

/* lying-down second copy, spine visible */
.book-lying{position:absolute;left:calc(50% - 190px);bottom:36px;width:250px;height:150px;transform:perspective(900px) rotateX(57deg) rotate(-13deg);transform-style:preserve-3d;z-index:1;filter:drop-shadow(0 34px 30px rgba(0,0,0,.6))}
.book-lying .bl-cover{position:absolute;inset:0;background:linear-gradient(150deg,#161616,#050505);border:1px solid #232323;border-radius:3px}
.book-lying .bl-cover .m{position:absolute;left:18px;top:20px;font-family:var(--mono);font-size:.5rem;letter-spacing:calc(.08em * var(--mono-track, 1));color:#6d6d6d;text-transform:uppercase}
.book-lying .bl-cover .a{position:absolute;left:18px;bottom:20px;width:40px;height:2px;background:var(--neon)}
.book-lying .bl-thick{position:absolute;left:0;right:0;top:100%;height:22px;background:linear-gradient(#111,#050505);border:1px solid #222;border-top:0;transform-origin:top;transform:rotateX(-90deg);display:flex;align-items:center;padding-left:16px}
.book-lying .bl-thick span{font-family:var(--mono);font-size:.48rem;letter-spacing:calc(.064em * var(--mono-track, 1));color:#7c7c7c;text-transform:uppercase;white-space:nowrap}

/* hero right = pitch + form (reuses .lead/.field/.btn-primary) */
.lp-pitch .eyebrow{margin-bottom:16px}
.lp-pitch h1{font-family:var(--display);font-weight:800;font-size:var(--fs-h1,clamp(2.1rem,4vw,3.3rem));line-height:1.03;letter-spacing:-.015em;color:#fff;margin:0 0 16px;max-width:16ch}
.lp-pitch .lp-sub{color:rgba(255,255,255,.68);font-size:1.02rem;line-height:1.55;max-width:44ch;margin:0 0 30px}
.lp-form-note{margin-top:16px;font-family:var(--mono);font-size:.64rem;letter-spacing:calc(.048em * var(--mono-track, 1));text-transform:uppercase;color:var(--grey)}

/* ribbon — a real infinity loop of text threading hero + fold 2 (no band) */
.lp-thread{position:relative;background:#000;overflow:hidden}
.lp-thread .lp-hero{background:transparent;position:relative;z-index:1}
.lp-thread .lp-why{background:transparent;position:relative;z-index:1}
.thread-ribbon{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;overflow:visible}
.inf-line{fill:none;stroke:rgba(255,122,41,.5);stroke-width:1;stroke-dasharray:2 15;stroke-linecap:round;vector-effect:non-scaling-stroke;animation:dashflow 2.6s linear infinite}
@keyframes dashflow{to{stroke-dashoffset:-34}}
.inf-text{fill:rgba(255,255,255,.5);font-family:var(--display);font-weight:500;font-size:9px;letter-spacing:.12em}

/* fold 2 — why get this eBook */
.lp-why{background:#000;padding:clamp(64px,9vw,110px) 0}
.lp-why .eyebrow{margin-bottom:14px}
.lp-why h2{font-family:var(--display);font-weight:700;font-size:var(--fs-h2,clamp(1.9rem,4vw,2.8rem));color:#fff;margin:0 0 50px;max-width:18ch}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.why-item{border-top:1px solid rgba(255,255,255,.14);padding-top:26px}
.why-illus{height:48px;margin-bottom:22px}
.why-illus svg{height:100%;width:auto}
.why-illus svg *{stroke:var(--neon)}
/* An uploaded mark sits in the same 48px slot as the built-in icons, scaled by
   height so the row still lines up whatever aspect the file happens to be.
   It keeps its own colours: unlike the built-in set it is not inlined, so
   there is no stroke here to repaint. */
.why-illus--custom{display:flex;align-items:flex-start}
.why-illus--custom .peepal-media{height:100%;width:auto;display:block}
.why-illus--custom img{height:100%;width:auto;max-width:100%;object-fit:contain;display:block}
.why-item .wnum{font-family:var(--mono);font-size:.66rem;letter-spacing:calc(.08em * var(--mono-track, 1));color:var(--neon);margin-bottom:10px}
.why-item h3{font-family:var(--display);font-size:var(--fs-h3,1.5rem);font-weight:700;color:#fff;margin:0 0 12px;line-height:1.1}
.why-item p{color:rgba(255,255,255,.66);line-height:1.6;font-size:.98rem;margin:0}

/* fold 3 — who else is reading (white) */
.lp-readers{background:#fff;color:#111;padding:clamp(56px,8vw,90px) 0;text-align:center}
.lp-readers .eyebrow{color:var(--orange);margin-bottom:12px}
.lp-readers h2{font-family:var(--display);font-weight:700;font-size:var(--fs-h2,clamp(1.7rem,3.4vw,2.4rem));color:#0a0a0a;margin:0 0 44px}
.readers-grid{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:clamp(28px,5vw,64px);max-width:960px;margin:0 auto}
.rlogo{font-family:var(--display);font-weight:600;font-size:1.5rem;color:#a6a6a6;transition:color .25s}
.rlogo:hover{color:#333}

/* fold 4 — consultation CTA (rotational / skippable module) */
.lp-cta{background:#000;padding:clamp(64px,9vw,110px) 0;text-align:center}
.lp-cta .eyebrow{margin-bottom:18px}
.lp-cta h2{font-family:var(--display);font-weight:700;font-size:var(--fs-h2,clamp(1.9rem,4vw,3rem));color:#fff;margin:0 auto 30px;max-width:20ch;line-height:1.08}
.lp-cta .cta-btn{display:inline-flex;align-items:center;gap:14px;background:var(--orange);color:#111;border:0;border-radius:6px;padding:18px 40px;font-family:var(--mono);text-transform:uppercase;letter-spacing:calc(.08em * var(--mono-track, 1));font-size:.82rem;font-weight:600;cursor:pointer;transition:filter .2s,transform .05s}
.lp-cta .cta-btn:hover{filter:brightness(1.06)}
.lp-cta .cta-btn:active{transform:translateY(1px)}
.lp-cta .cta-note{margin-top:20px;font-family:var(--mono);font-size:.64rem;letter-spacing:calc(.056em * var(--mono-track, 1));text-transform:uppercase;color:var(--grey)}

/* related resources (between CTA and footer) — divider to separate */
.lp-related{border-top:1px solid rgba(255,255,255,.16)}

@media(max-width:900px){
  .lp-hero-inner{grid-template-columns:1fr;gap:56px}
  .book-stage{order:2;min-height:400px}
  .why-grid{grid-template-columns:1fr}
  /* On a phone the header keeps the way home and drops the second ask —
     the hero's own button is a screen away, not a page away. */
  .lp-mini-cta{display:none}
  .lp-home-link{font-size:.6rem;letter-spacing:calc(.048em * var(--mono-track, 1))}
}


/* ------------------------------------------------------------------
   Bridging the prototype to the CMS
   The prototype hard-codes reader names as text and the book cover as
   markup. Both can now be real uploads, so they need the sizing the
   static version never had to state.
   ------------------------------------------------------------------ */

/* An uploaded cover fills the whole cover face, under the border/shadow. */
.book .cover .book__cover,
.book .cover .peepal-media{position:absolute;inset:0;width:100%;height:100%;overflow:hidden}
.book .cover .book__cover img,
.book .cover .peepal-media__img{width:100%;height:100%;object-fit:cover;display:block}

/* A reader "logo" may be an uploaded image rather than a name. */
.rlogo--img{width:auto;max-width:150px}
.rlogo--img img,.rlogo--img .peepal-media__img{
  width:auto;height:auto;max-height:38px;max-width:100%;object-fit:contain;
  filter:grayscale(1);opacity:.62;transition:filter .25s,opacity .25s;
}
.rlogo--img:hover img,.rlogo--img:hover .peepal-media__img{filter:grayscale(0);opacity:1}

/* The form sits on black here, so its labels and fields invert. */
.lp-hero .lead .field label{color:rgba(255,255,255,.62)}
.lp-hero .lead .field input,.lp-hero .lead .field select{color:#fff}
.lp-hero .lead .optional{color:var(--grey)}

/* The minimal header is sticky-aware like the main nav (see ui.css). */
.lp-header .brand__logo img,.lp-header .brand__logo .peepal-media__img{max-height:48px}

@media(max-width:900px){
  .lp-hero-inner{padding-top:110px}
}

/* -------------------------------------------------------------------------
   Centred variant — podcast and webinar landings

   Same hero, one column. There is no object to stand beside the copy on these
   pages, so the two-column grid collapses to a single centred measure. The
   copy's max-widths are the reason this needs more than `text-align:center`:
   they are left-anchored ch measures, and centring the text inside a 16ch box
   that is itself flush left only looks centred by accident.
   ---------------------------------------------------------------------- */
.lp-hero--centred .lp-hero-inner{
  grid-template-columns:minmax(0,640px);justify-content:center;
  padding-top:clamp(120px,16vh,170px);
}
.lp-hero--centred .lp-pitch{text-align:center}
.lp-hero--centred .lp-pitch h1,
.lp-hero--centred .lp-pitch .lp-subheading,
.lp-hero--centred .lp-pitch .lp-sub{max-width:none;margin-left:auto;margin-right:auto}
/*
 * Bigger than the eBook's headline, and wider before it wraps.
 *
 * The eBook hero shares its row with the book, so its type is sized to a
 * column. This one owns the whole stage above a single button, and at the
 * eBook's size it read as a caption for a form rather than as the name of the
 * show. Wider measure for the same reason: 20ch broke "Conversations from the
 * hiring desk" across three lines, and a three-line title at this size is a
 * wall.
 */
.lp-hero--centred .lp-pitch h1{
  font-size:var(--fs-h1,clamp(2.6rem,5.4vw,4.4rem));
  letter-spacing:-.022em;max-width:26ch;margin-bottom:22px;
}
.lp-hero--centred .lp-pitch .lp-sub{max-width:52ch;font-size:1.06rem}
.lp-hero--centred .lp-pitch .lp-subheading{
  max-width:38ch;font-size:clamp(1.15rem,2vw,1.4rem);line-height:1.4;
  margin-top:-8px;margin-bottom:18px;color:rgba(255,255,255,.82)
}

/*
 * The ask is one button, so it is sized as the page's single action rather
 * than as a form's submit — but not full width: a button as wide as the
 * paragraph above it stops reading as a button.
 */
.lp-hero--centred .lp-gate-open{
  margin:34px auto 0;min-width:min(320px,100%);justify-content:center;
}
.lp-hero--centred .lp-form-note{margin-top:14px}

/* The form stays left-aligned inside the centred column: labels, inputs and
   error text are read line by line, and centred form rows are harder to scan
   than the symmetry is worth. Only the block itself is centred. */
.lp-hero--centred .lead{text-align:left;margin-left:auto;margin-right:auto;max-width:520px}
.lp-hero--centred .lead h2,
.lp-hero--centred .lp-form-note{text-align:center}
.lp-hero--centred .lead .btn-primary{width:100%;justify-content:center}

@media(max-width:900px){
  .lp-hero--centred .lp-hero-inner{padding-top:110px}
}