/* =============================================================================
   FITNIZER — design system. One theme since 2026-10-09 (JDB: "keep WHITE as
   the canonical background"): the light Institute print brand below. The navy
   dark theme and its toggle were removed. Most rules read semantic tokens.
   ============================================================================= */
:root {
  /* brand-fixed */
  --navy: #0c1d2c;          /* primary ink */
  --navy-light: #2a3e52;
  --blush: #c4877a;         /* terracotta — "before/original" */
  --teal: #0a8b94;          /* accent fills (buttons, stripes) */
  --teal-bright: #5fd0c5;   /* accent on dark */
  --rose: #b06a7b;

  /* themeable surfaces / text */
  --canvas: #ffffff;        /* app background: white (JDB 2026-10-09), cards keep their borders */
  --white: #ffffff;         /* card surface */
  --card-solid: #ffffff;
  --surface-tint: #f7f8f9;  /* subtle raised surface */
  --gray: #4d5d6a;          /* secondary text */
  --line: #e4e7ea;          /* borders */
  --line-strong: rgba(12, 29, 44, 0.14);

  /* semantic helpers */
  --ink: var(--navy);
  --good: var(--accent-on);
  --bad: var(--rose);
  --accent-on: #07666d;     /* accent TEXT/icons (6.4:1 on canvas — AA) */
  --accent-strong: #076b72; /* accent FILL that carries white text (6.3:1) */
  --accent-contrast: #ffffff; /* text on --accent-strong / --btn-bg */
  --danger: #a04b60;        /* error text (5.4:1 on canvas) — NOT blush: terracotta means "before" */
  --warning: #b8860b;       /* stars / caution glyphs (3.25:1 UI on white) */
  --focus-ring: rgba(10, 139, 148, 0.2);
  --accent-tint: rgba(10, 139, 148, 0.12);
  --btn-bg: #0c1d2c;        /* primary button fill */
  --ghost-border: #0c1d2c;  /* secondary button border */

  --radius: 0px;            /* LIGHT = crisp print geometry */
  --shadow: 0 1px 3px rgba(12, 29, 44, 0.05);

  --font-head: "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-logo: "Sora", "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}


* { box-sizing: border-box; }

/* Keyboard focus — visible on every interactive element, in both themes. */
button:focus-visible,
a:focus-visible,
summary:focus-visible,
select:focus-visible,
input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--accent-on);
  outline-offset: 2px;
}

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--canvas);
  color: var(--ink);
  line-height: 1.55;
}

/* ---------- header ---------- */
.site-header {
  padding: 26px 20px 16px;
  text-align: center;
  border-bottom: 1px solid var(--line);
  background: var(--canvas);
}
.app-logo { display: inline-flex; align-items: center; gap: 10px; }
.app-logo-icon {
  width: 38px;
  height: 38px;
  background: #0c1d2c;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.app-logo-icon svg { width: 26px; height: 26px; }
.app-logo-word {
  font-family: var(--font-logo);
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: 0.24em;
  color: var(--navy);
}
.eyebrow {
  margin: 10px 0 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--accent-on);
}

/* ---------- layout ---------- */
.container { max-width: 880px; margin: 0 auto; padding: 24px 20px 48px; }
.results { margin-top: 22px; display: grid; gap: 18px; }

/* Background wallpaper removed — motion now appears only during "Fitnizing". */

/* ---------- home hero (text over the wallpaper) ---------- */
.hero-band { padding: 6px 0 2px; margin-bottom: 4px; }
.hero-eyebrow { color: var(--accent-on); font-weight: 700; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; margin: 0 0 6px; }
.hero-h1 { font-family: var(--font-head); font-weight: 700; font-size: 28px; line-height: 1.12; color: var(--navy); margin: 0; letter-spacing: -0.01em; }
.hero-subline { color: var(--gray); font-size: 0.95rem; margin: 8px 0 16px; }

/* ---------- calories-saved equivalences ---------- */
.savings-card { text-align: center; }
.savings-sub { color: var(--gray); font-size: 0.85rem; margin: 6px 0 12px; }
.savings-eqs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.save-eq { background: var(--accent-tint); color: var(--accent-on); border-radius: var(--radius); padding: 7px 12px; font-size: 0.82rem; font-weight: 600; }
.save-eq b { font-weight: 800; }

/* "See the recipe" disclosure button */
.see-recipe-btn { display: block; width: 100%; margin-top: 2px; }

/* My-recipes header row (title + New recipe) */
.hist-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.hist-head h2 { margin: 0; }
.hist-head h2::after { display: none; }

/* ---------- favourite chips ---------- */
.fav-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--gray); margin: 18px 0 10px; }
.fav-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.recipe-pack { display: grid; gap: 8px; }
.recipe-pack .fav-chip span { line-height: 1.25; }
.fav-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  color: var(--navy);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  text-align: left;
  box-shadow: var(--shadow);
}
.fav-chip svg { width: 18px; height: 18px; color: var(--accent-on); flex: 0 0 auto; }

/* ---------- sign-in button (clean, on-brand) ---------- */
.btn-signin {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--ghost-border);
  border-radius: var(--radius);
  padding: 8px 14px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
  cursor: pointer;
}
.btn-signin:hover { background: var(--surface-tint); }
.btn-signin svg { width: 15px; height: 15px; color: var(--accent-on); }

/* ---------- compact pillar strip ---------- */
.pillar-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin: 16px 0 4px; }
.pillar-mini { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--gray); }
.pillar-mini svg { width: 16px; height: 16px; color: var(--accent-on); flex: 0 0 auto; }
.pillar-mini strong { color: var(--navy); font-weight: 700; }

/* ---------- disclaimer box ---------- */
.disclaimer-box { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-tint); padding: 12px 16px; max-width: 600px; margin: 0 auto 16px; }
.disclaimer-box p { margin: 0; font-size: 0.74rem; line-height: 1.5; color: var(--gray); }

/* faster pulse for the in-app "Fitnizing" loader (elevated heart-rate feel) */
.ekg-fast .ekg-line { animation-duration: 0.5s; }

/* ---------- cards ---------- */
.input-card,
.block {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}
.block h2 { margin: 0; font-family: var(--font-head); font-weight: 700; font-size: 1.25rem; color: var(--navy); }
.block h2::after { content: ""; display: block; width: 14px; height: 14px; background: var(--accent-on); margin: 10px 0 14px; }
.block .recipe-name { color: var(--gray); font-size: 0.9rem; margin: 0 0 16px; }

/* ---------- P1 fixes (design review v3) ---------- */
/* Fix 1: feature-discovery strip on the Recipes tab */
.feature-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 16px; }
@media (max-width: 560px) { .feature-strip { grid-template-columns: 1fr; } }
.feat-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: var(--accent-tint);
  border: 1px solid var(--accent-on);
  border-radius: var(--radius);
  color: var(--ink);
  font-family: var(--font-body); font-size: 0.9rem; text-align: left;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.feat-chip:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); }
.feat-chip strong { color: var(--accent-on); }
.feat-new {
  flex: 0 0 auto;
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.12em;
  background: var(--accent-strong); color: var(--accent-contrast);
  padding: 3px 8px; border-radius: 999px;
}
.feat-text { flex: 1; }
.feat-arrow { flex: 0 0 auto; color: var(--accent-on); font-weight: 700; }

/* Fix 2: the brand h2 accent square reads as a glitch on the v3 app cards —
   keep it on the classic recipe blocks, hide it on Plan/Progress/GLP-1. */
