/* ==========================================================================
   TAI — design system
   --------------------------------------------------------------------------
   Thesis: "lab, not locker room."

   This category cannot use its own standard imagery (transformation photos sit
   outside Meta's allowance for weight loss), and it carries a trust deficit
   that hype makes worse. So the visual authority is borrowed from the
   regulated object itself — the Supplement Facts panel, the lot code, the
   assay result. Pharmacy restraint.

   Three typographic registers, alternating deliberately, mirroring the two
   faces of a real bottle:
     grotesque — the regulated/clinical voice (panels, data, controls)
     serif     — the human/narrative voice (story, headlines)
     mono      — the data voice (lot codes, mg, %DV, batch)

   No webfont is loaded. The CSP-free path would allow one, but a cold mobile
   ad click is exactly where a 90kB font blocks first paint, and paid social is
   nearly the only channel available to this category. Stacks are chosen so the
   first entry resolves on the platforms that matter.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens — light is the base; dark redefines tokens only, never components
   -------------------------------------------------------------------------- */

:root {
  /* ground + ink
     Near-white rather than cream: the warmth comes from the photography and
     the amber, not from the ground. Cream + serif + warm accent is the exact
     combination every AI-designed supplement site already lands on. */
  --paper:        #F7F8F6;
  --surface:      #FFFFFF;
  --surface-sunk: #EFF1EE;

  /* Inverted sections are deep forest, not near-black. Black reads clinical to
     the point of cold next to Ro and Found; a green-black keeps the
     seriousness and gains a brand. */
  --deep:         #14231D;
  --deep-2:       #1E332B;
  --on-deep:      #EEF2EE;
  --on-deep-2:    #9DB0A6;

  --ink:          #141C18;
  --ink-2:        #545F59;
  --ink-3:        #86918B;
  --rule:         #E1E4E0;
  --rule-strong:  #C6CBC6;

  /* accent — pharmacy amber glass, then the capsule highlight */
  --amber:        #9B6318;
  --amber-lift:   #C08A3E;
  --amber-wash:   #F6EEE1;

  /* secondary, for icon work and quiet emphasis on deep grounds */
  --sage:         #5F7A6C;
  --sage-lift:    #9DBCA9;

  /* the cold data register */
  --clinical:     #2C4A54;
  --clinical-wash:#E4EBED;

  --good:         #245C42;
  --good-wash:    #E2EFE8;

  /* Geometry. The single change that most separates these pages from a
     document: everything a hand would touch is a pill, everything that holds
     content is generously rounded. */
  --r-sm:   10px;
  --r-md:   18px;
  --r-lg:   28px;
  --r-xl:   36px;
  --r-pill: 999px;

  /* type */
  --f-grot:  ui-sans-serif, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "PingFang SC", sans-serif;
  --f-serif: "Iowan Old Style", "Hoefler Text", "Palatino Linotype", Palatino, Georgia, ui-serif, serif;
  --f-mono:  ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  /* scale */
  --step--1: clamp(0.80rem, 0.78rem + 0.1vw, 0.86rem);
  --step-0:  clamp(1.00rem, 0.97rem + 0.15vw, 1.09rem);
  --step-1:  clamp(1.20rem, 1.12rem + 0.4vw, 1.44rem);
  --step-2:  clamp(1.50rem, 1.32rem + 0.9vw, 2.10rem);
  --step-3:  clamp(2.00rem, 1.60rem + 2.0vw, 3.20rem);
  --step-4:  clamp(2.60rem, 1.80rem + 4.0vw, 5.20rem);

  --measure: 62ch;
  --gutter:  clamp(1.25rem, 4vw, 4rem);
  --bleed:   min(1440px, 100%);

  --shadow-plate: 0 1px 2px rgba(20,26,24,0.05), 0 12px 32px -12px rgba(20,26,24,0.16);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:        #0C1310;
    --surface:      #141E19;
    --surface-sunk: #0F1814;
    --deep:         #060B09;
    --deep-2:       #111A16;
    --on-deep:      #E8EEE9;
    --on-deep-2:    #8FA396;

    --ink:          #E7EDE8;
    --ink-2:        #A3AFA7;
    --ink-3:        #78847C;
    --rule:         #25302B;
    --rule-strong:  #37443D;

    --amber:        #D9A55E;
    --amber-lift:   #EFC489;
    --amber-wash:   #2C2114;

    --sage:         #9DBCA9;
    --sage-lift:    #C2D8CA;

    --clinical:     #8FB4BF;
    --clinical-wash:#16262B;

    --good:         #6FC79B;
    --good-wash:    #12281E;

    --shadow-plate: 0 1px 2px rgba(0,0,0,0.4), 0 12px 32px -12px rgba(0,0,0,0.6);
  }
}

:root[data-theme="dark"] {
  --paper:        #0C1310;
  --surface:      #141E19;
  --surface-sunk: #0F1814;
  --deep:         #060B09;
  --deep-2:       #111A16;
  --on-deep:      #E8EEE9;
  --on-deep-2:    #8FA396;

  --ink:          #E7EDE8;
  --ink-2:        #A3AFA7;
  --ink-3:        #78847C;
  --rule:         #25302B;
  --rule-strong:  #37443D;

  --amber:        #D9A55E;
  --amber-lift:   #EFC489;
  --amber-wash:   #2C2114;

  --sage:         #9DBCA9;
  --sage-lift:    #C2D8CA;

  --clinical:     #8FB4BF;
  --clinical-wash:#16262B;

  --good:         #6FC79B;
  --good-wash:    #12281E;

  --shadow-plate: 0 1px 2px rgba(0,0,0,0.4), 0 12px 32px -12px rgba(0,0,0,0.6);
}

/* --------------------------------------------------------------------------
   2. Reset + base
   -------------------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-serif);
  font-size: var(--step-0);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 0.18em; }
a:hover { text-decoration-color: currentColor; }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: 2px;
}

h1, h2, h3, h4 { margin: 0; font-weight: 400; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }

::selection { background: var(--amber-wash); color: var(--ink); }

/* --------------------------------------------------------------------------
   3. Typographic registers
   -------------------------------------------------------------------------- */

