/* ==========================================================================
   Mr. Peppers Peptides storefront
   Built on the Mutagen storefront system: one family (Archivo), square
   corners, and the open bracket as the framing motif.
   Colour carries meaning. Pepper red means "your order". Chain teal, from the
   peptide chain in the logo, means "testing evidence" and is used for nothing else.
   ========================================================================== */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #f7f8f9;
  --tile: #ffffff;
  --ink: #232a31;     /* the logo's ring */
  --muted: #58636e;
  --frame: #939ea8;
  --rule: #dce1e5;
  --pp: #d5161d;      /* logo red: primary actions, brackets, in-cart state */
  --pp-ink: #b8141b;  /* red for text and hover on light backgrounds */
  --pp-wash: #fcecec;
  --tl: #00808a;      /* logo teal: testing and test results only */
  --tl-ink: #006b74;  /* teal for text and filled buttons */
  --tl-wash: #e6f2f3;
  --danger: #b42318;

  --font: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --wrap: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --header-h: 68px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

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

[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 400;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

main {
  flex: 1;
}

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

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--pp-ink);
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* Headings and alerts that receive focus from script, for screen readers. */
[tabindex="-1"]:focus {
  outline: none;
}

h1,
h2,
h3 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: 8px;
  top: -100px;
  z-index: 100;
  padding: 8px 12px;
  background: var(--ink);
  color: var(--paper);
}

.skip:focus {
  top: 8px;
}

.num {
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   The bracket: left bar, short top bar, full bottom bar, open right side.
   Drawn with inset shadows so changing its weight never moves content.
   -------------------------------------------------------------------------- */

.bracket {
  --c: var(--frame);
  --bw: 2px;
  --top: 72%;
  position: relative;
  box-shadow:
    inset var(--bw) 0 0 var(--c),
    inset 0 calc(-1 * var(--bw)) 0 var(--c);
  transition: box-shadow 0.3s var(--ease);
}

.bracket::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: var(--top);
  height: var(--bw);
  background: var(--c);
  transition: background-color 0.3s var(--ease), height 0.3s var(--ease);
}

.bracket--red {
  --c: var(--pp);
  --bw: 4px;
}

.bracket--teal {
  --c: var(--tl);
  --bw: 4px;
}

.bracket--ink {
  --c: var(--ink);
  --bw: 3px;
}

/* --------------------------------------------------------------------------
   Buttons and small controls
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border: 1.5px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
}

.btn:hover {
  background: var(--ink);
  color: var(--paper);
}

.btn--primary {
  background: var(--pp);
  border-color: var(--pp);
  color: #fff;
}

.btn--primary:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.btn--teal {
  background: var(--tl-ink);
  border-color: var(--tl-ink);
  color: #fff;
}

.btn--teal:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.btn--block {
  width: 100%;
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

.link-btn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.875rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.link-btn:hover {
  color: var(--ink);
}

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.icon-btn:hover {
  background: var(--pp-wash);
}

.qty {
  display: inline-flex;
  align-items: stretch;
  height: 40px;
  border: 1.5px solid var(--frame);
  background: var(--tile);
}

.qty button {
  width: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 1.125rem;
  cursor: pointer;
}

.qty button:hover {
  background: var(--pp-wash);
}

.qty button:disabled {
  color: var(--frame);
  cursor: default;
}

.qty button:disabled:hover {
  background: transparent;
}

.qty input {
  width: 44px;
  padding: 0;
  border: 0;
  border-inline: 1px solid var(--rule);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  appearance: textfield;
}

.qty input::-webkit-inner-spin-button,
.qty input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgb(247 248 249 / 0.94);
  -webkit-backdrop-filter: saturate(1.2) blur(8px);
  backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid var(--rule);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 28px;
  height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-right: auto;
  text-decoration: none;
  min-width: 0;
}

.brand img {
  display: block;
  flex: none;
  width: 40px;
  height: 40px;
}

.brand__name {
  font-size: 1.1875rem;
  font-weight: 760;
  font-stretch: 116%;
  letter-spacing: 0.005em;
  white-space: nowrap;
}

.brand:hover {
  color: var(--ink);
}

.site-nav {
  display: flex;
  gap: 24px;
  font-size: 0.9375rem;
}

.site-nav a,
.mobile-nav a {
  color: var(--muted);
  text-decoration: none;
}

.site-nav a:hover,
.site-nav a[aria-current="page"],
.mobile-nav a:hover,
.mobile-nav a[aria-current="page"] {
  color: var(--ink);
}

.site-nav a[aria-current="page"],
.mobile-nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.cart-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 8px 0 14px;
  border: 1.5px solid var(--ink);
  background: var(--tile);
  color: var(--ink);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
}

.cart-btn:hover {
  background: var(--ink);
  color: var(--paper);
}

.cart-btn__count {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  background: var(--rule);
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.cart-btn__count.has-items {
  background: var(--pp);
  color: #fff;
}

.cart-btn__count.is-bumped {
  animation: bump 0.4s var(--ease);
}

@keyframes bump {
  40% {
    transform: scale(1.3);
  }
}

/* On small screens the main links move to a bar under the header that
   scrolls away, so the sticky header stays one row tall. */
.mobile-nav {
  display: none;
  border-bottom: 1px solid var(--rule);
  font-size: 0.9375rem;
}

.mobile-nav .wrap {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  padding-block: 10px;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .site-nav {
    display: none;
  }

  .mobile-nav {
    display: block;
  }
}

