/* ==========================================================================
   Opt-in page styles, shared by all five layout variants.

   Compiled from MediaPitchLandingPage.dc.html and MediaPitchFormFields.dc.html.
   Variant-specific colour (cream vs steel form card, panel vs no panel) stays
   inline in each variant's HTML, because that is the only thing that differs.

   THE FORM IS THE HAND-BUILT ONE. ROUND 36, 3 August 2026. The HubSpot embed
   served traffic for less than a day: it failed intermittently in the
   Instagram in-app browser, always in Esther's desktop Safari, and its country
   picker corrupted autofilled phone numbers. The hand-built form passed every
   live test (Chrome, iPhone Safari, Instagram in-app). It posts to /api/optin,
   our own Pages Function, which forwards to HubSpot with the visitor's hutk
   cookie so source attribution keeps working.

   The ~280 lines of .hsfc-* embed styling that used to live here died with the
   embed. If they are ever needed again they are in git history, this file,
   before 3 August 2026 afternoon.

   Field styling matches MediaPitchFormFields.dc.html for the light-on-card
   treatment. Vertical rhythm is the 11px settled in ROUND 6; do not go below
   11px to chase the above-the-fold target, say so instead. The submit button
   is #010D1E per ROUND 27.
   ========================================================================== */

/* ---------- Design system Button, compiled from _ds_bundle.js ---------- */

.bti-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--duration-base) var(--ease-standard);
  text-decoration: none;
  font-size: 18px;      /* size lg */
  padding: 18px 40px;   /* size lg */
}
/* ROUND 27, Esther's exact choice: dark CTAs use the footer's #010D1E, which is
   --navy-950. Hover stays one step lighter, so it moves to --navy-900. */
.bti-btn-dark    { background: var(--navy-950);  color: var(--white); }
.bti-btn-primary { background: var(--cream-100); color: var(--navy-900); }
.bti-btn-dark:hover    { background: var(--navy-900); color: var(--white); }
.bti-btn-primary:hover { background: #fffaf0; color: var(--navy-900); }

/* ---------- Fine print under the submit button ---------- */

[data-m="consent"] a {
  color: var(--gray-600);
  text-decoration: underline;
}
[data-m="consent"] a:hover { color: var(--gold-600); }

/* ==========================================================================
   THE FORM. Hand-built, static in every page, wired by /assets/js/optin.js.
   ========================================================================== */

.bti-form form {
  display: flex;
  flex-direction: column;
  gap: 11px;              /* ROUND 6: the design's rhythm, everywhere */
  margin: 0;
}

.bti-form-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ROUND 41. The flex sizing below belongs ONLY to the two name fields inside
   the row, where the 140px basis means WIDTH. Email and Phone sit directly in
   the column-direction form, where the same declaration silently turned into
   a 140px HEIGHT and left ~68px of invisible empty space under each input on
   iPhones. That was Esther's "4x gap". Scoped, the gap is the flex gap alone. */
.bti-form-fieldwrap {
  display: block;
}
.bti-form-row .bti-form-fieldwrap {
  flex: 1 1 140px;
  min-width: 0;
}

.bti-form-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text-primary);
}

/* The required marker. Added 17 August 2026 at Esther's request. All four
   fields are required, so all four carry it.

   Gold, not red. The earlier "no red asterisks on labels" note came from
   stripping HubSpot's default styling off the embed, and red is the part she
   was rejecting. Gold is the site's own accent.

   aria-hidden in the markup on purpose: the inputs already carry `required`,
   so a screen reader announces the field as required without also reading the
   asterisk out as the word "star". It is a visual marker only.

   margin-left is a hair of space so it does not collide with the label's last
   letter. Nothing here changes the label's height, so the ROUND 42 spacing
   rhythm between the fields and the button is untouched. */
.bti-form-req {
  margin-left: 2px;
  color: var(--gold-600);
  font-weight: 700;
}

/* ROUND 42, Esther's rule: the button is spaced as if it had a label. The
   field rows read as input-bottom to next-input-top = 11px gap + the label
   block (13px text at the site's 1.45 line height, plus its 8px gap below).
   The button has no label, so it gets that label block as margin, above AND
   mirrored below onto the fine print, keeping one visual rhythm for the
   whole group. If the label's size or margins ever change, change this
   value with them. */
:root { --bti-label-block: calc(13px * 1.45 + 8px); }
.bti-form-submit { margin-top: var(--bti-label-block); }
[data-m="fineprint"] { margin-top: calc(11px + var(--bti-label-block)); }

.bti-form-input {
  width: 100%;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  font-size: 16px; /* 16px so iOS does not zoom on focus */
  font-family: var(--font-sans);
  box-sizing: border-box;
  outline: none;
  background: var(--white);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  transition: border-color 0.24s, box-shadow 0.24s;
}
.bti-form-input:focus {
  border-color: var(--gold-600);
  box-shadow: 0 0 0 3px rgba(201, 162, 74, 0.25);
}
.bti-form-input.is-bad {
  border-color: #a33a2a;
}

