:root {
  --paper: #f4edd8;
  --paper-2: #e9e0c6;
  --ink: #181308;
  --protein: #2f53c8; /* riso blue */
  --carb: #e0a51f;    /* riso gold */
  --fat: #d83621;     /* riso vermillion */
  --go: #407060;      /* riso hunter green — actions only, never data */
}

* { box-sizing: border-box; }
/* The hidden attribute must win over display rules like .field__input{display:flex}
   (a class selector otherwise outranks the UA [hidden] rule, leaking hidden fields). */
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper-2);
  color: var(--ink);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 2.5rem 1.25rem;
  -webkit-font-smoothing: antialiased;
}

/* Paper grain */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.app { width: 100%; max-width: 430px; }

.label {
  background: var(--paper);
  border: 3px solid var(--ink);
  padding: 1.4rem 1.3rem 1.5rem;
  box-shadow: 9px 9px 0 var(--ink);
}

/* ---- Masthead ---- */
.masthead {
  border-bottom: 8px solid var(--ink);
  padding-bottom: 0.7rem;
  margin-bottom: 0.55rem;
}
h1 {
  margin: 0;
  font-size: clamp(1.9rem, 8vw, 2.6rem);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}
.swap { font-weight: 400; }
.tagline {
  margin: 0.55rem 0 0;
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.35;
}
.masthead-link {
  font-weight: 700;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
.masthead-link:hover { text-decoration-thickness: 3px; }

/* ---- "Amount per day" + hero calories ---- */
.per {
  margin: 0.15rem 0 0.1rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 8px solid var(--ink);
  padding-bottom: 0.1rem;
}
.hero__name {
  font-size: clamp(1.4rem, 6vw, 2rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  padding-bottom: 0.55rem;
}
.hero__value {
  font-size: clamp(3.3rem, 17vw, 5rem);
  font-weight: 900;
  line-height: 0.8;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
}

/* ---- Column header ---- */
.col-head {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0.5rem 0 0.4rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  border-bottom: 1.5px solid var(--ink);
}

/* ---- Rows (line item + slider beneath) ---- */
.row {
  display: grid;
  grid-template-columns: 2.75rem 1fr auto auto minmax(3.4rem, auto);
  grid-template-areas:
    "lock name number unit pct"
    "slider slider slider slider slider";
  align-items: center;
  column-gap: 0.55rem;
  row-gap: 0.5rem;
  padding: 0.7rem 0 0.75rem;
  border-top: 1.5px solid var(--ink);
}
.row--protein { --c: var(--protein); }
.row--carb { --c: var(--carb); }
.row--fat { --c: var(--fat); }
.row-calories { --c: var(--ink); border-top: none; }

.row__name {
  grid-area: name;
  font-weight: 800;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
}
.row .unit { grid-area: unit; font-weight: 400; font-size: 0.82rem; }
.row .readout {
  grid-area: pct;
  text-align: right;
  font-weight: 800;
  font-size: 1.1rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.readout__pct { font-size: 0.62em; margin-left: 0.05em; }
.readout__kcal {
  display: block;
  margin-top: 0.2rem;
  font-weight: 400;
  font-size: 0.66rem;
  letter-spacing: 0.02em;
}
.row-calories .readout {
  font-size: 0.64rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ---- Lock buttons ---- */
.lock {
  grid-area: lock;
  width: 2.4rem;
  height: 2.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 0;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}
.lock[aria-pressed="true"] { background: color-mix(in srgb, var(--c, var(--ink)) 38%, var(--paper)); }
.lock:active { box-shadow: 2px 2px 0 var(--ink); }
.lock:disabled { opacity: 0.3; cursor: not-allowed; }

.lock__icon {
  width: 1.25rem;
  height: 1.25rem;
  display: block;
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.2;
  stroke-linecap: square;
}
.lock[aria-pressed="false"] .lock__shackle--closed,
.lock[aria-pressed="true"] .lock__shackle--open { display: none; }
.lock[aria-pressed="true"] .lock__body { fill: var(--ink); }

input:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---- Number inputs ---- */
input[type="number"] {
  grid-area: number;
  width: 5.2rem;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 0;
  padding: 0.38rem 0.45rem;
  font: inherit;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
input[type="number"]:focus { outline: none; box-shadow: 3px 3px 0 var(--ink); }

/* ---- Sliders (inked bar with a square thumb) ---- */
input[type="range"] {
  grid-area: slider;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 12px;
  box-sizing: border-box;
  border: 2px solid var(--ink);
  background: linear-gradient(
    to right,
    var(--c, var(--ink)) calc(var(--val, 0) * 1%),
    transparent calc(var(--val, 0) * 1%)
  );
}
input[type="range"]::-moz-range-track {
  height: 12px;
  box-sizing: border-box;
  border: 2px solid var(--ink);
  background: transparent;
}
input[type="range"]::-moz-range-progress {
  height: 12px;
  background: var(--c, var(--ink));
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 26px;
  margin-top: -9px; /* center 26px thumb over the 12px track box */
  border-radius: 0;
  background: var(--ink);
  border: 2px solid var(--paper);
}
input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 24px;
  border-radius: 0;
  background: var(--ink);
  border: 2px solid var(--paper);
}
input[type="range"]:active::-webkit-slider-thumb { background: var(--c, var(--ink)); }
input[type="range"]:active::-moz-range-thumb { background: var(--c, var(--ink)); }
input[type="range"]:focus-visible { outline: none; }
input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--ink); outline-offset: 2px; }
input[type="range"]:focus-visible::-moz-range-thumb { outline: 2px solid var(--ink); outline-offset: 2px; }
input[type="range"]:disabled { cursor: not-allowed; }

/* ---- Calorie split bar ---- */
.split {
  border-top: 8px solid var(--ink);
  margin-top: 0.45rem;
  padding-top: 0.75rem;
}
.split__head {
  margin: 0 0 0.55rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.bar {
  display: flex;
  height: 30px;
  border: 2.5px solid var(--ink);
  overflow: hidden;
}
.bar-seg { height: 100%; }
.bar-seg + .bar-seg { border-left: 2px solid var(--ink); }
.bar-protein { background: var(--protein); }
.bar-carb { background: var(--carb); }
.bar-fat { background: var(--fat); }

.bar-legend {
  display: flex;
  gap: 1.1rem;
  margin-top: 0.6rem;
  font-size: 0.78rem;
  font-weight: 700;
}
.key { display: inline-flex; align-items: center; }
.key::before {
  content: "";
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  border: 1.5px solid var(--ink);
  margin-right: 0.35rem;
}
.key-protein::before { background: var(--protein); }
.key-carb::before { background: var(--carb); }
.key-fat::before { background: var(--fat); }

/* Low-fat warning: reuses the riso palette (vermillion danger, gold caution)
   as a left rule + tint; text stays ink for legibility. */
.fat-warn {
  margin: 0.15rem 0 0;
  padding: 0.55rem 0.7rem;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.35;
  border: 2px solid var(--ink);
  border-left-width: 6px;
}
.fat-warn--danger { border-left-color: var(--fat); background: #f7d9d3; }
.fat-warn--caution { border-left-color: var(--carb); background: #f6e7c0; }

/* ---- One-shot "printed in" stagger ---- */
/* Slides only, no fade: an element that first paints at opacity 0 is
   disqualified as an LCP candidate, and since every candidate above the fold
   carries this animation, fading in meant the page reported no LCP at all
   (Lighthouse aborts the run with NO_LCP). transform doesn't disqualify. */
@keyframes ink-in {
  from { transform: translateY(8px); }
  to { transform: none; }
}
.masthead, .per, .hero, .col-head, .row, .split {
  animation: ink-in 0.45s both;
}
.masthead { animation-delay: 0.02s; }
.per { animation-delay: 0.08s; }
.hero { animation-delay: 0.12s; }
.row-calories { animation-delay: 0.16s; }
.col-head { animation-delay: 0.20s; }
.row--protein { animation-delay: 0.24s; }
.row--carb { animation-delay: 0.28s; }
.row--fat { animation-delay: 0.32s; }
.split { animation-delay: 0.36s; }

/* ---- Touch / small screens ---- */
@media (max-width: 520px) {
  body { padding: 1.5rem 0.9rem; }
  .label { padding: 1.2rem 1.05rem 1.35rem; box-shadow: 6px 6px 0 var(--ink); }
}
@media (max-width: 520px), (pointer: coarse) {
  .lock { width: 44px; height: 44px; }
  .lock__icon { width: 1.5rem; height: 1.5rem; }
  input[type="number"] {
    min-height: 44px;
    font-size: 1rem; /* >=16px: prevents iOS zoom-on-focus */
    -moz-appearance: textfield;
    appearance: textfield; /* drop spinners — awkward on touch; use slider or type */
  }
  input[type="number"]::-webkit-outer-spin-button,
  input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  input[type="range"] { height: 40px; }
  input[type="range"]::-webkit-slider-thumb { width: 18px; height: 32px; margin-top: -12px; }
  input[type="range"]::-moz-range-thumb { width: 16px; height: 30px; }
}

/* ---- BMR / calorie-target estimator ---- */
.label--bmr {
  margin-top: 1.5rem;
  animation: ink-in 0.45s both;
  animation-delay: 0.4s;
}
.label--bmr h2 {
  margin: 0;
  font-size: clamp(1.5rem, 6.5vw, 2.1rem);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

/* Unit toggle (Metric / Imperial) */
.units {
  display: flex;
  margin: 0.9rem 0 0.2rem;
  border: 2.5px solid var(--ink);
}
.unit-tab {
  flex: 1;
  padding: 0.55rem;
  background: var(--paper);
  color: var(--ink);
  border: none;
  font: inherit;
  font-weight: 800;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
}
.unit-tab + .unit-tab { border-left: 2.5px solid var(--ink); }
.unit-tab[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* Input grid */
.bmr-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 0.7rem;
  padding: 0.85rem 0 0.4rem;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding-top: 0.55rem;
  border-top: 1.5px solid var(--ink);
}
.field--wide { grid-column: 1 / -1; }
.field__name {
  font-weight: 700;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}
.field__input { display: flex; align-items: center; gap: 0.4rem; }
.field__input input[type="number"] {
  grid-area: auto; /* reset the macro-row placement */
  width: 100%;
  min-width: 0;
}
.field__input .unit { font-weight: 400; font-size: 0.82rem; }
.field__input--ftin { gap: 0.3rem; }

select#bmr-activity {
  width: 100%;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 0;
  padding: 0.45rem 0.5rem;
  font: inherit;
  font-weight: 700;
}
select#bmr-activity:focus { outline: none; box-shadow: 3px 3px 0 var(--ink); }

/* Segmented controls (sex / goal) */
.seg { display: flex; border: 2px solid var(--ink); }
.seg__btn {
  flex: 1;
  padding: 0.5rem 0.2rem;
  background: var(--paper);
  color: var(--ink);
  border: none;
  font: inherit;
  font-weight: 800;
  font-size: 0.85rem;
  cursor: pointer;
}
.seg__btn + .seg__btn { border-left: 2px solid var(--ink); }
.seg__btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* Output stats */
.bmr-out {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 2.5px solid var(--ink);
  margin-top: 0.6rem;
}
.bmr-stat {
  padding: 0.6rem 0.55rem 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.bmr-stat + .bmr-stat { border-left: 2px solid var(--ink); }
.bmr-stat__name {
  display: flex;
  flex-direction: column;
  font-weight: 800;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.bmr-stat__name small {
  font-weight: 400;
  font-size: 0.62rem;
  text-transform: none;
  letter-spacing: 0;
}
.bmr-stat__value {
  font-size: clamp(1.4rem, 7vw, 1.9rem);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.bmr-stat--target { background: var(--ink); color: var(--paper); }

.use-target {
  width: 100%;
  margin-top: 0.75rem;
  padding: 0.8rem;
  background: var(--go);
  color: var(--paper);
  border: 2.5px solid var(--ink);
  border-radius: 0;
  box-shadow: 5px 5px 0 var(--ink);
  font: inherit;
  font-weight: 900;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  cursor: pointer;
}
.use-target:active { box-shadow: 2px 2px 0 var(--ink); transform: translate(3px, 3px); }
.use-target:disabled {
  background: var(--paper-2);
  color: var(--ink);
  opacity: 0.5;
  box-shadow: none;
  cursor: not-allowed;
}

/* Protein-target row (a label + input/button row layout) */
.field__hint {
  font-weight: 400;
  font-size: 0.66rem;
  text-transform: none;
  letter-spacing: 0;
}
.exercise-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
  align-items: center;
}
.exercise-row .field__input { min-width: 0; }
.exercise-row select {
  width: 100%;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 0;
  padding: 0.45rem 0.5rem;
  font: inherit;
  font-weight: 700;
}
.exercise-row select:focus { outline: none; box-shadow: 3px 3px 0 var(--ink); }
.exercise-row input[type="number"] { width: 4.5rem; }
.field--protein-bw .exercise-row { grid-template-columns: 1fr auto; }
.field--protein-bw input[type="number"] { width: 100%; }

/* Cut/bulk calorie-offset slider row */
.field--offset .field__name { display: flex; justify-content: space-between; gap: 0.5rem; }
.offset-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.7rem;
  align-items: center;
}
.offset-row input[type="range"] { grid-area: auto; width: 100%; }
.offset-val {
  font-weight: 800;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.apply-btn {
  background: var(--protein);
  color: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 0;
  padding: 0.45rem 0.7rem;
  font: inherit;
  font-weight: 800;
  font-size: 0.82rem;
  cursor: pointer;
  white-space: nowrap;
}
.apply-btn:active { box-shadow: 2px 2px 0 var(--ink); }
.apply-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Energy balance (deficit / surplus) */
.balance {
  border: 2.5px solid var(--ink);
  margin-top: 0.9rem;
}
.balance__head {
  margin: 0;
  padding: 0.5rem 0.7rem;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.balance__io {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.4rem;
  padding: 0.7rem;
  border-bottom: 2px solid var(--ink);
}
.balance__cell { display: flex; flex-direction: column; gap: 0.15rem; }
.balance__cell small { font-size: 0.62rem; font-weight: 400; }
.balance__cell b {
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.balance__op { font-size: 1.3rem; font-weight: 900; }
.balance__result {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.7rem;
  text-align: center;
}
.balance__verdict {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.balance__delta {
  font-size: clamp(1.8rem, 9vw, 2.4rem);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.balance__weight { font-size: 0.8rem; font-weight: 700; }
.balance--deficit { --bal: var(--protein); }
.balance--surplus { --bal: var(--fat); }
.balance--deficit .balance__verdict,
.balance--deficit .balance__delta { color: var(--protein); }
.balance--surplus .balance__verdict,
.balance--surplus .balance__delta { color: var(--fat); }

.trajectory {
  padding: 1rem 0.9rem 0.9rem;
  border-top: 2px solid var(--ink);
}
.trajectory__title {
  margin: 0 0 0.75rem;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.trajectory__table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.trajectory__table th[scope="col"] {
  font-size: 0.62rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: right;
  padding: 0 0 0.5rem;
}
.trajectory__table th[scope="col"]:first-child { text-align: left; }
.trajectory__table th[scope="row"] {
  text-align: left;
  font-weight: 600;
  font-size: 0.9rem;
}
.trajectory__table td {
  text-align: right;
  font-size: 0.95rem;
  font-weight: 700;
  padding: 0.5rem 0;
}
.trajectory__table tbody tr + tr th,
.trajectory__table tbody tr + tr td {
  border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}
.trajectory__table tr:last-child th,
.trajectory__table tr:last-child td {
  font-weight: 900;
  padding-top: 0.6rem;
  border-top: 1.5px solid color-mix(in srgb, var(--ink) 25%, transparent);
}
.traj-loss { color: var(--protein); }
.traj-gain { color: var(--fat); }
.traj-flat { font-weight: 400; }
.trajectory__foot {
  margin: 0.85rem 0 0;
  font-size: 0.68rem;
  font-style: italic;
  text-align: center;
}

@media (max-width: 520px), (pointer: coarse) {
  .unit-tab, .seg__btn { min-height: 44px; }
  select#bmr-activity, .exercise-row select, .apply-btn { min-height: 44px; }
  select#bmr-activity, .exercise-row select { font-size: 1rem; }
}

/* ---- Info / FAQ panel ---- */
.label--info { margin-top: 1.5rem; animation: ink-in 0.45s both; animation-delay: 0.4s; }
.info__head {
  margin: 1.5rem 0 0.55rem;
  font-size: 1.25rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  border-bottom: 6px solid var(--ink);
  padding-bottom: 0.45rem;
}
.label--info > .info__head:first-child { margin-top: 0; }
.info__lead { margin: 0; font-size: 0.92rem; line-height: 1.5; }
.faq { margin: 0; }
.faq__item {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1.5px solid var(--ink);
}
.faq__item:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.faq dt { font-weight: 800; font-size: 1rem; }
.faq dd { margin: 0.35rem 0 0; font-size: 0.9rem; line-height: 1.5; }
.disclaimer { margin: 1.2rem 0 0; font-size: 0.74rem; font-style: italic; }

/* ---- Desktop: both tools on one screen, reference below the fold ----
   The single column is right for phones but wastes a wide screen. Here the two
   interactive cards — calculator and estimator — sit side by side in one row so
   that everything that matters, including the energy balance at the foot of the
   estimator, fits within a 1080p screen without scrolling. The FAQ/info is
   reference material: it spans full width below the fold and is reachable from
   the "FAQ" link in the masthead, so it never pushes the tools off-screen. */
@media (min-width: 900px) {
  body { padding: 1.75rem 2rem; align-items: flex-start; }

  .app {
    max-width: 1040px;
    display: grid;
    grid-template-columns: minmax(380px, 1fr) minmax(380px, 1fr);
    align-items: start;
    column-gap: 1.75rem;
    row-gap: 1.6rem;
  }

  .label { grid-column: 1; grid-row: 1; box-shadow: 12px 12px 0 var(--ink); }
  .label--bmr { grid-column: 2; grid-row: 1; margin-top: 0; }
  .label--info { grid-column: 1 / -1; grid-row: 2; margin-top: 0; }

  /* Tighten the estimator's vertical rhythm and pair the wide fields 2-up so the
     whole card — through the energy balance — fits a maximized 1080p browser
     (whose usable height is well under 1080 once chrome/scaling is counted). */
  .label--bmr .masthead { padding-bottom: 0.5rem; margin-bottom: 0.4rem; }
  .label--bmr h2 { font-size: clamp(1.4rem, 5vw, 1.8rem); }
  .label--bmr .tagline { margin-top: 0.4rem; }
  .label--bmr .units { margin-top: 0.6rem; }
  .label--bmr .bmr-grid { gap: 0.3rem 0.7rem; padding: 0.55rem 0 0.25rem; }
  .label--bmr .field { padding-top: 0.35rem; }
  /* Activity and Protein pair up 2-per-row instead of each claiming a full row;
     Goal (and the cut/bulk offset slider it reveals) stay full-width below them. */
  .label--bmr .field--wide { grid-column: auto; }
  .label--bmr .field--goal,
  .label--bmr .field--offset { grid-column: 1 / -1; }
  .label--bmr .bmr-out { margin-top: 0.5rem; }
  .label--bmr .bmr-stat { padding: 0.45rem 0.5rem 0.5rem; }
  .label--bmr .use-target { margin-top: 0.5rem; padding: 0.6rem; }
  .label--bmr .balance { margin-top: 0.5rem; }
  .label--bmr .balance__head { padding: 0.4rem 0.7rem; }
  .label--bmr .balance__io { padding: 0.5rem 0.7rem; }
  .label--bmr .balance__result { padding: 0.5rem 0.7rem; }
  .label--bmr .trajectory { padding: 0.9rem 0.7rem; }
  .label--bmr .disclaimer { margin-top: 0.55rem; }

  /* Keep prose to a readable measure, then flow the FAQ across two columns so
     the reference band stays compact instead of one very wide line. */
  .label--info > .info__head:first-child { margin-top: 0; }
  .label--info .info__lead { max-width: 70ch; }
  .label--info .faq {
    column-count: 2;
    column-gap: 2.5rem;
  }
  /* Each question + answer is one unbreakable group, so a dt never lands in a
     different column from its dd. */
  .label--info .faq__item { break-inside: avoid; }
}

/* Wider still: let the spread breathe and nudge the columns apart. */
@media (min-width: 1240px) {
  body { padding: 4rem 2rem; }
  .app { max-width: 1120px; column-gap: 2.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}