/* =========================================================================
   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;
}

/* ---------- 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: 1280px;
  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 22px/1 var(--th-font-sans); letter-spacing: -0.01em; }
.th-wm-sup { font: 500 11px/1 var(--th-font-sans); letter-spacing: 0.06em; transform: translateY(-8px); 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: 24px;
  width: auto;
  flex-shrink: 0;
}
.th-brand-logo--sm { height: 20px; }
.th-brand-logo--md { height: 28px; }
.th-brand-logo--lg { height: 36px; }
.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;
  border-radius: var(--th-radius-sm);
  background:
    radial-gradient(ellipse 72% 58% at 50% 52%, rgba(22, 42, 44, 0.06), transparent 70%);
}
.th-status-jar-img {
  width: 100%;
  max-width: 132px;
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 24px rgba(22, 42, 44, 0.16));
  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-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); }

/* 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-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; }

/* 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 16rem wide
   (`md:w-64`), 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: 16rem; }
}
.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; }

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

/* Development-only step jumper — sticky so screens can be previewed without
   walking the whole funnel. Never rendered outside Rails.env.development. */
.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: 34px 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);
  }
}

/* Spans the viewport rather than the narrow intake column, so the brand sits
   at the true top-left and sign-in at the true top-right. */
.th-lgs-topbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  /* Matches the questionnaire's widest breakout so the bar never extends past
     the widest thing on the page. */
  max-width: 1040px;
  margin: 0 auto;
  padding: 26px 32px;
  box-sizing: border-box;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.55s var(--th-ease-out), transform 0.55s var(--th-ease-out);
}
.th-lgs.is-ready .th-lgs-topbar {
  opacity: 1;
  transform: none;
}
.th-lgs-topbar .th-brand-logo { height: clamp(27px, 3.2vw, 35px); }

.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);
}
.th-lgs-topbar-signout,
.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-signout:hover,
.th-lgs-topbar-signin:hover {
  color: var(--th-fg);
  background: color-mix(in srgb, var(--th-fg) 6%, transparent);
}
.th-lgs-topbar-signout svg,
.th-lgs-topbar-signin svg,
.th-lgs-topbar-signout i,
.th-lgs-topbar-signin i {
  width: 16px;
  height: 16px;
}
@media (max-width: 640px) {
  .th-lgs-topbar { padding: 20px 20px; }
  .th-lgs-topbar-email { max-width: min(48vw, 180px); font-size: 12px; }
}

/* 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);
  }
}

.th-lgs-headline {
  font: 400 clamp(30px, 8.2vw, 48px)/1.1 var(--th-font-sans);
  letter-spacing: -0.02em;
  color: var(--th-midnight);
  text-align: center;
  margin: 0 0 32px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s var(--th-ease-out) 0.08s, transform 0.6s var(--th-ease-out) 0.08s;
}
.th-lgs-headline em {
  font-family: var(--th-font-display-italic);
  font-style: italic;
  font-weight: 400;
  color: var(--th-midnight);
}
.th-lgs.is-ready .th-lgs-headline {
  opacity: 1;
  transform: none;
}

/* Pairs with .th-lgs-lead — pulls the headline's bottom margin in so the two
   read as one block instead of two stacked statements. */
.th-lgs-headline--tight { margin-bottom: 14px; }

.th-lgs-lead {
  font: 400 17px/1.55 var(--th-font-sans);
  color: var(--th-fg-2);
  text-align: center;
  max-width: 540px;
  margin: 0 auto 40px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s var(--th-ease-out) 0.16s, transform 0.6s var(--th-ease-out) 0.16s;
}
.th-lgs.is-ready .th-lgs-lead {
  opacity: 1;
  transform: none;
}

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

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

/* Lightweight one-line divider label — used to group fields within a step
   without the weight of a full eyebrow + title + paragraph section-head. */
.th-lgs-subhead {
  font: 500 18px/1.25 var(--th-font-sans);
  letter-spacing: -0.005em;
  color: var(--th-midnight);
  margin: 0 0 20px;
}

.th-lgs-value {
  display: grid;
  grid-template-columns: 118px 1fr;
  gap: 24px;
  align-items: center;
  padding: 24px;
  border-radius: var(--th-radius-md);
  background: var(--th-bone);
  border: 1px solid var(--th-border-1);
  margin: 0 0 8px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.65s var(--th-ease-out) 0.24s, transform 0.65s var(--th-ease-out) 0.24s;
}
.th-lgs.is-ready .th-lgs-value {
  opacity: 1;
  transform: none;
}

