:root{--color-rust:#8a4a35;--color-cream:#f1f1f1;--color-near-black:#231f20;--color-gold:#df912a;--color-taupe:#594a47;--primary:#8a4a35;--surface:#f1f1f1;--ink:#231f20;--cta:#df912a;--secondary:#594a47;--font-display:"Archivo Black";--font-body:"Poppins"}
:root{--ink:#231f20;--surface:#f1f1f1;--surface-2:#f1f1f1;--muted:#594a47;--border:#594a47;--card:#ffffff;--danger:#8a4a35;--primary:#8a4a35;--on-primary:#ffffff;--primary-deep:#231f20;--on-primary-deep:#ffffff;--secondary:#8a4a35;--cta:#df912a;--cta-ink:#231f20}
@font-face{font-family:'Archivo Black';src:url('fonts/archivo-black-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('fonts/poppins-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('fonts/poppins-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-body,system-ui,sans-serif);color:var(--ink);
  background:var(--surface);line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
.wrap{max-width:var(--wrap,1120px);margin:0 auto;padding:0 20px}
h1,h2,h3{font-family:var(--font-display,var(--font-body,system-ui));line-height:1.12}
a{color:inherit}
:focus-visible{outline:3px solid var(--cta);outline-offset:2px}
.kicker{font-family:var(--font-display,inherit);font-size:13px;font-weight:600;
  letter-spacing:2px;text-transform:uppercase;color:var(--muted)}
.num{font-family:var(--font-display,inherit);font-variant-numeric:tabular-nums}

/* ---------- progressive reveal (opt-in: data.py `reveal: True`) ----------
   Fully visible with no JS; the reveal script adds `html.js` and a hard
   failsafe, so a blocked observer can never leave content invisible
   (CREATIVE-RULES sec.12). Ported from the reference LP. */
.rise{opacity:1;transform:none}
@media (prefers-reduced-motion:no-preference){
  html.js .rise{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
  html.js .rise.in{opacity:1;transform:none}
}

/* ---------- site header ---------- */
.site-header{padding:10px 0;background:var(--surface);border-bottom:1px solid var(--border)}
.site-header.is-sticky{position:sticky;top:0;z-index:30}
/* `flex-wrap:nowrap` -- the header never wraps to a second row; `.logo`
   shrinks (`min-width:0`) instead. The call action is NEVER hidden at any
   width (review, nonblocking, fix round 2: a phone-hiding rule relied on
   `.mobile-bar` being enabled, and nothing guarded a build without it). */
.header-row{display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:nowrap;min-height:46px}
.logo{font-family:var(--font-display,inherit);font-weight:700;font-size:18px;text-decoration:none;
  display:flex;align-items:center;min-width:0;flex:0 1 auto}
.logo img{height:38px;width:auto;flex:none}
.header-actions{display:flex;align-items:center;gap:12px;flex:none}
.header-call{display:inline-flex;align-items:center;gap:9px;flex:none;background:var(--primary);
  color:var(--on-primary);font-family:var(--font-display,inherit);font-weight:600;font-size:15px;
  letter-spacing:.3px;text-decoration:none;padding:0 18px;min-height:var(--tap,44px);
  border-radius:999px;white-space:nowrap}
.header-call svg{flex:none}
.btn.header-cta{display:inline-flex;align-items:center;padding:0 18px;min-height:var(--tap,44px);
  border-radius:7px;background:var(--cta);color:var(--cta-ink);font-family:var(--font-display,inherit);
  font-weight:600;text-decoration:none;white-space:nowrap}
/* Below the `.mobile-bar` breakpoint a body carrying `has-mobile-bar`
   already shows the primary CTA in a fixed bottom bar, so the header's own
   CTA copy drops (the call action stays). */
@media (max-width:899px){body.has-mobile-bar .header-cta{display:none}}

/* ---------- star rating ----------
   fill:currentColor on purpose, not var(--cta) -- a decorative rating icon
   is not the CTA (check_lp's check_brand_accent_only_on_cta). */
.stars{display:inline-flex;align-items:center;gap:2px;flex-wrap:wrap;color:var(--ink)}
.stars .star{width:16px;height:16px;fill:currentColor;flex:none}
.stars b{margin-left:6px;font-weight:700}
/* No `.trust-row span{display:inline-flex}` rule, on purpose (fix round 2):
   inside a flex container a `<b>` and the bare text after it become two
   anonymous flex items and the leading space of the second collapses --
   "<b>1,000+</b> Texas wells" rendered as "1,000+Texas wells". Plain
   trust-row chips stay ordinary inline boxes. Regression-tested in
   tests/test_lp_factory.py. */

/* ---------- hero: form beside the copy on desktop, stacked on mobile ----------
   .hero-photo LEADS the copy on mobile and drops to the END of the copy
   column at the desktop breakpoint, where it grows to fill the space the
   taller form card leaves beside the copy (object-fit:cover, no text on
   the photo). data.py opts out via hero.image_position:'inline'. */
.hero{padding:40px 0 44px}
.hero .wrap{display:grid;grid-template-columns:1fr;gap:28px}
.hero-copy{display:flex;flex-direction:column}
.hero-photo{border-radius:var(--radius,8px);overflow:hidden;position:relative}
.hero-photo img{width:100%;height:auto}
.hero-copy .hero-photo{order:-1;margin-bottom:18px}
.hero-copy.img-inline .hero-photo{order:0}
@media (min-width:900px){
  .hero .wrap{grid-template-columns:1.1fr .9fr;align-items:stretch;gap:44px}
  .hero-copy .hero-photo{order:5;margin:22px 0 0;flex:1 1 auto;min-height:180px}
  .hero-copy .hero-photo img{height:100%;object-fit:cover}
  .hero-copy.img-inline .hero-photo{order:0;margin:0 0 14px;flex:none;min-height:0}
  .hero-copy.img-inline .hero-photo img{height:auto}
}
.hero-copy .kicker{margin-bottom:12px}
.hero-copy h1{font-size:clamp(30px,5vw,46px);margin-bottom:14px}
.hero-copy .sub{font-size:17px;color:var(--muted);max-width:56ch}
.trust-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:20px;
  font-size:14.5px;color:var(--muted)}

/* ---------- lead form ---------- */
.lead-form{background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius-form,12px);
  box-shadow:0 10px 34px color-mix(in srgb,var(--primary) 10%,transparent);padding:24px}
.lead-form h2{font-size:21px;margin-bottom:5px}
.lead-form .form-sub{font-size:14px;color:var(--muted);margin-bottom:18px}
.field{margin-bottom:13px}
.field label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%;min-height:48px;border:1.5px solid var(--border);border-radius:7px;
  padding:0 13px;font:inherit;font-size:15.5px;background:var(--card);color:var(--ink);
  -webkit-appearance:none;appearance:none}
/* Drawn chevron from the resolved --muted slot (two gradient triangles) --
   the native select arrow differs per OS and ignores the brand palette. */
.field select{background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
  linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--primary)}
.field textarea{padding:10px 13px;min-height:88px}
.field .err{display:none;color:var(--danger);font-size:12.5px;margin-top:5px}
.field.invalid .err{display:block}
.field.invalid input,.field.invalid select{border-color:var(--danger)}
.field[hidden]{display:none}
.bot-field-wrap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.submit-btn,.step-next{width:100%;min-height:52px;border:0;border-radius:7px;margin-top:6px;
  background:var(--cta);color:var(--cta-ink);font-family:var(--font-display,inherit);
  font-weight:600;font-size:16.5px;letter-spacing:.3px;cursor:pointer}
.submit-btn:hover,.step-next:hover{filter:brightness(1.06)}
.submit-btn[hidden],.step-next[hidden]{display:none}
/* Tap choices (components._field_html type 'radio'): a real radio group,
   the input kept focusable but visually replaced by the pill. */
.field-choice{border:0;margin:0 0 15px;padding:0;min-width:0}
.field-choice legend{display:block;font-size:13px;font-weight:600;margin-bottom:8px;padding:0}
.field-choice .choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.field .choice{position:relative;display:flex;align-items:stretch;margin:0;font-weight:500;
  font-size:14.5px;line-height:1.25;cursor:pointer}
.choice input{position:absolute;opacity:0;width:1px;height:1px;margin:0;min-height:0}
.choice span{display:flex;align-items:center;width:100%;min-height:46px;padding:8px 12px;
  border:1.5px solid var(--border);border-radius:9px;background:var(--card);color:var(--ink)}
.choice input:checked + span{border-color:var(--ink);background:var(--ink);color:var(--card)}
.choice input:focus-visible + span{outline:3px solid var(--cta);outline-offset:2px}
.field-choice.invalid .choice span{border-color:var(--danger)}
/* Stepped form (form.steps): later steps are hidden only once the steps
   script runs -- with no JS every step shows and the form is one page. */
.form-step[hidden]{display:none}
.step-title{font-size:15px;line-height:1.3;margin:0 0 12px;outline:0}
.step-title .step-n{display:block;font-family:var(--font-body,inherit);font-size:11.5px;
  font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.step-back{display:inline-flex;align-items:center;gap:4px;min-height:44px;margin:-8px 0 2px -4px;
  padding:0 6px;border:0;background:none;font:inherit;font-size:14px;font-weight:600;
  color:var(--muted);cursor:pointer}
.step-back[hidden]{display:none}
.form-fine{font-size:12px;color:var(--muted);margin-top:12px;text-align:center;line-height:1.5}
.form-fine a{text-decoration:underline}
.form-fine[hidden]{display:none}
.outarea{display:none;margin-top:4px;padding:16px 18px;border:1px solid var(--border);
  border-left:4px solid var(--primary);border-radius:8px;background:var(--surface-2)}
.outarea:not([hidden]){display:block}
.outarea > b{display:block;font-family:var(--font-display,inherit);font-weight:600;
  font-size:16px;margin-bottom:6px}
.outarea-body p{font-size:14px;line-height:1.55;margin-bottom:12px;color:var(--muted)}
.outarea-call{display:inline-flex;align-items:center;justify-content:center;padding:0 22px;
  min-height:48px;border-radius:6px;font-family:var(--font-display,inherit);font-weight:600;
  font-size:16px;letter-spacing:.4px;text-decoration:none;background:var(--cta);color:var(--cta-ink)}

/* ---------- proof / stat strip -- a strong brand-colour band ---------- */
.proof{background:var(--primary);color:var(--on-primary);padding:30px 0}
.proof .wrap{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:18px;
  text-align:center}
.stat b{display:block;font-size:clamp(22px,4.2vw,32px);color:var(--on-primary)}
.stat span{font-size:12.5px;color:color-mix(in srgb,var(--on-primary) 82%,transparent);letter-spacing:.3px}

/* ---------- generic padded section + alternating band backgrounds ---------- */
.pad{padding:56px 0}
.pad.bg-a{background:var(--surface-2)}
.pad.bg-b{background:var(--card)}
.pad.bg-faq{background:var(--surface)}
.pad.bg-primary{background:var(--primary);color:var(--on-primary)}
.pad.bg-primary h2,.pad.bg-primary .kicker{color:var(--on-primary)}
.section-heading{font-size:clamp(22px,3.6vw,30px);margin:6px 0 16px}
/* section_head(): kicker + h2 + sub, centred -- the reference LP's own
   section opener. */
.section-head{max-width:640px;margin:0 auto 34px;text-align:center}
.section-head .kicker{display:block;font-size:12.5px;margin-bottom:10px}
.section-head h2{font-size:clamp(24px,4.2vw,34px);margin-bottom:10px}
.section-head p{color:var(--muted);font-size:15.5px}
.pad.bg-primary .section-head p{color:color-mix(in srgb,var(--on-primary) 85%,transparent)}
/* Prose rules apply to DIRECT children of the section's .wrap only --
   never to paragraphs/quotes inside a client's own component markup. */
.pad > .wrap > p{margin-bottom:12px}
.pad > .wrap > .kicker{margin-bottom:6px;display:block}
.pad > .wrap > blockquote{margin:0 0 18px;padding:14px 0 14px 18px;
  border-left:3px solid var(--border);font-size:17px}
.pad > .wrap > blockquote > footer{margin-top:6px;font-size:13px;color:var(--muted);font-style:normal}
.pad.bg-primary > .wrap > blockquote{border-left-color:color-mix(in srgb,var(--on-primary) 35%,transparent)}
.pad.bg-primary > .wrap > blockquote > footer{color:color-mix(in srgb,var(--on-primary) 75%,transparent)}
/* An inline text CTA ("Start My Quote ->" inside a section) -- an
   allow-listed CTA surface, so it may carry the accent underline. */
.cta-link{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display,inherit);
  font-weight:600;text-decoration:none;border-bottom:2px solid var(--cta);padding-bottom:2px}

/* ---------- mechanism steps (components.mechanism_steps) ---------- */
.steps{display:grid;gap:20px;grid-template-columns:1fr}
@media (min-width:700px){.steps{grid-template-columns:repeat(3,1fr)}}
.step .n{font-family:var(--font-display,inherit);font-weight:600;font-size:15px;
  width:40px;height:40px;border-radius:50%;background:var(--primary);color:var(--on-primary);
  display:grid;place-items:center;margin-bottom:10px}
.step > b{display:block;margin-bottom:4px}

/* ---------- FAQ: card accordions ---------- */
.faq{display:grid;gap:10px;max-width:760px;margin:0 auto}
.faq details{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:2px 18px}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:16px 0;cursor:pointer;font-family:var(--font-display,inherit);font-weight:600;
  font-size:16px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary .chev{flex:none;width:16px;height:16px;transition:transform .2s ease}
.faq details[open] summary .chev{transform:rotate(180deg)}
.faq details > p{padding:0 0 16px;color:var(--muted);font-size:15px;line-height:1.6}

/* ---------- CTA band ---------- */
.cta-band{padding:52px 0;background:var(--primary-deep);color:var(--on-primary-deep);text-align:center}
.cta-band h2{color:var(--on-primary-deep);font-size:clamp(24px,4.4vw,34px);margin-bottom:12px}
.cta-band p{max-width:52ch;margin:0 auto 26px;font-size:16px;color:color-mix(in srgb,var(--on-primary-deep) 85%,transparent)}
.cta-band .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:54px;padding:0 30px;border-radius:7px;background:var(--cta);color:var(--cta-ink);
  font-family:var(--font-display,inherit);font-weight:600;font-size:16px;text-decoration:none}
.cta-band .btn:hover{filter:brightness(1.06)}

/* ---------- site footer (components.footer) -- scoped to .site-footer,
   never a bare `footer` selector (see SCOPING above). ---------- */
.site-footer{padding:38px 0 40px;font-size:13.5px;background:var(--surface-2);color:var(--muted)}
.site-footer .wrap{display:grid;gap:20px}
.site-footer a{text-decoration:underline}
.footer-logo{display:inline-flex;align-items:center;justify-self:start}
.footer-logo img{height:28px;width:auto}
.footer-meta{display:flex;flex-wrap:wrap;gap:16px}
.footer-areas{font-size:12.5px;max-width:74ch;line-height:1.6;opacity:.85}
.footer-bottom{font-size:12px;opacity:.75;border-top:1px solid var(--border);padding-top:16px;
  display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between}
/* Dark variant: the deepest brand band, and the logo on a light plate --
   a multi-tone mark is never inverted onto a dark scrim (CREATIVE-RULES sec.9). */
.site-footer.on-dark{background:var(--primary-deep);color:var(--on-primary-deep)}
.site-footer.on-dark .footer-logo{background:var(--surface);padding:8px 12px;border-radius:8px}
.site-footer.on-dark .footer-bottom{border-top-color:color-mix(in srgb,var(--on-primary-deep) 16%,transparent)}

/* ---------- thanks page (components.thanks_card) ----------
   Every thanks default is wrapped in :where() -- zero specificity -- so a
   client's data.py `css` refines it with an ordinary selector instead of
   losing a specificity fight (fix round 3: the on-dark defaults out-ranked
   the TSD port's own `.thanks-body .next b` etc., and a `background`
   shorthand here wiped the client's background-image). Text is dimmed with
   color-mix, never `opacity`, so a client colour does not stack with it. */
:where(body.thanks-body){min-height:100vh;display:flex;align-items:flex-start;justify-content:center;
  padding:40px 20px 32px}
:where(body.thanks-body.on-dark){background-color:var(--primary-deep);color:var(--on-primary-deep)}
.card{max-width:600px;width:100%}
:where(.card .mark){width:68px;height:68px;border-radius:50%;background:var(--surface-2);color:var(--ink);
  display:flex;align-items:center;justify-content:center;margin-bottom:22px}
:where(.card h1){font-size:clamp(28px,5.6vw,42px);line-height:1.08;margin-bottom:14px}
:where(.card .lede){font-size:17px;color:var(--muted);max-width:52ch;margin-bottom:14px}
:where(.card .next){list-style:none;margin:24px 0 6px;border-top:1px solid var(--border)}
:where(.card .next li){display:grid;grid-template-columns:28px 1fr;gap:12px;padding:14px 0;
  border-bottom:1px solid var(--border);font-size:15px}
:where(.card .next li .n){font-family:var(--font-display,inherit);font-weight:600;
  font-size:13px;background:var(--surface-2);color:var(--ink);
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center}
:where(.card .next b){display:block;font-family:var(--font-display,inherit);font-weight:600;
  font-size:11px;letter-spacing:1.8px;color:var(--muted)}
:where(.card a.btn){display:inline-flex;align-items:center;gap:10px;margin-top:26px;padding:0 28px;
  min-height:52px;border-radius:6px;background:var(--cta);color:var(--cta-ink);
  font-family:var(--font-display,inherit);font-weight:600;font-size:18px;letter-spacing:.4px;
  text-decoration:none}
:where(.card .fine){font-size:13px;color:var(--muted);margin-top:22px;padding-left:14px;
  border-left:3px solid var(--border)}
:where(.on-dark .card .lede,.on-dark .card .next li,.on-dark .card .fine){color:color-mix(in srgb,var(--on-primary-deep) 85%,transparent)}
:where(.on-dark .card .next,.on-dark .card .next li){border-color:color-mix(in srgb,var(--on-primary-deep) 20%,transparent)}
:where(.on-dark .card .next b){color:var(--on-primary-deep)}

/* ---------- sticky mobile CTA bar ---------- */
.mobile-bar{position:fixed;left:0;right:0;bottom:0;display:none;gap:10px;padding:10px 14px;
  background:var(--card);border-top:1px solid var(--border);
  box-shadow:0 -6px 20px color-mix(in srgb,var(--primary) 10%,transparent);z-index:40}
@media (max-width:899px){.mobile-bar{display:flex}}
.mobile-bar a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
  min-height:50px;border-radius:8px;font-family:var(--font-display,inherit);font-weight:600;
  font-size:15px;text-decoration:none}
