/* Ditch Assist Lite page (ditch-assist-lite.html). Shares the homepage kit explainer, job tiles and
   screen viewer (kit-explainer.css, job-picker.css, screen-tabs.css, home.css) and the kits page grid
   and machine cards (kits.css). This file holds what is Lite's own. */

:root { --accent: #288c27; --accent-bg: #1a1612; --accent-fg: #f3ece0; --accent-fg-soft: #c9bda7; }

/* ---------- hero: the headline full width, then the copy with the machines Lite is for beside it ---------- */
.lite-hero { position: relative; overflow: hidden; background: #1a1612; }
.detail-hero h1.lite-hero-h1 { white-space: nowrap; max-width: none; hyphens: manual; -webkit-hyphens: manual; text-wrap: initial; font-size: clamp(20px, 6.4vw, 64px); }
:lang(es) .detail-hero h1.lite-hero-h1 { font-size: clamp(18px, 5.9vw, 60px); }
:lang(pt) .detail-hero h1.lite-hero-h1 { font-size: clamp(18px, 5vw, 52px); }
/* phone: the four lines may wrap, so the headline keeps H1 weight instead of shrinking to fit */
@media (max-width: 600px) {
  .detail-hero h1.lite-hero-h1,
  :lang(es) .detail-hero h1.lite-hero-h1,
  :lang(pt) .detail-hero h1.lite-hero-h1 { white-space: normal; font-size: clamp(32px, 9vw, 44px); text-wrap: balance; }
}
.lite-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; max-width: 820px; }
.lite-hero .lite-facts { max-width: none; }

/* The machines Ditch Assist Lite goes on: dozer and self-propelled scraper side by side, a tractor with a
   scraper and a tractor with a ditcher under them; drawn by assets/machine-art.js with the receiver's
   Wi-Fi to the tablet in the cab (data-link="wifi"), re-inked for the dark hero (cream line work, dark
   fills, the GPS dome white), each named under it. In the page it follows the headline, so on a phone the
   drawings come straight after it. */
.lite-hero .lh-fleet { display: flex; flex-wrap: wrap; justify-content: center; row-gap: 16px; width: min(100%, 560px); margin-top: 26px; }
.lite-hero .lh-fleet .ma-link { stroke: #8fd98e; opacity: .7; }
.lite-hero .lh-fleet :is(.ma-pkt, .ma-wave) { stroke: #8fd98e; }
.lite-hero .lh-fleet .ma-tab { fill: #0d0b09; stroke: #e6ddcc; stroke-width: .8; }
.lite-hero .lh-fleet .ma-tab-scr { fill: #5fd35d; }
/* phone: the drawings are small, so the link, signals and waves are drawn heavier to stay visible */
@media (max-width: 599px) {
  .lite-hero .lh-fleet .ma-link { stroke-width: 2.1; stroke-dasharray: .1 5.5; }
  .lite-hero .lh-fleet .ma-pkt { stroke-width: 6.5; }
  .lite-hero .lh-fleet .ma-pkt--back { stroke-width: 5; }
  .lite-hero .lh-fleet .ma-wave { stroke-width: 2.4; }
}
.lite-hero .lh-fleet .ma-soil { fill: rgba(243, 236, 224, .045); }
.lite-hero .lh-fleet .ma-ground { stroke: rgba(243, 236, 224, .34); stroke-width: 1.6; }
.lite-hero .lh-fleet .ma-tick { stroke: rgba(243, 236, 224, .2); }
.lite-hero .lh-fleet :is(.ma-frame, .ma-line, .ma-mast, .ma-track) { stroke: #e6ddcc; }
.lite-hero .lh-fleet .ma-body { fill: #2b251f; stroke: #e6ddcc; }
.lite-hero .lh-fleet .ma-glass { fill: rgba(243, 236, 224, .16); stroke: #e6ddcc; }
.lite-hero .lh-fleet .ma-tyre { fill: #100d0a; stroke: #e6ddcc; }
.lite-hero .lh-fleet .ma-rim { fill: #2b251f; stroke: #e6ddcc; }
.lite-hero .lh-fleet .ma-tread { stroke: #e6ddcc; opacity: .45; }
.lite-hero .lh-fleet .ma-edge { stroke: #fff; }
.lite-hero .lh-fleet .ma-dirt { fill: #a3866a; }
.lite-hero .lh-fleet .ma-rx { fill: #fff; stroke: #e6ddcc; stroke-width: 1.6; }

/* each drawing cut to its machine: x from --x0, --cw units wide, y 0 to 126 of the --vw x 140 drawing (the
   top left in for the Wi-Fi arc and waves over the GPS; 320 wide, the tractor and scraper 344, the tractor
   and ditcher 330). Each one takes --cw of its row's --row units: on a phone each row fills the width (the
   top row is 520 units, the tractors' row 700, 34 of them a gap between the two rigs); from 600px up both
   rows use 700, so all four share one scale and the top row sits centred. */
.lite-hero .lh-m--dozer { --x0: 44; --cw: 228; --row: 520; }
.lite-hero .lh-m--sp-scraper { --x0: 0; --cw: 292; --row: 520; }
.lite-hero .lh-m--tractor-scraper { --x0: 4; --cw: 340; --vw: 344; --row: 700; }
.lite-hero .lh-m--tractor-ditcher { --x0: 2; --cw: 326; --vw: 330; --row: 700; margin-left: calc(34 * 100% / 700); }
.lite-hero .lh-m { min-width: 0; flex: 0 0 auto; width: calc(var(--cw) * 100% / var(--row) - .3px); }
@media (min-width: 600px) { .lite-hero .lh-m { --row: 700; } }
.lite-hero .lh-fleet .machine-art { position: relative; overflow: hidden; aspect-ratio: var(--cw) / 126; }
.lite-hero .lh-fleet .machine-art .ma-svg {
  width: calc(var(--vw, 320) * 100% / var(--cw)); height: auto; aspect-ratio: var(--vw, 320) / 140; max-width: none;
  margin: 0 0 0 calc(var(--x0) * -100% / var(--cw));
}
.lite-hero .lh-cap {
  display: block; margin-top: 8px; padding: 0 4px; text-align: center; text-wrap: balance;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; line-height: 1.35; letter-spacing: .1em; text-transform: uppercase; color: #c9bda7;
}
:lang(es) .lite-hero .lh-cap, :lang(pt) .lite-hero .lh-cap { letter-spacing: .06em; }

/* tablet and up: a larger row, drawn bigger than the equipment cards (1.1 to 1.6 times), so the lines are
   thinned to keep about the same weight on screen */
@media (min-width: 600px) {
  .lite-hero .lh-fleet { width: min(100%, 640px); margin-top: 34px; }
  .lite-hero .lh-fleet .ma-body { stroke-width: 1.7; }
  .lite-hero .lh-fleet .ma-frame { stroke-width: 2.3; }
  .lite-hero .lh-fleet .ma-line { stroke-width: 1.3; }
  .lite-hero .lh-fleet .ma-edge { stroke-width: 3.2; }
  .lite-hero .lh-fleet :is(.ma-glass, .ma-tread) { stroke-width: 1.15; }
  .lite-hero .lh-fleet .ma-tyre { stroke-width: 1.45; }
  .lite-hero .lh-fleet .ma-rim { stroke-width: 1.3; }
  .lite-hero .lh-fleet .ma-track { stroke-width: 2.9; }
  .lite-hero .lh-fleet .ma-mast { stroke-width: 1.9; }
  .lite-hero .lh-fleet :is(.ma-rx, .ma-ground, .ma-tick) { stroke-width: 1.2; }
}
/* desktop: crumbs, eyebrow and headline full width; beside the lead, facts, buttons and cross-link, the
   same two-and-one lineup, inside the content edges */
@media (min-width: 960px) {
  .lite-hero .detail-hero__inner {
    display: grid; grid-template-columns: minmax(0, 1fr) clamp(380px, 36vw, 540px); column-gap: clamp(36px, 4vw, 64px);
    grid-template-areas: "crumbs crumbs" "eyebrow eyebrow" "h1 h1" "lead fleet" "facts fleet" "cta fleet" "cross fleet";
  }
  .lite-hero .detail-hero__inner > .crumbs { grid-area: crumbs; }
  .lite-hero .detail-hero__inner > .eyebrow { grid-area: eyebrow; justify-self: start; }
  .lite-hero .detail-hero__inner > h1 { grid-area: h1; }
  .lite-hero .detail-hero__inner > .lead { grid-area: lead; }
  .lite-hero .detail-hero__inner > .lite-facts { grid-area: facts; }
  .lite-hero .detail-hero__inner > .hero__cta { grid-area: cta; }
  .lite-hero .detail-hero__inner > .hero__crosslink { grid-area: cross; }
  .lite-hero .detail-hero__inner > .lh-fleet { grid-area: fleet; align-self: center; row-gap: 20px; width: 100%; margin: 0; }
}

/* ---------- what you need (dark): the list, the receivers, then the wireless facts ---------- */
.lite-need { padding: clamp(64px, 8vw, 104px) 0; background: #1a1612; color: #f3ece0; }
.lite-need .eyebrow { color: #c9bda7; }
.lite-need h2 { margin-top: 12px; color: #fff; }
.lite-need .lead { margin-top: 16px; color: #d8cfbc; }
.lite-need__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.lite-need__visual {
  display: grid; grid-template-rows: 1fr 1fr; gap: 10px;
  aspect-ratio: 1; padding: 22px;
  border: 1px solid rgba(243, 236, 224, .16); border-radius: 14px;
  background: radial-gradient(circle at 50% 45%, rgba(40, 140, 39, .18), rgba(255, 255, 255, .05) 42%, rgba(255, 255, 255, .02) 68%);
}
.lite-need__unit { margin: 0; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.lite-need__unit img { flex: 1 1 auto; min-height: 0; width: auto; max-width: 100%; height: auto; object-fit: contain; filter: drop-shadow(0 26px 34px rgba(0, 0, 0, .42)); }
.lite-need__unit figcaption { flex: 0 0 auto; font-size: 13px; font-weight: 700; color: #c9bda7; }

/* a checked list: what you need here, what Lite gives a laser operator further down */
.lite-list { list-style: none; padding: 0; margin: 26px 0 0; }
.lite-list li { position: relative; padding: 15px 0 15px 34px; border-top: 1px solid rgba(243, 236, 224, .16); }
.lite-list li:last-child { border-bottom: 1px solid rgba(243, 236, 224, .16); }
.lite-list li::before {
  content: ""; position: absolute; left: 0; top: 17px; width: 21px; height: 21px; border-radius: 50%;
  background: #288c27 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.6 9.6 3.6' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.lite-list strong { display: block; color: #fff; font-size: 17px; line-height: 1.3; }
.lite-list p { margin: 5px 0 0; color: #d8cfbc; font-size: 15px; line-height: 1.55; }
.lite-list a { color: #f3ece0; text-decoration: underline; text-underline-offset: 3px; }
.lite-list .card__link { display: inline; margin: 0; font-size: inherit; }
.lite-list--light li { border-color: var(--line); }
.lite-list--light li:first-child { border-top: 0; padding-top: 0; }
.lite-list--light li:first-child::before { top: 2px; }
.lite-list--light li:last-child { border-bottom: 0; }
.lite-list--light strong { color: var(--ink); }
.lite-list--light p { color: var(--ink-2); }

.lite-wire { margin-top: clamp(44px, 6vw, 72px); padding-top: clamp(36px, 5vw, 56px); border-top: 1px solid rgba(243, 236, 224, .16); }
.lite-wire__head { max-width: 760px; }
.lite-wire__chip { display: inline-block; padding: 6px 11px; border-radius: 999px; background: transparent; border: 1px solid rgba(243, 236, 224, .3); color: #f3ece0; font-size: 12.5px; font-weight: 800; }
.lite-wire h3 { margin-top: 12px; color: #fff; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.15; letter-spacing: -0.01em; }
.lite-wire__head p { margin-top: 10px; color: #d8cfbc; font-size: 16px; line-height: 1.55; }
.lite-wire__facts { list-style: none; padding: 0; margin: 24px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.lite-wire__facts li { padding: 16px; border: 1px solid rgba(243, 236, 224, .14); border-radius: 12px; background: rgba(255, 255, 255, .04); }
.lite-wire__facts strong { display: block; color: #fff; font-size: 15.5px; line-height: 1.3; }
.lite-wire__facts p { margin: 6px 0 0; color: #c9bda7; font-size: 14px; line-height: 1.5; }
.lite-badges { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.lite-badges span { display: inline-flex; align-items: center; padding: 8px 12px; border: 1px solid rgba(243, 236, 224, .22); border-radius: 999px; color: #f3ece0; font-size: 13px; font-weight: 700; }

/* ---------- equipment: the kits page machine cards, on white here ---------- */
.lite-equip { background: #fff; }
.lite-equip .machine__note { flex: 1; }
/* the card with no drawing reads as a deliberate "ask us" card, not a missing picture */
.lite-equip .machine--ask { background: #faf8f3; border: 1.5px dashed var(--line-2); padding-top: 22px; }
.lite-equip .machine--ask .machine__note { flex: 0 0 auto; }

/* ---------- what it does: the eight job tiles and LiDAR; the LiDAR tile runs the full width, map beside the text
   (four across on desktop, two on tablets, one on phones, where job-picker.css already lays tiles out sideways) ---------- */
@media (min-width: 561px) {
  .lite-jobs .jp__tile--wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 18px; align-content: center; padding: 0; }
  .lite-jobs .jp__tile--wide .jp__art { grid-row: 1 / span 3; height: 100%; aspect-ratio: auto; margin: 0; border-bottom: 0; border-right: 1px solid var(--line); }
  .lite-jobs .jp__tile--wide .jp__name { padding: 18px 18px 0 0; }
  .lite-jobs .jp__tile--wide .jp__line { padding: 0 18px 18px 0; }
}
/* LiDAR Drainage Mapping tile: the field from above in the job tiles' palette (job-picker.css): soil,
   faint grey contours, hatched low spots, green flow paths running downhill to the outlet on the
   field edge. Inline SVG in the sixth tile; job-picker.js leaves a tile without data-ground alone. */
.jp__art--lidar .lm-contours { fill: none; stroke: #8b8172; stroke-width: 1; opacity: .42; }
.jp__art--lidar .lm-pond { stroke: #8b8172; stroke-width: 1.2; }
.jp__art--lidar .lm-edge { fill: none; stroke: #8b8172; stroke-width: 1.4; }
.jp__art--lidar .lm-tall { display: none; }
.jp__art--lidar #lm-fade stop { stop-color: #ebe3d4; }
.jp__art--lidar .lm-flow {
  --lm-dur: .9s; --lm-delay: 0s;
  fill: none; stroke: var(--brand-green); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1 2; stroke-dashoffset: 0;
}
.jp__art--lidar .lm-flow--t { stroke-width: 2.2; }
.jp__art--lidar .lm-flow--main { --lm-dur: 1.7s; }
.jp__art--lidar .lm-t2 { --lm-dur: 1.15s; }
.jp__art--lidar .lm-t3 { --lm-dur: 1.1s; --lm-delay: .25s; }
.jp__art--lidar .lm-dir { fill: none; stroke: var(--brand-green); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.jp__art--lidar .lm-outlet { fill: #fff; stroke: var(--brand-green); stroke-width: 2; }
/* phone: the art panel is taller than 240:110, so the field and its contours run on above and below
   (fading out) instead of leaving pale bands */
@media (max-width: 560px) {
  .jp__art--lidar .lm-wide { display: none; }
  .jp__art--lidar .lm-tall { display: inline; }
  .jp__art--lidar .lm-contours { clip-path: url(#lm-strip); }
  /* the field runs edge to edge here, so its side outline would read as a cropped frame */
  .jp__art--lidar .lm-edge.lm-tall { display: none; }
}
/* hover or focus: water runs downhill, the side drains joining as the main drain reaches them, then
   the direction marks and the outlet. Held still under reduced motion and the site's motion switch. */
@media (prefers-reduced-motion: no-preference) {
  html:not(.da-still) .jp__tile:is(:hover, :focus-visible) .lm-flow { animation: lm-run var(--lm-dur) cubic-bezier(.45, 0, .3, 1) var(--lm-delay) both; }
  html:not(.da-still) .jp__tile:is(:hover, :focus-visible) :is(.lm-dir, .lm-outlet) { animation: lm-show .35s ease 1.45s both; }
}
/* starts just past the end so no round cap dots the path while a drain waits its turn */
@keyframes lm-run { from { stroke-dashoffset: 1.01; } to { stroke-dashoffset: 0; } }
@keyframes lm-show { from { opacity: 0; } to { opacity: 1; } }
.lite-notin { margin-top: 20px; padding: 14px 18px; border: 1px dashed rgba(26, 22, 18, .25); border-radius: 10px; color: var(--ink-2); font-size: 14.5px; line-height: 1.55; }
.lite-notin a { color: var(--ink); font-weight: 700; }

/* ---------- running a laser today ---------- */
.lite-laser-split { align-items: start; }
.lite-laser-shot { margin: 0; padding: 12px; border-radius: 12px; background: #1a1612; }
.lite-laser-shot img { display: block; width: 100%; height: auto; border-radius: 6px; }

/* ---------- the comparison grid, Lite as the picked column ---------- */
.lite-fit .glance__table [data-col="auto"] { background: none; }
.lite-fit .glance__table [data-col="lite"] { background: #faf8f3; }
.lite-fit__cta { margin-top: 24px; }
@media (max-width: 760px) { .lite-fit .glance__table [data-col="lite"] { background: none; } }

/* ---------- first day: three steps in order ---------- */
.lite-steps { background: #f3ecdf; }
.lite-steps__list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.lite-steps__list li { padding: 20px; border-radius: 14px; background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--ink); }
.lite-steps__k { display: block; font-size: 13px; font-weight: 800; color: var(--ink-3); }
.lite-steps__list h3 { margin-top: 8px; font-size: 20px; line-height: 1.25; }
.lite-steps__list p { margin-top: 8px; color: var(--ink-2); font-size: 15px; line-height: 1.55; }
.lite-steps__link { display: inline-block; margin-top: 10px; }

/* ---------- corrections ---------- */
.lite-callout { margin-top: 18px; padding: 16px 18px; border-left: 4px solid #288c27; border-radius: 6px; background: #f6f2ea; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.lite-callout strong { color: var(--ink); }

@media (max-width: 1000px) {
  .lite-wire__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .lite-need__grid { grid-template-columns: 1fr; }
  .lite-need__visual { max-width: 420px; width: 100%; margin: 0 auto; }
  .lite-steps__list { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .lite-wire__facts { grid-template-columns: 1fr; }
  .lite-need__visual { grid-template-rows: none; grid-template-columns: 1fr 1fr; aspect-ratio: 2 / 1; padding: 14px; }
}