/* Manrope, self-hosted because the site's security policy only loads
   fonts from its own origin. One variable file covers every weight from
   200 to 800 for Latin text. SIL Open Font License. */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/fonts/manrope-latin.woff2") format("woff2");
}

/* Evenground: home page only. Loaded after style.css, and every rule is
   scoped to the home page's own classes, so the support and privacy pages
   are untouched by anything here.

   The page is a landscape: a cream sky with the screenshots fanned across
   it, then the same sage hills the screenshots end on, rolling the full
   width of the window into a green band that holds the features. */

.home {
  --serif: ui-serif, "New York", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --hill-back: #cdd4b6;
  --hill-front: #a9b595;
  --band-ink: #24301f;
  --band-muted: #3c4834;
  --icon-bg: #f4f1e8;
  --shot-shadow:
    0 1px 2px rgba(60, 50, 30, 0.06),
    0 24px 48px -18px rgba(60, 50, 30, 0.30);
}

/* The fanned side screenshots may reach past a narrow screen's edge;
   clip that rather than let the page scroll sideways. */
body.home { overflow-x: clip; }

.container {
  width: 100%; max-width: 76rem; margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 56px);
}

.home .label {
  margin: 0;
  font-size: 0.76rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent-deep);
}

/* ── Top bar ─────────────────────────────────────────────────── */

.topbar-home {
  display: flex; align-items: center; justify-content: space-between;
  height: 84px;
}
.topbar-home__left { display: flex; align-items: center; gap: 6px; }
.lockup--small { justify-content: flex-start; gap: 9px; text-decoration: none; }
.lockup--small .hills { height: 22px; }
.lockup--small .logo  { height: 17px; }
.topbar-home__nav { display: flex; gap: 30px; font-size: 0.93rem; }
.topbar-home__nav a { color: var(--muted); text-decoration: none; transition: color 0.2s ease; }
.topbar-home__nav a:hover { color: var(--ink); }

.menu-btn {
  display: none; align-items: center; justify-content: center;
  width: 42px; height: 42px; margin-left: -10px; padding: 0;
  border: 0; border-radius: 12px; background: transparent;
  color: var(--ink); cursor: pointer;
  transition: background 0.2s ease;
}
.js .menu-btn { display: inline-flex; }
.menu-btn:hover { background: var(--card); }

/* ── Hero ────────────────────────────────────────────────────── */

.hero-split {
  display: grid; grid-template-columns: 1fr 1.08fr; align-items: center;
  gap: clamp(24px, 4vw, 64px);
  min-height: min(calc(100vh - 84px), 700px);
  padding-top: 8px; padding-bottom: 16px;
}
.eyebrow {
  margin: 0 0 18px;
  font-size: 0.76rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent-deep);
}
.display {
  margin: 0;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.7rem, 5.6vw, 4.6rem);
  line-height: 1.04; letter-spacing: -0.025em;
  color: var(--ink);
}
.display em { font-style: italic; color: var(--accent-deep); }
.lede {
  max-width: 29rem; margin: 22px 0 0;
  font-size: 1.12rem; line-height: 1.6; color: var(--muted);
}
.cta { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 20px; margin-top: 34px; }
.cta__store { display: inline-block; line-height: 0; border-radius: 10px; transition: transform 0.25s ease; }
.cta__store:hover { transform: translateY(-2px); }
.cta__store img { width: 160px; height: auto; }
.cta__note { font-size: 0.88rem; color: var(--muted); }

/* The Android button, the same size and shape as the App Store badge beside
   it. Not out yet: a tap swaps the label for "Coming soon" for a moment. */
