/* Kindra Kitchen — conversion landing page
   Palette and type match the Kindra storefront refresh:
   cream / linen / terracotta / ink, set in Poppins. */

:root {
  --cream: #f6efe6;
  --linen: #efe4d4;
  --paper: #fffaf4;
  --terracotta: #c45c32;
  --terracotta-dark: #8f3a1c;
  --ink: #1c1612;
  --ink-soft: #4a3a30;
  --cocoa: #2a1a12;
  --gold: #e9b872;
  --line: rgba(28, 22, 18, 0.14);
  --line-soft: rgba(28, 22, 18, 0.08);
  --heading: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: clamp(1.15rem, 5vw, 3rem);
  --max: 70rem;
  --radius: 14px;
  --shadow: 0 18px 44px rgba(28, 22, 18, 0.1);
}

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

html {
  /* --announce-h is measured in JS so the sticky header always clears the
     announcement bar, even when its message wraps to two lines on a 320px screen. */
  --announce-h: 2.6rem;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--announce-h) + 3.6rem);
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-size: 0.98rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 5rem;
}

/* height:auto matters as well as being tidy: without it the width/height
   attributes win and any aspect-ratio we set is ignored. */
img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3 {
  font-family: var(--heading);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.18;
  margin: 0 0 0.55em;
}

h1 {
  font-size: clamp(2.1rem, 8.4vw, 3.9rem);
}

h2 {
  font-size: clamp(1.75rem, 5.6vw, 2.7rem);
}

h3 {
  font-size: 1.25rem;
}

p {
  margin: 0 0 1em;
}

a {
  color: inherit;
}

b,
strong {
  font-weight: 700;
}

.wrap {
  max-width: var(--max);
  margin: 0 auto;
}

.sr,
.skip {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip:focus {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  width: auto;
  height: auto;
  clip-path: none;
  z-index: 60;
  background: var(--ink);
  color: var(--cream);
  padding: 0.6rem 0.9rem;
  border-radius: 999px;
}

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

/* ---------- announcement bar ---------- */

.announce {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--ink);
  color: var(--cream);
  padding: 0 0.5rem 0 var(--gutter);
  min-height: 3.15rem;
  box-shadow: 0 2px 12px rgba(28, 22, 18, 0.28);
}

.announce[hidden] {
  display: none;
}

/* All messages share one grid cell so they can crossfade while the bar still
   grows to fit the tallest one instead of overflowing it. */
.announce-track {
  display: grid;
  flex: 1;
  min-height: 3.15rem;
  padding: 0.5rem 0;
}

.announce-msg {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease;
  text-align: center;
}

.announce-msg.is-on {
  opacity: 1;
  visibility: visible;
}

.announce-msg strong {
  color: var(--gold);
  font-size: 1.02rem;
  font-weight: 800;
}

.announce-clock {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: 0.88rem;
  background: var(--terracotta);
  color: #fff;
  border-radius: 999px;
  padding: 0.22rem 0.65rem;
  animation: announce-pulse 2.2s ease-in-out infinite;
}

@keyframes announce-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(196, 92, 54, 0.55);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(196, 92, 54, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .announce-clock {
    animation: none;
  }
}

.announce-close {
  background: none;
  border: 0;
  color: inherit;
  font-size: 1.5rem;
  line-height: 1;
  padding: 0.35rem 0.55rem;
  cursor: pointer;
  opacity: 0.65;
}

.announce-close:hover {
  opacity: 1;
}

/* ---------- masthead ---------- */

.masthead {
  position: sticky;
  top: var(--announce-h);
  z-index: 35;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.7rem var(--gutter);
  background: var(--terracotta);
  color: #fff;
}

.brand {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  line-height: 0;
}

.brand img {
  display: block;
  height: 32px;
  width: auto;
  aspect-ratio: 3 / 1;
  object-fit: contain;
  object-position: left center;
  filter: brightness(0) invert(1);
}

.masthead-nav {
  display: flex;
  gap: 1rem;
  margin-left: auto;
  font-size: 0.86rem;
}

.masthead-nav a {
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}

.masthead-nav a:not(.nav-products) {
  display: none;
}

.masthead-nav a:hover,
.masthead-nav a.is-current {
  border-bottom-color: currentColor;
}

.nav-products {
  font-weight: 600;
}

.masthead-cta {
  margin-left: auto;
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  white-space: nowrap;
}

.masthead-cta:hover {
  background: var(--cream);
}

/* Below ~384px the row of logo + Products + price button + cart is about 30px
   too wide, which made the whole page scroll sideways. The nav link is the least
   useful of the four here — the logo and the footer both lead back into the
   catalogue — so it is the one that steps aside. */
@media (max-width: 24rem) {
  .masthead {
    gap: 0.5rem;
  }

  .masthead .nav-products {
    display: none;
  }

  /* Hiding the nav link is enough for the short price CTAs, but the pages whose
     button spells out "Shop SealBuddy" still ran a couple of pixels over. Buying
     that back from the button's own padding keeps every page at zero sideways
     scroll without shortening anyone's label. */
  .masthead-cta {
    padding: 0.5rem 0.7rem;
  }
}

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

.hero {
  display: grid;
  background: var(--cream);
}

.hero-media {
  position: relative;
  background: var(--linen);
}

.hero-media img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* ---------- product photo carousel ---------- */

.shots {
  position: relative;
}

.shots-track {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  /* Keeps a sideways swipe inside the carousel. Without it, swiping right on the
     first photo triggers the browser's back gesture and the visitor leaves. */
  overscroll-behavior-x: contain;
  /* The dots report the position, so the scrollbar is only a grey line across the
     photograph. */
  scrollbar-width: none;
}

.shots-track::-webkit-scrollbar {
  display: none;
}

.shots-track > li {
  flex: 0 0 100%;
  scroll-snap-align: center;
}

.shots-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.55rem;
  display: flex;
  justify-content: center;
  gap: 0.1rem;
}

/* The visible dot is drawn with ::before so the button itself can stay a 24px
   target — the smallest WCAG accepts — without a row of oversized circles
   sitting on top of the photograph. */
.shots-dot {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  background: none;
  position: relative;
  cursor: pointer;
}

.shots-dot::before {
  content: "";
  position: absolute;
  inset: 0.5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 1px 3px rgba(28, 22, 18, 0.45);
  transition: inset 0.15s ease, background 0.15s ease;
}

.shots-dot.is-on::before {
  inset: 0.4rem;
  background: #fff;
}

.shots-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(28, 22, 18, 0.18);
}

.shots-prev {
  left: 0.6rem;
}

.shots-next {
  right: 0.6rem;
}

/* Hidden rather than greyed out at the two ends: a dead button on top of a photo
   is just clutter. */
.shots-btn:disabled {
  opacity: 0;
  pointer-events: none;
}

/* Swiping is the natural gesture on a touch screen, and the arrows would only
   cover part of the photo. They are for pointer devices, which have nothing to
   swipe with. */
@media (hover: none) {
  .shots-btn {
    display: none;
  }
}

.hero-flag {
  position: absolute;
  left: var(--gutter);
  bottom: 1rem;
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
}

