/* ============================================================
   MUCH MORE — assessment experience
   ============================================================ */

body {
  background: var(--cream);
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

/* ================= top bar ================= */

.a-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px var(--gutter);
  padding-top: calc(18px + env(safe-area-inset-top));
  position: sticky;
  top: 0;
  z-index: 10;
  background: linear-gradient(to bottom, var(--cream) 70%, rgba(238, 227, 201, 0));
}
.a-nav .wm { font-size: 24px; }
.a-nav__exit { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 8px; margin-right: -8px; text-decoration: none; transition: color 160ms ease; }
@media (hover: hover) and (pointer: fine) { .a-nav__exit:hover { color: var(--mustard); } }

.a-progress {
  display: flex;
  align-items: center;
  gap: 14px;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.a-progress.is-visible { opacity: 1; }
.a-progress__packs { display: flex; gap: 4px; }
.a-progress__packs i {
  display: block;
  width: 11px;
  height: 15px;
  border-radius: 3px;
  background: var(--cream-sink);
  border: 1px solid var(--rule);
  transition: background-color 300ms ease, border-color 300ms ease;
}
.a-progress__packs i.lit { background: var(--butter); border-color: var(--butter-deep); }
@media (max-width: 480px) { .a-progress .label { display: none; } }

/* ================= stage ================= */

.a-stage {
  flex: 1;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  max-width: 880px;
  margin-inline: auto;
  padding: 24px var(--gutter) 80px;
}

.screen { grid-area: 1 / 1; align-self: start; min-width: 0; }   /* lets wide content (the carousel) scroll instead of stretching the column */

/* transitions — exits faster than entries */
.screen.enter { opacity: 0; transform: translateY(22px); }
.screen.enter-back { opacity: 0; transform: translateY(-22px); }
.screen.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}
.screen.leave {
  opacity: 0 !important;
  transform: translateY(-22px);
  transition: opacity 0.24s var(--ease-out), transform 0.24s var(--ease-out);
  pointer-events: none;
}
.screen.leave-back {
  opacity: 0 !important;
  transform: translateY(22px);
  transition: opacity 0.24s var(--ease-out), transform 0.24s var(--ease-out);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .screen.enter, .screen.enter-back { opacity: 1; transform: none; }
  .screen.is-in, .screen.leave, .screen.leave-back { transition: none; }
}

/* ================= intro ================= */

.screen--intro {
  text-align: center;
  padding-top: clamp(40px, 10vh, 120px);
}
.screen__wm {
  font-size: clamp(64px, 14vw, 120px);
  margin: 22px auto 30px;
}
.screen__title {
  font-size: clamp(36px, 6vw, 64px);
  line-height: 1.06;
  margin: 0 0 22px;
}
.screen__lede {
  color: var(--olive-soft);
  max-width: 48ch;
  margin: 0 auto 40px;
  font-size: clamp(16px, 1.25vw, 19px);
}
.screen__fine { display: block; margin-top: 32px; letter-spacing: 0.18em; }

/* ================= question screens ================= */

.screen--q { padding-top: clamp(16px, 6vh, 70px); }
.screen__q {
  font-size: clamp(28px, 4.2vw, 44px);
  line-height: 1.1;
  margin: 14px 0 12px;
  max-width: 24ch;
}
.screen__hint { color: var(--olive-mute); margin: 0 0 12px; font-size: 16px; }

.q-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 32px;
  max-width: 560px;
}
.q-options--multi { flex-direction: row; flex-wrap: wrap; max-width: none; }

.q-option {
  font-family: var(--f-sans);
  font-size: 17px;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 15px 20px;
  min-height: 52px;
  background: var(--cream-lift);
  border: 1px solid var(--rule);
  border-radius: 8px;
  color: var(--olive);
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 120ms ease;
}
@media (hover: hover) and (pointer: fine) { .q-option:hover { border-color: var(--olive); } }
.q-option:active { transform: scale(0.985); }
.q-option.is-chosen { background: var(--olive); border-color: var(--olive); color: var(--cream); }
.q-option__key {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--mustard);
  border: 1px solid var(--rule);
  border-radius: 4px;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.q-option.is-chosen .q-option__key { color: var(--butter); border-color: var(--butter); }

.q-option--multi { flex: 0 0 auto; padding: 12px 18px; gap: 12px; min-height: 48px; }
.q-option__tick {
  width: 10px;
  height: 14px;
  border-radius: 2px;
  border: 1px solid var(--mustard);
  flex-shrink: 0;
  transition: background-color 150ms ease, border-color 150ms ease;
}
.q-option--multi.is-on { background: var(--olive); border-color: var(--olive); color: var(--cream); }
.q-option--multi.is-on .q-option__tick { background: var(--butter); border-color: var(--butter); }

