@font-face { font-family: Inter; src: url('assets/Inter-Regular.ttf'); }
@font-face { font-family: Inter; src: url('assets/Inter-SemiBold.ttf'); font-weight: 600; }
@font-face { font-family: Serif; src: url('assets/SourceSerif4-Medium.ttf'); font-weight: 500; }
@font-face { font-family: Serif; src: url('assets/SourceSerif4-MediumIt.ttf'); font-weight: 500; font-style: italic; }
@font-face { font-family: Mono; src: url('assets/IBMPlexMono-Medium.ttf'); }
:root {
  --bg: #060f18; --surface: #0f1f3a; --surface3: #1b2e4e;
  --text: #f5f2ea; --muted: #b5b6b5; --line: #ffffff24;
  --amber: #f4b223; --ink: #1a1206; --error: #f6b5a8;
  --selected: rgba(244,178,35,.16); --selected-border: rgba(244,178,35,.35);
}
* { box-sizing: border-box; letter-spacing: 0; }
body { margin: 0; background: #e9eced; color: #18232b; font: 14px Inter, sans-serif; }
button, input, select { font: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid #8ebff1; outline-offset: 3px; }
button:disabled { opacity: .4; cursor: default; }
h1, h2, h3, p { margin: 0; }
header { padding: 24px 28px 16px; border-bottom: 1px solid #18232b20; background: #f8f9f9; }
header h1 { font-size: 24px; margin-bottom: 8px; }
header p { color: #54606a; line-height: 1.6; }
.reviewbar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.reviewbar button { min-height: 38px; border: 1px solid #bac3c8; border-radius: 6px; background: transparent; color: #25313b; padding: 8px 14px; }
.reviewbar button[aria-pressed=true] { background: #18232b; color: white; border-color: #18232b; }
.reviewbar span { font-size: 12px; color: #64717b; }
.workspace { padding: 28px; display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 30px; align-items: start; max-width: 1720px; margin: auto; }
.workspace.single { display: block; max-width: 450px; }
.frame { min-width: 0; }
.frame-label { display: flex; justify-content: space-between; margin-bottom: 12px; font-size: 13px; font-weight: 600; }
.frame-label span { color: #626f78; font-size: 11px; font-weight: 400; }
.phone { background: var(--bg); color: var(--text); width: 100%; max-width: 402px; height: 874px; border: 1px solid #273440; border-radius: 32px; margin: auto; overflow: hidden; display: flex; flex-direction: column; }
.status { height: 55px; padding: 19px 25px 0; display: flex; justify-content: space-between; flex: none; font-size: 14px; font-weight: 600; }
.island { width: 100px; height: 25px; background: #000; border-radius: 20px; margin-top: -9px; }
.status-right { font-size: 11px; padding-top: 2px; }
.screen-top { padding: 4px 22px 0; flex: none; }
.nav { display: flex; align-items: center; justify-content: space-between; height: 44px; }
.icon { width: 44px; height: 44px; border: 0; background: none; color: var(--text); font-size: 28px; padding: 0; text-align: left; flex: none; }
.eyebrow { color: var(--muted); font: 10px Mono, monospace; text-transform: uppercase; }
.progress { height: 3px; background: #ffffff12; margin: 8px 0 0; border-radius: 3px; overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--amber); }
.content { flex: 1; min-height: 0; overflow-y: auto; padding: 26px 22px 24px; scrollbar-width: thin; scrollbar-color: #283341 transparent; }
.heading { font: 500 34px/1.12 Serif, Georgia, serif; text-wrap: balance; }
.heading em { color: var(--amber); }
.intro { color: var(--muted); font-size: 14px; line-height: 1.55; margin-top: 12px; }
.intro:empty { display: none; }
.step-heading[data-step="1"] .heading { font-size: 30px; }
.preview-promise { margin-bottom: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.5; color: var(--muted); }
.preview-promise p + p { margin-top: 8px; }
.footer:has(.preview-promise) .legal-note { margin-bottom: 16px; }
.preview-promise strong { color: var(--text); font-weight: 600; }
.step-heading { margin-bottom: 24px; position: relative; }
.meal-illustration { width: 40px; height: 40px; object-fit: contain; margin-left: auto; }
.label, legend, .field > span { display: block; color: #dce0dd; font: 600 13px/1.5 Inter, sans-serif; margin: 0 0 10px; }
.section { margin: 0 0 24px; }
.question-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 18px 0 8px; }
.question-label .label { margin: 0; }
.info-button { width: 44px; height: 44px; flex: 0 0 44px; position: relative; background: none; border: 0; color: var(--muted); font: 600 13px Inter, sans-serif; }
.info-button::after { content: ''; position: absolute; inset: 12px; border: 1px solid currentColor; border-radius: 50%; }
.info-button:hover { color: var(--amber); }
.segments, .days, .hard-days, .allergies { display: grid; gap: 8px; margin-bottom: 18px; background: none; padding: 0; }
.segments { grid-template-columns: repeat(3, minmax(0,1fr)); }
.segments:has(button:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0,1fr)); }
.segments.option-grid, .allergies { grid-template-columns: repeat(2, minmax(0,1fr)); }
.segments.sex-options { grid-template-columns: 1fr 1fr 1.6fr; }
.segments.time-options { grid-template-columns: 1fr 1fr 1.35fr; }
.days { grid-template-columns: repeat(7, minmax(0,1fr)); gap: 4px; }
.hard-days { display: flex; flex-wrap: wrap; }
.segments button, .day, .allergies button {
  min-height: 46px; min-width: 0; padding: 10px 9px; border: 1px solid var(--line);
  border-radius: 999px; background: var(--surface); color: var(--text);
  font: 400 13px/1.35 Inter, sans-serif;
}
.day { padding: 10px 0; font-size: 12px; }
.hard-days .day { width: 44px; }
.segments button[aria-pressed=true], .day[aria-pressed=true], .allergies button[aria-pressed=true] { background: var(--amber); border-color: var(--amber); color: var(--ink); }
.segments[data-control="units"] { width: 196px; }
.segments.choice-list { grid-template-columns: 1fr; gap: 6px; }
.choice-list button { border-radius: 18px; min-height: 48px; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; font-size: 14px; }
.choice-list button[aria-pressed=true] { background: var(--selected); border-color: var(--selected-border); color: var(--text); }
.selection-mark { width: 20px; height: 20px; flex: 0 0 20px; border: 1px solid #ffffff40; border-radius: 50%; color: transparent; font: 600 12px/18px Inter, sans-serif; text-align: center; }
[aria-pressed=true] > .selection-mark, [aria-checked=true] > .selection-mark { border-color: var(--amber); color: var(--ink); background: var(--amber); }
.allergies .none { grid-column: 1/-1; }
.fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.fields.three { grid-template-columns: 1fr 1fr 1.3fr; }
.date-fields { border: 0; padding: 0; margin: 0 0 20px; min-width: 0; }
.date-fields legend { padding: 0; }
.field { display: block; min-width: 0; margin: 0 0 20px; }
.date-fields .field { margin: 0; }
.fields .field > span { font-family: Inter, sans-serif; text-transform: none; font-size: 12px; margin-bottom: 7px; }
.number-entry { display: flex; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; min-height: 52px; padding-right: 12px; }
.number-entry:focus-within { border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber); }
.number-entry input:focus-visible { outline: none; }
.number-entry input { width: 100%; min-width: 0; border: 0; background: none; color: var(--text); padding: 14px 12px; font-size: 16px; outline-offset: -2px; }
.number-entry > span { font-size: 12px; color: var(--muted); }
.number-entry input::placeholder { color: #798798; }
.hint, .routine-note { font-size: 12px; color: var(--muted); line-height: 1.6; margin: 10px 0 18px; }
.routine-note p + p { margin-top: 8px; }
.movement-section { margin-top: 22px; }
.choice { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 94px; padding: 18px; margin-bottom: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; color: var(--text); text-align: left; }
.choice[aria-checked=true] { border-color: var(--selected-border); background: var(--selected); }
.choice > span:first-child { flex: 1; }
.choice > .selection-mark { align-self: flex-start; margin-top: 1px; }
.choice strong { font-size: 16px; font-weight: 600; display: block; }
.choice small { display: block; margin-top: 7px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.radio { display: none; }
.disclosure, .answer-row { width: 100%; min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border: 0; border-top: 1px solid var(--line); background: none; text-align: left; color: var(--text); font-size: 13px; }
.chevron { font: 24px/1 Inter, sans-serif; color: var(--muted); flex: none; }
.disclosure[aria-expanded=true] .chevron { transform: rotate(180deg); }
.meal-disclosure { margin-top: 18px; }
.meal-disclosure.custom-selected { border: 1px solid var(--selected-border); border-radius: 18px; padding: 16px 18px; background: var(--selected); }
.meal-disclosure .custom-status { color: var(--amber); }
.meal-disclosure small, .answer-detail { display: block; color: var(--muted); font-size: 12px; line-height: 1.6; margin-top: 7px; }
.custom { padding: 10px 0 20px; }
.meal-pills { margin-bottom: 32px; }
.prep-rows { display: grid; gap: 12px; }
.prep-row { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 76px; padding: 16px 18px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); color: var(--text); text-align: left; }
.prep-row strong { display: block; font-size: 14px; font-weight: 600; }
.prep-row small { display: block; margin-top: 6px; font-size: 13px; color: var(--muted); }
.prep-sheet .eyebrow { margin-bottom: 8px; }
.prep-sheet { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
.custom h3 { font: 600 13px/1.6 Inter, sans-serif; color: var(--text); margin: 16px 0 10px; }
.field:has([data-field="target"]) { margin-bottom: 8px; }
.pace-heading { position: relative; margin-top: 0; margin-bottom: 16px; }
.pace-heading .disclosure { border-top: 0; border-bottom: 1px solid var(--line); padding-top: 12px; padding-bottom: 16px; min-height: 56px; }
.pace-heading .disclosure > span:first-child { padding-right: 44px; }
.pace-heading .info-button { position: absolute; right: 32px; top: 50%; transform: translateY(-50%); }
.custom-meals + h3 { margin-top: 32px; margin-bottom: 16px; }
.custom > label { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 54px; margin: 16px 0; font-size: 13px; }
.custom select { width: 58%; min-width: 0; height: 52px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--text); padding: 12px 10px; font-size: 14px; }
.custom .segments[data-control="cookingWeek"] { margin-bottom: 26px; }
.review-action { margin-top: 16px; padding-top: 20px; padding-bottom: 20px; }
.custom-meals { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.custom-meals label { display: flex; align-items: center; gap: 8px; min-height: 46px; font-size: 12px; line-height: 1.4; }
.custom-meals input { width: 20px; height: 20px; flex: none; accent-color: var(--amber); }
.callout { color: var(--muted); border-left: 2px solid var(--amber); padding-left: 12px; margin: 20px 0 0; font-size: 12px; line-height: 1.6; }
.privacy-note, .legal-note a { color: var(--muted); text-underline-offset: 3px; }
.privacy-note { font-size: 12px; line-height: 1.6; display: inline-block; margin-top: 4px; }
.footer { flex: none; padding: 12px 22px 0; background: var(--bg); }
.footer-reason, .inline-error { font-size: 12px; line-height: 1.5; color: var(--error); margin-bottom: 10px; }
.footer-reason:empty { display: none; }
.legal-note { color: var(--muted); font-size: 10px; line-height: 1.8; margin-bottom: 24px; }
.cta { min-height: 54px; width: 100%; border: 0; border-radius: 999px; background: var(--amber); color: var(--ink); font: 600 15px Inter, sans-serif; padding: 14px; }
.cta.is-incomplete { background: #d9aa43; color: var(--ink); }
.homebar { height: 40px; display: grid; place-items: center; padding-top: 8px; }
.homebar::after { content: ''; height: 4px; width: 112px; border-radius: 4px; background: #eee; }
.sheet-backdrop { position: fixed; inset: 0; z-index: 100; background: #0009; display: flex; justify-content: center; align-items: flex-end; }
.review-sheet { width: min(100%,460px); max-height: 90dvh; overflow-y: auto; padding: 24px; background: var(--bg); color: var(--text); border-radius: 8px 8px 0 0; }
.sheet-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.sheet-heading h2 { font: 500 28px/1.2 Serif, Georgia, serif; }
.sheet-heading .icon { text-align: right; }
.info-sheet p { color: var(--muted); font-size: 14px; line-height: 1.7; margin: 18px 0; }
.review-sheet .cta { margin-top: 20px; }
.annotations { max-width: 1120px; margin: auto; padding: 0 28px 40px; color: #52616a; line-height: 1.7; }
.annotations h2 { font-size: 17px; color: #18232b; margin-bottom: 12px; }
.translations { display: grid; grid-template-columns: repeat(auto-fit,minmax(225px,1fr)); gap: 0 24px; }
.translations p { border-top: 1px solid #18232b20; padding: 10px 0; }
.translations strong { display: block; color: #26353e; }
.end-review { padding: 30px 10px; line-height: 1.7; }
.end-review .cta { margin: 20px 0; }
.link { border: 0; background: none; color: inherit; min-height: 44px; }
@media (max-width:600px) {
  header { padding: 14px 16px; }
  header h1, header p, .reviewbar span, .annotations { display: none; }
  .reviewbar { margin: 0; gap: 6px; }
  .reviewbar button { padding: 8px 11px; }
  .workspace { padding: 20px 12px; grid-template-columns: minmax(0,1fr); }
  .workspace.single { padding: 8px 0 0; max-width: none; }
  .workspace.single .frame-label, .workspace.single .status { display: none; }
  .workspace.single .phone { max-width: none; height: calc(100dvh - 74px); border: 0; border-radius: 0; }
}
@media (max-width:350px) {
  .screen-top, .content, .footer { padding-left: 16px; padding-right: 16px; }
  .heading { font-size: 32px; }
  .segments { gap: 6px; }
  .segments button { font-size: 12px; padding-left: 6px; padding-right: 6px; }
  .choice-list button { padding-left: 12px; padding-right: 12px; font-size: 14px; }
  .day { font-size: 11px; }
  .days { padding: 3px; gap: 2px; }
  .custom-meals { grid-template-columns: 1fr; }
}