:root {
  color-scheme:light;
  --ink:#18374a;
  --muted:#435f70;
  --blue:#236399;
  --line:#c8dae5;
  --paper:#f8fbfd;
  --radius:24px
}

* {
  box-sizing:border-box
}
body {
  margin:0;
  background:#e6f0f7;
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  line-height:1.65
}
a {
  color:var(--blue)
}
img {
  max-width:100%;
  height:auto
}
h1,h2,h3,p {
  margin-top:0
}
h1,h2,h3 {
  line-height:1.18;
  letter-spacing:-.035em
}
h2 {
  font-size:clamp(1.9rem,4vw,3rem);
  margin-bottom:28px;
  font-weight:700
}
h3 {
  font-size:1.15rem;
  letter-spacing:-.015em;
  margin-bottom:12px
}
p {
  margin-bottom:18px;
  color:var(--muted)
}
.wrap {
  width:min(1120px,calc(100% - 40px));
  margin-inline:auto
}
.site-header.wrap {
  width:auto;
  margin-inline:20px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:16px;
  padding-block:12px 0
}
.language {
  padding:10px 14px;
  border:1px solid var(--line);
  border-radius:30px;
  text-decoration:none;
  font-size:.9rem;
  white-space:nowrap
}
.hero {
  padding-block:0 56px;
  text-align:center
}
.hero-copy {
  max-width:760px;
  margin-inline:auto
}
.hero .store-badges {
  justify-content:center
}
.hero-logo {
  display:block;
  width:clamp(112px,10vw,128px);
  margin:0 auto 16px
}
.hero-logo img {
  display:block;
  width:100%;
  height:auto
}
.hero h1 {
  font-size:clamp(2.1rem,5vw,3.7rem);
  margin-bottom:30px
}
.hero h1 span {
  display:block;
  font-size:.48em;
  letter-spacing:-.02em;
  font-weight:450;
  margin-top:8px
}
.tagline {
  font-size:clamp(2.5rem,6vw,4.6rem);
  letter-spacing:-.045em;
  line-height:1.08;
  color:var(--ink);
  font-weight:750;
  margin-bottom:28px
}
.hero-subtitle {
  font-size:clamp(1.15rem,2.6vw,1.5rem);
  font-weight:700;
  color:var(--blue);
  margin-bottom:12px
}
.hero-description {
  font-size:1.08rem
}
.store-badges {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  margin-top:28px
}
.store-badges a {
  display:inline-flex;
  align-items:center;
  min-height:60px;
  transition:transform .2s ease
}
.store-badges img {
  height:60px;
  width:auto;
  max-width:100%
}
.section {
  padding-block:64px
}
.eyebrow {
  text-transform:uppercase;
  letter-spacing:.13em;
  font-size:.75rem;
  font-weight:750;
  color:var(--blue);
  margin-bottom:18px
}
.intro {
  border-top:1px solid var(--line)
}
.prose {
  max-width:660px;
  font-size:1.1rem
}
.feature-grid,.use-grid {
  display:grid;
  gap:18px;
  margin-top:32px
}
.feature-card {
  padding:28px;
  background:var(--paper);
  border:1px solid #d5e3ed;
  border-radius:var(--radius)
}
.feature-card p,.use-card p {
  margin-bottom:0
}
.icon {
  display:inline-flex;
  width:46px;
  height:46px;
  align-items:center;
  justify-content:center;
  background:#e4eff7;
  border-radius:14px;
  color:var(--blue);
  margin-bottom:22px
}
svg {
  width:26px;
  height:26px;
  flex-shrink:0
}
.stats {
  margin-block:38px;
  padding:32px 24px;
  border-radius:32px;
  background:#193f58;
  color:#fff;
  display:grid;
  gap:32px
}
.stats p {
  color:#e0edf5
}
.stats .eyebrow {
  color:#b8d9f0
}
.stats-media {
  min-width:0;
  align-self:center
}
.stats-slides {
  display:grid;
  gap:16px;
  align-items:center
}
.stats-slide {
  display:block;
  width:100%;
  height:auto;
  min-width:0
}
.stats-media.is-enhanced .stats-slides {
  gap:0
}
.stats-media.is-enhanced .stats-slide {
  grid-area:1/1;
  opacity:0;
  transition:opacity .65s ease;
  pointer-events:none
}
.stats-media.is-enhanced .stats-slide.is-active {
  opacity:1;
  pointer-events:auto
}


