/* Thblet website. Visual system: ../../../DESIGN.md. Hand-written, no framework. */

/* ------------------------------------------------------------------ fonts (OFL, self-hosted) */
@font-face { font-family: "Poppins"; src: url("../fonts/poppins-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/poppins-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/poppins-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/poppins-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/poppins-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Anton"; src: url("../fonts/anton-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

/* ------------------------------------------------------------------ tokens */
:root {
  --canvas: #FFFFFF;
  --mist: #F4F5F6;
  --line: #E3E5E8;
  --field-border: #80858B;
  --ink: #231F20;
  --ink-70: #55504F;
  --ink-55: #6E6968;

  --pain-dark: #941631;  --pain: #E3195A;  --pain-tint: #FAB6DD;  --pain-soft: #FCE6F1;
  --sleep-dark: #1D7773; --sleep: #62C9A8; --sleep-tint: #C2EADD; --sleep-soft: #E9F6F1;
  --calm-dark: #5A2373;  --calm: #B170BF;  --calm-tint: #E2CBE6;  --calm-soft: #F4ECF6;

  --day: #F8A00E;   --day-soft: #FEF1DA;
  --night: #458EC2; --night-soft: #DCEAF5; --night-ink: #0F2F47;
  --error: #B42318;

  /* One accent family per page. Neutral pages use ink. */
  --accent-dark: var(--ink);
  --accent: var(--ink);
  --accent-tint: #D9DCE0;
  --accent-soft: var(--mist);

  --radius-panel: 24px;
  --radius-tile: 14px;
  --pill: 999px;
  --container: 1320px;
  --gutter: 24px;
  --header-h: 72px;
  --section-y: clamp(4rem, 8vw, 7rem);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* Layers: header 50, mobile sheet 45, skip link 60. */
}

.theme-pain  { --accent-dark: var(--pain-dark);  --accent: var(--pain);  --accent-tint: var(--pain-tint);  --accent-soft: var(--pain-soft); }
.theme-sleep { --accent-dark: var(--sleep-dark); --accent: var(--sleep); --accent-tint: var(--sleep-tint); --accent-soft: var(--sleep-soft); }
.theme-calm  { --accent-dark: var(--calm-dark);  --accent: var(--calm);  --accent-tint: var(--calm-tint);  --accent-soft: var(--calm-soft); }

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
h1 { font-size: clamp(2.25rem, 4.6vw, 3.75rem); line-height: 1.08; }
h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.15; }
h3 { font-size: 1.25rem; line-height: 1.3; }
p { margin: 0; }
p + p { margin-top: 1em; }
ul, ol { margin: 0; padding: 0; }
a { color: var(--accent-dark); text-decoration-thickness: 1px; text-underline-offset: 4px; }
button { font: inherit; }
::selection { background: var(--accent-tint); color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent-dark); outline-offset: 3px; }
.trade-panel :focus-visible, .label-indications :focus-visible, .indications-panel :focus-visible { outline-color: #fff; }
a, button, summary { -webkit-tap-highlight-color: transparent; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -120px; z-index: 60; background: var(--ink); color: #fff; padding: 12px 20px; border-radius: var(--pill); text-decoration: none; font-weight: 600; }
.skip:focus { top: 12px; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
@media (max-width: 1023px) { :root { --gutter: 32px; --section-y: clamp(2.75rem, 7vw, 3.5rem); } }   /* tighter section top and bottom on phones and tablets (Shaun, 15 Sep 2026) */
@media (max-width: 1023px) { .home-hero { padding-bottom: var(--section-y); } }
@media (max-width: 639px) { :root { --gutter: 24px; } }   /* more side room on phones and tablets (Shaun, 14 Sep 2026); desktop keeps 24px */
.section { padding-block: var(--section-y); }
.section-head { display: grid; gap: 14px; }
.section-head .lead { max-width: none; }
.lead { font-size: clamp(1.0625rem, 1.4vw, 1.1875rem); line-height: 1.6; color: var(--ink-70); max-width: 54ch; }
.muted { color: var(--ink-70); }
.small { font-size: 0.9375rem; }
.num { font-variant-numeric: tabular-nums; }
.icon { width: 1.25em; height: 1.25em; flex: none; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ------------------------------------------------------------------ buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 48px; padding: 0 1.5rem;
  border-radius: var(--pill); border: 1.5px solid transparent;
  font: 600 1rem/1 "Poppins", system-ui, sans-serif;
  text-decoration: none; white-space: nowrap; cursor: pointer; touch-action: manipulation;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: color-mix(in srgb, var(--ink) 80%, #fff); }
.btn-secondary { background: transparent; color: var(--accent-dark); border-color: var(--accent-dark); }
.btn-secondary:hover { background: var(--accent-soft); }
.btn-light { background: #fff; color: var(--ink); }
/* Home hero "Explore the Ranges": the three range colours in tablet order (Shaun, 14 Sep 2026). Dark shades keep white text readable. */
.home-hero .btn-secondary { background: linear-gradient(90deg, var(--pain-dark), var(--calm-dark), var(--sleep-dark)) border-box; color: #fff; border-color: transparent; }
.home-hero .btn-secondary:hover { background: linear-gradient(90deg, var(--pain-dark), var(--calm-dark), var(--sleep-dark)); filter: brightness(1.12); }
.btn-light:hover { background: var(--accent-soft); }
.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.6; cursor: progress; }

/* ------------------------------------------------------------------ header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: #fff; /* solid: nothing behind (hero molecule art) may show through */
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 24px; height: var(--header-h); }
.brand { display: inline-flex; flex: none; padding: 6px 0; }
.brand img { height: 30px; width: auto; }
.primary-nav { margin-left: auto; margin-right: -16px; }   /* header gap 24px - 16px = the 8px gap between nav pills */
.header-cta { min-height: 44px; padding: 0 16px; font-size: 0.9375rem; border: 0; }
.header-cta[aria-current="page"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ink); }
.nav-list { display: flex; gap: 8px; list-style: none; }
.nav-list a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border-radius: var(--pill); color: var(--ink); text-decoration: none; font-weight: 500; font-size: 0.9375rem;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.nav-list a:hover { background: var(--mist); }
.nav-list a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-dark); }
.nav-list a.nav-pain, .mobile-nav-list a.nav-pain { --nav-dark: var(--pain-dark); }
.nav-list a.nav-sleep, .mobile-nav-list a.nav-sleep { --nav-dark: var(--sleep-dark); }
.nav-list a.nav-calm, .mobile-nav-list a.nav-calm { --nav-dark: var(--calm-dark); }
.nav-list a[class^="nav-"] { background: var(--nav-dark); color: #fff; font-weight: 600; }
.nav-list a[class^="nav-"]:hover { background: color-mix(in srgb, var(--nav-dark) 82%, #000); color: #fff; }
.nav-list a[class^="nav-"][aria-current="page"] { background: var(--nav-dark); color: #fff; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--nav-dark); }
.nav-toggle {
  display: none; margin-left: auto; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  align-items: center; justify-content: center; cursor: pointer; touch-action: manipulation;
}
.nav-toggle .icon { width: 24px; height: 24px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

.mobile-nav {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 45;
  background: #fff; overflow-y: auto; overscroll-behavior: contain;
  padding: 16px var(--gutter) calc(88px + env(safe-area-inset-bottom));   /* breathing room under the small print */
  display: flex; flex-direction: column; gap: 28px;
}
.mobile-nav[hidden] { display: none; }
/* Secondary links and the legal line at the foot of the mobile menu (Shaun, 14 Sep 2026). */
.mobile-nav-heading { margin: 0 0 4px; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-55); }
.mobile-nav-more ul { list-style: none; }
.mobile-nav-more a {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 52px;
  border-bottom: 1px solid var(--line); color: var(--ink); font-weight: 500; font-size: 1.0625rem; text-decoration: none;
}
.mobile-nav-more li:first-child a { border-top: 1px solid var(--line); }
.mobile-nav-more .icon { width: 18px; height: 18px; color: var(--ink-55); }
.mobile-nav-more a:hover .icon { color: var(--ink); }
.mobile-nav-legal { margin-top: auto; padding-top: 4px; display: grid; gap: 8px; font-size: 0.75rem; line-height: 1.6; color: var(--ink-70); }   /* same notice as the footer */
.mobile-nav-list { list-style: none; }
.mobile-nav-list a {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 0; border-bottom: 1px solid var(--line);
  font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); text-decoration: none;
}
.mobile-nav-list a[aria-current="page"] { color: var(--accent-dark); }
.mobile-nav-list a[class^="nav-"], .mobile-nav-list a[class^="nav-"] .icon { color: var(--nav-dark); }
.mobile-nav-list .icon { width: 22px; height: 22px; color: var(--ink-55); }
body.nav-open { overflow: hidden; }

@media (max-width: 1023px) {
  .primary-nav, .header-cta { display: none; }
  .nav-toggle { display: inline-flex; }
}
@media (min-width: 1024px) { .mobile-nav { display: none !important; } }

/* ------------------------------------------------------------------ shared bits */
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin-bottom: 28px; font-size: 0.875rem; color: var(--ink-70); }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--ink-55); }
.crumbs a { color: var(--ink-70); text-decoration: none; }
.crumbs a:hover { color: var(--accent-dark); text-decoration: underline; }

.range-tag {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px;
  color: var(--accent-dark); font-weight: 500; font-size: 0.9375rem; text-decoration: none;
}
.range-tag:hover { text-decoration: underline; }
.range-tag .icon { width: 20px; height: 20px; }

.use-tag {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 16px 0 11px;
  border-radius: var(--pill); font-weight: 600; font-size: 0.875rem; letter-spacing: 0.02em; white-space: nowrap;
}
.use-tag .icon { width: 18px; height: 18px; }
.use-day { background: var(--day); color: #fff; }
.use-night { background: var(--night); color: #fff; } /* pack NIGHT blue, colour-picked from the cartons */
/* Day/Night tags and panel headings use the pack artwork (sun, moon, DAY/NIGHT lettering as SVG in currentColor). */
.use-tag .pack-icon { height: 17px; width: auto; flex: none; }
.use-tag .pack-word { height: 12px; width: auto; flex: none; }
.dn-panel h3 .pack-word { display: block; height: clamp(22px, 2.2vw, 30px); width: auto; }

.doses { display: inline-flex; gap: 8px; }
.dose {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 92px; padding: 8px 14px; border-radius: var(--radius-tile);
  background: var(--accent-soft); border: 1px solid var(--accent-tint);
}
.dose-value { font-family: "Anton", Impact, "Arial Narrow", sans-serif; font-size: 1.625rem; line-height: 1.1; letter-spacing: 0.01em; color: var(--accent-dark); font-variant-numeric: tabular-nums; }
.dose-label { font-size: 0.75rem; font-weight: 500; color: var(--ink-70); }
.chip-dose { font-family: "Anton", Impact, sans-serif; font-weight: 400; letter-spacing: 0.02em; color: var(--ink-70); font-size: 0.9375rem; }

.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.swatch.is-pain { background: var(--pain); }
.swatch.is-sleep { background: var(--sleep); }
.swatch.is-calm { background: var(--calm); }

/* ------------------------------------------------------------------ home: hero */
/* Home hero (Shaun, 14 Sep 2026): the tablet film on the right, its grey matched to the whole section so it reads as
   one background, not a box. While the three tablets hold apart, site.js adds .is-split and the range callouts (name,
   carton wording, pointer, pack shot) fade in above and below each tablet. --x is the tablet's centre in the crop. */
.home-hero {
  padding-block: clamp(2rem, 5vw, 4.5rem) clamp(3rem, 6vw, 5rem); overflow: hidden;
  background: radial-gradient(38% 70% at 70% 48%, #EFF0F2 0%, #E9ECED 45%, #DDE1E2 100%);
}
/* Stacked hero trial (Shaun, 14 Sep 2026): heading, then the film at full width, then the lead and buttons. */
.home-hero-stack { display: grid; justify-items: center; text-align: center; }
.home-hero h1 { font-size: clamp(2.125rem, 4vw, 3.25rem); max-width: 24ch; }
.home-hero-foot { display: grid; justify-items: center; gap: 22px; }
.home-hero .lead { margin: 0 auto; max-width: 60ch; }
.home-hero .actions { margin: 0; justify-content: center; }
.hero-visual { position: relative; aspect-ratio: 16 / 9; width: min(100%, 900px); margin-block: clamp(0.5rem, 2vw, 1.5rem); container-type: inline-size; }
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none;
  transform: translateX(-1%);   /* tablets drift ~20px during the hold; this centres the row on average (TV-measured) */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent), linear-gradient(transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent), linear-gradient(transparent, #000 12%, #000 88%, transparent);
  mask-composite: intersect;
}
.hero-callouts { position: absolute; inset: 0; }
.callout {
  position: absolute; left: var(--x); top: 0; bottom: 0; width: 26cqi; margin-left: -13cqi;
  display: grid; grid-template-rows: 1fr auto; justify-items: center; text-decoration: none; color: var(--ink);
  pointer-events: none;
}
.callout > * { opacity: 0; transition: opacity 0.45s ease, transform 0.55s var(--ease); transition-delay: calc(var(--i) * 0.12s); }
.callout-label { position: absolute; bottom: calc(100% - var(--label-bottom, 15%)); display: grid; justify-items: center; gap: 4px; text-align: center; transform: translateY(8px); }
.callout-name { padding: 5px 14px; border-radius: var(--pill); color: #fff; font-weight: 600; font-size: clamp(0.8125rem, 2.3cqi, 1rem); letter-spacing: 0.02em; white-space: nowrap; }
.callout-line { font-size: clamp(0.75rem, 2cqi, 0.9375rem); font-weight: 500; color: var(--ink); white-space: nowrap; }
.callout.is-pain .callout-name { background: var(--pain-dark); }
.callout.is-calm .callout-name { background: var(--calm-dark); }
.callout.is-sleep .callout-name { background: var(--sleep-dark); }
.callout-pointer { position: absolute; top: calc(var(--label-bottom, 15%) + 6px); bottom: var(--tablet-top-from-bottom, 78%); width: 1.5px; background: currentColor; opacity: 0; transform: scaleY(0); transform-origin: top; }
.callout-pack { position: absolute; top: 67%; width: 88%; height: auto; transform: translateY(-8px); filter: drop-shadow(0 12px 16px rgb(35 31 32 / 0.18)); }
.is-split .callout { pointer-events: auto; }
.is-split .callout > * { opacity: 1; transform: none; }
.is-split .callout-pointer { opacity: 0.45; transform: scaleY(1); }
.callout:focus-visible > * { opacity: 1; transform: none; }
.callout:hover .callout-name { filter: brightness(1.12); }
.is-still .callout > * { transition: none; }
/* Narrow stage (phones): names and pack shots only, the carton wording would collide. */
@container (max-width: 520px) { .callout-line { display: none; } .callout-name { padding: 3px 10px; } }

/* ------------------------------------------------------------------ home: range showcase (the one gradient moment) */
.showcase { background: var(--mist); }
.gradient-rule { display: block; width: 120px; height: 6px; margin-bottom: 20px; border-radius: var(--pill); background: linear-gradient(90deg, var(--pain), var(--calm), var(--sleep)); }
.bento { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px; margin-top: 44px; }
.bento-cell {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 20px;
  padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: var(--radius-panel);
  color: #fff; text-decoration: none;
}
.bento-cell.is-pain { grid-row: span 2; background: var(--pain-dark); }
.bento-cell.is-sleep { background: var(--sleep-dark); }
.bento-cell.is-calm { background: var(--calm-dark); }
.bento-copy { display: grid; gap: 10px; max-width: 34ch; }
.bento-copy h3 { display: flex; align-items: center; gap: 10px; color: #fff; font-size: clamp(1.5rem, 2.4vw, 2rem); }
.bento-copy h3 .icon { width: 28px; height: 28px; }
.bento-copy p { color: #fff; }
.bento-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.bento-link .icon { width: 20px; height: 20px; transition: transform 0.3s var(--ease); }
.bento-cell:hover .bento-link .icon { transform: translateX(4px); }
/* Packs sit in their own row, so they can never cover the copy or the link. */
.bento-packs { position: relative; min-height: 200px; pointer-events: none; }
.bento-pack { position: absolute; filter: drop-shadow(0 24px 30px rgb(0 0 0 / 0.28)); transition: transform 0.4s var(--ease); }
.bento-cell.is-pain .bento-pack { width: 70%; }
.bento-cell.is-pain .bp-0 { left: 0; top: 0; }
.bento-cell.is-pain .bp-1 { left: 30%; top: 28%; }
.bento-cell.is-pain .bp-2 { left: 10%; top: 56%; }
.bento-cell.is-sleep .bento-pack, .bento-cell.is-calm .bento-pack { width: 56%; }
.bento-cell.is-sleep .bp-0, .bento-cell.is-calm .bp-0 { display: none; }
.bento-cell.is-sleep .bp-1, .bento-cell.is-calm .bp-1 { left: 4%; top: 4%; }
.bento-cell.is-sleep .bp-2, .bento-cell.is-calm .bp-2 { left: 40%; top: 26%; }
.bento-cell:hover .bento-pack { transform: translateY(-6px); }
.bento-cell:focus-visible { outline-offset: 4px; }

/* ------------------------------------------------------------------ home: reasons */
.reasons-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.reasons-intro { display: grid; gap: 16px; }
.reasons-figure { margin: 16px 0 0; border-radius: var(--radius-panel); background: var(--pain-soft); padding: clamp(1rem, 2.5vw, 1.75rem); }
.reasons-front { border-radius: 10px; box-shadow: 0 20px 40px -24px rgb(148 22 49 / 0.45); }
.reasons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem); padding-top: 8px; }
.reason { display: grid; gap: 10px; align-content: start; padding-top: 24px; border-top: 2px solid var(--line); }
.reason .icon { width: 30px; height: 30px; }
.reason p { color: var(--ink-70); }

/* ------------------------------------------------------------------ home: day / night */
.daynight-section { background: var(--mist); }
.daynight { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.dn-panel { border-radius: var(--radius-panel); padding: clamp(1.75rem, 4vw, 3rem); display: grid; gap: 10px; align-content: start; }
.dn-day { background: var(--day); } /* pack DAY orange and NIGHT blue (Shaun, 14 Sep 2026) */
.dn-night { background: var(--night); }
.dn-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; } /* icon left, lettering right, as on the pack */
.dn-icon { width: auto; height: clamp(28px, 2.6vw, 36px); flex: none; color: #fff; }
.dn-day .dn-icon { color: #fff; }
.dn-night .dn-icon { color: #fff; }
.dn-panel h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); color: #fff; }
.dn-panel > p { color: #fff; max-width: 42ch; }
.dn-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.dn-list a {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px;
  border-radius: var(--pill); background: #fff; color: var(--ink); text-decoration: none; font-weight: 500; font-size: 0.9375rem;
  transition: box-shadow 0.15s ease;
}
.dn-list a:hover { box-shadow: 0 0 0 1.5px var(--ink); }

/* ------------------------------------------------------------------ home: audiences */
.audiences { list-style: none; margin-top: 36px; }
.audience a {
  display: grid; grid-template-columns: 56px minmax(0, 4fr) minmax(0, 6fr) 32px; gap: 28px; align-items: center;
  padding: 26px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none;
}
.audience:first-child a { border-top: 1px solid var(--line); }
.icon-wrap { width: 56px; height: 56px; border-radius: 50%; background: var(--mist); display: grid; place-items: center; transition: background-color 0.2s ease, color 0.2s ease; }
.icon-wrap .icon { width: 26px; height: 26px; }
.audience h3 { font-size: 1.25rem; }
.audience p { color: var(--ink-70); }
.audience .arrow { width: 24px; height: 24px; justify-self: end; transition: transform 0.3s var(--ease); }
.audience a:hover .icon-wrap { background: var(--ink); color: #fff; }
.audience a:hover .arrow { transform: translateX(4px); }

/* ------------------------------------------------------------------ trade band */
.trade-band { padding-bottom: var(--section-y); }
.showcase + .trade-band { padding-top: var(--section-y); }   /* after a grey section (Q&A pages) the panel needs the same space above as below (Shaun, 17 Sep 2026) */
.trade-panel {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center;
  padding: clamp(2rem, 5vw, 4.5rem); border-radius: var(--radius-panel);
  background: var(--accent-dark); color: #fff;
}
.trade-panel h2 { color: #fff; max-width: 22ch; }
.trade-panel p { color: #fff; margin-top: 12px; max-width: 54ch; }

/* ------------------------------------------------------------------ range page */
.range-hero { padding-block: clamp(3rem, 6vw, 5rem); }
/* Molecule line art in the open space either side of a range page's top: CBD left of the content, the range's
   terpenes right (discovery/molecules). The layer spans hero, products and label panel (.range-top) and its pin sticks
   under the header while those scroll, ending where the grey shelf section starts. Pinned 48px outside the container's
   content edge (1320px container, 24px gutter), so nothing sits behind text or images. Shrinks with the margin, hidden
   when there is no room. */
.range-top { position: relative; isolation: isolate; }
.range-art { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.range-art-pin { position: sticky; top: var(--header-h); height: min(calc(100vh - var(--header-h)), 900px); --art-w: min(400px, calc(50vw - 708px)); }
.range-art-pin::before, .range-art-pin::after {
  content: ""; position: absolute; top: 8%; bottom: 8%; width: var(--art-w);
  background: center / contain no-repeat;
}
.range-art-pin::before { right: calc(50% + 684px); transform: translateY(-80px); } /* CBD sits higher (Shaun, 14 Sep 2026) */
.range-art-pin::after { left: calc(50% + 684px); }
.theme-pain .range-art-pin::before { background-image: url("../img/molecules/range-pain-left.svg"); }
.theme-pain .range-art-pin::after { background-image: url("../img/molecules/range-pain-right.svg"); }
.theme-sleep .range-art-pin::before { background-image: url("../img/molecules/range-sleep-left.svg"); }
.theme-sleep .range-art-pin::after { background-image: url("../img/molecules/range-sleep-right.svg"); }
.theme-calm .range-art-pin::before { background-image: url("../img/molecules/range-calm-left.svg"); }
.theme-calm .range-art-pin::after { background-image: url("../img/molecules/range-calm-right.svg"); }
@media (max-width: 1699px) { .range-art { display: none; } }
.range-hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.range-hero-copy .lead { margin-top: 18px; }
.range-hero-copy .actions { margin-top: 30px; }
.trio { position: relative; aspect-ratio: 6 / 5; border-radius: var(--radius-panel); background: var(--accent); overflow: hidden; }
.trio::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 60% at 30% 20%, rgb(255 255 255 / 0.28), transparent 70%); }
.trio-pack { position: absolute; width: 66%; filter: drop-shadow(0 26px 30px rgb(0 0 0 / 0.26)); }
.trio-pack.tp-0 { left: 4%; top: 6%; }
.trio-pack.tp-1 { left: 18%; top: 30%; }
.trio-pack.tp-2 { left: 32%; top: 54%; }

.compare { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.compare-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--radius-panel); border: 1.5px solid var(--line); background: #fff;
  transition: border-color 0.2s ease;
}
.compare-card:hover { border-color: var(--accent-dark); }
.compare-card:focus-within { border-color: var(--accent-dark); box-shadow: 0 0 0 1px var(--accent-dark); }
.compare-top h3 a:focus-visible { outline: none; }
.compare-media { background: var(--accent-soft); padding: 28px 28px 12px; }
.compare-media img { transition: transform 0.4s var(--ease); }
.compare-card:hover .compare-media img { transform: translateY(-6px); }
.compare-body { display: grid; gap: 16px; padding: 24px 28px 28px; flex: 1; align-content: start; }
.compare-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.compare-top h3 { font-size: 1.5rem; }
.compare-top h3 a { color: var(--ink); text-decoration: none; }
.compare-top h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.compare-line { color: var(--ink-70); min-height: 4.8em; min-height: 3lh; } /* three lines, so the rules, facts and links line up across cards */
.compare-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding-top: 16px; border-top: 1px solid var(--line); }
.compare-facts dt { font-size: 0.8125rem; color: var(--ink-70); font-weight: 500; }
.compare-facts dd { margin: 0; font-weight: 600; }
.compare-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--accent-dark); margin-top: 4px; }
.compare-link .icon { width: 20px; height: 20px; transition: transform 0.3s var(--ease); }
.compare-card:hover .compare-link .icon { transform: translateX(4px); }

.indications-section { padding-top: 0; }
.indications-panel {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem);
  padding: clamp(2rem, 5vw, 4.5rem); border-radius: var(--radius-panel); background: var(--accent-dark); color: #fff;
}
.indications-head h2 { color: #fff; }
.indications-head p { margin-top: 12px; color: #fff; }
.indications-intro { font-size: 1rem; font-weight: 500; color: #fff; margin-bottom: 14px; }
.indications { list-style: none; display: grid; gap: 14px; }
.indications li { display: flex; gap: 14px; align-items: flex-start; font-size: clamp(1.25rem, 2.2vw, 1.625rem); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.indications .icon { width: 26px; height: 26px; margin-top: 0.12em; color: #fff; }

/* Range lifestyle banner: full width, image never cropped (its own aspect ratio); copy overlays the open left side. */
.range-banner { position: relative; }
.range-banner-img { display: block; width: 100%; height: auto; }
.range-banner-copy { position: absolute; inset: 0; display: flex; align-items: center; }
.range-banner-copy .container { width: 100%; }
.range-banner-eyebrow { font-weight: 600; font-size: 0.9375rem; letter-spacing: 0.04em; text-transform: uppercase; margin: 0 0 12px; }
.range-banner-line { max-width: 16ch; margin: 0; font-weight: 600; font-size: clamp(1.75rem, 3.6vw, 3.25rem); line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; }
.range-banner.is-light .range-banner-copy { color: var(--ink); }
.range-banner.is-light .range-banner-eyebrow { color: var(--accent-dark); }
/* White text straight on the photo, no fade, no shadow (Shaun, 14 Sep 2026). */
.range-banner.is-white .range-banner-copy { color: #fff; }
.range-banner.is-dark .range-banner-copy { color: #fff; background: linear-gradient(90deg, rgb(15 20 30 / 0.55), rgb(15 20 30 / 0.2) 40%, transparent 60%); }
@media (max-width: 767px) {
  .range-banner-copy { position: static; padding: 24px 0 40px; background: none !important; color: var(--ink) !important; }
  .range-banner.is-dark .range-banner-eyebrow { color: var(--accent-dark); }
}
.shelf-section { background: var(--mist); }
.shelf-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.shelf-copy { display: grid; gap: 16px; }
.shelf-copy > p:first-of-type { color: var(--ink-70); }
.code-list { display: grid; gap: 0; margin: 8px 0 0; border-radius: var(--radius-tile); background: #fff; padding: 6px 20px; }
.code-list div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; }
.code-list div + div { border-top: 1px solid var(--line); }
.code-list dt { font-weight: 500; }
.code-list dd { margin: 0; font-weight: 600; }
.shelf-stack { position: relative; aspect-ratio: 3 / 2; } /* sized for the 1113x811 box fronts, so the stack sits inside its column */
.shelf-front { position: absolute; width: 64%; border-radius: 10px; box-shadow: 0 24px 50px -28px rgb(35 31 32 / 0.5); background: #fff; }
.shelf-front.sf-0 { left: 9%; top: 0; }
.shelf-front.sf-1 { left: 18%; top: 15%; }
.shelf-front.sf-2 { left: 27%; top: 30%; }

.others-title { margin-bottom: 32px; }
.other-ranges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.range-card {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: flex-end; min-height: 280px; padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: var(--radius-panel); color: var(--ink); text-decoration: none;
}
.range-card.is-pain { background: var(--pain-soft); }
.range-card.is-sleep { background: var(--sleep-soft); }
.range-card.is-calm { background: var(--calm-soft); }
.range-card-copy { display: grid; gap: 8px; max-width: 55%; position: relative; z-index: 2; }
.range-card-title { display: flex; align-items: center; gap: 10px; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; }
.range-card.is-pain .range-card-title, .range-card.is-pain .range-card-link { color: var(--pain-dark); }
.range-card.is-sleep .range-card-title, .range-card.is-sleep .range-card-link { color: var(--sleep-dark); }
.range-card.is-calm .range-card-title, .range-card.is-calm .range-card-link { color: var(--calm-dark); }
.range-card-line { color: var(--ink-70); }
.range-card-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; margin-top: 8px; }
.range-card-link .icon { width: 20px; height: 20px; transition: transform 0.3s var(--ease); }
.range-card-pack { position: absolute; right: -8%; bottom: -6%; width: 58%; z-index: 1; filter: drop-shadow(0 20px 26px rgb(35 31 32 / 0.2)); transition: transform 0.4s var(--ease); }
.range-card:hover .range-card-pack { transform: translateY(-6px); }
.range-card:hover .range-card-link .icon { transform: translateX(4px); }

/* ------------------------------------------------------------------ product page */
.product-hero { padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(3rem, 6vw, 5rem); }
.product-hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.product-hero h1 { font-size: clamp(2.5rem, 5.2vw, 4.25rem); }
.range-hero h1, .product-hero h1 { color: var(--accent-dark); }
.hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 22px 0 24px; }
.product-hero-copy .actions { margin-top: 30px; }
.pack-stage {
  position: relative; display: grid; place-items: center; overflow: hidden;
  aspect-ratio: 6 / 5; padding: clamp(1.5rem, 4vw, 3.5rem); border-radius: var(--radius-panel);
  background: radial-gradient(110% 90% at 70% 25%, var(--accent-soft) 10%, var(--accent-tint) 100%);
}
.pack-stage .pack { width: 100%; filter: drop-shadow(0 30px 34px color-mix(in srgb, var(--accent-dark) 32%, transparent)); transition: transform 0.4s var(--ease); }
.pack-stage:hover .pack { transform: translateY(-6px); }

.glance-section { padding-top: clamp(2rem, 4vw, 3rem); }
.glance-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.glance-note { margin-top: 12px; max-width: 30ch; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; }
.fact { display: grid; gap: 4px; align-content: start; padding: 20px; border-radius: var(--radius-tile); background: var(--mist); }
.fact .icon { width: 26px; height: 26px; color: var(--accent-dark); margin-bottom: 10px; }
.fact dt { font-size: 0.8125rem; font-weight: 500; color: var(--ink-70); }
.fact dd { margin: 0; font-size: 1.0625rem; font-weight: 600; line-height: 1.35; }

.label-section { padding-top: 0; }
.label-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px; }
.label-card { border-radius: var(--radius-panel); padding: clamp(1.75rem, 4vw, 3.25rem); }
.label-indications { background: var(--accent-dark); color: #fff; }
.label-indications h2 { color: #fff; }
.label-sub { color: #fff; margin: 10px 0 28px; font-size: 0.9375rem; }
.label-directions { background: var(--accent-soft); display: grid; align-content: start; }
.label-directions h3 + p { margin-top: 8px; }
.label-directions p + h3 { margin-top: 28px; }
.note { font-size: 0.9375rem; color: var(--ink-70); margin-top: 10px; }

.ladder-section { background: var(--mist); }
.ladder { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 36px; }
.ladder-card {
  position: relative; display: grid; gap: 10px; align-content: start; height: 100%;
  padding: 20px 24px 26px; border-radius: var(--radius-panel); background: #fff; border: 2px solid transparent;
  color: var(--ink); text-decoration: none; transition: border-color 0.2s ease;
}
a.ladder-card:hover { border-color: var(--accent-dark); }
.ladder-step.is-current .ladder-card { border-color: var(--accent-dark); }
.ladder-card img { transition: transform 0.4s var(--ease); }
a.ladder-card:hover img { transform: translateY(-6px); }
.ladder-here { position: absolute; top: 16px; left: 20px; z-index: 1; padding: 4px 12px; border-radius: var(--pill); background: var(--accent-dark); color: #fff; font-size: 0.8125rem; font-weight: 600; }
.ladder-name { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; }
.ladder-meta { display: flex; align-items: center; gap: 12px; }
.ladder-dose { font-family: "Anton", Impact, sans-serif; font-size: 1.375rem; color: var(--accent-dark); letter-spacing: 0.01em; }
.ladder-when { color: var(--ink-70); font-size: 0.9375rem; }

.front-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.front-copy { display: grid; gap: 16px; }
.front-copy > p:first-of-type { color: var(--ink-70); }
.front-figure { margin: 0; padding: clamp(1rem, 3vw, 2.25rem); border-radius: var(--radius-panel); background: var(--accent-soft); }
.front-figure img { border-radius: 10px; background: #fff; box-shadow: 0 20px 44px -26px color-mix(in srgb, var(--accent-dark) 55%, transparent); }

.safety-section { background: var(--mist); }
.safety-list { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); margin-top: 36px; }
.safety-item .icon { width: 30px; height: 30px; color: var(--accent-dark); margin-bottom: 12px; }
.safety-item h3 { font-size: 1.0625rem; margin-bottom: 6px; }
.safety-item p { font-size: 0.9375rem; color: var(--ink-70); }
.disclaimer { margin-top: 40px; padding-top: 24px; border-top: 1px solid #D5D8DC; font-size: 0.9375rem; color: var(--ink-70); max-width: 92ch; }
.disclaimer strong { color: var(--ink); }

.faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.faq-intro { position: sticky; top: calc(var(--header-h) + 32px); display: grid; gap: 12px; }
.faq-intro p { color: var(--ink-70); max-width: 34ch; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item:first-child { border-top: 1px solid var(--line); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 22px 0; cursor: pointer; list-style: none; font-weight: 600; font-size: 1.0625rem; line-height: 1.4;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .icon { width: 22px; height: 22px; color: var(--accent-dark); transition: transform 0.2s ease; }
.faq-item summary:hover span { color: var(--accent-dark); }
.faq-item[open] summary .icon { transform: rotate(45deg); }
.faq-answer { padding: 0 52px 24px 0; color: var(--ink-70); max-width: 70ch; }

/* ------------------------------------------------------------------ inner page heroes */
.page-hero { padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(3rem, 6vw, 5rem); }
.contact-section, .about-hero, .legal-hero { padding-block: clamp(3rem, 6vw, 5rem); }
.about-hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.about-hero h1 { max-width: 17ch; }
.about-hero .lead { margin-top: 18px; }
.about-hero .actions { margin-top: 30px; }
.about-visual { position: relative; aspect-ratio: 1 / 1; border-radius: var(--radius-panel); background: var(--mist); display: grid; place-items: center; overflow: hidden; }
.about-tablet { width: 78%; filter: drop-shadow(0 30px 40px rgb(35 31 32 / 0.18)); }

.why-tablet { padding-top: 0; }
.why-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.why-figure { display: flex; gap: 12px; flex-wrap: wrap; }
.why-dose {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 18px 28px; border-radius: var(--radius-panel);
  font-family: "Anton", Impact, sans-serif; font-size: clamp(4rem, 9vw, 7rem); line-height: 1; letter-spacing: 0.01em;
}
.why-dose small { font-size: 0.32em; }
.why-dose:first-child { background: var(--mist); color: var(--ink); }
.why-dose:last-child { background: var(--ink); color: #fff; }
.why-copy { display: grid; gap: 14px; }
.why-copy p { color: var(--ink-70); max-width: 58ch; }
.why-copy p + p { margin-top: 0; }

.map-section { background: var(--mist); }
.range-map { display: grid; gap: 12px; margin-top: 40px; }
.map-row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 5fr); gap: 12px; }
.map-range, .map-cell { border-radius: var(--radius-tile); padding: 22px 24px; }
.map-range { display: flex; align-items: center; gap: 12px; font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em; color: #fff; text-decoration: none; }
.map-range .icon { width: 28px; height: 28px; }
.map-row.is-pain .map-range { background: var(--pain-dark); }
.map-row.is-sleep .map-range { background: var(--sleep-dark); }
.map-row.is-calm .map-range { background: var(--calm-dark); }
.map-cell { background: #fff; display: grid; gap: 10px; align-content: start; }
.map-label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; font-weight: 600; color: var(--ink-70); }
.map-label .icon { width: 16px; height: 16px; }
.map-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.map-links a { color: var(--ink); font-weight: 600; text-decoration: none; }
.map-links a:hover { text-decoration: underline; }

.made-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.made-section .front-figure { background: var(--calm-soft); }
.made-section .front-figure img { box-shadow: 0 20px 44px -26px rgb(90 35 115 / 0.5); }
.made-copy { display: grid; gap: 14px; }
.made-copy p { color: var(--ink-70); }
.made-copy p + p { margin-top: 0; }

.standards-section { padding-top: 0; }
.standards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); margin-top: 36px; }
.standard { display: grid; gap: 10px; align-content: start; padding-top: 22px; border-top: 2px solid var(--line); }
.standard .icon { width: 26px; height: 26px; }
.standard p { color: var(--ink-70); font-size: 0.9375rem; }

/* ------------------------------------------------------------------ contact */
.contact-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.contact-copy .lead { margin-top: 18px; }
.contact-direct { display: flex; gap: 14px; align-items: center; margin-top: 32px; padding: 18px 22px; border-radius: var(--radius-tile); background: var(--mist); }
.contact-direct .icon { width: 28px; height: 28px; }
.contact-direct a { font-weight: 600; font-size: 1.0625rem; color: var(--ink); }
.next-title { font-size: 1.25rem; margin-top: 40px; }
.next-list { list-style: none; display: grid; gap: 14px; margin-top: 16px; }
.next-list li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink-70); }
.next-list .icon { width: 22px; height: 22px; color: var(--ink); margin-top: 3px; }

.form-panel { padding: clamp(1.5rem, 4vw, 3rem); border-radius: var(--radius-panel); background: var(--mist); }
.form-grid { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px; }
.field { display: grid; gap: 8px; align-content: start; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field > label { font-weight: 500; font-size: 0.9375rem; }
.optional { font-weight: 400; color: var(--ink-70); }
input, select, textarea {
  width: 100%; min-height: 52px; padding: 12px 14px;
  font: 400 1rem/1.5 "Poppins", system-ui, sans-serif; color: var(--ink);
  background: #fff; border: 1.5px solid var(--field-border); border-radius: var(--radius-tile);
  caret-color: var(--accent-dark); transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
select {
  appearance: none; padding-right: 44px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23231F20'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 18px;
}
textarea { min-height: 150px; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid transparent; outline-offset: 0; border-color: var(--accent-dark);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-dark) 22%, transparent);
}
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--error); }
.range-field { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.range-field > legend { float: left; width: 100%; padding: 0; font-weight: 500; font-size: 0.9375rem; }
.range-row { clear: both; display: flex; flex-wrap: wrap; gap: 4px 28px; }
.range-option { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; font-size: 0.9375rem; cursor: pointer; }
.range-option input { width: 22px; height: 22px; min-height: 0; margin: 0; padding: 0; accent-color: var(--accent-dark); }
.checkbox { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; font-size: 0.9375rem; color: var(--ink-70); cursor: pointer; }
.checkbox input { width: 22px; height: 22px; min-height: 0; margin: 2px 0 0; padding: 0; accent-color: var(--accent-dark); }
.field-error { display: flex; gap: 6px; align-items: center; font-size: 0.875rem; font-weight: 500; color: var(--error); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 28px; }
.form-status { flex: 1 1 280px; padding: 12px 16px; border-radius: var(--radius-tile); font-weight: 500; font-size: 0.9375rem; }
.form-status:empty { padding: 0; flex-basis: 0; }
.form-status.is-ok { background: #E3F2E6; color: #14532D; }
.form-status.is-error { background: #FCE8E6; color: #8A1C12; }

/* ------------------------------------------------------------------ legal */
.legal-hero .muted { margin-top: 12px; }
.legal-section { padding-top: 0; }
.legal-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.toc { position: sticky; top: calc(var(--header-h) + 32px); max-height: calc(100dvh - var(--header-h) - 48px); overflow-y: auto; overscroll-behavior: contain; padding: 22px 24px; border-radius: var(--radius-tile); background: var(--mist); }
.toc-title { font-weight: 600; margin-bottom: 10px; }
.toc ol { list-style: none; display: grid; gap: 2px; }
.toc a { display: block; padding: 5px 0; color: var(--ink-70); text-decoration: none; font-size: 0.9375rem; line-height: 1.4; }
.toc a:hover { color: var(--ink); text-decoration: underline; }
.prose { max-width: 72ch; }
.prose-intro { font-size: 1.125rem; color: var(--ink-70); }
.prose-section { padding-top: 40px; scroll-margin-top: calc(var(--header-h) + 24px); }
.prose h2 { font-size: 1.5rem; margin-bottom: 12px; }
.prose p, .prose li { color: var(--ink-70); }
.prose ul { padding-left: 1.25em; margin-top: 12px; display: grid; gap: 6px; }
.prose ul + p, .prose p + ul { margin-top: 12px; }
.placeholder { background: #FFF1B8; color: var(--ink); padding: 1px 6px; border-radius: 6px; font-weight: 500; }

.notfound { padding-block: clamp(4rem, 12vw, 9rem); }
.notfound .lead { margin-top: 16px; }
.notfound .actions { margin-top: 28px; }

/* ------------------------------------------------------------------ footer */
.site-footer { background: var(--mist); padding-block: clamp(3rem, 6vw, 5rem) 32px; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 4fr) repeat(5, minmax(0, 2fr)); gap: 32px; }   /* brand + Pain, Calm, Sleep, Q&A, Company */
.footer-brand img { height: 28px; width: auto; }
.footer-brand p { margin: 16px 0 22px; color: var(--ink-70); max-width: 30ch; font-size: 0.9375rem; }
.footer-col h2 { font-size: 0.9375rem; font-weight: 600; letter-spacing: 0; margin-bottom: 10px; }
.footer-col h2 a { color: var(--ink); text-decoration: none; }
.footer-col h2 a:hover { text-decoration: underline; }
.footer-col ul { list-style: none; display: grid; }
.footer-col li a { display: inline-block; padding: 6px 0; color: var(--ink-70); text-decoration: none; font-size: 0.9375rem; }
.footer-col li a:hover { color: var(--ink); text-decoration: underline; }
.footer-legal {
  display: grid; gap: 10px; margin-top: 48px; padding-top: 24px; font-size: 0.8125rem; color: var(--ink-70);
  /* hairline sits inside the gutters, aligned with the content above */
  background: linear-gradient(#D5D8DC, #D5D8DC) var(--gutter) 0 / calc(100% - 2 * var(--gutter)) 1px no-repeat;
}
.footer-legal p + p { margin-top: 0; }

/* ------------------------------------------------------------------ reveal motion */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0; transform: translateY(14px);
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
    transition-delay: calc(var(--i, 0) * 70ms);
  }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  /* Failsafe: if site.js never marks the page ready, content fades in anyway after 3s. */
  .js:not(.js-ready) [data-reveal] { animation: reveal-failsafe 0.6s var(--ease) 3s forwards; }
}
@keyframes reveal-failsafe { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .pack-stage:hover .pack, .bento-cell:hover .bento-pack, .compare-card:hover .compare-media img,
  a.ladder-card:hover img, .range-card:hover .range-card-pack { transform: none; }
  .btn:active { transform: none; }
}

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1279px) {
  .footer-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
  .standards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .safety-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .home-hero-grid, .range-hero-grid, .product-hero-grid, .about-hero-grid, .contact-grid { grid-template-columns: 1fr; }
  .hero-visual { max-width: 640px; margin-inline: auto; }
  .home-hero h1 { max-width: 18ch; }
  .hero-visual { width: 100%; }
  .reasons-grid, .glance-grid, .front-grid, .faq-grid, .why-grid, .made-grid, .shelf-grid, .legal-grid, .indications-panel { grid-template-columns: 1fr; }
  .faq-intro, .toc { position: static; }
  .bento { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .bento-cell.is-pain { grid-row: auto; grid-column: 1 / -1; }
  .bento-cell.is-pain .bento-packs { min-height: 340px; }
  .bento-cell.is-pain .bento-pack { width: 46%; }
  .bento-cell.is-pain .bp-0 { left: 0; top: 0; }
  .bento-cell.is-pain .bp-1 { left: 27%; top: 25%; }
  .bento-cell.is-pain .bp-2 { left: 54%; top: 50%; }
  .compare { grid-template-columns: 1fr; max-width: 640px; }
  .ladder { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .label-grid { grid-template-columns: 1fr; }
  .other-ranges { grid-template-columns: 1fr; } /* two columns squeeze the copy against the carton on tablets */
  .map-row { grid-template-columns: 1fr 1fr; }
  .map-range { grid-column: 1 / -1; }
  .about-visual { max-width: 520px; width: 100%; margin-inline: auto; }
  .made-section .front-figure { order: 2; }
  /* touch: every link and control at least 44px tall */
  .brand { padding-block: 7px; }
  .range-tag { min-height: 44px; margin-bottom: 4px; }
  .map-links { gap: 0 20px; }
  .map-links a { display: inline-block; padding-block: 8px; } /* inline-block keeps the space before the dose */
  .footer-col h2, .footer-col h2 a { display: flex; align-items: center; min-height: 44px; } /* linked and plain headings line up */
  .toc a { padding-block: 12px; }
  .contact-direct a { display: inline-block; padding-block: 10px; margin-block: -10px; overflow-wrap: anywhere; }
  .range-option { min-height: 44px; }
  .footer-col h2 { margin-bottom: 0; }
  .footer-col li a { padding-block: 10px; }
  .trade-panel { grid-template-columns: 1fr; }   /* tablet follows phone: button centred under the text (17 Sep 2026) */
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }   /* tablet: ranges on one row, Q&A and Company below, so no link wraps (17 Sep 2026) */
  .footer-col li a { white-space: nowrap; }
  .site-footer { padding-bottom: 48px; } /* tighter (Shaun, 15 Sep 2026); the short copyright line ends before the back-to-top button */
}
@media (max-width: 379px) {
  .site-footer { padding-bottom: 72px; } /* on the narrowest phones the copyright line reaches under the button */
  .footer-grid { column-gap: 20px; }
  .footer-col li a { font-size: 0.875rem; }   /* Terms & Conditions stays on one line */
}
@media (max-width: 767px) {
  .bento { grid-template-columns: 1fr; }
  .bento-cell.is-pain .bento-packs { min-height: 260px; }
  .bento-cell.is-pain .bento-pack { width: 60%; }
  .bento-cell.is-pain .bp-1 { left: 20%; }
  .bento-cell.is-pain .bp-2 { left: 40%; }
  .bento-cell.is-sleep .bento-pack, .bento-cell.is-calm .bento-pack { width: 62%; }
  .reasons { grid-template-columns: 1fr; }
  .daynight { grid-template-columns: 1fr; }
  .audience a { grid-template-columns: 48px minmax(0, 1fr); gap: 6px 16px; }
  .audience .icon-wrap { width: 48px; height: 48px; grid-row: span 2; }
  .audience p { grid-column: 2; }
  .audience .arrow { display: none; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ladder { grid-template-columns: 1fr; }
  .safety-list, .standards { grid-template-columns: 1fr; }
  .range-card { min-height: 300px; align-items: flex-start; }
  .range-card-copy { max-width: 100%; }
  .range-card-pack { width: 62%; right: -10%; bottom: -10%; }
  .map-row { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq-answer { padding-right: 0; }
  .why-dose { padding: 14px 20px; }
}
@media (max-width: 479px) {
  .doses { width: 100%; }
  .dose { flex: 1; min-width: 0; }
  .facts { grid-template-columns: 1fr; }
  .actions .btn, .form-foot .btn { flex: 1 1 100%; }
}

/* Back to top: bottom right, appears after scrolling a screen (site.js), ink circle like the Trade Enquiry buttons. */
.to-top {
  position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 40;
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: var(--ink); color: #fff; box-shadow: 0 10px 24px -10px rgb(35 31 32 / 0.55);
  opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
.to-top.is-shown { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: color-mix(in srgb, var(--ink) 80%, #fff); }
.to-top:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.to-top .icon { width: 22px; height: 22px; }
body.nav-open .to-top { display: none; }
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; } }
#main:focus { outline: none; }

/* Column hero (Shaun, 14 Sep 2026): copy left, film right. The film plays once and holds the tablets in a vertical
   column; each tablet is a hotspot that opens a card with that range's carton wording and products. */
/* Background sampled from the film (take 4 end frame): studio grey #C9CCD1 to #DCDFE0 at the crop edges, #E5E5E7 in the
   light pool, darker floor at the bottom. The pool is centred on the column itself, so the film melts into the page. */
.home-hero.is-column { position: relative; isolation: isolate; background: linear-gradient(180deg, #D3D6DA 0%, #D8DBDE 55%, #C9CDD1 100%); }
.hero-column::before {
  content: ""; position: absolute; z-index: -1; left: 52%; top: 50%; width: 260%; height: 150%; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, #E6E6E8 0%, #E2E3E5 30%, #DADDE0 58%, rgb(216 219 222 / 0) 100%);
  pointer-events: none;
}
.home-hero.is-column .home-hero-grid { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.home-hero.is-column h1 { max-width: 16ch; }
.home-hero.is-column .home-hero-copy { text-align: left; }
.home-hero.is-column .lead { margin: 20px 0 0; max-width: 46ch; }
.home-hero.is-column .actions { margin: 32px 0 0; justify-content: flex-start; }
.hero-hint { margin-top: 22px; font-size: 0.875rem; color: var(--ink-70); opacity: 0; transition: opacity 0.5s ease; }
.hero-column.is-ready ~ .hero-hint, .home-hero.is-column:has(.hero-column.is-ready) .hero-hint { opacity: 1; }
.hero-column { position: relative; aspect-ratio: 4 / 5; width: 100%; max-height: min(680px, calc(100dvh - var(--header-h) - 3rem)); margin-inline-start: auto; }
.hero-column-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none;
  -webkit-mask-image: radial-gradient(50% 48% at 52% 49%, #000 45%, transparent 100%);
  mask-image: radial-gradient(50% 48% at 52% 49%, #000 45%, transparent 100%);
}
.pill-spots { position: absolute; inset: 0; }
.pill-spot { position: absolute; inset: 0; pointer-events: none; }   /* tablet column centre sits at 52% of the 4:5 crop */
.pill-hit {
  position: absolute; left: 35%; top: calc(var(--y) - 8%); width: 34%; height: 16%; border-radius: 999px; pointer-events: auto;   /* flat disc shape */
  background: transparent; border: 0; cursor: pointer; visibility: hidden;
}
.hero-column.is-ready .pill-hit { visibility: visible; }
.pill-spot.is-pain .pill-hit { color: var(--pain-dark); }
.pill-spot.is-calm .pill-hit { color: var(--calm-dark); }
.pill-spot.is-sleep .pill-hit { color: var(--sleep-dark); }
.hero-column.is-ready .pill-hit:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

.pill-card {
  position: absolute; right: calc(65% + 24px); top: var(--y); pointer-events: auto; width: min(340px, 72vw); z-index: 5;
  padding: 18px 20px 16px; border-radius: 16px; background: #fff; color: var(--ink);
  box-shadow: 0 24px 50px -24px rgb(35 31 32 / 0.45), 0 0 0 1px var(--line);
  opacity: 0; visibility: hidden; transform: translateX(12px); transition: opacity 0.25s ease, transform 0.3s var(--ease), visibility 0.3s;
}
.pill-card::after { content: ""; position: absolute; right: -7px; top: 50%; width: 14px; height: 14px; background: #fff; transform: translateY(-50%) rotate(45deg); box-shadow: 1px -1px 0 var(--line); }
.pill-spot.is-open .pill-card { opacity: 1; visibility: visible; transform: none; }
/* Every card opens in the same place (Shaun, 14 Sep 2026): one panel left of the stack, level with the middle tablet,
   set a little further left so it never touches the tablets. No notch, since it no longer points at one tablet. */
.pill-card { top: calc(46.5% - 233px); right: calc(66% + 48px); width: min(300px, 72vw); }   /* top-anchored, so cards of different lengths start in the same place */
/* Room for the card between the copy and the stack: the art sits a little to the right on desktop. */
@media (min-width: 1024px) { .hero-column { left: clamp(0px, 4.5vw, 120px); } }   /* offset, not transform: a transform would lift the light pool over the copy */
.pill-card::after { display: none; }
.hero-column:not(.is-ready) .pill-card { display: none; }
.pill-card-kicker { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; font-size: 0.8125rem; color: var(--ink-70); }
.pill-card-name { padding: 4px 12px; border-radius: var(--pill); color: #fff; font-weight: 600; font-size: 0.875rem; }
.is-pain .pill-card-name { background: var(--pain-dark); }
.is-calm .pill-card-name { background: var(--calm-dark); }
.is-sleep .pill-card-name { background: var(--sleep-dark); }
.pill-card-intro { margin: 0 0 6px; font-size: 0.8125rem; color: var(--ink-70); }
.pill-card-points { list-style: none; display: grid; gap: 4px; margin: 0 0 14px; }
.pill-card-points li { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.9375rem; }
.pill-card-points .icon { width: 16px; height: 16px; flex: none; }
.is-pain .pill-card-points .icon { color: var(--pain-dark); }
.is-calm .pill-card-points .icon { color: var(--calm-dark); }
.is-sleep .pill-card-points .icon { color: var(--sleep-dark); }
.pill-card-products { list-style: none; display: grid; margin: 0 0 12px; border-top: 1px solid var(--line); }
.pill-product { display: grid; grid-template-columns: 1fr 18px; grid-template-rows: auto auto; column-gap: 10px; align-items: center; min-height: 48px; padding-block: 6px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.pill-product-name { font-weight: 600; font-size: 0.9375rem; grid-column: 1; }
.pill-product-meta { font-size: 0.8125rem; color: var(--ink-70); grid-column: 1; }
.pill-product .icon { grid-column: 2; grid-row: 1 / 3; width: 16px; height: 16px; color: var(--ink-55); transition: transform 0.2s var(--ease); }
.pill-product:hover .icon { transform: translateX(3px); color: var(--ink); }
.pill-card-cta { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; font-size: 0.9375rem; text-decoration: none; }
.is-pain .pill-card-cta { color: var(--pain-dark); }
.is-calm .pill-card-cta { color: var(--calm-dark); }
.is-sleep .pill-card-cta { color: var(--sleep-dark); }
.pill-card-cta .icon { width: 16px; height: 16px; }
@media (max-width: 1023px) {
  .home-hero.is-column .home-hero-grid { grid-template-columns: 1fr; gap: 0; }
  /* Phones and tablets stack by importance (Shaun, 14 Sep 2026): heading, the tablets, then the line and the buttons. */
  .home-hero.is-column .home-hero-copy { display: contents; }
  .home-hero.is-column h1 { order: 1; font-size: clamp(1.75rem, 7.4vw, 2.25rem); text-align: center; max-width: 20ch; margin-inline: auto; }
  .home-hero.is-column .hero-column { order: 2; margin-block: 8px 20px; aspect-ratio: 5 / 4; }
  /* Crop the empty grey above and below the stack so heading, tablets, line and both buttons fit on one phone
     screen: the film and hotspots keep their 4:5 size and are shifted up inside the shorter box. */
  .home-hero.is-column .hero-column-video, .home-hero.is-column .pill-spots { inset: auto 0; top: -25%; height: 156.25%; }
  /* Clip and fade the shifted film to the visible box, so it never washes over the heading or the line above and below. */
  .home-hero.is-column .hero-column-video {
    clip-path: inset(16% 0 20% 0);
    -webkit-mask-image: radial-gradient(56% 36% at 52% 48%, #000 78%, transparent 100%);
    mask-image: radial-gradient(56% 36% at 52% 48%, #000 78%, transparent 100%);
  }
  .home-hero.is-column .lead { order: 3; margin: 0 auto; text-align: center; max-width: 34ch; }
  .home-hero.is-column .actions { order: 4; margin-top: 20px; justify-content: center; }   /* centred on tablets too */
  .hero-column { max-width: 460px; margin-inline: auto; max-height: none; }
  .pill-card { right: auto; left: 50%; top: 17%; width: min(330px, calc(100% - 8px)); transform: translate(-50%, 8px); }
  .pill-spot.is-open .pill-card { transform: translate(-50%, 0); }
  .hero-hint { display: none; }
}
/* Short phones (under 780px tall): tighter heading and a flatter crop so both buttons still fit the first screen. */
@media (max-width: 1023px) and (max-height: 780px) {
  .home-hero.is-column { padding-top: 1.25rem; }
  .home-hero.is-column h1 { font-size: 1.75rem; }
  .home-hero.is-column .hero-column { aspect-ratio: 16 / 11; margin-block: 6px 10px; }
  .home-hero.is-column .hero-column-video, .home-hero.is-column .pill-spots { top: -36.4%; height: 181.8%; }
  .pill-card { top: 21%; }
  .home-hero.is-column .hero-column-video {
    clip-path: inset(20% 0 25% 0);
    -webkit-mask-image: radial-gradient(56% 33% at 52% 47.5%, #000 80%, transparent 100%);
    mask-image: radial-gradient(56% 33% at 52% 47.5%, #000 80%, transparent 100%);
  }
  .home-hero.is-column .actions { margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) { .pill-card { transition: none; } }

/* Site-wide phone alignment rule (Shaun, 14 Sep 2026): centre headlines and short intros, keep everything you read
   (paragraphs, lists, cards, forms, legal prose) left-aligned. One rule for every page, not page-by-page tweaks.
   Extended to tablets (up to 1023px), where the layout is also a single column (Shaun, 15 Sep 2026). */
@media (max-width: 1023px) {
  /* page heroes: range, product, about, contact, legal, 404 */
  .range-hero-copy, .product-hero-copy,
  .page-hero > .container > h1, .page-hero > .container > .lead, .page-hero > .container > .muted,
  .about-hero-grid h1, .about-hero-grid .lead,
  .contact-copy > h1, .contact-copy > .lead { text-align: center; }
  .range-hero-copy .lead, .product-hero-copy .lead, .page-hero .lead, .contact-copy > .lead { margin-inline: auto; }
  .range-hero-copy h1, .product-hero-copy h1, .about-hero h1 { margin-inline: auto; }
  .range-hero-copy .actions, .product-hero-copy .actions, .page-hero .actions, .hero-meta { justify-content: center; }
  .crumbs ol { justify-content: center; }
  .product-hero-copy .range-tag { margin-inline: auto; }
  /* section intros and panels */
  .showcase-head, .section-head, .reasons-intro > h2, .reasons-intro > .lead, .indications-head,
  .others-title, .faq-intro > h2, .faq-intro > p, .trade-panel,
  .shelf-copy > h2, .front-copy > h2, .why-copy > h2, .made-copy > h2,
  main .section > .container > h2 { text-align: center; }
  .showcase-head .gradient-rule { margin-inline: auto; }
  .section-head .lead, .showcase-head .lead, .reasons-intro > .lead, .faq-intro > p, .trade-panel h2, .trade-panel p { margin-inline: auto; }
  .trade-panel { justify-items: center; }
  /* stays left, whatever its parent: lists, cards, forms, prose */
  .prose, .prose h2, .next-title, .next-list, .form-panel, .label-card, .reasons, .standards, .faq, .compare, .bento { text-align: left; }
}

/* Social icons: footer brand column and the mobile menu (Shaun, 14 Sep 2026). Pending accounts show but do nothing. */
.social { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink); transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.social a:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.social .icon { width: 20px; height: 20px; }
.social a[data-social-pending] { cursor: default; }
.social.is-menu { margin-top: 0; justify-content: center; }

/* Range chips (Shaun, 14 Sep 2026): a labelled button beside each tablet, on every screen size. Tap or click opens that
   range's card; the same chip, the card's close button, Escape or a click elsewhere closes it. Every card opens in the
   same place: left of the stack on desktop, centred over the stage on phones. */
.pill-hit { cursor: pointer; }
.pill-chip {
  position: absolute; left: calc(69% + 36px); top: var(--y); transform: translateY(-50%); pointer-events: auto;
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px 0 14px; border: 0; border-radius: var(--pill);
  color: #fff; font: 600 0.875rem/1 "Poppins", system-ui, sans-serif; cursor: pointer; white-space: nowrap;
  box-shadow: 0 8px 18px -10px rgb(35 31 32 / 0.5); opacity: 0; visibility: hidden; transition: opacity 0.4s ease, filter 0.2s ease;
}
.pill-chip::before { content: ""; position: absolute; inset: -6px -4px; }   /* 48px tap target */
/* chips centred on the visible tablet bodies (the measured --y sits a little high for Pain and Calm), every screen size */
.pill-spot.is-pain .pill-chip { top: calc(var(--y) + 2%); }
.pill-spot.is-calm .pill-chip { top: calc(var(--y) + 0.7%); }
.is-pain .pill-chip { background: var(--pain-dark); }
.is-calm .pill-chip { background: var(--calm-dark); }
.is-sleep .pill-chip { background: var(--sleep-dark); }
.hero-column.is-ready .pill-chip { opacity: 1; visibility: visible; }
.pill-chip:hover { filter: brightness(1.15); }
.pill-chip:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.pill-chip-icon { width: 14px; height: 14px; transition: transform 0.25s var(--ease); }
.pill-spot.is-open .pill-chip-icon { transform: rotate(45deg); }
.hero-column.is-ready .pill-spot:not(.is-open) .pill-chip-icon { animation: chip-nudge 1.6s ease-in-out 0.6s 2; }
@keyframes chip-nudge { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }
.pill-card-close {
  position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 36px; height: 36px;
  border: 0; border-radius: 50%; background: var(--mist); color: var(--ink); cursor: pointer;
}
.pill-card-close::before { content: ""; position: absolute; inset: -4px; }
.pill-card-close:hover { background: var(--line); }
.pill-card-close .icon { width: 16px; height: 16px; }
.pill-card-kicker { padding-right: 40px; }
/* Phones and tablets (Shaun, 14 Sep 2026): chips sit LEFT of the tablets with more room, icon first, so it reads as
   "+ Calm" (an action) rather than "Calm +" (easily misread as the Calm Plus product). */
@media (max-width: 1023px) {
  .pill-chip { left: auto; right: calc(66% + 28px); min-height: 32px; padding: 0 12px 0 10px; font-size: 0.8125rem; flex-direction: row-reverse; }
  /* tablets nudged right for more room between chips and tablets; chips re-centred on the tablet bodies as seen on phones */
  .home-hero.is-column .hero-column-video { translate: 5% 0; }
  .pill-hit { left: 40%; }
}
@media (prefers-reduced-motion: reduce) { .pill-chip-icon { animation: none !important; transition: none; } }

/* Footer brand block on phones and tablets (Shaun, 15 Sep 2026): centred logo, tagline on one line, button and socials. */
@media (max-width: 1023px) {
  .footer-brand { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .footer-brand p { max-width: none; white-space: nowrap; }
}
/* Phones are too narrow for the tagline on one line at a readable size: two balanced lines instead. */
@media (max-width: 639px) {
  .footer-brand p { white-space: normal; text-wrap: balance; }
  .footer-brand .social { justify-content: center; }
}

/* ------------------------------------------------------------------ Q&A menu and pages (Shaun, 17 Sep 2026) */
.qa-menu { position: relative; }   /* 24px header gap - 16px nav pull = 8px, same as the pills (Shaun, 17 Sep 2026) */
.qa-menu + .header-cta { margin-left: -16px; }
.qa-toggle { gap: 6px; padding: 0 12px 0 16px; }
.qa-toggle[data-current] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ink); }
.qa-caret { width: 16px; height: 16px; transition: transform 0.2s ease; }
.qa-toggle[aria-expanded="true"] .qa-caret { transform: rotate(180deg); }
.qa-menu-list {
  position: absolute; top: calc(100% + 12px); right: 0; z-index: 55; width: 360px;
  list-style: none; padding: 8px; border-radius: var(--radius-tile); background: #fff;
  border: 1px solid var(--line); box-shadow: 0 24px 48px -12px rgb(35 31 32 / 0.22);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
}
.qa-menu-list::before { content: ""; position: absolute; inset: -14px 0 auto; height: 14px; }   /* hover bridge */
.qa-menu.is-open .qa-menu-list, html:not(.js) .qa-menu:focus-within .qa-menu-list {
  opacity: 1; visibility: visible; transform: none; transition: opacity 0.15s ease, transform 0.15s ease;
}
.qa-menu-list a {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: center;
  padding: 12px; border-radius: 10px; color: var(--ink); text-decoration: none;
}
.qa-menu-list .icon-wrap { width: 44px; height: 44px; }
.qa-menu-list .icon-wrap .icon { width: 22px; height: 22px; }
.qa-menu-list a:hover, .qa-menu-list a:focus-visible { background: var(--mist); }
.qa-menu-list a:hover .icon-wrap, .qa-menu-list a[aria-current="page"] .icon-wrap { background: var(--ink); color: #fff; }
.qa-menu-text { display: grid; gap: 2px; }
.qa-menu-name { font-weight: 600; font-size: 0.9375rem; }
.qa-menu-blurb { font-size: 0.8125rem; line-height: 1.45; color: var(--ink-70); }
@media (max-width: 1023px) { .qa-menu { display: none; } }

.qa-hero { background: var(--mist); padding-block: clamp(3.5rem, 7vw, 6rem); }   /* equal top and bottom, roomier (Shaun, 17 Sep 2026) */
.qa-hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 4rem); align-items: end; }
.qa-hero-copy { display: grid; gap: 16px; }
.qa-hero h1 { font-size: clamp(2rem, 4.4vw, 3.25rem); line-height: 1.1; }
.qa-kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-70); }
.qa-kicker .icon { width: 20px; height: 20px; color: var(--ink); }
.qa-hero > .container > .qa-kicker { margin-bottom: 16px; }
.qa-hero > .container > .lead { margin-top: 16px; }
.qa-switch ul { list-style: none; display: grid; gap: 8px; }
.qa-switch a {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 20px;
  border-radius: var(--pill); background: #fff; border: 1.5px solid var(--line);
  color: var(--ink); font-weight: 600; text-decoration: none; transition: border-color 0.15s ease, background-color 0.15s ease;
}
.qa-switch a:hover { border-color: var(--ink); }
.qa-switch a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.qa-switch .icon { width: 22px; height: 22px; }
.qa-hub { margin-top: 40px; }
.qa-hub .icon-wrap { background: #fff; }   /* the grey hero would swallow the grey circle */
.qa-hub .audience a { grid-template-columns: 56px minmax(0, 4fr) minmax(0, 6fr) 32px; }

.qa-intro .actions { margin-top: 8px; }
.qa-count { margin: 0; font-size: 0.875rem; font-weight: 600; color: var(--ink-70); }
.qa-count .num { font-family: "Anton", Impact, sans-serif; font-weight: 400; font-size: 1.5rem; color: var(--ink); margin-right: 4px; }
.qa-expand { min-height: 44px; padding: 0; border: 0; background: none; font: 600 0.9375rem "Poppins", system-ui, sans-serif; color: var(--ink); text-decoration: none; cursor: pointer; transition: color 0.15s ease; }
.qa-expand:hover { color: var(--ink-70); }
.qa-toolbar { display: flex; justify-content: flex-end; padding-bottom: 12px; }   /* above the first question's line, right (Shaun, 17 Sep 2026) */
.qa-toolbar + .faq-item { border-top: 1px solid var(--line); }
html:not(.js) .qa-toolbar { display: none; }
html:not(.js) .qa-expand { display: none; }
.qa-item summary { display: grid; grid-template-columns: 40px minmax(0, 1fr) 22px; gap: 12px; }
.qa-num { font-family: "Anton", Impact, sans-serif; font-size: 1rem; letter-spacing: 0.02em; color: var(--ink-55); }
.qa-item .faq-answer { padding-left: 52px; display: grid; gap: 12px; }
.qa-item .faq-answer p { margin: 0; }
.qa-steps { list-style: none; display: grid; gap: 8px; }
.qa-step { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--radius-tile); background: var(--mist); }
.qa-step-range { position: relative; justify-self: start; padding: 4px 12px; border-radius: var(--pill); color: #fff; font-weight: 600; font-size: 0.8125rem; text-decoration: none; }
.qa-step-range::after { content: ""; position: absolute; inset: -8px -4px; }   /* 44px tap area around the small pill */
.qa-step.is-pain .qa-step-range { background: var(--pain-dark); }
.qa-step.is-calm .qa-step-range { background: var(--calm-dark); }
.qa-step.is-sleep .qa-step-range { background: var(--sleep-dark); }
.qa-step-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--ink); font-size: 0.9375rem; }
.qa-step-arrow { width: 16px; height: 16px; color: var(--ink-55); }

.qa-glossary-section { border-top: 1px solid var(--line); }
.qa-glossary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 36px 0 0; }
.qa-term { padding: 20px 22px; border-radius: var(--radius-tile); background: var(--mist); }
.qa-term dt { font-weight: 600; margin-bottom: 6px; }
.qa-term dd { margin: 0; color: var(--ink-70); font-size: 0.9375rem; line-height: 1.6; }

@media (max-width: 1023px) {
  .qa-hero { padding-block: var(--section-y); }
  .qa-hero-grid { grid-template-columns: 1fr; align-items: start; }
  .qa-kicker { justify-content: center; }
  .qa-hero-copy { text-align: center; justify-items: center; }
  .qa-hero-copy .lead { margin-inline: auto; }
  .qa-switch ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .qa-switch a { justify-content: center; padding: 0 12px; }
  .qa-intro .actions { justify-content: center; }
  .qa-hero > .container > .qa-kicker { display: flex; }
}
@media (max-width: 639px) {
  .qa-switch ul { grid-template-columns: 1fr; }
  .qa-glossary { grid-template-columns: 1fr; }
  .qa-item summary { grid-template-columns: 30px minmax(0, 1fr) 22px; }
  .qa-item .faq-answer { padding-left: 0; }
  .qa-step { grid-template-columns: 1fr; gap: 8px; }
  .qa-hub .audience a { grid-template-columns: 48px minmax(0, 1fr); }
}

@media (max-width: 339px) { .footer-col li a { white-space: normal; } }   /* 320px screens: wrap rather than spill out of the column */

/* ------------------------------------------------------------------ Q&A: Carl's mechanism poster (17 Sep 2026) */
/* Half size beside the copy (Shaun, 17 Sep 2026): the magnifier opens it full size in a dialog. */
.poster-section { border-top: 1px solid var(--line); }   /* white: on the pharmacy page the grey range tiles follow straight after */
.poster-grid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(220px, 19vw, 260px); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.poster-copy { display: grid; gap: 16px; }
.poster-points { list-style: none; display: grid; gap: 12px; margin-top: 8px; }
.poster-points li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; }
.poster-points .icon { width: 22px; height: 22px; margin-top: 2px; color: var(--pain-dark); }
.poster-figure { margin: 0; }
.poster-link { position: relative; display: block; border-radius: var(--radius-tile); overflow: hidden; background: #fff; box-shadow: 0 24px 48px -20px rgb(35 31 32 / 0.35); cursor: zoom-in; }
.poster-img { display: block; width: 100%; height: auto; transition: transform 0.4s var(--ease); }
.poster-link picture, .poster-dialog picture { display: block; }
.poster-link:hover .poster-img { transform: scale(1.03); }
.poster-zoom {
  position: absolute; bottom: 10px; right: 10px; display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 50%; background: var(--ink); color: #fff; box-shadow: 0 6px 16px rgb(0 0 0 / 0.25); transition: transform 0.2s var(--ease);
}
.poster-zoom .icon { width: 22px; height: 22px; }
.poster-link:hover .poster-zoom { transform: scale(1.08); }
.poster-dialog { width: min(92vw, calc(92dvh * 1200 / 1697)); max-height: 94dvh; padding: 0; border: 0; border-radius: var(--radius-tile); background: #fff; overflow: auto; overscroll-behavior: contain; }
.poster-dialog::backdrop { background: rgb(20 18 19 / 0.82); }
.poster-dialog img { display: block; width: 100%; height: auto; }
.poster-dialog-close {
  position: sticky; top: 12px; float: right; margin: 12px 12px -56px 0; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px;
  border: 0; border-radius: 50%; background: var(--ink); color: #fff; cursor: pointer;
}
.poster-dialog-close .icon { width: 22px; height: 22px; }
@media (max-width: 1023px) {
  .poster-grid { grid-template-columns: 1fr; }
  .poster-copy { text-align: center; justify-items: center; }
  .poster-copy .lead { margin-inline: auto; }
  .poster-points { text-align: left; }
  .poster-figure { width: min(300px, 100%); margin-inline: auto; }
}

/* ------------------------------------------------------------------ home: the poster in the hero (Carl via Shaun, 1 Oct 2026) */
/* Replaces the three-tablet film in the right column. Desktop: as tall as the first screen allows, capped by the column.
   Phones and tablets: between the heading and the line, full container width up to 460px. The labelled Expand button
   opens the dialog at every width. The light pool behind it is the one the film used, so the grey still reads as one. */
@media (min-width: 1024px) { .home-hero.is-poster .home-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.hero-poster { position: relative; margin: 0; justify-self: end; width: min(100%, 560px, calc((100dvh - var(--header-h) - 9rem) * 1200 / 1697)); min-width: min(100%, 340px); }
.hero-poster::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 220%; height: 130%; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, #E6E6E8 0%, #E2E3E5 30%, #DADDE0 58%, rgb(216 219 222 / 0) 100%); pointer-events: none;
}
.hero-poster .poster-link { box-shadow: 0 32px 64px -28px rgb(35 31 32 / 0.5), 0 0 0 1px rgb(35 31 32 / 0.06); }
.hero-poster .poster-link:hover .poster-img { transform: scale(1.02); }
.hero-poster-zoom {
  bottom: 14px; right: 14px; width: auto; height: 44px; padding: 0 16px 0 13px; gap: 8px; grid-auto-flow: column;
  border-radius: 999px; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.01em; background: rgb(35 31 32 / 0.88);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.hero-poster-zoom .icon { width: 18px; height: 18px; }
.hero-poster .poster-link:hover .hero-poster-zoom { transform: scale(1.04); }
.hero-poster .poster-link:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
@media (max-width: 1023px) {
  .hero-poster { order: 2; justify-self: center; width: min(100%, 460px); min-width: 0; margin-block: 16px 24px; }
}
/* Expand sits bottom-right on every poster (Shaun, 1 Oct 2026), clear of the headline. Phones: icon only, tucked into
   the corner, so the label does not cover the poster's footer line. */
@media (max-width: 599px) {
  .hero-poster-zoom { bottom: 8px; right: 8px; width: 44px; padding: 0; justify-content: center; }
  .hero-poster-zoom > span { display: none; }
}
@media (prefers-reduced-motion: reduce) { .hero-poster .poster-img, .hero-poster-zoom { transition: none; } }

/* ------------------------------------------------------------------ product: sales aid panel above the range ladder (17 Sep 2026) */
.aid-section { padding-top: 0; }   /* follows the white label section, which already carries the space */
.aid-figure { margin: 0; }
.aid-link { position: relative; display: block; cursor: zoom-in; }
.aid-img { display: block; width: 100%; height: auto; }
.aid-link .poster-zoom { top: auto; bottom: 14px; right: 14px; }
.aid-dialog { width: min(96vw, 1600px); }
@media (max-width: 767px) {   /* phones: the magnifier sits under the panel so it covers no text */
  .aid-link .poster-zoom { position: static; margin: 12px 0 0 auto; }
}

/* ---------------------------------------------------------------- 12 Oct 2026 (Carl, WhatsApp): terminology button, SA-first line, stockists */
.qa-hero-actions { margin-top: 8px; }
.qa-terms-btn { gap: 8px; }
.qa-terms-btn .icon { width: 18px; height: 18px; }
#terminology { scroll-margin-top: calc(var(--header-h) + 8px); }
.hero-first { margin: 0 0 16px; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); }
.stockists { background: #fff; border-bottom: 1px solid var(--line); padding-block: 24px; }
.stockists-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 40px; }
.stockists-lead { margin: 0; font: 600 0.8125rem "Poppins", system-ui, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-70); }
.stockists-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 40px; }
.stockists-list a { display: flex; align-items: center; min-height: 56px; color: var(--ink); text-decoration: none; }
.stockists-list img { display: block; width: auto; height: 56px; max-width: 220px; object-fit: contain; }
.stockist-name { font-weight: 600; font-size: 1.0625rem; }
.stockists-list a:hover .stockist-name { text-decoration: underline; }
@media (max-width: 1023px) { .hero-first { text-align: center; } }
@media (max-width: 639px) { .stockists-inner { flex-direction: column; gap: 12px; } .stockists-list img { height: 48px; } .qa-terms-btn { width: 100%; justify-content: center; } }
.stockists-all { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; font-size: 0.9375rem; color: var(--ink); }
.stockists-all .icon { width: 16px; height: 16px; }
.stockist-cards { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.stockist-card { display: grid; gap: 12px; justify-items: start; padding: 32px; border-radius: var(--radius-tile); background: var(--mist); }
.stockist-card-mark { display: flex; align-items: center; min-height: 88px; width: 100%; padding: 16px 24px; border-radius: var(--radius-tile); background: #fff; }
.stockist-card-mark img { display: block; width: auto; height: 72px; max-width: 100%; object-fit: contain; }
.stockist-card-mark .stockist-name { font-size: 1.375rem; }
.stockist-card-kind { margin: 0; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-70); }
.stockist-card-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; color: var(--ink); }
.stockist-card-link .icon { width: 18px; height: 18px; }
.stockist-retail { border-top: 1px solid var(--line); }
.stockist-retail .lead { margin-top: 16px; }
.stockist-stores { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.stockist-stores li { display: grid; gap: 2px; padding: 16px 20px; border-radius: var(--radius-tile); background: var(--mist); }
.stockist-stores span { color: var(--ink-70); font-size: 0.9375rem; }
@media (max-width: 639px) { .stockist-cards, .stockist-stores { grid-template-columns: 1fr; } .stockist-card { padding: 24px; } }