/* JDP Relations — component styles.
   Typeface note, 2026-09-16: the mono was pulled back to data only, at Jacob's
   request. It survives on the call time and the window address and meta, where
   it makes the product window read as a screen. Chips, the segmented control,
   kickers, captions and every other label are the sans. Do not put the mono
   back on a label without asking.
   Every value here is a token. If you are about to type a colour, a size or a
   radius as a literal, it belongs in tokens.css instead.
   Component values match the design system's components/core/*.jsx exactly. */

/* ── Layout ─────────────────────────────────────────────────────── */
.container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.container-narrow{max-width:var(--container-narrow);margin:0 auto;padding:0 var(--gutter)}
.section{padding:var(--section-y) 0}
.band{padding:var(--band-y) 0}
.ground-panel{background:var(--panel)}
.ground-dark{background:var(--dark)}
.rule-below{border-bottom:var(--border)}
.center{text-align:center}

/* Section rhythm is fixed: kicker → 14px → headline → 18px → lede. */
.kicker+h1,.kicker+h2{margin-top:14px}
h1+.lede,h2+.lede,.kicker+.lede{margin-top:18px}

/* Fade in once on first view. Never again, no slide, no stagger.
   Gated on .js so the page is fully visible without JavaScript. */
.js .reveal{opacity:0}
.js .reveal.is-in{opacity:1;transition:opacity var(--dur-fade-section) var(--ease-out)}

/* ── Type helpers ───────────────────────────────────────────────── */
.kicker{font-family:var(--font-sans);font-size:var(--fs-mono);font-weight:var(--fw-regular);
  text-transform:uppercase;letter-spacing:var(--ls-mono);color:var(--label)}
.kicker.on-dark{color:var(--on-dark-label)}
.lede{font-size:var(--fs-lede);line-height:var(--lh-lede);color:var(--lede);max-width:var(--measure-lede)}
.center .lede{margin-left:auto;margin-right:auto}
.on-dark h1,.on-dark h2,.on-dark h3{color:var(--on-dark)}
.on-dark .lede,.on-dark p{color:var(--on-dark-soft)}
.measure-hero{max-width:17ch}
.measure-22{max-width:22ch}
.measure-24{max-width:24ch}
.measure-20{max-width:20ch}
.measure-18{max-width:18ch}
.center h1,.center h2{margin-left:auto;margin-right:auto}

/* ── Button ─────────────────────────────────────────────────────── */
.btn{font-family:var(--font-sans);font-size:var(--fs-body);font-weight:var(--fw-regular);
  line-height:var(--lh-tight);display:inline-flex;align-items:center;gap:8px;
  border-radius:var(--radius-sm);cursor:pointer;text-decoration:none;border:1px solid transparent;
  white-space:nowrap;padding:12px 20px;
  transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),transform var(--dur-instant) var(--ease-out)}
