/* ==========================================================================
   svc-v3.css — the "Popular service pages" linked from services.html
   (pricing, pickups, bulk, product destruction, sell IT, data center, ITAD KC,
   trusted recycler, computer disposal, pro audio, on-site destruction).
   Hand-built 2026-09-29 on top of v3-kit.css: every page has its own animated
   hero scene (.sx-art--*) plus shared content components (.sx-*).
   Motion is gated on html.sv-js like the rest of the kit.
   ========================================================================== */

/* ─── Type ─────────────────────────────────────────────────────────────── */
html body.eco-chromed main.sv .sx-h1 { font-size: clamp(42px, 5.9vw, 86px) !important; }
html body.eco-chromed main.sv .sx-h1.sx-h1--long { font-size: clamp(38px, 4.9vw, 70px) !important; }
.sx-h1 .sv-hl { white-space: normal; }
html body.eco-chromed main.sv .sx-h2 { font-size: clamp(32px, 4.1vw, 58px) !important; }
html body.eco-chromed main.sv .sx-sub { font: 800 clamp(20px, 1.8vw, 24px)/1.2 var(--display) !important; letter-spacing: -.02em !important; margin: 38px 0 14px !important; color: var(--fg); }
.sx-head--c { text-align: center; }
.sx-head--c .sv-kicker { justify-content: center; }
.sx-head--c .sv-desc { margin-inline: auto; }
.sv-stat dd small { font-size: .42em; letter-spacing: -.01em; margin-left: .08em; }

/* ─── Prose / lists / notes ───────────────────────────────────────────── */
.sx-prose { max-width: 74ch; font-size: 17px; line-height: 1.75; color: var(--fg-2); }
.sx-prose > * + * { margin-top: 16px !important; }
.sx-prose strong, .sx-prose b { color: var(--fg); }
.sx-prose--lead { font-size: clamp(18px, 1.55vw, 21px); line-height: 1.65; max-width: 68ch; margin-bottom: clamp(28px, 4vw, 44px); }
.sx-after { margin-top: 30px; font-size: 16px; }
.sx-cols { max-width: none; columns: 2; column-gap: 56px; }
.sx-cols > p { break-inside: avoid; }
.sx-cols > * + * { margin-top: 0 !important; }
.sx-cols > p + p { margin-top: 16px !important; }
:is(.sx-prose, .sx-card, .sx-callout, .sx-list, .sx-vt-card, .sv-step, .sx-state, .sx-who, .sx-pt, .sx-seal, .sx-streams-foot, .sx-stream) a:not(.sv-btn) {
  color: var(--green-dk) !important; font-weight: 700; text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 3px; text-decoration-color: rgba(15, 162, 74, .35) !important; }
