/* ============================================================================
   ANNA PSAUTE — NEUROFEEDBACK LANDING PAGE — "PROTOCOL"
   Self-contained: client.css never loads here, so this file carries the whole
   design. It is the SITE's design on the LP's conversion structure — same
   palette, same Tenor Sans / Karla, same keyline square, same print frame,
   same trace. Someone arriving here from the homepage sees one practice.
   ============================================================================ */

:root{
  --slate:#4A5568; --slate-dk:#333C49;
  --sage:#7A8A8E; --muted:#5C696D;
  --bronze:#8B7355; --bronze-dk:#6F5C44; --bronze-lt:#C6A97F;
  --bone:#F5F4F2; --bone-dp:#EDEBE7; --sand:#EAE6DE;
  --ink:#1F1F23; --ink-soft:#C9C7C2;
  --font-d:"Tenor Sans",Optima,"Gill Sans MT","Helvetica Neue",sans-serif;
  --font-b:"Karla","Helvetica Neue",Arial,sans-serif;
  --wrap:1140px;
  --gut:clamp(20px,5vw,40px);
  --sec:clamp(52px,6vw,92px);
  --key:rgba(74,85,104,.38);
  --key-lt:rgba(245,244,242,.34);
  --hair:rgba(31,31,35,.11);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{
  margin:0;padding-bottom:0;background:var(--bone);color:var(--ink);
  font:400 17px/1.72 var(--font-b);-webkit-font-smoothing:antialiased;overflow-x:clip;
}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--font-d);font-weight:400;line-height:1.1;letter-spacing:.004em;margin:0;text-wrap:balance}
p,li{margin:0;text-wrap:pretty}
p + p{margin-top:1.05em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--ink);color:var(--bone);padding:12px 18px}
:focus-visible{outline:2px solid var(--bronze);outline-offset:3px}

/* the trace — the site's one separator, at its flattest on a page whose whole
   argument is order and settling */
.trace{display:block;width:100vw;margin-left:calc(50% - 50vw);
  height:clamp(26px,3vw,44px);stroke:var(--bronze);fill:none;overflow:visible}
.trace--dim{stroke:rgba(139,115,85,.5)}

/* ── header ─────────────────────────────────────────────────────────────── */
.lp-hdr{position:sticky;top:0;z-index:60;background:var(--bone);border-bottom:1px solid var(--hair)}
.lp-hdr-in{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);
  height:72px;display:flex;align-items:center;gap:clamp(12px,2vw,30px)}
