/* Breathwood's own look: the app's dark colours (AppBackground, Surface, AccentColor, Honey),
   New York for titles and SF Rounded for text, as in the app. */
:root {
  --bg: #0e1a16;
  --bg-deep: #09130f;
  --surface: #15241e;
  --text: #f0f5f1;
  --text-2: #a3b5ab;
  --text-3: #7d9188;
  --sage: #8fcfae;
  --honey: #e2b45c;
  --hairline: rgb(255 255 255 / 0.09);
  --serif: ui-serif, "New York", "Iowan Old Style", Georgia, serif;
  --sans: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --content: 1080px;
  --gutter: max(20px, calc((100% - var(--content)) / 2));
  --space: clamp(96px, 13vw, 168px);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --scene-radius: 6.4% / 5.7%;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  interpolate-size: allow-keywords;
}

body {
  margin: 0;
  color: var(--text);
  font: 400 17px/1.5 var(--sans);
  letter-spacing: -0.008em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main { overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--sage); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
::selection { background: rgb(143 207 174 / 0.3); }
:focus-visible { outline: 2px solid var(--sage); outline-offset: 3px; border-radius: 6px; }

h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 600; text-wrap: balance; }
h1 { font-size: clamp(3rem, 8vw, 6.25rem); line-height: 1.02; letter-spacing: -0.024em; }
h2 { font-size: clamp(2.25rem, 5.4vw, 4.25rem); line-height: 1.05; letter-spacing: -0.02em; }
h3 { font-size: clamp(1.5rem, 2.2vw, 1.875rem); line-height: 1.15; letter-spacing: -0.012em; }
p { text-wrap: pretty; }
.center { text-align: center; }

/* Navigation */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 52px;
  padding-inline: var(--gutter);
  background: rgb(14 26 22 / 0.72);
  backdrop-filter: saturate(1.8) blur(20px);
  -webkit-backdrop-filter: saturate(1.8) blur(20px);
  border-bottom: 1px solid var(--hairline);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font: 600 1.1875rem/1 var(--serif);
  letter-spacing: -0.01em;
}

.brand:hover { text-decoration: none; }
.brand img { border-radius: 6px; }
.nav nav { display: flex; gap: clamp(16px, 3vw, 28px); font-size: 0.875rem; }
.nav nav a { color: var(--text-2); transition: color 0.2s; }
.nav nav a:hover { color: var(--text); text-decoration: none; }

/* Reveal on scroll (site.ts adds .in; without JavaScript nothing is hidden) */

.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }

/* Buttons */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  background: var(--sage);
  color: #0b1a14;
  font: 600 1.0625rem/1 var(--sans);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}

.button:hover { background: #a4dcbf; text-decoration: none; }
.button:active { transform: scale(0.98); }
.button.soon { background: rgb(255 255 255 / 0.08); color: var(--text); box-shadow: inset 0 0 0 1px var(--hairline); cursor: default; }
.button.soon:active { transform: none; }

/* Hero */

.hero { padding: clamp(56px, 8vw, 104px) var(--gutter) 0; text-align: center; }

.app-icon {
  width: clamp(88px, 9vw, 116px);
  margin: 0 auto 28px;
  border-radius: 22.5%;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08), 0 20px 50px -12px rgb(0 0 0 / 0.8), 0 0 90px -10px rgb(229 150 120 / 0.35);
}

.intro {
  max-width: 34rem;
  margin: 24px auto 0;
  color: var(--text-2);
  font-size: clamp(1.1875rem, 1.8vw, 1.4375rem);
  line-height: 1.42;
}

.cta { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 36px; }
.note { color: var(--text-3); font-size: 0.875rem; }

.phones {
  position: relative;
  isolation: isolate;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  height: clamp(440px, 56vw, 660px);
  margin-top: clamp(56px, 7vw, 88px);
  overflow: hidden;
  mask-image: linear-gradient(to bottom, #000 62%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent);
}

.phones::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 6%;
  width: min(860px, 96vw);
  aspect-ratio: 1.3;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgb(214 132 112 / 0.3), rgb(120 92 170 / 0.15) 55%, transparent);
  filter: blur(24px);
}