.cta__android {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  width: 160px; height: 53px; padding: 0 14px;
  border: 1px solid #a6a6a6; border-radius: 10px;
  background: #000; color: #fff;
  font: inherit; cursor: pointer; text-align: left;
  transition: transform 0.25s ease;
}
.cta__android:hover { transform: translateY(-2px); }
.cta__android:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.cta__android svg { flex: none; }
.cta__android-label { display: flex; flex-direction: column; line-height: 1.05; }
.cta__android-label small { font-size: 0.66rem; letter-spacing: 0.02em; }
.cta__android-label b { font-size: 1.28rem; font-weight: 600; letter-spacing: -0.01em; }
.cta__android-soon {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 9px; background: #000;
  font-size: 1rem; font-weight: 600;
  opacity: 0; transition: opacity 0.2s ease;
}
.cta__android.is-soon .cta__android-soon { opacity: 1; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* The three screenshots, fanned like cards held in a hand. The fan
   unfolds once on load, then the whole hand drifts very slowly. */
.fan {
  position: relative; height: clamp(460px, 46vw, 640px);
  animation: drift 3s ease-in-out 1.2s 1 both;
}
.fan img {
  position: absolute; left: 50%; top: 50%;
  width: 44%; height: auto;
  translate: -50% -50%;
  border-radius: 22px;
  box-shadow: var(--shot-shadow);
  transform-origin: 50% 85%;
  transition: transform 0.5s cubic-bezier(.2,.8,.2,1);
}
.fan__l { transform: translateX(-62%) rotate(-9deg) scale(0.92); z-index: 1; animation: fan-in 1s cubic-bezier(.2,.8,.2,1) 0.15s backwards; }
.fan__r { transform: translateX(62%) rotate(9deg) scale(0.92);  z-index: 1; animation: fan-in 1s cubic-bezier(.2,.8,.2,1) 0.15s backwards; }
.fan__c { transform: translateY(-2%); z-index: 2; animation: rise 0.9s cubic-bezier(.2,.8,.2,1) backwards; }

@media (hover: hover) {
  .fan:hover .fan__l { transform: translateX(-72%) rotate(-12deg) scale(0.92); }
  .fan:hover .fan__r { transform: translateX(72%) rotate(12deg) scale(0.92); }
  .fan:hover .fan__c { transform: translateY(-4%) scale(1.02); }
}

@keyframes fan-in { from { transform: none; opacity: 0; } }
@keyframes rise   { from { transform: translateY(6%); opacity: 0; } }
@keyframes drift  { to { translate: 0 -10px; } }

/* ── About & Note: label on the left, words on the right ─────── */

.split {
  display: grid; grid-template-columns: minmax(140px, 1fr) 3fr;
  gap: 24px clamp(24px, 5vw, 72px);
  padding-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(48px, 6vw, 88px);
}
.split__label { padding-top: 10px; }
.lead-serif {
  margin: 0; max-width: 46rem;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.32;
  letter-spacing: -0.01em; color: var(--ink);
}
.split__cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px 40px;
  margin-top: 34px; max-width: 46rem;
}
.split__cols p { margin: 0; color: var(--muted); line-height: 1.7; }
.split--note { padding-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(40px, 5vw, 64px); }
.split--note .split__label { padding-top: 4px; }
.split--note p { margin: 0; max-width: 46rem; font-size: 1.05rem; line-height: 1.7; color: var(--ink); }

/* ── Hills and the band ──────────────────────────────────────── */

.hills-edge { display: block; width: 100%; height: clamp(70px, 10vw, 150px); }
.hills-edge__back  { fill: var(--hill-back); }
.hills-edge__front { fill: var(--hill-front); }
.hills-edge--out { height: clamp(46px, 7vw, 100px); background: var(--bg); }
.hills-edge--out path { fill: var(--hill-front); }

.band {
  background: var(--hill-front); color: var(--band-ink);
  padding: clamp(16px, 3vw, 36px) 0 clamp(48px, 6vw, 80px);
  margin-top: -1px; margin-bottom: -1px;
}
.label--band { color: var(--band-muted); }

.features {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 40px clamp(24px, 3vw, 48px);
  margin-top: 36px;
}
.feature__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; margin: 0 0 20px;
  border-radius: 50%; background: var(--icon-bg); color: var(--accent-deep);
  box-shadow: 0 6px 16px -8px rgba(40, 50, 30, 0.35);
  transition: transform 0.35s cubic-bezier(.2,.8,.2,1);
}
.feature__icon svg { display: block; }
.feature h3 {
  margin: 0 0 10px;
  font-family: var(--serif); font-weight: 400;
  font-size: 1.35rem; line-height: 1.25; letter-spacing: -0.01em;
  color: var(--band-ink);
}
.feature p { margin: 0; font-size: 0.95rem; line-height: 1.65; color: var(--band-muted); }

@media (hover: hover) {
  .feature:hover .feature__icon { transform: translateY(-4px) rotate(-8deg); }
}

/* Entrance, only when site.js runs and motion is welcome: each feature
   rises in turn and its icon draws itself. */