.lp-brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:0 1 auto;min-width:0}
.lp-brand img{width:48px;height:48px;flex:0 0 auto}
.lp-brand b{display:block;font:400 16px/1.2 var(--font-d);letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
.lp-brand span span{font:600 9.5px/1.4 var(--font-b);letter-spacing:.19em;text-transform:uppercase;color:var(--muted)}
/* The nav takes the whole middle and centres inside it, so it sits between the
   mark and the phone rather than being shoved up against the phone by an auto
   left margin. */
.lp-nav{display:flex;align-items:center;justify-content:center;flex:1 1 auto;
  gap:clamp(10px,1.8vw,26px);list-style:none;margin-block:0;margin-left:0;padding:0}
.lp-nav a{font:600 13px/1 var(--font-b);letter-spacing:.15em;text-transform:uppercase;
  text-decoration:none;color:var(--ink);display:inline-flex;align-items:center;min-height:44px;transition:color .22s}
.lp-nav a:hover{color:var(--bronze-dk)}
.lp-hdr-act{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.lp-tel{font:600 14.5px/1 var(--font-b);color:var(--ink);text-decoration:none;
  display:inline-flex;align-items:center;gap:7px;min-height:44px;transition:color .22s}
.lp-tel svg{width:13px;height:13px;fill:none;stroke:var(--bronze);stroke-width:1.6}
.lp-tel:hover{color:var(--bronze-dk)}

/* ── buttons: square, keyline, invert. No translateY, ever. ─────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.7em;
  font:600 12px/1 var(--font-b);letter-spacing:.13em;text-transform:uppercase;
  text-decoration:none;border-radius:0;border:1px solid var(--slate);
  background:var(--slate);color:var(--bone);
  padding:16px 26px;min-height:48px;box-sizing:border-box;
  transition:background .25s,color .25s,border-color .25s;
}
.btn:hover,.btn:focus-visible{background:transparent;color:var(--slate);border-color:var(--slate)}
.btn svg{width:15px;height:8px;fill:none;stroke:currentColor;stroke-width:1.4;flex:0 0 auto}
.btn--inv{background:transparent;color:var(--bone);border-color:rgba(245,244,242,.6)}
.btn--inv:hover,.btn--inv:focus-visible{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--key)}
.btn--ghost:hover,.btn--ghost:focus-visible{background:var(--ink);color:var(--bone);border-color:var(--ink)}

/* ── hero ───────────────────────────────────────────────────────────────── */
.lp-hero{padding:clamp(40px,5vw,72px) 0 0;background:var(--bone)}
.lp-hero-in{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);
  gap:clamp(28px,4vw,64px);align-items:center}
.lp-eyebrow{font:600 11.5px/1.5 var(--font-b);letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin:0 0 18px}
.lp-hero h1{font-size:clamp(2rem,4.4vw,3.4rem);margin-bottom:.42em}
.lp-hero .lead{font-size:clamp(1.02rem,1.6vw,1.22rem);line-height:1.5;color:var(--slate);max-width:34ch}
.lp-hero-act{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(12px,2vw,22px);margin-top:clamp(24px,3vw,34px)}
.lp-hero-tel{font:600 15px/1 var(--font-b);color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--bronze);padding:6px 0;display:inline-flex;align-items:center;min-height:44px;
  transition:color .22s,border-color .22s}
.lp-hero-tel:hover{color:var(--bronze-dk);border-color:var(--bronze-dk)}
.lp-hero-print{margin:0;background:#fff;padding:11px 11px 32px;rotate:-2.2deg;
  box-shadow:0 26px 52px -30px rgba(31,31,35,.6)}
.lp-hero-print picture{display:contents}
.lp-hero-print img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 26%}

/* trust badges */
.lp-badges{max-width:var(--wrap);margin:clamp(30px,3.6vw,46px) auto 0;padding:clamp(15px,1.8vw,22px) var(--gut);
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);background:var(--bone-dp);
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:clamp(9px,1.4vw,16px) clamp(20px,3.4vw,54px);list-style:none}
.lp-badges li{display:inline-flex;align-items:center;gap:9px;
  font:600 12px/1.5 var(--font-b);letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}
.lp-badges li::before{content:"";width:7px;height:7px;border:1px solid var(--bronze-dk);flex:0 0 auto}

/* ── section shells ─────────────────────────────────────────────────────── */
.lp-sec{padding:var(--sec) 0}
.lp-sec--band{background:var(--sand)}
.lp-sec--dark{background:var(--ink);color:var(--ink-soft)}
.lp-sec--dark h2,.lp-sec--dark h3{color:var(--bone)}
.lp-sec h2{font-size:clamp(1.7rem,3.3vw,2.6rem);margin-bottom:.5em}
.lp-sec p{color:var(--slate);font-size:17.4px;line-height:1.8}
.lp-sec--dark p{color:var(--ink-soft)}
.lp-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(26px,3.6vw,56px);align-items:center}
.lp-two--rev .lp-two-tx{order:2}
.lp-two--rev .lp-two-fig{order:1}
.lp-two-fig{margin:0;background:#fff;border:9px solid #fff;border-bottom-width:24px;
  box-shadow:0 22px 46px -30px rgba(31,31,35,.55);position:relative;aspect-ratio:4/3;overflow:hidden}
.lp-two-fig picture{display:contents}
.lp-two-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.9)}
.lp-measure{max-width:720px}
.lp-center{max-width:760px;margin:0 auto;text-align:center}

/* a plain, countable list — no arbitrary numbers, no left stripe */
.lp-list{list-style:none;margin:clamp(20px,2.4vw,30px) 0 0;padding:0}
.lp-list li{position:relative;padding:14px 0 14px 26px;border-top:1px solid var(--hair);
  font-size:16.8px;line-height:1.7;color:var(--slate)}