.btn:active{transform:translateY(1px)}
.btn--sm{padding:8px 14px;font-size:var(--fs-sm)}
.btn--lg{padding:15px 26px}
.btn--full{width:100%;justify-content:center}
.btn--accent{background:var(--orange);color:#fff;border-bottom-color:transparent}
.btn--accent:hover{background:var(--orange-press);border-bottom-color:transparent}
.btn--soft{background:var(--paper-2);color:var(--ink);border-bottom-color:transparent}
.btn--soft:hover{background:var(--paper-2-press);border-bottom-color:transparent}
.btn--ghost{background:transparent;color:var(--lede);border-bottom-color:transparent}
.btn--ghost:hover{color:var(--ink);border-bottom-color:transparent}

/* ── Header ─────────────────────────────────────────────────────── */
.site-header{position:sticky;top:0;z-index:20;background:var(--header-scrim);
  -webkit-backdrop-filter:saturate(140%) blur(10px);backdrop-filter:saturate(140%) blur(10px);
  border-bottom:var(--border)}
.site-header__inner{max-width:var(--container);margin:0 auto;padding:0 var(--gutter);
  height:76px;display:flex;align-items:center;gap:28px}
.site-header__logo{height:50px;width:auto;display:block}
.site-nav{display:flex;gap:22px;margin-left:auto}
.site-nav a{font-size:var(--fs-xs);white-space:nowrap;color:var(--lede);border-bottom:none;
  transition:color var(--dur-fast) var(--ease-out)}
.site-nav a:hover{color:var(--ink)}
.header-phone{font-family:var(--font-sans);font-size:var(--fs-mono-lg);color:var(--ink);
  white-space:nowrap;border-bottom:1px solid var(--orange-tint)}
.header-phone:hover{border-bottom-color:var(--orange)}

/* The anchor nav is the first thing to go on a narrow screen; the demo line and
   the one CTA are the actions that matter and they stay. */
@media (max-width:900px){.site-nav{display:none}.site-header__inner{gap:16px}}
@media (max-width:560px){.header-phone{display:none}.site-header__logo{height:40px}}

/* ── PhoneCta — the live demo line at display scale ─────────────── */
.phone-cta__label{font-family:var(--font-sans);font-size:var(--fs-mono);text-transform:uppercase;
  letter-spacing:var(--ls-mono);color:var(--label)}
.phone-cta__number{display:inline-block;margin-top:10px;font-family:var(--font-display);
  font-weight:var(--fw-display-med);font-size:clamp(34px,4.4vw,58px);letter-spacing:var(--ls-figure);
  line-height:1.02;color:var(--ink);border-bottom:2px solid var(--orange-tint);
  transition:border-color var(--dur-fast) var(--ease-out)}
.phone-cta__number:hover{border-bottom-color:var(--orange)}
.phone-cta__note{margin-top:14px;font-size:var(--fs-body);line-height:var(--lh-body);
  max-width:var(--measure-body);color:var(--body)}
.phone-cta.center .phone-cta__note{margin-left:auto;margin-right:auto}

/* ── Chip ───────────────────────────────────────────────────────── */
.chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-sans);
  font-size:var(--fs-sm);letter-spacing:normal;padding:5px 10px;border-radius:var(--radius-pill);
  white-space:nowrap;background:var(--card);color:var(--lede);border:1px solid var(--hairline)}
.chip--booked{background:var(--booked-tint);color:var(--booked);border-color:transparent}
.chip--blue{background:var(--blue-tint);color:var(--blue-deep);border-color:transparent}
.chip--accent{background:var(--orange-tint);color:var(--orange-press);border-color:transparent}
.chip--missed{background:var(--missed-tint);color:var(--missed);border-color:transparent}

/* ── Segmented control ──────────────────────────────────────────── */
.segmented{display:inline-flex;gap:3px;padding:3px;background:var(--white);
  border:var(--border);border-radius:var(--radius-pill)}
.segmented button{all:unset;cursor:pointer;font-family:var(--font-sans);font-size:var(--fs-sm);
  letter-spacing:normal;padding:7px 14px;border-radius:var(--radius-pill);white-space:nowrap;
  color:var(--lede);
  transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
/* Text is the page ground, not a literal, so the active pill survives the
   ground flip: dark ink pill with paper text, or white pill with ink text. */
.segmented button[aria-selected="true"]{background:var(--ink);color:var(--paper)}
.segmented button:focus-visible{box-shadow:var(--ring-focus)}

/* ── Window — the product graphic ───────────────────────────────── */
.window{background:var(--white);border:var(--border);border-radius:var(--radius-window);
  box-shadow:var(--shadow-window);overflow:hidden}
.window__bar{display:flex;align-items:center;gap:10px;padding:9px 12px;
  border-bottom:var(--border);background:var(--card)}
.window__dots{display:flex;gap:5px}
.window__dots span{width:9px;height:9px;border-radius:50%;background:var(--paper-2)}
.window__address{flex:1;text-align:center;font-family:var(--font-mono);
  font-size:var(--fs-mono-lg);color:var(--label)}
.window__bar-spacer{width:37px}
.window__head{padding:18px 18px 4px;display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;flex-wrap:wrap}
.window__title{font-family:var(--font-display);font-weight:var(--fw-display-med);font-size:19px;
  color:var(--ink)}
.window__meta{font-family:var(--font-mono);font-size:var(--fs-mono-lg);text-transform:uppercase;
  letter-spacing:var(--ls-mono);color:var(--label)}
.window__rows{padding-bottom:4px}

/* ── CallRow — the product's core data row ──────────────────────── */
.call-row{display:grid;grid-template-columns:86px 1fr auto;align-items:center;gap:16px;
  padding:13px 18px;border-top:var(--border)}
.call-row__time{font-family:var(--font-mono);font-size:var(--fs-mono-lg);color:var(--label)}
.call-row__caller{font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--ink)}
.call-row__summary{font-size:var(--fs-xs);color:var(--body);margin-top:2px}
@media (max-width:560px){
  .call-row{grid-template-columns:1fr auto;gap:10px}
  .call-row__time{grid-column:1;order:-1;grid-row:1}
  .call-row__body{grid-column:1 / -1}
}

