@font-face { font-family: Alibaba; src: url('/assets/fonts/alibaba-light.ttf') format('truetype'); font-weight: 300; font-display: swap; }
@font-face { font-family: Alibaba; src: url('/assets/fonts/alibaba-regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: Alibaba; src: url('/assets/fonts/alibaba-bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: Alibaba; src: url('/assets/fonts/alibaba-black.ttf') format('truetype'); font-weight: 900; font-display: swap; }

/* Palette follows the current fitzolife.com download page: paper, sage, lime and one blue. */
:root {
  color-scheme: only light;
  --paper: #fafbf7;
  --surface: #ffffff;
  --ink: #202a25;
  --muted: #66716b;
  --line: #dfe5dc;
  --line-strong: #ced7cb;
  --blue: #2163ed;
  --blue-hover: #164dcc;
  --blue-soft: #e9effd;
  --lime: #e2f3af;
  --lime-strong: #cfe68f;
  --olive: #59684e;
  --olive-dark: #455923;
  --sage: #eaf0e3;
  --sage-2: #f0f4ea;
  --orbit: #cad6b7;
  --dusk: #f3e8d6;
  --night: #1f2a24;
  --green: #3f8f4f;
  --orange: #f0a238;
  --teal: #2dab9e;
  --purple: #8b69ad;
  --card-shadow: 0 1px 2px #2a36200d, 0 10px 28px -18px #34432140;
  --header-h: 76px;
  --ease: cubic-bezier(.22, .8, .24, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Alibaba, Tahoma, sans-serif; font-size: 15px; line-height: 1.9; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p, ol, ul, dl, dd { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
a, button, summary { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
img { max-width: 100%; display: block; }
svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
[hidden] { display: none !important; }
bdi { unicode-bidi: isolate; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; border-radius: 8px; }
.icon-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 22px; height: 22px; flex-shrink: 0; }
.inline-icon { width: 17px; height: 17px; vertical-align: -3px; }
.muted { color: var(--muted); }
.shell { width: min(1240px, calc(100% - 64px)); margin-inline: auto; }
.skip-link { position: fixed; top: 10px; right: 10px; z-index: 60; padding: 10px 18px; border-radius: 12px; background: var(--ink); color: var(--paper); transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.eyebrow { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 700; color: var(--olive); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: #6c8a3c; box-shadow: 0 0 0 5px var(--sage); margin-inline: 4px; }

/* Header */
.header { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--paper) 92%, transparent); border-bottom: 1px solid var(--line); }
@supports (backdrop-filter: blur(1px)) { .header { backdrop-filter: saturate(1.2) blur(10px); -webkit-backdrop-filter: saturate(1.2) blur(10px); } }
.header-row { height: var(--header-h); display: flex; align-items: center; gap: 36px; }
.brand { font-size: 29px; font-weight: 900; color: var(--blue); line-height: 1; }
.header-nav { display: flex; gap: 32px; font-size: 14px; color: var(--muted); }
.header-nav a { padding-block: 12px; }
.header-nav a:hover { color: var(--blue); }
.header-web { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: 12px; font-size: 13px; font-weight: 700; }
.header-web:hover { background: var(--sage); }
.header-web .icon { width: 18px; height: 18px; }

/* Buttons */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 11px; min-height: 58px; padding: 0 24px; border-radius: 14px; font-size: 15px; font-weight: 700; transition: background .16s, box-shadow .16s, transform .16s; }
.button:active { transform: scale(.98); }
.button-primary { background: var(--blue); color: #fff; box-shadow: 0 6px 14px #2163ed1f; }
.button-primary:hover { background: var(--blue-hover); }
.button-primary.is-disabled { background: var(--sage); color: var(--muted); box-shadow: none; cursor: default; }
.button-secondary { border: 1px solid var(--line-strong); }
.button-secondary:hover { background: var(--sage); }
.button-dark { background: var(--ink); color: var(--paper); }
.button-lime { background: #e2f3af; color: #202a25; }
.button-lime:hover { background: #d4ec91; }
.button .icon { width: 20px; height: 20px; }

/* Layout: intro and day on one side, the live "today" panel on the other */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 440px; grid-template-areas: "intro side" "day side"; column-gap: 56px; }
.intro { grid-area: intro; padding-block: 64px 72px; }
.side { grid-area: side; padding-top: 28px; padding-bottom: 88px; }
.day { grid-area: day; padding-bottom: 96px; }

/* Headline */
h1 { font-size: clamp(52px, 6vw, 84px); line-height: 1.32; font-weight: 900; margin-block: 22px 22px; }
.h-line { display: block; }
.h-accent { position: relative; display: inline-block; color: var(--blue); }
.scribble { position: absolute; inset-inline: -2%; bottom: -2px; width: 104%; height: 22px; overflow: visible; }
.scribble path { stroke: var(--lime-strong); stroke-width: 7; stroke-dasharray: 320; stroke-dashoffset: 0; }
.h-small { font-size: .46em; line-height: 1.6; margin-top: 6px; }
.small-word { position: relative; isolation: isolate; display: inline-block; padding: 0 .18em; }
.small-word::before { content: ''; position: absolute; inset: 18% -4% 8%; background: var(--lime); border-radius: 6px; z-index: -1;  }
.lead { font-size: 17px; line-height: 2.1; color: var(--muted); max-width: 470px; }
.get { margin-top: 32px; }
.get:focus { outline: none; }
.get-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.get-meta { margin-top: 14px; font-size: 12px; color: var(--muted); }
.get-meta.is-error { color: #b54708; }
.get-meta a { color: var(--blue); text-decoration: underline; }
.retry { margin-top: 4px; min-height: 40px; font-size: 13px; font-weight: 700; color: var(--blue); }

/* The arched panel with the phone (sticky on desktop) */
.art { position: sticky; top: calc(var(--header-h) + 16px); isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: center; border-radius: 220px 220px 32px 32px; background: var(--sage); padding: 112px 20px 14px; transition: background 1s var(--ease), color 1s var(--ease); }
.art.is-evening { background: var(--dusk); }
.art.is-night { background: var(--night); color: #e9efe3; }
.sky { position: absolute; z-index: -1; top: 20px; left: 50%; width: min(440px, 100%); aspect-ratio: 440 / 240; transform: translateX(-50%); }
.sky svg { display: block; width: 100%; height: 100%; overflow: visible; }
.sky-arc { stroke: var(--orbit); stroke-width: 1.5; stroke-dasharray: 3 6; }
.sky-done { stroke: #e0a53a; stroke-width: 3; stroke-linecap: butt; stroke-dasharray: 100; stroke-dashoffset: var(--sky, 100); transition: stroke-dashoffset 1s var(--ease), stroke 1s; }
.art.is-night .sky-done { stroke: #e2f3af; }
.art.is-night .sky-arc { stroke: #ffffff22; }
.sun { position: absolute; left: var(--sx, 96.6%); top: var(--sy, 93.75%); width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: #f4b740; box-shadow: 0 0 0 7px #f4b74030, 0 0 0 16px #f4b74014; display: grid; place-items: center; transition: left 1s var(--ease), top 1s var(--ease), background 1s, box-shadow 1s; }
.sun .moon { width: 18px; height: 18px; color: #1f2a24; fill: currentColor; stroke: none; opacity: 0; transition: opacity .6s; }
.art.is-night .sun { background: #e2f3af; box-shadow: 0 0 0 7px #e2f3af22, 0 0 0 16px #e2f3af0d; }
.art.is-night .sun .moon { opacity: 1; }
.art-label { position: absolute; left: 14px; top: 240px; writing-mode: vertical-rl; direction: ltr; font-size: 10px; letter-spacing: 2px; color: var(--olive); opacity: .8; }
.art.is-night .art-label { color: #9fb487; }
.spark { position: absolute; right: 20px; bottom: 70px; font-size: 56px; line-height: 1; color: #849752; transition: transform 1.4s var(--ease), color 1s; }
.art.is-night .spark { color: #e2f3af; transform: rotate(90deg); }

/* iPhone 15 at its real proportions. Everything is measured in points of the
   device (--pt): the screen is 393 x 852 pt; the body is 71.6 x 147.6 mm, which
   leaves a uniform 19.56 pt border (432.12 x 891.12 pt overall). Screen corners
   are 55 pt, the body corners are concentric (74.56 pt), the Dynamic Island is
   126 x 37.33 pt at 11 pt from the top, and the home indicator is 134 x 5 pt at
   8 pt from the bottom. The screenshots were captured at 393 x 852 with the
   device's 59 / 34 pt safe area, so the app sits exactly where it does on the phone. */
.phone { --w: max(220px, min(290px, calc((100vh - 335px) * .4849))); --pt: calc(var(--w) / 432.12); position: relative; flex-shrink: 0; width: var(--w); padding: calc(19.56 * var(--pt)); border-radius: calc(74.56 * var(--pt)); background: #0b0c0d; box-shadow: inset 0 0 0 calc(3.2 * var(--pt)) #3b3e42, inset 0 0 0 calc(4 * var(--pt)) #1d1f21, 0 1px 0 1px #00000012, 0 30px 55px -26px #2a3620b8; }
.screen { position: relative; overflow: hidden; aspect-ratio: 393 / 852; border-radius: calc(55 * var(--pt)); background: #eef7ff; color: #000; transition: color .4s; }
.screen.is-dark { background: #10192b; color: #fff; }
.slides { position: absolute; inset: 0; overflow: hidden; container-type: inline-size; }
.slides img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; z-index: 0; }
.slides img.is-active { opacity: 1; z-index: 1; }
/* Status bar: time centred in the left "ear", icons in the right one, both on
   the Dynamic Island's centre line (11 + 37.33 / 2 = 29.67 pt). */
.status { position: absolute; z-index: 7; top: 0; left: 0; right: 0; height: calc(59.33 * var(--pt)); display: grid; grid-template-columns: 1fr calc(126 * var(--pt)) 1fr; align-items: center; direction: ltr; pointer-events: none; }
.status-time { grid-column: 1; justify-self: center; font-family: -apple-system, "SF Pro Text", system-ui, sans-serif; font-size: calc(17 * var(--pt)); font-weight: 600; letter-spacing: -.02em; line-height: 1; }
.status-icons { grid-column: 3; justify-self: center; display: flex; align-items: center; gap: calc(5.5 * var(--pt)); }
.status-icons svg { display: block; fill: currentColor; stroke: none; }
.status-icons .sig { width: calc(18 * var(--pt)); height: calc(12 * var(--pt)); }
.status-icons .wifi { width: calc(16 * var(--pt)); height: calc(12 * var(--pt)); }
.status-icons .bat { width: calc(27.5 * var(--pt)); height: calc(13 * var(--pt)); }
.status-icons .bat-case { fill: none; stroke: currentColor; stroke-opacity: .38; }
.status-icons .bat-nub { opacity: .4; }
.island { position: absolute; z-index: 9; top: calc(11 * var(--pt)); left: 50%; width: calc(126 * var(--pt)); height: calc(37.33 * var(--pt)); transform: translateX(-50%); border-radius: 999px; background: #000; }
.home-bar { position: absolute; z-index: 7; bottom: calc(8 * var(--pt)); left: 50%; width: calc(134 * var(--pt)); height: calc(5 * var(--pt)); transform: translateX(-50%); border-radius: 999px; background: currentColor; opacity: .9; }
/* Layers used to act out the app's own transitions */
.dim { position: absolute; inset: 0; z-index: 4; background: #000; opacity: 0; pointer-events: none; }
.slides .sheet { inset: auto 0 auto 0; top: 44.601%; height: 52.406%; z-index: 5; opacity: 1; transform: translateY(125%); }
.press { position: absolute; z-index: 6; opacity: 0; background: #0f172a; pointer-events: none; transition: opacity .12s ease; }
.press.is-down { opacity: .12; }
/* The fingertip stays on screen: it rests, travels, presses and lets go. */
.touch { position: absolute; z-index: 8; left: var(--tx, 66.67%); top: var(--ty, 75.12%); width: 12cqw; height: 12cqw; margin: -6cqw 0 0 -6cqw; border-radius: 50%; background: #64748b59; border: 2px solid #fffffff2; box-shadow: 0 6px 16px #0f172a38; opacity: 0; pointer-events: none; transition: opacity .4s ease, transform .14s ease, background .14s ease; }
.touch.is-on { opacity: 1; }
.touch.is-down { transform: scale(.8); background: #33415580; }
.touch::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid #ffffffd9; opacity: 0; }
.touch.is-release::after { animation: ripple .55s ease-out; }
@keyframes ripple { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(2.3); } }

.note { position: relative; z-index: 3; margin-top: 16px; display: inline-flex; align-items: center; gap: 11px; padding: 9px 16px 9px 10px; background: var(--surface); color: var(--ink); border-radius: 18px; box-shadow: 0 10px 26px #34432120; max-width: 330px; line-height: 1.55; }
.note::after { content: ''; position: absolute; top: -6px; left: 50%; width: 12px; height: 12px; margin-left: -6px; background: var(--surface); transform: rotate(45deg); border-radius: 2px; }
.note-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; box-shadow: 0 0 0 2px #e2f3af, 0 0 0 3px #cfe68f; transform-origin: 50% 80%; }
.note-body b { display: block; font-size: 11px; font-weight: 700; color: var(--olive); }
.note-body span { display: block; font-size: 13px; font-weight: 700; }
.note.is-pop { animation: pop .5s var(--spring); }
.note.is-pop .note-avatar { animation: nod .7s ease-in-out; }
@keyframes pop { 0% { transform: scale(.92); opacity: .4; } 60% { transform: scale(1.03); opacity: 1; } 100% { transform: scale(1); } }
@keyframes nod { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-9deg); } 60% { transform: rotate(6deg); } }
.art-caption { margin-top: 10px; font-size: 10px; color: var(--muted); }
.art.is-night .art-caption { color: #8f9c88; }
.bar { display: block; height: 6px; border-radius: 6px; background: var(--sage); margin-top: 6px; overflow: hidden; }
.bar i { display: block; height: 100%; width: var(--v); border-radius: inherit; background: var(--c); transition: width .8s var(--ease); }
.flash { animation: flash .7s ease-out; }
@keyframes flash { 30% { color: var(--blue); } }

/* Day */
.day-head { padding-top: 44px; border-top: 1px solid var(--line); margin-bottom: 44px; }
.day-head h2, .section-heading h2, .faq-heading h2 { font-size: clamp(28px, 3.2vw, 38px); font-weight: 900; line-height: 1.55; margin-top: 8px; }
.day-head > p:last-child { color: var(--muted); margin-top: 4px; max-width: 520px; }
.mini-today { display: none; }

.timeline { position: relative; }
.timeline::before, .timeline::after { content: ''; position: absolute; top: 18px; right: 111px; width: 2px; border-radius: 2px; }
.timeline::before { bottom: 18px; background: var(--line); }
.timeline::after { height: var(--fill, 0px); max-height: calc(100% - 36px); background: var(--blue); }
.entry { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 42px; padding-bottom: 64px; }
.entry:last-child { padding-bottom: 0; }
.entry::before { content: ''; position: absolute; top: 15px; right: 105px; z-index: 1; width: 14px; height: 14px; border-radius: 50%; background: var(--paper); border: 2px solid var(--line-strong); transition: background .3s, border-color .3s, transform .45s var(--spring); }
.entry.is-done::before { background: var(--blue); border-color: var(--blue); transform: scale(1.25); }
.entry-time { font-size: 46px; font-weight: 300; line-height: 1.1; color: var(--line-strong); text-align: left; direction: ltr; transition: color .5s; }
.entry-time i { font-style: normal; color: inherit; padding-inline: 1px; }
.entry.is-done .entry-time { color: var(--ink); }
.entry.is-done .entry-time i { color: var(--blue); }
.entry-body h3 { font-size: 22px; font-weight: 900; line-height: 1.5; }
.entry-body > p { color: var(--muted); margin-top: 4px; max-width: 480px; }
.card { margin-top: 18px; max-width: 520px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 16px 18px; box-shadow: var(--card-shadow); }
.badge { display: inline-flex; align-items: center; padding: 3px 11px; border-radius: 999px; background: #e2f3af; color: #455923; font-size: 12px; font-weight: 700; white-space: nowrap; }

/* Weight */
.weight-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.weight-top .muted { display: block; font-size: 12.5px; }
.weight-top strong { font-size: 28px; font-weight: 900; line-height: 1.35; }
.weight-top small { font-size: 14px; font-weight: 700; }
.weight-chart { width: 100%; height: 88px; margin-top: 10px; direction: ltr; overflow: visible; }
.weight-chart .grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 4; }
.weight-chart polyline { stroke: var(--blue); stroke-width: 2.4; stroke-dasharray: 100; stroke-dashoffset: 0; }
.weight-chart circle { fill: var(--surface); stroke: var(--blue); stroke-width: 2; transform-box: fill-box; transform-origin: center; }
.weight-chart circle.last { fill: var(--blue); }
.weight-foot { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); direction: ltr; }

/* Meal */
.meal-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.meal-head strong { font-size: 16px; font-weight: 900; }
.meal-head span { font-size: 13px; color: var(--muted); }
.meal-head b { color: var(--ink); font-size: 16px; }
.meal-items li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-block: 10px; border-bottom: 1px solid var(--line); font-size: 14px; }
.meal-items li:last-child { border-bottom: 0; }
.meal-items b { display: block; font-weight: 700; }
.meal-items div span { font-size: 12px; color: var(--muted); }
.meal-items li > span { font-weight: 700; }
.toast-line { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 6px 13px; border-radius: 999px; background: #e2f3af; color: #455923; font-size: 13px; font-weight: 700; }
.toast-line .icon { width: 16px; height: 16px; stroke-width: 2.4; }

/* Water: the app's own water character fills up */
.water { display: grid; grid-template-columns: 136px 1fr; gap: 16px; align-items: center; padding: 14px 18px 14px 14px; }
.water-mascot { width: 100%; height: auto; display: block; overflow: visible; }
.wm-body { fill: var(--surface); }
.wm-outline { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }
.wm-liquid { transform: translateY(331px); transition: transform 1.1s var(--ease); }
.wm-wave { fill: var(--blue); animation: wave 3.2s linear infinite; }
.wm-wave.back { opacity: .42; animation-duration: 4.4s; animation-direction: reverse; }
@keyframes wave { from { transform: translateX(0); } to { transform: translateX(-80px); } }
.wm-stache { transform-box: fill-box; transform-origin: 50% 40%; fill: var(--ink); }
.wm-stache.is-wiggle { animation: stache .9s ease-in-out; }
@keyframes stache { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-7deg); } 45% { transform: rotate(6deg); } 70% { transform: rotate(-3deg); } }
.wm-ref { stroke: var(--blue); stroke-width: 1.3; stroke-dasharray: 5 5; }
.wm-goal { stroke: var(--blue); stroke-width: 1.4; }
.water-side strong { display: block; font-size: 30px; font-weight: 900; line-height: 1.35; }
.water-side small { font-size: 14px; font-weight: 700; }
.water-side .muted { display: block; font-size: 12.5px; }
.water-add { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin-top: 12px; padding: 0 14px; border-radius: 12px; background: var(--blue-soft); color: var(--blue); font-weight: 700; font-size: 14px; transition: background .15s, color .15s, transform .15s; }
.water-add:hover { background: var(--blue); color: #fff; }
.water-add:active { transform: scale(.94); }
.water-add:disabled { opacity: .5; cursor: default; }
.water-add .icon { width: 18px; height: 18px; stroke-width: 2.2; }
.hint { margin-top: 8px; font-size: 12px; color: var(--muted); }

/* Search */
.search-field { display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 12px; border-radius: 12px; background: var(--sage-2); font-weight: 700; }
.search-field .icon { width: 18px; height: 18px; color: var(--muted); }
.caret { width: 2px; height: 20px; background: var(--blue); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.results { margin-top: 8px; }
.results li { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--line); font-size: 14px; transition: background .4s; }
.results li:last-child { border-bottom: 0; }
.results li > div { flex: 1; min-width: 0; }
.results b { display: block; font-weight: 700; }
.results div span { font-size: 12px; color: var(--muted); }
.results .kcal { font-weight: 700; }
.results .add, .results .pick { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--line-strong); color: var(--muted); }
.results .pick { background: var(--blue); border-color: var(--blue); color: #fff; }
.results .icon { width: 16px; height: 16px; stroke-width: 2.4; }
.results .is-picked { background: var(--blue-soft); border-radius: 12px; padding-inline: 10px; border-bottom-color: transparent; }

/* Workout */
.workout { padding: 0; overflow: hidden; }
.workout-media { position: relative; aspect-ratio: 461 / 240; overflow: hidden; }
.workout-media img { width: 100%; height: 100%; object-fit: cover; }
.play { position: absolute; left: 14px; bottom: 16px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: #202a25; }
.play .icon { width: 18px; height: 18px; fill: currentColor; stroke: none; margin-left: 2px; }
.progress { position: absolute; inset: auto 0 0; height: 4px; background: #ffffff55; }
.progress::after { content: ''; position: absolute; inset: 0 0 0 auto; width: 100%; background: #e2f3af; }
.workout-info { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px 14px; }
.workout-info strong { display: block; font-size: 16px; font-weight: 900; }
.workout-info span { font-size: 13px; color: var(--muted); }
.burn { padding: 4px 12px; border-radius: 999px; background: #e2f3af; color: #455923; font-size: 13px; white-space: nowrap; }

/* Macros */
.macro + .macro { margin-top: 12px; }
.macro-row { display: flex; justify-content: space-between; font-size: 14px; }
.macro-row b { font-weight: 700; }
.macro-row span { color: var(--muted); font-size: 13px; }

/* Night */
.night { position: relative; overflow: hidden; margin-top: 72px; margin-inline-start: 138px; padding: 36px 36px 34px; padding-inline-end: 180px; border-radius: 28px; background: var(--night); color: #e9efe3; }
.night-moon { position: absolute; left: 74px; top: 24px; width: 26px; height: 26px; color: #e2f3af; fill: #e2f3af; stroke: none; }
.night-mascot { position: absolute; left: 30px; top: 50%; width: 112px; height: 112px; margin-top: -56px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px #e2f3af33, 0 0 0 10px #e2f3af0f, 0 20px 40px -12px #000a; animation: float 5s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-6px); } }
.night-sign { margin: -12px 0 18px; font-size: 13px; color: #a9b6a0; }
.night-kicker { font-size: 13px; color: #a9b6a0; }
.night-title { font-size: clamp(34px, 4vw, 52px); font-weight: 900; line-height: 1.45; margin-bottom: 20px; }
.night-title span { color: #e2f3af; }

/* Install */
.install { padding-top: 96px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 30px; }
.section-heading > p { font-size: 13px; color: var(--muted); }
.install-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.install-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 28px; background: var(--surface); padding: 30px; }
.install-card:focus { outline: none; }
.install-ios { background: var(--sage-2); }
.install-title { display: flex; align-items: center; gap: 14px; }
.platform-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px; background: var(--sage); flex-shrink: 0; }
.install-ios .platform-icon { background: var(--surface); }
.install-title h3 { font-size: 19px; font-weight: 900; line-height: 1.5; }
.install-title p { font-size: 12px; color: var(--muted); }
.steps { margin: 28px 0 8px; display: grid; gap: 22px; }
.steps li { position: relative; display: flex; align-items: flex-start; gap: 15px; }
.steps li:not(:last-child)::after { content: ''; position: absolute; right: 14px; top: 34px; width: 1px; height: calc(100% - 12px); background: var(--line); }
.step-n { position: relative; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--sage-2); border: 1px solid var(--line); font-size: 13px; flex-shrink: 0; }
.install-ios .step-n { background: var(--surface); }
.steps h4 { font-size: 14.5px; font-weight: 700; }
.steps p { font-size: 13px; color: var(--muted); margin-top: 2px; }
.facts { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 6px 28px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.facts dt { font-size: 11px; color: var(--muted); }
.facts dd { font-weight: 700; font-size: 13.5px; }
.sha { margin-top: 12px; font-size: 13px; }
.sha summary { cursor: pointer; color: var(--blue); font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.sha p { color: var(--muted); margin-block: 2px 10px; }
.sha-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--sage-2); }
.sha code { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; line-height: 1.6; word-break: break-all; text-align: left; }
.copy { display: inline-flex; align-items: center; gap: 5px; min-height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface); font-size: 13px; font-weight: 700; }
.copy:disabled { opacity: .5; cursor: default; }
.copy .icon { width: 16px; height: 16px; }
.copy.is-done { background: #3f8f4f; border-color: #3f8f4f; color: #fff; }
.desktop-row { display: flex; align-items: center; gap: 16px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.qr { width: 84px; height: 84px; border-radius: 10px; background: #fff; padding: 3px; flex-shrink: 0; }
.desktop-row p { font-size: 13px; color: var(--muted); }
.card-link { margin-top: auto; min-height: 48px; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13.5px; font-weight: 700; color: var(--blue); }
.sha + .card-link, .desktop-row + .card-link { margin-top: 18px; }
.card-link .icon { width: 19px; height: 19px; transition: transform .2s var(--ease); }
.card-link:hover .icon { transform: translateX(-4px); }

/* FAQ */
.faq { padding-block: 92px; display: grid; grid-template-columns: 1fr 1.5fr; gap: 70px; }
.faq-heading > p:last-child { color: var(--muted); font-size: 13px; margin-top: 14px; }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 72px; padding-block: 16px; font-size: 15px; font-weight: 700; cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary .icon { width: 18px; height: 18px; transition: transform .2s; }
.faq-list details[open] summary .icon { transform: rotate(45deg); }
.faq-list details p { color: var(--muted); font-size: 14px; line-height: 2.05; padding-bottom: 20px; max-width: 620px; }
.faq-list a { color: var(--blue); text-decoration: underline; text-underline-offset: 4px; }

/* Closing + footer */
.closing { display: flex; align-items: center; justify-content: space-between; gap: 30px; background: #e2f3af; color: #202a25; padding: 38px 46px; border-radius: 28px; }
.closing span { font-size: 13px; color: #596b3c; }
.closing h2 { font-size: clamp(24px, 2.6vw, 30px); font-weight: 900; margin-top: 4px; line-height: 1.6; }
.closing .button-dark { background: #202a25; color: #fff; }
.footer { padding-block: 44px 22px; }
.footer-row { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.footer .brand { display: inline-flex; align-items: center; font-size: 26px; }
.tagline { font-size: 11.5px; font-weight: 400; color: var(--muted); border-inline-start: 1px solid var(--line); padding-inline-start: 14px; margin-inline-start: 14px; }
.footer p { font-size: 12px; color: var(--muted); }
.footer-web { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 13px; }
.footer-social { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 16px; }
.footer-social a { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 44px; color: var(--blue); font-size: 13px; font-weight: 700; }
.footer-social a:hover { text-decoration: underline; }
.footer-web .icon { width: 18px; height: 18px; }
.attribution { display: block; margin-top: 24px; text-align: center; font-size: 9px; color: var(--muted); }
.attribution a { text-decoration: underline; }
.toast { position: fixed; z-index: 70; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 14px; background: #202a25; color: #fff; font-size: 14px; font-weight: 700; }
.toast.is-error { background: #b42318; }


/* Photos and new card types */
.card-photo { margin: -16px -18px 14px; aspect-ratio: 3 / 1.55; overflow: hidden; border-radius: 19px 19px 0 0; }
.card-photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 1.6s var(--ease); }
.is-played .card-photo img { transform: none; }
.result-thumb { width: 38px; height: 38px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.result-thumb.blank { background: var(--sage); }
.dinner { display: grid; grid-template-columns: 200px 1fr; gap: 16px; align-items: center; padding: 12px; }
.dinner-photo { width: 100%; height: 150px; object-fit: cover; border-radius: 14px; }
.dinner-info strong { display: block; font-size: 18px; font-weight: 900; }
.portions { display: flex; flex-wrap: wrap; gap: 6px; margin-block: 10px; }
.portions span { padding: 4px 11px; border-radius: 999px; border: 1px solid var(--line-strong); font-size: 12px; color: var(--muted); }
.portions .is-on { background: var(--ink); border-color: var(--ink); color: var(--paper); font-weight: 700; }
.dinner-info p { font-size: 13px; color: var(--muted); }
.dinner-info p b { font-size: 22px; font-weight: 900; color: var(--ink); }
.js .portions span { transition: background .4s, color .4s, border-color .4s; }
.js .dinner:not(.is-picked-portion) .portions .is-on { background: transparent; color: var(--muted); border-color: var(--line-strong); font-weight: 400; }

/* ---------- Motion (only when JS runs; reduced-motion users get the final state) ---------- */
/* Critical copy stays readable even when a browser suspends animations. */
.js h1 .h-line { animation: rise .9s var(--ease) backwards; }
.js h1 .h-line:nth-child(2) { animation-delay: .12s; }
.js h1 .h-line:nth-child(3) { animation-delay: .24s; }
.js .scribble path { stroke-dashoffset: 320; animation: draw 1s var(--ease) .75s forwards; }
.js .small-word { animation: wobble .8s var(--spring) 1.1s both; }
@keyframes rise { from { transform: translateY(24px); } to { transform: none; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes wobble { 0% { transform: scale(.6); } 100% { transform: scale(1); } }

.js .entry-body { opacity: 0; transform: translateY(32px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .entry.is-visible .entry-body { opacity: 1; transform: none; }

.js .weight-chart polyline { stroke-dashoffset: 100; transition: stroke-dashoffset 1.3s var(--ease) .15s; }
.js .weight-chart circle { opacity: 0; transform: scale(.2); transition: opacity .3s, transform .45s var(--spring); }
.js .weight .badge { opacity: 0; transform: translateY(6px); transition: opacity .5s 1.3s, transform .5s var(--spring) 1.3s; }
.js .is-played .weight-chart polyline { stroke-dashoffset: 0; }
.js .is-played .weight-chart circle { opacity: 1; transform: none; }
.js .is-played .weight .badge { opacity: 1; transform: none; }
.weight-chart circle:nth-child(2) { transition-delay: .18s; } .weight-chart circle:nth-child(3) { transition-delay: .36s; }
.weight-chart circle:nth-child(4) { transition-delay: .54s; } .weight-chart circle:nth-child(5) { transition-delay: .72s; }
.weight-chart circle:nth-child(6) { transition-delay: .9s; } .weight-chart circle:nth-child(7) { transition-delay: 1.1s; }

.js .meal-items li { opacity: 0; transform: translateX(18px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.js .meal-items li:nth-child(2) { transition-delay: .28s; }
.js .meal-items li:nth-child(3) { transition-delay: .56s; }
.js .meal-items li:nth-child(4) { transition-delay: .84s; }
.js .is-played .meal-items li { opacity: 1; transform: none; }
.js .toast-line { opacity: 0; transform: scale(.6); transform-origin: right center; transition: opacity .3s 1.2s, transform .5s var(--spring) 1.2s; }
.js .is-played .toast-line { opacity: 1; transform: none; }

.js .results li { opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease), transform .4s var(--ease), background .4s; }
.js .results li:nth-child(2) { transition-delay: .12s; }
.js .results li:nth-child(3) { transition-delay: .24s; }
.js .is-typed .results li { opacity: 1; transform: none; }
.js .results .is-picked { background: transparent; }
.js .results .pick { transform: scale(0); transition: transform .45s var(--spring); }
.js .is-picked-done .results .is-picked { background: var(--blue-soft); }
.js .is-picked-done .results .pick { transform: none; }

.js .progress::after { width: 0; transition: width 1.6s linear .2s; }
.js .is-played .progress::after { width: 100%; }
.js .burn { opacity: 0; transform: scale(.6); transition: opacity .3s 1.7s, transform .5s var(--spring) 1.7s; }
.js .is-played .burn { opacity: 1; transform: none; }

.js .macros .bar i { width: 0; }
.js .is-played .macros .bar i { width: var(--v); }
.js .macros .macro:nth-child(2) .bar i { transition-delay: .15s; }
.js .macros .macro:nth-child(3) .bar i { transition-delay: .3s; }

.js .night { opacity: 0; transform: translateY(40px) scale(.98); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.js .night.is-visible { opacity: 1; transform: none; }
.js .night .night-moon { transform: rotate(-40deg) scale(.6); opacity: 0; transition: transform 1.2s var(--spring) .3s, opacity .6s .3s; }
.js .night.is-visible .night-moon { transform: none; opacity: 1; }

.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .shell { width: calc(100% - 48px); }
  .layout { grid-template-columns: minmax(0, 1fr) 380px; column-gap: 44px; }
  .header-nav { gap: 20px; }
  .timeline::before, .timeline::after { right: 91px; }
  .entry { grid-template-columns: 76px minmax(0, 1fr); gap: 42px; }
  .entry::before { right: 85px; }
  .entry-time { font-size: 32px; }
  .night { margin-inline-start: 118px; }
}
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; grid-template-areas: "intro" "side" "day"; }
  .header-nav { display: none; }
  .intro { padding-block: 44px 36px; }
  .side { padding: 0 0 56px; }
  .art { position: relative; top: 0; max-width: 460px; margin-inline: auto; }
  .phone { --w: 262px; }
  /* The day on smaller screens: a live copy of the phone stays pinned under the
     header next to the sky, the clock and the note, so each step is acted out
     in view, as it is beside the timeline on desktop. The phone takes 40% of
     the height left under the header. */
  .mini-today { --band-h: clamp(200px, calc((100vh - var(--header-h)) * .4), 360px); position: sticky; top: var(--header-h); z-index: 5; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; margin: 0 -24px 28px; padding: 12px 24px 14px; background: var(--sage); color: var(--ink); border-radius: 0 0 28px 28px; box-shadow: 0 18px 30px -26px #2a3620a6; transition: background 1s var(--ease), color 1s var(--ease); }
  @supports (height: 100svh) { .mini-today { --band-h: clamp(200px, calc((100svh - var(--header-h)) * .4), 360px); } }
  .mini-today.is-evening { background: var(--dusk); }
  .mini-today.is-night { background: var(--night); color: #e9efe3; }
  .mini-phone .phone { --w: calc(var(--band-h) * .48492); box-shadow: inset 0 0 0 calc(3.2 * var(--pt)) #3b3e42, inset 0 0 0 calc(4 * var(--pt)) #1d1f21, 0 1px 0 1px #00000012, 0 12px 22px -14px #2a3620b8; }
  .mini-info { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; }
  .mini-sky { position: relative; width: 116px; aspect-ratio: 440 / 240; }
  .mini-sky svg { display: block; width: 100%; height: 100%; overflow: visible; }
  .mini-sky .sun { width: 16px; height: 16px; margin: -8px 0 0 -8px; box-shadow: 0 0 0 4px #f4b74030, 0 0 0 8px #f4b74014; }
  .mini-sky .sun .moon { width: 10px; height: 10px; }
  .mini-today.is-night .sun { background: #e2f3af; box-shadow: 0 0 0 4px #e2f3af22; }
  .mini-today.is-night .sun .moon { opacity: 1; }
  .mini-today.is-night .sky-done { stroke: #e2f3af; }
  .mini-today.is-night .sky-arc { stroke: #ffffff22; }
  .mini-time { display: flex; flex-direction: column; gap: 2px; }
  .mini-clock { font-size: 34px; font-weight: 300; line-height: 1.15; }
  .mini-step { font-size: 16px; font-weight: 900; }
  .mini-note { margin-top: 0; gap: 8px; padding: 7px 12px 7px 8px; max-width: 100%; }
  .mini-note::after { display: none; }
  .mini-note .note-avatar { width: 30px; height: 30px; }
  .install-grid { grid-template-columns: 1fr; }
  .faq { grid-template-columns: 1fr; gap: 24px; }
}
/* ---------- Phone ---------- */
@media (max-width: 640px) {
  :root { --header-h: 64px; }
  .shell { width: calc(100% - 32px); }
  body { font-size: 14.5px; }
  .brand { font-size: 25px; }
  .header-web { padding: 0 12px; font-size: 12px; }
  h1 { font-size: 50px; margin-block: 16px; }
  .lead { font-size: 15.5px; }
  .lead br { display: none; }
  .get-buttons .button { flex: 1 1 100%; }
  .art { border-radius: 150px 150px 28px 28px; padding: 36px 20px 18px; }
  .art-label { display: none; }
  .art { padding-top: 104px; }
  .phone { --w: 244px; }
  .note { font-size: 12px; padding: 9px 12px 9px 10px; }
    .spark { font-size: 44px; right: 12px; bottom: 60px; }
  .card-photo { margin: -16px -18px 12px; }
  .dinner { grid-template-columns: 1fr; }
  .dinner-photo { aspect-ratio: 3 / 2; height: auto; }
  .mini-today { margin-inline: -16px; padding-inline: 16px; }
  .day-head { padding-top: 32px; margin-bottom: 20px; }
  .timeline::before, .timeline::after { right: 6px; top: 12px; }
  .entry { grid-template-columns: 1fr; gap: 6px; padding-inline-start: 34px; padding-bottom: 48px; }
  .entry::before { right: 0; top: 9px; }
  .entry-time { font-size: 30px; text-align: right; }
  .card { max-width: none; }
  .night { margin-inline-start: 0; padding: 30px 24px; padding-inline-end: 24px; }
  .night-mascot { position: static; display: block; width: 84px; height: 84px; margin: 0 0 14px; }
  .night-moon { left: 24px; top: 24px; }
  .water { grid-template-columns: 104px 1fr; gap: 12px; }
  .water-side strong { font-size: 26px; }
  .install { padding-top: 64px; }
  .section-heading { flex-direction: column; align-items: flex-start; }
  .section-heading br { display: none; }
  .install-card { padding: 22px; border-radius: 24px; }
  .facts { grid-template-columns: 1fr 1fr; }
  .faq { padding-block: 64px; }
  .closing { flex-direction: column; align-items: stretch; text-align: center; padding: 30px 22px; }
  .footer-row { flex-direction: column; align-items: flex-start; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js h1 .h-line, .js .entry-body, .js .night, .js .reveal { opacity: 1 !important; transform: none !important; }
  .js .scribble path { stroke-dashoffset: 0; }
}

/* A quiet invitation stays reachable throughout the mobile story. */
.mobile-start-dock { display: none; }
@keyframes start-heartbeat {
  0%, 15%, 35%, 100% { transform: scale(1); }
  21% { transform: scale(1.025); }
  28% { transform: scale(1.012); }
}
.start-button { animation: start-heartbeat 4.5s ease-in-out infinite; }
.start-button:hover, .start-button:focus-visible, .start-button:active { animation-play-state: paused; }
@media (max-width: 900px) {
  body { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
  .mobile-start-dock { position: fixed; inset-inline: 0; bottom: 0; z-index: 30; display: flex; justify-content: center; padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px)); background: var(--paper); border-top: 1px solid var(--line); }
  .mobile-start-dock .button { width: min(100%, 480px); min-height: 54px; }
  html { scroll-padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) { .start-button { animation: none; } }