/* Landing mockup (D83, rebuilt as the OutFour seasonal-splice concept v11 under D239; copy and layout: SPEC v6.1,
   D70, D71). Colours, focus ring, radii and type families come from css/tokens.css (a byte copy of option-d's).
   Theme: index.html is in the landing's fixed theme (landing review 1, a D23 amendment for this page only): its
   <html> carries data-theme="dark" in the markup and it does not load boot.js, so the header, features, footer and
   body take the dark tokens whatever the device says. The legal pages still follow the theme boot.js resolves (D23,
   D71), and their header's two logos (D239) switch by that resolved :root[data-theme]: no theme logic of their own.
   The hero carries data-theme="dark" on every page that has one (D71 item 2).
   One accent (option-d components.md rule 5): Find a lake (accent fill, on-accent text) and Open map (accent-ink text).
   Layout switch and art switch: 900 px. Below it (phones and tablets) the phone art and arrangement; from 720 px the
   tablet takes the desktop's inline search bar and the features' three columns.
   Text sizes are in rem so an enlarged default font size grows the copy; the art layers keep their own ratio. */

/* Manrope: declared in option-d's app.css (not in tokens.css), so it is declared again here, same file and range */
@font-face {
  font-family: "Manrope Variable"; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url(/assets/fonts/manrope-a30ddcd3.woff2) format("woff2-variations"), url(/assets/fonts/manrope-a30ddcd3.woff2) format("woff2");
}

:root {
  --lp-gutter: 20px;
  --lp-header-h: 56px;             /* phone; 66 px from 900 px */
  --lp-scrim: 10 18 25;            /* the dark --surface (#0A1219) as rgb channels, for the scrim */
  --lp-pad-l: max(var(--lp-gutter), env(safe-area-inset-left, 0px));
  --lp-pad-r: max(var(--lp-gutter), env(safe-area-inset-right, 0px));
  --lp-logo-w: 150px;              /* the logo's canvas; its visible artwork is 83.2% x 65.6% of it (measured bbox, rev 4) */
}
@media (min-width: 900px) { :root { --lp-gutter: 56px; --lp-header-h: 66px; --lp-logo-w: 180px; } }

/* the focus pair, from web/src/styles/tokens.css (the app's): option-d's dark halo (#CFF9F6) sat next to its own ring
   color, so the two-tone ring read as one tone; tokens.css stays a byte copy, so the pair is set here. Light is the
   same pair in both files */
[data-theme="dark"] { --focus: #7FF3EE; --focus-halo: #0E1A20; }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--surface); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body.lp {
  margin: 0; min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column;
  background: var(--surface); color: var(--ink); font: var(--t-body); font-size: 0.9375rem;
  -webkit-font-smoothing: antialiased;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
a { color: inherit; }
a, button { -webkit-tap-highlight-color: transparent; }

/* ---------------------------------------------------------------- header (follows the theme) */
.lp-header {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  min-height: calc(var(--lp-header-h) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) var(--lp-pad-r) 0 var(--lp-pad-l);
  background: var(--surface); color: var(--ink);
  border-bottom: 1px solid rgb(127 148 163 / 0.4);                              /* fallback: dark control-border */
  border-bottom: 1px solid color-mix(in srgb, var(--control-border) 40%, transparent);   /* phone: control-border at 40% (D83) */
}
@media (min-width: 900px) { .lp-header { border-bottom: 1px solid var(--hairline); } }   /* desktop: the hairline */
/* the link is the logo's own box: transparent, no background behind the artwork (brand README rule 4). The PNG's
   canvas padding is 9.25% at the left (D257 revision 4: artwork from x 201 of 2172), so the negative margin lines the
   visible artwork up with the page gutter */
.brand {
  display: block; flex: none; margin-left: calc(var(--lp-logo-w) * -0.0925);
  border-radius: var(--rd-ctl); background: transparent;
}
.brand-logo { display: block; width: var(--lp-logo-w); height: auto; aspect-ratio: 3 / 1; }
/* one logo per resolved theme; the other is display:none, so it is neither drawn nor announced. boot.js sets
   data-theme in <head> before first paint, so the right one is there from the first frame */
:root[data-theme="dark"] .brand-logo--light, :root:not([data-theme="dark"]) .brand-logo--dark { display: none; }
.lp-header-slot { flex: none; }   /* kept empty on purpose (D70, D71) */

.lp-main { flex: 1 0 auto; display: flex; flex-direction: column; }

/* ---------------------------------------------------------------- hero (always the dark set) */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  flex: 1 0 auto; display: flex; min-height: min(100vh, 760px); min-height: min(100svh, 760px);
  color: var(--ink); color-scheme: dark;
  background: var(--surface);        /* the image failed, is still loading, or ends above a tall hero: dark surface */
}
/* the art layer keeps the art's own ratio: full width, top-anchored, never taller than its ratio allows. A hero
   taller than the art (large text, short wide windows) shows the dark surface below it instead of enlarging the
   art until spring (left) or winter (right) is cropped away */