/* ── Card ───────────────────────────────────────────────────────── */
.card{background:var(--white);border:var(--border);border-radius:var(--radius-lg);padding:28px}
.card--tile{background:var(--card);padding:30px}
.card--dark{background:var(--dark-2);border:var(--border-dark);color:var(--on-dark-soft)}
.card h3{font-size:22px}
.card--dark h3{font-size:20px;color:var(--on-dark)}
.card p{margin-top:12px;font-size:14.5px;line-height:var(--lh-body);color:var(--body)}
.card--dark p{color:var(--on-dark-soft)}
.card ul{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:10px;
  font-size:14px;color:var(--ink)}

/* ── StepCard ───────────────────────────────────────────────────── */
.step{border-top:var(--border);padding-top:20px}
.step__number{font-family:var(--font-sans);font-size:var(--fs-mono);
  letter-spacing:var(--ls-mono);color:var(--orange)}
.step__title{font-family:var(--font-display);font-weight:var(--fw-display-med);
  font-size:var(--fs-card-title);line-height:var(--lh-title);color:var(--ink);margin-top:10px}
.step p{margin-top:8px;font-size:var(--fs-sm);line-height:1.55;color:var(--body);
  max-width:var(--measure-body)}

/* ── StatTile ───────────────────────────────────────────────────── */
.stat{background:var(--card);border:var(--border);border-radius:var(--radius-lg);
  padding:26px 22px;text-align:center}
.stat__figure{font-family:var(--font-display);font-weight:var(--fw-display-med);
  font-size:var(--fs-figure);letter-spacing:var(--ls-figure);line-height:1;color:var(--orange)}
.stat__label{margin-top:14px;font-size:var(--fs-sm);font-weight:var(--fw-medium);
  color:var(--ink);line-height:1.35}
.stat__note{margin-top:6px;font-family:var(--font-sans);font-size:var(--fs-mono-lg);
  color:var(--label);line-height:1.4}

/* ── Quote — ships as the honest placeholder until a real one exists ─ */
.quote-placeholder{border:1px dashed var(--hairline-strong);border-radius:var(--radius-lg);
  padding:22px 24px;font-family:var(--font-sans);font-size:var(--fs-mono-lg);
  color:var(--label);line-height:1.6}

/* ── FaqRow ─────────────────────────────────────────────────────── */
.faq{border-top:var(--border)}
.faq__q{all:unset;display:flex;width:100%;box-sizing:border-box;align-items:baseline;
  justify-content:space-between;gap:20px;cursor:pointer;padding:20px 0;
  font-family:var(--font-display);font-weight:var(--fw-display-med);font-size:17.5px;
  line-height:1.35;color:var(--ink)}
.faq__q:focus-visible{box-shadow:var(--ring-focus)}
.faq__toggle{font-family:var(--font-sans);font-size:17px;line-height:1;color:var(--label);
  transition:transform var(--dur-base) var(--ease-out)}
.faq__q[aria-expanded="true"] .faq__toggle{transform:rotate(45deg)}
.faq__a{padding-bottom:22px;margin-top:-4px;font-size:var(--fs-body);
  line-height:var(--lh-body);color:var(--body);max-width:var(--measure-lede)}
.faq__a[hidden]{display:none}

/* ── Grids ──────────────────────────────────────────────────────── */
.grid{display:grid;gap:var(--grid-gap);margin-top:40px}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:24px}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:22px}
.grid--stats{grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:22px}
.grid--split{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:44px;
  align-items:start;margin-top:0}

