/* ============================================================
   PuraUse — Header & navigation
   ============================================================ */

.header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: transparent;
}
/* The blur lives on a pseudo-element, not on .header itself. A
   backdrop-filter makes an element the containing block for any
   position:fixed descendant — which pinned the mobile menu to the header's
   own 75px box instead of the viewport, so it opened as a stub. */
.header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(251, 250, 247, .88);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-base) var(--e-out);
}
.header.is-stuck::before { border-bottom-color: var(--line); }

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: var(--header-h);
}

/* The registered mark rides on the wordmark in the header, matching the
   pack artwork. .logo is a flex row, so the glyph would otherwise sit on the
   centre line; it is nudged up to the x-height instead of using <sup>, which
   would also inflate the line box. */
.logo__tm {
  font-size: 0.34em;
  align-self: center;
  position: relative;
  top: -0.62em;
  margin-left: 0.07em;
  letter-spacing: 0;
}

.logo {
  font-family: var(--font-display);
  font-size: 1.875rem;
  line-height: 1;
  letter-spacing: -0.012em;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-right: 0.25rem;
}

.nav { display: flex; align-items: center; gap: clamp(1.125rem, 2.4vw, 2.25rem); }
.nav__link {
  position: relative;
  font-size: var(--fs-sm);
  color: var(--ink-70);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  transition: color var(--t-base) var(--e-out);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 16px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-base) var(--e-out);
}
.nav__link:hover { color: var(--ink); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--ink); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

/* The brand name in running text: one word, lowercase, italic —
   set in the logo's serif so it reads as the mark, not as emphasis. */
.brand {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  text-transform: lowercase;
  letter-spacing: -0.005em;
  font-size: 1.08em;
}
h1 .brand, h2 .brand, h3 .brand,
.statement__q .brand, .statement__sig .brand,
.hero__word .brand { font-size: 1em; font-weight: 400; }

/* In all-caps micro-type — buttons, eyebrows, tabs, column headings — the
   italic serif fights the tracking and reads as a mistake. There the name
   simply follows its label. */
.btn .brand, .eyebrow .brand, .tab .brand,
.footer__colh .brand, .swatch__name .brand, .step__n .brand, .quiz__time .brand {
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}
/* Tracking is added after every character, including the last one inside
   the span — which leaves punctuation floating ("PURAUSE ?"). Pull it back. */
.btn .brand { margin-right: -0.09em; }
.eyebrow .brand { margin-right: -0.16em; }
.footer__colh .brand { margin-right: -0.14em; }

.header__right { display: flex; align-items: center; gap: 0.5rem; }
.header__cta { display: inline-flex; }
/* The nav carries its own CTA for the mobile menu only — on desktop the
   header CTA is the single call to action. */
.nav > .btn { display: none; }

.nav-toggle {
  display: none;
  width: 48px; height: 48px;
  align-items: center;
  justify-content: center;
  margin-right: -0.625rem;
}
.nav-toggle__bars { position: relative; width: 22px; height: 12px; }
.nav-toggle__bars span {
  position: absolute; left: 0;
  width: 100%; height: 1.5px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform var(--t-base) var(--e-out), opacity var(--t-fast) linear;
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { bottom: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .header__cta { display: none; }
  .nav {
    position: fixed;
    inset: var(--header-h) 0 0;
    /* dvh so the panel still reaches the bottom when a mobile browser's
       address bar is showing */
    height: calc(100dvh - var(--header-h));
    z-index: 55;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: var(--s-3) var(--gutter) var(--s-6);
    background: var(--paper);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    /* visibility is discrete: animating it can strand the panel mid-flip.
       Step it instead — delayed on close so the fade-out is still seen,
       immediate on open so the menu is interactive right away. */
    transition: opacity var(--t-base) var(--e-out),
                transform var(--t-base) var(--e-out),
                visibility 0s linear var(--t-base);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity var(--t-base) var(--e-out),
                transform var(--t-base) var(--e-out),
                visibility 0s linear 0s;
  }
  .nav__link {
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--ink);
    padding-block: 0.5rem;
    border-bottom: 1px solid var(--line);
    min-height: 68px;
  }
  .nav__link::after { display: none; }
  .nav__link[aria-current="page"] { color: var(--teal); }
  .nav > .btn { display: inline-flex; margin-top: var(--s-4); align-self: flex-start; }
}

/* ============================================================
   Hero
   ============================================================ */

/* The pack is sandwiched between the two halves of the tagline:
   "Pure Use." sits behind it, "No Hype." in front. On scroll the
   words drift one way and the pack the other, so the lockup opens
   up as you move down the page. */
.hero {
  position: relative;
  overflow: hidden;
  margin-inline: clamp(0.5rem, 1.5vw, 1.25rem);
  border-radius: var(--r-xl);
  background: linear-gradient(163deg, var(--aqua-wash) 0%, var(--paper-warm) 48%, var(--butter-wash) 100%);
  padding: clamp(2.25rem, 5vw, 4rem) clamp(1rem, 3vw, 2.5rem) clamp(2.5rem, 5vw, 4rem);
  /* The pack nestles between the two lines rather than sitting on top of
     them — the tagline stays fully legible, and the tuck is small enough
     that the lockup still reads as one piece. */
  --word: clamp(3.25rem, 14vw, 9.5rem);
  --overlap: calc(var(--word) * 0.04);
}

