@font-face {
  font-family: "DM Sans";
  src: url("/assets/fonts/dm-sans.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display:swap
}

:root {
  --paper: #faf9f5;
  --white: #fff;
  --ink: #23483d;
  --secondary: #626e66;
  --sage: #edf0e8;
  --gold: #c7b48e;
  --rule: #e1e4dc;
  --focus: #775b2e;
  --display: "DM Sans",sans-serif;
  --body: "DM Sans",sans-serif;
  --ease: cubic-bezier(.16,1,.3,1);
  --radius:22px
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
  scrollbar-color:#a4b2a4 var(--paper)
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing:antialiased
}

::selection {
  background: var(--gold);
  color:var(--ink)
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset:5px
}

a {
  color: inherit;
  text-underline-offset: 5px;
  text-decoration-thickness:1px
}

button,a,summary {
  touch-action: manipulation;
  -webkit-tap-highlight-color:transparent
}

button {
  font: inherit;
  color: inherit;
  cursor:pointer
}

button:disabled {
  cursor:default
}

img {
  display: block;
  max-width: 100%;
  height:auto
}

svg {
  width: 20px;
  height: 20px;
  flex-shrink:0
}

h1,h2,h3,p,figure {
  margin:0
}

h1,h2 {
  font-family: var(--display);
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: -.035em;
  text-wrap:balance
}

h1 {
  font-size:clamp(44px,4.6vw,64px)
}

h1 em {
  font-style: normal;
  color:#66876b
}

h2 {
  font-size:clamp(34px,3.7vw,48px)
}

h3 {
  font-size: 19px;
  letter-spacing: -.025em;
  line-height: 1.35;
  font-weight:600
}

p {
  max-width:65ch
}

.wrap {
  width: min(1088px,calc(100% - 64px));
  margin-inline:auto
}

.section {
  padding-block:90px
}

.skip-link {
  position: absolute;
  left: 20px;
  top: -100px;
  background: var(--ink);
  color: white;
  padding: 12px 20px;
  z-index:20
}

.skip-link:focus {
  top:12px
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space:nowrap
}

.header-shell {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index:10
}

.site-header {
  min-height: 80px;
  display: flex;
  align-items: center;
  gap:32px
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.04em;
  text-decoration:none
}

.wordmark img {
  width: 40px;
  height:40px
}

.site-header nav {
  display: flex;
  gap: 30px;
  margin-left:auto
}

.site-header nav a {
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  color:var(--secondary)
}

.site-header nav a:hover {
  text-decoration: underline;
  color:var(--ink)
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 50px;
  padding: 12px 23px;
  background: var(--ink);
  color: var(--white);
  border: 1px solid var(--ink);
  border-radius: 11px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition:background-color .2s,transform .2s var(--ease)
}

.button:hover {
  background: #16382d;
  transform:translateY(-2px)
}

.button:active {
  transform:none
}

.header-cta {
  min-height: 42px;
  padding: 8px 17px;
  font-size:14px
}

.header-cta svg {
  width:16px
}

.hero {
  text-align: center;
  padding-block:76px 35px
}

.hero>p:first-of-type {
  margin: 25px auto 29px;
  color: var(--secondary);
  font-size: 18px;
  line-height:1.7
}

.hero-availability {
  font-size: 13px;
  color: var(--secondary);
  margin:17px auto 0
}

/* The same founder portrait is used on RingOtter. */
.founder-intro {
  display: inline-flex;
  align-items: center;
  text-align: left;
  gap: 13px;
  margin-top: 28px;
  padding: 4px;
  text-decoration: none;
  border-radius: 8px;
}
.founder-intro img, .founder-heading img {
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.founder-intro img { width: 48px; height: 48px; }
.founder-intro q { display: block; font-size: 15px; }
.founder-intro>span>span { display: block; color: var(--secondary); font-size: 12px; margin-top: 3px; }
.founder-intro:hover q { text-decoration: underline; text-underline-offset: 4px; }
.founder-heading { display: flex; align-items: center; gap: 20px; margin-bottom: 30px; }
.founder-heading img { width: 72px; height: 72px; }
.founder-heading h2 { margin-bottom: 0; }
.line-icon { width: 20px; height: 20px; flex-shrink: 0; }
.feature h3 { display: flex; align-items: flex-start; gap: 10px; }
.feature h3 .line-icon { margin-top: 3px; }
.screen-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.screen-tabs .line-icon { width: 16px; height: 16px; }
.showcase {
  padding-bottom:25px
}

.screen-tabs {
  display: flex;
  width: max-content;
  max-width: 100%;
  margin: 0 auto 20px;
  padding: 5px;
  gap: 4px;
  border: 1px solid var(--rule);
  border-radius: 100px;
  background:#eeeee7
}

.screen-tabs button {
  border: 1px solid transparent;
  background: transparent;
  border-radius: 100px;
  padding: 10px 25px;
  min-height: 44px;
  font-size: 14px;
  white-space: nowrap;
  color:var(--secondary)
}

.screen-tabs button[aria-selected="true"] {
  background: var(--white);
  border-color: #dce0d6;
  color: var(--ink);
  box-shadow:0 2px 3px #203e3010
}

.screen-tabs button:hover {
  color:var(--ink)
}

.showcase-panel {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--sage);
  padding: 40px 40px 22px;
  text-align: center;
  overflow:hidden
}

.showcase-panel h2 {
  font: 600 27px/1.2 var(--body);
  letter-spacing:-.03em
}

.showcase-panel>p {
  margin: 14px auto 0;
  color: var(--secondary);
  font-size: 14px;
  min-height:24px
}

.desktop-preview {
  position: relative;
  max-width: 800px;
  margin: 30px auto 0;
  border-radius: 12px;
  background: #e4e8dd;
  border: 1px solid #d0d8c9;
  padding:38px 32px 24px
}

.mac-bar {
  position: absolute;
  inset: 0 0 auto;
  height: 30px;
  border-bottom: 1px solid #cbd2c4;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 17px;
  font-size: 11px;
  text-align: left;
  color:#3d5041
}

.mac-bar img {
  margin-left: auto;
  width: 23px;
  height: 23px;
  object-fit:contain
}

.desktop-preview>#app-screenshot {
  width: 350px;
  aspect-ratio: 812/980;
  object-fit: contain;
  margin: 0 auto;
  mix-blend-mode: multiply;
  filter:drop-shadow(0 12px 18px #243e3520)
}

.features>h2 {
  text-align: center;
  margin-bottom:40px
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap:16px
}

.feature {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 28px;
  min-width:0
}

.feature>p {
  font-size: 14px;
  color: var(--secondary);
  margin-top: 12px;
  line-height:1.65
}

.water-demo {
  background: #f2f3ed;
  padding: 22px 18px;
  border-radius: 13px;
  margin-top:28px
}

.water-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-variant-numeric:tabular-nums
}

