@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Newsreader:ital,opsz,wght@1,6..72,500&display=swap');

:root {
    --ink: #193c35;
    --ink-soft: #49655e;
    --forest: #2f6f66;
    --forest-deep: #214f48;
    --sage: #dce9e1;
    --sage-pale: #eef5ef;
    --cream: #faf6ec;
    --paper: #fffdf7;
    --peach: #d97860;
    --sand: #dccfba;
    --line: rgba(47, 111, 102, .16);
    --shadow: 0 28px 70px rgba(38, 73, 64, .12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: "DM Sans", system-ui, sans-serif; line-height: 1.6; }
button, a { font: inherit; }
a { color: inherit; }
.page-shell { width: min(1160px, calc(100% - 48px)); margin-inline: auto; }

.site-header { width: min(1240px, calc(100% - 36px)); height: 76px; margin: 12px auto 0; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 10px; z-index: 20; background: rgba(250, 246, 236, .86); border: 1px solid rgba(255,255,255,.7); border-radius: 22px; backdrop-filter: blur(18px); box-shadow: 0 9px 30px rgba(33,79,72,.07); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-size: 19px; font-weight: 700; letter-spacing: -.04em; }
.brand-mark { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--forest); position: relative; }
.brand-mark::before, .brand-mark::after, .brand-mark span { content: ""; position: absolute; border: 1px solid var(--forest); border-radius: 50%; }
.brand-mark::before { inset: 6px; opacity: .65; }.brand-mark::after { inset: 11px; opacity: .4; }.brand-mark span { width: 5px; height: 5px; background: var(--peach); border: 0; }
nav { display: flex; gap: 30px; }
nav a { text-decoration: none; color: var(--ink-soft); font-size: 14px; font-weight: 600; }
nav a:hover { color: var(--peach); }
.header-cta { padding: 11px 17px; color: white; background: var(--ink); border-radius: 999px; text-decoration: none; font-size: 13px; font-weight: 700; }

