/* ===========================================================================
   The Pipeline Fixer — leak-check stylesheet
   Extracted from index.html on 18 Aug 2026 for the page split.

   Covers the Netlify form styling, the confirmation ("thanks") panel, and
   the leak-check quiz itself: gauge, question panels, result, the optional
   write-up capture and the result CTA stack.

   Loaded by /leak-check/ only. The homepage still carries its own copy of
   these rules inline — see the migration note at the top of site.css. The
   quiz JAVASCRIPT is genuinely shared (assets/leak-check.js, used by both);
   only the CSS is still duplicated.

   ONE THING THIS FILE DOES NOT CARRY: the overlay and modal chrome
   (#fmp-overlay as a fixed backdrop, #fmp-modal as a centred card). On
   /leak-check/ the quiz IS the page rather than a dialog over it, so that
   page overrides those two selectors in its own <style> block. The rest of
   the quiz — every panel, button and animation below — is identical in
   both places, which is the point of extracting it.
   =========================================================================== */


/* ---------- Netlify form styling + confirmation panel ---------- */


/* Native Netlify Forms styling — shared by the contact form and the
   quiz's details step. Netlify only needs the raw <form data-netlify>
   markup at deploy time; everything else here is just visual. */
.nf-form-title{
  font-family:var(--display);font-weight:600;font-size:19px;
  line-height:1.25;letter-spacing:-0.01em;color:var(--ink);
  margin:0 0 8px;
}
.nf-form-desc{
  font-family:var(--body);font-size:14px;line-height:1.55;
  color:var(--slate);margin:0 0 22px;font-weight:400;
}
.nf-field{margin-bottom:14px}
.nf-field label{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;
  text-transform:uppercase;font-weight:600;color:var(--slate);
  margin-bottom:6px;display:block;
}
.nf-field input, .nf-field textarea{
  width:100%;max-width:100%;padding:12px 14px;
  border:1px solid var(--line);border-radius:8px;
  font-family:var(--body);font-size:16px;
  background:#fff;color:var(--ink);
}
/* 16px inputs, deliberately: anything smaller makes iOS Safari zoom on focus */
.nf-field textarea{resize:vertical;min-height:100px}
.nf-field input:focus, .nf-field textarea:focus{
  outline:2px solid var(--accent);outline-offset:1px;
}
.nf-submit{width:100%;justify-content:center;border:none;cursor:pointer}
.nf-error{
  margin:0 0 14px;font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;color:var(--rust);
}
/* honeypot field — present for bots, hidden for people; Netlify's spam filter */
.nf-honeypot{position:absolute;left:-9999px;top:-9999px}
/* ============================================================
   .fmp-thanks — the confirmation state, shared by the contact
   form (#fmp-contact-thanks) and the diagnostic modal's write-up
   capture (#fmp-writeup-done). One component, two instances: the
   two confirmations used to be hand-rolled separately and read as
   two different products.

   It replaces the form rather than sitting under it, so nothing on
   screen is still addressed to someone who hasn't submitted yet.
   Animation is transforms and opacity only — no layout properties,
   no JS animation loop. Revealing it flips [hidden], and going from
   display:none to visible is what starts the animations.
   ============================================================ */
.fmp-thanks[hidden]{display:none}
.fmp-thanks-mark{
  display:block;width:52px;height:52px;margin:0 0 18px;
  animation:fmp-thanks-pop .45s cubic-bezier(.2,.8,.3,1) both;
}
.fmp-thanks-mark svg{
  width:100%;height:100%;display:block;fill:none;stroke:var(--accent);
  stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
}
/* dasharray ≈ path length, so the stroke draws itself in */
.fmp-thanks-ring{
  stroke-dasharray:145;stroke-dashoffset:145;opacity:.4;
  animation:fmp-thanks-draw .6s ease-out .05s forwards;
}
.fmp-thanks-tick{
  stroke-dasharray:38;stroke-dashoffset:38;
  animation:fmp-thanks-draw .6s cubic-bezier(.65,0,.35,1) .28s forwards;
}
.fmp-thanks-title{
  font-family:var(--display);font-weight:600;font-size:21px;line-height:1.25;
  letter-spacing:-.02em;color:var(--ink);margin:0 0 10px;
  animation:fmp-thanks-rise .5s ease-out .15s both;
}
/* focus lands here on success, so it needs a ring for keyboard users
   but not a permanent outline for everyone else */
.fmp-thanks-title:focus{outline:none}
.fmp-thanks-title:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
.fmp-thanks-body{
  font-family:var(--body);font-size:15px;line-height:1.65;color:var(--slate);
  margin:0 0 20px;
  animation:fmp-thanks-rise .5s ease-out .3s both;
}
/* three dots on a hairline, filling left to right — the pipeline motif
   from the hero, not generic confetti. Runs three cycles, then rests. */
