:root {
  --mint: #247d66;
  --mint-bright: #61d2b1;
  --mint-soft: #dff3ec;
  --ink: #0c1513;
  --ink-2: #24332f;
  --muted: #65736f;
  --paper: #f8f7f2;
  --paper-bright: #fffefa;
  --surface: #eef2ef;
  --night: #0c1513;
  --night-2: #14201e;
  --lavender: #7f67ca;
  --lavender-soft: #ede9fb;
  --ocean: #2998b7;
  --ocean-soft: #e1f1f6;
  --apricot: #df7d46;
  --apricot-soft: #f9e9df;
  --line: rgba(12, 21, 19, .11);
  --line-light: rgba(255, 255, 255, .13);
  --shadow: 0 28px 80px -42px rgba(12, 21, 19, .34);
  --display: Georgia, 'Times New Roman', serif;
  --body: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --max: 1380px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  min-width: 320px;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
section { position: relative; }

.skip-link {
  position: fixed;
  left: 16px;
  top: -80px;
  z-index: 100;
  padding: 11px 16px;
  border-radius: 12px;
  color: #fff;
  background: var(--ink);
  transition: top .2s;
}
.skip-link:focus { top: 16px; }
:focus-visible { outline: 3px solid var(--ocean); outline-offset: 4px; border-radius: 5px; }

/* Navigation */
.nav {
  position: fixed;
  z-index: 60;
  top: 18px;
  left: 50%;
  width: min(calc(100% - 36px), 1420px);
  height: 72px;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
  padding: 9px 14px 9px 12px;
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 24px;
  background: rgba(255, 254, 250, .82);
  box-shadow: 0 18px 46px -34px rgba(12, 21, 19, .46);
  backdrop-filter: blur(18px) saturate(145%);
  transition: top .3s var(--ease), height .3s var(--ease), background .3s, box-shadow .3s;
}
.nav.scrolled {
  top: 10px;
  height: 62px;
  background: rgba(255, 254, 250, .94);
  box-shadow: 0 18px 48px -30px rgba(12, 21, 19, .5);
}
.nav-brand {
  width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -.03em;
}
.nav-logo { width: 40px; height: 40px; border-radius: 12px; box-shadow: 0 8px 18px -12px rgba(12, 21, 19, .5); }
.nav-links { display: flex; align-items: center; gap: clamp(18px, 2.8vw, 38px); color: var(--ink-2); font-size: 14px; font-weight: 620; }
.nav-links a { position: relative; }
.nav-links a::after { content: ''; position: absolute; right: 0; bottom: -7px; left: 0; height: 1.5px; transform: scaleX(0); background: var(--mint); transition: transform .25s var(--ease); }
.nav-links a:hover::after, .nav-links a:focus-visible::after { transform: scaleX(1); }
.nav-cta {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 19px;
  border-radius: 15px;
  color: #fff;
  background: var(--mint);
  font-size: 14px;
  font-weight: 720;
  box-shadow: 0 13px 28px -18px rgba(36, 125, 102, .8);
  transition: transform .25s var(--ease), background .25s;
}
.nav-cta:hover { transform: translateY(-2px); background: #19644f; }

/* Shared typography and motion */
.eyebrow, .story-kicker {
  color: var(--mint);
  font-size: 12px;
  font-weight: 760;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.eyebrow-light { color: var(--mint-bright); }
.section-title {
  font-family: var(--display);
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 500;
  line-height: .99;
  letter-spacing: -.045em;
}
.js .reveal { opacity: 0; transform: translateY(24px); }
.js .reveal.in {
  opacity: 1;
  transform: none;
  transition: opacity .85s var(--ease) var(--d, 0s), transform .85s var(--ease) var(--d, 0s);
}

/* Buttons */
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.btn {
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 0 25px;
  border-radius: 17px;
  font-size: 15px;
  font-weight: 740;
  transition: transform .25s var(--ease), background .25s, box-shadow .25s;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { color: #fff; background: var(--mint); box-shadow: 0 18px 36px -22px rgba(36, 125, 102, .85); }
.btn-primary:hover { background: #19644f; box-shadow: 0 22px 42px -22px rgba(36, 125, 102, .95); }
.btn-secondary { border: 1px solid var(--line); color: var(--ink); background: rgba(255, 255, 255, .58); }
.btn-secondary:hover { background: #fff; }

/* Device shell */
.device {
  position: relative;
  aspect-ratio: 1206 / 2622;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 42px;
  background: #080b0a;
  box-shadow: 0 45px 88px -42px rgba(12, 21, 19, .72), inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.device::after {
  content: '';
  position: absolute;
  z-index: 2;
  top: 13%;
  right: -4px;
  width: 3px;
  height: 15%;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(#2a2d2c, #080a09);
}
.device-screen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 35px; background: #0c1513; }
.device-screen > img { width: 100%; height: 100%; object-fit: cover; }

/* Hero */
.hero {
  min-height: 100svh;
  overflow: hidden;
  padding: 132px clamp(20px, 4vw, 58px) 42px;
  background:
    radial-gradient(circle at 75% 22%, rgba(97, 210, 177, .12), transparent 24%),
    radial-gradient(circle at 6% 58%, rgba(223, 125, 70, .08), transparent 20%),
    var(--paper);
}
.hero-grid {
  position: relative;
  z-index: 2;
  min-height: 720px;
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(390px, .86fr) minmax(560px, 1.14fr);
  align-items: center;
  gap: clamp(36px, 5vw, 80px);
}
.hero-copy { position: relative; z-index: 3; max-width: 620px; }
.hero-title {
  margin-top: 20px;
  font-family: var(--display);
  font-size: clamp(56px, 6.3vw, 94px);
  font-weight: 500;
  line-height: .95;
  letter-spacing: -.055em;
}
.hero-sub { max-width: 590px; margin-top: 25px; color: var(--muted); font-size: clamp(17px, 1.45vw, 21px); line-height: 1.6; }
.trust-row { margin-top: 27px; display: flex; flex-wrap: wrap; gap: 9px 22px; color: var(--muted); font-size: 13px; font-weight: 600; }
.trust-row span { display: inline-flex; align-items: center; gap: 9px; }
.trust-row span::before { content: ''; width: 7px; height: 7px; border: 1.5px solid var(--mint); border-radius: 50%; }

.hero-visual { position: relative; height: 650px; }
.hero-ring {
  position: absolute;
  top: 5%;
  right: 0;
  width: 88%;
  aspect-ratio: 1;
  border: clamp(34px, 4vw, 62px) solid rgba(97, 210, 177, .13);
  border-radius: 50%;
}
.hero-ring::after { content: ''; position: absolute; inset: -70px; border: 1px dashed rgba(36, 125, 102, .18); border-radius: 50%; }
.hero-device { position: absolute; bottom: 8px; }
.device-main { z-index: 3; left: 50%; width: 292px; transform: translateX(-50%); }
.device-left { z-index: 2; left: 3%; width: 235px; transform: rotate(-7deg) translateY(12px); }
.device-right { z-index: 1; right: 0; width: 235px; transform: rotate(6deg) translateY(14px); }

.orbit { position: absolute; pointer-events: none; border: 1px solid rgba(36, 125, 102, .14); border-radius: 50%; }
.orbit-hero { top: 12%; right: -11%; width: 48vw; height: 48vw; }
.orbit i { position: absolute; width: 13px; height: 13px; border-radius: 50%; background: var(--mint-bright); box-shadow: 0 0 0 7px rgba(97, 210, 177, .09); }
.orbit i:nth-child(1) { top: 7%; left: 24%; }
.orbit i:nth-child(2) { top: 38%; right: -6px; background: var(--apricot); }
.orbit i:nth-child(3) { bottom: 11%; left: 14%; background: var(--lavender); }
.orbit i:nth-child(4) { top: 59%; left: -6px; background: var(--ocean); }

.feature-ribbon {
  position: relative;
  z-index: 5;
  max-width: var(--max);
  margin: 30px auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid rgba(255, 255, 255, .82);
  border-radius: 25px;
  background: rgba(255, 254, 250, .84);
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
}
.feature-ribbon article { min-height: 112px; display: flex; align-items: center; gap: 15px; padding: 20px; }
.feature-ribbon article + article { border-left: 1px solid var(--line); }
.feature-ribbon h2 { font-size: 15px; letter-spacing: -.01em; }
.feature-ribbon p { margin-top: 3px; color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.ribbon-icon { flex: 0 0 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; font-size: 13px; font-weight: 800; }
.ribbon-icon.mint { color: var(--mint); background: var(--mint-soft); }
.ribbon-icon.lavender { color: var(--lavender); background: var(--lavender-soft); }
.ribbon-icon.ocean { color: var(--ocean); background: var(--ocean-soft); font-size: 10px; }
.ribbon-icon.apricot { color: var(--apricot); background: var(--apricot-soft); font-size: 19px; }

/* Scrolling product story */
.showcase { height: 540vh; background: var(--paper); }
.showcase-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: linear-gradient(145deg, #f4f8f5, #f8f7f2);
  transition: background .9s var(--ease), color .9s var(--ease);
}
.showcase-stage[data-i="1"] { background: linear-gradient(145deg, #faf0e9, #f8f7f2); }
.showcase-stage[data-i="2"] { background: linear-gradient(145deg, #edf8f5, #e8f2f5); }
.showcase-stage[data-i="3"] { background: linear-gradient(145deg, #f1eefb, #f8f7f2); }
.showcase-stage[data-i="4"] { color: #f5fbf8; background: radial-gradient(circle at 76% 40%, #193c34, var(--night) 54%); }
.showcase-inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 88px 42px 38px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: clamp(50px, 8vw, 110px);
  align-items: center;
}
.showcase-copy > .section-title { max-width: 650px; margin-top: 14px; font-size: clamp(38px, 4.4vw, 66px); }
.story-captions { position: relative; min-height: 258px; margin-top: 38px; }
.story-caption { position: absolute; inset: 0; max-width: 570px; opacity: 0; transform: translateY(18px); pointer-events: none; transition: opacity .55s var(--ease), transform .55s var(--ease); }
.story-caption.active { opacity: 1; transform: none; }
.story-number { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin-bottom: 18px; border-radius: 50%; color: var(--mint); background: rgba(97, 210, 177, .18); font-size: 12px; font-weight: 800; }
.story-caption h3 { font-family: var(--display); font-size: clamp(34px, 3.5vw, 52px); font-weight: 500; line-height: 1; letter-spacing: -.04em; }
.story-caption p { max-width: 530px; margin-top: 16px; color: var(--muted); font-size: clamp(16px, 1.45vw, 19px); }
.showcase-stage[data-i="4"] .story-caption p, .showcase-stage[data-i="4"] .eyebrow { color: rgba(239, 250, 245, .72); }
.showcase-stage[data-i="4"] .story-number { color: var(--mint-bright); background: rgba(97, 210, 177, .13); }
.showcase-phone { display: flex; justify-content: center; }
.device-showcase { width: min(310px, 33vw); height: min(72svh, 674px); aspect-ratio: auto; }
.story-shot { position: absolute; inset: 0; opacity: 0; transform: scale(1.012); transition: opacity .6s var(--ease), transform .7s var(--ease); }
.story-shot.active { opacity: 1; transform: none; }
.showcase-progress { position: absolute; right: 0; bottom: 0; left: 0; height: 3px; background: rgba(12, 21, 19, .08); }
.showcase-progress span { display: block; width: 0; height: 100%; background: var(--mint-bright); }

/* Reminder and development cards */
.story-pair {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(90px, 10vw, 150px) clamp(20px, 4vw, 58px);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
.story-card { min-height: 900px; position: relative; overflow: hidden; padding: clamp(32px, 4vw, 58px); display: flex; flex-direction: column; border: 1px solid rgba(255, 255, 255, .75); border-radius: 35px; }
.story-card-mint { background: linear-gradient(150deg, #e9f7f2, #f9fbf9 72%); }
.story-card-lavender { background: linear-gradient(150deg, #f0edfa, #fbfaf8 72%); }
.story-card::before { content: ''; position: absolute; top: -30%; right: -20%; width: 76%; aspect-ratio: 1; border: 1px solid currentColor; border-radius: 50%; opacity: .08; }
.story-card-copy { position: relative; z-index: 2; max-width: 500px; }
.story-card h2 { margin-top: 15px; font-family: var(--display); font-size: clamp(40px, 4.1vw, 62px); font-weight: 500; line-height: .98; letter-spacing: -.045em; }
.story-card-copy > p { margin-top: 19px; color: var(--muted); font-size: 17px; }
.plain-list { margin-top: 23px; display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.plain-list li { padding: 8px 12px; border: 1px solid rgba(36, 125, 102, .16); border-radius: 999px; color: var(--mint); background: rgba(255, 255, 255, .66); font-size: 12px; font-weight: 700; }
.story-card-copy .medical-note { max-width: 390px; font-size: 12px; }
.cropped-device { position: relative; z-index: 1; flex: 0 0 auto; align-self: center; width: min(330px, 72%); margin: clamp(42px, 5vw, 68px) auto -250px; filter: drop-shadow(0 35px 42px rgba(12, 21, 19, .18)); }
.cropped-device img { width: 100%; height: auto; border: 8px solid #111; border-radius: 42px; }
.cropped-growth { margin-bottom: -205px; }

/* Themes */
.themes {
  min-height: 940px;
  overflow: hidden;
  padding: clamp(90px, 11vw, 155px) clamp(20px, 5vw, 72px);
  display: grid;
  grid-template-columns: minmax(360px, .8fr) minmax(540px, 1.2fr);
  align-items: center;
  gap: clamp(45px, 7vw, 110px);
  background:
    radial-gradient(circle at 82% 35%, rgba(41, 152, 183, .13), transparent 28%),
    linear-gradient(150deg, #e8f1ed, #f8f7f2 60%);
}
.themes::after { content: ''; position: absolute; right: -13vw; top: 3%; width: 60vw; aspect-ratio: 1; border: 1px dashed rgba(36, 125, 102, .2); border-radius: 50%; }
.themes-copy { position: relative; z-index: 3; max-width: 580px; justify-self: end; }
.themes-copy .section-title { margin-top: 16px; }
.themes-copy > p:not(.eyebrow) { max-width: 550px; margin-top: 23px; color: var(--muted); font-size: 18px; }
.swatches { margin-top: 32px; display: grid; grid-template-columns: repeat(2, max-content); gap: 13px 28px; }
.swatches span { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 700; }
.swatches i { width: 25px; height: 25px; border: 4px solid rgba(255, 255, 255, .8); border-radius: 50%; box-shadow: 0 0 0 1px var(--line); }
.swatch-mint { background: var(--mint); }
.swatch-lavender { background: var(--lavender); }
.swatch-ocean { background: var(--ocean); }
.swatch-apricot { background: var(--apricot); }
.theme-points { margin-top: 35px; display: grid; gap: 13px; }
.theme-points div { padding: 16px 18px; border: 1px solid rgba(255, 255, 255, .8); border-radius: 16px; background: rgba(255, 255, 255, .56); }
.theme-points strong, .theme-points span { display: block; }
.theme-points strong { font-size: 14px; }
.theme-points span { margin-top: 2px; color: var(--muted); font-size: 12.5px; }
.themes-visual { position: relative; z-index: 2; height: 690px; }
.theme-device { position: absolute; bottom: 0; }
.theme-device-back { z-index: 1; left: 7%; width: 280px; transform: rotate(-7deg) translateY(20px); }
.theme-device-front { z-index: 2; left: 42%; width: 315px; transform: rotate(3deg); }

/* Feeding detail */
.detail-band {
  min-height: 820px;
  overflow: hidden;
  padding: clamp(90px, 10vw, 145px) max(24px, calc((100vw - 1180px) / 2));
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  align-items: center;
  gap: clamp(45px, 8vw, 130px);
  background: linear-gradient(150deg, var(--apricot-soft), #faf7f1 65%);
}
.detail-band::before { content: ''; position: absolute; left: -12%; bottom: -40%; width: 55vw; aspect-ratio: 1; border: 1px solid rgba(223, 125, 70, .19); border-radius: 50%; }
.detail-phone { align-self: end; justify-self: center; height: 680px; overflow: hidden; }
.device-detail { width: 310px; }
.detail-copy { position: relative; z-index: 2; max-width: 620px; }
.detail-copy .section-title { margin-top: 16px; }
.detail-copy > p:not(.eyebrow) { margin-top: 24px; max-width: 560px; color: var(--muted); font-size: 19px; }
.amounts { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.amounts span { min-width: 48px; padding: 9px 10px; border-radius: 12px; text-align: center; color: #984a23; background: rgba(255, 255, 255, .72); font-size: 13px; font-weight: 760; box-shadow: inset 0 0 0 1px rgba(223, 125, 70, .12); }
.amounts b { color: var(--muted); font-size: 13px; }

/* Report */
.report-panel {
  min-height: 860px;
  overflow: hidden;
  padding: clamp(100px, 11vw, 160px) max(24px, calc((100vw - 1280px) / 2));
  display: grid;
  grid-template-columns: 1fr 360px .72fr;
  gap: clamp(40px, 6vw, 85px);
  align-items: center;
  color: #eff9f5;
  background: radial-gradient(circle at 57% 52%, #17372f, var(--night) 50%);
}
.report-orbit { position: absolute; left: 18%; top: 12%; width: 44vw; aspect-ratio: 1; border: 1px solid rgba(97, 210, 177, .1); border-radius: 50%; }
.report-orbit::before, .report-orbit::after { content: ''; position: absolute; border: 1px solid rgba(97, 210, 177, .08); border-radius: 50%; }
.report-orbit::before { inset: 18%; }
.report-orbit::after { inset: 40%; background: rgba(97, 210, 177, .04); }
.report-copy, .report-device, .report-trust { position: relative; z-index: 2; }
.report-copy h2 { margin-top: 16px; font-family: var(--display); font-size: clamp(48px, 5.4vw, 78px); font-weight: 500; line-height: .95; letter-spacing: -.045em; }
.report-copy > p { max-width: 530px; margin-top: 22px; color: rgba(239, 249, 245, .7); font-size: 18px; }
.report-flow { margin-top: 35px; display: flex; align-items: center; gap: 13px; }
.report-flow span { display: grid; gap: 4px; color: rgba(239, 249, 245, .72); font-size: 11px; }
.report-flow b { color: var(--mint-bright); font-size: 13px; }
.report-flow i { color: var(--mint-bright); font-style: normal; opacity: .6; }
.device-report { width: 330px; }
.report-trust { align-self: end; padding-bottom: 35px; }
.shield { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border: 1px solid rgba(97, 210, 177, .3); border-radius: 14px; color: var(--mint-bright); font-size: 25px; }
.report-trust h3 { margin-top: 20px; font-family: var(--display); font-size: 30px; font-weight: 500; line-height: 1.05; }
.report-trust p { margin-top: 13px; color: rgba(239, 249, 245, .63); font-size: 13px; line-height: 1.65; }

/* Premium */
.premium {
  padding: clamp(95px, 11vw, 155px) clamp(20px, 5vw, 72px);
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(50px, 8vw, 120px);
  align-items: center;
  background: var(--paper-bright);
}
.premium-copy { max-width: 580px; justify-self: end; }
.premium-copy .section-title { margin-top: 15px; }
.premium-copy > p:not(.eyebrow) { margin-top: 22px; color: var(--muted); font-size: 18px; }
.premium-copy .premium-note { font-size: 12.5px; }
.premium-grid { max-width: 680px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.premium-grid article { min-height: 205px; padding: 28px; border: 1px solid var(--line); border-radius: 25px; background: var(--paper); transition: transform .3s var(--ease), box-shadow .3s; }
.premium-grid article:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.premium-grid article > span { width: 47px; height: 47px; display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; color: var(--mint); background: var(--mint-soft); font-size: 12px; font-weight: 800; }
.premium-grid article:nth-child(2) > span { color: var(--ocean); background: var(--ocean-soft); font-size: 20px; }
.premium-grid article:nth-child(3) > span { color: var(--lavender); background: var(--lavender-soft); font-size: 20px; }
.premium-grid article:nth-child(4) > span { color: var(--apricot); background: var(--apricot-soft); font-size: 20px; }
.premium-grid h3 { margin-top: 19px; font-size: 17px; }
.premium-grid p { margin-top: 5px; color: var(--muted); font-size: 13px; }

/* CTA and footer */
.final-cta {
  min-height: 650px;
  overflow: hidden;
  padding: 90px 24px;
  display: grid;
  grid-template-columns: minmax(160px, 240px) minmax(0, 700px);
  align-items: center;
  justify-content: center;
  gap: clamp(48px, 7vw, 110px);
  text-align: left;
  background: linear-gradient(150deg, #e7f4ef, var(--paper));
}
.cta-icon { position: relative; z-index: 2; width: 100%; max-width: 240px; height: auto; aspect-ratio: 1; object-fit: contain; justify-self: center; border-radius: 28%; box-shadow: 0 40px 80px -48px rgba(12, 21, 19, .65); transform: rotate(-5deg); }
.final-copy { position: relative; z-index: 2; max-width: 760px; }
.final-copy h2 { margin-top: 16px; font-family: var(--display); font-size: clamp(46px, 6vw, 82px); font-weight: 500; line-height: .95; letter-spacing: -.045em; }
.final-copy p:not(.eyebrow) { max-width: 560px; margin: 24px 0 0; color: var(--muted); font-size: 17px; }
.final-copy .btn { margin-top: 28px; }
.orbit-cta { right: -7%; bottom: -55%; width: 45vw; height: 45vw; }
.footer { padding: 42px max(22px, calc((100vw - 1380px) / 2)); display: grid; grid-template-columns: 1fr auto; gap: 22px; align-items: center; color: rgba(239, 249, 245, .68); background: var(--night); }
.foot-brand { display: inline-flex; width: max-content; align-items: center; gap: 10px; color: #fff; font-weight: 780; letter-spacing: -.02em; }
.foot-brand img { border-radius: 9px; }
.foot-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 22px; font-size: 13px; }
.foot-links a:hover { color: #fff; }
.foot-copy { grid-column: 1 / -1; padding-top: 18px; border-top: 1px solid var(--line-light); font-size: 11.5px; opacity: .62; }

/* Legal and support pages */
.legal-page { background: linear-gradient(150deg, #eef6f2, var(--paper) 420px); }
.legal-main { width: min(calc(100% - 40px), 900px); margin: 0 auto; padding: 150px 0 100px; }
.legal-hero { margin-bottom: 54px; }
.legal-icon { width: 74px; height: 74px; margin-bottom: 24px; border-radius: 22px; box-shadow: var(--shadow); }
.legal-hero h1 { font-family: var(--display); font-size: clamp(45px, 7vw, 76px); font-weight: 500; line-height: 1; letter-spacing: -.045em; }
.legal-hero .legal-lead { max-width: 690px; margin-top: 18px; color: var(--muted); font-size: 18px; }
.legal-updated { margin-top: 13px; color: var(--muted); font-size: 12px; }
.legal-content { padding: clamp(28px, 5vw, 58px); border: 1px solid rgba(255, 255, 255, .8); border-radius: 30px; background: rgba(255, 254, 250, .88); box-shadow: var(--shadow); }
.legal-content h2 { margin: 2.1em 0 .55em; color: var(--mint); font-size: 20px; }
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 { margin: 1.75em 0 .45em; font-size: 17px; }
.legal-content p, .legal-content li { color: var(--ink-2); font-size: 15px; }
.legal-content p + p { margin-top: 1em; }
.legal-content ul { margin: .8em 0 0 1.15em; display: grid; gap: .55em; }
.legal-content a { color: var(--mint); text-decoration: underline; text-underline-offset: 3px; }
.legal-back { display: inline-flex; margin-top: 28px; color: var(--mint); font-size: 14px; font-weight: 700; }

/* Responsive */
@media (max-width: 1100px) {
  .nav { grid-template-columns: 1fr auto; }
  .nav-links { display: none; }
  .hero-grid { grid-template-columns: 1fr; min-height: 0; }
  .hero-copy { max-width: 760px; padding: 70px 4vw 0; text-align: center; justify-self: center; }
  .hero-sub { margin-right: auto; margin-left: auto; }
  .hero-actions, .trust-row { justify-content: center; }
  .hero-visual { width: min(800px, 100%); height: 680px; margin: 0 auto; }
  .device-left { left: 8%; }
  .device-right { right: 8%; }
  .feature-ribbon { grid-template-columns: repeat(2, 1fr); }
  .feature-ribbon article:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
  .feature-ribbon article:nth-child(4) { border-top: 1px solid var(--line); }
  .themes { grid-template-columns: 1fr; min-height: auto; }
  .themes-copy { justify-self: start; max-width: 760px; }
  .themes-visual { width: min(760px, 100%); justify-self: center; }
  .report-panel { grid-template-columns: 1fr 330px; }
  .report-trust { grid-column: 1 / -1; max-width: 650px; padding: 0; }
  .premium { grid-template-columns: 1fr; }
  .premium-copy { justify-self: start; max-width: 760px; }
  .premium-grid { max-width: none; }
}

@media (max-width: 820px) {
  .nav { top: 10px; width: calc(100% - 20px); height: 60px; gap: 14px; border-radius: 19px; }
  .nav-brand { font-size: 18px; }
  .nav-logo { width: 36px; height: 36px; }
  .nav-cta { min-height: 40px; padding: 0 14px; font-size: 12px; }
  .hero { padding: 100px 16px 28px; }
  .hero-copy { padding-top: 42px; }
  .hero-title { font-size: clamp(44px, 12.8vw, 58px); line-height: .98; letter-spacing: -.048em; }
  .hero-sub { font-size: 17px; }
  .hero-visual { height: 570px; }
  .device-main { width: 250px; }
  .device-left, .device-right { width: 195px; }
  .device-left { left: 1%; }
  .device-right { right: 1%; }
  .feature-ribbon article { min-height: 102px; }
  .showcase { height: auto; padding: 92px 16px 48px; }
  .showcase-stage {
    position: relative;
    top: auto;
    height: auto;
    min-height: 0;
    overflow: visible;
    align-items: stretch;
    color: var(--ink) !important;
    background: transparent !important;
    transition: none;
  }
  .showcase-inner { display: block; max-width: 720px; padding: 0; text-align: center; }
  .showcase-copy > .section-title { margin-right: auto; margin-left: auto; font-size: clamp(31px, 7vw, 48px); }
  .story-captions { display: grid; min-height: 0; margin-top: 34px; gap: 22px; }
  .story-caption {
    position: relative;
    inset: auto;
    max-width: none;
    overflow: hidden;
    padding: 30px 22px 0;
    border: 1px solid rgba(255, 255, 255, .82);
    border-radius: 28px;
    opacity: 1;
    background: rgba(255, 254, 250, .9);
    box-shadow: var(--shadow);
    transform: none;
    pointer-events: auto;
  }
  .story-number { margin-bottom: 9px; }
  .story-caption h3 { font-size: clamp(30px, 7vw, 42px); }
  .story-caption p { margin: 10px auto 0; font-size: 15px; }
  .story-caption::after {
    content: '';
    display: block;
    width: min(225px, 70vw);
    aspect-ratio: 1206 / 2622;
    margin: 26px auto -55px;
    border: 6px solid #080b0a;
    border-radius: 32px 32px 0 0;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: 0 30px 60px -34px rgba(12, 21, 19, .68);
  }
  .story-caption[data-i="0"]::after { background-image: url("assets/01_today.webp"); }
  .story-caption[data-i="1"]::after { background-image: url("assets/05_quicklog.webp"); }
  .story-caption[data-i="2"]::after { background-image: url("assets/02_reminders.webp"); }
  .story-caption[data-i="3"]::after { background-image: url("assets/03_development.webp"); }
  .story-caption[data-i="4"] { color: #eff9f5; background: var(--night); }
  .story-caption[data-i="4"] p { color: rgba(239, 249, 245, .72); }
  .story-caption[data-i="4"]::after { background-image: url("assets/07_report.webp"); }
  .showcase-phone, .showcase-progress { display: none; }
  .story-pair { grid-template-columns: 1fr; }
  .story-card { min-height: 730px; }
  .cropped-device { width: min(330px, 63%); }
  .detail-band { grid-template-columns: 1fr; min-height: auto; text-align: center; }
  .detail-phone { order: 2; height: 600px; }
  .detail-copy { justify-self: center; }
  .amounts { justify-content: center; }
  .report-panel { grid-template-columns: 1fr; text-align: center; }
  .report-copy > p { margin-right: auto; margin-left: auto; }
  .report-flow { justify-content: center; }
  .report-device { justify-self: center; max-height: 650px; overflow: hidden; }
  .report-trust { justify-self: center; text-align: left; }
  .premium-grid { grid-template-columns: 1fr; }
  .premium-grid article { min-height: 170px; }
  .final-cta { min-height: auto; grid-template-columns: 1fr; gap: 38px; padding: 96px 24px; text-align: center; }
  .cta-icon { width: 150px; }
  .final-copy { justify-self: center; }
  .final-copy p:not(.eyebrow) { margin-right: auto; margin-left: auto; }
  .footer { grid-template-columns: 1fr; text-align: center; }
  .foot-brand { justify-self: center; }
  .foot-links { justify-content: center; }
  .legal-content { overflow-wrap: anywhere; }
}

@media (max-width: 560px) {
  .nav-cta { padding: 0 12px; }
  .hero-copy { padding-right: 2px; padding-left: 2px; }
  .hero-title { font-size: clamp(43px, 12.8vw, 54px); }
  .hero-actions .btn { width: 100%; }
  .trust-row { display: grid; justify-content: start; width: max-content; max-width: 100%; margin-right: auto; margin-left: auto; text-align: left; }
  .hero-visual { height: 485px; margin-top: 20px; }
  .device-main { width: 217px; }
  .device-left, .device-right { width: 159px; }
  .device-left { left: -8%; }
  .device-right { right: -8%; }
  .device { padding: 6px; border-radius: 32px; }
  .device-screen { border-radius: 27px; }
  .feature-ribbon { grid-template-columns: 1fr; }
  .feature-ribbon article + article { border-top: 1px solid var(--line); border-left: 0; }
  .story-pair { padding-top: 70px; padding-right: 14px; padding-left: 14px; }
  .story-caption { padding-right: 18px; padding-left: 18px; }
  .story-caption::after { width: min(215px, 70vw); }
  .story-card { min-height: 0; padding: 30px 25px; border-radius: 28px; }
  .story-card h2 { font-size: 42px; }
  .cropped-device { width: 245px; margin-top: 44px; margin-bottom: -135px; transform: none; }
  .cropped-growth { margin-bottom: -110px; }
  .themes { padding-right: 20px; padding-left: 20px; }
  .themes-visual { height: 520px; }
  .theme-device-back { left: -3%; width: 215px; }
  .theme-device-front { left: 38%; width: 235px; }
  .swatches { grid-template-columns: repeat(2, 1fr); }
  .detail-band { padding-right: 20px; padding-left: 20px; }
  .detail-phone { height: 540px; }
  .device-detail { width: 270px; }
  .report-panel { padding-right: 22px; padding-left: 22px; }
  .report-flow { display: grid; grid-template-columns: 1fr; }
  .report-flow i { transform: rotate(90deg); }
  .device-report { width: min(300px, 88vw); }
  .premium { padding-right: 20px; padding-left: 20px; }
  .final-cta { min-height: auto; }
  .cta-icon { width: 130px; transform: rotate(-5deg); }
  .final-copy h2 { font-size: clamp(40px, 13vw, 50px); }
  .foot-links { gap: 14px; }
}

@media (max-width: 360px) {
  .nav { gap: 8px; padding-right: 10px; padding-left: 10px; }
  .nav-brand { gap: 8px; font-size: 16px; }
  .nav-logo { width: 34px; height: 34px; }
  .nav-cta { min-height: 38px; padding: 0 9px; white-space: nowrap; font-size: 11px; line-height: 1; }
  .nav.scrolled { height: 60px; }
  .showcase { padding-right: 12px; padding-left: 12px; }
  .story-caption h3 { font-size: 29px; }
  .story-card h2 { font-size: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
  .showcase { height: auto; }
  .showcase-stage { position: relative; height: auto; min-height: 900px; }
  .story-captions { display: grid; gap: 28px; }
  .story-caption { position: relative; opacity: 1; transform: none; }
  .showcase-phone { display: none; }
  .showcase-inner { grid-template-columns: 1fr; }
}