#planRoot .block h2::after,
#progressRoot .block h2::after,
#glp1Root .block h2::after,
.notice-card h2::after,
.score-card h2::after { display: none; }
#planRoot .block h2,
#progressRoot .block h2,
#glp1Root .block h2,
.notice-card h2 { margin-bottom: 12px; }

/* Fix 3: friendly signed-out call-to-action card */
.signin-card { border-left: 3px solid var(--accent-on); }
.signin-cta { display: inline-flex; align-items: center; gap: 8px; margin: 10px 0 12px; text-decoration: none; }

/* Fix 4: cross-tab nudges */
.xnudge {
  margin: 14px 0 0; padding: 11px 14px;
  border: 1px dashed var(--accent-on); border-radius: var(--radius);
  background: var(--accent-tint); font-size: 0.92rem; color: var(--ink);
}

/* ---------- form ---------- */
.field-label { display: block; font-weight: 700; margin-bottom: 8px; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--navy); }
textarea::placeholder, .url-row input::placeholder {
  color: #7d93a1;
  color: color-mix(in srgb, var(--navy), transparent 30%);
  opacity: 1;
}
textarea {
  width: 100%;
  resize: vertical;
  padding: 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-size: 0.95rem;
  font-family: var(--font-body);
  background: var(--canvas);
  color: var(--ink);
}
textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--focus-ring); }
.url-row { display: flex; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.url-row input { flex: 1 1 220px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius); font-family: var(--font-body); font-size: 0.92rem; color: var(--ink); background: var(--canvas); }
.url-row input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--focus-ring); }
.url-hint, .signin-hint { font-size: 0.8rem; color: var(--gray); }

.button-row { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.btn {
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 13px 22px;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.15s ease, background 0.15s ease;
}
.btn-primary { background: var(--btn-bg); color: var(--accent-contrast); letter-spacing: 0.04em; }
.btn-primary:hover { filter: brightness(1.08); }
.btn-ghost { background: transparent; color: var(--navy); border-color: var(--ghost-border); }
.btn-ghost:hover { background: var(--surface-tint); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.status { margin: 14px 0 0; font-size: 0.9rem; min-height: 1.2em; color: var(--gray); }
.status.error { color: var(--danger); font-weight: 700; }

/* ---------- substitutions ---------- */
.sub-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.sub-item { padding: 12px 14px; border: 1px solid var(--line); border-left: 3px solid var(--teal); border-radius: var(--radius); background: var(--surface-tint); }
.sub-swap { font-weight: 600; color: var(--navy); }
.sub-swap .arrow { color: var(--accent-on); margin: 0 8px; font-weight: 700; }
.sub-reason { color: var(--gray); font-size: 0.88rem; margin-top: 4px; }

/* ---------- macros (saved-recipe view) ---------- */
.macro-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.macro-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; background: var(--white); }
.macro-card .macro-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--gray); }
.macro-values { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; }
.macro-before { color: var(--gray); text-decoration: line-through; font-size: 0.95rem; }
.macro-after { font-family: var(--font-head); font-size: 1.5rem; font-weight: 700; color: var(--navy); }
.macro-unit { font-size: 0.78rem; color: var(--gray); }
.macro-delta { margin-top: 6px; font-size: 0.85rem; font-weight: 700; }
.macro-delta.good { color: var(--good); }
.macro-delta.bad { color: var(--bad); }
.macro-delta.flat { color: var(--gray); }

/* ---------- provenance bar ---------- */
.provenance { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.prov-badge { background: var(--accent-tint); color: var(--accent-on); font-weight: 700; font-size: 0.8rem; padding: 5px 12px; border-radius: var(--radius); white-space: nowrap; }
.prov-note { margin: 0; color: var(--gray); font-size: 0.8rem; flex: 1 1 240px; }

/* ---------- recipe comparison (saved view) ---------- */
.recipe-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.recipe-col h3 { font-family: var(--font-head); font-size: 0.95rem; margin: 0 0 8px; color: var(--navy); }
.recipe-col.optimized h3 { color: var(--accent-on); }
.recipe-text { white-space: pre-wrap; font-size: 0.9rem; background: var(--surface-tint); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; margin: 0; font-family: var(--font-body); color: var(--navy); }

/* ---------- ingredient sources table ---------- */
.edit-hint { font-size: 0.85rem; color: var(--gray); margin: 0 0 10px; }
.ing-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 0.88rem; }
.ing-table td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: middle; color: var(--navy); }
.ing-table td.num { text-align: right; color: var(--gray); white-space: nowrap; }
.tag { display: inline-block; font-size: 0.7rem; font-weight: 700; padding: 2px 9px; white-space: nowrap; letter-spacing: 0.04em; border-radius: var(--radius); }
.tag-db { background: var(--accent-tint); color: var(--accent-on); }
.tag-est { background: var(--surface-tint); color: var(--danger); }
.grams-input { width: 64px; padding: 4px 7px; border: 1px solid var(--line-strong); border-radius: var(--radius); font: inherit; font-size: 0.86rem; text-align: right; background: var(--canvas); color: var(--navy); }
.grams-input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--focus-ring); }
details { margin-top: 12px; }
summary { cursor: pointer; font-weight: 700; font-size: 0.92rem; padding: 4px 0; color: var(--navy); }
.btn-link { background: none; border: none; color: var(--accent-on); font: inherit; font-weight: 700; cursor: pointer; padding: 0; text-decoration: underline; }
.btn-link:hover { color: var(--navy); }

/* ---------- result hero + score + table (M1) ---------- */
.result-head .result-name { margin: 6px 0 0; font-family: var(--font-head); font-weight: 700; font-size: 1.7rem; color: var(--navy); }
.result-head .result-name::after { display: none; }
.fitnized-badge { display: inline-block; background: var(--accent-strong); color: var(--accent-contrast); font-weight: 700; font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; padding: 4px 12px; border-radius: var(--radius); }
.result-sub { margin: 8px 0 0; color: var(--gray); font-size: 0.95rem; }

.hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hero-stat { background: var(--white); border: 1px solid var(--line); border-left: 3px solid var(--teal); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; }
.hero-stat-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--gray); }
.hero-stat-value { font-family: var(--font-head); font-weight: 700; font-size: 2.6rem; line-height: 1; color: var(--navy); margin-top: 10px; }
.hero-stat-unit { font-family: var(--font-body); font-size: 0.9rem; font-weight: 500; color: var(--gray); margin-left: 5px; }
.hero-stat-drop { display: inline-block; margin-top: 10px; font-weight: 700; font-size: 0.82rem; color: var(--accent-on); background: var(--accent-tint); padding: 3px 9px; border-radius: var(--radius); }
.hero-stat-was { margin-top: 6px; font-size: 0.8rem; color: var(--gray); text-decoration: line-through; }

.score-card { border-left-color: var(--teal); background: var(--accent-tint); text-align: center; }
.score-eyebrow { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; color: var(--accent-on); }
.score-value { font-family: var(--font-head); font-weight: 700; font-size: 3rem; line-height: 1; color: var(--navy); margin-top: 10px; }
.score-unit { display: block; font-family: var(--font-body); font-size: 0.78rem; font-weight: 500; color: var(--gray); margin-top: 4px; }
.score-label { margin-top: 10px; font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; color: var(--accent-on); }
.score-was { margin-top: 4px; font-size: 0.82rem; color: var(--gray); }
.score-disc { margin: 14px auto 0; max-width: 440px; font-size: 0.72rem; color: var(--gray); line-height: 1.45; }

