/* Svelta's personal space: a responsive layer over the existing tracker. */
:root {
  --ink: #172c3b;
  --muted: #525e66;
  --paper: #f1f5f8;
  --surface: #ffffff;
  --line: #d9e0e5;
  --blue: #274961;
  --navy: #172c3b;
  --cyan: #91cbf5;
  --soft: #e7eef3;
  --mint: #dfeaf2;
  --lime: #91cbf5;
  --peach: #ffe0ca;
  --radius: 24px;
}

html { scroll-padding-top: 32px; }
body { font-family: "Segoe UI", Arial, sans-serif; font-size: 16px; line-height: 1.6; }
[hidden] { display: none !important; }
.wrap { width: min(1200px, calc(100% - 80px)); }
main.wrap { min-height: 65vh; }
a { color: var(--blue); }
h1, h2, h3 { color: var(--ink); }
h1 { font-weight: 650; }
h1 span { color: #4f6879; }
h2 { font-size: 28px; line-height: 1.2; }
h3 { font-size: 21px; line-height: 1.3; }
button, input, select, textarea { font-family: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid #305b7a;
  outline-offset: 4px;
}
[tabindex="-1"]:focus { outline: none; }
.skip { border: 2px solid var(--ink); border-radius: 12px; z-index: 100; }
.eyebrow { font-size: 11px; line-height: 1.5; letter-spacing: .13em; color: #425766; font-weight: 750; }
.tiny-spark { font-size: 20px; vertical-align: -2px; margin-right: 7px; }
.primary, .secondary, .quiet, .danger, .icon-button {
  min-height: 48px;
  border-radius: 14px;
  padding: 12px 19px;
  font-size: 14px;
  font-weight: 650;
  transition: background-color .18s, box-shadow .18s, transform .18s;
}
.primary { background: var(--ink); color: #fff; }
.primary:hover { background: #293f4f; box-shadow: 0 5px 16px #172c3b14; }
.secondary { border-color: #cbd4da; background: #fff; }
.secondary:hover { background: #e6eff5; }
.quiet { color: var(--blue); }
.danger { color: #9b2935; border-color: #e4c4c8; }
.danger:hover { background: #fff0f0; }
.icon-button { min-width: 48px; padding: 5px 12px; }
.primary:active, .secondary:active, .round-action:active { transform: translateY(1px); }
.full { margin-top: 18px; }

/* The landing screen gives the product room to be seen. */
.topbar { background: transparent; border: 0; }
.topbar-inner { min-height: 104px; gap: 20px; flex-wrap: nowrap; }
.brand { flex-shrink: 0; }
.brand img { width: 154px; height: 43px; }
.brand-divider { width: 1px; height: 27px; background: #cbd4da; }
.product-name { color: #596670; font-size: 13px; white-space: nowrap; }
.header-start {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  min-height: 46px;
  border: 1px solid #bfcad2;
  border-radius: 99px;
  padding: 9px 20px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}
.header-start:hover { background: var(--mint); }
.desktop-nav, .app-nav { display: none; }
.landing {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  align-items: center;
  column-gap: 30px;
  padding-top: 24px;
}
.hero-copy { padding: 14px 0 36px; position: relative; z-index: 2; }
.hero-copy .eyebrow { margin-bottom: 20px; }
.hero-copy h1 { font-size: clamp(52px, 5.2vw, 76px); line-height: 1.04; letter-spacing: -.065em; }
.hero-description { font-size: 17px; line-height: 1.7; margin-top: 26px; color: #505a61; }
.hero-cta { margin-top: 28px; gap: 34px; min-height: 58px; padding: 16px 25px; border-radius: 99px; font-size: 16px; }
.hero-cta span { font-size: 23px; line-height: 1; }
.hero-reassurance { max-width: 345px; margin-top: 15px; font-size: 12px; color: #5b646b; line-height: 1.55; }
.hero-art { position: relative; min-width: 0; height: 568px; isolation: isolate; }
.orbit { position: absolute; z-index: -1; border-radius: 50%; }
.orbit-one { width: 94%; aspect-ratio: 1; max-height: 520px; background: #cfe0ed; top: 10px; left: 6%; }
.orbit-two { width: 82%; aspect-ratio: 1; background: #e3ecf2; top: 44px; left: 12%; border: 1px solid #c4d6e2; }
.preview-phone {
  position: absolute;
  top: 28px;
  left: 50%;
  width: 274px;
  height: 434px;
  transform: translateX(-45%) rotate(4deg);
  border: 7px solid #fff;
  border-radius: 38px;
  background: #f4f8fb;
  box-shadow: 0 22px 45px #2b42531b, 0 0 0 1px #cbd6deb3;
  overflow: hidden;
}
.preview-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 18px 5px; }
.preview-head > span:first-child { font-size: 8px; letter-spacing: .11em; font-weight: 750; color: #4e6270; }
.mini-avatar { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: 11px; font-weight: 700; color: var(--ink); background: var(--lime); }
.preview-greeting { display: block; padding-inline: 18px; font-size: 21px; line-height: 1.25; font-weight: 650; letter-spacing: -.045em; }
.preview-person { position: relative; height: 286px; text-align: center; isolation: isolate; }
.preview-person img { display: block; width: 220px; height: 300px; object-fit: contain; position: relative; margin: -5px auto 0; }
.person-orbit { position: absolute; z-index: -1; background: #dce5eb; width: 205px; height: 205px; left: 50%; top: 38px; transform: translateX(-50%); border-radius: 50%; }
.preview-bottom { display: flex; justify-content: space-between; align-items: center; padding: 5px 18px 16px; }
.preview-bottom small { display: block; font-size: 8px; color: #566672; letter-spacing: .1em; font-weight: 650; }
.preview-bottom strong { display: block; font-size: 13px; font-weight: 650; }
.preview-bottom > span { width: 34px; height: 34px; display: grid; place-items: center; font-size: 19px; background: var(--lime); border-radius: 50%; }
.floating-card { position: absolute; border: 1px solid #ffffffd9; box-shadow: 0 14px 36px #2a445712; z-index: 3; }
.weight-float { left: -3px; top: 218px; width: 174px; padding: 17px 18px 13px; background: #fff; border-radius: 21px; transform: rotate(-7deg); }
.weight-float > small { display: block; margin-top: 9px; font-size: 11px; color: #4f5e68; }
.weight-float > strong { display: block; font-size: 35px; font-weight: 650; letter-spacing: -.06em; line-height: 1.25; margin-top: 3px; }
.weight-float > strong span { font-size: 14px; font-weight: 500; letter-spacing: 0; }
.float-icon { display: grid; place-items: center; width: 27px; height: 27px; background: var(--lime); border-radius: 9px; font-size: 19px; }
.weight-float svg { display: block; width: 100%; height: 37px; margin-top: 5px; fill: none; stroke: #537288; stroke-width: 2.5; stroke-linecap: round; }
.preview-label { display: block; font-size: 9px; color: #4e5b65; }
.win-float { right: -5px; top: 418px; display: flex; align-items: center; gap: 12px; padding: 16px 20px 16px 14px; background: var(--peach); border-radius: 19px; transform: rotate(3deg); }
.medal { width: 42px; height: 48px; display: grid; place-items: center; font-size: 37px; line-height: 1; color: #9a4f21; flex-shrink: 0; }
.win-float small { display: block; font-size: 8px; letter-spacing: .08em; color: #805039; font-weight: 700; }
.win-float strong { display: block; font-size: 13px; font-weight: 650; color: #563b2c; }
.win-float div > span { display: block; font-size: 10px; color: #805039; }
.art-spark { position: absolute; color: #476a83; z-index: 2; line-height: 1; }
.spark-one { top: 42px; left: 11%; font-size: 47px; transform: rotate(12deg); }
.spark-two { right: 0; top: 250px; font-size: 32px; color: #b78655; }
.art-caption { position: absolute; bottom: 14px; width: 100%; text-align: center; font-size: 10px; color: #5c6972; padding-inline: 12px; }
.benefit-row { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; padding: 37px 0 40px; margin-top: 20px; border-block: 1px solid #d4dde4; }
.benefit-row > div { display: grid; grid-template-columns: 46px 1fr; column-gap: 15px; align-content: start; }
.benefit-row > div > span { grid-row: span 2; display: grid; place-items: center; align-self: start; width: 46px; height: 46px; border-radius: 15px; background: var(--mint); font-size: 25px; line-height: 1; }
.benefit-row > div:nth-child(2) > span { background: var(--peach); }
.benefit-row > div:nth-child(3) > span { background: #e9e4f1; }
.benefit-row strong { font-weight: 650; font-size: 16px; }
.benefit-row p { margin-top: 5px; font-size: 13px; max-width: 240px; line-height: 1.6; }
.landing-note { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 36px 0; }
.landing-note p { color: var(--ink); font-size: 20px; letter-spacing: -.035em; font-weight: 550; }
.landing-note a { font-size: 13px; font-weight: 650; text-decoration: none; }
.landing-note a:hover { text-decoration: underline; }
.landing-note a span { margin-left: 12px; }
.store-links { display: flex; align-items: stretch; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.store-link { display: inline-flex; align-items: center; min-height: 55px; gap: 10px; padding: 9px 15px; border-radius: 13px; border: 1px solid #c1ccd4; background: #f7fafc; color: var(--ink); text-decoration: none; }
.store-link:hover { background: #e4ecf2; }
.store-symbol { display: flex; align-items: center; width: 23px; height: 25px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.store-symbol svg { width: 23px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.store-link > span { min-width: 0; }
.store-link small { display: block; font-size: 8px; font-weight: 650; line-height: 1.35; letter-spacing: .1em; }
.store-link strong { display: block; font-size: 14px; line-height: 1.45; font-weight: 650; white-space: nowrap; }
.coming-soon-panel { grid-column: 1 / -1; background: #dbe6ee; border-radius: 28px; padding: 38px 42px; margin: 6px 0 44px; position: relative; overflow: hidden; }
.coming-soon-panel h2 { font-size: 31px; letter-spacing: -.04em; max-width: 640px; }
.coming-soon-panel p:not(.eyebrow) { max-width: 630px; margin-top: 15px; font-size: 15px; }
.coming-soon-panel .primary { margin-top: 23px; border-radius: 99px; }

/* Once inside, the site behaves like a small, focused app. */
body.is-app .header-start { display: none; }
body.is-app .desktop-nav { display: flex; margin-left: auto; gap: 5px; }
.desktop-nav a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 14px; min-height: 46px; border-radius: 99px; font-size: 13px; font-weight: 550; }
.desktop-nav a:hover { text-decoration: none; background: #e2ebf1; }
.desktop-nav a[aria-current="page"] { background: var(--lime); color: var(--ink); }
.desktop-nav svg, .app-nav svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
body.is-app main.wrap { max-width: 1100px; padding-top: 22px; padding-bottom: 42px; }
body.is-app .topbar { border-bottom: 1px solid #dbe3e9; }
body.is-app .product-name, body.is-app .brand-divider { display: none; }
.screen-heading, .section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin: 10px 0 28px; }
.screen-heading h1, [data-view]:not(.landing) h1 { font-size: 40px; line-height: 1.12; letter-spacing: -.055em; }
.screen-heading .eyebrow, .section-heading .eyebrow { margin-bottom: 8px; }
.screen-heading p:not(.eyebrow) { margin-top: 10px; font-size: 15px; }
.profile-dot { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: var(--peach); color: #78482a; text-decoration: none; font-size: 20px; font-weight: 650; flex-shrink: 0; margin-bottom: 5px; }
.profile-dot:hover { box-shadow: 0 0 0 5px #ffe0ca70; }
.week-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 9px; margin: 24px 0; padding: 12px; background: #e6edf2; border-radius: 23px; }
.week-day { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 90px; padding: 10px 5px; border-radius: 16px; color: #4b5963; border: 1px solid transparent; }
.week-day .weekday-label { font-size: 12px; }
.week-day strong { font-size: 21px; line-height: 1.3; font-weight: 550; }
.week-day .checkin-dot { display: block; width: 5px; height: 5px; background: #b6c3cd; border-radius: 50%; margin-top: 1px; font-size: 0; }
.week-day.has-entry .checkin-dot { background: #3d5566; }
.week-day.is-today { background: var(--ink); color: #fff; }
.week-day.is-today .checkin-dot { background: #92a9b9; }
.week-day.is-today.has-entry .checkin-dot { background: var(--lime); }
.week-day.is-future { color: #606f7a; }
.today-grid { display: grid; grid-template-columns: 1.18fr 1fr; gap: 22px; }
.today-grid > article, .journal-shortcut { min-width: 0; border-radius: 27px; padding: 28px; border: 1px solid #d6e0e7; }
.today-weight { background: var(--mint); position: relative; }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card-top h2 { font-size: 19px; font-weight: 600; letter-spacing: -.03em; }
.card-top > span { font-size: 23px; line-height: 1; }
#overview-weight { display: block; font-size: 60px; line-height: 1.05; letter-spacing: -.06em; font-weight: 600; margin-top: 28px; }
#overview-weight-caption { font-size: 13px; margin-top: 10px; min-height: 21px; }
.mini-trend { display: block; width: 100%; height: 86px; margin-block: 14px 13px; overflow: visible; }
.mini-trend path { fill: none; stroke: #4e6779; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.round-action { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 12px 18px; min-height: 48px; border-radius: 99px; font-size: 14px; font-weight: 650; text-decoration: none; background: var(--ink); color: #fff; }
.round-action:hover { background: #32495a; }
.round-action > span { font-size: 19px; line-height: 1; }
.today-week { text-align: center; background: #d9e8f3; }
.today-week .card-top { text-align: left; }
.ring-wrap { position: relative; display: grid; place-items: center; width: 154px; height: 154px; margin: 23px auto 12px; }
.progress-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg); }
.progress-ring circle { fill: none; stroke-width: 8; }
.ring-track { stroke: #b7d1e3; }
.ring-value { stroke: #3e5566; stroke-linecap: round; transition: stroke-dashoffset .5s ease; }
.ring-wrap > div { position: relative; display: grid; justify-items: center; line-height: 1.35; }
.ring-wrap strong { font-size: 43px; letter-spacing: -.04em; font-weight: 600; }
.ring-wrap span { color: #465c6b; font-size: 12px; }
.today-week > p { font-size: 13px; min-height: 21px; }
.today-week > a { display: inline-flex; gap: 12px; align-items: center; min-height: 44px; font-size: 13px; font-weight: 650; text-decoration: none; }
.today-week > a:hover { text-decoration: underline; }
.today-body { background: #eee8df; display: flex; align-items: center; justify-content: space-between; overflow: hidden; }
.today-body > div { flex: 1; position: relative; z-index: 1; }
.today-body .eyebrow { font-size: 10px; margin-bottom: 11px; }
.today-body h2 { font-size: 30px; letter-spacing: -.045em; }
.today-body p:not(.eyebrow) { font-size: 13px; margin-top: 13px; }
.today-body a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 12px; font-size: 13px; font-weight: 650; text-decoration: none; }
.today-body a:hover { text-decoration: underline; }
.today-body img { width: 143px; height: 221px; object-fit: contain; margin: -12px -13px -12px 0; flex-shrink: 0; }
.journal-shortcut { display: flex; align-items: center; gap: 20px; background: #e9e4f2; color: var(--ink); text-decoration: none; }
.journal-shortcut:hover { background: #e2dcec; }
.journal-symbol { display: grid; place-items: center; width: 54px; height: 68px; border-radius: 16px; background: #fff7; color: #6b597f; font-size: 40px; line-height: 1; flex-shrink: 0; }
.journal-shortcut strong { display: block; font-size: 22px; font-weight: 600; letter-spacing: -.04em; line-height: 1.25; }
.journal-shortcut p { font-size: 13px; margin-top: 10px; }
.journal-shortcut > span:last-child { margin-left: auto; font-size: 23px; }
.save-nudge { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 25px; padding: 23px 28px; background: #fff9; border: 1px solid #d7dfe5; border-radius: 22px; }
.save-nudge strong { font-size: 16px; font-weight: 600; }
.save-nudge p { font-size: 13px; margin-top: 4px; }
.save-nudge .secondary { flex-shrink: 0; border-radius: 99px; }

/* Real records use the same visual language as the preview. */
#bmi-section, .med-section { margin-top: 0; }
.unit-select { font-size: 12px; }
.unit-select select { font-size: 14px; border-radius: 12px; border-color: #c6d1d9; min-height: 46px; }
.stats { gap: 16px; border: 0; background: transparent; border-radius: 0; margin-bottom: 24px; }
.stats article { border: 0; padding: 25px 26px; border-radius: 23px; background: var(--mint); }
.stats article:nth-child(2) { background: #eee8f3; }
.stats article:nth-child(3) { background: var(--peach); }
.stat-label { font-size: 13px; color: #485660; min-height: 0; }
.stats strong { font-size: 39px; font-weight: 550; line-height: 1.2; margin: 12px 0 9px; }
.stats small { font-size: 12px; color: #4f5c66; }
.dashboard-grid { grid-template-columns: minmax(0, 1.45fr) minmax(310px, 1fr); gap: 24px; align-items: start; }
.panel { border-color: #d7dfe5; border-radius: 25px; padding: 28px; box-shadow: 0 5px 16px #1e384b03; }
.panel h2 { font-size: 21px; line-height: 1.3; letter-spacing: -.03em; }
.panel-heading { gap: 16px; }
.panel-heading p { font-size: 13px; line-height: 1.5; margin-top: 7px; }
.segmented { border-radius: 99px; padding: 4px; background: #e7edf2; }
.segmented button { min-height: 40px; border-radius: 99px; padding: 8px 12px; font-size: 12px; color: #495b68; }
.segmented button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.chart { min-height: 340px; margin-top: 26px; }
.empty-chart { padding: 28px 7px; }
.empty-chart svg { margin-bottom: 28px; }
.empty-chart strong { font-size: 17px; font-weight: 600; letter-spacing: -.025em; }
.empty-chart p { font-size: 13px; margin-top: 9px; }
.empty-line { stroke: #70899b; }
.trend-line { stroke: #4e6779; stroke-width: 3; }
.trend-area { fill: #dee8f0; }
.trend-dot { fill: #4e6779; }
.grid-line { stroke: #dde3e8; }
.chart-text { font-family: "Segoe UI", Arial, sans-serif; fill: #4e5d67; }
.chart-footnote { font-size: 12px; margin-top: 14px; padding-top: 17px; border-color: #dae2e7; }
.entry-panel { background: #e5eef4; border-color: #d7e1e8; }
.entry-panel h2, .entry-panel h3 { margin-bottom: 12px; }
.weight-dial { padding: 0 10px 8px; margin: 4px 0 17px; text-align: center; border-bottom: 1px solid #d2dde5; }
.weight-dial svg { display: block; width: min(100%, 265px); height: 110px; margin-inline: auto; overflow: visible; }
.dial-track { fill: none; stroke: #c9d8e3; stroke-width: 18; }
.dial-ticks { fill: none; stroke: #526c7e; stroke-width: 16; stroke-dasharray: 1 12; }
.dial-needle { fill: none; stroke: #b97b4d; stroke-width: 3; stroke-linecap: round; }
.weight-dial circle { fill: #b97b4d; }
.weight-dial > span { display: block; font-size: 12px; font-weight: 600; color: #4e6270; margin-bottom: 10px; }
form label { font-size: 14px; font-weight: 600; margin: 17px 0 7px; }
form input, form select, form textarea { min-height: 50px; padding: 12px 14px; border-radius: 12px; border-color: #b8c5cf; color: var(--ink); background: #fff; font-size: 16px; line-height: 1.5; }
form input::placeholder, form textarea::placeholder { color: #6b7881; opacity: 1; }
form input:hover, form select:hover, form textarea:hover { border-color: #7e95a5; }
form textarea { min-height: 88px; }
.optional { font-size: 12px; }
.form-hint { font-size: 13px; line-height: 1.6; margin-top: 12px; }
.history { border-radius: 20px; margin-top: 24px; border-color: #d7dfe5; overflow: hidden; }
.history summary { min-height: 58px; padding: 19px 24px; font-size: 15px; font-weight: 600; }
.history summary span { font-size: 12px; margin-left: 10px; }
.empty-text { padding: 4px 24px 25px; font-size: 14px; }
table { font-size: 13px; }
th { font-size: 11px; color: #4f5c66; background: #e9eff4; }
td, th { border-color: #dae2e7; padding: 14px 16px; }
td .quiet { font-size: 12px; min-height: 44px; padding: 7px 8px; }
.section-tag { font-size: 10px; border-radius: 99px; padding: 8px 12px; background: #dfe8ef; color: #4d5e6a; }
.notice { padding: 18px 23px; background: #f5ebdc; border-left: 3px solid #b6966e; border-radius: 0 17px 17px 0; font-size: 14px; line-height: 1.65; margin: 18px 0 24px; }
.med-grid { gap: 24px; grid-template-columns: 1fr 1.1fr; align-items: start; }
.two-fields { gap: 14px; }
.two-fields > div { min-width: 0; }
.calendar-panel { background: #e8eff4; }
.month-nav { margin: 23px 0 20px; }
.month-nav strong { font-size: 17px; font-weight: 600; }
.calendar { gap: 7px; }
.weekday { font-size: 12px; padding: 6px 0; }
.day { min-height: 44px; border-radius: 12px; font-size: 14px; background: #fff9; color: #475965; }
.day.has-record { background: #c6dae8; color: #2b404f; border-color: #8aa9bf; }
.day.today { outline-color: #48687e; }
.day.selected { background: var(--ink); color: #fff; }
.day-count { font-size: 10px; }
.calendar-key { font-size: 12px; margin: 19px 0; }
.calendar-key i { background: #c6dae8; border-color: #8aa9bf; border-radius: 3px; }
.calendar-note, .day-records { font-size: 13px; }
.day-records { border-color: #cad8e2; }
.bmi-goals-grid { grid-template-columns: 1.12fr 1fr; gap: 24px; align-items: start; }
.bmi-panel { background: #e5ecf1; }
.bmi-top { grid-template-columns: 1fr 185px; gap: 8px; align-items: center; }
.bmi-top > div:first-child { min-width: 0; }
.bmi-top h2, .bmi-top h3 { font-size: 20px; }
.bmi-top p { font-size: 13px; margin-top: 8px; }
.bmi-orbit { width: 132px; height: 132px; border-radius: 50%; border: 8px solid #c7d7e2; box-shadow: inset 0 0 0 1px #f1f7fc; background: #edf3f8; display: flex; justify-content: center; align-items: center; flex-direction: column; margin: 23px 0 17px; }
.bmi-top .bmi-orbit #bmi-value { font-size: 43px; line-height: 1.15; margin: 0; font-weight: 600; letter-spacing: -.045em; }
.bmi-orbit > span { font-size: 11px; color: #516370; }
.model-view img, .model-view canvas { width: 100%; height: 275px; object-fit: contain; }
.model-view .quiet { min-height: 44px; font-size: 12px; padding: 9px 13px; background: #ffffff8c; border-radius: 99px; margin-top: 0; }
.height-row { gap: 10px; }
.height-row input { width: 48%; }
.height-row button { font-size: 14px; padding-inline: 16px; }
.bmi-explainer { margin-top: 23px; padding-top: 17px; border-top: 1px solid #c7d4dd; }
.bmi-explainer summary { cursor: pointer; font-size: 13px; font-weight: 600; min-height: 36px; line-height: 1.6; }
.bmi-explainer .quiet { text-align: left; padding-inline: 0; margin-top: 6px; justify-content: start; }
.badge-total { padding: 7px 12px; background: #f8edda; border-radius: 99px; font-size: 11px; color: #7b5a38; }
.badge-total strong { font-size: 18px; color: #7b5a38; font-weight: 650; }
.badge-list { margin-top: 23px; }
.badge-list > p { font-size: 14px; }
.milestone { padding: 18px 0; border-color: #dae2e7; gap: 15px; }
.badge-icon { width: 52px; height: 52px; color: #64717b; background: #e5ecf1; font-size: 30px; }
.earned .badge-icon { background: #fce6ba; color: #91641f; border-color: #e2c082; }
.milestone strong { font-size: 14px; font-weight: 600; }
.milestone p { font-size: 12px; margin-top: 4px; }
.goals-panel .form-hint { line-height: 1.6; }
.account-screen { padding-top: 7px; }
.account-panel { display: block; padding: 38px; border-radius: 28px; margin-bottom: 24px; background: var(--mint); border-color: #cedbe4; }
.account-panel h1 { max-width: 720px; }
.account-panel p { font-size: 14px; margin-top: 13px; max-width: 740px; }
.account-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
#google-signin { max-width: 100%; overflow-x: auto; }
#account-consent { margin-top: 24px; padding-top: 22px; border-color: #bcccd7; }
.privacy-strip { border: 1px solid #cfdbe4; border-radius: 18px; background: #e6eef3; padding: 20px 24px; font-size: 13px; align-items: center; }
.remember { font-size: 13px; gap: 11px; line-height: 1.6; }
.remember input { width: 20px; height: 20px; accent-color: var(--ink); flex-shrink: 0; }
.save-info { font-size: 12px; margin: 11px 3px 0; }
.export-panel { margin-top: 28px; border-radius: 25px; padding: 30px; gap: 28px; background: var(--ink); }
.export-panel .eyebrow { color: var(--lime); }
.export-panel h2 { color: #fff; font-size: 25px; }
.export-panel p { color: #cad8e2; font-size: 14px; }
.export-actions { min-width: 340px; }
.export-actions .primary { background: var(--lime); color: var(--ink); }
.export-actions .primary:hover { background: #adddff; }
.export-actions .quiet { color: #fff; }
.info-grid { gap: 48px; margin: 36px 0 12px; }
.info-grid h2 { font-size: 21px; letter-spacing: -.03em; }
.info-grid p { font-size: 14px; line-height: 1.7; margin-top: 15px; }
.info-grid .danger { margin-right: 8px; }
.status { color: var(--ink); font-size: 14px; line-height: 1.5; min-height: 0; margin: 0; }
.status:not(:empty) { position: fixed; z-index: 30; bottom: 24px; left: 50%; transform: translateX(-50%); width: max-content; max-width: min(620px, calc(100% - 40px)); padding: 15px 23px; background: #f1f9ff; border: 1px solid #a6b9c7; border-radius: 17px; box-shadow: 0 8px 30px #172c3b26; }
footer { font-size: 12px; padding-block: 27px; align-items: center; border-color: #d4dde4; gap: 24px; }
footer a { color: #4a5963; text-decoration: none; }
footer a:hover { text-decoration: underline; }
footer > a:first-child { color: var(--ink); font-weight: 600; }
footer span:first-child { font-weight: 400; letter-spacing: 0; }
dialog { border-radius: 23px; padding: 28px; border-color: #c4d1db; }
dialog::backdrop { background: #182c3b90; backdrop-filter: blur(3px); }
dialog h2 { font-size: 26px; }
dialog p { font-size: 15px; }
.dialog-actions { margin-top: 24px; }

@media (min-width: 1500px) {
  .hero-copy h1 { font-size: 78px; }
  .landing { padding-top: 43px; }
}

@media (max-width: 1100px) {
  .wrap { width: calc(100% - 56px); }
  .landing { gap: 20px; }
  .hero-copy h1 { font-size: 62px; }
  .hero-description { font-size: 16px; }
  .hero-art { height: 535px; }
  .orbit-one { top: 37px; }
  .orbit-two { top: 68px; }
  .preview-phone { left: 47%; width: 250px; height: 424px; }
  .weight-float { left: -5px; top: 234px; width: 146px; padding: 14px; }
  .weight-float > strong { font-size: 31px; }
  .win-float { right: -2px; top: 410px; padding: 13px 16px 13px 11px; gap: 8px; }
  .spark-one { left: 6%; }
  .benefit-row { gap: 23px; }
  .benefit-row > div { grid-template-columns: 40px 1fr; gap: 11px; }
  .benefit-row > div > span { width: 40px; height: 43px; }
  .benefit-row strong { font-size: 15px; }
  .panel { padding: 23px; }
  .panel-heading { flex-wrap: wrap; }
  .dashboard-grid { grid-template-columns: minmax(0, 1.3fr) minmax(280px, 1fr); }
  .bmi-goals-grid { grid-template-columns: 1.1fr 1fr; }
  .bmi-top { grid-template-columns: 1fr 145px; }
  .model-view img, .model-view canvas { height: 258px; }
  .privacy-strip { align-items: flex-start; }
  .desktop-nav a { padding-inline: 11px; }
}

@media (max-width: 850px) {
  .wrap { width: calc(100% - 40px); }
  .topbar-inner { min-height: 87px; gap: 14px; }
  .brand img { width: 134px; height: 38px; }
  .product-name { font-size: 12px; }
  .hero-copy h1 { font-size: 53px; }
  .hero-copy .eyebrow { font-size: 9px; letter-spacing: .08em; }
  .hero-description { font-size: 15px; }
  .hero-art { height: 480px; }
  .preview-phone { width: 228px; height: 399px; left: 45%; top: 27px; }
  .preview-head { padding: 14px 13px 4px; }
  .preview-greeting { font-size: 19px; padding-inline: 13px; }
  .preview-person { height: 270px; }
  .preview-person img { width: 203px; height: 282px; }
  .person-orbit { width: 182px; height: 182px; }
  .preview-bottom { padding: 5px 13px 12px; }
  .weight-float { left: -7px; top: 207px; width: 120px; padding: 12px; border-radius: 16px; }
  .weight-float > strong { font-size: 27px; }
  .weight-float > small { font-size: 10px; }
  .weight-float svg { height: 31px; }
  .win-float { right: -4px; top: 370px; padding: 12px; gap: 5px; }
  .win-float strong { font-size: 11px; }
  .win-float div > span { font-size: 9px; }
  .win-float small { font-size: 7px; }
  .medal { width: 35px; font-size: 31px; }
  .spark-one { left: 4%; top: 36px; font-size: 32px; }
  .spark-two { right: -3px; top: 181px; font-size: 26px; }
  .art-caption { bottom: 8px; font-size: 9px; }
  .benefit-row { gap: 17px; padding-block: 28px; }
  .benefit-row > div { display: block; }
  .benefit-row > div > span { margin-bottom: 12px; }
  .benefit-row p { font-size: 12px; }
  .landing-note p { font-size: 18px; }
  .desktop-nav a { gap: 5px; font-size: 12px; padding-inline: 9px; }
  .desktop-nav svg { width: 18px; height: 18px; }
  .today-grid { gap: 18px; }
  .today-grid > article, .journal-shortcut { padding: 23px; }
  .today-body img { width: 112px; height: 199px; margin-right: -16px; }
  .today-body h2 { font-size: 25px; }
  .today-body .eyebrow { font-size: 8px; }
  .journal-shortcut { gap: 12px; }
  .journal-shortcut strong { font-size: 21px; }
  .journal-symbol { width: 44px; height: 56px; font-size: 32px; }
  .journal-shortcut > span:last-child { display: none; }
  .bmi-goals-grid { grid-template-columns: 1fr; }
  .bmi-top { grid-template-columns: 1fr 220px; }
  .model-view img, .model-view canvas { height: 295px; }
  .bmi-orbit { width: 145px; height: 145px; }
  .med-grid { grid-template-columns: 1fr; }
  .calendar-panel .calendar { gap: 10px; }
  .day { max-height: 76px; }
  .export-panel { align-items: start; flex-direction: column; }
  .export-actions { width: 100%; }
  .privacy-strip { flex-direction: column; gap: 12px; }
  footer { flex-wrap: wrap; justify-content: space-between; row-gap: 10px; }
  footer > span { width: 100%; }
}

@media (max-width: 700px) {
  html { scroll-padding-top: 18px; }
  .wrap { width: calc(100% - 36px); }
  .topbar-inner { min-height: 76px; padding-block: 13px; gap: 10px; justify-content: space-between; }
  .brand img { width: 125px; height: 35px; }
  .brand-divider, .product-name { display: none; }
  .header-start { font-size: 11px; padding: 8px 13px; min-height: 42px; gap: 13px; }
  .landing { grid-template-columns: 1fr; padding-top: 12px; gap: 0; }
  .hero-copy { display: contents; }
  .hero-copy > .eyebrow { order: 1; }
  .hero-copy > h1 { order: 2; }
  .hero-description { order: 3; }
  .hero-cta { order: 4; justify-self: start; }
  .hero-reassurance { order: 5; }
  .hero-art { order: 6; }
  .store-links { order: 7; }
  .benefit-row { order: 8; }
  .coming-soon-panel { order: 9; }
  .landing-note { order: 10; }
  .hero-copy .eyebrow { font-size: 9px; letter-spacing: .08em; margin-bottom: 10px; }
  .tiny-spark { font-size: 17px; margin-right: 3px; }
  .hero-copy h1 { font-size: clamp(40px, 10.2vw, 56px); line-height: 1.04; letter-spacing: -.06em; }
  .wide-only { display: none; }
  .hero-description { font-size: 14px; line-height: 1.65; margin-top: 14px; }
  .hero-cta { min-height: 49px; margin-top: 18px; padding: 12px 22px; font-size: 14px; gap: 31px; }
  .hero-reassurance { max-width: none; font-size: 10px; margin-top: 10px; }
  .hero-art { height: 382px; width: min(100%, 420px); margin: 15px auto 0; }
  .orbit-one { width: 94%; height: auto; top: 22px; left: 3%; }
  .orbit-two { width: 80%; height: auto; top: 46px; left: 10%; }
  .preview-phone { width: 222px; height: 353px; top: 8px; left: 50%; border-width: 6px; border-radius: 31px; transform: translateX(-46%) rotate(5deg); }
  .preview-head { padding: 12px 13px 2px; }
  .preview-head > span:first-child { font-size: 7px; }
  .mini-avatar { width: 22px; height: 22px; font-size: 10px; }
  .preview-greeting { font-size: 18px; }
  .preview-person { height: 231px; }
  .preview-person img { width: 176px; height: 244px; margin-top: -3px; }
  .person-orbit { width: 176px; height: 176px; top: 29px; }
  .preview-bottom { padding: 4px 13px 10px; }
  .preview-bottom strong { font-size: 11px; }
  .preview-bottom small { font-size: 7px; }
  .preview-bottom > span { width: 29px; height: 29px; font-size: 17px; }
  .weight-float { left: 0; top: 156px; width: 119px; padding: 12px; border-radius: 17px; }
  .weight-float > small { font-size: 9px; margin-top: 7px; }
  .weight-float > strong { font-size: 27px; margin-top: 3px; }
  .weight-float > strong span { font-size: 11px; }
  .float-icon { width: 22px; height: 22px; font-size: 15px; border-radius: 7px; }
  .weight-float svg { height: 25px; margin-top: 3px; }
  .preview-label { font-size: 8px; }
  .win-float { right: 0; top: 298px; padding: 11px 13px 11px 8px; border-radius: 16px; gap: 4px; }
  .win-float strong { font-size: 11px; }
  .win-float small { font-size: 7px; }
  .win-float div > span { font-size: 9px; }
  .medal { width: 33px; height: 38px; font-size: 30px; }
  .spark-one { left: 5%; top: 33px; font-size: 32px; }
  .spark-two { right: 1%; top: 119px; font-size: 24px; }
  .art-caption { bottom: 0; font-size: 9px; padding-inline: 0; }
  .benefit-row { grid-template-columns: 1fr; gap: 22px; margin-top: 25px; padding-block: 27px; }
  .benefit-row > div { display: grid; grid-template-columns: 45px 1fr; gap: 0 13px; }
  .benefit-row > div > span { width: 45px; height: 45px; margin-bottom: 0; }
  .benefit-row strong { font-size: 15px; }
  .benefit-row p { max-width: none; font-size: 12px; margin-top: 2px; }
  .landing-note { display: block; padding: 28px 0 31px; }
  .landing-note p { font-size: 23px; line-height: 1.25; max-width: 320px; letter-spacing: -.045em; }
  .landing-note a { display: inline-flex; align-items: center; min-height: 44px; margin-top: 12px; font-size: 13px; }
  .store-links { margin-top: 20px; gap: 10px; justify-content: center; }
  .store-link { min-height: 53px; min-width: 146px; padding: 9px 15px; gap: 10px; border-radius: 11px; }
  .store-symbol, .store-symbol svg { width: 20px; height: 23px; }
  .store-link small { font-size: 7px; }
  .store-link strong { font-size: 13px; }
  .coming-soon-panel { padding: 27px 24px; border-radius: 23px; margin-bottom: 30px; }
  .coming-soon-panel h2 { font-size: 28px; }
  .coming-soon-panel p:not(.eyebrow) { font-size: 14px; margin-top: 13px; }
  .coming-soon-panel .primary { font-size: 13px; }
  body.is-app .topbar-inner { min-height: 67px; }
  body.is-app .topbar-inner::after { content: "a little more you."; color: #556672; font-size: 11px; }
  body.is-app .desktop-nav { display: none; }
  body.is-app main.wrap { padding-top: 17px; padding-bottom: 28px; }
  body.is-app { padding-bottom: calc(85px + env(safe-area-inset-bottom)); }
  body.is-app .app-nav { display: grid; position: fixed; z-index: 20; bottom: 0; left: 0; right: 0; grid-template-columns: repeat(5, 1fr); gap: 2px; margin: 0; padding: 9px 9px calc(9px + env(safe-area-inset-bottom)); background: #f8fafcf5; border-top: 1px solid #d2dce4; backdrop-filter: blur(14px); box-shadow: 0 -5px 25px #172c3b07; }
  .app-nav a { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; min-height: 54px; padding: 6px 1px; border-radius: 17px; font-size: 10px; color: #4b5c68; text-decoration: none; line-height: 1.2; font-weight: 550; }
  .app-nav a[aria-current="page"] { background: var(--lime); color: var(--ink); }
  .app-nav a:hover { text-decoration: none; background: #d8e5ef; }
  .app-nav a[aria-current="page"]:hover { background: var(--lime); }
  .app-nav svg { width: 22px; height: 22px; }
  .screen-heading, .section-heading { gap: 15px; margin: 7px 0 23px; align-items: flex-start; }
  .screen-heading h1, [data-view]:not(.landing) h1 { font-size: 32px; line-height: 1.1; }
  .screen-heading .eyebrow, .section-heading .eyebrow { font-size: 9px; margin-bottom: 9px; }
  .screen-heading p:not(.eyebrow) { font-size: 13px; margin-top: 8px; }
  .profile-dot { width: 43px; height: 43px; margin-top: 6px; font-size: 17px; }
  .week-days { gap: 3px; padding: 7px; border-radius: 19px; margin: 18px 0; }
  .week-day { padding: 8px 3px; min-height: 72px; border-radius: 13px; gap: 3px; }
  .week-day .weekday-label { font-size: 10px; }
  .week-day strong { font-size: 19px; }
  .week-day .checkin-dot { width: 4px; height: 4px; }
  .today-grid { grid-template-columns: 1fr 1fr; gap: 13px; }
  .today-grid > article, .journal-shortcut { padding: 18px; border-radius: 22px; }
  .card-top { gap: 4px; }
  .card-top h2 { font-size: 15px; letter-spacing: -.035em; line-height: 1.3; }
  .card-top > span { font-size: 19px; }
  #overview-weight { font-size: clamp(28px, 8.5vw, 39px); margin-top: 23px; white-space: nowrap; }
  #overview-weight-caption { font-size: 11px; line-height: 1.5; min-height: 33px; margin-top: 8px; }
  .mini-trend { height: 53px; margin-block: 12px 17px; }
  .round-action { padding: 10px 11px; min-height: 44px; gap: 5px; font-size: 11px; width: 100%; }
  .round-action > span { font-size: 15px; }
  .ring-wrap { width: 115px; height: 115px; margin: 18px auto 14px; max-width: 100%; }
  .ring-wrap strong { font-size: 33px; }
  .ring-wrap span { font-size: 10px; }
  .progress-ring circle { stroke-width: 8; }
  .today-week > p { font-size: 11px; line-height: 1.5; min-height: 33px; }
  .today-week > a { font-size: 11px; line-height: 1.4; min-height: 44px; gap: 3px; }
  .today-body { grid-column: 1 / -1; }
  .today-body h2 { font-size: 27px; }
  .today-body .eyebrow { font-size: 9px; }
  .today-body p:not(.eyebrow) { margin-top: 10px; font-size: 12px; }
  .today-body a { margin-top: 8px; font-size: 12px; }
  .today-body img { width: 120px; height: 201px; margin: -6px -6px -6px 0; }
  .journal-shortcut { grid-column: 1 / -1; gap: 15px; }
  .journal-shortcut strong { font-size: 18px; }
  .journal-shortcut p { font-size: 12px; margin-top: 6px; }
  .journal-symbol { width: 42px; height: 50px; font-size: 30px; border-radius: 12px; }
  .journal-shortcut > span:last-child { display: block; font-size: 20px; }
  .save-nudge { padding: 21px; border-radius: 21px; margin-top: 17px; align-items: flex-start; flex-direction: column; gap: 14px; }
  .save-nudge strong { font-size: 16px; }
  .save-nudge p { font-size: 12px; }
  .save-nudge .secondary { font-size: 12px; min-height: 44px; padding: 10px 16px; }
  .unit-select { flex-shrink: 0; font-size: 10px; width: 102px; }
  .unit-select select { font-size: 12px; padding: 8px 7px; width: 100%; min-height: 43px; }
  .stats { gap: 8px; margin-bottom: 17px; }
  .stats article { padding: 16px 12px; border-radius: 18px; }
  .stat-label { font-size: 10px; line-height: 1.5; min-height: 30px; }
  .stats strong { font-size: 26px; margin: 9px 0 8px; white-space: normal; line-height: 1.15; }
  .stats small { font-size: 10px; line-height: 1.5; }
  .dashboard-grid, .med-grid { grid-template-columns: 1fr; gap: 17px; }
  .panel { padding: 22px; border-radius: 22px; }
  .panel h2, .panel h3 { font-size: 20px; }
  .panel-heading { gap: 14px; }
  .panel-heading p { font-size: 12px; }
  .segmented button { min-height: 40px; font-size: 11px; padding-inline: 12px; }
  .chart { min-height: 270px; margin-top: 15px; }
  .empty-chart strong { font-size: 16px; }
  .empty-chart p { font-size: 12px; }
  .chart-footnote { font-size: 11px; }
  .weight-dial { padding-top: 0; margin-bottom: 15px; }
  .weight-dial svg { height: 100px; }
  form label { font-size: 13px; margin-top: 17px; }
  form input, form select, form textarea { font-size: 16px; min-height: 50px; }
  .form-hint { font-size: 13px; }
  .history { border-radius: 18px; margin-top: 18px; }
  .history summary { padding: 17px 20px; font-size: 14px; }
  .history summary span { font-size: 11px; }
  .history td, .history th { padding: 11px 12px; }
  .empty-text { font-size: 13px; padding-inline: 20px; }
  .section-tag { display: none; }
  .notice { font-size: 13px; padding: 16px 19px; line-height: 1.6; }
  .calendar-panel .calendar { gap: 5px; }
  .calendar .day { min-height: 38px; border-radius: 9px; font-size: 13px; }
  .weekday { font-size: 10px; }
  .calendar-key { font-size: 11px; }
  .month-nav strong { font-size: 16px; }
  .two-fields { gap: 12px; }
  .bmi-goals-grid { grid-template-columns: 1fr; gap: 17px; }
  .bmi-top { grid-template-columns: 1fr 137px; align-items: center; gap: 0; }
  .bmi-top h2, .bmi-top h3 { font-size: 18px; }
  .bmi-top p { font-size: 12px; }
  .bmi-orbit { width: 123px; height: 123px; border-width: 7px; margin: 19px 0 14px; }
  .bmi-top .bmi-orbit #bmi-value { font-size: 37px; }
  .bmi-orbit > span { font-size: 10px; }
  .model-view img, .model-view canvas { height: 252px; }
  .model-view .quiet { font-size: 11px; padding: 9px 12px; }
  .height-row { gap: 10px; }
  .height-row button { font-size: 13px; padding: 12px; }
  .bmi-explainer { margin-top: 21px; }
  .bmi-explainer .quiet { font-size: 13px; }
  .goals-panel .panel-heading { flex-wrap: nowrap; }
  .badge-total { padding: 6px 10px; }
  .badge-list { max-height: none; }
  .account-panel { padding: 25px 22px; border-radius: 23px; }
  .account-panel h1 { font-size: 31px; }
  .account-panel p { font-size: 13px; }
  .account-controls { width: 100%; gap: 10px; }
  .account-controls .quiet, .account-controls .secondary { font-size: 13px; }
  .privacy-strip { padding: 19px 20px; font-size: 13px; }
  .remember { font-size: 13px; align-items: flex-start; }
  .remember input { margin-top: 1px; }
  .save-info { font-size: 12px; }
  .export-panel { padding: 25px 22px; gap: 24px; margin-top: 23px; }
  .export-panel h2 { font-size: 25px; }
  .export-panel p { font-size: 13px; }
  .export-actions { min-width: 0; grid-template-columns: 1fr; gap: 10px; }
  .info-grid { grid-template-columns: 1fr; gap: 32px; margin: 32px 0 12px; }
  .info-grid p { font-size: 13px; }
  .info-grid h2 { font-size: 22px; }
  .status:not(:empty) { bottom: calc(90px + env(safe-area-inset-bottom)); max-width: calc(100% - 28px); font-size: 13px; padding: 13px 17px; }
  body:not(.is-app) .status:not(:empty) { bottom: 18px; }
  footer { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding-block: 24px; font-size: 11px; }
  footer > span { width: auto; }
  dialog { padding: 24px; border-radius: 21px; }
  dialog h2 { font-size: 24px; }
}

@media (max-width: 360px) {
  .wrap { width: calc(100% - 28px); }
  .brand img { width: 113px; height: 32px; }
  .header-start { font-size: 10px; padding-inline: 11px; gap: 8px; }
  .hero-copy h1 { font-size: 38px; }
  .hero-copy .eyebrow { font-size: 8px; letter-spacing: .04em; }
  .hero-description { font-size: 13px; }
  .hero-art { height: 374px; }
  .preview-phone { width: 207px; height: 337px; left: 51%; }
  .preview-person { height: 219px; }
  .preview-person img { width: 164px; height: 230px; }
  .preview-greeting { font-size: 17px; }
  .person-orbit { width: 159px; height: 159px; }
  .weight-float { left: -1px; top: 150px; width: 106px; padding: 10px; }
  .weight-float > strong { font-size: 25px; }
  .win-float { right: -1px; top: 285px; padding: 9px 10px 9px 7px; }
  .win-float strong { font-size: 10px; }
  .win-float div > span { font-size: 8px; }
  .win-float small { font-size: 6px; }
  .medal { width: 29px; font-size: 28px; }
  .art-caption { font-size: 8px; }
  .spark-two { right: -1px; }
  .store-links { gap: 7px; }
  .store-link { min-width: 136px; padding-inline: 10px; gap: 7px; }
  .store-link strong { font-size: 12px; }
  .store-symbol, .store-symbol svg { width: 18px; }
  .today-grid { grid-template-columns: 1fr; }
  .today-weight, .today-week { min-height: 0; }
  #overview-weight { font-size: 51px; }
  #overview-weight-caption { min-height: 0; font-size: 12px; }
  .mini-trend { height: 65px; }
  .round-action { font-size: 13px; width: auto; padding-inline: 17px; }
  .today-week .ring-wrap { width: 133px; height: 133px; }
  .today-week > p, .today-week > a { font-size: 12px; }
  .today-week > p { min-height: 0; }
  .card-top h2 { font-size: 18px; }
  .today-body h2 { font-size: 25px; }
  .today-body img { width: 103px; }
  .today-body a { font-size: 11px; }
  .today-body .eyebrow { font-size: 8px; }
  .journal-shortcut > span:last-child { display: none; }
  .panel { padding: 19px; }
  .stats { gap: 7px; }
  .stats article { padding: 15px 10px; }
  .stats strong { font-size: 24px; }
  .stat-label { font-size: 9px; }
  .stats small { font-size: 9px; }
  .bmi-top { grid-template-columns: 1fr 120px; }
  .bmi-top h2, .bmi-top h3 { font-size: 16px; }
  .bmi-orbit { width: 111px; height: 111px; }
  .model-view img, .model-view canvas { height: 240px; }
  .height-row input { width: 45%; }
  .height-row button { font-size: 12px; }
  .two-fields { grid-template-columns: 1fr; gap: 0; }
  .calendar { gap: 3px; }
  .calendar .day { min-height: 33px; font-size: 12px; }
  .app-nav a { font-size: 9px; }
  .account-panel { padding: 23px 19px; }
  .goals-panel .panel-heading { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

@media print {
  body, body.is-app { background: #fff; color: #000; padding: 0; font-size: 10pt; }
  .wrap, body.is-app main.wrap { width: 100%; max-width: none; padding: 0; }
  [data-view="progress"][hidden], [data-view="journal"][hidden] { display: block !important; }
  [data-view="home"], [data-view="today"], [data-view="body"], [data-view="account"],
  .topbar, .desktop-nav, .app-nav, .hero-art, .weight-dial, .save-nudge, .status, footer,
  .store-links, .coming-soon-panel { display: none !important; }
  [data-view]:not(.landing) h1 { font-size: 23pt; }
  .section-heading { margin-block: 8px 16px; }
  .stats { gap: 0; border: 1px solid #ccc; border-radius: 0; }
  .stats article { background: #fff !important; padding: 12px; border-radius: 0; }
  .stats strong { font-size: 22pt; }
  .stats small, .stat-label { font-size: 9pt; min-height: 0; }
  .panel { padding: 14px; border-radius: 0; box-shadow: none; }
  .dashboard-grid, .med-grid { display: block; }
  .chart { min-height: 0; max-height: 270px; }
  .chart-footnote { font-size: 8pt; }
  .history { border-radius: 0; }
  .history summary { min-height: 0; padding: 10px; font-size: 10pt; }
  .notice { background: #fff; border-color: #777; font-size: 9pt; border-radius: 0; }
  .med-section { margin-top: 24px; break-before: page; }
  .blank-print main > [data-view], .blank-print main > [data-view][hidden] { display: none !important; }
  .blank-print main > #blank-log { display: block !important; }
}

/* Shared visual language with the existing Svelta Body Mass Scanner. */
:root { --ink:#102338; --muted:#516475; --paper:#f6f0e7; --blue:#0e6098; --navy:#102338; --cyan:#48c7ff; --mint:#e2f1fb; --lime:#c2ebff; --peach:#ece3d7; --soft:#edf3f8; --line:#cbd9e4; }
body { background:radial-gradient(circle at 75% 8%,rgba(72,199,255,.13),transparent 34%),linear-gradient(180deg,#fbf8f2,#e7ddd0); background-attachment:fixed; }
.brand { padding:12px 22px; background:rgba(255,255,255,.82); border:1px solid #fff; border-radius:99px; box-shadow:0 14px 34px #10233812; }
.primary,.header-start { background:linear-gradient(135deg,#0e6098,#1677b1); color:#fff; border:1px solid #ffffff80; box-shadow:0 8px 24px #0e609825,inset 0 1px #ffffff70; }
.primary:hover,.header-start:hover { background:#0c527f; }
.panel,.stats,.account-panel,.privacy-strip,.history,.save-nudge,.export-panel,.journal-shortcut { border:1px solid #ffffffd9; background:linear-gradient(135deg,#ffffffeb,#ffffff9c); box-shadow:0 16px 40px #1023380c,inset 0 1px #fff; }
.desktop-nav,.app-nav { border:1px solid #ffffffbf; background:#f7fafbed; box-shadow:0 12px 30px #10233812; }
.desktop-nav a[aria-current="page"],.app-nav a[aria-current="page"] { background:#0e6098; color:#fff; }
.today-weight,.today-week { background:linear-gradient(145deg,#06111b,#142d42); color:#f8fbff; border-color:#ffffff60; }
.today-weight h2,.today-week h2,.today-week p,.today-week a,.today-weight p,.today-weight .card-top span { color:#e6f4ff; }
.today-weight .mini-trend path { stroke:#65cbfa; }
.today-week .ring-track { stroke:#ffffff20; }.today-week .ring-value { stroke:#48c7ff; }
.today-body { background:linear-gradient(135deg,#edf8ff,#c7dce9); }
.scanner-shell { margin:0 0 28px; }
.scanner-toolbar { display:flex; justify-content:space-between; align-items:center; gap:16px; font-size:13px; margin-bottom:12px; }
.scanner-toolbar p { margin:0; }.scanner-toolbar a { flex-shrink:0; }
#bmi-scanner { display:block; border:0; width:100%; min-height:780px; height:900px; background:transparent; }
.scanner-save { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:24px; background:#ffffffb8; border:1px solid #fff; border-radius:24px; margin-top:18px; }
.scanner-save p { font-size:13px; margin:4px 0 0; max-width:540px; }.scanner-save button { flex-shrink:0; }
.scanner-record #bmi-value { display:block; font-size:56px; line-height:1.2; font-weight:650; color:var(--ink); margin:16px 0; }
.scanner-record details { margin-top:16px; }.scanner-record summary { cursor:pointer; font-weight:650; }
@media(max-width:700px) { .brand{padding:9px 14px}.scanner-toolbar,.scanner-save{align-items:stretch;flex-direction:column;gap:12px}.scanner-toolbar a{align-self:flex-start}.scanner-save{padding:20px}#bmi-scanner{min-height:1300px}.scanner-save button{width:100%}.scanner-record #bmi-value{font-size:44px} }
@media print { .scanner-shell {display:none!important;} }

.desktop-nav{border-radius:99px;padding:6px}.today-week .ring-wrap small{color:#b8d9ec}.export-panel{background:linear-gradient(145deg,#06111b,#142d42);color:#e6f4ff}.export-panel p,.export-panel .eyebrow{color:#bfd6e7}.status:not(:empty){background:#f1f8fd}.today-weight .round-action{background:#146596}

body.is-app .app-nav a[aria-current="page"]{background:#0e6098;color:#fff}

/* Premium scanner artwork replaces the original decorative phone mockup. */
.hero-art.hero-art-premium { position:relative; width:100%; height:auto; min-width:0; margin:0; padding:0; }
.hero-art-premium > img { display:block; width:100%; height:auto; aspect-ratio:1303/1207; border-radius:30px; box-shadow:0 24px 64px #10233812; }
.premium-caption { margin-top:16px; padding-inline:10px; text-align:center; font-size:11px; line-height:1.6; color:var(--muted); }
@media(max-width:700px) { .hero-art.hero-art-premium { width:100%; margin:20px auto 0; } .hero-art-premium > img { border-radius:22px; } .premium-caption { font-size:10px; margin-top:12px; padding-inline:4px; } }
@media print { .hero-art.hero-art-premium { display:none; } }