.reg-grot  { font-family: var(--f-grot); }
.reg-serif { font-family: var(--f-serif); }
.reg-mono  { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

/* the small uppercase clinical label — the connective tissue of the whole site */
.label {
  font-family: var(--f-grot);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1.2;
}
.label--amber { color: var(--amber); }
.label--on-deep { color: var(--on-deep-2); }

.display {
  font-family: var(--f-serif);
  font-size: var(--step-3);
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.display--xl { font-size: var(--step-4); }

.lede {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 46ch;
}

.prose { max-width: var(--measure); display: flex; flex-direction: column; gap: 1.1em; }
.prose p { line-height: 1.68; }
.prose strong { font-weight: 600; }

/* the data register: always mono, always tabular */
.datum {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--step--1);
  letter-spacing: -0.01em;
}

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */

.wrap { width: var(--bleed); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 900px; }

.section { padding-block: clamp(3.5rem, 9vw, 8rem); }
.section--tight { padding-block: clamp(2.5rem, 6vw, 5rem); }
.section--deep { background: var(--deep); color: var(--on-deep); }
.section--deep .label { color: var(--on-deep-2); }
.section--deep .lede { color: var(--on-deep-2); }
.section--sunk { background: var(--surface-sunk); }

.stack   { display: flex; flex-direction: column; gap: 1rem; }
.stack-s { display: flex; flex-direction: column; gap: 0.5rem; }
.stack-m { display: flex; flex-direction: column; gap: 1.75rem; }
.stack-l { display: flex; flex-direction: column; gap: clamp(2rem, 5vw, 3.5rem); }

.section-head {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin-bottom: clamp(2rem, 5vw, 3.25rem);
}

/* a rule that carries a label, used to open sections — reads as a spec sheet */
.rule-label {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  border-top: 1px solid var(--rule);
  padding-top: 0.75rem;
}
.section--deep .rule-label { border-color: rgba(255,255,255,0.16); }
.rule-label__index { font-family: var(--f-mono); font-size: 0.7rem; color: var(--ink-3); }
.section--deep .rule-label__index { color: var(--on-deep-2); }

/* --------------------------------------------------------------------------
   5. Site header
   -------------------------------------------------------------------------- */

.ticker {
  background: var(--deep);
  color: var(--on-deep-2);
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  padding-block: 0.5rem;
}
.ticker__row {
  display: flex;
  gap: 2.25rem;
  justify-content: center;
  flex-wrap: wrap;
}
.ticker__row span { white-space: nowrap; }
.ticker__dot { color: var(--amber); }

/* On a phone the three claims wrapped to three stacked lines and ate 130px of
   the fold. One line, swipeable, scrollbar hidden. */
@media (max-width: 760px) {
  .ticker__row {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    gap: 1.5rem;
    scrollbar-width: none;
  }
  .ticker__row::-webkit-scrollbar { display: none; }
}

.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  /* -webkit- first: iOS Safari is the majority browser for paid-social traffic
     in this category, and unprefixed backdrop-filter is ignored there — the
     bar would go semi-transparent with no blur and content would show through. */
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--rule);
}
.masthead__row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  min-height: 62px;
}
.wordmark {
  font-family: var(--f-grot);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-decoration: none;
  color: var(--ink);
}
.nav { display: flex; gap: 1.75rem; justify-self: center; }
.nav a {
  font-family: var(--f-grot);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-2);
  transition: color 0.2s var(--ease);
}
.nav a:hover { color: var(--ink); }
.masthead__end { display: flex; gap: 1rem; align-items: center; justify-self: end; }