.water-top>span:first-child {
  font-weight:600
}

.water-top>span:last-child {
  font-size: 12px;
  color:var(--secondary)
}

progress {
  display: block;
  width: 100%;
  height: 8px;
  border: 0;
  border-radius: 8px;
  overflow: hidden;
  appearance: none;
  margin: 16px 0 20px;
  background:#dce1d5
}

progress::-webkit-progress-bar {
  background:#dce1d5
}

progress::-webkit-progress-value {
  background: #8aa37b;
  border-radius: 8px;
  transition:width .3s var(--ease)
}

progress::-moz-progress-bar {
  background: #8aa37b;
  border-radius:8px
}

.small-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  min-height: 42px;
  border: 1px solid var(--rule);
  border-radius: 9px;
  background: var(--white);
  font-weight: 600;
  font-size: 13px;
  text-decoration:none
}

.small-button:hover {
  background:var(--sage)
}

.quiet-button {
  border: 0;
  background: transparent;
  min-height: 44px;
  padding: 5px 7px;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset:4px
}

.quiet-button:hover {
  color:#6a4d29
}

.water-demo .quiet-button {
  float:right
}

.move-example {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin:19px auto 0
}

.move-example>img {
  width: 100px;
  height: 100px;
  object-fit:contain
}

.move-example>div {
  display: flex;
  flex-direction: column;
  gap:4px
}

.move-example>div>strong {
  font-size:16px
}

.move-example>div>span {
  font-size: 13px;
  color:var(--secondary)
}

.move-example>a {
  justify-content: center;
  width:100%
}

.week-demo {
  margin-top:28px
}

.week-days {
  display: flex;
  justify-content: space-between;
  gap: 5px;
  text-align:center
}

.week-days>span {
  font-size: 11px;
  color:var(--secondary)
}

.week-days b {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--sage);
  color: #889184;
  font-size: 18px;
  margin-bottom: 7px;
  font-weight:400
}

.week-days .earned {
  background: #dce7d4;
  color:#37583c
}

.week-demo .quiet-button {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding:0
}

.rhythm-tabs {
  display: flex;
  gap: 5px;
  margin-top:25px
}

.rhythm-tabs button {
  min-height: 44px;
  padding: 8px 16px;
  font-size: 13px;
  background: var(--sage);
  border: 1px solid transparent;
  border-radius:9px
}

.rhythm-tabs button[aria-pressed="true"] {
  background: var(--ink);
  color:var(--white)
}

.quiet-example {
  background: var(--sage);
  border-radius: 12px;
  margin-top: 25px;
  padding: 18px;
  font-size: 14px;
  font-weight:600
}