.lp-list li:last-child{border-bottom:1px solid var(--hair)}
.lp-list li::before{content:"";position:absolute;left:0;top:1.42em;width:8px;height:8px;border:1px solid var(--bronze-dk)}
.lp-sec--dark .lp-list li{border-color:rgba(245,244,242,.16);color:var(--ink-soft)}
.lp-sec--dark .lp-list li::before{border-color:var(--bronze-lt)}

.lp-turn{font-family:var(--font-b);font-weight:600;font-style:italic;
  font-size:clamp(1.2rem,2.2vw,1.62rem);line-height:1.36;color:var(--ink);margin-top:1.1em}
.lp-sec--dark .lp-turn{color:var(--bone)}

/* ── the three phases: keyline squares, the logo's own device ───────────── */
.lp-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,30px);
  margin-top:clamp(26px,3.2vw,42px)}
.lp-step{border:1px solid var(--key);padding:clamp(22px,2.6vw,32px);background:var(--bone)}
.lp-step h3{font-size:clamp(1.1rem,1.8vw,1.34rem);margin-bottom:.55em}
.lp-step p{font-size:16px;line-height:1.72}
.lp-step + .lp-step{position:relative}
/* The punchy last line of each step's description - set apart from the
   lead-in sentence with weight and its own top space. */
.lp-step-emphasis{display:block;padding-top:.6em;font-weight:700}

/* ── trust items ────────────────────────────────────────────────────────── */
.lp-trust{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.6vw,34px);
  margin-top:clamp(24px,3vw,38px)}
.lp-trust h3{font-size:clamp(1.02rem,1.6vw,1.2rem);margin-bottom:.5em;padding-top:16px;border-top:1px solid var(--key)}
.lp-trust p{font-size:16px}

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.lp-faq{max-width:820px;margin:clamp(22px,2.6vw,34px) auto 0}
.lp-faq-item{border-bottom:1px solid var(--hair)}
.lp-faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:none;border:0;cursor:pointer;text-align:left;padding:clamp(18px,2vw,24px) 4px;min-height:44px;
  font-family:var(--font-d);font-weight:400;color:var(--ink);
  font-size:clamp(1.04rem,1.6vw,1.2rem);line-height:1.32;transition:color .24s}
.lp-faq-q:hover{color:var(--bronze-dk)}
/* Just a plus and a minus. It used to be a bordered 15px box that filled with
   ink and rotated 90deg on open, which read as a checkbox being ticked rather
   than as an open/close control. Now: two bars, no box, no spin - the upright
   simply goes. */
.lp-faq-q .mark{flex:0 0 auto;position:relative;width:18px;height:18px;border:0;background:none;
  transition:border-color .28s,background .28s,transform .34s cubic-bezier(.22,1,.36,1)}
.lp-faq-q .mark::before,.lp-faq-q .mark::after{content:"";position:absolute;background:var(--bronze-dk);
  transition:opacity .28s,transform .28s,background .28s}
.lp-faq-q .mark::before{left:0;right:0;top:8px;height:2px}      /* the bar   */
.lp-faq-q .mark::after{top:0;bottom:0;left:8px;width:2px}       /* the upright */
.lp-faq-q[aria-expanded="true"] .mark::after{opacity:0;transform:scaleY(0)}
.lp-faq-q[aria-expanded="true"] .mark::before{background:var(--ink)}
.lp-faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .38s cubic-bezier(.22,1,.36,1)}
.lp-faq-item.open .lp-faq-a{grid-template-rows:1fr}
/* The question carries 4px of inset from its button padding; the answer had
   none, so every answer sat 4px to the left of the question above it. */
.lp-faq-a > div{overflow:hidden;padding-inline:4px}
.lp-faq-a p{margin:0 0 clamp(16px,2vw,24px)}
@media (prefers-reduced-motion:reduce){ .lp-faq-a,.lp-faq-q .mark{transition:none} }