.hero-art {
  position: absolute; top: 0; left: 0; z-index: -2;
  display: block; width: 100%; max-height: 100%;
  aspect-ratio: 852 / 1846;
}
.hero-art img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
}
/* the art's foot fades into the surface, so where the layer ends above the hero's foot there is no hard edge */
.hero-art::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18%; pointer-events: none;
  background: linear-gradient(180deg, rgb(var(--lp-scrim) / 0), rgb(var(--lp-scrim) / 1));
}
.hero-inner {
  position: relative; width: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  /* phone: the copy starts under the shoreline (the four seasons fill the art's top ~46-63% of its width) */
  padding: calc(50vw + 8px) var(--lp-pad-r) 24px var(--lp-pad-l);
}
.hero-copy { position: relative; isolation: isolate; flex: none; display: flex; flex-direction: column; }
/* the scrim, phone: under the whole copy block (eyebrow to explainer) and out to the hero's edges and foot;
   it fades in over the 96 px above the eyebrow, so the shoreline above stays clear */
.hero-copy::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: -96px; bottom: -24px; left: calc(-1 * var(--lp-pad-l)); right: calc(-1 * var(--lp-pad-r));
  background: linear-gradient(180deg, rgb(var(--lp-scrim) / 0) 0, rgb(var(--lp-scrim) / 0.78) 96px,
                                      rgb(var(--lp-scrim) / 0.78) 100%);
}
.hero-lead { max-width: 560px; }

.eyebrow {
  margin: 0 0 12px; font: 650 0.8125rem/1.3 var(--font-ui); letter-spacing: 0.12em; color: var(--ink);
}
.headline {
  margin: 0 0 28px; color: var(--ink);
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.5rem, 12.5vw, 3.25rem);   /* phone: 45 px at 360, 48.75 at 390; one line each (~6.5 em) */
  line-height: 1.05; letter-spacing: -0.025em; overflow-wrap: break-word;
}
.headline span { display: block; }

/* search: phone = full-width field, then a full-width button */
.search { margin: 0; }
.search-bar { display: grid; gap: 10px; }
.field {
  position: relative; display: flex; align-items: center; min-height: 3.25rem;
  background: var(--surface-2); border: 1px solid var(--control-border); border-radius: var(--rd-ctl);
}
.field-icon {
  position: absolute; left: 14px; top: 50%; width: 22px; height: 22px; margin-top: -11px; pointer-events: none;
  fill: none; stroke: var(--ink-2); stroke-width: 1.75; stroke-linecap: round;
}
.field input {
  flex: 1; min-width: 0; width: 100%; min-height: calc(3.25rem - 2px); margin: 0;
  padding: 0 14px 0 46px; border: 0; border-radius: inherit; background: transparent;
  color: var(--ink); font: 500 1rem/1.2 var(--font-ui);   /* 16 px: no zoom-on-focus on iOS */
  -webkit-appearance: none; appearance: none;
}
.field input::placeholder { color: var(--ink-2); opacity: 1; }
/* the two-tone ring from tokens.css, drawn on the whole field rather than the bare input */
.field input:focus-visible { outline: none; box-shadow: none; }
.field:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 5px var(--focus-halo); }

.btn-find {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 3.25rem; margin: 0; padding: 0 22px; border: 0; border-radius: var(--rd-ctl);
  background: var(--accent); color: var(--on-accent);
  font: 700 1rem/1.15 var(--font-ui); cursor: pointer;
  transition: background-color var(--d-fast) var(--ease-out);
}
.btn-find:hover { background: var(--accent-ink); }

.hint { margin: 10px 0 0; font: 600 0.875rem/1.35 var(--font-ui); color: var(--ink); }
.hint:empty { margin: 0; }

/* Open map + explainer: one row, 16 px under the search on every width (the desktop's row form); it wraps to two
   lines only when the row runs out of width (large text) */
.alt { margin-top: 16px; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; }
.open-map {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  color: var(--accent-ink); font: 650 1rem/1.2 var(--font-ui); text-decoration: none;
  border-radius: var(--rd-tag);
}
.open-map:hover { text-decoration: underline; text-underline-offset: 3px; }
.explainer {
  margin: 0 0 0 14px; padding-left: 14px; border-left: 1px solid var(--control-border);
  font: 500 0.875rem/1.5 var(--font-ui); color: var(--ink);
}

/* ---------------------------------------------------------------- the features (under the hero on every width)
   phones: a list on the page's surface; from 720 px three columns; from 900 px the desktop strip (below) */