.q-multibar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
  margin-top: 32px;
}
.q-multibar .btn:disabled { opacity: 0.35; cursor: not-allowed; }

.q-text { margin-top: 32px; max-width: 460px; }
.q-text input {
  width: 100%;
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: clamp(24px, 3.2vw, 34px);
  color: var(--olive);
  background: transparent;
  border: none;
  border-radius: 0;
  border-bottom: 1.5px solid var(--olive-soft);
  padding: 6px 2px 12px;
  outline: none;
  transition: border-color 160ms ease;
}
.q-text input:focus { border-bottom-color: var(--mustard); }
.q-text input::placeholder { color: rgba(92, 86, 51, 0.4); }
.q-text__row { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 30px; }

.btn-quiet {
  font-family: var(--f-sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  background: none;
  border: none;
  color: var(--olive-soft);
  cursor: pointer;
  padding: 10px 2px;
  min-height: 44px;
  transition: color 160ms ease;
}
@media (hover: hover) and (pointer: fine) { .btn-quiet:hover { color: var(--mustard); } }
.screen__back { display: block; margin-top: 40px; }

/* ================= analysis ================= */

.screen--analysis {
  min-height: 70svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 36px;
}
#analysisCanvas { transition: opacity 0.4s ease; border-radius: var(--radius); }
#analysisCanvas.is-done { opacity: 0.35; }
/* bottom progress bar */
.analysis-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  padding: 16px var(--gutter) calc(16px + env(safe-area-inset-bottom));
  background: rgba(238, 227, 201, 0.96);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--rule);
}
.analysis-bar__row {
  max-width: 880px;
  margin: 0 auto 10px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.analysis-bar__phase { color: var(--olive); letter-spacing: 0.22em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.analysis-bar__meta { flex-shrink: 0; font-size: 13px; color: var(--olive-soft); }
.analysis-bar__pct { color: var(--olive); font-weight: 600; }
.analysis-bar__track {
  max-width: 880px;
  margin: 0 auto;
  height: 8px;
  border-radius: 999px;
  background: var(--cream-sink);
  box-shadow: inset 0 0 0 1px var(--rule);
  overflow: hidden;
}
.analysis-bar__fill {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--butter-deep), var(--butter));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 240ms linear;
}
.analysis-bar__hint {
  max-width: 880px;
  margin: 8px auto 0;
  font-size: 12.5px;
  color: var(--olive-mute);
}
@media (prefers-reduced-motion: reduce) {
  .analysis-bar__fill { transition: none; }
}
.screen--analysis { padding-bottom: 110px; }

/* ================= results ================= */

.screen--results { padding-top: clamp(10px, 4vh, 50px); }

.bp-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 56px;
}

.bp-head__title { font-size: clamp(34px, 5.4vw, 60px); line-height: 1.06; margin: 14px 0 16px; }
.bp-head__meta {
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--olive-mute);
}

.bp-block { margin-bottom: 60px; }
.bp-block > .label { margin-bottom: 24px; display: block; }

/* capsules — rotating carousel of equal-size cards */
.bp-carousel__btn {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--rule-strong);
  background: var(--cream-lift);
  color: var(--olive);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 160ms ease, color 160ms ease, transform 120ms ease;
}
.bp-carousel__btn:active { transform: scale(0.95); }
@media (hover: hover) and (pointer: fine) {
  .bp-carousel__btn:hover { background: var(--olive); color: var(--cream); }
}
/* pause (two bars) / play (triangle) icon */
.bp-carousel__icon { display: block; width: 12px; height: 12px; position: relative; }
.bp-carousel__icon::before, .bp-carousel__icon::after {
  content: "";
  position: absolute;
  top: 0;
  width: 4px;
  height: 12px;
  background: currentColor;
  border-radius: 1px;
}
.bp-carousel__icon::before { left: 1px; }
.bp-carousel__icon::after { right: 1px; }
.bp-carousel__play.is-paused .bp-carousel__icon::after { display: none; }
.bp-carousel__play.is-paused .bp-carousel__icon::before {
  left: 2px;
  width: 0;
  height: 0;
  background: none;
  border-radius: 0;
  border-left: 10px solid currentColor;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

.bp-carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(84%, 340px);
  gap: 16px;
  align-items: stretch;                 /* every card as tall as the tallest */
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  margin-inline: calc(-1 * var(--gutter));
  padding: 6px var(--gutter) 14px;
  scrollbar-width: none;
}
.bp-carousel__track::-webkit-scrollbar { display: none; }
.bp-carousel__track:focus-visible { outline: 2px solid var(--mustard); outline-offset: -2px; }
@media (min-width: 760px) {
  .bp-carousel__track { grid-auto-columns: 380px; }
}
.bp-carousel__slide {
  scroll-snap-align: start;
  min-width: 0;
  display: flex;
  flex-direction: column;
  opacity: 0.55;
  transform: scale(0.97);
  transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out), box-shadow 320ms var(--ease-out);
}
.bp-carousel__slide.is-active {
  opacity: 1;
  transform: none;
  box-shadow: 0 24px 50px -36px rgba(62, 57, 24, 0.55);
}
@media (prefers-reduced-motion: reduce) {
  .bp-carousel__slide { transform: none; transition: opacity 200ms ease; }
}
.bp-carousel__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
}
.bp-carousel__dots { display: flex; justify-content: center; gap: 0; }
.bp-carousel__dot {
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.bp-carousel__dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--rule-strong);
  transition: width 240ms var(--ease-out), background-color 240ms ease;
}
.bp-carousel__dot[aria-current="true"]::before { width: 24px; background: var(--olive); }