/* ── CTA bands ──────────────────────────────────────────────────────────── */
.lp-band{background:var(--slate);color:var(--bone);padding:clamp(40px,4.6vw,68px) 0;text-align:center}
.lp-band h2{color:var(--bone);font-size:clamp(1.5rem,2.9vw,2.24rem);margin-bottom:.5em}
.lp-band p{color:#D8DCE2;max-width:640px;margin:0 auto}
.lp-band .btn{margin-top:clamp(20px,2.4vw,28px)}
.lp-band-note{font:600 11.5px/1 var(--font-b);letter-spacing:.15em;text-transform:uppercase;
  color:var(--bronze-lt);margin:0 0 14px}

/* ── what happens next ──────────────────────────────────────────────────── */
.lp-next{counter-reset:step;list-style:none;margin:clamp(22px,2.6vw,34px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,30px)}
.lp-next li{border-top:1px solid var(--key);padding-top:16px;font-size:16.4px;line-height:1.7;color:var(--slate);
  counter-increment:step;position:relative}
/* The step number in the primary palette colour, set as a counter so the markup
   stays a plain <ol> and the numbers can never drift out of step with it.
   ABSOLUTE, not a grid or flex child: the step body is inline content - a text
   node, a <a> tel link, another text node - and making the <li> a grid box
   promotes each of those to its own grid item, which put "Call" alone on one
   line and the number on the next. Out of flow, the line stays one line. */
/* Standing rule: no underline on phone/email links. The base `a{color:inherit}`
   reset leaves the browser default text-decoration:underline in place, and the
   only anchor this list ever carries is the "Call (616) 773-8303" tel: link in
   step 1. */
.lp-next a[href^="tel:"],.lp-next a[href^="mailto:"]{text-decoration:none}

.lp-next li::before{
  content:counter(step);
  position:absolute;left:0;top:14px;
  width:28px;height:28px;border-radius:50%;
  background:var(--slate);color:#fff;
  font:600 14px/28px var(--font-b);text-align:center;letter-spacing:0}

/* ── form ───────────────────────────────────────────────────────────────── */
.lp-form-sec{background:var(--sand);padding:var(--sec) 0}
.lp-form-in{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,540px);
  gap:clamp(28px,3.6vw,58px);align-items:start}
.lp-card{background:var(--bone);border:1px solid rgba(139,115,85,.24);padding:clamp(24px,3vw,40px);
  box-shadow:0 26px 60px -46px rgba(31,31,35,.7)}
.lp-card h3{font-size:clamp(1.16rem,1.9vw,1.42rem);margin-bottom:.7em}
.lp-secure{margin-top:clamp(24px,3vw,36px);padding-top:20px;border-top:1px solid var(--key)}
.lp-secure h3{font-size:1.02rem;margin-bottom:.5em}
.lp-secure p{font-size:15.4px}
.lp-reach{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:clamp(22px,2.6vw,32px);
  padding-top:20px;border-top:1px solid var(--key)}
.lp-reach a{font:600 16px/1 var(--font-b);color:var(--ink);text-decoration:none;
  display:inline-flex;align-items:center;gap:9px;min-height:44px;transition:color .22s}
.lp-reach a:hover{color:var(--bronze-dk)}
.lp-reach svg{width:15px;height:15px;fill:none;stroke:var(--bronze);stroke-width:1.6}

/* ── footer + the fee disclosure, which appears on EVERY landing page ───── */
.lp-ft{background:var(--ink);color:var(--ink-soft);padding:clamp(34px,3.6vw,46px) 0 30px}
.lp-ft-in{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.lp-fee{border:1px solid rgba(245,244,242,.16);padding:clamp(18px,2vw,26px);margin-bottom:clamp(24px,2.8vw,34px)}
.lp-fee h3{font:600 11.5px/1 var(--font-b);letter-spacing:.15em;text-transform:uppercase;color:var(--bronze-lt);margin:0 0 14px}
.lp-fee ul{list-style:none;margin:0;padding:0}
.lp-fee li{font-size:14.5px;line-height:1.7;color:var(--ink-soft);padding:5px 0}
.lp-ft-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;
  padding-top:20px;border-top:1px solid rgba(201,199,194,.14);font-size:13.5px;color:var(--sage)}
