:root {
  --color-black: #000000;
  --color-white: #ffffff;
  --font-body: "Montserrat", sans-serif;
  --nav-height: 86px;
  --content-max-width: 1440px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  color: var(--color-black);
  background: var(--color-white);
  overflow-x: hidden;
}

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

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

button {
  font-family: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

/* ---------- Nav ---------- */

.nav {
  position: relative;
  width: 100%;
  height: var(--nav-height);
  background: var(--color-white);
}

.nav__inner {
  max-width: var(--content-max-width);
  height: 100%;
  margin: 0 auto;
  padding: 0 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav__logo img {
  width: 229px;
  height: 40px;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 40px;
}

.nav__link {
  margin: 0;
  padding: 0;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0;
  white-space: nowrap;
}

.nav__link--btn {
  padding: 0;
}

.nav__cart {
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  border: 1px solid var(--color-black);
  border-radius: 45px;
  padding: 8px 16px;
  min-width: 83px;
  text-align: center;
}

.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  padding: 0;
}

.nav__toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color-black);
  transition:
    transform 0.2s,
    opacity 0.2s;
}

.nav__toggle.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav__toggle.is-open span:nth-child(2) {
  opacity: 0;
}

.nav__toggle.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.nav__mobile-menu {
  display: none;
}

/* Tablet: Figma's Tool Bar (Tablet) keeps the full link row, just shorter and
   tighter (768px design — see design-context/nav.md) */
@media (max-width: 1024px) {
  .nav {
    height: 64px;
  }

  .nav__inner {
    padding: 0 21px;
  }

  .nav__logo img {
    width: 163px;
    height: 28px;
  }

  .nav__links {
    gap: 24px;
  }
}

/* Mobile: Figma's Tool Bar (Mobile) frame only includes the logo — no nav
   links/cart/menu affordance at all (a real gap in the source file, matching
   the "incomplete mobile design" pattern already flagged for the other Figma
   file in this project's CLAUDE.md). Added a standard hamburger + dropdown
   menu here since a real page needs some way to reach Research/Science/Shop/
   Vetting/Cart on mobile — not pulled from Figma, a reasonable default. */
@media (max-width: 600px) {
  .nav {
    height: 86px;
  }

  .nav__inner {
    padding: 0 24px;
  }

  .nav__logo img {
    width: 180px;
    height: auto;
  }

  .nav__links {
    display: none;
  }

  .nav__toggle {
    display: flex;
  }

  .nav__mobile-menu.is-open {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--color-white);
    padding: 24px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
    z-index: 20;
  }

  .nav__mobile-link {
    margin: 0;
    padding: 0;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    text-align: left;
  }

  .nav__mobile-menu .nav__cart {
    align-self: flex-start;
  }
}

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

/* Hero scales as one proportional unit: every px value below is expressed as
   vw (= original-px / 1440 * 100), since vw is always relative to viewport
   WIDTH — using it for vertical measurements too means the whole hero (photo,
   gradient, text, CTA) grows/shrinks together and keeps its 1440x700 aspect
   ratio at any screen width, instead of the height staying pinned at 700px
   while only the background stretched. See design-context/hero.md. */

.hero {
  position: relative;
  width: 100%;
  height: 35vw;
  overflow: hidden;
  background-image: url(../assets/hero-bg-photo.jpg);
  background-size: cover;
  background-position: left 35%;
  color: var(--color-white);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Top diagonal dark overlay — grayscale + darken the covered area */
.hero__media::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  clip-path: polygon(0 0, 100% 0, 100% 23.57%, 0 73.5%);
  backdrop-filter: grayscale(1);
}

/* Bottom diagonal dark overlay — grayscale + darken the covered area */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  clip-path: polygon(0 99.1%, 100% 49.2%, 100% 100%, 0 100%);
  backdrop-filter: grayscale(1);
}

.hero__content {
  position: relative;
  max-width: var(--content-max-width);
  height: 100%;
  margin: 0 auto;
  z-index: 2;
}

.hero__headline {
  position: absolute;
  left: min(3.8194vw, 55px); /* 55px at 1440px */
  top: min(2.4306vw, 35px); /* 35px at 1440px */
  width: min(72.2222vw, 1040px); /* 1040px at 1440px */
  margin: 0;
  font-size: clamp(
    32px,
    6.6667vw,
    96px
  ); /* 32px floor, scales with vw, 96px cap */
  font-weight: 700;
  line-height: 1;
}

.hero__headline-light {
  font-weight: 300;
}

.hero__headline-accent {
  font-weight: 800;
  color: #3b9dff;
}

.hero__subheadline {
  position: absolute;
  left: min(3.8194vw, 55px);
  top: min(10.4167vw, 150px);
  width: min(76.0417vw, 1095px);
  margin: 0;
  font-size: clamp(16px, 2.5vw, 36px);
  font-weight: 500;
  line-height: 1.3;
  text-transform: capitalize;
}