.bp-cap {
  border: 1px solid var(--rule);
  background: var(--cream-lift);
  padding: 26px 24px 16px;
  border-radius: var(--radius);
}
.bp-cap__head { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.bp-cap__head h2 { font-size: 23px; line-height: 1.1; }
.bp-cap__timing { display: block; margin-top: 5px; letter-spacing: 0.2em; }
.bp-cap__num { margin-left: auto; font-family: var(--f-display); font-size: 28px; color: var(--rule-strong); }
.bp-cap__note { color: var(--olive-mute); font-size: 15px; margin: 0 0 8px; }
.bp-capsoil-note { margin: -12px 0 24px; color: var(--olive-mute); font-size: 15.5px; }
.bp-cap__body {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.bp-vis { width: 56px; height: auto; margin-top: 8px; }

.bp-cap__list { list-style: none; margin: 0; padding: 0; }
.bp-cap__list li { padding: 15px 0; border-top: 1px solid var(--rule); }
.bp-ing__top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.bp-ing__swatch {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  flex-shrink: 0;
  align-self: center;
  border: 1px solid rgba(62, 57, 24, 0.15);
}
.bp-ing__pct { color: var(--mustard); font-size: 14px; min-width: 38px; }
.bp-ing__top strong { flex: 1 1 120px; font-weight: 500; font-size: 15.5px; letter-spacing: 0.02em; }
.bp-ing__dose { color: var(--mustard); font-size: 13px; margin-left: auto; }
.bp-ing__form { display: block; font-size: 12.5px; letter-spacing: 0.03em; color: var(--olive-mute); margin-top: 3px; }
.bp-ing__form em { font-style: normal; color: var(--mustard); }
.bp-ing__replaces {
  display: inline-block;
  margin-top: 8px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--olive);
  background: var(--butter);
  border-radius: 4px;
  padding: 4px 10px;
}
.bp-ing__why { margin: 10px 0 0; font-size: 15px; line-height: 1.55; color: var(--olive-soft); }

/* off your shopping list */
.bp-shop__lede { margin: -8px 0 22px; color: var(--olive-mute); }
.bp-shop { display: flex; flex-direction: column; max-width: 640px; border-top: 1px solid var(--rule); }
.bp-shop__row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 15px 0;
  border-bottom: 1px solid var(--rule);
}
.bp-shop__was {
  font-size: 15px;
  text-decoration: line-through;
  text-decoration-color: var(--mustard);
  text-decoration-thickness: 1.5px;
  color: var(--olive-mute);
}
.bp-shop__arrow { color: var(--mustard); }
.bp-shop__now { font-size: 16px; }
.bp-shop__now strong { font-weight: 500; }
.bp-shop__note { margin-top: 18px; max-width: 640px; color: var(--olive-mute); font-size: 15px; }

/* covered */
.bp-covered { display: flex; flex-direction: column; gap: 16px; max-width: 680px; }
.bp-cov { border-left: 3px solid var(--sage); padding: 4px 0 4px 20px; }
.bp-cov strong { font-size: 13px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; }
.bp-cov p { margin: 8px 0 0; color: var(--olive-soft); font-size: 15.5px; }