.th-lgs-value-visual {
  aspect-ratio: 1;
  border-radius: var(--th-radius-sm);
  background:
    linear-gradient(160deg, var(--th-midnight) 0%, #2a4548 55%, #3d5a4c 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--th-snow);
  box-shadow: var(--th-shadow-card);
}
.th-lgs-value-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}
.th-lgs-value-mark .th-eyebrow {
  color: rgba(255, 255, 255, 0.65);
  font-size: 10px;
}
.th-lgs-value-mark strong {
  font: 400 34px/1 var(--th-font-sans);
  letter-spacing: -0.03em;
}
.th-lgs-value-mark span:last-child {
  font: 400 12.5px/1.2 var(--th-font-sans);
  color: rgba(255, 255, 255, 0.7);
}
.th-lgs-value-title {
  font: 500 17px/1.2 var(--th-font-sans);
  color: var(--th-midnight);
  margin: 0 0 14px;
}
.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);
}

/* Numbered variant — these are sequential steps, not included features, so a
   checkmark would misread as "you already have this". */
.th-lgs-checklist--steps { counter-reset: th-lgs-step; }
.th-lgs-checklist--steps li { counter-increment: th-lgs-step; }
.th-lgs-checklist--steps li::before {
  content: counter(th-lgs-step) ".";
  flex: 0 0 16px;
  font: 500 13px/1.5 var(--th-font-mono);
  color: var(--th-fg-3);
}

.th-lgs-rule {
  border: 0;
  border-top: 1px solid var(--th-border-1);
  margin: 12px 0 40px;
}

.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-lgs-success { margin-top: 16px; }
.th-lgs-success[hidden] { display: none !important; }

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

/* ---------- Labs get-started: intake wizard (steps, transitions) ------- */
/* 4-step indicator — persistent across every screen, tracks the journey at a
   glance instead of a plain progress bar. */
.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.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.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;
}

/* 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; }
.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-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 var(--th-font-sans);
  letter-spacing: 0.01em;
  vertical-align: middle;
}
.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 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-badges--intro {
  margin: 18px 0 20px;
}
.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, so it
   reads as a landing page: a dark reveal, one value card (mix + shelf
   compare + subscription inclusions), then evidence / proof / price /
   objections. `.th-reveal-*` covers both halves — the
   injected formula partial and the static sections in show.html.erb.
   ======================================================================= */
/* 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; }

/* 1 · The reveal ------------------------------------------------------ */
.th-reveal-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34%;
  gap: 12px;
  align-items: center;
  padding: 44px 44px 46px;
  border-radius: var(--th-radius-lg);
  background:
    radial-gradient(ellipse 70% 90% at 88% 20%, rgba(203, 209, 183, 0.24), transparent 62%),
    linear-gradient(158deg, var(--th-midnight) 0%, #1b3335 52%, #24403c 100%);
  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 { position: relative; z-index: 1; min-width: 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 {
  font: 400 clamp(34px, 5.4vw, 58px)/1.03 var(--th-font-sans);
  letter-spacing: -0.028em;
  color: var(--th-snow);
  margin: 20px 0 16px;
  text-wrap: balance;
}
.th-reveal-hero-title em { color: var(--th-moss); }

/* The three figures the old stat tiles carried, as blocks: figure first, then
   what it counts. They land one after another once the reveal has settled. */
.th-reveal-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  max-width: 400px;
  margin: 0 0 20px;
}
.th-reveal-hero-stat {
  position: relative;
  overflow: hidden;
  flex: 1 1 102px;
  min-width: 0;
  padding: 11px 12px 10px;
  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-figure,
.th-reveal-hero-stat-label { position: relative; display: block; }
.th-reveal-hero-stat-figure {
  font: 400 25px/1 var(--th-font-sans);
  letter-spacing: -0.035em;
  color: var(--th-moss);
}
.th-reveal-hero-stat-label {
  margin-top: 6px;
  font: 500 10.5px/1.35 var(--th-font-sans);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

.th-reveal-hero-lead {
  font: 400 17px/1.55 var(--th-font-sans);
  color: rgba(255, 255, 255, 0.72);
  max-width: 42ch;
  margin: 0 0 32px;
  text-wrap: pretty;
}

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

.th-reveal-trust-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
}
.th-reveal-trust-inline li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 400 13px/1 var(--th-font-sans);
  color: rgba(255, 255, 255, 0.68);
}
.th-reveal-trust-inline svg { color: var(--th-moss); flex-shrink: 0; }

.th-reveal-hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  min-height: 260px;
}
.th-reveal-hero-visual::before {
  content: "";
  position: absolute;
  width: 118%;
  aspect-ratio: 1;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(243, 238, 231, 0.2), transparent 66%);
}
.th-reveal-hero .th-reveal-capsule {
  position: relative;
  width: 152px;
  max-width: 152px;
  height: auto;
  display: block;
  transform: rotate(15deg);
  filter: drop-shadow(0 22px 44px rgba(0, 0, 0, 0.42));
  animation: th-reveal-float 5.5s var(--th-ease-out) infinite alternate;
}
@keyframes th-reveal-float {
  from { transform: rotate(15deg) translateY(-6px); }
  to   { transform: rotate(15deg) translateY(8px); }
}