.hero__subheadline strong {
  font-weight: 700;
}

.hero__cta {
  position: absolute;
  left: min(3.8194vw, 55px);
  top: min(19.7222vw, 284px);
  width: min(28.6806vw, 413px);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero__cta-claim {
  width: 100%;
  height: min(4.2361vw, 61px);
  border-radius: min(3.125vw, 45px);
  background: #dd0604;
  color: var(--color-white);
  font-weight: 700;
  font-size: clamp(16px, 2.7778vw, 40px);
  text-transform: uppercase;
}

.hero__cta-price {
  width: min(23.1944vw, 334px);
  min-height: min(6.25vw, 90px);
  margin-top: -1px;
  padding: min(0.6944vw, 10px) 0;
  background: var(--color-black);
  border: 1px solid var(--color-white);
  border-top: none;
  border-radius: 0 0 min(3.4722vw, 50px) min(3.4722vw, 50px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hero__cta-price-main {
  font-size: clamp(14px, 2.2222vw, 32px);
  font-weight: 700;
  text-transform: uppercase;
}

.hero__cta-price-sub {
  font-size: clamp(12px, 1.3889vw, 20px);
  font-weight: 400;
}

.hero__bottom-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1.25vw; /* 18px */
  background: #dd0604;
  z-index: 2;
}

@media (min-width: 1025px) and (max-width: 2000px) {
  .hero {
    height: 48vw;
    background-position: left 22%;
  }
}

/* Tablet + Mobile: pulled exact coordinates from Figma's "Landing Hero
   (Tablet)" frame (node 241:1180, 768px design) before hitting the Figma
   MCP rate limit; Mobile has no exact source (blocked), but the user's
   reference screenshot confirms the same composition just smaller, so we
   reuse these same vw values (baseline 768) down through mobile widths too
   — vw scaling is resolution-independent, so it continues to look
   proportionally correct at 390px. See design-context/hero.md. */
@media (max-width: 1024px) {
  .hero {
    height: min(80vw, 620px);
    background-size: auto 116%;
  }

  .hero__headline {
    left: 7.1615vw;
    top: 7%;
    width: 85vw;
    font-size: clamp(32px, 6.5104vw, 50px);
  }

  .hero__subheadline {
    left: 7.1615vw;
    top: 16%;
    width: 85vw;
    font-size: clamp(14px, 3.125vw, 24px);
  }

  .hero__cta {
    left: 7.1615vw;
    top: 32%;
    width: min(42.0573vw, 323px);
  }

  .hero__cta-claim {
    height: clamp(48px, 6.25vw, 55px);
    border-radius: min(5.8594vw, 45px);
    font-size: clamp(16px, 4.1667vw, 32px);
  }

  .hero__cta-price {
    width: min(33.9844vw, 261px);
    min-height: clamp(70px, 9.1146vw, 90px);
    border-radius: 0 0 min(3.6458vw, 28px) min(3.6458vw, 28px);
  }

  .hero__cta-price-main {
    font-size: clamp(12px, 3.125vw, 24px);
  }

  .hero__cta-price-sub {
    font-size: clamp(10px, 2.0833vw, 16px);
  }
}

@media (max-width: 600px) {
  .hero__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 5% 5% 0;
  }

  .hero__headline {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    margin: 0 0 8px;
    font-size: clamp(28px, 8.7179vw, 40px);
  }

  .hero__subheadline {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    margin: 0 0 16px;
    font-size: clamp(13px, 3.8462vw, 18px);
  }

  .hero__cta {
    position: relative;
    left: auto;
    top: auto;
    width: min(45vw, 252px);
  }

  .hero__cta-claim {
    height: 40px;
    border-radius: 24px;
    font-size: clamp(14px, 4.1667vw, 20px);
  }

  .hero__cta-price {
    width: min(36vw, 204px);
    min-height: 54px;
    border-radius: 0 0 28px 28px;
  }
}

/* ---------- Stats on Cops ---------- */

.stats {
  background: #000;
  color: var(--color-white);
}

.stats__inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
}

.stats__col {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  align-items: start;
  padding: 56px 40px;
  text-align: center;
  border-left: 2px solid #888;
}

.stats__col:first-child {
  border-left: none;
}

.stats__number {
  margin: 0;
  font-size: 48px;
  font-weight: 800;
  line-height: 1;
  text-transform: capitalize;
}

.stats__label {
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}

.stats__divider {
  width: 100%;
  max-width: 280px;
  height: 2px;
  margin: 24px auto;
  background: #888;
  border: none;
}

.stats__text {
  margin: 0;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
}

/* Tablet + Mobile: reference screenshots confirm this stays a 3-column
   layout at every breakpoint — just tighter padding and smaller type. */