.reveal-on .feature {
  opacity: 0; translate: 0 22px;
  transition: opacity 0.8s ease var(--d, 0s), translate 0.8s cubic-bezier(.2,.7,.2,1) var(--d, 0s);
}
.reveal-on .feature.is-in { opacity: 1; translate: 0 0; }
.reveal-on .feature:nth-child(2) { --d: 0.1s; }
.reveal-on .feature:nth-child(3) { --d: 0.2s; }
.reveal-on .feature:nth-child(4) { --d: 0.3s; }
.reveal-on .feature__icon svg * {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.3s ease calc(var(--d, 0s) + 0.3s);
}
.reveal-on .feature.is-in .feature__icon svg * { stroke-dashoffset: 0; }

/* ── Footer ──────────────────────────────────────────────────── */

.foot {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 18px 32px;
  margin: 0 auto; padding-top: 28px; padding-bottom: 48px;
  border-top: 0; font-size: 0.88rem;
  position: relative;
}
.foot::before {
  content: ""; position: absolute; top: 0;
  left: clamp(20px, 5vw, 56px); right: clamp(20px, 5vw, 56px);
  border-top: 1px solid var(--line);
}
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 26px; }
.foot a { color: var(--muted); text-decoration: none; }
.foot nav a:hover { color: var(--ink); text-decoration: underline; }

/* ── Menu drawer ─────────────────────────────────────────────── */

.menu-btn:focus-visible,
.drawer__close:focus-visible,
.home a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.drawer-backdrop {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(30, 28, 22, 0.28);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}
.drawer {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 50;
  width: min(340px, 86vw);
  display: flex; flex-direction: column;
  padding: 22px 24px 28px;
  background: var(--bg);
  border-radius: 0 24px 24px 0;
  box-shadow: 24px 0 60px -20px rgba(30, 28, 22, 0.35);
  translate: -104% 0; visibility: hidden;
  transition: translate 0.45s cubic-bezier(.2,.8,.2,1), visibility 0s linear 0.45s;
  overflow-y: auto;
}
.menu-open .drawer-backdrop { opacity: 1; visibility: visible; transition: opacity 0.35s ease; }
.menu-open .drawer { translate: 0 0; visibility: visible; transition: translate 0.45s cubic-bezier(.2,.8,.2,1); }
.menu-open body { overflow: hidden; }

.drawer__top { display: flex; align-items: center; justify-content: space-between; }
.drawer__close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-right: -8px; padding: 0;
  border: 0; border-radius: 10px; background: transparent;
  color: var(--muted); cursor: pointer;
}
.drawer__close:hover { background: var(--card); color: var(--ink); }

.drawer__nav { display: flex; flex-direction: column; margin: 44px 0 0; }
.drawer__nav a {
  padding: 12px 0;
  font-family: var(--serif); font-size: 1.7rem; font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--ink); text-decoration: none;
  opacity: 0; translate: -12px 0;
  transition: opacity 0.4s ease, translate 0.4s ease, color 0.2s ease;
}
.drawer__nav a:hover { color: var(--accent-deep); }
.menu-open .drawer__nav a { opacity: 1; translate: 0 0; }
.menu-open .drawer__nav a:nth-child(1) { transition-delay: 0.10s, 0.10s, 0s; }
.menu-open .drawer__nav a:nth-child(2) { transition-delay: 0.16s, 0.16s, 0s; }
.menu-open .drawer__nav a:nth-child(3) { transition-delay: 0.22s, 0.22s, 0s; }
.menu-open .drawer__nav a:nth-child(4) { transition-delay: 0.28s, 0.28s, 0s; }

/* A small hill range at the foot of the drawer, echoing the page. */
.drawer__foot { margin-top: auto; padding-top: 36px; }
.drawer__store { display: inline-block; line-height: 0; border-radius: 8px; }
.drawer__store img { width: 135px; height: auto; }
.drawer__mail {
  display: block; margin-top: 16px;
  font-size: 0.88rem; color: var(--muted); text-decoration: none;
}
.drawer__mail:hover { color: var(--accent-deep); text-decoration: underline; }

/* ── Policy pages ────────────────────────────────────────────── */

/* A long document laid out wide: a list of sections that stays in view
   on the left, the text in a comfortable column on the right, and the
   disclaimer closing the page on the same sage band as the home page. */
.display--page { font-size: clamp(2.4rem, 5vw, 4rem); }
.policy-head { padding-top: clamp(28px, 5vw, 64px); padding-bottom: 8px; }
.policy-head__meta { margin: 14px 0 0; font-size: 0.9rem; color: var(--muted); }
.policy-head__intro { margin-top: 30px; max-width: 50rem; font-size: clamp(1.25rem, 2.1vw, 1.65rem); }