/* An iPhone: black bezel, a thin titanium edge, the screenshot with the screen's rounded corners. */
.phone {
  --w: 300px;
  position: relative;
  flex: none;
  width: var(--w);
  margin: 0;
  padding: calc(var(--w) * 0.03);
  border-radius: calc(var(--w) * 0.168);
  background: #040706;
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.2),
    inset 0 0 0 calc(var(--w) * 0.011) #2a312d,
    0 50px 100px -30px rgb(0 0 0 / 0.9);
}

.phone img { width: 100%; border-radius: calc(var(--w) * 0.138); }
.phones .phone { --w: clamp(270px, 30vw, 360px); }

/* Sections */

.section { padding: var(--space) var(--gutter) 0; }
.section.band { margin-top: var(--space); padding-bottom: var(--space); background: radial-gradient(70% 60% at 50% 62%, #123128, var(--bg-deep)); }
.head { max-width: 46rem; margin: 0 auto; text-align: center; }
.head.left { margin: 0; text-align: left; }
.eyebrow { margin: 0 0 14px; color: var(--sage); font-weight: 600; font-size: clamp(1.0625rem, 1.4vw, 1.25rem); }

.lede {
  max-width: 38rem;
  margin: 22px auto 0;
  color: var(--text-2);
  font-size: clamp(1.1875rem, 1.7vw, 1.375rem);
  line-height: 1.45;
}

.lede strong { color: var(--text); font-weight: 600; }
.head.left .lede { margin-left: 0; }

/* The growing tree */

.grow {
  display: grid;
  grid-template-columns: minmax(0, 500px) minmax(0, 340px);
  justify-content: center;
  align-items: center;
  gap: clamp(40px, 7vw, 96px);
  margin-top: clamp(48px, 6vw, 80px);
}

.grow-stage {
  position: relative;
  aspect-ratio: 1176 / 1320;
  border-radius: var(--scene-radius);
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--hairline), 0 40px 120px -40px rgb(130 200 230 / 0.35);
}

.grow-stage img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.5s ease; }
.grow-stage img.on { opacity: 1; }
.grow-name { margin: 0 0 32px; }
.grow-name strong { display: block; font: 600 clamp(2rem, 3.4vw, 2.75rem)/1.1 var(--serif); letter-spacing: -0.015em; }
.grow-name span { display: block; margin-top: 8px; color: var(--text-2); font-size: 1.1875rem; }

.grow input {
  --p: 85.7%;
  display: block;
  width: 100%;
  height: 28px;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.grow input::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--sage) var(--p), rgb(255 255 255 / 0.16) var(--p)); }
.grow input::-webkit-slider-thumb { width: 28px; height: 28px; margin-top: -12px; border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgb(0 0 0 / 0.45); -webkit-appearance: none; appearance: none; }
.grow input::-moz-range-track { height: 4px; border-radius: 2px; background: rgb(255 255 255 / 0.16); }
.grow input::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--sage); }
.grow input::-moz-range-thumb { width: 28px; height: 28px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgb(0 0 0 / 0.45); }

/* Zero-width labels spaced like the thumb's stops (its centre runs from 14px to the width minus 14px). */
.ticks { display: flex; justify-content: space-between; margin: 12px 14px 0; color: var(--text-3); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.ticks span { display: flex; justify-content: center; width: 0; white-space: nowrap; transition: color 0.3s; }
.ticks span.on { color: var(--text); font-weight: 600; }
.hint { margin: 28px 0 0; color: var(--text-3); font-size: 0.9375rem; }

/* Scene gallery: bleeds to the window's edge, snaps to the content column. */

.gallery {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(240px, 28vw, 330px);
  gap: 20px;
  margin: clamp(48px, 6vw, 72px) calc(-1 * var(--gutter)) 0;
  padding: 0 var(--gutter) 4px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}

.gallery::-webkit-scrollbar { display: none; }
.gallery figure { margin: 0; scroll-snap-align: start; }
.scene { width: 100%; aspect-ratio: 1176 / 1320; border-radius: var(--scene-radius); }
.gallery figcaption { margin-top: 14px; color: var(--text-2); font-size: 0.9375rem; font-weight: 600; }

.paddles { display: flex; justify-content: flex-end; gap: 14px; max-width: var(--content); margin: 28px auto 0; }
html:not(.js) .paddles { display: none; }

.paddles button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.1);
  color: var(--text);
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
}