/* 2 · The value card -------------------------------------------------- */
/* The highlight of the step: formula identity → shelf comparison →
   subscription inclusions → CTA. Floating shadow (same weight as the hero)
   so it reads as the one thing on the page everything else supports. */
.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);
}
.th-reveal-formula-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 28px 32px;
  background: var(--th-midnight);
  color: var(--th-snow);
}
.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);
}
.th-reveal-formula-seal {
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--th-moss);
  border: 1px solid rgba(203, 209, 183, 0.32);
  background: rgba(203, 209, 183, 0.1);
}

/* 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 0; }
.th-reveal-formula-compare-alert { margin-bottom: 22px; }
.th-reveal-formula-compare-alert-link {
  color: inherit;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgba(22, 42, 44, 0.35);
  text-underline-offset: 3px;
}
.th-reveal-formula-compare-alert-link:hover {
  text-decoration-color: var(--th-midnight);
}
/* 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);
}

.th-reveal-formula-perks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  list-style: none;
  margin: 22px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--th-border-1);
}
.th-reveal-formula-perks li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 500 12.5px/1.3 var(--th-font-sans);
  color: var(--th-fg-2);
}
.th-reveal-formula-perks svg {
  flex-shrink: 0;
  color: var(--th-good-fg);
}

/* Ingredient identity — reused in the formula table above and the evidence
   list below it, 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);
}

/* The reading is the only thing that opens the modal — a quiet full-width
   row with an underlined marker name. Status stays as a small chip. */
.th-reveal-because-lab {
  appearance: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  width: 100%;
  padding: 8px 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-because-lab:hover { background: var(--th-sand); }
.th-reveal-because-marker {
  font: 500 13.5px/1.45 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;
  transition: text-decoration-color var(--th-t-base) var(--th-ease-out);
}
.th-reveal-because-lab:hover .th-reveal-because-marker {
  text-decoration-color: var(--th-midnight);
}
.th-reveal-because-lab:focus-visible {
  outline: 2px solid var(--th-midnight);
  outline-offset: 2px;
}
.th-reveal .th-reveal-because-value { font-size: 13px; color: var(--th-fg-2); }
.th-reveal-because-lab .th-status { margin-left: auto; }

/* 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 {
  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: 156px; padding: 0; text-align: center; }
.th-formula-table-th--price { width: 132px; text-align: right; }

/* 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);
}
/* Same row highlight as the evidence accordion, so scanning the table and
   scanning the reasons behave alike. The band keeps its tint, deepened. */
.th-formula-table-row:hover .th-formula-table-cell--name,
.th-formula-table-row:hover .th-formula-table-cell--price { background: var(--th-bone); }
.th-formula-table-row:hover .th-formula-table-cell--ours {
  background: rgba(83, 133, 116, 0.13);
}
.th-formula-table-cell--name {
  padding-right: 20px;
  text-align: left;
}
.th-formula-table-cell--name .th-reveal-ing-num,
.th-formula-table-cell--name .th-reveal-ing-name {
  display: inline;
}
.th-formula-table-cell--name .th-reveal-ing-num {
  margin-right: 10px;
  padding-top: 0;
  vertical-align: baseline;
}
.th-formula-table-cell--name .th-reveal-ing-name {
  font-weight: 400;
  line-height: 1.35;
}

/* 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-cell--price { text-align: right; 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-est {
  display: inline-block;
  margin-left: 5px;
  padding: 1px 5px;
  border-radius: var(--th-radius-pill);
  background: rgba(22, 42, 44, 0.06);
  font: 500 9.5px/1.3 var(--th-font-sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--th-fg-3);
  vertical-align: middle;
}
.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-row:last-child .th-formula-table-cell { border-bottom: 0; }
.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;
}
/* Retail total is centered in the column, then nudged right so it sits
   under the per-ingredient prices. The nudge is on the inner stack so the
   cell's top rule stays aligned with the rest of the totals row. */
.th-formula-table-totals .th-formula-table-cell--price {
  text-align: center;
  vertical-align: top;
}
.th-formula-table-totals-retail {
  display: inline-block;
  transform: translateX(14px);
}
.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: 26px 32px 28px;
  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; }