/* ── Hero ───────────────────────────────────────────────────────── */
.hero__demo-card{max-width:560px;margin:34px auto 0;padding:26px 28px;background:var(--white);
  border:var(--border);border-radius:var(--radius-lg)}
.hero__actions{display:flex;gap:10px;justify-content:center;margin-top:22px;flex-wrap:wrap}
.hero__chips{margin-top:22px;display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.hero__scenes{max-width:720px;margin:48px auto 0}
.hero__switch{display:flex;justify-content:center;margin-bottom:16px}
.hero__window{text-align:left}

/* ── What you get — the ticked list ─────────────────────────────── */
.included{background:var(--white);border:var(--border);border-radius:var(--radius-lg);padding:32px}
.included>p{font-size:14.5px;line-height:var(--lh-body);color:var(--body)}
.included ul{margin:20px 0 0;padding:20px 0 0;list-style:none;display:grid;gap:11px;
  font-size:var(--fs-sm);border-top:var(--border);color:var(--ink)}
.included li{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:baseline}
.included li::before{content:"\2713";color:var(--orange);font-size:var(--fs-sm)}
.included__cta{margin-top:26px}

/* ── Footer ─────────────────────────────────────────────────────── */
.site-footer{background:var(--dark);padding:56px var(--gutter) 34px}
.site-footer__inner{max-width:var(--container);margin:0 auto;display:flex;flex-wrap:wrap;
  gap:40px;justify-content:space-between;align-items:flex-start}
.site-footer__logo{height:56px;width:auto;display:block}
.site-footer__tagline{margin-top:16px;font-family:var(--font-display);font-weight:var(--fw-display);
  font-size:19px;color:var(--on-dark);max-width:22ch;line-height:1.35}
.site-footer__col{font-size:var(--fs-sm);color:var(--on-dark-soft);line-height:1.7}
.site-footer__email{color:var(--orange-soft);border-bottom:none}
.site-footer__email:hover{border-bottom:1px solid var(--orange-soft)}
.site-footer__phone{font-family:var(--font-sans);font-size:var(--fs-mono-lg);
  color:var(--on-dark);border-bottom:none}
.site-footer__phone:hover{border-bottom:1px solid var(--on-dark-soft)}
.site-footer__phone-label{font-family:var(--font-sans);font-size:var(--fs-mono);
  text-transform:uppercase;letter-spacing:var(--ls-mono);color:var(--on-dark-label);margin-left:8px}
.site-footer__legal{max-width:var(--container);margin:34px auto 0;padding-top:20px;
  border-top:var(--border-dark);font-family:var(--font-sans);font-size:var(--fs-mono);
  text-transform:uppercase;letter-spacing:var(--ls-mono);color:var(--on-dark-label)}

/* ── Demo modal — holds the lead form ───────────────────────────── */
.modal{position:fixed;inset:0;z-index:80;background:rgba(20,19,18,.46);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:24px}
.modal[hidden]{display:none}
.modal__panel{width:100%;max-width:560px;max-height:90vh;display:flex;flex-direction:column;
  background:var(--paper);border:var(--border);border-radius:16px;overflow:hidden}
.modal__head{padding:28px 30px 18px;display:flex;align-items:flex-start;
  justify-content:space-between;gap:20px}
.modal__title{font-family:var(--font-display);font-weight:var(--fw-display);font-size:26px;
  line-height:1.2;color:var(--ink)}
.modal__sub{margin-top:12px;font-size:var(--fs-sm);color:var(--body)}
.modal__close{all:unset;cursor:pointer;font-family:var(--font-sans);font-size:20px;line-height:1;
  color:var(--label);padding:4px;border-radius:var(--radius-xs);
  transition:color var(--dur-fast) var(--ease-out)}
.modal__close:hover{color:var(--ink)}
.modal__close:focus-visible{box-shadow:var(--ring-focus)}
.modal__body{flex:1;min-height:0;overflow-y:auto;padding:0 30px 30px}
.modal__fallback{margin-top:18px;padding-top:18px;border-top:var(--border);
  font-size:var(--fs-sm);color:var(--body)}

/* ── FAQ page + cross-links ─────────────────────────────────────── */
.faq__more{margin-top:26px;font-size:var(--fs-sm)}
.faq-group{margin-top:44px}
.faq-group:first-of-type{margin-top:34px}
.faq-group__title{font-family:var(--font-sans);font-size:var(--fs-mono);text-transform:uppercase;
  letter-spacing:var(--ls-mono);color:var(--label);margin-bottom:6px}
.site-footer__nav{display:flex;flex-direction:column;gap:7px;font-size:var(--fs-sm)}
.site-footer__nav a{color:var(--on-dark-soft);border-bottom:none}
.site-footer__nav a:hover{color:var(--on-dark)}

/* ── Contact page ───────────────────────────────────────────────── */
.contact__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));
  gap:44px;align-items:start}