/* Where there is a carousel, the dots run along the centre of the bottom edge and
   the flag is wide enough to reach them — on a phone because the image is narrow,
   and on a desktop because the media column is only half the page. Rather than
   guess a breakpoint where they stop colliding, the flag sits a row higher
   whenever a carousel is present. The bags and BlendGo heroes have no dots, so
   the sibling selector leaves their flag where it is. */
.shots ~ .hero-flag {
  bottom: 2.5rem;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  padding: 1.6rem var(--gutter) 2.2rem;
}

/* On a phone, five two-line bullets push the price and the button most of a
   screen further down, so below the two-column breakpoint they move underneath
   the buy card and read just as well there. Nothing focusable changes position,
   so tab order is untouched. */
.hero-copy .buy {
  order: 1;
}

.hero-copy .hero-points {
  order: 2;
  margin: 1.3rem 0 0;
}

.eyebrow {
  margin: 0 0 0.7rem;
  color: var(--terracotta-dark);
  font-size: 0.88rem;
  font-weight: 600;
}

.lede {
  color: var(--ink-soft);
  max-width: 40ch;
}

.rating-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  font-size: 0.92rem;
  text-decoration: none;
  margin-bottom: 1.2rem;
}

.stars {
  color: var(--terracotta);
  letter-spacing: 0.08em;
}

.rating-go {
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--ink-soft);
}

.buy {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.15rem;
  box-shadow: var(--shadow);
}

.price-line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem 0.7rem;
  margin: 0 0 1rem;
}

.price {
  font-family: var(--heading);
  font-style: normal;
  font-weight: 700;
  font-size: clamp(2.1rem, 7vw, 2.9rem);
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.was {
  color: var(--ink-soft);
  text-decoration: line-through;
  font-size: 1.05rem;
}

.chip {
  font-size: 0.74rem;
  font-weight: 700;
  padding: 0.24rem 0.55rem;
  border-radius: 999px;
}

.chip-save {
  background: var(--terracotta);
  color: #fff;
}

/* Sale red, deliberately outside the brand palette: terracotta reads as
   decoration, red reads as a discount. Kept to the one job so it stays loud. */
.badge-off {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  background: #d8291c;
  color: #fff;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.32rem 0.6rem;
  border-radius: 6px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(216, 41, 28, 0.35);
  animation: badge-throb 2.4s ease-in-out infinite;
}

.badge-off[hidden] {
  display: none;
}

/* A highlight sweeps across the badge, which draws the eye without shifting
   anything around it. */
.badge-off::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 20%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 80%
  );
  transform: translateX(-120%);
  animation: badge-shine 2.4s ease-in-out infinite;
}

@keyframes badge-throb {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.06);
  }
}

@keyframes badge-shine {
  0% {
    transform: translateX(-120%);
  }
  60%,
  100% {
    transform: translateX(120%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .badge-off {
    animation: none;
  }

  .badge-off::after {
    animation: none;
    opacity: 0;
  }
}

.option {
  border: 0;
  padding: 0;
  margin: 0 0 1rem;
}

.option legend {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 0.45rem;
  text-transform: none;
}

.option-row {
  display: flex;
  gap: 0.5rem;
}

.pick {
  position: relative;
  cursor: pointer;
}

/* The input stays full-size and in the accessibility tree, just transparent,
   so the whole label is a hit target and keyboard focus still works. */
.pick input,
.tier input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.pick span {
  display: block;
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.9rem;
}

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

.pick input:focus-visible + span {
  outline: 3px solid var(--terracotta);
  outline-offset: 2px;
}

/* bundle tiers */

.tiers {
  display: grid;
  gap: 0.55rem;
}

.tier {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.3rem 0.8rem;
  padding: 0.8rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  background: #fff;
}

.tier-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.tier-name {
  font-weight: 700;
}

.tier-flag {
  font-size: 0.66rem;
  font-weight: 700;
  padding: 0.14rem 0.42rem;
  border-radius: 999px;
  background: var(--linen);
  color: var(--ink-soft);
}

.tier-flag.is-pop {
  background: var(--terracotta);
  color: #fff;
}

.tier-flag.is-best {
  background: var(--ink);
  color: var(--gold);
}

.tier-inc {
  display: block;
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.tier-cost {
  text-align: right;
  line-height: 1.25;
}

.tier-cost b {
  display: block;
  font-size: 1.12rem;
  font-variant-numeric: tabular-nums;
}

.tier-cost s {
  display: block;
  font-size: 0.76rem;
  color: var(--ink-soft);
}

.tier-cost em {
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--terracotta-dark);
}

.tier:has(input:checked) {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
  background: var(--paper);
}

.tier:has(input:focus-visible) {
  outline: 3px solid var(--terracotta);
  outline-offset: 2px;
}

/* Build-your-own controls appear under the tiers once that option is chosen. */
.custom-build {
  display: grid;
  gap: 0.75rem;
  margin-top: 0.75rem;
  padding: 0.85rem 0.9rem;
  background: var(--linen);
  border-radius: 10px;
}

.custom-build[hidden] {
  display: none;
}

.custom-field {
  display: grid;
  gap: 0.3rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.custom-field-wide {
  max-width: 14rem;
}

.custom-field select,
.custom-pack-row select {
  appearance: none;
  width: 100%;
  min-height: 2.6rem;
  padding: 0.45rem 2rem 0.45rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%231c1612' d='M1 1l5 5 5-5'/%3E%3C/svg%3E")
    no-repeat right 0.7rem center;
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}

.custom-packs {
  display: grid;
  gap: 0.55rem;
}

.custom-pack-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 0.5rem;
  align-items: end;
}

.custom-pack-row .custom-field {
  margin: 0;
}

.custom-remove {
  min-height: 2.6rem;
  min-width: 2.6rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink-soft);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

.custom-remove:hover {
  color: var(--ink);
  border-color: var(--ink);
}

.custom-remove:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.custom-add {
  justify-self: start;
  border: 0;
  background: none;
  color: var(--terracotta-dark);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  padding: 0.2rem 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.custom-note {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ink-soft);
}

.custom-note.is-match {
  color: var(--terracotta-dark);
  font-weight: 600;
}

/* CTAs */

.cta {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Flex collapses whitespace between children, so a label built from text plus
     a live-price span needs the gap put back explicitly. */
  gap: 0.35em;
  min-height: 3.25rem;
  margin-top: 0.85rem;
  padding: 0.65rem 1.4rem;
  background: var(--terracotta);
  color: #fff;
  font-family: var(--body);
  font-weight: 700;
  font-size: 1.02rem;
  text-decoration: none;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  width: 100%;
  transition: background 0.18s ease, transform 0.18s ease;
}

.cta:hover {
  background: var(--terracotta-dark);
  transform: translateY(-1px);
}

.cta-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}

.cta-ghost:hover {
  background: var(--ink);
  color: var(--cream);
}

.assure {
  list-style: none;
  display: grid;
  gap: 0.3rem;
  margin: 1rem 0 0.6rem;
  padding: 0.9rem 0 0;
  border-top: 1px solid var(--line-soft);
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.assure li::before {
  content: "✓";
  color: var(--terracotta);
  font-weight: 700;
  margin-right: 0.45rem;
}

.assure-icons li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
}

.assure-icons li::before {
  content: none;
}

.assure-ico {
  flex: 0 0 auto;
  color: var(--terracotta);
  margin-top: 0.1rem;
}

.assure-row {
  grid-template-columns: 1fr;
  gap: 0.75rem;
  border-top: 0;
  padding-top: 0;
}

.deliver {
  margin: 0;
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.deliver b {
  color: var(--ink);
}

/* ---------- proof bar ---------- */

.proofbar {
  background: var(--cocoa);
  color: var(--cream);
  padding: 1rem var(--gutter);
}

.proofbar ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: var(--max);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.85rem 1rem;
}

.proofbar li {
  display: flex;
  flex-direction: column;
  font-size: 0.78rem;
  line-height: 1.3;
}

.proofbar b {
  font-family: var(--heading);
  font-style: normal;
  font-size: 1.25rem;
  color: var(--gold);
}

/* ---------- problem ---------- */

.problem {
  padding: 2.6rem var(--gutter);
}

.problem-grid {
  display: grid;
  gap: 1.6rem;
}

.problem-list {
  list-style: none;
  padding: 0;
  margin: 1.2rem 0 0;
  display: grid;
  gap: 0.5rem;
  font-size: 0.95rem;
}

.problem-list li {
  padding-left: 1.4rem;
  position: relative;
  color: var(--ink-soft);
}

.problem-list li::before {
  content: "×";
  position: absolute;
  left: 0;
  top: -0.05rem;
  color: var(--terracotta);
  font-size: 1.15rem;
  font-weight: 700;
}

.problem blockquote {
  margin: 0;
  padding: 1.4rem;
  background: var(--linen);
  border-radius: var(--radius);
}

.problem blockquote p {
  font-family: var(--heading);
  font-weight: 500;
  letter-spacing: -0.02em;
  font-size: 1.2rem;
  line-height: 1.4;
  margin: 0 0 0.7rem;
}

.problem cite {
  font-size: 0.78rem;
  font-style: normal;
  color: var(--ink-soft);
}

/* ---------- why ---------- */

.why {
  background: var(--paper);
  padding: 2.6rem var(--gutter);
}

.why-list {
  display: grid;
  gap: 1.8rem;
}

.why-list article {
  display: grid;
  gap: 0.9rem;
}

.why-list img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  border-radius: var(--radius);
}

