.ob-content[data-v-19b7fef8] {
  flex: 1;
  max-width: 560px;
  width: 100%;
  background: var(--bg);
  border-radius: 16px;
  border: 1px solid var(--line);
  box-shadow: 0 12px 40px rgba(40,30,20,0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  align-self: stretch;
}
.ob-app[data-v-19b7fef8] {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.optional-tag[data-v-19b7fef8] {
  color: var(--ink-mute);
  margin-left: 6px;
  font-size: 11px;
}
/* Override the default <button> reset so the side-panel step buttons
   inherit the .step layout cleanly. The original .step rule (from
   onboarding.css) was a <div>; <button> needs explicit background +
   alignment so it doesn't pick up the platform's default styling. */
.step--btn[data-v-19b7fef8] {
  width: 100%;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: background 0.12s ease;
}
.step--btn[data-v-19b7fef8]:hover {
  background: rgba(255, 255, 255, 0.6);
}
.step--btn[data-v-19b7fef8]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: 10px;
}
.is-mobile .stage[data-v-19b7fef8] {
  padding: 0;
  min-height: 100vh;
  min-height: 100dvh;
}
.is-mobile .ob-content[data-v-19b7fef8] {
  max-width: 100%;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  border-radius: 0;
  border: 0;
  box-shadow: none;
}

/* Belt + suspenders: hide the side column at any narrow viewport, even
   when the JS device flag thinks we're on desktop (e.g. a desktop
   user dragged the window narrow after onboarding mounted). */
@media (max-width: 768px) {
.stage-side[data-v-19b7fef8] { display: none;
}
.stage[data-v-19b7fef8] {
    padding: 0;
    min-height: 100vh;
    min-height: 100dvh;
}
.ob-content[data-v-19b7fef8] {
    max-width: 100%;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
    border: 0;
    box-shadow: none;
}
}

.phy-label[data-v-263aed63] {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-mute);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.phy-hint[data-v-263aed63] {
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--ink-mute);
  letter-spacing: 0.06em;
  margin-top: 8px;
}
.phy-segctl[data-v-263aed63] {
  display: flex; gap: 4px; padding: 3px;
  background: var(--bg-alt); border-radius: 999px;
}
.phy-seg[data-v-263aed63] {
  flex: 1; height: 38px; border-radius: 999px;
  background: transparent; color: var(--ink-dim);
  font-size: 13.5px;
}
.phy-seg.on[data-v-263aed63] {
  background: var(--panel); color: var(--accent-deep); font-weight: 500;
  box-shadow: 0 1px 2px rgba(40,30,20,0.06);
}
.phy-grid[data-v-263aed63] { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px;
}
.phy-field[data-v-263aed63] { display: flex; flex-direction: column;
}
.phy-input-wrap[data-v-263aed63] {
  display: flex; align-items: center; height: 44px;
  padding: 0 14px; border: 1px solid var(--line-strong);
  border-radius: 10px; background: var(--panel);
}
.phy-input-wrap input[data-v-263aed63] {
  flex: 1; min-width: 0; width: 100%;
  border: 0; outline: 0; background: transparent;
  font-family: var(--mono); font-size: 14px; color: var(--ink);
}
.phy-suffix[data-v-263aed63] {
  font-family: var(--mono); font-size: 11px; color: var(--ink-mute);
  margin-left: 4px;
}
.phy-unit-toggle[data-v-263aed63] {
  margin-top: 18px;
  display: flex; gap: 4px; padding: 3px;
  background: var(--bg-alt); border-radius: 999px;
}
.phy-unit[data-v-263aed63] {
  flex: 1; height: 30px; border-radius: 999px;
  background: transparent; color: var(--ink-dim);
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.10em; text-transform: uppercase;
}
.phy-unit.on[data-v-263aed63] {
  background: var(--panel); color: var(--accent-deep);
}