.quiet-example>span:last-child {
  display: block;
  font-size: 12px;
  font-weight: 400;
  margin: 6px 0 0 15px;
  color:var(--secondary)
}

.status-dot {
  width: 7px;
  height: 7px;
  display: inline-block;
  background: #ab8d56;
  border-radius: 50%;
  margin-right:8px
}

.custom-example {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-top:25px
}






.privacy-feature {
  grid-column: 1/-1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  padding:27px 32px
}

.privacy-feature p {
  color: var(--secondary);
  font-size: 14px;
  margin-top:7px
}

.text-link {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  min-height: 44px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space:nowrap
}

.text-link:hover {
  text-decoration:underline
}

.character-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  background: #e9eee2;
  border: 1px solid #d9e0cf;
  border-radius: 28px;
  padding:50px 64px
}

.character-copy>p {
  color: var(--secondary);
  margin-top: 24px;
  max-width:33ch
}

.character-copy .demo-note {
  font-size: 14px;
  color:var(--ink)
}

.character-demo {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align:center
}

.character-stage {
  position: relative;
  width: 260px;
  height: 260px;
  max-width: 100%;
  isolation:isolate
}

.character-stage>img {
  width: 100%;
  height: 100%;
  object-fit:contain
}

.character-name {
  font: 500 26px var(--display);
  margin-top:5px
}

.character-picker {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin:16px 0 22px
}

.character-picker button {
  padding: 2px;
  width: 46px;
  height: 46px;
  background: transparent;
  border: 2px solid transparent;
  border-radius:50%
}

.character-picker button[aria-pressed="true"] {
  border-color: var(--ink);
  background:#f9fbf6
}

.character-picker button:hover {
  background:#f9fbf6
}

.character-picker img {
  width: 38px;
  height: 38px;
  object-fit:contain
}

.demo-start {
  min-width:250px
}

.demo-status {
  font-size: 12px;
  color: var(--secondary);
  margin-top: 14px;
  min-height: 40px;
  max-width:34ch
}

.founder-note {
  max-width: 680px;
}

.founder-note h2 {
  font-size: 38px;
  margin-bottom: 30px;
}

.founder-note p {
  color: var(--secondary);
  font-size: 17px;
  line-height: 1.8;
  margin-bottom: 20px;
}

.founder-note .founder-signature {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin-top: 28px;
}
.pricing {
  text-align: center;
  border-top:1px solid var(--rule)
}

.section-intro {
  margin: 17px auto 0;
  color:var(--secondary)
}

.price-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 760px;
  margin: 38px auto 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--white);
  text-align:left
}

.price-main {
  padding: 36px;
  border-right:1px solid var(--rule)
}

.price-main>img {
  width: 64px;
  height:64px
}

.price {
  font: 500 56px/1.1 var(--display);
  letter-spacing: -.04em;
  margin: 22px 0 12px;
  display: flex;
  align-items: baseline;
  gap:12px
}

.price>span {
  font: 400 14px var(--body);
  color: var(--secondary);
  letter-spacing:0
}

.price-main>p:not(.price) {
  font-size: 14px;
  color:var(--secondary)
}

.price-includes {
  padding:42px 32px
}

.price-includes h3 {
  font-size:16px
}

.price-includes ul {
  list-style: none;
  margin: 20px 0 26px;
  padding:0
}

.price-includes li {
  font-size: 14px;
  line-height: 1.8;
  margin: 7px 0;
  display: flex;
  gap:10px
}

.price-includes li:before {
  content: "✓";
  color:#6f8e60
}

.price-includes>p {
  font-size: 12px;
  color:var(--secondary)
}

.questions {
  max-width: 760px;
  padding-top:30px
}

.questions h2 {
  text-align: center;
  margin-bottom:33px
}

.faq-list details {
  border-bottom:1px solid var(--rule)
}

.faq-list summary {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  list-style: none;
  cursor: pointer;
  padding: 24px 0;
  min-height: 72px;
  font-size: 16px;
  font-weight:500
}

.faq-list summary::-webkit-details-marker {
  display:none
}

.faq-list summary>span {
  position: relative;
  width: 16px;
  height: 16px;
  flex-shrink:0
}

.faq-list summary>span:before,.faq-list summary>span:after {
  content: "";
  position: absolute;
  left: 1px;
  top: 7px;
  width: 14px;
  height: 1px;
  background:currentColor
}

.faq-list summary>span:after {
  transform:rotate(90deg)
}

.faq-list details[open] summary>span:after {
  display:none
}

.faq-list details>div {
  padding: 0 32px 24px 0;
  color: var(--secondary);
  font-size: 15px;
  line-height:1.8
}

.closing {
  text-align: center;
  padding-top: 25px;
  padding-bottom:55px
}