/* Supplier shots that arrive with a caption burnt into the top band: anchor
   the crop to the bottom so the 5:4 window cuts the text off. */
.why-list img.is-crop-top {
  object-position: center bottom;
}

.why-list p {
  color: var(--ink-soft);
  margin: 0;
}

.feature-notes {
  display: grid;
  gap: 0.8rem;
  margin-top: 1.8rem;
}

.feature-notes article {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: 0.8rem;
  align-items: start;
  padding: 1rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--linen);
}

.feature-icon {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--terracotta);
  color: var(--paper);
  font-size: 1rem;
  font-weight: 700;
}

.feature-notes h3 {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
}

.feature-notes p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
}

/* ---------- reviews ---------- */

.reviews {
  padding: 2.6rem var(--gutter);
}

.reviews-top {
  display: grid;
  gap: 1.2rem;
  margin-bottom: 1.4rem;
}

.reviews-score {
  margin: 0;
  font-size: 0.95rem;
}

.bars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.3rem;
  max-width: 20rem;
}

.bars li {
  display: grid;
  grid-template-columns: 2rem 1fr 1.5rem;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.76rem;
  color: var(--ink-soft);
}

.bars i {
  display: block;
  height: 7px;
  border-radius: 999px;
  background: var(--linen);
  overflow: hidden;
  position: relative;
}

.bars i::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--fill);
  background: var(--terracotta);
}

.reviews-score-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1rem;
  margin-top: 0.35rem;
}

.jdgm-verified {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.28rem 0.55rem 0.28rem 0.35rem;
  border-radius: 999px;
  background: #f3f0ff;
  border: 1px solid #d9d1ff;
  color: #3d2f7a;
  text-decoration: none;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
}

.jdgm-verified:hover {
  background: #ebe6ff;
}

.jdgm-verified svg {
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
}

.jdgm-verified b {
  font-weight: 700;
  color: #574bd2;
}

.reviews-rail {
  display: grid;
  gap: 0.7rem;
  min-width: 0;
}

.reviews-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.55rem;
}

.reviews-btn {
  width: 2.55rem;
  height: 2.55rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-size: 1.4rem;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease, opacity 0.15s ease;
}

.reviews-btn:hover {
  background: var(--linen);
}

.reviews-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.quotes {
  list-style: none;
  padding: 0.1rem 0.05rem 0.2rem;
  margin: 0;
  display: flex;
  gap: 0.85rem;
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0;
  scrollbar-width: none;
}

.quotes::-webkit-scrollbar {
  display: none;
}

.quotes li {
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 1.1rem 1.15rem;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  min-height: 10.5rem;
  box-sizing: border-box;
}

.quotes p {
  font-family: var(--heading);
  font-weight: 500;
  letter-spacing: -0.015em;
  font-size: 1.02rem;
  line-height: 1.45;
  margin: 0 0 0.65rem;
}

.quote-stars {
  margin-bottom: 0.65rem;
  color: var(--terracotta);
  font-size: 0.92rem;
  letter-spacing: 0.08em;
  line-height: 1;
}

.quotes .quote-author {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.76rem;
  color: var(--terracotta-dark);
  font-weight: 600;
}

.reviews-swipe-hint {
  margin: 0;
  font-size: 0.74rem;
  color: var(--ink-soft);
  text-align: center;
}

@media (min-width: 40rem) {
  .feature-notes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quotes li {
    flex-basis: calc((100% - 0.85rem) / 2);
    width: calc((100% - 0.85rem) / 2);
  }

  .reviews-nav {
    justify-content: flex-end;
  }
}

/* ---------- compare ---------- */

.compare {
  background: var(--linen);
  padding: 2.6rem var(--gutter);
}

.swipe-hint {
  margin: -0.5rem 0 0.7rem;
  font-size: 0.76rem;
  color: var(--ink-soft);
}

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius);
  background: var(--paper);
  scroll-snap-type: x proximity;
}

table {
  width: 100%;
  min-width: 34rem;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.85rem;
}

th,
td {
  text-align: left;
  padding: 0.7rem 0.7rem;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
  scroll-snap-align: start;
}

thead th {
  font-family: var(--body);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
}

thead th.is-us {
  background: var(--ink);
  color: var(--cream);
  border-radius: 8px 8px 0 0;
}

/* Keep the row label on screen while the columns are swiped sideways. */
tbody th,
thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--paper);
  box-shadow: 1px 0 0 var(--line-soft);
}

tbody th {
  font-weight: 600;
  color: var(--ink-soft);
  min-width: 8.5rem;
}

td.is-us {
  background: rgba(196, 92, 50, 0.08);
}

/* ---------- steps ---------- */

.steps {
  padding: 2.6rem var(--gutter);
}

.steps ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1.5rem;
}

.steps li {
  border-top: 2px solid var(--ink);
  padding-top: 0.9rem;
}

.num {
  font-family: var(--heading);
  font-style: normal;
  font-weight: 700;
  font-size: 1rem;
  color: var(--terracotta);
  letter-spacing: 0.02em;
}

.steps h3 {
  margin: 0.35rem 0 0.4rem;
}

.steps p {
  margin: 0;
  color: var(--ink-soft);
}

/* ---------- guarantee ---------- */

.guarantee {
  background: var(--terracotta);
  color: #fff;
  padding: 2.6rem var(--gutter);
}