.hero__headline {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  text-align: center;
  font-weight: 400;
}
.hero__word {
  display: block;
  font-family: var(--font-display);
  font-size: var(--word, clamp(3.25rem, 15vw, 10.5rem));
  line-height: 0.86;
  letter-spacing: -0.035em;
  white-space: nowrap;
  color: var(--ink);
}
.hero__word--a { position: relative; z-index: 1; }
.hero__word--b { position: relative; z-index: 3; }

.hero__packwrap {
  position: relative;
  z-index: 2;
  display: block;
  /* Narrower than the words, so the tagline reads clear either side. */
  width: min(420px, 56vw);
  margin-block: calc(var(--overlap) * -1);
  pointer-events: none;
}
@media (min-width: 700px) { .hero__packwrap { width: min(430px, 40vw); } }
.hero__packwrap .pack {
  width: 100%;
  filter: drop-shadow(0 30px 50px rgba(32, 48, 43, .18));
}

.hero__meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
  text-align: center;
}
.hero__sub {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--ink-80);
  max-width: 34ch;
  margin: 0;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }

@media (max-width: 480px) {
  .hero__actions { width: 100%; flex-direction: column; }
  .hero__actions .btn { width: 100%; }
}

/* Secondary hero used on the Wipes page: art beside copy. */
.hero--split .hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
.hero--split .hero__art { justify-self: center; width: 100%; max-width: 460px; }
.hero--split .hero__art .pack { filter: drop-shadow(0 24px 42px rgba(32,48,43,.16)); }
.hero--split .hero__sub { text-align: left; }
@media (max-width: 820px) {
  .hero--split .hero__grid { grid-template-columns: 1fr; }
  .hero--split .hero__art { max-width: 340px; order: -1; }
}

/* Statement head (About / Wipes / Contact) */
.page-head { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2rem, 4vw, 3.5rem); }
.page-head__title { font-size: var(--fs-h1); max-width: 18ch; }
.page-head .lead { margin-top: 1.25rem; }

/* ============================================================
   Trust strip
   ============================================================ */

.trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.25rem, 4vw, 3.5rem);
  padding-block: clamp(2rem, 4vw, 3rem);
  font-size: var(--fs-sm);
  color: var(--ink-70);
  letter-spacing: 0.02em;
}
.trust li { display: flex; align-items: center; gap: 0.5rem; }
.trust svg { width: 15px; height: 15px; color: var(--teal); flex: none; }

/* Five items wrapping one-per-line made this 178px tall on a phone.
   Two tidy columns instead. */
@media (max-width: 700px) {
  .trust {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: start;
    gap: 0.625rem 1rem;
    font-size: var(--fs-xs);
    padding-block: 1.5rem;
  }
  .trust li:last-child { grid-column: 1 / -1; }
  .trust svg { width: 13px; height: 13px; }
}

/* ============================================================
   Section heading
   ============================================================ */

.sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.sec-head__title { max-width: 20ch; }
.sec-head--center { flex-direction: column; align-items: center; text-align: center; }
.sec-head--center .sec-head__title { max-width: 24ch; }

/* ============================================================
   Statement block
   ============================================================ */

.statement { text-align: center; }
.statement__q {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: 1.08;
  letter-spacing: -0.02em;
  max-width: 22ch;
  margin-inline: auto;
}
.statement__lines {
  margin-top: 2rem;
  font-size: var(--fs-lead);
  color: var(--ink-70);
  line-height: 1.7;
  max-width: 40ch;
  margin-inline: auto;
}
.statement__sig {
  margin-top: 2.25rem;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  color: var(--teal);
}

/* ============================================================
   Product grid & cards
   ============================================================ */

.prod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(0.875rem, 2vw, 1.25rem);
}
.prod-grid--lg { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(1.25rem, 2.5vw, 1.75rem); }

/* ---- Colourway row: five packs of the same product ---- */

.colourway {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(0.625rem, 1.6vw, 1.125rem);
}
.swatch { display: block; text-align: center; }
.swatch__art {
  border-radius: var(--r-md);
  padding: clamp(0.625rem, 1.6vw, 1.125rem);
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  transition: transform var(--t-slow) var(--e-soft), box-shadow var(--t-slow) var(--e-soft);
}
.swatch__art .pack { width: 100%; filter: drop-shadow(0 8px 16px rgba(32,48,43,.14)); }
.swatch:hover .swatch__art { transform: translateY(-5px); box-shadow: var(--sh-md); }
.swatch__name {
  display: block;
  margin-top: 0.75rem;
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1.6vw, 1.3125rem);
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.15;
}
.swatch__line {
  display: block;
  margin-top: 0.25rem;
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--ink-55);
}

/* ---- Free from ---- */

