/* trymayday.com — ported from the live Mayday 1.3 theme (Dawn-based), plan §6 "Design".
   Values come from config/settings_data.json and assets/base.css; block styles follow by block. */

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
  /* Freight Text Pro 700 headings, ITC Avant Garde Gothic 500/700 body (Typekit kit imv8ttk). */
  --font-heading: "freight-text-pro", Georgia, serif;
  --font-body: "itc-avant-garde-gothic-pro", "Century Gothic", system-ui, sans-serif;
  --font-heading-scale: 1.2; /* heading_scale 120 / body_scale 100 */
  --page-width: 120rem; /* page_width 1200 */
  --gutter: 1.5rem;
  --section-space: 4rem;
  --grid-gap-x: 2rem; /* spacing_grid_horizontal */
  --grid-gap-y: 3.2rem; /* spacing_grid_vertical */
  --radius-media: 2rem; /* media_radius, card_corner_radius */
  --radius-badge: 4rem;
  --button-border: 0.1rem;

  --cream: 243 241 233;
  --orange: 245 130 88;
  --orange-ink: 197 61 12; /* #c53d0c: 4.6:1 on cream */
  --orange-light: 248 172 144; /* #f8ac90: 4.6:1 on navy */
  --gold: 232 181 77;
  --navy: 50 77 121;
  --green: 87 166 113;
  --black: 0 0 0;
  --white: 255 255 255;
}

@media (min-width: 750px) {
  :root {
    --gutter: 5rem;
    --section-space: 6rem;
  }
}

/* ── Color schemes (settings_data color_schemes) ───────────────────────── */
.scheme-1,
.scheme-2,
.scheme-3,
.scheme-4,
.scheme-5,
[class*="scheme-"] {
  --color-fg: var(--black);
  --color-button: var(--black);
  --color-button-text: var(--white);
  --color-secondary-button-text: var(--black);
  color: rgb(var(--color-fg));
}
.scheme-1 {
  --color-bg: var(--cream);
  background-color: rgb(var(--color-bg));
}
.scheme-2,
.scheme-077336c7-5827-495d-b374-4077e4c8757b {
  --color-bg: var(--orange);
  background-color: rgb(var(--color-bg));
}
.scheme-077336c7-5827-495d-b374-4077e4c8757b {
  --color-fg: var(--white);
}
.scheme-3 {
  --color-bg: var(--gold);
  background-color: rgb(var(--color-bg));
}
.scheme-4 {
  --color-bg: var(--navy);
  --color-fg: var(--cream);
  --color-button: var(--cream);
  --color-button-text: var(--black);
  --color-secondary-button-text: var(--cream);
  background-color: rgb(var(--color-bg));
}
.scheme-5 {
  --color-bg: var(--green);
  background-color: rgb(var(--color-bg));
}
.scheme-efb2e488-a561-4382-9961-a843db9da727 {
  --color-bg: var(--white);
  background-color: rgb(var(--color-bg));
}
/* Transparent schemes inherit the surrounding background. */
.scheme-13a34bbb-1cbf-43d3-95d8-9edb6b12a660,
.scheme-3c15fb8e-6c0d-48d3-af65-79d9c6d8f322 {
  background-color: transparent;
}
.scheme-de700254-c8d9-44a0-9eaa-5096aef3f844 {
  --color-fg: var(--white);
  background-color: transparent;
}

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

html {
  font-size: 62.5%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.6;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 750px) {
  body {
    font-size: 1.6rem;
  }
}

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

a {
  color: inherit;
}

p {
  margin: 0 0 1.2rem;
}

ul {
  margin: 0;
}

main {
  display: block;
  min-width: 0; /* a grid item: wide tables scroll instead of widening the page */
}

/* ── Type scale (base.css, heading_scale 1.2) ──────────────────────────── */
h1,
h2,
h3,
h4,
h5,
.h0,
.h1,
.h2,
.h3,
.h4,
.h5 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0;
  line-height: 1.2;
  word-break: break-word;
  margin: 0 0 1.5rem;
}

.h0 {
  font-size: calc(var(--font-heading-scale) * 4rem);
}
h1,
.h1 {
  font-size: calc(var(--font-heading-scale) * 3.5rem);
}
h2,
.h2 {
  font-size: calc(var(--font-heading-scale) * 2rem);
}
h3,
.h3 {
  font-size: calc(var(--font-heading-scale) * 1.7rem);
}
h4,
.h4 {
  font-size: calc(var(--font-heading-scale) * 1.5rem);
}
h5,
.h5 {
  font-size: calc(var(--font-heading-scale) * 1.2rem);
}