@media (max-width: 420px) {
  .brand__tail {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Home: hero with the badge
   -------------------------------------------------------------------------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px clamp(32px, 6vw, 88px);
  padding-block: clamp(24px, 3.6vw, 44px) clamp(28px, 3.4vw, 44px);
}

.hero h1 {
  margin: 0;
  font-size: clamp(2.4rem, 4.7vw, 3.75rem);
  font-weight: 820;
  font-stretch: 125%;
  line-height: 0.94;
  letter-spacing: -0.02em;
}

.hero__lede {
  max-width: 50ch;
  margin: 24px 0 0;
  color: var(--muted);
  font-size: 1.125rem;
  line-height: 1.55;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.hero__badge {
  display: block;
  width: clamp(220px, 21vw, 290px);
  height: auto;
}

@media (max-width: 760px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero__media {
    order: -1;
  }

  .hero__badge {
    width: 148px;
  }
}

/* --------------------------------------------------------------------------
   The testing chain: one bead per test, after the peptide chain in the logo.
   Stacked in narrow spaces, laid out in a row with a wavy line in wide ones.
   -------------------------------------------------------------------------- */

.chain-wrap {
  container: chain / inline-size;
}

.chain {
  position: relative;
}

.chain__list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chain__link {
  position: relative;
  min-width: 0;
  padding: 0 0 22px 36px;
}

.chain__link:last-child {
  padding-bottom: 0;
}

/* straight connector between stacked beads */
.chain__link::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 22px;
  bottom: 0;
  width: 2px;
  background: var(--tl);
}

.chain__link:last-child::before {
  display: none;
}

.chain__bead {
  position: absolute;
  left: 0;
  top: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--tl);
  box-shadow: 0 0 0 3px var(--tile);
}

.chain__link.is-open .chain__bead {
  background: var(--tile);
  box-shadow:
    inset 0 0 0 2px var(--tl),
    0 0 0 3px var(--tile);
}

.chain__name {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 720;
  font-stretch: 112%;
  line-height: 1.3;
}

.chain__method {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 0.875rem;
}

.chain__asks {
  margin: 10px 0 0;
  font-size: 0.9375rem;
  line-height: 1.45;
}

.chain__limit {
  margin: 10px 0 0;
  color: var(--tl-ink);
  font-size: 0.8125rem;
  font-weight: 620;
}

.chain__result {
  margin: 2px 0 0;
  color: var(--tl-ink);
  font-size: 1.0625rem;
  font-weight: 720;
  font-variant-numeric: tabular-nums;
}

.chain__track {
  display: none;
}

@container chain (min-width: 620px) {
  .chain__track {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 48px;
    overflow: visible;
    pointer-events: none;
  }

  .chain__track path {
    fill: none;
    stroke: var(--tl);
    stroke-width: 2.5;
    stroke-linecap: round;
  }

  .chain__list {
    grid-template-columns: repeat(var(--n), minmax(0, 1fr));
    column-gap: 28px;
    padding-top: 54px;
  }

  .chain__link {
    padding: 0;
  }

  .chain__link::before {
    display: none;
  }

  /* bead centres sit on the wave, var(--y) pixels from the top of the chain */
  .chain__bead {
    top: calc(var(--y) * 1px - 54px - 9px);
  }
}

.chain-wrap--compact .chain__link {
  padding-bottom: 14px;
}

.chain-wrap--compact .chain__name {
  font-size: 0.9375rem;
}

/* --------------------------------------------------------------------------
   Home: the testing band
   -------------------------------------------------------------------------- */

.proof {
  padding-bottom: clamp(44px, 6vw, 76px);
}

.proof__frame {
  padding: clamp(24px, 3vw, 36px) clamp(22px, 3vw, 40px) clamp(26px, 3vw, 38px) clamp(26px, 3.4vw, 46px);
  background: var(--tile);
}

.proof__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 18px 40px;
  margin-bottom: 30px;
}

.proof__head h2 {
  max-width: 22ch;
  margin: 0;
  font-size: clamp(1.5rem, 2.8vw, 2.25rem);
  font-weight: 780;
  font-stretch: 115%;
  line-height: 1.06;
  letter-spacing: -0.01em;
}

.proof__head p {
  max-width: 58ch;
  margin: 12px 0 0;
  color: var(--muted);
}

.proof__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 860px) {
  .proof__head {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------------
   Home: catalog controls
   -------------------------------------------------------------------------- */

.catalog {
  padding-bottom: 72px;
}

.catalog__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin-bottom: 28px;
  padding-top: 18px;
  border-top: 2px solid var(--ink);
}

.catalog__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  margin: 0;
  font-size: 1.25rem;
  font-weight: 720;
  font-stretch: 112%;
}

.catalog__count {
  color: var(--muted);
  font-size: 0.9375rem;
  font-weight: 400;
  font-stretch: 100%;
}

.catalog__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.search input {
  width: min(300px, 100%);
  height: 44px;
  padding: 0 14px 0 40px;
  border: 1.5px solid var(--frame);
  border-radius: 0;
  background: var(--tile)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%2358636e' stroke-width='2'%3E%3Ccircle cx='7.5' cy='7.5' r='5.5'/%3E%3Cpath d='m12 12 4.5 4.5'/%3E%3C/svg%3E")
    no-repeat 13px center;
  color: var(--ink);
  font: inherit;
  font-size: 0.9375rem;
}

.search input:focus {
  border-color: var(--ink);
}

.search input::placeholder {
  color: var(--muted);
}

.select {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.9375rem;
}

.select select {
  height: 44px;
  padding: 0 36px 0 12px;
  border: 1.5px solid var(--frame);
  border-radius: 0;
  background: var(--tile)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23232a31' stroke-width='2'%3E%3Cpath d='m1 1 5 5 5-5'/%3E%3C/svg%3E")
    no-repeat right 12px center;
  color: var(--ink);
  font: inherit;
  font-size: 0.9375rem;
  appearance: none;
  cursor: pointer;
}

