/* Ditch Assist Gen 2 — site styles
   Voice: plain, operator-first, no hype. Cream body, dark hero, earthy accents.
   Brand: Open Sans (bold for headers); Ditch Assist brand palette.
*/

/* Fonts load via <link rel="preconnect"> + <link rel="stylesheet"> in each page head
   (faster than @import: fonts fetch in parallel with this file, not after it). */

:root {
  /* Brand surface palette (warm-cream + soil dark, kept from design) */
  --bg: #faf8f3;
  --bg-card: #ffffff;
  --bg-soil: #1a1612;
  --bg-soil-2: #221d18;
  --bg-grass: #14281a;
  --ink: #000000;          /* brand black */
  --ink-2: #4a4338;
  --ink-3: #666666;        /* brand gray */
  --ink-faint: #b8b0a4;
  --line: #e6e0d4;
  --line-2: #d4ccbc;

  /* Ditch Assist brand colours */
  --brand-white: #ffffff;
  --brand-black: #000000;
  --brand-orange: #e26e1b;
  --brand-yellow: #f9a902;     /* Ditch Assist DIG */
  --brand-green: #288c27;
  --brand-green-dark: #0a6035;
  --brand-red: #c50505;
  --brand-gray: #666666;
  --brand-sand: #d4a574;       /* Simple Grading */
  --brand-soil: #6f4e37;       /* Tiling */
  --brand-olive: #6b8e23;      /* Leveling */

  /* Mode accents — primary brand colours where they touch product;
     secondary modes keep workflow-coding hues for at-a-glance recognition. */
  --m-ditching: #288c27;     /* brand green */
  --m-simple: #fbbf24;
  --m-forming: #a78bfa;
  --m-tiling: #3b82f6;
  --m-terrace: #38bdf8;
  --m-excavator: #e26e1b;    /* brand orange */
  --m-leveling: #60a5fa;
  --m-levee: #0a6035;        /* brand dark green */

  /* Functional indicators (RTK fix / float / error states) */
  --fix: #288c27;
  --float: #fbbf24;
  --err: #c50505;            /* brand red */
  --bm: #22d3ee;

  /* Typography — Open Sans across the brand. Bold for headers. */
  --font-display: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-body: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "Open Sans", "SF Mono", Menlo, Consolas, monospace;
  --font-sans: var(--font-body);

  --maxw: 1240px;
  --pad: clamp(20px, 4vw, 56px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }
a.text-link { color: var(--ink); border-bottom: 1px solid var(--ink-faint); padding-bottom: 1px; }
a.text-link:hover { border-bottom-color: var(--ink); }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;          /* brand: bold for headers */
  letter-spacing: -0.02em;
  line-height: 1.08;
  text-wrap: balance;
}
h1 { font-size: clamp(40px, 6vw, 76px); }
h2 { font-size: clamp(30px, 4vw, 50px); }
h3 { font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; }
h4 { font-size: 18px; letter-spacing: -0.01em; font-weight: 700; }

p { margin: 0; text-wrap: pretty; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
.section { padding: clamp(56px, 8vw, 112px) 0; }
.section--tight { padding: clamp(32px, 5vw, 64px) 0; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.eyebrow.eyebrow--script {
  color: #ffffff;
  font-family: 'Caveat', cursive;
  text-transform: none;
  letter-spacing: 0;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.1;
  display: inline-block;
}
.eyebrow.eyebrow--script::before { content: none; }
@media (max-width: 700px) {
  .eyebrow.eyebrow--script { font-size: 30px; }
}

/* Feature hero — side-by-side image + text block for feature sections (Slope-IQ, etc.) */
.feature-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  margin-bottom: 48px;
}
.feature-hero__img {
  border-radius: 14px;
  overflow: hidden;
}
.feature-hero__img img {
  width: 100%;
  height: auto;
  display: block;
}
/* --cover: crop the image to fill its column, matching the text height on
   desktop; square crop on stacked mobile. White-mat frame + elevation. */
.feature-hero--cover { align-items: stretch; }
.feature-hero--cover .feature-hero__img {
  background: var(--line-2);
  padding: 12px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.10);
}
.feature-hero--cover .feature-hero__img img { height: 100%; object-fit: cover; border-radius: 8px; }
@media (max-width: 820px) {
  .feature-hero--cover .feature-hero__img { aspect-ratio: 1 / 1; }
}
.feature-hero__title {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 14px 0 0;
}
.no-hyphen,
.feature-hero__title.no-hyphen {
  hyphens: manual;
  overflow-wrap: normal;
  word-break: normal;
}
.feature-hero__sub {
  color: var(--ink);
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 600;
  line-height: 1.3;
  margin: 12px 0 0;
}
.feature-hero__lead {
  color: var(--ink-2);
  margin-top: 16px;
}
@media (max-width: 800px) {
  .feature-hero { grid-template-columns: 1fr; gap: 24px; }
}

/* Short full-width feature hero banner (Auto-Nudge etc.) */
.autonudge-hero {
  width: 100%;
  aspect-ratio: 4 / 1;
  border-radius: 14px;
  overflow: hidden;
  background: #0c0a08;
  margin-bottom: 36px;
  border: 1px solid #3a3025;
}
.autonudge-hero img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
@media (max-width: 700px) {
  .autonudge-hero { aspect-ratio: 16 / 9; }
}