.policy {
  display: grid; grid-template-columns: minmax(200px, 1fr) 3fr;
  gap: 0 clamp(24px, 5vw, 72px);
  padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(48px, 6vw, 80px);
}
.toc { position: sticky; top: 28px; align-self: start; }
.toc ol { list-style: none; margin: 16px 0 0; padding: 0; counter-reset: toc; }
.toc li { margin: 0; counter-increment: toc; }
.toc a {
  display: flex; gap: 12px; padding: 6px 0;
  font-size: 0.9rem; line-height: 1.4;
  color: var(--muted); text-decoration: none;
  transition: color 0.2s ease;
}
.toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-size: 0.75rem; padding-top: 2px; color: var(--accent); min-width: 1.4em;
  font-variant-numeric: tabular-nums;
}
.toc a:hover,
.toc a[aria-current="true"] { color: var(--ink); }
.toc a[aria-current="true"]::before { color: var(--accent-deep); }

.prose { max-width: 44rem; }
.prose section { scroll-margin-top: 24px; padding-bottom: 12px; }
.prose section + section { margin-top: 44px; padding-top: 44px; border-top: 1px solid var(--line); }
.prose h2 {
  display: flex; align-items: baseline; gap: 14px;
  margin: 0 0 18px;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.5rem, 2.4vw, 1.9rem); line-height: 1.2; letter-spacing: -0.015em;
}
.prose h2 .num {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em;
  color: var(--accent-deep);
}
.prose h3 {
  margin: 30px 0 10px;
  font-size: 0.76rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-deep);
}
.prose p, .prose li { font-size: 1.02rem; line-height: 1.75; color: var(--ink); }
.prose p { margin: 0 0 16px; }
.prose ul { list-style: none; padding: 0; margin: 6px 0 18px; }
.prose li { position: relative; margin: 0 0 10px; padding-left: 26px; }
.prose li::before {
  content: ""; position: absolute; left: 4px; top: 0.72em;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); opacity: 0.7;
}
.prose a { color: var(--accent-deep); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover { text-decoration-thickness: 2px; }
.contact-line { font-size: 1.1rem; }

.band--closing { padding-bottom: clamp(40px, 5vw, 64px); }
.closing {
  display: grid; grid-template-columns: minmax(200px, 1fr) 3fr;
  gap: 16px clamp(24px, 5vw, 72px);
}
.closing p { max-width: 44rem; margin: 0 0 12px; color: var(--band-ink); line-height: 1.7; }
.closing .label { padding-top: 5px; }

/* ── Support page ────────────────────────────────────────────── */

/* The emergency line opens the page as plain words, the urgent part bold. */
.page-intro { max-width: 46rem; margin: 26px 0 0; }

/* Contact: the words on the left, the form in its own card on the right. */
.contact {
  display: grid; grid-template-columns: 1fr 1.15fr; align-items: start;
  gap: 40px clamp(32px, 6vw, 88px);
  padding-top: clamp(48px, 7vw, 88px); padding-bottom: clamp(48px, 6vw, 80px);
}
.contact__lead { margin-top: 18px; font-size: clamp(1.35rem, 2.3vw, 1.8rem); }
.contact__aside { margin: 18px 0 0; color: var(--muted); }
.contact__email { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); }
.contact__email p { margin: 12px 0 0; line-height: 1.7; }

.form-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 24px; padding: clamp(22px, 3vw, 34px);
  box-shadow: 0 1px 2px rgba(60, 50, 30, 0.04), 0 24px 48px -28px rgba(60, 50, 30, 0.22);
}
.form-card .field textarea,
.form-card .field input { background: var(--bg); }
.form-card .cf-turnstile { margin: 4px 0 18px; min-height: 65px; }
.form-card button.send { padding: 12px 28px; border-radius: 999px; }
.form-card__foot {
  margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line);
  font-size: 0.9rem; color: var(--muted);
}
.form-card__foot p { margin: 0 0 8px; line-height: 1.6; }
.form-card__foot p:last-child { margin: 0; }