.closing>p {
  margin: 20px auto 25px;
  color:var(--secondary)
}

.closing-cast {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 45px auto 0;
  max-width:800px
}

.cheer-character {
  border: 0;
  background: transparent;
  padding: 5px;
  width: 100px;
  min-width: 0;
  border-radius:12px
}

.cheer-character img {
  width: 100%;
  height: auto;
  object-fit: contain;
  transition:transform .3s var(--ease)
}



.cheer-character span {
  display: block;
  font-size: 12px;
  color:var(--secondary)
}


.footer-content { padding-block: 48px 30px; }
.footer-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 418px;
  gap: 70px;
}
.footer-about {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.site-footer .wordmark { font-size: 19px; font-weight: 600; gap: 8px; line-height: 1; }
.site-footer .wordmark img { width: 28px; height: 28px; }
.footer-about>p { max-width: 270px; color: var(--secondary); font-size: 14px; line-height: 1.7; }
.footer-founder {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  min-height: 36px;
  border: 1px solid var(--rule);
  border-radius: 100px;
  font-size: 13px;
  color: var(--secondary);
  text-decoration: none;
}
.footer-founder>img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.footer-founder strong { font-weight: 500; color: var(--ink); }
.footer-founder>svg { width: 14px; height: 14px; }
.footer-founder:hover { background: var(--sage); }
.footer-links { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 44px; }
.footer-links h3 { font: 500 12px/1.45 var(--body); color: var(--secondary); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 5px; }
.footer-links>div { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.footer-links a { display: inline-flex; align-items: center; min-height: 32px; font-size: 14px; text-decoration: none; color: var(--secondary); }
.footer-links a:hover,.footer-links a[aria-current] { text-decoration: underline; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid var(--rule); margin-top: 48px; padding-top: 24px; color: var(--secondary); }
.footer-bottom small { font-size: 12px; }
@media (max-width: 900px) {
  .footer-main { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 45px; }
  .footer-links { gap: 20px; }
}
@media (max-width: 600px) {
  .footer-main { grid-template-columns: 1fr; gap: 36px; }
  .footer-content { padding-block: 36px 24px; }
  .footer-founder { min-height: 44px; padding-right: 14px; }
  .footer-links a { min-height: 36px; }
  .footer-links { gap: 20px; }
  .footer-bottom { flex-direction: column; gap: 8px; margin-top: 32px; }
}

.document {
  max-width: 760px;
  padding-block:64px 100px
}

.document>h1 {
  font-size: 56px;
  margin:25px 0 35px
}

.document>.document-intro {
  margin-bottom: 45px;
  color:var(--secondary)
}

.document>section {
  margin-top:35px
}

.document section h2 {
  font: 600 22px/1.3 var(--body);
  letter-spacing: -.02em;
  margin-bottom:13px
}

.document section p {
  color: var(--secondary);
  margin-top:12px
}

.back-link {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-size: 14px;
  text-decoration:none
}

.back-link svg {
  transform:rotate(180deg)
}

.not-found>img {
  margin-inline:auto
}

.not-found {
  text-align:center
}

.not-found>p {
  margin:0 auto 25px
}

@media(min-width:1600px) {
  .hero {
    padding-top:83px
  }
}

@media(max-width:1000px) {
  .feature {
    padding:22px
  }
  .feature-grid {
    gap:12px
  }
  .character-section {
    padding: 40px;
    gap:24px
  }
  .water-top {
    align-items: start;
    flex-direction: column;
    gap:3px
  }
  .week-days b {
    width: 27px;
    height:27px
  }
  .site-header {
    gap:23px
  }
  .character-picker {
    gap:3px
  }
}

@media(max-width:760px) {
  .wrap {
    width:calc(100% - 40px)
  }
  .section {
    padding-block:60px
  }
  .site-header {
    min-height: 72px;
    gap:20px
  }
  .site-header nav {
    gap:18px
  }
  .wordmark {
    font-size:22px
  }
  .wordmark img {
    width: 35px;
    height:35px
  }
  .hero {
    padding-top: 55px;
    padding-bottom:27px
  }
  .hero>p:first-of-type {
    font-size:16px
  }
  .showcase-panel {
    padding:28px 18px 18px
  }
  .showcase-panel h2 {
    font-size:24px
  }
  .showcase-panel>p {
    font-size:13px
  }
  .desktop-preview {
    padding: 36px 15px 16px;
    margin-top:23px
  }
  .desktop-preview>#app-screenshot {
    width:320px
  }
  .mac-bar {
    gap: 12px;
    padding:0 12px
  }
  .screen-tabs button {
    padding:9px 17px
  }
  .feature-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap:14px
  }
  .feature {
    padding:24px
  }
  .feature-wins {
    grid-column:1/-1
  }
  .week-demo {
    max-width: 300px;
    margin-inline:auto
  }
  .water-top {
    flex-direction: row;
    flex-wrap:wrap
  }
  .week-days b {
    width: 30px;
    height:30px
  }
  .privacy-feature {
    padding: 24px;
    gap:15px
  }
  .privacy-feature .text-link {
    font-size:13px
  }
  .character-section {
    grid-template-columns: 1fr;
    padding: 35px 25px;
    gap:25px
  }
  .character-copy {
    text-align:center
  }
  .character-copy>p {
    margin-inline: auto;
    max-width:40ch
  }
  .character-copy .demo-note {
    display:none
  }
  .character-stage {
    width: 240px;
    height:240px
  }
  .character-picker {
    gap:6px
  }
  .founder-note {
    display:block
  }
  .founder-note h2 {
    margin-bottom: 25px;
    font-size:34px
  }
  .founder-note>div {
    max-width:52ch
  }
  .price-panel {
    max-width:600px
  }
  .price-main {
    padding:28px 24px
  }
  .price-includes {
    padding:33px 24px
  }
  .price {
    font-size:48px
  }
  .closing-cast {
    gap: 7px;
    margin-top:35px
  }
  .closing {
    padding-top:0
  }
  .questions {
    padding-top:0
  }
}