@media (max-width: 1024px) {
  .stats__col {
    padding: 40px 16px;
  }

  .stats__number {
    font-size: 36px;
  }

  .stats__label {
    font-size: 11px;
  }

  .stats__text {
    font-size: 14px;
    color: #888;
  }
}

@media (max-width: 600px) {
  .stats__col {
    padding: 28px 10px;
  }

  .stats__number {
    font-size: 26px;
  }

  .stats__label {
    font-size: 9px;
  }

  .stats__divider {
    margin: 16px auto;
  }

  .stats__text {
    font-size: 12px;
    line-height: 1.4;
    color: #888;
  }
}

/* ---------- Products ---------- */

.products {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 96px 56px 64px;
  text-align: center;
}

.products__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-bottom: 64px;
}

.products__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 36px;
}

.products__card:first-child {
  padding-left: 0;
}

.products__card:last-child {
  padding-right: 0;
}

.products__card {
  position: relative;
}

.products__card + .products__card {
  border-left: none;
}

.products__card + .products__card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 450px;
  background: #888;
}

.products__image-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 32px;
}

.products__image {
  width: min(15.2083vw, 219px);
  height: auto;
}

.products__name {
  display: none;
}

.products__headline {
  margin: 0 0 16px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
}

.products__stat {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

.products__stat--mobile {
  display: none;
}

.products__desc {
  margin: 4px 0 24px;
  font-size: 18px;
  font-weight: 400;
}

.products__cta {
  margin-top: auto;
  background: var(--color-black);
  color: var(--color-white);
  border-radius: 50px;
  padding: 10px 24px;
  font-size: 15px;
  font-weight: 900;
  text-transform: uppercase;
}

.products__explore {
  display: inline-block;
  margin: 0 auto 48px;
  background: var(--color-black);
  color: var(--color-white);
  border-radius: 50px;
  padding: 24px 48px;
  font-size: 24px;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.2;
}

.products__tagline {
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Tablet: reference screenshot shows a 2x2 grid, but re-ORDERED —
   Peace/Freedom on row 1, REM/Liberty on row 2 (HTML order is
   Peace/REM/Freedom/Liberty) — so swap REM and Freedom visually via
   `order` rather than changing the DOM. */
@media (max-width: 1024px) {
  .products__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 48px 32px;
  }

  .products__card {
    padding: 0;
  }

  .products__image {
    width: min(28vw, 219px);
  }

  .products__name {
    display: block;
    margin: 0 0 16px;
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    text-transform: uppercase;
    color: #000;
    order: 2;
  }

  .products__headline {
    display: none;
  }

  .products__image-wrap {
    order: 1;
  }

  .products__cta {
    order: 3;
    margin-top: 0;
    margin-bottom: 16px;
  }

  .products__stat {
    display: none;
  }

  .products__stat--mobile {
    display: block;
    order: 4;
    margin: 0;
    font-size: 16px;
    font-weight: 700;
  }

  .products__desc {
    order: 5;
  }

  .products__card + .products__card {
    border-left: none;
  }

  .products__card + .products__card::before {
    display: none;
  }

  .products__card:nth-child(1) {
    order: 1; /* Peace */
  }

  .products__card:nth-child(2) {
    order: 3; /* REM -> after Freedom */
  }

  .products__card:nth-child(3) {
    order: 2; /* Freedom -> before REM */
  }

  .products__card:nth-child(4) {
    order: 4; /* Liberty stays last */
  }
}

/* Mobile: reference screenshot shows a single column back in the original
   HTML order (Peace, REM, Freedom, Liberty) — reset the tablet re-order. */
@media (max-width: 600px) {
  .products__grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .products__card:nth-child(1),
  .products__card:nth-child(2),
  .products__card:nth-child(3),
  .products__card:nth-child(4) {
    order: initial;
  }

  .products__image {
    width: min(45vw, 219px);
  }

  .products__explore {
    padding: 20px 24px;
    font-size: 20px;
  }

  .products__tagline {
    font-size: 12px;
  }
}

/* ---------- Science ---------- */

.science {
  background: #f7f7f7;
}

.science__inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 80px 56px;
  text-align: center;
}

.science__eyebrow {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
}

.science__headline {
  margin: 0 0 32px;
  font-size: 64px;
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
}

.science__headline-heavy {
  font-weight: 900;
}

.science__headline-normal {
  font-weight: 700;
}

.science__copy {
  max-width: 1100px;
  margin: 0 auto;
  font-size: 18px;
  line-height: 1.6;
}

.science__copy p {
  margin: 0 0 20px;
}

.science__panels {
  max-width: 1220px;
  margin: 64px auto 0;
  display: grid;
  grid-template-columns: 1fr 1.8fr;
  gap: 40px;
  text-align: left;
  align-items: center;
  justify-items: center;
}

