/* =========================================================================
   TailoredHealth Design System — Colors, Type, & Component Tokens
   -------------------------------------------------------------------------
   Adapted from /tailoredhealth-design-system/project/colors_and_type.css
   plus the website UI kit (Nav, ProfileCard, FormulaCard, Sections).

   Scoped to .th-scope so it only applies to surfaces we've explicitly
   converted (currently: the /dashboard layout). The rest of the app is
   untouched.
   ========================================================================= */

/* ---------- Webfonts ----------------------------------------------------- */
@font-face {
  font-family: "Aeonik Pro";
  src: url(/assets/aeonikpro-regular-cce863306a54970d3f5bee73b30f2647aca98c8bdd8437d96bf588fb38d4f8e5.otf) format("opentype");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aeonik Mono";
  src: url(/assets/aeonikmono-regular-98ab99698b7778db6366062fb676f335d276c9b0cf0ebebafa3ace511f2bc7f6.otf) format("opentype");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Ivar Display";
  src: url(/assets/IvarDisplay-Italic-cb92089c39da6fd6684a1cb58c4bbb21a251399328d2cea4a206f0ed990f6bbb.otf) format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ---------- Tokens ------------------------------------------------------- */
.th-scope {
  /* Primary */
  --th-midnight:   #162A2C;
  --th-midnight-2: #010C11;
  --th-charcoal:   #1E1E1E;
  --th-snow:       #FFFFFF;

  /* Warm neutrals */
  --th-cream:      #F3EEE7;
  --th-bone:       #F7F5F1;
  --th-sand:       #E5E2DC;
  --th-stone:      #525252;
  --th-mist:       #88847C;

  /* Tertiary accents */
  --th-moss:       #CBD1B7;
  --th-lilac:      #B4BBD6;

  /* Status */
  --th-good:       #EAF3EA;
  --th-good-fg:    #538574;
  --th-warn:       #F4E8BD;
  --th-warn-fg:    #8a7300;
  --th-bad:        #FFE8E8;
  --th-bad-fg:     #B23A3A;

  /* Semantic */
  --th-fg-1:       var(--th-charcoal);
  --th-fg-2:       rgba(30, 30, 30, 0.7);
  --th-fg-3:       rgba(30, 30, 30, 0.5);
  --th-fg-on-dark: var(--th-snow);
  --th-fg-on-dark-2: rgba(255, 255, 255, 0.7);
  --th-fg-brand:   var(--th-midnight);

  --th-bg-page:    var(--th-cream);
  --th-bg-paper:   var(--th-cream);
  --th-bg-panel:   var(--th-bone);
  --th-bg-card:    var(--th-snow);
  --th-bg-dark:    var(--th-midnight);

  --th-border-1:   rgba(22, 42, 44, 0.12);
  --th-border-2:   rgba(22, 42, 44, 0.20);
  --th-rule:       var(--th-midnight);

  /* Type */
  --th-font-sans: "Aeonik Pro", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --th-font-mono: "Aeonik Mono", ui-monospace, "Roboto Mono", monospace;
  --th-font-display-italic: "Ivar Display", "Aeonik Pro", Georgia, serif;

  /* Shape */
  --th-radius-xs:   8px;
  --th-radius-sm:   12px;
  --th-radius-md:   16px;
  --th-radius-lg:   20px;
  --th-radius-pill: 9999px;

  --th-shadow-card:     0 1px 2px rgba(22, 42, 44, 0.04), 0 8px 24px rgba(22, 42, 44, 0.06);
  --th-shadow-floating: 0 8px 32px rgba(22, 42, 44, 0.12), 0 1px 2px rgba(22, 42, 44, 0.06);
  --th-shadow-pressed:  inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 0 rgba(22, 42, 44, 0.06);

  /* Motion */
  --th-ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --th-t-fast:      120ms;
  --th-t-base:      220ms;
}

/* ---------- Element resets (scoped) ------------------------------------- */
.th-scope {
  font-family: var(--th-font-sans);
  font-size: 18px;
  line-height: 1.55;
  color: var(--th-fg-1);
  background: var(--th-bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.th-scope .th-em-italic {
  font-family: var(--th-font-display-italic);
  font-style: italic;
  font-weight: 400;
}
/* Emphasis for a single word inside body copy, where an italic serif would sit
   too heavy. Offset/thickness match the link underlines used elsewhere. */
.th-scope .th-em-underline {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* Lucide: keep glyph boxes after replacement, including icons that started
   inside display:none screens (confirm-details chips). Stepper checks hide
   via their wrapper — do not put display rules on the glyph itself. */
.th-scope i[data-lucide],
.th-scope svg.lucide,
.th-scope svg[data-lucide] {
  display: inline-block;
  flex-shrink: 0;
  overflow: visible;
  vertical-align: middle;
}

/* ---------- Typography utilities ---------------------------------------- */
.th-eyebrow {
  font-family: var(--th-font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--th-fg-1);
}
.th-eyebrow-mini { font-size: 10px; opacity: 0.7; }

.th-h1 {
  font: 400 clamp(36px, 4.4vw, 56px)/1.04 var(--th-font-sans);
  letter-spacing: -0.02em;
  color: var(--th-midnight);
  margin: 0;
}
.th-h1 em, .th-h1 .th-em-italic {
  font-family: var(--th-font-display-italic);
  font-style: italic;
  font-weight: 400;
}

.th-h2 {
  font: 400 clamp(28px, 3.2vw, 40px)/1.08 var(--th-font-sans);
  letter-spacing: -0.015em;
  color: var(--th-midnight);
  margin: 0;
}
.th-h2 em { font-family: var(--th-font-display-italic); font-style: italic; font-weight: 400; }

.th-h3 {
  font: 500 20px/1.2 var(--th-font-sans);
  letter-spacing: 0;
  color: var(--th-midnight);
  margin: 0;
}

.th-body { font: 400 16px/1.55 var(--th-font-sans); color: var(--th-fg-1); }
.th-body-sm { font: 400 14px/1.55 var(--th-font-sans); color: var(--th-fg-2); }
.th-mono { font-family: var(--th-font-mono); font-size: 12px; letter-spacing: 0.02em; color: var(--th-fg-2); }

.th-rule { border: 0; border-top: 1px solid var(--th-rule); margin: 0; opacity: 0.9; }

/* Label for controls whose meaning is carried by an icon alone. */
.th-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Buttons (pill-shaped, brand signature) ---------------------- */
.th-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 24px;
  border-radius: var(--th-radius-pill);
  border: 0;
  font: 500 14px/1 var(--th-font-sans);
  cursor: pointer;
  transition: background var(--th-t-base) var(--th-ease-out), color var(--th-t-base) var(--th-ease-out), transform var(--th-t-fast) var(--th-ease-out);
  text-decoration: none;
  white-space: nowrap;
}
/* The display above outranks the UA `[hidden]` rule, so without this every
   button the JS hides stays on screen and clickable — including CTAs that are
   meant to appear only once the work behind them has finished. */
.th-btn[hidden] { display: none !important; }
.th-btn-primary { background: var(--th-midnight); color: var(--th-snow); }
.th-btn-primary:hover { background: #22383a; color: var(--th-snow); }
.th-btn-primary:active { transform: scale(0.99); box-shadow: var(--th-shadow-pressed); }
.th-btn-primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.th-btn-primary:disabled:hover { background: var(--th-midnight); }

.th-btn-secondary {
  background: var(--th-snow);
  color: var(--th-midnight);
  border: 1px solid var(--th-border-1);
}
.th-btn-secondary:hover { background: var(--th-bone); }

.th-btn-ghost {
  background: transparent;
  color: var(--th-midnight);
  padding: 0 16px;
  height: 36px;
}
.th-btn-ghost:hover { background: rgba(22, 42, 44, 0.06); }

.th-btn-sm { height: 36px; padding: 0 18px; font-size: 13px; }

/* In-button progress for actions that wait on the network. currentColor keeps
   it legible on every button variant without a per-variant override. */
.th-btn-spinner {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  opacity: 0.75;
  animation: th-spin 0.7s linear infinite;
}

.th-link-underline {
  color: var(--th-fg-1);
  text-decoration: underline;
  text-underline-offset: 3px;
  font: 400 14px/1 var(--th-font-sans);
  transition: color var(--th-t-base) var(--th-ease-out);
}
.th-link-underline:hover { color: var(--th-midnight); text-decoration: none; }

/* ---------- Cards ------------------------------------------------------- */
.th-card {
  background: var(--th-bg-card);
  border-radius: var(--th-radius-md);
  padding: 24px;
  box-shadow: var(--th-shadow-card);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.th-card-floating { box-shadow: var(--th-shadow-floating); }
.th-card-panel { background: var(--th-bg-panel); box-shadow: none; }
.th-card-dark { background: var(--th-midnight); color: var(--th-fg-on-dark); }
.th-card-dark .th-h3 { color: var(--th-fg-on-dark); }
.th-card-dark .th-mono { color: var(--th-fg-on-dark-2); }

a.th-card { text-decoration: none; color: inherit; transition: box-shadow var(--th-t-base) var(--th-ease-out), transform var(--th-t-fast) var(--th-ease-out); }
a.th-card:hover { box-shadow: var(--th-shadow-floating); }
a.th-card:active { transform: translateY(1px); }

/* ---------- Tags / chips ------------------------------------------------ */
.th-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.th-tag {
  padding: 6px 12px;
  border-radius: var(--th-radius-xs);
  background: var(--th-bone);
  font: 500 12px/1 var(--th-font-sans);
  color: var(--th-fg-1);
}

.th-chip {
  padding: 4px 10px;
  border-radius: var(--th-radius-pill);
  font: 500 11px/1 var(--th-font-sans);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.th-dot { width: 5px; height: 5px; border-radius: 999px; flex-shrink: 0; }
.th-chip-good { background: var(--th-good); color: var(--th-good-fg); }
.th-chip-good .th-dot { background: var(--th-good-fg); }
.th-chip-warn { background: var(--th-warn); color: var(--th-warn-fg); }
.th-chip-warn .th-dot { background: var(--th-warn-fg); }
.th-chip-bad  { background: var(--th-bad);  color: var(--th-bad-fg); }
.th-chip-bad  .th-dot { background: var(--th-bad-fg); }
.th-chip-neutral { background: var(--th-bone); color: var(--th-fg-2); }
.th-chip-neutral .th-dot { background: var(--th-fg-2); }

/* ---------- Lab list (used in ProfileCard / FormulaCard) ---------------- */
.th-lab-list { display: flex; flex-direction: column; gap: 10px; }
.th-lab-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font: 400 14px/1.3 var(--th-font-sans);
  color: var(--th-fg-1);
}
.th-lab-row > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Nav --------------------------------------------------------- */
/* The .th-nav-stack wraps the (optional) impersonation bar + the main nav so
   they scroll-stick together as one block. */
.th-nav-stack {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--th-snow);
  border-bottom: 1px solid var(--th-border-1);
}
.th-nav {
  background: var(--th-snow);
}
.th-nav-inner {
  max-width: 1040px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 32px;
}
.th-nav-section { display: flex; align-items: center; gap: 24px; min-width: 0; }
.th-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  text-decoration: none;
  color: var(--th-midnight);
  flex-shrink: 0;
}
.th-wm-name { font: 500 26px/1 var(--th-font-sans); letter-spacing: -0.01em; }
.th-wm-sup { font: 500 13px/1 var(--th-font-sans); letter-spacing: 0.06em; transform: translateY(-9px); display: inline-block; }

/* Brand image logo. Use .th-brand-logo--lg / --xl for splash sizing.
   Aspect ratio is fixed at the source image (1080x221 ≈ 4.886:1). */
.th-brand-logo {
  display: block;
  height: 28px;
  width: auto;
  flex-shrink: 0;
}
.th-brand-logo--sm { height: 22px; }
.th-brand-logo--md { height: 34px; }
.th-brand-logo--lg { height: 42px; }
.th-brand-logo--xl { height: clamp(56px, 9vw, 96px); }
.th-nav-eyebrow {
  border-left: 1px solid var(--th-border-1);
  padding-left: 16px;
  margin-left: 4px;
  font: 500 12px/1 var(--th-font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--th-fg-2);
}
.th-nav-links { display: flex; align-items: center; gap: 6px; }
.th-nav-link {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  border-radius: var(--th-radius-pill);
  color: var(--th-fg-1);
  text-decoration: none;
  font: 500 14px/1 var(--th-font-sans);
  transition: background var(--th-t-base) var(--th-ease-out), color var(--th-t-base) var(--th-ease-out);
}
.th-nav-link:hover { background: rgba(22, 42, 44, 0.06); color: var(--th-midnight); }
.th-nav-link-active {
  background: var(--th-midnight);
  color: var(--th-snow);
}
.th-nav-link-active:hover { background: #22383a; color: var(--th-snow); }
.th-nav-link--locked {
  color: var(--th-fg-3);
}
.th-nav-link--locked:hover {
  color: var(--th-fg-2);
  background: rgba(22, 42, 44, 0.04);
}
.th-nav-link--locked.th-nav-link-active {
  background: var(--th-sand);
  color: var(--th-fg-2);
}
.th-nav-link--locked.th-nav-link-active:hover {
  background: var(--th-sand);
  color: var(--th-fg-2);
}
.th-nav-lock {
  display: inline-flex;
  align-items: center;
  margin-left: 2px;
  vertical-align: super;
  line-height: 0;
  color: inherit;
}
.th-nav-lock i,
.th-nav-lock svg {
  width: 9px;
  height: 9px;
  display: block;
}

.th-nav-user { display: flex; align-items: center; gap: 10px; position: relative; }
.th-nav-user-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px 4px 12px;
  background: transparent;
  border: 0;
  border-radius: var(--th-radius-pill);
  cursor: pointer;
  transition: background var(--th-t-base) var(--th-ease-out);
  font-family: var(--th-font-sans);
}
.th-nav-user-trigger:hover { background: rgba(22, 42, 44, 0.06); }
.th-avatar {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--th-midnight);
  color: var(--th-snow);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 500 13px/1 var(--th-font-sans);
  flex-shrink: 0;
}
.th-nav-user-meta { text-align: right; line-height: 1.2; }
.th-nav-user-name { font: 500 13px/1.2 var(--th-font-sans); color: var(--th-midnight); }
.th-nav-user-sub { font: 400 11px/1.2 var(--th-font-sans); color: var(--th-fg-2); }

/* .th-menu uses the existing dropdown_controller.js, which toggles
   tailwind classes (opacity-0 / invisible / scale-95, etc). We only
   provide the visual chrome here. */
.th-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 12px);
  min-width: 220px;
  background: var(--th-snow);
  border-radius: var(--th-radius-md);
  box-shadow: var(--th-shadow-floating);
  padding: 8px;
  transform-origin: top right;
  z-index: 50;
}
.th-menu-header { padding: 12px 12px 10px; border-bottom: 1px solid var(--th-border-1); margin-bottom: 4px; }
.th-menu-eyebrow { font: 500 10px/1 var(--th-font-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--th-fg-2); margin-bottom: 4px; }
.th-menu-email { font: 500 13px/1.3 var(--th-font-sans); color: var(--th-midnight); word-break: break-all; }
.th-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: none;
  border: 0;
  border-radius: var(--th-radius-sm);
  color: var(--th-fg-1);
  font: 400 14px/1 var(--th-font-sans);
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--th-t-fast) var(--th-ease-out);
}
.th-menu-item:hover { background: var(--th-bone); }
.th-menu-item-active,
.th-menu-item-active:hover {
  background: var(--th-midnight);
  color: var(--th-snow);
}
.th-menu-item--locked {
  color: var(--th-fg-3);
}
.th-menu-item--locked:hover {
  color: var(--th-fg-2);
}
.th-menu-item--locked.th-menu-item-active,
.th-menu-item--locked.th-menu-item-active:hover {
  background: var(--th-sand);
  color: var(--th-fg-2);
}

/* In-dropdown primary nav (sm/md only). The links live in the DOM at all
   widths so the dropdown stays a single component, but they're hidden on
   wider screens where the inline .th-nav-links is visible instead. */
.th-menu-nav { display: none; }
.th-menu-nav-eyebrow { padding: 8px 12px 6px; }
.th-menu-divider {
  height: 1px;
  background: var(--th-border-1);
  margin: 6px -8px 4px;
}

/* ---------- Mobile nav -------------------------------------------------- */
.th-nav-toggle { display: none; }
@media (max-width: 900px) {
  .th-nav-inner { padding: 14px 20px; }
  .th-nav-links { display: none; }
  .th-nav-eyebrow { display: none; }
  .th-menu-nav { display: block; }
}

/* ---------- Page hero (cream, no photo) --------------------------------- */
.th-page-hero {
  max-width: 1280px;
  margin: 0 auto;
  padding: 56px 32px 24px;
}
@media (max-width: 900px) { .th-page-hero { padding: 32px 20px 16px; } }
.th-page-hero-eyebrow { color: var(--th-fg-2); margin-bottom: 16px; }
.th-page-hero-eyebrow .th-rule-tab {
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--th-rule);
  vertical-align: middle;
  margin-right: 12px;
  opacity: 0.6;
}
.th-page-hero-title { margin-bottom: 16px; }
.th-page-hero-sub { color: var(--th-fg-2); max-width: 620px; }

.th-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--th-fg-2);
  text-decoration: none;
  font: 500 12px/1 var(--th-font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 24px;
  transition: color var(--th-t-base) var(--th-ease-out);
}
.th-back-link:hover { color: var(--th-midnight); }

/* ---------- Content container ------------------------------------------- */
.th-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px 32px 96px;
}
@media (max-width: 900px) { .th-container { padding: 16px 20px 64px; } }

/* ---------- Home dashboard (conversion hub) ----------------------------- */
.th-home {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Row 1: welcome header (7/12) + status/todos (5/12) */
.th-home-header {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 20px;
  align-items: center;
  margin-top: 16px;
}
.th-home-hero {
  display: flex;
  flex-direction: column;
}
.th-home-hero .th-page-hero-eyebrow { margin-bottom: 12px; }
.th-home-hero .th-page-hero-title { margin-bottom: 12px; }
.th-home-hero .th-page-hero-sub { max-width: 520px; }

/* Row 2: profile overview (5/12) + formula (7/12) */
.th-home-top {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 20px;
  align-items: stretch;
}

.th-home-profile {
  animation: th-plan-enter 420ms var(--th-ease-out) both;
}
.th-home-profile-notes {
  position: relative;
  overflow: hidden;
}
/* Fade the clipped bottom edge only while collapsed and overflowing. */
.th-home-profile.has-overflow:not(.is-expanded) .th-home-profile-notes::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 44px;
  background: linear-gradient(rgba(255, 255, 255, 0), var(--th-bg-card));
  pointer-events: none;
}
.th-home-profile.is-expanded .th-home-profile-notes { overflow: visible; }
.th-home-profile-notes-body {
  margin: 0;
  color: var(--th-fg-2);
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-line;
}
.th-home-profile-notes-body span { display: block; }
.th-home-profile-notes-body span + span { margin-top: 9px; }
.th-home-profile-notes-placeholder {
  margin: 0;
  max-width: 62ch;
  color: var(--th-fg-3);
  font-family: var(--th-font-display-italic);
  font-style: italic;
  font-size: 14px;
  line-height: 1.6;
}
.th-notes-expand {
  align-self: flex-start;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: 500 13px/1 var(--th-font-sans);
  color: var(--th-midnight);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--th-t-base) var(--th-ease-out);
}
.th-notes-expand:hover { color: var(--th-fg-1); }
.th-notes-expand[hidden] { display: none; }

/* Status card (stepper + todos) and Formula card (preview + CTAs) */
.th-status-card,
.th-formula-card {
  gap: 14px;
  animation: th-plan-enter 480ms var(--th-ease-out) both;
  animation-delay: 60ms;
}
.th-formula-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
/* Two columns of ingredients (4 per column), balanced top-to-bottom so the
   list grows downward when expanded via "Show all". */
.th-formula-ingredients {
  column-count: 2;
  column-gap: 28px;
}
.th-formula-ingredients .th-lab-row {
  break-inside: avoid;
  margin-bottom: 9px;
}
.th-formula-ingredients.is-collapsed .th-lab-row:nth-child(n+7) { display: none; }

.th-formula-showall {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: var(--th-fg-1);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--th-t-base) var(--th-ease-out);
}
.th-formula-showall:hover { color: var(--th-midnight); }
.th-formula-meta-sep { margin: 0 4px; color: var(--th-fg-3); }
.th-status-todos {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--th-border-1);
}
/* Stepper/todos on the left, product jar on the right. */
.th-status-card-body {
  display: grid;
  grid-template-columns: 1fr minmax(96px, 132px);
  gap: 20px;
  align-items: center;
}
.th-status-card-main {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.th-status-jar {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
}
.th-status-jar-img {
  width: 100%;
  max-width: 132px;
  height: auto;
  display: block;
  animation: th-jar-float 4.5s var(--th-ease-out) infinite alternate;
}
@keyframes th-jar-float {
  from { transform: translateY(0); }
  to   { transform: translateY(-5px); }
}
@media (max-width: 520px) {
  .th-status-card-body { grid-template-columns: 1fr; }
  .th-status-jar { display: none; }
}
.th-plan-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.th-plan-stepper {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.th-plan-step {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 12px;
  position: relative;
  padding-bottom: 11px;
}
.th-plan-step:last-child { padding-bottom: 0; }
.th-plan-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 20px;
  bottom: 0;
  width: 1px;
  background: var(--th-border-1);
}
.th-plan-step--complete:not(:last-child)::before {
  background: var(--th-good-fg);
  opacity: 0.45;
}
.th-plan-step-marker {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 1.5px solid var(--th-border-2);
  background: var(--th-snow);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  z-index: 1;
  color: var(--th-snow);
}
.th-plan-step--complete .th-plan-step-marker {
  background: var(--th-good-fg);
  border-color: var(--th-good-fg);
}
.th-plan-step--current .th-plan-step-marker {
  border-color: var(--th-midnight);
  background: var(--th-midnight);
  box-shadow: 0 0 0 3px rgba(22, 42, 44, 0.12);
}
.th-plan-step--upcoming .th-plan-step-marker {
  border-color: var(--th-border-1);
  background: var(--th-bone);
}
.th-plan-step-title {
  font: 500 14px/1.25 var(--th-font-sans);
  color: var(--th-midnight);
}
.th-plan-step--upcoming .th-plan-step-title { color: var(--th-fg-3); }
.th-plan-step-desc {
  font: 400 13px/1.4 var(--th-font-sans);
  color: var(--th-fg-2);
  margin-top: 2px;
}
.th-plan-step--upcoming .th-plan-step-desc { color: var(--th-fg-3); }

.th-plan-formula {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.th-plan-formula-more { margin: 0; color: var(--th-fg-2); }
.th-plan-formula-meta { margin: 0; color: var(--th-fg-3); }
.th-plan-outstanding-link {
  text-decoration: none;
  color: inherit;
}
.th-plan-outstanding-link:hover .th-plan-outstanding-text > span:first-child {
  color: var(--th-midnight);
}
.th-plan-outstanding-text {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.th-plan-outstanding-optional {
  font: 500 11px/1 var(--th-font-sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--th-fg-3);
  border: 1px solid var(--th-border-1);
  border-radius: 999px;
  padding: 3px 7px;
}

.th-plan-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding-top: 18px;
  border-top: 1px solid var(--th-border-1);
}
.th-plan-price {
  width: 100%;
  margin: 2px 0 0;
  color: var(--th-fg-3);
}

/* Summary row: labs, questionnaire, genetics */
.th-home-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.th-summary-card {
  gap: 14px;
  min-height: 0;
  animation: th-plan-enter 480ms var(--th-ease-out) both;
  animation-delay: 100ms;
}
.th-summary-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.th-summary-stat {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.th-summary-stat-value {
  font: 400 34px/1 var(--th-font-sans);
  letter-spacing: -0.02em;
  color: var(--th-midnight);
}
.th-summary-stat-label {
  font: 400 13px/1 var(--th-font-sans);
  color: var(--th-fg-3);
}
/* Compact lab rows with history sparkline (line + status dot). */
.th-lab-spark-list { display: flex; flex-direction: column; gap: 9px; }
.th-lab-spark-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
}
.th-lab-spark-name {
  font: 400 14px/1.3 var(--th-font-sans);
  color: var(--th-fg-1);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.th-lab-spark-line { display: inline-flex; align-items: center; justify-content: flex-end; }
.th-lab-spark-line svg { display: block; }

.th-summary-block { display: flex; flex-direction: column; gap: 8px; }
.th-summary-block-label {
  font: 500 10px/1 var(--th-font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--th-fg-3);
}
.th-summary-meta {
  margin: 0;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--th-border-1);
  color: var(--th-fg-3);
}

.th-home-account-link {
  text-align: center;
  margin-top: 16px;
}

@keyframes th-plan-enter {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1100px) {
  .th-home-header,
  .th-home-top {
    grid-template-columns: 1fr;
  }
  .th-home-header { align-items: start; margin-top: 8px; }
  .th-home-profile { min-height: 0; }
  .th-formula-card { min-height: 0; }
}

@media (max-width: 900px) {
  .th-home-summary {
    grid-template-columns: 1fr;
  }
  .th-plan-actions .th-btn { flex: 1 1 auto; justify-content: center; }
}

@media (max-width: 560px) {
  .th-formula-ingredients {
    grid-auto-flow: row;
    grid-template-rows: none;
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .th-status-card,
  .th-formula-card,
  .th-home-profile,
  .th-summary-card,
  .th-status-jar-img { animation: none; }
  .th-reveal-hero-stat { animation: none; }
  .th-reveal-step { animation: none; }
}

/* ---------- Footer ------------------------------------------------------ */
.th-footer {
  background: var(--th-midnight);
  color: var(--th-fg-on-dark);
  padding: 56px 32px 32px;
  margin-top: 48px;
}
.th-footer-inner { max-width: 1280px; margin: 0 auto; }
.th-footer-operator {
  font: 500 14px/1.5 var(--th-font-sans);
  color: var(--th-fg-on-dark);
  margin: 0 0 12px;
  max-width: 920px;
}
.th-footer-disclaimer {
  font: 400 12px/1.6 var(--th-font-sans);
  color: var(--th-fg-on-dark-2);
  max-width: 920px;
  margin-bottom: 40px;
}
.th-footer-disclaimer a { color: var(--th-fg-on-dark); text-decoration: underline; }
.th-footer-bottom {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  align-items: flex-start;
}
@media (min-width: 700px) {
  .th-footer-bottom { flex-direction: row; align-items: center; justify-content: space-between; }
}
.th-footer-copy {
  font-family: var(--th-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
}

/* ---------- Impersonation bar (TH variant) ------------------------------ */
.th-impersonation-bar {
  position: relative;
  background: var(--th-warn);
  color: var(--th-warn-fg);
  border-bottom: 1px solid rgba(138, 115, 0, 0.18);
}
.th-impersonation-bar-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 8px 20px;
  font: 500 13px/1 var(--th-font-sans);
}
.th-impersonation-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 11px;
  opacity: 0.9;
}
.th-impersonation-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(138, 115, 0, 0.22);
  color: var(--th-warn-fg);
  border-radius: var(--th-radius-pill);
  padding: 4px 12px;
  font: 500 13px/1 var(--th-font-sans);
  cursor: pointer;
  transition: background var(--th-t-base) var(--th-ease-out);
}
.th-impersonation-name:hover { background: rgba(255, 255, 255, 0.85); }
.th-btn-impersonation-exit {
  background: var(--th-warn-fg);
  color: var(--th-snow);
  height: 28px;
  padding: 0 14px;
  font-size: 12px;
}
.th-btn-impersonation-exit:hover { background: #6b5a00; color: var(--th-snow); }

/* Centered metadata panel — opens beneath the impersonation bar.
   Uses actions-dropdown_controller, which simply toggles `hidden`. */
.th-impersonation-panel {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  margin-top: 8px;
  width: min(440px, calc(100vw - 32px));
  background: var(--th-snow);
  color: var(--th-fg-1);
  border-radius: var(--th-radius-md);
  box-shadow: var(--th-shadow-floating);
  border: 1px solid var(--th-border-1);
  z-index: 60;
  overflow: hidden;
}
.th-impersonation-panel-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--th-border-1);
  font: 500 11px/1 var(--th-font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--th-fg-2);
}
.th-impersonation-fields { padding: 4px 0; }
.th-impersonation-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  transition: background var(--th-t-fast) var(--th-ease-out);
}
.th-impersonation-field:hover { background: var(--th-bone); }
.th-impersonation-field-label {
  font: 500 10px/1.2 var(--th-font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--th-fg-2);
}
.th-impersonation-field-value {
  font: 400 13px/1.3 var(--th-font-sans);
  color: var(--th-midnight);
  word-break: break-all;
  margin-top: 3px;
}
.th-impersonation-field-value.th-mono { font-family: var(--th-font-mono); font-size: 12px; }
.th-impersonation-field-empty {
  font: 500 10px/1 var(--th-font-sans);
  color: var(--th-bad-fg);
  background: var(--th-bad);
  padding: 4px 8px;
  border-radius: var(--th-radius-pill);
  margin-top: 4px;
  display: inline-block;
}
.th-copy-btn {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  border-radius: var(--th-radius-sm);
  color: var(--th-fg-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--th-t-fast) var(--th-ease-out), color var(--th-t-fast) var(--th-ease-out);
}
.th-copy-btn:hover { background: var(--th-bone); color: var(--th-midnight); }

/* =========================================================================
   PAGE-LEVEL HELPERS
   ------------------------------------------------------------------------- */

/* ---------- Section + page card ----------------------------------------- */
/* `.th-section` is the standard wrapper used between hero and footer for
   sub-pages. It mirrors `.th-container` width but with adjusted padding so
   pages can stack multiple cards inside it. */
