/* SLEEP: four evening steps and a visual, portion-aware ingredient overview. */
.sleep-ritual-visual{background:radial-gradient(ellipse at 50% 5%,#f7f1ff9c,transparent 70%),#e4dced;color:#3d3049;padding-block:72px 52px}
.ritual-visual-heading{text-align:center;margin:0 auto 42px;max-width:850px}
.ritual-visual-heading .eyebrow{display:block;color:#85708e;font-size:9px;letter-spacing:.19em;margin:0 0 17px}
.sleep-page .ritual-visual-heading h2{font-size:clamp(34px,3.6vw,54px);line-height:1.1;margin:0}
.sleep-page .ritual-visual-heading h2 span{color:#725781}
.ritual-visual-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:38px;list-style:none;padding:0;margin:0 auto;max-width:1100px;text-align:center}
.ritual-visual-steps li{position:relative;min-width:0}
.ritual-step-image{position:relative;isolation:isolate;overflow:hidden;width:132px;aspect-ratio:1;border-radius:50%;background:#cdbdde;margin:0 auto 22px;box-shadow:inset 0 0 0 1px #ffffff3b}
.ritual-step-image>img{display:block;width:100%;height:100%;object-fit:cover;object-position:62% 42%}
.ritual-step-clock{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#d6c7e9,#beabd6)}
.ritual-step-clock>span{font-size:33px;letter-spacing:-.06em;color:#49345b;font-variant-numeric:tabular-nums}
.ritual-step-product{background:linear-gradient(120deg,#4c2c5c33,#e7adcc0d),url('assets/scene-mobile.webp') center 63%/cover}
.ritual-step-bottle{position:absolute;left:30%;top:5%;height:100%;aspect-ratio:921/1708;transform:rotate(8deg);filter:drop-shadow(3px 5px 4px #30213950)}
.ritual-step-bottle>img{display:block;width:100%;height:100%}
.ritual-step-night{background:linear-gradient(#142f60d9,#11254966),url('assets/scene-mobile.webp') center 85%/cover}
.ritual-step-night>svg{position:absolute;left:31%;top:15%;width:45%;height:45%;filter:drop-shadow(0 0 8px #fbe9e150)}
.ritual-step-arrow{position:absolute;width:24px;height:24px;right:-31px;top:54px;color:#8f7c9a}
.ritual-visual-steps h3{font-weight:500;font-size:16px;letter-spacing:-.025em;line-height:1.35;margin:0 0 9px}
.ritual-visual-steps p{font-size:12px;line-height:1.65;color:#796483;max-width:210px;margin:0 auto}
.sleep-ritual-visual .application-note{max-width:1100px;margin:35px auto 0;grid-template-columns:1fr 3fr;gap:30px;border-color:#9f87b13b;padding-top:22px}
.sleep-ritual-visual .application-note strong{color:#73577e;font-size:10px}
.sleep-ritual-visual .application-note p{color:#7d6688;font-size:10px;line-height:1.8}
.visual-formula{background:#f8f5f6;color:#3d3049;grid-template-columns:.78fr 1.65fr;gap:6%;padding-block:80px}
.visual-formula .formula-intro{padding-top:6px}
.visual-formula .formula-intro .eyebrow{color:#8e7398;margin-bottom:23px}
.sleep-page .visual-formula h2{font-size:clamp(34px,3.2vw,49px);line-height:1.12;letter-spacing:-.045em}
.sleep-page .visual-formula h2 em{color:#a477a6;background:none}
.visual-formula .formula-intro>p:not(.eyebrow){font-size:13px;color:#796580;line-height:1.8;max-width:330px;margin:0 0 18px}
.formula-full-link{display:inline-flex;align-items:center;min-height:44px;font-size:11px;color:#7d548b;text-decoration:underline;text-underline-offset:5px;margin-top:5px}
.visual-formula .formula-panel{min-width:0}
.visual-formula .portion-heading>span{color:#6f567b;font-size:11px}
.visual-formula .portion-switch{border-color:#b69bc342;background:#ece4ee55}
.visual-formula .portion-switch label>span{color:#8c7297}
.visual-formula .portion-switch input:checked+span{background:#6b4e7c;color:#fff8ff}
.visual-formula .portion-description{color:#8c7395;font-size:9px;margin:15px 0 21px}
.ingredient-card-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.ingredient-card{grid-column:span 2;overflow:hidden;min-width:0;background:#fffdfd;border:1px solid #cdb6d231;border-radius:14px;box-shadow:0 6px 24px #4d315408}
.ingredient-card--ashwagandha,.ingredient-card--lavender{grid-column:span 3}
.ingredient-card>img{display:block;width:100%;height:118px;object-fit:cover}
.ingredient-card--ashwagandha>img,.ingredient-card--lavender>img{height:135px}
.ingredient-card-copy{padding:16px 15px 18px}
.ingredient-card h3{font-size:16px;font-weight:500;letter-spacing:-.025em;line-height:1.25;margin:0 0 9px;color:#483252}
.ingredient-card-copy>p:not(.ingredient-amount){font-size:11px;line-height:1.65;color:#8a7392;margin:13px 0 0}
.ingredient-amount{margin:0;line-height:1.4}
.ingredient-amount strong{display:inline-block;font-size:12px;font-weight:500;color:#9a6ba1}
.ingredient-amount span{display:block;font-size:8px;color:#aa91b3;margin-top:2px}
.formula-amount-details{margin-top:24px;border-block:1px solid #aa8dbb40}
.formula-amount-details>summary{display:flex;justify-content:space-between;align-items:center;gap:20px;cursor:pointer;list-style:none;font-size:11px;color:#7d5c8b;padding:19px 0}
.formula-amount-details>summary::-webkit-details-marker{display:none}
.formula-amount-details>summary span{font-size:21px;font-weight:300;line-height:1}
.formula-amount-details[open]>summary span{transform:rotate(45deg)}
.visual-formula .nutrient-table thead th{color:#9677a2}
.visual-formula .nutrient-table tbody th,.visual-formula .nutrient-table tbody td{color:#6a4f77;border-color:#b598c13b}
.visual-formula .nutrient-table small{color:#9c81a7}
.visual-formula .nutrient-note{color:#9b81a6;margin-bottom:22px}
@media(min-width:1700px){.ingredient-card>img{height:150px}.ingredient-card--ashwagandha>img,.ingredient-card--lavender>img{height:165px}.ingredient-card-copy{padding:20px}.ingredient-card h3{font-size:19px}.ingredient-card-copy>p:not(.ingredient-amount){font-size:12px}.ingredient-card-grid{gap:20px}}
@media(max-width:1050px){.visual-formula{display:block}.visual-formula .formula-intro{display:grid;grid-template-columns:1fr 1fr;column-gap:45px;margin-bottom:30px}.visual-formula .formula-intro .eyebrow{grid-column:1/-1}.visual-formula .formula-intro h2{grid-row:2/5;margin-bottom:0}.visual-formula .formula-intro>p:not(.eyebrow){font-size:12px}.visual-formula .formula-intro .formula-full-link{margin-top:0}.ingredient-card>img{height:145px}.ingredient-card--ashwagandha>img,.ingredient-card--lavender>img{height:160px}.ritual-step-image{width:110px}.ritual-visual-steps{gap:25px}.ritual-step-arrow{right:-24px;top:44px}.ritual-visual-steps h3{font-size:14px}.ritual-visual-steps p{font-size:11px}}
@media(max-width:700px){.sleep-ritual-visual{padding:55px 7% 40px}.ritual-visual-heading{margin-bottom:30px}.ritual-visual-heading .eyebrow{font-size:8px;margin-bottom:15px}.sleep-page .ritual-visual-heading h2{font-size:33px;line-height:1.13}.ritual-visual-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:31px 23px}.ritual-step-image{width:106px;margin-bottom:16px}.ritual-visual-steps h3{font-size:14px;min-height:19px}.ritual-visual-steps p{font-size:11px;line-height:1.6;max-width:180px}.ritual-step-arrow{top:43px;right:-23px;width:22px;height:22px}.ritual-visual-steps li:nth-child(2) .ritual-step-arrow{display:none}.sleep-ritual-visual .application-note{display:block;margin-top:29px;padding-top:20px}.sleep-ritual-visual .application-note strong{display:block;margin-bottom:9px;font-size:10px}.sleep-ritual-visual .application-note p{font-size:10px}.visual-formula{padding:55px 7%}.visual-formula .formula-intro{display:block;margin-bottom:26px}.visual-formula .formula-intro .eyebrow{font-size:8px;margin-bottom:18px}.sleep-page .visual-formula h2{font-size:36px;margin-bottom:23px}.visual-formula .formula-intro>p:not(.eyebrow){font-size:12px;max-width:380px}.formula-full-link{font-size:11px}.ingredient-card-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.ingredient-card,.ingredient-card--ashwagandha,.ingredient-card--lavender{grid-column:auto}.ingredient-card--lavender{grid-column:1/-1}.ingredient-card>img,.ingredient-card--ashwagandha>img{height:110px}.ingredient-card--lavender>img{height:145px}.ingredient-card-copy{padding:14px 13px 17px}.ingredient-card h3{font-size:16px}.ingredient-card-copy>p:not(.ingredient-amount){font-size:11px}.visual-formula .portion-heading{gap:12px}.visual-formula .portion-heading>span{font-size:10px}.visual-formula .portion-switch label>span{font-size:9px;padding:9px 10px}.visual-formula .nutrient-table{font-size:12px}}
@media(max-width:380px){.ritual-step-image{width:95px}.ritual-step-clock>span{font-size:29px}.ritual-visual-steps{gap:28px 20px}.ritual-visual-steps h3{font-size:12px}.ingredient-card-grid{grid-template-columns:1fr}.ingredient-card,.ingredient-card--lavender{grid-column:auto}.ingredient-card>img,.ingredient-card--ashwagandha>img,.ingredient-card--lavender>img{height:150px}.ingredient-card h3{font-size:18px}.ingredient-card-copy{padding:17px}.ingredient-card-copy>p:not(.ingredient-amount){font-size:12px}}

/* A compact bottle-yield label follows the selected spray amount. */
.visual-formula .portion-heading{align-items:flex-start}
.visual-formula .portion-heading>span{padding-top:14px}
.portion-selection{display:flex;flex-direction:column;align-items:stretch;gap:9px;max-width:100%}
.portion-yield{display:flex;align-items:center;justify-content:center;gap:10px;margin:0;padding:9px 12px;border:1px solid #b899c52b;border-radius:13px;background:linear-gradient(115deg,#eadff07d,#f1eaf354);color:#6f507f}
.portion-yield>strong{font-size:24px;line-height:1;font-weight:400;letter-spacing:-.045em;font-variant-numeric:tabular-nums;min-width:36px;text-align:center}
.portion-yield-copy{display:block;font-size:10px;font-weight:500;line-height:1.4}
.portion-yield-copy small{display:block;margin-top:2px;font-size:8px;font-weight:400;color:#9c81a8;white-space:nowrap}
@media(max-width:700px){.portion-selection{margin-left:auto}.portion-yield{gap:8px;padding:9px 10px}.portion-yield>strong{font-size:23px}.portion-yield-copy{font-size:10px}.portion-yield-copy small{font-size:8px}}

/* Keep the application dominant; its brand promise is a compact aside. */
.visual-formula{position:relative}
.formula-product-anchor{position:absolute;top:0;left:0;scroll-margin-top:62px}
.ritual-process-layout{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:34px;align-items:center;max-width:1350px;margin:0 auto}
.ritual-process-layout .ritual-visual-steps{width:100%;gap:22px}
.ritual-process-layout .ritual-step-image{width:110px}
.ritual-process-layout .ritual-step-arrow{top:44px;right:-24px}
.ritual-process-layout .ritual-visual-steps h3{font-size:14px}
.ritual-process-layout .ritual-visual-steps p{font-size:11px}
.ritual-moment-callout{width:100%;margin:0;padding:23px 20px;border:1px solid #bda2cb40;border-radius:18px;background:linear-gradient(125deg,#fff9fe80,#f4e9f34f);box-shadow:0 8px 30px #6c457404}
.ritual-moment-slogan{font-size:25px;font-weight:400;line-height:1.15;letter-spacing:-.045em;color:#4a3557;margin:0 0 19px}
.ritual-moment-slogan>span{display:block;background:var(--brand-gradient);background-clip:text;-webkit-background-clip:text;color:transparent}
.ritual-moment-ease{font-size:11px;line-height:1.8;color:#8d7398;letter-spacing:-.005em;margin:0;padding-top:15px;border-top:1px solid #b69bc330}
.ritual-moment-ease strong{font-weight:500;color:#72567f}
.sleep-ritual-visual .application-note{margin-top:32px}
@media(min-width:1600px){.ritual-process-layout{grid-template-columns:minmax(0,1fr) 280px;gap:45px}.ritual-process-layout .ritual-step-image{width:132px}.ritual-process-layout .ritual-step-arrow{top:54px}.ritual-process-layout .ritual-visual-steps h3{font-size:16px}.ritual-process-layout .ritual-visual-steps p{font-size:12px}.ritual-moment-callout{padding:26px 24px}.ritual-moment-slogan{font-size:28px}.ritual-moment-ease{font-size:12px}}
@media(max-width:1100px) and (min-width:701px){.ritual-process-layout{grid-template-columns:minmax(0,1fr) 240px;gap:35px}.ritual-process-layout .ritual-visual-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 25px}.ritual-process-layout .ritual-visual-steps li:nth-child(2) .ritual-step-arrow{display:none}.ritual-moment-slogan{font-size:24px}}
@media(max-width:700px){.ritual-process-layout{grid-template-columns:1fr;gap:26px}.ritual-process-layout .ritual-visual-steps{gap:31px 23px}.ritual-process-layout .ritual-step-image{width:106px}.ritual-process-layout .ritual-step-arrow{top:43px;right:-23px}.ritual-moment-callout{justify-self:end;max-width:300px;padding:22px 23px}.ritual-moment-slogan{font-size:26px;margin-bottom:17px}.ritual-moment-ease{font-size:11px;padding-top:15px}.sleep-ritual-visual .application-note{margin-top:27px}}
@media(max-width:380px){.ritual-process-layout .ritual-step-image{width:95px}.ritual-process-layout .ritual-visual-steps{gap:28px 20px}.ritual-process-layout .ritual-visual-steps h3{font-size:12px}.ritual-moment-callout{max-width:280px;padding:21px 20px}.ritual-moment-slogan{font-size:25px}}

/* Align the small aside with the last step rather than the tallest step copy. */
@media(min-width:1101px){.ritual-moment-callout{align-self:start;margin-top:8px}}

/* Application-specific processes share the same visual language. */
 .application-choice{max-width:640px;margin:0 auto 32px}
.application-choice-question{font-size:clamp(18px,1.6vw,23px);line-height:1.35;letter-spacing:-.02em;color:#4e3c5b;margin:0 0 17px}
.application-switch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.application-choice[hidden],.application-switch[hidden],.application-mode-panel[hidden]{display:none}
.application-switch button{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr) 20px;gap:11px;align-items:center;min-width:0;min-height:104px;padding:19px 17px;text-align:left;border:1.5px solid #ad97bd65;border-radius:20px;background:#ffffff70;color:#796785;font:inherit;cursor:pointer;box-shadow:0 3px 12px #51386404;transition:transform .22s ease,background .22s ease,border-color .22s ease,box-shadow .22s ease}
.application-card-icon{display:flex;align-items:center;justify-content:center;width:36px;height:40px;color:#8a719c}
.application-card-icon svg{display:block;width:32px;height:32px}
.application-card-copy{display:flex;flex-direction:column;gap:6px;min-width:0}
.application-card-copy strong{font-size:16px;line-height:1.3;font-weight:500;letter-spacing:-.025em;color:#60476f}
.application-card-copy>span{font-size:12px;line-height:1.4;color:#8b7895}
.application-card-check{display:flex;align-items:center;justify-content:center;width:20px;height:20px;align-self:start;margin-top:2px;border-radius:50%;background:#725180;color:#fff;opacity:0;transition:opacity .2s ease}
.application-card-check svg{display:block;width:18px;height:18px}
.application-switch button[aria-selected="true"]{border-color:#88659b;background:linear-gradient(135deg,#fffaffd9,#e8ddefbb);box-shadow:0 5px 18px #67447e0c}
.application-switch button[aria-selected="true"] .application-card-icon{color:#725180}
.application-switch button[aria-selected="true"] .application-card-check{opacity:1}
.application-switch button:focus-visible{outline:2px solid #6b4e7c;outline-offset:4px}
@media(hover:hover) and (pointer:fine){.application-switch button:hover{transform:translateY(-3px);border-color:#9674a8;background:#fffaffb8;box-shadow:0 8px 22px #67447e16}}
.sleep-page .ritual-visual-heading h2 .application-title-first{color:#3d3049}
.application-mode-panel:not([hidden]){animation:application-mode-reveal .22s ease-out}
.application-mode-panel:focus-visible{outline:2px solid #a98aba;outline-offset:12px;border-radius:12px}
.ritual-process-layout .ritual-visual-steps--jetlag{grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
.ritual-visual-steps--jetlag p{max-width:235px}
.ritual-visual-steps--jetlag strong{font-weight:500;color:#674675}
.ritual-visual-steps--jetlag .ritual-step-arrow{right:-29px}
.ritual-step-travel,.ritual-step-destination,.ritual-step-arrived{display:flex;align-items:center;justify-content:center;color:#68477e;background:linear-gradient(135deg,#f3eafb,#c6b3dd)}
.ritual-step-travel>svg,.ritual-step-destination>svg,.ritual-step-arrived>svg{display:block;width:75%;height:75%}
.ritual-step-destination{background:linear-gradient(140deg,#e4e1f6,#c4c3e5);color:#535a86}
.ritual-step-arrived{background:linear-gradient(135deg,#f1e5f3,#d8c6e3)}
.sleep-ritual-visual .application-note div p+p{margin-top:9px}
@keyframes application-mode-reveal{from{opacity:.3}to{opacity:1}}
@media(max-width:1100px) and (min-width:701px){.application-mode-panel--jetlag .ritual-process-layout{grid-template-columns:minmax(0,1fr) 220px;gap:26px}.ritual-process-layout .ritual-visual-steps--jetlag{grid-template-columns:1fr;text-align:left;gap:24px}.ritual-visual-steps--jetlag li{display:grid;grid-template-columns:86px minmax(0,1fr);gap:7px 17px}.ritual-process-layout .ritual-visual-steps--jetlag .ritual-step-image{width:86px;margin:0;grid-row:1/3}.ritual-visual-steps--jetlag h3{margin:0;align-self:end}.ritual-visual-steps--jetlag p{margin:0;max-width:none}.ritual-visual-steps--jetlag .ritual-step-arrow{display:none}}
@media(max-width:700px){.application-choice{margin-bottom:27px}.application-choice-question{font-size:19px;margin-bottom:16px}.application-switch{gap:11px}.application-switch button{grid-template-columns:1fr 20px;gap:11px 6px;min-height:142px;padding:16px 13px;border-radius:18px;align-content:start}.application-card-icon{grid-column:1;grid-row:1;width:31px;height:32px}.application-card-icon svg{width:30px;height:30px}.application-card-copy{grid-column:1/-1;grid-row:2;gap:5px}.application-card-copy strong{font-size:15px;min-height:39px;line-height:1.3}.application-card-copy>span{font-size:12px}.application-card-check{grid-column:2;grid-row:1}.ritual-process-layout .ritual-visual-steps--jetlag{grid-template-columns:1fr;text-align:left;gap:26px}.ritual-visual-steps--jetlag li{display:grid;grid-template-columns:88px minmax(0,1fr);gap:7px 17px}.ritual-process-layout .ritual-visual-steps--jetlag .ritual-step-image{width:88px;grid-row:1/3;margin:0}.ritual-visual-steps--jetlag h3{margin:0;align-self:end;font-size:15px}.ritual-visual-steps--jetlag p{margin:0;max-width:none}.ritual-visual-steps--jetlag .ritual-step-arrow{display:none}}
@media(prefers-reduced-motion:reduce){.application-mode-panel:not([hidden]){animation:none}.application-switch button,.application-card-check{transition:none}.application-switch button:hover{transform:none}}
