/* NUTRAFi RX landing page. Light and premium: clinical white, cool grey, one
   charcoal section, one crimson taken from the tube's band, and glass pieces
   that slide in beside the text and stay fully on screen. */

@font-face {
  font-family: "Montserrat";
  src: url("assets/fonts/montserrat-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Hanken Grotesk";
  src: url("assets/fonts/hanken-grotesk-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --paper: #ffffff;
  --paper-2: #f3f4f6;
  --ink: #15171a;
  --ink-2: #4b5157;
  --ink-3: #62686f;
  --rule: #e0e3e7;
  --rule-strong: #c3c8ce;
  --field-border: #8a9097;
  --red: #b0121c;
  --red-ink: #8f0e17;
  --red-tint: #fbeff0;
  --wash: #f6f7f9;
  --charcoal: #16171b;
  --charcoal-rule: #2d3137;
  --on-dark: #c9ced4;
  --on-dark-2: #aeb4bb;

  --font-display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --gutter: 16px;
  --section: clamp(56px, 8vw, 104px);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

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

p {
  text-wrap: pretty;
}

[id] {
  scroll-margin-top: 84px;
}

[hidden] {
  display: none !important;
}

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

@media (min-width: 768px) {
  :root {
    --gutter: 32px;
  }
}

.band {
  height: 4px;
  background: var(--red);
}

.icon {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  padding: 10px 14px;
  background: var(--ink);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus {
  top: 12px;
}

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

/* ---------------------------------------------------------------- header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--rule);
}

.header-row {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 64px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.125rem;
  letter-spacing: 0.16em;
  line-height: 1;
}

.wordmark-rx {
  margin-left: 0.5em;
  padding: 0.2em 0.28em 0.16em 0.34em;
  border: 1.5px solid currentColor;
  font-size: 0.56em;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.header-maker {
  display: none;
  margin: 0 0 0 auto;
  color: var(--ink-3);
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.header-row .btn {
  margin-left: auto;
}

@media (min-width: 768px) {
  .header-maker {
    display: block;
  }

  .header-row .btn {
    margin-left: 0;
  }
}

/* --------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 28px;
  border: 0;
  border-radius: 2px;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}

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

.btn-primary:hover {
  background: var(--red-ink);
  box-shadow: 0 8px 20px -12px rgba(143, 14, 23, 0.8);
}

/* The Order section's own button while the shop link is not set yet. */
.btn-primary[aria-disabled="true"],
.btn-primary[aria-disabled="true"]:hover {
  background: var(--red);
  box-shadow: none;
  cursor: default;
  opacity: 0.6;
}

.btn-small {
  min-height: 40px;
  padding: 0 16px;
  font-size: 0.6875rem;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0 4px;
  border-bottom: 1px solid var(--rule-strong);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}

.text-link:hover {
  color: var(--red);
  border-color: var(--red);
}

/* An Order now button at the end of a section. Full width on small
   phones, like the one in the first screen. */
.section-cta {
  margin-top: 32px;
}

@media (max-width: 479px) {
  .section-cta .btn {
    width: 100%;
  }
}

@media (min-width: 960px) {
  .faq-cta {
    grid-column: 2;
    margin-top: 0;
  }
}

/* ------------------------------------------------------------------ hero */

.hero {
  position: relative;
  overflow: clip;
  padding-block: clamp(40px, 6vw, 80px) var(--section);
  background:
    radial-gradient(ellipse 60% 70% at 80% 45%, #eceff3 0%, rgba(236, 239, 243, 0) 70%),
    linear-gradient(180deg, var(--wash) 0%, var(--paper) 100%);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}

.display {
  margin: 0;
  color: var(--red);
  font-family: var(--font-display);
  font-size: clamp(4.25rem, 2.4rem + 7.5vw, 6rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 0.95;
}

.product-line {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-size: clamp(0.875rem, 0.8rem + 0.35vw, 1.0625rem);
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.rule {
  display: block;
  width: 48px;
  height: 2px;
  margin: 26px 0;
  background: var(--red);
}

.lede {
  max-width: 34em;
  margin: 0;
  color: var(--ink-2);
  font-size: 1.125rem;
  line-height: 1.6;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 28px;
  margin-top: 32px;
}

.makers {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 40px;
  margin: 40px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}

.makers dt {
  color: var(--ink-3);
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.makers dd {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
}

.hero-figure {
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
}

/* The product on a small stage: a soft glow, the glass molecule out of
   focus behind it (like the product's own ad), and the client's box-and-spray
   render. Sized by height so the whole label stays in the first screen. */
.stage {
  --stage-h: min(calc(100vh - 170px), 560px);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: var(--stage-h);
  padding-bottom: 18px;
  /* closest-side: the glow reaches zero before the box edge, so no line shows. */
  background: radial-gradient(closest-side at 50% 50%, #e6e9ee 0%, rgba(230, 233, 238, 0.55) 50%, rgba(230, 233, 238, 0) 100%);
}

.stage-molecule {
  position: absolute;
  top: 4%;
  right: 2%;
  width: 52%;
  height: auto;
  opacity: 0.9;
  filter: blur(1.5px);
  transform: rotate(14deg);
  pointer-events: none;
  user-select: none;
  /* One slow turn a minute, forever. Stays still for visitors who turn
     motion off (see the reduced-motion rule at the end). */
  animation: molecule-spin 60s linear infinite;
  will-change: transform;
}

@keyframes molecule-spin {
  from {
    transform: rotate(14deg);
  }
  to {
    transform: rotate(374deg);
  }
}

/* The client's box-and-spray render, on its own podium. */
.stage-product {
  position: relative;
  z-index: 2;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(var(--stage-h) - 24px);
  filter: drop-shadow(0 18px 22px rgba(21, 23, 26, 0.14));
}

.hero-figure figcaption {
  margin-top: 12px;
  color: var(--ink-3);
  font-size: 0.8125rem;
  text-align: center;
}

@media (max-width: 479px) {
  .hero-actions .btn {
    width: 100%;
  }
}

@media (min-width: 960px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 72px;
  }

  .hero-figure {
    width: 440px;
    max-width: none;
    margin: 0;
  }

  .stage {
    --stage-h: min(calc(100vh - 200px), 680px);
  }

}

/* --------------------------------------------------------- glass pieces */

/* The client's glass-and-chrome renders with crimson, like the molecules on
   the packaging. Each one sits next to or below its text, fully on screen,
   and slides in from the side when its section scrolls into view. */
.glass {
  display: block;
  max-width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.motion [data-slide] {
  opacity: 0;
  transition: translate 1.2s var(--ease-out), opacity 0.9s var(--ease-out);
}

.motion [data-slide="left"] {
  translate: -25% 0;
}

.motion [data-slide="right"] {
  translate: 25% 0;
}

.motion [data-slide].is-in {
  opacity: 1;
  translate: 0 0;
}

/* --------------------------------------------------------------- pricing */

/* Optimal Balance Pharmacy's prices (client, 2026-10-08), under the hero.
   Phones: one card per row, the price and the per-spray price on one line.
   768 px and up: three cards side by side. */
.pricing {
  position: relative;
  margin-top: clamp(40px, 6vw, 72px);
}

.price-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.price-card {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
  min-width: 0;
  padding: 18px 20px;
  border: 1px solid var(--rule);
  border-top: 2px solid var(--red);
  background: var(--paper);
}

.price-label {
  flex-basis: 100%;
  margin: 0;
  color: var(--ink-3);
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.price {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.price-per {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.9375rem;
}

/* Every card has its own Order now button (data-order: main.js points it at
   the shop). Full width at the bottom of the card. */
.price-btn {
  flex-basis: 100%;
  margin-top: 10px;
}

.pricing-note {
  margin: 14px 0 0;
  color: var(--ink-3);
  font-size: 0.875rem;
}

@media (min-width: 768px) {
  .price-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }

  .price-card {
    display: block;
    padding: 24px 26px;
  }

  .price-label {
    margin-bottom: 10px;
  }

  .price-per {
    margin-top: 4px;
  }

  .price-btn {
    display: flex;
    width: 100%;
    margin-top: 20px;
  }
}

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

/* ----------------------------------------------------------------- about */

.about {
  padding-block: var(--section);
}

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

.about-head h2 {
  margin-bottom: 16px;
}

.about-lead {
  max-width: 30em;
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);
  line-height: 1.5;
}

.about-body p {
  max-width: 40em;
  margin: 0 0 16px;
  color: var(--ink-2);
}

.about-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 0;
  margin: 28px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}

.about-facts div {
  flex: 1 1 150px;
  min-width: 0;
  padding-right: 24px;
}

.about-facts dt {
  color: var(--ink-3);
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.about-facts dd {
  margin: 6px 0 0;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
}

@media (min-width: 960px) {
  .about-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 80px;
  }

  .about-body {
    padding-top: 10px;
  }
}

/* ----------------------------------------------------------------- label */

.label-section {
  padding-block: var(--section);
  background: var(--paper-2);
}

.label-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

@media (min-width: 960px) {
  .label-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 80px;
  }
}

h2 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.375rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.supports h2 {
  margin-bottom: 28px;
}

.claims {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}

.claims li {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
}

.hex-icon {
  width: 48px;
  height: 48px;
  flex: none;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hex-icon .hex {
  stroke: var(--rule-strong);
}

.claim-text {
  min-width: 0;
  font-family: var(--font-display);
  font-size: clamp(0.8125rem, 0.76rem + 0.3vw, 1rem);
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1.5;
  text-transform: uppercase;
}

.dagger {
  margin-left: 4px;
  color: var(--red);
  font-family: var(--font-body);
  font-size: 0.85em;
  letter-spacing: 0;
  text-decoration: none;
  vertical-align: super;
  line-height: 0;
}

.facts {
  padding: 22px 24px 6px;
  border: 1.5px solid var(--ink);
  background: var(--paper);
}

.facts-title {
  margin: 0;
  padding-bottom: 12px;
  border-bottom: 6px solid var(--red);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.facts-list {
  margin: 0;
}

.facts-list div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
}

.facts-list div:last-child {
  border-bottom: 0;
}

.facts-list dt {
  color: var(--ink-2);
  font-size: 0.875rem;
}

.facts-list dd {
  margin: 0;
  min-width: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  text-align: right;
}

.facts-list div:has(+ .facts-strong) {
  border-bottom: 0;
}

.facts-list .facts-strong {
  border-top: 3px solid var(--ink);
}

.facts-strong dd {
  color: var(--red);
}

/* ----------------------------------------------------------------- spray */

/* The one dark section: the spray-in-mouth render beside the text (below it
   on phones), and the glass DNA as a faint background. */
.spray {
  position: relative;
  overflow: clip;
  padding-block: var(--section);
  background: var(--charcoal);
  color: #fff;
}

.spray .container {
  position: relative;
  z-index: 1;
}

.spray h2 {
  color: #fff;
}

.spray-copy > p {
  max-width: 38em;
  margin: 0 0 18px;
  color: var(--on-dark);
  font-size: 1.0625rem;
}

.spray-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}

/* Background only: large, faint and fully inside the section. */
.spray-dna-bg {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  width: 90%;
  max-width: none;
  height: auto;
  opacity: 0.07;
  transform: translate(-50%, -50%) rotate(-8deg);
  pointer-events: none;
  user-select: none;
}

/* The spray-in-mouth render. Its edges fade into the charcoal, so the head
   the artwork crops never ends in a hard line. Below the text on phones. */
.mouth {
  order: 2;
  display: block;
  width: 100%;
  height: auto;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 8%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 8%, #000 86%, transparent 100%);
  mask-composite: intersect;
}

@media (min-width: 960px) {
  .spray-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 72px;
  }

  .mouth {
    order: 0;
  }
}

/* -------------------------------------------------------------- audience */

.audience {
  padding-top: var(--section);
}

.audience-lead {
  max-width: 34em;
  margin: 4px 0 0;
  color: var(--ink);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  line-height: 1.5;
}

.audience-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: 32px;
  border-top: 1px solid var(--rule);
}

.audience-col {
  min-width: 0;
  padding: 28px 0;
  border-bottom: 1px solid var(--rule);
}

.audience-col h3 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  font-weight: 600;
}

.audience-col p {
  max-width: 32em;
  margin: 0;
  color: var(--ink-2);
}

@media (min-width: 768px) {
  .audience-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .audience-col {
    padding: 36px 48px 40px 0;
  }

  .audience-col + .audience-col {
    padding-left: 48px;
    border-left: 1px solid var(--rule);
  }
}

/* ----------------------------------------------------------------- order */

/* The close of the page: where the product is ordered, the one button, and
   the client's group shot (the box with four sprays on a podium). */
.order {
  overflow: clip;
  padding-block: var(--section);
  background: var(--paper-2);
}

.order-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}

.order-copy {
  min-width: 0;
}

.order-copy p {
  max-width: 30em;
  margin: 0;
  color: var(--ink-2);
}

/* Shown until the shop link is set in config.js. */
.order-copy .order-note {
  margin-top: 14px;
  color: var(--ink-3);
  font-size: 0.875rem;
}

.product-group-shot {
  display: block;
  width: min(360px, 80%);
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 18px 22px rgba(21, 23, 26, 0.14));
}

@media (min-width: 960px) {
  .order-grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: 80px;
  }
}

/* ------------------------------------------------------------------- faq */

.faq {
  padding-block: var(--section);
}

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

.faq-list {
  border-top: 1px solid var(--rule);
}

.faq details {
  border-bottom: 1px solid var(--rule);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
  transition: color 0.2s var(--ease-out);
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2v12M2 8h12' fill='none' stroke='%23b0121c' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.3s var(--ease-out);
}

.faq details[open] summary::after {
  transform: rotate(45deg);
}

.faq summary:hover {
  color: var(--red);
}

.faq details p {
  max-width: 60ch;
  margin: 0;
  padding: 0 40px 22px 0;
  color: var(--ink-2);
}

.faq details a {
  color: var(--ink);
  text-underline-offset: 3px;
}

@media (min-width: 960px) {
  .faq-grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: 40px 80px;
  }
}