.goal-chip.disabled[data-v-c52f4332] {
  opacity: 0.35;
  cursor: not-allowed;
}
.cap-hint[data-v-c52f4332] {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.goals-readout[data-v-c52f4332] {
  margin-top: 18px;
  padding: 12px 14px;
  background: var(--panel-warm);
  border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0;
  color: var(--ink-dim);
  line-height: 1.5;
}
.goals-readout__lede[data-v-c52f4332] {
  font-family: var(--serif);
  font-size: 13px;
  font-style: italic;
  margin-bottom: 8px;
}
.goals-readout__lede b[data-v-c52f4332] { color: var(--ink); font-style: normal; font-weight: 500;
}
.goals-readout__chips[data-v-c52f4332] {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.signal-chip[data-v-c52f4332] {
  display: inline-flex; align-items: center;
  padding: 4px 9px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ink);
}

.activity-list[data-v-f1a2e939] { display: flex; flex-direction: column; gap: 10px;
}
.activity-card[data-v-f1a2e939] {
  width: 100%; text-align: left;
  padding: 14px 16px; border-radius: 14px;
  background: var(--panel); border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 4px;
  transition: all 0.15s ease;
}
.activity-card.on[data-v-f1a2e939] {
  border-color: var(--accent);
  background: var(--accent-fog);
  box-shadow: 0 1px 6px rgba(196,99,60,0.08);
}
.activity-head[data-v-f1a2e939] { display: flex; justify-content: space-between; align-items: baseline;
}
.activity-title[data-v-f1a2e939] { font-size: 15px; font-weight: 500; color: var(--ink);
}
.activity-mult[data-v-f1a2e939] { font-family: var(--mono); font-size: 12px; color: var(--ink-mute);
}
.activity-blurb[data-v-f1a2e939] { font-size: 13px; color: var(--ink-dim);
}
.activity-readout[data-v-f1a2e939] {
  margin-top: 18px; padding: 14px;
  background: var(--panel-warm); border-radius: 12px;
  border-left: 3px solid var(--accent);
  display: flex; flex-direction: column; gap: 8px;
}
.activity-readout .row[data-v-f1a2e939] { display: flex; justify-content: space-between; font-size: 13px;
}
.activity-readout .row.dim[data-v-f1a2e939] { opacity: 0.5;
}
.activity-readout .val[data-v-f1a2e939] { font-family: var(--mono); font-weight: 500; color: var(--ink);
}

.wg-field[data-v-6646d161] { display: flex; flex-direction: column;
}
.wg-label[data-v-6646d161] {
  font-family: var(--mono); font-size: 10px;
  color: var(--ink-mute); letter-spacing: 0.12em;
  text-transform: uppercase; margin-bottom: 6px;
}
.wg-input-wrap[data-v-6646d161] {
  display: flex; align-items: center; height: 44px;
  padding: 0 14px; border: 1px solid var(--line-strong);
  border-radius: 10px; background: var(--panel);
}
.wg-input-wrap input[data-v-6646d161] {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font-family: var(--mono); font-size: 14px; color: var(--ink);
}
.wg-suffix[data-v-6646d161] {
  font-family: var(--mono); font-size: 11px; color: var(--ink-mute);
}
.rate-grid[data-v-6646d161] { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px;
}
.rate-chip[data-v-6646d161] {
  padding: 12px 14px; border-radius: 10px;
  background: var(--panel); border: 1px solid var(--line);
  font-size: 13px; color: var(--ink-dim); text-align: left;
}
.rate-chip.on[data-v-6646d161] {
  border-color: var(--accent); background: var(--accent-fog);
  color: var(--accent-deep); font-weight: 500;
}

.nt-field[data-v-69c2dafb] { display: flex; flex-direction: column;
}
.nt-label[data-v-69c2dafb] {
  font-family: var(--mono); font-size: 10px;
  color: var(--ink-mute); letter-spacing: 0.12em;
  text-transform: uppercase; margin-bottom: 6px;
}
.nt-input-wrap[data-v-69c2dafb] {
  display: flex; align-items: center; height: 44px;
  padding: 0 14px; border: 1px solid var(--line-strong);
  border-radius: 10px; background: var(--panel);
}
.nt-input-wrap input[data-v-69c2dafb] {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font-family: var(--mono); font-size: 14px; color: var(--ink);
}
.nt-suffix[data-v-69c2dafb] {
  font-family: var(--mono); font-size: 11px; color: var(--ink-mute);
}
.macro-grid[data-v-69c2dafb] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.nt-check[data-v-69c2dafb] {
  margin-top: 14px;
  padding: 10px 14px;
  background: var(--panel-warm);
  border-radius: 10px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
}
.nt-check.off[data-v-69c2dafb] { color: var(--warn);
}
.nt-check b[data-v-69c2dafb] { color: var(--ink); font-weight: 500;
}

.summary-card .row[data-v-943ce86e] {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background 0.12s ease;
}
.summary-card .row[data-v-943ce86e]:hover {
  background: var(--accent-fog);
}
.row-chev[data-v-943ce86e] {
  margin-left: 6px;
  color: var(--ink-mute);
  font-size: 14px;
  transition: transform 0.15s ease, color 0.15s ease;
}
.summary-card .row:hover .row-chev[data-v-943ce86e] {
  color: var(--accent);
  transform: translateX(2px);
}
/* Onboarding — Clinic·Warm. Scoped to .onboarding-root so the tokens
   don't leak into the host app's design system. The shell mounts this
   class around the entire flow. */
.onboarding-root {
  --bg:           #fbf8f3;
  --bg-alt:       #f5efe4;
  --bg-deep:      #efe7d6;
  --panel:        #ffffff;
  --panel-warm:   #f8f3e8;
  --panel-cream:  #fcf8ed;
  --ink:          #1c1a17;
  --ink-dim:      #5a5249;
  --ink-mute:     #928876;
  --ink-faint:    #b8ad9a;
  --line:         rgba(40,30,20,0.10);
  --line-strong:  rgba(40,30,20,0.20);
  --line-soft:    rgba(40,30,20,0.05);
  --accent:       #c4633c;
  --accent-deep:  #a14e2c;
  --accent-soft:  #ecd5c4;
  --accent-softer:rgba(196,99,60,0.12);
  --accent-fog:   rgba(196,99,60,0.06);
  --sage:         #6b8a4f;
  --sage-soft:    rgba(107,138,79,0.16);
  --sage-deep:    #4f6b3a;
  --gold:         #c89c3a;
  --gold-soft:    rgba(200,156,58,0.20);
  --gold-deep:    #8a6a23;
  --indigo:       #5a7a9b;
  --indigo-soft:  rgba(90,122,155,0.16);
  --indigo-deep:  #3f5878;
  --plum:         #8a5a72;
  --plum-soft:    rgba(138,90,114,0.16);
  --warn:         #c97b3a;
  --serif: "Fraunces", "Tiempos", Georgia, serif;
  --sans:  "Inter", system-ui, -apple-system, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100vh; background: var(--bg-deep); font-family: var(--sans); color: var(--ink); -webkit-font-smoothing: antialiased; }
::selection { background: var(--accent); color: #fff; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; padding: 0; touch-action: manipulation; }
input, textarea, select { font: inherit; color: inherit; }
ul { list-style: none; padding: 0; margin: 0; }
h1, h2, h3, h4, h5, h6, p { margin: 0; padding: 0; font-weight: inherit; }

.serif { font-family: var(--serif); font-weight: 380; letter-spacing: -0.014em; font-feature-settings: "ss01"; }
.serif-it { font-family: var(--serif); font-style: italic; color: var(--accent-deep); font-weight: 400; }
.mono { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--ink-mute); }
.mono-accent { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }

/* ── Stage with side notes ───────────────────────────── */
.stage {
  min-height: 100vh;
  display: flex; align-items: flex-start; justify-content: center;
  gap: 56px; padding: 60px 40px 80px;
  background:
    radial-gradient(ellipse 800px 600px at 30% 30%, rgba(196,99,60,0.06), transparent 60%),
    radial-gradient(ellipse 600px 500px at 80% 70%, rgba(107,138,79,0.05), transparent 60%),
    var(--bg-deep);
}
.stage-side { max-width: 300px; padding-top: 80px; flex-shrink: 0; }
.stage-side .crumb {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 20px;
}
.stage-side .crumb .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.stage-side h1 {
  font-family: var(--serif); font-weight: 380;
  font-size: 44px; line-height: 1.04; letter-spacing: -0.022em;
  color: var(--ink); font-feature-settings: "ss01"; padding-bottom: 0.18em;
}
.stage-side h1 i { font-style: italic; color: var(--accent-deep); }
.stage-side p { margin-top: 18px; font-size: 15px; color: var(--ink-dim); line-height: 1.55; }
.stage-side .stepper {
  margin-top: 32px;
  display: flex; flex-direction: column; gap: 4px;
}
.stage-side .stepper .step {
  display: grid; grid-template-columns: 24px 1fr;
  gap: 12px; align-items: center;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px; color: var(--ink-mute);
  transition: background 0.15s ease;
}
.stage-side .stepper .step.active { background: rgba(255,255,255,0.6); color: var(--ink); }
.stage-side .stepper .step.done { color: var(--ink); }
.stage-side .stepper .num {
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 11px;
  border: 1.5px solid var(--line-strong); color: var(--ink-mute);
  background: rgba(255,255,255,0.6);
  flex-shrink: 0;
}
.stage-side .step.done .num { background: var(--sage); border-color: transparent; color: #fff; }
.stage-side .step.active .num { background: var(--accent); border-color: transparent; color: #fff; }

/* ── Device frame ────────────────────────────────────── */
.device {
  width: 414px; height: 880px;
  border-radius: 54px;
  background: #1c1a17;
  padding: 9px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 30px 60px rgba(40,30,20,0.25),
    0 8px 24px rgba(40,30,20,0.18);
  position: relative; flex-shrink: 0;
}
.screen {
  width: 100%; height: 100%;
  border-radius: 46px;
  background: var(--bg);
  overflow: hidden;
  position: relative;
}
.island {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  width: 124px; height: 36px; border-radius: 24px; background: #000; z-index: 60;
}
.statusbar {
  height: 56px; display: flex; align-items: flex-end;
  justify-content: space-between; padding: 0 32px 6px;
  font-family: -apple-system, "SF Pro", system-ui;
  font-weight: 600; font-size: 15px; color: var(--ink);
}
.statusbar-icons { display: flex; gap: 6px; align-items: center; color: var(--ink); }
.home-indicator {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  width: 134px; height: 5px; border-radius: 3px; background: var(--ink); z-index: 55; opacity: 0.85;
}
.app {
  display: flex; flex-direction: column;
  height: calc(100% - 56px);
  position: relative; overflow: hidden;
}

/* ── In-flow header (back + progress bar) ─────────────── */
.flow-head {
  padding: 6px 18px 14px;
  display: flex; align-items: center; gap: 12px;
  flex-shrink: 0;
}
.flow-head .back {
  width: 36px; height: 36px; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--line);
  color: var(--ink-dim); font-size: 16px;
  display: inline-flex; align-items: center; justify-content: center;
}
.flow-head .pbar {
  flex: 1; height: 4px; border-radius: 999px;
  background: var(--bg-alt);
  position: relative; overflow: hidden;
}
.flow-head .pbar .fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--accent); border-radius: 999px;
  transition: width 0.4s cubic-bezier(.2,.7,.2,1);
}
.flow-head .step-counter {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  color: var(--ink-mute); text-transform: uppercase; min-width: 32px;
  text-align: right;
}

