/* ==========================================================================
   dropoff-v3.css — free-electronics-dropoff-kansas-city.html (2026-09-30).
   Layered on v3-kit.css + svc-v3.css (main.sv.sx.sx--dropoff). Page pieces:
   · .sx-art--dock   hero scene: a car backs up to the dock, the roll-up door
                     opens, Henry waves, items fly into the bin, "$0.00 · done"
   · .dk-intro       copy + tilted photo stack
   · .dk-steps-car   a little car riding the scroll-filled step timeline
   · .dk-check       "Will we take it?" checker (verdicts: window.crTakeIt from items-v4.js)
   · .dk-cats        what-you-can-bring tiles
   · .dk-loop        orbiting recovered materials ("why free")
   · .dk-hours / .dk-open  live open/closed status in Kansas City time
   Motion is gated on html.sv-js like the rest of the kit; with reduced motion
   the scene shows its parked frame (door open, Henry waving, $0.00 stamp).
   ========================================================================== */

/* ─── Hero scene ───────────────────────────────────────────────────────── */
.sx-art--dock { aspect-ratio: 1; }
.sx-art--dock .dk-scene { inset: 0; width: 100%; height: 100%; overflow: visible; }
.dk-ground { fill: rgba(255, 255, 255, .09); }
.dk-lane { fill: none; stroke: rgba(255, 255, 255, .2); stroke-width: 3; stroke-dasharray: 18 14; stroke-linecap: round; }
.dk-roof { fill: #0a2a14; stroke: rgba(185, 242, 74, .35); stroke-width: 1.5; }
.dk-bldg { stroke: rgba(185, 242, 74, .22); stroke-width: 1.5; }
.dk-sign rect { fill: #04170a; stroke: #b9f24a; stroke-width: 2; }
.dk-sign-t { font: 900 17px/1 'Outfit', system-ui, sans-serif; letter-spacing: .06em; fill: #b9f24a; }
.dk-sign-s { font: 700 10.5px/1 'DM Sans', system-ui, sans-serif; fill: rgba(255, 255, 255, .78); }
.dk-lamp rect { fill: #b9f24a; }
.dk-glow { fill: rgba(185, 242, 74, .22); }
.dk-bin rect { fill: #b9f24a; }
.dk-bin path { stroke: rgba(5, 32, 13, .35); stroke-width: 2; }
.dk-bin text { font: 900 11px/1 'Outfit', system-ui, sans-serif; letter-spacing: .08em; fill: #05200d; }
.dk-door rect:first-child { fill: #7d998a; }
.dk-door path { stroke: #557264; stroke-width: 2; }
.dk-door .dk-handle { fill: #2c4537; }
.dk-door { transform: translateY(-152px); }            /* parked frame: door open */
.dk-frame { fill: none; stroke: rgba(185, 242, 74, .55); stroke-width: 3; }
.dk-bell-b { fill: #ffc53d; }
.dk-bell-ring { fill: none; stroke: #ffc53d; stroke-width: 2.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.dk-car-win { fill: #0b2a15; opacity: .88; }
.dk-car-line { fill: none; stroke: rgba(5, 32, 13, .28); stroke-width: 2; }
.dk-car-head { fill: #fff3b0; }
.dk-car-rev { fill: #ffffff; opacity: .2; }
.dk-tire { fill: #07130b; stroke: #22402c; stroke-width: 3; }
.dk-hub { fill: #d5dfd8; }
.dk-spoke { stroke: #5b6f63; stroke-width: 3; stroke-linecap: round; }
.dk-item { opacity: 0; }
.dk-item-bg { fill: #fff; stroke: #b9f24a; stroke-width: 3; }
.dk-item-ic { fill: none; stroke: #05200d; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.dk-timer { left: 0; bottom: 3%; z-index: 5; display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; background: rgba(7, 19, 11, .74); border: 1px solid rgba(185, 242, 74, .3); color: #fff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 18px 30px -16px rgba(0, 0, 0, .6); }
.dk-timer svg { width: 38px; height: 38px; transform: rotate(-90deg); }
.dk-timer circle { fill: none; stroke-width: 5; }
.dk-timer-track { stroke: rgba(255, 255, 255, .14); }
.dk-timer-fill { stroke: #b9f24a; stroke-linecap: round; stroke-dasharray: 113.1; stroke-dashoffset: 0; }
.dk-timer b { display: block; font: 800 15px/1.05 'Outfit', system-ui, sans-serif; }
.dk-timer small { display: block; font: 600 11px/1.2 'DM Sans', system-ui, sans-serif; color: rgba(255, 255, 255, .72); }
.dk-done { right: 0; top: 4%; z-index: 5; display: flex; flex-direction: column; align-items: center; padding: 10px 16px 8px; border-radius: 16px; background: #fff; color: #05200d; border: 3px solid #0fa24a; transform: rotate(-8deg); box-shadow: 0 22px 36px -18px rgba(0, 0, 0, .55); }
.dk-done b { font: 900 26px/1 'Outfit', system-ui, sans-serif; letter-spacing: -.03em; color: #087a35; }
.dk-done span { font: 800 11px/1.3 'DM Sans', system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.sx-art--dock .sv-chip--1 { left: -6%; right: auto; top: 6%; }
.sx-art--dock .sv-chip--2 { left: -8%; right: auto; top: 37%; }
.sx-art--dock .sv-chip--3 { left: auto; right: -4%; top: auto; bottom: -1%; }

/* the 10-second loop */
html.sv-js .sx-art--dock .dk-car { animation: dkCar 10s infinite; }
html.sv-js .sx-art--dock .dk-wheel { animation: dkWheel 10s infinite; }
html.sv-js .sx-art--dock .dk-car-rev { animation: dkRev 10s infinite; }
html.sv-js .sx-art--dock .dk-door { animation: dkDoor 10s infinite; }
html.sv-js .sx-art--dock .dk-henry { animation: dkHenry 10s infinite; }
html.sv-js .sx-art--dock .dk-bell-ring { animation: dkRing 10s infinite; }
html.sv-js .sx-art--dock .dk-lane { animation: dkLane 10s infinite linear; }
html.sv-js .sx-art--dock .dk-item--1 { animation: dkItem1 10s infinite; }
html.sv-js .sx-art--dock .dk-item--2 { animation: dkItem2 10s infinite; }
html.sv-js .sx-art--dock .dk-item--3 { animation: dkItem3 10s infinite; }
html.sv-js .sx-art--dock .dk-item--4 { animation: dkItem4 10s infinite; }
html.sv-js .sx-art--dock .dk-done { animation: dkDone 10s infinite; }
html.sv-js .sx-art--dock .dk-timer-fill { animation: dkTimer 10s infinite linear; }
html.sv-js .sx-art--dock .dk-glow { animation: svBreathe 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.sx-art--dock.is-paused *, .sx-art--dock.is-paused { animation-play-state: paused !important; }

@keyframes dkCar {
  0% { transform: translateX(-340px); animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  18% { transform: translateX(0); }
  74% { transform: translateX(0); animation-timing-function: cubic-bezier(.6, 0, .8, .4); }
  92%, 100% { transform: translateX(-360px); }
}
@keyframes dkWheel {
  0% { transform: rotate(0deg); animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  18% { transform: rotate(560deg); }
  74% { transform: rotate(560deg); animation-timing-function: cubic-bezier(.6, 0, .8, .4); }
  92%, 100% { transform: rotate(-20deg); }
}
@keyframes dkRev { 0%, 17% { opacity: 1; } 20%, 100% { opacity: .2; } }
@keyframes dkDoor {
  0%, 19% { transform: translateY(0); }
  26%, 66% { transform: translateY(-152px); }
  73%, 100% { transform: translateY(0); }
}
@keyframes dkHenry {
  0%, 24% { transform: translateY(16px); }
  29% { transform: translateY(-4px); } 33% { transform: translateY(0); }
  45% { transform: translateY(-3px); } 50% { transform: translateY(0); }
  60%, 66% { transform: translateY(0); }
  71%, 100% { transform: translateY(16px); }
}
@keyframes dkRing {
  0%, 18% { transform: scale(1); opacity: 0; }
  19% { transform: scale(1); opacity: .9; }
  25% { transform: scale(2.8); opacity: 0; }
  26% { transform: scale(1); opacity: .8; }
  32%, 100% { transform: scale(2.8); opacity: 0; }
}
@keyframes dkLane { 0% { stroke-dashoffset: 0; } 18%, 74% { stroke-dashoffset: -64; } 92%, 100% { stroke-dashoffset: 0; } }
@keyframes dkItem1 {
  0%, 27% { opacity: 0; transform: translate(226px, 302px) scale(.3); }
  28% { opacity: 1; transform: translate(226px, 300px) scale(.9); animation-timing-function: ease-out; }
  31.5% { transform: translate(270px, 232px) scale(1) rotate(-14deg); animation-timing-function: ease-in; }
  35% { opacity: 1; transform: translate(318px, 316px) scale(.72) rotate(6deg); }
  36.5%, 100% { opacity: 0; transform: translate(318px, 332px) scale(.4); }
}
@keyframes dkItem2 {
  0%, 36% { opacity: 0; transform: translate(226px, 302px) scale(.3); }
  37% { opacity: 1; transform: translate(226px, 300px) scale(.9); animation-timing-function: ease-out; }
  40.5% { transform: translate(272px, 226px) scale(1) rotate(12deg); animation-timing-function: ease-in; }
  44% { opacity: 1; transform: translate(320px, 316px) scale(.72) rotate(-4deg); }
  45.5%, 100% { opacity: 0; transform: translate(320px, 332px) scale(.4); }
}
@keyframes dkItem3 {
  0%, 45% { opacity: 0; transform: translate(226px, 302px) scale(.3); }
  46% { opacity: 1; transform: translate(226px, 300px) scale(.9); animation-timing-function: ease-out; }
  49.5% { transform: translate(266px, 236px) scale(1) rotate(-18deg); animation-timing-function: ease-in; }
  53% { opacity: 1; transform: translate(316px, 316px) scale(.72) rotate(10deg); }
  54.5%, 100% { opacity: 0; transform: translate(316px, 332px) scale(.4); }
}
@keyframes dkItem4 {
  0%, 54% { opacity: 0; transform: translate(226px, 302px) scale(.3); }
  55% { opacity: 1; transform: translate(226px, 300px) scale(.9); animation-timing-function: ease-out; }
  58.5% { transform: translate(274px, 228px) scale(1) rotate(10deg); animation-timing-function: ease-in; }
  62% { opacity: 1; transform: translate(322px, 316px) scale(.72) rotate(-6deg); }
  63.5%, 100% { opacity: 0; transform: translate(322px, 332px) scale(.4); }
}
@keyframes dkDone {
  0%, 70% { opacity: 0; transform: scale(.5) rotate(-8deg); }
  73% { opacity: 1; transform: scale(1.12) rotate(-8deg); }
  76%, 89% { opacity: 1; transform: scale(1) rotate(-8deg); }
  93%, 100% { opacity: 0; transform: scale(.9) rotate(-8deg); }
}
@keyframes dkTimer { 0% { stroke-dashoffset: 113.1; } 72%, 100% { stroke-dashoffset: 0; } }

/* ─── Intro: copy + photo stack ────────────────────────────────────────── */
.dk-intro { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.dk-intro .sx-prose { margin-top: 26px; }
.dk-photos { position: relative; min-height: clamp(360px, 38vw, 520px); }
html body.eco-chromed main.sv .dk-photo { position: absolute; margin: 0; padding: 10px 10px 0; border-radius: 22px; background: #fff; box-shadow: 0 40px 70px -36px rgba(7, 19, 11, .55); transition: transform .9s var(--ease), opacity .9s var(--ease), box-shadow .5s; }
html body.eco-chromed main.sv .dk-photo img { display: block; width: 100%; height: auto; border-radius: 14px; }
.dk-photo figcaption { padding: 10px 6px 12px; font: 700 13.5px/1.35 var(--body); color: #26352b; }
/* eco-chrome's dark rule makes text inherit — the photo card stays white, so its caption stays dark */
html[data-theme="dark"] body.eco-chromed main.sv .dk-photo figcaption { color: #26352b !important; }
.dk-photo--a { left: 0; top: 0; width: 74%; z-index: 1; transform: rotate(-3.5deg); }
.dk-photo--b { right: 0; bottom: 0; width: 46%; z-index: 2; padding-bottom: 10px !important; transform: rotate(5deg); }
.dk-photo:hover { transform: rotate(0) translateY(-8px) scale(1.02) !important; z-index: 3; box-shadow: 0 50px 80px -36px rgba(7, 19, 11, .6); }
html.sv-js .dk-photos.sv-rv .dk-photo--a { opacity: 0; transform: rotate(-14deg) translate(-40px, 40px); }
html.sv-js .dk-photos.sv-rv .dk-photo--b { opacity: 0; transform: rotate(16deg) translate(40px, 50px); transition-delay: .15s; }
html.sv-js .dk-photos.sv-rv.is-in .dk-photo--a { opacity: 1; transform: rotate(-3.5deg); }
html.sv-js .dk-photos.sv-rv.is-in .dk-photo--b { opacity: 1; transform: rotate(5deg); }
.dk-badge { position: absolute; z-index: 4; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px; border-radius: 18px; text-decoration: none !important; box-shadow: 0 24px 40px -22px rgba(7, 19, 11, .6); }
.dk-badge b { font: 900 30px/1 var(--display); letter-spacing: -.04em; }
.dk-badge span { display: flex; flex-direction: column; font: 700 12.5px/1.3 var(--body); }
.dk-badge--rate { left: -14px; bottom: 16%; background: var(--forest); color: #fff !important; }
.dk-badge--rate b { color: var(--lime); }
.dk-badge--rate i { font-style: normal; color: #ffc53d; letter-spacing: .08em; }
.dk-badge--since { right: 4%; top: -4%; background: var(--lime); color: var(--forest); }
html.sv-js .dk-badge { animation: svFloat 6s ease-in-out infinite; }
html.sv-js .dk-badge--since { animation-delay: 1.4s; }

/* ─── Steps: the car that rides the timeline ───────────────────────────── */
.dk-steps { margin-top: 12px; }
.dk-steps-car { position: absolute; z-index: 3; top: -34px; left: calc(100% / 8 + 75% * var(--p, 0)); width: 58px; transform: translateX(-50%); pointer-events: none; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .45)); }
.dk-steps-car svg { display: block; width: 100%; height: auto; }
.dk-sc-body { fill: var(--lime); }
.dk-sc-win { fill: #0b2a15; }
.dk-sc-tire { fill: #07130b; stroke: #b9f24a; stroke-width: 2; }
.dk-steps-foot { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: 34px !important; }
.dk-steps-foot span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); color: #fff; font: 700 14px/1 var(--body); }
.dk-steps-foot svg { width: 17px; height: 17px; color: var(--lime); }

/* ─── Checker ──────────────────────────────────────────────────────────── */
.dk-check { display: grid; gap: 16px; padding: clamp(20px, 3vw, 34px); border-radius: 32px; background: var(--forest); color: #fff; margin-bottom: clamp(28px, 4vw, 44px);
  background-image: radial-gradient(70% 90% at 100% 0%, rgba(15, 162, 74, .38), transparent 70%); box-shadow: 0 50px 90px -60px rgba(7, 19, 11, .7); }
[data-theme="dark"] .dk-check { background-color: #0b2615; border: 1px solid rgba(185, 242, 74, .18); }
.dk-q { position: relative; display: block; }
.dk-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dk-q-ic { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); color: var(--forest); pointer-events: none; }
.dk-q-ic svg { width: 24px; height: 24px; display: block; }
html body.eco-chromed main.sv .dk-q input { width: 100%; height: 66px; padding: 0 22px 0 60px; border-radius: 999px; border: 3px solid transparent; background: #fff; color: #07130b; font: 700 clamp(17px, 1.8vw, 21px)/1 var(--body); box-shadow: none; outline: none; transition: border-color .2s, box-shadow .2s; -webkit-appearance: none; appearance: none; }
html body.eco-chromed main.sv .dk-q input::placeholder { color: #5b6b60; opacity: 1; }
html body.eco-chromed main.sv .dk-q input:focus { border-color: var(--lime); box-shadow: 0 0 0 6px rgba(185, 242, 74, .25); }
.dk-sugg { display: flex; flex-wrap: wrap; gap: 8px; }
html body.eco-chromed main.sv .dk-sugg button { padding: 9px 15px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .07); color: #fff; font: 700 14px/1 var(--body); cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .2s var(--ease); }
html body.eco-chromed main.sv .dk-sugg button:hover, html body.eco-chromed main.sv .dk-sugg button:focus-visible { background: var(--lime); border-color: var(--lime); color: var(--forest); transform: translateY(-2px); }
.dk-verdict { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; padding: 18px 20px; border-radius: 22px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); transition: background .3s, border-color .3s; }
.dk-v-ic { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 18px; background: rgba(255, 255, 255, .1); color: #fff; transition: background .3s, color .3s; }
.dk-v-ic svg { width: 28px; height: 28px; }
.dk-v-h { font: 800 clamp(19px, 1.8vw, 23px)/1.2 var(--display); letter-spacing: -.02em; color: #fff; }
.dk-v-p { margin-top: 5px !important; font-size: 15.5px; line-height: 1.55; color: rgba(255, 255, 255, .78); }
.dk-v-a { display: inline-flex; gap: 6px; margin-top: 8px; color: var(--lime) !important; font: 800 14.5px/1.2 var(--body); text-decoration: none !important; }
.dk-v-a:hover { text-decoration: underline !important; }
.dk-v-a[hidden] { display: none; }
.dk-verdict[data-state="yes"], .dk-verdict[data-state="mon"] { background: rgba(185, 242, 74, .12); border-color: rgba(185, 242, 74, .45); }
.dk-verdict[data-state="yes"] .dk-v-ic, .dk-verdict[data-state="mon"] .dk-v-ic { background: var(--lime); color: var(--forest); }
.dk-verdict[data-state="tv"] { background: rgba(255, 197, 61, .12); border-color: rgba(255, 197, 61, .5); }
.dk-verdict[data-state="tv"] .dk-v-ic { background: #ffc53d; color: var(--forest); }
.dk-verdict[data-state="no"] { background: rgba(251, 113, 99, .12); border-color: rgba(251, 113, 99, .5); }
.dk-verdict[data-state="no"] .dk-v-ic { background: #fb7163; color: #fff; }
.dk-verdict[data-state="maybe"] { background: rgba(120, 190, 255, .1); border-color: rgba(120, 190, 255, .45); }
.dk-verdict[data-state="maybe"] .dk-v-ic { background: #78beff; color: var(--forest); }
html.sv-js .dk-verdict.is-pop .dk-v-ic { animation: dkPop .5s var(--ease); }
html.sv-js .dk-verdict.is-pop .dk-v-h { animation: svFade .45s var(--ease); }
@keyframes dkPop { 0% { transform: scale(.6) rotate(-12deg); } 60% { transform: scale(1.12) rotate(4deg); } 100% { transform: scale(1) rotate(0); } }

/* ─── What-you-can-bring tiles ─────────────────────────────────────────── */
.dk-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.dk-cat { padding-top: 26px; }
.dk-cat .sv-tile-ic { margin-bottom: 18px; }
.dk-cat-price { position: absolute; right: 18px; top: 22px; padding: 6px 11px; border-radius: 999px; background: var(--tint); color: var(--green-dk); font: 800 13px/1 var(--display); letter-spacing: .02em; }
[data-theme="dark"] .dk-cat-price { background: rgba(185, 242, 74, .12); color: var(--lime); }
.dk-cat p { font-size: 15px; }
.dk-cat--tv { background: var(--lime); color: var(--forest); border-color: transparent; }
.dk-cat--tv p { color: rgba(5, 32, 13, .84); }
.dk-cat--tv .sv-tile-ic, .dk-cat--tv:hover .sv-tile-ic { background: var(--forest); color: var(--lime); }
.dk-cat--tv .dk-cat-price { background: var(--forest); color: var(--lime); }
.dk-cat--tv::before { background: radial-gradient(260px circle at var(--mx) var(--my), rgba(255, 255, 255, .5), transparent 70%); }
[data-theme="dark"] .dk-cat--tv, [data-theme="dark"] .dk-cat--tv h3 { color: var(--forest) !important; }
html[data-theme="dark"] body.eco-chromed main.sv .dk-cat--tv p { color: rgba(5, 32, 13, .84) !important; }

/* ─── Calculator: a touch more contrast for the small labels on the green gradient ─ */
.sx--dropoff .sx-calc-k { color: rgba(255, 255, 255, .82); }
.sx--dropoff .sx-calc-lines { color: rgba(255, 255, 255, .86); }
.sx--dropoff .sx-calc-fine { color: rgba(255, 255, 255, .8); }

/* ─── Why free: orbiting materials ─────────────────────────────────────── */
.dk-why { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.dk-why .sx-prose { margin-top: 26px; color: rgba(255, 255, 255, .8); }
.dk-why .sx-prose strong { color: #fff; }
.dk-loop { position: relative; width: min(100%, 460px); aspect-ratio: 1; justify-self: center; container-type: inline-size; }
.dk-loop-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.dk-loop-ring circle { fill: none; stroke: rgba(185, 242, 74, .4); stroke-width: 1.5; stroke-dasharray: 4 10; }
.dk-loop-ring .dk-loop-in { stroke: rgba(255, 255, 255, .14); stroke-dasharray: 1 8; }
.dk-loop-core { position: absolute; left: 50%; top: 50%; width: 44%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 8%;
  background: radial-gradient(circle at 35% 30%, #d4ff7a, #8fd43b 70%); color: var(--forest); box-shadow: 0 0 0 10px rgba(185, 242, 74, .12), 0 30px 60px -20px rgba(0, 0, 0, .6); }
.dk-loop-core span svg { width: clamp(28px, 9cqw, 42px); height: auto; }
.dk-loop-core b { margin-top: 6px; font: 900 clamp(14px, 4.4cqw, 20px)/1.1 var(--display); letter-spacing: -.02em; }
.dk-loop-core small { margin-top: 4px; font: 700 clamp(10px, 2.8cqw, 13px)/1.2 var(--body); opacity: .75; }
.dk-loop-orbit { position: absolute; inset: 0; }
.dk-mat { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--a)) translateY(-37.5cqw) rotate(calc(var(--a) * -1)); }
.dk-mat i { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: 999px; background: rgba(7, 19, 11, .82); border: 1px solid rgba(255, 255, 255, .16); color: #fff; font: 700 14px/1 var(--body); font-style: normal; white-space: nowrap; transform: translate(-50%, -50%); box-shadow: 0 14px 26px -14px rgba(0, 0, 0, .7); }
.dk-mat i::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.dk-mat--cu { --c: #d9844a; } .dk-mat--al { --c: #c6d0d6; } .dk-mat--au { --c: #f0c43f; } .dk-mat--pl { --c: #6cb8ff; } .dk-mat--gl { --c: #7fe6d5; } .dk-mat--fe { --c: #9aa8b0; }
.dk-loop-note { position: absolute; left: 50%; bottom: -4%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 999px; background: var(--lime); color: var(--forest); font: 800 13px/1.2 var(--body); white-space: nowrap; }
.dk-loop-note svg { width: 16px; height: 16px; }
html.sv-js .dk-loop-orbit { animation: svSpin 46s linear infinite; }
html.sv-js .dk-mat i { animation: dkCounter 46s linear infinite; }
html.sv-js .dk-loop-ring circle:first-child { animation: svSpin 80s linear infinite reverse; transform-box: fill-box; transform-origin: center; }
html.sv-js .dk-loop-core { animation: dkCore 4.5s ease-in-out infinite; }
@keyframes dkCounter { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(-360deg); } }
@keyframes dkCore { 0%, 100% { box-shadow: 0 0 0 10px rgba(185, 242, 74, .12), 0 30px 60px -20px rgba(0, 0, 0, .6); } 50% { box-shadow: 0 0 0 22px rgba(185, 242, 74, .06), 0 30px 60px -20px rgba(0, 0, 0, .6); } }

/* ─── Paths (homes / businesses) ───────────────────────────────────────── */
.dk-paths-sec .sv-path h3 { margin-bottom: 4px; }
.dk-paths-sec .sv-path { min-height: 0; }
.dk-paths-sec .sv-checks { margin-top: 22px !important; }

/* ─── Visit: live status + hours ───────────────────────────────────────── */
.dk-open .sv-ping { background: var(--lime); }
.dk-open.is-closed .sv-ping, .dk-open.is-closed .sv-ping::after { background: #ffc53d; }
.dk-open--card { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px !important; padding: 9px 15px; border-radius: 999px; background: var(--tint); color: var(--green-dk); font: 800 14.5px/1.2 var(--body); }
.dk-open--card .sv-ping { position: relative; width: 9px; height: 9px; border-radius: 50%; }
.dk-open--card.is-closed { background: #fff4d6; color: #7a4e00; }
[data-theme="dark"] .dk-open--card { background: rgba(185, 242, 74, .12); color: var(--lime); }
[data-theme="dark"] .dk-open--card.is-closed { background: rgba(255, 197, 61, .14); color: #ffd877; }
.dk-open--card[hidden] { display: none; }
/* site-v3.css styles every table in main with !important — this small hours list opts out */
html body.eco-chromed main.sv table.dk-hours { width: 100% !important; max-width: 320px; margin-top: 6px !important; border: 0 !important; border-radius: 0 !important; border-collapse: collapse !important; box-shadow: none !important; background: none !important; overflow: visible !important; font-size: 14.5px !important; }
html body.eco-chromed main.sv table.dk-hours tr { background: none !important; }
html body.eco-chromed main.sv table.dk-hours :is(th, td) { padding: 4px 8px !important; border: 0 !important; background: none !important; text-align: left !important; font: 600 14.5px/1.45 var(--body) !important; color: var(--fg-2) !important; letter-spacing: 0 !important; text-transform: none !important; }
html body.eco-chromed main.sv table.dk-hours td { text-align: right !important; white-space: nowrap; }
html body.eco-chromed main.sv table.dk-hours tr.is-today :is(th, td) { background: var(--lime) !important; color: var(--forest) !important; font-weight: 800 !important; }
html body.eco-chromed main.sv table.dk-hours tr.is-today th { border-radius: 8px 0 0 8px !important; }
html body.eco-chromed main.sv table.dk-hours tr.is-today td { border-radius: 0 8px 8px 0 !important; }
html body.eco-chromed main.sv table.dk-hours tr:last-child td { color: var(--muted) !important; }
.sx-visit-list small { display: block; margin-top: 2px; font-size: 13.5px; color: var(--muted); }
.dk-map-car { display: none; }
html.sv-js .dk-map-car { display: inline; }
.dk-map-car rect { fill: #fff; stroke: var(--forest); stroke-width: 2; }
.dk-map-btn { position: absolute; right: 16px; top: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 10px 15px; border-radius: 999px; background: #fff; color: var(--forest) !important; font: 800 13.5px/1 var(--body); text-decoration: none !important; box-shadow: 0 14px 26px -14px rgba(0, 0, 0, .6); transition: transform .25s var(--ease), background .2s; }
.dk-map-btn:hover { transform: translateY(-2px); background: var(--lime); }
.sx-visit-map .dk-map-btn svg { position: static; inset: auto; width: 16px; height: 16px; }
.vm-open.is-closed i { background: #ffc53d; box-shadow: 0 0 10px #ffc53d; }

/* ─── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .dk-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .dk-intro, .dk-why { grid-template-columns: 1fr; }
  .dk-photos { min-height: 0; aspect-ratio: 5 / 4; max-width: 560px; width: 100%; margin-inline: auto; }
  .dk-loop { margin-top: 10px; }
  .dk-steps-car { top: calc(var(--p, 0) * 100%); left: 22px; width: 44px; transform: translate(-50%, -50%) rotate(90deg); }
}
@media (max-width: 760px) {
  .sx-art--dock .sv-chip--1 { left: -2%; top: 2%; }
  .sx-art--dock .sv-chip--2 { display: none; }
  .sx-art--dock .sv-chip--3 { right: -2%; }
  .dk-done b { font-size: 21px; }
  .dk-timer svg { width: 32px; height: 32px; }
  .dk-mat i { font-size: 12.5px; padding: 7px 11px 7px 8px; }
  .dk-badge b { font-size: 24px; }
  .dk-badge--rate { left: 0; bottom: 0; }
}
@media (max-width: 560px) {
  .dk-cats { grid-template-columns: 1fr; }
  .dk-verdict { grid-template-columns: 1fr; }
  html body.eco-chromed main.sv .dk-q input { height: 58px; padding-left: 54px; }
  .dk-q-ic { left: 18px; }
  .dk-sugg button:nth-child(n+7) { display: none; }
  .dk-loop-note { white-space: normal; text-align: center; width: max-content; max-width: 92%; }
  .sx-art--dock .sv-chip { font-size: 12px; padding: 7px 11px 7px 7px; }
  .sx-art--dock .sv-chip i { width: 24px; height: 24px; }
}
@media (max-width: 440px) {
  .sx--dropoff .sx-visit { grid-template-columns: minmax(0, 1fr); }
  .sx--dropoff .sx-visit-copy { padding: 26px 20px; }
  .sx--dropoff .sx-visit-list li { gap: 12px; }
  .sx--dropoff .sx-visit-ic { width: 38px; height: 38px; }
  html body.eco-chromed main.sv table.dk-hours :is(th, td) { padding: 3px 5px !important; font-size: 13.5px !important; }
}