/* Catalog Scribe: a pallet-rack bay seen head-on. Concrete ground, blue teardrop uprights,
   orange beams, white label stock, thermal-black print. */

@font-face {
  font-family: "Sofia Sans Extra Condensed";
  src: url("fonts/sofia-sans-extra-condensed-latin-800-normal.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Overpass";
  src: url("fonts/overpass-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Overpass";
  src: url("fonts/overpass-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Overpass Mono";
  src: url("fonts/overpass-mono-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --ground: #e8e9e5;      /* sealed warehouse concrete */
  --ink: #141619;         /* thermal-transfer black */
  --blue: #1d4f91;        /* upright blue */
  --orange: #f26a1b;      /* beam orange */
  --stock: #ffffff;       /* label stock */
  --ink-2: #3d4148;
  --rule: #c9cbc5;
  --blue-deep: #163d72;
  --orange-lit: #f6894a;
  --orange-shade: #c4520f;

  --display: "Sofia Sans Extra Condensed", "Arial Narrow", sans-serif;
  --text: "Overpass", "Helvetica Neue", Arial, sans-serif;
  --mono: "Overpass Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --upright: 30px;
  --gutter: clamp(16px, 3vw, 40px);
  --step: clamp(3.5rem, 7vw, 6rem);
  --ease: cubic-bezier(.16, 1, .3, 1);

  --upright-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='50' viewBox='0 0 30 50'%3E%3Crect width='30' height='50' fill='%231d4f91'/%3E%3Crect x='0' width='3' height='50' fill='%23163d72'/%3E%3Crect x='27' width='3' height='50' fill='%23163d72'/%3E%3Cpath d='M15 13a4.6 4.6 0 0 1 4.6 4.6c0 3-2.6 7.2-4.6 12.2c-2-5-4.6-9.2-4.6-12.2A4.6 4.6 0 0 1 15 13z' fill='%23e8e9e5'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-color: var(--blue) var(--ground);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--text);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}

::selection { background: var(--orange); color: var(--ink); }

a {
  color: var(--blue);
  text-decoration-thickness: 2px;
  text-underline-offset: .22em;
  text-decoration-color: currentColor;
}
a:hover { text-decoration-color: var(--orange); }

:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}

img, svg { display: block; max-width: 100%; }

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 10;
  background: var(--stock);
  color: var(--ink);
  padding: .5rem .75rem;
  font-weight: 700;
}
.skip:focus { top: 1rem; }

/* ---------- The bay: two uprights frame every page ---------- */

.bay {
  position: relative;
  flex: 1 0 auto;
  padding: 4px 70px 3.5rem;
  background:
    var(--upright-tile) left top / var(--upright) 50px repeat-y,
    var(--upright-tile) right top / var(--upright) 50px repeat-y,
    var(--ground);
}

.inner {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Header: the aisle placard row ---------- */

.site-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 2rem;
  padding-top: 1.25rem;
  padding-bottom: 1.1rem;
}
.brand { display: block; line-height: 0; }
.brand img { height: 44px; width: auto; }

.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem 1.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav a {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding-top: .2rem;
  padding-bottom: .2rem;
  border-bottom: 3px solid transparent;
}
.nav a:hover { border-bottom-color: var(--orange); }
.nav a[aria-current="page"] { border-bottom-color: var(--blue); }

/* ---------- The one action ---------- */

.action {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  background: var(--orange);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.45rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  padding: .85rem 1.15rem .8rem;
  background: linear-gradient(var(--orange-lit) 0 3px, var(--orange) 3px calc(100% - 4px), var(--orange-shade) calc(100% - 4px));
  box-shadow: 0 6px 14px -6px rgb(20 22 25 / .45);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.action svg { width: 1.05em; height: 1.05em; flex: none; }
.action:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 20px -8px rgb(20 22 25 / .5);
}
.action:focus-visible { outline-color: var(--ink); }
.action--small { font-size: 1.15rem; padding: .6rem .85rem .55rem; }

@media (prefers-reduced-motion: reduce) {
  .action { transition: none; }
  .action:hover { transform: none; }
}

/* ---------- Hero ---------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-rows: auto 1fr;
  gap: 0 clamp(2rem, 4vw, 4rem);
  align-items: start;
  padding-top: 2.5rem;
  padding-bottom: 3rem;
}
.hero h1 {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: var(--step);
  line-height: .9;
  letter-spacing: -.005em;
  margin: 0 0 1.5rem;
  text-wrap: balance;
}
.hero h1 { grid-column: 1; grid-row: 1; }
.hero-lede { grid-column: 1; grid-row: 2; }
.hero .bin { grid-column: 2; grid-row: 1 / span 2; align-self: start; margin-top: .6rem; }
.hero h1 .spec { color: var(--blue); }
.lede {
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  line-height: 1.5;
  max-width: 34em;
  margin: 0 0 1.4rem;
}
.price-strip {
  display: inline-block;
  font-family: var(--mono);
  font-weight: 600;
  font-size: .86rem;
  line-height: 1.45;
  margin: 0;
  padding: .55rem .8rem;
  text-wrap: balance;
  background: var(--stock);
  box-shadow: 0 1px 0 var(--rule), 0 8px 18px -12px rgb(20 22 25 / .4);
}
.price-strip a { color: var(--ink); text-decoration-color: var(--orange); }

/* The bin label: the free sample, clipped to the first beam */
.bin {
  position: relative;
  background: var(--stock);
  box-shadow: 0 1px 0 var(--rule), 0 18px 30px -18px rgb(20 22 25 / .45);
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
}
.bin__tab {
  background: var(--blue);
  display: flex;
  justify-content: center;
  padding-top: 1.1rem;
}
.bin__tab svg { width: 30px; height: 36px; }
.bin__body { padding: 1.15rem 1.35rem 1.4rem; }
.bin__code {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1.9rem;
  line-height: .95;
  letter-spacing: .01em;
  margin: 0 0 .7rem;
}
.bin__body p { margin: 0 0 .9rem; }
.bin__terms { font-weight: 700; }
.bin__k {
  display: block;
  font-family: var(--mono);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: .2rem;
}
.bin__need {
  font-size: .95rem;
  color: var(--ink-2);
  border-top: 2px dashed var(--rule);
  padding-top: .8rem;
  margin-top: 1.1rem !important;
  margin-bottom: 0 !important;
}
.bin .action { margin: .2rem 0 1.1rem; }

/* ---------- Levels: a beam carries each section's label ---------- */

.level { padding-bottom: 4rem; scroll-margin-top: 1rem; }

.beam {
  position: relative;
  margin-left: -40px;
  margin-right: -40px;
  background: linear-gradient(var(--orange-lit) 0 4px, var(--orange) 4px calc(100% - 6px), var(--orange-shade) calc(100% - 6px));
  padding: 14px 40px 16px;
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}
.beam h2 {
  display: inline-flex;
  align-items: stretch;
  margin: 0;
  background: var(--stock);
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  line-height: 1;
  letter-spacing: .01em;
  box-shadow: 0 2px 0 rgb(20 22 25 / .18);
  max-width: 100%;
}
.beam h2 .arr {
  flex: none;
  background: var(--blue);
  width: 2.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.beam h2 .arr svg { width: 1rem; height: 1.25rem; }
.beam h2 { padding: .55rem .9rem .4rem 0; align-items: center; }
.beam h2::after {
  content: "";
  flex: none;
  width: 2.6rem;
  height: .62em;
  margin-left: 1.1rem;
  margin-bottom: .08em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 30'%3E%3Cpath fill='%23141619' d='M0 0h2v30H0zM4 0h1v30H4zM7 0h3v30H7zM12 0h1v30h-1zM15 0h2v30h-2zM19 0h1v30h-1zM22 0h3v30h-3zM27 0h1v30h-1zM30 0h2v30h-2zM34 0h1v30h-1zM37 0h3v30h-3zM42 0h1v30h-1zM44 0h2v30h-2z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.beam h2 .arr { align-self: stretch; margin: -.55rem .75rem -.4rem 0; }

.wide { max-width: 44rem; }
.copy p { margin: 0 0 1rem; }
.copy p:last-child { margin-bottom: 0; }

/* Problem: body beside the spec strip */
.split {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 2rem clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.split .copy { font-size: 1.15rem; }

.strip {
  margin: 0;
  background: var(--stock);
  box-shadow: 0 1px 0 var(--rule), 0 18px 30px -20px rgb(20 22 25 / .4);
  padding: 1rem 1.15rem 1.1rem;
}
.strip__rows { list-style: none; margin: 0; padding: 0; }
.strip__rows li {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  padding-top: .6rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-weight: 600;
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.strip__rows li:last-child { border-bottom: 0; }
.val { display: block; height: 14px; background: var(--ink); }
.val--a { width: 72%; }
.val--b { width: 54%; }
.val--hl { width: 64%; background: var(--ink); box-shadow: 0 0 0 5px var(--orange); }
.val--flag {
  width: 46%;
  height: 22px;
  background: transparent;
  border: 2px dashed var(--ink-2);
  position: relative;
}
.val--flag::after {
  content: "";
  position: absolute;
  right: -26px;
  top: -9px;
  width: 18px;
  height: 30px;
  background: var(--blue);
  clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 44%, 0 62%);
}
.strip__key {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.4rem;
  margin: .9rem 0 0;
  padding: .8rem 0 0;
  border-top: 2px solid var(--ink);
  font-size: .92rem;
  list-style: none;
}
.strip__key li { display: flex; align-items: center; gap: .55rem; }
.key { display: inline-block; flex: none; }
.key--hl { width: 22px; height: 10px; background: var(--ink); box-shadow: 0 0 0 4px var(--orange); margin-left: 4px; margin-right: 4px; }
.key--flag { width: 22px; height: 14px; border: 2px dashed var(--ink-2); }

/* What we deliver: a label sheet */
.sheet {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.sheet li {
  background: var(--stock);
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: .9rem;
  padding: 1rem 1.2rem 1rem 1.2rem;
  box-shadow: 0 1px 0 var(--rule);
}
.sheet li::before { content: ""; align-self: start; width: 14px; height: 14px; margin-top: .3rem; background: var(--blue); }

/* The free sample: ten positions */
.free {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 2rem clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.ten {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(7rem, 16vw, 12rem);
  line-height: .78;
  color: var(--blue);
  display: block;
  letter-spacing: -.02em;
}
.positions {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0 0 20px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  background: linear-gradient(transparent calc(100% - 10px), var(--orange) calc(100% - 10px));
}
.positions li {
  background: var(--stock);
  height: 58px;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 1px 0 var(--rule);
}
.positions li::before,
.positions li::after { content: ""; display: block; height: 7px; background: var(--ink); }
.positions li::before { width: 80%; }
.positions li::after { width: 55%; }
.positions .p-hl::after { box-shadow: 0 0 0 3px var(--orange); }
.positions .p-flag::after { background: transparent; border: 2px dashed var(--ink-2); height: 10px; }

.free .copy { font-size: 1.1rem; }
.terms-list {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  border-top: 2px solid var(--ink);
}
.terms-list li {
  padding: .6rem 0 .6rem 1.6rem;
  border-bottom: 1px solid var(--rule);
  position: relative;
  font-size: .98rem;
}
.terms-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.05rem;
  width: 10px;
  height: 10px;
  background: var(--blue);
}

/* How it works: two levels of three bays */
.rack {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  counter-reset: step;
  column-gap: 0;
}
.rack li {
  counter-increment: step;
  position: relative;
  padding: 0 1.1rem 26px;
  display: flex;
  flex-direction: column;
}
.rack li::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 16px;
  background: linear-gradient(var(--orange-lit) 0 3px, var(--orange) 3px 12px, var(--orange-shade) 12px);
}
.rack li::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -6px;
  width: 12px;
  background: var(--upright-tile) center top / 12px 20px repeat-y;
  z-index: 1;
}
.rack li:nth-child(3n) { background: var(--upright-tile) right top / 12px 20px repeat-y; }
.rack li:nth-child(n+4) { margin-top: 1.6rem; }
.step {
  flex: 1;
  background: var(--stock);
  margin: 0 .4rem 0;
  padding: 1rem 1.15rem 1.2rem;
  box-shadow: 0 1px 0 var(--rule), 0 14px 22px -18px rgb(20 22 25 / .5);
}
.step h3 {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  margin: 0 0 .55rem;
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1.6rem;
  line-height: 1;
}
.step h3::before {
  content: counter(step);
  flex: none;
  background: var(--blue);
  color: var(--stock);
  font-family: var(--mono);
  font-size: 1rem;
  line-height: 1;
  padding: .35rem .5rem .25rem;
  margin-top: .05rem;
}
.step p { margin: 0; font-size: .98rem; }

@media (min-width: 901px) {
  .free > div:first-child, .split .strip { position: sticky; top: 1.5rem; }
}

/* Price */
.price {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 2rem clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.tag {
  background: radial-gradient(circle at 12px 12px, var(--ink-2) 0 3px, transparent 3.5px), radial-gradient(circle at calc(100% - 12px) 12px, var(--ink-2) 0 3px, transparent 3.5px), radial-gradient(circle at 12px calc(100% - 12px), var(--ink-2) 0 3px, transparent 3.5px), radial-gradient(circle at calc(100% - 12px) calc(100% - 12px), var(--ink-2) 0 3px, transparent 3.5px), var(--stock);
  border: 2px solid var(--ink);
  box-shadow: 0 1px 0 var(--rule), 0 18px 30px -20px rgb(20 22 25 / .45);
  margin: 0;
  padding: 0;
  list-style: none;
}
.tag li { padding: 1.2rem 1.4rem 1.3rem; }
.tag li + li { border-top: 2px dashed var(--rule); }
.tag .what {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.65rem;
  line-height: 1;
}
.tag .amt {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(4.25rem, 9vw, 6rem);
  line-height: .9;
  letter-spacing: -.01em;
  color: var(--blue);
  margin: .4rem 0 .35rem;
}
.tag .amt--sm { font-size: clamp(2.5rem, 5vw, 3.25rem); }
.tag .per { display: block; font-size: 1.05rem; }
.price .terms-list { margin-top: 0; }
.guarantee-link {
  margin: 1.1rem 0 0;
  font-weight: 700;
}

.excl {
  margin-top: 2.5rem;
  background: var(--stock);
  box-shadow: 0 1px 0 var(--rule);
  padding: 1.2rem 1.4rem 1.3rem;
}
.excl h3 {
  margin: 0 0 .8rem;
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1.7rem;
  line-height: 1;
}
.excl ul {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 2.5rem;
}
.excl li {
  break-inside: avoid;
  position: relative;
  padding: .45rem 0 .45rem 1.75rem;
  border-bottom: 1px solid var(--rule);
}
.excl li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .78rem;
  width: 14px;
  height: 14px;
  background: var(--orange-shade);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 0.5L7 5L11.5 0.5L13.5 2.5L9 7L13.5 11.5L11.5 13.5L7 9L2.5 13.5L0.5 11.5L5 7L0.5 2.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 0.5L7 5L11.5 0.5L13.5 2.5L9 7L13.5 11.5L11.5 13.5L7 9L2.5 13.5L0.5 11.5L5 7L0.5 2.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* FAQ: labelled bins */
.faq {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 3rem;
  border-top: 2px solid var(--ink);
}
.faq > div {
  padding: 1.15rem 0 1.25rem;
  border-bottom: 1px solid var(--rule);
}
.faq h3 {
  margin: 0 0 .5rem;
  font-size: 1.08rem;
  line-height: 1.35;
  font-weight: 700;
  color: var(--blue);
}
.faq p { margin: 0; font-size: .98rem; }

/* The close: the aisle sign */
.sign {
  margin-left: -40px;
  margin-right: -40px;
  background: var(--blue);
  color: var(--stock);
  padding: 3.5rem 40px;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: 1.5rem 3rem;
  align-items: end;
}
.sign h2 {
  margin: 0 0 1rem;
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(2.5rem, 5.5vw, 4.5rem);
  line-height: .92;
  text-wrap: balance;
}
.sign p { margin: 0; font-size: 1.15rem; max-width: 34em; }
.sign a:not(.action) { color: var(--stock); text-decoration-color: var(--orange); }
.sign .action { justify-self: start; }

/* ---------- Inner pages ---------- */

.page-head { padding-top: 2.75rem; padding-bottom: 0; }
.page-head h1 {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 4.5rem;
  line-height: .92;
  margin: 0 0 1.5rem;
  text-wrap: balance;
}
.page-body { padding-bottom: 1rem; }
.panel {
  background: var(--stock);
  box-shadow: 0 1px 0 var(--rule), 0 18px 30px -22px rgb(20 22 25 / .4);
  padding: 2rem 2.5rem;
  max-width: 50rem;
}
.panel p { margin: 0 0 1rem; font-size: 1.15rem; }
.panel p:last-child { margin-bottom: 0; }
.mail-big {
  font-family: var(--mono);
  font-weight: 600;
  font-size: clamp(1.25rem, 4.2vw, 2.25rem);
  line-height: 1.2;
  word-break: break-word;
}

/* Policy pages: long reading on label stock */
.doc {
  background: var(--stock);
  box-shadow: 0 1px 0 var(--rule);
  padding: 2.75rem 3.25rem 3rem;
  max-width: 52rem;
}
.doc > * { max-width: 70ch; }
.doc .meta { color: var(--ink-2); font-size: .98rem; margin: 0; }
.doc .meta + .meta { margin-bottom: 1.5rem; }
.doc h2 {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1.9rem;
  line-height: 1;
  margin: 2.6rem 0 .8rem;
}
.doc h2::before {
  content: "";
  display: block;
  width: 4.5rem;
  height: 6px;
  margin-bottom: .9rem;
  background: var(--orange);
}
.doc h3 {
  font-size: 1.15rem;
  line-height: 1.3;
  margin: 1.8rem 0 .5rem;
  color: var(--blue);
}
.doc p, .doc li { font-size: 1.05rem; line-height: 1.65; }
.doc p { margin: 0 0 1rem; }
.doc ul { margin: 0 0 1rem; padding-left: 1.3rem; }
.doc li { margin-bottom: .35rem; }
.doc li::marker { color: var(--blue); }
.doc strong { font-weight: 700; }

/* ---------- Footer: the floor ---------- */

.floor {
  background: var(--ink);
  color: var(--ground);
  background: linear-gradient(var(--orange) 0 10px, var(--ink) 10px);
  padding: 2.6rem 40px 2.25rem;
}
.floor .inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem 2rem;
  align-items: baseline;
}
.floor p { margin: 0; }
.floor a { color: var(--ground); text-decoration-color: var(--orange); }
.floor a:hover { color: var(--stock); }
.floor .links {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.floor .entity { font-size: .95rem; }
.floor .mail { font-family: var(--mono); font-weight: 600; }

/* ---------- Load: labels settle onto the beam once ---------- */

@media (prefers-reduced-motion: no-preference) {
  .hero h1, .hero .lede, .hero .price-strip { animation: rise .7s var(--ease) both; }
  .hero .lede { animation-delay: .06s; }
  .hero .price-strip { animation-delay: .12s; }
  .bin { animation: clip-on .8s var(--ease) .18s both; }
}
@keyframes rise {
  from { opacity: .001; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@keyframes clip-on {
  from { transform: translateY(-18px) rotate(-1.2deg); box-shadow: 0 1px 0 var(--rule), 0 40px 40px -24px rgb(20 22 25 / .35); }
  to { transform: none; }
}

/* ---------- Narrow ---------- */

@media (max-width: 900px) {
  .hero, .split, .free, .price, .sign { grid-template-columns: minmax(0, 1fr); }
  .rack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rack li:nth-child(n+3) { margin-top: 1.6rem; }
  .rack li:nth-child(3n) { background: none; }
  .rack li:nth-child(2n) { background: var(--upright-tile) right top / 12px 20px repeat-y; }
  .hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 1.25rem; }
  .hero h1, .hero-lede, .hero .bin { grid-column: 1; grid-row: auto; margin-top: 0; }
  .hero-lede { order: 2; }
  .hero .bin { order: 3; }
}

@media (max-width: 640px) {
  :root { --upright: 10px; --gutter: 14px; }
  .bay {
    padding: 4px 24px 2.5rem;
    background:
      var(--upright-tile) left top / var(--upright) 17px repeat-y,
      var(--upright-tile) right top / var(--upright) 17px repeat-y,
      var(--ground);
  }
  body { font-size: 1rem; }
  .site-head { padding-top: .8rem; padding-bottom: .6rem; gap: .6rem 1rem; }
  .beam, .sign { margin-left: -14px; margin-right: -14px; }
  .sign { padding: 2.25rem 14px; }
  .beam { padding: 10px 14px 12px; }
  .floor { padding: 2.25rem 24px 2rem; }
  .hero { padding-top: .5rem; padding-bottom: 2rem; }
  .page-head { padding-top: 1.5rem; }
  .page-head h1 { font-size: 2.75rem; }
  .panel { padding: 1.25rem 1.15rem; }
  .doc { padding: 1.5rem 1.15rem 1.75rem; }
  .level { padding-bottom: 2.75rem; }
  .brand img { height: 30px; }
  .site-head nav { order: 3; flex-basis: 100%; }
  .nav { gap: .1rem 1.05rem; }
  .nav a { font-size: 1.12rem; }
  .head-action { order: 2; }
  .hero { gap: 1.5rem; }
  .hero h1 { font-size: 2.85rem; margin-bottom: 0; }
  .hero .bin { margin-top: 0; }
  .lede { font-size: 1rem; line-height: 1.45; margin-bottom: .75rem; }
  .hero h1 { font-size: 2.6rem; }
  .price-strip { font-size: .82rem; }
  .bin { grid-template-columns: 40px minmax(0, 1fr); }
  .bin__tab svg { width: 20px; height: 24px; }
  .bin__body { padding: .9rem 1rem 1.1rem; }
  .bin__code { font-size: 1.5rem; }
  .bin__body p { font-size: .97rem; }
  .sheet, .faq { grid-template-columns: minmax(0, 1fr); }
  .beam h2::after { display: none; }
  .rack { grid-template-columns: minmax(0, 1fr); }
  .rack li, .rack li:nth-child(3n), .rack li:nth-child(2n) { background: var(--upright-tile) right top / 12px 20px repeat-y; }
  .rack li { padding-left: .7rem; padding-right: .7rem; }
  .rack li:nth-child(n+2) { margin-top: 1.2rem; }
  .excl ul { columns: 1; }
  .strip__rows li { grid-template-columns: 6rem minmax(0, 1fr); }
  .positions { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
  .positions li { height: 44px; padding: 7px 5px; }
  .beam h2 .arr { width: 1.6rem; }
  .floor .inner { flex-direction: column; }
}