.science__aplus h3 {
  margin: 0 0 16px;
  font-size: 32px;
  font-weight: 600;
}

.science__aplus p {
  margin: 0;
  font-size: 18px;
  line-height: 1.5;
  color: #4d4d4d;
}

/* Diagram card — fixed to Figma's source size (739x468) for pixel-accurate
   leader-line callouts; see design-context/science.md for the coordinate map. */

.science__diagram-scale {
  width: 739px;
  height: 468px;
}

.science__diagram-card {
  position: relative;
  width: 739px;
  height: 468px;
  background: var(--color-white);
  overflow: hidden;
  transform-origin: top left;
}

.science__diagram-img {
  position: absolute;
  left: 50%;
  top: -21px;
  width: 790px;
  height: 484px;
  transform: translateX(-50%);
  object-fit: cover;
}

.science__callout {
  position: absolute;
  width: 149px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.science__callout-title {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  color: #101010;
}

.science__callout-text {
  margin: 0;
  font-size: 10px;
  color: #4d4d4d;
  line-height: 1.3;
}

.science__callout-line {
  position: absolute;
  display: block;
}

.science__callout--vtt {
  left: 32px;
  top: 27px;
  align-items: flex-start;
}
.science__callout--vtt .science__callout-line {
  left: 33px;
  top: 7px;
  width: 270px;
  height: 17px;
}

.science__callout--outer-layer {
  left: 558.5px;
  top: 27px;
  align-items: flex-end;
  text-align: right;
}
.science__callout--outer-layer .science__callout-line {
  left: -119.5px;
  top: 7px;
  width: 168px;
  height: 19px;
  transform: rotate(180deg) scaleY(-1);
}

.science__callout--skin {
  left: 32px;
  top: 105px;
  width: 177px;
  align-items: flex-start;
}
.science__callout--skin .science__callout-line {
  left: 40px;
  top: 7px;
  width: 170px;
  height: 64px;
}

.science__callout--adhesive {
  left: 499px;
  top: 105px;
  width: 209px;
  align-items: flex-end;
  text-align: right;
}
.science__callout--adhesive .science__callout-line {
  left: -39px;
  top: -6px;
  width: 170px;
  height: 13px;
  transform: rotate(180deg);
}

.science__callout--receptors {
  left: 32px;
  top: 310px;
  width: 161px;
  align-items: flex-start;
}
.science__callout--receptors .science__callout-line {
  left: 123px;
  top: -50px;
  width: 113px;
  height: 57px;
  transform: scaleY(-1);
}

.science__callout--electrical {
  left: 558.5px;
  top: 310px;
  width: 149.5px;
  align-items: flex-end;
  text-align: right;
}
.science__callout--electrical .science__callout-line {
  left: -79.5px;
  top: 7px;
  width: 88px;
  height: 59px;
  transform: rotate(180deg) scaleY(-1);
}

/* Tablet + Mobile: reference screenshots show the diagram card and the
   "A messenger" text panel SWAP sides (diagram first/left, text second/
   right on tablet; diagram on top, text below on mobile — DOM order is
   text-then-diagram, so both breakpoints reorder via `order`), and the
   diagram card itself is scaled down. Rather than recompute every callout's
   px position at a smaller size, we scale the whole (unchanged) 739x468
   diagram card down with `transform: scale()`, sized via a wrapper
   (`.science__diagram-scale`) fixed to the scaled target dimensions so nothing
   overflows/collides. See design-context/science.md. */
@media (max-width: 1024px) {
  .science__inner {
    padding: 64px 32px;
  }

  .science__headline {
    font-size: 40px;
  }

  .science__panels {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  .science__aplus {
    order: 2;
  }

  .science__diagram {
    order: 1;
  }

  .science__diagram-scale {
    width: 450px;
    height: 285.05px; /* 468 * 450/739 */
  }

  .science__diagram-card {
    transform: scale(0.6089); /* 450/739 */
  }
}

@media (max-width: 768px) {
  .science__panels {
    grid-template-columns: 1fr;
    margin-top: 40px;
  }

  .science__aplus,
  .science__diagram {
    width: 100%;
  }

  .science__diagram-scale {
    width: 342px;
    height: 216.6px; /* 468 * 342/739 */
    margin: 0 auto;
  }

  .science__diagram-card {
    transform: scale(0.4628); /* 342/739 */
  }
}

@media (max-width: 600px) {
  .science__inner {
    padding: 48px 24px;
  }

  .science__eyebrow {
    font-size: 14px;
  }

  .science__headline {
    font-size: 28px;
    margin-bottom: 20px;
  }

  .science__copy {
    font-size: 15px;
  }

  .science__diagram-scale {
    margin: 0 auto;
  }
}

/* ---------- 30% Off Ad banner ---------- */

.ad-banner {
  position: relative;
  height: 181px;
  background-image: url("../assets/ad-bg-photo.jpg");
  background-size: cover;
  background-position: center;
}

.ad-banner__inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 0 60px;
}

.ad-banner__cta {
  flex-shrink: 0;
  background: #dd0604;
  color: var(--color-white);
  border-radius: 45px;
  padding: 20px 40px;
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
}

.ad-banner__headline {
  margin: 0;
  max-width: 510px;
  color: var(--color-white);
  font-size: 32px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.2;
}

/* Tablet + Mobile: reference screenshots show this switch from a side-by-side
   (button-left/headline-right) layout to a stacked one — headline on top,
   button below, both left-aligned over the photo (which now bleeds off to
   the right instead of being darkened on the right). DOM order is button
   first/headline second, so both are reordered with `order`. */
@media (max-width: 1024px) {
  .ad-banner {
    height: auto;
    min-height: 252px;
    background-image:
      linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.15) 70%),
      url(../assets/ad-bg-photo.jpg);
    background-size: 170%;
    background-position: left;
  }

  .ad-banner__inner {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 20px;
    padding: 40px 32px;
  }

  .ad-banner__headline {
    order: 1;
    max-width: 380px;
    font-size: 26px;
  }

  .ad-banner__cta {
    order: 2;
    padding: 16px 32px;
    font-size: 18px;
  }
}