.th-section {
  max-width: 1280px;
  margin: 0 auto;
  padding: 8px 32px 64px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media (max-width: 900px) { .th-section { padding: 8px 20px 48px; gap: 16px; } }

/* `.th-page-card` is a roomier white card used for the dense pages
   (formula, lifestyle, genetics, labs, account). Provides its own padding. */
.th-page-card {
  background: var(--th-bg-card);
  border-radius: var(--th-radius-md);
  box-shadow: var(--th-shadow-card);
  overflow: hidden;
}
.th-page-card-body { padding: 24px 28px; }
@media (max-width: 640px) { .th-page-card-body { padding: 18px 18px; } }

.th-page-card-header {
  padding: 20px 28px;
  border-bottom: 1px solid var(--th-border-1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
@media (max-width: 640px) { .th-page-card-header { padding: 16px 18px; } }
.th-page-card-header-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.th-page-card-header-meta .th-eyebrow { color: var(--th-fg-2); }

/* Eyebrow + title + sub combo, used inline at the top of cards/sections */
.th-section-head { display: flex; flex-direction: column; gap: 6px; }
.th-section-head-eyebrow {
  font: 500 11px/1 var(--th-font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--th-fg-2);
}
.th-section-head-title { font: 500 18px/1.25 var(--th-font-sans); color: var(--th-midnight); margin: 0; }
.th-section-head-sub { font: 400 13px/1.5 var(--th-font-sans); color: var(--th-fg-2); margin: 0; }

/* Soft inset panel used inside cards (was `bg-slate-50 rounded-xl`). */
.th-soft-panel {
  background: var(--th-bone);
  border-radius: var(--th-radius-sm);
  border: 1px solid var(--th-border-1);
  padding: 16px;
}
.th-soft-panel--flush { padding: 0; overflow: hidden; }

/* Small soft tile for vitals/grid stats (was the white square cards). */
.th-soft-tile {
  background: var(--th-snow);
  border: 1px solid var(--th-border-1);
  border-radius: var(--th-radius-sm);
  padding: 12px 14px;
}
.th-soft-tile--dashed { border-style: dashed; background: var(--th-bone); }
.th-soft-tile-label {
  font: 500 10px/1 var(--th-font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--th-fg-3);
  margin-bottom: 6px;
}
.th-soft-tile-value { font: 500 14px/1.2 var(--th-font-sans); color: var(--th-midnight); }
.th-soft-tile-value--placeholder { color: var(--th-fg-3); font-style: italic; font-family: var(--th-font-display-italic); }

/* ---------- Status helpers ---------------------------------------------- */
/* Inline status pill inside table rows / list items. Slightly tighter than
   the chip variants used for hero cards. */
.th-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--th-radius-pill);
  font: 500 11px/1 var(--th-font-sans);
  white-space: nowrap;
}
.th-status--good { background: var(--th-good); color: var(--th-good-fg); }
.th-status--warn { background: var(--th-warn); color: var(--th-warn-fg); }
.th-status--bad  { background: var(--th-bad);  color: var(--th-bad-fg); }
.th-status--neutral { background: var(--th-bone); color: var(--th-fg-2); }
.th-status--midnight { background: var(--th-midnight); color: var(--th-snow); }
.th-status--support {
  background: rgba(22, 42, 44, 0.08);
  color: var(--th-midnight);
}

/* Just a colored dot (used in legends, list rows). */
.th-status-dot { width: 6px; height: 6px; border-radius: 999px; flex-shrink: 0; display: inline-block; }
.th-status-dot--good { background: var(--th-good-fg); }
.th-status-dot--warn { background: var(--th-warn-fg); }
.th-status-dot--bad  { background: var(--th-bad-fg); }
.th-status-dot--neutral { background: var(--th-fg-3); }

/* ---------- Tab pill group --------------------------------------------- */
.th-tab-group { display: flex; flex-wrap: wrap; gap: 6px; }
.th-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border-radius: var(--th-radius-pill);
  background: var(--th-bone);
  color: var(--th-fg-2);
  font: 500 12px/1 var(--th-font-sans);
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--th-t-base) var(--th-ease-out), color var(--th-t-base) var(--th-ease-out);
}
.th-tab:hover { background: rgba(22, 42, 44, 0.08); color: var(--th-midnight); }
.th-tab-active, .th-tab[aria-selected="true"] {
  background: var(--th-midnight);
  color: var(--th-snow);
}
.th-tab-active:hover { background: #22383a; color: var(--th-snow); }

/* Mobile horizontal tab strip (used in labs filters). */
.th-tab-scroll {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.th-tab-scroll::-webkit-scrollbar { display: none; }
.th-tab-scroll .th-tab { flex-shrink: 0; }

/* ---------- Form inputs ------------------------------------------------- */
.th-form-label {
  display: block;
  font: 500 11px/1 var(--th-font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--th-fg-2);
  margin-bottom: 6px;
}
.th-form-input,
.th-form-select,
.th-form-textarea {
  display: block;
  width: 100%;
  background: var(--th-snow);
  color: var(--th-midnight);
  border: 1px solid var(--th-border-1);
  border-radius: var(--th-radius-sm);
  padding: 10px 14px;
  font: 400 14px/1.4 var(--th-font-sans);
  transition: border-color var(--th-t-base) var(--th-ease-out), box-shadow var(--th-t-base) var(--th-ease-out);
  outline: 0;
  -webkit-appearance: none;
  appearance: none;
}
.th-form-input::placeholder,
.th-form-textarea::placeholder { color: var(--th-fg-3); }
.th-form-input:focus,
.th-form-select:focus,
.th-form-textarea:focus {
  border-color: var(--th-midnight);
  box-shadow: 0 0 0 3px rgba(22, 42, 44, 0.1);
}
.th-form-input:disabled,
.th-form-select:disabled {
  background: var(--th-bone);
  color: var(--th-fg-3);
  cursor: not-allowed;
}
.th-form-textarea { resize: vertical; min-height: 96px; }
.th-form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%231e1e1e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M3 4.5L6 7.5L9 4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

.th-form-search {
  position: relative;
}
.th-form-search > i, .th-form-search > svg, .th-form-search > [data-lucide] {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--th-fg-3);
  pointer-events: none;
}
.th-form-search > .th-form-input { padding-left: 40px; }

/* ---------- Choice pills (sign-up lab provider, etc.) ------------------- */
.th-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 8px;
}
.th-choice {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.th-choice-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.th-choice-label {
  flex: 1;
  padding: 11px 14px;
  border: 1px solid var(--th-border-1);
  border-radius: var(--th-radius-sm);
  background: var(--th-snow);
  font: 400 14px/1.2 var(--th-font-sans);
  color: var(--th-fg-1);
  text-align: center;
  transition: border-color var(--th-t-fast) var(--th-ease-out),
              background var(--th-t-fast) var(--th-ease-out),
              color var(--th-t-fast) var(--th-ease-out);
}
.th-choice:hover .th-choice-label { border-color: var(--th-border-2); }
.th-choice-input:checked + .th-choice-label {
  border-color: var(--th-midnight);
  background: var(--th-midnight);
  color: var(--th-snow);
}
.th-choice-input:focus-visible + .th-choice-label {
  outline: 2px solid var(--th-midnight);
  outline-offset: 2px;
}

/* ---------- Inline field validation ------------------------------------ */
.th-field { display: flex; flex-direction: column; }
.th-field-error {
  margin: 6px 0 0;
  font: 500 12px/1.35 var(--th-font-sans);
  color: var(--th-bad-fg);
  display: flex;
  align-items: center;
  gap: 5px;
}
/* Ensure the `hidden` attribute wins over the flex display above/below so
   errors stay hidden until shown (class selectors beat the UA [hidden] rule). */
.th-field-error[hidden],
.th-alert[hidden] { display: none !important; }
.th-form-input.th-input-error { border-color: var(--th-bad-fg); }
.th-form-input.th-input-error:focus {
  border-color: var(--th-bad-fg);
  box-shadow: 0 0 0 3px rgba(178, 58, 58, 0.12);
}
.th-choice-grid--error .th-choice-label { border-color: var(--th-bad-fg); }

/* ---------- Modal ------------------------------------------------------- */
/* All TH modals use a fixed cream-tinted backdrop and a white panel with the
   floating shadow. Existing controllers (`modal`, `formula-ai-summary`,
   `formula-risk-modal`, `dashboard-labs`, `labs-report`, `report-text-modal`,
   `labs-delete`) all toggle the `hidden` class or move classes around their
   own targets — these styles only provide chrome. */
.th-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(22, 42, 44, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
/* Stimulus controllers toggle the `hidden` class to show/close modals.
   `.th-modal-backdrop` has the same specificity as `.hidden`, and since this
   stylesheet loads after Tailwind, it would otherwise win — keep `hidden`
   authoritative when both are present. */
.th-modal-backdrop.hidden { display: none; }
/* Spinner shown while modal content is loading. Uses flex but yields to
   `.hidden` so the controller can toggle it with a single class. */
.th-modal-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
}
.th-modal-loading.hidden { display: none; }
.th-modal-panel {
  background: var(--th-snow);
  color: var(--th-fg-1);
  border-radius: var(--th-radius-md);
  box-shadow: var(--th-shadow-floating);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.th-modal-panel--sm { max-width: 420px; }
.th-modal-panel--md { max-width: 640px; }
.th-modal-panel--lg { max-width: 800px; }
.th-modal-panel--xl { max-width: 960px; }

.th-lgs-signout-confirm-form {
  display: inline-flex;
  margin: 0;
}
.th-modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--th-border-1);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-shrink: 0;
}
.th-modal-header-title { font: 500 18px/1.2 var(--th-font-sans); color: var(--th-midnight); margin: 0; }
.th-modal-header-sub { font: 400 13px/1.4 var(--th-font-sans); color: var(--th-fg-2); margin: 4px 0 0; }
.th-modal-header .th-eyebrow {
  display: block;
  margin-bottom: 8px;
  color: var(--th-fg-3);
}
.th-modal-close {
  width: 32px;
  height: 32px;
  border-radius: var(--th-radius-pill);
  border: 0;
  background: transparent;
  color: var(--th-fg-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--th-t-fast) var(--th-ease-out), color var(--th-t-fast) var(--th-ease-out);
  flex-shrink: 0;
}
.th-modal-close:hover { background: var(--th-bone); color: var(--th-midnight); }

.th-questionnaire-header {
  background: var(--th-snow);
  border-bottom: 1px solid var(--th-border-1);
  padding: 16px 24px;
}
.th-auth-card--with-close .th-questionnaire-header {
  padding-right: 56px;
}

.th-modal-body { padding: 20px 24px; overflow-y: auto; flex: 1; }
.th-modal-body--flush { padding: 0; }
.th-modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--th-border-1);
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  flex-shrink: 0;
  background: var(--th-bone);
}

/* Marker / “how it helps” modal body — shared by dashboard formula and the
   labs-get-started reveal. Replaces the old Tailwind slate/purple blocks so
   the panel matches the rest of the TH theme. */
.th-risk {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.th-risk-block-head { margin-bottom: 12px; }
.th-risk-block-head .th-eyebrow {
  display: block;
  margin-bottom: 8px;
  color: var(--th-fg-3);
}
.th-risk-block-title {
  margin: 0;
  font: 500 17px/1.25 var(--th-font-sans);
  letter-spacing: -0.01em;
  color: var(--th-midnight);
}
.th-risk-block-sub {
  margin: 4px 0 0;
  font: 400 13px/1.4 var(--th-font-sans);
  color: var(--th-fg-3);
}
.th-risk-panel {
  padding: 16px 18px;
  border-radius: var(--th-radius-sm);
  border: 1px solid var(--th-border-1);
  background: var(--th-bone);
}
.th-risk-panel--warn {
  background: var(--th-warn);
  border-color: rgba(138, 115, 0, 0.18);
}
.th-risk-panel--bad {
  background: var(--th-bad);
  border-color: rgba(178, 58, 58, 0.16);
}
.th-risk-panel--help {
  background: var(--th-good);
  border-color: rgba(83, 133, 116, 0.18);
}
.th-risk-panel-lead {
  margin: 0 0 10px;
  font: 500 14.5px/1.5 var(--th-font-sans);
  color: var(--th-midnight);
}
.th-risk-panel--warn .th-risk-panel-lead { color: var(--th-warn-fg); }
.th-risk-panel--bad .th-risk-panel-lead { color: var(--th-bad-fg); }
.th-risk-reading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.th-risk-reading-value {
  margin: 0;
  font: 500 28px/1 var(--th-font-sans);
  letter-spacing: -0.03em;
  color: var(--th-midnight);
}
.th-risk-panel--warn .th-risk-reading-value { color: var(--th-warn-fg); }
.th-risk-panel--bad .th-risk-reading-value { color: var(--th-bad-fg); }
.th-risk-reading-unit {
  font: 400 13px/1 var(--th-font-sans);
  letter-spacing: 0;
  color: inherit;
  opacity: 0.7;
}
.th-risk-reading-detail > .th-risk-prose + .th-risk-prose { margin-top: 12px; }
.th-risk-prose {
  margin: 0;
  font: 400 14px/1.6 var(--th-font-sans);
  color: var(--th-fg-2);
}
.th-risk-prose p { margin: 0 0 0.75em; }
.th-risk-prose p:last-child { margin-bottom: 0; }
.th-risk-prose strong {
  display: inline;
  font-weight: 500;
  color: var(--th-midnight);
}
.th-risk-prose a {
  color: var(--th-midnight);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.th-risk-bullet {
  margin-top: 8px;
  padding-left: 14px;
  border-left: 2px solid var(--th-border-1);
}
.th-risk-muted { margin: 0; font: 400 14px/1.55 var(--th-font-sans); color: var(--th-fg-3); }
.th-risk-error { margin: 0; font: 400 14px/1.55 var(--th-font-sans); color: var(--th-bad-fg); }
.th-risk-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 0;
  font: 400 13.5px/1.4 var(--th-font-sans);
  color: var(--th-fg-3);
}
.th-risk-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid var(--th-border-2);
  border-top-color: var(--th-midnight);
  animation: th-spin 0.7s linear infinite;
  flex-shrink: 0;
}
.th-risk-more {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(22, 42, 44, 0.1);
}
.th-risk-more summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
  font: 500 12.5px/1.3 var(--th-font-sans);
  color: var(--th-fg-2);
}
.th-risk-more summary::-webkit-details-marker { display: none; }
.th-risk-more summary:hover { color: var(--th-midnight); }
.th-risk-more-chevron {
  display: inline-flex;
  transition: transform var(--th-t-base) var(--th-ease-out);
}
.th-risk-more[open] .th-risk-more-chevron { transform: rotate(180deg); }
.th-risk-more .th-risk-prose { margin-top: 10px; }

/* Lab-marker modal reading — same language as /dashboard/labs: cream panel,
   mono result, status pill. Colored washes stay on genetic-risk panels. */
.th-risk-lab-card {
  padding: 16px 18px;
  border-radius: var(--th-radius-sm);
  border: 1px solid var(--th-border-1);
  background: var(--th-bone);
}
.th-risk-lab-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.th-risk-lab-kicker {
  font: 500 10px/1 var(--th-font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 8px;
  color: var(--th-fg-3);
}
.th-risk-lab-value {
  margin: 0;
  font: 500 28px/1 var(--th-font-mono);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--th-midnight);
}
.th-risk-lab-unit {
  margin-left: 8px;
  font: 400 13px/1 var(--th-font-sans);
  letter-spacing: 0;
  color: var(--th-fg-3);
}
.th-risk-lab-lead {
  margin: 0 0 12px;
  font: 500 14px/1.5 var(--th-font-sans);
  color: var(--th-midnight);
}
.th-risk-lab-about > .th-risk-prose + .th-risk-prose { margin-top: 12px; }
.th-risk-lab-about .th-risk-more { margin-top: 12px; }
.th-risk-lab-note {
  margin: 14px 0 0;
  font: 400 12px/1.5 var(--th-font-sans);
  color: var(--th-fg-3);
}

/* Scaled range — same pin / compressed segments / boundary labels as
   /dashboard/labs. */
.th-risk-range { position: relative; }
.th-risk-range-track {
  position: relative;
  height: 28px;
  margin-bottom: 1px;
}
.th-risk-range-pin {
  position: absolute;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateX(-50%);
  white-space: nowrap;
}
.th-risk-range-pin-value {
  font: 500 11px/1 var(--th-font-mono);
  color: var(--th-midnight);
  font-variant-numeric: tabular-nums;
}
.th-risk-range-arrow {
  width: 0;
  height: 0;
  margin-top: 1px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--th-midnight);
}
.th-risk-range-bar {
  width: 100%;
  height: 8px;
  border-radius: var(--th-radius-pill);
  overflow: hidden;
}
.th-risk-range-labels {
  position: relative;
  height: 16px;
  margin-top: 2px;
}
.th-risk-range-labels span {
  position: absolute;
  top: 2px;
  font: 400 9px/1 var(--th-font-mono);
  color: var(--th-fg-3);
  transform: translateX(-50%);
}

/* Labs-get-started risk modal chrome — slightly quieter header/footer so the
   content blocks above carry the hierarchy. */
.th-lgs-risk-modal-panel { max-height: min(86vh, 720px); }
.th-lgs-risk-modal-header {
  align-items: flex-start;
  background: var(--th-snow);
}
.th-lgs-risk-modal-eyebrow {
  display: block;
  margin-bottom: 8px;
  color: var(--th-fg-3);
}
.th-lgs-risk-modal-body { padding: 22px 24px 26px; }
.th-lgs-risk-modal-footer { background: var(--th-snow); }

/* Checkout handoff modal. Deliberately chromeless — no header bar and no close
   button, because the only sanctioned exits are "your order confirmed" and the
   explicit "I didn't complete checkout" in the fallback panel. */
.th-lgs-checkout-modal-panel { max-width: 460px; }
.th-lgs-checkout-modal-body {
  padding: 34px 30px 30px;
  text-align: center;
}
.th-lgs-checkout-modal-spinner {
  display: block;
  margin: 0 auto 20px;
}
.th-lgs-checkout-modal-lead {
  margin: 10px 0 0;
  color: var(--th-fg-2);
}
.th-lgs-checkout-modal-hint {
  margin: 20px 0 0;
  font: 400 13px/1.5 var(--th-font-sans);
  color: var(--th-fg-3);
}
.th-lgs-checkout-modal-hint a {
  color: var(--th-fg-1);
  text-decoration: underline;
}
.th-lgs-checkout-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 22px;
}

/* Action button color variants used inside modals (pause/cancel/resume).
   These keep the pill silhouette but tint with the appropriate semantic. */
.th-btn-warn { background: var(--th-warn-fg); color: var(--th-snow); }
.th-btn-warn:hover { background: #6b5a00; color: var(--th-snow); }
.th-btn-bad { background: var(--th-bad-fg); color: var(--th-snow); }
.th-btn-bad:hover { background: #962e2e; color: var(--th-snow); }
.th-btn-good { background: var(--th-good-fg); color: var(--th-snow); }
.th-btn-good:hover { background: #426853; color: var(--th-snow); }

/* Soft variants used as "outlined" pills inside cards (e.g. "Pause" tinted
   amber) — same color family as a chip but tappable. */
.th-btn-soft-warn { background: var(--th-warn); color: var(--th-warn-fg); }
.th-btn-soft-warn:hover { background: #ecdda6; }
.th-btn-soft-bad { background: var(--th-bad); color: var(--th-bad-fg); }
.th-btn-soft-bad:hover { background: #ffd8d8; }
.th-btn-soft-good { background: var(--th-good); color: var(--th-good-fg); }
.th-btn-soft-good:hover { background: #d8e8d8; }

/* ---------- Data table (lab markers) ----------------------------------- */
.th-data-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--th-border-1);
  border-radius: var(--th-radius-sm);
  overflow: hidden;
  background: var(--th-snow);
}
.th-data-table thead th {
  background: var(--th-midnight);
  color: var(--th-snow);
  font: 500 11px/1 var(--th-font-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 12px 14px;
  text-align: left;
}
.th-data-table thead th.th-th-center { text-align: center; }
.th-data-table tbody td {
  padding: 12px 14px;
  border-top: 1px solid var(--th-border-1);
  font: 400 14px/1.4 var(--th-font-sans);
  color: var(--th-midnight);
  vertical-align: middle;
}
.th-data-table tbody tr:hover { background: var(--th-bone); }
.th-data-table tr.th-data-table-section td {
  background: rgba(22, 42, 44, 0.04);
  font: 500 11px/1 var(--th-font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--th-fg-2);
  padding: 8px 14px;
  border-top: 1px solid var(--th-border-1);
}
.th-data-table tr.th-row--bad td { background: rgba(178, 58, 58, 0.04); }
.th-data-table tr.th-row--warn td { background: rgba(138, 115, 0, 0.05); }

/* ---------- Misc -------------------------------------------------------- */
.th-progress-track { height: 6px; background: var(--th-bone); border-radius: var(--th-radius-pill); overflow: hidden; }
.th-progress-fill { height: 100%; background: var(--th-midnight); border-radius: var(--th-radius-pill); transition: width 700ms var(--th-ease-out); }

.th-divider { border: 0; border-top: 1px solid var(--th-border-1); margin: 0; }

/* Keyword/empty-state CTA card */
.th-empty-card {
  background: var(--th-bg-card);
  border-radius: var(--th-radius-md);
  box-shadow: var(--th-shadow-card);
  padding: 56px 24px;
  text-align: center;
}
.th-empty-card-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 18px;
  border-radius: var(--th-radius-pill);
  background: var(--th-bone);
  color: var(--th-fg-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.th-empty-card h3 { font: 500 22px/1.2 var(--th-font-sans); color: var(--th-midnight); margin: 0 0 10px; }
.th-empty-card p { color: var(--th-fg-2); margin: 0 auto 24px; max-width: 420px; }

/* Inline list with hairline rules (used for ingredient lists, profile lists). */
.th-list { display: flex; flex-direction: column; }
.th-list > * + * { border-top: 1px solid var(--th-border-1); }
.th-list-item { padding: 14px 0; }

/* Lab marker row used in the formula card hero (existing) — extend visual */

/* Override: when th-card is a link (e.g. wrapper card), allow children. */
a.th-page-card { display: block; text-decoration: none; color: inherit; transition: box-shadow var(--th-t-base) var(--th-ease-out); }
a.th-page-card:hover { box-shadow: var(--th-shadow-floating); }

@keyframes th-spin { to { transform: rotate(360deg); } }

/* ---------- Global page-load overlay ------------------------------------ */
/* Used by `page-loader` Stimulus controller between Turbo navigations.
   Mounted on <html> (#th-page-loader-root) so it survives Turbo body swaps.
   Unscoped so it works from both the application and dashboard layouts. */
.th-page-loader,
#th-page-loader-root {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.2); /* light transparent black over the blur */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.th-page-loader.hidden,
#th-page-loader-root.hidden { display: none; }
/* Admin variant: keep the left sidebar visible/interactive and only blur +
   spin over the main content column. On desktop the sidebar is a 2.5rem
   icon rail (`md:w-10`) that overlays when hovered, so start the overlay
   there. On mobile the sidebar is an off-canvas drawer, so the overlay
   covers the full viewport as usual. */
@media (min-width: 768px) {
  .th-page-loader--content { left: 2.5rem; }
}
.th-page-loader-card {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 16px;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(22, 42, 44, 0.04), 0 8px 24px rgba(22, 42, 44, 0.08);
}
.th-page-loader-spinner {
  width: 28px;
  height: 28px;
  border-radius: 9999px;
  border: 2.5px solid rgba(22, 42, 44, 0.12);
  border-top-color: #162A2C; /* --th-midnight */
  animation: th-spin 0.7s linear infinite;
}

/* ---------- Onboarding shell ------------------------------------------- */
/* Used by signin + onboarding pages that render through `application.html.erb`.
   `.th-auth-shell` provides the cream-on-cream centered layout; `.th-auth-card`
   is the white panel that holds the form. Keep both narrow (max ~480px) so the
   feel stays focused. Nest under `.th-scope` for tokens. */
.th-auth-shell {
  min-height: 100vh;
  background: var(--th-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px 48px;
  position: relative;
}
.th-auth-shell--with-nav { padding-top: 96px; }
.th-auth-shell--wide .th-auth-card { max-width: 720px; }

.th-auth-card {
  background: var(--th-snow);
  width: 100%;
  max-width: 480px;
  border-radius: var(--th-radius-md);
  box-shadow: var(--th-shadow-card);
  overflow: hidden;
}
.th-auth-card-body { padding: 32px 28px; }
@media (min-width: 640px) { .th-auth-card-body { padding: 40px 36px; } }
.th-auth-card .th-brand-logo { height: clamp(36px, 8vw, 44px); }
.th-auth-logo-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
}

.th-auth-header { text-align: center; margin-bottom: 28px; }
.th-auth-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--th-radius-pill);
  background: var(--th-bone);
  color: var(--th-midnight);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
}
.th-auth-title {
  font: 400 28px/1.15 var(--th-font-sans);
  letter-spacing: -0.015em;
  color: var(--th-midnight);
  margin: 0 0 8px;
}
.th-auth-title--sm { font-size: 24px; }
.th-auth-title em, .th-auth-title .th-em-italic {
  font-family: var(--th-font-display-italic);
  font-style: italic;
  font-weight: 400;
}
.th-auth-sub {
  font: 400 15px/1.5 var(--th-font-sans);
  color: var(--th-fg-2);
  margin: 0 auto;
  max-width: 360px;
}

.th-auth-form { display: flex; flex-direction: column; gap: 18px; }
.th-auth-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* Full-width CTAs on narrow auth/onboarding cards — matches form field width
   and keeps the centered card composition balanced. Wide shells (checklist,
   lifestyle) keep their own action-row layouts and only stretch top-level CTAs. */
.th-auth-shell:not(.th-auth-shell--wide) .th-auth-form > .th-btn,
.th-auth-shell:not(.th-auth-shell--wide) .th-auth-card-body > .th-btn,
.th-auth-shell:not(.th-auth-shell--wide) .th-auth-card-body > a.th-btn,
.th-auth-shell:not(.th-auth-shell--wide) .th-auth-card-body > form .th-btn,
.th-auth-shell:not(.th-auth-shell--wide) .th-auth-card-body > div > .th-btn,
.th-auth-shell:not(.th-auth-shell--wide) .th-auth-card-body > div > a.th-btn,
.th-auth-shell:not(.th-auth-shell--wide) .th-auth-card-body > div > form > .th-btn,
.th-auth-shell--wide .th-auth-card-body > div > a.th-btn-primary,
.th-auth-shell--wide .th-auth-card-body > a.th-btn-primary {
  width: 100%;
  box-sizing: border-box;
}
.th-auth-shell:not(.th-auth-shell--wide) .th-auth-card-body > div > form:has(> .th-btn) {
  width: 100%;
}
.th-auth-shell:not(.th-auth-shell--wide) .th-auth-card .th-btn-sm {
  width: auto;
}

.th-auth-foot {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--th-border-1);
  text-align: center;
  font: 400 14px/1.5 var(--th-font-sans);
  color: var(--th-fg-2);
}
.th-auth-foot a { color: var(--th-midnight); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.th-auth-foot a:hover { text-decoration-thickness: 2px; }
.th-auth-foot-fine {
  margin-top: 12px;
  font-size: 12px;
  color: var(--th-fg-3);
  line-height: 1.55;
}
.th-auth-foot-fine a { color: var(--th-fg-2); text-decoration: underline; text-underline-offset: 2px; }

/* Inline alert banners for onboarding cards */
.th-alert {
  border-radius: var(--th-radius-sm);
  padding: 12px 14px;
  font: 400 14px/1.45 var(--th-font-sans);
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.th-alert--bad { background: var(--th-bad); color: var(--th-bad-fg); }
.th-alert--good { background: var(--th-good); color: var(--th-good-fg); }
.th-alert--info { background: var(--th-bone); color: var(--th-midnight); }
.th-alert--warn { background: var(--th-warn); color: var(--th-warn-fg); }

/* OTP boxes — used by `magic_links/_otp_form` and `dashboard/shared/_sms_otp_form` */
.th-otp {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.th-otp-grid { display: flex; justify-content: center; gap: 8px; }
.th-otp-box {
  width: 44px;
  height: 52px;
  border-radius: var(--th-radius-xs);
  border: 1px solid var(--th-border-2);
  background: var(--th-snow);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 500 22px/1 var(--th-font-mono);
  color: var(--th-midnight);
  transition: border-color var(--th-t-fast) var(--th-ease-out), background var(--th-t-fast) var(--th-ease-out);
  position: relative;
}
.th-otp-box.has-value { border-color: var(--th-midnight); background: var(--th-bone); }
.th-otp-box.next-to-fill { border-style: dashed; border-color: var(--th-midnight); background: var(--th-bone); }
.th-otp-box.empty:not(.next-to-fill) { border-color: var(--th-border-1); }
.th-otp-box--error { border-color: var(--th-bad-fg) !important; }
@keyframes th-otp-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.th-otp-box.next-to-fill::after {
  content: "";
  position: absolute;
  bottom: 22%;
  left: 50%;
  width: 2px;
  height: 50%;
  background: var(--th-midnight);
  transform: translateX(-50%);
  animation: th-otp-blink 1s infinite;
  opacity: 0;
}
.th-otp.input-focused .th-otp-box.next-to-fill::after { opacity: 1; }
.th-otp-hint { font: 400 12px/1.4 var(--th-font-sans); color: var(--th-fg-3); text-align: center; }
/* Standing way out of the OTP step for a mistyped or unregistered address —
   deliberately not conditional on whether the account exists. */
.th-otp-help {
  margin-top: 14px;
  font: 400 12.5px/1.5 var(--th-font-sans);
  color: var(--th-fg-3);
  text-align: center;
}
.th-otp-help a { color: var(--th-midnight); text-decoration: underline; text-underline-offset: 2px; }

/* OTP verification modal — two natural-size steps with height transition */
.th-otp-modal-panel { max-width: 420px; }
.th-otp-modal-body { padding: 32px 28px; }
.th-otp-modal-viewport {
  position: relative;
  overflow: hidden;
}
.th-otp-modal-step {
  transition: opacity 0.22s var(--th-ease-out), transform 0.22s var(--th-ease-out);
}
.th-otp-modal-step.is-exiting {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  transform: translateX(-12px);
  pointer-events: none;
}
.th-otp-modal-step.is-entering {
  opacity: 0;
  transform: translateX(12px);
  animation: th-otp-step-in 0.22s var(--th-ease-out) forwards;
}
@keyframes th-otp-step-in {
  to { opacity: 1; transform: translateX(0); }
}
.th-otp-modal-header { text-align: center; margin-bottom: 24px; }
.th-otp-modal-destination { font-weight: 500; color: var(--th-midnight); }

/* The entered address on the method-selection step, with its way back to the
   field. Keeps a long address from pushing "Change" off a narrow screen. */
.th-otp-modal-identity {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  font: 400 13px/1.4 var(--th-font-sans);
  color: var(--th-fg-3);
}
.th-otp-modal-identity .th-otp-modal-destination { overflow-wrap: anywhere; }
.th-otp-modal-methods { display: flex; flex-direction: column; gap: 10px; }
.th-otp-modal-method-btn {
  width: 100%;
  justify-content: flex-start;
  gap: 12px;
}
.th-otp-modal-spinner { display: none; align-items: center; }
.th-otp-modal-spinner:not(.hidden) { display: inline-flex; }
.th-otp-submit-wrap {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}
.th-btn-block {
  width: 100%;
  max-width: 320px;
}
.th-otp-modal-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 20px;
}
.th-otp-modal-footer-sep { color: var(--th-fg-3); font-size: 13px; user-select: none; }
.th-otp-modal-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  background: none;
  font: 400 13px/1.4 var(--th-font-sans);
  color: var(--th-fg-2);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--th-t-base) var(--th-ease-out);
}
.th-otp-modal-link:hover:not(:disabled) { color: var(--th-midnight); text-decoration-thickness: 2px; }
.th-otp-modal-link:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  text-decoration: none;
}
.th-otp-modal-feedback {
  margin: 12px 0 0;
  font: 400 13px/1.4 var(--th-font-sans);
  color: var(--th-fg-2);
  text-align: center;
}
.th-otp-modal-feedback.hidden { display: none; }
.th-otp-modal-feedback--error { color: var(--th-bad-fg); }

/* Onboarding checklist — vertical step list with completed/current/locked states */
.th-step-list { display: flex; flex-direction: column; gap: 10px; }
.th-step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: var(--th-radius-sm);
  background: var(--th-bone);
  border: 1px solid var(--th-border-1);
}
.th-step--done { background: var(--th-bone); }
.th-step--done .th-step-title { color: var(--th-fg-3); text-decoration: line-through; }
.th-step--done .th-step-desc { color: var(--th-fg-3); }
.th-step--current {
  background: var(--th-snow);
  border-color: var(--th-midnight);
  box-shadow: var(--th-shadow-card);
  flex-direction: column;
  align-items: stretch;
}
.th-step--locked { opacity: 0.6; }
.th-step-row { display: flex; gap: 14px; align-items: flex-start; width: 100%; }
.th-step-marker {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--th-radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 500 13px/1 var(--th-font-sans);
}
.th-step-marker--done { background: var(--th-midnight); color: var(--th-snow); }
.th-step-marker--current { background: var(--th-midnight); color: var(--th-snow); }
.th-step-marker--locked { background: var(--th-bone); color: var(--th-fg-3); border: 1px solid var(--th-border-1); }
.th-step-body { flex: 1; min-width: 0; }
.th-step-title { font: 500 14px/1.3 var(--th-font-sans); color: var(--th-midnight); margin: 0; }
.th-step-desc { font: 400 13px/1.45 var(--th-font-sans); color: var(--th-fg-2); margin: 4px 0 0; }
.th-step-actions { display: flex; gap: 10px; margin-top: 14px; }
.th-step-actions .th-btn { flex: 1; }

/* Country/phone combo used on SMS setup */
.th-country-display {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  height: 44px;
  background: var(--th-bone);
  border: 1px solid var(--th-border-1);
  border-radius: var(--th-radius-sm);
  font: 500 14px/1 var(--th-font-sans);
  color: var(--th-fg-2);
  cursor: not-allowed;
}

/* Welcome splash — animated TailoredHealth wordmark */
.th-welcome-splash {
  min-height: 100vh;
  background: var(--th-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  text-align: center;
}
.th-welcome-splash-inner { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.th-welcome-eyebrow {
  font: 400 14px/1 var(--th-font-sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--th-fg-2);
  opacity: 0;
  animation: th-fade-up 1.2s var(--th-ease-out) 0.1s forwards;
}
.th-welcome-wordmark {
  display: inline-flex;
  align-items: center;
  color: var(--th-midnight);
  opacity: 0;
  animation: th-fade-up 1.2s var(--th-ease-out) 0.5s forwards;
}
.th-welcome-wordmark img {
  display: block;
  height: clamp(56px, 10vw, 110px);
  width: auto;
  max-width: 80vw;
}
.th-welcome-msg {
  font: 400 16px/1.5 var(--th-font-sans);
  color: var(--th-fg-2);
  opacity: 0;
  animation: th-fade-up 1.2s var(--th-ease-out) 1.2s forwards;
}
.th-welcome-dots {
  display: inline-flex;
  gap: 6px;
  margin-left: 2px;
}
.th-welcome-dots span {
  width: 4px;
  height: 4px;
  background: var(--th-fg-2);
  border-radius: var(--th-radius-pill);
  animation: th-welcome-dot 1.4s ease-in-out infinite;
}
.th-welcome-dots span:nth-child(2) { animation-delay: 0.2s; }
.th-welcome-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes th-welcome-dot {
  0%, 80%, 100% { opacity: 0.2; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-2px); }
}
@keyframes th-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Drag-and-drop dropzone (labs intent) */
.th-dropzone {
  border: 1.5px dashed var(--th-border-2);
  border-radius: var(--th-radius-sm);
  background: var(--th-bone);
  padding: 28px 20px;
  text-align: center;
  transition: border-color var(--th-t-fast) var(--th-ease-out), background var(--th-t-fast) var(--th-ease-out);
}
.th-dropzone:hover { border-color: var(--th-midnight); background: var(--th-snow); }
.th-dropzone-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--th-radius-pill);
  background: var(--th-snow);
  color: var(--th-fg-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
}
.th-dropzone-title { font: 500 14px/1.3 var(--th-font-sans); color: var(--th-midnight); margin: 0 0 4px; }
.th-dropzone-sub { font: 400 12px/1.4 var(--th-font-sans); color: var(--th-fg-3); margin: 0 0 16px; }

/* ---------- Labs: empty-state upload hero + provider guides ------------- */
.th-labs-drop--empty {
  background:
    radial-gradient(ellipse 60% 60% at 50% 40%, rgba(22, 42, 44, 0.04), transparent 70%);
  cursor: pointer;
}
.th-labs-drop-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 64px 24px;
  cursor: pointer;
}
@media (max-width: 640px) { .th-labs-drop-hero { padding: 44px 18px; } }
.th-labs-drop-hero-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--th-radius-pill);
  background: var(--th-bone);
  color: var(--th-fg-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.th-labs-drop-hero-title { font: 500 20px/1.2 var(--th-font-sans); color: var(--th-midnight); margin: 0; }
.th-labs-drop-hero-sub { font: 400 14px/1.55 var(--th-font-sans); color: var(--th-fg-2); margin: 0; max-width: 460px; }
.th-labs-drop-hero-meta { margin: 6px 0 0; color: var(--th-fg-3); }

.th-labs-providers { padding: 0 18px 16px; }
.th-labs-providers-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.th-labs-providers-head .th-mono { color: var(--th-fg-3); }
.th-labs-providers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
@media (max-width: 720px) { .th-labs-providers-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .th-labs-providers-grid { grid-template-columns: 1fr; } }
.th-labs-provider {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--th-border-1);
  border-radius: var(--th-radius-sm);
  background: var(--th-snow);
  text-decoration: none;
  color: var(--th-fg-1);
  transition: border-color var(--th-t-base) var(--th-ease-out), background var(--th-t-base) var(--th-ease-out), box-shadow var(--th-t-base) var(--th-ease-out);
}
.th-labs-provider:hover {
  border-color: var(--th-border-2);
  background: var(--th-bone);
  box-shadow: var(--th-shadow-card);
}
.th-labs-provider-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--th-radius-xs);
  background: var(--th-bone);
  color: var(--th-fg-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.th-labs-provider:hover .th-labs-provider-icon { background: var(--th-snow); }
.th-labs-provider-name {
  font: 500 13px/1.2 var(--th-font-sans);
  color: var(--th-midnight);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.th-labs-providers-foot { margin-top: 12px; }

/* ---------- Labs: review-before-submit modal --------------------------- */
.th-upload-review-list { display: flex; flex-direction: column; gap: 8px; }
.th-upload-file {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--th-border-1);
  border-radius: var(--th-radius-sm);
  background: var(--th-snow);
}
.th-upload-file-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--th-radius-xs);
  background: var(--th-bone);
  color: var(--th-fg-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.th-upload-file-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.th-upload-file-name {
  font: 500 14px/1.3 var(--th-font-sans);
  color: var(--th-midnight);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.th-upload-file-size { font: 400 12px/1.3 var(--th-font-mono); color: var(--th-fg-3); margin-top: 2px; }
.th-upload-file-remove {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  border-radius: var(--th-radius-pill);
  color: var(--th-fg-3);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--th-t-fast) var(--th-ease-out), color var(--th-t-fast) var(--th-ease-out);
}
.th-upload-file-remove:hover { background: var(--th-bad); color: var(--th-bad-fg); }

.th-upload-add-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 14px;
  width: 100%;
  justify-content: center;
  border: 1.5px dashed var(--th-border-2);
  border-radius: var(--th-radius-sm);
  background: var(--th-bone);
  color: var(--th-fg-1);
  font: 500 13px/1 var(--th-font-sans);
  cursor: pointer;
  transition: border-color var(--th-t-fast) var(--th-ease-out), background var(--th-t-fast) var(--th-ease-out), color var(--th-t-fast) var(--th-ease-out);
}
.th-upload-add-more:hover { border-color: var(--th-midnight); background: var(--th-snow); color: var(--th-midnight); }
.th-upload-add-more.hidden { display: none; }