.fmp-thanks-pipe{
  position:relative;display:flex;justify-content:space-between;align-items:center;
  max-width:180px;height:10px;margin:0 0 20px;
  animation:fmp-thanks-rise .5s ease-out .4s both;
}
.fmp-thanks-pipe::before{
  content:"";position:absolute;left:5px;right:5px;top:50%;
  height:1px;background:var(--line);
}
.fmp-thanks-pipe i{
  position:relative;width:10px;height:10px;border-radius:50%;
  background:var(--accent);opacity:.22;
  animation:fmp-thanks-flow 2s ease-in-out .6s 3;
}
.fmp-thanks-pipe i:nth-child(2){animation-delay:.85s}
.fmp-thanks-pipe i:nth-child(3){animation-delay:1.1s}
.fmp-thanks-alt{
  font-family:var(--body);font-size:14.5px;line-height:1.6;color:var(--ink);
  margin:0 0 14px;
  animation:fmp-thanks-rise .5s ease-out .5s both;
}
.fmp-thanks-alt a{color:var(--accent);font-weight:600}
.fmp-thanks-fine{
  margin:0;font-family:var(--mono);font-size:11.5px;line-height:1.7;color:var(--slate);
  animation:fmp-thanks-rise .5s ease-out .6s both;
}
/* Action stack inside a .fmp-thanks panel (the contact card). It reuses
   .fmp-result-cta wholesale — same buttons, same order, same weights as
   the diagnostic's — and only picks up the confirmation's stagger, so the
   three actions arrive after the tick and the copy rather than sitting
   there fully formed while the text above them is still animating in.
   Trailing margin is dropped: this is the last thing in the card. */
.fmp-thanks-cta{margin:24px 0 0}
.fmp-thanks-cta > *{animation:fmp-thanks-rise .5s ease-out both}
.fmp-thanks-cta > *:nth-child(1){animation-delay:.72s}
.fmp-thanks-cta > *:nth-child(2){animation-delay:.80s}
.fmp-thanks-cta > *:nth-child(3){animation-delay:.88s}
@keyframes fmp-thanks-pop{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}
@keyframes fmp-thanks-draw{to{stroke-dashoffset:0}}
@keyframes fmp-thanks-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes fmp-thanks-flow{0%,100%{opacity:.22;transform:scale(1)}35%{opacity:1;transform:scale(1.2)}}

/* The global reduce block below zeroes every animation, which is enough
   for the fade-ups (they fall back to their natural opacity:1). The
   stroke-dashoffset and dot opacity are static declarations though, so
   without this the tick would simply never appear. */
@media (prefers-reduced-motion:reduce){
  .fmp-thanks-ring,.fmp-thanks-tick{stroke-dashoffset:0}
  .fmp-thanks-pipe i{opacity:1}
}


/* ---------- the quiz: gauge, panels, options ---------- */

/* ============================================================
   PIPELINE DIAGNOSTIC — quiz modal opened from the hero's
   "Take the diagnostic" button. Same tokens/fonts as the rest of
   the page (no separate palette or typeface), so it reads as a
   feature of the site rather than a bolted-on third-party widget.
   ============================================================ */
#fmp-overlay{
  position:fixed;inset:0;z-index:200;
  background:rgba(23,24,26,.72);
  display:flex;align-items:center;justify-content:center;padding:24px;
  opacity:0;transition:opacity .25s ease;
}
#fmp-overlay[hidden]{display:none}
#fmp-overlay.is-open{opacity:1}
#fmp-modal{
  position:relative;width:100%;max-width:640px;max-height:90vh;overflow-y:auto;
  background:var(--bone);border-radius:16px;padding:36px;
  box-shadow:0 40px 80px -20px rgba(0,0,0,.5);
  transform:translateY(12px);transition:transform .25s ease;
}
#fmp-overlay.is-open #fmp-modal{transform:none}
#fmp-close{
  position:absolute;top:16px;right:16px;width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  border-radius:50%;border:1px solid var(--line);background:var(--paper);
  font-size:18px;line-height:1;color:var(--slate);
  transition:border-color .2s ease,color .2s ease;
}
#fmp-close:hover{border-color:var(--ink);color:var(--ink)}

.fmp-head{
  display:flex;justify-content:space-between;align-items:baseline;
  padding-bottom:14px;border-bottom:1px solid var(--line);padding-right:36px;
}
.fmp-eyebrow,.fmp-count{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--slate);
}
.fmp-count{font-variant-numeric:tabular-nums}