.paddles button:hover:not(:disabled) { background: rgb(255 255 255 / 0.17); }
.paddles button:disabled { opacity: 0.3; cursor: default; }

/* Breathing */

.breathe {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: clamp(40px, 7vw, 104px);
  max-width: var(--content);
  margin: clamp(48px, 6vw, 80px) auto 0;
}

.pacer-wrap { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.pacer { position: relative; display: grid; place-items: center; width: min(420px, 100%); aspect-ratio: 1; }

.pacer .ring, .pacer .orb {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  transition: transform 4s cubic-bezier(0.37, 0, 0.63, 1), opacity 4s;
}

.pacer .ring { border: 1px solid rgb(143 207 174 / 0.3); transform: scale(0.7); }
.pacer .ring:nth-child(2) { transform: scale(0.65); opacity: 0.6; }
.pacer .ring:nth-child(3) { transform: scale(0.6); opacity: 0.35; }

.pacer .orb {
  transform: scale(0.56);
  background: radial-gradient(circle at 50% 36%, rgb(184 230 205 / 0.6), rgb(63 143 107 / 0.42) 58%, rgb(63 143 107 / 0.16));
  box-shadow: 0 0 90px 10px rgb(143 207 174 / 0.16);
}

.pacer.full .orb { transform: scale(0.86); }
.pacer.full .ring:nth-child(1) { transform: scale(1); }
.pacer.full .ring:nth-child(2) { transform: scale(0.95); }
.pacer.full .ring:nth-child(3) { transform: scale(0.9); }
.pacer:not(.running) .ring, .pacer:not(.running) .orb { transition-duration: 1.2s; }
.pacer p { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0; text-align: center; }
.phase-label { max-width: 9em; font: 600 clamp(1.25rem, 2.2vw, 1.75rem)/1.1 var(--serif); }
.phase-count { min-height: 1.5em; color: var(--text-2); font-size: 1.125rem; font-variant-numeric: tabular-nums; }

/* Lists of exercises and meditations */

.rows { margin: 0; padding: 0; list-style: none; }
.split .rows { margin-top: 40px; }

.rows li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 17px 0;
  border-top: 1px solid var(--hairline);
}

.rows li:last-child { border-bottom: 1px solid var(--hairline); }
.rows strong { display: block; color: var(--text); font-weight: 600; font-size: 1.0625rem; }
.rows li > span:first-child > span { color: var(--text-2); font-size: 0.9375rem; }
.breathe .rows strong { font: 600 1.375rem/1.25 var(--serif); }
.rhythm { color: var(--sage); font-size: 0.9375rem; font-variant-numeric: tabular-nums; text-align: right; }
.minutes { flex: none; color: var(--text-3); font-size: 0.9375rem; font-variant-numeric: tabular-nums; }

/* Copy beside a phone */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(48px, 8vw, 120px);
  max-width: var(--content);
  margin: 0 auto;
}

.visual { position: relative; isolation: isolate; display: flex; justify-content: center; }

.visual::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 10% -30%;
  background: radial-gradient(closest-side, rgb(63 143 107 / 0.28), transparent);
  filter: blur(20px);
}

.split .phone { --w: clamp(250px, 26vw, 310px); }

.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 44rem; margin: 40px auto 0; padding: 0; list-style: none; }

.chips li {
  padding: 9px 16px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.06);
  box-shadow: inset 0 0 0 1px var(--hairline);
  font-size: 0.9375rem;
}

/* Highlights */

.bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-flow: row dense;
  gap: 20px;
  max-width: var(--content);
  margin: clamp(48px, 6vw, 72px) auto 0;
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 250px;
  margin: 0;
  padding: clamp(28px, 3vw, 38px);
  overflow: hidden;
  border-radius: 28px;
  background: var(--surface);
}

.tile h3 { margin-bottom: 10px; }
.tile p { max-width: 30em; margin: 0; color: var(--text-2); font-size: 1.0625rem; }
.tile-free { grid-column: span 2; justify-content: flex-start; padding-bottom: 0; }
.tile-free img { width: calc(100% + 2 * clamp(28px, 3vw, 38px)); max-width: none; margin: 28px calc(-1 * clamp(28px, 3vw, 38px)) 0; aspect-ratio: 2 / 1; object-fit: cover; }
.tile-zero .big { margin: 0 0 6px; color: var(--sage); font: 600 clamp(5.5rem, 10vw, 8.5rem)/0.9 var(--serif); letter-spacing: -0.03em; }
.tile-zero p:last-child { color: var(--text); font-size: 1.25rem; }
.tile-progress { grid-row: span 2; justify-content: flex-start; padding-bottom: 0; }
.tile-progress .phone { --w: min(270px, 76%); align-self: center; margin: 36px 0 calc(var(--w) * -1.25); }