/* flags */
.bp-flags { display: flex; flex-direction: column; gap: 16px; max-width: 680px; }
.bp-flag { border-left: 3px solid var(--butter); padding: 4px 0 4px 20px; }
.bp-flag--caution { border-left-color: #B4552B; }
.bp-flag strong { font-size: 13px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; }
.bp-flag p { margin: 8px 0 0; color: var(--olive-soft); font-size: 15.5px; }

/* tier */
.bp-tier {
  background: var(--olive);
  color: var(--cream);
  border-radius: var(--radius);
  padding: clamp(32px, 5vw, 56px);
}
.bp-tier > .label { color: var(--butter); }
.bp-tier__name { font-size: clamp(28px, 3.6vw, 40px); color: var(--cream); margin: 8px 0 6px; }
.bp-tier__price {
  color: var(--butter);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 18px;
}
.bp-tier__why { max-width: 56ch; margin: 0 0 30px; color: rgba(238, 227, 201, 0.8); }
.bp-tier__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
.bp-tier .btn-quiet { color: rgba(238, 227, 201, 0.75); }
.bp-tier .btn--solid { background: var(--butter); border-color: var(--butter); color: var(--olive); }
@media (hover: hover) and (pointer: fine) {
  .bp-tier .btn--solid:hover { background: var(--cream); border-color: var(--cream); color: var(--olive); }
}

.bp-fine {
  margin: 56px 0 20px;
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: var(--olive-mute);
  max-width: 72ch;
}

/* ================= intake components ================= */

/* --- identity form --- */
.id-form { margin-top: 32px; max-width: 560px; }
.id-form__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
@media (min-width: 560px) { .id-form__row { grid-template-columns: 1fr 1fr; } }
.id-field { display: flex; flex-direction: column; gap: 10px; }
.id-field input {
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: clamp(20px, 2.4vw, 26px);
  color: var(--olive);
  background: transparent;
  border: none;
  border-radius: 0;
  border-bottom: 1.5px solid var(--olive-soft);
  padding: 4px 2px 10px;
  outline: none;
  transition: border-color 160ms ease;
  min-height: 44px;
}
.id-field input:focus { border-bottom-color: var(--mustard); }
.id-field--dob { margin-top: 24px; max-width: 300px; }
.id-form .q-text__row { margin-top: 36px; }

/* --- chip rows --- */
.chiprows { margin-top: 30px; display: flex; flex-direction: column; gap: 24px; }
.chiprow { display: flex; flex-direction: column; gap: 10px; }
.chiprow__label { font-size: 16.5px; color: var(--olive); }
.chiprow__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-family: var(--f-sans);
  font-size: 13px;
  letter-spacing: 0.04em;
  padding: 10px 16px;
  min-height: 44px;
  background: var(--cream-lift);
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--olive);
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
}
@media (hover: hover) and (pointer: fine) { .chip:hover { border-color: var(--olive); } }
.chip.is-on { background: var(--olive); border-color: var(--olive); color: var(--cream); }

/* --- repeater --- */
.screen--repeater .screen__hint { margin-bottom: 8px; }
.rep-added { display: flex; flex-direction: column; gap: 8px; margin: 24px 0 6px; max-width: 560px; }
.rep-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--cream-lift);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--butter);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 14px;
  letter-spacing: 0.02em;
}
.rep-item__remove {
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: var(--olive-mute);
  cursor: pointer;
  padding: 6px 10px;
  min-width: 44px;
  min-height: 44px;
}
@media (hover: hover) and (pointer: fine) { .rep-item__remove:hover { color: var(--mustard); } }

.rep-form { margin-top: 20px; max-width: 560px; }
.rep-search, .rep-text {
  width: 100%;
  font-family: var(--f-sans);
  font-size: 18px;
  color: var(--olive);
  background: transparent;
  border: none;
  border-radius: 0;
  border-bottom: 1.5px solid var(--olive-soft);
  padding: 8px 2px 12px;
  outline: none;
  transition: border-color 160ms ease;
  min-height: 44px;
}
.rep-search:focus, .rep-text:focus { border-bottom-color: var(--mustard); }
.rep-results { display: flex; flex-direction: column; margin-top: 6px; }
.rep-result {
  text-align: left;
  font-family: var(--f-sans);
  font-size: 16.5px;
  color: var(--olive);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--rule);
  padding: 13px 4px;
  min-height: 44px;
  cursor: pointer;
  transition: color 150ms ease, padding-left 150ms ease;
}
@media (hover: hover) and (pointer: fine) { .rep-result:hover { color: var(--mustard); padding-left: 10px; } }
.rep-result--custom { color: var(--mustard); }
.rep-offline { padding: 10px 4px; }

.rep-detail__name { font-weight: 500; font-size: clamp(22px, 3vw, 30px); margin: 6px 0 20px; }
.rep-form .chiprow { margin-top: 22px; }
.rep-form .q-text__row { margin-top: 32px; }
.rep-note { letter-spacing: 0.12em; }

/* ================= engine v3: AI summary + per-ingredient cautions ================= */

.bp-head__summary {
  max-width: 56ch;
  margin: 22px auto 0;
  color: var(--olive-soft);
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.6;
}
.bp-ing__caution {
  margin: 8px 0 0;
  padding-left: 12px;
  border-left: 2px solid #B4552B;
  font-size: 14px;
  line-height: 1.5;
  color: var(--olive);
}

/* card anatomy: the capsule drawing takes whatever height the tallest card
   leaves over, so shorter cards read as intentional rather than empty */