.th-upload-review-error {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: var(--th-radius-sm);
  background: var(--th-warn);
  color: var(--th-warn-fg);
  font: 500 12px/1.4 var(--th-font-sans);
}
.th-upload-review-error.hidden { display: none; }
.th-page-overlay-card {
  border: 2px dashed rgba(255, 255, 255, 0.4);
  border-radius: var(--th-radius-md);
  padding: 56px 64px;
  text-align: center;
  color: var(--th-snow);
  pointer-events: none;
}

/* ---------- Labs get-started (public UX mockup) ------------------------ */
.th-lgs {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: clip;
  background: var(--th-cream);
}
.th-lgs-atmosphere {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(203, 209, 183, 0.45), transparent 55%),
    radial-gradient(ellipse 60% 40% at 100% 30%, rgba(180, 187, 214, 0.22), transparent 50%),
    radial-gradient(ellipse 50% 35% at 0% 70%, rgba(22, 42, 44, 0.04), transparent 45%);
  opacity: 0;
  transition: opacity 0.8s var(--th-ease-out);
}
.th-lgs.is-ready .th-lgs-atmosphere { opacity: 1; }

/* Step jumper — sticky so screens can be previewed without walking the
   whole funnel. Rendered in development, and for impersonating admins. */
.th-lgs-dev-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: #1a1f2e;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: #e8eaef;
  font: 500 12px/1.2 var(--th-font-sans);
}
.th-lgs-dev-bar-label {
  margin-right: 6px;
  color: #9aa3b5;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 10px;
  font-weight: 600;
}
.th-lgs-dev-bar-divider {
  width: 1px;
  align-self: stretch;
  margin: 0 6px;
  background: rgba(255, 255, 255, 0.16);
}
/* Also applied to anchors: the subscribe-state previews are separate pages. */
.th-lgs-dev-bar-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: transparent;
  color: #d5dae6;
  border-radius: 6px;
  padding: 5px 10px;
  font: inherit;
  cursor: pointer;
}
.th-lgs-dev-bar-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  text-decoration: none;
}
.th-lgs-dev-bar-btn.is-active {
  background: #fff;
  border-color: #fff;
  color: #1a1f2e;
}

.th-lgs-page {
  position: relative;
  z-index: 1;
  flex: 1 0 auto;
  width: 100%;
  max-width: 720px;
  min-width: 0;
  margin: 0 auto;
  padding: 16px 24px 96px;
}

/* This flow is a public, standalone intake rather than a dense in-app form, so
   the shared primitives are scaled up within this scope only — the dashboard
   and the rest of the app keep their compact sizes. */
.th-lgs .th-form-label {
  font-size: 12px;
  margin-bottom: 9px;
}
.th-lgs .th-form-input,
.th-lgs .th-form-select,
.th-lgs .th-form-textarea {
  padding: 14px 16px;
  font-size: 15.5px;
}
.th-lgs .th-form-select { background-position: right 14px center; }
.th-lgs .th-btn {
  height: 50px;
  padding: 0 28px;
  font-size: 15px;
}
.th-lgs .th-btn-sm {
  height: 40px;
  padding: 0 20px;
  font-size: 14px;
}
.th-lgs .th-field-error {
  margin-top: 8px;
  font-size: 13px;
}
.th-lgs .th-body-sm { font-size: 15px; }
.th-lgs .th-eyebrow { font-size: 12.5px; }
.th-lgs .th-mono { font-size: 13px; }
.th-lgs .th-status {
  padding: 4px 12px;
  font-size: 12px;
}
.th-lgs .th-soft-panel { padding: 20px; }
.th-lgs .th-alert {
  padding: 15px 17px;
  font-size: 15px;
}

/* Lets an individual screen break out of the page's narrower "intake"
   width when it needs more breathing room (e.g. the questionnaire's
   2-column answers) — centered on the same axis as everything else,
   regardless of the page's own max-width. Mobile stays full-width. */
@media (min-width: 920px) {
  .th-lgs-screen--wide {
    width: 880px;
    max-width: calc(100vw - 48px);
    margin-left: calc(50% - 440px);
  }
}
@media (min-width: 1180px) {
  .th-lgs-screen--wide {
    width: 1040px;
    margin-left: calc(50% - 520px);
  }
}

/* The front door runs a little wider than the 720px intake column — it carries a
   product shot and two side-by-side jobs, where the screens after it are single
   forms that read better narrow. Same self-centering trick as --wide above; the
   880px floor is the point where 760px plus its overhang still clears the
   viewport. */
@media (min-width: 880px) {
  .th-lgs-screen--portal {
    width: 760px;
    margin-left: calc(50% - 380px);
  }
}

/* Same column as the formula / questionnaire breakout, so the brand and
   account sit on the hero's left and right edges. */
.th-lgs-topbar {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: 16px 24px;
  box-sizing: border-box;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.55s var(--th-ease-out), transform 0.55s var(--th-ease-out);
}
@media (min-width: 920px) {
  .th-lgs-topbar {
    width: 880px;
    max-width: calc(100vw - 48px);
    padding: 16px 0;
  }
}
@media (min-width: 1180px) {
  .th-lgs-topbar {
    width: 1040px;
    max-width: 1040px;
  }
}
.th-lgs.is-ready .th-lgs-topbar {
  opacity: 1;
  transform: none;
}
.th-lgs-topbar .th-brand-logo { height: clamp(32px, 4vw, 42px); }

.th-lgs-topbar-account {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.th-lgs-topbar-email {
  font: 400 13px/1.2 var(--th-font-sans);
  color: var(--th-fg-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: min(42vw, 280px);
}
/* Signed-out and signed-in states both sit in the DOM so the bar can switch
   between them after an AJAX sign-in — inline-flex would otherwise beat the
   `hidden` attribute. */
.th-lgs-topbar-account [hidden],
.th-lgs-topbar-menu[hidden] {
  display: none !important;
}
.th-lgs-topbar-menu-btn,
.th-lgs-topbar-signin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--th-fg-2);
  cursor: pointer;
  border-radius: 6px;
  transition: color 0.15s ease, background 0.15s ease;
}
.th-lgs-topbar-menu-btn:hover,
.th-lgs-topbar-signin:hover,
.th-lgs-topbar-menu-btn[aria-expanded="true"] {
  color: var(--th-fg);
  background: color-mix(in srgb, var(--th-fg) 6%, transparent);
}
.th-lgs-topbar-menu-btn svg,
.th-lgs-topbar-signin svg,
.th-lgs-topbar-menu-btn i,
.th-lgs-topbar-signin i {
  width: 18px;
  height: 18px;
}

/* Anchors the dropdown to the hamburger rather than the whole bar. */
.th-lgs-topbar-menu {
  position: relative;
  display: inline-flex;
}
.th-lgs-topbar-dropdown {
  min-width: 240px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(0.97);
  transition: opacity 0.18s var(--th-ease-out), transform 0.18s var(--th-ease-out), visibility 0.18s;
}
.th-lgs-topbar-dropdown.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
}
@media (max-width: 640px) {
  .th-lgs-topbar { padding: 14px 20px; }
  .th-lgs-topbar-email { display: none; }
  .th-lgs-topbar-dropdown { min-width: 0; width: calc(100vw - 40px); max-width: 280px; }
}

/* A non-blocking status toast: bottom-right is away from navigation and form
   controls, while remaining visible as a long questionnaire scrolls. */
.th-lgs-bg-processing {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: min(340px, calc(100vw - 44px));
  padding: 12px 12px 12px 14px;
  border-radius: var(--th-radius-sm);
  background: rgba(255, 255, 255, 0.70);
  border: 1px solid var(--th-border-1);
  box-shadow: 0 10px 28px rgba(22, 42, 44, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font: 500 13.5px/1.35 var(--th-font-sans);
  color: var(--th-midnight);
  animation: th-fade-up 0.35s var(--th-ease-out);
}
.th-lgs-bg-processing[hidden] { display: none !important; }
.th-lgs-bg-processing-spinner {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--th-good);
  border-top-color: var(--th-good-fg);
  animation: th-lgs-spin 0.8s linear infinite;
}
/* Parsing done — settle the spinner into a solid dot. */
.th-lgs-bg-processing.is-complete .th-lgs-bg-processing-spinner {
  animation: none;
  border-color: var(--th-good-fg);
  background: var(--th-good-fg);
}
.th-lgs-bg-processing-dismiss {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-left: 2px;
  padding: 0;
  flex-shrink: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--th-fg-3);
  cursor: pointer;
  transition: background var(--th-t-fast) var(--th-ease-out), color var(--th-t-fast) var(--th-ease-out);
}
.th-lgs-bg-processing-dismiss:hover {
  background: var(--th-bone);
  color: var(--th-midnight);
}
.th-lgs-bg-processing-dismiss:focus-visible {
  outline: 2px solid var(--th-good-fg);
  outline-offset: 2px;
}
@keyframes th-lgs-spin {
  to { transform: rotate(360deg); }
}
@media (max-width: 640px) {
  .th-lgs-bg-processing {
    bottom: calc(14px + env(safe-area-inset-bottom));
    right: 12px;
    max-width: calc(100vw - 24px);
  }
}

/* ── Step 1 · the portal front desk ───────────────────────────────────────
   The one screen on the funnel that has to read as a secure place you're being
   let into rather than a landing page selling you something, so it inverts:
   midnight panel, everything below it back on cream.

   No photograph. The gradient carries the depth instead — the same moss and
   lilac washes the page's own .th-lgs-atmosphere uses, so the panel reads as a
   denser piece of the same surface rather than a separate graphic. Moss high
   right, lilac low left, deep midnight through the diagonal. */
.th-lgs-portal {
  position: relative;
  border-radius: var(--th-radius-md);
  background:
    radial-gradient(ellipse 72% 130% at 94% -8%, rgba(203, 209, 183, 0.30), transparent 58%),
    radial-gradient(ellipse 55% 95% at 2% 112%, rgba(180, 187, 214, 0.22), transparent 56%),
    linear-gradient(150deg, #24403f 0%, #172c2e 42%, #0a1517 100%);
  color: var(--th-fg-on-dark);
  overflow: hidden;
  margin: 0 0 22px;
  box-shadow: var(--th-shadow-card);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.65s var(--th-ease-out) 0.08s, transform 0.65s var(--th-ease-out) 0.08s;
}
.th-lgs.is-ready .th-lgs-portal {
  opacity: 1;
  transform: none;
}

.th-lgs-portal-copy {
  position: relative;
  padding: 28px 24px 26px;
}

.th-lgs-portal-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: var(--th-radius-pill);
  background: rgba(203, 209, 183, 0.16);
  color: var(--th-moss);
  font: 500 12px/1.2 var(--th-font-sans);
  letter-spacing: 0.01em;
}
.th-lgs-portal-badge svg { color: var(--th-moss); flex-shrink: 0; }

.th-lgs-portal-title {
  font: 400 clamp(29px, 5.4vw, 38px)/1.1 var(--th-font-sans);
  letter-spacing: -0.02em;
  color: var(--th-snow);
  margin: 14px 0 10px;
  text-wrap: balance;
}

.th-lgs-portal-lead {
  font: 400 15px/1.5 var(--th-font-sans);
  color: var(--th-fg-on-dark-2);
  margin: 0;
  max-width: 40ch;
}

/* The terms of the free offer, set quieter than the lead and brighter than the
   meta row. It is not a headline claim and it is not fine print — it is the one
   sentence that decides whether "free" reads as generous or as bait, so it gets
   its own weight rather than being folded into either. */
.th-lgs-portal-terms {
  margin: 9px 0 0;
  max-width: 62ch;
  text-wrap: pretty;
  font: 400 13.5px/1.5 var(--th-font-sans);
  color: rgba(255, 255, 255, 0.56);
}

.th-lgs-portal-meta {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}
.th-lgs-portal-meta li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 500 12.5px/1.3 var(--th-font-sans);
  color: var(--th-fg-on-dark-2);
}
.th-lgs-portal-meta svg { color: var(--th-moss); flex-shrink: 0; }

/* The four-step promise, broken into steps with an icon each so each one is a
   glance rather than a sentence to parse. No numbers, no connecting rail, no
   active state — this describes the visit; it is not the progress tracker this
   screen deliberately suppresses. */
.th-lgs-portal-steps {
  margin: 20px 0 0;
  padding: 14px 16px 15px;
  border-radius: var(--th-radius-sm);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(203, 209, 183, 0.20);
}
.th-lgs-portal-steps-label {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 12px;
  font: 500 11.5px/1.2 var(--th-font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--th-moss);
}
.th-lgs-portal-steps-label svg { flex-shrink: 0; }
.th-lgs-portal-steps-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 11px;
}
.th-lgs-portal-steps-list li {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  font: 400 14px/1.3 var(--th-font-sans);
  color: var(--th-snow);
}
.th-lgs-portal-steps-list svg { flex-shrink: 0; color: var(--th-moss); }

/* Without a photo the panel is one full-width band, so past the phone the
   four steps run as a 2×2 rather than a cramped row. */
@media (min-width: 620px) {
  .th-lgs-portal-copy { padding: 32px 30px 30px; }
  .th-lgs-portal-steps-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 20px;
  }
}

/* ── Step 1 · the two jobs ────────────────────────────────────────────────
   Cards, not a numbered rail: the funnel's own 1-2-3-4 resumes on the next
   screen, and a second numbering inside one of those four contradicts it.
   Order comes from the stack and from the locked state on the second card,
   which stays on screen from the first paint so the shape of the visit is
   legible before anyone types anything. */
.th-lgs-cards {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.th-lgs-card {
  position: relative;
  padding: 26px 26px 28px;
  border-radius: var(--th-radius-md);
  background: var(--th-bg-card);
  border: 1px solid var(--th-border-1);
  box-shadow: var(--th-shadow-card);
}
/* .th-lgs-section--gated carries the dim/undim state but its transition lives
   on .th-lgs-section, which these cards aren't — so unlocking would snap. */
.th-lgs-card.th-lgs-section--gated {
  overflow: hidden;
  transition: opacity 0.45s var(--th-ease-out),
              transform 0.45s var(--th-ease-out),
              filter 0.45s var(--th-ease-out),
              box-shadow 0.45s var(--th-ease-out);
}
/* Overlay covers the whole upload card, including the heading, so Browse
   files cannot be mistaken for a working control. The uploader stays
   visible underneath. Taps send people to email verify. */
.th-lgs-card.th-lgs-section--gated.is-locked {
  opacity: 1;
  filter: none;
  transform: none;
  pointer-events: auto;
  background: var(--th-bg-card);
  box-shadow: none;
}
.th-lgs-card.is-attention {
  animation: th-lgs-attention 1.1s var(--th-ease-out);
}
@keyframes th-lgs-attention {
  0%, 100% { box-shadow: var(--th-shadow-card); }
  35% { box-shadow: 0 0 0 4px rgba(22, 42, 44, 0.22), var(--th-shadow-card); }
}
@media (prefers-reduced-motion: reduce) {
  .th-lgs-card.is-attention { animation: none; }
}

.th-lgs-card-head {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}
.th-lgs-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--th-midnight);
  color: var(--th-snow);
}
.th-lgs-section--gated.is-locked .th-lgs-card-icon {
  background: var(--th-sand);
  color: var(--th-fg-3);
}
.th-lgs-card-heading { min-width: 0; }
.th-lgs-card-title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 12px;
  font: 500 19px/1.25 var(--th-font-sans);
  letter-spacing: -0.01em;
  color: var(--th-midnight);
  margin: 0 0 6px;
}
.th-lgs-card-title[hidden],
.th-lgs-card-sub[hidden],
.th-lgs-section-title[hidden],
.th-lgs-section-head .th-body-sm[hidden] {
  display: none !important;
}
.th-lgs-card-sub {
  margin: 0;
  font: 400 14px/1.55 var(--th-font-sans);
  color: var(--th-fg-3);
}
/* How long this takes, next to the thing it's timing rather than buried in the
   paragraph under it — it's the answer to the question that decides whether
   someone starts. */
.th-lgs-card-note {
  font: 500 12px/1.2 var(--th-font-sans);
  color: var(--th-fg-3);
}

/* Authorization sits above the upload submit — on the white card it needs its
   own tone to stay a distinct object, and checking it should feel like something
   completed rather than a form field that changed value. */
.th-lgs-card .th-lgs-authorize {
  margin-top: 18px;
  padding: 18px;
  background: var(--th-bone);
}
.th-lgs-card .th-lgs-authorize:has(input:checked) {
  background: var(--th-good);
  border-color: var(--th-good-fg);
}

.th-lgs-auth { margin-top: 22px; }
.th-lgs-email-note {
  margin: 9px 0 0;
  font: 400 12.5px/1.45 var(--th-font-sans);
  color: var(--th-fg-3);
}
/* Once the chip says the portal is open, "we'll send you a code" is describing
   something that already happened — and a second way to sign in is an invitation
   to start over. Both retire themselves. */
.th-field:has(.th-lgs-verified-chip:not([hidden])) .th-lgs-email-note { display: none; }
.th-lgs-auth:has(.th-lgs-verified-chip:not([hidden])) .th-oauth { display: none; }

/* Sits between the file picker and the submit button rather than under either,
   because that is where the hesitation is: file chosen, cursor over Submit,
   and the open question is what happens to a medical record once it leaves.
   A panel rather than a footnote — a promise set in 12px grey under a button
   reads as the disclaimer you skip, which is the opposite of the job. */
.th-lgs-file-promise {
  list-style: none;
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
  padding: 15px 16px;
  border-radius: var(--th-radius-sm);
  background: var(--th-bone);
  border: 1px solid var(--th-border-1);
}
.th-lgs-file-promise li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font: 400 13px/1.5 var(--th-font-sans);
  color: var(--th-fg-2);
}
.th-lgs-file-promise svg {
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--th-good-fg);
}

/* Every vertical saving on a phone is bought back at the only thing that
   matters here — how much of "Continue with Google" is on screen when the page
   settles. Trimmed spacing rather than trimmed content: the reasons for the
   email are what earn the email. */
@media (max-width: 480px) {
  .th-lgs-card { padding: 20px 18px 22px; }
  .th-lgs-card-head { grid-template-columns: 28px minmax(0, 1fr); gap: 12px; margin-bottom: 16px; }
  .th-lgs-card-icon { width: 28px; height: 28px; }
  .th-lgs-card-icon svg { width: 14px; height: 14px; }
  .th-lgs-portal-copy { padding: 22px 20px 22px; }
  .th-lgs-portal-title { font-size: 28px; }
  .th-lgs-portal-meta { margin-top: 14px; }
  .th-lgs-portal-steps {
    margin-top: 16px;
    padding: 12px 13px 13px;
  }
  .th-lgs-portal-steps-list { gap: 10px; }
  .th-lgs-portal-steps-list li { font-size: 13.5px; }
  .th-lgs-card .th-lgs-authorize { padding: 15px; }
  .th-lgs-auth { margin-top: 18px; }
}

.th-lgs-section--entry {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s var(--th-ease-out) 0.12s, transform 0.6s var(--th-ease-out) 0.12s;
}
.th-lgs.is-ready .th-lgs-section--entry {
  opacity: 1;
  transform: none;
}
.th-lgs-section--entry .th-field { margin-bottom: 14px; }

/* ── Step 1 · below the two jobs ──────────────────────────────────────────
   Objections, sitting after both cards rather than between them. The separation
   is the point: someone who is already convinced scrolls nothing, and someone
   who stalls at the upload finds the answers immediately below where they
   stalled instead of a page that ends.

   Same white card as the FAQ on the offer screen — it's the same object doing
   the same job — but set off by a hairline rule and a gap below it, so it
   reads as reference material after the ask rather than a third thing to do. */
.th-lgs-entry-faq-rule {
  margin: 92px 0 56px;
}

.th-lgs-entry-faq { margin-top: 0; }

@media (max-width: 480px) {
  .th-lgs-entry-faq-rule { margin: 68px 0 44px; }
}

.th-lgs .th-lgs-cta {
  width: 100%;
  box-sizing: border-box;
  height: 58px;
  font-size: 16px;
}

.th-lgs-step-nav {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin-top: 28px;
}

.th-lgs-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 4px auto 0;
  padding: 8px 12px;
  border: 0;
  background: none;
  font: 500 14px/1.3 var(--th-font-sans);
  color: var(--th-fg-2);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.th-lgs-back:hover { color: var(--th-midnight); }
.th-lgs-back:focus-visible {
  outline: 2px solid var(--th-midnight);
  outline-offset: 3px;
  border-radius: 6px;
}

.th-lgs-edit-hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 8px;
  margin: 36px 0 8px;
  font: 400 13.5px/1.4 var(--th-font-sans);
  color: var(--th-fg-3);
  text-align: center;
}
.th-lgs-edit-hint-link {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: 500 13.5px/1.4 var(--th-font-sans);
  color: var(--th-midnight);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.th-lgs-edit-hint-link:hover { color: var(--th-fg-1); }

/* Revisiting upload after they have already moved on: drop the sales portal,
   account card, and FAQ so the screen is just “your files”. */
.th-lgs.is-editing-labs .th-lgs-portal,
.th-lgs.is-editing-labs .th-lgs-cards > .th-lgs-card:not(.th-lgs-section--gated),
.th-lgs.is-editing-labs .th-lgs-entry-faq-rule,
.th-lgs.is-editing-labs .th-lgs-entry-faq,
.th-lgs.is-editing-labs .th-lgs-authorize,
.th-lgs.is-editing-labs .th-lgs-file-promise,
.th-lgs.is-editing-labs .th-lgs-gate-veil {
  display: none !important;
}
/* No FAQ under the files card, so the page padding has to be the whole
   gap to the footer. A hair more than the default 96px so the card
   doesn't sit on the legal block. */
.th-lgs.is-editing-labs .th-lgs-page {
  padding-bottom: 160px;
}

.th-lgs-upload-hint {
  margin: 14px 0 0;
  font: 500 13.5px/1.4 var(--th-font-sans);
  color: var(--th-fg-2);
  text-align: center;
}
.th-lgs-upload-hint[hidden] { display: none !important; }

.th-lgs-field-hint {
  margin: 0 0 12px;
  font: 400 13.5px/1.5 var(--th-font-sans);
  color: var(--th-fg-3);
}

.th-lgs-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.th-lgs-grid-2 + .th-lgs-field-hint {
  margin-top: 8px;
  margin-bottom: 0;
}
.th-lgs-compound {
  display: flex;
  align-items: stretch;
  gap: 10px;
}
.th-lgs-compound > .th-lgs-unit-field {
  flex: 1;
  min-width: 0;
}
.th-lgs-compound-unit {
  flex-shrink: 0;
  color: var(--th-fg-3);
  font: 500 13.5px/1 var(--th-font-sans);
  pointer-events: none;
}
.th-lgs-unit-field {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.th-lgs-unit-field .th-form-input,
.th-lgs .th-lgs-unit-field .th-form-select {
  flex: 1;
  min-width: 0;
  width: auto;
  padding-right: 40px;
}
.th-lgs-unit-field .th-lgs-compound-unit {
  position: static;
  transform: none;
}
.th-lgs-compound-unit-short { display: none; }
@media (max-width: 640px) {
  .th-lgs-grid-2 { grid-template-columns: 1fr; }
  .th-lgs-compound-unit-full { display: none; }
  .th-lgs-compound-unit-short { display: inline; }
}

.th-lgs-section {
  margin-bottom: 28px;
  transition: opacity 0.45s var(--th-ease-out), transform 0.45s var(--th-ease-out), filter 0.45s var(--th-ease-out);
}
.th-lgs-section--gated.is-locked {
  opacity: 0.38;
  filter: grayscale(0.15);
  pointer-events: none;
  transform: translateY(6px);
}
.th-lgs-section--gated.is-active {
  opacity: 1;
  filter: none;
  pointer-events: auto;
  transform: none;
}
/* Nested gate (e.g. dropzone under provider) should not double-dim the parent. */
.th-lgs-section--gated.is-active .th-lgs-section--gated.is-locked {
  opacity: 0.45;
  transform: none;
}

.th-lgs-section-head { margin-bottom: 32px; }
.th-lgs-section-head .th-body-sm { max-width: 560px; margin-inline: auto; }
.th-lgs-section-title {
  font: 400 clamp(25px, 6.4vw, 36px)/1.18 var(--th-font-sans);
  letter-spacing: -0.015em;
  color: var(--th-midnight);
  margin: 14px 0 10px;
}

.th-lgs-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.th-lgs-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font: 400 15px/1.45 var(--th-font-sans);
  color: var(--th-fg-1);
}
.th-lgs-checklist li i,
.th-lgs-checklist li svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--th-good-fg);
}

.th-lgs-providers { margin-top: 8px; gap: 10px; }
.th-lgs-provider {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid var(--th-border-1);
  background: var(--th-snow);
  border-radius: var(--th-radius-sm);
  padding: 16px 14px;
  font: 400 14.5px/1.2 var(--th-font-sans);
  color: var(--th-fg-1);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--th-t-fast) var(--th-ease-out),
              background var(--th-t-fast) var(--th-ease-out),
              color var(--th-t-fast) var(--th-ease-out);
}
.th-lgs-provider > i,
.th-lgs-provider > svg { flex-shrink: 0; color: var(--th-fg-3); }
.th-lgs-provider:hover { border-color: var(--th-border-2); }
.th-lgs-provider.is-selected {
  border-color: var(--th-midnight);
  background: var(--th-midnight);
  color: var(--th-snow);
}
.th-lgs-provider.is-selected > i,
.th-lgs-provider.is-selected > svg { color: rgba(255, 255, 255, 0.7); }

/* ---------- Lab upload guide modal -------------------------------------- */
/* The in-funnel copy of the public upload-*-labs pages: provider tabs, two
   illustrated steps, and a lightbox for the full-page screenshots. Opened from
   the hints below, and from under the "Upload your labs" heading. */

/* Appears under the provider grid the moment a provider is picked, on the
   shared alert chrome — it's the one place that names the portal the file has
   to come from, so it carries the same weight as the other alerts. */
.th-lgs-guide-reveal {
  appearance: none;
  border: 0;
  width: 100%;
  margin-top: 14px;
  padding: 14px 16px;
  text-align: left;
  cursor: pointer;
  animation: th-fade-up 0.3s var(--th-ease-out);
  transition: filter var(--th-t-fast) var(--th-ease-out);
}
.th-lgs-guide-reveal[hidden] { display: none !important; }
.th-lgs-guide-reveal:hover { filter: brightness(0.97); }
.th-lgs-guide-reveal > i,
.th-lgs-guide-reveal > svg { flex-shrink: 0; margin-top: 1px; }