@media (min-width: 750px) {
  .h0 {
    font-size: calc(var(--font-heading-scale) * 5.2rem);
  }
  h1,
  .h1 {
    font-size: calc(var(--font-heading-scale) * 4rem);
  }
  h2,
  .h2 {
    font-size: calc(var(--font-heading-scale) * 2.4rem);
  }
  h3,
  .h3 {
    font-size: calc(var(--font-heading-scale) * 1.8rem);
  }
  h5,
  .h5 {
    font-size: calc(var(--font-heading-scale) * 1.3rem);
  }
}

/* Theme "subtitle" / caption style: small spaced capitals in the body face. */
.eyebrow,
.hero__eyebrow,
.image-text__eyebrow,
.rich-text__eyebrow,
.rich-text__caption,
.product-feature__eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: 0.3rem;
  text-transform: uppercase;
  margin: 0 0 1.2rem;
}

/* ── Rich text ─────────────────────────────────────────────────────────── */
.rte > :last-child {
  margin-bottom: 0;
}
.rte ul,
.rte ol {
  padding-left: 2rem;
  margin: 0 0 1.2rem;
}
.rte a {
  text-underline-offset: 0.3rem;
}

/* ── Layout ─────────────────────────────────────────────────────────────── */
/* Jump links (#study-2024) land below the sticky header, not under it. */
html {
  scroll-padding-top: 10rem;
}
/* Blocks run full-bleed (their scheme colors the band); content stays within the page width. */
.block,
.page-title,
.collection-hero,
.product,
.product-grid--collection,
.blog,
.not-found {
  padding-inline: max(var(--gutter), calc((100% - var(--page-width)) / 2 + var(--gutter)));
  padding-block: var(--section-space);
}

.page-title {
  padding-bottom: 0;
}

/* ── Buttons (base.css .button; buttons_radius 0, border 1px) ──────────── */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 12rem;
  min-height: 4.5rem;
  padding: 0 3rem;
  border: var(--button-border) solid rgb(var(--color-button));
  border-radius: 0;
  background-color: rgb(var(--color-button));
  color: rgb(var(--color-button-text));
  font: inherit;
  font-size: 1.5rem;
  letter-spacing: 0.1rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow 0.1s ease;
}
.button:hover {
  box-shadow: 0 0 0 0.1rem rgb(var(--color-button));
}
.button--secondary {
  background-color: transparent;
  color: rgb(var(--color-secondary-button-text));
}

/* ── Accessibility helpers ─────────────────────────────────────────────── */
.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;
}

:focus-visible {
  outline: 0.2rem solid rgb(var(--color-fg, var(--black)));
  outline-offset: 0.3rem;
}

details > summary {
  cursor: pointer;
}

/* ── Header (section header; logo middle-center, sticky, white) ────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
  padding: 2rem max(var(--gutter), calc((100% - var(--page-width)) / 2 + var(--gutter)));
  border-bottom: 0.1rem solid rgb(var(--black) / 0.08);
}
.site-header ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.site-header a {
  text-decoration: none;
}
.site-header__logo {
  grid-column: 2;
  grid-row: 1;
}
.site-header__logo img {
  width: 17rem;
}
.site-header__nav {
  display: none;
}
.site-header__nav ul {
  display: flex;
  gap: 1.5rem;
}
.site-header__nav a {
  display: block;
  white-space: nowrap;
  padding: 1.2rem;
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.1rem;
}
.site-header__nav a:hover {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}
.site-header__nav--left ul {
  justify-content: flex-end;
}

/* Mobile menu: a <details> drawer, no JavaScript. */
.menu-drawer {
  grid-column: 1;
  grid-row: 1;
}
.menu-drawer__toggle {
  list-style: none;
  display: inline-flex;
  padding: 1rem;
  margin-left: -1rem;
}
.menu-drawer__toggle::-webkit-details-marker {
  display: none;
}
.menu-drawer__toggle .icon {
  width: 2rem;
  height: 2rem;
}
.menu-drawer .icon-close,
.menu-drawer[open] .icon-hamburger {
  display: none;
}
.menu-drawer[open] .icon-close {
  display: block;
}
.menu-drawer__nav {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  min-height: calc(100vh - 100%);
  padding: 2rem var(--gutter) 4rem;
  background-color: rgb(var(--cream));
}
.menu-drawer__nav a {
  display: block;
  padding: 1.1rem 0;
  font-size: 1.8rem;
  font-weight: 700;
}
.menu-drawer__social {
  display: flex;
  gap: 1.5rem;
  margin-top: 2rem;
}
.menu-drawer__social .icon {
  width: 2.2rem;
  height: 2.2rem;
}

/* Six links plus the logo need about 1200px on one line; narrower screens get the drawer. */
@media (min-width: 1200px) {
  .menu-drawer {
    display: none;
  }
  .site-header__nav {
    display: block;
  }
  .site-header__nav--left {
    grid-column: 1;
  }
  .site-header__nav--right {
    grid-column: 3;
  }
}