@media(max-width:520px) {
  h1 {
    font-size:43px
  }
  .hero h1 {
    letter-spacing:-.04em
  }
  .site-header nav {
    gap:15px
  }
  .site-header nav a {
    font-size:12px
  }
  .wordmark {
    font-size: 21px;
    gap:7px
  }
  .hero>p:first-of-type {
    font-size: 15px;
    max-width:31ch
  }
  .hero-availability {
    font-size:12px
  }
  .screen-tabs {
    gap: 0;
    padding:4px
  }
  .screen-tabs button {
    padding: 8px 17px;
    font-size:12px
  }
  .showcase-panel {
    border-radius: 17px;
    padding:25px 12px 17px
  }
  .desktop-preview {
    padding-inline:8px
  }
  .desktop-preview>#app-screenshot {
    width: 100%;
    max-width:290px
  }
  .mac-bar {
    font-size: 9px;
    gap:10px
  }
  .showcase-panel h2 {
    font-size:23px
  }
  .showcase-panel>p {
    max-width:27ch
  }
  .feature-grid {
    grid-template-columns:1fr
  }
  .feature-wins {
    grid-column:auto
  }
  .feature {
    padding:27px
  }
  .water-demo {
    max-width:350px
  }
  .move-example {
    justify-content: start;
    gap:18px
  }
  .move-example>a {
    width: auto;
    margin-left:auto
  }
  .move-example>img {
    width: 88px;
    height:88px
  }
  .week-demo {
    margin-inline:0
  }
  .privacy-feature {
    align-items: start;
    flex-direction: column;
    gap:12px
  }
  .character-section {
    padding:32px 18px
  }
  .character-copy>p {
    font-size:15px
  }
  .character-picker {
    gap:2px
  }
  .character-picker button {
    width: 44px;
    height:44px
  }
  .price-panel {
    grid-template-columns: 1fr;
    max-width:380px
  }
  .price-main {
    border-right: 0;
    border-bottom: 1px solid var(--rule);
    padding:30px
  }
  .price-includes {
    padding:30px
  }
  .price-includes ul {
    margin-bottom:20px
  }
  .faq-list summary {
    font-size:15px
  }
  .faq-list details>div {
    font-size: 14px;
    padding-right:20px
  }
  .closing-cast {
    display: grid;
    grid-template-columns: repeat(3,80px);
    gap:12px 20px
  }
  .cheer-character {
    width:80px
  }
  .document>h1 {
    font-size:44px
  }
  .document {
    padding-block:40px 65px
  }
  .document .faq-list summary {
    padding-block:20px
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    animation: none!important;
    transition:none!important
  }
  .is-running .character-sprite {
    background-position:52.17% 0
  }
  .celebration {
    display:none
  }
}

.character-sprite {
  position: absolute;
  inset: 0;
  display: none;
  background-image: var(--sprite);
  background-size: 2400% 100%;
  background-repeat: no-repeat;
  background-position: 0 0;
}

.is-running .character-sprite {
  display: block;
  animation: stretch-frames 1.6s steps(23) infinite;
}

.is-running > img {
  visibility: hidden;
}



.celebration {
  position: absolute;
  inset: 40px 0 30px;
  pointer-events: none;
}

.celebration i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0;
}

.celebration i:nth-child(2n) {
  background: #769a71;
  width: 6px;
  height: 10px;
}

.is-success .celebration i {
  animation: little-win 0.8s var(--ease) both;
}