/* Zero footprint while empty, per ROUND 33. display:none takes no space,
   earns no flex gap, and the margin only exists once the error is shown. */
.bti-form-error {
  display: none;
  font-size: 12.5px;
  line-height: 1.4;
  color: #a33a2a;
  margin: 6px 0 0;
}
.bti-form-error.is-on {
  display: block;
}

/* September 2, 2026: the green "Phone number is valid." line under the phone
   field, the way Closers.io's own opt-in page confirms a number as it is
   typed. Same zero footprint rule as the error above: nothing is rendered
   until there is something to say, so the ROUND 42 spacing rhythm holds. */
.bti-form-ok {
  display: none;
  font-size: 12.5px;
  line-height: 1.4;
  color: #2e7d4f;
  margin: 6px 0 0;
}
.bti-form-ok.is-on {
  display: block;
}

/* The honeypot. Off-viewport rather than display:none, because the cruder
   hiding methods are exactly what bots check for. Absolutely positioned, so
   it takes no space and earns no flex gap. Real visitors never see it,
   keyboards skip it, screen readers skip it. */
.bti-form-hp {
  position: absolute;
  left: -9999px;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.bti-form-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: var(--navy-950); /* ROUND 27: #010D1E */
  color: var(--white);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.02em;
  padding: 18px 40px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.2s;
}
.bti-form-submit:hover {
  background: var(--navy-900);
}
.bti-form-submit:disabled {
  opacity: 0.6;
  cursor: default;
}

/* The 3.5 second reassurance line, spinner included. Designed copy.
   display:none until switched on: zero footprint, per ROUND 33. */
.bti-form-slow {
  display: none;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--gray-400);
  margin: 2px 0 0;
}
.bti-form-slow.is-on {
  display: flex;
}
.bti-form-spinner {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--border-subtle);
  border-top-color: var(--navy-900);
  animation: btiFormSpin 0.7s linear infinite;
}
@keyframes btiFormSpin {
  to { transform: rotate(360deg); }
}

/* The failure notice. Designed colours; the address is support@, which is
   the settled choice for anything shown on a technical failure. */
.bti-form-fail {
  display: none;
  gap: 10px;
  align-items: flex-start;
  background: #fdf1ee;
  border: 1px solid #e5c3ba;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.5;
  color: #8c3122;
}
.bti-form-fail.is-on {
  display: flex;
}
.bti-form-fail a {
  color: #8c3122;
  text-decoration: underline;
}

.bti-form-noscript {
  margin: 11px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--gray-600, #3a3a3a);
}

@media (prefers-reduced-motion: reduce) {
  .bti-form-spinner { animation: none; }
}

/* ==========================================================================
   Layout, compiled verbatim from MediaPitchLandingPage.dc.html
   ========================================================================== */

[data-m="support-br"] { display: none; }