.th-lgs-guide-reveal-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.th-lgs-guide-reveal-title { font: 400 14px/1.4 var(--th-font-sans); }
.th-lgs-guide-reveal-title strong { font-weight: 500; }
.th-lgs-guide-reveal-sub {
  font: 400 13px/1.4 var(--th-font-sans);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.th-lgs-guide-open {
  appearance: none;
  border: 0;
  padding: 0;
  background: none;
  font-family: var(--th-font-sans);
  font-size: inherit;
  font-weight: 500;
  line-height: inherit;
  color: var(--th-midnight);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.th-lgs-guide-open:hover { color: var(--th-fg-2); }

.th-lgs-guide-modal-panel { max-height: min(92vh, 900px); }

.th-lgs-guide-tabs {
  display: flex;
  gap: 8px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--th-border-1);
  background: var(--th-bone);
  overflow-x: auto;
  flex-shrink: 0;
  scrollbar-width: none;
}
.th-lgs-guide-tabs::-webkit-scrollbar { display: none; }

.th-lgs-guide-tab {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  border: 1px solid var(--th-border-1);
  border-radius: var(--th-radius-pill);
  background: var(--th-snow);
  padding: 8px 15px;
  font: 400 13.5px/1 var(--th-font-sans);
  color: var(--th-fg-1);
  cursor: pointer;
  transition: border-color var(--th-t-fast) var(--th-ease-out),
              background var(--th-t-fast) var(--th-ease-out),
              color var(--th-t-fast) var(--th-ease-out);
}
.th-lgs-guide-tab > i,
.th-lgs-guide-tab > svg { flex-shrink: 0; color: var(--th-fg-3); }
.th-lgs-guide-tab:hover { border-color: var(--th-border-2); }
.th-lgs-guide-tab.is-active {
  border-color: var(--th-midnight);
  background: var(--th-midnight);
  color: var(--th-snow);
}
.th-lgs-guide-tab.is-active > i,
.th-lgs-guide-tab.is-active > svg { color: rgba(255, 255, 255, 0.7); }

.th-lgs-guide-modal-body { padding: 24px; }
.th-lgs-guide-panel[hidden] { display: none !important; }

.th-lgs-guide-hero { margin-bottom: 26px; }
.th-lgs-guide-headline {
  margin: 0;
  font: 400 26px/1.15 var(--th-font-sans);
  color: var(--th-midnight);
}
.th-lgs-guide-lede {
  margin: 10px 0 0;
  max-width: 62ch;
  font: 400 14.5px/1.55 var(--th-font-sans);
  color: var(--th-fg-2);
}

.th-lgs-guide-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.th-lgs-guide-step {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.th-lgs-guide-step-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.th-lgs-guide-step-num {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--th-radius-pill);
  background: var(--th-midnight);
  color: var(--th-snow);
  font: 400 13px/1 var(--th-font-mono);
}
.th-lgs-guide-step-copy { min-width: 0; }
.th-lgs-guide-step-title {
  margin: 4px 0 0;
  font: 500 17px/1.25 var(--th-font-sans);
  color: var(--th-midnight);
}
.th-lgs-guide-step-list {
  margin: 10px 0 0;
  padding-left: 20px;
  /* Tailwind's preflight strips list markers, and these steps have to be
     followed in order. */
  list-style: decimal outside;
  font: 400 14px/1.6 var(--th-font-sans);
  color: var(--th-fg-1);
}
.th-lgs-guide-step-list::marker,
.th-lgs-guide-step-list li::marker { color: var(--th-fg-3); }
.th-lgs-guide-step-list li + li { margin-top: 6px; }

/* Screenshots are full-page captures, so they read as an artifact of another
   app rather than part of this panel — the dashed frame says "here's a
   picture" and the cursor says it opens bigger. */
.th-lgs-guide-shot {
  appearance: none;
  display: block;
  width: 100%;
  position: relative;
  padding: 10px;
  border: 1px dashed var(--th-border-2);
  border-radius: var(--th-radius-md);
  background: var(--th-cream);
  cursor: zoom-in;
  overflow: hidden;
}
.th-lgs-guide-shot:hover { border-color: var(--th-midnight); }
.th-lgs-guide-shot-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--th-radius-xs);
}
.th-lgs-guide-shot-hint {
  position: absolute;
  right: 20px;
  bottom: 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: var(--th-radius-pill);
  background: rgba(22, 42, 44, 0.82);
  color: var(--th-snow);
  font: 400 12px/1 var(--th-font-sans);
  pointer-events: none;
}

/* The last thing in the panel, and the one instruction people get wrong most
   often — so it takes the error treatment rather than a quiet neutral note. */
.th-lgs-guide-note {
  margin: 28px 0 0;
  padding: 14px 16px;
  font-size: 13.5px;
  line-height: 1.55;
}
.th-lgs-guide-note > i,
.th-lgs-guide-note > svg { flex-shrink: 0; margin-top: 2px; }
.th-lgs-guide-note strong { font-weight: 500; }

/* ---------- Single-file check modal ------------------------------------- */
/* Asked between "Submit for processing" and the upload itself when one file
   might only be half a panel. */
.th-lgs-onefile-body { padding: 20px 24px; }
.th-lgs-onefile-detected {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 11px 13px;
  border: 1px solid var(--th-border-1);
  border-radius: var(--th-radius-sm);
  background: var(--th-bone);
  font: 400 13.5px/1.45 var(--th-font-sans);
  color: var(--th-fg-1);
}
.th-lgs-onefile-detected > i,
.th-lgs-onefile-detected > svg { flex-shrink: 0; color: var(--th-fg-3); }
.th-lgs-onefile-detected strong { font-weight: 600; }

.th-lgs-onefile-explain {
  margin: 14px 0 0;
  font: 400 13.5px/1.55 var(--th-font-sans);
  color: var(--th-fg-2);
}
.th-lgs-onefile-explain[hidden] { display: none; }

/* Adding the missing report is the outcome worth making easy, so it sits at
   the far left rather than tucked beside the continue button. */
.th-lgs-onefile-footer { justify-content: space-between; }

/* Sits above the guide modal so the screenshot fills the viewport rather than
   the panel it was opened from. */
.th-lgs-guide-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: rgba(22, 42, 44, 0.88);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: zoom-out;
}
.th-lgs-guide-lightbox.hidden { display: none; }
.th-lgs-guide-lightbox-close {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--th-radius-pill);
  background: rgba(255, 255, 255, 0.96);
  color: var(--th-midnight);
  cursor: pointer;
}
.th-lgs-guide-lightbox-img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 90vh;
  border-radius: var(--th-radius-sm);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
}

.th-lgs-upload-gate { position: relative; }
.th-lgs-gate-veil {
  display: none;
}
.th-lgs-section--gated.is-locked .th-lgs-gate-veil {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 24px;
  background: color-mix(in srgb, var(--th-midnight) 20%, transparent);
  backdrop-filter: blur(0.6px);
  -webkit-backdrop-filter: blur(0.6px);
  text-align: center;
  cursor: pointer;
  color: var(--th-midnight);
}
.th-lgs-section--gated.is-locked .th-lgs-gate-veil:focus-visible {
  outline: 2px solid var(--th-midnight);
  outline-offset: -4px;
}
.th-lgs-gate-veil-msg {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  max-width: 22rem;
  padding: 18px 20px;
  border-radius: var(--th-radius-md);
  background: color-mix(in srgb, var(--th-snow) 88%, transparent);
  border: 1px solid var(--th-border-1);
}
.th-lgs-gate-veil-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 4px;
  border-radius: 50%;
  background: var(--th-sand);
  color: var(--th-midnight);
}
.th-lgs-gate-veil-title {
  font: 600 16px/1.3 var(--th-font-sans);
}
.th-lgs-gate-veil-sub {
  max-width: 32ch;
  font: 400 13.5px/1.45 var(--th-font-sans);
  color: var(--th-fg-2);
}
.th-lgs-section--gated.is-locked .th-lgs-card-head,
.th-lgs-section--gated.is-locked .th-lgs-upload-gate {
  opacity: 1;
}
.th-lgs-section--gated.is-locked .th-lgs-dropzone {
  cursor: default;
}
.th-lgs-section--gated.is-locked .th-lgs-dropzone:hover {
  border-color: var(--th-border-2);
  background: var(--th-bone);
  transform: none;
}

.th-lgs-upload-block { margin-top: 22px; }
.th-lgs-dropzone {
  cursor: pointer;
  padding: 40px 28px;
  transition: border-color var(--th-t-base) var(--th-ease-out),
              background var(--th-t-base) var(--th-ease-out),
              transform var(--th-t-fast) var(--th-ease-out);
}
.th-lgs-dropzone.is-dragover {
  border-color: var(--th-midnight);
  background: var(--th-snow);
  transform: scale(1.01);
}
.th-lgs-dropzone .th-btn { pointer-events: none; }
.th-lgs-dropzone .th-dropzone-icon {
  width: 56px;
  height: 56px;
  margin-bottom: 16px;
}
.th-lgs-dropzone .th-dropzone-title { font-size: 16px; margin-bottom: 6px; }
.th-lgs-dropzone .th-dropzone-sub { font-size: 13.5px; margin-bottom: 20px; }

/* Selected files sit at the bottom of the always-visible dotted dropzone */
.th-lgs-dropzone-files {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--th-border-1);
  text-align: left;
  animation: th-fade-up 0.3s var(--th-ease-out);
}
.th-lgs-dropzone-files[hidden] { display: none !important; }
.th-lgs-dropzone-files .th-upload-review-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.th-lgs-dropzone-files .th-upload-file {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 0;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--th-border-1);
  border-radius: var(--th-radius-sm);
  background: var(--th-snow);
}
.th-upload-file-open {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
  margin: 0;
  padding: 8px 42px 8px 10px;
  border: 0;
  background: transparent;
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: zoom-in;
  appearance: none;
  -webkit-appearance: none;
}
.th-upload-file-open:focus-visible {
  outline: 2px solid var(--th-midnight);
  outline-offset: -2px;
}
.th-upload-file-preview {
  position: relative;
  flex-shrink: 0;
  width: 56px;
  height: 72px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--th-border-1);
  border-radius: var(--th-radius-xs);
  background: #eeeee9;
  display: block;
}
.th-upload-file-open:hover .th-upload-file-preview,
.th-upload-file-preview:hover { border-color: var(--th-midnight); }
.th-upload-file-preview canvas,
.th-upload-file-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.th-upload-file-status {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--th-border-1);
  border-radius: 50%;
  box-shadow: var(--th-shadow-soft);
}
.th-upload-file-status.is-loading {
  background: rgba(255, 255, 255, 0.94);
}
.th-upload-file-status.is-ready {
  background: var(--th-good);
  color: var(--th-good-fg);
}
.th-upload-file-status .th-upload-file-spinner {
  width: 11px;
  height: 11px;
}
.th-lgs-dropzone-files .th-upload-file-meta {
  padding: 0;
  min-width: 0;
  flex: 1;
}
.th-lgs-dropzone-files .th-upload-file-name { font-size: 13.5px; }
.th-lgs-dropzone-files .th-upload-file-size { font-size: 12px; }
.th-upload-file-processed {
  display: block;
  margin-top: 6px;
  font: 500 12.5px/1 var(--th-font-sans);
  color: var(--th-midnight);
}
.th-lgs-dropzone-files .th-upload-file-remove {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: 6px;
  bottom: auto;
  width: 30px;
  height: 30px;
  margin: 0;
  transform: translateY(-50%);
  background: transparent;
}
.th-upload-file-sent {
  flex-shrink: 0;
  padding: 4px 9px;
  border-radius: var(--th-radius-pill);
  background: var(--th-good);
  color: var(--th-good-fg);
  font: 500 11px/1 var(--th-font-sans);
  letter-spacing: 0.02em;
}
.th-lgs-dropzone-files .th-upload-file-sent {
  position: absolute;
  right: 7px;
  bottom: 10px;
}
.th-upload-file-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(83, 133, 116, 0.25);
  border-top-color: var(--th-good-fg);
  border-radius: 50%;
  animation: th-spin 0.7s linear infinite;
}

.th-lgs-file-preview {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(22, 42, 44, 0.88);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.th-lgs-file-preview.hidden { display: none; }
.th-lgs-file-preview-dialog {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(920px, 100%);
  max-height: 92vh;
}
.th-lgs-file-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.th-lgs-file-preview-title {
  min-width: 0;
  margin: 0;
  color: #fff;
  font: 500 16px/1.3 var(--th-font-sans);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.th-lgs-file-preview-close {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--th-radius-pill);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
}
.th-lgs-file-preview-close:hover { background: rgba(255, 255, 255, 0.22); }
.th-lgs-file-preview-frame {
  width: 100%;
  height: min(78vh, 980px);
  border: 0;
  border-radius: var(--th-radius-sm);
  background: #fff;
}
.th-lgs-file-preview-img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 78vh;
  margin: 0 auto;
  border-radius: var(--th-radius-sm);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
}
.th-lgs-file-preview-unavailable {
  margin: 0;
  padding: 40px 24px;
  border-radius: var(--th-radius-sm);
  background: var(--th-snow);
  color: var(--th-fg-2);
  font: 400 15px/1.45 var(--th-font-sans);
  text-align: center;
}
.th-lgs-file-preview-frame[hidden],
.th-lgs-file-preview-img[hidden],
.th-lgs-file-preview-unavailable[hidden] { display: none !important; }

/* Full-page drop overlay on step 1 */
.th-lgs-page-drop {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  padding: 18px;
  background: rgba(234, 243, 234, 0.88);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  animation: th-fade-up 0.18s var(--th-ease-out);
}
.th-lgs-page-drop[hidden] { display: none !important; }
.th-lgs-page-drop-frame {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 2.5px dashed var(--th-good-fg);
  border-radius: var(--th-radius-md);
  color: var(--th-good-fg);
  pointer-events: none;
  background: rgba(255, 255, 255, 0.28);
}
.th-lgs-page-drop-title {
  margin: 8px 0 0;
  font: 500 18px/1.25 var(--th-font-sans);
  color: var(--th-midnight);
}
.th-lgs-page-drop-sub {
  margin: 0;
  font: 400 13.5px/1.4 var(--th-font-sans);
  color: var(--th-good-fg);
}

.th-lgs-file-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: var(--th-radius-sm);
  background: var(--th-good);
  color: var(--th-good-fg);
  font: 500 13px/1.3 var(--th-font-sans);
}
.th-lgs-file-chip[hidden] { display: none !important; }
.th-lgs-file-chip span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th-lgs-file-remove {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  padding: 2px;
  border-radius: 999px;
}
.th-lgs-file-remove:hover { background: rgba(83, 133, 116, 0.18); }

.th-lgs-verify {
  min-height: 1.4em;
  margin: 12px 0 0;
  font: 400 13px/1.4 var(--th-font-sans);
  color: var(--th-fg-2);
}
.th-lgs-verify[data-state="working"] { color: var(--th-midnight); }
.th-lgs-verify[data-state="done"] { color: var(--th-good-fg); font-weight: 500; }
.th-lgs-verify[data-state="error"] { color: var(--th-bad-fg); }

.th-lgs-magic {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.th-lgs-magic[hidden] { display: none !important; }
.th-lgs-mock-note {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--th-fg-3);
}

/* Single authorization — the whole card is a <label>, so a click anywhere
   in it (padding included) toggles the checkbox, not just the box itself. */
.th-lgs-authorize {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 22px;
  border-radius: var(--th-radius-sm);
  background: var(--th-snow);
  border: 1px solid var(--th-border-1);
  cursor: pointer;
  transition: border-color var(--th-t-base) var(--th-ease-out),
              background var(--th-t-base) var(--th-ease-out),
              box-shadow var(--th-t-base) var(--th-ease-out);
}
.th-lgs-authorize:hover { border-color: var(--th-border-2); box-shadow: var(--th-shadow-card); }
.th-lgs-authorize:has(input:checked) {
  border-color: var(--th-midnight);
  background: var(--th-bone);
}
.th-lgs-authorize input {
  margin-top: 3px;
  width: 19px;
  height: 19px;
  accent-color: var(--th-midnight);
  flex-shrink: 0;
}
.th-lgs-authorize-text {
  font: 400 14.5px/1.6 var(--th-font-sans);
  color: var(--th-fg-2);
}
.th-lgs-authorize-text a {
  color: var(--th-midnight);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.th-sms-consent {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 16px;
  padding: 18px;
  border-radius: var(--th-radius-sm);
  background: var(--th-snow);
  border: 1px solid var(--th-border-1);
  cursor: pointer;
  transition: border-color var(--th-t-base) var(--th-ease-out),
              background var(--th-t-base) var(--th-ease-out),
              box-shadow var(--th-t-base) var(--th-ease-out);
}
.th-sms-consent:hover { border-color: var(--th-border-2); box-shadow: var(--th-shadow-card); }
.th-sms-consent:has(input:checked) {
  border-color: var(--th-midnight);
  background: var(--th-bone);
}
.th-sms-consent input {
  margin-top: 3px;
  width: 19px;
  height: 19px;
  accent-color: var(--th-midnight);
  flex-shrink: 0;
}
.th-sms-consent-copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.th-sms-consent-text {
  font: 400 14.5px/1.45 var(--th-font-sans);
  color: var(--th-fg-1);
}
.th-sms-consent-legal {
  font: 400 12px/1.5 var(--th-font-sans);
  color: var(--th-fg-3);
}
.th-sms-consent-legal a {
  color: var(--th-midnight);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.th-auth-form .th-sms-consent {
  margin-top: 0;
}

.th-lgs-optional-panel {
  margin-top: 28px;
  padding: 20px 18px 18px;
  border: 1px solid var(--th-border-1);
  border-radius: var(--th-radius-sm);
  background: var(--th-snow);
}
.th-lgs-optional-panel .th-sms-consent,
.th-lgs-optional-panel .th-sms-consent:hover,
.th-lgs-optional-panel .th-sms-consent:has(input:checked) {
  margin-top: 16px;
  padding: 16px 0 0;
  border: 0;
  border-top: 1px solid var(--th-border-1);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.th-lgs-success { margin-top: 16px; }
.th-lgs-success[hidden] { display: none !important; }

.th-lgs-later {
  margin: 16px 0 0;
  font: 400 12px/1.5 var(--th-font-sans);
  color: var(--th-fg-3);
  text-align: center;
}

/* ---------- Labs get-started: intake wizard (steps, transitions) ------- */
/* 4-step indicator — persistent from step 2 on, tracking the journey at a
   glance instead of a plain progress bar. Suppressed on the first screen (see
   updateStepper): a tracker sitting above a sign-up announces "long form"
   before anyone has agreed to anything. */
.th-lgs-stepper {
  display: flex;
  align-items: flex-start;
  margin-bottom: 44px;
  padding: 4px 0;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s var(--th-ease-out) 0.05s, transform 0.5s var(--th-ease-out) 0.05s;
}
.th-lgs-stepper[hidden] { display: none !important; }
.th-lgs.is-ready .th-lgs-stepper { opacity: 1; transform: none; }

.th-lgs-stepper-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  appearance: none;
  -webkit-appearance: none;
}
.th-lgs-stepper-item:disabled {
  pointer-events: none;
}
.th-lgs-stepper-item.is-clickable {
  cursor: pointer;
}
.th-lgs-stepper-item.is-clickable .th-lgs-stepper-dot {
  transition:
    transform var(--th-t-base) var(--th-ease-out),
    background 0.35s var(--th-ease-out),
    border-color 0.35s var(--th-ease-out),
    box-shadow 0.35s var(--th-ease-out);
}
.th-lgs-stepper-item.is-clickable:hover .th-lgs-stepper-dot {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 4px rgba(22, 42, 44, 0.06),
    0 5px 14px rgba(22, 42, 44, 0.12);
}
.th-lgs-stepper-item.is-clickable:hover .th-lgs-stepper-label {
  color: var(--th-midnight);
}
.th-lgs-stepper-item.is-clickable:focus-visible {
  outline: 2px solid var(--th-midnight);
  outline-offset: 4px;
  border-radius: 8px;
}
.th-lgs-stepper-dot {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(22, 42, 44, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 2px 7px rgba(22, 42, 44, 0.07);
  transition:
    background 0.35s var(--th-ease-out),
    border-color 0.35s var(--th-ease-out),
    box-shadow 0.35s var(--th-ease-out);
}
.th-lgs-stepper-num {
  font: 600 13px/1 var(--th-font-sans);
  color: rgba(22, 42, 44, 0.56);
  transition: color 0.35s var(--th-ease-out);
}
.th-lgs-stepper-check {
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--th-moss);
}
.th-lgs-stepper-check svg,
svg.th-lgs-stepper-check {
  width: 17px;
  height: 17px;
  stroke-width: 2.6;
}
.th-lgs-stepper-label {
  font: 500 12.5px/1.3 var(--th-font-sans);
  color: var(--th-fg-3);
  text-align: center;
  letter-spacing: 0.025em;
  padding: 0 2px;
  transition: color 0.35s var(--th-ease-out);
}

.th-lgs-stepper-item.is-active .th-lgs-stepper-dot {
  background: var(--th-moss);
  border-color: var(--th-midnight);
  box-shadow:
    0 0 0 4px rgba(203, 209, 183, 0.42),
    0 5px 16px rgba(22, 42, 44, 0.13);
}
.th-lgs-stepper-item.is-active .th-lgs-stepper-num { color: var(--th-midnight); }
.th-lgs-stepper-item.is-active .th-lgs-stepper-label { color: var(--th-midnight); font-weight: 600; }

.th-lgs-stepper-item.is-complete .th-lgs-stepper-dot {
  background: var(--th-midnight);
  border-color: var(--th-midnight);
  box-shadow: 0 3px 10px rgba(22, 42, 44, 0.16);
}
.th-lgs-stepper-item:not(.is-complete) .th-lgs-stepper-check {
  display: none !important;
}
.th-lgs-stepper-item.is-complete .th-lgs-stepper-num { display: none; }
.th-lgs-stepper-item.is-complete .th-lgs-stepper-check { display: inline-flex; }
.th-lgs-stepper-item.is-complete .th-lgs-stepper-label { color: var(--th-fg-1); }

.th-lgs-stepper-line {
  flex: 0 0 28px;
  height: 2px;
  margin-top: 19px;
  border-radius: var(--th-radius-pill);
  background: rgba(22, 42, 44, 0.12);
  transition: background 0.35s var(--th-ease-out), box-shadow 0.35s var(--th-ease-out);
}
.th-lgs-stepper-line.is-complete {
  background: var(--th-midnight);
  box-shadow: 0 1px 4px rgba(22, 42, 44, 0.12);
}
@media (min-width: 640px) {
  .th-lgs-stepper-line { flex-basis: 44px; }
}
@media (max-width: 380px) {
  .th-lgs-stepper-line { flex-basis: 8px; }
}

.th-lgs-screens { position: relative; }
.th-lgs-screen {
  display: none;
  opacity: 1;
  transform: none;
  transition: opacity 0.38s var(--th-ease-out), transform 0.38s var(--th-ease-out);
}
.th-lgs-screen.is-active { display: block; }
.th-lgs-screen.is-entering { opacity: 0; transform: translateY(16px); }
.th-lgs-screen.is-leaving { opacity: 0; transform: translateY(-12px); }

/* Stacked option rows — used for every questionnaire answer, so the whole
   intake feels like one consistent form. On desktop, answers lay out in
   2 columns to cut down on scrolling across a 10-question intake. */
.th-lgs-option-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 8px;
}
@media (min-width: 640px) {
  .th-lgs-option-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 10px;
  }
}
.th-lgs-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--th-border-1);
  border-radius: var(--th-radius-sm);
  background: var(--th-snow);
  cursor: pointer;
  transition: border-color var(--th-t-base) var(--th-ease-out),
              background var(--th-t-base) var(--th-ease-out),
              box-shadow var(--th-t-base) var(--th-ease-out);
}
.th-lgs-option:hover { border-color: var(--th-border-2); box-shadow: var(--th-shadow-card); }
.th-lgs-option-input { width: 17px; height: 17px; accent-color: var(--th-midnight); flex-shrink: 0; }
.th-lgs-option-label { font: 400 14px/1.3 var(--th-font-sans); color: var(--th-midnight); }
.th-lgs-option:has(.th-lgs-option-input:checked) {
  border-color: var(--th-midnight);
  background: var(--th-bone);
}
.th-lgs-option:has(.th-lgs-option-input:checked) .th-lgs-option-label { font-weight: 500; }

.th-lgs-chip-edit {
  border: 0;
  background: transparent;
  padding: 0;
  margin-left: 4px;
  color: var(--th-midnight);
  font: 500 13.5px/1 var(--th-font-sans);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* "Continue with Google" — the fast path above the email gate. Google's
   branding guidelines require their mark and unmodified wording, so this stays
   a neutral white button rather than picking up th-btn-primary. */
.th-oauth { margin-bottom: 18px; }

.th-oauth form { margin: 0; }

.th-google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 52px;
  padding: 0 18px;
  border: 1px solid var(--th-border-1);
  border-radius: var(--th-radius-pill);
  background: #fff;
  color: var(--th-midnight);
  font: 500 15px/1 var(--th-font-sans);
  cursor: pointer;
  transition: border-color 0.15s var(--th-ease-out), box-shadow 0.15s var(--th-ease-out);
}
.th-google-btn:hover {
  border-color: var(--th-midnight);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.th-google-btn:focus-visible {
  outline: 2px solid var(--th-midnight);
  outline-offset: 2px;
}
.th-google-mark { flex-shrink: 0; }

.th-oauth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  color: var(--th-fg-3);
  font: 500 12.5px/1 var(--th-font-sans);
}
.th-oauth-divider::before,
.th-oauth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--th-border-1);
}

@media (max-width: 640px) {
  .th-google-btn { height: 48px; }
}

/* Email verification gate — email + OTP reveal beneath it, no modal */
.th-lgs-email-row {
  display: flex;
  gap: 10px;
  align-items: center;
}
.th-lgs-email-row .th-form-input { flex: 1; min-width: 0; }
/* Matches the grown input's computed height (padding + line-box + borders). */
.th-lgs .th-lgs-email-btn { flex-shrink: 0; white-space: nowrap; height: 52px; }
.th-lgs-email-btn:disabled { opacity: 0.6; cursor: default; }

.th-lgs-verified-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 9px 14px;
  border-radius: var(--th-radius-pill);
  background: var(--th-good);
  color: var(--th-good-fg);
  font: 500 13.5px/1 var(--th-font-sans);
  animation: th-fade-up 0.35s var(--th-ease-out);
}
.th-lgs-verified-chip[hidden] { display: none !important; }
/* Google sessions state this in .th-lgs-identity instead. Has to beat the
   inline `hidden = false` that applyResumeState() sets on every resume. */
.th-lgs-verified-chip--off { display: none !important; }

/* Identity card — replaces the email field for a session that signed in with
   Google, which never typed an address into it. */
.th-lgs-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--th-border-1);
  border-radius: var(--th-radius-sm);
  background: var(--th-bone);
}
.th-lgs-identity-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.th-lgs-identity-label {
  font: 500 13px/1.2 var(--th-font-sans);
  color: var(--th-fg-3);
}
.th-lgs-identity-email {
  font: 500 15px/1.3 var(--th-font-sans);
  color: var(--th-midnight);
  overflow-wrap: anywhere;
}
.th-lgs-identity-check { color: var(--th-good-fg); flex-shrink: 0; }
.th-lgs-verified-chip .th-lgs-chip-edit { color: var(--th-good-fg); }

.th-lgs-otp-panel {
  margin-top: 18px;
  padding: 24px 22px;
  border-radius: var(--th-radius-sm);
  background: var(--th-bone);
  border: 1px solid var(--th-border-1);
  animation: th-fade-up 0.3s var(--th-ease-out);
}
.th-lgs-otp-panel[hidden] { display: none !important; }
.th-lgs-otp-hint {
  font: 400 13.5px/1.55 var(--th-font-sans);
  color: var(--th-fg-2);
  text-align: center;
  margin: 0 0 18px;
}
.th-lgs-otp-hint strong { color: var(--th-midnight); font-weight: 500; }
.th-lgs .th-otp-grid { gap: 10px; }
.th-lgs .th-otp-box {
  width: 52px;
  height: 60px;
  font-size: 24px;
}
.th-lgs-otp-hidden-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: text;
  z-index: 10;
  border: 0;
  background: transparent;
}
.th-lgs-otp-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
}
.th-lgs-otp-resend {
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--th-fg-2);
  font: 500 13.5px/1 var(--th-font-sans);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.th-lgs-otp-resend:hover:not(:disabled) { color: var(--th-midnight); }
.th-lgs-otp-resend:disabled { color: var(--th-fg-3); cursor: default; text-decoration: none; }

/* Sequential status list — shared by both processing screens */
.th-lgs-status-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 36px 0;
}
.th-lgs-status-row {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
  border-radius: var(--th-radius-sm);
  background: var(--th-snow);
  border: 1px solid var(--th-border-1);
  opacity: 0.45;
  transform: translateY(4px);
  transition: opacity 0.4s var(--th-ease-out), transform 0.4s var(--th-ease-out),
              border-color 0.4s var(--th-ease-out), background 0.4s var(--th-ease-out);
}
.th-lgs-status-row.is-active,
.th-lgs-status-row.is-done { opacity: 1; transform: none; }
.th-lgs-status-row.is-active { border-color: var(--th-midnight); }
.th-lgs-status-row.is-done { border-color: var(--th-border-1); background: var(--th-good); }
.th-lgs-status-icon {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: var(--th-bone);
  color: var(--th-fg-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.th-lgs-status-row.is-active .th-lgs-status-icon { background: var(--th-midnight); color: var(--th-snow); }
.th-lgs-status-row.is-done .th-lgs-status-icon { background: var(--th-good-fg); color: var(--th-snow); }
.th-lgs-status-copy { display: flex; flex-direction: column; gap: 4px; }
.th-lgs-status-title { font: 500 16.5px/1.3 var(--th-font-sans); color: var(--th-midnight); }
.th-lgs-status-sub { font: 400 14px/1.45 var(--th-font-sans); color: var(--th-fg-3); }
.th-lgs-status-detail {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font: 500 13.5px/1.35 var(--th-font-sans);
  color: var(--th-good-fg);
  animation: th-fade-up 0.35s var(--th-ease-out);
}
.th-lgs-status-detail[hidden] { display: none !important; }

.th-lgs .th-lgs-auto-advance-btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.th-lgs .th-lgs-auto-advance-btn.is-counting {
  background: var(--th-good-fg);
}
.th-lgs .th-lgs-auto-advance-btn.is-counting:hover {
  background: var(--th-good-fg);
}
.th-lgs-auto-advance-btn::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: var(--th-midnight);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}
.th-lgs-auto-advance-btn.is-counting::before {
  animation: th-lgs-auto-advance-swipe var(--th-auto-advance-duration, 7s) linear forwards;
}
.th-lgs-auto-advance-label,
.th-lgs-auto-advance-btn > svg {
  position: relative;
  z-index: 1;
}
@keyframes th-lgs-auto-advance-swipe {
  to { transform: scaleX(1); }
}

/* Small tag marking a field that was pre-filled from the "extracted" lab
   data on the confirm-details step, rather than typed by the user. */
.th-lgs-field-label-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 26px;
}
.th-lgs-field-label-row .th-form-label { margin: 0; }
.th-lgs-optional {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--th-fg-3);
}

.th-lgs-detected-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  margin: 0;
  border-radius: var(--th-radius-pill);
  background: var(--th-good);
  color: var(--th-good-fg);
  font: 500 12px/1.2 var(--th-font-sans);
  letter-spacing: 0.01em;
  vertical-align: middle;
}
.th-lgs-detected-tag svg {
  flex-shrink: 0;
  overflow: visible;
}
.th-lgs-unavailable-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  margin: 0;
  border-radius: var(--th-radius-pill);
  background: var(--th-bad);
  color: var(--th-bad-fg);
  font: 500 12px/1 var(--th-font-sans);
  letter-spacing: 0.01em;
  vertical-align: middle;
}
.th-lgs-detected-tag[hidden],
.th-lgs-unavailable-tag[hidden] { display: none !important; }

.th-lgs-data-care {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin-top: 28px;
  padding: 18px;
  border: 1px solid rgba(83, 133, 116, 0.22);
  border-radius: var(--th-radius-sm);
  background: linear-gradient(135deg, var(--th-good), rgba(255, 255, 255, 0.72));
  color: var(--th-midnight);
}
.th-lgs-data-care-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--th-radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: var(--th-snow);
  color: var(--th-good-fg);
  box-shadow: 0 1px 5px rgba(22, 42, 44, 0.08);
}
.th-lgs-data-care-icon svg { display: block; }
.th-lgs-data-care h3 {
  margin: 0 0 6px;
  font: 600 14px/1.35 var(--th-font-sans);
}
.th-lgs-data-care p {
  margin: 0;
  font: 400 13.5px/1.55 var(--th-font-sans);
  color: var(--th-fg-2);
}
.th-lgs-data-care .th-lgs-data-care-privacy {
  margin-top: 8px;
  color: var(--th-good-fg);
  font-weight: 500;
}