.freefrom {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border-radius: var(--r-xl);
  background: var(--peach-wash);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  text-align: center;
}
.freefrom__title {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 3vw, 2rem);
  letter-spacing: -0.015em;
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
}
.freefrom__title strong { color: var(--peach-text); font-weight: 400; }
.freefrom__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.75rem, 2vw, 1.5rem);
}
.freefrom__list li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
  font-size: var(--fs-xs);
  color: var(--ink-80);
  line-height: 1.35;
}
.freefrom__icon {
  width: clamp(48px, 6vw, 62px);
  height: clamp(48px, 6vw, 62px);
  border-radius: 50%;
  background: rgba(255, 255, 255, .66);
  display: grid;
  place-items: center;
  color: var(--peach-text);
  transition: transform var(--t-base) var(--e-out);
}
.freefrom__list li:hover .freefrom__icon { transform: translateY(-4px) scale(1.06); }
.freefrom__icon svg { width: 46%; height: 46%; }
.freefrom__note {
  margin-top: clamp(1.5rem, 3vw, 2rem);
  font-size: var(--fs-xs);
  color: var(--ink-55);
  max-width: 44ch;
  margin-inline: auto;
  line-height: 1.6;
}
@media (max-width: 560px) {
  .freefrom__list { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
}

/* On a phone these collapsed to one giant column. Swipe instead. */
@media (max-width: 760px) {
  .colourway {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-bottom: 0.25rem;
  }
  .colourway::-webkit-scrollbar { display: none; }
  .colourway > * { flex: 0 0 44%; scroll-snap-align: center; }
}
@media (max-width: 420px) {
  .colourway > * { flex: 0 0 58%; }
}

.card {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  background: transparent;
  transition: transform var(--t-slow) var(--e-soft);
}
a.card:hover { transform: translateY(-6px); }

.card__art {
  border-radius: var(--r-lg);
  padding: clamp(1rem, 2.5vw, 1.75rem);
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--t-slow) var(--e-soft);
}
.card__art .pack {
  width: 100%;
  transition: transform var(--t-slow) var(--e-soft);
  filter: drop-shadow(0 14px 24px rgba(32,48,43,.13));
}
a.card:hover .card__art { box-shadow: var(--sh-md); }
a.card:hover .card__art .pack { transform: scale(1.045) rotate(-1.2deg); }

.card__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.9375rem;
}
.card__name { font-size: var(--fs-body); font-weight: 700; letter-spacing: -0.005em; }
.card__line { font-size: var(--fs-sm); color: var(--ink-55); margin-top: 0.25rem; line-height: 1.5; }

.tag {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.3125rem 0.625rem;
  border-radius: var(--r-pill);
  white-space: nowrap;
  flex: none;
}
.tag--live { background: var(--sage); color: var(--sage-text); }
.tag--soon { background: rgba(32,48,43,.07); color: var(--ink-55); }

/* Tint mapping */
.t-sage   { background: var(--sage-wash); }
.t-butter { background: var(--butter-wash); }
.t-lav    { background: var(--lav-wash); }
.t-aqua   { background: var(--aqua-wash); }
.t-peach  { background: var(--peach-wash); }

.t-sage-solid   { background: var(--sage); }
.t-butter-solid { background: var(--butter); }
.t-lav-solid    { background: var(--lav); }
.t-aqua-solid   { background: var(--aqua); }
.t-peach-solid  { background: var(--peach); }

/* ============================================================
   Steps
   ============================================================ */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(2rem, 4vw, 3rem);
  text-align: center;
}
.step__dot {
  width: 64px; height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-inline: auto;
  margin-bottom: 1.125rem;
}
.step__dot svg { width: 26px; height: 26px; }
.step__dot span {
  font-family: var(--font-display);
  font-size: 1.625rem;
  line-height: 1;
  color: var(--ink);
  opacity: .7;
  /* Cormorant defaults to old-style figures, which turns "1" into
     something that reads as a capital I. */
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}
.step__n {
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-40);
  font-weight: 700;
  display: block;
  margin-bottom: 0.5rem;
}
.step__t { font-size: var(--fs-body); color: var(--ink-80); max-width: 24ch; margin-inline: auto; line-height: 1.55; }

/* ============================================================
   Teal band
   ============================================================ */