/* Closing */

.closing { position: relative; isolation: isolate; padding: calc(var(--space) * 1.2) var(--gutter) var(--space); text-align: center; }

.closing::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 30%;
  width: min(760px, 100vw);
  aspect-ratio: 1.6;
  transform: translate(-50%, -30%);
  background: radial-gradient(closest-side, rgb(214 132 112 / 0.18), rgb(120 92 170 / 0.08) 60%, transparent);
}

.closing .app-icon { width: clamp(104px, 11vw, 140px); }
.closing .button { margin-top: 36px; }

/* Footer */

.footer { padding: 24px var(--gutter) 40px; border-top: 1px solid var(--hairline); color: var(--text-3); font-size: 0.8125rem; line-height: 1.45; }
.footer p { max-width: 62rem; margin: 0 0 10px; }
.footer-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hairline); }
.footer-bar p { margin: 0; }
.footer nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.footer a { color: var(--text-2); }
.footer a:hover { color: var(--text); }

/* Privacy, support, 404 */

.prose { max-width: 46rem; margin: 0 auto; padding: clamp(56px, 8vw, 104px) 20px clamp(64px, 8vw, 104px); }
.prose h1 { margin-bottom: 20px; font-size: clamp(2.5rem, 6vw, 4rem); }
.prose h2 { margin: 56px 0 14px; font-size: clamp(1.5rem, 2.4vw, 1.875rem); }
.prose p, .prose li { color: var(--text-2); font-size: 1.0625rem; line-height: 1.6; }
.prose .lede { margin: 0; font-size: clamp(1.1875rem, 1.7vw, 1.375rem); line-height: 1.45; }
.prose strong { color: var(--text); font-weight: 600; }
.prose ul { padding-left: 1.25em; }
.prose li { margin: 8px 0; }
.prose li::marker { color: var(--text-3); }
.updated { color: var(--text-3); }
.contact { margin: 32px 0 0; }

.prose details { border-top: 1px solid var(--hairline); }
.prose details:last-of-type { border-bottom: 1px solid var(--hairline); }

.prose summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 22px 0;
  color: var(--text);
  font-size: 1.1875rem;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.prose summary::-webkit-details-marker { display: none; }

.prose summary::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(var(--text-2), var(--text-2)) center / 100% 1.5px no-repeat,
    linear-gradient(var(--text-2), var(--text-2)) center / 1.5px 100% no-repeat;
  transition: transform 0.35s var(--ease);
}

.prose details[open] summary::after { transform: rotate(45deg); }
.prose details p { margin: 0 0 24px; padding-right: 38px; }
.prose details::details-content { height: 0; overflow: hidden; transition: height 0.4s var(--ease), content-visibility 0.4s allow-discrete; }
.prose details[open]::details-content { height: auto; }

/* Narrower windows */

@media (max-width: 1068px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento .tile:last-child { grid-column: span 2; }
}

@media (max-width: 734px) {
  .nav nav { gap: 18px; }
  .nav nav a:nth-child(2) { display: none; }
  .grow, .breathe, .split { grid-template-columns: minmax(0, 1fr); }
  .grow-controls { text-align: center; }
  .split .visual { margin-top: 8px; }
  .breathe .rows { margin-top: 8px; }
  .bento { grid-template-columns: minmax(0, 1fr); }
  .tile-free, .tile-progress, .bento .tile:last-child { grid-column: auto; grid-row: auto; }
  .tile-progress .phone { margin-bottom: calc(var(--w) * -1.1); }
  .tile { min-height: 0; }
  .footer-bar { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal { transform: none; transition: opacity 0.6s linear; }
  .grow-stage img { transition: none; }
  .pacer .ring, .pacer .orb { transform: scale(0.7) !important; }
  .pacer .orb { opacity: 0.5; transition: opacity 1s; }
  .pacer.full .orb { opacity: 1; }
}