.features { display: block; flex: none; background: var(--surface); border-top: 1px solid var(--hairline); }
.features-list {
  list-style: none; margin: 0; display: grid; gap: 20px;
  padding: 24px max(24px, env(safe-area-inset-right, 0px)) 24px max(24px, env(safe-area-inset-left, 0px));
}
.feature { display: flex; align-items: flex-start; gap: 14px; }
.feature-icon {
  flex: none; width: 24px; height: 24px; margin-top: 1px;
  fill: none; stroke: var(--ink); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.feature-title { margin: 0 0 2px; font: 650 1rem/1.3 var(--font-ui); color: var(--ink); }
.feature-text { margin: 0; font: 500 0.875rem/1.45 var(--font-ui); color: var(--ink-2); }

/* ---------------------------------------------------------------- footer (follows the theme) */
.lp-footer {
  flex: none; background: var(--surface); border-top: 1px solid var(--hairline);
  padding: 6px var(--lp-pad-r) calc(6px + env(safe-area-inset-bottom, 0px)) var(--lp-pad-l);
}
.footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; }
.footer-links li { display: flex; align-items: center; }
.footer-links li + li::before { content: ""; width: 1px; height: 16px; background: var(--control-border); opacity: 0.5; }
.footer-links a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 clamp(14px, 5vw, 22px);
  color: var(--ink-2); font: 500 0.8125rem/1.3 var(--font-ui); text-decoration: none; border-radius: var(--rd-tag);
}
.footer-links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.lp-home .footer-links a { font-size: 0.875rem; }
/* legal-1: on phones the support address takes its own centered row under the three page links, so no row starts
   with a divider */
@media (max-width: 599.98px) {
  .footer-links li:last-child { flex-basis: 100%; justify-content: center; }
  .footer-links li:last-child::before { display: none; }
}

/* ---------------------------------------------------------------- placeholder pages (disclaimer, privacy, terms) */
.doc { flex: 1 0 auto; width: 100%; max-width: 760px; padding: 48px var(--lp-pad-r) 48px var(--lp-pad-l); }
.doc h1 { margin: 0 0 16px; font: var(--td-name); font-size: 1.75rem; color: var(--ink); }
.doc p { margin: 0 0 20px; color: var(--ink-2); }
.doc a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--accent-ink); border-radius: var(--rd-tag); text-underline-offset: 3px;
}
/* legal-1 (GP-2): the legal pages. A link inside a sentence stays inline (the 44 px box is the back link's, the
   page's last paragraph) */
.doc p:not(:last-child) a { display: inline; min-height: 0; }

/* ---------------------------------------------------------------- tablet, 600 to 899.98 px: the phone arrangement
   with a larger headline; the copy starts under the shoreline as on phones (its padding is a share of the width) */
@media (min-width: 600px) and (max-width: 899.98px) {
  .headline { font-size: 3.5rem; }
  .hero-inner { padding-top: calc(50vw + 16px); }
}
@media (min-width: 720px) and (max-width: 899.98px) {
  .headline { font-size: 4rem; }
  .features-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 28px var(--lp-pad-r) 28px var(--lp-pad-l); }
  .feature { padding: 4px 16px; gap: 12px; border-left: 1px solid var(--hairline); }
  .feature:first-child { padding-left: 0; border-left: 0; }
}

/* ---------------------------------------------------------------- 720 px and up: the integrated field + button */
@media (min-width: 720px) {
  .search-bar {
    display: flex; align-items: stretch; gap: 6px; min-height: 4.5rem; padding: 6px;
    background: var(--surface-2); border: 1px solid var(--control-border); border-radius: 12px;
  }
  /* the ring goes round the whole bar, not the field inside it */
  .field:focus-within { outline: none; box-shadow: none; }
  .search-bar:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 5px var(--focus-halo); }
  /* the hint floats under the bar, so an empty submit does not push Open map down (in flow on phones) */
  .search { position: relative; }
  .hint { position: absolute; left: 0; top: 100%; margin-top: 8px; }
  .hint:empty { margin-top: 8px; }
  .field { flex: 1 1 auto; min-width: 0; min-height: 0; border: 0; background: transparent; border-radius: 8px; }
  .field-icon { left: 12px; }
  .btn-find { flex: none; min-height: 0; border-radius: 8px; padding: 0 24px; }
}

