/* =========================================================================
   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;
  min-height: 100vh;
  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;
  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;
  width: 100%;
  max-width: 720px;
  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;
  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 { max-width: min(48vw, 180px); font-size: 12px; }
  .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 three-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 three
   steps run across it rather than down it — same information, and it keeps ~60px
   of the first action on screen. */
@media (min-width: 620px) {
  .th-lgs-portal-copy { padding: 32px 30px 30px; }
  .th-lgs-portal-steps-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 20px;
  }
}

/* ── Step 1 · the two jobs ────────────────────────────────────────────────
   Cards, not a numbered rail: the funnel's own 1-2-3 resumes on the next
   screen, and a second numbering inside one of those three 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 {
  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);
}
/* A white card at 0.38 opacity on cream disappears; the locked card has to stay
   readable, since being able to read what's coming is the point of showing it.
   0.62 was still too far — on cream it took the body copy down to roughly a 2:1
   contrast ratio, so half the page's height was spent on something nobody could
   actually read, and a washed-out block that size reads as broken rather than
   pending. The lock chip, the greyed icon and the dropped shadow are what say
   "not yet"; the opacity only has to take the edge off. */
.th-lgs-card.th-lgs-section--gated.is-locked {
  opacity: 0.82;
  box-shadow: 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-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);
}

/* Only meaningful while the upload card is gated — once it unlocks the hint is
   noise. Kept on its historical class name; the lock chip is the same object it
   always was, just living in a card now. */
