/* ===========================================================
   MowingMate — styles.css
   Plain CSS. No build step. Edit anything you like.
   Brand tokens live in :root below — change them in one place.
   =========================================================== */

:root{
  --blade:      hsl(162 72% 14%);   /* deep green — section backgrounds */
  --blade-dark: hsl(162 72% 9%);    /* darker green — footer           */
  --lime:       hsl(70 100% 50%);   /* #D5FF00 — buttons, accents      */
  --basalt:     hsl(150 4% 7%);     /* near-black text                 */
  --foundry:    hsl(150 10% 98%);   /* off-white page background       */
  --boundary:   hsl(22 100% 50%);   /* orange — property boundaries    */
  --muted:      hsl(150 10% 94%);
  --muted-fg:   hsl(150 5% 35%);
  --border:     hsl(150 8% 88%);
  --card:       #fff;

  --font-head: "Archivo Black", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --radius: .25rem;
  --wrap: 1120px;
  --pad: clamp(1.25rem, 4vw, 2.5rem);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

body{
  margin:0;
  background:var(--foundry);
  color:var(--basalt);
  font-family:var(--font-body);
  font-size:clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

h1,h2,h3{
  font-family:var(--font-head);
  font-weight:400;
  line-height:1.08;
  letter-spacing:-.015em;
  margin:0;
  text-wrap:balance;
}
h1{ font-size:clamp(2.25rem, 1.4rem + 4.2vw, 4.25rem); }
h2{ font-size:clamp(1.75rem, 1.2rem + 2.6vw, 3rem); }
h3{ font-size:clamp(1.125rem, 1rem + .6vw, 1.375rem); }

p{ margin:0 0 1rem; text-wrap:pretty; }
p:last-child{ margin-bottom:0; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
.section{ padding-block:clamp(3.5rem, 2rem + 7vw, 7rem); }
.section--dark{ background:var(--blade); color:#fff; }
.section--basalt{ background:var(--basalt); color:#fff; }

/* skip link */
.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--lime); color:var(--basalt);
  padding:.75rem 1.25rem; font-family:var(--font-head); font-size:.8rem;
}
.skip:focus{ left:.5rem; top:.5rem; }

:focus-visible{ outline:3px solid var(--lime); outline-offset:3px; }
.section--dark :focus-visible, .section--basalt :focus-visible{ outline-color:var(--lime); }

/* ---------- eyebrow / mono labels ---------- */
.eyebrow{
  font-family:var(--font-mono);
  font-size:.6875rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted-fg);
  margin:0 0 1rem;
}
.section--dark .eyebrow,
.section--basalt .eyebrow{ color:var(--lime); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--font-head); font-size:.8125rem; letter-spacing:.08em; text-transform:uppercase;
  padding:1rem 1.75rem;
  border:2px solid transparent; border-radius:var(--radius);
  text-decoration:none; cursor:pointer;
  transition:transform .12s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn--primary{ background:var(--lime); color:var(--basalt); }
.btn--primary:hover{ background:#e4ff4d; }
.btn--ghost{ background:transparent; color:currentColor; border-color:currentColor; }
.btn--ghost:hover{ background:var(--blade); color:var(--lime); }
.section--dark .btn--ghost:hover{ background:#fff; color:var(--blade); }
.btn--block{ width:100%; }
.btn--sm{ padding:.7rem 1.15rem; font-size:.6875rem; }

.btn-row{ display:flex; flex-wrap:wrap; gap:.875rem; margin-top:2rem; }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:hsl(150 10% 98% / .88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  min-height:72px;
}
.logo{
  font-family:var(--font-head); font-size:1.25rem; letter-spacing:-.02em;
  text-decoration:none; color:var(--blade);
}
.logo span{ color:var(--boundary); }
.nav{ display:flex; align-items:center; gap:.625rem; }
.nav a.text-link{
  font-family:var(--font-mono); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; color:var(--muted-fg); padding:.5rem .5rem;
}
.nav a.text-link:hover{ color:var(--blade); }
@media (max-width:560px){ .nav .btn{ display:none; } }

/* ---------- hero ---------- */
.hero{ padding-block:clamp(3rem, 1.5rem + 6vw, 6rem) clamp(2rem,1rem + 4vw,4rem); }
.hero__lede{
  font-size:clamp(1.0625rem, 1rem + .45vw, 1.3125rem);
  color:var(--muted-fg);
  max-width:56ch;
  margin-top:1.5rem;
}
.hero__note{
  font-family:var(--font-mono); font-size:.6875rem; letter-spacing:.1em;
  color:var(--muted-fg); margin-top:1.25rem;
}

/* hero visual */
.shot{
  margin-top:clamp(2.5rem,1.5rem + 4vw,4rem);
  border:1px solid var(--border); border-radius:var(--radius);
  background:var(--card); overflow:hidden;
  box-shadow:0 24px 60px -30px hsl(162 72% 14% / .45);
}
.shot__bar{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.625rem 1rem; border-bottom:1px solid var(--border);
  font-family:var(--font-mono); font-size:.6875rem; color:var(--muted-fg);
}
.shot__bar strong{ color:var(--basalt); font-weight:500; }
.shot__body{ position:relative; }
.shot__body img{ width:100%; height:auto; }
.shot__tag{
  position:absolute; right:1rem; bottom:1rem;
  background:var(--lime); color:var(--basalt);
  font-family:var(--font-head); font-size:1rem;
  padding:.5rem .875rem; border-radius:var(--radius);
  box-shadow:0 8px 24px -8px rgb(0 0 0 / .5);
}
.shot__meta{
  position:absolute; left:1rem; bottom:1rem;
  background:hsl(150 4% 7% / .82); color:#fff;
  font-family:var(--font-mono); font-size:.75rem;
  padding:.5rem .875rem; border-radius:var(--radius);
}
.caption{
  font-family:var(--font-mono); font-size:.6875rem; letter-spacing:.06em;
  color:var(--muted-fg); text-align:center; margin-top:.875rem;
}

/* ---------- generic grids ---------- */
.grid{ display:grid; gap:1.25rem; }
.grid--3{ grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); }
.grid--2{ grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); }
.lede{ max-width:60ch; font-size:1.0625rem; margin-top:1.5rem; }
.section--dark .lede{ color:hsl(150 20% 88%); }

/* cost strip */
.strip{ display:flex; flex-wrap:wrap; gap:.625rem; margin-top:2.25rem; }
.chip{
  font-family:var(--font-mono); font-size:.75rem;
  border:1px solid hsl(0 0% 100% / .25); border-radius:var(--radius);
  padding:.5rem .875rem;
}

/* ---------- steps ---------- */
.step{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.75rem 1.5rem;
}
.step__num{
  font-family:var(--font-head); font-size:2rem; color:var(--lime);
  -webkit-text-stroke:1px var(--blade); line-height:1; display:block; margin-bottom:.75rem;
}
.step h3{ margin-bottom:.625rem; }
.step p{ color:var(--muted-fg); font-size:.9375rem; }

/* ---------- before / after compare ---------- */
.compare{
  position:relative; margin-top:2.5rem;
  border:1px solid hsl(0 0% 100% / .2); border-radius:var(--radius);
  overflow:hidden; background:var(--blade-dark);
  user-select:none; touch-action:pan-y;
  --compare-pad: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
.compare__pane{ padding:var(--compare-pad); min-height:240px;
  display:flex; flex-direction:column; justify-content:center; }

/* The two panes sit on top of each other and the slider clips the top one,
   so each pane's copy has to live in its own half of the box. Otherwise the
   clip line at rest falls straight through the text — or past it entirely,
   which is what was happening: the "before" copy was invisible until you
   dragged the handle left. After sits left, before sits right. */
.compare__after{ background:var(--blade-dark); padding-right:54%; }
.compare__before{
  position:absolute; inset:0; background:var(--basalt);
  padding-left:54%;
  clip-path:inset(0 0 0 var(--split, 50%));
  display:flex; flex-direction:column; justify-content:center;
}
.compare__label{
  font-family:var(--font-mono); font-size:.6875rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--lime); margin-bottom:.75rem; display:block;
}
.compare__before .compare__label{ color:var(--boundary); }
.compare__pane p{ max-width:38ch; font-size:.9375rem; color:hsl(150 15% 85%); }
.compare__handle{
  position:absolute; top:0; bottom:0; left:var(--split, 50%);
  width:2px; background:var(--lime); cursor:ew-resize; z-index:3;
}
.compare__grip{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:44px; height:44px; border-radius:50%;
  background:var(--lime); color:var(--basalt);
  display:grid; place-items:center;
  font-family:var(--font-head); font-size:.875rem;
  box-shadow:0 6px 18px -4px rgb(0 0 0 / .6);
}
.compare__hint{
  font-family:var(--font-mono); font-size:.6875rem; letter-spacing:.14em;
  text-align:center; color:hsl(150 12% 70%); margin-top:.875rem;
}

/* ---------- calibration dials ---------- */
.dials{ display:grid; gap:.75rem; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); margin-top:2rem; }
.dial{
  border:1px solid var(--border); border-radius:var(--radius);
  background:var(--card); padding:1rem;
}
.dial__k{ font-family:var(--font-mono); font-size:.625rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-fg); }
.dial__v{ font-family:var(--font-head); font-size:1.375rem; margin-top:.375rem; color:var(--blade); }