.band {
  margin: 0 clamp(0.5rem, 1.5vw, 1.25rem);
  border-radius: var(--r-xl);
  background: var(--teal);
  color: var(--paper);
  padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 4vw, 4rem) 0;
  text-align: center;
  overflow: hidden;
}
.band__title {
  font-size: clamp(1.875rem, 4.4vw, 3rem);
  max-width: 18ch;
  margin-inline: auto;
  color: var(--paper);
}
.band__sub { color: rgba(251,250,247,.75); max-width: 42ch; margin: 1.25rem auto 0; }
.band__packs {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(0.5rem, 2vw, 1.75rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.band__packs .pack { filter: drop-shadow(0 18px 30px rgba(0,0,0,.18)); }
.band__packs > * { width: 27%; max-width: 240px; }
.band__packs > *:nth-child(1) { transform: rotate(-6deg) translateY(8px); }
.band__packs > *:nth-child(3) { transform: rotate(6deg) translateY(8px); }

/* Three packs across a phone left them 53px tall. Overlap them into
   a fanned stack so each one is actually legible. */
@media (max-width: 700px) {
  .band__packs { gap: 0; margin-top: 2rem; }
  .band__packs > * { width: 40%; }
  .band__packs > *:nth-child(1) { margin-right: -10%; }
  .band__packs > *:nth-child(3) { margin-left: -10%; }
}

/* ============================================================
   Ingredient wheel
   ============================================================ */

.wheel {
  position: relative;
  width: min(440px, 82vw);
  aspect-ratio: 1;
  margin: clamp(3rem, 6vw, 4.5rem) auto clamp(2rem, 4vw, 3rem);
}
.wheel__ring {
  position: absolute; inset: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
}
.wheel__core {
  position: absolute;
  left: 50%; top: 50%;
  width: 52%;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 12px 26px rgba(32,48,43,.12));
}
.wheel__node {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 118px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}
.wheel__bead {
  width: 68px; height: 68px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: var(--sh-sm);
}
.wheel__bead svg { width: 28px; height: 28px; }
.wheel__label { font-size: var(--fs-xs); line-height: 1.35; color: var(--ink-80); }

/* The 3 and 9 o'clock nodes overhang the ring by half their width, so the
   ring has to shrink faster than the viewport or the page scrolls sideways. */
@media (max-width: 620px) {
  .wheel { width: min(260px, 62vw); margin-block: clamp(2.5rem, 8vw, 3.5rem) 2rem; }
  .wheel__node { width: 88px; }
  .wheel__bead { width: 52px; height: 52px; }
  .wheel__bead svg { width: 22px; height: 22px; }
  .wheel__label { font-size: 0.75rem; }
}
@media (max-width: 400px) {
  .wheel { width: min(220px, 56vw); }
  .wheel__node { width: 82px; }
  .wheel__bead { width: 46px; height: 46px; }
  .wheel__bead svg { width: 20px; height: 20px; }
}

/* Ingredient cards */
.ing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.ing-card {
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 210px;
}
.ing-card__icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,.62);
  display: grid;
  place-items: center;
  margin-bottom: 0.375rem;
}
.ing-card__icon svg { width: 24px; height: 24px; }
.ing-card__name { font-size: 1.1875rem; font-weight: 700; letter-spacing: -0.005em; }
.ing-card__why { font-size: var(--fs-sm); line-height: 1.6; color: var(--ink-80); }

/* ============================================================
   Rules list
   ============================================================ */

.rules { border-top: 1px solid var(--line); }
.rule-item {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: start;
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  border-bottom: 1px solid var(--line);
}
.rule-item__n {
  font-family: var(--font-display);
  font-size: 1.75rem;
  color: var(--teal);
  line-height: 1;
  padding-top: 0.25rem;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}
.rule-item__t { font-family: var(--font-display); font-size: clamp(1.375rem, 2.6vw, 1.875rem); margin-bottom: 0.5rem; }
.rule-item__d { color: var(--ink-70); font-size: var(--fs-body); max-width: 46ch; }

@media (max-width: 560px) {
  .rule-item { grid-template-columns: 1fr; gap: 0.5rem; }
  .rule-item__n { font-size: 1.25rem; }
}

/* ============================================================
   Where to buy
   ============================================================ */

.market { text-align: center; }
.market__label {
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-55);
  font-weight: 700;
  margin-bottom: 1.25rem;
}
.market__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(0.75rem, 2vw, 1.25rem);
}
.market__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  min-width: 190px;
  min-height: 84px;
  justify-content: center;
  padding: 1rem 1.75rem;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--paper);
  transition: transform var(--t-base) var(--e-out),
              box-shadow var(--t-base) var(--e-out),
              border-color var(--t-base) var(--e-out);
}
a.market__item:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
  border-color: var(--line-strong);
}
.market__mark {
  width: 118px;
  height: auto;
  display: block;
  /* The two logos are different heights. Boxing them to a common one keeps
     the tiles the same size without scaling either mark to fit, which is
     the thing a trademark owner actually objects to. */
  max-height: 42px;
  object-fit: contain;
  object-position: center;
  transition: transform var(--t-base) var(--e-out);
}
a.market__item:hover .market__mark { transform: scale(1.04); }
.market__cta {
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-55);
  font-weight: 700;
}
.market__item.is-soon { background: var(--paper-warm); }
.market__item.is-soon .market__cta { text-transform: none; letter-spacing: .02em; }
.market__item.is-soon .market__mark { opacity: .92; }
.market__note { margin-top: 1.5rem; font-size: var(--fs-sm); color: var(--ink-70); }

@media (max-width: 420px) {
  .market__list { flex-direction: column; align-items: stretch; }
  .market__item { min-width: 0; }
}

/* ============================================================
   Use cases — one wipe, all purpose
   ============================================================ */

