/* ============================================================================
   NOTL Homewatch — shared design tokens & base resets
   Linked from site/index.html, site/intake.html and backend/index.html.

   Only rules that were genuinely identical across all three pages live here.
   Page-specific components (.btn, .topbar, .panel, .svc, .plan-opt, .freq,
   .modal, .toast, .done-card, .field, .badge, etc.) have real per-page
   differences (sizing, stickiness, which states exist) and stay inline in
   each page's own <style> block rather than being forced into one shape.
   ============================================================================ */

:root{
  --ink:#072946;
  --bg:#F3F5F2;
  --surface:#FFFFFF;
  --pine:#072946;
  --pine-deep:#072946;
  --pine-hover:#041B30;
  --pine-soft:#E2E9F0;
  --amber:#A66B10;
  --amber-soft:#F6ECDA;
  --danger:#A63B2E;
  --danger-soft:#F7E6E3;
  --muted:#66736C;
  --line:#D9E0D9;
  --radius:10px;
  --shadow:0 1px 2px rgba(7,41,70,.06), 0 4px 14px rgba(7,41,70,.07);
  --shadow-lift:0 2px 4px rgba(7,41,70,.06), 0 18px 44px rgba(7,41,70,.13);
  --font-display:"Geist", system-ui, sans-serif;
  --font-body:"Geist", system-ui, sans-serif;
  --font-mono:"Geist Mono", ui-monospace, monospace;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--font-display);margin:0;line-height:1.15}
button{font-family:inherit;font-size:inherit;cursor:pointer}
input,textarea,select{font-family:inherit;font-size:inherit;color:inherit}
a{color:var(--pine-deep)}
:focus-visible{outline:2px solid var(--pine);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

.eyebrow{
  font-family:var(--font-body);font-size:14.5px;color:var(--muted);
}
.hidden{display:none!important}

/* Brand lockup on light surfaces — drawn from lockup.svg as a mask so it
   takes the surrounding text colour. */
.logo{
  display:block;height:44px;aspect-ratio:127.23/66.59;flex:none;
  background:currentColor;
  -webkit-mask:url(lockup.svg) center/contain no-repeat;
          mask:url(lockup.svg) center/contain no-repeat;
}
/* White lockup (solid eye, knocked-out house) for the navy bars, preloader
   and PDF — used as-is from lockup-white.svg. */
.logo-white{display:block;height:44px;width:auto;flex:none}

/* Preloader — navy cover with the lockup wiping up from the bottom and fading in,
   tiers slightly staggered: "NOTL" + stars, then "Home Watch", then the rules
   + eye mark. Each tier is the full white lockup clipped to its band
   (band edges are % of the SVG's 451.32 viewBox height). JS adds .done on
   window load; the delayed fade-out is the fallback if that never runs. */
.preloader{
  position:fixed;inset:0;z-index:1000;
  display:flex;align-items:center;justify-content:center;
  background:var(--pine-deep);color:#F3F5F2;
  transition:opacity .55s ease, visibility .55s ease;
  animation:preloader-out .55s ease 3.5s forwards;
}
.preloader.done{opacity:0;visibility:hidden}
.preloader .tiers{position:relative;width:min(230px,58vw);aspect-ratio:883.72/451.32}
.preloader .tiers img{position:absolute;inset:0;width:100%;height:100%}
.preloader .t1{animation:tier1 .5s cubic-bezier(.65,0,.35,1) .05s both}
.preloader .t2{animation:tier2 .5s cubic-bezier(.65,0,.35,1) .15s both}
.preloader .t3{animation:tier3 .5s cubic-bezier(.65,0,.35,1) .25s both}
@keyframes tier1{from{clip-path:inset(27% 0 73% 0);opacity:0}to{clip-path:inset(0 0 73% 0)}}
@keyframes tier2{from{clip-path:inset(56.5% 0 43.5% 0);opacity:0}to{clip-path:inset(27% 0 43.5% 0)}}
@keyframes tier3{from{clip-path:inset(100% 0 0 0);opacity:0}to{clip-path:inset(56.5% 0 0 0)}}
@keyframes preloader-out{to{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion:reduce){
  .preloader .tiers img{animation:none}
}