.toggle {
  display: inline-flex;
  border: 1.5px solid var(--ink);
}

.toggle button {
  height: 41px;
  padding: 0 16px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
}

.toggle button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
}

@media (max-width: 680px) {
  .catalog__controls {
    width: 100%;
  }

  .search {
    flex: 1 1 100%;
  }

  .search input {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   Tiles: the catalog laid out like a periodic table
   -------------------------------------------------------------------------- */

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(192px, 1fr));
  gap: 18px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 520px) {
  .tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 10px;
  }
}

@media (max-width: 380px) {
  .tile {
    padding: 10px 10px 12px 12px;
  }

  .tile__price {
    font-size: 1rem;
  }

  .btn--add {
    padding: 0 10px;
  }
}

.tile {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  min-height: 220px;
  padding: 12px 14px 14px 16px;
  background: var(--tile);
}

/* the red bar that draws across when a compound goes into the cart */
.tile::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 4px;
  background: var(--pp);
  transition: width 0.5s var(--ease);
}

.tile.is-in-cart {
  --c: var(--pp);
  --bw: 4px;
}

.tile.is-in-cart::before {
  height: 2px;
  background: var(--frame);
}

.tile.is-in-cart::after {
  width: var(--top);
}

.tile__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-height: 20px;
  padding-top: 6px;
}

.tile__no {
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.tile.is-in-cart .tile__no,
.tile__incart {
  color: var(--pp-ink);
}

.tile__incart {
  font-size: 0.8125rem;
  font-weight: 650;
}

.tile__name {
  margin: 16px 0 4px;
  font-weight: 760;
  line-height: 0.98;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
}

.tile__name a {
  text-decoration: none;
}

.tile__name a:hover {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* Names are set wider or narrower by length, so each fills its tile. */
.fit-xs { font-size: 20.5cqi; font-stretch: 125%; }
.fit-s  { font-size: 16.2cqi; font-stretch: 104%; }
.fit-m  { font-size: 16.4cqi; font-stretch: 90%; }
.fit-l  { font-size: 15cqi; font-stretch: 76%; }
.fit-xl { font-size: 12cqi; font-stretch: 62%; }

.tile__qual {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 500;
  font-stretch: 100%;
  line-height: 1.3;
  letter-spacing: 0;
}

/* shown only when the product has a certificate in coas.js */
.tile__coa {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 12px 0 0;
  color: var(--tl-ink);
  font-size: 0.8125rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.tile__coa a {
  color: inherit;
  text-decoration: none;
}

.tile__coa a:hover {
  text-decoration: underline;
}

.tile__coa::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--tl);
}

.sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 14px 0 16px;
  padding: 0;
  border: 0;
  min-inline-size: 0;
}

.size {
  position: relative;
  display: inline-flex;
}

.size input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.size span {
  display: inline-block;
  padding: 5px 8px;
  border: 1px solid var(--rule);
  font-size: 0.8125rem;
  font-weight: 550;
  line-height: 1.2;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.size:hover span {
  border-color: var(--ink);
}

.size input:checked + span {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.size input:focus-visible + span {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.sizes--single span {
  padding-inline: 0;
  border-color: transparent;
  color: var(--muted);
}

.tile__buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
}

.tile__price {
  font-size: 1.125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.btn--add {
  min-height: 36px;
  padding: 0 14px;
  font-size: 0.875rem;
}

/* --------------------------------------------------------------------------
   List view: the price list as a table
   -------------------------------------------------------------------------- */

.pricelist-wrap {
  overflow-x: auto;
}

.pricelist {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.pricelist th {
  padding: 10px 12px;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.8125rem;
  font-weight: 600;
  text-align: left;
}

.pricelist td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--rule);
  vertical-align: middle;
}

.pricelist tbody tr:hover td {
  background: var(--tile);
}

.pricelist .col-no {
  width: 4.5em;
}

.pricelist td.col-no {
  color: var(--muted);
}

.pricelist .col-price,
.pricelist .col-add {
  text-align: right;
  white-space: nowrap;
}

.pricelist .col-name a {
  font-weight: 650;
  text-decoration: none;
}

.pricelist .col-name a:hover {
  text-decoration: underline;
}

.pricelist tr.is-in-cart td:first-child {
  box-shadow: inset 4px 0 0 var(--pp);
}

.pricelist .incart {
  margin-right: 10px;
  color: var(--pp-ink);
  font-size: 0.8125rem;
  font-weight: 650;
}

.empty {
  padding: 40px 0 24px;
}

.empty p {
  max-width: 48ch;
  margin: 0 0 16px;
  font-size: 1.125rem;
}

/* --------------------------------------------------------------------------
   Research-use notice
   -------------------------------------------------------------------------- */

.ruo {
  padding-bottom: 88px;
}

.ruo__frame {
  max-width: 800px;
  padding: 30px 32px 32px 36px;
  background: var(--tile);
}

.ruo__frame h2 {
  margin: 0 0 10px;
  font-size: 1.5rem;
  font-weight: 750;
  font-stretch: 112%;
  line-height: 1.15;
}

.ruo__frame p {
  max-width: 64ch;
  margin: 0 0 12px;
}

.ruo__frame p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  padding-block: 40px 48px;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.875rem;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 24px 48px;
}

.site-footer__brand {
  display: flex;
  align-self: start;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 720;
  font-stretch: 116%;
}

.site-footer__brand img {
  width: 32px;
  height: 32px;
}

.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer a {
  color: var(--ink);
}

.site-footer__legal {
  max-width: 76ch;
  margin: 16px 0 0;
}

.site-footer__copy {
  margin: 12px 0 0;
}

@media (max-width: 720px) {
  .site-footer__grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Cart drawer
   -------------------------------------------------------------------------- */

dialog {
  color: var(--ink);
}

.drawer {
  inset: 0 0 0 auto;
  width: min(440px, 100vw);
  max-width: 100vw;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--paper);
  box-shadow: -1px 0 0 var(--rule);
}

.drawer::backdrop {
  background: rgb(35 42 49 / 0.38);
}

.drawer[open] {
  animation: drawer-in 0.28s var(--ease);
}

@keyframes drawer-in {
  from {
    transform: translateX(100%);
  }
}

.drawer__panel {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px 14px 22px;
  border-bottom: 1px solid var(--rule);
}

.drawer__head h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 750;
  font-stretch: 112%;
}

.drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 4px 22px;
}

.drawer__foot {
  padding: 18px 22px 22px;
  border-top: 1px solid var(--rule);
  background: var(--tile);
}

.drawer__empty {
  padding: 32px 0;
}

.drawer__empty p {
  margin: 0 0 16px;
}

.lines {
  margin: 0;
  padding: 0;
  list-style: none;
}

.line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
}

.line:last-child {
  border-bottom: 0;
}

.line__name {
  font-weight: 700;
  text-decoration: none;
}

.line__name:hover {
  text-decoration: underline;
}

.line__meta {
  display: block;
  color: var(--muted);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

.line__total {
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.line__controls {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sum {
  display: grid;
  gap: 6px;
  margin: 0 0 16px;
}

.sum div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.sum dt {
  color: var(--muted);
}

.sum dd {
  margin: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.lines + .sum {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}

.sum .sum__total {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
}

.sum .sum__total dt,
.sum .sum__total dd {
  color: var(--ink);
  font-size: 1.125rem;
  font-weight: 750;
}

.fine {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.45;
}

/* --------------------------------------------------------------------------
   Toast
   -------------------------------------------------------------------------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 20px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 16px;
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 10px 10px 10px 18px;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.9375rem;
  box-shadow: 0 10px 30px rgb(35 42 49 / 0.2);
  transform: translateX(-50%);
  animation: toast-in 0.25s var(--ease);
}

.toast[hidden] {
  display: none;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translate(-50%, 8px);
  }
}

.toast .btn {
  min-height: 36px;
  padding: 0 14px;
  border-color: var(--paper);
  color: var(--paper);
  font-size: 0.875rem;
  white-space: nowrap;
}

.toast .btn:hover {
  background: var(--paper);
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   Age gate
   -------------------------------------------------------------------------- */

.gate {
  width: min(540px, calc(100vw - 32px));
  max-width: none;
  padding: 0;
  border: 0;
  background: transparent;
}

.gate::backdrop {
  background: rgb(247 248 249 / 0.97);
}

.gate__panel {
  padding: 34px 34px 32px 40px;
  background: var(--tile);
}

.gate__mark {
  display: block;
  width: 56px;
  height: 56px;
  margin-bottom: 20px;
}

.gate h2 {
  margin: 0 0 12px;
  font-size: 1.75rem;
  font-weight: 780;
  font-stretch: 115%;
  line-height: 1.1;
}

.gate p {
  margin: 0 0 12px;
}

.gate__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

/* --------------------------------------------------------------------------
   Product page
   -------------------------------------------------------------------------- */

.crumbs {
  padding-top: 24px;
  color: var(--muted);
  font-size: 0.875rem;
}

.crumbs a {
  color: inherit;
}

.product {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px 64px;
  align-items: start;
  padding-block: 20px 56px;
}

@media (max-width: 860px) {
  .product {
    grid-template-columns: minmax(0, 1fr);
  }
}

.product__tile {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  min-height: clamp(280px, 40vw, 440px);
  padding: 20px 28px 32px 32px;
  background: var(--tile);
}

.product__tile.is-in-cart {
  --c: var(--pp);
}

.product__no {
  color: var(--muted);
  font-size: 1rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.product__tile.is-in-cart .product__no {
  color: var(--pp-ink);
}

.product__name {
  margin: auto 0 0;
  padding-top: 40px;
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.015em;
  overflow-wrap: break-word;
}

.product__name.fit-xs { font-size: min(21cqi, 8rem); }
.product__name.fit-s  { font-size: min(16.5cqi, 6.5rem); }
.product__name.fit-m  { font-size: min(16.8cqi, 6.5rem); }
.product__name.fit-l  { font-size: min(15.4cqi, 6rem); }
.product__name.fit-xl { font-size: min(12.4cqi, 5rem); }

.product__qual {
  display: block;
  margin-top: 14px;
  color: var(--muted);
  font-size: 1.125rem;
  font-weight: 500;
  font-stretch: 100%;
  line-height: 1.3;
  letter-spacing: 0;
}

.buy {
  display: grid;
  gap: 22px;
}

.buy__label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.9375rem;
  font-weight: 650;
}

.buy .sizes {
  margin: 0;
}

.buy .size span {
  padding: 8px 12px;
  font-size: 0.9375rem;
}

.buy__price {
  margin: 0;
  font-size: 2.25rem;
  font-weight: 750;
  font-stretch: 104%;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.buy__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.buy__row .qty {
  height: 44px;
}

.buy__incart {
  margin: -8px 0 0;
  color: var(--pp-ink);
  font-size: 0.9375rem;
  font-weight: 600;
}

.facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 8px 20px;
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  font-size: 0.9375rem;
}

.facts dt {
  color: var(--muted);
}

.facts dd {
  margin: 0;
}

.notice {
  margin: 0;
  padding: 2px 0 2px 16px;
  border-left: 4px solid var(--pp);
  font-size: 0.9375rem;
}

/* the testing band on a product page */
.lab-panel {
  margin-bottom: 56px;
  padding: clamp(22px, 3vw, 32px) clamp(22px, 3vw, 36px) clamp(24px, 3vw, 32px) clamp(26px, 3.4vw, 42px);
  background: var(--tile);
}

.lab-panel h2 {
  margin: 0 0 6px;
  font-size: 1.375rem;
  font-weight: 750;
  font-stretch: 112%;
  line-height: 1.2;
}

.lab-panel__intro {
  max-width: 64ch;
  margin: 0 0 24px;
  color: var(--muted);
  font-size: 0.9375rem;
}

.lab-panel__lot {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 4px 16px;
  margin: 0 0 18px;
  padding: 12px 14px;
  background: var(--tl-wash);
  font-size: 0.9375rem;
}

.lab-panel__lot dt {
  color: var(--tl-ink);
  font-weight: 600;
}

.lab-panel__lot dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.lab-panel__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  font-size: 0.9375rem;
}

.lab-panel__links a {
  color: var(--tl-ink);
  font-weight: 600;
}

.pager {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-block: 20px 72px;
  border-top: 1px solid var(--rule);
}

.pager a {
  display: grid;
  gap: 2px;
  text-decoration: none;
}

.pager a:hover .pager__name {
  text-decoration: underline;
}

.pager__label {
  color: var(--muted);
  font-size: 0.8125rem;
}

.pager__name {
  font-weight: 700;
}

.pager__next {
  margin-left: auto;
  text-align: right;
}

/* --------------------------------------------------------------------------
   Page titles and the policy-style layout (policies, testing)
   -------------------------------------------------------------------------- */

.page-title {
  margin: 0;
  padding-top: clamp(28px, 5vw, 56px);
  font-size: clamp(2.25rem, 5.5vw, 3.75rem);
  font-weight: 820;
  font-stretch: 125%;
  line-height: 0.95;
  letter-spacing: -0.02em;
}

.page-lede {
  max-width: 60ch;
  margin: 20px 0 0;
  color: var(--muted);
  font-size: 1.125rem;
  line-height: 1.55;
}

.policy {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 32px 56px;
  padding-block: 36px 88px;
}

.toc {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  align-self: start;
}

.toc ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 2px solid var(--rule);
}

.toc a {
  display: block;
  padding: 6px 0 6px 14px;
  color: var(--muted);
  text-decoration: none;
}

.toc a:hover {
  color: var(--ink);
}

.prose {
  min-width: 0;
}

.prose section > * {
  max-width: 68ch;
}

.prose section + section {
  margin-top: 56px;
}

.prose h2 {
  margin: 0 0 12px;
  font-size: 1.5rem;
  font-weight: 750;
  font-stretch: 112%;
  line-height: 1.2;
}

.prose h3 {
  margin: 0 0 6px;
  font-size: 1.125rem;
  font-weight: 720;
  font-stretch: 108%;
  line-height: 1.3;
}

.prose p,
.prose ul,
.prose ol {
  margin: 0 0 14px;
}

.prose li {
  margin-bottom: 6px;
}

.prose .lead {
  padding: 18px 20px 20px 24px;
  background: var(--tile);
  font-weight: 550;
}

.prose sup {
  line-height: 0;
  font-size: 0.72em;
  font-weight: 650;
}

.prose sup a {
  color: var(--tl-ink);
  text-decoration: none;
}

.prose sup a:hover {
  text-decoration: underline;
}

/* blocks that need more room than a line of text */
.prose section > .wide {
  max-width: 920px;
}

@media (max-width: 800px) {
  .policy {
    grid-template-columns: minmax(0, 1fr);
  }

  .toc {
    position: static;
  }
}

/* --------------------------------------------------------------------------
   Testing page
   -------------------------------------------------------------------------- */

.panel-frame {
  margin-top: 36px;
  padding: clamp(24px, 3vw, 36px) clamp(22px, 3vw, 40px) clamp(26px, 3vw, 38px) clamp(26px, 3.4vw, 46px);
  background: var(--tile);
}

.panel-frame__note {
  margin: 26px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.9375rem;
}

.test-detail {
  padding: 18px 0 4px;
  border-top: 1px solid var(--rule);
}

.test-detail:first-of-type {
  border-top: 0;
  padding-top: 4px;
}

.test-detail h3 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.test-detail h3::before {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--tl);
}

.test-detail__method {
  margin: 0 0 8px !important;
  color: var(--muted);
  font-size: 0.9375rem;
}

.findings {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

.findings li {
  margin: 0;
  padding: 14px 0 14px 18px;
  border-left: 3px solid var(--rule);
}

.findings li + li {
  margin-top: 10px;
}

.findings strong {
  font-weight: 750;
}

.lookfor {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

.lookfor li {
  position: relative;
  margin: 0;
  padding: 14px 0 14px 36px;
  border-top: 1px solid var(--rule);
}

.lookfor li:last-child {
  border-bottom: 1px solid var(--rule);
}

.lookfor li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 17px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--tl)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2.5 6.2 2.4 2.4 4.6-5'/%3E%3C/svg%3E")
    no-repeat center;
}

.lookfor strong {
  display: block;
  font-weight: 720;
}

/* the specimen certificate */
.specimen-wrap {
  display: grid;
  gap: 22px;
  margin-top: 8px;
}

.specimen {
  background: var(--tile);
  border-top: 4px solid var(--ink);
  box-shadow: 0 0 0 1px var(--rule);
  padding: 20px 22px 22px;
  font-size: 0.875rem;
  overflow-x: auto;
}

.specimen__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}

