/* LIGHTER layout scratchpad: section colours and presentation only. */
:root{--bg:#000;--bg-2:#0a0b11;--card:rgba(255,255,255,.04);--card-line:rgba(255,255,255,.12);--ink:#eceef4;--muted:#a0a4b2;--faint:#777c8d;--button-ink:#1b2030;--button-bg:linear-gradient(90deg,#fff,#cdd5e6);--max:1220px;color-scheme:dark}
body{color:var(--ink);background:#000}
.section{padding:clamp(76px,9vw,126px) 0}.section-head{max-width:740px}.section-head h2{letter-spacing:-.035em}.eyebrow{letter-spacing:.16em}

/* Black navigation. */
.site-header{color:#eceef4;background:rgba(0,0,0,.96);border-bottom:1px solid rgba(255,255,255,.08);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.site-header .wordmark{color:#eceef4}.site-header .wordmark .by,.site-header .lumaria-mark{color:#9aa0b2}
.site-header .main-nav a,.site-header .header-link{color:#b0b4c3}.site-header .main-nav a:hover,.site-header .header-link:hover{color:#fff}
.site-header .header-download{background:linear-gradient(90deg,#fff,#cdd5e6);color:#1b2030}.site-header .nav-sub a{background:#151720}.site-header .menu-toggle{color:#eceef4}

/* Keep the centered hero from the first demo. */
.hero{max-width:none;min-height:min(calc(100svh - 72px),900px);margin:0;padding:clamp(68px,8vw,110px) var(--gutter) 98px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:0;text-align:center;overflow:hidden;background:radial-gradient(ellipse 34% 28% at 50% 32%,rgba(205,213,230,.08),transparent 78%),#000;color:#eceef4}
.hero-symbol{position:relative;inset:auto;top:auto;right:auto;grid-column:auto;grid-row:auto;width:clamp(220px,31vw,390px);max-width:100%;margin:0 auto clamp(26px,4vw,52px);translate:none;flex:none}
.hero-copy{grid-column:auto;grid-row:auto;max-width:680px;width:100%;justify-self:auto;z-index:1}
.hero h1{font-size:clamp(46px,6vw,78px);line-height:1.07;margin:14px auto 24px}.hero-intro{max-width:530px;margin:0 auto;line-height:1.65;color:#d4d5df}
.hero .eyebrow,.hero .launch-note{color:#b0b4c3}.hero .download-block{align-items:center;margin-top:34px;gap:34px}.hero .launch-note{margin-top:0}.hero .store-links{justify-content:center}
.hero .store-tile{color:#eceef4;background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.19)}.hero .store-tile small{color:#b0b4c3}
.hero-foot{justify-content:center;padding:0 var(--gutter);color:#8d91a1}

/* Open feature rows with the app's faint pools of light. */
#experience{background:radial-gradient(38% 24% at 18% 18%,rgba(205,213,230,.055),transparent 100%),radial-gradient(42% 26% at 82% 68%,rgba(205,213,230,.035),transparent 100%),#000}
.feature{gap:clamp(36px,6vw,90px);padding:0;border:0;border-radius:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;margin-bottom:clamp(68px,8vw,110px)}
.feature-art.feature-photo{width:100%;aspect-ratio:4/5;border:0;border-radius:22px;background:#171922;overflow:hidden}
.feature-photo img{width:100%;height:100%;max-height:none;object-fit:cover;filter:none}
.feature-copy{padding:0}.feature-copy h3{max-width:460px;letter-spacing:-.035em}.feature-copy p,.feature-copy .list{color:var(--muted)}.feature-copy .eyebrow{color:var(--faint)}
.feature .tag{border-color:rgba(255,255,255,.22);color:var(--muted)}.feature .tag:hover{color:var(--ink);border-color:var(--ink)}.patterns-line{color:var(--ink)!important}.platform-line{margin-top:38px}
.meditation-feature{margin-bottom:clamp(54px,7vw,88px)}
.patterns-info{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(36px,6vw,90px);padding-top:clamp(34px,5vw,60px);border-top:1px solid rgba(255,255,255,.15)}
.patterns-info h3{font-size:clamp(32px,3.6vw,46px);line-height:1.08;letter-spacing:-.035em;margin:14px 0 0;max-width:480px}
.patterns-info .eyebrow{color:var(--faint)}.patterns-info .tag{border-color:rgba(255,255,255,.22);color:var(--muted)}
.patterns-info .patterns-body>p,.patterns-info .list{color:var(--muted)}.patterns-info .list{margin-top:22px}

/* The try-it area uses a quiet, near-black app surface. */
#how{--ink:#eceef4;--muted:#9aa0b2;--faint:#777c8d;--card:rgba(255,255,255,.045);--card-line:rgba(255,255,255,.09);--button-bg:linear-gradient(90deg,#fff,#cdd5e6);--button-ink:#1b2030;color:var(--ink);background:radial-gradient(36% 28% at 50% 65%,rgba(205,213,230,.045),transparent 100%),#000}
#how .breathing-demo{background:#0c0d13;border:1px solid rgba(255,255,255,.13);border-radius:64px;padding:clamp(28px,4vw,56px);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}#how .steps-row li{background:none;border:0;padding:0}#how .demo-side .breath-instruction{color:var(--ink)}
#how .demo-row{gap:clamp(24px,4vw,64px)}
#how .demo-side{min-height:0;padding:0;border:0;border-radius:0;background:none;display:flex;flex-direction:column;justify-content:center;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
#how .demo-side h3,#how .demo-side .demo-explanation,#how .demo-side .breath-instruction,#how .demo-side .demo-timing,#how .demo-side .demo-controls,#how .demo-side .demo-completion{max-width:380px;width:100%;margin-left:auto;margin-right:auto}
#how .demo-side .demo-timing{border-top:1px solid rgba(255,255,255,.16);padding-top:12px}

/* Moonlight touches the yearly plan without changing the black canvas. */
#pricing{background:radial-gradient(ellipse 36% 28% at 50% 51%,rgba(188,206,239,.055),transparent 100%),#000}
#pricing .section-head{margin-bottom:clamp(38px,5vw,62px)}
.plans{gap:14px;align-items:stretch}
.plan{position:relative;overflow:hidden;padding:clamp(26px,3vw,38px);border:1px solid rgba(255,255,255,.13);border-radius:20px;background:#08090c;box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}
.plan.featured{border-color:rgba(192,211,244,.46);background:radial-gradient(ellipse 110% 58% at 52% -8%,rgba(182,204,241,.125),transparent 78%),#0a0c12;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.plan.featured:before{content:"";position:absolute;left:17%;right:17%;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(218,232,255,.72),transparent)}
.plan .eyebrow,.plan p,.plans-note{color:var(--muted)}.plan .price,.plan .price .amount{color:var(--ink)}.plan .price span{color:var(--muted)}
.plan .plan-list{margin-top:22px;color:var(--muted);font-size:15px;line-height:1.5;gap:12px}.plan .plan-list li:before{background:var(--ink);opacity:.55;transform:translateY(-1px)}
.plan.featured .plan-list li:before{background:#cdd9ef;opacity:.85}
.plans-note{margin-top:34px}.plans-note+.plans-note{margin-top:12px}
#faq{background:radial-gradient(36% 28% at 14% 15%,rgba(205,213,230,.045),transparent 100%),#000}.faq-list details,.faq-list details:last-child{border-color:rgba(255,255,255,.15)}.faq-list details>p{color:var(--muted)}

/* Science keeps its existing editorial cards, now on dark. */
#research{--ink:#eceef4;--muted:#9aa0b2;--faint:#777c8d;--card:rgba(255,255,255,.045);--card-line:rgba(255,255,255,.12);color:var(--ink);background:radial-gradient(40% 28% at 45% 25%,rgba(205,213,230,.06),transparent 100%),#000}
#research .section-head p:not(.eyebrow),#research .carousel .research article>p:not(.eyebrow),#research .research-takeaway p:not(.eyebrow){color:#a9adba}#research .carousel-btn{color:#c9cbd4}
.carousel.editorial .study-num{font-size:12px;line-height:1;letter-spacing:.2em;color:#969dad;opacity:1;margin-bottom:16px}
.carousel.editorial .research-image{width:100%;aspect-ratio:3/2;margin:0 0 24px;overflow:hidden;border-radius:12px;background:#050608;border:1px solid rgba(255,255,255,.08)}
.carousel.editorial .research-image img{display:block;width:100%;height:100%;object-fit:cover}
.carousel.editorial .research-image-symbol img{object-fit:contain}
#research .carousel.editorial{margin-bottom:0}
.research-footnote{max-width:660px;margin:20px auto 0;color:var(--faint);font-size:12px;line-height:1.55;text-align:center}

/* The closing and footer echo the opening. */
.closing{--ink:#eceef4;--muted:#9aa0b2;--faint:#717788;--card:rgba(255,255,255,.05);--card-line:rgba(255,255,255,.14);color:var(--ink);background:radial-gradient(38% 32% at 50% 30%,rgba(205,213,230,.075),transparent 100%),#000}
.closing .eyebrow,.closing p:not(.eyebrow){color:#a9adba}.closing .store-tile{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.17)}.closing .store-tile small{color:#a9adba}
.closing a.store-tile{transition:background .2s ease,border-color .2s ease}.closing a.store-tile:hover,.closing a.store-tile:focus-visible{background:rgba(205,213,230,.11);border-color:rgba(205,213,230,.48)}.closing a.store-tile:focus-visible{outline:2px solid #cdd5e6;outline-offset:3px}
.site-footer{--ink:#eceef4;--muted:#9aa0b2;--faint:#717788;color:var(--muted);background:#000;border-color:rgba(255,255,255,.14);display:grid;grid-template-columns:minmax(230px,1fr) max-content minmax(293px,1fr);column-gap:clamp(18px,3vw,48px);align-items:center}.site-footer .wordmark{color:var(--ink);font-size:38px}.site-footer .footer-head{color:#7f8595}
.site-footer .footer-brand{grid-column:1;grid-row:1;min-width:0}.site-footer .footer-cols{grid-column:2;grid-row:1;justify-self:center}
.site-footer .footer-tagline{font-size:11px;letter-spacing:.04em}
.footer-gif{grid-column:3;grid-row:1;justify-self:center;align-self:center;margin:0;padding:0}
.footer-gif picture{display:block;width:292.5px;max-width:100%}.footer-gif img{display:block;width:100%;height:auto}
@media(max-width:1150px){.site-footer{grid-template-columns:minmax(0,1fr) max-content}.site-footer .footer-cols{grid-column:2;justify-self:end}.footer-gif{grid-column:1/-1;grid-row:2;justify-self:center}}
@media(max-width:720px){.site-footer{grid-template-columns:1fr}.site-footer .footer-cols{grid-column:1;grid-row:2;justify-self:start;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}.footer-gif{grid-column:1;grid-row:3;justify-self:start}}

@media(max-width:820px){.hero{min-height:auto;padding-top:62px;padding-bottom:98px}.hero-symbol{position:relative;inset:auto;width:min(72vw,330px);margin-bottom:26px}.hero-copy{max-width:610px}.feature-art.feature-photo{aspect-ratio:5/4}.patterns-info{grid-template-columns:1fr;gap:18px}}
@media(max-width:650px){.site-header .main-nav{background:#0e1018}.site-header .main-nav a{border-color:rgba(255,255,255,.12)}.hero{padding:54px 24px 96px}.hero-symbol{width:min(70vw,270px);margin-bottom:24px}.hero h1{font-size:clamp(40px,11vw,58px)}.hero-intro{font-size:16px}.hero-foot{font-size:9px}.section{padding-top:72px;padding-bottom:72px}.feature-art.feature-photo{aspect-ratio:4/3}.feature-copy h3{font-size:36px}}
@media(max-width:650px){#how .breathing-demo{border-radius:42px;padding:28px 22px 36px}#how .demo-side h3{font-size:25px}#how .demo-side .demo-explanation{font-size:13px}#how .demo-side .breath-instruction{margin-top:20px}#how .demo-side .demo-controls{gap:10px}}

/* One continuous black canvas keeps the faint lights from ending at section edges. */
main{background:
  radial-gradient(ellipse 42% 8% at 50% 5%,rgba(205,213,230,.065),transparent 100%),
  radial-gradient(ellipse 38% 10% at 16% 27%,rgba(205,213,230,.045),transparent 100%),
  radial-gradient(ellipse 42% 9% at 85% 52%,rgba(188,206,239,.045),transparent 100%),
  radial-gradient(ellipse 40% 11% at 23% 75%,rgba(205,213,230,.05),transparent 100%),
  radial-gradient(ellipse 37% 7% at 50% 94%,rgba(205,213,230,.055),transparent 100%),#000}
.hero,#experience,#how,#pricing,#research,#faq,.closing{background:transparent}
.site-footer{background:#000}

/* The two Patterns screens sit to the left of their explanation. */
.patterns-info{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;gap:clamp(24px,5vw,72px)}
.patterns-copy{max-width:550px}
.patterns-copy .patterns-body{margin-top:26px}
.patterns-phone-wrap{display:grid;place-items:center;min-width:0}
.patterns-phones{display:block;width:min(100%,620px);height:auto;filter:drop-shadow(0 30px 48px rgba(0,0,0,.4))}

/* The supplied phone image contains its own broad black background. */
#how{isolation:isolate;min-height:clamp(650px,68vw,920px);overflow:hidden;background:#000;padding-top:clamp(76px,8vw,116px);padding-bottom:170px}
#how .quiet-phone{position:absolute;z-index:-1;top:0;left:50%;display:block;width:min(1000px,80vw);height:auto;max-width:none;transform:translateX(-50%);pointer-events:none}
#how .wrap{min-height:calc(clamp(650px,68vw,920px) - clamp(76px,8vw,116px) - 170px);display:flex;flex-direction:column;align-items:center;justify-content:flex-start}
#how .try-head{position:absolute;top:30%;left:var(--gutter);right:var(--gutter);max-width:none;width:auto;margin:0 auto;text-align:center;text-shadow:0 2px 25px #000,0 0 50px #000}
#how .try-head h2{max-width:none;margin:0 auto;font-size:clamp(15px,3.8vw,44px);white-space:nowrap}
#how .quiet-demo{position:relative;text-align:center;max-width:880px;margin:auto auto 0}
#how .quiet-actions{display:flex;align-items:center;justify-content:center;gap:20px}
#how .quiet-actions .button,.site-header .header-download{background:linear-gradient(135deg,#fff,#cbd5e9);color:#151a26;border:1px solid #fff;box-shadow:0 0 25px rgba(235,243,255,.32),0 0 80px rgba(235,243,255,.15);font-weight:500}
#how .quiet-actions .button{min-width:255px;justify-content:center;white-space:nowrap}
#how .quiet-actions .button:hover,.site-header .header-download:hover{background:linear-gradient(135deg,#fff,#dce6f6);box-shadow:0 0 32px rgba(235,243,255,.4),0 0 90px rgba(235,243,255,.2)}
#how .quiet-feedback{margin:20px auto 0;color:var(--ink);font-size:14px;text-shadow:0 1px 12px #000}
@media(max-width:820px){.patterns-info{grid-template-columns:1fr;gap:20px}.patterns-phone-wrap{grid-row:1}.patterns-copy{max-width:620px;margin:0 auto}.patterns-phones{width:min(100%,540px)}}
@media(max-width:650px){#how{min-height:660px;padding-top:78px;padding-bottom:90px}#how .wrap{min-height:492px}#how .quiet-phone{top:80px;width:min(520px,118vw)}.patterns-phones{width:min(100%,440px)}}