:is([data-theme="dark"] .sv, .sv-dark, .sx-who--dark, .sx-vs-card--good, .sx-pt--hi) :is(.sx-prose, .sx-card, .sx-callout, .sx-list, .sx-vt-card, .sv-step, .sx-state, .sx-who, .sx-pt, .sx-seal, .sx-streams-foot, .sx-stream) a:not(.sv-btn),
:is(.sx-who--dark, .sx-vs-card--good) a:not(.sv-btn) { color: var(--lime) !important; text-decoration-color: rgba(185, 242, 74, .4) !important; }
.sx-note { margin-top: 16px !important; font-size: 15px; line-height: 1.6; color: var(--muted); }
.sx-list { display: grid; gap: 12px; margin: 4px 0 !important; }
.sx-list li { position: relative; padding-left: 34px; font-size: 16.5px; line-height: 1.6; color: var(--fg-2); }
.sx-list li::before { content: ""; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/13px no-repeat; }
.sx-list li b { color: var(--fg); font-weight: 800; }
.sx-list--x li::before { background-color: #fbe3e1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c2413a' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='m7 7 10 10M17 7 7 17'/%3E%3C/svg%3E"); }
[data-theme="dark"] .sx-list--x li::before { background-color: rgba(251, 113, 99, .16); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fca5a5' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='m7 7 10 10M17 7 7 17'/%3E%3C/svg%3E"); }
.sx-list--ol { counter-reset: sxol; }
.sx-list--ol li { counter-increment: sxol; }
.sx-list--ol li::before { content: counter(sxol); background: var(--forest); color: var(--lime); display: grid; place-items: center; font: 900 12px/1 var(--display); }
.sv-dark .sx-list li, .sx-video-copy .sx-list li { color: rgba(255, 255, 255, .84); }
.sv-dark .sx-list li b { color: #fff; }
.sv-dark .sx-list li::before, .sx-vs-card--good .sx-list li::before, .sx-who--dark .sx-list li::before { background-color: var(--lime); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2305200d' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E"); }
.sv-dark .sx-prose { color: rgba(255, 255, 255, .8); }
.sv-dark .sx-prose :is(strong, b) { color: #fff; }
.sv-dark .sx-note { color: rgba(255, 255, 255, .6); }
html body.eco-chromed main.sv .sv-dark .sx-sub { color: #fff; }

/* ─── Section chrome ──────────────────────────────────────────────────── */
.sx-sec .sv-head { margin-bottom: clamp(32px, 4.4vw, 56px); }
.sx-story { align-items: start; }
.sx-story-copy { display: grid; gap: 22px; }
.sx-story-copy .sx-prose { max-width: none; font-size: clamp(17px, 1.3vw, 18.5px); }
.sx-dropcap > p:first-child::first-letter { float: left; font: 900 3.6em/.8 var(--display); margin: .08em .1em 0 0; color: var(--green); }
.sv-dark .sx-dropcap > p:first-child::first-letter { color: var(--lime); }
.sx-raw { margin-top: 24px; }
.sx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; }
.sx-textlink { font: 800 15.5px/1 var(--body); color: var(--green-dk) !important; text-decoration: underline !important; text-underline-offset: 4px; }
[data-theme="dark"] .sx-textlink { color: var(--lime) !important; }
.sx-faq-note .s26-tvpolicy { margin: 26px 0 0 !important; max-width: none !important; }

.sx-sec .sv-wrap > :is(.sx-prose, .sx-cards, .sx-table-wrap, .sx-stats, .sv-steps, .sx-raw, .sx-pts, .sx-pcs) + :is(.sx-prose, .sx-cards, .sx-table-wrap, .sx-stats, .sv-steps, .sx-raw, .sx-actions) { margin-top: 30px; }

/* ─── Card grids ──────────────────────────────────────────────────────── */
.sx-cards { display: grid; grid-template-columns: repeat(var(--c, 3), minmax(0, 1fr)); gap: 18px; }
.sx-card { display: flex; flex-direction: column; }
.sx-card .sv-h4 { padding-right: 36px; }
.sx-card > p, .sx-card > ul { margin-top: 10px !important; font-size: 15.5px; line-height: 1.62; color: var(--fg-2); }
.sx-card > ul { display: grid; gap: 6px; }
.sx-card > ul li { position: relative; padding-left: 18px; }
.sx-card > ul li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.sx-card-n { position: absolute; right: 22px; top: 22px; font: 900 14px/1 var(--display); letter-spacing: .06em; color: var(--muted); opacity: .55; }
.sx-price { margin-top: 8px !important; font: 900 28px/1 var(--display); letter-spacing: -.04em; color: var(--green); }
.sx-go { margin-top: auto; padding-top: 18px; font: 800 14.5px/1 var(--body); color: var(--green-dk); transition: letter-spacing .3s var(--ease); }
a.sx-card { color: inherit !important; text-decoration: none !important; }
a.sx-card:hover .sx-go { letter-spacing: .02em; }
[data-theme="dark"] .sx-go { color: var(--lime); }
.sv-dark .sx-card { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .1); color: #fff; }
.sv-dark .sx-card > :is(p, ul) { color: rgba(255, 255, 255, .76); }
.sv-dark .sx-card .sv-tile-ic { background: rgba(185, 242, 74, .12); color: var(--lime); }
.sv-dark .sx-card-n { color: rgba(255, 255, 255, .6); }
.sv-dark .sx-go { color: var(--lime); }
.sv-addons-sec .sx-card { background: var(--card); }

/* ─── Vertical timeline ───────────────────────────────────────────────── */
.sx-split-v { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(32px, 5vw, 84px); align-items: start; }
.sx-split-side { position: sticky; top: 120px; }
.sx-split-side .sv-desc { margin-top: 20px !important; }
.sx-vt { --p: 1; position: relative; display: grid; gap: 16px; }
html.sv-js .sx-vt { --p: 0; }
.sx-vt::before, .sx-vt::after { content: ""; position: absolute; left: 26px; top: 28px; bottom: 28px; width: 4px; border-radius: 4px; }
.sx-vt::before { background: var(--line); }
.sx-vt::after { background: linear-gradient(180deg, var(--green), var(--lime)); transform-origin: top; transform: scaleY(var(--p)); }
.sx-vt-step { position: relative; padding-left: 78px; }
.sx-vt-dot { position: absolute; left: 0; top: 22px; z-index: 1; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--card); border: 3px solid var(--line); color: var(--muted); font: 900 16px/1 var(--display); transition: background .4s, border-color .4s, color .4s, box-shadow .4s, transform .5s var(--ease); }
.sx-vt-step.is-lit .sx-vt-dot, html:not(.sv-js) .sx-vt-dot { background: var(--lime); border-color: var(--lime); color: var(--forest); box-shadow: 0 0 0 8px rgba(185, 242, 74, .22); transform: scale(1.04); }
.sx-vt-card { display: flex; gap: 18px; padding: 24px 26px; border-radius: 24px; background: var(--card); border: 1px solid var(--line); transition: border-color .4s, box-shadow .4s, transform .5s var(--ease); }
.sx-vt-step.is-lit .sx-vt-card { border-color: rgba(15, 162, 74, .35); box-shadow: 0 26px 50px -36px rgba(7, 19, 11, .45); }
.sx-vt-ic { flex: none; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 15px; background: var(--tint); color: var(--green-dk); transition: background .4s, color .4s, transform .5s var(--ease); }
.sx-vt-step.is-lit .sx-vt-ic { background: var(--forest); color: var(--lime); transform: rotate(-6deg); }
.sx-vt-ic svg { width: 24px; height: 24px; }
.sx-vt-card p { margin-top: 8px !important; font-size: 15.5px; line-height: 1.62; color: var(--fg-2); }
[data-theme="dark"] .sx-vt-ic { background: rgba(185, 242, 74, .1); color: var(--lime); }
.sv-dark .sx-vt::before { background: rgba(255, 255, 255, .12); }
.sv-dark .sx-vt-dot { background: #0c2a16; border-color: rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .6); }
.sv-dark .sx-vt-card { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .1); color: #fff; }
.sv-dark .sx-vt-card p { color: rgba(255, 255, 255, .76); }
.sv-dark .sx-vt-ic { background: rgba(185, 242, 74, .1); color: var(--lime); }
.sv-dark .sx-vt-step.is-lit .sx-vt-ic { background: var(--lime); color: var(--forest); }

/* horizontal steps: carried copy colours */
.sv-step p { color: var(--fg-2); }
.sv-dark .sv-step h3 { color: #fff; }

/* ─── Stats band ──────────────────────────────────────────────────────── */
.sx-stats { display: grid; grid-template-columns: repeat(var(--c, 4), minmax(0, 1fr)); gap: 14px; margin: 8px 0 30px; }
.sx-stat { padding: 24px 22px; border-radius: 24px; background: var(--forest); color: #fff; background-image: radial-gradient(80% 90% at 100% 0%, rgba(15, 162, 74, .45), transparent 70%); }
.sx-stat b { display: block; font: 900 clamp(34px, 3.8vw, 52px)/1 var(--display); letter-spacing: -.045em; color: var(--lime); font-variant-numeric: tabular-nums; }
.sx-stat > span { display: block; margin-top: 10px; font: 600 14.5px/1.35 var(--body); color: rgba(255, 255, 255, .78); }
[data-theme="dark"] .sx-stat { background-color: #0e2a18; border: 1px solid rgba(185, 242, 74, .16); }

/* ─── Tables ──────────────────────────────────────────────────────────── */
.sx-table-wrap { overflow-x: auto; margin: 6px 0 24px; border-radius: 24px; border: 1px solid var(--line); background: var(--card); box-shadow: 0 40px 80px -60px rgba(7, 19, 11, .5); -webkit-overflow-scrolling: touch; }
.sx-table { width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 0; font-size: 15px; }
.sx-table th { padding: 18px; text-align: left; vertical-align: bottom; font: 800 12.5px/1.3 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--bg-2); border-bottom: 1px solid var(--line); }
.sx-table td { padding: 15px 18px; border-bottom: 1px solid var(--line); color: var(--fg-2); line-height: 1.45; transition: background .2s; }
.sx-table tr:last-child td { border-bottom: 0; }
.sx-table td:first-child { font-weight: 700; color: var(--fg); }
.sx-table tbody tr:hover td { background: rgba(15, 162, 74, .05); }
.sx-table .is-us { position: relative; background: rgba(185, 242, 74, .18); color: var(--forest); font-weight: 800; }
.sx-table th.is-us { background: var(--forest); color: var(--lime); }
.sx-table tbody tr:hover td.is-us { background: rgba(185, 242, 74, .3); }
[data-theme="dark"] .sx-table .is-us { background: rgba(185, 242, 74, .1); color: var(--lime); }
[data-theme="dark"] .sx-table th.is-us { background: var(--lime); color: var(--forest); }

/* ─── Callouts / bands ────────────────────────────────────────────────── */
.sx-callout { display: flex; gap: 18px; margin-top: 26px; padding: 26px 28px; border-radius: 26px; background: var(--bg-2); border: 1px solid var(--line); }
.sv-addons-sec .sx-callout { background: var(--card); }
.sx-callout-ic { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--forest); color: var(--lime); }
.sx-callout-ic svg { width: 24px; height: 24px; }
.sx-callout .sv-h4 { margin-bottom: 8px !important; }
.sx-callout p { font-size: 16px; line-height: 1.65; color: var(--fg-2); }
.sx-callout p + p, .sx-callout p + .sx-list, .sx-callout .sx-list + p { margin-top: 12px !important; }
.sx-callout--dark, .sv-dark .sx-callout { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); color: #fff; }
.sv-dark .sx-callout p { color: rgba(255, 255, 255, .78); }
.sv-dark .sx-callout-ic { background: var(--lime); color: var(--forest); }
.sx-band-sec { padding: clamp(40px, 6vw, 84px) 0; background: var(--bg); }
.sx-band { display: grid; grid-template-columns: minmax(0, 1.2fr) auto; gap: 24px 48px; align-items: center; padding: clamp(28px, 4vw, 56px); border-radius: 34px; background: var(--forest); color: #fff;
  background-image: radial-gradient(60% 90% at 100% 0%, rgba(15, 162, 74, .5), transparent 70%); }
html body.eco-chromed main.sv .sx-band .sx-h2 { font-size: clamp(28px, 3.3vw, 46px) !important; }
.sx-band .sv-desc { margin-top: 14px !important; color: rgba(255, 255, 255, .76); }
.sx-band .sx-actions { margin: 0; justify-content: flex-end; }

/* ─── Split helpers ───────────────────────────────────────────────────── */
.sx-qual { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(32px, 5vw, 76px); align-items: center; }
.sx-qual-copy .sv-desc { margin-top: 18px !important; max-width: 52ch; }
.sx-henry { margin: 26px 0 0; max-width: 440px; border-radius: 26px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 30px 60px -40px rgba(7, 19, 11, .5); }
.sx-henry img { display: block; width: 100%; height: auto; }

/* ─── Gaylord equivalence ─────────────────────────────────────────────── */
.sx-gay { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 24px; align-items: center; }
.sx-qual .sx-gay { grid-template-columns: 1fr; justify-items: start; gap: 18px; }
.sx-qual .sx-gay-eq { display: none; }
.sx-gay-vis { text-align: center; }
.sx-gay-boxes { display: flex; align-items: flex-end; gap: 10px; }
.sx-gbox { position: relative; width: 84px; height: 74px; border-radius: 6px 6px 14px 14px; overflow: hidden;
  background: linear-gradient(180deg, #d0a263, #b3813f); box-shadow: inset 0 4px 0 rgba(255, 255, 255, .28), 0 18px 28px -16px rgba(0, 0, 0, .55);
  background-image: repeating-linear-gradient(90deg, rgba(0, 0, 0, .06) 0 2px, transparent 2px 12px), linear-gradient(180deg, #d0a263, #b3813f); }
.sx-gbox span { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; font: 900 18px/1 var(--display); color: #3a2610; }
.sx-gbox-fill { position: absolute; left: 10%; right: 10%; top: 0; height: 16px; border-radius: 0 0 6px 6px; background: rgba(58, 38, 16, .35); }
.sx-gbox:nth-child(3)::after { content: ""; position: absolute; right: 6px; top: 6px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--forest) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b9f24a' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/13px no-repeat; }
html.sv-js .sx-gay-vis.sv-rv .sx-gbox { opacity: 0; transform: translateY(-60px) rotate(-6deg); transition: opacity .5s, transform .8s cubic-bezier(.3, 1.5, .5, 1); transition-delay: calc(.25s + var(--i) * .22s); }
html.sv-js .sx-gay-vis.sv-rv.is-in .sx-gbox { opacity: 1; transform: none; }
.sx-gay-cap { margin-top: 12px !important; font: 800 12.5px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.sx-gay-eq { font: 900 60px/1 var(--display); color: var(--green); }
.sx-gay-list { display: grid; gap: 10px; width: 100%; }
.sx-gay-list li { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px 16px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); }
.sv-addons-sec .sx-gay-list li { background: var(--card); }
.sx-gay-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--tint); color: var(--green-dk); }
.sx-gay-ic svg { width: 20px; height: 20px; }
[data-theme="dark"] .sx-gay-ic { background: rgba(185, 242, 74, .1); color: var(--lime); }
.sx-gay-list b { font: 900 24px/1 var(--display); letter-spacing: -.03em; color: var(--green-dk); white-space: nowrap; min-width: 3.2ch; }
[data-theme="dark"] .sx-gay-list b { color: var(--lime); }
.sx-gay-list li > span:last-child { font: 600 15.5px/1.35 var(--body); color: var(--fg-2); }

/* ─── Pricing tiles ───────────────────────────────────────────────────── */
.sx-pts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.sx-pt { position: relative; overflow: hidden; padding: 24px 22px 22px; border-radius: 24px; background: var(--card); border: 1px solid var(--line); transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s, opacity .9s var(--ease); }
html.sv-js .sx-pt.sv-rv { transition: opacity .9s var(--ease) var(--d, 0s), transform .9s var(--ease) var(--d, 0s), box-shadow .45s, border-color .3s; }
.sx-pt:hover { transform: translateY(-6px) !important; border-color: rgba(15, 162, 74, .45); box-shadow: 0 28px 50px -30px rgba(7, 19, 11, .4); }
.sx-pt-ic { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 18px; border-radius: 13px; background: var(--tint); color: var(--green-dk); }
.sx-pt-ic svg { width: 22px; height: 22px; }
html body.eco-chromed main.sv .sx-pt .sv-h4 { font-size: 17px !important; }
.sx-pt-big { margin-top: 12px !important; font: 900 46px/1 var(--display); letter-spacing: -.05em; color: var(--green); }
.sx-pt-lbl { margin-top: 6px !important; font: 800 11.5px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--green-dk); }
.sx-pt-note { margin-top: 12px !important; font-size: 14px; line-height: 1.5; color: var(--fg-2); }
.sx-pt--hi { background: var(--forest); border-color: transparent; color: #fff; background-image: radial-gradient(80% 80% at 100% 0%, rgba(15, 162, 74, .5), transparent 70%); }
.sx-pt--hi .sx-pt-big { font-size: 38px; color: var(--lime); }
.sx-pt--hi .sx-pt-lbl { color: var(--lime); }
.sx-pt--hi .sx-pt-note { color: rgba(255, 255, 255, .78); }
.sx-pt--hi .sx-pt-ic { background: rgba(185, 242, 74, .14); color: var(--lime); }
[data-theme="dark"] .sx-pt-ic { background: rgba(185, 242, 74, .1); color: var(--lime); }
[data-theme="dark"] .sx-pt-big { color: var(--lime); }
[data-theme="dark"] .sx-pt-lbl { color: #c8f58a; }

/* ─── Drop-off calculator ─────────────────────────────────────────────── */
.sx-calc { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr); gap: 20px; align-items: stretch; }
.sx-calc-rows { display: grid; gap: 12px; align-content: start; }
.sx-calc-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 18px 20px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); transition: border-color .3s, box-shadow .3s, transform .3s var(--ease); }
.sx-calc-row.is-on { border-color: rgba(15, 162, 74, .45); box-shadow: 0 20px 40px -32px rgba(7, 19, 11, .5); }
.sx-calc-row.is-paid { border-color: #ffc53d; box-shadow: 0 0 0 4px rgba(255, 197, 61, .18); }
.sx-calc-ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--tint); color: var(--green-dk); }
.sx-calc-ic svg { width: 24px; height: 24px; }
[data-theme="dark"] .sx-calc-ic { background: rgba(185, 242, 74, .1); color: var(--lime); }
.sx-calc-lbl b { display: block; font: 800 18px/1.2 var(--display); color: var(--fg); }
.sx-calc-lbl small { display: block; margin-top: 4px; font: 600 13.5px/1.35 var(--body); color: var(--muted); }
.sx-stepper { display: flex; align-items: center; gap: 4px; padding: 5px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line); }
html body.eco-chromed main.sv .sx-stepper button { width: 42px; height: 42px; min-height: 0; padding: 0; border: 0 !important; border-radius: 50% !important; background: var(--card) !important; color: var(--fg) !important; font: 800 22px/1 var(--body) !important; cursor: pointer; box-shadow: 0 2px 8px rgba(7, 19, 11, .12) !important; transition: background .2s, color .2s, transform .2s var(--ease); }
html body.eco-chromed main.sv .sx-stepper button:hover { background: var(--lime) !important; color: var(--forest) !important; transform: scale(1.06); }
html body.eco-chromed main.sv .sx-stepper button:active { transform: scale(.94); }
.sx-stepper output { min-width: 38px; text-align: center; font: 900 21px/1 var(--display); font-variant-numeric: tabular-nums; color: var(--fg); }
.sx-calc-tot { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; padding: clamp(26px, 3vw, 38px); border-radius: 30px; background: var(--forest); color: #fff;
  background-image: radial-gradient(70% 60% at 100% 0%, rgba(15, 162, 74, .55), transparent 70%); }
[data-theme="dark"] .sx-calc-tot { background-color: #0b2615; border: 1px solid rgba(185, 242, 74, .18); }
.sx-calc-k { font: 700 12.5px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .66); }
.sx-calc-sum { display: flex; align-items: flex-start; gap: 4px; margin-top: 12px !important; font: 900 clamp(76px, 9vw, 124px)/.86 var(--display); letter-spacing: -.06em; color: var(--lime); font-variant-numeric: tabular-nums; }
.sx-calc-sum span { font-size: .42em; margin-top: .14em; }
.sx-calc-sum.is-bump b { display: inline-block; animation: sxBump .45s var(--ease); }
@keyframes sxBump { 40% { transform: scale(1.12); } }
.sx-calc-why { margin-top: 14px !important; font: 700 16.5px/1.4 var(--body); color: #fff; }
.sx-calc-lines { width: 100%; display: grid; gap: 7px; margin: 18px 0 24px !important; font: 600 14px/1.3 ui-monospace, 'Cascadia Code', Consolas, monospace; color: rgba(255, 255, 255, .72); }
.sx-calc-lines li { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 7px; border-bottom: 1px dashed rgba(255, 255, 255, .16); }
.sx-calc-lines li b { color: var(--lime); }
.sx-calc-lines li.is-paid b { color: #ffc53d; }
.sx-calc-fine { margin-top: 16px !important; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .6); }

/* ─── Why free: revenue streams ───────────────────────────────────────── */
.sx-streams { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 84px); align-items: start; }
.sx-streams-side { position: sticky; top: 120px; }
.sx-quote { margin: 26px 0 0; padding: 22px 24px; border-left: 4px solid var(--lime); border-radius: 0 20px 20px 0; background: rgba(255, 255, 255, .05); font: 500 17.5px/1.65 var(--body); color: rgba(255, 255, 255, .85); }
.sx-source { display: flex; align-items: center; gap: 16px; padding: 20px 22px; border-radius: 24px; background: var(--lime); color: var(--forest); box-shadow: 0 24px 50px -30px rgba(185, 242, 74, .7); }
.sx-source > span { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--forest); color: var(--lime); }
.sx-source svg { width: 24px; height: 24px; }
.sx-source b { display: block; font: 900 20px/1.1 var(--display); }
.sx-source small { font: 700 13.5px/1.3 var(--body); opacity: .75; }
.sx-stream-list { position: relative; display: grid; gap: 16px; margin-top: 16px !important; padding-left: 38px !important; }
.sx-stream-list::before { content: ""; position: absolute; left: 14px; top: -16px; bottom: 36px; width: 3px; border-radius: 3px;
  background: repeating-linear-gradient(180deg, var(--lime) 0 8px, transparent 8px 16px); opacity: .6; }
html.sv-js .sx-stream-list::before { animation: sxFlow 1s linear infinite; }
@keyframes sxFlow { to { background-position: 0 16px; } }
.sx-stream { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; padding: 22px 24px; border-radius: 24px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); transition: border-color .3s, background .3s; }
.sx-stream:hover { border-color: rgba(185, 242, 74, .4); background: rgba(255, 255, 255, .08); }
.sx-stream::before { content: ""; position: absolute; left: -31px; top: 34px; width: 14px; height: 14px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 6px rgba(185, 242, 74, .18); }
.sx-stream-n { position: absolute; right: 20px; top: 16px; font: 900 34px/1 var(--display); color: transparent; -webkit-text-stroke: 1px rgba(185, 242, 74, .45); }
.sx-stream-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: rgba(185, 242, 74, .12); color: var(--lime); }
.sx-stream-ic svg { width: 22px; height: 22px; }
html body.eco-chromed main.sv .sx-stream h3 { color: #fff; padding-right: 44px; }
.sx-stream p { margin-top: 8px !important; font-size: 15.5px; line-height: 1.62; color: rgba(255, 255, 255, .76); }
.sx-streams-foot { margin-top: clamp(36px, 5vw, 56px); max-width: 82ch; font-size: 18px; line-height: 1.7; color: rgba(255, 255, 255, .84); }

/* ─── Service area (MO | KS) ──────────────────────────────────────────── */
.sx-states { display: grid; grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr); gap: 0; align-items: stretch; }
.sx-state { position: relative; overflow: hidden; padding: clamp(26px, 3.2vw, 40px); border-radius: 30px; background: var(--card); border: 1px solid var(--line); }
.sx-state-ab { position: absolute; right: -8px; bottom: -40px; font: 900 170px/1 var(--display); letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1.5px rgba(15, 162, 74, .22); pointer-events: none; }
.sx-counties { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 16px !important; }
.sx-counties span { padding: 9px 15px; border-radius: 999px; background: var(--forest); color: var(--lime); font: 700 14px/1 var(--body); }
[data-theme="dark"] .sx-counties span { background: var(--lime); color: var(--forest); }
.sx-state p { position: relative; font-size: 16px; line-height: 1.65; color: var(--fg-2); max-width: 46ch; }
.sx-stateline { position: relative; }
.sx-stateline > i { position: absolute; left: 50%; top: 8%; bottom: 8%; border-left: 3px dashed var(--line); }
.sx-stateline-truck { position: absolute; left: 50%; top: 30%; display: grid; place-items: center; width: 50px; height: 50px; margin-left: -25px; border-radius: 50%; background: var(--lime); color: var(--forest); box-shadow: 0 0 0 8px var(--bg-2); }
.sx-stateline-truck svg { width: 24px; height: 24px; }
html.sv-js .sx-stateline-truck { animation: sxLine 6s ease-in-out infinite; }
@keyframes sxLine { 0%, 100% { top: 14%; } 50% { top: 62%; } }
.sx-stateline em { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); writing-mode: vertical-rl; font: 800 11px/1 var(--body); font-style: normal; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); background: var(--bg-2); padding: 6px 0; }
.sx-sec:not(.sv-addons-sec) .sx-stateline-truck { box-shadow: 0 0 0 8px var(--bg); }
.sx-sec:not(.sv-addons-sec) .sx-stateline em { background: var(--bg); }