.macro-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; margin-top: 4px; }
.macro-table th { text-align: right; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gray); padding: 0 8px 10px; border-bottom: 1px solid var(--line); }
.macro-table th:first-child { text-align: left; }
.macro-table th:nth-child(2) { color: var(--blush); }
.macro-table th:last-child { color: var(--accent-on); }
.macro-table td { padding: 11px 8px; border-bottom: 1px solid var(--line); color: var(--navy); }
.macro-table td.mt-name { font-weight: 600; }
.macro-table td.mt-orig { text-align: right; color: var(--gray); text-decoration: line-through; }
.macro-table td.mt-fit { text-align: right; font-weight: 700; color: var(--navy); }
.macro-table .mt-unit { font-weight: 500; font-size: 0.78rem; color: var(--gray); }
.macro-table tr:last-child td { border-bottom: none; }

/* 3 pillars */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.pillar { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; background: var(--white); border: 1px solid var(--line); border-top: 2px solid var(--teal); border-radius: var(--radius); padding: 14px 10px; box-shadow: var(--shadow); }
.pillar-icon { width: 24px; height: 24px; color: var(--accent-on); }
.pillar-title { font-weight: 700; color: var(--navy); font-size: 0.82rem; }
.pillar-sub { color: var(--gray); font-size: 0.74rem; }
.trust-line { margin-top: 16px; text-align: center; font-size: 0.82rem; color: var(--gray); }

/* ---------- M2: recipe toggle, ingredient list, notice ---------- */
.recipe-toggle { display: inline-flex; background: var(--surface-tint); border-radius: var(--radius); padding: 3px; margin: 4px 0 16px; }
.rtoggle { background: transparent; color: var(--gray); border: none; padding: 8px 22px; border-radius: var(--radius); font-family: var(--font-body); font-weight: 700; font-size: 0.85rem; cursor: pointer; }
.rtoggle.on { background: var(--white); color: var(--accent-on); box-shadow: var(--shadow); }
.recipe-panel h3 { font-family: var(--font-head); font-size: 0.95rem; color: var(--navy); margin: 18px 0 8px; }
.recipe-panel h3:first-child { margin-top: 0; }
.ing-list { list-style: none; padding: 0; margin: 0; }
.ing-li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 0.9rem; color: var(--navy); }
.ing-li:last-child { border-bottom: none; }
.ing-grams { color: var(--gray); font-size: 0.85rem; }
.notice-card { border-left-color: var(--blush); }

/* ---------- email gate ---------- */
.hidden { display: none; }
.hp-field { position: absolute; left: -9999px; top: -9999px; height: 1px; width: 1px; opacity: 0; }
.gate-card { border-left-color: var(--teal); margin-top: 20px; }
.gate-title { margin: 0 0 6px; font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; color: var(--navy); }
.gate-sub { margin: 0 0 14px; color: var(--gray); font-size: 0.92rem; }
.gate-row { display: flex; gap: 10px; flex-wrap: wrap; }
.gate-row input[type="email"] { flex: 1 1 240px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius); font-family: var(--font-body); font-size: 0.95rem; color: var(--ink); background: var(--canvas); }
.gate-row input[type="email"]:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--focus-ring); }
.gate-consent { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; font-size: 0.82rem; color: var(--gray); cursor: pointer; }
.gate-consent input { margin-top: 3px; accent-color: var(--teal); }

/* ---------- footer ---------- */
.site-footer { text-align: center; padding: 28px 20px 44px; }
.tagline { font-style: italic; color: var(--gray); font-size: 1rem; margin: 0 0 12px; }
.footer-note { color: var(--gray); font-size: 0.8rem; max-width: 560px; margin: 0 auto 10px; }
.footer-meta { color: var(--navy); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; margin: 0; }

/* ---------- loading dots (legacy) ---------- */
.loading::after { content: " "; animation: dots 1.2s steps(4, end) infinite; }
@keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }

/* ----- Splash / app-open loading screen (always dark) ----- */
.splash { position: fixed; inset: 0; z-index: 9999; background: radial-gradient(120% 80% at 50% 36%, #11314a 0%, #0c1d2c 56%, #081521 100%); opacity: 1; transition: opacity 0.6s ease; }
.splash-hide { opacity: 0; pointer-events: none; }
.splash-inner { display: flex; flex-direction: column; align-items: center; text-align: center; min-height: 100vh; padding: 11vh 24px 6vh; box-sizing: border-box; color: #fff; }
.splash-mid { flex: 1; display: flex; align-items: center; justify-content: center; width: 100%; }
.splash-logo { display: flex; align-items: center; justify-content: center; gap: 12px; }
.splash-icon { width: 46px; height: 46px; background: #0c1d2c; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; }
.splash-icon svg { width: 30px; height: 30px; }
.splash-word { font-family: var(--font-logo); font-weight: 700; font-size: 1.9rem; letter-spacing: 0.24em; color: #fff; }
.splash-tag { color: #9fb4c2; font-size: 0.98rem; margin: 16px 0 0; }
.splash-video { width: 100%; max-width: 360px; height: auto; display: block; }
.splash-bar { width: 200px; height: 3px; background: rgba(255, 255, 255, 0.12); margin: 0 auto 18px; overflow: hidden; }
.splash-bar span { display: block; height: 100%; width: 38%; background: var(--teal); animation: splash-load 1.5s ease-in-out infinite; }
@keyframes splash-load { 0% { transform: translateX(-130%); } 100% { transform: translateX(360%); } }
.splash-status { display: flex; align-items: center; justify-content: center; gap: 8px; color: #c7d4dd; font-size: 0.9rem; margin: 0; }
.splash-status svg { width: 15px; height: 15px; color: var(--teal); flex: 0 0 auto; }
.splash-by { color: #5e7384; font-size: 0.72rem; letter-spacing: 0.18em; margin: 14px 0 0; }

/* In-app "Fitnizing" overlay (always dark) */
.ekg { width: 100%; max-width: 280px; height: 60px; display: block; margin: 4px auto 10px; }
.ekg-line { fill: none; stroke: var(--teal); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 120 640; animation: ekg-run 1.4s linear infinite; }
@keyframes ekg-run { to { stroke-dashoffset: -760; } }
.ekg-glow { filter: drop-shadow(0 0 7px rgba(10, 139, 148, 0.65)); }
.fitnizing-title { font-family: var(--font-head); font-weight: 700; font-size: 1.3rem; color: #fff; margin: 0; }
.fitnizing-title::after { display: none; }
.fitnizing-sub { color: #9fb4c2; font-size: 0.9rem; margin: 8px auto 16px; max-width: 320px; }
.fitnizing-steps { list-style: none; padding: 0; margin: 0 auto; display: inline-block; text-align: left; }
.fitnizing-steps li { color: #c7d4dd; font-size: 0.88rem; padding: 5px 0 5px 24px; position: relative; }
.fitnizing-steps li::before { content: ""; position: absolute; left: 0; top: 50%; width: 10px; height: 10px; margin-top: -5px; border: 2px solid var(--teal); border-radius: 50%; }

/* iOS Safari auto-zooms when focusing an input with font-size < 16px (then the
   page stays zoomed until you double-tap). Keep all form text at 16px to stop it,
   and lock text scaling so layouts never inflate. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
textarea,
input,
select,
.url-row input,
.gate-row input[type="email"],
.grams-input,
.score-comment { font-size: 16px; }

@media (max-width: 640px) {
  .recipe-compare { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .hero-stat-value { font-size: 2.2rem; }
  .score-value { font-size: 2.6rem; }
  .hero-h1 { font-size: 26px; }
}

/* Printing is always light + legible. */
@media print {
  :root {
    --canvas: #fff; --white: #fff; --surface-tint: #fff;
    --navy: #0c1d2c; --gray: #44515c; --line: #ccc; --line-strong: #bbb;
    --accent-on: #0a8b94; --ink: #0c1d2c;
  }
  body { background: #fff; }
  .site-header, .site-footer, .auth-bar, .input-card, #gateCard,
  #historyPanel, .result-toolbar, .score-block, .edit-hint,
  .hero-band, .fav-label, .fav-chips, .pillars, .trust-line, #splash { display: none !important; }
}

/* ============================================================
   v3 — app nav, My Plan, Progress, GLP-1
   ============================================================ */

/* ---------- app navigation ---------- */
.app-nav {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin: 4px 0 22px;
  padding: 6px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 8px);
  box-shadow: var(--shadow);
}
.nav-btn {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px 8px;
  background: none;
  border: none;
  border-radius: var(--radius);
  color: var(--gray);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.nav-btn svg { width: 22px; height: 22px; }
.nav-btn.on {
  background: var(--accent-tint);
  color: var(--accent-on);
}
.nav-btn:hover { color: var(--accent-on); }

@media (max-width: 720px) {
  .app-nav {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 40;
    margin: 0;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
  }
  body { padding-bottom: 96px; }
  .site-footer { padding-bottom: 110px; }
}
/* Five nav items: keep every label on one line on the narrowest phones. */
@media (max-width: 380px) {
  .nav-btn { font-size: 0.70rem; padding: 10px 3px 8px; letter-spacing: 0; }
  .nav-btn svg { width: 20px; height: 20px; }
}
@media print { .app-nav { display: none; } }

/* ---------- tutorial videos ---------- */
.tutv-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 820px) {
  .tutv-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
}
.tutv-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.tutv-video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0c1d2c;
  border-bottom: 1px solid var(--line);
}
.tutv-body { padding: 16px 18px 18px; }
.tutv-kicker {
  margin: 0 0 6px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-on);
}
.tutv-title {
  margin: 0 0 6px;
  font-family: var(--font-head);
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--navy);
}
.tutv-text {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.5;
  color: var(--gray);
}
.tutv-foot {
  margin: 20px 0 0;
  text-align: center;
  font-size: 0.94rem;
  color: var(--gray);
}

/* ---------- shared plan forms ---------- */
.plan-nudge p { margin: 0; font-size: 0.9rem; color: var(--gray); }
.plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px 16px;
  margin: 6px 0 16px;
}
.pf label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 6px;
}
.pf label .opt { text-transform: none; letter-spacing: 0; font-weight: 400; opacity: .8; }
.pf input[type="number"],
.pf input[type="text"],
.pf input[type="date"],
.pf input[type="time"],
.pf select {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--card-solid);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.98rem;
  box-sizing: border-box;
}
.pf input:focus, .pf select:focus {
  outline: none;
  border-color: var(--accent-on);
  box-shadow: 0 0 0 3px var(--accent-tint);
}
.pf .two { display: flex; gap: 8px; }
.pf-wide { grid-column: 1 / -1; }
.pf-check { display: flex; gap: 10px; align-items: flex-start; text-transform: none !important; letter-spacing: 0 !important; font-weight: 400 !important; font-size: 0.92rem !important; color: var(--ink) !important; cursor: pointer; }
.pf-check input { margin-top: 3px; accent-color: var(--accent-on); width: 18px; height: 18px; }
.seg { display: flex; gap: 6px; }
.seg button {
  flex: 1;
  padding: 10px 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--card-solid);
  color: var(--gray);
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
}
.seg button.on {
  background: var(--accent-tint);
  border-color: var(--accent-on);
  color: var(--accent-on);
}

/* ---------- targets card ---------- */
.targets-card { border-left: 3px solid var(--accent-on); }
.target-hero { display: flex; gap: 22px; flex-wrap: wrap; align-items: stretch; margin-top: 4px; }
.target-main { flex: 1 1 240px; }
.target-label {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--gray);
}
.target-value {
  font-family: var(--font-head);
  font-size: 3.2rem; font-weight: 900; line-height: 1.05; color: var(--accent-on);
}
.target-unit { font-size: 1.1rem; font-weight: 700; color: var(--gray); margin-left: 6px; }
.target-range { color: var(--gray); font-size: 0.92rem; margin-top: 4px; }
.target-side { flex: 1 1 200px; display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.mini-target {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-tint); font-size: 0.92rem;
}
.mini-target span { color: var(--gray); }
.mini-target strong { color: var(--ink); }
.target-glp {
  margin: 14px 0 0; padding: 10px 14px; border-radius: var(--radius);
  background: var(--accent-tint); color: var(--ink); font-size: 0.92rem;
}
.target-basis { color: var(--gray); font-size: 0.88rem; margin: 12px 0 0; }

/* ---------- result chip (personal protein %) ---------- */
.target-chip {
  margin: 14px 0 18px;
  padding: 12px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--accent-on);
  background: var(--accent-tint);
  color: var(--ink);
  font-size: 0.98rem;
}
.target-chip-cta { border-style: dashed; }

/* ---------- tiers ---------- */
.tier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 8px; }
.tier {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; background: var(--surface-tint); display: flex; flex-direction: column;
}
.tier-pro { border-color: var(--accent-on); background: var(--accent-tint); position: relative; }
.tier-badge {
  display: inline-block; align-self: flex-start;
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.1em;
  padding: 4px 10px; border-radius: 999px; margin-bottom: 8px;
  background: var(--accent-strong); color: var(--accent-contrast);
}
.tier-name { font-family: var(--font-head); font-weight: 900; font-size: 1.02rem; color: var(--ink); margin-bottom: 8px; }
.tier ul { margin: 0 0 12px; padding-left: 18px; font-size: 0.9rem; color: var(--ink); }
.tier li { margin: 5px 0; }
.tier-price { margin-top: auto; font-family: var(--font-head); font-weight: 900; font-size: 1.15rem; color: var(--ink); }
.tier-price span { display: block; font-family: var(--font-body); font-weight: 400; font-size: 0.78rem; color: var(--gray); }

/* ---------- GLP-1 ---------- */
.shot-card { border-left: 3px solid var(--accent-on); text-align: left; }
.shot-count {
  font-family: var(--font-head);
  font-size: 2.6rem; font-weight: 900; color: var(--accent-on); line-height: 1.1;
}
.shot-meta { color: var(--gray); font-size: 0.95rem; margin: 4px 0 14px; }
.glp-why { color: var(--ink); font-size: 0.98rem; line-height: 1.6; margin: 4px 0 16px; }

/* ---------- progress ---------- */
.trend-chart { width: 100%; height: auto; display: block; }
.trend-chart .ax { font: 700 11px var(--font-body); fill: var(--gray); }
.trend-chart .axr { text-anchor: end; }
.trend-chart .tl-weight { fill: none; stroke: var(--accent-on); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.trend-chart .tl-muscle { fill: none; stroke: var(--blush); stroke-width: 3; stroke-dasharray: 1 7; stroke-linecap: round; }
.trend-chart .td-weight { fill: var(--accent-on); }
.trend-chart .td-muscle { fill: var(--blush); }
.chart-legend { display: flex; gap: 16px; margin-top: 10px; font-size: 0.85rem; color: var(--gray); flex-wrap: wrap; }
.lg::before { content: ""; display: inline-block; width: 18px; height: 4px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.lg-weight::before { background: var(--accent-on); }
.lg-muscle::before { background: var(--blush); }
.lg-hint::before { display: none; }
.bl-table td, .bl-table th { font-size: 0.9rem; }
.adapt-card { border-left: 3px solid var(--accent-on); }
.adapt-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 8px 0 4px; }
.adapt-stat {
  flex: 1 1 140px; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-tint);
}
.adapt-stat span { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray); }
.adapt-stat strong { font-family: var(--font-head); font-size: 1.25rem; color: var(--ink); }
.adapt-warn {
  margin-top: 12px; padding: 10px 14px; border-radius: var(--radius);
  background: rgba(176, 106, 123, 0.14); border: 1px solid var(--rose); color: var(--ink); font-size: 0.92rem;
}
.adapt-good {
  margin-top: 12px; padding: 10px 14px; border-radius: var(--radius);
  background: var(--accent-tint); color: var(--ink); font-size: 0.92rem;
}