/* ---------- math stats ---------- */
.stats{ display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); margin-top:2.5rem; }
.stat{ border:1px solid hsl(0 0% 100% / .2); border-radius:var(--radius); padding:1.5rem; }
.stat__k{ font-family:var(--font-mono); font-size:.625rem; letter-spacing:.14em; text-transform:uppercase; color:var(--lime); }
.stat__v{ font-family:var(--font-head); font-size:clamp(1.75rem,1.4rem + 1.4vw,2.5rem); margin:.5rem 0 .375rem; }
.stat__d{ font-size:.875rem; color:hsl(150 15% 80%); }
.fineprint{ font-family:var(--font-mono); font-size:.6875rem; color:hsl(150 12% 68%); margin-top:1.75rem; }
.section--light .fineprint{ color:var(--muted-fg); }

/* ---------- pricing ---------- */
.founding{
  border:2px solid var(--lime); border-radius:var(--radius);
  background:var(--blade-dark); color:#fff;
  padding:clamp(1.75rem,1.2rem + 2vw,2.75rem);
  margin-top:2.5rem;
}
.founding__grid{ display:grid; gap:2rem; }
@media (min-width:900px){
  .founding__grid{ grid-template-columns:minmax(220px,300px) 1fr; gap:3.5rem; align-items:start; }
}
.founding__sub{ font-family:var(--font-mono); font-size:.75rem; letter-spacing:.06em;
  color:hsl(150 15% 80%); margin:.625rem 0 0; }