.scenario-media {
  height:140px;
  border-radius:20px;
  display:grid;
  place-items:center;
  background:#d4e6f2;
  margin-bottom:22px;
  color:#2e6a94
}
.scenario-media svg {
  width:42px;
  height:42px
}
.use-card:nth-child(2) .scenario-media {
  background:#dce8e2;
  color:#3d6c59
}
.use-card:nth-child(3) .scenario-media {
  background:#f0e3d3;
  color:#835e30
}
.use-card:nth-child(4) .scenario-media {
  background:#e4e0ef;
  color:#66558e
}
.use-card {
  min-width:0
}
.use-card p {
  font-size:.95rem
}
.philosophy {
  text-align:center;
  border-top:1px solid var(--line);
  margin-top:32px
}
.philosophy .prose {
  margin:auto
}
.mindful-mark {
  display:inline-grid;
  place-items:center;
  font-size:2rem;
  width:70px;
  height:70px;
  border:1px solid #9dbccf;
  border-radius:50%;
  margin-bottom:26px;
  color:var(--blue)
}
.final-cta {
  text-align:center;
  background:var(--paper);
  border-radius:32px;
  padding-inline:24px;
  margin-block:20px 56px
}
.final-cta .store-badges {
  justify-content:center
}
.final-cta h2 {
  margin-bottom:16px
}
footer {
  border-top:1px solid var(--line);
  text-align:center;
  padding-block:28px;
  font-size:.85rem
}
footer p:last-child {
  margin-bottom:0
}
footer a {
  display:inline-block;
  padding:8px 6px;
  text-underline-offset:4px
}
:focus-visible {
  outline:3px solid #976c15;
  outline-offset:5px
}
.skip-link {
  position:absolute;
  left:16px;
  top:-100px;
  padding:12px;
  background:white;
  z-index:2
}
.skip-link:focus {
  top:12px
}

@media(min-width:600px) {
  .feature-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .use-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .stats {
    padding:48px
  }
  .wrap {
    width:min(1120px,calc(100% - 64px))
  }
  
}

@media(min-width:900px) {
  .hero {
    padding-block:0 64px
  }
  .section {
    padding-block:80px
  }
  .feature-grid {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
  .feature-card:last-child {
    grid-column:span 2
  }
  .stats {
    grid-template-columns:1.15fr 1fr;
    align-items:center;
    padding:56px;
    gap:48px
  }
  .use-grid {
    grid-template-columns:repeat(4,minmax(0,1fr))
  }
  .intro {
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:64px
  }
  .intro .eyebrow {
    grid-column:1/-1
  }
  .intro h2 {
    margin-bottom:0
  }
  
}

@media(hover:hover) and (prefers-reduced-motion:no-preference) {
  .store-badges a:hover {
    transform:translateY(-3px)
  }
  
}

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }
  .stats-media.is-enhanced .stats-slide {
    grid-area:auto;
    opacity:1
  }

  
}