.flow-body {
  flex: 1; min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 6px 22px 24px;
  scrollbar-width: none;
}
.flow-body::-webkit-scrollbar { display: none; }

.eyebrow {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  color: var(--accent); text-transform: uppercase;
  margin-bottom: 12px;
}

h1.screen-h {
  font-family: var(--serif); font-weight: 380;
  font-size: 34px; line-height: 1.06; letter-spacing: -0.018em;
  color: var(--ink); font-feature-settings: "ss01";
  padding-bottom: 0.1em;
}
h1.screen-h i { font-style: italic; color: var(--accent-deep); }
.sub {
  margin-top: 14px;
  font-size: 15px; line-height: 1.55; color: var(--ink-dim);
}
.sub b { color: var(--ink); font-weight: 500; }

.flow-footer {
  padding: 14px 22px 24px;
  background: var(--bg);
  border-top: 1px solid var(--line);
  flex-shrink: 0;
}
.flow-footer.transparent { border-top: 0; background: transparent; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; height: 52px;
  border-radius: 999px;
  background: var(--accent); color: #fff;
  font-size: 14.5px; font-weight: 500;
  gap: 8px;
}
.btn.secondary {
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--line-strong);
}
.btn.ghost {
  background: transparent; color: var(--ink-dim);
  height: 44px;
}
.btn:disabled { background: var(--bg-alt); color: var(--ink-faint); }