/* ── Footer (scheme-2, padding 60) ─────────────────────────────────────── */
.site-footer {
  padding: 6rem max(var(--gutter), calc((100% - var(--page-width)) / 2 + var(--gutter))) 3rem;
}
.site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.site-footer a {
  text-decoration: none;
}
.site-footer a:hover {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}
.site-footer__top {
  display: grid;
  gap: 3rem;
}
.site-footer__logo {
  width: 22rem;
  margin-bottom: 2rem;
}
.site-footer__social {
  display: flex;
  gap: 1.5rem;
}
.site-footer__social .icon {
  width: 2.2rem;
  height: 2.2rem;
}
.site-footer__heading {
  font-family: var(--font-body);
  font-size: 1.6rem;
  margin-bottom: 1.2rem;
}
.site-footer__group li {
  padding: 0.4rem 0;
}
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 4rem;
  font-size: 1.2rem;
}
.site-footer__copyright {
  margin: 0;
}
.site-footer__policies {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

@media (min-width: 750px) {
  /* dev_style.css: first block 70%, the two menus 13% each. */
  .site-footer__top {
    grid-template-columns: 70fr 13fr 13fr;
  }
}

/* ── Shared block pieces ───────────────────────────────────────────────── */
.block > h1,
.block > h2,
.block > .h0 {
  margin-bottom: 3rem;
}
/* The brand orange at text sizes, darkened on light schemes and lightened on navy for WCAG AA
   (4.5:1); #f58258 itself is 2.3:1 on cream and 3.3:1 on navy. */
.hero__eyebrow,
.image-text__eyebrow,
.product-feature__eyebrow {
  color: rgb(var(--orange-ink));
}
.collection-hero__title {
  color: rgb(var(--orange-light));
}
/* custom-border (dev_style.css): a thin rule with a short thick bar at its start. */
.feature-list__item-heading,
.columns--v2 .columns__title {
  position: relative;
  padding-bottom: 1.6rem;
  margin-bottom: 1.6rem;
  border-bottom: 0.2rem solid rgb(var(--rule, var(--gold)));
}
.feature-list__item-heading::after,
.columns--v2 .columns__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.5rem;
  width: 6rem;
  height: 0.8rem;
  background-color: rgb(var(--rule, var(--gold)));
}
.feature-list--v2 {
  --rule: var(--orange);
}
.columns--v2 {
  --rule: var(--black);
}

/* ── hero (section image-banner) ───────────────────────────────────────── */
.block--hero {
  position: relative;
  display: grid;
  padding-block: 0;
}
.hero__image {
  width: 100%;
  object-fit: cover;
}
.hero__image--mobile {
  display: none;
}
.hero__content {
  padding-block: 3rem;
  max-width: 64rem;
}
.hero--center .hero__content {
  justify-self: center;
  text-align: center;
}
.hero--right .hero__content {
  justify-self: end;
  text-align: right;
}
.hero__content .rte,
.hero__subheading {
  margin-bottom: 2rem;
}
.block--hero:not(:has(.hero__image)),
.hero--stacked {
  padding-block: var(--section-space);
}
/* Stacked heroes (discover pages): centered text, product shot below. */
.hero--stacked .hero__content {
  max-width: 90rem;
}
.hero--stacked .hero__eyebrow {
  font-family: var(--font-heading);
  font-size: calc(var(--font-heading-scale) * 1.8rem);
  letter-spacing: 0;
  text-transform: none;
  color: inherit;
}
.hero--stacked .hero__subheading {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: calc(var(--font-heading-scale) * 2.4rem);
}
.hero__note {
  margin: 1.5rem 0 0;
  font-weight: 700;
  font-size: 1.3rem;
  text-decoration: underline;
}
.hero--stacked .hero__image {
  max-width: 60rem;
  justify-self: center;
}

@media (min-width: 750px) {
  /* Text overlays the image, placed by desktop_content_position / alignment. */
  .hero--overlay:has(.hero__image) {
    grid-template-areas: "stack";
    min-height: 40rem;
  }
  .hero--overlay:has(.hero__image) > * {
    grid-area: stack;
  }
  .hero--overlay.hero--small:has(.hero__image) {
    min-height: 42rem;
  }
  .hero--overlay.hero--medium:has(.hero__image) {
    min-height: 56rem;
  }
  .hero--overlay.hero--large:has(.hero__image) {
    min-height: 72rem;
  }
  /* The banner's custom background (e.g. cream over gold on the home page). */
  .hero--overlay[style*="--hero-bg"] {
    background: var(--hero-bg);
  }
  /* Full-bleed image behind the text (grid-area: auto so it's placed against the whole section). */
  .hero--overlay .hero__image {
    grid-area: auto;
    position: absolute;
    inset: 0;
    height: 100%;
  }
  /* Banners whose product shot sits on the right of a colored background (home, results). */
  .hero--contain .hero__image {
    object-fit: contain;
    object-position: right center;
  }
  .hero--overlay:has(.hero__image) .hero__content {
    position: relative;
    max-width: 36rem;
    padding-block: 5rem;
  }
  .hero--top .hero__content {
    align-self: start;
  }
  .hero--middle .hero__content {
    align-self: center;
  }
  .hero--bottom .hero__content {
    align-self: end;
  }
}