/* ---------------------------------------------------------------- footer */

.site-footer {
  border-top: 1px solid var(--rule);
}

.footer-brands {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 40px;
  padding-top: 40px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 16px;
}

.brand-label {
  color: var(--ink-3);
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.brand img {
  width: auto;
  height: 40px;
}

/* The one-line NUTRAFi [RX] logo, as on the spray: shorter, so both logos
   carry the same weight. */
.brand img.brand-inline {
  height: 19px;
}

.brand-divider {
  display: none;
  width: 1px;
  height: 44px;
  background: var(--rule);
}

@media (min-width: 600px) {
  .brand-divider {
    display: block;
  }
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  padding-block: 32px 36px;
}

@media (min-width: 960px) {
  .footer-grid {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 64px;
  }
}

.footer-print p {
  max-width: 76ch;
  margin: 0 0 12px;
  color: var(--ink-3);
  font-size: 0.8125rem;
  line-height: 1.6;
}

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

.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px 28px;
}

.footer-links a {
  padding: 4px 0 3px;
  border-bottom: 1px solid var(--rule-strong);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-decoration: none;
  text-transform: uppercase;
}

.footer-links a:hover {
  color: var(--red);
  border-color: var(--red);
}

/* ------------------------------------------------------------ review mode */

/* Open the page with ?review to see every text that needs approved wording. */
.is-review [data-placeholder] {
  outline: 2px dashed #c98f00;
  outline-offset: 4px;
  background: rgba(255, 196, 0, 0.14);
}

/* ----------------------------------------------------------------- motion */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}