/* ── 1 · Welcome ─────────────────────────────────────── */
.welcome {
  flex: 1; display: flex; flex-direction: column;
  padding: 24px 28px 32px;
  position: relative; overflow: hidden;
}
.welcome::before {
  content: ""; position: absolute;
  right: -10%; top: -10%;
  width: 380px; height: 380px;
  background: radial-gradient(ellipse at center, rgba(196,99,60,0.16), transparent 65%);
  filter: blur(30px); pointer-events: none;
}
.welcome-top { display: flex; align-items: center; gap: 10px; position: relative; z-index: 2; }
.welcome-top .mk {
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  position: relative; overflow: hidden;
}
.welcome-top .mk::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(135deg,
    transparent 0 3px, rgba(255,255,255,0.22) 3px 4px);
}
.welcome-top .nm {
  font-family: var(--serif); font-size: 18px; letter-spacing: -0.01em; font-weight: 460;
  font-feature-settings: "ss01";
}
.welcome-mid {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  padding: 30px 0;
  position: relative; z-index: 2;
}
.welcome-mid h1 {
  font-family: var(--serif); font-weight: 380;
  font-size: 46px; line-height: 1.02; letter-spacing: -0.02em;
  font-feature-settings: "ss01";
  padding-bottom: 0.12em;
}
.welcome-mid h1 i { font-style: italic; color: var(--accent-deep); }
.welcome-mid p {
  margin-top: 24px;
  font-size: 16.5px; line-height: 1.5; color: var(--ink-dim);
  max-width: 32ch;
}
.welcome-mid p b { color: var(--ink); font-weight: 500; }
.welcome-bottom {
  padding-top: 16px;
  display: flex; flex-direction: column; gap: 10px;
  position: relative; z-index: 2;
}
.welcome-bottom .note {
  text-align: center; margin-top: 6px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.10em;
  color: var(--ink-mute); text-transform: uppercase;
}
.oauth-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.oauth-btn {
  height: 48px;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 13.5px; color: var(--ink); font-weight: 500;
}