.mobile-bar .primary{background:var(--cta);color:var(--cta-ink)}
.mobile-bar .secondary{background:var(--surface-2);color:var(--ink);border:1.5px solid var(--border)}
body{padding-bottom:0}
@media (max-width:899px){body.has-mobile-bar{padding-bottom:72px}}

/* ---------- client layer: data.py css ---------- */

:root{--wrap:1180px;--radius:14px;--border:color-mix(in srgb,var(--ink) 14%,transparent)}
body{font-size:17px;background:var(--surface)}
h1,h2,h3{letter-spacing:-.01em}
.kicker{font-family:var(--font-body);font-weight:600;color:var(--primary);letter-spacing:2.4px}

/* header */
.site-header{background:var(--card);border-bottom:1px solid var(--border)}
.logo img{height:40px}
@media (max-width:899px){.logo img{height:34px}}

/* hero */
.hero{padding:0 0 40px;background:var(--card)}
.hero .wrap{gap:22px}
.hero-copy .hero-photo{margin:0 -20px 22px;border-radius:0}
.hero-photo img{aspect-ratio:4/3;object-fit:cover}
.hero-copy .kicker{font-size:13.5px;margin-bottom:10px}
.hero-copy h1{font-size:clamp(34px,9.2vw,62px);line-height:1.02;margin-bottom:16px;
  color:var(--ink);text-wrap:balance}
.money{display:block;margin:2px 0 16px;color:var(--ink)}
.money .spec{display:block;font-weight:600;font-size:17px;letter-spacing:.1px}
.money .spec i{font-style:normal;color:color-mix(in srgb,var(--ink) 35%,transparent);padding:0 6px}
.money .mo{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 10px;margin-top:6px;
  font-family:var(--font-display);line-height:1.15;color:var(--secondary)}
.money .mo b{font-weight:400;white-space:nowrap;font-size:clamp(26px,7vw,36px)}
.money .mo .dn{white-space:nowrap;font-size:clamp(17px,4.4vw,22px)}
.hero-copy .subtext{display:block}
.hero-copy .sub{font-size:16.5px;color:var(--muted)}
.trust-row{gap:8px;margin-top:18px}
.trust-row span{display:inline-block;padding:7px 12px;border-radius:999px;font-size:13.5px;
  font-weight:600;color:var(--ink);background:var(--surface);border:1px solid var(--border)}
/* Desktop: the land runs full-bleed across the top; the form card rides up over
   it. No scrim on the photo -- copy sits on the white ground below it. */
@media (min-width:900px){
  .hero{position:relative;padding:0 0 64px}
  .hero .wrap{grid-template-columns:1.15fr .85fr;gap:56px;align-items:start}
  .hero-copy .hero-photo{position:absolute;left:0;right:0;top:0;height:520px;margin:0;
    border-radius:0;order:0;flex:none;min-height:0}
  .hero-copy .hero-photo img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;
    object-position:50% 60%}
  .hero-copy{padding-top:560px}
  .hero-copy h1{font-size:clamp(44px,4.4vw,62px)}
  .hero #lead-form{margin-top:300px;position:relative;z-index:2}
}
.lead-form{border-radius:var(--radius);padding:26px 22px 20px;
  box-shadow:0 18px 50px color-mix(in srgb,var(--ink) 14%,transparent)}
