/* Fit Machines: every chapter a full-bleed color with real appliances up close, and the story told
   with the app's own pieces (a day counter, the reminder, the to-do you tick, who did what). Each
   chapter's words read top to bottom in one column: the headline or counter, the caption under it,
   then what happens next. */

@font-face {
  font-family: 'Fredoka';
  src: url('fonts/fredoka-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --bg: #e8885f;
  --fg: #ffffff;
  --fg-2: rgba(255, 255, 255, 0.82);
  --ink: #2a2730;
  --hl: #2a2730;
  --round: 'Fredoka', ui-rounded, 'SF Pro Rounded', system-ui, sans-serif;
  --text: ui-rounded, 'SF Pro Rounded', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; color: var(--fg); font: 400 20px/1.5 var(--text); -webkit-font-smoothing: antialiased; overflow-x: hidden; background: var(--bg); }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; }

.theater { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 2; pointer-events: none; }
.bubbles { position: fixed; inset: 0; z-index: 5; pointer-events: none; }
.bubble {
  position: absolute; left: 0; top: 0; max-width: 260px; padding: 11px 18px;
  background: #fff; color: var(--ink); border-radius: 24px;
  font: 500 18px/1.3 var(--round); text-align: center;
  box-shadow: 0 14px 32px -14px rgba(0, 0, 0, 0.35);
  opacity: 0; scale: 0.7; transition: opacity 0.2s, scale 0.35s cubic-bezier(.3, 1.7, .5, 1); transform-origin: 50% 100%; translate: -50% -100%;
}
.bubble.show { opacity: 1; scale: 1; }

.top { position: fixed; inset: 0 0 auto; z-index: 6; display: flex; align-items: center; justify-content: space-between; padding: 18px clamp(16px, 4vw, 40px); font: 600 20px var(--round); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { border-radius: 10px; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .4); }
.get { text-decoration: none; font: 600 16px var(--round); color: var(--bg); background: var(--fg); padding: 10px 18px; border-radius: 99px; transition: transform .2s; }
.get:hover { transform: scale(1.05) rotate(-2deg); }

.scene { position: relative; }
.sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; pointer-events: none; }
.sticky.back { z-index: 1; }
.sticky.front { z-index: 3; }

/* the giant headline behind Gizmo */
.mega {
  margin: 0;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  gap: 0 0.22em;
  padding: 0 4vw 40vh;
  text-align: center;
  font: 700 clamp(64px, 10.4vw, 190px)/0.84 var(--round);
  letter-spacing: -0.05em;
  color: var(--fg);
}
.mega .hl { color: var(--hl); }
.mega .br { flex-basis: 100%; }

.quote { position: absolute; left: clamp(20px, 6vw, 100px); top: 50%; translate: 0 -50%; width: min(760px, 56vw); margin: 0; }
.quote p { margin: 0; font: 700 clamp(44px, 6vw, 96px)/0.98 var(--round); letter-spacing: -0.035em; text-indent: -0.4em; }
.quote cite { display: block; margin-top: 22px; font: 500 20px var(--round); font-style: normal; color: var(--fg-2); }
.caption { position: absolute; left: clamp(20px, 6vw, 100px); bottom: 9vh; width: min(520px, 80vw); margin: 0; font: 500 clamp(18px, 1.6vw, 22px)/1.4 var(--round); color: var(--fg-2); }
.caption.center { left: 50%; translate: -50% 0; text-align: center; width: min(640px, 88vw); }

.stack { position: absolute; left: clamp(20px, 6vw, 100px); top: 50%; translate: 0 -50%; width: min(860px, 62vw); margin: 0; font: 700 clamp(46px, 6.4vw, 104px)/0.98 var(--round); letter-spacing: -0.04em; }
.stack .w { opacity: 0.12; transition: opacity .35s; }
.stack .w.on { opacity: 1; }
.stack .accent { display: block; color: var(--hl); }

.headline { position: absolute; left: clamp(20px, 6vw, 100px); top: 24vh; margin: 0; font: 700 clamp(60px, 9vw, 150px)/0.88 var(--round); letter-spacing: -0.045em; }
.headline.center { left: 0; right: 0; top: 13vh; text-align: center; font-size: clamp(48px, 7vw, 116px); }
.headline span { color: var(--hl); }