.contact__form{background:var(--white);border:var(--border);border-radius:var(--radius-lg);
  padding:24px;overflow:hidden}
.page-head{padding:var(--band-y) 0 0}

/* ── Logo colourway follows the ground ──────────────────────────
   The design system swaps the lockup to its white variant on the ink ground
   (logoVariant={ink?'white':'primary'} in the UI kit). Swapped by CSS so the
   ground stays a single override layer. Both files are supplied assets; the
   wordmark is never recoloured or retyped. */
.site-header__logo{content:url('/assets/logo/jdp-logo-primary-trim.png')}
:root[data-ground="ink"] .site-header__logo{content:url('/assets/logo/jdp-logo-white.png')}

/* ── Narrow phones ──────────────────────────────────────────────
   The three scene labels are wider than a 320px screen at full size.
   The control tightens rather than wrapping, which would break the pill. */
@media (max-width:400px){
  .segmented{gap:2px;padding:2px}
  .segmented button{padding:7px 9px;letter-spacing:.02em}
  .hero__demo-card{padding:22px 18px}
  .card,.card--tile{padding:22px}
  .included{padding:24px 20px}
}

/* ── Know what's working — call attribution ─────────────────────── */
.attr__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));
  gap:48px;align-items:start}
.attr__list{margin:26px 0 0;padding:0;list-style:none;display:grid;gap:11px;
  font-size:var(--fs-sm);color:var(--on-dark)}
.attr__list li{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:baseline}
.attr__list li::before{content:"\2713";color:var(--orange-soft);font-size:var(--fs-sm)}

/* The example card. An illustration, so it carries no figures at all:
   bar length is the only quantity shown, and it is unlabelled on purpose. */
.source-card{margin:0;background:var(--dark-2);border:var(--border-dark);
  border-radius:var(--radius-lg);padding:26px 24px}
.source-card__head{display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin-bottom:22px}
.source-card__title{font-family:var(--font-display);font-weight:var(--fw-display-med);
  font-size:var(--fs-card-title);color:var(--on-dark)}
.source-card__tag{font-family:var(--font-sans);font-size:var(--fs-mono);text-transform:uppercase;
  letter-spacing:var(--ls-mono);color:var(--on-dark-label);
  border:var(--border-dark);border-radius:var(--radius-pill);padding:4px 9px}
.source-card__rows{margin:0;padding:0;list-style:none;display:grid;gap:16px}
.source-card__rows li{display:grid;gap:8px}
.source-card__label{font-size:var(--fs-sm);color:var(--on-dark-soft)}
.source-card__track{display:block;height:8px;border-radius:var(--radius-pill);
  background:rgba(255,255,255,.07)}
.source-card__bar{display:block;height:100%;border-radius:var(--radius-pill);
  background:var(--blue-soft)}
.source-card__bar--accent{background:var(--orange-soft)}

/* The honest framing under the results figures. Replaced the testimonial slot:
   it does the job a quote would without naming a real customer. */
.results__note{margin-top:28px;font-size:var(--fs-body);line-height:var(--lh-body);
  color:var(--body);max-width:var(--measure-lede)}

/* The call times now carry a weekday, because which day a call landed on is the
   whole point of the off-hours scene. */
.call-row{grid-template-columns:104px 1fr auto}
.hero__window-note{margin-top:14px;font-size:var(--fs-sm);color:var(--label);text-align:center}

/* ── Hero phone number at hero scale ───────────────────────────
   The number is the hero, so it outsizes every headline on the page. Added
   2026-09-18 when the page was reordered to lead with the demo line.
   The size is not free: "949-208-7452" is 6.6x the font size wide in
   Newsreader, and the card it sits in is 640px less 56px of padding, so
   anything over 88px wraps into "949-208-" over "7452". The clamp stays
   under that at every width and nowrap stops a wrap if a fallback font ever
   measures wider. Re-measure before raising it. */