.bp-carousel__slide {
  height: clamp(460px, calc(100svh - 200px), 560px);   /* every card the same size, and never taller than the screen */
  overflow: hidden;
}
.bp-cap__head { flex: 0 0 auto; margin-bottom: 4px; }
.bp-cap__visual {
  flex: 1 1 0;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 0 14px;
}
.bp-cap__visual .bp-vis { width: auto; height: calc(100% - 30px); max-height: 250px; margin: 0; }
.bp-cap__scroll {
  flex: 0 1 auto;
  min-height: 0;
  max-height: 62%;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  outline: none;
}
.bp-cap__scroll.has-more {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent);
}
.bp-cap__visual .bp-cap__note { margin: 0; font-size: 13.5px; }
.bp-cap__list li { padding: 12px 0; }
.bp-cap__why { border-top: 1px solid var(--rule); margin-top: 4px; }
.bp-cap__why summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--olive-soft);
}
.bp-cap__why summary::-webkit-details-marker { display: none; }
.bp-cap__why summary::after {
  content: "";
  width: 12px;
  height: 12px;
  color: var(--mustard);
  background:
    linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
  transition: transform 200ms var(--ease-out);
}
.bp-cap__why[open] summary::after { transform: rotate(45deg); }
.bp-why { padding: 10px 0 12px; border-top: 1px solid var(--rule); }
.bp-why strong { font-weight: 500; font-size: 15px; }
.bp-why__form { display: block; font-size: 12.5px; color: var(--olive-mute); margin-top: 2px; }
.bp-why .bp-ing__why { margin-top: 6px; font-size: 14.5px; }

/* phones: swipe replaces the arrow buttons; dots keep full-size touch targets */
@media (max-width: 560px) {
  .bp-carousel__btn[data-act="prev"], .bp-carousel__btn[data-act="next"] { display: none; }
}

/* ================= results v4: glance, focus, nutrients ================= */

.bp-glance {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  width: min(100%, 520px);
  margin: 26px auto 0;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}
.bp-glance div { background: var(--cream-lift); padding: 14px 10px 12px; }
.bp-glance dt {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--olive-mute);
}
.bp-glance dd {
  margin: 6px 0 0;
  font-family: var(--f-display);
  font-size: 32px;
  line-height: 1;
  color: var(--olive);
}

.bp-section__lede { margin: -10px 0 26px; max-width: 62ch; color: var(--olive-soft); font-size: 16px; }

.bp-focus { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.bp-focus li {
  flex: 1 1 220px;
  background: var(--cream-lift);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--butter);
  border-radius: 10px;
  padding: 12px 16px;
}
.bp-focus strong { display: block; font-weight: 500; font-size: 16px; }
.bp-focus span { display: block; margin-top: 4px; font-size: 14.5px; line-height: 1.5; color: var(--olive-soft); }
.bp-focus li:not(:has(span)) { flex: 0 0 auto; padding: 10px 16px; }

.bp-nutrients { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 760px) { .bp-nutrients { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bp-nu {
  background: var(--cream-lift);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 20px 22px 18px;
}
.bp-nu__head { display: flex; align-items: center; gap: 10px; }
.bp-nu__head h3 { flex: 1 1 auto; min-width: 0; font-size: 19px; line-height: 1.2; }
.bp-nu__when {
  flex-shrink: 0;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--olive);
  background: var(--cream-sink);
  border-radius: 999px;
  padding: 5px 10px;
}
.bp-nu__dose { margin: 8px 0 0; font-size: 14px; color: var(--mustard); }
.bp-nu__dose span { color: var(--olive-mute); font-weight: 400; letter-spacing: 0.01em; }
.bp-nu__rows { margin: 14px 0 0; display: grid; gap: 12px; }
.bp-nu__rows div { padding-top: 12px; border-top: 1px solid var(--rule); }
.bp-nu__rows dt {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--olive-mute);
}
.bp-nu__rows dd { margin: 5px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--olive); }
.bp-ev {
  display: inline-block;
  margin: 0 6px 4px 0;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  vertical-align: 1px;
}
.bp-ev--strong { background: var(--olive); color: var(--cream); }
.bp-ev--good { background: var(--cap-sage); color: var(--olive); }
.bp-ev--early { background: transparent; color: var(--mustard); box-shadow: inset 0 0 0 1px var(--mustard); }
.bp-nu .bp-ing__replaces { margin-top: 14px; }
.bp-nu .bp-ing__caution { margin-top: 12px; }

/* ================= analysis: nutrients appear as the model picks them ================= */

.an-feed { width: min(100%, 620px); min-height: 92px; text-align: center; }
.an-feed__title { margin: 0 0 12px; opacity: 0; transition: opacity 0.3s ease; }
.an-feed.has-picks .an-feed__title { opacity: 1; }
.an-feed__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.an-feed__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--cream-lift);
  font-size: 14px;
  color: var(--olive);
  animation: an-pick 420ms var(--ease-out) both;
}
.an-feed__slot { font-size: 10.5px; font-weight: 500; letter-spacing: 0.18em; color: var(--olive-mute); }
@keyframes an-pick { from { opacity: 0; transform: translateY(8px) scale(0.96); } }
.screen--analysis { gap: 28px; }