@media (max-width: 600px) {
  .ad-banner {
    min-height: 194px;
    background-image:
      linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.75) 0%,
        rgba(0, 0, 0, 0.15) 55%,
        rgba(0, 0, 0, 0.75) 100%
      ),
      url("../assets/ad-bg-photo.jpg");
  }

  .ad-banner__inner {
    padding: 32px 24px;
  }

  .ad-banner__headline {
    max-width: 100%;
    font-size: 24px;
  }

  .ad-banner__cta {
    font-size: 16px;
    padding: 14px 28px;
  }
}

/* ---------- Placement ---------- */

.placement {
  background: #f7f7f7;
  padding: 80px 56px;
}

.placement__headline {
  margin: 0 0 56px;
  text-align: center;
  font-size: 64px;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.1;
}

.placement__headline-medium {
  font-weight: 800;
}
.placement__headline-heavy {
  font-weight: 900;
}

.placement__body {
  max-width: var(--content-max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.6fr 2fr;
  gap: 40px;
  align-items: start;
}

.placement__intro h3 {
  margin: 0 0 16px;
  font-size: 29px;
  font-weight: 600;
}

.placement__intro p {
  margin: 0;
  font-size: 18px;
  line-height: 1.4;
  color: #4d4d4d;
}

.placement__cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.placement__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.placement__card img {
  width: 100%;
  height: 379px;
  object-fit: cover;
  border-radius: 8px;
  background: var(--color-white);
  margin-bottom: 11px;
}

.placement__card h4 {
  margin: 0 0 2px;
  font-size: 18px;
  font-weight: 700;
}

.placement__card p {
  margin: 0;
  font-size: 13px;
  color: #4d4d4d;
  line-height: 1.5;
}

/* Tablet + Mobile: reference screenshots show the 4-across photo row become
   a 2x2 grid (square-ish photos instead of tall portrait ones) at both
   breakpoints, with the intro text stacked above the grid on mobile instead
   of beside it. */
@media (max-width: 1024px) {
  .placement {
    padding: 56px 32px;
  }

  .placement__headline {
    font-size: 36px;
    margin-bottom: 32px;
  }

  .placement__body {
    grid-template-columns: 1fr 2fr;
    gap: 24px;
  }

  .placement__intro h3 {
    font-size: 22px;
  }

  .placement__intro p {
    font-size: 15px;
  }

  .placement__cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .placement__card img {
    height: auto;
    aspect-ratio: 1 / 1;
  }
}

@media (max-width: 600px) {
  .placement {
    padding: 40px 24px;
  }

  .placement__headline {
    display: none;
  }

  .placement__body {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .placement__cards {
    gap: 10px;
  }
}

/* ---------- Protect the World ---------- */

.protect {
  max-width: var(--content-max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 40px 0;
  overflow: hidden;
}

.protect__photo {
  width: 27%;
  max-width: 380px;
  height: auto;
  flex-shrink: 0;
}

.protect__photo--left {
  margin-left: -80px;
}

.protect__photo--right {
  margin-right: -80px;
}

.protect__content {
  flex: 1;
  text-align: center;
  padding: 0 24px;
}

.protect__headline {
  margin: 0 0 16px;
  font-size: 40px;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.3;
}

.protect__subtext {
  margin: 0 0 24px;
  font-size: 20px;
}

.protect__arrow {
  display: block;
  margin: 56px auto 0;
}

/* Tablet: same photo-left/content/photo-right row as Desktop, just smaller
   type and photos bleeding closer to the viewport edge (reference
   screenshot shows the photos going fully edge-to-edge). */
@media (max-width: 1024px) {
  .protect__photo {
    width: 30%;
  }

  .protect__photo--left {
    margin-left: -40px;
  }

  .protect__photo--right {
    margin-right: -40px;
  }

  .protect__headline {
    font-size: 26px;
    line-height: 1.2;
  }

  .protect__subtext {
    font-size: 16px;
  }
}

/* Mobile: reference screenshot restructures this to headline+subtext on
   top, both photos side by side below, THEN the arrow below the photos —
   a different order than Desktop/Tablet's "headline, subtext, arrow" stack
   nested inside one content column. Since the arrow is nested two levels
   deep inside `.protect__content`, `display: contents` on that wrapper
   "dissolves" its own box so its children (headline/subtext/arrow) become
   direct grid items alongside the two photos — letting every piece be
   placed independently via `grid-template-areas`. */
@media (max-width: 600px) {
  .protect {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "headline headline"
      "subtext subtext"
      "photoleft photoright"
      "arrow arrow";
    gap: 16px;
    padding: 40px 0;
    overflow: visible;
  }

  .protect__content {
    display: contents;
  }

  .protect__headline {
    grid-area: headline;
    margin: 0;
    font-size: 24px;
    padding: 0 24px;
  }

  .protect__subtext {
    grid-area: subtext;
    margin: 0;
    font-size: 16px;
    padding: 0 24px;
  }

  .protect__photo {
    width: 100%;
    max-width: none;
  }

  .protect__photo--left {
    grid-area: photoleft;
    margin-left: 0;
    justify-self: end;
  }

  .protect__photo--right {
    grid-area: photoright;
    margin-right: 0;
    justify-self: start;
  }

  .protect__arrow {
    grid-area: arrow;
    width: 56px;
    height: auto;
  }
}

/* ---------- Research ---------- */

.research {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 96px 56px;
  text-align: center;
}

.research__eyebrow {
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
}

.research__headline {
  margin: 0 0 24px;
  font-size: 64px;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.1;
}

.research__headline-light {
  font-weight: 900;
}

.research__headline-bold {
  font-weight: 700;
}

.research__intro {
  max-width: 909px;
  margin: 0 auto 64px;
  font-size: 18px;
  line-height: 1.4;
}

.research__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: left;
}

.research__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.research__card {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  background: #f7f7f7;
  border: 0.5px solid #888;
  border-radius: 15px;
  padding: 32px 24px 20px;
}

.research__product-header {
  margin: 0 0 30px;
}

.research__product-name {
  margin: 0;
  font-size: 26px;
  font-weight: 900;
  line-height: 18px;
  text-transform: uppercase;
}

.research__product-patch {
  margin: 4px 0 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 18px;
  text-transform: uppercase;
}

@media (min-width: 1025px) and (max-width: 1366px) {
  .research__product-name {
    line-height: 1;
  }
}

@media (max-width: 1024px) {
  .research__product-header {
    display: none;
  }
}

.research__journal {
  margin: 0 0 10px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  color: #dd0604;
}

.research__title {
  margin: 0 0 16px;
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.3;
}

.research__stat {
  margin: 0;
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
}

.research__caption {
  margin: 4px 0 16px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  color: #4d4d4d;
}

.research__list {
  margin: 0 0 20px;
  padding-left: 18px;
  flex-grow: 1;
}

.research__list li {
  font-size: 11px;
  color: #4d4d4d;
  line-height: 1.4;
  margin-bottom: 8px;
}

.research__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 16px;
}

.research__readmore {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--color-black);
  border-radius: 50px;
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 500;
}

