:root {
  color-scheme: light;
  --bg: #f2f4f6; --panel: #ffffff; --line: #e1e5e9; --text: #14171b; --muted: #5b6570; --faint: #8a939c;
  --teal: #13A8B6; --teal-ink: #0f8f9b; --teal-soft: #e8f5f6; --teal-line: #b9dfe2; --good: #1d8a4f; --good-soft: #e6f4ec; --warn: #935d0f;
  --shadow: 0 1px 2px rgba(20, 23, 27, .05), 0 8px 24px rgba(20, 23, 27, .06); --on-teal: #fff;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.5 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
a { color: var(--teal-ink); }
.top { background: #ffffff; border-bottom: 3px solid #13A8B6; }
.brand { display: flex; align-items: center; gap: 14px; max-width: 760px; margin: 0 auto; padding: 16px; text-decoration: none; }
.logo { position: relative; width: 116px; aspect-ratio: 349 / 96; flex: none; }
.logo img, .logo .lab { position: absolute; inset: 0; width: 100%; height: 100%; }
.logo .lab { background: #14171b; -webkit-mask: url(/logo-lab.png) center / 100% 100% no-repeat; mask: url(/logo-lab.png) center / 100% 100% no-repeat; }
.brand-sub { color: #5b6570; font-size: 14px; border-left: 1px solid #e1e5e9; padding-left: 14px; }
main { max-width: 760px; margin: 0 auto; padding: 24px 16px 8px; }
.loading { color: var(--muted); }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 24px; margin-bottom: 16px; }
.eyebrow { font-size: 12px; letter-spacing: .6px; text-transform: uppercase; color: var(--teal-ink); font-weight: 700; margin: 0 0 6px; }
h1 { font-size: 26px; line-height: 1.2; margin: 0 0 6px; }
h2 { font-size: 16px; margin: 0 0 12px; }
.refs { color: var(--muted); margin: 0; }
.refs b { color: var(--text); font-weight: 600; }

/* lookup */
.find h1 { margin-bottom: 4px; }
.find p.lead { color: var(--muted); margin: 0 0 20px; }
.field { display: block; margin-bottom: 14px; }
.field span { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.field input { width: 100%; height: 46px; padding: 0 14px; font: inherit; font-size: 16px; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; }
.field input:focus { outline: 2px solid var(--teal); outline-offset: 1px; border-color: transparent; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 22px; border-radius: 10px; font: inherit; font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer; border: 1px solid var(--teal); background: var(--teal); color: var(--on-teal); }
.btn:hover { filter: brightness(1.06); }
.btn[disabled] { opacity: .6; cursor: default; }
.btn.ghost { background: transparent; color: var(--teal-ink); border-color: var(--teal-line); }
.btn.wide { width: 100%; }
.err { color: #c0392b; margin: 12px 0 0; }
.hint { color: var(--faint); font-size: 13px; margin: 14px 0 0; }

/* shipments */
/* 2.169.5 one switcher at the top of the card, oldest first, each with its state */
.ships-head { margin: 0 0 22px; }
.ships-lbl { margin: 0 0 8px; font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.ships { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); overflow-x: auto; }
.ship-tab { display: grid; gap: 2px; text-align: left; border: 1px solid transparent; background: transparent; color: var(--muted); border-radius: 9px; padding: 8px 12px; font: inherit; cursor: pointer; min-height: 48px; min-width: 120px; }
.ship-tab b { font-size: 14px; font-weight: 700; color: var(--text); }
.ship-tab span { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ship-tab[aria-selected="true"] { background: var(--panel); border-color: var(--teal); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.ship-tab[aria-selected="true"] b { color: var(--teal-ink); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 22px 0 6px; list-style: none; padding: 0; }
.step { position: relative; text-align: center; padding-top: 34px; font-size: 13px; color: var(--faint); }
.step::before { content: ""; position: absolute; top: 12px; left: -50%; right: 50%; height: 3px; background: var(--line); }
.step:first-child::before { display: none; }
.step .dot { position: absolute; top: 2px; left: 50%; transform: translateX(-50%); width: 24px; height: 24px; border-radius: 50%; background: var(--panel); border: 3px solid var(--line); z-index: 1; }
.step b { display: block; color: var(--muted); font-size: 14px; }
.step[data-on="done"] .dot { background: var(--teal); border-color: var(--teal-ink); }
.step[data-on="done"] .dot::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.step[data-on="done"]::before, .step[data-on="now"]::before { background: var(--teal); }
.step[data-on="now"] .dot { border-color: var(--teal-ink); }
.step[data-on="now"] .dot::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--teal); animation: beat 1.6s ease-in-out infinite; }
.step[data-on="done"] b, .step[data-on="now"] b { color: var(--text); }
@keyframes beat { 50% { transform: scale(.55); opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .step[data-on="now"] .dot::after { animation: none; } }
.track { background: var(--teal-soft); border-left: 4px solid var(--teal); border-radius: 10px; padding: 14px 18px; margin: 20px 0 0; }
.track .lbl { font-size: 12px; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.track .num { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 2px 0; }
.track .num a, .track .num span.n { font-size: 19px; font-weight: 700; letter-spacing: .5px; white-space: nowrap; text-decoration: none; color: var(--teal-ink); }
.copy { border: 1px solid var(--teal-line); background: transparent; color: var(--teal-ink); border-radius: 8px; font: inherit; font-size: 13px; padding: 4px 10px; cursor: pointer; min-height: 32px; }
.track .sub { color: var(--muted); font-size: 14px; }
.acts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.note { color: var(--muted); font-size: 13px; margin: 14px 0 0; }
dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 18px 0 0; }
dl.facts dt { color: var(--muted); }
dl.facts dd { margin: 0; }
.items { list-style: none; margin: 0; padding: 0; }
.items li { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.items li:first-child { border-top: 0; padding-top: 0; }
.items .sku { color: var(--faint); font-size: 12px; }
.qty { background: var(--bg); border-radius: 999px; padding: 3px 10px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.again { text-align: center; margin: 8px 0 0; }
.foot { max-width: 760px; margin: 0 auto; padding: 8px 16px 40px; color: var(--muted); font-size: 13px; text-align: center; }
.foot .addr { color: var(--faint); }
@media (max-width: 520px) {
  main { padding-top: 16px; }
  .card { padding: 18px; border-radius: 12px; }
  h1 { font-size: 22px; }
  .acts .btn { flex: 1 1 100%; }
  .track .num a, .track .num span.n { font-size: 17px; }
}
/* 2.151 still to come */
.note.above { margin: -6px 0 10px; }
.left-side { text-align: right; }
.left-side .when { font-size: 12px; color: var(--muted); margin-top: 4px; white-space: nowrap; }
.left-side .when[data-back] { color: var(--warn); font-weight: 600; }
.steps.four { grid-template-columns: repeat(4, 1fr); }

/* 2.153 top links and banners (keep the links in step with worker/src/emailPromo.js) */
.top { display: block; }
.nav { max-width: 760px; margin: 0 auto; padding: 0 16px 12px; display: flex; gap: 6px 18px; flex-wrap: wrap; }
.nav a { color: var(--text); text-decoration: none; font-weight: 600; font-size: 14px; }
.nav a:hover { color: var(--teal-ink); }
.promos { max-width: 760px; margin: 0 auto; padding: 8px 16px 0; display: grid; gap: 12px; }
/* 2.157 (Matt: the teal side bar read like AI): "More from USA Lab" like the emails, a spec sheet section head and
   two columns with a teal icon tile each, no boxes */
.promos-head { margin: 0 0 18px; padding-bottom: 8px; border-bottom: 1.5px solid var(--text); font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; font-weight: 700; color: var(--teal-ink); }
.promos-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.promo { display: block; text-decoration: none; color: var(--muted); font-size: 14px; }
.promo img { display: block; width: 40px; height: 40px; margin-bottom: 12px; }
.promo strong { display: block; color: var(--text); font-size: 16px; line-height: 1.35; margin: 0 0 4px; }
.promo .txt { display: block; }
.promo .go { display: inline-block; margin-top: 10px; color: var(--teal-ink); font-weight: 700; font-size: 15px; white-space: nowrap; }
.promo:hover .go { text-decoration: underline; }
@media (max-width: 520px) { .promos-cols { grid-template-columns: 1fr; gap: 24px; } }

/* 2.158 item pictures, the size picked, documents */
.items .item { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.items .pic { flex: none; width: 52px; height: 52px; border: 1px solid var(--line); border-radius: 8px; background: #fff; overflow: hidden; display: grid; place-items: center; }
.items .pic img { width: 100%; height: 100%; object-fit: contain; }
.items .pic.none { background: var(--bg); }
.items .nm a { color: inherit; text-decoration: none; font-weight: 600; }
.items .nm a:hover { color: var(--teal-ink); }
.items .nm span { font-weight: 600; }
.items .opt { color: var(--teal-ink); font-size: 13px; font-weight: 600; }
.docs { list-style: none; margin: 0; padding: 0; }
.docs li { padding: 12px 0; border-top: 1px solid var(--line); }
.docs li:first-child { border-top: 0; padding-top: 0; }
.docs .nm { font-weight: 600; }
.docs .links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 4px; }
.docs .links a { color: var(--teal-ink); font-weight: 700; text-decoration: none; }
.docs .coa-more { border: 0; background: none; padding: 0; font: inherit; color: var(--teal-ink); font-weight: 600; cursor: pointer; }
.docs .coa-more:hover { text-decoration: underline; }
.docs .coa-list { list-style: none; margin: 8px 0 0; padding: 0 0 0 4px; display: grid; gap: 6px; }
.docs .coa-list a { color: var(--teal-ink); font-weight: 600; text-decoration: none; }
.docs .coa-list a::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; background: url(/email-icon-doc.png) center / contain no-repeat; }
.docs .coa-list li, .sec .docs .coa-list li { padding: 0; border: 0; }
.docs .coa-d { color: var(--muted); font-size: 13px; margin-left: 10px; }
.docs .links a::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; background: url(/email-icon-doc.png) center / contain no-repeat; }


.promo { align-content: start; }

/* 2.158.1 (Matt: the tinted footer looked weird, the colours read darker than ours, phone and email up top,
   the lookup page bland): brand teal, More from USA Lab as a plain card like the rest, contact in the header,
   a teal hero on the lookup page with three things the page gives you */
.promos { max-width: 760px; margin: 8px auto 0; padding: 0 16px; display: block; }
.promos > .promos-in { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 22px 24px 24px; }
.promos-head { border-bottom: 0; margin: 0 0 16px; color: var(--teal-ink); }
.promo { display: grid; grid-template-columns: 36px 1fr; column-gap: 12px; align-items: center; align-content: start; }
.promo img { width: 36px; height: 36px; margin: 0; }
.promo strong { margin: 0; }
.promo .txt, .promo .go { grid-column: 1 / -1; }
.promo .txt { margin-top: 8px; }
.promo .go { margin-top: 6px; justify-self: start; }
.foot { padding-top: 22px; }
.top-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 760px; margin: 0 auto; padding: 0 16px; }
.top-row .brand { padding: 16px 0; margin: 0; max-width: none; }
.contact { display: flex; gap: 6px 16px; flex-wrap: wrap; justify-content: flex-end; font-size: 14px; font-weight: 600; }
.contact a { color: var(--text); text-decoration: none; white-space: nowrap; }
.contact a:hover { color: var(--teal-ink); }
@media (max-width: 600px) { .top-row { flex-wrap: wrap; } .top-row .brand { padding-bottom: 6px; } .contact { justify-content: flex-start; font-size: 13px; padding-bottom: 8px; } }
.hero { background: #13A8B6; background-image: linear-gradient(135deg, #13A8B6 0%, #0f8f9b 100%); color: #fff; }
.hero-in { max-width: 760px; margin: 0 auto; padding: 34px 16px 70px; }
.hero h1 { color: #fff; font-size: 32px; margin: 0 0 8px; }
.hero p { margin: 0; color: #e6f8fa; font-size: 16px; max-width: 520px; }
.hero .eyebrow { color: #d3f2f5; }
main.has-hero { margin-top: -54px; position: relative; }
.find.card { padding: 26px; }
.find form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; }
.find form .err { grid-column: 1 / -1; }
.find .field { margin: 0; }
@media (max-width: 680px) { .find form { grid-template-columns: 1fr; } .hero h1 { font-size: 26px; } }
.perks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 4px 0 16px; }
.perk { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 18px; box-shadow: var(--shadow); }
.perk svg { width: 34px; height: 34px; display: block; margin-bottom: 10px; }
.perk b { display: block; font-size: 15px; margin-bottom: 4px; }
.perk span { color: var(--muted); font-size: 14px; }
@media (max-width: 680px) { .perks { grid-template-columns: 1fr; } }
/* 2.159.2 (Matt: "make the tracking pages feel alive"): the line fills in when the page opens, the stretch ahead of
   the current step moves, a truck rides toward Delivered, and the hero's photo drifts. All off under reduced motion. */
.step::before { background-image: linear-gradient(var(--teal), var(--teal)); background-repeat: no-repeat; background-size: 0 100%; }
/* 2.163.3 (Matt: Confirmed to Processing read grey): the earlier rule's background shorthand dropped the teal
   picture, so the line showed only its grey; it's set again here, so done stretches fill in solid teal */
.step[data-on="done"]::before, .step[data-on="now"]::before { background-color: var(--line); background-image: linear-gradient(var(--teal), var(--teal)); background-repeat: no-repeat; background-size: 100% 100%; animation: fill .7s ease-out both; }
.step:nth-child(3)::before { animation-delay: .35s; }
.step:nth-child(4)::before { animation-delay: .7s; }
@keyframes fill { from { background-size: 0 100%; } }
.step[data-on="now"] + .step::before { background: repeating-linear-gradient(90deg, var(--teal) 0 7px, transparent 7px 13px); opacity: .5; animation: march .9s linear infinite; }
@keyframes march { from { background-position: 0 0; } to { background-position: 13px 0; } }
.step[data-on="now"] .dot { box-shadow: 0 0 0 0 rgba(19, 168, 182, .45); animation: ring 2s ease-out infinite; }
@keyframes ring { 70% { box-shadow: 0 0 0 10px rgba(19, 168, 182, 0); } 100% { box-shadow: 0 0 0 0 rgba(19, 168, 182, 0); } }
.rider { position: absolute; top: 3px; left: calc(-50% + 16px); width: 22px; height: 22px; color: var(--teal-ink); z-index: 2; animation: ride 3.6s ease-in-out infinite; }
.rider svg { width: 20px; height: 20px; padding: 0 2px; display: block; background: var(--panel); border-radius: 6px; }
@keyframes ride { 0% { left: calc(-50% + 16px); opacity: 0; } 12% { opacity: 1; } 78% { opacity: 1; } 92%, 100% { left: calc(50% - 40px); opacity: 0; } }
.hero { position: relative; overflow: hidden; background: #0f6f78; }
.hero-in { position: relative; z-index: 1; }
/* 2.159.3 the warehouse photos, under a teal wash so the words read */
.hero .photo { position: absolute; inset: 0; background-size: cover; background-position: center; animation: drift 28s ease-in-out infinite alternate; }
.hero .photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(10, 92, 101, .92) 0%, rgba(15, 143, 155, .78) 45%, rgba(19, 168, 182, .35) 100%); }
.hero.slim .photo::after { background: linear-gradient(180deg, rgba(10, 92, 101, .55) 0%, rgba(15, 143, 155, .35) 100%); }
.photo.p1 { background-image: url("/hero-1.webp"); }
.photo.p2 { background-image: url("/hero-2.webp"); }
.photo.p3 { background-image: url("/hero-3.webp"); }
.photo.p4 { background-image: url("/hero-4.webp"); }
@keyframes drift { from { transform: scale(1.02); } to { transform: scale(1.1) translateX(-1.5%); } }
.hero.slim { height: 150px; }
main.has-band { margin-top: -96px; position: relative; }
.hero .hero-in { padding: 44px 16px 82px; }
.hero h1 { text-shadow: 0 1px 12px rgba(0, 0, 0, .18); }
.subsave { display: block; box-sizing: border-box; max-width: 760px; margin: 0 auto 16px; padding: 0 16px; }
.subsave img { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--line); box-shadow: var(--shadow); }
@media (max-width: 680px) { .hero.slim { height: 110px; } main.has-band { margin-top: -64px; } }
.find.card, .perk { animation: up .5s ease-out both; }
.perk:nth-child(2) { animation-delay: .08s; }
.perk:nth-child(3) { animation-delay: .16s; }
@keyframes up { from { transform: translateY(10px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .step::before, .step[data-on="now"] .dot, .rider, .hero .photo, .find.card, .perk, .step[data-on="now"] + .step::before { animation: none !important; }
}

/* 2.160 (Matt: the header didn't look right on phones): one row of logo + Call / Email pills, "Order tracking"
   left off, the links one line that swipes sideways */
@media (max-width: 600px) {
  .top-row { flex-wrap: nowrap; }
  .top-row .brand { padding: 12px 0; }
  .brand-sub { display: none; }
  .contact { flex-wrap: nowrap; gap: 8px; padding: 0; font-size: 0; }
  .contact a { font-size: 13px; font-weight: 700; color: var(--teal-ink); border: 1.5px solid var(--teal); border-radius: 999px; padding: 6px 12px; line-height: 1; }
  .contact a[href^="tel:"] { font-size: 0; }
  .contact a[href^="tel:"]::before { content: "Call"; font-size: 13px; }
  .contact a[href^="mailto:"] { font-size: 0; }
  .contact a[href^="mailto:"]::before { content: "Email"; font-size: 13px; }
  .nav { flex-wrap: nowrap; overflow-x: auto; gap: 18px; padding: 2px 16px 12px; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { font-size: 13px; white-space: nowrap; }
}

/* 2.160 live delivery status (Shippo): the latest scan, a problem in amber, the scan history */
.scan { margin: 16px 0 0; padding: 12px 16px; border-radius: 10px; background: var(--teal-soft); display: grid; gap: 2px; font-size: 14px; }
.scan b { color: var(--teal-ink); font-size: 13px; letter-spacing: .5px; text-transform: uppercase; }
.scan .scan-meta { color: var(--muted); font-size: 13px; }
.scan[data-state="problem"], .scan[data-state="returned"] { background: #fdf3e3; }
.scan[data-state="problem"] b, .scan[data-state="returned"] b { color: var(--warn); }
.scan[data-state="delivered"] { background: var(--good-soft); }
.scan[data-state="delivered"] b { color: var(--good); }
.step[data-warn] .dot { border-color: #c98a2b; }
.step[data-warn] .dot::after { background: #e0a458; }
.step[data-warn] b { color: var(--warn); }
.history { list-style: none; margin: 0; padding: 0; }
.history li { display: grid; grid-template-columns: 18px 1fr; gap: 12px; position: relative; padding: 0 0 16px; font-size: 14px; }
.history li::before { content: ""; position: absolute; left: 6px; top: 14px; bottom: 0; width: 2px; background: var(--line); }
.history li:last-child { padding-bottom: 0; }
.history li:last-child::before { display: none; }
.history .hdot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line); background: var(--panel); margin-top: 2px; z-index: 1; }
.history li:first-child .hdot { background: var(--teal); border-color: var(--teal-ink); }
.history li[data-state="problem"] .hdot, .history li[data-state="returned"] .hdot { border-color: #c98a2b; }
.history b { font-weight: 600; }
.history .hmeta { color: var(--muted); font-size: 13px; margin-top: 2px; }

/* 2.160.3 the top photos take turns (a crossfade every 5 s, app.js turnPhotos) */
.hero .photo { opacity: 0; transition: opacity 1.4s ease; }
.hero .photo[data-on] { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero .photo { transition: none; } }

/* 2.160.3 (Matt: "I really like the email look"): the order pages laid out like the emails (worker/src/emailLayout.js):
   one sheet with a 5px teal bar, eyebrow, big headline, the teal strip of key facts, sections headed like the spec
   sheet (teal label over an ink rule), solid teal rectangle buttons */
.sheet { border-top: 5px solid var(--teal); border-radius: 10px; padding: 30px 32px 32px; }
.find.card { border-top: 5px solid var(--teal); border-radius: 10px; }
.eyebrow { font-size: 11px; letter-spacing: 1.6px; }
.sheet h1 { font-size: 30px; line-height: 1.2; font-weight: 800; letter-spacing: -.3px; margin: 2px 0 10px; }
.sheet .lead { margin: 0; font-size: 16px; line-height: 1.6; color: var(--text); }
.strip { display: grid; grid-template-columns: repeat(4, 1fr); margin: 24px 0 0; background: var(--teal); border-radius: 10px; color: #fff; overflow: hidden; }
.strip.n1 { grid-template-columns: 1fr; }
.strip.n2 { grid-template-columns: repeat(2, 1fr); }
.strip.n3 { grid-template-columns: repeat(3, 1fr); }
.strip .cell { padding: 16px 10px; text-align: center; min-width: 0; }
.strip .cell + .cell { border-left: 1px solid rgba(255, 255, 255, .3); }
.strip b { display: block; font-size: 20px; line-height: 1.25; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.strip span { display: block; padding-top: 4px; font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; font-weight: 700; color: #e3f8fa; }
.sheet .steps { margin: 26px 0 4px; }
.sheet .track { background: none; border: 0; border-radius: 0; padding: 0; margin: 22px 0 0; }
.sheet .track .lbl { font-size: 11px; letter-spacing: 1.6px; color: var(--teal-ink); font-weight: 700; }
.sheet .track .num a, .sheet .track .num span.n { font-size: 22px; font-weight: 800; letter-spacing: .4px; color: var(--text); }
.sheet .track .num a:hover { color: var(--teal-ink); }
.sheet .acts { margin-top: 20px; }
.sheet .btn { border-radius: 8px; font-weight: 700; }
.sec { margin-top: 32px; }
.sec-h { margin: 0; padding-bottom: 8px; border-bottom: 1.5px solid var(--text); font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; font-weight: 700; color: var(--teal-ink); }
.sec > .items, .sec > .docs, .sec > .history, .sec > .cols { margin-top: 2px; }
.sec .items li { padding: 14px 0; border-top: 1px solid var(--line); align-items: flex-start; }
.sec .items li:first-child { border-top: 0; padding-top: 14px; }
.sec .items .nm { font-size: 15px; line-height: 1.4; }
.sec .qty { background: none; padding: 0; font-weight: 400; font-size: 14px; color: var(--muted); }
.sec .qty b { color: var(--text); }
.sec .docs li:first-child, .sec .history li:first-child { padding-top: 14px; }
.sec .history { padding-top: 14px; }
.sec .history li:first-child { padding-top: 0; }
.sec .note.above { margin: 10px 0 0; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px 24px; padding-top: 14px; }
.cols h3 { margin: 0 0 6px; font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.cols p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.cols p:first-of-type { color: var(--text); font-weight: 600; }
.help { margin: 12px 0 0; font-size: 14px; color: var(--muted); }
.help a { color: var(--teal-ink); font-weight: 700; text-decoration: none; white-space: nowrap; }
@media (max-width: 520px) {
  .sheet { padding: 24px 18px 26px; }
  .sheet h1 { font-size: 24px; }
  .sheet .lead { font-size: 15px; }
  .strip.n4 { grid-template-columns: repeat(2, 1fr); }
  .strip.n4 .cell:nth-child(3) { border-left: 0; }
  .strip.n4 .cell:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .3); }
  .strip b { font-size: 16px; }
  .sheet .track .num a, .sheet .track .num span.n { font-size: 19px; }
}

/* 2.162 (Matt: the font looked different from the emails; the strip cut "UPS Ground" off on phones; Look up another
   order sat oddly at the bottom; More from USA Lab and the lookup page didn't match the email look): Inter served
   from the site itself (the CSP allows only our own files), the strip wraps on phones, the link moves above the order
   and into the footer, and every card is a sheet like the emails */
@font-face { font-family: Inter; font-weight: 400; font-display: swap; src: url(/fonts/inter-400.woff2) format("woff2"); }
@font-face { font-family: Inter; font-weight: 500; font-display: swap; src: url(/fonts/inter-500.woff2) format("woff2"); }
@font-face { font-family: Inter; font-weight: 600; font-display: swap; src: url(/fonts/inter-600.woff2) format("woff2"); }
@font-face { font-family: Inter; font-weight: 700; font-display: swap; src: url(/fonts/inter-700.woff2) format("woff2"); }
@font-face { font-family: "Inter Display"; font-weight: 700; font-display: swap; src: url(/fonts/inter-display-700.woff2) format("woff2"); }
@font-face { font-family: "Inter Display"; font-weight: 800; font-display: swap; src: url(/fonts/inter-display-800.woff2) format("woff2"); }
body { font-family: Inter, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
h1, .hero h1, .strip b, .sheet .track .num a, .sheet .track .num span.n { font-family: "Inter Display", Inter, -apple-system, "Segoe UI", Roboto, sans-serif; }
.sheet h1 { font-weight: 800; letter-spacing: -.4px; }
@media (max-width: 520px) {
  .strip b { white-space: normal; overflow: visible; text-overflow: clip; font-size: 15px; line-height: 1.2; }
  .strip .cell { padding: 14px 6px; display: flex; flex-direction: column; justify-content: center; }
}
/* Look up another order: above the order, light on the photo band */
main > .again { text-align: left; margin: 0 0 10px; }
main > .again a { color: #fff; text-decoration: none; font-weight: 600; font-size: 14px; text-shadow: 0 1px 6px rgba(0, 0, 0, .35); }
main > .again a:hover { text-decoration: underline; }
main.has-band { margin-top: -118px; }
@media (max-width: 680px) { main.has-band { margin-top: -86px; } }
.foot-links { font-weight: 600; }
.foot-links a { color: var(--teal-ink); text-decoration: none; }
/* the lookup page as a sheet */
.find.sheet { padding: 28px 32px 30px; }
.find .lead { color: var(--muted); margin: 12px 0 18px; font-size: 15px; }
.find .perks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 16px 0 0; }
.find .perk { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start; background: none; border: 0; box-shadow: none; padding: 0; border-radius: 0; }
.find .perk svg { width: 36px; height: 36px; margin: 0; }
.find .perk b { font-size: 15px; margin-bottom: 2px; }
@media (max-width: 680px) { .find .perks { grid-template-columns: 1fr; gap: 16px; } .find.sheet { padding: 22px 18px 24px; } }
/* More from USA Lab and Subscribe & Save as sheets */
.promos > .promos-in { border-top: 5px solid var(--teal); border-radius: 10px; padding: 26px 32px 28px; }
.promos-head { margin: 0 0 16px; padding-bottom: 8px; border-bottom: 1.5px solid var(--text); font-size: 11px; letter-spacing: 1.6px; }
.subsave img { border-radius: 10px; border-top: 5px solid var(--teal); }
@media (max-width: 520px) { .promos > .promos-in { padding: 22px 18px 24px; } }

/* 2.162.1 (Matt: the banner, More from USA Lab and the footer read as separate boxes): the order's sheet, the
   Subscribe & Save banner, More from USA Lab and the footer are one card, like the emails. index.html wraps the
   last three in .tail, which continues the last card in main with a flat seam. */
main { padding-bottom: 0; }
main > .card:last-child, main > :last-child > .card:last-child { margin-bottom: 0; border-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.tail { position: relative; max-width: 728px; width: calc(100% - 32px); margin: 0 auto 40px; background: var(--panel); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 10px 10px; box-shadow: var(--shadow); }
main:not(:has(.card)) + .tail { margin-top: 16px; border-top: 5px solid var(--teal); border-radius: 10px; }
.tail .promos { max-width: none; margin: 0; padding: 0 32px 30px; }
.tail .promos > .promos-in { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; }
.tail .promos-head { margin: 0 0 18px; }
.tail .subsave { max-width: none; margin: 0 0 24px; padding: 0; }
.tail .subsave img { border: 1px solid var(--line); border-radius: 8px; box-shadow: none; }
.tail .foot { max-width: none; margin: 0 32px; padding: 18px 0 24px; border-top: 1.5px solid var(--text); }
main:not(:has(.card)) + .tail .promos { padding-top: 28px; }
@media (max-width: 520px) {
  .tail .promos { padding: 0 18px 26px; }
  .tail .foot { margin: 0 18px; }
}
/* 2.162.2 (Matt): the shipping / payment facts sit right under the items, no heading; Need a hand? is its own teal
   panel; each stretch of the progress line has its own moving picture (packing, handed to the carrier, on the way,
   out for delivery = the truck). */
.cols.info { margin-top: 4px; padding: 16px 0 2px; border-top: 1px solid var(--line); }
.hand { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; align-items: center; margin-top: 32px; padding: 20px 22px; border: 1.5px solid var(--teal); border-radius: 12px; background: var(--teal-soft); }
.hand-ic { width: 46px; height: 46px; border-radius: 12px; background: var(--teal); color: #fff; display: grid; place-items: center; }
.hand-ic svg { width: 24px; height: 24px; }
.hand h2 { margin: 0 0 3px; font-size: 19px; font-family: "Inter Display", Inter, sans-serif; color: var(--text); }
.hand p { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.45; }
.hand-acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.hand-acts .btn { min-height: 42px; padding: 0 16px; font-size: 14px; }
.hand-acts .btn svg { width: 17px; height: 17px; flex: none; }
.hand-acts .btn.ghost { background: var(--panel); }
@media (max-width: 520px) { .hand { padding: 18px; } .hand-acts .btn { flex: 1 1 100%; } }
.rider[data-kind="pack"], .rider[data-kind="handoff"] { left: -11px; top: 1px; animation: none; }
.rider[data-kind="pack"]::before { content: ""; position: absolute; left: 8px; top: -8px; width: 6px; height: 6px; border-radius: 1.5px; background: var(--amber, #E0A458); z-index: 3; animation: drop 1.8s ease-in infinite; }
@keyframes drop { 0% { transform: translateY(-6px); opacity: 0; } 25% { opacity: 1; } 60% { transform: translateY(9px); opacity: 1; } 75%, 100% { transform: translateY(11px); opacity: 0; } }
.rider[data-kind="pack"] svg { animation: settle 1.8s ease-in-out infinite; }
@keyframes settle { 0%, 55% { transform: translateY(0); } 65% { transform: translateY(1.5px) scaleY(.94); } 80%, 100% { transform: translateY(0); } }
.rider[data-kind="handoff"] svg { animation: bob 2.2s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-3px) rotate(-6deg); } 60% { transform: translateY(0) rotate(4deg); } }
.rider[data-kind="moving"] { animation: ride 3.6s ease-in-out infinite; }
.rider[data-kind="moving"] svg { animation: hop .45s ease-in-out infinite alternate; }
@keyframes hop { to { transform: translateY(-2px) rotate(-4deg); } }
@media (prefers-reduced-motion: reduce) { .rider svg, .rider::before { animation: none !important; } .rider[data-kind="pack"]::before { display: none; } }

/* 2.169 Report a problem / Start a return (app.js requestForm) */
.hand-req { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; padding-top: 12px; margin-top: 4px; border-top: 1px solid var(--teal-line); }
.hand-req .btn { min-height: 42px; padding: 0 16px; font-size: 14px; background: var(--panel); }
.hand-req .btn svg { width: 17px; height: 17px; flex: none; }
.req-panel:empty { display: none; }
.req-form, .req-done { margin-top: 18px; padding: 22px; border: 1px solid var(--line); border-top: 4px solid var(--teal); border-radius: 12px; background: var(--panel); display: grid; gap: 16px; }
.req-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.req-head h2, .req-done h2 { margin: 0; font-family: "Inter Display", Inter, sans-serif; font-size: 20px; color: var(--text); }
.req-close { border: 0; background: none; font-size: 24px; line-height: 1; color: var(--muted); cursor: pointer; padding: 4px 8px; }
.req-note, .req-done p { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.5; }
.req-field { display: grid; gap: 6px; min-width: 0; }
.req-field > span { font-weight: 700; font-size: 14px; color: var(--text); }
.req-field small { font-size: 12.5px; color: var(--muted); }
.req-field input, .req-field textarea { font: inherit; font-size: 15px; padding: 10px 12px; border: 1px solid #c9d2d8; border-radius: 8px; background: var(--panel); color: var(--text); width: 100%; box-sizing: border-box; }
.req-field textarea { resize: vertical; min-height: 96px; }
.req-field input:focus, .req-field textarea:focus { outline: 2px solid var(--teal); outline-offset: 1px; border-color: var(--teal); }
.req-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.req-chip { font: inherit; font-size: 14px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--text); cursor: pointer; }
.req-chip[aria-checked="true"] { border-color: var(--teal); background: var(--teal); color: var(--on-teal); font-weight: 600; }
.req-items { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 8px; }
.req-items li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-top: 1px solid var(--line); }
.req-items li:first-child { border-top: 0; }
.req-items label { flex: 1; display: flex; gap: 10px; align-items: flex-start; cursor: pointer; min-width: 0; }
.req-items label input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--teal); flex: none; }
.req-items label span { display: grid; min-width: 0; }
.req-items b { font-weight: 600; font-size: 14px; }
.req-items small { color: var(--muted); font-size: 12.5px; }
.req-items input[type="number"] { width: 64px; padding: 6px 8px; font: inherit; border: 1px solid var(--line); border: 1px solid #c9d2d8; border-radius: 6px; background: var(--panel); color: var(--text); }
.req-thumbs { display: flex; flex-wrap: wrap; gap: 10px; }
.req-thumb { position: relative; width: 84px; height: 84px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); }
.req-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.req-x { position: absolute; top: 3px; right: 3px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(20,23,27,.75); color: #fff; font-size: 16px; line-height: 1; cursor: pointer; }
.req-add { width: 84px; height: 84px; border: 1.5px dashed var(--teal-line); border-radius: 8px; display: grid; place-items: center; text-align: center; font-size: 13px; font-weight: 600; color: var(--teal-ink); cursor: pointer; padding: 6px; box-sizing: border-box; }
.req-add:hover { border-color: var(--teal); background: var(--teal-soft); }
.req-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.req-use p { margin: 0; font-size: 14px; color: var(--text); overflow-wrap: anywhere; }
.req-link { font: inherit; font-size: 13px; color: var(--teal-ink); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; justify-self: start; }
.req-use { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid #c9d2d8; border-radius: 8px; }
.req-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; align-items: start; }
.req-err { margin: 0; color: #b42318; font-size: 14px; font-weight: 600; }
.req-err:empty { display: none; }
.req-acts .btn { min-width: 200px; }
.req-ref { color: var(--text) !important; }
@media (max-width: 600px) {
  .req-form, .req-done { padding: 18px; }
  .req-row { grid-template-columns: 1fr; }
  .req-acts .btn { width: 100%; }
}

/* 2.169.5 Need a hand?, two buttons (Matt: four felt like a lot): call / email are links under the text */
.hand-reach { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px !important; }
.hand-reach a { display: inline-flex; align-items: center; gap: 6px; color: var(--teal-ink); font-weight: 600; text-decoration: none; white-space: nowrap; }
.hand-reach a:hover { text-decoration: underline; }
.hand-reach svg { width: 15px; height: 15px; flex: none; }
.hand-req .btn { flex: 1 1 0; min-width: 0; }
.hand-req .btn:not(.ghost) { background: var(--teal); color: #fff; }
@media (max-width: 420px) { .hand-req { gap: 8px; } .hand-req .btn { padding: 0 8px; font-size: 13.5px; } .hand-req .btn svg { display: none; } }

/* 2.169.5 (Matt: the request form took so much vertical space on a phone): tighter form, reasons as a two-column
   grid of small tiles, one line per item with a small qty, a short message box, Add photos as one button with small
   thumbs beside it, and the contact we already know as one line; Need a hand?'s headset sits beside the title */
.req-form, .req-done { margin-top: 14px; padding: 18px; gap: 14px; }
.req-head { align-items: flex-start; }
.req-head h2 { font-size: 18px; }
.req-head .req-note { margin-top: 2px; font-size: 13px; }
.req-close { margin: -6px -8px 0 0; }
.req-field { gap: 5px; }
.req-field > span { font-size: 13px; }
.req-field > span small { font-weight: 400; margin-left: 4px; }
.req-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.req-chip { font-size: 13px; padding: 8px 10px; border-radius: 8px; text-align: center; line-height: 1.25; border-color: #c9d2d8; }
.req-items li { padding: 8px 10px; gap: 10px; }
.req-items b { font-size: 13.5px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.req-items small { font-size: 12px; }
.req-qty { display: grid; justify-items: center; gap: 2px; flex: none; }
.req-qty small { font-size: 11px; color: var(--muted); }
.req-items input[type="number"] { width: 52px; padding: 5px 6px; text-align: center; }
.req-field textarea { min-height: 72px; padding: 9px 11px; font-size: 14.5px; }
.req-field input { padding: 9px 11px; font-size: 14.5px; }
.req-thumbs { gap: 8px; align-items: center; }
.req-add { width: auto; height: 40px; padding: 0 14px; display: inline-flex; gap: 7px; align-items: center; border-radius: 999px; font-size: 13.5px; }
.req-add svg { width: 17px; height: 17px; flex: none; }
.req-thumb { width: 40px; height: 40px; border-radius: 6px; }
.req-x { top: 1px; right: 1px; width: 18px; height: 18px; font-size: 13px; }
.req-use { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 11px; }
.req-use p { font-size: 14px; min-width: 0; }
.req-link { flex: none; }
.req-row { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
@media (max-width: 600px) {
  .req-form, .req-done { padding: 16px 14px; gap: 12px; }
  .req-chips { grid-template-columns: 1fr 1fr; }
  .req-row { grid-template-columns: 1fr 1fr; }
  .req-row > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .hand { grid-template-columns: 34px 1fr; gap: 10px 10px; }
  .hand-ic { width: 34px; height: 34px; border-radius: 9px; }
  .hand-ic svg { width: 19px; height: 19px; }
  .hand-txt { display: contents; }
  .hand-txt h2 { margin: 0; align-self: center; }
  .hand-txt p { grid-column: 1 / -1; }
  .hand-reach { margin-top: 0 !important; }
}

/* 2.169.6 Show N more items under a long list */
.items-more { margin-top: 10px; font: inherit; font-size: 14px; font-weight: 700; color: var(--teal-ink); background: none; border: 1.5px solid var(--teal-line); border-radius: 10px; padding: 8px 16px; cursor: pointer; }
.items-more:hover { border-color: var(--teal); background: var(--teal-soft); }

/* 2.170 the item's Doc Center page: after its files, no file icon */
.docs .links a.dc-link { white-space: nowrap; }
.docs .links a.dc-link::before { display: none; }
.docs .links a.dc-link::after { content: " \2192"; }