.th-lgs-trust-footer {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 100%;
  /* Same column as the topbar and the widest screen breakout (formula / questionnaire). */
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 32px 30px;
  box-sizing: border-box;
  text-align: left;
}
.th-lgs-trust-badges {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 10px 22px;
}
.th-lgs-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--th-fg-2);
  font: 500 12.5px/1.3 var(--th-font-sans);
}
.th-lgs-trust-badge svg { color: var(--th-good-fg); }
.th-lgs-trust-disclaimer {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--th-border-1);
  text-align: left;
}
.th-lgs-trust-disclaimer p {
  margin: 0;
  color: var(--th-fg-3);
  font: 400 11.5px/1.6 var(--th-font-sans);
}
.th-lgs-trust-disclaimer a {
  color: var(--th-midnight);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.th-lgs-trust-disclaimer a:hover { color: var(--th-midnight); }
.th-lgs-trust-copy {
  margin: 16px 0 0;
  color: var(--th-fg-3);
  font: 400 11px/1.4 var(--th-font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.th-lgs-trust-copy-sep {
  display: inline-block;
  margin: 0 6px;
  opacity: 0.6;
}
.th-lgs-trust-footer a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.th-lgs-trust-footer a:hover { color: var(--th-midnight); }

.th-lgs-next-panel {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px;
  border-radius: var(--th-radius-sm);
  background: var(--th-bone);
  border: 1px solid var(--th-border-1);
  margin-top: 8px;
  animation: th-fade-up 0.45s var(--th-ease-out);
}
.th-lgs-next-panel[hidden] { display: none !important; }
.th-lgs-next-panel > i,
.th-lgs-next-panel > svg { color: var(--th-fg-2); margin-top: 2px; flex-shrink: 0; }
.th-lgs-next-title { font: 500 16.5px/1.4 var(--th-font-sans); color: var(--th-midnight); margin: 0; }

.th-lgs-final-questions {
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid var(--th-border-1);
  animation: th-fade-up 0.35s var(--th-ease-out);
}
.th-lgs-final-questions[hidden] { display: none !important; }
.th-lgs-final-questions-label {
  margin: 0 0 18px;
  font: 500 18px/1.3 var(--th-font-sans);
  color: var(--th-midnight);
}

/* Single-page intake questionnaire */
.th-lgs-intake { display: flex; flex-direction: column; gap: 18px; margin-bottom: 24px; }
.th-lgs-question {
  padding: 20px 22px;
  border-radius: var(--th-radius-md);
  background: var(--th-snow);
  border: 1px solid var(--th-border-1);
  transition: border-color 0.3s var(--th-ease-out), box-shadow 0.3s var(--th-ease-out);
}
.th-lgs-question.has-error { border-color: var(--th-bad-fg); box-shadow: 0 0 0 3px rgba(178, 58, 58, 0.08); }
.th-lgs-question-head {
  display: flex;
  align-items: flex-start;
  margin-bottom: 12px;
}
.th-lgs-question-text { font: 500 17px/1.3 var(--th-font-sans); color: var(--th-midnight); margin: 4px 0 0; }
.th-lgs-question-sub { font: 400 13px/1.4 var(--th-font-sans); color: var(--th-fg-3); margin: 4px 0 0; }
.th-lgs-question-sub--instruction { color: var(--th-bad-fg); }

/* Stand-in while the reveal is waiting on the formula HTML. */
.th-lgs-formula-pending {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 24px;
  margin-bottom: 24px;
}

/* =======================================================================
   Formula reveal (last funnel step)
   -----------------------------------------------------------------------
   The only screen in the funnel that sells rather than collects.
   Findings first, then the mix, then the ask, then proof / objections.
   `.th-reveal-*` covers both halves — the injected formula partial and
   the static sections in _offer.
   ======================================================================= */
/* One gap owns the rhythm of the whole page, rather than a margin on each
   block. The reveal is a mix of sections, a figure and a paragraph, and its
   personalized half arrives nested inside the wrapper that owns the marker
   modal — so no single "> section" rule can reach every block. The wrappers
   are display:contents (below) to flatten that nesting into this flex column.
   Scoped to .is-active because .th-lgs-screen hides itself with display. */
.th-lgs-screen.th-reveal.is-active {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding-bottom: 8px;
  min-width: 0;
}
.th-reveal-passthrough { display: contents; }

/* Shared section furniture ------------------------------------------- */
.th-reveal-panel-title {
  font: 400 clamp(23px, 3vw, 31px)/1.15 var(--th-font-sans);
  letter-spacing: -0.018em;
  color: var(--th-midnight);
  margin: 12px 0 10px;
}
.th-reveal-panel-title em { font-family: var(--th-font-display-italic); font-style: italic; }

/* The reveal hands off to the formula card by anchor rather than by scroll
   position, so the jump needs to be a movement people can follow. Scoped to
   pages carrying the funnel so it can't change anchor behaviour app-wide. */
@media (prefers-reduced-motion: no-preference) {
  html:has(.th-lgs) { scroll-behavior: smooth; }
}

/* 1 · The reveal ------------------------------------------------------ */
/* Copy + facts on the left; the product shot takes the rest and spans
   both rows so the pouches stay the hero. */
.th-reveal-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 0.34fr) minmax(0, 0.66fr);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "copy visual"
    "meta visual";
  align-items: start;
  column-gap: 4px;
  padding: 40px 0 24px 32px;
  border-radius: var(--th-radius-lg);
  background:
    linear-gradient(
      158deg,
      var(--th-midnight) 0%,
      #1b3335 58%,
      rgba(36, 64, 60, 0.72) 86%,
      rgba(36, 64, 60, 0.42) 100%
    ),
    var(--th-cream);
  color: var(--th-snow);
  box-shadow: var(--th-shadow-floating);
  animation: th-fade-up 0.6s var(--th-ease-out) both;
}
.th-reveal-hero-copy {
  grid-area: copy;
  position: relative;
  z-index: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 8px 8px 8px 0;
}

.th-reveal-flag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: var(--th-radius-pill);
  background: rgba(203, 209, 183, 0.16);
  border: 1px solid rgba(203, 209, 183, 0.34);
  color: var(--th-moss);
  font: 500 12px/1 var(--th-font-sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.th-reveal-hero-title {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font: 400 clamp(26px, 6.4vw, 32px)/1.08 var(--th-font-sans);
  letter-spacing: -0.028em;
  color: var(--th-snow);
  margin: 14px 0 0;
}
.th-reveal-hero-title-name {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.th-reveal-hero-title [data-fit-line-target="line"] {
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
}
.th-reveal-hero-title em { color: var(--th-moss); }

.th-reveal-hero-visual {
  grid-area: visual;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  min-height: 0;
  align-self: stretch;
}
.th-reveal-pouches-wrap {
  position: relative;
  width: 100%;
}
.th-reveal-hero .th-reveal-pouches {
  display: block;
  width: 100%;
  height: auto;
}
/* Printed on each pouch, anchored to the bag's bottom-left, 15% up. */
.th-reveal-pouch-label {
  position: absolute;
  margin: 0;
  padding: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1;
  font-family: var(--th-font-sans);
  font-weight: 700;
  color: #1a1a1a;
  letter-spacing: -0.04em;
  text-align: left;
  pointer-events: none;
  transform-origin: left bottom;
}
.th-reveal-pouch-label--front {
  left: 7.75%;
  bottom: 27%;
  width: 16.5%;
  transform: rotate(0.5deg);
}
.th-reveal-pouch-label--back {
  left: 36.65%;
  bottom: 27%;
  width: 16.5%;
  font-size: 0.94em;
  transform: rotate(0.25deg);
}
.th-reveal-pouch-label > [data-fit-line-target="line"] {
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
}

.th-reveal-hero-meta {
  grid-area: meta;
  display: flex;
  flex-direction: column;
  padding: 12px 8px 8px 0;
}

.th-reveal-hero-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  width: 100%;
  max-width: 430px;
  margin: 0;
}
.th-reveal-hero-stat {
  position: relative;
  overflow: hidden;
  min-width: 0;
  padding: 9px 11px 8px;
  border-radius: var(--th-radius-sm);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.15);
  animation: th-fade-up 0.5s var(--th-ease-out) both;
}
.th-reveal-hero-stat::before {
  content: "";
  position: absolute;
  inset: -60% 45% 45% -45%;
  background: radial-gradient(circle, rgba(203, 209, 183, 0.26), transparent 68%);
}
.th-reveal-hero-stat:nth-child(1) { animation-delay: 0.35s; }
.th-reveal-hero-stat:nth-child(2) { animation-delay: 0.47s; }
.th-reveal-hero-stat:nth-child(3) { animation-delay: 0.59s; }
.th-reveal-hero-stat:nth-child(4) { animation-delay: 0.71s; }

.th-reveal-hero-stat-figure,
.th-reveal-hero-stat-label { position: relative; display: block; }
.th-reveal-hero-stat-figure {
  font: 400 22px/1 var(--th-font-sans);
  letter-spacing: -0.035em;
  color: var(--th-moss);
}
.th-reveal-hero-stat-label {
  margin-top: 4px;
  font: 500 10px/1.3 var(--th-font-sans);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

.th-reveal-hero-certs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 28px;
  width: 100%;
  margin: 16px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.th-reveal-hero-cert-label {
  display: block;
  margin-bottom: 8px;
  font: 500 10px/1 var(--th-font-sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.th-reveal-hero-cert-set { min-width: 0; }
.th-reveal-hero-cert-set ul {
  display: flex;
  flex-direction: column;
  gap: 7px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.th-reveal-hero-cert-set li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  font: 500 12.5px/1.3 var(--th-font-sans);
  color: rgba(255, 255, 255, 0.78);
  overflow-wrap: anywhere;
}
.th-reveal-hero-certs svg { color: var(--th-moss); flex-shrink: 0; }

.th-reveal .th-reveal-cta {
  background: var(--th-snow);
  color: var(--th-midnight);
  max-width: 400px;
}
.th-reveal .th-reveal-cta:hover { background: var(--th-cream); color: var(--th-midnight); }
.th-reveal .th-reveal-cta:disabled { opacity: 0.55; }

/* Dual price CTA: monthly is the lean; the cycle charge rides under it so
   the real bill is on the button instead of only in the fine print. */
.th-lgs .th-lgs-cta.th-reveal-cta--priced {
  height: auto;
  min-height: 58px;
  padding: 12px 22px;
  white-space: normal;
  gap: 12px;
  text-align: left;
}
.th-reveal-cta-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}
.th-reveal-cta-primary {
  font: 500 16px/1.15 var(--th-font-sans);
  letter-spacing: -0.01em;
}
.th-reveal-cta-billing {
  font: 400 12.5px/1.2 var(--th-font-sans);
  opacity: 0.62;
  letter-spacing: 0.01em;
}
.th-reveal-cta--priced > svg { flex-shrink: 0; }

.th-reveal-cta-note {
  max-width: 400px;
  margin: 12px 0 0;
  font: 400 13px/1.5 var(--th-font-sans);
  color: rgba(255, 255, 255, 0.6);
}
.th-reveal-cta-note--center { margin-left: auto; margin-right: auto; text-align: center; }

/* 1b · Lab read — a prompt, not a section. Table lives in a modal. --- */
.th-reveal-labstrip-wrap { min-width: 0; }
.th-reveal-labstrip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 16px;
  width: 100%;
  margin: 0;
  padding: 16px 18px 16px 16px;
  border: 1px solid var(--th-border-1);
  border-radius: var(--th-radius-md);
  background: var(--th-bone);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: background var(--th-t-base) var(--th-ease-out), border-color var(--th-t-base) var(--th-ease-out);
}
.th-reveal-labstrip:hover {
  background: var(--th-snow);
  border-color: var(--th-border-2);
}
.th-reveal-labstrip:focus-visible {
  outline: 2px solid var(--th-midnight);
  outline-offset: 3px;
}
.th-reveal-labstrip--static {
  cursor: default;
  grid-template-columns: auto minmax(0, 1fr);
}
.th-reveal-labstrip--static:hover {
  background: var(--th-bone);
  border-color: var(--th-border-1);
}
.th-reveal-labstrip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--th-snow);
  border: 1px solid var(--th-border-1);
  color: var(--th-midnight);
  flex-shrink: 0;
}
.th-reveal-labstrip-icon svg {
  display: block;
  flex-shrink: 0;
  overflow: visible;
}
.th-reveal-labstrip-copy {
  min-width: 0;
  font: 400 14px/1.5 var(--th-font-sans);
  color: var(--th-fg-2);
  text-wrap: pretty;
}
.th-reveal-labstrip-lead {
  display: block;
  margin-bottom: 3px;
  font: 500 14.5px/1.3 var(--th-font-sans);
  letter-spacing: -0.01em;
  color: var(--th-midnight);
}
.th-reveal-labstrip-num {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.th-reveal-labstrip-held { font-weight: 400; color: var(--th-fg-2); }
.th-reveal-labstrip-go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  font: 500 13px/1 var(--th-font-sans);
  color: var(--th-midnight);
  white-space: nowrap;
}
.th-reveal-labstrip-go svg { flex-shrink: 0; }
.th-reveal-themes-modal {
  max-height: min(90vh, 880px);
}
.th-reveal-theme-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  background: transparent;
}
.th-reveal-theme-table-col-marker { width: auto; }
.th-reveal-theme-table-col-status { width: 5.75rem; }
.th-reveal-theme-table-col-range { width: 34%; }
.th-reveal-theme-table td {
  padding: 14px 20px 16px;
  vertical-align: top;
  border-bottom: 1px solid var(--th-border-1);
}
.th-reveal-theme-table tbody:last-child .th-reveal-theme-table-row:last-child td {
  border-bottom: 0;
}
.th-reveal-theme-table-row:hover td { background: rgba(243, 238, 231, 0.55); }
.th-reveal-theme-table-group th {
  padding: 10px 20px;
  background: var(--th-bone);
  border-bottom: 1px solid var(--th-border-1);
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  vertical-align: middle;
}
.th-reveal-theme-group-note {
  display: block;
  margin-top: 4px;
  font: 400 13px/1.45 var(--th-font-sans);
  letter-spacing: 0;
  text-transform: none;
  color: var(--th-fg-2);
}
.th-reveal-theme-table-marker { min-width: 0; }
.th-reveal-theme-table-status {
  text-align: center;
  white-space: nowrap;
  padding-top: 15px;
}
.th-reveal-theme-table-range {
  padding-top: 16px;
}

.th-reveal-theme-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 500 12px/1 var(--th-font-sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--th-midnight);
}
.th-reveal-theme-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--th-fg-2);
  flex-shrink: 0;
}
.th-reveal-theme-icon svg { flex-shrink: 0; }
.th-reveal-theme-finding-name {
  display: block;
  font: 500 15px/1.25 var(--th-font-sans);
  letter-spacing: -0.01em;
  color: var(--th-midnight);
}
.th-reveal-theme-range {
  width: 100%;
  margin-top: 0;
}
.th-reveal-theme-range .th-risk-range-track { height: 24px; }
.th-reveal-theme-range .th-risk-range-pin-value { font-size: 11px; }
.th-reveal-theme-range .th-risk-range-bar { height: 8px; }
.th-reveal-theme-range .th-risk-range-labels { height: 16px; }
.th-reveal-theme-range .th-risk-range-labels span {
  font-size: 10px;
  color: var(--th-fg-3);
}
.th-reveal-theme-proof {
  margin: 0;
  font: 400 13px/1.45 var(--th-font-sans);
  color: var(--th-fg-2);
}
.th-reveal-theme-desc {
  display: block;
  max-width: 46ch;
  margin: 6px 0 0;
  font: 400 13.5px/1.5 var(--th-font-sans);
  color: var(--th-fg-2);
}

/* Same label as the band, at chip scale — so a marker or answer visibly
   belongs to a theme. MOCK until mappings exist. */
.th-reveal-theme-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: var(--th-radius-pill);
  background: rgba(83, 133, 116, 0.12);
  font: 500 10.5px/1.2 var(--th-font-sans);
  letter-spacing: 0.02em;
  color: var(--th-good-fg);
  white-space: nowrap;
}

/* 2 · The mix --------------------------------------------------------- */
.th-reveal-formula {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  border-radius: var(--th-radius-lg);
  overflow: hidden;
  background: var(--th-snow);
  border: 1px solid var(--th-border-1);
  box-shadow: var(--th-shadow-floating);
  /* Landing target for the reveal's scroll cue — the card's dark head should
     come to rest clear of the top edge, not flush against it. */
  scroll-margin-top: 28px;
}
.th-reveal-formula-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 28px 22px 32px;
  background: var(--th-midnight);
  color: var(--th-snow);
}
.th-reveal-formula-head > :first-child { min-width: 0; flex: 1; }
.th-reveal-formula-eyebrow { color: rgba(255, 255, 255, 0.55); }
.th-reveal-formula-name {
  font: 400 clamp(20px, 2.6vw, 30px)/1.15 var(--th-font-sans);
  letter-spacing: -0.02em;
  color: var(--th-snow);
  margin: 10px 0 8px;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.th-reveal .th-reveal-formula-meta {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.65em;
  row-gap: 4px;
  margin: 0;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.5);
}
/* The details they confirmed, printed on the formula those details produced.
   Two columns so four cells stay a compact block beside the name rather than
   a row that competes with it. */
.th-reveal-formula-vitals {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, auto));
  gap: 1px;
  margin: 0;
  border-radius: var(--th-radius-sm);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.14);
}
.th-reveal-formula-vital {
  padding: 8px 14px;
  background: #1b3335;
}
.th-reveal-formula-vitals dt {
  font: 500 9.5px/1 var(--th-font-sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.th-reveal-formula-vitals dd {
  margin: 5px 0 0;
  font: 500 14px/1.15 var(--th-font-sans);
  letter-spacing: -0.01em;
  color: var(--th-snow);
  overflow-wrap: anywhere;
}

/* Zone titles inside the value card — quieter than page-level panel titles
   so the card stays one composition rather than three stacked sections. */
.th-reveal-formula-zone-title {
  font: 500 clamp(18px, 2.2vw, 22px)/1.2 var(--th-font-sans);
  letter-spacing: -0.015em;
  color: var(--th-midnight);
  margin: 0 0 8px;
}
.th-reveal-formula-zone-lead {
  margin: 0;
  max-width: 56ch;
  font: 400 14.5px/1.55 var(--th-font-sans);
  color: var(--th-fg-2);
}

.th-reveal-formula-compare { padding: 28px 32px 8px; min-width: 0; }
.th-reveal-formula-compare-alert { margin-bottom: 22px; }
/* Table wrap lives inside the compare zone, so drop the outer padding the
   standalone wrap used to carry. */
.th-reveal-formula-compare .th-reveal-formula-table-wrap { padding: 0; }

/* Membership band — the experience that makes the comparison incomplete
   without it. Bone ground separates it from the white table above without
   breaking out of the card. */
.th-reveal-formula-membership {
  margin-top: 28px;
  padding: 28px 32px 30px;
  background: var(--th-bone);
  border-top: 1px solid var(--th-border-1);
}
.th-reveal-formula-membership-head { margin-bottom: 22px; }
.th-reveal-formula-membership-head .th-eyebrow { color: var(--th-fg-3); }
.th-reveal-formula-membership .th-reveal-include-cards { gap: 14px; }
.th-reveal-formula-membership .th-reveal-include-card {
  background: var(--th-snow);
  box-shadow: 0 1px 0 rgba(22, 42, 44, 0.04);
}

/* Fulfillment, as the second chapter of the subscription band rather than a
   card of its own further down the page. Shares the band's ground, so it
   only needs a rule to separate it — and the eta chip has to leave bone,
   which is now the surface it sits on rather than a contrast against it. */
.th-reveal-formula-next {
  margin-top: 26px;
  padding-top: 26px;
  border-top: 1px solid var(--th-border-1);
}
.th-reveal-formula-next .th-reveal-next-head { margin-bottom: 26px; }
.th-reveal-formula-next .th-reveal-next-eta {
  background: var(--th-snow);
  border-color: var(--th-border-2);
}
.th-reveal-formula-next .th-reveal-next-after {
  margin-top: 24px;
  padding-top: 16px;
}

/* Ingredient identity — the table row and its open evidence share these
   so the same name always reads the same way. */
.th-reveal-ing-num {
  flex-shrink: 0;
  padding-top: 3px;
  font-size: 12px;
  color: var(--th-fg-3);
}
.th-reveal-ing-name {
  font: 500 15.5px/1.3 var(--th-font-sans);
  color: var(--th-midnight);
}
.th-reveal-ing-why {
  margin: 8px 0 0;
  font: 400 14px/1.55 var(--th-font-sans);
  color: var(--th-fg-2);
  max-width: 70ch;
}
/* Why this ingredient is here, in the row. A hairline rule attaches the
   evidence to the ingredient above it without needing a "the readings behind
   it" heading, and keeps it quiet enough that the whole list stays scannable
   with every reason expanded. */
.th-reveal-because {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  margin: 13px 0 0;
  padding: 0 0 0 15px;
  border-left: 2px solid var(--th-border-1);
}

/* Readings wrap instead of stacking one full-width row each — a vitamin
   with a dozen markers has to stay scannable when the row is open. */
.th-reveal-labs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}
.th-reveal-lab-chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 6px 8px 6px 10px;
  margin: 0;
  border: 0;
  border-radius: var(--th-radius-xs);
  background: var(--th-bone);
  text-align: left;
  cursor: pointer;
  transition: background var(--th-t-fast) var(--th-ease-out);
}
.th-reveal-lab-chip:hover { background: var(--th-sand); }
.th-reveal-lab-chip:focus-visible {
  outline: 2px solid var(--th-midnight);
  outline-offset: 2px;
}
.th-reveal-lab-chip--static { cursor: default; }
.th-reveal-lab-chip--static:hover { background: var(--th-bone); }
.th-reveal-lab-chip-name {
  min-width: 0;
  font: 500 13px/1.3 var(--th-font-sans);
  color: var(--th-midnight);
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-decoration-color: var(--th-border-2);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.th-reveal-lab-chip:hover .th-reveal-lab-chip-name {
  text-decoration-color: var(--th-midnight);
}
.th-reveal-lab-chip--static .th-reveal-lab-chip-name,
.th-reveal-lab-chip--static:hover .th-reveal-lab-chip-name {
  text-decoration: none;
}
.th-reveal-lab-chip-value { font-size: 12px; color: var(--th-fg-2); }
.th-reveal-lab-chip-value--empty { color: var(--th-fg-3); }

/* Goals and unmeasured areas nest under the group they belong to, as chips
   rather than a third heading. */
.th-reveal-nested-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.th-reveal-nested-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border-radius: var(--th-radius-pill);
  background: var(--th-bone);
  font: 400 12.5px/1.2 var(--th-font-sans);
  color: var(--th-fg-2);
  white-space: nowrap;
}

/* Answers read as sentences and readings read as measurements, so they need
   no labels to tell them apart. */
.th-reveal-because-answer {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
}
.th-reveal-because-q { font: 400 13.5px/1.45 var(--th-font-sans); color: var(--th-fg-2); }
.th-reveal-because-a {
  font: 500 13.5px/1.45 var(--th-font-sans);
  color: var(--th-good-fg);
}
.th-reveal-because-a::before { content: "→ "; color: var(--th-fg-3); }
/* The evidence sentence authored for this specific answer, from the question's
   ingredient mapping. A full sentence, so it takes its own line beneath the
   question and answer rather than sharing their wrapping row. */
.th-reveal-because-ref {
  flex-basis: 100%;
  font: 400 12.5px/1.5 var(--th-font-sans);
  color: var(--th-fg-3);
}

/* 3b · The formula table — three columns: the ingredient, what's in this
   formula, and what that same ingredient costs bought on its own.
   `separate` rather than collapsed borders: the middle column is drawn as
   one continuous band with a capped top and rounded foot, which needs cell
   backgrounds and cell radii that collapsed borders don't render. */
.th-reveal-formula-table-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.th-formula-table {
  --th-formula-col-ours: 136px;
  --th-formula-col-price: 114px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}

/* Column heads. Only the middle one is a label people need to read as a
   brand; the other two are quiet captions for the columns under them. */
.th-formula-table-th {
  padding: 0 0 10px;
  vertical-align: bottom;
  text-align: left;
  font: 500 11px/1.2 var(--th-font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--th-fg-3);
}
.th-formula-table-th--ours {
  width: var(--th-formula-col-ours);
  overflow: hidden;
  padding: 0;
  text-align: center;
}
.th-formula-table-th--price {
  width: var(--th-formula-col-price);
  overflow: hidden;
  text-align: center;
  white-space: normal;
  letter-spacing: 0.05em;
  line-height: 1.35;
}
.th-formula-table-th-short { display: none; }

/* The cap that starts the band — dark, so the column reads as the answer
   before any of the figures underneath do. */
.th-formula-table-cap {
  display: block;
  max-width: 100%;
  overflow: hidden;
  padding: 11px 12px 12px;
  border-radius: var(--th-radius-xs) var(--th-radius-xs) 0 0;
  background: var(--th-midnight);
}
.th-formula-table-cap-brand {
  display: block;
  font: 500 13px/1.2 var(--th-font-sans);
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--th-snow);
}
.th-formula-table-cap-sub {
  display: block;
  margin-top: 3px;
  font: 400 10px/1.2 var(--th-font-sans);
  letter-spacing: 0.1em;
  color: var(--th-moss);
}

.th-formula-table-cell {
  padding: 9px 0;
  vertical-align: middle;
  border-bottom: 1px solid var(--th-border-1);
  transition: background var(--th-t-base) var(--th-ease-out);
}
.th-formula-table-cell--name {
  padding-right: 20px;
  text-align: left;
}
.th-formula-table-cell--name .th-reveal-ing-num {
  padding-top: 0;
  transition: color var(--th-t-base) var(--th-ease-out);
}
.th-formula-table-cell--name .th-reveal-ing-name {
  font-weight: 400;
  line-height: 1.35;
}

/* Each ingredient is one details: the summary is the three comparison
   columns, aligned to thead via the same column widths; the body is the
   evidence that used to live in a second list below the card. */
.th-formula-table-item-cell {
  padding: 0;
  border: 0;
  vertical-align: top;
}
.th-formula-table-summary {
  display: block;
  cursor: pointer;
  list-style: none;
}
.th-formula-table-summary::-webkit-details-marker { display: none; }
.th-formula-table-summary::marker { content: ""; }
.th-formula-table-summary-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--th-formula-col-ours) var(--th-formula-col-price);
  align-items: stretch;
  width: 100%;
  min-width: 0;
}
.th-formula-table-details { width: 100%; }
.th-formula-table-summary:focus-visible {
  outline: 2px solid var(--th-midnight);
  outline-offset: -2px;
}
.th-formula-table-summary .th-formula-table-cell {
  display: flex;
  align-items: center;
}
.th-formula-table-summary .th-formula-table-cell--name { min-width: 0; }
.th-formula-table-summary .th-formula-table-cell--ours { justify-content: center; }
.th-formula-table-summary .th-formula-table-cell--price { justify-content: center; }

.th-formula-table-ing {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  width: 100%;
  min-width: 0;
}
.th-formula-table-ing .th-reveal-ing-num { flex-shrink: 0; }
.th-formula-table-ing-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  flex: 1 1 auto;
  min-width: 0;
}
.th-formula-table-ing .th-reveal-ing-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}
.th-formula-table-ing-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 auto;
  min-width: 0;
  margin-left: auto;
}
.th-formula-table-ing .th-reveal-why-tags { justify-content: flex-start; }

.th-formula-table-details:hover .th-formula-table-cell--name,
.th-formula-table-details:hover .th-formula-table-cell--price { background: var(--th-bone); }
.th-formula-table-details:hover .th-formula-table-cell--ours {
  background: rgba(83, 133, 116, 0.13);
}
.th-formula-table-details[open] .th-formula-table-cell--name,
.th-formula-table-details[open] .th-formula-table-cell--price { background: var(--th-bone); }
.th-formula-table-details[open] .th-formula-table-summary .th-formula-table-cell { border-bottom: 0; }
.th-formula-table-details[open] .th-reveal-ing-num { color: var(--th-good-fg); }
.th-formula-table-details:hover .th-reveal-why-toggle { background: var(--th-snow); }
.th-formula-table-details[open]:not(.is-peeking):not(.is-preview-open):not(.is-preview-closing) .th-reveal-why-toggle {
  transform: rotate(45deg);
  background: var(--th-midnight);
  border-color: var(--th-midnight);
  color: var(--th-snow);
}
.th-formula-table-details .th-reveal-why-body {
  padding: 4px 16px 18px 42px;
  background: var(--th-bone);
  border-bottom: 1px solid var(--th-border-1);
}
/* Hover peek (ingredient-rows controller): a closed row opens far enough to
   show a reason exists, faded off at the cut so it reads as an invitation
   rather than truncated content. The strip itself is clickable so the peek
   can be committed; children stay inert so half-shown marker buttons don't
   fire. */
.th-formula-table-details.is-peeking .th-reveal-why-body {
  max-height: 38px;
  overflow: hidden;
  cursor: pointer;
  -webkit-mask-image: linear-gradient(180deg, #000 15%, transparent);
  mask-image: linear-gradient(180deg, #000 15%, transparent);
}
.th-formula-table-details.is-peeking .th-reveal-why-body > * {
  pointer-events: none;
}
/* Sticky-note demo: first row opens far enough to show a reason, then eases
   shut (slower than a click) once the note is dismissed. */
.th-formula-table-details.is-preview-open .th-reveal-why-body {
  max-height: 120px;
  overflow: hidden;
  cursor: pointer;
  transition: max-height 0.28s var(--th-ease-out);
  -webkit-mask-image: linear-gradient(180deg, #000 52%, transparent);
  mask-image: linear-gradient(180deg, #000 52%, transparent);
}
.th-formula-table-details.is-preview-open .th-reveal-why-body > * {
  pointer-events: none;
}
.th-formula-table-details.is-preview-closing .th-reveal-why-body {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
  border-bottom-width: 0;
  transition: max-height 0.58s var(--th-ease-out), padding 0.58s var(--th-ease-out);
}
.th-formula-table-details[open]:not(.is-peeking):not(.is-preview-open) .th-reveal-why-body {
  cursor: pointer;
}
.th-formula-table-details .th-reveal-because {
  margin-top: 0;
  padding-left: 0;
  border-left: 0;
  gap: 8px;
}
.th-formula-table-details .th-reveal-because-answer {
  padding: 2px 2px 2px 12px;
  border-left: 2px solid var(--th-border-1);
}

.th-formula-table-item:last-child .th-formula-table-cell,
.th-formula-table-item:last-child .th-reveal-why-body { border-bottom: 0; }

/* The band itself: one tint down the whole column, closed off by the totals
   cell at the bottom. */
.th-formula-table-cell--ours {
  padding: 9px 12px;
  text-align: center;
  background: rgba(83, 133, 116, 0.07);
  border-bottom-color: rgba(83, 133, 116, 0.16);
}
.th-formula-table-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  border-radius: var(--th-radius-pill);
  background: var(--th-good-fg);
  color: var(--th-snow);
}
.th-formula-table-check svg,
.th-reveal-why-toggle svg {
  display: block;
  flex-shrink: 0;
  overflow: visible;
}

.th-formula-table-cell--price { text-align: center; white-space: nowrap; }
.th-formula-table-price {
  font: 500 17px/1.2 var(--th-font-sans);
  letter-spacing: -0.015em;
  color: var(--th-midnight);
}
.th-formula-table-dash { color: var(--th-fg-3); }
.th-formula-table-skeleton { display: inline-block; width: 44px; height: 12px; }
.th-formula-table-skeleton--total { width: 68px; height: 20px; }

/* The totals row — the one place on the page allowed to be this loud.
   Everything above it was building to these two figures. A single rule above
   the sum, and no hairline under the last ingredient, so the two don't stack
   into one muddy 2px line. */
.th-formula-table-totals .th-formula-table-cell {
  padding-top: 18px;
  padding-bottom: 20px;
  border-bottom: 0;
}
.th-formula-table-totals .th-formula-table-cell--name,
.th-formula-table-totals .th-formula-table-cell--price {
  border-top: 1px solid var(--th-border-2);
}
.th-formula-table-totals .th-formula-table-cell--ours {
  background: rgba(83, 133, 116, 0.13);
  border-radius: 0 0 var(--th-radius-xs) var(--th-radius-xs);
  vertical-align: top;
}
.th-formula-table-totals .th-formula-table-cell--price {
  text-align: center;
  vertical-align: top;
}
.th-formula-table-totals-retail {
  display: inline-block;
}
.th-formula-table-totals-kicker { display: none; }
.th-formula-table-totals-label {
  display: block;
  font: 400 27px/1 var(--th-font-sans);
  letter-spacing: -0.025em;
  color: var(--th-midnight);
}
.th-formula-table-totals-sub {
  display: block;
  margin-top: 5px;
  font: 400 11.5px/1.35 var(--th-font-sans);
  color: var(--th-fg-3);
}
/* Both totals are set identically — same size, same weight, same color. The
   band and the "Save" pill say which one wins; the type doesn't editorialize
   about it. */
.th-formula-table-total {
  display: block;
  font: 400 27px/1 var(--th-font-sans);
  letter-spacing: -0.025em;
  color: var(--th-midnight);
}
.th-formula-table-savings {
  display: inline-block;
  margin-top: 9px;
  padding: 4px 11px;
  border-radius: var(--th-radius-pill);
  background: var(--th-good-fg);
  font: 500 11.5px/1.35 var(--th-font-sans);
  color: var(--th-snow);
  white-space: nowrap;
}

/* The card closes on the ask — snow against the bone membership band above
   so the CTA reads as a distinct finish, not another content slab. */
.th-reveal-formula-action {
  padding: 18px 32px 22px;
  background: var(--th-snow);
  border-top: 1px solid var(--th-border-1);
}
.th-reveal-formula-action .th-btn { max-width: 400px; }
.th-reveal-formula-action .th-lgs-field-hint { margin: 12px 0 0; padding: 0; }
.th-reveal-formula-fine {
  margin: 0;
  padding: 0;
  border: 0;
  font: 400 12px/1.55 var(--th-font-sans);
  color: var(--th-fg-3);
  text-wrap: pretty;
}

/* Ask-AI sits under the comparison table, still inside the compare zone. */
.th-reveal-formula-compare .th-reveal-ask {
  margin-top: 22px;
  padding: 20px 0 24px;
  border-top: 1px solid var(--th-border-1);
}

.th-skeleton-line {
  display: block;
  height: 11px;
  flex: 1;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--th-sand) 25%, var(--th-bone) 50%, var(--th-sand) 75%);
  background-size: 200% 100%;
  animation: th-skeleton-shimmer 1.4s ease-in-out infinite;
}
.th-skeleton-line--price { flex: 0 0 46px; }
@keyframes th-skeleton-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .th-skeleton-line { animation: none; }
}