/* ── rich_text (section rich-text) ─────────────────────────────────────── */
.block--rich_text {
  text-align: center;
}
.block--rich_text > * {
  max-width: 78rem;
  margin-inline: auto;
}
.rich-text--left {
  text-align: left;
}
.rich-text--left > * {
  margin-inline: 0;
}
.rich-text__image {
  max-width: 20rem;
  margin: 2rem auto;
}
.rich-text__caption {
  font-size: 1.2rem;
}
.block--rich_text > .button {
  margin-block: 0.5rem 2rem;
}
.block--rich_text > .button + :where(.button) {
  margin-left: 1rem;
}
/* Full width (e.g. a study report): text keeps a readable measure, tables use the page width. */
.rich-text--full > * {
  max-width: none;
}
.rich-text--full .rte > :not(.table-scroll) {
  max-width: 78rem;
}

/* ── image_text (section image-with-text, multirow) ───────────────────── */
.block--image_text {
  display: grid;
  gap: 3rem;
  align-items: center;
}
.image-text__image {
  width: 100%;
  border-radius: var(--radius-media);
}
@media (min-width: 750px) {
  .block--image_text {
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
  }
  .image-text--image-right .image-text__image {
    order: 2;
  }
}

/* ── columns (sections multicolumn v1–v4) ─────────────────────────────── */
.columns__list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--grid-gap-y) var(--grid-gap-x);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.block--columns > h2,
.block--columns > h1 {
  text-align: center;
}
.columns__title {
  font-size: 1.6rem;
}
.columns--v2 .columns__title {
  font-size: 2rem;
}
.columns__item .rte {
  font-size: 1.3rem;
}
@media (min-width: 750px) {
  .columns__list {
    grid-template-columns: repeat(var(--per-row), minmax(0, 1fr));
  }
}
/* v1: icon row (Paraben-Free, Kills Lice, …) */
.columns--v1 .columns__item {
  text-align: center;
}
.columns--v1 .columns__title {
  font-size: 1.8rem;
}
.columns--v1 .columns__image {
  width: 8rem;
  margin: 0 auto 1.2rem;
}
/* v2: cards with a photo and a ruled title */
.columns--v2 .columns__image {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius-media);
  margin-bottom: 1.6rem;
}
/* v3: steps joined by a line (The Methodology, How it works) */
.columns--v3 .columns__item {
  position: relative;
  text-align: center;
}
.columns--v3 .columns__image {
  width: 6.4rem;
  margin: 0 auto 1.2rem;
}
@media (min-width: 750px) {
  .columns--v3 .columns__item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 3.2rem;
    left: calc(50% + 5rem);
    width: calc(100% - 10rem + var(--grid-gap-x));
    border-top: 0.1rem solid currentColor;
  }
}
/* v4: problem / solution statements, split by a rule */
.columns--v4 .columns__item {
  text-align: center;
}
@media (min-width: 750px) {
  .columns--v4 .columns__item + .columns__item {
    border-left: 0.1rem solid currentColor;
    padding-left: var(--grid-gap-x);
  }
}
.columns--v4 .columns__title {
  font-family: var(--font-body);
  letter-spacing: 0.3rem;
  font-size: 1.4rem;
}
.columns--v4 .rte {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 1.3;
}