.lp-ft-row b{display:block;font:400 14px/1.3 var(--font-d);letter-spacing:.06em;text-transform:uppercase;color:var(--bone)}
.lp-ft-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px}
.lp-ft-legal{display:flex;flex-wrap:wrap;gap:14px}
.lp-ft-legal a{color:var(--bronze-lt);text-decoration:none}
.lp-ft-legal a:hover{color:var(--bone)}

/* ── WPForms lives on the --form-* tokens in style.css, which the parent
   inlines here too. Layout only below. ─────────────────────────────────── */
.lp-card .wpforms-container{max-width:none;margin:0}
.lp-card .wpforms-container form{margin:0}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE + LANDSCAPE PHONE
   A landscape phone is ~926px WIDE, so it clears every max-width:768px gate
   and would otherwise get the desktop layout in a 428px-tall window. The
   CONDITION of the mobile block is extended rather than its rules duplicated.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width:1024px){
  .lp-hero-in{grid-template-columns:minmax(0,1fr) minmax(0,300px)}
  .lp-steps,.lp-trust,.lp-next{grid-template-columns:1fr 1fr}
  .lp-steps > :last-child,.lp-trust > :last-child,.lp-next > :last-child{grid-column:1/-1}
}

@media (max-width:768px),
       (hover:none) and (pointer:coarse) and (max-height:500px){
  .lp-hdr-in{height:64px;gap:10px}
  .lp-nav{display:none}
  /* 44px, not 42 — below 620px .lp-brand > span is hidden (further down this
     file), so this image becomes the link's ENTIRE visible box. At 42px it
     measured a 42x44 tap target, 2px under the touch-target floor. */
  .lp-brand img{width:44px;height:44px}
  .lp-brand span span{display:none}
  .lp-hdr-act .btn{display:none}          /* the phone is the header action on a phone */
  .lp-hero-in{grid-template-columns:1fr;gap:26px}
  .lp-hero-print{order:2;rotate:0deg;max-width:340px;margin-inline:auto}
  .lp-hero .lead{max-width:none}
  .lp-hero-act{flex-direction:column;align-items:stretch}
  .lp-hero-act .btn{width:100%}
  .lp-hero-tel{align-self:center}
  .lp-two,.lp-form-in{grid-template-columns:1fr}
  .lp-two--rev .lp-two-tx,.lp-two--rev .lp-two-fig{order:0}
  .lp-steps,.lp-trust,.lp-next{grid-template-columns:1fr}
  .lp-steps > :last-child,.lp-trust > :last-child,.lp-next > :last-child{grid-column:auto}
  .lp-ft-row{flex-direction:column;align-items:flex-start}
  .lp-ft-meta{flex-direction:column;align-items:flex-start;gap:10px}
  /* a notched iPhone in landscape: keep copy out from under the notch */
  .wrap,.lp-hdr-in,.lp-hero-in,.lp-form-in,.lp-ft-in,.lp-badges{
    padding-left:max(var(--gut),env(safe-area-inset-left,0px));
    padding-right:max(var(--gut),env(safe-area-inset-right,0px));
  }
}

/* ── touch-device accessibility floor: nothing under 14px, nothing under 44px
   Never put `display` in here - it resurrects what the mobile block hid. ── */
@media (hover:none) and (pointer:coarse){
  button,input[type="submit"],input[type="button"]{font-size:14px}
  .btn,a.btn,button.btn{font-size:14px;min-height:48px;box-sizing:border-box}
  .lp-nav a,.lp-eyebrow,.lp-badges li,.lp-fee li,.lp-ft-row,.lp-band-note,
  .lp-brand span span,.lp-faq-q,.lp-secure p{font-size:14px}
  .lp-sec p,.lp-list li,.lp-step p,.lp-trust p,.lp-next li,.lp-faq-a p{font-size:16.4px}
  a[href^="tel:"],a[href^="mailto:"]{min-height:44px}
  .lp-tel,.lp-hero-tel,.lp-reach a{min-height:44px}
  .lp-ft-legal a{min-height:44px;display:inline-flex;align-items:center}
  .wpforms-container .wpforms-field-label,
  .wpforms-container .wpforms-field-label.wpforms-field-label{font-size:14px !important;line-height:1.4 !important}
  .lp-hero,.lp-form-sec,.lp-sec--band{background-attachment:scroll}
}