/* ================= results: the daily pack, every capsule in one picture ================= */

.pk-card {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(20px, 4.4vw, 40px) clamp(16px, 4.4vw, 44px) clamp(18px, 3.4vw, 30px);
  border-radius: 22px;
  color: var(--olive);
  background:
    radial-gradient(120% 80% at 15% 0%, rgba(255, 246, 214, 0.55), transparent 60%),
    linear-gradient(165deg, #E8C673 0%, var(--butter) 45%, var(--butter-deep) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 1px 2px rgba(62, 57, 24, 0.18),
    0 28px 60px -28px rgba(62, 57, 24, 0.55);
}
/* the embossed border and the tear notch of the printed card */
.pk-card::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 15px;
  border: 1px solid rgba(62, 57, 24, 0.13);
  pointer-events: none;
}
.pk-card::after {
  content: "";
  position: absolute;
  left: -7px;
  top: 34%;
  width: 14px;
  height: 22px;
  border-radius: 999px;
  background: var(--cream);
}

.pk-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.pk-card__day { display: block; font-size: 11px; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; margin-bottom: 10px; }
.pk-card__wm { font-size: clamp(30px, 6vw, 50px); }
.pk-card__stack { font-size: clamp(9.5px, 1.5vw, 11.5px); letter-spacing: 0.22em; line-height: 1.85; border-left-color: rgba(62, 57, 24, 0.7); padding-left: clamp(12px, 2vw, 20px); margin-top: 4px; }
.pk-card__stack span { white-space: normal; }

/* ---- the three capsules, side by side, each with its key ---- */
.cx-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(8px, 2.6vw, 30px);
  margin: clamp(20px, 3.6vw, 32px) 0 clamp(12px, 2.4vw, 20px);
}
.cx-cols[data-n="1"] { grid-template-columns: minmax(0, 220px); justify-content: center; }
.cx-cols[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 220px)); justify-content: center; }
.cx-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 8px 4px 12px;
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 160ms ease;
}
.cx-col__art {
  width: min(100%, 96px);
  filter: drop-shadow(0 12px 12px rgba(62, 57, 24, 0.26));
  transition: transform 220ms var(--ease-out);
}
.cx-svg { display: block; width: 100%; height: auto; overflow: visible; }
.cx-svg text {
  font-family: var(--f-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-anchor: middle;
  dominant-baseline: central;
  font-variant-numeric: tabular-nums;
}
.cx-col__name {
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.35;
}
.cx-col__name .data { display: block; font-size: 10.5px; letter-spacing: 0.22em; color: var(--olive-soft); margin-bottom: 2px; }
.cx-key {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid rgba(62, 57, 24, 0.22);
}
.cx-key__row {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  column-gap: 7px;
  align-items: baseline;
  font-size: 13px;
  line-height: 1.25;
}
.cx-key__row .bp-ing__swatch { width: 10px; height: 10px; border-radius: 2px; align-self: center; }
.cx-key__name { min-width: 0; }
.cx-key__pct { font-size: 12.5px; }
@media (hover: hover) and (pointer: fine) {
  .cx-col:hover { background: rgba(255, 250, 235, 0.32); }
  .cx-col:hover .cx-col__art { transform: translateY(-4px); }
}
.cx-col:focus-visible { outline: 2px solid var(--olive); outline-offset: 2px; }

/* the bands rise into each capsule, one capsule after another */
.cx-fill { animation: cx-rise 900ms var(--ease-out) both; animation-delay: calc(var(--i) * 120ms + 150ms); }
@keyframes cx-rise { from { transform: translateY(170px); } }
.cx-pct { animation: cx-fade 400ms ease both; animation-delay: calc(var(--i, 0) * 120ms + 800ms); }
.cx-col:nth-child(2) .cx-pct { --i: 1; }
.cx-col:nth-child(3) .cx-pct { --i: 2; }
@keyframes cx-fade { from { opacity: 0; } }

.cx-scroll { text-align: center; margin: 22px 0 0; letter-spacing: 0.22em; }

/* ---- each capsule, enlarged, ingredient by ingredient ---- */
.cx-all { max-width: 980px; margin: 0 auto 60px; }
.cx {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  grid-template-areas: "art head" "list list";
  column-gap: 20px;
  row-gap: 26px;
  padding: clamp(36px, 6vw, 64px) 0 clamp(8px, 2vw, 16px);
  border-top: 1px solid var(--rule);
  scroll-margin-top: 12px;
}
.cx__art { grid-area: art; align-self: start; filter: drop-shadow(0 14px 14px rgba(62, 57, 24, 0.24)); }
.cx__art .cx-svg text { font-size: 10px; }
.cx__head { grid-area: head; align-self: center; min-width: 0; }
.cx__head .label { display: block; margin-bottom: 10px; letter-spacing: 0.22em; }
.cx__head h2 { font-size: clamp(28px, 4vw, 44px); line-height: 1.02; }
.cx__meta { margin: 10px 0 0; font-size: 15px; color: var(--olive-soft); }
.cx__stats { margin: 6px 0 0; font-size: 13px; color: var(--mustard); }
.cx__list { grid-area: list; list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.cx-ing {
  background: var(--cream-lift);
  border: 1px solid var(--rule);
  border-left: 6px solid var(--c);
  border-radius: var(--radius);
  padding: 18px 20px 16px;
}
.cx-ing__head { display: flex; align-items: flex-start; gap: 14px; }
.cx-ing__head h3 { font-size: 19px; line-height: 1.2; }
.cx-ing__pct {
  flex-shrink: 0;
  min-width: 56px;
  font-size: 22px;
  line-height: 1;
  padding-top: 1px;
  color: var(--olive);
}
.cx-ing__form { margin: 4px 0 0; font-size: 13px; color: var(--olive-mute); }
.cx-ing__values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0 0;
}
.cx-ing__values div { background: var(--cream); border-radius: 10px; padding: 9px 12px; }
.cx-ing__values dt { font-size: 10px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--olive-mute); }
.cx-ing__values dd { margin: 4px 0 0; font-size: 15px; color: var(--olive); }
.cx-ing .bp-ing__replaces { margin-top: 14px; }
.cx-ing .bp-ing__caution { margin-top: 12px; }