/* "Price it yourself" — the same question, handed to their assistant ---
   Ported from the AI links in the Shopify footer. */
.th-reveal-ask {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--th-border-1);
}
.th-reveal-ask-heading {
  margin: 0 0 12px;
  font: 400 16px/1.5 var(--th-font-sans);
  color: var(--th-fg-2);
}
.th-reveal-ask-note {
  margin: 14px 0 0;
  font: 400 12px/1.55 var(--th-font-sans);
  color: var(--th-fg-3);
  text-wrap: pretty;
}
.th-reveal-ask-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.th-reveal-ask-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--th-snow);
  border: 1px solid var(--th-border-1);
  border-radius: var(--th-radius-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.th-reveal-ask-link:hover,
.th-reveal-ask-link:focus-visible {
  border-color: var(--th-border-2);
  box-shadow: 0 4px 12px rgba(22, 42, 44, 0.08);
  transform: translateY(-1px);
}
.th-reveal-ask-icon { display: block; width: 28px; height: 28px; object-fit: contain; }

/* Sticky note over the formula card — not a modal. No dimmer, no blur. */
.th-reveal-preview-note {
  position: fixed;
  z-index: 60;
  width: min(380px, calc(100vw - 40px));
  padding: 22px 22px 20px;
  background: var(--th-warn);
  color: var(--th-midnight);
  border-radius: 2px;
  box-shadow: 0 2px 4px rgba(22, 42, 44, 0.08), 0 12px 28px rgba(22, 42, 44, 0.14), 0 28px 56px rgba(22, 42, 44, 0.22);
  transform: translate(-50%, -50%) rotate(-0.7deg);
}
.th-reveal-preview-note.hidden { display: none; }
.th-reveal-preview-note::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 50%;
  width: 78px;
  height: 18px;
  background: rgba(255, 255, 255, 0.42);
  transform: translateX(-50%) rotate(-3deg);
  box-shadow: 0 1px 2px rgba(22, 42, 44, 0.08);
}
.th-reveal-preview-note .th-eyebrow {
  color: var(--th-warn-fg);
  margin: 0 28px 12px 0;
}
.th-reveal-preview-note-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  font: 400 14px/1.45 var(--th-font-sans);
  color: var(--th-fg-1);
}
.th-reveal-preview-note-list li { padding-left: 1.05em; }
.th-reveal-preview-note-list li::before {
  content: "-";
  float: left;
  margin-left: -1.05em;
}
.th-reveal-preview-note-list li + li { margin-top: 8px; }
.th-reveal-preview-note-list u {
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.th-reveal-preview-note-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--th-radius-pill);
  background: transparent;
  color: var(--th-warn-fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.th-reveal-preview-note-close:hover {
  background: rgba(255, 255, 255, 0.45);
  color: var(--th-midnight);
}
@media (prefers-reduced-motion: no-preference) {
  .th-reveal-preview-note:not(.hidden) {
    animation: th-preview-note-in 0.35s var(--th-ease-out) both;
  }
}
@keyframes th-preview-note-in {
  from { opacity: 0; transform: translate(-50%, -46%) rotate(-0.7deg); }
  to   { opacity: 1; transform: translate(-50%, -50%) rotate(-0.7deg); }
}

/* Evidence chips, plus toggle, and the open-row body — used inside each
   formula-table row. Collapsed rows stay scannable; open one for the
   reading or answer behind that ingredient. */
.th-reveal-why-tags {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}
.th-reveal-why-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--th-radius-pill);
  font: 500 11.5px/1.2 var(--th-font-sans);
  white-space: nowrap;
}
.th-reveal-why-tag--lab { background: var(--th-good); color: var(--th-good-fg); }
.th-reveal-why-tag--answer { background: rgba(180, 187, 214, 0.28); color: #4c5680; }
.th-reveal-why-tag--base { background: var(--th-sand); color: var(--th-fg-2); }
.th-reveal-why-tag svg { flex-shrink: 0; }

.th-reveal-why-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 999px;
  border: 1px solid var(--th-border-1);
  color: var(--th-fg-2);
  transition: transform var(--th-t-base) var(--th-ease-out),
              background var(--th-t-base) var(--th-ease-out),
              color var(--th-t-base) var(--th-ease-out);
}
.th-reveal-why-body {
  animation: th-fade-up 0.28s var(--th-ease-out) both;
}
.th-reveal-why-body .th-reveal-ing-why { margin-top: 0; margin-bottom: 12px; }
.th-reveal-why-group + .th-reveal-why-group { margin-top: 12px; }
.th-reveal-why-group-label {
  display: block;
  margin-bottom: 8px;
  font: 500 11px/1.2 var(--th-font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--th-fg-3);
}
.th-reveal-why-foundational {
  margin: 0;
  font: 400 14px/1.55 var(--th-font-sans);
  color: var(--th-fg-2);
}

/* 4 · What's included — photo cards (now nested in the value card) --- */
.th-reveal-includes-head { max-width: 620px; margin-bottom: 26px; }
.th-reveal-include-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.th-reveal-include-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--th-radius-sm);
  background: var(--th-snow);
  border: 1px solid rgba(22, 42, 44, 0.06);
}
.th-reveal-include-card-img {
  display: block;
  width: 100%;
  aspect-ratio: 376 / 300;
  object-fit: cover;
  background: var(--th-bone);
}
.th-reveal-include-card-body {
  padding: 18px 18px 20px;
  border-top: 1px solid rgba(22, 42, 44, 0.06);
}
.th-reveal-include-card-body h4 {
  font: 500 17px/1.25 var(--th-font-sans);
  color: var(--th-midnight);
  margin: 0 0 12px;
}
.th-reveal-include-card-body ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.th-reveal-include-card-body li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font: 400 13.5px/1.45 var(--th-font-sans);
  color: var(--th-fg-2);
}
.th-reveal-include-card-body li svg {
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--th-midnight);
}

/* 4b · Compatible labs — restates the step-1 providers right before checkout,
   as a quiet word mark row rather than another card. */
.th-reveal-compat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 28px;
  padding: 18px 26px;
  border-radius: var(--th-radius-md);
  background: var(--th-bone);
  border: 1px solid var(--th-border-1);
}
.th-reveal-compat-label {
  font: 500 12px/1.3 var(--th-font-sans);
  letter-spacing: 0.02em;
  color: var(--th-fg-2);
  flex-shrink: 0;
}
.th-reveal-compat-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
}
.th-reveal-compat-list li {
  font: 500 14px/1.3 var(--th-font-sans);
  letter-spacing: -0.005em;
  color: var(--th-midnight);
}

/* 5 · Price --------------------------------------------------------- */
.th-reveal-price {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 350px);
  gap: 40px;
  align-items: center;
  padding: 40px;
  border-radius: var(--th-radius-lg);
  background:
    radial-gradient(ellipse 60% 100% at 100% 0%, rgba(180, 187, 214, 0.2), transparent 60%),
    linear-gradient(150deg, var(--th-midnight), #1d3436);
  color: var(--th-snow);
  box-shadow: var(--th-shadow-card);
}
/* Product card — the offer lives here, not inside the formula. The dark
   buy band is full-bleed at the top; membership continues below on bone.
   Overflow clips both to the card's corners. */
.th-reveal-product {
  border-radius: var(--th-radius-lg);
  overflow: hidden;
  background: var(--th-snow);
  box-shadow: var(--th-shadow-floating);
}
.th-reveal-product .th-reveal-price--in-card {
  margin-top: 0;
  border-radius: 0;
  box-shadow: none;
  gap: 36px;
  padding: 36px 32px 38px;
}
.th-reveal-price--in-card + .th-reveal-formula-membership {
  margin-top: 0;
  border-top: 0;
}

.th-reveal-price-main { min-width: 0; }
.th-reveal-price-eyebrow { color: rgba(255, 255, 255, 0.55); }
.th-reveal-price-title {
  margin: 14px 0 22px;
  font: 400 clamp(28px, 3.4vw, 40px)/1.15 var(--th-font-sans);
  letter-spacing: -0.022em;
  color: var(--th-snow);
}
.th-reveal-price-title em { color: var(--th-moss); }
.th-reveal .th-reveal-price-list { gap: 10px; }
.th-reveal .th-reveal-price-list li { font-size: 14.5px; color: rgba(255, 255, 255, 0.85); }
.th-reveal .th-reveal-price-list li svg { color: var(--th-moss); }
/* The per-cycle charge is the one thing people question here, so the answer
   sits under the list as an aside — the FAQ below carries the long version. */
.th-reveal-price-why {
  margin: 22px 0 0;
  padding-left: 15px;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
  font: 400 12.5px/1.6 var(--th-font-sans);
  color: rgba(255, 255, 255, 0.55);
  max-width: 52ch;
}

/* Buy box: figure, terms, button, and fine print in one framed stack so the
   price and the action read as a single object. */
.th-reveal-price-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 26px 24px 22px;
  border-radius: var(--th-radius-md);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
}
/* Amount and its unit sit on one baseline: monthly is the figure people
   budget against, the cycle charge is the qualifier under it. */
.th-reveal-price-figure {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  margin: 0;
  font: 400 clamp(40px, 5vw, 54px)/1 var(--th-font-sans);
  letter-spacing: -0.035em;
  color: var(--th-snow);
}
.th-reveal-price-figure span {
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.55);
}
.th-reveal-price-sub {
  margin: 9px 0 0;
  font: 400 13.5px/1.5 var(--th-font-sans);
  color: rgba(255, 255, 255, 0.66);
}
.th-reveal-price-cta {
  width: 100%;
  min-width: 0;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.th-reveal .th-reveal-price-cta .th-reveal-cta { max-width: none; width: 100%; }
.th-reveal-price-cta .th-reveal-cta-note { max-width: none; font-size: 12.5px; }
.th-reveal-price-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 18px 0 0;
}
.th-reveal-price-badges span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 500 11.5px/1 var(--th-font-sans);
  color: rgba(255, 255, 255, 0.6);
}
.th-reveal-price-badges svg { color: var(--th-moss); }

/* 6 · What happens next --------------------------------------------- */
.th-reveal-next {
  padding: 32px;
  border-radius: var(--th-radius-lg);
  background: var(--th-snow);
  border: 1px solid var(--th-border-1);
}
.th-reveal-next-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: 30px;
}
.th-reveal-next-head .th-reveal-includes-head { margin-bottom: 0; }
.th-reveal-next-eta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 9px 15px;
  border-radius: var(--th-radius-pill);
  background: var(--th-bone);
  border: 1px solid var(--th-border-1);
  font: 500 12.5px/1.3 var(--th-font-sans);
  color: var(--th-fg-2);
  text-wrap: pretty;
}
.th-reveal-next-eta svg { flex: none; color: var(--th-midnight); opacity: 0.6; }

/* Steps sit on one continuous rail: the connector runs from each node to the
   next column's node, so the columns read as a sequence instead of three
   separate cards. Text is inset rather than the list item, which would break
   the line at the gap. */
.th-reveal-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 0;
}
.th-reveal-step {
  position: relative;
  animation: th-fade-up 0.5s var(--th-ease-out) both;
}
.th-reveal-step:nth-child(1) { animation-delay: 0.05s; }
.th-reveal-step:nth-child(2) { animation-delay: 0.14s; }
.th-reveal-step:nth-child(3) { animation-delay: 0.23s; }

.th-reveal-step-rail {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}
.th-reveal-step-rail::after {
  content: "";
  flex: 1;
  height: 1px;
  margin-left: 12px;
  background: var(--th-border-1);
}
/* Delivery isn't the end of the membership, so the last tail trails off. */
.th-reveal-step:last-child .th-reveal-step-rail::after {
  margin-right: 4px;
  background: repeating-linear-gradient(90deg, var(--th-border-2) 0 3px, transparent 3px 8px);
  -webkit-mask-image: linear-gradient(90deg, #000, transparent);
  mask-image: linear-gradient(90deg, #000, transparent);
}
.th-reveal-step-node {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--th-midnight);
  color: var(--th-moss);
  transition: transform var(--th-t-base) var(--th-ease-out);
}
/* Same WebKit/Blink paint hole as the formula-table check: an SVG that is a
   grid/flex item inside a fixed circle often renders as an empty disc.
   Explicit size + overflow keeps the stroke visible. */
.th-reveal-step-node svg {
  display: block;
  flex-shrink: 0;
  overflow: visible;
  width: 18px;
  height: 18px;
}
.th-reveal-step:hover .th-reveal-step-node { transform: scale(1.07); }

.th-reveal-step-when {
  display: block;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--th-fg-3);
}
.th-reveal-steps h4 {
  font: 500 16.5px/1.3 var(--th-font-sans);
  letter-spacing: -0.01em;
  color: var(--th-midnight);
  margin: 8px 0 7px;
  padding-right: 28px;
}
.th-reveal-steps p {
  font: 400 13.5px/1.6 var(--th-font-sans);
  color: var(--th-fg-2);
  margin: 0;
  padding-right: 28px;
  text-wrap: pretty;
}

.th-reveal-next-after {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 28px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--th-border-1);
  font: 400 13.5px/1.5 var(--th-font-sans);
  color: var(--th-fg-3);
}
.th-reveal-next-after svg { flex: none; color: var(--th-midnight); opacity: 0.5; }

/* Three columns get too narrow to hold a sentence before the phone breakpoint,
   so the rail turns on its side and runs down the left instead. */
@media (max-width: 780px) {
  .th-reveal-steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .th-reveal-step {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 16px;
    padding-bottom: 24px;
  }
  .th-reveal-step:last-child { padding-bottom: 0; }
  .th-reveal-step-rail {
    grid-row: 1 / span 3;
    flex-direction: column;
    align-items: center;
    height: 100%;
    margin-bottom: 0;
  }
  .th-reveal-step-rail::after {
    width: 1px;
    height: auto;
    margin: 10px 0 0;
  }
  .th-reveal-step:last-child .th-reveal-step-rail::after {
    margin: 10px 0 0;
    background: repeating-linear-gradient(180deg, var(--th-border-2) 0 3px, transparent 3px 8px);
    -webkit-mask-image: linear-gradient(180deg, #000, transparent);
    mask-image: linear-gradient(180deg, #000, transparent);
  }
  .th-reveal-step-when { padding-top: 4px; }
  .th-reveal-steps h4 { margin-top: 6px; padding-right: 0; }
  .th-reveal-steps p { padding-right: 0; padding-bottom: 2px; }
}

/* 8 · Objections ---------------------------------------------------- */
.th-reveal-faq {
  padding: 32px;
  border-radius: var(--th-radius-lg);
  background: var(--th-snow);
  border: 1px solid var(--th-border-1);
}
.th-reveal-faq-item { border-top: 1px solid var(--th-border-1); }
.th-reveal-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 2px;
  cursor: pointer;
  list-style: none;
  font: 500 15.5px/1.4 var(--th-font-sans);
  color: var(--th-midnight);
}
.th-reveal-faq-item summary::-webkit-details-marker { display: none; }
.th-reveal-faq-item summary svg {
  flex-shrink: 0;
  color: var(--th-fg-3);
  transition: transform var(--th-t-base) var(--th-ease-out);
}
.th-reveal-faq-item[open] summary svg { transform: rotate(45deg); }
.th-reveal-faq-item p {
  margin: 0 0 20px;
  padding-right: 40px;
  font: 400 14px/1.65 var(--th-font-sans);
  color: var(--th-fg-2);
  max-width: 78ch;
}

/* 9 · Close --------------------------------------------------------- */
.th-reveal-close {
  text-align: center;
  padding: 52px 38px 46px;
  border-radius: var(--th-radius-lg);
  background:
    radial-gradient(ellipse 60% 80% at 50% 0%, rgba(203, 209, 183, 0.2), transparent 62%),
    var(--th-midnight);
  color: var(--th-snow);
}
.th-reveal-close-title {
  font: 400 clamp(27px, 3.8vw, 40px)/1.12 var(--th-font-sans);
  letter-spacing: -0.024em;
  color: var(--th-snow);
  margin: 0 auto 30px;
}
.th-reveal-close-title em { color: var(--th-moss); }
.th-reveal-close-sub {
  font: 400 15px/1.6 var(--th-font-sans);
  color: rgba(255, 255, 255, 0.68);
  max-width: 44ch;
  margin: 0 auto 30px;
}
.th-reveal .th-reveal-close-btn {
  background: var(--th-snow);
  color: var(--th-midnight);
  max-width: 400px;
  margin: 0 auto;
}
.th-reveal .th-reveal-close-btn:hover { background: var(--th-cream); }
.th-reveal-close-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 26px;
  margin-top: 28px;
}
.th-reveal-close-badges span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 500 12.5px/1 var(--th-font-sans);
  color: rgba(255, 255, 255, 0.62);
}
.th-reveal-close-badges svg { color: var(--th-moss); }

/* Sticky buy bar. Fixed to the bottom once the in-page offer is off-screen. */
.th-reveal-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  display: none;
  justify-content: center;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--th-midnight);
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.28);
}
.th-reveal-sticky[hidden] { display: none !important; }
.th-reveal-sticky.is-visible { display: flex; }
.th-reveal-sticky .th-btn {
  width: 100%;
  max-width: 400px;
}
.th-lgs-screen.th-reveal.th-reveal--sticky-on.is-active {
  padding-bottom: calc(88px + env(safe-area-inset-bottom));
}

/* ------------------------------------------------------------------ */
/* Formula v2 — shorter reveal at /labs-get-started/formula-2.
   Compact hero, precision beat, mix, editorial overview, offer, close. */
.th-reveal-v2 {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  width: 100%;
  max-width: 100%;
}
.th-reveal-v2,
.th-reveal-v2 * {
  box-sizing: border-box;
}
.th-reveal-v2 > *:not(.th-reveal-sticky):not(.th-reveal-v2-close) {
  min-width: 0;
  width: 100%;
  max-width: 100%;
}
.th-reveal-v2-stack {
  display: flex;
  flex-direction: column;
  gap: inherit;
  min-width: 0;
  width: 100%;
  max-width: 100%;
}
.th-reveal-v2-stack > * {
  min-width: 0;
  max-width: 100%;
}

/* Light-surface CTAs must not inherit the white-on-dark `.th-reveal-cta`. */
.th-reveal-v2-plan .th-btn-primary,
.th-reveal-v2-close .th-btn-primary,
.th-reveal-v2-talk.th-btn-primary {
  background: var(--th-midnight);
  color: var(--th-snow);
}
.th-reveal-v2-plan .th-btn-primary:hover,
.th-reveal-v2-close .th-btn-primary:hover,
.th-reveal-v2-talk.th-btn-primary:hover {
  background: #22383a;
  color: var(--th-snow);
}

/* v2 hero — "the read". A dark dossier panel: status rail, the reveal line,
   the marker distribution the formula came out of, the flagged → mix → dose
   chain on a timeline, and a ticker of the ingredient names the next section
   explains. The glow and grid sit on negative z-index inside the panel's own
   stacking context, so they wash the background without touching the copy. */
.th-reveal-v2-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  min-width: 0;
  padding: 22px 20px 0;
  border-radius: var(--th-radius-lg);
  background: var(--th-midnight);
  color: var(--th-snow);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), var(--th-shadow-floating);
  animation: th-fade-up 0.6s var(--th-ease-out) both;
}
.th-reveal-v2-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 68px 68px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 70%);
  mask-image: linear-gradient(to bottom, #000, transparent 70%);
  pointer-events: none;
}
.th-reveal-v2-hero-glow {
  position: absolute;
  z-index: -1;
  inset: -45% -20% auto -30%;
  height: 460px;
  background:
    radial-gradient(58% 58% at 24% 34%, rgba(203, 209, 183, 0.24), transparent 70%),
    radial-gradient(44% 44% at 80% 2%, rgba(180, 187, 214, 0.16), transparent 72%);
  pointer-events: none;
}

.th-reveal-v2-hero-rail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  width: 100%;
}
.th-reveal-v2-hero-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 500 10.5px/1 var(--th-font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--th-moss);
}
.th-reveal-v2-hero-pulse {
  width: 7px;
  height: 7px;
  border-radius: var(--th-radius-pill);
  background: var(--th-moss);
  animation: th-v2-hero-pulse 2.6s var(--th-ease-out) infinite;
}
.th-reveal-v2-hero-vitals {
  margin-left: auto;
  font: 400 10.5px/1.4 var(--th-font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}

.th-reveal-v2-hero-copy {
  width: 100%;
  min-width: 0;
}
.th-reveal-v2-hero-title {
  width: 100%;
  max-width: 100%;
  margin: 20px 0 0;
  font: 400 clamp(30px, 8.4vw, 40px)/1.06 var(--th-font-sans);
  letter-spacing: -0.035em;
  color: var(--th-snow);
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.th-reveal-v2-hero-title em { color: var(--th-moss); }
/* Phone: the name gets its own line and the sentence under it starts as a
   sentence. Wider viewports read it as one line, so the lowercase "this"
   in the markup is what ships there. */
@media (max-width: 719px) {
  .th-reveal-v2-hero-title-name,
  .th-reveal-v2-hero-title-rest { display: block; }
  .th-reveal-v2-hero-title-rest::first-letter { text-transform: uppercase; }
}
.th-reveal-v2-hero-lead {
  max-width: 44ch;
  margin: 12px 0 0;
  font: 400 15px/1.55 var(--th-font-sans);
  color: rgba(255, 255, 255, 0.66);
  text-wrap: pretty;
}

.th-reveal-v2-hero-read {
  width: 100%;
  margin-top: 26px;
  padding: 14px 15px 15px;
  border-radius: var(--th-radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.05);
}
.th-reveal-v2-hero-read-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
}
.th-reveal-v2-hero-read-label {
  font: 500 10.5px/1.2 var(--th-font-sans);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.th-reveal-v2-hero-read-total {
  font: 400 10.5px/1.2 var(--th-font-mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.th-reveal-v2-hero-read-total span {
  font-size: 14px;
  color: var(--th-snow);
  font-variant-numeric: tabular-nums;
}
.th-reveal-v2-hero-bar {
  display: flex;
  gap: 3px;
  height: 10px;
  margin-top: 12px;
}
.th-reveal-v2-hero-seg {
  min-width: 4px;
  border-radius: 3px;
  transform-origin: left center;
  animation: th-v2-hero-seg 0.8s var(--th-ease-out) both;
}
.th-reveal-v2-hero-seg:nth-child(1) { animation-delay: 0.2s; }
.th-reveal-v2-hero-seg:nth-child(2) { animation-delay: 0.32s; }
.th-reveal-v2-hero-seg:nth-child(3) { animation-delay: 0.44s; }
.th-reveal-v2-hero-seg.is-optimal {
  background: linear-gradient(90deg, rgba(203, 209, 183, 0.55), var(--th-moss));
}
.th-reveal-v2-hero-seg.is-warn { background: #E3C878; }
.th-reveal-v2-hero-seg.is-bad { background: #D98A7B; }
.th-reveal-v2-hero-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.th-reveal-v2-hero-legend li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 400 12px/1.2 var(--th-font-sans);
  color: rgba(255, 255, 255, 0.55);
}
.th-reveal-v2-hero-legend strong {
  font-weight: 500;
  color: var(--th-snow);
  font-variant-numeric: tabular-nums;
}
.th-reveal-v2-hero-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--th-radius-pill);
}
.th-reveal-v2-hero-dot.is-optimal { background: var(--th-moss); }
.th-reveal-v2-hero-dot.is-warn { background: #E3C878; }
.th-reveal-v2-hero-dot.is-bad { background: #D98A7B; }

/* Flagged markers → ingredients → daily dose, read as one line of travel:
   a hairline track per step with the node sitting on it. */
.th-reveal-v2-hero-chain {
  display: grid;
  /* Auto columns, not a fixed three: the marker step drops out when we have
     no stats on file and the remaining steps should still span the panel. */
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0 10px;
  width: 100%;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.th-reveal-v2-hero-chain li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 18px 8px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.th-reveal-v2-hero-chain li:first-child { border-top-color: rgba(203, 209, 183, 0.6); }
.th-reveal-v2-hero-chain li::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: var(--th-radius-pill);
  background: rgba(203, 209, 183, 0.4);
}
.th-reveal-v2-hero-chain li:first-child::before { background: var(--th-moss); }
.th-reveal-v2-hero-chain-figure {
  font: 400 26px/1 var(--th-font-sans);
  letter-spacing: -0.04em;
  color: var(--th-snow);
  font-variant-numeric: tabular-nums;
}
.th-reveal-v2-hero-chain-label {
  font: 500 9.5px/1.3 var(--th-font-sans);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

/* Ticker of their own ingredient names, as a tease for the mix below. The
   track holds the name set twice and travels exactly one set, so it loops
   without a seam. Duration is set per formula from the rendered width. */
.th-reveal-v2-hero-foot {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-self: stretch;
  margin: 26px -20px 0;
  padding: 13px 20px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.22);
}
.th-reveal-v2-hero-manifest {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.th-reveal-v2-hero-manifest-label {
  flex: none;
  font: 500 9.5px/1.2 var(--th-font-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}
.th-reveal-v2-hero-marquee {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30px, #000 calc(100% - 46px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 30px, #000 calc(100% - 46px), transparent);
}
.th-reveal-v2-hero-marquee-track {
  display: flex;
  width: max-content;
  animation: th-v2-hero-marquee var(--th-marquee-duration, 48s) linear infinite;
}
.th-reveal-v2-hero-names {
  display: flex;
  flex-wrap: wrap;
  min-width: 0;
}
.th-reveal-v2-hero-names .th-reveal-v2-hero-marquee-item:last-child::after { content: none; }
.th-reveal-v2-hero-marquee-item {
  display: inline-flex;
  align-items: center;
  font: 400 11.5px/1 var(--th-font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
}
.th-reveal-v2-hero-marquee-item::after {
  content: "·";
  margin: 0 13px;
  color: rgba(203, 209, 183, 0.5);
}
.th-reveal-v2-hero-jump {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 7px;
  font: 500 12.5px/1 var(--th-font-sans);
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  transition: color var(--th-t-fast) var(--th-ease-out);
}
.th-reveal-v2-hero-jump:hover { color: var(--th-snow); }
.th-reveal-v2-hero-jump svg {
  color: var(--th-moss);
  animation: th-v2-hero-nudge 2.8s var(--th-ease-out) infinite;
}

@keyframes th-v2-hero-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(203, 209, 183, 0.5); }
  70% { opacity: 0.8; box-shadow: 0 0 0 7px rgba(203, 209, 183, 0); }
}
@keyframes th-v2-hero-seg {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes th-v2-hero-marquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}
@keyframes th-v2-hero-nudge {
  0%, 70%, 100% { transform: translateY(0); }
  80% { transform: translateY(3px); }
}
@media (prefers-reduced-motion: reduce) {
  .th-reveal-v2-hero,
  .th-reveal-v2-hero-pulse,
  .th-reveal-v2-hero-seg,
  .th-reveal-v2-hero-marquee-track,
  .th-reveal-v2-hero-jump svg { animation: none; }
}

.th-reveal-v2-precision {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  /* Matches the capsule photo’s studio fill so the pour sits flush. */
  background: #fefefe;
}
.th-reveal-v2-precision-copy {
  padding: 28px 24px 8px 18px;
  text-align: center;
}
.th-reveal-v2-precision-title {
  width: 100%;
  margin: 0 auto 10px;
  font: 400 28px/1.15 var(--th-font-sans);
  letter-spacing: -0.035em;
  color: var(--th-midnight);
}
.th-reveal-v2-precision-title [data-fit-line-target="line"] {
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
}
.th-reveal-v2-precision-title em { color: var(--th-midnight); }
.th-reveal-v2-precision-lead {
  margin: 0 auto;
  max-width: min(34rem, 100%);
  font: 400 14.5px/1.5 var(--th-font-sans);
  color: var(--th-fg-2);
  overflow-wrap: anywhere;
  text-wrap: pretty;
}
.th-reveal-v2-precision-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
  padding: 8px 16px 8px;
  overflow: hidden;
  background: transparent;
}
.th-reveal-v2-precision-img {
  display: block;
  width: 100%;
  max-width: 560px;
  min-width: 0;
  height: auto;
  max-height: 280px;
  object-fit: contain;
}

.th-reveal-v2-card {
  padding: 26px 22px 28px;
}
.th-reveal-v2-card > .th-eyebrow {
  color: var(--th-midnight);
}
.th-reveal-v2-card.th-reveal-v2-note-card {
  padding: 25px 22px 26px;
  border: 1px solid rgba(22, 42, 44, 0.15);
  border-radius: 22px;
  background: #f9f1d8;
  box-shadow: none;
}
.th-reveal-v2-note-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}
.th-reveal-v2-note-head .th-eyebrow {
  color: var(--th-midnight);
}
.th-reveal-v2-note-card .th-reveal-v2-rule {
  width: 100%;
  max-width: none;
  margin: 13px 0 19px;
}
.th-reveal-v2-note-card .th-reveal-v2-overview {
  font-size: 17px;
  line-height: 1.5;
}
.th-reveal-v2-rule {
  margin: 14px 0 20px;
  max-width: 160px;
  opacity: 0.18;
}
.th-reveal-v2-overview {
  margin: 0 0 24px;
  max-width: 100%;
  font: 400 16px/1.55 var(--th-font-sans);
  color: var(--th-charcoal);
  overflow-wrap: break-word;
  text-wrap: pretty;
}
.th-reveal-v2-overview.is-pending {
  display: grid;
  gap: 10px;
}
.th-reveal-v2-overview-status {
  font: 500 13px/1.4 var(--th-font-sans);
  color: var(--th-fg-3);
}
.th-reveal-v2-overview.is-pending .th-skeleton-line {
  height: 14px;
}
.th-reveal-v2 .th-reveal-v2-talk {
  width: auto;
  max-width: 100%;
  height: auto;
  min-height: 50px;
  padding: 12px 22px;
  white-space: normal;
  text-align: center;
  line-height: 1.25;
}

.th-reveal-v2-mix-list {
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
  padding: 4px 20px 16px 14px;
}
.th-reveal-v2-mix-hint {
  margin: 0 0 8px;
  padding: 0 8px 0 0;
  font: 400 13px/1.4 var(--th-font-sans);
  color: var(--th-fg-3);
  text-wrap: pretty;
}
.th-reveal-v2-ing {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 10px 8px 10px 0;
  border: 0;
  border-bottom: 1px solid var(--th-border-1);
  border-radius: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: background var(--th-t-base) var(--th-ease-out);
}
.th-reveal-v2-ing:last-child { border-bottom: 0; }
.th-reveal-v2-ing:active {
  background: var(--th-bone);
}
.th-reveal-v2 .th-reveal-ing-num { display: block; }
.th-reveal-v2-ing .th-reveal-ing-name {
  min-width: 0;
  overflow-wrap: anywhere;
}
.th-reveal-v2-info {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  padding: 5px 6px 5px 10px;
  border: 1px solid var(--th-border-1);
  border-radius: var(--th-radius-pill);
  background: transparent;
  font: 500 12px/1 var(--th-font-sans);
  letter-spacing: 0.02em;
  color: var(--th-midnight);
  pointer-events: none;
  white-space: nowrap;
}
.th-reveal-v2-ing:active .th-reveal-v2-info {
  border-color: var(--th-midnight);
  background: var(--th-midnight);
  color: var(--th-snow);
}
@media (hover: hover) {
  .th-reveal-v2-ing:hover { background: var(--th-bone); }
  .th-reveal-v2-ing:hover .th-reveal-v2-info {
    border-color: var(--th-midnight);
    background: var(--th-midnight);
    color: var(--th-snow);
  }
}
.th-reveal-v2-ing:focus-visible {
  outline: 2px solid var(--th-midnight);
  outline-offset: 2px;
}
.th-reveal-v2-info svg {
  display: block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Offer card. Midnight band makes the free month unmissable; gallery +
   buy box follow Shopify PDP order, CTA sits on the price not the includes. */
.th-reveal-v2-plan {
  padding-top: 0;
  box-sizing: border-box;
}
.th-reveal-v2-plan *,
.th-reveal-v2-plan *::before,
.th-reveal-v2-plan *::after {
  box-sizing: border-box;
}
.th-reveal-v2-plan-box {
  position: relative;
  width: 100%;
  max-width: 680px;
  min-width: 0;
  margin-inline: auto;
  padding: 0;
  overflow: hidden;
  background: var(--th-snow);
  border: 2px solid var(--th-midnight);
  border-radius: 30px;
}
.th-reveal-v2-plan-offer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 16px 16px;
  text-align: center;
  background: var(--th-midnight);
  color: var(--th-snow);
}
.th-reveal-v2-plan-offer-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 6px 11px;
  border-radius: var(--th-radius-pill);
  background: var(--th-moss);
  font: 500 11px/1 var(--th-font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--th-midnight);
}
.th-reveal-v2-plan-offer-kicker svg { display: block; }
.th-reveal-v2-plan-offer-title {
  margin: 2px 0 0;
  font: 400 clamp(22px, 6.2vw, 30px)/1.12 var(--th-font-sans);
  letter-spacing: -0.03em;
  color: var(--th-snow);
  text-wrap: pretty;
}
.th-reveal-v2-plan-offer-title em {
  color: var(--th-moss);
}
.th-reveal-v2-plan-offer-sub {
  margin: 0;
  max-width: 34ch;
  font: 400 13px/1.4 var(--th-font-sans);
  color: rgba(255, 255, 255, 0.72);
  text-wrap: pretty;
}
.th-reveal-v2-plan-pdp {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  width: 100%;
  padding: 16px 16px 22px;
}
.th-reveal-v2-plan-gallery {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.th-reveal-v2-plan-stage {
  overflow: hidden;
  border-radius: 16px;
  background: var(--th-bone);
}
.th-reveal-v2-plan-stage-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center 42%;
}
.th-reveal-v2-plan-thumbs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.th-reveal-v2-plan-thumb {
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 10px;
  background: var(--th-bone);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.th-reveal-v2-plan-thumb img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}
.th-reveal-v2-plan-thumb:hover {
  border-color: var(--th-stone);
}
.th-reveal-v2-plan-thumb.is-active,
.th-reveal-v2-plan-thumb.is-active:hover {
  border-color: var(--th-midnight);
}
.th-reveal-v2-plan-thumb:focus-visible {
  outline: 2px solid var(--th-midnight);
  outline-offset: 2px;
}
.th-reveal-v2-plan-buy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
}
.th-reveal-v2-plan-title {
  margin: 0;
  min-width: 0;
  font: 400 17px/1.2 var(--th-font-sans);
  letter-spacing: -0.02em;
  color: var(--th-midnight);
  overflow-wrap: break-word;
}
.th-reveal-v2-plan-lead {
  margin: 6px 0 0;
  font: 400 13.5px/1.4 var(--th-font-sans);
  color: var(--th-fg-2);
  text-wrap: pretty;
}
.th-reveal-v2-plan-deal {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin: 14px 0 14px;
  padding: 14px 14px 12px;
  border-radius: 16px;
  background: var(--th-cream);
}
.th-reveal-v2-plan-now {
  margin: 0;
  font: 500 clamp(32px, 8.5vw, 40px)/1 var(--th-font-sans);
  letter-spacing: -0.04em;
  color: var(--th-midnight);
}
.th-reveal-v2-plan-now-unit {
  margin-left: 8px;
  font: 400 15px/1.15 var(--th-font-sans);
  letter-spacing: 0;
  color: var(--th-fg-3);
  white-space: nowrap;
}
.th-reveal-v2-plan-compare {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}
.th-reveal-v2-plan .th-reveal-price-was {
  font: 400 15px/1 var(--th-font-sans);
  color: var(--th-stone);
  text-decoration: line-through;
}
.th-reveal-v2-plan-save {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: var(--th-radius-pill);
  background: var(--th-moss);
  font: 500 12px/1 var(--th-font-sans);
  letter-spacing: 0.02em;
  color: var(--th-midnight);
  white-space: nowrap;
}
.th-reveal-v2-plan-then {
  margin: 2px 0 0;
  font: 400 13px/1.4 var(--th-font-sans);
  color: var(--th-fg-2);
  text-align: left;
  text-wrap: pretty;
}
.th-lgs .th-reveal-v2-plan .th-lgs-cta {
  width: 100%;
  max-width: none;
  height: auto;
  min-height: 58px;
  margin-top: 0;
  padding-block: 14px;
  white-space: normal;
  line-height: 1.2;
}
.th-reveal-v2-plan-note {
  margin: 10px 0 0;
  text-align: center;
  font: 400 13px/1.5 var(--th-font-sans);
  color: var(--th-stone);
}
.th-reveal-v2-plan-includes-label {
  margin: 18px 0 4px;
  font: 500 11px/1 var(--th-font-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--th-midnight);
}
.th-reveal-v2-plan-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--th-border-1);
}
.th-reveal-v2-plan-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 10px 0;
  border-bottom: 1px solid var(--th-border-1);
}
.th-reveal-v2-plan-item:last-child { padding-bottom: 10px; }
.th-reveal-v2-plan-check {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  color: var(--th-midnight);
}
.th-reveal-v2-plan-check svg { display: block; }
.th-reveal-v2-plan-item-copy {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
}
.th-reveal-v2-plan-item h4 {
  margin: 0;
  flex: 1 1 0%;
  min-width: 0;
  font: 400 14.5px/1.3 var(--th-font-sans);
  color: var(--th-midnight);
  overflow-wrap: break-word;
}
.th-reveal-v2-plan-price {
  font: 400 13px/1 var(--th-font-sans);
  color: var(--th-midnight);
  text-align: right;
  white-space: nowrap;
}
.th-reveal-v2-plan-price--free {
  flex: 0 0 auto;
  padding-top: 3px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--th-good-fg);
  white-space: nowrap;
}
/* Reassurance at the moment of decision, in place of one line of fine print. */
.th-reveal-v2-plan-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.th-reveal-v2-plan-trust li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 400 13px/1.3 var(--th-font-sans);
  color: var(--th-fg-2);
}
.th-reveal-v2-plan-trust svg {
  color: var(--th-good-fg);
  flex-shrink: 0;
}
@media (max-width: 719px) {
  .th-reveal-v2-plan-pdp { padding: 16px 20px 26px; }
  /* The list is nouns without these, so they shrink on a phone rather than
     disappearing. */
  .th-reveal-v2-plan-price--free { font-size: 11px; }
  .th-reveal-v2-plan-trust { gap: 7px 14px; }
  .th-reveal-v2-plan-trust li { font-size: 12.5px; }
}

