@font-face {
  font-family:Manrope;
  src:url('/assets/fonts/Manrope-Variable.ttf') format('truetype');
  font-style:normal;
  font-weight:200 800;
  font-display:swap
}
:root {
  --ink:#0e0f1a;
  --ink-soft:#404251;
  --muted:#606272;
  --canvas:#f7f6fb;
  --canvas-raised:#eeebfa;
  --surface:#fff;
  --surface-2:#e2f3ff;
  --accent:#754fff;
  --accent-soft:#eae3ff;
  --line:#dcdbe4;
  --line-strong:#bab8c8;
  --blue:#2ba6ff;
  --mint:#42d6a8;
  --coral:#ff637a;
  --shadow:0 20px 45px #17102e12;
  --nav-height:88px;
  --max:1320px;
  --ease:cubic-bezier(.22,.7,.25,1)
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:110px
}
body {
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  font:500 16px/1.65 Manrope,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased
}
button,input,select {
  font:inherit
}
button,a {
  -webkit-tap-highlight-color:transparent
}
button {
  cursor:pointer
}
a {
  color:inherit;
  text-decoration:none
}
img {
  display:block;
  max-width:100%;
  height:auto
}
svg {
  display:block;
  max-width:100%
}
button {
  color:inherit
}
h1,h2,h3,h4,p {
  margin:0
}
h1,h2,h3,h4 {
  font-weight:800;
  letter-spacing:-.06em;
  line-height:1.04
}
h2 {
  font-size:clamp(42px,5.1vw,76px)
}
p+p {
  margin-top:16px
}
ul {
  padding-left:20px
}
li+li {
  margin-top:9px
}
a:focus-visible,button:focus-visible,input:focus-visible {
  outline:3px solid var(--accent);
  outline-offset:5px
}
[hidden] {
  display:none!important
}
::selection {
  background:#d5c7ff;
  color:var(--ink)
}
.container {
  width:min(calc(100% - 96px),var(--max));
  margin-inline:auto
}
.narrow {
  width:min(calc(100% - 96px),900px);
  margin-inline:auto
}
.section {
  padding-block:116px
}
.section[id] {
  scroll-margin-top:-100px;
}
.skip-link {
  position:fixed;
  top:12px;
  left:20px;
  z-index:200;
  transform:translateY(-170%);
  background:var(--ink);
  color:#fff;
  border-radius:10px;
  padding:12px 22px
}
.skip-link:focus {
  transform:none
}
.eyebrow,.section-index {
  font-size:11px;
  font-weight:800;
  letter-spacing:.13em;
  line-height:1.5
}
.section-index {
  color:var(--accent);
  margin-bottom:24px
}
.eyebrow {
  display:flex;
  gap:10px;
  align-items:center
}
.tiny-spark {
  font-size:22px;
  color:var(--accent)
}
.lede {
  font-size:20px;
  color:var(--ink-soft);
  margin-top:24px
}
.gradient-text {
  color:var(--accent)
}
.text-link {
  display:inline-flex;
  gap:35px;
  border-bottom:1px solid currentColor;
  padding-bottom:6px;
  font-weight:750
}
.text-link:hover {
  color:var(--accent)
}
.site-header {
  position:fixed;
  inset:0 0 auto;
  z-index:100;
  border-bottom:1px solid transparent;
  background:var(--canvas);
  transition:border-color .2s,box-shadow .2s
}
.site-header.scrolled {
  border-color:var(--line);
  box-shadow:0 4px 18px #10102106
}
.nav-inner {
  height:var(--nav-height);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px
}
.brand {
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:25px;
  font-weight:800;
  letter-spacing:-.06em
}
.brand img {
  width:38px;
  flex-shrink:0
}
.brand-period {
  color:var(--accent)
}
.nav-links {
  display:flex;
  align-items:center;
  gap:30px;
  font-size:12px;
  font-weight:750
}
.nav-links>a:not(.button):hover {
  color:var(--accent)
}
.nav-links a[aria-current=page] {
  color:var(--accent)
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:26px;
  min-height:58px;
  border:1px solid transparent;
  border-radius:100px;
  padding:16px 26px;
  font-size:13px;
  font-weight:800;
  line-height:1.3;
  transition:transform .2s,background .2s
}
.button:hover {
  transform:translateY(-3px)
}
.button.primary {
  background:var(--accent);
  color:white
}
.button.primary:hover {
  background:#603adf
}
.button.ink {
  background:var(--ink);
  color:white
}
.button.light {
  background:#fff;
  color:var(--ink)
}
.button.secondary {
  border-color:var(--line-strong);
  background:transparent;
  color:var(--ink)
}
.button.compact {
  min-height:44px;
  padding:12px 20px;
  font-size:11px
}
.button.disabled {
  cursor:default;
  opacity:.85
}
.button.disabled:hover {
  transform:none
}
.button:disabled {
  cursor:wait
}
.nav-toggle {
  display:none;
  width:44px;
  height:44px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:50%;
  background:transparent
}
.nav-toggle span,.nav-toggle span:before {
  display:block;
  width:18px;
  height:2px;
  background:var(--ink);
  content:''
}
.nav-toggle span:before {
  transform:translateY(6px)
}
.hero {
  padding-top:calc(var(--nav-height) + 38px);
  overflow:hidden
}
.hero-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:20px;
  min-height:580px
}
.hero-copy {
  position:relative;
  z-index:2;
  padding-block:12px 40px
}
.hero h1 {
  font-size:clamp(66px,7.4vw,112px);
  line-height:1.015;
  letter-spacing:-.075em;
  margin:27px 0 30px
}
.touch-word {
  position:relative;
  color:var(--accent);
  white-space:nowrap
}
.touch-word svg {
  position:absolute;
  bottom:-10px;
  left:0;
  width:95%;
  height:24px;
  color:var(--mint);
  z-index:-1
}
.hero-description {
  max-width:430px;
  color:var(--ink-soft);
  font-size:15px;
  line-height:1.75
}
.hero-actions {
  display:flex;
  gap:24px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:31px
}
.hero-text-link {
  font-size:12px;
  font-weight:800;
  display:inline-flex;
  gap:16px
}
.hero-note {
  font-size:11px;
  color:var(--muted);
  margin-top:18px
}
.hero-note span {
  display:inline-grid;
  place-items:center;
  width:18px;
  height:18px;
  margin-right:4px;
  border-radius:50%;
  background:#d4f5e8;
  color:#145741;
  font-weight:800
}
.hero-stage {
  position:relative;
  height:565px;
  min-width:0
}
.hero-stage-floor {
  position:absolute;
  inset:10% -10% 0 0;
  background:#e5dfff;
  border-radius:50% 50% 46% 46%;
  transform:rotate(-14deg)
}
.hero-sticker {
  position:absolute;
  top:0;
  left:2%;
  z-index:5;
  display:flex;
  align-items:center;
  gap:10px;
  padding:13px 17px;
  background:var(--mint);
  color:var(--ink);
  font-size:9px;
  font-weight:800;
  letter-spacing:.07em;
  transform:rotate(-7deg);
  border-radius:4px
}
.hero-sticker span {
  font-size:26px;
  line-height:1
}
.hero-bottle {
  position:absolute;
  left:1%;
  top:11%;
  height:67%;
  aspect-ratio:774/2032;
  transform:rotate(-13deg);
  filter:drop-shadow(0 12px 10px #15112818)
}
.hero-bottle>img {
  height:100%;
  width:100%
}
.hero-app-frame {
  position:absolute;
  right:3%;
  top:4%;
  width:43%;
  border:7px solid var(--ink);
  border-radius:35px;
  overflow:hidden;
  transform:rotate(9deg);
  box-shadow:7px 16px 0 #c9bff2
}
.hero-app-frame>img {
  width:100%;
  height:auto
}
.hero-bear {
  position:absolute;
  bottom:-2%;
  left:10%;
  width:66%;
  max-width:none;
  filter:drop-shadow(0 14px 5px #21143a10)
}
.hero-tiny-star {
  position:absolute;
  top:17%;
  left:40%;
  font-size:47px;
  color:var(--coral);
  transform:rotate(14deg)
}
.hero-proof-label {
  position:absolute;
  right:4%;
  bottom:0;
  font-size:9px;
  font-weight:800;
  letter-spacing:.13em;
  transform:rotate(-4deg)
}
.hero-baseline {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  border-top:1px solid var(--line);
  padding:23px 0 27px;
  font-size:9px;
  font-weight:800;
  letter-spacing:.11em
}
.hero-baseline a {
  display:flex;
  gap:36px;
  font-size:11px;
  letter-spacing:0
}
.section-heading {
  display:grid;
  grid-template-columns:1.25fr .75fr;
  column-gap:100px;
  margin-bottom:58px;
  align-items:end
}
.section-heading>.section-index {
  grid-column:1/-1
}
.section-description {
  max-width:350px;
  font-size:16px;
  color:var(--ink-soft);
  padding-bottom:5px
}
.serious-underline {
  position:relative;
  z-index:0
}
.serious-underline:after {
  position:absolute;
  bottom:1px;
  left:0;
  width:100%;
  height:7px;
  background:var(--mint);
  content:'';
  z-index:-1;
  transform:rotate(-1deg)
}
.habit-section {
  background:#fff
}
.habit-shelf {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px;
  padding:10px 3px
}
.habit-card {
  position:relative;
  padding:22px 22px 18px;
  border-radius:6px;
  display:flex;
  flex-direction:column;
  min-width:0;
  transition:transform .3s var(--ease)
}
.habit-card:nth-child(1) {
  transform:rotate(-3deg)
}
.habit-card:nth-child(2) {
  transform:rotate(2deg)
}
.habit-card:nth-child(3) {
  transform:rotate(-2deg)
}
.habit-card:nth-child(4) {
  transform:rotate(3deg)
}
.habit-card:hover {
  transform:translateY(-12px) rotate(0)
}
.tone-sky {
  background:#ccecff
}
.tone-violet {
  background:#e3d9ff
}
.tone-coral {
  background:#ffd7dd
}
.tone-mint {
  background:#c7f1df
}
.habit-card-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:7px;
  font-weight:800;
  letter-spacing:.09em
}
.habit-card-top>span:last-child {
  font-size:20px
}
.habit-card h3 {
  font-size:clamp(22px,2.3vw,33px);
  line-height:1.1;
  letter-spacing:-.05em;
  max-width:9ch;
  margin-top:21px
}
.habit-card>img {
  width:100%;
  height:218px;
  object-fit:contain;
  margin:5px 0;
  transition:transform .3s
}
.habit-card:hover>img {
  transform:rotate(-4deg)
}
.habit-card-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid #0e0f1a25;
  padding-top:13px;
  font-size:12px;
  font-weight:800
}
.habit-card-bottom>span {
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border:1px solid #0e0f1a35;
  border-radius:50%
}
.shelf-note {
  margin-top:35px;
  text-align:center;
  font-size:12px;
  color:var(--muted)
}
.how-section {
  background:#e9f5ff;
  padding-bottom:0
}
.how-intro {
  display:grid;
  grid-template-columns:1.1fr .9fr;
  column-gap:100px;
  align-items:end
}
.how-intro .section-index {
  grid-column:1/-1
}
.how-intro>p:last-child {
  max-width:380px;
  color:var(--ink-soft);
  font-size:16px;
  padding-bottom:8px
}
.tap-story {
  height:290vh;
  position:relative;
  scroll-margin-top:-110px
}
.story-sticky {
  position:sticky;
  top:0;
  display:grid;
  grid-template-columns:.75fr 1.25fr;
  align-items:center;
  min-height:100svh;
  gap:65px;
  overflow:hidden;
  padding-block:105px 40px
}
.story-copy {
  position:relative;
  z-index:5
}
.story-number {
  display:block;
  font-size:10px;
  color:var(--accent);
  font-weight:800;
  letter-spacing:.14em;
  margin-bottom:23px
}
.story-step {
  display:none;
  max-width:400px;
  animation:stepIn .35s var(--ease) both
}
.story-step.active {
  display:block
}
.story-step h3 {
  font-size:clamp(30px,3.4vw,48px);
  line-height:1.1;
  margin-bottom:22px
}
.story-step p {
  font-size:13px;
  color:var(--ink-soft);
  line-height:1.75
}
.story-progress {
  display:flex;
  gap:7px;
  margin-top:28px
}
.story-progress>span {
  height:3px;
  width:24px;
  border-radius:10px;
  background:#b7c8d9;
  transition:width .25s,background .25s
}
.story-progress>span.active {
  width:39px;
  background:var(--accent)
}
.story-demo-controls {
  display:flex;
  gap:14px;
  align-items:center;
  margin-top:24px;
  flex-wrap:wrap
}
.story-demo-controls .button {
  min-height:44px;
  padding:12px 22px;
  font-size:11px
}
.story-demo-controls>span {
  font-size:10px;
  color:var(--muted);
  max-width:100px;
  line-height:1.5
}
@keyframes stepIn {
  from {
    opacity:0;
    transform:translateY(8px)
  }
  to {
    opacity:1;
    transform:none
  }
}
.feature-section {
  background:#fff
}
.feature-explorer {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:90px;
  align-items:center
}
.feature-tabs {
  border-top:1px solid var(--line)
}
.feature-tab {
  display:flex;
  align-items:center;
  gap:23px;
  width:100%;
  text-align:left;
  min-height:78px;
  padding:15px 4px;
  border:0;
  border-bottom:1px solid var(--line);
  background:transparent;
  transition:color .2s,padding .2s
}
.feature-tab>span:first-child {
  font-size:10px;
  font-weight:800;
  color:var(--muted)
}
.feature-tab>strong {
  font-size:24px;
  letter-spacing:-.04em
}
.feature-tab>.tab-arrow {
  margin-left:auto;
  font-size:24px
}
.feature-tab.active {
  color:var(--accent);
  padding-left:14px
}
.feature-tab.active>span:first-child {
  color:var(--accent)
}
.feature-tab:hover {
  background:#f7f4ff
}
.feature-description {
  margin-top:34px
}
.feature-description h3 {
  font-size:32px;
  max-width:390px;
  margin-bottom:18px
}
.screen-caption {
  font-size:14px;
  color:var(--ink-soft);
  line-height:1.8
}
.screen-caption strong {
  display:none
}
.feature-detail {
  font-size:10px;
  color:var(--muted);
  padding-top:16px;
  border-top:1px solid var(--line);
  margin-top:22px
}
.feature-display {
  position:relative;
  display:grid;
  place-items:center;
  min-height:740px;
  border-radius:5px;
  background:#dfedff;
  padding:50px 20px 35px;
  transition:background .4s
}
.feature-display-stamp {
  position:absolute;
  top:28px;
  left:22px;
  z-index:3;
  font-size:9px;
  font-weight:800;
  letter-spacing:.08em;
  line-height:1.45;
  transform:rotate(-8deg);
  background:var(--mint);
  padding:12px;
  border-radius:3px;
  max-width:145px
}
.feature-device {
  width:min(270px,75%);
  border:6px solid var(--ink);
  border-radius:34px;
  overflow:hidden;
  background:#fff;
  box-shadow:10px 14px 0 #0e0f1a13;
  transform:rotate(3deg)
}
.screen-card {
  animation:stepIn .35s ease
}
.screen-card img {
  width:100%
}
.feature-preview-label {
  margin-top:27px;
  font-size:8px;
  font-weight:800;
  letter-spacing:.11em;
  text-align:center
}
[data-active-feature=focus] .feature-display {
  background:#ffdce6
}
[data-active-feature=meditation] .feature-display {
  background:#ffe3e3
}
[data-active-feature=alarm] .feature-display {
  background:#ffe8ca
}
.trust-section {
  background:var(--ink);
  color:#fff
}
.trust-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px
}
.trust-copy .section-index {
  color:var(--mint)
}
.trust-copy h2 {
  font-size:clamp(42px,4.9vw,70px)
}
.trust-copy>p:not(.section-index) {
  max-width:370px;
  color:#bebdcb;
  font-size:15px;
  margin-top:27px
}
.trust-copy .button {
  margin-top:32px
}
.trust-facts article {
  display:flex;
  gap:28px;
  padding:30px 0;
  border-top:1px solid #ffffff30
}
.trust-facts article:last-child {
  border-bottom:1px solid #ffffff30
}
.trust-number {
  font-size:10px;
  color:var(--mint);
  font-weight:800;
  margin-top:4px
}
.trust-facts h3 {
  font-size:22px;
  letter-spacing:-.035em;
  margin-bottom:12px
}
.trust-facts p {
  color:#bebdcb;
  font-size:13px;
  line-height:1.85
}
.access-layout {
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:24px
}
.free-access,.plus-access {
  padding:38px;
  border-radius:6px
}
.free-access {
  background:#fff;
  border:1px solid var(--line)
}
.access-heading {
  display:flex;
  gap:24px;
  justify-content:space-between;
  align-items:center;
  margin-bottom:22px
}
.access-heading h3 {
  font-size:24px;
  max-width:230px
}
.pill {
  font-size:8px;
  letter-spacing:.09em;
  font-weight:800;
  white-space:nowrap;
  background:#d7f4e9;
  border-radius:50px;
  padding:7px 12px;
  color:#145741
}
.free-line {
  display:flex;
  align-items:center;
  gap:25px;
  padding:24px 0;
  border-bottom:1px solid var(--line)
}
.free-line>strong {
  font-size:53px;
  letter-spacing:-.06em;
  line-height:1;
  color:var(--accent);
  min-width:70px
}
.free-line h4 {
  font-size:17px;
  letter-spacing:-.03em;
  margin-bottom:8px
}
.free-line p {
  font-size:12px;
  color:var(--muted);
  line-height:1.7
}
.access-note {
  font-size:10px;
  color:var(--muted);
  margin-top:23px
}
.plus-access {
  background:#dfd5ff;
  position:relative;
  overflow:hidden
}
.plus-access .eyebrow {
  font-size:10px
}
.plus-access h3 {
  font-size:42px;
  margin:22px 0 25px;
  line-height:1.07;
  max-width:350px
}
.plus-access ul {
  font-size:13px;
  list-style:none;
  padding:0;
  margin-bottom:28px
}
.plus-access li {
  padding:8px 0 8px 24px;
  position:relative;
  margin:0
}
.plus-access li:before {
  content:'+';
  position:absolute;
  left:0;
  font-size:20px;
  line-height:1.1;
  color:#5731b8
}
.plus-access>p:not(.eyebrow) {
  font-size:10px;
  color:#4f446e;
  max-width:340px;
  line-height:1.8
}
.plus-mark {
  position:absolute;
  top:14px;
  right:32px;
  font-size:65px;
  font-weight:500;
  color:#754fff55;
  line-height:1
}
.plus-access .text-link {
  margin-top:24px;
  font-size:11px
}
.compatibility-note {
  margin-top:22px;
  font-size:10px;
  color:var(--muted);
  max-width:790px
}
.faq-section {
  background:#fff
}
.faq-layout {
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:100px
}
.faq-layout h2 {
  font-size:clamp(38px,4.3vw,62px)
}
.faq-layout .text-link {
  font-size:12px;
  margin-top:30px
}
.faq-item {
  border-top:1px solid var(--line)
}
.faq-item:last-child {
  border-bottom:1px solid var(--line)
}
.faq-question {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  width:100%;
  text-align:left;
  border:0;
  background:transparent;
  padding:25px 0;
  font-size:15px;
  font-weight:750;
  line-height:1.5
}
.faq-question:hover {
  color:var(--accent)
}
.plus {
  width:25px;
  height:25px;
  border:1px solid var(--line);
  border-radius:50%;
  position:relative;
  flex-shrink:0
}
.plus:before,.plus:after {
  content:'';
  position:absolute;
  top:11px;
  left:7px;
  width:9px;
  height:1px;
  background:currentColor
}
.plus:after {
  transform:rotate(90deg);
  transition:transform .2s
}
.faq-question[aria-expanded=true] .plus:after {
  transform:rotate(0)
}
.faq-answer {
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .25s
}
.faq-answer>div {
  overflow:hidden
}
.faq-question[aria-expanded=true]+.faq-answer {
  grid-template-rows:1fr
}
.faq-answer p {
  font-size:13px;
  color:var(--muted);
  line-height:1.8;
  padding-bottom:26px
}
.download-section {
  background:var(--accent);
  color:white;
  overflow:hidden
}
.download-layout {
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:0;
  align-items:center;
  min-height:665px;
  padding-block:85px
}
.download-layout h2 {
  font-size:clamp(50px,6.6vw,92px);
  margin-top:27px;
  line-height:1.03
}
.download-layout h2>span {
  color:#d8fcae
}
.download-layout>div>p:not(.eyebrow) {
  font-size:13px;
  max-width:340px;
  margin-top:25px;
  color:#eee8ff
}
.download-actions {
  display:flex;
  gap:24px;
  align-items:center;
  margin-top:32px;
  flex-wrap:wrap
}
.download-support {
  font-size:12px;
  font-weight:750
}
.download-art {
  position:relative;
  min-height:450px
}
.download-ring {
  position:absolute;
  width:98%;
  aspect-ratio:1;
  border:2px solid #bba4ff;
  border-radius:50%;
  top:3%;
  left:5%
}
.download-art img {
  position:absolute;
  width:122%;
  max-width:none;
  left:-9%;
  top:-10%;
  transform:rotate(-8deg)
}
.download-art-note {
  position:absolute;
  right:-5%;
  bottom:-10%;
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  line-height:1.4;
  transform:rotate(8deg);
  background:#d8fcae;
  color:var(--ink);
  padding:16px;
  border-radius:2px
}
.site-footer {
  background:var(--canvas);
  padding-top:60px;
  overflow:hidden
}
.footer-top {
  display:flex;
  align-items:start;
  justify-content:space-between;
  gap:35px
}
.footer-top>p {
  font-size:12px;
  color:var(--muted)
}
.footer-links {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:11px 38px;
  font-size:12px;
  font-weight:750
}
.footer-links a:hover,.footer-column a:hover {
  color:var(--accent)
}
.footer-wordmark {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  font-weight:800;
  font-size:clamp(100px,21.8vw,320px);
  line-height:1.3;
  letter-spacing:-.075em;
  margin:25px 0 0
}
.footer-wordmark>span {
  font-size:.65em;
  line-height:1;
  color:var(--accent);
  transform:rotate(10deg)
}
.footer-bottom {
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding-block:22px;
  border-top:1px solid var(--line);
  font-size:9px;
  color:var(--muted)
}
.footer-grid {
  display:grid;
  grid-template-columns:2fr repeat(3,1fr);
  gap:40px;
  padding-bottom:40px
}
.footer-brand>p {
  color:var(--muted);
  font-size:12px;
  max-width:260px;
  margin-top:20px
}
.footer-column h3 {
  font-size:12px;
  letter-spacing:0;
  margin-bottom:20px
}
.footer-column a {
  display:block;
  font-size:12px;
  margin-top:12px;
  color:var(--muted)
}
.js-enhanced [data-reveal] {
  opacity:0;
  transform:translateY(20px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)
}
.js-enhanced [data-reveal].revealed {
  opacity:1;
  transform:none
}
/* NFC product demonstration */
.story-visual {
  min-width: 0;
}
.story-scene {
  --scene-height: clamp(320px, 68svh, 700px);
  position: relative;
  height: var(--scene-height);
  min-height: var(--scene-height);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 48px;
  background: var(--surface-2);
  box-shadow: var(--shadow);
  isolation: isolate;
}
.story-desk {
  position: absolute;
  right: -5%;
  bottom: -12%;
  left: -5%;
  height: 44%;
  border-top: 1px solid rgba(76, 69, 48, 0.08);
  background: #cee3f5;
  transform: rotate(-2deg);
}
.story-bottle {
  position: absolute;
  bottom: 10%;
  left: 16%;
  height: 82%;
  aspect-ratio: 774 / 2032;
  transform: rotate(-6deg);
  transform-origin: 50% 100%;
  filter: drop-shadow(12px 18px 10px rgba(48, 60, 46, 0.13));
}
.story-bottle > img {
  width: 100%;
  height: 100%;
}
/* Alignment point for the NFC sticker printed in the bottle photograph. */
.nfc-disc {
  position: absolute;
  top: 35.4%;
  left: 50%;
  width: 25%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
}
.story-phone {
  position: absolute;
  top: 12%;
  right: 8%;
  z-index: 4;
  width: min(33%, calc(var(--scene-height) * 0.3));
  aspect-ratio: 9 / 19.4;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 36px;
  background: #0e0f1a;
  box-shadow: 0 20px 45px rgba(28, 34, 28, 0.2);
  transform: translate3d(30px, 0, 0) rotate(8deg);
  transform-origin: 50% 50%;
  container-type: inline-size;
  will-change: transform;
}
.story-phone-screen {
  position: absolute;
  inset: 6px;
  overflow: hidden;
  border-radius: 30px;
  background: #fcfbff;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.story-phone-screen::after {
  position: absolute;
  bottom: 1.8%;
  left: 36%;
  width: 28%;
  height: 2px;
  border-radius: 5px;
  background: #0e0f1a;
  content: "";
}
.story-statusbar {
  position: absolute;
  top: 4.4%;
  right: 8%;
  left: 8%;
  display: flex;
  justify-content: space-between;
  font-size: 4cqw;
  font-weight: 700;
  line-height: 1;
}
.story-app-brand {
  position: absolute;
  top: 13%;
  left: 8%;
  display: flex;
  align-items: center;
  gap: 3cqw;
  font-size: 6.5cqw;
  font-weight: 750;
  line-height: 1;
}
.story-app-brand img {
  width: 10cqw;
  height: 10cqw;
  border-radius: 0;
}
.story-hydration-title {
  position: absolute;
  top: 22%;
  right: 8%;
  left: 8%;
}
.story-hydration-title small {
  display: block;
  margin-bottom: 2cqw;
  color: var(--muted);
  font-size: 4.5cqw;
  font-weight: 800;
  letter-spacing: 0.13em;
  line-height: 1;
}
.story-hydration-title strong {
  display: block;
  font-size: 10cqw;
  letter-spacing: -0.055em;
  line-height: 1;
}
.story-water-dial {
  position: absolute;
  top: 34%;
  left: 9%;
  width: 82%;
  aspect-ratio: 1;
}
.story-water-dial > svg {
  width: 100%;
}
.story-water-ring {
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke-dashoffset 0.7s var(--ease);
}
.story-water-amount {
  position: absolute;
  inset: 16% 8%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 3cqw;
}
.story-water-amount .story-water-drop {
  width: 7cqw;
  height: 8cqw;
  color: #1778bd;
}
.story-water-amount strong {
  color: #164a81;
  font-size: 17cqw;
  font-weight: 760;
  letter-spacing: -0.055em;
  line-height: 1;
}
.story-water-amount span {
  color: var(--muted);
  font-size: 5cqw;
  line-height: 1;
}
.story-log-feedback {
  position: absolute;
  top: 74%;
  right: 8%;
  left: 8%;
  display: flex;
  min-height: 6.5%;
  align-items: center;
  justify-content: center;
  gap: 2cqw;
  border-radius: 2.5cqw;
  background: #eeecf6;
  color: var(--muted);
  font-size: 5cqw;
  font-weight: 650;
  line-height: 1.2;
  transition: color 0.3s ease, background 0.3s ease;
}
.story-log-check {
  display: none;
}
.story-scene.is-logged .story-log-feedback {
  background: #e3dafd;
  color: #754fff;
}
.story-scene.is-logged .story-log-check {
  display: inline;
}
.story-water-source {
  position: absolute;
  top: 81%;
  right: 8%;
  left: 8%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3cqw;
}
.story-water-source svg {
  width: 10cqw;
  color: #1778bd;
}
.story-water-source strong, .story-water-source small {
  display: block;
  font-size: 5cqw;
  line-height: 1.5;
}
.story-water-source small {
  color: var(--muted);
  font-size: 4cqw;
}
.story-water-action {
  position: absolute;
  right: 8%;
  bottom: 5%;
  left: 8%;
  display: flex;
  height: 6.5%;
  align-items: center;
  justify-content: center;
  gap: 2cqw;
  border-radius: 4cqw;
  background: #754fff;
  color: white;
  font-size: 6cqw;
  font-weight: 700;
}
.story-signal {
  position: absolute;
  z-index: 5;
  width: 130px;
  height: 130px;
  margin-top: -65px;
  margin-left: -65px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.story-demo-note {
  margin: 15px 4px 0;
  color: var(--muted);
  font-size: 0.7rem;
  text-align: center;
}
.story-live-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.story-scene {
  border:0;
  border-radius:6px;
  background:#dceeff;
  box-shadow:none
}
.story-signal span {
  position:absolute;
  inset:0;
  border:2px solid var(--accent);
  border-radius:50%;
  animation:scanRing 1.8s ease-out infinite
}
.story-signal span:nth-child(2) {
  animation-delay:.5s
}
.story-signal span:nth-child(3) {
  animation-delay:1s
}
.story-water-ring {
  stroke:var(--blue)
}
/* Interior pages */
.page-hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--nav-height) + 100px) 0 90px;
  border-bottom: 1px solid var(--line);
  background: var(--canvas-raised);
}
.page-hero h1 {
  max-width: 12ch;
  font-size: clamp(3.4rem, 7vw, 6.7rem);
}
.page-hero .lede {
  max-width: 700px;
}
.support-contact {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 16px 9px 10px;
  background: var(--surface);
  font-size: 0.86rem;
  font-weight: 750;
}
.support-contact .mail-dot {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
}
.support-shell {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  align-items: start;
  gap: 70px;
}
.support-sidebar, .legal-toc {
  position: sticky;
  top: 110px;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 18px;
  background: var(--surface);
}
.support-sidebar strong, .legal-toc strong {
  display: block;
  margin: 4px 8px 12px;
  color: var(--muted);
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.support-sidebar a, .legal-toc a {
  display: block;
  border-radius: 10px;
  padding: 9px 10px;
  color: var(--muted);
  font-size: 0.8rem;
  transition: background 0.2s ease, color 0.2s ease;
}
.support-sidebar a:hover, .legal-toc a:hover {
  background: var(--accent-soft);
  color: var(--ink);
}
.support-search-wrap {
  position: relative;
  margin-bottom: 38px;
}
.support-search {
  width: 100%;
  min-height: 58px;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  padding: 0 52px 0 20px;
  background: var(--surface);
  color: var(--ink);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.support-search:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(117, 79, 255, 0.12);
}
.support-search-wrap svg {
  position: absolute;
  top: 50%;
  right: 19px;
  width: 20px;
  color: var(--muted);
  transform: translateY(-50%);
}
.search-count {
  min-height: 20px;
  margin: 9px 3px 0;
  color: var(--muted);
  font-size: 0.72rem;
}
.support-group {
  margin-bottom: 58px;
}
.support-group h2 {
  margin-bottom: 25px;
  font-size: clamp(2rem, 4vw, 3.5rem);
}
.support-entry {
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 24px;
  background: var(--surface);
}
.support-entry h3 {
  margin-bottom: 12px;
  font-size: 1.12rem;
  letter-spacing: -0.025em;
}
.support-entry p, .support-entry li {
  color: var(--muted);
  font-size: 0.88rem;
}
.support-entry ol, .support-entry ul {
  display: grid;
  gap: 8px;
  margin: 14px 0 0;
  padding-left: 20px;
}
.support-entry.hidden {
  display: none;
}
.contact-card {
  border: 1px solid var(--line-strong);
  border-radius: 28px;
  padding: clamp(30px, 5vw, 54px);
  background: var(--surface-2);
}
.legal-shell {
  display: grid;
  grid-template-columns: 250px minmax(0, 760px);
  justify-content: center;
  align-items: start;
  gap: 70px;
}
.legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 25px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
}
.legal-article section {
  scroll-margin-top: 110px;
  margin-bottom: 56px;
}
.legal-article h2 {
  margin-bottom: 16px;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.08;
}
.legal-article h3 {
  margin-top: 28px;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}