@media (min-width: 860px) {
  .cx {
    grid-template-columns: 210px minmax(0, 1fr);
    grid-template-areas: "art head" "art list";
    grid-template-rows: auto 1fr;
    column-gap: clamp(32px, 5vw, 64px);
  }
  .cx__art { position: sticky; top: 28px; padding: 0 22px; }
  .cx__art .cx-svg text { font-size: 9px; }
}

@media (max-width: 560px) {
  .cx-cols { gap: 6px; }
  .cx-col { padding: 6px 0 10px; gap: 8px; }
  .cx-col__name { font-size: 10.5px; letter-spacing: 0.12em; }
  .cx-key__row { grid-template-columns: 8px minmax(0, 1fr); column-gap: 5px; font-size: 11.5px; }
  .cx-key__row .bp-ing__swatch { width: 8px; height: 8px; }
  .cx-key__name { grid-column: 2; grid-row: 2; overflow-wrap: anywhere; }
  .cx-key__pct { grid-column: 2; grid-row: 1; font-size: 12px; }
  .cx-ing { padding: 16px 16px 14px; }
  .cx-ing__values { gap: 6px; }
  .cx-ing__values div { padding: 8px 9px; }
  .cx-ing__values dt { font-size: 9px; letter-spacing: 0.12em; }
  .cx-ing__values dd { font-size: 14px; }
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.pk-card__foot {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
  font-size: clamp(9.5px, 1.4vw, 11px);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1.7;
}
.pk-card__foot span:last-child { text-align: right; }

.pk-note { max-width: 760px; margin: 12px auto 0; font-size: 13.5px; color: var(--olive-mute); }

@media (max-width: 560px) {
  .pk-card { border-radius: 18px; }
  .pk-card::before { inset: 7px; border-radius: 12px; }
  .pk-card__top { gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .cx-fill, .cx-pct, .an-feed__item { animation: none; }
  .cx-col, .cx-col__art { transition: none; }
}

/* the pack card is the hero: the line above it stays short */
.screen--results { padding-top: clamp(4px, 2vh, 30px); }
.screen--results .bp-head { padding-bottom: 0; border-bottom: 0; margin-bottom: clamp(14px, 2.4vh, 24px); }
.screen--results .cx-top .label { margin-bottom: 6px; }
.bp-summary { color: var(--olive); font-size: clamp(16.5px, 1.3vw, 19px); margin-top: -8px; }
.an-feed__item--goal { background: transparent; border-style: dashed; color: var(--olive-soft); }

/* ================= custom dropdown and calendar (never the native pickers) ================= */

.cs, .dp { position: relative; }
.cs { width: 100%; max-width: 340px; }

.cs__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 12px 14px 12px 16px;
  font-family: var(--f-sans);
  font-size: 16px;
  text-align: left;
  color: var(--olive);
  background: var(--cream-lift);
  border: 1px solid var(--rule);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.cs__btn.is-empty .cs__value { color: var(--olive-mute); }
.cs__value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs__chev {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin-right: 2px;
  border-right: 1.5px solid var(--olive-soft);
  border-bottom: 1.5px solid var(--olive-soft);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 200ms var(--ease-out);
}
.cs.is-open .cs__chev { transform: translateY(2px) rotate(225deg); }
.cs.is-open .cs__btn, .cs__btn:focus-visible { border-color: var(--olive); outline: none; box-shadow: 0 0 0 3px rgba(227, 191, 104, 0.4); }
@media (hover: hover) and (pointer: fine) { .cs__btn:hover { border-color: var(--olive-soft); } }

/* the floating card both controls open */
.cs__list, .dp__pop {
  position: absolute;
  z-index: 40;
  left: 0;
  top: calc(100% + 6px);
  margin: 0;
  background: var(--cream-lift);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(62, 57, 24, 0.08), 0 22px 44px -20px rgba(62, 57, 24, 0.5);
  animation: cs-in 160ms var(--ease-out) both;
}
.cs__list[hidden], .dp__pop[hidden] { display: none; }
@keyframes cs-in { from { opacity: 0; transform: translateY(-4px) scale(0.985); } }

.cs__list {
  list-style: none;
  padding: 6px;
  min-width: 100%;
  width: max-content;
  max-width: min(420px, calc(100vw - 32px));
  max-height: 300px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  outline: none;
}
.cs--up .cs__list { top: auto; bottom: calc(100% + 6px); }
.cs__opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 9px;
  font-size: 15.5px;
  color: var(--olive);
  cursor: pointer;
  user-select: none;
}
.cs__opt.is-active { background: rgba(227, 191, 104, 0.3); }
.cs__opt[aria-selected="true"] { font-weight: 500; }
.cs__opt[aria-selected="true"]::after {
  content: "";
  flex-shrink: 0;
  width: 10px;
  height: 5px;
  border-left: 2px solid var(--mustard);
  border-bottom: 2px solid var(--mustard);
  transform: translateY(-2px) rotate(-45deg);
}

/* calendar field: drawn like the other identity fields */
.dp__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 4px 2px 10px;
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: clamp(18px, 2.1vw, 22px);
  letter-spacing: 0.01em;
  text-align: left;
  color: var(--olive);
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid var(--olive-soft);
  border-radius: 0;
  cursor: pointer;
  transition: border-color 160ms ease;
}
.dp__btn.is-empty .dp__value { color: var(--olive-mute); font-weight: 400; }
.dp.is-open .dp__btn, .dp__btn:focus-visible { border-bottom-color: var(--mustard); outline: none; }
.dp__icon {
  flex-shrink: 0;
  width: 18px;
  height: 17px;
  border: 1.5px solid var(--olive-soft);
  border-radius: 4px;
  background: linear-gradient(var(--olive-soft), var(--olive-soft)) 0 4px / 100% 1.5px no-repeat;
}