.celebration i:nth-child(1) {
  --x: -120px;
  --y: -70px;
}

.celebration i:nth-child(2) {
  --x: 110px;
  --y: -95px;
}

.celebration i:nth-child(3) {
  --x: -105px;
  --y: 30px;
}

.celebration i:nth-child(4) {
  --x: 125px;
  --y: 35px;
}

.celebration i:nth-child(5) {
  --x: -65px;
  --y: -125px;
}

.celebration i:nth-child(6) {
  --x: 70px;
  --y: -135px;
}

@keyframes stretch-frames {
  to {
    background-position: 100% 0;
  }
}

@keyframes happy {
  0% {
    transform: translateY(0);
  }
  35% {
    transform: translateY(-12px) rotate(-3deg);
  }
  70% {
    transform: translateY(1px) rotate(2deg);
  }
  100% {
    transform: none;
  }
}

@keyframes little-win {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  90% {
    opacity: 0.6;
  }
  100% {
    transform: translate(var(--x), var(--y));
    opacity: 0;
  }
}


@media (max-width: 520px) {
  .founder-heading { align-items: center; gap: 14px; }
  .founder-heading img { width: 56px; height: 56px; }
  .founder-heading h2 { font-size: 30px; }
  .founder-intro q { font-size: 14px; }
  .founder-intro>span>span { font-size: 11px; }
  .screen-tabs button { gap: 6px; padding-inline: 12px; }
  .screen-tabs .line-icon { width: 14px; height: 14px; }
}

.site-footer { border-top: 1px solid var(--rule); }

