/* Three ways to run it: interactive Lite / Guidance Only / Full Automation explainer.
   Markup lives in index.html (section.kitx), behaviour in assets/kit-explainer.js. */

.kitx {
  padding: clamp(64px, 8vw, 112px) 0;
  background: var(--bg);
}
.kitx__head { max-width: 780px; }
.kitx__head .lead { margin-top: 18px; }
.kitx__body { margin-top: clamp(28px, 4vw, 44px); }

/* ---------- stage ---------- */
.kitx__stage {
  position: relative;
  margin: 0;
  border-radius: 0 0 18px 18px;
  overflow: hidden;
  background: #1a1612;
  aspect-ratio: 12 / 5;
  color: #f3ece0;
  isolation: isolate;
}
.kitx__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.kitx__cap {
  position: absolute; right: 16px; bottom: 12px;
  margin: 0;
  font-size: 12px;
  color: rgba(243, 236, 224, .55);
}

.kitx__cap-out { margin: 8px 2px 0; font-size: 12px; color: var(--ink-3); text-align: right; }

/* ---------- the tablet in the cab, zoomed: after the app's Grade Guide ---------- */
.kitx__tab {
  position: absolute; right: 16px; top: 50%;
  transform: translateY(-50%);
  width: clamp(240px, 29%, 330px);
  padding: 7px;
  border-radius: 16px;
  background: #0b0a09;
  border: 1px solid rgba(243, 236, 224, .28);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .8);
  font-size: 12px;
  line-height: 1.3;
}
.kitx__tab-top {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 2px 6px 7px;
  color: rgba(243, 236, 224, .72);
  font-size: 11.5px;
}
.kitx__rtk { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.kitx__fix { width: 8px; height: 8px; border-radius: 50%; background: var(--fix); box-shadow: 0 0 0 3px rgba(40, 140, 39, .25); }
.kitx__screen {
  border-radius: 9px;
  overflow: hidden;
  background: #0f0f0f;
  border: 1px solid rgba(243, 236, 224, .1);
}
.kitx__app { display: block; width: 100%; height: auto; }
/* app colours (Ditch Assist dark theme) */
.kitx__app .a-bg { fill: #121212; }
.kitx__app .a-map { fill: #1b1d1b; }
.kitx__app .a-grid { stroke: #262a26; stroke-width: 1; }
.kitx__app .a-route { stroke: #f59e0b; stroke-width: 2.2; stroke-dasharray: 1 5; stroke-linecap: round; fill: none; }
.kitx__app .a-arrow { fill: #ec4899; stroke: #fff; stroke-width: 1.4; stroke-linejoin: round; }
.kitx__app .a-online { fill: #4ade80; }
.kitx__app .a-bar { fill: rgba(18, 18, 18, .85); }
.kitx__app .a-num { font: 700 17px/1 "SF Mono", Menlo, Consolas, monospace; }
.kitx__app .a-unit { font: 600 9px/1 var(--font-body); }
.kitx__app .a-lbl { font: 700 9.5px/1 var(--font-body); letter-spacing: 1.4px; }
.kitx__app .a-banner { fill: #dc2626; }
.kitx__app .a-banner-t { font: 700 9.5px/1 var(--font-body); fill: #fff; }
.kitx__app .a-col { fill: #161616; }
.kitx__app .a-col-line { stroke: rgba(255, 255, 255, .14); stroke-width: 1; }
.kitx__app .a-target { stroke: #60a5fa; stroke-width: 2; }
.kitx__app .a-ptr { fill: #facc15; }
.kitx__app .a-cut { font: 700 8px/1 var(--font-body); fill: #ef4444; letter-spacing: .8px; }
.kitx__app .a-fill { font: 700 8px/1 var(--font-body); fill: #60a5fa; letter-spacing: .8px; }
.kitx__app .a-small { font: 700 7px/1 var(--font-body); fill: rgba(255, 255, 255, .55); letter-spacing: .6px; }

.kitx__hyd {
  display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 8px;
  margin-top: 10px; padding-top: 9px;
  border-top: 1px solid rgba(243, 236, 224, .12);
  color: rgba(243, 236, 224, .7);
}
.kitx__hyd b { display: block; color: #fff; font-weight: 700; font-size: 12.5px; }
.kitx__act { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
.kitx__hyd-ico { width: 26px; height: 26px; overflow: visible; }
.kitx__hyd-ico .ico-base { fill: rgba(243, 236, 224, .2); }
.kitx__hyd-ico .ico-stick { stroke: #fff; stroke-width: 2.4; stroke-linecap: round; transform-origin: 13px 21px; }
.kitx__hyd-ico .ico-knob { fill: #fff; }
.kitx__hyd-ico .ico-valve { fill: var(--brand-green); }
.kitx[data-auto="1"] .ico-lever { display: none; }
.kitx[data-auto="0"] .ico-valve-g { display: none; }

.kitx .zoom { fill: none; stroke: #f3ece0; stroke-opacity: .5; stroke-width: 1.2; stroke-dasharray: 3 4; }
.kitx .zoom-box { fill: none; stroke: #f3ece0; stroke-opacity: .8; stroke-width: 1.4; }
.kitx .zoom-wedge { fill: #f3ece0; fill-opacity: .045; stroke: none; }

/* ---------- setup switch: folder tabs sitting on the scene ---------- */
.kitx__switch {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.kitx__sw {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  margin: 0;
  padding: 15px 18px 14px;
  border: 0;
  border-radius: 14px 14px 0 0;
  background: #ebe4d7;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease;
}
.kitx__sw:hover { background: #e1d8c8; }
.kitx__sw[aria-selected="true"] { background: #1a1612; color: #fff; cursor: default; }
.kitx__sw::before {
  content: "";
  position: absolute; left: 18px; right: 18px; top: 0;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--brand-green);
  transform: scaleX(0);
  transition: transform .3s ease;
}
.kitx__sw[aria-selected="true"]::before { transform: scaleX(1); }
.kitx__sw:focus-visible { outline: 2px solid var(--brand-orange); outline-offset: 2px; }
.kitx__sw-name { font-weight: 800; font-size: 18px; line-height: 1.25; letter-spacing: -0.01em; }
.kitx__sw-pick { font-size: 14px; line-height: 1.35; color: var(--ink-2); }
.kitx__sw[aria-selected="true"] .kitx__sw-pick { color: rgba(243, 236, 224, .75); }
.kitx__badge {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 9px 4px;
  border-radius: 999px;
  background: var(--ink);   /* one "Most popular" style site-wide: ink pill on light, cream pill on dark */
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  vertical-align: 2px;
}
.kitx__sw[aria-selected="true"] .kitx__badge { background: #f3ece0; color: #1a1612; }

/* ---------- the selected setup, described under the scene ---------- */
.kitx__descs { margin-top: clamp(16px, 2.2vw, 26px); }
.kitx__desc {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 12px clamp(24px, 4vw, 64px);
  align-items: start;
}
.kitx__desc[hidden] { display: none; }
.kitx__desc.is-in { animation: kitx-in .45s ease both; }
@keyframes kitx-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.kitx__desc-pick {
  margin: 0;
  font-weight: 800;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.kitx__desc-body p { margin: 0 0 10px; font-size: 16px; line-height: 1.6; color: var(--ink-2); max-width: 62ch; }
.kitx__desc-body p b { color: var(--ink); font-weight: 700; }
.kitx__desc-body .text-link { font-weight: 700; }

/* ---------- scene parts ---------- */
.kitx .machine { fill: #2a241e; stroke: #d9cfbf; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.kitx .machine-line { fill: none; stroke: #d9cfbf; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kitx .glass { fill: rgba(217, 207, 191, .1); stroke: none; }
.kitx .tire { fill: #120f0c; stroke: #d9cfbf; stroke-width: 2; }
.kitx .tread { fill: none; stroke: #d9cfbf; stroke-opacity: .55; }
.kitx .rim { fill: #2a241e; stroke: #d9cfbf; stroke-width: 1.6; }
.kitx .part { fill: #fff; }
.kitx .part-line { fill: none; stroke: #1a1612; stroke-width: 1.4; stroke-linecap: round; }
.kitx .cable { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.kitx .hose { fill: none; stroke: #d9cfbf; stroke-width: 3.5; stroke-linecap: round; }
.kitx .hose-flow { fill: none; stroke: var(--brand-green); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 6 14; }
.kitx .design { fill: none; stroke: #f3ece0; stroke-opacity: .65; stroke-width: 1.6; stroke-dasharray: 10 8; }
.kitx .trail { fill: none; stroke: var(--brand-green); stroke-width: 3; stroke-linejoin: round; }
.kitx .water { fill: none; stroke: #f3ece0; stroke-opacity: .8; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 2 16; }
.kitx .orig-ghost { fill: none; stroke: #d9cfbf; stroke-opacity: .35; stroke-width: 1.4; stroke-dasharray: 3 5; }
.kitx .wifi-path { fill: none; stroke: #f3ece0; stroke-opacity: .28; stroke-width: 1.6; stroke-dasharray: 2 7; stroke-linecap: round; }
.kitx .wifi-arc { fill: none; stroke: var(--brand-orange); stroke-width: 2.2; stroke-linecap: round; }
.kitx .wifi-dot { fill: var(--brand-orange); }
.kitx .wifi-dot--back { fill: #f3ece0; }
.kitx .note { font-family: "Caveat", "Segoe Print", cursive; font-size: 24px; font-weight: 600; fill: #f3ece0; }
.kitx .note-sm { font-size: 21px; fill: rgba(243, 236, 224, .72); }
.kitx .leader { fill: none; stroke: #f3ece0; stroke-opacity: .7; stroke-width: 1.3; stroke-linecap: round; }
.kitx .leader-dot { fill: #f3ece0; }
.kitx .zoom { fill: none; stroke: #f3ece0; stroke-opacity: .45; stroke-width: 1.2; stroke-dasharray: 3 4; }

.kitx .heap { fill: #5b4836; stroke: #8a6f55; stroke-width: 1.2; stroke-linejoin: round; }
.kitx .ghost { fill: none; stroke: #fff; stroke-width: 1.6; stroke-dasharray: 4 4; opacity: .75; }
/* parts that belong to some of the scenes their machine shows (Guidance Only: visual guidance /
   factory valve; the scraper: Full Automation / Ditch Assist Lite) */
.kitx .cv { transition: opacity .25s ease; }
.kitx .cv.is-off { opacity: 0; }

/* the two-state tabs' switches: a small pill, clear of the machine, the notes and the tablet.
   Guidance Only: visual guidance / factory valve, over the sky. Ditch Assist Lite (--lite): dozer /
   tractor and scraper, over the soil between the grade note and the tablet (the sky carries both
   Lite scenes' notes); on phones both sit top centre */
.kitx__gmode {
  position: absolute; z-index: 2; top: 14px; left: 45%; transform: translateX(-50%);
  display: inline-flex; gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(11, 10, 9, .78);
  border: 1px solid rgba(243, 236, 224, .32);
}
.kitx__gmode--lite { top: auto; bottom: 12px; left: 27%; transform: none; }
.kitx__gmode[hidden] { display: none; }
.kitx__gmode-btn {
  position: relative;
  margin: 0; padding: 6px 13px 7px;
  border: 0; border-radius: 999px;
  background: transparent;
  color: rgba(243, 236, 224, .82);
  font: 600 13px/1.2 var(--font-body);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.kitx__gmode-btn:hover { color: #fff; background: rgba(243, 236, 224, .12); }
.kitx__gmode-btn[aria-pressed="true"] { background: #f3ece0; color: #1a1612; cursor: default; }
.kitx__gmode-btn:focus-visible { outline: 2px solid var(--brand-orange); outline-offset: 2px; }
/* Lite: while the scenes alternate, a thin bar under the showing scene's name fills toward the next one */
.kitx__dwell {
  position: absolute; left: 13px; right: 13px; bottom: 3px;
  height: 2px; border-radius: 2px;
  background: rgba(26, 22, 18, .55);
  transform: scaleX(0); transform-origin: left center;
  opacity: 0;
  pointer-events: none;
}
.kitx__gmode.is-cycling .kitx__gmode-btn[aria-pressed="true"] .kitx__dwell { opacity: 1; }

/* each setup runs on its own machine: the sets crossfade as the setup changes (the outgoing one
   fades first, the incoming one follows). Opacity only, so JS keeps the transforms. The Lite
   tab's own alternation (.is-xfade) fades slower. */
.kitx .km { transition: opacity .28s ease .18s; }
.kitx .km.is-off { opacity: 0; transition-delay: 0s; pointer-events: none; }
.kitx .labels, .kitx .link { transition: opacity .3s ease; }
.kitx .labels.is-swapping, .kitx .link.is-swapping { opacity: 0; }
.kitx .is-xfade .km { transition: opacity .6s ease .3s; }
.kitx .is-xfade .km.is-off { transition: opacity .5s ease 0s; }
.kitx .is-xfade .cv { transition: opacity .5s ease .2s; }
.kitx .is-xfade .labels, .kitx .is-xfade .link { transition: opacity .45s ease; }
.kitx .wifi-arc { animation: kitx-ping 1.8s ease-out infinite; }
.kitx .wifi-arc:nth-child(2) { animation-delay: .3s; }
.kitx .wifi-arc:nth-child(3) { animation-delay: .6s; }
@keyframes kitx-ping { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }

/* a ring on the part a setup change adds (green) or takes away (light) */
.kitx .mk-pulse {
  fill: none;
  stroke: #f3ece0;
  stroke-width: 3.5;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  pointer-events: none;
}
.kitx .mk-pulse.is-add { stroke: var(--brand-green); }
.kitx .mk-pulse.is-on { animation: kitx-pulse .75s ease-out 2; }
@keyframes kitx-pulse { 0% { opacity: .95; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.6); } }

@media (prefers-reduced-motion: reduce) {
  .kitx .km, .kitx .cv, .kitx .is-xfade .km, .kitx .is-xfade .cv, .kitx__gmode-btn, .kitx__sw, .kitx__sw::before { transition: none; }
  .kitx__desc.is-in { animation: none; }
  .kitx .wifi-arc { animation: none; opacity: .8; }
  .kitx .mk-pulse.is-on { animation: none; }
  .kitx__dwell { display: none; }
}
/* the site's motion switch (assets/motion.js) holds the scene still */
html.da-still .kitx .km,
html.da-still .kitx .cv,
html.da-still .kitx .labels,
html.da-still .kitx .link,
html.da-still .kitx__sw,
html.da-still .kitx__sw::before { transition: none; }
html.da-still .kitx__desc.is-in,
html.da-still .kitx .mk-pulse.is-on { animation: none; }
html.da-still .kitx .wifi-arc { animation: none; opacity: .8; }
html.da-still .kitx__dwell { display: none; }

/* ---------- small screens: tabs and scene pinned under the nav, description below ---------- */
@media (max-width: 900px) {
  .kitx__pin {
    position: sticky;
    top: var(--kitx-top, 68px);
    z-index: 3;
    background: var(--bg);
  }
  .kitx__stage { box-shadow: 0 12px 24px -16px rgba(0, 0, 0, .7); }
  .kitx__desc { grid-template-columns: 1fr; }
}
/* a smaller scene with the tablet still floating: the switches tighten to fit between the notes
   and the tablet (Guidance Only: right of its GPS note; Lite: right of the grade note) */
@media (min-width: 761px) and (max-width: 900px) {
  .kitx__gmode { left: 44%; }
  .kitx__gmode--lite { left: 27%; bottom: 8px; }
  .kitx__gmode-btn { padding: 5px 9px 6px; font-size: 11.5px; }
  .kitx__dwell { left: 9px; right: 9px; bottom: 2px; }
}
/* below this width the tablet would cover the machine, so it docks under the scene */
@media (max-width: 760px) {
  .kitx__stage { aspect-ratio: auto; border-radius: 0 0 12px 12px; }
  /* the phone camera: 860 x 680 units (PH_W / PH_H in kit-explainer.js) */
  .kitx__svg { position: static; height: auto; aspect-ratio: 860 / 680; }
  .kitx .zoom, .kitx .zoom-wedge { display: none; }
  /* the notes in bigger type, with a dark edge so they read over dust, soil and lines */
  .kitx .note {
    font-size: 40px;
    stroke: rgba(22, 18, 14, .9); stroke-width: 7px; stroke-linejoin: round;
    paint-order: stroke fill;
  }
  .kitx .note-sm { font-size: 37px; fill: rgba(243, 236, 224, .8); }
  .kitx .leader { stroke-width: 2.4; stroke-opacity: .8; }
  .kitx__gmode, .kitx__gmode--lite { top: 8px; bottom: auto; left: 50%; transform: translateX(-50%); }
  .kitx__gmode-btn { padding: 5px 11px 6px; font-size: 12.5px; }
  .kitx__dwell { left: 11px; right: 11px; bottom: 2px; }
  /* the tablet docks under the scene as a device: a dashed line drops from the cab to the
     notch on its top edge, and its header says where it is */
  .kitx__tab {
    position: relative;
    top: auto; right: auto;
    transform: none;
    display: grid; grid-template-columns: 62% 1fr; gap: 6px 10px; align-items: center;
    width: auto;
    margin: 13px 8px 8px;
    padding: 6px 7px 7px;
    border: 1.5px solid rgba(243, 236, 224, .55);
    border-radius: 12px;
    background: #0b0a09;
    box-shadow: none;
  }
  .kitx__tab::before {
    content: ""; position: absolute; top: -9px; left: var(--cab-x, 72%);
    width: 15px; height: 15px; margin-left: -7.5px;
    background: #0b0a09;
    border-left: 1.5px solid rgba(243, 236, 224, .55);
    border-top: 1.5px solid rgba(243, 236, 224, .55);
    transform: rotate(45deg);
  }
  .kitx__tab-top { grid-column: 1 / -1; padding: 0 2px 1px; font-size: 11px; color: #f3ece0; }
  .kitx .wifi-path { stroke-opacity: .6; stroke-width: 3.6; stroke-dasharray: 3 9; }
  .kitx .wifi-arc { stroke-width: 2.6; }
  .kitx__hyd { margin-top: 0; padding-top: 0; border-top: 0; grid-template-columns: 22px 1fr; row-gap: 4px; }
  .kitx__hyd-ico { width: 22px; height: 22px; }
  .kitx__act { grid-column: 2; }

  /* compact while the text scrolls under the stuck pin (.kitx--compact, set by kit-explainer.js):
     the tabs fold away, the sky band over the notes is cropped (112 of the 860 units: -60 to 52),
     the tablet drops its header and narrows its screen, and the scene scales to --kx-k so the text
     keeps at least half the screen. The pin holds its full height in the layout, so it is
     see-through below the scene; ::before backs the scene's band across the full width. */
  .kitx__switch { max-height: 160px; transition: max-height .35s ease, opacity .25s ease; }
  .kitx__stage { transform-origin: 50% 0; transition: transform .35s ease, border-radius .35s ease; }
  .kitx__svg { transition: margin-top .35s ease; }
  .kitx__tab { transition: margin .35s ease, row-gap .35s ease, grid-template-columns .35s ease; }
  .kitx__tab-top { max-height: 40px; transition: max-height .3s ease, opacity .2s ease; }
  .kitx__gmode { transition: opacity .25s ease; }
  .kitx--compact .kitx__pin { background: transparent; pointer-events: none; }
  .kitx--compact .kitx__pin::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--kx-ch, 0);
    background: var(--bg);
  }
  .kitx--compact .kitx__switch { max-height: 0; opacity: 0; overflow: hidden; }
  .kitx--compact .kitx__stage { transform: scale(var(--kx-k, 1)); border-radius: 12px; pointer-events: auto; cursor: pointer; }
  .kitx--compact .kitx__svg { margin-top: -13.023%; }
  .kitx--compact .kitx__gmode { opacity: 0; pointer-events: none; }
  .kitx--compact .kitx__tab { grid-template-columns: 50% minmax(0, 1fr); row-gap: 0; margin: 10px 8px 6px; }
  .kitx--compact .kitx__tab-top { max-height: 0; opacity: 0; overflow: hidden; }
  /* while kit-explainer.js measures the compact scene: the compact layout's own transitions off
     (the machines' crossfade keeps running) */
  .kitx--measure .kitx__switch, .kitx--measure .kitx__stage, .kitx--measure .kitx__svg,
  .kitx--measure .kitx__tab, .kitx--measure .kitx__tab-top, .kitx--measure .kitx__gmode { transition: none !important; }
}
.kitx__pin-mark { height: 0; }
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .kitx__switch, .kitx__stage, .kitx__svg, .kitx__tab, .kitx__tab-top, .kitx__gmode { transition: none; }
}
@media (max-width: 760px) {
  html.da-still .kitx__switch, html.da-still .kitx__stage, html.da-still .kitx__svg,
  html.da-still .kitx__tab, html.da-still .kitx__tab-top, html.da-still .kitx__gmode { transition: none; }
}
@media (max-width: 640px) {
  .kitx__switch { gap: 4px; }
  .kitx__sw { padding: 10px 10px 9px; border-radius: 10px 10px 0 0; }
  .kitx__sw::before { left: 10px; right: 10px; }
  .kitx__sw-name { font-size: 14.5px; }
  .kitx__sw-pick, .kitx__long { display: none; }
  .kitx__badge { display: block; width: max-content; margin: 4px 0 0; padding: 2px 7px 3px; font-size: 10.5px; }
}
/* narrow phones: give the raise/lower label room so "You, following the chevrons" doesn't stack word by word */
@media (max-width: 480px) {
  .kitx__tab { grid-template-columns: 56% minmax(0, 1fr); }
  .kitx__hyd { grid-template-columns: 18px minmax(0, 1fr); column-gap: 6px; }
  .kitx__hyd-ico { width: 18px; height: 18px; }
}