/* Runs the full width of the card — it's a disclosure about the whole table
   above it, not a caption hanging off the CTA. */
.th-reveal-formula-fine {
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--th-border-1);
  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 4px;
  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 13.5px/1.5 var(--th-font-sans);
  color: var(--th-fg-2);
}
.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: 22px; height: 22px; object-fit: contain; }

/* 3c · Why every ingredient is here — accordion evidence. Collapsed rows
   keep the section scannable; open one for the reading or answer behind it. */
.th-reveal-why {
  padding: 30px 32px 12px;
  border-radius: var(--th-radius-lg);
  background: var(--th-snow);
  border: 1px solid var(--th-border-1);
  scroll-margin-top: 24px;
}
.th-reveal-why-list { margin-top: 18px; }
.th-reveal-why-item {
  border-top: 1px solid var(--th-border-1);
  transition: background var(--th-t-base) var(--th-ease-out);
}
.th-reveal-why-item:hover { background: rgba(247, 245, 241, 0.75); }
.th-reveal-why-item[open] { background: var(--th-bone); }
.th-reveal-why-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
}
.th-reveal-why-summary::-webkit-details-marker { display: none; }
.th-reveal-why-summary-main {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
}
.th-reveal-why-summary-main .th-reveal-ing-num {
  padding-top: 0;
  transition: color var(--th-t-base) var(--th-ease-out);
}
.th-reveal-why-item[open] .th-reveal-ing-num { color: var(--th-good-fg); }
.th-reveal-why-summary-meta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.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; }

/* The plus sits in its own well so the row has an obvious target. */
.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-item:hover .th-reveal-why-toggle { background: var(--th-snow); }
.th-reveal-why-item[open] .th-reveal-why-toggle {
  transform: rotate(45deg);
  background: var(--th-midnight);
  border-color: var(--th-midnight);
  color: var(--th-snow);
}
.th-reveal-why-item[open] .th-reveal-why-summary { padding-bottom: 8px; }
.th-reveal-why-body {
  padding: 0 14px 16px 48px;
  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);
}
.th-reveal-why .th-reveal-because {
  margin-top: 0;
  padding-left: 0;
  border-left: 0;
  gap: 8px;
}
.th-reveal-why .th-reveal-because-answer {
  padding: 2px 2px 2px 12px;
  border-left: 2px solid var(--th-border-1);
}

/* 4 · What's included — photo cards (now nested in the value card) --- */
.th-reveal-includes-head { max-width: 620px; margin-bottom: 26px; }
/* The evidence header's instruction line belongs to the list below it, so it
   runs the panel's width rather than sitting in a measured column. */
.th-reveal-why .th-reveal-includes-head { max-width: none; margin-bottom: 18px; }
.th-reveal-why-alert { margin-bottom: 8px; }
.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);
}
.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(24px, 2.7vw, 32px)/1.18 var(--th-font-sans);
  letter-spacing: -0.022em;
  color: var(--th-snow);
  max-width: 20ch;
}
.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);
}
.th-reveal-price-figure {
  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;
  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 .th-reveal-price-perday {
  margin-top: 13px;
  padding: 5px 11px;
  border-radius: var(--th-radius-pill);
  background: rgba(203, 209, 183, 0.14);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--th-moss);
}
.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-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-stars {
  display: inline-flex;
  gap: 5px;
  color: var(--th-midnight);
}
.th-reveal-tcard-stars svg { width: 18px; height: 18px; }
.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-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-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 var(--th-font-sans);
  color: var(--th-fg-2);
  white-space: nowrap;
}
.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: grid;
  place-items: 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);
}
.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 14px;
}
.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); }

