@import url(/fonts/fonts.css);
/* lf.css -- LandForge's pages. The three marked blocks are FieldQuest's own lines, lifted (tools/lift_from_fieldquest.py); the rest is LandForge's. */
/* FQ-TOKENS BEGIN -- lifted by tools/lift_from_fieldquest.py; do not edit here */
:root{--bg:#e8edf2;--surface:#f4f7fa;--card:#ffffff;--border:#c8d2dc;--border2:#a8b8c8;--ink:#0d1821;--ink2:#2c3e50;--muted:#5a6f82;--faint:#8a9fb5;--amber:#c97b00;--amber-bg:#fff3d0;--teal:#007a6e;--teal-bg:#d0f0ec;--red:#c0290a;--red-bg:#fde8e3;--blue:#0057b8;--blue-bg:#ddeeff;--nav-bg:#1a1818;--nav-ink:#f3efeb;--nav-h:110px;--tab-h:48px;--spine-w:36px;}
:root[data-theme="dark"]{--bg:#151313;--surface:#201d1d;--card:#322d2d;--border:#4a4444;--border2:#474242;--ink:#f0ece8;--ink2:#c9c2bd;--muted:#8f8681;--faint:#5e5753;--amber:#e8a23c;--amber-bg:#2a1d08;--teal:#2ec9b8;--teal-bg:#0f2926;--red:#ef5a44;--red-bg:#2e0d07;--blue:#5a9bff;--blue-bg:#10233a;--nav-bg:#141212;--nav-ink:#f0ece8;}
:root{--shadow:0 1px 2px rgba(13,24,33,.08),0 4px 14px rgba(13,24,33,.14);--shadow2:0 10px 32px rgba(13,24,33,.32)}
:root{--shadow-drop:drop-shadow(0 1px 2px rgba(13,24,33,.08)) drop-shadow(0 4px 14px rgba(13,24,33,.14))}   /* b118.344: --shadow as filter layers, for a masked box */
:root[data-theme="dark"]{--shadow-drop:drop-shadow(0 1px 2px rgba(0,0,0,.6)) drop-shadow(0 6px 18px rgba(0,0,0,.5))}
:root[data-theme="dark"]{--shadow:0 1px 2px rgba(0,0,0,.6),0 6px 18px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.04);--shadow2:0 14px 40px rgba(0,0,0,.68)}
:root{--shadow-chip:0 1px 2px rgba(13,24,33,.14),0 2px 6px rgba(13,24,33,.12)}
:root[data-theme="dark"]{--shadow-chip:0 1px 2px rgba(0,0,0,.65),0 2px 7px rgba(0,0,0,.5)}
/* FQ-TOKENS END */
/* FQW-TITLEBAR BEGIN -- a card's heading is the C2's title bar: dark, light words (WCAG 4.5:1), edge to edge, the strip a
   folded card keeps. ONE source (the newest water client), lifted byte for byte by kit/lift_nav.py; desktop_stage_test D10
   compares the copies. */
/* b118.278: GREY-BLACK, NOT SLATE. Owner, 2026-10-22: "make the color on those headers closer to grey black.. they look to
   have a blue hue." #2c3e50 (slate) -> #2a2c2f, the sub ink #b9c7d5 (blue) -> #b8bcc2; the dark theme was already grey-black. */
:root{--titlebar:#2a2c2f;--titlebar-ink:#f4f5f6;--titlebar-sub:#b8bcc2}
:root[data-theme="dark"]{--titlebar:#151313;--titlebar-ink:#f0ece8;--titlebar-sub:#a99f99}
/* FQW-TITLEBAR END */
/* FQW-PROSE BEGIN -- the reading pages' look (Safety, Scout, About): ONE source, client/lib/fq_prose.css, lifted byte for
   byte by kit/lift_nav.py; verify/prose_card_test.py compares the copies and measures the render.
   Owner, 2026-10-30: "the Safety on the water header should be bigger, (same for Scout Page). I think this page and other
   like it should have the card treatment applied judiciously. we have centered and left aligned in the same page." So: the
   page title is a real headline; every section is the app's card with the C2 title bar (the lifted FQW-TITLEBAR tokens) as
   its heading; nothing folds (a reading page hides nothing behind a tap); everything reads from the left, the round figure
   included; the body type is a size a phone reads without zooming. */
h1{font-size:28px;line-height:1.15;margin:10px 0 6px;letter-spacing:.01em}
.lede{font-size:15px;color:var(--ink2);line-height:1.5;margin:0 0 12px}
section.part{margin-top:14px;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:12px 14px;box-shadow:var(--shadow)}
section.part>h2:first-child{margin:-12px -14px 10px;padding:9px 14px;background:var(--titlebar,#2a2c2f);color:var(--titlebar-ink,#f4f5f6);border-radius:10px 10px 0 0;font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-weight:700}
section.part h2:not(:first-child){font-size:15px;margin:16px 0 6px;color:var(--ink)}
section.part p{font-size:14.5px;line-height:1.55;color:var(--ink2);margin:0 0 8px}
section.part ul{margin:0 0 8px;padding-left:18px;font-size:14.5px;line-height:1.55;color:var(--ink2)}
section.part li{margin-bottom:6px}
section.part li b,section.part p b{color:var(--ink)}
.cta{display:inline-block;border-radius:10px;padding:9px 16px;font-size:12px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;background:var(--teal);color:#fff;box-shadow:var(--shadow-chip)}
.cta:hover{text-decoration:none;filter:brightness(1.08)}
.hero-fig{display:block;height:96px;width:96px;object-fit:contain;padding:10px;margin:2px 0 10px;border-radius:50%;background:radial-gradient(circle at 50% 40%,#2a2117 0%,#191410 60%,#0d0c0c 100%);border:1.5px solid #7a5c33;box-shadow:var(--shadow)}
.note{font-size:12.5px;color:var(--muted);line-height:1.45;margin-top:10px}
/* 2026-10-30, owner: "center the cards on the page and the scout icon". On the desktop the reading column (800 px) sits in
   the middle of the station's 1240, not against its left edge; a page's own emblem (a figure straight under main, as Scout's
   glyph) is centred over it. Words still read from the left, and a figure inside a card stays at the card's left. */
main > section.part,main > .lede,main > h1,main > .doctrine,main > .agency{margin-left:auto;margin-right:auto}
main > .hero-fig{margin-left:auto;margin-right:auto}
/* and the title over that emblem is centred with it (owner, 2026-10-30: "the word scout is not centered on the page") */
main > h1:has(+ .hero-fig){text-align:center}
/* the picture steps (a numbered step, a caption, the real screen) and the box a tap opens it large in */
.steps{list-style:none;margin:10px 0 4px;padding:0;display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width:600px){.steps{grid-template-columns:1fr 1fr}.steps.wide{grid-template-columns:1fr}}
.steps li{display:flex;gap:10px;align-items:flex-start;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:10px;box-shadow:var(--shadow);min-width:0}
.steps li>div{min-width:0;flex:1}
.steps .n{flex:0 0 26px;width:26px;height:26px;border-radius:50%;background:var(--teal);color:#fff;font-size:13px;font-weight:900;display:flex;align-items:center;justify-content:center;margin-top:1px}
.steps .cap{font-size:13.5px;color:var(--ink2);line-height:1.4;margin-bottom:6px}
.steps img{display:block;width:100%;height:auto;border-radius:8px;border:1px solid var(--border);cursor:zoom-in;background:#fff}
.shot-box{display:none;position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.86);align-items:center;justify-content:center;padding:16px;cursor:zoom-out}
.shot-box.on{display:flex}
.shot-box img{max-width:100%;max-height:92vh;width:auto;height:auto;border-radius:10px;box-shadow:0 10px 40px rgba(0,0,0,.6);background:#fff}
.shot-box .shot-cap{position:fixed;left:0;right:0;bottom:12px;text-align:center;color:#f0ece8;font-size:13px;padding:0 16px}
/* on a phone the step's number floats beside its caption and the picture spans the step -- inside a card the side-by-side
   number left the picture 252 px wide at 390, under the 280 the owner's "make them larger" set (safety_page_test S8) */
@media (max-width:599px){.steps li{display:block}.steps .n{float:left;margin:0 8px 4px 0}.steps .cap{min-height:26px}.steps img{clear:both}}
/* a COMING SOON tag beside a heading or a line (Scout; Safety's low-water crossings) */
.soon{display:inline-block;font-size:10px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;background:var(--amber-bg);color:var(--amber);border:1px solid var(--amber);border-radius:999px;padding:2px 8px;margin-left:6px;vertical-align:middle;box-shadow:var(--shadow-chip)}
/* FQW-PROSE END */

/* ---- LandForge's own ---- */
/* LF-SKIN BEGIN -- THE LOOK IS A SKIN: every colour, face, radius and shadow LandForge's pages wear is a named value HERE, read
   off the finished pages of the Bubble site on 2026-11-14 (the landing, the intake, the report, the profile, the admin board):
   slate bars, a forest-green field, gold capitals, white cards with a deep shadow, green buttons in Cinzel capitals, Poppins for
   reading. The FieldQuest token names above are re-pointed, so the lifted blocks draw in LandForge's colours without an edit;
   a rule below names a token, never a literal. */
:root{--bg:#f5fffd;--surface:#f1f8f5;--card:#ffffff;--border:#cfe0d8;--border2:#a9c4b8;--ink:#10201a;--ink2:#2b4238;--muted:#557266;--faint:#8aa79b;
  --teal:#2e936c;--teal-bg:#dff3ea;--blue:#1c7a58;--blue-bg:#e4f5ee;--nav-bg:#0b1410;--nav-ink:#ffffff;--titlebar:#12251a;--titlebar-ink:#ffffff;--titlebar-sub:#b9cdd4;
  --lf-slate:#0b1410;--lf-green:#12251a;--lf-gold:#dab950;--lf-card-edge:rgba(218,185,80,.55);--lf-gold-ink:#7a5a12;--lf-btn:#dab950;--lf-btn-lite:#f0dc94;--lf-btn-ink:#fff3d6;--lf-bronze-1:#b98a4e;--lf-bronze-2:#8a5f2c;--lf-bronze-3:#6b4720;--lf-bronze-edge:#3b2610;--lf-bronze-lite:#f1d9a6;--lf-plate-mid:#2f5a45;--lf-plate-wash-1:rgba(10,52,32,.50);--lf-plate-wash-2:rgba(9,46,28,.60);--lf-plate-foot:rgba(11,20,16,.92);--lf-metal-1:#fff3bf;--lf-metal-2:#f3d267;--lf-metal-3:#d9a521;--lf-metal-4:#97650d;--lf-line:#24402b;--lf-bronze:#6b5330;--lf-own:#089c2b;--lf-agent:#0205d3;
  --lf-on-dark:#ffffff;--lf-on-dark-2:rgba(255,255,255,.72);--lf-on-dark-3:rgba(255,255,255,.5);--lf-rule:rgba(255,255,255,.75);
  --lf-sans:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;--lf-caps:'Cinzel',Georgia,serif;--lf-mark:'Playfair Display',Georgia,serif;--lf-serif:'Crimson Pro',Georgia,serif;
  --lf-r:20px;--lf-r-panel:28px;--lf-r-field:6px;--lf-r-step:40px;
  --lf-shadow:4px 6px 12px rgba(0,0,0,.42);--lf-shadow-soft:0 3px 10px rgba(0,0,0,.28);--lf-text-shadow:2px 3px 4px rgba(0,0,0,.65);
  --shadow:var(--lf-shadow);--shadow-chip:var(--lf-shadow-soft)}
/* the report reads at night: the Bubble report's own near-black green, gold headings, a book face */
body.lf-night{--bg:#000000;--surface:#0a150c;--card:#060e07;--border:#1c3a22;--border2:#2a5232;--ink:#e8e0d0;--ink2:#9ab89d;--muted:#6ec97a;--faint:#6a8a6d;
  --teal-bg:#0d1f0f;--blue:#6ec97a;--blue-bg:#0d1f0f;--amber-bg:#1d1a08;--red-bg:#2a0d08;--titlebar:#0d1f0f;--titlebar-ink:#dab950;--lf-fig:#dab950;--lf-gold-ink:#dab950;
  --shadow:0 0 0 1px #1c3a22;--lf-shadow:0 0 0 1px #1c3a22}
/* LF-SKIN END */
*{box-sizing:border-box}
html{background:var(--lf-slate)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--lf-sans);font-size:15px;min-height:100vh;display:flex;flex-direction:column}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
/* THREE VIEWS, ONE COLUMN VARIABLE -- FieldQuest's breakpoints: phone is the viewport, tablet 600, desktop 900. A band runs
   the window's width; what is IN it sits in the column. */
html{--col:100vw;--col-read:100vw}
@media (min-width:600px){html{--col:600px;--col-read:600px}}
@media (min-width:900px){html{--col:1040px;--col-read:720px}}
main{flex:1;display:flex;flex-direction:column;max-width:none;margin:0;padding:0}
.lf-in{width:100%;max-width:var(--col);margin:0 auto;padding:0 16px}
.lf-in.read{max-width:var(--col-read)}
@media (min-width:900px){.lf-in{padding:0 24px}}
.lf-band{padding:34px 0}
.lf-band.fill{flex:1}
.lf-band.green{background:var(--lf-green);color:var(--lf-on-dark)}
.lf-band.slate{background:var(--lf-slate);color:var(--lf-on-dark)}
/* THE TOPO GROUND, ONE RULE FOR EVERY WORKING AND READING PAGE (owner, 2026-11-14: "Ide like the topo background on the sign in
   screen and any other pages that need reworked from the rental template"). A page whose content sits on the full green band
   wears the plate's terrain across its head, under the same wash as the landing, fading into the band's own green -- so a long
   page (the terms, a pin's cards) runs on into plain green instead of stretching the picture. */
.lf-band.green.fill{position:relative;overflow:hidden}
.lf-band.green.fill::before{content:"";position:absolute;left:0;right:0;top:0;height:min(100%,760px);pointer-events:none;
  background:linear-gradient(180deg,var(--lf-plate-wash-1),var(--lf-plate-wash-2) 50%,var(--lf-green)),url(/img/terrain_plate.jpg) center top/cover no-repeat}
.lf-band.green.fill>.lf-in{position:relative;z-index:1}
.lf-band.green.fill .lf-panel{background:rgba(8,26,16,.74);border:1px solid var(--lf-line)}
.lf-band.light{background:var(--bg);color:var(--ink)}
.lf-band h1,.lf-band>.lf-in>h2{font-family:var(--lf-sans);font-weight:700;text-align:center;margin:0 0 14px;line-height:1.12}
.lf-band h1{font-size:34px}
.lf-band>.lf-in>h2{font-size:30px}
@media (min-width:900px){.lf-band h1{font-size:46px}.lf-band>.lf-in>h2{font-size:38px}}
.lf-band.green h1,.lf-band.slate h1,.lf-band.green>.lf-in>h2,.lf-band.slate>.lf-in>h2{color:var(--lf-on-dark);text-shadow:var(--lf-text-shadow)}
.lf-band .lede{text-align:center;font-size:16px;line-height:1.5;margin:0 auto 18px;max-width:640px}
.lf-band.green .lede,.lf-band.slate .lede{color:var(--lf-on-dark)}
.lf-band.green>.lf-in>.note,.lf-band.slate>.lf-in>.note{color:var(--lf-on-dark-2);text-align:center}
.lf-band.green>.lf-in>p a,.lf-band.slate>.lf-in>p a{color:var(--lf-gold)}
.lf-center{text-align:center}
/* a card: white, round, a deep shadow; its heading is the slate bar (the lifted title bar, in the skin's colours) */
section.part{border-radius:var(--lf-r);border:0;padding:16px 18px;margin-top:18px;color:var(--ink)}
/* on a dark band the card's title bar is the band's own green and sinks into it below the terrain (owner, 2026-11-15: "the headers
   are almost the same color as the dark green and they dissapear"): the card wears a thin gold edge there, bar included. */
.lf-band.green section.part,.lf-band.slate section.part{border:1px solid var(--lf-card-edge)}
section.part>h2:first-child{margin:-16px -18px 14px;padding:11px 18px;border-radius:var(--lf-r) var(--lf-r) 0 0;font-family:var(--lf-caps);font-size:14px;letter-spacing:.1em}
section.part h2:not(:first-child){font-family:var(--lf-sans);font-weight:600}
/* a panel: the profile page's round green field with white rules, for a form that sits on a light page */
.lf-panel{background:var(--lf-green);color:var(--lf-on-dark);border-radius:var(--lf-r-panel);padding:22px 18px;box-shadow:var(--lf-shadow-soft)}
.lf-panel hr{border:0;border-top:1px solid var(--lf-rule);margin:18px 0}
/* the bar: slate, the anvil at the left, the pages, then what this device can do; on a phone the pages fold under a button */
.lf-bar{background:var(--lf-slate);color:var(--lf-on-dark);position:relative;z-index:20}
.lf-bar-in{max-width:var(--col);margin:0 auto;padding:6px 16px;display:flex;align-items:center;gap:8px;min-height:52px}
@media (min-width:900px){.lf-bar-in{padding:6px 24px}}
/* the mark, in FieldQuest's manner (owner, 2026-11-14: "I want a better looking anvil ... the fieldquest feel"): a gold anvil in
   its ring, a hairline, the name in the same gold */
.lf-name{display:flex;align-items:center;gap:10px;font-family:var(--lf-mark);font-size:24px;font-weight:700;letter-spacing:.005em;color:var(--lf-gold)}
/* the anvil stands a little taller than the L of the name (owner, 2026-11-14: "just larger than the L in LandForge") */
.lf-name img{height:20px;width:auto;display:block}
.lf-name i{display:block;width:1.5px;height:26px;background:linear-gradient(var(--lf-metal-2),var(--lf-metal-4))}
.lf-name span{background:linear-gradient(var(--lf-metal-1),var(--lf-metal-2) 30%,var(--lf-metal-3) 62%,var(--lf-metal-4));-webkit-background-clip:text;background-clip:text;color:transparent}
.lf-name:hover{text-decoration:none}
.lf-links{margin-left:auto;display:flex;align-items:center;gap:4px}
.lf-links a,.lf-links button{font:inherit;font-size:14px;color:var(--lf-on-dark);background:none;border:0;padding:8px 10px;border-radius:var(--lf-r-field);cursor:pointer;white-space:nowrap}
.lf-links a:hover,.lf-links button:hover{text-decoration:none;background:rgba(255,255,255,.1)}
.lf-links a.on{color:var(--lf-gold)}
.lf-links a.go{font-family:var(--lf-caps);font-weight:700;font-variant:small-caps;letter-spacing:.04em;border:1px solid var(--lf-gold);color:var(--lf-gold);margin-left:6px}
.lf-menu{display:none;margin-left:auto;font:inherit;background:none;border:0;color:var(--lf-on-dark);padding:8px;cursor:pointer;border-radius:var(--lf-r-field)}
.lf-menu svg{display:block}
@media (max-width:899px){
  .lf-menu{display:block}
  .lf-links{display:none;position:absolute;left:0;right:0;top:100%;margin:0;flex-direction:column;align-items:stretch;gap:0;background:var(--lf-slate);padding:6px 12px 14px;box-shadow:var(--lf-shadow-soft);max-height:70vh;overflow:auto;overscroll-behavior:contain}
  .lf-bar.open .lf-links{display:flex}
  .lf-links a,.lf-links button{text-align:left;font-size:16px;padding:12px 8px;border-bottom:1px solid rgba(255,255,255,.12);border-radius:0}
  .lf-links a.go{margin:12px 0 0;text-align:center;border-radius:var(--lf-r-field);border:1px solid var(--lf-gold)}
}
.lf-maint{background:var(--lf-gold);color:#1a1400;text-align:center;font-weight:600;font-size:14px;line-height:1.35;padding:8px 16px}
/* the foot: slate, three lists, the crest, the legal line */
footer{background:var(--lf-slate);color:var(--lf-on-dark);padding:28px 0 22px;font-size:14px;max-width:none;margin:0;line-height:1.5}
.lf-foot-cols{display:grid;grid-template-columns:repeat(3,auto);justify-content:space-between;gap:18px}
.lf-foot-cols h3{font-size:19px;font-weight:500;margin:0 0 8px;color:var(--lf-on-dark)}
.lf-foot-cols a{display:block;color:var(--lf-on-dark-3);padding:3px 0}
.lf-foot-cols a:hover{color:var(--lf-on-dark)}
.lf-foot-mark{text-align:center;margin-top:26px}
.lf-foot-mark img{width:58px;height:auto;border:1px solid var(--lf-on-dark-3);display:block;margin:0 auto 8px}
.lf-foot-mark b{font-size:18px}
.lf-foot-legal{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin-top:8px}
.lf-foot-legal a,.lf-foot-legal span{color:var(--lf-on-dark)}
.lf-foot-small{text-align:center;font-size:11px;color:var(--lf-on-dark-3);margin-top:12px}
/* buttons: green, Cinzel capitals, a shadow under them */
/* FORGED BRONZE (owner, 2026-11-14, chosen from four rendered): a bevelled plate in the shield's own metal, cream capitals */
.lf-btn{font-family:var(--lf-caps);display:inline-block;border:1px solid var(--lf-bronze-edge);border-radius:4px;padding:11px 22px;font-size:15px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1.15;text-align:center;
  background:linear-gradient(180deg,var(--lf-bronze-1),var(--lf-bronze-2) 48%,var(--lf-bronze-3));color:var(--lf-btn-ink);text-shadow:0 1px 1px rgba(0,0,0,.5);
  box-shadow:inset 0 1px 0 rgba(255,236,190,.55),inset 0 -2px 0 rgba(0,0,0,.28),0 5px 14px rgba(0,0,0,.45);cursor:pointer}
.lf-btn:hover{filter:brightness(1.08);text-decoration:none}
.lf-btn[disabled]{opacity:.55;cursor:default}
.lf-btn.quiet{background:#f7f1e3;color:#5a3b14;border:1px solid var(--lf-bronze-1);text-shadow:none;box-shadow:0 3px 10px rgba(0,0,0,.25)}
.lf-btn.line{background:rgba(20,14,6,.38);color:var(--lf-bronze-lite);border:1px solid var(--lf-bronze-1);box-shadow:0 5px 14px rgba(0,0,0,.3)}
.lf-btn.big{font-size:16px;padding:13px 26px}
.lf-acts{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0 2px}
.lf-acts.mid{justify-content:center}
/* a form inside a card or a panel */
.lf-form{display:grid;grid-template-columns:1fr;gap:12px;margin:4px 0}
.lf-form .half{display:grid;gap:12px}
@media (min-width:600px){.lf-form .half{grid-template-columns:1fr 1fr}}
.lf-field label{display:block;font-size:14px;font-weight:500;color:var(--ink2);margin-bottom:4px}
.lf-panel .lf-field label{color:var(--lf-on-dark)}
.lf-field input[type=text],.lf-field input[type=tel],.lf-field input[type=email],.lf-field input[type=number],.lf-field select,.lf-field textarea{width:100%;font-family:var(--lf-sans);font-size:16px;color:var(--ink);background:#fff;border:1px solid var(--border2);border-radius:var(--lf-r-field);padding:11px 12px;box-shadow:var(--lf-shadow-soft)}
.lf-field textarea{min-height:92px;resize:vertical}
.lf-field .hint{font-size:12.5px;color:var(--muted);line-height:1.4;margin-top:4px}
.lf-check{display:flex;align-items:center;gap:9px;font-size:14.5px;color:var(--ink2)}
.lf-check input{width:20px;height:20px;accent-color:var(--lf-btn);flex:0 0 auto}
/* a set of tick boxes: two tidy columns at every width (six stacked singly ran a phone screen long and ragged) */
.lf-ticks{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px}
.lf-form.ob{border-top:1px solid var(--border);padding-top:12px;margin-top:8px}
/* a line that says a state: what is wrong, what is waiting, what is not open */
.lf-say{margin:12px 0;padding:11px 14px;border-radius:12px;font-size:14px;line-height:1.45;background:var(--blue-bg);border-left:4px solid var(--blue);color:var(--ink)}
.lf-say.bad{background:var(--red-bg);border-left-color:var(--red)}
.lf-say.wait{background:var(--amber-bg);border-left-color:var(--amber)}
.lf-say ul{margin:4px 0 0;padding-left:18px}
.lf-say:empty{display:none}
/* ---- the landing ---- */
/* THE PLATE: the shield on real ground. Three layers under the words -- the lidar hillshade, a dark green wash that keeps the
   words readable, and the contour lines lit faintly over both. */
.lf-plate{position:relative;background:var(--lf-plate-mid) url(/img/terrain_plate.jpg) center/cover;color:var(--lf-on-dark);padding:40px 0 30px;overflow:hidden}
/* the wash that sets the depth: HALFWAY between the dark plate and the map's own mint, deepening to the bar's colour at the foot */
.lf-plate::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--lf-plate-wash-1),var(--lf-plate-wash-2) 62%,var(--lf-plate-foot))}
.lf-plate .lf-in{position:relative;z-index:1}
.lf-plate .lf-hero{display:block;text-align:center}
.lf-plate .lf-hero h1{text-align:center;font-size:30px;margin:24px auto 6px;max-width:760px;text-shadow:var(--lf-text-shadow)}
.lf-plate .lf-hero .lf-tag,.lf-plate .lf-hero .lede{text-align:center;margin-left:auto;margin-right:auto}
.lf-plate .lede{font-family:var(--lf-serif);font-style:italic;font-size:19px;color:#eef6f0;text-shadow:0 1px 3px rgba(0,0,0,.5)}
@media (min-width:900px){.lf-plate{padding:54px 0 36px}.lf-plate .lf-hero h1{font-size:44px}}
.lf-shield{display:block;margin:0 auto;width:min(300px,62vw);height:auto;border-radius:3px;box-shadow:0 0 0 1px var(--lf-bronze),0 18px 60px rgba(0,0,0,.85),0 0 90px rgba(218,185,80,.22)}
.lf-terr{background:#0d1a11;border:1px solid var(--lf-line);border-radius:14px;overflow:hidden;color:var(--lf-on-dark)}
.lf-terr .pic{aspect-ratio:16/10;background:#0d1a11 center/cover no-repeat}
.lf-terr .cap{padding:14px 16px 16px}
.lf-terr span{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--lf-gold)}
.lf-terr h3{font-size:18px;font-weight:600;margin:2px 0 4px}
.lf-terr p{font-size:13.5px;line-height:1.45;margin:0;color:var(--lf-on-dark-2)}
.lf-kicker{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--lf-gold);text-align:center;margin:0 0 6px}
.lf-pitch{align-items:start;margin-top:8px}
.lf-pitch ul{margin:0;padding-left:20px;font-size:15.5px;line-height:1.5}
.lf-pitch li{margin-bottom:12px;color:var(--lf-on-dark-2)}
.lf-pitch li b{color:var(--lf-on-dark)}
.lf-pitch a,.lf-terr a{color:var(--lf-gold);text-decoration:underline}
.lf-prices{width:100%;border-collapse:collapse;font-size:15.5px;background:#0d1a11;border:1px solid var(--lf-line);border-radius:14px;overflow:hidden}
.lf-prices td{padding:11px 16px;border-top:1px solid var(--lf-line)}
.lf-prices tr:first-child td{border-top:0}
.lf-prices td:last-child{text-align:right;white-space:nowrap}
.lf-prices b{font-family:var(--lf-caps);font-size:20px;color:var(--lf-gold)}
.lf-prices .s{font-size:12.5px;color:var(--lf-on-dark-3);border-top:0;padding-top:0;text-align:left!important}
.lf-rules{text-align:center;font-size:12px;letter-spacing:.06em;color:var(--lf-on-dark-3);margin:26px 0 0}
.lf-hero{display:grid;gap:22px;align-items:center}
@media (min-width:900px){.lf-hero{grid-template-columns:1fr 1fr;gap:44px}}
.lf-hero h1{font-family:var(--lf-caps);font-variant:small-caps;font-weight:700;font-size:29px;line-height:1.2;text-shadow:none}
@media (min-width:900px){.lf-hero h1{font-size:42px;text-align:left}.lf-hero .lf-tag{text-align:left}.lf-hero .lede{text-align:left;margin-left:0}}
.lf-tag{font-family:var(--lf-caps);font-weight:600;font-size:17px;letter-spacing:.14em;text-transform:uppercase;color:var(--lf-gold);text-align:center;min-height:2.6em;margin:0 0 8px;transition:opacity .5s}
.lf-tag.out{opacity:0}
.lf-frame{position:relative;border:6px solid #000;background:#000 center/cover no-repeat;aspect-ratio:10/9;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:6% 5% 5%;box-shadow:var(--lf-shadow)}
.lf-frame img{height:66%;width:auto;box-shadow:var(--lf-shadow)}
.lf-frame .lf-acts{margin:0;justify-content:center}
.lf-fq{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 14px;margin:30px auto 0;max-width:640px;font-size:13px;line-height:1.4;color:var(--lf-on-dark-2);text-align:center}
.lf-fq img{height:22px;width:auto;flex:0 0 auto}
.lf-fq span{flex:0 1 auto}
.lf-two{display:grid;gap:20px}
@media (min-width:900px){.lf-two{grid-template-columns:1fr 1fr}}
.lf-photo{position:relative;display:flex;align-items:flex-end;aspect-ratio:11/10;border-radius:var(--lf-r);overflow:hidden;background:#33443c center 62%/cover no-repeat;box-shadow:var(--lf-shadow)}
.lf-photo .cap{width:100%;background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);color:#000;padding:12px 16px 14px;display:grid;grid-template-columns:1fr auto;gap:6px 14px;align-items:center}
.lf-photo h3{font-size:25px;font-weight:600;line-height:1.1;margin:0}
.lf-photo p{grid-column:1/-1;font-size:13px;line-height:1.35;margin:0}
.lf-three{display:grid;gap:16px;max-width:420px;margin:0 auto}
@media (min-width:900px){.lf-three{grid-template-columns:repeat(3,1fr);max-width:none}}
.lf-tile{background:var(--card);color:var(--ink);border-radius:var(--lf-r);padding:22px 20px;text-align:center;box-shadow:var(--lf-shadow)}
.lf-tile svg{width:34px;height:34px;color:var(--lf-btn);display:block;margin:0 auto 8px}
.lf-tile h3{font-size:24px;font-weight:700;line-height:1.1;margin:0 0 12px;color:#000}
.lf-tile p{font-size:16px;font-weight:500;color:var(--muted);margin:0 0 8px;line-height:1.4}
/* ---- how it works: the steps ---- */
.lf-steps{display:grid;gap:44px;max-width:640px;margin:0 auto 34px}
.lf-step{position:relative;background:var(--card);color:var(--ink);border-radius:var(--lf-r-step);padding:26px 26px;display:flex;gap:18px;align-items:center;box-shadow:var(--lf-shadow-soft)}
.lf-step:nth-child(even){flex-direction:row-reverse}
.lf-step img{width:64px;height:auto;flex:0 0 64px}
.lf-step h3{font-size:19px;font-weight:600;margin:0 0 6px;color:#000}
.lf-step p{font-size:15px;font-weight:300;line-height:1.35;margin:0;color:#000}
.lf-step::after{content:"";position:absolute;left:50%;top:100%;width:210px;height:30px;transform:translateX(-50%);background:var(--card);clip-path:polygon(0 0,100% 0,100% 20%,50% 100%,0 20%)}
/* ---- services: an icon beside each ---- */
.lf-svc{display:grid;gap:26px;max-width:640px;margin:22px auto}
.lf-svc>div{display:grid;grid-template-columns:64px 1fr;gap:18px;align-items:center}
.lf-svc img{width:64px;height:auto;filter:brightness(0) invert(1)}
.lf-svc h3{font-size:20px;font-weight:600;margin:0 0 4px}
.lf-svc p{font-size:16px;font-weight:300;line-height:1.35;margin:0}
/* ---- the reading pages (help, the terms): white cards on the green field, the questions fold ---- */
.lf-legal p,.lf-legal li{font-size:14.5px;line-height:1.6}
.lf-legal h3{font-size:15px;font-weight:600;margin:16px 0 4px;color:var(--ink)}
.lf-legal address{font-style:normal;font-size:14.5px;line-height:1.6;color:var(--ink2)}
.lf-faq details{border-bottom:1px solid var(--border);padding:10px 0}
.lf-faq details:last-child{border-bottom:0}
.lf-faq summary{font-weight:600;font-size:15.5px;cursor:pointer;color:var(--ink)}
.lf-faq details p{margin:8px 0 2px}
/* ---- the report ---- */
.lf-head{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:start}
.lf-head h1{font-family:var(--lf-caps);font-variant:small-caps;font-size:28px;text-align:left;margin:4px 0 2px}
.lf-head .lede{text-align:left;margin:0 0 6px;max-width:none}
.lf-score{text-align:right}
.lf-score .n{font-family:var(--lf-caps);font-size:34px;font-weight:700;color:var(--lf-fig,var(--lf-green));line-height:1}
.lf-score .n small{font-size:15px;color:var(--faint);font-weight:700}
.lf-score .t{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.lf-chip{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border-radius:999px;padding:3px 9px;background:var(--teal-bg);color:var(--teal);border:1px solid var(--teal)}
.lf-chip.gold{background:transparent;color:var(--lf-gold-ink);border-color:var(--lf-gold)}
.lf-facts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0 2px}
@media (min-width:600px){.lf-facts{grid-template-columns:repeat(4,1fr)}.lf-facts.three{grid-template-columns:repeat(3,1fr)}}
.lf-fact{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:8px 10px;min-width:0}
.lf-fact .k{font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.lf-fact .v{font-size:15px;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.lf-fmv{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:end;text-align:center;margin:6px 0 10px}
.lf-fmv .mid{font-family:var(--lf-caps);font-size:32px;font-weight:700;color:var(--lf-fig,var(--lf-green));line-height:1.05}
.lf-fmv .side{font-size:15px;font-weight:600;color:var(--ink2)}
.lf-fmv .k{display:block;font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.lf-rows{width:100%;border-collapse:collapse;font-size:14.5px;margin:2px 0 8px}
.lf-rows td{padding:7px 0;border-bottom:1px solid var(--border);color:var(--ink2)}
.lf-rows td:last-child{text-align:right;font-weight:600;color:var(--ink);white-space:nowrap}
.lf-rows tr.sum td{border-bottom:0;font-weight:700;color:var(--ink)}
/* the pin cards: a long answer (a soil map unit's name) wraps instead of pushing the card off a phone */
#cards .lf-rows td:last-child{white-space:normal;overflow-wrap:anywhere;padding-left:14px}
section.part .lf-nar h3{font-family:var(--lf-caps);font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--lf-gold-ink);margin:14px 0 4px}
section.part .lf-nar h3:first-child{margin-top:2px}
.lf-jump{position:sticky;top:0;z-index:5;display:flex;gap:2px;overflow-x:auto;padding:8px 0 0;background:var(--bg);margin-top:10px;border-bottom:1px solid var(--border2);overscroll-behavior:contain}
.lf-jump button{flex:0 0 auto;font-family:var(--lf-caps);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);background:none;border:1px solid transparent;border-bottom:0;padding:8px 12px;border-radius:var(--lf-r-field) var(--lf-r-field) 0 0;cursor:pointer}
.lf-jump button:hover{color:var(--lf-gold-ink)}
.lf-jump button.on{color:var(--lf-gold-ink);border-color:var(--border2);background:var(--card)}
/* on SCREEN the chosen part alone; print has no such rule, so paper carries every part */
@media screen{.lf-tabbed section.part{display:none}.lf-tabbed section.part.on{display:block}}
.lf-example{background:var(--lf-gold);color:#1a1400;font-weight:600;font-size:14px;text-align:center;padding:9px 14px;border-radius:10px;margin:14px 0 4px}
body.lf-night{font-family:var(--lf-serif);font-size:17px}
body.lf-night .lf-band.night{background:var(--bg);color:var(--ink)}
body.lf-night .lf-head h1{color:#fff}
body.lf-night .lf-head .lede{color:var(--ink2)}
body.lf-night .note{color:var(--faint)}
.lf-band.green .note,.lf-band.slate .note{color:var(--lf-on-dark-2)}
.lf-band.green section.part .note,.lf-band.slate section.part .note{color:var(--muted)}
body.lf-night section.part{border:1px solid var(--border);box-shadow:none}
body.lf-night section.part>h2:first-child{border-bottom:1px solid var(--border)}
body.lf-night section.part h2:not(:first-child){font-family:var(--lf-caps);font-weight:400;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--lf-gold);border-bottom:1px solid var(--border);padding-bottom:5px}
body.lf-night section.part p,body.lf-night section.part ul{font-size:16.5px;color:var(--ink2)}
body.lf-night .lf-rows{font-size:16px}
body.lf-night .lf-fact .v,body.lf-night .lf-fmv .side{font-size:16.5px}
/* the comparable sales: one sale to a row, its figures on one line that wraps on a phone */
.lf-comps{list-style:none;margin:2px 0 10px;padding:0}
.lf-comps li{padding:9px 0;border-bottom:1px solid var(--border);margin:0}
.lf-comps .a{font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.lf-comps .f{display:flex;flex-wrap:wrap;gap:2px 18px;color:var(--ink2);font-size:.95em;margin-top:2px}
.lf-comps .f b{color:var(--ink)}
/* the map option on the pin page, and the tab strip where it sits on the green field */
.lf-map{height:min(60vh,420px);border-radius:12px;margin-top:12px;background:#0d1a11;overflow:hidden}
#cards .lf-jump{background:var(--card);border-radius:12px 12px 0 0;padding:8px 8px 0;margin-top:12px}
#cards section.part{margin-top:0;border-radius:0 0 var(--lf-r) var(--lf-r)}
#cards section.part>h2:first-child{border-radius:0}
/* a tab that holds several cards: the first joins the strip, each one after it stands as a card of its own under it */
#cards section.part.on~section.part.on{margin-top:12px;border-radius:var(--lf-r)}
#cards section.part.on~section.part.on>h2:first-child{border-radius:var(--lf-r) var(--lf-r) 0 0}
#cards .lf-jump button{flex:1 1 0;text-align:center}
#pinActs{align-items:center}
#pinActs .note{margin:0;color:var(--lf-on-dark-2)}
/* my reports */
.lf-list{list-style:none;margin:0;padding:0}
.lf-list li{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;padding:12px 0;border-bottom:1px solid var(--border);margin:0}
.lf-list li:last-child{border-bottom:0}
/* on a phone a saved pin's two buttons took the row and its coordinates broke across three lines: the buttons go under */
@media (max-width:520px){#saved li{grid-template-columns:1fr}}
.lf-list .a{font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.lf-list .s{font-size:12.5px;color:var(--muted)}
/* the scale while a report is prepared: one frame of the sheet (10 across, 6 down) shown at a time; report.html picks the frame */
.lf-scale{width:200px;aspect-ratio:2/3;margin:6px auto 12px;background:#000 url(/img/scale_frames.jpg) 0 0/1000% 600% no-repeat;border-radius:8px;box-shadow:var(--lf-shadow)}
.lf-wait{font-size:16px;font-weight:600;color:var(--ink);margin:4px 0 2px}
.lf-bar-track{height:6px;border-radius:3px;background:var(--border);overflow:hidden;margin:8px 0}
.lf-bar-track i{display:block;height:100%;width:30%;background:var(--teal);border-radius:3px;animation:lfslide 1.6s ease-in-out infinite}
@keyframes lfslide{0%{margin-left:-30%}100%{margin-left:100%}}
[hidden]{display:none!important}
/* THE REPORT PRINTS WHOLE: every part is on the page already (nothing sits behind a tab), so print only drops the controls --
   and it prints on white, whatever the screen wore */
@media print{
  html,body{background:#fff}
  body.lf-night{--bg:#ffffff;--surface:#f5f7f6;--card:#ffffff;--border:#b8c4be;--border2:#98a8a0;--ink:#101510;--ink2:#2b382f;--muted:#4a5f52;--faint:#6f8076;--titlebar:#1a2f38;--titlebar-ink:#ffffff;--lf-fig:#15503a;--lf-gold-ink:#7a5a12}
  body.lf-night .lf-head h1{color:#000}
  .lf-bar,.lf-jump,.lf-acts,footer,.no-print{display:none!important}
  .lf-band{padding:0;background:#fff!important}
  .lf-in{max-width:none;padding:0}
  section.part{box-shadow:none;break-inside:auto;border:1px solid #999}
  section.part>h2:first-child{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .lf-fact,.lf-fmv{break-inside:avoid}
}