/* ─── Product chips / brands ──────────────────────────────────────────── */
.sx-pcs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.sx-pc { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 22px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); font: 800 17px/1.25 var(--display); letter-spacing: -.01em; transition: background .3s, color .3s, transform .45s var(--ease), border-color .3s, opacity .9s var(--ease); }
html.sv-js .sx-pc.sv-rv { transition: opacity .8s var(--ease) var(--d, 0s), transform .8s var(--ease) var(--d, 0s), background .3s, color .3s, border-color .3s; }
.sx-pc > span { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: var(--tint); color: var(--green-dk); transition: background .3s, color .3s, transform .45s var(--ease); }
.sx-pc svg { width: 24px; height: 24px; }
.sx-pc:hover { background: var(--lime); border-color: var(--lime); color: var(--forest); transform: translateY(-5px) !important; }
.sx-pc:hover > span { background: var(--forest); color: var(--lime); transform: rotate(-8deg); }
[data-theme="dark"] .sx-pc > span { background: rgba(185, 242, 74, .1); color: var(--lime); }
.sx-brands { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 1000px; margin: 0 auto !important; }
.sx-brands li { padding: 11px 18px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font: 700 15px/1 var(--body); color: var(--fg); transition: background .25s, color .25s, border-color .25s, transform .3s var(--ease), opacity .8s var(--ease); }
html.sv-js .sx-brands li.sv-rv { transition: opacity .7s var(--ease) var(--d, 0s), transform .7s var(--ease) var(--d, 0s), background .25s, color .25s, border-color .25s; }
.sx-brands li:hover { background: var(--lime); border-color: var(--lime); color: var(--forest); transform: translateY(-3px) !important; }

/* ─── Who we work with (two lists) ────────────────────────────────────── */
.sx-who { position: relative; padding: clamp(26px, 3.4vw, 44px); border-radius: 30px; background: var(--card); border: 1px solid var(--line); }
.sx-who--dark { background: var(--forest); color: #fff; border-color: transparent; background-image: radial-gradient(70% 60% at 100% 0%, rgba(15, 162, 74, .45), transparent 70%); }
.sx-who-ic { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 22px; border-radius: 18px; background: var(--forest); color: var(--lime); }
.sx-who--dark .sx-who-ic { background: var(--lime); color: var(--forest); }
.sx-who-ic svg { width: 28px; height: 28px; }
.sx-who > p { margin-top: 14px !important; font-size: 16px; line-height: 1.65; color: var(--fg-2); }
.sx-who--dark > p, .sx-who--dark .sx-list li { color: rgba(255, 255, 255, .8); }
.sx-who .sx-list { grid-template-columns: 1fr 1fr; gap: 10px 18px; margin-top: 18px !important; }
.sx-who .sx-list li { font-size: 15px; }

/* ─── Value range (sell) ──────────────────────────────────────────────── */
.sx-range { margin-top: 30px; padding: 26px; border-radius: 28px; background: var(--forest); color: #fff; background-image: radial-gradient(70% 70% at 100% 0%, rgba(15, 162, 74, .5), transparent 70%); }
[data-theme="dark"] .sx-range { background-color: #0b2615; border: 1px solid rgba(185, 242, 74, .18); }
.sx-range-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.sx-range-top span { font: 700 12.5px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .66); }
.sx-range-top b { font: 900 44px/1 var(--display); letter-spacing: -.05em; color: var(--lime); }
.sx-range-bar { position: relative; height: 18px; margin: 34px 0 10px; border-radius: 18px; background: rgba(255, 255, 255, .1); }
.sx-range-fill { position: absolute; top: 0; bottom: 0; left: 15%; width: 25%; border-radius: 18px; background: linear-gradient(90deg, var(--green), var(--lime)); box-shadow: 0 0 26px rgba(185, 242, 74, .5); transform-origin: left; }
html.sv-js .sx-range.sv-rv .sx-range-fill { transform: scaleX(0); transition: transform 1.3s var(--ease) .5s; }
html.sv-js .sx-range.sv-rv.is-in .sx-range-fill { transform: scaleX(1); }
.sx-range-m { position: absolute; top: -26px; left: calc(var(--at) * 1%); transform: translateX(-50%); font: 800 12.5px/1 var(--body); font-style: normal; color: var(--lime); }
.sx-range-scale { display: flex; justify-content: space-between; font: 600 12px/1 var(--body); color: rgba(255, 255, 255, .5); }
.sx-range-notes { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; font: 600 13px/1.35 var(--body); color: rgba(255, 255, 255, .76); }
.sx-range-cap { margin-top: 10px !important; font-size: 13px; color: rgba(255, 255, 255, .6); }
.sx-factors { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px !important; padding-top: 18px; border-top: 1px dashed rgba(255, 255, 255, .16); }
.sx-factors li { padding: 8px 13px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .2); font: 700 13px/1 var(--body); color: rgba(255, 255, 255, .88); }

/* ─── Sample asset report (ITAD) ──────────────────────────────────────── */
.sx-rep { position: relative; overflow: hidden; margin-top: 30px; padding: 20px; border-radius: 26px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 40px 80px -50px rgba(7, 19, 11, .5); }
.sx-rep-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.sx-rep-head b { font: 800 16px/1.2 var(--display); color: var(--fg); }
.sx-rep-head span { padding: 5px 10px; border-radius: 999px; background: var(--tint); color: var(--muted); font: 800 11px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; }
.sx-rep table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.sx-rep th { padding: 7px 6px; text-align: left; font: 800 10.5px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
.sx-rep td { padding: 9px 6px; border-bottom: 1px solid var(--line); color: var(--fg-2); white-space: nowrap; }
.sx-rep td:first-child { font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; font-weight: 700; color: var(--fg); }
.sx-rep-st { display: inline-block; padding: 4px 8px; border-radius: 999px; font: 800 10.5px/1 var(--body); }
.sx-rep-st--resold { background: var(--lime); color: var(--forest); }
.sx-rep-st--recycled { background: var(--forest); color: var(--lime); }
.sx-rep-scan { position: absolute; left: 0; right: 0; top: 70px; height: 34px; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(185, 242, 74, .28), transparent); opacity: 0; }
html.sv-js .sx-rep-scan { opacity: 1; animation: sxScan 4.5s ease-in-out infinite; }
@keyframes sxScan { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(150px); } }
.sx-rep-foot { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; font: 700 13px/1 var(--body); color: var(--green-dk); }
.sx-rep-foot span { display: inline-flex; align-items: center; gap: 6px; }
.sx-rep-foot svg { width: 16px; height: 16px; }
[data-theme="dark"] .sx-rep-foot { color: var(--lime); }