/* Stays out of the way during the quiz and the details form — it's
   the answer, not a progress bar, so it only appears once there is
   one to show. */
.fmp-gauge{position:relative;margin:22px 0 28px;opacity:0;transition:opacity .3s ease}
.fmp-gauge[hidden]{display:none}
.fmp-gauge.is-visible{opacity:1}
.fmp-segs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.fmp-seg,.fmp-rail{
  position:relative;overflow:hidden;border-radius:8px;
  background:var(--paper);border:1px solid var(--line);
}
.fmp-seg{height:48px}
.fmp-rail{height:32px;margin-top:4px}
.fmp-fill{
  position:absolute;inset:0 auto 0 0;width:0%;
  background:rgba(179,67,30,.16);border-right:2px solid transparent;
  transition:width .5s cubic-bezier(.2,.7,.3,1);
}
.fmp-seg span,.fmp-rail span{
  position:relative;display:block;padding:0 10px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--slate);
}
.fmp-seg span{padding-top:15px;line-height:1.3}
.fmp-rail span{padding-top:10px}
.fmp-seg.is-named,.fmp-rail.is-named{border-color:var(--rust)}
.fmp-seg.is-named .fmp-fill,.fmp-rail.is-named .fmp-fill{
  width:100% !important;background:var(--rust);border-right-color:var(--rust);
}
.fmp-seg.is-named span,.fmp-rail.is-named span{color:#fff;font-weight:600}
.fmp-seg.is-muted,.fmp-rail.is-muted{opacity:.32}
.fmp-pointer{
  position:absolute;top:-13px;left:0;width:0;height:0;opacity:0;
  border-left:7px solid transparent;border-right:7px solid transparent;
  border-top:9px solid var(--rust);transform:translateX(-50%);
  transition:left .6s cubic-bezier(.3,1.3,.4,1),opacity .3s;
}
.fmp-pointer.is-on{opacity:1}

.fmp-panel[hidden]{display:none}
.fmp-panel{animation:fmp-in .35s ease both}
@keyframes fmp-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.fmp-q{
  font-family:var(--display);font-weight:700;font-size:clamp(19px,3.2vw,24px);
  letter-spacing:-.015em;line-height:1.26;margin-bottom:18px;
}

.fmp-opts{display:grid;gap:8px}
.fmp-opt{
  display:block;width:100%;text-align:left;cursor:pointer;
  padding:13px 15px;font-size:15px;line-height:1.4;font-family:var(--body);
  background:var(--paper);border:1px solid var(--line);border-radius:8px;color:var(--ink);
  transition:background .15s ease,border-color .15s ease,transform .15s ease;
}
.fmp-opt:hover{border-color:var(--ink);transform:translateX(3px)}
.fmp-opt:focus-visible,.fmp-go:focus-visible,.fmp-back:focus-visible,
#fmp-modal input:focus-visible,#fmp-modal textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.fmp-opt.is-clear{color:var(--accent)}

/* First name / surname sit side by side on anything wider than a phone. */
.nf-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){ .nf-row{grid-template-columns:1fr;gap:0} }



/* ---------- write-up capture, result CTA, result rhythm ---------- */

/* ---------- ungated result: optional write-up capture ----------
   The verdict is already on screen above this. This block asks for an
   email in exchange for something additional, so it reads as an offer
   rather than a toll gate. ---------- */
.fmp-promise{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;
  color:var(--slate);margin-top:10px;
}
.fmp-writeup{
  margin:22px 0 0;padding:22px;border-radius:12px;
  background:var(--paper);border:1px solid var(--line);
}
.fmp-writeup-title{
  font-family:var(--display);font-weight:600;font-size:17px;
  letter-spacing:-.015em;color:var(--ink);
}
.fmp-writeup-desc{
  font-size:14px;line-height:1.6;color:var(--slate);margin:8px 0 16px;
}
.fmp-writeup .nf-field{margin-bottom:12px}
.nf-opt{
  font-weight:400;text-transform:none;letter-spacing:0;
  color:var(--slate);opacity:.8;
}
.fmp-go[disabled]{opacity:.6;cursor:default}

/* ---------- diagnostic result CTA ----------
   The result used to dead-end on "I'll be in touch". This is the
   highest-intent moment on the page, so it now offers the next step
   three ways: booked, messaged, or self-serve reading. ---------- */