.guarantee-grid {
  display: grid;
  gap: 1.5rem;
}

.guarantee p {
  margin: 0;
  max-width: 46ch;
}

.ship-facts {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.55rem;
  font-size: 0.92rem;
}

.ship-facts li {
  padding-bottom: 0.55rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
}

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

.faq {
  padding: 2.6rem var(--gutter);
}

.accordion details {
  border-bottom: 1px solid var(--line);
}

.accordion summary {
  list-style: none;
  cursor: pointer;
  padding: 0.95rem 2rem 0.95rem 0;
  font-weight: 600;
  position: relative;
}

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

.accordion summary::after {
  content: "+";
  position: absolute;
  right: 0.15rem;
  top: 50%;
  translate: 0 -50%;
  font-size: 1.3rem;
  color: var(--terracotta);
  line-height: 1;
}

.accordion details[open] summary::after {
  content: "–";
}

.accordion div {
  padding: 0 0 1rem;
}

.accordion p {
  margin: 0;
  color: var(--ink-soft);
  max-width: 62ch;
}

/* ---------- final ---------- */

.final {
  background: var(--cocoa);
  color: var(--cream);
  padding: 2.8rem var(--gutter) 3rem;
}

.final p {
  color: rgba(246, 239, 230, 0.82);
  max-width: 46ch;
}

.final .price {
  color: var(--cream);
}

.final .was {
  color: rgba(246, 239, 230, 0.6);
}

.final .cta {
  max-width: 24rem;
}

.pay {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  padding: 0;
  margin: 1.2rem 0 0.7rem;
}

.pay li {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  line-height: 0;
}

.pay .pay-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  line-height: 0;
}

.pay .pay-mark img {
  display: block;
  width: 3.75rem;
  height: 2.5rem;
  object-fit: contain;
  border-radius: 3px;
}

.pay-ink {
  margin: 0.85rem 0 0.4rem;
}

.pay-secure {
  margin: 0.65rem 0 1.05rem;
}

.pay-secure-label {
  margin: 0 0 0.55rem;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}

.pay-secure .pay,
.buy .pay-secure .pay {
  margin: 0;
  padding: 0;
  border: 0;
  gap: 0.85rem;
}

.pay-lg .pay-mark img {
  width: 4.5rem;
  height: 3rem;
}

.final .pay .pay-mark img {
  width: 3.75rem;
  height: 2.5rem;
  filter: none;
}

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

.final-fine {
  font-size: 0.76rem;
  margin: 0;
}

/* ---------- collections ---------- */

.collections {
  padding: 2.5rem var(--gutter) 3rem;
}

.collections h1 {
  margin-bottom: 0.35em;
}

.collection-grid {
  display: grid;
  gap: 1.25rem;
  margin-top: 1.75rem;
}

.collection-card {
  display: grid;
  gap: 0;
  text-decoration: none;
  color: inherit;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.collection-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.collection-card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--linen);
}

.collection-card-body {
  padding: 1.15rem 1.25rem 1.35rem;
}

.collection-card-body h2 {
  font-size: 1.35rem;
  margin: 0 0 0.25rem;
}

.collection-card-body p {
  margin: 0 0 0.85rem;
  color: var(--ink-soft);
  font-size: 0.92rem;
}

.collection-go {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--terracotta-dark);
  border-bottom: 1px solid currentColor;
}

.trust-strip {
  padding: 0 var(--gutter) 3rem;
}

.trust-strip .wrap {
  padding: 1.25rem 1.35rem;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}

.tiers-compact {
  gap: 0.55rem;
}

.tiers-compact .tier {
  padding: 0.7rem 0.85rem;
}

/* Four tiers inside the hero is a lot of height on a phone, and every pixel here
   delays the button. Tightening the rows and the helper text buys back most of
   it; the rows still clear the 44px touch target, so nothing gets harder to hit.
   The tiers stay above the button deliberately — with the button first, most
   people would press it before ever scrolling far enough to see a bundle. */
@media (max-width: 48rem) {
  .buy .tiers-compact {
    gap: 0.4rem;
  }

  .buy .tiers-compact .tier {
    padding: 0.5rem 0.7rem;
    gap: 0.1rem 0.6rem;
  }

  .buy .tier-inc {
    font-size: 0.75rem;
    line-height: 1.3;
  }

  .buy .bundle-block {
    margin-bottom: 0.85rem;
  }

  .buy .bundle-note {
    margin-top: 0.5rem;
    font-size: 0.72rem;
  }
}

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

.foot {
  background: var(--ink);
  color: var(--cream);
  padding: 1.8rem var(--gutter);
  font-size: 0.84rem;
}

.foot-grid {
  display: grid;
  gap: 0.9rem;
}

.foot-brand {
  font-family: var(--heading);
  font-weight: 500;
  font-size: 1.1rem;
  margin: 0;
}

.foot-badges {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  padding: 0;
  margin: 0;
  color: rgba(246, 239, 230, 0.78);
}

.foot p {
  margin: 0;
}

.foot a {
  color: var(--gold);
}

.section-lede {
  color: var(--ink-soft);
  margin: -0.3rem 0 1.5rem;
  max-width: 46ch;
}

/* ---------- scrolling promise marquee ---------- */

.marquee {
  overflow: hidden;
  background: var(--ink);
  color: var(--cream);
  padding: 0.7rem 0;
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 34s linear infinite;
}

.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track {
  animation-play-state: paused;
}

.marquee-list {
  display: flex;
  gap: 2.4rem;
  list-style: none;
  margin: 0;
  padding: 0 1.2rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.marquee-list li::before {
  content: "✦";
  color: var(--gold);
  margin-right: 0.6rem;
}

@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

/* ---------- video demo ---------- */

.demo {
  background: var(--cocoa);
  color: var(--cream);
  padding: 2.6rem var(--gutter);
}

.demo h2 {
  color: var(--cream);
}

.demo-grid {
  display: grid;
  gap: 1.6rem;
}

.demo-lede {
  color: rgba(246, 239, 230, 0.82);
  max-width: 44ch;
}

/* The source clip is shot vertically, so the frame is 9:16 and capped in width
   rather than stretched into a widescreen box. */
.demo-player {
  position: relative;
  width: 100%;
  max-width: 19rem;
  margin: 0 auto;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

.demo-player video {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
}

.demo-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.6rem;
  border: 0;
  background: linear-gradient(180deg, rgba(28, 22, 18, 0.1), rgba(28, 22, 18, 0.5));
  color: #fff;
  font-family: var(--body);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.demo-play[hidden] {
  display: none;
}

.demo-play-icon {
  width: 3.6rem;
  height: 3.6rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--terracotta);
  transition: transform 0.18s ease;
}

.demo-play:hover .demo-play-icon {
  transform: scale(1.06);
}

.demo-play-icon svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: #fff;
  margin-left: 3px;
}

.demo-play-label {
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}

.demo-points {
  list-style: none;
  padding: 0;
  margin: 1.4rem 0 0;
  display: grid;
  gap: 0.6rem;
  font-size: 0.92rem;
}

.demo-points li {
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(246, 239, 230, 0.22);
}

.demo-points li::before {
  content: "✓";
  color: var(--gold);
  font-weight: 700;
  margin-right: 0.55rem;
}