/* ── feature_list (sections product-features, product-features-v2) ────── */
.block--feature_list {
  display: grid;
  gap: 3rem;
}
.feature-list__content {
  display: contents;
}
.feature-list__items {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 3rem;
}
.feature-list__item-heading {
  font-size: 2rem;
}
.feature-list__items .rte {
  font-size: 1.3rem;
}
/* The content wrapper is display: contents, so its children are the section's grid items. */
.feature-list--v1 .feature-list__content > :is(h1, h2) {
  text-align: center;
  font-size: calc(var(--font-heading-scale) * 3.5rem);
}
.feature-list__image {
  width: 100%;
  object-fit: contain;
}
@media (min-width: 750px) {
  /* v1: heading across the top, image left, items right. */
  .feature-list--v1 {
    grid-template-columns: 1fr 1fr;
    column-gap: 6rem;
    align-items: center;
  }
  .feature-list--v1 .feature-list__content > :is(h1, h2) {
    grid-column: 1 / -1;
    font-size: calc(var(--font-heading-scale) * 4rem);
  }
  .feature-list--v1 .feature-list__image {
    grid-column: 1;
    grid-row: 2;
  }
  .feature-list--v1 .feature-list__items {
    grid-column: 2;
    grid-row: 2;
  }
  /* v2: heading and intro on the left, items on the right. */
  .feature-list--v2 {
    grid-template-columns: 1fr 1fr;
    column-gap: 6rem;
    align-items: start;
  }
  .feature-list--v2 .feature-list__content > :is(h1, h2) {
    grid-column: 1;
    grid-row: 1;
    font-size: calc(var(--font-heading-scale) * 2.8rem);
  }
  .feature-list--v2 .feature-list__intro {
    grid-column: 1;
    grid-row: 2;
  }
  .feature-list--v2 .feature-list__items {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

/* ── testimonials (section slideshow) ─────────────────────────────────── */
.block--testimonials {
  display: grid;
  gap: 3rem;
  align-items: center;
}
.testimonials__image {
  width: 100%;
  max-height: 48rem;
  object-fit: contain;
}
/* A swipeable row, one quote per view (no JavaScript). */
.testimonials__list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.testimonials__item {
  scroll-snap-align: start;
  text-align: center;
  padding: 0 2rem 2rem;
}
.testimonials__logo {
  width: 14rem;
  margin: 0 auto 1.6rem;
}
.testimonials__quote {
  margin: 0 0 1.6rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: calc(var(--font-heading-scale) * 2rem);
  line-height: 1.3;
}
.testimonials__source,
.testimonials__note {
  font-size: 1.2rem;
  letter-spacing: 0.2rem;
  margin: 0;
}
/* The brand orange is 2.3:1 on cream at this size; the ink and light variants pass 4.5:1. */
.testimonials__note {
  color: rgb(var(--orange-ink));
}
.scheme-4 .testimonials__note {
  color: rgb(var(--orange-light));
}
@media (min-width: 750px) {
  .block--testimonials:has(.testimonials__image) {
    grid-template-columns: 1fr 1fr;
    padding-block: 0;
    padding-left: 0;
  }
  .block--testimonials .testimonials__image {
    max-height: none;
    height: 100%;
    object-fit: cover;
    object-position: left bottom;
  }
  .testimonials__quote {
    font-size: calc(var(--font-heading-scale) * 2.4rem);
  }
}

/* ── Tables (comparison_table, study_results, report markdown) ─────────── */
.table-scroll {
  overflow-x: auto;
  margin-block: 2rem;
}
.table-scroll table,
.rte table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.4rem;
}
.table-scroll th,
.table-scroll td,
.rte th,
.rte td {
  text-align: left;
  vertical-align: top;
  padding: 1rem 1.2rem;
  border-bottom: 0.1rem solid rgb(var(--color-fg) / 0.2);
}
.table-scroll thead th,
.rte thead th {
  border-bottom-width: 0.2rem;
}
.table-scroll tbody th {
  font-weight: 600;
}
.comparison-table__note {
  font-size: 1.2rem;
}

/* ── key_stats ─────────────────────────────────────────────────────────── */
.block--key_stats > h1,
.block--key_stats > h2,
.key-stats__intro {
  text-align: center;
}
.key-stats__intro {
  max-width: 72rem;
  margin: 0 auto 3rem;
}
.key-stats__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--grid-gap-x);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}
.key-stats__item {
  display: flex;
  flex-direction: column;
  padding: 2rem;
  border: 0.1rem solid rgb(var(--color-fg) / 0.1);
  border-radius: var(--radius-media);
  background: rgb(var(--white) / 0.6); /* lighter than cream, so orange-ink text keeps 4.5:1 */
}
.key-stats__item p {
  margin: 0;
}
.key-stats__item .key-stats__tag {
  margin-bottom: 1rem;
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(var(--orange-ink));
}
.key-stats__item .key-stats__value {
  margin-bottom: 0.6rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 4rem;
  line-height: 1;
}
.key-stats__label {
  font-size: 1.4rem;
}
.key-stats__item .key-stats__source {
  margin-top: 0.8rem;
  font-size: 1.2rem;
  color: rgb(var(--color-fg) / 0.75);
}
.key-stats__title {
  font-size: 1.8rem;
  margin: 2rem 0 0.8rem;
}
.key-stats__item .rte {
  font-size: 1.3rem;
}
.key-stats__link {
  margin-top: auto;
  padding-top: 1.6rem;
  font-weight: 600;
}
.block--key_stats > .button {
  display: flex;
  width: fit-content;
  margin: 3rem auto 0;
}

