/* Breathing Sanctuary: page-local styles, shared navigation and account actions. */
.breath-page {
    --breath-ink: #09245d;
    --breath-muted: #526080;
    --breath-blue: #238cfa;
    margin: 0;
    background: #fff;
    color: var(--breath-ink);
    font: 500 16px/1.55 "Nunito", sans-serif;
    -webkit-font-smoothing: antialiased;
}
html { scroll-behavior: smooth; }
.breath-page *, .breath-page *::before, .breath-page *::after { box-sizing: border-box; }
.breath-page [hidden] { display: none !important; }
.breath-page :where(main) h1, .breath-page :where(main) h2, .breath-page :where(main) h3, .breath-page :where(main) p { margin: 0; }
.breath-page :where(main) h1, .breath-page :where(main) h2, .breath-page :where(main) h3 { font-family: "Playfair Display", Georgia, serif; font-weight: 700; }
.breath-page :where(main) button, .breath-page :where(main) select { font: inherit; }
.breath-page :where(main) button, .breath-page :where(main) a, .breath-page :where(main) select { -webkit-tap-highlight-color: transparent; }
.breath-page :where(main) button:focus-visible, .breath-page :where(main) a:focus-visible, .breath-page :where(main) select:focus-visible { outline: 3px solid #238cfa; outline-offset: 5px; }
.breath-page :where(main) button:disabled { cursor: default; }
.breath-container { width: min(1280px, calc(100% - 96px)); margin-inline: auto; }
.breath-symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
.breath-icon { width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.breath-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.breath-skip-link { position: absolute; top: -70px; left: 20px; z-index: 200; padding: 12px 20px; border-radius: 8px; background: white; color: var(--breath-ink); }
.breath-skip-link:focus { top: 10px; }


/* An airy three-column hero with a photographic right edge. */
.breath-hero { position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(ellipse at 13% 0%, #dff5ff 0, transparent 48%), linear-gradient(110deg, #f2fbff, #fbfdff 59%, #f6f5f0); }
.breath-hero::before { content: ""; position: absolute; top: -150px; left: -85px; width: 360px; height: 225px; border-radius: 50%; background: #fff5; transform: rotate(-12deg); }
.breath-hero-inner { position: relative; display: grid; grid-template-columns: 34% 33% 33%; align-items: center; min-height: 638px; padding-top: 38px; padding-bottom: 55px; }
.breath-hero-copy { position: relative; z-index: 2; align-self: center; padding-left: 20px; padding-bottom: 10px; }
.breath-eyebrow { color: #238bfa; font-size: 13px; font-weight: 800; letter-spacing: 1.7px; line-height: 1.5; text-transform: uppercase; }
.breath-hero h1 { margin-top: 16px; margin-bottom: 22px; font-size: clamp(42px, 4.6vw, 65px); line-height: 1.07; letter-spacing: -1.8px; }
.breath-hero-description { color: #4e5c7d; font-size: 21px; line-height: 1.5; }
.breath-hero-benefits { display: flex; gap: 43px; margin-top: 34px; width: max-content; }
.breath-hero-benefits > div { display: flex; flex-direction: column; align-items: center; gap: 9px; font-size: 16px; line-height: 1.25; text-align: center; }
.breath-icon-bubble { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--tint); color: var(--accent); }
.breath-hero-benefits .breath-icon-bubble { box-shadow: 0 5px 14px #244b6510; }
.breath-hero-benefits .breath-icon { width: 34px; height: 34px; }
.is-blue { --accent: #178aff; --tint: #edf8ff; --tint-border: #dcefff; }
.is-green { --accent: #1b9f74; --tint: #effcf7; --tint-border: #e0f6ed; }
.is-pink { --accent: #ed507f; --tint: #fff5f8; --tint-border: #fde9ef; }
.is-orange { --accent: #ff922b; --tint: #fff9f1; --tint-border: #fbefdf; }
.is-purple { --accent: #8860f8; --tint: #f6f2ff; --tint-border: #ede5ff; }
.breath-hero-photo { position: absolute; z-index: -1; inset: 0 0 0 auto; width: 39%; }
.breath-hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 51%; }
.breath-hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #f8fcff 0%, #f8fcffbb 7%, #f8fcff00 27%); }
.breath-hero-note { position: absolute; top: 26px; right: -26px; z-index: 1; transform: rotate(-12deg); font: 500 30px/1.03 "Caveat", cursive; color: #5078af; text-align: center; }
.breath-hero-note > span { padding-left: 9px; }
.breath-hero-note .breath-icon { display: block; width: 28px; height: 28px; margin: 9px 15px 0 auto; stroke-width: 1.7; }
.breath-hero-wave { position: absolute; bottom: -1px; left: 0; width: 100%; height: 74px; pointer-events: none; }

/* The expanding orb is driven by actual elapsed time in breath.js. */
.breathing-player { --breath-scale: .96; position: relative; z-index: 3; width: 100%; min-width: 0; padding: 27px 24px 20px; border: 1px solid #fff; border-radius: 25px; background: #fcfdfff0; box-shadow: 0 12px 40px #295d8c12, 0 2px 8px #38639004; text-align: center; }
.breath-select-wrap { position: relative; width: max-content; max-width: 100%; margin-inline: auto; }
.breath-select-wrap select { appearance: none; max-width: 100%; height: 45px; padding: 0 49px 0 25px; border: 1px solid #f1f7fb; border-radius: 30px; background: #fff; color: var(--breath-ink); font-family: Georgia, serif; font-size: 16px; font-weight: 700; box-shadow: 0 5px 11px #24598a0c; cursor: pointer; }
.breath-select-wrap > svg { position: absolute; top: 13px; right: 19px; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; pointer-events: none; }
.breath-orbit { position: relative; display: grid; place-items: center; width: min(100%, 306px); aspect-ratio: 1; margin: 10px auto 0; border: 2px solid #dff3ff; border-radius: 50%; background: radial-gradient(circle, #fafeff 50%, #f0faff 100%); box-shadow: inset 0 0 14px #45c2fa0e; }
.breath-orbit-middle { position: absolute; width: 82%; height: 82%; border-radius: 50%; background: linear-gradient(150deg, #c5f3ff, #bdeaff); }
.breath-orb { position: absolute; width: 72%; height: 72%; transform: scale(var(--breath-scale)); border: 8px solid #ffffff1c; border-radius: 50%; background: linear-gradient(130deg, #1ed4e5 0%, #23baf0 53%, #3698fb 100%); box-shadow: 0 9px 15px #168fe333, inset 0 0 0 4px #ffffff08; will-change: transform; }
.breath-orb-copy { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 150px; color: #fff; font-size: 16px; font-weight: 800; line-height: 1.4; }
#breath-count { font-size: 64px; line-height: 1.15; font-weight: 800; letter-spacing: -2px; }
.breath-cycle { margin-top: 9px !important; font-size: 16px; font-weight: 800; }
.breath-controls { display: flex; justify-content: center; align-items: center; gap: 28px; margin-top: 23px; }
.breath-control { display: grid; place-items: center; width: 62px; height: 62px; padding: 0; border: 1px solid #f5f8fb; border-radius: 50%; background: white; color: var(--breath-ink); box-shadow: 0 5px 11px #214c7b0d; cursor: pointer; transition: transform .2s, box-shadow .2s; }
.breath-control:hover { transform: translateY(-2px); box-shadow: 0 6px 15px #214c7b1d; }
.breath-control .breath-icon { width: 26px; height: 26px; }
.breath-play { width: 68px; height: 68px; background: linear-gradient(125deg, #15beed, #297cff 66%, #5255ff); color: white; box-shadow: 0 5px 12px #217dfb26; }
.breath-play > svg { width: 29px; height: 29px; fill: currentColor; }
.breath-control-caption { min-height: 18px; margin-top: 13px !important; color: #677d9c; font-size: 12px; }
.breath-no-script { color: var(--breath-muted); margin-top: 10px !important; font-size: 13px; }
.breathing-player[data-state="complete"] .breath-orb { background: linear-gradient(130deg, #42d5c0, #27ae9c); }
.breathing-player[data-state="complete"] #breath-count { font-size: 40px; letter-spacing: -1px; }
.breathing-player:fullscreen, .breathing-player.is-focus-mode { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 100%; margin: 0; padding: 30px; border: 0; border-radius: 0; background: radial-gradient(ellipse at 50% 35%, #fff, #eaf7ff); overflow-y: auto; }
.breathing-player.is-focus-mode { z-index: 1000; }
.breathing-player::backdrop { background: #edf8ff; }
.breathing-player:fullscreen .breath-orbit, .breathing-player.is-focus-mode .breath-orbit { width: min(390px, 65vh, 82vw); flex-shrink: 0; }
body.breath-focus-open { overflow: hidden; }
body.breath-focus-open .breath-hero { z-index: 1001; overflow: visible; }

/* Technique selection and the breathing sequence. */
.breath-practices { padding-top: 30px; scroll-margin-top: 28px; }
.breath-section-heading { text-align: center; }
.has-line { display: flex; justify-content: center; align-items: center; gap: 12px; }
.has-line::before { content: ""; width: 20px; height: 1px; background: #2995fc; }
.breath-section-heading h2 { margin-top: 10px; font-size: clamp(29px, 2.75vw, 40px); line-height: 1.25; letter-spacing: -.8px; }
.breath-section-heading > p:last-child { margin-top: 7px; color: var(--breath-muted); font-size: 18px; }
.breath-techniques { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-top: 26px; margin-bottom: 34px; }
.breath-technique { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; min-height: 170px; padding: 20px 12px; border: 1px solid var(--tint-border); border-radius: 17px; background: linear-gradient(145deg, #ffffff66, transparent), var(--tint); color: var(--breath-ink); cursor: pointer; box-shadow: 0 3px 6px #19344b03; transition: border-color .2s, transform .2s, box-shadow .2s; }
.breath-technique > .breath-icon { width: 45px; height: 45px; margin-bottom: 15px; color: var(--accent); }
.breath-technique strong { font-family: Georgia, serif; font-size: 18px; line-height: 1.4; }
.breath-technique > span { margin-top: 4px; font-family: Georgia, serif; font-size: 16px; }
.breath-technique[data-technique="box"] .breath-icon { fill: #8bd8ff80; }
.breath-technique[data-technique="diaphragmatic"] .breath-icon { fill: #bb9cff44; }
.breath-technique:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 7px 20px #20385d0c; }
.breath-technique[aria-pressed="true"] { border-color: #75baff; box-shadow: 0 0 0 3px #45a6ff0a, 0 5px 15px #368cff14; }
.breath-detail { padding: 36px 34px 22px; border: 1px solid #e6f1fa; border-radius: 24px; background: linear-gradient(115deg, #f5fbff66, #f7fbfecc); }
.breath-detail-top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: 30px; }
.breath-detail-copy .breath-eyebrow::after { content: ""; display: inline-block; width: 20px; height: 1px; margin-left: 8px; vertical-align: middle; background: #64b5ff; }
.breath-detail-copy h3 { margin-top: 10px; font-size: clamp(25px, 2.35vw, 34px); letter-spacing: -.5px; line-height: 1.25; }
.breath-detail-copy > p:last-child { margin-top: 9px; font-size: 17px; color: var(--breath-muted); line-height: 1.65; }
.breath-phase-steps { display: flex; align-items: stretch; justify-content: flex-end; gap: 14px; }
.phase-step { display: flex; flex: 1; flex-direction: column; justify-content: center; align-items: center; min-width: 0; min-height: 110px; padding: 15px 8px; border: 1px solid transparent; border-radius: 16px; background: #e1f3ff; color: #0874d8; transition: box-shadow .2s; }
.phase-step:nth-child(2) { background: #e1f7ef; color: #168962; }
.phase-step:nth-child(3) { background: #ffebee; color: #dc4268; }
.phase-step:nth-child(4) { background: #efe8ff; color: #6339da; }
.phase-step-label { text-align: center; font-size: 15px; font-weight: 700; }
.phase-step-duration { margin-top: 4px; font: 700 36px/1.2 Georgia, serif; }
.phase-step.is-active { border-color: currentColor; box-shadow: 0 0 0 3px #4d9ad008; }
.breath-diagram { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 258px; margin: 29px 0 0; border-radius: 17px; background: radial-gradient(ellipse at 4% 14%, #dff2ed, transparent 63%), radial-gradient(ellipse at 94% 100%, #ffe5e9, transparent 40%), linear-gradient(105deg, #edf6f7, #f5f7f7 49%, #e2f0f3); }
.breath-diagram-art { position: relative; display: grid; place-items: center; width: 390px; height: 205px; max-width: 100%; }
.diagram-square { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; width: 126px; height: 126px; transform: rotate(0); transition: border-radius .4s; }
.diagram-square > span { background: #aae2dc; transition: filter .3s, border-radius .3s; }
.diagram-square > span:nth-child(2), .diagram-square > span:nth-child(3) { background: #facccc; }
.breath-diagram[data-phase="0"] .diagram-square > span:nth-child(1), .breath-diagram[data-phase="1"] .diagram-square > span:nth-child(2), .breath-diagram[data-phase="2"] .diagram-square > span:nth-child(4), .breath-diagram[data-phase="3"] .diagram-square > span:nth-child(3) { filter: saturate(1.55); }
.diagram-label { position: absolute; font-size: 14px; line-height: 1.3; }
.diagram-label::after { position: absolute; color: var(--breath-ink); font: 36px/1 Georgia, serif; }
.diagram-label-top { top: 0; left: 50%; transform: translateX(-50%); }
.diagram-label-top::after { content: "↑"; top: 17px; left: 50%; transform: translateX(-50%); }
.diagram-label-bottom { bottom: 0; left: 50%; transform: translateX(-50%); }
.diagram-label-bottom::after { content: "↓"; bottom: 17px; left: 50%; transform: translateX(-50%); }
.diagram-label-left { top: 50%; right: calc(50% + 108px); transform: translateY(-50%); white-space: nowrap; }
.diagram-label-left::after { content: "→"; top: 50%; left: calc(100% + 10px); transform: translateY(-56%); }
.diagram-label-right { top: 50%; left: calc(50% + 108px); transform: translateY(-50%); white-space: nowrap; }
.diagram-label-right::after { content: "→"; top: 50%; right: calc(100% + 10px); transform: translateY(-56%); }
.breath-diagram figcaption { position: relative; z-index: 1; margin: 5px 14px 8px; color: #526986; font-size: 13px; text-align: center; }
.diagram-wave { position: absolute; z-index: -1; bottom: 0; width: 190px; height: 90px; }
.diagram-wave-left { left: 0; fill: #9bd9e780; }
.diagram-wave-right { right: 0; fill: #ffd2d88c; }
.breath-diagram:not([data-technique="box"]) .diagram-square { gap: 4px; border-radius: 50%; overflow: hidden; transform: rotate(45deg); }
.breath-diagram[data-technique="mindful"] .diagram-square { gap: 0; }
.breath-technique-tip { margin-top: 13px !important; color: #677791; text-align: center; font-size: 13px; }

/* Benefits and the illustrated daily practice invitation. */
.breath-benefits { padding-top: 38px; padding-bottom: 46px; }
.breath-benefit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin-top: 29px; }
.breath-benefit { text-align: center; }
.breath-benefit .breath-icon-bubble { width: 90px; height: 90px; margin-inline: auto; }
.breath-benefit .breath-icon { width: 46px; height: 46px; }
.breath-benefit h3 { margin-top: 12px; font-family: Georgia, serif; font-size: 21px; line-height: 1.3; }
.breath-benefit p { margin-top: 4px; font-size: 17px; line-height: 1.45; }
.breath-habit { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 25px; min-height: 152px; margin-bottom: 40px; padding: 25px 115px 25px 245px; border: 1px solid #edf5fb; border-radius: 38px 38px 34px 34px; background: linear-gradient(110deg, #f1faff, #f8fbff 49%, #f2f8ff); }
.breath-habit::before, .breath-habit::after { content: ""; position: absolute; z-index: -1; width: 150px; height: 150px; border-radius: 50%; background: #9ecdff33; }
.breath-habit::before { left: 90px; bottom: -103px; box-shadow: -68px -4px 0 0 #b3eded30; }
.breath-habit::after { right: -95px; bottom: -64px; box-shadow: -80px 28px 0 -5px #b0e9ca40; }
.breath-habit-leaves { position: absolute; bottom: 0; left: 0; width: 200px; height: 170px; }
.breath-habit h2 { font-size: 29px; line-height: 1.3; letter-spacing: -.4px; }
.breath-habit p { margin-top: 5px; font-size: 17px; }
.breath-primary-button { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; gap: 16px; min-height: 60px; padding: 15px 30px; border-radius: 40px; background: linear-gradient(110deg, #ff981d, #ff674a); color: white; box-shadow: inset 0 2px 1px #fff5, 0 5px 10px #ff933a14; font: 700 18px/1.5 Georgia, serif; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.breath-primary-button:hover { transform: translateY(-2px); box-shadow: 0 7px 17px #ff933a33; }
.breath-primary-button .breath-icon { width: 22px; height: 22px; }


@media (max-width: 1200px) {
    .breath-container { width: calc(100% - 64px); }
    .breath-hero-inner { min-height: 562px; grid-template-columns: 34% 34% 32%; }
    .breath-hero-copy { padding-left: 0; }
    .breath-hero-description { font-size: 18px; }
    .breath-hero-benefits { gap: 27px; margin-top: 28px; }
    .breath-icon-bubble { width: 59px; height: 59px; }
    .breath-hero-benefits > div { font-size: 14px; }
    .breathing-player { padding: 24px 19px 16px; border-radius: 22px; }
    .breath-controls { gap: 23px; margin-top: 18px; }
    .breath-control { width: 50px; height: 50px; }
    .breath-play { width: 57px; height: 57px; }
    .breath-orb-copy { font-size: 15px; }
    #breath-count { font-size: 54px; }
    .breath-hero-note { top: 22px; right: -22px; font-size: 27px; }
    .breath-techniques { gap: 14px; }
    .breath-technique { min-height: 154px; }
    .breath-technique strong { font-size: 16px; }
    .breath-technique > span { font-size: 14px; }
    .breath-detail { padding: 28px 28px 20px; }
    .breath-detail-top { gap: 22px; grid-template-columns: 1.2fr 1fr; }
    .breath-phase-steps { gap: 10px; }
    .phase-step { min-height: 104px; }
    .phase-step-label { font-size: 13px; }
    .phase-step-duration { font-size: 31px; }
    .breath-habit { padding-left: 190px; padding-right: 40px; }
    .breath-habit h2 { font-size: 24px; }
    .breath-habit p { font-size: 15px; }
    .breath-primary-button { min-height: 56px; padding: 14px 23px; font-size: 16px; }
    .breath-habit-leaves { width: 174px; height: 150px; }
}

@media (max-width: 950px) {
    .breath-hero-inner { min-height: 526px; grid-template-columns: 35% 35% 30%; }
    .breath-hero h1 { font-size: 43px; }
    .breath-eyebrow { font-size: 11px; letter-spacing: 1.2px; }
    .breath-hero-description { font-size: 17px; }
    .breath-hero-benefits { gap: 21px; }
    .breath-hero-benefits .breath-icon-bubble { width: 52px; height: 52px; }
    .breath-controls { gap: 15px; }
    .breathing-player { padding-inline: 15px; }
    .breath-hero-note { right: -16px; font-size: 25px; }
    .breath-select-wrap select { height: 42px; padding-left: 18px; padding-right: 38px; font-size: 14px; }
    .breath-select-wrap > svg { right: 11px; top: 11px; }
    .breath-orb-copy { font-size: 13px; }
    #breath-count { font-size: 48px; }
    .breath-control-caption { font-size: 10px; }
    .breath-detail-top { grid-template-columns: 1fr; }
    .breath-phase-steps { justify-content: flex-start; }
    .phase-step { flex-basis: 100px; min-height: 87px; }
    .breath-detail-copy > p:last-child { font-size: 16px; }
    .breath-habit { padding-left: 153px; padding-right: 28px; gap: 20px; }
    .breath-habit-leaves { left: -15px; width: 155px; }
    .breath-habit h2 { font-size: 22px; }
    .breath-primary-button { gap: 9px; font-size: 15px; padding-inline: 19px; }
}

@media (max-width: 760px) {
    .breath-container { width: calc(100% - 40px); }
    .breath-hero-inner { grid-template-columns: minmax(0, 1fr); min-height: auto; padding-top: 41px; padding-bottom: 56px; }
    .breath-hero-copy { max-width: 63%; padding-bottom: 0; }
    .breath-hero h1 { margin-top: 13px; margin-bottom: 17px; font-size: clamp(38px, 7.1vw, 52px); letter-spacing: -1px; }
    .breath-hero-description { font-size: 16px; line-height: 1.55; }
    .breath-desktop-break { display: none; }
    .breath-hero-photo { top: 0; width: 53%; height: 430px; }
    .breath-hero-photo::after { background: linear-gradient(90deg, #f1faff, #f1faff00 40%), linear-gradient(0deg, #f6fbff, #f6fbff00 25%); }
    .breath-hero-note { display: none; }
    .breath-hero-benefits { gap: 27px; margin-top: 24px; }
    .breath-hero-benefits > div { font-size: 13px; }
    .breathing-player { width: min(360px, 100%); justify-self: center; margin-top: 36px; padding: 22px 27px 19px; border-radius: 24px; }
    .breath-orbit { width: min(276px, 100%); margin-top: 12px; }
    .breath-select-wrap select { height: 43px; padding-left: 24px; padding-right: 45px; font-size: 16px; }
    .breath-orb-copy { font-size: 16px; }
    #breath-count { font-size: 58px; }
    .breath-controls { gap: 29px; }
    .breath-control { width: 56px; height: 56px; }
    .breath-play { width: 62px; height: 62px; }
    .breath-control-caption { font-size: 12px; }
    .breath-practices { padding-top: 25px; }
    .breath-section-heading h2 { margin-top: 10px; font-size: 29px; letter-spacing: -.5px; }
    .breath-section-heading > p:last-child { margin-top: 10px; font-size: 16px; }
    .breath-techniques { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 24px; margin-bottom: 25px; }
    .breath-technique { min-height: 145px; padding: 17px 8px; }
    .breath-technique:last-child { grid-column: 1 / -1; min-height: 118px; }
    .breath-technique:last-child > .breath-icon { margin-bottom: 8px; }
    .breath-technique strong { font-size: 17px; }
    .breath-detail { padding: 25px 20px 20px; border-radius: 21px; }
    .breath-detail-copy h3 { font-size: 27px; }
    .breath-detail-top { gap: 22px; }
    .breath-phase-steps { gap: 8px; }
    .phase-step { min-height: 90px; padding-inline: 4px; border-radius: 12px; }
    .phase-step-label { font-size: 12px; }
    .phase-step-duration { font-size: 28px; }
    .breath-diagram { min-height: 243px; margin-top: 22px; }
    .diagram-square { width: 98px; height: 98px; }
    .breath-diagram-art { width: 340px; height: 183px; }
    .diagram-label { font-size: 12px; }
    .diagram-label-left { right: calc(50% + 82px); }
    .diagram-label-right { left: calc(50% + 82px); }
    .diagram-label::after { font-size: 30px; }
    .diagram-label-left::after { left: calc(100% + 6px); }
    .diagram-label-right::after { right: calc(100% + 6px); }
    .breath-benefits { padding-top: 35px; padding-bottom: 35px; }
    .breath-benefit-grid { grid-template-columns: 1fr 1fr; gap: 28px 15px; }
    .breath-benefit .breath-icon-bubble { width: 76px; height: 76px; }
    .breath-benefit .breath-icon { width: 39px; height: 39px; }
    .breath-benefit h3 { font-size: 19px; }
    .breath-benefit p { font-size: 14px; }
    .breath-habit { flex-direction: column; align-items: center; justify-content: center; min-height: 230px; padding: 29px 22px 28px 95px; margin-bottom: 30px; border-radius: 27px; text-align: center; }
    .breath-habit h2 { font-size: 24px; }
    .breath-habit p { font-size: 15px; }
    .breath-habit-leaves { left: -47px; width: 160px; height: 185px; }
    .breath-primary-button { min-height: 52px; padding-inline: 22px; font-size: 16px; }
}

@media (max-width: 380px) {
    .breath-container { width: calc(100% - 30px); }
    .breath-hero-copy { max-width: 72%; }
    .breath-hero h1 { font-size: 38px; }
    .breath-eyebrow { font-size: 10px; letter-spacing: .8px; }
    .breath-hero-benefits { gap: 20px; }
    .breathing-player { padding-inline: 20px; }
    .breath-detail { padding-inline: 15px; }
    .diagram-label-left, .diagram-label-right { max-width: 44px; white-space: normal; text-align: center; }
    .phase-step-label { font-size: 11px; }
    .breath-habit { padding-left: 55px; padding-right: 18px; }
    .breath-habit-leaves { opacity: .65; left: -75px; }
}

@media (max-height: 600px) and (orientation: landscape) {
    .breathing-player:fullscreen, .breathing-player.is-focus-mode { justify-content: flex-start; padding: 14px; gap: 0; }
    .breathing-player:fullscreen .breath-orbit, .breathing-player.is-focus-mode .breath-orbit { width: 180px; }
    .breathing-player:fullscreen .breath-controls, .breathing-player.is-focus-mode .breath-controls { margin-top: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .breath-page *, .breath-page *::before, .breath-page *::after { animation: none !important; transition: none !important; }
    .breath-orb { transform: none !important; will-change: auto; }
}