@media (max-width:480px){
  .lp-hero h1{font-size:clamp(1.7rem,8.4vw,2.3rem)}
  .lp-brand b{font-size:14.5px}
}

/* ── header corrections found by rendering ───────────────────────────────
   The brand was being squeezed by the anchor nav until its second line wrapped
   to three lines and pushed the 72px header out of shape, and the two-word
   anchor labels were wrapping mid-phrase. Both are the same cause: nothing was
   telling either side that it must not wrap. */
.lp-brand{flex:0 0 auto}
.lp-brand b,
.lp-brand span span{white-space:nowrap}
/* centre, not flex-end: this rule is later than the base .lp-nav and equally
   specific, so a justify-content set up there is simply discarded - which is
   why the nav kept sitting against the phone button. */
.lp-nav{flex:1 1 auto;justify-content:center;flex-wrap:nowrap}
.lp-nav a{white-space:nowrap}

/* Below ~1180px the six-item header cannot hold the brand, four anchors, the
   number AND the button at once. The anchors go first - they are wayfinding,
   and the page is one scroll - then the button, leaving the number, which is
   the highest-value tap target on an ad landing page. */
@media (max-width:1180px){
  .lp-nav{display:none}
  .lp-hdr-act{margin-left:auto}
}

/* `.lp-measure` was applied to the same element as `.wrap`, so its 720px cap
   replaced the 1140px one and `margin:0 auto` re-centred the whole block -
   those sections started 210px right of every other section's left edge.
   Constrain the CHILDREN instead: one left edge down the page, and the running
   text still stops at a readable measure. */
.wrap.lp-measure{max-width:var(--wrap)}
.wrap.lp-measure > *{max-width:720px}

/* the form-side note, replacing the .lp-eyebrow it used to borrow (that class
   is uppercase display type, wrong for a sentence) */
.lp-form-note{margin-top:16px}
.lp-form-note p{font:500 13.5px/1.6 var(--font-b);color:var(--muted);margin:0}

/* "What happens next" sits in the left half of the form grid, so three columns
   there is ~130px each and the copy breaks after one or two words. It is a
   sequence, and a sequence reads down. */
.lp-next{grid-template-columns:1fr;gap:0}
/* The left inset for the step number lives HERE, not on the base rule. This
   shorthand is later and equally specific, so it wins the padding outright -
   a padding-left set above is simply discarded, which is what put the copy
   underneath the circles. 44px = the 28px disc plus its gap. */
.lp-next li{padding:14px 0 14px 44px;border-top:1px solid var(--key)}

/* touch-floor misses found by measuring the rendered page, not by reading */
@media (hover:none) and (pointer:coarse){
  /* inline tel: links inside the numbered steps */
  .lp-next a[href^="tel:"],
  .lp-sec a[href^="tel:"]{
    display:inline-block;min-height:44px;padding:11px 0;line-height:1.4;box-sizing:border-box;
  }
  .lp-form-note p{font-size:14px}
  .lp-fee h3{font-size:14px}
  .lp-brand{min-height:44px}
  .skip{min-height:44px;display:inline-flex;align-items:center}
}

/* ══════════════════════════════════════════════════════════════════════════
   REVISION PASS — client changes, 2026-08-27
   ══════════════════════════════════════════════════════════════════════════ */

/* (3) the header was holding a brand, four anchors, a number and a button
   inside 1140px, which squeezed every gap to its minimum. Give the bar its own
   wider measure - the page content keeps the reading width it had. */
.lp-hdr-in{max-width:1340px;gap:clamp(16px,2.4vw,40px)}
.lp-nav{gap:clamp(14px,2.2vw,34px)}
@media (max-width:1320px){
  .lp-nav{display:none}
  .lp-hdr-act{margin-left:auto}
}

/* (2) the line above the H1 is a sentence, so it is set as a lead-in, not an
   eyebrow: sentence case, no uppercase tracking, and sized to be read. */
