/* SOMOTE Next refinements. Loaded after every other stylesheet. */

/* Sturdier Bodoni. Holding the optical-size axis at 28 keeps large headlines
   from switching to the hairline display cut. !important is needed because the
   older sheets set headings with the font shorthand, which resets this axis. */
body *{font-variation-settings:'opsz' 28!important}
h1,h2{font-weight:500!important}

/* Appearance menu as a small half-filled circle. The native select stays on
   top, invisible, so it still opens and works with the keyboard. */
.theme-label{position:relative;width:44px;height:44px;justify-content:center;color:var(--head)}
.theme-label::before{content:"";width:16px;height:16px;border-radius:50%;border:1.5px solid currentColor;background:linear-gradient(90deg,currentColor 50%,transparent 50%)}
.theme-label select{position:absolute;inset:0;width:100%;min-height:0;padding:0;opacity:0;cursor:pointer}
.theme-label select option{color:#211e1a;background:#FCF7F0}
.theme-label:focus-within::before{outline:2px solid currentColor;outline-offset:4px}

/* "Your mind is already on repeat": the familiar problem, right after the hero. */
.repeat-section{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:50px;align-items:end;padding-top:75px;padding-bottom:75px;border-top:1px solid var(--hair)}
.repeat-section h2,.fit-band h2{font:400 clamp(37px,3.7vw,55px)/1.12 var(--serif);letter-spacing:-.025em;margin:18px 0 0;color:var(--head);text-wrap:balance}
.repeat-copy p{font-size:15px;line-height:1.8;color:var(--body);max-width:560px}
.repeat-copy p+p{margin-top:16px}
.repeat-copy .repeat-turn{font:italic 400 25px/1.35 var(--serif);color:var(--head);margin-top:22px}

/* Walkthrough chapter 1: photos chosen alongside the words. */
.tour-photos{margin-top:1.4cqw}
.tour-photos>small{display:block;font-size:.8cqw;letter-spacing:.13em;color:#78726a;margin-bottom:.8cqw}
.tour-photos>div{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.7cqw;align-items:start}
.tour-photos img,.tour-photos b{width:100%;height:auto;min-width:0;aspect-ratio:1;object-fit:cover;border-radius:.5cqw;display:block}
.tour-photos b{display:grid;place-items:center;border:1px dashed #211e1a55;font:400 2cqw var(--sans);color:#211e1a}
.tour-photos+.tour-opacity{margin-top:1.4cqw}
/* The laptop panel is short: smaller tiles and tighter rows keep the slider and tabs in view. */
.device-laptop-screen .tour-photos>div{grid-template-columns:repeat(4,4.4cqw)}
.device-laptop-screen .tour-app .tour-phrase{padding-top:.9cqw;padding-bottom:.9cqw}
.device-laptop-screen .tour-photos+.tour-opacity{margin:1.2cqw 0}
.device-laptop-screen .tour-app .somote-tour-panel>small{margin:.8cqw 0 1.2cqw}
.device-phone-screen .tour-photos{margin-top:5cqw}
.device-phone-screen .tour-photos>small{font-size:2.8cqw;margin-bottom:2.5cqw}
.device-phone-screen .tour-photos>div{gap:2.5cqw}
.device-phone-screen .tour-photos img,.device-phone-screen .tour-photos b{border-radius:1.6cqw}
.device-phone-screen .tour-photos b{font-size:6cqw}
.device-phone-screen .tour-photos+.tour-opacity{margin-top:6cqw}

/* Benefits: the "Imagine" lines moved here from the hero. */
.launch-benefits .section-heading>p{max-width:380px;font-size:14px;line-height:1.8;color:var(--body)}
.benefit-ask{display:block;font:400 23px/1.3 var(--serif);color:var(--head);margin-bottom:10px}

/* Designed to fit your life. */
.fit-band{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:50px;align-items:center;padding-top:75px;padding-bottom:75px;border-top:1px solid var(--hair)}
.fit-lede{font:italic 400 22px/1.4 var(--serif);color:var(--head);margin-top:22px;max-width:460px}
.fit-points{list-style:none;margin:0;padding:0;display:grid;gap:0}
.fit-points li{font-size:15px;line-height:1.75;color:var(--body);padding:18px 0;border-top:1px solid var(--hair)}
.fit-points li:last-child{border-bottom:1px solid var(--hair)}
.fit-points b{display:block;font:400 22px/1.3 var(--serif);color:var(--head);margin-bottom:4px}
@media(max-width:850px){.repeat-section,.fit-band{grid-template-columns:1fr;gap:28px;padding-top:50px;padding-bottom:50px}.repeat-section h2,.fit-band h2{font-size:39px}}

/* Research: three findings under the heading. */
.research-highlights.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.research-highlights.three>div:first-child{grid-column:1/-1;max-width:640px}
.research-highlights.three h3{text-wrap:balance}
@media(max-width:600px){.research-highlights.three{grid-template-columns:1fr}}

/* Discover: one photo per feature, framed to the photos' own shape. */
.discover-grid img{aspect-ratio:1.1}

/* Kaleidoscope: large, on black, continuing the Sanctuary band. */
.sanctuary-section{padding-bottom:30px}
.kaleido-band{background:#111110;color:#FCF7F0}
.kaleido-band .plus-story{padding-top:50px;padding-bottom:100px}
.kaleido-band .plus-art{aspect-ratio:1;background:#000}
.kaleido-band .plus-art>img{display:none}
.kaleido-band .kaleido-window{position:absolute;inset:0;width:auto;gap:0}
.kaleido-band .kaleido-window>.crystal-preview{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;border-radius:0;background-color:#000}
.kaleido-band #kaleido-still{display:block;width:100%;height:100%;object-fit:cover}
.kaleido-band h2,.kaleido-band h2 em,.kaleido-band .crystal-picker-label{color:#FCF7F0}
.kaleido-band h2,.kaleido-band h2 em{text-wrap:balance}
.kaleido-band h2 em{display:inline-block}
.kaleido-band p,.kaleido-band .eyebrow,.kaleido-band .micro{color:#cbc6b8}
.kaleido-band .plus-copy .soft-button{background:#FCF7F0;color:#111110;box-shadow:none}
.kaleido-band .crystal-color{background:transparent;color:#FCF7F0;border:1px solid #f4f1e955;box-shadow:none}
.kaleido-band .crystal-color[aria-pressed=true]{background:#FCF7F0;color:#111110;border-color:#FCF7F0}
.kaleido-band :focus-visible{outline:2px solid #FCF7F0;outline-offset:3px}

/* Sanctuary example: affirmations and photos take turns on a black screen, as in the app (sanctuary-demo.js). */
.sanctuary-demo{display:flex;flex-direction:column;align-items:center;gap:16px}
.sanctuary-demo .sanctuary-still{position:relative;display:block;width:100%;padding:0;overflow:hidden;container-type:inline-size}
.sanctuary-demo .sanctuary-still>.micro{position:absolute;top:18px;left:0;right:0;z-index:2;color:#e4dfd3;text-shadow:0 1px 6px #000a}
[data-sanctuary-demo] .sanct-word{position:absolute;left:8%;right:8%;top:50%;transform:translateY(-50%);margin:0;z-index:2;text-align:center;text-wrap:balance;font:400 clamp(20px,6.4cqi,32px)/1.3 'Bodoni Moda',Georgia,serif;color:#FCF7F0;text-shadow:0 2px 26px rgba(0,0,0,.45),0 1px 3px rgba(0,0,0,.55);opacity:0}
[data-sanctuary-demo] .sanct-pic{position:absolute;left:50%;top:50%;width:54%;height:auto;aspect-ratio:1;object-fit:cover;transform:translate(-50%,-50%);z-index:2;opacity:0;box-shadow:0 14px 40px #0007}
.sanctuary-demo .sanct-play{background:#FCF7F0;color:#111110;box-shadow:none;font-size:11px}
/* The full-screen preview plays the same example behind its controls. */
#quiet-dialog[open]{justify-content:flex-start;overflow:hidden}
#quiet-dialog>:not(.quiet-stage){position:relative;z-index:2}
#quiet-dialog>.micro{color:#e4dfd3;text-shadow:0 1px 6px #000a}
#quiet-dialog>.micro:last-child{margin-top:auto}
.quiet-stage{position:absolute;inset:0;z-index:0}
#quiet-dialog .sanct-word{left:0;right:0;max-width:min(800px,86vw);margin:0 auto;font-size:clamp(32px,5vw,65px);line-height:1.2}
#quiet-dialog .sanct-pic{width:min(52vh,70vw)}
/* Features page: the same example in its 16:10 frame. */
.sanctuary-demo .sanct-preview{width:100%;overflow:hidden;container-type:inline-size}
.sanctuary-demo .sanct-preview .sanct-pic{width:auto;height:62%}

/* Walkthrough: the app's Kaleidoscope controls over the pattern, with the colors tapped through. */
.tour-kal-panel{position:absolute;left:3cqw;bottom:3cqw;width:33cqw;padding:1.5cqw;border-radius:1.4cqw;background:#161616eb;box-shadow:0 1cqw 3cqw #0009;color:#FCF7F0;text-align:left;text-shadow:none;display:flex;flex-direction:column;gap:1cqw;font:500 1.05cqw/1.2 var(--sans)}
.tour-kal-panel b{font:500 1.3cqw/1.2 var(--serif)}
.kal-row{display:flex;align-items:center;justify-content:space-between}
.kal-lbl{font-size:.85cqw;letter-spacing:.14em;text-transform:uppercase;color:#cfc8bc}
.tour-kal-panel em{font-style:normal}
.kal-seg{display:flex;gap:.3cqw;padding:.3cqw;border-radius:9cqw;background:#0b0b0a;font-style:normal}
.kal-seg em{padding:.35cqw .8cqw;border-radius:9cqw;color:#cfc8bc}
.kal-seg em.on{background:#FCF7F0;color:#211E1A}
.kal-chips{display:flex;flex-wrap:wrap;gap:.45cqw}
.kal-chips em{position:relative;padding:.45cqw .75cqw;border-radius:9cqw;background:#262523;color:#FCF7F0;transition:background-color .15s,color .15s,transform .15s}
.kal-chips em.on{background:#FCF7F0;color:#211E1A;transform:translateY(.08cqw)}
.kal-chips em.on::after{content:"";position:absolute;left:50%;top:50%;width:2.4cqw;height:2.4cqw;margin:-1.2cqw;border-radius:50%;background:#fff6;animation:kal-tap .55s ease-out both;pointer-events:none}
@keyframes kal-tap{from{transform:scale(.3);opacity:1}to{transform:scale(1.5);opacity:0}}
.device-phone-screen .tour-kal-panel{left:5cqw;right:5cqw;bottom:5cqw;width:auto;padding:4.5cqw;border-radius:5cqw;gap:3cqw;font-size:3.2cqw}
.device-phone-screen .tour-kal-panel b{font-size:4.2cqw}
.device-phone-screen .kal-lbl{font-size:2.5cqw}
.device-phone-screen .kal-seg{gap:1cqw;padding:1cqw}
.device-phone-screen .kal-seg em{padding:1.1cqw 2.6cqw}
.device-phone-screen .kal-chips{gap:1.4cqw}
.device-phone-screen .kal-chips em{padding:1.4cqw 2.4cqw}
.device-phone-screen .kal-chips em.on::after{width:8cqw;height:8cqw;margin:-4cqw}
@media(prefers-reduced-motion:reduce){.kal-chips em.on::after{animation:none;opacity:0}}

/* Walkthrough: the app's Sound tab with its real preset cards. */
.tour-sound{display:none;position:absolute;inset:0;overflow:hidden;background:#FCF7F0;color:#211E1A;padding:3cqw 5cqw;flex-direction:column;gap:1.2cqw;text-align:left}
.tour-stage[data-scene=sound] .tour-sound{display:flex}
.tour-sound h4{margin:0;font:500 3cqw/1.1 var(--serif)}
.snd-tray{display:grid;grid-template-columns:1fr 1fr;gap:.4cqw;padding:.4cqw;border-radius:9cqw;background:#F0EBE2;box-shadow:inset 0 1px 3px #211e1a24;font:500 1.1cqw/1 var(--sans);text-align:center}
.snd-tray em{font-style:normal;padding:.7cqw;border-radius:9cqw;background:#FEFCF8;box-shadow:0 1px 3px #211e1a2e;transition:background-color .15s,color .15s}
.snd-tray em.on{background:#211E1A;color:#FCF7F0;box-shadow:inset 0 2px 5px #000a}
.snd-grid{display:none;flex:1;min-height:0;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:1cqw}
.tour-sound[data-mode=binaural] .snd-binaural,.tour-sound[data-mode=bilateral] .snd-bilateral{display:grid}
.snd-bilateral .snd-wide{grid-column:span 2}
.snd-card{position:relative;min-height:0;border-radius:1.2cqw;overflow:hidden;background-size:cover;background-position:center;display:flex;flex-direction:column;justify-content:flex-end;padding:1cqw;color:#fff;isolation:isolate;box-shadow:0 .5cqw 1cqw -.5cqw #211e1a99;transition:transform .15s,box-shadow .15s}
.snd-card::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,#000000b3,#00000059 38%,#0000 70%)}
.snd-card[data-snd=sleep]{background-position:center top}
.snd-card[data-snd=meditation]{background-position:center bottom}
.snd-card b{font:400 1.8cqw/1.1 var(--serif)}
.snd-card small{font:500 .85cqw/1.3 var(--sans);letter-spacing:.04em}
.snd-card.on{transform:translateY(1px) scale(.985);box-shadow:0 0 0 .2cqw #FCF7F0,0 0 0 .4cqw #211E1A}
.device-phone-screen .tour-sound{padding:16cqw 5cqw 6cqw;gap:4cqw}
.device-phone-screen .tour-sound h4{font-size:9cqw}
.device-laptop-screen .snd-tray{width:30cqw}
.device-phone-screen .snd-tray{font-size:3.2cqw;padding:1cqw;gap:1cqw}
.device-phone-screen .snd-tray em{padding:2.2cqw 1cqw}
.device-phone-screen .snd-grid{grid-template-columns:1fr 1fr;gap:2.5cqw}
.device-phone-screen .snd-card{border-radius:4cqw;padding:3cqw}
.device-phone-screen .snd-card b{font-size:5.2cqw}
.device-phone-screen .snd-card small{font-size:2.6cqw}
.device-phone-screen .snd-card.on{box-shadow:0 0 0 .6cqw #FCF7F0,0 0 0 1.2cqw #211E1A}