/* Lead capture forms.
   Its own file because the homepage does not load theme.css — it carries an
   inline skin instead — so anything shared between the homepage, checkout and
   the rest has to live somewhere both actually fetch.

   Every token below carries its literal fallback. The homepage defines these
   in an inline :root and theme.css defines them for the rest — but the course
   template loads neither, so an unguarded var() resolved to nothing there and
   the panel rendered as a ghost: no background, no shadow, text floating over
   the page behind it. A fallback costs nothing and cannot be forgotten.
*/
/* The forms sit on two grounds — the navy email-fallback band and the light
   modal — so shared pieces inherit rather than hard-code a colour. */
/* Light-first, not navy-first.
   The email-fallback band is authored navy in the markup, but the pf2 skin
   remaps it to paper — so anything written for a dark ground here comes out
   white-on-white. Both surfaces this appears on (that band and the modal) are
   light, so these use the ink/muted/line tokens and the navy variant is gone. */
/* Doubled class, deliberately. The homepage resets every paragraph inside it
   with `.pf-fellowship :is(h1..h6, p, ul, ...) { margin:0 }`, which outranks a
   single class — so the note lost its top margin and sat against the button. */
.pf-lead-note.pf-lead-note{margin:22px auto 0;max-width:440px;font-size:12.5px;
  line-height:1.55;color:var(--pf2-muted, #4C5A7D);text-align:center;}
/* Why the address was refused, in words. A red border alone does not say. */
.pf-lead-bad.pf-lead-bad{margin:12px auto 0;max-width:440px;font-size:13px;line-height:1.5;
  color:var(--pf2-rose-strong, #A95365);text-align:center;}
.pf-lead-done__head{margin:0;font-size:16px;font-weight:700;color:var(--pf2-ink, #0B1430);}
.pf-lead-done__sub{margin:6px 0 0;font-size:13.5px;color:var(--pf2-muted, #4C5A7D);}
.pf-lead-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:14px;}
.pf-lead-chip{padding:8px 14px;border-radius:999px;border:1px solid var(--pf2-line, #DBE1F0);
  background:var(--pf2-card, #FFFFFF);color:var(--pf2-muted, #4C5A7D);font-family:inherit;font-size:13px;
  font-weight:600;cursor:pointer;transition:background .15s,border-color .15s,color .15s;}
.pf-lead-chip:hover{background:rgba(255,197,61,.16);border-color:var(--pf2-yellow, #FFC53D);color:var(--pf2-yellow-txt, #8F6B00);}
input[aria-invalid="true"]{border-color:var(--pf2-rose-strong, #A95365)!important;}

/* The one modal, and only on pricing intent. Light card on a dimmed page —
   the ground the rest of the site uses, so it reads as part of it. */
.pf-lead-modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px;
  background:rgba(11,20,48,.55);backdrop-filter:blur(3px);animation:pfLeadIn .18s ease both;}
.pf-lead-modal__card{position:relative;width:min(100%,440px);padding:32px 30px;border-radius:20px;
  background:var(--pf2-card, #FFFFFF);box-shadow:var(--pf2-sh2, 0 2px 4px rgba(11,20,48,.05),0 18px 44px rgba(11,20,48,.12),0 48px 90px rgba(11,20,48,.12));text-align:center;}
.pf-lead-modal__card h2{margin:0 0 10px;font-size:24px;font-weight:600;letter-spacing:-.02em;color:var(--pf2-ink, #0B1430);}
.pf-lead-modal__card p{margin:0 0 20px;font-size:15px;line-height:1.6;color:var(--pf2-muted, #4C5A7D);}
.pf-lead-modal__x{position:absolute;top:12px;right:14px;width:32px;height:32px;border:0;border-radius:50%;
  background:transparent;color:var(--pf2-muted, #4C5A7D);font-size:22px;line-height:1;cursor:pointer;}
.pf-lead-modal__x:hover{background:var(--pf2-paper2, #ECEFF7);color:var(--pf2-ink, #0B1430);}
.pf-lead-form{display:flex;flex-wrap:wrap;gap:10px;}
.pf-lead-form input{flex:1 1 200px;min-width:0;padding:13px 15px;border-radius:12px;
  border:1px solid var(--pf2-line, #DBE1F0);background:var(--pf2-paper, #F6F7FB);color:var(--pf2-ink, #0B1430);
  font-family:inherit;font-size:14.5px;outline:none;}
.pf-lead-form input:focus{border-color:var(--pf2-yellow, #FFC53D);}
.pf-lead-form button{flex:0 0 auto;padding:13px 20px;border:0;border-radius:12px;
  background:var(--pf2-yellow, #FFC53D);color:var(--pf2-yellow-ink, #221604);font-family:inherit;font-size:14.5px;
  font-weight:700;cursor:pointer;}
.pf-lead-form button:hover{background:var(--pf2-yellow-deep, #EFAE18);}
.pf-lead-form button:disabled{opacity:.6;cursor:default;}
/* The panel form. One thing per line, each the full width of the card: a
   heading to read, a field to fill, a button to press. Side-by-side input and
   button is a newsletter signup; this is a step on the way somewhere.

   border-box throughout: these are the only full-width boxes in the file, and
   with the default content-box the padding is added to the 100% and the card
   grows wider than the phone it is sitting on. */
.pf-lead-modal__card--stack,
.pf-lead-form--stack input,
.pf-lead-form--stack button{box-sizing:border-box;}
.pf-lead-form--stack{display:block;}
.pf-lead-form--stack input,
.pf-lead-form--stack select{display:block;width:100%;margin:0 0 12px;padding:15px 16px;font-size:15px;}
/* The team-size select, matched to the inputs beside it. `appearance:none` plus
   a drawn caret, because a native select on macOS is a different height and a
   different corner radius from every other control in the card. */
.pf-lead-form--stack select{box-sizing:border-box;appearance:none;-webkit-appearance:none;
  border:1px solid var(--pf2-line, #DBE1F0);border-radius:12px;
  background-color:var(--pf2-paper, #F6F7FB);color:var(--pf2-ink, #0B1430);
  font-family:inherit;outline:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%234C5A7D' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;padding-right:42px;}
.pf-lead-form--stack select:focus{border-color:var(--pf2-yellow, #FFC53D);}
/* Nothing chosen yet reads as placeholder text, like the boxes above it. */
.pf-lead-form--stack select:has(option[value=""]:checked){color:var(--pf2-muted, #4C5A7D);}
.pf-lead-form--stack button{display:block;width:100%;padding:15px 20px;font-size:15px;}
.pf-lead-modal__card--stack h2{margin-bottom:8px;line-height:1.25;}
.pf-lead-modal__card--stack p{margin-bottom:22px;}
/* No blurb under the heading — the field would otherwise sit against it. */
.pf-lead-modal__card--stack h2 + .pf-lead-form--stack{margin-top:24px;}

/* These two sit below everything and must beat `.pf-lead-modal__card p`, which
   is more specific than a bare class and was flattening the note's top margin
   to zero — the line ended up touching the button, and carried 20px of dead
   space underneath it instead. */
.pf-lead-modal__card .pf-lead-note,
.pf-lead-modal__card .pf-lead-bad{margin-bottom:0;}
/* The hero's highlight, reused so the two read as the same voice: a band of
   yellow struck through the lower third of the line rather than a filled
   box. nowrap keeps the phrase whole — a highlight broken across two lines
   looks like a rendering fault, not emphasis. */
.pf-lead-hl{white-space:nowrap;color:var(--pf2-yellow-txt, #8F6B00);
  background-image:linear-gradient(transparent 64%, var(--pf2-yellow, #FFC53D) 64%, var(--pf2-yellow, #FFC53D) 92%, transparent 92%);}
@keyframes pfLeadIn{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.pf-lead-modal{animation:none;}}