.hero { min-height: 790px; padding-block: 96px 110px; display: grid; grid-template-columns: 1.04fr .8fr; gap: 90px; align-items: center; position: relative; }
.hero::before { content: ""; position: absolute; width: 520px; height: 520px; left: -260px; top: 80px; border: 1px solid var(--line); border-radius: 50%; box-shadow: 0 0 0 70px rgba(47,111,102,.025), 0 0 0 140px rgba(47,111,102,.018); pointer-events: none; }
.eyebrow { display: flex; align-items: center; gap: 10px; color: var(--forest); text-transform: uppercase; letter-spacing: .16em; font-size: 11px; font-weight: 700; }
.eyebrow span { width: 25px; height: 1px; background: var(--peach); }
h1, h2, h3, p { margin-top: 0; }
h1 { margin: 18px 0 25px; font-size: clamp(54px, 6vw, 82px); line-height: .98; letter-spacing: -.065em; font-weight: 600; }
h1 em, h2 em { font-family: "Newsreader", Georgia, serif; color: var(--peach); font-weight: 500; }
.hero-lede { max-width: 600px; color: var(--ink-soft); font-size: 18px; line-height: 1.75; }
.hero-actions { margin-top: 34px; display: flex; align-items: center; gap: 28px; }
.button { display: inline-flex; gap: 20px; align-items: center; padding: 15px 21px; border-radius: 999px; text-decoration: none; font-weight: 700; font-size: 14px; }
.button-primary { color: white; background: var(--peach); box-shadow: 0 12px 28px rgba(217,120,96,.23); }
.text-link { color: var(--forest); font-size: 14px; font-weight: 700; text-decoration: none; }
.hero-notes { margin-top: 48px; display: flex; flex-wrap: wrap; gap: 12px 24px; color: #657b75; font-size: 12px; }
.hero-notes span::before { content: "✓"; margin-right: 7px; color: var(--forest); }

.app-preview { width: min(100%, 445px); justify-self: end; padding: 24px 27px 26px; background: rgba(255,253,247,.92); border: 1px solid rgba(255,255,255,.9); border-radius: 38px; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.app-preview::after { content: ""; position: absolute; inset: auto -80px -90px auto; width: 220px; height: 220px; border-radius: 50%; background: rgba(201,222,213,.22); }
.preview-topline, .progress-meta { display: flex; justify-content: space-between; align-items: center; }
.preview-kicker { color: var(--peach); text-transform: uppercase; letter-spacing: .16em; font-size: 10px; font-weight: 700; }
.sound-on { color: #70827d; font-size: 11px; }.sound-on i { width: 6px; height: 6px; display: inline-block; margin-right: 5px; background: var(--forest); border-radius: 50%; box-shadow: 0 0 0 4px rgba(47,111,102,.1); }
.preview-title { margin-top: 8px; font-size: 24px; font-weight: 700; letter-spacing: -.04em; }
.guide-copy { min-height: 42px; margin: 8px auto 4px; max-width: 340px; text-align: center; color: var(--ink-soft); font-size: 12px; line-height: 1.45; }
.buddy-stage { width: 232px; height: 232px; margin: 0 auto; display: grid; place-items: center; position: relative; }
.buddy-stage img { width: 196px; height: 196px; object-fit: cover; border-radius: 50%; border: 5px solid white; box-shadow: 0 10px 30px rgba(39,79,70,.16); z-index: 2; animation: buddy-breathe 6s ease-in-out infinite; }
.breath-ring { position: absolute; border: 1px solid rgba(47,111,102,.18); border-radius: 50%; animation: ring-breathe 6s ease-in-out infinite; }.ring-one { inset: 5px; }.ring-two { inset: 25px; animation-delay: -.2s; }
.phase-pill { width: max-content; margin: -2px auto 14px; padding: 7px 15px; display: flex; gap: 8px; align-items: center; position: relative; z-index: 4; background: var(--forest-deep); border-radius: 999px; color: white; font-size: 13px; }
.phase-pill span { color: #bcd3ca; }.progress-meta { color: #647b74; font-size: 11px; }.progress-track { height: 5px; margin: 8px 0 17px; background: var(--sage); border-radius: 8px; overflow: hidden; }.progress-track span { width: 42%; height: 100%; display: block; background: var(--peach); border-radius: inherit; }
.preview-next { display: grid; grid-template-columns: auto 1fr 1fr; gap: 8px; align-items: center; position: relative; z-index: 2; }.preview-next small { color: #778982; text-transform: uppercase; font-weight: 700; }.preview-next span { padding: 7px 8px; border-radius: 9px; background: var(--sage-pale); color: var(--ink-soft); text-align: center; font-size: 10px; }

.purpose, .features { padding-block: 125px; }
.section-intro { max-width: 700px; }.section-intro h2 { margin: 16px 0 0; font-size: clamp(40px, 5vw, 62px); line-height: 1.05; letter-spacing: -.055em; }.section-intro.centered { margin-inline: auto; text-align: center; }.section-intro.centered .eyebrow { justify-content: center; }.section-intro.centered p { margin: 20px auto 0; max-width: 560px; color: var(--ink-soft); }
.purpose-grid { margin-top: 68px; display: grid; grid-template-columns: .72fr 1fr; gap: 100px; }.purpose-lede { font-family: "Newsreader", Georgia, serif; color: var(--forest); font-size: 31px; line-height: 1.42; }.purpose-points article { padding: 0 0 28px; margin-bottom: 28px; display: grid; grid-template-columns: 48px 1fr; gap: 15px; border-bottom: 1px solid var(--line); }.purpose-points b { color: var(--peach); font-size: 12px; }.purpose-points h3 { margin-bottom: 7px; font-size: 20px; }.purpose-points p { margin-bottom: 0; color: var(--ink-soft); font-size: 14px; }

.buddies-section { padding-block: 120px; background: #e7f0e9; overflow: hidden; position: relative; }.buddies-section::before { content: ""; position: absolute; width: 620px; height: 620px; right: -250px; top: -240px; border: 1px solid rgba(47,111,102,.1); border-radius: 50%; box-shadow: 0 0 0 70px rgba(255,255,255,.15); }.buddy-selector { margin-top: 58px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 13px; position: relative; }.buddy-choice { padding: 10px 10px 14px; border: 1px solid transparent; border-radius: 22px; background: rgba(255,255,255,.45); color: var(--ink); cursor: pointer; transition: .25s ease; }.buddy-choice:hover { transform: translateY(-4px); background: rgba(255,255,255,.75); }.buddy-choice.selected { background: var(--paper); border-color: rgba(47,111,102,.25); box-shadow: 0 14px 30px rgba(32,79,71,.1); transform: translateY(-6px); }.buddy-choice img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 15px; }.buddy-choice span, .buddy-choice small { display: block; }.buddy-choice span { margin-top: 10px; font-size: 12px; font-weight: 700; line-height: 1.25; }.buddy-choice small { margin-top: 3px; color: #72827d; font-size: 9px; }.buddy-quote { width: min(760px, 100%); min-height: 175px; margin: 38px auto 0; padding: 28px 56px; position: relative; text-align: center; border-top: 1px solid rgba(47,111,102,.16); }.buddy-quote .quote-mark { position: absolute; left: 12px; top: 7px; color: rgba(217,120,96,.35); font: 80px/1 Georgia, serif; }.buddy-quote p { margin-bottom: 9px; font-family: "Newsreader", Georgia, serif; font-size: clamp(23px,3vw,32px); line-height: 1.3; }.buddy-quote strong { color: var(--peach); font-size: 11px; text-transform: uppercase; letter-spacing: .13em; }

.feature-grid { margin-top: 60px; display: grid; grid-template-columns: 1.25fr .75fr; gap: 18px; }.feature-card { min-height: 280px; padding: 34px; position: relative; overflow: hidden; background: var(--paper); border: 1px solid rgba(47,111,102,.1); border-radius: 28px; box-shadow: 0 14px 40px rgba(42,75,67,.06); }.feature-card h3 { margin-bottom: 10px; font-size: 24px; letter-spacing: -.03em; }.feature-card p { color: var(--ink-soft); font-size: 14px; }.feature-large { grid-row: span 2; min-height: 580px; display: flex; flex-direction: column; justify-content: space-between; background: var(--forest-deep); color: white; }.feature-large p { max-width: 520px; color: #bed1cb; }.feature-number { color: #90afa6; font-size: 12px; }.sequence { margin-top: 30px; display: flex; align-items: center; gap: 9px; }.sequence span { padding: 15px 12px; flex: 1; color: var(--ink); background: #f7fbf8; border-radius: 15px; font-size: 12px; }.sequence span b { display: block; font-size: 25px; }.sequence i { width: 12px; height: 1px; background: #86a59c; }.sequence .inhale { border-top: 4px solid #75aaa0; }.sequence .hold { border-top: 4px solid #b39a79; }.sequence .exhale { border-top: 4px solid var(--peach); }
.record-card { background: #f6e7df; }.record-dot { width: 12px; height: 12px; margin-bottom: 22px; border: 3px solid #f6e7df; outline: 2px solid var(--peach); background: var(--peach); border-radius: 50%; animation: record-pulse 1.7s infinite; }.tap-row { display: flex; flex-wrap: wrap; gap: 6px; }.tap-row span { padding: 6px 9px; background: rgba(255,255,255,.65); border-radius: 999px; color: #6d4b42; font-size: 9px; font-weight: 700; }.history-card { background: #f5f0e4; }.history-lines { margin-top: 20px; display: grid; gap: 8px; }.history-lines span { padding: 10px; background: rgba(255,255,255,.65); border-radius: 11px; color: #66756e; font-size: 11px; }.history-lines b { color: var(--forest); margin-right: 7px; }.coach-card { min-height: 210px; grid-column: 1 / -1; display: grid; grid-template-columns: .6fr 1fr; align-items: center; background: #dceae4; }.coach-card p { margin-bottom: 0; }.sound-wave { height: 75px; display: flex; justify-content: center; align-items: center; gap: 9px; }.sound-wave i { width: 5px; height: 28%; background: var(--forest); border-radius: 10px; animation: wave 1.4s ease-in-out infinite; }.sound-wave i:nth-child(2),.sound-wave i:nth-child(6){height:55%;animation-delay:-.2s}.sound-wave i:nth-child(3),.sound-wave i:nth-child(5){height:85%;animation-delay:-.4s}.sound-wave i:nth-child(4){height:100%;animation-delay:-.6s}

.sound-section { padding-block: 125px; color: white; background: var(--forest-deep); }.sound-layout { display: grid; grid-template-columns: .75fr 1fr; gap: 100px; align-items: center; }.eyebrow.light { color: #aed0c6; }.sound-copy h2 { margin: 17px 0 25px; font-size: clamp(46px,5vw,65px); line-height: 1; letter-spacing: -.055em; }.sound-copy p { max-width: 450px; color: #b9cec8; }.volume-demo { max-width: 430px; margin-top: 38px; display: grid; grid-template-columns: 82px 1fr 42px; gap: 13px; align-items: center; color: #b9cec8; font-size: 11px; }.volume-demo div { height: 4px; background: #3e665f; border-radius: 10px; }.volume-demo i { display: block; height: 100%; background: var(--peach); border-radius: inherit; }.volume-demo b { color: white; }.track-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.track { padding: 15px; display: grid; grid-template-columns: 32px 1fr auto; align-items: center; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.07); border-radius: 14px; font-size: 13px; }.track small { color: #8fb0a7; font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }.play-icon { width: 23px; height: 23px; display: grid; place-items: center; background: rgba(255,255,255,.1); border-radius: 50%; color: #d8e9e3; font-size: 7px; }

.closing { padding-block: 120px; }.closing-card { padding: 90px 30px; position: relative; overflow: hidden; text-align: center; background: var(--paper); border: 1px solid var(--line); border-radius: 40px; box-shadow: var(--shadow); }.closing-card .eyebrow { justify-content: center; }.closing-card h2 { margin: 18px 0; font-size: clamp(42px,5vw,65px); line-height: 1.08; letter-spacing: -.055em; }.closing-card p { max-width: 600px; margin: 0 auto 30px; color: var(--ink-soft); }.closing-ring { position: absolute; width: 470px; height: 470px; right: -230px; top: -230px; border: 1px solid var(--line); border-radius: 50%; box-shadow: 0 0 0 60px rgba(47,111,102,.025),0 0 0 120px rgba(47,111,102,.018); }
footer { padding: 36px 0; background: #efe8da; }.footer-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; }.footer-inner p { margin: 0; color: var(--ink-soft); font-size: 12px; text-align: center; }.footer-inner small { color: #7c817b; font-size: 9px; text-align: right; }

.reveal { animation: reveal .8s ease both; }.delay-one { animation-delay: .15s; }
@keyframes reveal { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes buddy-breathe { 0%,100% { transform: scale(.97); } 50% { transform: scale(1.025); } }
@keyframes ring-breathe { 0%,100% { transform: scale(.94); opacity: .35; } 50% { transform: scale(1.04); opacity: .8; } }
@keyframes record-pulse { 50% { box-shadow: 0 0 0 8px rgba(217,120,96,.14); } }
@keyframes wave { 0%,100% { transform: scaleY(.6); opacity:.55 } 50% { transform: scaleY(1); opacity:1 } }

#blazor-error-ui { display: none; position: fixed; inset: auto 20px 20px; z-index: 1000; padding: 12px 18px; color: white; background: #71382d; border-radius: 12px; box-shadow: var(--shadow); }.dismiss { margin-left: 14px; color: white; border: 0; background: transparent; cursor: pointer; }

@media (max-width: 900px) {
    nav { display: none; }.hero { grid-template-columns: 1fr; gap: 60px; padding-top: 70px; }.app-preview { justify-self: center; }.purpose-grid,.sound-layout { grid-template-columns: 1fr; gap: 48px; }.buddy-selector { grid-template-columns: repeat(3,1fr); }.feature-grid { grid-template-columns: 1fr; }.feature-large { grid-row: auto; min-height: 480px; }.coach-card { grid-column: auto; grid-template-columns: 1fr; }.footer-inner { grid-template-columns: 1fr; text-align:center; }.footer-inner .brand { justify-content:center; }.footer-inner small { text-align:center; }
}
@media (max-width: 600px) {
    .page-shell { width: min(100% - 28px, 1160px); }.site-header { height: 66px; padding: 0 14px; }.header-cta { display:none; }.hero { min-height: auto; padding-block: 62px 90px; }.hero-actions { align-items:flex-start; flex-direction:column; gap:18px; }.hero-notes { display:grid; gap:7px; }.app-preview { padding:21px 18px; border-radius:28px; }.buddy-selector { display:flex; overflow-x:auto; padding:8px 2px 18px; scroll-snap-type:x mandatory; }.buddy-choice { min-width:145px; scroll-snap-align:center; }.purpose,.features,.buddies-section,.sound-section { padding-block:85px; }.purpose-grid { margin-top:42px; }.purpose-lede { font-size:26px; }.feature-card { padding:26px; }.sequence { gap:4px; }.sequence i { width:5px; }.track-list { grid-template-columns:1fr; }.buddy-quote { padding-inline:24px; }.closing { padding-block:75px; }.closing-card { padding:65px 20px; border-radius:30px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }