/* LeasePace marketing site — shared tokens, header, footer, contact tile.
   Values come from the design handoff (Sep 2026). Page-specific layout stays inline in each page. */
:root{
  /* Layout unit. The design used min(1vw,1.5vh), which left side gutters on any window wider than 1.5:1
     (most laptops). Full width up to 2.15:1 (the Market section, which must fit one screen, holds 46.3 units); only ultra-wide monitors get gutters. */
  --u:min(1vw,2.15vh);
  --pu:min(1vw,2.15vh); /* the page unit, for boxes that redefine --u for their own contents (the chat panel) */
  --accent:#2563eb;--ink:#0B1220;--paper:#FAFBFC;
  --body:#3B4152;--muted:#5B6172;--faint:#8A8F9C;
  --hair:rgba(11,18,32,.18);
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink);font-family:Manrope,system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-wrap:pretty}
body{overflow-x:clip}
a{color:inherit;text-decoration:none}
a:hover{color:var(--accent)}
img{max-width:100%}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

@keyframes riseIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes marqueeScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Desktop and phone are separate layouts, switched at 820px. */
@media (min-width:821px){.only-m{display:none!important}}
@media (max-width:820px){.only-d{display:none!important}}

/* Hover states (inline colours need !important to be overridden) */
.h-ink:hover{background:var(--ink)!important;color:var(--paper)!important;border-color:var(--ink)!important}
.h-acc:hover{background:var(--accent)!important;color:var(--paper)!important}
.h-lift:hover{background:#3b76f6!important;color:#fff!important}
.h-white:hover{background:#fff!important;color:var(--ink)!important}
.h-plain:hover{color:inherit!important}
.h-card{transition:box-shadow .25s}
.h-card:hover{color:var(--ink)!important;box-shadow:0 18px 40px rgba(11,18,32,.12)}

/* Current page in the header nav */
body[data-page="home"] [data-nav="home"],
body[data-page="pace"] [data-nav="pace"],
body[data-page="resources"] [data-nav="resources"],
body[data-page="pricing"] [data-nav="pricing"]{color:var(--accent)}

/* Contact tile: fades up when it scrolls into view (site.js adds .is-in) */
.reveal{opacity:0;transform:translateY(70px) scale(.96);transition:opacity 1.1s cubic-bezier(.16,1,.3,1),transform 1.1s cubic-bezier(.16,1,.3,1)}
.reveal.is-in{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}

/* Lead form fields on the dark contact tile */
.lp-field{height:calc(2.8*var(--u));padding:0 calc(.9*var(--u));border-radius:calc(.5*var(--u));border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:#fff;font-family:Manrope,system-ui,sans-serif;font-size:calc(.85*var(--u));width:100%;margin:0;min-width:0}
.lp-field::placeholder{color:#8A90A0}
textarea.lp-field{height:calc(4.6*var(--u));padding:calc(.9*var(--u));resize:vertical}
select.lp-field{appearance:none;-webkit-appearance:none;-moz-appearance:none;line-height:calc(2.8*var(--u));padding-right:calc(2.4*var(--u));color:#8A90A0;background:rgba(255,255,255,.04) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23B8BFCE' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right calc(.9*var(--u)) center/calc(.7*var(--u)) auto}
select.lp-field.has-value{color:#fff}
select.lp-field option{background:#0B1220;color:#fff}
.lp-field:focus{outline:none;border-color:var(--accent)}
/* The dark contact card: a dark hover would vanish into it, so these buttons turn white instead */
.on-dark.h-ink:not(.mag):hover{background:#fff!important;color:var(--ink)!important;border-color:#fff!important}
/* Phone contact card: thumb-sized fields, 16px text so phones don't zoom in */
@media (max-width:820px){.lp-field{height:48px;padding:0 14px;border-radius:8px;font-size:16px}textarea.lp-field{height:96px;padding:12px 14px}select.lp-field{line-height:48px;padding-right:36px;background-position:right 14px center}}