/* 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; padding: 34px 26px 32px; }
  .th-reveal-hero-visual { order: -1; min-height: 0; margin-bottom: 4px; }
  .th-reveal-hero .th-reveal-capsule { width: 96px; max-width: 96px; }
  .th-reveal-include-cards { grid-template-columns: 1fr; gap: 14px; }
  .th-reveal-price { grid-template-columns: 1fr; gap: 26px; padding: 30px 26px; }
  .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%; }
}
@media (max-width: 640px) {
  .th-lgs-screen.th-reveal.is-active { gap: 16px; }
  .th-reveal-hero { padding: 28px 20px 26px; border-radius: var(--th-radius-md); }
  .th-reveal-hero-stats { gap: 8px; margin-bottom: 18px; }
  .th-reveal-hero-stat { flex-basis: 84px; padding: 10px 10px 9px; }
  .th-reveal-hero-stat-figure { font-size: 22px; }
  .th-reveal-hero-stat-label { font-size: 9.5px; letter-spacing: 0.05em; margin-top: 5px; }
  .th-reveal-hero-lead { font-size: 15.5px; margin-bottom: 26px; }
  .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-trust-inline { gap: 8px 14px; margin-top: 14px; }
  .th-reveal-trust-inline li { font-size: 12.5px; }
  .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 { border-radius: var(--th-radius-md); }
  .th-reveal-formula-head { padding: 22px 20px; }
  .th-reveal .th-reveal-formula-meta { font-size: 9.5px; letter-spacing: 0.06em; }
  .th-reveal-formula-seal { display: none; }
  .th-reveal-because { padding-left: 12px; }
  .th-reveal-ing-num { display: none; }

  .th-reveal-formula-compare { padding: 22px 18px 0; }
  .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; }
  .th-reveal-formula-perks { gap: 8px 14px; margin-top: 18px; padding-top: 16px; }
  .th-reveal-formula-perks li { font-size: 12px; }

  /* 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--ours { width: 96px; }
  .th-formula-table-th--price { width: 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; }
  /* The pill qualifies every figure now, so a phone can't just drop it the way
     it could when it marked a handful of exceptions. Stacked under the price
     rather than beside it: this column is a fixed 84px and doesn't wrap. */
  .th-formula-table-est { display: block; width: fit-content; margin: 3px 0 0 auto; }
  .th-formula-table-totals .th-formula-table-cell { padding-top: 15px; padding-bottom: 16px; }
  .th-formula-table-totals-retail { transform: translateX(8px); }
  .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-reveal-formula-action { padding: 22px 18px 24px; }

  .th-reveal-why { padding: 24px 20px 10px; border-radius: var(--th-radius-md); }
  .th-reveal-why-summary { padding: 11px 10px; gap: 10px; }
  .th-reveal-why-body { padding: 0 10px 14px; }
  /* The tag text is the row's only summary once the numeral is gone, so it
     shrinks to icon-and-count rather than dropping out. */
  .th-reveal-why-tag { padding: 3px 8px; font-size: 11px; }
  .th-reveal-why-toggle { width: 26px; height: 26px; }
  .th-reveal-formula-compare-alert { margin-bottom: 18px; }

  .th-reveal-price { border-radius: var(--th-radius-md); }
  .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: 18px; }
  .th-lgs-page { padding: 26px 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-headline { margin-bottom: 24px; }
  .th-lgs-headline--tight { margin-bottom: 12px; }
  .th-lgs-lead { font-size: 16px; margin-bottom: 30px; }
  .th-lgs-section-head { margin-bottom: 24px; }
  .th-lgs-subhead { font-size: 17px; margin-bottom: 16px; }
  .th-lgs-rule { margin: 10px 0 30px; }
  .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; }

  /* Stays a row rather than stacking — a full-width square eats the fold. */
  .th-lgs-value {
    grid-template-columns: 88px 1fr;
    gap: 16px;
    padding: 18px;
  }
  .th-lgs-value-title { font-size: 16px; margin-bottom: 10px; }
  .th-lgs-value-mark strong { font-size: 26px; }
  .th-lgs-value-mark .th-eyebrow { font-size: 9px; }
  .th-lgs-value-mark span:last-child { font-size: 11px; }
  .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-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; }
}