/* ── study_results ─────────────────────────────────────────────────────── */
.study {
  margin-top: 2rem;
  border: 0.1rem solid rgb(var(--color-fg) / 0.15);
  border-radius: var(--radius-media);
  overflow: hidden;
}
.study__header {
  --color-fg: var(--cream);
  padding: 2rem;
  background: rgb(var(--navy));
  color: rgb(var(--color-fg));
}
.study__header p {
  margin: 0;
}
.study__tag {
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(var(--orange-light));
}
.study__title {
  font-size: 2.2rem;
  margin: 0.6rem 0;
}
.study__byline {
  font-size: 1.3rem;
}
.study__body {
  padding: 2rem;
}
.study__facts {
  display: grid;
  gap: 1.2rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  margin: 0;
}
.study__facts dt {
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.study__facts dd {
  margin: 0.2rem 0 0;
  font-weight: 600;
}
.study__callout {
  margin-block: 2rem;
  padding: 1.4rem 1.6rem;
  border-left: 0.4rem solid rgb(var(--orange));
  background: rgb(var(--color-fg) / 0.05);
}
.study__footer {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.6rem;
  align-items: center;
}
.study__footnote {
  flex-basis: 100%;
  margin: 0;
  font-size: 1.2rem;
}

/* ── press_list ────────────────────────────────────────────────────────── */
.press-list__intro {
  max-width: 72rem;
  margin-bottom: 2rem;
}
.press-list__items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--grid-gap-x);
}
.press-list__item {
  padding: 2rem;
  border: 0.1rem solid rgb(var(--color-fg) / 0.1);
  border-radius: var(--radius-media);
  background: rgb(var(--white) / 0.6);
}
.press-list__meta {
  margin: 0 0 0.6rem;
  font-size: 1.2rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(var(--color-fg) / 0.75);
}
.press-list__item .press-list__headline {
  margin: 0 0 0.8rem;
  font-size: 2rem;
}
.press-list__item .rte {
  max-width: 72rem;
  margin-bottom: 1.6rem;
}

/* ── person ────────────────────────────────────────────────────────────── */
.person__card {
  display: grid;
  gap: 2rem;
  grid-template-columns: auto 1fr;
  align-items: start;
}
.person__initials {
  display: grid;
  place-items: center;
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  background: rgb(var(--navy));
  color: rgb(var(--cream));
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 2.8rem;
}
.person__name {
  font-size: 2.4rem;
  margin-bottom: 0.4rem;
}
.person__role {
  margin: 0 0 1.2rem;
  font-size: 1.3rem;
}
.person__credentials {
  padding-left: 2rem;
}
.person__link {
  font-weight: 600;
}
@media (max-width: 749px) {
  .person__card {
    grid-template-columns: 1fr;
  }
}

/* ── Store locator demo (/store-locator) ───────────────────────────────── */
.locator__demo {
  display: inline-block;
  margin: 0 0 2rem;
  padding: 0.6rem 1.2rem;
  border: 0.1rem solid rgb(var(--gold));
  background: rgb(var(--gold) / 0.2);
  font-size: 1.3rem;
}
.locator__form {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem 1.6rem;
  align-items: end;
  margin-bottom: 2rem;
}
.locator__form label {
  display: grid;
  gap: 0.4rem;
  font-size: 1.3rem;
  font-weight: 600;
}
.locator__form input,
.locator__form select {
  min-height: 4.5rem;
  padding: 0 1.2rem;
  border: 0.1rem solid rgb(var(--color-fg) / 0.5);
  background: rgb(var(--white));
  font: inherit;
  font-size: 1.5rem;
}
.locator__form input[name="zip"] {
  width: 12rem;
}
/* Product names are long: the picker shrinks to the screen instead of widening the page. */
.locator__form label:has(select) {
  flex: 1 1 24rem;
  min-width: 0;
}
.locator__form select {
  width: 100%;
}
.locator__results > * {
  min-width: 0;
}
.locator__summary {
  font-size: 1.5rem;
}
.locator__results {
  display: grid;
  gap: 2rem;
  margin-block: 2rem;
}
.locator__list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 56rem;
  overflow-y: auto;
}
.locator__store {
  padding: 1.4rem 0.4rem;
  border-bottom: 0.1rem solid rgb(var(--color-fg) / 0.2);
  cursor: pointer;
}
.locator__store p {
  margin: 0.2rem 0;
  font-size: 1.4rem;
}
.locator__retailer {
  margin: 0;
  font-size: 1.8rem;
}
.locator__miles {
  font-weight: 600;
}
.locator__directions {
  font-size: 1.4rem;
  font-weight: 600;
}
.locator__map {
  min-height: 36rem;
  border-radius: var(--radius-media);
  background: rgb(var(--color-fg) / 0.05);
}
.locator__online {
  margin-top: 3rem;
}
.locator__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
@media (min-width: 750px) {
  .locator__results {
    grid-template-columns: minmax(28rem, 2fr) 3fr;
  }
  .locator__map {
    min-height: 56rem;
  }
}