.founding__price{ font-family:var(--font-head); font-size:clamp(2.5rem,2rem + 3vw,4rem); color:var(--lime); line-height:1; }
.founding__price small{ font-family:var(--font-mono); font-size:.875rem; color:#fff; letter-spacing:.05em; }
.spots{
  display:inline-block; margin-top:1.25rem;
  font-family:var(--font-mono); font-size:.75rem; letter-spacing:.12em;
  border:1px solid var(--lime); color:var(--lime);
  padding:.5rem .875rem; border-radius:var(--radius); white-space:nowrap;
}
.ticks{ list-style:none; margin:0; padding:0; display:grid; gap:.875rem; }
.ticks li{ display:flex; gap:.75rem; align-items:flex-start; font-size:.9375rem; color:hsl(150 15% 88%); }
.ticks li::before{
  content:"✓"; color:var(--lime); font-family:var(--font-head);
  font-size:.875rem; flex:0 0 auto; line-height:1.5;
}

.tiers{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); margin-top:1.5rem; }
.tier{
  border:1px solid var(--border); border-radius:var(--radius);
  background:var(--card); padding:1.5rem; display:flex; flex-direction:column;
}
.tier__name{ font-family:var(--font-head); font-size:1.0625rem; color:var(--blade); }
.tier__price{ font-family:var(--font-head); font-size:2rem; margin:.625rem 0 .25rem; color:var(--basalt); line-height:1; }
.tier__price small{ font-family:var(--font-mono); font-size:.75rem; color:var(--muted-fg); }
.tier__lookups{ font-family:var(--font-mono); font-size:.75rem; letter-spacing:.06em; color:var(--muted-fg); }
.tier__unit{ font-size:.8125rem; color:var(--muted-fg); margin-top:.75rem; padding-top:.75rem; border-top:1px solid var(--border); }
.tier--free .tier__price{ color:var(--muted-fg); }