/* No ch clamp: the line has to run its full length or the break lands mid-phrase.
   The break itself is a <br> in the field, not a tuned max-width - the window
   between "wide enough for line one" and "wide enough for the whole sentence" is
   ~25px at this size, which no ch value holds reliably across a font change. */
.lp-hero-lead-in{
  font:500 1.5rem/1.45 var(--font-b);
  color:var(--muted);margin:0 0 clamp(14px,1.8vw,20px);max-width:none;
}

/* (4) the trust stripe's ground runs the full width; its content stays on the
   page measure. */
.lp-badges-band{
  margin-top:clamp(30px,3.6vw,46px);
  background:var(--bone-dp);
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
}
.lp-badges{margin:0 auto;border:0;background:transparent}

/* (5)(6) a standalone emphatic sentence renders plain bold at body size, never
   the large italic display treatment. Same rule the main site's .it-strong
   follows - the oversized italic reads as too much on a single line. */
.lp-strong{
  font-family:var(--font-b);font-weight:700;font-style:normal;
  font-size:16.8px;line-height:1.8;color:var(--ink);margin-top:1.1em;
}
.lp-sec--dark .lp-strong{color:var(--bone)}

/* (1) bio + headshot, under Why Trust Me. The print frame and the tilt are the
   site's own gesture, using the independent `rotate:` property so it composes
   with any transform rather than replacing it. */
.lp-bio{
  margin-top:clamp(34px,4vw,58px);padding-top:clamp(30px,3.4vw,46px);
  border-top:1px solid var(--key);
  display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);
  gap:clamp(26px,3.6vw,56px);align-items:center;
}
.lp-bio-print{
  margin:0;background:#fff;padding:11px 11px 30px;rotate:-2.2deg;
  box-shadow:0 24px 48px -30px rgba(31,31,35,.6);
}
.lp-bio-print picture{display:contents}
.lp-bio-print img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 22%}
.lp-bio-tx h3{font-size:clamp(1.24rem,2.1vw,1.6rem);margin-bottom:.55em}
.lp-bio-tx p{color:var(--slate);font-size:16.8px;line-height:1.8}
.lp-bio-tx p + p{margin-top:1.05em}

/* (10) the close now leads the form column, so the "what happens next" heading
   steps down to a subhead rather than competing with it. */
.lp-next-h{
  font-size:clamp(1.1rem,1.8vw,1.32rem);
  margin:clamp(28px,3.2vw,40px) 0 .5em;
}

/* (11) the footer mark, exactly as the main site sets it */
.lp-ft-brand{display:flex;align-items:center;gap:14px}
.lp-ft-brand img{width:44px;height:44px;flex:0 0 auto}
.lp-ft-brand b{font:400 14.5px/1.3 var(--font-d);letter-spacing:.06em;text-transform:uppercase;color:var(--bone);display:block}

@media (max-width:768px),
       (hover:none) and (pointer:coarse) and (max-height:500px){
  .lp-bio{grid-template-columns:1fr;gap:24px}
  .lp-bio-print{rotate:0deg;max-width:300px;margin-inline:auto}
  .lp-hero-lead-in{max-width:none}
}
@media (hover:none) and (pointer:coarse){
  .lp-strong,.lp-bio-tx p{font-size:16.4px}
  .lp-hero-lead-in{font-size:15px}
}

/* The close moved onto the form's ground, which is not a .lp-sec - so it was
   inheriting the bare h2{margin:0} reset and the base 17px body size instead
   of the section rhythm every other band uses. */
.lp-form-in > div > h2{font-size:clamp(1.5rem,2.6vw,2.1rem);margin-bottom:.5em}
.lp-form-in > div p{color:var(--slate);font-size:16.8px;line-height:1.8}

/* The brand's text wrapper is an inline <span> holding a block <b> plus an
   inline tagline. That gives flex an ill-defined base size: it measured the
   wrapper from the <b> alone, so the wider tagline overflowed and the nav sat
   on top of it. Make the wrapper an explicit column and it sizes to its widest
   child, which is what it always looked like it was doing. */
.lp-brand > span{display:flex;flex-direction:column;min-width:0}