.research__readmore img {
  width: 14px;
  height: auto;
}

.research__filesize {
  font-size: 11px;
}

.research__cart {
  align-self: center;
  background: var(--color-black);
  color: var(--color-white);
  border-radius: 50px;
  padding: 10px 24px;
  font-size: 15px;
  font-weight: 900;
  text-transform: uppercase;
}

/* Tablet + Mobile: reference screenshots show the 4-column grid become a
   horizontal-scroll carousel (matches the "Research (Slideshow)" name from
   the Figma section map) — fixed-width cards, scroll-snap for a clean swipe
   feel, next card peeking at the edge. */
@media (max-width: 1024px) {
  .research {
    padding: 64px 0 64px 32px;
    text-align: left;
  }

  .research__eyebrow,
  .research__headline,
  .research__intro {
    text-align: center;
    padding-right: 32px;
  }

  .research__headline {
    font-size: 36px;
  }

  .research__grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 270px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 50px;
    padding-right: 32px;
  }

  .research__col {
    scroll-snap-align: start;
  }
}

@media (max-width: 600px) {
  .research {
    padding: 48px 0 48px 24px;
  }

  .research__eyebrow,
  .research__headline,
  .research__intro {
    padding-right: 24px;
  }

  .research__headline {
    font-size: 26px;
  }

  .research__grid {
    grid-auto-columns: 260px;
    gap: 16px;
    padding-right: 24px;
  }
}