/* FAQ: questions that open in place, on the sage band. */
.faq-wrap {
  display: grid; grid-template-columns: minmax(200px, 1fr) 3fr;
  gap: 20px clamp(24px, 5vw, 72px);
}
.faq-wrap .label { padding-top: 22px; }
.faq details { border-bottom: 1px solid rgba(36, 48, 31, 0.16); }
.faq summary {
  position: relative; list-style: none; cursor: pointer;
  padding: 20px 48px 20px 0;
  font-family: var(--serif); font-size: clamp(1.15rem, 1.8vw, 1.35rem);
  line-height: 1.35; color: var(--band-ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%;
  width: 26px; height: 26px; margin-top: -13px; border-radius: 50%;
  background:
    linear-gradient(var(--band-ink), var(--band-ink)) center / 11px 1.6px no-repeat,
    linear-gradient(var(--band-ink), var(--band-ink)) center / 1.6px 11px no-repeat,
    var(--icon-bg);
  transition: transform 0.35s cubic-bezier(.2,.8,.2,1);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--band-ink); opacity: 0.85; }
.faq summary:focus-visible { outline: 2px solid var(--band-ink); outline-offset: 4px; border-radius: 6px; }
.faq__a { padding: 0 48px 22px 0; }
.faq__a p { margin: 0 0 12px; line-height: 1.7; color: var(--band-muted); }
.faq__a p:last-child { margin-bottom: 0; }
.faq__a a { color: var(--band-ink); }
.faq__a strong, .faq__a em { color: var(--band-ink); }

/* Where the browser can animate an opening <details>, let it ease open. */
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .faq details::details-content {
    height: 0; overflow: clip;
    transition: height 0.4s cubic-bezier(.2,.8,.2,1), content-visibility 0.4s allow-discrete;
  }
  .faq details[open]::details-content { height: auto; }
}

.split--note .split__body p + p { margin-top: 12px; }

/* ── Breathe page ────────────────────────────────────────────── */

/* The app's breathing circle, laid out for the web: what to breathe for on
   the left, the circle on the right. The disc holds still and carries the
   word to follow; three sage rings grow on the in-breath. breathe.js sets
   their scale each frame. */
.breathe {
  display: grid; grid-template-columns: minmax(260px, 1fr) 1.25fr;
  gap: 40px clamp(32px, 6vw, 88px); align-items: start;
  padding-top: clamp(32px, 5vw, 56px); padding-bottom: clamp(40px, 6vw, 72px);
}
.breathe__options { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.breathe__option {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  width: 100%; min-height: 56px; padding: 12px 16px;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--card); color: var(--ink);
  font: inherit; text-align: left; cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.breathe__option:hover { border-color: var(--accent); }
.breathe__option:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.breathe__option[aria-checked="true"] { /* kept for older cached script */
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--card));
}
.breathe__reason { font-family: var(--serif); font-size: 1.15rem; line-height: 1.25; }
.breathe__meta { font-size: 0.85rem; color: var(--muted); }

.breathe__stage { display: flex; flex-direction: column; align-items: center; }

.orb {
  position: relative;
  width: clamp(240px, 70vw, 360px); aspect-ratio: 1;
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.orb--pace { cursor: pointer; }
.orb__ring {
  position: absolute; inset: 0; border-radius: 50%;
  background: var(--accent);
  will-change: transform;
}
.orb__ring--3 { opacity: 0.20; transform: scale(0.68); }
.orb__ring--2 { opacity: 0.30; transform: scale(0.62); }
.orb__ring--1 { opacity: 0.40; transform: scale(0.56); }
/* Eases back to rest when stopped; while running, breathe.js moves it. */
.orb:not(.orb--running) .orb__ring { transition: transform 0.8s ease, opacity 0.8s ease; }
.orb__disc {
  position: absolute; inset: 25.5%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--card);
  box-shadow: 0 1px 2px rgba(60, 50, 30, 0.06), 0 12px 30px -14px rgba(60, 50, 30, 0.30);
  text-align: center;
}
.orb__label {
  font-family: var(--serif); font-size: clamp(1.05rem, 2.6vw, 1.35rem);
  line-height: 1.2; color: var(--ink); padding: 0 10px;
}
.orb__count {
  margin-top: 2px; min-height: 1.3em;
  font-size: 0.95rem; font-variant-numeric: tabular-nums; color: var(--muted);
}

.breathe__status {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.breathe__controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; }
.breathe__btn {
  min-height: 46px; padding: 0 26px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--ink);
  font: inherit; font-weight: 600; cursor: pointer;
}
.breathe__btn:hover { border-color: var(--accent); }
.breathe__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.breathe__btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; min-width: 140px; }
.breathe__btn--primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.breathe__btn[hidden] { display: none; }