/* ── Product picker cards ────────────────────────────── */
.prod-card {
  position: relative;
  padding: 22px 22px 24px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  display: flex; flex-direction: column; gap: 12px;
  cursor: pointer;
  transition: all 0.18s ease;
  text-align: left;
  width: 100%;
  margin-bottom: 12px;
}
.prod-card:hover { border-color: var(--accent-soft); transform: translateY(-1px); }
.prod-card.on {
  border-color: var(--accent);
  background: var(--accent-fog);
  box-shadow: 0 4px 16px rgba(196,99,60,0.10);
}
.prod-card-top { display: flex; align-items: center; gap: 12px; }
.prod-icon {
  width: 40px; height: 40px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-style: italic;
  font-size: 20px; font-weight: 400;
  flex-shrink: 0;
}
.prod-icon.log { background: var(--sage-soft); color: var(--sage-deep); }
.prod-icon.lab { background: var(--accent-softer); color: var(--accent-deep); }
.prod-card .nm {
  font-family: var(--serif); font-size: 22px; letter-spacing: -0.012em;
  font-feature-settings: "ss01"; color: var(--ink);
}
.prod-card .nm em { font-style: italic; color: var(--accent-deep); }
.prod-card .tag {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em;
  color: var(--ink-mute); text-transform: uppercase;
}
.prod-card .blurb {
  font-size: 13.5px; line-height: 1.5; color: var(--ink-dim);
  margin-top: -2px;
}
.prod-card .blurb b { color: var(--ink); font-weight: 500; }
.prod-card .checks { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.prod-card .checks li {
  display: grid; grid-template-columns: 18px 1fr; gap: 8px;
  font-size: 12.5px; color: var(--ink-dim);
  align-items: flex-start;
}
.prod-card .checks li::before {
  content: "✓"; color: var(--accent);
  font-size: 11px; line-height: 1.4;
}
.prod-card .check-mark {
  position: absolute; top: 16px; right: 16px;
  width: 24px; height: 24px; border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  background: var(--panel);
  display: inline-flex; align-items: center; justify-content: center;
  color: transparent; font-size: 12px;
  transition: all 0.15s ease;
}
.prod-card.on .check-mark {
  background: var(--accent); border-color: transparent; color: #fff;
}
.combo-flag {
  position: absolute; top: -10px; left: 20px;
  padding: 4px 10px;
  background: var(--accent); color: #fff;
  border-radius: 999px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ── Profile cards (selectable type tiles) ───────────── */
.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.profile-tile {
  padding: 16px 14px 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  display: flex; flex-direction: column; gap: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
  position: relative;
}
.profile-tile:hover { border-color: var(--accent-soft); }
.profile-tile.on {
  border-color: var(--accent);
  background: var(--accent-fog);
}
.profile-tile .glyph {
  width: 32px; height: 32px; border-radius: 10px;
  background: var(--bg-alt); color: var(--ink-dim);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-style: italic; font-size: 16px;
}
.profile-tile.on .glyph { background: var(--accent); color: #fff; }
.profile-tile .nm {
  font-family: var(--serif); font-size: 17px; letter-spacing: -0.01em;
  font-feature-settings: "ss01";
  line-height: 1.15;
}
.profile-tile .desc {
  font-size: 11.5px; color: var(--ink-dim); line-height: 1.4;
}
.profile-tile .check {
  position: absolute; top: 12px; right: 12px;
  width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--line-strong); background: var(--panel);
  color: transparent; font-size: 9px;
  display: inline-flex; align-items: center; justify-content: center;
}
.profile-tile.on .check { background: var(--accent); border-color: transparent; color: #fff; }

/* ── Goal chips (multi-select) ───────────────────────── */
.chip-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.goal-chip {
  padding: 14px 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  display: flex; align-items: center; gap: 10px;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
}
.goal-chip:hover { border-color: var(--accent-soft); }
.goal-chip.on {
  border-color: var(--accent);
  background: var(--accent-fog);
}
.goal-chip .icon {
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--bg-alt); color: var(--ink-dim);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-style: italic; font-size: 14px;
  flex-shrink: 0;
}
.goal-chip.on .icon { background: var(--accent); color: #fff; }
.goal-chip .nm {
  font-size: 13.5px; font-weight: 500; line-height: 1.2;
  font-family: var(--sans);
}

/* ── Stack input chip cloud ──────────────────────────── */
.stack-search {
  display: flex; align-items: center; gap: 10px;
  padding: 0 16px;
  height: 44px;
  background: var(--bg-alt);
  border-radius: 999px;
  margin-bottom: 14px;
}
.stack-search input {
  flex: 1; border: 0; background: transparent;
  outline: none; font-size: 14px; color: var(--ink);
}
.stack-search input::placeholder { color: var(--ink-mute); }

.added { margin-top: 4px; }
.added h4 {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  color: var(--ink-mute); text-transform: uppercase;
  margin-bottom: 10px;
}
.added .row {
  display: grid; grid-template-columns: 30px 1fr auto auto;
  gap: 12px; align-items: center;
  padding: 12px 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 6px;
}
.added .row .ic {
  width: 30px; height: 30px; border-radius: 9px;
  background: var(--accent-softer); color: var(--accent-deep);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-style: italic; font-size: 14px;
  flex-shrink: 0;
}
.added .row .nm { font-size: 13.5px; font-weight: 500; }
.added .row .dose { font-family: var(--mono); font-size: 11px; color: var(--accent); }
.added .row .x { color: var(--ink-mute); font-size: 14px; padding: 4px; }

.suggest-head {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  color: var(--ink-mute); text-transform: uppercase;
  margin: 18px 0 10px;
}
.suggest-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.suggest-card {
  padding: 12px 12px 12px 14px;
  background: var(--panel);
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  text-align: left;
}
.suggest-card .plus {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent-softer); color: var(--accent);
  font-size: 14px; margin-bottom: 6px;
}
.suggest-card .nm { font-size: 13px; font-weight: 500; }
.suggest-card .tag {
  font-family: var(--mono); font-size: 9px;
  color: var(--ink-mute); letter-spacing: 0.10em;
  text-transform: uppercase; margin-top: 4px;
}

/* ── Bloodwork upload zone ───────────────────────────── */
.upload {
  margin: 4px 0 10px;
  padding: 24px 18px;
  border: 1.5px dashed var(--line-strong);
  border-radius: 16px;
  background: var(--panel-cream);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center;
}
.upload .ic {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--accent-softer); color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px; margin-bottom: 4px;
}
.upload .nm {
  font-family: var(--serif); font-size: 18px;
  letter-spacing: -0.012em;
  font-feature-settings: "ss01";
}
.upload .desc {
  font-size: 12.5px; color: var(--ink-dim); line-height: 1.5;
  max-width: 32ch;
}
.upload .pill-row {
  display: flex; gap: 6px; margin-top: 6px;
  flex-wrap: wrap; justify-content: center;
}
.upload .pill-row span {
  padding: 3px 9px;
  background: var(--bg-alt);
  border-radius: 999px;
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-mute);
}
.skip-row {
  text-align: center;
  margin-top: 8px;
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.10em;
}
.skip-row a { color: var(--ink-mute); text-transform: uppercase; }
.skip-row a:hover { color: var(--accent); }