/* ---------- photo gallery ---------- */

.gallery {
  padding: 2.6rem var(--gutter);
}

/* Swipeable on a phone, a plain grid once there is room for one. */
.gallery-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 76%;
  gap: 0.8rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding-bottom: 0.4rem;
}

.gallery-strip figure {
  margin: 0;
  scroll-snap-align: start;
}

.gallery-strip img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--linen);
}

.gallery-strip figcaption {
  padding-top: 0.5rem;
  font-size: 0.78rem;
  color: var(--ink-soft);
}

/* ---------- before / after solution band ---------- */

.fix {
  background: var(--linen);
  padding: 2.6rem var(--gutter);
}

.fix img {
  width: 100%;
  border-radius: var(--radius);
  margin-top: 0.4rem;
}

/* Price anchor. The argument is the gap between the two numbers, so the lead
   line carries them at a size you cannot skim past. It sits on a card of its
   own so it reads the same against any section background. */
.value-note {
  margin: 1.5rem 0 0;
  padding: 1.1rem 1.25rem;
  max-width: 46ch;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--terracotta);
  border-radius: var(--radius);
}

.value-note-lead {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.4;
}

.value-note p:last-child {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

/* Edge-to-edge image that carries its own headline, so it gets no chrome. */
.wide-shot img {
  width: 100%;
}

/* ---------- use-case grid ---------- */

.uses {
  padding: 2.6rem var(--gutter);
}

/* These images have their own headlines burned in, so they carry no captions
   and are never cropped to a different ratio. */
.uses-grid {
  display: grid;
  gap: 0.9rem;
}

.uses-grid img {
  width: 100%;
  border-radius: var(--radius);
  background: var(--linen);
}

@media (min-width: 48rem) {
  .uses-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
  }
}

/* ---------- hero benefit bullets ---------- */

/* Deliberately not the .assure tick list: these are reasons to want the thing,
   not reassurances about buying it, and they sit outside the buy card. */
.hero-points {
  list-style: none;
  margin: 0 0 1.2rem;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  max-width: 42ch;
}

.hero-points li {
  position: relative;
  padding-left: 1.6rem;
  font-size: 0.94rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

.hero-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 0.7rem;
  height: 0.38rem;
  border-left: 2px solid var(--terracotta);
  border-bottom: 2px solid var(--terracotta);
  transform: rotate(-45deg);
}

/* Free delivery is half the offer, so it gets its own line under the price
   rather than waiting its turn in the tick list below the button. */
.price-free {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: -0.4rem 0 1rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.price-free-ico {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  background: var(--linen);
  color: var(--terracotta-dark);
}

/* ---------- trust bar ---------- */

.trustbar {
  background: var(--cocoa);
  color: var(--cream);
  padding: 1rem var(--gutter);
}

.trustbar ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: var(--max);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.85rem 1rem;
}

.trustbar li {
  display: grid;
  grid-template-columns: 1.55rem minmax(0, 1fr);
  align-items: center;
  gap: 0.55rem;
  font-size: 0.74rem;
  line-height: 1.3;
}

.trustbar li > span:last-child {
  display: flex;
  flex-direction: column;
}

.trustbar b {
  font-family: var(--heading);
  font-size: 0.88rem;
  letter-spacing: -0.01em;
}

.trust-ico {
  display: grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  color: var(--gold);
}

.trust-ico svg {
  width: 1.15rem;
  height: 1.15rem;
}

/* The rating is the one item worth reading first, so it spans the row on the
   narrowest screens instead of being squeezed into half of it. */
@media (max-width: 24rem) {
  .trustbar li:first-child {
    grid-column: 1 / -1;
  }
}