.breathe__about { max-width: 30rem; margin-top: 28px; text-align: center; }
.breathe__name { margin: 0 0 6px; font-family: var(--serif); font-weight: 400; font-size: 1.3rem; }
.home .breathe__why { margin: 0; color: var(--ink); }

/* "From the App": the bridge from the sample to the real thing. */
.from-app .about-more { max-width: 40rem; }
.from-app__cta { margin-top: 26px; }

@media (max-width: 860px) {
  .breathe { grid-template-columns: 1fr; }
  .from-app__cta { justify-content: flex-start; }
  .breathe__stage { order: -1; }
}

@media (prefers-color-scheme: dark) {
  .breathe__btn--primary { color: var(--bg); }
}

/* ── Smaller screens ─────────────────────────────────────────── */

@media (max-width: 1000px) {
  .features { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .topbar-home { height: 68px; }
  .topbar-home__nav { display: none; }
  .hero-split {
    grid-template-columns: 1fr; min-height: 0;
    text-align: center; padding-top: 28px; padding-bottom: 24px;
  }
  .hero-split__text { display: flex; flex-direction: column; align-items: center; }
  .cta { justify-content: center; }
  .fan { height: clamp(380px, 110vw, 560px); margin-top: 8px; }
  .fan img { width: 46%; }
  .split { grid-template-columns: 1fr; }
  .split__label { padding-top: 0; }
  .split__cols { grid-template-columns: 1fr; margin-top: 24px; }
  .policy, .closing, .contact, .faq-wrap { grid-template-columns: 1fr; }
  .faq-wrap .label { padding-top: 0; }
  .toc { position: static; margin-bottom: 40px; padding: 20px 22px;
         background: var(--card); border: 1px solid var(--line); border-radius: 18px; }
}

@media (max-width: 560px) {
  .features { grid-template-columns: 1fr; gap: 34px; }
  .fan img { width: 50%; border-radius: 16px; }
  .fan__l { transform: translateX(-58%) rotate(-8deg) scale(0.9); }
  .fan__r { transform: translateX(58%) rotate(8deg) scale(0.9); }
  .foot { justify-content: center; text-align: center; }
  .foot nav { justify-content: center; }
}

/* ── Dark ────────────────────────────────────────────────────── */

@media (prefers-color-scheme: dark) {
  .home {
    --hill-back: #2c3227;
    --hill-front: #353e2f;
    --band-ink: #e6eadf;
    --band-muted: #b9c2ad;
    --icon-bg: #1f231c;
    --shot-shadow:
      0 1px 2px rgba(0, 0, 0, 0.4),
      0 24px 48px -18px rgba(0, 0, 0, 0.7);
  }
  .feature__icon { color: var(--accent-deep); box-shadow: none; }
  .faq details { border-bottom-color: rgba(230, 234, 223, 0.14); }
  .drawer-backdrop { background: rgba(0, 0, 0, 0.5); }
}

/* ── Stillness ───────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .fan, .fan img { animation: none !important; }
  .fan img, .feature__icon, .cta__store, .cta__android, .cta__android-soon, .faq summary::after { transition: none; }
  .faq details::details-content { transition: none !important; }
  .drawer, .drawer-backdrop, .drawer__nav a { transition: none !important; }
  .drawer__nav a { opacity: 1; translate: none; }
}

/* ── Type: one voice across every page ───────────────────────── */

/* Serif for what is read as a heading: titles, section headings, feature
   titles, FAQ questions and the large intro lines. Everything read as
   running text is the plain sans, at one size everywhere, with one smaller
   size for fine print. */
body.home {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --read: 1.02rem;
  --read-lh: 1.7;
  --small: 0.93rem;
}
.home p, .home li { font-size: var(--read); line-height: var(--read-lh); }

/* The exceptions, each named with .home so they outrank the rule above. */
.home .lede { font-size: 1.12rem; line-height: 1.6; }
.home .lead-serif { font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.32; }
.home .policy-head__intro { font-size: clamp(1.25rem, 2.1vw, 1.65rem); line-height: 1.4; }
.home .contact__lead { font-family: inherit; font-size: 1.1rem; line-height: 1.65; }
.home .eyebrow { font-size: 0.76rem; line-height: 1.4; }
.home .feature p { font-size: 0.95rem; line-height: 1.65; }
.home .faq__a p, .home .form-card__foot p, .home .closing p { font-size: var(--small); line-height: 1.7; }

.home .label, .eyebrow, .topbar-home__nav, .foot, .toc, .drawer__mail,
.cta__note, .policy-head__meta, .prose h2 .num,
.field, .field input, .field textarea, button.send, .formnote, #result {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.home .policy-head__meta, .cta__note { font-size: 0.88rem; }
.home .formnote { font-size: 0.85rem; line-height: 1.5; }

/* ── Section headings ────────────────────────────────────────── */

/* The headings that sit in the left column (About, Note, Contact Us…) and
   the sub-headings inside the text are serif headings now, in the same
   voice as the titles, rather than small capital labels. The eyebrows
   above each page title stay small: they are tags, not headings. */
.home .label {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.45rem, 2.2vw, 1.85rem); line-height: 1.2;
  letter-spacing: -0.015em; text-transform: none;
  color: var(--ink);
}
.home .label--band { color: var(--band-ink); }
.home .split__label,
.home .split--note .split__label,
.home .closing .label,
.home .faq-wrap .label { padding-top: 0; }
.home .faq-wrap .label { padding-top: 14px; }