/* Real app screenshots: manual gallery, isolated from the statistics slideshow. */
.visually-hidden {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0
}
.app-gallery-heading { max-width:720px; margin-bottom:32px }
.app-gallery-heading h2 { margin-bottom:16px }
.app-gallery-heading > p { font-size:1.1rem; margin-bottom:0 }
.app-gallery-stage {
  padding:28px 20px 20px;
  border:1px solid var(--line);
  border-radius:32px;
  background:var(--paper)
}
.app-gallery-slide { display:grid; gap:24px; min-width:0 }
.app-gallery-slide[hidden], .app-gallery-controls[hidden] { display:none }
.app-gallery-copy { min-height:260px; align-self:center }
.app-gallery-copy .eyebrow { margin-bottom:16px }
.app-gallery-copy h3 { font-size:clamp(1.65rem,3vw,2.4rem); max-width:440px; margin-bottom:18px }
.app-gallery-copy > p:last-child { max-width:440px; font-size:1.05rem; margin-bottom:0 }
.app-gallery-media { min-width:0; text-align:center; touch-action:pan-y pinch-zoom }
.app-gallery-zoom {
  display:block;
  width:max-content;
  max-width:100%;
  margin-inline:auto;
  padding:0;
  border:0;
  border-radius:18px;
  background:transparent;
  color:inherit;
  cursor:zoom-in;
  box-shadow:0 12px 32px #18374a18
}
.app-gallery-zoom img {
  display:block;
  width:auto;
  height:min(430px,60svh);
  max-width:100%;
  object-fit:contain;
  border-radius:18px
}
.app-gallery-hint { margin:14px 0 0; font-size:.8rem; color:var(--muted) }
.app-gallery-controls { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:24px }
.app-gallery-arrow, .app-gallery-dot, .app-lightbox-close { font:inherit; cursor:pointer; color:var(--blue) }
.app-gallery-arrow { width:44px; height:44px; flex-shrink:0; background:transparent; border:1px solid var(--line); border-radius:50%; font-size:1.4rem }
.app-gallery-dots { display:flex; align-items:center }
.app-gallery-dot { display:grid; place-items:center; width:28px; height:44px; padding:0; border:0; background:transparent }
.app-gallery-dot span { width:7px; height:7px; border-radius:50%; background:#a5bfce; transition:background .15s ease }
.app-gallery-dot[aria-current="true"] span { background:var(--blue); box-shadow:0 0 0 4px #23639919 }
.app-gallery-arrow:hover { background:#e4eff7 }
.app-gallery.is-ready .app-gallery-slide:not([hidden]) { animation:app-gallery-reveal .22s ease }
@keyframes app-gallery-reveal { from { opacity:.4 } to { opacity:1 } }
.app-gallery-lightbox { width:min(760px,calc(100% - 24px)); max-height:calc(100dvh - 24px); padding:0; border:1px solid var(--line); border-radius:24px; background:var(--paper); color:var(--ink) }
.app-gallery-lightbox::backdrop { background:#102b40bf }
.app-lightbox-panel { padding:16px }
.app-lightbox-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:12px }
.app-lightbox-toolbar p { color:var(--ink); font-weight:600; margin:0 }
.app-lightbox-close { flex-shrink:0; width:44px; height:44px; border:1px solid var(--line); border-radius:50%; background:transparent; font-size:1.7rem }
.app-lightbox-image { display:block; width:100%; height:auto; max-height:calc(100dvh - 130px); object-fit:contain; margin:auto }
body.app-lightbox-open { overflow:hidden }
@media(min-width:600px) {
  .app-gallery-stage { padding:40px 32px 24px }
  .app-gallery-copy { min-height:210px }
}
@media(min-width:900px) {
  .app-gallery-stage { padding:48px 56px 32px }
  .app-gallery-slide { grid-template-columns:1.15fr 1fr; align-items:center; gap:64px }
  .app-gallery-copy { min-height:290px }
  .app-gallery-zoom img { height:570px }
  .app-gallery-controls { justify-content:flex-start; margin-top:20px }
}
@media(prefers-reduced-motion:reduce) {
  .app-gallery.is-ready .app-gallery-slide:not([hidden]) { animation:none }
  .app-gallery-dot span { transition:none }
}

@media(max-width:360px) {
  .app-gallery-copy { min-height:310px }
}
@media(max-width:405px) {
  .app-gallery-dots { display:grid; grid-template-columns:repeat(4,28px); justify-content:center }
}