/* ─── Standards seals (trusted recycler) ──────────────────────────────── */
.sx-seals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.sx-seal { padding: 30px 26px 26px; border-radius: 28px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); text-align: left; transition: border-color .3s, background .3s, transform .45s var(--ease), opacity .9s var(--ease); }
html.sv-js .sx-seal.sv-rv { transition: opacity .9s var(--ease) var(--d, 0s), transform .9s var(--ease) var(--d, 0s), border-color .3s, background .3s; }
.sx-seal:hover { border-color: rgba(185, 242, 74, .4); background: rgba(255, 255, 255, .08); transform: translateY(-6px) !important; }
.sx-seal-badge { position: relative; width: 112px; height: 112px; margin: 0 0 18px -6px; }
.sx-seal-badge::before { content: ""; position: absolute; inset: 16px; border-radius: 50%; background: radial-gradient(circle, rgba(185, 242, 74, .24), rgba(185, 242, 74, .06) 70%); }
.sx-seal-badge svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--lime); stroke-width: 2; stroke-dasharray: 4 7; }
html.sv-js .sx-seal-badge svg { animation: svSpin 24s linear infinite; }
.sx-seal:nth-child(even) .sx-seal-badge svg { animation-direction: reverse; }
.sx-seal-badge b { position: absolute; inset: 0; display: grid; place-items: center; font: 900 30px/1 var(--display); letter-spacing: -.04em; color: var(--lime); }
.sx-seal-lbl { font: 800 11.5px/1.3 var(--body); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }
html body.eco-chromed main.sv .sx-seal h3 { margin-top: 14px !important; color: #fff; }
.sx-seal p { margin-top: 10px !important; font-size: 15px; line-height: 1.62; color: rgba(255, 255, 255, .76); text-align: left; }

/* ─── Versus cards ────────────────────────────────────────────────────── */
.sx-vs { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.sx-vs-card { position: relative; padding: clamp(26px, 3.4vw, 44px); border-radius: 30px; background: var(--card); border: 1px solid var(--line); transition: transform .45s var(--ease), box-shadow .45s var(--ease), opacity .9s var(--ease); }
html.sv-js .sx-vs-card.sv-rv { transition: opacity .9s var(--ease) var(--d, 0s), transform .9s var(--ease) var(--d, 0s), box-shadow .45s; }
.sx-vs-card:hover { transform: translateY(-6px) !important; box-shadow: 0 40px 70px -46px rgba(7, 19, 11, .55); }
.sx-vs-card--good { background: var(--forest); color: #fff; border-color: transparent; background-image: radial-gradient(70% 60% at 100% 0%, rgba(15, 162, 74, .45), transparent 70%); }
.sx-vs-card--bad { background: #fff6f4; border-color: #f3d4ce; }
[data-theme="dark"] .sx-vs-card--bad { background: rgba(251, 113, 99, .07); border-color: rgba(251, 113, 99, .22); }
.sx-vs-ic { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 18px; background: var(--tint); color: var(--green-dk); }
.sx-vs-ic svg { width: 28px; height: 28px; }
.sx-vs-card--good .sx-vs-ic { background: var(--lime); color: var(--forest); }
[data-theme="dark"] .sx-vs-card:not(.sx-vs-card--good):not(.sx-vs-card--bad) .sx-vs-ic { background: rgba(185, 242, 74, .1); color: var(--lime); }
.sx-vs-card--bad .sx-vs-ic { background: #fbe3e1; color: #c2413a; }
[data-theme="dark"] .sx-vs-card--bad .sx-vs-ic { background: rgba(251, 113, 99, .16); color: #fca5a5; }
.sx-vs-k { margin: 20px 0 6px !important; font: 800 12px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.sx-vs-card--good .sx-vs-k { color: var(--lime); }
html body.eco-chromed main.sv .sx-vs-card h3 { margin-bottom: 20px !important; }
.sx-vs-card--good .sx-list li { color: rgba(255, 255, 255, .85); }
.sx-vs-best { margin-top: 20px !important; padding: 12px 16px; border-radius: 14px; background: var(--tint); font: 800 14.5px/1.35 var(--body); color: var(--forest); }
.sx-vs-card--good .sx-vs-best { background: rgba(185, 242, 74, .14); color: var(--lime); }
[data-theme="dark"] .sx-vs-best { background: rgba(185, 242, 74, .1); color: var(--lime); }
.sx-vs-badge { position: absolute; left: 50%; top: 50%; z-index: 2; display: grid; place-items: center; width: 66px; height: 66px; margin: -33px 0 0 -33px; border-radius: 50%; background: var(--lime); color: var(--forest); font: 900 22px/1 var(--display); text-transform: uppercase; box-shadow: 0 0 0 10px var(--bg); }
.sv-addons-sec .sx-vs-badge { box-shadow: 0 0 0 10px var(--bg-2); }
html.sv-js .sx-vs-badge { animation: sxVs 3s ease-in-out infinite; }
@keyframes sxVs { 50% { transform: scale(1.08) rotate(-6deg); } }

/* ─── Video band (on-site) ────────────────────────────────────────────── */
.sx-video { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 76px); align-items: center; }
.sx-video-copy .sv-desc { margin-top: 18px !important; }
.sx-video-copy .sx-list { margin-top: 24px !important; }
.sx-video-frame { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 30px; background: #000; border: 2px solid rgba(185, 242, 74, .3); box-shadow: 0 60px 100px -46px rgba(0, 0, 0, .85); }
.sx-video-frame video { display: block; width: 100%; height: 100%; object-fit: cover; }
.sx-rec { position: absolute; left: 16px; top: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; background: rgba(7, 19, 11, .72); color: #fff; font: 800 12px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; pointer-events: none; }
.sx-rec i { width: 8px; height: 8px; border-radius: 50%; background: #ff4d4d; }
html.sv-js .sx-rec i { animation: sxBlink 1.2s steps(2) infinite; }
@keyframes sxBlink { 50% { opacity: .2; } }

/* ─── Visit card (location & hours) ───────────────────────────────────── */
.sx-visit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); overflow: hidden; border-radius: 34px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 50px 90px -60px rgba(7, 19, 11, .55); }
.sx-visit-copy { padding: clamp(28px, 4vw, 56px); }
.sx-visit-list { display: grid; gap: 18px; margin: 28px 0 8px !important; }
.sx-visit-list li { display: flex; gap: 14px; align-items: flex-start; font-size: 15.5px; line-height: 1.55; color: var(--fg-2); }
.sx-visit-list b { display: block; font: 800 16px/1.3 var(--display); color: var(--fg); }
.sx-visit-list a { color: var(--green-dk) !important; font-weight: 700; text-decoration: none !important; }
[data-theme="dark"] .sx-visit-list a { color: var(--lime) !important; }
.sx-visit-ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: var(--tint); color: var(--green-dk); }
.sx-visit-ic svg { width: 21px; height: 21px; }
[data-theme="dark"] .sx-visit-ic { background: rgba(185, 242, 74, .1); color: var(--lime); }
.sx-visit-map { position: relative; min-height: 380px; background: #0b2915; }
.sx-visit-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.vm-river { fill: none; stroke: rgba(70, 150, 210, .38); stroke-width: 28; stroke-linecap: round; }
.vm-streets path { fill: none; stroke: rgba(255, 255, 255, .07); stroke-width: 14; }
.vm-blocks rect { fill: rgba(255, 255, 255, .05); }
.vm-route { fill: none; stroke: var(--lime); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 10 10; }
html.sv-js .vm-route { animation: vmDash 1.2s linear infinite; }
@keyframes vmDash { to { stroke-dashoffset: -20; } }
.vm-dot { fill: var(--lime); }
.vm-core { fill: var(--forest); }
.vm-ping { fill: none; stroke: var(--lime); stroke-width: 3; transform-box: fill-box; transform-origin: center; opacity: 0; }
html.sv-js .vm-ping { animation: vmPing 2.4s ease-out infinite; }
html.sv-js .vm-ping--b { animation-delay: 1.2s; }
@keyframes vmPing { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(3.4); opacity: 0; } }
.vm-tag rect { fill: #fff; }
.vm-tag text { font: 800 12px var(--body); fill: var(--forest); }
.vm-open { position: absolute; left: 18px; bottom: 18px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: rgba(7, 19, 11, .78); border: 1px solid rgba(185, 242, 74, .25); color: #fff; font: 700 13px/1 var(--body); }
.vm-open i { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 10px var(--lime); }

/* trailing SEO copy: the legacy main h2 rule outranks device-v3's size */
html body.eco-chromed main.sv .sx-more .dev-more-copy :is(h2, h3) { font-size: clamp(22px, 2vw, 28px) !important; line-height: 1.2 !important; letter-spacing: -.02em !important; color: var(--fg) !important; margin-bottom: 14px !important; }

/* related chips */
.sx-related .sv-desc { margin-top: 12px !important; max-width: 64ch; }

/* ==========================================================================
   HERO SCENES
   ========================================================================== */
.sx-art { width: min(100%, 480px); container-type: inline-size; }
.sx-art > * { position: absolute; }
.sx-art .sv-chip { z-index: 5; }
.sx-story .sv-story-side .sv-desc { margin-top: 20px !important; }
.sx-art svg { overflow: visible; }

/* ─── Receipt (pricing) ───────────────────────────────────────────────── */
.rc-printer { left: 10%; right: 10%; top: 10%; height: 15%; z-index: 2; border-radius: 20px; background: linear-gradient(180deg, #164326, #0a2413); border: 1px solid rgba(185, 242, 74, .25); box-shadow: 0 24px 40px -20px rgba(0, 0, 0, .7); }
.rc-led { position: absolute; right: 18px; top: 16px; width: 9px; height: 9px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 12px var(--lime); }
html.sv-js .rc-led { animation: sxBlink 1s steps(2) infinite; }
.rc-slot { position: absolute; left: 8%; right: 8%; bottom: 14px; height: 7px; border-radius: 7px; background: #020a05; }
.rc-paper { left: 16%; right: 16%; top: calc(25% - 18px); bottom: 2%; z-index: 1; overflow: hidden; }
.rc-roll { position: relative; padding: 28px 7% 34px; background: #fff; color: #07130b; font: 600 12.5px/1.5 ui-monospace, 'Cascadia Code', Consolas, 'Courier New', monospace; font-size: clamp(9px, 2.7cqw, 13px);
  box-shadow: 0 30px 50px -24px rgba(0, 0, 0, .6);
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 10px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 16px 10px repeat-x;
          mask: linear-gradient(#000 0 0) top / 100% calc(100% - 10px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 16px 10px repeat-x; }
.rc-brand { text-align: center; font-weight: 900; letter-spacing: .08em; }
.rc-sub { text-align: center; opacity: .6; margin-bottom: 1em !important; }
.rc-lines li { display: flex; justify-content: space-between; gap: 8px; padding: .38em 0; border-bottom: 1px dashed rgba(7, 19, 11, .22); }
.rc-total { display: flex; justify-content: space-between; margin-top: .7em !important; padding-top: .55em; border-top: 2px solid #07130b; font-weight: 900; font-size: 1.3em; }
.rc-code { height: 2.4em; margin: 1.1em 8% .5em !important; background: repeating-linear-gradient(90deg, #07130b 0 2px, transparent 2px 4px, #07130b 4px 5px, transparent 5px 8px, #07130b 8px 11px, transparent 11px 13px); }
.rc-thanks { text-align: center; opacity: .7; }
.rc-stamp { position: absolute; right: 7%; top: 50%; padding: .28em .6em; border: 3px solid var(--green); border-radius: 12px; color: var(--green-dk); background: rgba(255, 255, 255, .55); font: 900 30px/1 var(--display); font-size: clamp(22px, 6.4cqw, 32px); letter-spacing: .1em; text-transform: uppercase; transform: rotate(-14deg); }
html.sv-js .rc-roll { animation: rcPrint 10s cubic-bezier(.3, .7, .3, 1) .5s infinite both; }
html.sv-js .rc-stamp { animation: rcStamp 10s .5s infinite both; }
@keyframes rcPrint { 0% { transform: translateY(-104%); opacity: 1; } 30% { transform: translateY(0); } 86% { transform: translateY(0); opacity: 1; } 95% { transform: translateY(16%) rotate(3deg); opacity: 0; } 100% { transform: translateY(-104%); opacity: 0; } }
@keyframes rcStamp { 0%, 31% { opacity: 0; transform: rotate(-14deg) scale(2.2); } 35% { opacity: 1; transform: rotate(-14deg) scale(.9); } 38%, 100% { opacity: 1; transform: rotate(-14deg) scale(1); } }
.sx-art--receipt .sv-chip--1 { left: -6%; top: 34%; }
.sx-art--receipt .sv-chip--2 { right: -8%; top: 58%; }
.sx-art--receipt .sv-chip--3 { left: -4%; bottom: 8%; }

/* ─── Route map (business pickup) ─────────────────────────────────────── */
.rt-map { inset: 4%; overflow: hidden; border-radius: 34px; background: radial-gradient(90% 90% at 70% 20%, #124027, #0a2213 70%); border: 1px solid rgba(185, 242, 74, .22); box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .8); }
.rt-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.rt-river { fill: none; stroke: rgba(70, 150, 210, .35); stroke-width: 24; stroke-linecap: round; }
.rt-streets path { fill: none; stroke: rgba(255, 255, 255, .07); stroke-width: 14; }
.rt-blocks rect { fill: rgba(255, 255, 255, .045); }
.rt-route { fill: none; stroke: rgba(185, 242, 74, .28); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 2 10; }
.rt-route-live { fill: none; stroke: var(--lime); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; filter: drop-shadow(0 0 6px rgba(185, 242, 74, .6)); }
html.sv-js .rt-route-live { animation: rtDraw 7s linear infinite; }
@keyframes rtDraw { 0% { stroke-dashoffset: 1; } 78%, 100% { stroke-dashoffset: 0; } }
.rt-truck > circle:first-child { fill: var(--lime); stroke: var(--forest); stroke-width: 3; }
.rt-truck path { fill: var(--forest); }
.rt-truck > circle:not(:first-child) { fill: var(--forest); }
.rt-truck { transform: translate(322px, 84px); }
html.sv-js .rt-truck { transform: none; }
.rt-pin { position: absolute; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 7px rgba(185, 242, 74, .2); }
.rt-pin i { position: absolute; inset: 0; border-radius: 50%; background: var(--lime); }
html.sv-js .rt-pin i { animation: svPing 2s var(--ease) infinite; }
.rt-pin--a { left: 19.5%; top: 80.5%; }
.rt-pin--b { left: 80.5%; top: 21%; background: #fff; }
.rt-lbl { position: absolute; padding: 7px 11px; border-radius: 11px; background: rgba(7, 19, 11, .82); border: 1px solid rgba(255, 255, 255, .16); color: #fff; font: 700 12.5px/1 var(--body); white-space: nowrap; }
.rt-lbl--a { left: 7%; top: 87%; }
.rt-lbl--b { right: 5%; top: 9%; }
.rt-ticket { position: absolute; left: 6%; top: 34%; display: grid; gap: 3px; padding: 12px 16px 12px 44px; border-radius: 16px; background: #fff; color: var(--forest); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .6); }
.rt-ticket::before { content: ""; position: absolute; left: 12px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/13px no-repeat; }
.rt-ticket b { font: 800 14px/1.1 var(--display); }
.rt-ticket span { font: 600 12px/1.2 var(--body); opacity: .7; }
html.sv-js .rt-ticket { animation: svFloat 5s ease-in-out infinite; }
.sx-art--route .sv-chip--1 { left: -6%; top: 58%; }
.sx-art--route .sv-chip--2 { right: -7%; top: 38%; }
.sx-art--route .sv-chip--3 { left: 30%; bottom: -2%; }

/* ─── Pickup pass (electronics pickup) ────────────────────────────────── */
.ps-card { left: 4%; right: 4%; top: 13%; overflow: hidden; padding: 22px; border-radius: 26px; background: #fff; color: var(--ink); box-shadow: 0 60px 100px -40px rgba(0, 0, 0, .85); transform: perspective(1200px) rotateY(-11deg) rotateX(5deg) rotate(-2deg); transition: transform .8s var(--ease); font-size: clamp(10px, 2.9cqw, 14px); }
.ps-card:hover { transform: none; }
.ps-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .75) 50%, transparent 62%); transform: translateX(-120%); }
html.sv-js .ps-card::after { animation: psShine 6s ease-in-out 1.5s infinite; }
@keyframes psShine { 0%, 70% { transform: translateX(-120%); } 90%, 100% { transform: translateX(120%); } }
.ps-top { display: flex; justify-content: space-between; align-items: center; }
.ps-brand { display: inline-flex; align-items: center; gap: 8px; font: 800 1.05em/1 var(--display); color: var(--green-dk); }
.ps-brand svg { width: 1.5em; height: 1.5em; }
.ps-type { padding: .45em .8em; border-radius: 999px; background: var(--forest); color: var(--lime); font: 800 .78em/1 var(--body); letter-spacing: .12em; text-transform: uppercase; }
.ps-route { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; margin: 1.5em 0 1.2em; }
.ps-route small, .ps-grid small, .ps-status small { display: block; font: 800 .7em/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.ps-route b { display: block; margin-top: .3em; font: 900 1.7em/1 var(--display); letter-spacing: -.035em; }
.ps-route span { font: 600 .85em/1.3 var(--body); color: var(--muted); }
.ps-to { text-align: right; }
.ps-mid { position: relative; height: 2.6em; }
.ps-line { position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dashed rgba(7, 19, 11, .22); }
.ps-truck { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 2.5em; height: 2.5em; border-radius: 50%; background: var(--lime); color: var(--forest); transform: translate(-50%, -50%); }
.ps-truck svg { width: 1.3em; height: 1.3em; }
html.sv-js .ps-truck { animation: psTruck 10s ease-in-out infinite; }
@keyframes psTruck { 0%, 18% { left: 8%; } 45%, 68% { left: 50%; } 90%, 100% { left: 92%; } }
.ps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 1em 0; border-block: 1px solid var(--line); }
.ps-grid b { display: block; margin-top: .35em; font: 900 1.1em/1.1 var(--display); }
.ps-status { margin-top: 1em; }
.ps-states { position: relative; display: block; height: 1.8em; margin-top: .35em; overflow: hidden; }
.ps-states b { display: block; font: 900 1.45em/1.25 var(--display); color: var(--green-dk); }
.ps-states b + b { display: none; }
html.sv-js .ps-states b { position: absolute; left: 0; top: 0; display: block; opacity: 0; animation: psState 10s infinite; }
html.sv-js .ps-states b:nth-child(2) { animation-delay: 2.5s; }
html.sv-js .ps-states b:nth-child(3) { animation-delay: 5s; }
html.sv-js .ps-states b:nth-child(4) { animation-delay: 7.5s; }
@keyframes psState { 0% { opacity: 0; transform: translateY(100%); } 3%, 21% { opacity: 1; transform: none; } 24%, 100% { opacity: 0; transform: translateY(-100%); } }
.ps-track { display: block; height: 8px; margin-top: .6em; overflow: hidden; border-radius: 8px; background: var(--tint); }
.ps-track i { display: block; width: 100%; height: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--green), var(--lime)); transform-origin: left; }
html.sv-js .ps-track i { animation: psTrack 10s infinite; }
@keyframes psTrack { 0%, 22% { transform: scaleX(.25); } 25%, 47% { transform: scaleX(.5); } 50%, 72% { transform: scaleX(.75); } 75%, 100% { transform: scaleX(1); } }
.ps-tear { position: relative; margin: 1.3em -22px 1em; border-top: 2px dashed var(--line); }
.ps-tear::before, .ps-tear::after { content: ""; position: absolute; top: -13px; width: 24px; height: 24px; border-radius: 50%; background: var(--forest); }
.ps-tear::before { left: -12px; } .ps-tear::after { right: -12px; }
.ps-code { height: 3em; background: repeating-linear-gradient(90deg, var(--ink) 0 3px, transparent 3px 5px, var(--ink) 5px 6px, transparent 6px 10px, var(--ink) 10px 12px, transparent 12px 14px, var(--ink) 14px 15px, transparent 15px 19px); border-radius: 4px; }
.sx-art--pass .sv-chip--1 { left: -6%; top: 2%; }
.sx-art--pass .sv-chip--2 { right: -6%; top: 86%; }
.sx-art--pass .sv-chip--3 { left: -4%; bottom: -3%; }

/* ─── Gaylord (bulk) ──────────────────────────────────────────────────── */
.gy-scene { inset: 0; }
.gy-drops { position: absolute; left: 0; right: 0; top: 0; height: 56%; }
.gy-it { position: absolute; left: calc(50% + var(--x)); top: 4%; display: grid; place-items: center; width: 13cqw; height: 13cqw; min-width: 44px; min-height: 44px; margin-left: -6.5cqw; border-radius: 14px; background: #fff; color: var(--forest); box-shadow: 0 16px 30px -14px rgba(0, 0, 0, .6); font-style: normal; }
.gy-it svg { width: 55%; height: 55%; }
.gy-it:nth-child(n+3) { display: none; }
html.sv-js .gy-it { display: grid; opacity: 0; animation: gyDrop 3.5s cubic-bezier(.55, 0, .85, .55) var(--d) infinite; }
@keyframes gyDrop { 0% { top: -4%; opacity: 0; transform: rotate(-12deg) scale(.9); } 12% { opacity: 1; } 70% { top: 64%; opacity: 1; transform: rotate(10deg) scale(.82); } 80%, 100% { top: 74%; opacity: 0; transform: rotate(14deg) scale(.6); } }
.gy-box { position: absolute; left: 18%; right: 18%; bottom: 20%; height: 42%; }
.gy-inner { position: absolute; inset: 0; overflow: hidden; border-radius: 10px 10px 16px 16px; background: linear-gradient(180deg, #7d5a2c, #6a4b24); }
.gy-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 70%; background: repeating-linear-gradient(135deg, #133824 0 14px, #0f2d1c 14px 28px); box-shadow: inset 0 6px 0 rgba(185, 242, 74, .3); }
html.sv-js .gy-fill { animation: gyFill 7s ease-in-out infinite; }
@keyframes gyFill { 0% { height: 12%; } 85% { height: 92%; } 100% { height: 12%; } }
.gy-front { position: absolute; left: -5%; right: -5%; bottom: -3%; height: 60%; display: grid; place-content: center; text-align: center; border-radius: 8px 8px 20px 20px; color: #3a2610;
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .05) 0 2px, transparent 2px 14px), linear-gradient(180deg, #d4a667, #b3813f); box-shadow: inset 0 4px 0 rgba(255, 255, 255, .3), 0 34px 50px -24px rgba(0, 0, 0, .7); }
.gy-front b { font: 900 clamp(18px, 5.6cqw, 28px)/1 var(--display); letter-spacing: .18em; text-transform: uppercase; }
.gy-front span { margin-top: 4px; font: 700 clamp(10px, 2.6cqw, 13px)/1 var(--body); opacity: .8; }
.gy-pallet { position: absolute; left: 12%; right: 12%; bottom: 13%; height: 6%; border-radius: 4px; background: linear-gradient(180deg, #6b4a22 0 45%, transparent 45% 100%); }
.gy-pallet i { position: absolute; bottom: 0; width: 12%; height: 100%; border-radius: 2px; background: #5a3d1b; }
.gy-pallet i:nth-child(1) { left: 4%; } .gy-pallet i:nth-child(2) { left: 44%; } .gy-pallet i:nth-child(3) { right: 4%; }
.gy-count { position: absolute; right: 0; top: 16%; padding: 12px 16px; border-radius: 20px; background: var(--lime); color: var(--forest); text-align: center; box-shadow: 0 20px 40px -18px rgba(185, 242, 74, .7); }
.gy-count b { display: block; font: 900 clamp(26px, 8cqw, 40px)/1 var(--display); letter-spacing: -.04em; }
.gy-count span { display: block; max-width: 9em; margin-top: 4px; font: 800 11px/1.25 var(--body); letter-spacing: .04em; text-transform: uppercase; }
html.sv-js .gy-count { animation: svFloat 5s ease-in-out infinite; }
.sx-art--gaylord .sv-chip--1 { left: -6%; top: 6%; }
.sx-art--gaylord .sv-chip--2 { right: -8%; top: 52%; }
.sx-art--gaylord .sv-chip--3 { left: -2%; bottom: 2%; }

/* ─── Crusher (product destruction) ───────────────────────────────────── */
.cz-svg { inset: 0; width: 100%; height: 100%; }
.cz-belt { fill: #0c2a16; stroke: rgba(185, 242, 74, .35); stroke-width: 2; }
.cz-belt-dash { stroke: rgba(255, 255, 255, .25); stroke-width: 3; stroke-dasharray: 10 12; }
html.sv-js .cz-belt-dash { animation: czBelt .9s linear infinite; }
@keyframes czBelt { to { stroke-dashoffset: -22; } }
.cz-rollers circle { fill: #07130b; stroke: rgba(255, 255, 255, .4); stroke-width: 2; stroke-dasharray: 4 4; transform-box: fill-box; transform-origin: center; }
html.sv-js .cz-rollers circle { animation: svSpin 1.2s linear infinite; }
.cz-item { transform: translate(120px, 232px); }
.cz-item + .cz-item { display: none; }
html.sv-js .cz-item { display: inline; transform: translate(-60px, 232px); animation: czMove 6s linear var(--d) infinite; }
@keyframes czMove { 0% { transform: translate(-60px, 232px); opacity: 1; } 78% { transform: translate(258px, 232px) scale(1); opacity: 1; } 84% { transform: translate(282px, 236px) scale(.45); opacity: 0; } 100% { transform: translate(282px, 236px) scale(.45); opacity: 0; } }
.cz-box { fill: #d0a263; stroke: #07130b; stroke-width: 2.5; }
.cz-tape { stroke: rgba(7, 19, 11, .3); stroke-width: 7; }
.cz-lbl { font: 900 10px var(--display); fill: #07130b; letter-spacing: .06em; }
.cz-house { fill: #0c2a16; stroke: var(--lime); stroke-opacity: .5; stroke-width: 2; }
.cz-window { fill: rgba(185, 242, 74, .12); stroke: rgba(185, 242, 74, .4); }
.cz-hlbl { font: 900 13px var(--display); fill: var(--lime); letter-spacing: .2em; }
.cz-gear circle { fill: none; stroke: var(--lime); stroke-width: 7; stroke-dasharray: 7 5; transform-box: fill-box; transform-origin: center; }
html.sv-js .cz-gear circle { animation: svSpin 1s linear infinite; }
html.sv-js .cz-gear--b circle { animation-direction: reverse; }
.cz-bits rect { fill: #d0a263; }
html.sv-js .cz-bits rect { animation: svBits 1.1s linear infinite; }
html.sv-js .cz-bits rect:nth-child(2n) { animation-delay: -.4s; }
html.sv-js .cz-bits rect:nth-child(3n) { animation-delay: -.75s; }
.cz-bin { fill: rgba(255, 255, 255, .06); stroke: rgba(255, 255, 255, .28); stroke-width: 2; }
.cz-cert { left: 0; bottom: 3%; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 18px; background: #fff; color: var(--forest); box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .6); }
.cz-cert > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--lime); }
.cz-cert svg { width: 20px; height: 20px; }
.cz-cert b { display: block; font: 800 14px/1.1 var(--display); }
.cz-cert small { font: 600 12px/1.2 var(--body); opacity: .7; }
html.sv-js .cz-cert { animation: czCert 6s var(--ease) infinite; }
@keyframes czCert { 0%, 72% { opacity: 0; transform: translateY(12px) scale(.9); } 78%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-6px); } }
.sx-art--crusher .sv-chip--1 { left: -4%; top: 6%; }
.sx-art--crusher .sv-chip--2 { right: -6%; top: 22%; }
.sx-art--crusher .sv-chip--3 { left: auto; right: -4%; bottom: 2%; }

/* ─── Value gauge (sell IT) ───────────────────────────────────────────── */
.gv-card { left: 5%; right: 5%; top: 13%; padding: 22px; border-radius: 28px; background: #fff; color: var(--ink); box-shadow: 0 60px 100px -40px rgba(0, 0, 0, .85); font-size: clamp(10px, 2.9cqw, 14px); }
.gv-top { display: flex; align-items: center; gap: 12px; }
.gv-ic { display: grid; place-items: center; flex: none; width: 3.3em; height: 3.3em; border-radius: 14px; background: var(--forest); color: var(--lime); }
.gv-ic svg { width: 50%; height: 50%; }
.gv-top b { display: block; font: 800 1.15em/1.2 var(--display); }
.gv-top span { font: 600 .9em/1.3 var(--body); color: var(--muted); }
.gv-pill { margin-left: auto; padding: .45em .8em; border-radius: 999px; background: rgba(15, 162, 74, .12); color: var(--green-dk) !important; font: 800 .78em/1 var(--body) !important; letter-spacing: .1em; text-transform: uppercase; }
.gv-gauge { display: block; width: 100%; margin-top: .8em; }
.gv-arc { fill: none; stroke: var(--tint); stroke-width: 14; stroke-linecap: round; }
.gv-band { fill: none; stroke: var(--lime); stroke-width: 14; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(185, 242, 74, .8)); }
.gv-ticks path { stroke: rgba(7, 19, 11, .25); stroke-width: 2; }
.gv-needle { transform-box: view-box; transform-origin: 100px 100px; transform: rotate(50deg); }
.gv-needle path { stroke: var(--forest); stroke-width: 5; stroke-linecap: round; }
.gv-needle circle { fill: var(--forest); }
html.sv-js .gv-needle { animation: gvNeedle 6s ease-in-out infinite; }
@keyframes gvNeedle { 0% { transform: rotate(3deg); } 30% { transform: rotate(64deg); } 42% { transform: rotate(44deg); } 54% { transform: rotate(56deg); } 64%, 86% { transform: rotate(50deg); } 100% { transform: rotate(3deg); } }
.gv-read { margin-top: -.4em; text-align: center; }
.gv-read small { font: 800 .75em/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.gv-read b { display: block; margin-top: .15em; font: 900 3.1em/1 var(--display); letter-spacing: -.05em; color: var(--forest); }
.gv-read span { font: 600 .88em/1.3 var(--body); color: var(--muted); }
.gv-status { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 1em; padding: .75em; border-radius: 14px; background: var(--tint); font: 700 .95em/1.2 var(--body); }
.gv-status i { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(15, 162, 74, .2); }
html.sv-js .gv-status i { animation: sxBlink 1.4s steps(2) infinite; }
.gv-coins { right: 0; top: 2%; width: 20%; height: 20%; }
.gv-coins i { position: absolute; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffe08a, #ffc53d 60%, #d99a13); color: #7a5200; font: 900 20px/1 var(--display); font-style: normal; box-shadow: 0 10px 20px -8px rgba(0, 0, 0, .5), inset 0 -3px 0 rgba(0, 0, 0, .12); }
.gv-coins i:nth-child(1) { right: 0; top: 0; } .gv-coins i:nth-child(2) { right: 34px; top: 26px; transform: scale(.8); } .gv-coins i:nth-child(3) { right: 6px; top: 52px; transform: scale(.66); }
html.sv-js .gv-coins i { animation: gvCoin 3.6s ease-in-out infinite; }
html.sv-js .gv-coins i:nth-child(2) { animation-delay: -1.2s; }
html.sv-js .gv-coins i:nth-child(3) { animation-delay: -2.4s; }
@keyframes gvCoin { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -14px; rotate: 12deg; } }
.sx-art--gauge .sv-chip--1 { left: -7%; top: 4%; }
.sx-art--gauge .sv-chip--2 { right: -8%; top: 64%; }
.sx-art--gauge .sv-chip--3 { left: -5%; bottom: 0; }

/* ─── Server rack (data center) ───────────────────────────────────────── */
.rk { left: 15%; right: 15%; top: 5%; bottom: 5%; display: flex; flex-direction: column; gap: 10px; }
.rk-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px; background: rgba(7, 19, 11, .75); border: 1px solid rgba(185, 242, 74, .25); color: #fff; font: 800 clamp(10px, 2.6cqw, 12.5px)/1 var(--display); letter-spacing: .12em; }
.rk-state { display: inline-flex; align-items: center; gap: 6px; color: var(--lime); letter-spacing: 0; }
.rk-state em { font-style: normal; font-weight: 700; }
.rk-state i { width: 8px; height: 8px; border-radius: 50%; background: #ffc53d; box-shadow: 0 0 8px #ffc53d; }
html.sv-js .rk-state i { animation: sxBlink 1s steps(2) infinite; }
.rk-frame { flex: 1; display: flex; flex-direction: column; gap: 8px; overflow: hidden; padding: 12px; border-radius: 16px; background: #0a1e12; border: 2px solid #2a4431; box-shadow: inset 0 0 0 6px #0d2616, 0 50px 80px -34px rgba(0, 0, 0, .85); }
.rk-u { position: relative; flex: 1; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 6px; background: linear-gradient(180deg, #213d2a, #15291c); border: 1px solid rgba(255, 255, 255, .08); }
html.sv-js .rk-u { animation: rkPull 12s var(--ease) infinite; animation-delay: calc(var(--i) * .85s); }
@keyframes rkPull { 0%, 8% { transform: none; opacity: 1; } 16%, 70% { transform: translateX(118%); opacity: 0; } 80%, 100% { transform: none; opacity: 1; } }
.rk-led { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 8px var(--lime); }
.rk-led--b { background: #ffc53d; box-shadow: 0 0 8px #ffc53d; }
html.sv-js .rk-led { animation: sxBlink 1.2s steps(2) infinite; }
html.sv-js .rk-led--b { animation-duration: .7s; }
.rk-bays { display: flex; gap: 4px; margin-left: auto; }
.rk-bays i { width: 3.6cqw; max-width: 18px; height: 10px; border-radius: 2px; background: rgba(255, 255, 255, .13); }
.rk-log { position: relative; height: 38px; border-radius: 12px; background: #fff; overflow: hidden; }
.rk-log span { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 14px; font: 800 clamp(11px, 2.8cqw, 13.5px)/1 var(--body); color: var(--forest); }
.rk-log span + span { display: none; }
html.sv-js .rk-log span { display: flex; opacity: 0; animation: psState 12s infinite; }
html.sv-js .rk-log span:nth-child(2) { animation-delay: 3s; }
html.sv-js .rk-log span:nth-child(3) { animation-delay: 6s; }
html.sv-js .rk-log span:nth-child(4) { animation-delay: 9s; }
.sx-art--rack .sv-chip--1 { left: -6%; top: 18%; }
.sx-art--rack .sv-chip--2 { right: -8%; top: 46%; }
.sx-art--rack .sv-chip--3 { left: -4%; bottom: 14%; }

/* ─── Asset tags (ITAD) ───────────────────────────────────────────────── */
.tg-stack { inset: 12% 7% 18%; font-size: clamp(10px, 2.9cqw, 14px); }
.tg-card { position: absolute; left: 0; right: 0; top: 0; padding: 1.6em 1.6em 1.4em; border-radius: 22px; background: #fff; color: var(--ink); box-shadow: 0 40px 70px -34px rgba(0, 0, 0, .8); }
.tg-card:nth-child(2) { transform: translateY(4.6em) scale(.94); opacity: .9; z-index: -1; }
.tg-card:nth-child(3) { transform: translateY(8.8em) scale(.88); opacity: .75; z-index: -2; }
html.sv-js .tg-card { animation: tgCycle 9s var(--ease) infinite; animation-delay: calc(var(--i) * -3s); }
html.sv-js .tg-card:nth-child(n) { transform: none; opacity: 1; }
@keyframes tgCycle {
  0%, 26% { transform: translateY(0) scale(1); opacity: 1; z-index: 3; }
  33% { transform: translateY(-3em) rotate(-5deg) scale(1.02); opacity: 0; z-index: 3; }
  34% { transform: translateY(8.8em) scale(.88); opacity: 0; z-index: 1; }
  40%, 60% { transform: translateY(8.8em) scale(.88); opacity: .72; z-index: 1; }
  66%, 93% { transform: translateY(4.6em) scale(.94); opacity: .9; z-index: 2; }
  100% { transform: translateY(0) scale(1); opacity: 1; z-index: 3; } }
.tg-row { display: flex; justify-content: space-between; align-items: center; }
.tg-row b { font: 900 .82em/1 var(--body); letter-spacing: .18em; color: var(--green-dk); }
.tg-row span { font: 800 1.1em/1 ui-monospace, 'Cascadia Code', Consolas, monospace; }
.tg-card > p { margin-top: .5em !important; font: 800 1.45em/1.1 var(--display); letter-spacing: -.02em; }
.tg-card > p.tg-sn { margin-top: .25em !important; font: 600 .85em/1 ui-monospace, 'Cascadia Code', Consolas, monospace; color: var(--muted); letter-spacing: 0; }
.tg-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 1.1em; }
.tg-steps span { padding: .6em .2em; border-radius: 10px; text-align: center; font: 800 .78em/1 var(--body); background: var(--forest); color: var(--lime); }
.tg-steps span:last-child { background: var(--lime); color: var(--forest); }
.tg-hole { position: absolute; left: 50%; top: -12px; width: 26px; height: 26px; margin-left: -13px; border-radius: 50%; background: var(--forest); border: 5px solid #fff; }
.sx-art--tags .sv-chip--1 { left: -6%; top: 2%; }
.sx-art--tags .sv-chip--2 { right: -8%; top: 60%; }
.sx-art--tags .sv-chip--3 { left: -4%; bottom: 2%; }

/* ─── Seal (trusted recycler) ─────────────────────────────────────────── */
.sl-svg { inset: 0; width: 100%; height: 100%; }
.sl-ring { fill: none; stroke: rgba(185, 242, 74, .35); stroke-width: 1.5; stroke-dasharray: 3 8; }
.sl-ring--in { stroke: rgba(255, 255, 255, .2); stroke-dasharray: 2 6; }
.sl-txt { font: 800 17px var(--display); letter-spacing: .1em; fill: var(--lime); }
.sl-rot, .sl-core { transform-box: view-box; transform-origin: 200px 200px; }
html.sv-js .sl-rot { animation: svSpin 40s linear infinite; }
.sl-core circle { fill: var(--lime); filter: drop-shadow(0 0 30px rgba(185, 242, 74, .45)); }
.sl-shield { fill: var(--forest); }
.sl-check { fill: none; stroke: var(--lime); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 0; }
html.sv-js .sl-check { animation: slCheck 4.5s ease-in-out infinite; }
@keyframes slCheck { 0%, 12% { stroke-dashoffset: 60; } 36%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 60; } }
html.sv-js .sl-core { animation: slPulse 4.5s ease-in-out infinite; }
@keyframes slPulse { 36% { transform: scale(1.05); } 50% { transform: scale(1); } }
.sx-art--seal .sv-chip--1 { left: -6%; top: 14%; }
.sx-art--seal .sv-chip--2 { right: -8%; top: 44%; }
.sx-art--seal .sv-chip--3 { left: -2%; bottom: 10%; }

/* ─── Wipe terminal (computer disposal) ───────────────────────────────── */
.tm-laptop { left: 3%; right: 3%; top: 16%; }
.tm-screen { display: flex; flex-direction: column; overflow: hidden; aspect-ratio: 16 / 10.4; border-radius: 18px 18px 6px 6px; background: #06140b; border: 10px solid #1d3124; box-shadow: 0 50px 80px -34px rgba(0, 0, 0, .85); }
.tm-bar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: #0d2416; }
.tm-bar i { width: 9px; height: 9px; border-radius: 50%; background: #ff5f57; }
.tm-bar i:nth-child(2) { background: #febc2e; } .tm-bar i:nth-child(3) { background: #28c840; }
.tm-bar span { margin-left: 8px; font: 700 11px/1 ui-monospace, 'Cascadia Code', Consolas, monospace; color: rgba(255, 255, 255, .5); }
.tm-body { padding: 4% 5%; font: 600 13px/1.75 ui-monospace, 'Cascadia Code', Consolas, monospace; font-size: clamp(9px, 2.8cqw, 13.5px); color: var(--lime); }
.tm-l { white-space: nowrap; }
.tm-l b { color: #fff; font-weight: 700; }
.tm-ok { padding: 0 .4em; border-radius: 4px; background: var(--lime); color: var(--forest) !important; }
.tm-done { margin-top: .4em !important; color: #fff; font-weight: 800; }
.tm-prog { height: .8em; margin: .4em 0 .5em; overflow: hidden; border-radius: 6px; background: rgba(185, 242, 74, .14); }
.tm-prog i { display: block; height: 100%; background: linear-gradient(90deg, var(--green), var(--lime)); transform-origin: left; }
html.sv-js .tm-l { animation: tmLine 9s steps(28, end) calc(var(--k) * 1.1s + .3s) infinite both; }
html.sv-js .tm-prog i { animation: tmProg 9s linear 2.5s infinite both; }
@keyframes tmLine { 0% { clip-path: inset(0 100% 0 0); } 9% { clip-path: inset(0 0 0 0); } 84% { clip-path: inset(0 0 0 0); opacity: 1; } 92%, 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
@keyframes tmProg { 0% { transform: scaleX(0); opacity: 1; } 16% { transform: scaleX(1); } 70% { transform: scaleX(1); opacity: 1; } 78%, 100% { transform: scaleX(1); opacity: 0; } }
.tm-base { position: relative; height: 16px; margin: 0 -7%; border-radius: 0 0 22px 22px; background: linear-gradient(180deg, #2c4c37, #16301f); box-shadow: 0 30px 40px -20px rgba(0, 0, 0, .7); }
.tm-base i { position: absolute; left: 50%; top: 0; width: 90px; height: 6px; margin-left: -45px; border-radius: 0 0 8px 8px; background: #0d2416; }
.sx-art--terminal .sv-chip--1 { left: -5%; top: 4%; }
.sx-art--terminal .sv-chip--2 { right: -8%; top: 74%; }
.sx-art--terminal .sv-chip--3 { left: -3%; bottom: 2%; }

/* ─── Equalizer speaker (pro audio) ───────────────────────────────────── */
.eq-rings { inset: 0; }
.eq-rings span { position: absolute; left: 50%; top: 44%; width: 62%; aspect-ratio: 1; border-radius: 50%; border: 2px solid rgba(185, 242, 74, .4); transform: translate(-50%, -50%) scale(.7); opacity: 0; }
html.sv-js .eq-rings span { animation: eqRing 2.4s ease-out infinite; }
html.sv-js .eq-rings span:nth-child(2) { animation-delay: .8s; }
html.sv-js .eq-rings span:nth-child(3) { animation-delay: 1.6s; }
@keyframes eqRing { 0% { transform: translate(-50%, -50%) scale(.6); opacity: .9; } 100% { transform: translate(-50%, -50%) scale(1.55); opacity: 0; } }
.eq-spk { left: 50%; top: 44%; width: 50%; aspect-ratio: .78; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; padding: 6% 0; border-radius: 26px; background: linear-gradient(160deg, #20392a, #0a1a10); border: 1px solid rgba(185, 242, 74, .25); box-shadow: 0 50px 80px -30px rgba(0, 0, 0, .85); transform: translate(-50%, -50%); }
.eq-tw { width: 26%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #33523f 25%, #0a1a10 70%); border: 3px solid #2e4a38; }
.eq-cone { position: relative; width: 72%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #1a2e21 0 18%, #0f2217 19% 40%, #1a3324 41% 64%, #081409 65%); border: 6px solid #2e4a38; }
.eq-cone i { position: absolute; inset: 36%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #d7ff85, #7fbf2a 55%, #3f7a1c); }
html.sv-js .eq-cone { animation: eqThump .5s ease-in-out infinite; }
@keyframes eqThump { 50% { transform: scale(1.05); } }
.eq-bars { left: 8%; right: 8%; bottom: 2%; height: 17%; display: flex; align-items: flex-end; gap: 5px; }
.eq-bars i { flex: 1; height: calc(var(--h) * 100%); border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, var(--lime), var(--green)); transform-origin: bottom; }
html.sv-js .eq-bars i { animation: eqBar .8s ease-in-out var(--t) infinite alternate; }
@keyframes eqBar { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
.sx-art--eq .sv-chip--1 { left: -6%; top: 10%; }
.sx-art--eq .sv-chip--2 { right: -8%; top: 36%; }
.sx-art--eq .sv-chip--3 { left: -4%; bottom: 24%; }

/* ─── Mobile shredder (on-site) ───────────────────────────────────────── */
.os-svg { inset: 0; width: 100%; height: 100%; }
.os-eye > circle:first-child { fill: var(--lime); }
.os-eye path { fill: none; stroke: var(--forest); stroke-width: 3.5; stroke-linejoin: round; }
.os-eye > circle:last-child { fill: var(--forest); }
.os-eye { transform-box: fill-box; transform-origin: center; }
html.sv-js .os-eye { animation: osEye 3.2s ease-in-out infinite; }
@keyframes osEye { 0%, 100% { scale: 1; } 20% { scale: 1.12; } }
.sx-art--shred .tk-box { fill: #fff; }
.os-count { left: 0; top: 2%; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 18px; background: rgba(7, 19, 11, .8); border: 1px solid rgba(185, 242, 74, .3); color: #fff; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .6); }
.os-count b { font: 900 34px/1 var(--display); letter-spacing: -.04em; color: var(--lime); font-variant-numeric: tabular-nums; min-width: 1.4ch; }
.os-count span { font: 700 11.5px/1.3 var(--body); color: rgba(255, 255, 255, .76); }
.sx-art--shred .sv-chip--1 { left: -6%; top: 30%; }
.sx-art--shred .sv-chip--2 { right: -8%; top: 44%; }
.sx-art--shred .sv-chip--3 { left: 2%; bottom: -2%; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .sx-cards { grid-template-columns: repeat(min(var(--c, 3), 2), minmax(0, 1fr)); }
  .sx-pts, .sx-pcs, .sx-seals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sx-gay { grid-template-columns: 1fr; justify-items: start; }
  .sx-gay-eq { display: none; }
}
@media (max-width: 980px) {
  .sx-split-v, .sx-streams, .sx-qual, .sx-video, .sx-visit, .sx-calc, .sx-band { grid-template-columns: 1fr; }
  .sx-split-side, .sx-streams-side { position: static; }
  .sx-band .sx-actions { justify-content: flex-start; }
  .sx-states { grid-template-columns: 1fr; gap: 18px; }
  .sx-stateline { display: none; }
  .sx-vs { grid-template-columns: 1fr; gap: 18px; }
  .sx-vs-badge { position: relative; left: auto; top: auto; margin: -34px auto; }
  .sx-cols { columns: 1; }
  .sx-visit-map { min-height: 280px; }
  .sx-art { width: min(100%, 400px); }
}
@media (max-width: 760px) {
  .sx-cards { grid-template-columns: 1fr; }
  .sx-who .sx-list { grid-template-columns: 1fr; }
  .sx-calc-row { grid-template-columns: auto minmax(0, 1fr); }
  .sx-calc-row .sx-stepper { grid-column: 1 / -1; justify-self: start; }
  .sx-vt-step { padding-left: 62px; }
  .sx-vt-dot { width: 46px; height: 46px; font-size: 14px; }
  .sx-vt::before, .sx-vt::after { left: 21px; }
  .sx-vt-card { flex-direction: column; gap: 12px; padding: 20px; }
  .sx-callout { flex-direction: column; }
  .sx-range-notes { flex-direction: column; }
  .sx-art { width: min(100%, 340px); }
  .sx-art .sv-chip { font-size: 12px; }
  .sx-art .sv-chip i { width: 26px; height: 26px; }
  .rc-stamp { border-width: 2px; }
}
@media (max-width: 560px) {
  .sx-pts, .sx-pcs, .sx-seals, .sx-stats { grid-template-columns: 1fr; }
  .sx-pcs { grid-template-columns: 1fr 1fr; }
  .sx-pc { padding: 18px; font-size: 15.5px; }
  .sx-table { font-size: 14px; }
  .sx-state-ab { font-size: 120px; }
  .sx-art .sv-chip--2 { right: -2%; }
  .sx-art .sv-chip--1, .sx-art .sv-chip--3 { left: 0; }
  .gv-coins { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sx *, .sx *::before, .sx *::after { animation: none !important; transition: none !important; }
}

/* boxed notes carried over from the old pages (<strong>Tip:</strong> …) */
.sx-notebox { margin: 22px 0; padding: 18px 22px; border-radius: 18px; border-left: 4px solid var(--green); background: var(--bg-2); font-size: 16.5px; line-height: 1.7; color: var(--fg-2); }
.sx-notebox strong, .sx-notebox b { color: var(--fg); }
.sv-addons-sec .sx-notebox { background: var(--card); }
.sv-dark .sx-notebox { background: rgba(255, 255, 255, .06); border-left-color: var(--lime); color: rgba(255, 255, 255, .82); }
.sv-dark .sx-notebox :is(strong, b) { color: #fff; }


/* ─── Certificate scene (certificates-and-compliance, 2026-09-29) ─────── */
.ct-doc { left: 6%; right: 6%; top: 8%; padding: 22px 22px 18px; border-radius: 10px 26px 10px 10px; background: #fff; color: var(--ink); box-shadow: 0 60px 100px -40px rgba(0, 0, 0, .85); font-size: clamp(10px, 2.8cqw, 13.5px);
  background-image: repeating-linear-gradient(180deg, transparent 0 25px, rgba(7, 19, 11, .04) 25px 26px); }
.ct-doc-top { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 2px solid var(--forest); }
.ct-doc-seal { flex: none; display: grid; place-items: center; width: 3.4em; height: 3.4em; border-radius: 50%; background: var(--forest); color: var(--lime); }
.ct-doc-seal svg { width: 55%; height: 55%; }
.ct-doc-top b { display: block; font: 900 1.35em/1.1 var(--display); letter-spacing: -.02em; }
.ct-doc-top small { font: 600 .82em/1.2 var(--body); color: #5b6b60; }
.ct-doc-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }
.ct-doc-meta small { display: block; font: 800 .7em/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: #5b6b60; }
.ct-doc-meta b { font: 800 .95em/1.3 var(--display); }
.ct-doc-rows { width: 100%; border-collapse: collapse; font-size: .9em; }
.ct-doc-rows th { padding: 5px 4px; text-align: left; font: 800 .75em/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: #5b6b60; border-bottom: 1px solid #e2e8df; }
.ct-doc-rows td { padding: 6px 4px; border-bottom: 1px dashed #e2e8df; }
.ct-doc-rows td:first-child { font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; font-weight: 700; }
html.sv-js .ct-doc-rows tbody tr { animation: ctRow 8s var(--ease) infinite both; animation-delay: calc(var(--i) * .35s); }
@keyframes ctRow { 0% { opacity: 0; transform: translateX(-10px); } 6%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
.ct-doc-sign { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.ct-doc-sign svg { width: 40%; height: auto; fill: none; stroke: var(--forest); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 220; stroke-dashoffset: 0; }
html.sv-js .ct-doc-sign svg { animation: ctSign 8s ease infinite; }
@keyframes ctSign { 0%, 22% { stroke-dashoffset: 220; } 42%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 220; } }
.ct-doc-sign small { font: 600 .78em/1 var(--body); color: #5b6b60; }
.ct-doc-stamp { position: absolute; right: 7%; bottom: 14%; padding: .3em .6em; border: 3px solid var(--green); border-radius: 10px; color: var(--green-dk); background: rgba(255, 255, 255, .6); font: 900 1.9em/1 var(--display); letter-spacing: .12em; text-transform: uppercase; transform: rotate(-12deg); }
html.sv-js .ct-doc-stamp { animation: ctStamp 8s infinite both; }
@keyframes ctStamp { 0%, 44% { opacity: 0; transform: rotate(-12deg) scale(2.2); } 48% { opacity: 1; transform: rotate(-12deg) scale(.92); } 51%, 92% { opacity: 1; transform: rotate(-12deg) scale(1); } 100% { opacity: 0; transform: rotate(-12deg) scale(1); } }
.ct-mail { right: -4%; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 18px; background: var(--lime); color: var(--forest); box-shadow: 0 20px 40px -18px rgba(185, 242, 74, .8); }
.ct-mail > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--forest); color: var(--lime); }
.ct-mail svg { width: 20px; height: 20px; }
.ct-mail b { display: block; font: 800 14px/1.1 var(--display); }
.ct-mail small { font: 700 12px/1.2 var(--body); opacity: .75; }
html.sv-js .ct-mail { animation: ctMail 8s var(--ease) infinite both; }
@keyframes ctMail { 0%, 55% { opacity: 0; transform: translateY(16px) scale(.9); } 62%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.sx-art--cert .sv-chip--1 { left: -8%; top: 0; } .sx-art--cert .sv-chip--2 { right: -8%; top: 36%; } .sx-art--cert .sv-chip--3 { left: -6%; bottom: 4%; }

/* link-only card grid (related services) */
.sx-cards--links .sx-card { flex-direction: row; align-items: center; gap: 14px; padding: 18px 20px; }
.sx-cards--links .sv-tile-ic { flex: none; margin: 0; width: 46px; height: 46px; }
.sx-cards--links .sx-card-n { display: none; }
.sx-cards--links .sx-card .sv-h4 { padding-right: 0; flex: 1; }
.sx-cards--links .sx-go { margin: 0; padding: 0; font-size: 0; }
.sx-cards--links .sx-go span { font-size: 20px; }