.th-lgs-action-lock { display: none; }
.th-lgs-section--gated.is-locked .th-lgs-action-lock {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  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-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 {
  position: relative;
}
.th-lgs-unit-field .th-form-input {
  padding-right: 44px;
}
.th-lgs .th-lgs-unit-field .th-form-select {
  width: 100%;
  padding-right: 96px;
}
.th-lgs-unit-field .th-lgs-compound-unit {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}
.th-lgs-unit-field .th-form-select + .th-lgs-compound-unit {
  right: 36px;
}
@media (max-width: 420px) {
  .th-lgs-grid-2 { grid-template-columns: 1fr; }
}

.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-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: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.th-lgs-dropzone-files .th-upload-file {
  position: relative;
  display: block;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border-radius: var(--th-radius-sm);
  background: var(--th-snow);
}
.th-upload-file-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-bottom: 1px solid var(--th-border-1);
  background: #eeeee9;
}
.th-upload-file-preview canvas {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.th-upload-file-status {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 30px;
  height: 30px;
  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-lgs-dropzone-files .th-upload-file-meta {
  padding: 10px 36px 10px 10px;
}
.th-lgs-dropzone-files .th-upload-file-name { font-size: 12.5px; }
.th-lgs-dropzone-files .th-upload-file-size { font-size: 11px; }
.th-lgs-dropzone-files .th-upload-file-remove {
  position: absolute;
  right: 7px;
  bottom: 10px;
  width: 26px;
  height: 26px;
  background: var(--th-snow);
}
.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;
}

/* 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-text {
  font: 400 13.5px/1.55 var(--th-font-sans);
  color: var(--th-fg-2);
}
.th-sms-consent-text a {
  color: var(--th-midnight);
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}

.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) ------- */
/* 3-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;
  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;
}
.th-lgs-stepper-dot {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--th-snow);
  border: 1.5px solid var(--th-border-2);
  transition: background 0.35s var(--th-ease-out), border-color 0.35s var(--th-ease-out);
}
.th-lgs-stepper-num {
  font: 500 14px/1 var(--th-font-mono);
  color: var(--th-fg-3);
  transition: color 0.35s var(--th-ease-out);
}
.th-lgs-stepper-check {
  display: none;
  color: var(--th-snow);
}
.th-lgs-stepper-label {
  font: 500 13px/1.3 var(--th-font-sans);
  color: var(--th-fg-3);
  text-align: center;
  letter-spacing: 0.01em;
  padding: 0 2px;
  transition: color 0.35s var(--th-ease-out);
}

.th-lgs-stepper-item.is-active .th-lgs-stepper-dot {
  background: var(--th-midnight);
  border-color: var(--th-midnight);
}
.th-lgs-stepper-item.is-active .th-lgs-stepper-num { color: var(--th-snow); }
.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-good-fg);
  border-color: var(--th-good-fg);
}
.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 40px;
  height: 1.5px;
  margin-top: 18px;
  background: var(--th-border-1);
  transition: background 0.35s var(--th-ease-out);
}
.th-lgs-stepper-line.is-complete { background: var(--th-good-fg); }
@media (min-width: 640px) {
  .th-lgs-stepper-line { flex-basis: 76px; }
}
@media (max-width: 380px) {
  .th-lgs-stepper-line { flex-basis: 12px; }
}

.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); }

.th-lgs-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  padding: 0;
  margin-bottom: 18px;
  font: 500 13px/1 var(--th-font-sans);
  color: var(--th-fg-2);
  cursor: pointer;
  transition: color var(--th-t-fast) var(--th-ease-out);
}
.th-lgs-back:hover { color: var(--th-midnight); }

/* 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;
  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;
}
.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 32px/1.08 var(--th-font-sans);
  letter-spacing: -0.028em;
  color: var(--th-snow);
  margin: 14px 0 0;
}
.th-reveal-hero-title-name,
.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;
  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 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;
  font: 500 12.5px/1.3 var(--th-font-sans);
  color: rgba(255, 255, 255, 0.78);
}
.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 {
  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(22px, 2.6vw, 30px)/1.15 var(--th-font-sans);
  letter-spacing: -0.02em;
  color: var(--th-snow);
  margin: 10px 0 8px;
}
.th-reveal .th-reveal-formula-meta {
  margin: 0;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  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);
  white-space: nowrap;
}

/* 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; }
.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.5 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 {
  font: 500 13px/1.3 var(--th-font-sans);
  color: var(--th-midnight);
  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 { padding: 0; }
.th-formula-table {
  --th-formula-col-ours: 136px;
  --th-formula-col-price: 114px;
  width: 100%;
  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); padding: 0; text-align: center; }
.th-formula-table-th--price {
  width: var(--th-formula-col-price);
  text-align: center;
  white-space: normal;
  letter-spacing: 0.05em;
  line-height: 1.35;
}

/* 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;
  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;
}
.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 .th-reveal-ing-name {
  flex: 1 1 auto;
  min-width: 0;
}
.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-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 > summary.th-reveal-ask-heading {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  font: 500 14.5px/1.4 var(--th-font-sans);
  color: var(--th-midnight);
}
.th-reveal-ask > summary.th-reveal-ask-heading::-webkit-details-marker { display: none; }
.th-reveal-ask > summary.th-reveal-ask-heading::after {
  content: "";
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--th-fg-3);
  border-bottom: 1.5px solid var(--th-fg-3);
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}
.th-reveal-ask[open] > summary.th-reveal-ask-heading {
  margin-bottom: 12px;
}
.th-reveal-ask[open] > summary.th-reveal-ask-heading::after {
  transform: rotate(225deg);
}
.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;
}
/* Proof sits between the dark offer and the bone membership band, so both
   seams have to flush the same way a direct membership sibling used to. */
.th-reveal-price--in-card + .th-reveal-testimonials {
  margin: 0;
  padding: 28px 0 24px;
  background: var(--th-bone);
}
.th-reveal-product .th-reveal-testimonials .th-reveal-includes-head,
.th-reveal-product .th-reveal-testimonials-nav {
  padding-left: 32px;
  padding-right: 32px;
}
.th-reveal-testimonials + .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 · Proof — Shopify-style peek carousel -------------------------- */
.th-reveal-testimonials {
  --th-reveal-t-gap: 24px;
  width: 100%;
  margin: 0;
  padding: 8px 0 4px;
}
.th-reveal-testimonials .th-reveal-includes-head {
  text-align: center;
  margin: 0 auto 8px;
}
.th-reveal-testimonials-track-wrap { overflow: hidden; }
.th-reveal-testimonials-track {
  display: flex;
  gap: var(--th-reveal-t-gap);
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.th-reveal-tcard {
  flex: 0 0 78%;
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding: 40px clamp(24px, 4vw, 48px);
  border-radius: var(--th-radius-lg);
  background: var(--th-bone);
  text-align: center;
  opacity: 0.35;
  transition: opacity 0.45s ease;
}
.th-reveal-tcard.is-active { opacity: 1; }
.th-reveal-tcard-quote {
  margin: 0;
  max-width: 52ch;
  font: 400 clamp(16px, 2vw, 22px)/1.5 var(--th-font-sans);
  letter-spacing: 0.01em;
  color: var(--th-midnight);
  text-wrap: pretty;
}
.th-reveal-tcard-person {
  display: flex;
  align-items: center;
  gap: 11px;
}
.th-reveal-tcard-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--th-midnight);
  color: var(--th-snow);
  font: 500 13px/1 var(--th-font-sans);
  text-transform: uppercase;
}
.th-reveal-tcard-byline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}
.th-reveal-tcard-attrib {
  margin: 0;
  font: 400 12px/1.3 var(--th-font-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--th-fg-2);
}
.th-reveal-tcard-origin {
  margin: 0;
  font: 400 12.5px/1.35 var(--th-font-sans);
  color: var(--th-fg-2);
}
.th-reveal-testimonials-progress {
  width: 78%;
  height: 4px;
  margin: 22px auto 0;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.08);
}
.th-reveal-testimonials-progress-bar {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 2px;
  background: var(--th-midnight);
  transform-origin: 0 50%;
  animation: th-bar-fill-v3 8s linear infinite;
}
@keyframes th-bar-fill-v3 {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.th-reveal-testimonials-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 22px;
}
.th-reveal-testimonials-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: transparent;
  color: var(--th-midnight);
  cursor: pointer;
  transition: background var(--th-t-base) var(--th-ease-out),
              border-color var(--th-t-base) var(--th-ease-out);
}
.th-reveal-testimonials-btn:hover,
.th-reveal-testimonials-btn:focus-visible {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.3);
  outline: none;
}
.th-reveal-testimonials-btn svg { width: 18px; height: 18px; }
.th-reveal-testimonials-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}
.th-reveal-testimonials-dot {
  appearance: none;
  width: 8px;
  height: 8px;
  padding: 0;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.18);
  cursor: pointer;
  transition: background 0.25s, transform 0.25s;
}
.th-reveal-testimonials-dot.is-active {
  background: var(--th-midnight);
  transform: scale(1.35);
}