.lead-form h2{font-size:26px;margin-bottom:6px}
.lead-form .form-sub{font-size:15px}
.field label{font-size:14px}
.field input,.field select,.field textarea{font-size:16px;background:var(--surface);border-color:var(--border)}
.submit-btn{font-family:var(--font-display);font-weight:400;font-size:18px;min-height:56px;letter-spacing:.2px}
.form-fine{text-align:left}

/* proof strip */
.proof{padding:26px 0}
.proof .wrap{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}
@media (min-width:760px){.proof .wrap{grid-template-columns:repeat(4,minmax(0,1fr))}}
.stat b{font-family:var(--font-display);font-weight:400;font-size:clamp(25px,6.4vw,36px);line-height:1.1}
.stat span{font-size:13.5px}

/* sections */
.pad{padding:64px 0}
@media (max-width:899px){.pad{padding:48px 0}}
.section-head{margin-bottom:28px}
.section-head h2{font-size:clamp(30px,7.4vw,46px);line-height:1.05}
/* No one-word last lines ("it?", "on", "persona.") on headings and card titles. */
.section-head h2,.section-heading,.cta-band h2,.oc b,.step > b,.lead-form h2{text-wrap:balance}
.gallery figcaption{text-wrap:pretty}
.nw{white-space:nowrap}  /* "I-35" never splits at its hyphen */
.section-head p{font-size:16.5px}
.note{font-size:13.5px;color:var(--muted);margin-top:14px;max-width:72ch}