/* ---------- Vetting ---------- */

.vetting {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 96px 56px;
  text-align: center;
}

.vetting__headline {
  margin: 0 0 24px;
  font-size: 64px;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.1;
}

.vetting__intro {
  max-width: 1011px;
  margin: 0 auto 64px;
  font-size: 20px;
  line-height: 1.4;
}

.vetting__row {
  display: grid;
  justify-content: center;
  gap: 100px;
  margin: 0 auto 40px;
}

.vetting__row--three {
  grid-template-columns: repeat(3, 269px);
}

.vetting__row--two {
  grid-template-columns: repeat(2, 269px);
}

.vetting__card {
  text-align: left;
}

.vetting__card img {
  width: 100%;
  aspect-ratio: 269 / 336;
  height: auto;
  object-fit: cover;
  margin-bottom: 24px;
}

.vetting__card h3 {
  margin: 0 0 8px;
  font-size: 48px;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1;
}

.vetting__card h3 span {
  display: block;
  font-size: 32px;
  font-weight: 700;
}

.vetting__card p {
  margin: 0;
  font-size: 24px;
  font-weight: 500;
}

/* Tablet + Mobile: reference screenshots show all 5 people become ONE
   horizontal-scroll row (not Desktop's 3-then-2 grid). The two `.vetting__row`
   groups stay in the HTML (so Desktop's grid markup is untouched), but at
   these breakpoints each row is set to `display: contents` — dissolving its
   own box so its cards become direct flex children of the new
   `.vetting__carousel` scroll container, merging both rows into one strip. */
@media (max-width: 1024px) {
  .vetting {
    padding: 64px 32px;
  }

  .vetting__headline {
    font-size: 36px;
  }

  .vetting__intro {
    font-size: 16px;
  }

  .vetting__carousel {
    display: flex;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 50px;
  }

  .vetting__row {
    display: contents;
  }

  .vetting__card {
    flex: 0 0 230px;
    scroll-snap-align: start;
  }

  .vetting__card h3,
  .vetting__card p {
    padding: 0 12px;
  }

  .vetting__card h3 {
    font-size: 32px;
  }

  .vetting__card h3 span {
    font-size: 22px;
  }

  .vetting__card p {
    font-size: 15px;
  }
}

@media (max-width: 600px) {
  .vetting {
    padding: 48px 24px;
  }

  .vetting__headline {
    font-size: 22px;
  }

  .vetting__headline br {
    display: none;
  }

  .vetting__card {
    flex-basis: 170px;
  }

  .vetting__card h3 {
    font-size: 24px;
  }

  .vetting__card h3 span {
    font-size: 17px;
  }

  .vetting__card p {
    font-size: 13px;
  }
}

/* ---------- More Ways to Perform ---------- */

.perform {
  background: #f7f7f7;
  padding: 96px 56px;
}

.perform__headline {
  margin: 0 0 64px;
  text-align: center;
  font-size: 48px;
  font-weight: 900;
  text-transform: uppercase;
}

.perform__grid {
  max-width: var(--content-max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
}

.perform__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.perform__card img {
  width: 100%;
  max-width: 173px;
  height: auto;
  margin-bottom: 16px;
}

.perform__card h3 {
  margin: 0 0 16px;
  font-size: 24px;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.2;
}

.perform__cta {
  margin-bottom: 16px;
  border: 1px solid var(--color-black);
  border-radius: 50px;
  padding: 10px 24px;
  font-size: 15px;
  font-weight: 900;
  text-transform: uppercase;
}

.perform__card p {
  margin: 0;
  font-size: 16px;
  color: var(--color-black);
  line-height: 1.4;
}

.perform__next {
  display: none;
}


/* Tablet + Mobile: reference screenshots show the 6-column grid become a
   horizontal-scroll carousel with a visible "next" arrow control (Tablet
   screenshot shows the arrow; kept it for Mobile too for a consistent,
   usable affordance since touch swipe alone isn't always discoverable). */
@media (max-width: 1024px) {
  .perform {
    padding: 64px 0 64px 32px;
  }

  .perform__headline {
    font-size: 36px;
    padding-right: 32px;
  }

  .perform__grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 170px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 50px;
    padding-right: 32px;
  }

  .perform__card {
    scroll-snap-align: start;
  }

  .perform__next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 16px 32px 0 auto;
  }
}