.cart-link {
  font-family: var(--f-mono);
  font-size: 0.74rem;
  text-decoration: none;
  color: var(--ink);
  border: 1px solid var(--rule-strong);
  padding: 0.4rem 0.75rem;
  border-radius: var(--r-pill);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.cart-link:hover { border-color: var(--ink); background: var(--surface); }

@media (max-width: 760px) {
  .masthead__row { grid-template-columns: auto 1fr; }
  .nav { display: none; }
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */

/* Pills. Every reference in this category — Ro, Found, Noom — uses a fully
   rounded control, and side by side a 2px radius reads as cold rather than
   precise. The uppercase tracking stays: that is where the clinical register
   lives now that the shape has warmed up. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  font-family: var(--f-grot);
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.05rem 2.1rem;
  border: 1.5px solid var(--ink);
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  text-align: center;
  transition: transform 0.18s var(--ease), background 0.18s var(--ease),
              color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.btn:hover { background: var(--deep-2); border-color: var(--deep-2); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }

/*
 * Sits on the hero photograph, which is dark in BOTH themes — so its colours
 * are literals, not tokens. Taking --ink here made the label flip to near-white
 * on a white pill in dark mode and the button vanished. Anything painted over
 * fixed imagery has to opt out of the theme.
 */
.btn--onimage {
  background: rgba(255,255,255,0.96);
  border-color: rgba(255,255,255,0.96);
  color: #14231D;
}
.btn--onimage:hover { background: #fff; border-color: #fff; color: #14231D; }

.btn--outline-light {
  background: transparent;
  border-color: rgba(255,255,255,0.85);
  color: #fff;
}
.btn--outline-light:hover { background: rgba(255,255,255,0.16); border-color: #fff; color: #fff; }

.btn--amber { background: var(--amber); border-color: var(--amber); color: #fff; }
.btn--amber:hover { background: color-mix(in srgb, var(--amber) 85%, #000); border-color: color-mix(in srgb, var(--amber) 85%, #000); }
:root[data-theme="dark"] .btn--amber,
:root:not([data-theme="light"]) .btn--amber { color: #16110A; }

.btn--block { width: 100%; }
.btn--lg { padding: 1.2rem 2.4rem; font-size: 0.88rem; }

/* --------------------------------------------------------------------------
   7. Rendered packaging
   -------------------------------------------------------------------------- */

.tai-render { width: 100%; height: auto; overflow: visible; }
.tai-render__sku {
  font-family: var(--f-mono); font-size: 15px; fill: #141A18; letter-spacing: 0.1em;
}
.tai-render__sku--inv { fill: #EDEEE7; }
.tai-render__wordmark {
  font-family: var(--f-grot); font-size: 30px; font-weight: 700; fill: #141A18; letter-spacing: 0.22em;
}
.tai-render__wordmark--inv { fill: #FEFDF8; }
.tai-render__label {
  font-family: var(--f-grot); font-size: 15px; font-weight: 500; fill: #141A18; letter-spacing: 0.2em;
}
.tai-render__label--inv { fill: #D9CFC0; }
.tai-render__count {
  font-family: var(--f-mono); font-size: 9px; fill: #141A18; opacity: 0.62; letter-spacing: 0.09em;
}
.tai-render__count--inv { fill: #EDEEE7; opacity: 0.6; }

/* the bottle floats on a soft ellipse of light rather than a hard card */
.render-stage {
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 5vw, 3.5rem);
  isolation: isolate;
}
.render-stage::before {
  content: "";
  position: absolute;
  inset: 12% 8%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 45%,
    color-mix(in srgb, var(--amber-lift) 26%, transparent) 0%,
    transparent 68%);
  filter: blur(28px);
}
.render-stage--cold::before {
  background: radial-gradient(ellipse at 50% 45%,
    color-mix(in srgb, var(--clinical) 24%, transparent) 0%,
    transparent 68%);
}

/* --------------------------------------------------------------------------
   8. Photography plates — art-directed stand-ins
   -------------------------------------------------------------------------- */

.tai-plate {
  position: relative;
  margin: 0;
  aspect-ratio: var(--plate-ratio, 4/5);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-plate);
  isolation: isolate;
}
.tai-plate__field {
  position: absolute;
  inset: 0;
  background-blend-mode: overlay, normal;
}
/* Each tone is a composed gradient, not a flat grey — the page has to read as
   image-led even before a single photograph exists. */
/* Each tone is a lit scene rather than a two-stop ramp: a key light, a bounce,
   a coloured shadow, then a vignette. Flat gradients read instantly as
   placeholder; these read as duotone-treated photography, which is close
   enough to judge composition against. */
.tai-plate--warm .tai-plate__field {
  background:
    radial-gradient(42% 34% at 30% 22%, rgba(255,246,232,0.92), transparent 60%),
    radial-gradient(70% 58% at 66% 40%, rgba(224,166,92,0.85), transparent 66%),
    radial-gradient(80% 70% at 82% 96%, rgba(86,48,18,0.9), transparent 62%),
    linear-gradient(152deg, #C08A4E 0%, #8F5F2C 44%, #4A2F14 100%);
}
.tai-plate--cold .tai-plate__field {
  background:
    radial-gradient(40% 32% at 72% 18%, rgba(240,250,252,0.9), transparent 60%),
    radial-gradient(72% 60% at 40% 46%, rgba(124,164,172,0.8), transparent 66%),
    radial-gradient(80% 72% at 14% 92%, rgba(20,44,52,0.92), transparent 62%),
    linear-gradient(160deg, #7FA0A8 0%, #43646D 46%, #18292E 100%);
}
.tai-plate--bone .tai-plate__field {
  background:
    radial-gradient(38% 30% at 32% 20%, #FFFFFF, transparent 62%),
    radial-gradient(66% 56% at 58% 44%, rgba(240,237,226,0.95), transparent 68%),
    radial-gradient(78% 68% at 84% 94%, rgba(158,152,136,0.85), transparent 64%),
    linear-gradient(150deg, #F4F2EA 0%, #DAD6C8 56%, #ADA898 100%);
}
.tai-plate--dark .tai-plate__field {
  background:
    radial-gradient(36% 30% at 28% 18%, rgba(238,196,138,0.7), transparent 62%),
    radial-gradient(66% 56% at 52% 48%, rgba(48,74,64,0.85), transparent 68%),
    radial-gradient(84% 74% at 84% 96%, rgba(6,11,9,0.95), transparent 60%),
    linear-gradient(155deg, #24352E 0%, #16241E 58%, #080D0B 100%);
}

/* Vignette, on every tone. Photographs fall off at the edges; CSS does not
   unless told to, and that even edge is the main tell. */
.tai-plate__field::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(115% 95% at 50% 42%, transparent 46%, rgba(10,14,12,0.42) 100%);
}
.tai-plate--bone .tai-plate__field::after {
  background: radial-gradient(115% 95% at 50% 42%, transparent 50%, rgba(90,86,74,0.28) 100%);
}

/* film grain: keeps the gradients from reading as flat CSS */
.tai-plate::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.16;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.tai-plate__cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.55rem;
  padding: 0.7rem 0.85rem;
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.07em;
  color: rgba(255,255,255,0.92);
  background: linear-gradient(to top, rgba(10,13,12,0.72), transparent);
}
.tai-plate--bone .tai-plate__cap {
  color: rgba(20,26,24,0.78);
  background: linear-gradient(to top, rgba(255,255,255,0.8), transparent);
}
.tai-plate__marker {
  border: 1px solid currentColor;
  padding: 0.1em 0.4em;
  border-radius: 1px;
  opacity: 0.75;
}
.tai-plate__note { opacity: 0.62; }

/* --------------------------------------------------------------------------
   9. Hero
   -------------------------------------------------------------------------- */

/*
 * The hero is a single full-bleed rounded stage with everything composed on
 * top of it, rather than a copy column beside a product column. That layering
 * — image behind, type and a floating card in front — is what separates the
 * reference set from a brochure, and it is the shape a real photograph will
 * drop into without the layout being rebuilt.
 *
 * .hero-stage__field is the image slot. Today it holds a composed gradient.
 * Replacing it with <img class="hero-stage__field"> is the whole migration.
 */

.hero-stage {
  position: relative;
  isolation: isolate;
  border-radius: var(--r-xl);
  overflow: hidden;
  min-height: clamp(520px, 74vh, 760px);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: end;
  padding: clamp(1.5rem, 4vw, 3.25rem);
  color: #fff;
  margin-top: clamp(0.5rem, 2vw, 1.25rem);
}

/* The image slot. Layered warm light over a deep forest ground, so the amber
   packaging sits in the same world as the background rather than on top of it. */
.hero-stage__field {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(78% 62% at 74% 22%, rgba(226,171,96,0.55), transparent 62%),
    radial-gradient(64% 58% at 18% 78%, rgba(64,104,86,0.62), transparent 66%),
    radial-gradient(120% 96% at 50% 6%, rgba(255,238,214,0.24), transparent 58%),
    linear-gradient(158deg, #26433A 0%, #18292339 0%, #172822 46%, #0E1815 100%);
  background-color: #16261F;
}
/* Vignette + grain: without them a CSS gradient reads as a CSS gradient. */
.hero-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(120% 100% at 50% 50%, transparent 42%, rgba(8,14,12,0.55) 100%),
    linear-gradient(to top, rgba(8,14,12,0.72) 0%, transparent 46%);
}
.hero-stage__grain {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.2;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero-stage__copy {
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
  align-self: end;
  /* No max-width on the column: it was squeezing the two CTAs onto separate
     rows. The headline and lede carry their own measures instead. */
}
/* The measure belongs to the headline alone. Constraining the eyebrow too
   broke it onto four lines on a phone. */
.hero-stage__copy > .hero-stage__title { max-width: 18ch; }
.hero-stage__eyebrow {
  font-family: var(--f-grot);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
}
.hero-stage__title {
  font-family: var(--f-serif);
  font-size: clamp(2.6rem, 5.4vw, 4.6rem);
  line-height: 1.0;
  letter-spacing: -0.032em;
  color: #fff;
  text-shadow: 0 1px 40px rgba(0,0,0,0.35);
}
.hero-stage__title em { font-style: italic; color: #F0C98C; }
.hero-stage__lede {
  font-size: 1.05rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.86);
  max-width: 42ch;
}
.hero-stage__actions { display: flex; flex-wrap: wrap; gap: 0.7rem; }

/* The floating card. Noom runs two of these; one is enough when there is a
   single hero SKU, and it gives the drawn bottle somewhere to sit that reads
   as product rather than as illustration. */
.hero-card {
  align-self: end;
  justify-self: end;
  width: min(340px, 100%);
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--r-lg);
  padding: 1.35rem 1.35rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  box-shadow: 0 24px 60px -18px rgba(0,0,0,0.5);
}
.hero-card__render { display: grid; place-items: center; padding-block: 0.25rem 0.5rem; }
.hero-card__render .tai-render { max-width: 132px; }
.hero-card__row { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; }
.hero-card__name { font-family: var(--f-serif); font-size: 1.22rem; line-height: 1.2; }
.hero-card__price { font-family: var(--f-mono); font-size: 0.95rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hero-card__note { font-size: 0.85rem; color: var(--ink-2); line-height: 1.45; }

/* Benefit triplet, on the image, under the copy — the device all three
   references use to answer "why should I care" before any scroll. */
.hero-props {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1.25rem 2rem;
  padding-top: clamp(1.5rem, 4vw, 2.5rem);
  margin-top: auto;
  border-top: 1px solid rgba(255,255,255,0.22);
}
.hero-prop { display: flex; gap: 0.8rem; align-items: flex-start; }
.hero-prop svg { flex: none; width: 26px; height: 26px; stroke: #F0C98C; fill: none; stroke-width: 1.4; }
.hero-prop span {
  font-family: var(--f-grot);
  font-size: 0.9rem;
  line-height: 1.4;
  color: rgba(255,255,255,0.94);
}

@media (max-width: 900px) {
  .hero-stage {
    grid-template-columns: 1fr;
    align-items: start;
    min-height: 0;
    padding: clamp(1.25rem, 5vw, 2rem);
    gap: 1.5rem;
  }
  .hero-stage__copy { max-width: none; }
  .hero-card { justify-self: stretch; width: 100%; }
  .hero-props { padding-top: 1.5rem; }
}

/* the spec strip under the hero: the first thing a sceptical buyer wants */
.spec-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
}
.spec {
  padding: 1rem 1.1rem;
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.spec:last-child { border-right: 0; }
.spec__v {
  font-family: var(--f-mono);
  font-size: 1.35rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
}
.spec__k {
  font-family: var(--f-grot);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-3);
}

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; gap: 1.5rem; }
  .hero__render { order: -1; margin-inline: auto; }
}

/*
 * Phone hero. The render stays first — this is an image-led brand and the
 * product is the hook — but it is capped hard so the headline, the lede and
 * the primary action all clear the fold. A cold paid-social click that lands
 * on a full-screen photograph with the proposition below it bounces, and in
 * this category paid social is close to the only channel there is.
 */
@media (max-width: 560px) {
  .hero { padding-block: 1.25rem 2.5rem; }
  .hero__render { max-width: 200px; }
  .hero__render .tai-render { max-width: 190px; }
  .hero__render.render-stage { padding: 0.5rem; }
  .hero__title { font-size: clamp(2.1rem, 10vw, 2.9rem); }
  .spec-strip { grid-template-columns: 1fr 1fr; }
}

/* --------------------------------------------------------------------------
   10. Product lineup — three SKUs read as a numbered system, not a catalogue
   -------------------------------------------------------------------------- */

.lineup {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg); overflow: hidden;
}
.sku {
  background: var(--surface);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: background 0.25s var(--ease);
}
.sku:hover { background: var(--surface-sunk); }
.sku__render { padding: 1.75rem 1.75rem 0.5rem; }
.sku__render .tai-render { max-width: 190px; margin-inline: auto; transition: transform 0.35s var(--ease); }
.sku:hover .tai-render { transform: translateY(-6px); }
.sku__body {
  padding: 1.25rem 1.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  border-top: 1px solid var(--rule);
  margin-top: 1rem;
}
.sku__index { font-family: var(--f-mono); font-size: 0.72rem; color: var(--amber); letter-spacing: 0.1em; }
.sku__name { font-family: var(--f-serif); font-size: var(--step-1); line-height: 1.2; }
.sku__role { font-size: 0.92rem; color: var(--ink-2); line-height: 1.5; }
.sku__foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 0.5rem;
  padding-top: 0.8rem;
  border-top: 1px dashed var(--rule);
}
.sku__price { font-family: var(--f-mono); font-size: 0.95rem; }
.sku__cta {
  font-family: var(--f-grot); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber);
}

/* --------------------------------------------------------------------------
   11. Supplement Facts panel — the regulated object, designed
   -------------------------------------------------------------------------- */

.facts {
  background: #FFFFFF;
  color: #141A18;
  border: 1.5px solid #141A18;
  padding: 0.9rem 1rem 1rem;
  font-family: var(--f-grot);
  max-width: 380px;
}
.facts__title {
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  padding-bottom: 0.35rem;
}
.facts__meta {
  font-size: 0.78rem;
  border-bottom: 9px solid #141A18;
  padding-bottom: 0.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.facts__table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.facts__table thead th {
  font-size: 0.66rem;
  font-weight: 700;
  text-align: right;
  padding: 0.25rem 0 0.2rem;
  border-bottom: 1px solid #141A18;
  white-space: nowrap;
}
.facts__table thead th:first-child { text-align: left; }
.facts__table tbody th {
  text-align: left;
  font-weight: 600;
  padding: 0.32rem 0.5rem 0.32rem 0;
  border-bottom: 1px solid #141A18;
  line-height: 1.35;
}
.facts__table tbody tr.is-sub th { padding-left: 1rem; font-weight: 400; font-style: italic; }
.facts__table td {
  text-align: right;
  padding: 0.32rem 0 0.32rem 0.5rem;
  border-bottom: 1px solid #141A18;
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.facts__form { display: block; font-weight: 400; font-size: 0.68rem; opacity: 0.7; font-style: italic; }
.facts__other { font-size: 0.7rem; line-height: 1.45; margin-top: 0.55rem; }
.facts__dagger { font-size: 0.66rem; margin-top: 0.35rem; opacity: 0.75; }

/* --------------------------------------------------------------------------
   12. Buy box — subscribe vs one-time
   -------------------------------------------------------------------------- */

.buybox {
  border: 1px solid var(--rule-strong);
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.plan { display: flex; flex-direction: column; gap: 0.6rem; }
.plan__opt {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.85rem;
  align-items: start;
  padding: 0.95rem 1rem;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.plan__opt:hover { border-color: var(--rule-strong); }
.plan__opt input { position: absolute; opacity: 0; pointer-events: none; }
.plan__opt:has(input:checked) {
  border-color: var(--amber);
  background: var(--amber-wash);
}
.plan__opt:has(input:focus-visible) { outline: 2px solid var(--amber); outline-offset: 2px; }

.plan__dot {
  width: 15px; height: 15px; margin-top: 0.25rem;
  border: 1.5px solid var(--rule-strong);
  border-radius: 50%;
  display: grid; place-items: center;
  flex: none;
}
.plan__opt:has(input:checked) .plan__dot { border-color: var(--amber); }
.plan__opt:has(input:checked) .plan__dot::after {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--amber);
}

.plan__main { display: flex; flex-direction: column; gap: 0.2rem; }
.plan__name { font-family: var(--f-grot); font-size: 0.9rem; font-weight: 600; }
.plan__sub  { font-size: 0.82rem; color: var(--ink-2); line-height: 1.45; }
.plan__price { text-align: right; display: flex; flex-direction: column; gap: 0.1rem; }
.plan__amt { font-family: var(--f-mono); font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.plan__was { font-family: var(--f-mono); font-size: 0.75rem; color: var(--ink-3); text-decoration: line-through; }

.plan__tag {
  position: absolute; top: -0.6rem; right: 0.8rem;
  font-family: var(--f-grot); font-size: 0.58rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--amber); color: #fff;
  padding: 0.18em 0.5em; border-radius: 1px;
}
:root[data-theme="dark"] .plan__tag,
:root:not([data-theme="light"]) .plan__tag { color: #16110A; }

/* Cancellation terms are a design element, not fine print. California AB 2863
   and ROSCA enforcement both turn on whether this was clear and conspicuous
   at the point of consent — and a buyer who cannot find the exit disputes
   the charge instead, which is the ratio that ends the merchant account. */
.plan__terms {
  font-size: 0.78rem;
  color: var(--ink-2);
  line-height: 1.5;
  border-left: 2px solid var(--rule-strong);
  padding-left: 0.8rem;
}
.plan__terms strong { color: var(--ink); font-weight: 600; }

.buybox__assure {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem;
  font-family: var(--f-mono); font-size: 0.68rem; color: var(--ink-3);
  border-top: 1px solid var(--rule); padding-top: 0.9rem;
}
.buybox__assure span { display: inline-flex; align-items: center; gap: 0.35em; }
.buybox__assure i { color: var(--good); font-style: normal; }

/* --------------------------------------------------------------------------
   13. Trust / assay strip
   -------------------------------------------------------------------------- */

.assay {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--r-lg); overflow: hidden;
}
.assay__cell {
  background: var(--deep);
  padding: 1.35rem 1.4rem;
  display: flex; flex-direction: column; gap: 0.45rem;
}
.assay__k { font-family: var(--f-mono); font-size: 0.64rem; color: var(--on-deep-2); letter-spacing: 0.1em; }
.assay__v { font-family: var(--f-grot); font-size: 0.98rem; font-weight: 600; line-height: 1.35; }
.assay__n { font-size: 0.82rem; color: var(--on-deep-2); line-height: 1.5; }

/* a chromatography-flavoured hairline graphic, drawn in pure CSS */
.trace {
  height: 46px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.09) 0 1px, transparent 1px 32px),
    linear-gradient(180deg,
      transparent 0 calc(50% - 1px),
      color-mix(in srgb, var(--amber) 85%, transparent) calc(50% - 1px) calc(50% + 1px),
      transparent calc(50% + 1px));
  border-block: 1px solid rgba(255,255,255,0.12);
}

/* --------------------------------------------------------------------------
   14. Editorial pairs — narrative alternating with plates
   -------------------------------------------------------------------------- */

.pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: center;
}
.pair--flip .pair__media { order: 2; }
.pair__copy { display: flex; flex-direction: column; gap: 1.2rem; }

.plates-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.plates-2 .tai-plate:nth-child(2) { margin-top: clamp(1rem, 4vw, 3rem); }

@media (max-width: 800px) {
  .pair { grid-template-columns: 1fr; }
  .pair--flip .pair__media { order: 0; }
}

/* --------------------------------------------------------------------------
   15. Reviews — with the disclosure the FTC rules actually require
   -------------------------------------------------------------------------- */

.reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule);   border-radius: var(--r-lg); overflow: hidden;
}
.review { background: var(--surface); padding: 1.5rem; display: flex; flex-direction: column; gap: 0.8rem; }
.review__stars { color: var(--amber); font-size: 0.85rem; letter-spacing: 0.15em; }
.review__body { font-size: 0.95rem; line-height: 1.6; }
.review__who { font-family: var(--f-mono); font-size: 0.68rem; color: var(--ink-3); margin-top: auto; }
.review__verified { color: var(--good); }

.disclosure {
  font-family: var(--f-grot);
  font-size: 0.76rem;
  line-height: 1.55;
  color: var(--ink-2);
  background: var(--surface-sunk);
  border: 1px solid var(--rule);
  padding: 0.9rem 1.1rem;
  border-radius: var(--r-md);
}

/* --------------------------------------------------------------------------
   16. FAQ
   -------------------------------------------------------------------------- */

.faq { border-top: 1px solid var(--rule); }
.faq__item { border-bottom: 1px solid var(--rule); }
.faq__q {
  display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  padding: 1.15rem 0;
  cursor: pointer;
  font-family: var(--f-grot); font-size: 0.98rem; font-weight: 600;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after { content: "+"; font-family: var(--f-mono); font-size: 1.15rem; color: var(--amber); flex: none; }
.faq__item[open] .faq__q::after { content: "–"; }
.faq__a { padding-bottom: 1.3rem; max-width: var(--measure); color: var(--ink-2); font-size: 0.96rem; line-height: 1.65; }

/* --------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */

.footer { background: var(--deep); color: var(--on-deep); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, minmax(120px, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.14);
}
.footer__col { display: flex; flex-direction: column; gap: 0.6rem; }
.footer__col a { font-size: 0.88rem; color: var(--on-deep-2); text-decoration: none; }
.footer__col a:hover { color: var(--on-deep); }
.footer__mark { font-family: var(--f-grot); font-weight: 700; letter-spacing: 0.34em; font-size: 1.05rem; }

/* The DSHEA disclaimer is legally required, in boldface, at a minimum type
   size, on every page that carries a structure/function claim. Designing it
   properly instead of burying it is both compliant and, in a low-trust
   category, quietly persuasive. */
.dshea {
  margin-top: 1.75rem;
  border: 1px solid rgba(255,255,255,0.2);
  padding: 1rem 1.15rem;
  font-family: var(--f-grot);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.55;
  color: var(--on-deep);
  max-width: 74ch;
}
.footer__fine {
  margin-top: 1.5rem;
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem;
  font-family: var(--f-mono); font-size: 0.66rem; color: var(--on-deep-2);
}

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

/* --------------------------------------------------------------------------
   18. Product page shell
   -------------------------------------------------------------------------- */

.pdp {
  display: grid;
  grid-template-columns: 1fr minmax(330px, 400px);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  padding-block: clamp(2rem, 5vw, 4rem);
}
.pdp__rail { position: sticky; top: 86px; display: flex; flex-direction: column; gap: 1.25rem; }
.pdp__title { font-size: var(--step-3); line-height: 1.05; letter-spacing: -0.025em; }
.pdp__seq { display: flex; flex-direction: column; gap: 0.75rem; }

/* The vessel is drawn at a fixed presentation size rather than filling its
   column — a 4-inch bottle rendered 800px wide reads as a graphic, not as an
   object you could pick up, and the tub (wider than the bottle) overflowed. */
.pdp__seq .render-stage .tai-render,
.hero__render .tai-render { max-width: 300px; }
.pdp__seq .render-stage { min-height: 420px; }

/* The staggered plate pair is deliberate in the editorial sections, where it
   breaks a rigid grid. Directly under the product render it just reads as
   misalignment, so it squares up here. */
.pdp__seq .plates-2 .tai-plate:nth-child(2) { margin-top: 0; }

/* Three specs in a 400px rail: force one row rather than letting the third
   orphan onto a line of its own. */
.pdp__rail .spec-strip { grid-template-columns: repeat(3, 1fr); }
.pdp__rail .spec { padding: 0.85rem 0.8rem; }
.pdp__rail .spec__v { font-size: 1.1rem; }
.pdp__rail .spec__k { font-size: 0.56rem; letter-spacing: 0.1em; }

@media (max-width: 900px) {
  .pdp { grid-template-columns: 1fr; }
  .pdp__rail { position: static; }
}

/* --------------------------------------------------------------------------
   19. WooCommerce inheritance
   The cart and checkout are Woo's own templates. We do not rebuild them — we
   make them inherit the tokens, because a checkout that looks like a different
   website is where most custom themes visibly fall apart, and on a high-risk
   MID an abandoned checkout is more expensive than usual.
   -------------------------------------------------------------------------- */

.woocommerce-message, .woocommerce-info, .woocommerce-error {
  font-family: var(--f-grot); font-size: 0.88rem;
  background: var(--surface); border: 1px solid var(--rule);
  border-left: 3px solid var(--amber);
  padding: 0.9rem 1.1rem; margin-bottom: 1.25rem; list-style: none;
}
.woocommerce-error { border-left-color: #A3231C; }

.woocommerce table.shop_table {
  width: 100%; border-collapse: collapse;
  font-family: var(--f-grot); font-size: 0.9rem;
  border: 1px solid var(--rule); background: var(--surface);
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  padding: 0.85rem 1rem; border-bottom: 1px solid var(--rule); text-align: left;
}
.woocommerce table.shop_table th { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }

.woocommerce form .form-row { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 1rem; }
.woocommerce form .form-row label { font-family: var(--f-grot); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.woocommerce input[type="text"], .woocommerce input[type="email"], .woocommerce input[type="tel"],
.woocommerce input[type="password"], .woocommerce input[type="number"], .woocommerce select, .woocommerce textarea {
  font-family: var(--f-grot); font-size: 0.95rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--rule-strong); border-radius: 2px;
  background: var(--surface); color: var(--ink); width: 100%;
}
.woocommerce .button, .woocommerce button.button, .woocommerce input.button, .woocommerce a.button {
  font-family: var(--f-grot); font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
  padding: 0.95rem 1.7rem; border: 1px solid var(--ink); border-radius: 2px;
  background: var(--ink); color: var(--paper); cursor: pointer; text-decoration: none;
  display: inline-block;
}
.woocommerce .button:hover { background: var(--deep-2); }
.woocommerce .button.alt { background: var(--amber); border-color: var(--amber); color: #fff; }

.woocommerce .price, .woocommerce-Price-amount {
  font-family: var(--f-mono); font-variant-numeric: tabular-nums;
}

.woocommerce-breadcrumb { font-family: var(--f-mono); font-size: 0.7rem; color: var(--ink-3); margin-bottom: 1.5rem; }

/* Woo's classic coupon row is float-based; without its stylesheet the two
   buttons stack on top of each other. Reflow it as a proper row. */
.woocommerce table.cart td.actions {
  display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: space-between;
}
.woocommerce table.cart td.actions .coupon {
  display: flex; gap: 0.5rem; align-items: center; flex: 1 1 320px; float: none;
}
.woocommerce table.cart td.actions .coupon label { display: none; }
.woocommerce table.cart td.actions .coupon .input-text { flex: 1 1 auto; width: auto; min-width: 0; }
.woocommerce table.cart td.actions .button { float: none; flex: none; }
.woocommerce table.cart td.actions .button[disabled] { opacity: 0.35; cursor: not-allowed; }

/* Cart line thumbnails carry the drawn vessel, so the cart matches the rest of
   the site instead of showing WooCommerce's grey placeholder icon. */
.woocommerce table.cart .tai-cart-thumb { width: 72px; }
.woocommerce table.cart .tai-cart-thumb .tai-render { width: 72px; }
.woocommerce table.cart td.product-thumbnail,
.woocommerce table.cart th.product-thumbnail { width: 96px; }
/* Without an explicit width the remove column absorbs all the slack and
   pushes the thumbnail into the middle of the row. */
.woocommerce table.cart td.product-remove,
.woocommerce table.cart th.product-remove { width: 44px; text-align: center; }
.woocommerce table.cart td.product-remove a { text-decoration: none; color: var(--ink-3); font-size: 1.1rem; }
.woocommerce table.cart td.product-remove a:hover { color: var(--ink); }
.woocommerce table.cart td.product-name { width: auto; }
.woocommerce table.cart td.product-price,
.woocommerce table.cart td.product-subtotal { white-space: nowrap; }

.woocommerce .cart_totals h2, .woocommerce-cart h2 { font-family: var(--f-serif); font-size: var(--step-2); margin-bottom: 1rem; }
.woocommerce .wc-proceed-to-checkout { margin-top: 1.25rem; }

/* Woo's default product grid, for the shop archive */
.woocommerce ul.products {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px; background: var(--rule); border: 1px solid var(--rule); list-style: none;
}
.woocommerce ul.products li.product {
  background: var(--surface); padding: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem;
}
.woocommerce ul.products li.product a { text-decoration: none; color: inherit; }
.woocommerce ul.products li.product h2 { font-family: var(--f-serif); font-size: var(--step-1); }

/* --------------------------------------------------------------------------
   20. Motion — one orchestrated reveal, nothing scattered
   -------------------------------------------------------------------------- */

/* Gated on .js, which an inline script in <head> sets before first paint.
   Without JavaScript — or if this file loads and main.js does not — every
   .reveal stays fully visible instead of leaving the page blank. Content is
   never allowed to depend on a script having run. */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(14px); }
  .js .reveal.is-in {
    opacity: 1; transform: none;
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  }
}

/* --------------------------------------------------------------------------
   21. Utilities
   -------------------------------------------------------------------------- */

.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.scroller { overflow-x: auto; }
.hr { height: 1px; background: var(--rule); border: 0; margin: 0; }

/* ==========================================================================
   22. Protocol finder
   --------------------------------------------------------------------------
   The quiz the reference set uses is an ELIGIBILITY screen: "what is your
   weight loss goal — lose 21-50 lbs". Ro, Found and Noom can ask that because
   a prescription GLP-1 has phase-3 data behind the implied answer.

   A supplement cannot. Asking a buyer to name a pound target and then
   presenting a product is an implied efficacy claim with nothing behind it,
   and it is exactly the shape the FTC's substantiation guidance is aimed at.

   So this asks about OBSTACLES, not targets, and returns a protocol plus a
   safety screen. It is also allowed to answer "none of these, don't buy" —
   which no quiz in the reference set will ever do, and which is the most
   persuasive thing a brand in this category can say.
   ========================================================================== */

.quiz { min-height: 72vh; display: flex; flex-direction: column; }

/* Deep band at the top, like the reference — anchors the flow and makes the
   question field feel like a dedicated surface rather than a page section. */
.quiz-head {
  background: var(--deep);
  color: var(--on-deep);
  padding-block: clamp(2.5rem, 7vw, 4.5rem);
  position: relative;
  overflow: hidden;
}
.quiz-head::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  opacity: 0.14; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.quiz-head__inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 0.9rem; align-items: center; text-align: center; }
.quiz-head__title {
  font-family: var(--f-serif);
  font-size: clamp(1.9rem, 4.4vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  max-width: 20ch;
}
.quiz-head__sub { color: var(--on-deep-2); max-width: 52ch; font-size: 0.98rem; line-height: 1.55; }

.quiz-body { background: var(--surface-sunk); flex: 1; padding-block: clamp(2rem, 5vw, 3.5rem) clamp(3rem, 7vw, 5rem); }
.quiz-shell { max-width: 620px; margin-inline: auto; padding-inline: var(--gutter); }

/* progress + back */
.quiz-bar { display: flex; align-items: center; gap: 1rem; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.quiz-back {
  flex: none; width: 38px; height: 38px; border-radius: var(--r-pill);
  border: 1.5px solid var(--rule-strong); background: transparent; color: var(--ink);
  display: grid; place-items: center; cursor: pointer; font-size: 1rem; line-height: 1;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), opacity 0.2s var(--ease);
}
.quiz-back:hover { background: var(--surface); border-color: var(--ink); }
.quiz-back[hidden] { display: none; }
.quiz-track { flex: 1; height: 5px; border-radius: var(--r-pill); background: var(--rule); overflow: hidden; }
.quiz-fill { height: 100%; width: 0%; background: var(--sage); border-radius: var(--r-pill); transition: width 0.45s var(--ease); }
.quiz-step { font-family: var(--f-mono); font-size: 0.7rem; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* question */
.quiz-q { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.6rem; }
.quiz-q__kicker { font-family: var(--f-grot); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sage); }
.quiz-q__title { font-family: var(--f-serif); font-size: clamp(1.5rem, 3.4vw, 2.1rem); line-height: 1.18; letter-spacing: -0.018em; }
.quiz-q__help { font-size: 0.95rem; color: var(--ink-2); line-height: 1.55; max-width: 46ch; }

.quiz-opts { display: flex; flex-direction: column; gap: 0.7rem; }
.quiz-opt {
  display: flex; flex-direction: column; gap: 0.2rem;
  width: 100%; text-align: left;
  padding: 1.05rem 1.35rem;
  border: 1.5px solid var(--rule-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--f-grot);
  cursor: pointer;
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease), transform 0.18s var(--ease);
}
/* Options with a sub-line need a softer shape — a pill around two lines of
   text reads as a lozenge rather than a control. */
.quiz-opt--stacked { border-radius: var(--r-md); }
.quiz-opt:hover { border-color: var(--ink); transform: translateY(-1px); }
.quiz-opt.is-on { border-color: var(--sage); background: var(--good-wash); }
.quiz-opt__label { font-size: 0.98rem; font-weight: 600; }
.quiz-opt__sub { font-size: 0.86rem; color: var(--ink-2); font-weight: 400; line-height: 1.45; }

.quiz-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; align-items: center; }
.quiz-note { font-size: 0.82rem; color: var(--ink-3); line-height: 1.5; margin-top: 1.25rem; }

/* ---- result ---- */

.quiz-result { display: flex; flex-direction: column; gap: 1.75rem; }
.quiz-result__head { display: flex; flex-direction: column; gap: 0.6rem; }
.quiz-result__title { font-family: var(--f-serif); font-size: clamp(1.7rem, 4vw, 2.5rem); line-height: 1.12; letter-spacing: -0.02em; }
.quiz-result__sub { color: var(--ink-2); line-height: 1.6; }

.rx { display: flex; flex-direction: column; gap: 0.9rem; }
.rx-card {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 1.1rem;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 1.1rem 1.3rem 1.1rem 1.1rem;
}
.rx-card--primary { border-color: var(--sage); box-shadow: 0 0 0 3px var(--good-wash); }
.rx-card__render { display: grid; place-items: center; }
.rx-card__render .tai-render { max-width: 84px; }
.rx-card__body { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.rx-card__top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 0.75rem; }
.rx-card__name { font-family: var(--f-serif); font-size: 1.2rem; line-height: 1.2; }
.rx-card__price { font-family: var(--f-mono); font-size: 0.9rem; margin-left: auto; white-space: nowrap; }
.rx-card__dose {
  /* align-self, or the flex column stretches the pill to the full card width
     and it stops reading as a token. */
  align-self: flex-start;
  font-family: var(--f-mono); font-size: 0.78rem; color: var(--amber);
  background: var(--amber-wash); padding: 0.28em 0.75em; border-radius: var(--r-pill);
}
.rx-card__why { font-size: 0.9rem; color: var(--ink-2); line-height: 1.5; }

/* The honest half: what the result does NOT cover. */
.rx-not {
  background: transparent;
  border: 1px dashed var(--rule-strong);
  border-radius: var(--r-lg);
  padding: 1.1rem 1.3rem;
  display: flex; flex-direction: column; gap: 0.45rem;
}
.rx-not__k { font-family: var(--f-grot); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.rx-not p { font-size: 0.92rem; color: var(--ink-2); line-height: 1.55; }

.rx-total {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.75rem;
  border-top: 1px solid var(--rule); padding-top: 1.1rem;
  font-family: var(--f-grot);
}
.rx-total__k { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.rx-total__v { font-family: var(--f-mono); font-size: 1.25rem; }
.rx-total__was { font-family: var(--f-mono); font-size: 0.85rem; color: var(--ink-3); text-decoration: line-through; margin-left: 0.4rem; }

/* Safety stop — the screen that ends the flow rather than selling. */
.quiz-stop {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--amber);
  border-radius: var(--r-lg);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  display: flex; flex-direction: column; gap: 0.8rem;
}
.quiz-stop__title { font-family: var(--f-serif); font-size: 1.4rem; line-height: 1.2; }
.quiz-stop p { font-size: 0.95rem; color: var(--ink-2); line-height: 1.6; }

@media (prefers-reduced-motion: no-preference) {
  .quiz-pane { animation: quizIn 0.32s var(--ease) both; }
  @keyframes quizIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}

/* --------------------------------------------------------------------------
   23. Logo
   The mark is a tablet seen face-on. Everything inherits currentColor so one
   piece of markup serves the light masthead, the dark footer and the overlay.
   -------------------------------------------------------------------------- */

.tai-logo { height: 22px; width: auto; display: block; overflow: visible; }
.wordmark { display: inline-flex; align-items: center; color: var(--ink); }
.footer__mark .tai-logo { height: 28px; color: var(--on-deep); }
.footer__mark { display: block; }

/* --------------------------------------------------------------------------
   24. Tablet render + frosted stat card
   -------------------------------------------------------------------------- */

.tai-render--tablet { width: 100%; max-width: 460px; }

/* The reference product shots float the object on a warm gradient with a
   single dramatic light. This is that stage. */
.tablet-stage {
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
  padding: clamp(1rem, 4vw, 2.5rem);
}
.tablet-stage::before {
  content: "";
  position: absolute;
  inset: -6% -4%;
  z-index: -1;
  border-radius: 50%;
  background:
    radial-gradient(46% 40% at 40% 32%, rgba(255,236,205,0.85), transparent 66%),
    radial-gradient(70% 62% at 58% 56%, rgba(214,155,88,0.55), transparent 70%);
  filter: blur(30px);
}
.tablet-stage--cool::before {
  background:
    radial-gradient(46% 40% at 40% 32%, rgba(232,240,248,0.8), transparent 66%),
    radial-gradient(70% 62% at 58% 56%, rgba(126,146,178,0.5), transparent 70%);
}

/* Frosted stat card. Same device as the reference hero, deliberately never
   carrying an efficacy number — see tai_stat_card(). */
.statcard {
  display: inline-flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.9rem 1.25rem 1rem;
  border-radius: var(--r-md);
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.22);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  color: #fff;
  text-align: left;
  box-shadow: 0 18px 40px -20px rgba(0,0,0,0.6);
}
.statcard__v {
  font-family: var(--f-grot);
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.statcard__l { font-family: var(--f-grot); font-size: 0.86rem; line-height: 1.3; }
.statcard__f { font-family: var(--f-grot); font-size: 0.68rem; opacity: 0.72; line-height: 1.35; margin-top: 0.15rem; }

/* Parked over the hero image, bottom-right of the stage, like the reference. */
.hero-stage .statcard {
  position: absolute;
  right: clamp(1rem, 3vw, 2.25rem);
  bottom: clamp(9rem, 22vw, 11rem);
  z-index: 2;
  max-width: 15rem;
}
@media (max-width: 900px) {
  .hero-stage .statcard { position: static; align-self: flex-start; }
}

/* --------------------------------------------------------------------------
   25. High-key hero
   --------------------------------------------------------------------------
   The dark, dramatically-lit stage above was the wrong read of the reference.
   The direction is high-key: a pale monochrome ground, the product floating on
   a soft contact shadow, and a large frosted card carrying the price as the
   loudest element on the page.

   Kept from TAI rather than copied: the ground is warm bone drifting to pale
   sage (the forest palette lifted, not a mint), and the product is the amber
   tablet with the mark debossed — so it is recognisably this brand and not a
   recolour of the reference.
   -------------------------------------------------------------------------- */

.hero-stage--light {
  color: var(--ink);
  min-height: clamp(480px, 66vh, 700px);
  align-items: center;
}
.hero-stage--light .hero-stage__field {
  background:
    radial-gradient(58% 52% at 72% 30%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(64% 60% at 24% 78%, rgba(214,226,214,0.75), transparent 68%),
    radial-gradient(80% 70% at 60% 55%, rgba(246,238,225,0.9), transparent 70%),
    linear-gradient(158deg, #F1F3EE 0%, #E7EBE3 48%, #DCE3D9 100%);
  background-color: #EEF1EA;
}
/* No vignette and no grain in high key — both are what made it feel heavy. */
.hero-stage--light::after { background: none; }
.hero-stage--light .hero-stage__grain { display: none; }

.hero-stage--light .hero-stage__eyebrow { color: var(--ink-3); }
.hero-stage--light .hero-stage__title { color: var(--ink); text-shadow: none; }
.hero-stage--light .hero-stage__title em { color: var(--amber); }
.hero-stage--light .hero-stage__lede { color: var(--ink-2); }
.hero-stage--light .hero-props { border-top-color: var(--rule-strong); }
.hero-stage--light .hero-prop span { color: var(--ink-2); }
.hero-stage--light .hero-prop svg { stroke: var(--amber); }

/* On a pale ground the dark pill is the primary and the outline is the
   secondary — the inverse of the arrangement used over a photograph. */
.hero-stage--light .btn--onimage {
  background: var(--ink); border-color: var(--ink); color: var(--paper);
}
.hero-stage--light .btn--onimage:hover { background: var(--deep-2); border-color: var(--deep-2); color: var(--paper); }
.hero-stage--light .btn--outline-light { border-color: var(--ink); color: var(--ink); }
.hero-stage--light .btn--outline-light:hover { background: var(--ink); color: var(--paper); }

/* The product sits in the right-hand cell with a soft contact shadow rather
   than a glow — high key means the shadow does the grounding. */
.hero-object {
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(0.5rem, 2vw, 1.5rem);
}
.hero-object .tai-render { max-width: min(420px, 100%); filter: drop-shadow(0 34px 46px rgba(70,80,68,0.22)); }

/* Frosted card, light variant: the price is the loudest thing in the hero. */
.statcard--light {
  background: rgba(255,255,255,0.82);
  border-color: rgba(255,255,255,0.9);
  color: var(--ink);
  box-shadow: 0 24px 48px -22px rgba(50,60,48,0.4);
  text-align: center;
  align-items: center;
  padding: 1.1rem 1.6rem 1.25rem;
}
.statcard--light .statcard__v { font-weight: 300; font-size: clamp(2.4rem, 5vw, 3.6rem); }
.statcard--light .statcard__l { color: var(--ink-3); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; order: -1; margin-bottom: 0.35rem; }
.statcard--light .statcard__f { color: var(--ink-2); opacity: 1; font-size: 0.78rem; }

/* Overlapping the product, like the reference. */
.hero-object .statcard {
  position: absolute;
  top: 8%;
  right: -4%;
  z-index: 2;
  max-width: 13rem;
}
@media (max-width: 900px) {
  .hero-stage--light { align-items: start; }
  .hero-object .statcard { position: static; margin-top: -1rem; }
  .hero-object { padding-bottom: 0; }
}

/* --------------------------------------------------------------------------
   26. The range (product archive)
   A comparison page, not a catalogue grid — with three SKUs nobody has a
   finding problem, they have a choosing problem.
   -------------------------------------------------------------------------- */

.range-head {
  background:
    radial-gradient(58% 60% at 78% 24%, rgba(255,255,255,0.9), transparent 64%),
    radial-gradient(64% 62% at 20% 82%, rgba(214,226,214,0.7), transparent 68%),
    linear-gradient(158deg, #F1F3EE 0%, #E8ECE4 52%, #DEE4DA 100%);
  border-bottom: 1px solid var(--rule);
  padding-block: clamp(2.75rem, 7vw, 5rem);
}
:root[data-theme="dark"] .range-head,
:root:not([data-theme="light"]) .range-head {
  background:
    radial-gradient(58% 60% at 78% 24%, rgba(40,58,50,0.9), transparent 64%),
    linear-gradient(158deg, #16221C 0%, #111A16 60%, #0C1310 100%);
}
.range-head__inner { display: flex; flex-direction: column; gap: 1.1rem; align-items: flex-start; }
.range-head__actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: 0.5rem; }
.range-head__note { font-family: var(--f-mono); font-size: 0.74rem; color: var(--ink-3); }

.range-grid { display: flex; flex-direction: column; gap: 1.25rem; }

.range-card {
  display: grid;
  grid-template-columns: minmax(220px, 0.85fr) minmax(0, 1.6fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-xl);
  padding: clamp(1.25rem, 3vw, 2rem);
}
.range-card__stage { position: relative; }
.range-card__stage .tai-render { max-width: 260px; }
.range-card__index {
  position: absolute; top: 0; left: 0;
  font-family: var(--f-mono); font-size: 0.78rem; color: var(--ink-3); letter-spacing: 0.12em;
}
.range-card__body { display: flex; flex-direction: column; gap: 0.85rem; min-width: 0; }
.range-card__name { font-family: var(--f-serif); font-size: var(--step-2); line-height: 1.15; letter-spacing: -0.018em; }
.range-card__name a { text-decoration: none; }
.range-card__name a:hover { text-decoration: underline; }
.range-card__lede { color: var(--ink-2); font-size: 0.98rem; line-height: 1.55; max-width: 54ch; }

.range-card__meta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.75rem 1.5rem; margin: 0.25rem 0 0;
  border-top: 1px solid var(--rule); padding-top: 0.9rem;
}
.range-card__meta div { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.range-card__meta dt {
  font-family: var(--f-grot); font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3);
}
.range-card__meta dd { margin: 0; font-family: var(--f-grot); font-size: 0.86rem; line-height: 1.4; }

.range-card__buy {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between;
  border-top: 1px solid var(--rule); padding-top: 1rem; margin-top: 0.25rem;
}
.range-card__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.45rem; }
.range-card__sub { font-family: var(--f-mono); font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.range-card__was { font-family: var(--f-mono); font-size: 0.85rem; color: var(--ink-3); text-decoration: line-through; }
.range-card__per { font-family: var(--f-grot); font-size: 0.74rem; color: var(--ink-3); width: 100%; }

@media (max-width: 780px) {
  .range-card { grid-template-columns: 1fr; }
  .range-card__stage .tai-render { max-width: 200px; }
}

/* comparison table */
.compare-wrap { border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--surface); }
.compare { width: 100%; min-width: 720px; border-collapse: collapse; font-family: var(--f-grot); font-size: 0.88rem; }
.compare th, .compare td { padding: 1rem 1.1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); line-height: 1.5; }
.compare thead th { background: var(--surface-sunk); border-bottom: 1px solid var(--rule-strong); }
.compare thead th:first-child { width: 190px; }
.compare__idx { display: block; font-family: var(--f-mono); font-size: 0.72rem; color: var(--amber); letter-spacing: 0.12em; }
.compare__nm { display: block; font-family: var(--f-serif); font-size: 1.1rem; letter-spacing: 0.02em; }
.compare tbody th {
  font-family: var(--f-grot); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-3);
}
.compare td { color: var(--ink-2); }
/* The row that tells people not to buy is the one worth emphasising. */
.compare__skip th, .compare__skip td { border-bottom: 0; background: var(--amber-wash); }
.compare__skip td { color: var(--ink); }
.compare__skip th { color: var(--amber); }

/* --------------------------------------------------------------------------
   27. Plates: real photography, and objects composited into the fallback
   --------------------------------------------------------------------------
   A plate is a slot. With a photograph imported it shows the photograph; with
   the slot empty it shows the lit gradient — and, where it makes sense, the
   rendered product sitting in that gradient, because an empty gradient reads
   as a broken image however well it is lit.
   -------------------------------------------------------------------------- */

.tai-plate__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tai-plate.has-photo::after { opacity: 0.07; }

.tai-plate__credit {
  position: absolute;
  right: 0.6rem;
  bottom: 0.55rem;
  z-index: 2;
  font-family: var(--f-mono);
  font-size: 0.56rem;
  letter-spacing: 0.05em;
  /* CC0 does not require attribution, but an unreadable credit is worse than
     none — it just looks like a watermark bug. Backed so it reads on any
     photograph, light or dark. */
  color: rgba(255,255,255,0.9);
  background: rgba(12,18,15,0.5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 0.2em 0.5em;
  border-radius: var(--r-pill);
  text-shadow: none;
}

/* The composited object. Scaled and nudged up so it sits in the light rather
   than floating dead-centre, and given its own contact shadow. */
.tai-plate__obj {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: 12%;
}
.tai-plate__obj .tai-render {
  width: 100%;
  max-width: 78%;
  transform: translateY(-4%);
  filter: drop-shadow(0 22px 30px rgba(30,22,10,0.35));
}
.tai-plate--bone .tai-plate__obj .tai-render { filter: drop-shadow(0 22px 30px rgba(90,86,74,0.28)); }

/* With an object in the plate the caption competes with it, so it steps back. */
.tai-plate__obj ~ .tai-plate__cap { opacity: 0.72; }

/* Labelled bottle photograph at the head of a product page. */
.pdp__hero-photo {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--rule);
}
.pdp__hero-photo img { width: 100%; height: auto; display: block; }

/* --------------------------------------------------------------------------
   28. Checkout account notices
   A checkout that silently demands a password reads as a dark pattern. These
   carry the reason, so the requirement reads as one.
   -------------------------------------------------------------------------- */

.tai-why-account {
  background: var(--amber-wash);
  border: 1px solid color-mix(in srgb, var(--amber) 35%, transparent);
  border-left: 3px solid var(--amber);
  border-radius: var(--r-md);
  padding: 1rem 1.15rem;
  margin-bottom: 1.1rem;
  font-family: var(--f-grot);
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 62ch;
}
.tai-why-account strong { color: var(--ink); font-weight: 600; }
.tai-why-account a { color: var(--amber); font-weight: 600; }

.tai-account-optional {
  font-family: var(--f-grot);
  font-size: 0.84rem;
  color: var(--ink-3);
  line-height: 1.5;
  margin-bottom: 0.75rem;
  max-width: 58ch;
}

/* Woo renders the create-account checkbox and password inline; give them room. */
.woocommerce-account-fields { margin-bottom: 1.25rem; }
.woocommerce-account-fields .create-account { margin-top: 0.75rem; }