/* ============================================================
   FREE VERSION (lead magnet) — page-specific sections
   Loads AFTER theme.css. Isolated from other pages.
   ============================================================ */

/* the hero sits a little lower than the sitewide .page-hero default */
.lead-magnet { padding-top: clamp(152px, 19vh, 212px); }

/* Top-align: the copy must start right after the section padding — centering
   against the ~955px book pushed the headline ~75px down and read as a "weird
   huge gap" (Ceejay, 2026-07-10). The ref top-aligns book and headline too. */
.lm { align-items: start; }

/* headline sized for the half-width column (reference uses a moderate size,
   not the full-bleed hero size) so it settles into ~3 lines */
.lm__copy h1 {
  font-size: clamp(2.45rem, 1.05rem + 3.35vw, 4.15rem);
  line-height: 1.03;
}
/* description reads as support copy under the headline, not a second heading */
.lm__copy .lead {
  font-size: clamp(.95rem, .86rem + .3vw, 1.08rem);
  line-height: 1.6;
}
.lm__copy .eyebrow {
  transition: transform .24s var(--ease), border-color .24s var(--ease), color .24s var(--ease);
}
.lm__copy .eyebrow:hover {
  transform: translateY(-2px);
  border-color: rgba(218,255,0,.42);
  color: var(--ink);
}

/* ---------- Capture form (left column) ----------
   The hero band is light, so every control is inked for a white background
   rather than the dark-band defaults in theme.css. */
.capture { margin-top: 26px; }
.capture .field { margin-bottom: 16px; }
/* :not(.field__error) — same rule as theme.css: never repaint the error span. */
.capture .field > span:not(.field__error), .capture .field legend { color: var(--ink-invert); font-size: .9rem; }
.capture .field input,
.capture .field textarea {
  background: #fff; border-color: var(--line-invert); color: var(--ink-invert);
  transition: transform .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.capture .field input:hover,
.capture .field textarea:hover {
  transform: translateY(-2px);
  border-color: rgba(0,0,0,.3);
  box-shadow: 0 8px 18px rgba(0,0,0,.07);
}
.capture .field input:focus,
.capture .field textarea:focus {
  transform: translateY(-2px);
  border-color: transparent;
  box-shadow: 0 0 0 3px rgba(255,140,20,.35), 0 10px 22px rgba(0,0,0,.1);
}
.capture .field input::placeholder { color: #9a9a9a; }
.capture__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* Bryan's chip question (2026-07-27). Chips are a touch tighter here than on
   the enquiry form — this column is half-width, so 7 options wrap a lot. */
.capture__group .chips { gap: 8px; }
.capture__group .chip span { padding: .5em .95em; font-size: .84rem; }
.consent {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; margin: 6px 0 14px; font-size: .82rem; color: var(--ink-invert-dim); line-height: 1.5;
  transition: color .2s var(--ease);
}
/* forms.js appends the validation error INTO this flex label — without this it
   renders as a squished third column beside the text. Full row, below. */
.consent .field__error { flex-basis: 100%; margin-top: 0; }
.consent > span { flex: 1; min-width: 0; }
.consent:hover { color: var(--ink-invert); }
.consent input {
  margin-top: 3px; flex: 0 0 auto; width: 18px; height: 18px; accent-color: var(--orange);
  transition: transform .2s var(--ease), filter .2s var(--ease);
}
.consent:hover input,
.consent input:focus-visible {
  transform: scale(1.08);
  filter: drop-shadow(0 0 8px rgba(255,140,20,.32));
}
.capture__bonus {
  font-size: .85rem; color: var(--ink-dim); margin: 0 0 18px;
  transition: color .22s var(--ease), text-shadow .22s var(--ease);
}
.capture__bonus:hover {
  color: var(--lime);
  text-shadow: 0 0 14px rgba(218,255,0,.24);
}
/* stays lime on the light band (theme.css turns .btn--primary orange there) —
   the download CTA is the one lime element the reference keeps */
.lead-magnet .capture__submit {
  width: 100%;
  background: var(--lime); color: #1a1a00;
  transition: transform .24s var(--ease), background .24s var(--ease), color .24s var(--ease), box-shadow .24s var(--ease);
}
.lead-magnet .capture__submit:hover {
  transform: translateY(-3px);
  background: #e6ff3a;
  box-shadow: 0 16px 34px rgba(0,0,0,.14);
}

/* ---------- Playbook cover (right column) ----------
   Bryan's render already bakes in the tilt, spine and drop shadow, so this is
   a plain <img> — no CSS 3D. The PNG is transparent; the white band shows through. */
.lm__cover { display: flex; justify-content: center; align-items: center; }
.lm__img {
  /* height:auto + the intrinsic width/height attrs keep the ratio exact.
     The cropped render has no transparent margins, so this IS the visual book
     width — 600px read as oversized (Ceejay, 2026-07-10). Retina ceiling of
     the 1200px source is 600px, so there's still headroom if it grows. */
  /* fluid: 380px on desktop, scales with the viewport below ~1400px so the
     book never fills its whole column on tablets */
  width: clamp(250px, 27vw, 380px);
  max-width: 100%;
  height: auto;
  /* resting tilt, per the FounderOS reference */
  transform: rotate(6deg);
  transition: transform .45s var(--ease);
}
/* hover: lift + a gentle swing to the left — just past upright, nothing like
   the -4deg flop that looked weird (Ceejay, 2026-07-10) */
.lm__img:hover { transform: rotate(-0.1deg) translateY(-10px); }

@media (max-width: 760px) {
  .lm__cover { margin-top: 8px; }
  /* gentler tilt at phone size — a rotated 600px book would overflow, a 300px one won't */
  .lm__img { width: min(300px, 74%); transform: rotate(4deg); }
  .lm__img:hover { transform: rotate(4deg); }
  .capture .field input:hover,
  .capture .field input:focus,
  .capture .field textarea:hover,
  .capture .field textarea:focus,
  .lead-magnet .capture__submit:hover {
    transform: none;
  }
}
@media (max-width: 520px) { .capture__row { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .lm__copy .eyebrow, .capture .field input, .capture .field textarea,
  .consent, .consent input,
  .capture__bonus, .lead-magnet .capture__submit, .lm__img {
    transition: none;
  }
  .lm__copy .eyebrow:hover, .capture .field input:hover,
  .capture .field input:focus,
  .capture .field textarea:hover, .capture .field textarea:focus,
  .consent:hover input,
  .consent input:focus-visible, .lead-magnet .capture__submit:hover {
    transform: none;
  }
  /* keep the resting tilt, just don't animate anywhere on hover */
  .lm__img:hover { transform: rotate(6deg); }
}