.fmp-result-cta{
  display:flex;flex-direction:column;gap:10px;
  margin:24px 0 22px;padding-top:22px;border-top:1px solid var(--line);
}
.fmp-cta-primary,.fmp-cta-secondary{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--mono);font-size:14px;font-weight:600;letter-spacing:.02em;
  padding:15px 24px;border-radius:10px;text-decoration:none;
  border:1px solid transparent;transition:background .15s ease,border-color .15s ease;
}
.fmp-cta-primary{background:var(--accent);color:#fff}
.fmp-cta-primary:hover{background:var(--accent-dark)}
.fmp-cta-secondary{background:transparent;color:var(--ink);border-color:var(--line)}
.fmp-cta-secondary:hover{border-color:var(--ink)}
.fmp-cta-text{
  background:none;border:0;padding:4px 0;cursor:pointer;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent);text-align:center;
  border-bottom:1px solid rgba(34,52,90,.3);align-self:center;
}
.fmp-cta-text:hover{border-color:var(--accent)}
.fmp-cta-primary:focus-visible,.fmp-cta-secondary:focus-visible,
.fmp-cta-text:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.fmp-go{
  margin-top:16px;width:100%;padding:15px;cursor:pointer;border-radius:10px;border:none;
  background:var(--accent);color:#fff;font-family:var(--mono);
  font-size:14px;font-weight:600;letter-spacing:.02em;
  transition:background .15s ease;
}
.fmp-go:hover{background:var(--accent-dark)}
.fmp-go[disabled]{opacity:.5;cursor:wait}
.fmp-error{
  margin-top:10px;font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;color:var(--rust);
}
.fmp-fine{
  margin-top:10px;font-family:var(--mono);font-size:11px;letter-spacing:.03em;color:var(--slate);
}
.fmp-fine a{color:inherit}
.fmp-back{
  margin-top:16px;cursor:pointer;background:none;border:none;padding:0;
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--slate);
}
.fmp-back:hover{color:var(--ink)}

.fmp-tag{
  display:inline-block;margin-bottom:12px;padding:5px 10px;border-radius:999px;
  background:var(--rust);color:#fff;
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
}
.fmp-verdict{
  font-family:var(--display);font-weight:700;font-size:clamp(22px,3.8vw,28px);
  letter-spacing:-.02em;line-height:1.18;margin-bottom:14px;
}
.fmp-body{font-size:15.5px;line-height:1.65;color:var(--ink)}
.fmp-close-note{
  margin-top:22px;padding-top:16px;border-top:1px solid var(--line);
  font-size:14px;color:var(--slate);
}
.fmp-close-note p+p{margin-top:8px}
.fmp-sig{font-family:var(--mono);font-size:11.5px;letter-spacing:.03em}

@media (max-width:560px){
  #fmp-modal{padding:26px 20px;max-height:94vh}
  .fmp-seg{height:54px}
  .fmp-seg span{font-size:8.5px;padding:13px 6px 0;letter-spacing:.05em}
  .fmp-opt{padding:14px 13px;font-size:14.5px}
  .fmp-opt:hover{transform:none}
}

/* ---------- result panel: vertical rhythm ----------
   The panel had grown three boundary treatments in a row — a rule above
   the close-note, a bordered card around the write-up, then a second
   rule above the CTAs — slicing a short panel into slabs on a spacing
   run of 22/16/22/24/22. One rule, one card, one rhythm. The card edge
   already separates the CTAs, so that second rule comes out.
   Placed last deliberately: these override earlier rules of equal
   specificity, including the mobile #fmp-modal padding further up. */
.fmp-gauge{margin:18px 0 20px}
#fmp-result .fmp-close-note{margin-top:20px;padding-top:16px}
#fmp-result .fmp-writeup{margin-top:20px;padding:20px}
#fmp-result .fmp-writeup-desc{margin:6px 0 14px}
#fmp-result .fmp-writeup .nf-field{margin-bottom:10px}
#fmp-result .fmp-writeup textarea{min-height:72px}
#fmp-result .fmp-go{margin-top:12px}
#fmp-result .fmp-fine{margin-top:8px}
#fmp-result .fmp-result-cta{margin:20px 0 0;padding-top:0;border-top:0}
#fmp-result .fmp-cta-text{margin-top:2px}

@media (max-width:560px){
  #fmp-modal{padding:24px 18px}
  #fmp-result .fmp-close-note{margin-top:16px;padding-top:14px}
  #fmp-result .fmp-writeup{margin-top:16px;padding:16px}
  #fmp-result .fmp-writeup textarea{min-height:64px}
  #fmp-result .fmp-result-cta{margin-top:16px;gap:8px}
  #fmp-result .fmp-cta-primary,
  #fmp-result .fmp-cta-secondary{padding:14px 18px;font-size:13.5px}
}