.dp__pop { width: min(332px, calc(100vw - 32px)); padding: 14px 12px 12px; }
.dp__head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.dp__nav {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: transparent;
  color: var(--olive);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.dp__nav:disabled { opacity: 0.35; cursor: default; }
@media (hover: hover) and (pointer: fine) { .dp__nav:not(:disabled):hover { border-color: var(--olive); } }
.dp__nav:focus-visible { outline: 2px solid var(--mustard); outline-offset: 1px; }
.dp__head .cs { flex: 1 1 auto; min-width: 0; }
.dp__head .cs--year { flex: 0 0 92px; }
.dp__head .cs__btn { min-height: 40px; padding: 8px 10px 8px 12px; font-size: 14.5px; font-weight: 500; border-radius: 999px; }
.dp__head .cs__list { max-height: 252px; }
.dp__head .cs--year .cs__list { left: auto; right: 0; }

.dp__week, .dp__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.dp__week span {
  padding: 6px 0;
  text-align: center;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--olive-mute);
}
.dp__grid { row-gap: 2px; }
.dp__day {
  justify-self: center;
  width: 100%;
  max-width: 42px;
  aspect-ratio: 1;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-family: var(--f-sans);
  font-size: 14.5px;
  font-variant-numeric: tabular-nums;
  color: var(--olive);
  cursor: pointer;
  transition: background-color 120ms ease;
}
@media (hover: hover) and (pointer: fine) { .dp__day:not(:disabled):not(.is-sel):hover { background: rgba(227, 191, 104, 0.32); } }
.dp__day.is-today { box-shadow: inset 0 0 0 1px var(--rule-strong); }
.dp__day.is-sel { background: var(--olive); color: var(--cream); font-weight: 500; }
.dp__day:disabled { opacity: 0.32; cursor: default; }
.dp__day:focus-visible { outline: 2px solid var(--mustard); outline-offset: 1px; }

@media (prefers-reduced-motion: reduce) {
  .cs__list, .dp__pop { animation: none; }
  .cs__chev, .dp__day { transition: none; }
}