/* the skip link is a real focus target even while parked off-screen, so the
   44px floor belongs on the base rule, not only on :focus */
.skip{min-height:44px;display:inline-flex;align-items:center}

/* A phone cannot hold the wordmark, the number AND the burger at once - the
   mark carries the identity, the other two are functional. This has to come
   LAST in the file: the .lp-brand > span{display:flex} correction above is the
   same specificity, so an earlier hide inside a media query still loses to it
   on source order. */
@media (max-width:620px){
  .lp-brand > span{display:none}
}

/* the hero's one CTA is the phone, so it carries a phone glyph rather than the
   forward arrow - the arrow means "onward to the form", which is now the
   header button's job */
.btn--call .btn-ph{width:15px;height:15px;stroke:currentColor;stroke-width:1.7;fill:none;flex:0 0 auto}
.btn--call{gap:.65em}

/* ══════════════════════════════════════════════════════════════════════════
   SEAM, CENTRED HEADS, CARD REVEAL, END NOTES
   ══════════════════════════════════════════════════════════════════════════ */

/* A section that opens directly under the preceding section's trace. The trace
   already draws the boundary and carries its own clamp(30px,3.4vw,50px) above
   it, so paying a second full --sec here stacked two full gaps on one seam. */
.lp-sec--seam{padding-top:clamp(20px,2.2vw,34px)}

/* Centred head. The measure has to be re-centred too - text-align alone leaves a
   max-width block sitting on the left edge. */
.lp-h-centre{text-align:center;margin-left:auto;margin-right:auto}

/* The three phases carry the homepage triad's spotlight. Same geometry as .pl:
   the lit card scales from its own centre so nothing shifts position, takes a
   bronze ring, and lightens. Two speeds, exactly as the homepage runs them -
   1.55s while the light is travelling on its own, .4s the moment a person takes
   over, because their own hover should feel immediate. */
.lp-step{transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s,background-color .4s,border-color .4s}
.lp-step h3{transition:transform .4s cubic-bezier(.22,1,.36,1),color .4s}
.lp-steps--auto .lp-step,
.lp-steps--auto .lp-step h3{transition-duration:1.55s;transition-timing-function:cubic-bezier(.45,0,.3,1)}

.lp-step.is-lit{
  transform:scale(1.045);z-index:2;
  background:#fff;border-color:var(--bronze);
  box-shadow:0 0 0 2px var(--bronze),0 0 44px -10px rgba(139,115,85,.52);
}
.lp-step.is-lit h3{
  transform:scale(1.06);transform-origin:left center;color:var(--bronze-dk)}

/* Nothing here answers the pointer. These cards are copy, not links - the
   homepage triad's hover belongs to it because each plate IS a link, and
   borrowing that affordance here would promise a click that does not exist. */

/* Reduced motion: the JS never starts the cycle, and hover loses the scale. */
@media (prefers-reduced-motion:reduce){
  .lp-step.is-lit{transform:none}
  .lp-step,.lp-step h3{transition:none}
}

/* The two closing notes. They are direct children of .lp-form-in, so they take
   row two of that grid and the second one starts on the form card's left edge.
   On the sand ground they read as quiet notes, not as cards competing with the
   form - a hairline rule above, no box. */
.lp-endnote{border-top:1px solid var(--key);padding-top:18px}
.lp-endnote h3{font:600 11.5px/1 var(--font-b);letter-spacing:.15em;text-transform:uppercase;
  color:var(--bronze-dk);margin:0 0 12px}
.lp-endnote p{margin:0}
.lp-endnote ul{list-style:none;margin:0;padding:0}
.lp-endnote li{font-size:15.4px;line-height:1.7;color:var(--slate);padding:4px 0}
.lp-form-in > .lp-endnote p{font-size:15.4px;line-height:1.7}

/* The trace IS a section's close, and it already carries its own lead-in above
   it. A section that ends on one must not then pay a full --sec below it as
   well, or the seam stacks two full gaps - which is what put ~126px of empty
   ground over the next heading. Only one section on this page ends with a
   trace, so this reaches exactly that seam. */
.lp-sec:has(> .trace:last-child){padding-bottom:clamp(20px,2.2vw,34px)}