.hero{background-color:var(--canvas)}.hero__in{max-width:72rem;margin:0 auto;padding:1.75rem 1rem 3rem}.hero__title{letter-spacing:-.025em;font-size:2.35rem;font-weight:800;line-height:1.05}.hero__lead{max-width:40ch;color:var(--ink-soft);margin-top:.75rem;font-size:1.125rem;line-height:1.375}.hero__grid{align-items:start;gap:2rem;margin-top:2rem;display:grid}.card{border:1px solid var(--line);background-color:#fff;border-radius:.75rem;min-width:0;padding:1.75rem 1rem 1rem;position:relative;box-shadow:0 1px #e4d5c0,0 14px 28px -18px #33241a66}.card__title{align-items:center;gap:.5rem;font-size:1.25rem;font-weight:800;display:flex}.card__title svg{width:1.25rem;height:1.25rem;color:var(--carton-edge)}.card__lead{color:var(--ink-soft);margin-top:.25rem}.track__row{justify-content:space-between;align-items:flex-end;gap:1rem;display:flex}.track__label,.track__legend{font-size:1rem;font-weight:700}.track__barcode{opacity:.8;background-image:repeating-linear-gradient(90deg,#33241a 0 2px,#0000 2px 4px,#33241a 4px 5px,#0000 5px 8px,#33241a 8px 11px,#0000 11px 13px);width:6rem;height:1.25rem;margin-bottom:.25rem}.track__input{background-color:var(--paper);width:100%;height:3.5rem;font-family:var(--font-mono);letter-spacing:.05em;text-transform:uppercase;border:2px solid #33241a26;border-radius:.75rem;margin-top:.5rem;padding:0 1rem;font-size:1.125rem}.track__input::placeholder{color:#6e5645b3;letter-spacing:normal;text-transform:none}.track__input:focus{border-color:var(--ink);background-color:#fff;outline:none}.track__fieldset{border:0;min-width:0;margin:1.25rem 0 0;padding:0}.track__chips{scroll-snap-type:x mandatory;scrollbar-width:none;gap:.5rem;margin:.5rem -1rem 0;padding:0 1rem .25rem;display:flex;overflow-x:auto}.track__chips::-webkit-scrollbar{display:none}.chip{border:2px solid var(--line);height:2.75rem;color:var(--ink-soft);scroll-snap-align:start;cursor:pointer;background-color:#fff;border-radius:9999px;flex:none;align-items:center;gap:.5rem;padding:0 .875rem;font-size:.875rem;font-weight:700;transition:border-color .15s,color .15s,background-color .15s;display:flex}.chip img{object-fit:contain;background-color:#fff;border-radius:.125rem;width:1.25rem;height:1.25rem}.chip:hover{color:var(--ink);border-color:#33241a66}.chip[aria-pressed=true]{border-color:var(--ink);background-color:var(--paper);color:var(--ink)}.chip:focus-visible{outline:2px solid var(--ink);outline-offset:2px}.track__submit{width:100%;height:3.5rem;margin-top:1.25rem;font-size:1.125rem}.track__hint{min-height:1.25rem;color:var(--ink-soft);text-align:center;margin-top:.5rem;font-size:.875rem}.track__hint[data-error=true]{color:var(--alert);font-weight:700}.relay__form{gap:.75rem;margin-top:1rem;display:grid}.relay__field{position:relative}.relay__input{background-color:#fff;border:2px solid #33241a26;border-radius:.75rem;width:100%;height:3rem;padding:0 1rem;font-size:1rem}.relay__input::placeholder{color:#6e5645b3}.relay__input:focus{border-color:var(--ink);outline:none}.relay__list{z-index:20;border:1px solid var(--line);background-color:#fff;border-radius:.75rem;max-height:16rem;margin:0;padding:.25rem;list-style:none;position:absolute;top:calc(100% + .25rem);left:0;right:0;overflow-y:auto;box-shadow:0 16px 28px -18px #33241a73}.relay__list:empty{display:none}.relay__option{text-align:left;cursor:pointer;background:0 0;border:0;border-radius:.5rem;width:100%;padding:.5rem .75rem;display:block}.relay__option strong{font-weight:700;display:block}.relay__option span{color:var(--ink-soft);font-size:.875rem;display:block}.relay__option:hover,.relay__option[aria-selected=true]{background-color:var(--paper)}.relay__submit{height:3rem;font-size:1rem}.relay__error{color:var(--alert);font-size:.875rem;font-weight:700}.relay__error:empty{display:none}@media (width>=360px){.track__input{font-size:1.25rem}}@media (width>=640px){.hero__title{font-size:3rem}.hero__lead{font-size:1.25rem}.card{padding:2rem 1.5rem 1.5rem}.track__barcode{width:8rem}.track__input{font-size:1.5rem}.track__chips{flex-wrap:wrap;margin:.5rem 0 0;padding:0;overflow:visible}}@media (width>=768px){.hero__in{padding:3rem 1.5rem 4rem}}@media (width>=1024px){.hero__title{font-size:3.75rem}.hero__grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:2.5rem}}