/* Accent previews are local to this page and never change the native app. */
:root[data-accent="honey"] { --ink: #775624; --secondary: #75664d; --sage: #f1eadd; --focus: #775624; --gold: #b39455; }
:root[data-accent="rose"] { --ink: #86494d; --secondary: #796064; --sage: #f3e7e7; --focus: #86494d; --gold: #bd8b8c; }
:root[data-accent="lilac"] { --ink: #635181; --secondary: #6d6379; --sage: #ece8f2; --focus: #635181; --gold: #ab9abd; }
.custom-example .swatch {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 2px solid transparent;
  outline: none;
  border-radius: 50%;
}
.custom-example .swatch span { display: block; width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--white); outline: 1px solid var(--rule); }
.swatch.forest span { background: #53765c; }
.swatch.honey span { background: #ba9e61; }
.swatch.rose span { background: #b77f7b; }
.swatch.lilac span { background: #9285ad; }
.custom-example .swatch[aria-pressed="true"] { border-color: var(--ink); }
.custom-example .swatch:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.inline-concept { display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; color: var(--ink); }
.inline-concept .line-icon { width: 17px; height: 17px; align-self: center; transform: translateY(2px); }


.closing-mascot { display: block; position: relative; width: 140px; height: 140px; margin: 0 auto 16px; background: transparent; padding: 0; border: 0; border-radius: 20px; }
.closing-mascot>img { width: 100%; height: 100%; object-fit: contain; }

.win-spark { position: absolute; top: 10px; right: -12px; color: var(--ink); opacity: 0; pointer-events: none; }
.win-spark .line-icon { width: 24px; height: 24px; }

.closing-cta:is(:hover,:focus-visible) .line-icon { animation: star-cheer .8s var(--ease) both; }
@keyframes character-greeting { 0%,100% { transform: none; } 25% { transform: translateY(-8px) rotate(-6deg); } 60% { transform: translateY(-3px) rotate(5deg); } }
@keyframes win-hop { 0%,100% { transform: none; } 25% { transform: translateY(-20px) rotate(-8deg) scale(1.06); } 55% { transform: translateY(-5px) rotate(6deg); } 75% { transform: translateY(-10px) rotate(-3deg); } }
@keyframes win-spark { 0% { opacity: 0; transform: scale(.5) rotate(-20deg); } 30%,60% { opacity: 1; transform: translate(10px,-12px) scale(1.1) rotate(15deg); } 100% { opacity: 0; transform: translate(15px,-24px) scale(.7); } }
@keyframes star-cheer { 40% { transform: rotate(35deg) scale(1.3); } 75% { transform: rotate(-15deg) scale(1.1); } }
@media (max-width: 760px) { .closing-mascot { width: 120px; height: 120px; } }

:root[data-accent="honey"] { --accent-display: #96733a; }
:root[data-accent="rose"] { --accent-display: #a66d73; }
:root[data-accent="lilac"] { --accent-display: #8871a3; }
h1 em { color: var(--accent-display, #66876b); }
.character-section { background: var(--sage); border-color: var(--rule); }
progress::-webkit-progress-value { background: var(--ink); }
progress::-moz-progress-bar { background: var(--ink); }
.week-days .earned { background: var(--sage); color: var(--ink); }

/* Match the references' alternating wide/narrow feature demonstrations. */
.feature-grid { grid-template-columns: repeat(6,minmax(0,1fr)); }
.feature-water { grid-column: span 4; }
.feature-move, .feature-wins { grid-column: span 2; }
.feature-rhythm { grid-column: span 4; }
.feature-quiet, .feature-custom { grid-column: span 3; }
.privacy-feature { grid-column: 1/-1; }
.feature-water .water-demo { max-width: 420px; margin-top: 30px; }
.rhythm-queue { list-style: none; margin: 16px 0 0; padding: 0; }
.rhythm-queue li { display: flex; align-items: center; gap: 10px; padding: 11px 0; font-size: 14px; border-top: 1px solid var(--rule); }
.rhythm-queue li>span:last-child { margin-left: auto; color: var(--secondary); font-size: 12px; }
.rhythm-queue .line-icon { width: 18px; height: 18px; }
#week-reset { display: block; font-size: 12px; padding: 0; color: var(--secondary); }
#sample-win[aria-disabled="true"], #water-add[aria-disabled="true"] { cursor: default; opacity: .75; }
.is-running.is-static .character-sprite { display: none; }
.is-running.is-static>img { visibility: visible; }
.character-stage.is-loading>img { opacity: .8; }
.button, .feature, .showcase-panel, .character-section, .screen-tabs, .rhythm-tabs button, .footer-founder {
  transition: background-color 180ms ease-out, border-color 180ms ease-out, color 180ms ease-out;
}
.button { transition: background-color 180ms ease-out, border-color 180ms ease-out, color 180ms ease-out, transform 180ms var(--ease); }
@media (max-width: 760px) {
  .feature-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .feature-water, .feature-rhythm, .privacy-feature { grid-column: 1/-1; }
  .feature-move, .feature-wins, .feature-quiet, .feature-custom { grid-column: span 1; }
}
@media (max-width: 520px) {
  .feature-grid { grid-template-columns: minmax(0,1fr); }
  .feature-grid>.feature { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .button:hover { transform: none; }
}

@media (max-width: 760px) {
  .footer-links a, .small-button { min-height: 44px; }
}

.week-days { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); }
.week-days b { width: min(30px,100%); height: auto; aspect-ratio: 1; margin-inline: auto; }

.price-main>.store-link { margin-top: 24px; min-height: 48px; }

.showcase-panel>#preview-status:not(.sr-only) { margin: 16px auto 0; font-size: 14px; max-width: 40ch; }

.store-notice {
  position: fixed;
  z-index: 30;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--white);
  box-shadow: 0 5px 16px #23483d20;
  font-size: 14px;
  font-weight: 500;
  pointer-events: none;
}
.store-notice[hidden] { display: none; }

@media (max-width: 760px) {
  html { scroll-padding-top: 88px; }
  .site-header {
    display: flex;
    justify-content: space-between;
    min-height: 72px;
    gap: 16px;
    padding-block: 12px;
  }
  .site-header nav { display: none; }
  .site-header .header-cta {
    display: inline-flex;
    min-height: 44px;
    padding: 8px 12px;
    font-size: 13px;
  }
}


.hero-line { display: block; }
@media (max-width: 760px) {
  .hero { padding-block: 40px 24px; }
  .hero>p:first-of-type { max-width: 35ch; line-height: 1.6; text-wrap: pretty; }
  .section { padding-block: 48px; }
  .features>h2 { margin-bottom: 28px; }
  .character-section { gap: 20px; }
  .founder-heading { margin-bottom: 24px; }
  .questions, .closing { padding-top: 0; }
}
@media (max-width: 520px) {
  .hero h1 { font-size: clamp(30px,8.8vw,42px); line-height: 1.12; letter-spacing: -.035em; }
  .hero-line { white-space: nowrap; }
  .hero>p:first-of-type { margin-block: 22px 24px; }
  .section h2 { font-size: clamp(28px,8vw,34px); line-height: 1.13; }
  .showcase-panel h2 { font-size: 24px; }
  .feature { padding: 24px; }
  .feature h3 { font-size: 18px; }
  .feature>p, .character-copy>p { text-wrap: pretty; }
  .founder-heading { gap: 12px; }
  .founder-heading img { width: 48px; height: 48px; }
  .founder-heading h2 { font-size: clamp(24px,6.5vw,28px); }
  .founder-note p { font-size: 16px; line-height: 1.7; }
}
@media (max-width: 520px) {
  .character-section { padding: 32px 20px; gap: 16px; }
  .character-stage { width: 208px; height: 208px; }
  .character-copy>p { margin-top: 18px; }
  .demo-start { width: 100%; max-width: 280px; min-width: 0; padding-inline: 16px; }
}
@media (max-width: 360px) {
  .character-picker { display: grid; grid-template-columns: repeat(3,44px); gap: 8px 12px; }
}

@media (max-width: 760px) { .hero-copy-break { display: none; } }
@media (max-width: 520px) {
  .feature>p { font-size: 15px; line-height: 1.6; }
  .faq-list details>div { font-size: 15px; line-height: 1.7; }
}

/* A little of the app's character and color, without changing its page flow. */
.hero { position: relative; isolation: isolate; }
.hero-friends { position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.hero-friend { position: absolute; display: grid; place-items: center; width: 180px; height: 180px; border-radius: 46%; }
.hero-friend img { width: 150px; height: 150px; object-fit: contain; }
.hero-friend-pip { left: 1%; top: 105px; background: #e3efde; transform: rotate(-7deg); }
.hero-friend-ember { right: 1%; top: 170px; background: #f8e8d9; transform: rotate(7deg); }
.hero-friend-pip img { animation: friend-hello 900ms 200ms; }
.hero-friend-ember img { animation: friend-hello 900ms 400ms; }
@keyframes friend-hello {
  0%, 100% { transform: translateY(0) rotate(0); }
  35% { transform: translateY(-10px) rotate(-6deg); }
  70% { transform: translateY(-3px) rotate(4deg); }
}
.showcase-panel { background: color-mix(in srgb, var(--sage) 80%, #cde4ca); border-color: var(--rule); }
.desktop-preview { background: #d1e0d2; border-color: #c0d2c1; box-shadow: 0 18px 36px #23483d12; }
.mac-bar { background: #dbe8dc; border-color: #c0d2c1; border-radius: 12px 12px 0 0; }
.feature-water { background: #eff7f4; border-color: #dbeae3; }
.feature-move { background: #fff4e8; border-color: #f0e2d1; }
.feature-wins { background: #f4f0fa; border-color: #e8dff1; }
.feature-rhythm { background: #f9f5e9; border-color: #eee6d4; }
.feature-quiet { background: #eef3f8; border-color: #dfe8ef; }
.feature-custom { background: #fbf0ef; border-color: #f0dfdc; }
.feature .water-demo, .feature .quiet-example { background: #ffffffa6; }
.feature { transition: border-color .2s, box-shadow .25s, transform .25s var(--ease); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .feature:hover { transform: translateY(-3px); box-shadow: 0 12px 25px #23483d0d; }
  .hero-friend img { transition: transform .35s var(--ease); }
  .hero:hover .hero-friend-pip img { transform: rotate(-5deg) translateY(-4px); }
  .hero:hover .hero-friend-ember img { transform: rotate(5deg) translateY(-4px); }
}
.character-section { background: color-mix(in srgb, var(--sage) 80%, #cde4ca); border-color: var(--rule); }
.price-panel { background: #fbf4e8; border-color: #eadfcb; }
@media (max-width: 1100px) {
  .hero-friend { width: 125px; height: 125px; }
  .hero-friend img { width: 108px; height: 108px; }
  .hero-friend-pip { left: 0; top: 125px; }
  .hero-friend-ember { right: 0; top: 190px; }
}
@media (max-width: 760px) {
  .hero-friends { position: relative; inset: auto; display: flex; justify-content: center; align-items: center; gap: 12px; height: 86px; margin: 0 auto 12px; }
  .hero-friend { position: static; width: 78px; height: 78px; }
  .hero-friend img { width: 74px; height: 74px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-friend img { animation: none; transition: none; }
  .feature { transition: none; }
}

/* Show the optional quiet-time flow where visitors can discover it. */
.hero-quiet-link { display: flex; width: fit-content; align-items: center; justify-content: center; gap: 7px; min-height: 44px; margin: 8px auto -4px; color: var(--ink); font-size: 13px; font-weight: 600; text-decoration: none; }
.hero-quiet-link:hover { text-decoration: underline; }
.hero-quiet-link svg { width: 16px; height: 16px; }
.quiet-example-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.quiet-example-row .status-dot { flex: none; margin: 0; }
.quiet-example-row > span:last-child { margin-left: auto; color: var(--secondary); font-size: 12px; font-weight: 400; text-align: right; }
.quiet-example-resume { border-top: 1px solid var(--rule); margin-top: 13px; padding-top: 13px; }
.quiet-example-resume .status-dot { background: #739a75; }
.feature > .quiet-detail { margin-top: 14px; font-size: 12px; }
@media (max-width: 360px) {
  .quiet-example-row { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 4px 8px; }
  .quiet-example-row > span:last-child { grid-column: 2; margin-left: 0; text-align: left; }
  .hero-quiet-link { font-size: 12px; }
  .hero-quiet-link svg:first-child { display: none; }
}