/* Fool's Fix — Homepage Round II (With Designs)
   Built from the Paper file "Fools Fix" › Website Updated.
   Desktop values come from the 1497px frame, mobile values from the 390px frame. */

@font-face {
  font-family: "RG Gaueko";
  src: local("RG Gaueko"), local("RGGaueko-Regular"),
       url("fonts/RGGaueko-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --ff-accent: #B2EC04;
  --ff-accent-hover: #9DD003;
  --ff-bg: #F4F4F4;
  --ff-muted: #D7D7D7;
  --ff-light-grey: #D9D9D9;
  --ff-text: #20201E;

  --ff-font-body: "Arial Narrow", "ArialNarrow", Arial, sans-serif;
  --ff-font-display: "RG Gaueko", "RGGaueko-Regular", Georgia, serif;

  --ff-container: 1500px;
  --ff-gutter: 48px;

  /* One design pixel: 1px at the 1497 frame width and up, scaling down below it */
  --dpx: min(1px, calc(100vw / 1497));

  --diamond: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath d='M.5 0 1 .5 .5 1 0 .5z'/%3E%3C/svg%3E");
  /* Tall diamonds (17x24 with a 14px gap, and the 12x17 / 10px mobile size) drawn into their whole tile */
  --diamond-tall: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 31 24' preserveAspectRatio='none'%3E%3Cpath d='M15.5 0 24 12 15.5 24 7 12z'/%3E%3C/svg%3E");
  --diamond-tall-sm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 17' preserveAspectRatio='none'%3E%3Cpath d='M11 0 17 8.5 11 17 5 8.5z'/%3E%3C/svg%3E");
}

/* ---------- Base ---------- */

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

/* Line-heights snap up to whole pixels, as they do in the Paper frame.
   Set --lh (a ratio) wherever a line-height is needed. */
* {
  line-height: calc(var(--lh) * 1em);
  line-height: round(up, calc(var(--lh) * 1em), 1px);
}

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

body {
  --lh: 1.5;
  margin: 0;
  background: var(--ff-bg);
  color: var(--ff-text);
  font-family: var(--ff-font-body);
  font-stretch: condensed;
  font-size: 16px;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

h1, h2, h3, p, ul, dl, dd, figure, blockquote { margin: 0; }
h1, h2, h3 { font-weight: 400; }
ul { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; border-radius: 0; }
button { background: none; border: 0; padding: 0; cursor: pointer; }

:focus-visible { outline: 2px solid var(--ff-text); outline-offset: 2px; }
.footer :focus-visible, .guarantee :focus-visible, .trust :focus-visible { outline-color: var(--ff-accent); }

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

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

/* ---------- Shared pieces ---------- */

/* Row of diamonds: --n of them, --s wide, --h tall, --g apart.
   Each tile is (--s + --g) wide with the diamond centred; the half-gap offset
   puts the first and last diamonds flush with the row's edges. */
.diamonds {
  --s: 8px;
  --h: var(--s);
  --g: 10px;
  --n: 9;
  --tile: var(--diamond);
  width: calc(var(--n) * var(--s) + (var(--n) - 1) * var(--g));
  max-width: 100%;
  height: var(--h);
  margin-inline: auto;
  background: var(--ff-text);
  -webkit-mask: var(--tile) calc(var(--g) / -2) 0 / calc(var(--s) + var(--g)) var(--h) repeat-x;
          mask: var(--tile) calc(var(--g) / -2) 0 / calc(var(--s) + var(--g)) var(--h) repeat-x;
}
.diamonds--light { background: var(--ff-bg); }

/* Lime frame around a photo */
.framed { width: fit-content; padding: 10px; background: var(--ff-accent); }

/* Grey micrographic story set behind product art (the Round II heroes); each use
   places it with left/top/width */
.micrographic {
  --lh: 1.23;
  position: absolute;
  color: var(--ff-light-grey);
  font-size: calc(13 * var(--dpx));
  text-align: justify;
  text-transform: uppercase;
  user-select: none;
  pointer-events: none;
}

.btn {
  --lh: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 30px;
  border: 1px solid var(--ff-text);
  background: transparent;
  color: var(--ff-text);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-align: center;
  transition: background-color .15s ease, color .15s ease;
}
.btn:hover { background: var(--ff-text); color: var(--ff-bg); }
.btn--primary { background: var(--ff-accent); }
.btn--primary:hover { background: var(--ff-accent-hover); color: var(--ff-text); }
.btn--block { width: 100%; }

.rating {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: fit-content;
  min-height: 24px;
}
.rating__stars { display: flex; align-items: center; padding-right: 8px; }
.star { width: 20px; height: 20px; flex-shrink: 0; }
.rating__count { color: #202223; font-size: 14px; white-space: nowrap; }

.locale {
  --lh: 1.5;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 7px 9px;
  border: 1px solid var(--ff-text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.locale img { width: 20px; height: 15px; flex-shrink: 0; object-fit: cover; }
.locale svg { width: 9px; height: 6px; flex-shrink: 0; }
.locale__currency { opacity: .7; }
.locale--light { min-height: 0; border-color: var(--ff-bg); color: var(--ff-bg); }

/* Originals toggle (variants.js), beside the locale button: lime while every
   section on the site shows its original design */
.originals {
  --lh: 1.5;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 7px 11px;
  border: 1px solid var(--ff-text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background-color .15s ease, color .15s ease;
}
.originals svg { width: 9px; height: 9px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.3; }
.originals:hover { background: var(--ff-text); color: var(--ff-bg); }
.originals[aria-pressed="true"] { background: var(--ff-accent); }
.originals[aria-pressed="true"] svg { fill: currentColor; }
.originals[aria-pressed="true"]:hover { background: var(--ff-accent-hover); color: var(--ff-text); }

/* Desktop / mobile switch (breakpoint.js), right of the cart: the lime half is
   the layout on show */
.bp-toggle { display: flex; flex-shrink: 0; border: 1px solid var(--ff-text); }
.bp-toggle__opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  transition: background-color .15s ease, color .15s ease;
}
.bp-toggle__opt + .bp-toggle__opt { border-left: 1px solid var(--ff-text); }
.bp-toggle__opt svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.bp-toggle__opt[aria-pressed="true"] { background: var(--ff-accent); color: var(--ff-text); }
.bp-toggle__opt[aria-pressed="false"]:hover { background: var(--ff-text); color: var(--ff-bg); }

/* A layout the window doesn't give: the page hides and the same page shows in a
   frame on the off-black ground (390px for mobile, 1512px scaled to fit for
   desktop; breakpoint.js sizes it). The gutter keeps the nav where it was, so the
   stage's own switch lands on the same spot. */
html.bp-staged { overflow: hidden; scrollbar-gutter: stable; }
html.bp-staged, html.bp-staged body { background: var(--ff-text); }
html.bp-staged body > :not(.bp-stage) { visibility: hidden; }
.bp-stage {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 0 24px 24px; /* the top clears the switch (breakpoint.js) */
  background: var(--ff-text);
  visibility: visible;
}
.bp-stage__device { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.bp-stage__view { overflow: hidden; }
.bp-screen {
  display: block;
  border: 0;
  transform-origin: 0 0;
  background: var(--ff-bg);
  opacity: 0;
  transition: opacity .2s ease;
}
.bp-screen.is-ready { opacity: 1; }
.bp-stage__label {
  --lh: 1.3334;
  color: var(--ff-bg);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: .55;
}
.bp-stage .bp-toggle { position: fixed; border-color: var(--ff-bg); color: var(--ff-bg); }
.bp-stage .bp-toggle__opt + .bp-toggle__opt { border-left-color: var(--ff-bg); }
.bp-stage .bp-toggle__opt[aria-pressed="false"]:hover { background: var(--ff-bg); color: var(--ff-text); }
/* Inside the frame: overlay scrollbars, as on a phone, so the page gets the full width */
html.bp-framed, html.bp-framed * { scrollbar-width: none; }

.section-head {
  max-width: var(--ff-container);
  margin-inline: auto;
  padding-inline: var(--ff-gutter);
  text-align: center;
}
.section-head__eyebrow {
  font-size: 24.192px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.section-head__title {
  --lh: 0.9;
  font-family: var(--ff-font-display);
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

/* ---------- Announcement ---------- */

.announcement {
  height: 36px;
  padding: 10px 20px;
  background: var(--ff-accent);
  overflow: clip;
  text-align: center;
}
.announcement p {
  --lh: 1.3334;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

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

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  height: 70px;
  padding: 16px var(--ff-gutter);
  background: var(--ff-bg);
}
.nav__logo { justify-self: start; }
.nav__logo img { width: auto; height: 26px; }

.nav__links { display: flex; gap: 32px; justify-self: center; }
.nav__link {
  position: relative;
  padding-block: 8px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.nav__link::before {
  content: "";
  position: absolute;
  left: -15px;
  top: 13.25px;
  width: 8px;
  height: 8px;
  background: var(--ff-accent);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  transition: rotate .25s ease;
}
.nav__link:hover::before, .nav__link[aria-current="page"]::before { rotate: 90deg; }
.nav__link[aria-current="page"] { text-decoration: underline 2px; text-underline-offset: 6px; }

.nav__actions { display: flex; align-items: center; gap: 16px; justify-self: end; }
.nav__cart {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid var(--ff-text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background-color .15s ease, color .15s ease;
}
.nav__cart:hover { background: var(--ff-text); color: var(--ff-bg); }
.nav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--ff-text);
}

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

.hero {
  padding: 28px 0 43px;
  overflow: clip;
}
.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 8px;
  max-width: var(--ff-container);
  margin-inline: auto;
  padding-inline: var(--ff-gutter);
}
.hero__copy { min-width: 0; }
.hero__title-wrap { --lh: 1.3334; font-size: 12px; }
.hero__title {
  --lh: 0.9;
  display: inline-block;
  font-family: var(--ff-font-display);
  font-size: calc(105.84 * var(--dpx));
  letter-spacing: -0.04em;
  text-transform: uppercase;
}
.diamonds--hero { margin: 16px 0 14px; }
.hero__lede {
  --lh: 1.3;
  max-width: 480px;
  margin-bottom: 20px;
  font-size: 28px;
  text-transform: uppercase;
}
.hero__rating { margin-bottom: 20px; }
.hero__points {
  --lh: 1.3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 10px;
  row-gap: 8px;
  margin-bottom: 18px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.hero__points li { display: flex; align-items: center; gap: 10px; }
.hero__points li + li::before {
  content: "";
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  background: var(--ff-accent);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.hero__cta { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.hero__buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.hero__more {
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: underline 1px;
  text-underline-offset: 3px;
}
.hero__more:hover { text-decoration-thickness: 2px; }

/* 000, the original design: the gauntlet photo, laid on .hero__inner from the
   middle of the row */
.hero__shot {
  position: absolute;
  left: 50%;
  top: calc(-60 * var(--dpx));
  width: 50%;
  height: auto;
  aspect-ratio: 749 / 773;
  max-width: none;
  object-fit: cover;
}

/* Round II art: a grey micrographic story with the can laid over it, at the
   frame's positions in design pixels. The can images are cropped to the can, so
   their boxes are its bounds in the frame.
   Each bottom is min(frame position, the lowest that keeps the can's cut-off
   end 18 design px below the hero's bottom edge, 43px under .hero__inner).
   Narrower than 1497 the copy outgrows the scaled art; when the can would end
   inside the hero, the second value moves it and its story down together. */
.hero__micro {
  left: calc(755 * var(--dpx));
  bottom: min(100% - 367 * var(--dpx), -43px + 460.5 * var(--dpx));
  width: calc(686 * var(--dpx));
}
.hero__can {
  position: absolute;
  height: auto;
  max-width: none;
}
.hero--front .hero__can {
  left: calc(947 * var(--dpx));
  bottom: min(100% - 845.5 * var(--dpx), -43px - 18 * var(--dpx));
  width: calc(326.5 * var(--dpx));
}
.hero--top .hero__micro { left: calc(756 * var(--dpx)); bottom: min(100% - 387 * var(--dpx), -43px + 241 * var(--dpx)); }
.hero--top .hero__can {
  left: calc(898.76 * var(--dpx));
  bottom: min(100% - 646 * var(--dpx), -43px - 18 * var(--dpx));
  width: calc(393.42 * var(--dpx));
}
/* 003: the close-up can from Fellowship "Hero #3" (no homepage frame). It sits
   over 001's story as it does in that frame: centred on it, its top 170.5 above
   the story's, and cut off by the hero's bottom edge. */
.hero--closeup .hero__micro { bottom: min(100% - 367 * var(--dpx), -43px + 265.5 * var(--dpx)); }
.hero--closeup .hero__can {
  left: calc(767 * var(--dpx));
  bottom: min(100% - 650.5 * var(--dpx), -43px - 18 * var(--dpx));
  width: calc(662 * var(--dpx));
}

/* ---------- Design variants (variants.js) ----------
   A group holds alternative designs of one section; only the active one shows.
   The dock sits on the right edge, halfway down, over sections that have
   versions: a quiet chip that opens its options on hover or click. */

[data-variants] { display: contents; }
[data-variant][hidden] { display: none !important; }

::view-transition-old(root),
::view-transition-new(root) { animation-duration: .45s; animation-timing-function: ease; }

/* The dock box spans the closed panel too, so only its visible parts take the pointer */
.vdock {
  position: fixed;
  top: 50%;
  right: 16px;
  z-index: 40;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  opacity: 0;
  translate: 8px -50%;
  visibility: hidden;
  transition: opacity .25s ease, translate .25s ease, visibility 0s .25s;
}
.vdock.is-visible { opacity: 1; translate: 0 -50%; visibility: visible; transition-delay: 0s; }

.vdock__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--ff-text);
  background: var(--ff-bg);
  opacity: .35;
  pointer-events: auto;
  transition: opacity .2s ease;
}
.vdock:hover .vdock__chip, .vdock.is-open .vdock__chip, .vdock__chip:focus-visible { opacity: 1; }
.vdock__chip svg { width: 16px; height: 16px; overflow: visible; }
.vdock__chip path { fill: var(--ff-bg); stroke: var(--ff-text); stroke-width: 1.2; stroke-linejoin: round; }
.vdock__front { transition: fill .2s ease; }
.vdock.is-open .vdock__front { fill: var(--ff-accent); }

.vdock__panel {
  --lh: 1.3334;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 264px;
  padding: 12px 12px 10px;
  border: 1px solid var(--ff-text);
  background: var(--ff-bg);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0;
  translate: 6px 0;
  visibility: hidden;
  transition: opacity .18s ease, translate .18s ease, visibility 0s .18s;
}
/* Bridges the gap to the chip so the hover holds on the way across */
.vdock__panel::after { content: ""; position: absolute; top: 0; bottom: 0; left: 100%; width: 9px; }
/* Keyboard focus holds it open; a mouse click on a version doesn't, so it
   closes as the pointer leaves */
.vdock.is-open .vdock__panel,
.vdock:has(:focus-visible) .vdock__panel {
  opacity: 1;
  translate: 0 0;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
@media (hover: hover) {
  .vdock:hover .vdock__panel {
    opacity: 1;
    translate: 0 0;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }
}
/* Tabs keep one width and sit right-aligned */
.vdock__opts { display: flex; align-self: flex-end; border: 1px solid var(--ff-text); }
.vdock__opt {
  --lh: 1;
  flex: 0 0 48px;
  width: 48px;
  height: 30px;
  padding: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  user-select: none;
  transition: background-color .15s ease, color .15s ease;
}
.vdock__opt + .vdock__opt { border-left: 1px solid var(--ff-text); }
.vdock__opt[aria-pressed="true"] { background: var(--ff-accent); }
.vdock__opt[aria-pressed="false"]:hover { background: var(--ff-text); color: var(--ff-bg); }
.vdock__opt:focus-visible { outline-offset: -4px; }
.vdock__hint { font-weight: 400; letter-spacing: 0.04em; opacity: .55; }
.vdock__hint kbd { font: inherit; font-weight: 700; }

/* ---------- "Why this version" modal (variants.js) ----------
   Opened by double-clicking a version in the dock: the change request, the brand guidelines it follows
   and their brand book pages, stacked beside it. The page behind blurs. A tall
   note scrolls inside the dialog, and the close button stays in view. */

.vnote {
  position: fixed;
  inset: 0;
  width: min(1120px, calc(100vw - 48px));
  max-width: none;
  max-height: calc(100vh - 64px);
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 1px solid var(--ff-text);
  background: var(--ff-bg);
  color: var(--ff-text);
}
.vnote:not(.has-ref) { width: min(840px, calc(100vw - 48px)); }
.vnote::backdrop {
  background: rgb(32 32 30 / .28);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.vnote[open] { animation: vnote-in .25s ease; }
.vnote[open]::backdrop { animation: vnote-fade .25s ease; }
@keyframes vnote-in { from { opacity: 0; translate: 0 8px; } }
@keyframes vnote-fade { from { opacity: 0; } }

.vnote__close {
  position: sticky;
  top: 16px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  /* In flow so it can stick: 16px in from the top right, taking no space */
  margin: 16px 16px -54px auto;
  border: 1px solid var(--ff-text);
  background: var(--ff-bg);
  transition: background-color .15s ease, color .15s ease;
}
.vnote__close:hover { background: var(--ff-text); color: var(--ff-bg); }
.vnote__close svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; }

.vnote__body { display: grid; grid-template-columns: minmax(0, 1fr); }
.vnote.has-ref .vnote__body { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.vnote__copy { display: flex; flex-direction: column; padding: 56px 48px 44px; }
.vnote__eyebrow, .vnote__source, .vnote__ref figcaption {
  --lh: 1.3334;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: .55;
}
.vnote__title {
  --lh: 0.95;
  margin-top: 10px;
  font-family: var(--ff-font-display);
  font-size: 56px;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}
.vnote__diamonds { margin: 18px 0 32px; }
.vnote__blocks { display: flex; flex-direction: column; gap: 24px; }
.vnote__block { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.vnote__block + .vnote__block { padding-top: 24px; border-top: 1px solid var(--ff-muted); }
.vnote__tag {
  --lh: 1.2;
  padding: 4px 8px;
  border: 1px solid var(--ff-text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.vnote__tag--request { background: var(--ff-text); color: var(--ff-bg); }
.vnote__tag--guideline { background: var(--ff-accent); border-color: var(--ff-accent); }
.vnote__tag--call { background: var(--ff-muted); border-color: var(--ff-muted); }
.vnote__lead { --lh: 1.3; font-size: 24px; }
.vnote__text { --lh: 1.45; font-size: 17px; }
.vnote__frame { --lh: 1.4; margin-top: 36px; font-size: 13px; letter-spacing: 0.02em; opacity: .55; }
.vnote__frame[hidden] { display: none; }
.vnote__refs { display: flex; flex-direction: column; justify-content: center; gap: 40px; padding: 56px 48px 44px 0; }
.vnote__refs[hidden] { display: none; }
.vnote__ref { display: flex; flex-direction: column; gap: 12px; }
.vnote__ref img { width: 100%; height: auto; }

/* ---------- Trust bar ---------- */

.trust {
  padding-block: 32px;
  background: var(--ff-text);
  color: var(--ff-bg);
}
.trust__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 80px;
}
.trust__item {
  --lh: 1.1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-family: var(--ff-font-display);
  font-size: 19.656px;
  letter-spacing: -0.04em;
  text-align: center;
  text-transform: uppercase;
}
.trust__item img { width: 44px; height: 44px; flex-shrink: 0; object-fit: contain; }
.trust__item span { max-width: 200px; }

/* ---------- Promise ---------- */

.promise { padding: 64px 0 55px; }
.promise__inner {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  align-items: center;
  gap: 64px;
  max-width: var(--ff-container);
  margin-inline: auto;
  padding-inline: var(--ff-gutter);
}
.promise__media img {
  width: calc(512 * var(--dpx));
  height: auto;
  aspect-ratio: 512 / 507;
  object-fit: cover;
}
.promise__eyebrow {
  margin-bottom: 14px;
  font-size: 20px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.promise__title {
  --lh: 0.92;
  font-family: var(--ff-font-display);
  font-size: calc(81.648 * var(--dpx));
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.promise__body {
  --lh: 1.3;
  max-width: 520px;
  margin-top: 22px;
  font-size: 28px;
}
.promise__btn { margin-top: 30px; }

/* ---------- Bundles ---------- */

.bundles { padding: 72px 0 99px; overflow-x: clip; }
.bundles__head { margin-bottom: 48px; }
.diamonds--bundles { --s: 17px; --g: 14px; --n: 11; margin-block: 18px; }
.bundles__title {
  font-size: calc(100 * var(--dpx));
  text-shadow: 3px 4px 8px #20201E42;
}
.bundles__sub {
  margin-top: 18px;
  font-size: 19.656px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Cards sit on a shared bottom edge and take their content's height, as in the
   frame; the Honest Pack is the tallest and sets the row. */
.bundles__grid {
  display: grid;
  grid-template-columns: 1fr 1.18fr 1fr;
  align-items: end;
  gap: 24px;
  max-width: var(--ff-container);
  margin-inline: auto;
  padding-inline: var(--ff-gutter);
}

.bundle {
  container-type: inline-size;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  padding: 40px 28px 28px;
  border: 1px solid var(--ff-text);
  text-align: center;
}
/* The frame fixes this card at 911px; its taller can art leaves the perks box
   about 20px from the bottom edge rather than 32. */
.bundle--honest {
  padding: 56px 32px 18.6px;
  background: var(--ff-light-grey);
  box-shadow: 10px 10px 0 var(--ff-text);
}

.bundle__badge {
  --lh: 1.2;
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 10;
  translate: -50% -50%;
  padding: 11px 34px;
  background: var(--ff-accent);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.bundle__top { position: relative; width: 100%; min-width: 0; }

/* Can renders. Sizes are in --u so the art scales with the card:
   --w is the card's inner width in the frame, --iw/--ih the image box. */
.bundle__art {
  --w: 367.47;
  --iw: 371;
  --ih: 370;
  --u: min(1px, calc(100cqw / var(--w)));
  display: flex;
  justify-content: center;
}
.bundle__shot {
  flex-shrink: 0;
  width: calc(var(--iw) * var(--u));
  height: calc(var(--ih) * var(--u));
  max-width: none;
  object-fit: cover;
}
.bundle--honest .bundle__art { --w: 436.06; --iw: 392; --ih: 490; margin-top: 18px; }
.bundle--friends .bundle__art { --iw: 338; --ih: 422; }
.bundle--friends .bundle__count { margin-top: 18px; }

.bundle__count {
  line-height: 16px;
  margin-bottom: 6px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.bundle__name {
  --lh: 0.95;
  margin-bottom: 14px;
  font-family: var(--ff-font-display);
  font-size: 30.24px;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}
.bundle__rating { width: 100%; min-height: 24px; margin-bottom: 8px; }
.bundle__rating .rating { margin-inline: auto; justify-content: center; }

.bundle__buy {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-grow: 1;
  width: 100%;
  min-width: 0;
}
.diamonds--bundle { --s: 9px; --g: 9px; --n: 9; margin-bottom: 18px; }
.bundle__price {
  --lh: 0.9;
  margin: 4px 0 10px;
  font-family: var(--ff-font-display);
  font-size: 40.824px;
  letter-spacing: -0.03em;
}
.bundle__tag {
  --lh: 1.35;
  min-height: 19.2px;
  margin-bottom: 22px;
  font-size: 16px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.bundle__btn { margin-top: auto; background: var(--ff-bg); }
.bundle__btn.btn--primary { background: var(--ff-accent); }
.bundle__btn:hover { background: var(--ff-text); }
.bundle__btn.btn--primary:hover { background: var(--ff-accent-hover); }
.bundle__perks {
  --lh: 1.3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  min-height: 49.4px;
  margin-top: 10px;
  padding: 8px 10px;
  background: var(--ff-light-grey);
  text-transform: uppercase;
}
.bundle--honest .bundle__perks { background: var(--ff-bg); }
.bundle__perks span { font-size: 13px; letter-spacing: 0.02em; }
.bundle__perks strong { font-size: 10px; letter-spacing: 0.1em; }

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

.science { padding: 64px 0 129px; background: var(--ff-muted); }
.science__inner {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  align-items: center;
  gap: 40px;
  max-width: var(--ff-container);
  margin-inline: auto;
  padding-inline: var(--ff-gutter);
}
.science__media img {
  width: calc(435 * var(--dpx));
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}
.science__title {
  --lh: 0.95;
  margin-bottom: 30px;
  font-family: var(--ff-font-display);
  font-size: calc(69.552 * var(--dpx));
  letter-spacing: -0.04em;
  text-shadow: 0.03em 0.04em 0.07em #20201E42;
  text-transform: uppercase;
}
.stats {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 18px;
  margin-bottom: 30px;
}
.stat {
  display: flex;
  flex-direction: column;
  padding-top: 12px;
  border-top: 2px solid var(--ff-text);
}
.stat dt {
  --lh: 1.2;
  min-height: 2.4em;
  margin-bottom: 8px;
  font-size: 19.656px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.stat dd {
  --lh: 0.82;
  font-family: var(--ff-font-display);
  font-size: calc(105.84 * var(--dpx));
  letter-spacing: -0.04em;
}

/* 001: the jester art fills the section behind the copy, full bleed, from 26px
   above its top edge (1497x842 in the frame; the fade on its right is
   transparency, so the grey shows through). The copy keeps its column and sits at
   the top of the grid; the taller bottom padding keeps the section at 648px. */
.science--bg { position: relative; isolation: isolate; padding-bottom: 185px; overflow: clip; }
.science--bg .science__copy { grid-column: 2; }
.science__bg {
  position: absolute;
  z-index: -1;
  left: 0;
  top: calc(-26 * var(--dpx));
  width: 100%;
  height: auto;
  max-width: none;
  pointer-events: none;
}

/* ---------- Reviews ---------- */

.reviews { padding: 72px 0 31px; }
.reviews__head { margin-bottom: 44px; }
.diamonds--reviews { --s: 11px; --g: 10px; --n: 18; margin-block: 18px; }
.reviews__title {
  font-size: calc(120 * var(--dpx));
  text-shadow: 0.03em 0.04em 0.08em #20201E42;
}

.reviews__grid {
  display: grid;
  grid-template-columns: 478fr 484fr 439fr;
  gap: 24px;
  max-width: var(--ff-container);
  margin-inline: auto;
  padding-inline: 24px;
}
.review {
  display: flex;
  flex-direction: column;
  gap: 15px;
  min-width: 0;
  padding: 30px 28px;
  border: 1px solid var(--ff-text);
  background: var(--ff-bg);
}
.review__photo { width: 100%; height: auto; object-fit: cover; }
.review--johnny .review__photo { aspect-ratio: 420 / 442; }
.review--laura .review__photo { aspect-ratio: 426 / 444; }
.review--craig .review__photo { aspect-ratio: 381 / 447; }
.review__stars {
  --lh: 1;
  margin-bottom: 18px;
  color: var(--ff-accent);
  font-size: 22px;
  letter-spacing: 2px;
}
.review__title {
  --lh: 1;
  margin: -5px 0 12px;
  font-family: var(--ff-font-display);
  font-size: 26px;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.review__quote {
  --lh: 1.4;
  margin: -5px 0 18px;
  font-size: 22px;
}
.review__author {
  margin-top: -5px;
  font-size: 14px;
  letter-spacing: 0.04em;
  opacity: .75;
  text-transform: uppercase;
}

/* 001 "Reviews Section (New LS)" and 002 "(New Studio)": square photos in three
   equal cards. Each frame sizes its photos a few px apart in ~402.67px cards,
   left-aligned. Their grids sit 22px from the left and 45px from the right; here
   the same card widths are centred. The shorter cards keep the section at 1058px
   with a taller bottom gap, so switching doesn't move the page below. */
.reviews--square .reviews__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1478px; }
/* --pw: the photo's width in the frame */
.reviews--square .review__photo { width: calc(100% * var(--pw, 402.67) / 402.67); aspect-ratio: 1; }

.reviews--ls { padding-bottom: 83px; }
.reviews--ls .review--laura { --pw: 395; }
.reviews--ls .review--craig { --pw: 391; }

.reviews--studio { padding-bottom: 90px; }
.reviews--studio .review--johnny { --pw: 401; }
.reviews--studio .review--laura { --pw: 388; }
.reviews--studio .review--craig { --pw: 391; }

/* ---------- Guarantee CTA ---------- */

.guarantee {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 552px;
  overflow: clip;
  background: var(--ff-text) url("assets/guarantee-bg.webp") 50% 30% / cover no-repeat;
}
.guarantee::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #1D1D1D6B;
}
.guarantee__inner {
  position: relative;
  max-width: 900px;
  padding: 32px 80px;
  text-align: center;
}
.guarantee__title {
  --lh: 0.92;
  color: var(--ff-bg);
  font-family: var(--ff-font-display);
  font-size: calc(75.6 * var(--dpx));
  letter-spacing: -0.04em;
  text-shadow: 0.035em 0.05em 0.09em #00000099, 0 2px 24px #0000008C;
  text-transform: uppercase;
}
.guarantee__btn { margin-top: 32px; padding-inline: 32px; letter-spacing: -0.04em; }

/* ---------- Footer ---------- */

.footer {
  padding: 64px 0 39px;
  background: var(--ff-text);
  color: var(--ff-bg);
}
.footer__top {
  display: grid;
  grid-template-columns: 1.6fr 0.9fr 0.9fr 1.6fr;
  gap: 48px;
  max-width: var(--ff-container);
  margin-inline: auto;
  padding: 0 var(--ff-gutter) 48px;
  border-bottom: 1px solid #F4F4F42E;
}
.footer__logo { display: inline-block; }
.footer__logo img { width: auto; height: 25px; }
.footer__social { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; }
.footer__social li { display: flex; }
.footer__social a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  opacity: .85;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: opacity .15s ease, color .15s ease;
}
.footer__social svg { width: 20px; height: 20px; flex-shrink: 0; }
.footer__links { display: flex; flex-direction: column; align-self: start; gap: 18px; }
.footer__links li { display: flex; }
.footer__links a {
  opacity: .9;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: opacity .15s ease, color .15s ease;
}
.footer__social a:hover, .footer__links a:hover, .footer__legal a:hover { opacity: 1; color: var(--ff-accent); }

.footer__signup-label {
  display: block;
  margin-bottom: 16px;
  color: var(--ff-accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.footer__signup-row { display: flex; width: 100%; }
.footer__signup input {
  --lh: 1.2858;
  flex: 1 1 0;
  min-width: 0;
  height: 60px;
  margin-bottom: 8px;
  padding: 12px 14px;
  border: 1px solid var(--ff-bg);
  background: transparent;
  font-size: 14px;
  letter-spacing: 0.04em;
}
.footer__signup input::placeholder {
  color: var(--ff-bg);
  opacity: .6;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.footer__signup input:focus-visible { outline-offset: -3px; }
.footer__signup button {
  flex-shrink: 0;
  height: 60px;
  padding-inline: 36px;
  border: 1px solid var(--ff-accent);
  background: var(--ff-accent);
  color: var(--ff-text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background-color .15s ease, border-color .15s ease;
}
.footer__signup button:hover { background: var(--ff-accent-hover); border-color: var(--ff-accent-hover); }

.footer__locale {
  max-width: var(--ff-container);
  margin-inline: auto;
  padding: 24px var(--ff-gutter) 0;
}
.footer__locale p {
  margin-bottom: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.footer__locale .locale { display: flex; width: fit-content; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: var(--ff-container);
  margin-inline: auto;
  padding: 28px var(--ff-gutter) 0;
  border-top: 1px solid #F4F4F433;
  opacity: .6;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 28px; }

/* ---------- Tablet and mobile (values from the 390px frame) ---------- */

@media (max-width: 960px) {
  :root { --ff-gutter: 20px; }

  .btn { min-height: 52px; }

  .section-head__eyebrow { --lh: 1.5; font-size: 16px; }
  .section-head__title span { display: block; }

  /* Nav */
  .nav {
    display: flex;
    justify-content: space-between;
    height: 62px;
    padding-block: 0;
  }
  .nav__logo img { height: 23px; }
  .nav__actions { gap: 8px; }
  .nav__locale { display: none; }
  .originals { justify-content: center; width: 38px; padding: 0; }
  .originals span { display: none; }
  .originals svg { width: 11px; height: 11px; }
  .nav__cart { height: 38px; padding: 0 12px; }
  .nav__toggle { display: inline-flex; }
  .nav__links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    justify-self: stretch;
    gap: 0;
    padding: 4px 20px 16px 35px;
    border-bottom: 1px solid var(--ff-text);
    background: var(--ff-bg);
  }
  .nav.is-open .nav__links { display: flex; }
  .nav__link { padding-block: 10px; }
  .nav__link::before { top: 15.25px; }

  /* Hero */
  .hero { padding: 20px 0 0; }
  .hero__inner { display: flex; flex-direction: column; gap: 20px; }
  .hero__copy { display: flex; flex-direction: column; gap: 16px; }
  .hero__title-wrap { font-size: 0; }
  .hero__title {
    --lh: 0.905;
    display: block;
    font-size: min(21.54vw, 105.84px);
  }
  .diamonds--hero { margin-block: 0; }
  .hero__lede { margin-bottom: 0; font-size: 20px; }
  .hero__rating { margin-bottom: 0; }
  .hero__cta { display: contents; }
  .hero__buttons { order: 5; flex-direction: column; align-items: stretch; width: 100%; }
  .hero__points {
    --lh: 1.3334;
    order: 6;
    flex-direction: column;
    align-items: flex-start;
    row-gap: 8px;
    margin-bottom: 0;
    padding-top: 4px;
    font-size: 15px;
  }
  .hero__points li::before {
    content: "";
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    background: var(--ff-accent);
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  }
  .hero__more { order: 7; align-self: flex-start; padding-top: 6px; }

  .hero__media {
    position: relative;
    align-self: stretch;
    height: min(112vw, 560px);
    margin-inline: -20px;
  }
  /* 000 keeps the original mobile frame's crop */
  .hero--original .hero__media { height: min(100.5vw, 560px); }
  .hero__shot {
    top: -14px;
    translate: -57.5% 0;
    width: min(113.33vw, 640px);
    aspect-ratio: 442 / 456;
  }
  /* No mobile frame for Round II: the can stays centred over the story, cropped
     by the section's bottom edge as on desktop */
  .hero .hero__micro {
    --lh: 1.2;
    left: 20px;
    top: 21%;
    bottom: auto;
    width: calc(100% - 40px);
    font-size: min(2.6vw, 12px);
  }
  .hero .hero__can { left: 50%; translate: -50% 0; }
  .hero--front .hero__can { top: 0; bottom: auto; width: min(52vw, 290px); }
  .hero--top .hero__micro { top: 24%; bottom: auto; }
  .hero--top .hero__can { bottom: -24px; width: min(68vw, 380px); }
  .hero--closeup .hero__micro { top: 24%; }
  .hero--closeup .hero__can { bottom: -40px; width: min(105vw, 560px); }

  /* Trust */
  .trust { padding-block: 36px; }
  .trust__list { grid-template-columns: 1fr 1fr; gap: 28px 16px; padding-inline: 20px; }
  .trust__item { --lh: 1.12; gap: 10px; font-size: 17px; }
  .trust__item img { width: 40px; height: 40px; }
  .trust__item span { max-width: 150px; }

  /* Promise */
  .promise { padding-block: 56px; }
  .promise__inner { display: flex; flex-direction: column; align-items: stretch; gap: 28px; }
  .promise__media { width: auto; }
  .promise__media img { width: 100%; aspect-ratio: 1; max-height: 520px; }
  .promise__eyebrow { font-size: 16px; }
  .promise__title { --lh: 0.93; font-size: min(10.77vw, 81.648px); }
  .promise__body { margin-top: 18px; font-size: 20px; }
  .promise__btn { display: flex; margin-top: 14px; }

  /* Bundles */
  .bundles { padding: 56px 0 64px; }
  .diamonds--bundles { --s: 11px; --g: 10px; margin-block: 14px; }
  .bundles__title { --lh: 0.904; font-size: min(15.9vw, 100px); text-shadow: 2px 3px 6px #20201E42; }
  .bundles__sub { --lh: 1.4667; max-width: 260px; margin: 14px auto 0; font-size: 15px; }
  .bundles__grid { grid-template-columns: minmax(0, 480px); justify-content: center; gap: 44px; }
  .bundle { padding: 36px 24px 24px; }
  .bundle--honest, .bundle--friends { padding-top: 52px; }
  .bundle--honest { box-shadow: 8px 8px 0 var(--ff-text); }
  .bundle__badge { padding-inline: 30px; }
  .bundle__count { font-size: 16px; }
  .bundle__perks { min-height: 50px; }
  .bundle__perks strong { font-size: 11px; }

  /* Science */
  .science { padding-block: 56px; }
  .science__inner { display: flex; flex-direction: column; align-items: stretch; gap: 32px; }
  .science__copy { display: contents; }
  .science__title { --lh: 0.943; order: 1; margin-bottom: 0; font-size: min(13.33vw, 69.552px); }
  .science__media { order: 2; }
  .science__media { width: auto; }
  .science__media img { width: 100%; max-height: 520px; }
  .stats { order: 3; grid-auto-flow: row; gap: 0; margin-bottom: 0; }
  .stat { padding-bottom: 16px; }
  .stat:last-child { padding-bottom: 0; }
  .stat dt { --lh: 1.215; min-height: 0; font-size: 14px; }
  .stat dd { --lh: 0.8125; font-size: 64px; }
  .science__btn { order: 4; }
  /* 001 on a phone: the jester sits under the copy rather than behind the title */
  .science--bg { padding-bottom: 0; }
  .science__bg {
    position: static;
    z-index: auto;
    aspect-ratio: 1;
    margin-top: 32px;
    object-fit: cover;
    object-position: 0 50%;
  }

  /* Reviews */
  .reviews { padding: 56px 0 64px; }
  .reviews__head { margin-bottom: 36px; }
  .diamonds--reviews { --n: 11; margin-block: 14px; }
  .reviews__title { --lh: 0.881; font-size: min(21.54vw, 120px); }
  .reviews__grid { grid-template-columns: minmax(0, 480px); justify-content: center; gap: 16px; padding-inline: 20px; }
  .review { gap: 20px; padding: 26px 24px; }
  .review__stars { margin-bottom: 16px; font-size: 20px; }
  .review__title { margin: 0 0 10px; }
  .review__quote { --lh: 1.3685; margin: 0 0 16px; font-size: 19px; }
  .review__author { margin-top: 0; }
  .reviews--square .reviews__grid { grid-template-columns: minmax(0, 480px); }
  .reviews--square .review__photo { width: 100%; }

  /* Why-this-version modal stacks: the copy, then the brand book pages */
  .vnote.has-ref .vnote__body { grid-template-columns: minmax(0, 1fr); }
  .vnote__copy { padding: 56px 24px 28px; }
  .vnote__refs { gap: 32px; padding: 0 24px 32px; }
  .vnote__title { font-size: 40px; }
  .vnote__lead { font-size: 20px; }
  .vnote__text { font-size: 16px; }

  /* Guarantee */
  .guarantee { height: 480px; }
  .guarantee__inner { padding: 32px 20px; }
  .guarantee__title { font-size: min(12.82vw, 75.6px); }
  .guarantee__btn { margin-top: 28px; }

  /* Footer */
  .footer { padding: 48px 0 24px; }
  .footer__top {
    grid-template-columns: 1fr 1fr;
    gap: 36px 24px;
    margin-inline: 20px;
    padding: 0 0 36px;
  }
  .footer__brand, .footer__signup { grid-column: 1 / -1; }
  .footer__social { flex-direction: row; gap: 24px; margin-top: 20px; }
  .footer__links { gap: 16px; }
  .footer__signup-label { margin-bottom: 14px; }
  .footer__signup input { height: 56px; margin-bottom: 0; }
  .footer__signup button { height: 56px; padding-inline: 26px; }
  .footer__locale { padding-bottom: 24px; }
  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-inline: 20px;
    padding: 24px 0 0;
  }
  .footer__legal { order: -1; gap: 8px 22px; }
}

/* ---------- Cart panel ---------- */

html:has(.cart[open]) { overflow: hidden; }
.cart {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(420px, 100%);
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--ff-text);
  background: var(--ff-bg);
  color: var(--ff-text);
}
.cart[open] { display: flex; flex-direction: column; animation: cart-in .25s ease; }
.cart::backdrop { background: #20201E66; }
@keyframes cart-in { from { translate: 100% 0; } }
.cart__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  height: 70px;
  padding-inline: 24px;
  border-bottom: 1px solid var(--ff-text);
}
.cart__title {
  --lh: 1;
  font-family: var(--ff-font-display);
  font-size: 30px;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}
.cart__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--ff-text);
  transition: background-color .15s ease, color .15s ease;
}
.cart__close:hover { background: var(--ff-text); color: var(--ff-bg); }
.cart__body { display: flex; flex-direction: column; gap: 20px; padding: 32px 24px; }
.cart__empty { --lh: 1.3; font-size: 22px; text-transform: uppercase; }
.cart__note {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ======================================================================
   Shared CTA banner extras (Science page "Mercy for the reckless")
   ====================================================================== */

.guarantee--reckless { background-image: url("assets/science-cta-bg.webp"); }
.guarantee__eyebrow {
  margin-bottom: 16px;
  color: var(--ff-bg);
  font-size: 20.412px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.diamonds--cta { --s: 16px; --g: 14px; --n: 11; margin-bottom: 20px; }

.btn--grey { background: var(--ff-light-grey); }

/* ======================================================================
   Science page
   ====================================================================== */

.sci-hero { padding: 56px 0 32px; overflow: clip; }
.sci-hero__inner {
  max-width: var(--ff-container);
  margin-inline: auto;
  padding-inline: var(--ff-gutter);
  text-align: center;
}
.sci-hero__title {
  --lh: 0.9;
  color: var(--ff-light-grey);
  font-family: var(--ff-font-display);
  font-size: calc(150 * var(--dpx));
  letter-spacing: -0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.diamonds--sci { --s: 17px; --g: 14px; --n: 11; margin-top: 22px; }
.diamonds--sci-rule { margin-top: 0; }
.sci-hero__lede {
  --lh: 1.25;
  max-width: 760px;
  margin: 30px auto 0;
  font-size: 32px;
  text-transform: uppercase;
}

.sci-body { padding: 64px 0 58px; background: var(--ff-muted); }
.sci-body__intro {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  align-items: center;
  gap: 40px;
  max-width: var(--ff-container);
  margin-inline: auto;
  padding-inline: var(--ff-gutter);
}
.sci-body__can {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: calc(523 * var(--dpx));
  height: calc(499 * var(--dpx));
}
.sci-body__can img {
  flex-shrink: 0;
  width: calc(405.82 * var(--dpx));
  height: calc(509.44 * var(--dpx));
  max-width: none;
  object-fit: cover;
  rotate: 24.85deg;
}
.sci-body__intro .stats { margin-bottom: 30px; }
.sci-body__lede {
  --lh: 1.35;
  max-width: 1404px;
  margin: 40px auto 0;
  padding-inline: var(--ff-gutter);
  font-size: 24px;
  letter-spacing: 0.01em;
}
.sci-body__rule { padding-top: 8px; }

.benefits {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: var(--ff-container);
  margin: 28px auto 0;
  padding-inline: var(--ff-gutter);
}
.benefit {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: clip;
  background: #FFFFFF;
}
.benefit__media { aspect-ratio: 1; overflow: clip; background: var(--ff-accent); }
.benefit__media img { width: 100%; height: 100%; object-fit: cover; }
.benefit__body {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-height: 150px;
  padding: 22px 24px 24px;
}
.benefit__title {
  --lh: 1;
  margin-bottom: 10px;
  font-family: var(--ff-font-display);
  font-size: 30px;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}
.benefit__desc {
  --lh: 1.25;
  max-width: 74%;
  margin-bottom: 14px;
  font-size: 19.656px;
  letter-spacing: 0.01em;
}
.benefit__label {
  margin-bottom: 6px;
  opacity: .55;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.benefit__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.benefit__tags li {
  --lh: 1;
  padding: 5px 9px;
  border: 1px solid #20201E38;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.benefit__more {
  position: absolute;
  right: 24px;
  bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--ff-muted);
  transition: background-color .15s ease;
}
.benefit__more svg { width: 16px; height: 16px; }
.benefit__more:hover { background: var(--ff-accent); }

/* ======================================================================
   Fellowship page
   ====================================================================== */

.fs-hero { padding: 28px 0 42px; overflow: clip; }
.fs-hero__inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 8px;
  max-width: var(--ff-container);
  margin-inline: auto;
  padding-inline: var(--ff-gutter);
}
.fs-hero__copy { min-width: 0; }
.fs-hero__title {
  --lh: 0.92;
  font-family: var(--ff-font-display);
  font-size: calc(104 * var(--dpx));
  letter-spacing: -0.04em;
  text-transform: uppercase;
}
.diamonds--tall { --s: 17px; --h: 24px; --g: 14px; --n: 17; --tile: var(--diamond-tall); }
.fs-hero .diamonds--tall { margin: 16px 0 14px; }
.fs-hero__lede {
  --lh: 1.25;
  max-width: 355.723px;
  margin-bottom: 18px;
  font-size: 26px;
  font-weight: 700;
  text-transform: uppercase;
}
.fs-hero__flag {
  --lh: 1.25;
  width: fit-content;
  max-width: 310.117px;
  margin-bottom: 26px;
  padding: 11px 18px;
  background: var(--ff-accent);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.fs-hero__buttons { display: flex; flex-wrap: wrap; gap: 14px; }
.fs-hero__buttons .btn { padding-inline: 32px; letter-spacing: -0.04em; }
.fs-hero__note {
  margin-top: 22px;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.fs-hero__note a:hover { text-decoration: underline; text-underline-offset: 3px; }
.fs-hero__media { display: flex; align-items: flex-end; justify-content: center; }
.fs-hero__media img {
  flex-shrink: 0;
  width: calc(549 * var(--dpx));
  height: auto;
  aspect-ratio: 1;
  max-width: none;
  object-fit: cover;
  rotate: 15deg;
}

/* 001, "Hero #2": two jesters, untilted, over the micrographic story, at the
   frame's positions in the media column */
.fs-hero--jesters .fs-hero__media { position: relative; }
.fs-hero--jesters .fs-hero__media img { position: relative; width: calc(617 * var(--dpx)); rotate: none; }
.fs-hero__micro {
  left: calc(54.68 * var(--dpx));
  top: calc(162 * var(--dpx));
  width: calc(552 * var(--dpx));
}

/* 002, "Hero #3": a close-up can over the story. Both sit on .fs-hero__inner
   (the frame's 548px media column is centred in its 673px row). Bottoms are
   min(frame position, the can's cut-off end 1px past the hero's bottom edge, 42px
   under the inner): equal at 1497, and narrower the can and its story move down
   together instead of the cut showing. */
.fs-hero--closeup .fs-hero__inner { position: relative; }
.fs-hero--closeup .fs-hero__media { position: static; }
.fs-hero--closeup .fs-hero__micro {
  left: calc(842 * var(--dpx));
  top: auto;
  bottom: min(100% - 496.5 * var(--dpx), -43px + 219.5 * var(--dpx));
}
.fs-hero--closeup .fs-hero__can {
  position: absolute;
  left: calc(787 * var(--dpx));
  bottom: min(100% - 716 * var(--dpx), -43px);
  width: calc(662 * var(--dpx));
  rotate: none;
}

.manifesto {
  position: relative;
  overflow: clip;
  padding: 110px var(--ff-gutter) 51px;
  background: var(--ff-text);
  color: var(--ff-bg);
}
.manifesto__bg {
  position: absolute;
  left: -17px;
  top: -13px;
  width: calc(100% + 17px);
  height: calc(100% + 106px);
  max-width: none;
  object-fit: cover;
  opacity: .75;
}
.manifesto__inner {
  position: relative;
  max-width: 1404px;
  margin-inline: auto;
  --manifesto-size: max(24px, calc(36.288 * var(--dpx)));
  font-size: var(--manifesto-size);
  font-weight: 700;
  text-transform: uppercase;
}
.manifesto__inner p, .manifesto__inner li { --lh: 1.25; }
.manifesto__lead { margin-bottom: calc(49.896 * var(--dpx)); letter-spacing: 0.01em; }
.manifesto__turn {
  position: relative;
  max-width: calc(446.795 * var(--dpx));
  margin: calc(75.6 * var(--dpx)) 0 0 32%;
}
.manifesto__arrow {
  position: absolute;
  left: calc(-120.96 * var(--dpx));
  bottom: calc(7.2576 * var(--dpx));
  width: calc(69.552 * var(--dpx));
  height: auto;
}
.manifesto__close {
  max-width: calc(413.699 * var(--dpx));
  margin: calc(75.6 * var(--dpx)) 0 0 60%;
}

.steps {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 96px var(--ff-gutter) 91px;
  text-align: center;
}
.steps__eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.steps .diamonds--tall { --n: 15; margin: 16px auto 14px; }
.steps__title {
  --lh: 0.95;
  margin-bottom: 48px;
  font-family: var(--ff-font-display);
  font-size: calc(84 * var(--dpx));
  letter-spacing: -0.04em;
  text-transform: uppercase;
}
.steps__grid {
  display: grid;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  width: 100%;
  max-width: 1166px;
  margin-block: 18px;
}
.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  padding: 40px 44px 42px;
  border: 1px solid var(--ff-text);
  border-radius: 10px;
}
.step__num {
  --lh: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  margin-bottom: 24px;
  border-radius: 50%;
  background: var(--ff-accent);
  font-size: 16px;
  font-weight: 700;
}
.step__title {
  --lh: 1;
  margin-bottom: 18px;
  font-family: var(--ff-font-display);
  font-size: 28px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.step__body { --lh: 1.5; font-size: 15px; }

.faq { padding-block: 48px; background: var(--ff-muted); scroll-margin-top: 24px; }
.faq__inner { max-width: 920px; margin-inline: auto; padding-inline: var(--ff-gutter); }
.faq__title {
  --lh: 1;
  margin-bottom: 8px;
  font-family: var(--ff-font-display);
  font-size: 46px;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.faq__item { border-top: 1px solid var(--ff-text); }
.faq__item:last-of-type { border-bottom: 1px solid var(--ff-text); }
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 24px;
  list-style: none;
  cursor: pointer;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item[open] summary { padding-bottom: 14px; }
.faq__q {
  --lh: 1.15;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.faq__icon {
  --lh: 1;
  flex-shrink: 0;
  font-size: 26px;
  font-weight: 700;
  transition: rotate .2s ease;
}
.faq__item[open] .faq__icon { rotate: 45deg; }
.faq__a { max-width: 467px; padding-bottom: 26px; opacity: .85; }
.faq__a p { --lh: 1.6; margin-block: 16px; font-size: 16px; }
.faq__a--todo p { font-style: italic; }
.faq__cta { margin-top: 36px; padding-inline: 32px; letter-spacing: -0.04em; }

.last-drink {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: center;
  gap: 56px;
  max-width: var(--ff-container);
  margin-inline: auto;
  padding: 105.84px var(--ff-gutter) 1.16px;
}
.last-drink__media { display: flex; justify-content: center; }
.last-drink__media img {
  flex-shrink: 0;
  width: calc(625 * var(--dpx));
  height: auto;
  aspect-ratio: 1;
  max-width: none;
  object-fit: cover;
}
.last-drink__eyebrow {
  margin-bottom: 18px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.last-drink__title {
  --lh: 0.94;
  margin-bottom: 22px;
  font-family: var(--ff-font-display);
  font-size: calc(76 * var(--dpx));
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.last-drink__body { --lh: 1.4; max-width: 521.727px; font-size: 22px; }

/* ---------- New pages: tablet and mobile ---------- */

@media (max-width: 960px) {
  .guarantee__eyebrow { font-size: 16px; }
  .diamonds--cta { --s: 12px; --g: 10px; margin-bottom: 16px; }

  /* Science */
  .sci-hero { padding: 40px 0 32px; }
  .sci-hero__title { font-size: min(16.5vw, 150px); }
  .diamonds--sci { --s: 11px; --g: 10px; margin-top: 16px; }
  .sci-hero__lede { --lh: 1.3; margin-top: 22px; font-size: 20px; }

  .sci-body { padding-block: 56px; }
  .sci-body__intro { display: flex; flex-direction: column; align-items: stretch; gap: 32px; }
  .sci-body__can {
    --dpx: calc(min(100vw, 600px) / 640);
    align-self: center;
  }
  .sci-body__intro .science__title { margin-bottom: 0; font-size: min(13.33vw, 69.552px); }
  .sci-body__intro .stats { grid-auto-flow: row; gap: 0; margin: 24px 0 0; }
  .sci-body__lede { margin-top: 48px; font-size: 20px; }
  .diamonds--sci-rule { --s: 11px; --g: 10px; }
  .benefits { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }

  /* Fellowship */
  .fs-hero { padding: 20px 0 32px; }
  .fs-hero__inner { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
  .fs-hero__title { --lh: 0.95; font-size: min(13.3vw, 104px); }
  .diamonds--tall { --s: 12px; --h: 17px; --g: 10px; --n: 11; --tile: var(--diamond-tall-sm); }
  .fs-hero__lede { max-width: none; font-size: 20px; }
  .fs-hero__flag { max-width: none; font-size: 17px; }
  .fs-hero__buttons { flex-direction: column; }
  .fs-hero__media img { width: min(80vw, 549px); margin-top: 24px; }
  .fs-hero--jesters .fs-hero__media img { width: min(92vw, 617px); }
  .fs-hero__micro { --lh: 1.2; left: 0; top: 30%; width: 100%; font-size: min(2.6vw, 12px); }
  .fs-hero--closeup { padding-bottom: 0; }
  .fs-hero--closeup .fs-hero__media { position: relative; height: min(100vw, 520px); margin-top: 24px; }
  .fs-hero--closeup .fs-hero__micro { left: 0; top: 26%; bottom: auto; }
  .fs-hero--closeup .fs-hero__can { left: 50%; bottom: -40px; translate: -50% 0; width: min(105vw, 560px); margin-top: 0; }

  .manifesto { padding: 72px 20px; }
  .manifesto__bg { left: 0; top: 0; width: 100%; height: 100%; }
  .manifesto__inner { --manifesto-size: 24px; }
  .manifesto__lead { margin-bottom: 28px; }
  .manifesto__turn { max-width: none; margin: 48px 0 0 56px; }
  .manifesto__arrow { left: -56px; bottom: 4px; width: 44px; }
  .manifesto__close { max-width: none; margin: 48px 0 0 30%; }

  .steps { padding: 56px 20px; }
  .steps .diamonds--tall { --n: 11; }
  .steps__title { margin-bottom: 32px; font-size: min(13vw, 84px); }
  .steps__grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-block: 0; }
  .step { padding: 32px 28px; }

  .faq { padding-block: 56px; }
  .faq__inner { padding-inline: 20px; }
  .faq__title { font-size: 36px; }
  .faq__q { font-size: 17px; }

  .last-drink { display: flex; flex-direction: column; gap: 28px; padding: 56px 20px; }
  .last-drink__media img { width: min(90vw, 625px); }
  .last-drink__title { font-size: min(13vw, 76px); }
  .last-drink__body { font-size: 19px; }
}