.home-how { grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: clamp(40px, 5vw, 80px); }
.home-how .how-copy { align-self: start; padding-top: 48px; }
.home-how h2 { font-size: clamp(44px, 4.8vw, 72px); }
.demo-section-eyebrow { display: block; margin-bottom: 24px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #b5ce9b; }
.home-how .chapter-intro { font-size: 19px; }
.demo-steps { gap: 12px; margin-top: 32px; }
.demo-steps li { display: block; }
.demo-steps button { display: flex; width: 100%; gap: 18px; padding: 19px 18px; border: 1px solid transparent; border-radius: 18px; background: transparent; text-align: left; color: #e3e9dc; cursor: pointer; transition: background .25s, border-color .25s; }
.demo-steps button:hover { background: #ffffff08; }
.demo-steps button[aria-pressed="true"] { background: #ffffff0a; border-color: #b5ce9b45; }
.demo-steps button > span:first-child { display: grid; place-items: center; width: 35px; height: 35px; flex: 0 0 35px; border: 1px solid #ffffff20; border-radius: 50%; color: #b5ce9b; font-size: 12px; transition: background .25s, color .25s; }
.demo-steps button[aria-pressed="true"] > span:first-child { background: #b5ce9b; border-color: #b5ce9b; color: #153c32; }
.demo-steps strong { display: block; margin-bottom: 6px; font-size: 20px; line-height: 1.3; font-weight: 650; letter-spacing: -.025em; }
.demo-steps button > span:last-child > span { display: block; font-size: 15px; line-height: 1.6; color: #bfcbbc; }
.home-how .demo-step-hint { margin: 22px 0 0 18px; font-size: 13px; color: #a7b8a8; }
/* The illustrated walkthrough uses one seekable timeline. */
.restock-film { min-width: 0; width: 100%; align-self: center; }
.film-topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #c9d6b9; margin-bottom: 16px; }
.film-topline > span:first-child { font-size: 13px; }
.film-topline > span:last-child { font-size: 9px; letter-spacing: .13em; }
.film-stage { position: relative; aspect-ratio: 600 / 550; overflow: hidden; isolation: isolate; border-radius: 22px; background: #e5ead6; box-shadow: 0 24px 60px #061f2626; container-type: inline-size; color: #294b3b; }
.film-scene { position: absolute; inset: 0; overflow: hidden; opacity: 0; pointer-events: none; }
.film-scan { opacity: 1; transform-origin: 57% 45%; }
.scan-art { display: block; width: 100%; height: 100%; }
.film-head { transform-origin: 208px 220px; }
.film-arm { transform-origin: 244px 249px; }
.film-scan-beam, .film-scan-found { opacity: 0; }
.film-scene-caption { position: absolute; left: 0; right: 0; bottom: 3.8%; text-align: center; font-size: 2.35cqw; font-weight: 550; color: #5e7253; }
.film-select { background: #e7ecd9; }
.film-floating-label { position: absolute; top: 5.4%; left: 0; width: 100%; text-align: center; color: #57734b; font-size: 2.4cqw; letter-spacing: .015em; }
.film-phone { position: absolute; width: 57%; height: 85%; top: 10%; left: 21.5%; border: .7cqw solid #314f3f; border-radius: 5cqw; background: #fbfaf3; box-shadow: 2cqw 3cqw 0 #b7c6a840, 0 2cqw 5cqw #4f674d19; transform-origin: 50% 65%; overflow: hidden; }
.film-phone-top { display: flex; justify-content: space-between; margin: 2cqw 3.2cqw 2cqw; font-size: 1.55cqw; font-weight: 700; }
.film-phone-content { padding: 0 3cqw; }
.film-phone-brand { display: block; font-size: 3.3cqw; letter-spacing: -.07em; font-weight: 800; margin-bottom: 3cqw; }
.film-phone-location { display: block; font-size: 1.5cqw; letter-spacing: .1em; color: #6e8164; }
.film-phone h3 { font-size: 3.6cqw; line-height: 1.2; letter-spacing: -.045em; color: #294b3b; margin: 1cqw 0; font-weight: 700; }
.film-phone p { font-size: 2cqw; margin: 0 0 2.3cqw; line-height: 1.5; color: #7c8973; }
.film-item { display: flex; align-items: center; gap: 1.3cqw; padding: 1.3cqw; margin-top: 1.15cqw; border: 1px solid #dce2d2; border-radius: 1.7cqw; background: #fffefa; height: 9cqw; }
.film-checkbox { display: grid; place-items: center; width: 2.6cqw; height: 2.6cqw; border: 1px solid #bdcab1; border-radius: .6cqw; flex-shrink: 0; }
.film-checkbox .icon { width: 2.3cqw; height: 2.3cqw; opacity: 0; color: #fff; }
.film-item .demo-supply-icon { width: 6.6cqw; height: 6.6cqw; flex-shrink: 0; }
.film-item > span:nth-last-child(2), .film-item > span:last-child { font-size: 2.15cqw; font-weight: 650; }
.film-item small { display: block; font-size: 1.7cqw; font-weight: 400; margin-top: .4cqw; color: #7b8871; }
.film-item-quantity { display: grid; place-items: center; margin-left: auto; width: 4.7cqw; height: 4.7cqw; border-radius: 1cqw; background: white; border: 1px solid #c5d3b7; font-size: 2.3cqw; opacity: 0; }
.film-urgency { display: flex; align-items: center; gap: 1cqw; font-size: 1.9cqw; margin: 2cqw 0; }
.film-urgency > span { width: 1.6cqw; height: 1.6cqw; border-radius: 50%; background: #728d58; box-shadow: 0 0 0 .4cqw #e3ead8; }
.film-send { display: flex; align-items: center; justify-content: space-between; background: #295d46; color: #fff; font-size: 2.4cqw; font-weight: 600; padding: 2.1cqw 2.6cqw; border-radius: 1.5cqw; transform-origin: center; }
.film-send .icon { width: 3cqw; height: 3cqw; }
.film-hand { position: absolute; left: 60%; top: 68%; width: 29%; height: auto; overflow: visible; transform-origin: 40% 85%; }
.film-sent { display: flex; flex-direction: column; align-items: center; justify-content: center; background: #dfe9cc; }
.film-check { display: grid; place-items: center; width: 18cqw; height: 18cqw; border-radius: 50%; background: #477551; color: #fff; box-shadow: 0 0 0 3cqw #4775510b; margin-bottom: 5cqw; }
.film-check svg { width: 14cqw; height: 14cqw; }
.film-check path { stroke-dasharray: 60; stroke-dashoffset: 60; }
.film-sent > span { font-size: 1.9cqw; letter-spacing: .14em; color: #5e7c50; }
.film-stage .film-sent h3, .film-stage .film-qr h3 { font-size: 7.2cqw; line-height: 1.1; font-weight: 600; letter-spacing: -.06em; color: #294b3b; margin: 1.5cqw 0 2cqw; }
.film-stage .film-sent p, .film-stage .film-qr p { text-align: center; font-size: 2.7cqw; line-height: 1.6; color: #69815b; margin: 0; }
.film-receipt { display: flex; align-items: center; gap: 1.2cqw; margin-top: 7cqw; padding: 2cqw 3cqw; border-top: 1px solid #bacba8; }
.film-receipt .demo-supply-icon { width: 6cqw; height: 6cqw; }
.film-receipt > span { font-size: 2cqw; }
.film-receipt b { margin-left: 1cqw; font-size: 1.8cqw; color: #7e956d; }
.film-qr { display: flex; flex-direction: column; align-items: center; justify-content: center; background: #f1f0e3; }
.film-qr-eyebrow { font-size: 1.8cqw; letter-spacing: .16em; color: #758366; }
.film-qr-paper { margin: 4cqw 0 3cqw; padding: 2cqw 2cqw 3cqw; background: #fff; border-radius: 1.3cqw; box-shadow: 0 1cqw 0 #dedfce, 0 3cqw 7cqw #52604419; transform: rotate(-3deg); text-align: center; }
.film-qr-paper img { width: 34cqw; height: 34cqw; display: block; }
.film-qr-paper > span { display: block; font-size: 1.5cqw; font-weight: 600; letter-spacing: .13em; color: #6e7e60; margin-top: 1cqw; }
.film-qr-note { font-size: 2cqw; color: #778568; }
.film-controls { display: flex; align-items: center; gap: 15px; margin: 18px 0; color: #c8d6bc; }
.film-controls[hidden] { display: none; }
.film-controls button { border: 0; background: transparent; color: inherit; padding: 5px 0; width: 46px; text-align: left; cursor: pointer; font-size: 12px; }
.film-controls input { flex: 1; min-width: 0; height: 3px; accent-color: #b5ce9b; cursor: pointer; }
.film-controls > span { font-size: 10px; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.film-demo-link { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid #ffffff20; padding-top: 18px; margin-top: 18px; }
.film-demo-link > span { font-size: 12px; color: #9fb79d; }
.film-demo-link a { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: #d4e7bc; text-underline-offset: 5px; }
.film-demo-link .icon { width: 16px; height: 16px; }
.demo-experience { color: #153c32; font-size: 14px; line-height: 1.5; }
.demo-experience [hidden] { display: none !important; }
.demo-experience :is(button, input, textarea) { font: inherit; }
.demo-experience :is(button, a, input, textarea, summary):focus-visible { outline: 3px solid #81a65f; outline-offset: 4px; }
.demo-experience button { cursor: pointer; }
.demo-experience h3 { font-size: 25px; letter-spacing: -.04em; color: #153c32; }
.demo-experience p { color: #697a6c; font-size: 13px; line-height: 1.6; }
.demo-eyebrow { display: block; font-size: 10px; letter-spacing: .08em; color: #697a6c; text-transform: uppercase; font-weight: 700; }
.demo-supply-icon { width: 38px; height: 38px; flex-shrink: 0; }
.demo-button { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; min-height: 50px; border: 0; border-radius: 12px; padding: 13px 18px; color: white; background: #26765b; font-size: 14px; font-weight: 650; }
.demo-button:hover { background: #1b5c45; }
.demo-button .icon { width: 19px; height: 19px; }
.demo-request-form fieldset { padding: 0; border: 0; margin: 0; min-width: 0; }
.demo-form-heading { margin-bottom: 18px; }
.demo-form-heading p { margin: 8px 0 0; }
.demo-choices { display: grid; gap: 8px; }
.demo-choice { display: flex; align-items: center; gap: 10px; border: 1px solid #dfe5d9; padding: 10px 12px; border-radius: 13px; background: #fff; transition: border-color .25s, background .25s, box-shadow .25s; }
.demo-choice:has(input[type="checkbox"]:checked) { background: #f0f5e9; border-color: #94ae81; box-shadow: 0 0 0 1px #94ae8120; }
.demo-choice > input { margin: 0; width: 17px; height: 17px; flex-shrink: 0; accent-color: #26765b; cursor: pointer; }
.demo-choice > label { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; cursor: pointer; font-size: 13px; font-weight: 650; }
.demo-choice small { display: block; font-size: 10px; font-weight: 500; color: #788471; margin-top: 2px; }
.demo-quantity { display: flex; align-items: center; border: 1px solid #dfe5d9; background: #fff; border-radius: 9px; overflow: hidden; flex-shrink: 0; }
.demo-quantity button { width: 28px; height: 36px; padding: 0; border: 0; background: transparent; color: #365e42; font-size: 18px; }
.demo-quantity button:disabled { color: #b5beb0; }
.demo-quantity input { width: 44px; height: 36px; min-width: 0; padding: 0 2px; border: 0; background: transparent; text-align: center; color: #153c32; font-size: 12px; appearance: textfield; -moz-appearance: textfield; }
.demo-quantity input::-webkit-inner-spin-button, .demo-quantity input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.demo-request-form .demo-priority { margin-top: 21px; }
.demo-priority legend { font-size: 12px; font-weight: 700; margin-bottom: 9px; }
.demo-priority > div { display: flex; gap: 8px; }
.demo-priority label { display: flex; align-items: center; gap: 7px; padding: 10px 11px; border: 1px solid #dfe5d9; border-radius: 9px; font-size: 11px; cursor: pointer; }
.demo-priority label:has(input:checked) { background: #e9f0e0; border-color: #a2b790; }
.demo-priority label:has(input[value="urgent"]:checked) { background: #fbefe0; border-color: #d6b587; color: #78512d; }
.demo-priority input { margin: 0; accent-color: #26765b; }
.demo-notes { margin: 15px 0 18px; }
.demo-notes summary { font-size: 12px; color: #65795f; cursor: pointer; }
.demo-notes textarea { display: block; width: 100%; resize: vertical; margin-top: 10px; border: 1px solid #becbb5; border-radius: 10px; padding: 12px; background: white; color: #153c32; }
.demo-experience .demo-form-error { color: #a1372b; margin-bottom: 12px; }

.demo-standalone { max-width: 650px; padding: 0 24px 64px; margin: 0 auto; }
.demo-page-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; padding: 28px 0 45px; }
.demo-page-header > a:last-child { font-size: 11px; color: #60725d; }
.demo-page-header > a:last-child .icon { width: 14px; height: 14px; }
.demo-page-intro { margin-bottom: 26px; }
.demo-page-intro h1 { font-size: clamp(34px, 7vw, 48px); letter-spacing: -.06em; line-height: 1.12; margin: 10px 0 14px; }
.demo-page-intro p { font-size: 16px; line-height: 1.65; color: #66776d; margin: 0; }
.demo-form-shell { padding: 28px; border: 1px solid #dae2d3; border-radius: 20px; background: #f8f9f3; }
.demo-experience .demo-disclaimer { margin: 20px 0 0; font-size: 11px; color: #6b7c61; text-align: center; }
.demo-form-success { padding: 20px 0; }
.demo-form-success h2 { font-size: 32px; letter-spacing: -.05em; margin: 20px 0 16px; }
.demo-success-icon { display: grid; place-items: center; width: 52px; height: 52px; background: #e5efd9; color: #547b43; border-radius: 50%; }
.demo-success-icon .icon { width: 26px; height: 26px; }
.demo-form-success ul { list-style: none; padding: 0; margin: 26px 0; }
.demo-form-success li { display: flex; justify-content: space-between; border-top: 1px solid #dce4d4; padding: 12px 0; gap: 20px; }
.demo-form-success li span { color: #708066; }
.demo-page-footer { text-align: center; margin-top: 38px; border-top: 1px solid #dce4d4; padding-top: 28px; }
.demo-page-footer p { font-size: 14px; color: #65755e; margin-bottom: 20px; }
@media (max-width: 1100px) and (min-width: 801px) {
    .home-how { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 30px; }
    .home-how h2 { font-size: 44px; }
    .home-how .chapter-intro { font-size: 17px; }
    .demo-steps button { padding: 14px 10px; gap: 12px; }
    .demo-steps strong { font-size: 18px; }
    .demo-steps button > span:last-child > span { font-size: 13px; }
    .film-topline > span:last-child { display: none; }
    .film-demo-link { flex-wrap: wrap; }
}
@media (max-width: 800px) {
    .home-how { grid-template-columns: minmax(0, 1fr); gap: 34px; }
    .home-how .how-copy { padding-top: 0; max-width: none; }
    .home-how h2 { font-size: clamp(40px, 8vw, 62px); }
    .restock-film { max-width: 600px; margin-inline: auto; }
    .demo-steps { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .demo-steps button { flex-direction: column; gap: 12px; padding: 12px 8px; height: 100%; }
    .demo-steps strong { font-size: 14px; margin: 0; }
    .demo-steps button > span:last-child > span { display: none; }
    .home-how .demo-step-hint { margin-left: 0; }
}
@media (max-width: 480px) {
    .film-topline > span:first-child { font-size: 11px; }
    .film-topline > span:last-child { font-size: 7px; }
    .film-demo-link { flex-wrap: wrap; }
    .film-stage { border-radius: 15px; }
    .demo-standalone { padding-inline: 16px; }
    .demo-form-shell { padding: 20px 12px; }
    .demo-choice { padding: 10px 8px; gap: 7px; }
    .demo-choice > label { font-size: 12px; gap: 5px; }
    .demo-choice .demo-supply-icon { width: 27px; height: 27px; }
    .demo-quantity button { width: 26px; height: 40px; }
    .demo-quantity input { width: 35px; height: 40px; font-size: 16px; }
    .demo-notes textarea { font-size: 16px; }
    .demo-priority label { font-size: 10px; padding: 10px 9px; }
}