/* ── faq_list (section collapsible-content) ───────────────────────────── */
.block--faq_list {
  display: grid;
  gap: 2rem;
  align-items: start;
}
.faq-list__item {
  border-bottom: 0.1rem solid rgb(var(--color-fg) / 0.3);
}
.faq-list__item > summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.5rem;
}
.faq-list__item > summary::-webkit-details-marker {
  display: none;
}
.faq-list__item > summary::after {
  content: "";
  flex: none;
  width: 0.7rem;
  height: 0.7rem;
  margin: 0.5rem 0.4rem 0 0;
  border-right: 0.15rem solid currentColor;
  border-bottom: 0.15rem solid currentColor;
  transform: rotate(45deg);
}
.faq-list__item[open] > summary::after {
  transform: rotate(-135deg);
  margin-top: 0.9rem;
}
.faq-list__item .rte {
  padding-bottom: 1.5rem;
  font-size: 1.3rem;
}
@media (min-width: 750px) {
  /* The header spans every row beside the questions. It takes 99 rows, so the rows can't have a
     gap between them (99 gaps of 2rem was a screen of blank space); the questions space themselves. */
  .block--faq_list {
    grid-template-columns: 1fr 2fr;
    column-gap: 6rem;
    row-gap: 0;
  }
  .faq-list__header {
    grid-row: span 99;
  }
  .faq-list__item + .faq-list__item {
    margin-top: 2rem;
  }
}

/* ── product cards, product_grid, product_feature, collection_grid ────── */
.product-grid {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--grid-gap-y) var(--grid-gap-x);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* The collection page grid is a page-level band, so it needs the page padding back. */
.product-grid.product-grid--collection {
  padding: var(--section-space)
    max(var(--gutter), calc((100% - var(--page-width)) / 2 + var(--gutter)));
}
@media (min-width: 990px) {
  .product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .block--product_grid .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.card__link {
  display: block;
  text-decoration: none;
}
.card__image {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  padding: 1rem;
  background-color: rgb(var(--white));
  border-radius: var(--radius-media);
}
.card__title {
  font-size: 1.6rem;
  margin: 1.2rem 0 0.4rem;
}
.card__subtitle {
  font-size: 1.2rem;
  margin-bottom: 0.8rem;
}
.price {
  font-weight: 700;
}
.card .button--buy {
  min-height: 3.6rem;
  min-width: 0;
  padding: 0 1.6rem;
  font-size: 1.3rem;
  background-color: transparent;
  color: rgb(var(--color-fg));
  border-color: rgb(var(--color-fg));
}
/* featured-collection: title left, "View all" right, grid below. */
.block--product_grid {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 2rem;
}
.block--product_grid > :is(h1, h2) {
  margin: 0;
}
.block--product_grid > .product-grid {
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: 3rem;
}

.block--product_feature {
  display: grid;
  gap: 3rem;
  align-items: center;
}
.product-feature__image {
  width: 100%;
  object-fit: contain;
}
.product-feature__content h1 a,
.product-feature__content h2 a {
  text-decoration: none;
}
@media (min-width: 750px) {
  .block--product_feature {
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
  }
  .product-feature--image-right .product-feature__image {
    order: 2;
  }
}

.collection-grid {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--grid-gap-x);
}
.card--collection {
  background-color: rgb(var(--white));
  border-radius: var(--radius-media);
  padding: 2rem;
  color: rgb(var(--black));
}
.card--collection .card__title {
  margin: 0 0 1rem;
  text-align: center;
  font-size: 2rem;
}
.card--collection .card__title::after {
  content: " →";
}
.card--collection .card__image {
  padding: 0;
  aspect-ratio: 4 / 3;
}
.card__description {
  font-size: 1.2rem;
  margin-top: 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 750px) {
  .collection-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ── Collection page (main-collection-banner, scheme-4) ───────────────── */
.collection-hero {
  display: grid;
  gap: 2rem;
  align-items: center;
  padding-block: 0;
}
.collection-hero__text {
  padding-block: 4rem;
}
.collection-hero__title {
  font-family: var(--font-body);
  font-size: 1.4rem;
  letter-spacing: 0.3rem;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.collection-hero__headline {
  font-size: calc(var(--font-heading-scale) * 2.4rem);
}
@media (min-width: 750px) {
  .collection-hero__headline {
    font-size: calc(var(--font-heading-scale) * 3.2rem);
  }
}
.collection-hero__text {
  max-width: 72rem;
}

/* ── Product page (main-product; split panel from the product's colors) ─ */
.product {
  display: grid;
  gap: 3rem;
  padding-block: 0;
  background: linear-gradient(
    to right,
    var(--gallery-bg, rgb(var(--cream))) 50%,
    var(--info-bg, rgb(var(--cream))) 50%
  );
}
.product__gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  padding-block: 4rem;
  align-content: start;
}
.product__gallery img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: 1rem;
  background-color: rgb(var(--white) / 0.5);
}
.product__gallery img:first-child {
  grid-column: 1 / -1;
  background-color: transparent;
}
.product__info {
  padding-block: 4rem;
}
.product__title {
  font-size: calc(var(--font-heading-scale) * 2.4rem);
}
.product__subtitle {
  display: inline-block;
  padding: 0.2rem 0.8rem;
  border: 0.1rem solid currentColor;
  font-size: 1.1rem;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
}
.product__description {
  font-size: 1.4rem;
  margin: 1.6rem 0;
}
.product__badges {
  list-style: none;
  padding: 0;
  margin: 0 0 2.4rem;
  font-weight: 700;
  font-size: 1.3rem;
}
.product__badges li {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.3rem 0;
}
.product__badges li::before {
  content: "✓";
  display: inline-grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  border: 0.15rem solid currentColor;
  border-radius: 50%;
  font-size: 1rem;
}
/* Amazon first, then any other retailers, then the reviews link; they wrap on narrow screens. */
.product__buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem 1.6rem;
}
.button--retailer {
  background-color: transparent;
  color: rgb(var(--color-fg));
  border-color: rgb(var(--color-fg));
}
.product__reviews {
  display: inline-block;
  font-size: 1.3rem;
}
.product__details {
  border-top: 0.1rem solid rgb(var(--black) / 0.3);
  margin-top: 2.4rem;
}
.product__details + .product__details {
  margin-top: 0;
}
.product__details:last-of-type {
  border-bottom: 0.1rem solid rgb(var(--black) / 0.3);
}
.product__details > summary {
  padding: 1.5rem 0;
  font-weight: 700;
  font-size: 1.4rem;
}
.product__details .rte {
  font-size: 1.3rem;
  padding-bottom: 1.5rem;
}
@media (max-width: 749px) {
  .product {
    background: var(--info-bg, rgb(var(--cream)));
  }
  .product__gallery {
    background: var(--gallery-bg, rgb(var(--cream)));
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
  }
}
@media (min-width: 750px) {
  .product {
    grid-template-columns: 1fr 1fr;
    column-gap: 6rem;
  }
}

