/* THL Theme: lead-magnet signup page (page-bond.php, /bond).
   Ported from lead-magnets/bonding/mockups/bond-signup.html, 9 Aug 2026.

   Loaded AFTER newsletter.css, which supplies the .thl-nl dark MailerLite skin
   (fields, submit button, loading spinner, reCAPTCHA sizing) that the newsletter
   form already uses. Nothing in newsletter.css is overridden except the three
   page-local rules marked below, so the homepage band and /newsletter cannot be
   affected by anything in this file.

   This page renders NO price card and NO rail, so it does not load home.css.
   Everything here is `bond-` prefixed apart from .kicker, which is local to this
   template's markup. */

/* ---- Band 1: the fold ---------------------------------------------------- */
.bond-hero {
  position: relative; overflow: hidden;
  padding: 64px 48px 76px;
  background: linear-gradient(180deg, #16202e 0%, var(--bg) 82%);
  border-bottom: 1px solid var(--line);
}
/* House radial blue glow, as used behind the membership and pathway bands. */
.bond-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 55% 100% at 22% 8%, rgba(122,175,201,0.11) 0%, transparent 60%);
}
/* The right column is capped rather than fluid so the headline, the lede and the
   card share one right edge. Left fluid, the H1 ran 144px past the card. */
.bond-hero-inner {
  position: relative; z-index: 1;
  max-width: 1000px; margin: 0 auto;
  display: grid; grid-template-columns: 372px minmax(0, 1fr); gap: 60px; align-items: start;
}

/* The cover PNG carries rounded corners on transparency, so the lift is a
   drop-shadow filter; a box-shadow would draw the square bounding box. */
.bond-cover { position: relative; padding-top: 6px; }
.bond-cover img {
  width: 100%; height: auto;
  filter: drop-shadow(0 18px 34px rgba(0,0,0,0.5)) drop-shadow(0 40px 80px rgba(0,0,0,0.45));
}
.bond-cover-cap {
  margin-top: 22px; text-align: center;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t-soft);
}

/* min-width:0 on both, or the reCAPTCHA's rigid 304px pushes the grid column
   wider than its track and the card overhangs the page gutter. */
.bond-copy { padding-top: 4px; min-width: 0; }

/* No leading hairline on the kicker. Taylor, 9 Aug 2026: the little dash before
   a kicker "is a classic sign of AI generated content". */
.kicker {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--blue-bright); margin-bottom: 16px;
}
.bond-copy h1 {
  font-size: clamp(31px, 3.3vw, 43px); font-weight: 700;
  letter-spacing: -0.022em; line-height: 1.08; margin-bottom: 18px;
}
.bond-lede { font-size: 16px; color: var(--t-mid); line-height: 1.7; margin-bottom: 30px; }

/* ---- The form card ------------------------------------------------------- */
.bond-card {
  background: rgba(255,255,255,0.03); border: 1px solid var(--line);
  border-radius: 18px; padding: 28px 28px 24px; min-width: 0;
  box-shadow: var(--shadow-lift);
}
/* PAGE-LOCAL override 1 of 3. .thl-nl caps itself at 480px for the narrow
   newsletter band; here the card IS the page, so the fields use its full width. */
.bond-card .thl-nl { max-width: none; }
/* PAGE-LOCAL override 2 of 3. The card is left-set, so the success message is
   too (newsletter.css centres it via .ml-form-align-center). */
.bond-card .ml-form-successContent { text-align: left; }
/* PAGE-LOCAL override 3 of 3. newsletter.css centres the reCAPTCHA, which suits
   its narrow card. Here the fields and the button are full width, so a centred
   widget floats away from their left edge. Matches the approved mockup. */
.bond-card .ml-form-recaptcha { justify-content: flex-start; }

.bond-card .ml-form-embedContent { text-align: left; margin-bottom: 20px; }
.bond-card h2 { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 6px; }
.bond-card .bond-card-sub { font-size: 13.5px; color: var(--t-soft); line-height: 1.6; }
.bond-fine { font-size: 12px; color: var(--t-soft); line-height: 1.65; margin-top: 16px; }
.bond-fine a { color: var(--blue-bright); }
.bond-fine a:hover, .bond-fine a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