.legal-article p, .legal-article li {
  color: var(--muted);
  font-size: 0.93rem;
  line-height: 1.78;
}
.legal-article ul, .legal-article ol {
  display: grid;
  gap: 8px;
  padding-left: 22px;
}
.legal-callout {
  margin: 0 0 48px;
  border-left: 3px solid var(--accent);
  border-radius: 0 16px 16px 0;
  padding: 19px 22px;
  background: var(--accent-soft);
  color: var(--ink);
  font-size: 0.9rem;
}
/* NFC fallback */
.scan-page {
  display: grid;
  min-height: 100svh;
  place-items: center;
  padding: 24px;
  background: var(--canvas);
}
.scan-card {
  width: min(100%, 520px);
  border: 1px solid var(--line-strong);
  border-radius: 36px;
  padding: clamp(34px, 8vw, 58px);
  background: var(--surface);
  box-shadow: var(--shadow);
  text-align: center;
}
.scan-mark-wrap {
  position: relative;
  width: 96px;
  height: 96px;
  margin: 0 auto 34px;
}
.scan-mark-wrap img {
  position: relative;
  z-index: 2;
  width: 100%;
  filter: none;
}
.scan-mark-wrap::before, .scan-mark-wrap::after {
  position: absolute;
  inset: -14px;
  border: 1px solid rgba(117, 79, 255, 0.22);
  border-radius: 50%;
  content: "";
  animation: scanRing 2.5s ease-out infinite;
}
.scan-mark-wrap::after {
  animation-delay: 1.1s;
}
@keyframes scanRing {
  from {
    transform: scale(.75);
    opacity: 0;
  }
  35% {
    opacity: .8;
  }
  to {
    transform: scale(1.45);
    opacity: 0;
  }
}
.scan-card h1 {
  max-width: none;
  font-size: clamp(2.2rem, 8vw, 3.4rem);
}
.scan-card p {
  color: var(--ink-soft);
}
.scan-privacy {
  margin: 24px 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 16px;
  background: var(--accent-soft);
  color: var(--muted) !important;
  font-size: 0.78rem;
}
.scan-actions {
  display: grid;
  gap: 10px;
}
.scan-links {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 28px;
  color: var(--muted);
  font-size: 0.72rem;
}
/* 404 */
.not-found {
  display: grid;
  min-height: 100svh;
  place-items: center;
  padding: 30px;
  text-align: center;
}
.not-found .rings {
  position: relative;
  width: 160px;
  height: 160px;
  margin: 0 auto 25px;
}
.not-found .rings span {
  position: absolute;
  inset: 50%;
  border: 1px solid rgba(117, 79, 255, 0.25);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.not-found .rings span:nth-child(1) {
  width: 40px;
  height: 40px;
}
.not-found .rings span:nth-child(2) {
  width: 92px;
  height: 92px;
}
.not-found .rings span:nth-child(3) {
  width: 150px;
  height: 150px;
}
.not-found h1 {
  max-width: none;
  font-size: clamp(3rem, 8vw, 6rem);
}
@media(min-width:1500px) {
  .hero-grid {
    min-height:680px
  }
  .hero-stage {
    height:640px
  }
  .hero-app-frame {
    width:42%;
    right:0
  }
  .hero-bear {
    left:15%;
    width:64%
  }
}
@media(max-width:1100px) {
  .container {
    width:calc(100% - 64px)
  }
  .nav-links {
    gap:22px
  }
  .hero-stage {
    height:495px
  }
  .hero-app-frame {
    top:8%;
    right:4%;
    width:43%;
    border-width:6px
  }
  .hero-bear {
    width:76%;
    left:0;
    bottom:-1%
  }
  .hero-grid {
    min-height:545px
  }
  .hero h1 {
    font-size:8vw
  }
  .hero-description {
    font-size:14px;
    max-width:360px
  }
  .hero-text-link {
    font-size:11px
  }
  .hero-actions {
    gap:17px
  }
  .hero-sticker {
    font-size:7px;
    gap:6px;
    padding:11px;
    top:1%
  }
  .hero-tiny-star {
    left:38%;
    top:18%
  }
  .hero-bottle {
    left:-4%;
    top:16%;
    height:60%
  }
  .habit-shelf {
    gap:14px
  }
  .habit-card {
    padding:18px 16px 16px
  }
  .habit-card>img {
    height:175px
  }
  .habit-card-top {
    font-size:6px
  }
  .habit-card h3 {
    font-size:25px
  }
  .section-heading,.how-intro {
    column-gap:55px
  }
  .feature-explorer {
    gap:55px
  }
  .feature-display {
    min-height:670px
  }
  .feature-description h3 {
    font-size:29px
  }
  .trust-layout,.faq-layout {
    gap:65px
  }
  .access-heading {
    align-items:start;
    flex-direction:column;
    gap:16px
  }
  .free-access,.plus-access {
    padding:30px
  }
  .plus-access h3 {
    font-size:37px
  }
  .download-layout {
    min-height:620px
  }
  .download-art {
    min-height:360px
  }
  .download-art-note {
    font-size:10px
  }
  .support-shell,.legal-shell {
    gap:40px;
    grid-template-columns:220px minmax(0,1fr)
  }
}
@media(max-width:820px) {
  :root {
    --nav-height:72px
  }
  .container,.narrow {
    width:calc(100% - 40px)
  }
  .section {
    padding-block:80px
  }
  .nav-toggle {
    display:block
  }
  .nav-links {
    position:fixed;
    top:var(--nav-height);
    left:0;
    right:0;
    display:none;
    align-items:stretch;
    background:var(--canvas);
    border-bottom:1px solid var(--line);
    padding:20px;
    gap:8px
  }
  .site-header.menu-open .nav-links {
    display:grid
  }
  .nav-links>a:not(.button) {
    padding:12px 8px;
    font-size:15px
  }
  .nav-links>.button {
    margin-top:8px;
    justify-content:space-between;
    font-size:13px
  }
  .hero {
    padding-top:calc(var(--nav-height) + 30px)
  }
  .hero-grid {
    grid-template-columns:1fr;
    min-height:0;
    gap:0
  }
  .hero-copy {
    padding:0;
    max-width:620px
  }
  .hero h1 {
    font-size:clamp(70px,12vw,106px);
    margin:22px 0 28px
  }
  .hero-description {
    font-size:15px;
    max-width:480px
  }
  .hero-actions {
    margin-top:25px;
    gap:24px
  }
  .hero-note {
    margin-top:16px
  }
  .hero-stage {
    height:580px;
    max-width:610px;
    width:100%;
    margin:40px auto 20px
  }
  .hero-app-frame {
    width:38%;
    right:4%;
    top:3%
  }
  .hero-bottle {
    left:8%;
    top:9%;
    height:66%
  }
  .hero-bear {
    width:64%;
    left:18%;
    bottom:0
  }
  .hero-sticker {
    top:0;
    left:8%;
    font-size:8px;
    padding:12px 16px
  }
  .hero-tiny-star {
    left:39%;
    top:22%
  }
  .hero-stage-floor {
    inset:8% 0 0 4%
  }
  .hero-proof-label {
    right:7%;
    bottom:2%
  }
  .hero-baseline {
    padding-block:22px;
    font-size:8px
  }
  .hero-baseline>span:nth-child(2) {
    display:none
  }
  .section-heading {
    grid-template-columns:1fr;
    gap:24px;
    margin-bottom:38px
  }
  .section-heading>.section-index {
    margin-bottom:0
  }
  .section-description {
    font-size:15px;
    max-width:450px
  }
  .habit-shelf {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:26px 22px;
    max-width:650px;
    margin-inline:auto;
    padding:10px
  }
  .habit-card {
    padding:22px
  }
  .habit-card h3 {
    font-size:30px
  }
  .habit-card>img {
    height:225px
  }
  .habit-card-top {
    font-size:7px
  }
  .habit-card-bottom {
    font-size:13px
  }
  .shelf-note {
    max-width:340px;
    margin:30px auto 0
  }
  .how-section {
    padding-bottom:0
  }
  .how-intro {
    grid-template-columns:1fr;
    gap:24px
  }
  .how-intro .section-index {
    margin-bottom:0
  }
  .how-intro>p:last-child {
    font-size:15px;
    max-width:420px
  }
  .tap-story {
    height:300vh
  }
  .story-sticky {
    grid-template-columns:1fr;
    gap:28px;
    min-height:100svh;
    padding:90px 0 25px;
    align-content:center
  }
  .story-copy {
    display:grid;
    grid-template-columns:1fr auto;
    column-gap:20px;
    align-items:center
  }
  .story-number {
    grid-column:1/-1;
    margin-bottom:14px
  }
  .story-step {
    grid-column:1;
    max-width:430px
  }
  .story-step h3 {
    font-size:32px;
    margin-bottom:12px
  }
  .story-step p {
    font-size:12px;
    line-height:1.7
  }
  .story-progress {
    grid-column:1;
    grid-row:3;
    margin-top:19px
  }
  .story-demo-controls {
    grid-column:2;
    grid-row:2/4;
    flex-direction:column;
    align-items:start;
    gap:10px;
    margin:0
  }
  .story-demo-controls>span {
    font-size:9px
  }
  .story-scene {
    --scene-height:clamp(300px,48svh,460px)
  }
  .story-bottle {
    left:20%
  }
  .story-phone {
    right:20%;
    width:min(40%,calc(var(--scene-height)*.3));
    border-radius:25px
  }
  .story-phone-screen {
    inset:4px;
    border-radius:21px
  }
  .story-demo-note {
    font-size:9px;
    margin-top:9px
  }
  .feature-explorer {
    grid-template-columns:1fr;
    gap:35px
  }
  .feature-tabs {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0 24px
  }
  .feature-tab {
    min-height:64px;
    gap:12px
  }
  .feature-tab>strong {
    font-size:19px
  }
  .feature-tab.active {
    padding-left:8px
  }
  .feature-tab>.tab-arrow {
    font-size:20px
  }
  .feature-description {
    margin-top:29px;
    max-width:520px
  }
  .feature-description h3 {
    font-size:31px;
    max-width:420px
  }
  .feature-detail {
    max-width:480px
  }
  .feature-display {
    min-height:695px;
    max-width:600px;
    width:100%;
    margin:auto;
    padding:42px 20px 29px
  }
  .feature-device {
    width:265px
  }
  .feature-display-stamp {
    left:8%;
    top:26px
  }
  .trust-layout {
    grid-template-columns:1fr;
    gap:45px
  }
  .trust-facts article {
    gap:25px
  }
  .trust-copy>p:not(.section-index) {
    max-width:450px
  }
  .access-layout {
    grid-template-columns:1fr;
    gap:20px
  }
  .access-heading {
    flex-direction:row;
    align-items:center
  }
  .free-access,.plus-access {
    padding:34px
  }
  .free-line {
    gap:30px
  }
  .free-line>strong {
    min-width:85px;
    font-size:60px
  }
  .plus-access h3 {
    font-size:44px
  }
  .plus-access ul {
    font-size:14px
  }
  .plus-access>p:not(.eyebrow) {
    font-size:11px;
    max-width:420px
  }
  .faq-layout {
    grid-template-columns:1fr;
    gap:40px
  }
  .faq-layout h2 br:nth-of-type(2) {
    display:none
  }
  .faq-question {
    font-size:15px
  }
  .download-layout {
    grid-template-columns:1fr;
    gap:38px;
    padding-block:65px;
    min-height:0
  }
  .download-layout h2 {
    font-size:clamp(54px,10vw,82px)
  }
  .download-art {
    min-height:460px;
    width:min(450px,100%);
    margin:auto
  }
  .download-art img {
    width:107%;
    left:-5%;
    top:-4%
  }
  .download-ring {
    width:90%;
    left:5%
  }
  .download-art-note {
    right:0;
    bottom:8%
  }
  .footer-top {
    flex-wrap:wrap
  }
  .footer-links {
    min-width:220px
  }
  .footer-wordmark {
    font-size:21.7vw;
    margin-top:35px
  }
  .footer-grid {
    grid-template-columns:repeat(3,1fr);
    gap:30px
  }
  .footer-brand {
    grid-column:1/-1
  }
  .support-shell,.legal-shell {
    grid-template-columns:1fr;
    gap:30px
  }
  .support-sidebar,.legal-toc {
    position:static;
    display:flex;
    flex-wrap:wrap;
    gap:4px;
    padding:15px
  }
  .support-sidebar strong,.legal-toc strong {
    width:100%
  }
  .support-sidebar a,.legal-toc a {
    font-size:12px;
    padding:6px 9px
  }
  .page-hero {
    padding:calc(var(--nav-height) + 60px) 0 60px
  }
  .page-hero h1 {
    font-size:clamp(46px,8vw,70px)
  }
  .page-hero .lede {
    font-size:17px
  }
}
@media(max-width:480px) {
  .container,.narrow {
    width:calc(100% - 36px)
  }
  .section {
    padding-block:64px
  }
  .brand {
    font-size:24px
  }
  .brand img {
    width:34px
  }
  .hero {
    padding-top:calc(var(--nav-height) + 23px)
  }
  .eyebrow {
    font-size:8px;
    letter-spacing:.09em
  }
  .tiny-spark {
    font-size:19px
  }
  .hero h1 {
    font-size:clamp(59px,15.7vw,75px);
    margin:23px 0 27px
  }
  .touch-word svg {
    bottom:-8px;
    height:17px
  }
  .hero-description {
    font-size:13px;
    line-height:1.8;
    max-width:370px
  }
  .hero-actions {
    gap:18px;
    margin-top:24px
  }
  .hero-actions .button {
    font-size:10px;
    padding:15px 19px;
    min-height:50px;
    gap:18px
  }
  .hero-text-link {
    font-size:10px;
    gap:8px
  }
  .hero-note {
    font-size:9px
  }
  .hero-stage {
    height:390px;
    margin:34px auto 15px
  }
  .hero-app-frame {
    right:7%;
    width:41%;
    top:3%;
    border-width:5px;
    border-radius:24px;
    box-shadow:5px 9px 0 #c9bff2
  }
  .hero-bottle {
    left:0;
    top:11%;
    height:64%
  }
  .hero-bear {
    left:9%;
    width:73%;
    bottom:-1%
  }
  .hero-sticker {
    left:0;
    font-size:6px;
    padding:9px 11px;
    gap:7px
  }
  .hero-sticker span {
    font-size:22px
  }
  .hero-tiny-star {
    font-size:32px;
    left:39%;
    top:23%
  }
  .hero-stage-floor {
    inset:10% -4% 0 0
  }
  .hero-proof-label {
    font-size:6px;
    right:3%;
    bottom:-1%
  }
  .hero-baseline {
    font-size:6px;
    padding-block:19px
  }
  .hero-baseline a {
    font-size:9px;
    gap:20px
  }
  .section-index {
    font-size:8px;
    letter-spacing:.11em;
    margin-bottom:20px
  }
  h2 {
    font-size:41px
  }
  .section-heading {
    gap:20px
  }
  .section-description {
    font-size:14px
  }
  .habit-shelf {
    gap:20px 12px;
    padding:6px 2px
  }
  .habit-card {
    padding:14px 12px 12px
  }
  .habit-card-top {
    font-size:5px
  }
  .habit-card-top>span:last-child {
    font-size:16px
  }
  .habit-card h3 {
    font-size:22px;
    margin-top:16px
  }
  .habit-card>img {
    height:150px;
    margin:8px 0
  }
  .habit-card-bottom {
    font-size:11px;
    padding-top:10px
  }
  .habit-card-bottom>span {
    width:25px;
    height:25px
  }
  .shelf-note {
    font-size:10px;
    max-width:270px;
    margin-top:26px
  }
  .how-section {
    padding-bottom:0
  }
  .how-intro {
    gap:20px
  }
  .how-intro>p:last-child {
    font-size:14px
  }
  .story-sticky {
    padding:86px 0 24px;
    gap:24px
  }
  .story-copy {
    column-gap:14px
  }
  .story-step h3 {
    font-size:25px;
    margin-bottom:12px;
    letter-spacing:-.055em
  }
  .story-step p {
    font-size:11px;
    line-height:1.7
  }
  .story-number {
    font-size:8px;
    margin-bottom:12px
  }
  .story-demo-controls .button {
    font-size:9px;
    padding:11px 15px;
    gap:11px;
    min-height:38px
  }
  .story-demo-controls>span {
    font-size:8px;
    max-width:78px
  }
  .story-progress {
    gap:5px;
    margin-top:17px
  }
  .story-progress>span {
    width:17px;
    height:3px
  }
  .story-progress>span.active {
    width:25px
  }
  .story-scene {
    --scene-height:clamp(290px,43svh,370px)
  }
  .story-phone {
    right:10%;
    top:10%
  }
  .story-bottle {
    left:14%;
    height:84%
  }
  .story-demo-note {
    font-size:8px
  }
  .feature-tab {
    gap:8px;
    min-height:62px
  }
  .feature-tab>strong {
    font-size:16px
  }
  .feature-tab>span:first-child {
    font-size:8px
  }
  .feature-tab>.tab-arrow {
    font-size:17px
  }
  .feature-tabs {
    gap:0 15px
  }
  .feature-description h3 {
    font-size:28px
  }
  .screen-caption {
    font-size:14px
  }
  .feature-detail {
    font-size:11px
  }
  .feature-display {
    min-height:620px;
    padding:36px 18px 25px
  }
  .feature-device {
    width:240px;
    max-width:82%;
    border-width:5px;
    border-radius:28px
  }
  .feature-display-stamp {
    left:3%;
    top:20px;
    font-size:7px;
    padding:10px
  }
  .feature-preview-label {
    font-size:7px;
    margin-top:23px
  }
  .trust-copy h2 {
    font-size:42px
  }
  .trust-copy>p:not(.section-index) {
    font-size:14px
  }
  .trust-facts article {
    gap:18px;
    padding:25px 0
  }
  .trust-facts h3 {
    font-size:20px
  }
  .trust-facts p {
    font-size:13px
  }
  .trust-copy .button {
    font-size:11px;
    min-height:50px;
    padding:14px 22px
  }
  .free-access,.plus-access {
    padding:26px 23px
  }
  .access-heading {
    gap:14px;
    align-items:start
  }
  .access-heading h3 {
    font-size:21px;
    max-width:150px
  }
  .pill {
    font-size:6px;
    padding:6px 9px
  }
  .free-line {
    gap:22px;
    padding:24px 0
  }
  .free-line>strong {
    font-size:48px;
    min-width:61px
  }
  .free-line h4 {
    font-size:16px
  }
  .free-line p {
    font-size:12px
  }
  .access-note {
    font-size:11px
  }
  .plus-access h3 {
    font-size:38px
  }
  .plus-access ul {
    font-size:14px
  }
  .plus-access>p:not(.eyebrow) {
    font-size:11px
  }
  .compatibility-note {
    font-size:11px
  }
  .faq-layout h2 {
    font-size:39px
  }
  .faq-question {
    font-size:14px;
    gap:16px;
    padding-block:23px
  }
  .faq-answer p {
    font-size:13px
  }
  .download-layout {
    padding-block:60px 28px
  }
  .download-layout h2 {
    font-size:48px;
    margin-top:25px
  }
  .download-layout>div>p:not(.eyebrow) {
    font-size:12px
  }
  .download-actions {
    gap:20px
  }
  .download-actions .button {
    font-size:11px;
    padding:16px 20px;
    min-height:51px
  }
  .download-support {
    font-size:10px
  }
  .download-art {
    min-height:360px
  }
  .download-art img {
    width:108%;
    top:0
  }
  .download-art-note {
    font-size:8px;
    bottom:4%;
    padding:11px
  }
  .site-footer {
    padding-top:45px
  }
  .footer-top {
    gap:25px
  }
  .footer-top>.brand {
    width:100%
  }
  .footer-top>p {
    font-size:10px;
    flex:1
  }
  .footer-links {
    font-size:10px;
    gap:9px 18px;
    min-width:140px
  }
  .footer-wordmark {
    font-size:21vw;
    line-height:1.6;
    margin-top:15px
  }
  .footer-bottom {
    font-size:7px;
    gap:20px;
    padding-block:18px
  }
  .footer-bottom>span:last-child {
    max-width:100px;
    text-align:right
  }
  .footer-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .footer-grid .footer-column {
    font-size:11px
  }
  .page-hero {
    padding-top:calc(var(--nav-height) + 43px)
  }
  .page-hero h1 {
    font-size:45px
  }
  .support-contact {
    font-size:11px
  }
  .support-entry {
    padding:21px
  }
  .support-entry p,.support-entry li {
    font-size:13px
  }
  .legal-article p,.legal-article li {
    font-size:14px
  }
  .legal-meta {
    font-size:11px
  }
  .legal-callout {
    font-size:13px
  }
  .scan-page {
    padding:18px
  }
  .scan-card {
    padding:32px 24px
  }
  .scan-links {
    font-size:10px;
    gap:15px
  }
}
@media(max-width:360px) {
  .container,.narrow {
    width:calc(100% - 30px)
  }
  .hero h1 {
    font-size:15.4vw
  }
  .hero-actions {
    gap:12px
  }
  .hero-actions .button {
    font-size:9px;
    padding-inline:15px
  }
  .hero-text-link {
    font-size:9px
  }
  .hero-stage {
    height:340px
  }
  .hero-bear {
    width:76%;
    left:5%;
    bottom:-1%
  }
  .hero-sticker {
    font-size:5px
  }
  .habit-card>img {
    height:130px
  }
  .habit-card h3 {
    font-size:20px
  }
  .habit-card-top {
    font-size:4px
  }
  .feature-tabs {
    gap:0 8px
  }
  .feature-tab>strong {
    font-size:14px
  }
  .feature-tab {
    gap:6px
  }
  .feature-display {
    min-height:560px
  }
  .feature-device {
    width:220px
  }
  .access-heading {
    flex-direction:column
  }
  .download-layout h2 {
    font-size:43px
  }
  .download-art {
    min-height:310px
  }
  .download-actions {
    gap:15px
  }
  .download-actions .button {
    font-size:10px
  }
  .download-support {
    font-size:9px
  }
}
@media(max-width:820px) and (max-height:760px) {
  .story-sticky {
    padding:84px 0 18px;
    gap:16px
  }
  .story-scene {
    --scene-height:clamp(255px,41svh,320px)
  }
  .story-step h3 {
    font-size:25px;
    margin-bottom:9px
  }
  .story-step p {
    font-size:10px
  }
  .story-number {
    margin-bottom:8px
  }
  .story-progress {
    margin-top:12px
  }
  .story-demo-controls>span {
    font-size:8px
  }
  .story-demo-controls .button {
    min-height:36px;
    padding:10px 14px
  }
  .story-demo-note {
    font-size:8px
  }
}
@media(min-width:821px) and (max-height:600px) {
  .story-sticky {
    padding-block:calc(var(--nav-height) + 10px) 10px;
    gap:40px
  }
  .story-scene {
    --scene-height:calc(100svh - var(--nav-height) - 58px)
  }
  .story-step h3 {
    font-size:clamp(25px,3.2vw,36px);
    margin-bottom:12px
  }
  .story-step p {
    font-size:11px
  }
  .story-number {
    margin-bottom:12px
  }
  .story-progress {
    margin-top:18px
  }
  .story-demo-controls {
    margin-top:16px
  }
  .story-demo-controls .button {
    min-height:38px;
    padding:10px 18px
  }
  .story-demo-controls>span {
    font-size:8px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }
  .js-enhanced [data-reveal] {
    opacity:1;
    transform:none
  }
  .story-phone {
    transform:none!important;
    will-change:auto
  }
  .story-signal {
    opacity:0!important
  }
  .hero-app-frame {
    transform:rotate(6deg)
  }
}
@media print {
  .site-header,.hero-stage,.hero-baseline,.tap-story,.habit-shelf,.feature-display,.download-section,.nav-toggle,.footer-wordmark {
    display:none
  }
  body {
    background:#fff;
    color:#000
  }
  .section {
    padding:30px 0
  }
  .container,.narrow {
    width:100%
  }
  .hero {
    padding:20px 0
  }
  .hero-grid,.section-heading,.how-intro,.feature-explorer,.trust-layout,.access-layout,.faq-layout,.support-shell,.legal-shell {
    display:block
  }
  .faq-answer {
    grid-template-rows:1fr
  }
  .trust-section {
    background:#fff;
    color:#000
  }
  .trust-facts p {
    color:#333
  }
  .support-sidebar,.legal-toc {
    position:static
  }
  .legal-article section {
    break-inside:avoid
  }
  .footer-bottom {
    margin-top:30px
  }
}
.muted {
  color:var(--muted)
}
.mint {
  color:#167654
}
.cta-actions {
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:28px
}
.legal-article a,.support-entry a {
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:3px
}
@media(max-width:820px) {
  .section[id] { scroll-margin-top:-80px; }
}
@media(max-width:480px) {
  .section[id] { scroll-margin-top:-60px; }
}