.usecases {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(0.75rem, 1.8vw, 1.25rem);
}
.usecase {
  border-radius: var(--r-lg);
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  transition: transform var(--t-slow) var(--e-soft);
}
.usecase:hover { transform: translateY(-5px); }
.usecase__icon {
  width: clamp(44px, 5vw, 54px);
  height: clamp(44px, 5vw, 54px);
  border-radius: 50%;
  background: rgba(255, 255, 255, .62);
  display: grid;
  place-items: center;
  margin-bottom: 0.25rem;
}
.usecase__icon svg { width: 46%; height: 46%; }
.usecase__name {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 2vw, 1.4375rem);
  letter-spacing: -0.012em;
  line-height: 1.15;
}
.usecase__line { font-size: var(--fs-sm); line-height: 1.55; color: var(--ink-80); }

.usecases__close {
  text-align: center;
  margin-top: clamp(2rem, 4vw, 3rem);
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 3vw, 2.125rem);
  letter-spacing: -0.015em;
  color: var(--ink-70);
}
.usecases__close em { font-style: italic; color: var(--teal); }

/* Two up on a phone, rather than five tall cards in a column. */
@media (max-width: 720px) {
  .usecases { grid-template-columns: 1fr 1fr; gap: 0.625rem; }
  .usecase { padding: 1rem; gap: 0.4375rem; }
  .usecase:last-child { grid-column: 1 / -1; }
  .usecase__line { font-size: var(--fs-xs); }
}

/* ============================================================
   Spec table
   ============================================================ */

.spec-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
.spec {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  text-align: left;
}
.spec caption { text-align: left; color: var(--ink-55); font-size: var(--fs-sm); padding-bottom: 1rem; }
.spec th, .spec td { padding: 1rem 1.25rem 1rem 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.spec thead th {
  font-size: var(--fs-label);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-55);
  font-weight: 700;
  border-bottom-color: var(--line-strong);
}
.spec tbody th { font-weight: 700; }
.spec tbody tr:last-child th, .spec tbody tr:last-child td { border-bottom: 0; }
.spec code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.875em; color: var(--ink-70); letter-spacing: 0.02em; }

/* Definition rows */
.deflist { border-top: 1px solid var(--line); }
.deflist__row {
  display: grid;
  grid-template-columns: minmax(170px, 0.85fr) 1.5fr;
  gap: clamp(0.75rem, 3vw, 2rem);
  padding-block: 1.125rem;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
}
.deflist__row dt { font-weight: 700; }
.deflist__row dd { margin: 0; color: var(--ink-70); line-height: 1.6; }
@media (max-width: 560px) { .deflist__row { grid-template-columns: 1fr; gap: 0.25rem; } }

/* Pill list */
.pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pill {
  font-size: var(--fs-xs);
  padding: 0.5rem 0.9375rem;
  border-radius: var(--r-pill);
  background: var(--paper-warm);
  border: 1px solid var(--line);
  color: var(--ink-80);
}
.pill--free { background: var(--sage-wash); border-color: transparent; color: var(--sage-text); }
.pill--cert { background: var(--aqua-wash); border-color: transparent; color: var(--aqua-text); }

/* ============================================================
   Accordion
   ============================================================ */

.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  text-align: left;
  padding: 1.5rem 0;
  min-height: 64px;
  font-family: var(--font-display);
  font-size: clamp(1.1875rem, 2.2vw, 1.5rem);
  letter-spacing: -0.012em;
  color: var(--ink);
  transition: color var(--t-base) var(--e-out);
}
.acc__btn:hover { color: var(--teal); }
.acc__icon {
  flex: none;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: grid;
  place-items: center;
  position: relative;
  color: var(--ink);
  transition: background var(--t-base) var(--e-out), border-color var(--t-base) var(--e-out), color var(--t-base) var(--e-out);
}
.acc__icon::before, .acc__icon::after {
  content: "";
  position: absolute;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--t-base) var(--e-out), opacity var(--t-base) var(--e-out);
}
.acc__icon::before { width: 12px; height: 1.5px; }
.acc__icon::after  { width: 1.5px; height: 12px; }
.acc__btn[aria-expanded="true"] .acc__icon { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.acc__btn[aria-expanded="true"] .acc__icon::after { transform: scaleY(0); opacity: 0; }
.acc__panel { overflow: hidden; height: 0; transition: height var(--t-slow) var(--e-soft); }
.acc__panel-inner { padding-bottom: 1.75rem; max-width: 62ch; color: var(--ink-70); }
.acc__panel-inner strong { color: var(--ink); font-weight: 700; }
.acc__panel-inner .lead-in {
  font-family: var(--font-display);
  font-size: 1.375rem;
  color: var(--teal);
  display: block;
  margin-top: 1rem;
}

/* ============================================================
   Forms
   ============================================================ */

.field { display: flex; flex-direction: column; gap: 0.4375rem; }
.field > label { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.03em; }
.field .req { color: #8A3616; margin-left: 2px; }
.field__hint { font-size: var(--fs-xs); color: var(--ink-55); }

.input, .select, .textarea {
  width: 100%;
  min-height: 52px;
  padding: 0.875rem 1.0625rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--paper);
  font-size: var(--fs-sm);
  transition: border-color var(--t-base) var(--e-out), box-shadow var(--t-base) var(--e-out);
}
.textarea { resize: vertical; min-height: 128px; line-height: 1.6; }
.select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%2320302B' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.0625rem center;
  padding-right: 2.75rem;
  cursor: pointer;
}
.input::placeholder, .textarea::placeholder { color: var(--ink-40); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-40); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(15,115,103,.18);
}
.field.is-error .input, .field.is-error .select, .field.is-error .textarea { border-color: #B03A1E; }
.field__err {
  font-size: var(--fs-xs);
  color: #8A3616;
  display: none;
  align-items: center;
  gap: 0.375rem;
}
.field.is-error .field__err { display: flex; }
.field__err svg { width: 13px; height: 13px; flex: none; }

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.125rem; }
.form-grid .span-2 { grid-column: 1 / -1; }