.specimen__head img {
  width: 36px;
  height: 36px;
}

.specimen__title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 760;
  font-stretch: 112%;
  line-height: 1.2;
}

.specimen__sub {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 0.8125rem;
}

.specimen__tag {
  margin-left: auto;
  padding: 4px 10px;
  border: 1.5px solid var(--ink);
  font-size: 0.8125rem;
  font-weight: 700;
  white-space: nowrap;
}

.specimen__meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 18px;
  margin: 16px 0;
}

.specimen__meta div {
  min-width: 0;
}

.specimen__meta dt {
  color: var(--muted);
  font-size: 0.8125rem;
}

.specimen__meta dd {
  margin: 0;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
  .specimen__meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.specimen table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.specimen thead th {
  padding: 8px 8px 8px 0;
  border-bottom: 1.5px solid var(--ink);
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}

.specimen tbody th {
  padding: 9px 8px 9px 0;
  border-bottom: 1px solid var(--rule);
  font-weight: 650;
  text-align: left;
  vertical-align: top;
}

.specimen td {
  padding: 9px 8px 9px 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}

.specimen td.pass {
  color: var(--tl-ink);
  font-weight: 700;
}

.specimen__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 20px;
  margin-top: 14px;
  color: var(--muted);
  font-size: 0.8125rem;
}