.outcomes{display:grid;gap:12px;grid-template-columns:1fr 1fr}
@media (min-width:900px){.outcomes{grid-template-columns:repeat(4,1fr);gap:18px}}
.oc{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:18px 16px}
.oc b{display:block;font-family:var(--font-display);font-weight:400;font-size:19px;line-height:1.15;margin-bottom:8px}
.oc p{font-size:14.5px;color:var(--muted);line-height:1.5}

.where{display:grid;gap:22px}
@media (min-width:900px){.where{grid-template-columns:.9fr 1.1fr;gap:48px;align-items:start}}
.where-copy p{font-size:18px;margin-bottom:14px}
.maplink{font-weight:600;text-decoration:underline;text-underline-offset:3px}
.drives{list-style:none;border-top:1px solid var(--border)}
.drives li{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:baseline;
  padding:13px 0;border-bottom:1px solid var(--border);font-size:16px}
.drives .pl{font-weight:600}
.drives .mi{color:var(--muted);font-size:14px}
.drives .tm{font-family:var(--font-display);text-align:right;font-size:17px;white-space:nowrap;min-width:84px}
.drives li.big .pl,.drives li.big .tm{color:var(--primary)}

.lots-tools{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 auto 14px;max-width:880px}
.lots-wrap,#lots ~ .note{max-width:880px;margin-left:auto;margin-right:auto}
.chip{font:inherit;font-size:13.5px;font-weight:600;min-height:44px;padding:0 14px;border-radius:999px;
  border:1.5px solid var(--border);background:var(--card);color:var(--ink);cursor:pointer}