.check { display: flex; align-items: flex-start; gap: 0.75rem; cursor: pointer; font-size: var(--fs-sm); color: var(--ink-70); line-height: 1.5; }
.check input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 22px; height: 22px;
  margin-top: 1px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--paper);
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--e-out), border-color var(--t-fast) var(--e-out);
}
.check input:checked {
  background-color: var(--ink);
  border-color: var(--ink);
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10' fill='none'%3E%3Cpath d='M1 5 4.2 8.2 11 1.5' stroke='%23FBFAF7' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.form-note { font-size: var(--fs-xs); color: var(--ink-55); }

.form-status {
  border-radius: var(--r-md);
  padding: 1.125rem 1.25rem;
  font-size: var(--fs-sm);
  display: none;
  gap: 0.75rem;
  align-items: flex-start;
  line-height: 1.55;
}
.form-status svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.form-status.is-ok  { display: flex; background: var(--sage-wash); color: var(--sage-text); }
.form-status.is-bad { display: flex; background: var(--peach-wash); color: var(--peach-text); }

/* Tabs */
.tabs {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.3125rem;
  border-radius: var(--r-pill);
  background: var(--paper-warm);
  border: 1px solid var(--line);
  margin-bottom: var(--s-4);
  max-width: 100%;
  overflow-x: auto;
}
.tab {
  border-radius: var(--r-pill);
  padding: 0.6875rem 1.375rem;
  min-height: 44px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-55);
  white-space: nowrap;
  transition: background var(--t-base) var(--e-out), color var(--t-base) var(--e-out);
}
.tab[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.tab:hover:not([aria-selected="true"]) { color: var(--ink); }

/* Contact info block */
.info-list { display: grid; gap: 1.75rem; }
.info-item__k {
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-55);
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.info-item__v { font-size: var(--fs-sm); line-height: 1.65; color: var(--ink-80); }
.info-item__v a { border-bottom: 1px solid var(--line-strong); padding-bottom: 2px; transition: border-color var(--t-base) var(--e-out); }
.info-item__v a:hover { border-color: var(--ink); }

@media (max-width: 900px) {
  /* minmax(0, 1fr), not 1fr — a plain 1fr track refuses to shrink below its
     content's min-content width and blows the grid out sideways. */
  .contact-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .contact-grid > * { min-width: 0; }
  .contact-grid aside { order: 2; padding-top: 1rem; border-top: 1px solid var(--line); }
}
.info-item__v { overflow-wrap: anywhere; }

/* ============================================================
   Cookie consent
   ============================================================ */

.consent {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 80;
  background: var(--ink);
  color: var(--paper);
  transform: translateY(110%);
  transition: transform var(--t-slow) var(--e-soft);
  padding-bottom: env(safe-area-inset-bottom);
}
.consent.is-in { transform: none; }

.consent__inner {
  max-width: 1280px;
  margin-inline: auto;
  padding: clamp(1rem, 2.5vw, 1.5rem) var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 3vw, 2.5rem);
  flex-wrap: wrap;
}
.consent__text {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: rgba(251, 250, 247, .82);
  max-width: 68ch;
}
.consent__text a {
  color: var(--paper);
  border-bottom: 1px solid rgba(251, 250, 247, .45);
  padding-bottom: 1px;
  transition: border-color var(--t-base) var(--e-out);
}
.consent__text a:hover { border-bottom-color: var(--paper); }

.consent__actions { display: flex; gap: 0.625rem; flex: none; }
.consent .btn--ghost { border-color: rgba(251, 250, 247, .4); color: var(--paper); }
.consent .btn--ghost:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.consent .btn--solid { background: var(--paper); color: var(--ink); }
.consent .btn--solid:hover { background: var(--aqua); }

@media (max-width: 640px) {
  .consent__inner { flex-direction: column; align-items: stretch; }
  .consent__actions { width: 100%; }
  .consent__actions .btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .consent { transition: none; }
}

/* ============================================================
   Legal pages
   ============================================================ */