.marker {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--tl-ink);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 750;
  font-stretch: 100%;
  vertical-align: 1px;
  line-height: 1;
}

.specimen-key {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
}

.specimen-key li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 0 4px;
  margin: 0;
  line-height: 1.4;
}

.specimen-key strong {
  display: block;
  font-weight: 700;
}

/* lot lookup */
.lookup {
  padding: 20px 22px 22px 26px;
  background: var(--tile);
}

.lookup label {
  display: block;
  margin-bottom: 8px;
  font-weight: 650;
}

.lookup__row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.lookup input {
  flex: 1 1 220px;
  min-width: 0;
  height: 46px;
  padding: 0 12px;
  border: 1.5px solid var(--frame);
  border-radius: 0;
  background: var(--tile);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.lookup input:focus {
  border-color: var(--ink);
}

.lookup-result {
  margin-top: 18px;
}

.lookup-result:empty {
  display: none;
}

.coa-card {
  padding: 20px 22px 22px 26px;
  background: var(--tile);
}

.coa-card h3 {
  margin: 0 0 4px;
  font-size: 1.125rem;
}

.coa-card__meta {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 0.9375rem;
}

.coa-card__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.coa-miss {
  margin: 0;
  padding: 12px 16px;
  border-left: 4px solid var(--frame);
  background: var(--tile);
}

/* references */
.refs {
  margin: 0;
  padding-left: 1.6em;
  font-size: 0.9375rem;
}

.refs li {
  margin-bottom: 10px;
  padding-left: 4px;
}

.refs li:target {
  background: var(--tl-wash);
  outline: 6px solid var(--tl-wash);
}

.refs a {
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   Checkout: two steps, the research use declaration first
   -------------------------------------------------------------------------- */

.checkout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr);
  gap: 40px 56px;
  align-items: start;
  padding-block: 28px 88px;
}

@media (max-width: 900px) {
  .checkout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 901px) {
  .checkout > .summary {
    grid-column: 2;
    grid-row: 1;
  }

  .checkout > .checkout__form {
    grid-column: 1;
    grid-row: 1;
  }
}

.setup-notice {
  margin: 24px 0 0;
  padding: 12px 16px;
  border-left: 4px solid var(--danger);
  background: var(--tile);
  font-size: 0.9375rem;
}

.setup-notice code {
  font-size: 0.875rem;
}

.steps {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
}

.steps li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
}

.steps li[aria-current="step"] {
  color: var(--ink);
  font-weight: 650;
}

.steps__no {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1.5px solid currentColor;
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.steps li.is-done {
  color: var(--ink);
}

.steps li.is-done .steps__no {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.step__intro {
  max-width: 62ch;
  margin: -6px 0 20px;
  color: var(--muted);
}

.declared {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px 20px;
  margin: 0 0 32px;
  padding: 18px 20px 18px 24px;
  background: var(--tile);
}

.declared h2 {
  margin: 0 0 4px;
  font-size: 1.0625rem;
  font-weight: 720;
  font-stretch: 108%;
}

.declared p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9375rem;
}

.form-section {
  margin: 0 0 36px;
  padding: 0;
  border: 0;
  min-inline-size: 0;
}

.form-section legend {
  margin-bottom: 16px;
  padding: 0;
  font-size: 1.25rem;
  font-weight: 750;
  font-stretch: 112%;
}

.field {
  display: grid;
  align-content: start;
  gap: 6px;
  margin-bottom: 16px;
}

.field label {
  font-size: 0.9375rem;
  font-weight: 600;
}

.field .opt {
  color: var(--muted);
  font-weight: 400;
}

.field .hint {
  margin: -2px 0 2px;
  color: var(--muted);
  font-size: 0.875rem;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  height: 46px;
  padding: 0 12px;
  border: 1.5px solid var(--frame);
  border-radius: 0;
  background: var(--tile);
  color: var(--ink);
  font: inherit;
}

.field select {
  padding-right: 36px;
  background: var(--tile)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23232a31' stroke-width='2'%3E%3Cpath d='m1 1 5 5 5-5'/%3E%3C/svg%3E")
    no-repeat right 12px center;
  appearance: none;
}

.field textarea {
  height: auto;
  min-height: 100px;
  padding: 10px 12px;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--ink);
}

.field [aria-invalid="true"] {
  border-color: var(--danger);
}