.th-reveal-v2-savings-card { padding: 0; }
.th-reveal-v2-card.th-reveal-v2-savings-card { padding: 0; }
.th-reveal-v2-savings-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  margin: 0;
  padding: 22px 22px 24px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.th-reveal-v2-savings-trigger:hover { background: var(--th-bone); }
.th-reveal-v2-savings-trigger:focus-visible {
  outline: 2px solid var(--th-midnight);
  outline-offset: -2px;
}
.th-reveal-v2-savings-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
.th-reveal-v2-savings-kicker {
  display: block;
  margin-bottom: 8px;
  font: 500 12px/1 var(--th-font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--th-midnight);
}
.th-reveal-v2-savings-amount {
  display: block;
  font: 500 clamp(22px, 5vw, 28px)/1.15 var(--th-font-sans);
  letter-spacing: -0.03em;
  color: var(--th-good-fg);
}
.th-reveal-v2-savings-amount--plain { color: var(--th-midnight); }
.th-reveal-v2-savings-sub {
  display: block;
  margin-top: 6px;
  font: 400 13.5px/1.45 var(--th-font-sans);
  color: var(--th-fg-2);
}
.th-reveal-v2-savings-open {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  font: 500 13px/1 var(--th-font-sans);
  color: var(--th-midnight);
  white-space: nowrap;
}
.th-reveal-v2-savings-open svg { display: block; }
.th-reveal-v2-savings-list {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}
.th-reveal-v2-savings-row {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--th-border-1);
}
.th-reveal-v2-savings-row:first-child { padding-top: 0; }
.th-reveal-v2-savings-name {
  font: 400 14.5px/1.35 var(--th-font-sans);
  color: var(--th-midnight);
}
.th-reveal-v2-savings-price {
  font: 500 14.5px/1.35 var(--th-font-sans);
  color: var(--th-midnight);
  white-space: nowrap;
}
.th-reveal-v2-savings-totals {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 0 4px;
}
.th-reveal-v2-savings-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  font: 400 14.5px/1.35 var(--th-font-sans);
  color: var(--th-fg-2);
}
.th-reveal-v2-savings-total span:first-child {
  min-width: 0;
  text-wrap: pretty;
}
.th-reveal-v2-savings-total strong {
  font: 500 16px/1 var(--th-font-sans);
  color: var(--th-midnight);
}
.th-reveal-v2-savings-total--save {
  color: var(--th-good-fg);
}
.th-reveal-v2-savings-total--save strong {
  font-size: 18px;
  color: var(--th-good-fg);
}
.th-reveal-v2-savings-totals-note {
  margin: 2px 0 0;
  font: 400 12px/1.45 var(--th-font-sans);
  color: var(--th-fg-3);
}
.th-reveal-v2-savings .th-reveal-ask {
  margin-top: 18px;
  padding-top: 16px;
}

/* Full-bleed close: photo is the scene. Oat fades the studio sky at the
   top (Figma 4040:734). The beige floor is the surface the trust footer
   sits on — no cream wash over the products or the table. */
.th-reveal-v2 > .th-reveal-close.th-reveal-v2-close {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100vw;
  max-width: 100vw;
  min-width: 0;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-bottom: 0;
  padding: 0;
  overflow: visible;
  background: transparent;
  color: var(--th-midnight);
  box-shadow: none;
  border-radius: 0;
}
.th-reveal-v2-close-copy {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  max-width: 100%;
  padding: 28px 24px 0;
  background: transparent;
}
.th-reveal-v2-close .th-reveal-close-title {
  color: var(--th-midnight);
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 20em;
  margin: 0 auto 22px;
  padding: 0 4px;
  font: 400 clamp(22px, 5.6vw, 40px)/1.2 var(--th-font-sans);
  letter-spacing: -0.03em;
  text-align: center;
  white-space: normal;
  overflow-wrap: break-word;
}
.th-reveal-v2-close .th-reveal-close-title em {
  color: var(--th-midnight);
  white-space: normal;
}
.th-reveal-v2-close-sub {
  display: none;
  box-sizing: border-box;
  width: 100%;
  max-width: 28em;
  margin: -8px auto 22px;
  padding: 0 4px;
  font: 400 18px/1.4 var(--th-font-sans);
  color: var(--th-midnight);
  text-align: center;
  text-wrap: pretty;
}
.th-reveal-v2-close .th-lgs-cta {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  align-self: center;
}
.th-reveal-v2-close-visual {
  position: relative;
  z-index: 0;
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0;
  aspect-ratio: 1058 / 878;
  overflow: hidden;
  background: var(--th-close-floor);
  line-height: 0;
}
.th-reveal-v2-close-img {
  position: absolute;
  left: 0;
  top: -19.36%;
  display: block;
  width: 100%;
  max-width: none;
  min-width: 0;
  height: 127.31%;
  object-fit: cover;
  object-position: center top;
}
/* Top-only oat fade, matching Figma: solid cream through ~38%, then
   dissolve into the photo. No bottom wash — that was painting cream
   over the beige floor and fighting the footer. */
.th-reveal-v2-close-wash {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  height: min(48%, 420px);
  background: linear-gradient(
    to bottom,
    var(--th-cream) 0%,
    var(--th-cream) 38.475%,
    rgba(243, 238, 231, 0) 100%
  );
  pointer-events: none;
}

/* Photo floor continues under the trust footer so the scene and the
   legal block are one surface, as in the Figma mobile frame.
   Scoped to the active reveal: formula HTML stays in the DOM on every
   other funnel screen, and an unscoped :has(.th-reveal-v2) would zero
   page padding and paint this beige floor under Upload / Details / etc. */
.th-lgs:has(.th-reveal.is-active .th-reveal-v2) {
  --th-close-floor: #f2e4d8;
  --th-v2-col: 720px;
}
.th-lgs:has(.th-reveal.is-active .th-reveal-v2) .th-lgs-page {
  padding-bottom: 0;
}
.th-lgs:has(.th-reveal.is-active .th-reveal-v2) .th-lgs-screen.th-reveal.is-active {
  padding-bottom: 0;
}
.th-lgs:has(.th-reveal.is-active .th-reveal-v2) .th-lgs-trust-footer {
  width: 100%;
  max-width: none;
  margin: 0;
  padding-top: 16px;
  background: var(--th-close-floor);
  padding-left: max(32px, calc((100% - var(--th-v2-col)) / 2 + 32px));
  padding-right: max(32px, calc((100% - var(--th-v2-col)) / 2 + 32px));
}
/* Same beige floor as the close and trust footer — otherwise this
   line sits on cream and breaks the surface. Negative top margin
   eats the reveal column gap so the photo floor meets the hint. */
.th-lgs:has(.th-reveal.is-active .th-reveal-v2) .th-lgs-edit-hint {
  box-sizing: border-box;
  width: 100vw;
  max-width: 100vw;
  margin-top: -22px;
  margin-bottom: 0;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 24px 24px 8px;
  background: var(--th-close-floor);
}

/* On a phone the cropped photo is too short to park the CTA on the sky,
   so the headline and button sit in the oat above the scene. */
@media (max-width: 719px) {
  .th-reveal-v2-close-copy {
    position: relative;
    padding: 28px 20px 0;
    background: transparent;
  }
  .th-reveal-v2-close-visual { margin-top: -12px; }
  .th-reveal-v2-close-wash {
    height: min(28%, 160px);
  }
  .th-reveal-v2-close .th-reveal-close-title {
    font-size: clamp(26px, 7vw, 34px);
  }
}

@media (min-width: 720px) {
  .th-lgs:has(.th-reveal.is-active .th-reveal-v2) { --th-v2-col: 720px; }
  .th-reveal-v2 { gap: 24px; }
  .th-reveal-v2-hero { padding: 34px 44px 0; }
  .th-reveal-v2-hero-status,
  .th-reveal-v2-hero-vitals { font-size: 11px; }
  .th-reveal-v2-hero-title {
    margin-top: 26px;
    font-size: clamp(34px, 4vw, 46px);
  }
  .th-reveal-v2-hero-lead { font-size: 16.5px; max-width: 48ch; }
  .th-reveal-v2-hero-read { margin-top: 30px; padding: 16px 18px 18px; }
  .th-reveal-v2-hero-bar { height: 12px; }
  .th-reveal-v2-hero-legend { font-size: 12.5px; gap: 8px 22px; }
  .th-reveal-v2-hero-chain { margin-top: 28px; gap: 0 18px; }
  .th-reveal-v2-hero-chain li { padding-top: 20px; }
  .th-reveal-v2-hero-chain-figure { font-size: 32px; }
  .th-reveal-v2-hero-chain-label { font-size: 10.5px; }
  .th-reveal-v2-hero-foot {
    flex-direction: row;
    align-items: center;
    gap: 22px;
    margin: 30px -44px 0;
    padding: 15px 44px;
  }
  .th-reveal-v2-hero-manifest { flex: 1 1 auto; }
  .th-reveal-v2-hero-jump { flex: none; }
  .th-reveal-v2-precision-copy { padding: 36px 40px 12px 36px; }
  .th-reveal-v2-precision-visual { padding: 12px 28px 8px; }
  .th-reveal-v2-precision-img { max-height: 320px; }
  .th-reveal-v2-card { padding: 36px 40px 38px; }
  .th-reveal-v2-card.th-reveal-v2-note-card { padding: 32px 34px; }
  .th-reveal-v2-overview { font-size: 18px; }
  .th-reveal-v2-mix-list { padding: 4px 28px 22px 20px; }
  .th-reveal-v2-plan-box { max-width: none; }
  .th-reveal-v2-plan-offer { padding: 22px 28px 20px; gap: 10px; }
  .th-reveal-v2-plan-offer-kicker { font-size: 12px; padding: 7px 12px; }
  .th-reveal-v2-plan-offer-title { font-size: 32px; }
  .th-reveal-v2-plan-offer-sub { font-size: 14.5px; max-width: 40ch; }
  .th-reveal-v2-plan-pdp { gap: 24px; padding: 24px 28px 28px; }
  .th-reveal-v2-plan-stage { border-radius: 22px; }
  .th-reveal-v2-plan-stage-img { aspect-ratio: 16 / 11; }
  .th-reveal-v2-plan-thumbs { gap: 10px; }
  .th-reveal-v2-plan-title { font-size: 20px; }
  .th-reveal-v2-plan-lead { font-size: 14.5px; }
  .th-reveal-v2-plan-deal { padding: 16px 18px 14px; margin: 16px 0 16px; }
  .th-reveal-v2-plan-now { font-size: 44px; }
  .th-reveal-v2-plan-now-unit { font-size: 16px; }
  .th-reveal-v2-plan-then { font-size: 14px; }
  .th-reveal-v2-plan-item {
    gap: 12px;
    padding: 12px 0;
  }
  .th-reveal-v2-plan-check { width: 24px; height: 24px; flex-basis: 24px; }
  .th-reveal-v2-plan-item h4 { font-size: 16px; }
  .th-reveal-v2-plan-price--free { font-size: 14px; }
  .th-reveal-v2-plan-note { font-size: 14px; }
  .th-reveal-v2-savings-trigger { padding: 28px 40px 30px; }
  .th-reveal-v2-savings-amount { font-size: 32px; }
  .th-reveal-v2-savings-sub { font-size: 14.5px; }
  .th-reveal-v2 > .th-reveal-close.th-reveal-v2-close { padding: 0; }
  .th-reveal-v2-close-copy { padding: 56px 48px 0; }
  .th-reveal-v2-close-sub { display: block; }
  .th-reveal-v2-close .th-reveal-close-title {
    font-size: clamp(32px, 3.2vw, 44px);
    max-width: min(22em, 90vw);
    margin-bottom: 14px;
  }
  .th-reveal-v2-close .th-lgs-cta { max-width: 506px; }
  .th-reveal-v2-close-visual { margin-top: 0; border-radius: 0; }
}

/* Desktop: mix left, capsule right. Close is a capped scene, not a
   phone crop stretched across the viewport. */
@media (min-width: 920px) {
  .th-lgs:has(.th-reveal.is-active .th-reveal-v2) { --th-v2-col: 880px; }
  .th-reveal-v2 { gap: 28px; }
  /* The read moves beside the reveal line so the panel reads as one spread
     instead of a column with an empty right half. */
  .th-reveal-v2-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.8fr);
    grid-template-areas:
      "rail  rail"
      "copy  read"
      "chain chain"
      "foot  foot";
    align-items: start;
    column-gap: 44px;
    padding: 44px 52px 0;
  }
  /* No marker stats on file: nothing to sit in the right column, so the
     panel goes back to one column instead of stranding the headline. */
  .th-reveal-v2-hero.is-readless {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "rail"
      "copy"
      "chain"
      "foot";
  }
  .th-reveal-v2-hero-rail { grid-area: rail; }
  .th-reveal-v2-hero-copy { grid-area: copy; }
  .th-reveal-v2-hero-read {
    grid-area: read;
    align-self: end;
    margin-top: 26px;
  }
  .th-reveal-v2-hero-chain { grid-area: chain; }
  .th-reveal-v2-hero-foot { grid-area: foot; }
  .th-reveal-v2-hero-title { font-size: clamp(38px, 3.4vw, 50px); }
  .th-reveal-v2-hero-lead { max-width: 40ch; }
  .th-reveal-v2-hero-chain-figure { font-size: 36px; }
  .th-reveal-v2-hero-foot { margin: 32px -52px 0; padding: 16px 52px; }
  .th-reveal-v2-precision {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(240px, 0.78fr);
    grid-template-areas:
      "copy copy"
      "mix visual";
    align-items: stretch;
  }
  .th-reveal-v2-precision-copy {
    grid-area: copy;
    padding: 40px 48px 8px;
    text-align: left;
  }
  .th-reveal-v2-precision-title {
    margin: 0 0 12px;
    font-size: 36px;
  }
  .th-reveal-v2-precision-lead { margin: 0; max-width: 46rem; }
  .th-reveal-v2-precision-visual {
    --th-capsule-long: min(560px, 100%);
    grid-area: visual;
    align-self: center;
    justify-content: center;
    width: 100%;
    min-height: var(--th-capsule-long);
    padding: 16px 28px 36px 8px;
    overflow: visible;
  }
  .th-reveal-v2-precision-img {
    width: var(--th-capsule-long);
    max-width: var(--th-capsule-long);
    height: auto;
    max-height: none;
    transform: rotate(90deg);
    transform-origin: center center;
  }
  .th-reveal-v2-mix-list {
    grid-area: mix;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 12px 16px 40px 40px;
  }
  .th-reveal-v2-ing:nth-last-child(-n + 2) { border-bottom: 1px solid var(--th-border-1); }
  .th-reveal-v2-ing:last-child { border-bottom: 0; }
  .th-reveal-v2-card { padding: 40px 48px 44px; }
  .th-reveal-v2-savings-trigger { padding: 32px 48px 34px; }
  .th-reveal-v2-overview { font-size: 18px; }
  .th-reveal-v2-plan-offer { padding: 26px 36px 24px; }
  .th-reveal-v2-plan-offer-title { font-size: 36px; }
  .th-reveal-v2-plan-pdp {
    display: grid;
    grid-template-columns: minmax(260px, 0.92fr) minmax(300px, 1.08fr);
    gap: 8px 36px;
    align-items: start;
    padding: 28px 36px 32px;
  }
  .th-reveal-v2-plan-gallery {
    position: sticky;
    top: 24px;
  }
  .th-reveal-v2-plan-stage-img {
    /* Squared off, the gallery ran ~100px past the buy column and the panel
       ended in dead space. */
    aspect-ratio: 5 / 4;
    object-position: center 40%;
  }
  .th-reveal-v2-plan-title { font-size: 22px; }
  .th-reveal-v2-plan-item h4 { font-size: 17px; }
  .th-reveal-v2-plan-now { font-size: 48px; }
  .th-reveal-v2-close-copy { padding: 64px 56px 0; }
  .th-reveal-v2-close-sub { font-size: 20px; margin-bottom: 26px; }
  .th-reveal-v2-close .th-reveal-close-title {
    max-width: min(24em, 92vw);
    font-size: clamp(36px, 2.8vw, 48px);
    margin-bottom: 16px;
  }
  .th-reveal-v2-close-visual {
    aspect-ratio: 1058 / 878;
    height: auto;
    max-height: 1080px;
  }
  .th-reveal-v2-close-img {
    top: -19.36%;
    height: 127.31%;
    object-position: center top;
  }
  .th-reveal-v2-close-wash { height: min(42%, 480px); }
}

@media (min-width: 1180px) {
  .th-lgs:has(.th-reveal.is-active .th-reveal-v2) { --th-v2-col: 1120px; }
  .th-lgs:has(.th-reveal.is-active .th-reveal-v2) .th-lgs-screen.th-reveal.th-lgs-screen--wide {
    width: 1120px;
    margin-left: calc(50% - 560px);
  }
  .th-reveal-v2-precision-copy { padding: 48px 56px 12px; }
  .th-reveal-v2-precision-visual {
    --th-capsule-long: min(620px, 100%);
    padding: 20px 36px 48px 12px;
  }
  .th-reveal-v2-mix-list { padding: 16px 20px 48px 48px; }
  .th-reveal-v2-card { padding: 48px 56px 52px; }
  .th-reveal-v2-savings-trigger { padding: 36px 56px 38px; }
  .th-reveal-v2-plan-offer { padding: 28px 40px 26px; }
  .th-reveal-v2-plan-pdp { gap: 12px 48px; padding: 32px 40px 36px; }
}

@media (min-width: 1360px) {
  .th-lgs:has(.th-reveal.is-active .th-reveal-v2) { --th-v2-col: 1240px; }
  .th-lgs:has(.th-reveal.is-active .th-reveal-v2) .th-lgs-screen.th-reveal.th-lgs-screen--wide {
    width: 1240px;
    margin-left: calc(50% - 620px);
  }
}

/* ------------------------------------------------------------------ */
/* Formula v3 — conversion-first reveal at /labs-get-started/formula-3.
   The offer shares the first viewport with the personalized evidence.
   Deeper formula detail, proof, process, and objections follow. */
.th-reveal-v3 {
  --th-v3-ink: #102729;
  --th-v3-accent: #dce2c9;
  --th-v3-wash: #f8f6f1;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.th-reveal-v3-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 370px;
  grid-template-areas:
    "intro order"
    "evidence order";
  gap: 20px;
  align-items: start;
}

.th-reveal-v3-intro {
  grid-area: intro;
  position: relative;
  overflow: hidden;
  min-height: 430px;
  padding: clamp(34px, 5vw, 58px);
  border: 1px solid var(--th-border-1);
  border-radius: var(--th-radius-lg);
  background:
    radial-gradient(circle at 88% 8%, rgba(203, 209, 183, 0.7), transparent 31%),
    var(--th-snow);
  box-shadow: var(--th-shadow-card);
}
.th-reveal-v3-intro::after {
  content: "";
  position: absolute;
  right: -50px;
  bottom: -90px;
  width: 240px;
  height: 240px;
  border: 1px solid rgba(22, 42, 44, 0.09);
  border-radius: 50%;
  box-shadow:
    0 0 0 32px rgba(22, 42, 44, 0.025),
    0 0 0 64px rgba(22, 42, 44, 0.018);
  pointer-events: none;
}
.th-reveal-v3-ready {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font: 500 11px/1 var(--th-font-sans);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--th-v3-ink);
}
.th-reveal-v3-ready-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--th-v3-ink);
  color: var(--th-moss);
}
.th-reveal-v3-title {
  position: relative;
  z-index: 1;
  max-width: 12.5ch;
  margin: 34px 0 18px;
  font: 400 clamp(38px, 4.5vw, 60px)/0.98 var(--th-font-sans);
  letter-spacing: -0.045em;
  color: var(--th-v3-ink);
  text-wrap: balance;
}
.th-reveal-v3-title em { color: #526255; }
.th-reveal-v3-lead {
  position: relative;
  z-index: 1;
  max-width: 49ch;
  margin: 0;
  font: 400 16px/1.55 var(--th-font-sans);
  color: var(--th-fg-2);
  text-wrap: pretty;
}
.th-reveal-v3-snapshot {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 34px;
}
.th-reveal-v3-snapshot > div {
  min-width: 112px;
  padding: 12px 14px 11px;
  border: 1px solid var(--th-border-1);
  border-radius: var(--th-radius-sm);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(6px);
}
.th-reveal-v3-snapshot strong {
  display: block;
  margin-bottom: 3px;
  font: 500 21px/1 var(--th-font-sans);
  color: var(--th-v3-ink);
}
.th-reveal-v3-snapshot span {
  display: block;
  font: 500 9.5px/1.2 var(--th-font-sans);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--th-fg-3);
}
.th-reveal-v3-reassurance {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 17px 0 0;
  font: 400 12.5px/1.4 var(--th-font-sans);
  color: var(--th-fg-3);
}

.th-reveal-v3-order.th-reveal-price {
  grid-area: order;
  position: sticky;
  top: 18px;
  z-index: 3;
  display: block;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(22, 42, 44, 0.18);
  border-radius: var(--th-radius-lg);
  background: var(--th-snow);
  color: var(--th-v3-ink);
  box-shadow: 0 18px 50px rgba(22, 42, 44, 0.14);
}
.th-reveal-v3-product {
  position: relative;
  min-height: 210px;
  padding: 22px 18px 8px;
  background:
    linear-gradient(145deg, rgba(203, 209, 183, 0.9), rgba(243, 238, 231, 0.76));
}
.th-reveal-v3-product-img {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: contain;
  filter: drop-shadow(0 16px 18px rgba(22, 42, 44, 0.13));
}
.th-reveal-v3-nameplate {
  position: absolute;
  left: 18px;
  top: 16px;
  padding: 7px 11px;
  border: 1px solid rgba(22, 42, 44, 0.16);
  border-radius: var(--th-radius-pill);
  background: rgba(255, 255, 255, 0.84);
  font: 500 10px/1 var(--th-font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--th-v3-ink);
  backdrop-filter: blur(5px);
}
.th-reveal-v3-order-body { padding: 24px 24px 20px; }
.th-reveal-v3-order-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.th-reveal-v3-order-heading .th-eyebrow {
  display: block;
  margin-bottom: 8px;
  font-size: 10px;
  color: var(--th-fg-3);
}
.th-reveal-v3-order-heading h3 {
  margin: 0;
  font: 500 18px/1.2 var(--th-font-sans);
  color: var(--th-v3-ink);
}
.th-reveal-v3-included {
  flex-shrink: 0;
  padding: 6px 8px;
  border-radius: var(--th-radius-pill);
  background: var(--th-good);
  font: 500 9px/1 var(--th-font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #2f5d4c;
}
.th-reveal-v3-price-row {
  display: flex;
  align-items: flex-end;
  gap: 9px;
  margin-top: 22px;
}
.th-reveal-v3-price {
  font: 500 42px/0.9 var(--th-font-sans);
  letter-spacing: -0.05em;
  color: var(--th-v3-ink);
}
.th-reveal-v3-price-unit {
  font: 400 10px/1.2 var(--th-font-sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--th-fg-3);
}
.th-reveal-v3-billing {
  margin: 8px 0 20px;
  font: 400 12.5px/1.3 var(--th-font-sans);
  color: var(--th-fg-2);
}
.th-reveal-v3-value-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0 0 20px;
  padding: 18px 0 0;
  border-top: 1px solid var(--th-border-1);
  list-style: none;
}
.th-reveal-v3-value-list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font: 400 12.5px/1.4 var(--th-font-sans);
  color: var(--th-fg-2);
}
.th-reveal-v3-value-list svg {
  margin-top: 1px;
  color: var(--th-good-fg);
}
.th-reveal-v3-order .th-reveal-v3-cta {
  width: 100%;
  max-width: none;
  min-height: 54px;
  background: var(--th-v3-ink);
  color: var(--th-snow);
}
.th-reveal-v3-order .th-reveal-v3-cta:hover {
  background: #244143;
  color: var(--th-snow);
}
.th-reveal-v3-terms {
  margin: 12px 0 0;
  text-align: center;
  font: 400 11px/1.45 var(--th-font-sans);
  color: var(--th-fg-3);
}
.th-reveal-v3-trust {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px 14px;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid var(--th-border-1);
}
.th-reveal-v3-trust span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 500 9.5px/1 var(--th-font-sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--th-fg-3);
}

.th-reveal-v3-evidence {
  grid-area: evidence;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}
.th-reveal-v3-section {
  padding: 30px;
  border: 1px solid var(--th-border-1);
  border-radius: var(--th-radius-lg);
  background: var(--th-snow);
  box-shadow: var(--th-shadow-card);
}
.th-reveal-v3-section-head { margin-bottom: 22px; }
.th-reveal-v3-section-head .th-eyebrow {
  display: block;
  margin-bottom: 11px;
  color: #526255;
}
.th-reveal-v3-section-head h3 {
  margin: 0;
  font: 400 clamp(24px, 2.2vw, 30px)/1.12 var(--th-font-sans);
  letter-spacing: -0.025em;
  color: var(--th-v3-ink);
  text-wrap: balance;
}
.th-reveal-v3-section-head p {
  max-width: 56ch;
  margin: 9px 0 0;
  font: 400 14px/1.5 var(--th-font-sans);
  color: var(--th-fg-2);
}
.th-reveal-v3-priorities {
  display: grid;
  gap: 9px;
}
.th-reveal-v3-priority {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 12px;
  padding: 15px 16px;
  border-radius: var(--th-radius-sm);
  background: var(--th-v3-wash);
}
.th-reveal-v3-priority-num {
  padding-top: 2px;
  font-size: 10px;
  color: var(--th-fg-3);
}
.th-reveal-v3-priority h4 {
  margin: 0;
  font: 500 15px/1.25 var(--th-font-sans);
  color: var(--th-v3-ink);
}
.th-reveal-v3-priority p {
  margin: 5px 0 0;
  font: 400 12.5px/1.4 var(--th-font-sans);
  color: var(--th-fg-2);
}
.th-reveal-v3-priority p span { color: var(--th-fg-3); }
.th-reveal-v3-section .th-reveal-labstrip-wrap { margin-top: 14px; }

.th-reveal-v3-ingredients {
  overflow: hidden;
  border: 1px solid var(--th-border-1);
  border-radius: var(--th-radius-md);
}
.th-reveal-v3-ingredient {
  border-bottom: 1px solid var(--th-border-1);
}
.th-reveal-v3-ingredient:last-child { border-bottom: 0; }
.th-reveal-v3-ingredient summary {
  display: grid;
  grid-template-columns: 30px minmax(140px, 1fr) auto 28px;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 8px 12px 8px 14px;
  cursor: pointer;
  list-style: none;
}
.th-reveal-v3-ingredient summary::-webkit-details-marker { display: none; }
.th-reveal-v3-ingredient summary:hover { background: var(--th-v3-wash); }
.th-reveal-v3-ingredient summary:focus-visible {
  outline: 2px solid var(--th-midnight);
  outline-offset: -2px;
}
.th-reveal-v3-ingredient-num {
  font-size: 10px;
  color: var(--th-fg-3);
}
.th-reveal-v3-ingredient-name {
  font: 500 14px/1.25 var(--th-font-sans);
  color: var(--th-v3-ink);
}
.th-reveal-v3-ingredient-reasons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}
.th-reveal-v3-ingredient-reasons > span {
  padding: 5px 7px;
  border-radius: var(--th-radius-pill);
  background: var(--th-good);
  font: 500 9px/1 var(--th-font-sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #3d6659;
}
.th-reveal-v3-ingredient-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--th-border-1);
  border-radius: 50%;
  color: var(--th-v3-ink);
  transition: transform var(--th-t-base) var(--th-ease-out);
}
.th-reveal-v3-ingredient[open] .th-reveal-v3-ingredient-plus {
  transform: rotate(45deg);
}
.th-reveal-v3-ingredient-body {
  padding: 4px 54px 18px;
  background: var(--th-v3-wash);
}