/* ============================================================
   v4 — capability scenes (loading) + intro tutorial
   ============================================================ */
.fit-scenes { position: absolute; inset: 0; overflow: hidden; }
.fit-scene {
  position: absolute; inset: -6%;
  background-size: cover; background-position: center;
  opacity: 0; transform: scale(1);
  transition: opacity 1.1s ease;
}
.fit-scene.on { opacity: 0.34; animation: fitKenburns 9s ease-in-out infinite alternate; }
@keyframes fitKenburns {
  from { transform: scale(1) translateY(0); }
  to   { transform: scale(1.1) translateY(-1.5%); }
}
.fit-scan {
  position: absolute; left: 0; right: 0; top: -12%;
  height: 10%;
  background: linear-gradient(to bottom, transparent, rgba(95, 208, 197, 0.22), transparent);
  animation: fitScan 3.4s linear infinite;
}
@keyframes fitScan {
  from { top: -12%; }
  to   { top: 112%; }
}
.fitnizing-overlay .splash-inner { position: relative; z-index: 2; }

/* ---------- intro tutorial ---------- */
.tut-overlay {
  position: fixed; inset: 0; z-index: 120;
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
  background: rgba(12, 29, 44, 0.86);
  backdrop-filter: blur(6px);
  animation: tutIn 0.4s ease;
  transition: opacity 0.4s ease;
}
.tut-overlay.tut-hide { opacity: 0; }
@keyframes tutIn { from { opacity: 0; } to { opacity: 1; } }
.tut-card {
  width: 100%; max-width: 420px;
  max-height: 92vh; overflow: auto;
  background: var(--card-solid);
  border: 1px solid var(--line-strong);
  border-radius: calc(var(--radius) + 10px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  animation: tutUp 0.45s cubic-bezier(0.2, 0.9, 0.3, 1);
}
@keyframes tutUp { from { transform: translateY(26px); opacity: 0; } to { transform: none; opacity: 1; } }
.tut-media { position: relative; height: 300px; overflow: hidden; }
.tut-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  animation: fitKenburns 8s ease-in-out infinite alternate;
}
.tut-media .tut-scan {
  position: absolute; left: 0; right: 0; top: -12%; height: 12%;
  background: linear-gradient(to bottom, transparent, rgba(95, 208, 197, 0.3), transparent);
  animation: fitScan 3s linear infinite;
}
.tut-body { padding: 18px 20px 20px; }
.tut-kicker {
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.16em;
  color: var(--accent-on); margin-bottom: 4px;
}
.tut-title { margin: 0 0 6px; font-family: var(--font-head); font-weight: 900; font-size: 1.3rem; color: var(--ink); }
.tut-text { margin: 0 0 14px; color: var(--gray); font-size: 0.95rem; line-height: 1.5; }
.tut-dots { display: flex; gap: 6px; margin-bottom: 16px; }
.tut-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--line-strong); transition: background 0.2s, width 0.2s; }
.tut-dot.on { background: var(--accent-on); width: 22px; }
.tut-actions { display: flex; justify-content: space-between; gap: 10px; }
@media (max-width: 480px) { .tut-media { height: 240px; } }

/* ============================================================
   components migrated from the index.html inline <style> block
   (tokenized so theme swaps reach them)
   ============================================================ */
.auth-bar { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-bottom: 16px; font-size: 14px; flex-wrap: wrap; }
.auth-user { color: var(--gray); }
.auth-user strong { color: var(--navy); }
.auth-user .btn-link { margin-left: 8px; }
.result-toolbar { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 8px; }
.score-block .star { font-size: 28px; line-height: 1; background: none; border: none; cursor: pointer; color: var(--gray); padding: 0 2px; }
.score-block .star.on { color: var(--warning); }
.score-overall-label { margin-left: 10px; color: var(--gray); font-size: 13px; }
.score-chips { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; }
.chip-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.chip-label { width: 130px; font-size: 13px; color: var(--gray); }
.chip { font-size: 12px; padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--gray); cursor: pointer; }
.chip.on { background: var(--accent-strong); color: var(--accent-contrast); border-color: var(--accent-strong); }
.score-comment { width: 100%; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 8px; font-family: inherit; margin-bottom: 10px; box-sizing: border-box; background: var(--canvas); color: var(--ink); }
.score-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.hist-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.hist-item > span:first-child { flex: 1; }
.hist-meta { font-size: 13px; color: var(--gray); }
.shop-list { list-style: none; padding: 0; margin: 8px 0 0; }
.shop-item { padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.shop-item a { color: var(--accent-on); text-decoration: none; }
.shop-item a:hover { text-decoration: underline; }
.swap-tag { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--accent-on); background: var(--accent-tint); border-radius: 999px; padding: 1px 8px; vertical-align: middle; }
.shop-disclosure { font-size: 11px; color: var(--gray); margin-top: 8px; }

/* Reduced motion: every animation collapses to instant (design rule —
   see design/DESIGN-DECISIONS.md). !important also beats the JS-set
   inline animation-durations on the EKG line. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto !important; }
}

/* ============================================================
   v6 — commercial redesign (Astra review 2026-09-12)
   Type scale, spacing scale, three surface roles, GLP-1-first
   sales surface, result screen as the centrepiece, honest
   roadmap surfaces (Instacart, Pro) that capture demand.
   ============================================================ */

/* ---------- header: identity left, account right ---------- */
.site-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  max-width: 880px; margin: 0 auto; padding: 14px 16px 10px;
  text-align: left; border-bottom: 0; background: transparent;
}
@media (min-width: 900px) { .site-header { padding: 18px 24px 10px; } }
.app-logo-text { display: flex; flex-direction: column; line-height: 1; }
.app-logo-text .eyebrow { margin: 5px 0 0; font-size: 0.58rem; letter-spacing: 0.22em; }
.app-logo-word { font-size: 1.15rem; }
.app-logo-icon { width: 34px; height: 34px; }
.app-logo-icon svg { width: 23px; height: 23px; }
.auth-bar { margin: 0; gap: 8px; }
.account-btn {
  list-style: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 8px 12px; border: 1px solid var(--ghost-border); border-radius: var(--radius);
  font-weight: 600; font-size: 0.85rem; color: var(--navy); user-select: none;
}
.account-btn::-webkit-details-marker { display: none; }
.account-btn svg { width: 16px; height: 16px; color: var(--accent-on); }
.auth-user { position: relative; color: var(--navy); }
.account-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; min-width: 250px;
  background: var(--card-solid); border: 1px solid var(--line-strong); border-radius: var(--radius);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px; text-align: left;
}
.account-email { margin: 0; font-size: 0.85rem; word-break: break-all; }
.account-plan { margin: 0 0 4px; font-size: 0.78rem; color: var(--gray); }
.account-menu .btn-link { text-decoration: none; margin: 0; text-align: left; }