/* Success state: a tick plus the "check your spam folder" instruction, which is
   the whole reason for not redirecting to the homepage. */
.bond-card .ml-form-successBody { padding: 8px 2px 4px; }
.bond-done-tick {
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(127,207,155,0.12); border: 1px solid rgba(127,207,155,0.3);
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
}
.bond-done-tick svg { width: 22px; height: 22px; color: #7fcf9b; }
.bond-card .ml-form-successContent h3 { font-size: 20px; font-weight: 700; color: var(--t-strong); margin-bottom: 9px; letter-spacing: -0.012em; }
.bond-card .ml-form-successContent p { font-size: 14.5px; color: var(--t-mid); line-height: 1.7; margin: 0; }
.bond-card .ml-form-successContent p + p { margin-top: 11px; font-size: 13px; color: var(--t-soft); }

/* ---- Band 2: what is inside ---------------------------------------------- */
.bond-inside { padding: 66px 48px 78px; background: var(--bg-deep); }
/* Same 1000px inner as the hero, so both bands share one left edge. */
.bond-inside-inner { max-width: 1000px; margin: 0 auto; }
.bond-inside h2 { font-size: clamp(23px, 2.4vw, 31px); font-weight: 700; letter-spacing: -0.018em; margin-bottom: 34px; }

/* Five sections + the clips note = six cells, so the 2-column grid fills evenly.
   With five, the bottom-right sat empty and the row read broken. */
.bond-secs { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0 46px; }
.bond-secs li { display: flex; gap: 16px; padding: 17px 0; border-bottom: 1px solid var(--line); }
.bond-secs li:nth-last-child(-n+2) { border-bottom: 0; }
.bond-num {
  flex-shrink: 0; width: 27px; height: 27px; border-radius: 8px;
  background: rgba(122,175,201,0.12); border: 1px solid rgba(122,175,201,0.22);
  color: var(--blue-bright); font-size: 12.5px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.bond-num svg { width: 15px; height: 15px; }
.bond-secs h3 { font-size: 15px; font-weight: 700; color: var(--t-strong); margin-bottom: 3px; letter-spacing: -0.005em; }
.bond-secs p { font-size: 13.5px; color: var(--t-mid); line-height: 1.6; }
.bond-credits { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--t-soft); line-height: 1.7; }

/* ---- Breakpoints --------------------------------------------------------- */
@media (max-width: 1080px) {
  .bond-hero-inner { grid-template-columns: 300px minmax(0, 1fr); gap: 44px; }
}
@media (max-width: 900px) {
  .bond-hero { padding: 48px 32px 60px; }
  /* Cover drops BELOW the headline and form: on a phone the job is the form, and
     a 600px-tall image above it would push the fields off the screen.
     minmax(0,1fr), not 1fr, so the reCAPTCHA cannot widen the column. */
  .bond-hero-inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .bond-cover { order: 2; max-width: 288px; margin: 0 auto; }
  .bond-copy { order: 1; }
  .bond-inside { padding: 52px 32px 60px; }
  /* One column: only the true last item loses its rule. */
  .bond-secs { grid-template-columns: 1fr; gap: 0; }
  .bond-secs li:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
  .bond-secs li:last-child { border-bottom: 0; }
}
@media (max-width: 640px) {
  .bond-hero { padding: 40px 22px 52px; }
  .bond-inside { padding: 44px 22px 54px; }
  .bond-card { padding: 24px 20px 20px; border-radius: 16px; }
  .bond-lede { font-size: 15px; margin-bottom: 26px; }
}
/* newsletter.css scales the reCAPTCHA below 470px and again below 363px, and
   buys width back on .nl-card. This card needs the same second step. */
@media (max-width: 363px) {
  .bond-card { padding: 22px 16px 18px; }
}