/* ---------- FAQ ---------- */
.faq{ margin-top:2.5rem; border-top:1px solid var(--border); }
.faq details{ border-bottom:1px solid var(--border); }
.faq summary{
  cursor:pointer; list-style:none; padding:1.25rem 2.5rem 1.25rem 0; position:relative;
  font-family:var(--font-head); font-size:1.0625rem; color:var(--blade);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; position:absolute; right:.25rem; top:1.1rem;
  font-family:var(--font-head); font-size:1.25rem; color:var(--boundary);
  transition:transform .15s ease;
}
.faq details[open] summary::after{ content:"–"; }
.faq p{ padding:0 0 1.5rem; color:var(--muted-fg); font-size:.9375rem; max-width:65ch; }

/* ---------- final CTA ---------- */
.final{ text-align:center; }
.final .btn-row{ justify-content:center; }

/* ---------- footer ---------- */
.site-footer{ background:var(--blade-dark); color:hsl(150 15% 78%); padding-block:3rem; }
.site-footer .wrap{ display:flex; flex-wrap:wrap; gap:1.5rem; justify-content:space-between; align-items:center; }
.site-footer a{ color:hsl(150 15% 85%); text-decoration:none; }
.site-footer a:hover{ color:var(--lime); }
.footer-links{ display:flex; flex-wrap:wrap; gap:1.25rem; font-family:var(--font-mono); font-size:.75rem; letter-spacing:.06em; }
.footer-legal{ font-family:var(--font-mono); font-size:.6875rem; width:100%; color:hsl(150 12% 60%); }

/* ---------- legal pages ---------- */
.legal{ max-width:75ch; padding-block:clamp(2.5rem,2rem + 3vw,4.5rem); }
.legal h1{ font-size:clamp(2rem,1.5rem + 2.5vw,3rem); margin-bottom:.75rem; }
.legal h2{ font-size:clamp(1.25rem,1.1rem + .8vw,1.625rem); margin:2.5rem 0 .875rem; }
.legal p, .legal li{ color:var(--muted-fg); font-size:.9375rem; }
.legal ul{ padding-left:1.25rem; display:grid; gap:.5rem; margin:0 0 1rem; }
.legal .updated{ font-family:var(--font-mono); font-size:.75rem; letter-spacing:.08em; color:var(--muted-fg); }
.legal a{ color:var(--blade); text-decoration:underline; text-underline-offset:2px; }
.callout{
  border-left:3px solid var(--boundary); background:var(--muted);
  padding:1rem 1.25rem; margin:1.5rem 0; font-size:.875rem; color:var(--basalt);
}

/* ---------- compare: stack on small screens ----------
   Overlaying two blocks of text in a 390px column is unreadable,
   so below 720px we show both panes stacked and drop the slider. */
@media (max-width: 720px){
  .compare{ display:grid; }
  .compare__after{ padding-right:var(--compare-pad); }
  .compare__before{
    position:static; clip-path:none;
    padding-left:var(--compare-pad);
    border-top:1px solid hsl(0 0% 100% / .18);
  }
  .compare__handle, .compare__hint{ display:none; }
  .compare__pane{ min-height:0; }
}

/* ---------- image fallback ----------
   If an image host ever goes away, show a labelled panel
   instead of a broken-image icon. */
.shot__body.img-missing{
  min-height:clamp(180px, 34vw, 380px);
  display:grid; place-items:center;
  background:
    repeating-linear-gradient(45deg,
      hsl(162 30% 92%) 0 12px, hsl(162 25% 88%) 12px 24px);
}
.shot__body.img-missing::before{
  content:attr(data-fallback);
  font-family:var(--font-mono); font-size:.75rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--blade); text-align:center; padding:1rem;
}