/* ── Bloodwork values list ───────────────────────────── */
.bw-list {
  margin-top: 14px;
  background: var(--panel);
  border: 1px solid var(--sage-soft);
  border-radius: 14px;
  overflow: hidden;
}
.bw-row {
  display: grid; grid-template-columns: 20px 1fr auto auto;
  gap: 10px; align-items: center;
  padding: 10px 14px;
  border-top: 1px solid var(--line-soft);
  font-size: 13px;
}
.bw-row:first-child { border-top: 0; }
.bw-row .check {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--sage); color: #fff;
  font-size: 9px;
  display: inline-flex; align-items: center; justify-content: center;
}
.bw-row .nm { color: var(--ink); }
.bw-row .val { font-family: var(--mono); font-size: 11.5px; color: var(--accent); }
.bw-row .range { font-family: var(--mono); font-size: 9.5px; color: var(--ink-mute); }
.bw-row .badge {
  padding: 2px 7px; border-radius: 999px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em;
  text-transform: uppercase;
}
.bw-row .badge.in { background: var(--sage-soft); color: var(--sage-deep); }
.bw-row .badge.out { background: rgba(201,123,58,0.16); color: #9a5824; }

.parse-banner {
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--sage-soft); color: var(--sage-deep);
  border-radius: 10px;
  display: grid; grid-template-columns: 24px 1fr;
  gap: 10px; align-items: center;
  font-size: 12.5px;
}
.parse-banner .ic {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--sage); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 500;
}