.legal { max-width: 74ch; }
.legal h2 {
  font-size: clamp(1.375rem, 2.8vw, 1.875rem);
  margin-top: clamp(2.25rem, 4vw, 3rem);
  margin-bottom: 0.875rem;
  scroll-margin-top: 6rem;
}
.legal h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-body);
  letter-spacing: 0;
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
}
.legal p, .legal li { color: var(--ink-80); font-size: var(--fs-sm); line-height: 1.75; }
.legal p + p { margin-top: 0.875rem; }
.legal ul { margin: 0.75rem 0 0; padding-left: 1.125rem; list-style: disc; }
.legal ul li { margin-bottom: 0.5rem; }
.legal ul li::marker { color: var(--ink-40); }
.legal a { border-bottom: 1px solid var(--line-strong); padding-bottom: 1px; }
.legal a:hover { border-bottom-color: var(--ink); }
.legal__meta {
  font-size: var(--fs-xs);
  color: var(--ink-55);
  padding: 0.875rem 1.125rem;
  background: var(--paper-warm);
  border-radius: var(--r-sm);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.legal__toc {
  background: var(--aqua-wash);
  border-radius: var(--r-lg);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.legal__toc ol { list-style: none; padding: 0; columns: 2; column-gap: 2rem; }
.legal__toc li { margin-bottom: 0.4375rem; font-size: var(--fs-sm); }
@media (max-width: 560px) { .legal__toc ol { columns: 1; } }

.legal__box {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: clamp(1rem, 2.5vw, 1.5rem);
  margin-top: 1.25rem;
}
.legal__box p { margin: 0; }
.legal__status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.4375rem 0.875rem;
  border-radius: var(--r-pill);
  background: var(--sage-wash);
  color: var(--sage-text);
  margin-bottom: 0.875rem;
}

/* =========================================================================
   PRODUCT DETAIL PAGE
   ========================================================================= */

/* --- breadcrumb --- */
.crumbs { padding-top: 1.75rem; }
.crumbs ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  font-size: .8125rem; letter-spacing: .01em; color: var(--ink-55);
}
.crumbs li + li::before {
  content: "/"; margin-right: .5rem; color: var(--ink-40);
}
.crumbs a { color: var(--ink-55); text-decoration: none; }
.crumbs a:hover { color: var(--teal); }
.crumbs [aria-current] { color: var(--ink); }

/* --- the two column product block --- */
.pdp {
  display: grid; gap: clamp(1.75rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
}
@media (min-width: 900px) {
  .pdp { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 5rem); }
}

.pdp__media {
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 5vw, 3.25rem);
  display: grid; place-items: center;
  position: relative; overflow: hidden;
}
/* a soft vignette so the pack sits in the panel rather than on it */
.pdp__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, transparent 45%, rgba(32,48,43,.055) 100%);
}
.pdp__media .pack { width: min(520px, 100%); height: auto; display: block; }
@media (min-width: 900px) { .pdp__media { position: sticky; top: calc(var(--header-h) + 1.5rem); } }

.pdp__title {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(2.4rem, 6.5vw, 3.9rem); line-height: 1.02;
  letter-spacing: -.02em; margin: .75rem 0 0;
}
.pdp__line {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.15rem, 2.4vw, 1.4rem); color: var(--teal);
  margin: 1rem 0 0;
}
.pdp__note { color: var(--ink-70); margin: .875rem 0 0; max-width: 46ch; }

.pdp__facts {
  list-style: none; margin: 1.75rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem .5rem;
}
.pdp__facts li {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .8125rem; color: var(--ink-70);
  background: var(--paper-warm); border: 1px solid var(--line);
  border-radius: 999px; padding: .4rem .8rem .4rem .65rem;
}
.pdp__facts svg { width: 14px; height: 14px; color: var(--teal); flex: none; }

/* --- pack size chooser --- */
.sizer {
  margin-top: 1.75rem; padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}
.sizer__label {
  display: flex; align-items: center; gap: .625rem; flex-wrap: wrap;
  font-size: .75rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--ink-55); margin: 0 0 .875rem;
}
.sizer__opts { display: flex; flex-wrap: wrap; gap: .5rem; }
.sizer__opt {
  font: inherit; font-size: .875rem; cursor: pointer;
  font-variant-numeric: lining-nums;
  padding: .625rem 1.1rem; border-radius: 999px;
  border: 1px solid var(--line-strong); background: transparent;
  color: var(--ink-70);
  transition: border-color var(--t-fast), color var(--t-fast),
              background-color var(--t-fast), transform var(--t-fast);
}
.sizer__opt:hover { border-color: var(--teal); color: var(--teal); }
.sizer__opt.is-active {
  background: var(--teal); border-color: var(--teal); color: #fff;
}
.sizer__opt:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.sizer__meta {
  margin: .875rem 0 0; font-size: .8125rem; color: var(--ink-55);
  font-variant-numeric: lining-nums;
}
.sizer__meta code {
  font-size: .8125rem; background: var(--paper-warm);
  border: 1px solid var(--line); border-radius: 4px; padding: .1rem .35rem;
}

.pdp__actions {
  display: flex; flex-wrap: wrap; gap: .625rem;
  margin-top: 1.75rem;
}
.pdp__ship { margin: 1rem 0 0; font-size: .8125rem; color: var(--ink-55); }

/* =========================================================================
   STORIES
   ========================================================================= */