/* Auto-Nudge section — dark, orange-accented to differentiate from Slope-IQ (cream/green) */
.autonudge-section .section-chip {
  background: rgba(226,110,27,0.18);
  color: #f9b272;
  border-color: transparent;
}
.autonudge-section h2 { color: #fff; }
.autonudge-section .lead { color: #d8cfbc; }
.autonudge-section .flow {
  background: #221d18;
  border-color: #3a3025;
}
.autonudge-section .flow__step { border-right-color: #3a3025; }
.autonudge-section .flow__step::after {
  background: #221d18;
  border-top-color: #3a3025;
  border-right-color: #3a3025;
}
.autonudge-section .flow__num { color: var(--brand-orange); }
.autonudge-section .flow__icon { background: rgba(226,110,27,0.10); color: var(--brand-orange); }
.autonudge-section .flow h4 { color: #fff; }
.autonudge-section .flow p { color: #d8cfbc; }
@media (max-width: 900px) {
  .autonudge-section .flow__step { border-bottom-color: #3a3025; }
}

.lidar-prep-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: -18px 0 34px;
}
.lidar-prep-card {
  background: rgba(255,255,255,0.68);
  border: 1px solid #e0d5c0;
  border-radius: 8px;
  padding: 22px 20px;
  box-shadow: 0 10px 24px rgba(26,22,18,0.06);
}
.lidar-prep-card span {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: #2e8a7a;
  margin-bottom: 10px;
}
.lidar-prep-card h4 {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 8px;
}
.lidar-prep-card p {
  color: #3a3328;
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}
@media (max-width: 1000px) {
  .lidar-prep-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .lidar-prep-grid {
    grid-template-columns: 1fr;
  }
}

/* Contour-guided tile and terrace section on the homepage. */
.contour-guided-section {
  background: #13231f;
  color: #f3ece0;
}
.contour-guided-section .section-head {
  align-items: start;
  border-bottom: 1px solid rgba(216,207,188,0.16);
  padding-bottom: 30px;
}
.contour-guided-section .section-chip {
  background: rgba(46,138,122,0.18);
  color: #8ee5d3;
}
.contour-guided-section .section-chip::before {
  background: #2e8a7a;
  box-shadow: 0 0 0 3px rgba(46,138,122,0.28);
}
.contour-guided-section h2,
.contour-guided-section h3 {
  color: #fff;
}
.contour-guided-section .lead {
  color: #d8cfbc;
}
.contour-guided {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.95fr);
  gap: 24px;
  align-items: stretch;
}
.contour-guided__visual {
  display: flex;
  flex-direction: column;
  background: #0c0a08;
  border: 1px solid rgba(216,207,188,0.16);
  border-radius: 10px;
  overflow: hidden;
  min-height: 100%;
}
.contour-guided__visual img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: #101816;
  display: block;
}
.contour-guided__caption {
  padding: 22px 24px 24px;
  border-top: 1px solid rgba(216,207,188,0.12);
}
.contour-guided__caption span,
.contour-guided-card__kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .11em;
  text-transform: uppercase;
  font-weight: 700;
  color: #8ee5d3;
  margin-bottom: 8px;
}
.contour-guided__caption strong {
  display: block;
  font-family: var(--font-display);
  color: #fff;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.16;
  letter-spacing: -0.01em;
}
.contour-guided__caption p {
  color: #d8cfbc;
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.55;
}
.contour-guided__routes {
  display: grid;
  gap: 16px;
}
.contour-guided-card {
  background: #1b2b25;
  border: 1px solid rgba(216,207,188,0.14);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.contour-guided-card__kicker {
  color: color-mix(in oklab, var(--accent) 48%, #f3ece0);
  margin-bottom: 2px;
}
.contour-guided-card h3 {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.3vw, 32px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0;
}
.contour-guided-card p {
  color: #d8cfbc;
  font-size: 15px;
  line-height: 1.58;
  margin: 0;
}
.contour-guided-card__link {
  margin-top: auto;
  color: color-mix(in oklab, var(--accent) 50%, #fff);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 700;
  align-self: flex-start;
  padding-top: 12px;
}
.contour-guided-card__link:hover {
  color: #fff;
}
.contour-guided__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 22px;
  border: 1px solid rgba(216,207,188,0.14);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255,255,255,0.035);
}
.contour-guided__steps > span {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  min-width: 0;
  border-right: 1px solid rgba(216,207,188,0.12);
  color: #f3ece0;
  font-size: 14px;
  line-height: 1.35;
}
.contour-guided__steps > span:last-child {
  border-right: 0;
}
.contour-guided__steps strong {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  color: #8ee5d3;
  letter-spacing: .08em;
}
@media (max-width: 920px) {
  .contour-guided {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 720px) {
  .contour-guided__steps {
    grid-template-columns: 1fr;
  }
  .contour-guided__steps > span {
    border-right: 0;
    border-bottom: 1px solid rgba(216,207,188,0.12);
  }
  .contour-guided__steps > span:last-child {
    border-bottom: 0;
  }
}

/* ------- Mode walkthrough video — dark accent band with a 16:9 placeholder.
   Drives off the per-page :root accent vars, so colour follows the mode. ------- */
.mode-video { background: var(--accent-bg); color: var(--accent-fg); }
.mode-video .eyebrow { color: var(--accent-fg-soft); }
.mode-video h2 { color: var(--accent-fg); }
.mode-video .lead { color: var(--accent-fg-soft); }

.video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-top: clamp(28px, 4vw, 44px);
  border-radius: 16px;
  overflow: hidden;
  background:
    radial-gradient(130% 100% at 50% -10%, color-mix(in oklab, var(--accent) 30%, transparent) 0%, transparent 55%),
    #0c0a08;
  border: 1px solid color-mix(in oklab, var(--accent) 38%, #3a3025);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.video-frame--embed {
  padding: 6px;
  background: #fff;
  border: 2px solid rgba(255,255,255,0.88);
  box-shadow: 0 24px 60px rgba(0,0,0,0.24), 0 0 0 5px rgba(255,255,255,0.10);
  cursor: default;
}
.video-frame--embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 8px;
  display: block;
  background: #000;
}
.video-frame__poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .32;
}
.video-frame__inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  padding: 24px; text-align: center;
}
.video-frame__play {
  width: clamp(62px, 7vw, 88px);
  height: clamp(62px, 7vw, 88px);
  border-radius: 50%;
  background: var(--accent-fg);
  display: grid; place-items: center;
  box-shadow: 0 10px 34px rgba(0,0,0,.45);
  transition: transform .2s ease, box-shadow .2s ease;
}
.video-frame__play svg { width: 36%; height: 36%; margin-left: 9%; fill: var(--accent); }
.video-frame:hover .video-frame__play {
  transform: scale(1.05);
  box-shadow: 0 10px 34px rgba(0,0,0,.5), 0 0 0 14px color-mix(in oklab, var(--accent) 22%, transparent);
}
.video-frame__label {
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-fg-soft);
}
.mode-video__points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 24px;
}
.mode-video__point {
  border: 1px solid color-mix(in oklab, var(--accent) 32%, #3a3025);
  border-radius: 10px;
  padding: 18px;
  background: rgba(255,255,255,0.045);
}
.mode-video__point strong {
  display: block;
  color: var(--accent-fg);
  font-size: 16px;
  line-height: 1.3;
}
.mode-video__point p {
  margin-top: 7px;
  color: var(--accent-fg-soft);
  font-size: 14px;
  line-height: 1.5;
}
.mode-video__transcript {
  margin-top: 20px;
  border: 1px solid color-mix(in oklab, var(--accent) 32%, #3a3025);
  border-radius: 10px;
  background: rgba(255,255,255,0.045);
  overflow: hidden;
}
.mode-video__transcript summary {
  cursor: pointer;
  padding: 18px 22px;
  color: var(--accent-fg);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
  list-style: none;
  position: relative;
}
.mode-video__transcript summary::-webkit-details-marker { display: none; }
.mode-video__transcript summary::after {
  content: "+";
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 400;
  color: var(--accent-fg-soft);
}
.mode-video__transcript[open] summary::after { content: "-"; }
.mode-video__transcript-body {
  padding: 0 22px 22px;
  color: var(--accent-fg-soft);
  font-size: 14.5px;
  line-height: 1.6;
}
.mode-video__transcript-body p { margin-top: 12px; }
.mode-video__chapters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.mode-video__chapters li {
  color: var(--accent-fg-soft);
  border-top: 1px solid rgba(255,255,255,0.10);
  padding-top: 10px;
}
.mode-video__chapters strong {
  display: block;
  color: var(--accent-fg);
  font-size: 14px;
}
@media (max-width: 800px) {
  .mode-video__points,
  .mode-video__chapters { grid-template-columns: 1fr; }
}

.advance-zoom {
  object-position: right center;
  transform-origin: right center;
  animation: advance-zoom 4s ease-in-out infinite alternate;
}
@keyframes advance-zoom {
  from { transform: scale(1); }
  to   { transform: scale(1.8); }
}
.advance-zoom--far {
  object-position: right center;
  transform-origin: right center;
  animation: advance-zoom-far 5s ease-in-out infinite alternate;
}
@keyframes advance-zoom-far {
  from { transform: scale(1); }
  to   { transform: scale(2.4); }
}
.eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  background: currentColor;
  display: inline-block;
}

.lead {
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 60ch;
}

/* ------- Top nav ------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250, 248, 243, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px var(--pad);
  max-width: var(--maxw); margin: 0 auto;
  gap: 20px;
}
.nav__logo, .site-logo {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; line-height: 0;
  flex: 0 0 auto;
}
.nav__logo svg { width: 24px; height: 24px; }
.site-logo img {
  height: 44px;
  width: auto;
  max-width: none;
  display: block;
  flex: 0 0 auto;
}
.site-logo--dark img { filter: invert(1) brightness(1.05); }
@media (max-width: 600px) { .site-logo img { height: 44px; } }

/* ------- Testimonials (real, named quotes only) ------- */
.testimonial {
  margin: 0; background: #fff;
  border: 1px solid var(--line); border-left: 4px solid var(--brand-green-dark, #1a6017);
  border-radius: 10px; padding: 24px 26px;
  box-shadow: 0 12px 30px rgba(20,16,12,.06);
}
.testimonial blockquote { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--ink); }
.testimonial blockquote p + p { margin-top: 12px; }
.testimonial figcaption { margin-top: 14px; font-size: 13.5px; color: var(--ink-2); }
.testimonial figcaption strong { display: block; color: var(--ink); font-size: 14.5px; }
.testimonial--dark { background: rgba(255,255,255,.06); border-color: rgba(243,236,224,.18); border-left-color: #4ade80; box-shadow: none; }
.testimonial--dark blockquote { color: #f3ece0; }
.testimonial--dark figcaption { color: #c9bda7; }
.testimonial--dark figcaption strong { color: #fff; }

/* Small cross-application escape line under dark hero CTAs. */
.hero__crosslink { margin-top: 16px; font-size: 13.5px; color: #d8cfbc; }
.hero__crosslink a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* Strapline next to the nav logo — states what Ditch Assist is on every page. */
.site-logo__tag {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3);
  border-left: 1px solid var(--line);
  padding-left: 12px; margin-left: 12px;
  white-space: nowrap;
  align-self: center;
}
@media (max-width: 1260px) { .site-logo__tag { display: none; } }
.nav__links { display: flex; gap: 4px; align-items: center; flex: 1 1 auto; justify-content: center; min-width: 0; }
.nav__link, .nav__group-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 12px;
  font-size: 14.5px; font-weight: 600; color: var(--ink-2);
  background: transparent; border: 0; border-radius: 8px;
  cursor: pointer; font-family: inherit;
  transition: background .15s ease, color .15s ease;
  white-space: nowrap;
}
.nav__link:hover, .nav__group-btn:hover { color: var(--ink); background: rgba(0,0,0,0.04); }
.nav__link.is-current, .nav__group.is-current > .nav__group-btn { color: var(--brand-green-dark); }
.nav__chev { font-size: 10px; opacity: .55; transition: transform .15s ease; }

.nav__group { position: relative; }
.nav__group:hover > .nav__group-btn .nav__chev,
.nav__group.is-open > .nav__group-btn .nav__chev { transform: rotate(180deg); }

/* Dropdowns: show on hover (desktop) and on click via .is-open (handled by JS) */
.nav__dropdown, .nav__megamenu {
  position: absolute; top: calc(100% + 6px); left: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 30px 60px rgba(20,16,12,0.14), 0 1px 0 rgba(20,16,12,0.04);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
  z-index: 70;
}
.nav__group:hover > .nav__dropdown,
.nav__group:hover > .nav__megamenu,
.nav__group.is-open > .nav__dropdown,
.nav__group.is-open > .nav__megamenu {
  opacity: 1; visibility: visible; transform: translateY(0);
}

/* Hardware dropdown (compact) */
.nav__dropdown { width: 320px; padding: 10px; max-height: calc(100vh - 110px); overflow-y: auto; }

/* Resources dropdown: two columns so the long list never runs off screen.
   Right-anchored because Resources sits near the right end of the nav. */
.nav__dropdown--wide {
  width: 560px;
  left: auto; right: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 6px;
  align-content: start;
}
.nav__dropdown--wide .dropdown__section-label { grid-column: 1 / -1; }
.dropdown__item {
  display: block; padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none;
  transition: background .12s ease;
}
.dropdown__item:hover { background: var(--bg); }
.dropdown__label { display: block; font-weight: 700; color: var(--ink); font-size: 14px; }
.dropdown__sub { display: block; font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.dropdown__section-label {
  margin: 10px 8px 4px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.dropdown__item--manual { padding-left: 18px; }

/* Workflows mega-menu (rich, wide) */
.nav__megamenu { width: 720px; padding: 24px; }
.megamenu__head { padding: 0 8px 14px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.megamenu__head h4 { font-size: 18px; margin-top: 6px; }
.megamenu__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.megamenu__item {
  display: grid; grid-template-columns: 28px 1fr; gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none;
  transition: background .12s ease;
}
.megamenu__item:hover { background: var(--bg); }
.megamenu__num {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  color: var(--ink-3); padding-top: 4px; letter-spacing: .04em;
}
.megamenu__name {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; color: var(--ink); font-size: 14px;
}
.megamenu__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent, var(--ink));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent, var(--ink)) 18%, transparent);
}
.megamenu__tag { display: block; font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.megamenu__foot {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.megamenu__foot a {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--brand-green-dark); font-weight: 700; text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
}

.nav__cta { display: flex; gap: 10px; align-items: center; flex: 0 0 auto; }
.nav__hamb { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.nav__hamb svg { width: 22px; height: 22px; }

.nav__phone {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--brand-green-dark, #1a6017);
  font-weight: 700; font-size: 15px; letter-spacing: 0.01em;
  text-decoration: none; padding: 8px 12px;
  border: 1px solid transparent; border-radius: 8px;
  transition: background 120ms ease, color 120ms ease;
}
.nav__phone:hover { background: rgba(40,140,39,0.08); color: #114d0e; }
.nav__phone svg { flex-shrink: 0; }
.nav__action-stack {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  width: 148px;
}
.nav__app-pill,
.nav__quote-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 4px 8px;
  border: 1px solid #cfc5b4;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .14s ease, color .14s ease, background .14s ease;
}
.nav__app-pill:hover,
.nav__quote-pill:hover {
  border-color: var(--brand-green-dark, #1a6017);
  color: var(--brand-green-dark, #1a6017);
  background: #f8fbf4;
}
.nav__quote-pill {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}
.nav__quote-pill:hover {
  border-color: #2c241c;
  background: #2c241c;
  color: #fff;
}

@media (max-width: 880px) {
  .nav__phone-text { display: none; }
  .nav__phone { padding: 8px; }
}

@media (max-width: 1120px) {
  .nav__links, .nav__cta .btn--primary, .nav__cta .nav__lang { display: none; }
  .site-logo { flex: 1 1 auto; min-width: 0; }
  .site-logo img { width: 100%; height: auto; max-width: 221px; }
  .nav__hamb { display: block; }
  /* Keep the quote pill in the compact nav when there is room for it. */
  .nav__action-stack { display: flex; width: auto; }
  .nav__action-stack .nav__app-pill { display: none; }
  .nav__quote-pill { font-size: 12px; padding: 8px 12px; }
}

@media (max-width: 520px) {
  .nav__inner { gap: 12px; padding: 10px 16px; }
  .site-logo img { max-width: 200px; }
  .nav__cta { flex: 0 0 auto; gap: 6px; }
  .nav__action-stack { display: none; }
  .nav__hamb { flex: 0 0 auto; }
}

.nav__lang {
  display: inline-flex; align-items: center; gap: 0;
  border: 1px solid rgba(0,0,0,0.10); border-radius: 6px;
  padding: 1px; background: #fff;
}
.nav__lang button {
  background: none; border: 0; cursor: pointer;
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--ink-2, #5c5547);
  padding: 3px 7px; border-radius: 4px;
  transition: background 120ms ease, color 120ms ease;
}
.nav__lang button:hover { color: var(--ink, #1a1612); }
.nav__lang button.is-active {
  background: var(--brand-green-dark, #1a6017);
  color: #fff;
}

/* Utility topbar above the main nav — hosts the language picker so it doesn't
   eat space in nav__cta. Hidden on mobile (picker also lives in mobile drawer). */
.topbar {
  background: #f5f1ea;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.topbar__inner {
  max-width: 1280px; margin: 0 auto;
  padding: 5px clamp(16px, 3vw, 32px);
  display: flex; justify-content: flex-end; align-items: center; gap: 16px;
}
.topbar__phone {
  color: var(--brand-green-dark, #1a6017);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-decoration: none;
  white-space: nowrap;
}
.topbar__phone:hover { color: #114d0e; }
@media (max-width: 1040px) {
  .topbar { display: none; }
}

.nav-mobile__intro {
  font-size: 12.5px; font-weight: 700; color: var(--ink-2);
  padding: 4px 0 12px; margin-bottom: 6px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.nav-mobile__lang { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(0,0,0,0.08); display: flex; justify-content: center; }
.nav-mobile__lang .nav__lang { transform: scale(1.15); }

/* ------- Translation-friendly heading rules -------
   ES and PT run ~15-25% longer than EN. Use balanced wrapping + soft hyphens
   so longer phrases break cleanly instead of orphaning words. No font-size
   reduction by default — heading sizes stay at their native values. */
.detail-hero h1, .hero__h1, .feature-hero__title,
.section-head h2, .section-head__title h2,
.banner-cta h3, .scenario__q {
  text-wrap: balance;
  hyphens: auto;
}
:lang(es) .eyebrow, :lang(pt) .eyebrow { letter-spacing: 0.08em; }
:lang(es) .btn, :lang(pt) .btn { letter-spacing: 0; }

/* Modes strip on the homepage: English lays out as 2 rows of 4 equal columns,
   but ES and PT labels are too long. Switch the rail to flex-wrap for those
   languages so items keep their natural width and flow to extra rows as needed. */
:lang(es) .workflows-strip__rail,
:lang(pt) .workflows-strip__rail {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
:lang(es) .workflows-strip__item,
:lang(pt) .workflows-strip__item {
  flex: 0 0 auto;
  white-space: nowrap;
}

.nav-mobile__call {
  background: rgba(40,140,39,0.10);
  color: var(--brand-green-dark, #1a6017) !important;
  font-weight: 700;
  border-radius: 8px; padding: 12px 14px !important;
  margin-bottom: 6px;
}

.nav-mobile {
  display: none; position: fixed; inset: 0; z-index: 60;
  background: var(--bg);
  padding: 24px var(--pad);
  flex-direction: column; gap: 8px;
  overflow-y: auto;
}
.nav-mobile.is-open { display: flex; }
.nav-mobile__close {
  align-self: flex-end; background: none; border: 0; font-size: 28px; cursor: pointer;
  color: var(--ink); width: 44px; height: 44px;
  display: grid; place-items: center;
}
.nav-mobile__group { padding: 6px 0; }
.nav-mobile__group summary {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3); padding: 12px 0; cursor: pointer;
  list-style: none;
}
.nav-mobile__group summary::after { content: " ▾"; opacity: .5; }
.nav-mobile__group[open] summary::after { content: " ▴"; opacity: .9; }
.nav-mobile__group a {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 19px; color: var(--ink);
  padding: 12px 0; border-bottom: 1px solid var(--line);
  text-decoration: none;
}
.nav-mobile__subhead {
  display: block;
  margin-top: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.nav-mobile__num {
  font-family: var(--font-mono); font-size: 12px; font-weight: 700; min-width: 22px;
}
.nav-mobile__top {
  display: block; font-size: 22px; font-weight: 700; color: var(--ink);
  padding: 16px 0; border-bottom: 1px solid var(--line);
  text-decoration: none;
}
.nav-mobile__cta {
  background: var(--ink); color: #fff !important; border: 0;
  border-radius: 999px; padding: 16px 20px;
  margin-top: 18px; text-align: center;
}

/* ------- Buttons ------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px;
  font: 500 15px/1 var(--font-sans);
  letter-spacing: -0.005em;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer; user-select: none;
  white-space: nowrap;
  transition: transform .12s ease, background .12s ease, color .12s ease, border-color .12s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--ink); color: #fff; }
.btn--primary:hover { background: #2c241c; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: #fff; }
.btn--invert { background: #fff; color: var(--ink); }
.btn--invert:hover { background: #efe9dc; }
.btn--text { background: transparent; padding: 12px 0; }
.btn--text:hover { color: var(--ink-3); }
.btn .arrow { transition: transform .15s ease; }
.btn:hover .arrow { transform: translateX(3px); }

/* ------- Hero ------- */
.hero {
  background: var(--bg-soil-2);
  color: #f3ece0;
  position: relative;
  overflow: hidden;
}
.hero__inner {
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  padding: clamp(64px, 10vw, 140px) var(--pad);
  max-width: var(--maxw); margin: 0 auto;
}
.hero h1 { color: #fff; }
.hero .eyebrow { color: #c9bda7; }
.hero .lead { color: #d8cfbc; }
.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.hero__visual {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #2d271f;
}
.hero__visual--product {
  background:
    radial-gradient(ellipse at 50% 35%, rgba(226,110,27,0.18), transparent 60%),
    radial-gradient(ellipse at 50% 80%, rgba(40,140,39,0.18), transparent 60%),
    #0c0a08;
  display: flex; align-items: center; justify-content: center;
  padding: 36px;
}
.hero__visual--product img {
  width: 100%; height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.5));
}
@media (max-width: 880px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__visual { aspect-ratio: 4/3; }
}

/* hero subtle field-row pattern */
.hero::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 8px;
  background: repeating-linear-gradient(90deg, #2c241c 0 12px, transparent 12px 20px);
  opacity: 0.7;
}

/* ------- Image placeholder ------- */
.imgph {
  position: relative;
  width: 100%; height: 100%;
  background: repeating-linear-gradient(
    135deg,
    #2a2218 0 14px,
    #221d15 14px 28px
  );
  display: flex; align-items: flex-end;
  color: #c9bda7;
}
.imgph--light {
  background: repeating-linear-gradient(135deg, #ece5d6 0 12px, #e3dac8 12px 24px);
  color: #6f6655;
}
.imgph--cream {
  background: repeating-linear-gradient(135deg, #f3ecdf 0 12px, #ebe2d0 12px 24px);
  color: #6f6655;
}
.imgph__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 12px 14px;
  background: rgba(0,0,0,0.35);
  margin: 12px;
  border-radius: 4px;
}
.imgph--light .imgph__label, .imgph--cream .imgph__label { background: rgba(255,255,255,0.7); color: #5a5246; }

/* ------- Cards ------- */
.cards {
  display: grid;
  gap: 18px;
}
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.cards--4 { grid-template-columns: repeat(4, 1fr); }
.cards--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 980px) {
  .cards--3, .cards--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .cards--3, .cards--4, .cards--2 { grid-template-columns: 1fr; }
}

.card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 28px;
  display: flex; flex-direction: column; gap: 14px;
  transition: border-color .15s ease, transform .15s ease;
}
.card:hover { border-color: var(--ink); }
.card--accent { border-top: 3px solid var(--accent, var(--ink)); }
.card h3 { font-size: 22px; }
.card p { color: var(--ink-2); font-size: 15.5px; }
.card__foot {
  margin-top: auto;
  padding-top: 14px;
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ------- Mode tile (8-strip) ------- */
.modes-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
@media (max-width: 920px) { .modes-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .modes-strip { grid-template-columns: 1fr; } }

.mode-tile {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 22px 22px 26px;
  display: flex; flex-direction: column; gap: 10px;
  position: relative; min-height: 200px;
  transition: border-color .15s ease, transform .15s ease;
}
.mode-tile:hover { border-color: var(--ink); transform: translateY(-2px); }
.mode-tile__dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent, var(--ink));
  box-shadow: 0 0 0 5px color-mix(in oklab, var(--accent, var(--ink)) 18%, transparent);
}
.mode-tile__num {
  position: absolute; top: 18px; right: 18px;
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint);
}
.mode-tile h4 { font-size: 19px; }
.mode-tile p { color: var(--ink-2); font-size: 14px; line-height: 1.45; }
.mode-tile__cta {
  margin-top: auto;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3);
  display: inline-flex; align-items: center; gap: 6px;
}

/* ------- Equipment chip wall ------- */
.chips {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-size: 14px;
  background: var(--bg-card);
  color: var(--ink-2);
}
.chip--strong { color: var(--ink); border-color: var(--ink); font-weight: 600; }
.chip__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent, var(--ink-3)); }

/* ------- Comparison row ------- */
.compare-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 0;
  border-bottom: 1px solid var(--line);
  padding: 16px 0;
  align-items: center;
}
.compare-row:first-child { border-top: 1px solid var(--line); }
.compare-row > div { padding: 0 12px; }
.compare-row__head {
  font-weight: 700; color: var(--ink);
}
.compare-row__cell { font-size: 15px; color: var(--ink-2); }
.compare-row__cell--strong { color: var(--ink); font-weight: 600; }

.compare-thead { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }

/* ------- X (Twitter) embed grid ------- */
.x-embeds {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  align-items: start; justify-items: center;
}
.x-embeds .twitter-tweet { margin: 0 auto !important; max-width: 100%; }

/* ------- X-post styled fallback cards (unused if embeds render) ------- */
.x-posts {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.x-post {
  background: #fff; border: 1px solid #e7e2d6; border-radius: 14px;
  padding: 18px 20px; display: flex; flex-direction: column; gap: 12px;
  transition: border-color 120ms ease, transform 120ms ease;
}
.x-post:hover { border-color: #cdc4ad; transform: translateY(-1px); }
.x-post__head { display: flex; align-items: flex-start; gap: 12px; }
.x-post__avatar {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 14px; letter-spacing: 0.02em;
  flex-shrink: 0;
}
.x-post__who { flex: 1; min-width: 0; }
.x-post__name { font-weight: 700; font-size: 15px; color: var(--ink); line-height: 1.2; }
.x-post__handle { display: block; font-size: 13px; color: #6f6655; margin-top: 2px; }
.x-post__logo { width: 18px; height: 18px; color: #000; flex-shrink: 0; margin-top: 4px; }
.x-post__logo-link { display: inline-flex; color: #000; flex-shrink: 0; margin-top: 4px; }
.x-post__logo-link:hover { color: #555; }
.x-post__body { font-size: 15px; line-height: 1.5; color: var(--ink); margin: 0; }
.x-post__body a { color: #288c27; text-decoration: none; }
.x-post__body a:hover { text-decoration: underline; }
.x-post__meta { font-size: 12px; color: #8a7e69; }
.x-post__meta a { color: inherit; text-decoration: none; }
.x-post__meta a:hover { color: #5a513f; text-decoration: underline; }

/* ------- Footer ------- */
.footer { background: var(--bg-soil); color: #c9bda7; padding: 64px 0 36px; margin-top: 48px; }
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 32px;
}
@media (max-width: 820px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer__grid { grid-template-columns: 1fr; } }

.footer h5 {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: #8a7e69;
  margin: 0 0 14px;
}
.footer a { display: block; font-size: 15px; color: #d8cfbc; padding: 5px 0; }
.footer a:hover { color: #fff; }
.footer__subhead {
  display: block;
  margin: 14px 0 6px;
  padding-top: 12px;
  border-top: 1px solid #2d271f;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8a7e69;
}
.footer__about { font-size: 14px; color: #a89c84; max-width: 32ch; line-height: 1.55; margin-top: 10px; }
.footer__bottom {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 48px; padding-top: 24px; border-top: 1px solid #2d271f;
  font-size: 13px; color: #8a7e69;
  flex-wrap: wrap; gap: 12px;
}
.footer__disclaimer {
  margin-top: 16px; font-size: 11px; line-height: 1.5;
  color: #6a6052;
}

/* ------- Sectioned helpers ------- */
.section-head {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: end;
  margin-bottom: 36px;
}
@media (max-width: 820px) { .section-head { grid-template-columns: 1fr; } }
.section-head__title h2 { margin-top: 12px; }

.split {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 60px);
  align-items: center;
}
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } }
.split--reverse > :first-child { order: 2; }
@media (max-width: 820px) { .split--reverse > :first-child { order: 0; } }

/* ------- Pain / feature lists ------- */
.feat-list { list-style: none; padding: 0; margin: 0; }
.feat-list li {
  padding: 16px 0;
  border-top: 1px solid var(--line);
  display: grid; grid-template-columns: 28px 1fr; gap: 16px; align-items: start;
}
.feat-list li:last-child { border-bottom: 1px solid var(--line); }
.feat-list__num {
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-3);
  padding-top: 3px;
}
.feat-list strong { display: block; margin-bottom: 4px; }
.feat-list p { color: var(--ink-2); font-size: 15.5px; }

/* ------- Quote ------- */
.banner-cta {
  background: var(--bg-soil-2); color: #f3ece0; border-radius: 6px;
  padding: clamp(36px, 5vw, 64px);
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 32px; align-items: center;
}
@media (max-width: 820px) { .banner-cta { grid-template-columns: 1fr; } }
.banner-cta h3 { color: #fff; }
.banner-cta p { color: #d8cfbc; }

/* ------- Proof pillars ------- */
.pillars {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
@media (max-width: 820px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .pillars { grid-template-columns: 1fr; } }
.pillar {
  border: 1px solid var(--line); border-radius: 6px; padding: 24px;
  background: var(--bg-card);
}
.pillar__icon {
  width: 36px; height: 36px;
  border: 1px solid var(--ink); border-radius: 50%;
  display: grid; place-items: center; margin-bottom: 14px;
}
.pillar h4 { font-size: 17px; margin-bottom: 6px; }
.pillar p { color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }

/* ------- KV (spec list) ------- */
.kv {
  border-top: 1px solid var(--line);
}
.kv__row {
  display: grid; grid-template-columns: 220px 1fr;
  padding: 14px 0; border-bottom: 1px solid var(--line);
  gap: 16px;
}
@media (max-width: 620px) { .kv__row { grid-template-columns: 1fr; } }
.kv__k { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); padding-top: 3px; }
.kv__v { color: var(--ink-2); font-size: 15.5px; }
.kv__v strong { color: var(--ink); }

/* ------- Status pills ------- */
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 11px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  background: #efe9dc; color: var(--ink-2);
}
.pill__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
.pill--good { background: color-mix(in oklab, var(--fix) 22%, white); color: #14532d; }
.pill--good .pill__dot { background: #16a34a; }
.pill--warn { background: color-mix(in oklab, var(--float) 30%, white); color: #78350f; }
.pill--warn .pill__dot { background: #b45309; }

/* ------- Detail page header ------- */
.detail-hero {
  background: var(--accent-bg, var(--bg-soil));
  color: var(--accent-fg, #f3ece0);
  position: relative;
}
.detail-hero__inner {
  padding: clamp(52px, 8vw, 96px) var(--pad) clamp(36px, 5vw, 60px);
  max-width: var(--maxw); margin: 0 auto;
}
.detail-hero h1 { color: var(--accent-fg, #fff); max-width: 18ch; }
.detail-hero .lead { color: var(--accent-fg-soft, #d8cfbc); }

.crumbs {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent-fg-soft, #c9bda7); display: flex; gap: 10px; margin-bottom: 22px;
  font-weight: 700;
}
.crumbs a { color: inherit; opacity: 0.8; }
.crumbs a:hover { opacity: 1; }

.mode-accent { color: var(--accent, var(--ink)); }

/* ------- Phone/tablet frame mockup ------- */
.tablet-frame {
  background: #0c0a08;
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.06) inset;
  position: relative;
}
.tablet-frame::after {
  content: ""; position: absolute; top: 50%; right: 6px; width: 4px; height: 36px;
  background: #1a1612; border-radius: 2px; transform: translateY(-50%);
}
.tablet-frame__screen {
  background: #0e1f14;
  aspect-ratio: 16/10;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}

/* App screen mock — generic for hero loop */
.appmock {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #142a18 0%, #0e1f14 100%);
  display: flex; flex-direction: column;
}
.appmock__topbar {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-family: var(--font-mono); font-size: 10px; color: #c9bda7;
}
.appmock__map {
  flex: 1; position: relative;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px),
    radial-gradient(ellipse at 30% 60%, rgba(74,222,128,0.18), transparent 60%),
    radial-gradient(ellipse at 70% 40%, rgba(59,130,246,0.14), transparent 60%);
  background-size: 24px 24px, 24px 24px, auto, auto;
}
.appmock__line {
  position: absolute; top: 50%; left: 8%; right: 8%;
  height: 2px; background: var(--accent, #4ade80);
  transform: translateY(-50%) rotate(-3deg);
  box-shadow: 0 0 12px var(--accent, #4ade80);
}
.appmock__sidebar {
  position: absolute; right: 10px; top: 10px; bottom: 10px;
  width: 22%; background: rgba(20,40,26,0.78); border: 1px solid rgba(255,255,255,0.07);
  border-radius: 4px;
  padding: 10px;
  display: flex; flex-direction: column; gap: 8px;
  font-family: var(--font-mono); font-size: 9px; color: #c9bda7;
}
.appmock__stat { display: flex; justify-content: space-between; }
.appmock__stat strong { color: var(--accent, #4ade80); font-weight: 700; }

/* Profile-chart mock for excavator */
.appmock__chart {
  position: absolute; bottom: 10px; left: 10px; right: 26%;
  height: 38%;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 4px;
  overflow: hidden;
}

/* ------- Subtle helpers ------- */
.muted { color: var(--ink-3); }
.center { text-align: center; }
.flex-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.stack > * + * { margin-top: 14px; }
.stack-lg > * + * { margin-top: 28px; }

hr.hairline { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* ------- Anchors offset for sticky nav ------- */
[id] { scroll-margin-top: 80px; }

/* ------- Print ------- */
@media print {
  .nav, .footer, .nav__hamb { display: none; }
}


/* ============ Components added in build pass 2 ============ */

/* Crumbs */
.crumbs { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: #c9bda7; text-transform: uppercase; }
.crumbs a { color: #c9bda7; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.18); }
.crumbs a:hover { color: #f3ece0; }
.crumbs span { opacity: .5; }

/* Detail-hero (page heros for kit / app / mode / utility pages) */
.detail-hero { background: #221d18; color: #f3ece0; padding: 96px 0 72px; }
.detail-hero__inner { max-width: 1240px; padding: 0 32px; margin: 0 auto; }
.detail-hero h1 { font-family: var(--font-display); font-size: clamp(36px, 5vw, 64px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; margin: 0; color: #fff; }
.detail-hero .lead { color: #d8cfbc; font-size: clamp(17px, 1.4vw, 21px); line-height: 1.55; margin: 0; }

/* Section helper for tighter trailing CTA banner */
.section--tight { padding: 48px 0 96px; }

/* Compare table */
.cmp { width: 100%; border-collapse: collapse; font-size: 15px; }
.cmp thead th { text-align: left; padding: 24px 18px; vertical-align: bottom; font-weight: 500; color: var(--ink); font-family: var(--font-display); font-size: 18px; border-bottom: 2px solid var(--ink); }
.cmp thead th div { font-size: 13px; color: #6b6256; font-weight: 400; margin-top: 6px; font-family: var(--font-body); }
.cmp__pill { display: inline-block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: 4px; }
.cmp__img { width: 160px; height: 160px; background: #1a1612; border-radius: 14px; padding: 16px; margin: 0 0 14px; display: flex; align-items: center; justify-content: center; }
.cmp__img img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
@media (max-width: 700px) { .cmp__img { width: 110px; height: 110px; padding: 10px; } }
.cmp tbody th { text-align: left; font-weight: 500; color: var(--ink); padding: 16px 18px; vertical-align: top; width: 28%; border-bottom: 1px solid var(--line); background: #f7f1e3; }
.cmp tbody td { padding: 16px 18px; vertical-align: top; border-bottom: 1px solid var(--line); color: #3a3328; }

/* Modes secondary nav (on mode detail pages) */
.modes-nav { background: #221d18; color: #f3ece0; border-bottom: 1px solid #3a3025; overflow-x: auto; }
/* Visible lead-in so a stranger reads the strip as "same product, other jobs". */
.modes-nav__label {
  display: inline-flex; align-items: center;
  padding: 14px 4px 14px 0;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: #8d8271; white-space: nowrap;
}
.modes-nav__inner { display: flex; gap: 4px; padding: 0 32px; max-width: 1240px; margin: 0 auto; }
.modes-nav__item { display: inline-flex; align-items: center; gap: 8px; padding: 14px 16px; color: #c9bda7; text-decoration: none; font-size: 13px; font-weight: 500; white-space: nowrap; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; }
.modes-nav__item:hover { color: #f3ece0; }
.modes-nav__item.is-active { color: #fff; border-bottom-color: var(--accent, #4ade80); }
.modes-nav__num { font-family: var(--font-mono); font-size: 10px; opacity: .55; }

/* Mode-page orientation band — makes each mode page double as a landing page:
   tells a search-arrival visitor what Ditch Assist is and that buying the kit
   for this one job includes every other workflow. Reusable across all modes. */
.mode-orient { background: #f3ecdf; border-bottom: 1px solid var(--line); }
.mode-orient__inner { display: flex; align-items: center; justify-content: space-between; gap: clamp(16px, 3vw, 40px); padding-top: 18px; padding-bottom: 18px; flex-wrap: wrap; }
.mode-orient__lead { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; flex: 1 1 520px; }
.mode-orient__chip { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; white-space: nowrap; }
.mode-orient__lead p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.55; max-width: 78ch; }
.mode-orient__lead strong { color: var(--ink); }
.mode-orient__cta { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; color: var(--ink); text-decoration: none; white-space: nowrap; border-bottom: 2px solid var(--accent, #288c27); padding-bottom: 2px; }
.mode-orient__cta:hover { color: var(--accent, #288c27); }
@media (max-width: 720px) { .mode-orient__cta { width: 100%; } }

/* Land forming file handoff and comparison visuals */
.file-handoff-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.file-handoff-step { position: relative; min-height: 128px; padding: 18px; overflow: hidden; background: #1f211d; border-radius: 8px; color: #f3ece0; }
.file-handoff-step__num { display: block; margin-bottom: 22px; font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: #e26e1b; letter-spacing: .08em; }
.file-handoff-step strong { display: block; font-family: var(--font-display); font-size: 19px; line-height: 1.2; color: #fff; }
.file-handoff-step p { margin: 8px 0 0; color: #c9bda7; font-size: 14px; line-height: 1.45; }
.format-examples { display: grid; gap: 10px; margin-top: 12px; }
.format-examples strong { display: block; margin-bottom: 4px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: var(--ink); }
.format-examples pre { margin: 0; padding: 10px 12px; overflow: auto; background: #1f211d; color: #f3ece0; border-radius: 8px; font-size: 13px; }
.land-unit-note { margin-bottom: 22px; padding: 20px 22px; background: #fffaf2; border: 1px solid var(--line); border-left: 4px solid #e26e1b; border-radius: 10px; }
.land-unit-note h3 { margin: 0; font-size: 22px; }
.land-unit-note p { margin: 8px 0 0; color: var(--ink-2); line-height: 1.55; }
.land-file-handoff .cards,
.land-file-handoff .cards > *,
.land-file-handoff .card,
.land-file-handoff .file-handoff-flow,
.land-file-handoff .file-handoff-step,
.land-file-handoff .format-examples,
.land-file-handoff .format-examples > * {
  min-width: 0;
}
.land-file-handoff pre {
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.land-file-handoff p code,
.land-file-handoff li code {
  overflow-wrap: anywhere;
}
@media (max-width: 620px) {
  .land-file-handoff .card { padding: 20px; }
  .land-file-handoff pre { font-size: 12px; }
  .land-unit-note { padding: 18px; }
}
.land-target-stack { display: grid; gap: 16px; margin-top: 18px; }
.land-target-item { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 16px; align-items: center; }
.land-target-item p { margin: 4px 0 0; color: var(--ink-2); line-height: 1.5; }
.land-target-graphic { position: relative; width: 92px; height: 68px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #f3ecdf; }
.land-target-graphic--flat::before { content: ""; position: absolute; left: 10px; right: 10px; bottom: 20px; height: 4px; background: #288c27; box-shadow: 0 -18px 0 rgba(40, 140, 39, .14); }
.land-target-graphic--slope::before { content: ""; position: absolute; left: 7px; right: 7px; bottom: 19px; height: 4px; background: #e26e1b; transform: rotate(-14deg); transform-origin: left center; box-shadow: 0 -18px 0 rgba(226, 110, 27, .15); }
.land-target-graphic--surface {
  background:
    linear-gradient(180deg, rgba(20, 14, 8, .08), rgba(20, 14, 8, .34)),
    url("https://ditch-assist.b-cdn.net/website%20graphics/da-land-forming-hero.jpg") center / cover no-repeat;
}
@media (max-width: 980px) { .file-handoff-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .file-handoff-flow { grid-template-columns: 1fr; }
  .land-target-item { grid-template-columns: 76px minmax(0, 1fr); }
  .land-target-graphic { width: 76px; height: 62px; }
}

/* Scenarios (which-system) */
.scenarios { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 20px; }
.scenario { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 28px; border-left: 4px solid var(--accent, #4ade80); display: flex; flex-direction: column; gap: 14px; }
.scenario__q { font-family: var(--font-display); font-size: 20px; line-height: 1.3; color: var(--ink); }
.scenario__a { color: #3a3328; font-size: 15px; line-height: 1.55; }
.scenario__cta { margin-top: auto; align-self: flex-start; color: var(--ink); text-decoration: none; font-weight: 500; font-size: 14px; border-bottom: 1px solid currentColor; padding-bottom: 2px; }

/* Dealers grid */
.dealer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.dealer h4 { font-family: var(--font-display); font-size: 19px; margin: 0; color: var(--ink); }

/* Interactive dealer locator */
.detail-hero--dealers {
  position: relative;
  min-height: 390px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(12, 10, 8, 0.72) 0%, rgba(12, 10, 8, 0.52) 46%, rgba(12, 10, 8, 0.18) 100%),
    linear-gradient(180deg, rgba(12, 10, 8, 0.10) 0%, rgba(12, 10, 8, 0.62) 100%),
    url("https://ditch-assist.b-cdn.net/website%20graphics/surface-drainage.png") center / cover no-repeat;
}
.detail-hero.detail-hero--dealers { padding: 78px 0 58px; }
.detail-hero--dealers .detail-hero__inner { position: relative; z-index: 1; }
.dealer-locator-section { background: #f7f1e3; padding-top: 44px; }
.dealer-locator {
  display: grid;
  grid-template-columns: minmax(340px, 430px) minmax(0, 1fr);
  min-height: 720px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 28px 70px rgba(26, 22, 18, 0.14);
}
.dealer-panel {
  display: flex;
  flex-direction: column;
  min-height: 720px;
  max-height: calc(100vh - 96px);
  background: #fff;
  border-right: 1px solid var(--line);
}
.dealer-panel__head {
  padding: 22px 24px 16px;
  background: #fbf7ef;
  border-bottom: 1px solid var(--line);
}
.dealer-panel__head h2 {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1.05;
  color: var(--ink);
}
.dealer-panel__head p {
  margin: 10px 0 0;
  color: #4d4438;
  font-size: 15px;
  line-height: 1.5;
}
.dealer-controls { display: grid; gap: 10px; margin-top: 18px; }
.dealer-control { display: grid; gap: 6px; }
.dealer-control span {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #6b6256;
}
.dealer-control input,
.dealer-control select {
  width: 100%;
  min-height: 46px;
  border: 1px solid #d8cfbc;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  padding: 11px 12px;
}
.dealer-control input:focus,
.dealer-control select:focus {
  outline: none;
  border-color: #288c27;
  box-shadow: 0 0 0 3px rgba(40, 140, 39, 0.16);
}
.dealer-actions { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.dealer-actions .btn {
  justify-content: center;
  min-height: 46px;
  padding-inline: 16px;
  white-space: nowrap;
}
.dealer-actions .btn:disabled { opacity: .62; cursor: wait; }
.dealer-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.dealer-stats div {
  flex: 1 1 110px;
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid #e0d7c6;
  border-radius: 8px;
}
.dealer-stats strong {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1;
  overflow-wrap: anywhere;
}
.dealer-stats span {
  color: #6b6256;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.dealer-status {
  min-height: 20px;
  margin-top: 10px !important;
  color: #5d554a !important;
  font-size: 13px !important;
}
.dealer-status.is-error { color: #9b2f1c !important; }
.dealer-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  overflow: auto;
  padding: 14px;
  background: #fff;
}
.dealer-result {
  display: flex;
  flex-direction: column;
  height: max-content;
  min-height: max-content;
  border: 1px solid #e1d8ca;
  border-left: 4px solid transparent;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.dealer-result:hover {
  border-color: #cdbfaa;
  box-shadow: 0 12px 28px rgba(26, 22, 18, 0.08);
}
.dealer-result.is-active {
  border-color: #288c27;
  box-shadow: 0 14px 34px rgba(40, 140, 39, 0.16);
}
.dealer-result__select {
  display: block;
  width: 100%;
  padding: 16px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.dealer-result__select:focus-visible {
  outline: 3px solid rgba(40, 140, 39, 0.28);
  outline-offset: -3px;
}
.dealer-result__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.dealer-result__top strong {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.18;
}
.dealer-result__top span {
  flex: 0 0 auto;
  color: #288c27;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.dealer-result__place {
  display: block;
  margin-top: 8px;
  color: #5b5145;
  font-size: 13px;
  line-height: 1.45;
}
.dealer-result__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 16px 16px;
}
.dealer-result__links a {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid #d8cfbc;
  border-radius: 999px;
  color: var(--ink);
  background: #fbf7ef;
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
}
.dealer-result__links a:hover {
  border-color: #288c27;
  color: #288c27;
}
.dealer-empty {
  padding: 22px;
  border: 1px dashed #cdbfaa;
  border-radius: 8px;
  background: #fbf7ef;
  color: #4d4438;
}
.dealer-empty strong {
  display: block;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 19px;
}
.dealer-empty p { margin: 8px 0 0; font-size: 14px; line-height: 1.5; }
.dealer-map-shell {
  position: relative;
  min-height: 720px;
  background: #dce4d8;
}
.dealer-map {
  position: absolute;
  inset: 0;
  min-height: 720px;
  z-index: 1;
}
.dealer-map .leaflet-control-attribution { font-size: 10px; }
.dealer-map__legend {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border: 1px solid rgba(26, 22, 18, 0.15);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
  box-shadow: 0 12px 34px rgba(26, 22, 18, 0.16);
  font-size: 13px;
  font-weight: 700;
}
.dealer-map__pin,
.dealer-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #fff;
}
.dealer-map__pin {
  width: 28px;
  height: 28px;
  border: 2px solid #1a1612;
}
.dealer-map__pin img { width: 17px; height: 17px; object-fit: contain; display: block; }
.dealer-marker-wrap { background: transparent; border: 0; }
.dealer-marker {
  width: 38px;
  height: 38px;
  border: 2px solid #1a1612;
  box-shadow: 0 7px 18px rgba(26, 22, 18, 0.28);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.dealer-marker img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
}
.dealer-marker-wrap.is-active .dealer-marker {
  transform: scale(1.14);
  background: #9be197;
  border-color: #288c27;
}
.dealer-cluster {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 3px solid #9be197;
  border-radius: 999px;
  background: #1a1612;
  color: #fff;
  box-shadow: 0 10px 24px rgba(26, 22, 18, 0.28);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
}
.dealer-cluster span { line-height: 1; }
.dealer-popup { min-width: 210px; }
.dealer-popup strong {
  display: block;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.18;
}
.dealer-popup p {
  margin: 8px 0 10px;
  color: #4d4438;
  font-size: 13px;
  line-height: 1.4;
}
.dealer-popup div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.dealer-popup a {
  color: #288c27;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}
.dealer-popup a:hover { text-decoration: underline; }
.leaflet-popup-content-wrapper { border-radius: 8px; }
@media (max-width: 1040px) {
  .dealer-locator { grid-template-columns: 1fr; }
  .dealer-panel {
    min-height: auto;
    max-height: none;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .dealer-list {
    max-height: 430px;
    overflow: auto;
  }
  .dealer-map-shell,
  .dealer-map { min-height: 580px; }
}
@media (max-width: 640px) {
  .detail-hero.detail-hero--dealers { min-height: 460px; padding: 72px 0 52px; }
  .dealer-locator-section { padding-top: 24px; }
  .dealer-locator {
    border-radius: 8px;
    margin-inline: -8px;
  }
  .dealer-panel__head { padding: 20px; }
  .dealer-panel__head h2 { font-size: 28px; }
  .dealer-actions { grid-template-columns: 1fr; }
  .dealer-stats div { padding: 10px 8px; }
  .dealer-stats strong { font-size: 20px; }
  .dealer-list { padding: 10px; }
  .dealer-result__top { flex-direction: column; gap: 6px; }
  .dealer-map-shell,
  .dealer-map { min-height: 520px; }
  .dealer-map__legend {
    right: 10px;
    bottom: 10px;
    max-width: calc(100% - 20px);
  }
}

/* Image Georeferencer tool */
.georef-section { background: #f7f1e3; padding-top: 44px; }
.georef-layout {
  display: grid;
  grid-template-columns: minmax(340px, 430px) minmax(0, 1fr);
  min-height: 720px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 28px 70px rgba(26, 22, 18, 0.14);
}
.georef-panel {
  display: flex;
  flex-direction: column;
  min-height: 720px;
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  background: #fff;
  border-right: 1px solid var(--line);
  padding: 28px;
}
.georef-panel h2 { margin-top: 10px; }
.georef-panel__lead { color: var(--ink-2); margin-top: 8px; }
.georef-dropzone {
  margin-top: 20px;
  border: 2px dashed #c9bda7;
  border-radius: 10px;
  padding: 22px;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.georef-dropzone:hover,
.georef-dropzone.is-dragover { border-color: #288c27; background: #f3faf1; }
.georef-dropzone input[type="file"] { display: none; }
.georef-dropzone strong { display: block; font-size: 15px; }
.georef-dropzone span { display: block; margin-top: 6px; font-size: 13px; color: var(--ink-2); }
.georef-dropzone.has-file { border-style: solid; border-color: #288c27; background: #f3faf1; }
.georef-field { display: grid; gap: 6px; margin-top: 16px; }
.georef-field span {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #6b6256;
}
.georef-field input[type="search"],
.georef-field input[type="number"],
.georef-field input[type="text"] {
  width: 100%;
  min-height: 44px;
  border: 1px solid #d8cfbc;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  padding: 10px 12px;
}
.georef-field input:focus {
  outline: none;
  border-color: #288c27;
  box-shadow: 0 0 0 3px rgba(40, 140, 39, 0.16);
}
.georef-search-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.georef-corners { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.georef-opacity-row { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.georef-opacity-row input[type="range"] { flex: 1 1 auto; }
.georef-opacity-row output { font-family: var(--font-mono); font-size: 13px; min-width: 42px; text-align: right; }
.georef-actions { display: grid; gap: 10px; margin-top: 20px; }
.georef-actions .btn { justify-content: center; min-height: 46px; }
.georef-actions .btn:disabled { opacity: .5; cursor: not-allowed; }
.georef-status { margin-top: 14px; font-size: 13px; color: var(--ink-2); min-height: 18px; }
.georef-status.is-error { color: #b3401f; }
.georef-worldfile {
  margin-top: 18px;
  padding: 14px;
  background: #f7f1e3;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.georef-worldfile__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #6b6256;
  display: block;
  margin-bottom: 8px;
}
.georef-worldfile pre {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-all;
  margin: 0;
  color: var(--ink);
}
.georef-map-shell { position: relative; min-height: 720px; background: #dce4d8; }
.georef-map { position: absolute; inset: 0; min-height: 720px; z-index: 1; cursor: default; }
.georef-map .leaflet-control-attribution { font-size: 10px; }
.georef-corner-marker {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #288c27;
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
  cursor: grab;
}
.georef-corner-marker:active { cursor: grabbing; }
.georef-image-overlay { cursor: move; }
@media (max-width: 980px) {
  .georef-layout { grid-template-columns: 1fr; }
  .georef-panel { min-height: auto; max-height: none; border-right: 0; border-bottom: 1px solid var(--line); }
  .georef-map-shell,
  .georef-map { min-height: 480px; }
}
@media (max-width: 640px) {
  .georef-section { padding-top: 24px; }
  .georef-layout { border-radius: 8px; margin-inline: -8px; }
  .georef-panel { padding: 20px; }
  .georef-corners { grid-template-columns: 1fr; }
}

/* Card link helper */
.card__link { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; color: var(--ink); text-decoration: none; font-weight: 500; font-size: 14px; border-bottom: 1px solid currentColor; padding-bottom: 2px; align-self: flex-start; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: start; }
@media (max-width: 800px) { .contact-grid { grid-template-columns: 1fr; gap: 32px; } }
.contact-form { display: flex; flex-direction: column; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #6b6256; }
.field input, .field select, .field textarea { font: inherit; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); }
.contact-aside { display: flex; flex-direction: column; gap: 22px; padding: 28px; background: #f3ecdf; border-radius: 12px; }
.contact-aside h4 { font-family: var(--font-display); margin: 0 0 4px; font-size: 16px; color: var(--ink); }
.contact-aside p { margin: 0; color: #3a3328; font-size: 14px; }
.contact-aside a { color: var(--ink); font-weight: 700; text-decoration: none; border-bottom: 1px solid currentColor; }
.contact-aside a:hover { color: var(--brand-green-dark, #1a6017); }

/* Quote landing page */
.quote-hero {
  position: relative;
  min-height: calc(100vh - 96px);
  overflow: hidden;
  background: #14100c;
  color: #f3ece0;
  display: flex;
  align-items: center;
}
.quote-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.quote-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(12, 10, 8, 0.76) 0%, rgba(12, 10, 8, 0.56) 48%, rgba(12, 10, 8, 0.30) 100%),
    linear-gradient(180deg, rgba(12, 10, 8, 0.10) 0%, rgba(12, 10, 8, 0.68) 100%);
}
.quote-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 48px 32px;
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(360px, 460px);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
.quote-hero__copy h1 {
  margin: 18px 0 0;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(38px, 5vw, 66px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  max-width: 14ch;
}
.quote-hero__copy p {
  margin: 24px 0 0;
  color: #f1e6d3;
  font-size: clamp(17px, 1.45vw, 21px);
  line-height: 1.55;
  max-width: 58ch;
}
.quote-hero__eyebrow { color: #ffb26f; }
.quote-bullets {
  display: grid;
  gap: 11px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  max-width: 58ch;
}
.quote-bullets li {
  position: relative;
  padding-left: 24px;
  color: #d8cfbc;
  font-size: 16px;
  line-height: 1.45;
}
.quote-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .58em;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #e26e1b;
}
.quote-hero__calls {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 30px;
}
.quote-hero__dealer {
  color: #f3ece0;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid #e26e1b;
  padding-bottom: 3px;
}
.quote-form-card {
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.32);
  padding: 24px;
}
.quote-form-card__head h2 {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1.08;
}
.quote-form-card__head p {
  margin: 8px 0 0;
  color: #5c5448;
  font-size: 14px;
  line-height: 1.45;
}
.quote-form {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}
.quote-form__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.quote-field {
  display: grid;
  gap: 5px;
}
.quote-field[hidden] { display: none !important; }
.quote-field label {
  color: #5c5448;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.quote-field label span { color: #e26e1b; }
.quote-field input,
.quote-field select,
.quote-field textarea {
  width: 100%;
  border: 1px solid #d6ccbc;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  padding: 11px 12px;
}
.quote-field textarea { resize: vertical; min-height: 104px; }
.quote-field input:focus,
.quote-field select:focus,
.quote-field textarea:focus {
  outline: none;
  border-color: #e26e1b;
  box-shadow: 0 0 0 3px rgba(226, 110, 27, 0.18);
}
.quote-form__submit {
  justify-content: center;
  min-height: 48px;
  margin-top: 4px;
}
.quote-form__note {
  margin: 0;
  color: #5c5448;
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
}
.quote-form__note a {
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}
.quote-form__note a:hover { color: #e26e1b; }
.quote-modes {
  background: #fff;
}
.quote-modes__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.quote-mode-card {
  position: relative;
  display: block;
  min-height: 100%;
  padding: 22px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--accent, #288c27);
  border-radius: 8px;
  background: #fbf8ef;
  color: var(--ink);
  text-decoration: none;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.quote-mode-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--accent, #288c27) 55%, var(--line));
  box-shadow: 0 16px 34px rgba(26,22,18,.09);
}
.quote-mode-card span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--accent, #288c27);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
}
.quote-mode-card h3 {
  margin-top: 14px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.08;
}
.quote-mode-card p {
  margin-top: 10px;
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.45;
}
.quote-next { background: #f7f1e3; }
.quote-next__grid {
  display: grid;
  grid-template-columns: minmax(260px, .8fr) 1.2fr;
  gap: clamp(24px, 5vw, 72px);
  align-items: start;
}
.quote-next__grid h2 {
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.05;
  color: var(--ink);
}
.quote-next__steps {
  display: grid;
  gap: 12px;
}
.quote-next__steps div {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 14px;
  align-items: center;
  padding: 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.quote-next__steps strong {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: #1a1612;
  color: #fff;
  font-family: var(--font-display);
  font-size: 20px;
}
.quote-next__steps span {
  color: #342c23;
  font-size: 16px;
  line-height: 1.45;
}
@media (max-width: 980px) {
  .quote-hero { min-height: auto; }
  .quote-hero__inner {
    grid-template-columns: 1fr;
    padding: 56px 24px;
  }
  .quote-hero__copy h1 { max-width: 14ch; }
  .quote-form-card { max-width: 560px; }
  .quote-modes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quote-next__grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .quote-hero__inner { padding: 44px 20px; }
  .quote-hero__copy h1 { font-size: 40px; }
  .quote-form-card { padding: 18px; }
  .quote-form__split { grid-template-columns: 1fr; }
  .quote-modes__grid { grid-template-columns: 1fr; }
  .quote-next__steps div { grid-template-columns: 38px 1fr; padding: 15px; }
  .quote-next__steps strong { width: 36px; height: 36px; font-size: 17px; }
}


/* ============ Homepage v2 (applications-first) ============ */

/* Hero — outcome-led */
.hero--work { position: relative; padding: 120px 0 96px; background: #1a1612; color: #f3ece0; overflow: hidden; min-height: 720px; display: flex; align-items: center; }
.hero--work::before { content:""; position:absolute; inset:0; background: radial-gradient(ellipse at 70% 30%, rgba(40,140,39,0.18), transparent 55%), radial-gradient(ellipse at 20% 80%, rgba(226,110,27,0.12), transparent 50%); pointer-events:none; z-index: 2; }
.hero--work .hero__inner { position: relative; max-width: 1240px; padding: 0 32px; margin: 0 auto; z-index: 3; width: 100%; }

/* Video-backed hero (homepage) */
.hero--video .hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero--video .hero__overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,8,6,0.42) 0%, rgba(10,8,6,0.64) 100%),
    radial-gradient(ellipse at 30% 40%, rgba(226,110,27,0.13) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 60%, rgba(40,140,39,0.13) 0%, transparent 55%);
  z-index: 1;
}
.hero__h1 { font-family: var(--font-display); font-size: clamp(48px, 7vw, 96px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.0; margin: 18px 0 0; color: #fff; }
.hero__h1-mid  { opacity: 0.6; }
.hero__h1-soft { opacity: 0.35; }
.hero--work .hero__h1 {
  hyphens: manual;
  overflow-wrap: normal;
  word-break: normal;
  margin-top: 0;
}
.hero--work .eyebrow--script {
  margin-top: 22px;
  max-width: 760px;
}
.hero--work .hero__h1-mid,
.hero--work .hero__h1-soft {
  display: inline-block;
  white-space: nowrap;
}
@media (max-width: 620px) {
  .hero--work { min-height: 620px; padding: 92px 0 72px; }
  .hero--work .hero__inner { padding: 0 22px; }
  .hero--video .hero__overlay {
    background:
      linear-gradient(180deg, rgba(10,8,6,0.34) 0%, rgba(10,8,6,0.56) 100%),
      radial-gradient(ellipse at 30% 40%, rgba(226,110,27,0.10) 0%, transparent 55%),
      radial-gradient(ellipse at 70% 60%, rgba(40,140,39,0.10) 0%, transparent 55%);
  }
  .hero--work .hero__h1 {
    font-size: clamp(34px, 10.5vw, 46px);
    line-height: 1.04;
    letter-spacing: 0;
  }
  :lang(es) .hero--work .hero__inner,
  :lang(pt) .hero--work .hero__inner {
    max-width: 100%;
    min-width: 0;
  }
  :lang(es) .hero--work .hero__h1,
  :lang(pt) .hero--work .hero__h1 {
    font-size: clamp(29px, 8.7vw, 42px);
    line-height: 1.08;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  :lang(es) .hero--work .hero__h1-mid,
  :lang(es) .hero--work .hero__h1-soft,
  :lang(pt) .hero--work .hero__h1-mid,
  :lang(pt) .hero--work .hero__h1-soft {
    display: inline;
    white-space: normal;
  }
  :lang(es) .hero--work .hero__lead,
  :lang(pt) .hero--work .hero__lead {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  :lang(es) .hero--work .hero__cta,
  :lang(pt) .hero--work .hero__cta {
    width: 100%;
  }
  :lang(es) .hero--work .hero__cta .btn,
  :lang(pt) .hero--work .hero__cta .btn {
    flex: 1 1 100%;
    justify-content: center;
    max-width: 100%;
    min-height: 46px;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
  }
}

/* Mode cards are dark — accent values stay vibrant on the deep background, no override needed. */

/* Workflows section head — amped to anchor the dark mode-cards beneath it. */
#workflows .section-head {
  margin-bottom: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid #e0d5c0;
  position: relative;
}
#workflows .section-head::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 96px; height: 3px;
  background: #288c27;
}
#workflows .section-head .section-chip {
  font-size: 12px;
  padding: 8px 18px;
  letter-spacing: .14em;
}
#workflows .section-head h2 {
  font-size: clamp(34px, 4.6vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin-top: 18px;
  color: #1a1612;
}
#workflows .section-head .lead {
  color: #2a221c;
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.5;
  font-weight: 500;
}

/* High-impact underline for emphasized words inside an eyebrow */
.eyebrow__hl {
  text-decoration: underline;
  text-decoration-color: #ffffff;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
.hero__lead { color: #d8cfbc; max-width: 64ch; margin-top: 32px; font-size: clamp(17px, 1.4vw, 21px); line-height: 1.55; }

/* Applications grid (the WORK) */
.apps-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; margin-top: 12px; }
.app-card { grid-column: span 4; background: #1a1612; border: 1px solid #3a3025; border-radius: 14px; padding: 28px; text-decoration: none; color: #f3ece0; display: flex; flex-direction: column; gap: 12px; position: relative; border-top: 4px solid var(--accent, #4ade80); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; min-height: 240px; overflow: hidden; }
.app-card:hover { transform: translateY(-3px); box-shadow: 0 22px 48px rgba(0,0,0,0.28); border-color: var(--accent); }
.app-card__img { margin: -28px -28px 4px; aspect-ratio: 16 / 9; position: relative; overflow: hidden; }
.app-card__img .imgph { border-radius: 0; }
.app-card__img > img:not(.app-card__ribbon) { width: 100%; height: 100%; object-fit: cover; display: block; }
.app-card__img::after {
  content: "";
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 3;
  max-width: calc(100% - 24px);
  padding: 8px 13px 7px;
  background: rgba(0,0,0,0.82);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 10px 22px rgba(0,0,0,0.28);
}
.app-card__ribbon { position: absolute; bottom: 10px; right: 10px; height: 28px; width: auto; z-index: 2; display: block; pointer-events: none; opacity: 0.5; }
.app-card:nth-child(8) .app-card__ribbon { height: 88px; opacity: 1; }
.app-card__num { position: absolute; top: 14px; right: 16px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: #1a1612; background: rgba(255,255,255,0.92); padding: 4px 8px; border-radius: 100px; z-index: 2; }
.app-card h3 { font-family: var(--font-display); font-size: 22px; line-height: 1.18; margin: 0; letter-spacing: -0.01em; color: #fff; }
.app-card p { color: #d8cfbc; font-size: 15px; line-height: 1.55; margin: 0; }
.app-card__tag { margin-top: auto; align-self: flex-start; font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent, #4ade80); padding: 5px 10px; border: 1px solid currentColor; border-radius: 100px; }
/* span overrides — featured Ditching full-width on top, 6 surface modes in paired rows, DIG full-width on bottom */
.app-card:nth-child(1) { grid-column: span 12; }      /* Ditching — featured */
.app-card:nth-child(1) .app-card__img { aspect-ratio: 3 / 1; }
.app-card:nth-child(1) .app-card__img::after { content: "Surface Drainage"; }
.app-card:nth-child(2) { grid-column: span 6; }       /* Terracing */
.app-card:nth-child(2) .app-card__img::after { content: "Terracing"; }
.app-card:nth-child(3) { grid-column: span 6; }       /* Land Forming */
.app-card:nth-child(3) .app-card__img::after { content: "Land Forming"; }
.app-card:nth-child(4) { grid-column: span 6; }       /* Simple Grading */
.app-card:nth-child(4) .app-card__img::after { content: "Simple Grading"; }
.app-card:nth-child(5) { grid-column: span 6; }       /* Tiling */
.app-card:nth-child(5) .app-card__img::after { content: "Tiling"; }
.app-card:nth-child(6) { grid-column: span 6; }       /* Leveling */
.app-card:nth-child(6) .app-card__img::after { content: "Leveling"; }
.app-card:nth-child(7) { grid-column: span 6; }       /* Levee */
.app-card:nth-child(7) .app-card__img::after { content: "Levee"; }
.app-card:nth-child(8) { grid-column: span 12; }      /* Excavator — DIG, separate product, full width */
.app-card:nth-child(8) .app-card__img { aspect-ratio: 3 / 1; }
.app-card:nth-child(8) .app-card__img::after { content: "Excavator"; }
@media (max-width: 1000px) {
  .apps-grid > * { grid-column: span 6 !important; }
  .app-card:nth-child(1) .app-card__img,
  .app-card:nth-child(8) .app-card__img { aspect-ratio: 16 / 9; }
}
@media (max-width: 640px)  { .apps-grid > * { grid-column: span 12 !important; } }

/* Pain points (dark slab) */
.pains-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
@media (max-width: 1000px) { .pains-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .pains-grid { grid-template-columns: 1fr; } }
.pain {
  background: #221d18;
  border: 1px solid #3a3025;
  border-left: 4px solid #288c27;
  border-radius: 10px;
  padding: 30px 24px 26px;
  display: flex; flex-direction: column; gap: 10px;
  min-height: 240px;
  position: relative;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.pain:hover {
  transform: translateY(-3px);
  border-color: #3a8a37;
  border-left-color: #3a8a37;
  box-shadow: 0 22px 44px rgba(0,0,0,0.32);
}
.pain::before {
  content: "VS";
  position: absolute;
  top: 14px; right: 16px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .16em;
  color: rgba(255,255,255,0.18);
  font-weight: 700;
}
.pain__num {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #288c27;
  margin: 0 0 6px;
}
.pain h4 {
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 1.2;
  color: #fff;
  margin: 0;
  letter-spacing: -0.015em;
  font-weight: 800;
}
.pain p {
  color: #d8cfbc;
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  margin-top: auto;
}

/* Solves (numbered list mapping to pains) */
.solves { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--line); }
@media (max-width: 800px) { .solves { grid-template-columns: 1fr; } }
.solves li { display: grid; grid-template-columns: 80px 1fr; gap: 18px; padding: 26px 24px; border-bottom: 1px solid var(--line); align-items: start; }
.solves li:nth-child(odd) { border-right: 1px solid var(--line); }
@media (max-width: 800px) { .solves li:nth-child(odd) { border-right: 0; } }
.solves__pin { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; color: #6b6256; padding: 6px 8px; background: #fff; border: 1px solid var(--line); border-radius: 4px; text-align: center; align-self: start; }
.solves h4 { font-family: var(--font-display); font-size: 19px; line-height: 1.3; margin: 0 0 8px; color: var(--ink); letter-spacing: -0.01em; }
.solves p { font-size: 15px; line-height: 1.55; color: #3a3328; margin: 0; }

/* Hardware split */
.hw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 800px) { .hw-grid { grid-template-columns: 1fr; } }
.hw-card { background: #1a1612; color: #f3ece0; border-radius: 16px; padding: 36px; text-decoration: none; display: flex; flex-direction: column; gap: 14px; border-top: 4px solid var(--accent); transition: transform .2s ease, box-shadow .2s ease; position: relative; overflow: hidden; }
.hw-card:hover { box-shadow: 0 30px 60px rgba(0,0,0,0.30), inset 0 0 0 1px color-mix(in oklab, var(--accent) 60%, transparent); }
.hw-card__img {
  position: absolute; top: 24px; right: 24px;
  width: 180px; height: 180px;
  object-fit: contain;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 10px;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.45));
}
@media (max-width: 600px) { .hw-card__img { width: 130px; height: 130px; top: 18px; right: 18px; } }
.hw-card:hover { transform: translateY(-3px); }
.hw-card__head {
  padding-right: 210px;
  min-height: 200px;
  display: flex; flex-direction: column; gap: 6px;
}
.hw-card h3 { font-family: var(--font-display); font-size: clamp(28px, 3vw, 36px); margin: 4px 0 0; color: #fff; letter-spacing: -0.015em; }
.hw-card > p { color: #d8cfbc; line-height: 1.55; font-size: 16px; margin: 0; }
@media (max-width: 600px) {
  .hw-card__head { padding-right: 150px; min-height: 150px; }
}
.hw-card__bul { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 6px; }
.hw-card__bul li { font-size: 14px; color: #c9bda7; padding-left: 18px; position: relative; line-height: 1.5; }
.hw-card__bul li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 700; }
.hw-card__cta { margin-top: auto; font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); align-self: flex-start; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.08); width: 100%; }
.hw-foot { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-top: 32px; padding: 22px 28px; background: #f3ecdf; border-radius: 12px; flex-wrap: wrap; }
.hw-foot span { color: #3a3328; font-size: 15px; max-width: 60ch; }

/* Proof row */
.proof-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; margin-top: 24px; }
@media (max-width: 700px) { .proof-row { grid-template-columns: repeat(2, 1fr); } }
.proof-row > div { display: flex; flex-direction: column; gap: 6px; padding: 28px 24px; background: #221d18; border-radius: 12px; border: 1px solid #3a3025; }
.proof-row strong { font-family: var(--font-display); font-size: clamp(40px, 4vw, 56px); font-weight: 800; color: #fff; line-height: 1; letter-spacing: -0.02em; }
.proof-row span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #c9bda7; }


/* ============ Homepage v3 — workflows-prominent, app-deep ============ */

/* Workflows scanner strip — sits directly under the hero on home.
   Visually echoes the tab strip from /modes/*.html so users see consistency. */
.workflows-strip {
  position: relative;
  background: #1a1612;
  border-top: 4px solid #288c27;       /* brand green — visually breaks from the dark hero above */
  border-bottom: 1px solid #3a3025;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  z-index: 5;
}
.workflows-strip__inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: 20px var(--pad);
  display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: center;
}
.workflows-strip__head {
  display: flex; flex-direction: column; gap: 4px;
}
.workflows-strip__head .eyebrow { color: #d9c89e; }
.workflows-strip__head strong {
  font-family: var(--font-display); color: #fff; font-size: 18px; font-weight: 800; letter-spacing: -0.01em;
}
.workflows-strip__rail {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
@media (max-width: 900px) {
  .workflows-strip__rail { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 520px) {
  .workflows-strip__rail { grid-template-columns: repeat(2, 1fr); }
}
.workflows-strip__item {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  color: #f3ece0;
  text-decoration: none;
  font-size: 14px; font-weight: 700;
  white-space: nowrap;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  transition: color .15s ease, background .15s ease, border-color .15s ease, transform .15s ease;
}
.workflows-strip__item:hover {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
  transform: translateY(-1px);
}
.workflows-strip__item:hover .workflows-strip__num { color: rgba(255,255,255,0.85); opacity: 1; }
.workflows-strip__item:hover .workflows-strip__dot { background: #fff; }
.workflows-strip__num {
  font-family: var(--font-mono); font-size: 11px; opacity: .7; letter-spacing: .08em; color: #d9c89e;
}
.workflows-strip__dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.08);
}
@media (max-width: 900px) {
  .workflows-strip__inner { grid-template-columns: 1fr; gap: 8px; padding-top: 18px; }
  .workflows-strip__head { padding-right: 0; }
}


/* How it works — 4-step operator day */
.flow {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}
@media (max-width: 900px) { .flow { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .flow { grid-template-columns: 1fr; } }
.flow__step {
  position: relative;
  padding: 32px 28px;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 12px;
}
.flow__step:last-child { border-right: 0; }
@media (max-width: 900px) {
  .flow { grid-template-columns: 1fr; }
  .flow__step { border-right: 0; border-bottom: 1px solid var(--line); }
  .flow__step:last-child { border-bottom: 0; }
}
.flow__num {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: .14em; color: var(--brand-green-dark);
}
.flow__icon {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  background: #f3ecdf;
  overflow: hidden;
  display: grid; place-items: center;
  color: var(--brand-green-dark);
}
.flow__icon svg { width: 28px; height: 28px; }
.flow__icon img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Tablet frame for showcased screenshots */
.feature-hero__img--bare { background: none; border-radius: 0; overflow: visible; }
.tablet-frame {
  background: #1a1d20;
  padding: 14px;
  border-radius: 22px;
  box-shadow:
    0 0 0 1px #2a2f34 inset,
    0 22px 50px rgba(0,0,0,0.22),
    0 4px 12px rgba(0,0,0,0.10);
  position: relative;
}
.tablet-frame::before {
  content: "";
  position: absolute; top: 6px; left: 50%;
  width: 5px; height: 5px; border-radius: 50%;
  background: #4a5158;
  transform: translateX(-50%);
}
.tablet-frame img {
  width: 100%; height: auto;
  display: block;
  border-radius: 10px;
  background: #000;
}

/* Phone frame for portrait video / screenshots */
.phone-frame {
  background: #0c0a08;
  border-radius: 36px;
  padding: 16px 12px;
  box-shadow:
    0 0 0 1px #2a2f34 inset,
    0 28px 60px rgba(0,0,0,0.32),
    0 6px 14px rgba(0,0,0,0.12);
  position: relative;
  max-width: 300px;
  margin: 0 auto;
}
.phone-frame::before {
  content: "";
  position: absolute; top: 22px; left: 50%;
  width: 84px; height: 20px;
  background: #1a1612; border-radius: 14px;
  transform: translateX(-50%);
  z-index: 3;
  pointer-events: none;
}
.phone-frame__screen {
  background: #0e1f14;
  border-radius: 22px;
  overflow: hidden;
  aspect-ratio: 9/16;
  position: relative;
}
.phone-frame__screen video,
.phone-frame__screen img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Lightbox: CSS-only "view larger" on screenshots */
.lightbox-trigger {
  display: block; position: relative;
  width: 100%; height: 100%;
  cursor: zoom-in;
  border-radius: 10px; overflow: hidden;
}
.lightbox-trigger::after {
  content: "⊕  View larger";
  position: absolute; bottom: 10px; right: 10px;
  background: rgba(0,0,0,0.72); color: #fff;
  padding: 6px 10px; border-radius: 6px;
  font: 700 11px var(--font-mono); letter-spacing: 0.06em;
  opacity: 0; transform: translateY(4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
}
.lightbox-trigger:hover::after, .lightbox-trigger:focus::after { opacity: 1; transform: translateY(0); }
.lightbox {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.93);
  z-index: 1000;
  cursor: zoom-out;
  align-items: center; justify-content: center;
  padding: clamp(20px, 4vw, 60px);
  text-decoration: none;
}
.lightbox:target { display: flex; }
.lightbox img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 12px 60px rgba(0,0,0,0.6);
}
.lightbox::after {
  content: "×";
  position: absolute; top: 16px; right: 26px;
  color: #fff;
  font-size: 40px; line-height: 1; font-weight: 300;
}

.flow__icon--alt { position: relative; }
.flow__icon--alt .alt-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  border-radius: 10px;
}
.flow__icon--alt .alt-img--a { animation: alt-fade-a 6s ease-in-out infinite; }
.flow__icon--alt .alt-img--b { animation: alt-fade-b 6s ease-in-out infinite; }
@keyframes alt-fade-a {
  0%, 45% { opacity: 1; }
  55%, 95% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes alt-fade-b {
  0%, 45% { opacity: 0; }
  55%, 95% { opacity: 1; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .flow__icon--alt .alt-img { animation: none; }
  .flow__icon--alt .alt-img--b { opacity: 0; }
}
.flow h4 { font-size: 20px; font-weight: 800; margin: 0; }
.flow p { font-size: 14.5px; color: var(--ink-2); line-height: 1.5; margin: 0; }
.flow__step::after {
  content: ""; position: absolute; right: -10px; top: 50%;
  width: 20px; height: 20px;
  background: #fff;
  border-top: 1px solid var(--line);
  border-right: 1px solid var(--line);
  transform: translateY(-50%) rotate(45deg);
  z-index: 2;
}
.flow__step:last-child::after { display: none; }
@media (max-width: 900px) {
  .flow__step::after { display: none; }
}


/* App showcase — tablet mockup + 5 differentiators */
.appshow {
  display: grid; grid-template-columns: 1.15fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
@media (max-width: 980px) { .appshow { grid-template-columns: 1fr; } }
.appshow__tablet {
  position: relative;
  background: #0c0a08;
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 50px 100px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.06) inset;
  aspect-ratio: 16/10;
  overflow: hidden;
}
.appshow__tablet::after {
  content: ""; position: absolute; top: 50%; right: 8px; width: 4px; height: 44px;
  background: #1a1612; border-radius: 2px; transform: translateY(-50%);
}
.appshow__screen {
  position: relative; inset: 0;
  height: 100%; width: 100%;
  background: linear-gradient(180deg, #142a18 0%, #0e1f14 100%);
  border-radius: 8px; overflow: hidden;
  display: flex; flex-direction: column;
}
.appshow__screen { position: relative; }
.appshow__frame {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  opacity: 0;
  animation-duration: 16s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.appshow__frame--1 { animation-name: appshow-f1; transform-origin: 22% 28%; }
.appshow__frame--2 { animation-name: appshow-f2; transform-origin: 50% 50%; }
.appshow__frame--3 { animation-name: appshow-f3; transform-origin: 50% 50%; }
.appshow__frame--4 { animation-name: appshow-f4; transform-origin: 50% 50%; }
.appshow__frame--5 { animation-name: appshow-f5; transform-origin: 50% 50%; }
.appshow__frame--6 { animation-name: appshow-f6; transform-origin: 50% 50%; }

/* Cycle: 16s total. F1 0-4s (zoom-in), F2 4-6s, F3 6-8s, F4 8-10s, F5 10-12s, F6 12-16s. */
@keyframes appshow-f1 {
  0%   { opacity: 0; transform: scale(1); }
  3%   { opacity: 1; transform: scale(1); }
  22%  { opacity: 1; transform: scale(2.4); }
  28%  { opacity: 0; transform: scale(2.4); }
  100% { opacity: 0; transform: scale(2.4); }
}
@keyframes appshow-f2 {
  0%   { opacity: 0; transform: scale(1); }
  22%  { opacity: 0; transform: scale(1); }
  28%  { opacity: 1; transform: scale(1); }
  35%  { opacity: 1; transform: scale(1.06); }
  40%  { opacity: 0; transform: scale(1.06); }
  100% { opacity: 0; }
}
@keyframes appshow-f3 {
  0%   { opacity: 0; transform: scale(1); }
  35%  { opacity: 0; transform: scale(1); }
  40%  { opacity: 1; transform: scale(1); }
  47%  { opacity: 1; transform: scale(1.06); }
  53%  { opacity: 0; transform: scale(1.06); }
  100% { opacity: 0; }
}
@keyframes appshow-f4 {
  0%   { opacity: 0; }
  47%  { opacity: 0; }
  53%  { opacity: 1; }
  66%  { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes appshow-f5 {
  0%   { opacity: 0; }
  62%  { opacity: 0; }
  66%  { opacity: 1; }
  78%  { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes appshow-f6 {
  0%   { opacity: 0; }
  72%  { opacity: 0; }
  78%  { opacity: 1; }
  97%  { opacity: 1; }
  100% { opacity: 0; }
}
.appshow__left { display: flex; flex-direction: column; gap: 14px; }
.appshow__thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.appshow__thumb {
  position: relative;
  background: #0c0a08;
  border-radius: 10px;
  padding: 6px;
  aspect-ratio: 16/10;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(0,0,0,0.22);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.appshow__thumb:hover { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(0,0,0,0.28); }
.appshow__thumb.is-active { outline: 2px solid var(--brand-green); outline-offset: 2px; }
.appshow__overlay {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  z-index: 10;
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
  cursor: pointer;
}
.appshow__overlay.is-active { opacity: 1; pointer-events: auto; }
.appshow__thumb img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 5px;
  display: block;
}
@media (max-width: 600px) {
  .appshow__thumbs { grid-template-columns: 1fr; max-width: 70%; margin: 0 auto; }
}
.appshow__topbar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-family: var(--font-mono); font-size: 10px; color: #c9bda7;
}
.appshow__map {
  flex: 1; position: relative;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px),
    radial-gradient(ellipse at 30% 60%, rgba(40,140,39,0.32), transparent 65%),
    radial-gradient(ellipse at 75% 35%, rgba(34,211,238,0.18), transparent 60%);
  background-size: 24px 24px, 24px 24px, auto, auto;
}
.appshow__route {
  position: absolute; left: 8%; top: 30%; right: 30%;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--brand-green) 18%, var(--brand-green) 82%, transparent 100%);
  transform: rotate(-6deg);
  box-shadow: 0 0 14px var(--brand-green);
}
.appshow__route::before, .appshow__route::after {
  content: ""; position: absolute; width: 12px; height: 12px;
  border-radius: 50%; background: #fff;
  top: 50%; transform: translateY(-50%);
  box-shadow: 0 0 0 3px rgba(40,140,39,0.5);
}
.appshow__route::before { left: -6px; }
.appshow__route::after { right: -6px; }
.appshow__sidebar {
  position: absolute; right: 12px; top: 12px; bottom: 12px;
  width: 36%; max-width: 220px;
  background: rgba(20,40,26,0.85);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
  font-family: var(--font-mono); font-size: 10px; color: #c9bda7;
  backdrop-filter: blur(6px);
}
.appshow__pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px; border-radius: 999px;
  background: rgba(40,140,39,0.22);
  color: #bef0cb;
  font-weight: 700; letter-spacing: .04em;
  align-self: flex-start;
}
.appshow__pill::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-green);
  box-shadow: 0 0 6px var(--brand-green);
}
.appshow__stat {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 4px 0; border-bottom: 1px dashed rgba(255,255,255,0.06);
}
.appshow__stat strong {
  color: #fff; font-family: var(--font-display); font-size: 14px; font-weight: 800;
  letter-spacing: -0.01em;
}
.appshow__stat strong.is-good { color: #bef0cb; }
.appshow__stat strong.is-warn { color: #fbbf24; }
.appshow__chart {
  position: absolute; left: 12px; right: 40%; bottom: 12px;
  height: 36%;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  padding: 6px;
  overflow: hidden;
}
.appshow__chart-label {
  position: absolute; top: 6px; left: 8px;
  font-family: var(--font-mono); font-size: 9px; color: #c9bda7;
  letter-spacing: .06em; text-transform: uppercase;
}
.appshow__features {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 18px;
}
.appshow__feat {
  display: grid; grid-template-columns: 36px 1fr; gap: 18px;
  padding-left: 4px;
}
.appshow__feat-num {
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  color: var(--brand-green-dark); padding-top: 4px; letter-spacing: .04em;
}
.appshow__feat strong {
  display: block; font-size: 17px; font-weight: 800; color: var(--ink); margin-bottom: 4px;
}
.appshow__feat p {
  margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.55;
}


/* Operator quote block */
.quote {
  display: grid; grid-template-columns: 1fr 280px;
  gap: 48px;
  background: #1a1612; color: #f3ece0;
  border-radius: 16px;
  padding: clamp(36px, 5vw, 56px);
  align-items: center;
  position: relative;
  overflow: hidden;
}
.quote::before {
  content: "\201C";  /* opening curly quote */
  position: absolute; top: -40px; left: 18px;
  font-family: Georgia, serif;
  font-size: 220px; line-height: 1; color: rgba(255,255,255,0.05);
  pointer-events: none;
}
@media (max-width: 800px) { .quote { grid-template-columns: 1fr; gap: 28px; } }
.quote blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 700;
  line-height: 1.32;
  color: #fff;
  letter-spacing: -0.015em;
}
.quote cite {
  display: block;
  font-style: normal;
  margin-top: 22px;
  font-size: 14px;
  color: #c9bda7;
}
.quote cite strong { color: #fff; font-weight: 700; }
.quote__aside {
  border-left: 1px solid rgba(255,255,255,0.1);
  padding-left: 32px;
  display: flex; flex-direction: column; gap: 16px;
}
@media (max-width: 800px) { .quote__aside { border-left: 0; padding-left: 0; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 24px; } }
.quote__stat strong {
  font-family: var(--font-display); font-size: 36px; font-weight: 800;
  color: #fff; line-height: 1; display: block; margin-bottom: 4px;
}
.quote__stat span {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: #c9bda7;
}


/* App-card visual upgrade — bigger headlines, more breathing room */
.app-card h3 { font-weight: 800; font-size: clamp(20px, 1.8vw, 24px); }
.app-card__why {
  display: block;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em;
  color: var(--accent, var(--ink-3)); text-transform: uppercase;
  font-weight: 700; margin-bottom: 4px;
}
.app-card__bul {
  list-style: none; padding: 0; margin: 4px 0 0;
  display: flex; flex-direction: column; gap: 4px;
  font-size: 13.5px; color: #c9bda7;
}
.app-card__bul li::before {
  content: "·"; color: var(--accent, #d8cfbc);
  font-weight: 700; margin-right: 6px;
}
.app-card__note {
  font-size: 13px; line-height: 1.5; color: #c9bda7;
  border-left: 2px solid var(--accent, #d8cfbc);
  padding: 4px 0 4px 10px; margin: 0;
}
.app-card__note strong { color: #fff; font-weight: 700; }

/* Equipment application modules — expandable per-machine deep-dive sections.
   Reusable across mode pages: <details class="application">...</details> */
.applications { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.application {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow .2s ease;
}
.application[open] { box-shadow: 0 14px 28px rgba(20,16,12,0.06); }
.application summary {
  display: flex; flex-direction: column; gap: 6px;
  padding: 22px 56px 22px 24px;
  cursor: pointer;
  list-style: none;
  position: relative;
}
.application summary::-webkit-details-marker { display: none; }
.application summary::after {
  content: "+";
  position: absolute; top: 50%; right: 24px;
  transform: translateY(-50%);
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--line);
  color: var(--ink-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1; font-weight: 400;
  transition: background .15s ease, color .15s ease;
}
.application[open] summary::after { content: "−"; background: var(--ink); color: #fff; }
.application summary:hover::after { background: var(--ink-3); color: #fff; }
.application__chip {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--brand-green); font-weight: 700;
}
.application h3 {
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 700;
  margin: 0;
  color: var(--ink);
  line-height: 1.25;
}
.application__body {
  padding: 0 24px 26px;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.65;
  border-top: 1px solid var(--line);
  padding-top: 22px;
}
.application__body p { margin: 0 0 14px; }
.application__body p:last-child { margin-bottom: 0; }
.application__body strong { color: var(--ink); font-weight: 700; }
.application__img {
  width: 100%;
  aspect-ratio: 21/9;
  background: #f3ecdf;
  border-radius: 10px;
  margin: 0 0 18px;
  overflow: hidden;
}
.application__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.app-card__tech {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin: 0;
}
.app-card__tech-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700;
  padding: 4px 10px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 100px;
  color: #d8cfbc;
  background: rgba(255,255,255,0.04);
}
.app-card__tech-chip::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #d8cfbc;
  flex-shrink: 0;
}
.app-card__tech-chip--iq::before    { background: var(--brand-green); }
.app-card__tech-chip--nudge::before { background: var(--brand-orange); }


/* Section eyebrow chip — more prominent than .eyebrow */
.section-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--brand-green) 12%, white);
  color: var(--brand-green-dark);
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
}
.section-chip::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand-green);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand-green) 24%, transparent);
}

/* Getting-started setup video, reused on mode pages with mode-specific copy. */
.mode-start {
  background: #221d18;
  color: #f3ece0;
  padding-top: clamp(46px, 6vw, 72px);
  padding-bottom: clamp(46px, 6vw, 72px);
  border-top: 4px solid var(--accent, var(--brand-green));
  border-bottom: 1px solid #3a3025;
}
.mode-start .section-chip {
  background: rgba(255,255,255,0.08);
  color: #dcfce7;
}
.mode-start .section-chip::before { background: var(--accent, var(--brand-green)); }
.mode-start__grid {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(320px, 1.05fr);
  gap: clamp(28px, 5vw, 58px);
  align-items: center;
}
.mode-start h2 {
  color: #fff;
  margin-top: 14px;
}
.mode-start .lead {
  color: #d8cfbc;
  margin-top: 16px;
}
.mode-start__list {
  display: grid;
  gap: 10px;
  margin-top: 22px;
  padding: 0;
  list-style: none;
}
.mode-start__list li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  color: #d8cfbc;
  font-size: 14.5px;
  line-height: 1.45;
}
.mode-start__list li::before {
  content: "";
  width: 10px;
  height: 10px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--accent, var(--brand-green));
  box-shadow: 0 0 0 5px color-mix(in oklab, var(--accent, var(--brand-green)) 22%, transparent);
  justify-self: center;
}
.mode-start__media-label {
  display: inline-flex;
  margin: 0 0 10px 2px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #102016;
  background: #dcfce7;
  border-radius: 999px;
  padding: 7px 10px;
  box-shadow: 0 8px 20px rgba(0,0,0,.22);
}
.mode-start__video {
  background: #0c0a08;
  border: 2px solid rgba(255,255,255,0.88);
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 28px 70px rgba(0,0,0,0.34), 0 0 0 5px rgba(255,255,255,0.08);
}
.mode-start__video video,
.mode-start__video iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  border: 0;
  border-radius: 8px;
  background: #000;
}
@media (max-width: 900px) {
  .mode-start__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .mode-start__video {
    margin-inline: -8px;
    border-radius: 10px;
    padding: 8px;
  }
}

/* Automation / guidance choice section. */
.run-options {
  background: #fffaf2;
  color: var(--ink);
  padding-top: clamp(58px, 7vw, 88px);
  padding-bottom: clamp(58px, 7vw, 88px);
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
}
.run-options--dark {
  background: #1a1612;
  color: #f3ece0;
  border-color: #3a3025;
}
.run-options--dark h2,
.run-options--dark .run-options__card h3 { color: #fff; }
.run-options--dark .lead,
.run-options--dark .run-options__card p,
.run-options--dark .run-options__note { color: #d8cfbc; }
.run-options__grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(380px, 1.1fr);
  gap: clamp(30px, 5vw, 64px);
  align-items: start;
}
.run-options--stacked-media .run-options__grid {
  grid-template-columns: minmax(300px, .78fr) minmax(460px, 1.22fr);
}
.run-options--stacked-media .run-options__cards { grid-template-columns: 1fr; }
.run-options__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 24px;
}
.run-options__card {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--accent, var(--brand-green));
  border-radius: 10px;
  padding: 20px;
}
.run-options--dark .run-options__card {
  background: rgba(255,255,255,0.06);
  border-color: rgba(216,207,188,0.18);
}
.run-options__card h3 {
  font-size: 21px;
  margin: 0;
}
.run-options__card p {
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.55;
  margin-top: 8px;
}
.run-options__note {
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.55;
  margin-top: 18px;
  border-left: 3px solid var(--accent, var(--brand-green));
  padding-left: 14px;
}
.run-options__visual {
  background: #0c0a08;
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 28px 70px rgba(20,16,12,0.24);
}
.run-options--dark .run-options__visual {
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 28px 70px rgba(0,0,0,0.34);
}
.run-options__visual--stacked {
  background: transparent;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
.run-options--dark .run-options__visual--stacked {
  border: 0;
  box-shadow: none;
}
.run-options__visual img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  display: block;
  border-radius: 9px;
  background: #000;
}
.run-options__visual--stacked img {
  background: #0c0a08;
  border: 1px solid rgba(20,16,12,0.14);
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 22px 56px rgba(20,16,12,0.20);
  box-sizing: border-box;
}
.run-options__media-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 46px);
}
.run-options__guide {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
  margin-top: 20px;
}
.run-options__guide span {
  display: grid;
  grid-template-columns: 12px 1fr;
  gap: 10px;
  align-items: start;
  color: var(--ink-2);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.45;
}
.run-options__guide span::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: .55em;
  border-radius: 50%;
  background: var(--accent, var(--brand-green));
}
.run-options--dark .run-options__guide span {
  color: #d8cfbc;
}
@media (max-width: 980px) {
  .run-options--stacked-media .run-options__grid,
  .run-options__grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .run-options__cards,
  .run-options__guide { grid-template-columns: 1fr; }
}

/* Excavator / DIG page refinements built on shared mode-page components. */
.dig-grade-section {
  background: #0c0a08;
  color: #f3ece0;
}
.dig-grade-section .eyebrow {
  color: #f9d785;
}
.dig-grade-section h2,
.dig-grade-section .feat-list strong {
  color: #fff;
}
.dig-grade-section .lead,
.dig-grade-section .feat-list p {
  color: #d8cfbc;
}
.dig-grade-section .feat-list li {
  border-top-color: rgba(243,236,224,.16);
}
.dig-grade-section .feat-list li:last-child {
  border-bottom-color: rgba(243,236,224,.16);
}
.dig-grade-section .feat-list__num {
  color: #f9d785;
}
.dig-logo-mark {
  width: clamp(64px, 7vw, 92px);
  height: auto;
  margin: 18px 0 12px;
}
.dig-grade-media {
  display: grid;
  gap: clamp(14px, 2vw, 20px);
  padding: clamp(14px, 2.4vw, 24px);
  border: 1px solid rgba(249,169,2,.28);
  border-radius: 14px;
  background:
    radial-gradient(circle at 52% 22%, rgba(249,169,2,.18), transparent 42%),
    radial-gradient(circle at 18% 86%, rgba(40,140,39,.18), transparent 36%),
    linear-gradient(145deg, #19140e 0%, #080706 72%);
  box-shadow: 0 24px 62px rgba(0,0,0,.24);
}
.dig-grade-media figure {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(243,236,224,.14);
  border-radius: 10px;
  background: rgba(0,0,0,.38);
}
.dig-grade-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.dig-grade-media__screen {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: auto;
  overflow: visible;
  background: rgba(0,0,0,.3);
}
.dig-tablet-frame {
  width: 100%;
  padding: 4px;
  border-radius: 12px;
  background: #e3ded5;
  box-shadow: 0 18px 38px rgba(0,0,0,.32);
}
.dig-tablet-frame img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  background: #0c0a08;
}
.dig-grade-media__schematic {
  width: min(100%, 420px);
  aspect-ratio: 1 / 1;
  justify-self: center;
  padding: clamp(12px, 2vw, 20px);
}
.dig-grade-media__schematic img {
  filter: drop-shadow(0 22px 38px rgba(0,0,0,.36));
}
.dig-mode-select {
  position: relative;
  margin: 0 0 clamp(24px, 4vw, 38px);
  padding: clamp(10px, 1.8vw, 16px);
  border: 1px solid rgba(249,169,2,.28);
  border-radius: 14px;
  background:
    radial-gradient(circle at 58% 50%, rgba(249,169,2,.18), transparent 34%),
    linear-gradient(145deg, #1a1612, #090806);
  box-shadow: 0 22px 54px rgba(26,22,18,.16);
}
.dig-mode-select__zoom {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 8px solid #f3ece0;
  border-radius: 18px;
  background:
    url("https://ditch-assist.b-cdn.net/website%20graphics/02-home.png") 62% 46% / 215% auto no-repeat,
    #0c0a08;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.18), 0 18px 38px rgba(0,0,0,.24);
  will-change: background-position, background-size;
}
@keyframes digModeSelectZoom {
  0%, 12% {
    background-position: 50% 50%;
    background-size: 100% auto;
  }
  42%, 78% {
    background-position: 62% 46%;
    background-size: 215% auto;
  }
  100% {
    background-position: 50% 50%;
    background-size: 100% auto;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .dig-mode-select__zoom {
    animation: digModeSelectZoom 8s ease-in-out infinite;
  }
}
.dig-card-list,
.dig-checks {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}
.dig-card-list span,
.dig-checks span {
  position: relative;
  display: block;
  padding: 12px 14px 12px 32px;
  border-radius: 8px;
  background: #f8f3e8;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
}
.dig-card-list span::before,
.dig-checks span::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 18px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent, #f9a902);
}
.dig-workflow-cards > .card {
  height: 100%;
}
.dig-workflow-cards > .card > p {
  min-height: 4.65em;
}
.dig-workflow-cards .dig-card-list {
  margin-top: auto;
}
@media (max-width: 980px) {
  .dig-workflow-cards > .card > p {
    min-height: 0;
  }
}
.dig-kit-cards > .card {
  height: 100%;
}
.dig-kit-card__img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  display: block;
  border-radius: 10px;
  background: #f8f3e8;
  margin-bottom: 6px;
}
.dig-dark-cards .card h3 {
  color: #fff;
}
.dig-dark-cards .card p {
  color: #d8cfbc;
}
.dig-dark-cards .card .eyebrow {
  color: #f9d785;
}
.dig-video-feature {
  display: grid;
  grid-template-columns: minmax(260px, .72fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 46px);
  align-items: center;
  margin-top: 28px;
}
.dig-square-video {
  overflow: hidden;
  border-radius: 14px;
  background: #000;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 24px 64px rgba(0,0,0,.32);
}
.dig-square-video video {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #000;
}
.dig-video-copy h3 {
  margin-top: 14px;
  color: #fff;
  font-size: clamp(28px, 3.4vw, 44px);
}
.dig-video-copy p {
  margin-top: 14px;
  color: #d8cfbc;
  font-size: 17px;
  line-height: 1.55;
}
.dig-detail-grid span {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--accent) 50%, #fff);
}
.dig-options-feature {
  display: grid;
  grid-template-columns: minmax(360px, .58fr) minmax(0, .42fr);
  gap: 24px;
  align-items: center;
  margin: 28px 0 24px;
  padding: 22px;
  border-radius: 10px;
  background: #1a1612;
  color: #f3ece0;
}
.dig-options-feature__img {
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  background: #050505;
}
.dig-options-feature__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.dig-options-feature__copy h3 {
  margin-top: 12px;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.12;
}
.dig-options-feature__copy p {
  margin-top: 14px;
  color: #d8cfbc;
  font-size: 16.5px;
  line-height: 1.55;
}
.dig-option-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.dig-option-tags span {
  padding: 8px 10px;
  border: 1px solid #4a3a25;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: #f7e7bd;
  font-size: 12.5px;
  font-weight: 800;
}
.dig-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}
.dig-detail-grid div {
  padding: 16px;
  border-radius: 8px;
  background: #f8f3e8;
}
.dig-detail-grid span {
  color: #8a5b00;
}
.dig-detail-grid strong {
  display: block;
  margin-top: 6px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.35;
}
.dig-compare {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}
.dig-compare__row {
  display: grid;
  grid-template-columns: .88fr 1fr 1fr;
}
.dig-compare__row + .dig-compare__row {
  border-top: 1px solid var(--line);
}
.dig-compare__row span {
  padding: 16px 18px;
  border-right: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.45;
}
.dig-compare__row span:last-child {
  border-right: 0;
  background: #fff8e3;
  color: #2a221c;
  font-weight: 700;
}
.dig-compare__row span:first-child {
  color: var(--ink);
  font-weight: 800;
}
.dig-compare__head {
  background: #1a1612;
}
.dig-compare__head span,
.dig-compare__head span:last-child {
  color: #f3ece0;
  background: transparent;
  border-right-color: #3a3025;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.dig-checks {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.machine-fit-chips {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.machine-fit-chips .chip {
  justify-content: center;
  text-align: center;
  min-width: 0;
}
.machine-fit-contact {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  margin-top: 24px;
  padding: 20px;
  border: 1px solid #e3d6bd;
  border-radius: 10px;
  background: #fbf8ef;
}
.machine-fit-contact strong {
  display: block;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.15;
}
.machine-fit-contact p {
  margin-top: 8px;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.5;
}
.machine-fit-contact__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  min-width: 260px;
}
@media (max-width: 980px) {
  .dig-video-feature,
  .dig-options-feature,
  .dig-detail-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 760px) {
  .dig-checks {
    grid-template-columns: 1fr;
  }
  .dig-compare,
  .dig-compare__row {
    display: block;
  }
  .machine-fit-contact {
    display: grid;
  }
  .machine-fit-chips {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .machine-fit-contact__actions {
    justify-content: flex-start;
    min-width: 0;
  }
  .dig-compare__head {
    display: none;
  }
  .dig-compare__row {
    padding: 16px;
  }
  .dig-compare__row span {
    display: block;
    padding: 0;
    border-right: 0;
  }
  .dig-compare__row span:first-child {
    margin-bottom: 12px;
  }
  .dig-compare__row span:nth-child(2)::before,
  .dig-compare__row span:nth-child(3)::before {
    display: block;
    margin: 10px 0 4px;
    color: #8a5b00;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
  }
  .dig-compare__row span:nth-child(2)::before {
    content: "Full 3D system";
  }
  .dig-compare__row span:nth-child(3)::before {
    content: "Ditch Assist DIG\2122";
  }
  .dig-compare__row span:last-child {
    margin: 12px -16px -16px;
    padding: 14px 16px;
  }
}
@media (max-width: 520px) {
  .machine-fit-chips {
    grid-template-columns: 1fr;
  }
}

/* DIG excavator landing page */
.dig-hero {
  position: relative;
  overflow: hidden;
  color: #f3ece0;
  background: #1a1612;
}
.dig-hero__video,
.dig-hero__shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.dig-hero__video {
  object-fit: cover;
  z-index: 0;
}
.dig-hero__shade {
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(10,8,6,.88) 0%, rgba(10,8,6,.64) 46%, rgba(10,8,6,.26) 100%),
    linear-gradient(180deg, rgba(10,8,6,.16) 0%, rgba(10,8,6,.78) 100%);
}
.dig-hero__inner {
  position: relative;
  z-index: 2;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(88px, 11vw, 138px) var(--pad) clamp(36px, 5vw, 58px);
}
.dig-hero__brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.dig-hero__brand img {
  width: clamp(64px, 7vw, 92px);
  height: auto;
}
.dig-hero__brand span {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .13em;
  text-transform: uppercase;
  font-weight: 800;
  color: #e8d6a8;
}
.dig-hero h1 {
  max-width: 820px;
  margin-top: 18px;
  color: #fff;
  font-size: clamp(40px, 5.8vw, 76px);
  line-height: 1.02;
}
.dig-hero__lead {
  max-width: 760px;
  margin-top: 22px;
  color: #f0dfbd;
  font-size: clamp(17px, 1.45vw, 21px);
  line-height: 1.55;
}
.dig-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}
.dig-hero .btn--ghost {
  color: #f3ece0;
  border-color: rgba(243,236,224,.82);
}
.dig-hero .btn--ghost:hover {
  background: #f3ece0;
  color: #1a1612;
}
.dig-hero__facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  max-width: 940px;
  margin-top: clamp(34px, 5vw, 58px);
  overflow: hidden;
  border: 1px solid rgba(243,236,224,.18);
  border-radius: 8px;
  background: rgba(243,236,224,.18);
}
.dig-hero__facts div {
  min-width: 0;
  padding: 18px;
  background: rgba(16,12,8,.74);
}
.dig-hero__facts strong,
.dig-hero__facts span {
  display: block;
}
.dig-hero__facts strong {
  color: #fff;
  font-size: 14px;
}
.dig-hero__facts span {
  margin-top: 4px;
  color: #d8cfbc;
  font-size: 13px;
  line-height: 1.35;
}
.dig-answer {
  background: #f3ecdf;
  border-bottom: 1px solid var(--line);
}
.dig-answer__grid {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.25fr);
  gap: clamp(22px, 4vw, 54px);
  align-items: stretch;
  padding-top: clamp(34px, 5vw, 64px);
  padding-bottom: clamp(34px, 5vw, 64px);
}
.dig-answer__statement h2 {
  margin-top: 14px;
}
.dig-answer__statement p {
  margin-top: 16px;
  color: var(--ink-2);
  font-size: 18px;
}
.dig-answer__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.dig-answer__cards article,
.dig-job-grid article,
.dig-video-card,
.dig-mode-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.dig-answer__cards article {
  padding: 22px;
}
.dig-answer__cards span {
  display: inline-flex;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: #8a5b00;
  font-weight: 800;
}
.dig-answer__cards strong {
  display: block;
  margin-top: 18px;
  font-size: 20px;
  line-height: 1.18;
}
.dig-answer__cards p {
  margin-top: 9px;
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.5;
}
.dig-3d {
  background: #fff;
}
.dig-3d__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr);
  gap: clamp(22px, 4vw, 52px);
  align-items: stretch;
}
.dig-3d__lead h2 {
  margin-top: 14px;
}
.dig-3d__lead .lead {
  margin-top: 18px;
  color: var(--ink-2);
}
.dig-3d__lead p:not(.lead) {
  margin-top: 16px;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.58;
}
.dig-3d__callout {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 320px;
  padding: clamp(28px, 4vw, 44px);
  overflow: hidden;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(26,22,18,.28), rgba(26,22,18,.9)),
    url("https://ditch-assist.b-cdn.net/website%20graphics/dig-excavator2a.jpg") center / cover;
  color: #f3ece0;
}
.dig-3d__callout::before {
  content: "3D?";
  position: absolute;
  right: 22px;
  top: 18px;
  color: rgba(255,255,255,.14);
  font-family: var(--font-display);
  font-size: clamp(72px, 10vw, 128px);
  font-weight: 800;
  line-height: .8;
}
.dig-3d__callout strong {
  position: relative;
  z-index: 1;
  max-width: 11ch;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(30px, 3.5vw, 46px);
  line-height: 1.02;
  letter-spacing: -.02em;
}
.dig-3d__callout p {
  position: relative;
  z-index: 1;
  margin-top: 16px;
  max-width: 45ch;
  color: #e8d6a8;
  font-size: 15px;
  line-height: 1.58;
}
.dig-3d__compare {
  display: grid;
  margin-top: 22px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.dig-3d__compare > div {
  display: grid;
  grid-template-columns: .9fr 1fr 1fr;
  min-width: 0;
}
.dig-3d__compare > div + div {
  border-top: 1px solid var(--line);
}
.dig-3d__compare span {
  min-width: 0;
  padding: 16px 18px;
  border-right: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.45;
}
.dig-3d__compare span:last-child {
  border-right: 0;
}
.dig-3d__compare .dig-3d__head {
  background: #1a1612;
}
.dig-3d__compare .dig-3d__head span {
  color: #f3ece0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
  border-right-color: #3a3025;
}
.dig-3d__compare > div:not(.dig-3d__head) span:first-child {
  color: var(--ink);
  font-weight: 800;
}
.dig-3d__compare > div:not(.dig-3d__head) span:last-child {
  background: #fff8e3;
  color: #2a221c;
  font-weight: 700;
}
.dig-3d__bottom {
  margin-top: 18px;
  padding: 22px 24px;
  border-left: 4px solid #f9a902;
  border-radius: 8px;
  background: #f8f3e8;
}
.dig-3d__bottom p {
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.56;
}
.dig-screen {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr);
  gap: 18px;
  align-items: stretch;
}
.dig-screen__mock {
  background: #0c0a08;
  border-radius: 8px;
  padding: 14px;
  box-shadow: 0 28px 70px rgba(20,16,12,.22);
  min-height: 420px;
}
.dig-screen__top {
  height: 44px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  border-radius: 6px 6px 0 0;
  background: #15100c;
  color: #c9bda7;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.dig-screen__top span {
  color: #9af0ac;
}
.dig-screen__top strong {
  margin-left: auto;
  color: #f3ece0;
}
.dig-screen__body {
  position: relative;
  min-height: 360px;
  overflow: hidden;
  border-radius: 0 0 6px 6px;
  background:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px),
    radial-gradient(ellipse at 38% 45%, rgba(249,169,2,.16), transparent 52%),
    #102217;
  background-size: 28px 28px, 28px 28px, auto, auto;
}
.dig-screen__gauge {
  position: absolute;
  left: 24px;
  top: 24px;
  bottom: 24px;
  width: 118px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
  align-items: center;
}
.dig-screen__mark {
  display: block;
  text-align: center;
  color: #f3ece0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
}
.dig-screen__bar {
  position: relative;
  width: 42px;
  height: 100%;
  margin: 0 auto;
  border-radius: 999px;
  background: linear-gradient(180deg, #ef4444 0%, #f9a902 42%, #288c27 50%, #f9a902 58%, #ef4444 100%);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.18);
}
.dig-screen__bar i {
  position: absolute;
  left: -16px;
  right: -16px;
  top: 47%;
  height: 4px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 22px rgba(255,255,255,.58);
}
.dig-screen__profile {
  position: absolute;
  left: 166px;
  right: 24px;
  bottom: 24px;
  height: 45%;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  background: rgba(0,0,0,.42);
  overflow: hidden;
}
.dig-screen__profile svg {
  width: 100%;
  height: 100%;
}
.dig-screen__readout {
  position: absolute;
  top: 24px;
  right: 24px;
  width: min(260px, calc(100% - 210px));
  display: grid;
  gap: 8px;
}
.dig-screen__readout div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 12px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 6px;
  background: rgba(10,8,6,.74);
  color: #c9bda7;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
}
.dig-screen__readout strong {
  color: #f3ece0;
  text-align: right;
}
.dig-screen__readout .is-good {
  color: #9af0ac;
}
.dig-screen__points {
  display: grid;
  gap: 10px;
}
.dig-screen__points article {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 22px;
  background: #fff;
}
.dig-screen__points span,
.dig-job-grid span,
.dig-video-card__body span,
.dig-mode-card__text span {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: #8a5b00;
  font-weight: 800;
}
.dig-screen__points p {
  margin-top: 8px;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.5;
}
.dig-ui-options {
  background: #f8f3e8;
}
.dig-ui-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.dig-ui-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 16px 38px rgba(26,22,18,.06);
}
.dig-ui-card__head {
  padding: clamp(24px, 4vw, 34px);
  color: #f3ece0;
  background:
    linear-gradient(135deg, rgba(26,22,18,.92), rgba(26,22,18,.68)),
    linear-gradient(90deg, var(--ui-accent), transparent);
}
.dig-ui-card--simple {
  --ui-accent: #f9a902;
}
.dig-ui-card--app {
  --ui-accent: #288c27;
}
.dig-ui-card__head span {
  display: inline-flex;
  color: #f9d785;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.dig-ui-card__head h3 {
  margin-top: 12px;
  color: #fff;
  font-size: clamp(27px, 3vw, 40px);
}
.dig-ui-card__head p {
  margin-top: 12px;
  color: #e8d6a8;
  font-size: 17px;
  line-height: 1.48;
}
.dig-ui-card__body {
  padding: 24px clamp(22px, 3vw, 30px);
}
.dig-ui-card__body p {
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.58;
}
.dig-ui-card__body ul {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.dig-ui-card__body li {
  position: relative;
  padding-left: 24px;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.45;
}
.dig-ui-card__body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .58em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ui-accent);
}
.dig-ui-card__foot {
  margin-top: auto;
  padding: 16px clamp(22px, 3vw, 30px);
  border-top: 1px solid var(--line);
  background: #fbf8ef;
  color: #6b4c11;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1.35;
  text-transform: uppercase;
}
.dig-video-section {
  background: #1a1612;
  color: #f3ece0;
}
.dig-video-section h2 {
  color: #fff;
}
.dig-video-section .lead,
.dig-video-section .eyebrow {
  color: #d8cfbc;
}
.dig-video-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.dig-video-grid--excavator {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.dig-video-grid--excavator .dig-video-card--feature {
  grid-column: auto;
}
.dig-video-card {
  overflow: hidden;
  background: #221d18;
  border-color: #3a3025;
  color: #f3ece0;
}
.dig-video-card--feature {
  grid-column: span 2;
}
.dig-video-card--simple {
  display: grid;
  grid-template-columns: minmax(260px, .82fr) minmax(0, 1fr);
  align-items: stretch;
}
.dig-video-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background:
    radial-gradient(circle at 42% 42%, rgba(249,169,2,.25), transparent 34%),
    linear-gradient(135deg, #0c0a08, #312719);
}
.dig-video-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dig-video-card__media video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: #000;
}
.dig-video-card__media iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.dig-video-card--embed .dig-video-card__media {
  background: #000;
}
.dig-video-card--embed .dig-video-card__media::before,
.dig-video-card--embed .dig-video-card__media::after {
  content: none;
}
.dig-video-card--placeholder .dig-video-card__media {
  display: grid;
  place-items: center;
  border-bottom: 1px solid #3a3025;
}
.dig-video-card--placeholder .dig-video-card__media::before,
.dig-video-card--placeholder .dig-video-card__media::after {
  content: none;
}
.dig-video-card__placeholder {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 8px 12px;
  border: 1px solid rgba(243,236,224,.32);
  border-radius: 999px;
  background: rgba(26,22,18,.74);
  color: #f7e7bd;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.dig-video-card--simple .dig-video-card__media {
  aspect-ratio: 1 / 1;
  background: #000;
}
.dig-video-card:not(.dig-video-card--simple):not(.dig-video-card--embed):not(.dig-video-card--placeholder) .dig-video-card__media::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: #f3ece0;
  box-shadow: 0 0 0 16px rgba(243,236,224,.14);
}
.dig-video-card:not(.dig-video-card--simple):not(.dig-video-card--embed):not(.dig-video-card--placeholder) .dig-video-card__media::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 17px;
  height: 20px;
  transform: translate(-38%, -50%);
  background: #1a1612;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.dig-video-card__body {
  padding: 20px;
}
.dig-video-card__body span {
  color: #f9d785;
}
.dig-video-card h3 {
  margin-top: 8px;
  color: #fff;
  font-size: clamp(20px, 2vw, 26px);
}
.dig-video-card p {
  margin-top: 10px;
  color: #d8cfbc;
  font-size: 14.5px;
  line-height: 1.5;
}
.dig-video-card__transcript {
  margin-top: 16px;
}
.dig-video-card__transcript .mode-video__chapters {
  grid-template-columns: 1fr;
}
.dig-mode-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.dig-mode-card {
  overflow: hidden;
}
.dig-mode-card summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  min-height: 116px;
  padding: 22px;
  cursor: pointer;
  list-style: none;
}
.dig-mode-card summary::-webkit-details-marker {
  display: none;
}
.dig-mode-card__num {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #1a1612;
  color: #f9a902;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
}
.dig-mode-card__text {
  min-width: 0;
}
.dig-mode-card__text strong {
  display: block;
  margin-top: 7px;
  font-family: var(--font-display);
  font-size: clamp(19px, 2vw, 24px);
  line-height: 1.18;
  color: var(--ink);
}
.dig-mode-card__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.dig-mode-card__toggle::after {
  content: "+";
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #f3ecdf;
  color: var(--ink);
  font-family: var(--font-mono);
}
.dig-mode-card[open] {
  border-color: #d5c38b;
  box-shadow: 0 18px 42px rgba(26,22,18,.08);
}
.dig-mode-card[open] .dig-mode-card__toggle::after {
  content: "-";
}
.dig-mode-card__body {
  padding: 0 22px 24px 80px;
}
.dig-mode-card__body p {
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.55;
}
.dig-mode-card__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 16px;
}
.dig-mode-card__facts div {
  min-width: 0;
  padding: 14px;
  border-radius: 8px;
  background: #f8f3e8;
}
.dig-mode-card__facts span,
.dig-hardware__checks span {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8a5b00;
  font-weight: 800;
}
.dig-mode-card__facts strong {
  display: block;
  margin-top: 6px;
  color: var(--ink);
  font-size: 13.5px;
  line-height: 1.35;
}
.dig-job-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.dig-job-grid article {
  padding: 24px;
  border-top: 4px solid #f9a902;
}
.dig-job-grid h3 {
  margin-top: 8px;
  font-size: 23px;
}
.dig-job-grid p {
  margin-top: 10px;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.5;
}
.dig-hardware {
  background: #f3ecdf;
}
.dig-hardware__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .8fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.dig-hardware h2 {
  margin-top: 14px;
}
.dig-hardware .lead {
  margin-top: 18px;
  color: var(--ink-2);
}
.dig-hardware__checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 24px;
}
.dig-hardware__checks span {
  position: relative;
  padding: 14px 14px 14px 34px;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  line-height: 1.35;
}
.dig-hardware__checks span::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 20px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f9a902;
}
.dig-hardware__photo {
  padding: 16px;
  border-radius: 8px;
  background: #1a1612;
  box-shadow: 0 24px 60px rgba(26,22,18,.18);
}
.dig-hardware__photo img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}
.dig-machine-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.dig-machine-strip span {
  display: block;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-left: 4px solid #f9a902;
  border-radius: 8px;
  background: #fff;
  font-weight: 800;
  color: var(--ink);
}
.dig-field {
  background: #f3ecdf;
}
@media (max-width: 980px) {
  .dig-hero__facts,
  .dig-answer__cards,
  .dig-video-grid,
  .dig-job-grid,
  .dig-machine-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dig-answer__grid,
  .dig-3d__grid,
  .dig-screen,
  .dig-ui-grid,
  .dig-hardware__grid {
    grid-template-columns: 1fr;
  }
  .dig-video-card--feature {
    grid-column: span 2;
  }
  .dig-video-grid--excavator .dig-video-card--feature {
    grid-column: auto;
  }
  .dig-video-card--simple {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 760px) {
  .dig-hero__shade {
    background: linear-gradient(180deg, rgba(10,8,6,.56) 0%, rgba(10,8,6,.88) 100%);
  }
  .dig-hero__facts,
  .dig-answer__cards,
  .dig-video-grid,
  .dig-mode-grid,
  .dig-job-grid,
  .dig-hardware__checks,
  .dig-machine-strip {
    grid-template-columns: 1fr;
  }
  .dig-video-card--feature {
    grid-column: auto;
  }
  .dig-screen__mock {
    min-height: 520px;
  }
  .dig-screen__body {
    min-height: 476px;
  }
  .dig-screen__gauge {
    left: 18px;
    top: 18px;
    bottom: 180px;
    width: 86px;
  }
  .dig-screen__readout {
    left: 118px;
    right: 18px;
    top: 18px;
    width: auto;
  }
  .dig-screen__profile {
    left: 18px;
    right: 18px;
    bottom: 18px;
    height: 145px;
  }
  .dig-mode-card summary {
    grid-template-columns: auto minmax(0, 1fr);
    min-height: 0;
  }
  .dig-mode-card__toggle {
    grid-column: 2;
    justify-self: start;
  }
  .dig-mode-card__body {
    padding: 0 22px 22px;
  }
  .dig-mode-card__facts {
    grid-template-columns: 1fr;
  }
  .dig-3d__compare,
  .dig-3d__compare > div {
    display: block;
  }
  .dig-3d__compare .dig-3d__head {
    display: none;
  }
  .dig-3d__compare > div {
    padding: 16px;
  }
  .dig-3d__compare span {
    display: block;
    padding: 0;
    border-right: 0;
  }
  .dig-3d__compare > div:not(.dig-3d__head) span:first-child {
    margin-bottom: 10px;
  }
  .dig-3d__compare > div:not(.dig-3d__head) span:nth-child(2)::before,
  .dig-3d__compare > div:not(.dig-3d__head) span:nth-child(3)::before {
    display: block;
    margin: 12px 0 4px;
    color: #8a5b00;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
  }
  .dig-3d__compare > div:not(.dig-3d__head) span:nth-child(2)::before {
    content: "Full 3D system";
  }
  .dig-3d__compare > div:not(.dig-3d__head) span:nth-child(3)::before {
    content: "Ditch Assist DIG\2122";
  }
  .dig-3d__compare > div:not(.dig-3d__head) span:last-child {
    margin: 12px -16px -16px;
    padding: 14px 16px;
  }
}
@media (max-width: 480px) {
  .dig-hero__inner {
    padding-top: 78px;
  }
  .dig-screen__readout div {
    flex-direction: column;
    gap: 3px;
  }
}

/* Device frame — reusable tablet bezel for app-screenshot graphics, matching
   the app-simulator page's own tablet frame styling. Drop an <img> inside
   .device-frame__screen; the frame handles the bezel/camera/rounding. */
.device-frame {
  background: linear-gradient(145deg,#24201c,#050403);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 22px;
  padding: 14px 16px 18px;
  box-shadow: 0 30px 74px rgba(20,16,12,.32), 0 0 0 6px rgba(255,255,255,.03);
  max-width: 420px;
  margin: 0 auto;
}
.device-frame__cam {
  width: 46px;
  height: 5px;
  border-radius: 999px;
  background: #050403;
  margin: 0 auto 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 0 0 1px rgba(255,255,255,.06);
}
.device-frame__screen {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  background: #000;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.6);
}
.device-frame__screen img {
  display: block;
  width: 100%;
  height: auto;
}

/* App-simulator promo block — text + device-frame graphic, used across
   product/resource pages to invite visitors into the live browser simulator. */
.sim-promo {
  display: grid;
  grid-template-columns: minmax(0,1.05fr) minmax(280px,.85fr);
  gap: 40px;
  align-items: center;
}
.sim-promo__text .section-chip { margin-bottom: 0; }
.sim-promo__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
@media (max-width: 860px) {
  .sim-promo { grid-template-columns: 1fr; }
  .sim-promo__graphic { order: -1; }
  .device-frame { max-width: 320px; }
}

/* Land forming design previewer */
.lfp-page {
  background: #111712;
}
.lfp-tool {
  display: grid;
  grid-template-columns: minmax(330px, 390px) minmax(0, 1fr);
  min-height: calc(100vh - 118px);
  border-top: 1px solid #243023;
  border-bottom: 1px solid #243023;
  background: #101510;
}
.lfp-panel {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  max-height: calc(100vh - 118px);
  overflow-y: auto;
  padding: 22px;
  background: #fbf8ef;
  border-right: 1px solid var(--line-2);
  box-shadow: 8px 0 30px rgba(10, 8, 6, .12);
}
.lfp-panel__head h1 {
  margin-top: 12px;
  color: var(--ink);
  font-size: clamp(29px, 2.8vw, 44px);
  line-height: 1.04;
}
.lfp-panel__head p {
  margin-top: 12px;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.5;
}
.lfp-dropzone {
  display: grid;
  place-items: center;
  min-height: 136px;
  padding: 18px;
  border: 2px dashed #bbb09f;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  text-align: center;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.lfp-dropzone:hover,
.lfp-dropzone.is-dragover {
  border-color: var(--brand-green);
  background: #f4fbf2;
  box-shadow: inset 0 0 0 1px rgba(40, 140, 39, .12);
}
.lfp-dropzone.has-file {
  border-style: solid;
  border-color: var(--brand-green);
  background: #f4fbf2;
}
.lfp-dropzone input {
  display: none;
}
.lfp-dropzone strong {
  display: block;
  max-width: 30ch;
  font-size: 15px;
  line-height: 1.35;
}
.lfp-dropzone span {
  display: block;
  margin-top: 7px;
  color: var(--ink-2);
  font-size: 12.5px;
  line-height: 1.4;
}
.lfp-status {
  min-height: 20px;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.45;
}
.lfp-status.is-error {
  color: #a9341f;
}
.lfp-card {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.lfp-card__title {
  color: #6a5d4e;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.lfp-stat {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 4px 0;
  border-bottom: 1px dashed #eee2d2;
  font-size: 13px;
  line-height: 1.35;
}
.lfp-stat:last-of-type {
  border-bottom: 0;
}
.lfp-stat span {
  flex: 0 0 auto;
  color: #6a5d4e;
}
.lfp-stat strong {
  min-width: 0;
  color: var(--ink);
  font-weight: 800;
  text-align: right;
  overflow-wrap: anywhere;
}
.lfp-codes {
  display: grid;
  gap: 2px;
  max-height: 122px;
  margin-top: 2px;
  overflow-y: auto;
  color: #6a5d4e;
  font-size: 12px;
}
.lfp-codes div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.lfp-codes b {
  color: var(--brand-green-dark);
}
.lfp-codes i {
  color: #9a5a13;
  font-style: normal;
}
.lfp-segment {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: #f7f1e3;
}
.lfp-segment--small {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.lfp-segment button {
  min-width: 0;
  min-height: 38px;
  padding: 8px 9px;
  border: 0;
  border-right: 1px solid var(--line-2);
  border-radius: 0;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  cursor: pointer;
}
.lfp-segment button:last-child {
  border-right: 0;
}
.lfp-segment button:hover:not(:disabled) {
  color: var(--ink);
  background: rgba(40, 140, 39, .08);
}
.lfp-segment button.is-active {
  color: #fff;
  background: var(--brand-green-dark);
}
.lfp-segment button:disabled {
  color: #aaa197;
  cursor: not-allowed;
  background: #f2eadb;
}
.lfp-control {
  display: grid;
  gap: 7px;
}
.lfp-control span {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #6a5d4e;
  font-size: 12px;
  line-height: 1.3;
}
.lfp-control b {
  color: var(--ink);
}
.lfp-control output {
  min-width: 50px;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 12px;
  text-align: right;
}
.lfp-control input[type="range"] {
  width: 100%;
  accent-color: var(--brand-green);
}
.lfp-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.35;
  cursor: pointer;
}
.lfp-check input {
  margin-top: 2px;
  accent-color: var(--brand-green);
  flex-shrink: 0;
}
.lfp-actions {
  display: grid;
  gap: 10px;
}
.lfp-actions .btn {
  justify-content: center;
  min-height: 46px;
}
.lfp-actions .btn:disabled {
  opacity: .48;
  cursor: not-allowed;
}
.lfp-map-shell {
  position: relative;
  min-height: calc(100vh - 118px);
  background:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px),
    #121814;
  background-size: 34px 34px;
}
.lfp-map {
  position: absolute;
  inset: 0;
  min-height: 100%;
  z-index: 1;
}
.lfp-map .leaflet-control-attribution {
  font-size: 10px;
}
.lfp-map-empty {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-content: center;
  gap: 8px;
  padding: 24px;
  color: #e9e0cf;
  text-align: center;
  pointer-events: none;
  background: rgba(10, 12, 10, .42);
}
.lfp-map-empty strong {
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 54px);
  line-height: 1;
}
.lfp-map-empty span {
  color: #d8cfbc;
  font-size: 15px;
}
.lfp-map-empty.is-hidden {
  display: none;
}
.lfp-toast {
  position: absolute;
  left: 50%;
  top: 18px;
  z-index: 600;
  max-width: min(520px, calc(100% - 32px));
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px;
  background: rgba(20, 24, 20, .9);
  color: #f3ece0;
  box-shadow: 0 12px 32px rgba(0,0,0,.28);
  font-size: 13px;
  line-height: 1.4;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%);
  transition: opacity .18s ease;
}
.lfp-toast.is-visible {
  opacity: 1;
}
.lfp-toast.is-error {
  border-color: #ef8a6d;
}
.lfp-toast.is-warn {
  border-color: #f4b24f;
}
.lfp-legend {
  display: grid;
  gap: 6px;
  margin-top: 2px;
  color: var(--ink-2);
  font-size: 11px;
}
.lfp-legend__bar {
  height: 12px;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 999px;
}
.lfp-legend__scale {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: #6a5d4e;
  font-family: var(--font-mono);
  font-size: 11px;
}
.lfp-legend__classes {
  display: grid;
  gap: 3px;
}
.lfp-legend__head {
  margin-top: 5px;
  color: #6a5d4e;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.lfp-legend__head:first-child {
  margin-top: 0;
}
.lfp-legend__row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 18px;
  font-family: var(--font-mono);
  font-size: 10.5px;
}
.lfp-legend__swatch {
  width: 18px;
  height: 13px;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 3px;
}
.lfp-map-legend {
  min-width: 132px;
  max-width: 210px;
  padding: 9px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,.94);
  color: #15120f;
  box-shadow: 0 6px 22px rgba(0,0,0,.28);
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 1.3;
}
.lfp-map-legend .lfp-map-legend__title {
  margin-bottom: 7px;
  font-weight: 800;
}
.lfp-map-legend .lfp-legend__row {
  font-size: 10px;
}
.lfp-map-legend .lfp-legend__bar {
  width: 16px;
  height: 140px;
  border-radius: 4px;
}
.lfp-map-legend .lfp-map-legend__continuous {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
}
.lfp-map-legend .lfp-map-legend__scale {
  position: relative;
  min-width: 64px;
  font-family: var(--font-mono);
  font-size: 10px;
}
.lfp-map-legend .lfp-map-legend__scale span {
  position: absolute;
  left: 0;
  white-space: nowrap;
}
.lfp-map-legend .lfp-map-legend__scale .top {
  top: 0;
}
.lfp-map-legend .lfp-map-legend__scale .mid {
  top: 50%;
  color: var(--brand-green-dark);
  font-weight: 800;
  transform: translateY(-50%);
}
.lfp-map-legend .lfp-map-legend__scale .bottom {
  bottom: 0;
}
.lfp-bm-marker {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 2px solid #dffcff;
  border-radius: 50%;
  background: #19bfd3;
  color: #062b31;
  box-shadow: 0 2px 8px rgba(0,0,0,.45);
  font-size: 11px;
  font-weight: 900;
}
.lfp-notes {
  background: #f7f1e3;
}
@media (max-width: 960px) {
  .lfp-tool {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .lfp-panel {
    max-height: none;
    border-right: 0;
    border-bottom: 1px solid var(--line-2);
  }
  .lfp-map-shell {
    min-height: 620px;
  }
}
@media (max-width: 620px) {
  .lfp-panel {
    padding: 18px;
  }
  .lfp-panel__head h1 {
    font-size: 31px;
  }
  .lfp-map-shell {
    min-height: 520px;
  }
  .lfp-segment button {
    padding-inline: 6px;
    font-size: 11px;
  }
}