@media (min-width: 48rem) {
  .trustbar ul {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* ---------- video captions ----------
   The demo section is cream on cocoa, so everything in here is drawn for a dark
   background rather than inheriting the light-section defaults. */

.demo .eyebrow {
  color: var(--gold);
}

.demo-steps {
  margin: 0 0 1.3rem;
  padding: 0;
  list-style: none;
  counter-reset: demo;
  display: grid;
  gap: 0.55rem;
}

.demo-steps li {
  counter-increment: demo;
  position: relative;
  padding-left: 2.1rem;
  font-size: 0.93rem;
  line-height: 1.45;
  color: rgba(246, 239, 230, 0.82);
}

.demo-steps li::before {
  content: counter(demo);
  position: absolute;
  left: 0;
  top: 0.05rem;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: rgba(246, 239, 230, 0.14);
  color: var(--gold);
  font-family: var(--heading);
  font-size: 0.78rem;
  font-weight: 700;
}

.demo .cta-ghost {
  color: var(--cream);
  border-color: rgba(246, 239, 230, 0.45);
  max-width: 22rem;
}

.demo .cta-ghost:hover {
  background: rgba(246, 239, 230, 0.14);
  color: var(--cream);
}

/* ---------- benefits ---------- */

.benefits {
  padding: 2.6rem var(--gutter);
}

.benefit-grid {
  display: grid;
  gap: 0.8rem;
  margin-top: 1.4rem;
}

.benefit {
  padding: 1.15rem;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}

.benefit-ico {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  margin-bottom: 0.75rem;
  border-radius: 50%;
  background: var(--linen);
  color: var(--terracotta-dark);
}

.benefit-ico svg {
  width: 1.3rem;
  height: 1.3rem;
}

.benefit h3 {
  font-size: 1.05rem;
  margin-bottom: 0.35rem;
}

.benefit p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

@media (min-width: 40rem) {
  .benefit-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}

@media (min-width: 62rem) {
  .benefit-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------- use-case list ---------- */

/* Two columns of short rows rather than cards: it is a scannable index of
   foods, and cards would make ten of them look like ten features. */
.use-list {
  list-style: none;
  margin: 1.3rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}

.use-list li {
  display: grid;
  gap: 0.05rem;
  padding-left: 0.9rem;
  border-left: 2px solid var(--line);
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

.use-list b {
  font-family: var(--heading);
  font-size: 0.95rem;
  color: var(--ink);
}

/* Saying plainly what the product does not do is a trust signal, so it is
   styled to be read rather than tucked away as small print. */
.use-note {
  margin: 1.5rem 0 0;
  padding: 1rem 1.15rem;
  max-width: 62ch;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--terracotta);
  border-radius: var(--radius);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

@media (min-width: 40rem) {
  .use-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.8rem 1.6rem;
  }
}

/* ---------- what's included ---------- */

.included {
  background: var(--paper);
  padding: 2.6rem var(--gutter);
}

.included-grid {
  display: grid;
  gap: 1.5rem;
  align-items: center;
}

.included-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--linen);
}

.included-list {
  list-style: none;
  margin: 0 0 1.2rem;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.included-list li {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: 0.7rem;
  align-items: baseline;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line-soft);
}

.included-list li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.included-list > li > b {
  font-family: var(--heading);
  font-size: 1.15rem;
  color: var(--terracotta-dark);
  font-variant-numeric: tabular-nums;
}

.included-list span {
  display: grid;
  gap: 0.1rem;
  font-weight: 600;
}

.included-list em {
  font-style: normal;
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.included-note {
  font-size: 0.88rem;
  color: var(--ink-soft);
}

@media (min-width: 48rem) {
  .included-grid {
    grid-template-columns: 0.9fr 1.1fr;
    gap: 2.5rem;
  }

  .included-grid img {
    aspect-ratio: 1 / 1;
  }
}

/* ---------- offer ---------- */

.offer {
  background: var(--linen);
  padding: 2.6rem var(--gutter);
}

.offer-grid {
  display: grid;
  gap: 1.5rem;
  align-items: start;
}

.offer-shot {
  width: 100%;
  max-width: 26rem;
  margin: 0 auto;
  border-radius: var(--radius);
}

.offer-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.3rem;
  box-shadow: var(--shadow);
}

.offer-card h2 {
  font-size: clamp(1.5rem, 4.6vw, 2rem);
}

/* Deliberately inline flow rather than flex: a flex gap would insert a space
   before the comma that follows the date span. */
.offer-deadline {
  margin: -0.4rem 0 1.15rem;
  font-size: 0.86rem;
  line-height: 1.8;
  color: var(--ink-soft);
}

.offer-clock {
  display: inline-block;
  margin-left: 0.35rem;
  background: var(--cocoa);
  color: var(--cream);
  font-size: 0.74rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 0.16rem 0.5rem;
  border-radius: 999px;
}

.bundle-block {
  margin-bottom: 1rem;
}

.bundle-note {
  margin: 0.7rem 0 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.offer-pick {
  margin: 0 0 0.2rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.offer-pick a {
  color: var(--terracotta-dark);
  font-weight: 600;
}

.offer-assure {
  margin-top: 1rem;
}

@media (min-width: 62rem) {
  .offer-grid {
    grid-template-columns: 0.85fr 1.15fr;
    gap: 2.5rem;
    align-items: center;
  }

  .offer-shot {
    margin: 0;
  }

  /* Three plain lines of reassurance read better stacked than in two columns,
     which is what .assure does at this width by default. */
  .offer-assure {
    grid-template-columns: 1fr;
  }
}

/* ---------- how it works ---------- */

.steps-note {
  margin: 1.4rem 0 0;
  max-width: 62ch;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

/* ---------- guarantee contact ----------
   This section is white on terracotta, so the eyebrow and the contact line have
   to be lifted off the light-section defaults. */

.guarantee .eyebrow {
  color: rgba(255, 255, 255, 0.82);
}

.guarantee .guarantee-contact {
  margin: 1rem 0 0;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.86);
}

.guarantee-contact a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- full-width brand banner ---------- */

.banner {
  background: var(--linen);
  padding: 2rem var(--gutter);
}

.banner img {
  display: block;
  width: 100%;
  max-width: 40rem;
  margin: 0 auto;
  border-radius: var(--radius);
}

/* ---------- cost-of-air cards ---------- */

.costs {
  display: grid;
  gap: 0.8rem;
  margin-top: 1.4rem;
}

.cost {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 0 0 1.1rem;
  overflow: hidden;
}

.cost img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin-bottom: 1rem;
}

.cost h3,
.cost p {
  padding: 0 1.1rem;
}

.cost h3 {
  font-size: 1.02rem;
  margin-bottom: 0.3rem;
}

.cost p {
  margin: 0;
  font-size: 0.89rem;
  color: var(--ink-soft);
}

@media (min-width: 48rem) {
  .costs {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }

  .gallery-strip {
    grid-auto-flow: row;
    /* auto-fit rather than a fixed 4, so adding a photo doesn't orphan a row. */
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    overflow-x: visible;
    gap: 1rem;
  }

  .demo-grid {
    grid-template-columns: 19rem 1fr;
    align-items: center;
    gap: 2.5rem;
  }

  .demo-player {
    margin: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Overrides the blanket reduced-motion rule, which would otherwise snap the
     track straight to its end position. */
  .marquee-track {
    animation: none !important;
  }

  .marquee {
    overflow-x: auto;
  }
}

/* ---------- sticky buy bar ---------- */

.stickybar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 45;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.85rem calc(0.5rem + env(safe-area-inset-bottom));
  background: var(--paper);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px rgba(28, 22, 18, 0.12);
  animation: rise 0.22s ease;
}

.stickybar[hidden] {
  display: none;
}

@keyframes rise {
  from {
    transform: translateY(100%);
  }
}

.stickybar img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 8px;
}

.stickybar-text p {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.3;
  color: var(--ink-soft);
}

.stickybar-price b {
  font-size: 1rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.stickybar-price s {
  font-size: 0.74rem;
  margin-left: 0.3rem;
}

.cta-sm {
  margin: 0;
  min-height: 2.75rem;
  min-width: 5.5rem;
  padding: 0.4rem 1.1rem;
  font-size: 0.92rem;
}

/* ---------- desktop ---------- */

@media (min-width: 48rem) {
  .proofbar ul {
    grid-template-columns: repeat(5, 1fr);
  }

  /* The table fits without scrolling from here up. */
  .swipe-hint {
    display: none;
  }

  tbody th,
  thead th:first-child {
    position: static;
    box-shadow: none;
    background: none;
  }

  .problem-grid,
  .guarantee-grid,
  .reviews-top {
    grid-template-columns: 1.15fr 0.85fr;
    align-items: start;
    gap: 2.5rem;
  }

  .reviews-top {
    align-items: center;
  }

  .bars {
    justify-self: end;
    width: 100%;
  }

  .steps ol {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }

  .why-list article {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 2rem;
  }

  .why-list article:nth-child(even) img {
    order: 2;
  }
}

@media (min-width: 62rem) {
  body {
    padding-bottom: 0;
  }

  .brand img {
    height: 48px;
  }

  .masthead {
    gap: 1rem;
    padding: 0.75rem var(--gutter);
  }

  .announce-msg {
    font-size: 1rem;
  }

  .announce-msg strong {
    font-size: 1.1rem;
  }

  .masthead-nav {
    display: flex;
    gap: 1.25rem;
  }

  .masthead-nav a:not(.nav-products) {
    display: inline;
  }

  .masthead-cta {
    margin-left: 0;
  }

  /* An image and two lines each, so all three fit across without crowding. */
  .collection-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .assure-row {
    grid-template-columns: repeat(3, 1fr);
  }

  .hero {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }

  /* The photo used to stretch to whatever height the buy card came to. With four
     bundle tiers in that card the column reaches about 1370px, which crops a square
     photograph to a narrow strip and upscales it to get there — the product ends up
     soft and half out of frame. It stays square instead, and sticks to the top of
     the viewport so it is still there while you read down the tiers. */
  .hero {
    align-items: start;
  }

  .hero-media {
    position: sticky;
    /* Clears the announcement bar and masthead, both of which are sticky too. */
    top: calc(var(--announce-h) + 3.6rem);
  }

  .hero-media img {
    aspect-ratio: 1 / 1;
    /* The subject sits left of centre in the source, so bias the crop left. */
    object-position: 32% 50%;
  }

  /* Keep the price, tiers and buy button above the fold on a 900px laptop. */
  .hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1.2rem clamp(1.5rem, 4vw, 3.25rem);
  }

  .buy .cta {
    margin-top: 0.6rem;
    min-height: 3rem;
  }

  .hero-copy h1 {
    font-size: clamp(2.2rem, 3vw, 2.6rem);
    margin-bottom: 0.4em;
  }

  .hero-copy .eyebrow {
    margin-bottom: 0.4rem;
  }

  .hero-copy .lede {
    max-width: 50ch;
    margin-bottom: 0.8rem;
  }

  .hero-copy .rating-link {
    margin-bottom: 0.8rem;
  }

  /* The bullets stay below the buy card here, same as on a phone. Two columns
     would leave room for them above it, but the buy card now carries four bundle
     tiers, and putting anything else ahead of it pushes Add to cart off the
     bottom of a 900px-tall laptop screen. They do fit one line each at this
     width, which is what the overrides below are for. */
  .hero-copy .hero-points {
    max-width: none;
    gap: 0.35rem;
    margin: 1.1rem 0 0;
  }

  .hero-copy .hero-points li {
    font-size: 0.9rem;
  }

  .buy {
    padding: 1.05rem;
  }

  .buy .price-line {
    margin-bottom: 0.7rem;
  }

  .buy .price {
    font-size: 2.2rem;
  }

  .buy .option legend {
    margin-bottom: 0.3rem;
  }

  .buy .option {
    margin-bottom: 0.7rem;
  }

  .tiers {
    gap: 0.45rem;
  }

  .tier {
    padding: 0.55rem 0.8rem;
  }

  .cta-ghost {
    margin-top: 0.6rem;
  }

  .assure {
    grid-template-columns: 1fr 1fr;
  }

  .stickybar {
    display: none !important;
  }
}

/* ---------- cart button + drawer ----------
   The cart lives on this domain: lines, quantities and totals all come from the
   Storefront API, and only the checkout button leaves for Shopify. */

.cart-button {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  margin-left: 0.15rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  cursor: pointer;
  flex: 0 0 auto;
}

.cart-button:hover {
  background: rgba(255, 255, 255, 0.28);
}

.cart-button svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cart-count {
  position: absolute;
  top: -0.2rem;
  right: -0.2rem;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.15rem;
  text-align: center;
}

.cart-drawer {
  position: fixed;
  inset: 0;
  z-index: 90;
}

.cart-drawer[hidden] {
  display: none;
}

.cart-scrim {
  position: absolute;
  inset: 0;
  background: rgba(28, 22, 18, 0.5);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.cart-drawer.is-open .cart-scrim {
  opacity: 1;
}

.cart-panel {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  width: min(25rem, 100%);
  height: 100%;
  background: var(--paper);
  box-shadow: -12px 0 40px rgba(28, 22, 18, 0.22);
  transform: translateX(100%);
  transition: transform 0.22s ease;
}

.cart-drawer.is-open .cart-panel {
  transform: translateX(0);
}

.cart-drawer.is-busy .cart-panel {
  /* Stops double-taps landing mid-request without hiding the current totals. */
  opacity: 0.62;
  pointer-events: none;
}

.cart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.15rem;
  border-bottom: 1px solid var(--line-soft);
}

.cart-head h2 {
  margin: 0;
  font-size: 1.05rem;
}

.cart-close {
  background: none;
  border: 0;
  font-size: 1.6rem;
  line-height: 1;
  padding: 0 0.2rem;
  color: var(--ink-soft);
  cursor: pointer;
}

.cart-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

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

.cart-line {
  display: grid;
  grid-template-columns: 3.5rem 1fr auto;
  gap: 0.8rem;
  align-items: start;
  padding: 0.95rem 1.15rem;
  border-bottom: 1px solid var(--line-soft);
}

.cart-line img,
.cart-line-blank {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 10px;
  background: var(--linen);
  object-fit: cover;
}

.cart-line-title {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.35;
}

.cart-line-variant {
  margin: 0.1rem 0 0;
  font-size: 0.8rem;
  color: var(--ink-soft);
}

.cart-line-qty {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  margin-top: 0.5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}

.cart-line-qty button {
  width: 1.75rem;
  height: 1.75rem;
  border: 0;
  background: none;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.cart-line-qty button:hover {
  background: var(--linen);
}

.cart-line-qty span {
  min-width: 1.5rem;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
}

.cart-line-side {
  text-align: right;
}

.cart-line-cost {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
}

.cart-line-remove {
  margin-top: 0.35rem;
  padding: 0;
  background: none;
  border: 0;
  color: var(--ink-soft);
  font-size: 0.76rem;
  text-decoration: underline;
  cursor: pointer;
}

.cart-line-remove:hover {
  color: var(--terracotta-dark);
}

.cart-empty {
  padding: 2.5rem 1.15rem;
  text-align: center;
}

.cart-empty p {
  margin: 0 0 0.4rem;
  font-weight: 600;
}

.cart-empty-note {
  font-weight: 400 !important;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.cart-foot {
  padding: 1.05rem 1.15rem calc(1.05rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--cream);
}

.cart-foot .cta {
  width: 100%;
  margin-top: 0.6rem;
  border: 0;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.cart-totals {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 0.95rem;
}

.cart-totals b {
  font-size: 1.15rem;
}

.cart-saved {
  margin: 0.2rem 0 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--terracotta-dark);
}

.cart-ship {
  margin: 0.15rem 0 0;
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.cart-fineprint {
  margin: 0.5rem 0 0;
  font-size: 0.74rem;
  color: var(--ink-soft);
  text-align: center;
}

.cart-error,
.buy-error {
  margin: 0.55rem 0 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: #a3271b;
}

body.cart-locked {
  overflow: hidden;
}

/* Applies while a cart request is in flight, and when a variant is sold out. */
.is-disabled {
  opacity: 0.6;
  pointer-events: none;
}

/* ---------- checkout page ----------

   Mobile-first and deliberately one column: the phone is where carts get
   abandoned, and side-by-side buttons are the usual reason. Every tap target
   here clears 44px. Reuses the drawer's .cart-line-* markup so the two
   surfaces cannot drift apart, with a few sizes bumped up for thumbs. */

.checkout-page {
  /* Clears the sticky checkout bar so the last line is never trapped under it. */
  padding-bottom: calc(4.5rem + env(safe-area-inset-bottom));
}

.checkout {
  padding: 1.4rem 0 2.5rem;
  background: var(--cream);
}

.checkout-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
}

/* Long product names must be allowed to wrap rather than push the row wide. */
.checkout-grid > *,
.checkout-main > * {
  min-width: 0;
}

.checkout-main h1 {
  margin: 0;
  font-size: clamp(1.5rem, 6vw, 2rem);
  line-height: 1.15;
}

.checkout-lede {
  margin: 0.3rem 0 1rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.checkout-lines-wrap {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.checkout-lines .cart-line {
  grid-template-columns: 4.5rem minmax(0, 1fr) auto;
  padding: 1rem 0.9rem;
}

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

.checkout-lines .cart-line img,
.checkout-lines .cart-line-blank {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 12px;
}

/* 44px minimum, which the drawer's compact 28px buttons do not meet. */
.checkout-lines .cart-line-qty button {
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1.15rem;
}

.checkout-lines .cart-line-qty span {
  min-width: 2rem;
  font-size: 0.95rem;
}

.checkout-lines .cart-line-remove {
  min-height: 2.75rem;
  padding: 0 0.15rem;
}

.checkout-lines .cart-line-was {
  display: block;
  margin: 0.1rem 0 0;
  font-size: 0.78rem;
  color: var(--ink-soft);
}

.checkout-empty {
  padding: 2.75rem 1.15rem;
  text-align: center;
}

.checkout-empty-title {
  margin: 0 0 0.35rem;
  font-size: 1.1rem;
  font-weight: 700;
}

.checkout-empty p:not(.checkout-empty-title) {
  margin: 0 0 1.1rem;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

.checkout-empty-link {
  display: inline-block;
  min-height: 2.75rem;
  padding-top: 0.85rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* Same guard as the drawer: a cart request is in flight, so stop double-taps
   landing mid-request without hiding the totals already on screen. */
.checkout-page.is-busy .checkout-grid,
.checkout-page.is-busy .checkoutbar {
  opacity: 0.62;
  pointer-events: none;
}

.checkout-is-empty .checkout-side {
  display: none;
}

.checkout-is-empty .checkout-grid {
  grid-template-columns: 1fr;
}

.checkout-card {
  padding: 1.15rem 1rem 1.25rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.checkout-card-title {
  margin: 0 0 0.8rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* Shipping is listed as an explicit Free rather than left off the list: an
   unexplained jump between subtotal and total is the top abandonment cause. */
.checkout-costs {
  margin: 0;
  display: grid;
  gap: 0.45rem;
}

.checkout-costs > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.checkout-costs dt {
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.checkout-costs dd {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.checkout-costs dd.is-free {
  color: var(--terracotta-dark);
  font-weight: 700;
}

.checkout-costs-total {
  margin-top: 0.35rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--line-soft);
}

.checkout-costs-total dt {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
}

.checkout-costs-total dd {
  font-size: 1.35rem;
  font-weight: 800;
}

.checkout-saved {
  margin: 0.5rem 0 0;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--terracotta-dark);
}

/* A date, not a speed: "3–7 working days" makes the reader do the arithmetic. */
.checkout-deliver {
  margin: 0.9rem 0 1rem;
  padding: 0.7rem 0.8rem;
  background: var(--linen);
  border-radius: 10px;
  font-size: 0.85rem;
  line-height: 1.45;
}

.checkout-card .cta {
  display: block;
  width: 100%;
  margin: 0;
  border: 0;
  font: inherit;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
}

.checkout-fine {
  margin: 0.5rem 0 0;
  font-size: 0.74rem;
  color: var(--ink-soft);
  text-align: center;
}

/* Next to the button, not in the footer — this is where the doubt happens. */
.checkout-trust {
  list-style: none;
  margin: 1.05rem 0 0;
  padding: 0.95rem 0 0;
  border-top: 1px solid var(--line-soft);
  display: grid;
  gap: 0.6rem;
}

.checkout-trust li {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  align-items: start;
  gap: 0.55rem;
  font-size: 0.84rem;
  line-height: 1.4;
  color: var(--ink-soft);
}

.checkout-trust b {
  color: var(--ink);
}

.checkout-trust-ico {
  display: inline-flex;
  color: var(--terracotta);
  margin-top: 0.05rem;
}

.checkout-pay {
  margin-top: 0.9rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line-soft);
  text-align: center;
}

.checkout-pay-note {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.checkout-pay .pay {
  margin: 0.5rem 0 0;
  justify-content: center;
  gap: 0.5rem;
}

/* Slightly smaller than elsewhere so all four marks stay on one row inside
   the narrow summary column. */
.checkout-pay .pay .pay-mark img {
  width: 3rem;
  height: 2rem;
}

/* Order bump: one offer, chosen from what is already in the cart. */
.bump {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  gap: 0.85rem;
  align-items: start;
  padding: 0.95rem;
  background: var(--paper);
  border: 1px dashed var(--terracotta);
  border-radius: var(--radius);
}

/* No offer to make: collapse so the grid gap does not leave a hole. */
#checkout-bump:empty {
  display: none;
}

.bump img {
  width: 4rem;
  height: 4rem;
  border-radius: 10px;
  object-fit: cover;
  background: var(--linen);
}

.bump-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
}

.bump-copy {
  margin: 0.2rem 0 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

.bump-price {
  margin: 0.4rem 0 0;
  font-size: 0.95rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.bump-price s {
  margin-left: 0.35rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--ink-soft);
}

/* Full width on its own row so it never sits beside another button. */
.bump-add {
  grid-column: 1 / -1;
  min-height: 2.75rem;
  margin-top: 0.85rem;
  padding: 0 1.2rem;
  background: var(--terracotta);
  border: 0;
  border-radius: 999px;
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.bump-add:hover {
  background: var(--terracotta-dark);
}

/* Sticky checkout bar: carries the total so nobody scrolls back up to check. */
.checkoutbar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 60;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.9rem calc(0.55rem + env(safe-area-inset-bottom));
  background: var(--paper);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px rgba(28, 22, 18, 0.12);
  animation: rise 0.22s ease;
}

.checkoutbar[hidden] {
  display: none;
}

.checkoutbar-text p {
  margin: 0;
}

.checkoutbar-label {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.checkoutbar-total {
  font-size: 1.15rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.checkoutbar .cta-sm {
  min-height: 2.75rem;
  min-width: 7.5rem;
}

@media (min-width: 48rem) {
  .checkout {
    padding: 2.2rem 0 3.5rem;
  }

  .checkout-grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.9fr);
    /* The summary spans both rows, so the slack has to land in the second one
       or it inflates row one and leaves a hole above the bump. */
    grid-template-rows: auto 1fr;
    gap: 2rem;
    align-items: start;
  }

  /* Line items then bump down the left, summary sticky on the right. */
  .checkout-main {
    grid-column: 1;
    grid-row: 1;
  }

  #checkout-bump {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
  }

  .checkout-side {
    grid-column: 2;
    grid-row: 1 / span 2;
    position: sticky;
    top: calc(var(--announce-h, 0px) + 5.5rem);
  }

  /* The real button is always in view on desktop, so the bar is dead weight. */
  .checkoutbar {
    display: none;
  }

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

/* ---------- legal / long-form pages ---------- */

.legal {
  padding: 2.4rem var(--gutter) 3rem;
}

/* Long-form prose wants a narrower measure than the product sections, which are
   built out of cards and grids rather than paragraphs. */
.legal-wrap {
  max-width: 44rem;
}

.legal h1 {
  margin: 0 0 0.5rem;
}

.legal h2 {
  margin: 2.2rem 0 0.7rem;
  font-size: 1.12rem;
}

.legal-updated {
  margin: 0 0 1.6rem;
  color: var(--ink-soft);
  font-size: 0.88rem;
}

.legal-lede {
  font-size: 1.03rem;
  color: var(--ink-soft);
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--line-soft);
}

.legal p,
.legal li {
  color: var(--ink-soft);
  line-height: 1.7;
}

.legal p {
  margin: 0 0 0.9rem;
}

.legal ul {
  margin: 0 0 1.1rem;
  padding-left: 1.15rem;
}

.legal li {
  margin-bottom: 0.5rem;
}

.legal b {
  color: var(--ink);
}

.legal a {
  color: var(--terracotta-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
  /* Long email addresses must not push the page sideways on a phone. */
  overflow-wrap: anywhere;
}

.legal code {
  padding: 0.1rem 0.35rem;
  border-radius: 5px;
  background: var(--linen);
  font-size: 0.88em;
}

.legal-contact {
  list-style: none;
  padding: 0;
}

.legal-fine {
  margin-top: 2.2rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line-soft);
  font-size: 0.86rem;
}

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

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