.field--signature input {
  height: 54px;
  font-size: 1.25rem;
  font-weight: 560;
  font-stretch: 90%;
  font-style: oblique 8deg;
  border-width: 0 0 2px;
  background: var(--tile);
  padding-left: 14px;
}

.error {
  margin: 0;
  color: var(--danger);
  font-size: 0.875rem;
  font-weight: 550;
}

.error:empty {
  display: none;
}

.row-2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 16px;
}

.row-3 {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 16px;
}

@media (max-width: 560px) {
  .row-2,
  .row-3 {
    grid-template-columns: minmax(0, 1fr);
  }
}

.checks-group {
  margin: 8px 0 18px;
  padding: 16px 18px 4px;
  background: var(--tile);
  box-shadow: inset 0 0 0 1px var(--rule);
}

.check {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin-bottom: 14px;
}

.check input {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--pp);
}

.check label {
  line-height: 1.45;
}

.check input.is-testing {
  accent-color: var(--tl-ink);
}

.check .error {
  grid-column: 2;
}

.form-alert {
  margin: 0 0 20px;
  padding: 10px 16px;
  border-left: 4px solid var(--danger);
  background: var(--tile);
  color: var(--danger);
  font-weight: 550;
}

.form-alert[hidden] {
  display: none;
}

.summary {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  padding: 24px 24px 24px 30px;
  background: var(--tile);
}

.summary h2 {
  margin: 0 0 4px;
  font-size: 1.25rem;
  font-weight: 750;
  font-stretch: 112%;
}

.summary .lines .line {
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 12px 0;
}

.summary__edit {
  margin: 4px 0 8px;
}

.summary__review {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  font-size: 0.875rem;
}

@media (max-width: 900px) {
  .summary {
    position: static;
  }
}

/* --------------------------------------------------------------------------
   Response page: what happens after a request is sent
   -------------------------------------------------------------------------- */

.received {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr);
  gap: 40px 56px;
  align-items: start;
  padding-block: 28px 88px;
}

@media (max-width: 900px) {
  .received {
    grid-template-columns: minmax(0, 1fr);
  }
}

.statement {
  padding: clamp(24px, 3vw, 34px) clamp(22px, 3vw, 34px) clamp(26px, 3vw, 34px) clamp(28px, 3.4vw, 40px);
  background: var(--tile);
}

