/* Use-case page template (use-cases/*): agriculture first, then delivery and inspection.
   Hero (pain point) -> feature sections, each led by a picture -> a working day -> closing. */

.hero .eyebrow{margin-bottom:-6px}

/* Feature section: copy beside a picture; .flip puts the picture first */
.feature{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,72px);align-items:center}
.feature.flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.feature.flip>.copy{order:2}
.feature .copy{display:grid;gap:18px;align-content:start}
.feature h2{font-size:clamp(32px,3.8vw,52px);line-height:1.05}
.feature .copy>p{color:var(--fg2);font-size:18px;max-width:46ch}
@media (max-width:900px){.feature,.feature.flip{grid-template-columns:1fr}.feature.flip>.copy{order:0}}

/* Scroll-scrubbed demos (pages/agriculture.js): a drawing on top, a readout (HUD) underneath.
   #alt-demo: stick control + altitude floor, side view. #shift-demo: roll shifts the pattern, top view. */
.demo{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:0 30px 60px -36px rgba(4,20,16,.35)}
.demo>svg{display:block;width:100%;height:auto}
.demo .hud{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}
.demo .hud>div{padding:14px 18px;border-right:1px solid var(--line);display:grid;gap:4px;min-width:0}
.demo .hud>div:last-child{border-right:0}
.demo .hud small{font:500 12px/1.2 var(--body);color:var(--fg2)}
.demo .hud b{font:600 17px/1.2 var(--body);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.demo .hud .warn{color:var(--soon)}
.stick{display:flex;align-items:center;gap:12px}
.stick i{position:relative;width:34px;height:34px;border:1.5px solid var(--line);border-radius:8px;flex:none}
.stick i::before{content:"";position:absolute;left:50%;top:4px;bottom:4px;width:1.5px;background:var(--line);transform:translateX(-50%)}
.stick i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:12px;border-radius:50%;background:var(--accent);transform:translate(-50%,calc(-50% - var(--s,0) * 10px))}
.side .ground{fill:#E3EDE6}
.side .rows{fill:#B9D3C1}
.side .tree{fill:#2F6B4F}
.side .trunk{stroke:#5B4A3A;stroke-width:5;stroke-linecap:round}
.side .floor{stroke:var(--soon);stroke-width:1.5;stroke-dasharray:6 6}
.side .floor-label{fill:var(--soon);font:600 13px/1 var(--mono)}
.side .axis{fill:var(--fg2);font:500 12px/1 var(--mono)}
.side .grid-line{stroke:var(--line);stroke-width:1}
.side .plan{fill:none;stroke:var(--route);stroke-width:1.5;stroke-dasharray:3 7;stroke-linecap:round;opacity:.6}
.side .flown{fill:none;stroke:var(--route);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.side .spray{fill:url(#spray-fade)}
.stick.roll i::before{left:4px;right:4px;top:50%;bottom:auto;width:auto;height:1.5px;transform:translateY(-50%)}
.stick.roll i::after{transform:translate(calc(-50% + var(--s,0) * 10px),-50%)}
.top .field{fill:#E3EDE6;stroke:#C9DCCF;stroke-width:1.5}
.top .rowline{stroke:#B9D3C1;stroke-width:14;stroke-linecap:round}
.top .ghost{fill:none;stroke:var(--fg2);stroke-width:1.5;stroke-dasharray:3 7;stroke-linecap:round;opacity:.45}
.top .ahead{fill:none;stroke:var(--route);stroke-width:2;stroke-dasharray:6 7;stroke-linecap:round;stroke-linejoin:round}
.top .trail{fill:none;stroke:var(--route);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.top .legend{font:500 12px/1 var(--mono);fill:var(--fg2)}
.top .shift-arrow{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.top .shift-label{fill:var(--accent);font:600 13px/1 var(--mono)}
/* Demo on the inverse ground: lighter green card, light lines, white aircraft */
.inverse .demo{background:var(--inv-card);border-color:var(--inv-line);box-shadow:0 30px 60px -30px rgba(0,0,0,.5)}
.inverse .demo .hud{border-top-color:var(--inv-line)}
.inverse .demo .hud>div{border-color:var(--inv-line)}
.inverse .demo .hud small{color:var(--inv-fg2)}
.inverse .demo .hud b[style]{color:var(--inv-accent)!important}
.inverse .stick i,.inverse .stick i::before{border-color:var(--inv-line)}
.inverse .stick i::before{background:var(--inv-line)}
.inverse .stick i::after{background:var(--inv-accent)}
.inverse .top .field{fill:#0E2F27;stroke:var(--inv-line)}
.inverse .top .rowline{stroke:#1F5A47}
.inverse .top .ghost{stroke:var(--inv-fg2);opacity:.5}
.inverse .top :is(.ahead,.trail){stroke:var(--inv-accent)}
.inverse .top .legend{fill:var(--inv-fg2)}
.inverse .top .legend rect{fill:#1F5A47}
.inverse .top .shift-arrow{stroke:var(--inv-accent)}
.inverse .top .shift-label{fill:var(--inv-accent)}
.inverse .top .craft path{stroke:#D5DEDA}
.inverse .top .craft circle{fill:#E9EFED}
.inverse .top .craft rect{fill:#F4F8F6}
.points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:clamp(28px,4vw,44px)}
.points div{display:grid;gap:6px;padding-top:18px;border-top:1px solid var(--line)}
.points b{font:600 19px/1.25 var(--display);letter-spacing:-.015em}
.points span{color:var(--fg2);font-size:16px}
@media (max-width:760px){.demo .hud{grid-template-columns:repeat(2,minmax(0,1fr))}.demo .hud>div:nth-child(2){border-right:0}.demo .hud>div:nth-child(n+3){border-top:1px solid var(--line)}.demo .hud b{white-space:normal}.points{grid-template-columns:1fr}}

/* Pump band: field video with the live pump card on top */
.uc-band{position:relative;color:var(--media-fg);overflow:hidden;isolation:isolate;padding-block:clamp(96px,12vw,168px)}
.uc-band>video,.uc-band>.poster{ /* only the band's own background, not videos inside its cards */
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.uc-band::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(4,20,16,.85) 0%,rgba(4,20,16,.6) 50%,rgba(4,20,16,.3) 100%)}
.uc-band .wrap{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:48px;align-items:center}
.uc-band .copy{display:grid;gap:18px}
.uc-band h2{font-size:clamp(32px,3.8vw,52px);line-height:1.05}
.uc-band .copy p{color:var(--media-fg2);font-size:18px;max-width:42ch}
@media (max-width:860px){.uc-band .wrap{grid-template-columns:1fr}}
.pump-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:14px 16px;border-bottom:1px solid var(--app-line)}
.pump-row:last-child{border-bottom:0}
.pump-row b{font-size:14px}
.pump-row span.d{display:block;font:400 13px/1.4 var(--body);color:var(--app-fg2)}
.pump-row output{font:600 20px/1 var(--mono)}
.rate{grid-column:1/-1;width:100%;accent-color:var(--app-ok);margin:4px 0 0}
.tank{grid-column:1/-1;height:8px;border-radius:999px;background:var(--app-line);overflow:hidden}
.tank i{display:block;height:100%;width:var(--fill,40%);background:var(--app-ok);border-radius:inherit}

/* Spray report: a paper document, the one thing the customer keeps */
.report{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 30px 60px -36px rgba(4,20,16,.4);padding:clamp(22px,3vw,34px);display:grid;gap:20px}
.report header{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.report header b{font:600 22px/1.1 var(--display);letter-spacing:-.02em}
.report header span{font:400 14px/1 var(--body);color:var(--fg2)}
.report .field{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:22px;align-items:center}
.report .field svg{display:block;width:100%;height:auto;border-radius:10px;background:#E8F0EA}
.report dl{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:16px 20px}
.report dt{font:500 12px/1.2 var(--body);color:var(--fg2);margin-bottom:6px}
.report dd{margin:0;font:600 18px/1.2 var(--body);font-variant-numeric:tabular-nums}
.report dl .wide{grid-column:1/-1}
.report footer{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding-top:16px;border-top:1px solid var(--line);font-size:14px;color:var(--fg2)}
.report .shared{font-size:13px;font-weight:600;padding:6px 12px;border-radius:999px;color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
@media (max-width:520px){.report .field{grid-template-columns:1fr}}
.note{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);font-size:15px;color:var(--fg2);max-width:46ch}
.note svg{width:20px;height:20px;flex:none;color:var(--accent);margin-top:2px}

/* A job from start to finish (#job-demo, pages/agriculture.js): a rendered video of a real field
   (made by tools/job-video) that plays while the section is on screen; the steps, checks, report and
   readouts follow its clock. .live (added by the script) dims the steps not in progress. */
.job-grid{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
.job-steps{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.job-steps li{display:grid;grid-template-columns:52px 1fr;column-gap:12px;row-gap:4px;padding:14px 16px;border-radius:12px;transition:opacity .3s,background-color .3s,box-shadow .3s}
.job-steps time{font:600 14px/1.45 var(--mono);color:var(--accent);grid-row:span 2}
.job-steps b{font:600 20px/1.2 var(--display);letter-spacing:-.02em}
.job-steps span{color:var(--fg2);font-size:15px}
.job.live .job-steps li{opacity:.4}
.job.live .job-steps li.done{opacity:.65}
.job.live .job-steps li.on{opacity:1;background:var(--surface);box-shadow:0 0 0 1px var(--line),0 18px 36px -28px rgba(4,20,16,.4)}
.job-view{position:relative}
.job-video{display:block;width:100%;aspect-ratio:2/1;object-fit:cover;background:#DCE6E0}
/* shown while the page holds on the video (pages/agriculture.js) */
.job-credit{position:absolute;left:10px;bottom:8px;font:400 11px/1 var(--body);color:rgba(11,31,26,.55)}
@media (max-width:860px){.job-video{aspect-ratio:4/3}} /* phones: a taller crop of the same video */
/* checks and report sit in the empty strip right of the field; both occupy the same slot */
.job-side{position:absolute;top:14px;right:14px;width:min(220px,28%);display:grid}
.job-side>*{grid-area:1/1;align-self:start;background:var(--surface);box-shadow:0 12px 30px -16px rgba(0,0,0,.5);border:1px solid var(--line);border-radius:12px;padding:12px 14px;transition:opacity .3s,transform .3s}
.job-checks{list-style:none;margin:0;display:grid;gap:8px}
.job-checks li{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--fg2)}
.job-checks li::before{content:"";flex:none;width:16px;height:16px;border-radius:50%;border:1.5px solid var(--line)}
.job-checks li.ok{color:var(--fg)}
.job-checks li.ok::before{border-color:var(--route);background:var(--route) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-4.9' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.job-report{display:grid;gap:10px}
.job-report b{font:600 16px/1.2 var(--display)}
.job-report dl{margin:0;display:grid;gap:6px}
.job-report dl div{display:flex;justify-content:space-between;gap:8px;font-size:14px}
.job-report dt{color:var(--fg2)}
.job-report dd{margin:0;font:600 14px/1.3 var(--mono)}
.job-report .shared{justify-self:start;font-size:12px;font-weight:600;padding:5px 10px;border-radius:999px;color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.job-side .off{opacity:0;transform:translateY(8px);pointer-events:none}
@media (max-width:860px){
  .job-grid{grid-template-columns:1fr;gap:16px}
  .job.live .job-steps li:not(.on){display:none} /* phones: only the step in progress, above the stage */
  .job-side{top:auto;left:10px;right:10px;bottom:10px;width:auto} /* phones: checks and report float over the lower part of the field */
  .job-side>*{padding:10px 12px}
  .job-checks{grid-template-columns:1fr 1fr;gap:8px 10px}
  .job-checks li{font-size:13px}
  .job-report{gap:6px}
  .job-report dl{grid-template-columns:repeat(3,minmax(0,1fr))}
  .job-report dl div{display:grid;gap:2px;justify-content:start}
}

.closing .ctas{display:flex;flex-wrap:wrap;gap:12px}
/* Over the darkened closing video the brand green and the faint ghost sink in: bright mint primary, crisp white outline */
.closing .btn-primary{background:var(--inv-accent);color:var(--inv-bg);box-shadow:0 6px 24px rgba(95,224,184,.28)}
.closing .btn-primary:hover{background:#86EBCB}
.closing .btn-ghost{color:#fff;border-color:rgba(255,255,255,.85);background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.closing .btn-ghost:hover{background:rgba(255,255,255,.2);border-color:#fff}

/* Dynamic resume (agriculture): agriculture.js scrubs the drawing with the scroll and sets data-s per phase */
#resume-demo .res-field{transition:opacity .3s}
#resume-demo:is([data-s=off],[data-s=boot]) .res-field{opacity:.3}
#resume-demo:is([data-s=on],[data-s=back]) .res-pin{stroke:#2CC295}
#resume-demo:is([data-s=stopped],[data-s=off]) .screen-bar .st{color:var(--app-warn)}
#resume-demo:is([data-s=home],[data-s=boot],[data-s=back]) .screen-bar .st{color:var(--app-fg2)}
#resume-demo:is([data-s=spray],[data-s=on]) .screen-bar .st{color:var(--app-ok)}
.res-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-top:1px solid var(--app-line)}
.res-bar b{font-size:14px}
/* "GCS™" after "Styr" in a closing heading: half size on the baseline, like the logo */
.closing h2 .gcs{font-size:.5em;letter-spacing:0}