/* ----- Tablet and below: hero stacks, form ahead of the preview ----- */
@media (max-width:1023px){
  [data-m="herorow"]{flex-direction:column !important;align-items:stretch !important;gap:0 !important;margin-top:22px !important}
  [data-m="leftcol"],[data-m="panel"]{display:contents !important}
  [data-m="copy"]{order:1 !important;background:var(--panel-bg,transparent);border-radius:18px;padding:var(--panel-pad,0);margin-bottom:22px}
  [data-m="formcard"]{order:2 !important;flex:0 0 auto !important;max-width:none !important;width:100% !important;height:auto !important}
  [data-m="preview"]{order:3 !important;margin-top:30px}
  [data-m="copy"],[data-m="preview"],[data-m="formcard"]{min-width:0 !important;max-width:100% !important;align-self:stretch !important}
  [data-m="support"]{order:4 !important;margin-top:30px !important}
}
/* ----- Tablet only: keep the stacked column readable, not full bleed ----- */
@media (min-width:768px) and (max-width:1023px){
  [data-m="copy"],[data-m="formcard"],[data-m="preview"]{max-width:620px !important;margin-left:auto !important;margin-right:auto !important}
  [data-m="copy"]{padding:26px 28px !important}
  [data-m="tst-grid"]{max-width:640px !important}
}
/* ----- Phone ----- */
@media (max-width:767px){
  [data-m="hero"]{padding:14px 18px 36px !important}
  [data-m="hero"] img[alt="Born To Influence"]{width:54px !important}
  [data-m="hero"] > div:first-child{gap:10px !important}
  /* lead sentence above the form, the gold one-liner below it, then the mockup */
  [data-m="copy"]{display:contents !important}
  [data-m="copy"] p:nth-of-type(1){order:1 !important;background:var(--panel-bg,transparent);border-radius:18px;padding:var(--panel-pad,0);margin-bottom:18px !important}
  [data-m="copy"] p:nth-of-type(2){order:3 !important;color:var(--gold-300) !important;margin:26px 0 0 !important;text-align:center}
  [data-m="preview"]{order:4 !important}
  [data-m="support"]{order:5 !important}
  [data-m="h1"]{font-size:27px !important;line-height:1.15 !important}
  [data-m="leadp"],[data-m="copy"] p{font-size:15.5px !important;line-height:1.5 !important}
  [data-m="formwrap"]{margin-top:22px !important}
  [data-m="formcard"]{padding:18px 16px 18px !important;border-radius:18px !important}
  /* ROUND 6 stands for the hand-built form too: 11px rhythm, not compressed.
     The old 9px phone rule that lived here was written for a pre-ROUND 6 form
     and was removed in the ROUND 36 swap rather than inherited by accident. */
  /* the page headline already says what this is, so the form heading goes */
  [data-m="formcard"] [data-m="form-h"]{display:none}
  /* iOS zoom guard: inputs never drop below 16px. Padding tightens instead. */
  .bti-form-input{padding-top:12px !important;padding-bottom:12px !important}
  [data-m="consent"]{text-align:left !important;font-size:11.5px !important;line-height:1.55 !important}
  [data-m="preview"]{margin-top:38px;zoom:0.80}  /* 38 x 0.80 = 30px, matching the gap below */
  [data-m="copy"] p:nth-of-type(1),[data-m="copy"] p:nth-of-type(2),[data-m="preview"],[data-m="formcard"]{min-width:0 !important;max-width:100% !important;align-self:stretch !important}
  [data-m="support"]{font-size:14px !important;margin-top:30px !important}
  [data-m="support-br"]{display:inline}
  [data-m="sec-logos"]{padding:29px 14px 34px !important}
  [data-m="logolabel"]{font-size:10px !important;letter-spacing:0.04em !important;text-align:center;line-height:1.5;white-space:nowrap}
  /* one continuous strip so no row is left with a single orphan logo */
  [data-m="logostrip"]{flex-direction:row !important;flex-wrap:wrap !important;justify-content:center !important;gap:18px 9px !important}
  [data-m="logostrip"] img{height:calc(var(--lh) * 0.63) !important;width:auto !important}
  [data-m="logolabel"]{flex:0 0 100%;margin-bottom:9px !important}
  [data-m="logorow"]{display:contents !important}
  [data-m="sec-proof"]{padding:34px 20px !important}
  [data-m="proof"]{font-size:20px !important;line-height:1.45 !important}
  [data-m="proof"] br{display:none}
  [data-m="sec-tst"]{padding:20px 18px !important}
  [data-m="tst-grid"]{gap:18px !important}
  [data-m="tst-col"]{gap:18px !important}
  [data-m="tst"]{padding:22px 20px !important;border-radius:16px !important;gap:16px !important}
  [data-m="quote"]{font-size:16px !important;line-height:1.68 !important;text-align:left !important}
  [data-m="tst-img"]{width:52px !important;height:52px !important}
  [data-m="tst-cap"]{gap:13px !important}
  [data-m="tst-meta"]{font-size:13px !important}
  [data-m="sec-bio"]{padding:44px 20px !important}
  [data-m="bio-img"]{width:124px !important;height:124px !important}
  [data-m="bio-p"]{font-size:16px !important;line-height:1.7 !important;flex-basis:100% !important}
  [data-m="midcta"]{padding:23px 18px !important}
  /* The `> div { gap: 23px }` rule that sat here is gone with the disclaimer
     paragraph. The bar now holds the button alone, so its equal top and bottom
     padding is what centres it, and a gap would have nothing to act on. */
  [data-m="midcta"] [data-m="formcard"]{padding:22px 18px 20px !important}
  [data-m="midcta"] [data-m="form-h"]{display:block !important;font-size:20px !important}
  /* ctabtn is still used by the bottom CTA under the bio, so this stays. The
     mid-CTA no longer uses that wrapper, hence the extra selector below so its
     button still goes full width on phones. */
  [data-m="ctabtn"]{margin-top:32px !important}
  [data-m="ctabtn"] a,[data-m="ctabtn"] button,
  [data-m="midcta"] > div > a{width:100% !important;justify-content:center !important;text-align:center}
  [data-m="ctasub"]{margin-top:14px !important}
  [data-m="legal"] a{display:inline-flex;align-items:center;min-height:44px;padding:0 6px}
  [data-m="legal"]{gap:4px !important}
  [data-m="form-h"]{font-size:21px !important;margin-bottom:14px !important}
}
/* ----- Small phones ----- */
@media (max-width:360px){
  [data-m="h1"]{font-size:26px !important}
  [data-m="logostrip"] img{height:calc(var(--lh) * 0.58) !important}
  [data-m="logolabel"]{font-size:9px !important;letter-spacing:0.02em !important}
  [data-m="preview"]{zoom:0.73;margin-top:41px}
}
/* Below 340px two name fields genuinely are too narrow side by side. The
   139px flex basis in .bti-form-fieldwrap wraps them naturally there; this
   just tightens the wrapped gap to the 11px rhythm. */
@media (max-width:339px){
  .bti-form-row{gap:11px}
}