/* ---------- layout + spacing scale (4 8 12 16 24 32 48 64) ---------- */
.container { padding: 12px 16px 48px; }
@media (min-width: 900px) { .container { padding: 16px 24px 64px; } }
.app-nav { margin: 0 0 20px; }
.input-card, .block { padding: 20px; }
@media (min-width: 900px) { .input-card, .block { padding: 28px; } }
.results { gap: 16px; }
.btn { min-height: 48px; }
.btn-ghost { font-weight: 600; }

/* ---------- type scale ---------- */
.hero-band { padding: 8px 0 0; margin-bottom: 8px; }
.hero-eyebrow { font-size: 12px; letter-spacing: 0.14em; margin-bottom: 8px; }
.hero-h1 { font-size: 28px; line-height: 1.14; }
.hero-sell .hero-h1 { font-size: 36px; line-height: 1.08; font-weight: 800; letter-spacing: -0.015em; }
@media (min-width: 900px) { .hero-h1 { font-size: 36px; } .hero-sell .hero-h1 { font-size: 52px; } }
.hero-subline { font-size: 17px; line-height: 1.5; margin: 12px 0 0; max-width: 560px; }
.hero-quiet { margin: 8px 0 0; font-size: 14px; color: var(--gray); }
.field-label { font-size: 15px; text-transform: none; letter-spacing: 0; font-weight: 600; margin-bottom: 8px; }

/* signed-in shortcuts (icons replaced the emoji; size them) */
.feature-strip { margin: 14px 0 0; }
.feat-chip svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--accent-on); }