.statement__lead {
  max-width: 26ch;
  margin: 0;
  font-size: clamp(1.5rem, 3vw, 2.125rem);
  font-weight: 780;
  font-stretch: 112%;
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.statement__ref {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 18px 0 0;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.statement__ref strong {
  color: var(--ink);
}

.statement__note {
  margin: 14px 0 0;
  font-weight: 600;
}

.send-step {
  margin-top: 28px;
  padding: 20px 22px 22px 26px;
  background: var(--tile);
}

.send-step h2 {
  margin: 0 0 8px;
  font-size: 1.25rem;
  font-weight: 750;
  font-stretch: 112%;
}

.send-step p {
  margin: 0 0 12px;
}

.send-step textarea {
  width: 100%;
  min-height: 200px;
  margin: 4px 0 12px;
  padding: 12px;
  border: 1.5px solid var(--frame);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 0.875rem;
}

.send-step__actions,
.received__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.received h2.section-h {
  margin: 36px 0 14px;
  font-size: 1.25rem;
  font-weight: 750;
  font-stretch: 112%;
}

.next {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: next;
}

.next li {
  counter-increment: next;
  position: relative;
  max-width: 62ch;
  margin: 0;
  padding: 2px 0 18px 44px;
}

.next li::before {
  content: counter(next);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--ink);
  font-size: 0.875rem;
  font-weight: 700;
}

.record {
  padding: 22px 22px 22px 28px;
  background: var(--tile);
}

.record h2 {
  margin: 0 0 4px;
  font-size: 1.125rem;
  font-weight: 750;
  font-stretch: 112%;
}

.record h2 + .lines {
  margin-top: 4px;
}

.record__decl {
  display: grid;
  gap: 10px;
  margin: 24px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  font-size: 0.9375rem;
}

.record__decl div {
  display: grid;
  gap: 1px;
}

.record__decl dt {
  color: var(--muted);
  font-size: 0.8125rem;
}

.record__decl dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.received__actions {
  margin-top: 28px;
}

/* --------------------------------------------------------------------------
   Price breaks and discount codes
   Pepper red, because these are about your order. The steps rise with the
   discount: the one place price breaks are drawn rather than listed.
   -------------------------------------------------------------------------- */

/* the home-page band and the policies table */
.offers {
  padding-bottom: clamp(44px, 6vw, 72px);
}

.offers__head {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  align-items: baseline;
  gap: 8px 32px;
  margin-bottom: 20px;
}

.offers__head h2 {
  margin: 0;
  font-size: clamp(1.5rem, 2.8vw, 2.25rem);
  font-weight: 780;
  font-stretch: 115%;
  line-height: 1.06;
  letter-spacing: -0.01em;
}

.offers__head p {
  max-width: 58ch;
  margin: 0;
  color: var(--muted);
}

.offers__fine {
  max-width: 72ch;
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 0.875rem;
}

@media (max-width: 760px) {
  .offers__head {
    grid-template-columns: minmax(0, 1fr);
  }
}

.breaks-wrap {
  max-width: 920px;
  overflow-x: auto;
}

.breaks {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-variant-numeric: tabular-nums;
}

.breaks thead td {
  width: 24%;
}

.breaks thead tr {
  border-bottom: 2px solid var(--ink);
}

.breaks thead th {
  padding: 0 0 0 6px;
  vertical-align: bottom;
  text-align: left;
  font-weight: inherit;
}

.breaks__step {
  display: block;
  min-height: calc(60px + var(--step, 0) * 22px);
  padding: 10px 14px 12px;
  border-top: 4px solid var(--pp);
  background: var(--pp-wash);
}

.breaks__reward {
  display: block;
  color: var(--pp-ink);
  font-size: clamp(1.0625rem, 2.3vw, 1.625rem);
  font-weight: 780;
  font-stretch: 110%;
  line-height: 1.05;
}

.breaks__how {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 500;
}

/* the bulk step is a phone call, not a percentage */
.breaks th.breaks__call .breaks__step {
  border-top-color: var(--ink);
  background: var(--tile);
  box-shadow: inset 0 0 0 1px var(--rule);
}

.breaks th.breaks__call .breaks__reward {
  color: var(--ink);
}

.breaks tbody th,
.breaks tbody td {
  padding: 12px 8px 12px 20px;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}

.breaks tbody th {
  padding-left: 0;
  color: var(--muted);
  font-size: 0.9375rem;
  font-weight: 500;
}

.breaks tbody td {
  font-weight: 650;
}

.breaks__at {
  display: block;
}

.breaks__off,
.breaks__eq {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.35;
}

.breaks__off {
  color: var(--pp-ink);
  font-weight: 600;
}

@media (max-width: 560px) {
  .breaks thead td {
    width: 21%;
  }

  .breaks thead th {
    padding-left: 4px;
  }

  .breaks__step {
    min-height: calc(52px + var(--step, 0) * 16px);
    padding: 8px 8px 10px;
  }

  .breaks tbody th,
  .breaks tbody td {
    padding: 10px 4px 10px 12px;
    font-size: 0.875rem;
  }

  .breaks tbody th {
    padding-left: 0;
  }
}

.prose section > .wide[data-price-breaks] {
  margin: 8px 0 20px;
}

/* product page: the ladder for the chosen strength */
.ladder {
  display: grid;
  gap: 10px;
}

.ladder__table {
  width: 100%;
  max-width: 460px;
  border-collapse: collapse;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}

.ladder__table caption {
  margin-bottom: 8px;
  text-align: left;
  font-size: 0.9375rem;
  font-weight: 650;
}

.ladder__table th,
.ladder__table td {
  padding: 7px 12px;
  border-bottom: 1px solid var(--rule);
  text-align: left;
}

.ladder__table th {
  color: var(--muted);
  font-weight: 500;
}

.ladder__table td:last-child {
  color: var(--pp-ink);
  font-weight: 600;
  text-align: right;
}

.ladder__table td[colspan] {
  color: var(--ink);
  font-weight: 500;
  text-align: left;
}

.ladder__table tr.is-current th,
.ladder__table tr.is-current td {
  background: var(--tile);
  color: var(--ink);
  font-weight: 700;
}

.ladder__table tr.is-current th {
  box-shadow: inset 4px 0 0 var(--pp);
}

.ladder__table tr.is-current td:last-child {
  color: var(--pp-ink);
}

.ladder__order {
  max-width: 56ch;
  margin: 0;
  color: var(--muted);
  font-size: 0.875rem;
}

.buy__deal {
  margin: -8px 0 0;
  color: var(--muted);
  font-size: 0.9375rem;
}

.buy__deal.is-on {
  color: var(--pp-ink);
  font-weight: 600;
}

.buy__deal:empty {
  display: none;
}

/* the price list's per-break columns */
.pricelist td.col-break {
  color: var(--muted);
  font-weight: 500;
}

/* cart and summary lines */
.line__deal {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.line__deal.is-on {
  color: var(--pp-ink);
  font-weight: 600;
}

.line__was {
  display: block;
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 500;
}

.sum .sum__save dd {
  color: var(--pp-ink);
}

.sum__saved {
  margin: -8px 0 14px;
  color: var(--pp-ink);
  font-size: 0.875rem;
  font-weight: 650;
  text-align: right;
}

.nudge {
  margin: 12px 0 0;
  color: var(--pp-ink);
  font-size: 0.875rem;
  font-weight: 600;
}

.bulk-note {
  margin: 16px 0 8px;
  padding: 14px 16px 14px 20px;
  background: var(--tile);
}

.bulk-note p {
  margin: 0;
  font-size: 0.875rem;
}

.bulk-note .bulk-note__title {
  margin-bottom: 4px;
  font-size: 0.9375rem;
  font-weight: 720;
}

/* the discount code box */
.code-box {
  margin: 0 0 16px;
}

.summary .code-box {
  margin: 16px 0 0;
}

.code-box__label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.875rem;
  font-weight: 600;
}

.code-box__row {
  display: flex;
  gap: 8px;
}

.code-box__row input {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 12px;
  border: 1.5px solid var(--frame);
  border-radius: 0;
  background: var(--tile);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.code-box__row input:focus {
  border-color: var(--ink);
}

.code-box__row input[aria-invalid="true"] {
  border-color: var(--danger);
}

.code-box .error {
  margin-top: 6px;
}

.code-box__applied {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 0 0 6px;
  font-size: 0.9375rem;
}

.code-box__code {
  padding: 2px 8px;
  border: 1.5px dashed var(--pp);
  color: var(--pp-ink);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.code-box__note {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 0.8125rem;
}

/* checkout: the bulk-rate call */
.call-block {
  margin: 4px 0 8px;
  padding: 16px 18px 2px 22px;
  background: var(--tile);
}

.call-block__intro {
  max-width: 60ch;
  margin: 0 0 14px;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Motion and print
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .site-header,
  .mobile-nav,
  .catalog__controls,
  .btn,
  .toast,
  .site-footer ul,
  .received__actions {
    display: none !important;
  }

  body {
    background: #fff;
  }

  .received {
    grid-template-columns: minmax(0, 1fr);
  }
}