/* Smaller places get a smaller heading of the same kind. */
.home .contact__email .label,
.home .toc .label { font-size: 1.3rem; }

.home .prose h3 {
  margin: 30px 0 10px;
  font-family: var(--serif); font-weight: 400;
  font-size: 1.3rem; line-height: 1.3;
  letter-spacing: -0.01em; text-transform: none;
  color: var(--ink);
}

/* ── Manrope for reading text ────────────────────────────────── */

/* Headings keep the serif. Everything read as running text, and the small
   working parts (labels, menus, buttons, form fields, fine print), uses
   Manrope: cleaner than the system sans, and calm beside the serif. */
.home {
  --sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
body.home { font-family: var(--sans); }
.home .eyebrow, .topbar-home__nav, .foot, .toc, .drawer__mail,
.cta__note, .policy-head__meta, .prose h2 .num,
.field, .field input, .field textarea, button.send, .formnote, #result {
  font-family: var(--sans);
}
.home .contact__lead { font-family: var(--sans); }

.home p, .home li { font-size: 1rem; }
.home .lede { font-size: 1.1rem; }
.home .feature p { font-size: 0.94rem; }
.home .eyebrow { letter-spacing: 0.14em; font-weight: 600; }

/* About's second paragraph, under the large intro. */
.home .about-more { max-width: 40rem; margin: 30px 0 0; color: var(--muted); }

/* ── Accessibility (WCAG 2.2 AA) ─────────────────────────────── */

/* A "Skip to content" link, the first thing a keyboard reaches on every
   page. Off-screen until it has focus. */
.skip-link {
  position: absolute; left: 12px; top: -100px; z-index: 100;
  padding: 10px 16px; border-radius: 10px;
  background: var(--ink); color: var(--bg);
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 12px; }
main:focus { outline: none; }

/* Text needs 4.5:1 against what is behind it. White on the sage accent is
   3.8:1, so filled buttons use the deeper green instead. */
button.send,
.breathe__btn--primary { background: #46593f; border-color: #46593f; color: #fff; }
button.send:hover,
.breathe__btn--primary:hover { background: #3a4a34; border-color: #3a4a34; }
.home { --band-muted: #36422f; }
.toc a::before { color: var(--accent-deep); }

/* Form fields need an edge with 3:1 contrast so you can see where to type. */
.field input,
.field textarea { border-color: #858a7d; }
.field [aria-invalid="true"] { border-color: #a5432f; border-width: 2px; }

@media (prefers-color-scheme: dark) {
  button.send,
  .breathe__btn--primary { background: var(--accent); border-color: var(--accent); color: var(--bg); }
  button.send:hover,
  .breathe__btn--primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
  .home { --band-muted: #b9c2ad; }
  .field input,
  .field textarea { border-color: #6e7168; }
  .field [aria-invalid="true"] { border-color: #e08a74; }
}

/* Breathe choices are toggle buttons now (aria-pressed). */
.breathe__option[aria-pressed="true"] {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--card));
}
.breathe__option[aria-pressed="true"] .breathe__meta { color: var(--accent-deep); }

/* The fanned side screenshot reached past a 320px-wide screen (the width of
   a page zoomed to 400%) and made the page scroll sideways. */
.hero-split { overflow-x: clip; }