.end { min-height: 100vh; display: flex; flex-direction: column; }
.final { position: relative; z-index: 3; flex: 1; display: flex; flex-direction: column; align-items: center; padding-top: 12vh; }
.final .headline { position: static; margin-bottom: 28px; }
.store { display: inline-block; transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.store:hover { transform: scale(1.06) rotate(-2deg); }
.small { font: 500 15px var(--round); color: var(--fg-2); }
footer { position: relative; z-index: 3; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; padding: 24px clamp(16px, 4vw, 40px) 34px; font: 500 15px var(--round); color: var(--fg-2); }
footer nav { display: flex; gap: 18px; }
footer a { text-decoration: none; }

@media (max-width: 760px), (max-aspect-ratio: 9/10) {
  .mega { padding-bottom: 40vh; font-size: clamp(60px, 14vw, 140px); }
  .quote { top: 14vh; translate: 0 0; width: auto; left: max(20px, 6vw); right: max(20px, 6vw); }
  .quote p { font-size: clamp(38px, 8.4vw, 80px); }
  .stack { top: 14vh; translate: 0 0; width: auto; left: max(20px, 6vw); right: max(20px, 6vw); font-size: clamp(40px, 8.4vw, 84px); }
  .headline { top: 14vh; left: max(20px, 6vw); font-size: clamp(52px, 11.5vw, 120px); }
  .caption { left: max(20px, 6vw); }
  .caption { bottom: 5vh; }
  .final .headline { font-size: clamp(44px, 9vw, 90px); }
}
@media (prefers-reduced-motion: reduce) { .stack .w { transition: none; } }

.col {
  position: absolute;
  left: clamp(20px, 6vw, 100px);
  top: 16vh;
  width: min(640px, 46vw);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}
.col.middle { top: 50%; translate: 0 -50%; width: min(620px, 44vw); }
.col.center { left: 50%; translate: -50% 0; top: 13vh; width: min(980px, 92vw); align-items: center; text-align: center; }
.col > * { position: static; translate: none; inset: auto; margin: 0; }
.col .quote, .col .headline { width: auto; }
.col .caption { width: auto; max-width: 540px; font: 500 clamp(19px, 1.7vw, 24px)/1.4 var(--round); color: var(--fg-2); }
.col.center .caption { max-width: 640px; translate: none; text-align: center; }

/* the care story: beats crossfade in one place; the reminder and the to-do grow in under them while
   the column stays centered; the days count up, faint, on the right */
.col.story { top: 50%; translate: 0 -50%; width: min(560px, 40vw); gap: 0; }
.col .quote p, .beats .beat b, .headline { text-wrap: balance; }
.beats { display: grid; width: 100%; }
.beats .beat { grid-area: 1 / 1; align-self: start; margin: 0; opacity: 0; font: 500 clamp(20px, 1.9vw, 27px)/1.4 var(--round); color: var(--fg-2); }
.beats .beat b { display: block; font: 700 clamp(60px, 8.6vw, 144px)/0.9 var(--round); letter-spacing: -0.045em; color: var(--fg); margin-bottom: 18px; }
.grow { height: 0; width: 100%; transition: height 0.55s cubic-bezier(0.2, 1, 0.3, 1); }
.grow > .notif.big, .grow > .todo { transform: translateY(-28px) scale(0.9); transform-origin: 50% 0; transition: opacity 0.3s, transform 0.75s cubic-bezier(0.2, 1.45, 0.35, 1); }
.grow.open > .notif.big, .grow.open > .todo { opacity: 1; transform: none; }
#todo-slot.open > .todo { transition-delay: 0.2s; }
.grow > * { margin-top: 22px; }
.day {
  position: fixed;
  z-index: 1;
  mix-blend-mode: plus-lighter;
  pointer-events: none;
  right: clamp(20px, 6vw, 100px);
  top: 13vh;
  margin: 0;
  text-align: right;
  font: 700 clamp(72px, 9.6vw, 160px)/0.8 var(--round);
  letter-spacing: -0.05em;
  color: #fff;
  opacity: 0;
  font-variant-numeric: tabular-nums;
}
.day small { display: block; font-size: 0.24em; letter-spacing: 0.02em; margin-bottom: 0.15em; }

/* The reminder and the to-do are one component: same width, padding, rounding and type; the to-do's
   circle sits where the app icon is, so their text lines up. */
.notif.big, .todo {
  width: 100%;
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 38px 14px 18px;
  border-radius: 46px;
  color: var(--ink);
  box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.45);
  opacity: 0;
}
.notif.big { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); }
.todo { background: #fff; }
.notif.big b, .todo b { display: block; font: 600 21px/1.25 var(--round); }
.notif.big span, .todo small { display: block; font: 400 19px/1.3 var(--text); }
.notif.big span { color: #5f5867; }
.notif.big img { width: 56px; height: 56px; border-radius: 14px; }
.notif.big time { align-self: center; font-size: 15px; color: #8d8592; }
.todo .ring { justify-self: center; width: 40px; height: 40px; border-radius: 50%; border: 3.5px solid #b3abb5; transition: background .25s, border-color .25s, transform .3s cubic-bezier(.3, 1.8, .5, 1); }
.todo small { color: #d4483f; transition: color .3s; }
.todo.ticked .ring { background: #ef7f71 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 24px no-repeat; border-color: #ef7f71; transform: scale(1.12); }
.todo.ticked small { color: #3dbb78; }

.done-list { padding: 0; list-style: none; display: grid; gap: 12px; width: min(460px, 100%); }
.done-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 24px 9px 9px;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font: 500 19px/1.25 var(--round);
  box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translateY(-28px) scale(0.9);
  transform-origin: 50% 0;
  transition: opacity 0.3s, transform 0.75s cubic-bezier(0.2, 1.45, 0.35, 1);
}
.done-list.open li { opacity: 1; transform: none; }
.done-list.open li:nth-child(2) { transition-delay: 0.2s; }
.done-list.open li:nth-child(3) { transition-delay: 0.4s; }
.done-list b { font-weight: 600; }
.done-list small { display: block; font-size: 14px; color: #8d8592; }
.done-list .check { width: 32px; height: 32px; flex: none; border-radius: 50%; background: #d9a92e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat; }

.headline.center { font-size: clamp(56px, 8.2vw, 136px); }

.final .store img { width: clamp(240px, 21vw, 320px); height: auto; }

.soon { position: relative; cursor: default; }
.soon:hover { transform: none; }
.soon .badge { position: absolute; top: -11px; right: -12px; padding: 3px 9px; border-radius: 99px; background: var(--ink); color: #fff; font: 600 12px/1.25 var(--round); white-space: nowrap; rotate: 6deg; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .5); }
.final .store.soon .badge { top: -14px; right: -22px; padding: 5px 13px; background: #fff; color: var(--ink); font-size: 16px; }

@media (max-width: 760px), (max-aspect-ratio: 9/10) {
  .mega { font-size: clamp(64px, 19.5vw, 170px); padding-bottom: 36vh; }
  .headline { font-size: clamp(56px, 15vw, 150px); }
  .headline.center, .final .headline { font-size: clamp(50px, 13.4vw, 130px); }
  .quote p { font-size: clamp(40px, 10.6vw, 100px); }
  .quote cite { font-size: 17px; margin-top: 12px; }
  .stack { font-size: clamp(42px, 11vw, 100px); }
  .col, .col.middle { left: max(20px, 6vw); right: max(20px, 6vw); width: auto; top: 12vh; translate: none; gap: 14px; }
  .col.center { left: max(16px, 5vw); right: max(16px, 5vw); width: auto; top: 11vh; translate: none; }
  .col .caption { font-size: clamp(17px, 4.4vw, 26px); }
  .col.story { top: 18vh; translate: none; left: max(20px, 6vw); right: max(20px, 6vw); width: auto; }
  .beats .beat { font-size: clamp(17px, 4.6vw, 26px); }
  .beats .beat b { font-size: clamp(54px, 15vw, 140px); margin-bottom: 10px; }
  .grow > * { margin-top: 14px; }
  .day { top: 10.5vh; right: max(20px, 6vw); font-size: 40px; }
  .day small { display: inline; font-size: 0.42em; margin-right: 6px; }
  .notif.big, .todo { grid-template-columns: 44px 1fr auto; gap: 10px; padding: 11px 26px 11px 13px; border-radius: 34px; }
  .notif.big img { width: 44px; height: 44px; border-radius: 11px; }
  .notif.big b, .todo b { font-size: 16px; }
  .notif.big span, .todo small { font-size: 14px; }
  .todo .ring { width: 32px; height: 32px; }
  .done-list { gap: 8px; }
  .done-list li:nth-child(3) { display: none; }
  .done-list li { font-size: 16px; padding: 7px 20px 7px 7px; }
  .done-list .check { width: 26px; height: 26px; background-size: 16px; }
}