@media (max-width: 600px) {
  .perform {
    padding: 48px 0 48px 24px;
  }

  .perform__headline {
    font-size: 26px;
    padding-right: 24px;
  }

  .perform__grid {
    grid-auto-columns: 190px;
    gap: 16px;
    padding-right: 24px;
  }

  .perform__next {
    margin-right: 24px;
  }
}

/* ---------- Footer ---------- */
/* Ported from the live mindpump.superpatch.com footer (.footer / .footer__* classes and
   values below match that site's stylesheet 1:1 — see design-context/footer.md) */

.footer {
  width: 100%;
  background: #101010;
  color: var(--color-white);
}

.footer__inner {
  margin: 0 auto;
  padding: 65px 50px 40px;
}

.footer__top {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 132px;
  align-items: start;
  padding-bottom: 40px;
}

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.footer__logo {
  height: 50px;
  width: auto;
  filter: invert(1);
}

.footer__social {
  display: flex;
  gap: 24px;
  align-items: center;
}

.footer__social-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  opacity: 0.8;
}

.footer__divider {
  width: 100%;
  height: 1px;
  background: #606060;
  margin: 0 0 24px;
}

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 16px;
}

.footer__copyright {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
}

.footer__legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.footer__legal-link {
  font-size: 14px;
  font-weight: 500;
  color: #fff;
}

.footer__disclaimer {
  margin: 0;
  font-size: 10px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.5;
}

@media (max-width: 1023px) {
  .footer__top {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .footer__inner {
    padding: 40px 24px 32px;
  }
  .footer__brand {
    align-items: center;
  }
  .footer__social {
    justify-content: center;
  }
  .footer__bottom {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .footer__copyright {
    text-align: center;
  }
  .footer__legal-links {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
}

/* ---------- Sliding Cart ---------- */
/* Ported from the live mindpump.superpatch.com sliding cart drawer (.cart /
   .cart-* classes and values below match that site's stylesheet closely —
   see design-context/cart.md). Populated with all 10 of this page's own
   products rather than mindpump's specific 6-item campaign lineup. */

body.cart-open {
  overflow: hidden;
}

.cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(5px);
  z-index: 101;
  display: none;
  opacity: 0;
  transition: opacity 0.3s;
}

.cart-overlay.is-visible {
  display: block;
  opacity: 1;
}

.cart {
  position: fixed;
  top: 0;
  bottom: 0;
  right: -586px;
  max-width: 586px;
  width: 100%;
  background: var(--color-white);
  z-index: 102;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  transition: right 0.4s ease;
  font-family: var(--font-body);
}

.cart.is-visible {
  right: 0;
}

.cart__header {
  position: relative;
  padding: 24px 24px 10px;
  border-bottom: 1px solid #101010;
  flex-shrink: 0;
}

.cart__header h5 {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  text-transform: uppercase;
  color: #101010;
}

.cart__header p {
  margin: 10px 0 0;
  color: #4d4d4d;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
}

.cart__close {
  position: absolute;
  right: 24px;
  top: 24px;
  color: #101010;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
}

.cart__content {
  flex: 1;
  overflow-y: auto;
  padding: 0 24px 24px;
}

.cart__products {
  margin-bottom: 24px;
}

.cart-product {
  display: flex;
  gap: 14px;
  margin-top: 24px;
  font-size: 15px;
}

.cart-product__img {
  width: 96px;
  height: 90px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-product__img img {
  max-height: 100%;
  width: auto;
}

.cart-product__details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cart-product__details-row {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
}

.cart-strikethrough {
  text-decoration: line-through;
  color: #878787;
}

.cart-grey {
  color: #878787;
}

.cart-product__counter {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 4px;
  padding: 0 6px;
  height: 28px;
  border: 1px solid #101010;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 700;
}

.cart-product__counter button {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  color: #101010;
}

.cart-product__counter input {
  width: 30px;
  text-align: center;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
}

.cart-product__counter input::-webkit-outer-spin-button,
.cart-product__counter input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
}

.cart-product__counter input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.cart__sum {
  padding: 20px 0 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid #e8e2d4;
  border-bottom: 1px solid #e8e2d4;
}

.cart__sum-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: #4d4d4d;
}

.cart__footer {
  background: #f7f7f7;
  border-top: 1px solid #e8e2d4;
  padding: 20px 24px 24px;
  flex-shrink: 0;
}

.cart__footer-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  margin-bottom: 10px;
}

.cart__footer-total strong {
  font-size: 20px;
  font-weight: 800;
}

.cart__checkout {
  width: 100%;
  padding: 14px;
  background: #101010;
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  border-radius: 4px;
  transition: background 0.2s;
}

.cart__checkout:hover {
  background: #333;
}

.cart__footer p {
  text-align: center;
  color: #878787;
  font-size: 12px;
  margin: 8px 0 0;
}

@media (max-width: 600px) {
  .cart {
    max-width: 100%;
    right: -100%;
  }
}