/* ---------- proof card (the verified steak & egg bowl) ---------- */
.proof-card {
  margin: 20px 0 0; background: var(--card-solid); border: 1px solid var(--line-strong);
  border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow);
}
@media (min-width: 900px) { .proof-card { padding: 28px; } }
.proof-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.proof-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-on); }
.proof-dish { font-family: var(--font-head); font-weight: 700; font-size: 18px; color: var(--ink); }
.proof-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; }
.proof-col { display: flex; flex-direction: column; gap: 2px; }
.proof-lbl { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 4px; }
.proof-before .proof-lbl { color: var(--blush); }
.proof-after .proof-lbl { color: var(--accent-on); }
.proof-big { font-family: var(--font-body); font-weight: 700; font-size: 34px; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.proof-big small, .proof-mid small { font-size: 12px; font-weight: 600; color: var(--gray); margin-left: 5px; }
.proof-mid { font-family: var(--font-body); font-weight: 700; font-size: 26px; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; margin-top: 8px; }
.proof-before .proof-big, .proof-before .proof-mid { color: var(--gray); }
.proof-after .proof-big, .proof-after .proof-mid { color: var(--accent-on); }
.proof-small { font-size: 13px; color: var(--gray); margin-top: 4px; }
.proof-arrow { width: 28px; height: 28px; color: var(--accent-on); }
.proof-arrow svg { width: 100%; height: 100%; }
.proof-deltas { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.delta-chip { font-size: 13px; font-weight: 700; padding: 5px 10px; border-radius: var(--radius); background: var(--surface-tint); color: var(--ink); border: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.delta-chip.delta-up { color: var(--accent-on); border-color: var(--accent-on); background: var(--accent-tint); }
.proof-note { margin: 14px 0 0; font-size: 13px; color: var(--gray); line-height: 1.5; }

/* ---------- hero CTA ---------- */
.hero-cta-wrap { margin: 16px 0 8px; }
.btn-hero { display: block; width: 100%; padding: 16px 22px; font-size: 16px; min-height: 52px; letter-spacing: 0.01em; }
.hero-fine { margin: 8px 0 0; font-size: 13px; color: var(--gray); text-align: center; }

/* ---------- composer: text first, link second, one CTA ---------- */
.compose-card { margin-top: 16px; }
.compose-card textarea { font-size: 16px; line-height: 1.5; min-height: 120px; }
/* Link import: the main way in, so it sits first and biggest (Diego 2026-10-09) */
.import-box { border: 2px solid var(--accent-on); background: var(--accent-tint); border-radius: var(--radius); padding: 20px; }
.import-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.import-head svg { width: 30px; height: 30px; flex: 0 0 auto; color: var(--accent-on); margin-top: 2px; }
.import-title { display: block; font-family: var(--font-head); font-size: 22px; font-weight: 800; line-height: 1.2; color: var(--ink); }
.import-sub { margin: 4px 0 0; font-size: 15px; color: var(--ink); }
.import-box .url-row { margin-bottom: 10px; }
.import-box .url-row input { font-size: 16px; padding: 14px 16px; min-height: 54px; background: var(--canvas); border-color: var(--accent-on); }
.btn-import { background: var(--accent-strong); color: var(--accent-contrast); font-size: 16px; min-height: 54px; padding: 0 26px; }
.btn-import:hover { filter: brightness(1.08); }
.import-box .url-hint { margin: 0; color: var(--ink); opacity: 0.8; }
.compose-or { display: flex; align-items: center; gap: 12px; margin: 22px 0 14px; font-size: 13px; font-weight: 600; color: var(--gray); }
.compose-or::before, .compose-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
@media (max-width: 520px) {
  .import-box { padding: 16px; }
  .import-title { font-size: 19px; }
  .btn-import { width: 100%; }
}
.compose-actions { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.compose-secondary { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.compose-secondary .btn-ghost { padding: 10px 16px; font-size: 14px; min-height: 44px; }
.compose-clear { text-decoration: none; color: var(--gray); font-weight: 600; }
.signin-hint { margin-top: 12px; font-size: 13px; }
.signin-hint .btn-link { text-decoration: none; }

/* ---------- three steps ---------- */
.steps-strip { display: grid; gap: 12px; margin: 24px 0 0; }
@media (min-width: 720px) { .steps-strip { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
.step { display: flex; gap: 12px; align-items: flex-start; }
.step-n {
  flex: 0 0 auto; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 700; font-size: 14px; color: var(--accent-on);
  border: 1.5px solid var(--accent-on); border-radius: var(--radius);
}
.step strong { display: block; font-family: var(--font-head); font-weight: 700; font-size: 15px; color: var(--ink); margin-bottom: 2px; }
.step span { font-size: 14px; color: var(--gray); line-height: 1.45; }

/* ---------- evidence line ---------- */
.evidence-line {
  display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 20px 0 0; padding: 12px 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 13px; color: var(--gray);
}
.evidence-line span::before { content: ""; display: inline-block; width: 6px; height: 6px; background: var(--accent-on); margin-right: 8px; vertical-align: middle; }
.evidence-line .btn-link { font-size: 13px; text-decoration: none; }

/* ---------- value panel: grocery roadmap + Free/Pro ---------- */
.value-panel { display: grid; gap: 16px; margin: 24px 0 0; }
@media (min-width: 900px) { .value-panel { grid-template-columns: 1fr 1.2fr; } }
.value-grocery { background: var(--surface-tint); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; align-items: flex-start; }
.value-grocery h3 { margin: 10px 0 6px; font-family: var(--font-head); font-weight: 700; font-size: 20px; color: var(--ink); line-height: 1.2; }
.value-grocery p { margin: 0 0 14px; font-size: 14px; color: var(--gray); line-height: 1.5; }
.value-grocery .btn { margin-top: auto; }
.roadmap-tag {
  display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-on); border: 1px solid var(--accent-on); padding: 3px 8px; border-radius: var(--radius);
}
.pro-compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
/* Three plans: when only two columns fit, Coaches takes the whole second row. */
.pro-compare { container-type: inline-size; }
@container (max-width: 599px) { .pro-compare > .plan-coaches { grid-column: 1 / -1; } }
@media (max-width: 480px) { .pro-compare { grid-template-columns: 1fr; } }
.plan { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 8px; background: var(--card-solid); }
.plan-pro { border-color: var(--accent-on); }
.plan-name { font-family: var(--font-head); font-weight: 700; font-size: 16px; color: var(--ink); }
.plan-name em { font-style: normal; font-family: var(--font-body); font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-on); margin-left: 6px; }
.plan ul { margin: 0; padding-left: 16px; font-size: 13px; color: var(--ink); line-height: 1.5; }
.plan-price { margin-top: auto; font-family: var(--font-head); font-weight: 800; font-size: 22px; color: var(--ink); font-variant-numeric: tabular-nums; }
.plan-price small { font-size: 13px; font-weight: 600; color: var(--gray); }
.plan-alt { display: block; font-family: var(--font-body); font-size: 12px; font-weight: 500; color: var(--gray); }
.plan .btn { margin-top: 4px; padding: 12px 14px; font-size: 14px; }
.plan-trial { font-size: 12px; font-weight: 600; color: var(--accent-on); }
.account-plan-sub { margin: -4px 0 6px; font-size: 12px; color: var(--gray); }

/* ---------- recipe pack, compact ---------- */
.pack-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 24px; }
.pack-head .fav-label { margin: 0; }
.pack-head .btn-link { font-size: 13px; text-decoration: none; }
.recipe-pack-compact { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
@media (max-width: 480px) { .recipe-pack-compact { grid-template-columns: 1fr; } }
.recipe-pack-compact .fav-chip { padding: 10px 12px; font-size: 0.82rem; }
.recipe-pack-compact .fav-chip.pack-hidden { display: none; }

/* ---------- result screen ---------- */
.result-toolbar { justify-content: space-between; }
.result-kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-on); }
.result-head .result-name { margin-top: 8px; font-size: 1.6rem; line-height: 1.15; }
.result-meta { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 8px; font-size: 14px; color: var(--gray); }
.result-meta .btn-link { text-decoration: none; font-size: 14px; }
.compare-panel.hero-stats { display: block; background: var(--card-solid); border: 1px solid var(--accent-on); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
@media (min-width: 900px) { .compare-panel.hero-stats { padding: 28px; } }
.cp-label { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gray); margin-bottom: 6px; }
.cp-main { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.cp-value { font-family: var(--font-body); font-weight: 700; font-size: 48px; line-height: 1; color: var(--accent-on); font-variant-numeric: tabular-nums; }
@media (min-width: 900px) { .cp-value { font-size: 64px; } }
.cp-unit { font-size: 15px; font-weight: 600; color: var(--gray); padding-bottom: 6px; }
.cp-was { font-size: 14px; color: var(--gray); padding-bottom: 6px; }
.cp-was b { color: var(--ink); font-weight: 600; }
.cp-was .up { color: var(--accent-on); font-weight: 700; }
.cp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.cp-cell .cp-label { margin-bottom: 4px; }
.cp-cell-val { font-family: var(--font-body); font-weight: 600; font-size: 28px; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.cp-cell-val small { font-size: 12px; color: var(--gray); margin-left: 4px; font-weight: 600; }
.cp-cell-was { font-size: 13px; color: var(--gray); margin-top: 2px; }
.cp-cell-was .orig { color: var(--blush); font-weight: 600; }
.cp-cell-was .drop { color: var(--accent-on); font-weight: 700; }
.target-chip { margin: 0; }
.confidence {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-tint);
}
.confidence svg { width: 20px; height: 20px; color: var(--accent-on); flex: 0 0 auto; margin-top: 2px; }
.confidence strong { display: block; font-size: 15px; color: var(--ink); }
.confidence span { font-size: 13px; color: var(--gray); }
.confidence .btn-link { font-size: 13px; text-decoration: none; }
.action-dock { display: grid; gap: 8px; }
.action-dock .btn { width: 100%; padding: 14px 16px; font-size: 15px; }
.action-dock-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.action-dock-row .btn { padding: 11px 8px; font-size: 13px; min-height: 44px; }
.dock-note { margin: 2px 0 0; font-size: 13px; color: var(--gray); text-align: center; }
.dock-note .btn-link { font-size: 13px; text-decoration: none; }
.block.result-head, .block.recipe-card { border-left: 0; }
.recipe-card .recipe-text { font-size: 15px; line-height: 1.55; }
.limit-card { text-align: left; }
.limit-card h2 { font-size: 1.35rem; line-height: 1.2; }
.limit-card .button-row { margin-top: 14px; }
.notice-card { border-left-color: var(--accent-on); }
.score-card { text-align: left; padding: 16px 18px; }
.score-card .score-value { font-size: 1.9rem; margin-top: 6px; }
.score-card .score-label { font-size: 0.95rem; }
.score-card .score-disc { margin: 10px 0 0; max-width: none; }

/* shopping list with pantry ticks + servings + honest Instacart roadmap */
.serv-row { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--gray); margin: 6px 0 10px; flex-wrap: wrap; }
.serv-row input { width: 64px; padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: var(--radius); font: inherit; font-size: 16px; text-align: center; background: var(--canvas); color: var(--ink); }
.shop-check { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.shop-check input { accent-color: var(--accent-on); width: 18px; height: 18px; flex: 0 0 auto; }
.shop-name { flex: 1; }
.shop-qty { color: var(--gray); font-variant-numeric: tabular-nums; }
.shop-item.have .shop-name, .shop-item.have .shop-qty { opacity: 0.45; text-decoration: line-through; }
.shop-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; margin-top: 14px;
  border: 1px dashed var(--accent-on); border-radius: var(--radius); background: var(--accent-tint); flex-wrap: wrap;
}
.shop-cta strong { display: block; font-size: 15px; color: var(--ink); }
.shop-cta span { font-size: 13px; color: var(--gray); }
.shop-cta .btn { min-height: 44px; padding: 10px 16px; font-size: 14px; }

/* share overlay */
.share-wrap { position: fixed; inset: 0; z-index: 130; background: rgba(12, 29, 44, 0.9); display: flex; align-items: center; justify-content: center; padding: 18px; }
.share-box { background: var(--card-solid); border-radius: var(--radius); padding: 16px; max-width: 420px; width: 100%; max-height: 92vh; overflow: auto; }
.share-box img { width: 100%; height: auto; display: block; border: 1px solid var(--line); }
.share-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.share-actions .btn { flex: 1; }

/* ---------- GLP-1 screen ---------- */
.glp-today .target-value { font-family: var(--font-body); font-size: 48px; font-weight: 700; }
.glp-plan-line { font-size: 14px; color: var(--gray); margin: 6px 0 12px; line-height: 1.5; }
.glp-next h2 { font-size: 1.15rem; }
.pref-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 4px; }
.pref-chip { font-size: 13px; padding: 8px 12px; border: 1px dashed var(--line-strong); border-radius: var(--radius); color: var(--gray); background: transparent; cursor: pointer; font-family: var(--font-body); min-height: 40px; }
.pref-chip:hover { border-color: var(--accent-on); color: var(--accent-on); }
.glp-details { margin-top: 0; }
.glp-details summary { font-weight: 700; font-size: 0.95rem; padding: 6px 0; }
.glp-details .plan-grid { margin-top: 12px; }
.glp-details.block { padding-top: 14px; padding-bottom: 14px; }
.glp-maint { font-size: 13px; color: var(--gray); line-height: 1.5; margin: 4px 0 0; }

/* terracotta is "before" only: the muscle trend line becomes neutral */
.trend-chart .tl-muscle { stroke: var(--gray); }
.trend-chart .td-muscle { fill: var(--gray); }
.lg-muscle::before { background: var(--gray); }

/* mobile clearance under the fixed nav */
@media (max-width: 720px) { body { padding-bottom: 104px; } .site-header { padding-top: 12px; } }
@media print {
  .action-dock, .shop-cta, .value-panel, .steps-strip, .evidence-line, .proof-card, .hero-cta-wrap,
  .pack-head, .recipe-pack, .confidence .btn-link, .share-wrap, .serv-row, .dock-note, .import-box, .compose-or { display: none !important; }
}

/* ============================================================
   v7 — Appetite (2026-09-12). Replaces the GLP-1 medication
   screen. A daily check-in and a meal-size preference, both
   kept on the device. Nothing here asks why.
   ============================================================ */

/* the meal-size control: the thing that actually changes the next rebuild */
.ap-prefs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0 4px; }
@media (max-width: 420px) { .ap-prefs { grid-template-columns: 1fr; } }
.ap-pref {
  display: flex; flex-direction: column; gap: 3px; text-align: left;
  padding: 14px 14px 13px; min-height: 64px; cursor: pointer;
  background: var(--card-solid); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  font-family: var(--font-body);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.ap-pref strong { font-family: var(--font-head); font-weight: 700; font-size: 15px; }
.ap-pref span { font-size: 12.5px; color: var(--gray); line-height: 1.4; }
.ap-pref:hover { border-color: var(--accent-on); }
.ap-pref.on { border-color: var(--accent-on); background: var(--accent-tint); }
.ap-pref.on strong { color: var(--accent-on); }

/* today's check-in: five taps, one of them yours */
.ap-scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 12px 0 6px; }
.ap-score {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 4px 10px; min-height: 68px; cursor: pointer;
  background: var(--card-solid); color: var(--gray);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  font-family: var(--font-body);
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.ap-score b { font-family: var(--font-body); font-weight: 700; font-size: 20px; color: var(--ink); font-variant-numeric: tabular-nums; }
.ap-score span { font-size: 10.5px; line-height: 1.25; text-align: center; }
.ap-score:hover { border-color: var(--accent-on); }
.ap-score.on { border-color: var(--accent-on); background: var(--accent-tint); color: var(--accent-on); }
.ap-score.on b { color: var(--accent-on); }
.ap-atypical { margin-top: 10px; font-size: 13px !important; }

/* the last seven days, as a strip */
.ap-strip { display: flex; gap: 6px; margin: 4px 0 12px; flex-wrap: wrap; }
.ap-cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  width: 40px; height: 46px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--surface-tint);
}
.ap-cell b { font-size: 15px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.ap-cell i { font-style: normal; font-size: 10px; color: var(--gray); }
/* one accent, five weights: never a red-to-green "good day / bad day" scale */
.ap-cell.ap-s1 { background: var(--surface-tint); }
.ap-cell.ap-s2 { background: color-mix(in srgb, var(--accent-tint), transparent 55%); }
.ap-cell.ap-s3 { background: var(--accent-tint); }
.ap-cell.ap-s4 { background: color-mix(in srgb, var(--accent-tint), var(--accent-on) 22%); }
.ap-cell.ap-s5 { background: color-mix(in srgb, var(--accent-tint), var(--accent-on) 40%); }

.ap-progress { height: 6px; background: var(--line); border-radius: var(--radius); overflow: hidden; margin-top: 10px; }
.ap-progress i { display: block; height: 100%; background: var(--accent-on); }
.ap-notes { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ap-notes li { padding-left: 16px; position: relative; font-size: 14.5px; line-height: 1.5; color: var(--ink); }
.ap-notes li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 6px; height: 6px; background: var(--accent-on); }
.ap-privacy summary { font-size: 0.95rem; }
.ap-privacy .button-row { margin-top: 12px; }

/* the appetite note on a result */
.result-appetite { margin: 10px 0 0; font-size: 13.5px; color: var(--gray); }
.result-appetite .btn-link { font-size: 13.5px; text-decoration: none; margin-left: 4px; }
.result-free { margin: 10px 0 0; font-size: 13.5px; color: var(--gray); }
.result-free .btn-link { font-size: 13.5px; text-decoration: none; margin-left: 4px; }

/* measurements stay on the device unless this is ticked */
.bl-consent { margin-top: 14px; font-size: 13.5px !important; }

/* ============================================================
   Bilingual EN / PT-BR (i18n.js, 2026-09-29)
   ============================================================ */
/* EN | PT switch in the header. Squared to the app's own radius token
   (crisp in light, rounded in dark) so it reads as part of the header. */
.lang-toggle {
  display: inline-flex; border: 1px solid var(--ghost-border, var(--line-strong)); border-radius: var(--radius); overflow: hidden;
}
.lang-toggle button {
  background: none; border: 0; cursor: pointer; color: var(--gray);
  font-family: var(--font-body); font-weight: 700; font-size: 11px; letter-spacing: 0.06em;
  padding: 7px 10px; min-height: 32px; transition: background 0.15s ease, color 0.15s ease;
}
.lang-toggle button + button { border-left: 1px solid var(--ghost-border, var(--line-strong)); }
.lang-toggle button.on { background: var(--accent-strong); color: var(--accent-contrast); }
.lang-toggle button:not(.on):hover { color: var(--accent-on); }
.lang-toggle button:focus-visible { outline: 2px solid var(--accent-on); outline-offset: -2px; }
/* Phones: the header has no room for both halves, so the switch collapses to
   one button showing the language you can switch TO ("PT" in English, "EN"
   in Portuguese). Keeps the header on one row down to 375px. */
@media (max-width: 520px) {
  .lang-toggle button.on { display: none; }
  .lang-toggle button + button { border-left: 0; }
  .lang-toggle button { padding: 6px 6px; min-height: 32px; font-size: 12px; }
  /* header controls stay on one row (the logo gives up space first) */
  .auth-bar { flex-wrap: nowrap; flex-shrink: 0; }
}
@media (max-width: 440px) {
  .auth-bar { gap: 4px; }
  .account-btn { padding: 8px 10px; }
  .account-label { display: none; } /* icon-only; the summary keeps its aria-label */
  .btn-signin { padding: 8px 10px; }
}
@media (max-width: 400px) { .btn-signin svg { display: none; } }
@media (max-width: 340px) { .site-header { flex-wrap: wrap; } }

/* UI that differs by market: Instacart is US/Canada only, so Portuguese
   swaps it for "Copiar lista de compras". i18n.js sets html[data-lang]. */
html:not([data-lang="pt"]) [data-pt-only] { display: none !important; }
html[data-lang="pt"] [data-en-only] { display: none !important; }
html[data-lang="pt"] .value-panel { grid-template-columns: 1fr; }

/* Tutorial tab: "narration is in English for now" (Portuguese only) */
.tutv-note {
  margin: 14px 0 0; text-align: center; font-size: 0.86rem; color: var(--gray);
}

/* Team Botezelli clients (signed in from app.drbotezelli.com, JDB 2026-10-09): they get
   1 recipe a day through their coaching, so no plan offer of any kind is shown to them. */
html.btz-client .pro-compare,
html.btz-client [data-pro-waitlist],
html.btz-client [data-billing-cta],
html.btz-client [data-trial-note] { display: none !important; }