.hero__demo-card{max-width:640px}
.phone-cta--hero .phone-cta__number{font-size:clamp(34px,10vw,80px);white-space:nowrap}
.phone-cta--hero .phone-cta__label{font-size:var(--fs-mono-lg)}

/* ── The chat — texts and web leads ─────────────────────────────
   Reuses .attr__grid for the split and .window for the live card, so the chat
   reads as the same kind of product surface as the call log above it. */
.chat__list{margin:26px 0 0;padding:0;list-style:none;display:grid;gap:11px;
  font-size:var(--fs-sm);color:var(--ink)}
.chat__list li{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:baseline}
.chat__list li::before{content:"\2713";color:var(--orange);font-size:var(--fs-sm)}
.chat-window__body{padding:16px 18px 18px;border-top:var(--border)}
.chat-window__body>p{font-size:14.5px;line-height:var(--lh-body);color:var(--body)}
.chat-window__body .btn{margin-top:18px}
.chat-window__fallback{margin-top:14px;font-size:var(--fs-sm);color:var(--label)}

/* ── Lead form ──────────────────────────────────────────────────── */
.lead-form{display:grid;gap:16px}
.lead-form__field label{display:block;font-size:var(--fs-sm);color:var(--ink);margin-bottom:6px}
.lead-form__opt{font-family:var(--font-mono);font-size:var(--fs-mono);text-transform:uppercase;
  letter-spacing:var(--ls-mono);color:var(--label);margin-left:6px}
.lead-form input[type="text"],.lead-form input[type="tel"],.lead-form input[type="email"],
.lead-form select,.lead-form textarea{width:100%;font-family:var(--font-sans);font-size:16px;
  line-height:1.4;color:var(--ink);background:var(--white);border:var(--border);
  border-radius:var(--radius-sm);padding:12px 14px;appearance:none;-webkit-appearance:none}
.lead-form select{background-image:linear-gradient(45deg,transparent 50%,var(--label) 50%),
  linear-gradient(135deg,var(--label) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;
  background-repeat:no-repeat;padding-right:38px}
.lead-form textarea{resize:vertical;min-height:84px}
.lead-form input:focus-visible,.lead-form select:focus-visible,.lead-form textarea:focus-visible,
.lead-form input[type="checkbox"]:focus-visible{outline:none;box-shadow:var(--ring-focus)}
.lead-form__trap{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.lead-form__consent{display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:start}
.lead-form__consent input{width:18px;height:18px;margin-top:2px;accent-color:var(--orange)}
.lead-form__consent label{font-size:var(--fs-xs);line-height:1.5;color:var(--body)}
.lead-form__consent a{color:var(--ink)}
.lead-form__status{min-height:1.4em;font-size:var(--fs-sm);color:var(--body)}
.lead-form__status--error{color:#B42318}
.lead-form__alt{font-size:var(--fs-sm);color:var(--body)}
.lead-form__alt a{white-space:nowrap}
.lead-form__done h3{font-family:var(--font-display);font-weight:var(--fw-display);font-size:26px;
  line-height:1.2;color:var(--ink);margin-bottom:12px}
.lead-form__done p{font-size:var(--fs-body);color:var(--body)}

/* ── Legal pages ────────────────────────────────────────────────── */
.legal h1{margin-top:14px}
.legal .legal__date{margin-top:14px;font-size:var(--fs-sm);color:var(--label)}
.legal h2{font-family:var(--font-display);font-weight:var(--fw-display);font-size:24px;
  line-height:1.25;color:var(--ink);margin-top:38px}
.legal p,.legal li{font-size:var(--fs-body);line-height:1.65;color:var(--body);max-width:68ch}
.legal p{margin-top:12px}
.legal ul{margin-top:12px;padding-left:20px}
.legal li{margin-top:6px}
.legal a{color:var(--ink)}

/* Reserve the form's space so the contact page does not jump when the form appears. */
[data-lead-form-inline]{min-height:820px}
@media (max-width:640px){[data-lead-form-inline]{min-height:1010px}}