.story {
  display: grid; gap: clamp(1.75rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  padding: clamp(2.5rem, 6vw, 4.5rem) 0;
  border-top: 1px solid var(--line);
}
.story:first-of-type { border-top: 0; padding-top: clamp(1rem, 2vw, 2rem); }
@media (min-width: 880px) {
  .story { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 4.5rem); }
  /* every other story flips, so the eye zig-zags down the page */
  .story--flip .story__art { order: 2; }
}

.story__art {
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--paper-warm);
}
.story__art svg { display: block; width: 100%; height: auto; }

.story__kicker {
  font-size: .75rem; text-transform: uppercase; letter-spacing: .14em;
  color: var(--ink-55); margin: 0 0 .875rem;
  font-variant-numeric: lining-nums;
}
.story__title {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1.9rem, 4.6vw, 2.9rem); line-height: 1.05;
  letter-spacing: -.02em; margin: 0 0 1.25rem;
}
.story__body > p { color: var(--ink-80); margin: 0 0 1rem; max-width: 52ch; }
.story__body > p:last-child { margin-bottom: 0; }
.story__beat {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.1rem, 2.2vw, 1.3rem);
  color: var(--teal); padding-left: 1rem;
  border-left: 2px solid var(--teal);
}

.story__tag {
  display: inline-flex; align-items: center; gap: .6rem;
  margin-top: 1.75rem; padding: .55rem .5rem .55rem 1rem;
  border: 1px solid var(--line-strong); border-radius: 999px;
  font-size: .875rem; color: var(--ink-70); text-decoration: none;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.story__tag:hover { border-color: var(--teal); color: var(--teal); }
.story__tag svg { width: 15px; height: 15px; flex: none; }
.story__dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }

/* --- the pack caricature that recurs through the stories --- */
.packlet { display: block; height: auto; }
.packlet--mark {
  width: 66px;
  margin-bottom: 1rem;
  transition: transform var(--t-base) var(--e-out);
}
.story:hover .packlet--mark { transform: rotate(-3deg) translateY(-2px); }
/* .story__tag svg sizes the arrow at 15px and, being a descendant selector,
   outranks a lone class — so the packlet has to be named in that scope. */
.story__tag .packlet--sm { width: 27px; height: auto; flex: none; }
.packlet--beat {
  width: 32px;
  display: inline-block;
  vertical-align: -0.55em;
  margin-right: 0.5rem;
}
@media (prefers-reduced-motion: reduce) {
  .story:hover .packlet--mark { transform: none; }
}


/* The tinted panel. It started life in quiz.css and stayed there after the
   FAQ block on the product pages and the CTA on /stories borrowed the class —
   neither of which loads quiz.css, so both rendered as bare paper with square
   corners and no padding. It is a generic panel, so it belongs here. */
.quiz-section {
  background: linear-gradient(172deg, var(--sage-wash) 0%, var(--aqua-wash) 100%);
  border-radius: var(--r-xl);
  margin-inline: clamp(0.5rem, 1.5vw, 1.25rem);
  padding-block: clamp(3rem, 6vw, 5.5rem);
  overflow: hidden;
}

/* --- /stories hero --- */
.stories-hero { padding-top: clamp(2rem, 5vw, 3.5rem); }
.stories-hero__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.6rem, 7vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0;
  /* The measure has to live on the heading itself. It used to sit on the
     wrapper, where `ch` resolved against 16px body text instead of the 80px
     display face — about 190px, which wrapped the desktop headline to one
     word per line. */
  max-width: 13ch;
}
.stories-hero__lead { margin-top: 1.5rem; max-width: 58ch; }

/* The CTA panel is the last thing before the footer on /stories, where its
   own padding was the only thing between the buttons and the dark band. */
main > .quiz-section:last-child {
  padding-bottom: clamp(4rem, 8vw, 7rem);
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

/* --- product safety note ---
   Fine print, centred, and the last thing before the footer. A warning set
   at body size reads as a scare; one tucked into the footer reads as hiding.
   A hairline rule and real vertical air is the middle of those two. */
.safety {
  max-width: 62ch;
  margin-inline: auto;
  text-align: center;
  border-top: 1px solid var(--line);
  padding-block: clamp(2.75rem, 6vw, 4.25rem) clamp(2.25rem, 5vw, 3.5rem);
}
.safety__h {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-55);
  margin-bottom: 1.125rem;
}
.safety p {
  font-size: 0.75rem;
  line-height: 1.85;
  color: var(--ink-55);
  margin-bottom: 0.875rem;
  text-wrap: pretty;
}
.safety p:last-child { margin-bottom: 0; }
.safety__report { color: var(--ink-70) !important; padding-top: 0.375rem; }

/* --- hCaptcha widget, injected by site.js when config.captcha is on --- */
.captcha-field { margin-top: 1.5rem; }
.captcha-field .h-captcha { min-height: 78px; }
.captcha-field__err {
  margin-top: 0.5rem;
  font-size: var(--fs-xs);
  color: #B03A2E;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.captcha-field__err[hidden] { display: none; }
/* The widget is a fixed-width iframe; at narrow widths let it scroll rather
   than push the form wider than the viewport. */
@media (max-width: 360px) {
  .captcha-field { overflow-x: auto; }
}