.chip.on{background:var(--ink);color:var(--card);border-color:var(--ink)}
.lots-wrap{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
table.lots{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
table.lots caption{text-align:left;padding:14px 16px;font-size:14px;font-weight:600;color:var(--muted);
  border-bottom:1px solid var(--border)}
table.lots th,table.lots td{padding:0 12px;height:52px;text-align:right;border-bottom:1px solid var(--border);font-size:15.5px}
table.lots thead th{height:44px;font-size:12.5px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);font-weight:600}
table.lots th:first-child,table.lots td:first-child{text-align:left}
table.lots tbody tr:last-child th,table.lots tbody tr:last-child td{border-bottom:0}
table.lots tbody tr:nth-child(even){background:color-mix(in srgb,var(--surface) 55%,transparent)}
table.lots td.mo{font-weight:600;color:var(--secondary)}
.lotpick{font:inherit;font-weight:600;color:var(--ink);background:none;border:0;padding:0;min-height:44px;
  cursor:pointer;text-decoration:underline;text-decoration-color:var(--border);text-underline-offset:4px}
.lotpick:hover{text-decoration-color:currentColor}
tr[hidden]{display:none}
@media (max-width:420px){table.lots th,table.lots td{padding:0 8px;font-size:14.5px}}

.here{display:grid;gap:26px}
@media (min-width:900px){.here{grid-template-columns:1fr 1fr;gap:48px;align-items:center}}
.here-photo{margin:0}
.here-photo img{border-radius:var(--radius);width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.here-lists{display:grid;gap:26px}
.here-lists h3{font-size:22px;margin-bottom:6px}
.here-lists ul{list-style:none}
.here-lists li{display:grid;gap:2px;padding:12px 0 12px 18px;border-bottom:1px solid var(--border);position:relative}
.here-lists li::before{content:"";position:absolute;left:0;top:20px;width:8px;height:8px;border-radius:50%;background:var(--primary)}
.here-lists .bring li::before{background:transparent;border:2px solid var(--muted);width:6px;height:6px}
.here-lists li b{font-size:16.5px}
.here-lists li span{font-size:15px;color:var(--muted);line-height:1.5}

.gallery{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (min-width:900px){.gallery{grid-template-columns:repeat(3,1fr);gap:16px}}
.gallery figure{margin:0}
.gallery img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:10px}
.gallery figcaption{font-size:13px;color:var(--muted);margin-top:6px;line-height:1.35}

.steps{gap:14px}
.step{display:grid;grid-template-columns:40px 1fr;column-gap:14px;align-items:start;
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:18px}
.step .n{grid-row:span 2;margin:0}
.step > b{font-family:var(--font-display);font-weight:400;font-size:20px;line-height:1.2;margin:6px 0 4px}
.step p{grid-column:2;color:var(--muted);font-size:15px}
.pad[aria-label="How it works"] .section-heading{text-align:center;font-size:clamp(28px,6.6vw,40px);margin-bottom:24px}

.cta-band{padding:60px 0}
.cta-band h2{font-size:clamp(32px,8vw,52px)}
.cta-band .btn{font-family:var(--font-display);font-weight:400;font-size:18px;min-height:58px;padding:0 34px}

.faq summary{font-size:17px}
.faq details > p{font-size:15.5px}

/* footer */
.site-footer{background:var(--primary-deep);color:color-mix(in srgb,var(--on-primary-deep) 78%,transparent)}
.site-footer a{color:var(--on-primary-deep)}
.footer-entity p{margin-bottom:8px;max-width:80ch}
.footer-entity .eholine .eho{flex:none}
.footer-entity .eholine{display:flex;align-items:center;gap:12px;font-weight:600;color:var(--on-primary-deep);margin-top:6px}
.footer-bottom{border-top-color:color-mix(in srgb,var(--on-primary-deep) 18%,transparent)}
.mobile-bar .primary{font-family:var(--font-display);font-weight:400;font-size:17px}

/* thanks */
:where(body.thanks-body){background:var(--surface)}
.thanks-page .card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:32px 26px}
.thanks-page .card h1{font-size:clamp(30px,7vw,44px)}