/* ── Slider for severity / dose ───────────────────────── */
.slider {
  height: 6px; background: var(--bg-alt); border-radius: 999px;
  position: relative; margin: 16px 0 6px;
}
.slider .fill { position: absolute; top: 0; bottom: 0; left: 0; background: var(--accent); border-radius: 999px; }
.slider .knob {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 24px; height: 24px; background: var(--accent);
  border-radius: 50%; border: 4px solid var(--panel);
  box-shadow: 0 0 0 1px var(--accent), 0 2px 4px rgba(196,99,60,0.2);
}

/* ── Tier card ───────────────────────────────────────── */
.tier {
  position: relative;
  padding: 22px 22px 24px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  margin-bottom: 12px;
}
.tier.feat {
  border: 1.5px solid var(--accent);
  background: var(--accent-fog);
}
.tier .badge-pop {
  position: absolute; top: -10px; left: 20px;
  padding: 4px 10px;
  background: var(--accent); color: #fff;
  border-radius: 999px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em;
  text-transform: uppercase;
}
.tier h3 {
  font-family: var(--serif); font-weight: 380;
  font-size: 22px; letter-spacing: -0.012em;
  font-feature-settings: "ss01";
}
.tier h3 em { font-style: italic; color: var(--accent-deep); }
.tier .desc {
  margin-top: 6px; font-size: 12.5px; color: var(--ink-dim); line-height: 1.45;
}
.tier .price {
  margin-top: 14px; padding: 10px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: baseline; gap: 6px;
}
.tier .price b {
  font-family: var(--serif); font-weight: 400;
  font-size: 36px; line-height: 1; letter-spacing: -0.02em;
  font-feature-settings: "ss01";
}
.tier .price span { font-family: var(--mono); font-size: 10.5px; color: var(--ink-mute); letter-spacing: 0.08em; }
.tier ul { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 8px; }
.tier ul li {
  display: grid; grid-template-columns: 16px 1fr; gap: 10px;
  font-size: 12.5px; color: var(--ink);
}
.tier ul li::before {
  content: "→"; color: var(--accent); font-family: var(--mono);
  font-size: 11px;
}