/* ── Misc pages ───────────────────────────────────────────────────────── */
.not-found {
  text-align: center;
}
.not-found__code {
  font-size: 1.2rem;
  letter-spacing: 0.3rem;
}

/* ── Forms (contact, wholesale signup, first responder) ────────────────── */
/* contact-form.liquid: page-width--narrow, Name | Email side by side from 750px. */
.block--form .form,
.form__message {
  display: grid;
  gap: 2rem;
  max-width: 72.6rem;
  margin-inline: auto;
}
@media (min-width: 750px) {
  .block--form .form {
    grid-template-columns: 1fr 1fr;
  }
  .block--form .form > * {
    grid-column: 1 / -1;
  }
  .block--form .form > .field--half {
    grid-column: auto;
  }
}
.form__message {
  gap: 1rem;
  margin-bottom: 3rem;
  font-size: 1.6rem;
}
.form__error-heading {
  font-size: 1.8rem;
}
.form__message ul {
  margin: 0;
  padding-left: 2rem;
}
.form__message a {
  color: inherit;
}
.field {
  display: grid;
  gap: 0.6rem;
}
.field__label {
  font-size: 1.4rem;
  letter-spacing: 0.04rem;
}
.field__input {
  width: 100%;
  min-height: 4.5rem;
  padding: 1rem 1.5rem;
  border: 0.1rem solid rgb(var(--color-fg) / 0.55);
  border-radius: 0;
  background-color: rgb(var(--white));
  color: rgb(var(--color-fg));
  font: inherit;
  font-size: 1.6rem;
}
textarea.field__input {
  min-height: 12rem;
  resize: vertical;
}
.field__input:focus-visible {
  outline: 0.2rem solid rgb(var(--color-fg) / 0.5);
  outline-offset: 0.3rem;
}
.field__input[aria-invalid="true"] {
  border-color: rgb(203 44 49);
}
.block--form .button {
  justify-self: start;
}

/* Admin preview of an unpublished draft. */
.preview-banner {
  position: sticky;
  top: 0;
  z-index: 10;
  margin: 0;
  padding: 0.8rem 1.6rem;
  background: rgb(var(--black));
  color: rgb(var(--white));
  font-size: 1.4rem;
  text-align: center;
}
.preview-banner a {
  color: inherit;
}

/* ── Blog (/blogs/news) ─────────────────────────────────────────────── */
.blog,
.article {
  padding-inline: max(var(--gutter), calc((100% - 72.6rem) / 2 + var(--gutter)));
  padding-block: var(--section-space);
}
.blog-list {
  display: grid;
  gap: 3.2rem;
  margin: 3rem 0 0;
  padding: 0;
  list-style: none;
}
.blog-card__image,
.article__image {
  width: 100%;
  height: auto;
  border-radius: 1.2rem;
}
.blog-card__title {
  margin: 1.2rem 0 0.4rem;
}
.blog-card__title a {
  color: inherit;
  text-decoration: none;
}
.blog-card__date,
.article__date {
  margin: 0;
  font-size: 1.3rem;
  color: rgb(var(--color-fg) / 0.7);
}
.article__header {
  margin-bottom: 2.4rem;
}
.article .block {
  padding-inline: 0;
}