/* ---------------------------------------------------------------- desktop, 900 px and up */
@media (min-width: 900px) {
  /* the hero is never shorter than 520 px, and on a wide window tall enough to show most of the art's shoreline */
  .hero { min-height: max(520px, min(45vw, 760px)); }
  .hero-art { aspect-ratio: 1672 / 941; }
  /* the copy sits low on the left, over open water under the shoreline (concept v11 board). The 15vw floor keeps
     its top under spring's birches (the art's top ~27%, the art being 56.3vw tall); a taller copy (large text, short
     windows) grows the hero and the page scrolls, rather than covering spring */
  .hero-inner { justify-content: flex-end; padding-top: 15vw; padding-bottom: 48px; }
  .hero-copy { flex: none; max-width: 780px; }

  /* the scrim, desktop: a feathered block behind the copy column only, from the hero's left edge to 240 px past the
     column and from 112 px above the eyebrow to the hero's foot; the seasons above and to the right stay clear.
     Without mask support it is a plain block, still readable */
  .hero-copy::before {
    /* the bottom reaches past the hero's foot (the hero's overflow clips it): a hero taller than its copy (the
       hero grows to fill a tall window, so the footer sits at its bottom) would otherwise show a lighter band of water
       between the scrim's bottom edge and the art's foot fade */
    top: -112px; bottom: -100vh; left: calc(-1 * var(--lp-pad-l)); right: -240px;
    background: rgb(var(--lp-scrim) / 0.78);   /* 0.78 as on phones: at 0.74 Open map measured 8.78:1 (p5) at 1920 x 1080 */
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 320px), transparent 100%),
                        linear-gradient(180deg, transparent 0, #000 112px);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 320px), transparent 100%),
                linear-gradient(180deg, transparent 0, #000 112px);
    mask-composite: intersect;
  }
  .hero-lead { max-width: 780px; }
  .eyebrow { margin-bottom: 16px; font-size: 0.8125rem; letter-spacing: 0.16em; }
  .headline { margin-bottom: 36px; font-size: clamp(4rem, 5.4vw, 5.5rem); font-weight: 800; letter-spacing: -0.03em; }

  /* the integrated field + button (the 720 px block above), in the desktop's larger type */
  .field input { font-size: 1.0625rem; padding-left: 46px; }
  .btn-find { font-size: 1.0625rem; }

  .alt { margin-top: 18px; }
  .open-map { font-size: 1.0625rem; }
  .explainer {
    margin: 0 0 0 16px; padding-left: 16px; border-left: 1px solid var(--control-border);
    font-size: 0.9375rem; line-height: 1.5rem;
  }

  /* the feature strip: the three columns with the desktop's larger icons and titles */
  .features-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 32px var(--lp-pad-r) 32px var(--lp-pad-l); }
  .feature { gap: 16px; padding: 4px 28px; border-left: 1px solid var(--hairline); }
  .feature:first-child { padding-left: 0; border-left: 0; }
  .feature-icon { width: 40px; height: 40px; margin-top: 0; stroke-width: 1.5; }
  .feature-title { margin: 2px 0 4px; font-size: 1.125rem; }

  .footer-links { justify-content: flex-end; }
}
/* the feature strip between 900 and 1199 px: tighter, so the three columns don't crowd */
@media (min-width: 900px) and (max-width: 1199.98px) {
  .feature { padding: 4px 20px; gap: 12px; }
  .feature-text { text-wrap: balance; }   /* 14 px, as everywhere (it was 13.5 px here) */
}
@media (min-width: 900px) {
  .footer-links a { padding: 0 20px; }
  .footer-links li:last-child a { padding-right: 0; }
}

/* ---------------------------------------------------------------- reduced motion, forced colors */
@media (prefers-reduced-motion: reduce) {
  .btn-find { transition: none; }
}
@media (forced-colors: active) {
  .hero-copy::before, .hero-art::after { display: none; }
}

/* ---- the SEO sections (c127 section 2; pages/landing.ts LANDING_SEO_CSS, appended by the prerender) */
.lp-seo { flex: none; background: var(--surface); border-top: 1px solid var(--hairline); padding: 48px var(--lp-pad-r) 48px var(--lp-pad-l); }
.lp-seo-inner { max-width: 1200px; margin: 0 auto; }
.lp-seo h2 { margin: 0 0 16px; font: 650 1.25rem/1.3 var(--font-ui); color: var(--ink); }
.lp-seo ul { list-style: none; margin: 0; padding: 0; display: grid; column-gap: 24px; }
.lp-lakes { grid-template-columns: 1fr; }
.lp-counties { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 480px) { .lp-lakes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 600px) { .lp-counties { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 900px) { .lp-lakes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .lp-counties { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.lp-seo a { display: flex; flex-wrap: wrap; align-items: center; min-height: 2rem; color: var(--ink-2); font: 500 0.9375rem/1.4 var(--font-ui); text-decoration: none; }
@media (pointer: coarse) { .lp-seo a { min-height: 44px; } }
.lp-seo a:hover, .lp-seo a:focus-visible { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.lp-lakes .nm { color: var(--ink); font-weight: 600; }
.lp-lakes .ct { color: var(--ink-3); }
.lp-main > .lp-seo:last-child { padding-bottom: 80px; }