/* Home: the retailer marks, a marquee that fades at the sides (scripts/build_marks.py writes this file; Home alone loads it). Each mark is an alpha mask of its own file, tinted by
   the text color; the strip is the fifteen twice, and the loop moves it by half. marquee.mjs takes the strip over from the CSS loop (.is-driven): a drag moves it, it holds while held,
   hovered or focused, and it does not scroll by itself under reduced motion. touch-action keeps the page's vertical scroll on touch. */
.marks { padding: 64px var(--side) 0; display: grid; gap: 16px; }
.marks-window { position: relative; overflow: hidden; height: 40px; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: pan-y; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marks-window.is-held { cursor: grabbing; }
.marks-window:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.marks-strip { position: absolute; left: 0; top: 11px; display: flex; width: max-content; animation: marks 90s linear infinite; }
.marks-window.is-driven .marks-strip { animation: none; will-change: transform; }
.marks-run { display: flex; align-items: center; flex: none; gap: 48px; padding-right: 48px; }
.mark { flex: none; background: var(--text); -webkit-mask: var(--m) center / 100% 100% no-repeat; mask: var(--m) center / 100% 100% no-repeat; pointer-events: none; }
@keyframes marks { to { transform: translateX(-50%); } }
@media (max-width: 767px) { .marks { padding-top: 48px; } }
.mark.brookstone{--m:url(/assets/home/marks/brookstone.png?v=3e7aa04d);width:99px;height:16px}
.mark.walmart{--m:url(/assets/home/marks/walmart.png?v=f37890fe);width:75px;height:18px}
.mark.disney{--m:url(/assets/home/marks/disney.png?v=79b15221);width:44px;height:18px}
.mark.costco{--m:url(/assets/home/marks/costco.png?v=db97a8f7);width:61px;height:18px}
.mark.qvc{--m:url(/assets/home/marks/qvc.png?v=ae7caf5e);width:48px;height:18px}
.mark.target{--m:url(/assets/home/marks/target.png?v=151a4c57);width:100px;height:16px}
.mark.amazon{--m:url(/assets/home/marks/amazon.png?v=81417e99);width:59px;height:18px}
.mark.the-home-depot{--m:url(/assets/home/marks/the-home-depot.png?v=52726504);width:18px;height:18px}
.mark.lowes{--m:url(/assets/home/marks/lowes.png?v=7147283c);width:39px;height:18px}
.mark.kohls{--m:url(/assets/home/marks/kohls.png?v=c7b7becc);width:100px;height:15.5px}
.mark.exchange{--m:url(/assets/home/marks/exchange.png?v=89e6c9f7);width:24px;height:18px}
.mark.bjs{--m:url(/assets/home/marks/bjs.png?v=5e58b0d3);width:21.5px;height:18px}
.mark.wayfair{--m:url(/assets/home/marks/wayfair.png?v=2ff279da);width:82px;height:18px}
.mark.nex{--m:url(/assets/home/marks/nex.png?v=22702fb5);width:23.5px;height:18px}
.mark.staples{--m:url(/assets/home/marks/staples.png?v=d0ec81c4);width:97.5px;height:18px}

/* w2-1: Home */
.statement-text .marks { padding: 0; gap: 4px; }
.statement-text .marks .corners { gap: 4px 12px; }  /* the frames hold both labels in one 624 px row: 313 + 290 + 6 px of trailing tracking leaves 15 for the gap */
.statement-text .marks-window { height: 32px; }
.statement-text .marks .label { color: var(--text); }  /* the two labels sit on the glass card over the tunnel: in the dim text color they fell to 2.76:1 by Night and 3.10:1 by Day (R45); the text color holds 4.5:1 */
.statement-text .marks-strip { top: 7px; }
@media (max-width: 767px) { .statement-text .marks { padding-top: 0; } }  /* wave 1: one sentence-case label, untracked (the two tracked labels went) */