/* 7 · 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;
  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);
}
.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: 88px; }

/* 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 0 22px;
  }
  .th-reveal-hero-copy,
  .th-reveal-hero-meta { padding: 0 20px; }
  .th-reveal-hero-visual { margin-top: 12px; }
  .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-tcard { flex: 0 0 74%; padding: 28px 20px; gap: 16px; }
  .th-reveal-testimonials-progress { width: 74%; }
  .th-reveal-product .th-reveal-testimonials .th-reveal-includes-head,
  .th-reveal-product .th-reveal-testimonials-nav {
    padding-left: 20px;
    padding-right: 20px;
  }
}
@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-hero { padding: 26px 0 20px; border-radius: var(--th-radius-md); }
  .th-reveal-hero-copy,
  .th-reveal-hero-meta { padding-left: 16px; padding-right: 16px; }
  .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-testimonials { --th-reveal-t-gap: 16px; }
  .th-reveal-tcard-quote { font-size: 16px; }

  .th-reveal-formula,
  .th-reveal-product { border-radius: var(--th-radius-md); }
  .th-reveal-formula-head { padding: 18px 20px; flex-wrap: wrap; gap: 16px; }
  .th-reveal .th-reveal-formula-meta { font-size: 9.5px; letter-spacing: 0.06em; }
  /* Four cells across a phone would squeeze the name, so they become one
     full-width strip under it. */
  .th-reveal-formula-vitals { width: 100%; grid-template-columns: repeat(4, 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: 22px 18px 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: 22px 18px 24px; }
  .th-reveal-formula-membership-head { margin-bottom: 18px; }

  /* Three columns on a phone: the band and the price column keep fixed
     widths and the ingredient column takes whatever's left, so long names
     wrap rather than squeezing the figures. */
  .th-reveal-formula-compare .th-reveal-formula-table-wrap,
  .th-reveal-formula-table-wrap { padding: 0; }
  .th-formula-table {
    --th-formula-col-ours: 96px;
    --th-formula-col-price: 84px;
  }
  .th-formula-table-cap { padding: 9px 8px 10px; }
  .th-formula-table-cap-brand { font-size: 11.5px; }
  .th-formula-table-cap-sub { font-size: 9px; letter-spacing: 0.06em; }
  .th-formula-table-cell { padding: 8px 0; }
  .th-formula-table-cell--name { padding-right: 12px; }
  .th-formula-table-cell--name .th-reveal-ing-name { font-size: 14px; }
  .th-formula-table-cell--ours { padding: 8px; }
  .th-formula-table-check { width: 19px; height: 19px; }
  .th-formula-table-price { font-size: 15px; }
  .th-formula-table-totals .th-formula-table-cell { padding-top: 15px; padding-bottom: 16px; }
  .th-formula-table-totals-label,
  .th-formula-table-total { font-size: 21px; }
  .th-formula-table-savings { margin-top: 7px; padding: 3px 8px; font-size: 10.5px; }

  .th-formula-table-ing { gap: 5px 8px; }
  .th-formula-table-ing-meta { gap: 6px; }
  .th-formula-table-details .th-reveal-why-body { padding: 4px 12px 14px; }
  .th-reveal-why-tag { padding: 3px 8px; font-size: 11px; }
  .th-reveal-why-toggle { width: 26px; height: 26px; }

  .th-reveal-formula-action { padding: 16px 18px 18px; }
  .th-reveal-formula-compare-alert { margin-bottom: 18px; }

  .th-reveal-price { border-radius: var(--th-radius-md); }
  .th-reveal-product .th-reveal-price--in-card { margin-top: 0; padding: 24px 18px 26px; }
  .th-reveal-product .th-reveal-testimonials .th-reveal-includes-head,
  .th-reveal-product .th-reveal-testimonials-nav {
    padding-left: 18px;
    padding-right: 18px;
  }
  .th-reveal-close { padding: 38px 22px 34px; border-radius: var(--th-radius-md); }
  .th-reveal-close-badges { gap: 10px 18px; margin-top: 22px; }

}

.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 72px; }
  .th-lgs-trust-footer { padding-left: 18px; padding-right: 18px; }

  /* 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: 32px; height: 32px; }
  .th-lgs-stepper-num { font-size: 13px; }
  .th-lgs-stepper-label { font-size: 12px; }
  .th-lgs-stepper-line { margin-top: 16px; }

  .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: 13px; }

  .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; }
}