.th-reveal-v3-proof {
  position: relative;
  overflow: hidden;
  padding: 38px clamp(28px, 6vw, 68px);
  border-radius: var(--th-radius-lg);
  background: var(--th-v3-ink);
  color: var(--th-snow);
}
.th-reveal-v3-proof-mark {
  position: absolute;
  right: 38px;
  top: -24px;
  font: 400 160px/1 Georgia, serif;
  color: rgba(203, 209, 183, 0.1);
}
.th-reveal-v3-proof blockquote {
  position: relative;
  z-index: 1;
  max-width: 790px;
  margin: 0;
  font: 400 clamp(21px, 3vw, 30px)/1.3 var(--th-font-sans);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.th-reveal-v3-proof > p {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0 0;
  font: 400 12px/1.3 var(--th-font-sans);
  color: rgba(255, 255, 255, 0.58);
}
.th-reveal-v3-proof > p strong {
  color: var(--th-moss);
  font-weight: 500;
}
.th-reveal-v3-proof > p span {
  padding-left: 12px;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.th-reveal-v3-process {
  padding: 38px;
  border: 1px solid var(--th-border-1);
  border-radius: var(--th-radius-lg);
  background: var(--th-snow);
}
.th-reveal-v3-section-head--center {
  max-width: 600px;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}
.th-reveal-v3-process ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}
.th-reveal-v3-process li {
  position: relative;
  min-width: 0;
  padding: 6px 26px;
  border-right: 1px solid var(--th-border-1);
}
.th-reveal-v3-process li:first-child { padding-left: 0; }
.th-reveal-v3-process li:last-child {
  padding-right: 0;
  border-right: 0;
}
.th-reveal-v3-process li > span {
  display: block;
  margin-bottom: 18px;
  font: 500 10px/1 var(--th-font-mono);
  letter-spacing: 0.08em;
  color: #526255;
}
.th-reveal-v3-process h4 {
  margin: 0 0 7px;
  font: 500 16px/1.25 var(--th-font-sans);
  color: var(--th-v3-ink);
}
.th-reveal-v3-process p {
  margin: 0;
  font: 400 13px/1.5 var(--th-font-sans);
  color: var(--th-fg-2);
}

.th-reveal-v3-faq {
  padding: 34px 38px;
  border: 1px solid var(--th-border-1);
  border-radius: var(--th-radius-lg);
  background: var(--th-snow);
}
.th-reveal-v3-faq .th-reveal-v3-section-head { margin-bottom: 10px; }
.th-reveal-v3-faq details {
  border-bottom: 1px solid var(--th-border-1);
}
.th-reveal-v3-faq details:last-child { border-bottom: 0; }
.th-reveal-v3-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 0;
  cursor: pointer;
  list-style: none;
  font: 500 15px/1.35 var(--th-font-sans);
  color: var(--th-v3-ink);
}
.th-reveal-v3-faq summary::-webkit-details-marker { display: none; }
.th-reveal-v3-faq summary svg {
  flex-shrink: 0;
  transition: transform var(--th-t-base) var(--th-ease-out);
}
.th-reveal-v3-faq details[open] summary svg { transform: rotate(45deg); }
.th-reveal-v3-faq details > p {
  max-width: 70ch;
  margin: -4px 0 20px;
  font: 400 13.5px/1.6 var(--th-font-sans);
  color: var(--th-fg-2);
}

.th-reveal-v3-close {
  padding: 48px 34px;
  border-radius: var(--th-radius-lg);
  background: var(--th-v3-accent);
  text-align: center;
}
.th-reveal-v3-close .th-eyebrow {
  display: block;
  margin-bottom: 14px;
  color: #526255;
}
.th-reveal-v3-close h3 {
  margin: 0 0 25px;
  font: 400 clamp(28px, 4vw, 40px)/1.08 var(--th-font-sans);
  letter-spacing: -0.035em;
  color: var(--th-v3-ink);
}
.th-reveal-v3-close .th-btn {
  width: 100%;
  max-width: 390px;
  margin: 0 auto;
  background: var(--th-v3-ink);
  color: var(--th-snow);
}
.th-reveal-v3-close > p {
  margin: 12px 0 0;
  font: 400 11.5px/1.4 var(--th-font-sans);
  color: rgba(16, 39, 41, 0.62);
}

.th-reveal-v3-sticky {
  align-items: center;
  gap: 20px;
}
.th-reveal-v3-sticky-price {
  display: flex;
  flex-direction: column;
  color: var(--th-snow);
}
.th-reveal-v3-sticky-price strong {
  font: 500 15px/1.2 var(--th-font-sans);
}
.th-reveal-v3-sticky-price span {
  font: 400 10px/1.3 var(--th-font-sans);
  color: rgba(255, 255, 255, 0.6);
}
.th-reveal-v3-sticky .th-btn { max-width: 300px; }

@media (max-width: 900px) {
  .th-reveal-v3-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "intro"
      "order"
      "evidence";
  }
  .th-reveal-v3-order.th-reveal-price {
    position: relative;
    top: auto;
  }
  .th-reveal-v3-product {
    min-height: 250px;
  }
  .th-reveal-v3-product-img { height: 250px; }
  .th-reveal-v3-process li { padding-right: 18px; padding-left: 18px; }
}

@media (max-width: 640px) {
  .th-reveal-v3 { gap: 16px; }
  .th-reveal-v3-grid { gap: 16px; }
  .th-reveal-v3-intro {
    min-height: 0;
    padding: 28px 20px 24px;
    border-radius: var(--th-radius-md);
  }
  .th-reveal-v3-title {
    max-width: 10.5ch;
    margin: 26px 0 16px;
    font-size: clamp(36px, 11vw, 48px);
  }
  .th-reveal-v3-lead { font-size: 15px; }
  .th-reveal-v3-snapshot {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-top: 26px;
  }
  .th-reveal-v3-snapshot > div {
    min-width: 0;
    padding: 10px 8px;
  }
  .th-reveal-v3-snapshot strong { font-size: 19px; }
  .th-reveal-v3-snapshot span { font-size: 8px; }
  .th-reveal-v3-reassurance { align-items: flex-start; font-size: 11.5px; }

  .th-reveal-v3-order.th-reveal-price { border-radius: var(--th-radius-md); }
  .th-reveal-v3-product { min-height: 190px; padding: 14px 12px 2px; }
  .th-reveal-v3-product-img { height: 190px; }
  .th-reveal-v3-nameplate { left: 14px; top: 12px; }
  .th-reveal-v3-order-body { padding: 21px 18px 18px; }
  .th-reveal-v3-order-heading { flex-direction: column; gap: 8px; }
  .th-reveal-v3-price { font-size: 38px; }
  .th-reveal-v3-value-list li { font-size: 12.5px; }

  .th-reveal-v3-section,
  .th-reveal-v3-process,
  .th-reveal-v3-faq {
    padding: 24px 18px;
    border-radius: var(--th-radius-md);
  }
  .th-reveal-v3-section-head { margin-bottom: 18px; }
  .th-reveal-v3-section-head h3 { font-size: 23px; }
  .th-reveal-v3-priority { padding: 13px; }
  .th-reveal-v3-ingredient summary {
    grid-template-columns: 26px minmax(0, 1fr) 26px;
    gap: 7px;
    padding: 9px 9px 9px 11px;
  }
  .th-reveal-v3-ingredient-reasons {
    grid-column: 2;
    justify-content: flex-start;
    padding-bottom: 3px;
  }
  .th-reveal-v3-ingredient-plus {
    grid-column: 3;
    grid-row: 1 / span 2;
  }
  .th-reveal-v3-ingredient-body { padding: 4px 14px 16px 44px; }

  .th-reveal-v3-proof {
    padding: 30px 22px;
    border-radius: var(--th-radius-md);
  }
  .th-reveal-v3-proof blockquote { font-size: 20px; }
  .th-reveal-v3-proof > p {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }
  .th-reveal-v3-proof > p span {
    padding-left: 0;
    border-left: 0;
  }
  .th-reveal-v3-process ol {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .th-reveal-v3-process li,
  .th-reveal-v3-process li:first-child,
  .th-reveal-v3-process li:last-child {
    padding: 0 0 20px 42px;
    border-right: 0;
    border-bottom: 1px solid var(--th-border-1);
  }
  .th-reveal-v3-process li:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }
  .th-reveal-v3-process li > span {
    position: absolute;
    left: 0;
    top: 3px;
    margin: 0;
  }
  .th-reveal-v3-faq summary { font-size: 14px; }
  .th-reveal-v3-close {
    padding: 36px 20px;
    border-radius: var(--th-radius-md);
  }
  .th-reveal-v3-sticky {
    gap: 12px;
    justify-content: stretch;
  }
  .th-reveal-v3-sticky-price { display: none; }
  .th-reveal-v3-sticky .th-btn { max-width: none; }
}

/* The reveal's own gap spaces these; their standalone margins would double it. */
.th-reveal .th-lgs-success,
.th-reveal .th-lgs-disclaimer { margin: 0; }

/* Reveal: phone + tablet -------------------------------------------- */
@media (max-width: 900px) {
  .th-reveal-hero {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-template-areas:
      "copy"
      "visual"
      "meta";
    padding: 28px 20px 22px;
  }
  .th-reveal-hero-copy,
  .th-reveal-hero-meta { padding: 0; }
  .th-reveal-hero-visual { margin: 8px -20px 0; }
  .th-reveal-hero-title { font-size: clamp(26px, 5.4vw, 32px); }
  .th-reveal-hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
  .th-reveal-include-cards { grid-template-columns: 1fr; gap: 14px; }
  .th-reveal-price { grid-template-columns: 1fr; gap: 26px; padding: 30px 26px; }
  .th-reveal-product .th-reveal-price--in-card {
    display: flex;
    flex-direction: column;
    gap: 26px;
    padding: 30px 26px 32px;
  }
  .th-reveal-product .th-reveal-price-card { order: -1; }
  .th-reveal-price-title { max-width: none; margin-bottom: 18px; }
  .th-reveal-price-card { padding: 22px 20px 20px; }
  .th-reveal-formula-head { flex-wrap: wrap; gap: 16px; padding: 20px 22px; }
  .th-reveal-formula-vitals { width: 100%; }
  .th-reveal-formula-compare { padding: 24px 22px 8px; }
  .th-reveal-formula-membership { padding: 24px 22px 26px; }
  .th-reveal-formula-action { padding: 16px 22px 18px; }
  .th-reveal-next,
  .th-reveal-faq { padding: 26px 22px; }
  .th-reveal-faq-item p { padding-right: 12px; }
  .th-reveal-close { padding: 42px 24px 36px; }
  .th-reveal-next-eta { white-space: normal; }
}
@media (max-width: 640px) {
  .th-reveal-theme-table { table-layout: auto; }
  .th-reveal-theme-table,
  .th-reveal-theme-table tbody,
  .th-reveal-theme-table-row,
  .th-reveal-theme-table-group {
    display: block;
    width: 100%;
  }
  .th-reveal-theme-table-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 12px;
    row-gap: 10px;
    padding: 14px 16px 16px;
    border-bottom: 1px solid var(--th-border-1);
  }
  .th-reveal-theme-table tbody:last-child .th-reveal-theme-table-row:last-child {
    border-bottom: 0;
  }
  .th-reveal-theme-table-row:hover { background: transparent; }
  .th-reveal-theme-table td,
  .th-reveal-theme-table-row:hover td {
    padding: 0;
    border-bottom: 0;
    background: transparent;
    width: auto;
  }
  .th-reveal-theme-table-marker { grid-column: 1; }
  .th-reveal-theme-table-status {
    grid-column: 2;
    padding-top: 1px;
    text-align: right;
  }
  .th-reveal-theme-table-range {
    grid-column: 1 / -1;
    padding-top: 2px;
    min-width: 0;
    width: 100%;
  }
  .th-reveal-theme-table-group,
  .th-reveal-theme-table-group th {
    display: block;
    width: 100%;
  }
  .th-reveal-theme-table-group th {
    padding: 10px 16px;
  }
  .th-reveal-theme-desc { max-width: none; }
  .th-lgs-screen.th-reveal.is-active { gap: 16px; }
  .th-reveal-v2-hero { border-radius: var(--th-radius-md); }
  .th-reveal-hero { padding: 24px 16px 18px; border-radius: var(--th-radius-md); }
  .th-reveal-hero-copy,
  .th-reveal-hero-meta { padding: 0; }
  .th-reveal-hero-visual { margin-left: -16px; margin-right: -16px; }
  .th-reveal-hero-title { font-size: clamp(24px, 7.2vw, 30px); }
  .th-reveal-labstrip {
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: 10px;
    padding: 14px 14px 14px 12px;
    column-gap: 12px;
    border-radius: var(--th-radius-sm);
  }
  .th-reveal-labstrip-icon { width: 32px; height: 32px; }
  .th-reveal-labstrip-copy { font-size: 13.5px; }
  .th-reveal-labstrip-lead { font-size: 14px; }
  .th-reveal-labstrip-go {
    grid-column: 2;
    justify-self: start;
    font-size: 12.5px;
  }
  .th-reveal-hero-stats { gap: 8px; max-width: none; }
  .th-reveal-hero-stat { padding: 9px 9px 8px; }
  .th-reveal-hero-stat-figure { font-size: 20px; }
  .th-reveal-hero-stat-label { font-size: 9.5px; letter-spacing: 0.05em; }
  .th-reveal-hero-certs { width: 100%; }
  .th-reveal .th-reveal-cta { max-width: none; }

  .th-reveal-next,
  .th-reveal-faq { padding: 24px 20px; border-radius: var(--th-radius-md); }
  .th-reveal-compat { padding: 16px 20px; gap: 8px 18px; }
  .th-reveal-includes-head { margin-bottom: 20px; }
  .th-reveal-next-head { margin-bottom: 22px; }
  .th-reveal-next-eta { font-size: 11.5px; padding: 8px 13px; white-space: normal; }
  .th-reveal-step { grid-template-columns: 34px minmax(0, 1fr); column-gap: 13px; }
  .th-reveal-step-node { width: 34px; height: 34px; }
  .th-reveal-steps h4 { font-size: 15.5px; }
  .th-reveal-next-after { font-size: 12.5px; align-items: flex-start; }
  .th-reveal-next-after svg { margin-top: 3px; }
  .th-reveal-formula-next { margin-top: 22px; padding-top: 22px; }
  .th-reveal-include-card-body { padding: 16px; }
  .th-reveal-include-card-body h4 { font-size: 16px; }

  .th-reveal-formula,
  .th-reveal-product { border-radius: var(--th-radius-md); }
  .th-reveal-formula-head { padding: 18px 16px; flex-wrap: wrap; gap: 14px; }
  .th-reveal .th-reveal-formula-meta { font-size: 9.5px; letter-spacing: 0.05em; }
  /* Full-width under the name, two-by-two so a weight range still fits. */
  .th-reveal-formula-vitals { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .th-reveal-formula-vital { padding: 7px 10px; }
  .th-reveal-formula-vitals dd { font-size: 13px; }
  .th-reveal-because { padding-left: 12px; }
  .th-reveal-ing-num { display: none; }

  .th-reveal-formula-compare { padding: 20px 16px 8px; }
  .th-reveal-formula-compare-intro { margin-bottom: 18px; }
  .th-reveal-formula-zone-title { font-size: 18px; }
  .th-reveal-formula-zone-lead { font-size: 14px; }
  .th-reveal-formula-membership { margin-top: 22px; padding: 20px 16px 22px; }
  .th-reveal-formula-membership-head { margin-bottom: 18px; }
  .th-reveal-include-card-img { aspect-ratio: 16 / 10; }

  /* Ingredient list only — comparison lives in the totals row above the
     AI icons, not on every name. */
  .th-reveal-formula-compare .th-reveal-formula-table-wrap,
  .th-reveal-formula-table-wrap {
    padding: 0;
    overflow-x: hidden;
  }
  .th-formula-table,
  .th-formula-table thead,
  .th-formula-table tbody,
  .th-formula-table tfoot,
  .th-formula-table-item,
  .th-formula-table-item-cell {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .th-formula-table thead { display: none; }
  .th-formula-table-summary-row .th-formula-table-cell--ours,
  .th-formula-table-summary-row .th-formula-table-cell--price {
    display: none;
  }
  .th-formula-table-summary-row {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    border-bottom: 1px solid var(--th-border-1);
  }
  .th-formula-table-summary .th-formula-table-cell--name {
    display: block;
    padding: 10px 0;
    border-bottom: 0;
  }
  .th-formula-table-ing {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    width: 100%;
  }
  .th-formula-table-summary-row .th-reveal-ing-num {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding: 0;
  }
  .th-formula-table-ing-main {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
  }
  .th-formula-table-cell--name .th-reveal-ing-name { font-size: 14px; }
  .th-formula-table-ing-meta { margin-left: auto; }

  .th-formula-table-totals {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 10px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-top: 4px;
  }
  .th-formula-table-totals .th-formula-table-cell--name { display: none; }
  .th-formula-table-totals > * {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: auto;
    min-width: 0;
    padding-top: 16px;
    padding-bottom: 16px;
    border-top: 1px solid var(--th-border-2);
  }
  .th-formula-table-totals-kicker {
    display: block;
    margin-bottom: 6px;
    font: 500 10px/1.2 var(--th-font-sans);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--th-fg-3);
  }
  .th-formula-table-totals-label,
  .th-formula-table-total { font-size: 19px; }
  .th-formula-table-savings { margin-top: 7px; padding: 3px 8px; font-size: 10.5px; }
  .th-formula-table-details[open] .th-formula-table-summary-row { border-bottom: 0; }
  .th-formula-table-item:last-child .th-formula-table-summary-row { border-bottom: 0; }
  .th-formula-table-details .th-reveal-why-body { padding: 4px 12px 14px; }
  .th-formula-table-summary .th-reveal-why-tags { display: none; }
  .th-reveal-why-tag { padding: 3px 8px; font-size: 11px; }
  .th-reveal-why-toggle { width: 26px; height: 26px; }

  .th-reveal-formula-compare .th-reveal-ask {
    margin-top: 4px;
    padding-top: 18px;
  }
  .th-reveal-formula-action { padding: 16px 16px 18px; }
  .th-reveal-formula-compare-alert { margin-bottom: 18px; }
  .th-reveal-ask-heading { font-size: 15px; }
  .th-reveal-faq-item summary { gap: 12px; font-size: 14.5px; padding: 16px 0; }
  .th-reveal-faq-item p { padding-right: 0; font-size: 13.5px; }

  .th-reveal-price { border-radius: var(--th-radius-md); }
  .th-reveal-product .th-reveal-price--in-card { margin-top: 0; padding: 22px 16px 24px; }
  .th-reveal-price-figure { font-size: clamp(34px, 11vw, 44px); }
  .th-reveal-price-figure span { font-size: 16px; }
  .th-reveal-close { padding: 34px 18px 30px; border-radius: var(--th-radius-md); }
  .th-reveal-close-title { margin-bottom: 22px; }
  .th-reveal-close-badges { gap: 10px 16px; margin-top: 20px; }

}

@media (max-width: 420px) {
  .th-reveal-v2-hero { padding: 20px 16px 0; }
  .th-reveal-v2-hero-vitals { font-size: 9.5px; }
  .th-reveal-v2-hero-read { padding: 13px 13px 14px; }
  .th-reveal-v2-hero-chain { gap: 0 8px; }
  .th-reveal-v2-hero-chain li { padding-right: 4px; }
  .th-reveal-v2-hero-chain-figure { font-size: 22px; }
  .th-reveal-v2-hero-chain-label { font-size: 9px; letter-spacing: 0.05em; }
  .th-reveal-v2-hero-foot { margin: 22px -16px 0; padding: 12px 16px 13px; }
  .th-reveal-hero { padding: 22px 14px 16px; }
  .th-reveal-hero-visual { margin-left: -14px; margin-right: -14px; }
  .th-reveal-hero-stat { padding: 8px 8px 7px; }
  .th-reveal-hero-certs {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 14px;
    padding-top: 14px;
  }
  .th-reveal-formula-head { padding: 16px 14px; }
  .th-reveal-formula-name { font-size: 20px; margin: 8px 0 6px; }
  .th-reveal-formula-compare { padding: 16px 12px 6px; }
  .th-reveal-formula-membership { padding: 18px 14px 20px; }
  .th-formula-table {
    --th-formula-col-ours: auto;
    --th-formula-col-price: auto;
  }
  .th-formula-table-totals-label,
  .th-formula-table-total { font-size: 16px; }
  .th-reveal-labstrip { padding: 12px 12px 12px 10px; }
  .th-reveal-product .th-reveal-price--in-card { padding: 20px 14px 22px; }
  .th-reveal-faq { padding: 20px 16px; }
  .th-reveal-close { padding: 30px 16px 26px; }
}

.th-lgs-disclaimer {
  font: 400 12.5px/1.65 var(--th-font-sans);
  color: var(--th-fg-3);
  margin: 24px 0 0;
  text-align: center;
}

/* ---------- Labs get-started: phone layout ----------------------------- */
/* The desktop sizing above is tuned for a 720px column. Below ~640px the
   same values leave almost no gutter, so this block pulls padding, type,
   and the multi-column rows back down to something usable one-handed.
   Kept together at the end of the section rather than scattered so the
   phone layout can be read (and adjusted) as a single pass. */
@media (max-width: 640px) {
  .th-lgs-topbar { padding: 14px 18px; }
  .th-lgs-page { padding: 12px 18px 88px; }
  .th-lgs.is-editing-labs .th-lgs-page { padding-bottom: 120px; }
  .th-lgs-trust-footer { padding-left: 18px; padding-right: 18px; }
  .th-lgs:has(.th-reveal.is-active .th-reveal-v2) .th-lgs-page { padding-bottom: 0; }
  .th-lgs:has(.th-reveal.is-active .th-reveal-v2) .th-lgs-trust-footer {
    padding-left: 18px;
    padding-right: 18px;
  }
  .th-lgs:has(.th-reveal.is-active .th-reveal-v2) .th-lgs-edit-hint {
    padding-left: 18px;
    padding-right: 18px;
  }
  .th-reveal-v2-close-copy { padding: 24px 16px 0; }
  .th-reveal-v2-close-wash { height: min(28%, 160px); }

  /* iOS zooms the whole page when a focused field is under 16px. */
  .th-lgs .th-form-input,
  .th-lgs .th-form-select,
  .th-lgs .th-form-textarea {
    font-size: 16px;
    padding: 13px 14px;
  }

  .th-lgs-stepper { margin-bottom: 34px; }
  .th-lgs-stepper-dot { width: 34px; height: 34px; }
  .th-lgs-stepper-num { font-size: 12.5px; }
  .th-lgs-stepper-label { font-size: 12px; }
  .th-lgs-stepper-line { margin-top: 17px; }

  .th-lgs-section-head { margin-bottom: 24px; }
  .th-lgs .th-lgs-cta { height: 54px; font-size: 15.5px; }
  .th-lgs .th-lgs-cta.th-reveal-cta--priced { height: auto; min-height: 54px; }
  .th-reveal-cta-primary { font-size: 15px; }
  .th-reveal-cta-billing { font-size: 12px; }

  .th-lgs-checklist { gap: 9px; }
  .th-lgs-checklist li { font-size: 14px; }

  /* Side-by-side leaves the field too narrow to read a typed address. */
  .th-lgs-email-row { flex-direction: column; align-items: stretch; }
  .th-lgs .th-lgs-email-btn { height: 48px; width: 100%; }

  .th-lgs-otp-panel { padding: 18px 14px; }
  .th-lgs-otp-hint { font-size: 13px; margin-bottom: 14px; }
  /* Six fixed-width boxes overflow the panel — let them share the row. */
  .th-lgs .th-otp-grid { gap: 7px; width: 100%; }
  .th-lgs .th-otp-box {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    max-width: 54px;
    font-size: 21px;
  }

  .th-lgs-provider { padding: 14px 10px; font-size: 13.5px; gap: 7px; }

  .th-lgs-guide-modal-panel { max-height: 94vh; }
  .th-lgs-guide-tabs { padding: 12px 16px; }
  .th-lgs-guide-tab { padding: 8px 13px; font-size: 13px; }
  .th-lgs-guide-modal-body { padding: 18px 16px; }
  .th-lgs-guide-headline { font-size: 22px; }
  .th-lgs-guide-hero { margin-bottom: 22px; }
  .th-lgs-guide-steps { gap: 26px; }
  .th-lgs-guide-step-head { gap: 11px; }
  .th-lgs-guide-step-title { font-size: 16px; }
  .th-lgs-guide-step-list { font-size: 13.5px; }
  .th-lgs-guide-shot { padding: 7px; }
  /* Tapping to enlarge matters most here, where the screenshot is smallest —
     so the hint shrinks to the icon rather than disappearing. */
  .th-lgs-guide-shot-hint { right: 14px; bottom: 14px; padding: 6px; }
  .th-lgs-guide-shot-hint-label { display: none; }
  .th-lgs-guide-lightbox { padding: 16px; }
  .th-lgs-guide-lightbox-close { top: 12px; right: 12px; }
  .th-lgs-guide-lightbox-img { max-height: 82vh; }

  .th-lgs-dropzone { padding: 30px 18px; }
  .th-lgs-dropzone .th-dropzone-icon { width: 48px; height: 48px; margin-bottom: 12px; }
  .th-lgs-dropzone .th-dropzone-title { font-size: 15px; }
  .th-lgs-dropzone-files .th-upload-review-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .th-lgs-page-drop { padding: 12px; }
  .th-lgs-page-drop-title { font-size: 16px; }
  .th-lgs-authorize { padding: 18px; gap: 12px; }
  .th-lgs-authorize-text { font-size: 13.5px; }
  .th-sms-consent { padding: 16px; gap: 12px; }
  .th-sms-consent-text { font-size: 14px; }
  .th-sms-consent-legal { font-size: 11.5px; }

  .th-lgs-status-list { gap: 12px; margin: 28px 0; }
  .th-lgs-status-row { padding: 18px 16px; gap: 14px; }
  .th-lgs-status-icon { width: 34px; height: 34px; }
  .th-lgs-status-title { font-size: 15.5px; }
  .th-lgs-status-sub { font-size: 13px; }
  .th-lgs-next-panel { padding: 18px; gap: 12px; }
  .th-lgs-next-title { font-size: 15.5px; }

  .th-lgs-intake { gap: 14px; margin-bottom: 22px; }
  .th-lgs-question { padding: 16px; }
  .th-lgs-question-head { margin-bottom: 10px; }
  .th-lgs-question-text { font-size: 16px; }
  .th-lgs-option { padding: 10px 12px; gap: 10px; }
  .th-lgs-option-label { font-size: 14px; }

  .th-lgs .th-soft-panel { padding: 18px; }
}

/* =======================================================================
   Post-checkout order status (/labs-get-started/order-confirmed)
   -----------------------------------------------------------------------
   Borrows the reveal's step rail and formula card so the three steps the
   customer was promised on the buy screen are the same three they track
   here. The only new work is the confirmed/current/upcoming states on the
   rail, which the reveal never needed.
   ======================================================================= */
.th-order-page { max-width: 860px; }
.th-order-page > * + * { margin-top: 44px; }

.th-order-flash {
  align-items: center;
}
.th-order-flash-dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: -4px -6px -4px 0;
  padding: 0;
  border: 0;
  border-radius: var(--th-radius-sm);
  background: transparent;
  color: inherit;
  opacity: 0.7;
  cursor: pointer;
  flex-shrink: 0;
}
.th-order-flash-dismiss:hover { opacity: 1; background: rgba(0, 0, 0, 0.06); }

.th-order-hero { text-align: center; }

/* The reveal draws its flag for the dark hero, where pale moss reads fine. On
   this light page that lands near 2:1, so the confirmation is the faintest
   thing on screen. Status-good palette instead, with a deeper green than
   --th-good-fg so 12px uppercase still clears 4.5:1. */
.th-order-flag {
  background: var(--th-good);
  border-color: rgba(47, 93, 76, 0.30);
  color: #2F5D4C;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 7px 15px;
}
.th-order-hero-title {
  font: 400 clamp(28px, 4vw, 42px)/1.1 var(--th-font-sans);
  letter-spacing: -0.025em;
  color: var(--th-midnight);
  margin: 18px 0 12px;
}
.th-order-hero-title em { font-family: var(--th-font-display-italic); font-style: italic; }
.th-order-hero-lead {
  font: 400 16px/1.6 var(--th-font-sans);
  color: var(--th-fg-2);
  margin: 0 auto;
  max-width: 54ch;
  text-wrap: pretty;
}
.th-order-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 26px;
}

.th-order-pending { text-align: center; padding: 44px 28px; }
.th-order-pending-spinner { display: block; margin: 0 auto; }

/* Rail states. Untouched nodes stay muted so the eye lands on the step the
   order is actually sitting on. */
.th-order-step .th-reveal-step-node {
  background: var(--th-bone);
  color: var(--th-fg-3);
}
.th-order-step.is-done .th-reveal-step-node {
  background: var(--th-good-fg);
  color: var(--th-snow);
}
.th-order-step.is-current .th-reveal-step-node {
  background: var(--th-midnight);
  color: var(--th-moss);
}
.th-order-step:not(.is-done):not(.is-current) h4 { color: var(--th-fg-3); }
.th-order-step.is-current .th-reveal-step-when { color: var(--th-midnight); }

.th-order-ingredients {
  list-style: none;
  margin: 0;
  padding: 26px 32px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 28px;
}
.th-order-ingredient {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--th-border-1);
}
.th-order-formula .th-reveal-formula-fine { padding: 0 32px 28px; margin: 0; }

.th-order-support {
  text-align: center;
  font: 400 13.5px/1.6 var(--th-font-sans);
  color: var(--th-fg-3);
}
.th-order-support a { color: var(--th-fg-1); text-decoration: underline; }

@media (max-width: 640px) {
  .th-order-page > * + * { margin-top: 32px; }
  .th-order-ingredients { grid-template-columns: minmax(0, 1fr); padding: 22px; }
  .th-order-formula .th-reveal-formula-fine { padding: 0 22px 22px; }
}

/* ---------- Public SMS opt-in proof (/sms-alerts) ---------------------- */
.th-sms-alerts { background: var(--th-bone); min-height: 100vh; }
.th-sms-alerts-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 72px 24px 48px;
}
.th-sms-alerts-title {
  font: 400 40px/1.1 var(--th-font-sans);
  letter-spacing: var(--th-tracking-heading);
  color: var(--th-midnight);
  margin: 12px 0 16px;
}
.th-sms-alerts-operator {
  font: 500 18px/1.4 var(--th-font-sans);
  color: var(--th-midnight);
  margin: 0 0 16px;
}
.th-sms-alerts-lede {
  font: 400 16px/1.6 var(--th-font-sans);
  color: var(--th-fg-2);
  margin: 0 0 32px;
}
.th-sms-alerts-card {
  background: var(--th-snow);
  border: 1px solid var(--th-border-1);
  border-radius: var(--th-radius-sm);
  padding: 28px 24px;
  margin-bottom: 20px;
}
.th-sms-alerts-card h2 {
  font: 500 18px/1.3 var(--th-font-sans);
  color: var(--th-midnight);
  margin: 0 0 12px;
}
.th-sms-alerts-card p,
.th-sms-alerts-card li {
  font: 400 15px/1.6 var(--th-font-sans);
  color: var(--th-fg-2);
}
.th-sms-alerts-card ol {
  margin: 12px 0 0;
  padding-left: 22px;
}
.th-sms-alerts-card li + li { margin-top: 8px; }
.th-sms-alerts-card a { color: var(--th-midnight); text-decoration: underline; }
.th-sms-alerts-shot { margin: 16px 0 0; }
.th-sms-alerts-shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--th-border-1);
  border-radius: var(--th-radius-sm);
}
.th-sms-alerts-shot figcaption {
  margin-top: 10px;
  font: 400 13px/1.5 var(--th-font-sans);
  color: var(--th-fg-3);
  overflow-wrap: anywhere;
}
.th-sms-alerts-legal {
  font: 400 13.5px/1.6 var(--th-font-sans);
  color: var(--th-fg-3);
  margin: 8px 0 0;
}
.th-sms-alerts-legal a { color: var(--th-midnight); text-decoration: underline; }
.th-sms-alerts .th-footer { margin-top: 48px; }

@media (max-width: 640px) {
  .th-sms-alerts-page { padding: 48px 18px 32px; }
  .th-sms-alerts-title { font-size: 32px; }
}