/* ── Notification permission ─────────────────────────── */
.permission-art {
  margin: 14px 0 18px;
  padding: 22px 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
}
.permission-art .preview-notif {
  display: grid; grid-template-columns: 36px 1fr auto;
  gap: 12px; align-items: center;
  padding: 12px 14px;
  background: var(--panel-cream);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(40,30,20,0.06);
}
.permission-art .preview-notif .mk {
  width: 36px; height: 36px; border-radius: 9px;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-family: var(--serif); font-style: italic; font-size: 18px;
}
.permission-art .preview-notif .body { min-width: 0; }
.permission-art .preview-notif .ttl {
  font-size: 13px; font-weight: 600; color: var(--ink);
}
.permission-art .preview-notif .msg {
  font-size: 12px; color: var(--ink-dim);
  margin-top: 2px; line-height: 1.4;
}
.permission-art .preview-notif .time {
  font-family: var(--mono); font-size: 9.5px;
  color: var(--ink-mute); letter-spacing: 0.06em;
  align-self: flex-start;
}
.benefits {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 12px;
}
.benefit {
  display: grid; grid-template-columns: 28px 1fr;
  gap: 12px; align-items: flex-start;
  padding: 8px 0;
}
.benefit .ic {
  width: 26px; height: 26px; border-radius: 8px;
  background: var(--accent-softer); color: var(--accent-deep);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-style: italic; font-size: 13px;
  flex-shrink: 0;
}
.benefit .nm { font-size: 13px; font-weight: 500; color: var(--ink); }
.benefit .desc { font-size: 11.5px; color: var(--ink-dim); margin-top: 2px; line-height: 1.4; }

/* ── Final celebration ───────────────────────────────── */
.done-mid {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  padding: 30px 26px;
  position: relative;
  text-align: center;
}
.done-mid::before {
  content: ""; position: absolute;
  inset: -10%;
  background:
    radial-gradient(circle at 30% 30%, var(--accent-softer), transparent 50%),
    radial-gradient(circle at 70% 70%, var(--sage-soft), transparent 50%);
  pointer-events: none;
}
.done-icon {
  width: 72px; height: 72px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-style: italic; font-size: 36px;
  margin: 0 auto 22px;
  box-shadow: 0 12px 30px rgba(196,99,60,0.30);
  position: relative; z-index: 2;
}
.done-mid h1 {
  font-family: var(--serif); font-weight: 380;
  font-size: 38px; line-height: 1.05; letter-spacing: -0.02em;
  font-feature-settings: "ss01";
  position: relative; z-index: 2;
  padding-bottom: 0.12em;
}
.done-mid h1 i { font-style: italic; color: var(--accent-deep); }
.done-mid p {
  margin-top: 14px;
  font-size: 15px; color: var(--ink-dim); line-height: 1.55;
  max-width: 30ch; margin-inline: auto;
  position: relative; z-index: 2;
}
.summary-card {
  margin: 24px 16px 0;
  padding: 16px 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  text-align: left;
  position: relative; z-index: 2;
}
.summary-card .head {
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: 0.14em; color: var(--ink-mute);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.summary-card .row {
  display: grid; grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid var(--line-soft);
  font-size: 12.5px;
}
.summary-card .row:first-of-type { border-top: 0; }
.summary-card .row .v {
  font-family: var(--mono); font-size: 11.5px; color: var(--accent-deep);
}

/* Responsive */
@media (max-width: 1024px) {
  .stage { flex-direction: column; align-items: center; gap: 28px; }
  .stage-side { padding-top: 0; max-width: 414px; }
}

.ob-loading[data-v-b4c4c2c0] {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute, #999);
}